/* EasyStreet — Composite Utility Poles page
Tokens mirror the Elementor kit so brand edits made in Elementor still flow here.
Measured from the live site 2026-09-21.
ACCESSIBILITY NOTE: the live site's #50A26A fails WCAG AA as text (2.7:1 on white,
3.1:1 under white button text). --es-green-dark is used for the two places that are
actually TEXT; --es-green stays exact for every rule, border and fill.
To restore the live look precisely, set --es-green-dark: var(--es-green).
SPECIFICITY NOTE: `.es-poles p` is (0,1,1) and BEATS any bare `.my-class`
(0,1,0) rule applied to a . Every class rule targeting a
element is
therefore written as `.es-poles .my-class`. Same trap as the Elementor kit's
`.elementor-kit-6 a`. Do not "simplify" these selectors. */
.es-poles {
--es-green: var(--e-global-color-accent, #50A26A);
--es-green-dark: #3d8253;
--es-gray: var(--e-global-color-1a7f715, #545454);
--es-ink: #080808;
--es-tint: #f7f9f8;
--es-head: var(--e-global-typography-primary-font-family, "Ubuntu"), sans-serif;
--es-body: var(--e-global-typography-text-font-family, "Poppins"), sans-serif;
--es-display: var(--e-global-typography-secondary-font-family, "Raleway"), sans-serif;
--es-btn: var(--e-global-typography-accent-font-family, "Roboto"), sans-serif;
--es-pad: 64px;
font-family: var(--es-body);
color: var(--es-ink);
overflow-x: hidden;
}
.es-poles *,
.es-poles *::before,
.es-poles *::after { box-sizing: border-box; }
.es-wrap {
max-width: 1200px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
.es-poles p { margin: 0 0 18px; font-size: 16px; line-height: 24px; }
.es-poles p:last-child { margin-bottom: 0; }
.es-poles h1 {
margin: 0 0 22px;
font-family: var(--es-display);
font-weight: 400;
font-size: clamp(30px, 4vw, 40px);
line-height: 1.15;
color: var(--es-green-dark);
}
.es-poles h2 {
margin: 0 0 16px;
font-family: var(--es-head);
font-weight: 600;
font-size: clamp(26px, 3.4vw, 36px);
line-height: 1.2;
color: #000;
}
.es-poles .es-band--gray h2,
.es-poles .es-band--green h2 { color: #fff; }
.es-rule { height: 2px; background: var(--es-green); border: 0; margin: 0 0 22px; }
/* ---------- buttons ----------
Selectors are .es-poles a.es-btn (0,2,1) on purpose: Elementor's kit emits
`.elementor-kit-6 a { color: var(--e-global-color-accent) }` at (0,2,0),
which beats a bare .es-btn and renders green text on a green button. */
.es-poles a.es-btn,
.es-poles a.es-btn-ghost {
display: inline-block;
font-family: var(--es-btn);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
border-radius: 3px;
padding: 13px 26px;
min-height: 44px;
}
.es-poles a.es-btn { background: var(--es-green-dark); color: #fff; }
.es-poles a.es-btn:hover,
.es-poles a.es-btn:focus { background: #336e45; color: #fff; }
.es-poles a.es-btn-ghost { border: 1px solid #c9d6d0; color: var(--es-gray); }
.es-poles a.es-btn-ghost:hover,
.es-poles a.es-btn-ghost:focus { border-color: var(--es-green); color: var(--es-green-dark); }
/* ---------- bands ---------- */
.es-band { padding: var(--es-pad) 0; }
.es-band--tint { background: var(--es-tint); }
.es-band--gray { background: var(--es-gray); color: #f0f0f0; }
.es-band--green { background: var(--es-green-dark); color: #fff; }
.es-band--gray p,
.es-band--green p { color: inherit; }
/* Elementor's Curve shape divider, reproduced so the page matches the rest of the site */
.es-curve { display: block; line-height: 0; }
.es-curve svg { display: block; width: 100%; height: 56px; }
@media (max-width: 767px) { .es-curve svg { height: 30px; } }
/* ---------- hero ----------
The photo is a real ![]()
inside a , not a CSS background: the
preload scanner finds it, so it can be the LCP element and carry
fetchpriority. Text sits on its own panel rather than under a full-width
gradient, so the whole photo stays readable AND text contrast is fixed
regardless of what part of the image is behind it. */
.es-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--es-tint); }
.es-hero__img { position: absolute; inset: 0; z-index: 0; display: block; }
.es-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
/* very light wash: knocks back the sky a touch so the panel edge is not harsh */
.es-hero__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 45%, rgba(255,255,255,0.06) 70%, rgba(255,255,255,0) 100%);
}
.es-hero__body { position: relative; z-index: 2; width: 100%; padding-top: 68px; padding-bottom: 68px; min-height: 520px; box-sizing: border-box; display: flex; align-items: center; }
.es-hero__panel {
background: rgba(255,255,255,0.94);
padding: 38px 40px 34px;
border-radius: 3px;
border-top: 3px solid var(--es-green);
max-width: 660px;
}
.es-hero__intro { max-width: none; }
/* ---------- definition ---------- */
.es-def { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.es-def__fig { margin: 0; }
.es-def__fig svg { width: 100%; height: auto; display: block; }
.es-def__fig figcaption { font-size: 12px; line-height: 1.55; color: var(--es-gray); margin-top: 10px; }
/* ---------- stat row ---------- */
.es-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 28px; padding: 0; list-style: none; }
.es-stat { border-bottom: 2px solid var(--es-green); padding-bottom: 12px; }
.es-stat__n { display: block; font-family: var(--es-head); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; color: #fff; }
.es-stat__l { display: block; font-size: 13px; color: #d8d8d8; margin-top: 4px; }
/* ---------- two column prose ---------- */
.es-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-bottom: 18px; }
/* ---------- attribute strip ---------- */
.es-attrs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; padding: 0; list-style: none; }
.es-attr { border-top: 2px solid var(--es-green); padding-top: 12px; }
.es-attr__t { display: block; font-family: var(--es-head); font-size: 17px; font-weight: 600; color: #fff; }
.es-attr__d { display: block; font-size: 13px; line-height: 1.5; color: #d8d8d8; margin-top: 5px; }
/* ---------- comparison table ---------- */
.es-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.es-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.es-table th,
.es-table td { text-align: left; padding: 15px 16px; vertical-align: top; }
.es-table thead th { font-family: var(--es-head); font-size: 16px; font-weight: 500; color: var(--es-gray); border-bottom: 2px solid var(--es-green); }
.es-table thead th:last-child { color: #000; }
.es-table tbody th { font-weight: 500; color: var(--es-gray); padding-left: 0; }
.es-table tbody td { color: var(--es-gray); }
.es-table tbody tr > *:last-child { background: var(--es-tint); color: var(--es-ink); }
.es-table tbody th,
.es-table tbody td { border-bottom: 1px solid var(--es-green); }
.es-poles .es-table__note { font-size: 13px; color: var(--es-gray); margin-top: 14px; }
/* ---------- application list ---------- */
.es-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin: 0 0 22px; padding: 0; list-style: none; }
.es-app { display: flex; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--es-green); }
.es-app__d { font-family: var(--es-head); font-size: 17px; font-weight: 600; color: var(--es-green-dark); min-width: 50px; }
.es-app__t { font-size: 15px; line-height: 1.55; }
/* ---------- pole cards ---------- */
.es-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 0 0 26px; padding: 0; list-style: none; }
.es-card { background: #fff; padding: 26px 24px; display: flex; flex-direction: column; }
.es-card__h { display: block; font-family: var(--es-head); font-size: 28px; font-weight: 600; color: #000; }
.es-card__use { display: block; font-size: 13px; line-height: 1.5; color: var(--es-gray); margin-top: 8px; min-height: 39px; }
.es-card__weight { background: var(--es-tint); padding: 14px 16px; margin: 16px 0; }
.es-card__weight b { display: block; font-family: var(--es-head); font-size: 26px; font-weight: 600; color: var(--es-green-dark); }
.es-card__weight span { display: block; font-size: 12.5px; color: var(--es-gray); margin-top: 3px; }
.es-card dl { margin: 0 0 18px; font-size: 13.5px; }
.es-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--es-green); }
.es-card dt { color: var(--es-gray); }
.es-card dd { margin: 0; text-align: right; color: var(--es-ink); }
.es-card a.es-btn { margin-top: auto; text-align: center; display: block; }
/* ---------- shared spec strip ---------- */
.es-shared { background: #fff; padding: 24px; }
.es-shared__h { display: block; font-family: var(--es-head); font-size: 20px; font-weight: 600; color: #000; }
.es-shared dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 36px; margin: 0; font-size: 13.5px; line-height: 1.55; }
.es-shared dt { color: var(--es-gray); }
.es-shared dd { margin: 0; color: var(--es-ink); }
/* ---------- closing ---------- */
.es-close { display: grid; grid-template-columns: minmax(0, 1.6fr) 358px; gap: 56px; align-items: start; }
.es-poles .es-close__line { font-family: var(--es-head); font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; line-height: 1.45; color: #fff; margin: 0 0 18px; }
.es-cta-card { background: #fff; padding: 28px 26px; color: var(--es-ink); }
.es-cta-card h3 { font-family: var(--es-head); font-size: 22px; font-weight: 600; color: #000; line-height: 1.3; margin: 0 0 12px; }
.es-cta-card p { font-size: 14px; line-height: 1.6; color: var(--es-gray); }
.es-cta-card a.es-btn,
.es-cta-card a.es-btn-ghost { display: block; text-align: center; margin-bottom: 10px; }
.es-poles a.es-cta-card__tel { display: block; text-align: center; font-family: var(--es-head); font-size: 17px; font-weight: 600; color: #000; text-decoration: none; padding: 6px 0; }
/* ---------- responsive ---------- */
@media (max-width: 1024px) {
.es-poles { --es-pad: 48px; }
.es-hero__panel { max-width: 560px; padding: 32px 32px 28px; }
.es-def { grid-template-columns: 1fr; gap: 32px; }
.es-def__fig { max-width: 420px; }
.es-close { grid-template-columns: 1fr; gap: 32px; }
.es-cta-card { max-width: 420px; }
.es-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.es-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es-shared dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.es-poles { --es-pad: 40px; }
.es-card__use { min-height: 0; }
.es-hero__body { min-height: 0; padding-top: 40px; padding-bottom: 40px; }
.es-hero__panel { max-width: none; padding: 26px 24px 24px; background: rgba(255,255,255,0.96); }
.es-hero h1 { max-width: none; }
.es-cols { grid-template-columns: 1fr; gap: 0; }
.es-stats { grid-template-columns: 1fr; gap: 14px; }
.es-attrs { grid-template-columns: 1fr; }
.es-apps { grid-template-columns: 1fr; gap: 0; }
.es-cards { grid-template-columns: 1fr; }
.es-shared dl { grid-template-columns: 1fr; }
.es-cta-row { gap: 10px; }
.es-cta-note { flex-basis: 100%; }
}
/* ============================================================
ABOUT PAGE
Simple single column, no hero photo. Shares the tokens and the
band/curve/button system above.
============================================================ */
.es-about .es-prose { max-width: 820px; }
.es-about h1 { margin-bottom: 10px; }
.es-about .es-lede {
font-family: var(--es-head);
font-size: clamp(19px, 2.3vw, 24px);
line-height: 1.4;
font-weight: 500;
color: #000;
margin: 0 0 22px;
}
.es-about h2 { margin-top: 44px; }
.es-about h2:first-of-type { margin-top: 0; }
.es-about .es-rule { margin-bottom: 18px; }
/* the closing band's buttons sit on green, so they need their own treatment */
.es-about__close { max-width: 820px; }
.es-poles a.es-btn--onGreen { background: #ffffff; color: #1f5c3a; }
.es-poles a.es-btn--onGreen:hover,
.es-poles a.es-btn--onGreen:focus { background: #eef5f0; color: #16452b; }
.es-poles a.es-btn-ghost--onGreen { border-color: rgba(255,255,255,0.65); color: #ffffff; }
.es-poles a.es-btn-ghost--onGreen:hover,
.es-poles a.es-btn-ghost--onGreen:focus { border-color: #ffffff; color: #ffffff; background: rgba(255,255,255,0.12); }
.es-about__close .es-close__line { margin-bottom: 14px; }
.es-about__close .es-cta-row { margin-top: 22px; }
@media (max-width: 767px) {
.es-about h2 { margin-top: 34px; }
}