block. */ margin-inline: auto; /* Adds spacing above/below and inside the main content area. */ padding: 2rem; } .hero { /* Styles for the full-width hero section. */ /* Image and gradient dealt with by hero frontmatter */ background-size: cover; /* Ensures the image always covers the entire element. */ background-position: center; /* Centers the image. */ color: white; /* Sets text color to white for contrast. */ min-height: 60vh; /* Makes the hero at least 60% of the viewport height. */ display: grid; /* Uses CSS Grid for simple centering. */ place-content: center; /* The Grid shortcut to center content both horizontally and vertically. */ text-align: center; /* Centers the text. */ padding: 2rem; /* Adds padding for small screens. */ } .hero-content h1 { /* Styles for the main hero headline. */ font-size: 3.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 1rem; } .hero-content p { /* Styles for the hero sub-headline. */ font-size: 1.5rem; max-width: 60ch; /* Keeps the sub-headline from becoming too wide. */ margin: auto; /* Centres content */ } /* === 3. Navigation (Mobile-First) === */ /* Styles from here on are for mobile by default. */ /* The main nav bar container. */ .top-nav { position: sticky; /* Makes the nav bar "stick" to the top when scrolling. */ top: 0; /* Sticks it to the very top. */ z-index: 10; /* Ensures it stays on top of other content. */ background-color: var(--bg-color); /* Gives it a solid background. */ border-bottom: 1px solid #ddd; /* Adds a subtle separator line. */ padding: 0.5rem 0; /* <-- FIX: Removed horizontal padding */ /* Uses Flexbox to align the logo and hamburger button. */ display: flex; justify-content: space-between; /* Pushes logo to the left and hamburger to the right. */ align-items: center; /* Vertically centers them. */ } @media (prefers-color-scheme: dark) { /* Dark mode override for the nav border. */ .top-nav { border-bottom-color: #333; } } .nav-logo { /* Styles for the site logo/name. */ font-weight: bold; font-size: 1.5rem; text-decoration: none; color: var(--text-color); padding: 0.5rem 0 0.5rem 2rem; /* <-- FIX: Added left padding */ } /* --- Mobile Hamburger Menu ("Checkbox Hack") --- */ /* 1. Hide the actual checkbox. We only care about its "checked" state. */ .nav-toggle-checkbox { display: none; } /* 2. Style the which acts as the visible hamburger button. */ .nav-toggle-label { display: block; /* Show the hamburger button on mobile. */ cursor: pointer; /* Show a pointer on hover. */ padding: 10px 2rem 10px 10px; /* <-- FIX: Added right padding */ } /* 3. Style the inside the label as the middle hamburger line. */ .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { display: block; position: relative; background-color: var(--text-color); width: 28px; height: 3px; border-radius: 2px; transition: all 0.2s ease-in-out; /* Adds a nice animation. */ } /* 3a. Use pseudo-elements for the top and bottom lines. */ .nav-toggle-label span::before, .nav-toggle-label span::after { content: ''; position: absolute; } .nav-toggle-label span::before { top: -8px; /* Position the top line. */ } .nav-toggle-label span::after { top: 8px; /* Position the bottom line. */ } /* 4. The mobile navigation menu (the list of links). */ .nav-links { display: none; /* Hide the menu by default. */ flex-direction: column; /* Stack the links vertically. */ position: absolute; /* Take it out of the page flow. */ top: 100%; /* Position it directly below the nav bar. */ left: 0; width: 100%; /* Make it full-width. */ background-color: var(--bg-color); /* Give it a solid background. */ border-bottom: 1px solid #ddd; /* Separator line. */ padding: 0; margin: 0; } @media (prefers-color-scheme: dark) { .nav-links { border-bottom-color: #333; } } /* 5. THE HACK: Show the menu when the checkbox is checked. */ /* The ~ (general sibling selector) finds .nav-links which is a sibling of the checkbox. */ .nav-toggle-checkbox:checked ~ .nav-links { display: flex; /* Show the menu. */ } /* 6. Styles for individual mobile menu items. */ .nav-links li { list-style: none; width: 100%; text-align: center; margin: 0; padding: 0; } .nav-links li a { display: block; /* Make the entire link area clickable. */ padding: 1rem; border-bottom: 1px solid #eee; /* Separator between links. */ color: var(--text-color); } @media (prefers-color-scheme: dark) { .nav-links li a { border-bottom-color: #333; } } /* 7. Mobile Dropdown Menu (part of the main list). */ .dropdown-menu { list-style: none; padding: 0; margin: 0; background-color: #f9f9f9; /* Slightly different background to show it's a sub-menu. */ } @media (prefers-color-scheme: dark) { .dropdown-menu { background-color: #222; } } .dropdown-menu li a { padding-left: 2rem; /* Indent the sub-menu items. */ font-size: 1rem; /* Make them slightly smaller. */ border-bottom: 1px solid #ddd; } @media (prefers-color-scheme: dark) { .dropdown-menu li a { border-bottom-color: #444; } } /* === 4. Desktop Styles (Tablet & up) === */ /* This media query applies styles ONLY if the screen is 768px or wider. */ @media (min-width: 768px) { .top-nav { /* Restore horizontal padding for the desktop layout */ padding: 0.5rem 2rem; } /* 1. Hide the hamburger button on desktop. */ .nav-toggle-label { display: none; } .nav-logo { padding: 0.5rem 0; /* Reset logo padding */ } /* 2. Restore the horizontal desktop navigation. */ .nav-links { display: flex; /* Show the nav links. */ flex-direction: row; /* Arrange them horizontally. */ position: static; /* Put them back in the flow of the nav bar. */ width: auto; /* Let them take up only as much space as they need. */ border: none; /* Remove mobile borders. */ background-color: transparent; /* Remove mobile background. */ gap: 2rem; /* Add space between links. */ } /* 3. Restore default list item styles. */ .nav-links li { width: auto; } /* 4. Restore default link styles. */ .nav-links li a { padding: 0.5rem 0; border: none; } .nav-links a:hover { color: var(--primary); /* Use the primary color for hover. */ text-decoration: none; /* No underline on nav links. */ } /* 5. Desktop Dropdown Container. */ li.dropdown { position: relative; /* Required to position the dropdown-menu relative to this item. */ } /* 6. Desktop Dropdown Menu (hidden by default). */ .dropdown-menu { display: none; /* Hide it. */ position: absolute; /* Position it relative to the .dropdown parent. */ top: 100%; /* Place it directly below the "Services" link. */ left: 0; background-color: var(--bg-color); border: 1px solid #ddd; border-top: none; /* Avoid double border. */ min-width: 200px; /* Give it a set width. */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a soft shadow. */ } @media (prefers-color-scheme: dark) { .dropdown-menu { border-color: #333; } } /* 7. Show desktop dropdown on hover. */ li.dropdown:hover .dropdown-menu { display: block; /* Show the menu when hovering the parent

. */ } /* 8. Desktop Dropdown Link Styles. */ .dropdown-menu li a { padding: 0.75rem 1rem; /* Add padding inside the dropdown. */ font-size: 1.1rem; white-space: nowrap; /* Prevent links from wrapping to a new line. */ } /* 9. Desktop Dropdown Link Hover Style. */ .dropdown-menu li a:hover { background-color: var(--primary); /* Add a background color on hover. */ color: #fff; /* Change text to white for contrast. */ } } /* === 5. Large Desktop Styles === */ /* This media query applies ONLY if the screen is 60rem (960px) or wider. */ @media (min-width: 60rem) { main { /* Overrides the '70ch' rule from earlier. */ max-width: 50%; /* Constrains the main text to the central 50% of the screen. */ /* The 'margin-inline: auto' from the base 'main' rule keeps it centered. */ } } /* === 6. Typography & Content Styles === */ /* Add default spacing below paragraphs, lists, and headings */ p, ul, ol, h1, h2, h3, h4, h5, h6 { margin-block-start: 0; margin-block-end: 1.5rem; /* Adds space *after* these elements */ } /* Style the headings to create a clear size hierarchy */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; /* Tighter line height for large text */ } h1 { font-size: 3.5rem; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.25rem; } /* Style other common elements */ blockquote { border-left: 4px solid var(--primary); padding-left: 1rem; font-style: italic; color: #555; margin-inline-start: 0; margin-inline-end: 0; } @media (prefers-color-scheme: dark) { blockquote { color: #999; } } /* === 7. Interactive & Form Styles === */ /* Add a transition to links for smooth color changes */ a { color: var(--primary); text-decoration: none; transition: color 0.2s ease-in-out; /* <-- ADD THIS */ } /* Add a style for buttons */ button, a.button { display: inline-block; padding: 0.75rem 1.5rem; font-size: 1.1rem; font-weight: 600; text-decoration: none; border: none; border-radius: 4px; background-color: var(--primary); color: #fff; cursor: pointer; transition: all 0.2s ease-in-out; } button:hover, a.button:hover { text-decoration: none; background-color: var(--accent); color: #fff; transform: translateY(-2px); /* Adds a subtle "lift" effect */ } .cta-button { color: purple; }