/* ============================================================ Advanced WooCommerce Sidebar Menu – Styles advanced-sidebar-menu.css – v1.1.0 EVERY visual token is a CSS custom property. To restyle the menu, override any variable inside :root {} from your theme's stylesheet — no file editing required. RTL / Arabic support is handled via [dir="rtl"] selectors at the bottom of this file. No class toggling is needed — WordPress adds dir="rtl" to when the active language is RTL (e.g. Arabic), and WPML keeps this in sync. ============================================================ */ /* ── Design Tokens ──────────────────────────────────────────── */ :root { /* --- Layout & Sizing --- */ --asm-col-w: clamp(300px, 13vw, 340px); --asm-col-w-mobile: 72vw; --asm-col-w-secondary-mobile: 65vw; --asm-header-h: 58px; --asm-header-h-mobile: 54px; --asm-z-index: 99999; /* --- Animation --- */ --asm-speed: 320ms; --asm-speed-fast: 140ms; --asm-speed-mid: 180ms; --asm-speed-btn: 200ms; --asm-ease: cubic-bezier(0.4, 0, 0.2, 1); /* --- Typography --- */ --asm-font: 'poppins', system-ui, -apple-system, sans-serif; --asm-font-size-trigger: 0.875rem; --asm-font-size-title: 1rem; --asm-font-size-item: 1rem; --asm-font-size-item-mobile: 0.95rem; --asm-font-size-badge: 0.7rem; --asm-font-size-view-all: 1rem; --asm-font-size-loading: 0.8rem; --asm-font-size-empty: 0.85rem; /* --- Core Palette --- */ --asm-bg: #FFF; --asm-bg-secondary: #FFF; --asm-bg-hover: #FFF; --asm-bg-header: #ea0029; --asm-accent: #971b26; --asm-text: #424143; --asm-text-hover: #971b26; --asm-muted: #FFF; /* --- Borders --- */ --asm-border: #EAEAEA; --asm-border-width: 1px; /* --- Backdrop --- */ --asm-backdrop-color: rgba(0,0,0,0.62); --asm-backdrop-color-closed: rgba(0,0,0,0); /* --- Sidebar Shadow --- */ --asm-shadow: 4px 0 32px rgba(0,0,0,0.45); /* --- Trigger Button --- */ --asm-trigger-bg: transparent; --asm-trigger-bg-hover: rgba(255,255,255,0.08); --asm-trigger-border: currentColor; --asm-trigger-border-width: 1.5px; --asm-trigger-border-radius: 4px; --asm-trigger-padding: 8px 16px; /* --- Header --- */ --asm-header-padding: 0 14px; --asm-header-gap: 8px; /* --- Column Title --- */ --asm-title-color: var(--asm-muted); /* --- Back / Close Buttons --- */ --asm-btn-color: var(--asm-muted); --asm-btn-color-hover: #FFF; --asm-btn-bg-hover: rgba(255,255,255,0.07); --asm-btn-padding: 6px; --asm-btn-radius: 4px; /* --- Item Rows --- */ --asm-item-min-height: 48px; --asm-item-padding: 15px; --asm-item-gap: 10px; --asm-item-radius: 0px; /* --- Accent Bar (leading edge on hover) --- */ --asm-accent-bar-width: 3px; --asm-accent-bar-color: var(--asm-accent); --asm-accent-bar-radius: 0 2px 2px 0; /* right side rounded (LTR) */ /* --- Thumbnail --- */ --asm-thumb-size: 40px; --asm-thumb-radius: 5px; --asm-thumb-opacity: 1; --asm-thumb-placeholder-bg: rgba(255,255,255,0.06); --asm-thumb-placeholder-color: var(--asm-muted); /* --- Count Badge --- */ --asm-badge-color: var(--asm-muted); --asm-badge-bg: rgba(255,255,255,0.06); --asm-badge-radius: 10px; --asm-badge-padding: 2px 6px; /* --- Scrollbar --- */ --asm-scrollbar-w: 4px; --asm-scrollbar-thumb: rgba(255,255,255,0.12); --asm-scrollbar-track: transparent; --asm-scrollbar-radius: 2px; /* --- Spinner --- */ --asm-spinner-size: 28px; --asm-spinner-border: 2.5px; --asm-spinner-track: rgba(255,255,255,0.1); --asm-spinner-color: var(--asm-accent); /* --- Focus Ring --- */ --asm-focus-color: var(--asm-accent); --asm-focus-width: 2px; --asm-focus-offset: 2px; } /* ══════════════════════════════════════════════════════════════ BASE STYLES (LTR / direction-neutral) ══════════════════════════════════════════════════════════════ */ .asm-trigger{display:inline-flex;align-items:center;color:#FFF!important;gap:8px;padding:var(--asm-trigger-padding)!important;background:#ea0029!important;border:none!important;border-radius:10px!important;cursor:pointer;font-family:var(--asm-font)!important;font-size:1rem!important;font-weight:500;transition:background var(--asm-speed) var(--asm-ease),color var(--asm-speed) var(--asm-ease)!important;line-height:1;vertical-align:middle} .asm-trigger:hover{background:#424143!important;border-radius:10px!important} .asm-trigger__icon{font-size:1.15em;line-height:1} .asm-overlay{position:fixed;inset:0;z-index:var(--asm-z-index);display:flex;align-items:stretch;pointer-events:none} .asm-overlay[hidden]{display:flex!important;visibility:hidden} .asm-overlay.asm-overlay--open{visibility:visible;pointer-events:auto} .asm-backdrop{flex:1;background:var(--asm-backdrop-color-closed);transition:background var(--asm-speed) var(--asm-ease);cursor:pointer} .asm-overlay--open .asm-backdrop{background:var(--asm-backdrop-color)} /* * LTR: sidebar is on the LEFT → starts off-screen to the left (translateX(-100%)) * and slides in to translateX(0). * RTL overrides are at the bottom of the file. */ .asm-sidebar{display:flex;flex-direction:row;align-items:stretch;height:100%;position:relative;flex-shrink:0;transform:translateX(-100%);transition:transform var(--asm-speed) var(--asm-ease);will-change:transform;box-shadow:var(--asm-shadow)} .asm-overlay--open .asm-sidebar{transform:translateX(0)} .asm-col{display:flex;flex-direction:column;width:var(--asm-col-w);height:100%;background:var(--asm-bg);border-right:var(--asm-border-width) solid var(--asm-border);overflow:hidden;flex-shrink:0;position:relative} .asm-col--secondary{background:var(--asm-bg-secondary);border-right:none;transform:translateX(0);transition:width var(--asm-speed) var(--asm-ease),opacity var(--asm-speed) var(--asm-ease)} .asm-col--secondary[hidden]{display:flex!important;width:0;opacity:0;pointer-events:none;overflow:hidden;border-right:none} .asm-col--secondary.asm-col--visible{width:var(--asm-col-w);opacity:1;pointer-events:auto;border-left:var(--asm-border-width) solid var(--asm-border)} .asm-col__header{display:flex;align-items:center;height:var(--asm-header-h);padding:var(--asm-header-padding);border-bottom:var(--asm-border-width) solid var(--asm-border);gap:var(--asm-header-gap);flex-shrink:0;background:var(--asm-bg-header)} .asm-col__title{flex:1;font-family:var(--asm-font);font-size:var(--asm-font-size-title);font-weight:500;color:var(--asm-title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .asm-btn-back,.asm-btn-close{display:inline-flex;align-items:center;gap:0;background:none!important;border:none!important;cursor:pointer;color:var(--asm-btn-color)!important;padding:var(--asm-btn-padding)!important;border-radius:var(--asm-btn-radius)!important;transition:color var(--asm-speed-mid),background var(--asm-speed-mid)!important;flex-shrink:0;line-height:1} .asm-btn-back:hover,.asm-btn-close:hover{color:var(--asm-btn-color-hover)!important;background:var(--asm-btn-bg-hover)!important} .asm-btn-back[hidden]{display:none!important} #asm-btn-back-secondary{display:none} .asm-btn-back__label{font-size:var(--asm-font-size-title);font-family:var(--asm-font);font-weight:600;letter-spacing:.04em} .asm-col__body{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;position:relative} .asm-col__body::-webkit-scrollbar{width:var(--asm-scrollbar-w)} .asm-col__body::-webkit-scrollbar-track{background:var(--asm-scrollbar-track)} .asm-col__body::-webkit-scrollbar-thumb{background:var(--asm-scrollbar-thumb);border-radius:var(--asm-scrollbar-radius)} .asm-list{list-style:none;margin:0;padding:6px 0} @keyframes asm-slide-in-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}} @keyframes asm-slide-in-left {from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}} .asm-list--enter-right{animation:asm-slide-in-right var(--asm-speed) var(--asm-ease) both} .asm-list--enter-left {animation:asm-slide-in-left var(--asm-speed) var(--asm-ease) both} .asm-item{display:flex!important;align-items:center;width:100%!important;padding:var(--asm-item-padding)!important;min-height:var(--asm-item-min-height)!important;gap:var(--asm-item-gap);cursor:pointer;border:none;border-radius:var(--asm-item-radius);background:none!important;text-align:left!important;color:var(--asm-text)!important;font-family:var(--asm-font)!important;font-size:var(--asm-font-size-item);font-weight:400;line-height:1.3;text-decoration:none;border:none!important;border-bottom:var(--asm-border-width) solid var(--asm-border)!important;transition:background var(--asm-speed-fast),color var(--asm-speed-fast),padding-left var(--asm-speed-fast);box-sizing:border-box;position:relative;-webkit-tap-highlight-color:transparent} .asm-item:last-child{border-bottom:none} .asm-item:hover,.asm-item:focus-visible{background:var(--asm-bg-hover);color:var(--asm-text-hover);outline:none;border-radius:0!important} .asm-item:hover .asm-item__name,.asm-item:focus-visible .asm-item__name{transform:translateX(3px)} /* * Accent bar – anchored to the LEFT edge in LTR. * RTL overrides below anchor it to the RIGHT edge. */ .asm-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--asm-accent-bar-color);transition:width var(--asm-speed-fast) var(--asm-ease);border-radius:var(--asm-accent-bar-radius)} .asm-item:hover::before,.asm-item:focus-visible::before{width:var(--asm-accent-bar-width)} .asm-item__thumb{width:var(--asm-thumb-size);height:var(--asm-thumb-size);border-radius:var(--asm-thumb-radius);object-fit:cover;flex-shrink:0;opacity:var(--asm-thumb-opacity);background-color:#EAEAEA;padding:5px} .asm-item__thumb-placeholder{width:var(--asm-thumb-size);height:var(--asm-thumb-size);border-radius:var(--asm-thumb-radius);background:var(--asm-thumb-placeholder-bg);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--asm-thumb-placeholder-color)} .asm-item__name{flex:1;transition:transform var(--asm-speed-fast) var(--asm-ease)} .asm-item__count{font-size:var(--asm-font-size-badge);color:var(--asm-badge-color);background:var(--asm-badge-bg);padding:var(--asm-badge-padding);border-radius:var(--asm-badge-radius);flex-shrink:0;font-variant-numeric:tabular-nums} /* * Chevron – points RIGHT in LTR (9 18 15 12 9 6). * RTL overrides below flip it with scaleX(-1) so it points LEFT, * matching the direction the secondary panel opens. */ .asm-item__chevron{flex-shrink:0;color:var(--asm-muted);transition:transform var(--asm-speed-btn),color var(--asm-speed-btn)} .asm-item:hover .asm-item__chevron,.asm-item:focus-visible .asm-item__chevron{color:var(--asm-accent);transform:translateX(3px)} .asm-item--view-all{color:var(--asm-accent);font-size:var(--asm-font-size-view-all);font-weight:500;border-top:var(--asm-border-width) solid var(--asm-border);margin-top:4px} .asm-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 20px;color:var(--asm-muted);font-family:var(--asm-font);font-size:var(--asm-font-size-loading)} .asm-spinner{width:var(--asm-spinner-size);height:var(--asm-spinner-size);border:var(--asm-spinner-border) solid var(--asm-spinner-track);border-top-color:var(--asm-spinner-color);border-radius:50%;animation:asm-spin 700ms linear infinite;display:block} @keyframes asm-spin{to{transform:rotate(360deg)}} .asm-empty{padding:32px 16px;text-align:center;color:var(--asm-muted);font-family:var(--asm-font);font-size:var(--asm-font-size-empty)} /* ── Mobile base ────────────────────────────────────────────── */ @media (max-width:768px) { .asm-sidebar{position:relative;overflow:hidden;width:var(--asm-col-w-mobile)} .asm-col{width:var(--asm-col-w-mobile)} .asm-col__header{height:var(--asm-header-h-mobile)} .asm-item{min-height:52px;padding:0 12px;font-size:var(--asm-font-size-item-mobile)} /* * On mobile the secondary column overlays the primary with a slide. * LTR: it slides in from the RIGHT (translateX(100%) → translateX(0)). * RTL: it slides in from the LEFT (translateX(-100%) → translateX(0)). * The RTL override is in the [dir="rtl"] section below. */ .asm-col--secondary{position:absolute;inset:0;width:100%!important;transform:translateX(100%);transition:transform var(--asm-speed) var(--asm-ease)!important;opacity:1!important;border-left:none!important} .asm-col--secondary[hidden]{display:flex!important;width:100%!important;opacity:1!important;pointer-events:none} .asm-col--secondary.asm-col--visible{width:100%!important;transform:translateX(0);pointer-events:auto;border-left:none!important} #asm-btn-back-secondary{display:inline-flex!important} } /* ── Focus rings ────────────────────────────────────────────── */ .asm-item:focus-visible, .asm-btn-back:focus-visible, .asm-btn-close:focus-visible, .asm-trigger:focus-visible{outline:var(--asm-focus-width) solid var(--asm-focus-color);outline-offset:var(--asm-focus-offset)} body.asm-no-scroll{overflow:hidden} @media (max-width:480px) { .asm-trigger{display:inline-flex;align-items:center;color:#FFF!important;background:#424143!important;border-radius:0!important;width:100%;text-align:center;justify-content:center;margin-bottom:15px;padding:10px!important} .asm-trigger:hover{background:#ea0029!important;border-radius:0!important} } /* ══════════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════════ RTL OVERRIDES Two selectors cover both mechanisms: 1. [dir="rtl"] → WordPress sets this on automatically 2. .asm-rtl → JS adds this to #asm-overlay as a guaranteed fallback when is absent (common with some WPML / theme combinations) ══════════════════════════════════════════════════════════════ */ /* ── Sidebar slides in from the RIGHT ───────────────────────── */ /* * LTR: sidebar is LEFT side → hidden at translateX(-100%) → open at 0 * RTL: sidebar is RIGHT side → hidden at translateX(+100%) → open at 0 * The overlay reverses its flex row so the sidebar appears on the right. * The sidebar shadow flips to the left side. */ [dir="rtl"] .asm-overlay, #asm-overlay.asm-rtl { flex-direction: row; } [dir="rtl"] .asm-sidebar, #asm-overlay.asm-rtl .asm-sidebar { transform: translateX(100%); box-shadow: -4px 0 32px rgba(0,0,0,0.45); } [dir="rtl"] .asm-overlay--open .asm-sidebar, #asm-overlay.asm-rtl.asm-overlay--open .asm-sidebar { transform: translateX(0); } /* ── Secondary column border ────────────────────────────────── */ /* LTR: secondary is to the RIGHT of primary → left border. RTL: secondary is to the LEFT of primary → right border. */ [dir="rtl"] .asm-col--secondary.asm-col--visible, #asm-overlay.asm-rtl .asm-col--secondary.asm-col--visible { border-left: none; border-right: var(--asm-border-width) solid var(--asm-border); } /* ── Accent bar anchored to RIGHT edge ──────────────────────── */ [dir="rtl"] .asm-item::before, #asm-overlay.asm-rtl .asm-item::before { left: auto; right: 0; border-radius: 2px 0 0 2px; /* rounded on left side in RTL */ } /* ── Item name nudge on hover ────────────────────────────────── */ [dir="rtl"] .asm-item:hover .asm-item__name, [dir="rtl"] .asm-item:focus-visible .asm-item__name, #asm-overlay.asm-rtl .asm-item:hover .asm-item__name, #asm-overlay.asm-rtl .asm-item:focus-visible .asm-item__name { transform: translateX(-3px); } /* ── Item text alignment ─────────────────────────────────────── */ [dir="rtl"] .asm-item, #asm-overlay.asm-rtl .asm-item { text-align: right !important; } /* ── Back-button arrow flipped to point right (→) ───────────── */ [dir="rtl"] .asm-btn-back svg, #asm-overlay.asm-rtl .asm-btn-back svg { transform: scaleX(-1); } /* ── Category chevron flipped to point left (←) ─────────────── */ [dir="rtl"] .asm-item__chevron, #asm-overlay.asm-rtl .asm-item__chevron { transform: scaleX(-1); } [dir="rtl"] .asm-item:hover .asm-item__chevron, [dir="rtl"] .asm-item:focus-visible .asm-item__chevron, #asm-overlay.asm-rtl .asm-item:hover .asm-item__chevron, #asm-overlay.asm-rtl .asm-item:focus-visible .asm-item__chevron { transform: scaleX(-1) translateX(-3px); } /* ── Mobile: secondary column slides from LEFT (not right) ──── */ @media (max-width: 768px) { [dir="rtl"] .asm-col--secondary, #asm-overlay.asm-rtl .asm-col--secondary { transform: translateX(-100%); border-right: none !important; } [dir="rtl"] .asm-col--secondary.asm-col--visible, #asm-overlay.asm-rtl .asm-col--secondary.asm-col--visible { transform: translateX(0); } }