/* ============================================================= style.css — SOURCE FILE (NOT LOADED BY ANY HTML PAGE) ============================================================= NOTE FOR DEVELOPERS: This file has been merged into core.css for performance. No HTML page loads this file directly anymore. To edit design tokens, reset, or typography, open css/core.css and find SECTIONS 2–5. This file is kept as a reference only. ============================================================= style.css ============================================================= PURPOSE: Global styles for the entire website. This file handles: 1. CSS custom properties (design tokens) 2. CSS reset 3. Base typography for all heading/body sizes 4. Core layout utilities (.container, section padding) 5. Responsive breakpoints (tablet and mobile) LOAD ORDER (in ): fonts.css → style.css → any page-specific stylesheet DO NOT put page-specific styles here. Each page or component should have its own stylesheet added after this one if needed. BREAKPOINTS: Desktop → 1024px and above (default styles) Tablet → max-width: 1023px Mobile → max-width: 767px ============================================================= */ /* ============================================================= 1. CSS CUSTOM PROPERTIES (Design Tokens) ============================================================= All brand colors and core layout values live here as CSS variables. Use these tokens throughout every stylesheet — never hard-code hex values or pixel values that match these. HOW TO USE: color: var(--color-primary); background: var(--color-surface); max-width: var(--max-width); TO ADD A NEW COLOR: Add it here first, then reference the variable wherever you need it. Never reach for an arbitrary hex in a component file. ============================================================= */ :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
— desktop */ /* Overridden to 64px (tablet) and 48px (mobile) */ } /* ============================================================= 2. CSS RESET ============================================================= Removes browser default styles so we start from a clean, consistent baseline across all browsers. WHY EACH RULE EXISTS: - box-sizing: border-box → padding/border included in width, not added on top. Prevents layout bugs when setting widths in %. - margin/padding: 0 → removes browser default spacing on h1-h6, p, ul, blockquote, etc. - scroll-behavior: smooth → anchor links (#section-id) scroll smoothly instead of jumping. - img/video/svg block → inline images create a gap at the bottom inside containers; block removes it. - a color: inherit → links don't default to blue/purple. - list-style: none → removes bullets/numbers from ul/ol. - button/input font:inherit→ form elements ignore font-family by default in most browsers; this forces them to use Inter. ============================================================= */ /* Apply border-box sizing and remove all default margin/padding */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Smooth scrolling for in-page anchor links */ html { scroll-behavior: smooth; } /* Default body text color and background */ 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; } /* Remove the inline gap below images/SVGs inside containers */ img, video, svg { display: block; max-width: 100%; /* Prevent media from overflowing their parent */ } /* Links inherit the surrounding text color by default */ a { color: inherit; text-decoration: none; } /* Remove list bullets/numbers — style lists explicitly when needed */ ul, ol { list-style: none; } /* Force form elements to use the page font (browsers override this) */ button, input, select, textarea { font: inherit; /* Inherits font-family, size, weight from body */ border: none; background: none; outline: none; /* Remove default focus ring — add custom focus styles per component */ } /* Ensure buttons always show the pointer cursor */ button { cursor: pointer; } /* ============================================================= 3. TYPOGRAPHY — Desktop (1024px+) ============================================================= Heading sizes and weights are set here for desktop. Tablet and mobile overrides live in the media queries below. WEIGHT GUIDE: 700 (bold) → h1, h2 — major headings 600 (semibold) → h3, h4 — subheadings 400 (regular) → body copy UTILITY CLASSES: .text-large → use on

or for 18px body copy .text-small → use on

or for 14px captions/labels LINE HEIGHTS: Headings use 1.2 (tight — looks better at large sizes) Body copy uses 1.75 (loose — easier to read at small sizes) ============================================================= */ /* Shared heading defaults */ h1, h2, h3, h4, h5, h6 { color: var(--color-black); /* Headings are always near-black, not body-text gray */ line-height: 1.2; /* Tight line-height suits large display text */ } /* Individual heading sizes — desktop */ 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; } /* Default body paragraph */ p { font-size: 16px; font-weight: 400; line-height: 1.75; /* Generous leading for readability */ } /* Body text size utilities — add to any inline or block element */ .text-large { font-size: 18px; } /* Larger intro paragraphs, lead copy */ .text-small { font-size: 14px; } /* Captions, labels, fine print */ /* ============================================================= 4. LAYOUT UTILITIES ============================================================= .container — centers content and enforces the max-width. Wrap page content in this inside every section. section — applies consistent top/bottom breathing room. The padding value comes from --section-padding and is reduced at tablet and mobile below. HOW TO USE:

... your content here ...
============================================================= */ /* Centered content wrapper — use inside every
*/ .container { width: 100%; max-width: var(--max-width); /* 1200px — defined in :root */ margin-inline: auto; /* Centers the container horizontally */ padding-inline: 24px; /* Side gutters on all screen sizes */ } /* Vertical breathing room for every page section */ section { padding-block: var(--section-padding); /* 96px desktop, reduced in breakpoints */ } /* ============================================================= 5. TABLET — max-width: 1023px ============================================================= Applies when the viewport is 1023px wide or narrower. Covers tablets, large phones in landscape, and small laptops. WHAT CHANGES: - Section padding reduced from 96px → 64px - Heading sizes scaled down slightly - Body text stays at 16px (still readable on tablet) ============================================================= */ @media (max-width: 1023px) { :root { --section-padding: 64px; /* Reduce section breathing room on tablet */ } h1 { font-size: 38px; } h2 { font-size: 28px; } h3 { font-size: 22px; } h4 { font-size: 18px; } p { font-size: 16px; } } /* ============================================================= 6. MOBILE — max-width: 767px ============================================================= Applies when the viewport is 767px wide or narrower. Covers phones in portrait and small phones in landscape. WHAT CHANGES: - Section padding reduced from 64px → 48px - Heading sizes scaled down further for small screens - Body text reduced to 15px (balanced for small viewports) ============================================================= */ @media (max-width: 767px) { :root { --section-padding: 48px; /* Reduce section breathing room on mobile */ } h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 17px; } p { font-size: 15px; } }