/* Citely — mobile navigation. * * Both app shells (pinterest.css for the modules, dashboard.css) hid the * sidebar outright below ~900px with nothing in its place, so on a phone * there was no way to reach any module. This file turns that sidebar into a * slide-in drawer instead of deleting it. Loaded AFTER those stylesheets so * its equal-specificity rules win; also used by the marketing header. */ /* ---------- stop sideways scrolling on phones ---------- * style.css only puts overflow-x:hidden on . Browsers propagate the * ROOT element's overflow to the viewport, so with html left `visible` the * body rule does not reliably clip and the page scrolls sideways — which is * what exposed the hero's orbit graphic (a 590px ring plus badges orbiting * at 295px from centre, both far wider than a 390px phone). */ html{overflow-x:hidden} /* ---------- shared toggle button ---------- */ .nav-toggle{display:none;flex:none;align-items:center;justify-content:center;width:38px;height:38px; border-radius:11px;border:1px solid var(--line2,rgba(255,255,255,.14));background:rgba(255,255,255,.05); color:var(--paper,#F2F1FA);cursor:pointer;padding:0;transition:.16s} .nav-toggle:hover{background:rgba(255,255,255,.1)} .nav-toggle i{position:relative;display:block;width:16px;height:1.5px;border-radius:2px;background:currentColor;transition:.22s} .nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;border-radius:2px;background:currentColor;transition:.22s} .nav-toggle i::before{top:-5px} .nav-toggle i::after{top:5px} .nav-toggle.on i{background:transparent} .nav-toggle.on i::before{top:0;transform:rotate(45deg)} .nav-toggle.on i::after{top:0;transform:rotate(-45deg)} .nav-backdrop{position:fixed;inset:0;z-index:190;background:rgba(6,5,18,.66);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s} .nav-backdrop.show{opacity:1;visibility:visible} @media(max-width:900px){ /* The sidebar becomes an off-canvas drawer rather than display:none. */ .citely-app .sidebar{display:flex;transform:translateX(-100%);width:min(84vw,290px);z-index:200; box-shadow:none;transition:transform .28s cubic-bezier(.2,.7,.2,1)} .citely-app .sidebar.nav-open{transform:none;box-shadow:22px 0 60px rgba(0,0,0,.6)} .citely-app .main{margin-left:0} .nav-toggle{display:inline-flex} /* The topbar must stay ONE row. It previously carried flex-wrap:wrap, which let the action button drop to a second line and pushed the bar to 114px tall at 390px wide. The crumb flexes and truncates instead. */ .citely-app .topbar{gap:10px;padding-left:16px;padding-right:16px;flex-wrap:nowrap} .citely-app .topbar .sp{display:none} /* spacer fights the flexing crumb */ .citely-app .topbar > .btn, .citely-app .topbar > button, .citely-app .topbar > a{flex:none} /* Show only the current view, not "store / module / view" — the full trail is 244px wide on a phone and truncating it from the right hides the one part that matters. The store name is in the drawer. */ .citely-app .crumb{flex:1 1 auto;min-width:0;font-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .citely-app .crumb b{font-size:13px;font-weight:600;color:var(--paper)} /* finger-sized tap targets — the sub-items were only 31px tall */ .citely-app .sidebar .nitem{padding-top:12px;padding-bottom:12px} .citely-app .sb-sub .subitem{padding-top:13px;padding-bottom:13px} /* dashboard.css zeroes the sidebar width variable at this breakpoint */ :root{--sbw:0px} } /* Dashboard topbar extras eat the whole width on a phone. */ @media(max-width:760px){ .citely-app .topbar .searchbar{display:none} .citely-app .wrap{padding-left:16px;padding-right:16px} .citely-app .pk-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .citely-app .pk-tabs::-webkit-scrollbar{display:none} .citely-app .pk-tab{white-space:nowrap} .citely-app .statbar{grid-template-columns:1fr 1fr} .citely-app .mhead{gap:14px} .citely-app .mhead h1{font-size:18px} } @media(max-width:480px){ .citely-app .statbar{grid-template-columns:1fr} } /* The dropdown-only "Log in" entry — hidden wherever the real button shows. */ nav.citely-nav .nav-links .nav-login{display:none} /* ---------- marketing header (style.css hides .nav-links below 920px) ---------- */ @media(max-width:920px){ nav.citely-nav .nav-toggle{display:inline-flex;order:3;margin-left:4px} nav.citely-nav .nav-links{position:fixed;top:68px;left:0;right:0;display:flex;flex-direction:column;gap:0; background:rgba(11,10,26,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line,rgba(255,255,255,.09)); padding:8px 0;transform:translateY(-12px);opacity:0;visibility:hidden;transition:.22s;z-index:59} nav.citely-nav .nav-links.nav-open{transform:none;opacity:1;visibility:visible} nav.citely-nav .nav-links a{padding:13px 28px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.05)} nav.citely-nav .nav-links a:last-child{border-bottom:none} } /* The marketing header itself, on a phone. Measured at 538px before this: the logo alone was 321px wide and wrapped to two lines inside the 68px bar. Dropping the brand's tail takes it to 92px on one line. */ @media(max-width:620px){ .nav-in{padding:0 16px;gap:10px} nav.citely-nav .logo{font-size:15px;white-space:nowrap;flex:none} nav.citely-nav .logo .brand-rest{display:none} nav.citely-nav .logo .dot{width:26px;height:26px;font-size:13px;border-radius:8px} nav.citely-nav .nav-cta{gap:7px;flex:none} nav.citely-nav .nav-cta .btn{padding:9px 13px;font-size:12.5px;border-radius:9px} /* The Log in button gives way to the Scan CTA here — it reappears as the last entry inside the dropdown so signing in is still one tap away. */ nav.citely-nav .nav-cta .btn:not(.glow){display:none} nav.citely-nav .nav-links .nav-login{display:block;color:var(--cyan);font-weight:600} } /* Below this the "Scan my store" label alone is wider than the space left. */ @media(max-width:380px){ nav.citely-nav .nav-cta .btn.glow{padding:9px 11px;font-size:12px} } /* ---------- hero orbit: make it FIT rather than rely on clipping ---------- * The rings are fixed pixel sizes (r3 is 590px) and the badges orbit at 295px * from centre, so on a phone they sit well outside the viewport. Clipping them * would just hide half the graphic, so scale the whole scene down instead — * .answer is a sibling of .scene, so it keeps its own size and stays legible. */ @media(max-width:620px){ /* On desktop the answer card is absolutely positioned over the orbit's bottom-right corner. At phone width that card is nearly as wide as the whole scene, so it covered the animation completely. Take it out of the overlay and let the two STACK: orbit first, answer card beneath it. .scene becomes position:relative so it occupies real flow space — its children still centre on it, and the 300px box exactly contains the outermost ring once scaled (590 x .5 = 295). */ .scene-wrap{height:auto;perspective:900px} .scene{position:relative;inset:auto;height:330px;transform:scale(.58);transform-origin:50% 50%} .scene-wrap::after{display:none} /* The core sphere IS the "globe" — enlarging it makes the whole graphic read bigger without pushing the orbiting badges off-screen, since they sit at a fixed 295px radius set in the @keyframes. */ .core{width:186px;height:186px} .core .lab{font-size:13px} .core .sub{font-size:10.5px} .answer{position:static;right:auto;bottom:auto;width:auto;max-width:100%;margin:6px auto 0;animation:none} .hero{padding-top:92px} .hero-in{padding-left:18px;padding-right:18px} .live{gap:20px;margin-top:26px} } /* The badges orbit at a fixed 295px radius, so the largest usable scale is bounded by (viewport/2) >= 361 * scale. These step down to stay inside it. */ @media(max-width:480px){ .scene{height:315px;transform:scale(.53)} } @media(max-width:420px){ .scene{height:305px;transform:scale(.5)} } /* 360px-class phones: 361 * .5 = 180 would exactly reach the edge, so the outermost badges would graze it. Step down once more. */ @media(max-width:370px){ .scene{height:290px;transform:scale(.46)} .core{width:176px;height:176px} }