/* ══════════════════════════════════════════════════════════════════════════ AI Chat Console — Public content pages (terms, privacy-policy, fair-use, guide). Shared prose + hero styling; page-specific card classes stay in each page's own (much smaller) inline block. Load order: tokens.css → app.css → ui.css → pages.css ══════════════════════════════════════════════════════════════════════════ */ html, body { height: auto !important; min-height: 100% !important; overflow: visible !important; overflow-y: auto !important; } body.public-page { position: relative; margin: 0; background: var(--bg); color: var(--text); background-image: var(--bg-mesh); background-attachment: fixed; font-family: var(--font-family); line-height: var(--lh-normal); overflow-x: hidden; } /* :not(.btn):not(.pn-brand) so this doesn't outrank .btn-primary's white text or .pn-brand's text-strong color (same specificity trap as the ".btn-primary" rule in ui.css, but body.public-page loads later) — that mismatch is what made "Start free" and, separately, the "AI Chat Console" brand wordmark render blue on Guide/Fair-use/Terms/Privacy while index.php's landing-page scope never hit this rule at all. */ body.public-page a:not(.btn):not(.pn-brand) { color: var(--primary); text-decoration: none; } body.public-page a:not(.btn):not(.pn-brand):hover { text-decoration: underline; } /* Hero atmosphere — painted on the BODY, not inside .page-hero. .public-nav (includes/public_nav.php) is the first thing after , ahead of .page-hero in the DOM, and sits transparent at rest so whatever's behind it shows through (see ui.css .public-nav). A .page-hero-scoped background starts below the nav and leaves it a flat, hue-less band — exactly the "seam under the bar" problem landing.css solved by moving its mesh from .ld-hero to .landing-page::before (page-level). Same fix, mirrored here: noise.svg + mesh-hero.svg, matching the landing page pixel-for-pixel rather than approximating it, now reaching behind the nav too. */ body.public-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"] body.public-page::before, [data-theme="oled"] body.public-page::before { opacity: .40; } /* ── Page hero (shared shape for fu-hero / tc-hero / pp-hero / ug-hero) ──── */ /* Holds content only now — the atmosphere above paints behind it (and the nav) already. Needs its own position:relative + z-index:1 to rise above body::before (z-index:0) rather than sit visually under it — the same treatment .ld-hero-in gets on the landing page. Content further down the page (.page-wrap etc.) doesn't need this: by the time it starts, the mesh's mask has already faded it to fully transparent, same as landing.php never needs it below .ld-hero-in either. */ .page-hero { position: relative; z-index: 1; text-align: center; padding: 56px 22px 48px; } .page-hero .badge { margin-bottom: 14px; } /* Matches .ld-hero-title's weight/tracking so a page title and the landing headline are visibly the same typographic voice. */ .page-hero h1 { font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; color: var(--text-strong); line-height: var(--lh-tight); } .page-hero p { font-size: var(--fs-base); color: var(--muted); max-width: 560px; margin: 0 auto; } @media (max-width: 640px) { .page-hero { padding: 40px 22px 36px; } .page-hero h1 { font-size: var(--fs-xl); } } /* ── Prose wrapper ───────────────────────────────────────────────────────── */ /* Legacy per-page class names (.fu-*, .tc-*, .pp-*, .ug-*) are aliased onto the shared rules so existing markup keeps working unchanged. */ .page-wrap, .fu-wrap, .tc-wrap, .pp-wrap, .ug-wrap { max-width: 900px; margin: 0 auto; padding: 36px 22px 80px; } .page-wrap h2, .fu-wrap h2, .tc-wrap h2, .pp-wrap h2, .ug-wrap h2 { font-size: var(--fs-md); font-weight: 800; margin: 32px 0 10px; letter-spacing: -.01em; color: var(--text-strong); } .page-wrap :is(p, li), .fu-wrap :is(p, li), .tc-wrap :is(p, li), .pp-wrap :is(p, li), .ug-wrap :is(p, li) { font-size: .92rem; color: var(--text); } .page-wrap ul, .fu-wrap ul, .tc-wrap ul, .pp-wrap ul, .ug-wrap ul { padding-left: 20px; } .page-wrap li, .fu-wrap li, .tc-wrap li, .pp-wrap li, .ug-wrap li { margin-bottom: 6px; } /* Content card */ .page-card, .fu-card, .tc-card, .pp-card, .ug-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-1); } /* Tables */ :is(.page-wrap, .fu-wrap, .tc-wrap, .pp-wrap, .ug-wrap) table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 6px; } :is(.page-wrap, .fu-wrap, .tc-wrap, .pp-wrap, .ug-wrap) :is(th, td) { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } :is(.page-wrap, .fu-wrap, .tc-wrap, .pp-wrap, .ug-wrap) th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } :is(.page-wrap, .fu-wrap, .tc-wrap, .pp-wrap, .ug-wrap) td.num { font-variant-numeric: tabular-nums; } .page-note, .fu-note { font-size: .8rem; color: var(--muted); margin-top: 10px; }