/* ═══════════════════════════════════════════════════════════════ SCALE · IIT Bhubaneswar · Master Stylesheet Fonts: self-hosted Nunito Sans (body) + Source Serif 4 (headings) Theme system: choose a palette with . Palette tokens live here; component rules below should use only tokens. ═══════════════════════════════════════════════════════════════ */ @font-face { font-family: "Nunito Sans"; src: url("assets/fonts/nunito-sans-latin-300-700.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("assets/fonts/source-serif-4-latin-300-700.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("assets/fonts/source-serif-4-latin-italic-400-600.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; } /* ── RESET & BASE ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Type and layout tokens */ --serif: "Source Serif 4", Georgia, serif; --sans: "Nunito Sans", system-ui, sans-serif; --mono: 'SFMono-Regular', 'Roboto Mono', 'Courier New', monospace; --nav-h: 66px; --max-w: 1320px; --radius: 14px; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --transition: .22s ease; /* Fallback palette. The default site theme is html[data-theme="biopolymer-helix"]. */ --crimson: #5c8dc5; --crimson-dark: #3f6f9f; --crimson-light: #e4edf6; --navy: #3f4a54; --navy-light: #e2e7ea; --sage: #909eae; --sage-light: #e6ebef; --clay: #8d969d; --paper: #f3f5f5; --paper-warm: #e5eaec; --text: #1d2424; --text-mid: #394349; --text-muted: #68757c; --ink-soft: #68757c; --border: #c7d0d4; --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-alt2: #edf1f2; --theme-header: #3f4a54; --theme-header-border: rgba(255,255,255,.16); --theme-active: #5c8dc5; --theme-card: #ffffff; --theme-card-soft: rgba(255,255,255,.86); } /* ═══════════════════════════════════════════════════════════════ PALETTE CHOICE Set the active palette in HTML: . To add a new palette, copy one block and change only these color tokens. ═══════════════════════════════════════════════════════════════ */ html[data-theme="mist-alloy"] { --crimson: #5c8dc5; --crimson-dark: #3f6f9f; --crimson-light: #e4edf6; --navy: #3f4a54; --navy-light: #e2e7ea; --sage: #909eae; --sage-light: #e6ebef; --clay: #8d969d; --paper: #f3f5f5; --paper-warm: #e5eaec; --text: #1d2424; --text-mid: #394349; --text-muted: #68757c; --border: #c7d0d4; --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-alt2: #edf1f2; --theme-header: #3f4a54; --theme-header-border: rgba(255,255,255,.16); --theme-active: #5c8dc5; --theme-card: #ffffff; --theme-card-soft: rgba(255,255,255,.86); } html[data-theme="forest-marine"] { --crimson: #57bc90; --crimson-dark: #2f936d; --crimson-light: #dff3eb; --navy: #015249; --navy-light: #dcebe8; --sage: #77c9d4; --sage-light: #e4f4f6; --clay: #a5a5af; --paper: #f4f7f6; --paper-warm: #e7eeec; --text: #1a302d; --text-mid: #24413d; --text-muted: #60736f; --border: #bdd2cf; --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-alt2: #eef4f2; --theme-header: #015249; --theme-header-border: rgba(255,255,255,.16); --theme-active: #57bc90; --theme-card: #ffffff; --theme-card-soft: rgba(255,255,255,.84); } html[data-theme="cedar-copper"] { --crimson: #a45a37; --crimson-dark: #794026; --crimson-light: #f0e3dc; --navy: #173c35; --navy-light: #e2ebe8; --sage: #426a5a; --sage-light: #e0ebe6; --clay: #a45a37; --paper: #f4f4ef; --paper-warm: #e7e8df; --text: #181f1c; --text-mid: #38443f; --text-muted: #6b746e; --border: #cccfc3; --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-alt2: #ecede6; --theme-header: #173c35; --theme-header-border: rgba(255,255,255,.16); --theme-active: #b8673f; --theme-card: #fffefa; --theme-card-soft: rgba(255,254,250,.82); } html[data-theme="plum-rose"] { --crimson: #b84a7c; --crimson-dark: #87315a; --crimson-light: #f3e2ea; --navy: #3d294f; --navy-light: #e8e1ee; --sage: #7b6aa6; --sage-light: #e9e5f1; --clay: #9c6b86; --paper: #f5f2f5; --paper-warm: #e9e2eb; --text: #241f2b; --text-mid: #45384f; --text-muted: #74697c; --border: #d2c7d8; --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-alt2: #efe9f0; --theme-header: #3d294f; --theme-header-border: rgba(255,255,255,.16); --theme-active: #d36b9a; --theme-card: #ffffff; --theme-card-soft: rgba(255,255,255,.84); } html[data-theme="ember-orange"] { --crimson: #c86b38; --crimson-dark: #944820; --crimson-light: #f4e5dc; --navy: #2f3a33; --navy-light: #e3e9e4; --sage: #6d8061; --sage-light: #e8eee2; --clay: #a9683d; --paper: #f5f3ee; --paper-warm: #e8e3d8; --text: #221f1b; --text-mid: #403c34; --text-muted: #746d63; --border: #d1c8b9; --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-alt2: #eee8de; --theme-header: #2f3a33; --theme-header-border: rgba(255,255,255,.16); --theme-active: #df8044; --theme-card: #fffefa; --theme-card-soft: rgba(255,254,250,.84); } html[data-theme="indigo-lab"] { --crimson: #cf6766; --crimson-dark: #9e3f43; --crimson-light: #f3dfdf; --navy: #30415d; --navy-light: #e4e9ef; --sage: #8eaebd; --sage-light: #e5eef2; --clay: #667b91; --paper: #e8eef0; --paper-warm: #dce5e9; --text: #1b2430; --text-mid: #2e3948; --text-muted: #657181; --border: #c0ccd4; --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-alt2: #eef3f5; --theme-header: #30415d; --theme-header-border: rgba(255,255,255,.18); --theme-active: #cf6766; --theme-card: #ffffff; --theme-card-soft: rgba(255,255,255,.86); } html[data-theme="biopolymer-helix"] { --crimson: #805AD5; --crimson-dark: #5B3DA8; --crimson-light: #EEE8FB; --navy: #123F38; --navy-light: #D9ECE8; --sage: #4FD1C5; --sage-light: #DDF8F5; --clay: #6E8581; --paper: #F4F7F6; --paper-warm: #E3F0ED; --text: #102725; --text-mid: #254B46; --text-muted: #637A75; --border: #BDD5D0; --bg: var(--paper); --bg-alt: var(--paper-warm); --bg-alt2: #EAF4F1; --theme-header: #123F38; --theme-header-border: rgba(255,255,255,.16); --theme-active: #4FD1C5; --theme-card: #ffffff; --theme-card-soft: rgba(255,255,255,.88); } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--crimson); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--crimson-dark); } img { display: block; max-width: 100%; } ul { list-style: none; } /* ── TYPOGRAPHY ── */ body, .btn, .badge, .lead, .logic-step strong, .technique-strip span, .project-story strong, .project-category, .project-story span, .tag-row span, .tag-row em, .project-pubs a, .nav-logo span, .nav-links a, .join-route-grid .opening-type, .topic-filter-bar .filter-btn, .hero .btn { font-family: var(--sans); } h1, h2, h3, h4, .nav-logo, .theme-title, .featured-pub-title, .student-name, .value-title, .opening-title, .join-route-grid .opening-title span, .course-title, .thrust-link, .thrust-link-title, .thrust-header h2, .project-card h3, .research-thrust-card h3, .hero-desc, .home-team-portrait, .home-team-name, .member-photo span, .member-card > .member-photo span { font-family: var(--serif); } .section-label, .hero-tag, .footer-nav-title, .course-code, .opening-type, .student-topic, .pi-role, .opening-req-title, .contact-obfuscated, .project-index, .thrust-link-index, .thrust-link-desc, .logic-step span, .hero-system-card figcaption, .student-tag, .filter-btn, .pi-meta-item label, .footer-logo, .footer-nav-links a, .home-team-link, .team-role-label, .member-card .student-link, .highlight-topic, .highlight-meta, .topic-paper-meta, .join-contact-label, .join-contact-details span { font-family: var(--mono); } h1, h2, h3, h4 { font-weight: 700; color: var(--text); line-height: 1.2; } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } h3 { font-size: 1.25rem; } p { color: var(--text-mid); } /* ── LAYOUT ── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; } .section { padding: 80px 0; } .section-alt { background: var(--bg-alt); } /* ── SECTION LABELS ── */ .section-label { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--crimson); margin-bottom: 10px; } .section-header { margin-bottom: 48px; } .section-header.centered { text-align: center; max-width: 640px; margin: 0 auto 48px; } .section-title { margin-bottom: 12px; } .section-subtitle { font-size: .95rem; color: var(--text-muted); line-height: 1.75; max-width: 600px; } .section-header.centered .section-subtitle { margin: 0 auto; } /* ── DIVIDER ── */ .divider { border: none; border-top: 1px solid var(--border); margin: 48px 0; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 10px 24px; border-radius: var(--radius); transition: all var(--transition); cursor: pointer; text-decoration: none; border: 1.5px solid transparent; letter-spacing: .2px; } .btn-primary { background: var(--crimson); color: #fff; border-color: var(--crimson); } .btn-primary:hover { background: var(--crimson-dark); border-color: var(--crimson-dark); color: #fff; } .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); } .btn-secondary:hover { border-color: var(--crimson); color: var(--crimson); } .btn-group { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; } /* ═══════════════════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--nav-h); background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .nav-container { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-size: 1.1rem; font-weight: 700; color: var(--text); letter-spacing: -.2px; } .nav-logo span { color: var(--crimson); } .nav-links { display: flex; gap: 0; } .nav-links a { font-size: .8rem; font-weight: 500; color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius); transition: color var(--transition), background var(--transition); position: relative; } .nav-links a:hover { color: var(--crimson); background: var(--crimson-light); } .nav-links a.active { color: var(--crimson); font-weight: 600; } .nav-links a.active::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; background: var(--crimson); border-radius: 2px; } /* ═══════════════════════════════════════════════════════════════ PAGE HERO (inner pages) ═══════════════════════════════════════════════════════════════ */ .page-hero { padding: calc(var(--nav-h) + 56px) 0 56px; background: var(--bg-alt); border-bottom: 1px solid var(--border); } .page-hero-inner { max-width: 720px; } .page-title { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 12px; } .page-subtitle { font-size: 1rem; color: var(--text-muted); line-height: 1.75; } /* ═══════════════════════════════════════════════════════════════ HERO (homepage) ═══════════════════════════════════════════════════════════════ */ .hero { padding: calc(var(--nav-h) + 72px) 0 72px; background: #fff; border-bottom: 1px solid var(--border); } .hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center; } .hero-tag { font-size: .72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--crimson); margin-bottom: 16px; } .hero-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: 20px; color: var(--text); line-height: 1.15; } .hero-title em { color: var(--crimson); font-style: normal; } .hero-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.8; max-width: 520px; margin-bottom: 28px; } /* ═══════════════════════════════════════════════════════════════ RESEARCH THEME CARDS ═══════════════════════════════════════════════════════════════ */ .research-themes-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 40px; } .research-theme-card { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 28px 28px 24px; transition: box-shadow var(--transition), border-color var(--transition); position: relative; } .research-theme-card:hover { box-shadow: var(--shadow-md); border-color: rgba(163,31,52,.3); } .research-theme-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--crimson); border-radius: var(--radius) var(--radius) 0 0; opacity: 0; transition: opacity var(--transition); } .research-theme-card:hover::before { opacity: 1; } .theme-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; } .theme-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; } .theme-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; } /* ═══════════════════════════════════════════════════════════════ FEATURED PUBLICATIONS ═══════════════════════════════════════════════════════════════ */ .featured-pub { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--border); } .featured-pub:first-of-type { border-top: 1px solid var(--border); } .featured-pub-badge { flex-shrink: 0; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--crimson); background: var(--crimson-light); padding: 4px 10px; border-radius: var(--radius); margin-top: 2px; } .featured-pub-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.4; } .featured-pub-title a { color: inherit; text-decoration: underline; text-decoration-color: rgba(1,31,91,.22); text-underline-offset: 3px; } .featured-pub-title a:hover { color: var(--crimson); text-decoration-color: rgba(153,0,0,.42); } .featured-pub-authors { font-size: .82rem; color: var(--text-muted); margin-bottom: 4px; } .featured-pub-journal { font-size: .82rem; color: var(--text-mid); font-style: italic; } .pi-highlight { color: var(--navy); font-weight: 600; font-style: normal; } /* ═══════════════════════════════════════════════════════════════ FUNDING CARDS ═══════════════════════════════════════════════════════════════ */ .funding-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .funding-card { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 20px 22px; } .funding-agency { font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--crimson); margin-bottom: 8px; } .funding-title { font-size: .85rem; color: var(--text-mid); line-height: 1.6; } .contact-obfuscated { display: inline-block; font-size: .72rem; letter-spacing: 0; white-space: nowrap; word-break: normal; } .project-index { margin-bottom: 16px; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--crimson); } .pi-name { color: var(--navy); font-weight: 600; } .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .filter-btn { font-size: .78rem; font-weight: 500; padding: 7px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--text-muted); cursor: pointer; transition: all var(--transition); } .filter-btn:hover { border-color: var(--crimson); color: var(--crimson); } .filter-btn.active { background: var(--crimson); border-color: var(--crimson); color: #fff; } .paper-list { border-top: 1px solid var(--border); } .paper-item { padding: 16px 0; border-bottom: 1px solid #f0f0f0; transition: padding-left var(--transition); } .paper-item:hover { padding-left: 6px; } .publication-list { list-style: decimal; padding-left: 1.25rem; } .publication-list .paper-item { padding-left: .35rem; } .paper-citation { font-size: .88rem; color: var(--text-mid); line-height: 1.65; } .paper-title-link { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(1,31,91,.28); text-decoration-thickness: 1px; text-underline-offset: 3px; } .paper-title-link:hover { color: var(--crimson); text-decoration-color: rgba(153,0,0,.42); } /* ═══════════════════════════════════════════════════════════════ TEAM PAGE ═══════════════════════════════════════════════════════════════ */ .pi-section { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; padding: 48px 0; border-bottom: 1px solid var(--border); margin-bottom: 48px; } .pi-name { font-size: 2rem; margin-bottom: 4px; } .pi-role { font-size: .78rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--crimson); margin-bottom: 20px; } .pi-bio { font-size: .92rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; } .pi-expertise { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; } .pi-expertise span { font-size: .62rem; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--sage); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .pi-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-bottom: 20px; } .pi-meta-item label { font-size: .65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 2px; } .pi-meta-item span { font-size: .85rem; color: var(--text-mid); } .pi-links { display: flex; gap: 10px; flex-wrap: wrap; } .pi-link { font-size: .75rem; font-weight: 500; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-mid); transition: all var(--transition); } a.pi-link:hover { border-color: var(--crimson); color: var(--crimson); background: var(--crimson-light); } .student-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 2px; } .student-topic { font-size: .78rem; color: var(--crimson); font-weight: 500; margin-bottom: 6px; } .student-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 10px; } .student-tags { display: flex; flex-wrap: wrap; gap: 5px; } .student-tag { font-size: .62rem; background: var(--crimson-light); color: var(--crimson); padding: 2px 8px; border-radius: 10px; font-weight: 500; } .student-links { display: flex; gap: 6px; margin-top: 10px; } .student-link { font-size: .7rem; color: var(--text-muted); padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--radius); transition: all var(--transition); } .student-link:hover { color: var(--crimson); border-color: var(--crimson); } /* Alumni */ .alumni-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; } .alumni-item { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; } .alumni-name { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 2px; } .alumni-thesis { font-size: .72rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 4px; } .alumni-year { font-size: .68rem; font-weight: 600; color: var(--crimson); } /* ═══════════════════════════════════════════════════════════════ JOIN US PAGE ═══════════════════════════════════════════════════════════════ */ .values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 64px; } .value-card { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 24px; } .value-icon { font-size: 1.8rem; display: block; margin-bottom: 12px; } .value-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; } .value-desc { font-size: .83rem; color: var(--text-muted); line-height: 1.7; } .openings-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 64px; } .opening-card { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 28px; position: relative; transition: box-shadow var(--transition); } .opening-card:hover { box-shadow: var(--shadow-md); } .opening-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--crimson); border-radius: var(--radius) var(--radius) 0 0; } .opening-type { font-size: .68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crimson); margin-bottom: 8px; } .opening-title { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 12px; } .opening-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; } .opening-requirements { background: var(--bg-alt); border-radius: 4px; padding: 16px; margin-bottom: 20px; } .opening-req-title { font-size: .68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .opening-req-item { font-size: .82rem; color: var(--text-mid); padding: 4px 0; border-bottom: 1px solid var(--border); } .opening-req-item:last-child { border-bottom: none; } .opening-req-item::before { content: '→ '; color: var(--crimson); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════ TEACHING PAGE ═══════════════════════════════════════════════════════════════ */ .courses-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; } .course-card { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 24px 26px; transition: box-shadow var(--transition); } .course-card:hover { box-shadow: var(--shadow-md); } .course-code { font-size: .68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crimson); margin-bottom: 6px; } .course-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; } .course-desc { font-size: .83rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; } .course-meta { font-size: .75rem; color: var(--text-muted); display: flex; gap: 16px; flex-wrap: wrap; } .course-meta span::before { content: '· '; color: var(--crimson); } .course-meta span:first-child::before { content: ''; } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .site-footer { background: var(--navy); color: rgba(255,255,255,.65); padding: 56px 0 32px; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 40px; } .footer-logo { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 8px; } .footer-tagline { font-size: .78rem; line-height: 1.75; } .footer-nav-title { font-size: .65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; } .footer-nav-links li { margin-bottom: 6px; } .footer-nav-links a { font-size: .82rem; color: rgba(255,255,255,.65); transition: color var(--transition); } .footer-nav-links a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-text { font-size: .75rem; } .footer-socials { display: flex; gap: 16px; } .footer-socials a { font-size: .78rem; color: rgba(255,255,255,.55); transition: color var(--transition); } .footer-socials a:hover { color: #fff; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1000px) { .hero-inner { grid-template-columns: 1fr; } .pi-section { grid-template-columns: 200px 1fr; gap: 32px; } .funding-grid { grid-template-columns: 1fr 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } .alumni-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 768px) { :root { --nav-h: 56px; } .container { padding: 0 20px; } .section { padding: 56px 0; } .research-themes-grid { grid-template-columns: 1fr; } .openings-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr 1fr; } .courses-grid { grid-template-columns: 1fr; } .funding-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; text-align: center; } .alumni-grid { grid-template-columns: 1fr 1fr; } .pi-meta { grid-template-columns: 1fr; } .pi-section { grid-template-columns: 1fr; } } @media (max-width: 480px) { .nav-links { display: none; } .values-grid { grid-template-columns: 1fr; } .alumni-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════ SCALE EDITORIAL IDENTITY REFRESH Inspired by the uploaded references, adapted for computational science. ═══════════════════════════════════════════════════════════════ */ html { background: var(--paper); } body { background: var(--paper); color: var(--text); } a { color: var(--navy); } a:hover { color: var(--clay); } p { color: var(--text-mid); } h1, h2, h3, h4 { color: var(--navy); letter-spacing: 0; font-weight: 600; } h1 { font-size: clamp(2.7rem, 5.4vw, 5.6rem); line-height: 1.02; } h2 { font-size: clamp(1.85rem, 3vw, 3.2rem); line-height: 1.12; } h3 { font-size: clamp(1.35rem, 2vw, 2rem); } .container { max-width: var(--max-w); padding: 0 clamp(24px, 5vw, 88px); } .section { padding: clamp(84px, 10vw, 150px) 0; } .section-alt { background: var(--paper-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .site-header { position: sticky; height: var(--nav-h); background: var(--navy); backdrop-filter: blur(16px); border-bottom-color: rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(255,255,255,.08); } .nav-container { padding: 0 clamp(24px, 5vw, 88px); max-width: none; } .nav-logo { display: flex; flex-direction: column; justify-content: center; gap: 3px; max-width: min(430px, 42vw); font-size: .96rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: #ffffff; white-space: nowrap; } .nav-logo strong { font: inherit; color: #ffffff; } .nav-logo span { color: rgba(255,255,255,.66); overflow: hidden; text-overflow: ellipsis; font-size: .56rem; letter-spacing: .14em; } .nav-links { gap: clamp(10px, 1.05vw, 18px); } .nav-links > li { position: relative; } .nav-links a { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); padding: 8px 0; border-radius: 0; background: transparent; white-space: nowrap; } .nav-links a:hover { color: #ffffff; background: transparent; } .nav-links a.active { color: #ffffff; font-weight: 400; } .nav-links a.active::after { left: 0; right: 0; bottom: -6px; height: 1px; background: var(--crimson); } .nav-submenu { position: absolute; top: calc(100% + 12px); left: 0; z-index: 120; display: grid; min-width: 220px; padding: 8px; background: color-mix(in srgb, var(--navy) 88%, transparent); border: 1px solid color-mix(in srgb, var(--sage) 38%, rgba(255,255,255,.24)); border-radius: 8px; box-shadow: 0 18px 38px rgba(0,0,0,.18); backdrop-filter: blur(18px); list-style: none; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition); } .nav-submenu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; } .has-submenu:hover .nav-submenu, .has-submenu:focus-within .nav-submenu { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-submenu a, html[data-theme] .nav-submenu a, html[data-theme] .nav-submenu a:visited { display: block; padding: 10px 12px; border-radius: 6px; color: rgba(255,255,255,.92); font-size: .82rem; letter-spacing: 0; line-height: 1.25; text-transform: none; background: transparent; } .nav-submenu a:hover, html[data-theme] .nav-submenu a:hover { background: color-mix(in srgb, var(--crimson) 34%, rgba(255,255,255,.08)); color: #ffffff; } .section-label, .hero-tag, .footer-nav-title, .course-code, .opening-type, .student-topic, .pi-role, .opening-req-title { font-weight: 400; letter-spacing: .34em; color: var(--text-muted); } .section-label::before { content: ""; display: inline-block; width: 64px; height: 1px; margin-right: 18px; vertical-align: middle; background: var(--border); } .section-title { margin-bottom: 18px; } .section-subtitle { max-width: 820px; font-size: clamp(1.05rem, 1.45vw, 1.38rem); line-height: 1.9; color: var(--text-mid); } .section-header { margin-bottom: clamp(44px, 6vw, 86px); } .divider { border-top-color: var(--border); margin: clamp(56px, 7vw, 96px) 0; } .page-hero { padding: clamp(38px, 4.8vw, 70px) 0 clamp(34px, 4vw, 58px); background: linear-gradient(180deg, #f8fafc 0%, var(--paper) 100%); } .page-hero-inner { max-width: 1020px; margin-left: 0; } .page-title { font-size: clamp(2.55rem, 4.5vw, 4.25rem); margin-bottom: 18px; } .page-subtitle { max-width: 920px; font-style: italic; font-size: clamp(1.05rem, 1.28vw, 1.36rem); line-height: 1.55; color: var(--navy); } .research-simple-hero .page-title { margin-bottom: 18px; } .research-simple-hero { max-width: var(--max-w); } .publication-hero { padding: clamp(26px, 3.2vw, 46px) 0 clamp(24px, 3vw, 40px); } .publication-hero .page-title { font-size: clamp(2.35rem, 3.8vw, 3.6rem); } .publication-hero .page-subtitle { max-width: 760px; } /* Home */ .hero { min-height: calc(100vh - var(--nav-h)); padding: clamp(64px, 8vw, 120px) 0; position: relative; overflow: hidden; background: linear-gradient(115deg, rgba(255,255,255,.92), rgba(231,235,240,.82)), var(--paper); } .hero::before { content: none; } .hero-inner { position: relative; grid-template-columns: minmax(0, .82fr) minmax(380px, 560px); gap: clamp(44px, 6vw, 92px); padding: 0 clamp(24px, 5vw, 88px); } .hero-text { min-width: 0; max-width: 500px; } .hero-title { font-size: clamp(2.55rem, 4.6vw, 4.65rem); line-height: 1; margin-bottom: 30px; } .hero-title em { color: var(--crimson); } .hero-desc { font-style: italic; font-size: clamp(1.25rem, 1.65vw, 1.72rem); line-height: 1.62; max-width: 560px; color: var(--navy); } .btn { border-radius: 999px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; padding: 12px 24px; } .btn-primary { background: var(--navy); border-color: var(--navy); } .btn-primary:hover { background: var(--clay); border-color: var(--clay); } .btn-secondary, a.pi-link, .student-link { background: transparent; border-color: var(--border); color: var(--text-mid); } .btn-secondary:hover, a.pi-link:hover, .student-link:hover { background: var(--sage-light); border-color: var(--sage); color: var(--navy); } .hero-visual-wrap { display: grid; gap: 18px; align-self: center; } .hero-system-card { margin: 0; background: #ffffff; border: 1px solid var(--border); border-radius: 22px; box-shadow: none; overflow: hidden; padding: clamp(6px, .9vw, 10px); } .hero-system-card img { width: 100%; height: clamp(360px, 42vw, 560px); object-fit: cover; object-position: center 50%; border-radius: 16px; display: block; } .hero-system-card figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); } /* Cards and grids */ .research-theme-card, .course-card, .value-card, .opening-card, .alumni-item { background: rgba(255,255,255,.74); border: 1px solid var(--border); border-radius: 24px; box-shadow: none; } .research-theme-card, .course-card, .value-card, .opening-card { padding: clamp(28px, 3vw, 44px); } .research-theme-card::before, .opening-card::before { display: none; } .theme-icon, .value-icon { color: var(--clay); filter: grayscale(.15) saturate(.75); } .theme-title, .course-title, .value-title, .opening-title { color: var(--navy); font-size: clamp(1.35rem, 2vw, 2.05rem); } .theme-desc, .course-desc, .value-desc, .opening-desc, .pi-bio, .student-desc { color: var(--text-mid); font-size: 1rem; line-height: 1.85; } .student-tag { background: transparent; border: 1px solid var(--border); color: var(--sage); border-radius: 999px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; } .research-theme-card:hover, .course-card:hover, .value-card:hover, .opening-card:hover { box-shadow: none; border-color: #aeb9c8; background: #ffffff; } /* Publications */ .publications-section { padding-top: clamp(28px, 3.5vw, 48px); } .filter-bar { gap: 10px; margin-bottom: clamp(28px, 4vw, 46px); } .topic-filter-bar { align-items: center; row-gap: 10px; } .filter-btn { border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.74); padding: 9px 14px; font-size: .68rem; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; color: var(--navy); } .filter-btn:hover, .filter-btn.active { background: var(--navy); color: #ffffff; border-color: var(--navy); } .paper-list { border-top: 0; } .paper-item { padding: 18px 0; border-bottom-color: var(--border); } .paper-item[hidden], .publications-books-divider[hidden], .publications-books-header[hidden], .book-list[hidden], .publication-highlights[hidden], .publication-list[hidden], .publication-topic-showcase[hidden], .topic-paper-card[hidden] { display: none; } .paper-item:hover { padding-left: .35rem; } .paper-citation { color: var(--navy); font-size: clamp(.98rem, 1vw, 1.1rem); line-height: 1.7; } .pi-name, .pi-highlight { color: var(--sage); font-weight: 600; } .paper-citation .pi-name, .paper-citation strong { color: inherit; font: inherit; font-weight: 700; } /* Team */ .pi-section { grid-template-columns: minmax(230px, 320px) 1fr; gap: clamp(48px, 8vw, 120px); border-bottom-color: var(--border); } .pi-section .pi-name { font-size: clamp(3rem, 5vw, 5rem); } .pi-role { color: var(--sage); } .pi-meta { border-top: 1px solid var(--border); padding-top: 28px; } .pi-meta-item label { letter-spacing: .18em; color: var(--text-muted); } .student-name { font-size: 1.65rem; color: var(--navy); } .student-topic { color: var(--sage); line-height: 1.6; } .student-desc, .student-tags, .student-links { display: none; } .alumni-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .alumni-item { padding: 22px 24px; } /* Join and teaching */ .values-grid, .openings-grid, .courses-grid { gap: 24px; } .opening-card { position: relative; } .opening-card::after { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 1px; background: var(--border); } .opening-requirements { background: var(--paper-warm); border-radius: 16px; } .opening-req-item { color: var(--text-mid); border-bottom-color: var(--border); } .opening-req-item::before { content: "▸ "; color: var(--clay); } /* Footer */ .pre-footer-band { padding: clamp(28px, 4vw, 54px) 0 clamp(34px, 5vw, 68px); background: linear-gradient(180deg, #ffffff 0%, var(--paper) 64%, #eef2f7 100%); } .pre-footer-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(1,31,91,.18), transparent); } .site-footer { background: linear-gradient(180deg, #09275f 0%, var(--navy) 22%, #061228 100%); color: rgba(255,255,255,.66); padding: 72px 0 44px; } .footer-logo { letter-spacing: .28em; text-transform: uppercase; color: #ffffff; } .footer-contact { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); font-size: .78rem; line-height: 1.75; } .footer-contact .contact-obfuscated { color: rgba(255,255,255,.86); } .footer-nav-links a { letter-spacing: .14em; text-transform: uppercase; } @media (max-width: 1000px) { .hero-inner, .pi-section { grid-template-columns: 1fr; } .hero-visual-wrap { max-width: 520px; } .nav-logo { max-width: 260px; } .nav-logo span { display: none; } } @media (max-width: 768px) { :root { --nav-h: 60px; } body { background-size: 54px 54px, auto; } .site-header { position: sticky; } .nav-logo { font-size: .9rem; letter-spacing: .16em; } .page-title, .hero-title { font-size: clamp(2.6rem, 13vw, 4.6rem); } .page-subtitle, .hero-desc { font-size: 1.28rem; } .section-label::before { width: 36px; margin-right: 12px; } .alumni-grid { grid-template-columns: 1fr; } .filter-bar { gap: 14px 22px; } } /* Nobori-style research cards { background: var(--paper); } .project-index { color: var(--crimson); } /* Compact home research atlas. */ .research-atlas { padding: clamp(64px, 8vw, 112px) 0; background: var(--paper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .research-atlas-hero { display: block; max-width: 940px; margin-right: 0; margin-left: 0; margin-bottom: clamp(44px, 6vw, 82px); text-align: left; } .research-atlas-hero h2 { max-width: none; margin-top: 18px; font-size: clamp(2rem, 3.7vw, 4.4rem); } .research-atlas-hero p { max-width: 860px; margin: 18px 0 0; font-size: clamp(1.05rem, 1.35vw, 1.32rem); line-height: 1.85; color: var(--text-mid); } .research-atlas-action { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 52px); } .research-thrust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); } .research-thrust-card { position: relative; display: flex; flex-direction: column; min-height: clamp(360px, 30vw, 440px); padding: clamp(28px, 3vw, 44px); padding-bottom: clamp(70px, 6vw, 86px); background: rgba(255,255,255,.82); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .research-thrust-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--crimson); } .thrust-biophysics::before { background: #7a6ea8; } .thrust-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; } .research-thrust-card h3 { max-width: 620px; margin-top: 12px; color: var(--navy); font-size: clamp(1.65rem, 2.35vw, 2.55rem); line-height: 1.12; } .research-thrust-card p { max-width: 660px; margin-top: 28px; color: var(--text-mid); font-size: clamp(1rem, 1.12vw, 1.14rem); line-height: 1.76; } .thrust-mark { position: relative; width: clamp(72px, 8vw, 112px); aspect-ratio: 1; border: 1px solid var(--border); border-radius: 50%; opacity: .9; } .thrust-mark span { position: absolute; display: block; width: 12px; aspect-ratio: 1; border-radius: 50%; background: var(--crimson); } .thrust-mark span:nth-child(1) { left: 18%; top: 28%; } .thrust-mark span:nth-child(2) { right: 20%; top: 20%; } .thrust-mark span:nth-child(3) { left: 46%; bottom: 18%; } .thrust-biophysics .thrust-mark span { background: #7a6ea8; } .thrust-mark-image { width: clamp(92px, 10vw, 142px); aspect-ratio: auto; border: 0; border-radius: 0; opacity: 1; } .thrust-mark-image img { width: 100%; height: auto; max-height: 142px; object-fit: contain; display: block; } .thrust-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .thrust-tags span { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-mid); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; } .research-thrust-card .thrust-link { position: absolute; right: clamp(18px, 2.4vw, 32px); bottom: clamp(18px, 2.4vw, 32px); display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 30px; margin-top: 0; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--navy) 22%, var(--border)); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--navy); font-size: .64rem; font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase; } .research-thrust-card .thrust-link:hover { border-color: color-mix(in srgb, var(--crimson) 34%, var(--border)); background: #ffffff; color: var(--crimson); } .thrust-biophysics .thrust-link:hover { color: #7a6ea8; } @media (max-width: 1000px) { .research-atlas-hero, .research-thrust-grid { grid-template-columns: 1fr; } } /* Home team preview. */ .home-team-preview { padding: clamp(42px, 5.5vw, 72px) 0; background: #ffffff; border-bottom: 1px solid var(--border); } .home-team-header { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: clamp(22px, 3vw, 34px); } .home-team-header h2 { margin-top: 12px; font-size: clamp(1.85rem, 2.7vw, 3rem); } .home-team-link { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; min-height: 34px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--navy) 24%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--sage) 14%, white); font-size: .76rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); white-space: nowrap; } .home-team-link:hover { color: #ffffff; border-color: var(--navy); } .home-team-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); } .home-team-card { display: grid; justify-items: center; gap: 12px; min-width: 0; padding: clamp(10px, 1.1vw, 14px) 6px clamp(12px, 1.3vw, 16px); background: var(--paper); border: 1px solid var(--border); border-radius: 8px; text-align: center; } .home-team-card:hover { border-color: var(--navy); } .home-team-portrait { display: grid; place-items: center; width: min(100%, clamp(104px, 8.6vw, 140px)); aspect-ratio: 1; border-radius: 50%; color: #ffffff; font-size: clamp(1.35rem, 1.75vw, 1.8rem); font-weight: 700; overflow: hidden; } .home-team-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } .home-team-photo { background: #ffffff; border: 1px solid var(--border); } .home-team-name { max-width: 100%; color: var(--navy); font-size: clamp(.88rem, 1vw, 1.04rem); font-weight: 600; line-height: 1.1; white-space: nowrap; } @media (max-width: 980px) { .home-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 680px) { .home-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-team-card { grid-column: auto; } } @media (max-width: 520px) { .home-team-header { align-items: start; flex-direction: column; } .home-team-grid { grid-template-columns: 1fr; } .home-team-card { grid-column: auto; } } /* Team profile cards with image-ready member portraits. */ .member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 36px); margin-bottom: clamp(58px, 7vw, 96px); } .member-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(18px, 2vw, 26px); overflow: hidden; min-height: 208px; padding: clamp(18px, 2vw, 24px); background: #ffffff; border: 1px solid var(--border); border-radius: 8px; } .member-photo { position: relative; display: grid; place-items: center; min-height: 100%; overflow: hidden; background: radial-gradient(circle at 28% 20%, rgba(153,0,0,.38), transparent 22%), radial-gradient(circle at 78% 74%, rgba(47,111,78,.36), transparent 25%), linear-gradient(135deg, #061228 0%, #011f5b 58%, #081126 100%); } .member-photo::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; } .member-photo::after { content: ""; position: absolute; width: 150px; height: 150px; border: 2px solid rgba(255,255,255,.34); border-radius: 50%; transform: translateY(-2px); } .member-photo span { position: relative; z-index: 1; display: grid; place-items: center; width: 106px; height: 106px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy); font-size: 2rem; font-weight: 700; } .member-card > .member-photo { position: relative; display: grid; place-items: center; align-self: center; width: clamp(128px, 10vw, 150px); height: clamp(128px, 10vw, 150px); min-height: 0; overflow: hidden; border-radius: 50%; } .member-card > .member-photo::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; } .member-card > .member-photo::after { content: ""; position: absolute; width: 86%; height: 86%; border: 2px solid rgba(255,255,255,.26); border-radius: 50%; transform: translateY(-2px); } .member-card > .member-photo span { position: relative; z-index: 1; display: grid; place-items: center; width: 80%; height: 80%; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy); font-size: clamp(1.75rem, 2.4vw, 2.35rem); font-weight: 700; } .member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; } .member-photo.has-photo::before, .member-photo.has-photo::after { display: none; } .member-photo img + span { display: none; } .member-photo-battery { background: radial-gradient(circle at 22% 18%, rgba(153,0,0,.42), transparent 24%), radial-gradient(circle at 80% 70%, rgba(47,111,78,.32), transparent 25%), linear-gradient(135deg, #081126 0%, #011f5b 58%, #172033 100%); } .member-photo-genome { background: radial-gradient(circle at 28% 22%, rgba(153,0,0,.34), transparent 22%), radial-gradient(circle at 70% 70%, rgba(47,111,78,.42), transparent 26%), linear-gradient(135deg, #061228 0%, #011f5b 58%, #071425 100%); } .member-photo-pi { background: radial-gradient(circle at 24% 20%, rgba(153,0,0,.36), transparent 23%), radial-gradient(circle at 72% 78%, rgba(47,111,78,.42), transparent 26%), linear-gradient(135deg, #061228 0%, #011f5b 52%, #071425 100%); } .pi-portrait { width: min(100%, 260px); aspect-ratio: 4 / 5; min-height: 0; padding: 8px; background: #ffffff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 14px 34px rgba(1,31,91,.10); justify-self: center; align-self: start; } .pi-portrait img { border-radius: 5px; object-position: center 18%; } .pi-portrait span { width: 132px; height: 132px; font-size: 2.6rem; } .pi-section .pi-name { color: var(--navy); } .team-role-label { width: fit-content; margin-bottom: 10px; padding: 5px 9px; background: var(--crimson-light); color: var(--crimson); border: 1px solid rgba(153,0,0,.18); border-radius: 999px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; } .member-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .member-card .student-name { margin-bottom: 8px; color: var(--navy); font-size: clamp(1.45rem, 2vw, 2.1rem); line-height: 1.14; } .member-card .student-topic { margin-bottom: 18px; color: var(--crimson); } .member-card .student-desc, .member-card .student-tags, .member-card .student-links { display: flex; } .member-card .student-desc { display: block; margin-bottom: 18px; color: var(--text-mid); font-size: .98rem; line-height: 1.7; } .member-card .student-tags { flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .member-card .student-tag { min-height: 28px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--navy) 24%, var(--border)); border-radius: 999px; background: color-mix(in srgb, #5c8dc5 16%, white); color: #244b74; font-size: .76rem; font-weight: 750; letter-spacing: 0; line-height: 1.15; text-transform: none; } .member-card:has(.member-photo-genome) .student-tag { border-color: color-mix(in srgb, #8d6bb8 34%, var(--border)); background: color-mix(in srgb, #8d6bb8 16%, white); color: #5f477d; } .member-card:has(.member-photo-battery) .student-tag { border-color: color-mix(in srgb, #5c8dc5 38%, var(--border)); background: color-mix(in srgb, #5c8dc5 18%, white); color: #244b74; } .member-card .student-links { gap: 9px; margin-top: auto; } .member-card .student-link { border-radius: 999px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 1100px) { .member-grid { grid-template-columns: 1fr; } } @media (max-width: 680px) { .member-card { grid-template-columns: 1fr; justify-items: start; } .member-card > .member-photo { width: 136px; height: 136px; } } .publication-highlights { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 28px 16px 2px; margin-bottom: 22px; scrollbar-color: color-mix(in srgb, var(--navy) 28%, var(--border)) transparent; scrollbar-width: thin; background: linear-gradient(90deg, transparent, transparent calc(100% - 42px), color-mix(in srgb, var(--paper) 78%, transparent)); } .publication-highlights::-webkit-scrollbar { height: 8px; } .publication-highlights::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--navy) 26%, var(--border)); border-radius: 999px; } .publication-highlight-card { flex: 0 0 clamp(190px, 17vw, 235px); display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden; min-height: 0; padding: 0; background: #ffffff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 40px rgba(1,31,91,.08); color: inherit; text-decoration: none; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .publication-highlight-card:hover { transform: translateY(-2px); border-color: rgba(153,0,0,.22); box-shadow: 0 22px 48px rgba(1,31,91,.11); } .publication-cover-image { display: block; width: 100%; aspect-ratio: 3 / 3.65; background: var(--paper-warm); border-bottom: 1px solid var(--border); } .publication-cover-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .publication-cover-body { display: grid; gap: 7px; padding: 12px 12px 14px; } .publication-cover-title { color: var(--navy); display: -webkit-box; min-height: 3.9em; overflow: hidden; font-size: .86rem; font-weight: 780; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .publication-cover-meta { color: var(--text-muted); font-size: .72rem; font-weight: 650; line-height: 1.25; } .publication-cover-link { width: fit-content; min-height: 26px; margin-top: 2px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--crimson) 38%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--crimson) 12%, white); color: var(--crimson-dark); font-size: .76rem; font-weight: 760; line-height: 1; } .highlight-topic, .highlight-meta { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .highlight-topic { color: var(--crimson); } .highlight-meta { margin-top: 24px; color: var(--navy); } .publication-topic-showcase { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(28px, 4vw, 44px); margin-bottom: clamp(34px, 4vw, 54px); } .topic-paper-card { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); min-height: 220px; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 44px rgba(1,31,91,.08); color: inherit; text-decoration: none; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .topic-paper-card:hover { transform: translateY(-2px); border-color: rgba(153,0,0,.22); box-shadow: 0 22px 52px rgba(1,31,91,.12); } .topic-paper-art { position: relative; min-height: 100%; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(135deg, #061228 0%, #011f5b 58%, #071425 100%); background-size: 24px 24px, 24px 24px, auto; } .topic-paper-art::before, .topic-paper-art::after, .topic-paper-art span { content: ""; position: absolute; display: block; } .topic-paper-art-electrode::before { width: 68%; height: 22%; left: 16%; top: 28%; border: 3px solid rgba(255,255,255,.78); border-left-color: var(--crimson); border-right-color: var(--crimson); transform: skewX(-14deg); } .topic-paper-art-electrode::after { width: 72%; height: 2px; left: 14%; top: 56%; background: rgba(255,255,255,.62); box-shadow: 0 26px 0 rgba(255,255,255,.28), 0 -26px 0 rgba(255,255,255,.28); } .topic-paper-art-electrode span { width: 12px; height: 12px; left: 34%; top: 43%; border-radius: 50%; background: var(--crimson); box-shadow: 46px 14px 0 var(--sage), 94px -8px 0 var(--crimson), 128px 18px 0 var(--sage); } .topic-paper-art-liquid::before { width: 76%; height: 52%; left: 12%; top: 24%; border: 3px solid rgba(255,255,255,.7); border-radius: 50%; } .topic-paper-art-liquid::after { width: 54%; height: 18%; left: 23%; top: 48%; border-top: 4px solid var(--sage); border-bottom: 4px solid rgba(255,255,255,.58); border-radius: 50%; } .topic-paper-art-liquid span { width: 13px; height: 13px; left: 28%; top: 34%; border-radius: 50%; background: var(--crimson); box-shadow: 42px 44px 0 var(--sage), 84px 9px 0 #fff, 126px 56px 0 var(--crimson); } .topic-paper-art-solid::before { width: 70%; height: 54%; left: 15%; top: 22%; background: linear-gradient(60deg, transparent 45%, rgba(255,255,255,.72) 46% 54%, transparent 55%), linear-gradient(-60deg, transparent 45%, rgba(255,255,255,.56) 46% 54%, transparent 55%); border: 2px solid rgba(255,255,255,.35); } .topic-paper-art-solid::after { width: 12px; height: 12px; left: 30%; top: 35%; border-radius: 50%; background: var(--crimson); box-shadow: 52px 8px 0 var(--sage), 104px 36px 0 var(--crimson), 28px 82px 0 #fff, 118px 86px 0 var(--sage); } .topic-paper-art-gene::before { width: 78%; height: 52%; left: 11%; top: 24%; border: 4px solid transparent; border-top-color: #fff; border-left-color: var(--sage); border-radius: 48% 52% 46% 54%; transform: rotate(-12deg); } .topic-paper-art-gene::after { width: 72%; height: 38%; left: 16%; top: 32%; border: 3px solid transparent; border-right-color: var(--crimson); border-bottom-color: #fff; border-radius: 48%; } .topic-paper-art-gene span { width: 13px; height: 13px; left: 30%; top: 34%; border-radius: 50%; background: var(--sage); box-shadow: 38px 58px 0 var(--crimson), 84px 24px 0 #fff, 126px 72px 0 var(--sage); } .topic-paper-art-nano::before { width: 74%; height: 54%; left: 13%; top: 24%; background: radial-gradient(circle, rgba(255,255,255,.88) 0 5px, transparent 6px) 0 0 / 42px 42px, linear-gradient(60deg, transparent 48%, rgba(255,255,255,.34) 49% 51%, transparent 52%); } .topic-paper-art-nano::after { width: 54%; height: 32%; left: 24%; top: 36%; border: 3px solid var(--crimson); border-radius: 50%; transform: rotate(-18deg); } .topic-paper-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 2.6vw, 34px); } .topic-paper-meta { margin-bottom: 14px; color: var(--crimson); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .topic-paper-card h2 { margin: 0 0 16px; color: var(--navy); font-size: clamp(1.25rem, 1.65vw, 1.7rem); line-height: 1.14; } .topic-paper-card p { margin: 0; color: var(--text-mid); font-size: .98rem; line-height: 1.65; } @media (max-width: 920px) { .site-header { height: auto; } .nav-container { min-height: var(--nav-h); flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; } .nav-links { display: flex; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; } .nav-links a { white-space: nowrap; } .publication-highlights { padding-bottom: 14px; } .topic-paper-card { grid-template-columns: 1fr; } .topic-paper-art { min-height: 220px; } } /* Final header readability pass */ .site-header { height: 76px; background: var(--theme-header); border-bottom: 1px solid var(--theme-header-border); } .nav-container { min-height: 76px; align-items: center; padding: 0 clamp(28px, 5vw, 72px); } .nav-logo { gap: 5px; max-width: min(520px, 44vw); font-size: clamp(1.08rem, 1.25vw, 1.34rem); font-weight: 700; letter-spacing: .08em; line-height: 1.05; text-transform: none; color: #fff; } .nav-logo strong { font: inherit; color: #fff; } .nav-logo span { color: rgba(255,255,255,.78); font-size: clamp(.68rem, .72vw, .78rem); font-weight: 500; letter-spacing: .055em; line-height: 1.2; text-transform: uppercase; } .nav-links { gap: clamp(14px, 1.4vw, 26px); align-items: center; } .nav-links a { position: relative; padding: 29px 0 24px; color: rgba(255,255,255,.78); font-size: clamp(.78rem, .78vw, .9rem); font-weight: 650; letter-spacing: .04em; line-height: 1; text-transform: uppercase; } .nav-links a:hover { color: #fff; } .nav-links a.active { color: #fff; font-weight: 750; } .nav-links a.active::after { left: 0; right: 0; bottom: 16px; height: 2px; background: var(--theme-active); } .hero .hero-desc { max-width: 640px; font-size: clamp(1.12rem, 1.45vw, 1.48rem); line-height: 1.68; } .hero .hero-desc strong { color: var(--crimson); font-style: normal; font-weight: 700; } .hero .btn-group { display: flex; flex-wrap: nowrap; gap: 14px; margin-top: 26px; } .hero .btn { min-width: 146px; padding-left: 20px; padding-right: 20px; text-align: center; } .hero .hero-text { max-width: 560px; } @media (max-width: 920px) { .site-header { height: auto; } .nav-container { min-height: 72px; align-items: flex-start; } .nav-logo { max-width: none; font-size: 1.05rem; } .nav-logo span { display: block; max-width: 88vw; font-size: .62rem; } .nav-links { gap: 18px; } .nav-links a { padding: 8px 0 10px; font-size: .76rem; } .nav-links a.active::after { bottom: 2px; } .hero .btn-group { flex-wrap: wrap; } .hero .btn { min-width: 0; } } /* Stronger compaction after visual QA */ .section { padding-top: clamp(32px, 4vw, 58px); padding-bottom: clamp(32px, 4vw, 58px); } .page-hero { padding-top: clamp(22px, 3vw, 40px); padding-bottom: clamp(20px, 2.8vw, 36px); } .pi-section { padding-top: clamp(18px, 2.6vw, 36px); padding-bottom: clamp(26px, 3.4vw, 44px); margin-bottom: clamp(24px, 3vw, 40px); } .member-grid { margin-bottom: clamp(34px, 4.2vw, 58px); } .team-alumni-header { margin-top: 16px; } /* Featured PI card: photo anchors the upper-left, long text continues full width. */ .pi-section { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 32px); padding: clamp(24px, 3vw, 38px); margin-bottom: clamp(30px, 4vw, 54px); background: linear-gradient(135deg, color-mix(in srgb, var(--navy) 6%, white), rgba(255,255,255,.96) 48%), #ffffff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 42px rgba(1,31,91,.08); } .pi-topline { display: grid; grid-template-columns: clamp(170px, 18vw, 240px) minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: start; } .pi-portrait { width: 100%; max-width: 240px; justify-self: start; } .pi-intro { min-width: 0; padding-top: clamp(4px, 1vw, 12px); } .pi-section .pi-name { margin-bottom: 8px; font-size: clamp(2.65rem, 4.6vw, 4.6rem); line-height: 1; } .pi-role { margin-bottom: 18px; color: var(--sage); font-size: clamp(.9rem, 1.1vw, 1.05rem); font-weight: 650; letter-spacing: 0; text-transform: none; } .pi-bio { max-width: 980px; margin: 0; color: var(--text-mid); font-size: clamp(.98rem, 1.08vw, 1.08rem); line-height: 1.74; } .pi-bio-lead { max-width: 860px; margin-bottom: 18px; color: var(--text); font-size: clamp(1.04rem, 1.22vw, 1.2rem); line-height: 1.62; } .pi-content { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(20px, 3vw, 36px); align-items: start; } .pi-directions { padding: 16px 18px; background: color-mix(in srgb, var(--sage) 9%, white); border-left: 3px solid var(--sage); } .pi-directions h3 { margin: 0 0 10px; color: var(--navy); font-size: 1rem; } .pi-directions ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--text-mid); font-size: .92rem; line-height: 1.45; } .pi-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 0; padding-top: 20px; border-top: 1px solid var(--border); } .pi-meta-item { min-width: 0; } .pi-meta-item label { letter-spacing: 0; text-transform: none; } .pi-meta-item span { overflow-wrap: anywhere; } a.pi-link, .student-link, .home-team-link, .research-thrust-card .thrust-link, .topic-filter-bar .filter-btn { transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); } a.pi-link:hover, .student-link:hover, .home-team-link:hover, .research-thrust-card .thrust-link:hover, .topic-filter-bar .filter-btn:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; box-shadow: 0 10px 24px rgba(1,31,91,.16); } .thrust-biophysics .thrust-link:hover { background: #5f477d; border-color: #5f477d; color: #ffffff; } @media (max-width: 860px) { .pi-topline, .pi-content, .pi-meta { grid-template-columns: 1fr; } .pi-portrait { max-width: 220px; } } .section-header, .section-header.centered { margin-bottom: clamp(18px, 2.6vw, 34px); } .course-card, .value-card, .opening-card { padding: clamp(18px, 2vw, 28px); } /* Join page: keep the requested card counts explicit after global grid rules. */ .values-grid.join-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; } .join-values-grid .value-icon { display: none; } .openings-grid.join-route-grid { grid-template-columns: 1fr; gap: 18px; } .join-route-grid .opening-card { display: grid; grid-template-columns: minmax(150px, .22fr) minmax(0, .78fr); grid-template-areas: "route-title route-label" "route-title route-desc" "route-title route-req"; gap: 0; height: 100%; overflow: hidden; padding: 0; } .join-route-grid .opening-type { grid-area: route-label; align-self: end; justify-self: start; display: inline-flex; align-items: center; width: fit-content; margin: clamp(20px, 2.4vw, 30px) clamp(22px, 2.4vw, 34px) 0; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--crimson) 14%, white); color: var(--crimson-dark); font-size: .7rem; font-weight: 750; letter-spacing: .08em; line-height: 1.2; } .join-route-grid .opening-title { grid-area: route-title; font-size: clamp(1.25rem, 1.65vw, 1.75rem); line-height: 1.18; } .join-route-grid .opening-title span { display: block; margin-top: 5px; color: rgba(255,255,255,.74); font-size: clamp(.82rem, 1vw, .98rem); font-weight: 650; letter-spacing: .01em; } .join-route-grid .opening-type, .join-route-grid .opening-title { position: relative; z-index: 1; } .join-route-grid .opening-title { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: clamp(22px, 2.4vw, 34px); min-height: 100%; background: linear-gradient(135deg, rgba(92,141,197,.22), transparent 62%), var(--theme-header); color: #ffffff; } .join-route-grid .opening-desc { grid-area: route-desc; align-self: start; margin: 0; padding: 8px clamp(22px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px); font-size: .92rem; line-height: 1.62; } .join-route-grid .opening-requirements { grid-area: route-req; align-self: stretch; margin: 0; margin-bottom: 0; padding: clamp(18px, 2vw, 28px) clamp(22px, 2.4vw, 34px); border-radius: 0; background: color-mix(in srgb, var(--paper-warm) 72%, white); border-top: 1px solid var(--border); } .join-route-grid .opening-req-item { font-size: .78rem; line-height: 1.5; } .join-contact-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(22px, 3vw, 44px); align-items: center; margin-top: clamp(24px, 3vw, 38px); padding: clamp(24px, 3.2vw, 42px); background: #ffffff; border: 1px solid var(--border); border-radius: 8px; } .join-contact-label { margin-bottom: 12px; color: var(--crimson); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; } .join-contact-card h3 { margin: 0 0 12px; color: var(--navy); font-size: clamp(1.45rem, 2.1vw, 2.15rem); } .join-contact-card p { margin: 0; color: var(--text-mid); line-height: 1.7; } .join-contact-details { display: grid; gap: 12px; } .join-contact-details div { padding: 16px 18px; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; } .join-contact-details span { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; } .join-contact-details strong { color: var(--navy); font-size: .9rem; line-height: 1.55; } @media (min-width: 900px) { .join-route-grid .opening-card { grid-template-columns: minmax(160px, .22fr) minmax(0, .78fr); grid-template-areas: "route-title route-label" "route-title route-desc" "route-title route-req"; } } @media (max-width: 760px) { .values-grid.join-values-grid, .openings-grid.join-route-grid, .join-contact-card { grid-template-columns: 1fr; } .join-route-grid .opening-card { grid-template-columns: 1fr; grid-template-areas: "route-title" "route-label" "route-desc" "route-req"; } .join-route-grid .opening-title { min-height: 0; } } /* Card Lift Interaction */ .member-card, .research-theme-card, .value-card, .opening-card, .join-contact-card, .alumni-item { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .member-card:hover, .research-theme-card:hover, .value-card:hover, .opening-card:hover, .join-contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--crimson); } .alumni-item:hover { transform: translateX(4px); /* Horizontal slide for list items */ background: var(--crimson-light); } /* Active Site Consolidation Shared behavior for the selected palette. Component rules should stay token-driven; avoid adding palette-specific overrides below. */ html[data-theme], html[data-theme] body { background: var(--paper); } html[data-theme] body { color: var(--text); } html[data-theme] .section-alt, html[data-theme] .page-hero { background: var(--paper-warm); } html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4 { color: var(--navy); } html[data-theme] a { color: var(--navy); } html[data-theme] a:hover { color: var(--crimson); } html[data-theme] .site-header { background: var(--theme-header); border-bottom-color: var(--theme-header-border, rgba(255,255,255,.16)); } html[data-theme] .nav-logo, html[data-theme] .nav-logo strong, html[data-theme] .nav-logo:hover, html[data-theme] .nav-logo:hover strong { color: #ffffff; } html[data-theme] .nav-logo span { color: rgba(255,255,255,.78); } html[data-theme] .nav-links a, html[data-theme] .nav-links a:visited { color: rgba(255,255,255,.78); } html[data-theme] .nav-links a:hover, html[data-theme] .nav-links a.active { color: #ffffff; } html[data-theme] .nav-links .nav-submenu a, html[data-theme] .nav-links .nav-submenu a:visited { color: rgba(255,255,255,.92); } html[data-theme] .nav-links .nav-submenu a:hover { color: #ffffff; } html[data-theme] .nav-links a.active::after { background: var(--theme-active); } html[data-theme] .research-theme-card, html[data-theme] .course-card, html[data-theme] .value-card, html[data-theme] .opening-card, html[data-theme] .alumni-item, html[data-theme] .topic-paper-card, html[data-theme] .member-card, html[data-theme] .publication-highlight-card, html[data-theme] .join-contact-card { background: var(--theme-card-soft); } html[data-theme] .section-label, html[data-theme] .opening-type, html[data-theme] .join-contact-label, html[data-theme] .hero-title em { color: var(--crimson); } html[data-theme] .join-route-grid .opening-type { background: color-mix(in srgb, var(--crimson) 11%, transparent); } html[data-theme] .pre-footer-band { background: linear-gradient(180deg, #ffffff 0%, var(--paper) 64%, var(--paper-warm) 100%); } html[data-theme] .pre-footer-line { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--navy) 24%, transparent), transparent); } html[data-theme] .site-footer { background: linear-gradient(180deg, var(--theme-header) 0%, var(--navy) 44%, #101b18 100%); color: rgba(255,255,255,.72); } html[data-theme] .footer-logo, html[data-theme] .footer-contact .contact-obfuscated { color: #ffffff; } html[data-theme] .footer-tagline, html[data-theme] .footer-contact, html[data-theme] .footer-text { color: rgba(255,255,255,.72); } html[data-theme] .footer-nav-title { color: rgba(255,255,255,.46); } html[data-theme] .footer-nav-links a, html[data-theme] .footer-socials a { color: rgba(255,255,255,.68); } html[data-theme] .footer-nav-links a:hover, html[data-theme] .footer-socials a:hover { color: #ffffff; } html[data-theme] .btn-primary, html[data-theme] .btn-primary:visited { background: var(--crimson); border-color: var(--crimson); color: #ffffff; } html[data-theme] .btn-primary:hover { background: var(--crimson-dark); border-color: var(--crimson-dark); color: #ffffff; box-shadow: 0 0 15px color-mix(in srgb, var(--crimson) 40%, transparent); } /* Publication filters mirror the Research page sticky tab behavior. */ .topic-filter-bar { position: sticky; top: var(--nav-h); z-index: 95; background: var(--paper); padding-top: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } @media (max-width: 680px) { .topic-filter-bar { top: var(--nav-h); padding-top: 14px; } } /* Uniform pill-button typography: use the Research tab style everywhere. */ .topic-filter-bar .filter-btn, .hero .btn { font-size: .86rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none; border-radius: 999px; padding: 10px 16px; } html[data-theme] .topic-filter-bar .filter-btn { background: #ffffff; border-color: var(--border); color: var(--text-mid); } html[data-theme] .topic-filter-bar .filter-btn:hover, html[data-theme] .topic-filter-bar .filter-btn.active, html[data-theme] .filter-btn:hover, html[data-theme] .filter-btn.active { background: var(--crimson); border-color: var(--crimson); color: #ffffff; } html[data-theme] .hero .btn-primary, html[data-theme] .hero .btn-secondary { background: transparent; border-color: color-mix(in srgb, var(--crimson) 46%, white); color: var(--crimson); } html[data-theme] .hero .btn-primary:hover, html[data-theme] .hero .btn-secondary:hover { background: var(--crimson); border-color: var(--crimson); color: #ffffff; } html[data-theme="biopolymer-helix"] .hero { background: linear-gradient(115deg, rgba(244,247,246,.96) 0%, rgba(244,247,246,.88) 42%, rgba(79,209,197,.18) 72%, rgba(128,90,213,.16) 100%), linear-gradient(140deg, color-mix(in srgb, var(--navy) 12%, transparent), transparent 54%), var(--paper); } html[data-theme="biopolymer-helix"] .hero::before { content: none; } html[data-theme="biopolymer-helix"] .hero-title em, html[data-theme="biopolymer-helix"] .section-label, html[data-theme="biopolymer-helix"] .opening-type, html[data-theme="biopolymer-helix"] .join-contact-label { color: var(--crimson); } html[data-theme="biopolymer-helix"] .nav-links a.active::after, html[data-theme="biopolymer-helix"] .thrust-nav .thrust-link.active::after { background: var(--theme-active); } html[data-theme="biopolymer-helix"] a:hover, html[data-theme="biopolymer-helix"] .paper-title-link:hover, html[data-theme="biopolymer-helix"] .featured-pub-title a:hover { color: var(--crimson-dark); } /* Image-led research page redesign. */ .research-hero { padding: clamp(62px, 8vw, 104px) 0 12px; background: linear-gradient(110deg, rgba(255,255,255,.94), rgba(232,238,240,.86)), var(--paper); } .research-hero-grid { display: grid; gap: clamp(18px, 2.8vw, 34px); } .hero-content { max-width: 1180px; } .badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--crimson) 28%, var(--border)); border-radius: 999px; color: var(--crimson); font-size: .68rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .hero-content h1 { max-width: 1120px; margin: 22px 0 24px; color: var(--navy); font-size: clamp(2.55rem, 5vw, 5.1rem); line-height: .98; } .hero-content h1 span { display: block; } .lead { max-width: 1080px; margin: 0 0 12px; color: var(--text-mid); font-size: clamp(1.02rem, 1.22vw, 1.24rem); line-height: 1.62; } .lead:last-child { margin-bottom: 0; } .research-logic { padding: clamp(12px, 1.8vw, 22px) 0 0; } .research-orientation { border-bottom: 0; } .logic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--border); gap: 1px; } .logic-step { display: grid; gap: 8px; min-height: 86px; padding: 14px 16px; background: #ffffff; } .logic-step span { color: var(--crimson); font-size: .68rem; font-weight: 800; letter-spacing: .12em; } .logic-step strong { color: var(--navy); font-size: clamp(1rem, 1.25vw, 1.2rem); } .technique-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .technique-strip span { padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-mid); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .thrust-nav-shell { position: sticky; top: var(--nav-h); z-index: 90; background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, color-mix(in srgb, var(--paper) 94%, white) 100%); border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); box-shadow: 0 12px 28px rgba(1,31,91,.045); } .thrust-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0; padding-top: 12px; padding-bottom: 12px; } .thrust-nav .thrust-link { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "index title" "index desc"; gap: 4px 14px; min-height: 76px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)), var(--paper); color: var(--text-mid); overflow: hidden; padding: 16px 18px; box-shadow: 0 10px 24px rgba(1,31,91,.06); text-align: left; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .thrust-nav .thrust-link::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--sage); opacity: .75; } .thrust-nav .thrust-link:last-child::before { background: #8d6bb8; } .thrust-link-index { grid-area: index; display: grid; place-items: center; width: 42px; height: 42px; align-self: center; border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--border)); border-radius: 50%; color: var(--sage); font-size: .72rem; font-weight: 800; letter-spacing: .08em; } .thrust-link-title { grid-area: title; color: var(--navy); font-size: clamp(1rem, 1.18vw, 1.15rem); font-weight: 800; line-height: 1.1; } .thrust-link-desc { grid-area: desc; color: var(--text-muted); font-size: .68rem; font-weight: 650; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; } .thrust-nav .thrust-link:hover, .thrust-nav .thrust-link.active { transform: translateY(-2px); background: #ffffff; border-color: color-mix(in srgb, var(--navy) 38%, var(--border)); box-shadow: 0 18px 36px rgba(1,31,91,.12); } .thrust-nav .thrust-link.active::after { content: ""; position: absolute; right: 16px; bottom: 12px; width: 36px; height: 2px; background: var(--crimson); } .thrust-nav .thrust-link.active .thrust-link-index { background: var(--navy); border-color: var(--navy); color: #ffffff; } .thrust-nav .thrust-link.active .thrust-link-desc { color: var(--crimson); } .thrust-section { padding: clamp(54px, 7vw, 96px) 0; scroll-margin-top: calc(var(--nav-h) + 88px); background: var(--paper); } .thrust-alt { background: linear-gradient(90deg, color-mix(in srgb, #8d6bb8 13%, transparent), transparent 34%), var(--paper-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .thrust-header { max-width: 900px; margin-bottom: clamp(26px, 4vw, 48px); } .thrust-header h2 { margin: 10px 0 14px; color: var(--navy); font-size: clamp(2rem, 3.5vw, 3.65rem); line-height: 1.05; } .thrust-header p { max-width: 780px; margin: 0; color: var(--text-mid); font-size: clamp(1rem, 1.12vw, 1.16rem); line-height: 1.72; } .thrust-header .thrust-significance { margin-top: 16px; padding-left: 16px; border-left: 3px solid var(--sage); color: var(--navy); font-weight: 650; } .thrust-alt .thrust-header .thrust-significance { border-left-color: #8d6bb8; } .projects-grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2vw, 26px); } .project-card { position: relative; min-height: clamp(360px, 26vw, 460px); overflow: hidden; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 16px 36px rgba(1,31,91,.07); } .thrust-section:not(.thrust-alt) .project-card { background: linear-gradient(135deg, color-mix(in srgb, #5c8dc5 8%, white), rgba(255,255,255,.96) 44%), #ffffff; } .thrust-alt .project-card { min-height: clamp(400px, 29vw, 520px); } .project-visual { position: absolute; top: clamp(22px, 2.5vw, 36px); right: clamp(22px, 2.5vw, 36px); width: clamp(230px, 27vw, 430px); aspect-ratio: 4 / 3; overflow: hidden; background: #ffffff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 14px 30px rgba(1,31,91,.10); } .project-visual img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; } #solvation-ionic-transport .project-visual { width: clamp(160px, 19vw, 300px); } #genome-organization .project-visual { width: clamp(160px, 19vw, 300px); } #gene-regulation-kinetics .project-visual { width: clamp(190px, 22vw, 340px); aspect-ratio: 3 / 2; } #composite-electrolytes .project-visual { aspect-ratio: 1200 / 654; } #regulation-ml-bioinformatics .project-visual { aspect-ratio: 1200 / 654; } #solid-electrolyte .project-visual { aspect-ratio: 1200 / 536; } #electrodes .project-visual { aspect-ratio: 1200 / 580; } .project-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(22px, 3vw, 42px); min-width: 0; max-width: none; padding: clamp(24px, 2.6vw, 38px); } .project-category { width: fit-content; margin-bottom: 14px; padding: 5px 9px; border: 1px solid color-mix(in srgb, #5c8dc5 38%, var(--border)); border-radius: 999px; background: color-mix(in srgb, #5c8dc5 12%, white); color: #244b74; font-size: .78rem; font-weight: 800; letter-spacing: 0; text-transform: none; } .project-category, .project-info h3, .project-info > p { grid-column: 1 / -1; max-width: calc(100% - clamp(285px, 32vw, 500px)); } .thrust-alt .project-category { border-color: color-mix(in srgb, #8d6bb8 36%, var(--border)); background: color-mix(in srgb, #8d6bb8 12%, white); color: #755a91; } .project-info h3 { margin: 0 0 16px; color: var(--navy); font-size: clamp(1.55rem, 2.15vw, 2.35rem); line-height: 1.08; } .project-info p { margin: 0; color: var(--text-mid); font-size: clamp(1.02rem, 1.15vw, 1.18rem); line-height: 1.7; } .project-story { display: grid; gap: 6px; grid-column: 1 / -1; max-width: none; margin-top: clamp(30px, 3.5vw, 58px); padding: clamp(13px, 1.4vw, 16px) clamp(15px, 1.8vw, 20px); border-left: 3px solid #5c8dc5; background: color-mix(in srgb, #5c8dc5 9%, white); } .thrust-alt .project-story { border-left-color: #8d6bb8; background: color-mix(in srgb, #8d6bb8 10%, white); } .project-story span, .tag-row span { color: var(--navy); font-size: .76rem; font-weight: 800; letter-spacing: 0; text-transform: none; } .project-story strong { color: var(--text-mid); font-size: .94rem; line-height: 1.55; } .tag-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 14px; } .method-row { grid-column: 1; margin-top: clamp(24px, 2.5vw, 34px); } .system-row { grid-column: 2; max-width: none; margin-top: clamp(24px, 2.5vw, 34px); } .tag-row div { display: flex; flex-wrap: wrap; gap: 8px; } .tag-row em { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--navy) 22%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--navy) 8%, white); color: var(--navy); font-size: .82rem; font-style: normal; font-weight: 800; letter-spacing: 0; line-height: 1.1; text-transform: none; } .method-row em { border-color: color-mix(in srgb, #5c8dc5 42%, var(--border)); background: color-mix(in srgb, #5c8dc5 20%, white); color: #244b74; } .system-row em { border-color: color-mix(in srgb, var(--sage) 44%, var(--border)); background: color-mix(in srgb, var(--sage) 23%, white); color: #27543b; } .thrust-alt .method-row em { border-color: color-mix(in srgb, #8d6bb8 44%, var(--border)); background: color-mix(in srgb, #8d6bb8 21%, white); color: #5f477d; } .thrust-alt .system-row em { border-color: color-mix(in srgb, var(--sage) 40%, var(--border)); background: color-mix(in srgb, var(--sage) 20%, white); color: #315842; } .project-pubs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; background: transparent; } .paper-row { position: static; width: auto; max-width: none; grid-column: 1 / -1; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; margin-top: 18px; padding: 16px 0 0; border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent); } .paper-row .project-pubs { flex-direction: row; align-items: flex-start; } .project-pubs a { display: inline-flex; align-items: center; justify-content: flex-start; width: fit-content; max-width: 100%; min-height: 24px; padding: 4px 8px; border: 1px solid color-mix(in srgb, #5c8dc5 42%, var(--border)); border-radius: 999px; background: color-mix(in srgb, #5c8dc5 20%, white); color: #244b74; font-size: .72rem; font-weight: 750; letter-spacing: 0; line-height: 1.12; text-transform: none; } .thrust-alt .project-pubs a { border-color: color-mix(in srgb, #8d6bb8 44%, var(--border)); background: color-mix(in srgb, #8d6bb8 21%, white); color: #5f477d; } .project-pubs a:hover { background: #ffffff; color: #244b74; border-color: color-mix(in srgb, #5c8dc5 46%, var(--border)); box-shadow: 0 10px 24px rgba(1,31,91,.16); } .thrust-alt .project-pubs a:hover { color: #5f477d; border-color: color-mix(in srgb, #8d6bb8 48%, var(--border)); } @media (max-width: 980px) { .project-card, .thrust-alt .project-card { display: flex; flex-direction: column; min-height: 0; } .project-visual { order: 1; position: static; width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; } .project-pubs { padding: 0; } .project-category, .project-info h3, .project-info > p, .method-row, .system-row { max-width: none; } .project-story { margin-top: 18px; } .project-info { order: 2; display: block; padding: clamp(26px, 3vw, 44px); } .paper-row, .thrust-alt .paper-row { position: static; width: auto; grid-template-columns: 110px minmax(0, 1fr); margin-top: 14px; } .paper-row .project-pubs { flex-direction: row; } } @media (max-width: 700px) { .research-hero { padding-top: 54px; } .research-hero-grid, .logic-grid, .thrust-nav { grid-template-columns: 1fr; } .hero-content h1 { font-size: clamp(2.25rem, 13vw, 3.35rem); } .tag-row, .paper-row, .thrust-alt .paper-row { grid-template-columns: 1fr; } } /* Publication links should read as quiet text until hover. */ .featured-pub-title a, .paper-title-link { color: inherit; text-decoration: none; } .featured-pub-title a:hover, .paper-title-link:hover { color: var(--crimson); text-decoration: none; } /* Clickable pill links darken consistently on hover. */ a.pi-link, a.student-link, a.home-team-link, .research-thrust-card a.thrust-link, .project-pubs a, .topic-filter-bar .filter-btn { border-radius: 999px; transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); } a.pi-link:hover, a.student-link:hover, a.home-team-link:hover, .research-thrust-card a.thrust-link:hover, .topic-filter-bar .filter-btn:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; box-shadow: 0 10px 24px rgba(1,31,91,.16); } .thrust-biophysics a.thrust-link:hover, .thrust-alt .project-pubs a:hover { background: #5f477d; border-color: #5f477d; color: #ffffff; } /* Biopolymer Helix polish: forest base, mint energy accents, violet genome accents. */ html[data-theme="biopolymer-helix"] .badge, html[data-theme="biopolymer-helix"] .project-category, html[data-theme="biopolymer-helix"] .team-role-label { border-color: color-mix(in srgb, var(--sage) 42%, var(--border)); background: color-mix(in srgb, var(--sage) 14%, white); color: var(--navy); } html[data-theme="biopolymer-helix"] .thrust-section:not(.thrust-alt) .project-card, html[data-theme="biopolymer-helix"] .pi-section { background: linear-gradient(135deg, color-mix(in srgb, var(--sage) 8%, white), rgba(255,255,255,.97) 48%), #ffffff; } html[data-theme="biopolymer-helix"] .thrust-alt { background: linear-gradient(90deg, color-mix(in srgb, var(--crimson) 12%, transparent), transparent 34%), var(--paper-warm); } html[data-theme="biopolymer-helix"] .project-story { border-left-color: var(--sage); background: color-mix(in srgb, var(--sage) 10%, white); } html[data-theme="biopolymer-helix"] .method-row em, html[data-theme="biopolymer-helix"] .member-card:has(.member-photo-battery) .student-tag { border-color: color-mix(in srgb, var(--sage) 46%, var(--border)); background: color-mix(in srgb, var(--sage) 20%, white); color: var(--navy); } html[data-theme="biopolymer-helix"] .system-row em { border-color: color-mix(in srgb, var(--navy) 34%, var(--border)); background: color-mix(in srgb, var(--navy) 9%, white); color: var(--navy); } html[data-theme="biopolymer-helix"] .project-pubs a { border-color: color-mix(in srgb, var(--crimson) 40%, var(--border)); background: color-mix(in srgb, var(--crimson) 13%, white); color: var(--crimson-dark); } html[data-theme="biopolymer-helix"] .thrust-alt .project-category, html[data-theme="biopolymer-helix"] .thrust-alt .project-story, html[data-theme="biopolymer-helix"] .pi-directions { border-color: color-mix(in srgb, var(--crimson) 40%, var(--border)); background: color-mix(in srgb, var(--crimson) 11%, white); color: var(--crimson-dark); } html[data-theme="biopolymer-helix"] .thrust-alt .project-story { border-left-color: var(--crimson); } html[data-theme="biopolymer-helix"] .thrust-alt .method-row em, html[data-theme="biopolymer-helix"] .thrust-alt .system-row em, html[data-theme="biopolymer-helix"] .member-card:has(.member-photo-genome) .student-tag { border-color: color-mix(in srgb, var(--crimson) 42%, var(--border)); background: color-mix(in srgb, var(--crimson) 14%, white); color: var(--crimson-dark); } html[data-theme="biopolymer-helix"] .thrust-nav .thrust-link::before { background: var(--sage); } html[data-theme="biopolymer-helix"] .thrust-nav .thrust-link:last-child::before { background: var(--crimson); } html[data-theme="biopolymer-helix"] .thrust-nav .thrust-link.active .thrust-link-index { background: var(--navy); border-color: var(--navy); } html[data-theme="biopolymer-helix"] .thrust-nav .thrust-link.active .thrust-link-desc { color: var(--crimson); } html[data-theme="biopolymer-helix"] a.pi-link:hover, html[data-theme="biopolymer-helix"] a.student-link:hover, html[data-theme="biopolymer-helix"] a.home-team-link:hover, html[data-theme="biopolymer-helix"] .research-thrust-card a.thrust-link:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; box-shadow: 0 10px 24px rgba(18,63,56,.18); } html[data-theme="biopolymer-helix"] .project-pubs a:hover, html[data-theme="biopolymer-helix"] .topic-filter-bar .filter-btn:hover, html[data-theme="biopolymer-helix"] .topic-filter-bar .filter-btn.active, html[data-theme="biopolymer-helix"] .publication-highlight-card:hover .publication-cover-link { background: var(--crimson); border-color: var(--crimson); color: #ffffff; box-shadow: 0 10px 24px color-mix(in srgb, var(--crimson) 20%, transparent); } html[data-theme="biopolymer-helix"] .thrust-biophysics a.thrust-link:hover, html[data-theme="biopolymer-helix"] .thrust-alt .project-pubs a:hover { background: var(--crimson-dark); border-color: var(--crimson-dark); color: #ffffff; } /* Mobile menu support for the shared generated header. Desktop/tablet header styling above remains unchanged from the restored visual baseline. */ .nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; } .nav-toggle-line { position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transition: opacity var(--transition), transform var(--transition); } .nav-toggle-line:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); } .nav-toggle-line:nth-child(2) { transform: translate(-50%, -50%); } .nav-toggle-line:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); } .nav-open .nav-toggle-line:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .nav-open .nav-toggle-line:nth-child(2) { opacity: 0; } .nav-open .nav-toggle-line:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 760px) { .nav-container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; } .nav-logo { min-width: 0; } .nav-toggle { display: block; } .nav-links { display: none; grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 6px 0 2px; } .nav-open .nav-links { display: flex; } .nav-links a { padding: 12px 0; } .nav-submenu { position: static; display: grid; min-width: 0; margin: -2px 0 8px; padding: 0 0 0 14px; background: transparent; border: 0; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; } .nav-submenu::before { display: none; } .nav-submenu a, html[data-theme] .nav-submenu a, html[data-theme] .nav-submenu a:visited { padding: 8px 0; color: rgba(255,255,255,.68); font-size: .78rem; } .nav-submenu a:hover, html[data-theme] .nav-submenu a:hover { background: transparent; color: #ffffff; } .nav-links a.active::after { bottom: 6px; } }