/* ============================================================================ khoj.css — the shared design system for the Khoj research surfaces. One stylesheet, every page. Long-form pages keep their exact body markup and class names; this file restyles them. Method pages (Atlas, Spectrum, Lenses) reuse the same tokens + shell. Change the look once here — it propagates. Accent model: --fam family accent (place=terracotta, domain=teal, conceptual=indigo), set by a .fam-* class on . --c per-item accent (Conceptual sets one per probe, inline). Anything that should follow the probe hue uses var(--c, var(--fam)) so Place/Domain fall back to their family accent automatically. --glyph secondary/script accent (native scripts, .sharp borders). ========================================================================== */ /* ---- tokens : neutral palette ----------------------------------------- */ :root{ --paper:#e9e5dc; --panel:#f3f0e8; --panel-2:#faf8f2; --ink:#23201b; --ink-soft:#4c473e; --muted:#726c60; --line:#d3cdbf; --line-soft:#e0dbcf; --fam:#8a5a34; --fam-soft:#b98a5e; --glyph:#7d3b34; /* conceptual per-lens hues */ --art:#9e5b63; --sci:#3f6a8c; --mat:#4b4f7a; --fra:#6f4b7a; --eco:#6b6f3a; --ecl:#356b5b; --serif:"Iowan Old Style","Charter","Bitstream Charter",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono","Menlo","Consolas",monospace; --script:"Iowan Old Style",Georgia,"Songti SC","Hiragino Mincho ProN", "Noto Serif","Noto Serif CJK SC","Noto Serif JP","Noto Naskh Arabic", "Noto Serif Hebrew","Noto Serif Devanagari","Apple SD Gothic Neo",serif; --measure:70ch; } @media (prefers-color-scheme:dark){:root{ --paper:#16140f; --panel:#1e1b15; --panel-2:#24211a; --ink:#eae3d4; --ink-soft:#b9b19f; --muted:#8b8474; --line:#312d24; --line-soft:#28241d; --fam:#cc9a68; --fam-soft:#a97c4f; --glyph:#cf958b; --art:#d18b92; --sci:#7fb0d6; --mat:#9599c9; --fra:#b088bd; --eco:#adb26a; --ecl:#6db69f; }} :root[data-theme="light"]{ --paper:#e9e5dc; --panel:#f3f0e8; --panel-2:#faf8f2; --ink:#23201b; --ink-soft:#4c473e; --muted:#726c60; --line:#d3cdbf; --line-soft:#e0dbcf; --fam:#8a5a34; --fam-soft:#b98a5e; --glyph:#7d3b34; --art:#9e5b63; --sci:#3f6a8c; --mat:#4b4f7a; --fra:#6f4b7a; --eco:#6b6f3a; --ecl:#356b5b; } :root[data-theme="dark"]{ --paper:#16140f; --panel:#1e1b15; --panel-2:#24211a; --ink:#eae3d4; --ink-soft:#b9b19f; --muted:#8b8474; --line:#312d24; --line-soft:#28241d; --fam:#cc9a68; --fam-soft:#a97c4f; --glyph:#cf958b; --art:#d18b92; --sci:#7fb0d6; --mat:#9599c9; --fra:#b088bd; --eco:#adb26a; --ecl:#6db69f; } /* ---- family accents : each page sets one on -------------------- */ .fam-place{--fam:#8a5a34; --fam-soft:#b98a5e; --glyph:#7d3b34;} .fam-domain{--fam:#2f6f6a; --fam-soft:#5fa39c; --glyph:#7a4a2d;} .fam-conceptual{--fam:#4b4f7a; --fam-soft:#8387b4; --glyph:#6f4b7a;} .fam-review{--fam:#6a5636; --fam-soft:#9c855c; --glyph:#7d3b34;} @media (prefers-color-scheme:dark){ .fam-place{--fam:#cc9a68; --fam-soft:#a97c4f; --glyph:#cf958b;} .fam-domain{--fam:#6db0aa; --fam-soft:#4f8781; --glyph:#c99a78;} .fam-conceptual{--fam:#9599c9; --fam-soft:#6f73a8; --glyph:#b088bd;} .fam-review{--fam:#c3ad7f; --fam-soft:#94805a; --glyph:#cf958b;} } :root[data-theme="dark"] .fam-place{--fam:#cc9a68; --fam-soft:#a97c4f; --glyph:#cf958b;} :root[data-theme="dark"] .fam-domain{--fam:#6db0aa; --fam-soft:#4f8781; --glyph:#c99a78;} :root[data-theme="dark"] .fam-conceptual{--fam:#9599c9; --fam-soft:#6f73a8; --glyph:#b088bd;} :root[data-theme="dark"] .fam-review{--fam:#c3ad7f; --fam-soft:#94805a; --glyph:#cf958b;} *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink); font-family:var(--serif);font-size:18px;line-height:1.72; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} /* ---- the connective nav : same on every surface ----------------------- */ .khojnav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:2px; padding:9px clamp(16px,4vw,40px); background:color-mix(in srgb,var(--paper) 84%,transparent); backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--line);font-family:var(--sans);font-size:13px;flex-wrap:wrap;} .khojnav .home{color:var(--ink);text-decoration:none;font-weight:600;margin-right:5px;letter-spacing:-.01em} .khojnav .home b{color:var(--fam)} .khojnav .sep{color:var(--muted);margin:0 7px} .khojnav a.seg{color:var(--ink-soft);text-decoration:none;padding:5px 11px;border-radius:99px; transition:background .14s,color .14s} .khojnav a.seg:hover{background:var(--panel);color:var(--ink)} .khojnav a.seg.cur{background:var(--fam);color:#fff} .khojnav .views{margin-left:auto;display:flex;gap:4px;align-items:center} .khojnav .views a{font-size:12px;color:var(--muted);text-decoration:none;padding:5px 10px; border:1px solid var(--line);border-radius:99px;transition:border-color .14s,color .14s} .khojnav .views a:hover{color:var(--ink-soft);border-color:var(--fam-soft)} .khojnav .views a.on{color:var(--ink);border-color:var(--fam-soft);background:var(--panel)} .wrap{max-width:900px;margin:0 auto;padding:clamp(20px,5vw,56px) clamp(18px,5vw,40px) 96px;} /* ---- masthead (shared by all long-form pages) ------------------------- */ .mast{border-bottom:2px solid var(--ink);padding-bottom:26px;margin-bottom:8px;} .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;} .kicker .dev{font-family:var(--serif);font-size:17px;letter-spacing:0;color:var(--fam);} h1{font-size:clamp(28px,5vw,46px);line-height:1.05;font-weight:600;margin:0; letter-spacing:-.015em;text-wrap:balance;} .lede{font-size:19px;color:var(--ink-soft);max-width:var(--measure);margin:22px 0 0;} .lede em{font-style:italic;color:var(--ink);} .note{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--muted); max-width:var(--measure);margin:16px 0 0;padding-left:14px;border-left:2px solid var(--line);} /* domain spectrum key (decorative axis) */ .spectrum{margin:26px 0 4px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;} .spectrum .sl{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;} .bar{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--fam),var(--muted),var(--glyph));margin-bottom:8px;} .spectrum .ends{display:flex;justify-content:space-between;font-family:var(--sans);font-size:12px;color:var(--ink-soft);gap:12px;} /* ---- sticky jump index (was top-only; now follows) -------------------- */ .index{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 4px; position:sticky;top:46px;z-index:40;padding:12px 0 12px; background:linear-gradient(var(--paper) 80%,transparent);} .chip{font-family:var(--sans);font-size:12.5px;text-decoration:none;color:var(--ink-soft); display:inline-flex;align-items:center;gap:8px;padding:6px 12px; border:1px solid var(--line);border-radius:999px;background:var(--panel);transition:border-color .15s,background .15s;} .chip:hover{border-color:var(--c,var(--fam));background:var(--panel-2);} .chip .g{font-family:var(--script);color:var(--glyph);font-size:14px;} .chip .n{font-family:var(--mono);font-size:11px;color:var(--muted);} .chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--fam));flex:none;} /* ---- long-form : Place sections --------------------------------------- */ .place{margin-top:56px;scroll-margin-top:96px;border-top:1px solid var(--line);padding-top:34px;} .place-h{margin-bottom:24px;} .place-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;} .place-eyebrow .num{color:var(--fam);} .place-eyebrow .own{color:var(--glyph);border:1px solid var(--line);border-radius:4px;padding:1px 6px;letter-spacing:.08em;} .place-name{font-size:clamp(24px,3.6vw,32px);line-height:1.05;font-weight:600;margin:0 0 4px;letter-spacing:-.01em;} .place-sys{font-family:var(--sans);font-size:13px;color:var(--muted);} .word{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:20px 0 6px; padding:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;border-left:3px solid var(--glyph);} .word .glyph{font-family:var(--script);font-size:clamp(30px,6vw,46px);line-height:1;color:var(--glyph);font-weight:600;} .word .rom{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);} .word .gloss{font-family:var(--sans);font-size:13.5px;color:var(--muted);line-height:1.5;flex:1;min-width:180px;} /* ---- long-form : Domain sections -------------------------------------- */ .domain{margin-top:52px;scroll-margin-top:96px;border-top:1px solid var(--line);padding-top:32px;} .domain-h{margin-bottom:20px;} .domain-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;} .domain-eyebrow .num{color:var(--fam);} .domain-name{font-size:clamp(23px,3.5vw,31px);line-height:1.06;font-weight:600;margin:0 0 12px;letter-spacing:-.01em;} .metab{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--fam);border-radius:8px;} .metab .tl{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fam);flex:none;padding-top:2px;} .metab .tx{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink-soft);} /* ---- long-form : Conceptual probe panels ------------------------------ */ .probe{margin-top:52px;scroll-margin-top:96px;border-top:1px solid var(--line);padding-top:34px;} .probe-h{display:flex;flex-direction:column;gap:6px;margin-bottom:22px;border-left:3px solid var(--c,var(--fam));padding-left:18px;} .probe-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--c,var(--fam));display:flex;align-items:center;gap:10px;} .probe-tag .own{color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px;letter-spacing:.08em;} .probe-h h2{font-family:var(--serif);font-size:clamp(23px,3.4vw,30px);line-height:1.1;font-weight:600;margin:2px 0 0;letter-spacing:-.01em;text-wrap:balance;} .probe-h .scope{font-family:var(--sans);font-size:13.5px;color:var(--muted);line-height:1.55;} /* ---- long-form : shared prose (brief / lens-label / sharp / sources) --- */ .brief{max-width:var(--measure);margin-top:22px;} .brief p{margin:0 0 18px;} .brief > p.frame,.brief > p:first-child{font-size:18.5px;} .lens-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--c,var(--fam));margin:26px 0 12px;display:flex;align-items:center;gap:10px;} .lens-label::after{content:"";height:1px;flex:1;background:var(--line-soft);} .brief ul{list-style:none;margin:0 0 8px;padding:0;} .brief li{position:relative;padding-left:22px;margin:0 0 15px;} .brief li::before{content:"";position:absolute;left:3px;top:.72em;width:7px;height:7px; border:1.5px solid var(--c,var(--fam));border-radius:50%;} .brief ol{margin:0 0 8px;padding-left:22px;} .brief ol li{padding-left:4px;} .brief ol li::before{display:none;} .brief strong{font-weight:600;color:var(--ink);} .brief code{font-family:var(--mono);font-size:.82em;background:var(--panel);border:1px solid var(--line-soft);border-radius:4px;padding:.06em .38em;} .brief a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--c,var(--fam));padding-bottom:1px;word-break:break-word;} .brief a:hover{background:var(--panel);} .takes{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:6px 22px 14px;margin:20px 0;} .takes .lens-label{margin-top:16px;} .takes dl{margin:0;} .takes dt{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fam);margin:14px 0 3px;} .takes dd{margin:0 0 6px;} .sharp{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c,var(--glyph)); border-radius:8px;padding:18px 22px;margin:24px 0 18px;max-width:var(--measure);} .sharp .lens-label{margin-top:0;color:var(--c,var(--glyph));} .sharp .lens-label::after{display:none;} .sharp p{margin:0;} .sharp p + p{margin-top:12px;} .sources{font-family:var(--sans);font-size:12.5px;line-height:1.7;color:var(--muted);margin:20px 0 0;max-width:var(--measure);} .sources b{font-weight:600;color:var(--ink-soft);} /* conceptual "unprobed" menu (its own .card/.cards — Atlas uses .atlas-card) */ .conv,.unprobed{margin-top:64px;border-top:2px solid var(--ink);padding-top:30px;} .conv h2,.unprobed h2{font-size:clamp(20px,3.3vw,27px);font-weight:600;margin:0 0 8px;letter-spacing:-.01em;} .conv p{font-family:var(--sans);font-size:14px;color:var(--ink-soft);max-width:var(--measure);line-height:1.7;} .unprobed .sub{font-family:var(--sans);font-size:14px;color:var(--muted);max-width:var(--measure);margin:0 0 26px;} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px;} .cards .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px;} .cards .card h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 8px;} .cards .card p{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;} .cards .card .pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 7px;display:inline-block;margin-bottom:12px;} .foot{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:24px;padding-top:18px;border-top:1px solid var(--line);max-width:var(--measure);} .foot a{color:var(--ink-soft);} /* ---- method pages : card grid (Atlas, Domain spectrum, Conceptual) ----- */ .method-head{max-width:var(--measure)} .method-head h1 em{font-style:italic;color:var(--ink-soft)} .method-head .lede b{color:var(--ink);font-weight:600} .axis{margin:30px 0 6px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;} .axis .sl{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;} .axis .bar{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--fam),var(--muted),var(--glyph));margin-bottom:8px;} .axis .ends{display:flex;justify-content:space-between;font-family:var(--sans);font-size:12px;color:var(--ink-soft);gap:12px;} .atlas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;margin-top:26px} .atlas-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit; background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:20px 20px 18px; min-height:250px;overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s,background .16s} .atlas-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--fam));opacity:.5;transition:opacity .16s} .atlas-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.14);border-color:var(--fam-soft);background:var(--panel-2)} .atlas-card:hover::before{opacity:1} .atlas-card:hover .go{opacity:1;transform:translateX(0)} .atlas-card.added{border-style:dashed} .atlas-card .cnum{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:auto} .atlas-card .cnum .badge{color:var(--fam);border:1px solid var(--fam-soft);border-radius:99px;padding:1px 7px;margin-left:5px;font-size:9px;letter-spacing:.1em} .atlas-card .glyph{color:var(--glyph);line-height:1.05;margin:16px 0 2px;word-break:break-word;font-family:var(--script)} .atlas-card .glyph.script{font-size:44px;font-weight:500} .atlas-card .glyph.latinword{font-size:24px;font-style:italic;font-weight:500;letter-spacing:-.01em;font-family:var(--serif)} .atlas-card .rom{font-family:var(--mono);font-size:12px;color:var(--c,var(--fam));margin-bottom:15px} .atlas-card .kind{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0} .atlas-card .headline{font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:3px 0 8px} .atlas-card .gloss{font-family:var(--sans);font-size:12.8px;line-height:1.5;color:var(--ink-soft);margin:0} .atlas-card .go{font-family:var(--sans);font-size:12px;color:var(--c,var(--fam));margin-top:14px;opacity:0;transform:translateX(-4px);transition:opacity .16s,transform .16s} @media (max-width:560px){ body{font-size:17px} .khojnav .views{margin-left:0;width:100%;margin-top:6px} }