html{
scroll-padding-top: 10vw;
}
.mexico-header {
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
z-index: 999 !important;
transition: box-shadow 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
filter: brightness(20);
}
.mexico-header .rotshtein-logo,
.mexico-header .rotshtein-logo img {
filter: brightness(0) invert(1);
transition: filter 0.3s ease;
}
/* Header CTA hover, under the header's brightness(20).
--------------------------------------------------------------------------
Target: dark-green #1E4E39 pill, white text, while the header filter is on.
`filter: none` on the button does NOT work, and cannot: a descendant can
never switch off a filter set on an ancestor. `.mexico-header` is filtered
as ONE layer, so the button is rasterised with its background and text and
only then multiplied by 20. Both colours blow past 255:
background #1E4E39 = rgb(30,78,57) x20 -> clipped to rgb(255,255,255)
text #fff = rgb(255,255,255) x20 -> rgb(255,255,255)
- which is a solid white pill with invisible text, the whole button gone.
brightness(0.05) IS the way to opt out, because 1/20 = 0.05 exactly cancels
the ancestor. It also promotes the button to its own layer, so its text
anti-aliasing survives as ALPHA - which no brightness filter touches -
instead of being baked into colour against the pill and then blown out.
The two filters cancel and the colours land on their literal values:
#1E4E39 x0.05 = rgb(1.5,3.9,2.85) x20 -> rgb(30,78,57) exact
#fff x0.05 = rgb(12.75,...) x20 -> rgb(255,255,255) exact
No clipping either way: the child filter only ever darkens, so the
intermediate values are small and the x20 restores them precisely.
The .elementor-button-text rule is required as well, not decorative -
Elementor colours that span separately from the , and its own value is
the dark green. Left alone it would round-trip to green ON green.
SCOPED to the only state that has the problem. The header drops its filter
when it sticks (min-width:1025px, .is-stuck) and below 1025px; in those
states the button already renders its true colours, so they are untouched.
THE TRANSITION HAS TO GO, and that is not a style preference.
Elementor gives this button `transition: all 0.3s`, and `filter` is an
ANIMATABLE property, so `all` interpolates it: on hover the browser walks
brightness(1) -> brightness(0.05) over 300ms. Every intermediate value is a
multiplier that has not finished cancelling the ancestor's x20, so the
green is amplified on the way down:
brightness(1.00) rgb(30,78,57) x20 -> white
brightness(0.20) rgb(6,15.6,11.4) x20 -> rgb(120,255,228) bright green
brightness(0.05) rgb(1.5,3.9,2.85) x20 -> rgb(30,78,57) correct
That sweep from white through bright green to the real colour IS the
"blinking with a light colour" - the button is not flickering, it is
animating through a blown-out range and only landing on the target at the
end of the 300ms.
`transition: none` on both the rest and hover states makes the swap
instant, so no intermediate brightness is ever painted. It is declared on
BOTH because hover-OUT animates too - left on, the same sweep would play in
reverse as the pointer leaves.
Restricting the transition to the colour properties instead was tried and
rejected: filter then snaps at t=0 while the colours are still fading, so
the border jumps from apparent-white to dark green before the background
catches up. An instant swap is the only artefact-free option here. */
@media (min-width: 1025px) {
.mexico-header:not(.is-stuck) .header-btn a,
.mexico-header:not(.is-stuck) .header-btn a:hover {
transition: none !important;
}
.mexico-header:not(.is-stuck) .header-btn a:hover {
background: #1E4E39 !important;
border-color: #1E4E39 !important;
color: #fff !important;
filter: brightness(0.05) !important;
}
.mexico-header:not(.is-stuck) .header-btn a:hover .elementor-button-text {
color: #fff !important;
}
}
.view-gradient-wrapper{
background: linear-gradient(180deg, #06062D -65.4%, rgba(8, 8, 43, 0) 100%);
}
.horiz-currencly{
font-size: 2vw !important;
}
.dir-ltr{
direction: ltr !important;
}
.dir-rtl{
direction: rtl !important;
}
.new-home-contact.lp-form :where(.form-field, .submit-col) {
max-width: 100%;
}
.lp-form :where(input, textarea, select){
border: 1px solid #1E4E39 !important;
color: #1E4E39 !important;
padding: 0.8vw 1vw 0.5vw 1vw !important;
height: 2.7vw !important;
border-radius: 0 !important;
}
.lp-form ::placeholder{
color: #1E4E39 !important;
}
.lp-form .submit-col .global-btn{
padding: 0.4vw 1vw 0.5vw 1vw !important;
height: 2.7vw !important;
border-radius: 0 !important;
}
.lp-form .privacy-checkbox .wpcf7-list-item-label, .lp-form .checkbox-group .first.last .wpcf7-list-item-label{
color: #1E4E39 !important;
}
.lp-form .privacy-checkbox input {
width: 1.3vw !important;
height: 1.3vw !important;
background: transparent !important;
border-radius: 0 !important;
min-width: 1.3vw;
border: 1px solid #1E4E39 !important;
padding: 0 !important;
}
.lp-form label span:first-child{
min-width: unset !important;
}
.lp-form .privacy-checkbox input[type="checkbox"]:checked::before{
color: #1E4E39 !important;
}
.wpcf7 form .wpcf7-response-output{
color: #1E4E39 !important;
}
.neighborhood-circle-small{
font-size: 1.7vw;
}
.mute-toggle{
top: unset !important;
right: unset !important;
bottom: 3vw !important;
left: 2vw !important;
}
@media (min-width: 1025px) {
.mexico-header.is-stuck {
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
background-color: #fff;
filter: none;
}
.mexico-header.is-stuck .rotshtein-logo,
.mexico-header.is-stuck .rotshtein-logo img {
filter: none;
}
}
/* Mobile & tablet: plain white header, no filters */
@media (max-width: 1024px) {
.mexico-header {
background-color: #fff;
filter: none;
}
.mexico-header .rotshtein-logo,
.mexico-header .rotshtein-logo img {
filter: none;
}
}
.heroVideo{
object-position: center center !important;
}
html { scroll-padding-top: 100px; }
.admin-bar .mexico-header { top: 32px; }
@media screen and (max-width: 782px) {
.admin-bar .mexico-header { top: 46px; }
html { scroll-padding-top: 80px; }
}
/* ===== Mobile menu — Elementor RTL stretch fix ===== */
@media (max-width: 1024px) {
.elementor-widget-nav-menu.elementor-nav-menu--stretch {
position: static !important;
}
.elementor-widget-nav-menu .elementor-nav-menu--dropdown {
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu {
width: 100% !important;
}
}
@media(max-width: 768px){
html{
scroll-padding-top: 60px;
}
.remove-br{
display: none !important;
}
.heroVideo{
width: 100% !important;
height: auto !important;
margin-bottom: 0 !important;
border: none !important;
border-radius: 0 !important;
}
.horiz-currencly {
font-size: 4vw !important;
}
.neighborhood-circle-small {
font-size: 3.7vw !important;
}
.footer-gradient-col {
background-image: linear-gradient(90deg, #FFF0 -10%, #FFF 0%) !important;
}
.lp-form :where(input, textarea, select){
height: 38px !important;
padding: 14px 10px 10px !important;
}
.lp-form .submit-col .global-btn{
height: 38px !important;
padding: 4px 10px !important;
font-size: 22px;
}
.lp-form .privacy-checkbox input {
height: 20px !important;
width: 20px !important;
min-width: 20px !important;
}
.lp-form .privacy-checkbox input[type="checkbox"]:checked::before{
top: 58% !important;
}
.mute-toggle{
z-index: 9 !important;
bottom: 20px !important;
left: 10px !important;
width: 30px !important;
height: 30px !important;
}
.mute-toggle img {
width: 25px !important;
}
}
/* ===== Shared spaces carousel — fade instead of slide ===== */
.shared-spaces-slider .swiper-wrapper {
position: relative;
/* Swiper keeps tracking slides, but stops moving them sideways */
transform: none !important;
}
.shared-spaces-slider .swiper-slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100% !important;
margin: 0 !important;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
.shared-spaces-slider .swiper-slide-active {
position: relative;
opacity: 1;
pointer-events: auto;
z-index: 2;
}