/* ============================================================ STYLE.CSS — All the visual styling for See You Lodge ============================================================ Welcome! This file is called a "stylesheet". It tells the browser HOW things should look: colors, sizes, spacing, fonts, layout, animations, and more. CSS (Cascading Style Sheets) works by targeting HTML elements using "selectors" and then applying "rules" to them. Example: h1 { color: red; } ^ ^ ^ | | value | property selector (targets all

elements) The "cascading" part means rules can override each other — later rules (or more specific ones) win. */ /* ── Reset & Base ───────────────────────────────────────────────────────── First, we "reset" the browser's default styles. Every browser (Chrome, Firefox, Safari) has its own default styles, which can make things look different on different devices. We zero them out so we start from a clean slate. The * selector means "select EVERY element on the page". *::before and *::after are "pseudo-elements" — invisible extra elements the browser can insert before/after any element. box-sizing: border-box — this changes how width is calculated. By default, padding adds to an element's width, which is confusing. border-box makes width include the padding, which is easier to work with. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Color Variables (:root) ─────────────────────────────────────────────── :root is a special selector that refers to the very top of the page (the element). Variables defined here are available EVERYWHERE. CSS variables start with two dashes: --variable-name We use them with var(--variable-name). Why use variables? Instead of writing the same color (#1B4F8A) in 50 different places, we name it --navy and use that name. If we ever want to change the color, we only change it in ONE place! Think of these like giving names to your crayons: --navy = a deep ocean blue (navigation, headings, footer) --navy-l = a medium blue (buttons, highlights) --orange = a warm golden orange (call-to-action buttons) --sky = a soft light blue (the page background) --text = the main dark text color --shadow = a subtle drop shadow --radius = rounded corner size */ :root { --navy: #1B4F8A; /* deep blue — navigation, headings, footer */ --navy-l: #2E6DB4; /* medium blue — hover states, links, highlights */ --navy-d: #123568; /* darker navy — deep text on light backgrounds */ --orange: #F4A623; /* warm orange — main call-to-action color */ --orange-l: #F7B84E; /* lighter orange — used on hover */ --sky: #F0F6FF; /* soft light blue — main page background */ --sky-m: #D8E8FF; /* medium light blue — alternate sections, tags */ --sky-d: #B8D0F0; /* deeper light blue — borders, dividers */ --text: #1A2F4A; /* dark navy — main body text */ --text-m: #2E4E6E; /* medium navy — secondary text */ --text-l: #6B8CAD; /* muted blue-grey — hints, captions */ --white: #ffffff; /* pure white */ /* Shadows — these create the 3D "floating" effect on cards. rgba() means Red, Green, Blue, Alpha (transparency). The last number (0.12) is opacity: 0 = invisible, 1 = solid. */ --shadow: 0 4px 24px rgba(27,79,138,.12); --shadow-l: 0 2px 12px rgba(27,79,138,.08); /* Border radius — how rounded the corners are (in pixels). 0px = sharp corners, 50% = a circle. */ --radius: 12px; --radius-l: 20px; } /* ── Base HTML & Body ────────────────────────────────────────────────────── html { scroll-behavior: smooth } makes the page glide smoothly when you click a link that jumps to another section (like "#about"), instead of jumping instantly. The is the visible part of the page. We set the default font, background color, text color, and line-height here so all text inherits these styles automatically. line-height: 1.65 means each line of text has 1.65x the font size as space — this makes paragraphs easier to read (not too cramped). */ html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; /* loaded from Google Fonts in index.html */ background: var(--sky); color: var(--text); line-height: 1.65; font-size: 16px; /* 1rem = 16px throughout the page */ } /* These make images and links behave more predictably */ img { display: block; max-width: 100%; } /* images never overflow their container */ a { color: inherit; text-decoration: none; } /* links look like normal text */ /* All headings use the decorative serif font (Playfair Display) */ h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.25; } /* .container is a reusable "wrapper" class. Anything with class="container" will be centered on the page and have a max width of 1100px. margin: 0 auto means "no top/bottom margin, auto left/right" — which centers a block element. */ .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ── Navigation Bar ──────────────────────────────────────────────────────── The