:root { --text-color: #ffffff; --border-color: rgba(255,255,255,0.1); --link-color: #a78bfa; --highlight-color: #a78bfa; --background-color: #050505; --light-background-color: rgba(255,255,255,0.05); --body-text-color: rgba(255,255,255,0.7); --nav-bg: rgba(5,5,5,0.8); --card-border-color: rgba(255,255,255,0.1); --card-shadow-color: rgba(0,0,0,0.4); --divider-color: rgba(255,255,255,0.1); } /* Light mode — toggled via the switch in the navbar (data-theme="light" on , persisted in localStorage). Dark, above, stays the default look. */ :root[data-theme="light"] { --text-color: #111111; --border-color: rgba(0,0,0,0.1); --link-color: #7c3aed; --highlight-color: #7c3aed; --background-color: #f5f5f5; --light-background-color: rgba(255,255,255,0.85); --body-text-color: #444444; --nav-bg: rgba(245,245,245,0.8); --card-border-color: rgba(0,0,0,0.08); --card-shadow-color: rgba(0,0,0,0.1); --divider-color: rgba(0,0,0,0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth } body { padding: 0 50px; font-family: 'Inter', sans-serif; color: var(--text-color); background-color: var(--background-color); max-width: 1400px; margin: 0 auto; } a { color: var(--link-color); text-decoration: none; } h1 { color: var(--text-color); font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2rem, 3.4vw, 3rem); } h2 { color: var(--text-color); font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.5rem, 2.4vw, 1.875rem); } h3 { font-weight: 500; font-family: 'Inter', sans-serif; color: var(--text-color); font-size: clamp(1.125rem, 1.5vw, 1.25rem); } span { color: var(--text-color); } p { color: var(--body-text-color); font-size: 17px; line-height: 1.625; margin-bottom: 1em; padding: 0; } /* NAVBAR */ nav { display: grid; grid-template-columns: 1fr auto 1fr; padding: 18px 0; height: auto; align-items: center; position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); transition: background-color .25s ease; margin: 0 -50px; padding-left: 50px; padding-right: 50px; } nav .left { grid-column: 1; } nav .left a { display: flex; align-items: center; gap: 10px; color: var(--text-color); font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: 0.05em; } nav .left .avatar-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d5c8ff, var(--link-color)); flex-shrink: 0; display: inline-block; } nav .right.desktop-nav { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 15px; } nav .right a { color: var(--link-color); font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid rgba(140,108,255,0.45); padding: 8px 18px; border-radius: 100px; transition: color .2s, background-color .2s, border-color .2s; } nav .right a:hover, nav .mobile-nav a.resume-pill-link:hover { color: var(--text-color); background-color: rgba(140,108,255,0.12); border-color: var(--link-color); } /* Theme toggle — fixed to the bottom-right corner, same as the home page. Lit/warm in light mode, plain outline in dark mode. */ .lamp-toggle{ position:fixed; right:36px; bottom:26px; z-index:60; width:64px; height:84px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:10px; background:none; border:none; padding:0; color:inherit; -webkit-tap-highlight-color:transparent; } .lamp-toggle:focus-visible{ outline:2px solid var(--link-color); outline-offset:6px; border-radius:12px; } .lamp-label{ white-space:nowrap; order:-1; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-color); background:var(--nav-bg); border:1px solid var(--border-color); border-radius:9999px; padding:4px 11px; backdrop-filter:blur(6px); opacity:.85; pointer-events:none; transition:opacity .3s ease; } .lamp-toggle svg{ width:44px; height:44px; overflow:visible; stroke:var(--text-color); transition:stroke .4s ease, transform .35s ease; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35)); } .lamp-glow{ opacity:0; transition:opacity .45s ease; } :root[data-theme="light"] .lamp-toggle svg{ stroke:#f5b93d; transform:scale(1.06); } :root[data-theme="light"] .lamp-glow{ opacity:.85; } .lamp-toggle:hover svg{ stroke:var(--link-color); } :root[data-theme="light"] .lamp-toggle:hover svg{ stroke:#f5b93d; } @media (max-width: 560px){ .lamp-toggle{ right:14px; bottom:14px; width:52px; height:52px; } .lamp-toggle svg{ width:36px; height:36px; } .lamp-label{ display:none; } } /* Navbar Mobile Menu Button */ nav .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; } nav .hamburger { display: block; width: 24px; height: 2px; /* Changed from 5px to 2px */ background: var(--text-color); position: relative; transition: background 0.2s; } nav .hamburger::before, nav .hamburger::after { content: ''; position: absolute; left: 0; /* Added to ensure proper alignment */ width: 24px; /* Made consistent with parent width */ height: 2px; background: var(--text-color); transition: transform 0.2s; } nav .hamburger::before { top: -8px; /* Adjusted spacing */ } nav .hamburger::after { bottom: -8px; /* Adjusted spacing */ } nav .mobile-nav { display: none; } /* SECTION 1: Hero */ .hero-section { padding: 0 50px; margin: 50px 0; display: flex; /* This makes .hero-section a flex container */ border: 2px solid var(--border-color); border-image: linear-gradient( 45deg, var(--border-color) 1%, transparent 1%, transparent 99%, var(--border-color) 99% ) 1; } .hero-section .group { display: flex; justify-content: space-between; align-items: center; padding: 0; gap: 40px; border-radius: 8px; } .hero-section .text { flex: 5; } .hero-section .text h2 { font-size: 50px; } .hero-section .text .external-links i { font-size: 20px; padding: 0 5px; color: var(--text-color); } .hero-section .text h3 { font-size: 18px; color: var(--text-color); } .hero-section .text p { margin-top: 15px; font-size: 15px; padding: 0px; color: var(--text-color); } .hero-section .text .links { margin-top: 25px; } .hero-section .text .links a { display: inline-block; padding: 5px 10px; color: var(--link-color); border: 2px solid var(--link-color); border-radius: 5px; margin-right: 10px; margin-bottom: 10px; transition: 0.1s; } .hero-section .text .links a span { color: var(--link-color); } .hero-section .text .links a:hover, .hero-section .text .links a:hover span { color: var(--text-color); } .hero-section .headshot { flex: 3; display: flex; justify-content: right; } .hero-section .headshot img { width: 400px; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; } /* NAVIGATION ARROW */ .arrow{ margin-top: 125px; margin-bottom: 300px; display: flex; justify-content: center; } .arrow a { font-size: 20px; color: var(--link-color); display: inline-block; /* This makes .hero-section a flex container */ align-items: center; border: 2px solid var(--link-color); border-radius: 15px; padding: 10px 20px; text-align: center; } .arrow a > * { display: block; margin: 0 auto; } .arrow a:hover { color: var(--text-color); border: 2px solid var(--text-color) } /*SECTION 2: PROJECT GRID */ .project-grid-section { margin-bottom: 100px; margin-top: 50px; display:flex; flex-direction: column; justify-content: center; } .project-grid-section h2{ font-size: 34px; margin-bottom: 10px; padding: 0 10px; } .project-grid-section .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 25px; width: 100%; margin: 0 auto; align-items: stretch; } .project-grid-section .project-link { text-decoration: none; color: inherit; display: inline-block; } .project-grid-section .grid-container .project-link .project-card { display: flex; flex-direction: column; width: 100%; height: 100%; /* Take full height of grid cell */ box-sizing: border-box; padding: 15px; background: var(--light-background-color); box-shadow: none; border-radius: 14px; border: 1px solid var(--border-color); transition: all 0.25s ease; overflow: hidden; } .project-grid-section .grid-container .project-link:hover .project-card { border-color: rgba(140,108,255,0.45); transform: translateY(-2px); } .project-card img { width: 100%; max-width: 100%; aspect-ratio: 3/1; object-fit: cover; display: block; border-radius: 6px; margin-bottom: 10px; } .project-card .project-title { font-size: 1.4em; text-decoration: none; transition: color 0.3s ease; margin-bottom: 10px } .project-card .project-title:hover { text-decoration: underline; } .project-card .project-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; } .project-card .project-skills .skill { padding: 0 6px; border-radius: 10px; font-size: 0.9em; background-color: var(--light-background-color); color: var(--link-color); white-space: nowrap; } .project-card .project-description { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4px; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 1.5; max-height: calc(1.5em * 4); } .project-card .read-more { background-color: transparent; border: none; color: var(--highlight-color); cursor: pointer; font-size: 0.9em; margin-top: 5px; text-align: start; } .project-card .read-more:hover { text-decoration: underline; } /* SECTION 3: SKILLS */ .skills-section { margin-bottom: 100px; display:flex; flex-direction: column; } .skills-section h2 { font-size: 34px; margin-bottom: 15px; } .skills-section .skill-categories { list-style: none; padding-left: 0; } .skills-section .skill-categories .skills-card span{ margin-bottom: 10px; } .skills-section .skill-categories .skills-card { margin-bottom: 15px; padding: 15px; border-radius: 15px; border: 1px solid var(--card-border-color); box-shadow: 0 4px 6px -1px var(--card-shadow-color), 0 2px 4px -1px var(--card-shadow-color); } .skills-section .skill-categories .category-label { font-size: 20px; display: grid; font-weight: 600; } .skills-section .skill-categories .skills-list { display: flex; flex-wrap: wrap; padding-left: 0; margin-right: 10px; gap: 8px; } .skills-section .skill-categories .skill { display:flex; justify-content: center; align-items: center; padding: 3px 8px; background-color: var(--light-background-color); color: var(--link-color); border-radius: 10px; font-size: 14px; } /* SECTION 4: CONTACT */ .contact-section { padding: 25px 25px; max-width: 600px; margin: 0 auto; border-radius: 20px; margin-bottom: 100px; } .contact-section h2 { font-size: 34px; text-align: center; } .contact-section .group { display: flex; } .contact-section .group .text { flex:3; } .contact-section .group form { flex:3; display: flex; flex-direction: column; color:var(--text-color) } .contact-section .group form input, .contact-section .group form textarea { font-family: 'Poppins', sans-serif; background-color: transparent; border: 1px groove var(--text-color); padding:5px; margin-bottom: 10px; outline: none; resize: none; font-size: 13px; } .contact-section .group form button { font-size: 16px; font-family: 'Poppins', sans-serif; color: #fff; background-color: var(--link-color); border:none; height: 50px; cursor: pointer; transition: 0.1s } /* FOOTER */ footer { padding: 0; font-size: 12px; text-align: center; min-height: 150px; flex-shrink: 0; background-color: var(--light-background-color); width: 100vw; position: relative; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: space-between; align-items: center; } footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to bottom, var(--divider-color), transparent); } footer .footer-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } footer .links { margin-bottom: 20px; } footer .links a { color: var(--text-color); font-size: 20px; margin: 0 30px; } footer .links a:hover { color: var(--link-color); } footer .license { display: flex; flex-direction: column; flex-wrap: wrap; text-align: center; gap: 0; /* Changed from 10px to 0 */ } footer span, p { word-wrap: break-word; overflow-wrap: break-word; white-space: normal; max-width: 100%; margin: 0; /* Added to remove default margins */ } footer p { font-size: 12px; margin: 0; /* Changed from 5px 0 0 to 0 */ } /* PROJECT POST VIEW */ .post-view { max-width: 1140px; margin: 25px auto; border: 1px solid var(--border-color); background: var(--light-background-color); box-shadow: none; border-radius: 16px } .post-view .summary{ padding: 25px 50px; } .post-view .title-header { width: 100%; display: flex; } .post-view .title-header h1 { line-height: normal; margin-bottom: 10px; } .post-view .project-links { margin-bottom: 18px; } .post-view .project-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95em; font-weight: 600; color: var(--text-color); background-color: var(--background-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 14px; transition: border-color 0.2s ease, color 0.2s ease; } .post-view .project-links a:hover { color: var(--link-color); border-color: var(--link-color); } .post-view .summary img { width: 100%; height: 100%; /* Changed to 100% to fill the container */ object-fit: cover; border-radius: 6px; aspect-ratio: 3/1; margin-bottom: 10px; } .post-view .summary .project-description { margin-bottom: 10px; } .post-view .summary .skills-card { display: flex; flex-direction: column; gap: 5px; } .post-view .summary .skills-list { display: flex; flex-wrap: wrap; justify-content: start; gap: 5px; } .post-view .summary .skill { background-color: rgba(140,108,255,0.1); border: 1px solid rgba(140,108,255,0.35); color: var(--link-color); border-radius: 9999px; padding: 6px 14px; font-size: 0.9em; font-weight: 500; } .post-view .content { padding: 0 50px; border-radius: 10px; } .post-view .content .image-gallery { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; width: 100%; gap: 16px; margin: 1.2em 0; } /* Captions — the markdown always writes a small right after the image gallery / video embed; kramdown wraps it in its own

, so centre that paragraph rather than the span itself. */ .post-view .content .image-gallery + p, .post-view .content .youtube-container + p { text-align: center; /* Captions are single-line, and text-align-last (set to "left" on the general paragraph rule below, for justified body text) takes over alignment for a block's one-and-only line — override it back here or captions would render left-aligned despite text-align: center. */ text-align-last: center; margin-top: -0.6em; } /* Some case-study pages write figure captions as raw HTML instead of the image-gallery include — a

wrapping an and a

. text-align is inherited, but the general paragraph rule above matches the

directly (a specified value always beats an inherited one), so it forces justify unless overridden back here. The caption's own inline style also hardcodes color:#666 — legible on the light page these were originally written for, nearly invisible on our dark panel — so that needs an !important override, inline styles beat any external rule otherwise. */ .post-view .content div[style*="text-align: center"] p { text-align: center; text-align-last: center; color: var(--body-text-color) !important; } .post-view .content .image-gallery img { flex: 1 1 260px; min-width: 0; max-height: var(--gallery-height); width: 100%; object-fit: contain; background: var(--background-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; } .post-view .content a { color: var(--link-color); text-decoration: none; transition: color 0.3s ease; margin-bottom: 1em; } .post-view .content p { margin-bottom: 1.4em; text-align: justify; text-align-last: left; hyphens: auto; } .post-view .content h2 { margin-top: 0.5em; margin-bottom: 0.6em; } .post-view .content h3 { margin-top: 1.3em; margin-bottom: 0.5em; } .post-view .summary .project-description p { text-align: justify; text-align-last: left; hyphens: auto; } .post-view .content a:hover { color: #a78bfa; text-decoration: underline; } .post-view .content ul, .post-view .content ol { padding-left: 22px; margin: 1em 0; } .post-view .content li { color: var(--body-text-color); font-size: 17px; line-height: 1.7; margin-bottom: 0.4em; text-align: justify; text-align-last: left; hyphens: auto; } .post-view .content blockquote { border-left: 4px solid var(--link-color); margin: 1em 0; padding: 10px 20px; background-color: rgba(140,108,255,0.07); color: var(--text-color); font-size: clamp(0.9rem, 0.75rem + 0.4vw, 1.05rem); } .post-view .content hr { border: 0; height: 1px; background: var(--border-color); margin: 34px 0; } .post-view .content table { width: 100%; border-collapse: collapse; margin: 1em 0; background-color: var(--light-background-color); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; } .post-view .content th { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-color); background-color: rgba(140,108,255,0.08); color: var(--text-color); font-size: clamp(0.85rem, 0.7rem + 0.4vw, 1rem); } .post-view .content td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-color); color: var(--text-color); font-size: clamp(0.85rem, 0.7rem + 0.4vw, 1rem); } .youtube-container { width: 100%; max-width: var(--max-width); margin: 0 ; padding: 5px } /* Case-study pages: ignore the per-embed width param and always fill the content column, so videos line up with the paragraphs above/below them. */ .post-view .content .youtube-container { max-width: 100%; margin: 1.2em 0; } .youtube-aspect-ratio { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ } .youtube-aspect-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Responsive styles */ @media (max-width: 1200px){ body{ padding: 0 20px; } /* SECTION 1:HERO */ .hero-section { padding: 0 20px; border: none; } .hero-section .group{ flex-direction: column-reverse; text-align: center; } .hero-section .headshot img{ width: 300px; justify-content: center } .hero-section .text h2 { font-size: 35px; } /* Section 2: Project-grid */ .project-grid-section .grid-container .project-card { max-width: 500px; height: 500px; margin: 0 auto; } } @media (max-width: 768px) { /* NEVBAR*/ .desktop-nav { display: none; } nav .menu-toggle { display: block; } .menu-toggle { display: block; } .mobile-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--light-background-color); flex-direction: column; border-top: 1px solid var(--border-color); border-radius: 0 0 10px 10px; z-index: 1000; } .mobile-nav.active { display: flex; } .mobile-nav a { color: var(--text-color); font-size: 20px; padding: 5px; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 50px; } .menu-toggle.active .hamburger { background: transparent; } .menu-toggle.active .hamburger::before { transform: rotate(45deg); top: 0; } .menu-toggle.active .hamburger::after { transform: rotate(-45deg); bottom: 0; } /*SECTION 1: Hero */ .hero-section .group .text h2 { flex-direction: column-reverse; display: flex; font-size: 40px; } .hero-section .group .text h2 .external-links i { font-size: 16px; /* Example: reducing icon size */ margin: 0 } .arrow { display: none; } .project-grid-section .grid-container { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /*SECTION 4:Contact */ .contact-section .group{ flex-direction: column; } footer { padding: 0 35px } footer .links a { font-size: 15px; margin: 0 15px; } footer .links { margin-bottom: 10px; } /* Project Post Page */ .post-view { margin: 0; } .post-view .content { padding: 0 5px; margin: 0 } .post-view .summary{ padding: 5px 5px; } .post-view.image-gallery { column-gap: 5px; row-gap: 5px; } .video-container { margin:0 auto; } } @media (max-width: 600px){ body{ padding: 0 10px; } /*SECTION 1:HERO */ .hero-section { padding: 0 20px } .hero-section .text h2 { font-size: 30px } .hero-section .text .links a { font-size: 13px; padding: 5px; } .hero-section .headshot img{ width: 275px; justify-content: center } /*SECTION 3:Skills */ .skills-section { padding: 0 5px } .skills-section span { font-size: 16px; } /*SECTION 4: Contact */ .contact-section{ padding: 0 20px } .post-view { margin: 5px; border: none; box-shadow: none } .post-view .content { padding: 5px; } }