/* ========================= Sumanth Venkata Portfolio mainCSS.css (full file) ========================= */ /* Base resets */ * { box-sizing: border-box; } /* overflow-x: clip prevents sideways scroll WITHOUT making a scroll container, so window.scrollTo can reset to the top on tab switch. No height:100% on body — sections are sized by .section { min-height: 100svh }. */ html { height: 100%; overflow-x: clip; max-width: 100%; } body { overflow-x: clip; max-width: 100%; padding-left: 0; padding-right: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; background: #0e1013; color: #e8eaed; } .container-fluid { padding-left: 0; padding-right: 0; } .row { padding-left: 0; padding-right: 0; } /* Palette — brand navy / teal */ :root { --bg: #0e1013; --card: #14181f; --muted: #9aa0a6; --navy: #1F3864; /* brand navy */ --teal: #0F766E; /* brand teal */ --teal-light: #5EEAD4; /* light-teal highlight */ --accent: var(--teal); /* structural accent (buttons, bars) */ --accent-2: var(--navy); --accent-text: var(--teal-light); /* readable accent on dark text */ --white: #fff; } /* Typography helpers */ .introText { color: var(--white); text-align: center; } .introText-name { font-family: 'Inter', sans-serif; font-size: 64px; font-weight: 800; line-height: 1.05; } .inroText-role { font-size: clamp(16px, 4.5vw, 20px); font-family: 'Lora', serif; font-style: italic; color: #d2d5d9; } .accent { color: var(--accent-text); } /* Animations — GPU-friendly entrance (transform + opacity only, no reflow) */ .text-animation { animation: textMove .8s ease-out both; } @keyframes textMove { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Cards */ .card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 20px; } .card-soft { background: linear-gradient(180deg, rgba(31,56,100,0.18), rgba(15,118,110,0.14)); border-color: rgba(255,255,255,0.08); } /* Header / Nav */ .site-header { height: 64px; } .custom-nav { background: rgba(14,16,19,.65); border: 0; backdrop-filter: blur(10px); } .brand-name { font-weight: 800; letter-spacing: .5px; color: var(--white) !important; margin-left: 40px !important; /* desktop offset */ } .custom-nav .navbar-nav > li > a { color: #cfd3da; font-weight: 600; transition: color .2s, transform .2s; } .custom-nav .navbar-nav > li.active > a, .custom-nav .navbar-nav > li > a:hover { color: var(--accent-text); transform: translateY(-1px); } .nav-resume.btn { margin-top: 8px; padding: 6px 12px !important; } /* Buttons */ .btn-accent { background: linear-gradient(90deg, var(--teal), var(--navy)); color: #fff; border: 0; font-weight: 700; box-shadow: 0 10px 20px rgba(15,118,110,.30); } .btn-accent:hover { opacity: .95; color: #fff; } .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #e8eaed; } .btn-ghost:hover { border-color: var(--accent-text); color: var(--accent-text); } /* Focus styles for keyboard accessibility */ a:focus-visible, button:focus-visible, .btn:focus-visible, .navbar-nav > li > a:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; border-radius: 6px; } /* Inputs ≥16px so iOS doesn't auto-zoom on focus */ .form-control, input, textarea, select { font-size: 16px; } /* Sections */ .section { position: relative; padding: 120px 0 80px; min-height: 100vh; min-height: 100svh; /* dynamic viewport height on mobile */ overflow: hidden; /* contain shimmer/::after, prevent sideways scroll */ scroll-margin-top: 84px;/* offset for fixed nav on anchor jumps */ /* Vertically center content. min-height (not height) keeps tall sections growing/scrolling normally — only short sections (Contact) get centered. */ display: flex; flex-direction: column; justify-content: center; } .section-hero { padding-top: 140px; } .section-about .introText-name, .section-work .introText-name, .section-contact .introText-name { text-shadow: 0 2px 30px rgba(0,0,0,.5); } /* Background images + overlays */ .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(.35); } .overlay, .hero-overlay { position: absolute; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 20% 10%, rgba(31,56,100,.35), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(15,118,110,.28), transparent 60%), linear-gradient(180deg, rgba(14,16,19,.25), rgba(14,16,19,.85) 65%); } .hero-overlay { background: linear-gradient(180deg, rgba(14,16,19,.1), rgba(14,16,19,.75) 55%, rgba(14,16,19,.95)); } /* Hero inner */ .hero-inner { text-align: center; } .hero-ctas { margin-top: 24px; display: inline-flex; gap: 12px; } /* Home about blurb */ .home-desc-aboutme { margin-top: 48px; } .home-desc-text { width: 90%; margin: 0 auto; color: #c7cbd1; } .home-desc-bottom-text { margin-top: 10px; } /* About */ .about-me-content-outer { margin: 60px auto 20px auto; } .description-main-heading { font-size: clamp(22px, 5vw, 32px); font-weight: 800; text-align: center; margin: 20px 0 10px; } /* Animated gradient underline that draws in when a section heading reveals. NOT applied to the hero name (.section-hero .introText-name) — that keeps its gradient shine clean. Triggered by the .in-view class from scroll-reveal. */ .section-title-underline { position: relative; padding-bottom: 14px; } .section-title-underline::after { content:""; position:absolute; left:50%; bottom:0; transform: translateX(-50%) scaleX(0); transform-origin:center; width: 72px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--teal-light)); transition: transform .6s cubic-bezier(.22,.61,.36,1) .15s; } .section-title-underline.in-view::after { transform: translateX(-50%) scaleX(1); } /* Education blocks */ .about-edu-tabs { width: 90%; margin: 20px auto; font-size: 16px; } .fromTo { float: right; color: var(--muted); font-weight: 600; } /* Work - timeline */ .timeline { margin: 30px auto 20px; max-width: 900px; } .timeline-item { margin: 16px auto; padding: 20px 24px; border-left: 4px solid var(--accent); background: rgba(255,255,255,.04); } .timeline-item h3 { margin-top: 0; font-weight: 800; color: #e9ecf1; } .experience-period { float: right; color: var(--muted); } /* Work: nicer bullets */ .bullets { margin: 10px 0 0 0; padding-left: 18px; color: #cbd1d8; } .bullets.compact li { margin: 6px 0; line-height: 1.45; } /* Work timeline entrance is handled by the unified scroll-reveal system (see "Premium animation system" at the end of this file). The old CSS-only opacity:0 base + Angular .animate trigger was removed because it hid the timeline when JS was unavailable. */ /* Contact */ .cnt-form-box { margin-top: 24px; text-align: center; } .form-innerBox { margin: 0 auto; float: none; } .cnt-form-text { color: #cfd3da; font-weight: 700; margin-bottom: 16px; } /* Footer */ .footerr { background-color: #0b0d10; border-top: 1px solid rgba(255,255,255,.05); } .logo_heading { color: #cfd3da; font-weight: 800; font-size: 24px; text-align: center; margin-bottom: 10px; } .image_logo_outer { margin: 8px auto 0; text-align: center; } /* Footer icons – visible on dark background */ .logoImage { width: 48px; height: 48px; margin: 10px 8px; border-radius: 50%; transition: transform .18s, box-shadow .18s, filter .18s; filter: brightness(0) invert(1); } .logoImage:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 20px rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.6); filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.6)); } /* Keep original hover border (ok to duplicate) */ .logoImage:hover { border: 2px solid white; } /* ========================= Tweaks requested (nav spacing) ========================= */ .custom-nav .navbar-header .navbar-brand { padding: 18px 16px; } .custom-nav .navbar-nav { margin-right: 12px; } .custom-nav .navbar-nav > li { margin-left: 8px; } .custom-nav .navbar-nav > li > a { padding: 18px 16px; border-radius: 8px; } .custom-nav .navbar-nav > li > a.btn { padding: 10px 14px !important; margin-top: 10px; } /* Footer layout spacing (consistent gaps) */ .footerr .image_logo_outer { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 12px auto 0; } /* ========================= Mobile responsiveness tweaks ========================= */ /* Fluid typography for big headings */ .introText-name { font-size: clamp(32px, 6vw, 64px); } /* Comfortable side gutters + tighter cards on phones */ @media (max-width: 575px) { .container { padding-left: 18px; padding-right: 18px; } .card { padding: 16px; } .home-desc-text { width: 100%; } } /* Brand margin only on desktop */ @media (max-width: 991px) { .brand-name { margin-left: 0 !important; } } /* Mobile nav: legible dropdown + visible hamburger; ≥44px tap targets */ @media (max-width: 767px) { .custom-nav .navbar-collapse { background: rgba(14,16,19,.96); border-radius: 0 0 12px 12px; padding-bottom: 8px; } .custom-nav .navbar-nav > li > a { padding: 14px 16px; } .navbar-toggle { border: 1px solid rgba(255,255,255,.3); min-height: 44px; min-width: 44px; } .navbar-toggle .icon-bar { background: #fff; } } /* Un-float right-aligned meta so it doesn't collide with titles on phones */ @media (max-width: 575px) { .experience-period, .fromTo { float: none; display: block; margin-top: 6px; text-align: left; color: var(--muted); } .timeline-item h3 { font-size: 18px; } } /* Section spacing */ @media (max-width: 991px) { .section { padding-top: 110px; padding-bottom: 60px; } } @media (max-width: 767px) { .section { padding-top: 96px; padding-bottom: 48px; } } /* Hero CTAs stack full-width on phones */ @media (max-width: 575px) { .hero-ctas { flex-direction: column; gap: 12px; width: 100%; max-width: 320px; margin: 24px auto 0; } .hero-ctas .btn { width: 100%; } } /* Education blocks tweaks */ @media (max-width: 991px) { .about-edu-tabs { width: 94%; font-size: 15px; } .fromTo { float: none; display: block; margin-top: 6px; text-align: left; } } @media (max-width: 480px) { .about-edu-tabs { width: 96%; font-size: 14px; } } /* Timeline cards on mobile */ @media (max-width: 991px) { .timeline { margin: 20px auto; padding: 0 8px; } .timeline-item { padding: 16px 18px; } } @media (max-width: 480px) { .timeline-item { padding: 14px 16px; border-left-width: 3px; } .timeline-item h3 { font-size: 18px; } .bullets { padding-left: 16px; } .bullets.compact li { margin: 4px 0; } } /* Footer: icon & text size on mobile */ @media (max-width: 767px) { .logo_heading { font-size: 20px; } .logoImage { width: 40px; height: 40px; margin: 8px 6px; } .footerr .image_logo_outer { gap: 12px; } } /* Toast Styles */ /* Make the card a positioning context for the toast */ .form-innerBox { position: relative; } /* Inline toast above the form card */ .toast-inline { position: absolute; left: 50%; top: -16px; /* visually above the card */ transform: translate(-50%, -20px); /* start slightly up */ min-width: 280px; max-width: 90%; padding: 12px 16px 14px; border-radius: 10px; background: linear-gradient(90deg, rgba(31,56,100,.22), rgba(15,118,110,.20)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 12px 28px rgba(0,0,0,.35); color: #e8eaed; font-weight: 700; opacity: 0; pointer-events: none; z-index: 5; } /* left accent bar */ .toast-inline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-top-left-radius: 10px; border-bottom-left-radius: 10px; } /* progress bar */ .toast-inline .toast-progress { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden; } .toast-inline .toast-progress > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left center; animation: toastProgress 8s linear forwards; /* 8s duration */ } /* variants */ .toast-inline.success { background: linear-gradient(90deg, rgba(15,118,110,.22), rgba(31,56,100,.20)); } .toast-inline.error { background: linear-gradient(90deg, rgba(231,76,60,.25), rgba(231,76,60,.15)); } /* show animation (slide + fade) */ .toast-inline.show { opacity: 1; transform: translate(-50%, 0); animation: toastEnter .5s cubic-bezier(.22,.61,.36,1) both; } @keyframes toastEnter { 0% { opacity: 0; transform: translate(-50%, -16px); } 100%{ opacity: 1; transform: translate(-50%, 0); } } /* optional: subtle “breathing” while visible */ .toast-inline.show { animation: toastEnter .5s ease-out both, toastGlow 2.4s ease-in-out 2.5s 2 alternate; } @keyframes toastGlow { from { box-shadow: 0 12px 28px rgba(0,0,0,.35); } to { box-shadow: 0 16px 36px rgba(0,0,0,.45); } } /* progress keyframes */ @keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Mobile: keep it inside the card visually */ @media (max-width: 480px) { .toast-inline { top: -12px; padding: 10px 12px 12px; font-weight: 600; } } /* ========================= Profile photo (hero) ========================= */ .profile-pic { width: clamp(120px, 36vw, 180px); aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; margin: 0 auto 24px; display: block; border: 3px solid var(--teal-light); box-shadow: 0 12px 30px rgba(0,0,0,.45); } /* ========================= Headline tech strip (Devicon) ========================= */ .tech-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; max-width: 820px; margin: 10px auto 36px; padding: 0 16px; } .tech-strip i { font-size: clamp(28px, 8vw, 40px); line-height: 1; transition: transform .18s, filter .18s; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); } .tech-strip i:hover { transform: translateY(-4px) scale(1.08); } @media (min-width: 768px) { .tech-strip { gap: 18px; } } /* ========================= Categorized skills cards ========================= */ .skills-cats { display: grid; grid-template-columns: 1fr; /* single column on phones */ gap: 18px; max-width: 1000px; margin: 0 auto 20px; padding: 0 12px; } @media (min-width: 600px) { .skills-cats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .skills-cats { grid-template-columns: repeat(3, 1fr); } } .skill-cat { padding: 16px 20px; } .skill-cat h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--teal-light); letter-spacing: .3px; } .skill-cat p { margin: 0; color: #cbd1d8; line-height: 1.5; font-size: 14.5px; } /* Perspective so the JS cursor-tilt (desktop only) reads as 3D. */ .projects-grid, .skills-cats { perspective: 900px; } .project-card, .skill-cat { transform-style: preserve-3d; } /* ========================= Projects grid ========================= */ .projects-grid { display: grid; grid-template-columns: 1fr; /* single column on phones */ gap: 22px; max-width: 1100px; margin: 30px auto 10px; padding: 0 12px; } @media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } .project-card { display: flex; flex-direction: column; border-left: 4px solid var(--teal); } .project-card h3 { margin-top: 0; font-weight: 800; color: #e9ecf1; } .project-subtitle { color: var(--teal-light); font-weight: 600; margin: 2px 0 8px; } .project-tech { font-family: 'Lora', serif; font-style: italic; color: var(--muted); font-size: 13.5px; margin-bottom: 12px; } .project-desc { color: #cbd1d8; line-height: 1.55; flex: 1; } .project-link { margin-top: 16px; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; } .project-internal { margin-top: 16px; display: inline-block; color: var(--muted); font-style: italic; font-size: 14px; } /* Federal / professional project card */ .project-card-federal { border-left-color: var(--navy); position: relative; } .project-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--teal-light); background: rgba(31,56,100,.45); border: 1px solid var(--teal-light); } .project-badge .glyphicon { font-size: 11px; } .project-attribution { color: var(--muted); font-size: 13.5px; font-weight: 600; margin: 2px 0 10px; } /* ========================= Contact details strip ========================= */ .contact-details { margin: 8px auto 24px; color: #cbd1d8; font-weight: 600; font-size: 16px; } .contact-details a { color: #cbd1d8; } .contact-details a:hover { color: var(--teal-light); } .contact-details .glyphicon { color: var(--teal-light); margin-right: 6px; } /* Mobile-first: stacked, centered, large tap targets */ .contact-details .contact-sep { display: none; } .contact-details a, .contact-details .contact-loc { display: block; margin: 10px 0; min-height: 44px; line-height: 44px; } /* Inline on tablets/desktop */ @media (min-width: 768px) { .contact-details a, .contact-details .contact-loc { display: inline; margin: 0; min-height: 0; line-height: inherit; } .contact-details .contact-sep { display: inline; margin: 0 12px; color: var(--muted); } } /* Role context line in timeline */ .role-context { color: #aeb4bc; font-style: italic; margin: 4px 0 6px; line-height: 1.5; } /* Footer email icon (glyph instead of image) */ .footer-email { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 10px 8px; border-radius: 50%; color: #fff; font-size: 22px; transition: transform .18s, box-shadow .18s, border .18s; } .footer-email:hover { transform: translateY(-3px) scale(1.03); color: var(--teal-light); border: 2px solid rgba(255,255,255,.6); box-shadow: 0 10px 20px rgba(0,0,0,.35); } @media (max-width: 767px) { .footer-email { width: 40px; height: 40px; font-size: 18px; margin: 8px 6px; } } /* ========================================================================= Premium animation system - GPU-friendly: animates ONLY transform + opacity - No-JS safe: hidden states apply ONLY under html.js (added by JS) - Honors prefers-reduced-motion (everything snaps visible + static) ========================================================================= */ /* ---- PART A: Scroll-reveal ---- */ /* Hidden state applies ONLY when JS is active (no-JS = fully visible) */ html.js .reveal { opacity: 0; transform: translateY(26px); } html.js .reveal-left { opacity: 0; transform: translateX(-30px); } html.js .reveal-right { opacity: 0; transform: translateX(30px); } html.js .reveal-scale { opacity: 0; transform: scale(.93); } .reveal, .reveal-left, .reveal-right, .reveal-scale { transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--rev-i, 0) * 90ms); /* stagger within a group */ will-change: opacity, transform; } /* `html.js` prefix here is required: the hidden rule above is `html.js .reveal` (specificity 0,2,1 because of the `html` type selector), so the revealed state must match that specificity or the element stays at opacity:0. */ html.js .reveal.in-view, html.js .reveal-left.in-view, html.js .reveal-right.in-view, html.js .reveal-scale.in-view { opacity: 1; transform: none; } /* ---- PART B: Hero entrance + animated name + photo glow ---- */ /* Staggered hero entrance on load (CSS-only; runs without JS) */ .hero-inner > * { opacity: 0; transform: translateY(18px); animation: heroIn .8s cubic-bezier(.22,.61,.36,1) forwards; } .hero-inner > *:nth-child(1){ animation-delay:.10s } .hero-inner > *:nth-child(2){ animation-delay:.22s } .hero-inner > *:nth-child(3){ animation-delay:.34s } .hero-inner > *:nth-child(4){ animation-delay:.46s } .hero-inner > *:nth-child(5){ animation-delay:.58s } .hero-inner > *:nth-child(6){ animation-delay:.70s } @keyframes heroIn { to { opacity: 1; transform: none; } } /* Profile photo: entrance + glow + gentle float. heroIn (with `both`) restores opacity so it isn't trapped at 0, then floaty drives the transform afterwards. */ .profile-pic { box-shadow: 0 0 0 4px rgba(94,234,212,.18), 0 12px 36px rgba(15,118,110,.35); animation: heroIn .8s cubic-bezier(.22,.61,.36,1) .10s both, floaty 6s ease-in-out 1.1s infinite; } @keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } } /* Hero name: slow gradient "shine" (teal -> white -> teal). Scoped to the hero so other section headings keep their own entrance. Fallback color first. */ .section-hero .introText-name { color: #fff; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .section-hero .introText-name { background: linear-gradient(90deg, #5EEAD4, #ffffff 40%, #0F766E 70%, #5EEAD4); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* entrance (heroIn `both` restores visibility) then the looping shine */ animation: heroIn .8s cubic-bezier(.22,.61,.36,1) .22s both, nameShine 6s linear 1.1s infinite; } /* keep the accent span inside the gradient too */ .section-hero .introText-name .accent { color: inherit; -webkit-text-fill-color: inherit; } } @keyframes nameShine { to { background-position: 200% center; } } /* Drifting gradient orbs in the hero overlay — cheap depth (transform only) */ .section-hero .hero-overlay::before, .section-hero .hero-overlay::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: -1; } .section-hero .hero-overlay::before { width: 46vw; max-width: 520px; aspect-ratio: 1; top: -8%; left: -6%; background: radial-gradient(circle, rgba(94,234,212,.22), transparent 70%); animation: orbDriftA 22s ease-in-out infinite; } .section-hero .hero-overlay::after { width: 52vw; max-width: 600px; aspect-ratio: 1; bottom: -12%; right: -8%; background: radial-gradient(circle, rgba(31,56,100,.30), transparent 70%); animation: orbDriftB 26s ease-in-out infinite; } @keyframes orbDriftA { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(28px,34px) } } @keyframes orbDriftB { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(-32px,-26px) } } /* ---- PART C: Micro-interactions ---- */ /* Card lift + teal glow */ .card, .projects-grid > *, .timeline-item, .skills-cats > * { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, border-color .25s; } .card:hover, .projects-grid > *:hover, .skills-cats > *:hover { transform: translateY(-6px); border-color: rgba(94,234,212,.45); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(94,234,212,.25), 0 0 28px rgba(15,118,110,.22); } /* Keep the contact form stable while typing (glow only, no lift) */ .form-innerBox:hover { transform: none; } /* Button shine sweep on hover */ .btn-accent { position: relative; overflow: hidden; } .btn-accent::after { content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); pointer-events:none; } .btn-accent:hover::after { animation: btnShine .8s ease; } @keyframes btnShine { to { left: 150%; } } /* Tech icon bouncy hover (merged with the base .tech-strip i transition) */ .tech-strip i { display: inline-block; transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s; } .tech-strip i:hover { transform: translateY(-4px) scale(1.18); } /* Animated nav underline */ .custom-nav .navbar-nav > li > a { position: relative; } .custom-nav .navbar-nav > li > a::after { content:""; position:absolute; left:14px; right:14px; bottom:8px; height:2px; background: linear-gradient(90deg, #5EEAD4, #0F766E); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .custom-nav .navbar-nav > li.active > a::after, .custom-nav .navbar-nav > li > a:hover::after { transform: scaleX(1); } /* don't draw an underline under the Resume button */ .custom-nav .navbar-nav > li > a.btn::after { display: none; } /* ---- PART D: Scroll progress bar ---- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #5EEAD4, #0F766E); z-index: 2000; /* above the fixed navbar (Bootstrap 1030) */ pointer-events: none; } /* ---- PART E: Count-up stat strip ---- */ .stat-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; margin: 28px auto 4px; max-width: 640px; padding: 0 12px; } .stat { min-width: 120px; text-align: center; } .stat .count { display: block; font-weight: 800; line-height: 1.05; font-size: clamp(30px, 8vw, 44px); color: var(--teal-light); text-shadow: 0 2px 18px rgba(15,118,110,.45); } .stat small { display: block; margin-top: 4px; color: var(--muted); font-weight: 600; font-size: 13px; } @media (max-width: 575px) { .stat-strip { gap: 16px; flex-direction: column; } } /* ---- Reduced-motion: disable all of the above, show everything ---- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html.js .reveal, html.js .reveal-left, html.js .reveal-right, html.js .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-inner > * { animation: none; opacity: 1; transform: none; } .section-hero .introText-name { animation: none; } .profile-pic { animation: none; } .section-hero .hero-overlay::before, .section-hero .hero-overlay::after { animation: none; } .btn-accent:hover::after { animation: none; } .scroll-progress { display: none; } }