@charset "UTF-8"; /* ===================================================================== My Direct mega menu — build m3 (Style D · Soft cards look) Styles the wide header panels printed by includes/mega-menu.php. Desktop panels 1051px and wider (blocks 1–12, and block 13 for the three-tier panels added in m3); block 14 is the phone / tablet menu drawer (1050px and narrower, m3). No JavaScript: the picture beside the links and the third-tier lists change with CSS :has(). TO UNDO EVERYTHING: see the Undo note at the top of includes/mega-menu.php. TO UNDO ONE PART: delete that numbered block below and re-upload. Colours use the Style D tokens when that stylesheet is loaded and fall back to the same values when it is not, so this file works on its own. !important appears only where Core's presentation-v135.css and presentation-v140.css already force link colour/underline with !important. ===================================================================== */ @media (min-width:1051px){ /* 1. POSITION — the panel hangs from the bottom of the whole header bar (full width) instead of from the menu word. Undo: delete this block (the panel then opens under the word, as narrow as the menu). */ :root body.mdb-complete-site .mdb-header{position:relative} :root body.mdb-complete-site .mdb-header .mdb-nav, :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega-group{position:static} /* 2. PANEL — white card under the header with rounded bottom corners. The invisible strip (::before) bridges the gap between the menu word and the panel so it does not close while the pointer moves down. Undo: delete this block. */ :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-nav-dropdown.mdb-mega{ --mm-ink:var(--sd-ink,#2B3240);--mm-slate:var(--sd-slate,#444E60);--mm-muted:var(--sd-muted,#5B6776); --mm-aqua:var(--sd-aqua,#49C3C9);--mm-aqua-d:var(--sd-aqua-d,#2F8E94);--mm-aqua-h:var(--sd-aqua-h,#EEF7F8); --mm-line:var(--sd-line,#ECE9E2);--mm-warm:#F3F1EC; left:0;right:0;top:100%;width:auto;min-width:0;margin:0;padding:0; background:#fff;border:0;border-top:1px solid var(--mm-line);border-radius:0 0 22px 22px; box-shadow:0 30px 60px rgba(20,25,35,.14);cursor:default;text-align:left; color:var(--mm-slate);font-family:var(--sd-font,inherit)} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-nav-dropdown.mdb-mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px} /* 3. LAYOUT — intro | links | picture, then a row of help links. Undo: delete this block (everything stacks in one column). */ :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__in{display:grid;grid-template-columns:230px minmax(0,1fr) 330px;gap:0 36px;max-width:1280px;margin:0 auto;padding:28px 32px 22px;box-sizing:border-box} /* 4. INTRO COLUMN — group name, one sentence, "Shop all" aqua pill. Undo: delete this block. */ :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__title{margin:4px 0 10px;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--mm-slate)} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__text{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--mm-muted)} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega a.mdb-mega__cta{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--mm-aqua);color:var(--mm-ink)!important;font-size:14px;font-weight:700;line-height:1.2;text-decoration:none!important;box-shadow:0 6px 16px rgba(73,195,201,.35);transition:background .15s} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega a.mdb-mega__cta::after{content:"\2192";font-weight:700} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega a.mdb-mega__cta:is(:hover,:focus-visible){background:#5BCDD2;color:var(--mm-ink)!important;text-decoration:none!important} /* 5. LINK LIST — each link is a soft row: icon tile, name, one line of text. Five or more links sit in two columns. Undo: delete this block. */ :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__list{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:0;margin:0;padding:0;list-style:none} :root body.mdb-complete-site .mdb-header .mdb-mega.mdb-mega--two-columns .mdb-mega__list{grid-template-columns:repeat(2,minmax(0,1fr))} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__item{margin:0;padding:2px} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega .mdb-mega__item>a{display:block;min-height:0;padding:9px 10px 9px 9px;border-radius:14px;background:transparent;color:var(--mm-slate)!important;font-size:15px;font-weight:600;line-height:1.3;text-decoration:none!important;transition:background .15s} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega .mdb-mega__item>a:is(:hover,:focus-visible){background:var(--mm-aqua-h);color:var(--mm-ink)!important;text-decoration:none!important} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__row{display:flex;align-items:flex-start;gap:12px} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__label{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:2px} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__name{font-weight:700} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__note{font-size:13.5px;font-weight:500;line-height:1.4;color:var(--mm-muted)} /* 6. ICONS — slate line drawings with aqua fills on a pale tile; the tile turns slate when its link is pointed at. Undo: delete this block (icons show unstyled). */ :root body.mdb-complete-site .mdb-header .mdb-mega svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible} :root body.mdb-complete-site .mdb-header .mdb-mega svg .a{fill:var(--mm-aqua);stroke:none} :root body.mdb-complete-site .mdb-header .mdb-mega svg .a2{fill:var(--mm-aqua);opacity:.32;stroke:none} :root body.mdb-complete-site .mdb-header .mdb-mega svg .as{stroke:var(--mm-aqua)} :root body.mdb-complete-site .mdb-header .mdb-mega svg .w{fill:#fff;stroke:currentColor;stroke-width:.9} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:7px;box-sizing:border-box;border-radius:11px;background:var(--mm-aqua-h);color:var(--mm-slate);transition:background .15s,color .15s} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__icon--empty{display:none} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__item>a:is(:hover,:focus-visible) .mdb-mega__icon{background:var(--mm-slate);color:#fff} /* 7. PICTURE — shows the first link's photo, and swaps to the photo of the link being pointed at (or tabbed to). Undo: delete this block and block 8. */ :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__shots{position:relative;min-height:280px;border-radius:18px;overflow:hidden;background:#EDE9E1} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .22s ease} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__shot img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__shot figcaption{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;border-radius:999px;background:rgba(30,35,46,.62);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;line-height:1.2;text-transform:uppercase} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__shot figcaption svg{width:20px;height:20px;flex:none} /* 8. PICTURE SWITCH — pure CSS. Rule 1 shows the first photo; rule 2 hides it while any link is pointed at; the numbered rules show the matching photo. Covers up to 12 links per group. Undo: delete this block (first photo stays). */ :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__shot--1{opacity:1} :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item:is(:hover,:focus-within)) .mdb-mega__shot--1{opacity:0} :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--1:is(:hover,:focus-within)) .mdb-mega__shot--1, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--2:is(:hover,:focus-within)) .mdb-mega__shot--2, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--3:is(:hover,:focus-within)) .mdb-mega__shot--3, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--4:is(:hover,:focus-within)) .mdb-mega__shot--4, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--5:is(:hover,:focus-within)) .mdb-mega__shot--5, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--6:is(:hover,:focus-within)) .mdb-mega__shot--6, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--7:is(:hover,:focus-within)) .mdb-mega__shot--7, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--8:is(:hover,:focus-within)) .mdb-mega__shot--8, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--9:is(:hover,:focus-within)) .mdb-mega__shot--9, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--10:is(:hover,:focus-within)) .mdb-mega__shot--10, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--11:is(:hover,:focus-within)) .mdb-mega__shot--11, :root body.mdb-complete-site .mdb-header .mdb-mega:has(.mdb-mega__item--12:is(:hover,:focus-within)) .mdb-mega__shot--12{opacity:1} /* 8b. PICTURE CARDS — groups with three links or fewer (e.g. Curtains) show each link as a card with its own photo across the panel, instead of list + picture. Undo: delete this block (the cards fall back to plain rows with a photo above). */ :root body.mdb-complete-site .mdb-header .mdb-mega.mdb-mega--cards .mdb-mega__list{grid-column:2/-1;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 8px} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega.mdb-mega--cards .mdb-mega__item>a{padding:8px 8px 12px;border-radius:20px} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__photo{display:block;height:210px;margin:0 0 12px;border-radius:14px;overflow:hidden;background:#EDE9E1} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none;transition:transform .35s ease} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__item>a:is(:hover,:focus-visible) .mdb-mega__photo img{transform:scale(1.03)} /* 9. HELP ROW — How to measure / How to install / Free samples as warm pills under the links. Undo: delete this block. */ :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__foot{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--mm-line)} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega .mdb-mega__foot a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:var(--mm-warm);color:var(--mm-slate)!important;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none!important;transition:background .15s} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega .mdb-mega__foot a:is(:hover,:focus-visible){background:var(--mm-aqua-h);color:var(--mm-ink)!important;text-decoration:none!important} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__foot svg{width:22px;height:22px;flex:none} /* 10. KEYBOARD — a clear aqua ring on whatever has keyboard focus. Undo: delete this block (browser default ring returns). */ :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega a:focus-visible{outline:2px solid var(--mm-aqua-d);outline-offset:2px} /* 13. THREE TIERS (m3) — groups whose links have sub-links (Blinds, Curtains, Shutters, Shop by): intro | tier-2 links | the pointed-at link's tier-3 list | its photo. Each tier-3 list lives inside its tier-2 row, so moving across to it keeps it open; a short delay before a list swaps means a diagonal move over the next row does not switch lists ("menu aim" without a script). With nothing pointed at, the first row's list shows. Undo: delete this block (the lists then stay hidden and the rows work as plain links). */ :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__in{grid-template-columns:210px 280px minmax(0,1fr) 240px;gap:0 28px;max-width:1480px;padding-bottom:28px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2{grid-column:2/4;position:relative;display:block;min-height:392px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li{width:280px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li>.mdb-mega__t2{position:relative;display:block;padding:9px 34px 9px 9px;border-radius:14px;color:var(--mm-slate)!important;font-size:15px;font-weight:600;line-height:1.3;text-decoration:none!important;cursor:pointer;transition:background .15s} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li>.mdb-mega__t2::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-4px;border:solid var(--mm-muted);border-width:2px 2px 0 0;transform:rotate(45deg);opacity:.55} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li:is(:hover,:focus-within)>.mdb-mega__t2, :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2:not(:has(>li:is(:hover,:focus-within)))>li:first-child>.mdb-mega__t2{background:var(--mm-aqua-h);color:var(--mm-ink)!important} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li:is(:hover,:focus-within)>.mdb-mega__t2 .mdb-mega__icon, :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2:not(:has(>li:is(:hover,:focus-within)))>li:first-child>.mdb-mega__t2 .mdb-mega__icon{background:var(--mm-slate);color:#fff} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__t2:focus-visible{outline:2px solid var(--mm-aqua-d);outline-offset:2px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__t2 .mdb-mega__note{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} /* the tier-3 list: hidden until its row is pointed at (after .12s), and stays .3s after the pointer leaves */ :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__pane{position:absolute;top:0;left:308px;right:0;min-height:100%;box-sizing:border-box;padding:2px 0 0 28px;border-left:1px solid var(--mm-line);background:#fff;visibility:hidden;opacity:0;z-index:1;transition:visibility 0s linear .3s,opacity .1s linear .2s} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li:is(:hover,:focus-within)>.mdb-mega__pane{visibility:visible;opacity:1;z-index:2;transition:visibility 0s linear .12s,opacity .12s linear .12s} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2:not(:has(>li:is(:hover,:focus-within)))>li:first-child>.mdb-mega__pane{visibility:visible;opacity:1;transition:none} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__pane-title{margin:6px 0 12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mm-aqua-d)} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__pane-text{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--mm-muted);max-width:420px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier3{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 10px;margin:0;padding:0;list-style:none} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier3--two{grid-template-columns:repeat(2,minmax(0,1fr))} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier3 li{margin:0} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__tier3 a{display:flex;align-items:center;gap:11px;padding:7px 9px 7px 7px;border-radius:12px;color:var(--mm-slate)!important;font-size:14.5px;font-weight:600;line-height:1.25;text-decoration:none!important;transition:background .15s} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__tier3 a:is(:hover,:focus-visible){background:var(--mm-aqua-h);color:var(--mm-ink)!important} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__icon--sm{width:34px;height:34px;padding:6px;border-radius:10px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier3 a:is(:hover,:focus-visible) .mdb-mega__icon{background:var(--mm-slate);color:#fff} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier3 .mdb-mega__note{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;font-weight:500} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__pane-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--mm-line)} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane-foot a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 10px;border-radius:999px;background:var(--mm-warm);color:var(--mm-slate)!important;font-size:13.5px;font-weight:600;line-height:1.2;text-decoration:none!important} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane-foot a.mdb-mega__all{padding:8px 14px;background:var(--mm-aqua);color:var(--mm-ink)!important;font-weight:700} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane-foot a.mdb-mega__all::after{content:"\2192"} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane-foot a:is(:hover,:focus-visible){background:var(--mm-aqua-h);color:var(--mm-ink)!important} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__pane-foot svg{width:20px;height:20px;flex:none} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__shots{grid-column:4;min-height:0;height:100%} } /* 11. NARROWER DESKTOPS (1051–1280px) — tighter columns and a smaller picture. Undo: delete this block. */ @media (min-width:1051px) and (max-width:1280px){ :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__in{grid-template-columns:200px minmax(0,1fr) 250px;gap:0 24px;padding:24px 24px 20px} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__title{font-size:23px} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__note{display:none} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__shots{min-height:230px} :root body.mdb-complete-site .mdb-header .mdb-mega .mdb-mega__photo{height:170px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__in{grid-template-columns:190px 250px minmax(0,1fr)} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li{width:250px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__pane{left:274px;padding-left:22px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__shots{display:none} } /* 14. PHONE AND TABLET MENU (m3, 1050px and narrower) — the "Menu" drawer as a two-level drill-down (printed by the pre_wp_nav_menu filter in includes/mega-menu.php). Groups open one at a time; a link with sub-links opens its own list in place of the group's list, with a "Back" row. Undo: delete this block and that filter. */ @media (max-width:1050px){ :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav{--mm-ink:var(--sd-ink,#2B3240);--mm-slate:var(--sd-slate,#444E60);--mm-muted:var(--sd-muted,#5B6776);--mm-aqua:var(--sd-aqua,#49C3C9);--mm-aqua-d:var(--sd-aqua-d,#2F8E94);--mm-aqua-h:var(--sd-aqua-h,#EEF7F8);--mm-line:var(--sd-line,#ECE9E2);margin:0;padding:0;list-style:none;font-family:var(--sd-font,inherit)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav ul{margin:0;padding:0;list-style:none} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav>li{border-bottom:1px solid var(--mm-line)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav>li>a, :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav>li>details>summary{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:6px 4px;color:var(--mm-slate);font-size:17px;font-weight:800;text-decoration:none;list-style:none;cursor:pointer} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav summary::-webkit-details-marker{display:none} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav>li>details>summary::after{content:"";width:8px;height:8px;margin-right:6px;border:solid var(--mm-slate);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav>li>details[open]>summary::after{transform:rotate(-135deg) translateY(-2px)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__panel{padding:0 0 16px} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__blurb{margin:0 4px 12px;font-size:14px;line-height:1.5;color:var(--mm-muted)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__all{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0 0 10px;border-radius:999px;background:var(--mm-aqua);color:var(--mm-ink);font-size:15px;font-weight:700;text-decoration:none} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__all::after{content:"\2192"} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__row{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px 6px 4px;border-radius:14px;color:var(--mm-slate);font-size:15.5px;font-weight:600;text-decoration:none;list-style:none;cursor:pointer} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__row:is(:hover,:focus-visible){background:var(--mm-aqua-h)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:7px;box-sizing:border-box;border-radius:11px;background:var(--mm-aqua-h);color:var(--mm-slate)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__icon--empty{display:none} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav svg .a{fill:var(--mm-aqua);stroke:none} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav svg .a2{fill:var(--mm-aqua);opacity:.32;stroke:none} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav svg .as{stroke:var(--mm-aqua)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav svg .w{fill:#fff;stroke:currentColor;stroke-width:.9} /* a link with sub-links: a chevron while closed */ :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__sub>summary .mdb-mnav__name{flex:1} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__sub>summary::after{content:"";width:7px;height:7px;margin-right:8px;border:solid var(--mm-muted);border-width:2px 2px 0 0;transform:rotate(45deg)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__back{display:none} /* level 2: the open link's list replaces the group's list */ :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__panel:has(.mdb-mnav__sub[open])>:is(.mdb-mnav__blurb,.mdb-mnav__all), :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__panel:has(.mdb-mnav__sub[open])>.mdb-mnav__list>li:not(:has(>.mdb-mnav__sub[open])){display:none} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__sub[open]>summary{min-height:44px;margin:0 0 6px;padding:4px;color:var(--mm-aqua-d);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__sub[open]>summary .mdb-mnav__icon{display:none} /* p32: the back chevron comes first ("‹ Back · Roller Blinds"). Both it and "Back" had order -1, and a ::after box comes after the "Back" words in that tie, so the row read "Back · ‹ Roller Blinds". Undo: order back to -1. */ :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__sub[open]>summary::after{order:-2;margin:0 2px 0 4px;border-color:var(--mm-aqua-d);transform:rotate(-135deg)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__sub[open]>summary .mdb-mnav__back{display:inline;order:-1;margin-right:6px} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__sub[open]>summary .mdb-mnav__back::after{content:" \00B7"} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__help{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--mm-line)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__help a{display:flex;align-items:center;gap:12px;min-height:46px;padding:4px;color:var(--mm-slate);font-size:14.5px;font-weight:600;text-decoration:none} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav__help .mdb-mnav__icon{width:34px;height:34px;padding:6px;background:#F3F1EC} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav :is(a,summary):focus-visible{outline:2px solid var(--mm-aqua-d);outline-offset:2px} } /* 12. REDUCED MOTION — no fades for visitors who ask for less movement. Undo: delete this block. */ @media (prefers-reduced-motion:reduce){ :root body.mdb-complete-site .mdb-header .mdb-mega :is(.mdb-mega__shot,.mdb-mega__icon,.mdb-mega__photo img,a,.mdb-mega__t2){transition:none} } /* 15. "ALL …" AS THE FIRST, BIG BUTTON OF EACH PANE (Core p10) — Aaron: "the 'All Roller Blinds->' button should be above all of the 2nd menu icons. at the top, one big button, unmissable, and the actual top first selection. leave how to measure/install where they are at bottom. same for all mega menus same format." includes/mega-menu.php now prints it under the pane title, before the list; this is its look: a full-width aqua bar with the words on the left and an arrow on the right. The phone menu already opens with "All …" first. Undo: delete this block and put back the previous includes/mega-menu.php. */ @media (min-width:1051px){ :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane>a.mdb-mega__all--top{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;width:100%;max-width:640px;min-height:52px;margin:0 0 14px;padding:12px 18px;border-radius:14px;background:var(--mm-aqua,#49C3C9);color:var(--mm-ink,#2B3240)!important;font-size:15.5px;font-weight:800;line-height:1.2;text-decoration:none!important;box-shadow:0 6px 16px rgba(73,195,201,.3);transition:background .15s,box-shadow .15s} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane>a.mdb-mega__all--top::after{content:"\2192";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.55);font-size:16px} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane>a.mdb-mega__all--top:is(:hover,:focus-visible){background:#5BCDD2;box-shadow:0 8px 20px rgba(73,195,201,.38)} :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane>a.mdb-mega__all--top:focus-visible{outline:2px solid var(--mm-aqua-d,#2F8E94);outline-offset:3px} } /* 16. HOW TO MEASURE / HOW TO INSTALL PILLS: A CLEAR HOVER (Core p18) — Aaron, 26 Sep: "mouse hover on how to measure pill just goes white bg, unlike the pill next to it? not normal." The help pills under each pane are warm grey and their hover was the palest aqua (#EEF7F8), which reads as white next to a warm pill. The hover is now a clear aqua tint with an aqua ring, the same for every pill. Undo: delete this block. */ :root body.mdb-complete-site .mdb-header .mdb-nav .mdb-mega--tiers .mdb-mega__pane-foot a:not(.mdb-mega__all):is(:hover,:focus-visible){background:#DFF3F4;box-shadow:inset 0 0 0 1.5px var(--mm-aqua);color:var(--mm-ink)!important;text-decoration:none} /* 17. STEADY SWITCHING (m6, Core p29) — Aaron, 28 Sep: the menu "seems flickery" (his video) and "laggy", but "i like that diagonal mouse movement doesnt switch panels". What flickered: (a) the 28px strip between a row and its list (and the strip before the photo, and the photo) belongs to no row, so crossing it snapped the first row's list, highlight and photo in for a moment; (b) a new list faded in over the old one, so for a moment both were half see-through (a pale flash with doubled text); (c) the photo swapped at once, before the list, and cross-faded too. Now: each row reaches across the strip to its list, and a list reaches across to the photo, so pointing there keeps the row; a list and its photo swap together, in one step, after the same .12s guard (a quick diagonal move over another row still changes nothing, and the lag is half what it was); in the plain panels a photo waits .06s, so crossing the gap between two links no longer flashes the first photo. Undo: delete this block. */ :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li>.mdb-mega__t2::before{content:"";position:absolute;top:0;bottom:0;left:100%;width:30px} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__pane{transition:visibility 0s linear .3s,opacity 0s linear .3s} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__tier2>li:is(:hover,:focus-within)>.mdb-mega__pane{transition:visibility 0s linear .12s,opacity 0s linear .12s} :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__shot{transition:opacity 0s linear .12s} :root body.mdb-complete-site .mdb-header .mdb-mega:not(.mdb-mega--tiers) .mdb-mega__shot{transition:opacity 0s linear .06s} @media (min-width:1281px){ :root body.mdb-complete-site .mdb-header .mdb-mega--tiers .mdb-mega__pane::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:268px} }