/* ===================================================================== qiboo-home.css — signed-in homepage states (Free member + Pro cockpit) Loaded on index.html alongside styles.css. Uses the shared design tokens (--primary-dark, --accent-ai, --slate-*, --r-lg, fonts) from styles.css. The anon marketing page keeps its own inline styles; this file only dresses #view-app and the small anon enhancements (how-it-works, sticky CTA). ===================================================================== */ /* ---- View switch (anti-flash) -------------------------------------- */ /* Default: anon shown, app hidden. The head script flips an class synchronously (qh-pending) before first paint when a session marker is present; qiboo-home.js sets the final state (qh-on) once auth resolves. */ #view-app { display: none; } html.qh-pending #view-anon, html.qh-on #view-anon { display: none; } html.qh-pending #view-app, html.qh-on #view-app { display: block; } /* anon: hide the static "evidence" hero from first paint — qiboo-home-chat.js injects the treasure hero in its place, so this prevents the brief static-hero flash before the swap. No-JS keeps it. */ html.qh-anon .hero[data-screen-label="hero"] { display: none; } /* ---- Home shell ---------------------------------------------------- */ .qh-home { padding: 30px 0 70px; } .qh-home .qh-sec { margin-top: 34px; } .qh-home .qh-sec:first-child { margin-top: 0; } .qh-h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--primary-dark); margin: 0 0 14px; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 10px; } .qh-h2 a { margin-left: auto; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--accent-ai); text-decoration: none; } .qh-h2 a:hover { text-decoration: underline; } /* ---- Greeting ------------------------------------------------------ */ .qh-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .qh-greet__hi { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -0.02em; } .qh-greet__hi em { font-style: normal; color: var(--primary); } .qh-greet__sub { margin: 6px 0 0; font-size: 14px; color: var(--slate-500); } .qh-greet__plan { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; } .qh-greet__plan--pro { background: var(--accent-ai); color: #fff; } .qh-greet__plan--free { background: var(--slate-100); color: var(--slate-700); } /* ---- Command bar (Pro) -------------------------------------------- */ .qh-cmd { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } .qh-cmd form { flex: 1 1 380px; display: flex; gap: 8px; } .qh-cmd input { flex: 1; border: 1.5px solid var(--slate-200); border-radius: 999px; padding: 13px 18px; font-size: 14px; font-family: var(--font-sans); background: #fff; transition: border-color .14s, box-shadow .14s; } .qh-cmd input:focus { outline: none; border-color: var(--accent-ai); box-shadow: 0 0 0 3px var(--accent-ai-soft); } /* ---- Usage meters (Free) ------------------------------------------ */ .qh-usage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .qh-meter { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg, 14px); padding: 15px 16px; } .qh-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .qh-meter__name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .qh-meter__count { font-family: var(--font-mono); font-size: 12px; color: var(--slate-500); } .qh-meter__bar { height: 6px; border-radius: 999px; background: var(--slate-100); margin-top: 10px; overflow: hidden; } .qh-meter__fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width .5s ease; } .qh-meter.is-max .qh-meter__fill { background: var(--secondary-dark); } .qh-meter.is-max .qh-meter__count { color: var(--secondary-dark); font-weight: 700; } .qh-meter__cta { display: none; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--accent-ai); cursor: pointer; } .qh-meter.is-max .qh-meter__cta { display: block; } /* ---- Tool launcher grid ------------------------------------------- */ .qh-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .qh-tool { position: relative; display: flex; gap: 13px; align-items: flex-start; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg, 14px); padding: 16px 17px; transition: border-color .14s, transform .14s, box-shadow .14s; cursor: pointer; } .qh-tool:hover { border-color: var(--primary-light, #bcd0b0); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(45, 80, 22, .09); } .qh-tool__ic { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--primary-pale, #e8f0e1); display: inline-flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1; } .qh-tool__name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--primary-dark); margin: 0 0 2px; } .qh-tool__desc { font-size: 12.5px; color: var(--slate-500); line-height: 1.4; margin: 0; } .qh-tool__lock { position: absolute; top: 12px; right: 13px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--accent-ai-soft); color: var(--accent-ai); border-radius: 5px; padding: 2px 6px; } .qh-tool--locked .qh-tool__ic { background: var(--accent-ai-soft); } /* ---- Continue / recent activity cards ----------------------------- */ .qh-cont { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .qh-card { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg, 14px); padding: 14px 15px; transition: border-color .14s, box-shadow .14s; } .qh-card:hover { border-color: var(--accent-ai); box-shadow: 0 6px 18px rgba(37, 99, 235, .08); } .qh-card__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--slate-50); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .qh-card__t { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qh-card__m { font-size: 11.5px; color: var(--slate-500); margin: 4px 0 0; font-family: var(--font-mono); } /* ---- Activation checklist (Free) ---------------------------------- */ .qh-check { background: linear-gradient(180deg, #fff, var(--primary-pale, #e8f0e1)); border: 1px solid var(--slate-200); border-radius: var(--r-xl, 18px); padding: 20px 22px; } .qh-check__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .qh-check__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--primary-dark); margin: 0; } .qh-check__prog { font-family: var(--font-mono); font-size: 12px; color: var(--primary); margin-left: auto; } .qh-check__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .qh-step { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-md, 10px); padding: 11px 13px; text-decoration: none; color: inherit; transition: border-color .14s; } .qh-step:hover { border-color: var(--primary-light, #bcd0b0); } .qh-step__box { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--slate-300); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; } .qh-step.done .qh-step__box { background: var(--primary); border-color: var(--primary); color: #fff; } .qh-step__lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .qh-step.done .qh-step__lbl { color: var(--slate-400); text-decoration: line-through; } /* ---- Pro upsell block (Free) -------------------------------------- */ .qh-up { background: linear-gradient(135deg, #fff 0%, var(--accent-ai-soft) 100%); border: 1px solid #cfe0ff; border-radius: var(--r-xl, 18px); padding: 26px 28px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: center; } .qh-up__ey { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ai); } .qh-up__h { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; color: var(--primary-darker); margin: 8px 0 6px; letter-spacing: -0.01em; } .qh-up__h em { font-style: normal; color: var(--accent-ai); } .qh-up__p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 16px; } .qh-up__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; } .qh-up__list li { font-size: 13px; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; } .qh-up__list li::before { content: "✓"; color: var(--accent-ai); font-weight: 800; flex: none; } .qh-up__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-ai); color: #fff; border: none; border-radius: 999px; padding: 13px 24px; font-size: 14px; font-weight: 700; font-family: var(--font-sans); cursor: pointer; text-decoration: none; transition: transform .14s, box-shadow .14s; } .qh-up__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(37, 99, 235, .28); } .qh-up__price { text-align: center; background: #fff; border: 1px solid #cfe0ff; border-radius: var(--r-lg, 14px); padding: 22px; } .qh-up__amt { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--primary-darker); line-height: 1; } .qh-up__amt small { font-size: 15px; color: var(--slate-500); font-weight: 500; } .qh-up__note { font-size: 11.5px; color: var(--slate-500); margin: 10px 0 0; line-height: 1.45; } .qh-up__guar { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-pale, #e8f0e1); border-radius: 999px; padding: 4px 11px; } /* ---- Value-realization strip (Pro) -------------------------------- */ .qh-value { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--slate-200); border: 1px solid var(--slate-200); border-radius: var(--r-lg, 14px); overflow: hidden; } .qh-value__cell { background: #fff; padding: 18px 16px; text-align: center; } .qh-value__num { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--primary-dark); line-height: 1; } .qh-value__lbl { font-size: 11.5px; color: var(--slate-500); margin-top: 6px; } /* ---- What's new + refer (Pro) ------------------------------------- */ .qh-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .qh-new { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg, 14px); padding: 16px 17px; text-decoration: none; color: inherit; transition: border-color .14s, box-shadow .14s; } .qh-new:hover { border-color: var(--accent-ai); box-shadow: 0 6px 18px rgba(37, 99, 235, .08); } .qh-new__tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ai); } .qh-new__t { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--primary-dark); margin: 7px 0 4px; } .qh-new__d { font-size: 12.5px; color: var(--slate-500); line-height: 1.45; margin: 0; } .qh-refer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, var(--primary-darker), var(--primary-dark)); color: #fff; border-radius: var(--r-xl, 18px); padding: 22px 26px; } .qh-refer__t { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 3px; } .qh-refer__p { font-size: 13px; opacity: .85; margin: 0; line-height: 1.5; } .qh-refer__cta { margin-left: auto; background: var(--secondary); color: var(--primary-darker); border-radius: 999px; padding: 11px 20px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; } .qh-refer__cta:hover { background: var(--secondary-light); } /* ---- Empty state --------------------------------------------------- */ .qh-empty { font-size: 13px; color: var(--slate-500); background: var(--slate-50); border: 1px dashed var(--slate-300); border-radius: var(--r-lg, 14px); padding: 22px; text-align: center; } /* ---- Skeleton ------------------------------------------------------ */ .qh-skel { animation: qhPulse 1.3s ease-in-out infinite; } .qh-skel .qh-sk-line { height: 14px; border-radius: 6px; background: var(--slate-100); } .qh-skel .qh-sk-card { height: 84px; border-radius: var(--r-lg, 14px); background: var(--slate-100); } @keyframes qhPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .qh-skel { animation: none; } } /* ---- Responsive ---------------------------------------------------- */ @media (max-width: 920px) { .qh-tools, .qh-news { grid-template-columns: repeat(2, 1fr); } .qh-usage { grid-template-columns: repeat(2, 1fr); } .qh-up { grid-template-columns: 1fr; } .qh-check__list { grid-template-columns: 1fr; } .qh-value { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .qh-tools, .qh-cont, .qh-news, .qh-usage { grid-template-columns: 1fr; } .qh-refer__cta { margin-left: 0; } } /* ===================================================================== Anonymous-page enhancements (Phase 3) — only render for logged-out users ===================================================================== */ /* How it works — 3 steps, sits just under the hero */ .qa-how { padding: 14px 0 6px; } .qa-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; } .qa-how__step { position: relative; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg, 14px); padding: 20px 22px 20px 56px; } .qa-how__step::before { counter-increment: step; content: counter(step); position: absolute; left: 18px; top: 19px; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-dark); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .qa-how__t { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--primary-dark); margin: 0 0 5px; } .qa-how__d { font-size: 13px; color: var(--slate-500); line-height: 1.5; margin: 0; } @media (max-width: 760px) { .qa-how__grid { grid-template-columns: 1fr; } } /* Sticky "start free" bar — anon only, appears after scroll, dismissible */ .qa-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--primary-darker); color: #fff; box-shadow: 0 -6px 24px rgba(20, 30, 15, .22); transform: translateY(110%); transition: transform .28s ease; } .qa-sticky.is-on { transform: translateY(0); } .qa-sticky__in { max-width: var(--container, 1280px); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; } .qa-sticky__txt { font-size: 14px; font-weight: 500; } .qa-sticky__txt strong { font-weight: 700; } .qa-sticky__cta { margin-left: auto; background: var(--secondary); color: var(--primary-darker); border-radius: 999px; padding: 10px 22px; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } .qa-sticky__cta:hover { background: var(--secondary-light); } .qa-sticky__x { background: transparent; border: none; color: rgba(255, 255, 255, .6); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px; } .qa-sticky__x:hover { color: #fff; } @media (max-width: 560px) { .qa-sticky__txt { font-size: 12.5px; } .qa-sticky__cta { padding: 9px 16px; } } /* HAZINE 5.2 — the "first treasure" welcome card (gold accent = allowed slot #4) */ .qh-ft { display: flex; align-items: center; gap: 16px; background: linear-gradient(160deg, #fff, var(--q-gold-soft, #f7edd2)); border: 1.5px solid var(--q-gold, #c9a227); border-radius: 16px; padding: 18px 20px; box-shadow: 0 10px 28px rgba(201, 162, 39, .14); } .qh-ft__ic { font-size: 30px; line-height: 1; flex: none; } .qh-ft__tx { flex: 1; min-width: 0; } .qh-ft__tx h2 { font-family: var(--font-display, Georgia, serif); font-size: 18px; color: var(--primary-dark, #2d5016); margin: 0 0 4px; line-height: 1.25; } .qh-ft__tx p { font-size: 13px; color: #5b6350; line-height: 1.5; margin: 0; } .qh-ft__act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; } .qh-ft__cta { background: var(--primary, #4a7c2f); color: #fff; border-radius: 11px; padding: 11px 18px; font-size: 13.5px; font-weight: 800; text-decoration: none; white-space: nowrap; } .qh-ft__cta:hover { background: var(--primary-dark, #2d5016); } .qh-ft__skip { background: none; border: none; color: #9aa08f; font-size: 11.5px; cursor: pointer; padding: 2px 4px; } @media (max-width: 640px) { .qh-ft { flex-direction: column; align-items: flex-start; } .qh-ft__act { flex-direction: row; align-items: center; width: 100%; } .qh-ft__cta { flex: 1; text-align: center; } } /* HAZINE 6.1 — Pro cockpit PDF-Studio shelf */ .qh-studio { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; } .qh-studio__val { background: #fff; border: 1px solid var(--slate-200, #e2e4dd); border-radius: 14px; padding: 18px 16px; text-align: center; } .qh-studio__last { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 760px) { .qh-studio { grid-template-columns: 1fr; } .qh-studio__last { grid-template-columns: 1fr; } }