/* ========================================================== CLOTHINGCO — SHARED STYLESHEET Aesthetic: Editorial fashion — charcoal, cream, terracotta Fonts: Cormorant Garamond (display) + DM Sans (body) HOW TO READ THIS FILE: CSS is made up of RULES. Each rule looks like this: selector { property: value; } - selector = WHICH element(s) to style (e.g. h1, .card, #logo) - property = WHAT to change (e.g. color, font-size, margin) - value = HOW to change it (e.g. red, 1.5rem, 20px) Comments in CSS use /* like this * / They are ignored by the browser — they are just notes for humans. ========================================================== */ /* ========================================================== SECTION 1: CSS VARIABLES (Custom Properties) Variables let you store values and reuse them anywhere. Define once → use everywhere → change in one place! Syntax: --variable-name: value; Usage: color: var(--variable-name); All variables are placed inside :root {} :root = the very top of the HTML document (the tag). Putting variables here makes them available to the WHOLE page. ========================================================== */ :root { --ink: #1a1a1a; /* Very dark charcoal — used for main text */ --cream: #f9f5f0; /* Off-white/warm cream — used for page background */ --white: #ffffff; /* Pure white */ --accent: #c0623a; /* Terracotta orange — main brand color */ --accent-lt: #e8956e; /* Lighter terracotta — used for hover states */ --muted: #7a7068; /* Medium grey-brown — used for subtle/secondary text */ --border: #e4ddd6; /* Light warm grey — used for dividing lines */ --dark-bg: #181510; /* Very dark brown-black — used for dark sections */ --nav-bg: #111111; /* Near-black — used for the navigation bar */ --shadow: 0 6px 32px rgba(0,0,0,0.09); /* --shadow stores a box-shadow value to reuse on cards. box-shadow: x-offset y-offset blur-radius color; 0 = no horizontal shift 6px = 6px downward shift (shadow appears below) 32px = how blurry/spread the shadow is rgba(0,0,0,0.09) = black at 9% opacity (very subtle) */ } /* ========================================================== SECTION 2: RESET Browsers have DEFAULT styles (margins, padding, bullet points). A CSS Reset removes these defaults so we start with a clean slate. This prevents browsers from looking different from each other. ========================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* * = the UNIVERSAL selector — applies to EVERY element on the page. *::before and *::after = also applies to pseudo-elements. margin: 0 → remove all default outer spacing padding: 0 → remove all default inner spacing box-sizing: border-box → By default, padding and border ADD to an element's width. border-box changes this: padding and border are INCLUDED in the width. Example: a 200px wide box with 20px padding stays 200px total. Without border-box, it would become 240px. Much easier to work with! */ html { scroll-behavior: smooth; } /* scroll-behavior: smooth → when clicking anchor links (like #section), the page scrolls smoothly instead of jumping instantly. */ body { font-family: "DM Sans", sans-serif; background: var(--cream); color: var(--ink); } /* body = applies to the whole visible page. font-family: "DM Sans", sans-serif → Use DM Sans (our Google Font). If it fails to load, use any generic sans-serif font as a fallback. background: var(--cream) → warm off-white page background. color: var(--ink) → default text color for everything. */ img { max-width: 100%; height: auto; display: block; } /* max-width: 100% → images never overflow their container. height: auto → height scales proportionally (no stretching). display: block → removes the small gap below images that appears when they are inline (the default for ). */ a { text-decoration: none; color: inherit; } /* All links by default have: - an underline (text-decoration: underline) - blue color We remove both here. Each section can re-add styles as needed. color: inherit → link uses whatever color its parent has. */ ul { list-style: none; } /* Removes the default bullet points (•) from all