/* css/styles.css Global Stylesheet for Macha Makings This file contains the foundational styles that apply across the entire website. It defines the color palette, typography, and default styles for common elements like the body, links, navigation, and footer. By centralizing these styles, we ensure a consistent look and feel on every page. */ /* --- Google Font Imports --- */ /* We are importing the 'Inconsolata' and 'Newsreader' fonts from Google Fonts. 'Inconsolata' is a monospace font chosen for headings to give a clean, elegant feel. 'Newsreader' is a serif font chosen for body text for its high readability. */ @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Newsreader:opsz,wght@6..72,400;700&display=swap'); /* --- CSS Variables --- */ /* Using CSS variables (custom properties) allows us to define our color palette and other reusable values in one place. This makes it incredibly easy to update the site's theme later on. If the client wants a new background color, we only have to change it here. */ :root { --background-color: linear-gradient(to bottom, #9cffde 0%,#38b38a 61%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ --text-color: #000000; /* Standard text color */ --primary-accent: #82CFA8; /* Primary accent for hover effects, etc. */ --secondary-accent: #288063; /* Secondary accent for other elements */ --heading-font: 'Inconsolata', monospace; /* Font for all h1, h2, etc. */ --body-font: 'Newsreader', serif; /* Font for paragraphs and other text */ } /* --- Global Reset and Body Styles --- */ /* This is a simple reset to remove default browser margins and padding, and to set box-sizing to 'border-box'. 'border-box' makes layout math more intuitive, as padding and borders are included in the element's width and height. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Base styles for the element. We apply the background color, default text color, and body font defined in our variables. We also set a minimum height of 100vh and use flexbox to ensure the footer sticks to the bottom of the page, even on short content pages. */ body { background: linear-gradient(to bottom, #9cffde 0%,#38b38a 61%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: var(--text-color); font-family: var(--body-font); line-height: 1.6; /* Improves readability */ display: flex; flex-direction: column; min-height: 100vh; } /* The
element will grow to fill any available space between the header and footer, which is key to the sticky footer effect. */ main { flex-grow: 1; } /* --- Typography --- */ /* Styles for all heading levels. We apply the 'Inconsolata' font and set a bottom margin to create space between headings and the text that follows. */ h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); margin-bottom: 1rem; /* 1rem = 16px by default */ } /* Styles for paragraphs */ p { margin-bottom: 1rem; } /* Styles for anchor (link) tags */ a { color: var(--text-color); /* Links will have the same color as text */ text-decoration: none; /* Remove the default underline */ transition: color 0.3s ease; /* Smooth color transition on hover */ } /* The :hover pseudo-class defines the style when a user mouses over a link. We change the color to the primary accent color for a subtle effect. */ a:hover { color: var(--primary-accent); } /* --- Header and Navigation --- */ /* The
element contains the site's main navigation. We give it a subtle bottom border using the secondary accent color. */ header { padding: 1rem 2rem; border-bottom: 1px solid var(--secondary-accent); } /* The