/* ===================================================== Baby Registry Website - Elegant & Classy Styles ===================================================== CSS (Cascading Style Sheets) controls how HTML elements LOOK. - HTML = Structure (what's on the page) - CSS = Presentation (how it looks) - JavaScript = Behavior (how it interacts) This file is organized into sections: 1. CSS Variables (reusable values) 2. Reset & Base Styles 3. Layout Components 4. Individual Sections (Hero, Welcome, Registry, etc.) 5. Animations 6. Responsive Design (mobile/tablet adjustments) 7. Utility Classes ===================================================== */ /* ===================================================== CSS CUSTOM PROPERTIES (VARIABLES) ===================================================== Variables let you define values once and reuse them everywhere. If you want to change a color, you only change it in ONE place! Syntax: --variable-name: value; Usage: var(--variable-name) :root means these variables are available EVERYWHERE in your CSS. :root targets the element (the root of the document). ===================================================== */ :root { /* ----- COLOR PALETTE ----- Colors use HEX codes: #RRGGBB (Red, Green, Blue) Each pair goes from 00 (none) to FF (full) Examples: - #FF0000 = Pure red - #00FF00 = Pure green - #0000FF = Pure blue - #FFFFFF = White (all colors full) - #000000 = Black (no colors) */ --color-cream: #FDF8F3; /* Very light warm white - main background */ --color-blush: #F5E6E0; /* Light pink - hero background */ --color-dusty-rose: #D4A5A5; /* Muted pink - accents and icons */ --color-sage: #A8B5A0; /* Soft green - (available for use) */ --color-gold: #C9A959; /* Elegant gold - buttons and highlights */ --color-gold-light: #E8D5A3; /* Lighter gold - subtle accents */ --color-charcoal: #3D3D3D; /* Dark gray - main text color */ --color-warm-gray: #6B6B6B; /* Medium gray - secondary text */ --color-light-gray: #F7F7F7; /* Very light gray - backgrounds */ --color-white: #FFFFFF; /* Pure white */ /* ----- TYPOGRAPHY (Fonts) ----- Font stacks list fonts in order of preference. If the first font isn't available, the browser tries the next one. Always end with a generic family (serif, sans-serif, monospace). */ --font-heading: 'Cormorant Garamond', Georgia, serif; /* 'Cormorant Garamond' = Our elegant Google Font for headings Georgia = Backup serif font (installed on most computers) serif = Generic fallback (has decorative strokes on letters) */ --font-body: 'Montserrat', 'Helvetica Neue', sans-serif; /* 'Montserrat' = Our clean Google Font for body text 'Helvetica Neue' = Backup clean font (common on Macs) sans-serif = Generic fallback (no decorative strokes) */ /* ----- SPACING ----- Using "rem" units for consistent spacing. 1rem = the root font size (usually 16px by default) rem is better than px because it scales with user preferences. */ --spacing-xs: 0.5rem; /* 8px - Extra small gaps */ --spacing-sm: 1rem; /* 16px - Small gaps */ --spacing-md: 2rem; /* 32px - Medium gaps */ --spacing-lg: 4rem; /* 64px - Large gaps */ --spacing-xl: 6rem; /* 96px - Extra large (section padding) */ /* ----- TRANSITIONS ----- Transitions make property changes smooth instead of instant. Format: duration timing-function - duration: how long (0.3s = 0.3 seconds) - timing-function: the speed curve - ease = starts slow, speeds up, slows down at end - linear = constant speed - ease-in = starts slow - ease-out = ends slow */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* ----- SHADOWS ----- Box shadows add depth and make elements "pop". Format: horizontal-offset vertical-offset blur spread color rgba() = Red, Green, Blue, Alpha (transparency) Alpha: 0 = fully transparent, 1 = fully opaque 0.06 = 6% opaque = very subtle shadow */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); /* Subtle shadow */ --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); /* Medium shadow */ --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12); /* Large shadow */ } /* ===================================================== CSS RESET & BASE STYLES ===================================================== Browsers have default styles that vary between browsers. A "reset" removes these defaults so our design looks consistent everywhere. ===================================================== */ *, *::before, *::after { /* * = Universal selector (selects EVERY element) ::before and ::after = Pseudo-elements (CSS-generated content) This rule applies to literally everything on the page. */ box-sizing: border-box; /* box-sizing: border-box is CRUCIAL! Without it (content-box): - A 100px wide box + 20px padding = 140px total width - Width only includes content, padding adds extra With border-box: - A 100px wide box + 20px padding = 100px total width - Padding is included IN the width This makes layouts MUCH easier to manage! */ margin: 0; padding: 0; /* Remove all default margins and padding. We'll add our own spacing where needed. */ } html { scroll-behavior: smooth; /* When clicking anchor links (#section-name), the page smoothly scrolls instead of jumping instantly. */ font-size: 16px; /* Base font size. All "rem" units are relative to this. 16px is the browser default, but we set it explicitly. */ } body { font-family: var(--font-body); /* Use our Montserrat font for all body text */ font-weight: 300; /* Font weight controls thickness: 100 = Thin 300 = Light 400 = Normal/Regular 500 = Medium 600 = Semi-bold 700 = Bold 900 = Black/Heavy */ line-height: 1.7; /* Line height = space between lines of text. 1.7 means 170% of the font size. Good for readability (1.5-1.8 is typical for body text). */ color: var(--color-charcoal); /* Default text color for the whole page */ background-color: var(--color-cream); /* Page background color */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* These make fonts look smoother on Mac/iOS. -webkit- is for Chrome/Safari, -moz- is for Firefox. These are "vendor prefixes" for browser-specific features. */ } /* ===================================================== CONTAINER ===================================================== A container centers content and limits its width. This prevents text from stretching too wide on big screens (long lines are hard to read). ===================================================== */ .container { width: 100%; /* Take full available width */ max-width: 1200px; /* But never exceed 1200px, even on huge screens */ margin: 0 auto; /* margin: top/bottom left/right 0 = no top/bottom margin auto = automatically calculate left/right margins auto + max-width = CENTERED horizontally! */ padding: 0 var(--spacing-md); /* padding: top/bottom left/right Adds space on the sides so content doesn't touch screen edges. */ } /* ===================================================== TYPOGRAPHY (Text Styling) ===================================================== */ h1, h2, h3, h4, h5, h6 { /* Comma-separated selectors apply the SAME styles to multiple elements. This styles ALL heading levels at once. */ font-family: var(--font-heading); /* Use elegant Cormorant Garamond for all headings */ font-weight: 500; /* Medium weight - not too thin, not too bold */ line-height: 1.3; /* Tighter line height for headings (they're bigger) */ color: var(--color-charcoal); } p { margin-bottom: var(--spacing-sm); /* Add space below paragraphs to separate them */ } a { text-decoration: none; /* Remove the default underline from links */ color: inherit; /* "inherit" means use the same color as the parent element. Links won't be blue - they'll match surrounding text. */ transition: var(--transition-normal); /* Smooth transition when link properties change (like on hover) */ } /* ===================================================== HERO SECTION ===================================================== The "hero" is the big, eye-catching section at the top. It typically spans the full viewport height (100vh). ===================================================== */ .hero { position: relative; /* position: relative creates a "positioning context". Child elements with position: absolute will be positioned relative to THIS element, not the whole page. */ min-height: 100vh; /* vh = viewport height (the browser window height) 100vh = 100% of the viewport = full screen height min-height (not height) allows it to grow if content is taller. */ display: flex; /* Flexbox is a powerful layout system! It makes centering and distributing space easy. display: flex turns this into a "flex container". */ flex-direction: column; /* Flex items stack vertically (column) instead of horizontally (row). Default is row (side by side). */ align-items: center; /* Center items horizontally (on the cross-axis) */ justify-content: center; /* Center items vertically (on the main-axis) */ text-align: center; /* Center all text inside */ background-color: var(--color-blush); /* Fallback color if image doesn't load */ background-image: url('../images/img.jpeg'); /* Set the couple's photo as the background. ../ means "go up one folder" (from css folder to assets folder) Path: assets/css/styles.css → assets/images/img.jpeg */ background-size: cover; /* "cover" scales the image to cover the entire area. The image may be cropped, but there won't be empty space. Alternative: "contain" = show whole image, may have gaps. */ background-position: center top; /* Position the image: horizontally centered, aligned to top. This keeps faces visible since they're usually at the top. */ background-attachment: fixed; /* "fixed" creates a parallax effect - the background stays in place while content scrolls over it. Note: This is disabled on mobile (see responsive section). */ overflow: hidden; /* Hide anything that extends beyond this section's boundaries */ } .hero-overlay { /* This creates a semi-transparent layer over the background image. It makes text more readable against busy photo backgrounds. */ position: absolute; /* position: absolute removes element from normal flow and positions it relative to the nearest positioned ancestor (the .hero with position: relative). */ top: 0; left: 0; right: 0; bottom: 0; /* Setting all four sides to 0 makes it stretch to fill the entire parent element. */ background: linear-gradient( to bottom, rgba(253, 248, 243, 0.75) 0%, rgba(253, 248, 243, 0.85) 50%, rgba(253, 248, 243, 0.92) 100% ); /* linear-gradient creates a color transition. - to bottom: gradient goes from top to bottom - rgba(253, 248, 243, X): cream color with varying opacity - 0%, 50%, 100%: positions along the gradient The overlay is more transparent at top (showing more image) and more opaque at bottom (better text readability). */ z-index: 1; /* z-index controls stacking order (which elements appear on top). Higher number = on top of lower numbers. The overlay (z-index: 1) sits above the background but below the content (z-index: 2). */ } .hero-content { position: relative; /* Needed to use z-index */ z-index: 2; /* Above the overlay (1), so text is visible */ padding: var(--spacing-md); } .hero-subtitle { font-family: var(--font-body); font-size: 0.875rem; /* 14px (0.875 × 16px base) */ font-weight: 500; letter-spacing: 0.3em; /* letter-spacing adds space between letters. em is relative to the current font size. 0.3em = 30% of font size added between each letter. Creates an elegant, spread-out look. */ text-transform: uppercase; /* Converts text to ALL CAPS regardless of how it's typed in HTML */ color: var(--color-dusty-rose); margin-bottom: var(--spacing-sm); } .hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); /* clamp() is AMAZING for responsive typography! clamp(minimum, preferred, maximum) - 2.5rem = minimum size (won't go smaller) - 6vw = preferred size (6% of viewport width) - 4.5rem = maximum size (won't go larger) The font scales with screen size but stays within limits! */ font-weight: 400; font-style: italic; /* Slanted text for elegance */ color: var(--color-charcoal); margin-bottom: var(--spacing-md); max-width: 800px; /* Prevent title from getting too wide */ } .hero-divider { /* A decorative horizontal line */ width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); /* 90deg = horizontal gradient (left to right) Fades from transparent → gold → transparent Creates a line that fades at both ends. */ margin: 0 auto var(--spacing-md); /* margin: top left/right bottom 0 auto centers it horizontally var(--spacing-md) adds space below */ } .hero-date { font-family: var(--font-heading); font-size: 1.5rem; /* 24px */ font-weight: 400; color: var(--color-warm-gray); letter-spacing: 0.1em; } /* ----- SCROLL INDICATOR ----- The "Scroll to Explore" prompt at the bottom of the hero */ .scroll-indicator { position: absolute; bottom: var(--spacing-lg); /* Position from the bottom */ left: 50%; transform: translateX(-50%); /* Centering trick! left: 50% moves the LEFT EDGE to the center. translateX(-50%) moves it back by half its own width. Result: perfectly centered! */ z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); /* gap adds space between flex items. Cleaner than adding margins to individual items. */ } .scroll-indicator span { font-size: 0.75rem; /* 12px - small text */ font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-warm-gray); } .scroll-arrow { /* Creates a downward-pointing arrow using borders. It's a box rotated 45 degrees with only 2 borders visible. */ width: 20px; height: 20px; border-right: 1px solid var(--color-warm-gray); border-bottom: 1px solid var(--color-warm-gray); /* Only right and bottom borders = "L" shape */ transform: rotate(45deg); /* Rotate the "L" shape to point downward */ animation: scrollBounce 2s infinite; /* animation: name duration iteration-count - scrollBounce: the animation name (defined below) - 2s: takes 2 seconds per cycle - infinite: repeats forever */ } @keyframes scrollBounce { /* @keyframes defines an animation sequence. You specify what properties should be at different points. The browser smoothly transitions between keyframes. */ 0%, 20%, 50%, 80%, 100% { /* At these points, arrow is at starting position */ transform: translateY(0) rotate(45deg); } 40% { /* At 40% through the animation, move down 8px */ transform: translateY(8px) rotate(45deg); } 60% { /* At 60%, bounce back up a bit */ transform: translateY(4px) rotate(45deg); } /* Creates a bouncing effect */ } /* ===================================================== WELCOME SECTION ===================================================== */ .welcome { padding: var(--spacing-xl) 0; /* padding: top/bottom left/right Large vertical padding, no horizontal (container handles that) */ background-color: var(--color-white); } .welcome-content { max-width: 800px; /* Limit text width for readability (45-75 characters per line is ideal) */ margin: 0 auto; /* Center horizontally */ text-align: center; } .section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); /* Responsive font size: min 28px, max 40px */ font-weight: 400; margin-bottom: var(--spacing-lg); position: relative; /* Needed for the ::after pseudo-element */ display: inline-block; /* inline-block allows the element to have width based on content while still supporting the ::after decorative line. */ } .section-title::after { /* ::after creates a pseudo-element AFTER the element's content. It's like adding an invisible element we can style. Useful for decorations without extra HTML. */ content: ''; /* content is REQUIRED for ::before and ::after to appear. Empty string = nothing visible, but the element exists. */ position: absolute; bottom: -15px; /* Position below the title */ left: 50%; transform: translateX(-50%); /* Center it */ width: 60px; height: 2px; background: var(--color-gold); /* Creates a short gold underline decoration */ } .welcome-text { margin-bottom: var(--spacing-lg); } .welcome-text p { font-size: 1.0625rem; /* 17px - slightly larger than default */ color: var(--color-warm-gray); margin-bottom: var(--spacing-md); } .welcome-text p:last-child { /* :last-child selects the last element among siblings. Remove bottom margin from the last paragraph (no need for space before the signature). */ margin-bottom: 0; } .signature { font-family: var(--font-heading); font-style: italic; color: var(--color-charcoal); } .signature p { margin-bottom: var(--spacing-xs); } .signature-names { font-size: 1.5rem; /* 24px - larger for emphasis */ font-weight: 500; color: var(--color-dusty-rose); } /* ===================================================== REGISTRY SECTION ===================================================== */ .registry { padding: var(--spacing-xl) 0; background-color: var(--color-cream); } .registry .section-title { /* This targets .section-title ONLY when inside .registry Space between selectors = descendant combinator */ display: block; text-align: center; } .section-subtitle { text-align: center; font-size: 1rem; color: var(--color-warm-gray); margin-bottom: var(--spacing-lg); } /* ----- FEATURED REGISTRY BUTTON ----- A single, prominent button for the Amazon registry. Designed to be eye-catching and easy to click. */ .registry-featured { display: flex; justify-content: center; /* Centers the button horizontally */ margin-top: var(--spacing-md); } .registry-button { display: flex; /* Flexbox aligns the icon, text, and arrow in a row. Items are vertically centered by default with align-items. */ align-items: center; gap: var(--spacing-md); /* Space between icon, text, and arrow */ background: var(--color-white); padding: var(--spacing-md) var(--spacing-lg); /* Generous padding makes it easy to tap on mobile */ border-radius: 16px; /* Larger radius for a softer, modern look */ box-shadow: var(--shadow-md); transition: var(--transition-normal); max-width: 500px; /* Limit width so it doesn't stretch too wide */ width: 100%; /* Take full width up to max-width */ } .registry-button:hover { transform: translateY(-4px); /* Subtle lift effect on hover */ box-shadow: var(--shadow-lg); /* Larger shadow when "lifted" */ } .registry-button:active { /* :active applies when the element is being clicked/tapped. This gives tactile feedback. */ transform: translateY(-2px); /* Slight press-down effect */ } .registry-button-icon { width: 50px; height: 50px; flex-shrink: 0; /* flex-shrink: 0 prevents the icon from shrinking when space is tight. It stays 50x50px. */ color: var(--color-gold); transition: var(--transition-normal); } .registry-button:hover .registry-button-icon { transform: scale(1.1); /* Icon grows slightly on hover */ } .registry-button-icon svg { width: 100%; height: 100%; } .registry-button-text { display: flex; flex-direction: column; /* Stack title and subtitle vertically */ flex-grow: 1; /* flex-grow: 1 makes the text section expand to fill available space between icon and arrow. */ text-align: left; } .registry-button-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; color: var(--color-charcoal); margin-bottom: 4px; } .registry-button-subtitle { font-size: 0.875rem; color: var(--color-warm-gray); } .registry-button-arrow { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-dusty-rose); transition: var(--transition-normal); } .registry-button:hover .registry-button-arrow { color: var(--color-gold); transform: translateX(4px); /* Arrow moves right on hover, indicating "go" */ } .registry-button-arrow svg { width: 100%; height: 100%; } /* ===================================================== MESSAGE SECTION ===================================================== */ .message-section { padding: var(--spacing-xl) 0; background: linear-gradient(135deg, var(--color-blush) 0%, var(--color-cream) 100%); /* 135deg = diagonal gradient (top-left to bottom-right) 0% = starting color position 100% = ending color position */ text-align: center; } .message-content { max-width: 700px; margin: 0 auto; } .message-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; font-style: italic; margin-bottom: var(--spacing-md); color: var(--color-charcoal); } .message-text { font-size: 1.0625rem; color: var(--color-warm-gray); margin-bottom: var(--spacing-md); } .heart-icon { width: 40px; height: 40px; margin: 0 auto; color: var(--color-dusty-rose); animation: heartbeat 1.5s ease-in-out infinite; /* The heart pulses continuously */ } .heart-icon svg { width: 100%; height: 100%; } @keyframes heartbeat { /* Heartbeat animation: scales up and down */ 0%, 100% { transform: scale(1); /* Normal size at start and end */ } 50% { transform: scale(1.15); /* 15% larger at middle */ } } /* ===================================================== FOOTER ===================================================== */ .footer { padding: var(--spacing-lg) 0; background-color: var(--color-charcoal); /* Dark background */ text-align: center; } .footer-text { font-family: var(--font-heading); font-size: 1.125rem; /* 18px */ font-style: italic; color: var(--color-blush); /* Light text on dark background */ margin-bottom: var(--spacing-xs); } .footer-copyright { font-size: 0.75rem; /* 12px - small copyright text */ color: var(--color-warm-gray); letter-spacing: 0.1em; } /* ===================================================== ANIMATION CLASSES ===================================================== These classes work with JavaScript to create scroll-triggered animations. ===================================================== */ .fade-in-section { /* Initial state: invisible and shifted down */ opacity: 0; transform: translateY(30px); /* Start 30px below final position */ transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Multiple transitions separated by commas. Both opacity and transform animate over 0.6 seconds. */ } .fade-in-section.is-visible { /* When JavaScript adds .is-visible class, transition to: - Full opacity (visible) - Original position (translateY(0)) */ opacity: 1; transform: translateY(0); } /* ----- REGISTRY BUTTON ANIMATION ----- The featured registry button fades in when scrolled into view. */ .registry-button { /* Initial state handled by JavaScript fade-in-section class */ } /* ===================================================== RESPONSIVE DESIGN (Media Queries) ===================================================== Media queries apply styles ONLY when conditions are met. @media (max-width: 768px) = apply when screen is 768px or smaller Common breakpoints: - 1200px+ = Large desktops - 1024px = Tablets landscape / small laptops - 768px = Tablets portrait - 480px = Mobile phones "Mobile-first" approach: design for mobile, then add styles for larger. "Desktop-first" approach: design for desktop, then adjust for smaller. This file uses desktop-first (max-width queries). ===================================================== */ /* ----- TABLET (screens 1024px and smaller) ----- */ @media (max-width: 1024px) { :root { /* Reduce spacing on tablets */ --spacing-lg: 3rem; --spacing-xl: 4rem; } .registry-grid { grid-template-columns: repeat(2, 1fr); /* Force 2 columns instead of auto-fit */ } } /* ----- MOBILE (screens 768px and smaller) ----- */ @media (max-width: 768px) { :root { /* Further reduce spacing on mobile */ --spacing-md: 1.5rem; --spacing-lg: 2.5rem; --spacing-xl: 3rem; } .hero { background-attachment: scroll; /* Disable fixed background on mobile. Fixed backgrounds can cause performance issues and glitches on mobile browsers. */ } .hero-subtitle { font-size: 0.75rem; /* Smaller text on mobile */ } .registry-grid { grid-template-columns: 1fr; /* Single column on mobile - cards stack vertically */ max-width: 400px; margin-left: auto; margin-right: auto; /* Center the narrower grid */ } .scroll-indicator { bottom: var(--spacing-md); /* Less space from bottom */ } } /* ----- SMALL MOBILE (screens 480px and smaller) ----- */ @media (max-width: 480px) { .container { padding: 0 var(--spacing-sm); /* Less side padding */ } .hero-title { font-size: 2rem; /* Override clamp for very small screens */ } .section-title { font-size: 1.5rem; } .welcome-text p, .message-text { font-size: 1rem; /* Slightly smaller body text */ } } /* ===================================================== UTILITY CLASSES ===================================================== Utility classes are small, single-purpose classes. Add them to HTML elements for quick styling. Example:

Centered with large top margin

===================================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* Margin Top utilities */ .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } /* Margin Bottom utilities */ .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } /* ===================================================== ACCESSIBILITY ===================================================== Good websites are usable by everyone, including people with disabilities who may use screen readers, keyboards, or have motion sensitivity. ===================================================== */ @media (prefers-reduced-motion: reduce) { /* This media query detects if the user has enabled "Reduce motion" in their operating system settings. People with vestibular disorders can get dizzy from animations. */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; /* Effectively disables all animations */ } html { scroll-behavior: auto; /* Disable smooth scrolling */ } } /* Focus styles for keyboard navigation */ a:focus, button:focus { /* :focus applies when element is focused (clicked or Tab-navigated). Clear focus indicators help keyboard users see where they are. */ outline: 2px solid var(--color-gold); /* Visible outline around focused elements */ outline-offset: 2px; /* Space between outline and element */ }