/* ========================================================================== TPG Mobile Account Drawer (tpg-addons-for-elementor 1.3.3) ========================================================================== BREAKPOINT: the drawer is active at <=1023px (Global Grid System B1-B4; Option A, gate record 01b). Desktop hover header owns >=1024px. This value MUST equal the Elementor tablet breakpoint in Site Settings (verify per environment - wiring notes V1). Change it in exactly ONE place: the single @media query below. Conventions: BEM (tpg-mobile-drawer__*), Elementor global variables with documented hex fallbacks, px-only font sizes (OceanWP 62.5% root - see oceanwp-rem-interference-reference.md). Documented literals with no Elementor global (per approved design 2b/v2): #3A3B3C (avatar bg), #9AA1A7 (section labels), #FDF0EB (logout hover), #F88E4E -> #F1612D (DS Button gradient - refreshed from the live site by the design system; intentionally NOT the F99351/F05A28 Elementor pair). 1.3.1 HARDENING: the theme stack (OceanWP + child theme + third-party plugins) styles bare button/a/.button elements globally (brand gradient, uppercase, shadows). The drawer is a self-contained overlay portaled to , so every interactive element inside it is hard-reset and its approved visual identity re-asserted with !important. This is deliberate, scoped, defensive CSS - not a styling shortcut. ========================================================================== */ /* Design tokens (Elementor globals + README-mapped fallbacks). Declared on the component so a kit-ID mismatch degrades to the approved hex values. */ .tpg-mobile-drawer { --tpg-md-white: var(--e-global-color-56cb72e, #FFFFFF); --tpg-md-surface: var(--e-global-color-51a985e, #F0F4F7); --tpg-md-border: var(--e-global-color-571db8e, #D8DDE2); --tpg-md-text: var(--e-global-color-31ea636, #595A5B); --tpg-md-ink: var(--e-global-color-text, #2D2F30); --tpg-md-primary: var(--e-global-color-primary, #294196); --tpg-md-accent: var(--e-global-color-a75a058, var(--e-global-color-accent, #F05A28)); --tpg-md-orange: var(--e-global-color-9534cd2, #F99351); --tpg-md-font: var(--e-global-typography-secondary-font-family, 'Source Sans 3'), 'Source Sans Pro', -apple-system, 'Segoe UI', sans-serif; --tpg-md-z-scrim: 99000; /* Above header dropdowns (9999); below the */ --tpg-md-z-panel: 99001; /* language modal/popup (99998/99999). See F3. */ } /* Desktop and up: the drawer does not exist. */ .tpg-mobile-drawer { display: none; } @media (max-width: 1023px) { /* ── Shell ─────────────────────────────────────────────────────────── */ .tpg-mobile-drawer { display: block; position: fixed; inset: 0; z-index: var(--tpg-md-z-scrim); pointer-events: none; font-family: var(--tpg-md-font); } .tpg-mobile-drawer.is-open { pointer-events: auto; } .tpg-mobile-drawer__scrim { position: absolute; inset: 0; background: rgba(45, 47, 48, 0.5); opacity: 0; pointer-events: none; transition: opacity 250ms ease; } .tpg-mobile-drawer.is-open .tpg-mobile-drawer__scrim { opacity: 1; pointer-events: auto; } .tpg-mobile-drawer__panel { position: absolute; top: 0; left: 0; height: 100%; width: 300px; max-width: 83vw; display: flex; flex-direction: column; background: var(--tpg-md-white); box-shadow: 8px 0 30px rgba(45, 47, 48, 0.3); z-index: var(--tpg-md-z-panel); transform: translateX(-100%); visibility: hidden; transition: transform 250ms ease, visibility 0s linear 250ms; outline: none; } .tpg-mobile-drawer.is-open .tpg-mobile-drawer__panel { transform: none; visibility: visible; transition: transform 250ms ease; } /* Scroll lock: class-based so it can never clobber the language plugin's inline overflow lock, and vice versa (finding F4). */ body.tpg-drawer-open { overflow: hidden; } /* TranslatePress core's floating switcher is fixed bottom-left at z-index 99999 (trp-language-switcher-v2.css) - above the panel. While the drawer is open, drop it beneath the scrim so it cannot overlap the drawer footer. Restored automatically on close. */ body.tpg-drawer-open .trp-floating-switcher { z-index: 98999 !important; } .tpg-mobile-drawer [hidden] { display: none !important; } /* ── 1.3.1 hard reset: neutralise theme/global styling on everything interactive inside the drawer. Specific rules below re-assert the approved 2b identity, also with !important. ───────────────────── */ .tpg-mobile-drawer a, .tpg-mobile-drawer button, .tpg-mobile-drawer [class*="xoo-el-"] { background: none !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; font-family: var(--tpg-md-font) !important; line-height: 1.4 !important; -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: rgba(45, 47, 48, 0.08); } .tpg-mobile-drawer a:focus-visible, .tpg-mobile-drawer button:focus-visible { outline: 2px solid var(--tpg-md-primary) !important; outline-offset: 2px !important; } /* ── Profile header (logged in; li.profile-info relocated by JS) ──────── */ .tpg-mobile-drawer__profile { flex: 0 0 auto; background: var(--tpg-md-surface); } .tpg-mobile-drawer__profile:empty { display: none; /* No-JS fallback: slot collapses; profile shows in list. */ } .tpg-mobile-drawer__profile .profile-info { display: block; list-style: none; margin: 0; padding: 16px 18px; } .tpg-mobile-drawer__profile .profile-info-inner { display: flex; align-items: center; gap: 12px; } .tpg-mobile-drawer__profile .avatar .llms-my-account-navigation__trigger-avatar-name, .tpg-mobile-drawer__account .profile-info .llms-my-account-navigation__trigger-avatar-name { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #3A3B3C !important; /* documented literal */ color: var(--tpg-md-white) !important; font-size: 16px !important; font-weight: 600 !important; display: flex !important; align-items: center; justify-content: center; } .tpg-mobile-drawer__profile .avatar .llms-my-account-navigation__trigger-avatar-image, .tpg-mobile-drawer__account .profile-info .llms-my-account-navigation__trigger-avatar-image { width: 48px !important; height: 48px !important; border-radius: 50% !important; overflow: hidden; } .tpg-mobile-drawer__profile .avatar img, .tpg-mobile-drawer__account .profile-info .avatar img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .tpg-mobile-drawer__profile .user-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tpg-mobile-drawer__profile .user-name, .tpg-mobile-drawer__account .profile-info .user-name { font-size: 15px !important; font-weight: 600 !important; color: var(--tpg-md-ink) !important; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tpg-mobile-drawer__profile .user-profile-link a, .tpg-mobile-drawer__account .profile-info .user-profile-link a { font-size: 13px !important; font-weight: 600 !important; color: var(--tpg-md-accent) !important; display: inline-block; padding: 4px 0; } /* ── Logged-out CTA block ─────────────────────────────────────────────── */ .tpg-mobile-drawer__auth { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; /* v2 spec */ background: var(--tpg-md-surface); } /* Xootix renders its popup triggers as
elements (verified live 2026-07-24), so the button face targets the -tgr class pattern rather than any element type. */ .tpg-mobile-drawer__cta a, .tpg-mobile-drawer__cta button, .tpg-mobile-drawer__cta [class*="-tgr"], .tpg-mobile-drawer__cta .tpg-mobile-drawer__cta-link { display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 38px !important; /* DS Button: 38px at all breakpoints */ min-height: 38px !important; padding: 0 12px !important; margin: 0 !important; border-radius: 0 !important; /* DS Button: square corners */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important; /* DS Button */ font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; cursor: pointer; box-sizing: border-box !important; } .tpg-mobile-drawer__cta .xoo-el-action-sc { display: block !important; padding: 0 !important; margin: 0 !important; } .tpg-mobile-drawer__cta--primary a, .tpg-mobile-drawer__cta--primary button, .tpg-mobile-drawer__cta--primary [class*="-tgr"], .tpg-mobile-drawer__cta--primary .tpg-mobile-drawer__cta-link { background: linear-gradient(180deg, #F88E4E 0%, #F1612D 100%) !important; /* DS literal */ color: var(--tpg-md-white) !important; } /* ── Scroll region ────────────────────────────────────────────────────── */ .tpg-mobile-drawer__scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px 12px; } /* ── Main navigation ──────────────────────────────────────────────────── */ .tpg-mobile-drawer__menu, .tpg-mobile-drawer__submenu { list-style: none; margin: 0; padding: 0; } .tpg-mobile-drawer__menu-link, .tpg-mobile-drawer__submenu-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 11px 12px !important; border-radius: 8px !important; font-size: 15.5px !important; font-weight: 600 !important; text-align: left !important; color: var(--tpg-md-text) !important; cursor: pointer; box-sizing: border-box !important; } .tpg-mobile-drawer__menu-link:hover, .tpg-mobile-drawer__submenu-toggle:hover, .tpg-mobile-drawer__menu-link:focus-visible, .tpg-mobile-drawer__submenu-toggle:focus-visible { background: var(--tpg-md-surface) !important; color: var(--tpg-md-text) !important; } .tpg-mobile-drawer__chevron { flex: 0 0 auto; width: 20px !important; height: 20px !important; transition: transform 200ms ease; } .tpg-mobile-drawer__submenu-toggle[aria-expanded="true"] .tpg-mobile-drawer__chevron { transform: rotate(90deg); } .tpg-mobile-drawer__submenu { padding-left: 16px; } .tpg-mobile-drawer__submenu-link { display: flex !important; align-items: center; width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 10px 12px !important; border-radius: 8px !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--tpg-md-text) !important; box-sizing: border-box !important; } .tpg-mobile-drawer__submenu-link:hover, .tpg-mobile-drawer__submenu-link:focus-visible { background: var(--tpg-md-surface) !important; color: var(--tpg-md-text) !important; } /* ── Account sections (restyled [llms_myaccount_dropdown] output) ─────── */ /* Scoped 3-deep so these always beat the desktop panel styling from core-styles.css / myaccount.css regardless of stylesheet order. */ .tpg-mobile-drawer .tpg-mobile-drawer__account .llms-my-account-navigation { position: static !important; display: block !important; } .tpg-mobile-drawer .tpg-mobile-drawer__account .llms-my-account-navigation__trigger { display: none !important; /* the drawer needs no hover trigger */ } .tpg-mobile-drawer .tpg-mobile-drawer__account .llms-my-account-navigation__items { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .tpg-mobile-drawer .tpg-mobile-drawer__account .llms-my-account-navigation__items-menu { list-style: none; margin: 0 !important; padding: 0 !important; } /* Profile item inside the list: relocated by JS to the header slot; if JS never runs it stays here fully styled (order-only degradation). */ .tpg-mobile-drawer__account .llms-my-account-navigation__item.profile-info { display: block; margin: 0 -12px 6px; padding: 16px 18px; background: var(--tpg-md-surface); } .tpg-mobile-drawer__account .profile-info-inner { display: flex; align-items: center; gap: 12px; } /* Rows */ .tpg-mobile-drawer__account .llms-my-account-navigation__item { margin: 0; } .tpg-mobile-drawer__account .llms-my-account-navigation__item > a { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px !important; margin: 0 !important; padding: 11px 12px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--tpg-md-text) !important; box-sizing: border-box !important; } .tpg-mobile-drawer__account .llms-my-account-navigation__item > a:hover, .tpg-mobile-drawer__account .llms-my-account-navigation__item > a:focus-visible { background: var(--tpg-md-surface) !important; color: var(--tpg-md-text) !important; } /* Section labels (server-rendered, JS-relocated; translatable) */ .tpg-mobile-drawer__account .tpg-mobile-drawer__section-label { display: block; margin: 8px 0 2px; padding: 10px 12px 4px; border-top: 1px solid var(--tpg-md-border); font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #9AA1A7 !important; /* documented literal */ list-style: none; } /* Notification badge (server-rendered, JS-relocated into li.notifications a) */ .tpg-mobile-drawer__badge { flex: 0 0 auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px !important; background: var(--tpg-md-accent) !important; color: var(--tpg-md-white) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 19px !important; text-align: center; box-sizing: border-box; } /* Logout */ .tpg-mobile-drawer__account .llms-my-account-navigation__item.logout { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--tpg-md-border); } .tpg-mobile-drawer__account .llms-my-account-navigation__item.logout > a { justify-content: flex-start; gap: 10px; color: var(--tpg-md-accent) !important; } .tpg-mobile-drawer__account .llms-my-account-navigation__item.logout > a::before { content: ""; width: 20px; height: 20px; flex: 0 0 auto; background-color: var(--tpg-md-accent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .tpg-mobile-drawer__account .llms-my-account-navigation__item.logout > a:hover, .tpg-mobile-drawer__account .llms-my-account-navigation__item.logout > a:focus-visible { background: #FDF0EB !important; /* documented literal */ color: var(--tpg-md-accent) !important; } /* ── Footer (pinned): language switcher ──────────────────────────────── */ .tpg-mobile-drawer__footer { flex: 0 0 auto; margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--tpg-md-border); background: var(--tpg-md-white); } /* Covers the fallback button, the [tpg_language_switcher] trigger, and any button the addon renders in this slot. The addon's own trigger styling (round blue icon button) is fully flattened into the approved 2b row. */ .tpg-mobile-drawer__footer .tpg-mobile-drawer__language-trigger, .tpg-mobile-drawer__footer .tpg-language-switcher, .tpg-mobile-drawer__footer button { display: flex !important; align-items: center; gap: 12px; width: 100% !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; background: none !important; font-size: 14.5px !important; font-weight: 600 !important; text-align: left !important; color: var(--tpg-md-text) !important; cursor: pointer; } .tpg-mobile-drawer__footer button svg, .tpg-mobile-drawer__footer button img, .tpg-mobile-drawer__footer .tpg-language-switcher svg, .tpg-mobile-drawer__footer .tpg-mobile-drawer__language-trigger svg { flex: 0 0 auto; width: 20px !important; height: 20px !important; background: none !important; border-radius: 0 !important; color: var(--tpg-md-text) !important; fill: currentColor; } .tpg-mobile-drawer__footer button span { font-size: 14.5px !important; font-weight: 600 !important; color: var(--tpg-md-text) !important; letter-spacing: normal !important; text-transform: none !important; } /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .tpg-mobile-drawer__panel, .tpg-mobile-drawer__scrim, .tpg-mobile-drawer__chevron { transition-duration: 0s !important; transition-delay: 0s !important; } } }