/* ═══════════════════════════════════════════════ AdminAssist Ally — Main Stylesheet Public marketing site (light theme only) ═══════════════════════════════════════════════ */ :root { --aa-icon-blue: #5B7FFF; --aa-brand-violet: #8B5CF6; --aa-brand-blue: #0D6EFD; --aa-deep-navy: #0F172A; --aa-ink: #1E293B; --aa-muted-gray: #6C757D; --aa-off-white: #FAFAFA; --aa-brand-gradient: linear-gradient(180deg, #5B7FFF 0%, #8B5CF6 100%); /* Compatibility aliases for the existing marketing stylesheet. */ --aa-primary: var(--aa-brand-blue); --aa-primary-lt: #edf4ff; --aa-dark: var(--aa-deep-navy); --aa-gray: var(--aa-muted-gray); --aa-border: #e2e8f0; --aa-radius: 1rem; } /* ── Reset & base ── */ * { box-sizing: border-box; } /* Matches the on legacy pages AND the SvelteKit layout wrapper div. */ body.public-body, .public-body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--aa-ink); background: var(--aa-off-white); padding-top: 40px; } /* ── Site-wide launch notice ── */ .coming-soon-banner { position: fixed; inset: 0 0 auto 0; z-index: 1100; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 0.45rem 1rem; gap: 0.65rem; background: var(--aa-dark); color: var(--aa-off-white); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.055em; text-align: center; text-transform: uppercase; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22); } .coming-soon-banner a { color: var(--aa-icon-blue); text-decoration: none; border-bottom: 1px solid rgba(91, 127, 255, 0.65); } .coming-soon-banner a:hover { color: var(--aa-off-white); } .launch-pulse { width: 7px; height: 7px; border-radius: 999px; background: var(--aa-icon-blue); box-shadow: 0 0 0 5px rgba(91, 127, 255, 0.17); } /* ── Navbar ── */ .navbar { height: 64px; top: 40px; } .aa-marketing-nav { border-bottom: 1px solid rgba(30, 41, 59, 0.08); box-shadow: 0 8px 30px rgba(15, 23, 42, 0.055); } .brand-name { color: var(--aa-ink); font-size: 1.1rem; letter-spacing: -0.3px; } .brand-icon { font-size: 1.4rem; } .aa-brand-ally { color: var(--aa-brand-violet); } .aa-nav-cta { padding-inline: 1rem; box-shadow: 0 6px 18px rgba(13, 110, 253, 0.2); } /* ── Hero ── */ .hero-section { background: radial-gradient(circle at 78% 18%, rgba(139, 92, 246, 0.1), transparent 28rem), radial-gradient(circle at 10% 80%, rgba(91, 127, 255, 0.09), transparent 25rem), var(--aa-off-white); min-height: 85vh; display: flex; align-items: center; } /* Chat mockup */ .hero-mockup { background: #fff; border-radius: 1.5rem !important; max-width: 420px; margin: 0 auto; } .chat-bubble { display: flex; flex-direction: column; max-width: 85%; } .chat-bubble.incoming { align-items: flex-start; } .chat-bubble.outgoing { align-items: flex-end; margin-left: auto; } .bubble-text { padding: 0.6rem 1rem; border-radius: 1rem; font-size: 0.88rem; line-height: 1.5; } .incoming .bubble-text { background: #f1f5f9; color: var(--aa-ink); border-bottom-left-radius: 0.25rem; } .outgoing .bubble-text { background: var(--aa-primary); color: #fff; border-bottom-right-radius: 0.25rem; } .bubble-time { font-size: 0.68rem; color: #94a3b8; margin-top: 2px; padding: 0 0.25rem; } /* ── Step cards ── */ .step-card { background: var(--aa-off-white); border: 1px solid rgba(91, 127, 255, 0.18); transition: transform 0.2s, box-shadow 0.2s; } .step-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(13, 110, 253, 0.12); } .step-number { width: 48px; height: 48px; background: var(--aa-primary); color: #fff; border-radius: 50%; font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto; } /* ── Feature cards ── */ .feature-card { transition: transform 0.2s, box-shadow 0.2s; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; } .feature-icon { font-size: 2rem; } .feature-detail-card { border: 1px solid var(--aa-border); transition: box-shadow 0.2s; } .feature-detail-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); } /* ── Pricing cards ── */ .pricing-card { transition: transform 0.2s, box-shadow 0.2s; } .pricing-card:hover { transform: translateY(-4px); } .addon-card { border: 1px solid var(--aa-border); } /* ── CTA section ── */ .cta-section { background: linear-gradient(135deg, rgba(91, 127, 255, 0.1), rgba(139, 92, 246, 0.11)), var(--aa-off-white); } /* ── Footer ── */ .footer-section { background: var(--aa-dark); } /* ── Persona tabs ── */ .btn-persona { background: #fff; border: 1.5px solid var(--aa-border); color: #475569; border-radius: 2rem; padding: 0.45rem 1.1rem; font-size: 0.88rem; font-weight: 500; transition: all 0.18s; } .btn-persona:hover { border-color: var(--aa-primary); color: var(--aa-primary); background: var(--aa-primary-lt); } .btn-persona.active { background: var(--aa-primary); border-color: var(--aa-primary); color: #fff; } .persona-list li { padding: 0.55rem 0; border-bottom: 1px solid #e2e8f0; font-size: 0.95rem; line-height: 1.55; } .persona-list li:last-child { border-bottom: none; } /* ── Utility ── */ .hover-lift { transition: transform 0.2s, box-shadow 0.2s; } .hover-lift:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important; } /* ── Accordion ── */ .accordion-button:not(.collapsed) { color: var(--aa-primary); background: var(--aa-primary-lt); } .accordion-button:focus { box-shadow: none; } /* ── Badges (marketing only) ── Scoped to .public-body so these brand-tinted LIGHT fills stay on the light-only public site and do NOT leak into the portal. In the portal the theme toggles, so Bootstrap's own theme-adaptive .bg-*-subtle must win — otherwise a forced near-white fill under light .text-* emphasis colours is unreadable in dark mode. !important is required to beat Bootstrap's own !important utility. */ .public-body .bg-primary-subtle { background-color: #edf4ff !important; } .public-body .bg-secondary-subtle { background-color: #f1f5f9 !important; } .public-body .bg-success-subtle { background-color: #f0fdf4 !important; } .public-body .bg-warning-subtle { background-color: #fffbeb !important; } .public-body .bg-danger-subtle { background-color: #fef2f2 !important; } .public-body .bg-info-subtle { background-color: #f0f9ff !important; } .bg-dark { background-color: var(--aa-dark) !important; }