/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* ========================================================================== MobilityNearMe design system — built from the owner's Claude Design standalone mockups (Mockups/*.html, design system c156143a). Loaded site-wide by the child theme, so every surface (Bricks pages, WooCommerce blocks, plugin shortcodes) can use the same components. RULES - Sizes are px, never rem: Core Framework sets the root font to 10px and a rem would render at 62.5% of intent. - Colours come from the --mnm-* Bricks variables with a literal fallback, so the CSS still renders correctly if a variable is not emitted. - Icons are CSS masks tinted by `currentColor` (.mnm-i + .mnm-i--), so an icon inherits colour and size from its parent and needs no CDN, no icon font and no inline SVG in the Bricks tree. ========================================================================== */ /* The brand tokens live in Bricks > Settings > Variables (category "MobilityNearMe brand"), which emits them into :root itself. They used to be duplicated here, where only a developer could change them. Every rule below still carries a literal fallback, so a missing variable degrades to the right colour rather than to nothing. */ /* -------------------------------------------------------------------------- 1. Icons — Lucide 2px outline paths as CSS masks -------------------------------------------------------------------------- */ .mnm-i { display: inline-block; width: 20px; height: 20px; flex: none; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: var(--mnm-i); mask-image: var(--mnm-i); vertical-align: middle; } .mnm-i--truck { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); } .mnm-i--map-pin { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .mnm-i--map-pin-off { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.75 7.09a3 3 0 0 1 2.16 2.16'/%3E%3Cpath d='M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 15.24 4 10a8 8 0 0 1 1.432-4.568'/%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M8.475 2.818A8 8 0 0 1 20 10a7.2 7.2 0 0 1-.5 2.535'/%3E%3Cpath d='M9.13 9.13a3 3 0 0 0 3.74 3.74'/%3E%3C/svg%3E"); } .mnm-i--phone { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); } .mnm-i--mail { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E"); } .mnm-i--clock { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); } .mnm-i--search { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); } .mnm-i--check-circle { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); } .mnm-i--badge-check { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .mnm-i--refresh { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"); } .mnm-i--headset { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M18 11h3v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1'/%3E%3Cpath d='M3 11a9 9 0 1 1 18 0'/%3E%3Cpath d='M17 18a3 3 0 0 1-3 3h-2'/%3E%3C/svg%3E"); } .mnm-i--calendar { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); } .mnm-i--calendar-check { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E"); } .mnm-i--calendar-plus { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M12 14v4'/%3E%3Cpath d='M10 16h4'/%3E%3C/svg%3E"); } .mnm-i--calendar-x { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m14 14-4 4'/%3E%3Cpath d='m10 14 4 4'/%3E%3C/svg%3E"); } .mnm-i--shield-check { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1 1 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .mnm-i--sparkles { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E"); } .mnm-i--wrench { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); } .mnm-i--home { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .mnm-i--warehouse { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z'/%3E%3Cpath d='M6 18h12'/%3E%3Cpath d='M6 14h12'/%3E%3Crect width='12' height='12' x='6' y='10'/%3E%3C/svg%3E"); } .mnm-i--info { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); } .mnm-i--plus { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); } .mnm-i--minus { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } .mnm-i--chevron-down { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .mnm-i--arrow-right { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); } .mnm-i--user { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20a6 6 0 0 0-12 0'/%3E%3Ccircle cx='12' cy='10' r='4'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); } .mnm-i--sliders { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7'/%3E%3Cpath d='M10 4H3'/%3E%3Cpath d='M21 12h-9'/%3E%3Cpath d='M8 12H3'/%3E%3Cpath d='M21 20h-5'/%3E%3Cpath d='M12 20H3'/%3E%3Cpath d='M12 2v4'/%3E%3Cpath d='M10 10v4'/%3E%3Cpath d='M14 18v4'/%3E%3C/svg%3E"); } .mnm-i--lock { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } .mnm-i--facebook { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); } .mnm-i--instagram { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E"); } .mnm-i--globe { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); } /* Added 2026-10-08 for the icon picker in Website content (Lucide, ISC). */ .mnm-i--message-circle{ --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); } .mnm-i--phone-call { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94'/%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10'/%3E%3C/svg%3E"); } .mnm-i--mail-check { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3Cpath d='m16 19 2 2 4-4'/%3E%3C/svg%3E"); } .mnm-i--megaphone { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); } .mnm-i--users { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } .mnm-i--user-check { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpolyline points='16 11 18 13 22 9'/%3E%3C/svg%3E"); } .mnm-i--handshake { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E"); } .mnm-i--heart-handshake{ --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3Cpath d='M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66'/%3E%3Cpath d='m18 15-2-2'/%3E%3Cpath d='m15 18-2-2'/%3E%3C/svg%3E"); } .mnm-i--hand-heart { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16'/%3E%3Cpath d='m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9'/%3E%3Cpath d='m2 15 6 6'/%3E%3Cpath d='M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z'/%3E%3C/svg%3E"); } .mnm-i--heart { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E"); } .mnm-i--stethoscope { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2v2'/%3E%3Cpath d='M5 2v2'/%3E%3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E"); } .mnm-i--hospital { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v4'/%3E%3Cpath d='M14 14h-4'/%3E%3Cpath d='M14 18h-4'/%3E%3Cpath d='M14 8h-4'/%3E%3Cpath d='M18 12h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M18 22V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v18'/%3E%3C/svg%3E"); } .mnm-i--bandage { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10.01h.01'/%3E%3Cpath d='M10 14.01h.01'/%3E%3Cpath d='M14 10.01h.01'/%3E%3Cpath d='M14 14.01h.01'/%3E%3Cpath d='M18 6v11.5'/%3E%3Cpath d='M6 6v12'/%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3C/svg%3E"); } .mnm-i--activity { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E"); } .mnm-i--accessibility{ --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='4' r='1'/%3E%3Cpath d='m18 19 1-7-6 1'/%3E%3Cpath d='m5 8 3-3 5.5 3-2.36 3.5'/%3E%3Cpath d='M4.24 14.5a5 5 0 0 0 6.88 6'/%3E%3Cpath d='M13.76 17.5a5 5 0 0 0-6.88-6'/%3E%3C/svg%3E"); } .mnm-i--baby { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h.01'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/%3E%3Cpath d='M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1'/%3E%3C/svg%3E"); } .mnm-i--footprints { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z'/%3E%3Cpath d='M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z'/%3E%3Cpath d='M16 17h4'/%3E%3Cpath d='M4 13h4'/%3E%3C/svg%3E"); } .mnm-i--mountain { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 3 4 8 5-5 5 15H2L8 3z'/%3E%3C/svg%3E"); } .mnm-i--bed { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4v16'/%3E%3Cpath d='M2 8h18a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M2 17h20'/%3E%3Cpath d='M6 8v9'/%3E%3C/svg%3E"); } .mnm-i--clipboard-list{ --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"); } .mnm-i--list-checks { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E"); } .mnm-i--file-text { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); } .mnm-i--id-card { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10h2'/%3E%3Cpath d='M16 14h2'/%3E%3Cpath d='M6.17 15a3 3 0 0 1 5.66 0'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3C/svg%3E"); } .mnm-i--qr-code { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1'/%3E%3Crect width='5' height='5' x='16' y='3' rx='1'/%3E%3Crect width='5' height='5' x='3' y='16' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 21v.01'/%3E%3Cpath d='M12 7v3a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M12 3h.01'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M16 12h1'/%3E%3Cpath d='M21 12v.01'/%3E%3Cpath d='M12 21v-1'/%3E%3C/svg%3E"); } .mnm-i--printer { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); } .mnm-i--smartphone { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); } .mnm-i--package { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E"); } .mnm-i--gift { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); } .mnm-i--credit-card { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E"); } .mnm-i--dollar-sign { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); } .mnm-i--map { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z'/%3E%3Cpath d='M15 5.764v15'/%3E%3Cpath d='M9 3.236v15'/%3E%3C/svg%3E"); } .mnm-i--navigation { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 11 22 2 13 21 11 13 3 11'/%3E%3C/svg%3E"); } .mnm-i--route { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); } .mnm-i--rotate-ccw { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); } .mnm-i--timer { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' x2='14' y1='2' y2='2'/%3E%3Cline x1='12' x2='15' y1='14' y2='11'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E"); } .mnm-i--hourglass { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E"); } .mnm-i--bell { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); } .mnm-i--star { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); } .mnm-i--award { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E"); } .mnm-i--thumbs-up { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E"); } .mnm-i--smile { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' x2='9.01' y1='9' y2='9'/%3E%3Cline x1='15' x2='15.01' y1='9' y2='9'/%3E%3C/svg%3E"); } .mnm-i--spray-can { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h.01'/%3E%3Cpath d='M7 5h.01'/%3E%3Cpath d='M11 7h.01'/%3E%3Cpath d='M3 7h.01'/%3E%3Cpath d='M7 9h.01'/%3E%3Cpath d='M3 11h.01'/%3E%3Crect width='4' height='4' x='15' y='5'/%3E%3Cpath d='m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2'/%3E%3Cpath d='m13 14 8-2'/%3E%3Cpath d='m13 19 8-2'/%3E%3C/svg%3E"); } .mnm-i--shield { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); } .mnm-i--life-buoy { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); } .mnm-i--circle-help { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .mnm-i--building-2 { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); } .mnm-i--store { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E"); } .mnm-i--key { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3C/svg%3E"); } .mnm-i--sun { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); } .mnm-i--zap { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E"); } .mnm-i--ruler { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 2. Buttons (design system: components/forms/Button.jsx) -------------------------------------------------------------------------- */ .mnm-btn, .mnm-btn-primary { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; transition: all var(--mnm-dur-fast) var(--mnm-ease); text-decoration: none; white-space: nowrap; /* size md — the component default */ padding: 12px 22px; font-size: 15px; min-height: 44px; background: var(--mnm-btn-bg); color: var(--mnm-white); box-shadow: 0 2px 10px rgb(var(--mnm-btn-glow-rgb) / .30); } .mnm-btn:hover, .mnm-btn-primary:hover { background: var(--mnm-btn-bg-hover); color: var(--mnm-white); transform: translateY(-1px); } .mnm-btn:focus-visible, .mnm-btn-primary:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 2px; } .mnm-btn--sm { padding: 8px 16px; font-size: 14px; min-height: 36px; } .mnm-btn--lg { padding: 15px 30px; font-size: 17px; min-height: 52px; } .mnm-btn--full { width: 100%; } /* 2026-09-20: greens moved to emerald (away from lime), then lightened one step after the first pass read too dark. Accent CTA is green-500 with an ink label, 7.18:1. White on this green would be only 2.4:1, so the label stays ink — 7.66:1, and the button stops reading muddy against the dark band it sits on. */ .mnm-btn--accent { background: var(--mnm-green-500); color: var(--mnm-ink); box-shadow: var(--mnm-btn-shine), 0 2px 14px rgb(var(--mnm-green-500-rgb) / .40); } .mnm-btn--accent:hover { background: var(--mnm-green); color: var(--mnm-ink); } .mnm-btn--accent:focus-visible { outline-color: var(--mnm-white); } .mnm-btn--secondary { background: var(--mnm-surface, #FFFFFF); color: var(--mnm-btn-bg); border: 1.5px solid var(--mnm-blue-200, #AFCEFB); box-shadow: none; } .mnm-btn--secondary:hover { background: var(--mnm-blue-50, #EBF3FE); border-color: var(--mnm-blue-400, #4A8FF0); color: var(--mnm-btn-bg); } .mnm-btn--ghost { background: transparent; color: var(--mnm-btn-bg); box-shadow: none; } .mnm-btn--ghost:hover { background: var(--mnm-blue-50, #EBF3FE); color: var(--mnm-btn-bg); } .mnm-btn--dark { background: var(--mnm-ink, #0A1B33); box-shadow: none; } .mnm-btn--dark:hover { background: var(--mnm-ink-700); } /* Outline variant used on the dark gradient bands. */ .mnm-btn--onDark { background: transparent; border: 1.5px solid rgb(var(--mnm-white-rgb) / .55); color: var(--mnm-white); box-shadow: none; } .mnm-btn--onDark:hover { background: rgb(var(--mnm-white-rgb) / .12); color: var(--mnm-white); } .mnm-btn--onDark:focus-visible { outline-color: var(--mnm-white); } @media (prefers-reduced-motion: reduce) { .mnm-btn, .mnm-btn-primary { transition: none; } .mnm-btn:hover, .mnm-btn-primary:hover { transform: none; } } /* -------------------------------------------------------------------------- 3. Badge / Tag / chips (components/display/Badge.jsx, Tag.jsx) -------------------------------------------------------------------------- */ .mnm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--mnm-blue-50, #EBF3FE); color: var(--mnm-blue-deep, #1153B4); } .mnm-badge--green { background: var(--mnm-green-tint, #EAF8F0); color: var(--mnm-green-text, #10673F); } .mnm-badge--navy { background: var(--mnm-ink, #0A1B33); color: var(--mnm-white); } .mnm-badge--gradient { background: linear-gradient(90deg, var(--mnm-blue-500), var(--mnm-green)); color: var(--mnm-white); } .mnm-badge--warning { background: var(--mnm-warning-tint); color: var(--mnm-warning); } .mnm-badge--danger { background: var(--mnm-danger-tint); color: var(--mnm-danger); } .mnm-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--mnm-bg, #F4F7FB); border: 1px solid var(--mnm-gray-100, #E9EEF5); font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--mnm-muted, #475569); } /* Delivery / meta chip — pill with a hairline, used in heroes and cart rows. */ .mnm-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-border, #D9E1EB); border-radius: 999px; padding: 8px 16px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--mnm-ink, #0A1B33); box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); } /* Filter / category pill row. */ .mnm-pill { display: inline-flex; align-items: center; text-decoration: none; background: var(--mnm-surface, #FFFFFF); color: var(--mnm-gray-700, #334155); border: 1px solid var(--mnm-border, #D9E1EB); border-radius: 999px; padding: 9px 18px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; transition: all var(--mnm-dur-fast) var(--mnm-ease); } .mnm-pill:hover { border-color: var(--mnm-blue, #1667D9); color: var(--mnm-blue-dark, #1667D9); } .mnm-pill--active, .mnm-pill[aria-current="page"] { background: var(--mnm-blue-dark, #1667D9); color: var(--mnm-white); border-color: var(--mnm-blue-dark, #1667D9); font-weight: 800; } .mnm-pill--active:hover { color: var(--mnm-white); } /* ZIP pill used on the service-area cards. */ .mnm-zip { display: inline-flex; background: var(--mnm-bg, #F4F7FB); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 999px; padding: 3px 10px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 700; color: var(--mnm-muted, #475569); } /* -------------------------------------------------------------------------- 4. Cards + icon wells -------------------------------------------------------------------------- */ .mnm-card { background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); } .mnm-card--md { box-shadow: 0 6px 20px rgb(var(--mnm-shadow-rgb) / .09); } .mnm-card--lift { transition: transform var(--mnm-dur-med) var(--mnm-ease), box-shadow var(--mnm-dur-med) var(--mnm-ease); } .mnm-card--lift:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgb(var(--mnm-shadow-rgb) / .09); } @media (prefers-reduced-motion: reduce) { .mnm-card--lift { transition: none; } .mnm-card--lift:hover { transform: none; } } /* Circular tinted icon well. */ .mnm-well { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--mnm-green-50); color: var(--mnm-green-650); } .mnm-well--green { background: var(--mnm-green-tint, #EAF8F0); color: var(--mnm-green-650); } .mnm-well--sm { width: 38px; height: 38px; } .mnm-well--lg { width: 48px; height: 48px; } /* -------------------------------------------------------------------------- 5. Product card (components/display/ProductCard.jsx) -------------------------------------------------------------------------- */ .mnm-pcard { background: var(--mnm-surface, #FFFFFF); border-radius: 16px; border: 1px solid var(--mnm-gray-100, #E9EEF5); box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); transition: all var(--mnm-dur-med) var(--mnm-ease); overflow: hidden; display: flex; flex-direction: column; font-family: 'Nunito Sans', system-ui, sans-serif; position: relative; } .mnm-pcard:hover { box-shadow: 0 6px 20px rgb(var(--mnm-shadow-rgb) / .09); transform: translateY(-3px); } .mnm-pcard:focus-within { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 2px; } .mnm-pcard__media { position: relative; background: var(--mnm-gray-25, #FAFCFE); padding: 18px; display: flex; align-items: center; justify-content: center; min-height: 150px; } .mnm-pcard__media img { max-width: 100%; max-height: 140px; object-fit: contain; mix-blend-mode: multiply; } .mnm-pcard__badge { position: absolute; top: 12px; left: 12px; z-index: 1; } .mnm-pcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .mnm-pcard__name { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--mnm-ink, #0A1B33); margin: 0; } .mnm-pcard__name a { color: inherit; text-decoration: none; } /* One interactive element per card: the title link is stretched over the card. */ .mnm-pcard__name a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; z-index: 2; } .mnm-pcard__name a:focus-visible { outline: none; } .mnm-pcard__desc { font-size: 13.5px; color: var(--mnm-muted, #475569); line-height: 1.5; } .mnm-pcard__tags { display: flex; gap: 6px; flex-wrap: wrap; } .mnm-pcard__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .mnm-pcard__price { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 22px; color: var(--mnm-blue-dark, #1667D9); } .mnm-pcard__unit { font-size: 13.5px; color: var(--mnm-gray-400, #94A3B8); font-weight: 600; } /* The card CTA reads as a button but the title link is the real target. */ .mnm-pcard__cta { position: relative; z-index: 3; } @media (prefers-reduced-motion: reduce) { .mnm-pcard { transition: none; } .mnm-pcard:hover { transform: none; } } /* -------------------------------------------------------------------------- 6. Form fields (components/forms/Input.jsx, Select.jsx, Checkbox.jsx) -------------------------------------------------------------------------- */ .mnm-field { display: flex; flex-direction: column; gap: 6px; font-family: 'Nunito Sans', system-ui, sans-serif; } .mnm-field > label, .mnm-field__label { font-size: 13px; font-weight: 700; color: var(--mnm-gray-700, #334155); } .mnm-field input[type="text"], .mnm-field input[type="search"], .mnm-field input[type="email"], .mnm-field input[type="tel"], .mnm-field input[type="date"], .mnm-field input[type="number"], .mnm-field select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--mnm-border, #D9E1EB); outline: none; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; color: var(--mnm-ink, #0A1B33); background: var(--mnm-surface, #FFFFFF); transition: all var(--mnm-dur-fast) var(--mnm-ease); } .mnm-field input:focus, .mnm-field select:focus { border-color: var(--mnm-blue-400, #4A8FF0); box-shadow: 0 0 0 3px var(--mnm-blue-100, #D7E7FD); } /* -------------------------------------------------------------------------- 7. Page furniture — section rhythm, headings, notices -------------------------------------------------------------------------- */ .mnm-h1 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(32px, 4.4vw, 46px); letter-spacing: -0.02em; line-height: 1.12; color: var(--mnm-ink, #0A1B33); margin: 0; } .mnm-h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1.2; color: var(--mnm-ink, #0A1B33); margin: 0; } .mnm-lead { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.65; color: var(--mnm-muted, #475569); margin: 0; } .mnm-accent { color: var(--mnm-blue-dark, #1667D9); } .mnm-eyebrow { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* Blue information strip. */ .mnm-notice { background: var(--mnm-blue-50, #EBF3FE); border: 1px solid var(--mnm-blue-100, #D7E7FD); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13.5px; line-height: 1.55; color: var(--mnm-blue-800, #0E4390); } .mnm-notice a { color: var(--mnm-blue-dark, #1667D9); font-weight: 800; } .mnm-notice--green { background: var(--mnm-green-tint, #EAF8F0); border-color: var(--mnm-green-100, #CDF0E1); color: var(--mnm-green-800, #0D5234); } /* Dark gradient CTA band. */ .mnm-ctaband { position: relative; overflow: hidden; border-radius: 24px; padding: 56px 60px; color: var(--mnm-white); background-image: var(--mnm-grad-cta, linear-gradient(105deg, #0C316A 0%, #1256BD 40%, #16804C 100%)); box-shadow: 0 14px 40px rgb(var(--mnm-shadow-rgb) / .13); } .mnm-ctaband > * { position: relative; z-index: 1; } .mnm-ctaband .mnm-eyebrow { color: var(--mnm-green-300, #5FD5A2); } .mnm-ctaband h2 { color: var(--mnm-white); font-size: clamp(26px, 3.4vw, 40px); } .mnm-ctaband h2 span { color: var(--mnm-green-300, #5FD5A2); } .mnm-ctaband p { color: var(--mnm-blue-100, #D7E7FD); } /* -------------------------------------------------------------------------- 8. Numbered step timeline (How It Works) -------------------------------------------------------------------------- */ .mnm-steps { display: flex; flex-direction: column; gap: 0; counter-reset: mnmstep; } .mnm-step { display: grid; grid-template-columns: 64px 1fr; gap: 22px; } .mnm-step__rail { display: flex; flex-direction: column; align-items: center; } .mnm-step__num { counter-increment: mnmstep; width: 48px; height: 48px; border-radius: 50%; background: var(--mnm-blue-dark, #1667D9); color: var(--mnm-white); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 2px 10px rgb(var(--mnm-blue-rgb) / .30); } .mnm-step__num::before { content: counter(mnmstep); } .mnm-step__line { width: 2px; flex: 1; background: var(--mnm-blue-100, #D7E7FD); margin: 8px 0; } .mnm-step__body { padding-bottom: 36px; } .mnm-step__title { display: block; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 20px; color: var(--mnm-ink, #0A1B33); margin: 10px 0 8px; } .mnm-step__body p { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: var(--mnm-muted, #475569); } /* Final step: green, no glow, no trailing space. */ .mnm-step--last .mnm-step__num { background: var(--mnm-green, #1B9A5E); box-shadow: none; } .mnm-step--last .mnm-step__body { padding-bottom: 0; } @media (max-width: 560px) { .mnm-step { grid-template-columns: 1fr; gap: 0; } /* One column, so the rail becomes a row - and a row that starts hard left put the number in the corner with a rule trailing off to the screen edge. The numbers are centred, the way the numbered tiles on the home page are, and the connector goes: it only ever joined two things side by side. */ .mnm-step__rail { flex-direction: row; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; } .mnm-step__line { display: none; } .mnm-step__title { margin-top: 0; } /* Owner, 2026-08-29, on this section specifically: "all of this is supposed to be centred on mobile". So the whole step centres under its number - heading, copy, the reassurance pill and the delivery chips - not just the badge. This is the one place body copy is centred on a phone, and it is centred because the step reads as a single centred unit, the way the numbered tiles on the home page do. */ .mnm-step__body { padding-bottom: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; } .mnm-step__body > * { width: 100%; max-width: 100%; } .mnm-step__body .mnm-pill-note { width: auto; } .mnm-step__body .mnm-optgrid { justify-items: center; } .mnm-step__body .mnm-optgrid__c { justify-content: center; text-align: center; } } /* -------------------------------------------------------------------------- 9. FAQ accordion (Help) — native
, so it works without JS -------------------------------------------------------------------------- */ .mnm-faq { display: flex; flex-direction: column; gap: 12px; } .mnm-faq__item { background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); padding: 22px 24px; } .mnm-faq__item[open] { border-color: var(--mnm-blue-200, #AFCEFB); } .mnm-faq__item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; color: var(--mnm-ink, #0A1B33); } .mnm-faq__item > summary::-webkit-details-marker { display: none; } .mnm-faq__item > summary:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 4px; border-radius: 6px; } .mnm-faq__toggle { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--mnm-bg, #F4F7FB); color: var(--mnm-gray-500, #64748B); } .mnm-faq__item[open] .mnm-faq__toggle { background: var(--mnm-green-50); color: var(--mnm-green-650); } .mnm-faq__toggle .mnm-i { width: 16px; height: 16px; --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); } .mnm-faq__item[open] .mnm-faq__toggle .mnm-i { --mnm-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } .mnm-faq__answer { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14.5px; line-height: 1.65; color: var(--mnm-muted, #475569); margin: 12px 0 0; max-width: 700px; } /* -------------------------------------------------------------------------- 10. Responsive — the mockups are desktop-only, so every grid collapses here -------------------------------------------------------------------------- */ @media (max-width: 991px) { .mnm-ctaband { padding: 40px 32px; } } @media (max-width: 700px) { .mnm-ctaband { padding: 32px 22px; border-radius: 20px; } .mnm-pcard__media { min-height: 130px; } } /* Interactive targets never fall under the project's 44px floor. */ .mnm-btn, .mnm-btn-primary, .mnm-pill, .mnm-faq__item > summary { min-height: 44px; } /* -------------------------------------------------------------------------- 11. Service-area index ([mrc_areas_index]) — styled to the mockup's card grid. The markup is the plugin's; only presentation lives here. -------------------------------------------------------------------------- */ .mnm-areas__group + .mnm-areas__group { margin-top: 40px; } .mnm-areas__region { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--mnm-ink, #0A1B33); margin: 0 0 22px; } .mnm-areas__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .mnm-areas__item { position: relative; background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform var(--mnm-dur-med) var(--mnm-ease), box-shadow var(--mnm-dur-med) var(--mnm-ease); } .mnm-areas__item:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgb(var(--mnm-shadow-rgb) / .09); } .mnm-areas__item:focus-within { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 2px; } .mnm-areas__link { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 18px; color: var(--mnm-ink, #0A1B33); text-decoration: none; } /* One interactive element per card. */ .mnm-areas__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } .mnm-areas__link:focus-visible { outline: none; } .mnm-areas__methods { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.55; color: var(--mnm-gray-500, #64748B); } /* The card's read-more cue. Decorative: the city link is the real target. */ .mnm-areas__item::after { content: "Check availability \2192"; margin-top: auto; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 800; color: var(--mnm-blue-dark, #1667D9); } @media (prefers-reduced-motion: reduce) { .mnm-areas__item { transition: none; } .mnm-areas__item:hover { transform: none; } } /* Local-information panel on the service-areas hero. */ .mnm-localinfo { display: flex; flex-direction: column; gap: 14px; } .mnm-localinfo__row { display: flex; gap: 12px; align-items: center; } .mnm-localinfo__row .mnm-well { width: 42px; height: 42px; } .mnm-localinfo__row .mnm-i { width: 19px; height: 19px; } .mnm-localinfo__t { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.4; color: var(--mnm-gray-500, #64748B); } .mnm-localinfo__t b { display: block; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; color: var(--mnm-ink, #0A1B33); } /* -------------------------------------------------------------------------- 12. Help centre ([mrc_help_centre]) — styled to the mockup. The markup, its ARIA and its filtering belong to the plugin; only looks live here. -------------------------------------------------------------------------- */ .mnm-help__search { background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 14px; box-shadow: 0 6px 20px rgb(var(--mnm-shadow-rgb) / .09); padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 12px; max-width: 540px; margin: 0 auto; position: relative; } /* The search glyph sits in the padding, so the input keeps its full width. */ .mnm-help__search::before { content: ""; width: 19px; height: 19px; flex: none; background-color: var(--mnm-gray-400, #94A3B8); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat; } .mnm-help__search-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } /* The label is kept for screen readers - a placeholder is not a label. */ .mnm-help__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mnm-help__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; color: var(--mnm-ink, #0A1B33); min-height: 42px; } .mnm-help__input:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 2px; border-radius: 8px; } .mnm-help__submit { flex: none; border: none; cursor: pointer; background: var(--mnm-btn-bg); color: var(--mnm-white); border-radius: 12px; padding: 0 22px; min-height: 42px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; font-size: 15px; box-shadow: 0 2px 10px rgb(var(--mnm-btn-glow-rgb) / .30); transition: background-color var(--mnm-dur-fast) var(--mnm-ease); } .mnm-help__submit:hover { background: var(--mnm-btn-bg-hover); } .mnm-help__submit:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 2px; } .mnm-help__hint { max-width: 540px; margin: 10px auto 0; text-align: center; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13px; color: var(--mnm-gray-500, #64748B); } .mnm-help__topics { margin: 32px 0 0; } .mnm-help__topic-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .mnm-help__topic-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; background: var(--mnm-surface, #FFFFFF); color: var(--mnm-gray-700, #334155); border: 1px solid var(--mnm-border, #D9E1EB); border-radius: 999px; padding: 8px 17px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13px; font-weight: 700; transition: all var(--mnm-dur-fast) var(--mnm-ease); } .mnm-help__topic-link:hover { border-color: var(--mnm-blue, #1667D9); color: var(--mnm-blue-dark, #1667D9); } .mnm-help__topic-link.is-active { background: var(--mnm-blue-dark, #1667D9); border-color: var(--mnm-blue-dark, #1667D9); color: var(--mnm-white); font-weight: 800; } .mnm-help__topic-link:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 2px; } .mnm-help__count { margin: 26px 0 14px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; color: var(--mnm-gray-500, #64748B); text-align: center; } .mnm-help__list { display: flex; flex-direction: column; gap: 12px; } .mnm-help__item { background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); padding: 22px 24px; } .mnm-help__item:has(.mnm-help__q[aria-expanded="true"]) { border-color: var(--mnm-blue-200, #AFCEFB); } .mnm-help__q-wrap { margin: 0; } .mnm-help__q { width: 100%; background: none; border: none; cursor: pointer; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; color: var(--mnm-ink, #0A1B33); min-height: 44px; } .mnm-help__q:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 4px; border-radius: 6px; } .mnm-help__q-icon { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--mnm-bg, #F4F7FB); color: var(--mnm-gray-500, #64748B); --mi-tog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); } .mnm-help__q-icon::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--mi-tog) center/contain no-repeat; mask: var(--mi-tog) center/contain no-repeat; } .mnm-help__q[aria-expanded="true"] .mnm-help__q-icon { background: var(--mnm-green-50); color: var(--mnm-green-650); --mi-tog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } .mnm-help__a p { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14.5px; line-height: 1.65; color: var(--mnm-muted, #475569); margin: 12px 0 0; max-width: 700px; } .mnm-help__empty { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; color: var(--mnm-muted, #475569); text-align: center; padding: 28px 0; } .mnm-help__cta { margin-top: 48px; background: var(--mnm-bg, #F4F7FB); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 20px; padding: 36px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; } @media (max-width: 700px) { .mnm-help__cta { grid-template-columns: 1fr; padding: 26px; } } .mnm-help__cta-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 22px; color: var(--mnm-ink, #0A1B33); margin: 0 0 8px; } .mnm-help__cta-text { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14.5px; line-height: 1.6; color: var(--mnm-muted, #475569); margin: 0; } .mnm-help__cta-links { display: flex; gap: 12px; flex-wrap: wrap; } .mnm-help__cta-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 12px; background: var(--mnm-blue-dark, #1667D9); color: var(--mnm-white); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: 0 2px 10px rgb(var(--mnm-blue-rgb) / .30); transition: all var(--mnm-dur-fast) var(--mnm-ease); } .mnm-help__cta-link:hover { background: var(--mnm-blue-deep, #1153B4); color: var(--mnm-white); transform: translateY(-1px); } .mnm-help__cta-link:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 3px; } /* A second CTA reads as the secondary action. */ .mnm-help__cta-link + .mnm-help__cta-link { background: var(--mnm-surface, #FFFFFF); color: var(--mnm-blue-dark, #1667D9); border: 1.5px solid var(--mnm-blue-200, #AFCEFB); box-shadow: none; } .mnm-help__cta-link + .mnm-help__cta-link:hover { background: var(--mnm-blue-50, #EBF3FE); color: var(--mnm-blue-dark, #1667D9); } @media (prefers-reduced-motion: reduce) { .mnm-help__cta-link { transition: none; } .mnm-help__cta-link:hover { transform: none; } } /* -------------------------------------------------------------------------- 13. How It Works page pieces -------------------------------------------------------------------------- */ /* Green reassurance pill inside a step. */ .mnm-pill-note { display: inline-flex; gap: 8px; align-items: center; background: var(--mnm-green-tint, #EAF8F0); border: 1px solid var(--mnm-green-100, #CDF0E1); border-radius: 999px; padding: 6px 14px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; color: var(--mnm-green-800, #0D5234); } .mnm-pill-note .mnm-i { width: 14px; height: 14px; } /* Delivery-option chips in step 3. */ .mnm-optgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .mnm-optgrid__c { border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 12px; padding: 14px; display: flex; gap: 10px; align-items: center; background: var(--mnm-surface, #FFFFFF); font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13px; font-weight: 700; color: var(--mnm-ink, #0A1B33); } .mnm-optgrid__c .mnm-i { width: 19px; height: 19px; color: var(--mnm-blue-dark, #1667D9); } /* "During and after your rental" card row. */ .mnm-aftercard { background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); padding: 24px; } /* The well is an inline-flex span in a block card, so it needs to become a block-level box before `margin-inline: auto` can centre it. Sized up to sit in the same family as the trust-row wells, which grow on desktop. */ .mnm-aftercard .mnm-well { display: flex; width: 48px; height: 48px; margin: 0 auto 14px; } .mnm-aftercard .mnm-well .mnm-i { width: 24px; height: 24px; } @media (min-width: 992px) { .mnm-aftercard .mnm-well { width: 56px; height: 56px; } .mnm-aftercard .mnm-well .mnm-i { width: 26px; height: 26px; } } .mnm-aftercard b { display: block; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; color: var(--mnm-ink, #0A1B33); margin-bottom: 6px; } .mnm-aftercard span.t { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--mnm-muted, #475569); } .mnm-aftercard a { color: var(--mnm-blue-dark, #1667D9); font-weight: 700; } /* -------------------------------------------------------------------------- 14. Weekly price ([mrc_week_price]) and the three-model chooser page. This business rents by the week, so a week is the headline unit everywhere a price is shown outside the booking form. -------------------------------------------------------------------------- */ .mnm-weekprice { display: inline-flex; align-items: baseline; gap: 4px; } .mnm-weekprice__n { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--mnm-blue-dark, #1667D9); } .mnm-weekprice__n .woocommerce-Price-currencySymbol { font-size: .7em; vertical-align: super; margin-right: 1px; } .mnm-weekprice__u { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--mnm-gray-500, #64748B); } /* Compact variant for the small product cards. */ .mnm-pcard .mnm-weekprice__n { font-size: 22px; } /* --- the model card ----------------------------------------------------- */ .mnm-model { position: relative; background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--mnm-dur-med) var(--mnm-ease), box-shadow var(--mnm-dur-med) var(--mnm-ease); } .mnm-model:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgb(var(--mnm-shadow-rgb) / .09); } .mnm-model:focus-within { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .mnm-model { transition: none; } .mnm-model:hover { transform: none; } } .mnm-model__media { background: var(--mnm-gray-25, #FAFCFE); padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 190px; } .mnm-model__media img, .mnm-model__media .brxe-image { max-width: 100%; max-height: 170px; object-fit: contain; mix-blend-mode: multiply; display: block; } /* A model with no photograph yet gets the design system's own placeholder rather than a broken frame - the ProductCard component does the same. */ .mnm-model__media:not(:has(img))::before, .mnm-model__media:has(img[src=""])::before { content: ""; width: 130px; height: 130px; border-radius: 12px; background-image: var(--mnm-grad-fresh, linear-gradient(135deg, #EBF3FE 0%, #FFFFFF 55%, #EAF8F0 100%)); border: 1px dashed var(--mnm-border, #D9E1EB); } .mnm-model__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .mnm-model__name { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 21px; line-height: 1.2; color: var(--mnm-ink, #0A1B33); margin: 0; } .mnm-model__name a { color: inherit; text-decoration: none; } .mnm-model__name a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } .mnm-model__name a:focus-visible { outline: none; } /* The benefit list comes from the product short description, so the owner edits it in WooCommerce rather than in the page. */ .mnm-model__benefits ul, .mnm-model__benefits { margin: 0; padding: 0; list-style: none; } .mnm-model__benefits li { position: relative; padding-left: 26px; margin: 0 0 8px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: var(--mnm-muted, #475569); } .mnm-model__benefits li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background-color: var(--mnm-green-650); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center/contain no-repeat; } .mnm-model__benefits li:last-child { margin-bottom: 0; } .mnm-model__benefits:empty { display: none; } .mnm-model__specs { display: flex; gap: 8px; flex-wrap: wrap; } .mnm-model__specs:empty { display: none; } .mnm-model__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .mnm-model__cta { position: relative; z-index: 2; } /* --- "Which one is right for you?" chooser ------------------------------ */ .mnm-chooser { background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); overflow: hidden; } .mnm-chooser__head, .mnm-chooser__row { display: grid; grid-template-columns: 1fr 220px; gap: 20px; align-items: center; padding: 16px 24px; } .mnm-chooser__head { background: var(--mnm-bg, #F4F7FB); border-bottom: 1px solid var(--mnm-gray-100, #E9EEF5); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--mnm-gray-500, #64748B); } .mnm-chooser__row + .mnm-chooser__row { border-top: 1px solid var(--mnm-gray-100, #E9EEF5); } .mnm-chooser__row span:first-child { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; color: var(--mnm-muted, #475569); } .mnm-chooser__pick { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 15px; color: var(--mnm-blue-dark, #1667D9); text-decoration: none; } .mnm-chooser__pick:hover { text-decoration: underline; } .mnm-chooser__pick:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 3px; border-radius: 4px; } @media (max-width: 700px) { .mnm-chooser__head { display: none; } .mnm-chooser__row { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; } } /* --- numbered "in N easy steps" row ------------------------------------- */ .mnm-steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: mnms4; } @media (max-width: 980px) { .mnm-steps4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mnm-steps4 { grid-template-columns: 1fr; } } .mnm-steps4__c { background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .07); padding: 24px 22px; } .mnm-steps4__c::before { counter-increment: mnms4; content: counter(mnms4); width: 40px; height: 40px; border-radius: 999px; background: var(--mnm-blue-dark, #1667D9); color: var(--mnm-white); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 2px 10px rgb(var(--mnm-blue-rgb) / .30); } .mnm-steps4__c b { display: block; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; color: var(--mnm-ink, #0A1B33); margin-bottom: 6px; } .mnm-steps4__c span.t { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--mnm-muted, #475569); } /* --- model grid --------------------------------------------------------- */ .mnm-modelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } @media (max-width: 660px) { .mnm-modelgrid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 15. Home hero — the photograph is a background layer, not a card. The only thing that separates the copy from the photo is a wide feathered mask; there is no frame, no border and no column edge anywhere in here. -------------------------------------------------------------------------- */ .mnm-hero { position: relative; isolation: isolate; /* The photograph is 62% wide on a desktop and a full 100vw on a phone, so the section has to clip sideways or the page scrolls horizontally. It must NOT clip downwards: the hero search card opens a 500-800px date popover that overhangs the bottom of the section by ~240px at 1440px, and `overflow: hidden` cut it off at the section edge at every width. `clip` on one axis is the only value that lets the other axis stay `visible` - with `hidden` the visible axis silently computes to `auto`. */ overflow-x: clip; overflow-y: visible; display: flex; align-items: center; min-height: clamp(720px, 78vh, 800px); background: radial-gradient(circle at 15% 35%, rgb(var(--mnm-blue-glow-rgb) / .65), transparent 45%), linear-gradient(110deg, var(--mnm-blue-05) 0%, var(--mnm-white) 52%, var(--mnm-green-05) 100%); } /* Second, unmasked wash over the left half. It sits above the photograph and below the copy, and is fully transparent by 48% so the subject stays clean. */ .mnm-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(var(--mnm-blue-05-rgb) / .78) 0%, rgb(var(--mnm-blue-05-rgb) / .34) 24%, rgb(var(--mnm-blue-05-rgb) / 0) 52%); } .mnm-hero__inner { width: 100%; max-width: var(--mnm-site-width, 1240px); margin-inline: auto; } .mnm-hero__content { position: relative; z-index: 2; max-width: 620px; } .mnm-hero__title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(38px, 4.1vw, 60px); line-height: 1.06; letter-spacing: -0.02em; color: var(--mnm-ink, #0A1B33); margin: 0; } .mnm-hero__title span { color: var(--mnm-blue-dark, #1667D9); } .mnm-hero__desc { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 18px; line-height: 1.6; color: var(--mnm-muted, #475569); margin: 0; max-width: 460px; } .mnm-hero__search { width: 100%; max-width: 540px; margin-top: 10px; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: var(--mnm-shadow-md, 0 6px 20px rgb(var(--mnm-shadow-rgb) / .09)); } /* The photograph layer. Anchored to .mnm-hero, so it is free of the container. */ .mnm-hero__visual { position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.04) 10%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.52) 32%, rgba(0,0,0,.84) 44%, #000 56%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.04) 10%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.52) 32%, rgba(0,0,0,.84) 44%, #000 56%, #000 100%); } .mnm-hero__visual > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; line-height: 0; } .mnm-hero__visual img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 38%; display: block; } /* Tablet: the photo takes more of the ground, so the wash works harder. */ @media (max-width: 1200px) { .mnm-hero { min-height: clamp(640px, 72vh, 760px); } .mnm-hero__visual { width: 72%; } .mnm-hero::after { background: linear-gradient(90deg, rgb(var(--mnm-blue-05-rgb) / .93) 0%, rgb(var(--mnm-blue-05-rgb) / .58) 30%, rgb(var(--mnm-blue-05-rgb) / 0) 64%); } } /* Mobile: stack, and feather the top edge instead of the left one. */ @media (max-width: 860px) { .mnm-hero { display: block; min-height: 0; } .mnm-hero::after { display: none; } .mnm-hero__content { max-width: 100%; } .mnm-hero__search { max-width: 100%; } .mnm-hero__visual { position: relative; inset: auto; width: 100vw; height: 340px; margin: 30px 0 -40px calc(-1 * max(24px, (100vw - var(--mnm-site-width, 1240px)) / 2)); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.30) 13%, rgba(0,0,0,.80) 30%, #000 44%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.30) 13%, rgba(0,0,0,.80) 30%, #000 44%); } } /* -------------------------------------------------------------------------- 16. Site-wide consistency layer Three rules the owner asked for, applied once here rather than per page: eyebrows are centred, every call-to-action band is centred and built from the same button component, and info-box icons sit above their text and grow on desktop. On phones the content columns centre as well — forms excepted, because centred labels and inputs are measurably harder to scan. -------------------------------------------------------------------------- */ /* --- Eyebrows ----------------------------------------------------------- */ .mnm-eyebrow { display: block; width: 100%; text-align: center; } /* --- Call-to-action bands ----------------------------------------------- */ /* The bands were authored per page — some left-aligned, one centred, one with its copy in a wrapper block. This centres all of them without needing to know which shape each page used. */ .mnm-ctaband { text-align: center; } .mnm-ctaband, .mnm-ctaband .brxe-block { align-items: center; justify-content: center; } .mnm-ctaband h2, .mnm-ctaband p { margin-inline: auto; } .mnm-ctaband p { max-width: 58ch; } /* A button is never a full-width block just because Bricks made its wrapper one. */ .mnm-ctaband .mnm-btn, .mnm-ctaband .mnm-btn-primary, .mnm-ctaband .mnm-phone-btn { width: auto; max-width: none; flex: 0 0 auto; } /* --- Info boxes: icon above the text, centred, larger on desktop --------- */ .mnm-tr, .mnm-reassure__item, .mnm-localinfo__row { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .mnm-tr > *, .mnm-reassure__item > *, .mnm-localinfo__row > * { width: auto; max-width: 100%; align-items: center; text-align: center; } @media (min-width: 992px) { .mnm-tr .mnm-well, .mnm-localinfo__row .mnm-well, .mnm-reassure__mark { width: 54px; height: 54px; } .mnm-tr .mnm-i, .mnm-localinfo__row .mnm-i { width: 26px; height: 26px; } .mnm-reassure__mark::before { width: 25px; height: 25px; } .mnm-how__c .mnm-i { width: 32px; height: 32px; } } /* --- Phones ----------------------------------------------------------- REMOVED 2026-08-29. This block used to be: @media (max-width: 767px) { #brx-content .brxe-section, .brxe-container, .brxe-block, .brxe-text-basic { text-align: center; align-items: center; } ...plus a list of exceptions carved back out } It centred EVERY block on the site below 768px. Body copy, bullet lists (three ticks, three different left edges), FAQ answers and spec rows were all centred on a phone and left on a desktop, and anything carrying its own alignment stayed put - so the page read as if every element had chosen for itself. It also outranked per-element settings: one id (#brxe-x) loses to one id plus one class, so a card the editor had centred in Bricks came out left while the heading inside it stayed centred. Alignment is now inherited, per element and per class, exactly as it is on desktop. The only mobile-specific part left is making wrappers full width, which lives in the Bricks Custom CSS panel under 'MNM mobile alignment'. ------------------------------------------------------------------------ */ /* --- Bricks-default corrections ---------------------------------------- Bricks gives .brxe-block `display: flex; align-items: center`, which shrink-wraps and centres anything we meant to be a plain block. These are the components that were quietly broken by it. */ .mnm-chooser { display: block; } .mnm-model__benefits { display: block; align-items: stretch; } .mnm-model__specs { align-items: center; } /* --- Numbered step cards match the home page: icon/number centred ------- */ .mnm-steps4__c { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; } .mnm-steps4 { align-items: stretch; } .mnm-steps4 > * { height: 100%; } .mnm-steps4__c span.t { display: block; max-width: 30ch; } @media (min-width: 992px) { .mnm-steps4__c::before { width: 48px; height: 48px; font-size: 18px; } } .mnm-pcard__foot { width: 100%; } .mnm-pcard__tags { justify-content: center; } .mnm-pcard__cta { justify-content: center; } .mnm-model__foot { width: 100%; } .mnm-model__benefits { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; } .mnm-model__specs { justify-content: center; } /* .mnm-btn only sets align-items, which is the cross axis; a full-width button needs the main axis too or its label stays hard left. */ .mnm-model__cta { justify-content: center; } /* -------------------------------------------------------------------------- 13. Listing cards - availability status and the minimal spec line These two used to share one row of identical .mnm-tag pills, which read as "three specs" rather than "one live status plus two specs", and left the cards ragged because only one product carries attribute terms. -------------------------------------------------------------------------- */ /* Availability is a live number, so it gets a status dot and its own centred line instead of a bordered box. */ .mnm-avail { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin: 0; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--mnm-green-700); } .mnm-avail::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mnm-green-650); box-shadow: 0 0 0 3px rgb(var(--mnm-green-650-rgb) / .16); } .mnm-avail:empty { display: none; } /* Feature specs are secondary information, so they lose the boxes and become one centred line of micro-labels. flex-direction is set explicitly because Bricks gives every .brxe-block `display: flex; flex-direction: column`. */ .mnm-specline { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 18px; row-gap: 4px; } .mnm-specline > * { position: relative; display: inline-block; padding: 0; border: 0; background: none; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 800; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--mnm-gray-500, #64748B); } /* The separator hangs off each spec that has a non-empty spec before it. The `~` combinator is deliberate: a product missing an attribute still renders an empty span that .mnm-hide-empty removes, and a `+` rule would leave that gap's separator dangling in front of the next visible spec. */ .mnm-specline > *:not(:empty) ~ *:not(:empty)::before { content: ""; position: absolute; left: -10px; top: 50%; margin-top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; } /* A card whose product has no attributes at all should not reserve the row. */ .mnm-specline:not(:has(> *:not(:empty))) { display: none; } /* Three rules in the Bricks custom-CSS panel have to be beaten here, and all three are `#brx-content` + one or two classes, so these carry an id plus two classes to outrank them: 1. `.mnm-model__specs { justify-content: flex-start }` deliberately pulled the old tag row to the card's left edge. The spec line is centred now, alongside the title, price and button. 2. `.mnm-model__body` is `align-items: flex-start`, so a flex child shrink-wraps and `justify-content` has no room to do anything. Both rows need `width: 100%` before centring means anything. 3. The card body is ordered by CSS, not by DOM position: name 1, benefits 2, specs 3, price 4, foot 5. Availability takes order 3 as well rather than a new number, because equal-order flex items fall back to DOM order and availability already sits after the specs in the markup. That puts it between the specs and the price without having to renumber the price and the footer from a second stylesheet. */ #brx-content .mnm-model .mnm-specline { width: 100%; align-items: center; justify-content: center; } #brx-content .mnm-model .mnm-avail { order: 3; width: 100%; justify-content: center; } /* -------------------------------------------------------------------------- 14. FAQ accordion - full-width answers and a clearer open state Everything here has to outrank the Bricks custom-CSS panel, which styles these same classes with plain class selectors but is injected after this file. An id is enough. -------------------------------------------------------------------------- */ /* The answer was capped at 72ch. On the 1240px product and service-area templates that ended the text about two thirds of the way across the card AND took the hairline above it along too, so an opened question looked like a half-drawn box. Padding is deliberately left alone: the panel re-pads the answer at 560px with a plain class, and an id here would beat that rule inside its own media query and undo the phone layout. */ #brx-content .mnm-faq__answer { max-width: none; } /* Lifting the 72ch cap was only half of it. The item is a Bricks block, so it is `display: flex; flex-direction: column; align-items: flex-start`, and a flex child with flex-start shrink-wraps to its own content no matter how much room the card has - the answer was still stopping at ~820px of a 1215px card. Stretch is what actually makes it full width. */ #brx-content .mnm-faq__item { align-items: stretch; } /* With the answer full width the divider should run the full card, so it is pulled out by the padding the answer already carries. */ #brx-content .mnm-faq__answer::before { margin-left: -22px; margin-right: -22px; } @media (max-width: 560px) { #brx-content .mnm-faq__answer::before { margin-left: -16px; margin-right: -16px; } } /* The question row is the card's header, so an open card tints it. Before this the only thing marking the open card was the focus ring, which meant the state vanished as soon as focus moved somewhere else. */ #brx-content .mnm-faq__item > summary { transition: background-color .15s ease; } #brx-content .mnm-faq__item > summary:hover { background: var(--mnm-bg, #F4F7FB); } #brx-content .mnm-faq__item[open] > summary { background: var(--mnm-blue-50, #EBF3FE); } /* The toggle's open state is also blue-50, which would now be invisible against the tinted row. */ #brx-content .mnm-faq__item[open] .mnm-faq__toggle { background: var(--mnm-surface, #FFFFFF); } /* 3px of solid brand blue inset on the summary read as a second box drawn inside the card. Keyboard focus still has to be unmistakable, so the ring stays - at 2px, and sharing the card's own radius so it reads as a state rather than as part of the design. */ #brx-content .mnm-faq__item > summary:focus-visible { outline: 2px solid var(--mnm-blue, #1667D9); outline-offset: -2px; } /* "Common questions" ends both the product and the service-area page and sat the same 18px from the section above it as its own heading sits from its first card, so the page read as one undifferentiated column. */ /* The separation itself now comes from the body container's row gap, which is uniform for every block in the column. This adds only the hairline and the breathing room under it - the old margin + 44px padding stacked ON TOP of that gap and made the FAQ block drift away from the rhythm. */ #brx-content .mnm-faqsec { margin-top: 0; padding-top: var(--space-m); border-top: 1px solid var(--mnm-gray-100, #E9EEF5); } /* -------------------------------------------------------------------------- 15. Delivery-area line -------------------------------------------------------------------------- */ /* The separator is an `::after` on each item and each item is itself a flex container, so the leading space in the old `' \00B7'` was collapsed the way leading whitespace always is inside a flex item: the dot welded itself to the city before it and drifted away from the one after. The dot carries its own margin now and the column gap drops to zero, so the space either side of it is equal. */ #brx-content .mnm-arealist { column-gap: 0; row-gap: 8px; align-items: baseline; line-height: 1.75; } #brx-content .mnm-arealist__i { align-items: baseline; line-height: 1.75; } #brx-content .mnm-arealist__i:not(:last-child)::after { content: "\00B7"; margin: 0 .5em; color: var(--mnm-gray-300, #CBD5E1); font-weight: 700; } /* -------------------------------------------------------------------------- 16. ZIP coverage check ([mnm_zip_check]) The shortcode ships no CSS of its own on purpose - it emits a label, an input, a button and a live region, each with one stable class, and the look is decided here. Same arrangement as the plugin's .mr-search bar. -------------------------------------------------------------------------- */ /* Flex rather than grid, and no viewport media query, because this sits inside .mnm-areas-card__text - a `flex: 1; min-width: 260px` column that collapses to its minimum whenever the card runs short of room. A layout keyed to the viewport got that wrong: at a 1280px window the field was already in a 260px box. Wrapping on available width instead means the button drops under the field exactly when it has to, wherever this is placed. */ .mnm-zipcheck { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; width: 100%; max-width: 420px; margin: 0; } .mnm-zipcheck__label { flex: 1 0 100%; margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; color: var(--mnm-ink, #0A1B33); } .mnm-zipcheck__input { min-height: 44px; /* An input inherits line-height, and the card above it sets 40px in px rather than a ratio, which pushed the field to 62px against a 44px button. Set it here rather than chasing the inherited value. */ line-height: 1.3; padding: 10px 14px; border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 10px; background: var(--mnm-surface, #FFFFFF); font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; color: var(--mnm-ink, #0A1B33); flex: 1 1 160px; min-width: 0; width: auto; } .mnm-zipcheck__input:focus-visible { outline: 2px solid var(--mnm-blue, #1667D9); outline-offset: 1px; border-color: var(--mnm-blue, #1667D9); } .mnm-zipcheck__submit { min-height: 44px; padding: 10px 20px; border: 0; border-radius: 10px; background: var(--mnm-btn-bg); color: var(--mnm-white); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; } .mnm-zipcheck__submit:hover { filter: brightness(1.06); } .mnm-zipcheck__submit:focus-visible { outline: 2px solid var(--mnm-ink, #0A1B33); outline-offset: 2px; } /* The answer is a live region, so it must not collapse to nothing between states - an element that appears and disappears is announced twice by some screen readers. It stays in the layout and only its content changes. */ .mnm-zipcheck__result { flex: 1 0 100%; margin: 0; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: var(--mnm-muted, #475569); } .mnm-zipcheck__result:empty { display: none; } .mnm-zipcheck__result[data-state="yes"] { font-weight: 700; color: var(--mnm-green-700); } .mnm-zipcheck__result[data-state="no"], .mnm-zipcheck__result[data-state="invalid"] { color: var(--mnm-ink, #0A1B33); } .mnm-zipcheck__result[data-state="loading"] { opacity: .6; } /* -------------------------------------------------------------------------- 17. Icon-box rows size themselves to what actually renders `.mnm-trustcard--3` was a hard `repeat(3, 1fr)`, but its third box on the service-area template ("Collection point") only renders when that area has a pickup location - and none of the 19 do since the client asked for Coral Springs' to be removed. So every service-area page drew two boxes into a three-column grid and left a third of the row empty. auto-fit makes the row follow its contents: two boxes take half each, three take a third each, and it collapses to one column on a narrow screen without needing a breakpoint - so the panel's 760px rule is no longer load-bearing. Sized off available width rather than the viewport, which is what lets the same row work inside a wide template and a narrow card. -------------------------------------------------------------------------- */ #brx-content .mnm-trustcard--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* -------------------------------------------------------------------------- 18. Service-areas index - city cards, help cards, strapline The page used to be a plain bulleted list of city links under a heading. This turns each area into a card the whole of which is the link, so the target is the card and not four words of text. -------------------------------------------------------------------------- */ /* auto-fill, not a fixed four, so the row reflows on its own between the 1240px page and a phone without a single breakpoint. */ .mnm-citygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; } .mnm-citycard { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 17px 18px; background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 14px; box-shadow: 0 2px 10px rgb(var(--mnm-shadow-rgb) / .05); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .mnm-citycard:hover { border-color: var(--mnm-blue, #1667D9); box-shadow: 0 8px 20px rgb(var(--mnm-shadow-rgb) / .10); transform: translateY(-2px); } /* The card is the link, so the focus ring belongs on the card. */ .mnm-citycard:focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 3px; border-color: var(--mnm-blue, #1667D9); } @media (prefers-reduced-motion: reduce) { .mnm-citycard { transition: none; } .mnm-citycard:hover { transform: none; } } .mnm-citycard__icon { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--mnm-green-50); color: var(--mnm-green-650); display: flex; align-items: center; justify-content: center; } .mnm-citycard__icon .mnm-i { width: 18px; height: 18px; } /* min-width:0 or a long city name blows the card's width out. */ .mnm-citycard__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .mnm-citycard__name { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 16px; line-height: 1.25; color: var(--mnm-ink, #0A1B33); } .mnm-citycard__cta { display: inline-flex; align-items: center; gap: 5px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--mnm-blue-dark, #1667D9); } .mnm-citycard__cta::after { content: "\2192"; transition: transform .2s ease; } .mnm-citycard:hover .mnm-citycard__cta::after { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .mnm-citycard__cta::after { transition: none; } .mnm-citycard:hover .mnm-citycard__cta::after { transform: none; } } /* There is no chevron-right in the icon set, so the chevron-down mask is turned a quarter turn rather than adding a near-duplicate SVG. */ /* The explicit width matters: a Bricks block is width:100% by default, and `flex: none` then sizes this off that rather than off the 17px icon inside it - the chevron took 260px of a 298px card and squeezed the name and link to zero. The icon circle above never hit this because it was given a width. */ .mnm-citycard__chev { flex: none; width: 17px; color: var(--mnm-gray-300, #CBD5E1); display: flex; align-items: center; justify-content: center; } .mnm-citycard__chev .mnm-i { width: 17px; height: 17px; transform: rotate(-90deg); } .mnm-citycard:hover .mnm-citycard__chev { color: var(--mnm-blue, #1667D9); } /* --- The two help cards under the grid ---------------------------------- */ .mnm-helpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; } .mnm-helpcard { display: flex; flex-direction: row; align-items: flex-start; gap: 18px; padding: 28px 30px; border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 18px; } .mnm-helpcard--blue { background: linear-gradient(135deg, var(--mnm-blue-15) 0%, var(--mnm-blue-75) 100%); } .mnm-helpcard--green { background: linear-gradient(135deg, var(--mnm-green-25) 0%, var(--mnm-green-75) 100%); } .mnm-helpcard__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--mnm-surface, #FFFFFF); color: var(--mnm-blue-dark, #1667D9); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .08); } .mnm-helpcard--green .mnm-helpcard__icon { color: var(--mnm-green-700); } .mnm-helpcard__icon .mnm-i { width: 22px; height: 22px; } .mnm-helpcard__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; } .mnm-helpcard__h { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 21px; line-height: 1.25; color: var(--mnm-ink, #0A1B33); } .mnm-helpcard__p { margin: 0; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: var(--mnm-muted, #475569); max-width: 44ch; } /* The card's own heading already says what the field is for, so the form's label is hidden from sight but kept for a screen reader - an unlabelled input is not an acceptable trade for a tidier card. */ .mnm-helpcard .mnm-zipcheck__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .mnm-helpcard .mnm-zipcheck { max-width: none; margin-top: 4px; } .mnm-helpcard .mnm-zipcheck__input { background: var(--mnm-surface, #FFFFFF); } .mnm-helpcard .mnm-btn { margin-top: 4px; align-self: flex-start; } /* --- Closing strapline --------------------------------------------------- */ .mnm-strapline { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 18px; color: var(--mnm-blue-dark, #1667D9); } .mnm-strapline::before, .mnm-strapline::after { content: ""; flex: 0 1 90px; height: 1px; background: currentColor; opacity: .28; } .mnm-strapline > * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .8; text-align: center; } @media (max-width: 560px) { .mnm-helpcard { padding: 22px; gap: 14px; } .mnm-citycard { padding: 15px 16px; } .mnm-strapline::before, .mnm-strapline::after { flex-basis: 24px; } } /* -------------------------------------------------------------------------- 19. Service-area panel (the "Where we deliver" block on a rental page) Replaces a run-on dot-separated line of city names with a titled panel: a header, a card of city links in columns, and a search bar. Same data, same query loop - the names were never the problem, the lack of structure was. -------------------------------------------------------------------------- */ .mnm-sapanel { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-l); background: linear-gradient(160deg, var(--mnm-blue-05) 0%, var(--mnm-white) 58%); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 22px; box-shadow: 0 4px 26px rgb(var(--mnm-shadow-rgb) / .06); } .mnm-sapanel__head { display: flex; flex-direction: column; gap: 10px; } .mnm-sapanel__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--mnm-blue-dark, #1667D9); } .mnm-sapanel__eyebrow::after { content: ""; width: 34px; height: 2px; background: currentColor; opacity: .55; } .mnm-sapanel__title { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.02em; color: var(--mnm-ink, #0A1B33); } /* The second word is the accent - it is a span inside the heading so the whole line stays one h2 for a screen reader. */ .mnm-sapanel__title span { color: var(--mnm-blue-dark, #1667D9); } .mnm-sapanel__lede { margin: 0; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--mnm-muted, #475569); max-width: 58ch; } /* --- The card of city links --------------------------------------------- */ .mnm-sacities { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-m); background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; } .mnm-sacities__head { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; } .mnm-sacities__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--mnm-green-50); color: var(--mnm-green-650); display: flex; align-items: center; justify-content: center; } .mnm-sacities__icon .mnm-i { width: 20px; height: 20px; } .mnm-sacities__h { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--mnm-ink, #0A1B33); } /* Reads as a caption hung off the heading, so it takes a rule rather than another line of its own. Drops below the heading once the row wraps. */ .mnm-sacities__sub { padding-left: 16px; border-left: 1px solid var(--mnm-gray-100, #E9EEF5); font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--mnm-muted, #475569); } /* `width: auto` is doing real work here: this is a Bricks shortcode wrapper, which is width:100% by default, so `flex: none` sized the pill off the full row and it wrapped to its own line as a full-width bar instead of sitting right-aligned beside the heading. */ .mnm-sacities__count { flex: 0 0 auto; width: auto; margin-left: auto; padding: 6px 14px; border-radius: 999px; background: var(--mnm-green-50); color: var(--mnm-green-650); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 13px; font-weight: 800; line-height: 1.3; } /* Columns come from available width, so the same list works in this panel and anywhere narrower without a breakpoint. */ .mnm-sacitylist { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); column-gap: 28px; row-gap: 0; } .mnm-sacitylist__i { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--mnm-gray-100, #E9EEF5); color: var(--mnm-ink, #0A1B33); text-decoration: none; transition: color .15s ease; } .mnm-sacitylist__n { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: inherit; } /* Explicit width, or a Bricks block's default width:100% makes this arrow eat the row - the same trap as the chevron on the service-areas cards. */ .mnm-sacitylist__a { flex: none; width: 18px; color: var(--mnm-blue-dark, #1667D9); display: flex; align-items: center; justify-content: center; } .mnm-sacitylist__a .mnm-i { width: 18px; height: 18px; transition: transform .2s ease; } .mnm-sacitylist__i:hover { color: var(--mnm-blue-dark, #1667D9); } .mnm-sacitylist__i:hover .mnm-sacitylist__a .mnm-i { transform: translateX(3px); } .mnm-sacitylist__i:focus-visible { outline: 2px solid var(--mnm-blue, #1667D9); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .mnm-sacitylist__i, .mnm-sacitylist__a .mnm-i { transition: none; } .mnm-sacitylist__i:hover .mnm-sacitylist__a .mnm-i { transform: none; } } /* --- The search bar along the bottom ------------------------------------- */ .mnm-sazip { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-s); padding: var(--space-s) var(--space-m); background: linear-gradient(135deg, var(--mnm-blue-10) 0%, var(--mnm-blue-25) 100%); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; } .mnm-sazip__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--mnm-surface, #FFFFFF); color: var(--mnm-blue-dark, #1667D9); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb) / .08); } .mnm-sazip__icon .mnm-i { width: 22px; height: 22px; } .mnm-sazip__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 230px; min-width: 0; } .mnm-sazip__eyebrow { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; color: var(--mnm-muted, #475569); } .mnm-sazip__h { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 20px; line-height: 1.25; color: var(--mnm-ink, #0A1B33); } .mnm-sazip__p { margin: 0; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: var(--mnm-muted, #475569); } /* The shortcode sits inside Bricks' own wrapper div, so the flex sizing goes on the wrapper - the form itself is not the flex item. */ .mnm-sazip__form { flex: 1 1 300px; min-width: 0; } .mnm-sazip__form .mnm-zipcheck { max-width: none; margin: 0; } .mnm-sazip__form .mnm-zipcheck__input { background: var(--mnm-surface, #FFFFFF); } /* The bar's own heading labels this field, so the form's label is hidden from sight but left in place for a screen reader. */ .mnm-sazip__form .mnm-zipcheck__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .mnm-sazip__div { flex: none; width: 1px; align-self: stretch; min-height: 52px; background: var(--mnm-gray-100, #E9EEF5); } .mnm-sazip .mnm-btn { flex: none; } /* The vertical rule only earns its place while the bar is still one row. */ @media (max-width: 1100px) { .mnm-sazip__div { display: none; } } @media (max-width: 700px) { .mnm-sapanel { padding: var(--space-m); } .mnm-sacities { padding: var(--space-s); } .mnm-sazip { padding: var(--space-s); } .mnm-sacities__sub { padding-left: 0; border-left: 0; flex-basis: 100%; } .mnm-sacities__count { margin-left: 0; } } /* ========================================================================== 19. Site-wide elevation pass (2026-09-08) Research basis: Baymard product-page + comparison studies, NN/g older-adult usability, WCAG 2.2 (2.4.7, 2.4.11, 2.5.8, 3.2.6), web.dev LCP/CLS. Nothing here adds copy. Each block names the page it serves. ========================================================================== */ /* --- Global: keyboard, motion, anchors, reading ---------------------------- */ /* A reusable screen-reader-only class (was scoped to one header link). */ .mnm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Zero-specificity fallback focus ring: any interactive element that has no ring of its own gets the brand one. `:where()` keeps specificity at the pseudo-class alone, so every existing, deliberately different ring wins. */ :where(#brx-header, #brx-content, #brx-footer) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--mnm-blue, #1667D9); outline-offset: 3px; } /* Anchor jumps and focus() land below the sticky header, never under it. */ html { scroll-padding-top: calc(var(--mnm-sticky-top, 86px) + 12px); } /* One switch for people who asked their OS for less motion. Individual components already opt out; this catches everything else, including any future Bricks interaction. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Long-form reading surfaces sit at 16px/1.65: the FAQ answers, the How-It-Works step copy and the prose blocks. Card copy and UI stay as is. */ #brx-content .mnm-faq__answer, #brx-content .mnm-step__body > p, #brx-content .mnm-prose p { font-size: 16px; line-height: 1.65; } /* Print: a product page or the FAQ printed for a relative comes out as the content only. */ @media print { #brx-header, #brx-footer, .mnm-stickybar, .mnm-search, .mnm-ctaband, .mr-search, .brxe-toggle, .mnm-hd-callm { display: none !important; } .mnm-pcard, .mnm-faq__item, .mnm-pp-card { break-inside: avoid; box-shadow: none !important; } .mnm-faq__item > .mnm-faq__answer { display: block !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; color: var(--mnm-print-muted); } } /* --- Header: the phone is one tap away on every screen size --------------- */ /* The filled phone button is hidden on small screens by the panel CSS; this icon-only tel: link takes its place next to the cart. 44px target. */ #brx-header .mnm-hd-callm { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mnm-blue-50); color: var(--mnm-blue-dark); text-decoration: none; flex: 0 0 auto; } #brx-header .mnm-hd-callm .mnm-i { width: 22px; height: 22px; } #brx-header .mnm-hd-callm:hover { background: var(--mnm-blue-100, #D7E7FD); } @media (max-width: 767px) { #brx-header .mnm-hd-callm { display: inline-flex; } } /* Inside the open mobile menu the full phone button sits under the links, so the menu ends in an action rather than trailing off. It is a Bricks block, so its li and the block are both hidden until the panel opens. */ #brx-header .mnm-nav-phone, #brx-header .brx-nav-nested-items li:has(> .mnm-nav-phone) { display: none; } #brx-header .mnm-header-nav.brx-open .brx-nav-nested-items li:has(> .mnm-nav-phone) { display: block; width: 100%; } #brx-header .mnm-header-nav.brx-open .mnm-nav-phone { display: flex; width: 100%; padding-top: 22px; } #brx-header .mnm-header-nav.brx-open .mnm-nav-phone .mnm-phone-btn { display: inline-flex; width: 100%; justify-content: center; min-height: 54px; font-size: 17px; border-radius: 14px; } #brx-header .mnm-header-nav.brx-open .mnm-nav-phone .mnm-phone-btn::before { content: ""; width: 20px; height: 20px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat; } /* --- /rentals/ : the delivery-area list reads as city chips --------------- */ /* A run-on line of 19 dot-separated names is hard to scan at any age; pills are the pattern every competitor's "cities we serve" module uses and each one is a 40px target. The separator ::after is dropped in both sheets. */ #brx-content .mnm-arealist { display: flex; flex-wrap: wrap; gap: 10px; column-gap: 10px; row-gap: 10px; align-items: stretch; line-height: 1.2; margin-top: 16px; } #brx-content .mnm-arealist__i { align-items: stretch; line-height: 1.2; } #brx-content .mnm-arealist__i::after { content: none; margin: 0; } #brx-content .mnm-arealist__i > a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--mnm-blue-50, #EBF3FE); border: 1px solid var(--mnm-blue-100, #D7E7FD); color: var(--mnm-blue-deep, #1153B4); font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } #brx-content .mnm-arealist__i > a:hover { background: var(--mnm-blue-100, #D7E7FD); border-color: var(--mnm-blue-200, #AFCEFB); } /* --- /how-it-works/ : the step rail actually connects ---------------------- */ /* `.mnm-step` is a Bricks grid with align-items:flex-start, so the rail shrink-wrapped to its 48px circle and the 2px connector had 0 height. The rail now stretches the row and the line runs from one number to the next. */ @media (min-width: 768px) { #brx-content .mnm-step { align-items: stretch; } #brx-content .mnm-step__rail { align-self: stretch; height: auto; } /* 2px of blue-100 disappeared against white for low-vision readers; 3px of blue-200 is a line you can see. */ #brx-content .mnm-step__line { display: block; flex: 1 1 auto; min-height: 24px; width: 3px; background: var(--mnm-blue-200, #AFCEFB); border-radius: 2px; } #brx-content .mnm-step--last .mnm-step__rail { align-self: start; } } /* --- /shop/ : cards now share .mnm-pcard with the rest of the site --------- */ #brx-content .mnm-pagrid { gap: 18px; } #brx-content .mnm-pagrid .mnm-pcard__name { font-size: 18px; } /* --- Product page ----------------------------------------------------------- */ /* The booking card is sticky but sat at top:24px, i.e. under the sticky header. It now parks just below it. */ @media (min-width: 992px) { #brx-content .mnm-pp-card { top: calc(var(--mnm-sticky-top, 86px) + 16px); } /* Two related cards in a four-column grid left half the row empty. */ #brx-content .mnm-pp-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Sticky "Reserve" bar (markup printed by inc/mnm-site-enhancements.php). Small screens only; hides itself while the booking card is in view. */ .mnm-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--mnm-surface, #FFFFFF); border-top: 1px solid var(--mnm-gray-100, #E9EEF5); box-shadow: 0 -8px 24px rgb(var(--mnm-shadow-rgb) / .10); } .mnm-stickybar[hidden] { display: none; } .mnm-stickybar__price { display: flex; align-items: baseline; gap: 6px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; min-width: 0; } .mnm-stickybar__price b { font-size: 22px; font-weight: 800; color: var(--mnm-blue-dark, #1667D9); white-space: nowrap; } .mnm-stickybar__price span { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; color: var(--mnm-muted, #475569); } .mnm-stickybar__cta { flex: 0 0 auto; min-height: 48px; padding: 0 22px; width: auto; } @media (max-width: 991px) { .mnm-stickybar:not([hidden]) { display: flex; } /* Never over the open mobile menu. */ body:has(#brx-header .mnm-header-nav.brx-open) .mnm-stickybar { display: none; } body.single-product { scroll-padding-bottom: 90px; } /* Room under the footer so the bar never covers the copyright line. */ body.single-product #brx-footer { padding-bottom: 76px; } } /* --- /blog/ : no empty "Latest articles" heading before the first post ---- */ /* With no posts the loop renders nothing, and the heading (and the featured band) were left announcing an empty grid. Both hide until a post exists; the moment one is published they come back on their own. */ #brxe-bllatestctn:not(:has(#brxe-blgrid *)) > #brxe-bllatesth { display: none; } #brxe-blfeatsec:not(:has(#brxe-blfeatctn *)) { display: none; } /* --- 404 -------------------------------------------------------------------- */ /* Centred, and the three ways forward read as buttons rather than an underlined list. */ #brx-content .mnm-e4 > .brxe-container { align-items: center; text-align: center; } #brx-content .mnm-e4 .mnm-search { width: 100%; } #brx-content .mnm-e4-links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; margin-top: 10px; } #brx-content .mnm-e4-links a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--mnm-blue-100, #D7E7FD); background: var(--mnm-blue-50, #EBF3FE); color: var(--mnm-blue-deep, #1153B4); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; } #brx-content .mnm-e4-links a:hover { background: var(--mnm-blue-100, #D7E7FD); } /* --- Cart / account (WooCommerce pages) ------------------------------------ */ /* The empty-cart panel and the account forms are the only pages where the heading and the content disagree on alignment. */ body.woocommerce-cart #brx-content .wc-empty-cart-message, body.woocommerce-cart #brx-content .cart-empty { text-align: center; } /* --- Header at tablet widths (768-991px) ------------------------------------ */ /* Six text links plus phone, account and cart do not fit one row between 768 and ~1000px; they wrapped under the logo and at 768px pushed the cart off screen. The nav element now collapses to the menu button at tablet_portrait (<=991px) instead of mobile_landscape, so tablets get the same menu (with the phone button) as phones and the bar stays one line. */ @media (min-width: 768px) and (max-width: 991px) { #brx-header .mnm-hd-callm { display: none; } } /* ========================================================================== 20. Spacing pass (2026-09-08) - nothing sits flush against its neighbour ========================================================================== */ /* WooCommerce pages (cart, checkout, account) have no Bricks template: Bricks prints
with the h1 and the Woo block and no padding at all, so the title touched the header and the block touched the footer. Same page frame and rhythm as every Bricks page. */ body.woocommerce-cart #brx-content, body.woocommerce-checkout #brx-content, body.woocommerce-account #brx-content { display: flex; flex-direction: column; row-gap: 28px; width: 100%; max-width: calc(var(--mnm-site-width, 1240px) + 48px); margin: 0 auto; padding: var(--space-xl) 24px var(--space-2xl); } body.woocommerce-cart #brx-content > h1, body.woocommerce-checkout #brx-content > h1, body.woocommerce-account #brx-content > h1 { margin: 0; } body.woocommerce-cart #brx-content .alignwide, body.woocommerce-checkout #brx-content .alignwide { max-width: 100%; margin-left: 0; margin-right: 0; } /* Empty cart: heading, lead and button were stacked with zero gap. */ #brx-content .wp-block-woocommerce-empty-cart-block { display: flex; flex-direction: column; align-items: center; row-gap: 12px; padding: var(--space-l) 0; } #brx-content .wp-block-woocommerce-empty-cart-block .wp-block-buttons { margin-top: 10px; } #brx-content .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before { margin-bottom: 8px; } /* Help cards on the Service Areas index: title / text / form were 8px apart. */ #brx-content .mnm-helpcard__body { row-gap: 12px; } #brx-content .mnm-helpcard__body > .mnm-helpcard__p + * { margin-top: 6px; } /* Woo block buttons take the brand button instead of the black WP default. */ body.woocommerce-cart #brx-content .wp-element-button, body.woocommerce-checkout #brx-content .wp-element-button, body.woocommerce-account #brx-content .wp-element-button, body.woocommerce-cart #brx-content .wc-block-components-button:not(.is-link) { background: var(--mnm-btn-bg); color: var(--mnm-white); border: 0; border-radius: 12px; min-height: 48px; padding: 0 24px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; font-size: 16px; box-shadow: var(--mnm-shadow-btn, 0 2px 10px rgb(var(--mnm-btn-glow-rgb) / .30)); } body.woocommerce-cart #brx-content .wp-element-button:hover, body.woocommerce-checkout #brx-content .wp-element-button:hover, body.woocommerce-account #brx-content .wp-element-button:hover, body.woocommerce-cart #brx-content .wc-block-components-button:not(.is-link):hover { background: var(--mnm-btn-bg-hover); color: var(--mnm-white); } /* --- Product gallery (Mobility Rentals element, 2026-09-09) --------------- The plugin's rental.css handles layout and reads these custom properties for the look, so brand values live here and nothing in the plugin is overridden by specificity. Replaces the old .mnm-pp-stage / .mnm-pp-thumbs pair, which are no longer in template 112. */ #brx-content .mnm-pp-gallery .mr-gallery { --mr-gallery-radius: 18px; --mr-gallery-bg: var(--mnm-gray-25, #FAFCFE); --mr-gallery-border: var(--mnm-gray-100, #E9EEF5); --mr-gallery-max-height: min(70vh, 620px); --mr-gallery-gap: 14px; --mr-gallery-arrow-size: 44px; --mr-gallery-arrow-bg: var(--mnm-surface, #fff); --mr-gallery-arrow-color: var(--mnm-blue-dark, #1667D9); --mr-gallery-arrow-border: var(--mnm-gray-100, #E9EEF5); --mr-gallery-thumb-size: 88px; --mr-gallery-thumb-radius: 12px; --mr-gallery-thumb-border: var(--mnm-gray-100, #E9EEF5); --mr-gallery-thumb-active: var(--mnm-blue-dark, #1667D9); --mr-gallery-count-bg: rgb(var(--mnm-shadow-rgb) / .72); } #brx-content .mnm-pp-gallery .mr-gallery__arrow { box-shadow: 0 4px 14px rgb(var(--mnm-shadow-rgb) / .12); } #brx-content .mnm-pp-gallery .mr-gallery__thumb { padding: 6px; background: var(--mnm-gray-25, #FAFCFE); } #brx-content .mnm-pp-gallery .mr-gallery__thumb:hover { border-color: var(--mnm-blue-300, #7FB0F7); } /* -------------------------------------------------------------------------- 21. Home hero - night rebuild (2026-09-20) Replaces the light left-copy / right-photo hero, which was the same shape as the competitor we spent two passes moving the palette away from. Every axis is inverted: dark instead of light, centred instead of left, photo as a full-width atmosphere layer instead of a right-hand panel, and the search as one wide bar instead of a narrow card. Everything here is scoped `#brx-content .mnm-hero--night` (1 id + 2 classes) because section 15 and the Bricks panel both style these same elements at `#brx-content .mnm-hero__thing` (1 id + 1 class). Matching their specificity would lose on source order, so each rule carries the modifier class too. DO NOT add `overflow: hidden` to .mnm-hero here. Section 15 sets `overflow-x: clip; overflow-y: visible` on purpose - the search bar opens a date popover that overhangs the section by ~240px and hidden clips it. The trust strip below keeps icons ABOVE their text, per the standing rule. Only the white card, the blue labels and the light ground are replaced. -------------------------------------------------------------------------- */ #brx-content .mnm-hero--night { min-height: clamp(470px, 56vh, 590px); background: radial-gradient(ellipse 58% 64% at 80% 62%, rgb(var(--mnm-green-500-rgb) / .22), transparent 62%), radial-gradient(ellipse 52% 58% at 8% 14%, rgb(var(--mnm-blue-rgb) / .30), transparent 64%), var(--mnm-ink, #0A1B33); border-bottom: 1px solid rgb(var(--mnm-white-rgb) / .10); } /* Section 15's wash is a pale veil for a light hero. Here it is the navy that sinks the photograph, heaviest on the left where the copy starts. */ #brx-content .mnm-hero--night::after { display: block; background: linear-gradient(90deg, var(--mnm-ink) 0%, rgb(var(--mnm-ink-rgb) / .92) 30%, rgb(var(--mnm-ink-rgb) / .66) 54%, rgb(var(--mnm-ink-rgb) / .36) 100%); } /* The photograph spans the whole section now and reads as texture, not as a subject in its own column. */ /* Anchored to the right ~74% rather than the full width. At full width the box is wider than the photograph's aspect, so cover crops vertically only and the rider lands dead centre - behind the headline and under the heaviest part of the veil. Narrowing the panel restores a horizontal crop, which is what lets object-position put her back in frame on the right. */ #brx-content .mnm-hero--night .mnm-hero__visual { inset: 0 0 0 auto; width: 74%; opacity: .74; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.48) 38%, rgba(0,0,0,.88) 58%, #000 74%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.48) 38%, rgba(0,0,0,.88) 58%, #000 74%); } /* The streetscape, not the rider. The hero is 590px tall against a photo that is much wider than it is deep, so any crop that includes her also slices her face off on the top edge, directly behind the headline. The palms and promenade carry the same South Florida read with nothing half-cut in frame. The people belong on the product cards below. */ #brx-content .mnm-hero--night .mnm-hero__visual img { object-position: 84% 42%; } /* Centred column. The panel forces `margin-inline: 0` on these three at 1 id + 1 class for the old left-aligned hero, hence the modifier here. */ #brx-content .mnm-hero--night .mnm-hero__content { max-width: 900px; margin-inline: auto; align-items: center; text-align: center; row-gap: 20px; } #brx-content .mnm-hero--night .mnm-hero__eyebrow { align-self: center; margin-inline: auto; background: rgb(var(--mnm-green-300-rgb) / .14); color: var(--mnm-green-250); border: 1px solid rgb(var(--mnm-green-300-rgb) / .26); } #brx-content .mnm-hero--night .mnm-hero__title { color: var(--mnm-white); font-size: clamp(40px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -.025em; } /* Emerald rather than the brand blue: #4A8FF0 on this navy is 5.3:1, the green-300 is 9.5:1, and it ties the second line to the new palette. */ #brx-content .mnm-hero--night .mnm-hero__title span { color: var(--mnm-green-300, #5FD5A2); } #brx-content .mnm-hero--night .mnm-hero__desc { color: rgb(var(--mnm-white-rgb) / .80); font-size: 18.5px; max-width: 560px; margin-inline: auto; } /* One wide instrument instead of a narrow card. At 1000px the plugin's own flex bases (dates 330, area 170, submit auto) settle on a single row. */ #brx-content .mnm-hero--night .mnm-hero__search { width: 100%; max-width: 1000px; margin: 6px auto 0; padding: 20px 22px 18px; gap: 12px; border-radius: 20px; border: 1px solid rgb(var(--mnm-white-rgb) / .14); background: rgb(var(--mnm-white-rgb) / .97); box-shadow: 0 24px 60px rgb(var(--mnm-shadow-deep-rgb) / .46); } #brx-content .mnm-hero--night .mnm-hero-cardh { justify-content: center; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mnm-gray-500, #64748B); } #brx-content .mnm-hero--night .mnm-hero-note { align-self: center; width: auto; max-width: 100%; justify-content: center; padding: 7px 14px; border-radius: 999px; background: var(--mnm-green-tint, #EAF8F0); color: var(--mnm-green-text, #10673F); } /* --- Proof strip: the five items, minus the box ------------------------- */ #brx-content .mnm-proofbar { background: transparent; border: 0; box-shadow: none; padding: 6px 0; gap: 18px; } #brx-content .mnm-proofbar .mnm-well { background: rgb(var(--mnm-green-300-rgb) / .13); border: 1px solid rgb(var(--mnm-green-300-rgb) / .22); color: var(--mnm-green-300, #5FD5A2); } #brx-content .mnm-proofbar .mnm-tr__t b { color: var(--mnm-white); } #brx-content .mnm-proofbar .mnm-tr__t { color: rgb(var(--mnm-white-rgb) / .72); } /* --- Narrow screens ----------------------------------------------------- */ @media (max-width: 767px) { #brx-content .mnm-hero--night { min-height: 0; padding-bottom: 10px; } #brx-content .mnm-hero--night .mnm-hero__title { font-size: 36px; } #brx-content .mnm-hero--night .mnm-hero__desc { font-size: 17px; } /* Section 15 drops the photo into the flow as a 340px band below the copy. On navy that reads as a seam, so it stays a background layer and fades downward instead of sideways. */ #brx-content .mnm-hero--night .mnm-hero__visual { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .32; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 58%, transparent 100%); } #brx-content .mnm-hero--night::after { display: block; background: linear-gradient(180deg, rgb(var(--mnm-ink-rgb) / .70) 0%, rgb(var(--mnm-ink-rgb) / .90) 46%, var(--mnm-ink) 100%); } #brx-content .mnm-proofbar { gap: 24px; } } /* -------------------------------------------------------------------------- 22. Glossy gradient buttons (2026-09-20) Every filled button gets two stacked background layers: a white highlight over the top half (--mnm-btn-gloss) and a vertical colour ramp under it. The gloss is a background layer rather than a ::before/::after so it cannot collide with the icon pseudo-elements some buttons already carry (the open nav phone button draws its handset with ::before). SPECIFICITY: the Bricks panel loads AFTER this stylesheet and sets `background:` (the shorthand, which resets background-image to none) at 1 id + 1 class or less. Every selector here therefore outranks that: `#brx-content` + class for content buttons, `#brx-header a.mnm-phone-btn` for the header, and a doubled class for the two plugin buttons that can render outside #brx-content. CONTRAST: a gradient means the label has to pass against the LIGHTEST stop, not the average. Measured white-on-navy 4.80 / 8.53 / 12.63 down the ramp, and ink-on-green 8.35 / 7.42 / 4.79. The green hover brightens upward rather than darkening, because ink on anything past green-650 drops to 2.94 and fails. -------------------------------------------------------------------------- */ #brx-content .mnm-btn:not(.mnm-btn--accent):not(.mnm-btn--secondary):not(.mnm-btn--ghost):not(.mnm-btn--onDark):not(.mnm-btn--dark), #brx-content .mnm-btn-primary, #brx-header a.mnm-phone-btn, #brx-content .mr-search__submit, #brx-content .mnm-help__submit, #brx-content .mnm-zipcheck__submit, .mr-button--book.mr-button--book:not(:disabled), .mr-cal__done.mr-cal__done:not(:disabled), body.woocommerce-cart #brx-content .wp-element-button, body.woocommerce-checkout #brx-content .wp-element-button, body.woocommerce-account #brx-content .wp-element-button, body.woocommerce-account #brx-content .button, #brx-content .woocommerce-message .button, #brx-content .woocommerce-info .button { background-image: var(--mnm-btn-grad); box-shadow: var(--mnm-btn-shine), 0 1px 4px rgb(var(--mnm-btn-glow-rgb) / .22); } #brx-content .mnm-btn:not(.mnm-btn--accent):not(.mnm-btn--secondary):not(.mnm-btn--ghost):not(.mnm-btn--onDark):not(.mnm-btn--dark):hover, #brx-content .mnm-btn-primary:hover, #brx-header a.mnm-phone-btn:hover, #brx-content .mr-search__submit:hover, #brx-content .mnm-help__submit:hover, #brx-content .mnm-zipcheck__submit:hover, .mr-button--book.mr-button--book:not(:disabled):hover, .mr-cal__done.mr-cal__done:not(:disabled):hover, body.woocommerce-cart #brx-content .wp-element-button:hover, body.woocommerce-checkout #brx-content .wp-element-button:hover, body.woocommerce-account #brx-content .wp-element-button:hover, body.woocommerce-account #brx-content .button:hover, #brx-content .woocommerce-message .button:hover, #brx-content .woocommerce-info .button:hover { background-image: var(--mnm-btn-grad-hover); box-shadow: var(--mnm-btn-shine), 0 3px 10px rgb(var(--mnm-btn-glow-rgb) / .30); } /* The accent button keeps its ink label, so its ramp runs light-to-mid rather than mid-to-dark, and hover brightens instead of deepening. */ #brx-content .mnm-btn--accent { background-image: var(--mnm-btn-accent-grad); box-shadow: var(--mnm-btn-shine), 0 1px 5px rgb(var(--mnm-green-500-rgb) / .26); } #brx-content .mnm-btn--accent:hover { background-image: var(--mnm-btn-accent-grad-hover); box-shadow: var(--mnm-btn-shine), 0 3px 11px rgb(var(--mnm-green-500-rgb) / .34); } /* Disabled states must not keep the gloss - a greyed-out control that still looks lit reads as clickable. */ .mr-button--book.mr-button--book:disabled, .mr-cal__done.mr-cal__done:disabled { background-image: none; box-shadow: none; } /* -------------------------------------------------------------------------- 23. Refinement pass (2026-09-20) - "quieter, classier" CSS only. No copy, no markup, no element order changed. Every rule is prefixed `:root` so it outranks both the earlier child-theme sections and the Bricks panel (which loads after this file and mostly writes `#brx-content .mnm-thing`). `:root #brx-content .x` = 1 id + 2 classes, the same trick section 21 uses with its modifier class. What it does, in order: A. base type: real body face, smoothing, balanced headlines B. header: nav set in the display face, hairline instead of a rule C. surfaces: hairline + two-layer soft shadow on every card, calmer hover D. labels: section badges stop being filled pills E. type scale: section headings up, micro-copy up to a readable floor F. prices: ink numerals, not bright blue G. home hero: lighter top gradient, lighter veil H. CTA band + footer polish I. unstyled H1 fallback (the FAQ page title had no class at all) Delete this whole section to roll back. Backup of the file before it: style.bak-20260920h-preclassy.css.txt -------------------------------------------------------------------------- */ :root { --mnm-hairline: rgb(var(--mnm-ink-rgb, 10 27 51) / .09); --mnm-hairline-strong: rgb(var(--mnm-ink-rgb, 10 27 51) / .18); --mnm-lift-1: 0 1px 2px rgb(var(--mnm-shadow-rgb, 12 49 106) / .05), 0 4px 14px -6px rgb(var(--mnm-shadow-rgb, 12 49 106) / .08); --mnm-lift-2: 0 1px 2px rgb(var(--mnm-shadow-rgb, 12 49 106) / .05), 0 14px 32px -12px rgb(var(--mnm-shadow-rgb, 12 49 106) / .18); } /* --- A. Base type ---------------------------------------------------------- */ :root body { font-family: var(--mnm-font-body, 'Nunito Sans', system-ui, sans-serif); color: var(--mnm-ink-700, #0F2A4D); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :root h1, :root h2, :root h3 { text-wrap: balance; } :root #brx-content p { text-wrap: pretty; } :root ::selection { background: var(--mnm-blue-100, #D7E7FD); color: var(--mnm-ink, #0A1B33); } /* --- B. Header ------------------------------------------------------------- */ :root #brx-header .mnm-header { border-bottom-color: var(--mnm-hairline); } :root #brx-header .mnm-header-nav .mnm-nav-link, :root #brx-header .mnm-header-nav .brx-nav-nested-items > li > a { font-family: var(--mnm-font-display, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--mnm-ink-700, #0F2A4D); } :root #brx-header .mnm-header-nav .mnm-nav-link:hover, :root #brx-header .mnm-header-nav .brx-nav-nested-items > li > a:hover { color: var(--mnm-blue-dark, #1667D9); } /* --- C. Surfaces ----------------------------------------------------------- */ :root #brx-content .mnm-card, :root #brx-content .mnm-pcard, :root #brx-content .mnm-model, :root #brx-content .mnm-how__c, :root #brx-content .mnm-citycard, :root #brx-content .mnm-helpcard, :root #brx-content .mnm-faq__item, :root #brx-content .mnm-pp-card, :root #brx-content .mnm-steps4__c, :root #brx-footer .mnm-footer-brand { border-color: var(--mnm-hairline); box-shadow: var(--mnm-lift-1); } :root #brx-content .mnm-pcard, :root #brx-content .mnm-model, :root #brx-content .mnm-citycard, :root #brx-content .mnm-card--lift { transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms cubic-bezier(.16,1,.3,1), border-color 220ms cubic-bezier(.16,1,.3,1); } :root #brx-content .mnm-pcard:hover, :root #brx-content .mnm-model:hover, :root #brx-content .mnm-citycard:hover, :root #brx-content .mnm-card--lift:hover { transform: translateY(-2px); border-color: var(--mnm-hairline-strong); box-shadow: var(--mnm-lift-2); } :root #brx-content .mnm-faq__item { box-shadow: none; } :root #brx-content .mnm-faq__item:hover { border-color: var(--mnm-hairline-strong); } :root #brx-content .mnm-faq__item[open] { border-color: var(--mnm-green-200, #9BE2C1); box-shadow: var(--mnm-lift-1); } :root #brx-content .mnm-pp-card { box-shadow: var(--mnm-lift-2); } /* One photographic ground for every product shot. The three scooter images arrive on white, white and pale grey; multiply over a single tint makes them read as one set. */ :root #brx-content .mnm-pcard__media, :root #brx-content .mnm-model__media { background: linear-gradient(180deg, var(--mnm-gray-25, #FAFCFE) 0%, var(--mnm-bg, #F4F7FB) 100%); border-bottom: 1px solid var(--mnm-hairline); } :root #brx-content .mnm-pcard__media img, :root #brx-content .mnm-model__media img { mix-blend-mode: multiply; } /* Chips lose their drop shadow; the hairline is enough. */ :root #brx-content .mnm-chip { box-shadow: none; border-color: var(--mnm-hairline-strong); background: rgb(var(--mnm-white-rgb, 255 255 255) / .7); font-weight: 600; } /* --- D. Labels ------------------------------------------------------------- */ /* Plain section badges (no colour modifier = no status meaning) become a tracked label with a hairline, not a filled pill. Status badges - green, warning, danger, navy - keep their fill because there the colour is information. The night hero styles its own eyebrow in section 21. */ :root #brx-content .mnm-hero-band .mnm-badge:not([class*="mnm-badge--"]), :root #brx-content .mnm-page-head .mnm-badge:not([class*="mnm-badge--"]) { background: transparent; border: 1px solid var(--mnm-hairline-strong); color: var(--mnm-gray-700, #334155); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; padding: 6px 14px; } :root #brx-content .mnm-eyebrow { letter-spacing: .14em; font-weight: 700; font-size: 12px; } /* --- E. Type scale --------------------------------------------------------- */ :root #brx-content .mnm-h2 { font-size: clamp(28px, 1.6vw + 18px, 40px); line-height: 1.12; letter-spacing: -.028em; } :root #brx-content .mnm-hero-h1, :root #brx-content .mnm-h1 { letter-spacing: -.032em; line-height: 1.04; } @media (min-width: 992px) { :root #brx-content .mnm-hero-h1, :root #brx-content .mnm-h1 { font-size: clamp(44px, 2.6vw + 16px, 54px); max-width: 22em; } } :root #brx-content .mnm-lead { font-size: 18px; line-height: 1.6; } /* A heading inside a narrow panel keeps the old, smaller size. */ :root #brx-content #brxe-revsctn .mnm-h2 { font-size: clamp(24px, 1vw + 16px, 30px); } /* Readable floor: nothing a visitor has to read sits under 14.5px. */ :root #brx-content .mnm-pcard__desc, :root #brx-content .mnm-model__benefits li, :root #brx-content .mnm-howgrid .mnm-how__c span.t, :root #brx-content .mnm-steps4__c p { font-size: 15px; line-height: 1.6; } :root #brx-content .mnm-pcard__name, :root #brx-content .mnm-model__name { letter-spacing: -.015em; } :root #brx-content .mnm-trustcard:not(.mnm-proofbar) .mnm-tr__t { font-size: 14px; } :root #brx-footer .mnm-footer-reassure p { font-size: 13.5px; } :root #brx-footer .mnm-footer-colh h2, :root #brx-footer .mnm-footer-colh { font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--mnm-gray-700, #334155); } /* --- F. Prices ------------------------------------------------------------- */ :root #brx-content .mnm-weekprice__n { color: var(--mnm-ink, #0A1B33); letter-spacing: -.02em; font-feature-settings: "tnum" 1, "lnum" 1; } :root #brx-content .mnm-weekprice__u { color: var(--mnm-gray-500, #64748B); } /* --- G. Home hero: lighter top ------------------------------------------- */ /* Was flat --mnm-ink with two glows. Now a vertical ramp that opens on the button navy at the top and only reaches ink at the bottom, where it meets the proof bar (still --mnm-ink) without a seam. White on the lightest stop (#0E4390) is 9.4:1; the emerald headline line is 5.3:1 there and it is large type. */ :root #brx-content .mnm-hero--night { background: radial-gradient(ellipse 58% 64% at 82% 64%, rgb(var(--mnm-green-500-rgb) / .22), transparent 62%), radial-gradient(ellipse 70% 80% at 12% -6%, rgb(var(--mnm-blue-rgb) / .46), transparent 68%), linear-gradient(180deg, var(--mnm-btn-bg, #0E4390) 0%, var(--mnm-blue-900, #0C316A) 42%, var(--mnm-ink-700, #0F2A4D) 78%, var(--mnm-ink, #0A1B33) 100%); } /* The veil is tinted blue-900 rather than ink: it still sinks the photograph behind the copy, but the colour it adds is a lighter navy. */ :root #brx-content .mnm-hero--night::after { background: linear-gradient(90deg, rgb(var(--mnm-shadow-rgb) / .94) 0%, rgb(var(--mnm-shadow-rgb) / .86) 32%, rgb(var(--mnm-shadow-rgb) / .56) 58%, rgb(var(--mnm-shadow-rgb) / .20) 100%); } :root #brx-content .mnm-hero--night .mnm-hero__title { font-weight: 700; letter-spacing: -.035em; } :root #brx-content .mnm-hero--night .mnm-hero__search { box-shadow: 0 1px 0 rgb(var(--mnm-white-rgb) / .6) inset, 0 30px 70px -20px rgb(var(--mnm-shadow-deep-rgb) / .55); } /* --- H. CTA band + footer -------------------------------------------------- */ :root #brx-content .mnm-ctaband { box-shadow: 0 1px 0 rgb(var(--mnm-white-rgb) / .14) inset, 0 30px 60px -28px rgb(var(--mnm-shadow-rgb) / .45); } :root #brx-content .mnm-ctaband h2 { letter-spacing: -.03em; line-height: 1.1; } :root #brx-footer a { text-underline-offset: 3px; } /* --- I. Unclassed H1 fallback ---------------------------------------------- */ /* Zero specificity on purpose: any Bricks element setting or class wins. It only catches a heading nobody styled - the FAQ page title was rendering in the browser default face at 75px in #363636. */ :where(#brx-content) h1:where(:not([class*="mnm-"])) { font-family: var(--mnm-font-display, 'Plus Jakarta Sans', system-ui, sans-serif); font-weight: 800; color: var(--mnm-ink, #0A1B33); font-size: clamp(34px, 3.2vw + 12px, 60px); line-height: 1.04; letter-spacing: -.032em; } @media (max-width: 767px) { /* At 390px the header row needed 345px and had 342, so the call and cart icons dropped to a second line. */ :root #brx-header #brxe-hdctn { flex-wrap: nowrap; column-gap: 12px; } :root #brx-content .mnm-h2 { font-size: 26px; } :root #brx-content .mnm-lead { font-size: 16.5px; } /* The line under a centred section heading was left-aligned on phones. */ :root #brx-content .mnm-sec-head, :root #brx-content .mnm-sec-head p { text-align: center; } } @media (prefers-reduced-motion: reduce) { :root #brx-content .mnm-pcard:hover, :root #brx-content .mnm-model:hover, :root #brx-content .mnm-citycard:hover, :root #brx-content .mnm-card--lift:hover { transform: none; } } /* --- G2. Home hero: almost white (2026-09-20, later) ------------------------ Jimmy: "lighten this but to almost white". The ground flips from navy to a near-white wash, so every piece of hero text flips from light-on-dark to dark-on-light. The class is still called --night; renaming it would mean a Bricks element edit for no visual gain. Delete this block to get the navy hero from block G back. */ :root #brx-content .mnm-hero--night { background: radial-gradient(ellipse 58% 64% at 84% 66%, rgb(var(--mnm-green-500-rgb) / .10), transparent 62%), radial-gradient(ellipse 70% 80% at 10% -6%, rgb(var(--mnm-blue-rgb) / .09), transparent 68%), linear-gradient(180deg, var(--mnm-white, #fff) 0%, var(--mnm-gray-25, #FAFCFE) 55%, var(--mnm-blue-50, #EBF3FE) 100%); border-bottom: 1px solid var(--mnm-hairline); } /* White veil: the photograph dissolves into the page on the left, where the copy sits, and comes up to strength on the right. */ :root #brx-content .mnm-hero--night::after { background: linear-gradient(90deg, rgb(var(--mnm-white-rgb) / .97) 0%, rgb(var(--mnm-white-rgb) / .95) 40%, rgb(var(--mnm-white-rgb) / .84) 62%, rgb(var(--mnm-white-rgb) / .38) 100%); } :root #brx-content .mnm-hero--night .mnm-hero__visual { opacity: .95; } :root #brx-content .mnm-hero--night .mnm-hero__title { color: var(--mnm-ink, #0A1B33); } :root #brx-content .mnm-hero--night .mnm-hero__title span { color: var(--mnm-green-650, #16804C); } :root #brx-content .mnm-hero--night .mnm-hero__desc { color: var(--mnm-gray-700, #334155); } :root #brx-content .mnm-hero--night .mnm-hero__eyebrow { background: var(--mnm-green-50, #EAF8F0); color: var(--mnm-green-text, #10673F); border-color: var(--mnm-green-200, #9BE2C1); } :root #brx-content .mnm-hero--night .mnm-hero__search { background: var(--mnm-white, #fff); border: 1px solid var(--mnm-hairline); box-shadow: 0 1px 2px rgb(var(--mnm-shadow-rgb) / .05), 0 24px 56px -20px rgb(var(--mnm-shadow-rgb) / .22); } @media (max-width: 767px) { /* On a phone the copy runs the full width, so the veil is even. */ :root #brx-content .mnm-hero--night::after { background: rgb(var(--mnm-white-rgb) / .90); } } /* --- G3. Home hero: photo shows through (2026-09-20, v2) ------------------- Jimmy: "lower the opacity of the hero" then "you should still be able to see the image underneath". Three things were hiding the photo: the left- fade mask on the image, the white veil, and (on phones) a .32 image opacity left over from the navy version. All three are eased here. Legibility now comes from a soft white glow sitting just behind the centred copy instead of a flat wash over everything. Delete this block to get the G2 look back. */ :root #brx-content .mnm-hero--night .mnm-hero__visual { opacity: 1; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.8) 30%, #000 55%); mask-image: linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.8) 30%, #000 55%); } :root #brx-content .mnm-hero--night::after { background: radial-gradient(ellipse 46% 58% at 50% 46%, rgb(var(--mnm-white-rgb) / .78) 0%, rgb(var(--mnm-white-rgb) / .55) 55%, transparent 100%), linear-gradient(90deg, rgb(var(--mnm-white-rgb) / .55) 0%, rgb(var(--mnm-white-rgb) / .40) 40%, rgb(var(--mnm-white-rgb) / .22) 70%, rgb(var(--mnm-white-rgb) / .05) 100%); } /* A faint white halo keeps the letters crisp where the photo is busiest. */ :root #brx-content .mnm-hero--night .mnm-hero__title, :root #brx-content .mnm-hero--night .mnm-hero__desc { text-shadow: 0 0 18px rgb(var(--mnm-white-rgb) / .9), 0 0 2px rgb(var(--mnm-white-rgb) / .8); } @media (max-width: 767px) { :root #brx-content .mnm-hero--night .mnm-hero__visual { opacity: .85; } :root #brx-content .mnm-hero--night::after { background: rgb(var(--mnm-white-rgb) / .68); } } /* --- J. Header: logo centred, links split either side (2026-09-20) ----------- Jimmy: "put the logo in the middle and split the links etc in the header". Desktop reads: 3 links | LOGO | 2 links + phone + account + cart. Stylesheet only. The DOM (logo, nav, actions) is unchanged, so tab and screen-reader order are too. How: at >=992px the nav and its
    become `display: contents`, which makes each
  • a flex item of the header row itself, so they can sit on either side of the logo. The logo is absolutely centred on the row, which puts it on the true centre line no matter how wide each side is. All five links on one side was tried first and overflowed into the logo by 36px. Link positions come from classes the menu editor writes on each
  • (store console, Menus.php): mnm-nav-item--left and --right sit either side of the logo; everything else in the list (phone-only links, the in-menu logo, the phone button, the close button) is hidden on desktop. Delete this block to put the logo back on the left. */ @media (min-width: 992px) { :root #brx-header #brxe-hdctn { position: relative; display: flex; flex-wrap: nowrap; align-items: center; column-gap: 22px; min-height: 80px; /* logo is out of flow, so the row holds its height itself */ } :root #brx-header #brxe-hdnav, :root #brx-header #brxe-hdnav > .brx-nav-nested-items { display: contents; } :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li { order: 1; flex: 0 0 auto; } :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li > a { white-space: nowrap; } :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li.mnm-nav-item--right { order: 3; } :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li.mnm-nav-item--rfirst { margin-left: auto; } :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li:not(.mnm-nav-item--left):not(.mnm-nav-item--right) { display: none; } :root #brx-header #brxe-hdctn:not(:has(.mnm-nav-item--right)) > #brxe-hdright { margin-left: auto; } :root #brx-header #brxe-hdctn > #brxe-hdbrand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; } :root #brx-header #brxe-hdctn > #brxe-hdright { order: 4; flex: 0 0 auto; margin-left: 0; } } /* Narrow desktop: three links plus half a logo have to fit in ~470px. */ @media (min-width: 992px) and (max-width: 1199px) { :root #brx-header #brxe-hdctn { column-gap: 12px; } :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li > a { font-size: 14px; } :root #brx-header .mnm-header-brand img { height: 50px; } :root #brx-header #brxe-hdctn { min-height: 70px; } } /* Tablet and phone: menu button left, logo centre, call + cart right. The two sides share one flex basis so the logo lands on the centre line. */ @media (max-width: 991px) { :root #brx-header #brxe-hdctn { flex-wrap: nowrap; align-items: center; } :root #brx-header #brxe-hdctn > #brxe-hdnav { order: 1; flex: 1 1 0; min-width: 0; justify-content: flex-start; } :root #brx-header #brxe-hdctn > #brxe-hdbrand { order: 2; flex: 0 0 auto; } :root #brx-header #brxe-hdnav > .brxe-toggle { margin-left: 0; margin-right: auto; } :root #brx-header #brxe-hdctn > #brxe-hdright { order: 3; flex: 1 1 0; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; } } @media (max-width: 767px) { :root #brx-header #brxe-hdctn { column-gap: 6px; } :root #brx-header #brxe-hdright { gap: 2px; } :root #brx-header .mnm-header-brand img { height: 38px; } } /* --- K. Home hero: split layout with the knee scooter photo (2026-09-20) --- Jimmy: make the hero like the VOCIC "Dealer Special" banner - headline on the left, product photo on a pale panel with a slanted edge on the right, and the search card sitting underneath, overlapping into the next section. The hero's class changed from --night to --split, so blocks 21, G, G2 and G3 no longer apply to it. Delete this block AND put the class back to `mnm-hero mnm-hero--night` on page 104 to undo. The photo's white background fades into the panel colour through feathered edges, so it has no visible box edge. */ :root #brx-content .mnm-hero--split { z-index: 3; /* the search card hangs over the next section */ min-height: 0; background: var(--mnm-white, #fff); border-bottom: 0; } :root #brx-content .mnm-hero--split::after { display: none; } :root #brx-content .mnm-hero--split .mnm-hero__eyebrow { background: var(--mnm-green-50, #EAF8F0); color: var(--mnm-green-text, #10673F); border: 1px solid var(--mnm-green-200, #9BE2C1); } :root #brx-content .mnm-hero--split .mnm-hero__title { color: var(--mnm-ink, #0A1B33); } :root #brx-content .mnm-hero--split .mnm-hero__title span { color: var(--mnm-green-650, #16804C); } :root #brx-content .mnm-hero--split .mnm-hero__desc { color: var(--mnm-gray-700, #334155); } :root #brx-content .mnm-hero--split .mnm-hero__search { background: var(--mnm-white, #fff); border: 1px solid var(--mnm-hairline, #E9EEF5); box-shadow: 0 1px 2px rgb(var(--mnm-shadow-rgb) / .06), 0 28px 60px -22px rgb(var(--mnm-shadow-rgb) / .32); } /* The photo panel. */ :root #brx-content .mnm-hero--split .mnm-hero__visual { background: linear-gradient(160deg, #F4F6F9 0%, #E8ECF1 100%); -webkit-mask-image: none; mask-image: none; opacity: 1; } :root #brx-content .mnm-hero--split .mnm-hero__visual img { object-fit: contain; object-position: 50% 50%; /* The photo's own background is near-white (#FAFBFB). Its edges are feathered so it melts into the grey panel as a soft spotlight instead of showing a box. (multiply was tried first and darkened the photo's grey vignette into a visible rectangle.) */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%); mask-composite: intersect; } /* Desktop: side by side, card overlapping the section below. */ @media (min-width: 992px) { :root #brx-content .mnm-hero--split { display: block; } :root #brx-content .mnm-hero--split .mnm-hero__inner { min-height: 560px; padding-top: var(--space-xl, 64px); padding-bottom: calc(var(--space-xl, 64px) + 90px); /* room for the top half of the card */ align-content: center; } /* Static so the card positions against the whole hero, not this column. */ :root #brx-content .mnm-hero--split .mnm-hero__content { position: static; width: 44%; /* % of the inner container: the site is boxed, so vw is wrong here */ max-width: none; } :root #brx-content .mnm-hero--split .mnm-hero__content > :not(.mnm-hero__search) { position: relative; z-index: 2; } :root #brx-content .mnm-hero--split .mnm-hero__title { font-size: clamp(36px, 2.9vw, 50px); } :root #brx-content .mnm-hero--split .mnm-hero__visual { position: absolute; inset: 0 0 0 auto; width: 56%; height: 100%; z-index: 1; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); } :root #brx-content .mnm-hero--split .mnm-hero__visual > * { inset: 28px 3% 110px 9%; /* keeps the scooters clear of the card */ width: auto; height: auto; } :root #brx-content .mnm-hero--split .mnm-hero__search { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 5; width: min(1040px, calc(100% - 48px)); max-width: none; margin: 0; } /* The section under the hero makes room for the bottom half of the card. */ :root #brx-content .mnm-hero--split + .brxe-section { padding-top: calc(var(--space-m, 32px) + 110px); } } /* Tablet and phone: text, then photo, then search, all stacked. */ @media (max-width: 991px) { :root #brx-content .mnm-hero--split { display: block; min-height: 0; } :root #brx-content .mnm-hero--split .mnm-hero__inner { display: flex; flex-direction: column; row-gap: 18px; padding-top: var(--space-l, 48px); padding-bottom: var(--space-l, 48px); } :root #brx-content .mnm-hero--split .mnm-hero__content { display: contents; } :root #brx-content .mnm-hero--split .mnm-hero__eyebrow { order: 1; align-self: flex-start; } :root #brx-content .mnm-hero--split .mnm-hero__title { order: 2; } :root #brx-content .mnm-hero--split .mnm-hero__desc { order: 3; } :root #brx-content .mnm-hero--split .mnm-hero__visual { order: 4; } :root #brx-content .mnm-hero--split .mnm-hero__search { order: 5; max-width: 100%; margin: 0; } :root #brx-content .mnm-hero--split .mnm-hero__visual { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1672 / 941; margin: 4px 0 0; border-radius: 16px; clip-path: none; } :root #brx-content .mnm-hero--split .mnm-hero__visual > * { inset: 4%; width: auto; height: auto; } } /* --- K2. Split hero fixes (2026-09-20, later) ------------------------------- Jimmy: the photo's edge fade was eating the floor reflections under the scooters, "Right Where You Are." must stay on one line, and the sub-copy should read as one paragraph (its
    was removed on page 104). 1. No mask on the photo. The panel is the photo's own background colour (#F9FAFA), so the full image shows with no box edge. 2. Each headline line is nowrap, and the size is set in container units of the hero's inner box so the longest line always fits its column. */ :root #brx-content .mnm-hero--split .mnm-hero__visual { background: #F9FAFA; } :root #brx-content .mnm-hero--split .mnm-hero__visual img { -webkit-mask-image: none; mask-image: none; } :root #brx-content .mnm-hero--split .mnm-hero__inner { container-type: inline-size; } :root #brx-content .mnm-hero--split .mnm-hero__title { white-space: nowrap; } :root #brx-content .mnm-hero--split .mnm-hero__desc { max-width: 100%; } @media (min-width: 992px) { /* column is 44% of the inner box; the longest line is ~11.3em wide */ :root #brx-content .mnm-hero--split .mnm-hero__title { font-size: clamp(28px, 3.7cqi, 52px); } :root #brx-content .mnm-hero--split .mnm-hero__desc { max-width: 34em; } } @media (max-width: 991px) { :root #brx-content .mnm-hero--split .mnm-hero__title { font-size: clamp(22px, 9.6cqi, 46px); } } /* ========================================================================== L. Accessibility pass + blue footer (2026-09-20) Jimmy: "full on accessibility audit", footer "gradient blue just a little shiny", logo text white, add an accessibility policy. axe-core 4.10 was run on 13 pages (WCAG 2.2 A/AA + best practice). The fixes that are CSS live here; element fixes are listed in the project doc. ========================================================================== */ /* L1. Contrast. #94A3B8 on white is 2.56:1 (needs 4.5:1). #526277 is 5.9:1 on white and 5.5:1 on the #F4F7FB table tint. */ :root .mr-dates__label, :root .mr-dates__value.is-placeholder, :root .mr-cal__names span, :root #brx-content .mnm-pcard__unit, :root #brx-content #brxe-kstblh1, :root #brx-content #brxe-kstblh2 { color: #526277; } :root .mr-search__input::placeholder, :root #brx-content input::placeholder, :root #brx-content textarea::placeholder { color: #5E6E83; opacity: 1; } /* "Same great service across Broward County" rendered as #4585E1 (3.68:1). */ /* The strapline text was set to opacity .8, which is what dragged it down. */ :root #brx-content .mnm-strapline > * { opacity: 1; } /* L2. Links inside running text must not rely on colour alone (WCAG 1.4.1). */ :root #brx-content :is(p, li, td, .woocommerce-info, .woocommerce-message) > a:not([class*="btn"]):not(.button) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } /* L3. Card titles are now h2 (were h3 under an h1, which skipped a level). Sizes pinned to what the h3s rendered at, so nothing moves visually. */ :root #brx-content h2.mnm-pcard__name { font-size: 19px; line-height: 1.28; letter-spacing: -.015em; margin: 0; } :root #brx-content h2.mnm-citycard__name { font-size: 16px; line-height: 1.25; letter-spacing: normal; margin: 0; } /* L4. Accessibility statement page (322). */ :root #brx-content .mnm-legal { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.7; color: var(--mnm-gray-700, #334155); } :root #brx-content .mnm-legal h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.3; color: var(--mnm-ink, #0A1B33); margin: 2em 0 .5em; } :root #brx-content .mnm-legal > :first-child { margin-top: 0; } :root #brx-content .mnm-legal p { margin: 0 0 1em; } :root #brx-content .mnm-legal ul { margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; } :root #brx-content .mnm-legal li { margin: 0 0 .45em; } :root #brx-content .mnm-legal a { color: var(--mnm-blue-dark, #1667D9); text-decoration: underline; text-underline-offset: .18em; } :root #brx-content .mnm-legal__updated { font-size: 14px; color: #526277; } /* L5. Bottom footer bar only (the copyright row): blue gradient with a soft sheen and a highlight line on the top edge. The main footer above it is left exactly as it was. White on the lightest stop (#1B6BDB) is 5.0:1. */ :root #brx-footer .mnm-footer-bar { position: relative; isolation: isolate; background-color: #1454B8; background-image: linear-gradient(115deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / .05) 28%, rgb(255 255 255 / 0) 45%), linear-gradient(100deg, #1B6BDB 0%, #1454B8 50%, #0C3A8A 100%); border-top: 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); } :root #brx-footer .mnm-footer-bar p, :root #brx-footer .mnm-footer-bar a { color: #fff; } :root #brx-footer .mnm-footer-bar a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; } :root #brx-footer .mnm-footer-legal { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; width: auto; } :root #brx-footer .mnm-footer-legal a { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; } @media (min-width: 768px) { :root #brx-footer .mnm-footer-barctn { flex-direction: row; justify-content: space-between; align-items: center; } } /* Woo account links (e.g. "Log out") sit inside sentences. A Woo rule strips their underline, so this one has to win outright. */ :root .woocommerce-MyAccount-content :is(p, li) a:not(.button) { text-decoration: underline !important; text-underline-offset: .18em; } /* --- M. For Clinics page (326), 2026-09-20 --------------------------------- Reuses the hero band, the How It Works steps (.mnm-howgrid) and the Help CTA panel. Only the four benefit cards and the note are new. */ :root #brx-content .mnm-clinic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; } @media (max-width: 991px) { :root #brx-content .mnm-clinic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { :root #brx-content .mnm-clinic-grid { grid-template-columns: minmax(0, 1fr); } } :root #brx-content .mnm-clinic-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 22px; background: var(--mnm-white, #fff); border: 1px solid var(--mnm-hairline, #E9EEF5); border-radius: 16px; box-shadow: var(--mnm-lift-1, 0 2px 10px rgb(var(--mnm-shadow-rgb) / .05)); align-self: stretch; } :root #brx-content .mnm-clinic-card > .mnm-i { /* .mnm-i draws its icon with a mask over its background, so the colour has to be the background itself; no tile behind it. */ width: 28px; height: 28px; background-color: var(--mnm-green-650, #16804C); color: var(--mnm-green-650, #16804C); } :root #brx-content .mnm-clinic-card__title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--mnm-ink, #0A1B33); margin: 4px 0 0; } :root #brx-content .mnm-clinic-card__text { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15.5px; line-height: 1.6; color: var(--mnm-gray-700, #334155); margin: 0; } :root #brx-content .mnm-clinic-note { align-self: center; max-width: 60ch; margin: 0; text-align: center; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: #526277; } :root #brx-content .mnm-clinic-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; } /* --- N. Clinic referral Welcome page (328), 2026-09-21 -------------------- The search card sits in the centred hero here, not in the split home hero. */ :root #brx-content .mnm-ref-search { width: 100%; max-width: 820px; margin: 10px auto 0; text-align: left; box-shadow: 0 1px 2px rgb(var(--mnm-shadow-rgb) / .06), 0 24px 56px -24px rgb(var(--mnm-shadow-rgb) / .28); } :root #brx-content .mnm-ref-badge { align-self: center; } /* --------------------------------------------------------------------------- Single blog post (Bricks template 358 "MNM Single Post") The article body is written in the normal WordPress editor, never in Bricks, so everything under .mnm-postbody styles markup Bricks has no classes on. Descendant selectors are deliberate here for that reason. --------------------------------------------------------------------------- */ /* The date under the title: muted and spaced off the h1 rather than sitting on its baseline. */ #brx-content .mnm-postmeta { margin-top: 10px; font-size: 14px; letter-spacing: .02em; color: var(--mnm-muted, #5A6B82); } /* The featured image still stops at the reading column, so a wide photo does not read as a different page from the text underneath it. */ #brx-content .mnm-postimg { max-width: 72ch; margin: 0 auto var(--space-l, 32px); } #brx-content .mnm-postimg img { display: block; width: 100%; height: auto; border-radius: 14px; } /* Reading column. 72ch is the comfortable measure; auto margins centre it in the container, which is a stretched flex column. */ #brx-content .mnm-postbody { max-width: 72ch; margin-left: auto; margin-right: auto; } #brx-content .mnm-postbody h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -0.01em; color: var(--mnm-ink, #0A1B33); margin: var(--space-l, 32px) 0 12px; } #brx-content .mnm-postbody h3 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--mnm-ink, #0A1B33); margin: var(--space-m, 24px) 0 8px; } #brx-content .mnm-postbody p, #brx-content .mnm-postbody li { font-size: 16px; line-height: 1.65; } #brx-content .mnm-postbody p { margin: 0 0 16px; } #brx-content .mnm-postbody ul, #brx-content .mnm-postbody ol { margin: 0 0 16px; padding-left: 22px; } #brx-content .mnm-postbody li { margin: 0 0 6px; } #brx-content .mnm-postbody img { max-width: 100%; height: auto; border-radius: 12px; margin: var(--space-m, 24px) 0; } #brx-content .mnm-postbody blockquote { margin: var(--space-m, 24px) 0; padding: 14px 18px; border-left: 3px solid var(--mnm-blue-dark, #1667D9); background: var(--mnm-surface, #FFFFFF); border-radius: 0 10px 10px 0; } #brx-content .mnm-postbody > *:first-child { margin-top: 0; } #brx-content .mnm-postbody > *:last-child { margin-bottom: 0; } /* Back button sits under the article with real space above it, so a head-mouse user does not land on it by accident at the end of a scroll. */ #brx-content .mnm-postnav { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; margin-top: var(--space-xl, 48px); } /* --------------------------------------------------------------------------- Promise strip (Bricks component "MNM promise rows", CPT mnm_promise) The five rows used to be hardcoded, and rows two and four carried .mnm-well--green by hand. They now come out of a query loop, so the alternating rhythm has to come from the row's position rather than from its content: add a sixth promise and the pattern simply continues. --------------------------------------------------------------------------- */ #brx-content .mnm-proofbar .mnm-tr:nth-child(even) .mnm-well { background: var(--mnm-green-tint, #EAF8F0); color: var(--mnm-green-650); } /* --------------------------------------------------------------------------- Footer reassure marks and the How It Works grid, after both became loops (components "MNM footer reassure rows" and "MNM how it works steps"). --------------------------------------------------------------------------- */ /* The footer marks used to take their icon from :nth-child(1|2|3) rules, which only hold while there are exactly three rows in a fixed order. Each row now carries a real .mnm-i child like every other icon on the site, so the icon travels with the row's content instead of its position. The old ::before is suppressed wherever that child exists, which leaves the nth-child rules harmless rather than needing them deleted from the panel. */ #brx-footer .mnm-footer-reassure .mnm-reassure__mark:has(.mnm-i)::before { display: none; } #brx-footer .mnm-footer-reassure .mnm-reassure__mark .mnm-i { width: 19px; height: 19px; } @media (min-width: 992px) { #brx-footer .mnm-footer-reassure .mnm-reassure__mark .mnm-i { width: 25px; height: 25px; } } /* The steps grid was repeat(3, 1fr), which was true while the three cards were typed into the page. They come from a loop now, so a fourth step has to land somewhere sensible rather than wrapping under the first. auto-fit gives the same three equal columns at three items. */ #brx-content .mnm-howgrid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } @media (max-width: 860px) { #brx-content .mnm-howgrid { grid-template-columns: 1fr; } } /* Menu editor (2026-09-29): on 992-1279px laptops the top bar holds one link fewer on the left. The home link is the one left out there, since the logo is also the way home. The phone menu always lists it. */ @media (min-width: 992px) and (max-width: 1279px) { :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li.mnm-nav-item--wide { display: none; } } /* Top menu dropdowns (2026-09-29). Markup comes from the store console (modules/store-console/src/Menus.php), behaviour from assets/nav.js. A dropdown is a normal top link plus a small arrow button that opens its list. It opens on click or keyboard only, never on hover, so crossing the bar with a head mouse pops nothing up. Laptops: a floating card under the link. Phone menu: an indented list under the row, with a 56px arrow button at the end of the row. Links the bar cannot fit get mnm-nav-item--wide (left out on 992-1279px laptops) or mnm-nav-item--overflow (phone menu only). */ :root #brx-header .mnm-nav-sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 44px; margin: 0 0 0 2px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--mnm-ink-700, #0F2A4D); vertical-align: middle; cursor: pointer; -webkit-appearance: none; appearance: none; } :root #brx-header .mnm-nav-sub-arrow { display: block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .15s ease; } :root #brx-header .mnm-nav-sub-toggle[aria-expanded="true"] .mnm-nav-sub-arrow { transform: rotate(180deg); } :root #brx-header .mnm-nav-sub-toggle:hover, :root #brx-header .mnm-nav-sub-toggle[aria-expanded="true"] { color: var(--mnm-blue-dark, #1667D9); } :root #brx-header .mnm-nav-sub-toggle:focus-visible { outline: 3px solid var(--mnm-blue-dark, #1667D9); outline-offset: 2px; } :root #brx-header .mnm-nav-sub { margin: 0; padding: 0; list-style: none; } :root #brx-header .mnm-nav-sub[hidden] { display: none; } :root #brx-header .mnm-nav-subitem { margin: 0; padding: 0; list-style: none; } :root #brx-header .mnm-nav-sublink { display: flex; align-items: center; text-decoration: none; font-family: var(--mnm-font-display, 'Plus Jakarta Sans', system-ui, sans-serif); font-weight: 600; color: var(--mnm-ink-700, #0F2A4D); } :root #brx-header .mnm-nav-sublink:hover, :root #brx-header .mnm-nav-sublink[aria-current] { color: var(--mnm-blue-dark, #1667D9); } :root #brx-header .mnm-nav-item--current-parent > .mnm-nav-link { color: var(--mnm-blue-dark, #1667D9); } /* Laptops: the list floats under its link as a card. */ @media (min-width: 992px) { :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li.mnm-nav-item--overflow { display: none; } :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li.mnm-nav-item--has-sub { position: relative; white-space: nowrap; } :root #brx-header .mnm-nav-sub { position: absolute; top: calc(100% + 18px); left: -14px; z-index: 60; min-width: 250px; padding: 8px; border: 1px solid var(--mnm-hairline, #E3E9F1); border-radius: 14px; background: var(--mnm-white, #FFFFFF); box-shadow: var(--mnm-lift-2, 0 14px 36px rgba(12, 49, 106, .14)); } /* Right-hand dropdowns open towards the middle so they never leave the screen. */ :root #brx-header .mnm-nav-item--right > .mnm-nav-sub { left: auto; right: -14px; } :root #brx-header .mnm-nav-sublink { min-height: 44px; padding: 8px 14px; border-radius: 9px; font-size: 15px; line-height: 1.3; white-space: nowrap; } :root #brx-header .mnm-nav-sublink:hover { background: var(--mnm-blue-05, #F3F8FF); } :root #brx-header .mnm-nav-sublink:focus-visible { outline: 3px solid var(--mnm-blue-dark, #1667D9); outline-offset: -3px; } } /* Phone menu: link and arrow share the row, the list sits indented below. */ :root #brx-header .mnm-header-nav.brx-open .brx-nav-nested-items > li.mnm-nav-item--has-sub { display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: stretch; } :root #brx-header .mnm-header-nav.brx-open li.mnm-nav-item--has-sub > .mnm-nav-link::after { display: none; } :root #brx-header .mnm-header-nav.brx-open .mnm-nav-sub-toggle { width: 56px; height: auto; min-height: 56px; margin: 0; border-bottom: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 0; } :root #brx-header .mnm-header-nav.brx-open .mnm-nav-sub-arrow { width: 20px; height: 20px; } :root #brx-header .mnm-header-nav.brx-open .mnm-nav-sub { grid-column: 1 / -1; padding: 4px 0 8px 18px; border-bottom: 1px solid var(--mnm-gray-100, #E9EEF5); } :root #brx-header .mnm-header-nav.brx-open .mnm-nav-sub[hidden] { display: none; } :root #brx-header .mnm-header-nav.brx-open .mnm-nav-sublink { min-height: 48px; padding: 6px 4px; font-size: 17px; line-height: 1.3; } :root #brx-header .mnm-header-nav.brx-open .mnm-nav-sublink:focus-visible { outline: 3px solid var(--mnm-blue-dark, #1667D9); outline-offset: 2px; border-radius: 4px; } /* Which right-hand link starts the right group depends on the laptop size, because some links are left out on smaller ones (Menus.php marks them). Bricks sets the header row to space-between, which would spread the links apart whenever the pushed link is hidden, so the row packs from the left and one auto margin does the pushing. */ @media (min-width: 992px) { :root #brx-header #brxe-hdctn { justify-content: flex-start; } :root #brx-header #brxe-hdctn:not(:has(.mnm-nav-item--right:not(.mnm-nav-item--overflow))) > #brxe-hdright { margin-left: auto; } } @media (min-width: 992px) and (max-width: 1279px) { :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li.mnm-nav-item--rfirst { margin-left: 0; } :root #brx-header #brxe-hdnav > .brx-nav-nested-items > li.mnm-nav-item--rfirst-small { margin-left: auto; } :root #brx-header #brxe-hdctn:not(:has(.mnm-nav-item--right:not(.mnm-nav-item--overflow):not(.mnm-nav-item--wide))) > #brxe-hdright { margin-left: auto; } } /* ========================================================================== 24. Blog: single post (template 358), topic archive (template 809) and the article cards on the Blog page (298). 2026-09-30. Structure follows the ryanrealtygroup.com article page: hero with the breadcrumb, topic and meta line; one reading column; an author card; previous / next; three more articles; the CTA band. Existing tokens only. Every selector starts with :root so it outranks the Bricks panel's #brx-content rules whatever the load order. ========================================================================== */ /* --- Hero: topic pill and the "date · read time" line -------------------- */ :root #brx-content .mnm-badge a, :root #brx-content .mnm-tag a { color: inherit; text-decoration: none; } :root #brx-content .mnm-badge a:hover, :root #brx-content .mnm-tag a:hover { color: var(--mnm-btn-bg); } /* A row of spans with a centred dot between them. The dot is margin-spaced, not space-spaced, because whitespace at the start of a flex item collapses. */ :root #brx-content .mnm-postmeta { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0; row-gap: 4px; width: auto; margin-top: 2px; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--mnm-muted); } :root #brx-content .mnm-postmeta > * + *::before { content: "\00B7"; margin: 0 .65em; } /* --- Article column ------------------------------------------------------ */ /* The photo runs wider than the text so it reads as the article's cover, cropped to one shape so every post looks the same whatever was uploaded. */ :root #brx-content .mnm-postsec .mnm-postimg { display: block; width: 100%; max-width: 960px; height: auto; margin: 0 auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; border: 1px solid var(--mnm-hairline); box-shadow: var(--mnm-lift-1); } /* The opening paragraph is set a step larger, like a standfirst. */ :root #brx-content .mnm-postsec .mnm-postbody > p:first-child { font-size: 19px; line-height: 1.6; color: var(--mnm-ink); } :root #brx-content .mnm-postsec .mnm-postbody blockquote { margin: var(--space-m, 24px) 0; padding: 18px 22px; border-left: 3px solid var(--mnm-green-650); background: var(--mnm-green-50); border-radius: 0 14px 14px 0; } :root #brx-content .mnm-postsec .mnm-postbody blockquote p { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--mnm-ink); } /* --- Author card --------------------------------------------------------- */ :root #brx-content .mnm-authorcard { display: flex; flex-direction: row; align-items: center; gap: 16px; width: 100%; max-width: 72ch; margin-inline: auto; padding: 20px 22px; background: var(--mnm-bg); border: 1px solid var(--mnm-hairline); border-radius: 16px; } :root #brx-content .mnm-authorcard__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mnm-green-50); color: var(--mnm-green-650); border: 1px solid var(--mnm-hairline); } :root #brx-content .mnm-authorcard__mark .mnm-i { width: 24px; height: 24px; } :root #brx-content .mnm-authorcard__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :root #brx-content .mnm-authorcard__label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mnm-gray-700); } :root #brx-content .mnm-authorcard__name { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 17px; font-weight: 800; color: var(--mnm-ink); } :root #brx-content .mnm-authorcard__bio { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--mnm-muted); } /* --- Previous / next ----------------------------------------------------- */ /* Two equal cards. "Next" is pinned to the right column so it stays on the right when there is no previous article. Whole card is the link, 44px+. */ :root #brx-content .mnm-postpager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 72ch; margin-inline: auto; } :root #brx-content .mnm-postpager .prev-post.hide { display: none; } :root #brx-content .mnm-postpager .next-post { grid-column: 2; } :root #brx-content .mnm-postpager > a { display: flex; width: auto; min-height: 44px; padding: 18px 20px; background: var(--mnm-surface); border: 1px solid var(--mnm-hairline); border-radius: 14px; box-shadow: var(--mnm-lift-1); text-decoration: none; transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms cubic-bezier(.16,1,.3,1), border-color 220ms cubic-bezier(.16,1,.3,1); } :root #brx-content .mnm-postpager > a:hover { transform: translateY(-2px); box-shadow: var(--mnm-lift-2); border-color: var(--mnm-hairline-strong); } :root #brx-content .mnm-postpager > a:focus-visible { outline: 3px solid var(--mnm-blue-dark); outline-offset: 3px; } :root #brx-content .mnm-postpager .content { display: flex; flex-direction: column; gap: 6px; width: 100%; } :root #brx-content .mnm-postpager .next-post .content { align-items: flex-end; text-align: right; } :root #brx-content .mnm-postpager .label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mnm-gray-700); } :root #brx-content .mnm-postpager .prev-post .label::before { content: "\2190"; margin-right: .5em; } :root #brx-content .mnm-postpager .next-post .label::after { content: "\2192"; margin-left: .5em; } :root #brx-content .mnm-postpager .title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--mnm-ink); } @media (max-width: 640px) { :root #brx-content .mnm-postpager { grid-template-columns: 1fr; } :root #brx-content .mnm-postpager .next-post { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { :root #brx-content .mnm-postpager > a, :root #brx-content .mnm-postpager > a:hover { transition: none; transform: none; } } /* --- "More articles" band ------------------------------------------------ */ :root #brx-content .mnm-moreposts__head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; width: 100%; } :root #brx-content .mnm-moreposts__head .mnm-h2 { margin: 0; text-align: left; } /* No other articles yet: the whole band goes, not an empty grey strip. */ :root #brx-content .mnm-moreposts:not(:has(.mnm-pcard)) { display: none; } /* --- Article cards (single, archive, Blog page) -------------------------- */ /* Product cards show a cut-out on a tinted ground. Article cards show a photograph, so the media fills the top of the card instead. */ :root #brx-content .mnm-cardgrid--posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; } :root #brx-content .mnm-postcard .mnm-pcard__media { padding: 0; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mnm-green-50); } :root #brx-content .mnm-postcard .mnm-pcard__media img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; mix-blend-mode: normal; transition: transform 400ms cubic-bezier(.16,1,.3,1); } :root #brx-content .mnm-postcard:hover .mnm-pcard__media img { transform: scale(1.03); } /* An article with no featured image gets the brand mark on the soft gradient rather than an empty box. */ :root #brx-content .mnm-postcard .mnm-pcard__media:empty { background-image: url("/wp-content/uploads/2026/09/mnm-site-icon-512.png"), var(--mnm-grad-fresh); background-repeat: no-repeat, no-repeat; background-position: center, center; background-size: 64px, cover; } :root #brx-content .mnm-postcard .mnm-pcard__foot { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; width: 100%; } :root #brx-content .mnm-cardmeta { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--mnm-muted); } /* The featured card on the Blog page: photo fills its half, top to bottom. */ :root #brx-content .mnm-postcard--feature .mnm-pcard__media { aspect-ratio: auto; min-height: 320px; } @media (max-width: 767px) { :root #brx-content .mnm-postcard--feature { grid-template-columns: 1fr; } :root #brx-content .mnm-postcard--feature .mnm-pcard__media { aspect-ratio: 16 / 9; min-height: 0; } } @media (prefers-reduced-motion: reduce) { :root #brx-content .mnm-postcard .mnm-pcard__media img { transition: none; } :root #brx-content .mnm-postcard:hover .mnm-pcard__media img { transform: none; } } /* Empty topic: the message spans the grid instead of sitting in column one. */ :root #brx-content .mnm-cardgrid--posts > .bricks-posts-nothing-found { grid-column: 1 / -1; padding: var(--space-l, 32px) 0; text-align: center; font-size: 16px; color: var(--mnm-muted); } /* --- Topic chips (archive) ----------------------------------------------- */ :root #brx-content .mnm-topicchips { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; } :root #brx-content .mnm-topicchips__item { display: contents; } :root #brx-content .mnm-topicchip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--mnm-surface); border: 1px solid var(--mnm-hairline-strong); border-radius: 999px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14.5px; font-weight: 700; color: var(--mnm-ink); text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; } :root #brx-content .mnm-topicchip:hover { border-color: var(--mnm-btn-bg); color: var(--mnm-btn-bg); } :root #brx-content .mnm-topicchip[aria-current="page"] { background: var(--mnm-btn-bg); border-color: var(--mnm-btn-bg); color: var(--mnm-white); } :root #brx-content .mnm-topicchip:focus-visible { outline: 3px solid var(--mnm-blue-dark); outline-offset: 3px; } /* --- Page numbers (any Bricks pagination in the content) ----------------- */ :root #brx-content .brxe-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } :root #brx-content .brxe-pagination li > .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; background: var(--mnm-surface); border: 1px solid var(--mnm-hairline); border-radius: 12px; font-weight: 700; color: var(--mnm-ink); text-decoration: none; } :root #brx-content .brxe-pagination li > a.page-numbers:hover { border-color: var(--mnm-btn-bg); color: var(--mnm-btn-bg); } :root #brx-content .brxe-pagination li > .page-numbers.current { background: var(--mnm-btn-bg); border-color: var(--mnm-btn-bg); color: var(--mnm-white); } /* ========================================================================== 25. Order received (thank-you) page (2026-10-02) WooCommerce prints its classic thank-you markup with no Bricks template, so the order headings picked up the site's display h2 size (50px+) and the tables ran full bleed. This turns it into a calm, narrow receipt: a green confirmation banner, summary tiles, one order card, two address cards. Scoped to body.woocommerce-order-received so checkout itself is untouched. ========================================================================== */ body.woocommerce-order-received #brx-content .woocommerce { width: 100%; max-width: 880px; margin: 0 auto; } body.woocommerce-order-received #brx-content > h1 { width: 100%; max-width: 880px; margin: 0 auto; font-size: clamp(30px, 4vw, 40px); } body.woocommerce-order-received .woocommerce-order { display: flex; flex-direction: column; row-gap: 28px; font-size: 16px; color: var(--mnm-ink, #0A1B33); } /* 1. Confirmation banner */ body.woocommerce-order-received .woocommerce-thankyou-order-received { display: flex; align-items: center; column-gap: 12px; margin: 0; padding: 16px 20px; background: var(--mnm-green-50, #F2F6EF); border: 1px solid rgb(79 123 52 / .25); border-radius: 14px; color: var(--mnm-green-text, #3F6328); font-size: 17px; font-weight: 700; text-align: left; } body.woocommerce-order-received .woocommerce-thankyou-order-received::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mnm-green-650, #4F7B34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; } /* 2. Summary tiles (order number, date, email, total, payment) */ body.woocommerce-order-received ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; margin: 0; padding: 0; list-style: none; border: 0; } body.woocommerce-order-received ul.woocommerce-order-overview li { display: flex; flex-direction: column; row-gap: 4px; margin: 0; padding: 14px 16px; background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 14px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb, 12 49 106) / .06); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--mnm-gray-500, #64748B); line-height: 1.3; min-width: 0; } body.woocommerce-order-received ul.woocommerce-order-overview li::before { content: none; } /* Email addresses are long: give that tile two columns so it never breaks mid-word */ body.woocommerce-order-received ul.woocommerce-order-overview li.email { grid-column: span 2; } body.woocommerce-order-received ul.woocommerce-order-overview li strong { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--mnm-ink, #0A1B33); overflow-wrap: break-word; min-width: 0; } body.woocommerce-order-received ul.woocommerce-order-overview li strong img { width: auto; max-height: 18px; } /* 3. Section headings: sized for a receipt, not a hero */ body.woocommerce-order-received .woocommerce-order h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--mnm-ink, #0A1B33); } /* 4. Order details card */ body.woocommerce-order-received .woocommerce-order-details, body.woocommerce-order-received .woocommerce-customer-details { margin: 0; } body.woocommerce-order-received table.woocommerce-table--order-details { width: 100%; margin: 0; border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--mnm-surface, #FFFFFF); box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb, 12 49 106) / .06); font-size: 15px; } body.woocommerce-order-received table.woocommerce-table--order-details th, body.woocommerce-order-received table.woocommerce-table--order-details td { padding: 12px 20px; border: 0; border-top: 1px solid var(--mnm-gray-100, #E9EEF5); background: transparent; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.5; } body.woocommerce-order-received table.woocommerce-table--order-details th:last-child, body.woocommerce-order-received table.woocommerce-table--order-details td:last-child { text-align: right; white-space: nowrap; } body.woocommerce-order-received table.woocommerce-table--order-details thead th { border-top: 0; background: var(--mnm-bg, #F4F7FB); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mnm-gray-500, #64748B); } body.woocommerce-order-received table.woocommerce-table--order-details tbody td { padding-top: 16px; padding-bottom: 16px; } body.woocommerce-order-received table.woocommerce-table--order-details .product-name a { font-weight: 700; color: var(--mnm-ink, #0A1B33); text-decoration: none; } body.woocommerce-order-received table.woocommerce-table--order-details .product-name a:hover, body.woocommerce-order-received table.woocommerce-table--order-details .product-name a:focus-visible { color: var(--mnm-blue-dark, #1667D9); text-decoration: underline; } body.woocommerce-order-received table.woocommerce-table--order-details .product-quantity { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--mnm-bg, #F4F7FB); font-size: 13px; font-weight: 700; color: var(--mnm-muted, #475569); } /* Pickup / return dates: one tidy line each instead of bulleted stacks */ body.woocommerce-order-received .wc-item-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--mnm-muted, #475569); } body.woocommerce-order-received .wc-item-meta li { display: flex; gap: 6px; margin: 0; } body.woocommerce-order-received .wc-item-meta li::before { content: none; } body.woocommerce-order-received .wc-item-meta .wc-item-meta-label { font-weight: 600; color: var(--mnm-ink-700, #0F2A4D); } body.woocommerce-order-received .wc-item-meta p { display: inline; margin: 0; } /* Totals block */ body.woocommerce-order-received table.woocommerce-table--order-details tfoot th, body.woocommerce-order-received table.woocommerce-table--order-details tfoot td { background: var(--mnm-gray-25, #FAFCFE); font-weight: 500; color: var(--mnm-muted, #475569); } body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:nth-last-child(2) th, body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td { font-size: 17px; font-weight: 800; color: var(--mnm-ink, #0A1B33); } body.woocommerce-order-received .woocommerce-order-details .order-again { margin: 16px 0 0; } /* 5. Billing + delivery address cards */ body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; } body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns::before, body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns::after { content: none; } body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column { float: none; width: auto; max-width: none; margin: 0; padding: 20px; background: var(--mnm-surface, #FFFFFF); border: 1px solid var(--mnm-gray-100, #E9EEF5); border-radius: 16px; box-shadow: 0 2px 8px rgb(var(--mnm-shadow-rgb, 12 49 106) / .06); } body.woocommerce-order-received .woocommerce-customer-details h2.woocommerce-column__title { font-size: 18px; } body.woocommerce-order-received .woocommerce-customer-details address { margin: 0; padding: 0; border: 0; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--mnm-muted, #475569); } body.woocommerce-order-received .woocommerce-customer-details address p { margin: 6px 0 0; } body.woocommerce-order-received .woocommerce-customer-details--phone::before, body.woocommerce-order-received .woocommerce-customer-details--email::before { content: none; } body.woocommerce-order-received .woocommerce-customer-details--email { overflow-wrap: anywhere; } /* Phones and small tablets */ @media (max-width: 767px) { body.woocommerce-order-received ul.woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr; } body.woocommerce-order-received table.woocommerce-table--order-details th, body.woocommerce-order-received table.woocommerce-table--order-details td { padding-left: 14px; padding-right: 14px; } }