/** * RAAS Architects — custom front-end styles * * Presentational overrides for the site header and footer. All markup lives in * the Elementor database, so nothing here changes structure. * * Selectors are deliberately keyed on Elementor *locations* and *widget types*, * never on template or element IDs. The footer template (4430) and the per-page * nav widget IDs are not stable, so ID-based rules would silently stop applying * the moment a template is rebuilt or a new page is added. * * !important is required throughout: the source content carries inline styles * pasted from Word (8pt type, 8px line-height, hard-coded backgrounds). */ .elementor-location-footer { --raas-red: #cb2026; --raas-ink: #141414; --raas-line: rgba(255, 255, 255, 0.14); --raas-dim: rgba(255, 255, 255, 0.62); } /* ---------------------------------------------------------------- Section */ .elementor-location-footer > .elementor-section-wrap > .elementor-top-section:not(.elementor-motion-effects-element-type-background), .elementor-location-footer > .elementor-top-section:not(.elementor-motion-effects-element-type-background) { background-color: var(--raas-ink) !important; } .elementor-location-footer .elementor-top-section { border-top: 1px solid var(--raas-line); padding: 66px 0 46px !important; } .elementor-location-footer .elementor-top-section > .elementor-container { min-height: 0 !important; align-items: flex-start; } /* --------------------------------------------------------- Column headings */ .elementor-location-footer .elementor-widget-heading .elementor-heading-title { position: relative; margin: 0 0 26px !important; padding-bottom: 15px; color: #fff !important; font-family: "Lato", Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.22em !important; text-transform: uppercase; } .elementor-location-footer .elementor-widget-heading .elementor-heading-title::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 26px; height: 2px; background: var(--raas-red); transform: translateX(-50%); } /* ----------------------------------------------- Contact block (Word paste) */ .elementor-location-footer .elementor-widget-text-editor, .elementor-location-footer .elementor-widget-text-editor * { background: transparent !important; color: var(--raas-dim) !important; font-family: "Lato", Helvetica, sans-serif !important; font-size: 13.5px !important; letter-spacing: 0.04em !important; line-height: 2 !important; vertical-align: baseline !important; } .elementor-location-footer .elementor-widget-text-editor { text-align: center !important; } .elementor-location-footer .elementor-widget-text-editor p { margin: 0 0 2px !important; } .elementor-location-footer .elementor-widget-text-editor a { border-bottom: 1px solid transparent; color: #fff !important; text-decoration: none !important; transition: color 0.25s ease, border-color 0.25s ease; } .elementor-location-footer .elementor-widget-text-editor a:hover, .elementor-location-footer .elementor-widget-text-editor a:focus-visible { border-bottom-color: var(--raas-red); color: var(--raas-red) !important; } /* Copyright line sits in tags — pull it back to a normal baseline. */ .elementor-location-footer .elementor-widget-text-editor sub { display: inline-block; color: rgba(255, 255, 255, 0.38) !important; font-size: 11px !important; letter-spacing: 0.08em !important; } /* ---------------------------------------------------------- Social icons */ .elementor-location-footer .elementor-widget-social-icons { --grid-column-gap: 12px !important; } .elementor-location-footer .elementor-widget-social-icons .elementor-social-icon { width: 40px; height: 40px; background-color: transparent !important; border: 1px solid var(--raas-line); transition: background-color 0.28s ease, border-color 0.28s ease, transform 0.28s ease; } .elementor-location-footer .elementor-widget-social-icons .elementor-social-icon i { color: #fff; font-size: 15px; transition: color 0.28s ease; } .elementor-location-footer .elementor-widget-social-icons .elementor-social-icon:hover, .elementor-location-footer .elementor-widget-social-icons .elementor-social-icon:focus-visible { background-color: var(--raas-red) !important; border-color: var(--raas-red); transform: translateY(-3px); } /* ------------------------------------------------------------------- Map */ .elementor-location-footer .elementor-widget-google_maps > .elementor-widget-container { padding: 0 18px !important; } .elementor-location-footer .elementor-widget-google_maps iframe { width: 100%; height: 152px !important; border-radius: 2px; filter: grayscale(1) contrast(1.05); opacity: 0.72; transition: filter 0.45s ease, opacity 0.45s ease; } .elementor-location-footer .elementor-widget-google_maps:hover iframe { filter: grayscale(0); opacity: 1; } /* ------------------------------------------------------------ Responsive */ @media (max-width: 1024px) { .elementor-location-footer .elementor-top-section { padding: 52px 0 38px !important; } } @media (max-width: 767px) { .elementor-location-footer .elementor-top-section { padding: 44px 0 32px !important; } .elementor-location-footer .elementor-top-section > .elementor-container > .elementor-column { margin-bottom: 34px; } .elementor-location-footer .elementor-top-section > .elementor-container > .elementor-column:last-child { margin-bottom: 0; } .elementor-location-footer .elementor-widget-text-editor { text-align: center !important; } } /* ========================================================================= * HEADER / NAVIGATION * * The nav is a burger dropdown on every device. It is rebuilt per page with a * different widget ID each time (fb03831, 143c239, c71f809, 14333c5, 00891f4…), * so these rules are keyed on the widget class rather than on IDs. That also * unifies the per-page drift: link colours vary (#fff vs #3F3F3F), hover colour * varies (#CB2026 vs #870F0F), and every page ships a fully transparent * dropdown panel (alpha 0) that leaves menu text unreadable over the hero. * ====================================================================== */ /* ---------------------------------------------------------- Burger toggle */ .elementor-widget-nav-menu .elementor-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; transition: background-color 0.3s ease, color 0.3s ease; } .elementor-widget-nav-menu .elementor-menu-toggle:hover { background-color: rgba(203, 32, 38, 0.1) !important; } .elementor-widget-nav-menu .elementor-menu-toggle:focus-visible { outline: 2px solid #cb2026; outline-offset: 3px; } .elementor-widget-nav-menu .elementor-menu-toggle i { transition: transform 0.3s ease; } .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active i { transform: rotate(90deg); } /* --------------------------------------------------------- Dropdown panel */ .elementor-widget-nav-menu .elementor-nav-menu--dropdown { min-width: 234px; padding: 10px 0 !important; background-color: rgba(18, 18, 18, 0.94) !important; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item { position: relative; padding: 13px 26px !important; color: #fff !important; font-family: "Lato", Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.2em !important; transition: color 0.25s ease, background-color 0.25s ease, padding-left 0.25s ease; } /* Red rule that grows in from the left edge on hover / for the current page. */ .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item::before { content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 0; background: #cb2026; transform: translateY(-50%); transition: height 0.25s ease; } .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:focus-visible, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active { padding-left: 32px !important; background-color: rgba(255, 255, 255, 0.04) !important; color: #fff !important; } .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:hover::before, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:focus-visible::before, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active::before { height: 58%; } .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:focus-visible { outline: 2px solid #cb2026; outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .elementor-widget-nav-menu .elementor-menu-toggle, .elementor-widget-nav-menu .elementor-menu-toggle i, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item::before { transition: none !important; } .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active i { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .elementor-location-footer .elementor-social-icon, .elementor-location-footer .elementor-widget-google_maps iframe, .elementor-location-footer .elementor-widget-text-editor a { transition: none !important; } .elementor-location-footer .elementor-social-icon:hover { transform: none !important; } } /* ========================================================================= * PRACTICE PAGE (page 39) * * Element IDs are unavoidable here: these are page-specific corrections to * settings stored per-widget in the database. Each override below is a * workaround for a defect that should ultimately be fixed in Elementor — * see the notes on each block. * ====================================================================== */ /* --- Client logo carousel ------------------------------------------------- * Elementor Pro 3.6.5 emits Swiper v5 markup (.swiper-container) but core * 3.35.8 ships only Swiper v8, and no Swiper asset is enqueued on this page, * so the widget never initialises. * * assets/js/raas-carousel.js drives the existing markup instead: 7 logos per * view on desktop, stepping down on narrower screens, advancing one at a time * with prev/next arrows, swipe and arrow-key support. The JS adds * .raas-carousel, so none of this applies until it has run — and it skips any * carousel Swiper genuinely initialised, so this all stands down by itself if * Elementor Pro is ever updated. * ---------------------------------------------------------------------- */ .elementor-widget-media-carousel .elementor-main-swiper.raas-carousel { position: relative; width: 100% !important; height: auto !important; max-width: none !important; overflow: visible !important; padding: 4px 56px; box-sizing: border-box; } .raas-carousel .raas-carousel__viewport { overflow: hidden; width: 100%; } .raas-carousel .raas-carousel__track { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; transform: translate3d(0, 0, 0); transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .raas-carousel .swiper-slide { flex: 0 0 auto !important; height: auto !important; box-sizing: border-box; } .raas-carousel .swiper-slide:last-child { margin-right: 0 !important; } /* The logo card. Generous padding and `contain` so each mark is shown whole * rather than cropped or shrunk to a thumbnail. */ .raas-carousel .elementor-carousel-image { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; min-height: 96px; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; background-color: #fff; border: 1px solid #ececec; border-radius: 3px; padding: 18px; box-sizing: border-box; filter: grayscale(1); opacity: 0.66; transition: opacity 0.3s ease, filter 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .raas-carousel .swiper-slide:hover .elementor-carousel-image { filter: grayscale(0); opacity: 1; border-color: #d8d8d8; transform: translateY(-2px); } /* --- Arrows --- */ .raas-carousel .raas-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid #e2e2e2; border-radius: 50%; background: #fff; color: #cb2026; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; } .raas-carousel .raas-carousel__nav svg { width: 18px; height: 18px; display: block; } .raas-carousel .raas-carousel__nav--prev { left: 0; } .raas-carousel .raas-carousel__nav--next { right: 0; } .raas-carousel .raas-carousel__nav:hover:not(:disabled) { background: #cb2026; border-color: #cb2026; color: #fff; } .raas-carousel .raas-carousel__nav:focus-visible { outline: 2px solid #cb2026; outline-offset: 2px; } .raas-carousel .raas-carousel__nav:disabled { opacity: 0.28; cursor: default; } /* Elementor's own arrows, which point at a Swiper that never booted. */ .raas-carousel .elementor-swiper-button { display: none !important; } @media (max-width: 767px) { .elementor-widget-media-carousel .elementor-main-swiper.raas-carousel { padding: 4px 40px; } .raas-carousel .raas-carousel__nav { width: 34px; height: 34px; } .raas-carousel .raas-carousel__nav svg { width: 15px; height: 15px; } .raas-carousel .elementor-carousel-image { min-height: 72px; padding: 12px; } } @media (prefers-reduced-motion: reduce) { .raas-carousel .raas-carousel__track { transition: none; } } /* --- Empty spacer section ------------------------------------------------- * Section 346baae3 contains no widgets at all but carries min-height:143px, * so it renders as a blank band on mobile. Proper fix: delete it in Elementor. * ---------------------------------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-346baae3 { display: none !important; } /* --- Overlay panel -------------------------------------------------------- * The intro panel is pulled up 600px to sit over the hero. That composition * only works on a wide viewport; below 1025px it drags content off-screen. * ---------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-39 .elementor-element.elementor-element-ebfe0b7 > .elementor-element-populated { margin-top: 0 !important; } } /* --- Mobile content restoration ------------------------------------------- * Seven elements on this page are set to "Hide on phone", including the page's * only navigation (143c239). The result is a Practice page that shows almost * nothing on a phone. Proper fix: clear the Hide-on-Phone toggles in Elementor. * ---------------------------------------------------------------------- */ @media (max-width: 767px) { .elementor-39 .elementor-element.elementor-element-1d73466, .elementor-39 .elementor-element.elementor-element-c19930f, .elementor-39 .elementor-element.elementor-element-2d69b5b, .elementor-39 .elementor-element.elementor-element-6cd69d2, .elementor-39 .elementor-element.elementor-element-8d2bcea { display: block !important; } .elementor-39 .elementor-element.elementor-element-143c239, .elementor-39 .elementor-element.elementor-element-8229ce4 { display: block !important; } /* Those sections carry desktop min-heights that leave big empty gaps. */ .elementor-39 .elementor-element.elementor-element-c19930f > .elementor-container, .elementor-39 .elementor-element.elementor-element-2d69b5b > .elementor-container, .elementor-39 .elementor-element.elementor-element-6cd69d2 > .elementor-container, .elementor-39 .elementor-element.elementor-element-8d2bcea > .elementor-container { min-height: 0 !important; } /* 50px of padding on a 375px screen leaves 275px of usable width. */ .elementor-39 .elementor-widget-text-editor > .elementor-widget-container, .elementor-39 .elementor-widget-heading > .elementor-widget-container { padding: 18px 22px !important; } /* Justified text creates rivers of whitespace at narrow widths. */ .elementor-39 .elementor-widget-text-editor { text-align: left !important; } } /* Guard against the horizontal overflow reported at intermediate widths. */ .elementor-39 .elementor-section { max-width: 100%; } @media (prefers-reduced-motion: reduce) { .elementor-39 .elementor-carousel-image { transition: none !important; } } /* The previous developer's gradient fade masks assume a horizontally moving * strip. With the static fallback grid they just cover logos, so drop them * while the fallback is active. */ .elementor-39 .elementor-element.elementor-element-673e57c2:has(.swiper-container:not(.swiper-container-initialized))::before, .elementor-39 .elementor-element.elementor-element-673e57c2:has(.swiper-container:not(.swiper-container-initialized))::after { display: none !important; } /* Widget wrapper must not clip the taller grid. */ .elementor-39 .elementor-element.elementor-element-673e57c2:has(.swiper-container:not(.swiper-container-initialized)) { overflow: visible !important; } /* ========================================================================= * PRACTICE PAGE — restore missing section imagery * * The three image columns lost their background-image in the Elementor data; * only background-size/position survived, so they rendered as blank panels. * The correct files were recovered from the June-2024 Internet Archive capture * of this page and are all still present in the media library. * * NOTE: this restores them visually only. The durable fix is to re-select each * image on its column in Elementor, after which these three rules can go. * ====================================================================== */ .elementor-39 .elementor-element.elementor-element-8229ce4, .elementor-39 .elementor-element.elementor-element-1839b37, .elementor-39 .elementor-element.elementor-element-dcc31af { background-repeat: no-repeat !important; background-size: cover !important; min-height: 450px !important; } .elementor-39 .elementor-element.elementor-element-8229ce4 { background-image: url("https://raasarchitects.com/wp-content/uploads/2021/05/Practice-1-100.jpg") !important; background-position: center center !important; } .elementor-39 .elementor-element.elementor-element-1839b37 { background-image: url("https://raasarchitects.com/wp-content/uploads/2021/05/Raas-Practice-2-100.jpg") !important; background-position: center left !important; } .elementor-39 .elementor-element.elementor-element-dcc31af { background-image: url("https://raasarchitects.com/wp-content/uploads/2021/05/Raas-Practice-3-100.jpg") !important; background-position: center right !important; } @media (max-width: 767px) { .elementor-39 .elementor-element.elementor-element-8229ce4, .elementor-39 .elementor-element.elementor-element-1839b37, .elementor-39 .elementor-element.elementor-element-dcc31af { min-height: 260px !important; } } /* ========================================================================= * NAV DROPDOWN STACKING * * The open menu was being painted over by page content: the panel that follows * it in the DOM is pulled up with a negative margin and has its own background, * so with no z-index on the nav it won the paint order. Site-wide fix. * ====================================================================== */ .elementor-widget-nav-menu { position: relative; z-index: 9990; } .elementor-widget-nav-menu .elementor-nav-menu--dropdown, .elementor-widget-nav-menu .elementor-nav-menu__container { z-index: 9999 !important; } .elementor-widget-nav-menu .elementor-menu-toggle { position: relative; z-index: 10000; } /* Sections containing navigation get a positioning context only — deliberately * NO z-index. Lifting the whole section put the hero above every later section, * and on Practice the "About Us" panel is pulled up 600px into that hero, so it * was painted over and vanished. The nav column carries z-index:61 on its own, * which is enough to keep the open dropdown above later content. */ .elementor-section:has(.elementor-widget-nav-menu) { position: relative; } /* --- Practice hero / About Us backdrop ------------------------------------ * Section 1d73466 kept background-size:cover and background-attachment:fixed * but lost its background-image, leaving a ~703px white band. The "About Us" * panel is pulled up 600px to sit over it, which is why that area read as * broken. Identified as the RAAS studio photo: it is orphaned in the media * library, is landscape at 1339x893, and follows the same "-80" page-hero * naming as Team-80.jpg. Verify against Elementor revisions when convenient. * ---------------------------------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-1d73466:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-1d73466 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-image: url("https://raasarchitects.com/wp-content/uploads/2021/05/Raas-Architects-Office-80.jpg") !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; } /* ========================================================================= * HEADER BAR v2 — deterministic placement * * The flex approach above did not reliably push the burger to the right edge, * so the logo and nav columns are positioned explicitly instead: logo pinned * top-left, nav pinned top-right, out of flow. No dependence on how Elementor * sizes or orders its columns. * * Also disables the nav widget's own "sticky: top" setting, which is stored in * the widget config on every page and made the bar follow the scroll. * ====================================================================== */ /* --- Kill Elementor's sticky on the navigation --------------------------- */ .elementor-widget-nav-menu.elementor-sticky, .elementor-widget-nav-menu.elementor-sticky--active, .elementor-widget-nav-menu.elementor-sticky--effects, .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-nav-menu).elementor-sticky--active { position: static !important; top: auto !important; inset: auto !important; transform: none !important; width: auto !important; } .elementor-sticky__spacer:has(+ * .elementor-widget-nav-menu), .elementor-widget-nav-menu + .elementor-sticky__spacer { display: none !important; } /* ========================================================================= * HEADER BAR v3 — explicit, no :has(), no reserved space * * v2 relied on :has() for layout, which silently does nothing in browsers that * do not support it, and added padding-top that pushed the desktop hero down. * These rules name the actual header section / logo column / nav column on * every page, so they work everywhere, and the bar overlays the hero instead * of reserving space above it. * * Generated from the live markup of all 10 pages. * ====================================================================== */ /* Header sections become the positioning context — no added padding. */ .elementor-element.elementor-element-11356d79, .elementor-element.elementor-element-15388572, .elementor-element.elementor-element-1cc2f1cc, .elementor-element.elementor-element-1d73466, .elementor-element.elementor-element-22a8005, .elementor-element.elementor-element-27eb900, .elementor-element.elementor-element-3524f7d, .elementor-element.elementor-element-3e397e1, .elementor-element.elementor-element-3ecaf944, .elementor-element.elementor-element-423ffdb, .elementor-element.elementor-element-6737bb96, .elementor-element.elementor-element-7646ccf, .elementor-element.elementor-element-7cb437c, .elementor-element.elementor-element-8b16a69, .elementor-element.elementor-element-8c39739, .elementor-element.elementor-element-f5bd3f2 { position: relative !important; padding-top: 0 !important; } /* Logo: pinned top-left. */ .elementor-element.elementor-element-09482a5, .elementor-element.elementor-element-23bd53df, .elementor-element.elementor-element-3be37e4d, .elementor-element.elementor-element-4992ff19, .elementor-element.elementor-element-4c807f9, .elementor-element.elementor-element-599f2f54, .elementor-element.elementor-element-5a5fb525, .elementor-element.elementor-element-6237747, .elementor-element.elementor-element-74f6851a, .elementor-element.elementor-element-7ca0716, .elementor-element.elementor-element-7f06ede6, .elementor-element.elementor-element-8afa042, .elementor-element.elementor-element-97b4950, .elementor-element.elementor-element-9d55079, .elementor-element.elementor-element-b9ce6f4, .elementor-element.elementor-element-efe620b { position: absolute !important; top: 24px !important; left: 24px !important; right: auto !important; bottom: auto !important; width: auto !important; max-width: 55% !important; margin: 0 !important; padding: 0 !important; z-index: 60 !important; } /* Burger: pinned top-right. */ .elementor-element.elementor-element-06b6d40, .elementor-element.elementor-element-14a3ae5, .elementor-element.elementor-element-168817d, .elementor-element.elementor-element-20233c94, .elementor-element.elementor-element-24f44091, .elementor-element.elementor-element-28aefef0, .elementor-element.elementor-element-3cc34bb3, .elementor-element.elementor-element-3cf9dcd, .elementor-element.elementor-element-53c8f5a5, .elementor-element.elementor-element-5c6be921, .elementor-element.elementor-element-5e98073, .elementor-element.elementor-element-7b1472f3, .elementor-element.elementor-element-8a07f6c, .elementor-element.elementor-element-9b29f06, .elementor-element.elementor-element-b54057e, .elementor-element.elementor-element-cf206a2 { position: absolute !important; top: 24px !important; right: 24px !important; left: auto !important; bottom: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 61 !important; } @media (min-width: 1025px) { .elementor-element.elementor-element-09482a5, .elementor-element.elementor-element-23bd53df, .elementor-element.elementor-element-3be37e4d, .elementor-element.elementor-element-4992ff19, .elementor-element.elementor-element-4c807f9, .elementor-element.elementor-element-599f2f54, .elementor-element.elementor-element-5a5fb525, .elementor-element.elementor-element-6237747, .elementor-element.elementor-element-74f6851a, .elementor-element.elementor-element-7ca0716, .elementor-element.elementor-element-7f06ede6, .elementor-element.elementor-element-8afa042, .elementor-element.elementor-element-97b4950, .elementor-element.elementor-element-9d55079, .elementor-element.elementor-element-b9ce6f4, .elementor-element.elementor-element-efe620b { left: 48px !important; } .elementor-element.elementor-element-06b6d40, .elementor-element.elementor-element-14a3ae5, .elementor-element.elementor-element-168817d, .elementor-element.elementor-element-20233c94, .elementor-element.elementor-element-24f44091, .elementor-element.elementor-element-28aefef0, .elementor-element.elementor-element-3cc34bb3, .elementor-element.elementor-element-3cf9dcd, .elementor-element.elementor-element-53c8f5a5, .elementor-element.elementor-element-5c6be921, .elementor-element.elementor-element-5e98073, .elementor-element.elementor-element-7b1472f3, .elementor-element.elementor-element-8a07f6c, .elementor-element.elementor-element-9b29f06, .elementor-element.elementor-element-b54057e, .elementor-element.elementor-element-cf206a2 { right: 48px !important; } } @media (max-width: 1024px) { .elementor-element.elementor-element-09482a5 img, .elementor-element.elementor-element-23bd53df img, .elementor-element.elementor-element-3be37e4d img, .elementor-element.elementor-element-4992ff19 img, .elementor-element.elementor-element-4c807f9 img, .elementor-element.elementor-element-599f2f54 img, .elementor-element.elementor-element-5a5fb525 img, .elementor-element.elementor-element-6237747 img, .elementor-element.elementor-element-74f6851a img, .elementor-element.elementor-element-7ca0716 img, .elementor-element.elementor-element-7f06ede6 img, .elementor-element.elementor-element-8afa042 img, .elementor-element.elementor-element-97b4950 img, .elementor-element.elementor-element-9d55079 img, .elementor-element.elementor-element-b9ce6f4 img, .elementor-element.elementor-element-efe620b img { width: auto !important; max-width: 150px !important; max-height: 44px !important; object-fit: contain; } } /* --- Header bar sizing, all breakpoints ---------------------------------- * The bar is positioned by the v3 rules above. This sizes its contents so it * reads correctly from 320px up: a floor under the section so the absolutely * positioned bar can never spill into the section below, a logo that scales * with the viewport, and a burger with a real tap target. * ---------------------------------------------------------------------- */ .elementor-element.elementor-element-11356d79, .elementor-element.elementor-element-15388572, .elementor-element.elementor-element-1cc2f1cc, .elementor-element.elementor-element-1d73466, .elementor-element.elementor-element-22a8005, .elementor-element.elementor-element-27eb900, .elementor-element.elementor-element-3524f7d, .elementor-element.elementor-element-3e397e1, .elementor-element.elementor-element-3ecaf944, .elementor-element.elementor-element-423ffdb, .elementor-element.elementor-element-6737bb96, .elementor-element.elementor-element-7646ccf, .elementor-element.elementor-element-7cb437c, .elementor-element.elementor-element-8b16a69, .elementor-element.elementor-element-8c39739, .elementor-element.elementor-element-f5bd3f2 { min-height: 92px !important; } .elementor-element.elementor-element-09482a5 img, .elementor-element.elementor-element-23bd53df img, .elementor-element.elementor-element-3be37e4d img, .elementor-element.elementor-element-4992ff19 img, .elementor-element.elementor-element-4c807f9 img, .elementor-element.elementor-element-599f2f54 img, .elementor-element.elementor-element-5a5fb525 img, .elementor-element.elementor-element-6237747 img, .elementor-element.elementor-element-74f6851a img, .elementor-element.elementor-element-7ca0716 img, .elementor-element.elementor-element-7f06ede6 img, .elementor-element.elementor-element-8afa042 img, .elementor-element.elementor-element-97b4950 img, .elementor-element.elementor-element-9d55079 img, .elementor-element.elementor-element-b9ce6f4 img, .elementor-element.elementor-element-efe620b img { width: auto !important; max-width: clamp(112px, 20vw, 200px) !important; height: auto !important; display: block !important; } .elementor-element.elementor-element-09482a5 > .elementor-widget-wrap, .elementor-element.elementor-element-23bd53df > .elementor-widget-wrap, .elementor-element.elementor-element-3be37e4d > .elementor-widget-wrap, .elementor-element.elementor-element-4992ff19 > .elementor-widget-wrap, .elementor-element.elementor-element-4c807f9 > .elementor-widget-wrap, .elementor-element.elementor-element-599f2f54 > .elementor-widget-wrap, .elementor-element.elementor-element-5a5fb525 > .elementor-widget-wrap, .elementor-element.elementor-element-6237747 > .elementor-widget-wrap, .elementor-element.elementor-element-74f6851a > .elementor-widget-wrap, .elementor-element.elementor-element-7ca0716 > .elementor-widget-wrap, .elementor-element.elementor-element-7f06ede6 > .elementor-widget-wrap, .elementor-element.elementor-element-8afa042 > .elementor-widget-wrap, .elementor-element.elementor-element-97b4950 > .elementor-widget-wrap, .elementor-element.elementor-element-9d55079 > .elementor-widget-wrap, .elementor-element.elementor-element-b9ce6f4 > .elementor-widget-wrap, .elementor-element.elementor-element-efe620b > .elementor-widget-wrap, .elementor-element.elementor-element-06b6d40 > .elementor-widget-wrap, .elementor-element.elementor-element-14a3ae5 > .elementor-widget-wrap, .elementor-element.elementor-element-168817d > .elementor-widget-wrap, .elementor-element.elementor-element-20233c94 > .elementor-widget-wrap, .elementor-element.elementor-element-24f44091 > .elementor-widget-wrap, .elementor-element.elementor-element-28aefef0 > .elementor-widget-wrap, .elementor-element.elementor-element-3cc34bb3 > .elementor-widget-wrap, .elementor-element.elementor-element-3cf9dcd > .elementor-widget-wrap, .elementor-element.elementor-element-53c8f5a5 > .elementor-widget-wrap, .elementor-element.elementor-element-5c6be921 > .elementor-widget-wrap, .elementor-element.elementor-element-5e98073 > .elementor-widget-wrap, .elementor-element.elementor-element-7b1472f3 > .elementor-widget-wrap, .elementor-element.elementor-element-8a07f6c > .elementor-widget-wrap, .elementor-element.elementor-element-9b29f06 > .elementor-widget-wrap, .elementor-element.elementor-element-b54057e > .elementor-widget-wrap, .elementor-element.elementor-element-cf206a2 > .elementor-widget-wrap { padding: 0 !important; } .elementor-element.elementor-element-06b6d40 .elementor-menu-toggle, .elementor-element.elementor-element-14a3ae5 .elementor-menu-toggle, .elementor-element.elementor-element-168817d .elementor-menu-toggle, .elementor-element.elementor-element-20233c94 .elementor-menu-toggle, .elementor-element.elementor-element-24f44091 .elementor-menu-toggle, .elementor-element.elementor-element-28aefef0 .elementor-menu-toggle, .elementor-element.elementor-element-3cc34bb3 .elementor-menu-toggle, .elementor-element.elementor-element-3cf9dcd .elementor-menu-toggle, .elementor-element.elementor-element-53c8f5a5 .elementor-menu-toggle, .elementor-element.elementor-element-5c6be921 .elementor-menu-toggle, .elementor-element.elementor-element-5e98073 .elementor-menu-toggle, .elementor-element.elementor-element-7b1472f3 .elementor-menu-toggle, .elementor-element.elementor-element-8a07f6c .elementor-menu-toggle, .elementor-element.elementor-element-9b29f06 .elementor-menu-toggle, .elementor-element.elementor-element-b54057e .elementor-menu-toggle, .elementor-element.elementor-element-cf206a2 .elementor-menu-toggle { margin: 0 !important; padding: 8px !important; font-size: 26px !important; line-height: 1 !important; } @media (max-width: 767px) { .elementor-element.elementor-element-09482a5, .elementor-element.elementor-element-23bd53df, .elementor-element.elementor-element-3be37e4d, .elementor-element.elementor-element-4992ff19, .elementor-element.elementor-element-4c807f9, .elementor-element.elementor-element-599f2f54, .elementor-element.elementor-element-5a5fb525, .elementor-element.elementor-element-6237747, .elementor-element.elementor-element-74f6851a, .elementor-element.elementor-element-7ca0716, .elementor-element.elementor-element-7f06ede6, .elementor-element.elementor-element-8afa042, .elementor-element.elementor-element-97b4950, .elementor-element.elementor-element-9d55079, .elementor-element.elementor-element-b9ce6f4, .elementor-element.elementor-element-efe620b { top: 14px !important; left: 16px !important; } .elementor-element.elementor-element-06b6d40, .elementor-element.elementor-element-14a3ae5, .elementor-element.elementor-element-168817d, .elementor-element.elementor-element-20233c94, .elementor-element.elementor-element-24f44091, .elementor-element.elementor-element-28aefef0, .elementor-element.elementor-element-3cc34bb3, .elementor-element.elementor-element-3cf9dcd, .elementor-element.elementor-element-53c8f5a5, .elementor-element.elementor-element-5c6be921, .elementor-element.elementor-element-5e98073, .elementor-element.elementor-element-7b1472f3, .elementor-element.elementor-element-8a07f6c, .elementor-element.elementor-element-9b29f06, .elementor-element.elementor-element-b54057e, .elementor-element.elementor-element-cf206a2 { top: 14px !important; right: 12px !important; } .elementor-element.elementor-element-11356d79, .elementor-element.elementor-element-15388572, .elementor-element.elementor-element-1cc2f1cc, .elementor-element.elementor-element-1d73466, .elementor-element.elementor-element-22a8005, .elementor-element.elementor-element-27eb900, .elementor-element.elementor-element-3524f7d, .elementor-element.elementor-element-3e397e1, .elementor-element.elementor-element-3ecaf944, .elementor-element.elementor-element-423ffdb, .elementor-element.elementor-element-6737bb96, .elementor-element.elementor-element-7646ccf, .elementor-element.elementor-element-7cb437c, .elementor-element.elementor-element-8b16a69, .elementor-element.elementor-element-8c39739, .elementor-element.elementor-element-f5bd3f2 { min-height: 72px !important; } } /* --- Align the bar's contents inside their columns ----------------------- * Below 768px Elementor forces .elementor-column to width:100%, which wins * over the width:auto above. The nav column then spans the full width and the * burger, centred inside it, reads as sitting in the middle of the screen even * though the column itself is anchored right. * * Rather than fight the width, align the contents: the burger is pushed to the * right edge of whatever width its column ends up with, and the logo to the * left. This holds at every breakpoint regardless of how Elementor sizes them. * ---------------------------------------------------------------------- */ .elementor-element.elementor-element-06b6d40 > .elementor-widget-wrap, .elementor-element.elementor-element-14a3ae5 > .elementor-widget-wrap, .elementor-element.elementor-element-168817d > .elementor-widget-wrap, .elementor-element.elementor-element-20233c94 > .elementor-widget-wrap, .elementor-element.elementor-element-24f44091 > .elementor-widget-wrap, .elementor-element.elementor-element-28aefef0 > .elementor-widget-wrap, .elementor-element.elementor-element-3cc34bb3 > .elementor-widget-wrap, .elementor-element.elementor-element-3cf9dcd > .elementor-widget-wrap, .elementor-element.elementor-element-53c8f5a5 > .elementor-widget-wrap, .elementor-element.elementor-element-5c6be921 > .elementor-widget-wrap, .elementor-element.elementor-element-5e98073 > .elementor-widget-wrap, .elementor-element.elementor-element-7b1472f3 > .elementor-widget-wrap, .elementor-element.elementor-element-8a07f6c > .elementor-widget-wrap, .elementor-element.elementor-element-9b29f06 > .elementor-widget-wrap, .elementor-element.elementor-element-b54057e > .elementor-widget-wrap, .elementor-element.elementor-element-cf206a2 > .elementor-widget-wrap { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; align-items: flex-start !important; width: 100% !important; } .elementor-element.elementor-element-06b6d40 .elementor-widget-nav-menu, .elementor-element.elementor-element-14a3ae5 .elementor-widget-nav-menu, .elementor-element.elementor-element-168817d .elementor-widget-nav-menu, .elementor-element.elementor-element-20233c94 .elementor-widget-nav-menu, .elementor-element.elementor-element-24f44091 .elementor-widget-nav-menu, .elementor-element.elementor-element-28aefef0 .elementor-widget-nav-menu, .elementor-element.elementor-element-3cc34bb3 .elementor-widget-nav-menu, .elementor-element.elementor-element-3cf9dcd .elementor-widget-nav-menu, .elementor-element.elementor-element-53c8f5a5 .elementor-widget-nav-menu, .elementor-element.elementor-element-5c6be921 .elementor-widget-nav-menu, .elementor-element.elementor-element-5e98073 .elementor-widget-nav-menu, .elementor-element.elementor-element-7b1472f3 .elementor-widget-nav-menu, .elementor-element.elementor-element-8a07f6c .elementor-widget-nav-menu, .elementor-element.elementor-element-9b29f06 .elementor-widget-nav-menu, .elementor-element.elementor-element-b54057e .elementor-widget-nav-menu, .elementor-element.elementor-element-cf206a2 .elementor-widget-nav-menu { width: auto !important; max-width: none !important; margin-left: auto !important; margin-right: 0 !important; } .elementor-element.elementor-element-06b6d40 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-14a3ae5 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-168817d .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-20233c94 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-24f44091 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-28aefef0 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-3cc34bb3 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-3cf9dcd .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-53c8f5a5 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-5c6be921 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-5e98073 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-7b1472f3 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-8a07f6c .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-9b29f06 .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-b54057e .elementor-widget-nav-menu > .elementor-widget-container, .elementor-element.elementor-element-cf206a2 .elementor-widget-nav-menu > .elementor-widget-container { display: flex !important; justify-content: flex-end !important; } .elementor-element.elementor-element-06b6d40 .elementor-menu-toggle, .elementor-element.elementor-element-14a3ae5 .elementor-menu-toggle, .elementor-element.elementor-element-168817d .elementor-menu-toggle, .elementor-element.elementor-element-20233c94 .elementor-menu-toggle, .elementor-element.elementor-element-24f44091 .elementor-menu-toggle, .elementor-element.elementor-element-28aefef0 .elementor-menu-toggle, .elementor-element.elementor-element-3cc34bb3 .elementor-menu-toggle, .elementor-element.elementor-element-3cf9dcd .elementor-menu-toggle, .elementor-element.elementor-element-53c8f5a5 .elementor-menu-toggle, .elementor-element.elementor-element-5c6be921 .elementor-menu-toggle, .elementor-element.elementor-element-5e98073 .elementor-menu-toggle, .elementor-element.elementor-element-7b1472f3 .elementor-menu-toggle, .elementor-element.elementor-element-8a07f6c .elementor-menu-toggle, .elementor-element.elementor-element-9b29f06 .elementor-menu-toggle, .elementor-element.elementor-element-b54057e .elementor-menu-toggle, .elementor-element.elementor-element-cf206a2 .elementor-menu-toggle { margin-left: auto !important; margin-right: 0 !important; } .elementor-element.elementor-element-09482a5 > .elementor-widget-wrap, .elementor-element.elementor-element-23bd53df > .elementor-widget-wrap, .elementor-element.elementor-element-3be37e4d > .elementor-widget-wrap, .elementor-element.elementor-element-4992ff19 > .elementor-widget-wrap, .elementor-element.elementor-element-4c807f9 > .elementor-widget-wrap, .elementor-element.elementor-element-599f2f54 > .elementor-widget-wrap, .elementor-element.elementor-element-5a5fb525 > .elementor-widget-wrap, .elementor-element.elementor-element-6237747 > .elementor-widget-wrap, .elementor-element.elementor-element-74f6851a > .elementor-widget-wrap, .elementor-element.elementor-element-7ca0716 > .elementor-widget-wrap, .elementor-element.elementor-element-7f06ede6 > .elementor-widget-wrap, .elementor-element.elementor-element-8afa042 > .elementor-widget-wrap, .elementor-element.elementor-element-97b4950 > .elementor-widget-wrap, .elementor-element.elementor-element-9d55079 > .elementor-widget-wrap, .elementor-element.elementor-element-b9ce6f4 > .elementor-widget-wrap, .elementor-element.elementor-element-efe620b > .elementor-widget-wrap { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: flex-start !important; } .elementor-element.elementor-element-09482a5 .elementor-widget-image, .elementor-element.elementor-element-23bd53df .elementor-widget-image, .elementor-element.elementor-element-3be37e4d .elementor-widget-image, .elementor-element.elementor-element-4992ff19 .elementor-widget-image, .elementor-element.elementor-element-4c807f9 .elementor-widget-image, .elementor-element.elementor-element-599f2f54 .elementor-widget-image, .elementor-element.elementor-element-5a5fb525 .elementor-widget-image, .elementor-element.elementor-element-6237747 .elementor-widget-image, .elementor-element.elementor-element-74f6851a .elementor-widget-image, .elementor-element.elementor-element-7ca0716 .elementor-widget-image, .elementor-element.elementor-element-7f06ede6 .elementor-widget-image, .elementor-element.elementor-element-8afa042 .elementor-widget-image, .elementor-element.elementor-element-97b4950 .elementor-widget-image, .elementor-element.elementor-element-9d55079 .elementor-widget-image, .elementor-element.elementor-element-b9ce6f4 .elementor-widget-image, .elementor-element.elementor-element-efe620b .elementor-widget-image { width: auto !important; margin-right: auto !important; margin-left: 0 !important; text-align: left !important; } /* ========================================================================= * PRACTICE PAGE — UI/UX PASS * * Fluid type and spacing so the page scales continuously instead of jumping * at Elementor's breakpoints, plus a fix for the oversized hero imagery. * ====================================================================== */ /* --- Oversized hero ------------------------------------------------------- * background-attachment:fixed sizes a cover background against the VIEWPORT, * not the element it is on, so the photo rendered far larger than its frame * and appeared cropped in. Scroll attachment sizes it to the section, which * is what the composition expects. Also drops the parallax jank on trackpads. * ---------------------------------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-1d73466:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-1d73466 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-attachment: scroll !important; background-size: cover !important; background-position: center 38% !important; } /* --- Fluid section heights ----------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-1d73466 > .elementor-container { min-height: clamp(360px, 56vh, 703px) !important; } .elementor-39 .elementor-element.elementor-element-8229ce4, .elementor-39 .elementor-element.elementor-element-1839b37, .elementor-39 .elementor-element.elementor-element-dcc31af { min-height: clamp(230px, 30vw, 450px) !important; } /* --- Typographic scale --------------------------------------------------- * Headings and body copy scale with the viewport rather than stepping, and * body text is held to a comfortable measure so lines stay readable on wide * screens instead of running the full column width. * ---------------------------------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-fa60835 .elementor-heading-title, .elementor-39 .elementor-element.elementor-element-96d25cf .elementor-heading-title, .elementor-39 .elementor-element.elementor-element-c973e2f .elementor-heading-title, .elementor-39 .elementor-element.elementor-element-0d9a4ea .elementor-heading-title, .elementor-39 .elementor-element.elementor-element-a26d281 .elementor-heading-title { font-size: clamp(1.5rem, 2.5vw, 2.3rem) !important; line-height: 1.18 !important; letter-spacing: -0.01em !important; margin-bottom: 0 !important; } .elementor-39 .elementor-element.elementor-element-899c89d, .elementor-39 .elementor-element.elementor-element-076960c, .elementor-39 .elementor-element.elementor-element-9a6fc0c, .elementor-39 .elementor-element.elementor-element-ac65e32 { font-size: clamp(15px, 1.05vw, 17px) !important; line-height: 1.75 !important; color: #3a3a3a !important; } .elementor-39 .elementor-element.elementor-element-899c89d p, .elementor-39 .elementor-element.elementor-element-076960c p, .elementor-39 .elementor-element.elementor-element-9a6fc0c p, .elementor-39 .elementor-element.elementor-element-ac65e32 p { max-width: 62ch; margin-bottom: 1.05em; } .elementor-39 .elementor-element.elementor-element-899c89d p:last-child, .elementor-39 .elementor-element.elementor-element-076960c p:last-child, .elementor-39 .elementor-element.elementor-element-9a6fc0c p:last-child, .elementor-39 .elementor-element.elementor-element-ac65e32 p:last-child { margin-bottom: 0; } /* --- Spacing rhythm ------------------------------------------------------ * The fixed 50px paddings were half the usable width on a phone and looked * mean on a large screen. These scale between the two. * ---------------------------------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-076960c > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-9a6fc0c > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-ac65e32 > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-650ccdc > .elementor-widget-container { padding: clamp(18px, 2.6vw, 44px) clamp(20px, 3.2vw, 50px) !important; } .elementor-39 .elementor-element.elementor-element-96d25cf > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-c973e2f > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-0d9a4ea > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-a26d281 > .elementor-widget-container { padding: clamp(24px, 3vw, 40px) clamp(20px, 3.2vw, 50px) clamp(6px, 1vw, 14px) !important; } /* --- About Us panel ------------------------------------------------------ * The panel is pulled up 600px to overlap the hero. That offset only makes * sense while the hero is near its full height, so it scales back as the * hero shrinks and is dropped entirely once the layout stacks. * ---------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-39 .elementor-element.elementor-element-ebfe0b7 > .elementor-element-populated { margin-top: -180px !important; } } @media (max-width: 767px) { .elementor-39 .elementor-element.elementor-element-ebfe0b7 > .elementor-element-populated { margin-top: 0 !important; } } /* --- Clients section ----------------------------------------------------- * The intro line was set at the same size as body copy but used as a standfirst * across the full page width, which read as cramped. It now sits a step above * body copy, centred on a controlled measure, with room to breathe above the * logo carousel. * ---------------------------------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-a26d281 { text-align: center !important; } .elementor-39 .elementor-element.elementor-element-650ccdc { font-size: clamp(16px, 1.35vw, 20px) !important; line-height: 1.65 !important; color: #3a3a3a !important; text-align: center !important; } .elementor-39 .elementor-element.elementor-element-650ccdc > .elementor-widget-container { max-width: 68ch; margin-left: auto !important; margin-right: auto !important; padding-bottom: clamp(16px, 2.4vw, 32px) !important; } .elementor-39 .elementor-element.elementor-element-650ccdc p { max-width: none; } /* Breathing room around the logo strip. */ .elementor-39 .elementor-element.elementor-element-673e57c2 > .elementor-widget-container { padding: clamp(8px, 1.6vw, 22px) 0 clamp(20px, 3vw, 40px) !important; } /* --- Horizontal overflow guard ------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-1d73466, .elementor-39 .elementor-element.elementor-element-ccaea1c { overflow-x: clip; } /* ========================================================================= * PRACTICE PAGE — CORRECTIONS TO THE UI/UX PASS * ====================================================================== */ /* --- Restore the hero geometry ------------------------------------------- * The pass above shrank the hero to clamp(360px, 56vh, 703px) while leaving * the About Us panel pulled up -600px. On a short viewport the hero became * ~560px, so the panel overshot it, rode up over the header and its first * line was clipped. The -600px offset and the 703px hero are a matched pair: * they move together or not at all. * * background-attachment:scroll is kept — that was the genuine fix for the * oversized imagery — but the framing returns to centre. * ---------------------------------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-1d73466 > .elementor-container { min-height: 703px !important; } .elementor-39 .elementor-element.elementor-element-1d73466:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-1d73466 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-position: center center !important; } /* The panel must be free to sit outside its own section. */ .elementor-39 .elementor-element.elementor-element-1d73466, .elementor-39 .elementor-element.elementor-element-ccaea1c { overflow-x: visible; } /* Below the desktop breakpoint the hero shrinks, so the pull scales with it. */ @media (max-width: 1024px) { .elementor-39 .elementor-element.elementor-element-1d73466 > .elementor-container { min-height: 520px !important; } } @media (max-width: 767px) { .elementor-39 .elementor-element.elementor-element-1d73466 > .elementor-container { min-height: 340px !important; } } /* --- Section imagery proportions ----------------------------------------- * These sections run full-bleed, so on a wide monitor each image column is * ~1400px across against a 450px height — a 3:1 letterbox that reads as * stretched. Capping the content width keeps the columns near a natural * landscape ratio, and the height now scales with the column rather than * sitting at a fixed floor. * ---------------------------------------------------------------------- */ .elementor-39 .elementor-element.elementor-element-c19930f > .elementor-container, .elementor-39 .elementor-element.elementor-element-2d69b5b > .elementor-container, .elementor-39 .elementor-element.elementor-element-6cd69d2 > .elementor-container, .elementor-39 .elementor-element.elementor-element-8d2bcea > .elementor-container { max-width: 1500px !important; margin-left: auto !important; margin-right: auto !important; } .elementor-39 .elementor-element.elementor-element-8229ce4, .elementor-39 .elementor-element.elementor-element-1839b37, .elementor-39 .elementor-element.elementor-element-dcc31af { min-height: clamp(280px, 27vw, 500px) !important; } @media (max-width: 767px) { .elementor-39 .elementor-element.elementor-element-8229ce4, .elementor-39 .elementor-element.elementor-element-1839b37, .elementor-39 .elementor-element.elementor-element-dcc31af { min-height: 240px !important; } } /* ========================================================================= * PRACTICE PAGE — HORIZONTAL GUTTERS * * These sections run full-bleed, so the image columns ran hard into both * screen edges at every width. A single shared gutter is applied at the * container level — one value, so every band on the page lines up down a * common left and right edge instead of each section setting its own. * * The widgets' own horizontal padding is reduced to match, otherwise the text * would end up inset twice and sit well short of the images above it. * ====================================================================== */ .elementor-39 .elementor-element.elementor-element-ccaea1c > .elementor-container, .elementor-39 .elementor-element.elementor-element-c19930f > .elementor-container, .elementor-39 .elementor-element.elementor-element-2d69b5b > .elementor-container, .elementor-39 .elementor-element.elementor-element-6cd69d2 > .elementor-container, .elementor-39 .elementor-element.elementor-element-8d2bcea > .elementor-container, .elementor-39 .elementor-element.elementor-element-1bd85f58 > .elementor-container { box-sizing: border-box !important; max-width: 1500px !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(18px, 3.4vw, 56px) !important; padding-right: clamp(18px, 3.4vw, 56px) !important; } /* Body copy: vertical padding kept, horizontal handed to the gutter above. */ .elementor-39 .elementor-element.elementor-element-076960c > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-9a6fc0c > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-ac65e32 > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-650ccdc > .elementor-widget-container { padding: clamp(16px, 2.2vw, 34px) clamp(2px, 1.1vw, 20px) !important; } .elementor-39 .elementor-element.elementor-element-96d25cf > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-c973e2f > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-0d9a4ea > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-a26d281 > .elementor-widget-container { padding: clamp(22px, 2.8vw, 38px) clamp(2px, 1.1vw, 20px) clamp(6px, 1vw, 12px) !important; } .elementor-39 .elementor-element.elementor-element-899c89d > .elementor-widget-container, .elementor-39 .elementor-element.elementor-element-fa60835 > .elementor-widget-container { padding-left: clamp(18px, 2vw, 27px) !important; padding-right: clamp(18px, 2vw, 27px) !important; } /* Gap between the copy and the adjacent image, so they do not butt together. */ .elementor-39 .elementor-element.elementor-element-8229ce4 > .elementor-element-populated, .elementor-39 .elementor-element.elementor-element-1839b37 > .elementor-element-populated, .elementor-39 .elementor-element.elementor-element-dcc31af > .elementor-element-populated { margin: 0 !important; } @media (min-width: 768px) { .elementor-39 .elementor-element.elementor-element-8229ce4, .elementor-39 .elementor-element.elementor-element-dcc31af { padding-left: clamp(12px, 2vw, 36px) !important; } .elementor-39 .elementor-element.elementor-element-1839b37 { padding-right: clamp(12px, 2vw, 36px) !important; } } /* The carousel supplies its own 56px inset for the arrows; the section gutter * would double it, so it is trimmed back here. */ .elementor-39 .elementor-element.elementor-element-673e57c2 > .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; } /* Nothing on this page should be able to widen the document. */ .elementor-39 .elementor-section > .elementor-container { max-width: 100%; } /* Backgrounds paint under padding by default, so the gap above would have no * visible effect on these columns — the photo would simply extend through it. * content-box clipping makes the image respect the padding. */ .elementor-39 .elementor-element.elementor-element-8229ce4, .elementor-39 .elementor-element.elementor-element-1839b37, .elementor-39 .elementor-element.elementor-element-dcc31af { background-clip: content-box !important; background-origin: content-box !important; } /* ========================================================================= * PRACTICE PAGE — CAROUSEL WIDTH AND OVERFLOW GUARD * * Elementor sets `.elementor-main-swiper { width: 50% }` on this widget from a * higher-specificity selector than the carousel block used, so the strip was * rendering at half width and offset, pushing its left arrow off-screen and * making the page scroll sideways. * * Re-stated here at full widget specificity, with every property that could * displace it neutralised, plus a page-level guard so nothing else on this * page can widen the document either. * ====================================================================== */ .elementor-39 .elementor-element.elementor-element-673e57c2 .elementor-main-swiper.raas-carousel { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; inset: auto !important; float: none !important; box-sizing: border-box !important; } .elementor-39 .elementor-element.elementor-element-673e57c2 .elementor-swiper, .elementor-39 .elementor-element.elementor-element-673e57c2 > .elementor-widget-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .raas-carousel .raas-carousel__viewport { max-width: 100%; min-width: 0; } /* Flex and grid children default to min-width:auto, which lets long content * push a column wider than its track. This is the usual cause of a stray * horizontal scrollbar in Elementor layouts. */ .elementor-39 .elementor-column, .elementor-39 .elementor-widget-wrap, .elementor-39 .elementor-widget { min-width: 0; } .elementor-39 img, .elementor-39 iframe { max-width: 100%; } /* Last line of defence: nothing on this page may widen the document. * `clip` rather than `hidden` so it cannot introduce a scroll container. */ .elementor-39 { overflow-x: clip; max-width: 100vw; } /* ========================================================================= * ABOUT US PANEL — BOTTOM BREATHING ROOM * * The panel ended roughly 10px below its last line, so its bottom edge cut * across the hero photo and read as a crop rather than a deliberate panel. * Padding is set on the column so it applies to the panel's white background * rather than just moving the text inside it. * ====================================================================== */ .elementor-39 .elementor-element.elementor-element-ebfe0b7 > .elementor-element-populated { padding-top: clamp(10px, 1.4vw, 20px) !important; padding-bottom: clamp(28px, 3.4vw, 52px) !important; padding-left: clamp(4px, 0.8vw, 12px) !important; padding-right: clamp(4px, 0.8vw, 12px) !important; } /* ========================================================================= * FOOTER — BALANCE THE "GET IN TOUCH" COLUMN * * Three columns of very unequal mass: a heading plus three small icons, a * five-line address block, and a map. The first column carried almost no * weight and left a visible void at bottom-left. * * Two changes rather than filling it with invented content: the icons are * given real presence, and they centre themselves in the space left below the * heading. Headings stay top-aligned so all three still share a baseline. * ====================================================================== */ .elementor-4430 .elementor-element.elementor-element-cd228a3 > .elementor-widget-wrap { display: flex !important; flex-direction: column !important; height: 100%; } .elementor-4430 .elementor-element.elementor-element-14ab176 { margin-top: auto !important; margin-bottom: auto !important; width: 100%; } .elementor-4430 .elementor-element.elementor-element-14ab176 .elementor-grid { display: flex !important; justify-content: center !important; gap: clamp(12px, 1.4vw, 20px) !important; } .elementor-4430 .elementor-element.elementor-element-14ab176 .elementor-grid-item { margin: 0 !important; } .elementor-4430 .elementor-element.elementor-element-14ab176 .elementor-social-icon { width: clamp(42px, 3.2vw, 52px) !important; height: clamp(42px, 3.2vw, 52px) !important; font-size: clamp(17px, 1.3vw, 21px) !important; display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 2px; background-color: transparent !important; transition: background-color 0.28s ease, border-color 0.28s ease, transform 0.28s ease; } .elementor-4430 .elementor-element.elementor-element-14ab176 .elementor-social-icon:hover { background-color: #cb2026 !important; border-color: #cb2026; transform: translateY(-2px); } .elementor-4430 .elementor-element.elementor-element-14ab176 .elementor-social-icon i, .elementor-4430 .elementor-element.elementor-element-14ab176 .elementor-social-icon svg { color: #fff; fill: #fff; } /* Equal vertical rhythm across all three footer columns. */ .elementor-4430 .elementor-element.elementor-element-8f10590 > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-top: clamp(18px, 2vw, 30px) !important; padding-bottom: clamp(18px, 2vw, 30px) !important; } @media (max-width: 767px) { .elementor-4430 .elementor-element.elementor-element-14ab176 { margin-top: 0 !important; margin-bottom: clamp(20px, 5vw, 34px) !important; } } /* ========================================================================= * FOOTER BRAND LINE * * Injected by assets/js/raas-footer.js beneath the social icons, to give the * first footer column enough mass to sit alongside the address block and the * map. Deliberately quiet — it is a signature, not a third content block. * ====================================================================== */ .raas-footer-line { margin-top: clamp(18px, 2.4vw, 30px); text-align: center; } .raas-footer-line__rule { display: block; width: 34px; height: 2px; margin: 0 auto clamp(14px, 1.8vw, 20px); background: #cb2026; } .raas-footer-line__tagline { margin: 0 0 6px !important; font-family: "Lato", sans-serif; font-size: clamp(15px, 1.15vw, 18px); font-weight: 700; letter-spacing: 0.02em; color: #cb2026; line-height: 1.3; } .raas-footer-line__meta { margin: 0 !important; font-family: "Lato", sans-serif; font-size: clamp(10px, 0.78vw, 11px); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); line-height: 1.5; } /* The icon row no longer needs to absorb the column's empty space now that * something sits beneath it. */ .elementor-4430 .elementor-element.elementor-element-14ab176 { margin-top: clamp(14px, 1.8vw, 24px) !important; margin-bottom: 0 !important; } /* ========================================================================= * FOOTER ROW — ALIGNMENT * * The three headings shared a baseline but each column's content began at a * different height beneath it — roughly 100px, 72px and 59px — because every * widget carried its own inherited top padding. The row read as ragged. * * Rather than nudge each one, spacing is stated once: identical padding on * every column, one uniform gap under every heading, and zero top offset on * the content widgets. Each column then starts and steps at the same points. * ====================================================================== */ .elementor-4430 .elementor-element.elementor-element-8f10590 > .elementor-container { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: space-between !important; } .elementor-4430 .elementor-element.elementor-element-8f10590 > .elementor-container > .elementor-column { display: flex !important; } .elementor-4430 .elementor-element.elementor-element-8f10590 > .elementor-container > .elementor-column > .elementor-widget-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; align-content: flex-start !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; padding: clamp(24px, 3vw, 44px) clamp(10px, 1.4vw, 20px) !important; margin: 0 !important; } /* One gap under all three headings. */ .elementor-4430 .elementor-element.elementor-element-5b9fc10, .elementor-4430 .elementor-element.elementor-element-6d8b652, .elementor-4430 .elementor-element.elementor-element-c604a1e { width: 100% !important; margin: 0 0 clamp(22px, 2.6vw, 34px) !important; } .elementor-4430 .elementor-element.elementor-element-5b9fc10 > .elementor-widget-container, .elementor-4430 .elementor-element.elementor-element-6d8b652 > .elementor-widget-container, .elementor-4430 .elementor-element.elementor-element-c604a1e > .elementor-widget-container { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; } /* Content blocks all start flush against that gap. */ .elementor-4430 .elementor-element.elementor-element-14ab176, .elementor-4430 .elementor-element.elementor-element-12de1f9, .elementor-4430 .elementor-element.elementor-element-afb146f { width: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; } .elementor-4430 .elementor-element.elementor-element-14ab176 > .elementor-widget-container, .elementor-4430 .elementor-element.elementor-element-12de1f9 > .elementor-widget-container, .elementor-4430 .elementor-element.elementor-element-afb146f > .elementor-widget-container { padding-top: 0 !important; margin-top: 0 !important; } /* Even leading in the address block so it steps at a regular interval. */ .elementor-4430 .elementor-element.elementor-element-12de1f9 p { margin: 0 0 0.62em !important; line-height: 1.6 !important; } .elementor-4430 .elementor-element.elementor-element-12de1f9 p:last-child { margin-bottom: 0 !important; } /* Map matches the visual height of the neighbouring blocks. */ .elementor-4430 .elementor-element.elementor-element-afb146f iframe { display: block; width: 100% !important; height: clamp(150px, 13vw, 190px) !important; border: 0; } @media (max-width: 767px) { .elementor-4430 .elementor-element.elementor-element-8f10590 > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: clamp(22px, 6vw, 34px) 18px !important; } .elementor-4430 .elementor-element.elementor-element-afb146f iframe { height: 200px !important; } } /* ========================================================================= * SITE-WIDE PASS * * The defects fixed on the Practice page were not local to it. An audit of all * ten pages found the same classes of problem almost everywhere, so these are * written against Elementor's own structure and widget types rather than * element IDs — they apply to every page, including any added later. * ====================================================================== */ /* --- 1. Fixed background attachment --------------------------------------- * `background-attachment: fixed` sizes a cover background against the VIEWPORT * rather than the element, so the image renders far larger than its frame and * crops in hard. Found on the Practice, Team, Publications and abRen heroes. * It also causes repaint jank on trackpads and is ignored on iOS entirely. * ---------------------------------------------------------------------- */ .elementor-section, .elementor-column, .elementor-widget-wrap, .elementor-motion-effects-layer, .elementor-element:not(.elementor-motion-effects-element-type-background) { background-attachment: scroll !important; } /* --- 2. Hero hidden on phone ---------------------------------------------- * Audited page by page rather than matched by pattern. Only three pages have * NO header at all on a phone; the rest ship a purpose-built mobile-only * header that must be left alone, and two carry header sections hidden on * every device which must stay hidden. * * practice / news / abren hero hidden on phone, no mobile header -> show * team / contact / awards dedicated mobile header exists -> leave * portfolio / publications second header dead on all devices -> leave * home / journal header visible everywhere -> leave * ---------------------------------------------------------------------- */ @media (max-width: 767px) { .elementor-39 .elementor-element.elementor-element-1d73466, .elementor-7296 .elementor-element.elementor-element-6737bb96, .elementor-45 .elementor-element.elementor-element-11356d79 { display: flex !important; } } /* --- 3. Horizontal overflow ---------------------------------------------- * Flex and grid children default to min-width:auto, so a wide element can push * its column past the viewport. This is the usual source of a stray sideways * scroll in Elementor layouts and was present on every page. * ---------------------------------------------------------------------- */ .elementor-column, .elementor-widget-wrap, .elementor-widget, .elementor-container { min-width: 0; } .elementor img, .elementor iframe, .elementor video, .elementor embed, .elementor object { max-width: 100%; } body[class*="elementor-page-"] { overflow-x: clip; } /* --- 4. Mobile gutters ---------------------------------------------------- * Widget padding is authored in fixed pixels throughout, commonly 50px a side. * On a 375px phone that is a quarter of the screen consumed before any text. * Capped by viewport width so wide screens keep the intended spacing. * ---------------------------------------------------------------------- */ @media (max-width: 767px) { .elementor-widget-text-editor > .elementor-widget-container, .elementor-widget-heading > .elementor-widget-container { padding-left: min(22px, 5.5vw) !important; padding-right: min(22px, 5.5vw) !important; } /* Justified text at phone width opens rivers of whitespace. */ .elementor-widget-text-editor { text-align: left !important; } } /* --- 5. Broken Pro sliders ------------------------------------------------ * Elementor Pro 3.6.5 emits Swiper v5 markup for its slides widget; only v8 is * available. Journal and News carry nine of these, all dead. assets/js/ * raas-carousel.js drives them; this styles the result. * ---------------------------------------------------------------------- */ .raas-carousel--single { padding: 0 !important; } .raas-carousel--single .swiper-slide { position: relative; min-height: clamp(260px, 42vh, 520px); } .raas-carousel--single .swiper-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; } .raas-carousel--single .swiper-slide-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: inherit; padding: clamp(20px, 4vw, 56px); } .raas-carousel--single .raas-carousel__nav { background: rgba(255, 255, 255, 0.9); } .raas-carousel--single .raas-carousel__nav--prev { left: clamp(8px, 1.5vw, 20px); } .raas-carousel--single .raas-carousel__nav--next { right: clamp(8px, 1.5vw, 20px); } /* --- 6. Entrance animations that never fire ------------------------------- * Elementor Pro's JS does not boot, so anything with an entrance animation can * be left permanently at opacity:0. Seen across several pages. * ---------------------------------------------------------------------- */ .elementor-invisible { opacity: 1 !important; animation: none !important; } /* --- 7. Restored page heroes ---------------------------------------------- * Background images were stripped site-wide, not just on Practice. These two * are identified with confidence: Team-80.jpg follows the same "-80" page-hero * naming as the Practice hero, and Abren-Background.jpg is named for its page. * Both are orphaned in the media library — referenced by no page. * ---------------------------------------------------------------------- */ .elementor-1965 .elementor-element.elementor-element-8c39739:not(.elementor-motion-effects-element-type-background), .elementor-1965 .elementor-element.elementor-element-22a8005:not(.elementor-motion-effects-element-type-background) { background-image: url("https://raasarchitects.com/wp-content/uploads/2021/05/Team-80.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } .elementor-45 .elementor-element.elementor-element-11356d79:not(.elementor-motion-effects-element-type-background) { background-image: url("https://raasarchitects.com/wp-content/uploads/2021/01/Abren-Background.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* ========================================================================= * HEADER BAR — PAGE-SCOPED RESTATEMENT * * The earlier header rules were keyed on the element ID alone, e.g. * .elementor-element.elementor-element-97b4950 * which is two classes. Elementor's own generated rules are page-scoped, * .elementor-1965 .elementor-element.elementor-element-97b4950 * which is three, so on any page where Elementor declares a competing * property the header layout lost. The home page has no such declaration, * which is exactly why it looked right while the others did not. * * Everything below is restated at page scope so it outranks Elementor's own * CSS, and regenerated from the live markup of all ten pages. This covers the * mobile-only header sections (team, contact, awards) as well as the shared * ones — every header on the site is now governed by one set of rules. * ====================================================================== */ .elementor-10 .elementor-element.elementor-element-7cb437c, .elementor-39 .elementor-element.elementor-element-1d73466, .elementor-1965 .elementor-element.elementor-element-22a8005, .elementor-1965 .elementor-element.elementor-element-3e397e1, .elementor-1965 .elementor-element.elementor-element-8c39739, .elementor-2829 .elementor-element.elementor-element-7646ccf, .elementor-2829 .elementor-element.elementor-element-8b16a69, .elementor-1953 .elementor-element.elementor-element-1cc2f1cc, .elementor-1953 .elementor-element.elementor-element-f5bd3f2, .elementor-9820 .elementor-element.elementor-element-3ecaf944, .elementor-9820 .elementor-element.elementor-element-3524f7d, .elementor-1826 .elementor-element.elementor-element-27eb900, .elementor-1826 .elementor-element.elementor-element-423ffdb, .elementor-7296 .elementor-element.elementor-element-6737bb96, .elementor-45 .elementor-element.elementor-element-11356d79, .elementor-41 .elementor-element.elementor-element-15388572 { position: relative !important; min-height: 92px !important; } .elementor-10 .elementor-element.elementor-element-4c807f9, .elementor-39 .elementor-element.elementor-element-8afa042, .elementor-1965 .elementor-element.elementor-element-97b4950, .elementor-1965 .elementor-element.elementor-element-b9ce6f4, .elementor-1965 .elementor-element.elementor-element-7ca0716, .elementor-2829 .elementor-element.elementor-element-4992ff19, .elementor-2829 .elementor-element.elementor-element-9d55079, .elementor-1953 .elementor-element.elementor-element-3be37e4d, .elementor-1953 .elementor-element.elementor-element-efe620b, .elementor-9820 .elementor-element.elementor-element-74f6851a, .elementor-9820 .elementor-element.elementor-element-5a5fb525, .elementor-1826 .elementor-element.elementor-element-09482a5, .elementor-1826 .elementor-element.elementor-element-6237747, .elementor-7296 .elementor-element.elementor-element-7f06ede6, .elementor-45 .elementor-element.elementor-element-23bd53df, .elementor-41 .elementor-element.elementor-element-599f2f54, .elementor-10 .elementor-element.elementor-element-5e98073, .elementor-39 .elementor-element.elementor-element-8a07f6c, .elementor-1965 .elementor-element.elementor-element-3cf9dcd, .elementor-1965 .elementor-element.elementor-element-9b29f06, .elementor-1965 .elementor-element.elementor-element-cf206a2, .elementor-2829 .elementor-element.elementor-element-28aefef0, .elementor-2829 .elementor-element.elementor-element-14a3ae5, .elementor-1953 .elementor-element.elementor-element-5c6be921, .elementor-1953 .elementor-element.elementor-element-06b6d40, .elementor-9820 .elementor-element.elementor-element-20233c94, .elementor-9820 .elementor-element.elementor-element-3cc34bb3, .elementor-1826 .elementor-element.elementor-element-b54057e, .elementor-1826 .elementor-element.elementor-element-168817d, .elementor-7296 .elementor-element.elementor-element-53c8f5a5, .elementor-45 .elementor-element.elementor-element-7b1472f3, .elementor-41 .elementor-element.elementor-element-24f44091 { position: absolute !important; top: 24px !important; bottom: auto !important; width: auto !important; max-width: 58% !important; margin: 0 !important; padding: 0 !important; float: none !important; z-index: 60 !important; } .elementor-10 .elementor-element.elementor-element-4c807f9, .elementor-39 .elementor-element.elementor-element-8afa042, .elementor-1965 .elementor-element.elementor-element-97b4950, .elementor-1965 .elementor-element.elementor-element-b9ce6f4, .elementor-1965 .elementor-element.elementor-element-7ca0716, .elementor-2829 .elementor-element.elementor-element-4992ff19, .elementor-2829 .elementor-element.elementor-element-9d55079, .elementor-1953 .elementor-element.elementor-element-3be37e4d, .elementor-1953 .elementor-element.elementor-element-efe620b, .elementor-9820 .elementor-element.elementor-element-74f6851a, .elementor-9820 .elementor-element.elementor-element-5a5fb525, .elementor-1826 .elementor-element.elementor-element-09482a5, .elementor-1826 .elementor-element.elementor-element-6237747, .elementor-7296 .elementor-element.elementor-element-7f06ede6, .elementor-45 .elementor-element.elementor-element-23bd53df, .elementor-41 .elementor-element.elementor-element-599f2f54 { left: 24px !important; right: auto !important; } .elementor-10 .elementor-element.elementor-element-5e98073, .elementor-39 .elementor-element.elementor-element-8a07f6c, .elementor-1965 .elementor-element.elementor-element-3cf9dcd, .elementor-1965 .elementor-element.elementor-element-9b29f06, .elementor-1965 .elementor-element.elementor-element-cf206a2, .elementor-2829 .elementor-element.elementor-element-28aefef0, .elementor-2829 .elementor-element.elementor-element-14a3ae5, .elementor-1953 .elementor-element.elementor-element-5c6be921, .elementor-1953 .elementor-element.elementor-element-06b6d40, .elementor-9820 .elementor-element.elementor-element-20233c94, .elementor-9820 .elementor-element.elementor-element-3cc34bb3, .elementor-1826 .elementor-element.elementor-element-b54057e, .elementor-1826 .elementor-element.elementor-element-168817d, .elementor-7296 .elementor-element.elementor-element-53c8f5a5, .elementor-45 .elementor-element.elementor-element-7b1472f3, .elementor-41 .elementor-element.elementor-element-24f44091 { right: 24px !important; left: auto !important; } /* Contents aligned inside whatever width Elementor gives the column. */ .elementor-10 .elementor-element.elementor-element-4c807f9 > .elementor-widget-wrap, .elementor-39 .elementor-element.elementor-element-8afa042 > .elementor-widget-wrap, .elementor-1965 .elementor-element.elementor-element-97b4950 > .elementor-widget-wrap, .elementor-1965 .elementor-element.elementor-element-b9ce6f4 > .elementor-widget-wrap, .elementor-1965 .elementor-element.elementor-element-7ca0716 > .elementor-widget-wrap, .elementor-2829 .elementor-element.elementor-element-4992ff19 > .elementor-widget-wrap, .elementor-2829 .elementor-element.elementor-element-9d55079 > .elementor-widget-wrap, .elementor-1953 .elementor-element.elementor-element-3be37e4d > .elementor-widget-wrap, .elementor-1953 .elementor-element.elementor-element-efe620b > .elementor-widget-wrap, .elementor-9820 .elementor-element.elementor-element-74f6851a > .elementor-widget-wrap, .elementor-9820 .elementor-element.elementor-element-5a5fb525 > .elementor-widget-wrap, .elementor-1826 .elementor-element.elementor-element-09482a5 > .elementor-widget-wrap, .elementor-1826 .elementor-element.elementor-element-6237747 > .elementor-widget-wrap, .elementor-7296 .elementor-element.elementor-element-7f06ede6 > .elementor-widget-wrap, .elementor-45 .elementor-element.elementor-element-23bd53df > .elementor-widget-wrap, .elementor-41 .elementor-element.elementor-element-599f2f54 > .elementor-widget-wrap { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; padding: 0 !important; } .elementor-10 .elementor-element.elementor-element-5e98073 > .elementor-widget-wrap, .elementor-39 .elementor-element.elementor-element-8a07f6c > .elementor-widget-wrap, .elementor-1965 .elementor-element.elementor-element-3cf9dcd > .elementor-widget-wrap, .elementor-1965 .elementor-element.elementor-element-9b29f06 > .elementor-widget-wrap, .elementor-1965 .elementor-element.elementor-element-cf206a2 > .elementor-widget-wrap, .elementor-2829 .elementor-element.elementor-element-28aefef0 > .elementor-widget-wrap, .elementor-2829 .elementor-element.elementor-element-14a3ae5 > .elementor-widget-wrap, .elementor-1953 .elementor-element.elementor-element-5c6be921 > .elementor-widget-wrap, .elementor-1953 .elementor-element.elementor-element-06b6d40 > .elementor-widget-wrap, .elementor-9820 .elementor-element.elementor-element-20233c94 > .elementor-widget-wrap, .elementor-9820 .elementor-element.elementor-element-3cc34bb3 > .elementor-widget-wrap, .elementor-1826 .elementor-element.elementor-element-b54057e > .elementor-widget-wrap, .elementor-1826 .elementor-element.elementor-element-168817d > .elementor-widget-wrap, .elementor-7296 .elementor-element.elementor-element-53c8f5a5 > .elementor-widget-wrap, .elementor-45 .elementor-element.elementor-element-7b1472f3 > .elementor-widget-wrap, .elementor-41 .elementor-element.elementor-element-24f44091 > .elementor-widget-wrap { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; align-items: center !important; padding: 0 !important; } .elementor-10 .elementor-element.elementor-element-4c807f9 .elementor-widget-image, .elementor-39 .elementor-element.elementor-element-8afa042 .elementor-widget-image, .elementor-1965 .elementor-element.elementor-element-97b4950 .elementor-widget-image, .elementor-1965 .elementor-element.elementor-element-b9ce6f4 .elementor-widget-image, .elementor-1965 .elementor-element.elementor-element-7ca0716 .elementor-widget-image, .elementor-2829 .elementor-element.elementor-element-4992ff19 .elementor-widget-image, .elementor-2829 .elementor-element.elementor-element-9d55079 .elementor-widget-image, .elementor-1953 .elementor-element.elementor-element-3be37e4d .elementor-widget-image, .elementor-1953 .elementor-element.elementor-element-efe620b .elementor-widget-image, .elementor-9820 .elementor-element.elementor-element-74f6851a .elementor-widget-image, .elementor-9820 .elementor-element.elementor-element-5a5fb525 .elementor-widget-image, .elementor-1826 .elementor-element.elementor-element-09482a5 .elementor-widget-image, .elementor-1826 .elementor-element.elementor-element-6237747 .elementor-widget-image, .elementor-7296 .elementor-element.elementor-element-7f06ede6 .elementor-widget-image, .elementor-45 .elementor-element.elementor-element-23bd53df .elementor-widget-image, .elementor-41 .elementor-element.elementor-element-599f2f54 .elementor-widget-image { width: auto !important; margin: 0 !important; text-align: left !important; } .elementor-10 .elementor-element.elementor-element-4c807f9 .elementor-widget-image img, .elementor-39 .elementor-element.elementor-element-8afa042 .elementor-widget-image img, .elementor-1965 .elementor-element.elementor-element-97b4950 .elementor-widget-image img, .elementor-1965 .elementor-element.elementor-element-b9ce6f4 .elementor-widget-image img, .elementor-1965 .elementor-element.elementor-element-7ca0716 .elementor-widget-image img, .elementor-2829 .elementor-element.elementor-element-4992ff19 .elementor-widget-image img, .elementor-2829 .elementor-element.elementor-element-9d55079 .elementor-widget-image img, .elementor-1953 .elementor-element.elementor-element-3be37e4d .elementor-widget-image img, .elementor-1953 .elementor-element.elementor-element-efe620b .elementor-widget-image img, .elementor-9820 .elementor-element.elementor-element-74f6851a .elementor-widget-image img, .elementor-9820 .elementor-element.elementor-element-5a5fb525 .elementor-widget-image img, .elementor-1826 .elementor-element.elementor-element-09482a5 .elementor-widget-image img, .elementor-1826 .elementor-element.elementor-element-6237747 .elementor-widget-image img, .elementor-7296 .elementor-element.elementor-element-7f06ede6 .elementor-widget-image img, .elementor-45 .elementor-element.elementor-element-23bd53df .elementor-widget-image img, .elementor-41 .elementor-element.elementor-element-599f2f54 .elementor-widget-image img { width: auto !important; max-width: clamp(112px, 20vw, 200px) !important; height: auto !important; display: block !important; } .elementor-10 .elementor-element.elementor-element-5e98073 .elementor-widget-nav-menu, .elementor-39 .elementor-element.elementor-element-8a07f6c .elementor-widget-nav-menu, .elementor-1965 .elementor-element.elementor-element-3cf9dcd .elementor-widget-nav-menu, .elementor-1965 .elementor-element.elementor-element-9b29f06 .elementor-widget-nav-menu, .elementor-1965 .elementor-element.elementor-element-cf206a2 .elementor-widget-nav-menu, .elementor-2829 .elementor-element.elementor-element-28aefef0 .elementor-widget-nav-menu, .elementor-2829 .elementor-element.elementor-element-14a3ae5 .elementor-widget-nav-menu, .elementor-1953 .elementor-element.elementor-element-5c6be921 .elementor-widget-nav-menu, .elementor-1953 .elementor-element.elementor-element-06b6d40 .elementor-widget-nav-menu, .elementor-9820 .elementor-element.elementor-element-20233c94 .elementor-widget-nav-menu, .elementor-9820 .elementor-element.elementor-element-3cc34bb3 .elementor-widget-nav-menu, .elementor-1826 .elementor-element.elementor-element-b54057e .elementor-widget-nav-menu, .elementor-1826 .elementor-element.elementor-element-168817d .elementor-widget-nav-menu, .elementor-7296 .elementor-element.elementor-element-53c8f5a5 .elementor-widget-nav-menu, .elementor-45 .elementor-element.elementor-element-7b1472f3 .elementor-widget-nav-menu, .elementor-41 .elementor-element.elementor-element-24f44091 .elementor-widget-nav-menu { width: auto !important; margin-left: auto !important; margin-right: 0 !important; } .elementor-10 .elementor-element.elementor-element-5e98073 .elementor-menu-toggle, .elementor-39 .elementor-element.elementor-element-8a07f6c .elementor-menu-toggle, .elementor-1965 .elementor-element.elementor-element-3cf9dcd .elementor-menu-toggle, .elementor-1965 .elementor-element.elementor-element-9b29f06 .elementor-menu-toggle, .elementor-1965 .elementor-element.elementor-element-cf206a2 .elementor-menu-toggle, .elementor-2829 .elementor-element.elementor-element-28aefef0 .elementor-menu-toggle, .elementor-2829 .elementor-element.elementor-element-14a3ae5 .elementor-menu-toggle, .elementor-1953 .elementor-element.elementor-element-5c6be921 .elementor-menu-toggle, .elementor-1953 .elementor-element.elementor-element-06b6d40 .elementor-menu-toggle, .elementor-9820 .elementor-element.elementor-element-20233c94 .elementor-menu-toggle, .elementor-9820 .elementor-element.elementor-element-3cc34bb3 .elementor-menu-toggle, .elementor-1826 .elementor-element.elementor-element-b54057e .elementor-menu-toggle, .elementor-1826 .elementor-element.elementor-element-168817d .elementor-menu-toggle, .elementor-7296 .elementor-element.elementor-element-53c8f5a5 .elementor-menu-toggle, .elementor-45 .elementor-element.elementor-element-7b1472f3 .elementor-menu-toggle, .elementor-41 .elementor-element.elementor-element-24f44091 .elementor-menu-toggle { margin-left: auto !important; margin-right: 0 !important; padding: 8px !important; font-size: 26px !important; line-height: 1 !important; } @media (min-width: 1025px) { .elementor-10 .elementor-element.elementor-element-4c807f9, .elementor-39 .elementor-element.elementor-element-8afa042, .elementor-1965 .elementor-element.elementor-element-97b4950, .elementor-1965 .elementor-element.elementor-element-b9ce6f4, .elementor-1965 .elementor-element.elementor-element-7ca0716, .elementor-2829 .elementor-element.elementor-element-4992ff19, .elementor-2829 .elementor-element.elementor-element-9d55079, .elementor-1953 .elementor-element.elementor-element-3be37e4d, .elementor-1953 .elementor-element.elementor-element-efe620b, .elementor-9820 .elementor-element.elementor-element-74f6851a, .elementor-9820 .elementor-element.elementor-element-5a5fb525, .elementor-1826 .elementor-element.elementor-element-09482a5, .elementor-1826 .elementor-element.elementor-element-6237747, .elementor-7296 .elementor-element.elementor-element-7f06ede6, .elementor-45 .elementor-element.elementor-element-23bd53df, .elementor-41 .elementor-element.elementor-element-599f2f54 { left: 48px !important; } .elementor-10 .elementor-element.elementor-element-5e98073, .elementor-39 .elementor-element.elementor-element-8a07f6c, .elementor-1965 .elementor-element.elementor-element-3cf9dcd, .elementor-1965 .elementor-element.elementor-element-9b29f06, .elementor-1965 .elementor-element.elementor-element-cf206a2, .elementor-2829 .elementor-element.elementor-element-28aefef0, .elementor-2829 .elementor-element.elementor-element-14a3ae5, .elementor-1953 .elementor-element.elementor-element-5c6be921, .elementor-1953 .elementor-element.elementor-element-06b6d40, .elementor-9820 .elementor-element.elementor-element-20233c94, .elementor-9820 .elementor-element.elementor-element-3cc34bb3, .elementor-1826 .elementor-element.elementor-element-b54057e, .elementor-1826 .elementor-element.elementor-element-168817d, .elementor-7296 .elementor-element.elementor-element-53c8f5a5, .elementor-45 .elementor-element.elementor-element-7b1472f3, .elementor-41 .elementor-element.elementor-element-24f44091 { right: 48px !important; } } @media (max-width: 767px) { .elementor-10 .elementor-element.elementor-element-4c807f9, .elementor-39 .elementor-element.elementor-element-8afa042, .elementor-1965 .elementor-element.elementor-element-97b4950, .elementor-1965 .elementor-element.elementor-element-b9ce6f4, .elementor-1965 .elementor-element.elementor-element-7ca0716, .elementor-2829 .elementor-element.elementor-element-4992ff19, .elementor-2829 .elementor-element.elementor-element-9d55079, .elementor-1953 .elementor-element.elementor-element-3be37e4d, .elementor-1953 .elementor-element.elementor-element-efe620b, .elementor-9820 .elementor-element.elementor-element-74f6851a, .elementor-9820 .elementor-element.elementor-element-5a5fb525, .elementor-1826 .elementor-element.elementor-element-09482a5, .elementor-1826 .elementor-element.elementor-element-6237747, .elementor-7296 .elementor-element.elementor-element-7f06ede6, .elementor-45 .elementor-element.elementor-element-23bd53df, .elementor-41 .elementor-element.elementor-element-599f2f54 { top: 14px !important; left: 16px !important; } .elementor-10 .elementor-element.elementor-element-5e98073, .elementor-39 .elementor-element.elementor-element-8a07f6c, .elementor-1965 .elementor-element.elementor-element-3cf9dcd, .elementor-1965 .elementor-element.elementor-element-9b29f06, .elementor-1965 .elementor-element.elementor-element-cf206a2, .elementor-2829 .elementor-element.elementor-element-28aefef0, .elementor-2829 .elementor-element.elementor-element-14a3ae5, .elementor-1953 .elementor-element.elementor-element-5c6be921, .elementor-1953 .elementor-element.elementor-element-06b6d40, .elementor-9820 .elementor-element.elementor-element-20233c94, .elementor-9820 .elementor-element.elementor-element-3cc34bb3, .elementor-1826 .elementor-element.elementor-element-b54057e, .elementor-1826 .elementor-element.elementor-element-168817d, .elementor-7296 .elementor-element.elementor-element-53c8f5a5, .elementor-45 .elementor-element.elementor-element-7b1472f3, .elementor-41 .elementor-element.elementor-element-24f44091 { top: 14px !important; right: 12px !important; } .elementor-10 .elementor-element.elementor-element-7cb437c, .elementor-39 .elementor-element.elementor-element-1d73466, .elementor-1965 .elementor-element.elementor-element-22a8005, .elementor-1965 .elementor-element.elementor-element-3e397e1, .elementor-1965 .elementor-element.elementor-element-8c39739, .elementor-2829 .elementor-element.elementor-element-7646ccf, .elementor-2829 .elementor-element.elementor-element-8b16a69, .elementor-1953 .elementor-element.elementor-element-1cc2f1cc, .elementor-1953 .elementor-element.elementor-element-f5bd3f2, .elementor-9820 .elementor-element.elementor-element-3ecaf944, .elementor-9820 .elementor-element.elementor-element-3524f7d, .elementor-1826 .elementor-element.elementor-element-27eb900, .elementor-1826 .elementor-element.elementor-element-423ffdb, .elementor-7296 .elementor-element.elementor-element-6737bb96, .elementor-45 .elementor-element.elementor-element-11356d79, .elementor-41 .elementor-element.elementor-element-15388572 { min-height: 72px !important; } } /* ========================================================================= * SITE HEADER — one header for every page * * Rendered by raas_render_header() in functions.php. Replaces sixteen per-page * copies whose Elementor-generated CSS is page-scoped, which made styling them * uniformly from outside unreliable — the same rule won on Home and lost on * Team, Contact and Awards. * * The old logo and menu widgets are hidden, NOT their sections: several of * those sections carry the page's hero background, which must stay. * ====================================================================== */ .elementor-10 .elementor-element.elementor-element-4c807f9, .elementor-39 .elementor-element.elementor-element-8afa042, .elementor-1965 .elementor-element.elementor-element-97b4950, .elementor-1965 .elementor-element.elementor-element-b9ce6f4, .elementor-1965 .elementor-element.elementor-element-7ca0716, .elementor-2829 .elementor-element.elementor-element-4992ff19, .elementor-2829 .elementor-element.elementor-element-9d55079, .elementor-1953 .elementor-element.elementor-element-3be37e4d, .elementor-1953 .elementor-element.elementor-element-efe620b, .elementor-9820 .elementor-element.elementor-element-74f6851a, .elementor-9820 .elementor-element.elementor-element-5a5fb525, .elementor-1826 .elementor-element.elementor-element-09482a5, .elementor-1826 .elementor-element.elementor-element-6237747, .elementor-7296 .elementor-element.elementor-element-7f06ede6, .elementor-45 .elementor-element.elementor-element-23bd53df, .elementor-41 .elementor-element.elementor-element-599f2f54, .elementor-10 .elementor-element.elementor-element-5e98073, .elementor-39 .elementor-element.elementor-element-8a07f6c, .elementor-1965 .elementor-element.elementor-element-3cf9dcd, .elementor-1965 .elementor-element.elementor-element-9b29f06, .elementor-1965 .elementor-element.elementor-element-cf206a2, .elementor-2829 .elementor-element.elementor-element-28aefef0, .elementor-2829 .elementor-element.elementor-element-14a3ae5, .elementor-1953 .elementor-element.elementor-element-5c6be921, .elementor-1953 .elementor-element.elementor-element-06b6d40, .elementor-9820 .elementor-element.elementor-element-20233c94, .elementor-9820 .elementor-element.elementor-element-3cc34bb3, .elementor-1826 .elementor-element.elementor-element-b54057e, .elementor-1826 .elementor-element.elementor-element-168817d, .elementor-7296 .elementor-element.elementor-element-53c8f5a5, .elementor-45 .elementor-element.elementor-element-7b1472f3, .elementor-41 .elementor-element.elementor-element-24f44091 { display: none !important; } .raas-header { position: absolute; top: 0; left: 0; right: 0; z-index: 9000; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(14px, 1.8vw, 26px) clamp(16px, 3.4vw, 48px); box-sizing: border-box; pointer-events: none; } .raas-header > * { pointer-events: auto; } .raas-header__logo { display: block; line-height: 0; flex: 0 0 auto; } .raas-header__logo img { width: auto; height: auto; max-width: clamp(118px, 15vw, 190px); display: block; } /* --- Burger --- */ .raas-header__toggle { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; border: 0; background: transparent; cursor: pointer; box-sizing: border-box; } .raas-header__toggle span { display: block; height: 2px; width: 100%; background: #cb2026; transition: transform 0.3s ease, opacity 0.2s ease; } .raas-header.is-open .raas-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .raas-header.is-open .raas-header__toggle span:nth-child(2) { opacity: 0; } .raas-header.is-open .raas-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Dropdown panel --- */ .raas-header__panel { position: absolute; top: calc(100% - 6px); right: clamp(16px, 3.4vw, 48px); min-width: 208px; background: #1a1a1a; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32); } .raas-header__panel[hidden] { display: none; } .raas-header__panel ul { list-style: none; margin: 0; padding: 10px 0; } .raas-header__panel li { margin: 0; } .raas-header__panel a { display: block; padding: 11px 30px; font-family: "Lato", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-align: center; text-transform: uppercase; color: #fff; text-decoration: none; transition: color 0.22s ease, background-color 0.22s ease; } .raas-header__panel a:hover, .raas-header__panel a:focus-visible { color: #cb2026; background: rgba(255, 255, 255, 0.05); } .raas-header__panel a.is-current { color: #cb2026; } /* Room at the top of the first section so the bar never covers content. */ body[class*="elementor-page-"] .elementor-location-single > .elementor > .elementor-section:first-of-type, body[class*="elementor-page-"] .elementor > .elementor-section:first-of-type { padding-top: clamp(58px, 6vw, 84px); } /* ========================================================================= * REMOVE DECORATIVE ADDITIONS TO THE MENU * * Earlier in this work I added things to the menu that were never asked for: * a circular hit area behind the burger that tinted red on hover, a red rule * sliding in beside each menu item, an indent on hover, and a blur behind the * panel. Reverted to plain: no tint, no overlay, no movement. * ====================================================================== */ .elementor-widget-nav-menu .elementor-menu-toggle, .elementor-widget-nav-menu .elementor-menu-toggle:hover, .elementor-widget-nav-menu .elementor-menu-toggle:focus, .raas-header__toggle, .raas-header__toggle:hover, .raas-header__toggle:focus { background: none !important; background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; } /* No red rule, and no indent shift on hover. */ .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item::before, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item::after { display: none !important; content: none !important; } .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item:focus-visible, .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active { padding-left: 26px !important; } /* Plain solid panel — no blur, no translucency picking up colour from behind. */ .elementor-widget-nav-menu .elementor-nav-menu--dropdown, .raas-header__panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: #1a1a1a !important; border: 0 !important; } /* The header bar itself paints nothing. */ .raas-header { background: none !important; background-color: transparent !important; box-shadow: none !important; } .raas-header::before, .raas-header::after { display: none !important; content: none !important; } .raas-header__panel a:hover, .raas-header__panel a:focus-visible { background: none !important; background-color: transparent !important; color: #cb2026 !important; }