/* New Macau site styles (GeneratePress child). One rule per thing: change a value where it is, don't append overrides. */ @font-face { font-family: "Avenir Next"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/AvenirNextLTPro-Regular.woff2") format("woff2"); } @font-face { font-family: "Avenir Next"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/AvenirNextLTPro-Bold.woff2") format("woff2"); } @font-face { font-family: "Avenir Next"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/AvenirNextLTPro-It.woff2") format("woff2"); } :root { --nm-blue: #00709e; --nm-blue-dark: #005a80; --nm-pink: #f49db1; --nm-pink-soft: #fde4ea; --nm-line: #c7dce7; --nm-ink: #1f2d36; --nm-muted: #5d6f7a; --nm-bg: #e5f2f7; --nm-head-bg: #f4f9fb; /* the header panel's light blue; also the sticky bar, flipbook backdrop, panels */ --nm-frame: 2.8px solid #06709c; --nm-col: 1146px; /* the site column: header, every page box, footer, sticky bar — all centred on it */ --nm-display: "Avenir Next", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* The one gap between frames: page edges, header to content, between sections, content to footer. */ --nm-gap: 22px; } @media (max-width: 760px) { :root { --nm-gap: 16px; --nm-gutter: 10px; } } /* The site column: every top-level box is the same width, centred, with the same side gutter on phones. */ :is(.nmh, .nmf, .nmf-mark, .nma, .nml, .nmhm, .nmp, .nmfb-wrap, .nmt-archive) { box-sizing: border-box; width: 100%; max-width: var(--nm-col); margin-left: auto; margin-right: auto; } /* full width even inside the theme's flex row (else a short page, like the 404, shrinks to its text) */ :is(.nmh, .nmf, .nmf-mark, .nma, .nml, .nmhm, .nmp, .nmt-archive) { padding-left: var(--nm-gutter, 0px); padding-right: var(--nm-gutter, 0px); } .nmfb-wrap { width: calc(100% - 2 * var(--nm-gutter, 0px)); } /* framed itself, so its gutter comes from its width (it sits in a flex row: width: auto would grow to the book) */ body { background: var(--nm-bg); color: var(--nm-ink); } /* Every bit of text in the served Avenir Next, not the device's own font (GeneratePress defaults to the system font). Chinese characters, which Avenir Next lacks, come from the served Noto Sans TC (assets/nm-font-tc.css). */ body, button, input, select, textarea { font-family: var(--nm-display); } .site.grid-container { max-width: none; background: transparent; } .site-content { padding: 0; } /* GeneratePress fades color + background on every link/button; our chips and tiles swap text and background colors, so mid-fade the text matches its background and blinks. Color swaps are instant site-wide; the few deliberate motions (photo zoom, frame color, growing bars) keep their own transitions. */ a, button, input { transition: none; } /* Screenshot helper (?nm_scrollto=, nm-site.js): animations off. */ .nm-no-anim *, .nm-no-anim *::before { animation: none !important; transition: none !important; } /* ---------- Header ---------- */ .nmh { box-sizing: border-box; max-width: var(--nm-col); margin: var(--nm-gap) auto; } .nmh *, .nmh *::before, .nmh *::after { box-sizing: border-box; } /* Top band in a step lighter than the page: logo 40 / search 35 / newsletter 25. */ .nmh-top { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 35fr) minmax(0, 25fr); gap: 30px; align-items: center; padding: 24px 26px 10px; background: var(--nm-head-bg); border: var(--nm-frame); border-bottom: 0; } .nmh-brand { display: flex; flex-direction: column; gap: 10px; } .nmh-logo { display: block; line-height: 0; } .nmh-logo img { display: block; width: 330px; height: auto; max-width: 100%; } .nmh-mid { display: flex; flex-direction: column; gap: 10px; align-self: center; min-width: 0; } .nmh-social { display: flex; gap: 8px; } .nmh-social a { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--nm-blue); text-decoration: none; transition: background .15s; } .nmh-social a:hover, .nmh-social a:focus-visible { background: var(--nm-pink); } .nmh-search { display: flex; margin: 0; } .nmh-ai { display: grid; place-items: center; padding: 0 9px; font: 700 12px/1 var(--nm-display); letter-spacing: .06em; color: #fff; background: var(--nm-pink); border: 2px solid var(--nm-blue); border-right: 0; } .nmh-search input[type=search] { flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0 10px; font-size: 15px; color: var(--nm-ink); background: #fff; border: 2px solid var(--nm-blue); border-right: 0; border-radius: 0; box-shadow: none; } .nmh-search input[type=search]::placeholder { color: var(--nm-muted); opacity: 1; } .nmh-search input[type=search]:focus { outline: 3px solid var(--nm-pink); outline-offset: 0; } .nmh-search button { margin: 0; padding: 0 14px; font: 700 15px/1 var(--nm-display); color: #fff; background: var(--nm-blue); border: 2px solid var(--nm-blue); border-radius: 0; cursor: pointer; } .nmh-search button:hover, .nmh-search button:focus-visible { background: var(--nm-blue-dark); border-color: var(--nm-blue-dark); } /* Newsletter card (header and footer): NEWSLETTER tiles, "Every Wednesday…" line, email box, button underneath. */ .nmh-signup { position: relative; padding: 12px 14px; background: #fff; border: var(--nm-frame); } .nmh-top > .nmh-signup { padding: 0; background: none; border: 0; } .nmh-signup-head { margin: 0 0 8px; font: 700 14px/1.3 var(--nm-display); color: var(--nm-blue); } .nmh-tiles { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; background: var(--nm-blue); line-height: 1; } .nmh-tiles span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 2px; font: 700 13px/1 var(--nm-display); color: #fff; background: var(--nm-pink); } .nmh-signup-free { margin: 0 0 7px; } @media (min-width: 1025px) { /* "Every Wednesday at 12 noon in Macau": in English the tiles, that line, the email box and the button share one width. No nowrap here: nm-site.js shrinks the line to fit on one line, and if it can't, it wraps rather than overflowing. */ .nmh-signup-head { font-size: clamp(12px, 1.04vw, 14px); overflow-wrap: anywhere; } html[lang^="en"] .nmh-signup .nmh-signup-free { display: flex; width: 100%; box-sizing: border-box; } html[lang^="en"] .nmh-signup .nmh-signup-free span { flex: 1 1 0; min-width: 0; } html[lang^="en"] .nmh-signup .nmh-signup-head { text-align: justify; text-align-last: justify; } } /* Fluent Forms #6 / #7 inside the card: New Macau colors over the form's own styles. */ .nmh-signup .fluentform, .nmh-signup .fluentform form, .nmh-signup .ff-el-group { margin: 0 !important; padding: 0 !important; background: none !important; } .nmh-signup .fluentform fieldset { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start; } .nmh-signup .fluentform fieldset > legend { position: absolute !important; } .nmh-signup .fluentform .ff-el-group:has(input[type=email]) { grid-column: 1; grid-row: 1; } .nmh-signup .fluentform .ff_submit_btn_wrapper { grid-column: 1 !important; grid-row: 2 !important; margin: 8px 0 0 !important; } .nmh-signup .fluentform input[type=email] { height: 38px !important; margin: 0 !important; padding: 0 12px !important; font-size: 15px !important; color: var(--nm-ink) !important; background: #fff !important; border: 2px solid var(--nm-blue) !important; border-radius: 0 !important; box-shadow: none !important; } .nmh-signup .fluentform input[type=email]:focus { outline: 3px solid var(--nm-pink) !important; outline-offset: 0; } .nmh-signup .fluentform .ff-el-input--label { font-size: 12px !important; } .nmh-signup .fluentform .ff-message-success { margin: 0 !important; padding: 8px 10px !important; font-size: 14px !important; color: var(--nm-ink) !important; background: var(--nm-pink-soft) !important; border: 0 !important; border-left: 4px solid var(--nm-pink) !important; box-shadow: none !important; } /* Cloudflare check never takes space in the card: it floats underneath, and disappears once passed. */ .nmh-signup .fluentform fieldset > .ff-el-group:has(.cf-turnstile) { position: absolute !important; top: calc(100% + 6px); right: 0; left: 0; z-index: 40; margin: 0 !important; grid-row: auto !important; } .nmh-signup .cf-turnstile.is-passed, .nmh-signup .ff-el-group:has(.cf-turnstile.is-passed) { display: none !important; } /* Menu bar */ .nmh-nav { display: flex; align-items: stretch; min-height: 50px; padding: 0 6px; background: var(--nm-blue); } .nmh-menu { display: flex; flex: 1; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .nmh-menu > li { position: relative; display: flex; } .nmh-menu a { display: flex; align-items: center; gap: 7px; padding: 0 16px; font: 700 15px/1.2 var(--nm-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; } .nmh-menu > li > a { position: relative; min-height: 50px; } .nmh-menu > li.menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--nm-pink); border-bottom: 2px solid var(--nm-pink); transform: rotate(45deg); } .nmh-menu > li > a::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 4px; background: var(--nm-pink); transform: scaleX(0); transition: transform .15s; } .nmh-menu > li:hover > a::before, .nmh-menu > li:focus-within > a::before, .nmh-menu > li.current-menu-item > a::before, .nmh-menu > li.current-menu-ancestor > a::before, .nmh-menu > li.current-menu-parent > a::before { transform: scaleX(1); } /* Dropdown: blue frame, pink line at the bottom. Fades in place; a short grace period before closing so the mouse can travel. */ .nmh-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 50; width: max-content; min-width: 240px; max-width: min(420px, calc(100vw - 32px)); margin: 0; padding: 6px 0; list-style: none; background: #fff; border: var(--nm-frame); border-top: 2.8px solid var(--nm-blue); border-bottom: 4px solid var(--nm-pink); box-shadow: 0 10px 24px rgba(0, 59, 84, .18); opacity: 0; visibility: hidden; transition: opacity .12s ease .18s, visibility 0s linear .3s; } .nmh-menu > li:hover > .sub-menu, .nmh-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transition: opacity .12s ease, visibility 0s; } .nmh-menu .sub-menu a { padding: 10px 16px; font-size: 13px; color: var(--nm-ink); white-space: normal; } /* the panel is as wide as its longest item (up to 420px), so items stay on one line whatever the font renders at */ .nmh-menu .sub-menu a:hover, .nmh-menu .sub-menu a:focus-visible, .nmh-menu .sub-menu .current-menu-item > a { color: var(--nm-blue); background: var(--nm-pink-soft); } /* Social icons and the language switch at the end of the menu bar. */ .nmh-nav-social { align-self: center; gap: 6px; margin: 0 10px 0 auto; } .nmh-nav-social a { width: 30px; height: 30px; background: transparent; border: 2px solid rgba(255, 255, 255, .7); } .nmh-nav-social a:hover, .nmh-nav-social a:focus-visible { background: var(--nm-pink); border-color: var(--nm-pink); } .nmh-lang { display: grid; place-items: center; align-self: center; height: 32px; margin: 0 6px 0 auto; padding: 0 12px; font: 700 14px/1 var(--nm-display); color: var(--nm-blue); background: #fff; text-decoration: none; letter-spacing: .04em; } .nmh-nav-social + .nmh-lang { margin-left: 0; } .nmh-lang:hover, .nmh-lang:focus-visible { color: #fff; background: var(--nm-pink); } /* Tagline on its own line under the logo / search / newsletter row, like the print cover. */ .nmh-taglinebar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; margin: 0; padding: 4px 26px 20px; font: 400 17px/1.35 var(--nm-display); color: var(--nm-blue); background: var(--nm-head-bg); border-left: var(--nm-frame); border-right: var(--nm-frame); } .nmh-phone-btns { display: none; } /* Desktop: the search grows to the right over the newsletter card while focused (nm-site.js sets --nmh-slide). */ @media (min-width: 1061px) { .nmh-logo img { width: 100%; } .nmh-mid { position: relative; z-index: 2; transition: margin-right .35s cubic-bezier(.2, .7, .2, 1); will-change: margin-right; } .nmh-signup { overflow: hidden; min-width: 0; } .nmh-search input[type=search]:focus { outline: none; box-shadow: inset 0 0 0 1px var(--nm-blue); } .nmh-top > .nmh-signup { transition: opacity .2s ease .3s, transform .3s ease .25s, visibility 0s linear .3s; } .nmh-top.is-searching .nmh-mid { margin-right: calc(-1 * var(--nmh-slide, 0px)); } .nmh-top.is-searching > .nmh-signup { padding: 0; border-width: 0; opacity: 0; visibility: hidden; transform: translateX(16px); transition: opacity .15s ease, transform .3s ease, visibility 0s linear .15s; } } /* Tablet: newsletter card drops under the search. */ @media (max-width: 1060px) { .nmh-top { grid-template-columns: auto minmax(0, 1fr); } .nmh-signup { grid-column: 1 / -1; } .nmh-menu a { padding: 0 11px; font-size: 13px; } .nmh-menu > li > a::before { left: 11px; right: 11px; } } /* Phone: logo + newsletter and menu buttons; search always visible; newsletter and menu open on tap. */ @media (max-width: 760px) { .nmh-top { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px 12px 8px; } .nmh-logo img { width: 170px; } .nmh-phone-btns { display: flex; gap: 6px; } .nmh-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--nm-blue); background: #fff; border: 2px solid var(--nm-blue); border-radius: 0; cursor: pointer; } .nmh-btn-menu, .nmh-btn[aria-expanded=true] { color: #fff; background: var(--nm-blue); } .nmh-mid { grid-column: 1 / -1; } .nmh-search input[type=search] { height: 42px; } .nmh-signup { display: none; } .nmh.is-signup-open .nmh-signup { display: block; } .nmh-taglinebar { gap: 2px 12px; padding: 0 12px 12px; font-size: 12px; border-bottom: var(--nm-frame); } .nmh-nav { display: none; flex-direction: column; padding: 6px 0; border: var(--nm-frame); border-top: 0; } .nmh.is-menu-open .nmh-nav { display: flex; } .nmh-menu { flex-direction: column; } .nmh-menu > li { flex-direction: column; } .nmh-menu > li > a { min-height: 44px; padding: 0 16px; } .nmh-menu > li > a::before { display: none; } .nmh-menu .sub-menu { position: static; min-width: 0; padding: 0 0 6px 14px; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; } .nmh-menu .sub-menu a { padding: 8px 16px; color: #fff; } .nmh-menu .sub-menu a:hover { color: var(--nm-blue); } .nmh-nav-social { align-self: flex-start; margin: 10px 16px 0; } .nmh-btn-lang { width: auto; min-width: 40px; padding: 0 9px; box-sizing: border-box; font: 700 14px/1 var(--nm-display); letter-spacing: .04em; text-decoration: none; } .nmh-btn-lang:hover, .nmh-btn-lang:focus-visible { color: #fff; background: var(--nm-pink); border-color: var(--nm-pink); } .nmh-nav > .nmh-lang { display: none; } /* the switch sits in the top row on phones */ } /* Sticky menu: a slim bar slides down once the header has scrolled away (every width; phones get a menu button). */ .nmh-mini { display: block; position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 100; background: var(--nm-head-bg); border-bottom: 3px solid var(--nm-blue); box-shadow: 0 4px 14px rgba(0, 59, 84, .15); transform: translateY(-110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; } .nmh.is-stuck .nmh-mini { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; } .nmh-mini-in { box-sizing: border-box; display: flex; align-items: center; gap: 16px; max-width: var(--nm-col); margin: 0 auto; padding: 6px 6px 6px 12px; } .nmh-mini-logo { flex: 0 0 auto; line-height: 0; } .nmh-mini-logo img { display: block; width: 118px; height: auto; } .nmh-mini-search { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 0; font: 700 13px/1 var(--nm-display); color: #fff; background: var(--nm-blue); text-decoration: none; } .nmh-mini-search span { display: grid; place-items: center; height: 100%; padding: 0 9px; background: var(--nm-pink); } .nmh-mini-search:hover { background: var(--nm-blue-dark); color: #fff; } .nmh-mini .nmh-mini-lang { flex: 0 0 auto; margin: 0; height: 34px; border: 2px solid var(--nm-blue); box-sizing: border-box; } .nmh-mini-toggle { display: none; } @media (min-width: 761px) { .nmh-mini-nav { flex: 1; min-width: 0; } .nmh-mini .nmh-mini-menu { flex-wrap: nowrap; } .nmh-mini .nmh-mini-menu > li > a { min-height: 40px; padding: 0 10px; font-size: 13px; color: var(--nm-blue); } .nmh-mini .nmh-mini-menu > li > a::before { left: 10px; right: 10px; } .nmh-mini .nmh-mini-menu > li.menu-item-has-children > a::after { border-color: var(--nm-pink); } .nmh-mini .nmh-mini-menu .sub-menu { top: calc(100% + 6px); } } /* Phones: logo, then AI search, language and the menu button on the right; the menu opens as a blue panel under the bar (the phone header's menu look), scrolling if it is taller than the screen. */ @media (max-width: 760px) { .nmh-mini-in { gap: 6px; padding: 6px 10px; } .nmh-mini-logo { margin-right: auto; } .nmh-mini-logo img { width: 112px; } .nmh-mini-search { height: 40px; padding: 0 12px 0 0; font-size: 12px; } .nmh-mini .nmh-mini-lang { height: 40px; } .nmh-mini-toggle { display: grid; } .nmh-mini-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 60px); overflow-y: auto; padding: 6px 0; background: var(--nm-blue); border-top: 3px solid var(--nm-blue); box-shadow: 0 10px 24px rgba(0, 59, 84, .25); } .nmh.is-mini-open .nmh-mini-nav { display: block; } } @media (min-width: 761px) and (max-width: 1100px) { .nmh-mini-logo img { width: 92px; } .nmh-mini-in { gap: 10px; } .nmh-mini .nmh-mini-menu > li > a { padding: 0 7px; font-size: 12px; letter-spacing: .03em; } .nmh-mini .nmh-mini-menu > li > a::before { left: 7px; right: 7px; } } @media (min-width: 761px) and (max-width: 960px) { .nmh-mini-logo { display: none; } .nmh-mini-in { padding-left: 4px; gap: 8px; } .nmh-mini .nmh-mini-menu > li > a { padding: 0 6px; font-size: 12px; } .nmh-mini .nmh-mini-menu > li > a::before { left: 6px; right: 6px; } .nmh-mini-search { padding: 0 10px 0 0; font-size: 0; gap: 0; } .nmh-mini-search span { font-size: 12px; margin-right: 0; } .nmh-mini-search::after { content: "⌕"; font-size: 18px; margin-left: 8px; } } @media (prefers-reduced-motion: reduce) { .nmh-mid, .nmh-top > .nmh-signup, .nmh-top.is-searching > .nmh-signup { transition: none !important; } .nmh-mini { transition: none !important; } } /* ---------- Footer ---------- */ /* The five-square mark (classification plugin) in the gap above the footer: every page frame ends with one gap, so one gap under the mark puts the same space above and below it. Same width and offset as the frames. */ .nmf-mark { box-sizing: border-box; max-width: var(--nm-col); margin: 0 auto var(--nm-gap); text-align: center; line-height: 0; } .nmf-mark .nmt-end { margin: 0; } .nmf { box-sizing: border-box; max-width: var(--nm-col); margin: 0 auto var(--nm-gap); color: var(--nm-ink); } .nmf *, .nmf *::before, .nmf *::after { box-sizing: border-box; } .nmf-main { display: grid; grid-template-columns: 330px minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; padding: 24px 22px 26px; background: #fff; border: var(--nm-frame); border-bottom: 0; } .nmf-signup { align-self: start; } .nmf-h { margin: 0 0 12px; font: 700 13px/1.2 var(--nm-display); letter-spacing: .08em; text-transform: uppercase; color: var(--nm-blue); } .nmf-h::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 8px; background: var(--nm-pink); } .nmf-links ul { margin: 0; padding: 0; list-style: none; } .nmf-links li { margin: 0 0 8px; } .nmf-links a { font: 400 15px/1.3 var(--nm-display); color: var(--nm-ink); text-decoration: none; } .nmf-links a:hover, .nmf-links a:focus-visible { color: var(--nm-blue); text-decoration: underline; text-decoration-color: var(--nm-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; } .nmf-publisher p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--nm-muted); } .nmf-publisher a { color: var(--nm-blue); text-decoration: underline; text-decoration-color: var(--nm-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; } .nmf-publisher a:not([class]):is(:hover, :focus-visible) { color: var(--nm-blue-dark); background: var(--nm-pink-soft); } .nmf-omedia { display: inline-block; margin-bottom: 10px; line-height: 0; } .nmf-omedia img { width: 120px; height: auto; } /* The six promises from the print cover's new-mac.com box, with its pink diamonds. */ .nmf-promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 0; padding: 14px 20px; list-style: none; background: #fff; border: var(--nm-frame); border-top: 1px solid var(--nm-line); border-bottom: 0; } .nmf-promise li { margin: 0; font: 400 15px/1.3 var(--nm-display); letter-spacing: .02em; color: var(--nm-blue); } .nmf-promise li + li::before { content: "\2666"; margin: 0 14px; color: var(--nm-pink); font-size: 13px; } .nmf-bar { display: flex; align-items: center; gap: 16px; min-height: 50px; padding: 8px 12px 8px 22px; color: #fff; background: var(--nm-blue); } .nmf-copy { flex: 1; margin: 0; font: 400 13px/1.3 var(--nm-display); } .nmf-social a { background: transparent; border: 2px solid rgba(255, 255, 255, .7); } .nmf .nmh-lang { margin: 0; } /* Footer newsletter card: same width and text size as the header's, so its tiles aren't chunkier. */ @media (min-width: 1025px) { .nmf .nmf-signup { box-sizing: content-box; width: 256px; justify-self: start; } } @media (max-width: 1060px) { .nmf-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nmf-signup { grid-column: 1 / -1; } } @media (max-width: 760px) { .nmf-main { grid-template-columns: 1fr; gap: 22px; padding: 18px 14px; } .nmf-signup { display: block; } .nmf-bar { flex-wrap: wrap; padding: 12px 14px; } .nmf-copy { flex-basis: 100%; } } @media (max-width: 600px) { .nmf-promise li { font-size: 14px; } .nmf-promise li + li::before { margin: 0 9px; } } /* ---------- Article ---------- */ .nma { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--nm-gap); max-width: var(--nm-col); margin: 0 auto var(--nm-gap); } .nma *, .nma *::before, .nma *::after { box-sizing: border-box; } .nma-main { min-width: 0; padding: 30px 34px 34px; background: #fff; border: var(--nm-frame); } /* Category label, like the print volumes: thin outline, spaced capitals; in the category's print color when it has one (term meta nm_color). */ .nma-cat { display: inline-block; margin: 0 0 16px; padding: 7px 18px; font: 400 14px/1.2 var(--nm-display); letter-spacing: .18em; text-transform: uppercase; color: var(--nm-blue); background: #fff; border: 2px solid var(--nm-blue); text-decoration: none; } .nma-cat:hover, .nma-cat:focus-visible { color: #fff; background: var(--nm-blue); } .nma-cat:lang(zh-HK), [lang^="zh"] .nma-cat { letter-spacing: .3em; } .nma-cat[style*="--nm-cat"] { color: color-mix(in srgb, var(--nm-cat) 80%, #000); border-color: var(--nm-cat); box-shadow: inset 6px 0 0 var(--nm-cat); padding-left: 22px; } .nma-cat[style*="--nm-cat"]:hover, .nma-cat[style*="--nm-cat"]:focus-visible { color: #fff; background: var(--nm-cat); } .nma-title { margin: 0 0 10px; font: 700 clamp(27px, 3.4vw, 38px)/1.22 var(--nm-display); color: var(--nm-blue); text-wrap: balance; } .nma-sub { margin: -2px 0 12px; font: 400 clamp(18px, 1.9vw, 21px)/1.4 var(--nm-display); color: var(--nm-ink); text-wrap: pretty; } .nma-meta { margin: 0 0 22px; font: 400 14px/1.3 var(--nm-display); color: var(--nm-muted); } .nma-meta::after { content: ""; display: block; width: 64px; height: 6px; margin-top: 14px; background: var(--nm-pink); } .nma-image { margin: 0 0 26px; border: 4px solid var(--nm-blue); line-height: 0; } .nma-image a { display: block; } .nma-image img { display: block; width: 100%; height: auto; } .nma-cap { padding: 9px 12px; font-size: 14px; line-height: 1.45; color: var(--nm-ink); background: var(--nm-head-bg); border-top: 2px solid var(--nm-blue); } .nma-content { font-size: 17px; line-height: 1.78; color: var(--nm-ink); } .nma-content > * + * { margin-top: 1.1em; } .nma-content p { margin-bottom: 0; } .nma-content h2, .nma-content h3, .nma-content h4 { margin: 1.8em 0 .5em; line-height: 1.3; font-family: var(--nm-display); font-weight: 700; color: var(--nm-blue); } .nma-content h2 { font-size: 22px; } .nma-content h3 { font-size: 19px; } .nma-content h4 { font-size: 17px; } .nma-content ul, .nma-content ol { margin: 0 0 0 1.3em; padding: 0; } .nma-content li { margin: .35em 0; } .nma-content li::marker { color: var(--nm-pink); } .nma-content a { color: var(--nm-blue); text-decoration: underline; text-decoration-color: var(--nm-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Text links, site-wide: on hover the pink underline stays and the text gets the cards' pale pink behind it; a link without an underline at rest gains the pink one. Plain links only (no class): cards and image links have their own. */ .nma-content :is(p, li, blockquote, td, figcaption) a:not([class]):is(:hover, :focus-visible) { color: var(--nm-blue-dark); background: var(--nm-pink-soft); } .nma-content img { max-width: 100%; height: auto; } .nma-content figure, .nma-content .wp-caption { max-width: 100%; margin: 1.6em 0; } .nma-content figcaption, .nma-content .wp-caption-text { margin-top: 8px; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--nm-muted); } /* Pull quote = the editor's Blockquote button. The same pink box articles used to hand-style inline (a div with background #f3d1da, all converted to
2026-10-28); the look lives here, so pasted text can't change it. */ .nma-content blockquote { max-width: 500px; margin: 1.8em auto; padding: 20px 28px; background: #f3d1da; border-radius: 10px; color: #000; font-size: 1.5em; line-height: 1.5; font-style: italic; text-align: center; } .nma-content blockquote :is(p, span, em, strong) { font-size: inherit; color: inherit; } .nma-content blockquote p { margin: 0; } .nma-content blockquote p + p { margin-top: .6em; } .nma-content iframe { max-width: 100%; } /* Headings after the article ("Classifications", "More from …"): pink capitals, short blue bar. */ .nmt-after-h, .nma-related-h { margin: 0 0 14px; font: 700 15px/1.2 var(--nm-display); letter-spacing: .08em; text-transform: uppercase; color: var(--nm-pink); } .nmt-after-h::after, .nma-related-h::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 8px; background: var(--nm-blue); } .nmt-after-h:lang(zh-HK), [lang^="zh"] .nmt-after-h { letter-spacing: .14em; } /* "More from …" / "You may also like": three cards; a thick pink bar grows under the title on hover. */ .nma-related { margin-top: 34px; } .nmhm-more.nma-related-more { margin: 18px 0 0; } .nma-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .nma-card { display: flex; flex-direction: column; text-decoration: none; color: var(--nm-ink); } .nma-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--nm-blue); transition: border-color .15s; } .nma-card:hover img, .nma-card:focus-visible img { border-color: var(--nm-pink); } .nma-card-title { position: relative; display: block; margin-top: 10px; padding-bottom: 8px; font: 700 15px/1.35 var(--nm-display); color: var(--nm-blue); } .nma-card-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: var(--nm-pink); transition: width .2s ease; } .nma-card:hover .nma-card-title { color: var(--nm-blue-dark); } .nma-card:hover .nma-card-title::after, .nma-card:focus-visible .nma-card-title::after { width: 100%; } .nma-card-date { margin-top: 6px; font-size: 13px; color: var(--nm-muted); } /* Sidebar */ .nma-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 20px 16px; background: #fff; border: var(--nm-frame); } .nma-box { padding: 0 2px 20px; border-bottom: 3px solid var(--nm-pink-soft); } .nma-box-h { margin: 0 0 12px; font: 700 15px/1.3 var(--nm-display); color: var(--nm-blue); } .nma-box-h::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 8px; background: var(--nm-pink); } .nma-more { display: inline-block; margin-top: 10px; font: 700 14px/1.2 var(--nm-display); color: var(--nm-blue); text-decoration: none; } .nma-more:hover { color: var(--nm-blue-dark); text-decoration: underline; text-decoration-color: var(--nm-pink); } /* Most-mentioned people, one per line */ .nma-top-people { margin: 0 0 4px; padding: 0; list-style: none; counter-reset: tp; } .nma-top-people li { counter-increment: tp; border-top: 1px solid var(--nm-line); } .nma-top-people li:first-child { border-top: 0; } .nma-top-people a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 2px; color: var(--nm-ink); text-decoration: none; } .nma-tp-name { font: 700 15px/1.3 var(--nm-display); } .nma-tp-n { min-width: 26px; padding: 3px 6px; font: 700 12px/1 var(--nm-display); text-align: center; color: var(--nm-blue); background: var(--nm-pink-soft); } .nma-top-people a:hover .nma-tp-name, .nma-top-people a:focus-visible .nma-tp-name { color: var(--nm-blue); text-decoration: underline; text-decoration-color: var(--nm-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Link squares ("chocolate squares") */ .nma-squares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 3px; } .nma-square { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 14px 10px 22px; text-align: center; text-decoration: none; color: #fff; background: var(--nm-blue); border: 3px solid #fff; outline: 2.8px solid var(--nm-blue); outline-offset: 0; box-shadow: inset 0 0 0 1px rgba(244, 157, 177, .55), 0 3px 0 rgba(0, 59, 84, .18); transition: background .15s, transform .15s; } .nma-square span { font: 700 14px/1.25 var(--nm-display); letter-spacing: .05em; text-transform: uppercase; } .nma-square::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 16px; height: 3px; background: var(--nm-pink); transition: left .15s, right .15s; } .nma-square:hover, .nma-square:focus-visible { color: #fff; background: var(--nm-blue-dark); transform: translateY(-2px); } .nma-square:hover::after, .nma-square:focus-visible::after { left: 14%; right: 14%; } @media (max-width: 1000px) { .nma { grid-template-columns: 1fr; } .nma-squares { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .nma-main { padding: 20px 16px 24px; } .nma-related-grid { grid-template-columns: 1fr; } .nma-squares { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Archives, 404 ---------- */ .nml { box-sizing: border-box; max-width: var(--nm-col); margin: 0 auto var(--nm-gap); } .nml-box { padding: 28px 30px 34px; background: #fff; border: var(--nm-frame); } .nml-title { margin: 0 0 22px; font: 700 clamp(27px, 3.4vw, 37px)/1.2 var(--nm-display); color: var(--nm-blue); } .nml-title::after { content: ""; display: block; width: 64px; height: 6px; margin-top: 14px; background: var(--nm-pink); } .nml-item { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; padding: 20px 0; border-top: 1px solid var(--nm-line); } .nml-thumb { display: block; line-height: 0; } .nml-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--nm-blue); } .nml-item-title { margin: 0 0 6px; font: 700 1.2rem/1.35 var(--nm-display); } .nml-item-title a { color: var(--nm-blue); text-decoration: none; } .nml-item-title a:hover { text-decoration: underline; text-decoration-color: var(--nm-pink); text-decoration-thickness: 3px; text-underline-offset: 3px; } .nml-date { margin: 0 0 8px; font-size: 13px; color: var(--nm-muted); } .nml-excerpt { margin: 0; font-size: 15px; line-height: 1.6; } .nml-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; } .nml-pages .page-numbers { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; font: 700 14px/1 var(--nm-display); color: var(--nm-blue); background: #fff; border: 2px solid var(--nm-blue); text-decoration: none; } .nml-pages .page-numbers.current { color: #fff; background: var(--nm-pink); border-color: var(--nm-pink); } .nml-pages a.page-numbers:hover { background: var(--nm-pink-soft); } .nml-404 p { font-size: 17px; } .nml-404 .nmh-search { max-width: 640px; margin: 10px 0 22px; } .nml-home a { font-weight: 700; color: var(--nm-blue); } @media (max-width: 760px) { .nml-box { padding: 20px 16px 24px; } .nml-item { grid-template-columns: 1fr; gap: 12px; } } /* ---------- Home ---------- */ .nmhm { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--nm-gap); max-width: var(--nm-col); margin: 0 auto var(--nm-gap); } .nmhm *, .nmhm *::before, .nmhm *::after { box-sizing: border-box; } .nmhm a { text-decoration: none; color: inherit; } /* Section heading: small blue capitals with a short pink bar */ .nmhm-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .nmhm-h h2 { margin: 0; font: 700 15px/1.2 var(--nm-display); letter-spacing: .08em; text-transform: uppercase; color: var(--nm-blue); } .nmhm-h h2::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 8px; background: var(--nm-pink); } /* Framed sections; Recent articles and Cover story are two frames side by side. */ .nmhm-recent, .nmhm-cover, .nmhm-sec, .nmhm-trio { padding: 20px 20px 22px; background: #fff; border: var(--nm-frame); } .nmhm-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--nm-gap); } /* Photo tile: title always on the photo */ .nmhm-tile { position: relative; display: block; overflow: hidden; line-height: 0; background: var(--nm-blue); border: 3px solid var(--nm-blue); transition: border-color .15s; } .nmhm-tile img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; } .nmhm-tile:hover img, .nmhm-tile:focus-visible img { transform: scale(1.04); } .nmhm-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 5px; padding: 46px 14px 12px; line-height: 1.3; color: #fff; background: linear-gradient(to top, rgba(0, 34, 50, .92) 0%, rgba(0, 34, 50, .7) 45%, rgba(0, 34, 50, 0) 100%); } .nmhm-tile-t { font: 700 15px/1.3 var(--nm-display); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nmhm-tile-d { font-size: 12px; opacity: .85; } .nmhm-tile::after { content: ""; position: absolute; left: 14px; bottom: 0; width: 0; height: 4px; background: var(--nm-pink); transition: width .2s; } .nmhm-tile:hover::after, .nmhm-tile:focus-visible::after { width: calc(100% - 28px); } .nmhm-tile:hover, .nmhm-tile:focus-visible { border-color: var(--nm-pink); } .nmhm-recent { display: flex; flex-direction: column; } .nmhm-recent-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 440px; } .nmhm-recent-grid .is-lead { grid-row: 1 / 4; } .nmhm-recent-grid .is-lead img, .nmhm-recent-grid .is-small img { position: absolute; inset: 0; aspect-ratio: auto; } .nmhm-recent-grid .is-lead .nmhm-tile-t { font-size: 22px; -webkit-line-clamp: 5; } .nmhm-recent-grid .is-small .nmhm-tile-cap { padding: 26px 10px 8px; } .nmhm-recent-grid .is-small .nmhm-tile-t { font-size: 13px; } .nmhm-recent-grid .is-small .nmhm-tile-d { display: none; } .nmhm-cover { display: flex; flex-direction: column; } .nmhm-cover .is-cover { flex: 1; min-height: 440px; } .nmhm-cover .is-cover img { position: absolute; inset: 0; aspect-ratio: auto; } .nmhm-cover .is-cover .nmhm-tile-t { font-size: 24px; -webkit-line-clamp: 4; } .nmhm-grid { display: grid; gap: 12px; } .nmhm-major .nmhm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nmhm-major .nmhm-tile-t { font-size: 17px; } .nmhm-secondary .nmhm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nmhm-spotlight .nmhm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nmhm-spotlight .nmhm-tile-t { font-size: 14px; } /* Editorial + latest print volume */ .nmhm-duo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; } .nmhm-trio .is-editorial .nmhm-tile-t { font-size: 18px; } .nmhm-print { display: flex; flex-direction: column; } .nmhm-print a { position: relative; display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-height: 280px; } .nmhm-print img { position: absolute; top: 0; left: 0; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: left top; box-shadow: 0 6px 18px rgba(31, 45, 54, .2); } /* "See all …" under each section, in the NM button style (see Forms). */ .nmhm-more { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin: 16px 0 0; } .nmhm-more-2 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; } .nmhm-more-2 .nmhm-more { grid-column: auto; justify-content: flex-start; } @media (max-width: 1000px) { .nmhm-top { grid-template-columns: 1fr; } .nmhm-duo { grid-template-columns: 1fr; } .nmhm-secondary .nmhm-grid, .nmhm-spotlight .nmhm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nmhm-print a { min-height: 0; } .nmhm-print img { position: static; width: 100%; height: auto; max-width: 230px; } /* Each "See all" link sits under its own column. */ .nmhm-more-2 { display: contents; } .nmhm-duo > .nmhm-col:first-child { order: 1; } .nmhm-duo .nmhm-more-2 .nmhm-more:first-child { order: 2; margin: 0 0 8px; } .nmhm-duo > .nmhm-print { order: 3; } .nmhm-duo .nmhm-more-2 .nmhm-more:last-child { order: 4; margin: 0; } } @media (max-width: 760px) { .nmhm-recent, .nmhm-cover, .nmhm-sec, .nmhm-trio { padding: 14px 12px 16px; } .nmhm-major .nmhm-grid { grid-template-columns: 1fr; } .nmhm-recent-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; } .nmhm-recent-grid .is-lead { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; } .nmhm-recent-grid .is-small { aspect-ratio: 3 / 2; } .nmhm-recent-grid .is-small:last-child { grid-column: 1 / -1; } .nmhm-cover .is-cover { min-height: 0; aspect-ratio: 4 / 3; } .nmhm-more { margin: 12px 0 0; } } /* ---------- Pages (page-nm.php): white frame, pink tile label, blue heading, block content ---------- */ .nmp { box-sizing: border-box; width: 100%; flex: 1 1 100%; max-width: var(--nm-col); margin: 0 auto var(--nm-gap); color: var(--nm-ink); } .nmp-box { --nmp-pt: 26px; --nmp-px: 24px; --nmp-pb: 40px; background: #fff; border: var(--nm-frame); padding: var(--nmp-pt) var(--nmp-px) var(--nmp-pb); } /* Hero (page-nm.php, meta nm_hero): the photo runs to the frame's border — it cancels the frame's own padding — with the tile label and heading laid over its foot on a dark fade, like a magazine cover. */ .nmp-hero { position: relative; display: flex; align-items: flex-end; margin: calc(-1 * var(--nmp-pt)) calc(-1 * var(--nmp-px)) 30px; aspect-ratio: 2 / 1; overflow: hidden; background: var(--nm-bg); } .nmp-hero .nmp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .nmp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 30, 20, 0) 40%, rgba(0, 30, 20, .7)); } .nmp-hero-cap { position: relative; z-index: 1; padding: 0 calc(var(--nmp-px) + 6px) calc(var(--nmp-px) + 6px); } .nmp-hero .nmp-kicker { margin-bottom: 0; } .nmp-hero .nmp-title { margin: 14px 0 0; font-size: clamp(2rem, 4.6vw, 51px); color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); } @media (max-width: 600px) { .nmp-hero { aspect-ratio: 4 / 3; } } .nmp-inner { margin: 0; } /* Label tiles: one letter per tile; the color switches at each word (pink, then white), like the logo. Long labels wrap between words, never inside one; each word carries its own frame so rows stay tight. */ .nmp-kicker { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: 0; padding: 0 2px 2px 0; margin: 0 0 18px; line-height: 1; } .nmp-kw { display: inline-flex; gap: 2px; padding: 2px; margin: 0 -2px -2px 0; font-weight: inherit; background: var(--nm-blue); } .nmp-kicker span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 2px; font: 700 18px/1 var(--nm-display); color: #fff; background: var(--nm-pink); } .nmp-kicker span.is-alt { color: var(--nm-blue); background: #fff; } .nmp-title { margin: 0 0 26px; font-size: clamp(27px, 4vw, 38px); line-height: 1.2; font-weight: 700; color: var(--nm-blue); text-wrap: balance; } .nmp-title::after { content: ""; display: block; width: 64px; height: 6px; margin-top: 16px; background: var(--nm-pink); } .nmp-content { font-size: 17px; line-height: 1.75; color: var(--nm-ink); } .nmp-content > * + * { margin-top: 1.1em; } .nmp-content > * + :is(.nm-nl-archive, .nmcg) { margin-top: 1.1em; } /* these set their own margins in stylesheets that load after this one */ .nmp-content p { margin-bottom: 0; } .nmp-content h2, .nmp-content h3 { margin: 1.9em 0 .5em; line-height: 1.3; font-weight: 700; color: var(--nm-blue); } .nmp-content h2 { font-size: 22px; } .nmp-content h3 { font-size: 18px; } /* Equal section headings inside a page (Newsletters: Subscribe / Past issues), like the home section heads */ .nmp-content h2.nmp-sec { margin: 0 0 16px; font: 700 18px/1.2 var(--nm-display); letter-spacing: .08em; text-transform: uppercase; color: var(--nm-blue); } .nmp-content h2.nmp-sec::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 9px; background: var(--nm-pink); } .nmp-content * + h2.nmp-sec { margin-top: 40px; } .nmp[lang="zh-HK"] .nmp-content h2.nmp-sec { letter-spacing: .12em; } .nmp-content ul, .nmp-content ol { margin: 0 0 0 1.3em; padding: 0; } .nmp-content li { margin: .35em 0; } .nmp-content li::marker { color: var(--nm-pink); } .nmp-content a { color: var(--nm-blue); text-decoration: underline; text-decoration-color: var(--nm-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; } .nmp-content a:is(:hover, :focus-visible) { color: var(--nm-blue-dark); } .nmp-content :is(p, li, blockquote, td) a:not([class]):is(:hover, :focus-visible) { background: var(--nm-pink-soft); } /* running text only: card titles are plain links too */ .nmp-content blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1.1em; border-left: 4px solid var(--nm-pink); color: var(--nm-muted); } .nmp-content .wp-block-embed { margin: 0 0 1.8em; } .nmp-content .wp-block-embed__wrapper { position: relative; border: 4px solid var(--nm-blue); background: #000; } .nmp-content .wp-block-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; } /* YouTube until clicked (nm-youtube.php, nm-site.js): the thumbnail, title along the top, the red play button. */ .nm-yt .nm-yt-btn { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; color: #fff; background: #000; border: 0; cursor: pointer; } .nm-yt .nm-yt-btn img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .nm-yt .nm-yt-title { position: absolute; inset: 0 0 auto; padding: 14px 18px 36px; font: 500 18px/1.3 var(--nm-display); text-align: left; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); background: linear-gradient(rgba(0, 0, 0, .6), transparent); } .nm-yt .nm-yt-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); } .nm-yt .nm-yt-play-bg { fill: #212121; fill-opacity: .8; transition: fill .15s, fill-opacity .15s; } .nm-yt .nm-yt-btn:is(:hover, :focus-visible) .nm-yt-play-bg { fill: #f00; fill-opacity: 1; } .nm-yt .nm-yt-btn:focus-visible { outline: 3px solid var(--nm-pink); outline-offset: -3px; } .nm-yt iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; } @media (max-width: 600px) { .nm-yt .nm-yt-title { padding: 10px 12px 28px; font-size: 15px; } } .nmp-content .wp-block-image { margin: 0 0 1.6em; } .nmp-content .wp-block-image img { display: block; max-width: 100%; height: auto; } .nmp-content .nmp-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 1.6em 0 0; } .nmp-content .nmp-logos .wp-block-image { margin: 0; } /* Fact cards (Caring for the planet): logo, then a short bold title and a line, on pale blue, two across. */ .nmp-content :is(.nmp-facts, .nmp-fact) > .wp-block-group__inner-container { display: contents; } /* the theme wraps group children; lay them out directly */ .nmp-content .nmp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: var(--nmp-pb, 40px) 0 0; } /* after the text: the same space above as the frame's padding leaves below */ .nmp-content .nmp-fact { display: flex; align-items: center; gap: 18px; margin: 0; padding: 16px 20px; background: var(--nm-bg); } .nmp-content .nmp-fact .wp-block-image { flex: 0 0 122px; margin: 0; } .nmp-content .nmp-fact .wp-block-image img { display: block; width: 122px; height: auto; } .nmp-content .nmp-fact-text { margin: 0; font-size: 14px; line-height: 1.45; } .nmp-content .nmp-fact-text strong { display: block; margin-bottom: 4px; font: 700 15px/1.2 var(--nm-display); letter-spacing: .04em; text-transform: uppercase; color: var(--nm-blue); } @media (max-width: 600px) { .nmp-content .nmp-facts { grid-template-columns: 1fr; } } .nmp-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.2em 3em; margin: 0 0 1.6em; } .nmp-content .wp-block-column { flex: 1 1 240px; } .nmp-content .wp-block-column > :first-child { margin-top: 0; } .nmp-content .nmp-note { font-size: 15px; font-style: italic; color: var(--nm-muted); } /* Bio pages: round photo, role, motto */ .nmp-content .nmp-bio { align-items: flex-start; gap: 1.5em 3em; } .nmp-content .wp-block-columns.nmp-bio > .nmp-bio-photo { flex: 0 1 300px; } .nmp-content .wp-block-columns.nmp-bio > .nmp-bio-text { flex: 1 1 320px; } .nmp-content .nmp-bio-photo .wp-block-image { margin: 0 auto; max-width: 300px; } .nmp-content .nmp-bio-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--nm-pink-soft); box-sizing: border-box; } .nmp-content .nmp-role { margin: 0; font-size: 1.5rem; line-height: 1.3; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nm-blue-dark); } .nmp-content .nmp-motto { margin: .6em 0 1.4em; padding: 0; font-size: 18px; font-style: italic; line-height: 1.5; color: var(--nm-muted); } @media (max-width: 781px) { .nmp-content .wp-block-columns.nmp-bio > .nmp-bio-photo { order: -1; } } /* Team grid ([nm_team]), in the print edition's style: name in letter tiles, role, rule, motto. */ .nmp-content .nmp-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .nmp-content .nmp-team-card { box-sizing: border-box; flex: 0 1 calc((100% - 48px) / 3); display: flex; flex-direction: column; align-items: center; padding: 26px 20px 24px; text-align: center; text-decoration: none; color: var(--nm-ink); background: #fff; border: 2.8px solid var(--nm-blue); transition: border-color .15s, box-shadow .15s; } .nmp-content a.nmp-team-card:hover, .nmp-content a.nmp-team-card:focus-visible { border-color: var(--nm-pink); box-shadow: 0 6px 18px rgba(0, 112, 158, .15); color: var(--nm-ink); } .nmp-content .nmp-team-photo { width: 150px; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 0; box-sizing: border-box; } .nmp-content .nmp-team-name { margin-top: 26px; font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--nm-blue); } .nmp-tiles { display: flex; flex-direction: column; align-items: center; gap: 5px; } .nmp-tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; } .nmp-tw { display: inline-flex; gap: 2px; } .nmp-tw span { display: grid; place-items: center; min-width: 26px; height: 28px; padding: 0 2px; font: 400 18px/1 var(--nm-display, inherit); color: var(--nm-blue); background: #fff; box-shadow: inset 0 0 0 1.5px var(--nm-blue); } .nmp-tw.is-fill { gap: 1.5px; } .nmp-tw.is-fill span { color: #fff; background: var(--nm-blue); box-shadow: none; } .nmp-content .nmp-team-role { margin-top: 14px; font: 700 15px/1.3 var(--nm-display, inherit); letter-spacing: .01em; text-transform: uppercase; color: #3d4549; text-wrap: balance; } .nmp-team-rule { display: block; width: 110px; height: 3px; margin: 20px auto 0; background: var(--nm-blue); } .nmp-content .nmp-team-motto { margin-top: 16px; font-size: 15px; font-style: italic; line-height: 1.5; color: #4b555a; } .nmp[lang="zh-HK"] .nmp-team-motto { font-style: normal; } .nmp[lang="zh-HK"] .nmp-tw span { font-size: 19px; min-width: 30px; height: 30px; } @media (max-width: 900px) { .nmp-content .nmp-team-card { flex-basis: calc((100% - 24px) / 2); } } /* Bio pages: the team again under the bio, compact — photo, name, role; six across (two rows for 9–12 people), the person being viewed marked in pink. */ .nmp-content .nmp-team-more { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--nm-line); } .nmp-content .nmp-team.is-compact { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .nmp-content .nmp-team.is-compact .nmp-team-card { flex: none; padding: 14px 8px 12px; } .nmp-content .nmp-team.is-compact .nmp-team-photo { width: 84px; } .nmp-content .nmp-team.is-compact .nmp-team-name { margin-top: 10px; font-size: 15px; } .nmp-content .nmp-team.is-compact .nmp-team-role { margin-top: 6px; font-size: 11px; } .nmp-content .nmp-team.is-compact .nmp-team-card[aria-current] { border-color: var(--nm-pink); background: var(--nm-pink-soft); } @media (max-width: 900px) { .nmp-content .nmp-team.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .nmp-content .nmp-team.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .nmp-content .nmp-team-card { flex-basis: 100%; } } /* Print-volume covers and report covers */ .nmp-content .nmp-covers { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; margin: 1.6em 0; } .nmp-content .nmp-covers .wp-block-image { width: auto !important; margin: 0 !important; } .nmp-content .nmp-covers .wp-block-image > a { display: block; text-decoration: none; } .nmp-content .nmp-covers .wp-block-image > a > img { display: block; width: 100%; height: auto; box-shadow: 0 4px 14px rgba(31, 45, 54, .18); transition: transform .15s, box-shadow .15s; } .nmp-content .nmp-covers .wp-block-image > a:is(:hover, :focus-visible) img { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 112, 158, .25); } /* WordPress's gallery caption is 13px over a blurred backdrop (a ::before strip on the figure); crisp blue text instead. */ .nmp-content .nmp-covers .wp-block-image::before { display: none !important; } .nmp-content .nmp-covers figcaption { position: static !important; margin: 12px 0 0 !important; padding: 0 !important; overflow: visible !important; max-height: none !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-align: center; font: 400 23px/1.2 var(--nm-display) !important; color: var(--nm-blue) !important; text-shadow: none !important; } .nmp-content .nmp-year { margin: 1.6em 0 .2em; padding-bottom: .3em; border-bottom: 3px solid var(--nm-pink-soft); } .nmp-content .nmp-year + .nmp-covers { margin-top: .9em; } /* Years under "Read online": light numerals with a thin rule, so they read as dividers, not as section headings */ .nmp-content :is(h2, h3).nmp-year { display: flex; align-items: center; gap: 16px; margin: 1.5em 0 .3em; padding: 0; border: 0; font: 400 29px/1 var(--nm-display, inherit); letter-spacing: .06em; color: var(--nm-ink); } .nmp-content :is(h2, h3).nmp-year::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--nm-line); } @media (max-width: 900px) { .nmp-content .nmp-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .nmp-content .nmp-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } } @media (max-width: 600px) { .nmp-box { --nmp-pt: 20px; --nmp-px: 16px; --nmp-pb: 30px; } .nmp-kicker span { min-width: 18px; height: 24px; padding: 0; font-size: 12px; } .nmp-content .nmp-bio-photo .wp-block-image { max-width: 200px; } } /* ---------- Contact page ---------- */ .nmp-content .nmc-lede { max-width: 720px; font-size: 18px; color: var(--nm-ink); } .nmp-content .wp-block-columns.nmc-contact { align-items: flex-start; gap: 28px; margin-top: 1.6em; } .nmp-content .wp-block-columns.nmc-contact > .nmc-form { flex: 1 1 520px; } .nmp-content .wp-block-columns.nmc-contact > .nmc-info { flex: 0 1 330px; display: flex; flex-direction: column; gap: 16px; } .nmp-content .nmc-h { margin: 0 0 16px; font: 700 13px/1.2 var(--nm-display); letter-spacing: .08em; text-transform: uppercase; color: var(--nm-blue); } .nmp-content .nmc-h::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 8px; background: var(--nm-pink); } .nmp-content .nmc-card { padding: 18px 20px; background: var(--nm-head-bg); border: 2px solid var(--nm-blue); border-top: 4px solid var(--nm-pink); } .nmp-content .nmc-card h3 { margin: 0 0 10px; font: 700 13px/1.2 var(--nm-display); letter-spacing: .08em; text-transform: uppercase; color: var(--nm-blue); } .nmp-content .nmc-card p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; } .nmp-content .nmc-card p:last-child { margin-bottom: 0; } .nmp-content .nmc-card .nmc-tel { font: 700 1.1rem/1.4 var(--nm-display); color: var(--nm-blue); text-decoration: none; } .nmp-content .nmc-card .nmc-map { font: 700 14px/1.3 var(--nm-display); color: var(--nm-blue); text-decoration: none; } .nmp-content .nmc-card a:hover { text-decoration: underline; text-decoration-color: var(--nm-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* ---------- Forms ---------- */ /* NM button: blue outline, blue capitals, pink arrow tile on the right. Home "See all" links and every form submit. */ .nmhm-more a { display: inline-flex; align-items: center; gap: 14px; padding: 0 0 0 14px; font: 700 13px/1 var(--nm-display); letter-spacing: .06em; text-transform: uppercase; color: var(--nm-blue); background: #fff; border: 2px solid var(--nm-blue); text-decoration: none; } .nmhm-more a span:last-child { display: grid; place-items: center; width: 36px; height: 36px; } .nmhm-more a:hover, .nmhm-more a:focus-visible { color: var(--nm-blue); background: var(--nm-pink-soft); text-decoration: none; } .nmp-content .nmp-covers figure:has(.nmp-cover-btns) figcaption { display: flex !important; justify-content: space-between; margin: 0 0 10px !important; padding: 0 5px !important; } /* quarter left, issue no. right: over Flipbook / Articles (same 5px inset) */ :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_4, .fluentform_wrapper_5, .fluentform_wrapper_8)) .ff-btn-submit { display: inline-flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 0 0 0 16px !important; font: 700 14px/1 var(--nm-display) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--nm-blue) !important; background: #fff !important; border: 2px solid var(--nm-blue) !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_4, .fluentform_wrapper_5, .fluentform_wrapper_8)) .ff-btn-submit::before { content: ""; order: 2; display: grid; place-items: center; align-self: stretch; width: 38px; } :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_4, .fluentform_wrapper_5, .fluentform_wrapper_8)) .ff-btn-submit:is(:hover, :focus-visible) { color: var(--nm-blue) !important; background: var(--nm-pink-soft) !important; border-color: var(--nm-blue) !important; } :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_4, .fluentform_wrapper_5, .fluentform_wrapper_8)) .ff-btn-submit.ff-working::after { background: var(--nm-pink); height: 3px; } /* The arrow: a bold drawn arrow on pink */ .nmhm-more a span:last-child, :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_4, .fluentform_wrapper_5, .fluentform_wrapper_8)) .ff-btn-submit::before { font-size: 0; color: transparent; background: var(--nm-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 10h13M10 4l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") center / 20px no-repeat; } .nmh-signup .fluentform .ff-btn-submit { width: 100% !important; height: 38px !important; margin: 0 !important; } /* Print volumes covers (nm-print-volumes.php): label above the cover; under it two plain links of their own, a line icon (book / page of lines) before blue capitals, no frame, one 5px in from each edge of the cover; centred on two lines when the cover is too narrow for both. The label is trimmed to its capitals so it centres exactly on the icon. */ .nmp-content .nmp-covers .wp-block-image:has(.nmp-cover-btns) { container-type: inline-size; } .nmp-content .nmp-covers .wp-block-image > .nmp-cover-btns { display: flex; flex-flow: row wrap; justify-content: space-between; gap: 6px; width: 100%; margin: 14px 0 0; padding: 0 5px; box-sizing: border-box; } @container (max-width: 213px) { .nmp:not([lang="zh-HK"]) .nmp-content .nmp-covers .wp-block-image > .nmp-cover-btns { justify-content: center; } } :is(.nmp-content .nmp-covers, .nmt-head) .nmp-cover-btns a { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; font: 700 15px/1 var(--nm-display); letter-spacing: .01em; text-transform: uppercase; color: var(--nm-blue); text-decoration: none; } :is(.nmp-content .nmp-covers, .nmt-head) .nmp-cover-btns span { text-box: trim-both cap alphabetic; text-decoration: inherit; } :is(.nmp-content .nmp-covers, .nmt-head) .nmp-cover-ic { display: block; flex: 0 0 auto; width: 18px; height: 18px; } :is(.nmp-content .nmp-covers, .nmt-head) .nmp-cover-btns a:is(:hover, :focus-visible) { color: var(--nm-blue-dark); } :is(.nmp-content .nmp-covers, .nmt-head) .nmp-cover-btns a:is(:hover, :focus-visible) span { text-decoration: underline; text-decoration-color: var(--nm-pink); text-decoration-thickness: 2px; text-underline-offset: 4px; } .nmp[lang="zh-HK"] .nmp-covers .nmp-cover-btns a { letter-spacing: .12em; } /* Newsletters page signup (#4 EN / #5 ZH): one tight line, given name | family name | email | Subscribe. */ .nmp-content .fluentform_wrapper_4 fieldset, .nmp-content .fluentform_wrapper_5 fieldset { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: stretch; gap: 0; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-el-group { margin: 0 !important; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-el-form-control { height: 46px; margin: 0; padding: 0 14px; font-size: 15px; color: var(--nm-ink); background: #fff; border: 2px solid var(--nm-blue); border-right: 0; border-radius: 0; box-shadow: none; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-el-form-control:focus { position: relative; z-index: 1; outline: 3px solid var(--nm-pink); outline-offset: -1px; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff_submit_btn_wrapper { grid-column: 4; grid-row: 1; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-btn-submit { height: 46px; margin: 0; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-el-group:has(.cf-turnstile) { grid-column: 1 / -1; grid-row: 2; } @media (max-width: 760px) { .nmp-content .fluentform_wrapper_4 fieldset, .nmp-content .fluentform_wrapper_5 fieldset { grid-template-columns: 1fr 1fr; gap: 8px 0; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-el-group:has([name=family_name]) .ff-el-form-control { border-right: 2px solid var(--nm-blue); } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-el-group:has([name=email]) { grid-column: 1 / -1; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-el-group:has([name=email]) .ff-el-form-control { border-right: 2px solid var(--nm-blue); } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff_submit_btn_wrapper { grid-column: 1 / -1; grid-row: auto; } .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5) .ff-btn-submit { width: 100%; } } /* Signup forms (header/footer card, Newsletters page): a missing or wrong email turns the box pink and the message floats in a pink tag just under the box, above everything else, so nothing moves. */ :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5)) .ff-el-input--content { position: relative; } :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5)) .ff-el-is-error .ff-el-form-control { border-color: var(--nm-pink) !important; background: var(--nm-pink-soft) !important; } :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5)) .ff-el-is-error .error { position: absolute !important; top: calc(100% + 5px); left: 0; z-index: 60; margin: 0 !important; padding: 5px 9px; font: 700 12px/1.2 var(--nm-display) !important; color: #fff !important; background: var(--nm-pink); white-space: nowrap; pointer-events: none; box-shadow: 0 4px 10px rgba(0, 59, 84, .18); } :is(.nmh-signup .fluentform, .nmp-content :is(.fluentform_wrapper_4, .fluentform_wrapper_5)) .ff-el-is-error .error::before { content: ""; position: absolute; left: 12px; bottom: 100%; border: 5px solid transparent; border-bottom-color: var(--nm-pink); } /* Contact form (#3 EN / #8 ZH) */ .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) .ff-el-group { margin-bottom: 16px; } .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) .ff-el-input--label label { font: 700 13px/1.2 var(--nm-display); letter-spacing: .06em; text-transform: uppercase; color: var(--nm-blue); } .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) .ff-el-is-required.asterisk-right label::after { color: var(--nm-pink); } .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) .ff-el-form-control { padding: 11px 14px; font-size: 16px; color: var(--nm-ink); background: #fff; border: 2px solid var(--nm-blue); border-radius: 0; box-shadow: none; } .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) .ff-el-form-control:focus { outline: 3px solid var(--nm-pink); outline-offset: -1px; border-color: var(--nm-blue); } .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) textarea.ff-el-form-control { min-height: 170px; } .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) .ff-btn-submit { height: 46px; font-size: 15px !important; } .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) .ff-btn-submit::before { width: 44px; } .nmp-content :is(.fluentform_wrapper_3, .fluentform_wrapper_8) .ff-message-success { padding: 14px 16px; background: var(--nm-pink-soft); border: 0; border-left: 4px solid var(--nm-pink); box-shadow: none; } /* ---------- Tabs: Features ([nm_tabs]) and Newsletters years. Closed tabs light blue and shaded, the open tab white and joined to the page. ---------- */ .nm-tabs-container .nm-tabs-nav { gap: 6px; margin-bottom: 26px; border-bottom: 3px solid var(--nm-blue); } .nm-nl-archive .nm-nl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; border-bottom: 3px solid var(--nm-blue); } .nm-tabs-container .nm-tabs-nav .nm-tab, .nm-nl-archive .nm-nl-tabs .nm-nl-tab { margin: 0; padding: 11px 20px 10px; font: 700 15px/1.2 var(--nm-display); letter-spacing: .03em; color: var(--nm-blue); background: #e5f2f7; border: 2px solid var(--nm-blue); border-bottom: 0; border-radius: 0; box-shadow: inset 0 -8px 10px -8px rgba(0, 59, 84, .3); transition: background-color .15s, color .15s; } .nm-nl-archive .nm-nl-tabs .nm-nl-tab { padding: 11px 22px 10px; } :is(.nm-tabs-container .nm-tabs-nav .nm-tab, .nm-nl-archive .nm-nl-tabs .nm-nl-tab):is(:hover, :focus-visible):not(.active) { color: var(--nm-blue-dark); background: #d0e6ef; } :is(.nm-tabs-container .nm-tabs-nav .nm-tab, .nm-nl-archive .nm-nl-tabs .nm-nl-tab):focus-visible { outline: 3px solid var(--nm-pink); outline-offset: -3px; } :is(.nm-tabs-container .nm-tabs-nav .nm-tab, .nm-nl-archive .nm-nl-tabs .nm-nl-tab).active { margin-bottom: -3px; padding-bottom: 13px; color: var(--nm-blue); background: #fff; box-shadow: inset 0 4px 0 var(--nm-pink); } /* Newsletter archive: month headings, cards like the site's photo cards (thin blue frame, cropped preview). */ /* Laid out like Print volumes (h3.nmp-year, .nmp-covers): month headings set like the year headings, the issue number above its thumbnail like the quarter label, no frame — the cover's shadow and lift on hover. */ .nm-nl-archive .nm-nl-month { display: flex; align-items: center; gap: 16px; margin: 1.5em 0 .9em; padding: 0; border: 0; font: 400 29px/1 var(--nm-display); letter-spacing: .06em; text-transform: none; color: var(--nm-ink); } .nm-nl-archive .nm-nl-month::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--nm-line); } .nm-nl-archive .nm-nl-grid { gap: 18px; } .nm-nl-archive .nm-nl-item { display: flex; flex-direction: column; padding: 0; background: none; border: 0; box-shadow: none !important; text-align: center; } .nm-nl-archive .nm-nl-title { order: -1; margin: 0 0 10px; font: 400 23px/1.2 var(--nm-display); color: var(--nm-blue); } .nm-nl-archive .nm-nl-image { display: block; line-height: 0; border: 0; background: #fff; box-shadow: 0 4px 14px rgba(31, 45, 54, .18); transition: transform .15s, box-shadow .15s; } .nm-nl-archive .nm-nl-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; } .nm-nl-archive .nm-nl-image:is(:hover, :focus-visible) { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 112, 158, .25); } .nm-nl-archive .nm-nl-date { margin: 10px 0 0; font: 400 13px/1.3 var(--nm-display); letter-spacing: .02em; text-transform: none; color: var(--nm-muted); } /* ---------- Tags (classification plugin) ---------- */ /* Tiles: thin blue frame, bold letters (tag pages, the Features directory). */ .nmt .nmt-grid { gap: 2px; padding: 2px; } .nmt .nmt-tiles, .nmt .nmt-word { gap: 2px; } .nmt .nmt-tile { width: 32px; height: 32px; font: 700 18px/1 var(--nm-display); } /* Tag page header like every other page: tiles above, big blue title below with a pink rule (the category's color when it has one). */ .nmt-archive .nmt-head-grid { display: block; padding: 0; background: none; } .nmt-archive .nmt-head-grid .nmt-tiles { display: inline-flex; padding: 2px; background: var(--nm-blue); } .nmt-archive .nmt-head .nmt-name { display: block; margin: 18px 0 0; padding: 0; min-height: 0; font: 700 clamp(27px, 4vw, 38px)/1.2 var(--nm-display); color: var(--nm-blue); background: none; text-wrap: balance; } .nmt-archive .nmt-head .nmt-name::after { content: ""; display: block; width: 64px; height: 6px; margin-top: 16px; background: var(--nm-pink); } .nmt-archive .nmt-meta { margin-top: 18px; } /* Print volume tag pages: cover story title under the quarter, issue cover on the right of the header. */ .nmt-archive .nmt-head .nmt-sub { display: block; margin-top: 8px; font: 500 clamp(25px, 3.3vw, 32px)/1.25 var(--nm-display); color: var(--nm-blue); text-decoration: none; } /* Tag header side slot: the issue cover on quarter pages, the category icon on category pages. */ .nmt-head.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--nm-gap); } .nmt-head.has-aside > * { grid-column: 1; } .nmt-head.has-aside > .nmt-aside { grid-column: 2; grid-row: 1 / span 9; align-self: start; } .nmt-head > .nmt-cover { width: clamp(96px, 16vw, 168px); } /* Category pages: the category colour on the bar under the name and on its icon (the tile label stays pink). */ .nmt-archive .nmt-head.has-color .nmt-name::after { background: var(--nm-cat); } .nmt-head.has-color .nmt-intro:not(.has-logo) .nmt-desc { border-left-color: var(--nm-cat); } .nmt-head > .nmt-cat-icon { width: clamp(64px, 10vw, 112px); color: var(--nm-cat); } .nmt-cat-icon svg { display: block; width: 100%; height: auto; max-width: none; max-height: none; mix-blend-mode: normal; } .nmt-head .nmt-cover-link { display: block; } .nmt-head .nmp-cover-btns { display: flex; justify-content: center; margin: 10px 0 0; } /* Flipbook centred under the cover */ .nmt-head[lang="zh-Hant"] .nmp-cover-btns a { letter-spacing: .12em; } .nmt-cover-img { display: block; width: 100%; height: auto; aspect-ratio: 782 / 1024; object-fit: cover; background: var(--nm-bg); box-shadow: 0 2px 8px rgba(31, 45, 54, .22); } /* Tag box after the article: six rows, labels on one line, pink tiles for type/category, outlined chips for the rest. */ .nmt-after-article { padding: 6px 22px; background: #fff; border: 2px solid var(--nm-pink); } .nmt-class .nmt-row { grid-template-columns: 13em 1fr; align-items: center; gap: 6px 14px; padding: 12px 0; } .nmt-class .nmt-row:first-child { padding-top: 12px; } .nmt-class .nmt-label { font: 700 12px/1.2 var(--nm-display); letter-spacing: .08em; white-space: nowrap; } .nmt-class .nmt-chips { min-height: 34px; align-items: center; } .nmt .nmt-pinktile { min-height: 30px; padding: 4px 12px; font: 700 14px/1.2 var(--nm-display); transition: background-color .18s ease; } .nmt .nmt-pinktile:hover, .nmt .nmt-pinktile:focus-visible { color: #fff; background: #ec8aa1; } /* Chips: gentle hover, keep the text color and soften the fill. */ .nmt .nmt-chip { padding: 4px 12px; font: 400 14px/1.4 var(--nm-display); border-width: 2px; transition: background-color .18s ease, border-color .18s ease; } .nmt .nmt-chip:hover, .nmt .nmt-chip:focus-visible { color: var(--nm-blue); background: var(--nm-pink-soft); border-color: var(--nm-blue); } /* IR partner chip with its small logo (nm-article.php) */ /* Logo chip: an IR partner's logo, a divider, its name — in an article's classification box and under each report cover on the Reports pages (nm-print-volumes.php). One rule set for both. */ :is(.nmt .nmt-chip, .nmp-content a).nm-logo-chip { display: inline-flex; align-items: stretch; gap: 10px; box-sizing: border-box; height: 60px; padding: 4px 14px 4px 6px; font: 400 14px/1.4 var(--nm-display); color: var(--nm-blue); text-decoration: none; background: #fff; border: 2px solid var(--nm-blue); --logo-maxw: 110px; --logo-maxh: 48px; transition: background-color .18s ease; } /* 60px tall: 48px inside */ :is(.nmt .nmt-chip, .nmp-content a).nm-logo-chip:is(:hover, :focus-visible) { color: var(--nm-blue); background: var(--nm-pink-soft); border-color: var(--nm-blue); } .nm-logo-chip .nm-logo { align-self: center; } .nm-logo-chip > span:last-child { display: flex; align-items: center; padding-left: 10px; border-left: 2px solid var(--nm-line); } .nm-logo-chip:is(:hover, :focus-visible) > span:last-child { border-left-color: var(--nm-pink); } .nmp-content .nmp-covers figcaption.has-logo-chip { display: flex; justify-content: center; align-items: flex-end; margin-top: auto !important; padding-top: 12px !important; font: inherit !important; } /* chips sit on the row's bottom line; a shorter cover leaves white space above its chip */ /* Reports chips: all the width of their cover, split 50/50 — the logo centred in the left half, the name in the right (a long Chinese name may take two lines). */ .nmp-content .nmp-covers .nm-logo-chip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; width: 100%; --logo-maxw: 100%; } .nmp-content .nmp-covers .nm-logo-chip .nm-logo { justify-self: center; } .nmp-content .nmp-covers .nm-logo-chip > span:last-child { align-self: stretch; justify-content: center; text-align: center; text-wrap: balance; line-height: 1.25; } /* the name centred in its half, as the logo is in its */ /* Reports: cover and chip link to the same report, so pointing at either lifts the cover and lights the chip. */ .nmp-content .nmp-covers figure:has(.nm-logo-chip):has(a:is(:hover, :focus-visible)) > a > img { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 112, 158, .25); } .nmp-content .nmp-covers figure:has(> a:is(:hover, :focus-visible)) .nm-logo-chip { background: var(--nm-pink-soft); } .nmp-content .nmp-covers figure:has(> a:is(:hover, :focus-visible)) .nm-logo-chip > span:last-child { border-left-color: var(--nm-pink); } @media (max-width: 600px) { .nmt-class .nmt-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; } .nmt-class .nmt-chips { min-height: 0; } } /* Features directory: A–Z bar stays on top while scrolling. */ .nmp-content .nmt a { text-decoration: none; } /* Sticky things sit below the admin bar and the sticky menu bar (--nmh-mini-h, measured by nm-site.js; 0 on phones). */ .nmt .nmt-az { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nmh-mini-h, 0px)); z-index: 20; box-shadow: 0 6px 12px -6px rgba(0, 59, 84, .35); } .nmt .nmt-letter { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nmh-mini-h, 0px) + var(--nmt-az-h, 60px)); } /* ---------- Articles page (NM-NL-Grid) ---------- */ /* Five types in one row; By quarter: one year per row, each quarter in its own column. */ .nm-type-cards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .nm-type-cards.is-quarters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .nm-type-cards.is-quarters .is-q1 { grid-column: 1; } .nm-type-cards.is-quarters .is-q2 { grid-column: 2; } .nm-type-cards.is-quarters .is-q3 { grid-column: 3; } .nm-type-cards.is-quarters .is-q4 { grid-column: 4; } .nm-area-card[style*="--nm-cat"] { color: color-mix(in srgb, var(--nm-cat) 80%, #000); border: 1px solid var(--nm-cat); border-top: 6px solid var(--nm-cat); font-family: var(--nm-display); font-weight: 700; letter-spacing: .04em; } .nmp-content a.nm-area-card, .nmp-content a.nm-area-card:hover { text-decoration: none; } /* Browsing cards (Articles page tabs: type, quarter, category, IR and strategic partners; nm_bcard_inner()): the name on the left with the article count under it in a pink box, the tag's image on the right when it has one. */ .nmp-content .nm-bcard { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 14px; text-align: left; text-decoration: none; } .nm-bcard-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .nm-bcard-name { margin: 0; } .nm-bcard-n { min-width: 26px; padding: 1px 6px; font: 700 12px/16px var(--nm-display); letter-spacing: 0; text-align: center; color: var(--nm-blue); background: var(--nm-pink-soft); } /* Card hover, one rule for every browsing card (Articles tabs, Features directory names, A–Z letters): text stays put, the card takes a pale shade with a 4px bar on its left in its accent, and the count box turns blue. The accent is pink, or a category's own colour; its shade is 25% of it on white, the same strength pale pink (#fde4ea) is to pink (#f49db1). */ .nm-bcard, .nmt .nmt-card, .nmt .nmt-az a { --nm-accent: var(--nm-pink); --nm-shade: var(--nm-pink-soft); transition: background-color .15s, box-shadow .15s; } .nm-bcard[style*="--nm-cat"] { --nm-accent: var(--nm-cat); --nm-shade: color-mix(in srgb, var(--nm-cat) 25%, #fff); } :is(.nm-bcard, .nmt .nmt-card, .nmt .nmt-az a):is(:hover, :focus-visible) { background: var(--nm-shade); box-shadow: inset 4px 0 0 var(--nm-accent); } :is(.nm-bcard, .nmt-card):is(:hover, :focus-visible) :is(.nm-bcard-n, .nmt-card-n) { color: #fff; background: var(--nm-blue); } .nm-bcard-img { flex: 0 0 auto; width: auto; height: auto; max-width: 40%; max-height: 48px; object-fit: contain; mix-blend-mode: multiply; } /* Partner logos (nm-logos.php): cropped to their ink and sized for equal perceived size. Width = --lw × --logo-u, capped by --logo-maxw and by --logo-maxh × aspect; each grid sets only those three. multiply drops white backgrounds. */ .nm-logo { position: relative; display: block; flex: 0 0 auto; overflow: hidden; aspect-ratio: var(--a); width: min(calc(var(--lw) * var(--logo-u, 50px)), var(--logo-maxw, 40%), calc(var(--logo-maxh, 56px) * var(--a))); mix-blend-mode: multiply; } .nm-logo .nm-logo-img { position: absolute; max-width: none; max-height: none; } /* Inside a gallery (Reports captions) WordPress core sets max-width: 100% !important on images, which squashes the crop. */ .wp-block-gallery figure.wp-block-image .nm-logo img.nm-logo-img { max-width: none !important; } /* Logo grids fit their unit: each grid states its widest and tallest logo in units (--logo-kw / --logo-kh, from nm_logo_grid_vars()) and each logo box its size (--logo-maxw / --logo-maxh); the unit is the largest that fits both, so no logo is clipped and every logo in the grid keeps the formula's proportions. The logo box is a container where its width is a share of the card (cqw). A single logo (tag page, article chip) has no grid, so it falls back to its own width and height: it fits its box. */ .nm-logo { --logo-u: min(var(--logo-maxw) / var(--logo-kw, var(--lw)), var(--logo-maxh) / var(--logo-kh, calc(var(--lw) / var(--a)))); } .nmt-logo { --logo-maxw: 100%; --logo-maxh: 190px; } /* While images load (nm-site.js marks them .is-loaded): covers sit on the page's pale blue, which the opaque cover then paints over; logos keep a pale-blue box until they arrive, then fade in (logos may be transparent). */ .nm-bcard-cover { background: var(--nm-bg); } .nm-fade .nm-logo:not(:has(img.is-loaded)) { background: var(--nm-bg); } .nm-fade .nm-logo img { transition: opacity .25s ease; } .nm-fade .nm-logo img:not(.is-loaded) { opacity: 0; } /* Type and quarter cards; IR partners (three across, bigger logos); categories (print icon); strategic partners (four across). */ .nmp-content .nm-type-cards .nm-bcard { padding: 18px 18px 18px 22px; } .nm-type-cards .nm-bcard-name { font: 700 18px/1.25 var(--nm-display); text-transform: uppercase; } .nm-type-cards .nm-bcard-sub { display: block; margin-top: 2px; font-size: 16px; font-weight: 400; } /* the quarter's issue number: ~10% smaller than the 18px name, regular */ /* Type cards (five across) stack like the category cards: the designed icon in a fixed 56px band on top, then the name, then the count; a type without an icon keeps the empty band, so names stay level. */ .nmp-content .nm-type-cards:not(.is-quarters):not(.is-partners) .nm-bcard { display: grid; grid-template-rows: 56px auto; align-content: start; justify-items: start; row-gap: 12px; } .nm-type-cards svg.nm-type-icon { grid-row: 1; width: 56px; height: 56px; max-width: none; max-height: none; margin-left: -6px; mix-blend-mode: normal; } .nm-type-cards:not(.is-quarters):not(.is-partners) .nm-bcard-text { grid-row: 2; } /* IR partner cards (Articles → By IR partner, and the IR partners page, which uses the same shortcode): three across, the logo on the right in up to 52% of the card; every card the tallest logo + padding high, so rows match. */ .nm-type-cards.is-partners { --logo-maxw: 52cqw; --logo-maxh: 84px; } .nm-type-cards.is-partners .nm-bcard { container-type: inline-size; } .nmp-content .nm-type-cards.is-partners .nm-bcard { min-height: calc(var(--logo-maxh) + 32px); padding: 14px 16px 14px 24px; } .nm-type-cards.is-partners .nm-bcard-name { font-size: 22px; } /* Categories stack like the strategic partners: the print icon in a fixed band on top, then the name, then the count. */ .nmp-content .nm-areas-grid .nm-bcard { display: grid; grid-template-rows: 34px auto; align-content: start; justify-items: start; row-gap: 12px; padding: 14px 14px 14px 16px; } .nm-areas-grid .nm-bcard-text { grid-row: 2; } /* Quarter cards: a two-column grid, the name + count box on the left, the issue's cover on the right in a column 50% of the card wide. The cover keeps its print proportions (782 : 1024), so its height follows from the card's width; the card is that height plus 6px above and below. Balanced at every width, the cover can't outgrow the card. */ .nmp-content .nm-type-cards.is-quarters .nm-bcard { display: grid; grid-template-columns: minmax(0, 1fr) 50%; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; } .nm-type-cards.is-quarters .nm-bcard-cover { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 782 / 1024; object-fit: cover; box-shadow: 0 2px 8px rgba(31, 45, 54, .22); } .nm-areas-grid svg.nm-bcard-img { grid-row: 1; height: 34px; max-width: 42px; mix-blend-mode: normal; } .nmt .nmt-cards:has(> .nm-bcard) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; --logo-maxw: 100cqw; --logo-maxh: 64px; } /* logo stacked on top: the full card width is free */ .nmt .nmt-cards > .nm-bcard { container-type: inline-size; } .nmp-content .nmt .nmt-cards .nmt-card.nm-bcard { gap: 12px; padding: 12px 12px 12px 14px; font: 700 13px/1.35 var(--nm-display); letter-spacing: .02em; text-transform: uppercase; color: var(--nm-blue); border: 2px solid var(--nm-blue); } .nmt .nmt-card.nm-bcard .nm-bcard-img { max-width: 38%; } /* Strategic partners: names run long, so the card stacks as a grid: a fixed logo band on top (the logo centred in it, left-aligned), then the name, then the count box. The fixed band keeps names level across a row. */ .nmp-content .nmt .nmt-cards .nmt-card.nm-bcard { display: grid; grid-template-rows: var(--logo-maxh) auto; align-content: start; justify-items: start; row-gap: 12px; } .nmt .nmt-card.nm-bcard .nm-logo { grid-row: 1; align-self: center; } .nmt .nmt-card.nm-bcard .nm-bcard-text { grid-row: 2; } @media (max-width: 900px) { .nmt .nmt-cards:has(> .nm-bcard) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .nmt .nmt-cards:has(> .nm-bcard) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .nmt .nmt-cards:has(> .nm-bcard) { grid-template-columns: 1fr; } } /* Article cards ([nm_post_grid]) hover like the home tiles: the photo zooms, a pink bar grows along its bottom edge, the card gets a pink frame and its title darkens. The title link covers the whole card. */ .nm-post-card { position: relative; transition: box-shadow .15s; } .nm-post-card .nm-card-img-link { position: relative; overflow: hidden; } .nm-post-card .nm-card-img { transition: transform .35s ease; } .nm-post-card .nm-card-img-link::after { content: ""; position: absolute; left: 14px; bottom: 0; width: 0; height: 4px; background: var(--nm-pink); transition: width .2s; } .nm-post-card .nm-card-title a::before { content: ""; position: absolute; inset: 0; z-index: 1; } .nm-post-card:is(:hover, :focus-within) { box-shadow: 0 0 0 3px var(--nm-pink), 0 2px 8px rgba(0, 0, 0, .08); } .nm-post-card:is(:hover, :focus-within) .nm-card-img { transform: scale(1.04); } .nm-post-card:is(:hover, :focus-within) .nm-card-img-link::after { width: calc(100% - 28px); } .nmp-content .nm-post-card:is(:hover, :focus-within) .nm-card-title a { color: var(--nm-blue-dark); text-decoration: none; } /* Page numbers under the grid */ #nm-grid { scroll-margin-top: 90px; } .nm-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 26px 0 6px; font-family: var(--nm-display); } .nmp-content .nm-pages .page-numbers { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; font: 700 14px/1 var(--nm-display); color: var(--nm-blue); background: #fff; border: 2px solid var(--nm-blue); text-decoration: none; } .nmp-content .nm-pages a.page-numbers:hover, .nmp-content .nm-pages a.page-numbers:focus-visible { color: var(--nm-blue); background: var(--nm-pink-soft); } .nmp-content .nm-pages .page-numbers.current { color: #fff; background: var(--nm-pink); border-color: var(--nm-pink); } .nmp-content .nm-pages .page-numbers.dots { min-width: 0; padding: 0 2px; border-color: transparent; background: none; } @media (max-width: 900px) { .nm-type-cards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .nm-type-cards:has(> :nth-child(5):last-child) { grid-template-columns: 1fr; } .nm-type-cards.is-quarters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nm-type-cards.is-quarters .nm-type-card { grid-column: auto; } }