/* =============================== Personal Color Palette Modern, Minimalist, Technical =============================== */ /* LIGHT MODE */ :root { /* Core */ --color-bg: #f9f9fa; /* Background */ --color-fg: #1c1e21; /* Foreground (main text) */ --color-muted: #6e6e73; /* Muted text (secondary info) */ --color-border: #d3d3d8; /* Neutral borders and separators */ --color-highlight: #e6e8ec; /* Highlighted background (hover, selection) */ --color-code-bg: #f3f3f6; /* Code block background */ --color-expanded-row: #e0e4f4; /* Optimized: more violet, matches accent */ --color-table-header: #69759A; /* Use accent color for table header in light mode */ /* Primary accent (violet) */ --accent-base: #69759A; --accent-hover: #5C688C; --accent-active: #515D80; /* Secondary accent (teal) */ --accent2-base: #567C96; --accent2-hover: #496F88; --accent2-active: #3E637C; /* Link uses secondary accent */ --link-base: var(--accent2-base); --link-hover: var(--accent2-hover); --link-active: var(--accent2-active); /* Statuses */ --color-link: var(--link-base); --color-green: #547F67; --color-yellow: #986B60; --color-red: #946875; /* Accents */ --color-accent: #69759A; /* Primary accent (e.g., buttons, highlights) */ --color-accent-fg: #f9f9fa; /* Text on top of accent */ --color-accent-2: #69738a; /* Secondary accent (e.g., tags, info states) */ /* Optional transparency variants */ --color-muted-alpha: rgba(110, 110, 115, 0.7); --color-accent-alpha: rgba(76, 91, 119, 0.07); --color-border-alpha: rgba(211, 211, 216, 0.7); } /* Set link color in light mode */ a { color: var(--color-link); text-decoration: underline; } a:hover { color: var(--color-link); opacity: 0.85; } /* DARK MODE - enable by toggling a .dark class on or */ .dark { --color-bg: #23243a; --color-fg: #e5e6ea; --color-muted: #9a9aa0; --color-border: #3c3d42; --color-highlight: #2a2c31; --color-code-bg: #2e2f36; --color-expanded-row: #2d314a; /* More violet, matches dark accent */ --color-table-header: #8f9cb8; /* Use accent color for table header in dark mode */ --color-accent: #8f9cb8; --color-accent-fg: #1e1f22; --color-accent-2: #aab2c8; --color-link: #9aaacc; --color-green: #88b294; --color-yellow: #c4ae7a; --color-red: #c98989; --color-muted-alpha: rgba(154, 154, 160, 0.7); --color-accent-alpha: rgba(143, 156, 184, 0.07); --color-border-alpha: rgba(60, 61, 66, 0.7); } /* =================================================================== GLOBAL TYPOGRAPHY & LAYOUT =================================================================== */ body { font-family: 'Inter', sans-serif; margin: 0; padding: 20px; line-height: 1.6; background: var(--color-bg); color: var(--color-fg); } .container { max-width: 860px; margin: 80px auto 40px; padding: 0 1rem; } .accent-bold { color: var(--color-accent); font-weight: bold; } /* =================================================================== HERO SECTION (HOME / PROFILE) =================================================================== */ .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; text-align: center; padding: 100px 1rem 0; } .hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin: 0 0 0.3em; /* Reduced bottom margin */ } .hero p { font-size: 1.1rem; max-width: 700px; margin: 0 0 1.5em; } .cta-btn { display: inline-block; padding: .75em 1.5em; border-radius: 8px; font-weight: 600; text-decoration: none; background: var(--color-accent); color: var(--color-accent-fg); transition: opacity .15s ease; } .cta-btn:hover { opacity: .85; } .cta-btn:active { opacity: .65; } .sections { max-width: 960px; margin: 3rem auto; padding: 0 1rem; } .sections h2 { font-size: 1.6rem; margin-bottom: .5em; } /* =================================================================== NAVIGATION BAR =================================================================== */ nav { position: fixed; width: 100vw; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: center; gap: 20px; padding: 15px 10px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } nav a { color: var(--color-fg); font-weight: 600; font-size: 1.12em; /* Increased font size for navbar links */ text-decoration: none; cursor: pointer; transition: color .15s ease; } nav a:hover { color: var(--accent-hover); } .nav-link.active { color: var(--accent-active); } @media (max-width: 600px) { nav { width: 100vw; max-width: 100vw; left: 0; right: 0; margin: 0; justify-content: center; gap: 8px; align-items: center; padding: 8px 10px; box-sizing: border-box; } } /* =================================================================== IN-PAGE PDF VIEWERS =================================================================== */ #project-viewer, #cv-viewer, .pdf-wrap { width: 100%; margin-top: 10px; /* REDUCED from 30px */ } #project-viewer iframe, #cv-viewer iframe, .pdf-wrap iframe { width: 100%; height: 600px; border: 1px solid var(--color-border); } /* PDF switch button and close button consistent styling */ .pdf-switch-btn, .close-btn { border: none; border-radius: 4px; padding: 6px 12px; font-size: 0.9em; cursor: pointer; margin: 5px 0; transition: background 0.15s, opacity 0.15s; font-weight: 400; } .pdf-switch-btn { background: var(--color-accent); color: var(--color-accent-fg); } .pdf-switch-btn:hover, .pdf-switch-btn.active { background: var(--accent-hover); color: var(--color-accent-fg); opacity: 0.85; } .pdf-switch-btn:active { opacity: 0.65; } .close-btn { background: var(--color-red, #c98989); color: #fff; } .close-btn:hover { opacity: 0.85; background: #b86a6a; } .close-btn:active { opacity: 0.65; } /* PDF wrapper when empty (no viewer active) */ .pdf-wrap:empty { margin: 0; padding: 0; } /* PDF Viewer Header */ .pdf-viewer-header { display: flex; justify-content: space-between; align-items: center; background: var(--color-highlight); padding: 0.3em 0.7em; border-radius: 0 0 0 0; font-size: 1em; font-weight: 500; color: var(--color-fg); border-bottom: 1px solid var(--color-border); } .pdf-viewer-label { font-size: 0.98em; font-weight: 500; color: var(--color-accent); } .pdf-viewer-switch { margin-top: 0.5em; margin-bottom: 0; display: flex; gap: 0.5em; } .pdf-viewer-switch-row { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0; flex-wrap: wrap; z-index: 2; background: var(--color-expanded-row, #fff); position: relative; } /* On mobile, make sure the switch row is sticky above the PDF viewer */ @media (max-width: 600px) { .pdf-viewer-switch-row { position: sticky; top: 0; background: var(--color-expanded-row, #fff); z-index: 10; padding-top: 0.3em; padding-bottom: 0.3em; } /* Fix for stacking context: ensure parent .pdf-wrap is not overflow:hidden */ .pdf-wrap { overflow: visible !important; } } .pdf-viewer-switch-row { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0; } /* =================================================================== PROJECT TABLE & EXPANDABLE ROWS =================================================================== */ #project-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; table-layout: fixed; } #project-table th, #project-table td { font-size: 1em; /* Ensure consistent font size for all cells and headers */ vertical-align: top; /* Top align all cells by default */ } #project-table th { background: var(--color-accent) !important; color: var(--color-accent-fg); font-weight: 600; cursor: pointer; text-align: left; padding: 0.3em 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 0px solid var(--color-accent-fg); border-left: 2px solid var(--color-accent); } #project-table td { background: none; padding: 0.3em 0; vertical-align: top; /* Ensure vertical top alignment for all cells */ } #project-table .year-column, #project-table th.year-column { width: 2.6em; text-align: left; white-space: nowrap; cursor: pointer; padding-right: 0.5em; vertical-align: top; /* Top align year column */ } .clickable-project { cursor: pointer; border-left: 2px solid transparent; padding-left: 0.3em; font-size: 1em; /* Ensure same font size as other cells */ } /* Table Headers */ #project-table th:first-child, #project-table td:first-child { width: auto; white-space: normal; word-break: break-word; padding-left: 0.5em; } /* Year Column */ #project-table .year-column { width: 2.6em; text-align: left; white-space: nowrap; cursor: pointer; padding-right: 0.5em; } /* Clickable Elements */ .clickable-project { cursor: pointer; border-left: 2px solid transparent; padding-left: 0.3em; } /* No-break Text Spans */ .no-break { white-space: nowrap; } /* Open Row Styling */ #project-table tr.open td { font-weight: bold; background: var(--color-expanded-row); } #project-table tr.open .clickable-project, #project-table .details-row td { border-left: 2px solid var(--color-accent); } #project-table tr.open td, #project-table .details-row td { background: var(--color-expanded-row); } /* Details Row Styling */ #project-table .details-row td { background: var(--color-expanded-row); padding: 0 0.5rem 0.5rem 0.5rem; /* REDUCED bottom padding */ border-left: 2px solid var(--color-accent); animation: fadeIn .25s ease-in-out; } /* Add spacing between category and list */ #project-table .details-row td > ul { margin-top: 0.5em; } /* Add spacing between list and links */ #project-table .details-row td > a:first-of-type { margin-top: 0.5em; display: inline-block; } /* Link styling in details rows */ #project-table .details-row a { display: inline-block; margin-right: 8px; /* Add space between adjacent links */ margin-top: 6px; /* REDUCED from whatever it was */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Optional Highlight Class */ .highlight { background-color: var(--color-accent-alpha); } /* Project Description List Adjustments */ .project-desc-list { padding-left: 1em; /* Default is usually 2.5em or 40px */ margin-top: 0.5em; margin-bottom: 0.3em; /* REDUCED bottom margin */ } /* =================================================================== CARD GRID =================================================================== */ .card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { padding: 1.4rem 1.6rem; border: 1px solid var(--color-border); border-radius: 10px; background-color: var(--color-code-bg); transition: transform .15s ease, background-color .15s ease; height: 120px; } .card:link, .card:visited { color: inherit; text-decoration: none; } .card:hover { transform: translateY(-4px); box-shadow: 0 4px 0 var(--color-border-alpha); } .card h3 { margin: 0 0 .4rem; font-size: 1.15rem; } .card p { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.45; } .card a { color: var(--color-link); font-weight: 600; } .card-link { text-decoration: none; color: inherit; } /* =================================================================== HORIZONTAL IMAGE SCROLLER =================================================================== */ .image-scroller { display: flex; flex-direction: row; gap: 0.6em; overflow-x: auto; padding: 0em 0 1em 0; margin-bottom: 1.4em; scrollbar-width: none; /* Hide scrollbar for Firefox */ -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; max-width: 100%; } .image-scroller::-webkit-scrollbar { display: none; /* Hide scrollbar for WebKit browsers */ } .image-scroller-img { max-height: 200px; width: auto; border-radius: 8px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06); display: block; object-fit: contain; /* Preserve aspect ratio without cropping */ } .image-scroller-item { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; } /* =================================================================== PAGE HORIZONTAL SCROLLER =================================================================== */ #page-scroll-container { display: flex; flex-direction: row; width: 100vw; height: 100vh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .page-section { flex: 0 0 100vw; height: 100vh; scroll-snap-align: start; overflow-y: auto; /* Optional: add padding or background as needed */ } /* Hide scrollbars for horizontal scroll container */ #page-scroll-container::-webkit-scrollbar { display: none; } #page-scroll-container { scrollbar-width: none; -ms-overflow-style: none; } /* =================================================================== MUSIC IFRAME =================================================================== */ .music-iframe { border: 1px solid var(--color-border); border-radius: 6px; margin-top: 0.5em; margin-bottom: 0.2em; background: var(--color-code-bg); display: block; } .music-iframe-caption { font-size: 0.95em; color: var(--color-muted); margin-bottom: 1.2em; margin-top: 0.2em; text-align: left; font-family: inherit; line-break: anywhere; word-break: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .music-iframe-caption a { color: var(--color-link); text-decoration: underline; font-weight: 500; margin-right: 0.5em; } .music-iframe-caption a:last-child { margin-right: 0; } /* =================================================================== TIMELINE LIST =================================================================== */ .profile-timeline { list-style: none; padding: 0; margin: 0 0 2rem; } .profile-timeline li { margin: .4rem 0; line-height: 1.4; } .profile-timeline .year, .profile-year-narrow { display: inline-block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .profile-timeline .year { width: 6.2rem; } .profile-year-narrow { width: 0em; min-width: 4.2rem; } /* =================================================================== COMPACT LIST =================================================================== */ .compact-list { margin: 0 0 1.2em 0; padding: 0; list-style: none; } .compact-list li { margin: 0.15em 0 0.15em 0; line-height: 1.35; padding: 0; } /* =================================================================== DARK MODE OVERRIDES =================================================================== */ @media (prefers-color-scheme: dark) { :root { --link-blue: #8ec4ff; --link-blue-dark: #b3d5ff; --link: var(--link-blue); --color-expanded-row: #292b31; /* Ensure variable is set for auto dark mode */ --color-fg: #e2e2e3; } body { background: #1c1c1e; color: #e2e2e3; } a { color: var(--color-link); } a:hover { color: var(--color-link); opacity: 0.85; } nav { background: #2c2c2e; border-bottom-color: #3a3a3c; } nav a { color: var(--color-fg); } nav a:hover, .nav-link.active { color: var(--color-highlight); } .hero h1, .hero p { color: #e2e2e3; } .cta-btn { background: var(--link); } iframe { border-color: #3a3a3c; } #project-table th { background: var(--color-table-header); color: #e2e2e3; } #project-table tr td { background: none; } #project-table tr.details-row td { background: var(--color-expanded-row); } #project-table tr.open td, #project-table .details-row td { background: var(--color-expanded-row); /* Use the variable for dark mode as well */ border-left-color: var(--color-accent); } #project-table tr.open .clickable-project { border-left-color: var(--color-accent); } .highlight { background-color: #244058; } .card { background: #2a2a2c; border-color: #3a3a3c; } .card:hover { box-shadow: 0 4px 0 var(--color-border-alpha); } } /* =================================================================== RESPONSIVE TYPOGRAPHY =================================================================== */ @media (max-width: 600px) { body { font-size: 0.9rem; } .container { padding: 0 0.3rem; margin: 60px 0 24px 0; max-width: 100vw; } .hero h1 { font-size: 1.8rem; margin-bottom: 0.5em; } .hero p { font-size: 0.95rem; line-height: 1.4; margin-bottom: 1.2em; } .sections h2, .card h3 { font-size: 1.3rem; } .card p { font-size: 0.85rem; } nav a { font-size: 1.05em; /* Slightly larger nav text on mobile too */ } #project-table, #project-table th, #project-table td { font-size: 0.92em; } .profile-main { font-size: 0.89em; } } /* =================================================================== SUBHEADING =================================================================== */ .subheading { font-size: 1.08em; font-weight: 600; margin-top: 0.7em; margin-bottom: 0.05em; color: var(--color-accent); letter-spacing: 0.01em; } /* Ensure images in .project-expanded-img-wrap are left-aligned, have no rounded corners, no shadows, and no margins or paddings. */ .project-expanded-img-wrap img { display: block; border-radius: 0; box-shadow: none; margin: 0; padding: 0; max-width: 100%; height: auto; text-align: left; } .project-expanded-img-wrap { text-align: left; margin: 0; padding: 0; } /* =================================================================== IMAGE MODAL =================================================================== */ .image-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; } .image-modal-content { position: relative; text-align: center; } .image-caption { font-size: 1rem; color: #fff; margin-top: 10px; } .image-modal .close-btn { background: #fff; color: #000; border: none; padding: 0.5em 1em; cursor: pointer; border-radius: 5px; margin-top: 10px; /* Position below the caption */ display: block; margin-left: auto; margin-right: auto; /* Center horizontally */ }