/* --------------------------------------------------------------- Ashok Dahal — academic homepage Two palettes, toggled via [data-theme] on : dark (default): charcoal ink / warm off-white text / clay accent light: warm paper / dark ink / clay accent No frameworks, no jargon. ----------------------------------------------------------------*/ :root { --bg: #141210; --bg-alt: #1b1814; --surface: #211d17; --text: #f2ece0; --text-soft: #c4bca9; --text-faint: #94897a; --border: #342e23; --accent: #dd7c4f; --accent-strong: #f2a276; --accent-tint-bg: rgba(221, 124, 79, 0.16); --accent-glow: rgba(221, 124, 79, 0.22); --header-bg: rgba(20, 18, 16, 0.88); --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --maxw: 1080px; } :root[data-theme="light"] { --bg: #faf8f4; --bg-alt: #f1ede4; --surface: #ffffff; --text: #1c1a17; --text-soft: #4a463f; --text-faint: #7a746a; --border: #e2dcd0; --accent: #a44a2f; --accent-strong: #8a3c26; --accent-tint-bg: #f4e6de; --accent-glow: rgba(164, 74, 47, 0.14); --header-bg: rgba(250, 248, 244, 0.92); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body, .site-header, .card, .pill-list li, .pub-filter, .badge, .scholar-metrics, .timeline, .primary-nav, .btn, a { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--bg); padding: 10px 16px; z-index: 1000; } .skip-link:focus { left: 12px; top: 12px; } h1, h2, h3 { font-family: var(--serif); color: var(--text); font-weight: 600; margin: 0; } /* ---------------- Header ---------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--text); } .brand:hover { text-decoration: none; color: var(--accent); } .header-right { display: flex; align-items: center; gap: 20px; } .primary-nav { display: flex; gap: 28px; } .primary-nav a { color: var(--text-soft); font-size: 0.92rem; font-weight: 500; } .primary-nav a:hover { color: var(--accent); text-decoration: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; } .nav-toggle span { width: 22px; height: 2px; background: var(--text); display: block; } /* ---------------- Hero ---------------- */ .hero { padding: 64px 0 56px; border-bottom: 1px solid var(--border); } .hero-inner { display: grid; grid-template-columns: 1.35fr 0.8fr; gap: 56px; align-items: center; } .eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 600; color: var(--accent-strong); margin: 0 0 14px; } .hero-text h1 { font-size: 2.75rem; line-height: 1.1; margin-bottom: 8px; } .hero-role { font-size: 1.15rem; color: var(--text-soft); font-weight: 500; margin: 0 0 20px; } .hero-lede { font-size: 1.02rem; color: var(--text-soft); max-width: 46ch; margin: 0 0 28px; } .hero-links { display: flex; gap: 14px; margin-bottom: 32px; } .btn { display: inline-block; padding: 11px 22px; border-radius: 3px; font-size: 0.92rem; font-weight: 600; border: 1px solid transparent; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: #1a1310; } .btn-primary:hover { background: var(--accent-strong); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--text); color: var(--bg); } .hero-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; } .hero-meta li { display: flex; gap: 10px; } .hero-meta span { color: var(--text-faint); width: 56px; flex-shrink: 0; } /* Portrait blends into the page rather than sitting in a hard-edged card: no border/shadow, just a soft radial fade at the edges plus a faint accent-toned glow behind it. */ .hero-portrait { position: relative; } .hero-portrait::before { content: ""; position: absolute; inset: -14%; background: radial-gradient(circle at 46% 42%, var(--accent-glow), transparent 68%); filter: blur(30px); z-index: -1; } .hero-portrait img { width: 100%; height: auto; display: block; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 48% 43%, #000 68%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 48% 43%, #000 68%, transparent 100%); } /* ---------------- Sections ---------------- */ .section { padding: 68px 0; border-bottom: 1px solid var(--border); } .section-alt { background: var(--bg-alt); } .section-title { display: flex; align-items: baseline; gap: 14px; font-size: 1.65rem; margin-bottom: 34px; } .section-num { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; } .subsection-title { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; margin: 30px 0 14px; color: var(--text); } .subsection-title:first-of-type { margin-top: 0; } .about-grid p { max-width: 74ch; color: var(--text-soft); margin: 0 0 18px; } .about-grid p:last-child { margin-bottom: 0; } /* ---------------- Pills ---------------- */ .pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .pill-list li { background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-size: 0.88rem; padding: 9px 16px; border-radius: 999px; } /* ---------------- Timeline ---------------- */ .exp-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); } .timeline li { position: relative; padding: 0 0 22px 22px; } .timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .timeline li:last-child { padding-bottom: 0; } .timeline-date { font-size: 0.8rem; color: var(--text-faint); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 3px; } .timeline-title { font-weight: 600; color: var(--text); } .timeline-org { font-size: 0.92rem; color: var(--text-soft); } .badge { display: inline-block; margin-left: 8px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-strong); background: var(--accent-tint-bg); padding: 2px 8px; border-radius: 999px; vertical-align: middle; } /* ---------------- Cards (projects) ---------------- */ .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px 22px; } .card-year { font-size: 0.78rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; } .card h3 { font-size: 1rem; line-height: 1.4; margin: 0 0 6px; } .card-role { font-size: 0.88rem; color: var(--text-soft); margin: 0; } /* ---------------- Supervision list ---------------- */ .supervision-list { list-style: none; margin: 0 0 8px; padding: 0; } .supervision-list li { display: grid; grid-template-columns: 200px 1fr 110px; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; align-items: baseline; } .supervision-list li:last-child { border-bottom: none; } .sup-name { font-weight: 600; color: var(--text); } .sup-topic { color: var(--text-soft); } .sup-years { color: var(--text-faint); font-size: 0.85rem; text-align: right; } /* ---------------- Teaching ---------------- */ .teaching-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .plain-list { margin: 0; padding: 0; list-style: none; } .plain-list li { padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 0.95rem; } .plain-list li:last-child { border-bottom: none; } /* ---------------- Publications ---------------- */ .scholar-metrics { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 36px; align-items: center; padding: 26px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 30px; } .metric-value { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--text); line-height: 1; } .metric-label { font-size: 0.78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; } .metric-link { text-align: right; } .metric-link a { font-weight: 600; font-size: 0.92rem; } .metric-updated { font-size: 0.76rem; color: var(--text-faint); margin-top: 4px; } .pub-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .pub-filter { background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-family: var(--sans); font-size: 0.85rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; } .pub-filter:hover { border-color: var(--accent); color: var(--accent-strong); } .pub-filter[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #1a1310; } .pub-group { margin-bottom: 36px; } .pub-group:last-child { margin-bottom: 0; } .pub-group-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--accent-strong); margin: 0 0 4px; } .pub-group-count { font-size: 0.82rem; color: var(--text-faint); font-weight: 400; margin-left: 8px; } .pub-list { list-style: none; margin: 12px 0 0; padding: 0; } .pub-item { padding: 16px 0; border-bottom: 1px solid var(--border); display: flex; gap: 18px; align-items: baseline; } .pub-item:last-child { border-bottom: none; } .pub-year { flex-shrink: 0; width: 46px; font-weight: 700; color: var(--accent); font-size: 0.9rem; } .pub-body { flex: 1; } .pub-title { font-weight: 600; color: var(--text); margin: 0 0 4px; line-height: 1.4; } .pub-authors { font-size: 0.88rem; color: var(--text-soft); margin: 0 0 2px; } .pub-authors .self { font-weight: 600; color: var(--text); } .pub-venue { font-size: 0.85rem; color: var(--text-faint); font-style: italic; } .pub-cites { flex-shrink: 0; text-align: right; font-size: 0.78rem; color: var(--text-faint); white-space: nowrap; } .pub-cites strong { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--text); font-weight: 600; } .pub-loading, .pub-error { color: var(--text-faint); font-size: 0.92rem; padding: 24px 0; } .pub-error a { font-weight: 600; } /* ---------------- Contact ---------------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .contact-lede { color: var(--text-soft); max-width: 42ch; } .contact-details { display: flex; flex-direction: column; gap: 16px; } .contact-row { display: grid; grid-template-columns: 90px 1fr; gap: 16px; font-size: 0.95rem; padding: 14px 0; border-bottom: 1px solid var(--border); } .contact-label { color: var(--text-faint); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } /* ---------------- Footer ---------------- */ .site-footer { padding: 28px 0 40px; } .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 0.82rem; color: var(--text-faint); } .footer-inner p { margin: 0; } /* ---------------- Responsive ---------------- */ @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; gap: 32px; } .hero-portrait { max-width: 320px; } .exp-columns, .teaching-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; } .card-grid { grid-template-columns: 1fr; } .scholar-metrics { grid-template-columns: repeat(2, auto); row-gap: 20px; } .metric-link { text-align: left; grid-column: 1 / -1; } .supervision-list li { grid-template-columns: 1fr; gap: 3px; } .sup-years { text-align: left; } } @media (max-width: 720px) { .primary-nav { position: absolute; top: 64px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); flex-direction: column; padding: 12px 28px 20px; gap: 4px; display: none; } .primary-nav.open { display: flex; } .primary-nav a { padding: 10px 0; } .nav-toggle { display: flex; } .hero-text h1 { font-size: 2.1rem; } .pub-item { flex-direction: column; gap: 6px; } .pub-cites { text-align: left; } }