.elementor-kit-4{--e-global-color-primary:#652C90;--e-global-color-secondary:#1375BB;--e-global-color-text:#4A4548;--e-global-color-accent:#4A9BD4;--e-global-color-primdark:#3A1D59;--e-global-color-primlite:#EAD8F8;--e-global-color-secdark:#0F5C93;--e-global-color-accentdark:#0C3F59;--e-global-color-accentlite:#C4E4FB;--e-global-color-ink:#221E1F;--e-global-color-muted:#8A8487;--e-global-color-line:#E6E3E4;--e-global-color-surface:#F8F7F8;--e-global-color-white:#FFFFFF;--e-global-color-formfield:#F8F7F8;--e-global-color-formtext:#221E1F;--e-global-color-formaccent:#1375BB;--e-global-color-formbtn:#1375BB;--e-global-color-formbtnhov:#0F5C93;--e-global-color-6c6dcad:#FFFFFF00;--e-global-color-ab07982:#D4A24A;--e-global-color-636cb57:#6CD6A6;--e-global-typography-primary-font-family:"futura-pt";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-secondary-font-family:"futura-pt";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"futura-pt";--e-global-typography-text-font-weight:500;--e-global-typography-text-text-transform:none;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"futura-pt";--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-display-font-family:"futura-pt";--e-global-typography-display-font-size:65px;--e-global-typography-display-font-weight:700;--e-global-typography-display-text-transform:none;--e-global-typography-display-line-height:1.1em;--e-global-typography-display-letter-spacing:0px;--e-global-typography-heading-1-font-family:"futura-pt";--e-global-typography-heading-1-font-size:40px;--e-global-typography-heading-1-font-weight:700;--e-global-typography-heading-1-text-transform:none;--e-global-typography-heading-1-line-height:1.15em;--e-global-typography-heading-1-letter-spacing:0px;--e-global-typography-heading-2-font-family:"futura-pt";--e-global-typography-heading-2-font-size:32px;--e-global-typography-heading-2-font-weight:700;--e-global-typography-heading-2-text-transform:none;--e-global-typography-heading-2-line-height:1.2em;--e-global-typography-heading-2-letter-spacing:0px;--e-global-typography-heading-3-font-family:"futura-pt";--e-global-typography-heading-3-font-size:24px;--e-global-typography-heading-3-font-weight:700;--e-global-typography-heading-3-text-transform:none;--e-global-typography-heading-3-line-height:1.3em;--e-global-typography-heading-3-letter-spacing:0px;--e-global-typography-heading-4-font-family:"futura-pt";--e-global-typography-heading-4-font-size:20px;--e-global-typography-heading-4-font-weight:700;--e-global-typography-heading-4-text-transform:none;--e-global-typography-heading-4-line-height:1.35em;--e-global-typography-heading-4-letter-spacing:0px;--e-global-typography-intro-font-family:"futura-pt";--e-global-typography-intro-font-size:21px;--e-global-typography-intro-font-weight:500;--e-global-typography-intro-text-transform:none;--e-global-typography-intro-line-height:1.3em;--e-global-typography-intro-letter-spacing:0px;--e-global-typography-body-font-family:"futura-pt";--e-global-typography-body-font-size:18px;--e-global-typography-body-font-weight:500;--e-global-typography-body-text-transform:none;--e-global-typography-body-line-height:1.65em;--e-global-typography-body-letter-spacing:0px;--e-global-typography-caption-font-family:"futura-pt";--e-global-typography-caption-font-size:14px;--e-global-typography-caption-font-weight:500;--e-global-typography-caption-text-transform:none;--e-global-typography-caption-line-height:1.5em;--e-global-typography-caption-letter-spacing:0px;--e-global-typography-eyebrow-font-family:"futura-pt";--e-global-typography-eyebrow-font-size:14px;--e-global-typography-eyebrow-font-weight:700;--e-global-typography-eyebrow-text-transform:uppercase;--e-global-typography-eyebrow-line-height:1.4em;--e-global-typography-eyebrow-letter-spacing:0.12em;--e-global-typography-menu-font-family:"futura-pt";--e-global-typography-menu-font-size:16px;--e-global-typography-menu-font-weight:700;--e-global-typography-menu-text-transform:uppercase;--e-global-typography-menu-line-height:1.4em;--e-global-typography-menu-letter-spacing:0px;--e-global-typography-form-label-font-family:"futura-pt";--e-global-typography-form-label-font-size:16px;--e-global-typography-form-label-font-weight:700;--e-global-typography-form-label-text-transform:none;--e-global-typography-form-label-line-height:1.4em;--e-global-typography-form-label-letter-spacing:0px;--e-global-typography-form-input-font-family:"futura-pt";--e-global-typography-form-input-font-size:16px;--e-global-typography-form-input-font-weight:500;--e-global-typography-form-input-text-transform:none;--e-global-typography-form-input-line-height:1.5em;--e-global-typography-form-input-letter-spacing:0px;--e-global-typography-form-button-font-family:"futura-pt";--e-global-typography-form-button-font-size:12px;--e-global-typography-form-button-font-weight:700;--e-global-typography-form-button-text-transform:uppercase;--e-global-typography-form-button-line-height:1.2em;--e-global-typography-form-button-letter-spacing:0.12em;--e-global-typography-button-font-family:"futura-pt";--e-global-typography-button-font-size:16px;--e-global-typography-button-font-weight:700;--e-global-typography-button-text-transform:uppercase;--e-global-typography-button-line-height:1.4em;--e-global-typography-button-letter-spacing:0em;color:var( --e-global-color-text );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-secondary );font-family:var( --e-global-typography-button-font-family ), Sans-serif;font-size:var( --e-global-typography-button-font-size );font-weight:var( --e-global-typography-button-font-weight );text-transform:var( --e-global-typography-button-text-transform );line-height:var( --e-global-typography-button-line-height );letter-spacing:var( --e-global-typography-button-letter-spacing );color:var( --e-global-color-white );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-secondary );border-radius:999px 999px 999px 999px;padding:14px 32px 14px 32px;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-white );}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-primary );}.elementor-kit-4 a:hover{color:var( --e-global-color-primdark );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{font-size:var( --e-global-typography-button-font-size );line-height:var( --e-global-typography-button-line-height );letter-spacing:var( --e-global-typography-button-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{--e-global-typography-display-font-size:40px;--e-global-typography-heading-1-font-size:30px;--e-global-typography-heading-2-font-size:26px;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{font-size:var( --e-global-typography-button-font-size );line-height:var( --e-global-typography-button-line-height );letter-spacing:var( --e-global-typography-button-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* Media frames — lock an image widget to a fixed aspect ratio. Every variant is listed because the modifiers are used on their own. */ .media-frame img, .media-frame--wide img, .media-frame--square img, .media-frame--tall img { width: 100% !important; height: auto !important; object-fit: cover !important; object-position: center center !important; display: block; } .media-frame img { aspect-ratio: 3 / 2 !important; } .media-frame--wide img { aspect-ratio: 16 / 9 !important; } .media-frame--square img { aspect-ratio: 1 / 1 !important; } .media-frame--tall img { aspect-ratio: 4 / 5 !important; } .media-frame--top img { object-position: center top !important; } .media-frame--bottom img { object-position: center bottom !important; } /* Box frames — lock a CONTAINER to a fixed shape: add box-square, box-wide or box-tall in Advanced > CSS Classes. Height follows the container's width, so the shape holds at every screen size. Leave the container's Min Height empty (a min height overrides the ratio). Content that does not fit makes the box taller instead of being cut off. New V4 Flexbox / Div Block elements have a native Aspect Ratio control under Style > Size and do not need these. ⚠️ In a row, Elementor stretches children to the tallest sibling, which overrides the ratio (tested: a square beside a text column measured 294x757). So the boxes default to top alignment through Elementor's own --align-self variable. The container's Advanced > Align Self control still wins, because Elementor writes it with a more specific .elementor-kit-4. */ .e-con.box-square, .e-con.box-wide, .e-con.box-tall { --align-self: flex-start; } .box-square { aspect-ratio: 1 / 1; } .box-wide { aspect-ratio: 16 / 9; } .box-tall { aspect-ratio: 4 / 5; } /* ⚠️ The anti-spam honeypot renders as an ordinary visible field ("Leave blank"). Gravity Forms 2.10 ships no rule to hide it and relies on the theme, so a blueprint site shows it to visitors and to spam bots that read CSS. Hide it everywhere; a honeypot only works unseen. Found on BBCC contact 2026-09-18. */ .gform_wrapper .gfield--type-honeypot, .gform_wrapper .gform_validation_container { display: none !important; } /* ===== GRAVITY FORMS ===== Nothing here is a literal value. Everything reads a Global Colour or Global Font, so forms restyle from Site Settings like the rest of the site: Global Colors : Form Field / Form Text / Form Accent / Form Button / Form Button Hover Global Fonts : Form Label / Form Input / Form Button GF's Orbital theme is driven by its own --gf-* variables. It declares them on .gform-theme--framework and its stylesheet loads AFTER the Elementor kit, so a plain .gform_wrapper block loses the cascade — hence the doubled class. */ .gform_wrapper.gform-theme, .gform_wrapper.gform-theme--framework, .gform_wrapper.gform-theme--api { --gf-ctrl-bg-color: var(--e-global-color-formfield); --gf-ctrl-border-color: transparent; --gf-ctrl-color: var(--e-global-color-formtext); --gf-ctrl-label-color-primary: var(--e-global-color-formtext); --gf-ctrl-radius: 0; --gf-color-danger: var(--e-global-color-formaccent); --gf-ctrl-btn-bg-color-primary: var(--e-global-color-formbtn); --gf-ctrl-btn-bg-color-hover-primary: var(--e-global-color-formbtnhov); --gf-ctrl-btn-color-primary: var(--e-global-color-white); --gf-ctrl-btn-radius: var(--btn-radius, 999px); } /* A Gravity Form sitting on a dark band: the label and the (Required) marker are coloured for a light background by default and disappear. Add .form-on-dark to the container holding the form. */ .form-on-dark .gform_wrapper .gfield_label, .form-on-dark .gform_wrapper .gform-field-label { color: var(--e-global-color-white) !important; } .form-on-dark .gform_wrapper .gfield_required { color: var(--e-global-color-primlite) !important; } /* Gravity Forms puts 24px between the last field and the submit. Against a full-width input that reads as crowded, so the kit sets its own. One value, applied to every form on the site — a form on a dark band is no different. */ :root { --form-submit-gap: 36px; } /* on :root so YOUR SETTINGS can reach it */ .gform_wrapper .gform_footer, .gform_wrapper .gform-footer { margin-top: var(--form-submit-gap, 36px) !important; padding-top: 0 !important; } /* ⚠️ The submit button's hover colour is Form Button Hover, which is Primary — the same colour as the dark band it sits on, so hovering made the button disappear. On a dark band it takes the outline treatment instead: this is `btn-outline-dark` + `btn-sm`, matched value for value, so the form button and a real Elementor button still look like the same system. */ .form-on-dark .gform_wrapper input[type="submit"], .form-on-dark .gform_wrapper .gform_button, .form-on-dark .gform_wrapper button.gform_button, .form-on-dark .gform_wrapper .gform_footer input[type="submit"] { background-color: transparent !important; color: var(--e-global-color-white) !important; border: 2px solid var(--e-global-color-white) !important; padding: var(--btn-pad-sm, 10px 20px) !important; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .form-on-dark .gform_wrapper input[type="submit"]:hover, .form-on-dark .gform_wrapper .gform_button:hover, .form-on-dark .gform_wrapper input[type="submit"]:focus, .form-on-dark .gform_wrapper .gform_button:focus { background-color: transparent !important; border-color: var(--e-global-color-primlite) !important; color: var(--e-global-color-primlite) !important; } /* Explicit rules as well as the variables: they cover the legacy gravity-theme (which has no --gf-* variables at all) and anything Orbital styles directly. */ .gform_wrapper .gfield input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .gform_wrapper .gfield textarea, .gform_wrapper .gfield select { font-family: var(--e-global-typography-form-input-font-family), sans-serif; font-size: var(--e-global-typography-form-input-font-size); font-weight: var(--e-global-typography-form-input-font-weight); line-height: var(--e-global-typography-form-input-line-height); color: var(--e-global-color-formtext); background-color: var(--e-global-color-formfield) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 16px; } .gform_wrapper .gfield input:focus, .gform_wrapper .gfield textarea:focus, .gform_wrapper .gfield select:focus { outline: 2px solid var(--e-global-color-formaccent); outline-offset: 0; } .gform_wrapper .gfield input::placeholder, .gform_wrapper .gfield textarea::placeholder { color: var(--e-global-color-formtext); opacity: .55; } .gform_wrapper .gfield_label, .gform_wrapper .gform-field-label { font-family: var(--e-global-typography-form-label-font-family), sans-serif; font-size: var(--e-global-typography-form-label-font-size); font-weight: var(--e-global-typography-form-label-font-weight); color: var(--e-global-color-formtext); margin-bottom: 8px; } .gform_wrapper .gfield_required { color: var(--e-global-color-formaccent); font-style: italic; font-weight: 400; } .gform_wrapper input[type="submit"], .gform_wrapper .gform_button, .gform_wrapper button.gform_button, .gform_wrapper .gform_footer input[type="submit"] { background-color: var(--e-global-color-formbtn) !important; color: var(--e-global-color-white) !important; font-family: var(--e-global-typography-form-button-font-family), sans-serif !important; font-size: var(--e-global-typography-form-button-font-size) !important; font-weight: var(--e-global-typography-form-button-font-weight) !important; text-transform: var(--e-global-typography-form-button-text-transform) !important; letter-spacing: var(--e-global-typography-form-button-letter-spacing) !important; border: none !important; border-radius: var(--btn-radius, 999px) !important; padding: 16px 34px !important; cursor: pointer; transition: background-color .25s ease; } .gform_wrapper input[type="submit"]:hover, .gform_wrapper .gform_button:hover, .gform_wrapper input[type="submit"]:focus, .gform_wrapper .gform_button:focus { background-color: var(--e-global-color-formbtnhov) !important; color: var(--e-global-color-white) !important; } /* ===== BUTTONS ===== Four designs, taken straight from the block library, plus one size class that stacks with any of them. .btn-solid fill Secondary, white text (13 blocks) .btn-outline-dark transparent on photos/dark bands (16 blocks) .btn-light white on colour (2 blocks) .btn-outline-light transparent on white (1 block) .btn-sm the tighter card size — add it to any of the above Type the class into the button widget's Advanced > CSS Classes box. For the default size, use no size class and it follows Site Settings > Buttons. Every colour reads a Global Colour, so the whole set restyles from Site Settings > Global Colors. Nothing here is a literal brand value. The class is doubled in each .elementor-kit-4 for the same reason the Gravity Forms block does it: it has to out-rank the kit's own Theme Style rule. */ :root { /* the one size step that exists in the library: 10/20 against the Theme Style's 14/32. Change it here and every .btn-sm follows. */ --btn-pad-sm: 10px 20px; } /* ===================================================================== SITE HEADER ===================================================================== Two hooks, and that's the whole header system: .site-header on the header's ROOT container (mobile panel anchoring) .site-nav on the header's Mega Menu widget #nav-cta CSS ID on the one menu item that should look like a button (menu item > Content > CSS ID). Leave it off and there is simply no button — nothing here applies. Tune the header here, in one place: */ :root { --nav-gutter: 12px; /* mobile card inset from the screen edge */ --nav-row-pad: 17px 20px; --nav-card-radius: 14px; --nav-cta-gap: 20px; /* space before the CTA on desktop */ --nav-card-max-offset: 120px; /* viewport left above/below the open card */ } /* --------------------------------------------------------------------- ⚠️ The .elementor-kit-4s below are Elementor's OWN markup (.e-n-menu-*). They are private to the Mega Menu widget and have been renamed by Elementor before. If a plugin update breaks the header, this is the only section to check — nothing else in this file depends on them. --------------------------------------------------------------------- */ /* --- mobile: the panel opens from the bottom of the HEADER, not the toggle --- ⚠️ The dropdown panel is absolutely positioned, and its containing block was `.site-nav` — the menu WIDGET, which on mobile is only as tall as the toggle icon. So the panel opened 28px too high and sat on top of the logo. Stretching the widget does not fix it: `align-self: stretch` stretches it inside `.e-con-inner`, so the header's own bottom padding is still left over (it got the panel from 53px to 66px against an 81px bar — closer, still wrong). The panel has to resolve against the HEADER, so `.site-header` on the root container is the positioned ancestor and everything between it and the panel is forced back to static. Then `top: 100%` really is the header's bottom. */ @media (max-width: 1024px) { .site-header { position: relative; } /* ⚠️ Elementor gives EVERY container `position: relative` by default, so the row holding the logo and the nav was the real offset parent — the panel resolved against a 52px row and still opened 31px inside the bar. Every container inside the header has to go static so the root is the only positioned ancestor left. The panel is `.e-n-menu-wrapper`, not an `.e-con`, so it keeps its own absolute positioning. */ .site-header .e-con { position: static !important; } .site-header .site-nav, .site-header .site-nav .e-n-menu { position: static !important; } .site-header .e-n-menu-wrapper { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; } } /* --- mobile: the mega panel becomes a plain stacked list --- The dropdown content is built for a full-bleed DESKTOP mega menu: a row of columns, a utility strip, and a min-height so the panel has presence. Left alone at 390px that leaks straight into the accordion — the panel rendered 390px wide inside a 366px card (so it overhung by 12px), the columns kept their desktop widths, and the 420px min-height opened a large empty gap under the links. Everything below only undoes desktop layout; nothing here restyles content. */ @media (max-width: 1024px) { /* the panel is sized for a full-bleed desktop mega menu — bring it back to the width of the card it now lives in */ .site-header .e-n-menu-content { width: 100% !important; max-width: 100% !important; inset-inline: auto !important; margin-inline: 0 !important; } /* columns stack, and lose the desktop min-height that leaves a dead gap */ .site-header .e-n-menu-content .e-con { width: 100% !important; max-width: 100% !important; flex-basis: auto !important; flex-direction: column !important; align-items: stretch !important; min-height: 0 !important; row-gap: 14px !important; column-gap: 0 !important; /* ⚠️⚠️ nowrap is not optional. These containers carry `flex-wrap: wrap` from the desktop design, and in a COLUMN flex container wrapping does not push overflow onto a new ROW — it pushes it into a new COLUMN to the RIGHT. So the promo card landed at x=338 in a 366px card and ran 246px off the side, while every other column stacked correctly. Setting the direction to column is therefore only half the job. Whenever a row is flipped to a column, its wrap has to be turned off with it. */ flex-wrap: nowrap !important; /* ⚠️ And nowrap needs shrink turned off with it. Once the items can no longer wrap away, flex-shrink (1 by default) squeezes them to fit the height instead — a 185px group compressed into 116px, so each section heading printed on top of the previous list's last link. Overlapping text, from a rule that was only meant to stop a column appearing. Natural height + the card's own max-height and overflow-y is what makes a long menu scroll rather than collapse. */ flex-shrink: 0 !important; } .site-header .e-n-menu-content .e-con .e-con { padding: 0 !important; } .site-header .e-n-menu-content > .e-con { padding: 0 !important; } .site-header .e-n-menu-content > .e-con > .e-con { padding: 10px 20px 18px !important; } /* A mega menu has more in it than a phone screen is tall. Let the CARD scroll rather than run off the bottom of the window with no way back. */ .site-header .e-n-menu-heading { max-height: calc(100vh - var(--nav-card-max-offset, 120px)) !important; overflow-y: auto !important; overscroll-behavior: contain; } } /* --- desktop: the dropdown hugs the bar ------------------------------------ Two things put a visible strip of page between the header and its dropdown, and it is worst once the header is stuck, where the whole bar is only 61px: 1. Elementor gives `.e-n-menu-content` a 26px transparent TOP PADDING as a hover bridge, so the pointer can cross from the item to the panel. 2. The panel hangs off the NAV, not the header — and the nav sits inside the container's own padding, so it ends ~9px short of the bar. ⚠️ Zeroing the padding alone is NOT enough. It makes the panel start inside the bar, and the panel's z-index is 2147483620 against the header's 99 — so it paints OVER the header's bottom border and shadow. So the panel is anchored to the HEADER instead. Every ancestor between the two has to go static or the panel resolves against the nav and lands short — the same lesson as the mobile panel. No hover bridge is needed once the two are flush. */ @media (min-width: 1025px) { .site-header { position: relative; } .site-header .e-con, .site-header .site-nav, .site-header .e-n-menu, .site-header .e-n-menu-wrapper { position: static !important; } .site-header .e-n-menu-content { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; padding-top: 0 !important; } } /* --- desktop: one line, full height so the panel hangs off the bottom edge --- */ @media (min-width: 1025px) { .site-nav { flex-shrink: 0; align-self: stretch; /* panel hangs from the header's edge, not the nav's middle */ } .site-nav .e-n-menu, .site-nav .e-n-menu-wrapper, .site-nav .e-n-menu-heading { height: 100%; } .site-nav .e-n-menu-heading { align-items: center; /* Elementor wraps the row, which drops an item to a second line */ flex-wrap: nowrap !important; min-width: max-content; } .site-nav .e-n-menu-title { white-space: nowrap; } } /* --- mobile: the stacked card --- */ @media (max-width: 1024px) { /* Elementor pins the wrapper to a fixed height via top/bottom insets, which clips the list to one row; and spans it edge to edge with negative left/right insets, so a margin can't inset it. Use it as the scroll area and gutter only, and put the card on the list inside it. */ .site-nav .e-n-menu-wrapper { height: auto !important; bottom: auto !important; max-height: calc(100vh - 140px); overflow-y: auto; overflow-x: hidden; padding-inline: var(--nav-gutter); background-color: transparent !important; } .site-nav .e-n-menu { justify-content: center; /* toggle on the logo's centre line */ } .site-nav .e-n-menu-heading { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; width: 100% !important; gap: 0 !important; padding-block: 6px; background-color: var(--e-global-color-white); border-radius: var(--nav-card-radius); box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .18); } .site-nav .e-n-menu-item { width: 100% !important; } /* each row: label left, chevron right, hairline between */ .site-nav .e-n-menu-title { justify-content: space-between !important; width: 100% !important; height: auto !important; padding: var(--nav-row-pad) !important; background-color: transparent !important; border-bottom: 1px solid var(--e-global-color-line) !important; } .site-nav .e-n-menu-item:last-child .e-n-menu-title { border-bottom: 0 !important; } .site-nav .e-n-menu-title-text { font-family: var(--e-global-typography-menu-font-family), sans-serif; font-size: var(--e-global-typography-menu-font-size); font-weight: var(--e-global-typography-menu-font-weight); letter-spacing: var(--e-global-typography-menu-letter-spacing); text-transform: var(--e-global-typography-menu-text-transform); } /* an expanded submenu sits indented under its row, no card of its own */ .site-nav .e-n-menu-content { box-shadow: none !important; border-radius: 0 !important; } .site-nav .e-n-menu-content > .e-con { padding-inline: 20px !important; } } /* --- the CTA item ---------------------------------------------------- Keyed to the id, never to position, so reordering, renaming or adding items can't move the button onto the wrong one. Not one literal brand value: colour and type come from the globals; radius and padding come from --btn-radius / --btn-padding, which the solmos-button-radius mu-plugin publishes straight off Site Settings > Buttons. This CTA and a real .btn-solid stay in step by construction. Everything sits on #nav-cta itself — no parent .elementor-kit-4 needed, so there is no :has() dependency. The divider above it on mobile is just the previous row's own hairline. */ #nav-cta, #nav-cta-sticky { background-color: var(--e-global-color-secondary); border: 2px solid var(--e-global-color-secondary); border-radius: var(--btn-radius, 999px); padding: var(--btn-padding, 14px 32px) !important; transition: background-color .2s ease, border-color .2s ease; } #nav-cta:hover, #nav-cta-sticky:hover { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); } #nav-cta .e-n-menu-title-text, #nav-cta-sticky .e-n-menu-title-text { color: var(--e-global-color-white) !important; font-family: var(--e-global-typography-button-font-family), sans-serif; font-size: var(--e-global-typography-button-font-size); font-weight: var(--e-global-typography-button-font-weight); letter-spacing: var(--e-global-typography-button-letter-spacing); text-transform: var(--e-global-typography-button-text-transform); } /* a CTA never needs the dropdown chevron */ #nav-cta .e-n-menu-dropdown-icon, #nav-cta-sticky .e-n-menu-dropdown-icon { display: none; } @media (min-width: 1025px) { #nav-cta, #nav-cta-sticky { margin-inline-start: var(--nav-cta-gap); } } @media (max-width: 1024px) { #nav-cta, #nav-cta-sticky { justify-content: center !important; /* .site-nav forces every row to width:100%, which would eat these margins */ width: auto !important; margin: 12px 20px 16px; /* .site-nav clears every row's background; the CTA keeps its fill */ background-color: var(--e-global-color-secondary) !important; border-bottom: 2px solid var(--e-global-color-secondary) !important; } #nav-cta:hover, #nav-cta-sticky:hover { background-color: var(--e-global-color-primary) !important; border-bottom-color: var(--e-global-color-primary) !important; } } /* --- overlay variant --------------------------------------------------- .header-overlay on the header's root container: no fill, and pulled up by its own height so the block below starts at the top of the page and the header floats over it. ⚠️ The pull-up has to equal the header's height, and CSS can't read that. It's one number per breakpoint, here: */ :root { --header-overlay-h: 150px; /* desktop bar height */ --header-overlay-h-mobile: 80px; } .header-overlay { position: relative; z-index: 20; background-color: transparent !important; border-bottom: 0 !important; margin-bottom: calc(-1 * var(--header-overlay-h)); } @media (max-width: 1024px) { .header-overlay { margin-bottom: calc(-1 * var(--header-overlay-h-mobile)); } } /* Over a photo the nav has to be light. Desktop only — on mobile the items live inside the white card, where they must stay dark. */ @media (min-width: 1025px) { .header-overlay .e-n-menu-title-text { color: var(--e-global-color-white) !important; } .header-overlay .e-n-menu-title:hover .e-n-menu-title-text { color: var(--e-global-color-primlite) !important; } .header-overlay .e-n-menu-dropdown-icon svg { fill: var(--e-global-color-white); } /* the open panel is still a solid white sheet, so its own text stays dark */ .header-overlay .e-n-menu-content .e-n-menu-title-text { color: var(--e-global-color-ink) !important; } } /* the toggle always sits on the hero, at every size */ .header-overlay .e-n-menu-toggle svg, .header-overlay .e-n-menu-toggle i { fill: var(--e-global-color-white); color: var(--e-global-color-white); } .header-overlay .e-n-menu-toggle:hover svg, .header-overlay .e-n-menu-toggle:hover i, .header-overlay .e-n-menu-toggle[aria-expanded="true"] svg, .header-overlay .e-n-menu-toggle[aria-expanded="true"] i { fill: var(--e-global-color-primlite); color: var(--e-global-color-primlite); } /* the overlay's CTA carries its own id, since ids are unique per page */ #nav-cta-overlay { background-color: var(--e-global-color-secondary); border: 2px solid var(--e-global-color-secondary); border-radius: var(--btn-radius, 999px); padding: var(--btn-padding, 14px 32px) !important; transition: background-color .2s ease, border-color .2s ease; } #nav-cta-overlay:hover { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); } #nav-cta-overlay .e-n-menu-title-text { color: var(--e-global-color-white) !important; font-family: var(--e-global-typography-button-font-family), sans-serif; font-size: var(--e-global-typography-button-font-size); font-weight: var(--e-global-typography-button-font-weight); letter-spacing: var(--e-global-typography-button-letter-spacing); text-transform: var(--e-global-typography-button-text-transform); } #nav-cta-overlay .e-n-menu-dropdown-icon { display: none; } @media (min-width: 1025px) { #nav-cta-overlay { margin-inline-start: var(--nav-cta-gap); } } @media (max-width: 1024px) { #nav-cta-overlay { justify-content: center !important; width: auto !important; margin: 12px 20px 16px; background-color: var(--e-global-color-secondary) !important; border-bottom: 2px solid var(--e-global-color-secondary) !important; } } /* --- dropdown panel: line its contents up with a boxed header ---------- Add .nav-panel to a panel wrapper (the container holding the columns row and the utility strip). The panel is full-bleed while the header bar is boxed, so without this the columns start at the panel's own padding while the logo starts at the boxed container's edge. Pads each row in by however far the box is inset. Backgrounds still run full width — only the contents move — which keeps the utility strip's tint bleeding edge to edge. The gutter floors at 40px to match the bar. */ .nav-panel.nav-panel > .e-con { padding-inline: max(40px, calc((100% - var(--container-max-width, 1200px)) / 2)); } /* Keep every dropdown the same depth so the panel doesn't jump between items. A floor, not a fixed height — a panel with more content still grows. The columns are capped by the boxed container, so the tallest panel measures the same at every width; this isn't a value that drifts with the viewport. */ .nav-panel.nav-panel > .e-con:first-child { min-height: var(--nav-panel-min-height, 420px); } /* --- the toggle (hamburger) ------------------------------------------- Elementor renders it as a real