/* Custom CSS Reset and Variables for a Modern, Dark Earth Tone Aesthetic */ :root { /* Color Palette: Dark, Earth Tone Contrast */ --color-primary: #2C3539; /* Deep Charcoal/Slate Background (Dark) */ --color-secondary: #708090; /* Muted Gray-Blue/Sage Accent (Lighter Earth Tone) */ --color-text: #F7F9F9; /* Off-White/Light Text for contrast */ --color-text-light: #B0B9C2; /* Subtle, Lighter Text/Secondary Text */ --color-highlight: #A0BCC2; /* Highlight/Hover Pale Blue */ --color-error: #CC6666; /* Subtle error/alert color */ --color-border: #444E54; /* Darker border color */ --color-card-bg: #3A454B; /* Slightly lighter dark background for cards/elements */ /* Layout Variables */ --header-height: 5rem; /* Standardizing the header height */ --scrollbar-width: 17px; /* Typical scrollbar width for compensation */ /* Typography (Max 3 Fonts) */ --font-heading: 'Playfair Display', Georgia, serif; /* Artistic Contrast */ --font-body: 'Montserrat', 'Helvetica Neue', sans-serif; /* Modern Readability */ --font-mono: 'Roboto Mono', 'Courier New', monospace; /* Technical Content */ /* Spacing */ --spacing-unit: 1rem; } /* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); color: var(--color-text); /* Light text on dark background */ background-color: var(--color-primary); line-height: 1.6; scroll-behavior: smooth; /* Adding padding to prevent content from being hidden by fixed header */ padding-top: var(--header-height); transition: padding-right 0.3s ease; /* Smooth transition for the fix */ } /* NEW FIX: This class is applied to the when the menu is open. It hides the main page scrollbar and adds padding to fill the space the scrollbar occupied, preventing the content from shifting. */ body.no-scroll { overflow: hidden; padding-right: var(--scrollbar-width); } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text); line-height: 1.2; margin-bottom: var(--spacing-unit); } a { color: var(--color-secondary); text-decoration: none; transition: color 0.3s ease, border-color 0.3s ease; } a:hover, a:focus { color: var(--color-highlight); text-decoration: underline; } /* ------------------------------------------------ */ /* Header & Nav Styling (Updated for Fixed Header) */ /* ------------------------------------------------ */ .site-header { display: flex; justify-content: space-between; align-items: center; height: var(--header-height); /* Set height using variable */ padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); background-color: var(--color-card-bg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Make the header stationary at the top */ position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; /* High Z-index to ensure it sits on top of everything */ } .site-title { font-size: 1.5rem; letter-spacing: 0.1rem; margin: 0; color: var(--color-highlight); /* Use the lighter accent here */ } .initials { font-family: var(--font-mono); font-size: 1.2rem; font-weight: bold; color: var(--color-secondary); } /* Collapsible Menu Button */ #menu-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; display: flex; flex-direction: column; justify-content: space-around; width: 2rem; height: 1.7rem; } .icon-bar { display: block; width: 100%; height: 3px; background-color: var(--color-text); /* Light lines on dark header */ transition: transform 0.3s ease; } /* Collapsible Menu (Sidebar) - Positioned under the header */ .sidebar { position: fixed; top: var(--header-height); /* Starts sliding from below the header */ left: 0; transform: translateX(-100%); width: 250px; height: calc(100vh - var(--header-height)); /* Menu takes up remaining screen height */ background-color: var(--color-card-bg); padding: 2rem 0; box-shadow: 4px 0 10px rgba(0, 0, 0, 0.4); transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); z-index: 999; /* Lower than header */ /* Flexbox setup for menu and footer alignment */ display: flex; flex-direction: column; } .sidebar.open { transform: translateX(0); } .menu-title { padding: 0 2rem; margin-bottom: 1.5rem; color: var(--color-highlight); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; flex-shrink: 0; /* Prevents title from shrinking */ } .sidebar ul { list-style: none; flex-grow: 1; /* Allows the link list to take up available space */ overflow-y: auto; /* Scroll if list is too long */ } /* UPDATED: Sidebar Link Styling for Icons */ .sidebar a { /* Use flexbox to align the icon and text vertically and manage spacing */ display: flex; align-items: center; padding: 0.8rem 2rem; color: var(--color-text-light); font-weight: 500; } /* NEW: Icon Spacing */ .sidebar .menu-icon { font-size: 1.1rem; /* Slightly larger icon */ margin-right: 1rem; /* Space between the icon and the text */ width: 1.25rem; /* Ensures all icons take up the same space for better alignment */ text-align: center; } .sidebar a:hover, .sidebar a.active { background-color: var(--color-secondary); color: var(--color-text); text-decoration: none; } /* New: Menu Footer Styling */ .sidebar-footer { padding: 1rem 2rem; margin-top: auto; /* Pushes the footer to the bottom */ text-align: center; font-family: var(--font-heading); font-size: 1.8rem; font-weight: bold; color: var(--color-secondary); border-top: 1px solid var(--color-border); flex-shrink: 0; } /* Overlay to block interaction when menu is open */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Darker overlay */ z-index: 998; /* Lower than menu */ display: none; } .overlay.visible { display: block; } /* ------------------------------------------------ */ /* Main Content Layout */ /* ------------------------------------------------ */ #content { max-width: 1200px; margin: 0 auto; padding: calc(var(--spacing-unit) * 3) var(--spacing-unit); } /* Sections */ section { margin-bottom: calc(var(--spacing-unit) * 4); padding: calc(var(--spacing-unit) * 2); background-color: var(--color-card-bg); /* Dark background for sections */ border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } /* Home Page Specifics */ .intro-section { text-align: center; padding: calc(var(--spacing-unit) * 3); background-color: transparent; box-shadow: none; } .intro-section h2 { font-size: 2.5rem; margin-bottom: 0.5rem; } /* ------------------------------------------------ */ /* Background and Info Section (Home Page) */ /* ------------------------------------------------ */ .background-section h3 { text-align: center; border-bottom: 2px solid var(--color-secondary); padding-bottom: 0.5rem; margin-bottom: 2rem; } .info-card { margin: 0 auto; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.5rem; } .info-card article { background-color: var(--color-primary); /* Slightly darker than card background */ padding: 1.5rem; border-radius: 6px; border-left: 5px solid var(--color-secondary); border-right: 5px solid var(--color-secondary); } .info-card h4 { color: var(--color-highlight); margin-top: 0; text-align: center; } /* ------------------------------------------------ */ /* Polaroid Style Featured Categories (Home Page) */ /* ------------------------------------------------ */ .featured-section h3 { text-align: center; border-bottom: 2px solid var(--color-secondary); padding-bottom: 0.5rem; margin-bottom: 2rem; } .polaroid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; padding: 2rem; } .polaroid-link { display: block; text-align: center; color: var(--color-text); transition: transform 0.3s ease, box-shadow 0.3s ease; } .polaroid-link:hover { color: var(--color-highlight); text-decoration: none; transform: translateY(-5px) rotate(1deg); } .polaroid-frame { background-color: var(--color-primary); /* Darker frame color */ padding: 15px 15px 30px 15px; border: 1px solid var(--color-border); /* Darker, but artistic shadow */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(60, 60, 60, 0.8) inset; transform: rotate(-1deg); width: 100%; } .polaroid-image { width: 100%; height: 200px; background-color: var(--color-secondary); /* Placeholder color */ display: flex; justify-content: center; align-items: center; color: var(--color-text); font-family: var(--font-mono); margin-bottom: 10px; } .polaroid-caption { font-family: var(--font-heading); font-size: 1.2rem; margin-top: 0.5rem; } /* ------------------------------------------------ */ /* Category Page Styling (Tech, Gaming, etc.) */ /* ------------------------------------------------ */ .category-header { text-align: center; background-color: transparent; box-shadow: none; } .category-header h2 { font-size: 2.2rem; color: var(--color-highlight); } .project-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .project-summary-card { background-color: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-summary-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); } .project-summary-card h3 { padding: 1rem 1.5rem 0.5rem; margin: 0; } .project-summary-card a { color: var(--color-text); text-decoration: none; } .project-summary-card a:hover { color: var(--color-highlight); text-decoration: underline; } .project-image-placeholder { height: 180px; background-color: var(--color-primary); border-bottom: 1px solid var(--color-border); display: flex; justify-content: center; align-items: center; color: var(--color-text-light); font-family: var(--font-mono); } .project-description { padding: 0 1.5rem 1rem; color: var(--color-text-light); font-size: 0.95rem; } .project-tags { padding: 0 1.5rem 1.5rem; } .project-tags span { display: inline-block; background-color: var(--color-secondary); color: var(--color-text); font-size: 0.75rem; padding: 0.3rem 0.6rem; margin-right: 0.5rem; border-radius: 4px; font-family: var(--font-body); } /* ------------------------------------------------ */ /* Footer (main page footer) */ /* ------------------------------------------------ */ footer { text-align: center; padding: var(--spacing-unit); border-top: 1px solid var(--color-border); color: var(--color-text-light); font-size: 0.85rem; margin-top: 2rem; } /* ------------------------------------------------ */ /* Responsiveness (Mobile Adjustments) */ /* ------------------------------------------------ */ @media (max-width: 768px) { .site-title { font-size: 1.3rem; } .sidebar { width: 100%; /* Full width on small screens */ } .info-card { grid-template-columns: 1fr; } .polaroid-grid { gap: 2rem; padding: 1rem; } .polaroid-frame { padding: 10px 10px 20px 10px; } .polaroid-image { height: 150px; } }