.elementor-1550 .elementor-element.elementor-element-370a3040{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--padding-top:22px;--padding-bottom:22px;--padding-left:20px;--padding-right:20px;}.elementor-1550 .elementor-element.elementor-element-1fd249ae{--display:flex;--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:14px 30px;--row-gap:14px;--column-gap:30px;--flex-wrap:nowrap;--border-radius:999px 999px 999px 999px;--padding-top:10px;--padding-bottom:10px;--padding-left:34px;--padding-right:10px;}.elementor-1550 .elementor-element.elementor-element-1fd249ae:not(.elementor-motion-effects-element-type-background), .elementor-1550 .elementor-element.elementor-element-1fd249ae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8E58C;}.elementor-1550 .elementor-element.elementor-element-18a7a0d4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;border-style:dashed;--border-style:dashed;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;border-color:#F8E58C;--border-color:#F8E58C;--border-radius:50% 50% 50% 50%;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-1550 .elementor-element.elementor-element-f7cb5e1{width:100%;max-width:100%;text-align:start;}.elementor-1550 .elementor-element.elementor-element-f7cb5e1 img{width:100%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-menu-toggle{margin:0 auto;}.elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-7c6c481-font-family ), Sans-serif;font-size:var( --e-global-typography-7c6c481-font-size );font-weight:var( --e-global-typography-7c6c481-font-weight );text-transform:var( --e-global-typography-7c6c481-text-transform );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--main .elementor-item:hover, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a:hover, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a:focus, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a.highlighted, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-menu-toggle:hover, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-menu-toggle:focus{color:var( --e-global-color-primary );}.elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a:hover, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a:focus, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-text );}.elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu--dropdown a.elementor-item-active{color:var( --e-global-color-primary );background-color:var( --e-global-color-text );}.elementor-1550 .elementor-element.elementor-element-44ad9bc6{--display:flex;--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;--align-items:center;--gap:10px 52px;--row-gap:10px;--column-gap:52px;--flex-wrap:wrap;}.elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-menu-toggle{margin:0 auto;background-color:#FFFFFF00;}.elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-7c6c481-font-family ), Sans-serif;font-size:var( --e-global-typography-7c6c481-font-size );font-weight:var( --e-global-typography-7c6c481-font-weight );text-transform:var( --e-global-typography-7c6c481-text-transform );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu--main .elementor-item:hover, .elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu--dropdown .elementor-item, .elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:17px;}.elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu--dropdown a{padding-left:24px;padding-right:24px;padding-top:18px;padding-bottom:18px;}.elementor-1550 .elementor-element.elementor-element-139471c0 div.elementor-menu-toggle{color:var( --e-global-color-text );}.elementor-1550 .elementor-element.elementor-element-139471c0 div.elementor-menu-toggle svg{fill:var( --e-global-color-text );}.elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-menu-toggle{margin:0 auto;background-color:#FFFFFF00;}.elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-7c6c481-font-family ), Sans-serif;font-size:var( --e-global-typography-7c6c481-font-size );font-weight:var( --e-global-typography-7c6c481-font-weight );text-transform:var( --e-global-typography-7c6c481-text-transform );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu--main .elementor-item:hover, .elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu--dropdown .elementor-item, .elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:17px;}.elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu--dropdown a{padding-left:24px;padding-right:24px;padding-top:18px;padding-bottom:18px;}.elementor-1550 .elementor-element.elementor-element-4b582d1 div.elementor-menu-toggle{color:var( --e-global-color-primary );}.elementor-1550 .elementor-element.elementor-element-4b582d1 div.elementor-menu-toggle svg{fill:var( --e-global-color-primary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1550 .elementor-element.elementor-element-82945b0 .elementor-button{background-color:var( --e-global-color-text );font-family:var( --e-global-typography-f032d96-font-family ), Sans-serif;font-size:var( --e-global-typography-f032d96-font-size );font-weight:var( --e-global-typography-f032d96-font-weight );text-transform:var( --e-global-typography-f032d96-text-transform );line-height:var( --e-global-typography-f032d96-line-height );letter-spacing:var( --e-global-typography-f032d96-letter-spacing );fill:var( --e-global-color-1205321 );color:var( --e-global-color-1205321 );border-radius:999px 999px 999px 999px;padding:14px 32px 14px 32px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-1550 .elementor-element.elementor-element-1fd249ae{--gap:14px 250px;--row-gap:14px;--column-gap:250px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7c6c481-font-size );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-1550 .elementor-element.elementor-element-44ad9bc6{--flex-direction:row-reverse;--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-reverse;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7c6c481-font-size );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7c6c481-font-size );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-1550 .elementor-element.elementor-element-82945b0 .elementor-button{font-size:var( --e-global-typography-f032d96-font-size );line-height:var( --e-global-typography-f032d96-line-height );letter-spacing:var( --e-global-typography-f032d96-letter-spacing );}}@media(min-width:768px){.elementor-1550 .elementor-element.elementor-element-1fd249ae{--width:80%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1550 .elementor-element.elementor-element-1fd249ae{--width:100%;}}@media(max-width:767px){.elementor-1550 .elementor-element.elementor-element-1fd249ae{--justify-content:space-between;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:16px;--padding-bottom:16px;--padding-left:20px;--padding-right:20px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7c6c481-font-size );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-1550 .elementor-element.elementor-element-44ad9bc6{--justify-content:center;}.elementor-1550 .elementor-element.elementor-element-139471c0{width:var( --container-widget-width, 8% );max-width:8%;--container-widget-width:8%;--container-widget-flex-grow:0;}.elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7c6c481-font-size );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-7c6c481-font-size );line-height:var( --e-global-typography-7c6c481-line-height );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-1550 .elementor-element.elementor-element-82945b0 .elementor-button{font-size:var( --e-global-typography-f032d96-font-size );line-height:var( --e-global-typography-f032d96-line-height );letter-spacing:var( --e-global-typography-f032d96-letter-spacing );}}/* Start custom CSS for image, class: .elementor-element-f7cb5e1 *//* The file is a stencil - only its transparency is used - and the fill comes from the page's ink variable, so one navy file serves every colourway. */ .elementor-1550 .elementor-element.elementor-element-f7cb5e1{background-color:var(--cwrt-hf-ink,#242F62);-webkit-mask:url("https://cwrt.club/wp-content/uploads/2026/10/c.ball_navy.png") center/contain no-repeat;mask:url("https://cwrt.club/wp-content/uploads/2026/10/c.ball_navy.png") center/contain no-repeat;} .elementor-1550 .elementor-element.elementor-element-f7cb5e1 img{visibility:hidden;}/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18a7a0d4 *//* the placeholder is an (Elementor only exposes a container's Link control when its HTML tag is 'a'), so the inherited link styling has to be cleared */ .elementor-1550 .elementor-element.elementor-element-18a7a0d4{text-decoration:none;} /* Follows the page's header colourway, exactly like the wordmark and the CTA. The --cwrt-hf-* variables are set on body by each page's own Custom CSS, so the shared header template needs no per-page copies. */ .elementor-1550 .elementor-element.elementor-element-18a7a0d4{border-color:var(--cwrt-hf-ink,#242F62) !important;} .elementor-1550 .elementor-element.elementor-element-18a7a0d4 .elementor-heading-title{color:var(--cwrt-hf-ink,#242F62) !important;} /* .e-con is here purely to win a specificity tie: the Header Pill's own Custom CSS carries '.elementor-1550 .elementor-element.elementor-element-18a7a0d4 > *{flex:0 0 auto;width:auto;}' at the same weight as a bare '.elementor-1550 .elementor-element.elementor-element-18a7a0d4{}' rule, and it was landing later in the stylesheet - which collapsed this box to its padding (24px wide) and turned the circle into an ellipse. */ .elementor-1550 .elementor-element.elementor-element-18a7a0d4.e-con{width:56px;height:56px;flex:0 0 56px;margin:0} /* ---- REPLACING THIS PLACEHOLDER ---- Drag an Image widget INTO this container and the placeholder chrome removes itself: the tinted/dashed box and the label both disappear. Nothing else to undo, and the container keeps its size, radius and position. Works for Image, Video and HTML. */ .elementor-1550 .elementor-element.elementor-element-18a7a0d4:has(.elementor-widget-image, .elementor-widget-video, .elementor-widget-html){ background:none !important; border:0 !important; } .elementor-1550 .elementor-element.elementor-element-18a7a0d4:has(.elementor-widget-image, .elementor-widget-video, .elementor-widget-html) .elementor-widget-heading{ display:none !important; } .elementor-1550 .elementor-element.elementor-element-18a7a0d4 .elementor-widget-image img{width:100%;height:100%;object-fit:contain;} /* z-index lifts a dropped image above the decorative pseudo-elements (the footer ballmark's white trail sits in ::before and would otherwise paint over the logo) */ .elementor-1550 .elementor-element.elementor-element-18a7a0d4 .elementor-widget-image{width:100%;height:100%;position:relative;z-index:2;} /* On a phone the pill is a simple two-item row (ballmark | toggle) held apart by space-between. The 'margin:0 auto' above would absorb that free space and float the ballmark into the middle, so it is dropped at this breakpoint only - tablet and desktop keep the centred behaviour. */ @media(max-width:767px){.elementor-1550 .elementor-element.elementor-element-18a7a0d4.e-con{margin:0;}}/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-26c4c659 *//* Follows the page colourway, like the logos and the CTA. */ .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-item{color:var(--cwrt-hf-ink,#203266);} .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-item:hover, .elementor-1550 .elementor-element.elementor-element-26c4c659 .elementor-item.elementor-item-active{color:var(--cwrt-hf-ink,#203266);opacity:.7;}/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-139471c0 *//* Follows the page colourway, like the logos and the CTA. */ .elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-item{color:var(--cwrt-hf-ink,#203266);} .elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-item:hover, .elementor-1550 .elementor-element.elementor-element-139471c0 .elementor-item.elementor-item-active{color:var(--cwrt-hf-ink,#203266);opacity:.7;} /* Follows the page colourway. Elementor sets the icon's fill separately from the button's colour, so both have to be pointed at the variable. */ .elementor-1550 .elementor-element.elementor-element-139471c0 div.elementor-menu-toggle{color:var(--cwrt-hf-ink,#203266);} .elementor-1550 .elementor-element.elementor-element-139471c0 div.elementor-menu-toggle svg{fill:var(--cwrt-hf-ink,#203266);}/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-4b582d1 *//* Follows the page colourway, like the logos and the CTA. */ .elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-item{color:var(--cwrt-hf-ink,#203266);} .elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-item:hover, .elementor-1550 .elementor-element.elementor-element-4b582d1 .elementor-item.elementor-item-active{color:var(--cwrt-hf-ink,#203266);opacity:.7;} /* Follows the page colourway. Elementor sets the icon's fill separately from the button's colour, so both have to be pointed at the variable. */ .elementor-1550 .elementor-element.elementor-element-4b582d1 div.elementor-menu-toggle{color:var(--cwrt-hf-ink,#203266);} .elementor-1550 .elementor-element.elementor-element-4b582d1 div.elementor-menu-toggle svg{fill:var(--cwrt-hf-ink,#203266);}/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1fd249ae */.elementor-1550 .elementor-element.elementor-element-1fd249ae > *{flex:0 0 auto;width:auto;} .elementor-1550 .elementor-element.elementor-element-1fd249ae > .elementor-widget{width:auto;} @media(max-width:1024px){.elementor-1550 .elementor-element.elementor-element-1fd249ae{flex-wrap:wrap;justify-content:center;row-gap:14px;}} /* ---- Tablet ---- The toggle needs the SAME buffer on both sides: to the Book a cwrt button, and to the end of the pill. With justify-content:center that right-hand buffer is emergent - it is just leftover free space, so widening the gap shrinks it by half and the two can never match. Spreading the row instead pins the right buffer to padding-right, which is independent of how wide the button or the wordmark happen to be. The gap on the other side is set to the same value on the Nav Links container. */ @media(min-width:768px) and (max-width:1024px){.elementor-1550 .elementor-element.elementor-element-1fd249ae{ flex-wrap:nowrap; justify-content:space-between; padding-right:20px; --column-gap:20px; --row-gap:20px; } /* the actions container carries its own 10px right padding, which stacked on top of the pill's and made the right-hand buffer 30px against a 20px gap. Zeroed here so the buffer is the pill's padding-right and nothing else. */ .elementor-1550 .elementor-element.elementor-element-1fd249ae > .e-con{padding-right:0;} } /* on a phone the ballmark and the toggle sit on ONE row, pushed to opposite ends of the pill - the wrap/centre rule above is for tablet, where the wordmark and CTA are still in play. */ @media(max-width:767px){.elementor-1550 .elementor-element.elementor-element-1fd249ae{ flex-wrap:nowrap; justify-content:space-between; /* the template carries a 250px tablet gap, which inherits down to mobile. With nowrap and non-shrinking children that pushed the toggle clean outside the pill (left edge 356 against a pill ending at 355). space-between does the spacing here, so the gap only needs to be a sane minimum. Elementor drives container gap through these two custom properties, so setting them beats its own .e-con rule. */ --row-gap:20px; --column-gap:20px; }} /* ---- Dropdown panel ---- Elementor renders the dropdown in normal flow, so opening it stretched the pill itself (165px tall -> 325px) instead of hanging beneath it. Taking it out of the flow keeps the pill a fixed height and lets the panel drop under the header at the pill's own width. */ .elementor-1550 .elementor-element.elementor-element-1fd249ae{position:relative;} /* Elementor containers are position:relative by default, so the actions container would otherwise become the containing block and the panel would inherit ITS width (53px) rather than the pill's. .e-con is Elementor's own class, so this keeps working after a copy/paste - no custom class to carry across. */ .elementor-1550 .elementor-element.elementor-element-1fd249ae > .e-con{position:static;} /* the Nav Menu widget is itself position:relative (Elementor anchors the dropdown to it), so it has to be neutralised too or the panel inherits the toggle's 33px width */ .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-widget-nav-menu{position:static;} .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-nav-menu--dropdown{ position:absolute; top:calc(100% + 10px); left:0; right:0; width:100%; border-radius:24px; overflow:hidden; z-index:99; } /* centre the labels in the panel - Elementor left-aligns them by default */ .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item{ justify-content:center; text-align:center; } /* The panel wears the same colourway as the pill above it, from the same per-page variables, so it changes with the page exactly as the header does. The current / hovered row flips the pair the other way round. */ .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-nav-menu--dropdown{background-color:var(--cwrt-hf-bg,#F8E58C);} .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item{ color:var(--cwrt-hf-ink,#242F62); } .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item:hover, .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item:focus, .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item.elementor-item-active{ background-color:var(--cwrt-hf-ink,#242F62); color:var(--cwrt-hf-bg,#F8E58C); opacity: 1; } @media(min-width:1025px){ .elementor-1550 .elementor-element.elementor-element-1fd249ae{position:relative;} .elementor-1550 .elementor-element.elementor-element-1fd249ae .elementor-element-26c4c659.elementor-widget{ position:absolute; left:50%; transform:translateX(-50%); } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-370a3040 *//* CWRT header theming - colours come from CSS variables set per page. Fallbacks below are the Home colourway, so the header still works standalone. */ .elementor-1550 .elementor-element.elementor-element-370a3040 .cwrt-hf-pill{background-color:var(--cwrt-hf-bg,#F8E58C) !important;} .elementor-1550 .elementor-element.elementor-element-370a3040 .cwrt-hf-ink .elementor-heading-title, .elementor-1550 .elementor-element.elementor-element-370a3040 .cwrt-hf-ink .elementor-button{color:var(--cwrt-hf-ink,#242F62) !important;} .elementor-1550 .elementor-element.elementor-element-370a3040 .cwrt-hf-cta .elementor-button{background-color:var(--cwrt-hf-cta-bg,#242F62) !important;color:var(--cwrt-hf-cta-ink,#FFFFFF) !important;}/* End custom CSS */