/* Pronunciation text next to site title, for global navbar control */ .site-pronounce { font-size: 0.5em; font-weight: 400; opacity: 0.7; margin-left: 0.25em; vertical-align: middle; } /* NAVIGATION COLORS */ header, .site-footer { background-color: #69b578; } .nav-links a { color: #254d32; font-weight: 700; font-size: 1.15rem; margin-left: 1.5rem; letter-spacing: 0.02em; transition: color 0.2s; } .nav-links a:hover { color: #3A7d44; } /* Global Styles for Ghiloni.art */ /* * FONT IMPORTS * Importing the 'Chivo' and 'Spectral' fonts from Google Fonts. * These will be used for headings and body text, respectively. */ @import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;700&family=Spectral:wght@400;700&display=swap'); /* * CSS VARIABLES * Defining the color palette and font families as CSS variables for easy reuse and maintenance. * This makes it simple to update the site's look and feel from one central place. */ :root { /* The primary background color for the entire site. */ --background-color: #eaefd1; /* The primary text color, chosen for high contrast against the background. */ --text-color: #181d27; /* The main accent color, used for links, buttons, and other highlights. */ --primary-accent: #254d32; /* A secondary accent color for more subtle highlights. */ --secondary-accent: #3A7d44; /* The font for all headings. */ --heading-font: 'Chivo', sans-serif; /* The font for all body text. */ --body-font: 'Spectral', serif; } /* * GENERAL BODY STYLING * Applies the foundational styles to the element. */ body { /* Sets the background color for all pages. */ background-color: var(--background-color); /* Sets the default text color. */ color: var(--text-color); /* Sets the default font for the body. */ font-family: var(--body-font); /* Removes the default margin that browsers apply to the body. */ margin: 0; /* Removes the default padding. */ padding: 0; /* Uses a border-box model, which makes layout calculations more intuitive. */ box-sizing: border-box; /* Enables smooth scrolling when navigating via anchor links. */ scroll-behavior: smooth; } /* * TYPOGRAPHY * Defines styles for headings and paragraphs. */ h1, h2, h3, h4, h5, h6 { /* Sets the font for all heading levels. */ font-family: var(--heading-font); } p { /* Sets a default line height for better readability. */ line-height: 1.6; } /* * LINKS * Styles for all anchor () tags. */ a { /* Sets the link color to the primary accent color. */ color: var(--primary-accent); /* Removes the default underline from links. */ text-decoration: none; /* Adds a subtle transition for color changes on hover. */ transition: color 0.3s ease; } a:hover { /* Darkens the link color slightly on hover for visual feedback. */ color: var(--secondary-accent); } /* * NAVIGATION BAR * Basic styles for the main navigation. */ nav { /* Uses flexbox for easy alignment of nav items. */ display: flex; /* Puts space between the logo/title and the navigation links. */ justify-content: space-between; /* Vertically centers the items in the nav bar. */ align-items: center; /* Adds some padding around the navigation bar. */ padding: 1rem 2rem; /* A subtle shadow to lift the nav off the page. */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* * FOOTER * Styles for the site footer. */ footer { /* Adds padding to the top and bottom of the footer. */ padding: 2rem 0; /* Centers the text within the footer. */ text-align: center; /* A top border to separate the footer from the main content. */ border-top: 1px solid var(--secondary-accent); /* A bit of margin above the footer. */ margin-top: 3rem; } /* * BUTTONS * A general button style to be used across the site. */ .btn { /* Sets the background color to the primary accent. */ background-color: var(--primary-accent); /* Sets the text color to be light for contrast. */ color: var(--background-color); /* Padding inside the button. */ padding: 0.75rem 1.5rem; /* Removes the default border. */ border: none; /* A slightly rounded corner. */ border-radius: 5px; /* Changes the cursor to a pointer on hover. */ cursor: pointer; /* Sets the font to the heading font for consistency. */ font-family: var(--heading-font); /* Removes default text decoration. */ text-decoration: none; /* Adds a transition for hover effects. */ transition: background-color 0.3s ease; } .btn:hover { /* Darkens the button on hover. */ background-color: var(--secondary-accent); } /* * MOBILE NAVIGATION * Styles for the hamburger menu icon on smaller screens. */ .mobile-menu-icon { /* Initially hidden on larger screens. */ display: none; /* Changes the cursor to a pointer. */ cursor: pointer; } /* This class will be toggled with JavaScript to show/hide the mobile menu. */ .nav-links.active { display: block; } /* * SITE TITLE / LOGO * Styles for the left-side logo text in the navigation bar. */ .site-title { /* Pronunciation next to Caroline Ghiloni: half size globally */ .site-title .site-pronounce { font-size: 50%; font-weight: 400; opacity: 0.7; margin-left: 0.25em; vertical-align: middle; } font-family: var(--heading-font); font-size: 2.1rem; font-weight: 700; letter-spacing: 0.03em; color: var(--primary-accent); text-decoration: none; margin-right: 2rem; transition: color 0.2s; } .site-title:hover, .site-title:focus { color: var(--secondary-accent); } /* * NAVIGATION LINK STYLES (DESKTOP) */ .nav-links a { font-size: 1.35rem; font-family: var(--heading-font); color: var(--primary-accent); font-weight: 600; padding: 0.2em 0.7em; border-radius: 4px; transition: color 0.2s, background 0.2s; } .nav-links a:hover, .nav-links a:focus { color: var(--background-color); background: var(--primary-accent); } /* * MEDIA QUERY FOR RESPONSIVE NAVIGATION * This block applies only on screens smaller than 768px. */ @media (max-width: 768px) { /* Hides the regular navigation links. */ .nav-links { display: none; /* Stacks the links vertically. */ flex-direction: column; /* Takes up the full width of the screen. */ width: 100%; /* Positions the menu absolutely, relative to the nav bar. */ position: absolute; /* Places it right below the nav bar. */ top: 60px; /* Adjust as needed based on nav height */ left: 0; /* Sets the background color. */ background-color: var(--background-color); /* Adds a shadow. */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Styles for individual links in the mobile menu. */ .nav-links a { /* Makes each link a block element. */ display: block; /* Adds padding. */ padding: 1rem; /* Centers the text. */ text-align: center; /* Adds a border between links. */ border-bottom: 1px solid var(--secondary-accent); font-size: 1.5rem; font-family: var(--heading-font); font-weight: 600; } /* Shows the hamburger icon. */ .mobile-menu-icon { display: block; font-size: 2.2rem; } }