/* STYLE GUIDE (high level) - This file is plain CSS (no frameworks). - It's organized top-to-bottom: reset → theme tokens → layout utilities → components → responsive rules. The most important concept here is "theme tokens": - We define colors as variables (like --bg, --text, --accent) - Then the rest of the CSS uses those variables - Switching theme is just changing the variables, not rewriting every rule */ /* Base reset: makes sizing predictable across elements */ *, *::before, *::after { box-sizing: border-box; } html { /* Smooth scroll for in-page anchors like #about */ scroll-behavior: smooth; } body { margin: 0; } /* Theme tokens (CSS variables) - Default is the dark theme (because :root applies to everything) - Light theme overrides are below in html[data-theme="light"] */ :root { --bg: #0b1020; --bg-elev: rgba(255, 255, 255, 0.06); --card: rgba(255, 255, 255, 0.08); --text: rgba(255, 255, 255, 0.92); --texth4: rgba(255, 255, 255, 0.92); --textp: #cccccc; --textdate: #cccccc; --muted: rgba(255, 255, 255, 0.72); --border: rgba(255, 255, 255, 0.14); --shadow: 0 20px 70px rgba(0, 0, 0, 0.35); --accent: #1170aa; /* purple #ad94ff*/ --accent-2: #22c55e; --ring: rgba(124, 92, 255, 0.35); --pub-author-color: #bebcbc; --radius: 16px; --container: 1100px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* Light theme overrides (activated by script.js via ) */ html[data-theme="light"] { --bg: #f6f7fb; --bg-elev: rgba(17, 24, 39, 0.04); --card: rgba(255, 255, 255, 0.8); --text: rgba(17, 24, 39, 0.92); --texth4: rgba(255, 255, 255, 0.92); --textp: #555; --textdate: #333; --muted: rgba(17, 24, 39, 0.68); --border: rgba(17, 24, 39, 0.12); --shadow: 0 18px 60px rgba(17, 24, 39, 0.15); --ring: rgba(124, 92, 255, 0.25); --pub-author-color: #555555; } /* Prefers-color-scheme baseline (overridden by explicit choice) */ @media (prefers-color-scheme: light) { html:not([data-theme="dark"]):not([data-theme="light"]) { --bg: #f6f7fb; --bg-elev: rgba(17, 24, 39, 0.04); --card: rgba(255, 255, 255, 0.8); --text: rgba(17, 24, 39, 0.92); --texth4: rgba(255, 255, 255, 0.92); --textp: #555; --textdate: #333; --muted: rgba(17, 24, 39, 0.68); --border: rgba(17, 24, 39, 0.12); --shadow: 0 18px 60px rgba(17, 24, 39, 0.15); --ring: rgba(124, 92, 255, 0.25); --pub-author-color: #555555; } } body { font-family: var(--font); color: var(--text); /* Background is layered gradients for a "soft glow" effect. If you want a flatter look, you can replace this with: background: var(--bg); */ background: radial-gradient(1200px 600px at 20% -10%, rgba(124, 92, 255, 0.35), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(34, 197, 94, 0.25), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg)); line-height: 1.55; } a { color: inherit; } .muted { /* Secondary text color used for descriptions */ color: var(--muted); } .accent { color: var(--accent); } /* Common layout helper: centers content and limits max width */ .container { width: min(100% - 0px, var(--container)); margin-inline: auto; } /* Accessibility */ .skip-link { position: absolute; left: -9999px; top: 12px; background: var(--card); border: 1px solid var(--border); padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow); } .skip-link:focus { left: 12px; outline: 3px solid var(--ring); outline-offset: 2px; } :focus-visible { /* Visible keyboard focus outline */ outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 10px; } /* Header + nav */ .site-header { position: relative; } .nav { /* Sticky header: stays at the top while you scroll. background + backdrop-filter creates a frosted-glass effect. */ position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; background: color-mix(in oklab, var(--bg), transparent 24%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { text-decoration: none; font-weight: 650; letter-spacing: -0.02em; } .nav-links { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; } .nav-links a { text-decoration: none; color: var(--muted); padding: 8px 10px; border-radius: 10px; } .nav-links a:hover { background: var(--bg-elev); color: var(--text); } .nav-actions { display: flex; align-items: center; } .nav-menu { display: flex; gap: 24px; list-style: none; } .nav-toggle { display: none; font-size: 26px; background: none; border: none; cursor: pointer; } .theme-toggle { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); padding: 9px 12px; cursor: pointer; } .theme-toggle:hover { filter: brightness(1.05); } .theme-toggle__icon { width: 18px; height: 18px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 80%); } .theme-toggle__text { font-size: 16px; color: var(--muted); } /* Hero */ .hero { padding: 56px 0 18px; padding-bottom: 40px; } .hero-grid { /* Desktop: 2 columns. Mobile rules are at the bottom. */ display: grid; gap: 22px; grid-template-columns: 1.25fr 0.9fr; align-items: start; } .hero-media { margin: 0; border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 10%); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; align-self: start; margin-top: 215px; /* push it lower */ } .hero-media img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 6px); border: 1px solid var(--border); background: var(--bg-elev); } .hero-caption { margin: 10px 4px 2px; font-size: 13px; } .hero-highlights { margin-top: 18px; } .hero-copy { padding: 24px 0; } .eyebrow { margin: 0 0 14px; font-size: 16px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; } .hero h1 { margin: 0 0 12px; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -0.04em; } .lead { margin: 0 0 18px; font-size: 18px; color: var(--muted); max-width: 60ch; text-align: justify; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--bg); text-decoration: none; font-weight: 600; } .btn.primary { /* Primary button uses accent gradient */ border-color: color-mix(in oklab, var(--accent), transparent 35%); background: linear-gradient(135deg, color-mix(in oklab, var(--accent), white 5%), var(--accent)); box-shadow: 0 10px 35px color-mix(in oklab, var(--accent), transparent 70%); } .btn.secondary { /* Primary button uses accent gradient */ border-color: color-mix(in oklab, var(--accent), transparent 35%); background: linear-gradient(135deg, color-mix(in oklab, var(--accent), white 5%), var(--accent)); box-shadow: 0 10px 35px color-mix(in oklab, var(--accent), transparent 70%); } .btn:hover { filter: brightness(1.04); } .hero-links { display: flex; gap: 10px; flex-wrap: wrap; } .pill { text-decoration: none; color: var(--muted); border: 1px solid var(--border); padding: 8px 12px; border-radius: 999px; background: transparent; } .pill:hover { background: var(--bg-elev); color: var(--text); } .hero-card { border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 10%); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 12px; } .stat__label { font-size: 16px; color: var(--muted); margin-bottom: 4px; } .stat__value { font-weight: 650; letter-spacing: -0.01em; } .divider { height: 1px; background: var(--border); } /* Sections */ .section { /* Vertical spacing around each page section */ padding: 20px 0; } .section-head h2 { margin: 0 0 10px 0; font-size: 28px; letter-spacing: -0.02em; } .section-head p { margin: 10px 0 15px 0; max-width: 70ch; } .research-overview { max-width: none; } .grid { /* Simple grid helper; variants (.two, .three) set the column count */ display: grid; gap: 14px; margin-top: 18px; } .grid.one { display: grid; grid-template-columns: 1fr; } .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { /* Reusable "card" surface used across the site */ border: 1px solid var(--border); background: color-mix(in oklab, var(--card), transparent 10%); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12); margin-bottom: 30px; } .card h3 { margin: 0 0 10px; letter-spacing: -0.02em; } .chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .chips li { border: 1px solid var(--border); background: var(--bg-elev); padding: 8px 10px; border-radius: 999px; font-size: 14px; color: var(--muted); } /* Projects */ .project-actions { display: flex; gap: 12px; margin-top: 14px; } .link { color: var(--text); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 70%); } .link:hover { border-bottom-color: color-mix(in oklab, var(--accent), transparent 30%); color: color-mix(in oklab, var(--accent), var(--text) 30%); } .link[aria-disabled="true"] { opacity: 0.55; pointer-events: none; } /* Contact */ .contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .details { margin: 0; } .details>div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .details>div:last-child { border-bottom: 0; } .details dt { color: var(--muted); } .details dd { margin: 0; } /* Footer */ .footer { padding: 26px 0 40px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--bg), transparent 10%); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* Responsive */ @media (max-width: 920px) { /* Tablet and below: stack the hero and projects into one column */ .hero-grid { grid-template-columns: 1fr; } .grid.three { grid-template-columns: 1fr; } } /* Timeline container */ .timeline { display: flex; flex-direction: column; gap: 15px; } /* Each timeline item */ .timeline-item { display: flex; align-items: flex-start; /* Align top */ gap: 20px; /* Space between date and content */ } .btn.linkedin { background-color: #0A66C2; color: white; border: none; } .btn.linkedin:hover { background-color: #084c93; } /* Date box */ .timeline-date { width: 180px; /* fixed width for alignment */ font-weight: bold; color: var(--textdate); margin-left: 5px; /* add space from the left edge */ text-align: right; /* THIS makes the date align to the right of its column */ white-space: nowrap; /* prevents line breaks in the date */ } /* Content (job title and description) */ .timeline-content h4 { margin: 0 0 5px 0; /* small spacing */ } .timeline-content p { margin: 0; color: var(--textp); font-size: 0.95rem; } /* Ensure grid items start at the top */ .timeline-item { display: grid; grid-template-columns: 170px 1fr; gap: 36px; align-items: start; /* key fix for indent caused by short last line */ } .publication { margin-bottom: 25px; } .pub-title { font-size: 1.05rem; margin-bottom: 3px; } .pub-authors { color: var(--pub-author-color); font-size: 0.95rem; } .pub-venue { font-style: italic; font-size: 0.95rem; margin-bottom: 5px; } .pub-links a { margin-right: 10px; } .abstract { margin-top: 6px; font-size: 0.95rem; color: #666; } .project-layout { display: flex; align-items: center; gap: 30px; } .project-text { flex: 1; text-align: justify; } .project-logo img { height: 210px; width: auto; } /* Profile / research overview section */ .profile-section { background: color-mix(in oklab, var(--bg), transparent 8%); } .profile-text p { text-align: justify; /* this will now apply */ line-height: 1.6; } #profile p.muted { text-align: justify; } .profile-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr); gap: 0px; align-items: center; } /* To move image down relative to left text, add margin-top */ .profile-photo.custom-position { margin-top: 50px; /* adjust this value as needed */ } .profile-photo { margin: 0; justify-self: center; margin-top: 60px; } .profile-photo img { display: block; width: 210px; height: 210px; border-radius: 999px; object-fit: cover; border: 2px solid var(--border); box-shadow: var(--shadow); } @media (max-width: 680px) { /* Phone: hide the top nav links (keeps layout clean). */ .nav-links { display: none; } .nav-toggle { display: block; } .nav-menu { display: none; flex-direction: column; gap: 16px; position: absolute; top: 60px; right: 20px; background: var(--card); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); } .nav-menu.active { display: flex; } .grid.two { grid-template-columns: 1fr; } .details>div { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; align-items: flex-start; } .timeline-item { flex-direction: column; } .timeline-date { width: auto; margin-bottom: 5px; } .profile-grid { grid-template-columns: 1fr; text-align: center; } .profile-photo { order: -1; } .hero-grid { grid-template-columns: 1fr; /* stack text and gif vertically */ } .hero-media { min-height: auto; /* let GIF adjust naturally */ } }