/* ============================================================ Alocity site — mobile responsive overrides Injected into every exported page. Uses !important to beat the design-tool's inline styles. Desktop (>=769px) untouched. ============================================================ */ /* --- Homepage hero (ALL widths) ------------------------------------- Remove the secondary "Watch Product Tour" button (the only anchor to #aimee on the page) from the hero. The remaining "Book a Demo" button sits in a justify-content:center flex row, so it re-centers under the hero copy automatically once its sibling is gone. */ a[href="#aimee"] { display: none !important; } /* --- Series A announcement banner (ALL widths) ---------------------- A pinned amber bar above the sticky header, injected + maintained by mobile-nav.js (ensureBanner). It is fixed to the top; the sticky header and page content are offset downward by its measured height, exposed as --alocity-banner-h. Defaults to 0 so layout is correct before JS runs and after the banner is dismissed. */ :root { --alocity-banner-h: 0px; } #alocity-banner { position: sticky; /* in-flow: takes its own space (no gap) and stays pinned while scrolling */ top: 0; left: 0; right: 0; z-index: 1000; /* below the mobile drawer's huge z-index, above the header (60) */ display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 44px; box-sizing: border-box; background: #f9ae08; color: #1a2033; text-align: center; } #alocity-banner .alocity-banner-link { color: #1a2033; font: 600 13px/1.35 var(--font-figtree, system-ui, sans-serif); text-decoration: none; max-width: 80rem; } #alocity-banner .alocity-banner-link { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; } #alocity-banner .alocity-banner-link:hover .alocity-banner-caption { text-decoration: underline; } #alocity-banner .alocity-banner-pill { display: inline-flex; align-items: center; flex-shrink: 0; padding: 2px 12px; border-radius: 999px; background: #1a2033; color: #ffffff; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; } #alocity-banner .alocity-banner-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #1a2033; cursor: pointer; border-radius: 6px; } #alocity-banner .alocity-banner-close:hover { background: rgba(0, 0, 0, 0.12); } #alocity-banner .alocity-banner-close svg { width: 18px; height: 18px; } /* The banner is in-flow (sticky), so no body offset is needed. The header still needs its sticky `top` moved down by the banner height so that, once scrolled, it pins directly beneath the pinned banner instead of overlapping it. */ header { top: var(--alocity-banner-h) !important; } @media (min-width: 600px) { #alocity-banner .alocity-banner-link { font-size: 14px; } } /* --- Anti-FOUC cloak ------------------------------------------------- The client bundler paints the page in its raw layout first, then mobile-nav.js applies the JS-driven layout fixes (hero sizing, bullet grids, comparison table, nav) — which is visible as a split-second reflow "artifact" on load. We hide the body until mobile-nav.js has rendered a stable, fixed layout, then fade it in. SAFETY: this is a default cloak (no JS needed to hide) but it carries a pure-CSS keyframe auto-reveal after 1.2s, so if mobile-nav.js fails to load or errors, the page can NEVER get stuck blank — it will always reveal itself. On the normal path mobile-nav.js adds `.alocity-revealed` to much sooner and fades the content in. Applies at all widths. */ html:not(.alocity-revealed) body { opacity: 0; animation: alocity-cloak-failsafe 0.01s linear 1200ms forwards; } @keyframes alocity-cloak-failsafe { to { opacity: 1; } } html.alocity-revealed body { opacity: 1; transition: opacity 0.22s ease-out; } /* ------------------------------------------------------------------ Footer bottom bar — center the legal links + copyright at ALL widths (desktop and mobile). The design tool exports this bar as a left-aligned flex row (links) with the copyright pushed to the far side. We stack them centered instead. Placed outside the mobile media query so it applies cross-device. Targets the light footer's last row (legal links div + copyright span) by structure since the markup ships without class hooks. */ footer[style*="gray-25"] > div > div:last-child { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } footer[style*="gray-25"] > div > div:last-child > div { justify-content: center !important; width: 100% !important; } /* The copyright ships with inline `margin-left:auto`, which absorbs the left free space and pins it to the right even inside the centered column above. Reset all auto margins so it centers with the links. */ footer[style*="gray-25"] > div > div:last-child > * { margin-left: 0 !important; margin-right: 0 !important; } @media (max-width: 767.98px) { html, body { overflow-x: hidden !important; max-width: 100vw !important; } /* --- Footer tap targets (QA P3-11): footer links ship 16-17px tall, well under the 32px floor QA measured against (44px is the full guideline). inline-block + block padding grows each link's hit box to ~35px without touching desktop (this block is mobile-only). Scoped to the footer, where QA found nearly all the small targets, so dense body copy is unaffected. The badge/social image links are excluded — their images already set the hit box and padding would misalign them. --- */ footer a:not(:has(img)) { display: inline-block; padding-block: 9px; } /* --- Header logo: left-align below the breakpoint (QA P2-7 / P1-6). The page's own header row is justify-content:center, which pushed the centered logo rightward into the absolutely-positioned Contact Us CTA (right:70px) — under ~430px they overlapped. The logo anchor is the only in-flow visible child of the row (nav + desktop cluster are display:none, CTA + burger are absolute), so an auto right margin absorbs all free space to its right and pins it flush left, matching the desktop layout. :first-child keeps this off any other header link to "/". --- */ header a[href="/"]:first-child { margin-right: auto !important; } /* --- Industries carousel: hide the prev/next arrow controls on mobile. The arrows live in a bare flex
holding the two round buttons (button.scp1); on a touch phone they only create an awkward empty band above the cards, since the track is already swipeable. Desktop keeps them (this rule is inside the mobile media query). --- */ div:has(> button.scp1) { display: none !important; } /* --- Industries carousel: right-edge fade to signal "more to swipe". With the arrows gone, the peeking next card is the cue; this gradient over the right edge reinforces that there's more content. It sits on the section (which is position:relative + overflow:hidden) fading the card edge into the section background, and is pointer-events:none so it never blocks touch scrolling. --- */ #industries { position: relative; } #industries::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; background: linear-gradient(to right, rgba(248, 250, 252, 0), var(--gray-25)); pointer-events: none; z-index: 2; } /* --- "Works with what you already own" diagram: cloud hub (mobile). JS (styleCloudHub) tags the central amber hub box, hides its wordmark + "Cloud" label, and injects . Here we reshape the amber box into a cloud silhouette via an SVG mask (keeping its amber gradient), give it a soft amber shadow, and crop the injected full logo down to just the white Alocity chevron. Desktop is untouched (this lives inside the mobile media query). --- */ [data-alocity-cloud-hub] { -webkit-mask: url("/site/cloud-mask.svg") no-repeat center / 100% 100%; mask: url("/site/cloud-mask.svg") no-repeat center / 100% 100%; border: 0 !important; border-radius: 0 !important; width: 150px !important; min-width: 150px !important; height: 99px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; filter: drop-shadow(0 9px 14px rgba(249, 174, 8, 0.30)); } /* White chevron: crop the full logo (700x177) to the chevron's pixel box (x:9-240, y:8-156) scaled ~0.39, and force it white. Fixed dimensions override the global fluid-media img rule. */ [data-alocity-cloud-mark] { display: block; overflow: hidden; width: 90px; height: 58px; /* Center the chevron on the CLOUD, not on its own box. The mask silhouette is asymmetric inside its 200x132 viewBox (it spans x 14-196, y 6-116), so plain flex centering left the mark reading high and left. Offset measured, not guessed: the chevron's real ink was rasterised and swept across the silhouette to find the placement with equal gold on all four sides. At (3px, -2px) the clearances are top 12 / bottom 11.5 / left 18.5 / right 18 with no ink clipped by the mask. (The filled-area centroid, 106.6/70.2, is NOT the right target -- the wide flat base drags it down and the mark ends up sitting on the cloud's bottom edge.) Transform rather than margin so the crop box below is untouched, and px offsets still scale with the parent diagram's `zoom`. */ transform: translate(3px, -2px); } [data-alocity-cloud-mark] img { width: 272px !important; height: 69px !important; max-width: none !important; margin: -3px 0 0 -4px !important; filter: brightness(0) invert(1); } /* --- Sticky header: on mobile show ONLY a centered logo + the hamburger. The bundled header row ships as: [ logo |