/**
* Header styles.
*
* Two parts, both scoped to .elementor-location-header so the Elementor
* header template (post 35708) is styled without being edited:
*
* 1. At every width, the search, cart, and menu toggle are matching square
* buttons styled like the Classes & Events tiles (white, warm border,
* flat, no shadow). The menu toggle is filled with the button terracotta
* so it stands out.
* 2. On desktop, the nav stays on one line and its dropdowns become cards
* with the gold border, rounded corners, and a soft shadow.
* 3. At hamburger widths (1024px and below, where the template switches the
* nav to a toggle), the header is pinned to one row with the logo on the
* left and the three buttons on the right, and the open menu becomes a
* full-width panel below the row instead of a block that pushes the row
* apart.
*
* Selectors use Elementor's widget classes (theme-site-logo, nav-menu,
* woocommerce-menu-cart) and ElementsKit's search class, not element IDs,
* so the rules survive a rebuilt header.
*/
.elementor-location-header {
/* Same palette and card tokens as design-system.css. */
--qlh-color-dark: #1c2436;
--qlh-color-text: #131313;
--qlh-color-button: #b0573a;
--qlh-color-button-hover: #a04f35;
--qlh-color-link: var(--qlh-color-button);
--qlh-color-surface: #ffffff;
--qlh-color-accent-bg: #fffcf6;
--qlh-color-border: #d39379;
--qlh-font-heading: "Tipique", sans-serif;
--qlh-font-body: "Roboto", sans-serif;
--qlh-transition: 150ms ease;
--qlh-button: 48px;
--qlh-button-radius: 6px;
--qlh-color-panel-rule: #d4d5d1;
}
/* Buttons (all widths) ---------------------------------------------------- */
/*
* The widgets that hold the buttons. Each widget shrinks to its button so
* the three sit together, and the search widget's margin-left: auto pushes
* the group to the end of the row. Elementor centers the row's items, so
* the group lines up with the logo and (on desktop) the main nav.
*/
.elementor-location-header .elementor-element.elementor-widget-elementskit-header-search,
.elementor-location-header .elementor-element.elementor-widget-woocommerce-menu-cart {
flex: 0 0 auto;
width: auto;
max-width: none;
margin: 0;
}
/*
* Spacing inside the group comes from the container's own gap. Desktop keeps
* the template's order (cart, then search), so the cart carries the auto
* margin there. The toggle stays hidden on desktop: the widget's
* --dropdown-tablet class marks it as a tablet-and-below control, and that
* extra class outranks the shared button rule below.
*/
@media (min-width: 1025px) {
.elementor-location-header .elementor-element.elementor-widget-woocommerce-menu-cart {
margin-left: auto;
}
.elementor-location-header .elementor-widget-nav-menu.elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
display: none;
}
}
/* Desktop (1025px and up) ------------------------------------------------- */
@media (min-width: 1025px) {
.elementor-location-header {
--qlh-gutter: 24px;
--qlh-nav-pad: 20px; /* The template's link padding; the underline uses it too. */
--qlh-dropdown-radius: 10px;
--qlh-dropdown-shadow: 0 12px 32px rgb(35 47 66 / 14%);
}
/* Breathing room at the edges; the template's 10px put the logo on the rim. */
.elementor-location-header > .elementor-element.e-con.e-parent {
padding-right: var(--qlh-gutter);
padding-left: var(--qlh-gutter);
}
/*
* The template sizes the logo as 14.4% of the row, which passes 200px on
* wide screens. Cap it. Elementor's width-initial class sets max-width:
* 100% at four classes, so this selector carries five.
*/
.elementor-location-header > .e-con > .elementor-element.elementor-widget.elementor-widget-theme-site-logo {
width: var(--container-widget-width, auto); /* The template's percentage, until the cap. */
max-width: 200px;
}
.elementor-location-header .elementor-widget-theme-site-logo img {
width: 100%;
max-width: 100%;
height: auto;
}
/*
* Main nav. The template fixes the widget at 67% of the row and the links
* at 20px side padding, which wraps the menu onto two lines between
* 1025px and about 1180px. Let the widget take whatever is free between
* the logo and the buttons, keep the links on one line, and tighten the
* padding on narrower desktops.
*/
.elementor-location-header .elementor-element.elementor-widget-nav-menu {
flex: 1 1 auto;
width: auto;
max-width: none;
min-width: 0;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main {
display: flex;
justify-content: center;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding-right: var(--qlh-nav-pad);
padding-left: var(--qlh-nav-pad);
white-space: nowrap;
}
/* Elementor's underline pointer spans the whole link; pull it in to the text. */
.elementor-location-header .elementor-widget-nav-menu .e--pointer-underline .elementor-item::before,
.elementor-location-header .elementor-widget-nav-menu .e--pointer-underline .elementor-item::after {
left: var(--qlh-nav-pad);
width: calc(100% - 2 * var(--qlh-nav-pad));
}
/* Same Lucide chevron as the mobile panel, replacing Elementor's caret; flips while the dropdown is open. */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item .sub-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin: 0;
padding: 0;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item .sub-arrow svg,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item .sub-arrow i {
display: none;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item .sub-arrow::before {
content: "";
display: block;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: var(--qlh-icon-chevron) center / contain no-repeat;
mask: var(--qlh-icon-chevron) center / contain no-repeat;
transition: transform var(--qlh-transition);
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted .sub-arrow::before {
transform: scaleY(-1);
}
@media (max-width: 1200px) {
.elementor-location-header {
--qlh-nav-pad: 13px;
}
}
/*
* Desktop dropdowns (Shop, About): a card like the buttons, with the gold
* border, rounded corners, a soft shadow, and links at the same size as
* the top-level items instead of Elementor's 13px.
*/
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown {
min-width: 240px;
padding: 8px;
border: 1px solid var(--qlh-color-border);
border-radius: var(--qlh-dropdown-radius);
background-color: var(--qlh-color-surface);
box-shadow: var(--qlh-dropdown-shadow);
}
/* Elementor gives these links an 8px transparent left border; drop it so the padding is even. */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item {
display: block;
padding: 11px 14px;
border: 0;
border-radius: calc(var(--qlh-dropdown-radius) - 4px);
background-color: transparent;
color: var(--qlh-color-dark);
font-family: var(--qlh-font-body);
font-size: 16px;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
transition: color var(--qlh-transition);
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item:focus,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item.highlighted,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active {
background-color: transparent;
color: var(--qlh-color-link);
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item:focus-visible {
outline: 3px solid var(--qlh-color-dark);
outline-offset: -3px;
}
}
/* Hamburger widths: search comes first in the group and carries the auto margin. */
@media (max-width: 1024px) {
.elementor-location-header .elementor-element.elementor-widget-elementskit-header-search {
margin-left: auto;
}
}
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con,
.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle {
display: flex;
align-items: center;
}
/*
* The shared tile-style button. The search selector carries an extra class
* so it outranks the template's own 40px rule for that button.
*/
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con .ekit_navsearch-button,
.elementor-location-header .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: var(--qlh-button);
min-width: var(--qlh-button);
height: var(--qlh-button);
margin: 0;
padding: 0;
border: 1px solid var(--qlh-color-border);
border-radius: var(--qlh-button-radius);
background-color: var(--qlh-color-surface);
box-shadow: none;
color: var(--qlh-color-dark);
fill: var(--qlh-color-dark);
font-size: 22px;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--qlh-transition), border-color var(--qlh-transition);
}
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con .ekit_navsearch-button:hover,
.elementor-location-header .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle:hover {
background-color: var(--qlh-color-accent-bg);
box-shadow: none;
color: var(--qlh-color-dark);
}
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con .ekit_navsearch-button:focus-visible,
.elementor-location-header .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button:focus-visible,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle:focus-visible {
outline: 3px solid var(--qlh-color-dark);
outline-offset: 3px;
}
/*
* Icons: one set (Lucide, ISC license, lucide.dev) at its default 2px stroke
* on a 24px grid, so all three buttons read as the same weight. The widgets'
* own SVGs are hidden and the Lucide shape is painted through a CSS mask on
* a pseudo-element, which takes the button's text color like a font icon.
* The SVG data URIs below are the unmodified Lucide "search",
* "shopping-cart", "menu", "x", and "chevron-down" icons.
*/
.elementor-location-header {
--qlh-icon-size: 20px;
--qlh-icon-chevron: url("data:image/svg+xml;utf8,");
--qlh-icon-search: url("data:image/svg+xml;utf8,");
--qlh-icon-cart: url("data:image/svg+xml;utf8,");
--qlh-icon-menu: url("data:image/svg+xml;utf8,");
--qlh-icon-close: url("data:image/svg+xml;utf8,");
}
/* Hide the widgets' own icons (ElementsKit search, Elementor cart and toggle). */
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con .ekit_navsearch-button svg,
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con .ekit_navsearch-button i,
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-icon svg,
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-icon i,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle svg,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle i {
display: none;
}
/* The painted icon. */
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con .ekit_navsearch-button::before,
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-icon::before,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle::before {
content: "";
display: block;
flex: 0 0 auto;
width: var(--qlh-icon-size);
height: var(--qlh-icon-size);
background-color: currentColor;
-webkit-mask: var(--qlh-icon) center / contain no-repeat;
mask: var(--qlh-icon) center / contain no-repeat;
}
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con .ekit_navsearch-button::before {
--qlh-icon: var(--qlh-icon-search);
}
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-icon::before {
--qlh-icon: var(--qlh-icon-cart);
}
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle::before {
--qlh-icon: var(--qlh-icon-menu);
}
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active::before {
--qlh-icon: var(--qlh-icon-close);
}
/*
* Elementor gives the cart icon wrapper its own gray and anchors the count
* bubble to it. Take the button's color instead, and let the bubble anchor
* to the button (position: relative on it, static here) so it sits on the
* button's corner rather than on the icon.
*/
.elementor-location-header .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button {
position: relative;
}
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-icon {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: inherit;
}
/* The cart toggle's subtotal text is already hidden by the template; keep it that way. */
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-text {
display: none;
}
/* Item count bubble, tucked into the button's top right corner. */
.elementor-location-header .elementor-menu-cart__toggle_button .elementor-button-icon-qty {
position: absolute;
top: -8px;
right: -8px;
min-width: 20px;
height: 20px;
border-radius: 999px;
background-color: var(--qlh-color-button);
color: #ffffff;
font-size: 12px;
font-weight: 700;
line-height: 20px;
}
/* Menu toggle: filled terracotta so it stands out from search and cart. White on it is 4.92:1. */
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active {
border-color: var(--qlh-color-button);
background-color: var(--qlh-color-button);
color: #ffffff;
fill: #ffffff;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active:hover {
border-color: var(--qlh-color-button-hover);
background-color: var(--qlh-color-button-hover);
color: #ffffff;
fill: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
.elementor-location-header .elementor-widget-elementskit-header-search .ekit-wid-con .ekit_navsearch-button,
.elementor-location-header .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button,
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item .sub-arrow::before,
.elementor-location-header .elementor-nav-menu--main .elementor-item .sub-arrow::before,
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
transition: none;
}
}
/* Hamburger widths (1024px and below) ------------------------------------- */
@media (max-width: 1024px) {
.elementor-location-header {
--qlh-gutter: 16px;
/* 64px on a 390px phone, easing down to 56px on the narrowest phones so the row still fits. */
--qlh-logo-height: clamp(56px, 16.5vw, 64px);
--qlh-row-height: 80px;
}
@media (min-width: 768px) {
.elementor-location-header {
--qlh-gutter: 24px;
--qlh-logo-height: 72px;
--qlh-row-height: 96px;
}
}
/* The row --------------------------------------------------------------- */
/*
* The header's top-level container. The template sets --flex-wrap-mobile:
* wrap and --align-items: center, which is how the cart lands on its own
* row and the logo drifts down when the menu opens. Pin it to one row.
*/
.elementor-location-header > .elementor-element.e-con.e-parent {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
min-height: var(--qlh-row-height);
padding: 0 var(--qlh-gutter);
}
/* Logo, left. The template gives it a fixed pixel width; size by height instead. */
.elementor-location-header .elementor-element.elementor-widget-theme-site-logo {
order: 1;
flex: 0 1 auto;
width: auto;
max-width: none;
margin: 0;
text-align: start;
}
.elementor-location-header .elementor-widget-theme-site-logo a {
display: block;
line-height: 0;
}
.elementor-location-header .elementor-widget-theme-site-logo img {
display: block;
width: auto;
max-width: none;
height: var(--qlh-logo-height);
}
/*
* Search is hidden under 768px by the template; show it so the three
* buttons stay together. Order: logo, search, cart, menu toggle.
*/
.elementor-location-header .elementor-element.elementor-widget-elementskit-header-search {
display: block;
order: 2;
}
.elementor-location-header .elementor-element.elementor-widget-woocommerce-menu-cart {
order: 3;
}
/*
* The nav widget becomes position: static so the dropdown panel inside it
* can be positioned against the header row.
*/
.elementor-location-header .elementor-element.elementor-widget-nav-menu {
position: static;
order: 4;
flex: 0 0 auto;
align-self: center;
width: auto;
max-width: none;
margin: 0;
}
/* The open menu ---------------------------------------------------------- */
/* Full-width panel hung from the bottom of the row, over the page content. */
.elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 100;
width: 100%;
max-height: calc(100vh - var(--qlh-row-height));
max-height: calc(100dvh - var(--qlh-row-height));
margin: 0;
padding: 12px var(--qlh-gutter) 28px;
overflow-y: auto;
background-color: var(--qlh-color-surface);
border-top: 1px solid var(--qlh-color-panel-rule);
box-shadow: 0 16px 32px rgb(35 47 66 / 12%);
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu,
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
margin: 0;
padding: 0;
list-style: none;
}
.elementor-location-header .elementor-nav-menu--dropdown .menu-item {
display: block;
width: 100%;
margin: 0;
}
/*
* Top-level items: Tipique, no dividers, generous rows. Elementor's dark
* hover block is replaced with a color change only. The long selector
* outranks the template's own font rule for these links (five classes).
*/
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item > .elementor-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 14px 0;
border: 0;
background-color: transparent;
color: var(--qlh-color-dark);
font-family: var(--qlh-font-heading);
font-size: 24px;
font-weight: 400; /* Tipique has no bold; avoid faux bold. */
line-height: 1.2;
text-decoration: none;
transition: color var(--qlh-transition);
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item > .elementor-item:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item > .elementor-item:focus,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item > .elementor-item.highlighted,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .menu-item > .elementor-item.elementor-item-active {
background-color: transparent;
color: var(--qlh-color-link);
}
/* Chevron on items with a submenu (Lucide chevron-down), flipping when open. */
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item .sub-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
margin: -8px -10px -8px auto; /* Bigger tap target without growing the row. */
padding: 0;
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item .sub-arrow svg,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item .sub-arrow i {
display: none;
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item .sub-arrow::before {
content: "";
display: block;
width: 22px;
height: 22px;
background-color: currentColor;
-webkit-mask: var(--qlh-icon-chevron) center / contain no-repeat;
mask: var(--qlh-icon-chevron) center / contain no-repeat;
transition: transform var(--qlh-transition);
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.highlighted .sub-arrow::before {
transform: scaleY(-1);
}
/*
* Submenu: Roboto, indented behind a thin rule, with its own breathing
* room above and below so it reads as a group under its parent.
*/
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
margin: 2px 0 12px;
padding: 4px 0 4px 16px;
border-left: 2px solid var(--qlh-color-border);
}
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
display: block;
width: 100%;
min-height: 44px;
padding: 10px 0;
border: 0;
background-color: transparent;
color: var(--qlh-color-text);
font-family: var(--qlh-font-body);
font-size: 17px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
transition: color var(--qlh-transition);
}
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item:focus,
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item.highlighted,
.elementor-location-header .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item.elementor-item-active {
background-color: transparent;
color: var(--qlh-color-link);
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus-visible,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item:focus-visible {
outline: 3px solid var(--qlh-color-dark);
outline-offset: 2px;
}
}