No Heat or AC? Call Now for Priority Emergency Repair. (610) 705-7653
$500 OFF Tankless Water Heater Learn More
3 open roles! View Jobs
Caliber Heating & Cooling

Project Meta

Overview of branding configuration, content collections, and project setup.

Company Info

Company Name

Caliber Heating & Cooling

Tagline

Dependable Residential Heating and Air Conditioning Services

Established

2016

Contact

Phone

(610) 705-7653

Email

caliberhvac101@gmail.com

Address

Collegeville, PA

Service Area

Primary Area

Collegeville

Regions
  • Montgomery County
  • Chester County
  • Delaware County
  • Southeastern Pennsylvania

Content Collections

Total Entries

47

Hub Pages (6)

Air Conditioning Services, Electrical Services, Heating Services, Indoor Air Quality Services, Plumbing Services, Gas Services

Service Pages (41)

AC Installation & Replacement, AC Maintenance, AC Repair, Air Filters, Emergency AC Repair, Thermostats, Whole Home Dehumidifiers, Ductless Mini-Split Systems, Ceiling Fan Installation, EV Charger Installation, Switch & Outlet Services, Electrical Installation & Repairs, Home Surge Protection, Lighting Installation, Electrical Panel Replacement, Smart Home Electrical Upgrades, Heat Pump Services, Heating Installation & Replacement, Heating Repair, Heating Maintenance, Heating System Safety, Air Purification Systems, Humidifiers & Dehumidifiers, Ventilation Solutions, Drain Cleaning & Clog Repair, Leak Detection, Hybrid Water Heaters, Plumbing Fixtures, Repiping Services, Tankless Water Heaters, Water Filtration Installation, Water Heater Installation, Water Heater Maintenance, Water Heater Repair, Water Heater Services, Water Line Services, Water Treatment Services, Gas Safety Inspections, Gas Installations & Repairs, Gas Leak Detection, Natural Gas & Propane Services

Tech Stack

  • Astro 5.x
  • Tailwind CSS v4
  • GSAP 3.x + ScrollTrigger
  • SendGrid
  • TypeScript (strict)

SendGrid

Email Handler

/api/contact (server endpoint)

Config

Via environment variables

Colors

All color tokens defined in the design system. Colors auto-generate Tailwind utilities.

Brand Colors

#ff1100

Primary

--color-primary

#cc0e00

Primary Dark

--color-primary-dark

#ff4433

Primary Light

--color-primary-light

#02c0f3

Secondary

--color-secondary

#0299c2

Secondary Dark

--color-secondary-dark

#33d4ff

Secondary Light

--color-secondary-light

#ff8707

Accent

--color-accent

#cc6c05

Accent Dark

--color-accent-dark

#ffa940

Accent Light

--color-accent-light

Neutrals

#fafafa

Neutral 50

--color-neutral-50

#f4f4f4

Neutral 100

--color-neutral-100

#e8e8ee

Neutral 200

--color-neutral-200

#d0d0da

Neutral 300

--color-neutral-300

#b0b0be

Neutral 400

--color-neutral-400

#8e8e9e

Neutral 500

--color-neutral-500

#525252

Neutral 600

--color-neutral-600

#4a4a5a

Neutral 700

--color-neutral-700

#2d2d44

Neutral 800

--color-neutral-800

#171717

Neutral 900

--color-neutral-900

Semantic Colors

#22C55E

Success

--color-success

#F59E0B

Warning

--color-warning

#EF4444

Error

--color-error

#3B82F6

Info

--color-info

Surface Colors

#ffffff

Background

--color-bg

#f4f4f4

Background Alt

--color-bg-alt

#171717

Text

--color-text

#525252

Text Muted

--color-text-muted

#ffffff

Text on Primary

--color-text-on-primary

#ffffff

Text on Secondary

--color-text-on-secondary

Typography

Font families and the fluid type scale.

Outfit Variable

Used for all headings (h1-h6), navigation, and card titles

Weight: 400
The five boxing wizards jump quickly text-sm
The five boxing wizards jump quickly text-base
The five boxing wizards jump quickly text-2xl
Weight: 600
The five boxing wizards jump quickly text-sm
The five boxing wizards jump quickly text-base
The five boxing wizards jump quickly text-2xl
Weight: 800
The five boxing wizards jump quickly text-sm
The five boxing wizards jump quickly text-base
The five boxing wizards jump quickly text-2xl

Inter

Used for body text, form labels, descriptions, and UI elements

