/** * Oyolloo Elements — frontend styles * * Only the things Elementor's controls cannot express. Everything achievable * through the editor is left in the editor so the client can change it. * * Selectors target Elementor element IDs, which are fixed by the template data * (oyohdr / oyoftr prefixes), so they survive edits to template settings. * * Several comments below give the row range a band's background was cut from — * "rows [435, 512] of backdrop-a.png" and the like. Those source plates are not * shipped with the plugin, because nothing serves them; they live beside the * Figma renders in the project's audit folder, `_project-audit/audit/design-src/`. * design/ here holds only what a page actually requests. * * @package OyollooElements * @since 1.0.0 */ /* The design's type is Arial MT Pro, which cannot be served: the licensed file carries fsType 0x0004 (Monotype, "Preview & Print embedding only"), so web embedding is not granted. Arimo is metric-compatible and openly licensed (SIL OFL), so it takes its place without moving a single glyph. It arrives from Google Fonts, enqueued by the Elementor kit, whose four global typography groups now name it directly. */ :root { --oyo-bg: #000204; --oyo-surface: #12151f; --oyo-surface-alt: #11172b; --oyo-text: #ffffff; --oyo-text-muted: #a3a3a3; --oyo-hairline: rgba(255, 255, 255, 0.1); --oyo-blue: #1ca8f8; --oyo-violet: #696bff; /* The page bands take their gutter from Elementor, which rewrites it per breakpoint. This is for the markup that is ours rather than Elementor's, so it has to carry the same three steps itself. */ --oyo-gutter: 100px; /* Figma's canvas is 1600 wide and every band is padded 100px, so the design's content column is exactly 1400. */ --oyo-content: 1400px; } @media (max-width: 1024px) { :root { --oyo-gutter: 40px; } } @media (max-width: 767px) { :root { --oyo-gutter: 20px; } } /* ------------------------------------------------------- Content column Past 1600px the column has to stay 1400 rather than grow with the viewport, or the whole composition — line breaks, card proportions, the gap rhythm — stops matching Figma. The surplus goes into the gutter instead. Elementor derives a container's horizontal padding from `--padding-left` / `--padding-right`, which it rewrites per breakpoint. Folding those into max() keeps whatever the editor set for the current breakpoint and only adds the overflow, so the responsive gutters need no duplicate here. Top-level containers only: `> .e-con` under a document root. Nested containers keep their own padding untouched. ------------------------------------------------------- */ .elementor > .e-con { --padding-inline-start: max(var(--padding-left), (100% - var(--oyo-content)) / 2); --padding-inline-end: max(var(--padding-right), (100% - var(--oyo-content)) / 2); } /* A band whose artwork has to reach the viewport edge opts out here and takes the gutter inside its own widget instead, so the picture is full width while the words stay in the 1400 column. `oyo-ihero` does the same thing further down; this is the class version, for the widgets that carry a whole band. */ .elementor > .e-con.oyo-bleed { --padding-inline-start: 0px; --padding-inline-end: 0px; } /* ------------------------------------------------------- Page shell hello-elementor's reset.css also sets `body { background }`. It has equal specificity and loads after this file, so it would win on order alone — `html body` settles it without depending on enqueue order or !important. ------------------------------------------------------- */ html body { background-color: var(--oyo-bg); } /* hello-elementor underlines every link in its reset, which reaches Elementor's button widget because that renders an . A pill with an underline through it is not a button in any design, here or elsewhere. */ .elementor .elementor-button { text-decoration: none; } /* ------------------------------------------------------- Header — sticky translucent bar Figma: padding 16px 100px 0, backdrop-filter blur(10px). Elementor has no backdrop-filter control, so it lives here. ------------------------------------------------------- */ /* The header floats over the page rather than sitting above it: in the design (node 314:10) the nav and the hero share one 418px Earth plate, with the nav on top of the image. The location wrapper is targeted rather than the container itself because Elementor sets `position: relative` on containers with a selector this file cannot outrank. Every page's first section therefore carries enough top padding to clear the header. STICKY ON EVERY WIDTH — client, 02 Oct 2026. This was `absolute`, so above 1024 the bar scrolled away with the hero it is drawn on and only the drawer breakpoint pinned it (the S2 note further down). The client scrolled the desktop site and found no bar. Figma is static and cannot settle this either way, so it is a decision, not a measurement: the bar stays. `fixed` is the only line that changes. Both values are out of flow, so nothing reflows and the first section's top padding still does its job. The S2 block below now restates what it inherits; it is left there because it carries why the drawer breakpoint needed this first. */ .elementor-location-header { position: fixed; top: 0; right: 0; left: 0; z-index: 100; } /* A fixed bar hides whatever an in-page link jumps to, so the scroll port keeps a header's worth of padding. scroll-padding on the scroller covers every anchor at once — #contact from "Book a demo", #content from the skip link — where a scroll-margin per target would have to be kept in step with each new id. Measured on the live site, tallest page per width: 122 above 1240 (careers and company; home, tech and products are 116), 90.02 from 1025 to 1240 and at the tablet tier, 82.05 below 768. Rounded up to clear the taller pages with 2px to spare. */ html { scroll-padding-top: 124px; } @media screen and (max-width: 1240px) { html { scroll-padding-top: 92px; } } @media screen and (max-width: 767px) { html { scroll-padding-top: 84px; } } .admin-bar .elementor-location-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } } .elementor-element-oyohdr1 { z-index: 100; } /* The blur lives on a pseudo-element, not on the header itself. backdrop-filter (like transform and filter) makes an element the containing block for its position:fixed descendants — with it on the header, the mobile drawer resolved against the header box instead of the viewport and came out 144px tall. OFF AT THE TOP OF THE PAGE, ON ONCE SCROLLED — client, 02 Oct 2026. Figma does declare it: the header component #570:2977 carries BACKGROUND_BLUR radius 20. But that frame's fills are empty, and Figma paints no background blur through a frame with no fill, so the design renders crisp. CSS backdrop-filter has no such rule — it filters the backdrop whether or not the element is painted — so the bar was blurring a 116px band of the hero at rest, and its hard bottom edge drew a line across the full width. On Recruitment and Tech, where the earth's bright limb sits right on that edge, detail below the line measured 20x and 16x what was left above it. That band is what the client boxed. So: no blur while the page is at the top, which is the state every screenshot and every capture shows, and the blur back once the bar has something other than its own hero underneath. The threshold is the bar's own height, read from the element in nav-menu.js so it follows the breakpoints rather than hard-coding 116. The resting rule names no backdrop-filter at all, rather than blur(0), so at rest there is provably no backdrop root and no compositing to round colours differently. opacity carries the fade, because none -> blur(10px) is not an interpolable pair. */ .elementor-element-oyohdr1::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; } /* The transition is declared here and not on the resting rule on purpose, so it runs one way. A transition is taken from the state being moved TO: with it on the resting rule the blur would fade in and then, on the way back up, try to fade out while backdrop-filter — which has no interpolable pair with none — had already been dropped in the first frame, so the blur vanished and an invisible box faded after it. Declared here it fades in and cuts out, and the cut lands on the frame the filter leaves anyway. */ .elementor-element-oyohdr1.oyo-scrolled::before { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); /* A scrim, not just the blur. Blurring a bright picture leaves a bright picture. Measured off the pinned bar on live, worst non-ink pixel behind a label, blur on and no scrim: industry cards, white cloud rgb(230,239,243) 1.46:1 careers photo, white facade rgb(227,224,227) 1.30:1 recruitment band rgb(174,173,176) 1.31:1 #C7C6CA at 20px regular is 4.5:1 text under WCAG 2.2, not 3:1, so those labels were gone. Composited over the brightest of them this alpha measures 9.01:1 (0.70 would already clear it at 5.35; the margin is there because brighter art may yet be added). Over the darkest sky the site has, rgb(6,6,9), it resolves to rgb(1,3,5) — so it darkens the bar without drawing a visible band across the hero. Figma has no scrolled state to copy, so the colour is taken from the site's own language: the footer plate is rgba(0,0,0,0.9) and the contact card is #000204. */ background-color: rgba(0, 2, 4, 0.85); opacity: 1; transition: opacity 240ms ease; } @media screen and (prefers-reduced-motion: reduce) { .elementor-element-oyohdr1.oyo-scrolled::before { transition: none; } } /* ------------------------------------------------------- Between the burger and the full desktop bar Figma draws this header at 1600 and at 440 and nothing in between. At 1600 the five nav items measure 650.73 wide (Figma 655 — the 4.27 is the Arimo substitution, 2.21 of it in "Book A Demo"), and the desktop tier asks for a 333px logo inside 100px padding with a 24px minimum gap. That is 1007.73 of content, so it stops fitting below a 1207.73 viewport, and the bar wrapped onto two lines from 1025 up to 1207 — the band where the burger has not taken over yet. It wrapped before this round too; the new labels are 9px narrower and still did not clear it. Rather than invent a third set of numbers for a width the design never drew, this hands the band the tier that is already defined one step down: the 40px padding and 226.5px logo Elementor writes for <=1024. At 1025 that needs 901.23 of 945, so it holds across the whole band, and 1240 leaves 32px of slack above the 1207.73 the desktop tier needs. Four classes, because Elementor's per-document sheet is printed after this file and wins every tie at three. ------------------------------------------------------- */ @media screen and (min-width: 1025px) and (max-width: 1240px) { .elementor .elementor-element.elementor-element-oyohdr1.e-con { --padding-left: 40px; --padding-right: 40px; } .elementor .elementor-element.elementor-element-oyohdrlogo.elementor-widget img { width: 226.5px; } } /* ------------------------------------------------------- Mobile / tablet menu — bar toggle and slide-in drawer Figma: the header band #374:1788 and the Menu frame #409:7, both drawn 440 wide. The toggle's fill, border width, radius and colour are the widget's own Toggle Button controls. What it has no control for is the box's size and the glyph, which are here. Figma draws the box 32x32 with a 1px OUTSIDE stroke, so the box as rendered is 34x34 — measured on the frame render, where the border lands on columns 387 and 420 and rows 29 and 62, not on 388/419. A border-box 34 carrying Elementor's 1px border reproduces that, and the -1px right margin puts the stroke's outer edge where Figma puts it, 1px past the 20px gutter. (Elementor's own margin on the toggle is `0 auto`, which in this space-between row would split the free space and pull the toggle off the right edge, so it is restated here.) Markup relied on (verified in the DOM): .elementor-menu-toggle gets .elementor-active .elementor-menu-toggle + nav.elementor-nav-menu--dropdown The three bars are drawn with two pseudo-elements — the middle bar is a box-shadow on ::before — so no extra markup is needed and the a11y attributes stay untouched. --oyo-burger keeps the bars off `color`, which the border reads too: open, Figma turns the X white (#409:43) and leaves the box's stroke grey. ------------------------------------------------------- */ @media screen and (max-width: 1024px) { /* --- toggle ------------------------------------------------ */ .elementor .elementor-element.elementor-element-oyohdrnav div.elementor-menu-toggle { --oyo-burger: currentColor; position: relative; z-index: 1000; box-sizing: border-box; width: 34px; height: 34px; padding: 0; margin: 0 -1px 0 auto; } /* Elementor's own open/close glyphs. */ .elementor-element-oyohdrnav .elementor-menu-toggle i, .elementor-element-oyohdrnav .elementor-menu-toggle svg { display: none; } /* #374:1866-68 are three 16px lines at weight 1.5 with round caps, 7px apart. A round cap adds half the weight beyond each end, so the drawn bar is 17.5 long with a 0.75 radius. The pseudo-elements resolve against the padding box, which the 1px border already insets, so 50%/50% is the design's centre at (404, 46). */ .elementor-element-oyohdrnav .elementor-menu-toggle::before, .elementor-element-oyohdrnav .elementor-menu-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 17.5px; height: 1.5px; margin-left: -8.75px; margin-top: -0.75px; border-radius: 0.75px; background: var(--oyo-burger); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s linear, width 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* Top bar, plus the middle bar as a shadow 7px below it. */ .elementor-element-oyohdrnav .elementor-menu-toggle::before { transform: translateY(-7px); box-shadow: 0 7px 0 var(--oyo-burger); } .elementor-element-oyohdrnav .elementor-menu-toggle::after { transform: translateY(7px); } /* Open: middle bar drops out, the outer two cross. #409:42's X is 12x12, so each stroke is that square's diagonal, 12√2. */ /* The box keeps its grey stroke while the X goes white, and it has to be pinned: clicking leaves the button focused, and the widget's Toggle hover/focus colour would otherwise repaint the border along with the glyph. That rule is (0,5,1) — the same weight as the obvious selector here — so this one carries the widget's own .elementor-widget as a sixth class to outrank it rather than tie and lose on order. */ .elementor .elementor-element.elementor-element-oyohdrnav.elementor-widget div.elementor-menu-toggle.elementor-active { --oyo-burger: #ffffff; color: #cccccc; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active::before, .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active::after { width: 16.9706px; margin-left: -8.4853px; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active::before { transform: rotate(45deg); box-shadow: 0 0 0 transparent; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active::after { transform: rotate(-45deg); } /* --- drawer ------------------------------------------------ */ .elementor-element-oyohdrnav .elementor-menu-toggle + .elementor-nav-menu--dropdown { position: fixed; top: 0; right: 0; bottom: auto; left: auto; z-index: 999; width: min(320px, 82vw); /* top + bottom + an implied height over-constrains the box: the browser resolved a 890px height anchored to the bottom and left a sliver uncovered at the top. An explicit height is unambiguous. dvh tracks mobile browser chrome; vh is the fallback for engines without it. */ height: 100vh; height: 100dvh; /* Elementor spaces the dropdown off the toggle with a margin; on a fixed panel that just pushes it 10px down the screen. */ margin: 0; padding: 104px 28px 40px; overflow-y: auto; /* #409:7's fill. The widget's Dropdown section styles the items' background but has no control for the panel's own, and Elementor's base sheet paints it #fff, so this has to be here. */ background-color: #000104; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-left: 1px solid rgba(158, 159, 255, 0.25); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6); /* Neutralise Elementor's max-height animation and drive the motion from transform instead. */ max-height: none !important; display: block !important; visibility: hidden; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.38s; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown { visibility: visible; transform: translateX(0); } /* Elementor paints dropdown items on a light surface with a grey active pill. Reset all four states onto the dark panel. `border: 0` matters twice over: Elementor's own dropdown rule carries `border-inline-start: 8px solid transparent`, which would hold the labels 8px in from the panel's padding, and it draws a divider under every item but the last. #409:45 spaces its five labels with a 32px gap and no rule between them. The vertical padding is the widget's own control (16px), so the items land on the design's 64px pitch. */ .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item, .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item:hover, .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item:focus, .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active, .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item.highlighted { background-color: transparent; border: 0; color: #c7c6ca; } .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active { color: #c7c6ca; } .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item:hover, .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item:focus { color: #1ca8f8; } /* Items fan in behind the panel once it has started moving. */ .elementor-element-oyohdrnav .elementor-nav-menu--dropdown li { opacity: 0; transform: translateX(18px); transition: opacity 0.3s ease, transform 0.3s ease; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li { opacity: 1; transform: none; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(1) { transition-delay: 0.12s; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(2) { transition-delay: 0.17s; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(3) { transition-delay: 0.22s; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(4) { transition-delay: 0.27s; } .elementor-element-oyohdrnav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(5) { transition-delay: 0.32s; } } /* ------------------------------------------------------- The drawer at the width it was drawn #409:7 is a full-width panel, not a right-hand sheet: 440 wide from y=0, filled #000104 under the home hero's starfield plate. That plate is not stretched — the fill's imageTransform windows source columns 0.302..0.642 and rows -0.854..0.747, so the window opens above the image and only the part from source row 0 down shows, landing flush with the panel's bottom across 46.666% of its height. The slice is design/home/menu-plate-e66e94.webp; rebuilt from the transform it reads 0.27/255 against Figma's own render of the frame, worst pixel 10.7. 74px of top padding puts the first label's text at y=90, where #409:46 sits: the widget's Vertical Padding control gives each item 16 above and below its 32px line, so the five labels land on the design's 64px pitch — 90, 154, 218, 282, 346 — and #409:45's own 288px height falls out of it. The logo and the toggle are lifted over the panel and the band's top padding goes 16 -> 30, which is exactly the difference between the header's logo (#374:1789 at y=16) and the drawer's (#409:24 at y=30). One logo that moves, rather than a second copy of it inside the panel. 768-1024 keeps the narrower right-hand sheet: the design file says nothing about a tablet drawer, and a full-screen panel there would be a change with nothing behind it. ------------------------------------------------------- */ @media screen and (max-width: 767px) { .elementor-element-oyohdrnav .elementor-menu-toggle + .elementor-nav-menu--dropdown { left: 0; right: 0; width: auto; /* #449:2910 is 440 x 654, but an artboard height is not a viewport: on a real 800-tall phone a 654 panel leaves the page showing underneath. WebDeveloperArif's call, 22 Sep — the panel covers the screen and the plate hangs off the bottom instead. dvh tracks mobile browser chrome; vh is the fallback for engines without it. The logo stays at y16 and belongs to the header, which draws over this panel. #449:2922 puts the nav at y92 — but that 92 is where the design's 32-tall *text row* begins, and our carries its own 16px of padding above its text. Setting padding-top to 92 put every label 18px low against the frame (ink at 120 where the export has it at 102). The panel's padding is therefore 92 less the 's own lead-in, which is the 74 it always was. */ height: 100vh; height: 100dvh; padding: 74px 20px 40px; border-left: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; /* #460:3200 is 440 x 573. With the panel now the height of the screen it is anchored to the foot rather than the head, so the earth sits on the bottom edge and the flat #000104 fills whatever is left above it. */ background-image: url(../../design/plates/plate-drawer.webp); background-repeat: no-repeat; background-position: center bottom; background-size: 100% 573px; } .elementor-element-oyohdrnav .elementor-nav-menu--dropdown a.elementor-item { text-align: left; } /* The 18/09 drawer dropped its logo to y30 on open, so the header grew to match. #449:2910 puts it back at y16 — the same place the closed header has it — so the header must not move at all now. */ .elementor-element-oyohdrlogo { position: relative; z-index: 1000; } } /* Someone who asked for less motion gets the drawer without the slide, and without the staggered items. */ @media screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) { .elementor-element-oyohdrnav .elementor-menu-toggle::before, .elementor-element-oyohdrnav .elementor-menu-toggle::after, .elementor-element-oyohdrnav .elementor-menu-toggle + .elementor-nav-menu--dropdown, .elementor-element-oyohdrnav .elementor-nav-menu--dropdown li { transition: none; } .elementor-element-oyohdrnav .elementor-nav-menu--dropdown li { opacity: 1; transform: none; } } /* ------------------------------------------------------- Footer — rounded top, violet wash, gradient hairline Figma node 314:286: fills are a violet gradient (rgba(158,159,255,.05) -> transparent) layered over rgba(0,0,0,.9); stroke is a 2px violet gradient; radius is 32px 32px 0 0. The base colour and the radius are set on the Elementor container so the client can edit them — and because Elementor's generated selector (.elementor-31 .elementor-element.elementor-element-x) outranks anything reasonable this file can write. Only the two layered gradients live here, both inheriting the radius so they follow whatever Elementor sets. ------------------------------------------------------- */ /* Figma pairs the last band with the footer inside an auto-layout column whose `gap` is -23px, so the footer's 32px top corners ride over the band above rather than sitting below it. That pairing is per page, not global. Home's #314:219, products' #314:890 and tech's #314:1353 each hold a band *and* the footer, so the overlap applies. The company page's #314:457 holds the footer alone — a lone child has no gap to collapse — and its Industries band keeps its full foot. Pulling the footer up there buried the last 5px of that band's corner-bracket frame, which sits only 18px above the band's bottom edge. So the overlap belongs to the three bands that own it. Set through Elementor's own --margin-bottom, which it reads into margin-block-end. */ .elementor .elementor-element.elementor-element-oyocfsec, .elementor .elementor-element.oyo-band, .elementor .elementor-element.elementor-element-oycrctasec { --margin-bottom: -23px; } /* The mobile frames deepen that overlap on the three pages whose closing band is the CTA: #392:6081, #392:6080 and #392:6079 all pair it with the footer at gap -30. Home keeps -23 — #374:3336 pairs the contact form with the footer, and that column still reads -23 on the 440 frame. */ @media (max-width: 767px) { .elementor .elementor-element.oyo-band, .elementor .elementor-element.elementor-element-oycrctasec { --margin-bottom: -30px; } } .elementor-element-oyoftr1 { position: relative; isolation: isolate; } /* The 2px gradient stroke. A gradient border needs the mask trick; Elementor only offers solid borders. */ .elementor-element-oyoftr1::before { content: ""; position: absolute; inset: 0; z-index: 0; padding: 2px; border-radius: inherit; background: linear-gradient( 180deg, rgba(158, 159, 255, 0.4) 0%, rgba(158, 159, 255, 0) 92% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* The violet wash sitting on top of the base colour. */ .elementor-element-oyoftr1::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient( 180deg, rgba(158, 159, 255, 0.05) 0%, rgba(158, 159, 255, 0) 100% ); pointer-events: none; } /* Keep footer content above both pseudo-elements. */ .elementor-element-oyoftr1 > * { position: relative; z-index: 1; } /* ------------------------------------------------------- Footer link lists Figma renders these as bulleted lists (node 314:304 / 314:309, listSpacing 20). Elementor's nav-menu has no list-marker control, so the bullet is drawn here. ------------------------------------------------------- */ /* The bullet goes on the li, never on .elementor-item::before — that pseudo-element is Elementor's menu pointer (absolutely positioned, painted with the pointer colour), so content put there renders as a blue bar instead of a bullet. Scoped to --main so the hidden dropdown copy of the same menu is not decorated as well. */ .elementor-element-oyoftrnav1 .elementor-nav-menu--main > ul > li, .elementor-element-oyoftrnav2 .elementor-nav-menu--main > ul > li { display: flex; align-items: center; gap: 0; } /* PUT BACK ON CLIENT INSTRUCTION, 30 Sep 2026 — annotation 4 of "stupot68 changes.pdf" boxes the Menu column and asks for it to match, and the render inside that box is bulleted. They came out on 17 Sep and they go back in now; the note that removed them said "say the word and the indent comes back on its own", and this is that word. Nothing here is guessed. The 30/09 PDF is vector, so it was rendered at 8x and 12x and the marks measured directly. Three Quick-links rows agree to a hundredth, and they agree with what was measured off Figma back in September: diameter 4.00px (Sep: "a 4px mark") ink from list box + 9.97 (Sep: 713.019 against an origin of 703) ink to list box + 13.88 centre list box + 11.93 — which a 24px box centres at 12.00 text origin list box + 24.00 centre y cap-height centre + 0.12, i.e. 0.06 off the line-box centre, so align-items:center on the li is right to within a tenth colour rgb(163,163,163), sampled off the render — the list text's own colour, so currentColor carries the #FFFFFF hover with it Figma's side of it is a text-node property, not a drawn shape: 449:300 and 449:305 carry lineTypes UNORDERED with indent 1 and listSpacing 20, and the mobile frames 449:2058 / 449:2063 carry the same, so this is not breakpointed. The bullet goes on the li, never on .elementor-item::before — that pseudo-element is Elementor's menu pointer (absolutely positioned, painted with the pointer colour), so content put there renders as a blue bar instead of a bullet. Scoped to --main so the hidden dropdown copy is not decorated. Drawn as a box rather than set as "\2022" so the mark is exactly 4.00px on any font stack: Arimo is a substitute for Arial MT Pro, and its bullet glyph is not a measurement we control. */ .elementor-element-oyoftrnav1 .elementor-nav-menu--main > ul > li::before, .elementor-element-oyoftrnav2 .elementor-nav-menu--main > ul > li::before { content: ""; /* 10 + 4 + 10 = the 24px track, with the mark's ink landing at 10..14 and the text starting at 24. The radius is 50% of a 4x4 box, so it is a circle rather than an ellipse of some wider track. */ flex: 0 0 4px; width: 4px; height: 4px; margin-left: 10px; margin-right: 10px; border-radius: 50%; /* Stated, not currentColor. The #A3A3A3 is set by the widget on a.elementor-item; the li only inherits the container's near-black, which painted the mark rgb(43,43,44) on a rgb(6,6,9) background - there, but invisible. Figma gives the mark the list text's own colour, sampled off the 30/09 render at rgb(163,163,163). It does not follow the link hover: Figma draws no hover for it, and the mark lives on the li, outside the anchor the hover belongs to. */ background-color: #a3a3a3; } /* ------------------------------------------------------- Footer nav menus Elementor's nav-menu is built for horizontal bars; in a vertical footer column the inherited centring and item padding fight the design. ------------------------------------------------------- */ .elementor-element-oyoftrnav1 .elementor-nav-menu--main .elementor-item, .elementor-element-oyoftrnav2 .elementor-nav-menu--main .elementor-item { padding-left: 0; padding-right: 0; justify-content: flex-start; } /* ------------------------------------------------------- Footer social marks Each mark is Figma's own SVG uploaded as a custom icon, and each carries that node's frame as its viewBox: facebook 26 (314:339 draws a 10 x 19 glyph inside it), X 19 (314:343), Instagram 19 (314:346), LinkedIn 21 (314:353). Elementor's widget has one Size control, so all four render at 18 and only X and Instagram are right. Size the SVG, not the anchor: the widget derives both the 44px ring and the row's line box from the anchor's font-size, so raising that grew the bottom bar from 93 to 97. The glyphs are already correct inside their square viewBoxes, so the box is all that has to change. Targeted by repeater item because a custom SVG leaves the network suffix of .elementor-social-icon- empty. ------------------------------------------------------- */ .elementor .elementor-widget.elementor-element-oyoftrsocial a.elementor-repeater-item-oyos1 svg { width: 26px; height: 26px; } .elementor .elementor-widget.elementor-element-oyoftrsocial a.elementor-repeater-item-oyos4 svg { width: 21px; height: 21px; } /* The rings and their grid items are inline-block, so the row box reserves a baseline descender under them and the bottom bar came out 97 against Figma's 93. Aligning the items to the top removes the gap without changing the 44px ring. */ .elementor .elementor-widget.elementor-element-oyoftrsocial .elementor-grid-item { vertical-align: top; } /* ------------------------------------------------------- Footer contact rows Figma 314:313 / 314:322 / 314:328 are horizontal frames with gap 20 between a 24.32px icon and its label, so the label box opens 44.32px right of the icon box. Elementor puts the indent on the icon's padding-right but leaves the span wider than the glyph, which pushed the label to 50.39. The .elementor-widget on the selector is deliberate: the per-document sheet is enqueued during render and beats this file at equal specificity. ------------------------------------------------------- */ .elementor .elementor-widget.elementor-element-oyoftricons .elementor-icon-list-icon { box-sizing: border-box; width: 44.32px; padding-right: 20px; } .elementor .elementor-widget.elementor-element-oyoftricons .elementor-icon-list-icon svg { /* flex-basis, not width: the span is a flex container and the SVG is a replaced flex item, so an author width still leaves it free to resolve against its intrinsic ratio - it was landing at 18.23. */ flex: 0 0 24.32px; width: 24.32px; height: 24.32px; } /* ------------------------------------------------------- Responsive Padding, direction and type scale live on the Elementor widgets' own responsive controls so the client can edit them. Only the gradient-border radius is repeated here, because ::before inherits it and the border is CSS-only. ------------------------------------------------------- */ /* Nothing here — the footer's mobile radius is an Elementor responsive control, and both pseudo-elements inherit it. */ /* ========================================================================== Home — Product Feature Section (Figma #314:44) Only what Elementor has no control for: backdrop-filter, a three-layer background, `flex: 1 1 0` sizing, and the two overflow-cropped images. Every selector is scoped under `.elementor` (0-3-0 / 0-3-1) on purpose. Elementor's base rules `.e-con.e-flex { flex: var(--flex-*) }` and `.elementor img { height: auto; max-width: 100%; border-radius: 0 }` sit at 0-2-0 / 0-1-1, and its per-widget sheets are enqueued during render, so nothing here may depend on load order. ========================================================================== */ /* #314:44 carries four fills, one of them hidden. Two properties of Figma's fill arrays govern every band in this file. First, the array is bottom-first while CSS paints background-image top-first, so a Figma fill list transfers reversed. Second, a fill may carry visible:false, and Figma then does not paint it at all: #314:44's fourth fill is an opaque #000209 to #01043D gradient that is switched off, and most of the bands below hide a spare copy of the Earth plate the same way. Reading those hidden entries as live is what makes these stacks look impossible - an opaque gradient sitting on top of everything. Each visible image is this section's own crop, stretched to the box exactly as the design does with scaleMode STRETCH / backgroundSize 100% 100%. */ .elementor .elementor-element.elementor-element-oyopfsec { /* Decomposed back into four layers from the single baked export this rule used to carry. That export flattened the starfield in at full strength, but Figma composites the plate at opacity 0.30 over the page's #000204, and a baked file cannot be corrected afterwards: a scrim laid over it would darken the Earth sliver and the gradient with it. Layered, the 0.30 is exact - the plate at full strength under a solid rgba(0, 2, 4, 0.7) gives 0.7B + 0.3S, the same blend Figma performs. The Earth sliver is fill 1's crop, rows [435, 512] of backdrop-a.png, landing on the top (1 - 0.8494119) / 1.3586426 = 11.084% of the band. Composing these layers previously agreed with the baked export to mean 1.36 / RMS 2.50 of 255, so the 0.30 is the only thing that changes. */ background-color: var(--oyo-bg); background-image: linear-gradient(180deg, rgba(0, 2, 4, 0) 0%, rgba(0, 2, 4, 0.84) 15.7327%, rgba(0, 2, 4, 0) 100%), url(../../design/home/bg-pf-earth-6db38c.webp), linear-gradient(rgba(0, 2, 4, 0.7), rgba(0, 2, 4, 0.7)), url(../../design/home/bg-pf-b-51cc05.webp); background-size: 100% 100%, 100% 11.084%, 100% 100%, 100% 100%; background-position: center top, center top, center top, center top; background-repeat: no-repeat; } /* Glass blur — Figma effects on #314:47, #314:72, #314:76/:83, #314:178. */ .elementor .elementor-element.elementor-element-oyopfc1, .elementor .elementor-element.elementor-element-oyopfc2 { -webkit-backdrop-filter: blur(11.25px); backdrop-filter: blur(11.25px); } .elementor .elementor-element.elementor-element-oyopfc2ab, .elementor .elementor-element.elementor-element-oyopfc2bb { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); } .elementor .elementor-element.elementor-element-oyopfnote { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Row sizing: #314:47 fills, #314:72 hugs its 708px of fixed children. #314:72 is layoutSizingVertical FIXED at 417, not HUG, so this is `height` rather than `min-height`: Figma's own render puts its bottom stroke on row 992 of a card that starts at 576, which is 417 exactly. Its two children are FILL, so they take 417 - 2 border - 48 padding = 367 and their contents no longer fit the declared 24 padding. Figma squeezes the padding rather than growing the card - #314:74 lands 17.5 below the card edge, not 25 - which is what centring the content reproduces. Left as min-height the card grew to its natural 432.28 and took the whole row 9.28px past the design. */ .elementor .elementor-element.elementor-element-oyopfc1 { flex: 1 1 0; min-width: 0; width: auto; } .elementor .elementor-element.elementor-element-oyopfc2 { flex: 0 0 auto; width: auto; height: 417px; } .elementor .elementor-element.elementor-element-oyopfc2a { flex: 0 0 323px; width: auto; justify-content: center; } .elementor .elementor-element.elementor-element-oyopfc2b { flex: 0 0 321px; width: auto; justify-content: center; } /* #314:52 fills beside the fixed 271px image 6. */ .elementor .elementor-element.elementor-element-oyopfpills { flex: 1 1 0; min-width: 0; width: auto; } .elementor .elementor-element.elementor-element-oyopfimg6 { flex: 0 0 271px; width: auto; } .elementor .elementor-element-oyopfimg6 img { display: block; width: 271px; height: 219px; max-width: none; object-fit: fill; border-radius: 8px; } /* Pill rows: 24px icon, text takes the rest. */ .elementor .elementor-element.elementor-element-oyopfp1i, .elementor .elementor-element.elementor-element-oyopfp2i, .elementor .elementor-element.elementor-element-oyopfp3i { flex: 0 0 24px; width: auto; align-self: flex-start; } /* -------------------------------------------------------------------------- The registered mark in the footer copyright - client, 13 Oct 2026. Figma sets that one character apart: 633:2780's characterStyleOverrides single out index 17, the mark, and leave every other character on the base style. The API does not say what that override carries, so it was measured off the design's own render instead: design 7 x 8, its top 2px above the cap line build 11 tall, sitting on the cap line A full-size mark at 16px Arial is about 11 tall, so 8/11 gives 0.73em, and putting its foot 5.44px above the baseline puts its top 13.44 above, against the design's 13.46. Nothing here is a font substitution. The line is Arimo either way, which is Arial MT Pro's metric-compatible stand-in and what the whole site uses. The difference was only that the mark was drawn full size and on the baseline. -------------------------------------------------------------------------- */ .elementor .elementor-element-oyoftrcopy .oyo-reg { font-size: 0.73em; vertical-align: 0.34em; } /* -------------------------------------------------------------------------- The three bullet marks, drawn from the plugin - client, 13 Oct 2026. Figma colours this tick, and sampling its render gives rgb(30,167,248), which is the site's own accent. The mark used to come from an SVG in the uploads folder, shared by six widgets across two pages, so recolouring it meant rewriting that file. That worked, and then the host served the old body for a week: Cache-Control on uploads is max-age=604800, and the same URL with a cache-busting query came back correct while the plain one did not. So the mark joins the rest of the design layer instead. It is a plugin asset now, like cf-check.svg in the thank-you panel, which means a new URL that no cache has an entry for, and one place to change if it changes again. The widget's own stays in the markup and is simply not drawn, so nothing about the box, the flex basis or the row height moves. -------------------------------------------------------------------------- */ .elementor .elementor-element.elementor-element-oyopfp1i, .elementor .elementor-element.elementor-element-oyopfp2i, .elementor .elementor-element.elementor-element-oyopfp3i { background-image: url(../../design/home/pf-check.svg); background-repeat: no-repeat; background-position: left top; background-size: 24px 24px; } .elementor .elementor-element-oyopfp1i img, .elementor .elementor-element-oyopfp2i img, .elementor .elementor-element-oyopfp3i img { opacity: 0; } .elementor .elementor-element.elementor-element-oyopfp1t, .elementor .elementor-element.elementor-element-oyopfp2t, .elementor .elementor-element.elementor-element-oyopfp3t { flex: 1 1 0; min-width: 0; width: auto; } /* #314:78 / #314:85 — 198px plates that crop their oversized child. */ .elementor .elementor-element.elementor-element-oyopfc2aw, .elementor .elementor-element.elementor-element-oyopfc2bw { flex: 0 0 198px; position: relative; overflow: hidden; } .elementor .elementor-element.elementor-element-oyopfc2ai, .elementor .elementor-element.elementor-element-oyopfc2bi { position: absolute; width: auto; } .elementor .elementor-element.elementor-element-oyopfc2ai { left: -29px; top: -11px; } .elementor .elementor-element-oyopfc2ai img { display: block; width: 332px; height: 221px; max-width: none; object-fit: cover; } /* The dashboard PNG bakes in its 14.39 / 4.92px drop-shadow bleed, so the artwork origin (17, 18) shifts back by that much. */ .elementor .elementor-element.elementor-element-oyopfc2bi { left: 2.61px; top: 13.08px; } .elementor .elementor-element-oyopfc2bi img { display: block; width: 483.28px; height: 331.78px; max-width: none; } /* Badge SVGs keep their exported shadow bleed; the negative margins that correct for it are Elementor controls, so only the size is set here. */ .elementor .elementor-element.elementor-element-oyopfc2abi, .elementor .elementor-element.elementor-element-oyopfc2bbi { flex: 0 0 auto; width: auto; } .elementor .elementor-element-oyopfc2abi img { display: block; width: 188px; height: 60px; max-width: none; } .elementor .elementor-element-oyopfc2bbi img { display: block; width: 174px; height: 60px; max-width: none; } @media (max-width: 1024px) { .elementor .elementor-element.elementor-element-oyopfc1, .elementor .elementor-element.elementor-element-oyopfc2 { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; } /* Stacked, the cards are as tall as their content again, so the squeeze the 417 imposes at desktop has to be released with it. */ .elementor .elementor-element.elementor-element-oyopfc2a, .elementor .elementor-element.elementor-element-oyopfc2b { justify-content: flex-start; } .elementor .elementor-element.elementor-element-oyopfc2a, .elementor .elementor-element.elementor-element-oyopfc2b { flex: 1 1 0; min-width: 0; } } @media (max-width: 767px) { .elementor .elementor-element.elementor-element-oyopfpills, .elementor .elementor-element.elementor-element-oyopfimg6, .elementor .elementor-element.elementor-element-oyopfc2a, .elementor .elementor-element.elementor-element-oyopfc2b { flex: 0 0 auto; width: 100%; } .elementor .elementor-element-oyopfimg6 img { width: 100%; height: auto; aspect-ratio: 271 / 219; } } /* #314:172 / #314:178 are `hug` in Figma — the pill wraps its own text rather than spanning the row. Elementor containers default to `--width: 100%`. */ .elementor .elementor-element.elementor-element-oyopfnote { width: auto; max-width: 100%; } /* ========================================================================== Home — Industries Section (Figma #314:180) ========================================================================== */ /* WebDeveloperArif exported this band's background straight out of Figma, so it is the designer's own artwork rather than the crop plus gradient this file used to compose. The two measured the same — mean 0.37, RMS 0.69 of 255 — and the flat export is a quarter of the weight, because baking the near-black gradient in leaves far less for the encoder to carry. #314:180 and the company page's #314:416 declare identical fills (same imageRef, same crop transform, same gradient), so one file serves both. */ .elementor .elementor-element.elementor-element-oycoindsec, .elementor .elementor-element.elementor-element-oyoindsec { position: relative; background-image: url(../../design/home/bg-ind-section.webp); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } /* The hairline frame with four violet corner brackets (#314:181) is gone from every page. Client, 15 Oct: "sob page theke ei border ta bad jabe". The 14/10 file had already dropped it nearly everywhere - home's band is 633:895, its card Container and nothing else, and so are both mobile bands, 633:2178 and 633:2309, careers' CV band 633:1776 and home's contact frame inside 633:929. The one place it survives in the file is 633:1121 on the company page, and that one comes out on the client's word rather than the file's. The artwork, design/home/ind-frame.svg, stays in the repo: nothing references it now, and putting any of these back is one rule. */ /* The cards are the Industries_Grid widget's own markup now, read from the Industry post type, so they are addressed by class rather than by the six element ids they used to need across two pages. Each card is one : the whole tile is the hit area, and the hover state gets a keyboard equivalent. */ /* The company page's Industries band centres its children, which left the grid sizing to content and 5px narrower than the 1400 column. The grid is a band, not an item to centre, so it opts out of the parent's alignment. */ .elementor .elementor-widget-oyo-industries-grid { width: 100%; align-self: stretch; } .elementor .oyo-industries { display: flex; align-items: stretch; gap: 24px; width: 100%; } .elementor .oyo-industry { position: relative; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; border-radius: 16px; background-color: #0e0e10; /* #314:187 is a HUG frame with strokesIncludedInLayout: true, so Figma's 468 counts the 1px stroke top and bottom. A real border reproduces that and keeps the flex width, because Elementor boxes are border-box. */ border: 1px solid #2a2a2c; text-decoration: none; transition: background-color 0.28s ease, border-color 0.28s ease; } .elementor .oyo-industry__media { display: block; height: 380px; overflow: hidden; border-radius: 16px 16px 0 0; } .elementor .oyo-industry__image { display: block; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; } .elementor .oyo-industry__foot { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; container-type: inline-size; } /* The first card's label is the client's, not the design's: it reads "Oil & Gas, Pharma, Data," where Figma has "Oil & Gas". At 32px that is 325px on one line, and 186.8 on the wider of the two lines it naturally breaks into. The foot gives the title its own width less 88: the two 24px paddings, the 16px gap and the 24px arrow. Above roughly 1100 there is room for those two lines at the design's 32px; below it there is not, and at 768 the label was breaking onto four. So the size is read off the card rather than off the viewport, which is why the foot is a query container. A viewport formula cannot do this in one expression: the section's padding changes at 1024, so 1025 has *less* room than 1024 (169 against 208.7) and would need a branch of its own. cqw resolves against the container's *content* box, so the 48px of foot padding is already gone and only the 16px gap and the 24px arrow have to be taken off: 16.27cqw - 6.51px is 0.1713 x (content box - 40), the ratio that keeps the wider line inside the room, with five per cent off for slack. It reaches 32px by a content box of 237, which is 1024 and everything above about 1110, so the design width is untouched. Below 768 the mobile rule further down wins, as it did before. */ .elementor .oyo-industry__title { font-family: Arimo, sans-serif; font-size: clamp(20px, calc(16.27cqw - 6.51px), 32px); font-weight: 400; line-height: 1.2em; letter-spacing: -1.5px; color: #e4e2e4; } .elementor .oyo-industry__arrow { display: block; flex: 0 0 24px; color: #46464a; line-height: 0; } .elementor .oyo-industry__arrow svg { display: block; } /* #314:207 / #314:208 — two blurred #030695 outlines. The design draws them on the Clean Energy card alone, which is the hover state shown on one card rather than a permanent treatment of the middle one, so every card carries them and only hover reveals them. Figma centres a rectangle's stroke, so each box is inflated by half the stroke width and its radius grows to match. Addressed through the row rather than card by card: Elementor does not render _css_classes on containers, and the card ids differ between the two pages. `hover: hover` gates it because a tap on a touch device leaves :hover latched on the card until something else is tapped — the glow would stick. */ .elementor .oyo-industry::before, .elementor .oyo-industry::after { content: ""; position: absolute; z-index: 2; border-style: solid; border-color: #030695; pointer-events: none; opacity: 0; transition: opacity 0.28s ease; } .elementor .oyo-industry::before { inset: -3px -2.66px -2.6px -2.67px; border-width: 6px; border-radius: 19px; filter: blur(10px); } .elementor .oyo-industry::after { inset: -2px -1.66px -1.93px -1.67px; border-width: 4px; border-radius: 18px; filter: blur(2px); } /* `hover: hover` gates it because a tap on a touch device leaves :hover latched on the card until something else is tapped — the glow would stick there. */ @media (hover: hover) { .elementor .oyo-industry:hover { background-color: #191920; border-color: #030695; } .elementor .oyo-industry:hover::before, .elementor .oyo-industry:hover::after { opacity: 1; } } /* The keyboard gets the same state, plus a ring of its own: the design's glow is a #030695 that all but disappears against the page, so on its own it would leave a keyboard user unable to tell which card they are on. */ .elementor .oyo-industry:focus-visible { background-color: #191920; border-color: #030695; outline: 2px solid #9e9fff; outline-offset: 4px; } .elementor .oyo-industry:focus-visible::before, .elementor .oyo-industry:focus-visible::after { opacity: 1; } @media (max-width: 1024px) { .elementor .oyo-industry__media { height: 300px; } } @media (max-width: 767px) { .elementor .oyo-industries { flex-direction: column; } .elementor .oyo-industry { flex: 0 0 auto; width: 100%; } .elementor .oyo-industry__media { height: 240px; position: relative; } /* The 440 frames do not fit the photograph to this box, they clip a bigger one: #449:1944 is 464 x 393 at (-33, 0) and #449:1954 / #449:1966 are 448 x 380 at (-25, 0), all inside a 398 x 240 clip. `cover` picks its own zoom and centres, which is a different crop — it scored MAE 63 against the frame on all nine cards. One rule serves all three: card 1's asset is cut a little off the design's own origin (the trap the careers plates used to fall into, before they were re-exported from the clipping frame on 23/09), so fitting it against Figma's render lands on 450 x 381 at (-25, -1), which is also within 2px of what cards 2 and 3 state outright, and measures 5.8 / 3.4 / 5.5 live against 26.0 / 13.3 / 9.7 for the design's own 464 x 393 at (-33, 0). Absolute so the oversize never reaches the span's layout. An offline search at step 1 preferred 449 x 380 at (-24, 0) and scored it 1.41 / 1.03 / 5.37 — but live it measured 6.3 / 4.0 / 6.3, worse than what is here. The offline model resizes the 898px original with PIL; the browser scales the 768px srcset variant with its own sampler inside a rounded, clipped span at x21. The live number is the one that counts. */ .elementor .oyo-industry__image { position: absolute; top: -1px; left: -25px; width: 450px; height: 381px; } /* The card label is the one place the build came out larger than the design rather than smaller: the mobile frames set 28/33.6 on all nine cards (#374:2536 home, #374:4855 company, #392:6314 careers) against the 32 this widget carries from desktop. Sized the way every other mobile size is - the design value at 440 and above, proportional below, 16px floor - since this widget is ours and has no Elementor typography control. */ .elementor .oyo-industry__title { font-size: clamp(16px, 6.3636vw, 28px); } } /* ========================================================================== Home — Contact / Request Early Access Section (Figma #449:216) ========================================================================== */ /* Rebuilt 24/09 against the 23/09 file, on the client's note that the band did not match Figma and read harder than it should. It did not match because the section had been re-layered. What this file stacked — one exported plate plus a 0deg wash at 0.43 — was derived from #314:220, and that node no longer exists. #449:216 carries four fills of its own AND two further background frames as children, #449:217 (2092 wide, so it overhangs the section on both sides) and #449:218 (795 tall, top only). Three separate scrims, not one. Reproducing that stack by hand was tried and abandoned: composited from the API's own numbers it scored 16.22 against Figma's render, worse than the stale two-layer version's 14.95, because Figma does not paint those fills at the opacities it reports — rendering #449:217 alone comes back with an alpha of 38..113 where the JSON says the top fill is opaque. So the plate is taken from Figma's own rasteriser instead of modelled. The section renders as background + content; the content frame #449:219 renders separately with alpha, so wherever it is not fully opaque the background is solved straight back out of the two: bg = (render - content * a) / (1 - a) Where the content is fully opaque the background is unrecoverable and also invisible; those runs are interpolated across the row so the plate stays smooth under stretch. Gutter RMS against Figma's render: 0.000, max channel difference 0 — not a fit, an identity. Baking that recovered background into a single plate was tried first and reverted: the content covers 53% of the render, so 53% of the plate had to be invented, and interpolating it across each row left faint horizontal streaks wherever our build does not occlude exactly the pixels Figma's did. A plate is only honest where something was actually behind it. So the artwork layer stays the real starfield export, untouched and with nothing invented, and the three scrims are reproduced as gradients over it. Their geometry is the file's; only their alphas are fitted, because Figma does not paint them at the opacities it reports. Fitted against the recovered background over the 42% of the band that is exactly known — the strips where the content frame is fully transparent — by grid search: wash 0.545 band 0.250 top scrim 0.870 Gutter RMS against Figma's render, out of 255: the stale single-wash stack 4.04, Figma's declared opacities 3.95, this 2.58. For reference the previous round of this file recorded 3.69 against the 21/09 design. */ .elementor .elementor-element.elementor-element-oyocfsec { position: relative; background-image: /* #449:218, the topmost child, so it is listed first */ linear-gradient(180deg, rgba(2, 7, 16, 0.87) 0%, rgba(0, 2, 4, 0) 15.73%), /* #449:217's band */ linear-gradient(180deg, rgba(0, 2, 4, 0) 0%, rgba(0, 2, 4, 0.25) 15.73%, rgba(0, 2, 4, 0) 100%), /* #449:216's own wash */ linear-gradient(0deg, rgba(18, 21, 31, 0.545) 0%, rgba(17, 23, 43, 0.545) 97%), url(../../design/home/bg-cf-section.webp); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; } /* Both overlays sit under the content, as they do in Figma's layer order. */ .elementor .elementor-element.elementor-element-oyocfrow { position: relative; z-index: 1; } /* #314:224 is primaryAxisSizingMode AUTO - it hugs its content at 560 and does NOT match the 731 of the frame beside it. Left to the row's default stretch it ran to 731, putting 171px of bare gradient below the last bullet; Figma's own render ends the card on row 2515, ours ended on 2688. */ .elementor .elementor-element.elementor-element-oyocfcard { flex: 1 1 0; min-width: 0; width: auto; align-self: flex-start; } /* #314:249 has no auto-layout: it is a fixed 660x731 box whose children are absolutely placed, so the form card does not stretch it. */ .elementor .elementor-element.elementor-element-oyocfframe { flex: 0 0 660px; width: auto; height: 731px; position: relative; } /* Resolves against the frame's padding box, i.e. the design's (30, 30). */ .elementor .elementor-element.elementor-element-oyocfcard2 { position: absolute; top: 0; right: 0; left: 0; } /* #314:250 carried the same corner-bracket artwork around the form card. Out with the rest of them, 15 Oct; the box keeps its size and its blur. */ .elementor .elementor-element.elementor-element-oyocfcard2 { position: relative; z-index: 1; -webkit-backdrop-filter: blur(11.25px); backdrop-filter: blur(11.25px); } /* #314:255 centres its children, but the field rows are alignSelf: stretch. */ .elementor .elementor-element.elementor-element-oyocfform { width: 100%; } /* Bullet rows #314:229 .. #314:244 are primaryAxisSizingMode FIXED at 76, while two lines of 38.4 measure 76.8. Figma squeezes rather than grows, the same thing #314:72 does with its 417, so the rows are pinned to reproduce it. Unpinned the four rows carried +0.81 each and the card closed at 562.9 instead of 560. Released below the design width, where the text wraps to a third line and 76 would clip it. */ .elementor .elementor-element.elementor-element-oyocfb1, .elementor .elementor-element.elementor-element-oyocfb2, .elementor .elementor-element.elementor-element-oyocfb3, .elementor .elementor-element.elementor-element-oyocfb4 { height: 76px; } /* Bullet rows #314:229 .. #314:244 */ .elementor .elementor-element.elementor-element-oyocfb1i, .elementor .elementor-element.elementor-element-oyocfb2i, .elementor .elementor-element.elementor-element-oyocfb3i, .elementor .elementor-element.elementor-element-oyocfb4i { flex: 0 0 24px; width: auto; align-self: flex-start; } .elementor .elementor-element.elementor-element-oyocfb1t, .elementor .elementor-element.elementor-element-oyocfb2t, .elementor .elementor-element.elementor-element-oyocfb3t, .elementor .elementor-element.elementor-element-oyocfb4t { flex: 1 1 0; min-width: 0; width: auto; } /* The mark and the text are separate widgets on a row that tops-aligns both, so a 24px tick lands (1.6em - 24px) / 2 above the centre of the first line of text: 7.2px at the desktop's 24px type. Figma's own render does exactly the same, so this was never drift - the client asked on 14 Oct for the mark to sit on the line, which is a change to the design, not a fix to the build. The font-size below draws nothing. It is here so the em in the margin resolves against the same size the text uses, which keeps the nudge right through the fluid clamp at the narrow tier. It has to track post-9.css: 24, then 20 below 1025, then clamp(16px, 4.0909vw, 18px) below 768. */ .elementor .elementor-element.elementor-element-oyocfb1i, .elementor .elementor-element.elementor-element-oyocfb2i, .elementor .elementor-element.elementor-element-oyocfb3i, .elementor .elementor-element.elementor-element-oyocfb4i { font-size: 24px; } .elementor .elementor-element-oyocfb1i img, .elementor .elementor-element-oyocfb2i img, .elementor .elementor-element-oyocfb3i img, .elementor .elementor-element-oyocfb4i img { display: block; width: 24px; height: 24px; max-width: none; margin-top: calc(0.8em - 12px); } /* --- form fields ------------------------------------------------------------ Fluent Forms, from 24/09. Pro's form widget carried its spacing, type and colours as style controls, and Elementor compiled those into post-9.css - 30 rules that left with the widget. Every one of them is restated here against Fluent's boxes, alongside the rules that always lived in this file. The map, for anyone reading this next to an older screenshot: .elementor-field-group -> .ff-el-group the .elementor-col-50 pair -> .ff-t-container.oyo-form-row > .ff-t-cell label.elementor-field-label -> .ff-el-input--label > label .elementor-field-textual -> .ff-el-form-control .elementor-select-wrapper -> .ff-el-input--content:has(> select) .e-form__buttons > button -> .ff_submit_btn_wrapper > .ff-btn-submit Fluent's stylesheet is enqueued while the shortcode renders, which is after ours, so a tie goes to Fluent. Every rule below is scoped by `.elementor .elementor-element-oyocfform`, two classes clear of anything Fluent writes. -------------------------------------------------------------------------- */ /* Pro's generated sheet spaced the fields with .elementor-field-group { padding: 0 12px; margin-bottom: 32px } .elementor-form-fields-wrapper { margin: 0 -12px -32px } - a 24px column gutter and a 32px row gap, the negative margins taking the gutter back off the outer edges. Fluent has no wrapper to hang the negatives on, so the same geometry is stated the other way round: the gap belongs to the row, and the last group simply never carries one. */ .elementor .elementor-element-oyocfform .ff-el-group, .elementor .elementor-element-oyocfform .ff-t-container { margin-bottom: 32px; } /* `:last-child` is the wrong instrument here: each half of the name row is the only child of its own cell, so it would match those two as well and collapse the row's gutter. The row is spaced by its container; what it holds is not spaced at all. */ .elementor .elementor-element-oyocfform .ff-t-cell > .ff-el-group, .elementor .elementor-element-oyocfform .ff_submit_btn_wrapper { margin-bottom: 0; } /* First and last name share a row. Fluent writes `flex-basis: 50%` inline on both cells, which no stylesheet can outrank - so the basis is left alone and the 24px gutter is taken back out of it by flex-shrink, landing each cell at `50% - 12px`. That is the same pair of halves Pro's two `elementor-col-50` columns produced. */ .elementor .elementor-element-oyocfform .ff-t-container.oyo-form-row { display: flex; gap: 24px; } .elementor .elementor-element-oyocfform .ff-t-container.oyo-form-row > .ff-t-cell { flex: 1 1 0; min-width: 0; padding: 0; } /* #314:257 decomposes as label 24 + gap 4 + line 32 + padding 8 + stroke 1 = 69. Figma's group is padding-bottom 8 with a 1px INSIDE stroke, and the stroke does NOT eat the last pixel of that padding: #314:257 also carries strokesIncludedInLayout: true, and on a hug frame that makes Figma add the stroke outside the padding box, exactly as it does on the CTA pill below. Reading it as 7 + 1 left every field row at 68, which walked the submit button 5px up the card and closed #314:255 at 688 against its declared 693. */ .elementor .elementor-element-oyocfform .ff-el-input--label { /* Fluent ships this wrapper as an inline-block, which puts it on a text baseline and leaves the parent's descender space underneath it - about 2px per row, invisible on its own and 10px down the card once five rows have each paid it. Pro's label was a block-level