/**
* Carlo Rino — hero vs compact logo without reflowing the Astra 3-column grid.
*
* The logo keeps the SAME layout box (160×30 max) in both states; only transform:scale()
* changes the painted size. That preserves ast-builder-grid-row column % and side sections.
*
* Astra: span.site-logo-img > a.custom-logo-link > img|svg
*/
body.carlo-rino-hero-logo-active {
--cr-hero-logo-offset-y: 7.5rem;
--cr-header-slide-duration: 0.38s;
--cr-header-slide-easing: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Keep the header in document flow at the top of the page so it sits
below any Gutenberg/announcement block placed above it. Only pin it
once the white compact bar is showing (see scrolled rule below). */
body.carlo-rino-hero-logo-active #masthead {
overflow: visible;
transform: translate3d(0, 0, 0);
transition: transform var(--cr-header-slide-duration) var(--cr-header-slide-easing);
will-change: transform;
backface-visibility: hidden;
}
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up #masthead {
pointer-events: none;
}
/* After the slide-up swap, pin the white bar to the viewport. html/body
overflow-x breaks position:sticky, so this must be fixed. */
body.carlo-rino-hero-logo-active.carlo-rino-header-scrolled #masthead {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: 99;
width: 100% !important;
}
/* Snap paint (logo, colours, bar fill) while the header is off-screen
so the incoming mode is fully formed before it slides back down. */
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up #masthead .main-header-bar,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up #masthead .ast-primary-header-bar.main-header-bar,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up #masthead .ast-above-header,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up #masthead .ast-below-header,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up .site-logo-img .custom-logo-link img,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up .site-logo-img .custom-logo-link svg,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up #masthead a,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up #masthead .cr-btn-search-trigger,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up #masthead .cr-search-bar-trigger,
body.carlo-rino-hero-logo-active.carlo-rino-header-slide-up .cr-side-menu-trigger {
transition: none !important;
}
/* Logo always occupies compact bar space — grid columns stay stable */
body.carlo-rino-hero-logo-active .site-logo-img .custom-logo-link {
display: inline-block;
line-height: 0;
overflow: visible;
vertical-align: middle;
}
body.carlo-rino-hero-logo-active .site-logo-img .custom-logo-link img,
body.carlo-rino-hero-logo-active .site-logo-img .custom-logo-link svg {
max-width: 10rem !important;
max-height: 1.875rem !important;
width: auto !important;
height: auto !important;
object-fit: contain;
transition: transform 0.45s ease;
will-change: transform;
}
/* Hero: visually large; layout footprint unchanged (no padding / width changes on the bar) */
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .site-logo-img .custom-logo-link img,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .site-logo-img .custom-logo-link svg {
transform: translateY(var(--cr-hero-logo-offset-y)) scale(4.25);
transform-origin: center center;
}
body.carlo-rino-hero-logo-active.carlo-rino-header-scrolled .site-logo-img .custom-logo-link img,
body.carlo-rino-hero-logo-active.carlo-rino-header-scrolled .site-logo-img .custom-logo-link svg {
transform: scale(1);
}
/* Let the scaled artwork extend past the cell without clipping or resizing the grid */
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .site-branding,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .site-logo-img {
overflow: visible;
}
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .ast-grid-section-center {
overflow: visible;
}
/* Stack above side columns only for painting order when the logo overlaps */
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .site-branding {
position: relative;
z-index: 2;
}
@media (max-width: 921px) {
body.carlo-rino-hero-logo-active {
--cr-hero-logo-offset-y: 5rem;
}
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .site-logo-img .custom-logo-link img,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .site-logo-img .custom-logo-link svg {
transform: translateY(var(--cr-hero-logo-offset-y)) scale(2.65);
}
}
@media (prefers-reduced-motion: reduce) {
body.carlo-rino-hero-logo-active #masthead,
body.carlo-rino-hero-logo-active .site-logo-img .custom-logo-link img,
body.carlo-rino-hero-logo-active .site-logo-img .custom-logo-link svg {
transition: none;
}
}
/* =============================================================================
HERO LOGO STATE — header icon + text colour sync
While the hero logo is large (top of page) every header icon, trigger and
nav link paints white so it reads over the hero banner. When the user
scrolls and the body picks up .carlo-rino-header-scrolled, the colour
transitions back to the default #333.
The pink notification dot/badge (#E81F76) is intentionally preserved.
============================================================================= */
/* Single inherited text colour for every header surface — anchors, buttons,
triggers, icons. The logo opts out via a follow-up override below. */
body.carlo-rino-hero-logo-active #masthead {
color: #333333 !important;
text-shadow: none !important;
transition: color 0.45s ease, transform var(--cr-header-slide-duration) var(--cr-header-slide-easing) !important;
}
body.carlo-rino-hero-logo-active #masthead a,
body.carlo-rino-hero-logo-active #masthead .cr-btn-search-trigger,
body.carlo-rino-hero-logo-active #masthead .cr-search-bar-trigger,
body.carlo-rino-hero-logo-active .cr-side-menu-trigger {
color: #333333 !important;
text-shadow: none !important;
transition: color 0.45s ease !important;
}
/* Custom header HTML may use external SVG files via ![]()
, so filter those
assets to match the transparent/solid header colour state. */
body.carlo-rino-hero-logo-active #masthead .cr-btn-search-trigger img,
body.carlo-rino-hero-logo-active #masthead .cr-search-bar-trigger img,
body.carlo-rino-hero-logo-active #masthead .cr-side-menu-trigger img,
body.carlo-rino-hero-logo-active #masthead #cr-side-menu-trigger + img,
body.carlo-rino-hero-logo-active #masthead img[src*="search-01.svg"],
body.carlo-rino-hero-logo-active #masthead img[src*="menu-01.svg"] {
filter: none !important;
transition: filter 0.45s ease !important;
}
/* The logo is never recoloured — keep its native paint regardless of state. */
body.carlo-rino-hero-logo-active #masthead .custom-logo-link,
body.carlo-rino-hero-logo-active #masthead .custom-logo-link * {
color: initial !important;
}
/* SVGs need explicit stroke/fill transitions because `currentColor` is
resolved at paint time and doesn't tween from a colour transition alone.
One rule covers every inline SVG inside the masthead + side-menu trigger. */
body.carlo-rino-hero-logo-active :is(#masthead, .cr-side-menu-trigger) svg,
body.carlo-rino-hero-logo-active :is(#masthead, .cr-side-menu-trigger) svg * {
transition: stroke 0.45s ease, fill 0.45s ease !important;
}
/* Hero state (top of page, before scroll): paint everything white. */
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead a,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead .cr-btn-search-trigger,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead .cr-search-bar-trigger,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) .cr-side-menu-trigger {
color: #ffffff !important;
text-shadow: 0 0.062rem 0.188rem rgba(0, 0, 0, 0.45) !important;
}
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead .cr-btn-search-trigger img,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead .cr-search-bar-trigger img,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead .cr-side-menu-trigger img,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead #cr-side-menu-trigger + img,
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead img[src*="search-01.svg"],
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled) #masthead img[src*="menu-01.svg"] {
filter: brightness(0) invert(1) drop-shadow(0 0.062rem 0.125rem rgba(0, 0, 0, 0.45)) !important;
}
/* Keep white inline SVG icons readable over pale areas of hero imagery. */
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled)
:is(#masthead, .cr-side-menu-trigger)
svg:not(.custom-logo-link svg) {
filter: drop-shadow(0 0.062rem 0.125rem rgba(0, 0, 0, 0.45)) !important;
}
/* Rewrite hard-coded SVG strokes/fills to currentColor while in hero state.
Skips:
- fill/stroke="none" (kept transparent)
- #E81F76 / #e81f76 (pink notification badge stays pink)
- white / #fff / #ffffff (numbers / counters stay readable on pink)
- .custom-logo-link svg (logo is never re-tinted) */
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled)
:is(#masthead, .cr-side-menu-trigger)
svg:not(.custom-logo-link svg)
[stroke]:not([stroke="none"]):not([stroke="#E81F76"]):not([stroke="#e81f76"]) {
stroke: currentColor !important;
}
body.carlo-rino-hero-logo-active:not(.carlo-rino-header-scrolled)
:is(#masthead, .cr-side-menu-trigger)
svg:not(.custom-logo-link svg)
[fill]:not([fill="none"]):not([fill="#E81F76"]):not([fill="#e81f76"]):not([fill="white"]):not([fill="#fff"]):not([fill="#FFFFFF"]):not([fill="#ffffff"]) {
fill: currentColor !important;
}
/* Outline header icons must stay hollow — paths inherit fill="none" from
the root