/* ============================================================ Research Portal — Shared layer Loaded by index.html, archive.html, and every research//index.html. Two responsibilities: 1. Bilingual show/hide rules (always-on, scoped to [data-lang]) 2. The floating .portal-ui capsule on research detail pages (back link + lang toggle) Home + Archive pages additionally use the Apple-style tokens below, but research pages keep their own design language and are untouched by this file beyond rules 1 and 2. ============================================================ */ /* --- Apple-style tokens (used by home + archive only) ---------- */ :root { --rp-bg: #FBFBFD; --rp-bg-alt: #F5F5F7; --rp-surface: #FFFFFF; --rp-ink: #1D1D1F; --rp-ink-soft: #424245; --rp-muted: #6E6E73; --rp-subtle: #86868B; --rp-rule: #D2D2D7; --rp-rule-soft: #E5E5E7; --rp-accent: #0066CC; --rp-accent-hover: #0077ED; --rp-cat-companies: #1D4E89; --rp-cat-industry: #2E5B3E; --rp-cat-playbook: #8C4A23; --rp-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; --rp-font-mono: "Geist Mono", "SF Mono", ui-monospace, monospace; --rp-font-zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif; } /* --- Bilingual show/hide ---------------------------------------- Supports both conventions in parallel: - Class:

...

- Attribute:

...

Hide rules predicate on . portal.js mirrors the same value onto for legacy CSS compatibility. */ html[data-lang="en"] .zh, html[data-lang="en"] [data-lang="zh"] { display: none !important; } html[data-lang="zh"] .en, html[data-lang="zh"] [data-lang="en"] { display: none !important; } /* --- Floating capsule UI (research detail pages) --------------- */ .portal-ui { position: fixed; top: 16px; right: 16px; z-index: 9999; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; background: rgba(251, 251, 253, 0.78); border: 1px solid rgba(210, 210, 215, 0.6); border-radius: 999px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); font-family: var(--rp-font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease; } .portal-ui:hover { opacity: 1; } .portal-ui .portal-back { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--rp-ink-soft); padding: 4px 10px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .portal-ui .portal-back:hover { background: rgba(0, 0, 0, 0.05); color: var(--rp-ink); } .portal-ui .portal-back .back-arrow { font-size: 13px; line-height: 1; display: inline-block; transition: transform 0.15s ease; } .portal-ui .portal-back:hover .back-arrow { transform: translateX(-2px); } .portal-ui .portal-divider { width: 1px; height: 12px; background: rgba(0, 0, 0, 0.12); margin: 0 2px; } .portal-ui .lang-switch { display: inline-flex; gap: 1px; } .portal-ui .lang-btn { background: transparent; border: none; cursor: pointer; padding: 4px 9px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--rp-muted); border-radius: 999px; letter-spacing: 0.02em; transition: all 0.15s ease; font-variant-numeric: tabular-nums; } .portal-ui .lang-btn:hover { color: var(--rp-ink); } .portal-ui .lang-btn.active { background: var(--rp-ink); color: #fff; } /* Dark-mode adaptation: research pages with dark hero can opt in by adding class .portal-ui-dark on . */ html.portal-ui-dark .portal-ui { background: rgba(20, 20, 22, 0.72); border-color: rgba(255, 255, 255, 0.12); } html.portal-ui-dark .portal-ui .portal-back { color: #d2d2d7; } html.portal-ui-dark .portal-ui .portal-back:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } html.portal-ui-dark .portal-ui .portal-divider { background: rgba(255,255,255,0.15); } html.portal-ui-dark .portal-ui .lang-btn { color: #a1a1a6; } html.portal-ui-dark .portal-ui .lang-btn:hover { color: #fff; } html.portal-ui-dark .portal-ui .lang-btn.active { background: #fff; color: #1D1D1F; } /* Hide the capsule on pages with their own top nav (home/archive) */ html[data-portal-page="home"] .portal-ui, html[data-portal-page="archive"] .portal-ui { display: none !important; } @media (max-width: 600px) { .portal-ui { top: 10px; right: 10px; padding: 4px 6px; font-size: 11px; } .portal-ui .portal-back { padding: 3px 8px; } .portal-ui .lang-btn { padding: 3px 7px; font-size: 11px; } } @media print { .portal-ui { display: none !important; } }