/* General CSS styling for Aryaman Bansal's personal website. * Inspired by Shivesh's research portfolio aesthetic – clean, minimal and easy to read. * Supports a dark mode via a data‑theme attribute on the element. */ html, body { height: 100%; } /* Colour variables for light theme */ :root { --primary: #c2185b; /* pinkish accent colour similar to Shivesh's site */ --bg: #ffffff; --card-bg: #f7f7f7; --text: #333333; --border: #dddddd; --link: #0066cc; --accent: #0056b3; --accent-soft: #e3f0ff; } /* Dark theme overrides */ [data-theme='dark'] { --bg: #121212; --card-bg: #1e1e1e; --text: #e0e0e0; --border: #2a2a2a; --link: #90caf9; --accent: #42a5f5; --accent-soft: #233554; } /* Global resets */ * { box-sizing: border-box; margin: 0; padding: 0; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); /* ✅ use the defined variable */ line-height: 1.6; /* keep your sticky-footer layout */ min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* Navigation bar */ nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; border-bottom: 1px solid var(--border); background-color: var(--bg); position: sticky; top: 0; z-index: 100; } nav .logo { font-size: 1.5rem; font-weight: 700; } nav .logo a { color: var(--text); } nav .menu a { margin-left: 1rem; color: var(--text); position: relative; padding-bottom: 2px; } nav .menu a:hover { color: var(--primary); } nav .theme-toggle { cursor: pointer; margin-left: 1rem; font-size: 1.2rem; line-height: 1; } /* Page container */ .page-content { max-width: 900px; margin: 2rem auto; padding: 0 1rem; flex: 1; /* take up remaining vertical space between nav and footer */ } /* Profile section on About page */ .profile { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin-bottom: 2rem; } .profile img { width: 180px; height: 180px; border-radius: 50%; border: 2px solid var(--border); object-fit: cover; } .profile-info { flex: 1; } .profile-info h1 { margin-bottom: 0.5rem; font-size: 2rem; } /* Inline icon images for contact links */ .icon { width: 18px; height: 18px; vertical-align: -3px; /* nudges icon down a bit so it aligns with text */ margin-right: 0.4rem; } .contact-row { margin: 0.25rem 0; display: flex; align-items: center; gap: 0.4rem; } /* Generic section styling */ .section { margin-bottom: 2rem; } .section h2 { margin-bottom: 0.75rem; font-size: 1.6rem; color: var(--primary); } .news-list { list-style: none; padding-left: 0; } .news-list li { margin-bottom: 0.5rem; } .news-date { font-weight: 600; margin-right: 0.5rem; } .list { list-style: disc; padding-left: 1.2rem; } .card { background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; } /* Timeline for CV entries */ .timeline { border-left: 2px solid var(--border); margin-left: 0.5rem; padding-left: 1.5rem; } .timeline-entry { position: relative; margin-bottom: 1.5rem; padding-left: 0.5rem; } .timeline-date { position: absolute; left: -1.75rem; top: 0; background-color: var(--primary); color: #ffffff; padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.75rem; white-space: nowrap; } /* CV layout */ .cv-container { display: flex; flex-wrap: wrap; gap: 2rem; } .cv-nav { flex: 0 0 200px; font-size: 0.9rem; position: sticky; top: 6rem; align-self: flex-start; } .cv-nav a { display: block; margin-bottom: 0.4rem; color: var(--text); text-decoration: none; } .cv-nav a:hover { color: var(--primary); } .cv-content { flex: 1 1 0; } .cv-content h3 { margin-top: 1.2rem; margin-bottom: 0.4rem; font-size: 1.2rem; color: var(--primary); } .cv-section { margin-bottom: 2rem; } .cv-section h2 { font-size: 1.5rem; margin-bottom: 0.6rem; border-bottom: 2px solid var(--primary); display: inline-block; } /* Responsive adjustments */ @media (max-width: 700px) { nav { flex-wrap: wrap; gap: 0.5rem; } nav .menu { display: flex; flex-wrap: wrap; gap: 0.5rem; } nav .menu a { margin-left: 0; margin-right: 0.5rem; } nav .theme-toggle { margin-left: 0; } .pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--accent-soft); font-size: 0.75rem; margin-left: 0.4rem; } .profile { flex-direction: column; align-items: flex-start; } .cv-container { flex-direction: column; } .cv-nav { position: static; top: auto; order: -1; margin-bottom: 1rem; } } /* --- Footer bar --- */ .footer-bar { margin-top: 3rem; background-color: #202020; /* light mode bar */ color: #f5f5f5; } .footer-inner { max-width: 1000px; margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; } .footer-left, .footer-right { white-space: nowrap; } /* 🔦 Dark mode footer: different colour + border for contrast */ [data-theme="dark"] .footer-bar { background-color: #2b2148; /* deep purple strip, distinct from page bg */ border-top: 1px solid rgba(255, 255, 255, 0.18); } @media (max-width: 600px) { .footer-inner { flex-direction: column; gap: 0.25rem; text-align: center; } .footer-left, .footer-right { white-space: normal; } }