s, so `> a` keeps this scoped to the navbar. * * 5. Submenu flyouts. Framer renders Experts/Resources as position:fixed * portals at the end of with runtime inline top/left/width, sized * to their content -- 210px and 240px inside a 329px-wide menu -- and * anchored so they overlap the rows beneath them and collide with the * Start Working CTA (Experts ends at y=318, the CTA starts at y=316). * * Stretching them to the menu's own gutters is pure CSS. The menu card is * left:20/right:20 with 5px/16px of horizontal padding at EVERY phone * width, so 25 and 36 line the panel up with the nav rows exactly, with no * width-dependent maths. !important because top/left/width arrive as * inline style from Framer's positioner. * * The portal root carries no data-framer-name of its own, so it is * identified by a named descendant. If a submenu is added in Framer, add * a selector for one of its items here -- nav.js finds panels * structurally and needs no such edit. * * Vertical placement (and pushing the rows below out of the way) cannot be * done in CSS: the panel is a body-level portal, so no selector reaches * from it back to the menu. That part lives in nav.js. */ @media (max-width: 809.98px) { [data-framer-name="Phone"] > a > span:first-child, [data-framer-name="Phone open"] > a > span:first-child { display: none; } /* The row is padded 5px left / 16px right, so a left-aligned logo would sit * 5px in while the hamburger sits 16px from the other edge. Nudge the logo * -- not the row, whose padding would drag the hamburger inwards with it. * The logo is the only child holding an .svgContainer (a stable Framer * class, not a hash); the hamburger's children are plain divs. */ [data-framer-name="Phone"] > a > div:has(> .svgContainer), [data-framer-name="Phone open"] > a > div:has(> .svgContainer) { margin-left: 11px; } /* The logo+hamburger share one that Framer stretches across * nearly the whole header (~329px). Taps in the gap — and often on/near the * burger — hit that home link as the event target and soft-nav to /. Kill * hit-testing on the anchor chrome; only the logo mark and the toggle box * receive pointer events. (JS still preventDefaults toggle taps so the * burger cannot activate the parent link.) */ [data-framer-name="Phone"] > a[href], [data-framer-name="Phone open"] > a[href], [data-framer-name="Phone"] > a[data-verita-home-stripped], [data-framer-name="Phone open"] > a[data-verita-home-stripped], [data-framer-name="Phone"] > a[data-verita-phone-home-split], [data-framer-name="Phone open"] > a[data-verita-phone-home-split] { pointer-events: none; } [data-framer-name="Phone"] > a > div:has(> .svgContainer), [data-framer-name="Phone open"] > a > div:has(> .svgContainer), [data-framer-name="Phone"] > a > div:not(:has(.svgContainer)), [data-framer-name="Phone open"] > a > div:not(:has(.svgContainer)) { pointer-events: auto; } div:has(> div > div > [data-framer-name="Jobs"]), div:has(> div > div > [data-framer-name="For Companies"]) { left: 25px !important; right: 36px !important; width: auto !important; } div:has(> div > div > [data-framer-name="Jobs"]) > div > div, div:has(> div > div > [data-framer-name="For Companies"]) > div > div { width: 100% !important; } } /* ---- Phone navbar scrim (<= 809.98px) --------------------------------- * * * 6. Backdrop for the open menu. The navbar is a `position: fixed` card with * no in-flow parent, so it has nothing to push down and nothing to grow * out of the way of -- it simply floats on top of whatever section of the * page happens to be underneath, clipping that section's content mid-word. * Rather than fight the layout, dim the page behind it so the clipped * content reads as "behind the menu" instead of "broken". * * z-index 9 is deliberate: the rest of the page tops out at 8, the navbar * itself is 10, and its submenu portal is 11, so the scrim sits in the one * gap that puts it under both the closed and open card (and under the * flyout) while still covering everything else. * * `pointer-events: none` keeps the scrim purely visual -- it must not * swallow taps or change how the menu closes, since nav.js already owns * that behaviour. * * The pseudo-element is always present at `opacity: 0` rather than being * created only on open, so toggling `opacity` has something to transition * from; inserting/removing the element itself would just snap. */ @media (max-width: 809.98px) { body::before { content: ""; position: fixed; inset: 0; z-index: 9; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } body:has([data-framer-name="Phone open"])::before { opacity: 1; } [data-framer-name="Phone open"] { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32) !important; } } /* ---- Phone menu close button (<= 809.98px) ---------------------------- * * * 7. Close-icon cross. Framer's own closed state for the 40x33 close box is * wrong in two independent ways: its two 40x6 bars sit at top: 12.9844px * and top: 14px -- 1.0156px apart, and neither is on the box's 16.5px * centre line, so the arms don't cross at a single point and the whole * cross reads off-centre; and they're rotated +30deg / -30deg, only 60 * degrees apart rather than 90, so instead of an X you get a squat * 37.6x25.2 cross. Fixing both: centre each bar on the box (top: 50% with * transform-origin: 50% 50%, so translateY(-50%) does the centring instead * of a hard-coded -3px -- that keeps it correct if the bar height ever * changes) and rotate to +/-45deg, which gives each bar an identical * 32.53x32.53 bounding box and fits inside the 33px-tall box. The box is * 40x33 with 40x6 bars at every phone width (checked at 320 and 390), so * none of this needs width-dependent maths. * * The close box is a direct div child of [data-framer-name="Phone open"]'s * ; the anchor's other div child is the logo, identified (as in * section 4) by being the only one containing .svgContainer -- so * `> div:not(:has(.svgContainer))` reaches the close box without touching * a framer-xxxxxxx class hash, same reasoning as the rest of this file. * Scoped to "Phone open" only, so the closed-state hamburger (the same * two bars, unrotated, under [data-framer-name="Phone"]) is untouched. * * !important is required on transform because Framer Motion writes it * inline; top isn't inline here but carries !important anyway for * consistency with the rest of this rule. Known trade-off: because * transform is pinned with !important, Framer's hamburger-to-X morph * animation no longer plays -- the arms mount already crossed, while the * menu card itself still animates in normally. */ @media (max-width: 809.98px) { [data-framer-name="Phone open"] > a > div:not(:has(.svgContainer)) > div { top: 50% !important; bottom: auto !important; transform-origin: 50% 50% !important; } [data-framer-name="Phone open"] > a > div:not(:has(.svgContainer)) > div:first-child { transform: translateY(-50%) rotate(45deg) !important; } [data-framer-name="Phone open"] > a > div:not(:has(.svgContainer)) > div:last-child { transform: translateY(-50%) rotate(-45deg) !important; } }