/* Jesse Boehm site header. Requires Inter + Phosphor Icons (see README). */ :root{ --jb-bg:#0a0a0b; --jb-panel:#101013; --jb-surface:#18181d; --jb-hover:#18181c; --jb-line:#1a1a1e; --jb-border:#26262a; --jb-text:#ececef; --jb-text-2:#b9b9bf; --jb-muted:#85858d; --jb-cyan:#3fb8f0; --jb-cyan-hover:#6fcdf5; --jb-pink:#e0457b; --jb-green:#4ade80; --jb-shadow:0 30px 60px rgba(0,0,0,.6); --jb-h:84px; --jb-bp:1100px; } /* Light theme: the site theme toggle sets data-theme on and */ [data-theme="light"]{ --jb-bg:#ffffff; --jb-panel:#f7f7f9; --jb-surface:#ffffff; --jb-hover:#eef0f3; --jb-line:#e6e6ea; --jb-border:#dcdce2; --jb-text:#141417; --jb-text-2:#45454d; --jb-muted:#6c6c74; --jb-cyan:#0a8fcc; --jb-cyan-hover:#0679ae; --jb-pink:#c92f66; --jb-shadow:0 24px 50px rgba(20,20,30,.12); } /* Same thin scrollbar on every page as the home page: a different scrollbar width changes the viewport width, which shifted the centered header between pages */ ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--bg-base)} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--silver,var(--text-muted,#888))} .jb-header{position:sticky;top:0;z-index:1000;background:var(--jb-bg);border-bottom:1px solid var(--jb-line);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased} .jb-header *{box-sizing:border-box} .jb-header a{text-decoration:none} .jb-header :focus-visible{outline:2px solid var(--jb-cyan);outline-offset:2px;border-radius:6px} .jb-bar{height:var(--jb-h);max-width:1440px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:32px} .jb-logo{display:flex;flex:none} .jb-logo img{height:48px;width:auto} .jb-logo-light{display:none} [data-theme="light"] .jb-logo-dark{display:none} [data-theme="light"] .jb-logo-light{display:block} .jb-nav{flex:1} .jb-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px} .jb-link{position:relative;display:flex;align-items:center;gap:6px;font:500 15px/1 Inter,system-ui,sans-serif;color:var(--jb-text-2);background:none;border:0;padding:10px 14px;cursor:pointer;transition:color .15s} .jb-link:hover,.jb-link[aria-expanded="true"]{color:var(--jb-text)} .jb-link .ph-caret-down{font-size:12px;transition:transform .2s} .jb-link[aria-expanded="true"] .ph-caret-down{transform:rotate(180deg);color:var(--jb-cyan)} .jb-link[aria-current="page"],.jb-link.is-active{color:var(--jb-text)} .jb-link[aria-current="page"]::after,.jb-link.is-active::after{content:"";position:absolute;left:14px;right:14px;bottom:calc((var(--jb-h) - 35px) / -2);height:2px;background:var(--jb-cyan)} .jb-phone{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--jb-muted);white-space:nowrap} .jb-phone:hover{color:var(--jb-text)} .jb-cta{display:flex;align-items:center;font-size:15px;font-weight:500;color:var(--jb-text);border:1px solid var(--jb-cyan);padding:10px 18px;border-radius:8px;white-space:nowrap;transition:background .15s} .jb-cta:hover{background:color-mix(in srgb,var(--jb-cyan) 12%,transparent);color:var(--jb-text)} .jb-cta:active{background:color-mix(in srgb,var(--jb-cyan) 22%,transparent)} .jb-burger{display:none} /* Panels */ .jb-panel{position:absolute;left:0;right:0;top:100%;background:var(--jb-panel);border-bottom:1px solid var(--jb-border);box-shadow:var(--jb-shadow);animation:jb-drop .18s ease-out} .jb-panel[hidden]{display:none} @keyframes jb-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .jb-mega{max-width:1440px;margin:0 auto;padding:32px 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 300px;gap:28px} .jb-col{display:flex;flex-direction:column;gap:4px} .jb-col-title{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:0 10px 8px} .jb-c{color:var(--jb-cyan)} .jb-p{color:var(--jb-pink)} .jb-muted{color:var(--jb-muted)} .jb-mega-link{display:flex;gap:12px;padding:10px;border-radius:10px;transition:background .15s} .jb-mega-link:hover,.jb-mega-link.is-current{background:var(--jb-hover)} .jb-ico{flex:none;width:36px;height:36px;border-radius:9px;background:var(--jb-surface);border:1px solid var(--jb-border);display:flex;align-items:center;justify-content:center;font-size:18px} .jb-mega-label{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--jb-text)} .jb-mega-desc{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--jb-muted)} .jb-book{align-self:start;border:1px solid var(--jb-border);border-radius:12px;background:linear-gradient(160deg,var(--jb-surface),var(--jb-panel));padding:22px;display:flex;flex-direction:column;gap:12px} .jb-book p{margin:0} .jb-avail{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--jb-muted)} .jb-dot{width:8px;height:8px;border-radius:50%;background:var(--jb-green)} .jb-book-title{font-size:19px;font-weight:600;line-height:1.3;color:var(--jb-text)} .jb-book-body{font-size:14px;line-height:1.5;color:var(--jb-muted)} .jb-book-btn{margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;color:#0a0a0b;background:var(--jb-cyan);padding:11px;border-radius:8px} .jb-book-btn:hover{background:var(--jb-cyan-hover);color:#0a0a0b} .jb-book-btn i{font-size:17px} .jb-tools{max-width:1440px;margin:0 auto;padding:28px 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .jb-tool{display:flex;gap:14px;padding:16px;border-radius:12px;border:1px solid var(--jb-border);transition:background .15s,border-color .15s} .jb-tool:hover{background:var(--jb-hover);border-color:color-mix(in srgb,var(--jb-cyan) 35%,var(--jb-border))} .jb-tool-ico{font-size:24px;line-height:1} .jb-tool .ph-arrow-up-right{font-size:13px;color:var(--jb-muted)} /* Mobile drawer */ .jb-drawer{display:none} @media (max-width:1100px){ .jb-bar{height:68px;padding:0 18px;gap:12px;justify-content:space-between} /* Customize panel "Hamburger on Right" off: burger left, logo right */ [data-nav-side="left"] .jb-bar{flex-direction:row-reverse} .jb-logo img{height:36px} .jb-nav,.jb-phone,.jb-panel{display:none!important} .jb-cta{display:none} .jb-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--jb-surface);border:1px solid var(--jb-border);color:var(--jb-text);font-size:22px;cursor:pointer} .jb-drawer{position:fixed;left:0;right:0;top:68px;bottom:0;background:var(--jb-bg);display:flex;flex-direction:column;animation:jb-drop .18s ease-out} .jb-drawer[hidden]{display:none} .jb-d-scroll{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:2px} .jb-d-row{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 12px;border-radius:10px;font:500 17px Inter,system-ui,sans-serif;color:var(--jb-text);background:none;border:0;text-align:left;cursor:pointer;width:100%} .jb-d-row:hover{background:var(--jb-hover)} .jb-d-row > span:first-child{font-size:21px;display:flex} .jb-d-label{flex:1} .jb-d-toggle .ph-caret-down{font-size:14px;color:var(--jb-muted);transition:transform .2s} .jb-d-toggle[aria-expanded="true"]{background:var(--jb-surface)} .jb-d-toggle[aria-expanded="true"] .ph-caret-down{transform:rotate(180deg)} .jb-d-row[aria-current="page"]::after,.jb-d-row.is-active::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--jb-pink)} .jb-d-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px 4px 10px} .jb-d-list{display:flex;flex-direction:column;gap:2px;padding:0 4px 10px 38px} .jb-d-grid[hidden],.jb-d-list[hidden]{display:none} .jb-d-sub{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--jb-text-2)} .jb-d-tool{font-size:15px} .jb-d-sub:hover,.jb-d-sub.is-current{background:var(--jb-hover);color:var(--jb-text)} .jb-d-sub > span{font-size:17px;display:flex} .jb-d-sub .ph-arrow-up-right{font-size:13px;color:var(--jb-muted);margin-left:auto} .jb-d-foot{flex:none;padding:14px 14px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--jb-line);display:grid;grid-template-columns:1fr 1.4fr;gap:10px} .jb-d-call,.jb-d-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:10px;font-size:15px} .jb-d-call{border:1px solid var(--jb-border);font-weight:500;color:var(--jb-text)} .jb-d-call i{color:var(--jb-pink);font-size:18px} .jb-d-cta{background:var(--jb-cyan);font-weight:600;color:#0a0a0b} .jb-d-cta:hover{background:var(--jb-cyan-hover);color:#0a0a0b} body.jb-lock{overflow:hidden} } @media (prefers-reduced-motion:reduce){.jb-header *{animation:none!important;transition:none!important}} /* Site pages set a global a:hover color; keep these on the header tokens */ .jb-header a.jb-d-row:hover,.jb-header a.jb-d-call:hover,.jb-sub a.jb-back:hover{color:var(--jb-text)} /* ===== Context bar (sub-pages) ===== */ .jb-sub{position:sticky;top:var(--jb-h);z-index:999;height:48px;padding:0 max(40px,calc((100% - 1440px)/2 + 40px));display:flex;align-items:center;gap:16px;background:var(--jb-sub-bg,#0d0d10);border-bottom:1px solid var(--jb-line);font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:normal} [data-theme="light"] .jb-sub{--jb-sub-bg:#f4f5f7} .jb-sub *{box-sizing:border-box} .jb-sub a{text-decoration:none} .jb-sub :focus-visible{outline:2px solid var(--jb-cyan);outline-offset:2px;border-radius:6px} .jb-crumbs{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:var(--jb-muted)} .jb-crumbs > .ph-caret-right,.jb-crumbs .jb-hide-sm .ph-caret-right{font-size:11px;opacity:.55} .jb-crumb-home{display:flex;color:var(--jb-muted);font-size:16px} .jb-crumb{display:flex;align-items:center;gap:6px;color:var(--jb-text-2);white-space:nowrap} .jb-crumb-home:hover,.jb-crumb:hover{color:var(--jb-text)} .jb-crumb-current{display:flex;align-items:center;gap:6px;color:var(--jb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .jb-crumb > span,.jb-crumb-current > span{display:flex;font-size:15px} .jb-sub-div{width:1px;height:20px;background:var(--jb-border);flex:none} .jb-meta{font-size:13px;color:var(--jb-muted);white-space:nowrap} .jb-step{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--jb-text-2);padding:6px 10px;border:1px solid var(--jb-border);border-radius:8px;white-space:nowrap} .jb-step:hover{color:var(--jb-text);border-color:color-mix(in srgb,var(--jb-cyan) 40%,var(--jb-border))} .jb-step.is-off{opacity:.35;pointer-events:none} .jb-all{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--jb-text-2);padding:6px 10px;border-radius:8px} .jb-all:hover{background:var(--jb-hover);color:var(--jb-text)} .jb-pager{display:flex;align-items:center;border:1px solid var(--jb-border);border-radius:8px;overflow:hidden} .jb-pager a{width:34px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--jb-text-2)} .jb-pager a:hover{background:var(--jb-hover);color:var(--jb-text)} .jb-pager span{font-size:13px;color:var(--jb-text-2);padding:0 10px;line-height:30px;border-left:1px solid var(--jb-border);border-right:1px solid var(--jb-border);white-space:nowrap} .jb-pager .jb-pager-off{width:34px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;border:0;color:var(--jb-text-2);opacity:.35} .jb-chips{flex:1;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none} .jb-chip{font-size:13px;color:var(--jb-text-2);padding:5px 12px;border-radius:999px;border:1px solid var(--jb-border);white-space:nowrap} .jb-chip:hover{color:var(--jb-text)} .jb-chip.is-on{color:var(--jb-text);background:var(--jb-surface);border-color:var(--jb-cyan)} .jb-theme{margin-left:auto;width:32px;height:32px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--jb-text-2);background:none;border:1px solid var(--jb-border);cursor:pointer;font-size:16px} .jb-theme:hover{color:var(--jb-text);background:var(--jb-hover)} .jb-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--jb-cyan),var(--jb-pink))} .jb-back{display:none} .jb-crumbs + .jb-sub-div + .jb-chips{flex:1} @media (max-width:1100px){ .jb-sub{top:68px;padding:0 10px 0 6px;gap:4px} /* Keyed to a class on the bar itself, not :has(.jb-back): the crumbs come first in the markup, so a partial first paint on mobile briefly showed the full breadcrumb */ .jb-sub-item .jb-crumbs{display:none} .jb-back{flex:1;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;font-size:15px;font-weight:500;color:var(--jb-text)} .jb-back i{color:var(--jb-cyan);font-size:16px} .jb-meta,.jb-all,.jb-sub-div,.jb-step span,.jb-hide-sm{display:none} .jb-step{border:0;width:44px;height:44px;justify-content:center;padding:0;font-size:18px} .jb-pager{border:0} .jb-pager a{width:44px;height:44px;font-size:18px} .jb-pager span{border:0;padding:0 2px;color:var(--jb-muted)} .jb-pager .jb-pager-off{width:44px;height:44px;padding:0;font-size:18px} .jb-theme{width:44px;height:44px;border:0;font-size:18px} .jb-crumbs{flex:none} .jb-chips{padding-left:4px} }