/* ============================================================ Shanmuganathan Raman — academic site Design system: "Teal" — a calm scientific-colormap identity. Soft cool-teal paper, deep teal accent, and a teal colormap ramp as the recurring signature. Fonts (loaded in ): Quicksand / Nunito / Red Hat Mono. ============================================================ */ :root { --bg: #f6f2f0; /* soft warm paper */ --bg-2: #efe8e4; --surface: #ffffff; --surface-2: #faf6f4; --ink: #1f1612; /* warm near-black */ --ink-2: #463a34; --muted: #7c6f69; --line: #e8ded8; --line-2: #f2eae5; /* warm accent ramp */ --accent: #8A3324; /* brick red (links/markers) */ --accent-2: #a8492f; /* mid brick */ --accent-hot: #c75c3e; /* bright terracotta (hover/highlight) */ --accent-soft: #f1e1da; /* light warm wash */ --grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); --plasma: linear-gradient(90deg, #3a140d 0%, #5c2117 16%, #8a3324 32%, #a8492f 48%, #c75c3e 62%, #d9785c 74%, #e89e87 86%, #f2c4b5 95%, #f8e3dc 100%); --maxw: 1080px; --radius: 18px; --shadow: 0 1px 2px rgba(31,22,18,0.04), 0 8px 24px -12px rgba(90,40,30,0.18); --shadow-sm:0 1px 2px rgba(31,22,18,0.05), 0 4px 14px -10px rgba(90,40,30,0.20); --ff-display: "Quicksand", "Segoe UI", system-ui, sans-serif; --ff-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-mono: "Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--ff-body); font-size: 16px; line-height: 1.66; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(900px 520px at 88% -8%, var(--accent-soft) 0%, transparent 60%), radial-gradient(640px 440px at -6% 6%, rgba(199,92,62,0.07) 0%, transparent 55%), var(--bg); background-attachment: fixed; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- plasma signature ramp ---------- */ .ramp { height: 5px; width: 100%; border-radius: 4px; background: var(--plasma); box-shadow: 0 1px 10px -2px rgba(138,51,36,0.35); } .ramp--thin { height: 3px; border-radius: 0; box-shadow: none; } /* ============================================================ Navigation ============================================================ */ .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(246,242,240,0.82); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--line); } .site-nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .brand { font-family: var(--ff-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; } .brand__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px var(--accent-soft); } .brand__sub { font-family: var(--ff-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .nav-links { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; } .nav-links a { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 8px; position: relative; transition: color .16s ease, background .16s ease; } .nav-links a:hover { color: var(--ink); background: var(--surface); } .nav-links a.current { color: var(--accent); background: var(--surface); } .nav-links a.current::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--grad); border-radius: 2px; } /* ============================================================ Hero (home) ============================================================ */ .hero { padding: 72px 0 14px; } .hero__grid { display: grid; grid-template-columns: 1fr 230px; gap: 52px; align-items: center; } .eyebrow { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 20px; display: flex; align-items: center; gap: 12px; color: var(--accent); font-weight: 500; } .eyebrow::before { content: ""; width: 30px; height: 3px; border-radius: 3px; background: var(--grad); } .hero__name { font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.012em; line-height: 1.0; font-size: clamp(2.6rem, 6.4vw, 4.3rem); margin: 0 0 10px; color: var(--ink); } .hero__link { color: inherit; text-decoration: none; } .hero__link:hover { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero__email { font-family: var(--ff-mono); font-size: 0.85rem; color: var(--muted); margin: 0 0 28px; } .hero__email a { color: var(--accent); text-decoration: none; } .hero__email a:hover { color: var(--accent-hot); } .roles { margin: 0 0 24px; } .roles p { margin: 0 0 4px; } .roles .role-title { font-weight: 600; color: var(--ink); } .roles .role-org { color: var(--ink-2); } .roles a { color: var(--accent); text-decoration: none; } .roles a:hover { color: var(--accent-hot); text-decoration: underline; text-underline-offset: 2px; } .contact { font-size: 0.9rem; color: var(--muted); line-height: 1.75; font-style: normal; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid transparent; border-image: var(--grad) 1; border-image-slice: 1; border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; box-shadow: var(--shadow-sm); } .contact a { color: var(--accent); text-decoration: none; } .contact a:hover { color: var(--accent-hot); text-decoration: underline; } .contact .mono { font-family: var(--ff-mono); font-size: 0.82rem; } .portrait { width: 230px; height: 230px; border-radius: var(--radius); object-fit: cover; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .portrait-fallback { width: 230px; height: 230px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: radial-gradient(130% 130% at 80% 14%, var(--accent-soft) 0%, transparent 55%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-family: var(--ff-display); font-weight: 700; font-size: 3.8rem; letter-spacing: -0.012em; background-image: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero__ramp { margin-top: 46px; } /* ============================================================ Page header (sub-pages) ============================================================ */ .page-head { padding: 64px 0 6px; } .page-head h1 { font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.012em; font-size: clamp(2.3rem, 5.2vw, 3.4rem); margin: 8px 0 10px; color: var(--ink); } .page-head .sub { color: var(--muted); max-width: 62ch; margin: 0; } .page-head .sub a { color: var(--accent); text-decoration: none; } .page-head .sub a:hover { color: var(--accent-hot); text-decoration: underline; } .page-head__ramp { margin-top: 30px; } /* ============================================================ Content / prose ============================================================ */ .content { padding: 12px 0 96px; } .prose { max-width: 100%; } .prose h2 { font-family: var(--ff-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.008em; color: var(--ink); margin: 58px 0 20px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 13px; } .prose h2:first-of-type { margin-top: 18px; } .prose h2::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: var(--grad); border-radius: 4px; box-shadow: 0 2px 8px -2px rgba(138,51,36,0.5); } .prose h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--accent); margin: 32px 0 14px; display: inline-flex; align-items: center; gap: 9px; } .prose h3::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--accent-2); opacity: 0.7; } .prose h4 { font-family: var(--ff-display); font-weight: 500; font-size: 1.12rem; color: var(--ink); margin: 0; } .prose p { margin: 0 0 14px; color: var(--ink-2); } .prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); transition: color .14s, border-color .14s; } .prose a:hover { color: var(--accent-hot); border-bottom-color: var(--accent-hot); } /* generic bullet lists */ .prose ul { list-style: none; padding: 0; margin: 0 0 14px; } .prose ul > li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--ink-2); } .prose ul > li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); } .prose ul > li p { margin: 0; } /* numbered (ordered) lists -> elevated cards with mono counters */ .prose ol { list-style: none; counter-reset: item; padding: 0; margin: 0 0 14px; } .prose ol > li { counter-increment: item; position: relative; padding: 16px 18px 16px 58px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .prose ol > li:hover { transform: translateY(-1px); border-color: #e3cfc6; box-shadow: 0 2px 4px rgba(31,22,18,0.05), 0 14px 30px -16px rgba(0,0,0,0.30); } .prose ol > li::before { content: counter(item, decimal-leading-zero); position: absolute; left: 18px; top: 17px; font-family: var(--ff-mono); font-size: 0.74rem; font-weight: 500; color: var(--accent); letter-spacing: 0.02em; } .prose ol > li p { margin: 0; color: var(--ink-2); line-height: 1.56; } /* interests page: calm gradient-numbered cards */ .interest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 10px; } .interest-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .interest-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(31,22,18,0.05), 0 18px 36px -18px rgba(90,40,30,0.32); } .interest-card .idx { font-family: var(--ff-mono); font-size: 1.05rem; font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ Footer ============================================================ */ .site-footer { border-top: 1px solid var(--line); background: var(--surface-2); } .site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 36px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); } .site-footer a { color: var(--accent); text-decoration: none; } .site-footer a:hover { color: var(--accent-hot); text-decoration: underline; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 760px) { .hero { padding: 44px 0 10px; } .hero__grid { grid-template-columns: 1fr; gap: 30px; } .portrait, .portrait-fallback { width: 160px; height: 160px; } .portrait-fallback { font-size: 2.6rem; } .interest-grid { grid-template-columns: 1fr; } .site-nav__inner { padding: 12px 18px; } .nav-links a { padding: 7px 9px; } } /* ============================================================ Accessibility ============================================================ */ a:focus-visible, .brand:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } @media print { .site-nav, .site-footer, .ramp, .hero__ramp, .page-head__ramp { display: none; } body { background: #fff; } .prose ol > li { box-shadow: none; border-color: #ddd; } .prose a { color: var(--ink); border-bottom: none; } } /* ============================================================ v3 additions: chips, news, highlights, member cards, badges ============================================================ */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; } .chips a { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--accent); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; transition: all .15s ease; } .chips a:hover { color: var(--surface); background: var(--grad); border-color: transparent; box-shadow: 0 4px 12px -4px rgba(138,51,36,0.45); } /* news */ .news-list { display: flex; flex-direction: column; gap: 10px; } .news-item { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-sm); } .news-date { font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; white-space: nowrap; } .news-item p { margin: 0; color: var(--ink-2); font-size: 0.95rem; } /* research highlights */ .hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .hl-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .hl-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--plasma); } .hl-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(31,22,18,0.05), 0 16px 32px -16px rgba(90,40,30,0.32); } .hl-venue { display: block; font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .hl-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink); font-weight: 500; } .hl-card p.hl-pitch { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 0.82rem; line-height: 1.5; color: var(--ink-2); font-weight: 400; } .hl-note { font-size: 0.84rem; color: var(--muted); margin-top: 12px; } /* year badges on publication entries */ .prose ol > li { padding-right: 70px; } .yr { position: absolute; right: 14px; top: 15px; font-family: var(--ff-mono); font-size: 0.68rem; font-weight: 500; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; letter-spacing: 0.04em; } /* team member cards */ .member-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 6px 0 18px; } .member-card { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .member-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(31,22,18,0.05), 0 16px 32px -16px rgba(90,40,30,0.32); } .avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grad); color: var(--surface); font-family: var(--ff-display); font-weight: 600; font-size: 1.05rem; box-shadow: 0 4px 12px -4px rgba(138,51,36,0.5); } .member-info { display: flex; flex-direction: column; gap: 2px; } .member-name { font-weight: 600; color: var(--ink); } .member-prog { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--accent); text-transform: uppercase; } .member-extra { font-size: 0.82rem; color: var(--muted); line-height: 1.45; margin-top: 3px; } .member-extra a { color: var(--accent); text-decoration: none; } .member-extra a:hover { color: var(--accent-hot); text-decoration: underline; } @media (max-width: 760px) { .hl-grid { grid-template-columns: 1fr; } .member-grid { grid-template-columns: 1fr; } .news-item { grid-template-columns: 1fr; gap: 4px; } .prose ol > li { padding-right: 18px; } .yr { position: static; display: inline-block; margin-top: 8px; } } /* ============================================================ Dark mode ============================================================ */ @media (prefers-color-scheme: dark) { :root { --bg: #1a120e; --bg-2: #1f1612; --surface: #261a14; --surface-2: #1f1612; --ink: #f2eae5; --ink-2: #d8c8c1; --muted: #9c8a83; --line: #3a2c25; --line-2: #33261f; --accent: #d9795c; --accent-2: #e08a6e; --accent-hot: #ecaf98; --accent-soft: #2e1d16; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px -10px rgba(0,0,0,0.6); } body { background: radial-gradient(900px 520px at 88% -8%, rgba(138,51,36,0.18) 0%, transparent 60%), radial-gradient(640px 440px at -6% 6%, rgba(199,92,62,0.07) 0%, transparent 55%), var(--bg); background-attachment: fixed; } .site-nav { background: rgba(26,18,14,0.82); } .nav-links a:hover, .nav-links a.current { background: var(--surface); } .prose ol > li:hover { border-color: #4a352c; } .chips a:hover { color: var(--surface); } .avatar { color: var(--surface); } } /* ============================================================ Rich interest cards (Interests page) ============================================================ */ .interest-grid--rich { grid-template-columns: 1fr; gap: 16px; } .interest-card--rich { display: block; align-items: initial; text-align: left; padding: 24px 26px; position: relative; overflow: hidden; } .interest-card--rich::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--plasma); } .interest-head { display: flex; align-items: center; gap: 13px; margin-bottom: 11px; } .interest-head h4 { font-size: 1.2rem; } .interest-card--rich .idx { font-size: 1.1rem; } .interest-card--rich p { margin: 0; color: var(--ink-2); font-size: 0.96rem; line-height: 1.62; } /* ============================================================ Teaching page: overview chips + year timeline ============================================================ */ .teach-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 4px; } .ov-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; box-shadow: var(--shadow-sm); } .ov-group h3 { margin: 0 0 14px; } .ov-group h3::before { content: none; } /* no leading rule inside cards */ .chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .course-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 13px 4px 4px; } .course-chip .cname { font-size: 0.9rem; color: var(--ink); } .jodhpur-chip { padding: 7px 14px; } .ccode { font-family: var(--ff-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.03em; color: var(--surface); background: var(--grad); border-radius: 999px; padding: 4px 9px; white-space: nowrap; } /* timeline */ .timeline { margin-top: 12px; } .tl-row { display: grid; grid-template-columns: 88px 1fr; } .tl-year-label { font-family: var(--ff-mono); font-weight: 600; font-size: 0.92rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-top: 18px; position: sticky; top: 76px; } .tl-body { border-left: 2px solid var(--line); padding: 14px 0 18px 26px; position: relative; } .tl-row:last-child .tl-body { padding-bottom: 4px; } .tl-body::before { content: ""; position: absolute; left: -8px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px var(--bg); } .term-block { margin-bottom: 18px; } .term-block:last-child { margin-bottom: 0; } .term-label { font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; } .course-item { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; margin-bottom: 8px; box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .course-item:last-child { margin-bottom: 0; } .course-item:hover { transform: translateY(-1px); border-color: #e3cfc6; box-shadow: 0 2px 4px rgba(31,22,18,0.05), 0 14px 30px -16px rgba(0,0,0,0.30); } .course-item .ccode { border-radius: 7px; margin-top: 1px; } .course-item .ctitle { font-weight: 600; color: var(--ink); line-height: 1.45; } .course-item .ctitle a { font-weight: 600; } .course-item .caud { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; margin-top: 3px; } @media (max-width: 760px) { .teach-overview { grid-template-columns: 1fr; } .tl-row { grid-template-columns: 64px 1fr; } .tl-body { padding-left: 20px; } .tl-year-label { font-size: 0.82rem; position: static; } } @media (prefers-color-scheme: dark) { .course-item:hover { border-color: #4a352c; } .tl-body::before { box-shadow: 0 0 0 4px var(--bg); } } /* Selected Highlights intro line (research page) */ .hl-intro { margin: 6px 0 18px; max-width: 70ch; } /* 10-card highlights: flexible columns so the last row fills evenly */ .hl-grid--sel { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); } @media (max-width: 760px) { .hl-grid--sel { grid-template-columns: 1fr; } } /* ---- Courses Taught overview: each course in its own block ---- */ .ov-group .chip-cloud { flex-direction: row; flex-wrap: wrap; align-items: stretch; column-gap: 10px; row-gap: 10px; } .ov-group .course-chip { display: inline-flex; align-items: center; width: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 8px 8px; gap: 9px; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .ov-group .course-chip:hover { transform: translateY(-1px); border-color: #e3cfc6; box-shadow: var(--shadow-sm); } .ov-group .course-chip::after { content: none; } /* About: Honours & Appointments list */ .prose ul.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 6px 0 4px; padding: 0; } .prose ul.awards > li { display: flex; flex-direction: column; gap: 3px; position: static; padding: 13px 2px; margin: 0; border-bottom: 1px solid var(--line-2); } .prose ul.awards > li::before { content: none; } .prose ul.awards .aw-name { font-weight: 600; color: var(--ink); } .prose ul.awards .aw-org { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); } @media (max-width: 760px) { .prose ul.awards { grid-template-columns: 1fr; } } /* About: Professional Recognition table */ .recognition { width: 100%; border-collapse: collapse; margin: 8px 0 4px; } .recognition thead th { text-align: left; font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 0 14px 10px 0; border-bottom: 2px solid var(--line); } .recognition thead th:last-child { text-align: right; padding-right: 0; } .recognition tbody td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: baseline; } .recognition tbody tr:last-child td { border-bottom: 0; } .recognition td:first-child { font-weight: 600; color: var(--ink); } .recognition td:nth-child(2) { color: var(--muted); } .recognition td:last-child { font-family: var(--ff-mono); font-size: 0.8rem; color: var(--accent); white-space: nowrap; text-align: right; padding-right: 0; } @media (max-width: 760px) { .recognition { font-size: 0.92rem; } .recognition td:nth-child(2) { font-size: 0.85rem; } } /* ============================================================ Home page redesign ============================================================ */ .hero { padding: 72px 0 18px; } .hero__grid { grid-template-columns: 1fr 286px; gap: 54px; align-items: start; } .hero__name { margin-bottom: 14px; } .hero__tagline { font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin: 0 0 22px; } .hero__intro .roles { margin-bottom: 22px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 16px; border-radius: 10px; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--surface); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn--primary { background: var(--grad); color: var(--surface); border-color: transparent; } .btn--primary:hover { color: var(--surface); box-shadow: 0 10px 22px -8px rgba(138,51,36,0.55); } .prose a.btn { border-bottom: none; } .hero__aside { display: flex; flex-direction: column; gap: 18px; } .portrait-frame { padding: 7px; border-radius: calc(var(--radius) + 6px); background: var(--grad); box-shadow: var(--shadow); line-height: 0; } .portrait-frame .portrait, .portrait-frame .portrait-fallback { width: 100%; height: auto; aspect-ratio: 1 / 1; border: 3px solid var(--surface); display: block; } .hero__aside .contact { border-radius: var(--radius); border-left: 3px solid transparent; border-image: var(--grad) 1; border-image-slice: 1; } /* stat strip */ .statstrip-wrap { padding: 6px 0 2px; } .statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .stat { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 7px; } .stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--plasma); } .stat__num { font-family: var(--ff-display); font-weight: 700; font-size: 1.85rem; line-height: 1; color: var(--accent); letter-spacing: -0.02em; } .stat__plus { font-size: 1.05rem; vertical-align: super; } .stat__label { font-family: var(--ff-mono); font-size: 0.67rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* research interest tags */ .topic-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 18px; } .topic-tag { font-size: 0.92rem; font-weight: 600; padding: 8px 15px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .profile-links { display: flex; flex-wrap: wrap; gap: 20px; } .profile-links a { font-family: var(--ff-mono); font-size: 0.8rem; } /* education */ .edu-list { display: flex; flex-direction: column; gap: 12px; } .edu-item { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); } .edu-degree { font-family: var(--ff-display); font-weight: 600; font-size: 1.06rem; color: var(--ink); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .edu-year { font-family: var(--ff-mono); font-size: 0.68rem; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; letter-spacing: 0.03em; } .edu-meta { color: var(--ink-2); font-weight: 500; margin-top: 3px; } .edu-sub { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin-top: 7px; } /* experience appointments */ .exp-list { display: flex; flex-direction: column; } .exp-item { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--line-2); } .exp-item:last-child { border-bottom: 0; } .exp-date { font-family: var(--ff-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.02em; } .exp-role { display: block; font-weight: 600; color: var(--ink); } .exp-org { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 2px; } /* open positions CTA */ .cta { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 70%); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); } .cta__text { color: var(--ink-2); line-height: 1.62; } .cta__text strong { color: var(--ink); } @media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; gap: 30px; } .hero__aside { flex-direction: row; align-items: flex-start; gap: 20px; } .portrait-frame { width: 150px; flex: 0 0 auto; } .statstrip { grid-template-columns: repeat(2, 1fr); } .exp-item { grid-template-columns: 1fr; gap: 2px; padding: 12px 2px; } .exp-date { margin-bottom: 3px; } } @media (max-width: 480px) { .hero__aside { flex-direction: column; } .portrait-frame { width: 160px; } } /* button icons */ .btn svg { width: 15px; height: 15px; flex: 0 0 auto; } /* cross-page navigation (Publications <-> Outreach) */ .page-nav { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; } .page-nav__next { margin-left: auto; align-items: flex-end; text-align: right; } .page-nav__prev { margin-right: auto; } .page-nav__link { display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .prose a.page-nav__link { border-bottom: none; } .page-nav__link:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 2px 4px rgba(31,22,18,0.05), 0 14px 30px -16px rgba(138,51,36,0.30); } .page-nav__label { font-family: var(--ff-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .page-nav__title { font-family: var(--ff-display); font-weight: 600; font-size: 1.06rem; color: var(--accent); } /* publication / highlight links */ .prose a.hl-link { color: inherit; border-bottom: none; text-decoration: none; } .prose a.hl-link:hover { color: var(--accent); } .prose a.pub-link { border-bottom: none; margin-left: 5px; font-size: 0.82em; color: var(--muted); text-decoration: none; white-space: nowrap; } .prose a.pub-link:hover { color: var(--accent); } /* ---- Research Themes illustration ---- */ .theme-map{margin:22px 0 8px;padding:20px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);} .theme-map svg{width:100%;height:auto;display:block;} .theme-map figcaption{margin-top:12px;font-size:.82rem;line-height:1.5;color:var(--muted);max-width:62ch;} /* ---- ES666 course page ---- */ .cv-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 2px} .cv-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:6px 0 4px} .cv-info__item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)} .cv-info__k{font-family:"Red Hat Mono",monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .cv-info__v{font-size:.98rem;color:var(--ink);line-height:1.45} .cv-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:10px 0 4px} .cv-step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 16px 18px;box-shadow:var(--shadow-sm);overflow:hidden} .cv-step::before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:var(--grad)} .cv-step__weeks{font-family:"Red Hat Mono",monospace;font-size:.74rem;letter-spacing:.05em;color:var(--accent);text-transform:uppercase;margin-bottom:6px} .cv-step__title{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.35} .cv-step__n{position:absolute;right:13px;top:8px;font-family:Quicksand,sans-serif;font-weight:700;font-size:1.5rem;color:var(--line-2,var(--line));opacity:.65} .cv-books{list-style:none;padding:0;margin:6px 0;display:grid;gap:12px} .cv-books li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-sm)} .cv-books .bk-title{font-weight:600;color:var(--ink)} .cv-books .bk-meta{font-size:.86rem;color:var(--muted);margin-top:3px} .cv-books .bk-free{display:inline-block;margin-left:8px;font-family:"Red Hat Mono",monospace;font-size:.68rem;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 7px;vertical-align:1px} /* ---- ES666 lecture schedule ---- */ .cv-sched-wrap{overflow-x:auto;margin:10px 0 4px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)} .cv-sched{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px;background:var(--surface)} .cv-sched th{text-align:left;font-family:"Red Hat Mono",monospace;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:11px 14px;border-bottom:2px solid var(--line-2,var(--line))} .cv-sched td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)} .cv-sched tbody tr:last-child td{border-bottom:none} .cv-sched__num{font-family:"Red Hat Mono",monospace;color:var(--accent);font-weight:500;white-space:nowrap;width:42px} .cv-sched__desc{display:block;font-size:.82rem;color:var(--muted);margin-top:4px;line-height:1.5;max-width:54ch} .cv-sched__refs{font-size:.84rem;color:var(--muted);line-height:1.45} .cv-sched__part td{background:var(--accent-soft);color:var(--accent);font-weight:700;font-family:Quicksand,sans-serif;font-size:.86rem;letter-spacing:.02em;padding:9px 14px} .cv-sched tbody tr:not(.cv-sched__part):hover td{background:var(--surface-2)} .cv-sched__tba td{color:var(--muted)} .cv-sched .sl-none{color:var(--muted)} /* ---- ES666 header TAs + map links ---- */ .cv-tas{margin:12px 0 0;font-size:.9rem;color:var(--ink-2,var(--ink));line-height:1.5} .cv-tas__k{display:inline-block;font-family:"Red Hat Mono",monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:9px;vertical-align:1px} .theme-map svg a{cursor:pointer;text-decoration:none} .theme-map svg a:hover rect{opacity:.9}