/** * TopAppBar — full-page off-canvas navigation (tablet and smaller). */ /* RTL bar: logo → links → buttons (inline-start → inline-end) */ .obc-topappbar__bar, .site-header__inner { display: flex; flex-direction: row; direction: rtl; } .obc-topappbar__desktop-nav { display: flex; flex-direction: row; direction: rtl; } .obc-topappbar__brand-wrap, .obc-topappbar__brand, .site-header__logo { flex-shrink: 0; min-width: 0; } .obc-topappbar__brand-link { color: inherit; text-decoration: none; } /* Logo image base styles - Elementor can override with dynamic controls */ .obc-topappbar__logo img { display: block; max-width: var(--logo-max-width); max-height: var(--logo-max-height); width: auto; height: auto; object-fit: contain; transition: all var(--transition-normal); } .obc-topappbar__offcanvas-brand .obc-topappbar__logo img { /* Sized via Elementor Off-Canvas Style → Logo Size */ max-width: none; max-height: none; } .obc-topappbar__actions, .site-header__actions { display: flex; flex-direction: row; align-items: center; flex-shrink: 0; } /* Navigation links base styles - Elementor can override with dynamic controls */ .obc-topappbar__link { display: inline-block; text-decoration: none; transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal); box-sizing: border-box; } .obc-topappbar__cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-lg); background-color: var(--color-primary-container); color: var(--color-on-primary-container); font-family: var(--font-label); font-size: 0.875rem; line-height: 1.4; text-decoration: none; transition: transform var(--transition-fast), filter var(--transition-fast); } .obc-topappbar__cta:active { transform: scale(0.9); } .obc-topappbar--home-v3 .obc-topappbar__icon, .obc-topappbar--home-v3 .obc-topappbar__menu-trigger { background: transparent; } /* Search / icon buttons — center Material Symbol inside fixed box */ .obc-topappbar__icon, .obc-topappbar__menu-trigger, .topappbar-section .search-btn, .obc-topappbar__actions .material-symbols-outlined[role="button"] { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; box-sizing: border-box; flex-shrink: 0; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } .obc-topappbar__icon:focus:not(:focus-visible), .obc-topappbar__menu-trigger:focus:not(:focus-visible), .topappbar-section .search-btn:focus:not(:focus-visible), .obc-topappbar__actions .material-symbols-outlined[role="button"]:focus:not(:focus-visible) { outline: none; } button.obc-topappbar__icon.material-symbols-outlined, button.search-btn.material-symbols-outlined, .obc-topappbar__actions span.search-btn.material-symbols-outlined { vertical-align: unset; direction: ltr; } /* Desktop nav vs menu trigger: tablet and below use off-canvas */ @media (min-width: 1024px) { .obc-topappbar__desktop-nav { display: flex; } .obc-topappbar__menu-trigger { display: none !important; } } @media (max-width: 1023px) { .obc-topappbar__desktop-nav { display: none !important; } .obc-topappbar__cta--desktop-only { display: none !important; } .obc-topappbar__menu-trigger { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: inherit; } } /* Off-canvas overlay — portaled to in JS so fixed positioning covers the viewport */ .obc-topappbar__offcanvas { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; z-index: var(--z-modal); pointer-events: none; visibility: hidden; overflow: hidden; --obc-offcanvas-duration: 400ms; --obc-offcanvas-easing: cubic-bezier(0.4, 0, 0.2, 1); } .obc-topappbar__offcanvas[hidden] { display: none !important; } /* JS keeps the drawer in the DOM and animates transform instead of toggling display */ html.obc-topappbar-js .obc-topappbar__offcanvas[hidden] { display: block !important; } html.obc-topappbar-js .obc-topappbar__offcanvas.is-active { visibility: visible; pointer-events: auto; } .obc-topappbar__offcanvas-backdrop { position: absolute; inset: 0; z-index: var(--z-modal-backdrop); border: none; padding: 0; margin: 0; background: transparent; cursor: default; opacity: 0; pointer-events: none; transition: opacity var(--obc-offcanvas-duration) ease-out; } .obc-topappbar__offcanvas.is-open .obc-topappbar__offcanvas-backdrop { opacity: 1; pointer-events: auto; } .obc-topappbar__offcanvas .obc-topappbar__offcanvas-panel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--z-modal); display: flex; flex-direction: column; background: var(--color-surface); color: var(--color-on-surface); /* RTL: slide from right to left */ right: 0; left: auto; transform: translateX(100%); transition: transform var(--obc-offcanvas-duration) var(--obc-offcanvas-easing), opacity var(--obc-offcanvas-duration) ease-out; overflow: hidden; backface-visibility: hidden; opacity: 0; } .obc-topappbar__offcanvas.is-open .obc-topappbar__offcanvas-panel { transform: translateX(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .obc-topappbar__offcanvas .obc-topappbar__offcanvas-panel { transition: none; } } .obc-topappbar__offcanvas-close { position: absolute; top: var(--space-md); inset-inline-end: var(--space-md); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: none; border-radius: var(--radius-full); background: transparent; color: var(--color-on-surface); cursor: pointer; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; transition: color var(--transition-fast), background var(--transition-fast); } .obc-topappbar__offcanvas-close:focus, .obc-topappbar__offcanvas-close:focus-visible, .obc-topappbar__offcanvas-close:active { outline: none; box-shadow: none; background: transparent; } @media (hover: hover) and (pointer: fine) { .obc-topappbar__offcanvas-close:hover { color: var(--color-primary); background: var(--color-surface-container-high); } .obc-topappbar__offcanvas-close:focus-visible { color: var(--color-primary); background: var(--color-surface-container-high); outline: 2px solid var(--color-primary-container); outline-offset: 2px; } } .obc-topappbar__offcanvas-body { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: space-between; min-height: 0; padding: var(--space-3xl) var(--margin-mobile) var(--space-2xl); box-sizing: border-box; text-align: center; } @media (max-width: 767px) { .obc-topappbar__offcanvas-body { padding-inline: var(--margin-mobile); } } .obc-topappbar__offcanvas-brand { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); max-width: 100%; } .obc-topappbar__offcanvas-brand img { width: auto; height: auto; } .obc-topappbar__offcanvas-brand .obc-topappbar__logo img { object-fit: contain; } .obc-topappbar__offcanvas-brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-on-surface); line-height: 1.3; } .obc-topappbar__offcanvas-nav { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; max-width: 20rem; margin: 0; padding: var(--space-lg) 0; } .obc-topappbar__offcanvas-link, .obc-topappbar__offcanvas-link:link, .obc-topappbar__offcanvas-link:visited { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); font-family: var(--font-body); font-size: 1rem; line-height: 1.4; text-decoration: none; color: var(--color-on-surface-variant); -webkit-text-fill-color: currentColor; transition: color var(--transition-fast), background var(--transition-fast); -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .obc-topappbar__offcanvas-link:not(.obc-topappbar__offcanvas-link--active):hover, .obc-topappbar__offcanvas-link:not(.obc-topappbar__offcanvas-link--active):focus-visible { color: var(--color-on-surface); -webkit-text-fill-color: currentColor; font-weight: 600; } } .obc-topappbar__offcanvas-link--active, .obc-topappbar__offcanvas-link--active:link, .obc-topappbar__offcanvas-link--active:visited, .obc-topappbar__offcanvas-link--active:focus, .obc-topappbar__offcanvas-link--active:focus-visible { color: var(--color-primary); -webkit-text-fill-color: currentColor; font-weight: 700; border-bottom: none; border-radius: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; text-decoration-color: currentColor; } .obc-topappbar__offcanvas-social { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-md); padding-top: var(--space-lg); } .obc-topappbar__offcanvas-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); border: 1px solid var(--color-outline-variant); color: var(--color-on-surface-variant); text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .obc-topappbar__offcanvas-social-link:hover, .obc-topappbar__offcanvas-social-link:focus-visible { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-surface-container-low); } /* Dark home v3 drawer chrome — high specificity so Elementor portaled styles cannot win */ .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] { --obc-offcanvas-link-color: color-mix(in srgb, var(--color-surface-container-lowest) 88%, transparent); --obc-offcanvas-link-active-color: var(--color-primary-fixed); } .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-panel, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-panel, .obc-topappbar--home-v3 + .obc-topappbar__offcanvas .obc-topappbar__offcanvas-panel, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-panel { background: #0c0305; color: var(--color-surface-container-lowest); } .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-brand-name, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-brand-name, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-brand-name { color: var(--color-surface-container-lowest); } .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-link, .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-link:link, .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-link:visited, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-link, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-link:link, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-link:visited, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-link, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-link:link, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-link:visited { color: var(--obc-offcanvas-link-color); -webkit-text-fill-color: currentColor; opacity: 1; } .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-link--active, .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-link--active:link, .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-link--active:visited, .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-link--active:focus, .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-link--active:focus-visible, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-link--active, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-link--active:link, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-link--active:visited, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-link--active:focus, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-link--active:focus-visible, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-link--active, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-link--active:link, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-link--active:visited, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-link--active:focus, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-link--active:focus-visible { color: var(--obc-offcanvas-link-active-color); -webkit-text-fill-color: currentColor; opacity: 1; text-decoration-color: var(--obc-offcanvas-link-active-color); } .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-close, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-close, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-close { color: var(--color-surface-container-lowest); } .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-close:focus, .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-close:focus-visible, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-close:focus, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-close:focus-visible { color: var(--color-surface-container-lowest); background: transparent; outline: none; box-shadow: none; } .obc-topappbar__offcanvas.obc-topappbar__offcanvas--home-v3 .obc-topappbar__offcanvas-social-link, .obc-topappbar__offcanvas--home-v3[data-obc-offcanvas-widget] .obc-topappbar__offcanvas-social-link, .obc-topappbar-wrapper--home-v3 .obc-topappbar__offcanvas-social-link { border-color: rgba(255, 255, 255, 0.25); color: var(--color-surface-container-lowest); } body.obc-topappbar-offcanvas-open { overflow: hidden; }