/*
Theme Name: Astra Child
Theme URI: https://consol.nz
Description: Child theme for Astra - Consol rebrand 2026. Customisations belong here so they survive Astra updates.
Author: Right Click
Template: astra
Version: 1.1.2
Text Domain: astra-child
*/
/* ---------------------------------------------------------------------------
Container gutter for non-Elementor pages
---------------------------------------------------------------------------
The design's customizer CSS contains:
.ast-container { padding-inline: 0 !important; }
which is correct for dev, where every page is built in Elementor and
.elementor-container supplies its own 1340px max-width and gutters.
Staging also has WooCommerce, whose pages (shop, single product, cart,
checkout, my-account, product category archives) are NOT Elementor. With the
Astra gutter zeroed and no Elementor container to replace it, their content
sits flush against the viewport edge on any screen below the 1340px
container max-width - i.e. most laptops, all tablets and all phones.
Restoring a gutter only where Elementor is not handling it. Needs
!important to beat the rule above; :not(.elementor-page) keeps every
Elementor-built page - and the deliberate full-width sections - untouched.
--------------------------------------------------------------------------- */
body:not(.elementor-page) #content > .ast-container {
padding-inline: clamp(16px, 3vw, 48px) !important;
}
/* ---------------------------------------------------------------------------
/solar-power/ hero
---------------------------------------------------------------------------
That page's hero is hand-written markup (.solar-hero > .hero-inner > h1),
not an Elementor heading widget. Its is explicitly white but the
never was - under Enfold it inherited a light colour, under Astra it picks up
the Elementor kit's dark heading colour (#1e293b) and sits almost unreadable
on the photograph.
Restores white heading text and deepens the scrim to match the treatment
already used by #home-hero and #solar-WH-hero.
--------------------------------------------------------------------------- */
.solar-hero {
position: relative;
}
.solar-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(4, 20, 34, 0.82), rgba(4, 20, 34, 0.48) 55%, rgba(4, 20, 34, 0.18));
pointer-events: none;
}
.solar-hero > * {
position: relative;
z-index: 1;
}
.solar-hero h1 {
color: #fff;
line-height: 1.06;
margin-bottom: 1rem;
max-width: 18ch;
text-wrap: balance;
}
.solar-hero p {
color: rgba(255, 255, 255, 0.92);
max-width: 60ch;
}
@media (max-width: 768px) {
.solar-hero h1 {
font-size: 2.4rem;
max-width: none;
}
}
/* ---------------------------------------------------------------------------
/solar-power/ "Why Choose Consol Solar?" band
---------------------------------------------------------------------------
Same fault as the hero above: section.why has a dark navy background
(rgb(7,22,45)) and its
elements were given white, but the headings never
were. Under Astra they inherit the Elementor kit's dark heading colour
(#1e293b), leaving dark-on-dark at a contrast ratio of 1.24:1 - effectively
invisible.
Every other section on that page is correct: .solar-section and .cards sit on
light backgrounds and their dark headings are right. Only .why is inverted.
--------------------------------------------------------------------------- */
.why h2,
.why h3,
.why h4 {
color: #fff;
}
.why p {
color: rgba(255, 255, 255, 0.88);
}
/* ---------------------------------------------------------------------------
Eyebrow labels on light backgrounds - WCAG AA
---------------------------------------------------------------------------
The design's accent yellow (#FDB813, the Elementor kit's "secondary" colour)
is applied to small uppercase eyebrow headings. Over the hero photographs it
reads well and is left alone. On the light section backgrounds it does not:
#FDB813 on #ffffff 1.74 : 1
#FDB813 on #f5f7fa 1.62 : 1 AA needs 4.5 : 1 for text this size
#B45309 is the same amber family, two steps darker:
#B45309 on #ffffff 5.02 : 1
#B45309 on #f5f7fa 4.68 : 1 passes AA on both
Scoped to the specific light-background sections rather than all h4s, because
other h4s here are deliberately grey (#why h4, .box h4) and must not change.
The hero eyebrows in #home-hero / #solar-WH-hero keep the original yellow.
--------------------------------------------------------------------------- */
.four-panel-header h4,
#why-hot h4,
.elementor-element-b495d5b h4,
.elementor-element-21a5b6aa h4,
.four-panel-header h4.elementor-heading-title,
.elementor-element-b495d5b h4.elementor-heading-title,
.elementor-element-21a5b6aa h4.elementor-heading-title {
color: #B45309 !important;
}
/* ---------------------------------------------------------------------------
Heading colours - legacy pages brought onto the brand palette
---------------------------------------------------------------------------
The two rebuilt pages and the shop use the Elementor kit's heading colour
(#1e293b). The pages retained from the Enfold site were never restyled and
still carry old-design colours - pure black, a purple-navy, a light purple
and a light grey. Two of those also failed WCAG AA:
#BFBFBF on white 1.84 : 1 FAQ subtitle
#CE95E0 on white 2.33 : 1 "Spring Solar Deals"
Normalised to the brand heading navy. The FAQ subtitle goes to the design's
existing muted grey (#607080, 5.09 : 1) rather than full-strength navy,
because it is a subtitle and should stay visually secondary.
Deliberate colours are left alone: the greys #607080 / #667685, white on dark
sections, and the amber eyebrows.
--------------------------------------------------------------------------- */
/* about-us */
.elementor-element-8c54fef h1,
.elementor-element-24ca0c16 h1,
.elementor-element-43cc515 h2,
/* promotions */
.elementor-element-9d294a5 h3,
/* faqs */
.elementor-element-53b6af3b h3,
.elementor-element-83a6635 h3,
.elementor-element-17b930b7 h2,
.elementor-element-21a5b6aa h5 {
color: #1e293b !important;
}
.elementor-element-17b930b7 h5 {
color: #607080 !important;
}
/* Last two off-palette headings.
"SEANZ Approved Provider" was pure black in the hand-written finance block;
"QUESTIONS" is an eyebrow like Applications / Built for performance, so it
takes the same amber rather than the heading navy. */
.finance-section h2 {
color: #1e293b !important;
}
.elementor-element-3bbd8a1 h4 {
color: #B45309 !important;
}
/* ---------------------------------------------------------------------------
/contact-us/ brought onto the new design
---------------------------------------------------------------------------
The page had no hero and no
at all - content began straight under the
header - and its three cards still used the old Enfold treatment (square
corners, no border, pale orange outline buttons).
The hero mirrors #home-hero / #solar-WH-hero exactly: same gradient scrim,
same eyebrow / h1 / lead sizes, same button. Colours are set here rather than
relying on widget settings, so the headings cannot inherit the kit's dark
navy and disappear against the photograph.
--------------------------------------------------------------------------- */
#contact-hero {
background: linear-gradient(90deg, rgba(4, 20, 34, 0.86), rgba(4, 20, 34, 0.55) 45%, rgba(4, 20, 34, 0.16)),
url("/wp-content/uploads/2026/07/40DEAA66-8796-42C8-A923-0E7A1E9DBA0F_1_105_c.webp") center / cover !important;
}
#contact-hero h4 {
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
color: #FDB813 !important;
margin-bottom: 0;
}
#contact-hero h1 {
font-size: 4.6rem;
line-height: 1.04 !important;
color: #F5F7FA !important;
max-width: 16ch;
text-wrap: balance;
}
#contact-hero p {
font-size: 1.22rem;
color: #F5F7FA !important;
max-width: 58ch;
}
#contact-hero .elementor-widget-text-editor {
margin-top: 15px;
margin-bottom: 30px;
}
#contact-hero .elementor-button {
background-color: #FDB813;
border-radius: 30px;
padding: 14px 24px;
color: #fff;
}
@media (max-width: 768px) {
#contact-hero h1 {
font-size: 2.5rem;
max-width: none;
}
}
/* the three enquiry cards - same treatment as .four-panel-cols elsewhere */
.elementskit-info-image-box.style-modern {
background: #fff;
border: 1px solid #d9e2ea;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(11, 44, 73, 0.05);
overflow: hidden;
height: 100%;
}
.elementskit-info-image-box .elementskit-box-header img {
border-radius: 0;
}
.elementskit-info-image-box .elementskit-btn {
background: #FDB813 !important;
color: #fff !important;
border-radius: 30px !important;
padding: 12px 26px !important;
font-weight: 600;
border: 0 !important;
transition: all 0.25s ease;
}
.elementskit-info-image-box .elementskit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
/* Cards are equal height, but their descriptions differ by a line, so the
buttons sat at different heights. Push the footer to the bottom of each. */
.elementskit-info-image-box.style-modern .elementskit-box-body {
display: flex;
flex-direction: column;
flex: 1;
}
.elementskit-info-image-box.style-modern .elementskit-box-footer {
margin-top: auto;
}
/* ---------------------------------------------------------------------------
/contact-us/ enquiry cards - proper card treatment
---------------------------------------------------------------------------
Before: section had no padding so the cards butted straight against the hero,
images were object-fit:fill (distorting them), headings were pure black at
18px, body copy #333 - none of it on the brand palette - and there was no
gap or hover state.
--------------------------------------------------------------------------- */
.elementor-element-4db9d51 {
padding: 80px 0 90px;
}
.elementor-element-4db9d51 .elementor-column {
padding-left: 12px;
padding-right: 12px;
}
.elementskit-info-image-box.style-modern {
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.elementskit-info-image-box.style-modern:hover {
transform: translateY(-4px);
box-shadow: 0 18px 45px rgba(11, 44, 73, 0.12);
border-color: #c7d3e0;
}
/* uniform crop instead of a stretched fill */
.elementskit-info-image-box .elementskit-box-header img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
}
.elementskit-info-image-box.style-modern .elementskit-box-body {
padding: 28px 28px 32px;
}
.elementskit-info-image-box .elementskit-info-box-title {
font-size: 1.35rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: #1e293b !important;
margin-bottom: 12px !important;
}
.elementskit-info-image-box .elementskit-box-style-content,
.elementskit-info-image-box .elementskit-box-style-content p {
color: #607080 !important;
font-size: 1rem;
line-height: 1.6;
}
.elementskit-info-image-box .elementskit-box-footer {
padding-top: 22px;
}
/* ---------------------------------------------------------------------------
/solar-power/ - banner flush to the header
---------------------------------------------------------------------------
The whole page is one HTML widget (section.solar-page) sitting inside an
Elementor column. That column's .elementor-widget-wrap carries Elementor's
default padding:10px, which pushed the banner 10px down from the header and
10px in from each edge - the thin grey strip along the top and sides.
The .solar-page markup supplies all its own internal spacing, so the wrapper
padding is not needed here.
--------------------------------------------------------------------------- */
.elementor-349 .elementor-widget-wrap.elementor-element-populated {
padding: 0;
}