/* =====================================================================
premium.css — On-Site Dumpster Solutions
---------------------------------------------------------------------
A premium restyle overlay. Loads AFTER public/style.css and only
overrides surfaces, depth, type polish, and button shape. The brand
palette (green + charcoal) and all markup stay untouched.
ENABLE: in includes/header.php, right AFTER the existing
add:
ROLL BACK: delete that one line. Nothing else changes.
DIRECTION: keep the hero dark (refined), turn content sections light,
trade hairline borders for soft elevation, calm the green, and soften
the angular buttons.
===================================================================== */
:root{
/* light surfaces for the new "lightened" sections */
--surface-light: #f6f7f3; /* warm paper */
--surface-light-alt: #eef0ea; /* slightly deeper, for rhythm */
--card-light: #ffffff;
/* ink that stays legible on light surfaces */
--ink-dark: #1a1d18; /* headings */
--ink-body: #3a3d37; /* body copy */
--ink-muted: #6b6f68; /* labels, captions */
--green-text: #3d8010; /* green that reads on white */
/* soft elevation (replaces 1px hairline borders) */
--shadow-sm: 0 6px 18px rgba(26,40,10,0.06);
--shadow-md: 0 10px 28px rgba(26,40,10,0.08);
--shadow-lg: 0 16px 38px rgba(26,40,10,0.12);
--radius-card: 16px;
}
/* =====================================================================
1. BUTTONS — drop the notch, round, add depth
===================================================================== */
.btn-primary,
.btn-dark{
clip-path: none;
border-radius: 10px;
}
.btn-primary{ box-shadow: 0 8px 22px rgba(92,184,25,0.28); }
.btn-primary:hover{ box-shadow: 0 12px 28px rgba(92,184,25,0.34); }
.btn-secondary{ border-radius: 10px; }
.nav-cta{ border-radius: 8px; }
/* =====================================================================
2. HEROES — keep dark, but lift off pure black and calm the noise
===================================================================== */
.hero{
background: linear-gradient(157deg, #1b2023 0%, #14171a 60%, #171b1e 100%);
}
/* swap the busy repeating grid for one soft green glow */
.hero-bg{
background: radial-gradient(ellipse 60% 50% at 75% 45%, rgba(92,184,25,0.10), transparent 70%);
}
.hero-bg-stripe,
.hero-accent{ display: none; }
/* remove the outlined-headline treatment */
.hero h1 .stroke{
-webkit-text-stroke: 0;
color: var(--white);
}
.hero-stat{ border-radius: 10px; }
.location-hero,
.blog-hero,
.blog-post-shell,
.wcg-hero{
background:
radial-gradient(circle at 80% 0%, rgba(92,184,25,0.12), transparent 32%),
linear-gradient(157deg, #1b2023, #14171a 65%);
}
/* =====================================================================
3. LIGHTEN THE CONTENT SECTIONS
Base background + safe inherited text color for every section we flip.
===================================================================== */
.pricing-section,
.why-section,
.areas-wrap,
.location-content,
.location-trust-snippet,
.service-overview,
.size-guide-section,
.popular-projects-section,
.prohibited-section,
.permit-section,
.blog-archive,
.wcg-section,
.location-details,
.nearby-locations,
.location-faq-section,
.locations-index,
.locations-strategy{
background: var(--surface-light);
color: var(--ink-body);
}
/* alternate tone so two light sections in a row don't merge */
.why-section,
.service-overview,
.popular-projects-section,
.wcg-section--alt,
.nearby-locations{
background: var(--surface-light-alt);
}
/* headings inside any lightened section */
.pricing-section :is(h1,h2,h3,h4),
.why-section :is(h1,h2,h3,h4),
.areas-wrap :is(h1,h2,h3,h4),
.location-content :is(h1,h2,h3,h4),
.service-overview :is(h1,h2,h3,h4),
.size-guide-section :is(h1,h2,h3,h4),
.popular-projects-section :is(h1,h2,h3,h4),
.prohibited-section :is(h1,h2,h3,h4),
.permit-section :is(h1,h2,h3,h4),
.blog-archive :is(h1,h2,h3,h4),
.wcg-section :is(h1,h2,h3,h4),
.location-details :is(h1,h2,h3,h4),
.nearby-locations :is(h1,h2,h3,h4),
.location-faq-section :is(h1,h2,h3,h4),
.locations-index :is(h1,h2,h3,h4),
.locations-strategy :is(h1,h2,h3,h4){
color: var(--ink-dark);
}
/* the green section eyebrow needs a deeper green to read on light */
.section-label,
.location-kicker{ color: var(--green-text); }
/* =====================================================================
4. CARD LIFT — white surface, soft shadow, no hairline border
(featured/green cards are deliberately excluded — they stay as-is)
===================================================================== */
.price-card:not(.featured),
.size-card:not(.size-card--featured),
.why-card,
.service-overview-card,
.project-card,
.blog-card,
.wcg-material-card,
.location-meta-card,
.location-card,
.location-detail-card,
.project-match-card,
.challenge-card,
.items-col{
background: var(--card-light);
border: 0;
border-radius: var(--radius-card);
box-shadow: var(--shadow-md);
}
/* hover = a touch more lift, no border flash */
.price-card:not(.featured):hover,
.size-card:not(.size-card--featured):hover,
.why-card:hover,
.project-card:hover,
.blog-card:hover{
box-shadow: var(--shadow-lg);
border-color: transparent;
transform: translateY(-4px);
}
/* re-add the brand accent stripes that defined some cards */
.project-card{ border-top: 3px solid var(--green); }
.items-col--accepted{ border-top: 3px solid var(--green); }
.items-col--prohibited{ border-top: 3px solid var(--prohibited-red); }
/* list-style "cards" keep their green left rule */
.location-list li,
.prohibited-item{
background: var(--card-light);
border: 0;
border-left: 3px solid var(--green);
border-radius: 10px;
box-shadow: var(--shadow-sm);
}
.prohibited-item{ color: var(--ink-dark); }
.location-list li{ color: var(--ink-body); }
/* city chips become clean light pills */
.city-chip{
background: var(--card-light);
border: 1px solid rgba(26,40,10,0.10);
border-radius: 8px;
color: var(--ink-body);
box-shadow: var(--shadow-sm);
}
.city-chip:hover{ background: rgba(92,184,25,0.08); }
/* =====================================================================
5. TEXT FIXES — recolor copy that was built for a dark background
===================================================================== */
/* shared muted text */
.section-sub,
.price-summary,
.price-sub,
.price-overage-note,
.size-card-desc,
.size-project-match-title,
.size-guide-cta-label,
.location-meta-label{
color: var(--ink-muted);
}
/* shared body text */
.feature-list li,
.why-card p,
.service-overview-card p,
.project-card p,
.size-card-list li,
.size-card-note,
.capacity-item,
.project-match-name,
.blog-card-excerpt,
.wcg-material-card p,
.wcg-weight-note li,
.items-col-item,
.prohibited-cta,
.pricing-urgency,
.trust-quote{
color: var(--ink-body);
}
/* headings that aren't h1–h4 elements (divs / links / strong) */
.price-name,
.price-amount,
.size-card-title,
.trust-intro{ color: var(--ink-dark); }
.project-card h3 a,
.location-meta-card strong{ color: var(--ink-dark); }
.blog-card-title a{ color: var(--ink-dark) !important; }
.blog-card-title a:hover{ color: var(--green-text) !important; }
/* greens that must stay green, nudged darker for contrast on white */
.blog-card-date,
.blog-card-link,
.project-card .blog-card-link,
.trust-author,
.price-weekend-desc,
.size-capacity-quick,
.size-badge,
.prohibited-cta a{ color: var(--green-text); }
/* non-featured weight note sits on a pale green wash now */
.price-card:not(.featured) .weight-note{
background: rgba(92,184,25,0.08);
border-color: rgba(92,184,25,0.25);
color: var(--ink-body);
}
.price-card:not(.featured) .weight-note strong{ color: var(--green-text); }
/* capacity chips on white */
.capacity-item{
background: rgba(26,40,10,0.05);
border-color: rgba(26,40,10,0.10);
}
/* secondary (outline) buttons need a dark outline on light sections */
.pricing-section .btn-secondary,
.why-section .btn-secondary,
.size-guide-section .btn-secondary,
.location-content .btn-secondary,
.blog-archive .btn-secondary,
.wcg-section .btn-secondary{
color: var(--ink-dark);
border-color: rgba(26,40,10,0.25);
}
.pricing-section .btn-secondary:hover,
.why-section .btn-secondary:hover,
.size-guide-section .btn-secondary:hover,
.location-content .btn-secondary:hover,
.blog-archive .btn-secondary:hover,
.wcg-section .btn-secondary:hover{
color: var(--green-text);
border-color: var(--green);
}
/* trust snippet keeps its green underline, on a light card now */
.location-trust-snippet{
border-bottom-color: var(--green);
box-shadow: var(--shadow-sm);
border-radius: 12px;
}
/* =====================================================================
6. NOTES
- The dark hero, nav, footer, "How It Works" steps, booking form, the
green trust bar, and the green CTA band are intentionally left dark
so the page alternates dark -> light -> dark for contrast.
- Featured cards (.price-card.featured, .size-card--featured) are left
green on purpose. They read as the highlighted option.
- Verify these on staging before going live, since their inner markup
varies by page: .permit-section, .location-details,
.location-faq-section, .locations-index, .locations-strategy.
If any stray text looks too light there, tell me which page and
I'll target it exactly.
===================================================================== */
/* =====================================================================
7. SCOPED OVERRIDES — sections that locations.css re-darkens
---------------------------------------------------------------------
locations.css loads AFTER this file and repaints these sections dark
(.location-details / .location-faq-section / .locations-strategy /
.nearby-locations background -> black; their inner cards -> charcoal).
Premium's light-surface text colors in sections 3 & 5 therefore land
dark-on-dark on these specific sections. Decision: leave those
backgrounds dark and re-assert readable LIGHT text so the sections keep
their original, working dark look. Every rule below is scoped to those
sections, so removing the single header.php link still reverts the whole
overlay with zero cleanup.
===================================================================== */
/* inherited / stray copy back to light */
.location-details,
.location-faq-section,
.locations-strategy,
.nearby-locations{ color: var(--off-white); }
/* headings (incl. .section-title and the FAQ .permit-faq-q) back to white */
.location-details :is(h1,h2,h3,h4),
.location-faq-section :is(h1,h2,h3,h4),
.locations-strategy :is(h1,h2,h3,h4),
.nearby-locations :is(h1,h2,h3,h4){ color: var(--white); }
/* sub-copy back to the light muted tone */
.location-details .section-sub,
.location-faq-section .section-sub,
.locations-strategy .section-sub,
.nearby-locations .section-sub{ color: var(--gray-light); }
/* eyebrow labels back to bright brand green (the on-white green is dim here) */
.location-details .section-label,
.location-faq-section .section-label,
.locations-strategy .section-label,
.nearby-locations .section-label{ color: var(--green); }
/* links: county-hub link sits on a charcoal card (needs bright green);
strategy links sit on the light list pills (need the on-white green) */
.location-details .blog-card-link{ color: var(--green); }
.locations-strategy .location-list li a{ color: var(--green-text); }
/* =====================================================================
8. PREMIUM PASS 2 — type system, calmer palette, dark-card elevation
---------------------------------------------------------------------
Moves the site from "loud local contractor" toward clean/high-end
without touching markup. Re-tones the WHOLE site through the design
tokens (so hero / nav / footer / dark sections shift together), swaps
body & UI text to a clean modern face (Bebas stays for the big display
moments), trades hairline borders for soft elevation on the dark cards
too, and calms the saturated lime. Remove the header link to revert.
===================================================================== */
:root{
/* clean modern UI/body face; display + condensed stay for headings/labels */
--font-body: "Inter", "Barlow", system-ui, -apple-system, sans-serif;
/* softer, warmer near-blacks instead of harsh pure black */
--black: #0e1110;
--charcoal: #161a18;
--gray: #1d211f;
--gray-mid: #2a2f2c;
--off-white: #c8ccc6;
/* calmer, deeper brand green (less neon at scale) + softer glow */
--green: #4ca017;
--green-glow: rgba(76,160,23,0.22);
/* refined amber stars instead of pure clip-art gold */
--star-gold: #f4b740;
/* elevation language for DARK surfaces (mirrors the light --shadow-*) */
--shadow-dark-sm: 0 10px 26px rgba(0,0,0,0.45);
--shadow-dark-md: 0 18px 44px rgba(0,0,0,0.52);
}
/* crisper rendering for the new face */
html{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* calm the relentless uppercase tracking a touch */
.nav-links a{ letter-spacing: 0.6px; }
.section-label,
.footer-col h4{ letter-spacing: 1.8px; }
.section-title{ letter-spacing: 1px; }
/* nav: drop the green hairline, sit on a softer dark with a hairline of light */
nav{
background: rgba(14,17,16,0.82);
border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* DARK CARDS get the soft-elevation language too — lose the 1px white and
3px green hairlines in favour of depth */
.review-card{
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
box-shadow: var(--shadow-dark-sm);
background: linear-gradient(180deg, #1b201d 0%, var(--charcoal) 100%);
}
.review-card:hover{
transform: translateY(-4px);
border-color: rgba(255,255,255,0.12);
box-shadow: var(--shadow-dark-md);
}
.review-featured{
border: 1px solid rgba(255,255,255,0.08);
border-left: 3px solid var(--green);
border-radius: 16px;
box-shadow: var(--shadow-dark-md);
}
/* refined star color (token already swapped above; explicit for clarity) */
.review-stars,
.review-featured-stars{ color: var(--star-gold); }
/* featured pricing card: deep-green gradient reads richer + lifts text contrast */
.price-card.featured{
background: linear-gradient(160deg, #4ca017 0%, #357312 100%);
}
/* craft details: focus ring, selection, smoother motion, reduced-motion respect */
:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
::selection{ background: rgba(76,160,23,0.28); color: #fff; }
a, button, .btn-primary, .btn-secondary, .btn-dark, .nav-cta,
.price-card, .review-card, .why-card{
transition: color .2s ease, background-color .2s ease, border-color .2s ease,
box-shadow .25s ease, transform .25s ease;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Featured pricing card now sits on a deep-green gradient, so flip its text
to light (the original dark-on-lime text + premium pass 1 had dimmed it).
Light text on deep green reads cleaner and more premium. */
.price-card.featured{ color: #ffffff; }
.price-card.featured .price-name,
.price-card.featured .price-amount,
.price-card.featured .price-dollar,
.price-card.featured .price-note,
.price-card.featured .feature-list li{ color: #ffffff; }
.price-card.featured .price-summary,
.price-card.featured .price-sub,
.price-card.featured .price-period,
.price-card.featured .price-overage-note{ color: rgba(255,255,255,0.86); }
.price-card.featured .price-overage-note strong,
.price-card.featured .price-weekend-desc{ color: #eafbe0; }
.price-card.featured .feature-list li{ border-bottom-color: rgba(255,255,255,0.16); }
.price-card.featured .feature-list li::before{ background: #ffffff; }
/* badge on the green card: subtle glass pill instead of green-on-green */
.price-card.featured .weekend-special-badge{ background: rgba(0,0,0,0.22); color: #ffffff; }