/**
* PM Surya Ghar landing page.
* Scoped to .pm-surya-page — nothing here is shared with other templates.
*/
.pm-surya-page {
--pm-surya-brand: #182150;
--pm-surya-brand-50: #ecf1fb;
--pm-surya-surface: #f5f8fd;
--pm-surya-scrim: 44, 48, 69;
/* The header lays out inside Bootstrap's .container, so these two mirror it:
the same 12px inset and the same stepped max-widths (540/720/960/1140/
1320). Sections therefore share the header's left and right edge at every
width, instead of using a gutter of their own. */
--pm-surya-gutter: 12px;
--pm-surya-max: 1320px;
/* Text ramp from the section-02 design tokens (black/300–500). */
--pm-surya-ink-500: #1a1f38;
--pm-surya-ink-400: #2c3045;
--pm-surya-ink-300: #5d627c;
--pm-surya-ink-200: #9ea2b8;
/* Feature-tick blue. The export delivered these icons as flat images with no
colour token, so this is read off the render — adjust if the design system
names a different value. */
--pm-surya-icon: #2f38cf;
/* Eligibility ticks and their labels (section 06). */
--pm-surya-verified: #047653;
/* .navbar is position:fixed at height:5rem (header.css) and stays 5rem at
every breakpoint, so content has to clear it. The theme has no global
offset for this — each template compensates itself. */
--pm-surya-header-height: 5rem;
background-color: var(--pm-surya-surface);
/* Base family for anything that does not set its own — in practice the
shared FAQ component, whose tabs otherwise inherit Bootstrap's system-ui
and look wrong next to the EC and Home pages. Those templates get DM Sans
from global.css's `.revamp-page-template`, but that class also restyles h2
(Poppins / line-height 1.5 / 700) and would override the heading rhythm
each section sets below, so the family is set directly here instead. */
font-family: "DM Sans", sans-serif;
}
/* header.css opens with a GLOBAL `.material-symbols-outlined { font-size:18px;
margin-right:5px }`. That margin lands on every icon in these sections, on top
of the flex gaps set here — it inflated the round chips in section 03 to 53x48
and pushed their glyph off-centre, and turned the hero trust bar's 4px gap
into 9px. Neutralise it once; each section sets its own size and spacing. */
.pm-surya-page .material-symbols-outlined {
margin-right: 0;
}
/* ---------------------------------------------------------------- hero -- */
.pm-surya-hero {
position: relative;
margin-top: var(--pm-surya-header-height);
overflow: hidden;
/* The photo now comes from ACF only, so it can legitimately be absent. This
navy stands in for it: the headline, subtitle and trust bar are all light
on dark, and would be unreadable against the page's pale surface. */
background-color: rgb(var(--pm-surya-scrim));
}
.pm-surya-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
pointer-events: none;
}
/* Figma: linear-gradient(167.31deg, #2C3045 10.32%, rgba(44,48,69,.6) 34.61%,
rgba(44,48,69,0) 53.1%) over a 668px band starting 30px above the section. */
.pm-surya-hero__scrim {
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 668px;
background-image: linear-gradient(
167.31deg,
rgb(var(--pm-surya-scrim)) 10.32%,
rgba(var(--pm-surya-scrim), 0.6) 34.61%,
rgba(var(--pm-surya-scrim), 0) 53.1%
);
pointer-events: none;
}
.pm-surya-hero__inner {
position: relative;
max-width: var(--pm-surya-max);
height: 745px;
margin: 0 auto;
}
/* ------------------------------------------------------------ hero copy -- */
.pm-surya-hero__copy {
position: absolute;
top: 72px;
left: var(--pm-surya-gutter);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px; /* title → subtitle; the CTA adds 8px more below */
width: 855px;
max-width: calc(100% - (var(--pm-surya-gutter) * 2));
}
.pm-surya-hero__title {
margin: 0;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 56px;
line-height: 64px;
letter-spacing: -2.24px;
color: #fff;
}
.pm-surya-hero__subtitle {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.4;
letter-spacing: -0.96px;
color: #fff;
}
.pm-surya-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 8px; /* 16px flex gap + 8px = 24px per the design */
width: 345px;
max-width: 100%;
height: 50px;
padding: 12px 24px;
border-radius: 8px;
background-color: #fff;
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.28px;
color: #000;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-surya-hero__cta:hover,
.pm-surya-hero__cta:focus-visible {
color: #000;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(24, 33, 80, 0.24);
}
.pm-surya-hero__cta-icon {
flex-shrink: 0;
/* A Material Symbol now, not an ![]()
— there is no bundled arrow to fall
back to and the icon font is already loaded page-wide. */
font-size: 20px;
line-height: 1;
color: inherit;
}
/* ------------------------------------------------------------ trust bar -- */
.pm-surya-hero__trust {
position: absolute;
top: 654px;
left: var(--pm-surya-gutter);
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 12px 16px;
border-radius: 8px;
/* Frosted glass, blurred at the same 19px as the countdown card. The fill is
lighter than the comp's 72% so the photo reads through it as glass rather
than as a solid panel — the blur is what keeps the label text legible. */
background-color: rgba(255, 255, 255, 0.48);
-webkit-backdrop-filter: blur(19px);
backdrop-filter: blur(19px);
list-style: none;
}
/* Without backdrop-filter there is no blur to see through, so keep the panel
opaque enough to stay legible over the photo. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.pm-surya-hero__trust {
background-color: rgba(255, 255, 255, 0.85);
}
}
.pm-surya-hero__trust-item {
display: flex;
align-items: center;
gap: 4px; /* comp says 8px; tightened so the glyph sits closer to its label */
}
.pm-surya-hero__trust-item + .pm-surya-hero__trust-item {
padding-left: 12px;
border-left: 1px solid rgba(24, 33, 80, 0.24);
}
.pm-surya-hero__trust-icon {
font-size: 19px;
line-height: 1;
color: var(--pm-surya-brand);
}
/* Custom icon uploaded in ACF, used instead of the Material Symbol. */
.pm-surya-hero__trust-icon-img {
flex-shrink: 0;
width: 19px;
height: 19px;
object-fit: contain;
}
.pm-surya-hero__trust-label {
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: -0.28px;
color: var(--pm-surya-brand);
white-space: nowrap;
}
/* ------------------------------------------------------------ countdown -- */
.pm-surya-countdown {
position: absolute;
right: var(--pm-surya-gutter);
bottom: 48px;
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px;
border: 4px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
background-color: #fff;
background-clip: padding-box;
-webkit-backdrop-filter: blur(19px);
backdrop-filter: blur(19px);
}
.pm-surya-countdown__banner {
margin: 0;
padding: 10px 16px;
border-radius: 4px;
background-image: linear-gradient(
90deg,
var(--pm-surya-surface) 14.52%,
var(--pm-surya-brand-50) 107.58%
);
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1;
letter-spacing: -0.36px;
color: #000;
text-align: center;
}
/* The "Last day to Avail the offer: …" strip under the heading. */
.pm-surya-countdown__deadline {
margin: 0;
padding: 8px 12px;
border-radius: 4px;
background-color: var(--pm-surya-surface);
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.3;
letter-spacing: -0.3px;
color: var(--pm-surya-ink-300);
text-align: center;
}
.pm-surya-countdown__tiles {
display: flex;
gap: 8px;
}
.pm-surya-countdown__tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 98px;
height: 122px;
padding-top: 14px;
border-radius: 8px;
background-color: #fff;
}
.pm-surya-countdown__dial {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
}
.pm-surya-countdown__ring {
position: absolute;
inset: 0;
width: 74px;
height: 74px;
transform: rotate(-90deg);
}
.pm-surya-countdown__ring-track,
.pm-surya-countdown__ring-progress {
fill: none;
stroke-width: 2.5;
}
.pm-surya-countdown__ring-track {
stroke: var(--pm-surya-brand-50);
}
.pm-surya-countdown__ring-progress {
stroke: var(--pm-surya-brand);
stroke-linecap: round;
/* r=35 → circumference 219.91. JS overrides stroke-dashoffset each tick. */
stroke-dasharray: 219.91;
stroke-dashoffset: 219.91;
transition: stroke-dashoffset 0.4s ease;
}
.pm-surya-countdown__value {
position: relative;
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 1;
letter-spacing: -0.64px;
/* Same navy as the progress arc it sits inside. */
color: var(--pm-surya-brand);
}
.pm-surya-countdown__label {
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1;
letter-spacing: -0.28px;
color: var(--pm-surya-brand);
}
/* ------------------------------------------ trust carousel (phone) -- */
/* Replaces the trust bar below 768px, per the mobile comp. Hidden above that --
the desktop comp has no equivalent. A scroll-snap strip rather than a JS
slider, so it stays swipeable and keyboard-scrollable with no script. */
.pm-surya-trust-carousel {
display: none;
width: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.pm-surya-trust-carousel::-webkit-scrollbar {
display: none;
}
.pm-surya-trust-carousel__track {
display: flex;
gap: 12px;
/* Side padding centres the first and last pill instead of pinning them to
the edge, which is what produces the peeking neighbours in the comp. */
padding: 0 calc((100% - 295px) / 2);
margin: 0;
list-style: none;
}
.pm-surya-trust-carousel__item {
display: flex;
flex: 0 0 295px;
align-items: center;
justify-content: center;
gap: 4px; /* comp says 12px; matched to the desktop trust bar */
padding: 8px 16px;
border-radius: 8px;
/* Every pill carries the identical glass: one fill, one blur, full opacity.
The comp dimmed the off-centre pills (0.4 fill at 60%) against a 0.2 fill
for the centred one; that difference is deliberately dropped so the strip
reads as one consistent material. .is-active is still applied by the JS,
so a subtler active cue can be layered back on here if wanted. */
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(19px);
backdrop-filter: blur(19px);
scroll-snap-align: center;
}
/* No blur available: darken the fill so white text keeps its contrast against
the photo, since the blur is what was doing that job. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.pm-surya-trust-carousel__item {
background-color: rgba(0, 0, 0, 0.5);
}
}
.pm-surya-trust-carousel__icon {
flex-shrink: 0;
font-size: 19px;
line-height: 1;
color: #fff;
}
.pm-surya-trust-carousel__icon-img {
flex-shrink: 0;
width: 19px;
height: 19px;
object-fit: contain;
}
.pm-surya-trust-carousel__label {
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: -0.28px;
color: #fff;
white-space: nowrap;
}
/* ----------------------------------------------------------- responsive -- */
/* TABLET, 768–1199px. There is no tablet comp. This keeps the desktop's
left-aligned composition — it still has the width for it — but unpins the
absolutely-placed pieces so they stack in flow instead of colliding: at 768px
the countdown card alone is nearly half the viewport, so bottom-right
placement would sit on top of the headline. Copy, trust bar and countdown
therefore run down the page in reading order. */
/* Bootstrap's .container steps, mirrored so we track the header exactly. */
@media (max-width: 1399px) { .pm-surya-page { --pm-surya-max: 1140px; } }
@media (max-width: 1199px) { .pm-surya-page { --pm-surya-max: 960px; } }
@media (max-width: 991px) { .pm-surya-page { --pm-surya-max: 720px; } }
@media (max-width: 767px) { .pm-surya-page { --pm-surya-max: 540px; } }
@media (max-width: 575px) { .pm-surya-page { --pm-surya-max: 100%; } }
@media (max-width: 1199px) {
.pm-surya-hero__title {
font-size: 44px;
line-height: 52px;
letter-spacing: -1.76px;
}
.pm-surya-hero__inner {
/* Flex column so the unpinned children stack in reading order and,
crucially, hug their own content instead of stretching to full width
the way static block boxes would. */
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto;
padding: 72px var(--pm-surya-gutter) 48px;
}
.pm-surya-hero__copy,
.pm-surya-hero__trust,
.pm-surya-countdown {
position: static;
max-width: 100%;
}
.pm-surya-hero__copy {
width: 100%;
padding: 0;
}
.pm-surya-hero__trust {
margin-top: 40px;
flex-wrap: wrap;
}
.pm-surya-countdown {
align-self: flex-start;
margin-top: 32px;
}
/* The scrim is a fixed 668px band sized for the desktop hero; once the hero
grows taller in flow, cover the whole thing so the copy keeps its
contrast all the way down. */
.pm-surya-hero__scrim {
top: 0;
height: 100%;
}
}
/* PHONE, ≤767px — translated from the mobile comp (4137:85975), which is a
different composition rather than a narrowing of the desktop one: centred
copy, no countdown, and the trust bar reshaped into the carousel. */
@media (max-width: 767px) {
.pm-surya-hero__bg {
object-position: center bottom;
}
.pm-surya-hero__scrim {
top: 0;
height: 445px;
background-image: linear-gradient(
180deg,
rgb(var(--pm-surya-scrim)) 2.7%,
rgba(var(--pm-surya-scrim), 0.7) 39.33%,
rgba(var(--pm-surya-scrim), 0) 60.11%
);
}
.pm-surya-hero__inner {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
/* 541px is the photo area the comp gives the hero. The countdown band is
a flex child of this wrapper, so its height has to be added on top —
otherwise it eats into the 541 and the photo is left at ~349px. */
min-height: calc(541px + var(--pm-surya-countdown-band, 257px));
padding: 44px var(--pm-surya-gutter) 0;
}
.pm-surya-hero__copy {
gap: 8px;
align-items: center;
width: 100%;
max-width: 343px;
text-align: center;
}
.pm-surya-hero__title {
max-width: 309px;
font-size: 28px;
line-height: 1.2;
letter-spacing: -1.12px;
}
.pm-surya-hero__subtitle {
font-size: 14px;
line-height: 1.4;
letter-spacing: -0.56px;
}
.pm-surya-hero__cta {
width: 269px;
height: 44px;
margin-top: 8px;
padding: 12px 16px;
}
/* Per the mobile comp the trust bar becomes the carousel below. */
.pm-surya-hero__trust {
display: none;
}
/* The mobile comp omits the countdown, but it is the hero's main urgency
device and phones are most of the traffic, so it is kept — reflowed as a
full-bleed white band closing the hero, rather than a card floating over
the photo. The negative margins break it out of the inner's gutter. */
.pm-surya-countdown {
display: flex;
position: static;
gap: 8px;
width: calc(100% + (var(--pm-surya-gutter) * 2));
max-width: none;
margin: 24px calc(var(--pm-surya-gutter) * -1) 0;
padding: 20px var(--pm-surya-gutter) 24px;
border: 0;
border-radius: 0;
background-color: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.pm-surya-countdown__banner {
padding: 12px;
font-size: 18px;
letter-spacing: -0.36px;
}
.pm-surya-countdown__deadline {
font-size: 13px;
letter-spacing: -0.26px;
}
.pm-surya-countdown__tiles {
justify-content: space-between;
gap: 8px;
margin-top: 4px;
}
.pm-surya-countdown__tile {
flex: 1 1 0;
width: auto;
height: 118px;
padding-top: 8px;
}
.pm-surya-countdown__dial,
.pm-surya-countdown__ring {
width: 78px;
height: 78px;
}
.pm-surya-countdown__value {
font-size: 30px;
letter-spacing: -0.6px;
}
.pm-surya-countdown__label {
font-size: 15px;
}
.pm-surya-trust-carousel {
display: block;
/* Pushes the strip to the bottom of the hero regardless of how far the
headline wraps, which is where the comp puts it. */
margin-top: auto;
/* Break out of the inner's gutter so pills can bleed to the edges. */
margin-right: calc(var(--pm-surya-gutter) * -1);
margin-left: calc(var(--pm-surya-gutter) * -1);
padding-top: 32px;
padding-bottom: 24px;
width: calc(100% + (var(--pm-surya-gutter) * 2));
}
}
/* ==================================== 02 what is PM Surya Ghar Yojana == */
.pm-surya-about {
padding: 72px 0;
background-color: var(--pm-surya-surface);
}
.pm-surya-about__inner {
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-about__title {
max-width: 808px;
/* 48px below the title, not 36: the comp puts 95px between the title's and
the sub-heading's cap tops, and the section is 12px shorter than the comp
with 36. */
margin: 0 auto 48px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: -0.8px;
color: var(--pm-surya-brand);
text-align: center;
}
.pm-surya-about__body {
display: flex;
align-items: flex-start;
gap: 101px; /* 889 - 80 - 708 in the comp */
}
.pm-surya-about__copy {
flex: 1 1 auto;
max-width: 708px;
}
.pm-surya-about__heading {
margin: 0 0 8px;
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1.4;
letter-spacing: -0.64px;
color: var(--pm-surya-ink-400);
}
.pm-surya-about__text {
margin: 0;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4;
letter-spacing: -0.32px;
color: var(--pm-surya-ink-300);
}
.pm-surya-about__note-block {
display: flex;
flex-direction: column;
gap: 20px;
/* Narrower than the paragraph above it, per the comp. */
max-width: 555px;
margin-top: 36px;
}
.pm-surya-about__note {
margin: 0;
font-family: "Lato", sans-serif;
/* Lato on Google Fonts has no 500 — this renders as 400. Kept at 500 to
match the comp's "Lato Medium" so the intent survives if the weight is
ever self-hosted. */
font-weight: 500;
font-size: 18px;
line-height: 1.4;
letter-spacing: -0.36px;
color: var(--pm-surya-ink-400);
}
.pm-surya-about__features {
display: flex;
justify-content: space-between;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.pm-surya-about__feature {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.pm-surya-about__feature-icon {
font-size: 24px;
line-height: 1;
color: var(--pm-surya-icon);
}
.pm-surya-about__feature-icon-img {
width: 24px;
height: 24px;
object-fit: contain;
}
.pm-surya-about__feature-label {
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: -0.4px;
color: var(--pm-surya-ink-500);
}
.pm-surya-about__media {
flex: 0 1 473px;
/* Desktop 473x316 and mobile 343x229 are the same ratio, so one value
covers every breakpoint. */
aspect-ratio: 473 / 316;
margin: 0;
padding: 0;
border: 1px solid #fff;
border-radius: 16px;
background-color: #fff;
overflow: hidden;
}
.pm-surya-about__image {
display: block;
width: 100%;
height: 100%;
/* The comp insets a 473-square image by -21px inside the window; as a
fraction of the overflow that is ~13% from the top. */
object-fit: cover;
object-position: center 13%;
border-radius: 12px;
}
/* TABLET: the comp's 708 + 101 + 473 needs 1282px of content width, which does
not fit here, so the columns become fluid and the gap tightens. */
@media (max-width: 1199px) {
.pm-surya-about__body {
gap: 40px;
}
.pm-surya-about__media {
flex: 0 1 40%;
}
.pm-surya-about__title {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-about__heading {
font-size: 28px;
letter-spacing: -0.56px;
}
}
/* PHONE: per the mobile comp (14:1293) — single column, image above the copy,
features stacked as rows rather than side by side. */
@media (max-width: 767px) {
.pm-surya-about {
padding: 40px 0;
}
.pm-surya-about__title {
margin-bottom: 24px;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
color: var(--pm-surya-ink-500);
text-align: left;
}
.pm-surya-about__body {
flex-direction: column;
gap: 16px;
}
.pm-surya-about__media {
order: -1; /* comp puts the photo above the copy on phones */
flex: 0 0 auto;
width: 100%;
}
.pm-surya-about__heading {
font-size: 24px;
letter-spacing: -0.48px;
}
.pm-surya-about__note-block {
max-width: none;
}
.pm-surya-about__features {
flex-direction: column;
gap: 20px;
}
.pm-surya-about__feature {
flex-direction: row;
align-items: center;
}
}
/* ============================== 03 why go solar under the scheme ======== */
.pm-surya-why {
padding: 72px 0;
background-color: #fff;
}
.pm-surya-why__inner {
display: flex;
/* The comp top-aligns the copy against the taller (500px) image rather than
centring it. */
align-items: flex-start;
gap: 60px;
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-why__copy {
flex: 1 1 756px;
max-width: 756px;
}
.pm-surya-why__title {
max-width: 732px;
margin: 0 0 36px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
/* 1.5 (60px at 40px), not the 1.2 the other 40px headings use: this is the
one multi-line Poppins heading in the comp and its two lines are 60px
apart. Unitless so it still scales at the 34px tablet size. */
line-height: 1.5;
letter-spacing: -0.8px;
color: var(--pm-surya-ink-500);
}
.pm-surya-why__list {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.pm-surya-why__item {
display: flex;
align-items: center;
gap: 24px;
}
.pm-surya-why__chip {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
padding: 13.333px;
border-radius: 999px;
background-color: var(--pm-surya-brand-50);
}
.pm-surya-why__icon {
font-size: 21.333px;
line-height: 1;
color: var(--pm-surya-icon);
}
.pm-surya-why__icon-img {
display: block;
width: 21.333px;
height: 21.333px;
object-fit: contain;
}
.pm-surya-why__label {
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: -0.48px;
color: var(--pm-surya-ink-500);
}
.pm-surya-why__media {
flex: 0 0 383px;
width: 383px;
height: 500px;
margin: 0;
border-radius: 28.302px;
overflow: hidden;
}
.pm-surya-why__image {
display: block;
width: 100%;
height: 100%;
/* The comp lays a 533px-wide image into a 383px window anchored left, so the
right of the frame is what gets cropped away. */
object-fit: cover;
object-position: left center;
}
@media (max-width: 1199px) {
.pm-surya-why__inner {
gap: 40px;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-why__title {
margin-bottom: 40px;
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-why__label {
font-size: 20px;
letter-spacing: -0.4px;
}
.pm-surya-why__media {
flex: 0 1 320px;
width: auto;
height: 420px;
}
}
/* PHONE: per the mobile comp (14:1314) — no photo at all, tighter chips, and
the labels drop to SemiBold 20px with the icon aligned to the first line
rather than centred, since these wrap to two and three lines. */
@media (max-width: 767px) {
.pm-surya-why {
padding: 40px 0;
}
.pm-surya-why__inner {
display: block;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-why__copy {
max-width: none;
}
.pm-surya-why__title {
margin-bottom: 24px;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
}
.pm-surya-why__list {
gap: 16px;
}
.pm-surya-why__item {
align-items: flex-start;
gap: 8px;
}
.pm-surya-why__chip {
padding: 8px;
}
.pm-surya-why__icon {
font-size: 16px;
}
.pm-surya-why__icon-img {
width: 16px;
height: 16px;
}
.pm-surya-why__label {
font-weight: 600;
font-size: 20px;
letter-spacing: -0.4px;
}
.pm-surya-why__media {
display: none;
}
}
/* ============================== 04 PM Surya Ghar scheme achievements ==== */
/* The design separates several sections with a 4px full-bleed rule in brand/50
(Rectangle 3468150 and friends in the full-page frame). Add this class to any
section that needs one above it rather than emitting an empty divider node. */
.pm-surya-page .pm-surya-divided {
border-top: 4px solid var(--pm-surya-brand-50);
}
.pm-surya-stats {
padding: 72px 0;
background-color: #fff;
}
.pm-surya-stats__inner {
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-stats__title {
/* The comp leaves 48px between this title and the top of the bento. */
margin: 0 0 48px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: -0.8px;
color: var(--pm-surya-brand);
text-align: center;
}
/* The bento. Column widths are the comp's 491 / 330 / 421 expressed as fr, so
the whole thing scales without losing its proportions. The 45.1 lakh card
spans columns 2-3, whose combined width (330 + 24 + 421) is exactly the 775
the comp gives it. Designed for five cards in the documented order. */
.pm-surya-stats__grid {
display: grid;
grid-template-columns: 491fr 330fr 421fr;
gap: 24px;
margin: 0 0 12px;
padding: 0;
list-style: none;
}
.pm-surya-stats__card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 200px;
padding: 24px;
border-radius: 12px;
background-color: #f7fafe;
overflow: hidden;
isolation: isolate;
}
.pm-surya-stats__card:nth-child(5) {
grid-column: 2 / span 2;
}
/* Per-slot backgrounds, straight from the comp's gradients. */
/* Measured off the card comp and confirmed exactly: sweeping the background
pixels for the axis of least colour variance puts the gradient at 67deg mod
180, and the profile along it is dead linear from the navy composite
(#f6f6f8) to the orange one — the Figma angle and both stops reproduce the
sampled colour to better than 0.15/255 at every point. What was wrong was the
base underneath: these stops are only 4% opaque, and the comp composites them
over the section's white, not over the shared card's #f7fafe. Left on #f7fafe
the green channel lands ~5/255 low and the card reads cool instead of warm. */
.pm-surya-stats__card:nth-child(2) {
background-color: #fff;
background-image: linear-gradient(
246.94deg,
rgba(24, 33, 80, 0.04) 4.5%,
rgba(238, 122, 0, 0.04) 132.07%
);
}
/* Installations card. The 216.5deg is Figma's and it checks out — refitting the
axis off the card comp lands on 216.51deg. The *stops* did not: the comp's
layer is only ~0.41 alpha at its strong corner, not 0.5 at 27.54%, and its
hue drifts from #8DC6FF to #59ABFF rather than holding at one colour. Stated
at 0%/100% of the gradient line so both ends sit on the card instead of being
extrapolated. Still translucent over the shared #f7fafe, as the comp is: it
was exported with its alpha channel intact. */
.pm-surya-stats__card:nth-child(4) {
background-image: linear-gradient(
216.5deg,
rgba(141, 198, 255, 0.407) 0%,
rgba(89, 171, 255, 0.066) 100%
);
}
/* Unlike card 1's, these Figma numbers were checked against the card comp and
are correct, so they stay. The comp exports this layer with its 12% alpha
intact (a=31/255), so the RGB it carries is the full-strength ramp: fitting
the axis by minimising within-bucket colour variance lands on 105.74deg, and
the profile along it is flat #00BDFF to 28.3% then linear, reaching #998C00 at
101.1%. Predicted vs sampled is within ~1/255 per channel across the ramp. */
.pm-surya-stats__card:nth-child(5) {
background-image: linear-gradient(
105.74deg,
rgba(0, 189, 255, 0.12) 28.42%,
rgba(153, 140, 0, 0.12) 101.05%
);
}
/* The achievements card. Measured off the card comp rather than read out of
Figma: the background is a plain two-stop lavender ramp, sampled at 128deg
running #f5f4fc -> #efe7fb. The second stop lands at 70% because the comp
holds that colour flat across the last third of the card — anything past the
final stop clamps to it, which reproduces the plateau exactly. */
.pm-surya-stats__card:nth-child(1) {
background-color: #f5f4fc;
background-image: linear-gradient(128deg, #f5f4fc 0%, #efe7fb 70%);
}
/* Sized to sit whole inside the card, right-aligned and vertically centred.
NOTE: do not copy the comp's frame offsets (right:-46px, bottom:-57px, ...)
literally. In Figma those place a frame whose image is inset within it; an
![]()
fills its whole box, so the same numbers push the object itself off the
card and crop its base. These values reproduce the comp's *rendered*
proportions — roughly a 150px object in a 200px card. */
.pm-surya-stats__art {
position: absolute;
z-index: -1;
top: 50%;
right: 24px;
width: auto;
height: 150px;
max-width: 45%;
object-fit: contain;
transform: translateY(-50%);
pointer-events: none;
}
/* Measured off the card comp, not the Figma frame. The 498x400 source renders at
exactly 0.5x — 249x200 CSS px — with its top-left at 534,31 inside the 775x200
card, so the object is as tall as the card and hangs 8px past the right edge
and 31px past the bottom, both cropped by `overflow: hidden`. That bleed is
transparent padding only: no ink is lost. Derived by matching the two sparkles
(both are in the asset) and then every one of the 297 ink rows between comp
and asset — they agree on a pure translation at scale 1.000, max 1px error.
Note this asset is 498x400, not square like the other four. */
.pm-surya-stats__card:nth-child(5) .pm-surya-stats__art {
top: auto;
right: -8px;
bottom: -31px;
height: 200px;
transform: none;
}
/* Card 1's trophy is not inset and not centred — it sits in the bottom-right
corner and bleeds slightly off both edges, so `overflow: hidden` shaves a few
pixels off its base. Derived by matching two features of the artwork (its
widest row and the narrowest point of the stem) between the comp and the
asset: both put the render at 0.473x of the 324px source, i.e. 154px, with
its ink ending exactly on the card's right edge. */
.pm-surya-stats__card:nth-child(1) .pm-surya-stats__art {
top: auto;
right: -10px;
bottom: -15px;
height: 154px;
max-width: none;
transform: none;
}
/* Card 2's rupee is far larger than the default and hangs well off the bottom
and right of the 330x200 slot. The 452px source lands 1:1 on the 2x comp —
the widest row, the stem width and the neck all agree, and a mask cross-
correlation locks the placement to a single pixel — so it renders at exactly
half size, 226px, with its box at left 166 / top 31. That is right -62 /
bottom -57, and `overflow: hidden` does the rest. max-width has to go: 45% of
this narrow card is only 148px. */
.pm-surya-stats__card:nth-child(2) .pm-surya-stats__art {
top: auto;
right: -62px;
bottom: -57px;
height: 226px;
max-width: none;
transform: none;
}
/* Card 3's bolt. The 454px source is square but its ink is a 224x344 portrait,
so sizing by height is not comparable to the near-square trophy on card 1 —
a height that looks right for the ink leaves the frame far taller than the
card. Matched by mask cross-correlation against the 2x comp: the best fit is
the source at 454 comp px (IoU 0.968, next-best size 2px away at 0.951), i.e.
exactly half size, 227px, with its box at left 244 / top 25 of the 421x200
card. Row widths confirm it — top of the bolt src y54 -> comp y104 and the
base plate's widest row src y336 -> comp y386, a separation of 282 in both
(scale 1.000), with that row 186px wide in both (scale 1.000). That puts the
box at right -50 / bottom -52; `overflow: hidden` crops the base plate, which
is what the comp shows. max-width has to go: 45% of this card is 189px.
The card's own background is a flat #f7fafe — 96.7% of its non-artwork pixels
are exactly that value and the rest are within 2/255 — so it deliberately
keeps the shared `.pm-surya-stats__card` colour and gets no gradient here. */
.pm-surya-stats__card:nth-child(3) .pm-surya-stats__art {
top: auto;
right: -50px;
bottom: -52px;
height: 227px;
max-width: none;
transform: none;
}
/* Card 4's panel is bigger than the default and bleeds off the bottom-right.
Eight features of the artwork line up between the comp and the asset at a
constant 56px offset with no stretch, so the 398px source renders at exactly
half size — 199px — with its box at left 305 / top 28 of the 491x200 card.
max-width has to go: 45% of the card drops under 199px once the container
steps down to 1140px, which would otherwise shrink the object. */
.pm-surya-stats__card:nth-child(4) .pm-surya-stats__art {
top: auto;
right: -13px;
bottom: -27px;
height: 199px;
max-width: none;
transform: none;
}
.pm-surya-stats__value {
margin: 0 0 6px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.4;
/* -0.04em, matching the label and every other breakpoint of this scale
(36px/-1.44px at tablet, 24px/-0.96px on phones). Briefly changed to -2%
on the strength of a browser text measurement that turned out not to be
rendering DM Sans; measured against the card 1 and card 3 comps with the
real font, -4% lands within ~2px and -2% is ~10px wide. Left as it was. */
letter-spacing: -1.92px;
color: var(--pm-surya-brand);
}
.pm-surya-stats__label {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.4;
letter-spacing: -0.96px;
color: var(--pm-surya-ink-300);
}
.pm-surya-stats__footnote {
margin: 0 0 24px;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 14px;
/* Otherwise this inherits 1.5 from global.css and stands 3px taller than
the comp's 18px line. */
line-height: 1.3;
letter-spacing: -0.28px;
color: var(--pm-surya-ink-300);
}
/* ------------------------------------------------------- closing banner -- */
.pm-surya-stats__cta {
display: flex;
align-items: center;
gap: 24px;
padding: 16px 24px;
border: 1px solid #e3f8ff;
border-radius: 12px;
background-image: linear-gradient(-71.18deg, #f5f9fa 0.24%, #f1fbff 99.68%);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.pm-surya-stats__cta-copy {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pm-surya-stats__cta-title {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.4;
letter-spacing: -0.96px;
color: var(--pm-surya-ink-400);
}
.pm-surya-stats__cta-text {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4;
letter-spacing: -0.64px;
color: var(--pm-surya-ink-300);
}
.pm-surya-stats__cta-button {
display: inline-flex;
flex: 0 0 227px;
align-items: center;
justify-content: center;
height: 50px;
padding: 12px 16px;
border-radius: 8px;
background-image: linear-gradient(92.84deg, #101f9d 0%, #11111c 99.9%);
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.28px;
color: #fff;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-surya-stats__cta-button:hover,
.pm-surya-stats__cta-button:focus-visible {
color: #fff;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(16, 31, 157, 0.28);
}
@media (max-width: 1199px) {
.pm-surya-stats__title {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-stats__value {
font-size: 36px;
letter-spacing: -1.44px;
}
.pm-surya-stats__label {
font-size: 18px;
letter-spacing: -0.72px;
}
.pm-surya-stats__cta-title {
font-size: 20px;
letter-spacing: -0.8px;
}
/* Slots are narrower here, so pull the art back to leave the numbers room. */
.pm-surya-stats__art,
.pm-surya-stats__card:nth-child(5) .pm-surya-stats__art {
right: 16px;
height: 118px;
}
/* Card 5's desktop rule anchors its object to the card's bottom-right
corner. The grouped rule above already carries card 5, so it keeps its
right/height from there — but it cannot reach top/bottom/transform, so
those are the only three undone here. */
.pm-surya-stats__card:nth-child(5) .pm-surya-stats__art {
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
/* Card 1 keeps its corner anchoring; the two rules above cannot reach it,
since the desktop rule that sets it is the more specific of the two. Its
bleed is scaled by the same 118/154 the other cards shrink by. */
.pm-surya-stats__card:nth-child(1) .pm-surya-stats__art {
right: -8px;
bottom: -11px;
height: 118px;
}
/* Same story for card 4 — its desktop rule outranks the generic one above,
so restate it here with the bleed scaled by 118/199. */
.pm-surya-stats__card:nth-child(4) .pm-surya-stats__art {
right: -8px;
bottom: -16px;
height: 118px;
}
/* And for card 2, whose desktop rule outranks the generic one too. Bleed
scaled by 118/226; there is no tablet comp, so this just follows the house
pattern of holding every object at the same 118px here. */
.pm-surya-stats__card:nth-child(2) .pm-surya-stats__art {
right: -32px;
bottom: -30px;
height: 118px;
}
/* Card 3 likewise. Bleed scaled by 118/227; no tablet comp for it either, so
it follows the same house pattern of holding every object at 118px.
top/max-width/transform carry down from its desktop rule, which already
outranks the generic one above. */
.pm-surya-stats__card:nth-child(3) .pm-surya-stats__art {
right: -26px;
bottom: -27px;
height: 118px;
}
}
/* PHONE: per the mobile comp (14:1338) — a 155px + fluid two-column bento with
the 13.35 GW card spanning both, and the CTA stacking. */
@media (max-width: 767px) {
.pm-surya-stats {
padding: 40px 0;
}
.pm-surya-stats__title {
margin-bottom: 24px;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
color: var(--pm-surya-ink-500);
text-align: left;
}
.pm-surya-stats__grid {
grid-template-columns: 155px 1fr;
gap: 16px;
margin-bottom: 16px;
}
.pm-surya-stats__card {
height: 224px;
padding: 16px;
}
/* On phones it is the capacity card that goes full width, not the last one. */
.pm-surya-stats__card:nth-child(5) {
grid-column: auto;
}
.pm-surya-stats__card:nth-child(3) {
grid-column: 1 / span 2;
height: auto;
min-height: 140px;
}
.pm-surya-stats__value {
font-size: 24px;
letter-spacing: -0.96px;
}
.pm-surya-stats__label {
font-size: 16px;
letter-spacing: -0.64px;
}
/* On phones the comp stacks art above the copy rather than beside it, so the
object sits in the top of the card and the text keeps the bottom. */
.pm-surya-stats__art {
top: 14px;
right: auto;
left: 50%;
height: 96px;
max-width: 80%;
transform: translateX(-50%);
}
.pm-surya-stats__card:nth-child(5) .pm-surya-stats__art {
top: 14px;
right: auto;
/* Undoes the desktop rule's corner anchoring, same as card 1 below. */
bottom: auto;
left: 50%;
height: 96px;
transform: translateX(-50%);
}
/* Same specificity problem as the tablet block: card 1's desktop rule out-
ranks the generic one above, so it has to be told to stack too. */
.pm-surya-stats__card:nth-child(1) .pm-surya-stats__art {
top: 14px;
right: auto;
bottom: auto;
left: 50%;
height: 96px;
max-width: 80%;
transform: translateX(-50%);
}
/* Card 4 likewise — its desktop rule has to be undone bleed and all. */
.pm-surya-stats__card:nth-child(4) .pm-surya-stats__art {
top: 14px;
right: auto;
bottom: auto;
left: 50%;
height: 96px;
max-width: 80%;
transform: translateX(-50%);
}
/* Card 2 likewise. `bottom` and `max-width` both have to be reset by hand or
the desktop bleed survives into the stacked layout. */
.pm-surya-stats__card:nth-child(2) .pm-surya-stats__art {
top: 14px;
right: auto;
bottom: auto;
left: 50%;
height: 96px;
max-width: 80%;
transform: translateX(-50%);
}
/* The full-width capacity card keeps its object to the right instead.
`bottom` and `max-width` are reset by hand for the same reason as card 2:
card 3 now has a desktop rule that bleeds off the corner, and it outranks
the generic phone rule above. The values below are the ones this card
already resolved to before that desktop rule existed, so the phone layout
is unchanged. */
.pm-surya-stats__card:nth-child(3) .pm-surya-stats__art {
top: 50%;
right: 24px;
bottom: auto;
left: auto;
height: 104px;
max-width: 80%;
transform: translateY(-50%);
}
.pm-surya-stats__footnote {
margin-bottom: 16px;
}
.pm-surya-stats__cta {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 16px;
}
.pm-surya-stats__cta-title {
font-size: 18px;
letter-spacing: -0.72px;
}
.pm-surya-stats__cta-text {
font-size: 12px;
letter-spacing: -0.48px;
}
.pm-surya-stats__cta-button {
flex: 0 0 auto;
width: 227px;
max-width: 100%;
}
}
/* ============================ 05 government subsidy structure =========== */
/* The one dark section on the page. Its two greys are not in the page's token
set — they belong to this section only, so they stay as literals here. */
.pm-surya-subsidy {
padding: 72px 0;
background-image: linear-gradient(160.49deg, #0c0e1b 0%, #15192c 100%);
}
.pm-surya-subsidy__inner {
display: grid;
/* The comp's 534 / 638 columns, expressed as fr so they scale between 1200
and 1440 rather than overflowing at the narrow end. */
grid-template-columns: minmax(0, 534fr) minmax(0, 638fr);
column-gap: 69px;
align-items: start;
max-width: var(--pm-surya-max);
margin: 0 auto;
/* The comp indents this section 120px left / ~79px right, but that reads as
a misalignment beside every other section, so it uses the shared gutter
like the rest of the page. */
padding: 0 var(--pm-surya-gutter);
}
/* Explicit placement so the promo card can sit under the copy in column 1 while
the table spans both rows in column 2. Below 1200px these are all reset to
auto and `order` takes over. */
.pm-surya-subsidy__copy {
grid-area: 1 / 1 / 2 / 2;
}
.pm-surya-subsidy__promo {
grid-area: 2 / 1 / 3 / 2;
margin-top: 36px;
}
.pm-surya-subsidy__table-wrap {
grid-area: 1 / 2 / 3 / 3;
align-self: center;
}
/* ------------------------------------------------------------ copy -- */
/* The comp sets this heading in DM Sans Bold 60/80 — every other section title
on the page is Poppins Bold 40, and the *mobile* frame for this same section
uses the shared Poppins "Header Text" style. Left as drawn; see the handoff
Flags if design confirms it should be Poppins 40 like its neighbours. */
.pm-surya-subsidy__title {
margin: 0;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 60px;
line-height: 80px;
letter-spacing: -1.2px;
color: #fff;
}
.pm-surya-subsidy__text {
margin: 12px 0 0;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 24px;
/* The comp's three lines are 31px apart, not 33.6 — 1.3, like the table. */
line-height: 1.3;
letter-spacing: -0.48px;
color: #fff;
}
/* ----------------------------------------------------------- table -- */
.pm-surya-subsidy__table-wrap {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
background-color: var(--pm-surya-ink-500);
overflow: hidden;
}
.pm-surya-subsidy__table {
width: 100%;
margin: 0;
border-collapse: collapse;
/* Fixed so the 40% first column holds whatever is typed into it. */
table-layout: fixed;
}
/* The table has a real caption for screen readers; the comp shows none. */
.pm-surya-subsidy__table-caption {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pm-surya-subsidy__table th,
.pm-surya-subsidy__table td {
padding: 8px 12px;
/* Explicit, because the theme's global table styles would otherwise reach in
here with their own borders and striping. */
border: 0;
border-bottom: 1px solid var(--pm-surya-ink-400);
background-color: transparent;
text-align: center;
vertical-align: middle;
}
.pm-surya-subsidy__table th:first-child,
.pm-surya-subsidy__table td:first-child {
width: 40%; /* the comp's 256 of 638 */
border-right: 1px solid var(--pm-surya-ink-400);
}
/* The export draws a bottom rule on the last row too, which then sits flush
against the card edge. Dropped — the card border already closes the table. */
.pm-surya-subsidy__table tbody tr:last-child th,
.pm-surya-subsidy__table tbody tr:last-child td {
border-bottom: 0;
}
.pm-surya-subsidy__table thead th {
height: 64px;
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.4px;
color: #fff;
}
.pm-surya-subsidy__table tbody th,
.pm-surya-subsidy__table tbody td {
height: 56px;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.32px;
color: rgba(255, 255, 255, 0.7);
}
/* ---------------------------------------------------- calculator card -- */
.pm-surya-subsidy__promo {
position: relative;
display: block;
/* min-height rather than the comp's fixed 127px, so the card grows instead
of clipping its own copy if the labels are edited longer. */
min-height: 127px;
max-width: 435px;
padding: 25px 0 25px 28px;
border-radius: 12px;
/* The first stop is NEGATIVE — it sits off the near end of the gradient
line, so the card opens mid-ramp at ~#c9d9f8 and climbs smoothly to the
highlight at ~21%. It was +18.957% here, which instead flat-filled the
first fifth of the card with #b2c8f1 and then jumped to #dfeaff over
1.8%: a hard edge the comp does not have, and up to 44/255 too dark.
Refitted against the 870x254 (2x) comp: sweeping the angle and profiling
along it, both endpoint colours land on #b2c8f1 / #dfeaff exactly and the
near stop lands at -19.5% +/- 0.5%, i.e. the printed 18.957% with its
sign dropped. Residual after the fix is 0.47/255 RMS, 1.5/255 worst. */
background-image: linear-gradient(
114.23deg,
#b2c8f1 -18.957%,
#dfeaff 20.767%,
#b2c8f1 100%
);
overflow: hidden;
/* Same trick as .pm-surya-stats__card: confines the z-index:-1 decorations
below the copy but above the card's own gradient. */
isolation: isolate;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-surya-subsidy__promo:hover,
.pm-surya-subsidy__promo:focus-visible {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(12, 14, 27, 0.45);
}
/* Blurred glow, lower left. Figma: a 100px white circle at 10% with a Gaussian
blur of stdDeviation 9.9. CSS blur() takes that same value, so this is an
exact reproduction and needs no exported asset — same approach as the
countdown banner's streaks. */
.pm-surya-subsidy__promo::before {
content: "";
position: absolute;
z-index: -1;
top: 43px;
left: 13px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
filter: blur(9.9px);
pointer-events: none;
}
/* The three concentric circles behind the artwork (Figma "Group 1000006095"):
#C6D8F9, then #B2C8F1 at 30% and #75A1F8 at 10% stacked on it. The stop
colours here are those three already flattened, and the stop positions are the
comp's radii as a share of the outer circle (39.28 / 61.24 / 85.5). Also CSS
rather than an exported SVG. */
.pm-surya-subsidy__promo::after {
content: "";
position: absolute;
z-index: -2;
top: -12px;
right: -29px;
width: 171px;
height: 171px;
border-radius: 50%;
background-image: radial-gradient(
circle closest-side,
#b9cef7 0,
#b9cef7 45.7%,
#c0d3f7 46.2%,
#c0d3f7 71.4%,
#c6d8f9 71.9%,
#c6d8f9 100%
);
pointer-events: none;
}
.pm-surya-subsidy__promo-body {
display: block;
/* The comp's 271px. Holds the copy clear of the artwork on the right. */
width: 271px;
max-width: 100%;
}
.pm-surya-subsidy__promo-title {
display: block;
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.4;
letter-spacing: -0.36px;
color: var(--pm-surya-brand);
}
.pm-surya-subsidy__promo-text {
display: block;
margin-top: 4px;
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
letter-spacing: -0.28px;
color: var(--pm-surya-brand);
}
.pm-surya-subsidy__promo-cta {
display: inline-flex;
/* Baseline, not centre: in the comp the arrow's bottom edge sits exactly on
the label's baseline (both at y=194 in 2x comp px) and its top edge on the
cap line (both at y=174). An SVG's baseline is its bottom margin edge, so
`baseline` reproduces that without a magic offset, and keeps doing so if
DM Sans falls back to a face with different metrics. */
align-items: baseline;
/* Comp: label ink ends at x=242.3 and the arrow box starts at x=252.0 (2x),
so ~4.85px at 1x. Was 2px, which was tuned for the Material glyph's own
internal side bearing; the inline SVG's ink fills its box edge to edge. */
gap: 5px;
margin-top: 12px;
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1;
letter-spacing: -0.28px;
color: var(--pm-surya-icon);
}
/* The arrow is now a fixed inline SVG, not an ACF image or a Material Symbol,
so this is its own intrinsic 15x10 rather than a square icon slot. Measured
off the comp: the arrow's ink occupies exactly x 252..281 / y 174..193 in 2x
px, i.e. 15.0 x 10.0 at 1x, with no internal padding. `font-size` /
`line-height` / `object-fit` are gone with the glyph and the ![]()
, and the
global `.material-symbols-outlined { margin-right: 5px }` from header.css is
no longer in play here at all — nothing on this card relies on the
`.pm-surya-page .material-symbols-outlined` neutralisation any more. */
.pm-surya-subsidy__promo-icon {
flex-shrink: 0;
width: 15px;
height: 10px;
transition: transform 0.2s ease;
}
.pm-surya-subsidy__promo:hover .pm-surya-subsidy__promo-icon,
.pm-surya-subsidy__promo:focus-visible .pm-surya-subsidy__promo-icon {
transform: translateX(2px);
}
/* Sized straight from the comp — and here, unusually, the comp's own negative
offsets are the correct ones. Verified before using them: the exported PNG is
a 1254px square whose opaque artwork is only 764x905 (60.9% x 72.2%) of the
canvas, sitting 210px in from the left and 280px in from the right. Scaled
into a 189px box that padding becomes ~32px left / ~42px right, so right:-43px
lands the piggy's own right edge flush with the card rather than off it.
Do NOT "fix" this to a positive inset with height+width:auto — because the
transparent padding is baked into the file, that shrinks the visible object to
~110px and floats it inside the card. */
.pm-surya-subsidy__promo-art {
position: absolute;
top: calc(50% + 13px);
right: -43px;
width: 189px;
height: 189px;
object-fit: contain;
transform: translateY(-50%);
pointer-events: none;
}
/* TABLET, 768–1199px. There is no tablet comp. The comp's 534 + 69 + 638 needs
1241px of content width, which is gone by 1199px, so the two columns collapse
a breakpoint early into the mobile stacking order — copy, then table, then the
promo card as a closing CTA. */
@media (max-width: 1199px) {
.pm-surya-subsidy__inner {
grid-template-columns: minmax(0, 1fr);
row-gap: 32px;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-subsidy__copy {
grid-area: auto;
order: 1;
}
.pm-surya-subsidy__table-wrap {
grid-area: auto;
order: 2;
/* Capped rather than stretched: a two-column table run out to 1119px
reads as mostly empty space. */
max-width: 638px;
}
.pm-surya-subsidy__promo {
grid-area: auto;
order: 3;
margin-top: 0;
}
.pm-surya-subsidy__title {
font-size: 44px;
line-height: 56px;
letter-spacing: -0.88px;
}
.pm-surya-subsidy__text {
font-size: 20px;
letter-spacing: -0.4px;
}
}
/* PHONE, ≤767px — translated from the mobile comp (14:1376). */
@media (max-width: 767px) {
.pm-surya-subsidy {
padding: 40px 0;
/* The mobile frame re-angles the same two-stop gradient. */
background-image: linear-gradient(117.08deg, #0c0e1b 0%, #15192c 100%);
}
.pm-surya-subsidy__inner {
row-gap: 24px;
padding: 0 var(--pm-surya-gutter);
}
/* The mobile frame drops the desktop's ad-hoc DM Sans for the page's shared
"Header Text" style, which is what every other section title uses on
phones. */
.pm-surya-subsidy__title {
font-family: "Poppins", sans-serif;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
}
.pm-surya-subsidy__text {
margin-top: 10px;
font-size: 16px;
/* The 1.3 above comes off the desktop comp; the mobile frame keeps 1.4. */
line-height: 1.4;
letter-spacing: -0.32px;
}
.pm-surya-subsidy__table-wrap {
max-width: none;
/* The comp leaves ~46px above the table and ~21px below it; the grid's
24px row-gap plus this makes up the difference. */
margin-top: 16px;
border-radius: 12px;
}
.pm-surya-subsidy__table th:first-child,
.pm-surya-subsidy__table td:first-child {
width: 43%; /* the comp's 148 of 343 */
}
/* Header labels wrap to two lines here, so the row is padded rather than
given a fixed height. */
.pm-surya-subsidy__table thead th {
height: auto;
padding: 16px 11px;
}
.pm-surya-subsidy__promo {
min-height: 109px;
max-width: none;
padding: 16px 0 16px 16px;
border-radius: 8px;
/* Same dropped sign as the desktop rule had — see the long note there.
Positive, the first fifth of the card flat-fills with the dark
#b2c8f1 and then jumps to the highlight over 1.8%, which bands
visibly; negative, the card opens mid-ramp and climbs smoothly.
The angle and the two later stops are the mobile comp's own values
and are left alone. NOTE: -18.957% is desktop's fitted stop reused,
not one measured here — this card is a different size (109px min-
height, full-bleed width), so the true position may be a few percent
off until there is a mobile export to fit against. It is strictly
closer than the positive value either way. */
background-image: linear-gradient(
112.46deg,
#b2c8f1 -18.957%,
#dfeaff 20.767%,
#b2c8f1 100%
);
}
.pm-surya-subsidy__promo::after {
top: 21px;
right: -33px;
width: 131px;
height: 131px;
}
/* Same reasoning as the desktop rule: in a 125px box the artwork's own right
padding is ~28px, so right:-27px puts its edge just inside the card. */
.pm-surya-subsidy__promo-art {
top: auto;
right: -27px;
bottom: -29px;
width: 125px;
height: 125px;
transform: none;
}
}
/* ================================= 06 eligibility & documents ========== */
.pm-surya-eligibility {
padding: 72px 0;
background-image: linear-gradient(
136.67deg,
rgba(154, 204, 255, 0.5) 7.9%,
rgba(112, 183, 255, 0) 116.65%
);
}
.pm-surya-eligibility__inner {
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-eligibility__top {
display: flex;
align-items: flex-start;
gap: 55px; /* 963 - 80 - 828 in the comp */
}
.pm-surya-eligibility__criteria {
display: flex;
flex: 1 1 828px;
flex-direction: column;
/* 44px in the comp, which is also what makes this column exactly as tall as
the 466px photo beside it. */
gap: 44px;
max-width: 828px;
}
.pm-surya-eligibility__title {
margin: 0;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: -0.8px;
color: var(--pm-surya-ink-500);
}
.pm-surya-eligibility__card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 31px;
border-radius: 16px;
background-color: rgba(250, 253, 252, 0.72);
}
.pm-surya-eligibility__card-title {
margin: 0;
padding-bottom: 16px;
/* The comp draws a hairline vector under this heading. */
border-bottom: 1px solid rgba(26, 31, 56, 0.12);
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1.4;
letter-spacing: -0.96px;
color: var(--pm-surya-ink-500);
}
.pm-surya-eligibility__list {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.pm-surya-eligibility__item {
display: flex;
align-items: center;
gap: 8px;
}
.pm-surya-eligibility__check {
flex-shrink: 0;
font-size: 24px;
line-height: 1;
/* Both the tick and its label are the same green in the comp. */
color: var(--pm-surya-verified);
}
.pm-surya-page .pm-surya-eligibility__item-text {
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 20px;
/* Without this the span inherits a 1.5 line-height from global.css; the
comp's wrapped items sit 26px apart. */
line-height: 1.3;
letter-spacing: -0.4px;
color: var(--pm-surya-verified);
}
.pm-surya-eligibility__media {
flex: 0 0 377px;
width: 377px;
height: 466px;
margin: 0;
border-radius: 20px;
overflow: hidden;
}
.pm-surya-eligibility__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ------------------------------------------------------------ documents -- */
.pm-surya-eligibility__docs {
margin-top: 32px;
}
.pm-surya-eligibility__docs-title {
margin: 0 0 16px;
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 36px;
line-height: 1.4;
letter-spacing: -1.44px;
color: var(--pm-surya-ink-500);
}
.pm-surya-eligibility__doc-list {
display: flex;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.pm-surya-eligibility__doc {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 20px;
border: 1px solid #fff;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5);
}
.pm-surya-eligibility__doc-icon {
display: block;
width: 44px;
height: 44px;
object-fit: contain;
}
/* Icons are optional, so hold their slot open when a row has none — otherwise
that card's label jumps up and the row of six goes ragged. */
.pm-surya-eligibility__doc:not(:has(.pm-surya-eligibility__doc-icon))::before {
content: "";
display: block;
width: 44px;
height: 44px;
}
.pm-surya-eligibility__doc-label {
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.8px;
color: #000;
}
/* ----------------------------------------------------------- cta banner -- */
.pm-surya-eligibility__cta {
display: flex;
align-items: center;
gap: 24px;
margin-top: 24px;
padding: 12px 24px;
border: 1px solid #fff;
border-radius: 12px;
background-image: linear-gradient(
-67.03deg,
rgba(245, 249, 250, 0.9) 0.24%,
rgba(241, 251, 255, 0.9) 99.68%
);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.pm-surya-eligibility__cta-text {
flex: 1 1 auto;
margin: 0;
min-width: 0;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.8px;
color: var(--pm-surya-ink-400);
}
.pm-surya-eligibility__cta-text strong {
font-weight: 700;
}
.pm-surya-eligibility__cta-button {
display: inline-flex;
flex: 0 0 227px;
align-items: center;
justify-content: center;
height: 50px;
padding: 12px 16px;
border-radius: 8px;
background-image: linear-gradient(92.84deg, #101f9d 0%, #11111c 99.9%);
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.28px;
color: #fff;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-surya-eligibility__cta-button:hover,
.pm-surya-eligibility__cta-button:focus-visible {
color: #fff;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(16, 31, 157, 0.28);
}
/* TABLET: 828 + 55 + 377 needs 1260px of content, which does not fit here, so
the photo drops below the criteria card and the six document cards wrap to a
grid instead of one row. No tablet comp exists for this section. */
@media (max-width: 1199px) {
.pm-surya-eligibility__top {
flex-direction: column;
gap: 32px;
}
.pm-surya-eligibility__criteria {
flex: 1 1 auto;
max-width: none;
width: 100%;
}
.pm-surya-eligibility__media {
flex: 0 0 auto;
width: 100%;
height: 320px;
}
.pm-surya-eligibility__title {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-eligibility__docs-title {
font-size: 28px;
letter-spacing: -1.12px;
}
.pm-surya-eligibility__doc-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.pm-surya-eligibility__doc-label {
font-size: 18px;
letter-spacing: -0.72px;
}
}
/* PHONE: per the mobile comp (14:1431) — no photo, no closing banner, and the
document cards become single-line rows with the icon inline. */
@media (max-width: 767px) {
.pm-surya-eligibility {
padding: 40px 0;
background-image: linear-gradient(
106.84deg,
rgba(154, 204, 255, 0.5) 7.9%,
rgba(112, 183, 255, 0) 116.65%
);
}
.pm-surya-eligibility__criteria {
gap: 16px;
}
.pm-surya-eligibility__title {
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
}
.pm-surya-eligibility__card {
gap: 8px;
padding: 16px;
}
.pm-surya-eligibility__card-title {
padding-bottom: 8px;
font-size: 20px;
letter-spacing: -0.8px;
}
.pm-surya-eligibility__item {
align-items: flex-start;
}
.pm-surya-eligibility__check {
font-size: 20px;
margin-top: 2px; /* onto the first line of a label that wraps */
}
.pm-surya-eligibility__item-text {
font-size: 16px;
letter-spacing: -0.32px;
}
.pm-surya-eligibility__docs-title {
font-size: 20px;
letter-spacing: -0.8px;
}
.pm-surya-eligibility__doc-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.pm-surya-eligibility__doc {
flex-direction: row;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
}
.pm-surya-eligibility__doc-icon {
width: 24px;
height: 24px;
}
.pm-surya-eligibility__doc-label {
font-size: 16px;
letter-spacing: -0.64px;
}
/* Neither appears in the mobile comp. */
.pm-surya-eligibility__media,
.pm-surya-eligibility__cta {
display: none;
}
}
/* ===================================== 07 how to apply for the subsidy == */
.pm-surya-apply {
/* Bottom is 40 rather than the page's shared 72: the prev/next control row
below the scroller (48px + 20px margin) does not exist in the comp, so a
full 72 here reads as ~140px of space above the divider. */
padding: 72px 0 40px;
background-color: #fff;
}
.pm-surya-apply__inner {
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-apply__title {
/* 48px, matching the other centred section titles in the comp. */
margin: 0 0 48px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: -0.8px;
color: var(--pm-surya-brand);
text-align: center;
}
/* Holds the edge fades that signal there is more to the right/left. */
.pm-surya-apply__viewport {
position: relative;
}
.pm-surya-apply__viewport::before,
.pm-surya-apply__viewport::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
width: 64px;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none; /* must never swallow a scroll or a click */
}
.pm-surya-apply__viewport::before {
left: 0;
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.pm-surya-apply__viewport::after {
right: 0;
background-image: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}
/* Toggled by the script as the strip is scrolled. */
.pm-surya-apply__viewport.has-prev::before,
.pm-surya-apply__viewport.has-next::after {
opacity: 1;
}
/* ------------------------------------------------------- scroll controls -- */
.pm-surya-apply__controls {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 20px;
}
.pm-surya-apply__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid rgba(24, 33, 80, 0.16);
border-radius: 999px;
background-color: #fff;
color: var(--pm-surya-brand);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.pm-surya-apply__nav .material-symbols-outlined {
font-size: 22px;
line-height: 1;
}
.pm-surya-apply__nav:hover:not(:disabled),
.pm-surya-apply__nav:focus-visible {
border-color: var(--pm-surya-brand);
background-color: var(--pm-surya-brand-50);
}
.pm-surya-apply__nav:disabled {
opacity: 0.35;
cursor: default;
}
/* The comp draws four 405px cards in a row 1692px wide inside a 1440px frame,
with the fourth clipped — i.e. a horizontal scroller. Seven steps ship, so it
scrolls rather than wraps, and snaps card to card. */
.pm-surya-apply__list {
display: flex;
gap: 24px;
margin: 0;
padding: 0 0 8px;
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.pm-surya-apply__step {
display: flex;
flex: 0 0 405px;
flex-direction: column;
gap: 20px;
padding: 24px;
border-radius: 16px;
background-color: #fff;
scroll-snap-align: start;
}
.pm-surya-apply__number {
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 60px;
line-height: 1.4;
letter-spacing: -2.4px;
color: var(--pm-surya-ink-200);
}
.pm-surya-apply__body {
display: flex;
flex-direction: column;
gap: 4px;
}
.pm-surya-apply__step-title {
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 1.4;
letter-spacing: -1.28px;
color: var(--pm-surya-brand);
}
.pm-surya-apply__step-text {
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: -0.72px;
color: var(--pm-surya-ink-300);
}
@media (max-width: 1199px) {
.pm-surya-apply__title {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-apply__step {
flex-basis: 340px;
}
.pm-surya-apply__step-title {
font-size: 26px;
letter-spacing: -1.04px;
}
}
/* PHONE: per the mobile comp (14:1478) — the scroller becomes a plain vertical
list with no card padding, each step separated only by whitespace.
NOTE: the mobile frame is a uniform 0.5946x scale of the desktop one (60 ->
35.68, 32 -> 19.03, 18 -> 10.70), so its literal values are scaling artefacts
rather than a mobile spec — 10.7px body copy is well below readable. Rounded
to a sensible mobile ramp instead. */
@media (max-width: 767px) {
.pm-surya-apply {
padding: 40px 0;
}
.pm-surya-apply__title {
margin-bottom: 16px;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
color: var(--pm-surya-ink-500);
text-align: left;
}
.pm-surya-apply__list {
display: block;
padding: 0;
overflow-x: visible;
scroll-snap-type: none;
}
.pm-surya-apply__step {
display: block;
padding: 8px 0;
}
.pm-surya-apply__number {
display: block;
margin-bottom: 4px;
font-size: 36px;
letter-spacing: -1.44px;
}
.pm-surya-apply__step-title {
display: block;
margin-bottom: 2px;
font-size: 20px;
letter-spacing: -0.8px;
}
.pm-surya-apply__step-text {
display: block;
font-size: 14px;
letter-spacing: -0.28px;
}
/* Nothing scrolls here, so the affordances would be meaningless. */
.pm-surya-apply__controls,
.pm-surya-apply__viewport::before,
.pm-surya-apply__viewport::after {
display: none;
}
}
/* ======================================== 08 track your application ===== */
.pm-surya-track {
padding: 72px 0;
background-color: #fff;
}
.pm-surya-track__inner {
display: flex;
align-items: center;
/* space-between, because the copy is capped at 764px and the image is a
fixed 248px — without it the leftover width piles up to the right of the
image instead of between them. */
justify-content: space-between;
gap: 40px;
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-track__copy {
display: flex;
flex: 0 1 auto;
flex-direction: column;
gap: 24px;
/* 800px, not 764: the comp sets the 40px Poppins headings of sections 08/09
on a single line and "Things to Keep in Mind While Going Solar" measures
799px, so anything narrower wraps it. */
max-width: 800px;
}
.pm-surya-track__title {
margin: 0;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: -0.8px;
color: var(--pm-surya-brand);
}
.pm-surya-track__text {
margin: 0;
/* Desktop sets this in Lato; the mobile comp switches to DM Sans — see the
phone block below. */
font-family: "Lato", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.4px;
color: var(--pm-surya-ink-400);
}
/* The comp lets the illustration bleed past the section's 72px padding — the
section height is set by the copy alone, not by the (taller) artwork. A
zero-height flex item does exactly that: it still reserves its width, so the
copy keeps shrinking normally at narrower containers, but it contributes no
height. The image is then pulled up by half of its own height to sit centred
on that zero-height line, which works whatever size ACF returns. */
.pm-surya-track__media {
align-self: center;
flex: 0 0 248px;
width: 248px;
height: 0;
margin: 0;
}
.pm-surya-track__image {
display: block;
width: 100%;
height: auto;
transform: translateY(-50%);
}
@media (max-width: 1199px) {
.pm-surya-track__title {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-track__text {
font-size: 18px;
}
.pm-surya-track__media {
flex-basis: 200px;
width: 200px;
}
}
/* PHONE: per the mobile comp (14:1525) — no illustration, and the body copy
switches family, size and colour (Lato 20px ink-400 -> DM Sans 16px ink-300). */
@media (max-width: 767px) {
.pm-surya-track {
padding: 40px 0;
}
.pm-surya-track__inner {
display: block;
}
.pm-surya-track__copy {
gap: 12px;
max-width: none;
}
.pm-surya-track__title {
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
color: var(--pm-surya-ink-500);
}
.pm-surya-track__text {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: normal;
letter-spacing: -0.32px;
color: var(--pm-surya-ink-300);
}
.pm-surya-track__media {
display: none;
}
}
/* =============================== 09 things to keep in mind ============= */
.pm-surya-keep {
padding: 72px 0;
background-color: var(--pm-surya-surface);
}
.pm-surya-keep__inner {
display: flex;
align-items: center;
/* Same reasoning as section 08: capped copy plus a fixed-width image would
otherwise leave the slack to the right of the image. */
justify-content: space-between;
gap: 40px;
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-keep__copy {
display: flex;
flex: 0 1 auto;
flex-direction: column;
align-items: flex-start;
gap: 24px;
/* See section 08 — 799px of single-line heading has to fit. */
max-width: 800px;
}
.pm-surya-keep__title {
margin: 0;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: -0.8px;
color: var(--pm-surya-brand);
}
.pm-surya-keep__text {
margin: 0;
font-family: "Lato", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.4px;
color: var(--pm-surya-ink-400);
}
/* Outlined button whose label is filled with the CTA gradient rather than a
flat colour — background-clip:text over a transparent foreground. */
.pm-surya-keep__button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 12px 64px;
border: 1px solid #101f9d;
border-radius: 8px;
background-color: transparent;
text-decoration: none;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.pm-surya-keep__button-label {
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: -0.32px;
background-image: linear-gradient(91.68deg, #101f9d 0%, #11111c 99.9%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Where background-clip:text is unavailable the label would be invisible, so
fall back to the gradient's start colour. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.pm-surya-keep__button-label {
color: #101f9d;
}
}
.pm-surya-keep__button:hover,
.pm-surya-keep__button:focus-visible {
background-color: rgba(16, 31, 157, 0.06);
box-shadow: 0 6px 16px rgba(16, 31, 157, 0.16);
text-decoration: none;
}
/* Zero-height media — see the note on .pm-surya-track__media. */
.pm-surya-keep__media {
align-self: center;
flex: 0 0 378px;
width: 378px;
height: 0;
margin: 0;
}
.pm-surya-keep__image {
display: block;
width: 100%;
height: auto;
transform: translateY(-50%);
}
@media (max-width: 1199px) {
.pm-surya-keep__title {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-keep__text {
font-size: 18px;
}
.pm-surya-keep__media {
flex-basis: 260px;
width: 260px;
}
}
/* PHONE: per the mobile comp (14:1529) — no illustration; the body copy keeps
Lato here (unlike section 08, which switches to DM Sans) but drops to 16px
and the lighter ink. */
@media (max-width: 767px) {
.pm-surya-keep {
padding: 40px 0;
}
.pm-surya-keep__inner {
display: block;
}
.pm-surya-keep__copy {
gap: 12px;
max-width: none;
}
.pm-surya-keep__title {
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
color: var(--pm-surya-ink-500);
}
.pm-surya-keep__text {
font-size: 16px;
letter-spacing: -0.32px;
color: var(--pm-surya-ink-300);
}
/* Restores the 20px the mobile comp leaves above the button, now that the
desktop rule no longer carries a margin. */
.pm-surya-keep__button {
margin-top: 8px;
}
.pm-surya-keep__media {
display: none;
}
}
/* ============================== 10 why go solar with SolarSquare ======= */
.pm-surya-wss {
padding: 72px 0;
background-color: #fff;
}
.pm-surya-wss__inner {
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter);
}
.pm-surya-wss__head {
display: flex;
flex-direction: column;
/* The comp leaves 20px between the title and its one-line subtitle. */
gap: 20px;
margin-bottom: 36px;
text-align: center;
}
.pm-surya-wss__title {
margin: 0;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: -0.8px;
color: var(--pm-surya-brand);
}
.pm-surya-wss__text {
margin: 0;
font-family: "Lato", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.4px;
color: var(--pm-surya-ink-400);
}
.pm-surya-wss__list {
display: flex;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.pm-surya-wss__card {
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: flex-start;
min-width: 0;
min-height: 194px;
padding: 28px;
border-radius: 12px;
background-color: #f7fafe;
}
.pm-surya-wss__icon {
margin-bottom: 20px;
font-size: 36px;
line-height: 1;
color: var(--pm-surya-icon);
}
.pm-surya-wss__icon-img {
display: block;
width: 36px;
height: 36px;
margin-bottom: 20px;
object-fit: contain;
}
.pm-surya-wss__value {
margin-bottom: 6px;
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 1.4;
letter-spacing: -1.28px;
color: var(--pm-surya-brand);
}
.pm-surya-wss__label {
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.4;
letter-spacing: -0.96px;
color: var(--pm-surya-ink-300);
}
/* TABLET: four cards of this size do not fit, so they go two-up. */
@media (max-width: 1199px) {
.pm-surya-wss__title {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-wss__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.pm-surya-wss__value {
font-size: 28px;
letter-spacing: -1.12px;
}
.pm-surya-wss__label {
font-size: 20px;
letter-spacing: -0.8px;
}
}
/* PHONE: per the mobile comp (14:1535) — a 2x2 grid, left-aligned heading, and
the sub-line switches from Lato to DM Sans as it does in section 08. */
@media (max-width: 767px) {
.pm-surya-wss {
padding: 40px 0;
}
.pm-surya-wss__head {
gap: 12px;
margin-bottom: 24px;
text-align: left;
}
.pm-surya-wss__title {
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
color: var(--pm-surya-ink-500);
}
.pm-surya-wss__text {
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: normal;
letter-spacing: -0.32px;
}
.pm-surya-wss__list {
gap: 12px;
}
.pm-surya-wss__card {
min-height: 0;
padding: 16px;
border-radius: 8px;
}
.pm-surya-wss__icon {
margin-bottom: 12px;
font-size: 20px;
}
.pm-surya-wss__icon-img {
width: 20px;
height: 20px;
margin-bottom: 12px;
}
.pm-surya-wss__value {
margin-bottom: 4px;
font-size: 20px;
line-height: normal;
letter-spacing: -1px;
}
.pm-surya-wss__label {
font-size: 14px;
line-height: normal;
letter-spacing: -0.6px;
}
}
/* ================================================ 11 FAQ (shared component) === */
/*
* The FAQ markup comes from the theme's shared render_faq_section(); nothing
* here touches it. Every rule is scoped under .pm-surya-page, which the shared
* section renders inside, so the other eight templates using that component
* (Home, Homes, EC, Windpro, On Grid, CHS, city, state) are untouched — the
* selector simply does not match there. That nesting also raises specificity
* above global.css's `.faq-section.common-faq ...`, so no !important is needed.
*
* Measurements come from the cached full-page frame (5:943): 100px gutter,
* 1240px content, 40px title, 46px tabs with 12px gaps, two 593px columns with
* a 54px gutter, 48px rows separated by hairlines, and 44px round toggles.
*/
.pm-surya-page .faq-section.common-faq {
margin: 0;
/* Bottom padding lives on the view-all block below, so the two read as one
section rather than stacking two lots of whitespace. */
padding: 72px 0 0;
background-color: #fff;
}
.pm-surya-page .faq-section.common-faq > .container {
max-width: var(--pm-surya-max);
/* Matches --pm-surya-gutter so this lines up with every other section (the
comp insets this one 100px, which reads as a misalignment in context).
!important is needed because the markup carries Bootstrap's `p-md-3`
utility, and Bootstrap spacing utilities are themselves !important. */
padding: 0 var(--pm-surya-gutter) !important;
}
/* Direct child only: each row's header is also an , so an unscoped rule
here put 32px of margin under every question. */
.pm-surya-page .faq-section.common-faq > .container > h2 {
margin: 0 0 32px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 1.5;
letter-spacing: -0.8px;
color: var(--pm-surya-ink-500);
}
/* ------------------------------------------------------------------ tabs -- */
.pm-surya-page .faq-section.common-faq #faqTab {
gap: 12px;
margin-bottom: 32px;
border-bottom: 0;
}
.pm-surya-page .faq-section.common-faq #faqTab .nav-item .nav-link {
height: 46px;
padding: 12px 24px;
border: 0;
border-radius: 999px;
background-color: #f1f1f5;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: -0.32px;
color: var(--pm-surya-ink-400);
}
.pm-surya-page .faq-section.common-faq #faqTab .nav-item .nav-link.active {
background-color: var(--pm-surya-brand);
color: #fff;
}
/* --------------------------------------------------------------- columns -- */
.pm-surya-page .faq-section.common-faq .faqAccordian {
display: flex;
gap: 54px; /* 647 - 593 in the comp */
margin: 0;
}
.pm-surya-page .faq-section.common-faq .faqAccordian > div {
flex: 1 1 0;
min-width: 0;
padding: 0;
}
/* ------------------------------------------------------------------ rows -- */
.pm-surya-page .faq-section.common-faq .accordion-item {
border: 0;
border-radius: 0;
background-color: transparent;
}
/* Hairline between rows, centred in the 48px gap the comp leaves. */
/* The comp leaves 48px between rows; that reads as too airy with real copy, so
the gap is halved and the hairline stays centred in it. */
.pm-surya-page .faq-section.common-faq .accordion-item:not(:last-child) {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #e2e4ec;
}
.pm-surya-page .faq-section.common-faq .accordion-header {
margin: 0;
}
.pm-surya-page .faq-section.common-faq .accordion-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 44px;
padding: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.4;
letter-spacing: -0.36px;
color: var(--pm-surya-ink-500);
text-align: left;
}
.pm-surya-page .faq-section.common-faq .accordion-button:not(.collapsed) {
background-color: transparent;
color: var(--pm-surya-ink-500);
}
/* The round +/- toggle. global.css draws it with a ::before glyph, so it is
restyled rather than replaced. */
.pm-surya-page .faq-section.common-faq .accordion-button::after {
display: none;
}
.pm-surya-page .faq-section.common-faq .accordion-button::before {
position: static;
/* order:1 puts the toggle after the question — a ::before is otherwise the
first flex item and would sit to its left. */
order: 1;
display: flex;
flex: 0 0 44px;
align-items: center;
justify-content: center;
align-self: center;
box-sizing: border-box;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
border-radius: 999px;
background-color: #f1f1f5;
font-size: 20px;
line-height: 1;
color: var(--pm-surya-ink-500);
}
.pm-surya-page .faq-section.common-faq .accordion-body {
padding: 8px 68px 0 0; /* clear of the 44px toggle plus its gap */
font-family: "DM Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.32px;
color: var(--pm-surya-ink-300);
}
/* -------------------------------------------------------- view-all button -- */
/* The white belongs to the wrapper, not the inner block: a centred 1440px white
box would otherwise leave the page's surface colour showing down both sides. */
.pm-surya-page .pm-surya-faq {
background-color: #fff;
}
/* Sits outside the shared component, so it needs the same inset as the section. */
.pm-surya-page .pm-surya-faq__actions {
max-width: var(--pm-surya-max);
margin: 0 auto;
padding: 0 var(--pm-surya-gutter) 72px;
}
.pm-surya-page .pm-surya-faq__all {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 342px;
max-width: 100%;
height: 50px;
margin-top: 32px;
border-radius: 8px;
background-color: var(--pm-surya-brand-50);
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.28px;
color: var(--pm-surya-brand);
text-decoration: none;
transition: background-color 0.2s ease;
}
.pm-surya-page .pm-surya-faq__all:hover,
.pm-surya-page .pm-surya-faq__all:focus-visible {
background-color: #dfe8f8;
color: var(--pm-surya-brand);
text-decoration: none;
}
@media (max-width: 1199px) {
.pm-surya-page .faq-section.common-faq > .container {
padding: 0 var(--pm-surya-gutter) !important;
}
.pm-surya-page .faq-section.common-faq > .container > h2 {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-page .faq-section.common-faq .faqAccordian {
gap: 32px;
}
}
/* PHONE: per the mobile comp — one column, tighter type, full-width button. */
@media (max-width: 767px) {
.pm-surya-page .faq-section.common-faq {
padding: 40px 0;
}
.pm-surya-page .faq-section.common-faq > .container {
padding: 0 var(--pm-surya-gutter) !important;
}
.pm-surya-page .faq-section.common-faq > .container > h2 {
margin-bottom: 20px;
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
}
.pm-surya-page .faq-section.common-faq #faqTab {
gap: 8px;
margin-bottom: 20px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.pm-surya-page .faq-section.common-faq #faqTab::-webkit-scrollbar {
display: none;
}
.pm-surya-page .faq-section.common-faq #faqTab .nav-item .nav-link {
height: 38px;
padding: 8px 16px;
font-size: 14px;
white-space: nowrap;
}
.pm-surya-page .faq-section.common-faq .faqAccordian {
flex-direction: column;
gap: 0;
}
.pm-surya-page .faq-section.common-faq .accordion-header {
margin: 0;
}
.pm-surya-page .faq-section.common-faq .accordion-button {
gap: 12px;
font-size: 16px;
letter-spacing: -0.32px;
}
.pm-surya-page .faq-section.common-faq .accordion-button::before {
flex-basis: 32px;
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
font-size: 16px;
}
.pm-surya-page .faq-section.common-faq .accordion-item:not(:last-child) {
margin-bottom: 10px;
padding-bottom: 10px;
}
.pm-surya-page .faq-section.common-faq .accordion-body {
padding-right: 44px;
font-size: 14px;
}
.pm-surya-page .pm-surya-faq__all {
width: 100%;
margin-top: 24px;
}
}
/* ================================================= 12 closing CTA ====== */
.pm-surya-cta {
position: relative;
overflow: hidden; /* the photo is taller than the band and is clipped by it */
background-color: #fff;
}
.pm-surya-cta__inner {
/* Deliberately NOT position:relative — the photo below is positioned against
the full-width section so it bleeds to the viewport edge, as the design
shows. Making this the containing block would stop it at the 1440 box. */
display: flex;
align-items: center;
max-width: var(--pm-surya-max);
min-height: 350px;
margin: 0 auto;
padding: 72px var(--pm-surya-gutter);
}
.pm-surya-cta__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: 841px;
}
.pm-surya-cta__title {
margin: 0;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
letter-spacing: -0.8px;
color: var(--pm-surya-brand);
}
.pm-surya-cta__text {
/* 28px below the title in the comp, against the 16px flex gap. */
margin: 12px 0 0;
font-family: "Lato", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.4px;
color: var(--pm-surya-ink-300);
}
.pm-surya-cta__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 255px;
max-width: 100%;
height: 50px;
margin-top: 8px;
padding: 12px 24px;
border-radius: 8px;
background-image: linear-gradient(92.84deg, #101f9d 0%, #11111c 99.9%);
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.28px;
color: #fff;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pm-surya-cta__button:hover,
.pm-surya-cta__button:focus-visible {
color: #fff;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(16, 31, 157, 0.28);
}
/* A 473px square pinned to the right edge of the 1440 content box, taller than
the band so it bleeds off top and bottom — exactly as the comp draws it. */
.pm-surya-cta__media {
position: absolute;
top: 50%;
right: 0;
width: 473px;
height: 473px;
margin: 0;
transform: translateY(-50%);
pointer-events: none;
}
.pm-surya-cta__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1199px) {
.pm-surya-cta__title {
font-size: 34px;
letter-spacing: -0.68px;
}
.pm-surya-cta__text {
font-size: 18px;
}
/* No photo at this width, so the copy gets the full measure. */
.pm-surya-cta__copy {
max-width: none;
}
.pm-surya-cta__media {
display: none;
}
}
/* PHONE: per the supplied mobile design — no photo, copy stacked full width and
the button spanning it. */
@media (max-width: 767px) {
.pm-surya-cta__inner {
display: block;
min-height: 0;
padding: 40px var(--pm-surya-gutter);
}
.pm-surya-cta__copy {
gap: 12px;
max-width: none;
}
.pm-surya-cta__title {
font-size: 28px;
line-height: 36px;
letter-spacing: -0.56px;
color: var(--pm-surya-ink-500);
}
.pm-surya-cta__text {
/* The 12px top margin above is a desktop-comp value; the mobile frame
runs on the 12px copy gap alone. */
margin-top: 0;
font-family: "DM Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
.pm-surya-cta__button {
width: 100%;
height: 56px;
margin-top: 8px;
font-size: 16px;
}
.pm-surya-cta__media {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.pm-surya-subsidy__promo,
.pm-surya-subsidy__promo-icon {
transition: none;
}
}
@media (prefers-reduced-motion: reduce) {
.pm-surya-hero__cta,
.pm-surya-countdown__ring-progress {
transition: none;
}
}