/* * Theme Name: HE Child - Aplitec Informatica * Description: Child theme desenvolupat per Aplitec Informatica * Author: Aplitec Informatica * Template: hello-elementor * Version: 1.0.0 * Text Domain: hello-elementor-child * */ /* Contact CTA button - outline hover style, text/arrow swap animation */ .btn-cta-hover .elementor-button { position: relative; overflow: hidden; border: 2px solid transparent; box-sizing: border-box; transition: background-color 0.25s ease, border-color 0.25s ease, border-radius 0.25s ease, transform 0.1s ease; } .btn-cta-hover .elementor-button:hover { border-color: rgb(192, 57, 43); border-radius: 0 !important; } .btn-cta-hover .elementor-button:active { transform: scale(0.97); } .btn-cta-hover .elementor-button-content-wrapper { position: relative; } .btn-cta-hover .elementor-button-text { position: relative; z-index: 1; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), color 0.25s ease; } .btn-cta-hover .elementor-button:hover .elementor-button-text { transform: translateX(26px); } .btn-cta-hover .elementor-button-icon { position: relative; z-index: 1; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .btn-cta-hover .elementor-button:hover .elementor-button-icon { transform: translateX(40px); } .btn-cta-hover .elementor-button-icon svg path[fill="#fff"] { transition: fill 0.25s ease; } .btn-cta-hover .elementor-button::after { content: ""; position: absolute; top: 50%; left: -30px; width: 16px; height: 16px; background-color: #fff; -webkit-mask-image: url('https://globalpolimer.com/wp-content/uploads/2026/08/arrow-r-white.svg'); mask-image: url('https://globalpolimer.com/wp-content/uploads/2026/08/arrow-r-white.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transform: translateY(-50%); transition: left 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.25s ease; pointer-events: none; } .btn-cta-hover .elementor-button:hover::after { left: 22px; } /* Global fix: no underline on any Elementor button */ .elementor-widget-button .elementor-button, .elementor-widget-button .elementor-button-link, .elementor-widget-button .elementor-button:hover, .elementor-widget-button .elementor-button:focus, .elementor-widget-button .elementor-button:active { text-decoration: none !important; } /* Whole card clickable via stretched link; inner button stays interactive on top */ .card-link-wrap { position: relative; } .card-link-wrap .elementor-widget-html { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .card-link-wrap .card-stretched-link { display: block; width: 100%; height: 100%; } .card-link-wrap .elementor-widget-button { position: relative; z-index: 2; } /* Trigger CTA button hover when hovering anywhere on the card wrap */ .card-link-wrap:hover .btn-cta-hover .elementor-button { border-color: rgb(192, 57, 43); border-radius: 0 !important; } .card-link-wrap:hover .btn-cta-hover .elementor-button-text { transform: translateX(26px); } .card-link-wrap:hover .btn-cta-hover .elementor-button-icon { transform: translateX(40px); } .card-link-wrap:hover .btn-cta-hover .elementor-button::after { left: 22px; } /* ======================================== Hero cards: adjustable diagonal shapes >>> TO CHANGE THE DIAGONAL: edit the --s value below <<< --s: 0px = no diagonal (rectangle) --s: 30px = subtle diagonal --s: 60px = medium (current) --s: 100px = pronounced >>> TO CHANGE VERTICAL OFFSET OF CARD 2: edit --card2-offset <<< --card2-offset: 0px = same level as card 1 --card2-offset: -40px = card 2 rises above card 1 (current) ======================================== */ .card-shape-left, .card-shape-right { --s: 60px; --card2-offset: -40px; position: relative; overflow: hidden; } .card-shape-left { clip-path: polygon( 0px 16.00px, 0.55px 11.86px, 2.14px 8.00px, 4.69px 4.69px, 8.00px 2.14px, 11.86px 0.55px, 16.00px 0px, calc(100% - var(--s) - 16.00px) 0px, calc(100% - var(--s) - 11.86px) 0.55px, calc(100% - var(--s) - 8.00px) 2.14px, calc(100% - var(--s) - 4.69px) 4.69px, calc(100% - var(--s) - 2.14px) 8.00px, calc(100% - var(--s) - 0.55px) 11.86px, calc(100% - var(--s)) 16.00px, 100% calc(100% - 16.00px), calc(100% - 0.55px) calc(100% - 11.86px), calc(100% - 2.14px) calc(100% - 8.00px), calc(100% - 4.69px) calc(100% - 4.69px), calc(100% - 8.00px) calc(100% - 2.14px), calc(100% - 11.86px) calc(100% - 0.55px), calc(100% - 16.00px) 100%, 16.00px 100%, 11.86px calc(100% - 0.55px), 8.00px calc(100% - 2.14px), 4.69px calc(100% - 4.69px), 2.14px calc(100% - 8.00px), 0.55px calc(100% - 11.86px), 0px calc(100% - 16.00px) ); } .card-shape-right { clip-path: polygon( 0px 16.00px, 0.55px 11.86px, 2.14px 8.00px, 4.69px 4.69px, 8.00px 2.14px, 11.86px 0.55px, 16.00px 0px, calc(100% - 16.00px) 0px, calc(100% - 11.86px) 0.55px, calc(100% - 8.00px) 2.14px, calc(100% - 4.69px) 4.69px, calc(100% - 2.14px) 8.00px, calc(100% - 0.55px) 11.86px, 100% 16.00px, 100% calc(100% - 16.00px), calc(100% - 0.55px) calc(100% - 11.86px), calc(100% - 2.14px) calc(100% - 8.00px), calc(100% - 4.69px) calc(100% - 4.69px), calc(100% - 8.00px) calc(100% - 2.14px), calc(100% - 11.86px) calc(100% - 0.55px), calc(100% - 16.00px) 100%, calc(var(--s) + 16.00px) 100%, calc(var(--s) + 11.86px) calc(100% - 0.55px), calc(var(--s) + 8.00px) calc(100% - 2.14px), calc(var(--s) + 4.69px) calc(100% - 4.69px), calc(var(--s) + 2.14px) calc(100% - 8.00px), calc(var(--s) + 0.55px) calc(100% - 11.86px), calc(var(--s)) calc(100% - 16.00px) ); transform: translateY(var(--card2-offset)); } /* Image layer (zooms on hover) — inherits background-image from Elementor */ .card-shape-left::before, .card-shape-right::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); z-index: 0; pointer-events: none; } .card-shape-left:hover::before, .card-shape-right:hover::before { transform: scale(1.04); } .card-shape-left > *, .card-shape-right > * { position: relative; z-index: 2; } /* Mobile: keep a small diagonal instead of squaring off completely - the clip-path polygon above already reads var(--s) for the diagonal size and rounds every corner, so shrinking --s (instead of clearing clip-path) keeps the same silhouette family, just subtler, and avoids re-deriving a whole separate shape for this breakpoint. */ @media (max-width: 767px) { .card-shape-left, .card-shape-right { --s: 24px; transform: none !important; } } /* Tablet (768-1024px): the description text widget can still run right up against the card's overflow:hidden edge - give it a bit of breathing room on the trailing side so it can never visually touch/clip against the boundary, on top of the site-wide width:100% fix above. */ @media (min-width: 768px) and (max-width: 1024px) { .card-shape-left .elementor-widget-text-editor, .card-shape-right .elementor-widget-text-editor { padding-right: 24px !important; box-sizing: border-box !important; } } /* ========================================================================== Home hero cards: keep both cards fully within the viewport on desktop The two hero cards (Sales Agency / Technical Consulting) had a fixed min-height of 600px. On smaller effective viewport heights (e.g. 125% browser zoom on a 1920x1080 screen) this pushed the bottom of the cards below the fold, forcing a scroll to see them completely. Making the height responsive to the real viewport height keeps both cards fully visible on screen regardless of zoom level or screen resolution, while preserving the original 600px look on normal/tall viewports. ========================================================================== */ @media (min-width: 1025px) { .elementor-14 .elementor-element.elementor-element-9f4448b { --min-height: min(600px, calc(100vh - 220px)) !important; } } /* ======================================== Reveal-from-center entrance animation (clip-path) Cards start collapsed at center point, then expand to the diagonal shape when scrolled into view. Triggered by JS adding .is-revealed via IntersectionObserver (see functions.php), which runs immediately and has a short safety fallback so it can never stay hidden. Only clip-path animates here — never transform — so it never conflicts with the --card2-offset positioning rule above. ======================================== */ .card-shape-left:not(.is-revealed), .card-shape-right:not(.is-revealed) { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); } .card-shape-left, .card-shape-right { transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .card-shape-right { transition-delay: 0.1s; } @media (prefers-reduced-motion: reduce) { .card-shape-left:not(.is-revealed), .card-shape-right:not(.is-revealed) { clip-path: none; } .card-shape-left, .card-shape-right { transition: none; } } /* ======================================== Sales Agency hero nav cards (Project development / Sheets & Profiles) Whole card is clickable (JS scrolls to the matching anchor, see functions.php). Hover style mirrors .btn-cta-hover: border radius 8→0, border color to Pomegranate, and the down-arrow swaps out downward while an identical arrow enters from above (vertical version of the CTA button's icon swap). ======================================== */ .nav-card-link { cursor: pointer; transition: border-color 0.25s ease, border-radius 0.25s ease; } .nav-card-link:hover { border-color: rgb(192, 57, 43) !important; border-radius: 0 !important; } .nav-card-link:hover .elementor-heading-title { color: rgb(192, 57, 43); } .nav-card-link .elementor-icon-wrapper { position: relative; overflow: hidden; } .nav-card-link .elementor-icon-wrapper svg { position: relative; z-index: 1; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .nav-card-link:hover .elementor-icon-wrapper svg { transform: translateY(60px); } .nav-card-link .elementor-icon-wrapper::after { content: ""; position: absolute; left: 50%; top: -60px; width: 50px; height: 50px; background-color: rgb(192, 57, 43); -webkit-mask-image: url('https://globalpolimer.com/wp-content/uploads/2026/08/arrow-r-white.svg'); mask-image: url('https://globalpolimer.com/wp-content/uploads/2026/08/arrow-r-white.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transform: translateX(-50%) rotate(90deg); transition: top 0.5s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; } .nav-card-link:hover .elementor-icon-wrapper::after { top: 5px; } /* ======================================== Technical Consulting — Project Management image block Widens the image column, crops the (portrait) photo to fill it via object-fit: cover instead of the default contain/full-height behaviour, and keeps the rounded corner only on the bottom-right, matching the row. ======================================== */ .pm-image-row { overflow: hidden; } .pm-text-col { flex: 1 1 0; } .pm-crop-image { flex: 0 0 45%; width: 45%; } @media (max-width: 767px) { .pm-crop-image { flex-basis: 100%; width: 100%; } } /* ======================================== Technical Solutions — Toggle cards (Fields of Expertise example) Single rounded border lives on the outer .toggle-card (overflow:hidden clips the title/content backgrounds to match its border-radius), which avoids the two-tone "cut corner" artifact from stacking separate borders on the child title/content elements. Title layout: text left, icon pinned to the right edge, in every state. ======================================== */ .toggle-card { overflow: hidden !important; border-radius: 8px !important; border: 2px solid #E8CFAF !important; transition: border-color 0.4s ease; } .toggle-card:hover, .toggle-card:has(.elementor-tab-title.elementor-active) { border-color: #C0392B !important; } .toggle-card .elementor-tab-title { display: flex !important; justify-content: space-between; align-items: center; text-align: left; border: none !important; border-radius: 0 !important; background-color: #FAFAFA !important; transition: background-color 0.4s ease; } .toggle-card .elementor-tab-title .elementor-toggle-title { color: #3D2216; transition: color 0.4s ease; } .toggle-card .elementor-tab-title .elementor-toggle-icon { color: #3D2216; transition: color 0.4s ease, transform 0.4s ease; } .toggle-card .elementor-tab-content { border: none !important; background-color: #FAFAFA !important; transition: background-color 0.4s ease; } /* Hover */ .toggle-card .elementor-tab-title:hover { background-color: transparent !important; } .toggle-card .elementor-tab-title:hover .elementor-toggle-title, .toggle-card .elementor-tab-title:hover .elementor-toggle-icon { color: #C0392B !important; } /* Active / open */ .toggle-card .elementor-tab-title.elementor-active { background-color: #C0392B !important; } .toggle-card .elementor-tab-title.elementor-active .elementor-toggle-title, .toggle-card .elementor-tab-title.elementor-active .elementor-toggle-icon { color: #ffffff !important; fill: #ffffff !important; } .toggle-card .elementor-tab-content.elementor-active { background-color: transparent !important; } /* Sticky main navigation header (all pages) */ #masthead { position: sticky !important; top: 0; z-index: 999; background-color: #ffffff; } /* Technical Consulting: sticky sub-navigation bar (Engineering Services / Technical Solutions / Project Experience) */ #tc-subnav { position: sticky; /* Was a hardcoded 89px (desktop header height) - on real mobile the header is shorter (~56px), leaving a visible gap of scrolled-past page content between the header and the sub-nav bar before it truly sticks flush underneath it. Use the JS-measured real header height instead, with 89px only as a fallback before JS runs. */ top: var(--gp-header-height, 89px); z-index: 900; background-color: #ffffff; } /* Elementor's own mobile setting for these 3 cards is flex-wrap:wrap, which drops the arrow icon onto its own line under the title as soon as the row doesn't fit at narrow widths. Force it to stay a single row (title + icon side by side) at every breakpoint - the title font-size already shrinks responsively, so there's no real need to wrap. */ /* Site-wide: any ".nav-card-link" card (title + arrow icon, used in the Technical Consulting sub-nav AND the Sales Agency "Project development" / "Sheets & Profiles" cards, and possibly elsewhere) should never wrap the icon onto its own line at narrow widths - Elementor's own mobile setting is flex-wrap:wrap, which is what causes it. */ .nav-card-link { flex-wrap: nowrap !important; } /* Same site-wide scope: the arrow icon is a fixed 50px everywhere, which is too large once cards stack in a single column on tablet/mobile. Scale it down responsively. */ @media (max-width: 1024px) { .nav-card-link .elementor-icon { width: 34px !important; height: 34px !important; font-size: 34px !important; } } @media (max-width: 767px) { .nav-card-link .elementor-icon { width: 28px !important; height: 28px !important; font-size: 28px !important; } } /* Sales Agency: "Project development" / "Sheets & Profiles" cards collapse to a single column below 767px but keep 0 gap, so they sit flush against each other with only their borders touching. Give them breathing room. */ @media (max-width: 767px) { .elementor-element-82d486c { row-gap: 20px !important; } } #tc-subnav.is-stuck .elementor-widget-text-editor { display: none; } #tc-subnav.is-stuck .elementor-widget-icon { transform: scale(0.55); transition: transform 0.2s ease; } #tc-subnav .elementor-widget-icon { transition: transform 0.2s ease; } #tc-subnav.is-stuck .nav-card-link { padding-top: 14px !important; padding-bottom: 14px !important; transition: padding 0.2s ease; } #tc-subnav .nav-card-link { transition: padding 0.2s ease; } /* Technical Consulting: sub-nav bar sizing. Base state = Elementor's own authored sizing (untouched, no override). Compact/shrunk sizing only applies once the bar is stuck (.is-stuck). */ #tc-subnav.is-stuck .elementor-widget-text-editor { display: none; } #tc-subnav.is-stuck .elementor-heading-title { font-size: 15px !important; line-height: 1.3 !important; } #tc-subnav.is-stuck .nav-card-link { padding: 10px 20px !important; min-height: 0 !important; height: auto !important; } #tc-subnav.is-stuck .elementor-icon { font-size: 20px !important; } /* Hover: Pomegranate text/icon color, matching the main navigation. The base (non-stuck) state keeps the inherited sliding-arrow animation from .nav-card-link (tuned for the 50px icon, so it works as-is here too). The .is-stuck state uses a smaller icon (20px), so its own copy of the slide animation is scaled down proportionally to avoid clipping. */ #tc-subnav .nav-card-link:hover .elementor-heading-title { color: rgb(192, 57, 43) !important; } #tc-subnav .nav-card-link:hover .elementor-icon { color: rgb(192, 57, 43) !important; } #tc-subnav.is-stuck .nav-card-link .elementor-icon-wrapper::after { width: 20px !important; height: 20px !important; top: -24px !important; } #tc-subnav.is-stuck .nav-card-link:hover .elementor-icon-wrapper::after { top: 2px !important; } #tc-subnav.is-stuck .nav-card-link:hover .elementor-icon-wrapper svg { transform: translateY(24px) !important; } /* [gp_projects_grid] shortcode: Projects portfolio grid (Technical Consulting + All Projects page) */ .gp-projects-grid { display: grid; grid-template-columns: repeat(var(--gp-columns, 3), 1fr); gap: 30px; width: 100%; } .gp-project-card { display: block; background: #fff; border: 2px solid #B85A2E; border-radius: 8px 8px 8px 0; overflow: hidden; text-decoration: none !important; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease; } .gp-project-card:hover { background-color: #E8CFAF; border-radius: 0; transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); } .gp-project-card__image { display: block; aspect-ratio: 16/9; overflow: hidden; background-color: #f2f2f2; } .gp-project-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .gp-project-card:hover .gp-project-card__image img { transform: scale(1.05); } .gp-project-card__body { display: block; padding: 20px 20px 56px; position: relative; } .gp-project-card__title { display: block; font-size: 19px; line-height: 1.3; margin: 0 0 8px; color: #3D2216; font-family: 'Space Grotesk', sans-serif; font-weight: 700; } .gp-project-card__excerpt { display: block; font-size: 14px; line-height: 1.4; color: #B85A2E; margin: 0 0 14px; } .gp-project-card__link { position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: rgb(192,57,43); text-decoration: none !important; } .gp-project-card__link:hover, .gp-project-card__link:focus, .gp-project-card__link-text { text-decoration: none !important; } .gp-project-card__link-text { position: relative; z-index: 1; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .gp-project-card:hover .gp-project-card__link-text { transform: translateX(-6px); } .gp-project-card__link-icon { position: relative; width: 16px; height: 16px; overflow: hidden; display: inline-block; transform: rotate(-90deg); flex-shrink: 0; } .gp-project-card__link-icon img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .gp-project-card:hover .gp-project-card__link-icon img { transform: translateY(24px); } .gp-project-card__link-icon::after { content: ""; position: absolute; left: 50%; top: -24px; width: 16px; height: 16px; background-color: rgb(192, 57, 43); -webkit-mask-image: url("https://globalpolimer.com/wp-content/uploads/2026/08/arrow-d-CTA.svg"); mask-image: url("https://globalpolimer.com/wp-content/uploads/2026/08/arrow-d-CTA.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transform: translateX(-50%); transition: top 0.5s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; } .gp-project-card:hover .gp-project-card__link-icon::after { top: 2px; } .gp-projects-pagination { margin-top: 36px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .gp-projects-pagination .page-numbers { padding: 8px 14px; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #3D2216; font-size: 14px; } .gp-projects-pagination .page-numbers.current { background: rgb(192,57,43); color: #fff; border-color: rgb(192,57,43); } .gp-projects-pagination .page-numbers:hover:not(.current) { border-color: rgb(192,57,43); color: rgb(192,57,43); } @media (max-width: 991px) { .gp-projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .gp-projects-grid { grid-template-columns: 1fr; } } /* [gp_projects_grid] "View all the projects" CTA card (8th grid slot) */ .gp-project-card--cta { display: flex; align-items: center; justify-content: center; text-decoration: none !important; padding: 20px; min-height: 100%; } .gp-project-card__cta-content { display: flex; align-items: center; gap: 10px; text-align: center; } .gp-project-card__cta-text { font-weight: 700; font-size: 17px; line-height: 1.3; color: rgb(192, 57, 43); font-family: 'Space Grotesk', sans-serif; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .gp-project-card--cta:hover .gp-project-card__cta-text { transform: translateX(-6px); } /* Technical Consulting: scroll-margin so anchor targets aren't hidden behind the sticky header + sticky sub-nav bar when scrolled to via click-to-scroll. */ #eng-services-section, #technical-solutions-section, #projects-portfolio-section, #engineering-projects, #project-management, #engineering-solutions, #production-control, #production-optimization, #software-implementation { scroll-margin-top: 235px; } /* Single Project pages: true masonry gallery (JS-packed columns, see gp_project_gallery_masonry_script). Each image keeps its real aspect ratio (no cropping) and is packed into whichever column is currently shortest, so there are never blank gaps regardless of mixed image heights. */ .single-projects .wp-block-gallery.has-nested-images { display: flex !important; align-items: flex-start; gap: 16px; } .single-projects .gp-masonry-col { display: flex; flex-direction: column; gap: 16px; flex: 1 1 0; min-width: 0; } .single-projects .wp-block-gallery.has-nested-images figure.wp-block-image { margin: 0 !important; width: 100% !important; max-width: 100% !important; display: block !important; } .single-projects .wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100%; height: auto; display: block; cursor: zoom-in; } /* Hide the lightbox "enlarge" trigger icon/button (it has a rendering bug on hover); the image itself already opens the lightbox on click. */ .single-projects .wp-block-gallery .lightbox-trigger { display: none !important; } /* Single Project pages: short intro description below the H1 title */ .single-projects .gp-project-intro { max-width: 760px; margin: 0 0 30px; font-size: 16px; line-height: 1.5; color: #6B7A8C; } /* Single Project pages: prev/next project navigation footer */ .gp-project-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 20px; margin: 60px 0 20px; padding-top: 30px; border-top: 1px solid #ececec; } .gp-project-nav__link { display: flex; align-items: center; gap: 16px; padding: 14px; border: 2px solid #B85A2E; border-radius: 8px 8px 8px 0; text-decoration: none !important; transition: background-color 0.25s ease, border-radius 0.25s ease; overflow: hidden; } .gp-project-nav__link:hover { background-color: #E8CFAF; border-radius: 0; } .gp-project-nav__link--next { flex-direction: row-reverse; text-align: right; } .gp-project-nav__thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background-color: #f2f2f2; } .gp-project-nav__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gp-project-nav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; } .gp-project-nav__link--next .gp-project-nav__text { align-items: flex-end; } .gp-project-nav__label { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(192, 57, 43); font-weight: 700; white-space: nowrap; } .gp-project-nav__title { font-size: 15px; font-weight: 700; color: #3D2216; font-family: 'Space Grotesk', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .gp-project-nav__link-icon { position: relative; width: 12px; height: 12px; overflow: hidden; display: inline-block; flex: 0 0 12px; } .gp-project-nav__link-icon img { position: relative; z-index: 1; width: 12px; height: 12px; display: block; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .gp-project-nav__link-icon--prev img { transform: rotate(90deg); } .gp-project-nav__link-icon--next img { transform: rotate(-90deg); } .gp-project-nav__link-icon::after { content: ""; position: absolute; left: 50%; top: -18px; width: 12px; height: 12px; background-color: rgb(192, 57, 43); -webkit-mask-image: url("https://globalpolimer.com/wp-content/uploads/2026/08/arrow-d-CTA.svg"); mask-image: url("https://globalpolimer.com/wp-content/uploads/2026/08/arrow-d-CTA.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transition: top 0.5s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; } .gp-project-nav__link-icon--prev::after { transform: translateX(-50%) rotate(90deg); } .gp-project-nav__link-icon--next::after { transform: translateX(-50%) rotate(-90deg); } .gp-project-nav__link:hover .gp-project-nav__link-icon--prev img { transform: rotate(90deg) translateY(18px); } .gp-project-nav__link:hover .gp-project-nav__link-icon--next img { transform: rotate(-90deg) translateY(18px); } .gp-project-nav__link:hover .gp-project-nav__link-icon::after { top: 1px; } .gp-project-nav__all { display: flex; align-items: center; justify-content: center; padding: 10px 20px; white-space: nowrap; font-weight: 600; font-size: 14px; color: rgb(192, 57, 43); text-decoration: none !important; border: 2px solid rgb(192, 57, 43); border-radius: 6px; transition: background-color 0.25s ease, color 0.25s ease; } .gp-project-nav__all:hover { background-color: rgb(192, 57, 43); color: #fff; } @media (max-width: 767px) { .gp-project-nav { grid-template-columns: 1fr; } .gp-project-nav__link--next { text-align: left; align-items: flex-start; } } /* Contact page - remove underline from linked headings (e.g. email link) */ .elementor-heading-title a { text-decoration: none; } /* ========================================================================== Mobile / Tablet full-screen navigation drawer Breakpoint matches UAE Nav Menu widget's own breakpoint (Tablet, 1025px) ========================================================================== */ @media (max-width: 1024px) { /* Safety net: prevent horizontal scroll on mobile. The footer's legal-links icon-list (Legal Notice / Privacy Policy / Cookies Policy) was carrying a fixed desktop width (391px) wider than the viewport, pushing the whole page into horizontal overflow. IMPORTANT: overflow-y must be set explicitly to "visible" alongside overflow-x. Per the CSS overflow spec, setting only overflow-x on an element makes the browser compute overflow-y as "auto" instead of "visible" - which turns into its own scroll container. That breaks #masthead's position:sticky (it then sticks relative to body, which never actually scrolls, instead of the real viewport), so the header stops following the page on scroll. */ /* Only gets overflow-x:hidden - NOT . Per the CSS overflow spec, setting overflow-x to a non-visible value on an element forces the browser to compute its overflow-y as "auto" too, even if overflow-y is explicitly set to "visible" - there is no way around this on the same element. Since is the real scrolling root of the document, hiding overflow-x there is enough to stop horizontal scroll everywhere; touching as well was turning it into its own scroll container, which broke #masthead's position:sticky (it stuck relative to body - which never actually scrolls - instead of the real viewport). */ html { overflow-x: hidden; } .elementor-icon-list-items.elementor-inline-items { max-width: 100%; box-sizing: border-box; } /* Keep logo + burger toggle on a single row in the collapsed header */ #masthead .e-con-inner { flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; padding-left: 24px !important; padding-right: 24px !important; } /* Menu/Close icons are now handled natively by the UAE Navigation Menu widget (Layout > Menu Icon / Close Icon, using the uploaded burger.svg and close.svg) - no custom CSS needed. Just normalize their on-screen size since the two SVGs have different native viewBoxes (16x16 vs 24x24). */ #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon svg { width: 30px; height: 30px; } #masthead.mobile-menu-open .hfe-nav-menu__toggle .hfe-nav-menu-icon svg path:not([fill="none"]) { fill: #06264A; } #masthead .elementor-widget-site-logo { width: auto !important; flex: 0 0 auto !important; } #masthead .elementor-widget-navigation-menu { width: auto !important; flex: 0 0 auto !important; } /* Keep the header (and its toggle X icon) above the full-screen drawer. The dropdown is a DESCENDANT of the toggle's own container with z-index:9999, so raising #masthead's z-index alone does nothing - the toggle itself needs a higher z-index than the dropdown since they're siblings in the same stack. */ #masthead.mobile-menu-open { z-index: 10000 !important; } #masthead.mobile-menu-open .hfe-nav-menu__toggle { position: relative !important; z-index: 10001 !important; } /* Force the logo + toggle to their real content width so they never overflow the row */ #masthead .elementor-element-aa8e483, #masthead .elementor-element-aa8e483.elementor-widget { width: auto !important; max-width: 160px !important; flex: 0 0 auto !important; } #masthead .elementor-element-cb15c92, #masthead .elementor-element-cb15c92.elementor-widget { width: auto !important; max-width: none !important; flex: 0 0 auto !important; } /* The collapsed (inactive) nav sits invisibly in normal flow (visibility:hidden, not display:none) which was forcing the header to grow to its full desktop width. Remove it from flow entirely until it's opened. */ #masthead .hfe-nav-menu__layout-horizontal:not(.menu-is-active) { display: none !important; } /* Hide Contact button + language switcher from the collapsed top bar; they reappear pinned inside the full-screen drawer when it's open. */ .elementor-element-09c040c { display: none; } /* Turn the native dropdown into a full-screen dark panel */ .hfe-nav-menu__submenu-arrow.hfe-dropdown.menu-is-active { position: fixed !important; top: var(--gp-header-height, 80px); left: 0 !important; right: 0 !important; width: 100vw !important; height: calc(100vh - var(--gp-header-height, 80px)); margin: 0 !important; background: #FFFFFF !important; display: flex !important; flex-direction: column; align-items: stretch; padding: 32px 24px 100px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; z-index: 9998; box-shadow: none; border: none; } .hfe-dropdown.menu-is-active li { border-bottom: 1px solid rgba(6,38,74,0.12); width: 100%; } .hfe-dropdown.menu-is-active li > a { color: #06264A !important; font-family: 'Space Grotesk', sans-serif !important; font-size: 24px !important; font-weight: 700 !important; padding: 18px 4px !important; display: block; background: transparent !important; } .hfe-dropdown.menu-is-active li > a:hover { color: #C0392B !important; opacity: 1; } /* Active/current page: use the brand CTA color (Pomegranate) instead of dimming it, so it reads as "you are here" rather than looking faded. */ .hfe-dropdown.menu-is-active li.current-menu-item > a { color: #C0392B !important; opacity: 1; } /* Contact button + language switcher: stays exactly where Elementor put it (a sibling of the nav widget inside #masthead) - no JS DOM movement. #masthead reliably gets .mobile-menu-open when the drawer opens, and no ancestor in the chain (header, its wrappers) has a transform/filter, so position:fixed here is safely relative to the real viewport as-is. Every property is !important because Elementor's own container base styles (position:relative, z-index, etc.) have enough specificity to otherwise win over a plain (non-!important) declaration here. */ #masthead.mobile-menu-open .elementor-element-09c040c { display: flex !important; position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; background: #FFFFFF !important; padding: 18px 24px calc(18px + env(safe-area-inset-bottom)) !important; justify-content: center !important; align-items: center !important; gap: 18px !important; z-index: 10002 !important; border-top: 1px solid rgba(6,38,74,0.12) !important; } #masthead.mobile-menu-open .elementor-element-09c040c a, #masthead.mobile-menu-open .elementor-element-09c040c span { color: #06264A !important; } #masthead.mobile-menu-open .elementor-element-09c040c .elementor-button { background-color: #C0392B !important; } #masthead.mobile-menu-open .elementor-element-09c040c .elementor-button, #masthead.mobile-menu-open .elementor-element-09c040c .elementor-button * { color: #FFFFFF !important; } /* Prevent background scroll while the drawer is open. The real lock is done in JS (body gets position:fixed at the exact scroll offset - see lockScroll()); this overflow:hidden is an extra safety net, applied to both html and body in case any residual scroll room is left on either. */ html.gp-mobile-menu-open, body.gp-mobile-menu-open { overflow: hidden !important; } } /* Site-wide mobile/tablet side gutters. Elementor's "boxed" containers (.e-con-boxed > .e-con-inner) only get centered via max-width:min(100%,1340px) + auto margins - that only creates a visible gutter when the viewport is WIDER than 1340px. Below that (every tablet/mobile breakpoint), the inner content has zero padding of its own and spans edge-to-edge, so text/cards touch the screen borders everywhere on the site. Scoped to #content/#colophon only, so the header (which already has its own hand-tuned mobile padding) is left untouched. */ @media (max-width: 1024px) { #content .e-con-boxed > .e-con-inner, #colophon .e-con-boxed > .e-con-inner { padding-left: 40px !important; padding-right: 40px !important; } } @media (max-width: 767px) { #content .e-con-boxed > .e-con-inner, #colophon .e-con-boxed > .e-con-inner { padding-left: 24px !important; padding-right: 24px !important; } } /* Home hero row ("Sales Agency" / "Technical Consulting Office" diagonal cards): the site-wide gutter above (40px/24px) steals width from this specific row on top of the two cards' own internal text-safety padding, making the description text wrap tighter than necessary on tablet/mobile. This row's own design is meant to run close to the screen edges, so give it back most of that width with a much smaller gutter instead. More specific than the site-wide rule above (extra class), so it wins. */ @media (max-width: 1024px) { #content .elementor-element-9f4448b > .e-con-inner { padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 767px) { #content .elementor-element-9f4448b > .e-con-inner { padding-left: 12px !important; padding-right: 12px !important; } } /* Site-wide: many Elementor "container widget" text elements have a fixed desktop-authored width (e.g. 50%, 60%, 70%, 80%) via --container-widget-width, with no responsive override at all. On mobile that same percentage applies to a much narrower viewport, squeezing the text into a tiny column and wrapping it into a tall, hard-to-read block. These widths make sense on desktop (paired next to an image, etc.) but should relax to full width once the layout stacks on mobile/tablet. Scoped to text-editor widgets only (not headings), since headings are also used in tight title+icon rows (e.g. .nav-card-link) where forcing 100% would break that layout. */ @media (max-width: 1024px) { .elementor-widget-text-editor { width: 100% !important; max-width: 100% !important; } } /* Technical Consulting: mobile/tablet sub-nav redesign. Below 1024px the 3 cards no longer stack full-height with a description - they become one compact, horizontally-scrollable strip of icon+title pills. Applies regardless of .is-stuck, since compact + horizontal is now the only mobile treatment (desktop keeps the original expand/collapse is-stuck behavior untouched). JS (tc_subnav_sticky_script) tracks which section is on screen, adds .active to the matching pill, and scrolls it into view within this strip automatically. */ @media (max-width: 1024px) { #tc-subnav .e-con-inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 8px !important; padding: 10px 16px !important; scrollbar-width: thin; } #tc-subnav .e-con-inner::-webkit-scrollbar { height: 3px; } #tc-subnav .nav-card-link { flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; padding: 8px 16px !important; gap: 8px !important; border-radius: 999px !important; border-width: 1px !important; background: #F4F4F4 !important; scroll-snap-align: center; } /* Description never shows in the compact strip - there's no room for it */ #tc-subnav .elementor-widget-text-editor { display: none !important; } #tc-subnav .elementor-heading-title { font-size: 14px !important; line-height: 1.3 !important; white-space: nowrap !important; } #tc-subnav .nav-card-link .elementor-icon { width: 16px !important; height: 16px !important; font-size: 16px !important; } #tc-subnav .nav-card-link.active { background: rgba(192,57,43,0.1) !important; border-color: #C0392B !important; } #tc-subnav .nav-card-link.active .elementor-heading-title { color: #C0392B !important; } #tc-subnav .nav-card-link.active .elementor-icon svg .cls-1 { fill: #C0392B !important; } } /* REMOVED (was here): a blanket ".elementor-icon-list-item { align-items: flex-start !important }" rule. It was meant to fix multi-line wrapped headings colliding with their icon lists, but that specific case is already handled separately (min-height reservation on the Sales Agency 3-column headings). Meanwhile this blanket rule broke the NORMAL, overwhelmingly common case: single-line bullet items, where the icon should sit vertically centered with the text - it was forcing every bullet in the site to hug the top of the line instead, reading as misaligned. Vertical alignment for icon lists is now controlled per widget from Elementor's own Style > Icon > Vertical Alignment control (defaults to Middle), not overridden here. */ /* Elementor Nested Tabs, site-wide, mobile/tablet: the widget's own heading-wrap:wrap setting lets tab buttons that don't fit in one row spill onto a second row - which visually lands BELOW the tab content panel (since content comes right after the heading row in DOM/layout), making it look like the active tab is "on top" and the other tab buttons are "below" the thing they're supposed to control. Force the tab bar to stay a single horizontally-scrollable row instead, using the same swipeable-pill pattern as the Technical Consulting sub-nav, so every tab button is always reachable at the top, above its content. */ @media (max-width: 1024px) { .e-n-tabs-heading { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .e-n-tab-title { flex: 0 0 auto !important; white-space: nowrap !important; scroll-snap-align: center; } } /* Technical Consulting: "Production optimization studies" numbered items (01-04) are laid out as 2 side-by-side flex columns even on mobile, squeezing each number+text pair into ~half the screen width and causing the wrap/spacing to look disconnected. Stack the two columns full-width instead below 767px. */ @media (max-width: 767px) { .elementor-element-6e76baf { flex-direction: column !important; } } /* Sales Agency: "Project development" / "Sheets & Profiles" cards still read as too tall on mobile even after the icon/gap fixes - the min-height:120px is a desktop value carried over unchanged. Let the card size to its (now much smaller) content instead. */ @media (max-width: 767px) { .elementor-element-dd1c45d, .elementor-element-e522fa9 { min-height: 0 !important; } } /* Technical Consulting sub-nav, mobile/tablet: neutralize the desktop- oriented .is-stuck icon transform/sizing/hover-slide-animation system entirely. It was designed for the hover-driven desktop compact state (transform:scale on the OUTER .elementor-widget-icon, plus a slide-in ::after arrow for :hover) and fights with the always-compact mobile redesign above - tapping a pill toggles .active, which can momentarily drop .is-stuck's own compact values out of the cascade and let the icon flash back to its native ~50px size, overflowing the pill. Force every icon-sizing property back at mobile, on every element it could possibly be set on, so nothing else can win. */ @media (max-width: 1024px) { #tc-subnav .elementor-widget-icon { transform: none !important; /* Found via DevTools: this widget carries align-self:flex-end from the original desktop layout (where the icon needed to sit at the bottom of a taller multi-line card). In the new compact single-row pill, that pushes the icon below its siblings and out of the pill's visible box. Center it with the text instead. */ align-self: center !important; margin: 0 !important; } /* THE ACTUAL ROOT CAUSE: .elementor-icon-wrapper (the icon widget's OWN native wrapper, a level ABOVE .elementor-icon) has overflow:hidden and a native Elementor-controlled width of only ~13-14px - narrower than the 16px icon we're sizing it to. Confirmed via DevTools: the wrapper box measured 13.88x24, clipping the icon inside it via overflow:hidden. Whether the clipped sliver is visible at all depends on exact flex centering/position each render, which is why it looked tied to .active - it wasn't; every card's icon was always clipped this way, .active just shifted the layout enough to make it obvious. Resize the wrapper itself and stop it clipping its contents. */ #tc-subnav .elementor-icon-wrapper { width: 16px !important; height: 16px !important; overflow: visible !important; } /* THE hover-slide animation (built for desktop mouse hover: old icon slides away via translateY, a masked copy slides in via ::after) gets triggered on mobile because tapping a link makes browsers apply :hover and leave it "stuck" until something else is tapped. Its most specific compact-state copy (#tc-subnav.is-stuck .nav-card-link:hover .elementor-icon-wrapper svg { transform: translateY(24px) !important }) out-specifies the earlier "transform:none" reset (extra .is-stuck and :hover raise its class count), so it was still winning and shoving the icon 24px down, out of the pill. Match its exact specificity here. */ #tc-subnav .nav-card-link:hover .elementor-icon-wrapper svg, #tc-subnav.is-stuck .nav-card-link:hover .elementor-icon-wrapper svg { transform: none !important; } #tc-subnav .nav-card-link:hover .elementor-icon-wrapper::after, #tc-subnav.is-stuck .nav-card-link:hover .elementor-icon-wrapper::after { top: auto !important; display: none !important; } #tc-subnav .elementor-icon, #tc-subnav .elementor-icon svg { width: 16px !important; height: 16px !important; font-size: 16px !important; opacity: 1 !important; visibility: visible !important; } #tc-subnav .elementor-icon svg path { opacity: 1 !important; visibility: visible !important; } #tc-subnav .nav-card-link .elementor-icon-wrapper::after { display: none !important; } } /* Touch devices don't have real mouse hover - browsers fire :hover on tap and leave it "stuck" until something else is tapped/scrolled. That's exactly what caused the Technical Consulting sub-nav arrow to shift out of its pill earlier, and it's the same root cause behind the small arrow peeking out of the left edge of "Explore materials" / "Explore engineering" buttons on tablet/mobile: their hover slide-in arrow (.btn-cta-hover .elementor-button::after, hidden at left:-30px, slides to left:22px on :hover) gets triggered by the tap and never resets. Rather than patching each hover-triggered slide animation one at a time as they're found, reset every known one here for any device that lacks real mouse hover, so this whole class of bug can't keep recurring elsewhere on the site (e.g. the Sales Agency hero cards use the exact same .nav-card-link hover-swap icon animation as the sub-nav did). */ @media (hover: none), (pointer: coarse) { .btn-cta-hover .elementor-button-text, .btn-cta-hover .elementor-button:hover .elementor-button-text { transform: none !important; } .btn-cta-hover .elementor-button-icon, .btn-cta-hover .elementor-button:hover .elementor-button-icon { transform: none !important; } .btn-cta-hover .elementor-button::after, .btn-cta-hover .elementor-button:hover::after { left: -30px !important; } .card-shape-left::before, .card-shape-right::before, .card-shape-left:hover::before, .card-shape-right:hover::before { transform: none !important; } .nav-card-link .elementor-icon-wrapper svg, .nav-card-link:hover .elementor-icon-wrapper svg { transform: none !important; } .nav-card-link .elementor-icon-wrapper::after, .nav-card-link:hover .elementor-icon-wrapper::after { top: -60px !important; } } /* Home hero: "Technical Consulting Office" card (.card-shape-right)'s diagonal clip-path cuts biggest at the BOTTOM-LEFT (tapering to nothing near the top) - the mirror image of .card-shape-left, which cuts biggest at the top-right and tapers to nothing at the bottom. The card's own padding-left is a PERCENTAGE (~5% of card width), so it shrinks right along with the card on tablet/mobile, while the diagonal cut's reach (var(--s) + 16px, measured in fixed px) doesn't shrink nearly as fast - so the "Explore engineering" button, sitting near the bottom-left, ends up inside the clipped-away wedge and gets visibly cut off. Force a fixed, comfortably-larger-than-the-cut padding-left at each breakpoint instead of the percentage (60px --s on tablet needs >=76px clearance; 24px --s on mobile needs >=40px). */ @media (min-width: 768px) and (max-width: 1024px) { .card-shape-right { padding-left: 90px !important; } } @media (max-width: 767px) { .card-shape-right { padding-left: 48px !important; } } /* Main header nav: never allow the horizontal menu to wrap to 2 rows. The UAE Nav Menu widget's mobile-drawer breakpoint is fixed at 1024px (hfe-nav-menu__breakpoint-tablet, from header-footer-elementor's own CSS), but the full horizontal row (logo ~300px + 4 nav links ~520px + Contact button + EN/ES ~270px = ~1090px of content, plus its own gaps) only fits comfortably above roughly 1200px. Between 1025px and ~1300px there's a dead zone: wide enough that the mobile hamburger hasn't kicked in, narrow enough that the items don't fit - so they wrap onto a second line. Rather than touch the widget's own hamburger threshold (risky - it's driven by matching JS state classes, not just CSS), compact the row's spacing in exactly that dead zone so everything keeps fitting on one line the whole way down to where the hamburger takes over. */ @media (min-width: 1025px) and (max-width: 1400px) { #masthead .hfe-nav-menu__layout-horizontal li > a { padding: 15px 6px !important; } #masthead .hfe-nav-menu__layout-horizontal li > a, #masthead .hfe-nav-menu__layout-horizontal li > a * { font-size: 14px !important; } /* Fixed: the actual logo carries Header Footer Elementor's own class (.hfe-site-logo-img), not the generic Elementor ones guessed here originally - so this rule never matched anything and the logo never actually shrank, which is why wrapping kept happening. */ #masthead .hfe-site-logo-img { max-width: 90px !important; height: auto !important; } #masthead .elementor-button { padding: 10px 14px !important; font-size: 14px !important; } } /* Language switcher (GTranslate EN|ES): inactive language should read black, active language should use the Pomegranate CTA color - matching the mockup. Previously both used GTranslate's own default pink/magenta for both states, with no distinction at all. */ #masthead .glink { color: #000000 !important; } #masthead .glink.gt-current-lang { color: #C0392B !important; } /* Main nav: the active page should show an underline, not just a color change, to match the mockup. */ #masthead .hfe-nav-menu__layout-horizontal li.current-menu-item > a, #masthead .hfe-nav-menu__layout-horizontal li.current_page_item > a { text-decoration: underline !important; text-underline-offset: 6px; } /* About Us page redesign: pair each vertical (Sales Agency / Technical Consulting) with its own image and give each a brand-color accent, so the page reads as two clear, professional sections instead of a mismatched image column with an orphaned CTA far below its text. */ /* Uniform image treatment across all 3 photos on this page */ .elementor-element-77fc542 .elementor-widget-container, .elementor-element-08be9cc .elementor-widget-container, .elementor-element-aaec249 .elementor-widget-container { border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px -12px rgba(6, 38, 74, 0.25); } .elementor-element-77fc542 img, .elementor-element-08be9cc img, .elementor-element-aaec249 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; } /* Row 2's two stacked images: slightly shorter each, so the pair together roughly matches the row's text-column height. */ .elementor-element-af6dea4 .elementor-element-08be9cc img, .elementor-element-af6dea4 .elementor-element-aaec249 img { aspect-ratio: 16 / 9; } /* Sales Agency text column: Ocean blue accent rule */ .elementor-element-6c9721e { border-left: 3px solid #124E82; padding-left: 36px !important; } /* Technical Consulting text column: Terracotta accent rule */ .elementor-element-42073d6 { border-left: 3px solid #B85A2E; padding-left: 36px !important; } /* Give the two rows breathing room from each other and the page edges */ .elementor-element-2457cc4 { margin-bottom: 20px !important; } @media (max-width: 767px) { .elementor-element-6c9721e, .elementor-element-42073d6 { border-left: none !important; border-top: 3px solid #124E82; padding-left: 0 !important; padding-top: 24px !important; margin-top: 24px; } .elementor-element-42073d6 { border-top-color: #B85A2E; } } /* Sales Agency "Standard Sheets and profiles" grid: the 3rd column's heading ("Specialist Profiles and Surfaces") is long enough to wrap to 2 lines, but the grid row height was fixed to fit the other two (1-line) columns - so the wrapped second line collided with/overlapped the bullet list below it, reading as a shifted, uncentered mess. Reserve 2-line height on all 3 headings so they align on a clean grid regardless of wrap. */ [data-id="fea9c9c"], [data-id="8ef0429"], [data-id="352fe11"] { min-height: 84px !important; display: flex !important; align-items: flex-start !important; } /* Same defensive pattern site-wide: any heading widget immediately followed by an icon-list widget in the same column - if the heading text is long enough to wrap at some viewport width, let it push the list down naturally instead of the list starting at a fixed offset that assumes a single line. */ .elementor-widget-heading:has(+ .elementor-widget-icon-list) { height: auto !important; } /* Header logo widget: Elementor's own site-logo widget was rendering an invisible box roughly twice as wide as the logo image itself (image ~150px, widget box ~300px), because the widget's underlying CSS forces it to stretch/grow within its flex row regardless of the Content/Style panel width settings (those don't touch the source of the growth). That invisible extra space is what sometimes pushed or collapsed the header layout unexpectedly. Force the widget to size to its own content instead of stretching. */ #masthead .elementor-element-aa8e483 { width: 170px !important; flex: 0 0 170px !important; } #masthead .elementor-element-aa8e483 .hfe-site-logo, #masthead .elementor-element-aa8e483 .hfe-site-logo-set, #masthead .elementor-element-aa8e483 .elementor-widget-container { width: 100% !important; } #masthead .elementor-element-aa8e483 .hfe-site-logo-img { max-width: 150px !important; width: 150px !important; height: auto !important; } /* ========================================================================== Header navigation: never wrap to a second line on desktop Header Footer Elementor's own CSS sets flex-wrap: wrap on the horizontal nav menu (.hfe-nav-menu__layout-horizontal .hfe-nav-menu). There is comfortably enough room for the menu on one line at any desktop width, but that flex-wrap:wrap default means a transient width change (e.g. dragging a browser tab into/out of a window) can leave the menu broken into two rows and it doesn't always recover. HFE's mobile toggle menu already takes over at 1024px and below, so we force a single line above that breakpoint - the menu can then never wrap again on desktop. ========================================================================== */ @media (min-width: 1025px) { #masthead .hfe-nav-menu__layout-horizontal .hfe-nav-menu { flex-wrap: nowrap !important; } } /* ========================================================================== Technical Consulting page: collapsible sections (accordion) The page has 3 big H2 blocks (Projects Experience / Technical solutions / Engineering services). By default only "Projects Experience" is shown in full; the other two are collapsed down to just their H2 + intro text, with a "See more" control to expand them. Opening one section always collapses the other two - only one open at a time. Structure (built in functions.php, scoped to this page only): each group's trigger + all its content blocks are moved into ONE plain full-width wrapper (.tc-group) so the tint background is a single continuous element - never separate blocks with gaps between them. The whole trigger row (.tc-panel) is one clickable/keyboard-focusable control (role="button"), not just the "See more" pill - clicking or hovering anywhere on it toggles the section / plays the hover animation. ========================================================================== */ /* Structural rule instead of a per-element list: inside a .tc-group the trigger is always appended first (see functions.php), so every other direct child is section content and stays hidden until the group is opened (.tc-section-open). Any new element added inside a group later is picked up automatically - no selector list to keep in sync. *//* --- DISABLED (legacy tc-group accordion, superseded by native Accordion widget; kept for reference until final client review) --- body.page-id-21 .tc-group > *:not(:first-child):not(.tc-section-open) { display: none !important; } @keyframes tc-accordion-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } body.page-id-21 .tc-section-open { display: revert !important; animation: tc-accordion-fade-in .45s ease; } --- END DISABLED --- *//* One continuous full-width tinted wrapper per group - trigger + all its content sit inside it, so the background never looks segmented. *//* --- DISABLED (legacy tc-group accordion, superseded by native Accordion widget; kept for reference until final client review) --- body.page-id-21 .tc-group { background-color: #FAF5F1; padding: 40px 0; margin: 0 32px 28px; border-radius: 20px 20px 20px 0; cursor: pointer; transition: border-color .25s ease; } body.page-id-21 .tc-group--first { margin-top: 28px; } body.page-id-21 .tc-group:last-of-type { margin-bottom: 0; } @media (min-width: 1600px) { body.page-id-21 .tc-group { margin-left: 64px; margin-right: 64px; } } --- END DISABLED --- *//* Whole group (including its top/bottom padding, not just the trigger row) is hoverable/clickable while collapsed. Once a section is open, clicks inside the actual open content (cards, tabs, links...) are excluded via JS so they behave normally instead of re-toggling the section. *//* --- DISABLED (legacy tc-group accordion, superseded by native Accordion widget; kept for reference until final client review) --- body.page-id-21 .elementor-element-63cee8b > .e-con-inner, body.page-id-21 .elementor-element-98d2888 > .e-con-inner, body.page-id-21 .elementor-element-1d163c5 > .e-con-inner { padding: 0 44px !important; } body.page-id-21 .elementor-element-63cee8b, body.page-id-21 .elementor-element-98d2888, body.page-id-21 .elementor-element-1d163c5 { margin-top: 0 !important; } --- END DISABLED --- *//* Trigger row: heading+intro on the left, control pinned to the far right, vertically centered. The whole row is the clickable control. *//* --- DISABLED (legacy tc-group accordion, superseded by native Accordion widget; kept for reference until final client review) --- body.page-id-21 .tc-panel { cursor: pointer; } body.page-id-21 .tc-panel:focus-visible { outline: 2px solid rgb(192, 57, 43); outline-offset: 4px; } @media (min-width: 1025px) { body.page-id-21 .tc-panel { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 32px; } body.page-id-21 .tc-panel-text { flex: 1 1 auto; min-width: 0; } body.page-id-21 .tc-toggle-btn { flex: 0 0 auto; margin-top: 0 !important; } } --- END DISABLED --- *//* Visual control - same look and hover choreography as the site's .btn-cta-hover CTAs: border appears + squares off, label & icon slide right, and a new arrow slides in from the left to replace them. It's a , not a real