/** * TCB-MegaMenu - Front-end styles * * Breakpoint model: visibility of desktop vs. mobile behaviour is driven by the * `tcbmm-viewport-desktop` / `tcbmm-viewport-mobile` class that the JS sets on * from the configured breakpoint. The @media block at the bottom is only a * no-JS fallback. This keeps ONE source of truth for the breakpoint. * * @package TCB_MegaMenu * @version 1.4.0 */ /* ── Mega item ──────────────────────────────────────────────────── */ .tcbmm-mega-item { position: relative; } .tcbmm-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--tcbmm-accent, #e11414); color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 3px; vertical-align: middle; line-height: 1.6; } /* ── Panel base (desktop) ───────────────────────────────────────── */ /* Geometry (top/left/width) is set inline by the JS via position:fixed. */ .tcbmm-panel { position: fixed; z-index: 9999; box-sizing: border-box; max-height: calc(100vh - 80px); overflow-y: auto; background: var(--tcbmm-bg, #ffffff); color: var(--tcbmm-fg, #333333); border: 1px solid var(--tcbmm-border, rgba(0, 0, 0, .08)); /* Grosor y esquinas configurables desde Ajustes → Diseño (2.6.0). */ border-top: var(--tcbmm-top-line, 2px) solid var(--tcbmm-accent, #e11414); border-radius: var(--tcbmm-radius-top, 0) var(--tcbmm-radius-top, 0) var(--tcbmm-radius, 10px) var(--tcbmm-radius, 10px); box-shadow: var(--tcbmm-shadow, 0 24px 60px rgba(0, 0, 0, .15)); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--tcbmm-anim, .22s) ease, transform var(--tcbmm-anim, .22s) ease, visibility 0s linear var(--tcbmm-anim, .22s); font-family: var(--tcbmm-font, inherit); } .tcbmm-panel[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--tcbmm-anim, .22s) ease, transform var(--tcbmm-anim, .22s) ease, visibility 0s linear 0s; } /* When JS hides the panel entirely between opens. */ .tcbmm-panel[hidden] { display: none; } /* ── Panel widths (used as hints; JS reads these classes) ───────── */ .tcbmm-width-container { width: min(1200px, calc(100vw - 16px)); max-width: calc(100vw - 16px); } .tcbmm-width-full { width: 100%; } /* custom width comes from an inline style on the element */ /* ── Panel inner ────────────────────────────────────────────────── */ .tcbmm-panel-inner { padding: var(--tcbmm-gap, clamp(16px, 2vw, 32px)); max-width: 1200px; margin: 0 auto; } .tcbmm-align-left .tcbmm-panel-inner { text-align: left; } .tcbmm-align-center .tcbmm-panel-inner { text-align: center; } .tcbmm-align-right .tcbmm-panel-inner { text-align: right; } /* ── Links ──────────────────────────────────────────────────────── */ .tcbmm-panel a { color: var(--tcbmm-fg, #333333); text-decoration: none; transition: color 0.2s ease; } .tcbmm-panel a:hover, .tcbmm-panel a:focus { color: var(--tcbmm-accent, #e11414); } /* ── Columns layout (Custom Columns source) ─────────────────────── */ .tcbmm-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--tcbmm-gap, clamp(16px, 2vw, 32px)); } .tcbmm-column { display: flex; flex-direction: column; } .tcbmm-column-links { list-style: none; margin: 0; padding: 0; } .tcbmm-column-links li { margin-bottom: 8px; } .tcbmm-column-links a { display: block; padding: 6px 0; font-size: 14px; line-height: 1.5; transition: color 0.2s ease, padding-left 0.2s ease; } .tcbmm-column-links a:hover, .tcbmm-column-links a:focus { padding-left: 8px; } /* ── Divi content wrapper ───────────────────────────────────────── */ .tcbmm-divi-content { width: 100%; } .tcbmm-divi-content .et_pb_section { padding: 0 !important; margin: 0 !important; } .tcbmm-divi-content .et_pb_row { padding: 0 !important; margin: 0 auto !important; } .tcbmm-divi-content .et_pb_column { padding: 0 var(--tcbmm-gap, 16px) !important; } /* ── States: empty / error ──────────────────────────────────────── */ .tcbmm-empty { padding: 20px; text-align: center; color: var(--tcbmm-muted, #666666); font-size: 14px; } .tcbmm-error { padding: 15px 20px; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: var(--tcbmm-radius, 10px); color: #a97a00; font-size: 13px; } .tcbmm-error p { margin: 0; } /* ── Focus states (accessibility) ───────────────────────────────── */ .tcbmm-panel a:focus-visible, .tcbmm-panel button:focus-visible, .tcbmm-mega-item > a:focus-visible, .tcbmm-mega-toggle:focus-visible { outline: 2px solid var(--tcbmm-accent, #e11414); outline-offset: 2px; border-radius: 2px; } /* ── Mobile chevron toggle ──────────────────────────────────────── */ .tcbmm-mega-toggle { display: none; /* shown only in the mobile viewport (see below) */ align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: 4px; background: none; border: none; cursor: pointer; vertical-align: middle; color: inherit; } .tcbmm-mega-toggle-icon { display: block; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; margin-top: -4px; } .tcbmm-mega-toggle[aria-expanded="true"] .tcbmm-mega-toggle-icon { transform: rotate(-135deg); margin-top: 2px; } /* ══════════════════════════════════════════════════════════════════ MOBILE VIEWPORT (class set by JS from the configured breakpoint) Panels become inline accordions, integrated into whatever mobile menu the theme/Divi shows. ══════════════════════════════════════════════════════════════════ */ .tcbmm-viewport-mobile .tcbmm-mega-item { position: relative; } /* Keep the link text clear of the chevron so they never overlap. */ .tcbmm-viewport-mobile .tcbmm-mega-item > a { padding-right: 52px !important; } /* Chevron pinned to the right of the item, aligned with the first line. */ .tcbmm-viewport-mobile .tcbmm-mega-toggle { display: flex; position: absolute; top: 0; right: 0; width: 48px; height: 48px; margin: 0; z-index: 2; } .tcbmm-viewport-mobile .tcbmm-panel { position: static !important; inset: auto !important; width: 100% !important; max-width: 100% !important; max-height: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; box-shadow: none !important; border: none !important; border-top: 1px solid var(--tcbmm-border, rgba(0, 0, 0, .08)) !important; border-left: 3px solid var(--tcbmm-accent, #e11414) !important; border-radius: 0 !important; margin: 0 !important; transition: none !important; display: none; } .tcbmm-viewport-mobile .tcbmm-panel.tcbmm-open { display: block; } /* Even if it lost the hidden attribute, class controls display on mobile. */ .tcbmm-viewport-mobile .tcbmm-panel[hidden]:not(.tcbmm-open) { display: none; } .tcbmm-viewport-mobile .tcbmm-panel-inner { padding: 12px 18px !important; max-width: 100% !important; } .tcbmm-viewport-mobile .tcbmm-columns { grid-template-columns: 1fr !important; gap: 0 !important; } .tcbmm-viewport-mobile .tcbmm-column-links li { margin: 0 !important; border-bottom: 1px solid var(--tcbmm-border, rgba(0, 0, 0, .08)); } .tcbmm-viewport-mobile .tcbmm-column-links li:last-child { border-bottom: none; } .tcbmm-viewport-mobile .tcbmm-column-links a { padding: 12px 0 !important; font-size: 15px; } .tcbmm-viewport-mobile .tcbmm-column-links a:hover, .tcbmm-viewport-mobile .tcbmm-column-links a:focus { padding-left: 0 !important; } /* ── Reduced motion ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .tcbmm-panel, .tcbmm-mega-toggle-icon, .tcbmm-column-links a { transition: none !important; } } /* ── Print ──────────────────────────────────────────────────────── */ @media print { .tcbmm-panel, .tcbmm-mega-toggle { display: none !important; } } /* ══════════════════════════════════════════════════════════════════ MOBILE TAKEOVER MODE The plugin renders its own hamburger + panel and hides the theme/Divi mobile menu. Fully self-contained: three styles (drawer, fullscreen, accordion), selectable in settings. Visible only in the mobile viewport. ══════════════════════════════════════════════════════════════════ */ /* ALWAYS hide Divi's native mobile DROPDOWN while we take over — no matter how Divi tries to open it (inline styles, .opened class, etc.). */ .tcbmm-viewport-mobile.tcbmm-takeover .et_mobile_menu, .tcbmm-viewport-mobile.tcbmm-takeover #mobile_menu, .tcbmm-viewport-mobile.tcbmm-takeover .et_pb_menu__mobile-menu, .tcbmm-viewport-mobile.tcbmm-takeover .et_pb_fullwidth_menu__mobile-menu, .tcbmm-viewport-mobile.tcbmm-takeover .et_mobile_nav_menu ul.et_mobile_menu { display: none !important; visibility: hidden !important; opacity: 0 !important; max-height: 0 !important; overflow: hidden !important; } /* Option: hide the theme's WHOLE header on mobile (logo, cart, bar) so only the plugin's floating button remains. Scoped to the mobile viewport, so desktop is untouched. Covers the classic Divi header and Theme Builder. */ .tcbmm-viewport-mobile.tcbmm-hide-theme-header #main-header, .tcbmm-viewport-mobile.tcbmm-hide-theme-header #top-header, .tcbmm-viewport-mobile.tcbmm-hide-theme-header .et-l--header, .tcbmm-viewport-mobile.tcbmm-hide-theme-header #et-top-navigation, .tcbmm-viewport-mobile.tcbmm-hide-theme-header .et_pb_fullwidth_menu { display: none !important; } /* Remove the space a fixed header reserved at the top. */ .tcbmm-viewport-mobile.tcbmm-hide-theme-header #page-container { padding-top: 0 !important; } /* Our own floating burger: also hide Divi's hamburger bar/container. */ .tcbmm-viewport-mobile.tcbmm-takeover:not(.tcbmm-usetoggle) .et_mobile_nav_menu, .tcbmm-viewport-mobile.tcbmm-takeover:not(.tcbmm-usetoggle) #et_mobile_nav_menu, .tcbmm-viewport-mobile.tcbmm-takeover:not(.tcbmm-usetoggle) .mobile_menu_bar { display: none !important; } /* Reusing Divi's hamburger as the trigger (kept in the header next to the logo): recolor it to match the plugin's hamburger color setting. */ .tcbmm-viewport-mobile.tcbmm-takeover.tcbmm-usetoggle .mobile_menu_bar, .tcbmm-viewport-mobile.tcbmm-takeover.tcbmm-usetoggle .mobile_menu_bar:before, .tcbmm-viewport-mobile.tcbmm-takeover.tcbmm-usetoggle .mobile_menu_bar:after { color: var(--tcbmm-hamburger-color, #333) !important; } /* Body scroll lock while the panel is open. */ html.tcbmm-mobile-lock, html.tcbmm-mobile-lock body { overflow: hidden !important; } /* ── Hamburger button (ours) ────────────────────────────────────── */ .tcbmm-mobile-burger { display: none; position: fixed; top: 16px; z-index: 100000; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: transparent; border: none; cursor: pointer; } .tcbmm-mobile-burger.tcbmm-mpos-right { right: 16px; } .tcbmm-mobile-burger.tcbmm-mpos-left { left: 16px; } .tcbmm-viewport-mobile.tcbmm-takeover .tcbmm-mobile-burger { display: flex; } /* While open: hide a NON-animated burger (close via overlay/X). An animated burger stays visible because it morphs into the X close control. */ html.tcbmm-mobile-lock .tcbmm-mobile-burger:not(.tcbmm-animate) { opacity: 0; pointer-events: none; } /* Keep the animated burger clickable above the panel while open. */ html.tcbmm-nav-open .tcbmm-mobile-burger.tcbmm-animate { z-index: 100001; } .tcbmm-burger-box { position: relative; display: block; width: var(--tcbmm-hamburger-size, 26px); height: var(--tcbmm-hamburger-size, 26px); } .tcbmm-burger-line { position: absolute; left: 0; width: 100%; height: var(--tcbmm-hamburger-thickness, 2px); background: var(--tcbmm-hamburger-color, #333); border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; } .tcbmm-burger-line:nth-child(1) { top: 20%; } .tcbmm-burger-line:nth-child(2) { top: 50%; transform: translateY(-50%); } .tcbmm-burger-line:nth-child(3) { bottom: 20%; } /* ── Burger → X morph (when the menu is open) ───────────────────── */ html.tcbmm-nav-open .tcbmm-burger-box.tcbmm-animate .tcbmm-burger-line:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } html.tcbmm-nav-open .tcbmm-burger-box.tcbmm-animate .tcbmm-burger-line:nth-child(2) { opacity: 0; } html.tcbmm-nav-open .tcbmm-burger-box.tcbmm-animate .tcbmm-burger-line:nth-child(3) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); } /* ── Our icon drawn over Divi's header hamburger (usetoggle mode) ── */ .tcbmm-viewport-mobile.tcbmm-takeover.tcbmm-usetoggle .mobile_menu_bar.tcbmm-toggle-host { position: relative; } /* Hide Divi's own glyph so only our animatable icon shows. */ .tcbmm-viewport-mobile.tcbmm-takeover.tcbmm-usetoggle .mobile_menu_bar.tcbmm-toggle-host:before, .tcbmm-viewport-mobile.tcbmm-takeover.tcbmm-usetoggle .mobile_menu_bar.tcbmm-toggle-host:after { color: transparent !important; } .tcbmm-toggle-host-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; pointer-events: none; } /* ── Overlay ────────────────────────────────────────────────────── */ .tcbmm-mobile-overlay { position: fixed; inset: 0; z-index: 99998; background: var(--tcbmm-overlay-bg, rgba(0, 0, 0, 0.5)); opacity: 0; visibility: hidden; transition: opacity var(--tcbmm-mobile-anim-speed, .32s) ease, visibility 0s linear var(--tcbmm-mobile-anim-speed, .32s); } .tcbmm-mobile-overlay.tcbmm-open { opacity: 1; visibility: visible; transition: opacity var(--tcbmm-mobile-anim-speed, .32s) ease, visibility 0s linear 0s; } /* ── Nav panel (base) ───────────────────────────────────────────── */ .tcbmm-mobile-nav { position: fixed; z-index: 99999; box-sizing: border-box; background: var(--tcbmm-bg, #ffffff); color: var(--tcbmm-fg, #333333); overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: var(--tcbmm-font, inherit); transition: transform var(--tcbmm-mobile-anim-speed, .32s) cubic-bezier(.4, 0, .2, 1), opacity var(--tcbmm-mobile-anim-speed, .32s) ease; } /* Animation: fade (opacity only, no slide) — works for all three styles. */ .tcbmm-mobile-nav.tcbmm-anim-fade { transform: none !important; opacity: 0; } .tcbmm-mobile-nav.tcbmm-anim-fade.tcbmm-open { opacity: 1; } .tcbmm-mobile-nav[hidden] { display: none; } .tcbmm-mobile-nav-inner { padding: max(64px, calc(env(safe-area-inset-top) + 44px)) 0 32px; } /* With a header bar the big top padding is not needed. */ .tcbmm-mobile-nav.tcbmm-has-header .tcbmm-mobile-nav-inner { padding-top: 8px; } .tcbmm-mnav-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 16px; width: 40px; height: 40px; line-height: 1; font-size: 30px; background: none; border: none; color: var(--tcbmm-fg, #333); cursor: pointer; z-index: 25; } /* ── Panel header (logo + title) ────────────────────────────────── */ .tcbmm-mnav-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: max(var(--tcbmm-mobile-header-pt, 16px), env(safe-area-inset-top)) 56px var(--tcbmm-mobile-header-pb, 16px) 22px; background: var(--tcbmm-mobile-header-bg, var(--tcbmm-bg, #fff)); border-bottom: 1px solid var(--tcbmm-border, rgba(0, 0, 0, .08)); } /* Logo/title alignment inside the header. */ .tcbmm-mnav-header.tcbmm-mheader-center { justify-content: center; } .tcbmm-mnav-header.tcbmm-mheader-right { justify-content: flex-end; } .tcbmm-mnav-logo { max-height: var(--tcbmm-mobile-logo-max, 40px); width: auto; height: auto; display: block; } .tcbmm-mnav-title { font-size: 15px; font-weight: 600; color: var(--tcbmm-fg, #333); line-height: 1.3; } /* Style: Drawer (slide-in) */ .tcbmm-mstyle-drawer { top: 0; bottom: 0; width: var(--tcbmm-mobile-width, 300px); max-width: 85vw; box-shadow: 0 0 40px rgba(0, 0, 0, .2); } .tcbmm-mstyle-drawer.tcbmm-mpos-left { left: 0; transform: translateX(-100%); } .tcbmm-mstyle-drawer.tcbmm-mpos-right { right: 0; transform: translateX(100%); } .tcbmm-mstyle-drawer.tcbmm-open { transform: translateX(0); } /* Style: Fullscreen overlay */ .tcbmm-mstyle-fullscreen { inset: 0; width: 100%; opacity: 0; transform: scale(1.03); } .tcbmm-mstyle-fullscreen.tcbmm-open { opacity: 1; transform: none; } .tcbmm-mstyle-fullscreen .tcbmm-mobile-nav-inner { max-width: 640px; margin: 0 auto; } /* Style: Accordion (drops from the top) */ .tcbmm-mstyle-accordion { top: 0; left: 0; right: 0; width: 100%; max-height: 92vh; transform: translateY(-100%); box-shadow: 0 12px 30px rgba(0, 0, 0, .15); } .tcbmm-mstyle-accordion.tcbmm-open { transform: translateY(0); } /* ── Nav list ───────────────────────────────────────────────────── */ .tcbmm-mnav-list, .tcbmm-mnav-sublist { list-style: none; margin: 0; padding: 0; } .tcbmm-mnav-item { position: relative; } .tcbmm-mnav-link { display: block; padding: 15px 56px 15px 22px; color: var(--tcbmm-fg, #333); text-decoration: none; font-size: 16px; line-height: 1.3; } .tcbmm-mnav-link:hover, .tcbmm-mnav-link:focus { color: var(--tcbmm-accent, #e11414); } .tcbmm-mnav-toggle { position: absolute; top: 0; right: 0; width: 54px; height: 52px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: inherit; } .tcbmm-mnav-chevron { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; margin-top: -3px; } .tcbmm-mnav-toggle[aria-expanded="true"] .tcbmm-mnav-chevron { transform: rotate(-135deg); margin-top: 3px; } .tcbmm-mnav-sub { padding: 6px 22px 14px; background: rgba(0, 0, 0, .02); } .tcbmm-mnav-sub[hidden] { display: none; } .tcbmm-mnav-sublist a { display: block; padding: 11px 0; color: var(--tcbmm-fg, #333); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--tcbmm-border, rgba(0, 0, 0, .06)); } .tcbmm-mnav-sublist li:last-child a { border-bottom: none; } .tcbmm-mnav-sublist a:hover, .tcbmm-mnav-sublist a:focus { color: var(--tcbmm-accent, #e11414); } /* Mega content injected into the mobile accordion: force it to fit the narrow panel so a desktop layout never breaks or overflows sideways. */ .tcbmm-mnav-sub-mega { overflow-x: hidden; } .tcbmm-mnav-sub-mega img { max-width: 100%; height: auto; } .tcbmm-mnav-sub-mega .et_pb_section, .tcbmm-mnav-sub-mega .et_pb_row, .tcbmm-mnav-sub-mega .et_pb_row_inner { padding: 0 !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; } /* Neutralise Divi's own positioning/stacking so the injected mega content can never paint over the sticky panel header. */ .tcbmm-mnav-sub-mega .et_pb_section, .tcbmm-mnav-sub-mega .et_pb_row, .tcbmm-mnav-sub-mega .et_pb_row_inner, .tcbmm-mnav-sub-mega [class*="et_pb_column"], .tcbmm-mnav-sub-mega [class*="et_pb_module"] { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: auto !important; transform: none !important; } .tcbmm-mnav-sub-mega [class*="et_pb_column"] { width: 100% !important; max-width: 100% !important; margin: 0 0 14px !important; float: none !important; } .tcbmm-mnav-sub-mega [class*="et_pb_column"]:last-child { margin-bottom: 0 !important; } /* ── Extras: search ─────────────────────────────────────────────── */ .tcbmm-mnav-search { display: flex; align-items: center; margin: 4px 18px 12px; border: 1px solid var(--tcbmm-border, rgba(0, 0, 0, .12)); border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, .02); } .tcbmm-mnav-search-input { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 14px; font-size: 15px; color: var(--tcbmm-fg, #333); } .tcbmm-mnav-search-input:focus { outline: none; } .tcbmm-mnav-search-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; background: transparent; color: var(--tcbmm-fg, #333); cursor: pointer; } /* ── Extras: footer (CTA / contact / social) ────────────────────── */ .tcbmm-mnav-extras { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px calc(24px + env(safe-area-inset-bottom)); margin-top: 8px; border-top: 1px solid var(--tcbmm-border, rgba(0, 0, 0, .08)); } .tcbmm-mnav-cta { display: block; text-align: center; padding: 14px 18px; border-radius: var(--tcbmm-radius, 10px); background: var(--tcbmm-cta-bg, var(--tcbmm-accent, #e11414)); color: var(--tcbmm-cta-color, #fff); font-size: 16px; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; } .tcbmm-mnav-cta:hover, .tcbmm-mnav-cta:focus { opacity: 0.9; color: var(--tcbmm-cta-color, #fff); } .tcbmm-mnav-contact { display: flex; gap: 10px; flex-wrap: wrap; } .tcbmm-mnav-contact-btn { flex: 1 1 0; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--tcbmm-border, rgba(0, 0, 0, .12)); border-radius: var(--tcbmm-radius, 10px); color: var(--tcbmm-fg, #333); text-decoration: none; font-size: 15px; font-weight: 500; } .tcbmm-mnav-contact-btn:hover, .tcbmm-mnav-contact-btn:focus { border-color: var(--tcbmm-accent, #e11414); color: var(--tcbmm-accent, #e11414); } .tcbmm-mnav-wa { border-color: #25d366; color: #128c3e; } .tcbmm-mnav-wa:hover, .tcbmm-mnav-wa:focus { background: #25d366; border-color: #25d366; color: #fff; } .tcbmm-mnav-social { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .tcbmm-mnav-social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, .05); color: var(--tcbmm-fg, #333); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .tcbmm-mnav-social a:hover, .tcbmm-mnav-social a:focus { background: var(--tcbmm-accent, #e11414); color: #fff; transform: translateY(-2px); } .tcbmm-mobile-burger:focus-visible, .tcbmm-mnav-close:focus-visible, .tcbmm-mnav-toggle:focus-visible, .tcbmm-mnav-link:focus-visible, .tcbmm-mnav-sublist a:focus-visible, .tcbmm-mnav-cta:focus-visible, .tcbmm-mnav-contact-btn:focus-visible, .tcbmm-mnav-search-input:focus-visible, .tcbmm-mnav-social a:focus-visible { outline: 2px solid var(--tcbmm-accent, #e11414); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .tcbmm-mobile-nav, .tcbmm-mobile-overlay, .tcbmm-burger-line, .tcbmm-mnav-chevron { transition: none !important; } } @media print { .tcbmm-mobile-burger, .tcbmm-mobile-nav, .tcbmm-mobile-overlay { display: none !important; } } /* ══════════════════════════════════════════════════════════════════ NO-JS FALLBACK If JS never runs, the viewport classes are absent. Provide a sane media-query fallback so small screens still collapse gracefully. ══════════════════════════════════════════════════════════════════ */ @media (max-width: 980px) { html:not(.tcbmm-viewport-desktop):not(.tcbmm-viewport-mobile) .tcbmm-panel { position: static; width: 100%; max-width: 100%; transform: none; box-shadow: none; border-radius: 0; } }