/* ==========================================================================
Tex Painting — Exterior Painting Landing Page
Custom styles layered on top of Tailwind (CDN).
Brand palette sourced from the live texpainting.com theme CSS.
========================================================================== */
/* The Google Fonts request is issued from a in each page's , not
an @import here. An @import can only start downloading after styles.css has
itself downloaded and parsed, which serialised the chain three levels deep
(html -> styles.css -> fonts.css -> woff2) and stretched the render-blocking
window. The sits beside the existing preconnects and starts in
parallel with this file. */
:root {
/* Dark surfaces — drawn from the charcoal shield in the Tex Painting logo */
--ink-950: #12161a;
--ink-900: #1a1f24;
--ink-800: #232a30;
--ink-700: #2e373e;
/* Neutrals — lifted straight from texpainting.com.
--grey was #808285, which measured 3.85:1 on white and 3.69:1 on --paper.
It is only ever used for small supporting text, so it needed 4.5:1;
#676c72 is the same hue at 5.07:1 on --paper. */
--charcoal: #3a3a3a;
--grey: #676c72;
--body: #55606b;
--line: #dde4e4;
--mist: #e9f0f0;
--paper: #fafafa;
/* Form-field boundary. --line (1.29:1 on the white card) was effectively
invisible, and the #fafafa fill is only 1.04:1 against that card, so the
border is the sole thing identifying the control — WCAG 1.4.11 wants 3:1.
#8a969c measures 3.03:1. */
--field-border: #8a969c;
/* Validation red. #d64545 was 4.38:1 on white / 4.12:1 on the invalid-field
background — both under 4.5:1 for this text size. */
--error: #b91c1c;
/* Brand greens — #66a92b and #9dca00 are the two dominant theme colours.
Both are decorative-only: #66a92b is 2.89:1 on white and #9dca00 is
1.93:1, so neither may carry text or a focus ring on a light surface.
--green-text is the darkened version (5.00:1 on white) used wherever the
green appears AS TYPE — eyebrows, accent words in headings, links, the
required-field asterisk. Fills, rules and dark-surface text keep the
original brand values. */
--green: #66a92b;
--green-dk: #5a9d1f;
--green-text: #457d18;
--lime: #9dca00;
--lime-dk: #8ab300;
--shadow-card: 0 24px 56px -10px rgba(18, 22, 26, 0.18);
--shadow-float: 0 32px 64px -12px rgba(18, 22, 26, 0.35);
}
/* --------------------------------------------------------------------------
Base
-------------------------------------------------------------------------- */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* `clip` rather than `hidden`, and on html rather than body. `overflow-x:
hidden` on body promoted body to the scroll container, which breaks
scroll-behavior:smooth on anchor jumps and position:sticky in some
browsers. `clip` suppresses sideways overflow without creating a
scrollport, so the sticky header and smooth jumps keep working. */
overflow-x: clip;
/* The header is sticky and opaque, so an anchor jump or a keyboard focus
that scrolls an element to y=0 puts it underneath the header. Reserve the
header's height (plus a little breathing room) on every scroll the browser
performs — anchors, :target, and focus alike. */
scroll-padding-top: 5.75rem;
}
@media (min-width: 1024px) {
html { scroll-padding-top: 6.5rem; }
}
body {
font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
color: var(--body);
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.font-display {
font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
font-weight: 400;
letter-spacing: -0.01em;
}
/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* --------------------------------------------------------------------------
Layout helpers
-------------------------------------------------------------------------- */
/* `viewport-fit=cover` lets content run under the sensor housing when a phone
is held in landscape, so the gutters take the larger of the design padding
and the safe-area inset. */
.container-narrow {
width: 100%;
max-width: 1240px;
margin-inline: auto;
padding-left: max(1.25rem, env(safe-area-inset-left));
padding-right: max(1.25rem, env(safe-area-inset-right));
}
@media (min-width: 1024px) {
.container-narrow {
padding-left: max(2.5rem, env(safe-area-inset-left));
padding-right: max(2.5rem, env(safe-area-inset-right));
}
}
.section-padding {
padding-block: 4.5rem;
}
@media (min-width: 768px) {
.section-padding { padding-block: 6rem; }
}
@media (min-width: 1024px) {
.section-padding { padding-block: 7.5rem; }
}
/* Hero form privacy line — always one line. Font shrinks with viewport
below 640px because the offer sticker eats the card's right edge. */
.privacy-line {
white-space: nowrap;
font-size: 0.875rem;
max-width: 100%;
}
.privacy-line svg { flex-shrink: 0; }
@media (max-width: 639.98px) {
.privacy-line { font-size: clamp(0.55rem, 2.75vw, 0.875rem); }
}
/* --------------------------------------------------------------------------
Section 2 rating summary strip
One row at every width: G · 4.9 · stars | divider | serving line. Every
child is sized in em against the strip's own font-size, so shrinking that
single value on phones scales the WHOLE unit proportionally — identical
look on desktop and phone, always centered, never wrapping.
-------------------------------------------------------------------------- */
.rating-strip {
display: flex;
align-items: center;
justify-content: center;
column-gap: 2em;
font-size: 1rem;
}
.rs-left {
display: flex;
align-items: center;
gap: 0.7em;
}
.rs-logo { width: 1.75em; height: 1.75em; flex: 0 0 auto; }
.rs-score { font-size: 1.875em; line-height: 1; }
.rs-stars { display: flex; gap: 0.125em; }
.rs-star { width: 1em; height: 1em; flex: 0 0 auto; }
.rs-divider { width: 1px; height: 2.5em; background: var(--line); flex: 0 0 auto; }
.rs-text { font-size: 0.875em; font-weight: 600; white-space: nowrap; }
/* Phones: scale the strip with the viewport; full size from ~470px up */
@media (max-width: 639.98px) {
.rating-strip { font-size: clamp(0.6rem, 3.4vw, 1rem); }
}
/* Ranger-style golden rating stars (hero) */
.text-star-gold { color: #fbbf24; }
/* Accent rule that sits under headings, same device Ranger uses */
.accent-rule {
width: 5rem;
height: 4px;
border-radius: 999px;
background: var(--lime);
}
/* --------------------------------------------------------------------------
Scroll reveal — driven by IntersectionObserver in script.js
-------------------------------------------------------------------------- */
/* Only hide content once JS has confirmed it is alive (the inline snippet in
adds .js to ). If script.js ever fails to load, or the visitor
has JS disabled, every section stays fully visible instead of blank. */
.js .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
/* Drop the compositor-layer hint once the element has finished animating.
Left on, ~20 section-sized elements stay promoted to their own GPU layers
for the whole session for no benefit. */
will-change: auto;
}
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 0.9rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
cursor: pointer;
border: none;
text-align: center;
}
/* Two-tone focus ring. A lime-only ring was invisible on the white form card
(#9dca00 is 1.93:1 against white); a dark-only ring would vanish on the
charcoal sections. The dark inner outline carries the contrast on light
backgrounds and the lime halo carries it on dark ones, so the same rule
reads everywhere on the page. */
.btn:focus-visible {
outline: 3px solid var(--ink-950);
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(157, 202, 0, 0.85);
}
.btn-primary {
background: var(--lime);
color: var(--ink-950);
padding: 1.05rem 1.75rem;
font-size: 0.9rem;
box-shadow: 0 12px 28px -8px rgba(157, 202, 0, 0.55);
}
/* Very narrow phones: the step-2 Back/Submit row is a two-column grid whose
1fr track cannot shrink below the submit label's min-content width, so the
default horizontal padding pushed the pair past the form card at 320px. */
@media (max-width: 380px) {
.btn-primary { padding-inline: 1.05rem; }
.btn-ghost { padding-inline: 0.9rem; }
}
/* Hover effects are guarded: on a touchscreen there is no pointer to leave, so
an unguarded :hover sticks to the last tapped button until something else is
tapped — the CTA sits in its hover state for the rest of the visit. */
@media (hover: hover) {
.btn-primary:hover {
background: var(--lime-dk);
transform: translateY(-2px);
box-shadow: 0 18px 38px -10px rgba(157, 202, 0, 0.6);
}
.btn-ghost:hover {
border-color: var(--green);
color: var(--green-text);
}
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: transparent;
color: var(--ink-900);
border: 1.5px solid var(--field-border);
padding: 1.05rem 1.5rem;
font-size: 0.85rem;
}
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.hero-bg::after {
/* Charcoal wash so white type always clears WCAG AA over the photo */
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(105deg, rgba(18, 22, 26, 0.93) 0%, rgba(26, 31, 36, 0.86) 38%, rgba(26, 31, 36, 0.54) 66%, rgba(26, 31, 36, 0.3) 100%);
}
/* Mobile stacks the copy over the full width of the photo, so the wash has to
stay heavier here than on desktop to keep white type above 4.5:1. */
@media (max-width: 1023px) {
.hero-bg::after {
background: linear-gradient(180deg, rgba(18, 22, 26, 0.92) 0%, rgba(26, 31, 36, 0.86) 55%, rgba(26, 31, 36, 0.9) 100%);
}
}
.trust-chip {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1rem;
border-radius: 0.85rem;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.13);
color: #fff;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.trust-chip svg { flex: 0 0 auto; color: var(--lime); }
/* Phones: the chip rows are FIXED — 1 / 1 / 2 / 1 — via a 2-column grid, so
the pattern is identical on every device instead of depending on how flex
wrapping happens to land at that width. Chips 1, 2 and 5 span both columns
and centre; "Financing Available" + "Serving since 2005" share the row.
Font scales with the viewport so the pair fits its tracks from 320px up. */
@media (max-width: 639.98px) {
/* doubled class beats the Tailwind CDN's runtime .flex rule on specificity */
.trust-rail.trust-rail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.trust-rail li:nth-child(1),
.trust-rail li:nth-child(2),
.trust-rail li:nth-child(5) { grid-column: 1 / -1; justify-self: center; }
.trust-rail li:nth-child(3) { justify-self: end; }
.trust-rail li:nth-child(4) { justify-self: start; }
/* Same pill design as desktop — same proportions of padding, gap and icon
(converted to em so the whole pill scales as one unit). Only the font
size adapts, hitting the full desktop 0.875rem from ~458px-wide phones
and shrinking proportionally on narrower ones so the paired row fits. */
.trust-chip {
gap: 0.65em;
padding: 0.8em 1.14em;
font-size: clamp(0.7rem, 3.2vw, 0.875rem);
}
.trust-chip svg { width: 1.14em; height: 1.14em; }
}
/* --------------------------------------------------------------------------
Dark photo-section overlays (sections 3, 4 and 7)
These were Tailwind gradient utilities. Do not put them back — the Tailwind
CDN silently failed to emit the via-/to- colour stops for the custom `ink`
palette, and the failure was invisible in the markup:
§3 and §7 `from-ink-950/95 via-… to-…` compiled to a gradient that faded
to fully TRANSPARENT at the bottom;
§4 `bg-gradient-to-br from-… via-… to-…` compiled to `none`, so
white headings sat directly on a bright photo of a pink house.
Written as plain CSS the result is deterministic in every browser.
-------------------------------------------------------------------------- */
.photo-overlay {
position: absolute;
inset: 0;
z-index: -10;
}
/* Vertical wash — sections 3 and 7 */
.photo-overlay-v {
background: linear-gradient(
180deg,
rgba(18, 22, 26, 0.95) 0%,
rgba(26, 31, 36, 0.92) 50%,
rgba(18, 22, 26, 0.96) 100%
);
}
/* Diagonal wash — section 4 */
.photo-overlay-d {
background: linear-gradient(
135deg,
rgba(18, 22, 26, 0.96) 0%,
rgba(26, 31, 36, 0.93) 50%,
rgba(35, 42, 48, 0.91) 100%
);
}
/* --------------------------------------------------------------------------
Offer sticker — rotated badge pinned to the form card corner
-------------------------------------------------------------------------- */
.offer-sticker {
position: absolute;
top: -1.15rem;
right: -0.85rem;
z-index: 20;
width: 7.5rem;
height: 7.5rem;
display: grid;
place-items: center;
text-align: center;
border-radius: 999px;
transform: rotate(11deg);
background: radial-gradient(circle at 32% 28%, var(--lime) 0%, var(--green) 78%);
color: var(--ink-950);
box-shadow: 0 14px 30px -8px rgba(90, 157, 31, 0.65);
border: 3px dashed rgba(255, 255, 255, 0.75);
animation: sticker-pop 4.5s ease-in-out infinite;
}
.offer-sticker span {
display: block;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.12;
padding-inline: 0.4rem;
}
.offer-sticker .sticker-sm { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; }
.offer-sticker .sticker-lg { font-size: 1.45rem; }
@keyframes sticker-pop {
0%, 100% { transform: rotate(11deg) scale(1); }
50% { transform: rotate(11deg) scale(1.045); }
}
@media (max-width: 480px) {
.offer-sticker { width: 6.2rem; height: 6.2rem; top: -0.9rem; right: -0.4rem; }
.offer-sticker .sticker-lg { font-size: 1.15rem; }
.offer-sticker .sticker-sm { font-size: 0.52rem; }
}
/* --------------------------------------------------------------------------
Form
-------------------------------------------------------------------------- */
.form-card {
background: #fff;
border-radius: 1.5rem;
box-shadow: var(--shadow-float);
position: relative;
}
/* The offer sticker is absolutely positioned over the top-right corner of the
card, so the heading and the privacy line underneath it have to reserve that
width or the sticker sits on top of the text. Kept here next to the sticker
sizing rules above so the two stay in step; the required clearance is
(sticker width - its negative right offset - the card's own padding). */
.sticker-clear { padding-right: 5.5rem; }
@media (max-width: 480px) {
.sticker-clear { padding-right: 4.75rem; }
}
.field-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--charcoal);
margin-bottom: 0.45rem;
}
.field-label .req { color: var(--green-text); }
.field-input {
width: 100%;
padding: 0.95rem 1rem;
font-size: 1rem;
font-family: inherit;
color: var(--ink-900);
background-color: var(--paper);
border: 1.5px solid var(--field-border);
border-radius: 0.8rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
.field-input::placeholder { color: #6f777f; }
/* `background-color`, never the `background` shorthand — the shorthand resets
background-image, which wiped the custom chevron off every