/** * [rm_menu] frontend styles. Classic and Cards share the same markup * conventions (rm-menu-product, rm-menu-product-name, etc.) - only the * wrapper/layout rules below actually differ between them. * * The --rm-menu-* custom properties are deliberate groundwork for a later * preset/theme system (see docs/MENU.md "Preset-ready architecture"). * --rm-menu-columns and --rm-menu-max-width are always set inline per * render (Frontend -> Menu -> Layout); the design colors * (--rm-menu-category-color, --rm-menu-category-bg, * --rm-menu-category-accent, --rm-menu-title-color, * --rm-menu-description-color, --rm-menu-price-color, * --rm-menu-soldout-color, --rm-menu-soldout-bg - Frontend -> * Menu -> Design) are only set inline when actually configured, so an * unset color falls through to the plain `inherit`/hardcoded default * below rather than an empty/invalid value. There is no Plus icon/ * background color setting yet - Phase 2 does not render a Plus button; * those arrive together with Quick View, not before. * * --rm-menu-title-font-size, --rm-menu-description-font-size, * --rm-menu-price-font-size and --rm-menu-category-font-size (Frontend -> * Menu -> Design, Stage E2.5) follow the exact same "only set inline when * actually configured" rule as the colors above - a 0/unset size falls * through to the plain em-based sizing already below, never an empty/ * invalid font-size. * * --rm-menu-nav-bg, --rm-menu-nav-text, --rm-menu-nav-active-bg, * --rm-menu-nav-active-text and --rm-menu-nav-arrow-color (Frontend -> Menu * -> Navigation, Stage E3) follow the same "only set inline when configured" * rule; --rm-menu-nav-offset is always set inline (0 is itself a meaningful * value - see the Sticky Category Navigation rules near the end of this * file, RM_Menu_Navigation). */ .rm-menu { --rm-menu-primary: #c8912c; /* Text/icon colour on the primary fill (active category, hovered Plus): white on this gold is only 2.8:1, the dark ink is 5.7:1. */ --rm-menu-on-primary: #1d2327; --rm-menu-accent: #2c7a3f; --rm-menu-bg: #ffffff; --rm-menu-text: #1d2327; --rm-menu-radius: 8px; --rm-menu-gap: 20px; color: var(--rm-menu-text); /* * !important: a real WordPress/theme page proved max-width otherwise * loses the cascade to any theme rule with higher selector specificity * than this single class (e.g. a common ".entry-content > div / * .content-area > *" "full-bleed child" reset, specificity 0,1,1 or * higher, beats .rm-menu's bare 0,1,0) - confirmed by reproducing that * exact collision in an isolated harness: max-width silently resolved * to 100% regardless of the configured value, with zero visual effect * at 500/900/1200px, until these three properties were pinned * !important. This is theme-independent hardening of RM's own * properties, not a fix aimed at any specific theme (see docs/MENU.md * "Menu max-width"). */ width: 100% !important; max-width: var(--rm-menu-max-width, none) !important; margin-inline: auto !important; /* * Stage E3 browser fix: .rm-menu-nav (a direct child of this element) * needs position:sticky to actually take effect, which fails silently * if ANY ancestor sets overflow to anything but visible (no error, no * console warning - it just never sticks). RM does not add overflow to * this element itself, but a generic external reset targeting content * wrappers could - pinning the one value sticky requires is the same * kind of theme-independent hardening as max-width above, applied * defensively to the one property that is provably a hard requirement * for position:sticky to work at all, not a fix aimed at any specific * external rule actually observed. */ overflow: visible !important; box-sizing: border-box; } .rm-menu-empty { padding: 16px 0; opacity: .75; } /* * Stronger visual separation between categories (docs/MENU.md "Category * header"): extra spacing before each category, plus the header itself * gets internal padding, a subtle background and a clear accent divider - * a customer scrolling a long menu sees "this is a new category" without * a large/heavy box. The header keeps a plain

and a stable * data-rm-menu-category-id on its
(unchanged), plus a real anchor * id (Stage E3: RM_Menu_Renderer/RM_Menu_Navigation) used as the Sticky * Category Navigation scroll target and IntersectionObserver target. */ .rm-menu-category { margin: 0 0 calc(var(--rm-menu-gap) * 2); } .rm-menu-category:last-child { margin-bottom: 0; } .rm-menu-category-title { margin: 0 0 var(--rm-menu-gap); padding: 10px 14px; border-radius: var(--rm-menu-radius); background: var(--rm-menu-category-bg, rgba(0, 0, 0, .03)); border-bottom: 3px solid var(--rm-menu-category-accent, var(--rm-menu-primary)); font-size: var(--rm-menu-category-font-size, 1.4em); color: var(--rm-menu-category-color, inherit); text-align: center; } /* Category names read in capitals wherever the Menu shows them: the section headings, the * sticky navigation links (bar and dropdown) and the mobile selector's label. Presentation * only - the WooCommerce category name, slug and order are untouched, the DOM text and * therefore screen readers keep the name as written, and product names, descriptions, * buttons and option names are deliberately not transformed. Scoped under .rm-menu so a * theme's plain h2/a rule cannot undo it. */ .rm-menu .rm-menu-category-title, .rm-menu .rm-menu-nav-item, .rm-menu .rm-menu-nav-selector-label { text-transform: uppercase; } .rm-menu-products { list-style: none; margin: 0; padding: 0; } /* A real