/* ========================================================================== Insights — /insights/ (2026-08-06) ========================================================================== The black/gold design language: same tokens as frontpage.css, voices.css, in-the-media.css and events-hub.css. Keep the four in step. SHAPE. A hub of rows, one per kind of insight, each with its own View More into the full archive. That is the /voices/ row exactly — label rail on the left, carousel on the right — and it is deliberate: Voices becomes a third row on this page, and it should arrive as data, not as a new layout. CARD. The In the Media / Past Events card, not the Voices one: body above, image below, on white. Voices cards print their caption OVER the poster because a video poster IS the content; here the image is a cover or an event photo and the title is the content, and a title averaging 70 characters cannot live in a two-line overlay. Verified against in-the-media.css so the two read as the same card. IMAGE RATIO IS 3:2. The old page cropped everything to portrait, which sliced the headline off half the event banners (the ESG Forum and CASI cards were unreadable). Measured all 22 source images: 20 are landscape, 1.34 to 2.0, median 1.5. 3:2 is that median; 16:9 would crop the 1.39 group harder. Scope `.ins` + !important throughout — Phlox ships 69+ stylesheets. ========================================================================== */ /* .ins-lb is appended to , OUTSIDE .ins — custom properties do not reach it by cascade, so it has to carry the tokens itself or --ins-gold resolves to nothing and the close button loses its hover colour. */ .ins, .ins-band, .ins-lb { --ins-gold: #B89642; --ins-ink: #14171F; --ins-ink-soft: #4A4E58; --ins-mute: #8A8F99; --ins-bg: #EFEFEF; --ins-card: #FFFFFF; --ins-line: #D8D8D8; --ins-ease: cubic-bezier(.22,.9,.3,1); } .ins { display: block !important; position: relative !important; font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; color: var(--ins-ink) !important; padding-bottom: 20px !important; } /* The grey ground runs the full width of the window, not of the measure. */ .ins::before { content: "" !important; position: absolute !important; left: 50% !important; width: 100vw !important; margin-left: -50vw !important; top: 0 !important; bottom: 0 !important; background: var(--ins-bg) !important; z-index: -1 !important; } /* ========================================================================== Title band ========================================================================== Server-rendered in the page content, so it paints with the first frame and the page never shows a white gap where a black band belongs. Unstyled it degrades to a plain heading on white, which is survivable — the warning in WEB_WORKFLOW.md is about markup that misbehaves unstyled. ========================================================================== */ /* 🚨 The band does NOT escape the measure — its BACKGROUND does. The other new-language pages set the band itself to `width: 100vw; left: 50%; margin-left: -50vw` and then re-centre the title with `max-width: 1440px`. That only lines up on a window at least 1510 wide: the theme wraps every page in `.aux-container { max-width: 1510px; padding: 0 35px }`, so below 1510 the content narrows with the window while a 1440 band inner does not — and between 1440 and 1510 the title slides out of the gutter and ends up flush against the edge of the screen. /in-the-media/, /past-events/ and /about/ all do that today at exactly 1440, which is not a rare width. Leaving the band inside the shell and painting the black with a pseudo- element removes the arithmetic entirely: the title inherits whatever measure the theme is giving the page, so it lands on the same left edge as the first card at every width, with no magic numbers to keep in step. */ .ins-band { position: relative !important; color: #fff !important; } .ins-band::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 50% !important; width: 100vw !important; margin-left: -50vw !important; background: #000 !important; } /* 48px of side padding: the same arrow gutter the rows carry, so the band title sits on the same left edge as the row labels rather than 48px left of them. Same device as voices.css. */ .ins-band__inner { position: relative !important; padding: 64px 48px 60px !important; } .ins-band__title { font-family: "Poppins", "Noto Sans", sans-serif !important; font-size: clamp(34px, 3.4vw, 52px) !important; font-weight: 700 !important; line-height: 1.06 !important; letter-spacing: .01em !important; text-transform: uppercase !important; color: #fff !important; margin: 0 !important; } /* ========================================================================== Row — label rail + carousel ========================================================================== */ /* 🚨 THE RAIL WIDTH IS SOLVED FROM THE LABEL, at every breakpoint. "PERSPECTIVES" is the longest label and it is one word, so it cannot wrap — give it a column narrower than itself and it breaks mid-word into "PERSPECTIVE / S", which is what a 200px column did. Measured: it sets **7.3px wide per px of font-size** (218px at 30px), so the pairs below are label + ~15px of slack: 40px -> 291 rail 300 34px -> 248 rail 262 37px -> 270 rail 285 28px -> 204 rail 215 Re-measure if a longer label is ever added — Voices is the one coming. */ /* 🚨 THE RAIL IS PROPORTIONAL, and it has to be, now that the measure is. (Chase, 2026-08-07: "insights明显是中间间隔空间太大了") It used to be a fixed 300px sized for the longest label, plus a fixed 72px gap. Against the old 1440 measure that was 372px of furniture — 26%. Against a 1037 measure at a 1440 window it is 32%, and because the column is sized for "PERSPECTIVES" while the row above it says "REPORTS", most of it is visibly empty: 180px of nothing between the View More button and the first card. The measure shrank; the furniture did not. 16vw is the front page's own `--fp-side-w` in frontpage.css, on `.fp-side`, which is this exact grid. 🚨 The GAP is 6vw and is now SITE-WIDE — the same value in events-hub.css, in-the-media.css, archive.css, voices.css and newsletter.css (Chase, 2026-08-11: "现在每个页面的这个gap是否可以设置都差不多的距离，例如6vw之类"). It was max(52px, 4vw) here. Change one, change all six. The 52px floor it used to carry was load-bearing and is now covered by the raw value: the prev arrow lives in this gap and needs 48px (38px button + 10px offset), and 6vw only ever applies above the 1024 breakpoint where the rail collapses — so its minimum is 6% of 1025, i.e. 61px. It clears. Drop below ~5.4vw and the arrow lands on the label. ========================================================================== */ .ins { --ins-rail: 16vw; --ins-colgap: 6vw; } .ins-row { display: grid !important; grid-template-columns: var(--ins-rail) minmax(0, 1fr) !important; gap: 0 var(--ins-colgap) !important; align-items: start !important; padding: 54px 48px !important; /* the side padding is where the arrows live */ } .ins-row + .ins-row { border-top: 1px solid var(--ins-line) !important; } /* a row whose source returns nothing hides itself rather than printing an empty strip — see the note on the same rule in voices.css */ .ins .ins-row[hidden] { display: none !important; } .ins-row__head { padding-top: 2px !important; } .ins-row__title { font-family: "Poppins", "Noto Sans", sans-serif !important; /* 🚨 SOLVED AGAINST THE RAIL, not chosen. "PERSPECTIVES" is the longest label and is ONE WORD, so it cannot wrap — give it a column narrower than itself and it breaks into "PERSPECTIVE / S". It measures **7.3px wide per px of font-size**, so the type has to scale with the rail or the two drift apart at every width but the one they were tuned at. 2.05vw against a 16vw rail leaves 7.3 × 2.05 = 15.0vw of label in 16vw of column — a constant 1vw of slack at every width, by construction rather than by a table of measured pairs. Tightest real case is a 1366 window: label 204px in a 219px rail. The 40px cap is the old desktop size, so nothing above 1950 changes; the 20px floor is where the rail collapses anyway. Re-check the 2.05 if a longer label is ever added. */ font-size: clamp(20px, 2.05vw, 40px) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: .01em !important; text-transform: uppercase !important; color: var(--ins-ink) !important; margin: 0 0 16px !important; } /* An , not a