/* Montserrat font is linked in the of each HTML file */ /* Pastel theme, subtle fade-in transitions, minimal layout */ * { margin: 0; padding: 0; box-sizing: border-box; } /* === General Styles & Theme === */ :root { --bg-color: #bea4c8; /* Light gray background for pages */ --bg-color-light: #d1c1d37d; /* Lighter version of the dark color for bottom of gradient */ --accent-color: #927b99; /* Accent pastel (light blue) for buttons/links */ --text-color: #333; /* Primary text color (dark gray) */ --muted-text: #555; /* Secondary text color */ --link-color: #b1b1b3; /* Link color (pastel violet) */ --link-hover-color: #b46eca; /* Link hover color (darker violet) */ --heading-font: 'Playfair Display', serif; /* Elegant serif font for headings */ --body-font: 'Inter', sans-serif; /* Clean sans-serif for body text */ /* Animation timing variables - reduced duration for better performance */ --anim-duration: 0.5s; /* Base animation duration - reduced from 0.7s */ --anim-timing: ease-out; /* Simpler easing function for better performance */ --stagger-delay: 0.1s; /* Reduced delay between staggered items */ /* Navigation dimensions for consistency */ --nav-height-desktop: 50px; --nav-item-width: 100px; /* Title section spacing */ --title-top-spacing: 3rem; /* Space above page titles */ --description-margin: 2.5rem; /* Space below page descriptions */ } /* Theme Toggle Button Styling */ #themeToggle { position: fixed; bottom: 25px; left: 25px; width: 45px; height: 45px; background-color: var(--accent-color); color: white; border: none; border-radius: 50%; cursor: pointer; z-index: 9999999; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 6px rgba(0,0,0,0.16); opacity: 0.9; font-size: 18px; transition: all 0.3s ease; } #themeToggle:hover { background-color: var(--link-hover-color); transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.25); opacity: 1; } /* Go To Top Button Styling - matched with theme toggle */ #goToTop { opacity: 0.9; transition: all 0.3s ease; } #goToTop:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.25); } .theme-icon { position: absolute; transition: opacity 0.3s ease, transform 0.3s ease; font-size: 18px; /* Control size of the icon */ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: white; /* Ensure SVG is visible */ } .theme-icon svg { width: 18px; height: 18px; fill: currentColor; } .sun-icon { opacity: 1; transform: translateY(0); } .moon-icon { opacity: 0; transform: translateY(10px); } .dark-mode .sun-icon { opacity: 0; transform: translateY(-10px); } .dark-mode .moon-icon { opacity: 1; transform: translateY(0); } /* Dark Mode Theme */ .dark-mode { --bg-color: #2d2438; /* Dark purple-gray background */ --bg-color-light: #3a2f47; /* Slightly lighter version for gradient */ --accent-color: #a07eae; /* Lighter accent color for better visibility on dark bg */ --text-color: #e6e6e6; /* Off-white text color */ --muted-text: #b0b0b0; /* Light gray for secondary text */ --link-color: #c9b6d9; /* Lighter link color for better contrast */ --link-hover-color: #d6a2e8; /* Brighter accent for hover states */ } /* Apply smooth transitions for theme switching */ body, a, .project-card, .project-overlay, .media-wrapper, .three-container, header, footer, .article-gallery .gallery-item, .article-quote, .article-list, .project-title, .project-desc, h1, h2, h3, h4, h5, p { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } /* Dark mode specific overrides for elements with hardcoded colors */ .dark-mode .project-card { background: #2a2234; border-color: #463a54; } .dark-mode .media-wrapper, .dark-mode .three-container { background-color: #1e1923; } .dark-mode .project-overlay { background: #2a2234; } .dark-mode header, .dark-mode footer { background-color: rgba(20, 17, 23, 0.8); } .dark-mode .article-gallery .gallery-item { background: #2a2234; } .dark-mode .article-quote, .dark-mode .article-list { background: linear-gradient(to right, rgba(69, 49, 84, 0.7), transparent 80%); } .dark-mode .project-card::before { background: linear-gradient(45deg, #463a54, #584166); } .dark-mode .resume-container, .dark-mode .article-image figcaption, .dark-mode .gallery-item figcaption, .dark-mode .video-caption, .dark-mode .model-caption { background: #2a2234; color: var(--muted-text); } /* Dark mode overrides for resume and contact sections */ .dark-mode [data-page="about"] .resume-section, .dark-mode [data-page="about"] #contact { background-color: #473b5c; /* Even lighter than before */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); border: 1px solid #5d4f73; /* Lighter border color */ color: var(--text-color); } .dark-mode [data-page="about"] .resume-section:hover, .dark-mode [data-page="about"] #contact:hover { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); } /* Additional overrides for resume container in dark mode */ .dark-mode [data-page="about"] .resume-container { background: #473b5c; /* Even lighter than before */ border-color: #5d4f73; /* Lighter border color */ } /* Improve form field contrast in dark mode */ .dark-mode [data-page="about"] input, .dark-mode [data-page="about"] textarea { background-color: #544767; /* Even lighter input background */ border-color: #5d4f73; /* Lighter border color */ color: #e6e6e6; } /* Dark mode overrides for resume and contact sections - enhanced specificity */ .dark-mode[data-page="about"] .resume-section, .dark-mode[data-page="about"] #contact, body.dark-mode [data-page="about"] .resume-section, body.dark-mode [data-page="about"] #contact, body.dark-mode [data-theme-section="resume"], body.dark-mode [data-theme-section="contact"] { background-color: #473b5c !important; /* Even lighter than before */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important; border: 1px solid #5d4f73 !important; /* Lighter border color */ color: var(--text-color) !important; } .dark-mode[data-page="about"] .resume-section:hover, .dark-mode[data-page="about"] #contact:hover, body.dark-mode [data-page="about"] .resume-section:hover, body.dark-mode [data-page="about"] #contact:hover, body.dark-mode [data-theme-section="resume"]:hover, body.dark-mode [data-theme-section="contact"]:hover { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4) !important; } /* Additional overrides for resume container in dark mode - enhanced specificity */ .dark-mode[data-page="about"] .resume-container, body.dark-mode [data-page="about"] .resume-container, body.dark-mode [data-theme-section="resume"] .resume-container { background: #473b5c !important; /* Even lighter than before */ border-color: #5d4f73 !important; /* Lighter border color */ } /* Improve form field contrast in dark mode - enhanced specificity */ .dark-mode[data-page="about"] input, .dark-mode[data-page="about"] textarea, body.dark-mode [data-page="about"] input, body.dark-mode [data-page="about"] textarea, body.dark-mode [data-theme-section="contact"] input, body.dark-mode [data-theme-section="contact"] textarea { background-color: #544767 !important; /* Even lighter input background */ border-color: #5d4f73 !important; /* Lighter border color */ color: #e6e6e6 !important; } /* === Animation Keyframes === */ /* Simplified animations that only use transform and opacity for better performance */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); /* Reduced travel distance */ } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-15px); /* Reduced travel distance */ } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(15px); /* Reduced travel distance */ } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); /* Less extreme scale change */ } to { opacity: 1; transform: scale(1); } } @keyframes borderPulse { 0% { box-shadow: 0 0 0 0 rgba(146, 123, 153, 0.3); /* Reduced opacity */ } 70% { box-shadow: 0 0 0 5px rgba(146, 123, 153, 0); /* Reduced size */ } 100% { box-shadow: 0 0 0 0 rgba(146, 123, 153, 0); } } /* Base animation classes - added will-change for better performance */ .animate { opacity: 0; animation-duration: var(--anim-duration); animation-timing-function: var(--anim-timing); animation-fill-mode: forwards; will-change: opacity, transform; } .fade-in { animation-name: fadeIn; opacity: 0; animation: fadeIn 0.8s var(--anim-timing) forwards; } .slide-up { animation-name: slideUp; } .slide-in-left { animation-name: slideInLeft; } .slide-in-right { animation-name: slideInRight; } .scale-in { animation-name: scaleIn; } /* Staggered animation delays */ .delay-1 { animation-delay: calc(var(--stagger-delay) * 1); } .delay-2 { animation-delay: calc(var(--stagger-delay) * 2); } .delay-3 { animation-delay: calc(var(--stagger-delay) * 3); } .delay-4 { animation-delay: calc(var(--stagger-delay) * 4); } .delay-5 { animation-delay: calc(var(--stagger-delay) * 5); } /* Respect user's reduced motion preference */ @media (prefers-reduced-motion: reduce) { .animate, .project-card, #hero, #hero h1, #hero .tagline, .viewer-container, #categories, .category-card, .page-description, .profile-pic, .social-links, #about-me p, #contact, #contact-form label, #contact-form input, #contact-form textarea, #contact-form button, .resume-section, .resume-actions, main > h1 { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } } /* Prevent layout shifts and jittery transitions between pages - improved for smoother transitions */ html, body { height: 100%; width: 100%; overflow-x: hidden; /* Prevent horizontal scrolling during transitions */ font-display: swap; /* Add font-display to improve text rendering during font loading */ } /* Use a pastel background on the whole page and updated fonts */ body { margin: 0; font-family: 'Montserrat', sans-serif; background: linear-gradient(to bottom, var(--bg-color) 0%, var(--bg-color-light) 100%); background-attachment: fixed; /* Keep the gradient fixed when scrolling */ color: var(--text-color); line-height: 1.6; scroll-behavior: smooth; cursor: default; font-weight: 300; /* Lighter font weight for a more minimalist look */ letter-spacing: 0.01em; /* Slightly increased letter spacing */ opacity: 1; /* Always keep body visible - remove animation */ /* Reserve space for elements that will animate in */ min-height: 100vh; /* Add smooth transition for page transitions */ transition: opacity 0.05s ease; } /* Class for when page is transitioning */ body.page-transitioning { opacity: 0.95; /* Slightly fade out when transitioning */ } /* Headings typography with new font */ h1, h2, h3, h4, h5 { font-weight: 600; /* Not too heavy */ margin: 0.5em 0; letter-spacing: -0.01em; /* Slightly tighter letter spacing for headings */ } h1 { font-size: 2.2em; /* Slightly larger */ text-align: center; margin-top: var(--title-top-spacing); /* Increased top spacing */ position: relative; /* For potential decoration */ } h2 { font-size: 1.6em; margin-top: 1.2em; } p { margin: 0.5em 0 1.2em; font-weight: 300; /* Lighter weight for body text */ line-height: 1.8; /* Increased line height for better readability */ } /* Page description styling - updated for consistent transitions */ .page-description { text-align: center; max-width: 650px; /* Reduced from 800px to create a narrower description box */ margin: 0 auto var(--description-margin); /* Increased bottom margin */ color: var(--muted-text); font-size: 1.1em; padding: 0 1.5em; /* Added padding to ensure text doesn't crowd the edges on small screens */ line-height: 1.7; /* Slightly increased line height for better readability */ opacity: 0; /* Start with 0 opacity for fade-in effect */ animation: none; /* Don't use CSS animation, controlled by JS instead */ /* Reserve space to prevent layout shift during animation */ min-height: 4em; position: relative; /* For absolute positioning of the decorative line */ padding-bottom: 2rem; /* Space for the decorative line */ will-change: opacity; /* Optimize for animation */ transform: translateZ(0); /* Force hardware acceleration */ } /* Add decorative gradient line after page description */ .page-description::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 180px; /* Width of the decorative line */ height: 3px; /* Height of the line */ background: linear-gradient(to right, transparent, var(--accent-color), transparent); border-radius: 2px; opacity: 0.8; margin-top: 0.5rem; /* Space between text and line */ } /* Link styles */ a { color: var(--link-color); text-decoration: none; /* Ensure no underline */ transition: color 0.3s ease; } a:hover { color: var(--link-hover-color); text-decoration: none; /* Ensure no underline on hover */ } a.active { /* Highlight for current page link in nav */ text-decoration: none; /* Ensure no underline */ font-weight: 700; color: #b46eca; /* Explicit purple color instead of using variable for clarity */ } /* === Navigation Bar === */ header { background-color: #333333cc; /* semi-transparent dark gray for slight overlay effect */ backdrop-filter: blur(5px); position: sticky; top: 0; width: 100%; z-index: 100; opacity: 1; /* Ensure header is always visible */ /* Remove fixed height to allow dynamic sizing */ min-height: var(--nav-height-desktop); /* Minimum height instead of fixed height */ /* Fix header to prevent jittery animation when navigating */ transition: none; /* Remove any transitions that might cause jitter */ will-change: auto; /* Don't hint to browser to create a new layer unless needed */ } .nav-menu { list-style: none; display: flex; flex-wrap: wrap; /* Allow wrapping for responsive design */ align-items: center; justify-content: center; margin: 0; padding: 0; opacity: 1; /* Ensure nav menu is always visible */ min-height: var(--nav-height-desktop); /* Minimum height instead of fixed height */ } .nav-menu li { margin: 0; padding: 0 1em; height: 100%; display: flex; align-items: center; justify-content: center; min-width: var(--nav-item-width); /* Ensure consistent widths */ box-sizing: border-box; } .nav-menu a { font-family: 'Montserrat', sans-serif; font-weight: 400; padding: 0.25em 0; text-transform: uppercase; /* Uppercase for nav items - minimalist touch */ font-size: 0.85em; /* Smaller size for nav */ letter-spacing: 0.08em; /* Increased spacing for nav */ width: 100%; text-align: center; position: relative; color: #fff; } .nav-menu a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%; background-color: var(--link-hover-color); transform: translateX(-50%); transition: width 0.3s ease; } .nav-menu a:hover::after { width: 100%; } .nav-menu a.active { color: #b46eca; /* Explicit purple to ensure it's visible against the dark nav background */ } .nav-menu a.active::after { width: 100%; background-color: #b46eca; /* Make the underline purple too */ height: 3px; /* Make the underline slightly thicker for emphasis */ opacity: 0.8; } .nav-menu a:hover { color: var(--link-hover-color); } /* === Landing Section Styles === */ .landing-section { text-align: center; padding: 2em 1em; opacity: 0; animation: fadeIn 1s var(--anim-timing) 0.3s forwards; } .landing-section h1 { font-size: 2.2em; text-align: center; opacity: 0; animation: slideUp 0.8s var(--anim-timing) 0.5s forwards; } .landing-section .subtitle { font-size: 1.2em; color: var(--muted-text); margin-bottom: 1.5em; opacity: 0; animation: slideUp 0.8s var(--anim-timing) 0.7s forwards; } .placeholder-box { width: 100%; height: 60vh; max-height: 600px; margin: 0 auto; border: 2px solid #e0e0e0; background: #e6f0f8; position: relative; opacity: 0; animation: fadeIn 0.8s var(--anim-timing) 0.9s forwards; will-change: opacity; border-radius: 8px; } .explore-title { margin-top: 2rem; opacity: 0; animation: fadeIn 0.8s var(--anim-timing) 1.1s forwards; } .explore-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5em; margin-top: 1em; } .explore-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text-color); border: 2px solid #ddd; border-radius: 8px; padding: 1em; width: 150px; height: 150px; transition: transform 0.3s ease, background-color 0.3s ease; opacity: 0; animation: slideUp 0.7s var(--anim-timing) forwards; } .explore-card:hover { cursor: pointer; background-color: #f0f8ff; /* Revert to light tint on hover */ transform: translateY(-3px); } .explore-grid .explore-card:nth-child(1) { animation-delay: 1.2s; } .explore-grid .explore-card:nth-child(2) { animation-delay: 1.3s; } .explore-grid .explore-card:nth-child(3) { animation-delay: 1.4s; } .explore-grid .explore-card:nth-child(4) { animation-delay: 1.5s; } /* === Projects Styling === */ .projects-section { padding: 2em 1em; max-width: 1200px; margin: 0 auto; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5em; padding: 1em; max-width: 1200px; margin: 0 auto; } .project-card { background: #fff; border: 4px solid #f1ddf1; position: relative; z-index: 0; border-radius: 5px; overflow: hidden; text-decoration: none; color: var(--text-color); transition: border-color 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; display: flex; flex-direction: column; opacity: 0; animation: scaleIn 0.7s var(--anim-timing) forwards; transform-origin: center center; will-change: transform, box-shadow; cursor: pointer; } .project-grid .project-card:nth-child(1) { animation-delay: 0.1s; } .project-grid .project-card:nth-child(2) { animation-delay: 0.2s; } .project-grid .project-card:nth-child(3) { animation-delay: 0.3s; } .project-grid .project-card:nth-child(4) { animation-delay: 0.4s; } .project-card::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; background: linear-gradient(45deg, #fce7ea, #e2f0f9); z-index: -1; transition: opacity 0.2s ease; opacity: 0; border-radius: 5px; } .project-card:hover::before { opacity: 1; } .project-card:hover { transform: translateY(-12px) scale(1.05); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); border-color: var(--link-hover-color); z-index: 2; } .project-card:active { transform: translateY(-6px) scale(1.02); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); transition: transform 0.1s ease, box-shadow 0.1s ease; } .project-card:hover img { transform: scale(1.03); transition: transform 0.5s ease; } .project-card img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.3s ease; transform-origin: center; } .project-card h3 { font-size: 1.1em; font-weight: 600; margin: 0.75em; text-align: left; max-width: 90%; padding-left: 10px; transition: transform 0.3s ease, color 0.3s ease; will-change: transform, color; } .project-card p { font-size: 0.95em; color: var(--muted-text); margin: 0 0.75em 0.75em; text-align: left; max-width: 90%; padding: 0 8px 0 10px; line-height: 1.5; } .project-card:hover h3 { background: linear-gradient(to top, var(--text-color), var(--link-hover-color)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease; transform: scale(1.05); } /* === About Section Styling === */ .about-section { max-width: 600px; margin: 2em auto; text-align: center; padding: 0 1em; opacity: 0; animation: fadeIn 0.8s var(--anim-timing) 0.2s forwards; } .profile-pic-wrapper { width: 150px; /* Match profile pic width */ height: 150px; /* Match profile pic height */ margin: 2em auto; /* Increased margin and auto for horizontal centering */ display: flex; /* Use flexbox for centering */ justify-content: center; align-items: center; } .profile-pic { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--accent-color); opacity: 0; animation: scaleIn 0.8s var(--anim-timing) 0.4s forwards; } .social-links { margin: 1em 0; display: flex; justify-content: center; gap: 1em; opacity: 0; animation: fadeIn 0.8s var(--anim-timing) 0.6s forwards; } .social-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--accent-color); color: white; font-size: 1.5em; transition: transform 0.3s ease, background-color 0.3s ease; } /* Make LinkedIn icon use image in default state */ .social-icon[href*="linkedin"] { background-color: transparent; background-image: url('../../assets/icons/linkedin/InBug-Black.png'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 0; color: transparent; display: block; position: relative; } .social-icon[href*="linkedin"]::after { content: none; /* Remove the "in" text */ } .social-icon[href*="linkedin"] i { opacity: 0; /* Hide the original icon */ } .social-icon:hover { transform: translateY(-3px); } .social-icon[href*="linkedin"]:hover { background-image: url('../../assets/icons/linkedin/LI-In-Bug.png'); background-color: transparent; } .social-icon[href*="github"]:hover { background-color: #333; /* GitHub dark gray */ } .about-section p { text-align: left; opacity: 0; animation: slideUp 0.8s var(--anim-timing) 0.8s forwards; } /* Resume section styling */ .resume-buttons { display: flex; justify-content: center; gap: 1em; margin: 1.5em 0; opacity: 0; animation: slideUp 0.7s var(--anim-timing) 1.0s forwards; } .view-resume-btn, .download-resume-btn { display: inline-block; padding: 0.75em 1.5em; border-radius: 4px; font-weight: 600; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.05em; transition: background-color 0.3s ease, transform 0.3s ease; cursor: pointer; } .view-resume-btn { background-color: var(--accent-color); color: white; } .download-resume-btn { background-color: #4CAF50; color: white; } .view-resume-btn:hover, .download-resume-btn:hover { transform: translateY(-2px); } #resume-preview { margin: 1.5em 0; } .resume-container { border: 2px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: white; } .resume-container button { display: block; margin: 1em auto; padding: 0.5em 1em; background-color: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; } /* Contact Form Styling */ .contact-section { max-width: 600px; margin: 2em auto; padding: 0 1em 3em; opacity: 0; animation: fadeIn 0.8s var(--anim-timing) 1.2s forwards; } .contact-form { display: flex; flex-direction: column; } .contact-form label { font-weight: 400; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.08em; opacity: 0; animation: slideUp 0.5s var(--anim-timing) forwards; margin-top: 0.75em; } .contact-form input, .contact-form textarea { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 1em; padding: 0.75em; border: 2px solid #ccc; border-radius: 4px; opacity: 0; animation: slideUp 0.5s var(--anim-timing) forwards; margin-top: 0.25em; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(163,206,241,0.3); } .contact-form button { font-family: 'Montserrat', sans-serif; font-size: 1em; font-weight: 600; margin-top: 1.5em; padding: 0.7em 1em; color: #fff; background-color: var(--accent-color); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; opacity: 0; animation: slideUp 0.5s var(--anim-timing) 1.6s forwards; } .contact-form button:hover { background-color: #534182; } .contact-form label:nth-of-type(1), .contact-form input:nth-of-type(1) { animation-delay: 1.3s; } .contact-form label:nth-of-type(2), .contact-form input:nth-of-type(2) { animation-delay: 1.4s; } .contact-form label:nth-of-type(3), .contact-form textarea { animation-delay: 1.5s; } /* Slide-up overlay styling */ .project-overlay { position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); width: 90%; /* Reduced from 100% to 90% */ height: 80vh; /* Slightly reduced height */ background: #f6f2f7; /* Match the contact form background color */ box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15); border-top-left-radius: 16px; border-top-right-radius: 16px; border-radius: 16px; /* Full rounded corners since it's now smaller */ z-index: 1000; transition: bottom 0.4s ease-out; overflow-y: auto; backdrop-filter: blur(10px); /* Add a frosted glass effect */ -webkit-backdrop-filter: blur(10px); /* Safari support */ border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */ } .project-overlay.open { bottom: 0; } .overlay-content { position: relative; padding: 2.5rem 1.5rem 2rem; max-width: 1000px; margin: 0 auto; } .overlay-content h2 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-color); padding: 0 1.5rem; /* Add padding to match article content */ } /* Project metadata styling */ .project-metadata { font-size: 0.95rem; color: var(--muted-text); margin-bottom: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0 1.5rem; /* Add padding to match article content */ } .close-overlay { position: absolute; right: 1.5rem; top: 1rem; background: none; border: none; font-size: 1.5rem; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; transition: color 0.2s; z-index: 10; } .close-overlay:hover { color: #000; } /* Project content styling inside overlay */ .overlay-content .project-meta { font-size: 0.9rem; color: var(--muted-text); margin-bottom: 1.5rem; } /* Media container and wrappers */ .project-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .media-wrapper { border-radius: 8px; overflow: hidden; background-color: #f5f5f5; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); aspect-ratio: 16/9; } .media-wrapper img, .media-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; } .model-wrapper { min-height: 300px; } .three-container { width: 100%; height: 100%; min-height: 300px; background-color: #f0f0f0; } /* Project link button */ .project-link-container { text-align: center; margin-top: 2rem; } .project-link-button { display: inline-block; padding: 0.8rem 1.5rem; background-color: var(--accent-color); color: white; text-decoration: none; border-radius: 4px; font-weight: 500; transition: background-color 0.2s, transform 0.2s; } .project-link-button:hover { background-color: #534182; transform: translateY(-2px); } /* Responsive adjustments */ @media (max-width: 768px) { .main-nav ul { flex-wrap: wrap; } .project-overlay { height: 90vh; } .project-media { grid-template-columns: 1fr; } .explore-grid { flex-direction: column; align-items: center; } .category-card { width: 240px; /* Slightly smaller on tablets, but still wider than before */ } .category-thumb { height: 160px; /* Adjusted height for tablets */ } } @media (max-width: 600px) { .nav-menu { flex-direction: column; height: auto; padding: 10px 0; } .nav-menu li { margin: 0.5em 0; width: 100%; min-width: unset; padding: 0.3em 0; } header { height: auto; } main { min-height: calc(100vh - var(--nav-height-desktop)); } #hero h1 { font-size: 1.5em; } #hero .tagline { font-size: 1em; } /* Mobile dropdown navigation styles */ .nav-menu-mobile li { display: none; /* Hide all items by default */ opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease; height: 0; overflow: hidden; } /* Only show active item when collapsed */ .nav-menu-mobile li.active { display: flex; opacity: 1; transform: translateY(0); height: auto; padding: 0.5em 0; cursor: pointer; } /* Add dropdown indicator to active item */ .dropdown-indicator { display: inline-block; margin-left: 8px; font-size: 0.7em; transition: transform 0.3s ease; } /* Expanded state */ .nav-menu-mobile.expanded li { display: flex; opacity: 1; transform: translateY(0); height: auto; padding: 0.5em 0; } /* Rotate dropdown indicator when expanded */ .nav-menu-mobile.expanded li.active .dropdown-indicator { transform: rotate(180deg); } .category-card { width: 220px; /* Even smaller on mobile but still wider than original */ padding: 1.2em; } .category-thumb { height: 140px; /* Adjusted height for mobile */ } } /* Loading indicator for media */ .loading-indicator { display: flex; justify-content: center; align-items: center; height: 100%; background-color: #f0f0f0; color: #666; } .loading-indicator::after { content: "Loading..."; font-size: 0.9rem; } /* Page Transition Effect - improved */ .page-transition { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, var(--bg-color-light) 33%, var(--bg-color) 100%); z-index: -1; /* Move behind content so it's not visible by default */ opacity: 0; pointer-events: none; transition: opacity 0.15s ease; will-change: opacity; transform: translateZ(0); /* Force hardware acceleration */ backface-visibility: hidden; /* Prevent flickering in some browsers */ } /* Ensure body transitions are smooth */ body, main, .page-description, main > h1 { backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; } /* Remove page transition animation that was causing issues */ @keyframes bodyFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Thumbnail size styling */ .thumbnail { width: 300px; /* Set your desired width */ height: 260px; /* Set your desired height */ object-fit: cover; /* Ensure the image covers the entire area without distortion */ } /* Project info section */ .project-info { padding: 0.75em; flex: 1; display: flex; flex-direction: column; overflow: hidden; transition: background-color 0.3s ease; } .project-title { font-size: 1.1em; font-weight: 600; margin: 0 0 0.5em 0; text-align: left; max-width: 90%; padding-left: 10px; transition: transform 0.3s ease, color 0.3s ease; will-change: transform, color; } .project-desc { font-size: 0.95em; color: var(--muted-text); overflow-y: auto; height: 85px; margin-bottom: 0.5em; text-align: left; max-width: 90%; padding: 0 8px 0 10px; line-height: 1.5; scrollbar-width: thin; scrollbar-color: transparent transparent; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } /* Webkit scrollbar styling */ .project-desc::-webkit-scrollbar { width: 4px; } .project-desc::-webkit-scrollbar-track { background: transparent; } .project-desc::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 4px; opacity: 0; transition: opacity 0.2s ease; } /* Show scrollbar on hover */ .project-desc:hover::-webkit-scrollbar-thumb { opacity: 1; } /* Show scrollbar for Firefox on hover */ .project-desc:hover { scrollbar-color: var(--accent-color) transparent; } /* Project hover effects */ .project-card:hover .project-desc { color: var(--text-color); transform: scale(1.02); transition: all 0.3s ease; } .project-card:hover .project-info { background-color: rgba(251, 243, 253, 0.4); transition: background-color 0.4s ease; } /* === About Page Specific Styles === */ [data-page="about"] { --heading-font: 'Cormorant Garamond', serif; --body-font: 'Work Sans', sans-serif; } [data-page="about"] body { letter-spacing: 0.02em; } [data-page="about"] #about-me { max-width: 800px; margin: 2em auto; padding: 0 2em; text-align: center; /* Center all content in about section */ } [data-page="about"] #about-me p { line-height: 1.9; font-size: 1.05em; margin-bottom: 1.5em; opacity: 0; /* Start with 0 opacity for animation */ transform: translateY(15px); /* Start position for slide-up effect */ will-change: opacity, transform; /* Performance hint for browser */ } [data-page="about"] #about-me h1 { opacity: 0; /* Start with 0 opacity for animation */ will-change: opacity; /* Performance hint for browser */ margin-bottom: 1rem; } [data-page="about"] .resume-section { background-color: #f8f8f8; padding: 2.5em; border-radius: 8px; margin: 3em auto; max-width: 600px; /* Reduced from 800px to create a more contained box */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow */ transition: transform 0.3s ease, box-shadow 0.3s ease; } [data-page="about"] .resume-section:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); } [data-page="about"] .resume-section h2 { margin-bottom: 1.5em; text-align: center; } [data-page="about"] .resume-actions { display: flex; justify-content: center; gap: 1.5em; margin-bottom: 1.5em; opacity: 0; /* Start with 0 opacity */ animation: slideUp 0.8s var(--anim-timing) 0.9s forwards; /* Add fade-in animation with slight delay */ will-change: opacity, transform; /* Hint for browser optimization */ } [data-page="about"] #contact { background-color: #f6f2f7; padding: 2.5em; border-radius: 8px; margin: 3em auto; max-width: 650px; /* Reduced from 800px to match the resume section width */ transition: transform 0.3s ease, box-shadow 0.3s ease; } [data-page="about"] #contact:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); } [data-page="about"] #contact h2 { margin-bottom: 1.5em; text-align: center; } [data-page="about"] #contact form { max-width: 600px; margin: 0 auto; } [data-page="about"] footer { margin-top: 3em; padding: 1em; background-color: #333333cc; backdrop-filter: blur(5px); } /* This ensures animations apply to all pages with main content */ body[data-page="xr"] main > h1, body[data-page="3d"] main > h1, body[data-page="environment"] main > h1, body[data-page="2d"] main > h1, body[data-page="about"] main > h1 { opacity: 0; /* Start with 0 opacity for fade-in effect */ animation: none; /* No animation by default, JS will add it */ margin-top: var(--title-top-spacing); /* Consistent spacing */ will-change: opacity; transform: translateZ(0); /* Force hardware acceleration */ } /* Fix for main content to prevent jitter when changing pages */ main { opacity: 1; min-height: calc(100vh - var(--nav-height-desktop)); /* Ensure there's always space for content minus header height */ width: 100%; overflow-x: hidden; /* Prevent horizontal scrollbar during animations */ margin-top: 0; /* Remove any margin that could cause jitter */ } /* Category thumbs styling */ .category-thumb { width: 100%; height: 180px; /* Increased from 100px */ margin-bottom: 0.8em; /* Slightly increased margin */ background-color: #ccc; border-radius: 4px; background-size: cover; background-position: center; transition: transform 0.3s ease; overflow: hidden; } /* Fallback colors if no thumbnail is available */ .xr-thumb:not([style*="background-image"]) { background-color: #cceeff; } .d3-thumb:not([style*="background-image"]) { background-color: #ffe0cc; } .env-thumb:not([style*="background-image"]) { background-color: #e0ffcc; } .d2-thumb:not([style*="background-image"]) { background-color: #f0ccff; } /* Zoom effect on hover */ .category-card:hover .category-thumb { transform: scale(1.05); } /* Example: distinct pastel background for each category thumb */ .xr-thumb { background-color: #cceeff; } /* light blue */ .d3-thumb { background-color: #ffe0cc; } /* light peach */ .env-thumb { background-color: #e0ffcc; } /* light green */ .d2-thumb { background-color: #f0ccff; } /* light purple */ /* Button styling */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.75em 1.5em; border-radius: 4px; font-weight: 600; border: none; transition: background-color 0.3s ease, transform 0.3s ease; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 1em; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.08em; } .view-button { background-color: var(--accent-color); color: white; } .download-button { background-color: #4CAF50; color: white; } .close-button { background-color: #f44336; color: white; } .view-button:hover, .download-button:hover, .close-button:hover { transform: translateY(-2px); } /* Hide elements with this class */ .hidden { display: none; } /* For canvas elements inside viewers */ #heroViewer canvas { width: 100% !important; height: 100% !important; display: block; } /* For canvas elements inside viewers */ #viewer3d canvas { width: 100% !important; height: 100% !important; display: block; } /* === Category Section on Home === */ #categories { padding: 2em 1em; text-align: center; opacity: 0; animation: fadeIn 0.8s var(--anim-timing) 1.1s forwards; will-change: opacity; } .category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5em; margin-top: 1em; } .category-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text-color); border: 2px solid #ddd; border-radius: 8px; padding: 1.5em; width: 280px; /* Increased from 220px for more horizontal width */ transition: transform 0.3s ease, background-color 0.3s ease; opacity: 0; animation: slideUp 0.7s var(--anim-timing) forwards; } .category-card:hover { cursor: pointer; background-color: #f0f8ff; /* Revert to light tint on hover */ transform: translateY(-3px); } .category-grid .category-card:nth-child(1) { animation-delay: 1.2s; } .category-grid .category-card:nth-child(2) { animation-delay: 1.3s; } .category-grid .category-card:nth-child(3) { animation-delay: 1.4s; } .category-grid .category-card:nth-child(4) { animation-delay: 1.5s; } /* === Hero Section === */ #hero { text-align: center; padding: 2em 1em; opacity: 0; animation: fadeIn 1s var(--anim-timing) 0.3s forwards; } #hero h1 { font-size: 2.2em; text-align: center; opacity: 0; animation: slideUp 0.8s var(--anim-timing) 0.5s forwards; } #hero .tagline { font-size: 1.2em; color: var(--muted-text); margin-bottom: 1.5em; opacity: 0; animation: slideUp 0.8s var(--anim-timing) 0.7s forwards; } /* 3D viewer container styling */ .viewer-container { width: 100%; height: 60vh; max-height: 600px; margin: 0 auto; border: 2px solid #e0e0e0; background: #e6f0f8; position: relative; opacity: 0; animation: fadeIn 0.8s var(--anim-timing) 0.9s forwards; will-change: opacity; border-radius: 8px; overflow: hidden; } /* Article Content Styling - Enhanced for v1.3 */ .article-content { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; color: var(--text-color); line-height: 1.8; } .article-section { margin: 2rem 0; opacity: 0; animation: fadeIn 0.5s ease forwards; } .article-section + .article-section { margin-top: 3rem; } .article-heading { font-family: var(--heading-font); color: var(--accent-color); margin: 2.5rem 0 1.5rem; position: relative; padding-left: 1rem; line-height: 1.4; } .article-heading::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--accent-color), var(--bg-color-light)); border-radius: 2px; } .article-text { font-size: 1.1rem; margin-bottom: 1.5rem; color: var(--text-color); line-height: 1.7; } .article-text p { margin-bottom: 1.2rem; } .article-text a { color: var(--accent-color); text-decoration: none; border-bottom: 1px dotted var(--accent-color); transition: border-color 0.2s ease; } .article-text a:hover { border-color: var(--link-hover-color); } .article-image { margin: 2rem auto; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12); border-radius: 8px; overflow: hidden; max-width: 100%; } .article-image img { width: 100%; height: auto; display: block; } .article-image figcaption, .gallery-item figcaption, .video-caption, .model-caption { padding: 1rem; font-size: 0.9rem; color: var(--muted-text); background: linear-gradient(to right, var(--bg-color-light), transparent); font-style: italic; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .article-quote { position: relative; margin: 2.5rem 0; padding: 1.5rem 2rem 1.5rem 3rem; background: linear-gradient(to right, var(--bg-color-light), transparent 80%); border-radius: 8px; font-style: italic; color: var(--text-color); line-height: 1.6; } .article-quote::before { content: '"'; font-size: 3.5rem; color: var(--accent-color); opacity: 0.4; position: absolute; top: -0.5rem; left: 0.5rem; line-height: 1; font-family: serif; } .article-quote p { margin: 0; position: relative; } .article-quote cite { display: block; margin-top: 0.8rem; font-style: normal; font-weight: 500; color: var(--accent-color); font-size: 0.9rem; text-align: right; } .article-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2.5rem 0; } .gallery-item { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .gallery-item img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; } .article-video { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin: 2rem auto; } .article-video video { width: 100%; display: block; } .article-model { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--bg-color-light), #fff); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin: 2rem auto; min-height: 400px; } .article-list { background: linear-gradient(to right, var(--bg-color-light), transparent 80%); padding: 1.5rem 1.5rem 1.5rem 3rem; border-radius: 8px; margin: 2rem 0; } .article-list li { margin-bottom: 0.8rem; line-height: 1.6; position: relative; } .article-list li:last-child { margin-bottom: 0; } .article-list li::marker { color: var(--accent-color); } .article-divider { border: none; height: 2px; background: linear-gradient(to right, transparent, var(--accent-color), transparent); margin: 3rem 0; opacity: 0.3; } /* Responsive adjustments */ @media (max-width: 768px) { .article-gallery { grid-template-columns: 1fr; } .article-quote { padding: 1.5rem 1rem 1.5rem 2rem; } } /* Article Link Styling */ .article-link-container { margin: 2rem 0; text-align: center; } /* Button style links */ .article-button { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 4px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.08em; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .article-button:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } /* Inline style links */ .article-inline-link { display: inline-block; font-weight: 500; text-decoration: none; position: relative; transition: all 0.2s ease; border-bottom: 1px dotted; padding-bottom: 2px; } .article-inline-link:hover { border-bottom-style: solid; } /* Color variants for buttons */ .primary-button { background-color: var(--accent-color); color: white; } .primary-button:hover { background-color: var(--link-hover-color); color: white; } .secondary-button { background-color: #6c757d; color: white; } .secondary-button:hover { background-color: #5a6268; color: white; } .success-button { background-color: #4CAF50; color: white; } .success-button:hover { background-color: #3d8b40; color: white; } .accent-button { background-color: #b46eca; color: white; } .accent-button:hover { background-color: #9c5bb1; color: white; } /* Color variants for inline links */ .primary-link { color: var(--accent-color); border-color: var(--accent-color); } .primary-link:hover { color: var(--link-hover-color); border-color: var(--link-hover-color); } .secondary-link { color: #6c757d; border-color: #6c757d; } .secondary-link:hover { color: #5a6268; border-color: #5a6268; } .success-link { color: #4CAF50; border-color: #4CAF50; } .success-link:hover { color: #3d8b40; border-color: #3d8b40; } .accent-link { color: #b46eca; border-color: #b46eca; } .accent-link:hover { color: #9c5bb1; border-color: #9c5bb1; } /* Dark mode overrides for links */ .dark-mode .primary-link { color: #a07eae; border-color: #a07eae; } .dark-mode .primary-link:hover { color: #d6a2e8; border-color: #d6a2e8; } .dark-mode .accent-link { color: #d6a2e8; border-color: #d6a2e8; } .dark-mode .accent-link:hover { color: #e9c9f7; border-color: #e9c9f7; } /* Global Footer Styling - consistent across all pages */ footer { background-color: #333333cc; /* Match the menu bar background */ backdrop-filter: blur(5px); padding: 1em; text-align: center; width: 100%; margin-top: 3em; } footer p { color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.08em; margin: 0; } /* Dark mode overrides with enhanced specificity - make sure these reflect the new width */ .dark-mode[data-page="about"] #contact, body.dark-mode [data-page="about"] #contact, body.dark-mode [data-theme-section="contact"] { background-color: #473b5c !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important; border: 1px solid #5d4f73 !important; color: var(--text-color) !important; max-width: 650px !important; /* Match the actual light mode width of 650px */ }