Global Fonts: Lora + DM Mono → Settings → Fonts → Add Google FontFour-color rule: Section top border OR Divider element + custom class .press-ruleRegister offset: .ink-offset class on rule element → Additional CSS Classes
Optical size variation: 3 separate Text elements in one Column, independent typography per elementInk-bleed block: Text element, BG color red, Additional CSS Classes → ink-bleedGrain: class "grain" on Section → Additional CSS Classes (defined in global CSS)Drawn underline: Code element below Text, raw SVG with animated path
Serving Baltimore Since 1929
Heating.Cooling && Plumbing Services
The family that knows your name.
Commission-free technicians. No upselling. No corners cut. Three generations, same northwest Baltimore family.
No Commission — EverLicensed & InsuredFree EstimatesA+ BBB
95Years Serving Baltimore
Sky tint: Section background → Custom → #E5EFF7. Class "grain" in Additional CSS Classes.Trust names: Text element, Lora 700, 0.88rem — same font as headings, even at small size
Service card rules: Section → Custom CSS ::before / ::after for register-offset shadowCard numbers: Text element, Lora 700, 3rem, color #EDEBE6 — large ghost numerals
Technique 9 — Hand-drawn SVG divider: Breakdance Code element between Sections. Raw SVG, path animates on load. Most direct "made by hand" signal.
Craft since 1929
Gold tint + grain: Section background #FAF2D6, border #E0CE7A, class "grain" in Additional CSS ClassesMisregistration squares: CSS ::before + ::after on diff-card-title — shadow square offset 2px
Why Klein
The Klein Difference
We Know Your Name
Not a call center. Not a franchise. Three generations of the same Baltimore family — we remember your house and your history with us.
No Commission. Ever.
Our technicians are never paid on what they sell. The recommendation you get is what your system actually needs.
No Corners Cut
95 years of reputation is worth more than a shortcut. We do the job right the first time, every time.
Family Since 1929
Frank J. Klein founded this company. His family still runs it. Same values, same craft, same northwest Baltimore community.
Pull quote: Text element set in Lora italic at 1.35rem. Large quote mark: absolutely-positioned Text element, Lora, ~20rem, color var(--border).Red bar: Divider element, 5px wide, color var(--red). Register shadow: ::after pseudo-element in custom CSS.
"
"We've been dealing with them for 20–30 years. They call us to set up a time, give you an hour range, and they always show in that time. Every single time."
— Patricia L. · Long-term customer · Angi verified
Review text: Text element, Lora italic, 0.92rem — each quote typeset, not templatedOff-white section: background #F9F7F3 + class "grain" — reads as off-white newsprint
What Customers Say
What Baltimore Families Say
4.9
★★★★★22 reviews · Google & Angi
★★★★★
"We've been dealing with them for 20–30 years. They always show up in the time window they give you. Every single time."
Patricia L.Long-term customer · Angi
★★★★★
"Arrived right on time. Explained each step — fan blades, coils, capacitors. Nothing skipped. Exactly what you want."
Robert M.Verified customer · Angi
★★★★★
"Courteous and respectful. No debris left. Extremely quiet unit. These are people you can trust in your home."
Susan K.Verified customer · Angi
Pillar names: Text element, Lora 700, 0.84rem, color var(--cobalt) — even tiny headings carry the slab serif craft signal
Photo placeholder Geothermal system (Brief shot E-1)
A Smarter Choice
Geothermal Heating & Cooling
Klein is one of very few contractors in the Baltimore area who installs and services geothermal systems — a meaningful advantage for environmentally-minded homeowners.
Up to 65% less energyReduces utility bills year-round vs. conventional systems.
25+ year lifespanGround loop rated 50+ years. Outlasts conventional HVAC.
Works in older Baltimore homesIntegrates with radiator and forced-air systems.
CTA phone number: Text element, Lora 700, 1.35rem, color var(--red) — the phone number reads as a headline, not a link
Ready for an honest estimate?
No pressure. No sales pitch. Same-day response. Serving Pikesville & northwest Baltimore, Monday–Saturday.
Every technique mapped to a specific Breakdance UI action
TECHNIQUE 01Optical Size Variation in Hero H1Column → 3 × Text Elements, independent typography per element
In Breakdance, place three Text elements inside one Column with no gap. Set each independently: Line 1: Lora 700, 5.4rem, ls -0.03em, lh 0.91.Line 2: Lora 600 italic, 3.6rem, ls -0.01em, lh 1.0.Line 3: DM Mono 500, 0.95rem, ls 0.18em, uppercase. This cannot be achieved with a single Text element.
TECHNIQUE 02Ink-Bleed SVG Filter on Red BlockSettings → Custom Code → Head Code (SVG filter definition) + class "ink-bleed" on Text element
The SVG filter block at the top of this file defines id="ink-rough". Paste that entire SVG into Breakdance's Head Code field. Then on the Text element containing the stamped phrase, open Additional CSS Classes and type ink-bleed. The filter is defined globally; the class applies it to any element.
TECHNIQUE 03Hand-Drawn Animated UnderlineCode element placed directly below the Text element it underlines
In Breakdance, after the hero subhead Text element, add a Code element. Paste the SVG underline path into it. The CSS animation (drawIn keyframe) lives in the global Head Code block. Position the Code element with negative top margin (-14px) to overlap the text. The path draws itself across on page load with a 0.8s delay.
TECHNIQUE 04Square-Corner Pills / Rubber Stamp LabelsText element, border via Style panel, border-radius: 0 via Custom CSS or Style panel
In Breakdance's Style panel, set Border to 1.5px solid, color #E0DAD0. Set Border Radius to 0 (override any theme defaults). Font: DM Mono, 0.6rem, uppercase, ls 0.1em. For the red variant, set border color #C42A14, text color #C42A14, background rgba(196,42,20,0.04). No border-radius anywhere in this direction.
TECHNIQUE 05Grain Texture OverlayGlobal CSS (Head Code) defines .grain class → Additional CSS Classes on any Section
The .grain class and its ::after pseudo-element are defined in the global Head Code block. To apply grain to any Section in Breakdance, open that Section's settings, go to Advanced → Additional CSS Classes, and type grain. The SVG noise renders as a subtle paper texture at 5.5% opacity with multiply blend mode — visible but not dominant.
TECHNIQUE 06Register Misalignment (Offset Color Rules)Global CSS ::after pseudo-elements on colored rules + .ink-offset utility class
Each colored rule element has a shadow version offset 2px right and 1px down at 15–20% opacity. In Breakdance this is implemented as a ::after pseudo-element defined in global CSS for the specific class. For the nav rule, the shadow is a second absolutely-positioned div with class nav-rule-offset. The displacement is small — 2px is enough to read as imperfect without reading as broken.
TECHNIQUE 07Hand-Drawn Ampersand SVG DividerCode element between two Section elements — raw SVG block, animated path
Between the Services Section and the Klein Difference Section, add a Code element. Paste the ampersand SVG block directly. The calligraphic path draws itself in via the drawAmp keyframe animation defined in global CSS. The surrounding layout (two horizontal rules flanking the ampersand) uses a Flexbox Row in Breakdance with two Divider elements and the Code element between them.
TECHNIQUE 08Lora Italic at Display-Adjacent SizesTypography panel per Text element — font: Lora, style: italic, weight: 400 or 600
The pull quote, review text, and hero stamp all use Lora italic. At sizes above 0.9rem, Lora's calligraphic axis becomes visible — clear thick-to-thin stroke variation that reads as drawn. In Breakdance's Typography panel, select Lora, set style to Italic, weight 400 for body italic, 600 for display italic. Load both weights in Settings → Fonts to avoid FOUT.