/* Theme Name: 42 RDI Template: hello-elementor Author: Propel Digital Marketing Description: Child theme for 42rdi.com. Holds the heading-appearance utilities that let markup use correct heading levels without changing how the Buildly kit looks. Version: 1.4.0 */ /* ------------------------------------------------------------------ HEADING APPEARANCE UTILITIES ------------------------------------------------------------------ The Buildly kit styles headings by TAG, which forces a choice between correct document structure and correct appearance. These classes break that tie: choose the heading LEVEL for meaning and SEO, then add the matching class for looks. In Elementor: edit the Heading widget, set 'HTML Tag' to the level the document needs, then put the class in Advanced > CSS Classes. Example: an H2 that should look like the page's H1 gets HTML Tag = H2 and CSS Classes = rdi-type-h1. Elementor puts CSS Classes on the widget WRAPPER, not the heading itself, so each rule matches both the element carrying the class and any heading inside it. Values come from the same Elementor global custom properties the kit sets on h1..h6, so responsive sizes stay in sync and editing Site Settings > Typography still works everywhere. Colour is deliberately NOT set. Headings inside dark sections take their colour from the widget, and forcing it here would break them. The [class*="elementor-kit-"] prefix outranks Elementor's own '.elementor-kit-18 h2' rule without hardcoding the kit's post ID. Available: rdi-type-h1 ... rdi-type-h6, plus rdi-type-meta (utility-bar face) and rdi-type-mono (button face, JetBrains Mono uppercase, for labels and stat captions). ------------------------------------------------------------------ */ [class*="elementor-kit-"] .rdi-type-h1, [class*="elementor-kit-"] .rdi-type-h1 :is(h1, h2, h3, h4, h5, h6) { font-family: var( --e-global-typography-primary-font-family ), Sans-serif; font-size: var( --e-global-typography-primary-font-size ); font-weight: var( --e-global-typography-primary-font-weight ); text-transform: var( --e-global-typography-primary-text-transform ); font-style: var( --e-global-typography-primary-font-style ); text-decoration: var( --e-global-typography-primary-text-decoration ); line-height: var( --e-global-typography-primary-line-height ); letter-spacing: var( --e-global-typography-primary-letter-spacing ); word-spacing: var( --e-global-typography-primary-word-spacing ); } [class*="elementor-kit-"] .rdi-type-h2, [class*="elementor-kit-"] .rdi-type-h2 :is(h1, h2, h3, h4, h5, h6) { font-family: var( --e-global-typography-secondary-font-family ), Sans-serif; font-size: var( --e-global-typography-secondary-font-size ); font-weight: var( --e-global-typography-secondary-font-weight ); text-transform: var( --e-global-typography-secondary-text-transform ); font-style: var( --e-global-typography-secondary-font-style ); text-decoration: var( --e-global-typography-secondary-text-decoration ); line-height: var( --e-global-typography-secondary-line-height ); letter-spacing: var( --e-global-typography-secondary-letter-spacing ); word-spacing: var( --e-global-typography-secondary-word-spacing ); } [class*="elementor-kit-"] .rdi-type-h3, [class*="elementor-kit-"] .rdi-type-h3 :is(h1, h2, h3, h4, h5, h6) { font-family: var( --e-global-typography-d7dd107-font-family ), Sans-serif; font-size: var( --e-global-typography-d7dd107-font-size ); font-weight: var( --e-global-typography-d7dd107-font-weight ); text-transform: var( --e-global-typography-d7dd107-text-transform ); font-style: var( --e-global-typography-d7dd107-font-style ); text-decoration: var( --e-global-typography-d7dd107-text-decoration ); line-height: var( --e-global-typography-d7dd107-line-height ); letter-spacing: var( --e-global-typography-d7dd107-letter-spacing ); word-spacing: var( --e-global-typography-d7dd107-word-spacing ); } [class*="elementor-kit-"] .rdi-type-h4, [class*="elementor-kit-"] .rdi-type-h4 :is(h1, h2, h3, h4, h5, h6) { font-family: var( --e-global-typography-9920fad-font-family ), Sans-serif; font-size: var( --e-global-typography-9920fad-font-size ); font-weight: var( --e-global-typography-9920fad-font-weight ); text-transform: var( --e-global-typography-9920fad-text-transform ); font-style: var( --e-global-typography-9920fad-font-style ); text-decoration: var( --e-global-typography-9920fad-text-decoration ); line-height: var( --e-global-typography-9920fad-line-height ); letter-spacing: var( --e-global-typography-9920fad-letter-spacing ); word-spacing: var( --e-global-typography-9920fad-word-spacing ); } [class*="elementor-kit-"] .rdi-type-h5, [class*="elementor-kit-"] .rdi-type-h5 :is(h1, h2, h3, h4, h5, h6) { font-family: var( --e-global-typography-55b5132-font-family ), Sans-serif; font-size: var( --e-global-typography-55b5132-font-size ); font-weight: var( --e-global-typography-55b5132-font-weight ); text-transform: var( --e-global-typography-55b5132-text-transform ); font-style: var( --e-global-typography-55b5132-font-style ); text-decoration: var( --e-global-typography-55b5132-text-decoration ); line-height: var( --e-global-typography-55b5132-line-height ); letter-spacing: var( --e-global-typography-55b5132-letter-spacing ); word-spacing: var( --e-global-typography-55b5132-word-spacing ); } [class*="elementor-kit-"] .rdi-type-h6, [class*="elementor-kit-"] .rdi-type-h6 :is(h1, h2, h3, h4, h5, h6) { font-family: var( --e-global-typography-2ae9ce1-font-family ), Sans-serif; font-size: var( --e-global-typography-2ae9ce1-font-size ); font-weight: var( --e-global-typography-2ae9ce1-font-weight ); text-transform: var( --e-global-typography-2ae9ce1-text-transform ); font-style: var( --e-global-typography-2ae9ce1-font-style ); text-decoration: var( --e-global-typography-2ae9ce1-text-decoration ); line-height: var( --e-global-typography-2ae9ce1-line-height ); letter-spacing: var( --e-global-typography-2ae9ce1-letter-spacing ); word-spacing: var( --e-global-typography-2ae9ce1-word-spacing ); } [class*="elementor-kit-"] .rdi-type-meta, [class*="elementor-kit-"] .rdi-type-meta :is(h1, h2, h3, h4, h5, h6) { font-family: var( --e-global-typography-8d15667-font-family ), Sans-serif; font-size: var( --e-global-typography-8d15667-font-size ); font-weight: var( --e-global-typography-8d15667-font-weight ); text-transform: var( --e-global-typography-8d15667-text-transform ); font-style: var( --e-global-typography-8d15667-font-style ); text-decoration: var( --e-global-typography-8d15667-text-decoration ); line-height: var( --e-global-typography-8d15667-line-height ); letter-spacing: var( --e-global-typography-8d15667-letter-spacing ); word-spacing: var( --e-global-typography-8d15667-word-spacing ); } [class*="elementor-kit-"] .rdi-type-mono, [class*="elementor-kit-"] .rdi-type-mono :is(h1, h2, h3, h4, h5, h6) { font-family: var( --e-global-typography-accent-font-family ), Sans-serif; font-size: var( --e-global-typography-accent-font-size ); font-weight: var( --e-global-typography-accent-font-weight ); text-transform: var( --e-global-typography-accent-text-transform ); font-style: var( --e-global-typography-accent-font-style ); text-decoration: var( --e-global-typography-accent-text-decoration ); line-height: var( --e-global-typography-accent-line-height ); letter-spacing: var( --e-global-typography-accent-letter-spacing ); word-spacing: var( --e-global-typography-accent-word-spacing ); } /* ==== SITE CONTAINER ================================================= The whole site is capped at 1900px and centred, so it stops stretching edge to edge on wide monitors. Applied to rather than to each section, so every full-bleed background stops at the same boundary and nothing has to be re-capped section by section. The letterbox either side takes the ink colour, which reads as a deliberate frame against the dark hero and footer. Change --rdi-frame below to #F3F3E8 if a bone surround is preferred. No sticky or fixed header on this site, so nothing escapes the cap. If a sticky header is added later, it needs the same max-width and auto margins or it will span the full viewport. ==================================================================== */ :root { --rdi-site-max: 1900px; --rdi-frame: #13140E; } html { background-color: var(--rdi-frame); } body { max-width: var(--rdi-site-max); margin-left: auto; margin-right: auto; } /* Elementor measures 100vw against the viewport, not the capped body, so any full-width child would overhang the frame. Tie those to the body. */ body [data-elementor-type] .e-con, body [data-elementor-type] .elementor-section { max-width: 100%; } /* ==== BUTTON SIZES =================================================== A reusable large-button style. Put rdi-btn-lg in a Button widget under Advanced > CSS Classes and the button scales to 1.5x the default in both padding and label size. Nothing else changes: colours, border and the radius still come from the global kit, so a large button still reads as the same button, just bigger. Font size and letter spacing are derived from the kit button typography variable rather than hardcoded, so they follow the global setting and stay correct at tablet and mobile with no extra rules. Padding has no equivalent global variable, so its base is declared here to match the kit (12px / 20px). Update --rdi-btn-pad-* if the kit button padding is ever changed in Site Settings. To add another size, copy the rule and change the scale, for example --rdi-btn-sm-scale: 0.85 for a compact variant. The !important flags are deliberate and limited to the three properties this utility owns. Elementor writes per-widget padding at a specificity no class selector can reach, so without them the utility would silently do nothing on any button that has padding set on the widget. Colour, border and radius are left alone so per-widget styling still works. ==================================================================== */ :root { --rdi-btn-pad-y: 12px; --rdi-btn-pad-x: 20px; --rdi-btn-lg-scale: 1.5; } [class*="elementor-kit-"] .rdi-btn-lg .elementor-button, [class*="elementor-kit-"] .rdi-btn-lg.elementor-button, [class*="elementor-kit-"] .rdi-btn-lg .elementor-button-link, [class*="elementor-kit-"] .rdi-btn-lg button { padding: calc(var(--rdi-btn-pad-y) * var(--rdi-btn-lg-scale)) calc(var(--rdi-btn-pad-x) * var(--rdi-btn-lg-scale)) !important; font-size: calc(var(--e-global-typography-accent-font-size, 12px) * var(--rdi-btn-lg-scale)) !important; letter-spacing: calc(var(--e-global-typography-accent-letter-spacing, -0.3px) * var(--rdi-btn-lg-scale)) !important; } /* keep any button icon in proportion with the larger label */ [class*="elementor-kit-"] .rdi-btn-lg .elementor-button-icon svg, [class*="elementor-kit-"] .rdi-btn-lg .elementor-button-icon i { font-size: calc(var(--e-global-typography-accent-font-size, 12px) * var(--rdi-btn-lg-scale)); width: auto; } /* ==== LOGO IMAGES ==================================================== An SVG carries its own aspect ratio and centres itself inside whatever box it is given, because preserveAspectRatio defaults to xMidYMid meet. Elementor stretches image widgets to the full width of their container, so a squarish logo in a wide column draws correctly but floats in the middle of an oversized box, leaving dead space to its left. This makes the img box hug the artwork, so the logo starts exactly where its container starts. Add rdi-logo to any Image widget holding a logo. ==================================================================== */ [class*="elementor-kit-"] .rdi-logo img { width: auto; max-width: 100%; } /* ==== MOBILE MENU LOGO =============================================== ElementsKit sizes this logo with max-width / max-height only, leaving width and height on auto. That works for a raster image, which carries its own pixel size, but an SVG exported with width="100%" has no intrinsic size to fall back on, so auto resolves to zero and the logo disappears entirely. The source SVGs have been corrected to carry real dimensions, but any browser that already fetched the old file keeps it for a year, because static assets here are served with max-age=31535990 and the filename did not change. Pinning the box explicitly makes rendering independent of whatever the SVG claims its size is, so it is correct on both the old cached file and the corrected one. object-fit keeps the artwork ratio inside that box. ==================================================================== */ .elementskit-nav-identity-panel .elementskit-nav-logo img { width: 170px; height: 40px; max-width: 170px; max-height: 40px; object-fit: contain; object-position: left center; }