/* * App-level CSS overrides for the Webflow export running as a Next.js app. * Loaded after the Webflow stylesheets, so rules here win. Put further overrides * in this file rather than editing the exported CSS, which the asset sync * overwrites on every re-export. * * The previous export hid the page shell by default (`.page-wrapper-new * { display:none }`) as the initial state of a Webflow IX2 page-load reveal, and * needed an override here to stay visible. This export builds its pages from * custom-code embeds and ships no IX2 interactions at all, so the shell is * visible on its own and that workaround is no longer needed. * * Nothing else is currently overridden. */ /* Footer social icons: wrapped in .soc-row so more platforms can be added later as plain sibling .soc links, with no markup/CSS rework needed. */ .foot .soc-row{display:flex;align-items:center;gap:10px;margin-top:22px} .foot .soc-row .soc{margin-top:0} /* Theme toggle icons use fill:none, stroke-only paths. Their default SVG pointer-events only count the stroked outline as "painted", so clicks landing in the unfilled interior of the moon/sun icon (e.g. the bottom-right of the circle) miss the icon and don't reliably bubble to the button. Forcing the icons out of hit-testing makes the full 40px button clickable. */ .theme-tog svg{pointer-events:none} /* border-radius:50% only clips what's painted, not the clickable area, so the square corners outside the visible circle were still clickable. clip-path clips hit-testing too, confining the click target to the circle itself. */ .theme-tog{clip-path:circle(50%)} /* ===== Card clickability: make the affordance match the behaviour ===== These three cards lift and take a violet border on hover, the same signal the site's real buttons give, but the card itself had no href and no handler: only the small link at the bottom did anything. A visitor reads the hover as "this whole thing is clickable", clicks the card, and nothing happens. Each of the seven cards contains exactly one link, so stretch that link's hit area over the whole card. Done with an overlay on the real anchor rather than a click handler on the div: the anchor stays the only interactive element, so keyboard focus, the accessible name, middle-click, and "copy link address" all keep working, which a div-with-onclick would silently break. .su-ch is already positioned; the other two need a containing block for the overlay to resolve against. Nothing inside these cards is interactive, and the decorative .bg-accent is already pointer-events:none, so the overlay covers nothing it would steal clicks from. */ .su-cc,.ct-office{position:relative} .su-ch a::after,.su-cc a::after,.ct-office a::after{content:"";position:absolute;inset:0;border-radius:inherit} /* Keep the pointer consistent with the new hit area. */ .su-ch,.su-cc,.ct-office{cursor:pointer} /* Contact form status line: the success message, and the validation and error messages, which share this class. The Webflow base sheet carries a bare `p{color:var(--white)}`, so any paragraph with no colour of its own renders white. Every paragraph in the export has a class that sets one, so it never shows there, but this paragraph is ours and had none. Result: white text on the light theme's near-white .ct-form surface (#f7f8fb), invisible, while dark mode looked correct. var(--text) is the theme-aware token, resolving to slate-800 on light and #fff on dark, so it reads properly in both. */ .ct-form-status{color:var(--text)} /* --------------------------------------------------------------------------- Navbar-to-hero spacing: one standard site-wide, taken from the service pages (.sa-hero). Gap from the navbar's bottom edge to the top of the hero copy: desktop 109px | tablet 80px | mobile 59px. It is built from .sec's own padding token plus the wrap margin the service pages already use, so there are no per-page numbers to drift: .sec padding-top: clamp(60px, 9vw, 110px) -> 110 / 81 / 60 hero > .wrap margin-top: 80px -> +80 navbar height -> -81 ------------ 109 / 80 / 59 Two separate defects are corrected. 1) Heroes with a viewport-relative min-height also centre their copy, so short copy leaves slack and the gap grows with the window HEIGHT. It is not a value anyone set: api-sentry measured 109px in a 900px-tall window and 380px in a 1440px one. industries-retail, vital-sense, managed-it-application-services and asset-configuration-management all measured a correct-looking 109px on a 1000px screen yet drifted to 254-330px on a tall one. Top-aligning the copy pins the gap without touching hero height, so nothing below the hero reflows. 2) Some heroes replaced .sec's padding token with a hardcoded value (140px on the legal pages, 150px on the case-study pages, 180px on support) and omit the 80px wrap margin. Those came in tight enough that on a 390px screen the copy started underneath the fixed navbar (negative gap). !important is required: every hero class is defined in a page-local