/* ========================================================================== Landing — Block 1 (Hero) · TODO-009 · TASK-04 Verbatim port of design-mocks.html H1 variant (Split + Product UI Dashboard). ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; } html { /* Anchor scrolling offset so sticky header doesn't cover section start */ scroll-padding-top: 96px; scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; background: var(--lp-bg-hero); color: var(--lp-text-primary); } /* ===== LOCKED PALETTE (Slate + Deep Teal) ===== */ :root { --lp-bg-hero: oklch(0.980 0.005 220); /* cream cool — hero */ --lp-bg-warm: oklch(0.975 0.008 75); /* warm off-white — challenge, outcomes */ --lp-bg-cream: oklch(0.978 0.006 95); /* cream — product, segments */ --lp-bg-next: oklch(0.20 0.03 230); /* slate dark — solution, how-it-works, form */ --lp-bg-next-elev: oklch(0.24 0.03 230); /* slightly lighter slate for cards on dark */ --lp-accent: oklch(0.24 0.02 240); --lp-accent-strong: oklch(0.18 0.02 240); --lp-accent-2: oklch(0.50 0.10 200); --lp-accent-2-strong: oklch(0.42 0.11 200); --lp-accent-3: oklch(0.40 0.08 145); /* deep forest sage — second accent (hospitality-natural) */ --lp-accent-3-soft: oklch(0.40 0.08 145 / 0.14); --lp-accent-3-bg: oklch(0.40 0.08 145 / 0.08); --lp-accent-fg: oklch(0.98 0.005 220); --lp-accent-soft: oklch(0.24 0.02 240 / 0.08); --lp-accent-2-soft: oklch(0.50 0.10 200 / 0.14); --lp-text-primary: oklch(0.18 0.02 240); --lp-text-secondary: oklch(0.32 0.02 240); --lp-text-muted: oklch(0.50 0.02 240); --lp-text-faint: oklch(0.65 0.02 240); --lp-text-on-next: oklch(0.98 0.005 220); --lp-text-muted-next: oklch(0.74 0.04 220); --lp-text-faint-next: oklch(0.58 0.03 220); --lp-card-bg: oklch(1 0 0); --lp-card-border: oklch(0.24 0.02 240 / 0.12); --lp-card-border-strong: oklch(0.24 0.02 240 / 0.20); --lp-card-border-dark: oklch(1 0 0 / 0.08); --lp-card-border-dark-strong: oklch(1 0 0 / 0.14); --lp-row-hover: oklch(0.50 0.10 200 / 0.04); --lp-divider: oklch(0.24 0.02 240 / 0.08); --lp-divider-dark: oklch(1 0 0 / 0.08); --lp-glow: oklch(0.50 0.10 200 / 0.12); --lp-mesh-1: oklch(0.88 0.05 200 / 0.32); --lp-mesh-2: oklch(0.90 0.04 240 / 0.30); --lp-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ===== A11y — skip link + focus styles ===== */ .lp-skip { position: absolute; top: 12px; left: 12px; z-index: 1000; padding: 10px 16px; background: var(--lp-accent); color: var(--lp-accent-fg); font: 500 13px/1 'Inter', system-ui, sans-serif; text-decoration: none; border-radius: 6px; transform: translateY(-150%); transition: transform 0.2s var(--lp-ease); } .lp-skip:focus, .lp-skip:focus-visible { transform: translateY(0); outline: 2px solid var(--lp-accent-2); outline-offset: 3px; } /* Remove default mouse-click outline; show on keyboard nav only */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--lp-accent-2); outline-offset: 3px; border-radius: 6px; } /* Buttons & pill-like inputs already have their own border-radius; the outline naturally follows it in modern browsers. */ .btn:focus-visible, .btn-outline:focus-visible, .lp-form-submit:focus-visible { outline: 2px solid var(--lp-accent-2); outline-offset: 3px; } .lp-lang-select:focus-visible { outline: 2px solid var(--lp-accent-2); outline-offset: 3px; border-color: transparent; } /* Inputs: keep border-bottom focus pattern, no extra ring */ .lp-form-field input:focus-visible, .lp-form-field select:focus-visible { outline: none; } /* Form card overall focus-within hint */ .lp-form-card:focus-within { box-shadow: 0 36px 80px oklch(0 0 0 / 0.32), 0 14px 30px oklch(0 0 0 / 0.18), 0 0 0 1px var(--lp-accent-2) inset; } /* ===== Scroll reveals (set on by landing-header.js) ===== */ .lp-reveal-ready .lp-section-head, .lp-reveal-ready .b2-card, .lp-reveal-ready .b3-step, .lp-reveal-ready .b4-card, .lp-reveal-ready .b6-card, .lp-reveal-ready .b7-card, .lp-reveal-ready .lp-form-card, .lp-reveal-ready .b5-split, .lp-reveal-ready .b8-perks { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--lp-ease), transform 0.7s var(--lp-ease); will-change: opacity, transform; } .lp-reveal-ready .is-visible { opacity: 1; transform: none; } /* Stagger cards inside grids — delay subsequent siblings */ .lp-reveal-ready .b2-card:nth-child(2), .lp-reveal-ready .b4-card:nth-child(2), .lp-reveal-ready .b6-card:nth-child(2), .lp-reveal-ready .b7-card:nth-child(2), .lp-reveal-ready .b3-step:nth-child(2) { transition-delay: 80ms; } .lp-reveal-ready .b2-card:nth-child(3), .lp-reveal-ready .b4-card:nth-child(3), .lp-reveal-ready .b6-card:nth-child(3), .lp-reveal-ready .b7-card:nth-child(3), .lp-reveal-ready .b3-step:nth-child(3) { transition-delay: 160ms; } .lp-reveal-ready .b4-card:nth-child(4), .lp-reveal-ready .b6-card:nth-child(4), .lp-reveal-ready .b3-step:nth-child(4) { transition-delay: 240ms; } .lp-reveal-ready .b3-step:nth-child(5) { transition-delay: 320ms; } /* prefers-reduced-motion — disable all motion */ @media (prefers-reduced-motion: reduce) { .lp-reveal-ready .lp-section-head, .lp-reveal-ready .b2-card, .lp-reveal-ready .b3-step, .lp-reveal-ready .b4-card, .lp-reveal-ready .b6-card, .lp-reveal-ready .b7-card, .lp-reveal-ready .lp-form-card, .lp-reveal-ready .b5-split, .lp-reveal-ready .b8-perks { opacity: 1; transform: none; transition: none; } /* Disable all CSS animations + transitions globally for reduced-motion */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ===== Sticky header ===== */ .lp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 24px; background: transparent; border-bottom: 1px solid transparent; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, padding 0.3s var(--lp-ease); } .lp-header[data-state="scrolled"] { background: oklch(0.98 0.005 220 / 0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--lp-card-border); padding: 12px 24px; } .lp-header-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .lp-header-logo { display: inline-flex; align-items: center; text-decoration: none; } .lp-header-logo img { display: block; height: 30px; width: auto; transition: opacity 0.2s ease; } .lp-header-logo:hover img { opacity: 0.85; } .lp-header-actions { display: inline-flex; align-items: center; gap: 12px; } .lp-lang-wrap { position: relative; display: inline-flex; align-items: center; } .lp-lang-wrap::after { content: ''; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-right: 1.5px solid var(--lp-text-muted); border-bottom: 1.5px solid var(--lp-text-muted); transform: rotate(45deg); pointer-events: none; transition: border-color 0.2s ease; } .lp-lang-wrap:hover::after { border-color: var(--lp-accent-2); } .lp-lang-select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid transparent; padding: 7px 26px 7px 12px; border-radius: 999px; font: 500 13px/1 'Inter', system-ui, sans-serif; letter-spacing: -0.005em; color: var(--lp-text-primary); cursor: pointer; outline: none; transition: background-color 0.2s ease, border-color 0.2s ease; } .lp-lang-select:hover { background-color: oklch(0.20 0.02 240 / 0.04); } .lp-lang-select:focus-visible { border-color: var(--lp-accent-2); } @media (max-width: 560px) { .lp-header { padding: 14px 18px; } .lp-header[data-state="scrolled"] { padding: 10px 18px; } .lp-header-logo img { height: 26px; } .lp-lang-select { padding: 6px 24px 6px 10px; font-size: 12px; } } /* ===== Hero shell ===== */ .hero { position: relative; min-height: 100vh; padding: 140px 24px 100px; overflow: hidden; background: var(--lp-bg-hero); isolation: isolate; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 72% 28%, var(--lp-mesh-1), transparent 60%), radial-gradient(ellipse 60% 50% at 18% 72%, var(--lp-mesh-2), transparent 60%); z-index: -1; pointer-events: none; } /* Shared text atoms */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid var(--lp-card-border); background: oklch(1 0 0 / 0.6); font: 500 12px/1 'Inter'; color: var(--lp-text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 32px; } .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-accent-2); box-shadow: 0 0 12px var(--lp-glow); } h1.hero-title { font-family: 'Fraunces', Georgia, serif; line-height: 1.04; font-weight: 500; letter-spacing: -0.025em; color: var(--lp-text-primary); margin-bottom: 28px; } h1.hero-title .accent-word { font-style: italic; font-weight: 400; color: var(--lp-accent-2); letter-spacing: -0.02em; } .hero-sub { font: 400 19px/1.55 'Inter'; color: var(--lp-text-muted); max-width: 540px; margin-bottom: 40px; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 6px; font: 500 14px/1 'Inter'; letter-spacing: 0.02em; cursor: pointer; border: 1px solid transparent; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); text-decoration: none; } .btn-primary { background: var(--lp-accent); color: var(--lp-accent-fg); box-shadow: 0 4px 14px oklch(0 0 0 / 0.10); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px oklch(0 0 0 / 0.18); } .btn-ghost { background: transparent; color: var(--lp-text-primary); border: none; text-decoration: underline; text-decoration-color: var(--lp-card-border); text-underline-offset: 6px; padding: 15px 8px; } .btn-ghost:hover { text-decoration-color: var(--lp-accent); } .btn .arrow { transition: transform 0.25s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ============================================================ H1 — SPLIT + PRODUCT-UI DASHBOARD ============================================================ */ .hero-container { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1.1fr; gap: 80px; align-items: center; } h1.hero-title { font-size: clamp(48px, 6.2vw, 80px); } @media (max-width: 960px) { .hero-container { grid-template-columns: 1fr; gap: 60px; } } .product-card { position: relative; background: var(--lp-card-bg); border: 1px solid var(--lp-card-border-strong); border-radius: 18px; overflow: hidden; box-shadow: 0 36px 80px oklch(0.20 0.02 240 / 0.10), 0 12px 28px oklch(0.20 0.02 240 / 0.06), 0 0 0 1px oklch(1 0 0 / 0.6) inset; animation: card-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } @keyframes card-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* live indicator (used inside section bar) */ .live-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 'JetBrains Mono'; color: var(--lp-accent-3); text-transform: uppercase; letter-spacing: 0.14em; } .live-tag .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-accent-3); box-shadow: 0 0 8px oklch(0.40 0.08 145 / 0.55); animation: live-pulse 1.6s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* HQ standard section — "this is what HQ defined" */ .pc-standard { padding: 28px 26px 24px; background: var(--lp-accent-3-bg); border-bottom: 1px solid var(--lp-divider); } .pc-standard .ps-eyebrow { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 'JetBrains Mono'; color: var(--lp-accent-3); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 12px; } .pc-standard .ps-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-accent-3); box-shadow: 0 0 8px oklch(0.45 0.18 258 / 0.55); } .pc-standard .ps-headline { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--lp-text-primary); margin-bottom: 18px; } .pc-standard .ps-headline em { font-style: italic; font-weight: 400; color: var(--lp-accent-2); } .pc-standard .ps-reqs { display: flex; flex-wrap: wrap; gap: 8px; } .pc-standard .ps-reqs .req { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; background: oklch(1 0 0); border: 1px solid var(--lp-card-border); border-radius: 999px; font: 500 12px/1 'Inter'; color: var(--lp-text-primary); letter-spacing: -0.005em; } .pc-standard .ps-reqs .req .check { width: 13px; height: 13px; border-radius: 50%; background: var(--lp-accent-2); color: white; font: 700 8px/13px 'Inter'; text-align: center; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Locations section header — "and locations meet it" */ .pc-section-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 26px 12px; font: 600 11px/1 'JetBrains Mono'; color: var(--lp-accent-3); text-transform: uppercase; letter-spacing: 0.14em; } .pc-section-bar .sb-right { font-weight: 500; color: var(--lp-text-muted); letter-spacing: 0.08em; } /* Table-like locations list */ .pc-table { padding: 6px 0; } .pc-table .pc-row { display: grid; grid-template-columns: 1.3fr 1.1fr 0.8fr auto; align-items: center; gap: 14px; padding: 12px 26px; transition: background 0.2s ease; } .pc-table .pc-row:hover { background: var(--lp-row-hover); } .pc-table .pc-row.head { padding-top: 14px; padding-bottom: 10px; font: 500 10px/1 'JetBrains Mono'; color: var(--lp-text-faint); text-transform: uppercase; letter-spacing: 0.12em; pointer-events: none; } .pc-table .pc-row .city { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 16px; line-height: 1.2; color: var(--lp-text-primary); letter-spacing: -0.015em; } .pc-table .pc-row .city .flag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-accent-2); flex-shrink: 0; } .pc-table .pc-row .city .country { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--lp-text-muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 2px; } .pc-table .pc-row .rating { display: inline-flex; align-items: baseline; gap: 4px; } .pc-table .pc-row .rating .star { color: var(--lp-accent-2); font-size: 11px; } .pc-table .pc-row .rating .val { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--lp-text-primary); } .pc-table .pc-row .rating .ct { font: 500 11px/1 'Inter'; color: var(--lp-text-faint); margin-left: 4px; } .pc-table .pc-row .nps { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 15px; color: var(--lp-text-primary); letter-spacing: -0.01em; } .pc-table .pc-row .nps .lbl { font-family: 'Inter'; font-size: 10px; font-weight: 500; color: var(--lp-accent-3); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; } .pc-table .pc-row .trend { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font: 600 11px/1 'JetBrains Mono'; color: var(--lp-accent-2); background: var(--lp-accent-2-soft); padding: 3px 6px; border-radius: 5px; letter-spacing: 0.02em; } .pc-table .pc-row .trend .arr { font-size: 10px; } .pc-table .pc-row .aligned { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; background: var(--lp-accent-2-soft); color: var(--lp-accent-2-strong); border-radius: 999px; font: 600 10px/1 'Inter'; text-transform: uppercase; letter-spacing: 0.06em; } .pc-table .pc-row .aligned .check { width: 12px; height: 12px; border-radius: 50%; background: var(--lp-accent-2); color: white; font: 700 8px/12px 'Inter'; text-align: center; display: inline-flex; align-items: center; justify-content: center; } /* Footer chrome */ .pc-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--lp-divider); background: oklch(0.985 0.004 220); font: 500 11px/1.3 'Inter'; color: var(--lp-text-muted); letter-spacing: -0.005em; } .pc-foot strong { color: var(--lp-text-primary); font-weight: 600; } .pc-foot .right { display: inline-flex; align-items: center; gap: 18px; } .pc-foot .right .sep { width: 1px; height: 10px; background: var(--lp-divider); } .pc-foot .ago { font-family: 'JetBrains Mono'; font-size: 10px; color: var(--lp-text-faint); letter-spacing: 0.04em; } @media (max-width: 720px) { .pc-table .pc-row { grid-template-columns: 1.3fr 0.8fr auto; } .pc-table .pc-row .nps { display: none; } } @media (max-width: 480px) { .hero { padding: 110px 18px 70px; } .hero-container { gap: 44px; } .pc-standard { padding: 22px 20px 20px; } .pc-standard .ps-headline { font-size: 22px; } .pc-standard .ps-reqs .req { font-size: 11px; padding: 5px 9px 5px 7px; } .pc-section-bar, .pc-foot { padding-left: 20px; padding-right: 20px; } .pc-table .pc-row { padding-left: 20px; padding-right: 20px; gap: 10px; } .pc-table .pc-row .rating .ct { display: none; } .pc-table .pc-row .trend { padding: 2px 5px; font-size: 10px; } } /* ============================================================ Shared section atoms — used by blocks 2-8 ============================================================ */ .lp-section { padding: 120px 24px; position: relative; } .lp-section-container { max-width: 1280px; margin: 0 auto; } .lp-section-head { max-width: 760px; margin-bottom: 64px; } .lp-section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 'JetBrains Mono', monospace; color: var(--lp-accent-2); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 20px; } .lp-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--lp-accent-2); } .lp-eyebrow.sage { color: var(--lp-accent-3); } .lp-eyebrow.sage::before { background: var(--lp-accent-3); } .lp-eyebrow.on-dark { color: var(--lp-accent-2); } .lp-headline { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.022em; color: var(--lp-text-primary); } .lp-headline.on-dark { color: var(--lp-text-on-next); } .lp-headline em { font-style: italic; font-weight: 400; color: var(--lp-accent-2); } .lp-lead { margin-top: 18px; font: 400 17px/1.55 'Inter', system-ui, sans-serif; color: var(--lp-text-muted); max-width: 620px; } .lp-lead.on-dark { color: var(--lp-text-muted-next); } /* Section-level CTA row, centered */ .lp-section-cta { display: flex; justify-content: center; margin-top: 64px; } /* ============================================================ Block 2 — The challenge (unified cream-cool with hero) Premium hospitality tone: editorial typography, multi-layer shadows, dashboard mirrors hero (scatter ↔ aligned narrative). ============================================================ */ .b2-challenge { background: var(--lp-bg-hero); padding-top: 160px; } /* ---------- 3-card challenge grid ---------- */ .b2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .b2-card { position: relative; background: var(--lp-card-bg); border: 1px solid var(--lp-card-border); border-radius: 16px; padding: 44px 36px 36px; display: flex; flex-direction: column; isolation: isolate; box-shadow: 0 1px 2px oklch(0.20 0.02 240 / 0.04), 0 0 0 1px oklch(1 0 0 / 0.6) inset; transition: transform 0.3s var(--lp-ease), border-color 0.3s ease, box-shadow 0.3s ease; } /* Corner scatter motif — 3 hairlines of decreasing length (sage) */ .b2-card::after { content: ''; position: absolute; top: 32px; right: 32px; width: 44px; height: 22px; background: linear-gradient(90deg, var(--lp-accent-3) 0%, transparent 100%) no-repeat 0 0 / 44px 1px, linear-gradient(90deg, var(--lp-accent-3) 0%, transparent 100%) no-repeat 0 8px / 32px 1px, linear-gradient(90deg, var(--lp-accent-3) 0%, transparent 100%) no-repeat 0 16px / 20px 1px; opacity: 0.45; pointer-events: none; transition: opacity 0.3s ease; } .b2-card:hover { transform: translateY(-3px); border-color: var(--lp-card-border-strong); box-shadow: 0 24px 56px oklch(0.20 0.02 240 / 0.10), 0 6px 16px oklch(0.20 0.02 240 / 0.06), 0 0 0 1px oklch(1 0 0 / 0.6) inset; } .b2-card:hover::after { opacity: 0.7; } .b2-card .b2-num { display: block; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: var(--lp-accent-3); margin-bottom: 32px; } .b2-card h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 23px; line-height: 1.24; letter-spacing: -0.018em; color: var(--lp-text-primary); margin: 0 0 14px; } .b2-card p { font: 400 15px/1.62 'Inter', system-ui, sans-serif; color: var(--lp-text-secondary); letter-spacing: -0.005em; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .b2-challenge { padding-top: 120px; } .b2-grid { grid-template-columns: 1fr; gap: 14px; } .b2-card { padding: 36px 28px 28px; } .b2-card .b2-num { font-size: 52px; margin-bottom: 24px; } } @media (max-width: 560px) { .lp-section { padding: 80px 20px; } .b2-challenge { padding-top: 100px; } } /* ============================================================ Block 3 — The solution (dark slate, horizontal step-flow) First tonal contrast in the page: cream-cool → slate-dark. ============================================================ */ .b3-solution { background: var(--lp-bg-next); color: var(--lp-text-on-next); position: relative; overflow: hidden; isolation: isolate; } .b3-solution::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 18% 22%, oklch(0.50 0.10 200 / 0.10), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 78%, oklch(0.40 0.08 145 / 0.08), transparent 60%); z-index: -1; pointer-events: none; } .b3-solution .lp-section-head { margin-bottom: 96px; max-width: 720px; } /* Outlined CTA — for dark sections */ .btn-outline { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 6px; font: 500 14px/1 'Inter', system-ui, sans-serif; letter-spacing: 0.02em; cursor: pointer; border: 1px solid var(--lp-card-border-dark-strong); background: transparent; color: var(--lp-text-on-next); text-decoration: none; transition: all 0.25s var(--lp-ease); } .btn-outline .arrow { transition: transform 0.25s ease; } .btn-outline:hover { border-color: var(--lp-accent-2); background: oklch(0.50 0.10 200 / 0.10); transform: translateY(-1px); } .btn-outline:hover .arrow { transform: translateX(3px); } /* Step timeline — 5 equal columns, dots connected by hairline */ .b3-steps { position: relative; display: flex; align-items: flex-start; gap: 24px; } .b3-steps::before { content: ''; position: absolute; left: calc(10% + 0px); right: calc(10% + 0px); top: 9px; height: 1px; background: linear-gradient(90deg, oklch(0.50 0.10 200 / 0.20) 0%, var(--lp-accent-2) 50%, oklch(0.50 0.10 200 / 0.20) 100%); z-index: 0; } .b3-step { flex: 1 1 0; position: relative; padding-top: 36px; text-align: center; z-index: 1; } .b3-step::before { content: ''; position: absolute; left: 50%; top: 0; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--lp-accent-2); box-shadow: 0 0 0 4px var(--lp-bg-next), 0 0 0 5px oklch(0.50 0.10 200 / 0.40), 0 0 22px oklch(0.50 0.10 200 / 0.50); transition: transform 0.3s var(--lp-ease), box-shadow 0.3s ease; } .b3-step:hover::before { transform: scale(1.15); } .b3-step-num { display: block; font: 600 11px/1 'JetBrains Mono', monospace; color: var(--lp-accent-3); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; } .b3-step h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.22; letter-spacing: -0.018em; color: var(--lp-text-on-next); margin: 0 0 12px; } .b3-step p { font: 400 14px/1.55 'Inter', system-ui, sans-serif; color: var(--lp-text-muted-next); letter-spacing: -0.005em; padding: 0 6px; } /* Section CTA on dark — bigger spacing */ .lp-section-cta.on-dark { margin-top: 88px; } /* Responsive */ @media (max-width: 960px) { .b3-solution .lp-section-head { margin-bottom: 64px; } .b3-steps { flex-direction: column; gap: 0; align-items: stretch; } .b3-steps::before { left: 9px; right: auto; top: 9px; bottom: 9px; width: 1px; height: auto; background: linear-gradient(180deg, oklch(0.50 0.10 200 / 0.20) 0%, var(--lp-accent-2) 50%, oklch(0.50 0.10 200 / 0.20) 100%); } .b3-step { padding-top: 0; padding-left: 40px; padding-bottom: 40px; text-align: left; } .b3-step:last-child { padding-bottom: 0; } .b3-step::before { left: 0; top: 0; margin-left: 0; } .b3-step p { padding: 0; } .lp-section-cta.on-dark { margin-top: 64px; } } @media (max-width: 560px) { .b3-step h3 { font-size: 19px; } } /* ============================================================ Block 4 — Product (light, 2×2 capability cards with mini-UI) Each card has a small product preview in the corner. ============================================================ */ .b4-product { background: var(--lp-bg-hero); } .b4-product .lp-section-head { max-width: 760px; margin-bottom: 80px; } .b4-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .b4-card { position: relative; background: var(--lp-card-bg); border: 1px solid var(--lp-card-border); border-radius: 16px; padding: 36px 36px 40px; min-height: 280px; display: flex; flex-direction: column; isolation: isolate; box-shadow: 0 1px 2px oklch(0.20 0.02 240 / 0.04), 0 0 0 1px oklch(1 0 0 / 0.6) inset; transition: transform 0.3s var(--lp-ease), border-color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .b4-card:hover { transform: translateY(-3px); border-color: var(--lp-card-border-strong); box-shadow: 0 28px 56px oklch(0.20 0.02 240 / 0.10), 0 6px 16px oklch(0.20 0.02 240 / 0.06), 0 0 0 1px oklch(1 0 0 / 0.6) inset; } .b4-card-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 'JetBrains Mono', monospace; color: var(--lp-accent-2); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px; } .b4-card-eyebrow::before { content: ''; width: 16px; height: 1px; background: currentColor; } .b4-card.sage .b4-card-eyebrow { color: var(--lp-accent-3); } .b4-card-text { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.22; letter-spacing: -0.022em; color: var(--lp-text-primary); max-width: 380px; margin-top: auto; } /* Mini-UI preview — abstract product window in top-right of each card */ .b4-mini { position: absolute; top: 30px; right: 30px; width: 148px; height: 104px; background: oklch(0.985 0.005 220); border: 1px solid var(--lp-card-border); border-radius: 10px; padding: 11px 12px; pointer-events: none; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 22px oklch(0.20 0.02 240 / 0.06), 0 0 0 1px oklch(1 0 0 / 0.5) inset; overflow: hidden; transition: transform 0.35s var(--lp-ease); } .b4-card:hover .b4-mini { transform: translate(-2px, -3px) rotate(-0.6deg); } /* Shared mini atoms */ .b4-mini .row { height: 4px; border-radius: 999px; background: var(--lp-divider); } .b4-mini .row.short { width: 38px; } .b4-mini .row.med { width: 60px; } .b4-mini .row.long { width: 84px; } .b4-mini .row.full { width: 100%; } .b4-mini .row.teal { background: var(--lp-accent-2); } .b4-mini .row.sage { background: var(--lp-accent-3); } /* ----- LEARN mini: lesson card with progress ----- */ .b4-mini--learn .mini-head { font: 500 8px/1 'Fraunces', Georgia, serif; color: var(--lp-text-primary); margin-bottom: 4px; letter-spacing: -0.01em; } .b4-mini--learn .mini-progress { margin-top: auto; display: flex; align-items: center; gap: 6px; } .b4-mini--learn .mini-progress .track { flex: 1; height: 4px; background: var(--lp-divider); border-radius: 999px; overflow: hidden; } .b4-mini--learn .mini-progress .fill { width: 70%; height: 100%; background: var(--lp-accent-2); border-radius: 999px; } .b4-mini--learn .mini-progress .pct { font: 600 7px/1 'JetBrains Mono', monospace; color: var(--lp-accent-2); letter-spacing: 0.04em; } /* ----- REINFORCE mini: quiz options ----- */ .b4-mini--reinforce .mini-q { width: 70px; height: 4px; background: var(--lp-divider); border-radius: 999px; margin-bottom: 4px; } .b4-mini--reinforce .mini-opts { display: flex; flex-direction: column; gap: 5px; } .b4-mini--reinforce .mini-opt { display: flex; align-items: center; gap: 6px; } .b4-mini--reinforce .mini-opt .ring { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--lp-card-border-strong); } .b4-mini--reinforce .mini-opt .label { height: 4px; border-radius: 999px; background: var(--lp-divider); } .b4-mini--reinforce .mini-opt .label.a { width: 56px; } .b4-mini--reinforce .mini-opt .label.b { width: 70px; } .b4-mini--reinforce .mini-opt .label.c { width: 48px; } .b4-mini--reinforce .mini-opt.correct .ring { position: relative; border: none; background: var(--lp-accent-3); } .b4-mini--reinforce .mini-opt.correct .ring::after { content: '✓'; position: absolute; inset: 0; font: 700 6px/8px 'Inter', sans-serif; color: white; text-align: center; } .b4-mini--reinforce .mini-opt.correct .label { background: var(--lp-accent-3); } /* ----- PRACTICE mini: chat bubbles ----- */ .b4-mini--practice { justify-content: flex-end; gap: 5px; } .b4-mini--practice .bubble { max-width: 86%; padding: 5px 8px; border-radius: 8px; display: flex; flex-direction: column; gap: 3px; } .b4-mini--practice .bubble .line { height: 3px; border-radius: 999px; } .b4-mini--practice .bubble.guest { align-self: flex-start; background: oklch(0.92 0.02 220); border-bottom-left-radius: 3px; } .b4-mini--practice .bubble.guest .line { background: oklch(0.45 0.02 240 / 0.55); } .b4-mini--practice .bubble.guest .line.a { width: 60px; } .b4-mini--practice .bubble.guest .line.b { width: 36px; } .b4-mini--practice .bubble.staff { align-self: flex-end; background: var(--lp-accent-2-soft); border-bottom-right-radius: 3px; } .b4-mini--practice .bubble.staff .line { background: var(--lp-accent-2-strong); } .b4-mini--practice .bubble.staff .line.a { width: 70px; } .b4-mini--practice .bubble.staff .line.b { width: 46px; } /* ----- ASK mini: search input + answer with cite ----- */ .b4-mini--ask { justify-content: space-between; } .b4-mini--ask .mini-input { display: flex; align-items: center; gap: 6px; padding: 4px 7px 4px 8px; border: 1px solid var(--lp-card-border); border-radius: 999px; background: oklch(1 0 0); } .b4-mini--ask .mini-input .q { font: 700 9px/1 'Inter', sans-serif; color: var(--lp-accent-3); } .b4-mini--ask .mini-input .line { flex: 1; height: 3px; background: var(--lp-divider); border-radius: 999px; } .b4-mini--ask .mini-input .cursor { width: 1px; height: 9px; background: var(--lp-accent-2); animation: cursor-blink 1.1s steps(1) infinite; } @keyframes cursor-blink { 50% { opacity: 0; } } .b4-mini--ask .mini-answer { display: flex; flex-direction: column; gap: 4px; } .b4-mini--ask .mini-answer .line { height: 3px; border-radius: 999px; background: var(--lp-divider); } .b4-mini--ask .mini-answer .line.a { width: 100%; } .b4-mini--ask .mini-answer .line.b { width: 78%; } .b4-mini--ask .mini-answer .line.c { width: 52%; } .b4-mini--ask .mini-cite { display: inline-flex; align-items: center; gap: 4px; font: 600 7px/1 'JetBrains Mono', monospace; color: var(--lp-accent-3); letter-spacing: 0.1em; text-transform: uppercase; } .b4-mini--ask .mini-cite::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--lp-accent-3); } /* Responsive */ @media (max-width: 760px) { .b4-grid { grid-template-columns: 1fr; gap: 14px; } .b4-card { padding: 28px 24px 28px; min-height: auto; } .b4-mini { position: static; width: 100%; height: 88px; margin-bottom: 22px; } .b4-card-text { font-size: 22px; max-width: none; } } /* ============================================================ Block 5 — How it works (dark slate, asymmetric You/We split) Visual weight metaphor: narrow YOU column, wide WE column. ============================================================ */ .b5-howitworks { background: var(--lp-bg-next); color: var(--lp-text-on-next); position: relative; overflow: hidden; isolation: isolate; } .b5-howitworks::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 75% 50%, oklch(0.50 0.10 200 / 0.10), transparent 60%), radial-gradient(ellipse 35% 30% at 18% 65%, oklch(0.40 0.08 145 / 0.06), transparent 60%); z-index: -1; pointer-events: none; } .b5-howitworks .lp-section-head { max-width: 720px; margin-bottom: 80px; } /* Asymmetric split — 1fr / 2.4fr (≈ 30/70) */ .b5-split { display: grid; grid-template-columns: 1fr 2.4fr; gap: 48px; align-items: stretch; } .b5-col { position: relative; } /* Column titles */ .b5-col-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 32px; } .b5-col-title h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.02em; color: var(--lp-text-on-next); margin: 0; } .b5-col-title .count { font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; } .b5-you .b5-col-title h3 { font-size: 22px; } .b5-you .b5-col-title .count { color: var(--lp-text-faint-next); } .b5-we { padding-left: 40px; position: relative; } .b5-we::before { /* teal vertical accent — burden-shift signal */ content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, transparent 0%, var(--lp-accent-2) 35%, var(--lp-accent-2) 65%, transparent 100%); box-shadow: 0 0 18px oklch(0.50 0.10 200 / 0.40); } .b5-we .b5-col-title h3 { font-size: 28px; } .b5-we .b5-col-title h3 em { font-style: italic; font-weight: 400; color: var(--lp-accent-2); } .b5-we .b5-col-title .count { color: var(--lp-accent-2); } /* Item lists */ .b5-list { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; } .b5-list li { display: flex; align-items: flex-start; gap: 14px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.005em; } /* YOU — minimal dot bullets, lighter weight */ .b5-you .b5-list li { font-size: 15px; line-height: 1.45; font-weight: 400; color: var(--lp-text-muted-next); } .b5-you .b5-list li .dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--lp-text-faint-next); margin-top: 9px; } /* WE — teal checks, larger and primary weight */ .b5-we .b5-list li { font-size: 17px; line-height: 1.45; font-weight: 500; color: var(--lp-text-on-next); } .b5-we .b5-list li .check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--lp-accent-2); display: inline-flex; align-items: center; justify-content: center; color: white; font: 700 11px/1 'Inter', sans-serif; margin-top: 2px; box-shadow: 0 0 14px oklch(0.50 0.10 200 / 0.35); } /* Weight bar — visual proportion 30/70 burden shift */ .b5-weight { margin-top: 80px; display: flex; flex-direction: column; gap: 14px; } .b5-weight-bar { display: flex; height: 5px; border-radius: 999px; overflow: hidden; background: oklch(1 0 0 / 0.06); } .b5-weight-bar .you-fill { width: 30%; background: var(--lp-text-muted-next); border-radius: 999px 0 0 999px; } .b5-weight-bar .we-fill { flex: 1; background: linear-gradient(90deg, var(--lp-accent-2-strong), var(--lp-accent-2)); border-radius: 0 999px 999px 0; box-shadow: 0 0 24px oklch(0.50 0.10 200 / 0.30); } .b5-weight-labels { display: flex; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; } .b5-weight-labels .you-label { width: 30%; color: var(--lp-text-faint-next); } .b5-weight-labels .we-label { flex: 1; text-align: right; color: var(--lp-accent-2); } /* Responsive */ @media (max-width: 960px) { .b5-howitworks .lp-section-head { margin-bottom: 60px; } .b5-split { grid-template-columns: 1fr; gap: 48px; } .b5-we { padding-left: 0; padding-top: 36px; border-top: 1px solid var(--lp-card-border-dark-strong); } .b5-we::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--lp-accent-2) 35%, var(--lp-accent-2) 65%, transparent 100%); } .b5-we .b5-col-title h3 { font-size: 24px; } .b5-weight { margin-top: 56px; } } @media (max-width: 560px) { .b5-we .b5-list li { font-size: 15px; } .b5-you .b5-list li { font-size: 14px; } .b5-we .b5-col-title h3 { font-size: 22px; } } /* ============================================================ Block 6 — Outcomes (light cream, 4 metric tiles with sparklines) "Real ops analytics" tone — not marketing badges. ============================================================ */ .b6-outcomes { background: var(--lp-bg-hero); } .b6-outcomes .lp-section-head { max-width: 720px; margin-bottom: 72px; } .b6-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .b6-card { position: relative; background: var(--lp-card-bg); border: 1px solid var(--lp-card-border); border-radius: 16px; padding: 30px 32px 28px; display: flex; flex-direction: column; isolation: isolate; box-shadow: 0 1px 2px oklch(0.20 0.02 240 / 0.04), 0 0 0 1px oklch(1 0 0 / 0.6) inset; transition: transform 0.3s var(--lp-ease), border-color 0.3s ease, box-shadow 0.3s ease; } .b6-card:hover { transform: translateY(-3px); border-color: var(--lp-card-border-strong); box-shadow: 0 28px 56px oklch(0.20 0.02 240 / 0.10), 0 6px 16px oklch(0.20 0.02 240 / 0.06), 0 0 0 1px oklch(1 0 0 / 0.6) inset; } .b6-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .b6-card-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.018em; color: var(--lp-text-primary); margin: 0; } .b6-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; font-feature-settings: 'tnum'; white-space: nowrap; } .b6-chip .arr { font-size: 12px; line-height: 1; font-family: 'Inter', system-ui, sans-serif; } .b6-chip.up { background: var(--lp-accent-2-soft); color: var(--lp-accent-2-strong); } .b6-chip.down { background: var(--lp-accent-3-soft); color: var(--lp-accent-3); } /* Sparkline canvas */ .b6-spark { height: 78px; margin-bottom: 18px; position: relative; } .b6-spark svg { display: block; width: 100%; height: 100%; overflow: visible; } .b6-spark.up svg { color: var(--lp-accent-2-strong); } .b6-spark.down svg { color: var(--lp-accent-3); } .b6-spark .axis { stroke: oklch(0.24 0.02 240 / 0.10); stroke-width: 1; } .b6-spark .area { fill: currentColor; fill-opacity: 0.12; animation: b6-spark-fade 0.7s 0.8s var(--lp-ease) both; } .b6-spark .line { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; stroke-width: 2; animation: b6-spark-draw 1.4s var(--lp-ease) both; } .b6-spark .end { fill: currentColor; stroke: var(--lp-card-bg); stroke-width: 2.5; animation: b6-spark-pop 0.4s 1.2s var(--lp-ease) both; } @keyframes b6-spark-draw { from { stroke-dasharray: 600; stroke-dashoffset: 600; } to { stroke-dasharray: 600; stroke-dashoffset: 0; } } @keyframes b6-spark-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes b6-spark-pop { from { r: 0; opacity: 0; } to { r: 4; opacity: 1; } } .b6-card-body { font: 400 15px/1.55 'Inter', system-ui, sans-serif; color: var(--lp-text-secondary); letter-spacing: -0.005em; } @media (max-width: 760px) { .b6-grid { grid-template-columns: 1fr; gap: 14px; } .b6-card { padding: 26px 24px 24px; } .b6-card-title { font-size: 19px; } .b6-spark { height: 64px; margin-bottom: 14px; } } /* ============================================================ Block 7 — Built for service brands (light, 3 segment cards) Premium segment cards: sage-circled SVG icons + Fraunces title + pill-tag. ============================================================ */ .b7-built { background: var(--lp-bg-hero); } .b7-built .lp-section-head { max-width: 720px; margin-bottom: 72px; } .b7-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .b7-card { position: relative; background: var(--lp-card-bg); border: 1px solid var(--lp-card-border); border-radius: 16px; padding: 36px 32px 32px; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 1px 2px oklch(0.20 0.02 240 / 0.04), 0 0 0 1px oklch(1 0 0 / 0.6) inset; transition: transform 0.3s var(--lp-ease), border-color 0.3s ease, box-shadow 0.3s ease; } .b7-card:hover { transform: translateY(-3px); border-color: var(--lp-accent-2); box-shadow: 0 28px 56px oklch(0.20 0.02 240 / 0.10), 0 6px 16px oklch(0.50 0.10 200 / 0.08), 0 0 0 1px oklch(1 0 0 / 0.6) inset; } .b7-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--lp-accent-3-bg); border: 1px solid var(--lp-accent-3-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--lp-accent-3); margin-bottom: 28px; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--lp-ease); } .b7-card:hover .b7-icon { background: oklch(0.40 0.08 145 / 0.16); border-color: var(--lp-accent-3); transform: scale(1.04); } .b7-icon svg { width: 32px; height: 32px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .b7-card h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 23px; line-height: 1.22; letter-spacing: -0.018em; color: var(--lp-text-primary); margin: 0 0 12px; } .b7-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; background: var(--lp-divider); border-radius: 999px; font: 500 11px/1.3 'JetBrains Mono', monospace; color: var(--lp-text-muted); letter-spacing: 0.02em; margin-bottom: 16px; } .b7-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--lp-accent-3); flex-shrink: 0; } .b7-card p { font: 400 15px/1.55 'Inter', system-ui, sans-serif; color: var(--lp-text-secondary); letter-spacing: -0.005em; } @media (max-width: 960px) { .b7-grid { grid-template-columns: 1fr; gap: 14px; } .b7-card { padding: 32px 28px 28px; } .b7-icon { width: 64px; height: 64px; margin-bottom: 22px; } .b7-icon svg { width: 28px; height: 28px; } .b7-card h3 { font-size: 21px; } } /* ============================================================ Block 8 — Demo form (dark slate, closes the page like hero) 2-col split: selling points + premium form card with backdrop-blur. ============================================================ */ .b8-form-section { background: var(--lp-bg-next); color: var(--lp-text-on-next); position: relative; overflow: hidden; isolation: isolate; } .b8-form-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 78% 30%, oklch(0.50 0.10 200 / 0.10), transparent 60%), radial-gradient(ellipse 50% 40% at 18% 75%, oklch(0.40 0.08 145 / 0.07), transparent 60%); z-index: -1; pointer-events: none; } .b8-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: start; } /* LEFT — selling points */ .b8-left .lp-eyebrow { color: var(--lp-accent-3); } .b8-left .lp-eyebrow::before { background: var(--lp-accent-3); } .b8-left .lp-headline { color: var(--lp-text-on-next); margin-bottom: 18px; } .b8-left .lp-lead { color: var(--lp-text-muted-next); margin-bottom: 44px; max-width: 460px; } .b8-perks { list-style: none; display: flex; flex-direction: column; padding: 0; margin: 0; } .b8-perks li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--lp-card-border-dark); font: 500 16px/1.45 'Inter', system-ui, sans-serif; color: var(--lp-text-on-next); letter-spacing: -0.005em; } .b8-perks li:last-child { border-bottom: 1px solid var(--lp-card-border-dark); } .b8-perks li .check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--lp-accent-2); display: inline-flex; align-items: center; justify-content: center; color: white; font: 700 11px/1 'Inter', sans-serif; margin-top: 1px; box-shadow: 0 0 12px oklch(0.50 0.10 200 / 0.32); } /* RIGHT — premium form card */ .lp-form-card { position: relative; background: oklch(1 0 0 / 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid oklch(1 0 0 / 0.12); border-radius: 18px; padding: 36px 36px 32px; box-shadow: 0 36px 80px oklch(0 0 0 / 0.32), 0 14px 30px oklch(0 0 0 / 0.18), 0 0 0 1px oklch(1 0 0 / 0.5) inset; } .lp-form { display: flex; flex-direction: column; gap: 22px; } /* Author `display:flex` above wins over the UA [hidden] rule, so toggling the `hidden` attribute from JS needs an explicit override (form ⇄ success panel). */ .lp-form[hidden], .lp-form-success[hidden] { display: none !important; } .lp-form-honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; height: 0; width: 0; overflow: hidden; } .lp-form-field { position: relative; display: flex; flex-direction: column; gap: 7px; } .lp-form-field label { font: 600 10px/1 'JetBrains Mono', monospace; color: var(--lp-text-muted); letter-spacing: 0.18em; text-transform: uppercase; } .lp-form-field input, .lp-form-field select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid oklch(0.24 0.02 240 / 0.18); border-radius: 0; padding: 8px 0 10px; font: 500 16px/1.3 'Inter', system-ui, sans-serif; color: var(--lp-text-primary); letter-spacing: -0.005em; outline: none; transition: border-color 0.2s ease, border-bottom-width 0.2s ease; appearance: none; -webkit-appearance: none; } .lp-form-field select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 22px; cursor: pointer; } .lp-form-field input:focus, .lp-form-field select:focus { border-bottom-color: var(--lp-accent-2); } .lp-form-field input::placeholder { color: var(--lp-text-faint); } .lp-form-field.has-error input, .lp-form-field.has-error select { border-bottom-color: oklch(0.50 0.15 28); } .lp-form-error { font: 500 12px/1.3 'Inter', sans-serif; color: oklch(0.50 0.15 28); letter-spacing: -0.005em; min-height: 14px; display: none; } .lp-form-field.has-error .lp-form-error { display: block; } .lp-form-submit { margin-top: 8px; background: var(--lp-accent); color: var(--lp-accent-fg); border: 0; padding: 16px 26px; border-radius: 8px; font: 500 15px/1 'Inter', sans-serif; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.25s var(--lp-ease); } .lp-form-submit:hover { background: var(--lp-accent-strong); transform: translateY(-1px); box-shadow: 0 14px 28px oklch(0.20 0.02 240 / 0.25); } .lp-form-submit:disabled { opacity: 0.7; cursor: progress; transform: none; } .lp-form-reassurance { font: 400 12px/1.4 'Inter', sans-serif; color: var(--lp-text-muted); text-align: center; margin: 0; letter-spacing: -0.005em; } .lp-form-generic-error { font: 500 13px/1.4 'Inter', sans-serif; color: oklch(0.50 0.15 28); text-align: center; margin: 12px 0 0; } .lp-form-success { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 12px 16px; text-align: center; } .lp-form-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--lp-accent-2); display: inline-flex; align-items: center; justify-content: center; color: white; font: 700 26px/1 'Inter', sans-serif; box-shadow: 0 0 32px oklch(0.50 0.10 200 / 0.45); } .lp-form-success-text { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -0.018em; color: var(--lp-text-primary); margin: 0; max-width: 340px; } .lp-form-new-request { margin-top: 4px; background: transparent; color: var(--lp-text-secondary); border: 1px solid oklch(0.24 0.02 240 / 0.18); padding: 11px 22px; border-radius: 8px; font: 500 14px/1 'Inter', sans-serif; letter-spacing: 0.01em; cursor: pointer; transition: all 0.25s var(--lp-ease); } .lp-form-new-request:hover { border-color: var(--lp-accent); color: var(--lp-accent); transform: translateY(-1px); } /* Responsive */ @media (max-width: 960px) { .b8-split { grid-template-columns: 1fr; gap: 56px; } .b8-left .lp-lead { margin-bottom: 32px; } .lp-form-card { padding: 28px 24px 24px; } } @media (max-width: 560px) { .b8-perks li { font-size: 15px; padding: 14px 0; } } /* ============================================================ Footer — thin premium dark, continues b8 palette ============================================================ */ .lp-footer { background: oklch(0.16 0.03 240); color: var(--lp-text-muted-next); padding: 56px 24px 36px; } .lp-footer-inner { max-width: 1280px; margin: 0 auto; } .lp-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .lp-footer-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .lp-footer-logo img { display: block; height: 28px; width: auto; opacity: 0.92; transition: opacity 0.2s ease; } .lp-footer-logo:hover img { opacity: 1; } .lp-footer-nav { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 0; } .lp-footer-nav a { position: relative; padding: 6px 14px; font: 500 13px/1 'Inter', system-ui, sans-serif; letter-spacing: -0.005em; color: var(--lp-text-muted-next); text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } .lp-footer-nav a:hover { color: var(--lp-text-on-next); } .lp-footer-nav a + a::before { content: ''; position: absolute; left: -1px; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: var(--lp-text-faint-next); margin-top: -1px; } .lp-footer-rule { height: 1px; background: var(--lp-card-border-dark); margin: 36px 0 24px; } .lp-footer-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .lp-footer-legal { font: 500 11px/1.5 'JetBrains Mono', monospace; color: var(--lp-text-faint-next); letter-spacing: 0.04em; margin: 0; } .lp-footer-legal strong { color: var(--lp-text-muted-next); font-weight: 600; } .lp-footer-copy { font: 500 11px/1.5 'JetBrains Mono', monospace; color: var(--lp-text-faint-next); letter-spacing: 0.04em; margin: 0; } @media (max-width: 720px) { .lp-footer { padding: 48px 20px 28px; } .lp-footer-top { flex-direction: column; align-items: flex-start; gap: 24px; } .lp-footer-nav { gap: 0; margin-left: -14px; } .lp-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .lp-footer-rule { margin: 28px 0 20px; } }