/* ══════════════════════════════════════════════════════════════════════════ AI Chat Console — Landing page (landing.php) Load order: tokens.css → app.css → ui.css → landing.css All colors via tokens so the 14 accent themes × light/dark/oled keep working. ══════════════════════════════════════════════════════════════════════════ */ /* Re-enable page scrolling. app.css ships two `body, html { width:100vw; height:100vh; overflow:hidden !important }` blocks — "LAYOUT OVERFLOW FIXES" / "FLEXBOX OVERFLOW FIXES" — meant to pin the DASHBOARD's fixed app shell. They're written unscoped (no media query, confirmed by inspecting the live parsed stylesheet), so they clamp every page loading app.css to exactly one viewport with scrolling off at EVERY width, not just mobile — everything past the hero (features, pricing, the whole footer) was unreachable on desktop too. A prior fix here mistakenly scoped this override to max-width:768px based on a bad manual read of the source; that only patched phones, which is why the page "worked on phone but not desktop". This must be unconditional. register.css already proves the fix works this way — see its own unscoped "stop app.css auth rules from centering/locking the page" reset. The dashboard renders a bare with no class, so those app.css rules can't be narrowed without restyling the app shell; landing.css only ever loads on the landing page, so overriding html/body here can't reach it. Axes are set separately on purpose: `overflow: visible` would clobber the overflow-x:hidden below and let decorative mesh overflow scroll sideways. */ html, body { width: auto !important; height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; } .landing-page { position: relative; background: var(--bg); background-image: var(--bg-mesh); background-attachment: fixed; overflow-x: hidden; } /* Hero atmosphere — painted on the PAGE, not inside .ld-hero (which clips with overflow:hidden). The sticky nav sits in normal flow above .ld-hero, so a hero-scoped background starts below the bar and leaves it a flat white band with a hard colour seam under it. Painting here lets the mesh reach the very top of the page and show through the translucent nav, so the bar reads as part of the design. Generated as the page's first child, so every later positioned section paints above it. */ .landing-page::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: min(880px, 108vh); z-index: 0; pointer-events: none; background: url('../images/noise.svg') repeat, url('../images/mesh-hero.svg') center top / cover no-repeat; opacity: .55; mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); } [data-theme="dark"] .landing-page::before, [data-theme="oled"] .landing-page::before { opacity: .40; } .ld-wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; } .ld-wrap-narrow { max-width: 780px; } .ld-wrap-mid { max-width: 940px; } .ld-section { padding: var(--sp-6) 0; position: relative; } /* Nav-height offset for anchor-jump targets (Features/Pricing/etc.) so a click on the sticky nav doesn't land the section heading underneath it — 78px matches the established sticky-nav offset used elsewhere (see guide.php's own .ug-nav { top: 78px }). Applies whether the jump is the browser's native instant one or the smooth-scroll in ui.js. */ #features, #pricing, #use-cases, #security, #faq { scroll-margin-top: 78px; } /* Section headers */ .ld-sec-hd { text-align: center; max-width: 640px; margin: 0 auto var(--sp-6); } .ld-sec-hd h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -.02em; margin: var(--sp-3) 0 var(--sp-2); line-height: var(--lh-tight); } .ld-sec-hd p { font-size: var(--fs-base); color: var(--muted); } /* ── Hero ────────────────────────────────────────────────────────────────── */ /* The hero's atmosphere is painted by .landing-page::before above so it can extend behind the sticky nav — this element just holds the content. */ .ld-hero { position: relative; padding: var(--sp-7) 0 var(--sp-8); } .ld-hero-in { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 22px; text-align: center; } .ld-trial-badge { display: inline-flex; align-items: center; gap: 9px; background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--primary); border-radius: var(--r-full); padding: 8px 18px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--sp-5); } .ld-trial-badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 var(--success-soft); animation: ldPulse 1.8s ease infinite; } @keyframes ldPulse { 0% { box-shadow: 0 0 0 0 rgba(5,150,105,.45); } 70% { box-shadow: 0 0 0 9px rgba(5,150,105,0); } 100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); } } .ld-hero-title { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--text-strong); margin: 0 0 var(--sp-4); } .ld-hero-sub { font-size: var(--fs-md); color: var(--muted); max-width: 620px; margin: 0 auto var(--sp-5); line-height: var(--lh-normal); } .ld-hero-sub strong { color: var(--text); } .ld-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .ld-hero-note { font-size: var(--fs-xs); color: var(--muted-2); margin-top: var(--sp-3); } /* Product mockup */ .ld-mock { max-width: 760px; margin: var(--sp-7) auto 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-glass); background: var(--surface); box-shadow: var(--shadow-4), var(--shadow-accent); text-align: left; } .ld-mock-chrome { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 10px 14px; } .ld-dot { width: 10px; height: 10px; border-radius: 50%; } .ld-dot.r { background: #f87171; } .ld-dot.y { background: #fbbf24; } .ld-dot.g { background: #34d399; } .ld-mock-url { margin: 0 auto; font-size: var(--fs-xs); color: var(--muted-2); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px 16px; } .ld-mock-body { display: flex; min-height: 300px; } .ld-mock-side { width: 168px; flex-shrink: 0; background: var(--surface-2); border-right: 1px solid var(--border); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; } .ld-mock-newchat { background: var(--grad-brand); color: var(--on-accent); font-size: .72rem; font-weight: var(--fw-semibold); text-align: center; border-radius: var(--r-xs); padding: 7px 8px; margin-bottom: 4px; } .ld-mock-sess { height: 12px; border-radius: 6px; background: var(--border); width: 90%; } .ld-mock-sess.short { width: 60%; } .ld-mock-sess.active { background: var(--accent-soft); outline: 1px solid var(--accent-ring); } .ld-mock-chat { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .ld-mock-msg { font-size: .78rem; line-height: 1.5; padding: 10px 14px; max-width: 85%; border-radius: var(--r-md); } .ld-mock-msg.user { align-self: flex-end; background: var(--grad-brand); color: var(--on-accent); border-bottom-right-radius: var(--r-xs); } .ld-mock-msg.ai { align-self: flex-start; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: var(--r-xs); } .ld-mock-model { display: block; font-size: .64rem; font-weight: var(--fw-bold); color: var(--primary); margin-bottom: 4px; } .ld-mock-composer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-full); padding: 9px 8px 9px 16px; font-size: .76rem; color: var(--muted-2); } .ld-mock-send { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--grad-brand); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: .7rem; } @media (max-width: 620px) { .ld-mock-side { display: none; } } /* ── Provider strip ──────────────────────────────────────────────────────── */ .ld-providers { padding: var(--sp-5) 0 0; } .ld-providers-label { text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin-bottom: var(--sp-4); } .ld-providers-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; } .ld-prov { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--muted-2); letter-spacing: -.01em; transition: color var(--t-base) ease; cursor: default; } .ld-prov:hover { color: var(--primary); } /* ── Stats band ──────────────────────────────────────────────────────────── */ /* Sits between the provider strip and the features grid as a thin, quiet divider — a full card would compete with the hero mockup right above it. */ .ld-stats-sec { padding: var(--sp-6) 0 var(--sp-2); } .ld-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--sp-5) 0; } .ld-stat { text-align: center; padding: 0 var(--sp-2); } .ld-stat-num { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 4px; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ld-stat-label { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; } /* ── Features grid ───────────────────────────────────────────────────────── */ .ld-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); } .ld-feat { padding: var(--sp-5); } .ld-feat-ic { width: 44px; height: 44px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--grad-brand); color: var(--on-accent); box-shadow: var(--shadow-accent); margin-bottom: var(--sp-3); } .ld-feat h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 6px; } .ld-feat p { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: var(--lh-normal); } /* ── How it works ────────────────────────────────────────────────────────── */ .ld-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); position: relative; } .ld-step { text-align: center; padding: 0 var(--sp-3); } .ld-step-num { width: 46px; height: 46px; margin: 0 auto var(--sp-3); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--grad-brand); color: var(--on-accent); font-weight: var(--fw-bold); font-size: var(--fs-md); box-shadow: var(--shadow-accent); } .ld-step h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 6px; } .ld-step p { font-size: var(--fs-sm); color: var(--muted); margin: 0; } /* ── Use cases ───────────────────────────────────────────────────────────── */ .ld-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); } .ld-use { padding: var(--sp-5); display: flex; flex-direction: column; } .ld-use-emoji { font-size: 1.6rem; line-height: 1; margin-bottom: var(--sp-3); /* Keep the glyph on its own baseline box so tall emoji don't shift the title */ height: 34px; display: flex; align-items: center; } .ld-use h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 6px; } .ld-use p { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--sp-4); line-height: var(--lh-normal); flex: 1; } /* Example prompts read as things you could literally type into the composer */ .ld-use-prompts { display: flex; flex-wrap: wrap; gap: 6px; } .ld-use-prompt { font-size: var(--fs-xs); color: var(--primary); background: var(--accent-softer); border: 1px solid var(--accent-ring); border-radius: var(--r-full); padding: 4px 11px; white-space: nowrap; } /* ── Comparison table ────────────────────────────────────────────────────── */ .ld-compare { padding: 0; overflow: hidden; } .ld-cmp-head, .ld-cmp-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.3fr; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-5); } .ld-cmp-head { background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; } .ld-cmp-h-them { color: var(--muted-2); } .ld-cmp-h-us { color: var(--primary); } .ld-cmp-row + .ld-cmp-row { border-top: 1px solid var(--border); } .ld-cmp-row:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); } .ld-cmp-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); } .ld-cmp-them, .ld-cmp-us { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); line-height: 1.45; } .ld-cmp-them { color: var(--muted); } .ld-cmp-them svg { color: var(--muted-2); flex-shrink: 0; margin-top: 2px; } .ld-cmp-us { color: var(--text); font-weight: var(--fw-medium); } .ld-cmp-us svg { color: var(--success); flex-shrink: 0; margin-top: 2px; } @media (max-width: 720px) { /* Stacked cards — a 3-column grid at phone width squeezes each cell to two words per line. The row label becomes the card heading. */ .ld-cmp-head { display: none; } .ld-cmp-row { grid-template-columns: 1fr; gap: 9px; padding: var(--sp-4); } /* Wrapping + a full-width ::before gives each cell its own small caption, so hiding the header row doesn't lose which column is which. */ .ld-cmp-them, .ld-cmp-us { flex-wrap: wrap; } .ld-cmp-them::before, .ld-cmp-us::before { flex: 0 0 100%; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; } .ld-cmp-them::before { content: "Separate subscriptions"; color: var(--muted-2); } .ld-cmp-us::before { content: "This workspace"; color: var(--primary); } } /* ── Security & trust ────────────────────────────────────────────────────── */ .ld-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-5) var(--sp-6); } .ld-trust-item { display: flex; gap: var(--sp-3); align-items: flex-start; } .ld-trust-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--primary); } .ld-trust-item h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 5px; } .ld-trust-item p { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: var(--lh-normal); } .ld-trust-foot { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--muted-2); } .ld-trust-foot a { color: var(--muted); text-decoration: none; } .ld-trust-foot a:hover { color: var(--primary); text-decoration: none; } /* ── Models showcase ─────────────────────────────────────────────────────── */ .ld-models-sec { overflow: hidden; } .ld-models-glow { position: absolute; width: 700px; height: 700px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; background: url('../images/glow-1.svg') center / contain no-repeat; opacity: .8; } .ld-models-sec .ld-wrap { position: relative; z-index: 1; } .ld-model-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 860px; margin: 0 auto; } .ld-model-cloud .pill { background: var(--surface); } /* ── Pricing extras (base card styles live in ui.css) ────────────────────── */ .ld-payg { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); text-decoration: none; color: inherit; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } .ld-payg:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); text-decoration: none; } .ld-payg-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--primary); } .ld-payg h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 3px; } .ld-payg p { font-size: var(--fs-sm); color: var(--muted); margin: 0; } .ld-payg-go { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--primary); } .ld-pkgs-hd { text-align: center; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); margin: var(--sp-7) 0 var(--sp-4); } .ld-pkgs { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: var(--sp-3); max-width: 900px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 4px 4px var(--sp-3); -webkit-overflow-scrolling: touch; } .ld-pkgs::-webkit-scrollbar { height: 8px; } .ld-pkgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-full); } .ld-pkg { flex: 0 0 150px; max-width: 190px; scroll-snap-align: start; padding: var(--sp-4); text-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; } .ld-pkg:hover { text-decoration: none; } .ld-pkg.best { border-color: var(--accent-300); box-shadow: var(--shadow-accent); } .ld-pkg .badge { margin-bottom: 4px; } .ld-pkg-price { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); } .ld-pkg-credits { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary); } .ld-pkg-name { font-size: var(--fs-xs); color: var(--muted); } /* ── FAQ section ─────────────────────────────────────────────────────────── */ .ld-faq-sec { position: relative; } /* ── Final CTA band ──────────────────────────────────────────────────────── */ .ld-cta-band { margin: var(--sp-7) 22px 0; } .ld-cta-inner { max-width: 1096px; margin: 0 auto; text-align: center; padding: var(--sp-8) var(--sp-5); border-radius: var(--r-xl); background: url('../images/noise.svg') repeat, var(--grad-brand-subtle); border: 1px solid var(--accent-ring); position: relative; overflow: hidden; } .ld-cta-inner::before { content: ""; position: absolute; width: 560px; height: 560px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url('../images/glow-2.svg') center / contain no-repeat; z-index: 0; pointer-events: none; } .ld-cta-inner > * { position: relative; z-index: 1; } .ld-cta-inner h2 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); margin: 0 0 var(--sp-2); } .ld-cta-inner p { font-size: var(--fs-base); color: var(--muted); margin: 0 0 var(--sp-5); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .ld-section { padding: var(--sp-5) 0; } .ld-hero { padding-top: var(--sp-5); } .ld-hero-ctas .btn-lg { width: 100%; } .ld-cta-band { margin: var(--sp-5) 12px 0; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .ld-trial-badge .pulse { animation: none; } .ld-payg { transition: none; } .ld-payg:hover { transform: none; } }