/* ===================================================================== QUICK CUSTOMIZATION — START HERE ===================================================================== Most things you will ever want to change are in THIS file: 1. Fonts 2. Colors 3. Background images (desktop AND phone versions) 4. Logo size, header color and a few sizes You do NOT need to open style.css for these changes. Just edit the values after the colon ( : ) and save. ===================================================================== */ /* ===================================================================== 1. FONTS ===================================================================== HOW TO CHANGE A FONT (3 easy steps): a) Go to https://fonts.google.com and pick a font. b) Click "Get font" -> "Get embed code" -> choose "@import". Copy ONLY the line that starts with @import and paste it below, replacing the old @import line. (@import must stay at the very top of this file, above everything else.) c) Change the font name in section 1B below to match. ===================================================================== */ /* 1A. Font download line (from Google Fonts). Replace this to change fonts. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap'); /* --------------------------------------------------------------------- CUSTOM FONT FILES (optional - skip this if you use Google Fonts) If you have your own font file instead: - Put the file in the assets/fonts/ folder - Below, find the block that starts with @font-face. It is switched OFF right now because it is wrapped in a comment. - To switch it ON, delete the line above it that has just a slash and a star, and the line below it that has just a star and a slash. - Change the name and file path to match your font, then use that name in section 1B. --------------------------------------------------------------------- */ /* @font-face { font-family: "My Custom Font"; src: url("../assets/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-display: swap; } */ :root { /* 1B. Which font is used where. Keep the quote marks, and keep the ", serif" / ", sans-serif" at the end (it is the backup font if yours can't load). */ --font-heading: "Playfair Display", serif; /* big titles */ --font-body: "DM Sans", sans-serif; /* paragraphs, buttons */ /* =================================================================== 2. COLORS =================================================================== Use any color code, e.g. #d4aa4f (you can pick one at https://htmlcolorcodes.com). */ --ink: #17120f; /* main dark text color */ --paper: #f5efe3; /* main light page background (cream) */ --paper2: #fbf8f1; /* slightly lighter cream (some sections) */ --wine: #4b1116; /* dark red */ --wine2: #6c1d20; /* lighter dark red */ --gold: #d4aa4f; /* gold (buttons, lines, highlights) */ --gold2: #f1d58a; /* light gold (small labels, hover color) */ --green: #3f5634; /* green (product details text) */ --brown: #765037; /* brown (small headings) */ --muted: #6f6658; /* grey-brown for paragraph text */ --line: rgba(38, 27, 18, .13); /* thin divider lines */ --white: #fff; /* =================================================================== 3. BACKGROUND IMAGES =================================================================== EASIEST WAY: replace the picture file itself. Put your new image in assets/images/ and give it the SAME NAME as the old one (for example hero-background.webp). Done! OR use a different file name: change the name inside url("...") below. Keep the ../assets/images/ part in front of the name. TWO VERSIONS OF EACH PICTURE - "desktop" = wide landscape photo (laptops, big screens) - "mobile" = tall, smaller photo (phones and small tablets) The mobile one loads faster on phone data. Make it a portrait crop (about 800 x 1000 px) with the main subject in the middle. TIPS: .webp, .jpg and .png all work. Keep each file under ~250 KB for a fast site (free tool: https://squoosh.app). */ /* 3A. Top of the page (the first big screen) */ --hero-bg-image: url("../assets/images/hero-background.webp"); --hero-bg-image-mobile: url("../assets/images/hero-background-mobile.webp"); /* 3B. "Our story" section (big picture with text on top) */ --story-bg-image: url("../assets/images/story-background.webp?v=2"); --story-bg-image-mobile: url("../assets/images/story-background-mobile.webp?v=2"); /* 3C. How dark the picture is behind the text. In rgba(R, G, B, OPACITY) the LAST number is the darkness. 0 = no dark tint, 1 = fully black. Smaller = brighter picture. */ --hero-overlay: linear-gradient(90deg, rgba(17,10,7,.80) 0%, rgba(17,10,7,.48) 42%, rgba(17,10,7,.10) 100%); --story-overlay: linear-gradient(90deg, rgba(10,7,5,.84) 0%, rgba(10,7,5,.50) 52%, rgba(10,7,5,.22) 100%); /* Same, for phones (text sits on top, so the tint runs top to bottom) */ --hero-overlay-mobile: linear-gradient(180deg, rgba(17,10,7,.60) 0%, rgba(17,10,7,.55) 45%, rgba(17,10,7,.82) 100%); --story-overlay-mobile: linear-gradient(180deg, rgba(10,7,5,.55) 0%, rgba(10,7,5,.62) 50%, rgba(10,7,5,.82) 100%); /* 3C-2. "Bring Daddy's Crop home" (buy) section - storage / warehouse picture */ --buy-bg-image: url("../assets/images/storage-background.webp"); --buy-bg-image-mobile: url("../assets/images/storage-background-mobile.webp"); --buy-overlay: linear-gradient(90deg, rgba(20,12,8,.78) 0%, rgba(20,12,8,.55) 50%, rgba(20,12,8,.35) 100%); --buy-overlay-mobile: linear-gradient(180deg, rgba(20,12,8,.72) 0%, rgba(20,12,8,.55) 50%, rgba(20,12,8,.78) 100%); --buy-bg-position: center center; /* 3D. Which part of the picture stays visible when it gets cropped. Options: center, top, bottom, left, right (or two, like "center top") or percentages like "40% center". */ --hero-bg-position: center center; --story-bg-position: center center; --hero-bg-position-mobile: 50% center; --story-bg-position-mobile: 50% center; /* =================================================================== 4. LOGO, HEADER AND SIZES =================================================================== */ --logo-height: 52px; /* logo height in the top bar */ --topbar-bg: rgba(20, 12, 9, .78); /* top bar color (last number = see-through amount) */ --container-width: min(1240px, 92vw); /* how wide the page content is */ --hero-min-height: 100vh; /* 100vh = full screen height */ --story-min-height: 100vh; /* "Our story" section height */ --section-padding: 120px; /* space above/below sections (desktop). Smaller automatically on tablet/phone */ /* How much the rice bag grows when you hover over it with the mouse. 1 = no zoom, 1.06 = 6% bigger, 1.15 = 15% bigger. */ --bag-hover-zoom: 1.06; } /* ===================================================================== 5. PHONE & SMALL-TABLET VERSIONS (screens narrower than 900 px) These switch the background pictures to the "mobile" versions above. ===================================================================== */ @media (max-width: 900px) { :root { --hero-bg-image: var(--hero-bg-image-mobile); --story-bg-image: var(--story-bg-image-mobile); --buy-bg-image: var(--buy-bg-image-mobile); --buy-overlay: var(--buy-overlay-mobile); --hero-overlay: var(--hero-overlay-mobile); --story-overlay: var(--story-overlay-mobile); --hero-bg-position: var(--hero-bg-position-mobile); --story-bg-position: var(--story-bg-position-mobile); --logo-height: 44px; --hero-min-height: auto; --story-min-height: 80vh; } }