/* ========================================================================== QuickAsk — Cosmic Theme (shared design system) Reference look: quickask-landing/journey-demo.html Opt-in per page via so un-migrated pages are untouched. Colors live ONLY here (CSS custom props) — pages consume var(--qa-*), never hardcode. ========================================================================== */ :root{ /* grounds */ --qa-ground:#160528; --qa-ground-2:#0d0119; --qa-hero-glow:#26094a; --qa-panel:#1c0a38; --qa-panel-2:#22104a; --qa-line:rgba(143,68,253,.22); --qa-line-soft:rgba(255,255,255,.08); /* accent */ --qa-violet:#8f44fd; --qa-cyan:#30c1ff; --qa-grad:linear-gradient(135deg,var(--qa-violet),var(--qa-cyan)); /* ink */ --qa-ink:#f3ecff; --qa-muted:#a99ac8; --qa-faint:#7d6da0; /* semantic */ --qa-ok:#3bd67a; --qa-warn:#ffcf5c; --qa-bad:#ff6b6b; /* form */ --qa-radius:14px; --qa-radius-sm:10px; --qa-radius-pill:999px; --qa-shadow:0 30px 80px -30px #000; --qa-glow:0 0 60px -20px var(--qa-violet); --qa-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --qa-header-h:64px; } /* ---- base (scoped to .cosmic so migration is page-by-page) ---- */ body.cosmic{ margin:0;font-family:var(--qa-font);color:var(--qa-ink); background:radial-gradient(120% 80% at 50% -10%,var(--qa-hero-glow) 0%,var(--qa-ground) 45%,var(--qa-ground-2) 100%); background-attachment:fixed;-webkit-font-smoothing:antialiased; } body.cosmic a{color:var(--qa-cyan);text-decoration:none} body.cosmic a:hover{color:var(--qa-ink)} .cosmic h1,.cosmic h2,.cosmic h3{letter-spacing:-.02em;text-wrap:balance;color:var(--qa-ink)} .cosmic ::selection{background:rgba(143,68,253,.4);color:#fff} .cosmic :focus-visible{outline:2px solid var(--qa-cyan);outline-offset:2px;border-radius:6px} .qa-gradient-text{background:var(--qa-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .qa-container{width:min(1120px,92vw);margin-inline:auto} /* ---- buttons ---- */ .cosmic .qa-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;border-radius:var(--qa-radius-pill); font-weight:700;font-family:inherit;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,box-shadow .2s ease,background .2s ease} .cosmic .qa-btn-primary{background:var(--qa-grad);color:#fff;box-shadow:0 12px 40px -14px var(--qa-violet)} .cosmic .qa-btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 46px -12px var(--qa-violet)} .cosmic .qa-btn-ghost{background:rgba(255,255,255,.04);color:var(--qa-ink);border-color:var(--qa-line)} .cosmic .qa-btn-ghost:hover{background:rgba(143,68,253,.14)} /* ---- glass card / panel ---- */ .cosmic .qa-card{background:linear-gradient(160deg,rgba(40,20,80,.55),rgba(20,10,40,.55)); border:1px solid var(--qa-line);border-radius:var(--qa-radius);box-shadow:var(--qa-shadow);backdrop-filter:blur(10px)} /* ---- header + sidebar-dropdown (app shell) ---- */ .cosmic .qa-header{position:sticky;top:0;z-index:50;height:var(--qa-header-h); display:flex;align-items:center;background:rgba(13,1,25,.72);backdrop-filter:blur(14px); border-bottom:1px solid var(--qa-line)} .cosmic .qa-header-inner{width:min(1200px,94vw);margin-inline:auto;display:flex;align-items:center;gap:1rem} .cosmic .qa-brand{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--qa-ink)} .cosmic .qa-brand img{width:30px;height:30px;border-radius:8px} .cosmic .qa-nav{display:flex;gap:.35rem;align-items:center;margin-left:.5rem} .cosmic .qa-nav a{padding:.45rem .8rem;border-radius:var(--qa-radius-sm);color:var(--qa-muted);font-weight:600;font-size:.92rem} .cosmic .qa-nav a:hover,.cosmic .qa-nav a.active{color:var(--qa-ink);background:rgba(143,68,253,.16)} .cosmic .qa-header-right{margin-left:auto;display:flex;align-items:center;gap:.6rem} /* dropdown that absorbs the old sidebar */ .cosmic .qa-menu{position:relative} .cosmic .qa-menu-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:var(--qa-radius-sm); background:rgba(255,255,255,.04);border:1px solid var(--qa-line);color:var(--qa-ink);font-weight:600;cursor:pointer} .cosmic .qa-menu-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;padding:.4rem; background:var(--qa-panel);border:1px solid var(--qa-line);border-radius:var(--qa-radius);box-shadow:var(--qa-shadow); display:none;flex-direction:column;gap:2px;z-index:60} .cosmic .qa-menu[data-open="true"] .qa-menu-panel{display:flex} .cosmic .qa-menu-panel a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:var(--qa-radius-sm); color:var(--qa-muted);font-weight:600;font-size:.92rem} .cosmic .qa-menu-panel a:hover,.cosmic .qa-menu-panel a.active{background:rgba(143,68,253,.16);color:var(--qa-ink)} /* ---- header: mobile collapse (marketing nav folds into the app menu) ---- */ .cosmic .qa-menu-mobile-nav{display:none} @media(max-width:820px){ .cosmic .qa-nav{display:none} .cosmic .qa-menu-mobile-nav{display:flex;flex-direction:column;gap:2px; margin-top:4px;padding-top:6px;border-top:1px solid var(--qa-line)} } @media(max-width:560px){ .cosmic .qa-header-right .qa-btn-primary{display:none} } /* ---- user menu (ported from navbar.css, recolored for the cosmic theme) ---- Markup/ids copied verbatim from partials/navbar.html; wired by static/js/navbar.js. */ .cosmic .user-menu{position:relative;font-family:inherit} .cosmic .user-avatar-btn{width:38px;height:38px;border-radius:50%;border:2px solid var(--qa-line); padding:0;background:rgba(143,68,253,.18);cursor:pointer;overflow:hidden;position:relative; display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s} .cosmic .user-avatar-btn:hover{border-color:var(--qa-violet);box-shadow:0 0 0 4px rgba(143,68,253,.18)} .cosmic .user-avatar-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none} .cosmic .user-avatar-btn img.loaded{display:block} .cosmic .user-avatar-btn img.loaded ~ .user-avatar-fallback{display:none} .cosmic .user-avatar-fallback{font-weight:700;color:var(--qa-ink);font-size:.92rem} .cosmic .user-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:260px; background:var(--qa-panel);border:1px solid var(--qa-line);border-radius:var(--qa-radius); box-shadow:var(--qa-shadow);padding:14px;opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity .15s,transform .15s;z-index:200;color:var(--qa-ink)} .cosmic .user-dropdown.open{opacity:1;transform:translateY(0);pointer-events:auto} .cosmic .user-dropdown-head{display:flex;align-items:center;gap:12px;padding-bottom:12px; margin-bottom:12px;border-bottom:1px solid var(--qa-line-soft)} .cosmic .user-dropdown-head img{width:44px;height:44px;border-radius:50%;object-fit:cover; background:rgba(143,68,253,.18);flex-shrink:0} .cosmic .user-dropdown-info{min-width:0;flex:1} .cosmic .user-dropdown-name{font-weight:700;font-size:.95rem;color:var(--qa-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cosmic .user-dropdown-email{font-size:.82rem;color:var(--qa-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cosmic .user-dropdown-plan{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:6px; border-radius:var(--qa-radius-sm);background:rgba(255,255,255,.04);flex-wrap:wrap} .cosmic .user-dropdown-plan .plan-pill{display:inline-block;padding:2px 9px;border-radius:var(--qa-radius-pill); font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; background:rgba(255,255,255,.08);color:var(--qa-muted);border:1px solid var(--qa-line)} .cosmic .user-dropdown-plan .plan-pill[data-plan="pro"]{background:rgba(143,68,253,.22);color:var(--qa-ink);border-color:var(--qa-violet)} .cosmic .user-dropdown-plan .plan-pill[data-plan="enterprise"]{background:var(--qa-grad);color:#fff;border-color:transparent} .cosmic .user-dropdown-plan .plan-upgrade{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--qa-cyan);text-decoration:none} .cosmic .user-dropdown-plan .plan-upgrade:hover{text-decoration:underline} .cosmic .user-dropdown-plan .plan-upgrade.is-hidden{display:none} .cosmic .user-dropdown-signout{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px; background:transparent;border:none;border-radius:var(--qa-radius-sm);color:var(--qa-bad);font-weight:600; font-size:.92rem;cursor:pointer;font-family:inherit;transition:background .15s} .cosmic .user-dropdown-signout:hover{background:rgba(255,107,107,.12)} /* ---- footer (slim cosmic footer) ---- */ .cosmic .qa-footer{border-top:1px solid var(--qa-line);padding:2.4rem 0 1.6rem;color:var(--qa-muted)} .cosmic .qa-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:1.8rem 2rem} .cosmic .qa-footer-about .qa-brand{margin-bottom:.5rem} .cosmic .qa-footer-about p{max-width:32ch;font-size:.88rem;line-height:1.6;color:var(--qa-muted)} .cosmic .qa-footer-col h4{color:var(--qa-ink);font-size:.85rem;font-weight:700;margin:0 0 .8rem} .cosmic .qa-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .cosmic .qa-footer-col a{color:var(--qa-muted);font-size:.88rem} .cosmic .qa-footer-col a:hover{color:var(--qa-ink)} .cosmic .qa-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem; margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--qa-line-soft);font-size:.82rem;color:var(--qa-faint)} .cosmic .qa-footer-socials{display:flex;gap:.6rem} .cosmic .qa-footer-socials a{width:32px;height:32px;border-radius:var(--qa-radius-sm);background:rgba(255,255,255,.04); border:1px solid var(--qa-line);display:inline-flex;align-items:center;justify-content:center;color:var(--qa-muted)} .cosmic .qa-footer-socials a:hover{color:var(--qa-ink);background:rgba(143,68,253,.16)} @media(max-width:880px){.cosmic .qa-footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){ .cosmic .qa-footer-grid{grid-template-columns:1fr} .cosmic .qa-footer-bottom{justify-content:center;text-align:center} } /* ---- hero + sections ---- */ .cosmic .qa-hero{position:relative;text-align:center;padding:clamp(4rem,10vh,8rem) 6vw} .cosmic .qa-hero h1{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:800;line-height:1.03} .cosmic .qa-hero p{color:var(--qa-muted);max-width:56ch;margin:1rem auto 0;font-size:1.05rem;line-height:1.6} .cosmic .qa-section{padding:clamp(3rem,8vh,6rem) 0} /* ---- form controls ---- */ .cosmic input,.cosmic textarea,.cosmic select{ background:rgba(255,255,255,.04);border:1px solid var(--qa-line);color:var(--qa-ink); border-radius:var(--qa-radius-sm);padding:.6rem .8rem;font-family:inherit;font-size:.95rem} .cosmic input::placeholder,.cosmic textarea::placeholder{color:var(--qa-faint)} .cosmic input:focus,.cosmic textarea:focus,.cosmic select:focus{border-color:var(--qa-cyan);outline:none} /* ---- pills / badges ---- */ .cosmic .qa-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:var(--qa-radius-pill); font-size:.75rem;font-weight:700;background:rgba(143,68,253,.18);color:var(--qa-ink);border:1px solid var(--qa-line)} /* ---- static twinkling starfield background (CSS-only, cheap; JS canvas optional on heroes) ---- */ .cosmic .qa-stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.7; background-image: radial-gradient(1px 1px at 20% 30%,#cbb8ff,transparent), radial-gradient(1px 1px at 70% 60%,#30c1ff,transparent), radial-gradient(1.5px 1.5px at 40% 80%,#fff,transparent), radial-gradient(1px 1px at 85% 20%,#c9b8ff,transparent), radial-gradient(1px 1px at 55% 15%,#8f44fd,transparent), radial-gradient(1.5px 1.5px at 10% 70%,#fff,transparent); background-repeat:repeat;background-size:600px 600px;animation:qa-tw 4s ease-in-out infinite} @keyframes qa-tw{0%,100%{opacity:.5}50%{opacity:.85}} @media(prefers-reduced-motion:reduce){ .cosmic .qa-stars{animation:none} .cosmic .qa-btn:hover{transform:none} }