/**
* Transparent homepage header with a colour-adapting wordmark.
*
* Loaded on the front page only. la-header-logo.js probes what is painted
* behind the wordmark and toggles .la-header--on-dark; everything here is the
* resulting treatment.
*/
/* ---------------------------------------------------------------------------
* 1. Keep the header see-through the whole way down.
*
* Elementor Custom CSS (custom_css post 61) carries a bare
* `.white-bg { background-color: white !important; }`, and the scroll snippet
* (Custom Code 1988) adds that class once the page moves past the hero. The
* class is left in place -- other rules may rely on it -- but on the front page
* it no longer paints. The ID plus two classes outrank the single class, so
* this wins the !important contest.
* ------------------------------------------------------------------------- */
body.home #la-header.white-bg {
background-color: transparent !important;
}
/* ---------------------------------------------------------------------------
* 2. Repaint the wordmark.
*
* The header logo is a pure-black raster on transparency (measured: 60% fully
* transparent, 33% fully opaque at rgb(0,0,0), 6.6% antialiased edge). Its own
* alpha channel is therefore already the shape of the wordmark, so it can mask
* itself and take its colour from the background painted underneath.
*
* That is why no separate SVG is needed: masking with the very asset the ![]()
* already loads guarantees the repainted mark sits in exactly the same place
* and at exactly the same size as the one it replaces, which a second file
* drawn to slightly different proportions could not.
*
* --la-logo-mask is emitted by la-header-logo.php from the live Customizer
* logo, so replacing the logo in wp-admin keeps this working. The
* .la-logo-masked class is added by the script only once that variable is
* present -- without it these rules never apply and the ordinary image is
* left alone, rather than a filled rectangle being painted over the header.
* ------------------------------------------------------------------------- */
@supports ( ( -webkit-mask-image: url( '' ) ) or ( mask-image: url( '' ) ) ) {
#la-header.la-logo-masked .elementor-widget-theme-site-logo a {
display: inline-block;
/* Collapse the inline baseline gap so the painted box matches the image. */
font-size: 0;
line-height: 0;
-webkit-mask-image: var( --la-logo-mask );
mask-image: var( --la-logo-mask );
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
/* Light state: the same black the raster already is, so the homepage
looks untouched anywhere the backdrop is pale. */
background-color: #000;
transition: background-color 0.3s ease, filter 0.3s ease;
}
#la-header.la-logo-masked .elementor-widget-theme-site-logo img {
display: block;
visibility: hidden;
}
/* Over dark content: the off-white Jimmy specified, with a soft shadow so
the mark survives mid-tone frames of the hero video. */
#la-header.la-logo-masked.la-header--on-dark .elementor-widget-theme-site-logo a {
background-color: #F3F1EF;
filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.45 ) );
}
}
/* ---------------------------------------------------------------------------
* 3. The rest of the header furniture follows the wordmark.
* ------------------------------------------------------------------------- */
#la-header.la-header--contrast-ready .elementor-item,
#la-header.la-header--contrast-ready .elementor-button-text,
#la-header.la-header--contrast-ready .elementor-button-icon svg,
#la-header.la-header--contrast-ready .elementor-menu-toggle svg line,
#la-header.la-header--contrast-ready .elementor-menu-toggle svg path {
transition: color 0.3s ease, stroke 0.3s ease, fill 0.3s ease;
}
#la-header.la-header--on-dark .elementor-item,
#la-header.la-header--on-dark .elementor-button,
#la-header.la-header--on-dark .elementor-button-text {
color: #F3F1EF;
text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.45 );
}
#la-header.la-header--on-dark .elementor-button-icon svg {
fill: #F3F1EF;
filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.45 ) );
}
/* The burger is two inline elements with a hard-coded black stroke. */
#la-header.la-header--on-dark .elementor-menu-toggle svg line {
stroke: #F3F1EF;
}
#la-header.la-header--on-dark .elementor-menu-toggle svg path {
fill: #F3F1EF;
stroke: #F3F1EF;
}
#la-header.la-header--on-dark .elementor-menu-toggle svg {
filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.45 ) );
}
/* While the off-canvas menu is open the header sits above a solid panel, so
the adaptive treatment must not apply. */
#la-header.la-header--on-dark .elementor-menu-toggle.elementor-active svg line,
#la-header.la-header--on-dark .elementor-menu-toggle.elementor-active svg path {
stroke: #010101;
fill: #010101;
}
/* ---------------------------------------------------------------------------
* 4. The slide-out cart widget.
*
* Elementor drives the cart toggle through custom properties rather than
* ordinary colour rules, so it has to be set here and not with a fill.
* ------------------------------------------------------------------------- */
#la-header.la-header--on-dark .elementor-widget-woocommerce-menu-cart {
--toggle-button-icon-color: #F3F1EF;
--items-indicator-text-color: #010101;
--items-indicator-background-color: #F3F1EF;
}
/* ---------------------------------------------------------------------------
* 5. Panels that carry their own background keep their own colours.
*
* The slide-out cart, the burger dropdown and the top announcement strip all
* sit INSIDE #la-header and paint an opaque background of their own. Without
* this they would inherit the light treatment meant for the transparent header
* and render off-white text on an off-white panel.
*
* This matters more now than it did before: with the header transparent the
* whole way down the homepage, .la-header--on-dark is set far more often.
* ------------------------------------------------------------------------- */
#la-header.la-header--on-dark .top-banner-outer,
#la-header.la-header--on-dark .top-banner-outer *,
#la-header.la-header--on-dark .elementor-menu-cart__container,
#la-header.la-header--on-dark .elementor-menu-cart__container *,
#la-header.la-header--on-dark .elementor-nav-menu--dropdown,
#la-header.la-header--on-dark .elementor-nav-menu--dropdown * {
color: var( --e-global-color-primary );
fill: var( --e-global-color-primary );
filter: none;
text-shadow: none;
}
#la-header.la-header--on-dark .elementor-menu-cart__container svg polygon,
#la-header.la-header--on-dark .elementor-menu-cart__container svg path {
stroke: none;
}