/* ═══════════════════════════════════════════════════════════════════════════ NEXPMX brand · 01 Color — the accent is blue. The reference ships indigo: --_color-theme---normal is #4f46e5 and the Webflow chrome defaults (buttons, focus rings, checked inputs, current-page links) are hard-coded to the same. Every one of those is inside nexpmx-shared.min.css, which we do not edit — so they are overridden here instead, once, at the top, before anything else can depend on them. The palette, for anyone reading this later: NEXPMX Blue #2C6BE0 primary, on light surfaces #3D7BF7 the same role on dark, lifted for contrast rgba(44,107,224,.08) tint for AI surfaces & selection Deep Ink #111118 Charcoal #1C1C24 Graphite #292932 Pure White #FFFFFF · Soft White #F8F8FA · Cool Gray #F0F0F4 And the rules that go with it: blue means action or AI and nothing else; the gradient is for the logo mark and AI avatars only; blue is never a page background; a status is a label plus a colour plus a glyph, never colour alone. Roughly 90% neutral, 8% structure, 2% blue in any one screen. ═════════════════════════════════════════════════════════════════════════ */ :root, .u-theme-normal, [data-wf--theme--variant] { --_color-theme---normal: #2C6BE0; } /* Webflow's own chrome, which never asked what the brand was. */ .w-button { background-color: #2C6BE0; } .w-input:focus, .w-select:focus { border-color: #2C6BE0; } .w-nav-link.w--current, .w-dropdown-link.w--current { color: #2C6BE0; } .w-checkbox-input--inputType-custom.w--redirected-checked { background-color: #2C6BE0; border-color: #2C6BE0; } .w-checkbox-input--inputType-custom.w--redirected-focus, .w-form-formradioinput--inputType-custom.w--redirected-focus { box-shadow: 0 0 3px 1px #2C6BE0; } .w-form-formradioinput--inputType-custom.w--redirected-checked { border-color: #2C6BE0; } .form_checkbox-icon.w--redirected-focus, .form_radio-icon.w--redirected-focus { box-shadow: 0 0 0.25rem 0 #2C6BE0; } .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div { outline-color: #6E9CF9; } /* ═══════════════════════════════════════════════════════════════════════════ Parity with the reference design. An earlier version of this file restyled the second half of the page — heavier shadows, larger radii, more padding, dimmed logos. That was a redesign, and it was not wanted: the site should match the reference. Everything cosmetic has been removed, and the page now inherits the reference's own styling untouched. What remains is the one thing the reference achieves with a library we do not ship. Its grid slider is Swiper, and without Swiper the markup is six slides in a flex row inside a wrapper with no overflow — five of them spill out of the page and both arrows do nothing. Scroll-snap gives the same paging natively, and keeps what a hijacked slider usually loses: trackpad and touch swipe, keyboard scrolling, and a real scroll position for assistive technology. The arrows are wired in SectionAnimations.tsx. ═════════════════════════════════════════════════════════════════════════ */ .grid-slider_wrap.grid-slider_wrap { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .grid-slider_wrap.grid-slider_wrap::-webkit-scrollbar { display: none; } .grid-slider_item.grid-slider_item { scroll-snap-align: start; flex: 0 0 auto; } .grid-slider_button.grid-slider_button { cursor: pointer; } .grid-slider_button.swiper-button-disabled { opacity: 0.32; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ Landing page corrections. Overrides rather than edits to the Webflow bundle. That file is a vendor artefact regenerated wholesale from the reference; anything changed inside it is lost the next time it is replaced, and silently. This sheet is linked after it, so these win on cascade order without !important. ═════════════════════════════════════════════════════════════════════════ */ /* The marquee carried 2rem of its own top margin on top of the hero's own bottom spacing, so the tilted card strip sat in a gap twice as wide as it was drawn with. */ .hero_marquee-wrap { margin-top: 0rem; } /* ═══════════════════════════════════════════════════════════════════════════ The greyscale, retuned to the home page's. The reference builds every secondary colour out of black at an opacity — #0009 for body copy, #0006 for captions, #0000001a for rules. Over white that is a true neutral grey, and the home page's redesigned sections do not use it: they use a slate that carries a little of the brand's blue, so text sits in the same family as everything around it rather than looking like ink soaked through the page. The result was two visual systems on one site. The home page reads warmer and more considered; every other page reads flatter, and nothing on either is obviously wrong, which is why it survived. Redefining the scale here rather than at each of the sixty-nine call sites, so a page added later inherits it. Each value is the same lightness as the alpha it replaces — this changes the temperature, not the contrast, and the text that passed WCAG before still does. ═════════════════════════════════════════════════════════════════════════ */ :root { --shade--80: #3F4152; /* was #000c — headings, strong body */ --shade--60: #6B6E80; /* was #0009 — body copy */ --shade--50: #7C8095; /* was #00000080 */ --shade--40: #9A9DAC; /* was #0006 — captions, meta */ --shade--30: #B4B7C4; /* was #0000004d */ --shade--10: #E8E9EF; /* was #0000001a — rules and hairlines */ /* Section rhythm, matched to the home page. The reference gives every section 7rem top and bottom, so two stacked sections put 14rem — 224px — of empty white between one thought and the next. The home page's redesigned sections use 6rem, and read denser for it. This is the same figure, applied to the pages that were not built with it. */ --_sizes---section-padding-large: 6rem; --_sizes---padding-section-medium: 5rem; } /* "Everything your business runs on. Connected." ───────────────────────────────────────────── The section sets white text over a wave that is a purple cone — dense at the apex, fading to the page's white at its edges. The heading is short enough to stay inside it. The paragraph beneath was not: at 1440px its second line sat on the pale lower edge, and by 900px both ends of the first line ran past the cone entirely and were white on white. The first attempt put a soft purple rectangle behind the copy. It fixed the contrast and looked exactly like what it was — a rectangle pasted over a cone, with its own visible edges. Wrong instinct: the problem was never that the background needed adding to, it was that the text was wider than the shape it had to sit on. So the measure is narrowed to fit inside the cone at every width, which is a better line length anyway, and the copy sits closer under the heading where the purple is dense. Nothing is layered over the artwork. */ .section.is-tabs .heading-wrap .paragraph-style-x { max-width: 30rem; margin-inline: auto; } .section.is-tabs .heading-wrap .paragraph-style-x p { color: #F4F3FE; text-wrap: balance; } /* Tucked under the heading rather than floated below it, so it stays in the dense part of the cone instead of drifting onto the fade. */ .section.is-tabs .heading-layout-slot > .paragraph-style-x { margin-top: -0.25rem; } /* ── The hero: headline, film, button, in that order ────────────────────── A stack, not an overlay. Nothing sits on top of anything else, which is the only arrangement where the headline is guaranteed legible and the picture is guaranteed unobstructed — every version that layered them traded one against the other. The film used to be full-bleed, and full-bleed is what made the hero too tall. Height is not a free variable on this element — the 16:9 ratio ties it to the width — so a band across the whole viewport is 810px of film alone at 1440px, and the button underneath it fell off the first screen. There are only two levers: crop the picture, or narrow the frame. Cropping is the wrong one for this particular film. It is not a centred subject on a background that can lose its edges: half of it is full-bleed screen recording, and both title cards sit hard against the frame — the opening "As your Business Grows" bottoms out at source y=1017 of 1080, the closing www.nexpmx.com at y=923. A centred cover-crop can take about eleven percent off the height before it starts slicing legible text, which is ninety-odd pixels; that is not worth what it costs. So the frame is capped and centred instead. Every pixel of the source is still on screen and it is still exactly 16:9 — the picture is smaller, not cropped, and there are no bars on any side. Below 960px the cap stops binding and the original full-bleed breakout returns on its own, which is why there is no media query here to keep in sync. ──────────────────────────────────────────────────────────────────────── */ .nx-film { /* Full-bleed, with the height capped — both were asked for by name, and on a 16:9 source they cannot both be free: the box goes wider than the picture's ratio, so cover-cropping sheds the top and bottom of the frame. 540px is the height the narrower cut established; below ~960px the cap no longer binds and this is plain full-bleed 16:9 again. */ width: 100vw; margin-inline: calc(50% - 50vw); height: min(56.25vw, 540px); overflow: hidden; background: #0B0B14; line-height: 0; } .nx-film__player { display: block; width: 100%; height: 100%; /* cover, and it now genuinely crops: once the height cap binds the box is wider than 16:9, so the frame loses its top and bottom bands rather than growing bars at the sides. The action sits mid-frame; the title cards hug the edges and are what the crop spends. */ object-fit: cover; object-position: center; } /* The headline is ink on the page again, under the header, over nothing. Set in capitals, with the two words that carry the promise picked out: the subject in brand blue, and the thing being offered reversed out of a blue block. Two emphases rather than three — "GIVE YOUR" and "A" stay ink, so the eye lands on BUSINESS and MEMORY and reads the sentence through them. */ .section.is-hero .heading-style-x h1 { color: #111118; white-space: nowrap; font-size: min(3.5rem, 6.4vw); line-height: 1.12; letter-spacing: -.03em; max-width: none; text-shadow: none; /* Sized to the line rather than to the slot it sits in. The slot is narrower than the headline at desktop widths, and a nowrap line inside a narrow box overflows it in both directions; max-content makes the box the line. Centred by transform rather than by auto margins. Auto margins only centre an element that fits its parent — once the line is wider than the slot they resolve to zero on the left and negative on the right, which pins the line to the slot's left edge and hangs the rest off the page. Capitals made the line 883px against a 642px slot at 1024px wide, and it ran fifty pixels past the viewport. Translating off its own centre works at any width. */ width: max-content; margin-inline: 0; position: relative; left: 50%; transform: translateX(-50%); } /* The subject, in the brand's own blue. */ .nx-hero-h1 .nx-hero-blue { color: #2C6BE0; } /* The promise, reversed out of a blue block. The block was pulled left by its own left padding so its letters kept the same optical left edge as the words around it. That is right for a block on its own line and wrong here: it swallowed the word space, and A sat hard against the blue with nothing between them. The space between the words is worth more than the alignment, so the negative margin is gone and the gap is set explicitly — the non-breaking space in the markup plus this. */ .nx-hero-h1 .nx-hero-mark { color: #fff; background: #2C6BE0; padding: .04em .18em .1em .14em; margin-left: .06em; border-radius: .1em; /* The block is a solid shape; the tight tracking that suits open type closes the reversed letters up against their own background. */ letter-spacing: -.012em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } @media (max-width: 900px) { .section.is-hero .heading-style-x h1 { font-size: min(2.25rem, 7.6vw); } } /* Capitals are wider than the sentence they replaced, and the reversed block adds its own padding on top — the line went from fitting a 390px column to wanting 473px inside 422px, hanging 18px off one edge and 33 off the other. It wraps instead of shrinking. Two lines of 32px capitals reads as a headline; one line small enough to fit twenty-seven of them does not, and by 320px that is 18px type. The natural break falls after BUSINESS, which keeps the two emphasised words on their own lines rather than splitting the phrase between them. */ @media (max-width: 640px) { .section.is-hero .heading-style-x h1 { white-space: normal; width: auto; max-width: 100%; } } /* ── The hero, after the eyebrow and the sub-copy came out ──────────────── It was built for four stacked things — badge, headline, paragraph, button — on a flat 32px rhythm. With two of them gone that rhythm is wrong in both directions: the headline starts level with the bottom of the fixed header, and the button sits closer to the headline than the headline does to anything else, so the pair reads as one crowded lump rather than a statement and the thing you do about it. Two items want more air between them than four did, and the whole block wants to start lower now that it is shorter. */ /* .main-wrapper .section in nx-pages.css is (0,2,0) and sets the shorthand, which resets padding-top. A bare .section.is-hero ties with it and loses on nothing more than which file the browser got to last, so this matches its context and wins outright. The padding is written as "header plus a gap" rather than as one number, because that is what it is for. The bar is 72px at every width — measured, not assumed — so a flat 8.5rem left only 64px of air on desktop and 32px on a phone, and 32px under a fixed header reads as touching it. Stating the header height once means the clearance is the part you can see and change, and it stays right if the bar ever changes height. */ :root { --nx-header-h: 72px; } .main-wrapper .section.is-hero { padding-top: calc(var(--nx-header-h) + 5rem); padding-bottom: 3.5rem; } .section.is-hero .heading-layout { row-gap: 2.75rem; } /* The only thing you can do from the hero was a 117 by 42 pixel button. That is the vendored .button at its default — 2.5rem tall, 14px text — which is the right size everywhere else that class is used and the wrong one here, where it is the third and last element of a section that is now a headline, a film and one action. At that size it read as a footnote rather than as the point. Scoped to the hero for exactly that reason: the pricing and footer buttons are still one of many things on their screen and should stay as they are. height is the lever, not padding: the vendor sets an explicit height, which makes vertical padding on this element inert. line-height has to be restated for the same kind of reason — the inherited value is a computed 22.4px, 140% already resolved against the 16px body, so it does not follow the larger font-size and would hold the text box at the height it always had. .section.is-hero .button is (0,3,0) against the vendor's single-class rules and beats them outright; the :where() in .button:where(.w-variant-…) adds nothing to theirs. No !important and no doubled class is needed, and unlike the rest of this page the reference ships no .button rule in its in-body