/* ============================================================
CSS VARIABLES
============================================================ */
:root {
--white: #ffffff;
--off-white: #f8fbfc;
--surface: #eef5f8;
--surface-mid: #deeaf0;
--border: #d2e4ec;
--text-muted: #5b7080;
--text-subtle: #4a6772;
--text-body: #3d5a68;
--text-head: #0d2a38;
--ink: #071820;
--ink-deep: #050f16;
/* Brand teal palette */
--primary: #0392b2;
--primary-mid: #05aacf;
--primary-dark: #026d87;
--primary-deep: #013d50;
--primary-black: #0c1e28;
--primary-light: #dcf1f7;
/* Gold/amber accent — warm contrast to teal */
--gold: #e8a620;
--gold-dark: #c98c10;
--gold-light: #ffd980;
--gold-text: #8a5e00;
/* Fonts */
--font-head: 'Josefin Sans', sans-serif;
--font-body: 'Nunito', sans-serif;
/* Animation */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--dur: 0.36s;
--topbar-h: 38px;
--nav-h: 96px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text-body); background: var(--white); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
/* ============================================================
PAGE CONTENT WRAPPER — offset for fixed navbar + utility bar
Pages WITH a hero: hero is full-viewport, sits behind the fixed nav
Pages WITHOUT a hero: .wh-page-content-wrapper gets padding-top
to push content below the fixed bars
============================================================ */
.wh-page-content-wrapper {
/* Default: no padding — hero pages handle their own offset */
}
.wh-page-content-wrapper.no-hero {
padding-top: calc(var(--topbar-h) + var(--nav-h));
}
/* ============================================================
LAYOUT
============================================================ */
.container { max-width: 1240px; margin: 0 auto; padding: 0 44px; }
.section { padding: 96px 0; }
/* ---- Eyebrow / section labels ---- */
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-dark);
margin-bottom: 16px;
}
.eyebrow-bar { width: 30px; height: 2px; background: var(--primary); flex-shrink: 0; }
.eyebrow.gold { color: var(--gold-text); }
.eyebrow.gold .eyebrow-bar { background: var(--gold); }
.eyebrow.light { color: rgba(255,255,255,0.85); }
.eyebrow.light .eyebrow-bar { background: var(--gold); }
/* Single-element eyebrow for WYSIWYG / Global Code use.
Usage: Label (gold / light variants supported)
No alignment applied — wrap in any parent to center/right-align. */
.wh-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-dark);
line-height: 1.4;
}
.wh-eyebrow::before {
content: '';
display: inline-block;
width: 30px; height: 2px;
background: var(--primary);
flex-shrink: 0;
}
.wh-eyebrow.gold { color: var(--gold-text); }
.wh-eyebrow.gold::before { background: var(--gold); }
.wh-eyebrow.light { color: rgba(255,255,255,0.85); }
.wh-eyebrow.light::before { background: var(--gold); }
.section-title {
font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.02em; line-height: 1.08;
font-size: clamp(2rem, 4vw, 3rem); color: var(--text-head);
}
.section-title.light { color: var(--white); }
.section-lead {
font-family: var(--font-body); font-size: 16px; font-weight: 400;
line-height: 1.80; color: var(--text-subtle); margin-top: 14px;
}
.section-lead.light { color: rgba(255,255,255,0.85); }
/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.rl { opacity: 0; transform: translateX(-32px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.rr { opacity: 0; transform: translateX(32px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.vis, .rl.vis, .rr.vis { opacity: 1; transform: none; }
.d1 { transition-delay: 0.07s; } .d2 { transition-delay: 0.14s; }
.d3 { transition-delay: 0.21s; } .d4 { transition-delay: 0.28s; }
.d5 { transition-delay: 0.35s; } .d6 { transition-delay: 0.42s; }
/* ---- Shared rounded buttons ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--font-head); font-size: 13px; line-height: 13px;
font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
padding: 14px 32px;
border-radius: 50px; border: 2px solid transparent;
cursor: pointer; text-decoration: none; box-sizing: border-box;
transition: background var(--dur) ease, color var(--dur) ease,
border-color var(--dur) ease, transform var(--dur) ease,
box-shadow var(--dur) ease;
}
/* WordPress resets padding — override specifically for anchor buttons */
a.btn {
padding-top: 15px !important;
padding-bottom: 11px !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
.btn:hover { transform: translateY(-2px); }
.btn-teal { background: var(--primary-dark); color: var(--white); }
.btn-teal:hover { background: var(--primary-deep); color: var(--white); box-shadow: 0 8px 24px rgba(3,146,178,0.32); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-dark); color: var(--white); box-shadow: 0 8px 24px rgba(232,166,32,0.34); }
.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.50); }
.btn-outline-white:hover { background: rgba(255,255,255,0.10); border-color: var(--white); color: var(--white); }
.btn-outline-teal { background: transparent; color: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-teal:hover { background: var(--primary); color: var(--white); }
.btn i {
font-size: 11px;
line-height: 1;
display: inline-flex;
align-items: center;
position: relative;
top: -1px; /* nudge icon to optical center alongside caps */
}
/* ============================================================
PAGE LOADER
============================================================ */
#page-loader {
position: fixed; inset: 0; z-index: 9999;
background: var(--primary-black);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
transition: opacity 2s ease, visibility 2s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* mix-blend-mode:screen makes the logo's black bg disappear on dark background */
.loader-logo { width: 220px; mix-blend-mode: screen; opacity: 0; transform: translateY(12px); animation: ldFade 0.7s 0.2s forwards ease-out; }
@keyframes ldFade { to { opacity: 1; transform: translateY(0); } }
.loader-swoosh { width: 200px; height: 2px; background: rgba(255,255,255,0.07); overflow: hidden; opacity: 0; animation: ldFade 0.4s 0.5s forwards ease-out; border-radius: 2px; }
.loader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--gold-light)); border-radius: 2px; animation: ldFill 1.6s 0.6s forwards var(--ease); }
@keyframes ldFill { 0%{width:0%} 65%{width:72%} 100%{width:100%} }
.loader-tag { font-family: var(--font-head); font-size: 10.1px; font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; color: var(--white); opacity: 0; animation: ldFade 0.4s 0.9s forwards ease-out; }
/* ============================================================
CLICK LOADER (page transitions)
============================================================ */
#click-loader {
position: fixed; inset: 0; z-index: 9998; background: var(--primary-black);
opacity: 0; visibility: hidden; pointer-events: none;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#click-loader.active { opacity: 1; visibility: visible; pointer-events: all; }
.cl-ring { width: 36px; height: 36px; border: 2px solid rgba(255,255,255,0.12); border-top-color: var(--primary-mid); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ============================================================
UTILITY BAR — phone prominent left, links right
============================================================ */
.utility-bar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
height: var(--topbar-h);
background: linear-gradient(90deg, var(--primary-deep) 0%, var(--primary-dark) 100%);
display: flex; align-items: center; justify-content: space-between;
padding: 0 44px;
}
/* Phone number — full white, not bold, slightly larger for easy reading */
.utility-phone {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-head); font-size: 16px; font-weight: 400;
letter-spacing: 0.10em; color: var(--white);
transition: color var(--dur) ease; height: var(--topbar-h);
}
.utility-phone i { font-size: 11.2px; color: var(--white); opacity: 0.75; }
.utility-phone:hover { color: rgba(255,255,255,0.75); }
.utility-right { display: flex; align-items: center; gap: 0; }
.utility-link {
color: rgba(255,255,255,0.85); font-family: var(--font-body); font-size: 11.5px;
font-weight: 500; padding: 0 16px; display: flex; align-items: center; gap: 6px;
height: var(--topbar-h);
border-left: 1px solid rgba(255,255,255,0.10);
transition: color var(--dur) ease;
}
.utility-link:hover { color: var(--white); }
.utility-link i { font-size: 9.9px; }
/* "Get Estimate" — gold pill button in utility bar */
.utility-cta-btn {
margin-left: 10px;
padding: 7px 16px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
background: var(--gold); color: var(--ink) !important;
border-radius: 50px; font-family: var(--font-head) !important;
font-size: 11px !important; line-height: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.10em; text-transform: uppercase;
transition: background var(--dur) ease;
border: none; height: auto !important;
}
.utility-cta-btn:hover { background: var(--gold-dark); color: var(--white) !important; }
a.utility-cta-btn {
padding-top: 10px !important;
padding-bottom: 6px !important;
}
/* ============================================================
NAVIGATION
— white bg with faint roofline SVG silhouette
— Josefin Sans UPPERCASE nav links
— each link gets a PEAKED/GABLE shape bg on hover (roof tab effect)
— logo sits in a small dark teal badge
============================================================ */
#navbar {
position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 1000;
height: var(--nav-h);
background: var(--white);
display: flex; align-items: center; padding: 0 44px;
box-shadow: 0 1px 0 rgba(0,0,0,0.07);
transition: box-shadow var(--dur) ease;
/* overflow must stay visible so dropdowns can render below the bar */
}
#navbar.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.10); }
/* Optional navbar background image — set via inline style on #navbar */
#navbar[style*="background-image"] {
background-size: cover; background-position: center;
}
/* Logo — transparent PNG on white navbar, multiply blend mode removes white fringing */
.nav-logo {
flex-shrink: 0; margin-right: auto; z-index: 1;
display: flex; align-items: center;
}
.nav-logo img {
height: 82px; width: auto; display: block;
mix-blend-mode: multiply;
}
/* Nav links */
.nav-links { display: flex; align-items: stretch; gap: 0; z-index: 1; height: var(--nav-h); }
.nav-item { position: relative; display: flex; align-items: center; }
/* The peaked gable tab — appears on hover/active as a house-peaked background */
.nav-link {
position: relative; z-index: 1;
font-family: var(--font-head); font-size: 13px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
color: var(--text-head); padding: 0 14px;
display: flex; align-items: center; gap: 4px;
height: 100%; white-space: nowrap;
transition: color var(--dur) ease;
}
.nav-link .nav-icon { font-size: 12px; opacity: 0.6; transition: opacity var(--dur) ease; }
.nav-item:hover .nav-link .nav-icon { opacity: 1; }
/* Peaked roof shape bg — slides up on hover */
.nav-link::before {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 0;
background: var(--primary-light);
/* pentagon peak = house gable shape */
clip-path: polygon(50% 0%, 100% 22%, 100% 100%, 0% 100%, 0% 22%);
transition: height 0.28s var(--ease);
z-index: -1;
}
.nav-item:hover .nav-link::before { height: 100%; }
.nav-item:hover .nav-link { color: var(--primary-dark); }
/* Small accent dot at the very peak of the gable shape on hover */
.nav-link::after {
content: '';
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
opacity: 0; transition: opacity 0.2s ease 0.15s;
}
.nav-item:hover .nav-link::after { opacity: 1; }
.nav-arrow { font-size: 8.6px; opacity: 0.45; transition: transform 0.22s var(--ease), opacity 0.22s ease; margin-left: 1px; }
.nav-item:hover .nav-arrow { transform: rotate(180deg); opacity: 0.75; }
/* Dropdown */
.nav-dropdown {
position: absolute; top: calc(100% - 1px); left: 0;
min-width: 220px; background: var(--white);
border: 1px solid var(--border); border-top: 2px solid var(--primary);
box-shadow: 0 14px 40px rgba(0,0,0,0.10);
border-radius: 0 0 12px 12px;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 0.22s var(--ease), visibility 0.22s, transform 0.22s var(--ease);
z-index: 600;
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-link {
display: flex; align-items: center; gap: 10px;
padding: 11px 20px;
font-family: var(--font-body); font-size: 14px; font-weight: 500;
color: var(--text-body); border-bottom: 1px solid var(--surface);
transition: color 0.18s ease, background 0.18s ease, padding-left 0.18s ease;
}
.nav-drop-link:last-child { border-bottom: none; }
.nav-drop-link:hover { color: var(--primary); padding-left: 23px; background: var(--primary-light); }
.nav-drop-icon { width: 26px; height: 26px; background: var(--surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.9px; color: var(--primary-dark); flex-shrink: 0; transition: background var(--dur) ease; }
.nav-drop-link:hover .nav-drop-icon { background: var(--primary-light); }
/* (Phone pill removed — phone lives in utility bar) */
/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; z-index: 1100; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text-body); transition: all 0.32s var(--ease); border-radius: 2px; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--white); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--white); }
/* ============================================================
MOBILE NAV — dark slide-in drawer with accordion
============================================================ */
#mobile-nav {
position: fixed; top: 0; left: 0; width: 300px; max-width: 84vw; height: 100vh;
background: var(--primary-black); z-index: 1050; transform: translateX(-100%);
transition: transform 0.4s var(--ease); display: flex; flex-direction: column;
}
#mobile-nav.open { transform: translateX(0); }
.mob-nav-header {
flex-shrink: 0; padding: 14px 28px 14px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,0.08);
position: relative;
}
/* Gold accent bar below header */
.mob-nav-header::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--primary-mid), var(--gold));
}
/* Mobile nav logo uses mix-blend-mode:screen (applied inline) */
.mob-nav-close {
background: none; border: none; cursor: pointer; padding: 6px;
color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1;
transition: color var(--dur) ease; border-radius: 50%;
}
.mob-nav-close:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.mob-nav-links { flex: 1; overflow-y: auto; padding: 8px 0; }
.mob-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
.mob-link {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 28px;
font-family: var(--font-head); font-size: 14.1px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.80); cursor: pointer; user-select: none;
transition: color var(--dur) ease, background var(--dur) ease;
}
.mob-link:hover { color: var(--white); background: rgba(255,255,255,0.03); }
.mob-link a { flex: 1; color: inherit; }
.mob-chevron-icon {
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.85); font-size: 9px; border: 1px solid rgba(255,255,255,0.14);
border-radius: 50%; transition: transform 0.25s var(--ease), color 0.2s ease;
}
.mob-item.open .mob-chevron-icon { transform: rotate(180deg); color: var(--primary-mid); border-color: var(--primary-mid); }
.mob-submenu { max-height: 0; overflow: hidden; transition: max-height 0.32s var(--ease); background: rgba(0,0,0,0.20); }
.mob-submenu a { color: rgba(255,255,255,0.85); background: transparent; }
.mob-submenu a:hover { color: rgba(255,255,255,0.90); }
.mob-item.open .mob-submenu { max-height: 800px; }
.mob-sub-link {
display: block; padding: 10px 28px 10px 46px;
font-family: var(--font-body); font-size: 13.4px; font-weight: 400;
color: rgba(255,255,255,0.85); border: none; border-bottom: 1px solid rgba(255,255,255,0.06);
transition: color var(--dur) ease, padding-left var(--dur) ease;
}
.mob-sub-link:last-child { border-bottom: none; }
.mob-sub-link:hover { color: var(--white); background: rgba(255,255,255,0.08); padding-left: 54px; }
.mob-nav-footer { flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.08); padding: 8px 0 90px; }
.mob-phone-row {
display: flex; align-items: center; gap: 10px;
padding: 14px 28px; color: var(--white);
font-family: var(--font-head); font-size: 17.6px; font-weight: 400;
letter-spacing: 0.06em; transition: color var(--dur) ease;
}
.mob-phone-row:hover { color: rgba(255,255,255,0.75); }
.mob-phone-row i { font-size: 12.8px; opacity: 0.75; }
.mob-foot-link {
display: flex; align-items: center; gap: 10px; padding: 11px 28px;
font-family: var(--font-body); font-size: 13.4px; font-weight: 400;
color: rgba(255,255,255,0.85); transition: color var(--dur) ease;
}
.mob-foot-link:hover { color: var(--white); }
.mob-foot-link i { font-size: 11.5px; opacity: 1; }
.nav-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1040;
opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-overlay.active { opacity: 1; visibility: visible; }
/* ============================================================
HERO SLIDER — full viewport, 3 slides, particle canvas
============================================================ */
#hero {
position: relative; width: 100%; height: 100vh; min-height: 620px;
overflow: hidden;
}
/* Particle canvas for subtle floating ambience */
#particle-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-slide {
position: absolute; inset: 0; z-index: 1;
opacity: 0; transition: opacity 1.1s ease;
background-size: cover; background-position: center; background-repeat: no-repeat;
pointer-events: none; /* inactive slides must not intercept clicks */
}
.hero-slide.active {
opacity: 1;
pointer-events: auto; /* only the active slide receives clicks */
}
/* Gradient overlays — strong left column for text, atmospheric overall */
.hero-slide::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to right, rgba(7,24,32,0.65) 0%, rgba(7,24,32,0.40) 50%, rgba(7,24,32,0.05) 100%),
linear-gradient(to top, rgba(7,24,32,0.85) 0%, rgba(7,24,32,0.30) 25%, transparent 55%);
}
/* Slide background photos — set per slide */
/* Recommended: 1920×1080 JPG, dark atmospheric roofing photography */
.hero-slide:nth-child(2) { background-image: url('../img/hero-1.jpg'); }
.hero-slide:nth-child(3) { background-image: url('../img/hero-2.jpg'); }
.hero-slide:nth-child(4) { background-image: url('../img/hero-3.jpg'); }
/* Content — tall, positioned left-bottom */
.hero-content {
position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
padding: 0 100px 120px;
max-width: 720px;
display: flex; flex-direction: column; align-items: flex-start;
}
/* Animate content when slide becomes active */
.hero-slide.active .hero-kicker { animation: hIn 0.7s 0.05s var(--ease) both; }
.hero-slide.active .hero-title { animation: hIn 0.7s 0.12s var(--ease) both; }
.hero-slide.active .hero-sub { animation: hIn 0.7s 0.20s var(--ease) both; }
.hero-slide.active .hero-actions { animation: hIn 0.7s 0.28s var(--ease) both; }
@keyframes hIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-kicker {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-head); font-size: 11.2px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--white); margin-bottom: 16px;
}
.kicker-rule { width: 36px; height: 1px; background: var(--white); }
.hero-title {
font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.02em; line-height: 1.0;
font-size: clamp(2.8rem, 7.5vw, 4.35rem);
color: var(--white); margin-bottom: 20px;
}
.hero-title em { font-style: normal; color: var(--primary-mid); }
.hero-sub {
font-family: var(--font-body); font-size: 16.8px; font-weight: 300;
line-height: 1.72; color: var(--white);
max-width: 480px; margin-bottom: 36px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Hero slider controls */
.hero-controls {
position: absolute; bottom: 46px; left: 100px; right: 100px;
z-index: 4; display: flex; align-items: center; gap: 18px;
}
.hero-dots { display: flex; gap: 7px; }
.hero-dot {
height: 2px; width: 22px; background: rgba(255,255,255,0.22);
border-radius: 2px; cursor: pointer; overflow: hidden; position: relative;
transition: width 0.4s ease;
}
.hero-dot.active { width: 48px; background: rgba(255,255,255,0.28); }
.hero-dot.active::after {
content: ''; position: absolute; top: 0; left: 0; height: 100%;
background: var(--gold); border-radius: 2px;
animation: dotProg 7000ms linear forwards;
}
@keyframes dotProg { from { width: 0; } to { width: 100%; } }
.hero-slide-num {
font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
letter-spacing: 0.1em; color: var(--white);
background: rgba(7,24,32,0.88); padding: 4px 10px; border-radius: 12px;
}
.hero-slide-num strong { color: var(--white); }
/* Side nav arrows — absolute overlay, pinned to hero edges, vertically centered */
.hero-nav-btns {
position: absolute; inset: 0; z-index: 5;
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; pointer-events: none;
}
.hero-nav-btns .hn-btn { pointer-events: auto; }
.hn-btn {
width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22);
background: rgba(0,0,0,0.28); backdrop-filter: blur(10px);
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.85); font-size: 11.5px;
transition: all var(--dur) ease;
}
.hn-btn:hover { border-color: rgba(255,255,255,0.55); color: var(--white); background: rgba(3,146,178,0.28); }
.hn-btn:focus, .hn-btn:active { outline: none; box-shadow: none; }
/* ============================================================
SWOOSH DIVIDER — references the curved swoop element in the MCCR logo
Used to transition between sections with a wave that echoes the logo's arc
============================================================ */
.swoosh-divider {
position: relative; z-index: 1; display: block; overflow: hidden;
margin-top: -2px; margin-bottom: -2px;
line-height: 0; /* kill whitespace gap below image */
}
.swoosh-divider svg { display: block; width: 100%; }
/* ============================================================
TRUST STRIP — 4 key signals, clean pills
============================================================ */
#trust-strip { background: var(--primary-deep); padding: 0; }
.trust-row {
display: grid; grid-template-columns: repeat(4,1fr);
}
.trust-cell {
display: flex; align-items: center; gap: 16px;
padding: 24px 32px;
border-right: 1px solid rgba(255,255,255,0.08);
transition: background var(--dur) ease;
}
.trust-cell:last-child { border-right: none; }
.trust-cell:hover { background: rgba(255,255,255,0.03); }
.trust-cell-icon {
width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
background: rgba(3,174,211,0.14); border: 1px solid rgba(3,174,211,0.28);
display: flex; align-items: center; justify-content: center;
font-size: 16.8px; color: var(--primary-mid);
transition: background var(--dur) ease;
}
.trust-cell:hover .trust-cell-icon { background: rgba(3,174,211,0.24); }
.trust-cell-label { font-family: var(--font-head); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); line-height: 1.25; }
.trust-cell-sub { font-size: 12px; color: rgba(255,255,255,1); margin-top: 3px; font-weight: 400; }
/* ============================================================
INTRO — company overview, 2-column
============================================================ */
#intro { background: var(--white); padding: 100px 0; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.intro-copy p { font-size: 15.5px; line-height: 1.84; color: var(--text-body); margin-top: 18px; }
.intro-copy p strong { color: var(--text-head); font-weight: 600; }
.intro-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
/* Feature quad — 4 rounded boxes */
.feat-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feat-box {
background: var(--off-white); border: 1px solid var(--border);
border-radius: 16px; padding: 24px 20px;
transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
}
.feat-box:hover { border-color: var(--primary-mid); box-shadow: 0 8px 28px rgba(3,146,178,0.10); transform: translateY(-3px); }
.feat-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 16.8px; color: var(--primary-dark); margin-bottom: 14px; transition: background var(--dur) ease; }
.feat-box:hover .feat-icon { background: var(--primary); color: var(--white); }
.feat-title { font-family: var(--font-head); font-size: 14.1px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-head); margin-bottom: 6px; }
.feat-desc { font-size: 12.5px; color: var(--text-subtle); line-height: 1.60; }
/* ============================================================
SERVICES — photo-card grid, light background
IMAGE BACKGROUND OPTION: set --services-bg-img to a URL
e.g. section style="--services-bg-img: url('../img/services-bg.jpg')"
============================================================ */
#services-preview {
background-color: var(--surface-mid);
/* Optional: background image — uncomment and update path when you have a photo */
/* background-image: linear-gradient(rgba(240,247,250,0.94), rgba(240,247,250,0.94)), url('../img/services-bg.jpg'); */
/* background-size: cover; background-position: center; */
padding: 0px 0 20px 0;
}
.svc-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 52px; flex-wrap: wrap; gap: 24px; }
.svc-header-right { display: flex; gap: 12px; }
/* Service cards — photo top, title below, fully rounded */
.svc-grid { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.svc-card { width: calc(33.333% - 15px); }
.svc-card {
background: var(--white); border-radius: 20px;
overflow: hidden; cursor: pointer;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
transition: transform var(--dur) ease, box-shadow var(--dur) ease;
border: none; padding: 0; margin: 0;
display: block; /* override any flex/inline from parent/bootstrap */
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(3,146,178,0.14); }
/* Photo area — 16:9 placeholder ready for stock photo */
.svc-img {
position: relative; width: 100%; aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 60%, rgba(3,146,178,0.4) 100%);
overflow: hidden;
}
/* When an actual image is placed inside: */
.svc-card .svc-img > img {
position: absolute; inset: 0; width: 100%; height: 100%;
max-width: none; object-fit: cover; display: block;
border-radius: 0; transition: transform 0.6s ease;
}
.svc-card:hover .svc-img > img { transform: scale(1.06); }
/* Teal overlay on hover revealing "Learn More" */
.svc-img-overlay {
position: absolute; inset: 0;
background: rgba(3,82,102,0.78);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
opacity: 0; transition: opacity 0.35s ease;
}
.svc-card:hover .svc-img-overlay { opacity: 1; }
.svc-img-overlay span {
font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--white);
}
.svc-img-overlay i { font-size: 19.2px; color: var(--gold-light); }
/* Placeholder service icon visible when no photo yet */
.svc-icon-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.svc-icon-placeholder i { font-size: 38.4px; color: rgba(255,255,255,0.55); }
.svc-icon-placeholder span { font-family: var(--font-head); font-size: 9.9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
/* Card body */
.svc-body { padding: 22px 24px 24px; margin: 0; border: none; }
.svc-title { font-family: var(--font-head); font-size: 16.8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-head); margin-bottom: 8px; }
.svc-desc { font-size: 13.4px; color: var(--text-subtle); line-height: 1.68; margin-bottom: 16px; }
.svc-link {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
letter-spacing: 0.10em; text-transform: uppercase; color: var(--primary-dark);
transition: gap 0.25s ease, color 0.25s ease;
}
.svc-link:hover { gap: 12px; color: var(--primary-dark); }
.svc-link i { font-size: 9.6px; }
/* Emergency card — gold accent treatment */
.svc-card.svc-emergency .svc-img {
background: linear-gradient(135deg, var(--ink) 0%, #2a1500 100%);
}
.svc-card.svc-emergency .svc-title { color: var(--gold-dark); }
.svc-card.svc-emergency .svc-link { color: var(--gold-dark); }
.svc-card.svc-emergency .svc-link:hover { color: var(--gold); }
.svc-card.svc-emergency .svc-icon-placeholder i { color: rgba(232,166,32,0.30); }
/* ============================================================
SWOOSH 2 — section transition
============================================================ */
/* ============================================================
ROOF TYPES — gabled card treatment
The image area is clipped to a PEAKED GABLE shape,
making each card literally look like a little house.
============================================================ */
#roof-types { background: var(--white); padding: 0 0 100px 0; }
.mccr-page + #roof-types { padding-top: 20px; }
.rtype-intro { text-align: center; max-width: 580px; margin: 0 auto 56px; }
.rtype-grid { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.rtype-card { width: calc(33.333% - 15px); }
.rtype-card {
border-radius: 16px; overflow: hidden; background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease;
text-decoration: none; color: inherit; display: block;
}
.rtype-card:hover { transform: translateY(-6px); box-shadow: 0 14px 42px rgba(3,146,178,0.14); border-color: var(--primary-mid); }
/* The peaked gable image container — THE key roof nod in cards */
.rtype-img-wrap {
position: relative; width: 100%; padding-top: 96%;
overflow: hidden;
}
/* Clip path creates peaked gable shape at top of image */
.rtype-img-inner {
position: absolute; inset: 0;
background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary-deep) 100%);
clip-path: polygon(0% 20%, 50% 0%, 100% 20%, 100% 100%, 0% 100%);
transition: clip-path 0.4s var(--ease);
}
.rtype-card:hover .rtype-img-inner {
clip-path: polygon(0% 15%, 50% 0%, 100% 15%, 100% 100%, 0% 100%);
}
/* Photo inside gable — sits below the peak, fills the rest */
.rtype-img-inner img {
position: absolute; top: calc(20% + 5px); left: 0; width: 100%; height: calc(80% - 5px);
object-fit: cover; display: block;
}
/* Hide placeholder icon when card has a photo */
.rtype-img-inner:has(img) + .rtype-gable-icon { display: none; }
/* Icon centered in gable area */
.rtype-gable-icon {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-size: 28.8px; color: rgba(255,255,255,0.75);
transition: color 0.3s ease, transform 0.3s ease;
}
.rtype-card:hover .rtype-gable-icon { color: rgba(255,255,255,0.85); transform: translate(-50%, -50%) scale(1.1); }
.rtype-body { padding: 20px 18px 22px; text-align: center; }
.rtype-title { font-family: var(--font-head); font-size: 15.4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-head); margin-bottom: 8px; }
.rtype-desc { font-size: 12.2px; color: var(--text-subtle); line-height: 1.62; margin-bottom: 12px; }
.rtype-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-size: 11.2px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--primary-dark); transition: gap 0.22s ease; }
.rtype-link:hover { gap: 10px; }
/* ============================================================
STATS BAND — dark teal gradient, 4 numbers
============================================================ */
#stats-band {
background: linear-gradient(135deg, var(--primary-black) 0%, var(--primary-deep) 50%, rgba(3,100,130,0.55) 100%);
padding: 72px 0; position: relative; overflow: hidden;
}
/* Optional background image on stats band — set via inline style on #stats-band */
#stats-band[style*="background-image"] {
background-size: cover; background-position: center;
background-blend-mode: overlay;
}
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4,1fr); }
.stat-cell {
text-align: center; padding: 16px 20px;
border-right: 1px solid rgba(255,255,255,0.10);
}
.stat-cell:last-child { border-right: none; }
.stat-number {
font-family: var(--font-head); font-size: clamp(2.6rem, 5.5vw, 4rem);
font-weight: 700; color: var(--white); line-height: 1; display: block;
letter-spacing: -0.02em;
}
.stat-number sup { font-size: 0.45em; vertical-align: super; margin-left: 1px; color: var(--gold-light); }
.stat-label {
font-family: var(--font-head); font-size: 10.9px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.85); margin-top: 8px; display: block;
}
/* ============================================================
SERVICE AREA — counties served
============================================================ */
#service-area { background: var(--off-white); padding: 100px 0; }
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.county-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.county-card {
display: flex; align-items: center; gap: 18px;
background: var(--white); border: 1px solid var(--border);
border-radius: 14px; padding: 18px 22px;
transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
}
.county-card:hover { border-color: var(--primary-mid); box-shadow: 0 6px 22px rgba(3,146,178,0.10); transform: translateX(5px); }
a.county-card-link { text-decoration: none; color: inherit; }
a.county-card-link:hover { text-decoration: none; }
.county-badge {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
background: var(--primary-light); display: flex; align-items: center; justify-content: center;
font-size: 16px; color: var(--primary-dark); transition: background var(--dur) ease;
}
.county-card:hover .county-badge { background: var(--primary); color: var(--white); }
.county-name { font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-head); }
.county-cities { font-size: 12.2px; color: var(--text-muted); margin-top: 2px; }
.county-more {
color: var(--primary-dark); font-weight: 600; text-decoration: none;
white-space: nowrap;
}
.county-more:hover { color: var(--primary-dark); text-decoration: underline; }
.area-copy p { font-size: 15.4px; line-height: 1.84; color: var(--text-body); margin-bottom: 16px; }
.city-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.city-chip {
display: inline-block;
font-family: var(--font-body); font-size: 12.2px; font-weight: 500;
color: var(--primary-dark); background: var(--primary-light);
border: 1px solid rgba(3,146,178,0.20); border-radius: 50px; padding: 5px 14px;
text-decoration: none;
transition: background var(--dur) ease, color var(--dur) ease;
}
.city-chip:hover { background: var(--primary); color: var(--white); text-decoration: none; }
/* ============================================================
TESTIMONIALS — rounded cards carousel
============================================================ */
#testimonials { background: var(--white); padding: 100px 0; }
.testi-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; flex-wrap: wrap; gap: 20px; }
.testi-carousel { position: relative; padding: 0 56px; }
.testi-btn {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 46px; height: 46px; border-radius: 50%;
border: 1px solid var(--border); background: var(--white);
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: var(--text-muted); font-size: 12.5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.07);
transition: all var(--dur) ease;
}
.testi-btn:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 4px 18px rgba(3,146,178,0.18); }
.testi-btn:focus, .testi-btn:active { outline: none; box-shadow: none; }
.testi-btn.prev { left: 0; }
.testi-btn.next { right: 0; }
.testi-wrap { overflow: hidden; }
.testi-track { display: flex; gap: 20px; transition: transform 0.60s var(--ease); }
.testi-card {
min-width: calc(33.33% - 14px); max-width: calc(33.33% - 14px);
width: calc(33.33% - 14px);
background: var(--white); border: 1px solid var(--border);
border-radius: 20px; padding: 28px 26px;
flex-shrink: 0; display: flex; flex-direction: column;
}
/* Quote icon */
.testi-q {
width: 38px; height: 38px; border-radius: 10px;
background: var(--primary-light); color: var(--primary-dark);
display: flex; align-items: center; justify-content: center;
font-size: 15.4px; margin-bottom: 16px;
}
.testi-stars { font-size: 12.5px; letter-spacing: 2px; color: var(--gold); margin-bottom: 4px; }
.testi-date { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.testi-text { font-size: 14px; line-height: 1.80; color: var(--text-body); font-style: italic; margin-bottom: 8px; overflow-wrap: break-word; }
.testi-text .testi-truncated { display: inline; }
.testi-text .testi-rest { display: none; }
.testi-text.expanded .testi-rest { display: inline; animation: tfade 0.4s ease; }
@keyframes tfade { from { opacity: 0; } to { opacity: 1; } }
.testi-more-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: 12.3px; color: var(--primary-dark); font-family: var(--font-body); display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.testi-more-btn:hover { color: var(--primary-dark); }
.testi-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.testi-av {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head); font-size: 12.8px; font-weight: 700; color: var(--white);
}
.testi-av.gold { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%); }
.testi-name { font-family: var(--font-head); font-size: 13.6px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-head); }
.testi-role { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.testi-source { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.testi-source a { color: var(--text-muted); text-decoration: underline; }
.testi-source a:hover { color: var(--primary-dark); }
.testi-stars .fa-star, .testi-stars .fa-star-half-alt { color: var(--gold); }
.testi-stars .far.fa-star { color: var(--border); }
.testi-dots { display: flex; gap: 7px; justify-content: center; margin-top: 36px; }
.testi-dot { width: 22px; height: 2px; background: var(--border); border-radius: 2px; cursor: pointer; transition: all 0.3s ease; }
.testi-dot.active { background: var(--primary); width: 44px; }
/* ============================================================
DUAL CTA — two clean panels, stacked vertically
============================================================ */
#cta-band { display: grid; grid-template-columns: 1fr 1fr; }
.cta-panel {
padding: 88px 80px; display: flex; flex-direction: column;
align-items: flex-start; justify-content: center;
position: relative; overflow: hidden;
}
.cta-estimates { background: var(--primary-dark); }
.cta-emergency { background: #8c3c00; }
/* Background image support — image shows through on the right, dark overlay on the left for text legibility */
.cta-panel[style*="background-image"] {
background-size: cover; background-position: center right;
}
.cta-panel[style*="background-image"]::before {
content: '';
position: absolute; inset: 0; z-index: 0;
pointer-events: none;
}
.cta-estimates[style*="background-image"]::before {
background: linear-gradient(to right, var(--primary-dark) 30%, rgba(2,109,135,0.70) 65%, rgba(2,109,135,0.35) 100%);
}
.cta-emergency[style*="background-image"]::before {
background: linear-gradient(to right, rgba(140,60,0,0.92) 30%, rgba(140,60,0,0.65) 65%, rgba(140,60,0,0.30) 100%);
}
/* Ensure all content sits above the overlay */
.cta-panel[style*="background-image"] > * { position: relative; z-index: 1; }
.cta-icon {
width: 58px; height: 58px; border-radius: 16px; margin-bottom: 22px;
display: flex; align-items: center; justify-content: center; font-size: 22.4px;
}
.cta-estimates .cta-icon { background: rgba(255,255,255,0.10); color: var(--white); }
.cta-emergency .cta-icon { background: rgba(232,166,32,0.18); color: var(--gold-light); }
.cta-panel h2 {
font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.02em; font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.05;
color: var(--white); margin-bottom: 16px;
}
.cta-panel p { font-size: 15.4px; color: rgba(255,255,255,0.92); line-height: 1.74; max-width: 360px; margin-bottom: 30px; }
.cta-phone-note {
margin-top: 16px; display: flex; align-items: center; gap: 8px;
font-family: var(--font-head); font-size: 13.1px; font-weight: 600;
letter-spacing: 0.06em; color: rgba(255,255,255,0.85);
}
.cta-phone-note i { font-size: 10.4px; }
/* ============================================================
GRAVITY FORMS
============================================================ */
.gform_wrapper.gform-theme--framework {
--gf-ctrl-btn-bg-color-primary: var(--primary);
--gf-ctrl-btn-color-primary: var(--white);
--gf-ctrl-btn-border-color-primary: var(--primary);
--gf-ctrl-btn-bg-color-primary-hover: var(--primary-dark);
--gf-ctrl-btn-border-color-primary-hover: var(--primary-dark);
--gf-ctrl-btn-color-primary-hover: var(--white);
--gf-ctrl-btn-font-family: var(--font-head);
--gf-ctrl-btn-font-size: 14px;
--gf-ctrl-btn-font-weight: 600;
--gf-ctrl-btn-radius: 50px;
--gf-ctrl-btn-shadow: none;
}
.gform_wrapper .gform_footer input[type="submit"] {
padding: 14px 36px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--dur) ease, box-shadow var(--dur) ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover {
background: var(--primary-dark) !important;
color: var(--white) !important;
box-shadow: 0 8px 24px rgba(3, 146, 178, 0.32);
}
/* ============================================================
FOOTER
============================================================ */
footer { background: var(--primary-black); padding: 88px 0 38px; position: relative; }
footer::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--primary-mid), var(--gold), var(--primary-mid));
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 52px; margin-bottom: 56px; }
.footer-brand-logo { mix-blend-mode: screen; width: 180px; height: auto; margin-bottom: 18px; }
.footer-tagline { font-size: 13.4px; color: rgba(255,255,255,0.85); line-height: 1.76; max-width: 240px; margin-bottom: 20px; }
/* CSLB License badge — prominently placed in footer */
.license-badge {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(3,146,178,0.12); border: 1px solid rgba(3,146,178,0.30);
border-radius: 10px; padding: 10px 16px; margin-bottom: 20px;
}
.license-badge i { color: var(--primary-mid); font-size: 14.1px; }
.license-text { font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.85); line-height: 1.35; }
.license-text span { display: block; color: rgba(255,255,255,0.85); font-size: 9.6px; letter-spacing: 0.14em; margin-top: 1px; font-weight: 400; }
.footer-socials { display: flex; gap: 8px; }
.footer-social-btn {
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid rgba(3,146,178,0.25); background: rgba(3,146,178,0.07);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.85); font-size: 13.1px;
transition: all var(--dur) ease;
}
.footer-social-btn:hover { background: rgba(3,146,178,0.22); border-color: var(--primary-mid); color: var(--white); }
.footer-col h4 {
font-family: var(--font-head); font-size: 10.9px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.85); margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col ul li a {
font-size: 13.5px; color: rgba(255,255,255,0.70); font-weight: 400;
transition: color var(--dur) ease, padding-left var(--dur) ease; display: block;
}
.footer-col ul li a:hover { color: var(--primary-mid); padding-left: 5px; }
.footer-col ul li a i { color: var(--primary-mid); width: 14px; margin-right: 6px; font-size: 11.2px; }
/* Footer phone — large gold display */
.footer-phone-link {
display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
font-family: var(--font-head); font-size: 18px; font-weight: 400;
letter-spacing: 0.04em; color: var(--white);
transition: color var(--dur) ease;
}
.footer-phone-link:hover { color: rgba(255,255,255,0.75); }
.footer-phone-link i { font-size: 14.1px; color: rgba(255,255,255,0.60); }
.footer-contact-list { display: flex; flex-direction: column; gap: 11px; }
.footer-contact-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.4px; color: rgba(255,255,255,0.85); line-height: 1.55; }
.footer-contact-row i { color: var(--primary-mid); font-size: 11.2px; margin-top: 3px; width: 14px; flex-shrink: 0; }
.footer-contact-row a { color: rgba(255,255,255,0.75); transition: color var(--dur) ease; }
.footer-contact-row a:hover { color: var(--primary-mid); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.07); padding-top: 28px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 10px;
}
.footer-bottom p, .footer-bottom a { font-size: 12.2px; color: #fff; transition: color var(--dur) ease; }
.footer-bottom a { text-decoration: underline; }
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
/* ============================================================
EDITOR BAR
============================================================ */
/* ============================================================
LOGIN POPUP — Magnific Popup chrome + LWA form styling
============================================================ */
#wh-login-popup.white-popup {
position: relative;
background: var(--white);
max-width: 460px;
width: 100%;
margin: 30px auto;
padding: 0;
border-radius: 6px;
box-shadow: 0 30px 80px rgba(7,24,32,0.4);
overflow: hidden;
}
.wh-login-register-wrapper { padding: 28px 28px 26px; }
.wh-login-only { /* container for the login-only popup (no register) */ }
/* Magnific close button */
#wh-login-popup button.mfp-close {
width: 44px; height: 44px; line-height: 44px;
top: 6px; right: 6px;
color: rgba(7,24,32,0.85) !important;
opacity: 1;
font-size: 28px; font-weight: 400;
text-shadow: none;
background: transparent !important;
border-radius: 50%;
transition: background-color 0.2s ease, color 0.2s ease;
}
#wh-login-popup button.mfp-close:hover,
#wh-login-popup button.mfp-close:focus {
color: var(--ink) !important;
background: rgba(7,24,32,0.06) !important;
}
/* Title / sitename / subtitle */
.wh-login-title { text-align: center; margin-bottom: 16px; }
.wh-login-sitename {
font-family: var(--font-head);
font-size: 18px;
font-weight: 700;
color: var(--primary-dark);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wh-login-subtitle {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-dark);
margin-top: 4px;
}
/* LWA shortcode output — restyle to match the popup */
#wh-login-popup .lwa-wrapper,
#wh-login-popup .lwa { width: 100%; }
#wh-login-popup .lwa-form { margin: 0; }
#wh-login-popup .lwa-username,
#wh-login-popup .lwa-password,
#wh-login-popup .lwa-remember-email { margin-bottom: 14px; }
#wh-login-popup .lwa label {
display: block; margin-bottom: 6px;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
color: var(--ink);
text-transform: none; letter-spacing: 0;
}
#wh-login-popup .lwa input[type="text"],
#wh-login-popup .lwa input[type="password"] {
width: 100%;
height: auto;
padding: 10px 13px;
border: 1px solid #cdd6da;
border-radius: 4px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
color: var(--ink);
background: var(--white);
box-sizing: border-box;
}
#wh-login-popup .lwa input[type="text"]:focus,
#wh-login-popup .lwa input[type="password"]:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(3,146,178,0.18);
}
/* Submit button */
#wh-login-popup .lwa input[type="submit"],
#wh-login-popup .lwa .button-primary {
display: block;
width: 100%;
/* !important needed to beat LWA plugin's pixelbones rule */
background-color: var(--primary-dark) !important;
color: var(--white) !important;
border: 1px solid var(--primary-dark) !important;
padding: 12px 20px;
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 4px;
cursor: pointer;
margin: 6px 0 0;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
#wh-login-popup .lwa input[type="submit"]:hover,
#wh-login-popup .lwa .button-primary:hover {
background-color: var(--primary-deep) !important;
border-color: var(--primary-deep) !important;
transform: translateY(-1px);
}
#wh-login-popup .grid-container.submit { display: block; margin-top: 8px; }
#wh-login-popup .lwa-submit-button { margin-bottom: 10px; }
/* Remember-me row */
#wh-login-popup .lwa-rememberme-label {
display: inline-flex !important;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(7,24,32,0.7);
font-weight: 500;
cursor: pointer;
}
#wh-login-popup .lwa-rememberme,
#wh-login-popup input[type="checkbox"].lwa-rememberme {
appearance: auto !important;
-webkit-appearance: checkbox !important;
width: 16px !important; height: 16px !important;
min-width: 16px !important;
margin: 0 !important; padding: 0 !important;
border: 1px solid #cdd6da !important;
background: var(--white) !important;
accent-color: var(--primary);
flex-shrink: 0;
}
#wh-login-popup .lwa-rememberme-label .label-body {
display: inline-block;
line-height: 1;
}
/* LWA status messages */
#wh-login-popup .lwa-status {
margin: 10px 0; padding: 10px 14px;
border-radius: 4px; font-size: 13px;
}
#wh-login-popup .lwa-status.lwa-error {
background: #fdf0ef; color: #a14424;
border-left: 3px solid #c75b39;
}
#wh-login-popup .lwa-status.lwa-success {
background: #e6f4f8; color: var(--primary-deep);
border-left: 3px solid var(--primary);
}
/* Forgot password link below LWA */
#wh-login-popup .wh-login-only > div a,
#wh-login-popup .wh-login-only > div a:link,
#wh-login-popup .wh-login-only > div a:visited { color: var(--primary-dark); }
#wh-login-popup .wh-login-only > div a:hover { color: var(--primary); }
@media (max-width: 580px) {
#wh-login-popup.white-popup { max-width: 92vw; }
.wh-login-register-wrapper { padding: 22px 20px 20px; }
}
/* Static (sticky-bottom) editor bar — admin / staff only */
.wh-editor-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99990;
background: rgba(7,24,32,0.92);
color: rgba(255,255,255,0.7);
font-family: var(--font-body);
font-size: 12px;
padding: 8px 20px;
text-align: center;
letter-spacing: 0.04em;
backdrop-filter: blur(6px);
border-top: 1px solid rgba(232,166,32,0.18);
}
.wh-editor-bar a {
color: var(--gold-light);
margin: 0 10px;
text-decoration: underline;
font-weight: 500;
}
.wh-editor-bar a:hover { color: #ffffff; }
/* Push the footer-bottom row up so the bar doesn't cover it */
body:has(.wh-editor-bar) .footer-bottom { padding-bottom: 60px; }
/* Hide on mobile — clients rarely edit on phones; admin links remain in the header dropdown's Webhelper section. */
@media (max-width: 768px) {
.wh-editor-bar { display: none; }
body:has(.wh-editor-bar) .footer-bottom { padding-bottom: 0; }
}
/* My-Account dropdown — staff only, in the utility bar to the right of FREE ESTIMATE */
.wh-acct-wrap {
position: relative;
display: flex;
align-items: center;
height: var(--topbar-h);
margin-left: 14px;
padding-left: 14px;
border-left: 1px solid rgba(255,255,255,0.10);
}
.wh-acct-trigger {
display: flex;
align-items: center;
gap: 5px;
height: var(--topbar-h);
padding: 0 6px;
border: none;
background: none;
color: rgba(255,255,255,0.78);
cursor: pointer;
font-size: 16px;
transition: color var(--dur) ease;
}
.wh-acct-trigger:hover { color: var(--gold-light); }
.wh-acct-trigger .fa-user-circle { font-size: 18px; }
.wh-acct-chev { font-size: 9px; opacity: 0.55; transition: transform 0.22s var(--ease), opacity 0.22s ease; }
.wh-acct-wrap:hover .wh-acct-chev,
.wh-acct-wrap.is-open .wh-acct-chev { transform: rotate(180deg); opacity: 0.85; }
.wh-acct-dropdown {
position: absolute;
top: 100%;
right: 0;
width: 250px;
background: var(--white);
border: 1px solid rgba(7,24,32,0.10);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(7,24,32,0.20);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
z-index: 1100;
text-align: left;
}
.wh-acct-wrap:hover .wh-acct-dropdown,
.wh-acct-wrap.is-open .wh-acct-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.wh-acct-dropdown::before {
content: '';
position: absolute;
top: -7px; right: 14px;
width: 14px; height: 14px;
background: var(--white);
border-top: 1px solid rgba(7,24,32,0.10);
border-left: 1px solid rgba(7,24,32,0.10);
transform: rotate(45deg);
}
.wh-acct-greet {
padding: 16px 18px 12px;
border-bottom: 1px solid #e8eef0;
display: flex;
align-items: center;
gap: 12px;
}
.wh-acct-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
color: var(--white);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head);
font-size: 17px;
font-weight: 700;
flex-shrink: 0;
}
.wh-acct-greet-hi {
font-family: var(--font-head);
font-size: 16px;
font-weight: 600;
color: var(--ink);
display: block;
line-height: 1.2;
}
.wh-acct-nav { padding: 6px 0; }
.wh-acct-nav a {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 18px;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink);
text-decoration: none;
letter-spacing: normal;
text-transform: none;
border: none;
transition: background 0.15s ease, color 0.15s ease;
}
.wh-acct-nav a i {
width: 18px;
font-size: 13px;
color: #6b7780;
text-align: center;
transition: color 0.15s ease;
}
.wh-acct-nav a:hover {
background: var(--primary-light);
color: var(--primary-dark);
}
.wh-acct-nav a:hover i { color: var(--primary); }
.wh-acct-divider { height: 1px; background: #e8eef0; margin: 4px 0; }
/* Webhelper section */
.wh-acct-section-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-dark);
padding: 8px 18px 4px;
}
.wh-acct-staff i { color: var(--gold) !important; }
.wh-acct-staff:hover i { color: var(--gold-dark) !important; }
.wh-acct-logout { color: #c25450 !important; }
.wh-acct-logout i { color: #c25450 !important; }
.wh-acct-logout:hover { background: rgba(194,84,80,0.08) !important; color: #a33d39 !important; }
.wh-acct-logout:hover i { color: #a33d39 !important; }
/* Hide staff dropdown on mobile — utility bar already collapses; admin can use desktop */
@media (max-width: 991px) {
.wh-acct-wrap { display: none; }
}
/* ============================================================
MY ACCOUNT — Woo my-account page (nav, form, submit button)
============================================================ */
/* Horizontal tab nav (renders the simple Dashboard / Profile / Log Out links) */
nav.wh-account-nav {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 28px;
}
a.wh-account-nav-link,
a.wh-account-nav-link:link,
a.wh-account-nav-link:visited {
display: inline-block;
padding: 12px 22px;
font-family: var(--font-head);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-subtle);
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
a.wh-account-nav-link:hover {
color: var(--primary-dark);
background: var(--primary-light);
}
a.wh-account-nav-link.active {
color: var(--primary-dark);
border-bottom-color: var(--primary);
}
/* Greeting line on dashboard */
.wh-account-hello {
font-family: var(--font-body);
font-size: 16px;
color: var(--ink);
margin-bottom: 18px;
}
.wh-account-hello a { color: var(--primary-dark); text-decoration: underline; }
.wh-account-hello a:hover { color: var(--primary); }
/* Form rows — labels above fields */
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-MyAccount-content .form-row {
display: block;
float: none;
width: 100%;
max-width: 520px;
margin-bottom: 18px;
}
.woocommerce-account .woocommerce-EditAccountForm .form-row label,
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
display: block;
width: 100%;
margin-bottom: 6px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.woocommerce-account .woocommerce-EditAccountForm .form-row .input-text,
.woocommerce-account .woocommerce-MyAccount-content .form-row .input-text {
width: 100%;
padding: 10px 13px;
border: 1px solid #cdd6da;
border-radius: 4px;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.4;
color: var(--ink);
background: var(--white);
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce-account .woocommerce-EditAccountForm .form-row .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row .input-text:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(3,146,178,0.18);
}
.woocommerce-account .woocommerce-EditAccountForm .form-row span em {
display: block;
font-style: normal;
font-size: 12px;
color: var(--text-subtle);
margin-top: 4px;
}
/* Password fieldset */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
margin: 28px 0 18px;
padding: 18px 22px 4px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
}
.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
padding: 0 8px;
font-family: var(--font-head);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--primary-dark);
}
/* Submit button — MCCR teal */
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-Button.button {
display: inline-block;
background: var(--primary);
color: var(--white);
border: 1px solid var(--primary);
padding: 12px 32px;
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button.button:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--white);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(3,146,178,0.32);
}
@media (max-width: 580px) {
a.wh-account-nav-link { padding: 11px 14px; font-size: 12px; }
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1280px) {
.hero-content { padding: 0 70px 110px; }
.hero-controls { left: 70px; right: 70px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.rtype-card { width: calc(33.333% - 12px); }
}
@media (max-width: 1080px) {
.svc-card { width: calc(50% - 11px); }
.testi-card { min-width: calc(50% - 10px); max-width: calc(50% - 10px); width: calc(50% - 10px); }
.cta-panel { padding: 72px 52px; }
.ib-top-card { width: calc(50% - 12px); }
.ib-bottom-card { width: calc(50% - 9px); }
}
@media (max-width: 992px) {
/* Slim utility bar — phone left, estimate right */
.utility-bar { height: 32px; padding: 0 14px; }
.utility-phone { font-size: 13.1px; letter-spacing: 0.06em; height: 32px; }
.utility-phone i { font-size: 9.9px; }
.utility-link { display: none !important; }
.utility-cta-btn { font-size: 9px !important; padding: 2px 12px !important; margin-left: 0; }
a.utility-cta-btn { padding-top: 5px !important; padding-bottom: 3px !important; }
/* Navbar below slim utility bar */
#navbar { top: 32px; padding: 0 20px; height: 60px; }
.nav-logo img { height: 52px; }
.nav-links { display: none; }
.hamburger { display: flex; }
/* Content wrapper — mobile offset (utility 32px + nav 60px) */
.wh-page-content-wrapper.no-hero { padding-top: calc(32px + 60px); }
.breadcrumb-bar.no-hero { margin-top: -24px; }
.mccr-page.no-hero { padding-top: 40px; }
/* Page hero — shorter on mobile */
#page-hero { height: calc(280px + 32px + 60px); min-height: calc(280px + 32px + 60px); }
.page-hero-content { padding-top: calc(32px + 60px); padding-bottom: 40px; }
.page-hero-sub { display: none; }
.page-hero-eyebrow { display: none; }
.page-hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
/* Hero — fixed 400px height matching mpower mobile */
#hero { height: 400px; min-height: 400px; }
/* Hero content — fill hero, center vertically, title + button only */
.hero-content {
top: 0; bottom: 0; /* stretch full height instead of bottom-anchored */
padding: 92px 68px 0; /* top = topbar 32px + navbar 60px */
max-width: 100%;
justify-content: center; /* vertically center between arrows */
}
.hero-kicker { display: none; } /* hide kicker on mobile */
.hero-sub { display: none; } /* hide subtitle on mobile */
.hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); margin-bottom: 18px; }
.hero-title em { color: #fff; -webkit-text-fill-color: #fff; } /* all white title */
/* Hero controls — hide dots/number on mobile; arrows offset below nav */
.hero-dots, .hero-slide-num { display: none; }
.hero-controls { background: transparent; padding: 0; pointer-events: none; }
.hero-nav-btns { top: 92px; padding: 0 10px; }
.hn-btn { width: 38px; height: 38px; }
.trust-row { grid-template-columns: 1fr 1fr; }
.trust-cell { border-bottom: 1px solid rgba(255,255,255,0.08); }
.intro-grid { grid-template-columns: 1fr; gap: 48px; }
.feat-quad { grid-template-columns: 1fr 1fr; }
.svc-card { width: calc(50% - 11px); }
.rtype-card { width: calc(50% - 9px); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat-cell { border-bottom: 1px solid rgba(255,255,255,0.10); }
.area-grid { grid-template-columns: 1fr; gap: 48px; }
/* Testimonials — full-width cards, arrows near screen edges */
.testi-card { min-width: 100%; max-width: 100%; width: 100%; }
.testi-carousel { padding: 0; } /* remove internal padding so cards fill container */
.testi-btn { width: 38px; height: 38px; font-size: 11.5px; }
.testi-btn.prev { left: -19px; } /* half-overlap into container padding = near screen edge */
.testi-btn.next { right: -19px; }
#cta-band { grid-template-columns: 1fr; }
.cta-panel { padding: 64px 44px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.section { padding: 72px 0; }
#services-preview, #roof-types, #service-area, #testimonials, #intro { padding: 72px 0; }
.container { padding: 0 24px; }
}
@media (max-width: 640px) {
.svc-card { width: 100%; }
.feat-quad { grid-template-columns: 1fr; }
.rtype-card { width: calc(50% - 9px); }
.trust-row { grid-template-columns: 1fr; }
.trust-cell { border-right: none; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
.cta-panel { padding: 56px 28px; }
.hero-content { padding: 66px 56px 0; } /* sides clear of 48px arrow zone */
.ib-top-card { width: 100%; }
.ib-bottom-card { width: 100%; }
.intro-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
.rtype-card { width: 100%; }
}
/* ============================================================
PAGE HERO — 400px photo banner between nav and page-lead
============================================================ */
#page-hero {
position: relative;
width: 100%;
height: calc(400px + var(--topbar-h) + var(--nav-h));
min-height: calc(400px + var(--topbar-h) + var(--nav-h));
background-image: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 100%);
background-size: cover;
background-position: center;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
/* Dark overlay with warm gold accent */
#page-hero::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background: radial-gradient(ellipse at 70% 50%, rgba(232,166,32,0.22) 0%, rgba(232,166,32,0.06) 45%, transparent 65%),
linear-gradient(135deg, rgba(1,61,80,0.78), rgba(3,146,178,0.38));
}
/* Gold accent bar at bottom */
#page-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-dark), var(--gold), var(--primary), var(--primary-mid));
z-index: 5;
}
.page-hero-content {
position: relative; z-index: 3;
text-align: center;
padding-top: calc(var(--topbar-h) + var(--nav-h));
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.page-hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-head); font-size: 11px; font-weight: 600;
letter-spacing: 0.20em; text-transform: uppercase;
color: rgba(255,255,255,0.85);
opacity: 0; transform: translateY(14px);
animation: heroIn 0.6s 0.1s forwards ease-out;
}
.ph-line { width: 30px; height: 1.5px; background: var(--gold); opacity: 0.7; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
.page-hero-title {
font-family: var(--font-head);
font-size: clamp(2.2rem, 5vw, 3.4rem);
font-weight: 700; color: #fff;
text-transform: uppercase;
letter-spacing: 0.02em; line-height: 1.08;
opacity: 0; transform: translateY(22px);
animation: heroIn 0.75s 0.28s forwards ease-out;
}
.page-hero-sub {
font-family: var(--font-body); font-size: 16px; line-height: 1.7;
color: rgba(255,255,255,0.80); max-width: 540px; text-align: center;
opacity: 0; transform: translateY(16px);
animation: heroIn 0.7s 0.45s forwards ease-out;
}
/* ============================================================
BREADCRUMB BAR — sits between hero and page-lead
============================================================ */
.breadcrumb-bar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 14px 0;
}
.breadcrumb-bar nav {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
}
.breadcrumb-bar a {
color: var(--text-muted);
transition: color var(--dur) ease;
}
.breadcrumb-bar a:hover { color: var(--primary); }
.breadcrumb-sep {
color: var(--text-muted); opacity: 0.5;
font-size: 9px;
}
.breadcrumb-current {
color: var(--text-head);
}
/* ============================================================
PAGE LEAD — intro section for inner pages
============================================================ */
.page-lead {
padding: 64px 0 72px;
background: var(--white);
}
.page-lead .container { max-width: 1240px; }
.page-lead h1,
.page-lead h2 {
font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.02em; line-height: 1.08;
font-size: 42px; color: var(--text-head); margin-bottom: 18px;
}
.page-lead p {
font-size: 16px; line-height: 1.80; color: var(--text-subtle); margin-bottom: 28px;
}
/* Breadcrumb bar — wrapper.no-hero already clears the fixed bars.
The -24px pulls the breadcrumb up to close an empirical gap that
remains on no-hero pages (e.g. WC my-account). */
.breadcrumb-bar.no-hero {
margin-top: -24px;
}
/* ============================================================
PAGE CONTENT
============================================================ */
.mccr-page {
padding: 10px 0 40px;
}
/* Wrapper.no-hero already clears fixed bars; just keep a small
internal padding so content has breathing room from the breadcrumb. */
.mccr-page.no-hero {
padding-top: 40px;
}
.mccr-post-content {
font-family: var(--font-body); font-size: 16px; line-height: 1.78;
color: var(--text-body);
}
.mccr-post-content a:not(.btn) { text-decoration: underline; }
.mccr-post-content a:not(.btn):hover { text-decoration: none; }
/* Restore bullets/numbers inside post content (overrides global ul reset) */
.mccr-post-content ul,
.mccr-post-content ol { padding-left: 28px; margin: 16px 0; }
.mccr-post-content ul { list-style: disc; }
.mccr-post-content ol { list-style: decimal; }
.mccr-post-content ul ul { list-style: circle; }
.mccr-post-content ul ul ul { list-style: square; }
.mccr-post-content ol ol { list-style: lower-alpha; }
.mccr-post-content ol ol ol { list-style: lower-roman; }
.mccr-post-content li { margin-bottom: 6px; }
.mccr-post-content li > ul,
.mccr-post-content li > ol { margin: 6px 0; }
/* wh-start embedded images responsive */
figure { clear: both; }
figure.wp-caption { float: none; }
img.alignright { clear: both; float: right; margin-left: 20px; padding: 15px 0; }
img.alignleft { clear: both; float: left; margin-right: 20px; padding: 15px 0; }
figure.alignright { float: right; margin-left: 20px; padding-top: 15px; }
figure.alignleft { float: left; margin-right: 20px; padding-top: 15px; }
img.aligncenter, .aligncenter { display: block; margin: 0 auto; text-align: center; padding-bottom: 15px; }
figcaption.wp-caption-text { text-align: center; font-style: italic; font-size: 14px; padding-top: 5px; color: var(--text-muted); }
@media (max-width: 768px) {
.wp-caption { width: 100% !important; text-align: center; }
.wp-caption img { max-width: 99% !important; height: auto; }
img.alignright, img.alignleft { float: none; display: block; margin: 0 auto; text-align: center; }
figure.alignright, figure.alignleft { float: none; margin: 0 auto; text-align: center; }
}
/* wh-end embedded images responsive */
/* ============================================================
INFO BLOCKS — TOP (white bg, image cards, 3-col)
============================================================ */
.ib-top-grid {
display: flex; flex-wrap: wrap;
gap: 24px;
justify-content: center;
padding-top: 40px;
max-width: 960px;
margin: 0 auto;
}
.ib-top-card { width: calc(33.33% - 16px); }
.ib-top-card {
background: var(--white);
border: 1px solid var(--border);
overflow: hidden;
border-radius: 16px;
filter: drop-shadow(0 2px 12px rgba(0,0,0,0.06));
transition: transform var(--dur) ease, filter var(--dur) ease;
display: flex; flex-direction: column;
color: inherit; text-decoration: none;
padding: 0; margin: 0;
}
a.ib-top-card:hover {
transform: translateY(-5px);
filter: drop-shadow(0 12px 32px rgba(3,146,178,0.14));
}
a.ib-top-card, a.ib-top-card:hover {
text-decoration: none; color: inherit;
}
.ib-top-img {
width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
}
.ib-top-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s var(--ease);
}
a.ib-top-card:hover .ib-top-img img {
transform: scale(1.05);
}
.ib-top-body {
padding: 22px 24px 28px;
flex: 1; display: flex; flex-direction: column;
}
.ib-top-title {
font-family: var(--font-head); font-size: 18px; font-weight: 700;
color: var(--text-head); margin-bottom: 10px; line-height: 1.3;
}
.ib-top-desc {
font-size: 14px; font-weight: 300; line-height: 1.72;
color: var(--text-body);
}
/* ============================================================
INFO BLOCKS — BOTTOM (dark bg, chamfered cards, 3-col)
============================================================ */
.mccr-infoblocks-bottom {
background-color: var(--ink-deep);
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 48px 48px;
padding: 80px 0;
position: relative; overflow: hidden;
}
.mccr-infoblocks-bottom::before {
content: ''; position: absolute; bottom: -100px; left: -100px;
width: 420px; height: 420px; border-radius: 50%;
background: radial-gradient(circle, rgba(3,200,230,0.07) 0%, transparent 70%);
pointer-events: none;
}
.ib-bottom-grid {
display: flex; flex-wrap: wrap;
gap: 18px;
justify-content: center;
position: relative; z-index: 1;
text-align: center;
max-width: 960px;
margin: 0 auto;
}
.ib-bottom-card { width: calc(33.33% - 12px); }
.ib-bottom-card {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
position: relative; overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.20));
transition: background var(--dur) ease, filter var(--dur) ease, transform var(--dur) ease;
padding: 0; margin: 0;
}
.ib-bottom-card:hover {
background: rgba(255,255,255,0.09);
transform: translateY(-5px);
filter: drop-shadow(0 16px 40px rgba(3,146,178,0.14));
}
a.ib-bottom-card, a.ib-bottom-card:hover {
text-decoration: none; color: inherit;
}
.ib-bottom-card::before {
content: ''; position: absolute; top: 0; left: 20px; right: 20px;
height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--primary), transparent);
opacity: 0; transition: opacity var(--dur) ease;
}
.ib-bottom-card:hover::before { opacity: 1; }
.ib-bottom-img {
width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
}
.ib-bottom-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s var(--ease);
}
.ib-bottom-card:hover .ib-bottom-img img {
transform: scale(1.05);
}
.ib-bottom-body {
padding: 22px 24px 28px;
flex: 1; display: flex; flex-direction: column;
}
.ib-bottom-title {
font-family: var(--font-head); font-size: 16px; font-weight: 700;
color: rgba(255,255,255,0.88); margin-bottom: 10px; line-height: 1.35;
}
.ib-bottom-desc,
.ib-bottom-desc p,
.ib-bottom-desc a,
.ib-bottom-desc li,
.ib-bottom-desc span {
font-size: 13px; font-weight: 300; line-height: 1.74;
color: #ffffff;
}
/* Info blocks responsive — must come after card definitions */
@media (max-width: 1080px) {
.ib-top-card { width: calc(50% - 12px); }
.ib-bottom-card { width: calc(50% - 9px); }
}
@media (max-width: 640px) {
.ib-top-card { width: 100%; }
.ib-bottom-card { width: 100%; }
}
/* ============================================================
FINANCING — 3-column row (text + calculator + banner)
============================================================ */
.financing-row {
display: flex; flex-wrap: wrap;
gap: 30px;
padding-top: 48px;
align-items: flex-start;
}
.financing-col--text {
flex: 1 1 0;
min-width: 240px;
}
.financing-col--calculator {
flex: 1 1 0;
min-width: 280px;
}
.financing-col--calculator iframe {
width: 100%;
border: none;
}
.financing-col--banner {
flex: 0 0 auto;
}
.financing-col--banner img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
@media (max-width: 1080px) {
.financing-row { gap: 24px; }
.financing-col--banner { flex: 1 1 100%; text-align: center; }
.financing-col--banner img { max-width: 310px; }
}
@media (max-width: 640px) {
.financing-row { flex-direction: column; gap: 24px; }
.financing-col--text,
.financing-col--calculator,
.financing-col--banner { width: 100%; }
}
/* ============================================================
SERVICE AREA OVERVIEW MAP — Leaflet + OSM
============================================================ */
#sa-overview-map-wrap {
background: var(--white);
padding: 0 0 70px;
}
.sa-overview-map {
height: 520px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0,0,0,0.10);
border: 1px solid var(--border);
background: #e5eef2;
}
.sa-map-legend {
display: flex; flex-wrap: wrap; gap: 20px 28px;
justify-content: center;
margin-top: 22px;
font-family: var(--font-body); font-size: 13.5px;
color: var(--text-subtle);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot {
display: inline-block; width: 12px; height: 12px;
border-radius: 50%; border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
/* Popup content styling */
.sa-map-popup strong { font-family: var(--font-head); font-size: 15px; color: var(--text-head); }
.sa-map-popup .pop-county { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.sa-map-popup .pop-link { display: inline-block; font-weight: 600; color: var(--primary-dark); text-decoration: none; }
.sa-map-popup .pop-link:hover { text-decoration: underline; }
@media (max-width: 768px) {
.sa-overview-map { height: 380px; }
#sa-overview-map-wrap { padding: 0 0 50px; }
}
/* ============================================================
SERVICE CITY — single page map
============================================================ */
.service-city-map {
margin: 32px 0 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid var(--surface-mid, #e5e7eb);
background: #f4f6f8;
}
.service-city-map iframe {
display: block;
width: 100%;
border: 0;
}
/* ============================================================
GALLERY
============================================================ */
.mccr-gallery {
padding: 60px 0;
}
#lightgallery {
display: flex; flex-wrap: wrap; gap: 12px;
justify-content: center;
}
.gallery-thumb {
display: block; overflow: hidden; border-radius: 4px;
width: 160px; height: 160px;
transition: filter var(--dur) ease, transform var(--dur) ease;
}
.gallery-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.4s var(--ease);
}
.gallery-thumb:hover img { transform: scale(1.06); }
.gallery-thumb:hover { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15)); }