/** * Giant Truss — layout spacing calibrated to the Dlyft reference. * * Measured off dlyftglobal.com at a 1440px viewport: * content width 1300px (we were 1240) * grid gaps 22px column / 42px row (we were 12–20px, no row gap) * text stacks 12px between eyebrow, headline, paragraph and button * card padding 28–32px (we were 10–24px) * * Dlyft drives every gap from the container and leaves widget margins at zero, * which is why its rhythm stays even. Elementor works the same way — a * container reads `--row-gap` / `--column-gap` — so these set those properties * rather than fighting the generated `gap` declaration. * * Dlyft has no shared vertical scale: each band's height comes from its own * content, so there is no section rhythm here to copy. * * The homepage is Elementor content living in the database, so this file * overrides generated CSS. Anything here should eventually be set in the * Elementor editor. The doubled `.elementor-element.elementor-element` in the * selectors mirrors the shape Elementor generates, which is what lets these * rules win without !important. */ :root { --gt-content: 1300px; --gt-gap-col: 22px; --gt-gap-row: 42px; --gt-gap-text: 12px; --gt-card-pad: 28px; /* Shaved off the gap between bands. Each band's padding-bottom carries the trim, so every section-to-section gap closes by exactly this much. */ --gt-band-trim: 15px; } /* Content width and grid rhythm ---------------------------------------- */ body.home .elementor-element.elementor-element.e-con, body.page .elementor-element.elementor-element.e-con { --container-max-width: var(--gt-content); } /* The 22/42 grid gaps were measured off Dlyft's card grids, so they belong to card grids only — containers holding nested containers. A container holding widgets directly is a text stack or a row of chips, and keeps its authored gap. Without this the filter chips under "Solutions For Every Stage" sit 22px apart and wrap 42px apart on a phone, instead of the 12px they were built with. The row gap only ever shows once a grid wraps. */ body.home .elementor-element.elementor-element.e-con:has(> .e-con-inner > .e-con), body.page .elementor-element.elementor-element.e-con:has(> .e-con-inner > .e-con) { --row-gap: var(--gt-gap-row); --column-gap: var(--gt-gap-col); } body.home .elementor-container, body.home .e-con-inner, body.page .elementor-container, body.page .e-con-inner { max-width: var(--gt-content); } /* Text stacks ----------------------------------------------------------- * The 42px row gap is for card grids as they wrap. A container holding a * heading is a text stack — eyebrow, headline, paragraph, button — and Dlyft * keeps those lines tight to each other at 12px. */ body.home .elementor-element.elementor-element.e-con:has(> .elementor-widget-heading), body.home .elementor-element.elementor-element.e-con:has(> .e-con-inner > .elementor-widget-heading), body.page .elementor-element.elementor-element.e-con:has(> .elementor-widget-heading), body.page .elementor-element.elementor-element.e-con:has(> .e-con-inner > .elementor-widget-heading) { --row-gap: var(--gt-gap-text); } /* Cards ---------------------------------------------------------------- * Elementor writes padding per element id, so matching Dlyft's roomier cards * means naming them. These ids are seeded by the project (the gt000xx range), * not generated per edit, so they survive content changes. */ body.home .elementor-element-gt00009, body.home .elementor-element-gt0000d, body.home .elementor-element-gt00011, body.home .elementor-element-gt00015, body.home .elementor-element-gt00023, body.home .elementor-element-gt00026, body.home .elementor-element-gt00029, body.home .elementor-element-gt0002c, body.home .elementor-element-gt0004c, body.home .elementor-element-gt0004f, body.home .elementor-element-gt00052 { padding: var(--gt-card-pad); } /* Widget margins ------------------------------------------------------- */ body.home .elementor-widget:not(:last-child), body.page .elementor-widget:not(:last-child) { margin-bottom: 0; } /* Band gaps ------------------------------------------------------------- * The vertical gap between two bands is the first one's padding-bottom plus * the next one's padding-top. Taking the trim off the bottom alone closes * each gap by the full amount and leaves the space under the header, and * inside each band, as authored. Values are written as calc() so the * authored padding stays readable next to the trim. * * Bands with no bottom padding (gt00016, gt00049, gt00053) are skipped — * there is nothing there to take. The gap below the last of them belongs to * the partner band's padding-top, trimmed in footer.css. */ body.home .elementor-element.elementor-element-gt00005 { /* hero */ padding-bottom: calc(95px - var(--gt-band-trim)); } body.home .elementor-element.elementor-element-gt0001e { /* Driven by Innovation */ padding-bottom: calc(96px - var(--gt-band-trim)); } body.home .elementor-element.elementor-element-gt0002f { /* Explore Our Complete Range */ padding-bottom: calc(48px - var(--gt-band-trim)); } body.home .elementor-element.elementor-element-gt00035 { /* Trusted By Leaders */ padding-bottom: calc(56px - var(--gt-band-trim)); } body.home .elementor-element.elementor-element-gt00041 { /* Solutions For Every Stage */ padding-bottom: calc(28px - var(--gt-band-trim)); } /* Events band → partner logos ------------------------------------------ * The gap here is the events band's inner padding-bottom (56px), not the band * padding the trim above works on — which is why the first pass barely moved * it. Bringing it to 20px puts this gap at ~79px, the same rhythm as every * other band boundary on the page. */ body.home .elementor-element.elementor-element-gt00053 { --padding-bottom: 20px; } /* "Solutions For Every Stage" band -------------------------------------- * The band was centred while the hero and Latest News run left. Elementor * centres it in two places: `--align-items` on the text stack and * `--justify-content` on the row of chips beneath it. Both have to move, and * the widgets' own text-align with them, or the paragraph stays centred * inside a left-placed box. */ body.home .elementor-element.elementor-element-gt0003a { --align-items: flex-start; } body.home .elementor-element.elementor-element-gt00040 { --justify-content: flex-start; } body.home .elementor-element.elementor-element-gt00036, body.home .elementor-element.elementor-element-gt00037, body.home .elementor-element.elementor-element-gt00038, body.home .elementor-element.elementor-element-gt00039 { text-align: left; } /* GT: hero content line --------------------------------------------------- * The hero band (gt00005) is an e-con-full whose widgets are direct children, * so they sit at the band's own 50px padding edge while every other band caps * its content and centres it. Measured at 1920px: header logo x=300, footer * logo x=300, category cards x=310, Latest News x=310 -- and the hero * headline x=50. The gap grows linearly with viewport width. * Capping the hero's widget column puts it on the same line as everything * else; the band keeps its full-bleed background and left-aligned text. * -------------------------------------------------------------------------- */ body.home .elementor-element.elementor-element-gt00005 > .elementor-widget { width: 100%; max-width: var(--gt-content, 1300px); margin-inline: auto; } /* GT: end hero content line */