/* Corner Kits nav — shared by the order portal (cornerkits-live.html) and Kit Studio (kit-studio/index.html). Owner, 2026-10-19: "I really like the nav styling in Framer, would like the order portal to use that" / "kit studio needs the navigation". A port of the Framer CornerKitsNav component: a solid black bar with no blur (owner, 2026-10-23: "remove the transparency and blur from the nav"; it used to be transparent with a backdrop blur, the owner's earlier standing rule), Archivo Expanded 800 uppercase labels; hovering anywhere over the links focuses the nearest one while the others dim and blur, and one lime underline glides between them, resting under the current page. Off-black chat chip, lime button. Below 1100px the links fold into a menu button and a dark panel. Behaviour lives in ck-nav.js. Everything is scoped to .cknav. */ :root{--navH:96px} @media (max-width:1099px){:root{--navH:64px}} .cknav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:0;height:var(--navH);padding:20px 32px;box-sizing:border-box; background:#000;color:#fff;-webkit-user-select:none;user-select:none; font-family:'Archivo','Google Sans',system-ui,sans-serif} .cknav *{box-sizing:border-box} .cknav .brand{display:flex;align-items:center;gap:0;flex:none;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .cknav .brand svg{display:block;height:45px;width:auto;overflow:visible} .cknav .brand svg *{transform-box:fill-box} .cknav .brand .ck-hop{transform-origin:50% 50%} .cknav .brand:hover .ck-hop{animation:ckHop 340ms cubic-bezier(.16,1,.3,1)} @keyframes ckHop{0%{transform:translateY(-16px)}100%{transform:none}} .cknav .nav-menu{margin-left:auto;display:flex;align-items:stretch;align-self:stretch} .cknav nav.tabs{position:relative;display:flex;align-items:stretch;gap:32px;padding:0 8px;margin:0;background:transparent;border:0} .cknav nav.tabs > a,.cknav nav.tabs > button{position:relative;z-index:1;display:inline-flex;align-items:center;padding:0 2px;margin:0;background:none;border:0; cursor:pointer;text-decoration:none;font-family:'Archivo','Google Sans',sans-serif;font-weight:800;font-stretch:125%;font-size:11px;line-height:1; letter-spacing:-0.01em;text-transform:uppercase;color:#fff;-webkit-tap-highlight-color:transparent;outline:none} /* white (owner, 2026-10-23; was grey) */ .cknav nav.tabs > * > span{display:inline-block;white-space:nowrap;padding:6px 0; transition:color .25s ease,opacity .32s cubic-bezier(.22,1,.36,1),filter .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1)} .cknav nav.tabs > .active > span{color:#fff} .cknav nav.tabs.hot > * > span{color:#fff;opacity:.35;filter:blur(1.5px);transform:scale(.97)} .cknav nav.tabs.hot > .is-hot > span{color:#fff;opacity:1;filter:none;transform:none} .cknav nav.tabs > :focus-visible > span{color:#fff} .cknav nav.tabs > .active::after{display:none} .cknav .navlens{position:absolute;left:0;top:0;height:2px;width:0;border-radius:2px;background:#A8EC00;opacity:0;pointer-events:none;z-index:0; transition:transform .34s cubic-bezier(.22,1,.36,1),width .34s cubic-bezier(.22,1,.36,1),opacity .16s ease-out} .cknav .nav-actions{display:flex;align-items:center;gap:8px;margin-left:20px;flex:none} .cknav .navchat{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#151515;color:#8a8f86;text-decoration:none; transition:filter .15s,color .15s,transform .15s;-webkit-tap-highlight-color:transparent} .cknav .navchat:hover{filter:brightness(1.6);color:#fff} .cknav .navchat:active{transform:scale(.98)} .cknav .navchat svg{display:block} /* the social icons in the bar need ~1150px: on narrower desktops they sit in the footer only (the menu panel, below 1100px, has them again) */ /* Five links on every page since 2026-10-30 (Kit Studio and Pricing added): below 1280 px the social icons move to the menu and footer only, and the links sit closer, so they clear the logo. */ @media (min-width:1100px) and (max-width:1279px){.cknav .nav-actions .navsoc{display:none}.cknav nav.tabs{gap:20px}} @media (min-width:1100px) and (max-width:1179px){.cknav .nav-actions .navchat{display:none}} /* and the WhatsApp icon (it's in the footer and help) */ /* the footers' social icons (filled by ck-nav.js into [data-ck-socials]): the nav chat button's look */ .ck-socials{display:flex;gap:8px;align-items:center} .ck-soc{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#151515;color:#8a8f86;text-decoration:none;transition:filter .15s,color .15s,transform .15s;-webkit-tap-highlight-color:transparent} .ck-soc:hover{filter:brightness(1.6);color:#fff} .ck-soc:active{transform:scale(.98)} .ck-soc svg{display:block} /* the site footer (owner, 2026-10-23: "a real footer across the entire site", after a reference, without its glows). ck-nav.js fills every