/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1786026418
Updated: 2026-08-06 14:26:58
*/
/* ═══════════════════════════════════════════════════════════════
SAEGIC — the two things Elementor cannot express natively.
Everything else on this site is built with Elementor widgets.
1. Diagonal wedges. Elementor's Shape Divider is a single solid
fill, so it cannot leave one side transparent — which is what
lets the CurvedGrid run through the diagonal instead of
stopping at a flat band.
2. The vertical side rails (rotation / writing-mode).
═══════════════════════════════════════════════════════════════ */:root{ --sg-green:#1DB57C; --sg-navy:#12303E; --sg-paper:#FCFCFC; --sg-rise1:90px; --sg-rise2:85px; --sg-rise3:114px; --sg-rise4:114px; --sg-rise5:105px; /* Ship the pattern art with the theme and reference it RELATIVE to this file.
These were absolute https://saegic.local/wp-content/uploads/... URLs, which
404 on any other host — every grid texture and every wedge light half went
flat after a migration. Relative paths survive any domain or environment. */
--sg-grid-dark:url("patterns/curvedgrid-dark.jpg"); --sg-grid-light:url("patterns/curvedgrid-light.jpg"); /* icon masks, inlined so the CSP-free data: URI travels with the stylesheet */
--sg-arrow-e:url("data:image/svg+xml; utf8,"); --sg-arrow-ne:url("data:image/svg+xml; utf8,"); --sg-search:url("data:image/svg+xml; utf8,"); --sg-chev-d:url("data:image/svg+xml; utf8,"); --sg-chev-l:url("data:image/svg+xml; utf8,"); --sg-chev-r:url("data:image/svg+xml; utf8,"); }
/* ── wedges ─────────────────────────────────────────────────── */.sg-wedge{ position:relative; z-index:3; pointer-events:none; }.sg-wedge::before,.sg-wedge::after{ content:''; position:absolute; inset:0; }
/* overlaps the section ABOVE — that section shows through the top */.sg-wedge-over{ height:calc(var(--sg-rise) + var(--sg-stripe,0px)); margin-top:calc(-1 * var(--sg-rise)); }.sg-wedge-over::before{ clip-path:polygon(0 var(--sg-rise),100% 0,100% 100%,0 100%); }.sg-wedge-over::after{ inset:0 0 -1px 0; clip-path:polygon(0 100%,100% var(--sg-stripe,0px),100% 100%); }
/* overlaps the section BELOW — that section shows through the bottom */.sg-wedge-under{ height:var(--sg-rise); margin-bottom:calc(-1 * var(--sg-rise)); }.sg-wedge-under::before{ inset:-1px 0 0 0; clip-path:polygon(0 0,100% 0,0 var(--sg-rise)); }.sg-wedge-under::after{ display:none; }.sg-wedge-1{ --sg-rise:var(--sg-rise1); --sg-stripe:24px; }.sg-wedge-2{ --sg-rise:var(--sg-rise2); }.sg-wedge-3{ --sg-rise:var(--sg-rise3); --sg-stripe:25px; }.sg-wedge-4{ --sg-rise:var(--sg-rise4); }.sg-wedge-5{ --sg-rise:var(--sg-rise5); }.sg-wedge-5::before,.sg-wedge-5::after{ background:var(--sg-green); }
/* the light grid's origin sits at the top of the wedge above, so the
wedge's lower triangle continues the same texture seamlessly */
/* ── side rails ─────────────────────────────────────────────── */.sg-rail{ top:128px; z-index:4; display:flex; align-items:center; justify-content:center; width:51px; padding:24px 0; writing-mode:vertical-rl; transform:rotate(180deg); background:var(--sg-green); color:#000; font-family:"Figtree",sans-serif; font-weight:500; font-size:16px; line-height:1; letter-spacing:0; text-transform:uppercase; }.sg-rail-push2{ top:calc(128px + var(--sg-rise2)); }.sg-rail-push4{ top:calc(128px + var(--sg-rise4)); }
@media (max-width:980px){:root{ --sg-rise1:52px; --sg-rise2:48px; --sg-rise3:64px; --sg-rise4:64px; --sg-rise5:58px; }.sg-rail{ display:none; }
}
/* continuous dark grid across Benefits + By the Numbers */
/* ── Elementor's container CSS loads after the theme, so the wedge
geometry needs to win explicitly. Nothing here is decorative;
it is the same clip-path system, just at higher priority. ── */.e-con.sg-wedge{ height:calc(var(--sg-rise) + var(--sg-stripe,0px)) !important; min-height:0 !important; padding:0 !important; margin-inline:0 !important; width:100% !important; max-width:none !important; display:block !important; --width:100%; }.e-con.sg-wedge-over{ margin-top:calc(-1 * var(--sg-rise)) !important; margin-bottom:0 !important; }.e-con.sg-wedge-under{ height:var(--sg-rise) !important; margin-bottom:calc(-1 * var(--sg-rise)) !important; margin-top:0 !important; }
/* images fill their card/figure box */.sg-post > .elementor-element img{ width:100% !important; height:auto; display:block; }.sg-post > .elementor-element:first-child{ width:100%; }
/* section content should stack and centre; Elementor defaults containers to row */
/* ═══════════ SAEGIC — structural layout ═══════════
Design tokens (colour, type, spacing) live in Elementor Global
Classes and stay editable there. This block only carries layout
Elementor's container controls can't express: the two-column
splits, media aspect ratios and the absolutely-positioned rails. */
/* section shells */
/* ── ABOUT: 552 / 626 split, then two 611 images ── */
/* ── BENEFITS: 3 cards, 413 wide, 16 gap ── */
/* ── STATS: 3 equal columns ── */
/* ── SOLUTIONS: 588 list / 455 panel, 120 gutter ── */
/* ── BLOG: 3 cards 349 wide, 100 gutter ── */.sg-post img{ width:100%; aspect-ratio:349/219; object-fit:cover; }
/* ── rails sit against the section edge ── */.sg-rail{ position:absolute !important; }
/* ── header sits transparent over the hero (comp: logo x60, nav right) ── */body{ --sg-hdr:0px; }.sg-header{ background:transparent !important; }
/* the hero already carries the top padding the absolute header sits on */
/* ── footer ── */
/* ── header must overlay the hero, not collapse ── */.elementor-location-header{ position:absolute !important; top:0; left:0; right:0; z-index:60; height:auto !important; }
/* ── About: media row must not overflow ── */
/* ── Solutions pills: active pill must be dark, both labels on one row ── */
/* ── Blog: 3 up, 349/100 ── */
/* ── CTA: two lines like the comp ── */
/* ── Footer layout ── */
/* ── section rails anchored to viewport edge ── */.sg-rail{ left:0 !important; }
/* image widgets size from the element, not the inner */
/* atomic e-image renders as a bare , so size it directly */.sg-post img{ width:100% !important; height:auto; }
/* bare children are the flex items, so constrain them directly */
/* footer: lead left, full logo right, legal on its own row */
/* Elementor's container rules reset z-index, which lets the next section
paint over the wedge and hides the diagonal entirely. */.e-con.sg-wedge{ position:relative !important; }.e-con.sg-wedge::before, .e-con.sg-wedge::after{ z-index:1; }
/* sections must be below the wedges in the stacking order */.e-con.sg-hero, .e-con.sg-about, .e-con.sg-benefits, .e-con.sg-stats,
.e-con.sg-solutions, .e-con.sg-blog, .e-con.sg-cta, .e-con.sg-darkblock{ position:relative !important; z-index:1 !important; }/* sections must be below the wedges in the stacking order */.e-con.sg-wedge{ z-index:5 !important; isolation:auto !important; }
/* Elementor defines .e-con::before/::after itself, so ours must be explicit */.e-con.sg-wedge::before, .e-con.sg-wedge::after{ content:'' !important; display:block !important; position:absolute !important; top:0; left:0; right:0; bottom:0; width:auto; height:auto; opacity:1 !important; }.e-con.sg-wedge-over::before{ clip-path:polygon(0 var(--sg-rise),100% 0,100% 100%,0 100%) !important; }.e-con.sg-wedge-over::after{ bottom:-1px; clip-path:polygon(0 100%,100% var(--sg-stripe,0px),100% 100%) !important; }.e-con.sg-wedge-under::before{ top:-1px; clip-path:polygon(0 0,100% 0,0 var(--sg-rise)) !important; }.e-con.sg-wedge-under::after{ display:none !important; }.sg-wedge-1::before{ background:#1DB57C !important; }
/* The light half of a wedge must carry the CurvedGrid of the section it borders,
not flat paper — otherwise the texture stops dead at the diagonal and the white
side reads as a flat cut-out. Positions match build/index.html: the wedge shows
rows 0..rise of the image and the section it meets picks up at -rise, so the
grid runs continuously through the diagonal. */.sg-wedge-1::after{ background:var(--sg-paper) var(--sg-grid-light) center top/100% auto repeat !important; }.sg-wedge-2::before{ background:var(--sg-paper) var(--sg-grid-light) center top/100% auto repeat !important; }.sg-wedge-3::before{ background:#1DB57C !important; }.sg-wedge-3::after{ background:var(--sg-paper) var(--sg-grid-light) center top/100% auto repeat !important; }.sg-wedge-4::before{ background:var(--sg-paper) var(--sg-grid-light) center top/100% auto repeat !important; }.sg-wedge-5::before, .sg-wedge-5::after{ background:#1DB57C !important; }
/* buttons: long thin arrow like the comp */
/* Elementor's .e-button-base sets display:block, which beat a plain
`display:inline-flex` here — so align-items/justify-content were inert on every
button. Harmless-looking on the ghost buttons (their arrow is only 12px tall),
but it dropped "View All Products" text below its 60px disc. Needs !important. */button.sg-btn-ghost, button.sg-btn-ghost-light, button.sg-btn-ghost-navy, button.sg-btn-green{ display:inline-flex !important; align-items:center !important; gap:16px; cursor:pointer; line-height:1; }button[class*="sg-btn"]::after{ content:''; display:inline-block; width:36px; height:12px; flex:0 0 auto; background:currentColor; -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain; -webkit-mask-image:url("data:image/svg+xml; utf8,"); mask-image:url("data:image/svg+xml; utf8,"); }
/* explicit wedge heights + overlaps (no calc dependency) */
/* Wedge heights and overlaps match build/index.html exactly. Do NOT nudge a wedge
with its own margins to reposition the diagonal: a positive margin-bottom opens a
real gap below it (a dark band across the page), and a negative one pulls the next
section up so its background blunts the point of the diagonal at the shallow end.
Both were visible bugs. The diagonal IS the section boundary — move it by taking N
off the preceding section's padding-bottom and adding N to the next section's
padding-top, which shifts the boundary and leaves all content where it was. */.e-con.sg-wedge-1{ height:114px !important; margin-top:-90px !important; margin-bottom:0 !important; }.e-con.sg-wedge-2{ height:85px !important; margin-top:0 !important; margin-bottom:-85px !important; }.e-con.sg-wedge-3{ height:139px !important; margin-top:-114px !important; margin-bottom:0 !important; }.e-con.sg-wedge-4{ height:114px !important; margin-top:0 !important; margin-bottom:-114px !important; }.e-con.sg-wedge-5{ height:105px !important; margin-top:-105px !important; margin-bottom:0 !important; }
/* ── footer: lead left, logo hard right, legal on its own row below ── */
/* buttons render 46px tall in the comp (92 for the big green one) */button[class*="sg-btn"]{ height:46px; align-items:center; justify-content:center; }button.sg-btn-green{ height:92px; font-size:19px; }
/* CTA headline leads at 60.5px/line in the comp (121px for two lines) */
/* ── About: match the HTML exactly — container 1190, cols 552/626, gap 12 ── */
/* Elementor gives every .e-con 10px inline padding; our containers are measured
edge-to-edge against the comp, so zero it on the layout rows. */
/* the --padding-inline-* override doesn't win; set the property directly.
Layout rows go to zero; components keep their own measured padding. */
/* Elementor emits logical border-*-radius longhands, but a later
`border-radius` shorthand zeroes them. Restate as shorthand. */
/* match build/index.html: CTA headline uses the standard h2 leading, legal sits
directly under the footer row */
/* solutions: head -> body gap is 54 in the HTML */
/* .e-con also carries default block padding (38px) — zero it on layout rows so a
row is exactly as tall as its tallest child, like the HTML. */
/* solutions head: h2 column must be wide enough for the HTML's 3-line break */ /* loop grid is 9px taller than the old static row */
/* ─────────────────────────────────────────────────────────────────────────
Section-by-section pass against build/index.html — fixes for things that
were missing rather than merely mis-sized.
───────────────────────────────────────────────────────────────────────── */
/* Safe Fleet lockup ships as a grayscale JPEG with a black field. The HTML
knocks the field out with mix-blend-mode; without it the logo renders as a
black box on the dark benefits background. */
/* Header nav filled the row and left-aligned itself against the logo. */
/* Blog card: the .e-con default padding inset the image, leaving a 10px card-
coloured border around the photo instead of a full-bleed top image. */
/* "View More Posts" sits at the right end of the grid in the HTML. sg-right
only set align-items, which does nothing on a row. */
/* CTA headline: first line is Unbounded 400, only "with confidence." is 700.
sg-h2 carries 500 for every other section heading, so override here only. */
/* Support row stacks and centres (global class now sets column). */
/* ── Missing decorations ──────────────────────────────────────────────────
The reference draws these as inline