Weight: 400
The five boxing wizards jump quickly text-sm
The five boxing wizards jump quickly text-base
The five boxing wizards jump quickly text-2xl
Weight: 500
The five boxing wizards jump quickly text-sm
The five boxing wizards jump quickly text-base
The five boxing wizards jump quickly text-2xl
Weight: 600
The five boxing wizards jump quickly text-sm
The five boxing wizards jump quickly text-base
The five boxing wizards jump quickly text-2xl

Heading Scale (h1–h6)

Default heading sizes from the base layer. All use font-heading at weight 700.

H1 — The quick brown fox
<h1> --font-size-4xl clamp(2.25rem, 1.75rem + 2.5vw, 4rem)
H2 — The quick brown fox
<h2> --font-size-3xl clamp(1.875rem, 1.5rem + 1.875vw, 3rem)
H3 — The quick brown fox
<h3> --font-size-2xl clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem)
H4 — The quick brown fox
<h4> --font-size-xl clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem)
H5 — The quick brown fox
<h5> --font-size-lg clamp(1.125rem, 1rem + 0.625vw, 1.375rem)
H6 — The quick brown fox
<h6> --font-size-base clamp(1rem, 0.925rem + 0.375vw, 1.125rem)

Display Classes

Utility classes for oversized display headings. Weight 800, tighter line-height.

.heading-display — Bold impact
.heading-display --font-size-3xl weight: 800 line-height: 1.1 clamp(1.875rem, 1.5rem + 1.875vw, 3rem)
.heading-hero — Bold impact
.heading-hero --font-size-hero weight: 800 line-height: 1.05 clamp(3rem, 2.25rem + 3.75vw, 5rem)

Spacing, Radius & Shadows

Layout and visual effect tokens.

Spacing

Token Value Preview
--spacing-section clamp(4rem, 8vw, 8rem)

Border Radius

Token Value Preview
--radius-sm 0.375rem
--radius-md 0.5rem
--radius-lg 0.75rem
--radius-xl 1rem
--radius-btn 0.5rem
--radius-card 1rem
--radius-full 9999px

Shadows

Token Value Preview
--shadow-sm 0 1px 2px rgba(0, 0, 0, 0.05)
--shadow-md 0 4px 6px -1px rgba(0, 0, 0, 0.1)
--shadow-lg 0 10px 15px -3px rgba(0, 0, 0, 0.1)
--shadow-xl 0 20px 25px -5px rgba(0, 0, 0, 0.1)
--shadow-btn 0 4px 20px rgba(249, 115, 22, 0.35)

Buttons

All button components with size, variant, and grouping options.

Primary Button

Main call-to-action button (secondary/orange color). Used for primary conversion actions.

Small Medium (Default) Large
With Icon
Full Width

Secondary Button

Outline button with primary color border. Used for secondary actions.

Small Medium (Default) Large
With Icon
Full Width

Phone Button

Click-to-call button. Reads phone number from branding.yaml automatically.

Call (610) 705-7653 Call (610) 705-7653 Call (610) 705-7653
Call (610) 705-7653 Call (610) 705-7653

Icon Button

Circular icon-only buttons. Ghost (transparent) or filled variants.

Ghost:
Filled:

Button Group

Flex container for button pairs. Controls alignment and responsive stacking.

align="left" stack="mobile"
Get Quote Learn More
align="center" stack="never"
Get Quote Learn More
align="right" stack="always"
Get Quote Learn More

Form Elements

Individual form field components with various states.

Text Input

Labeled input fields with optional error state.

This field is required

Text Area

Multi-line text input with configurable rows.

Select Input

Dropdown select with custom styling.

Checkbox

Checkbox with inline label.

Forms

Complete form compositions. These forms are live if a Web3Forms key is configured.

Contact Form

Quick Contact Form

Shared Components

Reusable UI primitives: cards, badges, dividers, and ratings.

Card

Content container with variants for visual hierarchy.

Variants

Default Card

Shadow with hover lift effect.

Outlined Card

Border only, minimal shadow.

Elevated Card

Heavy shadow, strong emphasis.

Padding sizes

padding="sm"

padding="md" (default)

padding="lg"

Badge

Inline pill labels for categorization and status.

size="sm"
Primary Secondary Success Warning
size="md"
Primary Secondary Success Warning

Divider

Visual separators with multiple styles.

variant="line"
variant="dots"
•••
variant="gradient"

Star Rating

Star display for ratings with optional review count.

5.0 / lg
4.5 / md
(127 reviews)
3.0 / sm
0.0 / md

Section Backgrounds

SectionWrapper background variants for page sections.

background="white"

Default white background. Used for standard content sections.

background="alt"

Light gray background. Used to alternate visual rhythm between sections.

background="primary"

Blue background with white text. Used for emphasis CTAs.

background="dark"

Dark charcoal background with light text. Used for footer-style sections.