.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#E8702A;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#0E1B2E;font-family:"Barlow Condensed", Sans-serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*
=============================================================
VALLEY GREEN WEB DESIGN — HOMEPAGE CSS
WHERE TO PASTE THIS:
Elementor → Site Settings → Custom CSS
OR your child theme's style.css
Also add this to your theme's (via functions.php
or Elementor > Site Settings > Custom Code > Head):
=============================================================
*/
/* ── CSS VARIABLES (applied to the page wrapper) ── */
.vgw {
--navy: #0d1b2e;
--blue: #1a3a5c;
--water: #3b8fc4;
--accent: #e8702a;
--accent2: #f5a623;
--light: #f4f0eb;
--white: #ffffff;
--muted: rgba(255,255,255,0.55);
--border: rgba(255,255,255,0.07);
font-family: 'Lora', Georgia, serif;
background: var(--navy);
color: var(--white);
overflow-x: hidden;
}
/* ────────────────────────────────────────────
SECTION BACKGROUNDS & WRAPPERS
Apply these as CSS Classes on Elementor
Section elements (Advanced tab → CSS Classes)
──────────────────────────────────────────── */
.vgw-section-dark { background: #0d1b2e; }
.vgw-section-deep { background: #0a1524; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
.vgw-section-light { background: #f4f0eb; }
.vgw-section-accent { background: #e8702a; }
.vgw-section-blue { background: #1a3a5c; }
/* ────────────────────────────────────────────
TYPOGRAPHY OVERRIDES
Apply these CSS Classes to Elementor
Heading and Text widgets
──────────────────────────────────────────── */
/* Eyebrow label — small all-caps above headings */
.vgw-label {
font-family: 'Barlow Condensed', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #3b8fc4 !important;
margin-bottom: 14px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.vgw-label::after {
content: '';
flex: 1;
max-width: 40px;
height: 1px;
background: rgba(59,143,196,0.4);
display: block;
}
/* White variant — use on dark blue / accent backgrounds */
.vgw-label-white { color: #ffffff !important; }
.vgw-label-white::after { background: rgba(255,255,255,0.25) !important; }
/* H1 — Hero heading */
.vgw-h1 {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(3rem, 5.5vw, 6rem) !important;
line-height: 0.93 !important;
text-transform: uppercase !important;
letter-spacing: -0.01em !important;
color: #ffffff !important;
}
/* Coloured word spans inside H1 — wrap words in inside Elementor HTML widget */
.vgw-h1-blue { color: #3b8fc4; display: block; }
.vgw-h1-orange { color: #e8702a; }
/* H2 — Section headings */
.vgw-h2 {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: -0.01em !important;
color: #ffffff !important;
margin-bottom: 20px !important;
}
/* Orange accent word — wrap in inside the Heading widget HTML */
.vgw-h2 em { font-style: normal; color: #e8702a; }
/* Dark version — for use on light backgrounds */
.vgw-h2-dark { color: #0d1b2e !important; }
/* H3 — Card / subsection headings */
.vgw-h3 {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
color: #ffffff !important;
margin-bottom: 8px !important;
}
/* Body text on dark backgrounds */
.vgw-body {
font-size: 1rem !important;
color: rgba(255,255,255,0.6) !important;
line-height: 1.78 !important;
}
/* ────────────────────────────────────────────
BUTTONS
Apply to Elementor Button widget
(Style tab → set background/text to match,
then add CSS Class for hover effects)
──────────────────────────────────────────── */
.vgw-btn-orange {
display: inline-block !important;
background: #e8702a !important;
color: #fff !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 1rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 15px 34px !important;
text-decoration: none !important;
transition: background 0.2s, transform 0.15s !important;
border-radius: 0 !important;
border: none !important;
}
.vgw-btn-orange:hover { background: #f5a623 !important; transform: translateY(-2px) !important; color: #fff !important; }
.vgw-btn-outline {
display: inline-block !important;
border: 1.5px solid rgba(255,255,255,0.25) !important;
background: transparent !important;
color: rgba(255,255,255,0.82) !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 600 !important;
font-size: 1rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 15px 34px !important;
text-decoration: none !important;
transition: all 0.2s !important;
border-radius: 0 !important;
}
.vgw-btn-outline:hover { border-color: #3b8fc4 !important; color: #3b8fc4 !important; }
.vgw-btn-white {
display: inline-block !important;
background: #fff !important;
color: #e8702a !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 800 !important;
font-size: 1rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 16px 40px !important;
text-decoration: none !important;
transition: all 0.2s !important;
border-radius: 0 !important;
}
.vgw-btn-white:hover { background: #0d1b2e !important; color: #fff !important; transform: translateY(-2px) !important; }
/* ────────────────────────────────────────────
HERO SECTION
──────────────────────────────────────────── */
/* Apply .vgw-hero to the Elementor Section */
.vgw-hero {
min-height: 94vh;
background: #0d1b2e;
position: relative;
overflow: hidden;
}
.vgw-hero::before {
content: '';
position: absolute;
top: -200px; right: -100px;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(59,143,196,0.14) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.vgw-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, #3b8fc4, #e8702a, transparent);
opacity: 0.5;
}
.vgw-hero-eyebrow {
font-family: 'Barlow Condensed', sans-serif !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #e8702a !important;
margin-bottom: 18px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.vgw-hero-eyebrow::before {
content: '';
width: 28px; height: 2px;
background: #e8702a;
display: block;
flex-shrink: 0;
}
/* Trade badges strip in hero */
.vgw-trades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.vgw-trade-badge {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
padding: 6px 12px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
transition: all 0.2s;
text-decoration: none;
}
.vgw-trade-badge:hover { background: rgba(59,143,196,0.12); border-color: rgba(59,143,196,0.3); color: #3b8fc4; text-decoration: none; }
/* Hero lead capture form card */
.vgw-hero-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
padding: 36px 32px;
}
.vgw-hero-card-top {
background: #e8702a;
margin: -36px -32px 28px;
padding: 14px 20px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 0.88rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
.vgw-form-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 6px;
margin-top: 14px;
display: block;
}
.vgw-form-input, .vgw-form-select {
width: 100%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
padding: 11px 14px;
font-family: 'Lora', serif;
font-size: 0.9rem;
color: #fff;
outline: none;
transition: border-color 0.2s;
appearance: none;
}
.vgw-form-input:focus, .vgw-form-select:focus { border-color: #3b8fc4; }
.vgw-form-input::placeholder { color: rgba(255,255,255,0.3); }
.vgw-form-select option { background: #0d1b2e; color: #fff; }
.vgw-form-submit {
display: block;
width: 100%;
text-align: center;
background: #e8702a;
color: #fff;
border: none;
padding: 15px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
margin-top: 20px;
transition: background 0.2s;
text-decoration: none;
}
.vgw-form-submit:hover { background: #f5a623; color: #fff; text-decoration: none; }
.vgw-form-note {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.7rem;
color: rgba(255,255,255,0.3);
text-align: center;
margin-top: 10px;
letter-spacing: 0.05em;
}
/* ────────────────────────────────────────────
STATS BAR
Apply .vgw-stats to the Elementor Section
──────────────────────────────────────────── */
.vgw-stats {
background: #e8702a;
padding: 26px 60px;
}
.vgw-stats .elementor-container { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; max-width: 100% !important; }
.vgw-stat { text-align: center; }
.vgw-stat-num {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 900 !important;
font-size: 2.6rem !important;
color: #fff !important;
line-height: 1 !important;
display: block;
}
.vgw-stat-label {
font-family: 'Barlow Condensed', sans-serif !important;
font-size: 0.74rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.75) !important;
margin-top: 4px !important;
display: block;
}
/* ────────────────────────────────────────────
PAIN CARDS (Why section right column)
──────────────────────────────────────────── */
.vgw-pain-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
padding: 22px 24px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: background 0.2s, border-color 0.2s;
margin-bottom: 14px;
}
.vgw-pain-card:last-child { margin-bottom: 0; }
.vgw-pain-card:hover { background: rgba(59,143,196,0.07); border-color: rgba(59,143,196,0.25); }
.vgw-pain-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
/* Problem bullet list */
.vgw-problem-list { list-style: none !important; padding: 0 !important; margin-bottom: 28px !important; }
.vgw-problem-list li {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
font-size: 0.95rem !important;
color: rgba(255,255,255,0.6) !important;
line-height: 1.55 !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
margin-bottom: 12px !important;
}
.vgw-x { color: rgba(255,90,80,0.85); flex-shrink: 0; }
.vgw-v { color: #4ec990; flex-shrink: 0; }
/* ────────────────────────────────────────────
SERVICE CARDS
──────────────────────────────────────────── */
.vgw-svc-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
padding: 32px 26px;
position: relative;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
text-decoration: none !important;
display: block;
height: 100%;
}
.vgw-svc-card:hover {
background: rgba(59,143,196,0.07);
border-color: rgba(59,143,196,0.3);
transform: translateY(-3px);
text-decoration: none !important;
}
.vgw-svc-card::after {
content: '→';
position: absolute;
bottom: 20px; right: 22px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.2rem;
color: #3b8fc4;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
}
.vgw-svc-card:hover::after { opacity: 1; transform: translateX(4px); }
.vgw-svc-icon { font-size: 2rem; margin-bottom: 14px; display: block; }
.vgw-svc-num {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: 3.5rem;
color: rgba(59,143,196,0.1);
line-height: 1;
position: absolute;
top: 16px; right: 20px;
}
/* ────────────────────────────────────────────
TRADE CARDS (6-up grid)
──────────────────────────────────────────── */
.vgw-trade-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
padding: 24px 16px;
text-align: center;
text-decoration: none !important;
display: block;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.vgw-trade-card:hover {
background: rgba(232,112,42,0.1);
border-color: rgba(232,112,42,0.3);
transform: translateY(-3px);
text-decoration: none !important;
}
.vgw-trade-emoji { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.vgw-trade-name {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 0.82rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.65) !important;
display: block;
}
.vgw-trade-card:hover .vgw-trade-name { color: #e8702a !important; }
/* ────────────────────────────────────────────
FEATURES GRID (What You Get)
──────────────────────────────────────────── */
.vgw-feat {
background: #0a1524;
padding: 30px 26px;
border-right: 1px solid rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.04);
height: 100%;
}
.vgw-feat-num {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 900 !important;
font-size: 3rem !important;
color: rgba(59,143,196,0.12) !important;
line-height: 1 !important;
margin-bottom: 6px !important;
display: block;
}
/* Wrap the features grid section in this to get the grid border effect */
.vgw-feats-wrap {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 2px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
margin-top: 52px;
}
/* ────────────────────────────────────────────
PORTFOLIO CARDS
──────────────────────────────────────────── */
.vgw-portfolio-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
overflow: hidden;
transition: transform 0.2s, border-color 0.2s;
}
.vgw-portfolio-card:hover { transform: translateY(-4px); border-color: rgba(59,143,196,0.3); }
.vgw-portfolio-placeholder {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, rgba(59,143,196,0.12), rgba(13,27,46,0.8));
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
}
.vgw-portfolio-body { padding: 20px 22px; }
.vgw-portfolio-trade {
font-family: 'Barlow Condensed', sans-serif !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: #e8702a !important;
margin-bottom: 5px !important;
display: block;
}
/* ────────────────────────────────────────────
REVIEW CARDS
──────────────────────────────────────────── */
.vgw-review-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-top: 3px solid #e8702a;
padding: 28px 26px;
height: 100%;
}
.vgw-review-stars { color: #f5a623; font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 12px; display: block; }
.vgw-review-text {
font-size: 0.95rem !important;
font-style: italic !important;
color: rgba(255,255,255,0.65) !important;
line-height: 1.75 !important;
margin-bottom: 18px !important;
}
.vgw-review-author { display: flex; align-items: center; gap: 12px; }
.vgw-review-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: #e8702a;
display: flex; align-items: center; justify-content: center;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 0.85rem; color: #fff;
flex-shrink: 0;
}
.vgw-review-name {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
letter-spacing: 0.05em !important;
color: #ffffff !important;
display: block;
}
.vgw-review-via { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-top: 1px; display: block; }
/* ────────────────────────────────────────────
FAQ ACCORDION
──────────────────────────────────────────── */
.vgw-faq-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
margin-bottom: 2px;
}
.vgw-faq-q {
padding: 18px 22px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.04em;
color: #fff;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
list-style: none;
transition: background 0.2s;
}
.vgw-faq-q:hover { background: rgba(59,143,196,0.07); }
.vgw-faq-q::marker, .vgw-faq-q::-webkit-details-marker { display: none; }
.vgw-faq-icon { font-size: 1.1rem; color: #3b8fc4; flex-shrink: 0; transition: transform 0.2s; font-style: normal; }
details[open] .vgw-faq-icon { transform: rotate(45deg); }
.vgw-faq-a { padding: 0 22px 18px; font-size: 0.92rem; color: rgba(255,255,255,0.55); line-height: 1.7; }
/* ────────────────────────────────────────────
LEAD MAGNET BANNER
──────────────────────────────────────────── */
.vgw-magnet {
background: #1a3a5c;
border: 1px solid rgba(59,143,196,0.2);
padding: 48px 60px;
}
.vgw-magnet-title {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
text-transform: uppercase !important;
line-height: 1 !important;
color: #ffffff !important;
margin-bottom: 8px !important;
}
.vgw-magnet-title em { font-style: normal; color: #f5a623; }
.vgw-magnet-sub { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.65; }
.vgw-magnet-input {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
padding: 13px 18px;
font-family: 'Lora', serif;
font-size: 0.9rem;
color: #fff;
outline: none;
min-width: 220px;
transition: border-color 0.2s;
}
.vgw-magnet-input:focus { border-color: #3b8fc4; }
.vgw-magnet-input::placeholder { color: rgba(255,255,255,0.35); }
.vgw-magnet-btn {
background: #e8702a;
color: #fff;
border: none;
padding: 13px 28px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.vgw-magnet-btn:hover { background: #f5a623; }
/* ────────────────────────────────────────────
FINAL CTA SECTION
──────────────────────────────────────────── */
.vgw-cta-section {
background: #e8702a;
text-align: center;
position: relative;
overflow: hidden;
}
.vgw-cta-section::before {
content: 'LEADS';
position: absolute;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: 18rem;
color: rgba(255,255,255,0.05);
top: 50%; left: 50%;
transform: translate(-50%,-50%);
white-space: nowrap;
letter-spacing: -0.02em;
pointer-events: none;
z-index: 0;
}
.vgw-cta-phone {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 1.4rem !important;
color: rgba(255,255,255,0.75) !important;
margin-top: 24px !important;
letter-spacing: 0.06em !important;
position: relative;
display: block;
}
/* ────────────────────────────────────────────
FOOTER
──────────────────────────────────────────── */
.vgw-footer { background: #060e1a; border-top: 1px solid rgba(255,255,255,0.07); }
.vgw-footer-tagline { font-size: 0.88rem; color: rgba(255,255,255,0.4); line-height: 1.65; margin-bottom: 16px; }
.vgw-footer-phone {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 1.05rem !important;
letter-spacing: 0.06em !important;
color: #3b8fc4 !important;
text-decoration: none !important;
}
.vgw-footer-phone:hover { color: #ffffff !important; }
.vgw-footer-copy { font-size: 0.8rem; color: rgba(255,255,255,0.25); }
/* ────────────────────────────────────────────
RESPONSIVE
──────────────────────────────────────────── */
@media (max-width: 900px) {
.vgw-stats { padding: 24px 20px !important; }
.vgw-magnet { padding: 32px 24px !important; }
.vgw-hero { min-height: auto !important; }
.vgw-feats-wrap { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 580px) {
.vgw-feats-wrap { grid-template-columns: 1fr !important; }
.vgw-trades { gap: 6px; }
}/* End custom CSS */