/* ============================================== STYLES.CSS — Moments by EM ============================================== This is the main (and only) stylesheet for the entire website. It's organized in sections so you can easily find what you need. */ /* ------------------------------------------ 1. CSS RESET ------------------------------------------ Browsers apply their own default styles (margins, padding, font sizes). A "reset" removes those defaults so we start from a clean slate and everything looks the same across different browsers. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; /* box-sizing: border-box makes sizing more intuitive. Without it, padding and borders are ADDED to the width you set. With it, padding and borders are INCLUDED in the width — much easier to work with. */ } /* ------------------------------------------ 2. CSS VARIABLES (Custom Properties) ------------------------------------------ Variables let us define values once and reuse them everywhere. If we ever want to change a color, we only change it here — not in 50 different places throughout the file. They are defined inside :root (which means "the whole document"). To use a variable: color: var(--primary-color); */ :root { /* Brand Colors */ --color-burgundy: #790300; /* Primary — headings, accents, logo "MOMENTS BY" */ --color-peach: #ffaf7f; /* Secondary — highlights, hover effects, logo "em" */ --color-warm-bg: #ffeadb; /* Warm background for sections */ --color-white: #ffffff; /* Clean white for content areas */ /* Text Colors */ --color-text: #790300; /* Main body text — deep burgundy, same as headings */ --color-text-light: #a03330; /* Lighter text for secondary info */ /* Spacing — using consistent spacing makes the design look professional */ --spacing-sm: 1rem; /* 16px — small spacing */ --spacing-md: 2rem; /* 32px — medium spacing */ --spacing-lg: 4rem; /* 64px — large spacing */ --spacing-xl: 6rem; /* 96px — extra large spacing */ /* Font Families — loaded via Google Fonts */ --font-body: 'Lato', sans-serif; /* Light, airy sans-serif for body text */ --font-heading: 'Bebas Neue', sans-serif; /* Bold block letters — close match to the logo */ /* Maximum width for content — prevents text from stretching too wide on large screens */ --max-width: 1200px; } /* ------------------------------------------ 3. BASE TYPOGRAPHY ------------------------------------------ These are the default text styles for the whole site. Individual elements can override these later. */ /* "scroll-behavior: smooth" on makes anchor links (like #main-content) scroll smoothly instead of jumping instantly. A small touch that feels polished. */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; /* Base font size — all rem values are relative to this */ font-weight: 300; /* Light weight for an airy, elegant feel */ line-height: 1.7; /* Slightly more spacing for readability */ color: var(--color-text); background-color: var(--color-white); } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-burgundy); line-height: 1.2; /* Tighter line spacing for headings looks better */ margin-bottom: var(--spacing-sm); text-transform: uppercase; /* Horizon is designed as an uppercase display font */ letter-spacing: 0.08em; /* Slightly spread letters — matches the logo style */ } /* Heading sizes — each level is smaller than the one above. This creates a clear visual hierarchy so visitors can scan the page easily. Sizes are slightly smaller than before because Horizon is a bold, heavy font. */ h1 { font-size: 2.2rem; } /* Main page title */ h2 { font-size: 1.7rem; } /* Section titles */ h3 { font-size: 1.3rem; } /* Sub-section titles */ h4 { font-size: 1.1rem; } /* Smaller titles */ p { margin-bottom: var(--spacing-sm); } a { color: var(--color-burgundy); text-decoration: none; /* Removes the default underline on links */ } a:hover { color: var(--color-peach); /* Links change to peach when you hover over them */ } img { max-width: 100%; /* Images never overflow their container */ height: auto; /* Keeps the image proportions correct */ display: block; /* Removes the small gap browsers add below images */ } /* ------------------------------------------ 4. UTILITY CLASSES ------------------------------------------ Small reusable classes for common patterns. A "container" centers content and limits its width. */ .container { max-width: var(--max-width); margin: 0 auto; /* "auto" on left and right = centered horizontally */ padding: 0 var(--spacing-md); } /* ------------------------------------------ 5. SKIP LINK (Accessibility) ------------------------------------------ Hidden by default, becomes visible when a keyboard user tabs to it. This is an accessibility best practice. */ .skip-link { position: absolute; top: -100%; /* Hidden off-screen */ left: var(--spacing-sm); background-color: var(--color-burgundy); color: var(--color-white); padding: 0.5rem 1rem; z-index: 1000; /* z-index controls stacking — higher = on top */ border-radius: 0.25rem; } .skip-link:focus { top: var(--spacing-sm); /* Slides into view when focused via keyboard */ color: var(--color-white); } /* ------------------------------------------ 6. HEADER & NAVIGATION ------------------------------------------ The header stays at the top of every page. We use Flexbox to lay out the logo and nav side by side. */ .site-header { background-color: var(--color-white); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-warm-bg); position: relative; } .header-inner { display: flex; align-items: center; justify-content: center; /* Center the navigation menu */ } /* Navigation list */ .nav-list { display: flex; list-style: none; /* Removes the bullet points from the list */ gap: var(--spacing-md); /* Space between each nav item */ } .nav-link { font-size: 0.95rem; font-weight: 500; text-transform: uppercase; /* Makes nav links ALL CAPS */ letter-spacing: 0.05em; /* Slightly spreads out the letters — looks refined */ color: var(--color-text); padding: 0.5rem 0; transition: color 0.3s ease; /* "transition" makes changes happen smoothly over time. Here, when the color changes on hover, it fades over 0.3 seconds instead of changing instantly. */ } .nav-link:hover, .nav-link.active { color: var(--color-burgundy); /* Active and hovered links turn burgundy */ } /* Hamburger button — hidden on desktop, visible on mobile */ .hamburger { display: none; /* Hidden by default (desktop) */ background: none; border: none; cursor: pointer; /* Shows the pointer hand on hover */ padding: 0.5rem; flex-direction: column; gap: 5px; position: absolute; right: var(--spacing-md); top: 50%; transform: translateY(-50%); } .hamburger-line { display: block; width: 25px; height: 2px; background-color: var(--color-burgundy); transition: all 0.3s ease; /* Smooth animation for the hamburger → X transition */ } /* ------------------------------------------ 7. FOOTER ------------------------------------------ */ .site-footer { background-color: var(--color-warm-bg); padding: var(--spacing-lg) 0 var(--spacing-md); /* No margin-top — the CTA image section flows directly into the footer */ } .footer-inner { text-align: center; } .footer-links { display: flex; justify-content: center; /* Centers the links horizontally */ flex-wrap: wrap; /* Allows links to wrap to next line on small screens */ list-style: none; gap: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-md); } .footer-links a { font-size: 0.9rem; color: var(--color-text); } .footer-links a:hover { color: var(--color-burgundy); } .footer-social { margin-bottom: var(--spacing-md); } .footer-social a { margin: 0 0.75rem; font-size: 0.9rem; color: var(--color-burgundy); font-weight: 500; } .footer-social a:hover { color: var(--color-peach); } .footer-copy { font-size: 0.85rem; color: var(--color-text-light); } /* ------------------------------------------ 8. HOME PAGE — Hero Section ------------------------------------------ The hero uses a background image that covers the entire section. Text sits on top of a semi-transparent overlay for readability. */ .hero { height: 80vh; /* "vh" = viewport height. 80vh means 80% of the browser window height. This makes the hero almost full-screen but leaves a peek of the next section. */ background-image: url('../images/hero.jpeg'); /* "../" means "go up one folder" — since we're in /css/, we go up to the root folder, then into /images/. This is called a "relative path". */ background-size: cover; /* The image scales to cover the entire area */ background-position: center; /* The image is centered (crops edges equally) */ background-repeat: no-repeat; } .hero-overlay { /* This creates a dark semi-transparent layer over the photo. rgba(0, 0, 0, 0.4) = black at 40% opacity. This makes white text readable on any background image. */ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; /* Vertically centers the content */ justify-content: center; /* Horizontally centers the content */ } .hero-content { text-align: center; color: var(--color-white); } /* Logo displayed inside the hero section */ .hero-logo { display: inline-block; margin-bottom: var(--spacing-sm); } .hero-logo img { height: 140px; width: auto; } .hero-content h1 { font-size: 3rem; color: var(--color-white); /* Override the default burgundy heading color */ margin-bottom: var(--spacing-sm); letter-spacing: 0.1em; /* Extra spacing for the large hero title */ } .hero-tagline { font-size: 0.8rem; letter-spacing: 0.08em; font-weight: 300; /* Light weight for an elegant feel */ line-height: 1.5; margin-bottom: var(--spacing-md); color: var(--color-white); } /* ------------------------------------------ 9. BUTTONS ------------------------------------------ Reusable button styles used across the site. We have two variants: primary (filled) and secondary (outlined). */ .btn { display: inline-block; /* inline-block lets us set width/padding on the element while still having it flow inline with text. */ padding: 0.875rem 2rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 2px; /* Very subtle rounded corners — stays minimal */ transition: all 0.3s ease; cursor: pointer; text-align: center; } .btn-primary { background-color: var(--color-white); color: var(--color-burgundy); border: 2px solid var(--color-white); } .btn-primary:hover { background-color: transparent; color: var(--color-white); } .btn-secondary { background-color: transparent; color: var(--color-burgundy); border: 2px solid var(--color-burgundy); } .btn-secondary:hover { background-color: var(--color-burgundy); color: var(--color-white); } /* ------------------------------------------ 10. HOME PAGE — Intro Section ------------------------------------------ */ .intro { background-color: var(--color-warm-bg); padding: var(--spacing-xl) 0; } .intro-content { max-width: 700px; /* Narrower than the full container for readability */ margin: 0 auto; /* Centered */ text-align: center; } .intro-content h2 { margin-bottom: var(--spacing-md); } .intro-text { font-size: 1.1rem; line-height: 1.8; /* Extra line spacing for a light, airy feel */ color: var(--color-text-light); } /* ------------------------------------------ 11. HOME PAGE — Featured Work Section ------------------------------------------ Uses CSS Grid to create a responsive image gallery. CSS Grid is a 2D layout system — perfect for image grids. */ .featured-work { padding: var(--spacing-xl) 0; text-align: center; } .featured-work h2 { margin-bottom: 0.5rem; } .section-subtitle { color: var(--color-text-light); margin-bottom: var(--spacing-lg); } .featured-grid { /* CSS Grid with 3 equal columns for a clean, uniform preview. Unlike the portfolio (which uses masonry for many images), the home page only has a few featured photos — a tidy grid looks more polished here. */ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .featured-item { overflow: hidden; /* Hides parts of the image that go outside the container */ border-radius: 2px; /* "aspect-ratio: 4/5" gives each cell a slightly tall rectangle. This works well for both horizontal and vertical photos — vertical ones show more, horizontal ones get a gentle crop. It's less aggressive than the old 3/2 which cut vertical photos in half. */ aspect-ratio: 4 / 5; } .featured-item img { width: 100%; height: 100%; object-fit: cover; /* object-fit: cover fills the space while keeping proportions. Combined with the 4/5 aspect ratio, photos look consistent without being cropped too harshly. */ display: block; transition: transform 0.5s ease; } .featured-item:hover img { transform: scale(1.05); /* On hover, the image zooms in slightly (5%). Combined with overflow:hidden on the parent, this creates a smooth zoom effect without the image overflowing its box. */ } .featured-cta { margin-top: var(--spacing-md); } /* ------------------------------------------ 12. HOME PAGE — CTA (Call-to-Action) Section ------------------------------------------ Similar to the hero: a full-width background image with overlay. This creates a strong visual ending to the page before the footer. */ .cta-section { background-image: url('../images/IMG_3000.jpeg'); background-size: cover; background-position: center; background-repeat: no-repeat; } .cta-overlay { width: 100%; padding: var(--spacing-xl) 0; background-color: rgba(0, 0, 0, 0.5); /* Slightly darker than the hero overlay */ } .cta-content { text-align: center; max-width: 600px; margin: 0 auto; } .cta-content h2 { color: var(--color-white); margin-bottom: var(--spacing-sm); } .cta-content p { color: rgba(255, 255, 255, 0.9); /* White at 90% — slightly softer */ font-size: 1.1rem; margin-bottom: var(--spacing-md); } /* ------------------------------------------ 13. PAGE HEADER (used on inner pages) ------------------------------------------ A clean, centered header used on Portfolio, About, Services, Contact. Simpler than the home page hero — just a title and optional subtitle. */ .page-header { padding: var(--spacing-lg) 0; text-align: center; background-color: var(--color-warm-bg); } /* Logo displayed inside the page header title block */ .page-header-logo { display: inline-block; margin-bottom: var(--spacing-sm); } .page-header-logo img { height: 140px; width: auto; } .page-header h1 { margin-bottom: 0.5rem; } .page-intro { color: var(--color-text-light); font-size: 1.1rem; max-width: 600px; margin: 0 auto; } /* ------------------------------------------ 14. PORTFOLIO PAGE — Filter Buttons ------------------------------------------ A row of buttons that filter the gallery by category. The "active" button gets a filled style to show it's selected. */ .portfolio-filters { padding: var(--spacing-md) 0; } .filter-buttons { display: flex; justify-content: center; flex-wrap: wrap; /* Buttons wrap to next line on small screens */ gap: 0.5rem; } .filter-btn { background: none; border: 1.5px solid var(--color-burgundy); color: var(--color-burgundy); padding: 0.5rem 1.25rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border-radius: 2px; transition: all 0.3s ease; } .filter-btn:hover, .filter-btn.active { background-color: var(--color-burgundy); color: var(--color-white); } /* ------------------------------------------ 15. PORTFOLIO PAGE — Gallery Grid ------------------------------------------ A responsive grid that shows 3 columns on desktop, 2 on tablet, and 1 on mobile. */ .portfolio-gallery { padding: var(--spacing-sm) 0 var(--spacing-xl); } .gallery-grid { /* CSS columns create a "masonry" layout — like Pinterest or a brick wall. Instead of a rigid grid, images stack vertically in columns and each image keeps its natural proportions (tall photos stay tall, wide photos stay wide). This works much better for mixed orientations. */ columns: 3; /* 3 columns on desktop */ column-gap: var(--spacing-sm); /* Space between columns */ } .gallery-item { overflow: hidden; border-radius: 2px; cursor: pointer; /* Shows pointer to indicate clickable */ margin-bottom: var(--spacing-sm); /* Space below each image */ /* break-inside: avoid prevents an image from being split across two columns — it stays as one piece. */ break-inside: avoid; transition: opacity 0.4s ease, transform 0.4s ease; } /* Hidden items (filtered out) */ .gallery-item.hidden { display: none; } .gallery-item img { width: 100%; height: auto; /* Let the image keep its natural proportions */ display: block; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.05); /* Subtle zoom on hover */ } /* ------------------------------------------ 16. LIGHTBOX ------------------------------------------ A fullscreen overlay for viewing images at full size. Hidden by default, shown when an image is clicked. */ .lightbox { /* position: fixed makes the lightbox cover the entire viewport regardless of scroll position. It stays in place even when you scroll. */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); /* Nearly black background */ z-index: 2000; /* Very high z-index — on top of everything */ display: flex; align-items: center; justify-content: center; /* Hidden by default */ opacity: 0; pointer-events: none; /* Can't click on it when hidden */ transition: opacity 0.3s ease; } .lightbox.is-open { opacity: 1; pointer-events: auto; /* Clickable when visible */ } .lightbox-img { max-width: 90%; max-height: 85vh; object-fit: contain; /* Shows the full image without cropping */ border-radius: 2px; } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--color-white); font-size: 2.5rem; cursor: pointer; line-height: 1; transition: color 0.3s ease; } .lightbox-close:hover { color: var(--color-peach); } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); /* Centers the button vertically */ background: none; border: none; color: var(--color-white); font-size: 2rem; cursor: pointer; padding: 1rem; transition: color 0.3s ease; } .lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; } .lightbox-prev:hover, .lightbox-next:hover { color: var(--color-peach); } /* ------------------------------------------ 17. ABOUT PAGE — Photo + Story ------------------------------------------ Two-column layout using CSS Grid: photo on the left, text on the right. */ .about-main { padding: var(--spacing-xl) 0; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; /* Two equal columns */ gap: var(--spacing-lg); align-items: center; /* Vertically centers both columns */ } .about-photo img { width: 100%; height: auto; border-radius: 2px; } .about-text h2 { margin-bottom: var(--spacing-md); } .about-text p { color: var(--color-text-light); font-size: 1.05rem; line-height: 1.8; margin-bottom: var(--spacing-sm); } .about-text .btn { margin-top: var(--spacing-sm); } /* ------------------------------------------ 18. ABOUT PAGE — Values / Approach ------------------------------------------ Three cards in a row highlighting the photographer's approach. */ .about-values { background-color: var(--color-warm-bg); padding: var(--spacing-xl) 0; text-align: center; } .about-values h2 { margin-bottom: var(--spacing-lg); } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } .value-card { background-color: var(--color-white); padding: var(--spacing-md); border-radius: 2px; } .value-card h3 { margin-bottom: var(--spacing-sm); } .value-card p { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.7; } /* ------------------------------------------ 19. SERVICES PAGE — Service Cards ------------------------------------------ Each service is a horizontal card with an image on one side and text on the other. They alternate left/right for visual rhythm. Uses CSS Grid for the two-column layout. */ .services-section { padding: var(--spacing-xl) 0; } .service-card { display: grid; grid-template-columns: 1fr 1fr; /* Two equal columns: image + text */ gap: var(--spacing-lg); align-items: center; /* Vertically centers both halves */ margin-bottom: var(--spacing-xl); } /* The "--reverse" modifier flips the order on desktop. "direction: rtl" reverses the grid flow, then we reset text direction on children so text still reads left-to-right. An alternative would be using "order" property on children. */ .service-card--reverse { direction: rtl; } .service-card--reverse > * { direction: ltr; /* Reset text direction for child elements */ } .service-card:last-child { margin-bottom: 0; /* No margin after the last card */ } .service-image { overflow: hidden; border-radius: 2px; } .service-image img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .service-image:hover img { transform: scale(1.03); /* Subtle zoom on hover */ } .service-text h2 { margin-bottom: var(--spacing-sm); } .service-text p { color: var(--color-text-light); font-size: 1.05rem; line-height: 1.8; } .service-details { /* Practical details (duration, number of photos, etc.) Slightly different styling to distinguish from the description. */ font-size: 0.95rem !important; font-style: italic; } .service-price { /* Price or "contact for quote" line — stands out a little. */ color: var(--color-burgundy) !important; font-weight: 500; font-size: 1.1rem !important; } .service-text .btn { margin-top: var(--spacing-sm); } /* ------------------------------------------ 20. CONTACT PAGE — Form & Info ------------------------------------------ Two-column layout: contact form on the left, contact details on the right. */ .contact-section { padding: var(--spacing-xl) 0; } .contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; /* Form gets slightly more space than info */ gap: var(--spacing-xl); align-items: start; /* Aligns both columns to the top */ } /* --- Contact Form Styling --- */ .contact-form-wrapper h2 { margin-bottom: var(--spacing-md); } /* "form-group" wraps each label + input pair. This gives consistent spacing between form fields. */ .form-group { margin-bottom: var(--spacing-sm); } .form-group label { display: block; /* Labels on their own line above the input */ font-size: 0.9rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Shared styles for text inputs, email inputs, selects, and textareas. This keeps all form elements looking consistent. */ .form-group input, .form-group select, .form-group textarea { width: 100%; /* Full width of the form column */ padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background-color: var(--color-white); border: 1.5px solid #ddd; /* Light gray border */ border-radius: 2px; transition: border-color 0.3s ease; /* transition makes the border color change smooth when the user clicks into the field. */ } /* :focus is triggered when the user clicks into a field. We change the border color and add an "outline" glow to show which field is active — important for accessibility. */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; /* Removes the browser's default blue outline */ border-color: var(--color-burgundy); /* Our brand color instead */ box-shadow: 0 0 0 3px rgba(121, 3, 0, 0.1); /* Subtle burgundy glow */ } /* ::placeholder styles the hint text inside empty fields. It's lighter than normal text so it's clear it's not actual input. */ .form-group input::placeholder, .form-group textarea::placeholder { color: #aaa; } /* Textareas can be resized by the user — we only allow vertical resizing so they don't break the layout by dragging horizontally. */ .form-group textarea { resize: vertical; } /* Style the