...
Neutralize its outer chrome so it sits flush inside the blue panel. */
.home-page .home-plans__panel .sec { padding: 0; }
.home-page .home-plans__panel .sec > .container { max-width: 100%; padding: 0; }
.home-page .home-plans__panel .plans-zip-line { justify-content: flex-start; margin-bottom: 24px; }
@media (min-width: 768px) { .home-page .home-plans__panel .plans-zip-line { justify-content: center; } }
/* =========================================================================
5. WHY POWER TEXAS
Restored to the ORIGINAL implementation — all styling lives in styles.css
(pale Texas silhouette `.whyx-tx`, 440px provider card, 3-column trust
strip, Google rating badge, reveal animation, and the 980/768 responsive
breakpoints). Homepage-only tweaks below:
• brighter-blue accent on the third headline line ("Trusted by Texans.")
• tighten the headline→benefit gap now that the intro paragraph is gone
========================================================================= */
/* Accent removed — whole headline uses the standard heading navy (--color-primary). */
.home-page .whyx-headline .accent { color: var(--color-primary); }
.home-page .whyx-headline { margin-bottom: 20px; }
/* =========================================================================
6. HOW IT WORKS strip
========================================================================= */
.home-page .home-how { background: var(--h-blue-strip); padding: 16px 0; }
.home-page .home-how__d { display: none; }
.home-page .home-how__m { display: flex; flex-direction: column; padding: 8px 24px; }
@media (min-width: 1024px) {
.home-page .home-how__d {
display: flex; align-items: center; justify-content: space-between;
max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
.home-page .home-how__m { display: none; }
}
.home-page .home-how__label { color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.home-page .home-how__sep { width: 1px; height: 40px; background: rgba(255,255,255,0.2); margin: 0 24px; }
.home-page .home-how__step { display: flex; flex-direction: column; }
.home-page .home-how__num { color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; }
.home-page .home-how__txt { color: #fff; font-size: 16px; font-weight: 600; }
.home-page .home-how__arrow { color: rgba(255,255,255,0.4); margin: 0 16px; }
.home-page .home-how__tag { color: #fff; font-size: 16px; font-weight: 600; text-align: right; line-height: 1.35; }
.home-page .home-how__tag span { color: rgba(255,255,255,0.8); font-weight: 400; }
.home-page .home-how__mrow { border-top: 1px solid rgba(255,255,255,0.15); margin: 16px 0; }
.home-page .home-how__msteps { display: flex; flex-direction: column; gap: 14px; }
/* =========================================================================
8. SHOPPING GUIDES (links to REAL existing guide pages)
========================================================================= */
.home-page .home-guides { background: #fff; padding: 56px 0; }
@media (min-width: 1024px) { .home-page .home-guides { padding: 96px 0; } }
.home-page .home-guides__wrap { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .home-page .home-guides__wrap { padding: 0 48px; } }
.home-page .home-guides__head { margin-bottom: 48px; }
.home-page .home-guides__h2 { color: var(--h-blue-strip); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 800; line-height: 1.15; margin: 0 0 16px; }
.home-page .home-guides__sub { color: var(--h-slate); font-size: 18px; margin: 0; }
.home-page .home-guides__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) { .home-page .home-guides__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.home-page .home-feature { display: block; }
.home-page .home-feature__thumb {
width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
background: linear-gradient(135deg, var(--h-navy-2), var(--h-navy-3)); margin-bottom: 24px;
display: flex; align-items: center; justify-content: center;
}
.home-page .home-feature__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-page .home-cat { color: var(--h-slate-2); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; }
.home-page .home-feature__title { color: var(--h-ink); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; line-height: 1.25; margin: 0 0 12px; transition: color var(--dur-fast) var(--ease-standard); }
.home-page .home-feature:hover .home-feature__title { color: var(--h-blue-link); }
.home-page .home-date { color: var(--h-mute); font-size: 14px; margin: 0; }
.home-page .home-articles { display: flex; flex-direction: column; }
.home-page .home-article {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 24px 16px; border-bottom: 1px solid #E8ECF0; border-radius: var(--radius-md);
margin: 0 -16px; transition: background var(--dur-fast) var(--ease-standard);
}
.home-page .home-article:last-child { border-bottom: none; }
.home-page .home-article:hover { background: #FAFBFC; }
.home-page .home-article__body { flex: 1; }
.home-page .home-article__title { color: var(--h-ink); font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 8px; transition: color var(--dur-fast) var(--ease-standard); }
.home-page .home-article:hover .home-article__title { color: var(--h-blue-link); }
.home-page .home-article__arrow { color: var(--h-blue-link); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-standard); }
.home-page .home-article:hover .home-article__arrow { transform: translateX(4px); }
.home-page .home-article__thumb { flex-shrink: 0; width: 96px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, var(--h-navy-2), var(--h-navy-3)); display: flex; align-items: center; justify-content: center; }
.home-page .home-article__thumb img { width: 60%; height: 60%; object-fit: contain; opacity: 0.85; }
/* Real-photo thumbnail variant (e.g. No-Deposit) — fills the 96x64 container,
cover + centered. Only rows with an image get this; the logo-mark rows are
unaffected. Container size/border-radius are inherited unchanged. */
.home-page .home-article__thumb--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; padding: 0; }
/* =========================================================================
9. STICKY ZIP BAR (desktop only — mobile handled by shared Header sticky)
========================================================================= */
.home-page .home-sticky { display: none; }
@media (min-width: 1024px) {
/* Compact conversion sticky nav (desktop): logo left, phone + ZIP + CTA right.
Normal nav links are intentionally not shown here (conversion, not browse). */
.home-page .home-sticky {
display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: #fff; border-bottom: 1px solid var(--border-muted);
box-shadow: 0 2px 12px rgba(15,23,42,0.06);
transform: translateY(-100%); opacity: 0; pointer-events: none;
transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
.home-page .home-sticky.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.home-page .home-sticky__inner {
max-width: 1280px; margin: 0 auto; padding: 10px 32px;
display: flex; align-items: center; justify-content: flex-start; gap: 0;
}
.home-page .home-sticky__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.home-page .home-sticky__logo img { height: 26px; width: auto; display: block; }
/* Logo isolated left; phone + ZIP + CTA form one right-aligned control group,
with a modest gap between the phone and the ZIP field. */
.home-page .home-sticky__phone {
margin-left: auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
color: var(--h-ink); font: 600 14px var(--font-sans); text-decoration: none;
}
.home-page .home-sticky__phone-ico { color: var(--color-secondary); flex-shrink: 0; } /* icon stays red */
.home-page .home-sticky__form { margin-left: 28px; display: flex; align-items: stretch; }
.home-page .home-sticky__field { position: relative; display: flex; }
.home-page .home-sticky__pin {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
color: #9CA3AF; display: inline-flex; pointer-events: none;
}
.home-page .home-sticky__input {
height: 42px; width: 150px; padding: 0 14px 0 36px;
border: 1px solid var(--border-default); border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
background: #fff; color: var(--h-navy-deep); font-size: 14px; font-weight: 500; outline: none;
}
.home-page .home-sticky__input::placeholder { color: #AEB4BE; opacity: 1; }
.home-page .home-sticky__input:focus { border-color: var(--color-blue-500); box-shadow: 0 0 0 2px rgba(90,138,200,0.20); position: relative; z-index: 1; }
.home-page .home-sticky__btn {
height: 42px; padding: 0 18px; border: none; cursor: pointer;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: linear-gradient(to bottom, var(--h-red-1), var(--h-red-2)); color: #fff; font-weight: 700; font-size: 14px;
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.home-page .home-sticky__btn:hover { background: linear-gradient(to bottom, var(--h-red-hi-1), var(--h-red-hi-2)); }
}
/* Hide the shared Header's mobile-sticky on the homepage ONLY on desktop
(keep it for mobile). It's mobile-only anyway, so no-op guard. */
/* =========================================================================
Utility
========================================================================= */
.home-page .home-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* =========================================================================
TYPOGRAPHY SYSTEM — Phase 1 (tokens + utilities) + Phase 2 (homepage apply)
Homepage-ONLY. Additive: existing global styles are untouched; Poppins &
JetBrains Mono remain loaded (removed in a later phase). DM Sans = display,
Inter = UI/body. Overriding --font-display on .home-page flips homepage
display type to DM Sans WITHOUT changing the global (other-page) value.
This block is last in the file so it wins by source order.
========================================================================= */
/* --- Phase 1: tokens (mobile-first; desktop values applied at >=768px) --- */
.home-page {
--font-display: 'DM Sans', 'Poppins', var(--font-sans); /* homepage display -> DM Sans */
--t-h1-size: 38px; --t-h1-lh: 1.10; --t-h1-weight: 700; --t-h1-track: -0.03em;
--t-h2-size: 30px; --t-h2-lh: 1.15; --t-h2-weight: 700; --t-h2-track: -0.02em;
--t-h2-compact-size: 30px; /* compact plans-section H2 variant (desktop set @>=768) */
--t-mkt-size: 38px; --t-mkt-lh: 1.08; --t-mkt-weight: 700; --t-mkt-track: -0.025em;
--t-h3-size: 20px; --t-h3-lh: 1.25; --t-h3-weight: 700; --t-h3-track: -0.01em;
--t-listtitle-size: 18px; --t-listtitle-lh: 1.30; --t-listtitle-weight: 600; --t-listtitle-track: -0.01em;
--t-rate-size: 30px; --t-rate-lh: 1.00; --t-rate-weight: 700; --t-rate-track: -0.02em;
--t-eyebrow-size: 12px; --t-eyebrow-lh: 1.00; --t-eyebrow-weight: 700; --t-eyebrow-track: 0.10em;
--t-bodylg-size: 17px; --t-bodylg-lh: 1.55; --t-bodylg-weight: 400; --t-bodylg-track: 0;
--t-body-size: 16px; --t-body-lh: 1.50; --t-body-weight: 400; --t-body-track: 0;
--t-bodysm-size: 14px; --t-bodysm-lh: 1.45; --t-bodysm-weight: 400; --t-bodysm-track: 0;
--t-btn-size: 14px; --t-btn-lh: 1.00; --t-btn-weight: 600; --t-btn-track: 0.01em;
/* Homepage default body line-height -> unitless. Does NOT touch the global
body rule (colors_and_type.css body { line-height: 24px } is unchanged). */
line-height: var(--t-body-lh);
}
@media (min-width: 768px) {
.home-page {
--t-h1-size: 62px;
--t-h2-size: 40px;
--t-h2-compact-size: 36px;
--t-mkt-size: 46px;
--t-h3-size: 22px;
--t-rate-size: 38px;
--t-bodylg-size: 18px;
}
}
/* --- Phase 1: utility classes (scoped; available for future markup use) --- */
.home-page .ty-h1 { font-family: var(--font-display); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); font-weight: var(--t-h1-weight); letter-spacing: var(--t-h1-track); }
.home-page .ty-h2 { font-family: var(--font-display); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); font-weight: var(--t-h2-weight); letter-spacing: var(--t-h2-track); }
.home-page .ty-mkt { font-family: var(--font-display); font-size: var(--t-mkt-size); line-height: var(--t-mkt-lh); font-weight: var(--t-mkt-weight); letter-spacing: var(--t-mkt-track); }
.home-page .ty-h3 { font-family: var(--font-display); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: var(--t-h3-weight); letter-spacing: var(--t-h3-track); }
.home-page .ty-list-title { font-family: var(--font-display); font-size: var(--t-listtitle-size); line-height: var(--t-listtitle-lh); font-weight: var(--t-listtitle-weight); letter-spacing: var(--t-listtitle-track); }
.home-page .ty-rate { font-family: var(--font-display); font-size: var(--t-rate-size); line-height: var(--t-rate-lh); font-weight: var(--t-rate-weight); letter-spacing: var(--t-rate-track); }
.home-page .ty-eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh); font-weight: var(--t-eyebrow-weight); letter-spacing: var(--t-eyebrow-track); text-transform: uppercase; }
.home-page .ty-body-lg { font-family: var(--font-sans); font-size: var(--t-bodylg-size); line-height: var(--t-bodylg-lh); font-weight: var(--t-bodylg-weight); }
.home-page .ty-body { font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--t-body-weight); }
.home-page .ty-body-sm { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: var(--t-bodysm-weight); }
.home-page .ty-btn { font-family: var(--font-sans); font-size: var(--t-btn-size); line-height: var(--t-btn-lh); font-weight: var(--t-btn-weight); letter-spacing: var(--t-btn-track); }
/* --- Phase 2: apply tokens to homepage elements (scoped overrides) --- */
/* Display / H1 — hero headline */
.home-page .home-hero__h1 { font-family: var(--font-display); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); font-weight: var(--t-h1-weight); letter-spacing: var(--t-h1-track); }
/* Section / H2 — standard section headings */
.home-page .home-plans__title,
.home-page .home-guides__h2 { font-family: var(--font-display); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); font-weight: var(--t-h2-weight); letter-spacing: var(--t-h2-track); }
/* Compact plans-section H2 variant — 36px desktop / 30px mobile. Font-size only;
the global H2 token is unchanged (Guides H2 stays 40px). */
.home-page .home-plans__title { font-size: var(--t-h2-compact-size); }
/* Marketing statement — Why Power Texas headline (46/38) */
.home-page .whyx-headline { font-family: var(--font-display); font-size: var(--t-mkt-size); line-height: var(--t-mkt-lh); font-weight: var(--t-mkt-weight); letter-spacing: var(--t-mkt-track); }
/* H3 / card titles (plan name, guides feature, CTA-band headline) */
.home-page .plan .plan-name,
.home-page .home-feature__title,
.home-page .compare-band h3 { font-family: var(--font-display); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: var(--t-h3-weight); letter-spacing: var(--t-h3-track); }
/* Article / list title — Shopping Guides list rows (stays 18px, NOT H3) */
.home-page .home-article__title { font-family: var(--font-display); font-size: var(--t-listtitle-size); line-height: var(--t-listtitle-lh); font-weight: var(--t-listtitle-weight); letter-spacing: var(--t-listtitle-track); }
/* Plan-rate number */
.home-page .plan .plan-data-number { font-family: var(--font-display); font-size: var(--t-rate-size); line-height: var(--t-rate-lh); font-weight: var(--t-rate-weight); letter-spacing: var(--t-rate-track); }
/* Eyebrows / labels (Inter, uppercase). Colors are left to their own rules. */
.home-page .home-plans__eyebrow,
.home-page .whyx-eyebrow,
.home-page .home-cat,
.home-page .home-how__label,
.home-page .footer--navy .footer-col-h { font-family: var(--font-sans); font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh); font-weight: var(--t-eyebrow-weight); letter-spacing: var(--t-eyebrow-track); text-transform: uppercase; }
/* Body large — guides subhead (hero subhead no longer exists on the page) */
.home-page .home-guides__sub { font-family: var(--font-sans); font-size: var(--t-bodylg-size); line-height: var(--t-bodylg-lh); font-weight: var(--t-bodylg-weight); letter-spacing: 0; }
/* Body small / metadata (hero Google rating was removed; Why rating remains) */
.home-page .whyx-rating-text,
.home-page .plans-zip-line,
.home-page .home-date,
.home-page .compare-sub { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: var(--t-bodysm-weight); letter-spacing: 0; }
/* Buttons / labels — Inter, explicit line-height:1 (no body-lh bleed) */
.home-page .home-nav__link,
.home-page .plan-cta,
.home-page .compare-band .btn-compare,
.home-page .home-sticky__btn { font-family: var(--font-sans); font-size: var(--t-btn-size); line-height: var(--t-btn-lh); letter-spacing: var(--t-btn-track); }
.home-page .home-nav__link { font-weight: var(--t-btn-weight); } /* nav link = 600 */
/* .home-zip__btn typography now lives in hero-zip.css (shared control) */
.home-page .plan-cta,
.home-page .compare-band .btn-compare,
.home-page .home-sticky__btn { font-weight: 700; } /* primary-action emphasis */
/* Component line-heights so body line-height can't drive their box height */
.home-page .home-pill { line-height: 1; } /* pill (preserved compact) */
.home-page .plan-type-pill { line-height: 1; } /* pill */
.home-page .plan-badge,
.home-page .plan-badge--popular { line-height: 1; } /* badge */
.home-page .plan-badge--popular { font-weight: 700; } /* Inter 800 -> 700 (no faux-bold) */
/* Inputs — explicit line-height; sticky input pinned to Inter (was UA Arial).
Hero ZIP input typography now lives in hero-zip.css (shared control). */
.home-page .home-sticky__input { font-family: var(--font-sans); line-height: 1; } /* compact 13px preserved */
/* --- Phase 2 completion: remaining elements mapped to existing tokens --- */
/* Plan-card metadata -> Body small */
.home-page .plan-feature { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: 500; letter-spacing: 0; }
.home-page .plan .plan-foot a { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: 600; letter-spacing: 0; }
.home-page .plans-foot-row { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: var(--t-bodysm-weight); letter-spacing: 0; }
/* "View All Plans" -> Button/label (700); underlined-link styling left intact */
.home-page .plans-all--prominent { font-family: var(--font-sans); font-size: var(--t-btn-size); line-height: var(--t-btn-lh); font-weight: 700; letter-spacing: var(--t-btn-track); }
/* How It Works strip */
.home-page .home-how__num { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: 500; letter-spacing: 0; }
.home-page .home-how__txt,
.home-page .home-how__tag { font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: 600; letter-spacing: 0; }
/* Navigation dropdown items + View All */
.home-page .home-nav__dropdown a { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: 500; letter-spacing: 0; }
.home-page .home-nav__dropdown a.home-nav__viewall { font-weight: 700; }
/* Navigation phone (desktop only) -> Button/label (700); mobile phone keeps its size */
.home-page .home-nav__phone:not(.home-nav__phone--mobile) { font-family: var(--font-sans); font-size: var(--t-btn-size); line-height: var(--t-btn-lh); font-weight: 700; letter-spacing: var(--t-btn-track); }
/* Hero "Shop Business Energy Plans" link -> Button/label (600) */
.home-page .home-hero__biz { font-family: var(--font-sans); font-size: var(--t-btn-size); line-height: var(--t-btn-lh); font-weight: 600; letter-spacing: var(--t-btn-track); }
/* Footer -> Body small */
.home-page .footer--navy .footer-tagline,
.home-page .footer--navy .footer-col-list a,
.home-page .footer--navy .footer-bottom-left,
.home-page .footer--navy .footer-bottom-center,
.home-page .footer--navy .footer-bottom-center a,
.home-page .footer--navy .footer-privacy-badge { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: var(--t-bodysm-weight); letter-spacing: 0; }
.home-page .footer--navy .footer-view-all { font-family: var(--font-sans); font-size: var(--t-bodysm-size); line-height: var(--t-bodysm-lh); font-weight: 600; letter-spacing: 0; }
/* --- Why Power Texas — left-side refinement (typography + spacing only) --- */
/* Eyebrow -> 22px gap to headline (font/color/tracking unchanged) */
.home-page .whyx-eyebrow { margin-bottom: 22px; }
/* Marketing headline refined to 44/40/36 with line-height 1.12. Applied to the
headline directly (NOT the --t-mkt token) so the shared token is unchanged;
DM Sans / 700 / letter-spacing -0.025em still come from the token rule.
Also sets the 22px gap down to the Google rating. */
.home-page .whyx-headline { font-size: 38px; line-height: 1.18; margin-bottom: 22px; } /* mobile */
@media (min-width: 768px) { .home-page .whyx-headline { font-size: 44px; } } /* tablet */
@media (min-width: 1024px) { .home-page .whyx-headline { font-size: 50px; } } /* desktop */
/* ============================================================================
Featured-plans section — HOMEPAGE-ONLY overrides (PlanCards is shared and
untouched; these only apply under .home-page so other pages are unaffected).
============================================================================ */
/* Remove the shared "Showing plans for 75204" ZIP line, and the shared
below-cards foot row (its View All link + rates-updated line). Both are
replaced by the homepage markup below so "View All Plans" appears once. */
.home-page .home-plans .plans-zip-line { display: none; }
.home-page .home-plans .plans-foot-row { display: none; }
/* "View All Plans" moved into the top-right position the ZIP line used to hold */
.home-page .home-plans__toprow { display: flex; justify-content: flex-end; margin: 0 0 16px; }
.home-page .home-plans__viewall {
color: var(--color-secondary); font-family: var(--font-sans);
font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
white-space: nowrap;
}
.home-page .home-plans__viewall:hover { color: var(--color-red-100); }
/* New disclosure below the cards */
.home-page .home-plans__disclosure {
margin: 28px 0 0; text-align: center;
color: var(--fg-muted); font-family: var(--font-sans);
font-size: 13px; line-height: 1.5;
}
.home-page .home-plans__disclosure strong { color: var(--fg-default); font-weight: 700; }
/* ============================================================================
Featured-plans REDESIGN — HOMEPAGE-ONLY (PlanCards markup is shared and
untouched; every rule is .home-page-scoped so other pages are unaffected).
============================================================================ */
/* 1. Remove the rounded light-blue panel — section sits on the off-white page bg */
.home-page .home-plans__panel { background: transparent; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
.home-page .home-plans__glow-a, .home-page .home-plans__glow-b { display: none; }
.home-page .home-plans .sec { padding: 0; }
@media (min-width: 1024px) { .home-page .home-plans__panel { border-radius: 0; padding: 0; } }
/* 2. Redesigned cards — white with subtle border/shadow, slim plan-type header,
left logo, compact body, one detail, ~20% shorter. */
.home-page .plans-grid .plan,
.home-page .plans-grid .plan--popular {
padding: 0 20px 18px; /* no top padding: header bar sits flush */
gap: 12px;
overflow: hidden; /* clip header-bar corners to card radius */
border: 1px solid var(--border-muted);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
}
.home-page .plans-grid .plan:hover { transform: none; border-color: var(--color-blue-700); box-shadow: var(--shadow-md); }
/* Slim light-blue plan-type header across the top */
.home-page .plan .plan-type-pill {
order: -1; /* move to the very top of the card */
align-self: stretch; display: block;
margin: 0 -20px; /* break out to the card edges */
padding: 9px 20px;
background: var(--bg-brand-soft); color: var(--color-primary);
border-radius: 0;
font: 700 12px/1 var(--font-sans); letter-spacing: 0.04em; text-align: left;
}
/* Logo: left-aligned, ~17% smaller; drop badge + reserved height */
.home-page .plan .plan-top { min-height: 0; justify-content: flex-start; margin-top: 2px; }
.home-page .plan .plan-logo { height: 40px; }
.home-page .plan-badge { display: none; }
/* Plan name: smaller, directly beneath the logo */
.home-page .plan .plan-name { font: 700 17px/1.25 var(--h-font-display, var(--font-sans)); }
/* Rate + term stay on one row (unchanged layout, tightened top gap) */
.home-page .plan .plan-data { padding-top: 0; }
/* One important detail only — no checkmark list, no divider */
.home-page .plan .plan-divider { display: none; }
.home-page .plan .plan-features { gap: 0; }
.home-page .plan .plan-feature { font: 500 13.5px/1.4 var(--font-sans); color: var(--fg-default); }
.home-page .plan .plan-feature:not(:first-child) { display: none; }
.home-page .plan .plan-feature-icon { display: none; }
/* Tighten the CTA spacing a touch */
.home-page .plan .plan-cta { margin-top: 2px; }
/* ============================================================================
Featured-plan cards — header shows each plan's KEY FEATURE (homepage-only).
The source strings live in shared PlanCards data, so the per-card header text
is set via CSS here to avoid changing other pages. (If approved, promote to
real data.) Only .home-page-scoped; other pages unaffected.
============================================================================ */
/* Replace the plan-type header text with the plan's key feature (per card). */
.home-page .plans-grid .plan .plan-type-pill { font-size: 0; } /* hide original plan-type text; keep the bar */
.home-page .plans-grid .plan .plan-type-pill::before {
font: 700 12px/1 var(--font-sans); letter-spacing: 0.04em; color: var(--color-primary);
}
.home-page .plans-grid .plan:nth-of-type(1) .plan-type-pill::before { content: "$125 bill credit at 1,000 kWh"; }
.home-page .plans-grid .plan:nth-of-type(2) .plan-type-pill::before { content: "Fixed rate for 12 months"; }
.home-page .plans-grid .plan:nth-of-type(3) .plan-type-pill::before { content: "$100 bill credit at 1,000 kWh"; }
/* Remove the repeated in-card feature text, but PRESERVE its vertical space so
the CTA doesn't move up too tightly (visibility:hidden keeps the line's box). */
.home-page .plan .plan-features { visibility: hidden; }
/* Plan name slightly smaller + a little more space before the rate/term row. */
.home-page .plan .plan-name { font-size: 16px; margin-bottom: 6px; }
/* ---- Final featured-card refinements (homepage-only) -------------------- */
/* Header text +1px, still slim */
.home-page .plans-grid .plan .plan-type-pill::before { font-size: 13px; }
/* Middle-card header copy */
.home-page .plans-grid .plan:nth-of-type(2) .plan-type-pill::before { content: "Straightforward fixed rate"; }
/* Distribute whitespace evenly around the rate row instead of one big blank
below it: drop the feature spacer and balance name->rate and rate->CTA. */
.home-page .plan .plan-features { display: none; }
.home-page .plan .plan-name { margin-bottom: 18px; }
.home-page .plan .plan-cta { margin-top: 18px; }
/* Disclosure aligns to the left edge of the card grid */
.home-page .home-plans__disclosure { text-align: left; }
/* More space above the "Featured electricity plans." H2 (desktop +18 / mobile +10).
padding-top (not margin) to avoid margin-collapse; homepage-only. */
.home-page .home-plans__title { padding-top: 10px; }
@media (min-width: 1024px) { .home-page .home-plans__title { padding-top: 18px; } }
/* ============================================================================
"Why Power Texas" — compact two-column redesign (homepage-only). Overrides
the shared .whyx-* layout via .home-page specificity; the standalone blue
"How It Works" strip is removed from the render. Texas outline (.whyx-tx)
and float card are reused.
============================================================================ */
.home-page .sec.why-hero { background: #F1F6FC; padding: 52px 0; overflow: hidden; }
@media (min-width: 1024px) { .home-page .sec.why-hero { padding: 60px 0; } }
.home-page .why-hero .whyx-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 44px; align-items: center; }
@media (max-width: 980px) { .home-page .why-hero .whyx-grid { grid-template-columns: 1fr; gap: 30px; } }
/* Left column */
.home-page .whyx-h2 {
font-family: var(--h-font-display); font-weight: 700;
font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em;
color: var(--color-primary); margin: 12px 0 12px; max-width: 16ch; text-wrap: balance;
}
.home-page .whyx-copy { font: 400 16px/1.55 var(--font-sans); color: var(--fg-default); max-width: 44ch; margin: 0 0 26px; }
.home-page .whyx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.home-page .whyx-step { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.home-page .whyx-step-num { font: 700 14px/1.4 var(--font-sans); color: var(--color-secondary); letter-spacing: 0.06em; min-width: 20px; }
.home-page .whyx-step-body { display: flex; flex-direction: column; gap: 2px; }
.home-page .whyx-step-title { font: 700 15px/1.3 var(--font-sans); color: var(--color-primary); }
.home-page .whyx-step-sub { font: 400 13.5px/1.45 var(--font-sans); color: var(--fg-muted); }
/* Right column — compact comparison card over the subtle Texas outline */
.home-page .why-hero .whyx-right { min-height: 0; justify-content: center; }
@media (min-width: 981px) { .home-page .why-hero .whyx-right { justify-content: flex-end; } }
.home-page .why-hero .whyx-tx { opacity: 0.6; }
.home-page .why-hero .whyx-floatcard { max-width: 400px; padding: 8px 20px; }
.home-page .whyx-cmp { list-style: none; margin: 0; padding: 0; }
.home-page .whyx-cmp-row {
display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
height: 58px; padding: 0 4px; border-top: 1px solid var(--color-gray-100);
}
.home-page .whyx-cmp-row:first-child { border-top: none; }
.home-page .whyx-cmp-logo { display: flex; align-items: center; }
.home-page .whyx-cmp-logo img { max-height: 26px; max-width: 104px; width: auto; object-fit: contain; display: block; filter: saturate(1.12) contrast(1.04); }
.home-page .whyx-cmp-rate { display: inline-flex; align-items: baseline; gap: 3px; font: 700 17px/1 var(--h-font-display, var(--font-sans)); color: var(--color-primary); letter-spacing: -0.01em; white-space: nowrap; }
.home-page .whyx-cmp-unit { font: 600 11px/1 var(--font-sans); color: var(--fg-muted); letter-spacing: 0; }
.home-page .whyx-cmp-term { font: 600 12px/1 var(--font-sans); color: var(--color-primary); background: var(--bg-brand-soft); border-radius: 6px; padding: 6px 9px; white-space: nowrap; }
/* ============================================================================
"How It Works" — full-width three-step section (homepage-only). Keeps the
existing blue strip background; replaces the old inline strip layout.
============================================================================ */
.home-page .home-how { background: var(--h-blue-strip); padding: 56px 0; }
.home-page .home-how__wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.home-page .home-how__eyebrow {
text-align: center; margin: 0 0 12px;
font: 700 12px/1 var(--font-sans); letter-spacing: 0.15em; text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.home-page .home-how__title {
text-align: center; margin: 0 auto 40px; max-width: 22ch;
font-family: var(--h-font-display); font-weight: 700;
font-size: clamp(24px, 3vw, 32px); line-height: 1.18; letter-spacing: -0.02em;
color: #fff; text-wrap: balance;
}
.home-page .home-how__steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start;
gap: 8px;
}
.home-page .home-how__step { text-align: center; padding: 0 8px; }
.home-page .home-how__stepnum {
display: block; margin: 0 0 12px;
font-family: var(--h-font-display); font-weight: 700; font-size: 44px; line-height: 1;
letter-spacing: -0.02em; color: #A9C6F2;
}
.home-page .home-how__step-h { margin: 0 0 6px; font: 700 17px/1.3 var(--font-sans); color: #fff; }
.home-page .home-how__step-p { margin: 0 auto; max-width: 26ch; font: 400 14px/1.5 var(--font-sans); color: rgba(255,255,255,0.72); }
.home-page .home-how__conn { display: flex; justify-content: center; padding-top: 8px; color: rgba(255,255,255,0.4); }
.home-page .home-how__conn svg { display: block; }
@media (max-width: 768px) {
.home-page .home-how { padding: 44px 0; }
.home-page .home-how__steps { grid-template-columns: 1fr; gap: 28px; }
.home-page .home-how__conn { display: none; }
.home-page .home-how__title { margin-bottom: 32px; }
}
/* Spacing between the How It Works H2 and the three steps (~30px). */
.home-page .home-how__title { margin-bottom: 30px; }
/* How It Works — recolor to a very pale blue section (structure/copy/sizing/
spacing unchanged): red eyebrow, navy heading + descriptions, medium-blue
step numbers + connectors. */
.home-page .home-how { background: var(--h-blue-panel); }
.home-page .home-how__eyebrow { color: var(--color-secondary); }
.home-page .home-how__title { color: var(--color-primary); }
.home-page .home-how__step-h { color: var(--color-primary); }
.home-page .home-how__step-p { color: var(--color-primary); }
.home-page .home-how__stepnum { color: var(--color-blue-300); }
.home-page .home-how__conn { color: var(--color-blue-300); }
/* ============================================================================
"Why Power Texas" trust section — between featured plans and How It Works.
Full-width very pale blue; two columns (stack on mobile). Homepage-only.
============================================================================ */
.home-page .home-why { background: var(--h-blue-panel); border-bottom: 1px solid rgba(25,71,140,0.08); padding: 52px 0; }
@media (min-width: 1024px) { .home-page .home-why { padding: 72px 0; } }
.home-page .home-why__wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 900px) { .home-page .home-why__wrap { grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: start; } }
/* Left column */
.home-page .home-why__eyebrow { margin: 0 0 14px; font: 700 12px/1 var(--font-sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-secondary); }
.home-page .home-why__title { margin: 0 0 14px; max-width: 18ch; font-family: var(--h-font-display); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-primary); text-wrap: balance; }
.home-page .home-why__copy { margin: 0 0 28px; max-width: 46ch; font: 400 16px/1.55 var(--font-sans); color: var(--fg-default); }
.home-page .home-why__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.home-page .home-why__benefit { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.home-page .home-why__check { display: inline-flex; align-items: center; justify-content: center; color: var(--color-secondary); margin-top: 2px; flex-shrink: 0; }
.home-page .home-why__benefit-title { display: block; font: 700 15px/1.35 var(--font-sans); color: var(--color-primary); }
.home-page .home-why__benefit-sub { display: block; margin-top: 2px; font: 400 14px/1.5 var(--font-sans); color: var(--fg-muted); }
/* Right column — white testimonial card + white 3-stat panel */
.home-page .home-why__right { display: flex; flex-direction: column; gap: 20px; }
.home-page .home-why__quote { margin: 0; background: #fff; border: 1px solid var(--border-muted); border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 30px rgba(25,71,140,0.06); }
.home-page .home-why__quote blockquote { margin: 0 0 14px; font-family: var(--h-font-display); font-weight: 600; font-size: 18px; line-height: 1.45; color: var(--color-primary); }
.home-page .home-why__quote figcaption { font: 500 13.5px/1.4 var(--font-sans); color: var(--fg-muted); }
.home-page .home-why__stats { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--border-muted); border-radius: 14px; padding: 20px 8px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 30px rgba(25,71,140,0.06); }
.home-page .home-why__stat { text-align: center; padding: 0 8px; }
.home-page .home-why__stat + .home-why__stat { border-left: 1px solid var(--border-muted); }
.home-page .home-why__stat-num { display: block; font-family: var(--h-font-display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-primary); }
.home-page .home-why__stat-label { display: block; margin-top: 4px; font: 500 12.5px/1.35 var(--font-sans); color: var(--fg-muted); }
/* Why Power Texas — refinements: white bg, larger H2, equal-height columns,
enlarged testimonial card with decorative quote mark + 26px text. */
.home-page .home-why { background: #fff; border-bottom: none; }
.home-page .home-why__title { font-size: clamp(28px, 4vw, 40px); }
@media (min-width: 900px) {
.home-page .home-why__wrap { align-items: stretch; }
.home-page .home-why__quote { flex: 1 1 auto; }
}
.home-page .home-why__quote {
display: flex; flex-direction: column; justify-content: center;
padding: 36px 36px 32px;
border: 1px solid var(--border-muted);
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(25,71,140,0.05);
}
.home-page .home-why__quote::before {
content: "\201C"; display: block;
font-family: var(--h-font-display); font-weight: 700; font-size: 64px; line-height: 0.7;
color: var(--color-blue-600); margin-bottom: 10px;
}
.home-page .home-why__quote blockquote { margin: 0 0 18px; font-size: 26px; line-height: 1.5; font-weight: 500; color: var(--color-primary); }
.home-page .home-why__quote figcaption { font: 500 14px/1.4 var(--font-sans); color: var(--fg-muted); }
.home-page .home-why__stats { padding: 22px 8px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(25,71,140,0.05); }
/* ============================================================================
Why Power Texas — editorial redesign v2 (homepage-only). White section kept.
============================================================================ */
/* Left column */
.home-page .home-why__title { font-size: clamp(30px, 4.5vw, 46px); line-height: 1.12; max-width: 15ch; }
.home-page .home-why__copy { font-size: 17px; line-height: 1.65; max-width: 44ch; margin-bottom: 8px; }
.home-page .home-why__benefits { gap: 0; border-top: 1px solid var(--border-muted); margin-top: 20px; }
.home-page .home-why__benefit {
grid-template-columns: auto 1fr; gap: 16px; align-items: start;
padding: 22px 0; border-bottom: 1px solid var(--border-muted);
}
.home-page .home-why__check {
width: 30px; height: 30px; border-radius: 50%;
background: var(--bg-brand-soft); color: var(--color-secondary);
margin-top: 0; flex-shrink: 0;
}
.home-page .home-why__benefit-body { gap: 7px; }
.home-page .home-why__benefit-title { font-size: 16px; }
.home-page .home-why__benefit-sub { font-size: 14px; }
/* Right column — unified composition (navy card + overlapping pale-blue stats) */
.home-page .home-why__right { gap: 0; }
.home-page .home-why__quote {
position: relative; overflow: hidden;
background: var(--h-navy-deep); border: none; border-top: 3px solid var(--color-secondary);
border-radius: 16px; padding: 40px 40px 52px;
box-shadow: 0 1px 2px rgba(11,33,71,0.10), 0 14px 34px rgba(11,33,71,0.14);
display: flex; flex-direction: column;
}
.home-page .home-why__quote::before {
content: "\201C"; position: absolute; top: -6px; left: 22px; z-index: 0;
font-family: var(--h-font-display); font-weight: 700; font-size: 150px; line-height: 1;
color: rgba(169, 198, 242, 0.20); margin: 0; pointer-events: none;
}
.home-page .home-why__quote blockquote {
position: relative; z-index: 1; margin: 30px 0 0;
font-family: var(--h-font-display); font-weight: 600; font-size: 28px; line-height: 1.45; color: #fff;
}
.home-page .home-why__quote figcaption {
position: relative; z-index: 1; margin-top: auto; padding-top: 28px;
font: 500 14px/1.4 var(--font-sans); color: var(--color-blue-600);
}
.home-page .home-why__stats {
position: relative; z-index: 2; margin: -24px 22px 0;
background: var(--h-blue-panel); border: 1px solid var(--border-muted); border-radius: 12px;
padding: 20px 8px; box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 12px 30px rgba(25,71,140,0.12);
}
.home-page .home-why__stat + .home-why__stat { border-left: 1px solid rgba(25,71,140,0.14); }
.home-page .home-why__stat-num { font-size: 24px; }
.home-page .home-why__stat-label { font-size: 12px; margin-top: 5px; }
/* Testimonial (navy) card refinements — stats panel unchanged. */
.home-page .home-why__quote { justify-content: center; padding: 44px 40px 60px; }
/* Larger decorative quote mark (~80-90px visible; glyph is ~26% of font-size). */
.home-page .home-why__quote::before { font-size: 300px; top: -58px; left: 20px; color: rgba(169,198,242,0.18); }
/* Subtle oversized Power Texas mark, lower-right background watermark. */
.home-page .home-why__quote::after {
content: ""; position: absolute; right: -34px; bottom: -34px; width: 230px; height: 230px;
background: url('assets/logo-mark.svg') center / contain no-repeat; opacity: 0.06;
z-index: 0; pointer-events: none;
}
.home-page .home-why__quote blockquote { position: relative; z-index: 1; margin: 0; font-size: 31px; line-height: 1.4; }
.home-page .home-why__quote figcaption { position: relative; z-index: 1; margin-top: 24px; padding-top: 0; }
/* Quote mark: true curved opening quotation mark in a serif face (Georgia).
Size preserved (~78px visible → Georgia @229px); color/position unchanged. */
.home-page .home-why__quote::before { content: "\201C"; font-family: Georgia, "Times New Roman", serif; font-size: 229px; }
/* Move the quote mark fully inside the card (~28px top / ~32px left, unclipped)
and drop the testimonial content below it with clear space. */
.home-page .home-why__quote { justify-content: flex-start; padding: 132px 40px 40px; }
.home-page .home-why__quote::before { top: -45px; left: 22px; }
.home-page .home-why__quote::before { top: 46px; left: -8px; }
.home-page .home-why__quote::before { top: 37px; left: 0; }
/* Testimonial composition: shorter navy card starting at the H2 midpoint,
bottom + stats near current, quote/attribution rebalanced, mark left aligned
to the testimonial text. */
.home-page .home-why__wrap { align-items: start; }
@media (min-width: 900px) { .home-page .home-why__right { margin-top: 78px; } }
.home-page .home-why__quote { flex: none; min-height: 373px; justify-content: center; padding: 96px 40px 40px; }
.home-page .home-why__quote::before { top: 37px; left: 23px; }
/* Nudge quote mark up so it clears the testimonial text; add a faint divider
(text-width) between the testimonial and the attribution. */
.home-page .home-why__quote::before { top: 20px; }
.home-page .home-why__quote figcaption { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); }
/* Testimonial card: reuse the hero's underlying navy gradient (its base color
layer, not the swirl/vignette texture); lift the quote mark ~16px for clear
separation from the testimonial text (kept fully inside the card). */
.home-page .home-why__quote { background: linear-gradient(135deg, var(--h-navy-1) 0%, var(--h-navy-2) 50%, var(--h-navy-3) 100%); }
.home-page .home-why__quote::before { top: 4px; }
/* How It Works — refinements: taller section (+~60px via top/bottom padding),
slightly larger H2 and step numbers, more room between the H2 and the steps,
and a touch more space between each step title and its description.
Background, copy, three-column structure and connectors are unchanged. */
.home-page .home-how { padding: 86px 0; }
.home-page .home-how__title { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 44px; }
.home-page .home-how__stepnum { font-size: 50px; }
.home-page .home-how__step-h { margin: 0 0 10px; }
@media (max-width: 768px) {
.home-page .home-how { padding: 62px 0; }
.home-page .home-how__title { margin-bottom: 36px; }
}
/* ============================================================================
Featured plan cards — VISUAL TEST (homepage-only): replace the full-width
light-blue header bar with a compact upper-left attribute tag, and add a
little more vertical breathing room between tag, logo, name and pricing.
Text is unchanged (kept via the existing .plan-type-pill::before content).
Card size, section bg, pricing, buttons, disclosure and PlanCards.jsx are
untouched. Homepage-scoped only. */
.home-page .plans-grid .plan,
.home-page .plans-grid .plan--popular { padding-top: 18px; gap: 14px; }
.home-page .plan .plan-type-pill {
align-self: flex-start; /* sit at the upper-left, don't stretch */
display: inline-block; width: auto; /* only as wide as its content */
margin: 0; /* drop the full-width edge-to-edge breakout */
padding: 5px 10px; /* compact but comfortable */
border-radius: 6px; /* subtle rounding */
background: var(--bg-brand-soft); color: var(--color-primary); /* soft-blue + navy */
}
/* ============================================================================
Featured Electricity Plans — VISUAL TEST (homepage-only): red eyebrow +
new H2 copy, callout-style plan tags, and more section breathing room.
Nothing outside .home-plans is touched; PlanCards.jsx untouched. */
/* 1. Eyebrow — match the homepage's existing eyebrow language (why/how). */
.home-page .home-plans__eyebrow {
margin: 0 0 14px; font: 700 12px/1 var(--font-sans); letter-spacing: 0.15em;
text-transform: uppercase; color: var(--color-secondary); font-family: var(--font-sans);
}
/* Sit the eyebrow tight above the H2 (drop the old title padding-top gap). */
.home-page .home-plans__title { padding-top: 0; }
/* 2. Plan tags — read as plan callouts, not rounded pills:
smaller radius + thin red left accent; still compact, content-width,
soft-blue fill + navy text (unchanged). */
.home-page .plan .plan-type-pill {
border-radius: 3px;
border-left: 3px solid var(--color-secondary);
padding: 5px 10px 5px 11px;
}
/* 3. Section spacing — ~25px more above the heading, ~30px more below the
disclosure (section padding; panel padding is already neutralized to 0). */
.home-page .home-plans { padding-top: 65px; padding-bottom: 72px; }
@media (min-width: 1024px) {
.home-page .home-plans { padding-top: 105px; padding-bottom: 112px; }
}
/* Featured Plans — VISUAL TEST: "View All Plans →" moved below the cards,
centered, above the disclosure. Same red secondary text-link treatment. */
.home-page .home-plans__toprow { justify-content: center; margin: 28px 0 0; }
/* Featured Plans — VISUAL TEST: below-cards row places the disclosure on the
left and "View All Plans →" on the right (aligned to the right card's edge),
both on the same line. */
.home-page .home-plans__footrow {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: 16px 24px; margin-top: 28px;
}
.home-page .home-plans__footrow .home-plans__disclosure { margin: 0; }
/* Featured Plans — VISUAL TEST: double the space below the H2 (before the cards):
mobile 12px→24px, desktop 20px→40px. */
.home-page .home-plans__title { margin-bottom: 24px; }
@media (min-width: 1024px) { .home-page .home-plans__title { margin-bottom: 40px; } }
/* Featured Plans — VISUAL TEST: add the same increment again below the H2
(mobile 24px→36px, desktop 40px→60px). */
.home-page .home-plans__title { margin-bottom: 36px; }
@media (min-width: 1024px) { .home-page .home-plans__title { margin-bottom: 60px; } }
/* Featured Plans — VISUAL TEST: very subtle cool-blue wash on the upper portion
of each card (tag/logo/name area), fading to pure white before the pricing.
Also drop the red vertical accent from the compact tags. Card size, borders,
shadows, content, spacing and section bg all unchanged. Homepage-scoped only. */
.home-page .plans-grid .plan {
background-color: #fff;
background-image: linear-gradient(180deg, rgba(154,191,230,0.14) 0%, rgba(154,191,230,0) 160px);
}
.home-page .plan .plan-type-pill { border-left: 0; padding: 5px 10px; }
/* Featured Plans — VISUAL TEST: make "Plan details ↗" read as a secondary
action — smaller, medium weight, navy kept, no permanent underline (hover
only), small subtle external-link icon. Homepage-scoped only. */
.home-page .plan .plan-foot a { font-size: 11.5px; font-weight: 500; text-decoration: none; }
.home-page .plan .plan-foot a:hover { text-decoration: underline; }
.home-page .plan .plan-foot a svg { width: 12px; height: 12px; opacity: 0.75; }
/* ============================================================================
Why Power Texas — VISUAL EXPERIMENT (homepage-only). Left: editorial numbered
list (red 01/02/03, navy headings, small copy, thin dividers, no icons).
Right: branded convergence visual (CSS/SVG) replacing the testimonial/stats.
Section stays two-column + white bg + ~same height. Only .home-why-scoped. */
.home-page .home-why__list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--border-muted); }
.home-page .home-why__item { padding: 24px 0; border-bottom: 1px solid var(--border-muted); }
.home-page .home-why__h { margin: 0; font: 700 17px/1.35 var(--h-font-display, var(--font-sans)); letter-spacing: -0.01em; color: var(--color-primary); }
.home-page .home-why__num { color: var(--color-secondary); font-weight: 700; letter-spacing: 0.04em; margin-right: 4px; }
.home-page .home-why__p { margin: 7px 0 0; max-width: 44ch; font: 400 14px/1.6 var(--font-sans); color: var(--fg-muted); }
/* Right column now centers the branded visual (overrides prior card layout). */
.home-page .home-why__right { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin-top: 0; }
@media (min-width: 900px) { .home-page .home-why__right { margin-top: 0; } }
.home-page .home-why__viz { width: 100%; max-width: 460px; }
.home-page .home-why__viz svg { display: block; width: 100%; height: auto; }
.home-page .home-why__viz-cap { margin: 20px 0 0; text-align: center; font: 500 14px/1.45 var(--font-sans); color: var(--fg-muted); }
/* ============================================================================
Why Power Texas — VISUAL EXPERIMENT v2 (homepage-only). Left: message only
(eyebrow / H2 / copy), generous whitespace. Right: three differentiators as
ONE connected vertical composition — thin subtle line + small red nodes, navy
headings, muted copy, no numbers, no cards, no icons. Behind the right column:
a large, cropped, very-faint soft-blue Power Texas pinwheel as brand texture.
Slightly more section breathing room. Only .home-why-scoped. */
.home-page .home-why { padding: 64px 0; }
@media (min-width: 1024px) { .home-page .home-why { padding: 96px 0; } }
@media (min-width: 900px) { .home-page .home-why__wrap { align-items: center; } }
.home-page .home-why__copy { margin: 0; max-width: 42ch; font: 400 17px/1.7 var(--font-sans); color: var(--fg-muted); }
/* Right column + faint cropped pinwheel brand texture (masked so it reads as a
flat soft-blue silhouette; positioned partly off-canvas and cropped). */
.home-page .home-why__right { position: relative; overflow: hidden; display: block; margin-top: 0; padding: 4px 0; }
@media (min-width: 900px) { .home-page .home-why__right { margin-top: 0; } }
.home-page .home-why__right::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
width: 560px; height: 560px; top: 50%; right: -210px; transform: translateY(-50%);
background: var(--color-blue-600);
-webkit-mask: url('assets/logo-mark.svg') no-repeat center / contain;
mask: url('assets/logo-mark.svg') no-repeat center / contain;
opacity: 0.10;
}
/* Connected vertical composition */
.home-page .home-why__diffs { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.home-page .home-why__diff { position: relative; padding-left: 34px; }
.home-page .home-why__diff + .home-why__diff { margin-top: 44px; }
.home-page .home-why__diff-dot { position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 4px var(--bg-page); }
.home-page .home-why__diff:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 19px; bottom: -55px; width: 2px; background: rgba(25,71,140,0.14); }
.home-page .home-why__diff-h { margin: 0; font: 700 18px/1.3 var(--h-font-display, var(--font-sans)); letter-spacing: -0.01em; color: var(--color-primary); }
.home-page .home-why__diff-p { margin: 6px 0 0; max-width: 40ch; font: 400 14.5px/1.6 var(--font-sans); color: var(--fg-muted); }
/* Why Power Texas — approved layout kept; visual SCALE adjustments only (homepage).
Taller section (more space up top), larger H2 with more breathing room, more
open differentiators (longer connector), and a slightly larger, more-cropped
faint pinwheel. No new content/colors/elements. Only .home-why-scoped. */
/* 1. Taller section — more of the added space at the top than the bottom. */
.home-page .home-why { padding: 92px 0 72px; }
@media (min-width: 1024px) { .home-page .home-why { padding: 162px 0 112px; } }
/* 2. Larger H2 (+~9%) + a little more breathing room on the left. */
.home-page .home-why__eyebrow { margin-bottom: 18px; }
.home-page .home-why__title { font-size: clamp(33px, 4.9vw, 50px); margin-bottom: 22px; }
/* 3. Open up the differentiators and extend the connecting line to match. */
@media (min-width: 900px) { .home-page .home-why__wrap { align-items: center; } }
.home-page .home-why__diff + .home-why__diff { margin-top: 80px; }
.home-page .home-why__diff:not(:last-child)::after { bottom: -91px; }
/* 4. Brand texture — slightly larger, more crop off right/bottom, still faint. */
.home-page .home-why__right::before { width: 660px; height: 660px; right: -260px; transform: translateY(-42%); }
/* ============================================================================
Why Power Texas — RIGHT SIDE ONLY (visual experiment). Interactive stacked
differentiator panels: one always active (hover/focus on desktop, tap
accordion on mobile). Replaces the connector-line + red-dot timeline. Left
column, section height, white bg and the faint pinwheel are unchanged.
No cards/borders, icons, numbering, illustrations, stats. Homepage-scoped. */
.home-page .home-why__panels { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.home-page .home-why__panel {
display: block; width: 100%; text-align: left; border: 0; background: transparent;
font-family: inherit; color: var(--color-primary); cursor: pointer; position: relative;
border-radius: 14px; padding: 30px 24px; -webkit-appearance: none; appearance: none;
transition: background 320ms cubic-bezier(0.2,0,0,1), padding 320ms cubic-bezier(0.2,0,0,1);
}
.home-page .home-why__panel:hover:not(.is-active) { background: rgba(222,234,248,0.5); }
.home-page .home-why__panel:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 3px; }
.home-page .home-why__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-page .home-why__panel-title { font: 700 19px/1.3 var(--h-font-display, var(--font-sans)); letter-spacing: -0.01em; color: var(--color-primary); transition: font-size 320ms cubic-bezier(0.2,0,0,1); }
.home-page .home-why__panel-arrow { flex-shrink: 0; font-size: 18px; line-height: 1; color: var(--color-primary); opacity: 0.4; transition: opacity 300ms ease, transform 300ms ease; }
.home-page .home-why__panel-desc {
display: block; max-width: 42ch; margin: 0; font: 400 15px/1.6 var(--font-sans); color: var(--fg-muted);
max-height: 0; opacity: 0; overflow: hidden;
transition: max-height 360ms cubic-bezier(0.2,0,0,1), opacity 300ms ease, margin-top 360ms cubic-bezier(0.2,0,0,1);
}
/* Active panel — substantial soft-blue surface, larger bolder title, revealed copy. */
.home-page .home-why__panel.is-active { background: var(--bg-brand-soft); padding: 34px 24px 36px; }
.home-page .home-why__panel.is-active .home-why__panel-title { font-size: 24px; }
.home-page .home-why__panel.is-active .home-why__panel-arrow { opacity: 0; transform: translateX(6px); }
.home-page .home-why__panel.is-active .home-why__panel-desc { max-height: 160px; opacity: 1; margin-top: 12px; }
/* Restrained red accent (small kicker) on the active panel. */
.home-page .home-why__panel.is-active::before { content: ""; position: absolute; left: 24px; top: 18px; width: 26px; height: 3px; border-radius: 2px; background: var(--color-secondary); }
/* Pinwheel shifts/rotates VERY slightly when the active differentiator changes. */
.home-page .home-why__right::before {
transition: transform 600ms cubic-bezier(0.2,0,0,1);
transform: translate(0, calc(-42% + (var(--pw-i, 0) * -5px))) rotate(calc(var(--pw-i, 0) * 1.5deg));
}
/* Why Power Texas — VISUAL EXPERIMENT: (1) move the faint pinwheel out of the
right panel area to a section-level background behind the H2 (bleeds off the
left/top, extremely low opacity, texture only — not in any container).
(2) give the inactive differentiators a restrained persistent surface so they
read as intentional interactive zones. Homepage-scoped; nothing else changed. */
/* (1) Remove the right-column pinwheel; add it as a section-level texture left. */
.home-page .home-why__right::before { content: none; }
.home-page .home-why { position: relative; overflow: hidden; }
.home-page .home-why__wrap { position: relative; z-index: 1; }
.home-page .home-why::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
width: 780px; height: 780px; left: -300px; top: -180px;
background: var(--color-blue-600);
-webkit-mask: url('assets/logo-mark.svg') no-repeat center / contain;
mask: url('assets/logo-mark.svg') no-repeat center / contain;
opacity: 0.06;
}
/* (2) Inactive differentiators — restrained persistent surface + clearer hover. */
.home-page .home-why__panel:not(.is-active) { background: rgba(25,71,140,0.03); }
.home-page .home-why__panel:hover:not(.is-active) { background: rgba(222,234,248,0.65); }
/* Why Power Texas — RIGHT-SIDE refinement: more presence on the active feature
surface; inactive panels become clean editorial rows (no card) with a thin
divider. Interaction unchanged. Homepage-scoped; nothing else touched. */
/* Animate radius too, so the soft-blue surface resolves smoothly on activate. */
.home-page .home-why__panel { transition: background 320ms cubic-bezier(0.2,0,0,1), padding 320ms cubic-bezier(0.2,0,0,1), border-radius 320ms cubic-bezier(0.2,0,0,1); }
/* Active — ~10-15% more height/padding + more breathing room (accent kept). */
.home-page .home-why__panel.is-active { padding: 40px 26px 42px; border-radius: 14px; }
.home-page .home-why__panel.is-active .home-why__panel-desc { margin-top: 16px; }
/* Inactive — clean editorial rows: transparent, no rounded container, navy
headline, right arrow, thin subtle divider, generous vertical padding. */
.home-page .home-why__panel:not(.is-active) {
background: transparent; border-radius: 0; padding: 26px 26px;
border-bottom: 1px solid rgba(25,71,140,0.12);
}
.home-page .home-why__panel:last-child:not(.is-active) { border-bottom: 0; }
.home-page .home-why__panel:hover:not(.is-active) { background: transparent; }
.home-page .home-why__panels { gap: 6px; }
/* ============================================================================
Why Power Texas — RIGHT SIDE scroll-driven proof points (prototype).
Left column sticky through the (taller) section; each proof panel fades in and
counts up once as it scrolls into view. Pinwheel/left/copy/bg unchanged.
overflow:clip (not hidden) keeps the pinwheel cropped without breaking sticky.
Homepage-scoped only. */
.home-page .home-why { overflow: clip; }
@media (min-width: 900px) {
.home-page .home-why { padding-top: 96px; padding-bottom: 84px; }
.home-page .home-why__wrap { align-items: start; }
.home-page .home-why__left { position: sticky; top: 108px; align-self: start; }
}
.home-page .home-why__proofs { display: flex; flex-direction: column; gap: 22px; }
.home-page .home-why__proof {
position: relative; background: var(--bg-brand-soft); border-radius: 16px;
padding: 32px 34px;
opacity: 0; transform: translateY(18px);
transition: opacity 450ms cubic-bezier(0.2,0,0,1), transform 450ms cubic-bezier(0.2,0,0,1);
}
.home-page .home-why__proof.is-shown { opacity: 1; transform: none; }
.home-page .home-why__proof::before { content: ""; position: absolute; left: 34px; top: 22px; width: 28px; height: 3px; border-radius: 2px; background: var(--color-secondary); }
.home-page .home-why__proof-title { margin: 14px 0 12px; font: 700 15px/1.3 var(--font-sans); letter-spacing: 0.02em; color: var(--color-primary); }
.home-page .home-why__proof-num { margin: 0; font: 800 58px/1 var(--h-font-display, var(--font-sans)); letter-spacing: -0.02em; color: var(--color-primary); }
.home-page .home-why__proof-plus { font-size: 0.55em; font-weight: 700; margin-left: 3px; vertical-align: 8px; }
.home-page .home-why__proof-unit { margin: 12px 0 0; font: 600 17px/1.35 var(--font-sans); color: var(--color-primary); }
.home-page .home-why__proof-copy { margin: 10px 0 0; max-width: 42ch; font: 400 15px/1.6 var(--font-sans); color: var(--fg-muted); }
/* Enable position:sticky on the homepage: keep the same horizontal-clip guard as
`.home-page { overflow-x: hidden }` but use `clip`, which does NOT create a
scroll container (hidden forces overflow-y:auto, which disables sticky). Same
visual clipping; unblocks the Why left-column sticky. */
.home-page { overflow-x: clip; }
/* ============================================================================
Why Power Texas — RIGHT SIDE v3 (prototype): one proof open at a time.
Active = crisp white feature surface (subtle white→cool-blue, blue-gray border,
restrained shadow, red accent line, large navy number + unit on one row).
Collapsed = compact editorial rows (number | title | arrow), thin divider.
White-dominant, navy + red accents. Homepage-scoped; left/pinwheel/bg unchanged. */
.home-page .home-why__feats { display: flex; flex-direction: column; gap: 10px; }
.home-page .home-why__feat {
display: block; width: 100%; text-align: left; border: 0; background: transparent;
font-family: inherit; color: var(--color-primary); cursor: pointer; position: relative;
padding: 18px 8px; border-radius: 10px;
border-bottom: 1px solid rgba(25,71,140,0.12);
-webkit-appearance: none; appearance: none;
transition: background 300ms cubic-bezier(0.2,0,0,1), padding 300ms cubic-bezier(0.2,0,0,1),
box-shadow 300ms ease, border-color 300ms ease;
}
.home-page .home-why__feat:last-child { border-bottom: 0; }
.home-page .home-why__feat:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 2px; }
/* Collapsed row */
.home-page .home-why__feat-head { display: flex; align-items: baseline; gap: 16px; }
.home-page .home-why__feat-num-sm { flex: 0 0 64px; font: 800 21px/1 var(--h-font-display, var(--font-sans)); letter-spacing: -0.01em; color: var(--color-primary); }
.home-page .home-why__feat-title { flex: 1 1 auto; font: 700 16px/1.3 var(--font-sans); color: var(--color-primary); }
.home-page .home-why__feat-arrow { flex: 0 0 auto; font-size: 16px; line-height: 1; color: var(--color-primary); opacity: 0.4; transition: opacity 200ms ease; }
/* Expanded body (hidden until open) */
.home-page .home-why__feat-body { display: flex; align-items: baseline; gap: 16px; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height 380ms cubic-bezier(0.2,0,0,1), opacity 300ms ease, margin-top 380ms cubic-bezier(0.2,0,0,1); }
.home-page .home-why__feat-num { font: 800 52px/1 var(--h-font-display, var(--font-sans)); letter-spacing: -0.02em; color: var(--color-primary); }
.home-page .home-why__feat-plus { font-size: 0.5em; font-weight: 800; vertical-align: 0.5em; margin-left: 2px; }
.home-page .home-why__feat-unit { font: 600 17px/1.35 var(--font-sans); color: var(--color-primary); }
/* Open (active) feature surface */
.home-page .home-why__feat.is-open {
background: linear-gradient(180deg, #ffffff 0%, #F4F8FD 100%);
border: 1px solid var(--h-card-border, #DCE7F2);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 22px rgba(25,71,140,0.06);
padding: 30px 26px 28px;
}
.home-page .home-why__feat.is-open::before { content: ""; position: absolute; left: 26px; top: 18px; width: 26px; height: 3px; border-radius: 2px; background: var(--color-secondary); }
.home-page .home-why__feat.is-open .home-why__feat-num-sm { display: none; }
.home-page .home-why__feat.is-open .home-why__feat-arrow { display: none; }
.home-page .home-why__feat.is-open .home-why__feat-title { font: 700 12px/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.home-page .home-why__feat.is-open .home-why__feat-body { max-height: 90px; opacity: 1; margin-top: 12px; }
/* ============================================================================
Why Power Texas — RIGHT SIDE v4 (prototype): fixed-height 3-slot wheel/carousel.
Content rotates through fixed top/center/bottom slots; center always expanded.
Component height is constant (no layout jump). Wheel + click/tap rotate (one
rotation per gesture; page scroll never hijacked). White-dominant, navy + red.
Homepage-scoped; left/pinwheel/section bg unchanged. */
.home-page .home-why__wheel { position: relative; width: 100%; }
.home-page .home-why__slot {
position: absolute; left: 0; right: 0; top: 0; display: block; text-align: left; overflow: hidden;
border: 0; background: transparent; font-family: inherit; color: var(--color-primary);
cursor: pointer; padding: 16px 10px; border-radius: 12px; -webkit-appearance: none; appearance: none;
transition: transform 440ms cubic-bezier(0.2,0,0,1), height 440ms cubic-bezier(0.2,0,0,1),
background 320ms ease, box-shadow 320ms ease, padding 320ms ease, border-color 320ms ease;
}
.home-page .home-why__slot.is-top { border-radius: 0; border-bottom: 1px solid rgba(25,71,140,0.12); }
.home-page .home-why__slot.is-bottom { border-radius: 0; border-top: 1px solid rgba(25,71,140,0.12); }
.home-page .home-why__slot:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 2px; }
/* Collapsed row */
.home-page .home-why__slot .home-why__slot-head { display: flex; align-items: baseline; gap: 16px; }
.home-page .home-why__slot .home-why__feat-num-sm { flex: 0 0 62px; font: 800 21px/1 var(--h-font-display, var(--font-sans)); letter-spacing: -0.01em; color: var(--color-primary); }
.home-page .home-why__slot .home-why__feat-title { flex: 1 1 auto; font: 700 16px/1.3 var(--font-sans); color: var(--color-primary); }
.home-page .home-why__slot .home-why__feat-arrow { flex: 0 0 auto; font-size: 15px; line-height: 1; color: var(--color-primary); opacity: 0.4; }
/* Expanded body (hidden unless center) */
.home-page .home-why__slot .home-why__feat-body { display: flex; align-items: center; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height 380ms cubic-bezier(0.2,0,0,1), opacity 300ms ease, margin-top 380ms cubic-bezier(0.2,0,0,1); }
.home-page .home-why__slot .home-why__feat-num { font: 800 50px/1 var(--h-font-display, var(--font-sans)); letter-spacing: -0.02em; color: var(--color-primary); }
.home-page .home-why__slot .home-why__feat-plus { font-size: 0.5em; font-weight: 800; vertical-align: 0.5em; margin-left: 2px; }
.home-page .home-why__slot .home-why__feat-div { display: none; }
.home-page .home-why__slot .home-why__feat-unit { font: 600 16px/1.4 var(--font-sans); color: var(--color-primary); }
/* Center (active) surface */
.home-page .home-why__slot.is-center {
background: linear-gradient(180deg, #ffffff 0%, #F4F8FD 100%);
border: 1px solid var(--h-card-border, #DCE7F2); border-radius: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 22px rgba(25,71,140,0.06);
padding: 26px 26px; cursor: default;
}
.home-page .home-why__slot.is-center::before { content: ""; position: absolute; left: 26px; top: 17px; width: 26px; height: 3px; border-radius: 2px; background: var(--color-secondary); }
.home-page .home-why__slot.is-center .home-why__feat-num-sm { display: none; }
.home-page .home-why__slot.is-center .home-why__feat-arrow { display: none; }
.home-page .home-why__slot.is-center .home-why__feat-title { font: 700 12px/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; }
.home-page .home-why__slot.is-center .home-why__feat-body { max-height: 84px; opacity: 1; margin-top: 16px; }
/* Use the panel width: number ~38%, subtle vertical divider, statement fills rest. */
.home-page .home-why__slot.is-center .home-why__feat-num { flex: 0 0 38%; }
.home-page .home-why__slot.is-center .home-why__feat-div { display: block; flex: 0 0 1px; align-self: stretch; margin: 2px 24px; background: rgba(25,71,140,0.16); }
.home-page .home-why__slot.is-center .home-why__feat-unit { flex: 1 1 auto; }
/* Why Power Texas + How It Works — small visual test (homepage-only):
1) pinwheel slightly more visible; 2) How It Works turns white and the pinwheel
bridges across the boundary; 3) more eyebrow→H2 breathing room. */
/* 1. Pinwheel a touch more visible (still subtle texture). */
.home-page .home-why::before { opacity: 0.12; }
/* 2. Continuous white background + let the pinwheel bleed vertically across the
boundary. overflow-x stays clipped (no h-scroll / left crop kept, sticky safe);
overflow-y visible so the mark can extend into How It Works; Why paints above. */
.home-page .home-why { overflow: clip visible; position: relative; z-index: 1; }
.home-page .home-how { background: #fff; position: relative; z-index: 0; }
/* 3. More space between the eyebrow and the H2 (H2 moves down; eyebrow stays). */
.home-page .home-why__eyebrow { margin-bottom: 30px; }
/* Pinwheel positioning test: move the SAME oversized pinwheel down so it bridges
Why Power Texas → How It Works. Kept same size/opacity/left-crop. Positioned so
nothing bleeds upward into Featured Plans. */
.home-page .home-why::before { top: -20px; }
/* How It Works — visual polish (homepage-only): pale-blue connective line broken
by the numbers + arrows, red arrows, and a clearer color hierarchy. Layout,
spacing, copy, sizes unchanged. */
/* Connective line runs at the numbers' center; numbers/arrows punch white gaps. */
.home-page .home-how__steps { position: relative; }
.home-page .home-how__steps::before {
content: ""; position: absolute; z-index: -1; top: 25px; left: 16.5%; right: 16.5%;
height: 2px; background: var(--color-blue-700);
}
.home-page .home-how__stepnum { display: block; width: fit-content; margin: 0 auto 12px; position: relative; background: #fff; padding: 0 16px; }
.home-page .home-how__conn { color: var(--color-secondary); background: #fff; padding: 14px 12px 0; }
/* Supporting copy → neutral dark gray (titles stay navy, numbers stay bright blue). */
.home-page .home-how__step-p { color: var(--fg-muted); }
/* No horizontal connector on the stacked mobile layout. */
@media (max-width: 768px) { .home-page .home-how__steps::before { display: none; } }
/* Electricity Shopping Guides — editorial polish (homepage-only). Keeps the
asymmetric layout (large featured left, three rows right); no cards. */
/* Header: heading text left, "View All Guides" secondary link right. */
.home-page .home-guides__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.home-page .home-guides__head-text { min-width: 0; }
.home-page .home-guides__viewall { flex-shrink: 0; color: var(--color-secondary); font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.home-page .home-guides__viewall:hover { color: var(--color-red-100); }
/* Featured: a little more presence (wider column + stronger headline). */
@media (min-width: 1024px) { .home-page .home-guides__grid { grid-template-columns: 1.15fr 1fr; } }
.home-page .home-feature__title { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; }
/* Right rows: editorial (thumb left, content middle, arrow right); divider, no card. */
.home-page .home-article { gap: 20px; padding: 28px 0; margin: 0; border-radius: 0; border-bottom: 1px solid #EAEEF3; }
.home-page .home-article:hover { background: transparent; }
.home-page .home-article__thumb img { transition: transform 250ms var(--ease-standard); }
.home-page .home-article:hover .home-article__thumb--photo img,
.home-page .home-article:focus-visible .home-article__thumb--photo img { transform: scale(1.06); }
.home-page .home-article:hover .home-article__arrow,
.home-page .home-article:focus-visible .home-article__arrow { transform: translateX(4px); }
/* Electricity Shopping Guides — v2 refinement (homepage-only): thumbnails removed
from the three right rows (featured image is the only image); "View All Guides"
moved beneath the list. */
.home-page .home-guides__head { display: block; }
.home-page .home-articles .home-guides__viewall { align-self: flex-end; margin-top: 30px; }
/* Shopping Guides — refinement pass (homepage-only): more right-row padding,
left-align "View All Guides" with the article text, a little more bottom pad. */
.home-page .home-article { padding: 32px 0; }
.home-page .home-articles .home-guides__viewall { align-self: flex-start; margin-top: 28px; }
.home-page .home-guides { padding-bottom: 72px; }
@media (min-width: 1024px) { .home-page .home-guides { padding-bottom: 116px; } }
/* How It Works — a touch more space between the eyebrow and the H2 (+11px). */
.home-page .home-how__eyebrow { margin-bottom: 23px; }
/* ============================================================================
Closing conversion section (homepage-only): deep Power Texas blue final CTA
that bookends the hero and sits directly above the navy footer. Two-column on
desktop (copy left / ZIP form right), stacked on mobile. Large cropped, faint
pinwheel as background texture. Reuses the hero ZIP form + red CTA. */
.home-page .home-cta {
position: relative; overflow: clip;
background: linear-gradient(135deg, var(--h-navy-1) 0%, var(--h-navy-2) 55%, var(--h-navy-3) 100%);
padding: 60px 0;
}
/* Large cropped pinwheel entering from the left — subtle texture, behind content. */
.home-page .home-cta::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
width: 520px; height: 520px; left: -230px; top: 50%; transform: translateY(-50%);
background: var(--color-blue-500);
-webkit-mask: url('assets/logo-mark.svg') no-repeat center / contain;
mask: url('assets/logo-mark.svg') no-repeat center / contain;
opacity: 0.10;
}
.home-page .home-cta__wrap {
position: relative; z-index: 1;
max-width: 1100px; margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.home-page .home-cta__text { flex: 1 1 auto; min-width: 0; }
.home-page .home-cta__title {
margin: 0 0 8px; color: #fff; font-family: var(--h-font-display, var(--font-sans));
font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em;
}
.home-page .home-cta__sub { margin: 0; color: rgba(255,255,255,0.72); font: 400 16px/1.5 var(--font-sans); }
.home-page .home-cta__form { width: 100%; max-width: 460px; flex-shrink: 0; }
@media (max-width: 900px) {
.home-page .home-cta { padding: 40px 0; }
.home-page .home-cta__wrap { flex-direction: column; align-items: flex-start; gap: 24px; }
.home-page .home-cta__form { max-width: 100%; }
.home-page .home-cta::before { opacity: 0.07; left: -280px; }
}
/* CTA pinwheel bridges the CTA→footer boundary: allow vertical bleed (keep the
horizontal crop) and fade the lower portion so it dissolves into the footer
with no hard cutoff. A second mask layer hides the top (no bleed into Guides),
keeps the CTA band at current visibility, and fades into the footer. */
.home-page .home-cta { overflow: clip visible; z-index: 1; }
.home-page .home-cta::before {
-webkit-mask-image: url('assets/logo-mark.svg'), linear-gradient(to bottom, transparent 30%, #000 36%, #000 52%, transparent 64%);
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-position: center, center;
-webkit-mask-size: contain, 100% 100%;
-webkit-mask-composite: source-in;
mask-image: url('assets/logo-mark.svg'), linear-gradient(to bottom, transparent 30%, #000 36%, #000 52%, transparent 64%);
mask-repeat: no-repeat, no-repeat;
mask-position: center, center;
mask-size: contain, 100% 100%;
mask-composite: intersect;
}
/* Mobile hero (<=767px only): center the whole hierarchy and reduce the H1 ~20%
(38px -> 30px). Tablet (>=768px) and desktop are unaffected. Copy, font family,
weight, white color, and line-height are preserved. */
@media (max-width: 767px) {
.home-page .home-hero__inner { align-items: center; text-align: center; }
/* Mobile H1 bump ~+13% over 30px, with an intentional three-line headline:
Compare Texas
electricity plans.
Start saving today.
Both break spans switch to block here to force those breaks. */
.home-page .home-hero__h1 { font-size: 34px; }
.home-page .home-hero__h1 .sm-break,
.home-page .home-hero__h1 .lg-break { display: block; }
}
/* Mobile hero (<=767px): make the "Shop Business Energy Plans" link lighter —
slightly smaller and no longer bold. White color / centering / position kept. */
@media (max-width: 767px) {
.home-page .home-hero__biz { font-size: 13px; font-weight: 400; }
}
/* Mobile (<=767px): reduce the Featured Plans H2 ~15% (30px -> 25.5px). Weight,
navy color, left alignment, copy and spacing preserved. Tablet/desktop unchanged. */
@media (max-width: 767px) {
.home-page .home-plans__title { font-size: 25.5px; }
}
/* CTA section — MOBILE only (<=767px): drop the subcopy, narrow + center the
ZIP/CTA control ~9%, and rebalance spacing so the section keeps ~its current
height (feels spacious, not gappy). Tablet/desktop and the shared form unchanged. */
@media (max-width: 767px) {
.home-page .home-cta__sub { display: none; }
.home-page .home-cta { padding: 56px 0; }
.home-page .home-cta__wrap { gap: 40px; }
.home-page .home-cta__form { width: 91%; margin-left: auto; margin-right: auto; }
}
/* =========================================================================
Homepage hero H1 desktop size bump + mobile sticky "Compare Plans" CTA.
(The mobile H1 bump lives in the <=767 block above.) Placed at end of file
so the desktop H1 size wins over the earlier token-driven rule.
========================================================================= */
@media (min-width: 1024px) {
/* Largest size at which the full "Compare Texas electricity plans." still
fits one hero line (960px content) so desktop stays a clean two-line
headline; 64px+ overflows and wraps to three lines. */
.home-page .home-hero__h1 { font-size: 63px; } /* desktop H1 bump ~+1.6% over 62px */
}
/* Mobile-only sticky CTA — hidden by default; revealed once the hero Compare
Plans button leaves the viewport, hidden again when it (or the closing CTA
section) is on screen, and suppressed while the mobile nav drawer is open. */
.home-page .home-mobile-cta { display: none; }
@media (max-width: 767px) {
.home-page .home-mobile-cta {
display: block; position: fixed; z-index: 55;
left: 16px; right: 16px;
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none;
transition: opacity var(--dur-slow, .28s) var(--ease-out, ease),
transform var(--dur-slow, .28s) var(--ease-out, ease),
visibility var(--dur-slow, .28s) var(--ease-out, ease);
}
.home-page .home-mobile-cta.is-visible {
opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
/* Never show over the open mobile nav drawer. */
body:has(.site-nav__drawer.is-open) .home-page .home-mobile-cta {
opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none;
}
/* Same red CTA treatment as the hero Compare Plans button. */
.home-page .home-mobile-cta__btn {
width: 100%; height: 48px; border: none; cursor: pointer;
border-radius: var(--radius-lg);
color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
background: linear-gradient(to bottom, var(--h-red-1), var(--h-red-2));
box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 8px 22px rgba(166,30,51,0.28);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.home-page .home-mobile-cta__btn:hover { background: linear-gradient(to bottom, var(--h-red-hi-1), var(--h-red-hi-2)); }
}