/* ============================================ TIME Lab — styles.css ============================================ STRUCTURE: 1. THEME BLOCK ← swap this section to change the entire site 2. CSS VARIABLES (structural — do not edit for theming) 3. ACCESSIBILITY — skip nav, focus styles 4. GLOBAL RESET & BASE 5. HEADER & NAVIGATION 6. BUTTONS 7. HOME PAGE 8. PEOPLE PAGE 9. PUBLICATIONS PAGE 9b. PUBLICATION DETAIL PAGE 10. NEWS PAGE 11. PI / TEAM MEMBER PROFILE PAGES 12. FOOTER 13. RESPONSIVE — tablet, mobile, small mobile 14. UTILITY CLASSES ============================================ */ /* ============================================ 1. THEME BLOCK ───────────────────────────────────────────── TO SWAP THEMES: replace only the contents of this block. Every other section uses only the tokens defined here. ACTIVE: Option 1 — Precision Blue leads · purple as depth · green for life science ============================================ */ :root { /* ── Core named colors ───────────────────────── */ --color-purple: #8b4dc0; --color-purple-dark: #6a3a9a; --color-blue: #007bff; /* TIME blue — buttons, links, light-bg accents */ --color-blue-dark: #0056b3; --color-sky-blue: #7ec8ff; /* TIME sky blue — accents on dark hero backgrounds */ --color-green: #4a7c59; --color-green-dark: #365c42; --color-charcoal: #2c3322; /* ── Text ────────────────────────────────────── */ --color-heading: #1f2d1f; --color-body: #3d4d38; --color-muted: #7a8a72; --color-muted-light: #9aaa92; /* ── Backgrounds ─────────────────────────────── */ --color-bg-page: #f6f7f2; --color-bg-card: #ffffff; --color-bg-section: #eef0e8; --color-bg-nav: #ffffff; /* ── Borders ─────────────────────────────────── */ --color-border: #ddddd0; --color-border-nav: #ddddd0; --color-nav-active: #4a7c59; /* ── Buttons ─────────────────────────────────── */ --color-btn-primary: #007bff; --color-btn-primary-hover: #0056b3; --color-btn-primary-text: #ffffff; --color-btn-outline: #007bff; --color-btn-secondary-bg: transparent; /* ── Semantic roles ───────────────────────────── */ --color-link: #007bff; --color-link-hover: #0056b3; --color-tag-bg: #4a7c59; --color-tag-text: #ffffff; --color-footer-bg: #1f2d1f; --color-footer-text: #b8ccb4; --color-footer-link: #7ab894; --color-footer-border: rgba(255,255,255,0.12); --color-nav-text: #233A67; /* ── Absolute neutrals ───────────────────────── */ --color-white: #ffffff; --color-black: #000000; /* ── Typography scale ────────────────────────── */ --font-size-nav: 1.05rem; /* ── People / photos ─────────────────────────── */ --color-photo-border: #4a7c59; --color-name-text: #007bff; /* ── Publications ────────────────────────────── */ --color-pub-title: #007bff; --color-pub-authors: #3d4d38; --color-pub-meta: #7a8a72; /* ── Fonts ───────────────────────────────────── */ /* acumin-pro loaded via Typekit (use.typekit.net/wbk1txd.css) in each page */ --font-heading: acumin-pro, "Plus Jakarta Sans", sans-serif; --font-body: acumin-pro, "Plus Jakarta Sans", sans-serif; /* ── Per-lab identity colors ─────────────────────────────── One unique color per PI lab — used site-wide for filter buttons, PI card bars, team card badges, and publication lab indicators. Change a value here and it propagates everywhere. */ --lab-pillarisetty: #6d28d9; /* violet */ --lab-damle: #1d4ed8; /* royal blue */ --lab-yeung: #15803d; /* forest green */ --lab-sharib: #c2410c; /* burnt orange */ --lab-crispe: #92400e; /* dark amber */ /* ── Metrics separator ──────────────────────────────────────── Controls the gap between the hero and metrics panel on people.html. 4px = nearly seamless · 10px = subtle (default) 24px = comfortable · 32px = generous */ --metrics-separator-height: 10px; /* ── Chord diagram — 5 node colors ────────────── */ --chord-1: #4a7c59; /* Cancer Types — sage green */ --chord-2: #007bff; /* Research Groups — TIME blue */ --chord-3: #d4851a; /* Projects — warm ochre */ --chord-4: #8b4dc0; /* Lab Members — soft purple */ --chord-5: #c0392b; /* Publications — deep red */ /* ── Donate modal lab dots: ── ─────────────────────────────────────────── */ /* ── Hero panel ───────────────────────────────────────────── */ --color-hero-frost: rgba(8, 10, 24, 0.82); /* mission panel bg + restore pill */ --color-hero-frost-hover: rgba(8, 10, 24, 0.96); /* restore pill :hover */ --color-hero-frost-light: rgba(8, 10, 24, 0.72); /* page-hero image overlay */ --color-hero-em: var(--color-sky-blue); /* accent — sky blue on dark bg */ --color-hero-bg: linear-gradient(160deg, #0d1b2a 0%, #1a2e44 60%, #0f3d26 100%); --color-hero-glow: rgba(0, 123, 255, 0.10); /* page-hero radial glow tint */ /* ── Chord diagram — research-network.html ────────────────── Change these values to retheme the entire chord diagram. The JS reads these at runtime via getComputedStyle so CSS changes propagate immediately without re-running the script. */ --chord-bg: #f8f9fa; --chord-surface: rgba(255,255,255,0.95); --chord-surface2: #f0f2f5; --chord-border: rgba(0,0,0,0.07); --chord-border2: rgba(0,0,0,0.13); --chord-text: #1a1a2e; --chord-muted: #666666; /* Category colors — these drive arc colors, filter buttons, and panel accents */ --chord-c-disease: #b91c1c; /* Cancer Types */ --chord-c-sarco: #b45309; /* Liposarcoma (distinct within disease) */ --chord-c-lab: #6d28d9; /* Research Groups */ --chord-c-biology: #0d7c6e; /* Projects & Trials */ --chord-c-team: #15803d; /* People & Collaborations */ --chord-c-funding: #92400e; /* Funding Support */ /* Detail panel tokens */ --panel-bg: rgba(255,255,255,0.97); --panel-border: rgba(0,0,0,0.08); --panel-hdr-bg: #f0f2f5; --panel-text: #1a1a2e; --panel-muted: #666666; --panel-subtle: rgba(0,0,0,0.04); --panel-subtle2: rgba(0,0,0,0.10); --panel-divider: rgba(0,0,0,0.07); } /* ============================================ 2. CSS VARIABLES (structural — do not edit for theming) ============================================ */ :root { /* Spacing */ --navbar-height: 124px; /* logo 84px + padding-top/bottom 20px each */ --spacing-xs: 5px; --spacing-sm: 10px; --spacing-md: 20px; --spacing-lg: 40px; --spacing-xl: 60px; /* Radius */ --radius-small: 5px; --radius-medium: 8px; --radius-large: 10px; --radius-round: 50px; --radius-circle: 50%; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; /* Shadows */ --shadow-light: 0 2px 4px rgba(0,0,0,.08); --shadow-medium: 0 2px 8px rgba(0,0,0,.10); --shadow-strong: 0 4px 8px rgba(0,0,0,.14); --shadow-hover: 0 4px 12px rgba(0,0,0,.14); --shadow-mobile-nav: 2px 0 10px rgba(0,0,0,.10); /* Overlays */ --overlay-dark: rgba(0,0,0,.60); --overlay-medium: rgba(0,0,0,.50); --overlay-light: rgba(0,0,0,.05); --overlay-white-light: rgba(255,255,255,.10); --overlay-white-medium: rgba(255,255,255,.80); /* Z-index */ --z-navbar: 3000; --z-dropdown: 999; --z-modal: 2000; } /* ============================================ 3. ACCESSIBILITY ============================================ */ /* Skip navigation link — visually hidden until focused */ .skip-nav { position: absolute; top: -100%; left: 0; padding: 12px 20px; background: var(--color-blue); color: var(--color-white); font-family: var(--font-heading); font-weight: 700; font-size: 14px; text-decoration: none; z-index: 9999; border-radius: 0 0 var(--radius-small) 0; transition: top var(--transition-fast); } .skip-nav:focus { top: 0; outline: 3px solid var(--color-green); outline-offset: 2px; } /* Global focus ring — visible on keyboard nav, suppressed on mouse click */ :focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; border-radius: 2px; } /* Remove default outline only when :focus-visible is supported */ :focus:not(:focus-visible) { outline: none; } /* ============================================ 4. GLOBAL RESET & BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); line-height: 1.6; padding-top: var(--navbar-height); background-color: var(--color-bg-page); color: var(--color-body); } h1 { font-family: var(--font-heading); font-weight: 700; font-size: 2.5rem; color: var(--color-heading); line-height: 1.2; letter-spacing: -0.02em; } h2 { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); line-height: 1.3; letter-spacing: -0.015em; } h3 { font-family: var(--font-heading); font-weight: 700; color: var(--color-blue); } h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); } p { font-size: 1rem; color: var(--color-body); line-height: 1.7; } a { color: var(--color-link); transition: color var(--transition-normal); } a:hover { color: var(--color-link-hover); } img { max-width: 100%; height: auto; } /* ============================================ 5. HEADER & NAVIGATION ============================================ */ .navbar { position: fixed; background-color: var(--color-bg-nav); top: 0; left: 0; right: 0; width: 100%; padding: var(--spacing-md); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border-nav); z-index: var(--z-navbar); overflow: visible; } .navbar-logo { flex-shrink: 0; } /* Right-side group — keeps donate button and hamburger together, donate sits above hamburger on mobile */ .navbar-right { display: flex; flex-direction: row; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; margin-left: auto; } /* Nav list — centered absolutely */ .nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; position: absolute; left: 50%; transform: translateX(-50%); } .nav-list > li { position: relative; } .nav-list li a { font-family: var(--font-body); font-weight: 400; font-size: var(--font-size-nav); display: block; color: var(--color-nav-text); padding: 14px 16px; text-decoration: none; transition: color var(--transition-normal); white-space: nowrap; position: relative; } /* Active page indicator — underline only, text stays default nav color */ .nav-list li a.active, .nav-list li a[aria-current="page"] { color: var(--color-nav-text); } .nav-list li a.active::after, .nav-list li a[aria-current="page"]::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 3px; background: var(--color-nav-active); border-radius: 2px; } .nav-list li a:hover { color: var(--color-blue); } /* Donate button */ /* Donate button — white bg, rounded corners, blue text, nav-link font size. Hover: nav background colour, white text. */ .navbar-donate-btn { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-nav); letter-spacing: 0.01em; text-decoration: none; text-align: center; border-radius: var(--radius-medium); cursor: pointer; border: none; flex-shrink: 0; padding: 7px 18px; background: var(--color-bg-nav); color: var(--color-blue); white-space: nowrap; z-index: 1001; transition: background var(--transition-fast), color var(--transition-fast); } .navbar-donate-btn:hover { background: var(--color-blue); color: var(--color-bg-nav); } /* Dropdown */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--color-bg-card); min-width: 200px; box-shadow: var(--shadow-strong); list-style: none; margin: 0; padding: 0; z-index: var(--z-dropdown); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-medium) var(--radius-medium); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); color: var(--color-charcoal); } .dropdown-menu li:last-child a { border-bottom: none; } .dropdown-menu li a:hover { background-color: var(--color-bg-section); color: var(--color-blue); } /* Hamburger */ .hamburger { display: none; /* hidden on desktop — shown via media query */ flex-direction: column; justify-content: space-between; width: 30px; height: 24px; background: transparent; border: none; cursor: pointer; padding: 0; flex-shrink: 0; z-index: calc(var(--z-navbar) + 1); /* above navbar so it stays clickable */ } .hamburger-line { width: 100%; height: 3px; background-color: var(--color-nav-text); border-radius: 3px; transition: transform var(--transition-normal), opacity var(--transition-normal), background-color var(--transition-normal); } .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(10.5px) rotate(45deg); background-color: var(--color-heading); } .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); background-color: var(--color-heading); } /* ============================================ 6. BUTTONS ============================================ */ /* Base */ .btn { display: inline-block; font-family: var(--font-heading); font-weight: 600; text-decoration: none; text-align: center; border-radius: var(--radius-small); transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; border: 2px solid transparent; } /* Primary — solid blue */ .btn-primary { background-color: var(--color-btn-primary); color: var(--color-btn-primary-text); border-color: var(--color-btn-primary); } .btn-primary:hover { background-color: var(--color-btn-primary-hover); border-color: var(--color-btn-primary-hover); color: var(--color-btn-primary-text); transform: translateY(-2px); } /* Secondary — outlined blue */ .btn-secondary { background-color: transparent; color: var(--color-btn-outline); border-color: var(--color-btn-outline); } .btn-secondary:hover { background-color: var(--color-btn-primary); color: var(--color-white); border-color: var(--color-btn-primary); } /* Accent button — TIME green */ .btn-accent { background-color: var(--color-green); color: var(--color-white); border-color: var(--color-green); } .btn-accent:hover { background-color: var(--color-green-dark); border-color: var(--color-green-dark); color: var(--color-white); } /* Info — solid blue (Bootstrap compat) */ .btn-info { background-color: var(--color-btn-primary); color: var(--color-btn-primary-text); border-color: var(--color-btn-primary); } .btn-info:hover { background-color: var(--color-btn-primary-hover); color: var(--color-btn-primary-text); transform: translateY(-2px); } /* Success — green */ .btn-success { background-color: var(--color-green); color: var(--color-white); border-color: var(--color-green); } .btn-success:hover { background-color: var(--color-green-dark); color: var(--color-white); transform: translateY(-2px); } /* Link button */ .btn-link { background: transparent; border: none; color: var(--color-link); padding: 0; font-weight: 600; text-decoration: none; } .btn-link:hover { color: var(--color-link-hover); } /* Filter/category buttons — unified pill style Matches .people-filter-btn exactly so both pages are visually identical. Outlined at rest, filled charcoal when active. Theme-driven throughout. */ .btn-filter { padding: 6px 18px; border-radius: var(--radius-round); border: 1.5px solid var(--color-border); background: var(--color-bg-card); color: var(--color-muted); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all var(--transition-fast); } .btn-filter:hover { border-color: var(--color-charcoal); color: var(--color-charcoal); } .btn-filter.active { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-white); } /* Sizes */ .btn-sm { padding: 8px 16px; font-size: 14px; } .btn-md { padding: 10px 20px; font-size: 16px; } .btn-lg { padding: 15px 30px; font-size: 18px; } /* Shapes */ .btn-rounded { border-radius: var(--radius-small); } .btn-pill { border-radius: var(--radius-round); } /* Year badge */ .year-badge, .publication-year-badge { /* Superseded by .featured-pub-year plain text style — badge hidden */ display: none; } /* ============================================ 7. HOME PAGE ============================================ */ /* Hero — full-viewport split panel (replaces .banner) See hero CSS block below for all styling. .banner and .banner-text-container are no longer used. */ /* ── HERO ──────────────────────────────────────────────────── Layout: two rows, not full viewport. Row 1 (top): three columns — image | mission panel | image Row 2 (bottom): one full-width image spanning all columns Mission panel is closeable; closing reveals a centre image. ──────────────────────────────────────────────────────────── */ .hero { position: relative; width: 100%; /* Not full viewport — sized by content rows */ } /* ── Three-row grid ─────────────────────────────────────────── */ .hero-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; grid-template-rows: auto auto auto; gap: 4px; } /* ── Row 1: full-width illustration ────────────────────────── */ .hero-cell--illustration { grid-column: 1 / 4; grid-row: 1; line-height: 0; background: var(--color-white); text-align: center; /* centre image if viewport narrower than image */ } .hero-illustration-img { display: block; width: 100%; max-width: 2292px; /* never stretch beyond natural image width */ height: auto; margin: 0 auto; } /* ── Row 2 cells ────────────────────────────────────────────── */ .hero-grid .hero-cell:not(.hero-cell--illustration) { position: relative; overflow: hidden; height: clamp(280px, 35vw, 480px); } .hero-cell--science { grid-column: 1; grid-row: 2; } .hero-cell--mission { grid-column: 2; grid-row: 2; } .hero-cell--lab { grid-column: 3; grid-row: 2; } /* ── Row 3: bottom full-width image ────────────────────────── */ /* Height is driven by the image — no fixed height, no cropping. */ .hero-grid .hero-cell--wide { position: relative; overflow: hidden; grid-column: 1 / 4; grid-row: 3; /* height intentionally omitted — image sets it */ } /* ── Images (Row 2 cells) ───────────────────────────────────── */ .hero-grid .hero-img, .hero-cell .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; /* override Bootstrap img { max-width: 100% } */ max-height: none; /* safety */ object-fit: cover; object-position: center; animation: heroBurns 14s ease-out forwards; } @keyframes heroBurns { from { transform: scale(1); } to { transform: scale(1.05); } } /* ── Row 3 image — overrides cover behaviour above ─────────── */ /* Full width, natural height, no cropping ever. */ .hero-cell--wide .hero-img { position: static; width: 100%; height: auto; max-width: 100%; inset: unset; object-fit: unset; object-position: unset; } /* ── Mission panel ─────────────────────────────────────────── */ .hero-cell--mission .hero-mission { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 36px 28px; text-align: center; background: var(--color-hero-frost); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 2; transition: opacity 0.4s ease; opacity: 1; } .hero-cell--mission .hero-mission--hidden { opacity: 0; pointer-events: none; } /* Centre image — shown when mission is closed */ .hero-cell--mission .hero-mission-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; z-index: 1; opacity: 0; transition: opacity 0.4s ease; animation: heroBurns 14s ease-out forwards; } .hero-cell--mission.mission-closed .hero-mission-img { opacity: 1; } /* Restore pill — shown when mission is closed */ .hero-mission-restore { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; padding: 5px 14px 5px 10px; background: var(--color-hero-frost); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-round); color: rgba(255, 255, 255, 0.75); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, background var(--transition-fast); animation: none; } .hero-cell--mission.mission-closed .hero-mission-restore { opacity: 1; pointer-events: auto; } .hero-mission-restore:hover { background: var(--color-hero-frost-hover); color: var(--color-white); } /* ── Mission typography ────────────────────────────────────── */ .hero-eyebrow { font-family: var(--font-heading); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin: 0 0 12px; } .hero-headline { font-family: var(--font-heading); font-size: clamp(1.1rem, 2.2vw, 1.8rem); font-weight: 700; color: var(--color-white); line-height: 1.25; margin: 0 0 14px; } .hero-headline em { font-style: normal; color: var(--color-hero-em); } .hero-subline { font-family: var(--font-body); font-size: clamp(0.78rem, 1.1vw, 0.92rem); color: rgba(255, 255, 255, 0.72); line-height: 1.72; margin: 0 0 20px; max-width: 340px; } /* ── CTA buttons ───────────────────────────────────────────── */ .hero-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .hero-btn { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; text-decoration: none; text-align: center; padding: 9px 22px; border-radius: var(--radius-round); white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .hero-btn--primary { background: var(--color-blue); color: var(--color-white); border: 2px solid var(--color-blue); } .hero-btn--primary:hover { background: var(--color-blue-dark); border-color: var(--color-blue-dark); color: var(--color-white); transform: translateY(-2px); } .hero-btn--outline { background: var(--color-charcoal); color: var(--color-white); border: 2px solid var(--color-charcoal); } .hero-btn--outline:hover { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-white); transform: translateY(-2px); } /* ── Close button ──────────────────────────────────────────── */ .hero-mission-close { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: var(--radius-circle); background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.55); font-size: 0.68rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .hero-mission-close:hover { background: rgba(255, 255, 255, 0.22); color: var(--color-white); } /* ── Scroll cue ────────────────────────────────────────────── */ .hero-scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0 4px; animation: scrollBob 2.2s ease-in-out infinite; } .hero-scroll-line { display: block; width: 1.5px; height: 22px; background: linear-gradient(to bottom, transparent, var(--color-border)); border-radius: 2px; } .hero-scroll-label { font-family: var(--font-heading); font-size: 0.56rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-muted-light); } @keyframes scrollBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; gap: 3px; } .hero-grid .hero-cell--illustration { grid-column: 1 / 3; grid-row: 1; } .hero-grid .hero-cell--science { grid-column: 1; grid-row: 2; } .hero-grid .hero-cell--mission { grid-column: 1 / 3; grid-row: 3; height: auto; min-height: 260px; } .hero-grid .hero-cell--lab { grid-column: 2; grid-row: 2; } .hero-grid .hero-cell--wide { grid-column: 1 / 3; grid-row: 4; } .hero-grid .hero-cell:not(.hero-cell--illustration) { height: clamp(180px, 28vw, 300px); } .hero-cell--mission .hero-mission { padding: 28px 28px 24px; } .hero-subline { max-width: 480px; } } @media (max-width: 600px) { .hero-grid { grid-template-columns: 1fr; gap: 3px; } .hero-grid .hero-cell--illustration { grid-column: 1; grid-row: 1; } .hero-grid .hero-cell--science { grid-column: 1; grid-row: 2; height: 52vw; } .hero-grid .hero-cell--mission { grid-column: 1; grid-row: 3; height: auto; min-height: 240px; } .hero-grid .hero-cell--lab { display: none; } .hero-grid .hero-cell--wide { grid-column: 1; grid-row: 4; height: 44vw; } .hero-cell--mission .hero-mission { padding: 24px 20px 20px; } .hero-headline { font-size: 1.1rem; } .hero-subline { font-size: 0.82rem; } .hero-actions { flex-direction: column; align-items: center; } .hero-btn { width: 100%; max-width: 240px; } } /* ── DONATE MODAL ──────────────────────────────────────────── Triggered by "Support Our Labs" in the hero. Lab dot colors match the chord diagram lab tokens. ──────────────────────────────────────────────────────────── */ .donate-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.52); z-index: calc(var(--z-modal) + 10); align-items: center; justify-content: center; padding: var(--spacing-md); } .donate-modal-backdrop--open { display: flex; animation: donateBackdropIn 0.2s ease; } @keyframes donateBackdropIn { from { opacity: 0; } to { opacity: 1; } } .donate-modal { position: relative; background: var(--color-bg-card); border-radius: var(--radius-large); padding: 40px 40px 32px; width: min(560px, 92vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.22); animation: donateModalIn 0.25s ease; } @keyframes donateModalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .donate-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: var(--radius-circle); background: var(--color-bg-section); border: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .donate-modal-close:hover { background: var(--color-border); color: var(--color-charcoal); } .donate-modal-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-heading); margin: 0 0 8px; } .donate-modal-sub { font-size: 0.92rem; color: var(--color-muted); margin: 0 0 24px; line-height: 1.6; } /* ── Lab cards grid ────────────────────────────────────────── */ .donate-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .donate-lab-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-medium); border: 1.5px solid var(--color-border); background: var(--color-bg-card); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .donate-lab-card:hover { border-color: var(--color-blue); box-shadow: var(--shadow-medium); transform: translateY(-2px); } /* Consortium card spans full width */ .donate-lab-card--consortium { grid-column: 1 / 3; flex-direction: row; align-items: center; gap: 12px; border-color: var(--color-blue); background: #f0f7ff; } .donate-lab-card--consortium:hover { background: #e4f0ff; } .donate-lab-dot { display: block; width: 10px; height: 10px; border-radius: var(--radius-circle); flex-shrink: 0; background: var(--color-muted); } /* Lab-specific dot colors — match chord diagram tokens */ .donate-lab-card[data-lab="pillarisetty"] .donate-lab-dot { background: var(--lab-pillarisetty); } .donate-lab-card[data-lab="damle"] .donate-lab-dot { background: var(--lab-damle); } .donate-lab-card[data-lab="yeung"] .donate-lab-dot { background: var(--lab-yeung); } .donate-lab-card[data-lab="sharib"] .donate-lab-dot { background: var(--lab-sharib); } .donate-lab-card[data-lab="crispe"] .donate-lab-dot { background: var(--lab-crispe); } .donate-lab-card[data-lab="consortium"] .donate-lab-dot { background: var(--color-blue); } .donate-lab-name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--color-heading); line-height: 1.2; } .donate-lab-focus { font-size: 0.78rem; color: var(--color-muted); line-height: 1.4; } .donate-lab-card--consortium .donate-lab-name { font-size: 1rem; } .donate-lab-card--consortium .donate-lab-focus { margin-left: auto; } .donate-general { text-align: center; font-size: 0.82rem; } .donate-general a { color: var(--color-muted); text-decoration: underline; transition: color var(--transition-fast); } .donate-general a:hover { color: var(--color-link); } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 480px) { .donate-modal { padding: 28px 20px 24px; } .donate-lab-grid { grid-template-columns: 1fr; } .donate-lab-card--consortium { grid-column: 1; flex-direction: column; } .donate-lab-card--consortium .donate-lab-focus { margin-left: 0; } } /* ============================================ 7a. PAGE HERO — shared banner component Used on: research-network, people, publications, news Mirrors the home page mission panel exactly: background / blur / typography classes all match .hero-eyebrow / .hero-headline / .hero-subline reused verbatim ============================================ */ /* ── Outer wrapper — full-width dark strip ── */ /* Background matches the perceived look of the home page mission panel: the mission panel is rgba(8,10,24,0.82) over a blurred image, producing a rich dark navy-blue. Here we bake those undertones directly into a gradient — same approach as community.html — so no image is required. */ .page-hero { position: relative; width: 100%; overflow: hidden; background: var(--color-hero-bg); display: flex; align-items: stretch; } /* Subtle radial glow — same as community page ::before */ .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 80%, var(--color-hero-glow) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ── Optional background image layer ──────── */ /* If you later want a real image behind the panel: 1. Add inside .page-hero 2. Add class .page-hero--has-img to the section The image sits behind the frosted overlay, same as the home hero. */ .page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; animation: heroBurns 14s ease-out forwards; } /* Frosted overlay — active only when an image is present */ .page-hero--has-img .page-hero__overlay { position: absolute; inset: 0; background: var(--color-hero-frost-light); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 2; } /* ── Content card — centred, width-constrained ── */ .page-hero__body { position: relative; z-index: 3; width: 100%; max-width: 700px; margin: 0 auto; padding: 32px 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 220px; /* fixed — same on every page hero */ box-sizing: border-box; overflow: hidden; } /* ── Typography — reuses existing hero classes verbatim ── */ /* .hero-eyebrow, .hero-headline, .hero-headline em, .hero-subline are already defined in section 7 (HERO) above. No new rules needed — colour, font, weight, spacing all match the home page mission panel automatically. */ /* ── Responsive ── */ @media (max-width: 900px) { .page-hero__body { padding: 28px 28px 24px; height: 180px; } .hero-subline { max-width: none; } } @media (max-width: 600px) { .page-hero__body { padding: 24px 20px 20px; height: auto; min-height: 160px; overflow: visible; } } /* ── THREE-PANEL HERO — optional modifier ──────────────────────── Add class .page-hero--panels to the
to split the hero into: [left image] [centre text] [right image]. FALLBACK BEHAVIOUR — no images provided: The image panels are display:none when empty. The hero looks exactly like the standard single-panel version. No layout shift. TO ACTIVATE AN IMAGE PANEL: Add inside .page-hero--panels, alongside .page-hero__body:
The panels are siblings of .page-hero__body, not children. IMAGES: object-fit:cover fills the panel at the hero's height. Illustrations with wide horizontal subjects work best — content at top/bottom may be lightly cropped at the panel edges. */ .page-hero--panels { display: grid; /* Centre column: text content — sized by content, min 320px. Side columns: 0 when empty, grow to 1fr when an image exists. */ grid-template-columns: [left] 0fr [centre] 1fr [right] 0fr; grid-template-rows: 220px; align-items: stretch; } /* Centre body stays identical to single-panel version */ .page-hero--panels .page-hero__body { grid-column: centre; grid-row: 1; } /* Image panel — hidden by default (zero width, no overflow) */ .page-hero__panel { display: none; /* off until an image child is present */ position: relative; overflow: hidden; grid-row: 1; /* Thin border separates panel from gradient centre */ border-color: rgba(255, 255, 255, 0.08); border-style: solid; border-width: 0; } /* Show panel and give it space only when it contains an image */ .page-hero__panel:has(.page-hero__panel-img) { display: block; } .page-hero--panels:has(.page-hero__panel--left .page-hero__panel-img) { grid-template-columns: [left] 1fr [centre] minmax(320px, 1.2fr) [right] 0fr; } .page-hero--panels:has(.page-hero__panel--right .page-hero__panel-img) { grid-template-columns: [left] 0fr [centre] minmax(320px, 1.2fr) [right] 1fr; } .page-hero--panels:has(.page-hero__panel--left .page-hero__panel-img):has(.page-hero__panel--right .page-hero__panel-img) { grid-template-columns: [left] 1fr [centre] minmax(320px, 1fr) [right] 1fr; } .page-hero__panel--left { grid-column: left; border-right-width: 0; } .page-hero__panel--right { grid-column: right; border-left-width: 0; } /* Panel image — fills column at hero height, object-fit:cover */ .page-hero__panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Responsive — panels stack below centre on tablet, hide on mobile */ @media (max-width: 900px) { .page-hero--panels { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto; } .page-hero--panels .page-hero__body { grid-column: 1; grid-row: 2; } .page-hero__panel--left { grid-column: 1; grid-row: 1; height: 160px; border-right-width: 0; border-bottom-width: 1px; } .page-hero__panel--right { grid-column: 1; grid-row: 3; height: 160px; border-left-width: 0; border-top-width: 1px; } } @media (max-width: 600px) { .page-hero__panel { display: none !important; } } /* ── Metrics banner — sits directly below .page-hero ──────────── A grey separator bar (page background colour) visually lifts the metrics panel away from the hero, then the dark gradient resumes. Numbers: TIME blue (#007bff). Labels: light grey rgba(255,255,255,0.5). Structure:
...
...
← optional
*/ /* Grey separator — page background colour, creates visible gap */ .metrics-banner { display: block; position: relative; width: 100%; overflow: hidden; /* Thin page-bg bar at top acts as the separator */ border-top: var(--metrics-separator-height) solid var(--color-bg-page); background: linear-gradient(160deg, #0d1b2a 0%, #1a2e44 60%, #0f3d26 100%); min-height: 80px; } /* Subtle glow — mirrors .page-hero::before */ .metrics-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, var(--color-hero-glow) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Stat pills row */ .metrics-banner__stats { position: relative; z-index: 1; display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; padding: 32px 36px; } .metrics-banner__stat { text-align: center; } /* NUMBER — TIME blue, matches hero headline em colour */ .metrics-banner__stat-number { display: block; font-family: var(--font-heading); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 700; color: var(--color-sky-blue); /* TIME sky blue — matches hero */ line-height: 1; letter-spacing: -0.01em; } /* LABEL — light grey, same treatment as hero subline */ .metrics-banner__stat-label { display: block; font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); /* matches .hero-subline */ margin-top: 6px; } /* Full-width lab photo slot — hidden when empty */ .metrics-banner__photo { display: none; position: relative; z-index: 1; width: 100%; overflow: hidden; max-height: 420px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .metrics-banner__photo:has(.metrics-banner__photo-img) { display: block; } .metrics-banner__photo-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; max-height: 420px; } /* Placeholder shown when photo slot is empty */ .metrics-banner__photo-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.25); } .metrics-banner__photo-placeholder svg { opacity: 0.3; } .metrics-banner__photo-img ~ .metrics-banner__photo-placeholder { display: none; } @media (max-width: 900px) { .metrics-banner__stats { gap: 28px; padding: 26px 28px; } .metrics-banner__photo { max-height: 280px; } .metrics-banner__photo-img { max-height: 280px; } } @media (max-width: 600px) { .metrics-banner { border-top-width: 8px; } .metrics-banner__stats { gap: 20px; padding: 22px 16px; } .metrics-banner__stat-number { font-size: 1.5rem; } .metrics-banner__photo { max-height: 200px; } .metrics-banner__photo-img { max-height: 200px; } } /* ── Post-hero whitespace ──────────────────────────────────────── Add class .hero-spacer directly after .page-hero or .metrics-banner to insert breathing room before the first content section. */ .hero-spacer { height: var(--hero-spacer, 56px); background: var(--color-bg-page); } @media (max-width: 600px) { .hero-spacer { height: 36px; } } /* ── Post-hero CTA strip ───────────────────────────────────────── Visible whitespace band below the hero that also holds page-level call-to-action buttons (e.g. community page). Uses page background colour so it reads as breathing room between hero and content. Without buttons it collapses to a pure spacer — use .hero-spacer instead for pages that have no buttons. */ .hero-cta-strip { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 36px 24px 40px; background: var(--color-bg-page); } @media (max-width: 600px) { .hero-cta-strip { padding: 28px 16px 32px; gap: 10px; } } /* ============================================ 7b. HOME PAGE — NEWS & PUBLICATIONS (Do not move or rename this comment — used as an anchor by build scripts to prevent hero CSS from overwriting it.) ============================================ */ /* Homepage news */ .homepage-news { max-width: 1200px; margin: var(--spacing-lg) auto; padding: var(--spacing-lg); } .homepage-news > h2 { text-align: center; font-size: 2.5rem; margin-bottom: var(--spacing-lg); color: var(--color-heading); font-family: var(--font-heading); } .homepage-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-md); } .homepage-news-card { background-color: var(--color-bg-card); border-radius: var(--radius-medium); padding: var(--spacing-md); box-shadow: var(--shadow-medium); transition: transform var(--transition-normal), box-shadow var(--transition-normal); display: flex; flex-direction: column; } .homepage-news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .homepage-news-card .news-date { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; } .homepage-news-card .news-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--color-blue); margin: 0 0 var(--spacing-md); min-height: 50px; } .homepage-news-card .news-image { width: 100%; height: 250px; overflow: hidden; border-radius: var(--radius-medium); margin-bottom: var(--spacing-md); box-shadow: var(--shadow-light); } .homepage-news-card .news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .homepage-news-card:hover .news-image img { transform: scale(1.05); } .homepage-news-card .news-text { font-size: 14px; line-height: 1.6; color: var(--color-body); margin-bottom: var(--spacing-md); flex-grow: 1; } .homepage-news-card .news-link { align-self: flex-start; } .view-all-news { display: block; text-align: center; margin-top: var(--spacing-lg); } /* Homepage news card Read More — outline style matching hero panel */ .homepage-news-card .btn-secondary { background: transparent; color: var(--color-charcoal); border: 1.5px solid var(--color-charcoal); font-size: .82rem; font-weight: 700; font-family: var(--font-heading); padding: 7px 18px; border-radius: var(--radius-round); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); display: inline-block; } .homepage-news-card .btn-secondary:hover { background: var(--color-charcoal); border-color: var(--color-charcoal); color: #fff; transform: none; } /* Bottom-align the Read More within the card */ .homepage-news-card { display: flex; flex-direction: column; } .homepage-news-card .news-link { margin-top: auto; align-self: flex-start; } /* Featured publications (homepage) */ .latest-publications { padding: 60px 20px; background: var(--color-bg-section); } .latest-publications-container { max-width: 1200px; margin: 0 auto; } .latest-publications h1 { text-align: center; color: var(--color-heading); margin-bottom: 40px; font-size: 2.5rem; font-family: var(--font-heading); } #recent-publications-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-bottom: 40px; align-items: stretch; } .featured-publication-card { background: var(--color-bg-card); padding: 28px 28px 24px; border-radius: var(--radius-large); box-shadow: var(--shadow-medium); transition: all 0.3s ease; /* Flex column so button always pins to bottom */ display: flex; flex-direction: column; } .featured-publication-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } /* Year — plain muted text, no bubble */ .featured-pub-year { font-family: var(--font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 10px; } /* Title — fixed min-height so all cards align at the author line */ .featured-pub-title { color: var(--color-pub-title); font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; line-height: 1.45; font-family: var(--font-heading); /* Clamp to 3 lines so cards stay consistent */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.05rem * 1.45 * 3); } /* Authors — clamped to 2 lines, fixed height */ .featured-pub-authors { color: var(--color-muted); font-size: .84rem; margin: 0 0 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(.84rem * 1.5 * 2); } /* Journal */ .featured-pub-journal { color: var(--color-muted); font-size: .84rem; margin: 0 0 14px; font-style: italic; } /* Abstract — grows to fill remaining space, pushing button to bottom */ .featured-pub-abstract { color: var(--color-muted); font-size: .88rem; line-height: 1.65; margin: 0 0 20px; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Button area — always at bottom */ .featured-pub-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } /* Button — outline style matching hero panel */ .featured-pub-link { display: inline-block; padding: 7px 18px; border-radius: var(--radius-round); border: 1.5px solid var(--color-charcoal); background: transparent; color: var(--color-charcoal); text-decoration: none; font-weight: 700; font-size: .82rem; font-family: var(--font-heading); transition: background var(--transition-fast), color var(--transition-fast); } .featured-pub-link:hover { background: var(--color-charcoal); color: #fff; } .featured-pub-link-pubmed { display: none; } .view-all-publications { text-align: center; margin-top: var(--spacing-md); } /* View All Publications — plain link style matching View All News → */ .view-all-publications .btn-info, .view-all-publications .btn-pill { background: transparent; border: none; color: var(--color-link); font-weight: 600; font-size: 1rem; padding: 0; border-radius: 0; text-decoration: none; display: inline-block; transition: color var(--transition-fast); } .view-all-publications .btn-info:hover, .view-all-publications .btn-pill:hover { color: var(--color-link-hover); background: transparent; transform: none; box-shadow: none; } /* ── Lab photo band — people page, between hero and metrics ───────────── Full-width dark band containing the group photo. Invisible until an image is provided (band collapses when empty). */ .lab-photo-band { background: linear-gradient(160deg, #0d1b2a 0%, #1a2e44 60%, #0f3d26 100%); width: 100%; overflow: hidden; /* No min-height — collapses to nothing when no image present */ } .lab-photo-band:not(:has(.lab-photo-band__img)) { display: none; } .lab-photo-band__img { display: block; width: 100%; max-height: 480px; object-fit: cover; object-position: center top; } /* ── People page content wrapper — 90% width, centred ─────────────────── Applied to filter bar + all sections. Hero, metrics, illustration slots and lab photo band remain full-width (outside this wrapper). */ .people-page-inner { width: 90%; max-width: 1600px; margin: 0 auto; } /* ── People page — hide illustration placeholders until activated ──────── The slot itself collapses to zero height with no content, so there's no blank space between sections. */ .people-page .illustration-slot__placeholder { display: none; } .people-page .illustration-slot:not(:has(.illustration-slot__img)) { display: none; } /* ============================================ 8. PEOPLE PAGE ============================================ */ /* ── Lab color tokens ────────────────────────────────────────── Defined in section 1 theme block — see --lab-pillarisetty etc. CSS rules referencing those variables follow below. */ /* ── Hero stats strip ────────────────────────────────────────── Appended inside .page-hero__body below .hero-subline. Inherits the page-hero dark background automatically. */ .page-hero__stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; } .page-hero__stat { text-align: center; } .page-hero__stat-number { display: block; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; color: var(--color-blue); line-height: 1; } .page-hero__stat-label { display: block; font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-top: 4px; } /* ── Filter bar ────────────────────────────────────────────── */ .people-filter-bar { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 24px 20px 0; background: var(--color-bg-page); } .people-filter-btn { padding: 6px 18px; border-radius: var(--radius-round); border: 1.5px solid var(--color-border); background: var(--color-bg-card); color: var(--color-muted); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all var(--transition-fast); } .people-filter-btn:hover { border-color: var(--color-charcoal); color: var(--color-charcoal); } .people-filter-btn.active { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-white); } .people-filter-btn[data-lab="pillarisetty"].active { background: var(--lab-pillarisetty); border-color: var(--lab-pillarisetty); } .people-filter-btn[data-lab="damle"].active { background: var(--lab-damle); border-color: var(--lab-damle); } .people-filter-btn[data-lab="yeung"].active { background: var(--lab-yeung); border-color: var(--lab-yeung); } .people-filter-btn[data-lab="sharib"].active { background: var(--lab-sharib); border-color: var(--lab-sharib); } .people-filter-btn[data-lab="crispe"].active { background: var(--lab-crispe); border-color: var(--lab-crispe); } /* ── Section layout ─────────────────────────────────────────── */ .people-section { padding: 0 0 40px; } .people-section-header { display: flex; align-items: center; gap: 14px; margin: 40px 0 24px; } .people-section-bar { height: 4px; width: 36px; border-radius: 2px; flex-shrink: 0; background: var(--color-charcoal); } .people-section-header h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-charcoal); margin: 0; } .people-section-line { flex: 1; height: 1px; background: var(--color-border); } /* ── Illustration slots ───────────────────────────────────────── Full-width accent bands between people sections. Drop an inside to activate. The placeholder is hidden automatically once an image is present. */ /* ── Illustration slots ───────────────────────────────────────── TWO-TRACK SYSTEM — read before adding images: TRACK 1 — NO CROP (default, for illustrations & science graphics) .illustration-slot alone: height:auto, image displays at its natural aspect ratio. The slot grows to fit the image. Nothing is ever cropped. Use this for any image with specific visual content that must be seen in full. TRACK 2 — INTENTIONAL CROP (for photography / decorative banners) Add modifier .illustration-slot--crop: fixed height, object-fit:cover. The image fills the box and overflowing content is hidden. Sub-modifiers --tall, --short, --banner set the crop height. SUMMARY FOR PLACING IMAGES: · Illustrations, diagrams, science graphics → no modifier needed · Wide lab/microscopy photos as decorative bands → add --crop ─────────────────────────────────────────────────────────────── */ .illustration-slot { width: 100%; background: var(--color-bg-section); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); position: relative; /* No height, no overflow:hidden — slot grows with the image */ } /* Default image behaviour: full natural size, never cropped */ .illustration-slot__img { width: 100%; height: auto; /* natural aspect ratio — no cropping */ object-fit: unset; /* explicitly cancel any inherited cover */ display: block; } /* ── CROP TRACK — opt-in only ─────────────────────────────────── Apply .illustration-slot--crop when you want a fixed-height band. */ .illustration-slot--crop { overflow: hidden; height: 200px; /* default crop height */ } .illustration-slot--crop .illustration-slot__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Height variants — only meaningful when used with --crop */ .illustration-slot--tall { height: 220px; } .illustration-slot--medium { height: 360px; } .illustration-slot--short { height: 140px; } .illustration-slot--banner { height: 200px; border-top: none; } /* ── Constrained variant — no crop, limits max-width, centers image */ .illustration-slot--constrained { background: var(--color-bg-page); } .illustration-slot--constrained .illustration-slot__img { max-width: 960px; margin: 0 auto; display: block; } /* ── Natural variant — renders at exact pixel size of the file, centered, no stretching. Use when you want the illustration to appear at the size it was drawn/saved, not scaled to fit. */ .illustration-slot--natural { background: var(--color-bg-page); display: flex; justify-content: center; padding: 24px 20px; } .illustration-slot--natural .illustration-slot__img { width: auto; /* ignore the 100% rule — use file's own width */ max-width: 100%; /* but don't overflow on small screens */ height: auto; display: block; } /* Placeholder — shown when no image is present */ .illustration-slot__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--color-border); font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; min-height: 140px; } .illustration-slot__placeholder svg { opacity: 0.35; } /* On --crop slots the placeholder must fill the fixed height */ .illustration-slot--crop .illustration-slot__placeholder { position: absolute; inset: 0; padding: 0; min-height: 0; } /* Hide placeholder once a real image is loaded */ .illustration-slot__img ~ .illustration-slot__placeholder { display: none; } /* ── Unified photo wrap — same square size for PI and team ────── Both card types use 140×140px squares. object-position:top centres on faces for portrait photos. */ .pi-photo-wrap, .team-photo-wrap { position: relative; width: 160px; height: 160px; flex-shrink: 0; overflow: hidden; background: var(--color-bg-section); } .pi-photo-wrap img, .team-photo-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0; padding: 0; transition: opacity var(--transition-normal); } .pi-photo-wrap .photo-alt, .team-photo-wrap .photo-alt { opacity: 0; } .pi-card-new:hover .photo-alt, .team-card-new:hover .photo-alt { opacity: 1; } .pi-card-new:hover .photo-primary, .team-card-new:hover .photo-primary { opacity: 0; } /* ── PI cards ───────────────────────────────────────────────── */ .pi-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; } .pi-card-new { background: var(--color-bg-card); border: none; border-radius: var(--radius-large); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-medium); transition: box-shadow var(--transition-normal), transform var(--transition-normal); cursor: pointer; } .pi-card-new:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.13); transform: translateY(-3px); } .pi-card-inner { display: flex; gap: 0; flex: 1; } .pi-card-body { flex: 1; padding: 18px 18px 14px; display: flex; flex-direction: column; justify-content: flex-start; } .pi-card-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--color-heading); margin: 0 0 2px; line-height: 1.25; } .pi-card-credentials { font-size: 0.78rem; color: var(--color-muted); font-family: var(--font-heading); margin: 0 0 2px; } /* Pronouns — always rendered; empty string leaves a consistent spacer row */ .pi-card-pronouns, .team-card-pronouns { font-size: 0.72rem; font-style: italic; color: var(--color-muted-light); margin: 0 0 4px; min-height: 1em; /* holds space even when blank so cards stay balanced */ line-height: 1.3; } .pi-card-title { font-size: 0.82rem; color: var(--color-muted); margin: 0; flex: 1; /* pushes lab label to bottom */ } /* Lab name as plain styled text (not a link) */ .pi-lab-name { display: block; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 6px; } /* Lab name gets lab color when displayed as text */ /* Lab name span — color driven by data-lab on the element itself (needed when a card has multiple labs displayed) */ .pi-lab-name[data-lab="pillarisetty"], .team-card-lab[data-lab="pillarisetty"] { color: var(--lab-pillarisetty); } .pi-lab-name[data-lab="damle"], .team-card-lab[data-lab="damle"] { color: var(--lab-damle); } .pi-lab-name[data-lab="yeung"], .team-card-lab[data-lab="yeung"] { color: var(--lab-yeung); } .pi-lab-name[data-lab="sharib"], .team-card-lab[data-lab="sharib"] { color: var(--lab-sharib); } .pi-lab-name[data-lab="crispe"], .team-card-lab[data-lab="crispe"] { color: var(--lab-crispe); } /* Pointer cursor set via JS after render */ .pi-lab-name:hover, .pi-lab-link:hover, .team-card-lab:hover { opacity: 0.75; } .pi-card-new[data-lab="pillarisetty"] .pi-lab-name { color: var(--lab-pillarisetty); } .pi-card-new[data-lab="damle"] .pi-lab-name { color: var(--lab-damle); } .pi-card-new[data-lab="yeung"] .pi-lab-name { color: var(--lab-yeung); } .pi-card-new[data-lab="sharib"] .pi-lab-name { color: var(--lab-sharib); } .pi-card-new[data-lab="crispe"] .pi-lab-name { color: var(--lab-crispe); } /* Email links on PI and team cards */ .pi-card-email, .team-card-email { font-family: var(--font-heading); font-size: 0.72rem; color: var(--color-link); text-decoration: none; margin-top: 5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--transition-fast); } .pi-card-email:hover, .team-card-email:hover { color: var(--color-link-hover); } .pi-lab-link { display: inline-block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--color-charcoal); margin-top: auto; transition: color var(--transition-fast); } .pi-card-new[data-lab="pillarisetty"] .pi-lab-link { color: var(--lab-pillarisetty); } .pi-card-new[data-lab="damle"] .pi-lab-link { color: var(--lab-damle); } .pi-card-new[data-lab="yeung"] .pi-lab-link { color: var(--lab-yeung); } .pi-card-new[data-lab="sharib"] .pi-lab-link { color: var(--lab-sharib); } .pi-card-new[data-lab="crispe"] .pi-lab-link { color: var(--lab-crispe); } .pi-lab-link:hover { opacity: 0.75; } /* ── Team member cards ──────────────────────────────────────── */ .team-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; } .team-card-new { background: var(--color-bg-card); border: none; border-radius: var(--radius-medium); overflow: hidden; box-shadow: var(--shadow-light); transition: box-shadow var(--transition-normal), transform var(--transition-normal); cursor: pointer; } .team-card-new:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.11); transform: translateY(-2px); } .team-card-inner { display: flex; align-items: stretch; } .team-card-body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; justify-content: flex-start; /* top-align all content */ } .team-card-name { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; color: var(--color-heading); margin: 0 0 2px; line-height: 1.3; } .team-card-credentials { font-size: 0.75rem; color: var(--color-muted); font-family: var(--font-heading); margin: 0 0 2px; } .team-card-title { font-size: 0.78rem; color: var(--color-muted); margin: 0; line-height: 1.4; flex: 1; /* pushes lab label to bottom */ } .team-card-lab { display: block; font-size: 0.72rem; font-weight: 700; font-family: var(--font-heading); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); margin-top: 6px; } .team-card-new[data-lab="pillarisetty"] .team-card-lab { color: var(--lab-pillarisetty); } .team-card-new[data-lab="damle"] .team-card-lab { color: var(--lab-damle); } .team-card-new[data-lab="yeung"] .team-card-lab { color: var(--lab-yeung); } .team-card-new[data-lab="sharib"] .team-card-lab { color: var(--lab-sharib); } .team-card-new[data-lab="crispe"] .team-card-lab { color: var(--lab-crispe); } /* ── Community page — PI card accent bars ─────────────────────── .c-pi-card carries data-lab so the bar color is CSS-driven, no inline style needed on the .c-pi-bar div. */ .c-pi-card[data-lab="pillarisetty"] .c-pi-bar { background: var(--lab-pillarisetty); } .c-pi-card[data-lab="damle"] .c-pi-bar { background: var(--lab-damle); } .c-pi-card[data-lab="yeung"] .c-pi-bar { background: var(--lab-yeung); } .c-pi-card[data-lab="sharib"] .c-pi-bar { background: var(--lab-sharib); } .c-pi-card[data-lab="crispe"] .c-pi-bar { background: var(--lab-crispe); } /* ── Community page — advocacy/resource dots ──────────────────── All general advocacy dots and resource bars use TIME blue. */ .c-advocacy-dot { background: var(--color-blue); } .c-resource-bar { background: var(--color-blue); } /* ── Community page — clinical trial status ───────────────────── Semantic classes set both the dot background and label color. Enrolling = active/positive (lab-yeung green) Observational = neutral (TIME blue) */ .c-trial-dot.status-enrolling { background: var(--lab-yeung); } .c-trial-label.status-enrolling { color: var(--lab-yeung); } .c-trial-dot.status-observational { background: var(--color-blue); } .c-trial-label.status-observational { color: var(--color-blue); } /* ── Card expand button ─────────────────────────────────────── */ .card-expand-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: none; border: none; border-top: 1px solid var(--color-border); cursor: pointer; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; color: var(--color-blue); padding: 10px 18px; width: 100%; transition: color var(--transition-fast), background var(--transition-fast); } .card-expand-btn:hover { background: var(--color-bg-section); } .team-card-new .card-expand-btn { font-size: 0.72rem; padding: 7px 14px; } /* ── Profile modal ──────────────────────────────────────────── */ .profile-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.52); z-index: calc(var(--z-navbar) + 100); align-items: center; justify-content: center; padding: 20px; } .profile-modal-backdrop.open { display: flex; animation: profileBackdropIn 0.2s ease; } @keyframes profileBackdropIn { from { opacity: 0; } to { opacity: 1; } } .profile-modal { background: var(--color-bg-card); border-radius: var(--radius-large); width: min(680px, 94vw); max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.22); display: flex; flex-direction: column; animation: profileModalIn 0.25s ease; } @keyframes profileModalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .profile-modal-header { display: flex; flex-direction: row; align-items: stretch; gap: 0; border-bottom: 1px solid var(--color-border); flex-shrink: 0; position: relative; } /* Photo block — mirrors card photo-wrap exactly */ .profile-modal-photo { width: 160px; height: 160px; flex-shrink: 0; object-fit: cover; object-position: top; display: block; background: var(--color-bg-section); } /* Text block — sits to the right of the photo */ .profile-modal-nameblock { flex: 1; min-width: 0; padding: 18px 44px 16px 20px; display: flex; flex-direction: column; justify-content: center; } /* Close button — top-right corner of the header */ .profile-modal-close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg-section); border: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.72rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition-fast); z-index: 10; } .profile-modal-close:hover { background: var(--color-border); } .profile-modal-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-heading); margin: 0 0 3px; } .profile-modal-creds { font-family: var(--font-heading); font-size: 0.78rem; color: var(--color-muted); margin: 0 0 3px; } .profile-modal-pronouns { font-family: var(--font-heading); font-size: 0.72rem; font-style: italic; color: var(--color-muted-light); margin: 0 0 3px; min-height: 1em; } .profile-modal-title { font-family: var(--font-heading); font-size: 0.82rem; color: var(--color-muted); margin: 0 0 2px; } .profile-modal-lab { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 6px; } .profile-modal-email-wrap { margin-top: 4px; } .profile-modal-email { font-family: var(--font-heading); font-size: 0.78rem; color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); } .profile-modal-email:hover { color: var(--color-link-hover); } .profile-modal-tabs { display: flex; border-bottom: 1px solid var(--color-border); flex-shrink: 0; padding: 0 28px; } .profile-modal-tab { padding: 12px 0; margin-right: 24px; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .profile-modal-tab.active { color: var(--color-blue); border-bottom-color: var(--color-blue); } .profile-modal-body { padding: 24px 28px; flex: 1; overflow-y: auto; } .profile-modal-content { display: none; } .profile-modal-content.active { display: block; } .profile-modal-content p { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.75; color: var(--color-body); margin: 0 0 12px; } .profile-modal-content p:last-child { margin-bottom: 0; } /* Publications tab — clean text link list */ .profile-pub-link-list { display: flex; flex-direction: column; gap: 10px; } .profile-pub-link-item { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--color-bg-section); border: 1px solid var(--color-border); border-radius: var(--radius-medium); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .profile-pub-link-item:hover { border-color: var(--color-blue); box-shadow: var(--shadow-light); } .profile-pub-link-label { font-family: var(--font-heading); font-size: 0.86rem; font-weight: 700; color: var(--color-link); } .profile-pub-link-desc { font-family: var(--font-body); font-size: 0.76rem; color: var(--color-muted); } .profile-pub-empty { font-family: var(--font-body); font-size: 0.88rem; color: var(--color-muted); font-style: italic; } /* ── PI publication list — loaded from publications.json ─────── */ .profile-pub-list-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); } .profile-pub-list-label { font-family: var(--font-heading); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 12px; } .profile-pub-list { display: flex; flex-direction: column; gap: 12px; max-height: 400px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; padding-right: 4px; } .profile-pub-list::-webkit-scrollbar { width: 3px; } .profile-pub-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } .profile-pub-item { padding-bottom: 12px; border-bottom: 1px solid var(--color-border); } .profile-pub-item:last-child { border-bottom: none; padding-bottom: 0; } .profile-pub-title { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.5; margin: 0 0 4px; } .profile-pub-title-link { color: var(--color-heading); text-decoration: none; transition: color var(--transition-fast); } .profile-pub-title-link:hover { color: var(--color-link); } .profile-pub-meta { font-family: var(--font-body); font-size: 0.74rem; color: var(--color-muted); margin: 0; } /* ── Graphical abstract — Research Focus tab ───────────────────── Full-width image above the research text. Hidden when no src. */ .profile-abstract-wrap { margin-bottom: 20px; border-radius: var(--radius-medium); overflow: hidden; background: var(--color-bg-section); border: 1px solid var(--color-border); } .profile-abstract-img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; /* contain so abstract isn't cropped */ object-position: center; } .profile-research-text p { margin: 0 0 16px; } .profile-research-text p:last-child { margin-bottom: 0; } /* ── Funding pills ─────────────────────────────────────────────── Compact badge row at the bottom of Research Focus tab. Hidden when funding array is empty (JS doesn't render the div). */ .profile-funding { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); } .profile-funding-label { font-family: var(--font-heading); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 10px; } .profile-funding-pills { display: flex; flex-wrap: wrap; gap: 6px; } .profile-funding-pill { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-round); background: var(--color-bg-section); border: 1px solid var(--color-border); color: var(--color-muted); white-space: nowrap; } /* ── Hidden state ───────────────────────────────────────────── */ .people-hidden { display: none !important; } /* Sections hidden until JS confirms they have at least one member */ .people-section--hidden { display: none !important; } /* ── ORCID badge — on PI cards and modal ───────────────────────────────── Uses the official ORCID green. Badge sits inline after the name. */ .orcid-badge { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; opacity: 0.85; transition: opacity var(--transition-fast); flex-shrink: 0; } .orcid-badge:hover { opacity: 1; } .orcid-icon { width: 18px; height: 18px; display: block; } /* Modal ORCID link */ .profile-modal-orcid-wrap { margin-top: 5px; } .profile-modal-orcid { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-heading); font-size: 0.72rem; color: var(--color-muted); text-decoration: none; transition: color var(--transition-fast); } .profile-modal-orcid:hover { color: var(--color-heading); } .profile-modal-orcid .orcid-icon { width: 14px; height: 14px; } /* ── Alumni roster ─────────────────────────────────────────────────────── Lightweight table-style list — no cards, no photos, no modal. Columns: Name · Former role · Lab · Current position · Contact */ #alumni-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-medium); overflow: hidden; } .alumni-row { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1.8fr 1fr auto; align-items: center; gap: 0 16px; padding: 12px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-card); transition: background var(--transition-fast); } .alumni-row:last-child { border-bottom: none; } .alumni-row:hover { background: var(--color-bg-section); } .alumni-name { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--color-heading); } .alumni-pronouns { font-size: 0.72rem; font-style: italic; color: var(--color-muted-light); grid-column: 1; /* sits below name — handled by layout below */ display: none; /* shown only when non-empty via JS class */ } .alumni-row:has(.alumni-pronouns:not(:empty)) .alumni-pronouns { display: block; } .alumni-role { font-family: var(--font-heading); font-size: 0.78rem; color: var(--color-muted); } .alumni-lab { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); } .alumni-current { font-size: 0.82rem; color: var(--color-body); } .alumni-links { display: flex; align-items: center; gap: 8px; } .alumni-email { font-family: var(--font-heading); font-size: 0.72rem; color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); } .alumni-email:hover { color: var(--color-link-hover); } .alumni-orcid { opacity: 0.75; transition: opacity var(--transition-fast); } .alumni-orcid:hover { opacity: 1; } .alumni-orcid .orcid-icon { width: 16px; height: 16px; } /* Column header row — injected above first alumni row */ .alumni-header { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1.8fr 1fr auto; gap: 0 16px; padding: 8px 18px; background: var(--color-bg-section); border-bottom: 1px solid var(--color-border); } .alumni-header span { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); } @media (max-width: 900px) { .alumni-row, .alumni-header { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; } .alumni-current { grid-column: 1 / -1; } .alumni-links { grid-column: 1 / -1; } } @media (max-width: 600px) { .alumni-row, .alumni-header { grid-template-columns: 1fr; } .alumni-lab, .alumni-role { font-size: 0.70rem; } } /* ── People page responsive ─────────────────────────────────── */ @media (max-width: 900px) { .page-hero__stats { gap: 20px; } .pi-photo-wrap, .team-photo-wrap { width: 120px; height: 120px; } } @media (max-width: 600px) { .pi-grid-new { grid-template-columns: 1fr; } .team-grid-new { grid-template-columns: 1fr; } .pi-photo-wrap, .team-photo-wrap { width: 100px; height: 100px; } .page-hero__stats { gap: 16px; } .page-hero__stat-number { font-size: 1.4rem; } .illustration-slot--tall { height: 140px; } /* crop height only */ .illustration-slot--short { height: 90px; } /* crop height only */ } /* Legacy people-page classes (kept for backwards compat with any existing profile sub-pages using the old system) */ .people-container { max-width: 1200px; margin: 5px auto; padding: var(--spacing-md); } .back-to-team-link { display: inline-block; font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--color-link); text-decoration: none; margin-bottom: var(--spacing-lg); transition: color var(--transition-normal); } .back-to-team-link:hover { color: var(--color-link-hover); } .pi-section { margin-bottom: var(--spacing-sm); } .pi-section h2 { color: var(--color-heading); font-size: 2.5em; margin-bottom: var(--spacing-md); text-align: center; } .pi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .pi-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .pi-photo-container { margin-bottom: var(--spacing-sm); } .pi-photo { width: 200px; height: 200px; border-radius: var(--radius-circle); object-fit: cover; border: 5px solid var(--color-photo-border); display: block; } .pi-name { color: var(--color-name-text); font-size: 1.3em; margin-bottom: 8px; font-weight: bold; } .pi-title { color: var(--color-muted); font-size: .95em; font-style: italic; margin-bottom: 1.5px; min-height: 20px; text-align: center; } .team-member-section { margin-bottom: var(--spacing-sm); } .team-member-section h2 { color: var(--color-heading); font-size: 2.5em; margin-bottom: var(--spacing-md); text-align: center; } .team-member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .team-member-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .team-member-photo-container { margin-bottom: var(--spacing-sm); } .team-member-photo { width: 200px; height: 200px; border-radius: var(--radius-circle); object-fit: cover; border: 5px solid var(--color-photo-border); display: block; } .team-member-name { color: var(--color-name-text); font-size: 1.3em; margin-bottom: 8px; font-weight: bold; } .team-member-title { color: var(--color-muted); font-size: .95em; font-style: italic; margin-bottom: 1.5px; min-height: 20px; } .team-member-bio-box { padding: 15px; border-radius: var(--radius-medium); margin-top: 10px; width: 100%; min-height: 50px; } .team-member-bio { color: var(--color-body); font-size: .9em; line-height: 1.6; margin-bottom: 10px; } /* ============================================ 9. PUBLICATIONS PAGE ============================================ */ /* ── Banner image slot — between hero and filter bar ──────────── Uses .illustration-slot (no-crop by default). Add --crop for a fixed-height band. See illustration slot docs in section 8. */ .illustration-slot--banner { height: 200px; border-top: none; /* page-hero sits directly above — no double border */ } /* ── Category filter bar ───────────────────────────────────────── Reuses .btn-filter (section 6) for the lab selector buttons. Container matches the people-page .people-filter-bar layout. */ .category-buttons-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 24px 20px 0; background: var(--color-bg-page); max-width: 100%; } /* ── Year pagination ───────────────────────────────────────────── Compact pill strip. JS creates buttons with class="year-pill". */ .year-pagination { display: none; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 16px auto 0; max-width: 1000px; padding: 12px 20px; } .year-pagination.visible { display: flex; } /* Explicit resets before the pill styles — overrides Bootstrap button normalization on dynamically injected elements. */ .year-pagination button, .year-pill { -webkit-appearance: none; appearance: none; box-shadow: none; outline: none; padding: 4px 14px; border-radius: var(--radius-round); border: 1.5px solid var(--color-border); background: var(--color-bg-card); color: var(--color-muted); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: all var(--transition-fast); line-height: 1.4; } .year-pagination button:hover, .year-pill:hover { border-color: var(--color-charcoal); color: var(--color-charcoal); background: var(--color-bg-card); } .year-pagination button.active, .year-pill.active { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-white); } /* ── Publication category chips ────────────────────────────────── Rendered by displayPublications() for Featured / High Impact tags. Lab name tags are stripped by JS before reaching here. */ .pub-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .pub-cat-chip { display: inline-block; padding: 2px 10px; border-radius: var(--radius-round); background: var(--color-tag-bg); color: var(--color-tag-text); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* ── Publication list ────────────────────────────────────────── */ #publication-list { max-width: 1200px; margin: 32px auto 40px; padding: 0 20px; min-height: 400px; } .publication-item { background: var(--color-bg-card); padding: 25px; margin-bottom: 20px; border-radius: var(--radius-large); box-shadow: var(--shadow-medium); transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .publication-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .publication-title { color: var(--color-pub-title); font-size: 20px; font-weight: 600; margin-bottom: 10px; line-height: 1.4; font-family: var(--font-heading); } .publication-authors { color: var(--color-pub-authors); font-size: 14px; margin-bottom: 8px; } .publication-meta { color: var(--color-pub-meta); font-size: 14px; font-weight: 500; margin-bottom: 15px; } .publication-links { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; } .publication-link { padding: 8px 16px; border-radius: var(--radius-medium); text-decoration: none; font-size: 13px; font-weight: 600; transition: all var(--transition-fast); font-family: var(--font-heading); display: inline-block; } .publication-link.pubmed { background: var(--color-blue); color: var(--color-white); } .publication-link.pubmed:hover { background: var(--color-bg-card); color: var(--color-blue); border: 1px solid var(--color-blue); } .publication-link.details { background: var(--color-green); color: var(--color-white); } .publication-link.details:hover { background: var(--color-bg-card); color: var(--color-green); border: 1px solid var(--color-green); } .no-publications { text-align: center; padding: 60px 20px; color: var(--color-muted); font-size: 18px; } .loading { text-align: center; padding: 60px 20px; color: var(--color-btn-primary); font-size: 18px; } /* ============================================ 9b. PUBLICATION DETAIL PAGE (publication.html) ============================================ */ .pub-detail-wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px 60px; } .pub-back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: .82rem; font-weight: 600; color: var(--color-link); text-decoration: none; margin-bottom: 24px; transition: color var(--transition-fast); } .pub-back-link:hover { color: var(--color-link-hover); } .pub-article { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-large); overflow: hidden; } /* Header band */ .pub-header { padding: 28px 32px 24px; border-bottom: 1px solid var(--color-border); } .pub-lab-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .pub-lab-badge { display: inline-block; font-family: var(--font-heading); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-round); border: 1.5px solid; } .pub-title { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 700; color: var(--color-heading); line-height: 1.35; margin: 0 0 16px; } .pub-authors { font-size: .9rem; color: var(--color-muted); line-height: 1.6; margin: 0 0 6px; } .pub-citation { font-size: .82rem; color: var(--color-muted); margin: 0; line-height: 1.5; } .pub-citation a { color: var(--color-muted); } .pub-citation a:hover { color: var(--color-link); } .pub-meta-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pub-meta-chip { display: inline-block; font-family: var(--font-heading); font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-round); background: var(--color-bg-section); color: var(--color-muted); border: 1px solid var(--color-border); } .pub-meta-chip a { color: inherit; text-decoration: none; } .pub-meta-chip a:hover { color: var(--color-link); } /* Body layout */ .pub-body { display: grid; grid-template-columns: 200px 1fr; gap: 0; } /* Left: metrics column */ .pub-metrics { padding: 24px 20px; border-right: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center; gap: 20px; background: var(--color-bg-section); } .pub-metrics-label { font-family: var(--font-heading); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 4px; text-align: center; } .pub-metrics-group { text-align: center; } .pub-metrics-pis { width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); text-align: left; } .pub-collaborators { font-size: .85rem; color: var(--color-muted); line-height: 1.7; margin: 0 0 20px; } /* Right: abstract + actions */ .pub-content { padding: 24px 32px; } .pub-section-label { font-family: var(--font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 10px; } .pub-abstract { font-size: .95rem; line-height: 1.8; color: var(--color-body); margin: 0 0 28px; } .pub-no-abstract { font-size: .9rem; color: var(--color-muted); font-style: italic; margin: 0 0 28px; } /* Action buttons */ .pub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); } .pub-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: .82rem; font-weight: 700; padding: 9px 18px; border-radius: var(--radius-medium); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .pub-btn-primary { background: var(--color-btn-primary); color: var(--color-white); border: 1.5px solid var(--color-btn-primary); } .pub-btn-primary:hover { background: var(--color-btn-primary-hover); border-color: var(--color-btn-primary-hover); color: var(--color-white); } .pub-btn-outline { background: transparent; color: var(--color-link); border: 1.5px solid var(--color-link); } .pub-btn-outline:hover { background: var(--color-btn-primary); border-color: var(--color-btn-primary); color: var(--color-white); } .pub-btn-ghost { background: var(--color-bg-section); color: var(--color-charcoal); border: 1.5px solid var(--color-border); } .pub-btn-ghost:hover { border-color: var(--color-charcoal); background: var(--color-bg-card); } /* Related publications */ .pub-related-label { font-family: var(--font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin: 24px 0 12px; } .pub-no-doi { font-size: .8rem; color: var(--color-muted); text-align: center; } .pub-related-list { display: flex; flex-direction: column; gap: 8px; } .pub-related-item { display: block; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-medium); text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); } .pub-related-item:hover { border-color: var(--color-btn-primary); background: var(--color-bg-section); } .pub-related-title { font-family: var(--font-heading); font-size: .85rem; font-weight: 600; color: var(--color-link); margin: 0 0 3px; line-height: 1.4; } .pub-related-meta { font-size: .76rem; color: var(--color-muted); margin: 0; } /* PI links */ .pub-pi-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .pub-pi-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-heading); font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-round); border: 1.5px solid var(--color-border); text-decoration: none; color: var(--color-charcoal); transition: border-color var(--transition-fast), color var(--transition-fast); } .pub-pi-link:hover { border-color: var(--color-charcoal); color: var(--color-heading); } /* Error/loading states */ .pub-loading, .pub-error { text-align: center; padding: 80px 24px; color: var(--color-muted); font-size: 1rem; } .pub-error a { color: var(--color-link); } @media (max-width: 680px) { .pub-body { grid-template-columns: 1fr; } .pub-metrics { flex-direction: row; flex-wrap: wrap; justify-content: center; border-right: none; border-bottom: 1px solid var(--color-border); padding: 16px; } .pub-content { padding: 20px; } .pub-header { padding: 20px 20px 16px; } .pub-title { font-size: 1.2rem; } } /* ============================================ 10. NEWS PAGE ============================================ */ .news-container { max-width: 1200px; margin: 0 auto; padding: var(--spacing-lg) var(--spacing-md); } .news-container h1 { text-align: center; font-size: 3em; color: var(--color-heading); margin-bottom: var(--spacing-lg); } .news-item { background-color: var(--color-bg-card); border-radius: var(--radius-large); box-shadow: var(--shadow-medium); margin-bottom: var(--spacing-lg); overflow: hidden; transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .news-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .news-content { display: flex; flex-direction: row; gap: var(--spacing-md); padding: var(--spacing-md); } .news-left { flex: 0 0 220px; display: flex; flex-direction: column; } .news-right { flex: 1; display: flex; flex-direction: column; } .news-date { color: var(--color-muted); font-weight: 600; font-size: .9em; margin-bottom: var(--spacing-sm); } /* Fixed-height image container — image never pushes card taller. Mirrors .pi-photo-wrap / .team-photo-wrap from the people page. */ .news-image { flex: 1; min-height: 160px; max-height: 220px; border-radius: var(--radius-medium); overflow: hidden; background: var(--color-bg-section); } .news-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .news-title { color: var(--color-heading); font-size: 1.8em; margin-bottom: var(--spacing-sm); font-weight: 700; } .news-link { align-self: flex-start; margin-top: auto; } /* ============================================ 11. PI / TEAM MEMBER PROFILE PAGES ============================================ */ .team-member-profile-section, .pi-profile-section { margin-bottom: 5px; padding-top: 10px; } .team-member-profile-card, .pi-profile-card { display: grid; grid-template-columns: 300px 2fr; gap: 40px; align-items: start; background-color: var(--color-bg-section); padding: 30px; border-radius: var(--radius-large); max-width: 1000px; margin: 0 auto; } .team-member-profile-photo-container, .pi-profile-photo-container { flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 25px; } .team-member-profile-photo, .pi-profile-photo { width: 300px; height: 300px; border-radius: var(--radius-circle); object-fit: cover; object-position: top; border: 5px solid var(--color-photo-border); display: block; } .team-member-profile-content, .pi-profile-content { flex: 1; display: flex; flex-direction: column; } .team-member-profile-header, .pi-profile-header { margin-bottom: 10px; } .team-member-profile-name, .pi-profile-name { color: var(--color-blue); font-size: 2em; margin: 0 0 8px; font-weight: bold; font-family: var(--font-body); text-align: left; line-height: 1.2; display: block; padding-top: 20px; } .team-member-profile-credentials, .pi-profile-credentials { color: var(--color-muted); font-size: 1.1em; margin: 0; } .lab-link-btn, .team-member-profile-link { margin: 15px 0; } .lab-link-btn a, .team-member-profile-link a { color: var(--color-white); background-color: var(--color-blue); padding: 8px 12px; border-radius: var(--radius-small); text-decoration: none; font-size: 1em; font-weight: 600; font-family: var(--font-heading); transition: background var(--transition-normal); } .lab-link-btn a:hover, .team-member-profile-link a:hover { background-color: var(--color-blue-dark); color: var(--color-white); } .team-member-bio-box, .pi-bio-box { background-color: var(--color-bg-card); padding: 10px; border-radius: var(--radius-medium); width: 100%; display: flex; flex-direction: column; min-height: 150px; } .team-member-bio, .pi-bio { color: var(--color-body); font-size: 1em; line-height: 1.8; margin-bottom: 10px; } .team-member-profile-links, .pi-profile-links { margin-top: auto; padding-top: 20px; border-top: 2px solid var(--color-border); display: flex; gap: 15px; flex-wrap: wrap; align-items: center; } .team-member-profile-links a, .pi-profile-links a { color: var(--color-blue); text-decoration: none; font-size: .9em; font-weight: 400; font-family: var(--font-heading); transition: color var(--transition-normal); } .team-member-profile-links a:hover, .pi-profile-links a:hover { color: var(--color-blue-dark); } .team-member-profile-links .link-separator, .pi-profile-links .link-separator { color: var(--color-border); } /* PI page divider and two-column layout */ .pi-page-divider-bar { width: 100%; height: 8px; background-color: var(--color-blue); margin: 40px 0 20px; } .pi-page-section-header { color: var(--color-heading); font-size: 2em; text-align: center; margin-bottom: 30px; font-family: var(--font-heading); } .pi-two-column-container { display: flex; gap: 40px; margin-bottom: 40px; } .pi-content-full { width: 100%; background-color: var(--color-bg-section); padding: 30px; border-radius: var(--radius-medium); margin-bottom: 40px; min-height: 200px; } .pi-content-half { flex: 1; background-color: var(--color-bg-section); padding: 30px; border-radius: var(--radius-medium); min-height: 200px; } .pi-left-column { flex: 1; background-color: var(--color-bg-section); padding: 30px; border-radius: var(--radius-medium); } .pi-left-column h3 { color: var(--color-blue); font-size: 1.5em; margin-bottom: 20px; } .pi-left-column p { color: var(--color-body); font-size: 1em; line-height: 1.8; margin-bottom: 15px; } .pi-right-column { flex: 1; background-color: var(--color-bg-card); padding: 30px; border-radius: var(--radius-medium); border: 2px solid var(--color-border); max-height: 700px; overflow-y: auto; } .pi-right-column h3 { color: var(--color-blue); font-size: 1.5em; margin-bottom: 20px; } .pi-publication-item { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); } .pi-publication-item:last-child { border-bottom: none; } .pi-pub-title { color: var(--color-pub-title); margin-bottom: 4px; font-size: .95em; } .pi-pub-authors { color: var(--color-muted); font-size: .85em; margin-bottom: 2px; } .pi-pub-journal { color: var(--color-muted-light); font-size: .85em; } .pi-research-box { background-color: var(--overlay-white-light); padding: 25px; border-radius: var(--radius-medium); margin: var(--spacing-lg) auto; max-width: 1000px; } .pi-research-box h3 { color: var(--color-blue); font-size: 1.5em; margin-bottom: 15px; } .pi-research-box p { color: var(--color-body); font-size: 1em; line-height: 1.8; margin-bottom: 15px; } /* ============================================ 12. FOOTER ============================================ */ /* Legacy bare