.elementor-23471 .elementor-element.elementor-element-e5d2001{--display:flex;--min-height:87px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--margin-top:0px;--margin-bottom:-87px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:32px;--padding-right:32px;--z-index:100;}.elementor-23471 .elementor-element.elementor-element-e5d2002.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-23471 .elementor-element.elementor-element-e5d2002{text-align:start;}.elementor-23471 .elementor-element.elementor-element-e5d2002 img{width:239px;}.elementor-23471 .elementor-element.elementor-element-e5d2005.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-23471 .elementor-element.elementor-element-e5d2005{text-align:start;}.elementor-23471 .elementor-element.elementor-element-e5d2005 img{width:200px;}.elementor-23471 .elementor-element.elementor-element-e5d2006.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-23471 .elementor-element.elementor-element-e5d2006{text-align:start;}.elementor-23471 .elementor-element.elementor-element-e5d2006 img{width:200px;}.elementor-23471 .elementor-element.elementor-element-e5d2003.elementor-element{--flex-grow:1;--flex-shrink:1;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-menu-toggle{margin-left:auto;background-color:rgba(255,255,255,0);}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu .elementor-item{font-family:"Inter", Sans-serif;font-size:13px;font-weight:500;text-transform:none;line-height:20px;letter-spacing:0px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-uicore_white );fill:var( --e-global-color-uicore_white );padding-left:20px;padding-right:20px;padding-top:10px;padding-bottom:10px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main .elementor-item:hover, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-uicore_primary );fill:var( --e-global-color-uicore_primary );}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-uicore_white );}.elementor-23471 .elementor-element.elementor-element-e5d2003{--e-nav-menu-horizontal-menu-item-margin:calc( 0px / 2 );--nav-menu-icon-size:24px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:0px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-menu-toggle{color:var( --e-global-color-uicore_light );fill:var( --e-global-color-uicore_light );}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown{background-color:#2F11C7;border-radius:8px 8px 8px 8px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a:hover, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a:focus, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a.highlighted, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-menu-toggle:hover, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-menu-toggle:focus{color:var( --e-global-color-uicore_primary );}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a:hover, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a:focus, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a.highlighted{background-color:rgba(0,0,0,0);}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a.elementor-item-active{color:var( --e-global-color-uicore_primary );background-color:rgba(0,0,0,0);}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown .elementor-item, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Inter", Sans-serif;font-size:18px;font-weight:600;text-transform:none;letter-spacing:0px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:8px;border-top-right-radius:8px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:8px;border-bottom-left-radius:8px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:1px !important;}.elementor-23471 .elementor-element.elementor-element-e5d2003 div.elementor-menu-toggle{color:#ffffff;}.elementor-23471 .elementor-element.elementor-element-e5d2003 div.elementor-menu-toggle svg{fill:#ffffff;}.elementor-23471 .elementor-element.elementor-element-e5d2003 div.elementor-menu-toggle:hover, .elementor-23471 .elementor-element.elementor-element-e5d2003 div.elementor-menu-toggle:focus{color:#ffffff;}.elementor-23471 .elementor-element.elementor-element-e5d2003 div.elementor-menu-toggle:hover svg, .elementor-23471 .elementor-element.elementor-element-e5d2003 div.elementor-menu-toggle:focus svg{fill:#ffffff;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-menu-toggle:hover, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-menu-toggle:focus{background-color:rgba(255,255,255,0);}.elementor-23471 .elementor-element.elementor-element-e5d2004 .elementor-button{background-color:var( --e-global-color-uicore_primary );font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;text-transform:none;line-height:20px;letter-spacing:0px;fill:var( --e-global-color-uicore_white );color:var( --e-global-color-uicore_white );border-radius:6px 6px 6px 6px;padding:10px 20px 10px 20px;}.elementor-23471 .elementor-element.elementor-element-e5d2004 .elementor-button:hover, .elementor-23471 .elementor-element.elementor-element-e5d2004 .elementor-button:focus{background-color:#2400da;color:var( --e-global-color-uicore_white );}.elementor-23471 .elementor-element.elementor-element-e5d2004.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-23471 .elementor-element.elementor-element-e5d2004 .elementor-button:hover svg, .elementor-23471 .elementor-element.elementor-element-e5d2004 .elementor-button:focus svg{fill:var( --e-global-color-uicore_white );}.elementor-23471 .elementor-element.elementor-element-e5d2007 .elementor-button{background-color:var( --e-global-color-uicore_primary );font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;text-transform:none;line-height:20px;letter-spacing:0px;fill:var( --e-global-color-uicore_white );color:var( --e-global-color-uicore_white );box-shadow:0px 8px 24px 0px rgba(22, 28, 45, 0.24);border-radius:6px 6px 6px 6px;padding:14px 22px 14px 22px;}.elementor-23471 .elementor-element.elementor-element-e5d2007 .elementor-button:hover, .elementor-23471 .elementor-element.elementor-element-e5d2007 .elementor-button:focus{background-color:#2400da;color:var( --e-global-color-uicore_white );}.elementor-23471 .elementor-element.elementor-element-e5d2007{width:auto;max-width:auto;bottom:16px;z-index:90;}body:not(.rtl) .elementor-23471 .elementor-element.elementor-element-e5d2007{right:16px;}body.rtl .elementor-23471 .elementor-element.elementor-element-e5d2007{left:16px;}.elementor-23471 .elementor-element.elementor-element-e5d2007 .elementor-button:hover svg, .elementor-23471 .elementor-element.elementor-element-e5d2007 .elementor-button:focus svg{fill:var( --e-global-color-uicore_white );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-23471 .elementor-element.elementor-element-e5d2001{--width:100%;}}@media(max-width:1024px){.elementor-23471 .elementor-element.elementor-element-e5d2001{--min-height:72px;--margin-top:0px;--margin-bottom:-72px;--margin-left:0px;--margin-right:0px;--padding-top:16px;--padding-bottom:16px;--padding-left:32px;--padding-right:32px;}.elementor-23471 .elementor-element.elementor-element-e5d2002 img{width:192px;}.elementor-23471 .elementor-element.elementor-element-e5d2005 img{width:200px;}.elementor-23471 .elementor-element.elementor-element-e5d2006 img{width:200px;}.elementor-23471 .elementor-element.elementor-element-e5d2003.elementor-element{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown .elementor-item, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:18px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown{border-radius:0px 0px 0px 0px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown a{padding-top:14px;padding-bottom:14px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:18px !important;}.elementor-23471 .elementor-element.elementor-element-e5d2004.elementor-element{--flex-grow:1;--flex-shrink:0;}}@media(max-width:767px){.elementor-23471 .elementor-element.elementor-element-e5d2001{--min-height:64px;--margin-top:0px;--margin-bottom:-64px;--margin-left:0px;--margin-right:0px;--padding-top:12px;--padding-bottom:12px;--padding-left:24px;--padding-right:24px;}.elementor-23471 .elementor-element.elementor-element-e5d2002 img{width:151px;}.elementor-23471 .elementor-element.elementor-element-e5d2005 img{width:168px;}.elementor-23471 .elementor-element.elementor-element-e5d2006 img{width:168px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown .elementor-item, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:18px;}.elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-23471 .elementor-element.elementor-element-e5d2003 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:14px !important;}}/* Start custom CSS for container, class: .elementor-element-e5d2001 *//* Main navigation v2: Seb's dropdown panels (Figma 212:2171; docs/v2-templates/navigation-spec.md), with the tidier sizes Victor chose on 1 October 2026 (18 px links, 44 px rows, 24 px panel padding) over Figma's 28 px, and Services as three labelled columns with every link showing at once (Victor, 2 October 2026). No script. The Main menu widget holds the menu, its fonts and colours, the panel colour and corners, the item padding and the 1 px gap under the bar (Style > Dropdown > Distance). This block does what no control reaches: where the panels hang and how wide they are, their columns, the Services column headings, the See all buttons and the keyboard focus ring. The menu items say which panel is which through their CSS Classes (Appearance > Menus, Screen Options > CSS Classes; each class is explained in plugins/hom-components/menus/main-navigation-v2.json). Change a value in this list, not in the rules under it. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 { --hom-nav-panel-width: 1398px; /* Industries and Services panels; centred, so at 1440 px wide 21 px stay free each side */ --hom-nav-panel-gutter: 21px; /* free space each side of a panel on narrower screens */ --hom-nav-narrow-width: 480px; /* Insights panel; its right edge lines up with the wide panels' */ --hom-nav-panel-padding: 24px; /* space inside a panel, all round */ --hom-nav-item-line-height: 28px; /* panel and burger links, 18/28 (the size is in Style > Dropdown > Typography, which has no line height) */ --hom-nav-group-gap: 48px; /* between the three Services columns */ --hom-nav-heading-font: 600 13px/20px "Inter", sans-serif; /* a Services column heading (Influencer services, TikTok Services, Paid services) */ --hom-nav-heading-spacing: 0.04em; /* its letter spacing; it is set in capitals */ --hom-nav-heading-color: var(--e-global-color-uicore_light); /* its colour: Kit Light Neutral */ --hom-nav-heading-opacity: 0.7; /* shown at 70%; full strength in pink under the pointer, as it links to its page */ --hom-nav-heading-padding: 4px 16px 8px; /* around the heading: 32 px tall; 16 px at the side lines it up with the links */ --hom-nav-button-gap: 24px; /* space above a See all button */ --hom-nav-button-padding: 10px 20px; /* See all button, top and bottom, then sides: 40 px high, as Seb draws it */ --hom-nav-button-radius: 6px; --hom-nav-button-color: var(--e-global-color-uicore_primary); /* Kit Primary */ --hom-nav-label-color: var(--e-global-color-uicore_white); /* See all text: Kit White */ --hom-nav-label-font: 600 14px/20px "Inter", sans-serif; /* See all text, Seb's Label/Default */ --hom-nav-hover: var(--e-global-color-uicore_primary); /* a heading under the pointer: Kit Primary, as the links */ --hom-nav-focus-bar: var(--e-global-color-uicore_white); /* focus ring on the bar over the hero art: Kit White */ --hom-nav-focus-bar-tablet: var(--e-global-color-uicore_white); /* the same ring from 1024 px down, where the bar lies over the hero art too: Kit White */ --hom-nav-focus-logo: #2400da; /* focus ring on the logo, which sits on the white part of the hero at every width: link blue */ --hom-nav-focus-panel: var(--e-global-color-uicore_white); /* focus ring inside a panel and the burger menu: Kit White */ --hom-nav-scrolled-bg: var(--e-global-color-uicore_white); /* the bar once the page has scrolled: Kit White */ --hom-nav-scrolled-link: #2400da; /* its labels, arrows, burger and focus rings then: link blue */ --hom-nav-scrolled-line: 0 1px 0 rgba(22, 28, 45, 0.08); /* a hairline under the scrolled bar */ --hom-nav-scrolled-height: 64px; /* the scrolled bar's height on desktop (87 px at the top of the page) */ --hom-nav-scrolled-logo: 190px; /* the logo's width in the scrolled bar on desktop (239 px at the top) */ --hom-nav-burger-room: 72px; /* kept free above the open burger menu: the bar's height on tablet */ } /* From 1025 px the bar shows the menu (the widget's Breakpoint is Tablet); below that the burger takes over. */ @media (min-width: 1025px) { /* Panels hang from the bar, not from their menu item, so they can centre on the page. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-widget-nav-menu, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main > .elementor-nav-menu, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main > .elementor-nav-menu > li { position: static; } /* Every panel. The menu script writes a place and width on the panel itself, hence !important. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu { box-sizing: border-box; padding: var(--hom-nav-panel-padding); top: 100% !important; min-width: 0 !important; max-width: none !important; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .hom-nav-mega > .sub-menu { left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; width: min(var(--hom-nav-panel-width), 100% - 2 * var(--hom-nav-panel-gutter)) !important; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .hom-nav-narrow > .sub-menu { left: auto !important; right: max(var(--hom-nav-panel-gutter), (100% - var(--hom-nav-panel-width)) / 2) !important; margin-left: 0 !important; width: var(--hom-nav-narrow-width) !important; } /* An open panel is a grid of six tracks: Industries' links take two (three a row), each Services column two, Insights' links all six. The menu script marks a panel it opens on hover or tap aria-hidden="false"; the keyboard opens one by moving the focus onto its label (keyboard focus only: a tap focuses the label too, and a panel already open at the tap would let the tap follow the label's link) or into the panel; when the menu script hasn't started (it marks the menu data-smartmenus-id), the pointer opens it. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main > .elementor-nav-menu > li > .sub-menu[aria-hidden="false"], .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > a:not(:focus:not(:focus-visible)) + .sub-menu, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main > .elementor-nav-menu:not([data-smartmenus-id]) > li:hover > .sub-menu { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu > li { grid-column: span 6; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .hom-nav-3col > .sub-menu > li { grid-column: span 2; } /* Services: three columns (class hom-nav-group), each a heading over its links. The links are the heading's own menu children and always show under it. Their list draws no box of its own (display: contents), so the menu script counts it as shut and opens and shuts it as it does any dropdown; were the list a box, the script would lose count of what it has open and leave the Services panel open after the pointer leaves. !important: the script writes a display on the list itself. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .hom-nav-groups > .sub-menu { column-gap: var(--hom-nav-group-gap); } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu > li.hom-nav-group { grid-column: span 2; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu .sub-menu { display: contents !important; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu li.hom-nav-group > a, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu li.hom-nav-group > a.highlighted { padding: var(--hom-nav-heading-padding); font: var(--hom-nav-heading-font); letter-spacing: var(--hom-nav-heading-spacing); text-transform: uppercase; color: var(--hom-nav-heading-color); opacity: var(--hom-nav-heading-opacity); background-color: transparent; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu li.hom-nav-group > a:hover, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu li.hom-nav-group > a:focus-visible { color: var(--hom-nav-hover); opacity: 1; } /* Long names wrap inside their column on narrower screens instead of running out of the panel. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu a { white-space: normal; border-inline-start: 0; } /* See all: Seb's pink button at the bottom right. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu > li.hom-nav-button { grid-column: 1 / -1; justify-self: end; padding-top: var(--hom-nav-button-gap); } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu > li.hom-nav-button > a, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu > li.hom-nav-button > a:hover, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu > li.hom-nav-button > a:focus { box-sizing: border-box; padding: var(--hom-nav-button-padding); border-radius: var(--hom-nav-button-radius); background-color: var(--hom-nav-button-color); color: var(--hom-nav-label-color); font: var(--hom-nav-label-font); } /* The arrows of the Services headings belong to the burger menu, where the headings fold out. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--main .sub-menu .sub-arrow { display: none; } } /* The theme (UiCore) adds a "Back" row to every sub-menu. The burger's fold-outs don't need one. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu .back { display: none; } /* Panel and burger menu links: the line height their Typography control lacks. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--dropdown a.elementor-sub-item, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--dropdown a.elementor-item { line-height: var(--hom-nav-item-line-height); } /* Focus ring. The theme removes every focus outline, so a keyboard visitor would not see where they are. 2 px, at once (Elementor eases colour changes over 0.3 s). Inside a panel and the burger menu the ring sits inside the link. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 a:focus-visible, .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-menu-toggle:focus-visible { outline: 2px solid var(--hom-nav-focus-bar); outline-offset: 2px; transition: none; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--dropdown a:focus-visible { outline-color: var(--hom-nav-focus-panel); outline-offset: -2px; } .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-widget-image a:focus-visible { outline-color: var(--hom-nav-focus-logo); } @media (max-width: 1024px) { .elementor-23471 .elementor-element.elementor-element-e5d2001 { --hom-nav-focus-bar: var(--hom-nav-focus-bar-tablet); --hom-nav-focus-logo: var(--hom-nav-focus-bar-tablet); } } /* The bar once the page has scrolled. The bar is sticky (Advanced > Motion Effects > Sticky: Top; its Effects Offset says after how many px Elementor marks the bar elementor-sticky--effects). No control styles that state, so these rules do: a white bar with a hairline, link-blue labels, arrows, burger and focus rings, and on desktop a lower bar with a smaller logo. The label under the pointer and the label of an open panel keep the widget's pink. */ .elementor-23471 .elementor-element.elementor-element-e5d2001 { transition: background-color 0.2s, min-height 0.2s; } .elementor-23471 .elementor-element.elementor-element-e5d2001.elementor-sticky--effects { background-color: var(--hom-nav-scrolled-bg); box-shadow: var(--hom-nav-scrolled-line); --hom-nav-focus-bar: var(--hom-nav-scrolled-link); --hom-nav-focus-logo: var(--hom-nav-scrolled-link); } .elementor-23471 .elementor-element.elementor-element-e5d2001.elementor-sticky--effects .elementor-nav-menu--main .elementor-item:not(:hover):not(:focus):not(.highlighted), .elementor-23471 .elementor-element.elementor-element-e5d2001.elementor-sticky--effects .elementor-menu-toggle { color: var(--hom-nav-scrolled-link); fill: var(--hom-nav-scrolled-link); } @media (min-width: 1025px) { .elementor-23471 .elementor-element.elementor-element-e5d2001.elementor-sticky--effects { --min-height: var(--hom-nav-scrolled-height); } .elementor-23471 .elementor-element.elementor-element-e5d2001.elementor-sticky--effects .elementor-widget-image img { width: var(--hom-nav-scrolled-logo); } } /* Phones show the white logo (its CSS class: hom-nav-logo-top) at the top of the page and the colour one (hom-nav-logo-scrolled) once scrolled. Tablet shows the colour one all the time: the art is light on the left there. On tablet and phones the open burger menu stays inside the screen under the fixed bar and scrolls by itself. */ @media (max-width: 767px) { .elementor-23471 .elementor-element.elementor-element-e5d2001:not(.elementor-sticky--effects) .hom-nav-logo-scrolled, .elementor-23471 .elementor-element.elementor-element-e5d2001.elementor-sticky--effects .hom-nav-logo-top { display: none; } } @media (max-width: 1024px) { .elementor-23471 .elementor-element.elementor-element-e5d2001 .elementor-nav-menu--dropdown.elementor-nav-menu__container { max-height: calc(100dvh - var(--hom-nav-burger-room)); } }/* End custom CSS */