/* * 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; --wp--preset--color--secondary: #c08a00; --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, everywhere, in both themes — the brand colour, not a darkened * stand-in for it. * * Worth knowing rather than rediscovering: #ffd014 on white is about 1.6:1, * so anything set in it at body size is hard to read and fails WCAG AA. That * is what --mena-gold-text used to hedge against. It is now the same value, * so the places that read it — poll titles, section headings, accents — must * stay large and bold, and gold must never be used for running text. */ --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: #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); } /* 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; } } /* ============================================================ 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; } }