/* ============================================================ shisu — shared site nav (one source of truth, every page) Injected by shisu-nav.js as

. Self-contained (no external tokens) so it renders identically on any page. Solid white by default; transparent over a dark hero when the page sets (home), going solid on scroll. ============================================================ */ /* ── global design tokens (this file loads on every page) ── */ /* The signature faint warm cream — one source of truth, inherited site-wide. */ :root{--soft:#faf8f4;} /* hide any page's own/old nav so only the shared one shows */ nav:not(#shisu-nav){display:none !important;} #shisu-nav{position:fixed;top:0;left:0;right:0;z-index:60; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased;letter-spacing:-.012em; transition:background .25s ease,border-color .25s ease;} #shisu-nav .snav-inner{max-width:1240px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;} #shisu-nav .snav-left{display:flex;align-items:center;gap:36px;} #shisu-nav .snav-links{display:flex;align-items:center;gap:24px;} #shisu-nav .snav-right{display:flex;align-items:center;gap:18px;} .snav-brand{font-size:20px;font-weight:700;line-height:1;letter-spacing:-.04em;text-decoration:none;color:#a2a7ae;position:relative;top:-1px;transition:color .25s ease;} .snav-link{font-size:14.5px;font-weight:500;text-decoration:none;color:#15161a;cursor:pointer;display:inline-flex;align-items:center;transition:color .15s ease;} /* all links black at rest; hovering the link group dims the rest to grey, the hovered one stays black */ .snav-links:hover .snav-link{color:#8a8d94;} .snav-links:hover .snav-link:hover{color:#15161a;} .snav-link:hover{color:#15161a;} /* Login sits outside the link group → always black on the solid nav, never dims */ .snav-login{color:#15161a;} #shisu-nav .snav-book{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#fff;background:#141519;border:1px solid #141519;border-radius:100px;padding:11px 19px;text-decoration:none;transition:color .25s ease,background .25s ease,border-color .25s ease;} /* solid state (default for inner pages, and on-scroll for the home hero) */ #shisu-nav.snav-solid{background:#fff;border-bottom:1px solid #ececec;} /* transparent state — over a dark hero (home) */ #shisu-nav.snav-transparent{background:transparent;border-bottom:1px solid transparent;} #shisu-nav.snav-transparent .snav-brand{color:#fff;} #shisu-nav.snav-transparent .snav-link{color:rgba(255,255,255,.82);} #shisu-nav.snav-transparent .snav-links:hover .snav-link{color:rgba(255,255,255,.5);} #shisu-nav.snav-transparent .snav-link:hover, #shisu-nav.snav-transparent .snav-links:hover .snav-link:hover, #shisu-nav.snav-transparent .snav-link.is-active{color:#fff;} #shisu-nav.snav-transparent .snav-book{color:#141519;background:#fff;border-color:rgba(255,255,255,.72);} /* transparent page, once scrolled → revert to solid look */ #shisu-nav.snav-transparent.snav-solid{background:#fff;border-bottom:1px solid #ececec;} #shisu-nav.snav-transparent.snav-solid .snav-brand{color:#a2a7ae;} #shisu-nav.snav-transparent.snav-solid .snav-link{color:#15161a;} #shisu-nav.snav-transparent.snav-solid .snav-link.is-active{color:#15161a;} #shisu-nav.snav-transparent.snav-solid .snav-links:hover .snav-link{color:#8a8d94;} #shisu-nav.snav-transparent.snav-solid .snav-link:hover, #shisu-nav.snav-transparent.snav-solid .snav-links:hover .snav-link:hover{color:#15161a;} #shisu-nav.snav-transparent.snav-solid .snav-book{color:#fff;background:#141519;border-color:#141519;} /* Solutions mega-menu */ .snav-solutions{position:static;display:flex;align-items:center;} .snav-menu{position:fixed;left:0;right:0;top:57px;background:#fff;border-top:1px solid #f0ece4;border-bottom:1px solid #ececec;box-shadow:0 30px 60px -34px rgba(20,22,30,.28);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease;z-index:55;pointer-events:none;} .snav-menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} .snav-menu-inner{max-width:1240px;margin:0 auto;padding:42px 40px 46px;} .snav-cols{display:flex;gap:90px;} .snav-group h4{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a79d8e;} .snav-items{display:flex;flex-direction:column;} .snav-items-2col{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:72px;} .snav-menu a{font-size:17px;font-weight:600;letter-spacing:-.012em;color:#15161a;text-decoration:none;padding:9px 0;display:block;width:max-content;transition:color .12s ease;} .snav-menu a:hover{color:#9a9389;} /* Resources dropdown */ .snav-resources{position:static;display:flex;align-items:center;} .snav-resources-menu{position:fixed;left:0;right:0;top:57px;background:#fff;border-top:1px solid #f0ece4;border-bottom:1px solid #ececec;box-shadow:0 30px 60px -34px rgba(20,22,30,.28);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease;z-index:55;pointer-events:none;} .snav-resources-menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} .snav-resources-inner{max-width:1240px;margin:0 auto;padding:42px 40px 46px;} .snav-res-cols{display:flex;gap:90px;} .snav-res-group h4{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a79d8e;} .snav-resources-menu a{font-size:17px;font-weight:600;letter-spacing:-.012em;color:#15161a;text-decoration:none;padding:9px 0;display:block;width:max-content;transition:color .12s ease;} .snav-resources-menu a:hover{color:#9a9389;} /* ============================================================ Mobile — Square-style hamburger + full-screen menu Hidden on desktop; the burger lives in .snav-right and the overlay (.snav-mobile) is appended to by shisu-nav.js. ============================================================ */ .snav-burger{display:none;flex-direction:column;justify-content:center;gap:5px; width:36px;height:36px;padding:0;margin:0;background:none;border:0;cursor:pointer;} .snav-burger span{display:block;height:2.5px;width:26px;margin-left:auto;border-radius:2px; background:#15161a;transition:background .25s ease;} .snav-mobile{display:none;position:fixed;inset:0;z-index:200;background:#fff; opacity:0;visibility:hidden;transition:opacity .22s ease;overflow-y:auto;-webkit-overflow-scrolling:touch; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased;letter-spacing:-.012em;} .snav-mobile.open{opacity:1;visibility:visible;} body.snav-locked{overflow:hidden;} .snav-mobile-top{display:flex;align-items:center;justify-content:flex-end;padding:18px 22px;} .snav-close{position:relative;width:36px;height:36px;background:none;border:0;cursor:pointer;padding:0;} .snav-close::before,.snav-close::after{content:"";position:absolute;left:6px;top:17px;width:24px;height:2.5px;border-radius:2px;background:#15161a;} .snav-close::before{transform:rotate(45deg);} .snav-close::after{transform:rotate(-45deg);} .snav-mobile-body{padding:8px 30px 48px;} .snav-m-primary{display:flex;flex-direction:column;} .snav-m-link{font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#15161a;text-decoration:none;padding:15px 0;display:block;} .snav-m-acc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#15161a; background:none;border:0;padding:15px 0;margin:0;cursor:pointer;text-align:left;font-family:inherit;} .snav-m-acc-head .chev{flex:none;width:13px;height:13px;border-right:2.5px solid #15161a;border-bottom:2.5px solid #15161a;transform:rotate(45deg);transition:transform .2s ease;position:relative;top:-3px;} .snav-m-acc.open .snav-m-acc-head .chev{transform:rotate(-135deg);top:2px;} .snav-m-acc-body{display:none;padding:2px 0 14px;} .snav-m-acc.open .snav-m-acc-body{display:block;} .snav-m-sub-h{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a79d8e;margin:16px 0 2px;} .snav-m-sub{font-size:18px;font-weight:500;letter-spacing:-.012em;color:#15161a;text-decoration:none;padding:9px 0;display:block;} .snav-m-sec{margin-top:24px;padding-top:24px;border-top:1px solid #ececec;display:flex;flex-direction:column;} .snav-m-sec a{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:500;color:#15161a;text-decoration:none;padding:11px 0;} .snav-m-sec svg{width:23px;height:23px;flex:none;} .snav-m-cta{display:block;margin-top:26px;text-align:center;font-size:16.5px;font-weight:600;color:#fff;background:#141519;border-radius:100px;padding:16px;text-decoration:none;} @media(max-width:980px){ #shisu-nav .snav-inner{padding-left:22px;padding-right:22px;} #shisu-nav .snav-links{display:none;} /* top bar collapses to brand + burger only (Square-style) */ #shisu-nav .snav-right .snav-login, #shisu-nav .snav-right .snav-book{display:none;} .snav-burger{display:inline-flex;} .snav-mobile{display:block;} /* white burger over a dark hero, dark once scrolled / on solid pages */ #shisu-nav.snav-transparent:not(.snav-solid) .snav-burger span{background:#fff;} }