/* Webflexr base — ported verbatim from the design's shared (head-shared.html). Resets, keyframes (marquee + float) and CTA-form rules. Everything else is inline on the section markup, exactly as the source design ships it. */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:#212121;color:#F8F8F8;-webkit-font-smoothing:antialiased;overflow-x:hidden;} ::selection{background:#EA8932;color:#212121;} [data-cta-form] ::placeholder{color:rgba(255,255,255,0.72);opacity:1;} [data-cta-form] input,[data-cta-form] textarea,[data-cta-form] select{border-bottom-color:rgba(255,255,255,0.6)!important;} [data-cta-form] input:focus,[data-cta-form] textarea:focus,[data-cta-form] select:focus{border-bottom-color:#FFFFFF!important;} [data-cta-form] option{color:#212121;} @keyframes wfxMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes wfxFloatA{0%,100%{transform:translate(0,0) rotate(6deg);}50%{transform:translate(0,-22px) rotate(4deg);}} @keyframes wfxFloatB{0%,100%{transform:translate(0,0) rotate(-7deg);}50%{transform:translate(0,18px) rotate(-5deg);}} @keyframes wfxFloatC{0%,100%{transform:translate(0,0) rotate(3deg);}50%{transform:translate(0,-16px) rotate(6deg);}} @media (max-width:600px){ [data-hero-title]{font-size:19vw !important;} [data-hero-cta]{flex-direction:column;align-items:stretch !important;width:100%;max-width:440px;} [data-hero-cta] a{width:100%;justify-content:center;} } /* WordPress admin bar must not cover the fixed nav */ body.admin-bar [data-nav]{top:32px;} @media (max-width:782px){body.admin-bar [data-nav]{top:46px;}} /* Footer: 4 columns on desktop. !important overrides the controller's generic [data-reveal-stagger] = 3-column rule (inline, non-important) for the footer only. */ [data-footer-grid]{grid-template-columns:repeat(4,1fr)!important;} @media (max-width:980px){[data-footer-grid]{grid-template-columns:repeat(2,1fr)!important;}} @media (max-width:560px){[data-footer-grid]{grid-template-columns:1fr!important;}} /* Hide the mobile menu from first paint. The controller injects these same rules at runtime, but that's after the HTML renders — so without them in the stylesheet the panel flashes on load. The body.wfx-mobmenu class (toggled by the hamburger) opens it. */ [data-mobilemenu]{max-height:0;opacity:0;pointer-events:none;overflow:hidden;} body.wfx-mobmenu [data-mobilemenu]{max-height:75vh;opacity:1;pointer-events:auto;} /* Close icon hidden until the menu is open (avoids an X flash before JS). */ [data-hamicon-close]{display:none;} body.wfx-mobmenu [data-hamicon-open]{display:none;} body.wfx-mobmenu [data-hamicon-close]{display:block;} /* TEMP: hide the phone number in the desktop top bar and the CTA "or call" line. On mobile the new mobile bar's circular call button is used instead. */ [data-navtop],[data-cta-orcall]{display:none!important;} /* ---- Mobile slide-over drawer (Claude-app style) ---- The page (data-wfx) slides right to reveal the fixed drawer underneath. Transforming data-wfx also carries the fixed nav with it, so the whole UI slides as one. */ [data-wfx]{position:relative;z-index:2;background:#212121;transform-origin:left top;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-radius .4s cubic-bezier(.2,.8,.2,1);} body.wfx-drawer-open{overflow:hidden;} /* The page lifts off as a rounded "card on top" of the drawer: slides right, scales down a touch, rounds its corners, and casts a shadow + thin glass edge. */ body.wfx-drawer-open [data-wfx]{ /* !important: [data-wfx] carries an inline position:relative from the design markup that would otherwise win and stop the card from becoming a real viewport-fixed box. */ position:fixed !important; top:0; left:0; width:100%; height:100vh; height:100dvh; overflow:hidden; /* Freeze the card while the menu is open: no touch scroll or left/right swipe. Taps still fire (so tap-the-page-to-close keeps working) — touch-action only blocks gestures. */ touch-action:none; /* No scale: a scaled card shrinks below 100dvh and leaves its rounded bottom corner stranded mid-screen with a dark strip beneath. Full height keeps the corners pinned to the very top and bottom of the viewport. */ transform:translateX(min(79vw,330px)); border-radius:26px; /* Depth shadow + a glassy left edge: a crisp translucent rim and a soft inner sheen fading inward, so the edge facing the menu catches light like frosted glass. */ box-shadow:-30px 0 80px rgba(0,0,0,0.5),inset 2px 0 0 rgba(255,255,255,0.32),inset 26px 0 50px -28px rgba(255,255,255,0.16); } /* The nav bar is inside [data-wfx] and rides its scrollTop, so when open it would scroll off the top with the content. Counter it by the captured scroll offset so the bar (and its X) stays pinned to the top of the card at any scroll depth. */ body.wfx-drawer-open [data-nav]{transform:translateY(var(--wfx-scrolllock,0px));} /* Hamburger <-> X on the floating nav bar (which stays visible on the lifted card). */ [data-drawericon-close]{display:none;} body.wfx-drawer-open [data-drawericon-open]{display:none;} body.wfx-drawer-open [data-drawericon-close]{display:block;} /* The X sits over the page, which can be a light section — the toggle's faint translucent fill leaves the icon almost invisible there. Give it a solid dark chip for contrast. */ body.wfx-drawer-open [data-drawer-toggle]{background:rgba(28,28,30,0.9)!important;} /* De-emphasise the frozen page: a slight blur + dim, and make it non-interactive. A tap still closes (the document handler targets [data-wfx], which keeps pointer-events). The nav is excluded so the X and bar stay sharp. */ body.wfx-drawer-open [data-wfx] > *:not([data-nav]){filter:blur(2px) brightness(0.92);pointer-events:none;} /* Below 860px: swap the desktop navbar for the re-ordered mobile bar; above, no drawer. */ @media (min-width:860px){[data-mobilebar]{display:none!important;}[data-drawer]{display:none!important;}} @media (max-width:859px){[data-navbar]{display:none!important;}[data-mobilebar]{display:grid!important;}} /* Pill CTA links (the "ENQUIRE NOW" buttons in the word cloud + About) go full width on phones. The word-cloud button sits in a centered wrapper that shrink-wraps, so widen that too. */ @media (max-width:600px){ [data-cta-wrap]{width:100%;} [data-cta-link]{display:flex!important;width:100%;box-sizing:border-box;justify-content:center;} }