/* ============================================================ CONFIG — THIS IS THE ONLY CSS FILE YOU EDIT PER CLIENT ============================================================ CLIENT: Delta Ridge Roofing — Rancho Cordova, CA DEMO BUILD. Fictional business. See the notice in the footer. ============================================================ */ /* ------------------------------------------------------------ 1. BRAND COLOR Intake §6 "Brand colors, if you have them" They had no brand colors — burnt copper picked for the trade. Reads as hot asphalt, weathered metal and rusted flashing, and it is nowhere near the default contractor blue that every other roofer in the county is already using. ------------------------------------------------------------ */ :root { --brand: #A8441E; /* burnt copper */ --brand-ink: #7A2F13; /* darker — hovers, headings on tint */ --brand-tint: #FAEFE9; /* very light — section backgrounds */ --brand-on: #FFFFFF; /* text that sits ON the brand color */ /* Accent for urgency — emergency banner, form errors. Template default (#b3401a) sits almost on top of this brand copper, so the storm bar read as decoration rather than an alert. Pushed deeper and redder so it still reads urgent next to the copper. This is the documented exception, not a habit. */ --alert: #8C1C13; --alert-tint: #F9E9E7; } /* ------------------------------------------------------------ 2. VIBE Intake §6 "Pick the vibe you are going for" They picked: Rugged, hardworking, blue collar. Set on the tag of every page: ------------------------------------------------------------ */ /* SAFETY NET — base defaults, identical to clean-modern. Every typographic and spacing variable lives inside a [data-vibe] block below. Miss the attribute on one page, or typo it, and without these the page renders with no display font, no section padding and no borders. These make a mistake look slightly off instead of broken. Do not delete. */ :root { --font-display: "Sora", system-ui, sans-serif; --font-body: "Public Sans", system-ui, sans-serif; --display-weight: 700; --display-spacing: -0.02em; --display-case: none; --radius: 10px; --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 10px 30px rgb(0 0 0 / .06); --section-pad: 76px; --border-weight: 1px; } :root[data-vibe="clean-modern"] { --font-display: "Sora", system-ui, sans-serif; --font-body: "Public Sans", system-ui, sans-serif; --display-weight: 700; --display-spacing: -0.02em; --display-case: none; --radius: 10px; --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 10px 30px rgb(0 0 0 / .06); --section-pad: 76px; --border-weight: 1px; } :root[data-vibe="warm-family"] { --font-display: "Fraunces", Georgia, serif; --font-body: "Nunito Sans", system-ui, sans-serif; --display-weight: 600; --display-spacing: -0.01em; --display-case: none; --radius: 16px; --shadow: 0 2px 4px rgb(0 0 0 / .05), 0 12px 32px rgb(0 0 0 / .07); --section-pad: 72px; --border-weight: 1px; } :root[data-vibe="rugged"] { --font-display: "Barlow Condensed", Impact, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --display-weight: 700; --display-spacing: 0.01em; --display-case: uppercase; --radius: 3px; --shadow: 0 2px 0 rgb(0 0 0 / .12); --section-pad: 64px; --border-weight: 2px; } :root[data-vibe="upscale"] { --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Lato", system-ui, sans-serif; --display-weight: 600; --display-spacing: 0.005em; --display-case: none; --radius: 2px; --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 16px 40px rgb(0 0 0 / .06); --section-pad: 96px; --border-weight: 1px; } :root[data-vibe="bold"] { --font-display: "Anton", Impact, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --display-weight: 400; --display-spacing: 0.005em; --display-case: uppercase; --radius: 0px; --shadow: 5px 5px 0 var(--ink); --section-pad: 64px; --border-weight: 3px; } :root[data-vibe="plain"] { --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --display-weight: 600; --display-spacing: -0.01em; --display-case: none; --radius: 4px; --shadow: none; --section-pad: 60px; --border-weight: 1px; } /* ------------------------------------------------------------ 3. EMERGENCY / AFTER-HOURS Intake §5 "Do you get after-hours or emergency calls?" They answered: Yes, and I want that front and center. Storm season tarping is their highest-margin call. ------------------------------------------------------------ */ :root { --emergency-banner: block; /* block | none */ } /* ------------------------------------------------------------ 4. NEUTRALS Leave these alone unless the brand color clashes. They are deliberately warm-neutral, not pure grey. ------------------------------------------------------------ */ :root { --paper: #ffffff; --ground: #f6f6f4; --ink: #16191c; --muted: #5d6771; --rule: #dfe1e0; } /* ------------------------------------------------------------ 5. CLIENT-ONLY VARIABLES Used by the roofing components at the bottom of styles.css. If a future trade wants these too, promote them upward. ------------------------------------------------------------ */ :root { --slate: #1F2A30; /* hero and dark bands — roof-deck dark */ --slate-soft: #2C3A42; --slate-line: #3E505A; --on-slate: #E8EDF0; }