Spaces:
Sleeping
Sleeping
| /* ========================================================= | |
| Kartik Kumar Portfolio v2 — style.css | |
| Glassmorphism · Dark Noir · Premium UI with Real Photo | |
| ========================================================= */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #030712; | |
| --bg2: #060d24; | |
| --glass: rgba(255,255,255,0.04); | |
| --glass-b: rgba(255,255,255,0.07); | |
| --border: rgba(255,255,255,0.09); | |
| --accent: #38bdf8; | |
| --accent2: #818cf8; | |
| --accent3: #f472b6; | |
| --gold: #fbbf24; | |
| --text: #e2e8f0; | |
| --muted: #94a3b8; | |
| --white: #ffffff; | |
| --font: 'Poppins', sans-serif; | |
| --mono: 'Space Mono', monospace; | |
| --radius: 18px; | |
| --shadow: 0 8px 40px rgba(0,0,0,0.5); | |
| --tr: 0.35s cubic-bezier(0.4,0,0.2,1); | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font); | |
| overflow-x: hidden; | |
| cursor: none; | |
| } | |
| a { color: inherit; text-decoration: none; } | |
| /* SCROLLBAR */ | |
| ::-webkit-scrollbar { width: 5px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent2), var(--accent)); border-radius: 3px; } | |
| /* ── CURSOR ─────────────────────────────────────────── */ | |
| .cursor { | |
| position: fixed; top:0; left:0; | |
| width:10px; height:10px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| pointer-events: none; z-index: 9999; | |
| mix-blend-mode: difference; | |
| transform: translate(-50%,-50%); | |
| transition: transform .08s ease; | |
| } | |
| .cursor-ring { | |
| position: fixed; top:0; left:0; | |
| width:34px; height:34px; | |
| border: 1.5px solid var(--accent); | |
| border-radius: 50%; | |
| pointer-events: none; z-index: 9998; | |
| transform: translate(-50%,-50%); | |
| transition: all .2s ease; | |
| opacity:.55; | |
| } | |
| body:hover .cursor-ring { opacity: .7; } | |
| /* ── NAVBAR ─────────────────────────────────────────── */ | |
| .navbar { | |
| position: fixed; top:0; left:0; right:0; z-index:200; | |
| padding: 20px 0; | |
| transition: var(--tr); | |
| } | |
| .navbar.scrolled { | |
| background: rgba(3,7,18,.88); | |
| backdrop-filter: blur(24px); | |
| border-bottom: 1px solid var(--border); | |
| padding: 13px 0; | |
| box-shadow: 0 4px 30px rgba(0,0,0,.5); | |
| } | |
| .nav-inner { | |
| max-width: 1200px; margin: 0 auto; padding: 0 32px; | |
| display: flex; align-items: center; gap: 28px; | |
| } | |
| .nav-logo { | |
| font-family: var(--mono); font-size: 1.45rem; font-weight: 700; | |
| color: var(--white); margin-right: auto; letter-spacing: -1px; | |
| } | |
| .nav-logo .dot { color: var(--accent); } | |
| .nav-links { list-style: none; display: flex; gap: 4px; } | |
| .nav-links a { | |
| font-size: .86rem; font-weight: 500; padding: 7px 15px; | |
| border-radius: 8px; color: var(--muted); transition: var(--tr); position: relative; | |
| } | |
| .nav-links a::after { | |
| content: ''; position: absolute; bottom: 4px; left: 50%; | |
| width: 0; height: 2px; background: var(--accent); border-radius: 2px; | |
| transform: translateX(-50%); transition: width .3s ease; | |
| } | |
| .nav-links a:hover { color: var(--white); } | |
| .nav-links a:hover::after { width: 60%; } | |
| .nav-links a.active { color: var(--accent); } | |
| .btn-resume { | |
| font-size:.82rem; font-weight:600; padding:8px 20px; | |
| border:1.5px solid var(--accent); border-radius:8px; color:var(--accent); | |
| transition:var(--tr); white-space:nowrap; | |
| } | |
| .btn-resume:hover { background:var(--accent); color:var(--bg); } | |
| .hamburger { | |
| display:none; flex-direction:column; gap:5px; | |
| background:none; border:none; cursor:pointer; padding:4px; | |
| } | |
| .hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:var(--tr); } | |
| /* ── HERO ────────────────────────────────────────────── */ | |
| .hero { | |
| position: relative; min-height: 100vh; | |
| display: flex; align-items: center; justify-content: center; | |
| overflow: hidden; | |
| } | |
| #heroCanvas { position:absolute; inset:0; width:100%; height:100%; } | |
| /* Diagonal split layout */ | |
| .hero-content { | |
| position: relative; z-index:2; | |
| max-width: 1200px; margin: 0 auto; padding: 0 32px; | |
| display: grid; grid-template-columns: 1fr 1fr; | |
| align-items: center; gap: 80px; width: 100%; | |
| padding-top: 80px; | |
| } | |
| .hero-left { display: flex; flex-direction: column; gap: 22px; } | |
| .hero-greeting { | |
| font-family: var(--mono); font-size: .9rem; color: var(--accent); | |
| letter-spacing: 4px; text-transform: uppercase; | |
| } | |
| .hero-name { | |
| font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 900; line-height: 1.0; | |
| background: linear-gradient(130deg, #fff 0%, var(--accent) 45%, var(--accent2) 100%); | |
| -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; | |
| letter-spacing: -2px; | |
| } | |
| .hero-tagline { | |
| font-size: clamp(.95rem, 2vw, 1.2rem); color: var(--muted); | |
| font-weight: 400; min-height: 2.4em; line-height: 1.5; | |
| } | |
| .cursor-blink { color: var(--accent); animation: blink .8s step-end infinite; } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; } | |
| /* Profile image — right column */ | |
| .hero-right { | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .profile-wrap { | |
| position: relative; width: 320px; height: 320px; | |
| } | |
| .profile-glow-ring { | |
| position: absolute; inset: -12px; | |
| border-radius: 50%; | |
| background: conic-gradient(var(--accent), var(--accent2), var(--accent3), var(--gold), var(--accent)); | |
| animation: spinRing 4s linear infinite; | |
| filter: blur(2px); | |
| } | |
| @keyframes spinRing { to { transform: rotate(360deg); } } | |
| .profile-glow-ring::after { | |
| content: ''; position: absolute; inset: 4px; | |
| background: var(--bg2); border-radius: 50%; | |
| } | |
| .profile-img { | |
| position: relative; z-index: 1; | |
| width: 100%; height: 100%; | |
| border-radius: 50%; | |
| object-fit: cover; object-position: top center; | |
| border: 3px solid rgba(255,255,255,.12); | |
| box-shadow: 0 0 60px rgba(56,189,248,.25), 0 0 120px rgba(129,140,248,.15); | |
| } | |
| .profile-badge { | |
| position: absolute; bottom: 10px; right: -10px; z-index: 2; | |
| background: rgba(3,7,18,.9); border: 1px solid var(--border); | |
| backdrop-filter: blur(12px); border-radius: 100px; | |
| padding: 8px 16px; display: flex; align-items: center; gap: 8px; | |
| font-size: .78rem; font-weight: 600; color: var(--accent); | |
| box-shadow: 0 4px 20px rgba(0,0,0,.4); | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } | |
| .profile-badge-dot { width:8px; height:8px; background:#4ade80; border-radius:50%; animation: pulse 1.5s ease-in-out infinite; } | |
| @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} } | |
| /* ── SHARED BUTTONS ──────────────────────────────────── */ | |
| .btn-primary { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| padding: 13px 32px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| color: #fff; border-radius: 12px; font-weight: 600; font-size: .92rem; | |
| border: none; cursor: pointer; transition: var(--tr); | |
| box-shadow: 0 0 30px rgba(56,189,248,.25); | |
| } | |
| .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(56,189,248,.45); } | |
| .btn-outline { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| padding: 12px 32px; background: transparent; color: var(--white); | |
| border: 1.5px solid var(--border); border-radius: 12px; | |
| font-weight: 600; font-size: .92rem; cursor: pointer; transition: var(--tr); | |
| backdrop-filter: blur(10px); | |
| } | |
| .btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); } | |
| .btn-sm { padding: 8px 20px; font-size: .8rem; border-radius: 9px; gap: 5px; } | |
| .scroll-indicator { | |
| position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); | |
| display: flex; flex-direction: column; align-items: center; gap: 8px; | |
| z-index: 2; color: var(--muted); font-size: .72rem; letter-spacing: 3px; | |
| } | |
| .scroll-line { | |
| width:1px; height:55px; | |
| background: linear-gradient(to bottom, var(--accent), transparent); | |
| animation: scrollAnim 2s ease-in-out infinite; | |
| } | |
| @keyframes scrollAnim { 0%,100%{opacity:1;transform:scaleY(1)} 50%{opacity:.3;transform:scaleY(.6)} } | |
| /* ── SECTION BASE ────────────────────────────────────── */ | |
| .section { padding: 110px 0; position: relative; } | |
| .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } | |
| .section-title { | |
| font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 800; | |
| margin-bottom: 64px; text-align: center; letter-spacing: -1px; | |
| } | |
| .section-title span { color: var(--accent); } | |
| .section-subtitle { | |
| text-align: center; color: var(--muted); font-size: .92rem; | |
| margin-top: -50px; margin-bottom: 60px; | |
| } | |
| .glass { | |
| background: var(--glass); backdrop-filter: blur(20px); | |
| border: 1px solid var(--border); border-radius: var(--radius); | |
| } | |
| /* ── ABOUT ───────────────────────────────────────────── */ | |
| .about { background: radial-gradient(ellipse at 80% 20%, rgba(129,140,248,.07) 0%, transparent 55%); } | |
| .about-grid { display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: center; } | |
| .about-img-wrap { position: relative; display: flex; justify-content: center; } | |
| .about-img { | |
| width: 280px; height: 340px; | |
| border-radius: 24px; | |
| object-fit: cover; object-position: top center; | |
| border: 2px solid var(--border); | |
| box-shadow: 0 0 60px rgba(56,189,248,.18), var(--shadow); | |
| position: relative; z-index: 1; | |
| transition: var(--tr); | |
| } | |
| .about-img:hover { transform: scale(1.02); box-shadow: 0 0 80px rgba(56,189,248,.3); } | |
| .about-img-deco { | |
| position: absolute; top: 20px; left: 20px; | |
| width: 280px; height: 340px; border-radius: 24px; | |
| border: 1.5px solid rgba(56,189,248,.2); | |
| background: linear-gradient(135deg, rgba(56,189,248,.05), rgba(129,140,248,.05)); | |
| } | |
| .about-text h3 { | |
| font-size: 1.55rem; font-weight: 700; margin-bottom: 14px; | |
| background: linear-gradient(135deg, #fff, var(--accent)); | |
| -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; | |
| } | |
| .about-text p { color: var(--muted); line-height: 1.85; margin-bottom: 16px; font-size: .95rem; } | |
| .about-text strong { color: var(--accent); -webkit-text-fill-color: var(--accent); } | |
| .about-icons { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; } | |
| .about-icon-chip { | |
| display: flex; align-items: center; gap: 6px; padding: 8px 16px; | |
| background: var(--glass-b); border: 1px solid var(--border); | |
| border-radius: 100px; font-size: .8rem; font-weight: 600; color: var(--text); | |
| transition: var(--tr); | |
| } | |
| .about-icon-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } | |
| .about-stats { display: flex; gap: 32px; margin-top: 28px; } | |
| .stat { display: flex; flex-direction: column; } | |
| .stat-num { | |
| font-size: 2rem; font-weight: 800; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; | |
| } | |
| .stat-label { font-size: .78rem; color: var(--muted); } | |
| /* ── EDUCATION ───────────────────────────────────────── */ | |
| .education { background: radial-gradient(ellipse at 20% 80%, rgba(56,189,248,.05) 0%, transparent 55%); } | |
| .edu-card { | |
| display: grid; grid-template-columns: 80px 1fr auto; | |
| gap: 32px; align-items: start; padding: 44px; | |
| transition: var(--tr); | |
| } | |
| .edu-card:hover { border-color: rgba(56,189,248,.4); transform: translateY(-5px); box-shadow: 0 24px 60px rgba(56,189,248,.08); } | |
| .edu-icon-wrap { | |
| width: 64px; height: 64px; border-radius: 16px; | |
| background: linear-gradient(135deg, var(--accent2), var(--accent)); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.8rem; | |
| } | |
| .edu-info h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; } | |
| .edu-spec { color: var(--accent); font-size: .92rem; margin-bottom: 6px; } | |
| .edu-uni { font-size: .97rem; font-weight: 600; color: var(--white); margin-bottom: 4px; } | |
| .edu-loc { font-size: .83rem; color: var(--muted); margin-bottom: 18px; } | |
| .tags { display: flex; gap: 8px; flex-wrap: wrap; } | |
| .tag { | |
| font-size: .73rem; font-weight: 600; padding: 4px 12px; | |
| background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.2); | |
| border-radius: 100px; color: var(--accent); | |
| } | |
| .tag.purple { background: rgba(129,140,248,.1); border-color: rgba(129,140,248,.25); color: var(--accent2); } | |
| .tag.pink { background: rgba(244,114,182,.1); border-color: rgba(244,114,182,.25); color: var(--accent3); } | |
| .tag.gold { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.25); color: var(--gold); } | |
| .edu-year { | |
| font-family: var(--mono); font-size: .85rem; color: var(--accent2); | |
| white-space: nowrap; padding-top: 4px; | |
| background: rgba(129,140,248,.1); border: 1px solid rgba(129,140,248,.2); | |
| padding: 6px 14px; border-radius: 8px; | |
| } | |
| /* ── SKILLS ──────────────────────────────────────────── */ | |
| .skills { background: radial-gradient(ellipse at 50% 50%, rgba(129,140,248,.06) 0%, transparent 65%); } | |
| .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } | |
| .skill-card { | |
| padding: 28px; display: flex; flex-direction: column; gap: 14px; | |
| transition: var(--tr); position: relative; overflow: hidden; | |
| } | |
| .skill-card::before { | |
| content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent2)); | |
| transform: scaleX(0); transform-origin: left; transition: transform .4s ease; | |
| } | |
| .skill-card:hover::before { transform: scaleX(1); } | |
| .skill-card:hover { border-color: rgba(56,189,248,.3); transform: translateY(-6px); } | |
| .skill-icon { font-size: 2rem; } | |
| .skill-card h4 { font-weight: 600; font-size: .97rem; } | |
| .skill-bar { | |
| height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; | |
| } | |
| .skill-fill { | |
| height: 100%; border-radius: 3px; | |
| background: linear-gradient(90deg, var(--accent2), var(--accent)); | |
| width: 0; transition: width 1.3s cubic-bezier(.4,0,.2,1); | |
| } | |
| .skill-pct { font-family: var(--mono); font-size: .78rem; color: var(--accent); align-self: flex-end; margin-top: -8px; } | |
| /* ── PROJECTS ────────────────────────────────────────── */ | |
| .projects { background: radial-gradient(ellipse at 85% 50%, rgba(244,114,182,.05) 0%, transparent 55%); } | |
| .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 24px; } | |
| .project-card { | |
| display: flex; flex-direction: column; overflow: hidden; | |
| transition: var(--tr); position: relative; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| border-color: rgba(56,189,248,.45); | |
| box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 40px rgba(56,189,248,.08); | |
| } | |
| .project-banner { | |
| height: 160px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 4.5rem; position: relative; overflow: hidden; | |
| } | |
| .project-banner::before { | |
| content: ''; position: absolute; inset: 0; | |
| background: linear-gradient(135deg, var(--c1, #38bdf8) 0%, transparent 80%); | |
| opacity: .15; | |
| } | |
| .project-banner::after { | |
| content: ''; position: absolute; inset: 0; | |
| background: linear-gradient(to top, rgba(3,7,18,1) 0%, transparent 60%); | |
| } | |
| .project-live-chip { | |
| position: absolute; top: 14px; right: 14px; z-index: 1; | |
| font-size: .7rem; font-weight: 700; padding: 4px 10px; | |
| background: rgba(74,222,128,.15); border: 1px solid rgba(74,222,128,.3); | |
| border-radius: 100px; color: #4ade80; letter-spacing: 1px; | |
| } | |
| .project-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; } | |
| .project-body h3 { font-size: 1.07rem; font-weight: 700; } | |
| .project-body p { font-size: .85rem; color: var(--muted); line-height: 1.72; flex: 1; } | |
| .project-stack { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .project-links { display: flex; gap: 10px; margin-top: 4px; } | |
| /* Featured project (full width) */ | |
| .project-card.featured { grid-column: 1 / -1; flex-direction: row; } | |
| .project-card.featured .project-banner { width: 340px; flex-shrink: 0; height: auto; min-height: 220px; } | |
| .project-card.featured .project-body { padding: 32px; } | |
| .project-card.featured h3 { font-size: 1.25rem; } | |
| /* ── EXPERIENCE ──────────────────────────────────────── */ | |
| .experience { background: radial-gradient(ellipse at 30% 70%, rgba(56,189,248,.05) 0%, transparent 55%); } | |
| .exp-timeline { display: flex; flex-direction: column; gap: 28px; } | |
| .exp-item { | |
| display: grid; grid-template-columns: 60px 1fr; | |
| gap: 24px; align-items: start; | |
| } | |
| .exp-dot-col { display: flex; flex-direction: column; align-items: center; gap: 0; } | |
| .exp-dot { | |
| width: 48px; height: 48px; border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent2), var(--accent)); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 1.3rem; flex-shrink: 0; | |
| } | |
| .exp-line { flex: 1; width: 2px; background: linear-gradient(to bottom, rgba(56,189,248,.3), transparent); min-height: 40px; } | |
| .exp-card-inner { | |
| padding: 28px; margin-bottom: 4px; transition: var(--tr); | |
| } | |
| .exp-card-inner:hover { border-color: rgba(129,140,248,.4); transform: translateX(6px); } | |
| .exp-card-inner h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } | |
| .exp-card-inner p { font-size: .86rem; color: var(--muted); line-height: 1.75; margin-bottom: 14px; } | |
| /* ── CONTACT ─────────────────────────────────────────── */ | |
| .contact { background: radial-gradient(ellipse at 60% 20%, rgba(129,140,248,.07) 0%, transparent 55%); } | |
| .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } | |
| .contact-info h3 { | |
| font-size: 1.45rem; font-weight: 700; margin-bottom: 12px; | |
| background: linear-gradient(135deg, #fff, var(--accent)); | |
| -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; | |
| } | |
| .contact-info > p { color: var(--muted); line-height: 1.75; margin-bottom: 32px; font-size: .93rem; } | |
| .contact-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; } | |
| .contact-item { | |
| display: flex; align-items: center; gap: 16px; | |
| padding: 16px 20px; background: var(--glass); | |
| border: 1px solid var(--border); border-radius: 14px; transition: var(--tr); | |
| } | |
| .contact-item:hover { border-color: var(--accent); transform: translateX(6px); } | |
| .ci-icon { font-size: 1.4rem; } | |
| .contact-item small { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 2px; } | |
| .contact-item strong { font-size: .88rem; color: var(--white); font-weight: 600; } | |
| .social-links { display: flex; gap: 12px; } | |
| .social-btn { | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 11px 22px; background: var(--glass); | |
| border: 1px solid var(--border); border-radius: 10px; | |
| font-size: .86rem; font-weight: 600; transition: var(--tr); color: var(--text); | |
| } | |
| .social-btn svg { width:17px; height:17px; } | |
| .social-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); } | |
| .contact-form { padding: 38px; display: flex; flex-direction: column; gap: 20px; } | |
| .contact-form h3 { font-size: 1.15rem; font-weight: 700; } | |
| .form-group { display: flex; flex-direction: column; gap: 6px; } | |
| .form-group label { font-size: .8rem; color: var(--muted); font-weight: 500; } | |
| .form-group input, .form-group textarea { | |
| background: rgba(255,255,255,.04); border: 1px solid var(--border); | |
| border-radius: 10px; padding: 12px 16px; color: var(--white); | |
| font-family: var(--font); font-size: .88rem; outline: none; transition: var(--tr); resize: vertical; | |
| } | |
| .form-group input:focus, .form-group textarea:focus { | |
| border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,189,248,.1); | |
| } | |
| .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,.2); } | |
| .btn-full { width: 100%; justify-content: center; padding: 15px; font-size: .97rem; } | |
| .form-success { display:none; text-align:center; color:#4ade80; font-size:.88rem; animation:fadeIn .5s ease; } | |
| @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } | |
| /* ── FOOTER ──────────────────────────────────────────── */ | |
| .footer { | |
| text-align: center; padding: 44px 24px; | |
| border-top: 1px solid var(--border); | |
| background: rgba(3,7,18,.9); | |
| } | |
| .footer p { color: var(--muted); font-size: .86rem; } | |
| .footer strong { color: var(--accent); } | |
| .footer-sub { margin-top: 6px; font-size: .76rem; } | |
| /* ── SCROLL ANIMATIONS ───────────────────────────────── */ | |
| [data-aos] { opacity:0; transform:translateY(44px); transition:opacity .75s ease,transform .75s ease; } | |
| [data-aos].in-view { opacity:1; transform:translateY(0); } | |
| [data-delay="50"] { transition-delay:.05s; } | |
| [data-delay="100"] { transition-delay:.1s; } | |
| [data-delay="150"] { transition-delay:.15s; } | |
| [data-delay="200"] { transition-delay:.2s; } | |
| [data-delay="300"] { transition-delay:.3s; } | |
| [data-delay="400"] { transition-delay:.4s; } | |
| [data-delay="500"] { transition-delay:.5s; } | |
| [data-delay="600"] { transition-delay:.6s; } | |
| [data-delay="700"] { transition-delay:.7s; } | |
| .h-reveal { opacity:0; animation:heroReveal .9s ease forwards; } | |
| .h-reveal:nth-child(1){animation-delay:.2s} | |
| .h-reveal:nth-child(2){animation-delay:.4s} | |
| .h-reveal:nth-child(3){animation-delay:.6s} | |
| .h-reveal:nth-child(4){animation-delay:.8s} | |
| .h-reveal:nth-child(5){animation-delay:1.0s} | |
| @keyframes heroReveal { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} } | |
| /* ── RESPONSIVE ──────────────────────────────────────── */ | |
| @media(max-width:960px){ | |
| .hero-content{grid-template-columns:1fr;text-align:center;gap:48px;padding-top:100px} | |
| .hero-left{align-items:center} | |
| .about-grid{grid-template-columns:1fr;text-align:center} | |
| .about-img-wrap{justify-content:center} | |
| .about-stats{justify-content:center} | |
| .about-icons{justify-content:center} | |
| .contact-grid{grid-template-columns:1fr} | |
| .edu-card{grid-template-columns:auto 1fr} | |
| .edu-year{display:none} | |
| .project-card.featured{grid-column:auto;flex-direction:column} | |
| .project-card.featured .project-banner{width:100%;min-height:160px} | |
| } | |
| @media(max-width:768px){ | |
| .nav-links{ | |
| position:fixed;top:68px;left:0;right:0; | |
| background:rgba(3,7,18,.97);backdrop-filter:blur(20px); | |
| flex-direction:column;align-items:center;padding:24px;gap:4px; | |
| transform:translateY(-110%);transition:var(--tr); | |
| border-bottom:1px solid var(--border); | |
| } | |
| .nav-links.open{transform:translateY(0)} | |
| .hamburger{display:flex} | |
| .btn-resume{display:none} | |
| .profile-wrap{width:240px;height:240px} | |
| .skills-grid{grid-template-columns:repeat(2,1fr)} | |
| } | |
| @media(max-width:480px){ | |
| .skills-grid{grid-template-columns:1fr} | |
| .section{padding:76px 0} | |
| .about-img{width:220px;height:270px} | |
| .about-img-deco{width:220px;height:270px} | |
| .hero-btns{flex-direction:column;align-items:center} | |
| .exp-item{grid-template-columns:1fr} | |
| .exp-dot-col{display:none} | |
| } | |
| ::selection { background:var(--accent2); color:#fff; } |