/* === BASE STYLES === */ body { font-family: 'Azeret Mono', monospace; /* REMOVED background properties from body */ color: #000; margin: 0; padding: 0; min-height: 100vh; /* Ensures body is at least viewport height */ overflow-x: hidden; /* Prevent horizontal scrollbar from potential layout issues */ } /* New wrapper for the gradient background */ .gradient-background-wrapper { min-height: 100vh; /* Ensures it's at least one viewport high */ background: linear-gradient(to bottom, #ffffff 15%, #e0dcdc 70%, #a7a7a7 100%); background-repeat: no-repeat; /* background-attachment: fixed; -- REMOVED this, it was causing iOS issues */ background-size: 100% 100%; /* Make it cover the full height of THIS div */ position: relative; /* Needed if you have any absolutely positioned children inside */ /* If you add any padding to the body, you might need to adjust this wrapper's dimensions */ } /* Specific body style for homepage (index.html) to prevent scrolling */ /* This class should ONLY be applied to the tag of your homepage (e.g., index.html) */ body.homepage-locked { /* No changes needed here, as the problem was in the background property */ } .fade-in { animation: fadeIn 0.4s ease-in forwards; opacity: 0; } @keyframes fadeIn { to { opacity: 1; } } a { color: #000; text-decoration: underline; } a:hover { opacity: 0.7; } h1 { font-weight: 450; margin-bottom: 0.3em; letter-spacing: -0.02em; line-height: 1.2; } h2, h3{ font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; } h4, h5, h6 { font-weight: 300; letter-spacing: -0.02em; line-height: 1.2; } p { font-size: 90%; letter-spacing: -0.02em; line-height: 1.2; } .grey-text { color: #666666; } .no-underline { text-decoration: none !important; } img { border-radius: 10px; max-width: 100%; /* General image rule, allows responsiveness by default */ height: auto; /* General image rule, maintains aspect ratio by default */ } /* === LAYOUT === */ header { padding: 1.2rem; } main { padding: 2rem 2rem 4rem 2rem; /* Added 4rem for bottom padding (top, right, bottom, left) */ max-width: 1200px; /* Consistent max-width for main content area */ margin: 0 auto; position: relative; /* REMOVED/COMMENTED OUT: height: calc(100vh - 4rem); */ /* This line was likely contributing to fixed height issues on the homepage. Removing it allows 'main' to expand based on its content. */ box-sizing: border-box; /* Include padding in the height calculation */ } /* === HOMEPAGE (index.html) specific === */ .intro { display: flex; flex-direction: column; /* Default for mobile: stacked vertically */ gap: 20px; /* Space between flex items */ align-items: flex-start; /* Align items to the start (left) */ /* REMOVED: height: 100%; */ /* This was likely causing the profile image to be cut off within the 'intro' if 'main' or 'body' also had restricted height. Removing it allows '.intro' to expand as needed. */ } /* New container for centering phone number and image on mobile */ .contact-image-group { display: flex; flex-direction: column; align-items: center; /* Center horizontally */ width: 100%; /* Take full width of its parent */ margin-top: 20px; /* Space from text above */ flex-shrink: 0; /* Prevents this group from shrinking if space is tight */ } .phone-number { text-align: center; /* Center the text itself */ margin-bottom: 10px; /* Space between phone number and image */ margin-top: 0; /* Remove default paragraph top margin */ width: 100%; /* Ensure it spans the width to center text within */ } /* Mobile styles for .intro-image-container (applies below 768px) */ .intro-image-container { width: 55%; /* Keep 55% width on mobile as per your current setup */ max-width: 250px; /* Add a max-width to prevent it from becoming too large on tablets in portrait mode */ border: none; background-color: transparent; } /* Mobile styles for the image *inside* .intro-image-container */ .intro-image-container img { width: 100%; /* Image fills its container on mobile */ height: auto; /* Maintains aspect ratio */ object-fit: contain; /* Ensures the whole image is visible */ } /* Styles specifically for screens 768px wide or wider (desktop/tablet landscape) */ @media (min-width: 768px) { .intro { flex-direction: column; /* Desktop: stack text and image vertically */ justify-content: space-between; /* Pushes intro-text to top, contact-image-group to bottom */ align-items: flex-start; /* Align all items to the left */ /* REMOVED: height: 100%; */ /* Same as above, allows content to push the container height as needed */ } /* On desktop, the contact-image-group should be at the bottom */ .contact-image-group { position: static; /* Ensure it behaves as a normal flex item */ margin-top: auto; /* This pushes the group to the bottom when using space-between on parent */ display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; /* Prevent shrinking to ensure visibility */ } /* On desktop, the phone number should be left-aligned and retain some margin */ .phone-number { text-align: left; margin-bottom: 5px; margin-top: 0; width: auto; } .intro-text { flex: 1; /* Allows text to take available space */ padding-right: 20px; align-self: flex-start; /* If text content is long and causing clipping on very short viewports, consider: */ /* max-height: calc(100% - var(--contact-image-group-height) - var(--gap)); */ /* overflow-y: auto; */ } .intro-image-container { flex-shrink: 0; border: none; background-color: transparent; overflow: hidden; margin-top: 0; } .intro-image-container img { width: 140px; /* Adjusted size slightly smaller as requested */ height: auto; object-fit: contain; } } /* === PORTFOLIO GRID (portfolio.html) === */ .portfolio-grid { display: grid; grid-template-columns: 1fr; /* Single column for mobile */ gap: 2rem; /* Gap between grid items */ } @media (min-width: 768px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); /* Two columns for desktop */ } /* Hover effect for desktop only */ .portfolio-item:hover { opacity: 0.8; } } .portfolio-item { display: flex; flex-direction: column; /* Stack image and text vertically */ transition: transform 0.2s ease, opacity 0.2s ease; } /* The .portfolio-item:hover rule was moved inside the @media (min-width: 768px) block */ .portfolio-item a { text-decoration: none; color: inherit; display: flex; flex-direction: column; /* Ensure link content also stacks */ height: 100%; } .portfolio-item h2 { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; font-weight: 450; } .portfolio-item .tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; } .portfolio-item .tag { background-color: #e0e0e0; padding: 5px 10px; border-radius: 3px; font-size: 0.85em; color: #333; text-transform: capitalize; white-space: nowrap; } .portfolio-item .project-thumbnail { /* This is the CONTAINER for the image */ width: 100%; /* Takes full width of its parent */ position: relative; /* Needed for object-fit to work reliably with padding-top trick */ overflow: hidden; /* Important for border-radius to clip content and for object-fit */ border-radius: 10px; /* Re-added border-radius to container */ margin-top: 10px; /* Space from title/tags above */ border: 1px solid #ccc; /* Re-added border to container */ display: flex; /* Use flex to center image if it doesn't fill the container */ justify-content: center; /* Center image horizontally */ align-items: center; /* Center image vertically */ /* New styles for consistent square size */ padding-top: 100%; /* This makes the height equal to the width */ height: 0; /* Override previous height */ } .portfolio-item .project-thumbnail img { /* This styles the actual IMAGE inside the container */ position: absolute; /* Position absolutely within the padding-top trick container */ top: 0; left: 0; width: 100%; /* Image fills its container horizontally */ height: 100%; /* Image fills its container vertically */ object-fit: cover; /* This is key: it will cover the area, cropping if necessary */ border-radius: 10px; } /* === BACK BUTTON === */ .back-button { display: inline-block; margin-bottom: 1rem; font-size: 1.1em; text-decoration: none; color: #666666; font-weight: 500; } .back-button:hover { text-decoration: underline; } /* === Portfolio Page Heading === */ main h1:first-of-type { font-size: 2.5em; margin-bottom: 40px; } /* === PROJECT DETAIL PAGE (project-X.html) === */ .project-detail { max-width: 900px; /* Kept max-width for readability on very wide screens */ margin-left: 0; /* Align to the left */ margin-right: auto; /* Allow auto margin on the right to push it left */ padding-bottom: 2rem; } .project-detail h1 { font-size: 2.5em; margin-bottom: 0.5em; } .project-detail .tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; /* Adjusted margin-bottom to move tags closer to text */ } .project-detail .tag { background-color: #e0e0e0; padding: 5px 10px; border-radius: 5px; font-size: 0.85em; color: #333; text-transform: capitalize; } /* This targets the large main image in the detail page, if you decide to add one explicitly in HTML */ /* Or if loadProjectDetail.js places the main image here */ .project-detail .main-image { width: 100%; height: auto; max-height: 500px; /* Keep a max-height for large screens */ object-fit: contain; /* Ensure full image is seen */ margin: 1.5rem 0; border-radius: 10px; border: 1px solid #ccc; /* Border for the main image on project detail page */ } .project-detail .gallery { display: flex; /* Default to flex column for mobile */ flex-direction: column; /* Stack items vertically on mobile */ gap: 15px; margin-top: 2rem; margin-bottom: 2rem; } /* Media query for desktop layout */ @media (min-width: 768px) { .project-detail .gallery { display: grid; /* Change to grid for desktop */ grid-template-columns: repeat(3, 1fr); /* Three columns for desktop */ gap: 15px; /* Keep the gap */ } .project-detail .gallery img { /* Optional: If images still feel too large in 3 columns, you can add a max-width here */ /* For example: max-width: 250px; but this might not be needed with 3 columns */ } } .project-detail .gallery img, .project-detail .gallery video { /* Added the video selector here */ width: 100%; height: auto; object-fit: contain; /* Use 'contain' for videos to ensure whole video is seen */ border-radius: 10px; /* Rounds the corners */ border: 1px solid #ccc; /* Adds the border */ cursor: pointer; /* Keeps the pointer if you add a custom click behavior */ transition: transform 0.2s ease; } .project-detail .gallery video { /* Optional: Add a background color for video elements if they don't fill their container perfectly or if there are black bars due to aspect ratio, to blend with your gradient background */ background-color: #f0f0f0; /* Light grey, adjust to match your background visually */ } .project-detail .gallery img:hover { transform: scale(1.03); } /* === LIGHTBOX === */ .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .lightbox.show { opacity: 1; pointer-events: auto; } .lightbox img { max-width: 90%; max-height: 90%; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }