/* LLOS.ai SHARED SHELL — chrome only (header + footer). Namespaced sh- so it never collides with a page's gold body styles (subject-hub.css etc.). Tokens are self-contained (gold palette). [2026-06-30] Built from the finalized shell-preview. Applied first to designer.html, then writer, then the rest. Behavior + markup live in shell.js (one source). Page declares: data-pillar, data-context, data-parent. */ :root{ --sh-primary:#ea7a27; --sh-primary-deep:#b85c12; --sh-primary-light:#f59f0a; --sh-bg:#fdfcfa; --sh-warm:#faf5ea; --sh-card:#fff; --sh-border:#eadfce; --sh-border-soft:#f0ebe0; --sh-ink:#171717; --sh-ink-2:#404040; --sh-ink-3:#737373; --sh-muted:#8a8378; --sh-mist:#fdf0dd; --sh-shadow:0 10px 30px -18px rgba(0,0,0,.2); --sh-shadow-lg:0 16px 44px rgba(120,72,20,.14); --sh-spring:cubic-bezier(.22,1,.36,1); --sh-gutter:1.25rem; --sh-maxw:1180px; --sh-hh:64px; --sh-s-xs:.5rem; --sh-s-sm:1rem; --sh-s-md:1.5rem; --sh-s-lg:2rem; --sh-s-xl:3rem; } /* [2026-07-06] Pawan: cream bar below the expanded footer. Same fix as shell-inject.js — the root had no bg, so it inherited the cream --sh-warm body background and painted it below the dark .sh-full footer (and in any over-scroll void). Match the root to the always-dark footer; body keeps its own cream bg, so article content is unchanged. */ html{background:#1c1714} /* [2026-07-10] Pawan (global best practice, ALL pages): search/input placeholders must be SUBTLE (not a dominant gray) and DISAPPEAR the instant you focus/click. currentColor+opacity adapts to each input's own text color (correct on light OR dark inputs) — no hardcoded gray. Page rules can still override. */ ::placeholder{color:currentColor;opacity:.42} :focus::placeholder{opacity:0} @media(min-width:640px){:root{--sh-gutter:2rem}} @media(min-width:1024px){:root{--sh-gutter:3rem}} @media(min-width:1440px){:root{--sh-gutter:4rem}} .sh-wrap{max-width:var(--sh-maxw);margin:0 auto;padding-inline:var(--sh-gutter)} /* ===== PRELOADER — masks the shape pop-in on heavy pages; markup goes inline at top of , fades when shapes load ===== */ .sh-preloader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fffaf0,#fdf6ea 50%,#fff3dd);transition:opacity .45s ease} .sh-preloader.sh-hide{opacity:0;pointer-events:none} .sh-pl-logo{width:54px;height:54px;border-radius:14px;background:var(--sh-primary);color:#fff;font-family:Georgia,serif;font-weight:800;font-size:1.9rem;display:grid;place-items:center;animation:shPlPulse 1.1s ease-in-out infinite} @keyframes shPlPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} /* ===== HEADER ===== */ .sh-topbar{position:sticky;top:0;z-index:600;background:rgba(253,252,250,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--sh-border);transition:transform .3s var(--sh-spring),box-shadow .25s,background .25s} .sh-topbar.sh-condensed{box-shadow:0 6px 22px -16px rgba(0,0,0,.4);background:rgba(253,252,250,.95)} .sh-topbar.sh-hidden{transform:translateY(-100%)} @media(prefers-reduced-motion:reduce){.sh-topbar{transition:none}} .sh-bar{display:flex;align-items:center;gap:.7rem;height:var(--sh-hh);transition:height .25s var(--sh-spring),opacity .2s} .sh-topbar.sh-condensed .sh-bar{height:56px} /* [2026-07-02] Pawan: a persistent ~10% header wastes space on long pages. VP1 = full single-row header; scroll into the second viewport and it collapses to a ~2% strip that still carries the logo + page chip + a caret. Click the strip (.sh-peek) or return to the top to restore the full header. Keeps the shell philosophy's "logo always home + current-page chip" identity, smallest-first. */ .sh-topbar{--sh-strip:24px} .sh-topbar.sh-slim{background:rgba(253,252,250,.97);box-shadow:0 4px 16px -12px rgba(0,0,0,.55)} .sh-topbar.sh-slim .sh-bar{height:0;opacity:0;pointer-events:none;overflow:hidden} .sh-topbar.sh-slim.sh-peek .sh-bar{height:var(--sh-hh);opacity:1;pointer-events:auto;overflow:visible} .sh-topbar.sh-condensed.sh-slim.sh-peek .sh-bar{height:56px} .sh-peekbtn{display:none} .sh-topbar.sh-slim .sh-peekbtn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:var(--sh-strip);background:none;border:0;cursor:pointer;color:var(--sh-primary-deep)} .sh-topbar.sh-slim.sh-peek .sh-peekbtn{display:none} .sh-peekbtn:hover{background:var(--sh-mist)} .sh-peekbtn .sh-pkdot{width:14px;height:14px;border-radius:4px;background:var(--sh-primary);color:#fff;font:800 .56rem Georgia,serif;display:grid;place-items:center} .sh-peekbtn .sh-pkchip{font:700 .58rem 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase} .sh-peekbtn svg{width:12px;height:12px} .sh-home{display:flex;align-items:center;gap:.55rem;flex:0 0 auto;text-decoration:none} .sh-logo{width:34px;height:34px;border-radius:9px;background:var(--sh-primary);color:#fff;font-family:Georgia,serif;font-weight:800;font-size:1.25rem;display:grid;place-items:center} .sh-brand{font-weight:800;font-size:1.06rem;letter-spacing:-.01em;color:var(--sh-ink)} .sh-brand .sh-ai{color:var(--sh-primary-deep)} .sh-nav{display:flex;align-items:center;justify-content:center;gap:.2rem;margin:0 var(--sh-s-sm);flex:1 1 auto} .sh-item{position:relative} .sh-link{display:inline-flex;align-items:center;gap:.28rem;background:none;border:0;cursor:pointer;font:600 .94rem Inter,system-ui,sans-serif;color:var(--sh-ink-2);padding:.5rem .7rem;border-radius:9px;transition:background .15s,color .15s} .sh-link:hover,.sh-item.sh-open .sh-link{color:var(--sh-ink);background:var(--sh-mist)} .sh-link .sh-car{width:14px;height:14px;transition:transform .2s var(--sh-spring)} .sh-item.sh-open .sh-link .sh-car{transform:rotate(180deg)} .sh-mega{position:absolute;top:calc(100% + 10px);left:0;min-width:360px;background:var(--sh-card);border:1px solid var(--sh-border);border-radius:16px;box-shadow:var(--sh-shadow-lg);padding:.7rem;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.99);transform-origin:top left;transition:opacity .2s var(--sh-spring),transform .2s var(--sh-spring),visibility .2s} .sh-item.sh-open .sh-mega{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .sh-tag{font:600 .6rem 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sh-muted);padding:.3rem .6rem .45rem} .sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:.25rem} .sh-mc{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .6rem;border-radius:11px;text-decoration:none;transition:background .14s} .sh-mc:hover{background:var(--sh-warm)} .sh-mc .sh-ic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--sh-mist);display:grid;place-items:center;font-size:1.05rem} .sh-mc b{display:block;font-size:.9rem;font-weight:700;color:var(--sh-ink)} .sh-mc em{display:block;font-style:normal;font-size:.76rem;color:var(--sh-ink-3);margin-top:.05rem} .sh-mfoot{display:block;text-align:right;padding:.5rem .6rem .2rem;font-weight:800;font-size:.84rem;color:var(--sh-primary-deep);text-decoration:none} .sh-right{display:flex;align-items:center;gap:var(--sh-s-xs);flex:0 0 auto;margin-left:auto} .sh-chip{margin:0;font:600 .64rem 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--sh-primary-deep);background:var(--sh-mist);border:1px solid var(--sh-border);border-radius:999px;padding:.22rem .55rem} .sh-icobtn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--sh-border);background:var(--sh-card);border-radius:10px;cursor:pointer;color:var(--sh-ink-2);transition:background .15s,color .15s,border-color .15s} .sh-icobtn:hover{background:var(--sh-mist);color:var(--sh-ink);border-color:var(--sh-primary-light)} .sh-icobtn svg{width:19px;height:19px} .sh-login{display:inline-flex;align-items:center;gap:.4rem;background:var(--sh-primary);color:#fff;font-weight:700;font-size:.9rem;padding:.5rem .9rem;border-radius:10px;text-decoration:none;transition:background .15s,transform .15s} .sh-login:hover{background:var(--sh-primary-deep);transform:translateY(-1px)} .sh-login svg{width:17px;height:17px} .sh-ham{display:none} /* canonical search trigger (from llos-search.js) — match the header icon-button style */ .sh-right .llos-search-trigger{width:38px;height:38px;border-radius:10px;border:1px solid var(--sh-border);color:var(--sh-ink-2)} .sh-right .llos-search-trigger:hover{background:var(--sh-mist);border-color:var(--sh-primary-light);color:var(--sh-ink)} .sh-searchbar{max-height:0;overflow:hidden;border-bottom:1px solid transparent;transition:max-height .28s var(--sh-spring),border-color .28s;background:rgba(253,252,250,.97)} .sh-searchbar.sh-open{max-height:70vh;border-color:var(--sh-border)} .sh-sb{display:flex;align-items:center;gap:.6rem;padding:.7rem 0} .sh-sb svg{width:20px;height:20px;color:var(--sh-muted)} .sh-sb input{flex:1;border:0;background:transparent;font-size:1rem;outline:none;color:var(--sh-ink)} .sh-scope{display:flex;gap:.2rem;background:var(--sh-warm);border-radius:8px;padding:.15rem;flex:0 0 auto} .sh-stab{border:0;background:none;font:600 .76rem Inter;color:var(--sh-ink-3);padding:.3rem .6rem;border-radius:6px;cursor:pointer} .sh-stab.sh-on{background:var(--sh-card);color:var(--sh-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} .sh-results{max-height:54vh;overflow:auto;padding-bottom:.6rem} .sh-sg{font:700 .62rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--sh-muted);padding:.6rem .2rem .25rem} .sh-si{display:block;padding:.5rem .6rem;border-radius:8px;color:var(--sh-ink-2);font-size:.9rem;text-decoration:none} .sh-si:hover,.sh-si.sh-active{background:var(--sh-mist);color:var(--sh-ink)} .sh-si b{color:var(--sh-primary-deep)} .sh-si-sub{color:var(--sh-ink-3);font-weight:400} .sh-sempty{padding:.8rem .2rem;color:var(--sh-ink-3);font-size:.86rem} /* drawer */ .sh-scrim{position:fixed;inset:0;background:rgba(20,12,4,.34);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:700} .sh-scrim.sh-open{opacity:1;visibility:visible} .sh-drawer{position:fixed;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--sh-card);z-index:701;transform:translateX(102%);transition:transform .3s var(--sh-spring);box-shadow:-20px 0 50px -30px rgba(0,0,0,.5);display:flex;flex-direction:column;padding:1rem;overflow-y:auto} .sh-drawer.sh-open{transform:translateX(0)} .sh-dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem} .sh-dgroup{border-bottom:1px solid var(--sh-border-soft)} .sh-dgroup>button{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;font:700 1rem Inter;color:var(--sh-ink);padding:.85rem .2rem;cursor:pointer} .sh-dgroup .sh-dsub{max-height:0;overflow:hidden;transition:max-height .25s var(--sh-spring)} .sh-dgroup.sh-open .sh-dsub{max-height:460px} .sh-dsub a{display:block;padding:.5rem .6rem;color:var(--sh-ink-2);font-size:.9rem;border-radius:8px;text-decoration:none} .sh-dsub a:hover{background:var(--sh-mist)} .sh-dlogin{margin-top:var(--sh-s-md);justify-content:center;width:100%} /* ===== FOOTER — slim bar + roll-out site map ===== */ .sh-foot{background:var(--sh-warm);border-top:1px solid var(--sh-border)} .sh-fbar{display:flex;align-items:center;gap:var(--sh-s-md);padding-block:.55rem;flex-wrap:wrap} .sh-cont{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;flex:1 1 auto;min-width:0} .sh-ck{font:600 .62rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--sh-primary-deep);flex:0 0 auto} .sh-cont a{display:inline-flex;align-items:center;gap:.35rem;background:var(--sh-card);border:1px solid var(--sh-border);border-radius:999px;padding:.55rem .85rem;min-height:40px;font-size:.84rem;font-weight:600;color:var(--sh-ink-2);text-decoration:none;transition:transform .15s,border-color .15s,color .15s} .sh-cont a:hover{transform:translateY(-2px);border-color:var(--sh-primary-light);color:var(--sh-ink)} .sh-facts{display:flex;align-items:center;gap:.4rem;margin-left:auto;flex:0 0 auto} .sh-fico{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--sh-border);background:var(--sh-card);border-radius:999px;cursor:pointer;color:var(--sh-ink-2);transition:background .15s,color .15s,border-color .15s} .sh-fico:hover{background:var(--sh-mist);color:var(--sh-ink);border-color:var(--sh-primary-light)} .sh-fico svg{width:17px;height:17px} .sh-expand{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--sh-border);background:var(--sh-card);border-radius:999px;padding:.55rem 1rem;min-height:40px;font:600 .82rem Inter;color:var(--sh-ink-2);cursor:pointer;transition:border-color .15s,color .15s} .sh-expand:hover{border-color:var(--sh-primary-light);color:var(--sh-ink)} .sh-expand svg{width:15px;height:15px;transition:transform .3s} .sh-foot.sh-open .sh-expand svg{transform:rotate(180deg)} /* [2026-07-03] Mobile footer — was wrapping the "Continue" pills onto ragged rows, pushing share/back-to-top/expander into their own awkward wrapped row below. Pawan (via the gold thinking-lab/probability card pages that load this shell.css): "fix the mobile sad look around footer, make it gold standard better layout." Same fix as common/site-shell/ shell2026.css's .sf-bar/.sf-continue (this file's twin under the sh- prefix, used by static pages that load shell.css directly instead of going through bootstrap.php): .sh-fbar becomes a deliberate two-row grid, .sh-cont becomes a single-row horizontal scroll strip with smaller pills instead of flex-wrap soup, .sh-ck sticky-pinned so it doesn't scroll away with the pills, .sh-facts gets its own full-width centered row. */ @media(max-width:640px){ .sh-fbar{display:grid;grid-template-columns:1fr;gap:.4rem;padding-block:.6rem} .sh-cont{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.4rem} .sh-cont::-webkit-scrollbar{display:none} .sh-ck{position:sticky;left:0;background:var(--sh-warm);padding-right:.3rem;font-size:.56rem} .sh-cont a{font-size:.76rem;padding:.5rem .7rem;min-height:38px;white-space:nowrap} .sh-facts{margin-left:0;width:100%;justify-content:space-between} .sh-expand{flex:1;justify-content:center} } .sh-full{max-height:0;overflow:hidden;opacity:0;background:#1c1714;color:#e8e2d8;transition:max-height 3s cubic-bezier(.16,1,.3,1),opacity 2.4s ease} .sh-foot.sh-open .sh-full{max-height:2200px;opacity:1} @media(prefers-reduced-motion:reduce){.sh-full{transition:none}} .sh-finner{padding-block:var(--sh-s-xl) var(--sh-s-md)} .sh-ftop{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--sh-s-lg);padding-bottom:var(--sh-s-lg);border-bottom:1px solid rgba(255,255,255,.08)} .sh-fbrand{font-family:'Playfair Display',serif;font-weight:800;font-size:1.5rem} .sh-fbrand .sh-ai{color:var(--sh-primary-light)} .sh-ftop p{color:#b8b0a4;font-size:.92rem;max-width:42ch;margin:.5rem 0 0;line-height:1.55} .sh-social{display:flex;gap:.5rem;margin-top:.9rem} .sh-social a{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:9px;color:#cfc7ba} .sh-social a:hover{background:var(--sh-primary);color:#fff;border-color:var(--sh-primary)} .sh-news h4{margin:0 0 .3rem;font-size:1rem} .sh-news p{color:#b8b0a4;font-size:.84rem;margin:0 0 .6rem} .sh-news form{display:flex;gap:.4rem} .sh-news input{flex:1;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;border-radius:9px;padding:.55rem .7rem;font-size:.9rem} .sh-news button{background:var(--sh-primary);color:#fff;border:0;border-radius:9px;padding:.55rem 1rem;font-weight:700;cursor:pointer} .sh-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sh-s-md);padding-block:var(--sh-s-lg)} .sh-col h5{font:700 .7rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--sh-primary-light);margin:0 0 .7rem} .sh-col a{display:block;color:#c4bcae;font-size:.85rem;padding:.22rem 0;text-decoration:none} .sh-col a:hover{color:#fff} .sh-fbottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:var(--sh-s-sm);border-top:1px solid rgba(255,255,255,.08);color:#9a9286;font-size:.8rem} .sh-legal{display:flex;gap:1rem;flex-wrap:wrap} .sh-legal a{color:#9a9286;text-decoration:none} .sh-legal a:hover{color:#fff} /* cookie */ .sh-cookie{position:fixed;left:0;right:0;bottom:0;z-index:680;background:#1c1714;color:#e8e2d8;border-top:1px solid rgba(255,255,255,.1);transform:translateY(110%);transition:transform .4s var(--sh-spring)} .sh-cookie.sh-show{transform:translateY(0)} .sh-cookie-in{display:flex;align-items:center;gap:var(--sh-s-md);flex-wrap:wrap;padding-block:var(--sh-s-sm)} .sh-cookie p{margin:0;font-size:.84rem;color:#c4bcae;flex:1 1 280px;line-height:1.5} .sh-cookie a{color:var(--sh-primary-light);font-weight:600;display:inline-block;padding:.5rem .15rem;margin:-.5rem 0} .sh-cbtns{display:flex;gap:var(--sh-s-xs);margin-left:auto} .sh-cbtn{border:1px solid rgba(255,255,255,.22);background:transparent;color:#e8e2d8;border-radius:8px;padding:.65rem 1.2rem;min-height:42px;font-weight:600;font-size:.84rem;cursor:pointer} .sh-cbtn.sh-accept{background:var(--sh-primary);border-color:var(--sh-primary);color:#fff} @media(prefers-reduced-motion:reduce){.sh-cookie{transition:none}} @media(max-width:980px){ .sh-nav{display:none} /* pills collapse into the drawer; search stays functional */ .sh-ham{display:grid} .sh-right .sh-login{display:none} /* Login moves into the drawer */ /* chip (persona/task) STAYS on mobile — it's the orientation the small screen needs most */ .sh-cols{grid-template-columns:repeat(3,1fr)} .sh-ftop{grid-template-columns:1fr} } @media(max-width:420px){.sh-chip{font-size:.58rem;padding:.2rem .45rem}} @media(max-width:560px){.sh-cols{grid-template-columns:repeat(2,1fr)}} /* [2026-06-30] APP MODE — the chrome recedes so the app IS the page (Pawan: "concentrate on the app; small expanders bring it back"). Header trims to logo + page chip + hamburger; the footer collapses to a thin bar (share · back-to-top · "Site map & links" expander). The hamburger drawer restores the full nav + login; the footer expander restores the full site map. */ [data-shell-mode="app"] .sh-nav{display:none;} [data-shell-mode="app"] .sh-ham{display:grid;} [data-shell-mode="app"] .sh-right > *:not(.sh-chip):not(.sh-ham){display:none;} /* keep only chip + menu */ [data-shell-mode="app"] .sh-cont{display:none;} [data-shell-mode="app"] .sh-fbar{justify-content:flex-end;padding-top:.4rem;padding-bottom:.4rem;}