/* ═══════════════════════════════════════════════════════════════ RomaFlow Mega Header 730 — brand v2.1 Mobile-first · RTL · theme-safe (data-rf-theme dark|light) Scope prefix: .rmh-730 ═══════════════════════════════════════════════════════════════ */ /* ─── local var scope (falls back if -801 tokens missing) ─── */ /* v1.1.10: also declared on .rmh-730-drawer / .rmh-730-scrim — v1.1.9 moved them to via appendTo(), and this is the only rule in the sheet that declares --rmh-*. */ .rmh-730-wrapper, .rmh-730-drawer, .rmh-730-scrim { --rmh-cyan: var(--rf-cyan, #00E5CC); --rmh-blue: var(--rf-blue, #0057FF); --rmh-gradient: var(--rf-gradient, linear-gradient(45deg,#00E5CC 0%,#0057FF 100%)); --rmh-gradient-cta: linear-gradient(45deg, #00776B 0%, #0044C7 100%); --rmh-gradient-90: linear-gradient(90deg, #00E5CC 0%, #0057FF 100%); --rmh-gradient-soft: linear-gradient(120deg, rgba(0,229,204,.09), rgba(0,87,255,.07)); --rmh-font: "Noto Sans Hebrew","Assistant",system-ui,sans-serif; --rmh-font-disp: "Space Grotesk","Noto Sans Hebrew",sans-serif; --rmh-tap: 44px; --rmh-ease: cubic-bezier(0.2, 0, 0, 1); --rmh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --rmh-dur-fast: .15s; --rmh-dur-std: .3s; --rmh-dur-slow: .55s; /* dark defaults (site is dark by default) */ --rmh-surface-lowest: #0B0F14; --rmh-surface-low: #12181F; --rmh-surface: #161D26; --rmh-surface-high: #1C2430; --rmh-surface-highest:#242E3C; --rmh-text-primary: #E6EBF2; --rmh-text-secondary: #B8C2D0; --rmh-text-outline: #8B95A5; --rmh-outline-variant: rgba(255,255,255,.10); --rmh-card-bg: var(--rmh-surface-low); --rmh-card-border: rgba(255,255,255,.10); --rmh-neu-bg: linear-gradient(145deg, #1A222C, #10161D); --rmh-neu-flat: 3px 3px 7px rgba(0,0,0,.45), -3px -3px 6px rgba(56,72,92,.20); --rmh-neu-tile: 2px 2px 6px rgba(0,0,0,.34), -2px -2px 5px rgba(56,72,92,.13); --rmh-neu-hover: 4px 4px 12px rgba(0,0,0,.44), -3px -3px 8px rgba(56,72,92,.20); --rmh-elev-3: 0 4px 8px 3px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.45); --rmh-elev-5: 0 8px 12px 6px rgba(0,0,0,.24), 0 4px 4px rgba(0,0,0,.38); --rmh-scrim: rgba(10,15,20,.72); font-family: var(--rmh-font); color: var(--rmh-text-primary); } /* light theme override */ :root[data-rf-theme="light"] :is(.rmh-730-wrapper, .rmh-730-drawer, .rmh-730-scrim) { --rmh-surface-lowest: #F4F2EC; --rmh-surface-low: #FFFFFF; --rmh-surface: #FAF9F5; --rmh-surface-high: #F1EFE8; --rmh-surface-highest:#E9E6DD; --rmh-text-primary: #0F172A; --rmh-text-secondary: #475569; --rmh-text-outline: #64748B; --rmh-outline-variant: rgba(15,23,42,.12); --rmh-card-bg: #FFFFFF; --rmh-card-border: rgba(148,163,184,.28); --rmh-neu-bg: linear-gradient(145deg, #FFFFFF, #E6E3DA); --rmh-neu-flat: 3px 3px 7px rgba(163,157,141,.32), -3px -3px 6px rgba(255,255,255,.85); --rmh-neu-tile: 2px 2px 6px rgba(163,157,141,.26), -2px -2px 5px rgba(255,255,255,.9); --rmh-neu-hover: 4px 4px 12px rgba(163,157,141,.36), -3px -3px 8px rgba(255,255,255,.95); --rmh-elev-3: 0 4px 8px 3px rgba(15,23,42,.10), 0 1px 3px rgba(15,23,42,.14); --rmh-elev-5: 0 8px 12px 6px rgba(15,23,42,.10), 0 4px 4px rgba(15,23,42,.14); --rmh-scrim: rgba(15,23,42,.55); } /* ─── generic ─── */ .rmh-730-wrapper *, .rmh-730-wrapper *::before, .rmh-730-wrapper *::after { box-sizing: border-box; } .rmh-730-wrapper svg { display: block; } .rmh-730-wrapper a { text-decoration: none; color: inherit; } .rmh-730-wrapper button { font: inherit; cursor: pointer; } .rmh-730-wrapper :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rmh-surface-lowest), 0 0 0 4px var(--rmh-cyan); border-radius: 8px; } /* ═══ TOP STRIP ═══ */ .rmh-730-strip { background: var(--rmh-surface-low); border-bottom: 1px solid var(--rmh-outline-variant); font-size: .82rem; color: var(--rmh-text-secondary); } .rmh-730-strip-inner { max-width: 1140px; margin-inline: auto; padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rmh-730-strip-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .rmh-730-strip-item { display: inline-flex; align-items: center; gap: 6px; color: inherit; transition: color var(--rmh-dur-fast) var(--rmh-ease); } .rmh-730-strip-item i, .rmh-730-strip-item svg { width: 12px; height: 12px; font-size: 12px; } a.rmh-730-strip-item:hover { color: var(--rmh-cyan); } .rmh-730-strip-social { display: flex; gap: 4px; align-items: center; } .rmh-730-strip-social-link { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--rmh-text-secondary); transition: all var(--rmh-dur-fast) var(--rmh-ease); } .rmh-730-strip-social-link:hover { color: var(--rmh-cyan); background: var(--rmh-surface-highest); } .rmh-730-strip-social-link i, .rmh-730-strip-social-link svg { width: 14px; height: 14px; font-size: 14px; } @media (max-width: 640px) { .rmh-730-strip-meta .rmh-730-strip-item:not(:first-child) { display: none; } } /* ═══ MAIN BAR ═══ */ .rmh-730-bar { background: var(--rmh-surface); border-bottom: 1px solid var(--rmh-outline-variant); box-shadow: var(--rmh-elev-3); position: relative; z-index: 100; } .rmh-730-bar-inner { max-width: 1140px; margin-inline: auto; padding: 14px 16px; display: flex; align-items: center; gap: 14px; } /* Sticky state */ .rmh-730-wrapper[data-sticky="1"] .rmh-730-bar { position: sticky; top: 0; z-index: 900; transition: box-shadow var(--rmh-dur-std) var(--rmh-ease), background var(--rmh-dur-std) var(--rmh-ease); } .rmh-730-wrapper[data-sticky="1"].is-stuck .rmh-730-bar { box-shadow: var(--rmh-elev-5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Brand */ .rmh-730-brand-wrap { display: inline-flex; align-items: center; gap: 8px; color: inherit; } .rmh-730-brand { font-family: var(--rmh-font-disp); font-weight: 700; font-size: 1.4rem; background: var(--rmh-gradient-90); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; white-space: nowrap; } .rmh-730-brand-img { height: auto; max-height: 44px; display: block; object-fit: contain; } /* Nav */ .rmh-730-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; } .rmh-730-nav-item { position: static; display: inline-flex; align-items: center; gap: 2px; } .rmh-730-nav-link { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 9999px; color: var(--rmh-text-primary); font-weight: 600; font-size: .95rem; font-family: var(--rmh-font); min-height: var(--rmh-tap); border: 1px solid transparent; background: transparent; transition: color var(--rmh-dur-fast) var(--rmh-ease), background var(--rmh-dur-fast) var(--rmh-ease); } .rmh-730-nav-link:hover { background: var(--rmh-surface-highest); color: var(--rmh-cyan); } .rmh-730-nav-item[data-open="true"] .rmh-730-nav-link { background: var(--rmh-surface-highest); color: var(--rmh-cyan); } .rmh-730-nav-caret { background: transparent; border: none; color: inherit; padding: 6px; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--rmh-dur-std) var(--rmh-ease), color var(--rmh-dur-fast) var(--rmh-ease); color: var(--rmh-text-secondary); border-radius: 8px; } .rmh-730-nav-caret:hover { color: var(--rmh-cyan); } .rmh-730-nav-item[data-open="true"] .rmh-730-nav-caret { transform: rotate(-180deg); color: var(--rmh-cyan); } .rmh-730-spacer { flex: 1; } .rmh-730-actions { display: inline-flex; align-items: center; gap: 10px; } .rmh-730-contact { display: inline-flex; align-items: center; gap: 6px; } /* Contact icon chip */ .rmh-730-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--rmh-neu-bg); box-shadow: var(--rmh-neu-flat); color: var(--rmh-text-primary); transition: transform var(--rmh-dur-fast) var(--rmh-ease), box-shadow var(--rmh-dur-fast) var(--rmh-ease), color var(--rmh-dur-fast) var(--rmh-ease); } .rmh-730-icon i, .rmh-730-icon svg { width: 18px; height: 18px; font-size: 18px; } .rmh-730-icon:hover { transform: translateY(-2px); color: var(--rmh-cyan); box-shadow: var(--rmh-neu-hover); } .rmh-730-icon-wa { color: #25D366; } .rmh-730-icon-wa:hover { color: #25D366; box-shadow: var(--rmh-neu-hover), 0 0 0 2px rgba(37,211,102,.24); } .rmh-730-icon-accent { color: var(--rmh-cyan); } /* CTA */ .rmh-730-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 32px 4px 32px 4px; background: var(--rmh-gradient-cta); color: #ffffff; font-family: var(--rmh-font); font-weight: 700; font-size: .94rem; min-height: var(--rmh-tap); white-space: nowrap; transition: transform var(--rmh-dur-fast) var(--rmh-ease-spring), box-shadow var(--rmh-dur-std) var(--rmh-ease); } .rmh-730-cta:hover { transform: translateY(-2px); box-shadow: var(--rmh-elev-5); } .rmh-730-cta svg { flex-shrink: 0; } .rmh-730-cta-sm { padding: 9px 16px; font-size: .88rem; } .rmh-730-cta-mobile { justify-content: center; margin-top: 20px; } /* Hamburger — desktop hidden */ .rmh-730-hamburger { width: 44px; height: 44px; border: none; background: transparent; color: var(--rmh-text-primary); border-radius: 12px; display: none; align-items: center; justify-content: center; } .rmh-730-hamburger i, .rmh-730-hamburger svg { width: 22px; height: 22px; font-size: 22px; } /* ═══ MEGA PANEL ═══ */ .rmh-730-mega { position: absolute; inset-inline-start: 16px; inset-inline-end: 16px; top: 100%; background: var(--rmh-card-bg); border: 1px solid var(--rmh-card-border); border-radius: 20px; box-shadow: var(--rmh-elev-5); padding: 22px; margin-top: 8px; max-width: 1108px; margin-inline: auto; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--rmh-dur-std) var(--rmh-ease), transform var(--rmh-dur-std) var(--rmh-ease); z-index: 950; /* SEO: rendered server-side, hidden with CSS only */ content-visibility: auto; contain-intrinsic-size: 400px; } .rmh-730-nav-item[data-open="true"] .rmh-730-mega { opacity: 1; transform: translateY(0); pointer-events: auto; } .rmh-730-mega-eyebrow { margin: 0 0 12px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rmh-text-outline); padding: 0 4px; font-weight: 500; } .rmh-730-mega-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); } .rmh-730-mega-col { display: flex; flex-direction: column; gap: 4px; } .rmh-730-mega-tile { display: flex; gap: 12px; padding: 12px; border-radius: 12px; color: var(--rmh-text-primary); align-items: flex-start; border: 1px solid transparent; transition: all var(--rmh-dur-fast) var(--rmh-ease); min-width: 0; } .rmh-730-mega-tile:hover { background: var(--rmh-surface-highest); border-color: var(--rmh-outline-variant); transform: translateX(-4px); } [dir="ltr"] .rmh-730-mega-tile:hover { transform: translateX(4px); } .rmh-730-mega-tile-ico { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; background: var(--rmh-gradient-soft); box-shadow: var(--rmh-neu-tile); display: inline-flex; align-items: center; justify-content: center; color: var(--rmh-cyan); flex-shrink: 0; } .rmh-730-mega-tile-ico i, .rmh-730-mega-tile-ico svg { width: 18px; height: 18px; font-size: 18px; } .rmh-730-mega-tile-body { min-width: 0; flex: 1; } .rmh-730-mega-tile-body strong { display: block; font-size: .96rem; margin-bottom: 2px; font-weight: 600; color: var(--rmh-text-primary); } .rmh-730-mega-tile-body > span { display: block; color: var(--rmh-text-secondary); font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; } .rmh-730-mega-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rmh-outline-variant); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rmh-730-mega-foot-txt { color: var(--rmh-text-secondary); font-size: .86rem; } .rmh-730-mega-foot-txt strong { color: var(--rmh-cyan); font-weight: 600; } /* Mega responsive collapse — down at tablet */ @media (max-width: 1024px) { .rmh-730-mega-grid { grid-template-columns: repeat(2, 1fr); } } /* ═══ MOBILE BREAKPOINT ═══ */ /* below breakpoint: hide desktop nav + contact + CTA; show hamburger */ @media (max-width: 959px) { .rmh-730-nav, .rmh-730-actions { display: none; } .rmh-730-hamburger { display: inline-flex; } .rmh-730-bar-inner { justify-content: space-between; } .rmh-730-spacer { display: none; } } .rmh-730-wrapper[data-mobile-bp="768"] .rmh-730-nav, .rmh-730-wrapper[data-mobile-bp="768"] .rmh-730-actions { display: flex; } .rmh-730-wrapper[data-mobile-bp="768"] .rmh-730-hamburger { display: none; } @media (max-width: 767px) { .rmh-730-wrapper[data-mobile-bp="768"] .rmh-730-nav, .rmh-730-wrapper[data-mobile-bp="768"] .rmh-730-actions { display: none; } .rmh-730-wrapper[data-mobile-bp="768"] .rmh-730-hamburger { display: inline-flex; } } .rmh-730-wrapper[data-mobile-bp="1025"] .rmh-730-nav, .rmh-730-wrapper[data-mobile-bp="1025"] .rmh-730-actions { display: flex; } .rmh-730-wrapper[data-mobile-bp="1025"] .rmh-730-hamburger { display: none; } @media (max-width: 1024px) { .rmh-730-wrapper[data-mobile-bp="1025"] .rmh-730-nav, .rmh-730-wrapper[data-mobile-bp="1025"] .rmh-730-actions { display: none; } .rmh-730-wrapper[data-mobile-bp="1025"] .rmh-730-hamburger { display: inline-flex; } } /* ═══ MOBILE DRAWER ═══ */ .rmh-730-scrim { position: fixed; inset: 0; background: var(--rmh-scrim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity var(--rmh-dur-std) var(--rmh-ease); z-index: 9998; } .rmh-730-scrim.is-open { opacity: 1; pointer-events: auto; } .rmh-730-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(88vw, 380px); background: var(--rmh-surface-low); border-inline-start: 1px solid var(--rmh-outline-variant); transform: translateX(-100%); /* RTL: enters from right → translate opposite */ transition: transform var(--rmh-dur-slow) var(--rmh-ease); z-index: 9999; display: flex; flex-direction: column; padding: 20px 18px 24px; overflow-y: auto; overscroll-behavior: contain; } [dir="ltr"] .rmh-730-drawer { transform: translateX(100%); } .rmh-730-drawer.is-open { transform: translateX(0); } .rmh-730-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--rmh-outline-variant); margin-bottom: 14px; } .rmh-730-drawer-brand { font-family: var(--rmh-font-disp); font-weight: 700; font-size: 1.1rem; background: var(--rmh-gradient-90); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .rmh-730-drawer-close { width: 40px; height: 40px; border: 1px solid var(--rmh-outline-variant); background: transparent; color: var(--rmh-text-primary); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; } .rmh-730-drawer-close i, .rmh-730-drawer-close svg { width: 18px; height: 18px; font-size: 18px; } /* Accordion */ .rmh-730-acc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .rmh-730-acc-item { border-bottom: 1px solid var(--rmh-outline-variant); } .rmh-730-acc-item:last-child { border-bottom: none; } .rmh-730-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; background: transparent; border: none; color: var(--rmh-text-primary); font-family: var(--rmh-font); font-size: 1rem; font-weight: 600; text-align: start; min-height: var(--rmh-tap); } .rmh-730-acc-lead { display: inline-flex; align-items: center; gap: 12px; } .rmh-730-acc-chev { transition: transform var(--rmh-dur-std) var(--rmh-ease); color: var(--rmh-text-secondary); flex-shrink: 0; } .rmh-730-acc-btn[aria-expanded="true"] .rmh-730-acc-chev { transform: rotate(-180deg); color: var(--rmh-cyan); } .rmh-730-acc-panel { max-height: 0; overflow: hidden; transition: max-height var(--rmh-dur-slow) var(--rmh-ease); } .rmh-730-acc-panel-inner { padding: 4px 8px 14px 0; display: flex; flex-direction: column; gap: 2px; } .rmh-730-acc-sub { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; color: var(--rmh-text-secondary); font-size: .94rem; min-height: var(--rmh-tap); transition: background var(--rmh-dur-fast) var(--rmh-ease), color var(--rmh-dur-fast) var(--rmh-ease); } .rmh-730-acc-sub:hover, .rmh-730-acc-sub:focus-visible { background: var(--rmh-surface-highest); color: var(--rmh-text-primary); } .rmh-730-acc-sub-ico { width: 28px; height: 28px; min-width: 28px; border-radius: 8px; background: var(--rmh-gradient-soft); color: var(--rmh-cyan); display: inline-flex; align-items: center; justify-content: center; } .rmh-730-acc-sub-ico i, .rmh-730-acc-sub-ico svg { width: 14px; height: 14px; font-size: 14px; } .rmh-730-drawer-contact { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rmh-outline-variant); display: flex; gap: 10px; justify-content: space-around; flex-wrap: wrap; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .rmh-730-wrapper *, .rmh-730-wrapper *::before, .rmh-730-wrapper *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ═══════════════════════════════════════════════════════════════ THEME HARDENING v1.1.1 (2026-08-03) Purpose: (1) beat Elementor global color specificity, (2) force every icon to inherit color, (3) add a deeper-dark space tier, (4) guarantee readable text/icon contrast on both dark & light. ═══════════════════════════════════════════════════════════════ */ /* ─── (1) SPECIFICITY BUMP: double-class forces us above Elementor's .elementor-widget-XXX defaults without needing !important ─── */ .rmh-730-wrapper.rmh-730-wrapper { color: var(--rmh-text-primary); background: transparent; } .rmh-730-wrapper.rmh-730-wrapper .rmh-730-nav-link, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-acc-btn, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-mega-tile, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-mega-tile-body strong, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-drawer-brand, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-drawer-close { color: var(--rmh-text-primary); } .rmh-730-wrapper.rmh-730-wrapper .rmh-730-mega-tile-body > span, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-mega-foot-txt, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-strip, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-strip-item, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-strip-social-link, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-acc-sub, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-nav-caret, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-acc-chev { color: var(--rmh-text-secondary); } .rmh-730-wrapper.rmh-730-wrapper .rmh-730-strip { background: var(--rmh-surface-low); } .rmh-730-wrapper.rmh-730-wrapper .rmh-730-bar { background: var(--rmh-surface); } .rmh-730-wrapper.rmh-730-wrapper .rmh-730-mega, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-drawer { background: var(--rmh-card-bg); } /* ─── (2) FORCE ICONS TO INHERIT COLOR FA font-icons already respect currentColor. SVG icons rendered by Elementor sometimes have an inline `fill`. Neutralize them. ─── */ .rmh-730-wrapper i, .rmh-730-wrapper svg { color: inherit; } .rmh-730-wrapper .rmh-730-mega-tile-ico svg path, .rmh-730-wrapper .rmh-730-mega-tile-ico svg circle, .rmh-730-wrapper .rmh-730-mega-tile-ico svg polygon, .rmh-730-wrapper .rmh-730-acc-sub-ico svg path, .rmh-730-wrapper .rmh-730-acc-sub-ico svg circle, .rmh-730-wrapper .rmh-730-acc-sub-ico svg polygon, .rmh-730-wrapper .rmh-730-strip-item svg path, .rmh-730-wrapper .rmh-730-strip-social-link svg path, .rmh-730-wrapper .rmh-730-icon svg path, .rmh-730-wrapper .rmh-730-icon svg circle, .rmh-730-wrapper .rmh-730-drawer-close svg path, .rmh-730-wrapper .rmh-730-hamburger svg path, .rmh-730-wrapper .rmh-730-hamburger svg line, .rmh-730-wrapper .rmh-730-hamburger svg rect { fill: currentColor; } /* Explicit cyan on the mega-tile icons — dark or light, cyan reads on both */ .rmh-730-wrapper.rmh-730-wrapper .rmh-730-mega-tile-ico, .rmh-730-wrapper.rmh-730-wrapper .rmh-730-acc-sub-ico { color: var(--rmh-cyan); } /* ─── (3) DEEP-DARK SPACE ATMOSPHERE Site sometimes runs data-rf-theme="dark" + data-rf-atmo="space". Sink the surface tokens a notch so the header doesn't glow lighter than the page. ─── */ :root[data-rf-atmo="space"] :is(.rmh-730-wrapper, .rmh-730-drawer, .rmh-730-scrim) { --rmh-surface-lowest: #05080D; --rmh-surface-low: #0A0F16; --rmh-surface: #0E141C; --rmh-surface-high: #141B25; --rmh-surface-highest:#1B2330; --rmh-card-bg: #0A0F16; --rmh-card-border: rgba(255,255,255,.08); --rmh-neu-bg: linear-gradient(145deg, #121A24, #080C11); } /* ─── (4) SOCIAL/CONTACT CHIP BACKGROUNDS — always readable The neu-bg gradient on the icon chips uses semi-transparent light pixels. On very dark backgrounds that reads fine; on light we want the chip to sit on the page, not float invisibly. ─── */ :root[data-rf-theme="light"] .rmh-730-wrapper .rmh-730-icon { background: #F1EFE8; box-shadow: 0 1px 3px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.06); color: var(--rmh-text-primary); } :root[data-rf-theme="light"] .rmh-730-wrapper .rmh-730-icon:hover { box-shadow: 0 4px 10px rgba(15,23,42,.14), inset 0 0 0 1px rgba(0,229,204,.24); } /* WhatsApp green stays green on both — but reinforce contrast on light */ :root[data-rf-theme="light"] .rmh-730-wrapper .rmh-730-icon-wa { color: #128C40; } /* Strip social hover — cyan on dark is fine; on light bump to blue for contrast */ :root[data-rf-theme="light"] .rmh-730-wrapper .rmh-730-strip-social-link:hover { color: var(--rmh-blue); background: rgba(0,87,255,.08); } /* Nav caret + accordion chev on light — near-inked so it doesn't disappear */ :root[data-rf-theme="light"] .rmh-730-wrapper .rmh-730-nav-caret, :root[data-rf-theme="light"] .rmh-730-wrapper .rmh-730-acc-chev { color: var(--rmh-text-secondary); } /* Mega tile — on light the transparent gradient-soft bg on tile ico can wash out. Give it a stronger backing tinted with cyan-blue mix. */ :root[data-rf-theme="light"] .rmh-730-wrapper .rmh-730-mega-tile-ico, :root[data-rf-theme="light"] .rmh-730-wrapper .rmh-730-acc-sub-ico { background: linear-gradient(120deg, rgba(0,229,204,.16), rgba(0,87,255,.12)); color: var(--rmh-blue); } /* ═══════════════════════════════════════════════════════════════ STICKY — FIXED-MODE FIX (v1.1.5, 2026-08-16) Why: position:sticky lived on .rmh-730-bar, whose containing block (.rmh-730-wrapper → .elementor-widget-container) is exactly the header's own height (116px live). A sticky box can only travel inside its parent's box → zero travel → it scrolled away. Fix: the WRAPPER goes position:fixed on .is-stuck, with a JS spacer holding its former height so nothing shifts (no CLS). Mobile-first: the info strip is dropped while stuck so the fixed bar stays slim on a phone. ═══════════════════════════════════════════════════════════════ */ /* undo the trapped sticky on the inner bar — it stays the anchor for the absolutely-positioned mega panels */ .rmh-730-wrapper[data-sticky="1"] .rmh-730-bar { position: relative; top: auto; } /* spacer injected by script.js right after the wrapper */ .rmh-730-sticky-spacer-730 { display: block; width: 100%; height: 0; } .rmh-730-wrapper[data-sticky="1"].is-stuck { position: fixed; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; width: 100%; max-width: 100%; z-index: 9995; will-change: transform; } /* slim condensed state — phone first, applies at every width */ .rmh-730-wrapper[data-sticky="1"].is-stuck .rmh-730-strip { display: none; } .rmh-730-wrapper[data-sticky="1"].is-stuck .rmh-730-bar-inner { padding-block: 10px; } @media (min-width: 1025px) { .rmh-730-wrapper[data-sticky="1"].is-stuck .rmh-730-bar-inner { padding-block: 12px; } } @media (prefers-reduced-motion: reduce) { .rmh-730-wrapper[data-sticky="1"] .rmh-730-bar { transition: none; } } /* ═══════════════════════════════════════════════════════════════ DRAWER RE-ROOT (v1.1.10, 2026-08-29) Why: v1.1.9 correctly appendTo(document.body)'s the drawer + scrim so their position:fixed anchors to the viewport instead of the .is-stuck wrapper's containing block — a real fix, kept as-is. What it missed: .rmh-730-wrapper is the ONLY selector in this sheet that declares the --rmh-* custom properties (see top of file), and every generic reset / v1.1.1 hardening rule below it was scoped `.rmh-730-wrapper …`. Moving the drawer + scrim out from under the wrapper orphaned both — undefined var() drops the whole declaration, so the drawer went transparent, undimmed, unstyled and untransitioned. Fix: re-root exactly the rules the relocated nodes now need, at .rmh-730-drawer / .rmh-730-scrim instead of .rmh-730-wrapper. No token declarations move (see the widened selectors at the top of this file) and no value changes — same declarations, new anchor. ═══════════════════════════════════════════════════════════════ */ /* ─── generic resets the drawer lost with the wrapper ─── */ .rmh-730-drawer *, .rmh-730-drawer *::before, .rmh-730-drawer *::after { box-sizing: border-box; } .rmh-730-drawer svg { display: block; } .rmh-730-drawer a { text-decoration: none; color: inherit; } .rmh-730-drawer button { font: inherit; cursor: pointer; } .rmh-730-drawer :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rmh-surface-lowest), 0 0 0 4px var(--rmh-cyan); border-radius: 8px; } .rmh-730-drawer i, .rmh-730-drawer svg { color: inherit; } .rmh-730-drawer .rmh-730-acc-sub-ico svg path, .rmh-730-drawer .rmh-730-acc-sub-ico svg circle, .rmh-730-drawer .rmh-730-acc-sub-ico svg polygon, .rmh-730-drawer .rmh-730-drawer-close svg path { fill: currentColor; } /* ─── v1.1.1 hardening colours, re-rooted at .rmh-730-drawer ─── double-class idiom (line 679) beats Elementor globals without !important */ .rmh-730-drawer.rmh-730-drawer { background: var(--rmh-card-bg); } .rmh-730-drawer.rmh-730-drawer .rmh-730-acc-btn, .rmh-730-drawer.rmh-730-drawer .rmh-730-drawer-brand, .rmh-730-drawer.rmh-730-drawer .rmh-730-drawer-close { color: var(--rmh-text-primary); } .rmh-730-drawer.rmh-730-drawer .rmh-730-acc-sub, .rmh-730-drawer.rmh-730-drawer .rmh-730-acc-chev { color: var(--rmh-text-secondary); } .rmh-730-drawer.rmh-730-drawer .rmh-730-acc-sub-ico { color: var(--rmh-cyan); } /* ─── light-theme drawer rules ─── */ :root[data-rf-theme="light"] .rmh-730-drawer .rmh-730-icon { background: #F1EFE8; box-shadow: 0 1px 3px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.06); color: var(--rmh-text-primary); } :root[data-rf-theme="light"] .rmh-730-drawer .rmh-730-icon:hover { box-shadow: 0 4px 10px rgba(15,23,42,.14), inset 0 0 0 1px rgba(0,229,204,.24); } :root[data-rf-theme="light"] .rmh-730-drawer .rmh-730-acc-sub-ico { background: linear-gradient(120deg, rgba(0,229,204,.16), rgba(0,87,255,.12)); color: var(--rmh-blue); } /* ─── reduced motion — the wrapper-scoped rule at line 660 no longer reaches these, now that they live at ─── */ @media (prefers-reduced-motion: reduce) { .rmh-730-drawer, .rmh-730-drawer *, .rmh-730-drawer *::before, .rmh-730-drawer *::after, .rmh-730-scrim { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ═══════════════════════════════════════════════════════════════ DRAWER CONTACT-ICON FILL FIX (v1.1.11, 2026-08-29) Why: the v1.1.10 re-root above caught .rmh-730-acc-sub-ico and .rmh-730-drawer-close, but missed the wrapper-scoped `.rmh-730-wrapper .rmh-730-icon svg path/circle { fill: currentColor }` rule — the one that colours the WhatsApp/phone/mail contact chips in the drawer footer (.rmh-730-drawer-contact .rmh-730-icon). Without it those SVGs fall back to the browser's default black fill: it happens to read fine on the light-theme chip, but is invisible on the dark-theme chip — an accessibility/contrast regression Roma caught right after the v1.1.10 deploy. ═══════════════════════════════════════════════════════════════ */ .rmh-730-drawer .rmh-730-icon svg path, .rmh-730-drawer .rmh-730-icon svg circle { fill: currentColor; }