:root { /* Kept in sync in VALUE (not name. See public/styles.css's own :root for why the names differ) with the portal shell's tokens, now sourced from Augmented Labs Inc.'s actual brand site: warm off-white background, true black ink, warm neutral grays, #246BFE accent blue, 16px card/button radius, Inter throughout (no separate serif/italic display face - the brand site uses none). Dark mode removed entirely per direct instruction. */ --ink: #000000; --ink-soft: #9d9a94; --ink-faint: #bfbcb5; --line: #e5e3df; --line-soft: #f1f0ed; --paper: #ffffff; --canvas: #fdfcfc; --accent: #246bfe; --accent-soft: #eaf1ff; --accent-hover: #1a54d4; --navy: #0b1117; --danger: #d14343; --danger-soft: #fbeaea; --star: #f5a623; --radius: 16px; --pill-radius: 999px; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-accent: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } * { box-sizing: border-box; } html { scrollbar-color: var(--ink-faint) transparent; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; animation: page-in .32s ease both; } @keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 3px solid var(--canvas); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } a { color: var(--accent); text-decoration: none; transition: color .12s ease; } a:hover { color: var(--accent-hover); } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; } .muted { color: var(--ink-soft); } /* ---- Reusable brand components (shared visual language with the portal shell's own CSS in public/styles.css. See that file's matching block) ---- */ .accent-italic { color: var(--accent); font-style: normal; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .stat-number { color: var(--accent); } .card-accent-top { position: relative; overflow: hidden; } .card-accent-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--navy), var(--accent)); } .card-accent-left { border-left: 3px solid var(--accent); } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---- Top bar ---- */ .read-progress { position: fixed; top: 0; left: 0; height: 2.5px; width: 0%; z-index: 30; background: var(--accent); opacity: 0; transition: width .1s linear, opacity .2s ease; } .topbar { display: flex; align-items: center; gap: 20px; padding: 14px 28px; background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } /* Fragment mode renders this topbar as a
instead of a
(see topbarHtml's "Tag" variable) because it's mounted INSIDE the portal shell, below the portal's own sticky .top-header (also top:0, z-index:20) - not as the page's only header like it is on a standalone /kb visit. Sticking it to top:0 as well pinned it directly on top of the outer header once the page scrolled: same z-index, later in the DOM, so on the tie it painted over the outer header's right half. That's what cut the "for Beyond The Call" chip short and made this topbar's own brand icon appear to bleed through it. Stick it just below the outer header's height instead (matches .portal-sidebar's own top:57px) so the two stack cleanly. */ div.topbar { top: 57px; } .brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 28px; } .brand-mark img { height: 100%; width: auto; display: block; } .brand-mark .icon-dark { display: none; } .brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); } .topbar-spacer { flex: 1; } .search-trigger { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--pill-radius); background: var(--canvas); color: var(--ink-faint); font-size: 14px; cursor: pointer; text-align: left; } .search-trigger:hover { border-color: var(--accent); } .search-trigger svg { width: 16px; height: 16px; flex-shrink: 0; } .search-trigger kbd { margin-left: auto; font-family: inherit; font-size: 11px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink-faint); } .agent-widget { font-size: 13px; color: var(--ink-soft); white-space: nowrap; } .agent-widget a { color: var(--ink-soft); } .settings-link { color: var(--ink-soft); font-size: 14px; white-space: nowrap; } /* ---- Layout ---- */ .layout { display: flex; align-items: flex-start; min-height: calc(100vh - 60px); } .sidebar { width: 260px; flex-shrink: 0; padding: 22px 14px; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; } .new-page-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: var(--pill-radius); font-weight: 500; font-size: 14px; } .new-page-btn span { color: var(--accent); font-weight: 700; } .new-page-btn:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); } .sidebar-section { margin-bottom: 22px; } .sidebar-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 0 10px; margin-bottom: 6px; } .sidebar ul { list-style: none; margin: 0; padding: 0; } .sidebar .nav-subtree { padding-left: 16px; border-left: 1px solid var(--line-soft); margin-left: 10px; } .sidebar li { margin: 1px 0; } .sidebar .nav-row { display: flex; align-items: center; gap: 2px; } .sidebar .nav-row a { flex: 1; min-width: 0; } .sidebar a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; color: var(--ink-soft); font-size: 14px; line-height: 1.3; } .nav-toggle { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--ink-faint); border-radius: 4px; } .nav-toggle:hover { background: var(--line-soft); color: var(--ink); } .nav-toggle svg { width: 9px; height: 9px; transition: transform .15s ease; } .nav-toggle[aria-expanded="true"] svg { transform: rotate(90deg); } .nav-toggle-spacer { width: 18px; height: 18px; flex-shrink: 0; } .nav-children[hidden] { display: none; } .nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; } .sidebar a:hover { background: var(--line-soft); text-decoration: none; color: var(--ink); } .sidebar a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar a.active .nav-dot { background: var(--accent); } .sidebar a.pinned-link .nav-dot { background: var(--star); } .sidebar a.has-children { font-weight: 600; } .other-spaces a { color: var(--ink-faint); font-size: 13px; } .current-space-label { display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); } /* ---- Content ---- */ .content { flex: 1; padding: 40px 56px 80px; max-width: 800px; } .content:has(.admin-wrap) { max-width: 1240px; } .breadcrumbs { font-size: 13px; color: var(--ink-faint); margin-bottom: 14px; } .breadcrumbs a { color: var(--ink-soft); } .crumb-sep { margin: 0 8px; color: var(--line); } .page-hero { position: relative; margin: -8px 0 0; border-radius: 14px; overflow: hidden; height: 280px; } .page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .page-hero:hover .page-hero-img { transform: scale(1.035); } .page-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,20,0) 38%, rgba(10,12,20,0.82) 100%); } .page-hero-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 28px; } .page-hero-content h1 { color: #fff; margin: 8px 0 4px; font-size: 32px; } .page-hero-content .breadcrumbs a, .page-hero-content .breadcrumbs .crumb-sep { color: rgba(255,255,255,0.82); } .page-hero-content .page-meta { color: rgba(255,255,255,0.8); } .page-header-cover { margin-top: 14px; } .page-header-cover .page-actions { margin-left: auto; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .page-header h1 { margin: 0 0 6px 0; font-size: 32px; } .page-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .page-meta { font-size: 13px; color: var(--ink-faint); } .space-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; } .space-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .page-content-wrap { display: flex; align-items: flex-start; gap: 40px; } .page-content { flex: 1; min-width: 0; font-size: 17px; line-height: 1.75; color: var(--ink); } .page-toc { width: 190px; flex-shrink: 0; position: sticky; top: 76px; display: none; } .page-toc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 10px; } .page-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); } .page-toc li { margin: 0; } .page-toc a { display: block; padding: 5px 0 5px 14px; font-size: 13px; color: var(--ink-soft); border-left: 2px solid transparent; margin-left: -2px; line-height: 1.4; } .page-toc a:hover { color: var(--ink); text-decoration: none; } .page-toc .toc-level-3 a { padding-left: 26px; font-size: 12.5px; } .content:has(.page-toc) { max-width: 980px; } @media (min-width: 980px) { .page-toc { display: block; } } .page-content img { max-width: 100%; border-radius: 8px; } .page-content h1, .page-content h2, .page-content h3 { margin-top: 1.4em; } .page-content p { margin: 1em 0; } .page-content a { text-decoration: underline; } .subpages { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); } .subpages h3 { margin: 0 0 16px 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .card-grid-wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .page-card { display: block; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; overflow: hidden; } .page-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 4px 16px rgba(20,23,31,0.06); transform: translateY(-1px); } .page-card-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 4px; overflow-wrap: break-word; } .page-card-snippet { font-size: 13px; color: var(--ink-soft); line-height: 1.5; overflow-wrap: break-word; word-break: break-word; } .page-card-path { font-size: 11px; color: var(--ink-faint); margin-bottom: 4px; } .space-card { position: relative; display: block; padding: 20px 22px; border-radius: 14px; background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--space-color, var(--accent)) 16%, var(--paper)) 0%, var(--paper) 65%); border: 1px solid var(--line); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .space-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--space-color, var(--accent)); } .space-card:hover { text-decoration: none; box-shadow: 0 10px 28px rgba(20,23,31,0.10); transform: translateY(-3px); border-color: color-mix(in srgb, var(--space-color, var(--accent)) 35%, var(--line)); } .space-card-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; background: var(--space-color, var(--accent)); margin-bottom: 12px; } .space-card-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 4px; } .space-card-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 10px; } .space-card-meta { font-size: 12px; color: var(--ink-faint); } .space-card-kind { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 8px; } .empty-state { text-align: center; padding: 48px 20px; max-width: 380px; margin: 0 auto; } .empty-state-icon { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); } .empty-state-icon svg { width: 24px; height: 24px; } .empty-state-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 6px; } .empty-state-body { font-size: 13px; color: var(--ink-soft); line-height: 1.6; } .empty-state-body a { font-weight: 600; } .hero { position: relative; overflow: hidden; text-align: center; padding: 56px 20px 16px; max-width: 720px; margin: 0 auto; border-radius: 20px; background: radial-gradient(120% 140% at 50% 0%, var(--accent-soft) 0%, var(--canvas) 65%); } /* A soft, blurred gradient-mesh backdrop - two large blobs in the current accent/space color. Used behind a hero section to give an otherwise flat white page some depth. Give the container position:relative and put real content in a child with position:relative so it sits above the mesh. */ .mesh-bg { position: absolute; inset: -40px; overflow: hidden; z-index: 0; pointer-events: none; border-radius: inherit; } .mesh-bg::before, .mesh-bg::after { content: ""; position: absolute; width: 46vw; max-width: 520px; min-width: 280px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: 0.28; } .mesh-bg::before { background: var(--accent); top: -18%; left: -10%; } .mesh-bg::after { background: var(--space-color, var(--accent-hover)); top: -6%; right: -12%; } .hero > *, .space-hero > *, .login-hero > * { position: relative; z-index: 1; } .hero h1 { font-size: 34px; margin-bottom: 8px; } .hero p { color: var(--ink-soft); font-size: 15px; margin-bottom: 28px; } .home-wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px 80px; } .home-section { margin-top: 40px; } .home-section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 14px; } /* Space landing header - themed mesh backdrop behind the title/actions row */ .space-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 32px 28px; margin-bottom: 28px; background: color-mix(in srgb, var(--space-color, var(--accent)) 6%, var(--paper)); border: 1px solid var(--line); } .space-hero .page-header { margin-bottom: 0; } /* Login screen. Centered glass card over a mesh backdrop */ .login-hero { position: relative; overflow: hidden; max-width: 440px; margin: 64px auto 0; padding: 0; } .login-card { position: relative; z-index: 1; background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 40px 36px; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.04); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .login-card h1 { font-size: 24px; margin-bottom: 8px; text-align: center; } .login-card > p { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 24px; text-align: center; line-height: 1.6; } .login-card form { max-width: none !important; margin: 0 !important; } .pinned-row { display: flex; gap: 10px; flex-wrap: wrap; } .pinned-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill-radius); border: 1px solid var(--line); background: var(--accent-soft); font-size: 13px; color: var(--ink); } .pinned-chip:hover { border-color: var(--accent); text-decoration: none; color: var(--accent); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--pill-radius); background: var(--paper); color: var(--ink-soft); font-size: 14px; font-weight: 500; border: 1px solid var(--line); cursor: pointer; font-family: inherit; transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .08s ease; } .btn:hover { background: var(--line-soft); text-decoration: none; color: var(--ink); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0 var(--accent-soft); } .btn-primary:hover { background: var(--accent-hover); color: white; border-color: var(--accent-hover); box-shadow: 0 4px 14px -4px var(--accent); } .btn-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); } .btn-danger:hover { background: #fbd7d7; } .star-btn { padding: 7px 10px; } .star-btn svg { width: 16px; height: 16px; stroke: var(--ink-faint); fill: none; transition: stroke .12s ease, fill .12s ease; } .star-btn.active svg { stroke: var(--star); fill: var(--star); } form label { display: block; margin-bottom: 18px; font-size: 14px; font-weight: 500; color: var(--ink); } form input[type="text"], form input[type="password"], form input[type="email"], form input[type="search"], form select, form textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease; } form input[type="text"]:focus, form input[type="password"]:focus, form input[type="email"]:focus, form input[type="search"]:focus, form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } form input[type="color"] { width: 60px; height: 36px; padding: 2px; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; } #editor-container { margin-top: 6px; background: var(--paper); min-height: 260px; border-radius: 0 0 8px 8px; } .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; background: var(--canvas); } .form-actions { margin-top: 24px; display: flex; gap: 10px; } :root { --flash-bg: #ecfdf3; --flash-ink: #067647; --flash-line: #d3f8df; } .flash { background: var(--flash-bg); color: var(--flash-ink); border: 1px solid var(--flash-line); border-radius: 8px; padding: 11px 16px; margin-bottom: 24px; font-size: 14px; } /* Announcement banner - full width, above the sidebar/content split */ .site-banner { display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: color-mix(in srgb, var(--accent) 14%, var(--canvas)); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; } .site-banner-icon { flex: 0 0 auto; } .site-banner-text { flex: 1 1 auto; } .site-banner-dismiss { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 4px; } .site-banner-dismiss:hover { color: var(--ink); } /* Embedded external site/doc. Responsive 16:9 frame. This rides on Quill's own built-in "video" embed format (inserted via quill.insertEmbed), since pasting a raw