:root{ /* Light theme colors */ --bg: #f5f5f5; --card: #ffffff; --text: #222; --muted: #666; --accent: #3742fa; --accent-2: #2575fc; --nav-bg: #333; --header-grad-start: #6a11cb; --header-grad-end: #2575fc; --glass: rgba(255,255,255,0.6); --shadow: 0 6px 18px rgba(0,0,0,0.08); } /* Dark theme overrides (applied by .dark on ) */ body.dark{ --bg: #0f1115; --card: #0b0c0f; --text: #e6eef8; --muted: #9aa7bd; --accent: #6ad1ff; --accent-2: #8a5cff; --nav-bg: #0b0c0f; --header-grad-start: #0f1724; --header-grad-end: #1f2a44; --glass: rgba(255,255,255,0.03); --shadow: 0 10px 30px rgba(0,0,0,0.6); } /* Base */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition: background 300ms ease, color 300ms ease; line-height:1.5; } /* Header */ header{ background: linear-gradient(90deg, var(--header-grad-start), var(--header-grad-end)); color:white; padding:1.5rem 1rem; position:sticky; top:0; z-index:30; box-shadow: var(--shadow); } .header-inner{ display:flex; align-items:center; justify-content:space-between; max-width:1100px; margin:auto; } .title h1{font-size:1.4rem; margin:0} .title .subtitle{font-size:0.9rem; opacity:0.95} /* Theme toggle */ #theme-toggle{ background:transparent; border:1px solid rgba(255,255,255,0.15); color:white; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:1.1rem; transition: transform 180ms ease, background 180ms; } #theme-toggle:active{transform:translateY(1px)} .nav{ display:flex; gap:1rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; } .nav a{ color: white; text-decoration:none; font-weight:700; padding:6px 10px; border-radius:6px; } .nav a:hover{background:rgba(255,255,255,0.06)} /* Sections */ .section{ padding:3rem 1rem; max-width:1100px; margin:auto; } .container{max-width:1000px; margin:0 auto} h2{color:var(--accent); margin-bottom:0.8rem} .lead{margin-top:0.5rem; color:var(--muted)} /* Descriptor / typed text */ .descriptor{ margin-top:1rem; display:flex; align-items:center; gap:0.5rem; font-weight:600; font-size:1.1rem; } .descriptor-static{opacity:0.85} .typed{min-width:220px; display:inline-block} .cursor{ opacity:1; animation: blink 900ms infinite; } @keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}} /* Buttons & links */ a.resume-download, .btn{ display:inline-block; margin-top:1rem; padding:10px 18px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:white; border-radius:8px; text-decoration:none; box-shadow: 0 6px 18px rgba(59,89,255,0.14); } a.resume-download:hover, .btn:hover{transform:translateY(-3px); transition: transform 160ms} /* Projects grid, achievements */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem} ul{margin:0.6rem 0 1rem 1.2rem} /* Contact socials */ .socials img{width:34px; margin-right:10px; vertical-align:middle} /* Footer */ footer{padding:1.5rem 1rem; text-align:center; color:var(--muted)} /* Modal (welcome) */ .modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(rgba(5,6,10,0.45), rgba(5,6,10,0.45)); z-index:60; opacity:0; pointer-events:none; transition:opacity 260ms ease; } .modal[aria-hidden="false"]{ opacity:1; pointer-events:auto; } .modal-content{ width:min(680px,94%); background:var(--card); padding:2rem; border-radius:12px; box-shadow:var(--shadow); color:var(--text); position:relative; transform:translateY(20px); animation: popIn 420ms cubic-bezier(.2,.9,.2,1) forwards; } @keyframes popIn{to{transform:translateY(0)}} .modal h1{margin:0 0 0.6rem 0} .modal-sub{color:var(--muted); margin-bottom:1rem} .modal-close{ position:absolute; top:12px; right:12px; background:transparent; border:none; font-size:1.6rem; cursor:pointer; color:var(--muted); } .modal .btn{display:inline-block; margin-top:8px} /* Responsive */ @media (max-width:700px){ .header-inner{flex-direction:column; gap:8px; align-items:flex-start} .nav{justify-content:flex-start} } /* Small visual polish */ .section + .section{border-top:1px dashed rgba(0,0,0,0.04); padding-top:2rem} .container p{margin-bottom:0.6rem} /* Accessibility focus styles */ a:focus, button:focus { outline:3px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset:3px; border-radius:6px; } html { scroll-behavior: smooth; } /* Project Grid */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .project-card { background: var(--card, #fff); border-radius: 10px; padding: 1.2rem; box-shadow: 0 6px 16px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .project-card:hover { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(0,0,0,0.15); } .project-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--accent, #3742fa); } .project-card .tech { font-size: 0.9rem; color: var(--muted, #666); } /* Modal (reuse your existing modal style) */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 100; } .modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; } .modal-content { background: var(--card, #fff); padding: 2rem; border-radius: 12px; max-width: 700px; width: 90%; box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,0.2)); position: relative; } .modal-close { position: absolute; top: 12px; right: 12px; border: none; background: transparent; font-size: 1.8rem; cursor: pointer; color: var(--muted, #666); }