/* ========================================================================== navigation-mobile.css — McWellness app-style mobile / tablet drawer -------------------------------------------------------------------------- Additive, progressive-enhancement layer. Loaded AFTER styles.css. - Desktop (>=1024px): nothing here renders. The existing desktop nav in styles.css is left completely untouched. - Tablet / mobile (<=1023.98px): when js/navigation-mobile.js has run it adds `.mnav-enhanced` to ; we then retire the legacy checkbox drawer and show the new accessible button + slide-in panel + overlay. - No JS: this file does nothing visible and the legacy checkbox drawer in styles.css keeps working as the fallback. Colours, spacing, motion and shadows reuse the site tokens from styles.css so the drawer reads as native McWellness (violet #5B2A86, pill buttons). RTL is handled with logical properties + a dir-aware slide direction. ========================================================================== */ :root { --mnav-dur: 280ms; /* within the 250–300ms spec */ --mnav-overlay: rgba(43, 33, 64, 0.55); /* ink @ 55% */ --mnav-radius: 16px; --mnav-z-overlay: 70; --mnav-z-panel: 80; } /* New elements stay out of the document until enhanced AND below desktop. */ .mnav-burger, .mnav-overlay, .mnav-panel { display: none; } /* -------------------------------------------------------------------------- Tablet + mobile only -------------------------------------------------------------------------- */ @media (max-width: 1023.98px) { /* Retire the no-JS controls once the enhanced UI is live. */ html.mnav-enhanced .nav-toggle-label, html.mnav-enhanced .nav-backdrop, html.mnav-enhanced .site-nav { display: none !important; } /* ---- Hamburger button ------------------------------------------------ */ html.mnav-enhanced .mnav-burger { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: transparent; color: var(--c-ink); cursor: pointer; border-radius: var(--r-sm); flex: 0 0 auto; -webkit-tap-highlight-color: transparent; } .mnav-burger:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .mnav-burger__box { position: relative; display: block; inline-size: 24px; block-size: 18px; } .mnav-burger__bar { position: absolute; inset-inline: 0; top: 50%; block-size: 2px; margin-block-start: -1px; border-radius: 2px; background: currentColor; transition: transform var(--mnav-dur) var(--ease), opacity var(--mnav-dur) var(--ease); } .mnav-burger__bar:nth-child(1) { transform: translateY(-7px); } .mnav-burger__bar:nth-child(3) { transform: translateY(7px); } /* Hamburger → X */ .mnav-burger[aria-expanded="true"] .mnav-burger__bar:nth-child(1) { transform: rotate(45deg); } .mnav-burger[aria-expanded="true"] .mnav-burger__bar:nth-child(2) { opacity: 0; transform: scaleX(0.4); } .mnav-burger[aria-expanded="true"] .mnav-burger__bar:nth-child(3) { transform: rotate(-45deg); } /* ---- Dim overlay ----------------------------------------------------- */ html.mnav-enhanced .mnav-overlay { display: block; position: fixed; inset: 0; z-index: var(--mnav-z-overlay); background: var(--mnav-overlay); opacity: 0; visibility: hidden; transition: opacity var(--mnav-dur) var(--ease), visibility var(--mnav-dur) var(--ease); } html.mnav-open .mnav-overlay { opacity: 1; visibility: visible; } /* ---- The drawer panel ------------------------------------------------ */ html.mnav-enhanced .mnav-panel { display: flex; flex-direction: column; position: fixed; inset-block: 0; inset-inline-end: 0; /* right in LTR, left in RTL */ z-index: var(--mnav-z-panel); inline-size: min(85vw, 380px); /* 85vw on phones, capped 380px on tablet */ max-block-size: 100vh; background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); box-shadow: var(--shadow-md); border-inline-start: 1px solid var(--c-border); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; visibility: hidden; /* keeps links out of the tab order when closed */ transform: translateX(100%); /* hidden just off the inline-end (right) edge — LTR */ transition: transform var(--mnav-dur) var(--ease), visibility var(--mnav-dur) var(--ease); } /* RTL: the inline-end edge is the LEFT, so hide just off the LEFT (not the right). The compound selector outranks the base rule above, so the sign actually flips — without this the panel would slide the full width of the screen from right to left. */ html[dir="rtl"].mnav-enhanced .mnav-panel { transform: translateX(-100%); } /* Open — rest at the pinned edge in both directions. Each open selector is scoped so it outranks its matching closed rule (LTR open > LTR closed; RTL open > RTL closed). */ html.mnav-open.mnav-enhanced .mnav-panel, html[dir="rtl"].mnav-open.mnav-enhanced .mnav-panel { visibility: visible; transform: translateX(0); } /* Stop the off-canvas panel from creating sideways scroll. */ html.mnav-enhanced { overflow-x: hidden; } /* ---- Panel: top section (logo + close) ------------------------------- */ .mnav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); min-block-size: var(--header-h); border-block-end: 1px solid var(--c-border); } .mnav-head__logo { display: flex; align-items: center; flex: 1 1 auto; min-inline-size: 0; text-decoration: none; } .mnav-head__logo picture, .mnav-head__logo img { display: block; inline-size: 100%; block-size: auto; max-block-size: 5.5rem; object-fit: contain; object-position: start center; } .mnav-close { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--c-ink); cursor: pointer; border-radius: var(--r-sm); transition: color var(--dur-fast) var(--ease); } .mnav-close:hover { color: var(--c-magenta); } .mnav-close:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } /* ---- Panel: navigation links ----------------------------------------- */ .mnav-nav { flex: 1 1 auto; /* pushes CTA / contact to the bottom */ padding: var(--sp-3) var(--sp-4); } .mnav-nav__list { list-style: none; margin: 0; padding: 0; } .mnav-nav__link { display: flex; align-items: center; min-block-size: 48px; /* touch target */ padding-block: var(--sp-2); padding-inline: var(--sp-4); border-inline-start: 3px solid transparent; /* active indicator rail */ border-radius: var(--mnav-radius); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 1.0625rem; color: var(--c-ink); text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .mnav-nav__link:hover, .mnav-nav__link:focus-visible { background: var(--c-lavender); color: var(--c-violet); outline: none; } .mnav-nav__link[aria-current="page"] { background: var(--c-lavender); border-inline-start-color: var(--c-violet); color: var(--c-violet); font-weight: var(--fw-semibold); } /* ---- Panel: call-to-action buttons ----------------------------------- */ .mnav-cta { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); } .mnav-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); inline-size: 100%; min-block-size: 48px; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: 1; border-radius: var(--r-pill); /* matches every other site button */ border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .mnav-btn--primary { background: var(--c-violet); color: #fff; box-shadow: var(--shadow-sm); } .mnav-btn--primary:hover { background: var(--c-magenta); color: #fff; } .mnav-btn--secondary { background: transparent; color: var(--c-violet); border-color: var(--c-violet); } .mnav-btn--secondary:hover { background: var(--c-violet); color: #fff; } .mnav-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } /* ---- Panel: contact -------------------------------------------------- */ .mnav-contact { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-6) var(--sp-4); border-block-start: 1px solid var(--c-border); } .mnav-contact__item { display: flex; align-items: center; gap: var(--sp-3); min-block-size: 44px; color: var(--c-text-muted); text-decoration: none; font-size: var(--fs-small); transition: color var(--dur-fast) var(--ease); } .mnav-contact__item:hover, .mnav-contact__item:focus-visible { color: var(--c-violet); outline: none; } .mnav-contact__item:focus-visible { text-decoration: underline; } .mnav-contact__item svg { flex: 0 0 auto; color: var(--c-magenta); } /* ---- Panel: language switcher ---------------------------------------- */ .mnav-lang { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--c-border); } .mnav-lang__opt { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); flex: 1 1 0; min-block-size: 44px; padding-inline: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--mnav-radius); color: var(--c-ink); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-medium); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .mnav-lang__opt:hover { border-color: var(--c-violet); color: var(--c-violet); } .mnav-lang__opt:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .mnav-lang__opt[aria-current="true"] { border-color: var(--c-violet); background: var(--c-lavender); color: var(--c-violet); font-weight: var(--fw-semibold); } .mnav-lang__opt .flag { display: inline-block; inline-size: 24px; block-size: 17px; flex: none; border-radius: 3px; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .mnav-lang__opt .flag--uk { background-image: url("../assets/img/flags/en.svg"); } .mnav-lang__opt .flag--ae { background-image: url("../assets/img/flags/ae.svg"); } /* ---- Body scroll lock ------------------------------------------------ */ html.mnav-locked, html.mnav-locked body { overflow: hidden; } } /* -------------------------------------------------------------------------- Reduced motion — honour the user preference site-wide -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mnav-panel, .mnav-overlay, .mnav-burger__bar, .mnav-nav__link, .mnav-btn, .mnav-contact__item, .mnav-lang__opt { transition: none !important; } }