/*! * auth-gate.css - shared styles for the soft-paywall hero + CTA * 2026-05-09 (v3 - adds data-auth attribute rules for instant flash-free toggle) * * Any gated app page that includes auth-gate.js can also include this stylesheet * to get consistent styling for the public hero + signup CTA card. * * AUTH STATE VISIBILITY RULES * --------------------------- * auth-gate.js sets `data-auth="in"` (logged in) or `data-auth="out"` (logged out) * on the element. The rules below toggle visibility instantly via CSS so * authenticated users never see a flash of the public hero, and logged-out users * never see a flash of the gated app UI: * * [data-auth-gate] - public marketing surface (hero, CTA card) * [data-auth-required] - private app surface (search form, dashboard data) */ html[data-auth='in'] [data-auth-gate] { display: none !important; } html[data-auth='out'] [data-auth-required] { display: none !important; } /* Until auth-gate.js sets the data-auth attribute (very brief - inline script) we hide the gated app surface by default. The public hero stays visible so crawlers always see something even before any JS runs. */ html:not([data-auth='in']) [data-auth-required] { display: none !important; } /* ============ PUBLIC HERO ============ */ .pp-public-hero { background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%); padding: 56px 24px 44px; } .pp-public-hero--green { background: linear-gradient(135deg, #f0fdf4 0%, #f8fff8 100%); } .pp-public-hero--purple { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); } .pp-public-hero--amber { background: linear-gradient(135deg, #fffbeb 0%, #fffef5 100%); } .pp-public-hero__wrap { max-width: 1100px; margin: 0 auto; } .pp-public-hero__eyebrow { display: inline-block; background: #e0edff; color: #1d4ed8; font-size: .78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; } .pp-public-hero--green .pp-public-hero__eyebrow { background:#dcfce7; color:#166534; } .pp-public-hero--purple .pp-public-hero__eyebrow { background:#ede9fe; color:#6d28d9; } .pp-public-hero--amber .pp-public-hero__eyebrow { background:#fef3c7; color:#92400e; } .pp-public-hero__h1 { font-size: 2.3rem; line-height: 1.1; margin: 0 0 10px; letter-spacing: -.6px; font-weight: 800; color: #0f172a; } .pp-public-hero__sub { font-size: 1.15rem; font-weight: 700; color: #f59e0b; margin: 0 0 12px; } .pp-public-hero--green .pp-public-hero__sub { color:#16a34a; } .pp-public-hero--purple .pp-public-hero__sub { color:#7c3aed; } .pp-public-hero--amber .pp-public-hero__sub { color:#f59e0b; } .pp-public-hero__desc { font-size: 1.02rem; line-height: 1.6; color: #475569; margin: 0 0 18px; max-width: 720px; } /* ============ LOGIN CTA CARD (shown when logged out) ============ */ .pp-login-cta { max-width: 900px; margin: 32px auto; padding: 48px 32px; text-align: center; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 10px 40px rgba(15,23,42,.06); } .pp-login-cta__badge { display: inline-block; background: #eff6ff; color: #1d4ed8; padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 18px; } .pp-login-cta__heading { font-size: 1.7rem; font-weight: 800; color: #0f172a; margin: 0 0 12px; letter-spacing: -.4px; } .pp-login-cta__desc { color: #475569; font-size: 1.02rem; line-height: 1.6; margin: 0 auto 26px; max-width: 560px; } .pp-login-cta__btn { display: inline-block; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; padding: 15px 32px; border-radius: 10px; font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: 0 6px 20px rgba(245,158,11,.3); transition: transform .2s; border: none; cursor: pointer; } .pp-login-cta__btn:hover { transform: translateY(-2px); color: #fff; } .pp-login-cta__alt { display: inline-block; margin-left: 10px; color: #3a66b3; font-weight: 600; text-decoration: none; padding: 15px 18px; } .pp-login-cta__alt:hover { text-decoration: underline; } .pp-login-cta__trust { display: flex; gap: 24px; justify-content: center; margin-top: 26px; flex-wrap: wrap; font-size: .85rem; color: #64748b; } .pp-login-cta__trust span { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 680px) { .pp-public-hero { padding: 40px 18px 32px; } .pp-public-hero__h1 { font-size: 1.7rem; } .pp-public-hero__sub { font-size: 1rem; } .pp-login-cta { padding: 32px 20px; margin: 20px 14px; } .pp-login-cta__heading { font-size: 1.3rem; } .pp-login-cta__alt { display: block; margin: 12px 0 0 0; } }