/* Theme Name: Industrie Child Theme URI: https://demo.rstheme.com/wordpress/industrie/ Description: Industrie Child Author: RSTheme Author URI: http://rstheme.com Template: industrie Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready */ /* ===================================================================== Distronix customizations ===================================================================== */ /* --- Header: remove the leftover demo "Get In Touch" button --- */ #rs-header .elementor-widget-rs-button { display: none !important; } /* --- Header: bigger logo, single logo, always centered --- */ #rs-header .hfe-site-logo-container img { height: 54px !important; max-height: 54px !important; width: auto !important; } /* both default & sticky logo are the same Distronix mark – show one */ #rs-header .rs___sticky-logo { display: none !important; } #rs-header .rs___default-logo { display: inline-block !important; } /* the logo cell shipped on a grey (#F7F7F7) block; unify the whole header bar to the same white as the menu row */ #rs-header .elementor-element-d25acbf, #rs-header .elementor-element-64a7697 { background-color: #ffffff !important; } /* logo column: drop the 30px left/right padding baked into the Elementor container (--padding-left / --padding-right) so the lockup sits flush */ #rs-header .elementor-element-64a7697 { --padding-left: 0px !important; --padding-right: 0px !important; } /* logo column stays left of the menu; the lockup is centered in its brand block */ #rs-header .elementor-element-64a7697, #rs-header .hfe-site-logo, #rs-header .hfe-site-logo-container { /* justify-content: space-around !important; */ text-align: center !important; } /* single-row header on desktop: logo block, centered nav, and centered actions (the demo ships the logo on its own centered row above the menu — we collapse those two rows into one and align the brand lockup cleanly) */ @media (min-width: 1025px) { #rs-header .header-inner { padding-top: 0 !important; } /* Three even sections — logo · nav · button — spread with space-around. In the DOM the nav group and the button group are nested together inside the f4d4185 wrapper, so we flatten that wrapper with display:contents to promote them into direct flex children of the header row, sitting alongside the logo. Result: three balanced, evenly-spaced blocks across the full width. */ #rs-header .elementor-element-d25acbf { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-around !important; column-gap: 20px; } #rs-header .elementor-element-f4d4185 { display: contents !important; } /* each of the three sections sizes to its own content */ #rs-header .elementor-element-64a7697, #rs-header .elementor-element-9ad7d6e, #rs-header .elementor-element-6b4c2a3 { width: auto !important; flex: 0 0 auto !important; justify-content: center !important; } #rs-header .hfe-site-logo, #rs-header .hfe-site-logo-container { justify-content: center !important; text-align: center !important; } } /* --- Header: cleaner alignment + navy menu text --- */ #rs-header .hfe-nav-menu a.hfe-menu-item, #rs-header .hfe-nav-menu a.hfe-sub-menu-item, #rs-header .hfe-nav-menu .sub-arrow, #rs-header .menu-area .navbar ul li a, #rs-header .menu-sticky.sticky .menu-area .navbar ul li a { color: #123b5a !important; } #rs-header .hfe-nav-menu li.current-menu-item > a.hfe-menu-item, #rs-header .hfe-nav-menu li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item, #rs-header .hfe-nav-menu a.hfe-menu-item:hover, #rs-header .hfe-nav-menu a.hfe-menu-item:focus, #rs-header .hfe-nav-menu a.hfe-menu-item.highlighted, #rs-header .hfe-nav-menu a.hfe-sub-menu-item:hover, #rs-header .hfe-nav-menu a.hfe-sub-menu-item:focus, #rs-header .hfe-nav-menu a.hfe-sub-menu-item.highlighted, #rs-header .menu-area .navbar ul li.current-menu-ancestor > a, #rs-header .menu-area .navbar ul li.current_page_item > a, #rs-header .menu-area .navbar ul li.active > a, #rs-header .menu-area .navbar ul li:hover > a { color: #54c1bf !important; } #rs-header .hfe-nav-menu nav.border-tops > ul > li.current-menu-ancestor > div > a::before, #rs-header .hfe-nav-menu nav.border-tops > ul > li.current_page_item > div > a::before, #rs-header .hfe-nav-menu nav.border-tops > ul > li.current_page_item > a::before, #rs-header .hfe-nav-menu nav.border-tops > ul > li > div > a:hover::before, #rs-header .hfe-nav-menu nav.border-tops > ul > li > a:hover::before { background-color: #54c1bf !important; } #rs-header .hfe-search-icon-toggle, #rs-header .hfe-search-icon-toggle i, #rs-header .hfe-search-icon-toggle i:before, #rs-header .rs-offcanvas-area .nav-expander, #rs-header .rs-offcanvas-area .nav-expander i, #rs-header .rs-offcanvas-area .nav-expander svg, #rs-header .rs-offcanvas-area .nav-expander svg path { color: #123b5a !important; fill: #123b5a !important; stroke: #123b5a !important; } #rs-header .hfe-search-icon-toggle:hover, #rs-header .hfe-search-icon-toggle:hover i, #rs-header .hfe-search-icon-toggle:hover i:before, #rs-header .rs-offcanvas-area .nav-expander:hover, #rs-header .rs-offcanvas-area .nav-expander:hover i, #rs-header .rs-offcanvas-area .nav-expander:hover svg, #rs-header .rs-offcanvas-area .nav-expander:hover svg path { color: #54c1bf !important; fill: #54c1bf !important; stroke: #54c1bf !important; } /* ===================================================================== Header cleanup — drop the search icon + desktop hamburger, remove the nav divider line, and let the row align cleanly (logo · nav · button). The hamburger is kept ONLY on mobile/tablet: there the menu is hidden-mobile with dropdown "none", so the off-canvas panel is the sole route to navigation — removing it outright would strand mobile visitors. ===================================================================== */ /* Search: removed at every breakpoint. */ #rs-header .elementor-widget-hfe-search-button { display: none !important; } /* Nav divider: Elementor paints the 1px left border on the widget's INNER .elementor-widget-container (not the outer .elementor-element-749b284), which is why the earlier border-left reset missed it. Clear it here. The same container also carries a 40px left margin (Elementor advanced- margin setting) that pushes the first "Home" item away from the logo — zero it out too so the nav sits flush. */ #rs-header .elementor-element-749b284 > .elementor-widget-container { margin-left: 0 !important; border: 0 !important; padding-left: 0 !important; } /* Off-canvas hamburger: hidden on desktop, preserved on mobile/tablet. */ @media (min-width: 1025px) { #rs-header .elementor-widget-rsoffcanvas { display: none !important; } } @media (min-width: 1025px) { #rs-header .elementor-element-d25acbf > .elementor-container { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; column-gap: 30px; } #rs-header .elementor-element-64a7697 > .elementor-widget-wrap, #rs-header .elementor-element-f4d4185 > .elementor-widget-wrap { display: flex !important; align-items: center !important; align-content: center !important; flex-wrap: nowrap !important; } #rs-header .elementor-element-f4d4185 > .elementor-widget-wrap { justify-content: space-between !important; gap: 28px; } #rs-header .elementor-element-f4d4185 > .elementor-widget-wrap > .elementor-element { width: auto !important; margin-bottom: 0 !important; } #rs-header .hfe-nav-menu, #rs-header .hfe-nav-menu nav, #rs-header .hfe-nav-menu nav > ul, #rs-header .hfe-nav-menu nav > ul > li, #rs-header .hfe-has-submenu-container, #rs-header .menu-area .navbar, #rs-header .menu-area .navbar .navbar-menu > ul, #rs-header .elementor-element-9ad7d6e, #rs-header .elementor-element-6b4c2a3, #rs-header .row-table, #rs-header .col-cell.header-logo, #rs-header .col-cell.menu-responsive, #rs-header .col-cell.header-quote { display: flex; align-items: center; } #rs-header .elementor-element-9ad7d6e { flex: 0 0 auto !important; width: auto !important; justify-content: center !important; } #rs-header .elementor-element-749b284 { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; } #rs-header .elementor-element-6b4c2a3 { flex: 0 0 auto !important; width: auto !important; justify-content: center !important; gap: 28px; } #rs-header .elementor-element-6b4c2a3 > .elementor-element, #rs-header .elementor-element-0ed5b9d, #rs-header .elementor-element-406cd36, #rs-header .elementor-element-56d3be4 { margin: 0 !important; } #rs-header .hfe-nav-menu nav > ul { column-gap: 2px; } #rs-header .hfe-nav-menu nav > ul > li > a, #rs-header .hfe-nav-menu nav > ul > li > .hfe-has-submenu-container > a, #rs-header .menu-area .navbar .navbar-menu > ul > li > a { display: inline-flex; align-items: center; line-height: 1.2; } #rs-header .col-cell.menu-responsive { justify-content: flex-end; flex: 1 1 auto; } #rs-header .distronix-demo-btn { margin: 0 0 0 4px; } } /* ===================================================================== Mobile / tablet header — collapse the two stacked rows into one. The demo header stacks the brand row above the menu row, which is the right call on desktop (the block above flattens them there). Below 1025px it wastes the screen: the menu widget is `elementor-hidden-tablet` and the social icons moved to the top bar, so the second row renders 150px tall to hold a single 21px hamburger — measured at 390px, the logo row is 74px, the menu row 70px, plus a 6px flex gap, for a 193px header before any content is visible. The nav group (9ad7d6e) is the subtler half of the waste: it computes to 0px tall — both its children are hidden — yet it is still a flex child claiming half the row, which is what pins the hamburger to the far edge of its own line instead of letting it sit beside the logo. So for this range: flip the row container from column to row, drop the empty nav group out of the flow, and let the two remaining pieces sit on one line — logo left, hamburger right, the conventional mobile arrangement. Header goes 193px -> 117px, and the 54px logo is untouched. The breakpoint matches Elementor's own tablet breakpoint (1024px), so this switches over exactly where `elementor-hidden-tablet` hides the menu — the two can never disagree about which layout is in force. ===================================================================== */ @media (max-width: 1024px) { #rs-header .elementor-element-d25acbf { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding-left: 20px !important; /* mirrors the 20px already on the hamburger side */ } /* both groups shrink to their content instead of each taking a full row */ #rs-header .elementor-element-64a7697, #rs-header .elementor-element-f4d4185 { width: auto !important; flex: 0 0 auto !important; } /* empty on this breakpoint: menu is hidden-tablet, social live in the top bar */ #rs-header .elementor-element-9ad7d6e { display: none !important; } /* the logo hugs the left edge rather than centring in a full-width row */ #rs-header .elementor-element-64a7697, #rs-header .hfe-site-logo, #rs-header .hfe-site-logo-container { justify-content: flex-start !important; text-align: left !important; } /* f4d4185 keeps its own right padding; no extra offset from the group inside it */ #rs-header .elementor-element-6b4c2a3 { flex: 0 0 auto !important; width: auto !important; } } /* ===================================================================== Header top bar ("section before header") — Swap Sheet §1 Rendered by distronix_render_topbar() on the theme's `hfe_topbar` hook. ===================================================================== */ .distronix-topbar { background: #0d2436; color: #cdd8e3; font-size: 13px; line-height: 1.4; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .distronix-topbar .dx-topbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 22px; min-height: 42px; padding: 6px 0; } .distronix-topbar .dx-topbar-left, .distronix-topbar .dx-topbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; } .distronix-topbar .dx-tb-item, .distronix-topbar .dx-tb-cities { display: inline-flex; align-items: center; gap: 7px; color: #cdd8e3; white-space: nowrap; transition: color .2s ease; } .distronix-topbar a.dx-tb-item:hover { color: #fff; } .distronix-topbar .dx-tb-item i { color: #54c1bf; font-size: 15px; line-height: 1; } .distronix-topbar .dx-tb-sep { color: rgba(205, 216, 227, 0.35); } .distronix-topbar .dx-tb-cities { color: #9fb0c0; letter-spacing: .2px; } .distronix-topbar .dx-tb-social { display: inline-flex; align-items: center; gap: 6px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.12); } .distronix-topbar .dx-tb-social a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #cdd8e3; background: rgba(255, 255, 255, 0.06); transition: background .2s ease, color .2s ease; } .distronix-topbar .dx-tb-social a:hover { background: #54c1bf; color: #0d2436; } .distronix-topbar .dx-tb-social i { font-size: 14px; line-height: 1; } /* Social icons now live in the top bar → hide the ones in the menu row */ #rs-header .elementor-element-240f55d { display: none !important; } /* Collapse the top bar down to the essentials on small screens */ @media (max-width: 991px) { .distronix-topbar { font-size: 12px; } /* drop the address block; keep phone, email + social centred */ .distronix-topbar .dx-topbar-left { display: none; } .distronix-topbar .dx-tb-email span { display: none; } .distronix-topbar .dx-topbar-inner { justify-content: center; gap: 4px 16px; } } /* ===================================================================== Sticky behaviour with the new top bar Make the whole header block — the dark contact bar AND the menu row — stick to the top of the viewport as a single unit. We promote #rs-header itself to position:sticky and keep the inner Elementor header in normal flow at all times, neutralising the theme's default behaviour (which, on scroll, fixes only the menu row and lets the contact bar scroll away). ===================================================================== */ /* position:sticky needs a root that is NOT itself a scroll container. The theme sets `overflow-x: hidden` on html/body, which (per spec) forces overflow-y to `auto` and establishes a scrollport — silently killing sticky. `overflow-x: clip` clips the same horizontal overflow WITHOUT creating a scroll container, so the header can stick. */ html, body { overflow-x: clip !important; } #rs-header.single-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 999; } /* keep the inner menu row attached to the contact bar in every state (the theme fixes it to the viewport on scroll, which would detach it) */ #rs-header.single-header header.elementor-element { position: relative !important; top: 0 !important; } /* the theme's JS reserves space for its would-be fixed menu via an inline margin-top on the inner wrapper; with the header kept in flow that space is unwanted and would open a gap — zero it out in every state */ #rs-header.single-header .header-inner div.elementor { margin-top: 0 !important; } /* ===================================================================== Header CTA — "Request a Demo" button (Swap Sheet §1) A real Elementor button widget lives in the header's right-hand group; these rules give it the Distronix teal treatment and hide it on mobile where the off-canvas menu takes over. ===================================================================== */ #rs-header .distronix-demo-btn { margin: 0; } #rs-header .distronix-demo-btn .elementor-button, #rs-header .distronix-demo-btn a.elementor-button { display: inline-flex; align-items: center; font-family: var(--dx-font-secondary) !important; /* Inter, not the Oswald button face */ background-color: #54c1bf; color: #ffffff; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .3px; padding: 14px 28px; border: 0; transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } #rs-header .distronix-demo-btn .elementor-button:hover { background-color: #123b5a; color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 59, 90, 0.35); } #rs-header .distronix-demo-btn .elementor-button .elementor-button-text { color: inherit; } @media (max-width: 1024px) { #rs-header .distronix-demo-btn { display: none !important; } } /* ===================================================================== Hero slider — full-width dark banner (Swap Sheet §2) The Revolution Slider import supplies the Section 2 slide copy; these rules pull its demo-orange controls into the Distronix brand palette. ===================================================================== */ .elementor-widget-slider_revolution .rs-button.btn-robotics .rs-btn { background: #54c1bf !important; background-color: #54c1bf !important; color: #123b5a !important; } /* Carousel (Revolution Slider) button text uses Inter, not the Oswald face */ .elementor-widget-slider_revolution .rs-button .rs-btn, .elementor-widget-slider_revolution .rs-btn { font-family: var(--dx-font-secondary) !important; } .elementor-widget-slider_revolution .rs-button.btn-robotics .rs-btn:before { background: rgba(18, 59, 90, 0.14) !important; background-color: rgba(18, 59, 90, 0.14) !important; } .elementor-widget-slider_revolution .rs-button.btn-robotics .rs-btn:hover, .elementor-widget-slider_revolution .rs-button.btn-robotics .rs-btn:focus { background: #123b5a !important; background-color: #123b5a !important; color: #ffffff !important; } .elementor-widget-slider_revolution .rs-slider-video-ani .rs-video .popup-videos i { background: #54c1bf !important; background-color: #54c1bf !important; color: #123b5a !important; } .elementor-widget-slider_revolution .rs-slider-video-ani .rs-video .popup-videos:hover i, .elementor-widget-slider_revolution .rs-slider-video-ani .rs-video .popup-videos:focus i { background: #123b5a !important; background-color: #123b5a !important; color: #ffffff !important; } .elementor-widget-slider_revolution .rs-slider-video-ani .rs-video .popup-videos:before { background: rgba(84, 193, 191, 0.35) !important; background-color: rgba(84, 193, 191, 0.35) !important; } .elementor-widget-slider_revolution .metis_copy96_copy22.tparrows { background: #54c1bf !important; } .elementor-widget-slider_revolution .metis_copy96_copy22.tp-rightarrow, .elementor-widget-slider_revolution .metis_copy96_copy22.tparrows.rs-touchhover { background: rgba(84, 193, 191, 0.4) !important; } .elementor-widget-slider_revolution .metis_copy96_copy22.tparrows.tp-rightarrow.rs-touchhover { background: #54c1bf !important; } /* --- Orange bg-image feature sections -> navy primary --- */ .elementor-element-a436b5a, /* "Why Choose" section */ .elementor-element-d11db53 { /* "Have any Question?" contact form */ background-image: none !important; background-color: #123b5a !important; } #scrollUp i { background-color: #0d2436 !important; } /* ===================================================================== Project typography — Oswald (primary) + Inter (secondary) --------------------------------------------------------------------- Oswald is the primary/display face: headings, section titles, nav, buttons, counters and other brand surfaces. Inter is the secondary face for readable body copy, lists, tables and form fields. Fonts are loaded from Google in functions.php (`distronix-fonts`). Rules use !important to win over the theme's hardcoded "Space Grotesk" (assets/css/default.css) and Elementor's per-widget font settings. They deliberately target TEXT elements only — never , .fa*, .ri-*, remixicon, .eicon or SVG — so icon fonts keep their own family. (Icon glyphs set their own font-family, so a text parent set to Inter/Oswald never cascades onto the icon element itself.) ===================================================================== */ :root { --dx-font-primary: "Oswald", "Arial Narrow", sans-serif; /* headings / display */ --dx-font-secondary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* body / UI */ } /* ---- Secondary (Inter): body copy, UI and form text ---- */ body, button, input, select, optgroup, textarea, p, ul, ol, li, dd, dt, blockquote, cite, q, caption, figcaption, label, small, address, table, thead, tbody, th, td, .entry-content, .entry-content p, .entry-content li, .post-desc, .post-meta, .meta, .widget, .widget p, .widget li, .widget a, .elementor-widget-text-editor, .elementor-widget-text-editor .elementor-widget-container, .elementor-text-editor, .elementor-widget-testimonial, .elementor-testimonial__text, .elementor-icon-list-text, .elementor-tab-content, .elementor-post__excerpt, .elementor-post__excerpt p, .elementor-field-group input, .elementor-field-group textarea, .wpcf7 input, .wpcf7 textarea, .woocommerce, .woocommerce-page, .woocommerce p, .woocommerce li, .distronix-topbar, /* Header navigation now uses Inter (moved off the Oswald display face) */ #rs-header .hfe-nav-menu a.hfe-menu-item, #rs-header .hfe-nav-menu a.hfe-sub-menu-item, #rs-header .menu-area .navbar ul li a, .rs-offcanvas-area nav.right_menu_togle ul.menu li a { font-family: var(--dx-font-secondary) !important; } /* ---- Primary (Oswald): headings, titles, actions, stats ---- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .elementor-heading-title, .elementor-widget-heading .elementor-heading-title, .sec-title, .section-title, .sub-title, .rs-subtitle, .subtitle, .widget-title, .widget .widget-title, .widget-area .widget-title, .rs-title, .title, .title-inner, .box-title, .elementor-icon-box-title, .elementor-image-box-title, .elementor-counter-number, .elementor-counter-title, .elementor-accordion-title, .elementor-toggle-title, .elementor-price-table__title, .elementor-price-list__title, /* .elementor-button, .elementor-button .elementor-button-text, */ .rs-btn, .rs-button .rs-btn, .wp-block-button__link { font-family: var(--dx-font-primary) !important; } .elementor-29660 .elementor-element.elementor-element-4411ccf .hfe-site-logo .hfe-site-logo-container img { height: 50px !important; } /* ============================================================ Product detail sidebar — "Our Products" menu. The arrow icon is absolutely positioned at right:20px; reserve space for it and let long product names wrap so the text never runs under / overwrites the arrow. ============================================================ */ .elementor-element-e18780c .hfe-nav-menu .hfe-menu-item { position: relative; display: block; white-space: normal; /* allow long titles to wrap */ line-height: 1.4; padding-right: 46px !important; /* clear of the arrow at right:20px */ word-break: break-word; } .elementor-element-e18780c .hfe-nav-menu__layout-vertical .rs__menu_sp_dyc { right: 18px; } /* ============================================================ Header "Products" mega menu — hover opens all products in a single wide panel laid out in three columns. Desktop only; on tablet/mobile the off-canvas menu keeps its normal accordion. ============================================================ */ @media (min-width: 1025px) { #rs-header .hfe-nav-menu #menu-item-29690.rs-mega-menu > .sub-menu { width: 1280px !important; max-width: calc(100vw - 40px); left: 50% !important; right: auto !important; transform: translateX(-50%); padding: 22px 26px !important; column-count: 3; column-gap: 32px; } #rs-header .hfe-nav-menu #menu-item-29690.rs-mega-menu > .sub-menu > li { display: block !important; width: 100% !important; float: none !important; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } #rs-header .hfe-nav-menu #menu-item-29690.rs-mega-menu > .sub-menu > li > a.hfe-sub-menu-item { white-space: normal; line-height: 1.3; font-size: 12px !important; } /* hide the per-item right arrow inside the mega panel — it reads cleaner as a plain list */ #rs-header .hfe-nav-menu #menu-item-29690.rs-mega-menu > .sub-menu > li .rs__menu_sp_dyc { display: none; } } /* ============================================================ BinSense (page 30577) — set the FAQ ("Questions? You're covered") apart from the "Proven at Scale" section above it: add space + a divider before the heading, and tighten the gap after it. ============================================================ */ .elementor-30577 .elementor-element-540c6de { margin-top: 60px !important; padding-top: 45px !important; border-top: 1px solid #e2e5ea; } .elementor-30577 .elementor-element-540c6de .elementor-element-f3cbddc { margin-bottom: 4px !important; } .elementor-30577 .elementor-element-540c6de .elementor-element-f3cbddc .elementor-heading-title { margin-bottom: 0 !important; } /* collapse the empty intro text-editor that sat between heading and accordion */ .elementor-30577 .elementor-element-540c6de .elementor-element-a4f6e8e { display: none !important; } /* ===================================================================== * Header dropdown fix — fly-out arrow vs. long sub-category titles. * Keep the arrow clear of the label AND never let text spill out of the * panel: labels wrap instead of overflowing, the arrow is a fixed-size * flex child pinned right, and its -4px nudge is cancelled. * ===================================================================== */ .hfe-nav-menu .sub-menu a.hfe-sub-menu-item { white-space: normal; /* wrap long labels — never overflow the panel */ overflow-wrap: anywhere; gap: 16px; /* clear space between label and arrow */ padding-right: 16px; /* breathing room at the panel edge */ text-align: left; } .hfe-nav-menu .parent-has-child a.hfe-sub-menu-item .sub-arrow { flex: 0 0 auto; /* arrow keeps its box; never sits on the text */ margin-left: auto; } .hfe-nav-menu .parent-has-child a.hfe-sub-menu-item .sub-arrow i { right: 0; /* cancel the -4px nudge toward the label */ } .hfe-nav-menu .sub-menu { min-width: 300px; /* a touch wider so most labels sit on one line */ max-width: 340px; /* but bounded, so the panel never gets huge */ } /* ===================================================================== * Product detail pages — temporarily hide two sections. * * Scope: every child page of "Our Products" (page 25000), i.e. all 17 * product detail pages at /products// — they were duplicated from * one template, so they share Elementor element IDs. The body class * `parent-pageid-25000` keeps these rules off every other page, since * those shared IDs are not unique site-wide. * * - 3f43db2 "Download Brochures" — heading + rsbrochures widget. * - 7c2a8d9 the field/stats band — heading + blurb + pie chart, plus * the divider that closes it (all inside this container, so * no orphan rule is left behind). Its heading is worded per * product: "In the field", "On the grid", "In the yard", * "Across the network", "On the bench", and so on. * * Hidden rather than deleted, per "for now" — the content is still in * Elementor and comes back by removing this block. * ===================================================================== */ body.parent-pageid-25000 .elementor-element-3f43db2, body.parent-pageid-25000 .elementor-element-7c2a8d9 { display: none !important; } /* ===================================================================== * Home "Our Team" carousel (Team Style 12) — stop the slick viewport * from cropping the member card. * * The name/role/social card is absolutely positioned and hangs 66px below * the photo (`bottom: -66px`). The widget's own stylesheet reserves that * room with * .rs-team-slider.team-slider-style12 .slick-list { padding-bottom: 125px } * but the parent theme wipes it out globally, with !important, in * industrie/assets/css/default.css: * .rsaddon-unique-slider .rs-addon-slider .slick-list { padding: 0 !important } * With the reservation gone and slick's own `overflow: hidden` still in * force, the viewport ends flush with the photo: everything below the * name — the job title and the entire social-icon row — is clipped off. * Measured at 1600/1440/1200/1024/768/480px: card 129px tall, 66px of it * outside the list on every breakpoint. * * Fixed in two layers so it holds however tall a card gets: * * 1. Clip on one axis only. Hiding the horizontal overflow is all slick * actually needs (it keeps the off-screen slides out of view); the * vertical clip is collateral damage. `overflow-x: clip` + * `overflow-y: visible` keeps the first and drops the second. It has * to be `clip` rather than `hidden` — `hidden` on one axis forces the * other to `auto`, which re-creates a scrollport and crops the card * again (the same reason html/body use `clip` for the sticky header * above). `overflow: hidden` is restated first so pre-16 Safari, which * ignores `clip`, still lands on the old behaviour rather than none. * * 2. Put the reserved space back, so the card also occupies layout and * can never collide with the section beneath it. 90px = the 66px * overhang plus slack; it doubles as the standalone fix for browsers * that dropped the `clip` in step 1. * ===================================================================== */ .rs-team-slider.team-slider-style12 .slick-list { overflow: hidden; overflow-x: clip; overflow-y: visible; padding-bottom: 90px !important; margin-bottom: 0 !important; } /* ===================================================================== * Team carousels — recolour the mobile navigation dots to the brand teal. * * Below 768px the widget's own slick config force-enables dots (the * `breakpoint: 768` responsive block sets `dots: true`, `arrows: false`), * regardless of the widget's "Dots" switch — which is off for the home * "Our Team" slider. There is no Elementor control output for their colour * on these widgets, so the dots fall back to the addon default in * industrie-addons/assets/css/rsaddons.css: * .rs-addon-slider .slick-dots li button { border: 1px solid #C6C1C2 } * .rs-addon-slider .slick-dots li button:hover, * .rs-addon-slider .slick-dots li.slick-active button * { background/border: #EA5501 } * — the theme's orange, which is not ours. * * Only the filled (hover/active) state is orange; the idle dot is the neutral * grey outline, so that one is left alone. Scoped to `.rs-team-slider` so * other sliders on the site keep the stock colour, and matched one class * deeper than the addon rule so it wins on specificity — no !important needed, * and the Elementor colour controls can still override it if they are ever set. * ===================================================================== */ .rs-team-slider .rs-addon-slider .slick-dots li button:hover, .rs-team-slider .rs-addon-slider .slick-dots li button:focus, .rs-team-slider .rs-addon-slider .slick-dots li.slick-active button { background: #54C1BF; border-color: #54C1BF; } /* ===================================================================== * Page banner breadcrumb — sit the "›" separator on the text's centre line. * * The addon draws the separator as an absolutely positioned ::after on each * crumb, pinned to `top: 0` of the crumb box and set 19px against 15px crumb * text. Pinned to the top of a box that the bigger glyph itself makes taller, * it rides above the words ("Home ˃ About Us"). * * Anchor it to the middle of the crumb instead and pull it back by half its * own height: that stays centred no matter what the two font sizes are, so it * survives any typography change from the Elementor controls. `line-height: 1` * makes the glyph box exactly as tall as the glyph, which is what the -50% * is measured against. The flex row centres its items rather than stretching * them, so every crumb shares one centre line to begin with. * ===================================================================== */ .breadcrumb-area .breadcrumbs-inner { align-items: center; } .breadcrumb-area.style3 span:after { top: 50%; transform: translateY(-50%); line-height: 1; } /* ===================================================================== * Blog sidebar — recolour the leftover demo orange to Distronix teal. * * The blog / single-post right sidebar (.bs-sidebar) still carried the * theme's demo orange (#EA5501) in the two places the site-wide rebrand * never reached, because they live in the parent theme's default.css and * nothing had overridden them for the sidebar: * * • the 4×15px accent bar above every widget title * .bs-sidebar .widget::before (default.css:1752) * • every sidebar link hover — Recent Posts titles, Archives, * Categories, Recent Comments * .bs-sidebar ul a:hover (default.css:1795) * .bs-sidebar .widget_categories ...:hover(default.css:1806) * * On a site that is otherwise teal (#54c1bf) + navy, that orange was the * odd one out. Everything here is scoped to .bs-sidebar so only the * blog/single sidebar is affected. * ===================================================================== */ /* Accent bar above each widget title: orange -> brand teal. */ .bs-sidebar .widget::before { background: #54c1bf !important; } /* Link hovers across the sidebar widgets land on the brand teal. * The Recent Posts titles are the core latest-posts block * (.wp-block-latest-posts__post-title); it is called out explicitly in * addition to the general list-link rule so the teal hover is guaranteed * regardless of which rule wins. */ .bs-sidebar .wp-block-latest-comments a:hover, .bs-sidebar ul a:hover, .bs-sidebar .widget_categories ul li a:hover, .bs-sidebar .wp-block-latest-posts__post-title:hover { color: #54c1bf !important; } /* ===================================================================== * Blog sidebar — widget spacing + card polish. * * The parent theme ships a global `.widget { margin: 0 0 2em; }` * (industrie/style.css:568), but that root stylesheet is never enqueued * on this build — the theme only loads assets/css/default.css, whose * `.bs-sidebar .widget` rule sets background + padding but NO bottom * margin. So the sidebar boxes stacked flush against each other with no * gap (only "Current Affair" had spacing, from its own .recent-widget * rule). On the live SiteGround site the missing rule was combined in, so * it looked spaced there but not here. * * Restore that 2em rhythm for every sidebar widget, and give the boxes a * soft rounded-card treatment (subtle navy-tinted shadow) so the column * reads as a tidy stack of cards rather than one flat grey slab. The teal * accent bar (.widget::before) sits at left:30px, clear of the rounded * corners, so it is unaffected. * ===================================================================== */ .bs-sidebar .widget { margin: 0 0 2em; } .bs-sidebar .widget:last-child { margin-bottom: 0; } .bs-sidebar .widget .widget-title { color: #123b5a; } /* ===================================================================== * Home "Deployments" slider — whole card is the link. * * The plugin template (portfolio-slider/style3.php) only wraps the card * TITLE in an anchor, so the image and the whitespace of the content box * were dead to a click even though the card reads as one clickable object. * * functions.php (`distronix_deployment_card_links`) injects a transparent * overlay anchor as the first child of each card and tags the card with * `.distronix-linked-card`; this stretches that anchor over the card. * * Layering note: the content box is `position: relative; z-index: 4` (set * by Elementor from the widget's own controls) and the image wrapper is * `z-index: -1` (plugin CSS), so the overlay sits at z-index 5 to clear * both. The card itself only gets `position: relative` — no z-index — so * it does not become a stacking context and the image keeps painting * exactly where it did before. * ===================================================================== */ .rs-portfolio-slider .portfolio-item.distronix-linked-card { position: relative; } .rs-portfolio-slider .portfolio-item.distronix-linked-card .distronix-card-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; /* No visual of its own — the card underneath is the design. */ background: transparent; border-radius: 15px; } /* The overlay covers the title anchor, so `.p-title a:hover` can never * fire. Drive the same teal hover from the card instead, so hovering * anywhere on the card still lights the title up. */ .rs-portfolio-slider .portfolio-item.distronix-linked-card:hover .p-title a { color: #54c1bf; } /* Keyboard focus lands on the real (title) link, which the overlay hides. * Put the focus ring on the whole card so it stays visible. */ .rs-portfolio-slider .portfolio-item.distronix-linked-card:focus-within { outline: 2px solid #54c1bf; outline-offset: 6px; border-radius: 15px; } /* The category tag is plain text now (functions.php strips its link), so * keep it from advertising itself as clickable. */ .rs-portfolio-slider .portfolio-item.distronix-linked-card .p-category { cursor: default; }