/* ============================================================
THEME ENHANCEMENTS — Professional Visual Upgrade
Australian Eco Energy
SAFE TO INCLUDE: This file only ADDS visual polish.
No class names removed. No logic changed. No existing
selectors deleted. Simply link after main.css &
other-styles.css in every page.
Link order in :
============================================================ */
/* ─── CSS CUSTOM PROPERTIES ──────────────────────────────── */
:root {
--green: #0a9642;
--green-dark: #077535;
--green-light: #e8f7ee;
--yellow: #c0ef07;
--yellow-dark: #9bc900;
--navy: #1f242c;
--navy-light: #2d3542;
--blue: #2ea7dd;
--orange: #fe5716;
--white: #ffffff;
--off-white: #f8f9fa;
--text: #444444;
--text-light: #777777;
--border: rgba(0,0,0,0.08);
--shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
--shadow-md: 0 6px 30px rgba(0,0,0,0.12);
--shadow-lg: 0 16px 60px rgba(0,0,0,0.18);
--radius: 10px;
--radius-lg: 18px;
--transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ─── GLOBAL BODY / TYPOGRAPHY ───────────────────────────── */
body {
color: var(--text);
background-color: var(--white);
-webkit-font-smoothing: antialiased;
}
p {
color: var(--text);
line-height: 1.85;
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.5px;
}
a {
transition: color var(--transition),
background-color var(--transition),
box-shadow var(--transition),
transform var(--transition);
}
/* ─── TOPBAR ─────────────────────────────────────────────── */
.topbar {
background: linear-gradient(135deg, #0b7aad 0%, var(--blue) 100%);
padding: 10px 0;
border-bottom: 2px solid rgba(255,255,255,0.15);
}
.topbar ul li {
font-size: 13px;
letter-spacing: 0.3px;
color: rgba(255,255,255,0.92);
}
.topbar a {
color: rgba(255,255,255,0.92);
font-weight: 400;
transition: color var(--transition);
}
.topbar a:hover {
color: var(--yellow);
}
/* ─── HEADER & NAVIGATION ────────────────────────────────── */
header {
background-color: var(--white);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 20px rgba(0,0,0,0.06);
padding: 8px 0;
transition: box-shadow var(--transition), background-color var(--transition);
}
header.fixed {
box-shadow: 0 4px 30px rgba(0,0,0,0.15);
background-color: var(--white);
}
/* Nav links */
header nav ul li > a {
color: #3a3f4a;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.5px;
padding: 0 18px;
line-height: 62px;
position: relative;
transition: color var(--transition), background-color var(--transition);
}
header nav ul li > a::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 3px;
background-color: var(--green);
border-radius: 2px 2px 0 0;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--transition);
}
header nav ul li:hover > a,
header nav ul li.active > a {
background-color: transparent;
color: var(--green);
}
header nav ul li:hover > a::after,
header nav ul li.active > a::after {
transform: scaleX(1);
}
/* Dropdown menu */
header nav ul li ul {
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--shadow-lg);
border-top: 3px solid var(--green);
overflow: hidden;
}
header nav ul li ul li a {
background-color: var(--white);
color: var(--navy);
font-size: 14px;
font-weight: 500;
padding: 13px 22px;
border-bottom: 1px solid rgba(0,0,0,0.05);
transition: background-color var(--transition), color var(--transition), padding-left var(--transition);
}
header nav ul li ul li a:hover {
background-color: var(--green);
color: var(--white);
padding-left: 30px;
}
header nav ul li ul li:hover > a {
background-color: var(--green);
color: var(--white);
}
/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
background: linear-gradient(135deg, var(--navy) 0%, #2d3542 100%);
border-radius: 6px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
padding: 0 32px;
height: 50px;
line-height: 50px;
box-shadow: 0 4px 15px rgba(31,36,44,0.25);
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:hover {
background: linear-gradient(135deg, var(--orange) 0%, #d94000 100%);
color: var(--white);
box-shadow: 0 6px 25px rgba(254,87,22,0.35);
transform: translateY(-1px);
}
.btn.yellow {
background: linear-gradient(135deg, var(--yellow) 0%, #a8d200 100%);
color: #1a1a00;
box-shadow: 0 4px 15px rgba(192,239,7,0.3);
}
.btn.yellow:hover {
background: linear-gradient(135deg, #a8d200 0%, var(--yellow) 100%);
transform: translateY(-1px);
}
/* ─── INNER BANNER ───────────────────────────────────────── */
.innerbanner {
height: 380px;
background-size: cover !important;
position: relative;
}
.innerbanner::before {
background: linear-gradient(
135deg,
rgba(10, 150, 66, 0.55) 0%,
rgba(31, 36, 44, 0.72) 100%
);
}
.innerbanner h1 {
font-size: 58px;
font-weight: 700;
letter-spacing: -1px;
text-shadow: 0 3px 20px rgba(0,0,0,0.4);
}
.innerbanner h1::after {
content: "";
display: block;
width: 70px;
height: 4px;
background: var(--yellow);
margin: 14px auto 0;
border-radius: 2px;
}
/* ─── SECTION: RESIDENTIAL / INNER PAGE ──────────────────── */
.section_innerpage {
padding: 80px 0;
}
.section_innerpage h2 {
font-size: 38px;
font-weight: 700;
color: var(--navy);
margin-bottom: 30px;
line-height: 1.25;
}
.section_innerpage h4 {
font-size: 30px;
font-weight: 700;
color: var(--navy);
margin-bottom: 18px;
padding-top: 30px;
border-top: 3px solid var(--green-light);
}
.section_innerpage h4:first-child {
border-top: none;
padding-top: 0;
}
.section_innerpage h6 {
font-size: 20px;
font-weight: 700;
color: var(--navy);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--green-light);
}
.section_innerpage p {
color: #555;
line-height: 1.9;
}
img.border {
border-radius: var(--radius);
box-shadow: var(--shadow-md);
border: none;
padding: 0;
transition: transform var(--transition), box-shadow var(--transition);
}
img.border:hover {
transform: scale(1.015);
box-shadow: var(--shadow-lg);
}
/* ─── SECTION: RESIDENTIAL2 (icon list / green bg) ───────── */
.section_innerpage.residential2 {
background: linear-gradient(135deg, #0a9642 0%, #077535 100%);
padding: 80px 0;
}
.section_innerpage.residential2 h3 {
color: var(--white);
font-weight: 700;
font-size: 38px;
letter-spacing: -0.5px;
}
.section_innerpage.residential2 ul.iconlist li .box {
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-lg);
padding: 36px 28px;
backdrop-filter: blur(6px);
background-color: rgba(255,255,255,0.05);
transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.section_innerpage.residential2 ul.iconlist li .box:hover {
background-color: rgba(255,255,255,0.15);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.section_innerpage.residential2 ul.iconlist li .box i {
font-size: 56px;
color: var(--yellow);
margin-bottom: 18px;
display: inline-block;
transition: transform var(--transition);
}
.section_innerpage.residential2 ul.iconlist li .box:hover i {
transform: scale(1.12) rotate(-5deg);
}
.section_innerpage.residential2 ul.iconlist li .box h6 {
font-size: 20px;
font-weight: 700;
color: var(--yellow);
margin-bottom: 12px;
border: none;
padding-bottom: 0;
}
.section_innerpage.residential2 ul.iconlist li .box p {
color: rgba(255,255,255,0.88);
font-size: 15px;
line-height: 1.75;
}
.section_innerpage.residential2 p.textWhite {
color: rgba(255,255,255,0.9) !important;
font-size: 18px;
font-weight: 500;
font-style: italic;
margin-top: 10px;
}
/* ─── SECTION: RESIDENTIAL3 ──────────────────────────────── */
.section_innerpage.residential3 {
background-color: var(--off-white);
padding: 80px 0;
}
.section_innerpage.residential3 h4 {
font-size: 28px;
color: var(--navy);
border-top: none;
padding-top: 0;
}
.section_innerpage.residential3 h6 {
font-size: 18px;
font-weight: 700;
color: var(--navy);
margin: 24px 0 12px;
border: none;
padding-bottom: 0;
}
.section_innerpage.residential3 ul.list-icon li {
font-size: 15px;
color: #555;
padding-left: 28px;
margin-bottom: 14px;
line-height: 1.7;
}
.section_innerpage.residential3 ul.list-icon li i {
color: var(--green);
top: 4px;
font-size: 14px;
}
/* ─── PHOTO GALLERY ──────────────────────────────────────── */
.section_gallery ul.photogallery li {
overflow: hidden;
padding: 0 2px;
margin-top: 4px;
}
.section_gallery ul.photogallery li a {
display: block;
overflow: hidden;
position: relative;
}
.section_gallery ul.photogallery li a::after {
content: "\f065";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(10,150,66,0.7), rgba(31,36,44,0.8));
color: white;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--transition);
}
.section_gallery ul.photogallery li a:hover::after {
opacity: 1;
}
.section_gallery ul.photogallery li a img {
display: block;
width: 100%;
transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.section_gallery ul.photogallery li a:hover img {
transform: scale(1.07);
}
/* ─── CERTIFIED LOGOS ────────────────────────────────────── */
.section_certifiedlogo {
background-color: var(--white);
padding: 55px 0;
border-top: 1px solid var(--border);
}
.section_certifiedlogo ul li img {
border: 1px solid rgba(0,0,0,0.08);
border-radius: 8px;
padding: 10px;
filter: grayscale(20%);
transition: filter var(--transition), box-shadow var(--transition), transform var(--transition);
}
.section_certifiedlogo ul li img:hover {
filter: grayscale(0%);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* ─── FOOTER ─────────────────────────────────────────────── */
footer .linkinfo {
background: linear-gradient(160deg, #1a1e27 0%, #23262f 60%, #1e2630 100%);
padding: 75px 0;
border-top: 3px solid var(--green);
}
footer .linkinfo h6 {
font-size: 20px;
font-weight: 400;
color: rgba(255,255,255,0.92);
letter-spacing: 0.3px;
margin-bottom: 28px;
padding-bottom: 20px;
}
footer .linkinfo h6 strong {
color: var(--yellow);
font-weight: 700;
}
footer .linkinfo h6::after {
width: 45px;
height: 2px;
background: linear-gradient(90deg, var(--green), transparent);
border-radius: 1px;
}
footer .linkinfo p {
color: rgba(255,255,255,0.55);
font-size: 15px;
line-height: 1.8;
}
footer .linkinfo p strong {
color: rgba(255,255,255,0.9);
}
footer .linkinfo p a {
color: rgba(255,255,255,0.55);
transition: color var(--transition);
}
footer .linkinfo p a:hover {
color: var(--yellow);
}
footer .linkinfo ul.list-icon li a {
color: rgba(255,255,255,0.55);
font-size: 14px;
transition: color var(--transition), padding-left var(--transition);
}
footer .linkinfo ul.list-icon li a:hover {
color: var(--yellow);
padding-left: 5px;
}
footer .linkinfo ul.list-icon li i {
color: var(--green);
}
footer .copyinfo {
background: #0a0d12;
padding: 18px 0;
}
footer .copyinfo p {
color: rgba(255,255,255,0.4);
font-size: 13px;
}
footer .copyinfo p a {
color: rgba(255,255,255,0.5);
}
footer .copyinfo p a:hover {
color: var(--yellow);
}
/* ─── FIXED CALL/CHAT BUTTONS ────────────────────────────── */
.fixed-btn {
bottom: 24px;
right: 0;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
}
.fixed-btn a.circle {
height: 56px;
font-size: 14px !important;
font-weight: 600;
letter-spacing: 0.5px;
padding: 0 18px;
line-height: 56px;
transition: filter var(--transition), transform var(--transition);
}
.fixed-btn a.circle i {
font-size: 20px;
line-height: 56px;
}
.fixed-btn a.circle.phone {
background: linear-gradient(135deg, #cc0000, #e50000);
}
.fixed-btn a.circle.chat {
background: linear-gradient(135deg, #267a22, #2dab26);
}
.fixed-btn a.circle:hover {
filter: brightness(1.15);
transform: scale(1.03);
background-image: none;
background-color: var(--green);
}
/* ─── LIST ICON GLOBAL ───────────────────────────────────── */
ul.list-icon li {
font-size: 15px;
color: #555;
line-height: 1.7;
padding-left: 26px;
margin-bottom: 12px !important;
}
ul.list-icon li i {
color: var(--green);
font-size: 14px;
top: 5px;
}
/* ─── HOMEPAGE SECTIONS ──────────────────────────────────── */
/* About section */
.section_aboutinfo {
padding: 80px 0;
}
.section_aboutinfo h6.underline {
color: var(--orange);
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
}
.section_aboutinfo h6.underline::after {
background: linear-gradient(90deg, var(--orange), transparent);
height: 2px;
width: 80px;
}
.section_aboutinfo h2 {
font-size: 40px;
color: var(--navy);
font-weight: 700;
}
.section_aboutinfo h2 span {
color: var(--green);
font-size: 48px;
}
.section_aboutinfo ul li .box {
border-radius: var(--radius-lg);
padding: 50px 180px 50px 35px;
transition: transform var(--transition), box-shadow var(--transition);
}
.section_aboutinfo ul li .box:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.section_aboutinfo ul li .box.blue {
background: linear-gradient(135deg, #00004b 0%, #00006e 100%);
}
.section_aboutinfo ul li .box.green {
background: linear-gradient(135deg, #0a9642 0%, #077535 100%);
}
/* Services section */
.section_provideservices {
background: linear-gradient(180deg, #f2f4f6 0%, #e8eaed 100%);
padding: 80px 30px;
}
.section_provideservices h3 {
font-size: 38px;
color: var(--navy);
font-weight: 800;
}
.section_provideservices ul li a.thumb {
border-radius: var(--radius);
border: none;
box-shadow: var(--shadow-md);
overflow: hidden;
transition: box-shadow var(--transition);
}
.section_provideservices ul li:hover a.thumb {
box-shadow: var(--shadow-lg);
}
/* Make appointment section */
.section_makeappointment {
background: linear-gradient(135deg, #1e88c9 0%, var(--blue) 50%, #0a7aad 100%),
url(../img/make-appointment-bg.jpg) no-repeat right bottom;
background-blend-mode: multiply;
}
.section_makeappointment h3 {
font-size: 40px;
font-weight: 800;
}
/* Company stats */
.section_companystatistics {
background-color: var(--off-white);
}
.section_companystatistics .textinfo ul li .box {
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: box-shadow var(--transition), transform var(--transition);
}
.section_companystatistics .textinfo ul li .box:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
/* Recent projects */
.section_recentprojects {
background: linear-gradient(160deg, #1a1e27 0%, var(--navy) 100%);
padding: 80px 0;
}
.section_recentprojects h3 {
color: var(--yellow);
font-size: 40px;
}
.section_recentprojects .project-slider .slick-slide .thumb {
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--transition);
}
.section_recentprojects .project-slider .slick-slide .thumb:hover {
transform: translateY(-4px);
}
.section_recentprojects .project-slider .slick-slide .thumb .overlay {
border-radius: 0 0 var(--radius) var(--radius);
}
/* Why choose us */
.section_whychooseus .textinfo h3 {
color: var(--navy);
font-size: 38px;
}
.section_whychooseus .textinfo h3::after {
background: linear-gradient(90deg, var(--green), transparent);
height: 3px;
width: 80px;
}
.section_whychooseus .textinfo ul li strong {
color: var(--navy);
font-size: 17px;
font-weight: 700;
}
/* Testimonials */
.section-testimonials {
background: #f4f6f8 url(../img/client-testimonials-bg.jpg) no-repeat center bottom;
padding: 90px 0 175px;
}
.section-testimonials h3 {
font-size: 40px;
font-weight: 800;
}
.section-testimonials .testimonial-slider .slick-slide .item {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
transition: transform var(--transition), box-shadow var(--transition);
}
.section-testimonials .testimonial-slider .slick-slide .item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.section-testimonials .testimonial-slider .slick-slide .item h6 {
font-weight: 700;
color: var(--navy);
}
/* ─── FORM INPUTS ────────────────────────────────────────── */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea {
border: 1.5px solid #dde0e6;
border-radius: 8px;
background-color: var(--white);
font-size: 15px;
padding: 0 16px;
color: var(--navy);
transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(10,150,66,0.12);
background-color: var(--white);
}
textarea {
border-radius: 8px;
padding: 14px 16px;
}
select {
border: 1.5px solid #dde0e6;
border-radius: 8px;
background-color: var(--white);
font-size: 15px;
color: var(--navy);
transition: border-color var(--transition), box-shadow var(--transition);
}
select:hover,
select:focus {
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(10,150,66,0.12);
}
/* ─── HR DIVIDER ─────────────────────────────────────────── */
hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent);
margin: 50px 0;
}
/* ─── SECTION GALLERY OVERLAY FIX ───────────────────────── */
.section_gallery {
overflow: hidden;
}
/* ─── RESIDENTIALNEW COMPONENT ───────────────────────────── */
.residentialNew .textinfo h3 {
font-size: 34px;
font-weight: 700;
color: var(--navy);
}
.residentialNew .textinfo ul li strong {
font-size: 17px;
color: var(--navy);
font-weight: 700;
margin-bottom: 4px;
}
/* ─── SLICK DOTS UPGRADE ─────────────────────────────────── */
.home-banner .home-slider .slick-dots li button {
border-radius: 3px;
height: 5px;
width: 24px;
transition: width var(--transition), background-color var(--transition);
}
.home-banner .home-slider .slick-dots li.slick-active button {
background-color: var(--yellow);
width: 72px;
}
/* ─── SECTION: EFFICIENT SOLUTIONS ──────────────────────── */
.section_efficientsolutions {
padding: 80px 0;
}
.section_efficientsolutions h3 {
font-size: 38px;
font-weight: 800;
}
.section_efficientsolutions ol li .column {
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
}
.section_efficientsolutions ul li {
transition: background-color var(--transition);
}
.section_efficientsolutions ul li:hover {
background-color: rgba(10,150,66,0.04);
}
.section_efficientsolutions ul li .box p strong {
font-size: 17px;
color: var(--navy);
}
/* ─── SECTION: 3 STEPS ───────────────────────────────────── */
.section_3steps ul li .thumb .number {
font-size: 38px;
font-weight: 700;
letter-spacing: 1px;
}
/* ─── SECTION: PRESTIGIOUS CLIENTS ──────────────────────── */
.section_prestigiousclients {
padding: 50px 0;
border-top: 1px solid var(--border);
}
.section_prestigiousclients .client-slider .slick-list .slick-slide img {
border-radius: 6px;
box-shadow: var(--shadow-sm);
filter: grayscale(30%);
transition: filter var(--transition), transform var(--transition);
}
.section_prestigiousclients .client-slider .slick-list .slick-slide img:hover {
filter: grayscale(0%);
transform: scale(1.04);
}
/* ─── SECTION: THANK YOU ─────────────────────────────────── */
.section_thankyou h2 {
color: var(--navy);
font-weight: 800;
}
.section_thankyou h2 span {
color: var(--green);
}
/* ─── SMALL UTILITY CLASSES ──────────────────────────────── */
.textGreen { color: var(--green) !important; }
.textWhite { color: rgba(255,255,255,0.9) !important; }
/* ─── SCROLL ANIMATIONS POLISH ───────────────────────────── */
[data-aos] {
backface-visibility: hidden;
}
/* ─── RESPONSIVE TWEAKS ──────────────────────────────────── */
@media all and (max-width: 1024px) {
.innerbanner h1 {
font-size: 38px;
}
.section_innerpage h2 {
font-size: 30px;
}
.section_innerpage.residential2 h3 {
font-size: 30px;
}
footer .linkinfo {
padding: 55px 0;
}
}
@media all and (max-width: 768px) {
.innerbanner {
height: 280px;
}
.innerbanner h1 {
font-size: 30px;
}
.section_innerpage h4 {
font-size: 22px;
}
footer .linkinfo {
padding: 40px 0 10px;
}
.fixed-btn a.circle {
height: 52px;
line-height: 52px;
font-size: 13px !important;
}
}
/* ─── HEADER MOBILE MENU ─────────────────────────────────── */
@media all and (max-width: 1024px) {
header nav button {
background: var(--green);
border-radius: 6px;
color: var(--white);
font-size: 14px;
font-weight: 600;
padding: 0 18px;
height: 42px;
transition: background-color var(--transition);
}
header nav button:hover {
background: var(--green-dark);
}
header nav ul {
background: var(--white);
border-top: 3px solid var(--green);
box-shadow: var(--shadow-lg);
}
header nav ul li > a {
border-bottom: 1px solid var(--border);
padding: 14px 20px;
line-height: 1.4;
color: var(--navy);
}
header nav ul li > a::after {
display: none;
}
header nav ul li:hover > a,
header nav ul li.active > a {
background-color: var(--green-light);
color: var(--green-dark);
}
header nav ul li ul {
position: relative;
left: 0 !important;
opacity: 1;
visibility: visible;
box-shadow: none;
border-top: none;
border-left: 3px solid var(--green);
margin-left: 20px;
}
header nav ul li ul li a {
padding: 12px 16px;
font-size: 14px;
color: #555;
}
header nav ul li ul li a:hover {
padding-left: 22px;
color: var(--green);
background-color: var(--green-light);
}
}
/* ─── RESIDENTIAL INNER PAGE SPECIFIC FIXES ──────────────── */
.section_innerpage.residential1 {
padding: 70px 0 60px;
}
.section_innerpage.residential1 h2 {
font-size: 34px;
margin-bottom: 25px;
color: var(--navy);
}
.section_innerpage.residential3 .row .col-50 p img {
border-radius: var(--radius);
}
/* Contact form address block */
.section_innerpage address {
background: linear-gradient(160deg, #0a9642 0%, #077535 100%);
border-radius: var(--radius-lg);
padding: 45px 35px;
}
.section_innerpage address h5 {
font-size: 26px;
font-weight: 700;
color: var(--white);
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 18px;
margin-bottom: 22px;
}
.section_innerpage address h5 strong {
color: var(--yellow);
}
/* ─── PRINT SAFETY ───────────────────────────────────────── */
@media print {
.topbar,
.fixed-btn,
header nav button { display: none; }
.innerbanner { height: 80px; }
.innerbanner::before { background: none; }
.innerbanner h1 { color: #000; font-size: 28px; }
}