/* Base Theme: Dark Neon with subtle dotted background and glow accents */ :root { --bg: #0b0f16; --bg-2: #0f1624; --surface: #0e1420; --text: #dbe4ff; --muted: #93a0b8; --accent: #7cfcff; --accent-2: #a855f7; --danger: #ff6b6b; --success: #29f3a3; --ring: rgba(124, 252, 255, 0.5); --shadow: 0 10px 40px rgba(0,0,0,0.45); --radius: 14px; --dot-color: rgba(255,255,255,0.055); --dot-size: 1px; --dot-gap: 24px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: radial-gradient(1200px 1200px at 10% -10%, rgba(124,252,255,0.06), transparent 60%), radial-gradient(1200px 1200px at 90% 0%, rgba(168,85,247,0.06), transparent 60%), var(--bg); position: relative; } /* Replace previous pattern overlay with unified after-layer */ body::before { content:none !important; } body::after { content:none !important; } #halftone-bg { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } .site-header, .hero, .section, footer { position:relative; z-index:1; } /* Optional denser variant (can be toggled by adding class .dense-dots to ) */ body.dense-dots::after { --dot-gap:18px; --dot-color: rgba(255,255,255,0.06); opacity:.6; } /* Light mobile pattern for readability */ @media (max-width:600px) { body::after { opacity:.38; --dot-gap:28px; } } /**************** Utilities ****************/ .container { width: min(1100px, 92%); margin: 0 auto; } .section { padding: clamp(60px, 6vw, 96px) 0; position: relative; } .section-title { font-size: clamp(28px, 2.8vw, 40px); margin: 0 0 24px; letter-spacing: 0.5px; } .lead { color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; } .eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; margin: 0 0 10px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(50%); clip: rect(0 0 0 0); overflow: hidden; } .skip-link { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus { left:16px; top:16px; width:auto; height:auto; background:#111927; color:white; padding:8px 12px; border-radius:8px; } .btn { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; text-decoration:none; color:var(--text); border:1px solid rgba(255,255,255,0.08); transition: all .2s ease; backdrop-filter: blur(4px); } .btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.16); } .btn-primary { background: linear-gradient(135deg, rgba(124,252,255,0.15), rgba(168,85,247,0.15)); box-shadow: 0 0 0 2px rgba(124,252,255,0.15), 0 10px 40px rgba(124,252,255,0.08); } .btn-primary:hover { box-shadow: 0 0 0 2px rgba(124,252,255,0.25), 0 16px 50px rgba(124,252,255,0.12); } .btn-ghost { background: rgba(255,255,255,0.08) !important; } .btn-icon { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); transition:transform .2s ease; } .btn-icon:hover { transform: translateY(-2px); } .chip { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); color:var(--text); padding:8px 14px; border-radius:999px; cursor:pointer; transition: all .2s ease; } .chip.active, .chip:hover { border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring) inset; } .dot-grid { background: url("data:image/svg+xml;utf8,") repeat; } .progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent-2); z-index: 999; } /**************** Header ****************/ .site-header { position: sticky; top: 0; background: rgba(11,15,22,0.6); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.06); z-index: 99; } .nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 0; } .brand { display:inline-flex; align-items:center; font-weight:600; font-size:18px; letter-spacing:.3px; text-decoration:none; color:var(--text); padding:4px 4px 4px 0; } .brand-name { font-weight:600; } .brand-accent { color:var(--accent); font-weight:700; } .brand:hover .brand-accent { text-shadow:0 0 6px rgba(124,252,255,0.45); } .nav-list { list-style:none; display:flex; align-items:center; gap:12px; margin:0; padding:0; } .nav-list a { color: var(--text); text-decoration:none; padding:10px 12px; border-radius:10px; } .nav-list a:hover { background: rgba(255,255,255,0.04); } .nav-toggle { display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } @media (max-width: 820px) { .nav-toggle { display:block; } .nav-list { position: fixed; right: 16px; top: 66px; background: #0b0f16; padding: 12px; border-radius: 12px; border:1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow); display: none; flex-direction: column; } .nav-list.open { display:flex; } } /**************** Hero ****************/ .hero { min-height: 86vh; display:flex; align-items:center; justify-content:center; text-align:center; } .hero-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items:center; } .glow-title { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.08; margin: 6px 0 12px; text-shadow: 0 0 20px rgba(124,252,255,0.13), 0 0 50px rgba(168,85,247,0.14); } .cta-row { display:flex; align-items:center; flex-wrap: wrap; gap: 12px; margin: 20px 0 14px; } .socials { display:flex; gap: 10px; padding:0; margin: 8px 0 0; list-style:none; } .socials img { width: 22px; height: 22px; } .socials { gap: 14px; } .social-icon, .project-icon { width:42px; height:42px; padding:10px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; line-height:0; overflow:hidden; } .social-icon svg, .project-icon svg { width:20px; height:20px; display:block; flex-shrink:0; } .social-icon:hover, .project-icon:hover { transform: translateY(-1px); } .project-links { gap:8px; } /* Remove previous strong glow */ .social-icon { box-shadow:none !important; } .bg-orb { position:absolute; filter: blur(60px); opacity: .6; pointer-events:none; } .orb-a { width: 420px; height: 420px; background: radial-gradient(circle at 30% 30%, rgba(124,252,255,.35), transparent 60%); top: -60px; left: -60px; } .orb-b { width: 520px; height: 520px; background: radial-gradient(circle at 70% 30%, rgba(168,85,247,.35), transparent 60%); right: -100px; top: 80px; } .card-3d { perspective: 1000px; } .card-3d-inner { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transform: rotateX(0) rotateY(0); transition: transform .2s ease; } .avatar { all: unset; } .hero-avatar { --ph-size:300px; position:relative; width:var(--ph-size); max-width:62vw; margin:0 auto 28px; } .hero-photo-shell { position:relative; display:inline-block; } .hero-photo-shell::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%); box-shadow:0 0 10px -2px var(--accent), 0 0 20px -4px var(--accent-2); animation: neonBar 6s linear infinite; } .hero-photo { width:100%; height:auto; display:block; border-radius:20px; border:none; box-shadow:0 10px 34px -14px rgba(0,0,0,0.75); } @keyframes neonBar { 0% { filter:hue-rotate(0deg) brightness(1); } 50% { filter:hue-rotate(40deg) brightness(1.15); } 100% { filter:hue-rotate(0deg) brightness(1); } } @media (max-width:600px){ .hero-avatar { --ph-size:240px; } } .hero-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 0; padding:0; list-style:none; } .hero-stats li { background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 10px; text-align:center; } .hero-stats .stat { font-weight: 900; font-size: 22px; color: var(--accent); text-shadow: 0 0 10px rgba(124,252,255,0.5); } .hero-stats .label { color: var(--muted); font-size: 12px; } .hero-center { display:flex; flex-direction:column; align-items:center; gap: 8px; } .hero-avatar-wrap { margin-bottom: 10px; } .ring-glow { box-shadow: 0 0 0 2px rgba(124,252,255,0.15), 0 0 60px rgba(124,252,255,0.12), 0 0 60px rgba(168,85,247,0.12) inset; } .hero-roles { font-size: clamp(16px, 1.4vw, 20px); margin: 0 0 6px; } .role { color: var(--accent); font-weight: 700; } .type-caret { position: relative; } .type-caret::after { content: ""; display:inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 4px; animation: blink 1s step-end infinite; vertical-align: -2px; } @keyframes blink { 50% { opacity: 0; } } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } } /**************** About ****************/ .about-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .about-card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.08); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); } .pill-list { display:flex; flex-wrap: wrap; gap:8px; padding:0; margin:12px 0 0; list-style:none; } .pill-list li { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: 6px 10px; border-radius: 999px; } .checklist { padding-left: 18px; margin: 10px 0 0; color: var(--muted); } .checklist li { margin: 6px 0; } .about-layout { display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; } .muted { color: var(--muted); } @media (max-width: 980px) { .about-grid { grid-template-columns: 1fr; } .about-layout { grid-template-columns: 1fr; } } /**************** Projects ****************/ .section-head { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; } .projects-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .project-card { display:flex; align-items:stretch; gap:0; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; } /* Media pane occupies full card height (left side) */ .project-media { position:relative; background:#0e1420; flex:0 0 220px; width:220px; min-width:180px; display:block; overflow:hidden; min-height:160px; } .project-media::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg, rgba(124,252,255,0.08), rgba(168,85,247,0.08)); mix-blend-mode:overlay; pointer-events:none; } .project-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:.95; } @media (max-width:900px){ .project-media { flex:0 0 200px; width:200px; min-width:150px; } } @media (max-width:740px){ .project-media { flex:0 0 150px; width:150px; min-width:130px; } } /* Description clamp & layout balancing */ .project-desc { margin:0 0 10px; flex:0 0 auto; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .tags { margin-top:auto; } /* Stack vertically on narrow screens */ @media (max-width:640px){ .project-card { flex-direction:column; } .project-media { width:100%; flex:0 0 auto; height:180px; } .project-card { min-height:auto; } .project-desc { -webkit-line-clamp: unset; line-clamp: unset; overflow:visible; } } .project-content { padding: 14px 18px 38px; position:relative; flex:1 1 auto; display:flex; flex-direction:column; } .project-content h3 { margin: 6px 0 8px; } .project-content { position:relative; } .project-date { position:absolute; right:14px; bottom:12px; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); background:rgba(255,255,255,0.05); padding:4px 8px; border:1px solid rgba(255,255,255,0.10); border-radius:8px; backdrop-filter: blur(4px); } .tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin: 12px 0 0; list-style:none; } .tags li { font-size:12px; color:var(--muted); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); padding:4px 8px; border-radius:999px; white-space:normal; overflow-wrap:break-word; word-break:normal; hyphens:auto; } .project-links { display:flex; gap:10px; margin-top: 12px; } /* Passions ribbon */ .passions-ribbon { position:relative; margin: 0 0 40px; padding:10px 0; background: linear-gradient(90deg, rgba(124,252,255,0.07), rgba(168,85,247,0.07)); border-top:1px solid rgba(255,255,255,0.10); border-bottom:1px solid rgba(255,255,255,0.10); overflow:hidden; z-index:2; isolation:isolate; } .passions-track { display:flex; flex-wrap:nowrap; gap:34px; font-size:13px; align-items:center; justify-content:flex-start; white-space:nowrap; } .passion { display:inline-flex; align-items:center; gap:8px; color:var(--muted); position:relative; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(4px); } .passion strong { font-weight:600; color:var(--text); } .passion .detail { font-size:11px; opacity:.75; letter-spacing:.3px; } @media (max-width:640px){ .passions-track { gap:26px; font-size:12px; } .passion { padding:4px 8px; } } /* Removed old marquee animation classes now that ribbon is static */ @media (max-width: 1080px) { .projects-grid { grid-template-columns: 1fr; } } /**************** Contact ****************/ .contact-form { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .form-row { display:flex; flex-direction:column; gap:8px; margin: 10px 0; } label { color: var(--muted); font-size: 13px; } input, textarea { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--text); padding: 12px 12px; font-size: 14px; outline: none; } input:focus, textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring); } .error { color: var(--danger); min-height: 14px; font-size: 12px; } .form-actions { display:flex; align-items:center; gap: 16px; justify-content: space-between; } .form-note { color: var(--muted); margin: 0; } .form-status { color: var(--success); min-height: 20px; } /**************** Footer ****************/ .site-footer { display:flex; align-items:center; justify-content:space-between; padding: 36px 0 80px; color: var(--muted); } .back-to-top { color: var(--text); text-decoration:none; border: 1px dashed rgba(255,255,255,0.12); padding: 8px 12px; border-radius: 10px; } /**************** Animations ****************/ .reveal { opacity: 0; transform: translateY(14px); } .reveal.is-visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; } /* Magnetic hover */ [data-magnetic] { position: relative; } [data-magnetic] span { position: relative; z-index: 2; } [data-magnetic]::after { content: ""; position:absolute; inset: 0; background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 50%), rgba(124,252,255,0.18), transparent 60%); opacity: 0; transition: opacity .2s ease; border-radius: inherit; } [data-magnetic]:hover::after { opacity: 1; } /* Scrollbar */ * { scrollbar-color: rgba(124,252,255,0.4) transparent; scrollbar-width: thin; } /* Focus visibility for keyboard users */ :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } button:focus-visible, a:focus-visible { box-shadow:0 0 0 3px rgba(124,252,255,0.35); } /* Slightly stronger muted text on gradient surfaces for contrast */ .passions-ribbon .passion .detail, .muted { color: rgba(220,230,245,0.78); } ::-webkit-scrollbar { height: 10px; width: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent), var(--accent-2)); border-radius: 999px; } /* Readability adjustments: stronger surfaces */ .card-3d-inner, .about-card, .project-card, .contact-form { background: linear-gradient(180deg, rgba(20,24,32,0.78), rgba(15,19,27,0.72)) !important; border: 1px solid rgba(255,255,255,0.10) !important; backdrop-filter: blur(6px) brightness(1.05); } /* Buttons */ .btn-ghost { background: rgba(255,255,255,0.08) !important; } .btn { border-color: rgba(255,255,255,0.12); } .btn:hover { border-color: rgba(255,255,255,0.2); } /* Pills & tags slightly more solid */ .pill-list li, .tags li, .hero-stats li, .mini-card { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.12) !important; } /* Optional subtle overlay behind main sections to further reduce dot distraction */ .section::before, .hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:rgba(11,15,22,0.28); z-index:0; } .hero-center, .about-layout, .projects-grid, .contact-form { position:relative; z-index:1; } /* --- Icon Style v2: minimalist circular glass buttons --- */ .icon-set-v2 .social-icon, .icon-set-v2 .project-icon, .social-icon.v2, .project-icon.v2, /* fallback apply universally for now */ .social-icon, .project-icon { width:38px; height:38px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; gap:0; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:rgba(210,230,255,0.78); box-shadow:0 2px 4px -2px rgba(0,0,0,0.4), 0 4px 18px -8px rgba(0,0,0,0.6); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); transition:background .35s ease, color .35s ease, transform .3s ease, border-color .35s ease, box-shadow .35s ease; } .social-icon svg, .project-icon svg { width:18px; height:18px; stroke-width:1.9; } .social-icon:hover, .project-icon:hover { background:linear-gradient(145deg, rgba(124,252,255,0.18), rgba(168,85,247,0.18)); border-color:rgba(124,252,255,0.25); color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 10px -4px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,252,255,0.25); } .social-icon:active, .project-icon:active { transform:translateY(0); background:rgba(124,252,255,0.12); } .social-icon:focus-visible, .project-icon:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } /* Muted variant until hover (optional toggle via .icons-muted on parent) */ .icons-muted .social-icon, .icons-muted .project-icon { color:rgba(180,200,220,0.6); } .icons-muted .social-icon:hover, .icons-muted .project-icon:hover { color:var(--accent); } /* Remove previous overrides that forced width/height/padding if conflicting */ .socials { gap:12px; } /* --- End Icon Style v2 --- */