/*
=============================================================
core.css — Combined Core Stylesheet
=============================================================
PURPOSE:
This file combines three previously separate stylesheets
(fonts.css, style.css, global.css) into one file to reduce
the number of HTTP requests the browser makes on page load.
Fewer requests = faster initial paint.
WHAT'S IN HERE (in order):
1. FONTS — Google Fonts import and font-family rules
2. DESIGN TOKENS — CSS custom properties (colors, spacing)
3. CSS RESET — Removes browser default styles
4. TYPOGRAPHY — Heading and body text sizes
5. LAYOUT — .container and section padding
6. BUTTONS — .btn, .btn--primary, .btn--ghost, etc.
7. NAVIGATION — .nav and all nav sub-elements
8. FOOTER — .footer and all footer sub-elements
9. RESPONSIVE — Tablet (1023px) and mobile (767px) overrides
HOW TO MAINTAIN:
Edit this file directly. The original individual files
(fonts.css, style.css, global.css) still exist as source
references but are no longer loaded by any HTML page.
If you make changes here, you do NOT need to touch those files.
LOAD ORDER:
Every HTML page loads: core.css → [page].css
Example (index.html): core.css → home.css
Example (contact.html): core.css → contact.css
BREAKPOINTS:
Desktop → 1024px and above (default styles)
Tablet → max-width: 1023px
Mobile → max-width: 767px
VERSION:
Cache-busted with ?v=X.X query string on each HTML page.
When making changes, bump the version on all HTML files
so browsers don't serve stale cached versions.
=============================================================
*/
/* =============================================================
SECTION 1 — FONTS
=============================================================
Loads Inter from Google Fonts and applies it globally.
Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold).
TO CHANGE THE FONT:
1. Replace the @import URL with the new Google Fonts URL.
2. Update the font-family value in the * rule below.
3. If self-hosting, swap @import for @font-face blocks
pointing src: url() at your local font files.
============================================================= */
/* Google Fonts is loaded via tags in each HTML — NOT here.
Using @import inside CSS creates a render-blocking chain (browser must
download core.css first, then discover and fetch the font URL).
tags in HTML load in parallel and are significantly faster.
See each HTML file's for the preconnect + font link tags. */
/* Apply Inter to every element including ::before and ::after pseudo-elements */
*, *::before, *::after {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased; /* Crisp rendering on macOS/iOS (WebKit) */
-moz-osx-font-smoothing: grayscale; /* Crisp rendering on macOS Firefox */
}
/* =============================================================
SECTION 2 — DESIGN TOKENS (CSS Custom Properties)
=============================================================
All brand colors and core layout values live here.
ALWAYS use these variables — never hard-code hex values.
TO ADD A NEW COLOR:
Add it here in :root, then reference it anywhere with var().
Example: color: var(--color-primary);
COLOR GUIDE:
--color-primary Main orange — buttons, highlights, links
--color-primary-hover Lighter orange — hover/active states
--color-primary-deep Dark orange — pressed states, high contrast
--color-primary-tint Very light orange — backgrounds, callouts
--color-black Near-black — all headings
--color-white Off-white — page and card backgrounds
--color-surface Light gray — subtle section backgrounds
--color-border Light gray — dividers, input borders
--color-body-text Dark gray — default paragraph color
============================================================= */
:root {
/* ----- Brand Colors ----- */
--color-primary: #c2410c; /* Main CTA color — buttons, links, highlights */
--color-primary-hover: #ea580c; /* Hover/active state for primary elements */
--color-primary-deep: #7c2d12; /* Darker shade — pressed states, high contrast */
--color-primary-tint: #fff7ed; /* Very light orange — backgrounds, callout panels */
--color-black: #09090b; /* Headings, high-emphasis text */
--color-white: #fafafa; /* Page background, card backgrounds */
--color-surface: #f4f4f5; /* Subtle section backgrounds, input fills */
--color-border: #e4e4e7; /* Dividers, card borders, input borders */
--color-body-text: #374151; /* Default paragraph / body copy color */
/* ----- Semantic / Status Colors ----- */
--color-success: #16a34a; /* Success messages, confirmations */
--color-error: #dc2626; /* Error messages, destructive actions */
--color-warning: #ca8a04; /* Warning notices, caution states */
/* ----- Layout ----- */
--max-width: 1200px; /* Max content width — all .container elements */
--section-padding: 96px; /* Top/bottom padding on sections — desktop */
/* Overridden to 64px (tablet) and 48px (mobile) */
}
/* =============================================================
SECTION 3 — CSS RESET
=============================================================
Removes browser default styles for a clean, consistent baseline.
WHY EACH RULE:
box-sizing: border-box → padding/border included in width
margin/padding: 0 → removes browser defaults on headings, lists, etc.
scroll-behavior: smooth → anchor links scroll smoothly
img/video block → removes inline gap at bottom of images
a color: inherit → links don't default to browser blue/purple
list-style: none → removes bullets/numbers from ul/ol
button/input font:inherit→ form elements use Inter, not browser default
============================================================= */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth; /* Smooth scrolling for in-page anchor links */
}
body {
overflow-x: hidden; /* Prevent horizontal scroll from tilted hero phones */
color: var(--color-body-text);
background-color: var(--color-white);
line-height: 1.75;
}
img, video, svg {
display: block;
max-width: 100%; /* Prevent media from overflowing their container */
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button, input, select, textarea {
font: inherit; /* Use Inter — browsers override this for form elements by default */
border: none;
background: none;
outline: none; /* Remove default focus ring — add custom focus styles per component */
}
button {
cursor: pointer;
}
/* =============================================================
SECTION 4 — TYPOGRAPHY
=============================================================
Desktop heading sizes and weights. Responsive overrides
are at the bottom of this file in the media query sections.
WEIGHT GUIDE:
900 (black) → hero headlines
700 (bold) → h1, h2 — major section headings
600 (semibold) → h3, h4 — subheadings
400 (regular) → body copy
UTILITY CLASSES:
.text-large → 18px — intro paragraphs, lead copy
.text-small → 14px — captions, labels, fine print
LINE HEIGHTS:
Headings → 1.2 (tight — looks better at large sizes)
Body → 1.75 (loose — easier to read at small sizes)
============================================================= */
h1, h2, h3, h4, h5, h6 {
color: var(--color-black);
line-height: 1.2;
}
h1 { font-size: 48px; font-weight: 700; }
h2 { font-size: 36px; font-weight: 700; }
h3 { font-size: 24px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; }
p {
font-size: 16px;
font-weight: 400;
line-height: 1.75;
}
.text-large { font-size: 18px; }
.text-small { font-size: 14px; }
/* =============================================================
SECTION 5 — LAYOUT UTILITIES
=============================================================
.container — centers content and enforces max-width.
Wrap page content in this inside every section.
section — applies consistent vertical padding.
Value comes from --section-padding (96px desktop,
64px tablet, 48px mobile).
HOW TO USE: