/* ========================================================================== GOCOSYS SEO Intelligence — public landing page Built entirely on the design tokens declared in theme.css, so the marketing page and the product behind it are the same colour system and re-theme together with . No hardcoded hex values: a landing page that cannot follow the theme toggle is a landing page that lies about the product. Layout is a normal, scrolling document — unlike the app shell, which locks scrolling — so the first rule undoes theme.css's body{overflow:hidden}. ========================================================================== */ body.landing-body { overflow: auto; overflow-x: hidden; /* decorative glows overhang the viewport by design */ height: auto; min-height: 100%; line-height: 1.6; } /* Anchored sections must clear the sticky header when jumped to. */ .landing-body { scroll-behavior: smooth; } .landing-body section[id] { scroll-margin-top: 84px; } @media (prefers-reduced-motion: reduce) { .landing-body { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- Shared primitives -------------------------------------------------------------------------- */ .lp-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Vertical rhythm. One class so every band is spaced identically and the section padding is tuned in a single place. */ .lp-section { padding: 90px 0; } .lp-section.tight { padding: 58px 0; } .lp-band { border-top: 1px solid var(--border); background: var(--bg-2); } .lp-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; } .lp-h2 { font-size: 40px; line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: var(--text-bright); margin: 0; } .lp-lede { font-size: 17px; color: var(--text-soft); line-height: 1.6; margin: 0; } .lp-head { max-width: 700px; margin-bottom: 44px; } .lp-head.center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; } .lp-head .lp-h2 + .lp-lede { margin-top: 16px; } /* Buttons. Sized for a marketing page (the app's .btn-primary-sm is a 12px toolbar control), but on the same tokens so hover states stay in family. */ .lp-btn { font-size: 15px; font-weight: 600; border-radius: 8px; padding: 13px 24px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .15s, border-color .15s, color .15s; } /* The primary CTA carries a single sheen pass on hover. overflow:hidden keeps the highlight inside the radius; the ::after is inert until hovered. */ .lp-btn-primary { color: #fff; background: var(--primary); position: relative; overflow: hidden; isolation: isolate; } .lp-btn-primary::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 42%; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 32%, transparent), transparent); transform: translateX(-120%) skewX(-18deg); } .lp-btn-primary:hover { background: var(--primary-hover); color: #fff; } .lp-btn-primary:hover::after { animation: lp-sheen .8s ease-out; } .lp-btn-ghost { color: var(--text); background: transparent; border: 1px solid var(--border-2); padding: 12px 22px; } .lp-btn-ghost:hover { background: var(--surface-3); color: var(--text); } /* Card. Lifts on hover — the only motion on an otherwise static grid, so the pointer always has something to land on. */ .lp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .18s, transform .18s, box-shadow .18s; } .lp-card:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .lp-icon-tile { width: 46px; height: 46px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), border-color .22s, background .22s; } /* The tile answers a hover anywhere on its card, not just on the tile itself. */ .lp-card:hover .lp-icon-tile { transform: translateY(-2px) scale(1.06); border-color: var(--border-2); background: var(--surface-2); } /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- */ /* Scroll reveal. --lp-i is the stagger index; js/landing.js stamps it onto the children of a [data-reveal-group] so a row of cards arrives in sequence rather than snapping in as one block. Ungrouped elements just get 0. */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.22, .68, .34, 1), transform .5s cubic-bezier(.22, .68, .34, 1); transition-delay: calc(var(--lp-i, 0) * 65ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* Directional variants, so not every section enters the same way. */ [data-reveal="left"] { transform: translateX(-22px); } [data-reveal="right"] { transform: translateX(22px); } [data-reveal="scale"] { transform: scale(.965); } @keyframes lp-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes lp-float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } @keyframes lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes lp-drift { 0%, 100% { transform: translate(-4%, -2%) scale(1); } 50% { transform: translate(4%, 3%) scale(1.08); } } @keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* A ring that expands and fades — used behind the live "measuring" dot. */ @keyframes lp-halo { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* One slow pass of light across a surface. */ @keyframes lp-sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } } .lp-pulse { animation: lp-pulse 2s infinite; } /* Thin scroll-progress rail pinned above the announcement bar. Width is driven from JS via --lp-progress so there is no layout work per frame. */ .lp-progress { position: fixed; inset: 0 auto auto 0; height: 2px; z-index: 200; width: calc(var(--lp-progress, 0) * 100%); background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 55%, transparent), var(--primary)); transition: width .08s linear; pointer-events: none; } /* Both switches off the animation: the workspace Appearance setting (which the app already honours through data-no-anim) and the OS-level preference. The reveal must also drop its start state, or opted-out visitors get a blank page. */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .lp-float-card, .lp-hero-glow, .lp-pulse, .lp-strip-track, .lp-live-dot::after, .lp-btn-primary::after { animation: none !important; } .lp-mock-tilt { transform: none !important; } .lp-progress { display: none; } } html[data-no-anim="true"] [data-reveal] { opacity: 1; transform: none; transition: none; } html[data-no-anim="true"] .lp-float-card, html[data-no-anim="true"] .lp-hero-glow, html[data-no-anim="true"] .lp-pulse, html[data-no-anim="true"] .lp-strip-track, html[data-no-anim="true"] .lp-live-dot::after, html[data-no-anim="true"] .lp-btn-primary::after { animation: none !important; } html[data-no-anim="true"] .lp-mock-tilt { transform: none !important; } html[data-no-anim="true"] .lp-progress { display: none; } /* -------------------------------------------------------------------------- Announcement bar -------------------------------------------------------------------------- */ .lp-announce { position: relative; z-index: 1060; background: linear-gradient(90deg, var(--primary-dim), var(--surface-2)); border-bottom: 1px solid var(--border); } .lp-announce .lp-container { padding-top: 9px; padding-bottom: 9px; padding-right: 44px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .lp-announce-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-on-dim); border: 1px solid var(--primary); border-radius: 20px; padding: 2px 9px; } .lp-announce-text { font-size: 13.5px; color: var(--text); } .lp-announce-link { font-size: 13px; font-weight: 600; color: var(--primary-on-dim); text-decoration: none; } .lp-announce-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); font-size: 15px; cursor: pointer; line-height: 1; padding: 4px; } .lp-announce-close:hover { color: var(--text); } /* -------------------------------------------------------------------------- Header / navigation -------------------------------------------------------------------------- */ .lp-header { position: sticky; top: 0; z-index: 1050; } .lp-nav { /* colour-mix keeps the translucent bar tied to --bg, so it re-tints in light mode instead of staying a dark pane over a white page. */ background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; } .lp-nav .lp-container { position: relative; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: height .25s ease; } /* Once the page has scrolled past the hero fold the bar tightens up and lifts off the content — js/landing.js toggles .is-scrolled on the header. */ .lp-header.is-scrolled .lp-nav { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: var(--shadow-lg); border-bottom-color: var(--border-2); } .lp-header.is-scrolled .lp-nav .lp-container { height: 56px; } .lp-header.is-scrolled .lp-logo-img { height: 25px; } .lp-logo-img { transition: height .25s ease; } .lp-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; } .lp-logo-img { height: 28px; width: auto; display: block; } .lp-logo-text { font-size: 12.5px; font-weight: 600; color: var(--text-soft); border-left: 1px solid var(--border-2); padding-left: 10px; } /* Centred on the *page*, not in the space left over between the logo and the actions — those two differ in width, so flex centring would sit visibly off. Absolute positioning keeps the links on the page's centre line, and they are hidden below 960px anyway (the burger takes over), so there is nothing to collide with at narrow widths. */ .lp-nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1px; } .lp-navlink { font-size: 13.5px; font-weight: 500; color: var(--text-soft); padding: 8px 11px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: none; text-decoration: none; transition: color .15s, background .15s; } .lp-navlink:hover, .lp-navlink[aria-expanded="true"] { color: var(--text-bright); background: var(--surface-2); } .lp-navlink i { font-size: 9px; opacity: .6; } .lp-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; } .lp-nav-toggle { width: 34px; height: 34px; border-radius: 6px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s; } .lp-nav-toggle:hover { color: var(--text); border-color: var(--border-2); } .lp-nav-signin { font-size: 13.5px; font-weight: 600; color: var(--text); padding: 8px 12px; border-radius: 8px; text-decoration: none; } .lp-nav-signin:hover { color: var(--text-bright); background: var(--surface-2); } .lp-nav-cta { font-size: 13.5px; font-weight: 600; color: #fff; background: var(--primary); padding: 9px 16px; border-radius: 8px; text-decoration: none; transition: background .15s; } .lp-nav-cta:hover { background: var(--primary-hover); color: #fff; } /* Mega menu. Rendered in the markup (one panel per nav group) and revealed on hover/focus — server-rendered, so it is in the page for crawlers and works before landing.js runs. */ .lp-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border-dim); box-shadow: var(--shadow-lg); display: none; } .lp-mega.is-open { display: block; } .lp-mega .lp-container { padding-top: 24px; padding-bottom: 24px; } .lp-mega-grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 22px; } .lp-mega-col-title { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 12px; } .lp-mega-items { display: flex; flex-direction: column; gap: 2px; } .lp-mega-item { display: flex; gap: 11px; padding: 8px 10px; border-radius: 8px; align-items: flex-start; color: inherit; text-decoration: none; transition: background .15s; } .lp-mega-item:hover { background: var(--surface-2); } .lp-mega-item .lp-mega-glyph { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; } .lp-mega-item b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-bright); } .lp-mega-item small { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; } .lp-mega-feature { border: 1px solid var(--border); background: var(--bg-2); border-radius: 10px; padding: 16px; height: 100%; display: flex; flex-direction: column; gap: 8px; } .lp-mega-feature .tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--purple); } .lp-mega-feature .title { font-size: 14px; font-weight: 600; color: var(--text-bright); line-height: 1.4; } .lp-mega-feature .desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .lp-mega-feature .cta { font-size: 12.5px; font-weight: 600; color: var(--primary-on-dim); margin-top: auto; text-decoration: none; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .lp-hero { position: relative; overflow: hidden; } .lp-hero-glow { position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 1100px; height: 700px; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 16%, transparent), transparent 72%); animation: lp-drift 18s ease-in-out infinite; } .lp-hero-grid { position: relative; padding: 78px 0 92px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; } .lp-hero-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-2); background: var(--surface); border-radius: 20px; padding: 5px 12px; margin-bottom: 22px; } .lp-hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); } /* A status dot that reads as *live*: the dot itself holds still and a ring expands out of it, the way a monitoring UI signals an open connection. currentColor picks up whatever the dot was already tinted. */ .lp-live-dot { position: relative; } .lp-live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: lp-halo 2.4s ease-out infinite; } .lp-hero-badge .lp-live-dot { color: var(--purple); } .lp-float-c .lp-live-dot { color: var(--green); } .lp-hero h1 { font-size: 60px; line-height: 1.04; letter-spacing: -.03em; font-weight: 800; margin: 0 0 22px; color: var(--text-bright); } .lp-hero-lede { font-size: 18px; line-height: 1.62; color: var(--text-soft); margin: 0 0 32px; max-width: 540px; } .lp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; } .lp-hero-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .lp-hero-meta .sep { color: var(--text-dim); } /* Product mock */ .lp-hero-art { perspective: 1700px; position: relative; } /* The mock sits on a fixed 3D pose. js/landing.js nudges --lp-ty/--lp-tx by a few degrees as the pointer crosses the hero, which reads as the panel turning to follow you rather than as a separate animation. Both default to 0, so with JS off (or motion opted out) the original pose is exactly what renders. */ .lp-mock-tilt { transform: rotateY(calc(-16deg + var(--lp-ty, 0deg))) rotateX(calc(6deg + var(--lp-tx, 0deg))); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.22, .68, .34, 1); } /* While the pointer is actually over the hero, track it closely; the longer ease above then carries the panel back when the pointer leaves. */ .lp-hero.is-tracking .lp-mock-tilt { transition: transform .12s linear; } .lp-mock { background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); overflow: hidden; } html[data-bs-theme="light"] .lp-mock { box-shadow: 0 30px 70px rgba(23, 32, 58, .18); } .lp-mock-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .lp-mock-dot { width: 9px; height: 9px; border-radius: 50%; opacity: .7; } .lp-mock-title { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: 6px; } .lp-mock-tag { font-family: var(--font-mono); margin-left: auto; font-size: 9.5px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; } .lp-mock-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .lp-mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .lp-mock-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; } .lp-mock-kpi .label { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .lp-mock-kpi .value { font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--text-bright); line-height: 1; } .lp-mock-kpi .delta { font-family: var(--font-mono); font-size: 10px; margin-top: 4px; } .lp-mock-chart { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } .lp-mock-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .lp-mock-chart-head span { font-size: 10.5px; color: var(--text-muted); } .lp-mock-chart-head .src { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); } .lp-mock-rows { display: flex; flex-direction: column; gap: 6px; } .lp-mock-row { display: flex; align-items: center; gap: 8px; font-size: 11px; } .lp-mock-row .sq { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; } .lp-mock-row .name { color: var(--text-soft); flex: 1; } .lp-mock-row .src { font-family: var(--font-mono); color: var(--text-dim); font-size: 10px; } .lp-float-card { position: absolute; z-index: 3; } .lp-float-a { top: -26px; left: -40px; width: 200px; background: var(--surface-2); border: 1px solid var(--purple); border-radius: 11px; padding: 12px 14px; box-shadow: var(--shadow-lg); animation: lp-float-a 6s ease-in-out infinite; } .lp-float-b { bottom: 34px; right: -46px; width: 186px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 11px; padding: 12px 14px; box-shadow: var(--shadow-lg); animation: lp-float-b 7s ease-in-out infinite; } .lp-float-c { bottom: -24px; left: 24px; background: var(--surface-2); border: 1px solid var(--green); border-radius: 20px; padding: 8px 14px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8px; animation: lp-float-a 8s ease-in-out infinite; } .lp-float-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .lp-float-head .glyph { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; } .lp-float-head .label { font-size: 11px; font-weight: 600; } .lp-float-body { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; } .lp-float-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; } .lp-float-row:last-child { margin-bottom: 0; } .lp-float-row .k { color: var(--text-muted); } .lp-float-row .v { font-family: var(--font-mono); } .lp-float-c .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .lp-float-c .label { font-size: 11.5px; font-weight: 600; color: var(--green-on-dim); } /* -------------------------------------------------------------------------- Integration marquee -------------------------------------------------------------------------- */ .lp-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); overflow: hidden; } .lp-strip .lp-container { padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; gap: 20px; } .lp-strip-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; white-space: nowrap; } .lp-strip-mask { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .lp-strip-track { display: flex; width: max-content; animation: lp-marquee 34s linear infinite; will-change: transform; } /* Hold the marquee while someone is trying to read a name in it. */ .lp-strip:hover .lp-strip-track { animation-play-state: paused; } .lp-strip-track span { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; /* Spacing lives on the item, NOT as a flex `gap` on the track. The list is rendered twice and the loop translates by exactly -50%, so the two halves have to be identical widths. A `gap` puts one extra gap *between* the halves that the first half does not contain, which makes -50% land slightly off and the marquee visibly jump once per cycle. Padding on each item keeps both halves exactly equal, so the seam is invisible. */ padding-right: 36px; } /* -------------------------------------------------------------------------- Grids -------------------------------------------------------------------------- */ .lp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .lp-feature { padding: 26px; display: flex; flex-direction: column; gap: 12px; } .lp-feature h3 { font-size: 17px; font-weight: 600; margin: 2px 0 0; color: var(--text-bright); } .lp-feature p { font-size: 13.5px; color: var(--text-soft); margin: 0; line-height: 1.55; flex: 1; } .lp-feature .micro { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); border-top: 1px solid var(--border-dim); padding-top: 11px; } /* -------------------------------------------------------------------------- Architecture -------------------------------------------------------------------------- */ .lp-arch { display: flex; align-items: stretch; gap: 26px; } .lp-arch-side { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lp-arch-node { border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 10px; } .lp-arch-node .glyph { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .lp-arch-node .label { font-size: 13px; font-weight: 600; color: var(--text-bright); display: block; } .lp-arch-node .meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); } .lp-arch-core { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 220px; } .lp-arch-core-inner { text-align: center; padding: 36px 22px; border-radius: 18px; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 22%, transparent), transparent 78%); } .lp-arch-core-badge { width: 104px; height: 104px; margin: 0 auto; border-radius: 24px; background: var(--surface); border: 1px solid var(--primary); box-shadow: 0 0 42px color-mix(in srgb, var(--primary) 35%, transparent); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 8px; } .lp-arch-core-badge img { height: 20px; width: auto; } .lp-arch-core-badge span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-on-dim); } .lp-arch-core-steps { font-family: var(--font-mono); margin-top: 16px; font-size: 10.5px; color: var(--text-muted); line-height: 1.7; } /* -------------------------------------------------------------------------- Provenance table -------------------------------------------------------------------------- */ .lp-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); } .lp-table-scroll { overflow-x: auto; } .lp-table { width: 100%; min-width: 640px; border-collapse: collapse; color: var(--text); } .lp-table thead tr { background: var(--surface-2); } .lp-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 12px 18px; border-bottom: 1px solid var(--border); font-weight: 600; } .lp-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px; } .lp-table tbody tr:last-child td { border-bottom: none; } .lp-table .src-pill { font-family: var(--font-mono); font-size: 12px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; white-space: nowrap; } .lp-table .method { color: var(--text-soft); } .lp-table-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); margin-top: 14px; } /* -------------------------------------------------------------------------- Why / value cards -------------------------------------------------------------------------- */ .lp-why { border-left: 2px solid var(--border-2); border-radius: 10px; padding: 22px; } .lp-why-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .lp-why-head i { font-size: 18px; } .lp-why-head h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--text-bright); } .lp-why p { font-size: 13.5px; color: var(--text-soft); margin: 0; line-height: 1.55; } /* -------------------------------------------------------------------------- Workflow steps -------------------------------------------------------------------------- */ .lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .lp-step { padding: 0 20px 0 0; } .lp-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .lp-step-num { font-family: var(--font-mono); width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--primary); color: var(--primary-on-dim); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .lp-step-line { flex: 1; height: 1px; background: var(--border); } .lp-step h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: var(--text-bright); } .lp-step p { font-size: 13.5px; color: var(--text-soft); margin: 0; line-height: 1.55; } /* -------------------------------------------------------------------------- Integrations -------------------------------------------------------------------------- */ .lp-int { border-radius: 10px; padding: 16px; display: flex; align-items: center; gap: 11px; } .lp-int .glyph { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .lp-int .name { font-size: 13px; font-weight: 600; color: var(--text-bright); display: block; } .lp-int .meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); } /* -------------------------------------------------------------------------- Pricing -------------------------------------------------------------------------- */ .lp-billing { display: flex; justify-content: center; margin-bottom: 36px; } .lp-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; gap: 4px; } .lp-seg-btn { background: transparent; color: var(--text-muted); border: none; border-radius: 7px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; } .lp-seg-btn[aria-pressed="true"] { background: var(--primary); color: #fff; } .lp-seg-btn .save { font-family: var(--font-mono); font-size: 9.5px; color: var(--green-on-dim); } .lp-seg-btn[aria-pressed="true"] .save { color: #fff; } .lp-plan { border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; position: relative; text-decoration: none; } .lp-plan.popular { border-color: var(--primary); } .lp-plan-flag { position: absolute; top: -11px; left: 24px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--primary); border-radius: 20px; padding: 3px 10px; } .lp-plan-name { font-size: 14px; font-weight: 600; color: var(--text-bright); } .lp-plan-tag { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; min-height: 34px; } .lp-plan-price { display: flex; align-items: baseline; gap: 4px; } .lp-plan-price .amount { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--text-bright); line-height: 1; } .lp-plan-price .per { font-size: 12px; color: var(--text-muted); } .lp-plan-billed { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); } .lp-plan-rows { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-dim); padding-top: 14px; } .lp-plan-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; } .lp-plan-row .k { color: var(--text-muted); } .lp-plan-row .v { font-family: var(--font-mono); color: var(--text); text-align: right; } .lp-plan-cta { margin-top: auto; text-align: center; font-size: 13px; font-weight: 600; padding: 10px; border-radius: 8px; color: var(--text); background: transparent; border: 1px solid var(--border-2); } .lp-plan.popular .lp-plan-cta { color: #fff; background: var(--primary); border-color: var(--primary); } /* -------------------------------------------------------------------------- Customer stories -------------------------------------------------------------------------- */ .lp-story { padding: 24px; display: flex; flex-direction: column; gap: 16px; } .lp-story-head { display: flex; align-items: center; gap: 10px; } .lp-story-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-soft); font-size: 13px; flex-shrink: 0; } .lp-story-name { font-size: 13.5px; font-weight: 600; color: var(--text-bright); display: block; } .lp-story-ind { font-size: 11px; color: var(--text-muted); } .lp-story-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lp-story-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 11px; } .lp-story-stat .value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; line-height: 1; } .lp-story-stat .label { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; } .lp-story blockquote { font-size: 13px; color: var(--text-soft); margin: 0; line-height: 1.55; font-style: italic; } .lp-story cite { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); margin-top: auto; font-style: normal; } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .lp-faq { max-width: 900px; margin: 0 auto; } .lp-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 10px; } .lp-faq-item.is-open { border-color: var(--border-2); } .lp-faq-btn { width: 100%; text-align: left; background: transparent; border: none; color: var(--text-bright); font-size: 15px; font-weight: 600; padding: 18px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: inherit; } .lp-faq-btn .plus { color: var(--text-muted); font-size: 18px; transition: transform .2s; flex-shrink: 0; } .lp-faq-item.is-open .plus { transform: rotate(45deg); } .lp-faq-body { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height .28s ease, padding .28s ease; font-size: 14px; color: var(--text-soft); line-height: 1.62; } .lp-faq-item.is-open .lp-faq-body { padding: 0 20px 20px; max-height: 340px; } /* -------------------------------------------------------------------------- Final CTA -------------------------------------------------------------------------- */ .lp-cta { position: relative; background: var(--surface); border: 1px solid var(--border-2); border-radius: 18px; padding: 64px 40px; text-align: center; overflow: hidden; box-shadow: var(--shadow-lg); } .lp-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%); } .lp-cta > * { position: relative; } .lp-cta h2 { font-size: 42px; line-height: 1.08; letter-spacing: -.025em; font-weight: 800; margin: 0 0 16px; color: var(--text-bright); } .lp-cta .lp-lede { margin: 0 auto 32px; max-width: 520px; } .lp-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .lp-footer { border-top: 1px solid var(--border); background: var(--bg-2); } .lp-footer .lp-container { padding-top: 64px; padding-bottom: 32px; } .lp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; } .lp-footer-about p { font-size: 13px; color: var(--text-muted); margin: 16px 0; line-height: 1.6; max-width: 260px; } .lp-footer-social { display: flex; gap: 8px; } .lp-footer-social a { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; text-decoration: none; transition: color .15s, border-color .15s; } .lp-footer-social a:hover { color: var(--text); border-color: var(--border-2); } .lp-footer-col-title { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; } .lp-footer-links { display: flex; flex-direction: column; gap: 9px; } .lp-footer-links a { font-size: 13px; color: var(--text-soft); text-decoration: none; } .lp-footer-links a:hover { color: var(--text-bright); } .lp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 44px; padding-top: 24px; } .lp-footer-copy { font-size: 12.5px; color: var(--text-muted); } .lp-footer-version { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); border: 1px solid var(--border-2); border-radius: 20px; padding: 2px 9px; } .lp-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; } .lp-footer-legal a { font-size: 12.5px; color: var(--text-muted); text-decoration: none; } .lp-footer-legal a:hover { color: var(--text); } /* -------------------------------------------------------------------------- Mobile navigation drawer -------------------------------------------------------------------------- */ .lp-burger { display: none; } .lp-drawer { position: fixed; inset: 0; z-index: 1080; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .lp-drawer.is-open { opacity: 1; visibility: visible; } .lp-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .24s cubic-bezier(.22, .68, .34, 1); } .lp-drawer.is-open .lp-drawer-panel { transform: none; } .lp-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .lp-drawer-body { padding: 16px 20px 28px; overflow-y: auto; display: flex; flex-direction: column; } .lp-drawer-link { font-size: 16px; font-weight: 600; color: var(--text); padding: 13px 4px; border-bottom: 1px solid var(--border-dim); text-decoration: none; } .lp-drawer-link:hover { color: var(--text-bright); } .lp-drawer-body .lp-btn { justify-content: center; margin-top: 16px; } /* -------------------------------------------------------------------------- Legal documents (Terms / Privacy / Refunds) Shares the landing chrome, so only the document body needs styling: a measured column for the prose and a sticky contents rail beside it. -------------------------------------------------------------------------- */ .lp-navlink.is-current { color: var(--text-bright); background: var(--surface-2); } .lp-legal-head { padding: 54px 0 26px; max-width: 720px; } .lp-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .lp-crumb a { color: var(--text-muted); text-decoration: none; } .lp-crumb a:hover { color: var(--text-bright); } .lp-legal-head h1 { font-size: 42px; line-height: 1.1; letter-spacing: -.025em; font-weight: 800; color: var(--text-bright); margin: 0 0 14px; } .lp-legal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin: 16px 0 0; } .lp-legal-meta .sep { color: var(--border-2); } .lp-legal-notice { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--yellow); border-radius: 8px; padding: 13px 15px; margin-bottom: 40px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } .lp-legal-notice i { color: var(--yellow); flex-shrink: 0; margin-top: 2px; } .lp-legal-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 90px; } .lp-legal-toc { position: sticky; top: 90px; } .lp-legal-toc-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 12px; } .lp-legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .lp-legal-toc li { counter-increment: toc; } .lp-legal-toc a { display: block; padding: 6px 0 6px 26px; position: relative; font-size: 13px; color: var(--text-muted); text-decoration: none; border-left: 1px solid var(--border); transition: color .15s, border-color .15s; } .lp-legal-toc a::before { content: counter(toc); position: absolute; left: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); } .lp-legal-toc a:hover { color: var(--text-bright); border-left-color: var(--primary); } .lp-legal-toc-links { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .lp-legal-toc-links a { font-size: 12.5px; color: var(--text-muted); text-decoration: none; } .lp-legal-toc-links a:hover { color: var(--primary); } .lp-legal-body { max-width: 720px; font-size: 15px; color: var(--text-soft); line-height: 1.75; } .lp-legal-body section { scroll-margin-top: 92px; margin-bottom: 34px; } .lp-legal-body h2 { display: flex; align-items: baseline; gap: 12px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: var(--text-bright); margin: 0 0 12px; } .lp-legal-body h2 .num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--primary); flex-shrink: 0; } .lp-legal-body p { margin: 0 0 14px; } .lp-legal-mail { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--primary); text-decoration: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 8px 13px; } .lp-legal-mail:hover { border-color: var(--primary); color: var(--primary); } .lp-legal-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 48px; padding: 26px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .lp-legal-cta h3 { font-size: 18px; font-weight: 700; color: var(--text-bright); margin: 0 0 5px; } .lp-legal-cta p { font-size: 14px; color: var(--text-muted); margin: 0; } @media (max-width: 900px) { .lp-legal-grid { grid-template-columns: 1fr; gap: 30px; } /* The rail becomes a plain list above the prose — sticky is meaningless once it is in the normal flow. */ .lp-legal-toc { position: static; } .lp-legal-head h1 { font-size: 32px; } } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .lp-hero h1 { font-size: 48px; } .lp-grid-4 { grid-template-columns: repeat(2, 1fr); } .lp-steps { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } } @media (max-width: 960px) { .lp-nav-links, .lp-nav-signin { display: none; } .lp-burger { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 16px; } .lp-hero-grid { grid-template-columns: 1fr; gap: 56px; padding-top: 56px; } .lp-mock-tilt { transform: none; } .lp-float-card { display: none; } .lp-arch { flex-direction: column; gap: 22px; } .lp-arch-core { width: auto; } .lp-grid-3 { grid-template-columns: repeat(2, 1fr); } .lp-footer-grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 36px; } .lp-section { padding: 66px 0; } } @media (max-width: 640px) { .lp-container { padding: 0 16px; } .lp-hero h1 { font-size: 36px; } .lp-hero-lede { font-size: 16px; } .lp-h2 { font-size: 30px; } .lp-cta { padding: 44px 22px; } .lp-cta h2 { font-size: 30px; } .lp-grid-3, .lp-grid-4, .lp-steps, .lp-arch-side { grid-template-columns: 1fr; } .lp-footer-grid { grid-template-columns: 1fr 1fr; } .lp-section { padding: 52px 0; } .lp-announce .lp-container { justify-content: flex-start; } .lp-btn { width: 100%; justify-content: center; } .lp-hero-actions { width: 100%; } }