/* ══════════════════════════════════════════════════════════════ Zhanchao Yang — Research Hub Loads after home.css and inherits its tokens: warm ivory · academic navy · restrained brick red Own background motif: an abstract transit-network field ══════════════════════════════════════════════════════════════ */ body.research-hub { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ══════════════════════════════════════════════════════════════ PAGE BACKGROUND — the customizable part ────────────────────────────────────────────────────────────── The backdrop is painted by one fixed layer behind everything. Two ways to change it: 1. Swap the background class on bg-network route grid with interchange dots (default) bg-grid plain index grid, no dots bg-contour soft tonal wash, no linework bg-blueprint tighter cool grid, cooler wash bg-plain ivory only 2. Or override the tokens below on body.research-hub: --rh-cell spacing of the network grid --rh-line line colour --rh-node interchange-dot colour --rh-wash-a/b the two tonal washes --rh-fade how far down the page the motif survives ══════════════════════════════════════════════════════════════ */ body.research-hub { --rh-cell: 58px; --rh-line: rgba(11, 35, 69, 0.05); --rh-node: rgba(165, 28, 48, 0.11); --rh-wash-a: rgba(217, 197, 165, 0.36); --rh-wash-b: rgba(128, 153, 181, 0.2); --rh-fade: 78%; --rh-backdrop: none; } body.research-hub::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--rh-backdrop); background-size: var(--rh-bg-size, auto); background-position: center top; -webkit-mask-image: linear-gradient( 180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) var(--rh-fade), rgba(0, 0, 0, 0) 100% ); mask-image: linear-gradient( 180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) var(--rh-fade), rgba(0, 0, 0, 0) 100% ); } /* content sits above the backdrop; the fixed nav keeps its own layer */ body.research-hub > main, body.research-hub > section, body.research-hub > footer { position: relative; z-index: 1; } /* ── Variant: route grid + interchange dots (default) ─────── */ body.bg-network { --rh-bg-size: var(--rh-cell) var(--rh-cell), var(--rh-cell) var(--rh-cell), var(--rh-cell) var(--rh-cell), auto, auto; --rh-backdrop: radial-gradient( circle at 50% 50%, var(--rh-node) 0 1.7px, transparent 2px ), repeating-linear-gradient(90deg, var(--rh-line) 0 1px, transparent 1px 100%), repeating-linear-gradient(0deg, var(--rh-line) 0 1px, transparent 1px 100%), radial-gradient(ellipse 58% 42% at 88% 4%, var(--rh-wash-a) 0%, transparent 72%), radial-gradient(ellipse 52% 38% at 6% 44%, var(--rh-wash-b) 0%, transparent 74%); } /* ── Variant: plain index grid ────────────────────────────── */ body.bg-grid { --rh-bg-size: var(--rh-cell) var(--rh-cell), var(--rh-cell) var(--rh-cell), auto; --rh-backdrop: repeating-linear-gradient(90deg, var(--rh-line) 0 1px, transparent 1px 100%), repeating-linear-gradient(0deg, var(--rh-line) 0 1px, transparent 1px 100%), radial-gradient(ellipse 60% 44% at 84% 6%, var(--rh-wash-a) 0%, transparent 74%); } /* ── Variant: tonal wash only ─────────────────────────────── */ body.bg-contour { --rh-backdrop: radial-gradient(ellipse 62% 46% at 86% 2%, var(--rh-wash-a) 0%, transparent 70%), radial-gradient(ellipse 58% 40% at 4% 38%, var(--rh-wash-b) 0%, transparent 72%), radial-gradient(ellipse 70% 34% at 60% 88%, rgba(200, 213, 197, 0.28) 0%, transparent 76%); } /* ── Variant: cooler, tighter blueprint ───────────────────── */ body.bg-blueprint { --rh-cell: 40px; --rh-line: rgba(69, 106, 150, 0.09); --rh-node: rgba(69, 106, 150, 0.16); --rh-wash-a: rgba(128, 153, 181, 0.22); --rh-wash-b: rgba(128, 153, 181, 0.14); --rh-bg-size: var(--rh-cell) var(--rh-cell), var(--rh-cell) var(--rh-cell), var(--rh-cell) var(--rh-cell), auto, auto; --rh-backdrop: radial-gradient( circle at 50% 50%, var(--rh-node) 0 1.5px, transparent 1.8px ), repeating-linear-gradient(90deg, var(--rh-line) 0 1px, transparent 1px 100%), repeating-linear-gradient(0deg, var(--rh-line) 0 1px, transparent 1px 100%), radial-gradient(ellipse 60% 44% at 88% 4%, var(--rh-wash-a) 0%, transparent 72%), radial-gradient(ellipse 52% 38% at 6% 46%, var(--rh-wash-b) 0%, transparent 74%); } /* ── Variant: nothing at all ──────────────────────────────── */ body.bg-plain { --rh-backdrop: none; } /* anchors clear the fixed nav */ body.research-hub [id] { scroll-margin-top: 96px; } /* ══ Hero ═══════════════════════════════════════════════════ */ .rh-hero { position: relative; padding: 152px 0 68px; border-bottom: 1px solid var(--line-soft); overflow: hidden; } .rh-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; } .rh-hero-text { max-width: 640px; } .rh-hero-eyebrow { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .rh-hero-eyebrow::before { content: ''; width: 30px; height: 1.5px; background: var(--red); } .rh-hero h1 { font-family: var(--serif); font-size: clamp(2.6rem, 5.6vw, 3.9rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 22px; } .rh-hero h1 em { font-style: italic; color: var(--red); } .rh-hero-statement { font-family: var(--serif); font-size: clamp(1.16rem, 2vw, 1.36rem); font-weight: 600; line-height: 1.58; color: var(--ink); margin-bottom: 16px; } .rh-hero-sub { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 560px; margin-bottom: 30px; } .rh-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .btn-outline { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 3px; padding: 13px 24px; background: rgba(255, 255, 255, 0.6); transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .btn-outline:hover { color: var(--red); border-color: var(--red); transform: translateY(-1px); } .rh-hero-meta { margin-top: 30px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); } /* the hero's own motif: routes converging on one interchange */ .rh-hero-art svg { display: block; width: 100%; height: auto; overflow: visible; } .rh-route { stroke-dasharray: 620; stroke-dashoffset: 620; animation: rh-draw 2.4s cubic-bezier(0.3, 0, 0.2, 1) forwards; } .rh-route.r2 { animation-delay: 0.18s; } .rh-route.r3 { animation-delay: 0.36s; } .rh-route.r4 { animation-delay: 0.54s; } .rh-route.r5 { animation-delay: 0.9s; } .rh-route.r6 { animation-delay: 1.05s; } @keyframes rh-draw { to { stroke-dashoffset: 0; } } .rh-stop { opacity: 0; animation: rh-fade-in 0.7s ease forwards; animation-delay: 1.4s; } .rh-stop.big { animation-delay: 1s; } @keyframes rh-fade-in { to { opacity: 1; } } /* ══ Research network ═══════════════════════════════════════ */ .rh-net { padding: 96px 0 88px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(245, 242, 236, 0.8) 0%, rgba(245, 242, 236, 0) 100%); } .rn-diagram { margin: 12px 0 6px; } .rn-diagram svg { display: block; width: 100%; height: auto; overflow: visible; } .rn-caption { font-size: 0.82rem; color: var(--ink-faint); text-align: center; max-width: 560px; margin: 0 auto; } /* edges draw themselves once the diagram scrolls in */ .rn-edge { stroke-dasharray: 480; stroke-dashoffset: 480; } .rn-diagram.go .rn-edge { animation: rh-draw 1.6s cubic-bezier(0.3, 0, 0.2, 1) forwards; } .rn-diagram.go .rn-edge.e2 { animation-delay: 0.1s; } .rn-diagram.go .rn-edge.e3 { animation-delay: 0.2s; } .rn-diagram.go .rn-edge.e4 { animation-delay: 0.3s; } .rn-diagram.go .rn-edge.e5 { animation-delay: 0.5s; } .rn-diagram.go .rn-edge.e6 { animation-delay: 0.6s; } .rn-diagram.go .rn-edge.e7 { animation-delay: 0.7s; } .rn-hub, .rn-node { opacity: 0; cursor: pointer; text-decoration: none; transition: opacity 0.4s ease; } .rn-diagram.go .rn-hub, .rn-diagram.go .rn-node { animation: rh-fade-in 0.6s ease forwards; } .rn-diagram.go .rn-hub { animation-delay: 0.35s; } .rn-diagram.go .rn-node { animation-delay: 0.95s; } .rn-hub circle, .rn-node circle { transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); transform-box: fill-box; transform-origin: center; } .rn-hub:hover circle, .rn-hub:focus-visible circle, .rn-node:hover circle, .rn-node:focus-visible circle { transform: scale(1.18); } .rn-hub-label { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; fill: var(--ink); } .rn-node-label { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; fill: rgba(11, 35, 69, 0.66); transition: fill 0.3s ease; } .rn-node:hover .rn-node-label, .rn-node:focus-visible .rn-node-label { fill: var(--red); } .rn-hub:focus-visible, .rn-node:focus-visible { outline: none; } /* hover a hub: its projects stay lit, the rest recede */ .rn-diagram.peek .rn-node:not(.is-peek), .rn-diagram.peek .rn-hub:not(.is-peek) { opacity: 0.24; } /* mobile fallback for the diagram */ .rn-list { display: none; list-style: none; margin: 14px 0 26px; } .rn-list li { position: relative; padding: 0 0 26px 34px; } .rn-list li::before { content: ''; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 4px solid var(--rn-c, var(--sand-deep)); } .rn-list li::after { content: ''; position: absolute; left: 9px; top: 25px; bottom: -2px; width: 2px; background: var(--line); } .rn-list li:last-child::after { display: none; } .rn-list .rn-list-theme { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 4px; } .rn-list p { font-size: 0.9rem; color: var(--ink-soft); } .rn-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .rn-list a:hover { color: var(--red); border-color: var(--red); } /* ══ Filters ════════════════════════════════════════════════ */ .rh-filterbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0 20px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 54px; } .rh-filter-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } .rh-chips { display: flex; gap: 8px; flex-wrap: wrap; } .rh-chip { font-family: inherit; font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); background: rgba(255, 255, 255, 0.65); border: 1px solid var(--line); border-radius: 100px; padding: 7px 16px; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .rh-chip:hover { color: var(--red); border-color: var(--red); } .rh-chip[aria-pressed='true'] { color: #fdfcf9; background: var(--ink); border-color: var(--ink); } .rh-filter-status { font-size: 0.8rem; color: var(--ink-faint); margin-left: auto; white-space: nowrap; } /* ══ Theme sections ═════════════════════════════════════════ */ .rh-theme { padding-top: 18px; margin-bottom: 72px; } .rh-theme-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--rh-accent, var(--sand-deep)); margin-bottom: 12px; } .rh-theme-num { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--red); letter-spacing: 0.06em; flex-shrink: 0; } .rh-theme-head h3 { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.72rem); font-weight: 600; line-height: 1.25; } .rh-theme-intro { font-size: 0.95rem; color: var(--ink-soft); max-width: 640px; margin-bottom: 34px; } .rh-theme.t-policy { --rh-accent: var(--sand-deep); } .rh-theme.t-perception { --rh-accent: var(--sage-deep); } .rh-theme.t-outcomes { --rh-accent: var(--terracotta); } /* ══ Project cards ══════════════════════════════════════════ */ .rh-projects { display: flex; flex-direction: column; gap: 26px; } .rh-project { display: grid; grid-template-columns: 336px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--rh-accent, var(--sand-deep)); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, opacity 0.45s ease, filter 0.45s ease; } .rh-project:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .rh-fig { background: var(--surface-warm); border-right: 1px solid var(--line-soft); padding: 26px 22px; display: flex; align-items: center; } .rh-fig svg { display: block; width: 100%; height: auto; } .rh-fig .fig-anim { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .rh-project:hover .fig-anim { transform: translateX(4px); } .rh-body { padding: 28px 32px 26px; display: flex; flex-direction: column; } .rh-status { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; } .rh-status.s-emerging { color: var(--blue); } .rh-status.s-complete { color: rgba(83, 119, 91, 0.95); } .rh-body h4 { font-family: var(--serif); font-size: 1.42rem; font-weight: 600; line-height: 1.26; margin-bottom: 4px; } .rh-subtitle { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .rh-q { font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.55; color: var(--ink); border-left: 2px solid var(--rh-accent, var(--sand-deep)); padding-left: 16px; margin-bottom: 18px; } .rh-taglines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .rh-tagline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .rh-tagline > span:first-child { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); width: 58px; flex-shrink: 0; } .rh-tags { display: flex; flex-wrap: wrap; gap: 6px; } .rh-tags span { font-size: 0.7rem; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 100px; padding: 3px 11px; } .rh-tags.methods span { border-style: dashed; color: var(--ink-faint); } .rh-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 4px; } .rh-related { font-size: 0.78rem; color: var(--ink-faint); } .rh-related a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); transition: color 0.25s ease, border-color 0.25s ease; } .rh-related a:hover { color: var(--red); border-color: var(--red); } .rh-cta { font-size: 0.86rem; font-weight: 600; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; margin-left: auto; } .rh-cta .arrow { transition: transform 0.3s ease; } .rh-cta:hover .arrow { transform: translateX(4px); } .rh-pending { font-size: 0.78rem; color: var(--ink-faint); font-style: italic; margin-left: auto; white-space: nowrap; } /* the emerging agenda is deliberately not a finished project card */ .rh-project.is-emerging { background: linear-gradient(150deg, rgba(200, 213, 197, 0.28) 0%, var(--surface) 62%); border-style: dashed; border-left-style: solid; box-shadow: none; } .rh-project.is-emerging:hover { box-shadow: var(--shadow); } .rh-project.is-emerging .rh-fig { background: transparent; border-right-color: transparent; } /* arriving from the network diagram */ .rh-project.is-flash, .rh-arch-card.is-flash { box-shadow: 0 0 0 2px rgba(165, 28, 48, 0.4), var(--shadow-lift); } /* filtering: matches stay, the rest recede */ body.is-filtering .rh-project:not(.is-match), body.is-filtering .rh-arch-card:not(.is-match) { opacity: 0.26; filter: saturate(0.2); } body.is-filtering .rh-project:not(.is-match):hover, body.is-filtering .rh-arch-card:not(.is-match):hover { opacity: 0.6; } body.is-filtering .rn-node:not(.is-match) { opacity: 0.24; } body.is-filtering-theme .rn-hub:not(.is-match) { opacity: 0.24; } /* ══ Earlier research ═══════════════════════════════════════ */ .rh-earlier { background: var(--surface-warm); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .rh-archive { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .rh-arch-card { display: grid; grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.65fr); grid-template-rows: auto auto auto 1fr; column-gap: 52px; padding: 28px 0 26px; border-bottom: 1px solid var(--line); transition: opacity 0.45s ease, filter 0.45s ease; } .rh-arch-kicker { grid-column: 1; grid-row: 1; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; } .rh-arch-card h4 { grid-column: 1; grid-row: 2 / span 3; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.32; margin: 0; } .rh-arch-card > p:not(.rh-arch-kicker) { grid-column: 2; grid-row: 1 / span 2; font-size: 0.87rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px; } .rh-arch-card .rh-tags { grid-column: 2; grid-row: 3; margin-bottom: 14px; } .rh-arch-card .rh-foot { grid-column: 2; grid-row: 4; padding-top: 0; } /* ══ Methods ════════════════════════════════════════════════ */ .rh-methods-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .rh-method { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 100px; padding: 11px 24px; cursor: pointer; box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 10px; transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; } .rh-method::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rh-accent, var(--blue-soft)); flex-shrink: 0; } .rh-method:hover { color: var(--red); border-color: var(--red); transform: translateY(-2px); } .rh-method[aria-pressed='true'] { background: var(--ink); color: #fdfcf9; border-color: var(--ink); } .rh-method-note { font-size: 0.84rem; color: var(--ink-faint); } /* ══ Research evolution ═════════════════════════════════════ */ .rh-evolution { background: var(--surface-warm); border-top: 1px solid var(--line-soft); } .rh-evo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; position: relative; margin-top: 10px; } .rh-evo::before { content: ''; position: absolute; left: 8px; right: 8px; top: 11px; height: 2px; background: rgba(11, 35, 69, 0.18); } .rh-evo-step { position: relative; padding-top: 44px; } .rh-evo-step::before { content: ''; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 4px solid var(--rh-c, var(--sand-deep)); } .rh-evo-step:nth-child(1) { --rh-c: var(--sand-deep); } .rh-evo-step:nth-child(2) { --rh-c: var(--sage-deep); } .rh-evo-step:nth-child(3) { --rh-c: var(--blue-soft); } .rh-evo-step:nth-child(4) { --rh-c: var(--terracotta); } .rh-evo-step h4 { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.35; margin-bottom: 10px; } .rh-evo-step ul { list-style: none; font-size: 0.85rem; line-height: 1.75; color: var(--ink-soft); } .rh-evo-note { margin-top: 44px; font-size: 0.9rem; color: var(--ink-faint); max-width: 620px; } /* ══ Responsive ═════════════════════════════════════════════ */ @media (max-width: 1040px) { .rh-project { grid-template-columns: 268px minmax(0, 1fr); } } @media (max-width: 900px) { .rh-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; } .rh-hero-art { display: none; } .rn-diagram { display: none; } .rn-list { display: block; } .rn-caption { text-align: left; margin: 0; } .rh-project { grid-template-columns: minmax(0, 1fr); } .rh-arch-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; } .rh-arch-kicker, .rh-arch-card h4, .rh-arch-card > p:not(.rh-arch-kicker), .rh-arch-card .rh-tags, .rh-arch-card .rh-foot { grid-column: 1; grid-row: auto; } .rh-arch-card h4 { margin-bottom: 10px; } .rh-fig { border-right: none; border-bottom: 1px solid var(--line-soft); padding: 20px 24px 14px; } .rh-evo { grid-template-columns: minmax(0, 1fr); gap: 0; } .rh-evo::before { left: 8px; right: auto; top: 12px; bottom: 30px; height: auto; width: 2px; } .rh-evo-step { padding: 0 0 30px 38px; } .rh-evo-step::before { top: 4px; } } @media (max-width: 720px) { .rh-hero { padding: 118px 0 52px; } .rh-net { padding: 66px 0 60px; } .rh-body { padding: 24px 22px 22px; } .rh-filterbar { margin-bottom: 40px; } .rh-filter-status { margin-left: 0; width: 100%; } .rh-theme { margin-bottom: 54px; } body.research-hub { --rh-cell: 44px; } } /* ══ Reduced motion ═════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .rh-route, .rh-stop, .rn-edge, .rn-hub, .rn-node { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } .rh-project, .rh-arch-card, .rh-method, .rn-hub circle, .rn-node circle { transition: none !important; } .rh-project:hover, .rh-arch-card:hover, .rh-method:hover { transform: none; } }