/* ========================================================================== enhancements.css Additive UI enhancements for Hugo Academic theme Primary color: indigo #3f51b5 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Scroll Reveal Sections remain visible by default; JS-enabled pages opt into reveal animation by adding the .js class to before DOM ready. -------------------------------------------------------------------------- */ .home-section { opacity: 1; transform: translateY(0); } .js .home-section { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .js .home-section.reveal-visible { opacity: 1; transform: translateY(0); } /* -------------------------------------------------------------------------- 2. fadeInUp Keyframe General-purpose entry animation available for individual elements -------------------------------------------------------------------------- */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- 3. Card Hover Lift + indigo glow on .card elements (excludes the about section profile) -------------------------------------------------------------------------- */ .wg-portfolio .card, .wg-pages .card, .wg-experience .card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .wg-portfolio .card:hover, .wg-pages .card:hover, .wg-experience .card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 18px 50px rgba(63, 81, 181, 0.25); } /* Prevent the about section portrait title from wrapping */ .portrait-title h2 { white-space: nowrap; } /* -------------------------------------------------------------------------- 4. Link Underline Animation Scoped to content links inside .home-section. Excludes buttons, card images, navbar brand, social icons, and icon-only links. Suppresses the theme's native text-decoration to avoid double underlines. -------------------------------------------------------------------------- */ .home-section a:not(.btn):not(.card-image):not(.navbar-brand):not([class*="social"]):not([class*="icon"]) { position: relative; text-decoration: none !important; } .home-section a:not(.btn):not(.card-image):not(.navbar-brand):not([class*="social"]):not([class*="icon"])::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: #3f51b5; transition: width 0.2s ease; } .home-section a:not(.btn):not(.card-image):not(.navbar-brand):not([class*="social"]):not([class*="icon"]):focus-visible::after, .home-section a:not(.btn):not(.card-image):not(.navbar-brand):not([class*="social"]):not([class*="icon"]):focus-visible { text-decoration: underline !important; outline: 2px solid #3f51b5; outline-offset: 2px; } .home-section a:not(.btn):not(.card-image):not(.navbar-brand):not([class*="social"]):not([class*="icon"]):hover::after { width: 100%; } /* -------------------------------------------------------------------------- 5. Nav Active Indicator Uses bottom-border instead of ::after to avoid conflicts with Bootstrap's own ::after pseudo-elements on nav items (dropdowns, collapse). -------------------------------------------------------------------------- */ .navbar-nav .nav-link { transition: color 0.2s ease, border-color 0.3s ease; border-bottom: 2px solid transparent; } .navbar-nav .nav-link.active { border-bottom-color: #3f51b5; } .navbar-nav .nav-link:hover { border-bottom-color: rgba(63, 81, 181, 0.4); } /* -------------------------------------------------------------------------- 6. Button Lift on Hover Subtle upward shift with indigo shadow on all .btn elements -------------------------------------------------------------------------- */ .btn { transition: transform 0.35s ease, box-shadow 0.35s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3); } /* -------------------------------------------------------------------------- 7. Staggered Delays for Project Cards Each .isotope-item child receives a progressively longer transition delay so cards animate in sequentially rather than all at once -------------------------------------------------------------------------- */ .isotope-item:nth-child(1) { transition-delay: 0.05s; } .isotope-item:nth-child(2) { transition-delay: 0.10s; } .isotope-item:nth-child(3) { transition-delay: 0.15s; } .isotope-item:nth-child(4) { transition-delay: 0.20s; } .isotope-item:nth-child(5) { transition-delay: 0.25s; } .isotope-item:nth-child(6) { transition-delay: 0.30s; } /* -------------------------------------------------------------------------- 8. Experience/Education Timeline Dot Alignment Ensures the timeline dots are vertically centered with their cards -------------------------------------------------------------------------- */ .row.experience { align-items: stretch; } .row.experience > .col-auto.text-center.flex-column { display: flex !important; flex-direction: column !important; } /* Make the connector rows stretch to fill the gap between dots */ .row.experience > .col-auto .row.h-50 { flex: 1; } .row.experience > .col-auto .m-2 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* -------------------------------------------------------------------------- 8b. Scrollable Experience Timeline Constrains the experience column to viewport height with internal scroll. Dots transition between active (blue) and inactive (gray) via JS. -------------------------------------------------------------------------- */ .wg-experience .col-12.col-lg-8 { max-height: 80vh; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; } @media (prefers-reduced-motion: reduce) { .wg-experience .col-12.col-lg-8 { scroll-behavior: auto; } } .wg-experience .badge.badge-pill { transition: background-color 0.3s ease, border-color 0.3s ease; } .wg-experience .badge.badge-pill.exp-fill { background-color: #3f51b5 !important; border-color: #3f51b5 !important; } /* -------------------------------------------------------------------------- 9. Navbar Collapse Fix Bootstrap 4's .collapse sets height:0 + overflow:hidden for the collapse animation, but navbar-expand-lg only overrides display to flex — it does NOT reset height/overflow. This leaves the nav links clipped (invisible) at desktop widths. We fix by explicitly restoring them. -------------------------------------------------------------------------- */ @media (min-width: 992px) { .navbar-expand-lg .navbar-collapse { height: auto !important; overflow: visible !important; } } /* -------------------------------------------------------------------------- 10. Scroll-to-Top Button Fixed-position floating button that appears after the user scrolls down. Uses the site indigo accent with a smooth fade + slide-up entrance. -------------------------------------------------------------------------- */ #scrollTopBtn { position: fixed; bottom: 2rem; right: 2rem; z-index: 999; width: 48px; height: 48px; border: none; border-radius: 50%; background: #3f51b5; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(63, 81, 181, 0.45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease, background-color 0.25s ease, box-shadow 0.25s ease; } #scrollTopBtn.show { opacity: 1; visibility: visible; transform: translateY(0); } #scrollTopBtn:hover { background: #303f9f; box-shadow: 0 6px 20px rgba(63, 81, 181, 0.6); transform: translateY(-3px); } #scrollTopBtn:active { transform: translateY(0); } /* -------------------------------------------------------------------------- 11. Reduced Motion Accessibility Respects the OS-level "prefers reduced motion" setting by disabling all transitions and animations, and making scroll-reveal sections immediately visible so no content is ever hidden for these users -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .home-section, .wg-portfolio .card, .wg-pages .card, .wg-experience .card, .btn, .navbar-nav .nav-link, #scrollTopBtn { transition: none !important; animation: none !important; } .home-section { opacity: 1 !important; transform: none !important; } #scrollTopBtn.show { opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* -------------------------------------------------------------------------- 12. Abstract / Summary Box Used in the 'Fresh from Oven' and 'Open Dataset' sections for cleaner text -------------------------------------------------------------------------- */ .abstract-box { background-color: #f8f9fa; border-left: 4px solid #3f51b5; border-radius: 4px; padding: 1.2rem; font-size: 0.95rem; line-height: 1.6; color: #4a4a4a; height: 180px; overflow-y: auto; margin: 1.5rem 0; box-shadow: inset 0 0 10px rgba(0,0,0,0.02); } body.dark .abstract-box { background-color: #212529; color: #e0e0e0; border-left-color: #64b5f6; box-shadow: inset 0 0 10px rgba(255,255,255,0.02); } /* Custom minimal scrollbar for the abstract box */ .abstract-box::-webkit-scrollbar { width: 6px; } .abstract-box::-webkit-scrollbar-track { background: transparent; } .abstract-box::-webkit-scrollbar-thumb { background: rgba(63, 81, 181, 0.3); border-radius: 4px; } body.dark .abstract-box::-webkit-scrollbar-thumb { background: rgba(100, 181, 246, 0.3); }