:root { --cardinal: #8C1515; --cardinal-dark: #5e0a0a; --cardinal-soft: #b83a3a; --sandstone: #f4f0e8; --cool-grey: #4d4f53; --warm-grey: #6f7170; --line: #d7d2c8; --bg: #fbfaf6; --ink: #2e2d29; --ink-soft: #53524e; --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* ===== Scroll animations ===== IMPORTANT: animations are opt-in via the `.anim-ready` class on , which is added by JS only if it loads successfully. If JS fails to load (file error, slow CDN, etc.) elements stay visible by default — the page never goes blank. */ .anim-ready .anim { opacity: 0; transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), filter .9s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .anim-ready .anim-fade-up { transform: translateY(40px); } .anim-ready .anim-fade-in { transform: none; } .anim-ready .anim-slide-left { transform: translateX(-50px); } .anim-ready .anim-slide-right { transform: translateX(50px); } .anim-ready .anim-scale-in { transform: scale(0.92); } .anim-ready .anim-blur-in { filter: blur(12px); transform: translateY(20px); } .anim-ready .anim.in { opacity: 1; transform: none; filter: none; } /* Reading progress bar */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--cardinal); transform-origin: 0 50%; transform: scaleX(0); z-index: 100; transition: transform .15s linear; } @media (prefers-reduced-motion: reduce) { .anim { opacity: 1 !important; transform: none !important; filter: none !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; } .container { max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* Nav */ .nav-wrap { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 246, 0.88); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.01em; color: var(--cardinal); text-decoration: none; } .nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links > li > a:first-child { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; transition: color .2s ease; display: inline-block; padding: 6px 0; } .nav-links > li > a:first-child:hover { color: var(--cardinal); } /* "View page" dropdown link */ .nav-sub { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -6px); background: var(--cardinal); color: #fff !important; font-size: 0.72rem !important; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 14px; border-radius: 2px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; text-decoration: none; font-weight: 600; box-shadow: 0 6px 18px -6px rgba(140,21,21,0.4); } .nav-sub::before { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--cardinal); } .nav-links li:hover .nav-sub { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .nav-sub:hover { background: var(--cardinal-dark); } /* "Read more" arrow links */ .more-link { display: inline-block; font-size: 0.92rem; font-weight: 500; color: var(--cardinal); text-decoration: none; letter-spacing: 0.01em; border-bottom: 1px solid rgba(140,21,21,0.3); padding-bottom: 2px; transition: border-color .2s ease, transform .2s ease; } .more-link:hover { border-bottom-color: var(--cardinal); transform: translateX(3px); } /* Hero */ .hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: center; padding: 96px 28px 80px; } .eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--cardinal); font-weight: 600; margin: 0 0 18px; } .hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 22px; color: var(--ink); } .hero h1 .muted { color: var(--warm-grey); font-weight: 500; } .lede { font-size: 1.18rem; color: var(--ink); margin: 0 0 14px; line-height: 1.6; } .sub { font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 30px; max-width: 56ch; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .btn-primary, .btn-ghost { display: inline-block; padding: 11px 22px; font-size: 0.92rem; font-weight: 500; text-decoration: none; border-radius: 2px; transition: all .2s ease; } .btn-primary { background: var(--cardinal); color: #fff; border: 1px solid var(--cardinal); } .btn-primary:hover { background: var(--cardinal-dark); border-color: var(--cardinal-dark); } .btn-ghost { color: var(--cardinal); border: 1px solid var(--line); background: transparent; } .btn-ghost:hover { border-color: var(--cardinal); color: var(--cardinal-dark); } /* Picture fade — the signature move. The portrait has a white studio background; blending it with the page bg makes the white drop out cleanly so only Rishi remains, fading softly. */ .hero-photo { position: relative; } .photo-fade { position: relative; width: 100%; aspect-ratio: 5 / 6; max-width: 480px; margin-left: auto; /* Sandstone-tinted backdrop matches page so multiply blend is seamless */ background: var(--bg); } .photo-fade img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; /* multiply makes the white studio bg vanish into the page color */ mix-blend-mode: multiply; filter: contrast(1.04) saturate(0.96); -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 44%, #000 55%, rgba(0,0,0,0.9) 72%, rgba(0,0,0,0.4) 88%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 80% 90% at 50% 44%, #000 55%, rgba(0,0,0,0.9) 72%, rgba(0,0,0,0.4) 88%, rgba(0,0,0,0) 100%); } .photo-fade::before { /* Soft warm halo behind the subject */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 38%, rgba(220,200,170,0.35) 0%, rgba(220,200,170,0) 70%); pointer-events: none; z-index: 0; } .photo-fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,250,246,0) 65%, var(--bg) 100%); pointer-events: none; } /* Sections */ .section { padding: 88px 0; } .section h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -0.01em; margin: 0 0 28px; color: var(--ink); position: relative; padding-bottom: 12px; } .section h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 48px; height: 3px; background: var(--cardinal); } .section h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 0 0 10px; color: var(--ink); } .section-lede { font-size: 1.1rem; max-width: 70ch; color: var(--ink-soft); margin: 0 0 36px; } .section-tint { background: var(--sandstone); } .section-dark { background: linear-gradient(180deg, #2b1414 0%, #1a0a0a 100%); color: #f1ece4; } .section-dark h2 { color: #fff; } .section-dark h2::after { background: #f1ece4; } .section-dark .section-lede { color: #d9d2c4; } .section-dark a { color: #f1ece4; } /* Two-col */ .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; } .two-col p { margin: 0 0 16px; } /* CV card */ .cv-card { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 26px 28px; box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .cv-card h3 { font-size: 1rem; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em; color: var(--cardinal); font-weight: 600; margin: 0 0 18px; } .cv-card ul { list-style: none; margin: 0; padding: 0; } .cv-card li { font-size: 0.92rem; color: var(--ink-soft); padding: 10px 0; border-bottom: 1px solid var(--line); } .cv-card li:last-child { border-bottom: 0; } .cv-card strong { color: var(--ink); font-weight: 600; } /* Venture cards (Mentorship section: CMSA and Casper Edge) */ .venture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; } @media (max-width: 760px) { .venture-grid { grid-template-columns: 1fr; } } .venture-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--cardinal); padding: 28px 30px 26px; border-radius: 2px; text-decoration: none; color: inherit; box-shadow: 0 12px 36px -22px rgba(140,21,21,0.18); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .venture-card:hover { transform: translateY(-3px); border-color: var(--cardinal); box-shadow: 0 18px 40px -22px rgba(140,21,21,0.28); } .venture-logo { height: 80px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .venture-logo img { display: block; width: auto; max-width: 100%; object-fit: contain; object-position: left center; } /* Both logos render at the same height. The Casper Edge SVG has been cropped to its tight bounding box so this is honest, not a fudge. */ .venture-logo-cmsa, .venture-logo-casper { height: 56px; } .venture-card h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; margin: 0 0 12px; color: var(--ink); transition: color .2s ease; } .venture-card:hover h3 { color: var(--cardinal); } .venture-card p { flex: 1; margin: 0 0 16px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; } /* CMSA card */ .cmsa-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--cardinal); padding: 28px 30px 30px; border-radius: 2px; box-shadow: 0 12px 36px -20px rgba(140,21,21,0.18); } .cmsa-logo-link { display: block; margin: 0 0 18px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); transition: transform .2s ease; } .cmsa-logo-link:hover { transform: translateY(-2px); } .cmsa-logo { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; } .kicker-inline { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--cardinal); font-weight: 700; margin: 0 0 10px; } .cmsa-card h3 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; margin: 0 0 8px; color: var(--ink); } .cmsa-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 20px; font-style: italic; } .cmsa-list { list-style: none; padding: 0; margin: 0; } .cmsa-list li { padding: 10px 0 10px 20px; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-soft); position: relative; } .cmsa-list li:last-child { border-bottom: 0; } .cmsa-list li::before { content: "›"; position: absolute; left: 0; color: var(--cardinal); font-weight: 700; } .section-tint .cmsa-card { background: #fff; } /* Inline text links in body copy */ .two-col p a:not(.btn-primary):not(.btn-ghost) { color: var(--cardinal); text-decoration: none; border-bottom: 1px solid rgba(140,21,21,0.25); transition: border-color .2s ease; } .two-col p a:not(.btn-primary):not(.btn-ghost):hover { border-bottom-color: var(--cardinal); } /* Cards */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-bottom: 44px; } .card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--cardinal); padding: 26px 24px; border-radius: 2px; transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -16px rgba(140,21,21,0.18); } .card p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; } /* Clickable card variant */ a.card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; } a.card-link p { flex: 1; margin-bottom: 14px; } a.card-link:hover { border-color: var(--cardinal); border-top-color: var(--cardinal); } a.card-link:hover h3 { color: var(--cardinal); } .card-link-meta { display: inline-block; margin-top: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cardinal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: transform .2s ease; } a.card-link:hover .card-link-meta { transform: translateX(3px); } /* Metrics */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 12px; } .metrics > div, .metrics > a { background: #fff; border: 1px solid var(--line); padding: 22px 18px; text-align: center; border-radius: 2px; text-decoration: none; color: inherit; display: block; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .metrics > a:hover { border-color: var(--cardinal); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(140,21,21,0.2); } .metrics .num { display: block; font-family: var(--serif); font-size: 2.1rem; font-weight: 600; color: var(--cardinal); line-height: 1; margin-bottom: 6px; } .metrics .lbl { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--warm-grey); } /* Publications */ .pubs { list-style: none; padding: 0; margin: 0; counter-reset: pub; } .pubs li { position: relative; padding: 18px 0 18px 44px; border-bottom: 1px solid var(--line); counter-increment: pub; } .pubs li::before { content: counter(pub, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--serif); color: var(--cardinal); font-weight: 600; font-size: 0.95rem; } .pub-title { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; text-decoration: none; transition: color .2s ease; } a.pub-title:hover { color: var(--cardinal); } .doi { display: inline-block; margin-left: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cardinal); text-decoration: none; border: 1px solid rgba(140, 21, 21, 0.3); padding: 2px 8px; border-radius: 2px; vertical-align: 2px; transition: background .2s ease, color .2s ease; } .doi:hover { background: var(--cardinal); color: #fff; } .pub-meta { color: var(--warm-grey); font-size: 0.9rem; } /* Quote */ blockquote { font-family: var(--serif); font-size: 1.4rem; line-height: 1.45; color: var(--ink); border-left: 3px solid var(--cardinal); padding: 12px 0 12px 28px; margin: 0; } blockquote cite { display: block; margin-top: 16px; font-family: var(--sans); font-size: 0.78rem; color: var(--warm-grey); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; } /* Links list */ .links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .links a { display: block; padding: 16px 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(241,236,228,0.25); text-decoration: none; border-radius: 2px; transition: all .2s ease; } .links a:hover { background: rgba(255,255,255,0.12); border-color: rgba(241,236,228,0.5); } /* Footer */ .footer { padding: 28px 0; border-top: 1px solid var(--line); background: var(--bg); } .footer-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: var(--warm-grey); } .muted { color: var(--warm-grey); } .small { font-size: 0.88rem; } /* ===== Subpage components ===== */ /* Page hero (used on every non-home page) */ .page-hero { padding: 96px 0 64px; background: radial-gradient(ellipse 80% 60% at 75% 10%, rgba(140,21,21,0.06) 0%, rgba(140,21,21,0) 60%), var(--bg); border-bottom: 1px solid var(--line); } .page-hero .eyebrow { margin-bottom: 16px; } .page-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 22px; color: var(--ink); max-width: 22ch; } .page-lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; line-height: 1.6; } /* Prose layout (long-form article + sidebar) */ .prose-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; } .prose h2 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.005em; margin: 32px 0 12px; color: var(--ink); } .prose h2:first-child { margin-top: 0; } .prose p { color: var(--ink-soft); margin: 0 0 16px; } .prose a { color: var(--cardinal); text-decoration: none; border-bottom: 1px solid rgba(140,21,21,0.3); } .prose a:hover { border-bottom-color: var(--cardinal); } .prose-sidebar { background: #fff; border: 1px solid var(--line); padding: 28px 28px; position: sticky; top: 96px; } .prose-sidebar h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cardinal); font-family: var(--sans); font-weight: 700; margin: 0 0 18px; } .facts { margin: 0; padding: 0; } .facts > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); } .facts > div:last-child { border-bottom: 0; } .facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--warm-grey); font-weight: 600; } .facts dd { margin: 0; font-size: 0.94rem; color: var(--ink); line-height: 1.4; } /* Big metric numbers on dedicated pages */ .metrics.big { margin-top: 0; } .metrics.big .num { font-size: 3rem; } /* Research themes — numbered cards */ .theme-list { display: flex; flex-direction: column; gap: 24px; } .theme { display: grid; grid-template-columns: 80px 1fr; gap: 24px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--cardinal); padding: 28px 32px; border-radius: 2px; transition: transform .25s ease, box-shadow .25s ease; } .theme:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -18px rgba(140,21,21,0.22); } .theme-num { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; color: var(--cardinal); line-height: 1; } .theme h3 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 10px; } .theme p { margin: 0 0 10px; color: var(--ink-soft); } .theme p em { color: var(--ink); } .theme-pubs { font-size: 0.85rem; color: var(--warm-grey); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px !important; } .theme-pubs strong { color: var(--ink); } .theme-pubs a { color: var(--cardinal); text-decoration: none; border-bottom: 1px solid rgba(140, 21, 21, 0.3); transition: border-color .2s ease; } .theme-pubs a:hover { border-bottom-color: var(--cardinal); } /* Course cards (teaching page) */ .course-list { display: grid; gap: 28px; } .course-card { background: #fff; border: 1px solid var(--line); padding: 36px 36px; border-radius: 2px; border-top: 4px solid var(--cardinal); } .course-tag { display: inline-block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cardinal); font-weight: 700; background: rgba(140,21,21,0.07); padding: 4px 10px; border-radius: 2px; margin: 0 0 12px; } .course-card h3 { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 14px; color: var(--ink); } .course-card p { color: var(--ink-soft); margin: 0 0 16px; } .course-card ul { padding-left: 20px; color: var(--ink-soft); margin: 0; } .course-card ul li { padding: 4px 0; } /* Philosophy section */ .philosophy { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; } .philosophy blockquote { font-family: var(--serif); font-size: 1.65rem; line-height: 1.4; color: var(--ink); border-left: 3px solid var(--cardinal); padding-left: 28px; margin: 0; } .philosophy p { color: var(--ink-soft); margin: 0 0 14px; } /* CTA tiles at bottom of pages */ .page-cta { background: linear-gradient(180deg, var(--sandstone) 0%, var(--bg) 100%); padding: 88px 0; } .page-cta h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 14px; color: var(--ink); } .page-cta .page-lede { margin-bottom: 32px; } .cta-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .cta-tile { display: block; background: #fff; border: 1px solid var(--line); padding: 26px 28px; text-decoration: none; color: var(--ink); border-radius: 2px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; position: relative; } .cta-tile::after { content: "→"; position: absolute; right: 24px; top: 26px; color: var(--cardinal); font-size: 1.1rem; transition: transform .2s ease; } .cta-tile:hover { border-color: var(--cardinal); transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(140,21,21,0.25); } .cta-tile:hover::after { transform: translateX(4px); } .cta-tile span { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; color: var(--cardinal); } .cta-tile small { display: block; color: var(--ink-soft); font-size: 0.9rem; } /* Active nav state on subpages */ .nav-links li.active > a:first-child { color: var(--cardinal); font-weight: 600; position: relative; } .nav-links li.active > a:first-child::after { content: ""; position: absolute; bottom: -3px; left: 0; right: 0; height: 2px; background: var(--cardinal); } /* Responsive */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 56px; } .hero-photo { order: -1; } .photo-fade { max-width: 340px; margin: 0 auto; } .two-col { grid-template-columns: 1fr; gap: 32px; } .metrics { grid-template-columns: repeat(2, 1fr); } .nav-links { display: none; } .section { padding: 64px 0; } .prose-grid { grid-template-columns: 1fr; gap: 32px; } .prose-sidebar { position: static; } .theme { grid-template-columns: 60px 1fr; gap: 18px; padding: 22px 24px; } .theme-num { font-size: 2rem; } .philosophy { grid-template-columns: 1fr; gap: 24px; } .page-hero { padding: 64px 0 40px; } .page-cta { padding: 56px 0; } }