/* * Light / dark tokens for the whole site. * * Light is the default; dark restores the palette the site shipped with. An * inline script in resolves the visitor's choice (or their OS setting) * to data-mena-theme="light"|"dark" on before first paint, so there is * never a flash of the wrong theme and CSS only needs two blocks rather than a * media query as well. * * Two families live here: * --wp--preset--color--* overrides theme.json's palette, which every block * style already references, so core blocks follow the * switch without touching a single template. * --mena-* semantic tokens for this site's own CSS. * * :root[data-mena-theme="dark"] (0,1,1) outbids theme.json's :root (0,1,0), so * the override wins regardless of stylesheet order. */ :root { /* --- light (default) --- */ --wp--preset--color--base: #ffffff; --wp--preset--color--contrast: #5c6672; --wp--preset--color--primary: #14161a; /* * A notch lighter than it was (#c08a00). * * This sheet, not theme.json, is what the browser actually reads — the * preset is redeclared here so the token set is one file rather than two * sources that can disagree. theme.json carries the same value so the * editor shows what the front end will. */ --wp--preset--color--secondary: #c68f00; --wp--preset--color--tertiary: #e6e6ec; --mena-bg: #ffffff; --mena-surface: #f7f7f9; --mena-surface-2: #eff0f4; --mena-elevated: #ffffff; --mena-text: #1a1a1a; --mena-text-2: #3f4650; --mena-muted: #8898aa; --mena-border: #e6e6ec; --mena-border-soft: #f0f0f4; --mena-faint: #c1c7d2; --mena-control-bg: #ffffff; --mena-control-border: #cfd4dd; /* * One gold for surfaces, a darker one for text. * * #ffd014 on white is about 1.6:1 — hard to read at body size and nowhere * near WCAG AA. That was tolerable while gold only ever appeared as large * bold headings on a filled chip, and stopped being tolerable the moment it * had to carry hashtags, mentions and "show this thread" at reading size on * a white page. * * So --mena-gold stays the brand fill and --mena-gold-text becomes the * theme's own secondary, which is that gold taken down to something legible * against white. The dark theme keeps the bright one: on #131415 it is the * light half of the pair and needs no help. */ --mena-gold: #ffd014; --mena-gold-text: var(--wp--preset--color--secondary, #c68f00); /* Story ring: brand gold running into orange. Identical in both themes — orange is one of the few hues that holds its own against white AND against #131415, which is what an unwatched-story signal has to do. */ --mena-ring-a: #ffd014; --mena-ring-b: #ff9500; --mena-ring-c: #ff6a00; --mena-on-gold: #1a1a1a; --mena-accent: #0b7a55; --mena-rose: #f5365c; --mena-green: #17bf63; --mena-pink: #e8175d; --mena-pink-deep: #b01046; --mena-warn: #d1620a; --mena-info-bg: #e3edf2; --mena-info-text: #325867; --mena-scrim: rgba(20, 22, 26, .45); --mena-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06); --mena-shadow-lg: 0 12px 48px rgba(16, 24, 40, .18); /* * Placeholder tints. Translucent, not solid, so one pair works on the page, * on a card and inside a dialog — three different backgrounds. The surface * tokens cannot do this job: in dark, surface and surface-2 are #1a1a1a and * #262626 and a dialog's own background is surface, so a placeholder drawn * from them is invisible on the very thing it sits in. */ --mena-skel-a: rgba(0, 0, 0, .055); --mena-skel-b: rgba(0, 0, 0, .105); color-scheme: light; } :root[data-mena-theme="dark"] { /* --- dark: the palette the site shipped with --- */ --wp--preset--color--base: #131415; --wp--preset--color--contrast: #929292; --wp--preset--color--primary: #ffffff; --wp--preset--color--secondary: #6becae; --wp--preset--color--tertiary: #404040; --mena-skel-a: rgba(255, 255, 255, .06); --mena-skel-b: rgba(255, 255, 255, .14); --mena-bg: #131415; --mena-surface: #1a1a1a; --mena-surface-2: #262626; --mena-elevated: #1a1a1a; --mena-text: #f2f2f2; --mena-text-2: #d3d3d3; --mena-muted: #929292; --mena-border: #3c3c3c; --mena-border-soft: #282828; --mena-faint: #373737; --mena-control-bg: #222222; --mena-control-border: #555555; --mena-gold: #ffd014; --mena-gold-text: #ffd014; /* Story ring: brand gold running into orange. Identical in both themes — orange is one of the few hues that holds its own against white AND against #131415, which is what an unwatched-story signal has to do. */ --mena-ring-a: #ffd014; --mena-ring-b: #ff9500; --mena-ring-c: #ff6a00; --mena-on-gold: #1a1a1a; --mena-accent: #6becae; --mena-rose: #f5365c; --mena-green: #17bf63; --mena-pink: #e8175d; --mena-pink-deep: #b01046; --mena-warn: #fcb900; --mena-info-bg: #325867; --mena-info-text: #c9c9c9; --mena-scrim: rgba(0, 0, 0, .7); --mena-shadow: 0 4px 15px rgba(0, 0, 0, .35); --mena-shadow-lg: 0 12px 48px rgba(0, 0, 0, .55); color-scheme: dark; } /* ------------------------------------------------------------------- logos */ /* * The wordmark exists in two colourways and both are printed; CSS picks. Doing * it this way means the switch needs no JavaScript and no second request. */ .mena-logo--dark { display: none; } :root[data-mena-theme="dark"] .mena-logo--light { display: none; } :root[data-mena-theme="dark"] .mena-logo--dark { display: inline-block; } /* * The Customizer's site logo is a single uploaded file we can't duplicate, so * the white original is inverted for light mode instead. Flat white artwork * inverts cleanly to flat black; a colour logo would not, which is why this is * scoped to the known white file via the class the plugin adds. */ :root:not([data-mena-theme="dark"]) .custom-logo.mena-logo-invert { filter: invert(1); } /* ------------------------------------------------------------------ toggle */ .mena-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--mena-border); border-radius: 50%; background: var(--mena-surface); color: var(--mena-text-2); cursor: pointer; font-size: 13px; line-height: 1; transition: background .2s ease, color .2s ease, border-color .2s ease; } .mena-theme-toggle:hover { color: var(--mena-gold-text); border-color: var(--mena-gold-text); } .mena-theme-toggle .bi { line-height: 1; } /* Only the icon for the theme you'd switch *to* is shown. */ .mena-theme-toggle .mena-theme-toggle__moon { display: inline-block; } .mena-theme-toggle .mena-theme-toggle__sun { display: none; } :root[data-mena-theme="dark"] .mena-theme-toggle .mena-theme-toggle__moon { display: none; } :root[data-mena-theme="dark"] .mena-theme-toggle .mena-theme-toggle__sun { display: inline-block; } /* The discussion shortcut wears the same chip as the toggle and the bell. */ .mena-nav-timeline { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--mena-border); border-radius: 50%; background: var(--mena-surface); color: var(--mena-text-2); font-size: 13px; line-height: 1; text-decoration: none !important; transition: background .2s ease, color .2s ease, border-color .2s ease; } .mena-nav-timeline:hover { color: var(--mena-gold-text); border-color: var(--mena-gold-text); } /* * The menaSpace mark inside that chip, painted rather than placed. * * The chip's colour is a moving target — muted at rest, gold on hover, and a * different muted in the other theme — and a picture cannot follow it. The * artwork is a transparent PNG, so it is used as a mask: the box is filled * with currentColor and the file only says which parts of it to keep. One * file, every state, no recoloured copies to keep in step with the palette. */ .mena-nav-timeline__mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; } /* * The mask itself is printed by PHP, next to the address it needs. * * Not here, and that is the fallback: a rule in this file would apply whether * or not the file it points at exists, and `mask-image: none` over a filled box * paints a solid square where the mark should be. Shipped with the URL, the * rules simply are not there when the icon is not. */ /* Fallback position when the theme's navbar isn't on the page. */ .mena-theme-toggle--floating { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 9999; width: 40px; height: 40px; font-size: 16px; background: var(--mena-elevated); box-shadow: var(--mena-shadow); } @media (prefers-reduced-motion: reduce) { .mena-theme-toggle { transition: none; } } /* ------------------------------------------------------------- nav bar */ /* * The theme's bar had one child on this side and so needed no gap. Now it holds * the theme toggle, the bell and the search box. */ .custom-top-nav .top-nav-left { display: flex; align-items: center; gap: 10px; } /* -------------------------------------------------------- notifications */ /* * The bell and its panel live in the site navbar, so their styling ships with * the tokens rather than with the feed bundle — the navbar is on every page, * the timeline is not. */ .mena-bell-wrap { position: relative; display: inline-flex; align-items: center; } .mena-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--mena-border); border-radius: 50%; background: var(--mena-surface); color: var(--mena-text-2); cursor: pointer; font-size: 13px; line-height: 1; transition: background .2s ease, color .2s ease, border-color .2s ease; } .mena-bell:hover, .mena-bell.is-unread { color: var(--mena-gold-text); border-color: var(--mena-gold-text); } /* Always this red, in both themes — HomeHeader.kt's BadgeRed. */ .mena-bell__badge { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; background: #e0245e; color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--mena-elevated); } /* * display:flex below would otherwise beat the browser's own [hidden] rule — a * bare attribute selector scores lower than a class — so the panel rendered * open on every page load. Restated here at matching specificity. */ .mena-notif[hidden] { display: none !important; } .mena-notif { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 1000; opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top center; transition: opacity .16s ease, transform .18s cubic-bezier(.34, 1.25, .64, 1); pointer-events: none; width: min(340px, 92vw); max-height: min(70vh, 460px); display: flex; flex-direction: column; background: var(--mena-elevated); border: 1px solid var(--mena-border); border-radius: 14px; box-shadow: var(--mena-shadow-lg); overflow: hidden; color: var(--mena-text); font-family: inherit; text-align: start; } .mena-notif.is-open { opacity: 1; transform: none; pointer-events: auto; } .mena-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--mena-border); background: var(--mena-surface); font-size: .82rem; } .mena-notif__clear { border: 0; background: transparent; color: var(--mena-rose); font-family: inherit; font-size: .7rem; cursor: pointer; padding: 2px 4px; } .mena-notif__list { overflow-y: auto; } .mena-notif__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none !important; color: inherit; border-bottom: 1px solid var(--mena-border); } .mena-notif__row:last-child { border-bottom: 0; } .mena-notif__row:hover { background: var(--mena-surface); } /* Unread carries a wash of the brand colour, as the app's list does. */ .mena-notif__row.is-unread { background: color-mix(in srgb, var(--mena-gold) 9%, transparent); } .mena-notif__avatar { position: relative; flex: none; width: 40px; height: 40px; } .mena-notif__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--mena-surface-2); display: block; } /* The marker says what happened before you read a word of it. */ .mena-notif__mark { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 17px; height: 17px; border-radius: 50%; background: var(--mena-gold); color: #fff; display: grid; place-items: center; font-size: 8px; box-shadow: 0 0 0 2px var(--mena-elevated); } .mena-notif__mark.is-like { background: #f5365c; } .mena-notif__mark i { color: #fff; } .mena-notif__body { min-width: 0; display: block; } .mena-notif__what, .mena-notif__preview, .mena-notif__when { display: block; } .mena-notif__what { font-size: .78rem; line-height: 1.6; } .mena-notif__what strong { font-weight: 600; } .mena-notif__preview { font-size: .7rem; color: var(--mena-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mena-notif__when { font-size: .64rem; color: var(--mena-muted); } .mena-notif__empty { margin: 0; padding: 34px 16px; text-align: center; color: var(--mena-muted); font-size: .78rem; } /* skeleton */ .mena-notif__row--skel .mena-notif__avatar, .mena-notif__row--skel .mena-notif__lines i { background: linear-gradient(90deg, var(--mena-skel-a) 25%, var(--mena-skel-b) 37%, var(--mena-skel-a) 63%); background-size: 400% 100%; animation: mena-shimmer 1.4s ease infinite; border-radius: 999px; } .mena-notif__row--skel .mena-notif__avatar { border-radius: 50%; } .mena-notif__lines { flex: 1; display: block; } .mena-notif__lines i { display: block; height: 9px; margin-bottom: 6px; } .mena-notif__lines i:first-child { width: 70%; } .mena-notif__lines i:last-child { width: 40%; margin-bottom: 0; } @keyframes mena-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .mena-bell-wrap--floating { position: fixed; inset-block-end: 18px; inset-inline-start: 66px; z-index: 9999; } @media (prefers-reduced-motion: reduce) { .mena-bell, .mena-notif { transition: none; } .mena-notif__row--skel .mena-notif__avatar, .mena-notif__row--skel .mena-notif__lines i { animation: none; } } /* =============================================================== DECISION === A ruling on the account, read in full. A modal rather than a page: it is a short, self-contained document that a member reads once and closes, and sending them to a screen of their own for it would mean building one that has nothing else on it. It is also the one notification with nowhere else to go — there is no post behind it. */ .mena-decision { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .18s ease; } .mena-decision.is-open { opacity: 1; } .mena-decision__box { width: min(460px, 100%); max-height: min(80vh, 620px); display: flex; flex-direction: column; border: 1px solid var(--mena-border); border-radius: 16px; background: var(--mena-elevated); box-shadow: 0 24px 60px rgba(0, 0, 0, .32); transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.34, 1.25, .64, 1); } .mena-decision.is-open .mena-decision__box { transform: none; } .mena-decision__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--mena-border); font-size: 14px; color: var(--mena-text); } .mena-decision__x { border: 0; background: transparent; color: var(--mena-muted); cursor: pointer; font-size: 13px; padding: 2px; } .mena-decision__x:hover { color: var(--mena-text); } .mena-decision__body { padding: 14px 16px 18px; overflow-y: auto; display: grid; gap: 12px; font-size: 13px; line-height: 1.9; color: var(--mena-text); } /* The sentence as it was sent, which is what the reader recognises. */ .mena-decision__lead { margin: 0; font-weight: 600; } .mena-decision__wait, .mena-decision__clear { margin: 0; color: var(--mena-muted); } /* One restriction: what it is, what it stops, when it lifts, and why. */ .mena-decision__item { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--mena-border); border-radius: 12px; background: var(--mena-surface-2); font-size: 12.5px; } .mena-decision__item b { font-size: 13px; color: var(--mena-text); } .mena-decision__item span { color: var(--mena-muted); } .mena-decision__item.is-hard { border-color: color-mix(in srgb, #f5365c 45%, var(--mena-border)); background: color-mix(in srgb, #f5365c 10%, transparent); } .mena-decision__until { font-variant-numeric: tabular-nums; } .mena-decision__why { color: var(--mena-text) !important; } .mena-decision__appeal { margin: 0; font-size: 12px; color: var(--mena-muted); } /* The page behind must not scroll under an open ruling. */ body.mena-decision-open { overflow: hidden; } /* A notification with no address of its own still has to look pressable. */ .mena-notif__row.is-decision { cursor: pointer; } .mena-notif__row.is-decision:focus-visible { outline: 2px solid var(--mena-gold); outline-offset: -2px; } .mena-toast--decision { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .mena-decision, .mena-decision__box { transition: none; } } /* ================================================================= TOASTS === The corner card that announces one notification as it happens, then leaves. Fixed to the viewport rather than hung off the bell: the bell scrolls away with the header on the pages that have a compact masthead, and a notice you have to scroll up to see is not a notice. The start side is the corner furthest from the reading column in both directions, which on an RTL page means the bottom right. */ .mena-toasts { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; /* The stack itself catches nothing; each card does its own catching. */ pointer-events: none; width: min(340px, calc(100vw - 32px)); } .mena-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 10px; border: 1px solid var(--mena-border); border-radius: 14px; background: var(--mena-elevated); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); color: inherit; text-decoration: none; font-size: .78rem; line-height: 1.7; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .18s ease, transform .22s cubic-bezier(.34, 1.25, .64, 1); } .mena-toast.is-in { opacity: 1; transform: none; } a.mena-toast:hover { border-color: var(--mena-gold); } .mena-toast__body { min-width: 0; flex: 1 1 auto; } .mena-toast__what, .mena-toast__preview { display: block; } .mena-toast__what { color: var(--mena-text); } .mena-toast__what strong { font-weight: 700; } /* Two lines of what was said, then an ellipsis — the rest is behind the tap. */ .mena-toast__preview { margin-top: 2px; color: var(--mena-muted); font-size: .74rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mena-toast__x { flex: none; border: 0; background: transparent; color: var(--mena-muted); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; } .mena-toast__x:hover { color: var(--mena-text); } /* On a phone it spans the width, above the browser's own bottom furniture. */ @media (max-width: 600px) { .mena-toasts { inset-inline: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .mena-toast { transition: none; } } /* ============================================================ INSTANT NAV === The bar mena-nav.js runs across the top while the next page is fetched. It is the only thing a navigation changes about the outgoing page: the content the visitor is reading stays exactly as it is until the new page is ready. It lives in this sheet rather than the feed one because navigation happens on every page, not only where the feed renders. */ .mena-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; /* Above the sticky navbar and every overlay this site draws. */ z-index: 200000; pointer-events: none; opacity: 0; transition: opacity .15s ease; } .mena-progress.is-on { opacity: 1; } .mena-progress__fill { display: block; height: 100%; width: 0; /* Grows from the reading edge, so in RTL it runs right-to-left. */ margin-inline-start: 0; background: linear-gradient(90deg, var(--mena-ring-c), var(--mena-ring-b), var(--mena-gold)); box-shadow: 0 0 8px rgba(255, 208, 20, .55); border-start-end-radius: 3px; border-end-end-radius: 3px; } @media (prefers-reduced-motion: reduce) { .mena-progress { transition: none; } .mena-progress__fill { box-shadow: none; } } /* ============================================== the top bar, on a phone */ /* * The bar holds nine things on a 375px screen: four icon buttons, a search * box, three text links and the two rules between them. Below they become one * row of identical chips — the icons each link already carries are what the * labels were saying, and a bar of evenly sized round buttons reads as a * toolbar instead of as a paragraph that ran out of room. */ @media (max-width: 600px) { .custom-top-nav { padding: 6px 12px; } .custom-top-nav .top-nav-container { gap: 10px; } .custom-top-nav .top-nav-left, .custom-top-nav .top-nav-right { gap: 6px; } /* Nothing left to separate: the chips are their own separation. */ .custom-top-nav .top-nav-right .sep { display: none; } .custom-top-nav .top-nav-right .nav-link, .custom-top-nav .search-toggle-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--mena-border); border-radius: 50%; background: var(--mena-surface); color: var(--mena-text-2); line-height: 1; /* * The label goes, not the element: it stays in the accessibility tree * and in the markup, and a wider screen gets it back. */ font-size: 0; text-decoration: none; } .custom-top-nav .top-nav-right .nav-link .bi, .custom-top-nav .search-toggle-btn .bi { font-size: 13px; } /* The three that arrive from script are already this chip; matched here so one line changes all seven if the size ever does. */ .custom-top-nav .mena-bell, .custom-top-nav .mena-theme-toggle, .custom-top-nav .mena-nav-timeline { width: 30px; height: 30px; } .custom-top-nav .top-nav-right .nav-link:hover, .custom-top-nav .search-toggle-btn:hover { color: var(--mena-gold-text); border-color: var(--mena-gold-text); } } /* * The notifications panel, anchored to something that can hold it. * * It hangs off .mena-bell-wrap, and the bell sits at the far edge of the bar: * 340px of panel starting from there ran off the side of the screen, which * gave the whole document a horizontal scrollbar and shunted the page sideways * the moment the bell was tapped. Taking the wrapper out of the positioning * chain hands the panel to the navbar instead — which is the full width of the * screen — where "both edges, zero" is a width that cannot overflow. * * Only the wrapper's position changes. The bell's badge is positioned against * the button itself, not the wrapper, so it stays where it was. */ @media (max-width: 768px) { .custom-top-nav .mena-bell-wrap { position: static; } .custom-top-nav .mena-notif { inset-inline: 0; width: auto; max-width: none; } } /* ========================================== the header menu's button */ /* * Off above the breakpoint: there the menu is the menu, sitting in the header * exactly as WordPress printed it, and this element does not exist as far as * the page is concerned. See mena-menu.js for why the button is added by * script rather than by the navigation block's own overlay setting. */ .mena-menu-toggle { display: none; } /* * Core's own menu button and its wrappers, once ours has taken over. * * A navigation block whose overlay setting is on prints its own open button * and hides the list inside three nested divs. mena-menu.js lifts the list * back out and marks both — see flatten() there for why a header can arrive * in either shape. All that is left for the stylesheet is to stop drawing the * parts that now do nothing. * * Both rules hang off .mena-menu-ready, which that script adds only after it * has put its own button in place. A page where it failed to run keeps core's * button and core's overlay: not the design, but a menu that opens, which is * the one thing a header must never lose. */ /* * Carrying the header and the nav in front of the class costs four characters * and buys the specificity these need. Core hides the emptied container below * 600px on its own, but shows it again above that with a three-class selector * of its own — and an empty block that still lays out is a gap under the bar. */ header.wp-block-template-part nav.wp-block-navigation.mena-menu-ready .wp-block-navigation__responsive-container-open, header.wp-block-template-part nav.wp-block-navigation.mena-menu-ready .wp-block-navigation__responsive-container-close, header.wp-block-template-part nav.wp-block-navigation.mena-menu-ready .mena-menu-shed { display: none; } .mena-menu-toggle__bars { display: block; position: relative; width: 20px; height: 14px; } .mena-menu-toggle__bars i { position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .16s ease, top .22s ease; } .mena-menu-toggle__bars i:nth-child(1) { top: 0; } .mena-menu-toggle__bars i:nth-child(2) { top: 6px; } .mena-menu-toggle__bars i:nth-child(3) { top: 12px; } /* Open: the outer bars meet in the middle and cross, the middle one goes. */ .is-menu-open .mena-menu-toggle__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); } .is-menu-open .mena-menu-toggle__bars i:nth-child(2) { opacity: 0; } .is-menu-open .mena-menu-toggle__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .mena-menu-toggle__bars i { transition: none; } } @media (max-width: 900px) { header.wp-block-template-part .mena-menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } header.wp-block-template-part .mena-menu-toggle:hover, header.wp-block-template-part .mena-menu-toggle[aria-expanded="true"] { background: var(--mena-surface); } /* * The list itself: hidden until asked for, and then a panel across the foot * of the header rather than something wedged into the row. * * In flow it would have to be the width of whatever box the nav happens to * occupy, and the two headers on this site disagree about that — on the * front page the nav is a centred line of its own, on an article it shares * a row with the wordmark. Hung off the header, the panel is the width of * the header in both, the wordmark stays where it was, and opening the menu * covers the page instead of shoving it down the screen. */ header.wp-block-template-part { position: relative; z-index: 40; } /* * Present but not shown, rather than display:none — there is nothing to * animate between "no box" and "a box", and the panel opening is the one * moment this menu has to say what it is doing. visibility rather than * opacity alone keeps it out of the tab order and off the screen reader * while it is closed, and is held until the fade finishes on the way out. */ header.wp-block-template-part nav.wp-block-navigation > .wp-block-navigation__container { opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .16s ease, transform .24s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .24s; } /* * Core gives the nav position:relative for its submenus, which would make * the panel below the width of the nav — and on an article header the nav * is only the part of the row the wordmark left over. Stood down while the * menu is open, so the panel measures itself against the header's own * padded group instead. This menu has no submenus to strand. */ header.wp-block-template-part nav.wp-block-navigation.is-menu-open { position: static; } /* * The panel's box, open or closed. Only the four properties above change * when it opens, so there is something for the transition to interpolate. * * The margin has to be beaten rather than merely set: the button is now the * nav's first child, so WordPress's own "+ *" block-gap rule sees the list * as a following sibling and puts 14px on top of it. Fourteen pixels was * exactly enough to let the calendar card's rounded top edge show above the * panel, which read as the menu not quite covering the page. */ header.wp-block-template-part nav.wp-block-navigation > .wp-block-navigation__container { display: flex; position: absolute; top: 100%; /* * Physical, not inset-inline: the panel is the full width of the bar in * either script, so there is nothing for a logical pair to decide — and * a browser that does not know the shorthand would drop both edges and * leave the panel at its static position, tucked inside the nav. */ left: 0; right: 0; z-index: 50; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch; width: auto; gap: 0 !important; /* * Zero, and it has to be said out loud: the button is the nav's first * child, so WordPress's own "+ *" block-gap rule sees the list as a * following sibling and puts 14px on top of it — which is what used to * push the panel off the bar's bottom rule and let the page show * between the two. At zero the panel's own top border lands exactly on * the header's bottom border: one line, not two, and no gap. */ margin: 0 !important; padding: 4px 0; background: var(--mena-elevated); border-top: 1px solid var(--mena-border); border-bottom: 1px solid var(--mena-border); box-shadow: var(--mena-shadow); /* A menu longer than the screen scrolls rather than running off it. */ max-height: 70vh; overflow: hidden auto !important; } header.wp-block-template-part nav.wp-block-navigation.is-menu-open > .wp-block-navigation__container { opacity: 1; visibility: visible; transform: none; pointer-events: auto; /* No delay on the way in: the panel must be visible before it moves. */ transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { header.wp-block-template-part nav.wp-block-navigation > .wp-block-navigation__container { transform: none; transition: opacity .01s linear, visibility 0s linear .01s; } } header.wp-block-template-part nav.wp-block-navigation.is-menu-open .wp-block-navigation-item { width: 100%; } /* * A row per link, the full width of the header: on a phone the target is * the row, not the four words in the middle of it. */ header.wp-block-template-part nav.wp-block-navigation.is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding-inline: 6px; } header.wp-block-template-part nav.wp-block-navigation.is-menu-open .wp-block-navigation-item + .wp-block-navigation-item { border-top: 1px solid var(--mena-border-soft, var(--mena-border)); } /* * The theme's diamond between items is a separator for a row of links. In a * column it is a mark hanging off the side of each one, and the rules above * are already doing its job. */ header.wp-block-template-part nav.wp-block-navigation.is-menu-open li.wp-block-navigation-item::before { content: none; } } /* ============================= the inner-page bar, on a phone */ /* * Every selector below is prefixed with `body`, which is doing real work: the * rules it has to overrule set the same properties, with !important, at the * same specificity — and they live in the feed stylesheet, which loads after * this one and would win every tie. One extra element selector settles it * wherever the two sheets happen to be loaded. */ /* * Back, wordmark, menu — the arrangement every app on the phone uses, and the * one the reader's thumb already knows. Off a phone the bar keeps the shape it * has: the wordmark at the reading edge with the full menu beside it. * * The wordmark centres by leaving the flow. Centring it any other way means * making the two controls beside it exactly the same width, which they are not * and should not have to be — a back arrow and a menu button are different * shapes. Out of flow it is centred on the bar rather than on whatever the * controls left over, which is what "centred" has to mean here. */ .mena-back { display: none; } @media (max-width: 900px) { body:is(.mena-article, .mena-innerpage, .mena-postpage) header.wp-block-template-part .wp-block-group:has(> .wp-block-site-logo) { justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; min-height: 44px; } /* * The wordmark centres by taking the room between the two controls, not by * leaving the flow. * * Absolute positioning was the obvious way and the wrong one: it needs a * positioned ancestor, the nearest candidate is this row, and making the * row positioned quietly steals the menu panel from the header — the panel * is inside the nav inside this row, so it stopped being the width of the * screen and became the width of the text column. Since the back arrow and * the menu button are the same 40px, a middle that simply grows to fill is * centred anyway, and nothing has to be taken out of flow to do it. */ body:is(.mena-article, .mena-innerpage, .mena-postpage) header.wp-block-template-part .wp-block-group > .wp-block-site-logo { flex: 1 1 auto !important; display: flex !important; align-items: center; justify-content: center; min-width: 0; margin: 0 !important; padding: 0 !important; } /* Smaller than the 35px a desktop bar carries — the wordmark is a way home here, not the masthead — but not so small it stops being legible. */ body:is(.mena-article, .mena-innerpage, .mena-postpage) header.wp-block-template-part .wp-block-site-logo img, body:is(.mena-article, .mena-innerpage, .mena-postpage) header.wp-block-template-part .mena-wordmark__img, body:is(.mena-article, .mena-innerpage, .mena-postpage) header.wp-block-template-part .header-logo-mena { height: 28px !important; width: auto !important; } /* The block that holds the menu shrinks to the button inside it, so space-between has two real ends to push apart. */ body:is(.mena-article, .mena-innerpage, .mena-postpage) header.wp-block-template-part .wp-block-group:has(> .wp-block-site-logo) > .wp-block-group { flex: none !important; width: auto !important; margin: 0 !important; } body:is(.mena-article, .mena-innerpage, .mena-postpage) .mena-back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 17px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body:is(.mena-article, .mena-innerpage, .mena-postpage) .mena-back:hover { background: var(--mena-surface); } /* * Nothing between the bar and the conversation. * * The gap is WordPress's block gap, applied by .wp-site-blocks to whatever * follows the header — sensible for a page whose content starts with a * headline, wrong here, where what follows is a post whose own rows already * carry 12px of padding. Two paddings and a margin stacked up read as the * post having come loose from the bar above it. */ body.mena-postpage .wp-site-blocks > header.wp-block-template-part + * { margin-block-start: 0 !important; } }