/** * Giant Truss — heading scale matched to the Dlyft reference. * * Measured off dlyftglobal.com at a 1440px viewport, all Inter Tight: * hero 49px / lh 1.0 / w500 (31px on a 390px phone) * section 48px / lh 1.0 / w400 (32px on a phone; lighter as it grows) * card title 26px / lh 1.05 / w400–500 * tile title 18px / lh 1.3 / w400 * eyebrow 16px / lh 1.0 / w500 * body copy 16px / lh 1.5 / w400 * card copy 13px / lh 1.55 / w400 * * Dlyft holds body copy at a 1.5 ratio everywhere; ours sat at 1.6–1.75, which * is the main reason our paragraphs read looser than the reference. * * The homepage is Elementor content in the database, so each tier is applied * by element id — the gt000xx range is seeded by the project rather than * regenerated per edit. These belong in the Elementor editor eventually. * * Selectors carry the `.elementor-element.elementor-element-` pair because * that is the shape Elementor generates; matching it is what lets these rules * win without !important. */ :root { /* Fluid between a 390px phone and a 1440px desktop. Dlyft scales its headings the same way — 49→31 for the hero, 48→32 for a section — and without it a 48px section heading eats a phone screen whole. */ --gt-h-hero: clamp(31px, 24.3px + 1.71vw, 49px); --gt-h-section: clamp(32px, 26.1px + 1.52vw, 48px); --gt-h-card: 26px; --gt-h-tile: 18px; --gt-h-eyebrow: 16px; /* Body copy — also consumed by about.css and news.css. */ --gt-t-body: 16px; --gt-t-lh: 1.5; --gt-t-card: 13px; --gt-t-card-lh: 1.55; } /* Hero ----------------------------------------------------------------- */ body.home .elementor-element.elementor-element-gt00001 .elementor-heading-title, body.home .elementor-element.elementor-element-gt00002 .elementor-heading-title { font-size: var(--gt-h-hero); font-weight: 500; line-height: 1; } /* Section headlines ---------------------------------------------------- * Our section headings come in pairs — a lead-in line and an accent line. * Dlyft sets a headline at one size, so both halves take the same value and * read as a single sentence. */ body.home .elementor-element.elementor-element-gt00018 .elementor-heading-title, /* Innovation */ body.home .elementor-element.elementor-element-gt00019 .elementor-heading-title, /* Built for You. */ body.home .elementor-element.elementor-element-gt0001f .elementor-heading-title, /* Explore Our */ body.home .elementor-element.elementor-element-gt00020 .elementor-heading-title, /* Complete Range */ body.home .elementor-element.elementor-element-gt00031 .elementor-heading-title, /* Trusted By Leaders */ body.home .elementor-element.elementor-element-gt00032 .elementor-heading-title, /* Proven By Experience */ body.home .elementor-element.elementor-element-gt00036 .elementor-heading-title, /* Solutions For */ body.home .elementor-element.elementor-element-gt00037 .elementor-heading-title, /* Every Stage */ body.home .elementor-element.elementor-element-gt00047 .elementor-heading-title { /* Latest News */ font-size: var(--gt-h-section); font-weight: 400; line-height: 1; } /* Eyebrows ------------------------------------------------------------- * Dlyft's own eyebrow is uppercase and tracked out at 1.4px, but its headings * are title case — first letter capitalised, no full capitals anywhere — and * that is the treatment we follow. Casing is left exactly as authored, and * tracking stays at normal, which is what mixed-case type wants; the 1.4px * only ever made sense under capitals. */ body.home .elementor-element.elementor-element-gt00017 .elementor-heading-title, /* Driven by */ body.home .elementor-element.elementor-element-gt00030 .elementor-heading-title { /* Testimonials */ font-size: var(--gt-h-eyebrow); font-weight: 500; line-height: 1; } /* Card titles ----------------------------------------------------------- */ body.home .elementor-element.elementor-element-gt00006 .elementor-heading-title, /* TRUSS */ body.home .elementor-element.elementor-element-gt0000a .elementor-heading-title, /* ROOFS */ body.home .elementor-element.elementor-element-gt0000e .elementor-heading-title, /* STAGE */ body.home .elementor-element.elementor-element-gt00012 .elementor-heading-title { /* BARRICADE */ font-size: var(--gt-h-card); line-height: 1.05; } /* Tile titles ----------------------------------------------------------- */ body.home .elementor-element.elementor-element-gt00022 .elementor-heading-title, /* Aluminium Truss */ body.home .elementor-element.elementor-element-gt00025 .elementor-heading-title, /* Roof Truss */ body.home .elementor-element.elementor-element-gt00028 .elementor-heading-title, /* Barricade */ body.home .elementor-element.elementor-element-gt0002b .elementor-heading-title, /* Towers */ body.home .elementor-element.elementor-element-gt0004b .elementor-heading-title, /* PALM Expo 2025 */ body.home .elementor-element.elementor-element-gt0004e .elementor-heading-title, /* AP Dhillon India Tour */ body.home .elementor-element.elementor-element-gt00051 .elementor-heading-title { /* ISE Barcelona */ font-size: var(--gt-h-tile); line-height: 1.3; } /* Body copy ------------------------------------------------------------- * The homepage's paragraphs are Elementor text-editor widgets, so they are * named the same way the headings are. */ body.home .elementor-element.elementor-element-gt00003 p, /* hero standfirst */ body.home .elementor-element.elementor-element-gt0001a p, /* Driven by Innovation */ body.home .elementor-element.elementor-element-gt00038 p { /* Solutions For Every Stage */ font-size: var(--gt-t-body); line-height: var(--gt-t-lh); } body.home .elementor-element.elementor-element-gt00007 p, /* TRUSS */ body.home .elementor-element.elementor-element-gt0000b p, /* ROOFS */ body.home .elementor-element.elementor-element-gt0000f p, /* STAGE */ body.home .elementor-element.elementor-element-gt00013 p { /* BARRICADE */ font-size: var(--gt-t-card); line-height: var(--gt-t-card-lh); } /* Headings over a background image -------------------------------------- * A photographic backdrop already carries plenty of colour, so the headline * there is a single colour rather than the purple/dark pairing used on flat * sections. "Solutions For" was purple against a white "Every Stage"; both * are white now. */ body.home .elementor-element.elementor-element-gt00036 .elementor-heading-title { color: #fff; }