/* index.html */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@700;900&family=Inter:wght@400;500;600&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.font-hero {
font-family: 'Big Shoulders Text', cursive;
}
:root {
color-scheme: dark;
}
html[data-theme="light"] {
color-scheme: light;
}
.theme-toggle {
position: relative;
display: inline-flex;
width: 74px;
height: 38px;
align-items: center;
justify-content: space-between;
padding: 4px;
border: 1px solid rgba(153, 202, 61, 0.62);
border-radius: 9999px;
background: rgba(0, 0, 0, 0.45);
color: #fff;
backdrop-filter: blur(10px);
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.theme-toggle::before {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: 28px;
content: "";
border-radius: 9999px;
background: #99CA3D;
transform: translateX(36px);
transition: transform 180ms ease;
}
.theme-toggle__icon {
position: relative;
z-index: 1;
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
color: #0a0a0a;
transition: color 180ms ease, opacity 180ms ease;
}
.theme-toggle__icon--sun {
color: rgba(255, 255, 255, 0.74);
opacity: 0.7;
}
.theme-toggle__icon--moon {
color: #0a0a0a;
opacity: 1;
}
html[data-theme="light"] .theme-toggle {
border-color: rgba(17, 24, 39, 0.18);
background: rgba(255, 255, 255, 0.82);
color: #111827;
}
html[data-theme="light"] .theme-toggle::before {
transform: translateX(0);
background: #111827;
}
html[data-theme="light"] .theme-toggle__icon--sun {
color: #fff;
opacity: 1;
}
html[data-theme="light"] .theme-toggle__icon--moon {
color: rgba(17, 24, 39, 0.72);
opacity: 0.7;
}
html[data-theme="light"] body {
background: #f5f7ef;
color: #10150d;
}
html[data-theme="light"] body.bg-\[\#050605\],
html[data-theme="light"] body.bg-\[\#0a0a0a\] {
background: #f5f7ef !important;
}
html[data-theme="light"] .site-header {
color: #10150d;
}
html[data-theme="light"] .site-header nav a,
html[data-theme="light"] .client-portal-link {
color: #10150d !important;
}
html[data-theme="light"] .hero-section .site-header nav a,
html[data-theme="light"] .hero-section .site-header .client-portal-link,
html[data-theme="light"] .hero-section .site-header button:not(.theme-toggle) {
color: #fff !important;
}
html[data-theme="light"] .hero-section .site-header .client-portal-link {
border-color: rgba(255, 255, 255, 0.55) !important;
}
html[data-theme="light"] .hero-section .site-header.is-sticky {
background: rgba(0, 0, 0, 0.8);
border-bottom-color: rgba(153, 202, 61, 0.65);
}
html[data-theme="light"] .site-header.border-b {
border-bottom-color: rgba(16, 21, 13, 0.1) !important;
}
html[data-theme="light"] .site-header.is-sticky {
background: rgba(255, 255, 255, 0.86);
border-bottom-color: rgba(153, 202, 61, 0.72);
}
html[data-theme="light"] .site-header.is-sticky nav a,
html[data-theme="light"] .site-header.is-sticky .client-portal-link {
color: #10150d;
border-color: rgba(16, 21, 13, 0.32);
}
html[data-theme="light"] .energy-section,
html[data-theme="light"] .trifecta-section,
html[data-theme="light"] .footer-reveal,
html[data-theme="light"] footer {
background-color: #f5f7ef !important;
color: #10150d;
}
html[data-theme="light"] .energy-service-card,
html[data-theme="light"] .trifecta-card {
border-color: rgba(16, 21, 13, 0.1) !important;
background: rgba(255, 255, 255, 0.86) !important;
box-shadow: 0 24px 60px rgba(16, 21, 13, 0.08);
}
html[data-theme="light"] .trifecta-section > .absolute {
background: linear-gradient(90deg, rgba(245, 247, 239, 0.94), rgba(245, 247, 239, 0.9), rgba(245, 247, 239, 0.76)) !important;
}
html[data-theme="light"] .energy-section h2,
html[data-theme="light"] .trifecta-section h2,
html[data-theme="light"] .energy-service-card h3,
html[data-theme="light"] .trifecta-card h3,
html[data-theme="light"] .footer-reveal h3,
html[data-theme="light"] footer h3,
html[data-theme="light"] footer .text-white,
html[data-theme="light"] .footer-reveal .text-white {
color: #10150d !important;
}
html[data-theme="light"] .energy-section p,
html[data-theme="light"] .trifecta-section p,
html[data-theme="light"] .energy-service-card .text-gray-400,
html[data-theme="light"] .trifecta-card .text-gray-400,
html[data-theme="light"] .footer-reveal .text-gray-400,
html[data-theme="light"] .footer-reveal .text-gray-300,
html[data-theme="light"] .footer-reveal .text-gray-500,
html[data-theme="light"] footer,
html[data-theme="light"] footer .text-gray-300,
html[data-theme="light"] footer .text-gray-400,
html[data-theme="light"] footer .text-gray-500 {
color: #4b5543 !important;
}
html[data-theme="light"] .trifecta-section ul,
html[data-theme="light"] .trifecta-section li,
html[data-theme="light"] .trifecta-section .text-gray-300,
html[data-theme="light"] .trifecta-section .text-\[\#bfbfbf\] {
color: #4b5543 !important;
}
html[data-theme="light"] .trifecta-section li strong,
html[data-theme="light"] .trifecta-card .text-white,
html[data-theme="light"] .trifecta-card .text-gray-500 {
color: #10150d !important;
}
html[data-theme="light"] .trifecta-card .text-\[\#99CA3D\] {
color: #10150d !important;
}
html[data-theme="light"] .trifecta-card .border-gray-800 {
border-color: rgba(16, 21, 13, 0.28) !important;
}
html[data-theme="light"] .trifecta-card span.border {
border-color: rgba(29, 156, 235, 0.42) !important;
color: #4b5543 !important;
background: rgba(29, 156, 235, 0.04);
}
html[data-theme="light"] footer .bg-\[\#0a0a0a\],
html[data-theme="light"] footer .bg-black {
background-color: #fff !important;
}
html[data-theme="light"] footer .border-gray-800,
html[data-theme="light"] footer .border-gray-700 {
border-color: rgba(16, 21, 13, 0.12) !important;
}
html[data-theme="light"] .footer-quick-links a {
border-color: rgba(111, 152, 41, 0.22);
background: rgba(255, 255, 255, 0.72);
color: #4b5543;
}
html[data-theme="light"] footer a:hover,
html[data-theme="light"] footer ul a:hover {
color: #6f9829 !important;
}
html[data-theme="light"] .partners-section {
background-color: #edf3e4 !important;
}
html[data-theme="light"] .partners-section > .absolute:nth-child(1) {
background: rgba(255, 255, 255, 0.82) !important;
}
html[data-theme="light"] .partners-section > .absolute:nth-child(2) {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72)) !important;
}
html[data-theme="light"] .partners-section h2 {
color: #10150d !important;
}
html[data-theme="light"] .partner-card {
border-color: rgba(16, 21, 13, 0.1) !important;
background: rgba(255, 255, 255, 0.78) !important;
box-shadow: 0 24px 60px rgba(16, 21, 13, 0.1);
}
html[data-theme="light"] .partner-card p {
color: #4b5543 !important;
}
html[data-theme="light"] .funding-partners-section > .absolute:nth-child(1) {
background: rgba(16, 21, 13, 0.72) !important;
}
html[data-theme="light"] .funding-partners-section > .absolute:nth-child(2) {
background: linear-gradient(90deg, rgba(16, 21, 13, 0.92), rgba(16, 21, 13, 0.82), rgba(16, 21, 13, 0.62)) !important;
}
html[data-theme="light"] .funding-partners-section h2,
html[data-theme="light"] .funding-partners-section h3,
html[data-theme="light"] .funding-partners-section .funding-partner-eyebrow,
html[data-theme="light"] .funding-partners-section .funding-benefit p,
html[data-theme="light"] .funding-partners-section .funding-note p,
html[data-theme="light"] .funding-partners-section .funding-copy > p:not(:first-child) {
color: #fff !important;
}
html[data-theme="light"] .funding-partners-section .funding-partner-eyebrow span {
color: #99CA3D !important;
}
html[data-theme="light"] .funding-partners-section .funding-partner-card {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
html[data-theme="light"] .enquiry-modal,
html[data-theme="light"] .portal-modal,
html[data-theme="light"] .offering-modal {
background: rgba(245, 247, 239, 0.86);
}
html[data-theme="light"] .enquiry-dialog,
html[data-theme="light"] .portal-dialog,
html[data-theme="light"] .offering-dialog {
background: #fff;
color: #10150d;
}
html[data-theme="light"] .portal-dialog__title,
html[data-theme="light"] .portal-dialog #portal-title {
color: #10150d !important;
}
html[data-theme="light"] .portal-dialog .text-gray-400 {
color: #4b5543 !important;
}
html[data-theme="light"] .offering-dialog {
border-color: #6f9829;
background: #fff;
color: #10150d;
box-shadow: 0 28px 90px rgba(16, 21, 13, 0.2);
}
html[data-theme="light"] .offering-dialog::before {
background: radial-gradient(circle at 52% 50%, rgba(153, 202, 61, 0.18), transparent 44%), linear-gradient(90deg, rgba(153, 202, 61, 0.14), transparent);
}
html[data-theme="light"] .offering-wordmark,
html[data-theme="light"] .offering-number {
color: rgba(16, 21, 13, 0.08);
}
html[data-theme="light"] .offering-close {
border-color: rgba(16, 21, 13, 0.58);
color: #10150d;
background: rgba(255, 255, 255, 0.72);
}
html[data-theme="light"] .offering-close:hover {
border-color: #6f9829;
background: #99CA3D;
color: #10150d;
}
html[data-theme="light"] .offering-visual {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)), var(--offering-image);
}
html[data-theme="light"] .offering-visual::before {
background: radial-gradient(circle at 52% 48%, rgba(153, 202, 61, 0.16), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.26));
}
html[data-theme="light"] .offering-icon-ring {
border-color: #6f9829;
color: #6f9829;
background: rgba(153, 202, 61, 0.08);
}
html[data-theme="light"] .offering-eyebrow {
color: #6f9829;
}
html[data-theme="light"] .offering-title {
color: #087cc7;
}
html[data-theme="light"] .offering-subtitle,
html[data-theme="light"] .offering-body {
color: #4b5543;
}
html[data-theme="light"] .offering-list {
color: #10150d;
}
html[data-theme="light"] .offering-list span {
border-color: #6f9829;
color: #6f9829;
background: rgba(153, 202, 61, 0.08);
}
html[data-theme="light"] .offering-start {
border-color: #6f9829;
border-left-color: #087cc7;
color: #10150d;
background: #fff;
}
html[data-theme="light"] .offering-start:hover {
border-color: #6f9829;
background: #99CA3D;
color: #10150d;
}
html[data-theme="light"] main section.bg-black,
html[data-theme="light"] main section.bg-\[\#050605\],
html[data-theme="light"] main section.bg-\[\#0a0a0a\] {
background-color: #f5f7ef !important;
color: #10150d;
}
html[data-theme="light"] main .bg-\[\#111111\],
html[data-theme="light"] main .bg-\[\#0d0f0d\],
html[data-theme="light"] main .bg-black {
background-color: rgba(255, 255, 255, 0.86) !important;
color: #10150d;
}
html[data-theme="light"] main .text-white {
color: #10150d !important;
}
html[data-theme="light"] main .text-gray-300,
html[data-theme="light"] main .text-gray-400,
html[data-theme="light"] main .text-gray-500,
html[data-theme="light"] main .text-\[\#bfbfbf\] {
color: #4b5543 !important;
}
html[data-theme="light"] main .border-white\/5,
html[data-theme="light"] main .border-white\/10,
html[data-theme="light"] main .border-gray-800,
html[data-theme="light"] main .border-gray-900 {
border-color: rgba(16, 21, 13, 0.1) !important;
}
html[data-theme="light"] .article-card,
html[data-theme="light"] .sla-packages,
html[data-theme="light"] .sla-tier-card {
border-color: rgba(153, 202, 61, 0.32) !important;
background: rgba(255, 255, 255, 0.86) !important;
color: #10150d;
box-shadow: 0 24px 60px rgba(16, 21, 13, 0.08);
}
html[data-theme="light"] .sla-packages > .absolute {
opacity: 0.7;
}
html[data-theme="light"] .article-card h2,
html[data-theme="light"] .sla-packages h2,
html[data-theme="light"] .sla-tier-card h3 {
color: #10150d !important;
}
html[data-theme="light"] .article-card p,
html[data-theme="light"] .sla-packages p,
html[data-theme="light"] .sla-tier-card p,
html[data-theme="light"] .sla-tier-card em {
color: #4b5543 !important;
}
html[data-theme="light"] .article-load-more {
background: #10150d !important;
color: #fff !important;
}
html[data-theme="light"] .article-load-more:hover {
background: #99CA3D !important;
color: #10150d !important;
}
html[data-theme="light"] .sla-tier-card__cta {
background: #10150d;
color: #fff;
}
html[data-theme="light"] .hero-section {
background: #000 !important;
color: #fff !important;
}
html[data-theme="light"] .hero-section .hero-kicker,
html[data-theme="light"] .hero-section .text-white {
color: #fff !important;
}
html[data-theme="light"] .hero-section .hero-copy,
html[data-theme="light"] .hero-section .text-gray-200 {
color: #e5e7eb !important;
}
html[data-theme="light"] .hero-section .text-gray-300 {
color: #d1d5db !important;
}
html[data-theme="light"] .hero-section .text-gray-400 {
color: #9ca3af !important;
}
html[data-theme="light"] .hero-section .text-gray-500 {
color: #6b7280 !important;
}
html[data-theme="light"] .hero-section .bg-black\/60 {
background-color: rgb(0 0 0 / 0.6) !important;
}
html[data-theme="light"] .hero-section .hero-cta button:hover {
background-color: rgb(0 0 0 / 0.8) !important;
}
@keyframes fadeRise {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spinGlow {
from {
transform: rotate(0deg) scale(1);
box-shadow: 0 0 18px rgba(153, 202, 61, 0.25);
}
50% {
transform: rotate(180deg) scale(1.08);
box-shadow: 0 0 34px rgba(153, 202, 61, 0.42);
}
to {
transform: rotate(360deg) scale(1);
box-shadow: 0 0 18px rgba(153, 202, 61, 0.25);
}
}
@keyframes progressFill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes dashFlow {
to {
stroke-dashoffset: -120;
}
}
.site-header {
transition: background-color 200ms ease, border-color 200ms ease, padding 200ms ease, box-shadow 200ms ease;
}
.site-header.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
background: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid rgba(153, 202, 61, 0.65);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
}
.site-header nav a {
position: relative;
}
.site-header nav a::after {
position: absolute;
right: 0;
bottom: -8px;
left: 0;
height: 2px;
content: "";
transform: scaleX(0);
transform-origin: left;
background: #99CA3D;
transition: transform 200ms ease;
}
.site-header nav a:hover {
color: #99CA3D;
}
.site-header nav a:hover::after {
transform: scaleX(1);
}
.site-header .client-portal-link:hover {
border-color: #99CA3D;
box-shadow: 0 0 24px rgba(153, 202, 61, 0.28);
transform: scale(1.04);
}
.hero-section {
position: relative;
overflow: hidden;
--hero-video-position: center center;
background-color: #000;
}
.hero-section__backdrop {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background-color: #000;
}
.hero-section__overlay {
position: absolute;
inset: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.4);
}
.hero-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--hero-video-position);
}
.hero-section::after {
display: none;
}
.hero-kicker,
.hero-cta,
.hero-copy,
.hero-card:not(.hero-offering-card) {
opacity: 0;
animation: fadeRise 500ms ease-out forwards;
}
.hero-offering-card.hero-card {
opacity: 0;
animation: none;
}
.hero-kicker {
animation-delay: 120ms;
}
.hero-cta {
animation-delay: 240ms;
}
.hero-copy {
animation-delay: 360ms;
}
.hero-offering-card {
border: 1px solid rgba(153, 202, 61, 0.24);
background-color: #111;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 18px 46px rgba(0, 0, 0, 0.28);
transition:
opacity 900ms ease,
transform 900ms ease,
border-color 500ms ease,
box-shadow 500ms ease,
background-color 500ms ease;
}
.hero-offering-card--solar {
background-color: #10150d;
}
.hero-offering-card--power {
background-color: #11161b;
}
.hero-offering-card--charge {
background-color: #12110c;
}
.hero-offering-card--energy {
background-color: #0d1415;
}
.hero-offering-card:hover,
.hero-offering-card:focus-visible,
.hero-offering-card.is-visible {
border-color: rgba(153, 202, 61, 0.82);
box-shadow: inset 0 0 0 1px rgba(153, 202, 61, 0.16), 0 22px 58px rgba(0, 0, 0, 0.42);
transform: translateY(-4px);
}
.hero-offering-card::before {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 0;
height: 3px;
content: "";
background: linear-gradient(90deg, #1D9CEB, #F5851F, #99CA3D);
transition: width 900ms ease;
}
.hero-offering-card::after {
position: absolute;
right: 1.15rem;
bottom: 1.15rem;
z-index: 3;
display: grid;
width: 2.25rem;
height: 2.25rem;
place-items: center;
border: 1px solid rgba(153, 202, 61, 0.66);
border-radius: 9999px;
color: #99CA3D;
content: ">";
font-family: 'Big Shoulders Text', cursive;
font-size: 1.25rem;
font-weight: 900;
line-height: 1;
opacity: 0;
transform: translateX(-8px);
transition: opacity 750ms ease, transform 750ms ease;
pointer-events: none;
}
.hero-offering-card.is-visible::before,
.hero-offering-card:hover::before,
.hero-offering-card:focus-visible::before {
width: 100%;
}
.hero-offering-card.is-visible::after,
.hero-offering-card:hover::after,
.hero-offering-card:focus-visible::after {
opacity: 1;
transform: translateX(0);
}
.hero-offering-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1.5rem;
}
.hero-offering-header h2 {
color: #fff;
font-size: clamp(2.65rem, 4vw, 4.25rem);
letter-spacing: 0;
}
.hero-offering-header p {
max-width: 520px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.98rem;
font-weight: 700;
line-height: 1.45;
text-align: right;
}
.hero-offering-content {
position: relative;
display: flex;
height: 100%;
flex-direction: column;
justify-content: flex-end;
padding: 1.25rem;
padding-right: 4.85rem;
}
.hero-offering-topline {
position: absolute;
top: 1.05rem;
right: 1.05rem;
z-index: 2;
display: block;
pointer-events: none;
}
.hero-offering-icon {
position: relative;
z-index: 2;
display: flex;
width: 52px;
height: 52px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 9999px;
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.hero-offering-icon svg {
width: 26px;
height: 26px;
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-offering-number {
display: none;
}
.hero-offering-title {
margin-bottom: 0.35rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(1.9rem, 2.45vw, 2.32rem);
font-weight: 900;
line-height: 0.96;
text-transform: uppercase;
white-space: nowrap;
}
.hero-offering-detail {
display: flex;
align-items: center;
gap: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 0.75rem;
color: rgba(255, 255, 255, 0.62);
font-size: 0.75rem;
line-height: 1.35;
}
.hero-card:nth-child(1) {
animation-delay: 480ms;
}
.hero-card:nth-child(2) {
animation-delay: 600ms;
}
.hero-card:nth-child(3) {
animation-delay: 720ms;
}
.hero-card:nth-child(4) {
animation-delay: 840ms;
}
.hero-cta svg {
transition: transform 150ms ease, color 150ms ease;
}
.hero-cta:hover svg {
color: #99CA3D;
transform: translateX(6px);
}
.energy-service-card,
.partner-card,
.sla-tier-card {
position: relative;
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms ease, transform 600ms ease, border-color 250ms ease;
}
.trifecta-card {
position: relative;
opacity: 0;
transform: translateY(24px);
transition:
opacity 900ms ease,
transform 900ms ease,
border-color 500ms ease,
box-shadow 500ms ease;
}
.energy-service-card::before,
.sla-tier-card::before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: linear-gradient(90deg, #1D9CEB, #99CA3D);
transition: width 250ms ease;
}
.trifecta-card::before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: linear-gradient(90deg, #1D9CEB, #99CA3D);
transition: width 750ms ease;
}
.energy-service-card.is-visible,
.partner-card.is-visible,
.sla-tier-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.trifecta-card.is-visible {
opacity: 1;
transform: translateY(-6px);
border-color: rgba(255, 255, 255, 0.8);
}
.energy-service-card:hover,
.trifecta-card:hover,
.trifecta-card.is-visible,
.sla-tier-card:hover,
.sla-tier-card:focus-within {
transform: translateY(-6px);
border-color: rgba(255, 255, 255, 0.8);
}
.energy-service-card:hover::before,
.trifecta-card:hover::before,
.trifecta-card.is-visible::before,
.sla-tier-card:hover::before,
.sla-tier-card:focus-within::before {
width: 100%;
}
.footer-quick-links a {
position: relative;
display: flex;
min-height: 44px;
align-items: center;
border: 1px solid rgba(153, 202, 61, 0.18);
border-radius: 8px;
padding: 0.65rem 0.85rem;
background: rgba(17, 17, 17, 0.62);
color: #d1d5db;
overflow: hidden;
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms ease, transform 600ms ease, border-color 250ms ease, color 150ms ease, box-shadow 150ms ease;
}
.footer-quick-links a::before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: linear-gradient(90deg, #1D9CEB, #99CA3D);
transition: width 250ms ease;
}
.footer-quick-links a.is-visible {
opacity: 1;
transform: translateY(0);
}
.footer-quick-links a:hover,
.footer-quick-links a:focus-visible {
border-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
color: #99CA3D;
transform: translateY(-6px);
outline: none;
}
.footer-quick-links a:hover::before,
.footer-quick-links a:focus-visible::before {
width: 100%;
}
.trifecta-learn {
display: inline-flex;
width: max-content;
align-items: center;
gap: 0.75rem;
margin-bottom: 2rem;
border: 1px solid rgba(153, 202, 61, 0.62);
border-radius: 9999px;
background: rgba(153, 202, 61, 0.08);
padding: 0.72rem 1.05rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.trifecta-learn:hover,
.trifecta-learn:focus-visible {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
outline: none;
transform: translateY(-2px);
}
.trifecta-modal {
position: fixed;
inset: 0;
z-index: 110;
display: none;
align-items: center;
justify-content: center;
padding: 1.25rem;
background: rgba(0, 0, 0, 0.82);
backdrop-filter: blur(12px);
}
.trifecta-modal.is-open {
display: flex;
}
.trifecta-dialog {
position: relative;
width: min(720px, 100%);
max-height: calc(100vh - 2.5rem);
overflow-y: auto;
border: 1px solid rgba(153, 202, 61, 0.36);
border-radius: 18px;
background: #111;
padding: 2rem;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}
.trifecta-dialog::before {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
content: "";
background: linear-gradient(90deg, #1D9CEB, #99CA3D);
}
.trifecta-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 9999px;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.55rem;
line-height: 1;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.trifecta-close:hover,
.trifecta-close:focus-visible {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
outline: none;
}
.trifecta-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
padding-right: 3.2rem;
}
.trifecta-modal-number {
color: #1D9CEB;
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(3rem, 7vw, 4.5rem);
font-weight: 900;
line-height: 0.9;
}
.trifecta-modal-logo {
width: 112px;
height: 112px;
object-fit: contain;
border-radius: 9999px;
}
.trifecta-modal-department {
margin-top: 2rem;
color: #7f8da4;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.trifecta-modal-title {
margin-top: 0.65rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(3rem, 8vw, 4.75rem);
font-weight: 900;
line-height: 0.95;
text-transform: uppercase;
}
.trifecta-modal-alias {
margin-top: 0.7rem;
color: #99CA3D;
font-style: italic;
}
.trifecta-modal-statement {
margin-top: 1rem;
color: #fff;
font-weight: 700;
line-height: 1.5;
}
.trifecta-modal-rule {
margin: 1.6rem 0;
border-color: rgba(255, 255, 255, 0.12);
}
.trifecta-modal-body {
color: rgba(255, 255, 255, 0.72);
font-size: 1rem;
line-height: 1.75;
}
.trifecta-modal-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
.trifecta-modal-tags span {
border: 1px solid rgba(29, 156, 235, 0.38);
border-radius: 9999px;
padding: 0.45rem 1rem;
color: rgba(255, 255, 255, 0.82);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
html[data-theme="light"] .trifecta-learn {
border-color: rgba(95, 143, 24, 0.58);
background: rgba(153, 202, 61, 0.12);
color: #10150d;
}
html[data-theme="light"] .trifecta-learn:hover,
html[data-theme="light"] .trifecta-learn:focus-visible {
background: #99CA3D;
color: #10150d;
}
html[data-theme="light"] .trifecta-modal {
background: rgba(245, 247, 239, 0.86);
}
html[data-theme="light"] .trifecta-dialog {
border-color: rgba(111, 152, 41, 0.42);
background: #fff;
box-shadow: 0 28px 90px rgba(16, 21, 13, 0.18);
}
html[data-theme="light"] .trifecta-close {
border-color: rgba(16, 21, 13, 0.5);
color: #10150d;
}
html[data-theme="light"] .trifecta-modal-title,
html[data-theme="light"] .trifecta-modal-statement {
color: #10150d;
}
html[data-theme="light"] .trifecta-modal-department,
html[data-theme="light"] .trifecta-modal-body {
color: #4b5543;
}
html[data-theme="light"] .trifecta-modal-rule {
border-color: rgba(16, 21, 13, 0.18);
}
html[data-theme="light"] .trifecta-modal-tags span {
color: #4b5543;
background: rgba(29, 156, 235, 0.04);
}
.funding-partners-section {
isolation: isolate;
}
.funding-layout {
position: relative;
}
.funding-layout::before {
position: absolute;
top: -4rem;
bottom: -4rem;
left: 46%;
width: 1px;
content: "";
background: #99CA3D;
opacity: 0.7;
transform: skewX(-18deg);
}
.funding-benefit {
position: relative;
min-height: 138px;
padding-right: 1rem;
}
.funding-benefit:not(:last-child)::after {
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
content: "";
background: rgba(255, 255, 255, 0.16);
}
.funding-benefit svg,
.funding-note svg {
width: 42px;
height: 42px;
fill: none;
stroke: #99CA3D;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.funding-benefit h3 {
margin-top: 0.9rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.35rem;
font-weight: 700;
line-height: 0.98;
text-transform: uppercase;
}
.funding-benefit p {
margin-top: 0.65rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.78rem;
line-height: 1.35;
}
.funding-partner-card {
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.funding-partner-eyebrow {
margin-bottom: 1.4rem;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
}
.funding-partner-eyebrow span {
color: #99CA3D;
}
.funding-logo-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
@media (min-width: 768px) {
.funding-logo-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.partner-logo-tile {
display: flex;
min-height: 128px;
align-items: center;
justify-content: center;
border: 1px solid rgba(153, 202, 61, 0.34);
border-radius: 10px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 0 rgba(153, 202, 61, 0.68), 0 16px 42px rgba(0, 0, 0, 0.28);
padding: 1.15rem;
}
.partner-logo-tile img {
display: block;
max-width: 100%;
width: 100%;
max-height: 74px;
object-fit: contain;
}
.funding-note {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.25rem;
align-items: center;
margin-top: 1.75rem;
border: 1px solid rgba(153, 202, 61, 0.58);
border-radius: 12px;
background: rgba(0, 0, 0, 0.42);
padding: 1rem 1.35rem;
}
.funding-note p {
color: rgba(255, 255, 255, 0.82);
font-size: 0.95rem;
line-height: 1.45;
}
html[data-theme="light"] .partner-logo-tile {
border-color: rgba(153, 202, 61, 0.4);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 4px 0 rgba(153, 202, 61, 0.62), 0 18px 46px rgba(16, 21, 13, 0.24);
}
@media (max-width: 1023px) {
.funding-layout::before {
display: none;
}
.funding-benefit:nth-child(2)::after {
display: none;
}
}
@media (max-width: 639px) {
.funding-benefit::after {
display: none;
}
.funding-benefits {
grid-template-columns: 1fr;
}
.funding-note {
grid-template-columns: 1fr;
}
}
.floating-contact {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 80;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.floating-contact__button {
display: flex;
width: 52px;
height: 52px;
align-items: center;
justify-content: center;
border: 1px solid rgba(153, 202, 61, 0.72);
border-radius: 9999px;
background: rgba(5, 6, 5, 0.78);
color: #fff;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(10px);
transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.floating-contact__button:hover {
transform: translateY(-2px);
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
}
.floating-contact__button--whatsapp:hover {
border-color: #25D366;
background: #25D366;
}
.offering-modal {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 1.25rem;
background: rgba(0, 0, 0, 0.82);
backdrop-filter: blur(12px);
}
.offering-modal.is-open {
display: flex;
}
.offering-dialog {
position: relative;
display: grid;
width: min(800px, 100%);
min-height: min(560px, calc(100vh - 2.5rem));
grid-template-columns: 0.72fr 1.28fr;
overflow: hidden;
border: 3px solid #99CA3D;
border-radius: 14px;
background: #000;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}
.offering-dialog::before {
position: absolute;
inset: 0 auto 0 0;
width: 42%;
content: "";
background: radial-gradient(circle at 52% 50%, rgba(153, 202, 61, 0.14), transparent 44%), linear-gradient(90deg, rgba(153, 202, 61, 0.12), transparent);
pointer-events: none;
}
.offering-close {
position: absolute;
top: 1rem;
right: 1.25rem;
z-index: 4;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: 9999px;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.5rem;
line-height: 1;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.offering-close:hover {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
}
.offering-wordmark {
position: absolute;
top: -1.35rem;
left: -0.65rem;
z-index: 1;
max-width: 48%;
overflow: hidden;
color: rgba(255, 255, 255, 0.055);
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(5rem, 14vw, 8.5rem);
font-weight: 900;
line-height: 0.8;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}
.offering-visual {
position: relative;
z-index: 2;
display: flex;
min-height: 100%;
flex-direction: column;
justify-content: center;
overflow: hidden;
padding: 4rem 1.5rem 1.5rem;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.16)), var(--offering-image);
background-position: center;
background-size: cover;
}
.offering-visual::before {
position: absolute;
inset: 0;
z-index: 1;
content: "";
background: radial-gradient(circle at 52% 48%, rgba(153, 202, 61, 0.16), transparent 34%), linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.34));
pointer-events: none;
}
.offering-icon-ring {
position: relative;
z-index: 2;
display: flex;
width: 132px;
height: 132px;
align-items: center;
justify-content: center;
margin: 0 auto;
border: 2px solid #99CA3D;
border-radius: 9999px;
color: #99CA3D;
}
.offering-icon {
width: 64px;
height: 64px;
stroke-width: 1.65;
stroke-linecap: round;
stroke-linejoin: round;
}
.offering-number {
position: relative;
z-index: 2;
margin-top: auto;
color: rgba(255, 255, 255, 0.1);
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(4.75rem, 12vw, 6.75rem);
font-weight: 900;
line-height: 0.8;
}
.offering-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
padding: 2.5rem 3rem 2.4rem 1.5rem;
}
.offering-eyebrow {
color: #99CA3D;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.offering-title {
margin-top: 1.1rem;
color: #1D9CEB;
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(3rem, 7vw, 4.5rem);
font-weight: 900;
line-height: 0.88;
text-transform: uppercase;
}
.offering-subtitle {
margin-top: 0.85rem;
color: #cfcfcf;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.45rem;
line-height: 1.15;
}
.offering-body {
margin-top: 1.35rem;
max-width: 440px;
color: #a8a8a8;
font-size: 0.98rem;
line-height: 1.45;
}
.offering-list {
margin-top: 1.6rem;
display: grid;
gap: 1rem;
color: #fff;
font-weight: 700;
}
.offering-list li {
display: flex;
align-items: center;
gap: 0.8rem;
}
.offering-list span {
display: inline-flex;
width: 20px;
height: 20px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border: 2px solid #99CA3D;
border-radius: 9999px;
color: #99CA3D;
font-size: 0.72rem;
line-height: 1;
}
.offering-start {
display: inline-flex;
height: 56px;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: auto;
border: 1px solid #99CA3D;
border-left-color: #1D9CEB;
border-radius: 8px;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.65rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.offering-start:hover {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
}
@media (max-width: 720px) {
.offering-dialog {
grid-template-columns: 1fr;
min-height: auto;
max-height: calc(100vh - 2rem);
overflow-y: auto;
}
.offering-visual {
min-height: 220px;
padding: 4.5rem 1.5rem 0;
}
.offering-number {
position: absolute;
left: 1.25rem;
bottom: 0.5rem;
}
.offering-content {
padding: 1.5rem;
}
.offering-start {
margin-top: 2rem;
}
}
.article-body h2 {
margin-top: 2.5rem;
margin-bottom: 1rem;
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 0.95;
text-transform: uppercase;
color: #fff;
}
.article-body p {
margin-top: 1.25rem;
font-size: 1.0625rem;
line-height: 1.8;
color: #bfbfbf;
}
.article-body blockquote {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
border-left: 4px solid #99CA3D;
background: #07110c;
padding: 1.5rem;
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
line-height: 1;
text-transform: uppercase;
color: #fff;
}
.footer-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms ease, transform 600ms ease;
}
.footer-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
footer a {
transition: color 150ms ease, transform 150ms ease, background-color 150ms ease;
}
footer ul a:hover {
color: #99CA3D;
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}
/* projects.html */
body {
font-family: 'Inter', sans-serif;
}
.font-hero {
font-family: 'Big Shoulders Text', cursive;
}
.site-header {
transition: background-color 200ms ease, border-color 200ms ease, padding 200ms ease, box-shadow 200ms ease;
}
.site-header.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
background: rgba(0, 0, 0, 0.82);
border-bottom: 1px solid rgba(153, 202, 61, 0.65);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
}
.site-header nav a {
position: relative;
}
.site-header nav a::after {
position: absolute;
right: 0;
bottom: -8px;
left: 0;
height: 2px;
content: "";
transform: scaleX(0);
transform-origin: left;
background: #99CA3D;
transition: transform 200ms ease;
}
.site-header nav a:hover::after,
.site-header nav a.is-active::after {
transform: scaleX(1);
}
.project-slide {
opacity: 0;
transform: translateX(28px) scale(0.985);
pointer-events: none;
}
.project-slide.is-active {
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
}
.project-dot.is-active {
width: 36px;
background: #99CA3D;
}
.project-progress {
animation: progressFill 6s linear infinite;
transform-origin: left;
}
@keyframes progressFill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* service-level-agreement.html */
body {
font-family: 'Inter', sans-serif;
}
.font-hero {
font-family: 'Big Shoulders Text', cursive;
}
.site-header {
transition: background-color 200ms ease, border-color 200ms ease, padding 200ms ease, box-shadow 200ms ease;
}
.site-header.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
background: rgba(0, 0, 0, 0.84);
border-bottom: 1px solid rgba(153, 202, 61, 0.65);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
}
.site-header nav a {
position: relative;
}
.site-header nav a::after {
position: absolute;
right: 0;
bottom: -8px;
left: 0;
height: 2px;
content: "";
transform: scaleX(0);
transform-origin: left;
background: #99CA3D;
transition: transform 200ms ease;
}
.site-header nav a:hover::after,
.site-header nav a.is-active::after {
transform: scaleX(1);
}
.legal-grid {
background-image: linear-gradient(rgba(153, 202, 61, 0.045) 1px, transparent 1px);
background-size: 100% 62px;
}
/* articles and enquiry modal */
.article-card {
box-shadow: inset 0 0 42px rgba(153, 202, 61, 0.035), 0 24px 60px rgba(0, 0, 0, 0.32);
}
.enquiry-modal {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: flex-start;
justify-content: center;
padding: 28px 16px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.78);
backdrop-filter: blur(10px);
}
.enquiry-modal.is-open {
display: flex;
}
.enquiry-dialog {
position: relative;
width: min(100%, 620px);
border: 1px solid #99CA3D;
border-radius: 14px;
background: #020302;
color: #fff;
box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65);
}
.enquiry-close {
position: absolute;
top: 22px;
right: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 2px solid rgba(255, 255, 255, 0.88);
border-radius: 9999px;
color: #fff;
font-size: 26px;
line-height: 1;
transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.enquiry-close:hover {
color: #99CA3D;
border-color: #99CA3D;
transform: scale(1.04);
}
.enquiry-form input,
.enquiry-form select {
width: 100%;
height: 52px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
background: #1b1b1b;
padding: 0 18px;
color: #fff;
outline: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.enquiry-form input:focus,
.enquiry-form select:focus {
border-color: #99CA3D;
box-shadow: 0 0 0 3px rgba(153, 202, 61, 0.12);
}
.enquiry-form input::placeholder {
color: rgba(255, 255, 255, 0.42);
}
.enquiry-form input[type="date"] {
color-scheme: dark;
}
.enquiry-form input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
filter: invert(76%) sepia(72%) saturate(514%) hue-rotate(31deg) brightness(92%) contrast(88%);
}
.enquiry-choice {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.enquiry-choice input {
width: 18px;
height: 18px;
flex: 0 0 auto;
accent-color: #99CA3D;
}
.enquiry-choice input[type="radio"] {
border-radius: 9999px;
}
.enquiry-fields {
display: grid;
gap: 1.25rem;
}
.enquiry-fields[hidden] {
display: none;
}
.booking-panel {
display: grid;
gap: 1rem;
padding: 1rem;
border: 1px solid rgba(153, 202, 61, 0.38);
border-radius: 14px;
background: rgba(153, 202, 61, 0.08);
}
.booking-panel[hidden] {
display: none;
}
.booking-panel__eyebrow {
margin-bottom: 0.35rem;
color: #99CA3D;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.booking-panel__title {
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 2rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.booking-panel__copy,
.booking-panel__note {
color: #bfbfbf;
font-size: 0.9rem;
line-height: 1.5;
}
.booking-panel__note {
color: #8f9a86;
}
.booking-link {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
border: 1px solid #99CA3D;
border-radius: 10px;
background: #99CA3D;
color: #050605;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.35rem;
font-weight: 700;
text-transform: uppercase;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.booking-link[hidden],
.booking-frame[hidden] {
display: none !important;
}
.booking-link.is-disabled {
cursor: not-allowed;
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
color: #8f9a86;
}
.booking-frame {
width: 100%;
min-height: 520px;
border: 1px solid rgba(153, 202, 61, 0.38);
border-radius: 12px;
background: #fff;
}
@media (max-width: 767px) {
.booking-frame {
display: none !important;
}
}
html[data-theme="light"] .booking-panel {
background: rgba(153, 202, 61, 0.12);
}
html[data-theme="light"] .booking-panel__title {
color: #10150d;
}
html[data-theme="light"] .booking-panel__copy {
color: #4b5543;
}
html[data-theme="light"] .booking-panel__note {
color: #66715d;
}
html[data-theme="light"] .booking-link.is-disabled {
border-color: rgba(16, 21, 13, 0.14);
background: rgba(16, 21, 13, 0.06);
color: #66715d;
}
html[data-theme="light"] .enquiry-dialog {
border-color: rgba(111, 152, 41, 0.72);
background: #fff;
color: #10150d;
box-shadow: 0 30px 100px rgba(16, 21, 13, 0.18);
}
html[data-theme="light"] .enquiry-dialog .text-white,
html[data-theme="light"] .enquiry-dialog legend,
html[data-theme="light"] .enquiry-dialog label,
html[data-theme="light"] .enquiry-dialog .font-semibold {
color: #10150d !important;
}
html[data-theme="light"] .enquiry-dialog .text-gray-300,
html[data-theme="light"] .enquiry-dialog .text-gray-400,
html[data-theme="light"] .enquiry-dialog p {
color: #4b5543 !important;
}
html[data-theme="light"] .enquiry-close {
border-color: rgba(16, 21, 13, 0.55);
color: #10150d;
background: rgba(255, 255, 255, 0.78);
}
html[data-theme="light"] .enquiry-close:hover {
border-color: #6f9829;
color: #6f9829;
}
html[data-theme="light"] .enquiry-form input,
html[data-theme="light"] .enquiry-form select,
html[data-theme="light"] .enquiry-form textarea {
border-color: rgba(16, 21, 13, 0.24);
background: #f8faf4;
color: #10150d;
color-scheme: light;
}
html[data-theme="light"] .enquiry-form input:focus,
html[data-theme="light"] .enquiry-form select:focus,
html[data-theme="light"] .enquiry-form textarea:focus {
border-color: #6f9829;
box-shadow: 0 0 0 3px rgba(153, 202, 61, 0.18);
}
html[data-theme="light"] .enquiry-form input::placeholder,
html[data-theme="light"] .enquiry-form textarea::placeholder {
color: rgba(16, 21, 13, 0.42);
}
html[data-theme="light"] .enquiry-form input:disabled,
html[data-theme="light"] .enquiry-form select:disabled,
html[data-theme="light"] .enquiry-form textarea:disabled {
background: #eef2e8;
color: rgba(16, 21, 13, 0.62);
opacity: 1;
}
html[data-theme="light"] .enquiry-choice {
color: #10150d;
}
html[data-theme="light"] .enquiry-choice input {
accent-color: #6f9829;
}
html[data-theme="light"] .booking-panel {
border-color: rgba(111, 152, 41, 0.34);
background: rgba(153, 202, 61, 0.1);
}
html[data-theme="light"] .booking-panel__eyebrow {
color: #6f9829;
}
html[data-theme="light"] .booking-link {
border-color: #6f9829;
background: #99CA3D;
color: #10150d;
}
html[data-theme="light"] .booking-link:not(.is-disabled):hover {
background: #6f9829;
color: #fff;
}
html[data-theme="light"] .enquiry-form button[type="submit"] {
border-color: #6f9829 !important;
background: #10150d !important;
color: #fff !important;
}
html[data-theme="light"] .enquiry-form button[type="submit"]:hover {
background: #99CA3D !important;
color: #10150d !important;
}
body.enquiry-lock {
overflow: hidden;
}
.portal-modal {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 28px 16px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.78);
backdrop-filter: blur(10px);
}
.portal-modal.is-open {
display: flex;
}
.portal-dialog {
position: relative;
width: min(100%, 560px);
border: 1px solid #99CA3D;
border-radius: 14px;
background: #020302;
color: #fff;
box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65);
}
.portal-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 82px;
border: 1px solid rgba(153, 202, 61, 0.42);
border-radius: 10px;
background: #0b100d;
padding: 18px 20px;
color: #fff;
transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.portal-option:hover,
.portal-option:focus {
border-color: #99CA3D;
background: #10180f;
outline: none;
transform: translateY(-2px);
}
.portal-option strong,
.portal-option small {
display: block;
}
.portal-option strong {
font-family: 'Big Shoulders Text', cursive;
font-size: 1.65rem;
line-height: 1;
text-transform: uppercase;
}
.portal-option small {
margin-top: 6px;
color: rgba(255, 255, 255, 0.56);
}
.portal-option svg {
flex: 0 0 auto;
color: #99CA3D;
}
.sla-row {
border-top: 1px solid rgba(153, 202, 61, 0.14);
}
.sla-icon {
background: rgba(153, 202, 61, 0.08);
border: 1px solid rgba(153, 202, 61, 0.42);
box-shadow: inset 0 0 30px rgba(153, 202, 61, 0.06);
}
.sla-packages {
isolation: isolate;
}
.sla-abandoned-callout {
display: grid;
gap: 2rem;
align-items: end;
border: 1px solid rgba(153, 202, 61, 0.28);
border-radius: 24px;
background: radial-gradient(circle at 12% 18%, rgba(153, 202, 61, 0.12), transparent 30%), rgba(0, 0, 0, 0.38);
padding: 2rem;
}
.sla-abandoned-callout button {
width: max-content;
}
@media (min-width: 1024px) {
.sla-abandoned-callout {
grid-template-columns: 1fr auto;
padding: 2.5rem;
}
}
.sla-tier-card {
position: relative;
display: flex;
min-height: 100%;
flex-direction: column;
gap: 1rem;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
background: rgba(0, 0, 0, 0.46);
padding: 1.35rem;
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.025);
}
.sla-tier-card::before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: linear-gradient(90deg, #1D9CEB, #99CA3D);
opacity: 0.72;
transition: width 250ms ease;
}
.sla-tier-card--featured {
border-color: rgba(153, 202, 61, 0.65);
background: linear-gradient(180deg, rgba(153, 202, 61, 0.12), rgba(0, 0, 0, 0.5));
}
.sla-tier-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.sla-tier-card__header span {
color: rgba(153, 202, 61, 0.82);
font-family: 'Big Shoulders Text', cursive;
font-size: 2rem;
font-weight: 900;
line-height: 1;
}
.sla-tier-card__header h3 {
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 2.4rem;
font-weight: 900;
line-height: 0.9;
text-transform: uppercase;
}
.sla-tier-card p {
color: rgba(255, 255, 255, 0.72);
font-size: 0.94rem;
line-height: 1.55;
}
.sla-tier-card em {
color: #fff;
}
.sla-tier-card__cta {
display: inline-flex;
height: 48px;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
border: 1px solid rgba(153, 202, 61, 0.72);
border-radius: 9999px;
padding: 0 1.2rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.sla-tier-card__cta:hover {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
}
.sla-superior {
display: grid;
gap: 1.5rem;
border-radius: 18px;
background: #99CA3D;
padding: 1.5rem;
color: #050605;
}
.sla-superior ul {
display: grid;
gap: 0.7rem;
color: #0b1206;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.25;
}
.sla-superior li {
display: flex;
gap: 0.65rem;
}
.sla-superior li::before {
content: "•";
color: #fff;
font-weight: 900;
}
@media (min-width: 1024px) {
.sla-superior {
grid-template-columns: 0.9fr 1.1fr;
align-items: start;
}
.sla-superior ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* terms-of-sale.html */
body { font-family: 'Inter', sans-serif; }
.font-hero { font-family: 'Big Shoulders Text', cursive; }
.site-header { transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.site-header.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
background: rgba(0, 0, 0, 0.84);
border-bottom: 1px solid rgba(153, 202, 61, 0.65);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
}
.site-header nav a { position: relative; }
.site-header nav a::after {
position: absolute;
right: 0;
bottom: -8px;
left: 0;
height: 2px;
content: "";
transform: scaleX(0);
transform-origin: left;
background: #99CA3D;
transition: transform 200ms ease;
}
.site-header nav a:hover::after,
.site-header nav a.is-active::after { transform: scaleX(1); }
.legal-grid {
background-image: linear-gradient(rgba(153, 202, 61, 0.045) 1px, transparent 1px);
background-size: 100% 62px;
}
.legal-row { border-top: 1px solid rgba(153, 202, 61, 0.14); }
.legal-icon {
background: rgba(153, 202, 61, 0.08);
border: 1px solid rgba(153, 202, 61, 0.42);
box-shadow: inset 0 0 30px rgba(153, 202, 61, 0.06);
}
/* solar-recycling.html */
body { font-family: 'Inter', sans-serif; }
.font-hero { font-family: 'Big Shoulders Text', cursive; }
.site-header { transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.site-header.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
background: rgba(0, 0, 0, 0.84);
border-bottom: 1px solid rgba(153, 202, 61, 0.65);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
}
.site-header nav a { position: relative; }
.site-header nav a::after {
position: absolute;
right: 0;
bottom: -8px;
left: 0;
height: 2px;
content: "";
transform: scaleX(0);
transform-origin: left;
background: #99CA3D;
transition: transform 200ms ease;
}
.site-header nav a:hover::after,
.site-header nav a.is-active::after { transform: scaleX(1); }
.legal-grid {
background-image: linear-gradient(rgba(153, 202, 61, 0.045) 1px, transparent 1px);
background-size: 100% 62px;
}
.solar-recycling-fixed {
position: relative;
min-height: 100vh;
overflow: hidden;
background-color: #050605;
background-image: radial-gradient(circle at 18% 22%, rgba(153, 202, 61, 0.16), transparent 28%), radial-gradient(circle at 86% 16%, rgba(29, 156, 235, 0.14), transparent 24%), linear-gradient(90deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.62)), url('../images/projects/nutec-ink-ottery.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.solar-recycling-fixed > * {
position: relative;
z-index: 1;
}
.solar-recycling-panel {
border: 1px solid rgba(153, 202, 61, 0.26);
border-radius: 24px;
background: rgba(0, 0, 0, 0.68);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(14px);
}
.solar-recycling-panel--intro {
display: grid;
gap: 2rem;
align-items: center;
padding: 2rem;
}
.solar-recycling-icon-panel {
border: 1px solid rgba(153, 202, 61, 0.36);
border-radius: 18px;
background: rgba(7, 16, 13, 0.78);
padding: 2rem;
}
.solar-recycling-panel--copy {
display: grid;
gap: 2rem;
align-items: end;
padding: 2rem;
}
.solar-recycling-panel--video {
padding: clamp(0.75rem, 1.5vw, 1rem);
}
.solar-recycling-video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 1px solid rgba(153, 202, 61, 0.3);
border-radius: 18px;
object-fit: cover;
background: #050605;
transition: transform 420ms ease, filter 420ms ease;
}
.solar-recycling-panel--video:hover .solar-recycling-video {
filter: saturate(1.08) contrast(1.03);
transform: scale(1.01);
}
.solar-recycling-cta {
display: inline-flex;
width: max-content;
height: 3.5rem;
align-items: center;
gap: 1rem;
border: 1px solid rgba(153, 202, 61, 0.72);
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.68);
padding: 0 1.5rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.solar-recycling-cta:hover,
.solar-recycling-cta:focus-visible {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
outline: none;
transform: translateY(-2px);
}
html[data-theme="light"] .solar-recycling-fixed {
background-image: radial-gradient(circle at 18% 22%, rgba(153, 202, 61, 0.16), transparent 28%), radial-gradient(circle at 86% 16%, rgba(29, 156, 235, 0.12), transparent 24%), linear-gradient(90deg, rgba(245, 247, 239, 0.86), rgba(245, 247, 239, 0.72), rgba(245, 247, 239, 0.58)), url('../images/projects/nutec-ink-ottery.jpg');
}
html[data-theme="light"] .solar-recycling-panel {
border-color: rgba(111, 152, 41, 0.34);
background: rgba(255, 255, 255, 0.84);
box-shadow: 0 24px 60px rgba(16, 21, 13, 0.12);
}
html[data-theme="light"] .solar-recycling-panel h3,
html[data-theme="light"] .solar-recycling-panel .text-white {
color: #10150d !important;
}
html[data-theme="light"] .solar-recycling-panel p,
html[data-theme="light"] .solar-recycling-panel .text-gray-300 {
color: #4b5543 !important;
}
html[data-theme="light"] .solar-recycling-icon-panel {
border-color: rgba(111, 152, 41, 0.32);
background: rgba(255, 255, 255, 0.76);
}
html[data-theme="light"] .solar-recycling-cta {
background: #10150d;
color: #fff;
}
@media (min-width: 1024px) {
.solar-recycling-panel--intro {
padding: 3rem;
}
.solar-recycling-panel--copy {
grid-template-columns: minmax(0, 1fr) auto;
padding: 3rem;
}
}
@media (max-width: 767px) {
.solar-recycling-fixed {
background-attachment: scroll;
}
}
/* Theme-aware logo */
.site-logo {
content: url("../images/logo-new-light.png");
}
html[data-theme="light"] .site-logo {
content: url("../images/logo-new-dark.png");
}
.enquiry-logo {
content: url("../images/logo-new-light.png");
}
html[data-theme="light"] .enquiry-logo {
content: url("../images/logo-new-dark.png");
}
.energy-calculator-section {
color: #fff;
background-color: #050605 !important;
background-image: radial-gradient(circle at 12% 22%, rgba(245, 133, 31, 0.13), transparent 26%), radial-gradient(circle at 82% 68%, rgba(153, 202, 61, 0.12), transparent 30%), linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.54)), url('../images/projects/the-one-stellenbosch.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.trifecta-section {
background-color: #050605 !important;
background-image: radial-gradient(circle at 12% 22%, rgba(245, 133, 31, 0.13), transparent 26%), radial-gradient(circle at 82% 68%, rgba(153, 202, 61, 0.12), transparent 30%), linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.54)), url('../images/projects/the-one-stellenbosch.jpg') !important;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.energy-calculator-heading h1,
.energy-calculator-heading h2 {
font-size: clamp(3.4rem, 6vw, 6.4rem);
}
.energy-calculator-subheading {
margin-top: 1rem;
color: #F5851F;
font-size: clamp(1.55rem, 2.2vw, 2.35rem);
font-weight: 800;
line-height: 1.12;
}
.energy-calculator-term-note {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 1rem;
border-left: 2px solid #99CA3D;
padding-left: 0.75rem;
color: rgba(255, 255, 255, 0.82);
font-size: 0.86rem;
font-weight: 700;
line-height: 1.4;
}
.energy-calculator-term-note span {
color: rgba(255, 255, 255, 0.82);
}
.energy-calculator-heading-copy {
max-width: 820px;
margin-top: 1.55rem;
color: #bfbfbf;
font-size: 1.18rem;
line-height: 1.55;
}
.energy-calculator-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
gap: 2rem;
align-items: stretch;
}
.energy-calculator-mobile-callout {
display: none;
}
.energy-calculator-panel,
.energy-result-card {
border: 1px solid rgba(153, 202, 61, 0.22);
background: rgba(17, 17, 17, 0.82);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
backdrop-filter: blur(16px);
}
.energy-calculator-panel {
padding: 2rem;
border-radius: 18px;
}
.energy-calculator-intro {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
.energy-calculator-icon {
display: flex;
width: 78px;
height: 78px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 10px;
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.energy-calculator-icon svg {
width: 46px;
height: 46px;
stroke-width: 1.7;
}
.energy-calculator-form {
margin-top: 2rem;
}
.energy-calculator-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.energy-calculator-fields label {
display: block;
}
.energy-calculator-fields span {
display: block;
margin-bottom: 0.55rem;
color: #d1d5db;
font-size: 0.75rem;
font-weight: 700;
}
.energy-calculator-fields input,
.energy-calculator-fields select {
width: 100%;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
background: rgba(5, 6, 5, 0.76);
padding: 0 0.95rem;
color: #fff;
font-weight: 700;
outline: none;
transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.energy-calculator-fields input:focus,
.energy-calculator-fields select:focus {
border-color: rgba(153, 202, 61, 0.85);
box-shadow: 0 0 0 3px rgba(153, 202, 61, 0.16);
}
.energy-calculator-submit {
display: flex;
width: 100%;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-top: 1.25rem;
border-radius: 6px;
background: #99CA3D;
color: #10150d;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
transition: transform 180ms ease, background-color 180ms ease;
}
.energy-calculator-submit:hover,
.energy-calculator-submit:focus-visible {
background: #b8e455;
transform: translateY(-1px);
}
.energy-calculator-note {
margin-top: 0.85rem;
color: #858b84;
font-size: 0.75rem;
line-height: 1.5;
}
.energy-calculator-results {
min-width: 0;
}
@media (min-width: 1024px) {
.energy-calculator-results {
display: flex;
min-height: 0;
flex-direction: column;
}
.energy-calculator-results .energy-result-grid {
flex: 1;
grid-auto-rows: minmax(0, 1fr);
}
.energy-calculator-results .energy-result-card {
min-height: 0;
}
}
.energy-result-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.energy-result-card {
display: flex;
min-height: 128px;
flex-direction: column;
justify-content: center;
border-radius: 8px;
padding: 1.35rem;
}
.energy-result-card--wide {
grid-column: span 2;
}
.energy-result-card span {
color: #d1d5db;
font-family: 'Big Shoulders Text', cursive;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.05;
text-transform: uppercase;
}
.energy-result-card strong {
display: block;
margin-top: 0.7rem;
color: #99CA3D;
font-size: clamp(1.45rem, 2.25vw, 2.15rem);
font-weight: 900;
line-height: 1;
}
.energy-result-card--blue strong {
color: #1D9CEB;
}
.energy-result-card small {
margin-top: 0.45rem;
color: #d1d5db;
font-size: 0.72rem;
font-weight: 700;
}
.energy-calculator-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
margin-top: 1.25rem;
border: 1px solid rgba(153, 202, 61, 0.26);
border-radius: 8px;
padding: 1.35rem;
background: linear-gradient(90deg, rgba(153, 202, 61, 0.12), rgba(29, 156, 235, 0.1));
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
.energy-calculator-cta p {
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.65rem;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
}
.energy-calculator-cta span {
display: block;
margin-top: 0.45rem;
color: #d1d5db;
font-size: 0.9rem;
line-height: 1.45;
}
.energy-calculator-cta small {
display: block;
margin-top: 0.75rem;
color: #99CA3D;
font-size: 0.78rem;
font-weight: 800;
line-height: 1.4;
}
.energy-calculator-cta button {
display: inline-flex;
min-height: 46px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #99CA3D;
padding: 0 1.25rem;
color: #10150d;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
transition: transform 180ms ease, background-color 180ms ease;
}
.energy-calculator-cta button:hover,
.energy-calculator-cta button:focus-visible {
background: #b8e455;
transform: translateY(-1px);
}
html[data-theme="light"] .energy-calculator-section {
background: #f5f7ef !important;
background-image: radial-gradient(circle at 12% 22%, rgba(245, 133, 31, 0.1), transparent 26%), radial-gradient(circle at 82% 68%, rgba(153, 202, 61, 0.12), transparent 30%), linear-gradient(90deg, rgba(245, 247, 239, 0.84), rgba(245, 247, 239, 0.68)), url('../images/projects/the-one-stellenbosch.jpg') !important;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: #10150d;
}
html[data-theme="light"] .energy-calculator-section > .absolute {
opacity: 0.72;
}
html[data-theme="light"] .energy-calculator-section h1,
html[data-theme="light"] .energy-calculator-section h2,
html[data-theme="light"] .energy-calculator-section h3,
html[data-theme="light"] .energy-result-card span {
color: #10150d !important;
}
html[data-theme="light"] .energy-calculator-section p:not(.energy-calculator-subheading):not(.energy-calculator-term-note),
html[data-theme="light"] .energy-calculator-section .text-\[\#bfbfbf\],
html[data-theme="light"] .energy-calculator-note {
color: #4b5543 !important;
}
html[data-theme="light"] .energy-calculator-section .energy-calculator-subheading,
html[data-theme="light"] .energy-calculator-subheading {
color: #F5851F !important;
}
html[data-theme="light"] .energy-calculator-term-note,
html[data-theme="light"] .energy-calculator-term-note span {
color: rgba(255, 255, 255, 0.92) !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .energy-calculator-panel,
html[data-theme="light"] .energy-result-card {
border-color: rgba(111, 152, 41, 0.28);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 24px 60px rgba(16, 21, 13, 0.12);
}
html[data-theme="light"] .energy-calculator-fields span,
html[data-theme="light"] .energy-result-card small {
color: #4b5543;
}
html[data-theme="light"] .energy-calculator-fields input,
html[data-theme="light"] .energy-calculator-fields select {
border-color: rgba(16, 21, 13, 0.14);
background: rgba(255, 255, 255, 0.9);
color: #10150d;
}
html[data-theme="light"] .energy-calculator-cta {
border-color: rgba(111, 152, 41, 0.26);
background: linear-gradient(90deg, rgba(153, 202, 61, 0.16), rgba(29, 156, 235, 0.08));
box-shadow: 0 18px 44px rgba(16, 21, 13, 0.1);
}
html[data-theme="light"] .energy-calculator-cta p {
color: #10150d !important;
}
html[data-theme="light"] .energy-calculator-cta span {
color: #4b5543;
}
html[data-theme="light"] .energy-calculator-cta small {
color: #10150d;
}
@media (max-width: 1023px) {
.energy-calculator-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.energy-calculator-section {
padding-top: 4rem;
padding-bottom: 4rem;
}
.energy-calculator-panel {
padding: 1.4rem;
}
.energy-calculator-intro,
.energy-calculator-fields,
.energy-result-grid {
grid-template-columns: 1fr;
}
.energy-result-card--wide {
grid-column: auto;
}
.energy-calculator-grid--home {
display: none;
}
.energy-calculator-mobile-callout {
position: relative;
display: flex;
isolation: isolate;
overflow: hidden;
flex-direction: column;
align-items: flex-start;
border: 1px solid rgba(153, 202, 61, 0.58);
border-radius: 24px;
padding: 1.6rem;
background:
radial-gradient(circle at 88% 12%, rgba(29, 156, 235, 0.3), transparent 34%),
radial-gradient(circle at 8% 100%, rgba(153, 202, 61, 0.18), transparent 38%),
linear-gradient(145deg, rgba(8, 17, 12, 0.96), rgba(5, 8, 7, 0.9));
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 34px rgba(153, 202, 61, 0.1);
backdrop-filter: blur(18px) saturate(130%);
}
.energy-calculator-mobile-callout::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
opacity: 0.42;
background-image:
linear-gradient(rgba(153, 202, 61, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(153, 202, 61, 0.09) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.energy-calculator-mobile-callout::after {
position: absolute;
top: -5rem;
right: -5rem;
z-index: -1;
width: 11rem;
height: 11rem;
border: 1px solid rgba(29, 156, 235, 0.38);
border-radius: 50%;
content: "";
box-shadow: 0 0 44px rgba(29, 156, 235, 0.22);
}
.energy-calculator-mobile-callout__icon {
display: grid;
width: 3.6rem;
height: 3.6rem;
place-items: center;
border: 1px solid rgba(153, 202, 61, 0.58);
border-radius: 14px;
color: #99CA3D;
background: rgba(153, 202, 61, 0.1);
box-shadow: 0 0 24px rgba(153, 202, 61, 0.16);
}
.energy-calculator-mobile-callout__icon svg {
width: 2rem;
height: 2rem;
stroke-width: 1.7;
}
.energy-calculator-mobile-callout__eyebrow {
margin-top: 1.4rem;
color: #99CA3D !important;
font-size: 0.68rem !important;
font-weight: 900;
letter-spacing: 0.18em;
line-height: 1.4 !important;
text-transform: uppercase;
}
.energy-calculator-mobile-callout h3 {
max-width: none;
margin-top: 1.4rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(2.4rem, 12vw, 3.35rem) !important;
font-weight: 900;
line-height: 0.94;
text-transform: uppercase;
}
.energy-calculator-mobile-callout h3 .text-\[\#99CA3D\] {
color: inherit;
}
.energy-calculator-mobile-callout > p:last-of-type {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.76);
font-size: 0.92rem;
line-height: 1.55;
}
.energy-calculator-mobile-callout__button {
position: relative;
display: flex;
width: 100%;
min-height: 58px;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
overflow: hidden;
margin-top: 1.5rem;
border: 1px solid #b8e455;
border-radius: 9999px;
padding: 0.85rem 1rem 0.85rem 1.25rem;
background: #99CA3D;
color: #10150d;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 0 0 0 rgba(153, 202, 61, 0.42);
animation: calculatorCtaPulse 2.4s ease-out infinite;
}
.energy-calculator-mobile-callout__button::before {
position: absolute;
top: -30%;
left: -45%;
width: 32%;
height: 160%;
content: "";
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
transform: skewX(-18deg);
animation: calculatorCtaShine 3.2s ease-in-out infinite;
}
.energy-calculator-mobile-callout__button span,
.energy-calculator-mobile-callout__button svg {
position: relative;
z-index: 1;
}
.energy-calculator-mobile-callout__button svg {
width: 1.35rem;
height: 1.35rem;
flex: 0 0 auto;
stroke-width: 2;
}
html[data-theme="light"] .energy-calculator-mobile-callout {
border-color: rgba(111, 152, 41, 0.48);
background:
radial-gradient(circle at 88% 12%, rgba(29, 156, 235, 0.16), transparent 34%),
radial-gradient(circle at 8% 100%, rgba(153, 202, 61, 0.2), transparent 38%),
linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(240, 246, 231, 0.9));
box-shadow: 0 24px 60px rgba(16, 21, 13, 0.16);
}
html[data-theme="light"] .energy-calculator-mobile-callout h3 {
color: #10150d;
}
html[data-theme="light"] .energy-calculator-mobile-callout > p:last-of-type {
color: #4b5543;
}
html[data-theme="light"] .energy-calculator-mobile-callout__icon {
color: #10150d;
border-color: rgba(16, 21, 13, 0.24);
background: rgba(16, 21, 13, 0.06);
box-shadow: none;
}
}
.energy-calculator-mobile-callout__icon {
color: #fff;
border-color: rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.08);
box-shadow: none;
}
@keyframes calculatorCtaPulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(153, 202, 61, 0.38);
}
50% {
box-shadow: 0 0 0 9px rgba(153, 202, 61, 0);
}
}
@keyframes calculatorCtaShine {
0%,
55% {
left: -45%;
}
80%,
100% {
left: 125%;
}
}
/* 2026-07-21 client review implementation */
.hero-section .hero-copy {
margin-bottom: 0;
}
.hero-section [class*="Energy as a Service"] {
letter-spacing: 0.35em;
}
.hero-offering-card--solar .hero-offering-icon,
.hero-offering-card--solar .hero-offering-detail > div,
.hero-offering-card--power .hero-offering-icon,
.hero-offering-card--power .hero-offering-detail > div,
.hero-offering-card--charge .hero-offering-icon,
.hero-offering-card--charge .hero-offering-detail > div,
.hero-offering-card--energy .hero-offering-icon,
.hero-offering-card--energy .hero-offering-detail > div {
color: #1D9CEB;
border-color: rgba(29, 156, 235, 0.78);
background-color: rgba(29, 156, 235, 0.1);
}
.funding-option-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
.funding-option-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.funding-option {
min-height: 138px;
flex-direction: column;
align-items: flex-start;
text-align: left;
cursor: pointer;
transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.funding-option:hover,
.funding-option:focus-visible {
border-color: rgba(153, 202, 61, 0.78);
box-shadow: 0 5px 0 rgba(153, 202, 61, 0.74), 0 22px 56px rgba(0, 0, 0, 0.34);
outline: none;
transform: translateY(-4px) scale(1.015);
}
.funding-option span {
color: #10150d;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.85rem;
font-weight: 900;
line-height: 0.95;
text-transform: uppercase;
}
.funding-option small {
color: #4b5543;
font-size: 0.82rem;
line-height: 1.35;
}
.trifecta-accent-line {
width: min(420px, 100%);
height: 3px;
margin: -1.6rem 0 2rem;
border-radius: 9999px;
background: linear-gradient(90deg, #99CA3D, #F5851F, #1D9CEB);
}
.trifecta-card-head img {
order: 1;
}
.trifecta-card-head span {
order: 2;
}
.support-fixed-section {
position: relative;
overflow: hidden;
background-color: #050605;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.support-fixed-section--terms {
background-image: radial-gradient(circle at 15% 20%, rgba(153, 202, 61, 0.16), transparent 28%), radial-gradient(circle at 88% 14%, rgba(245, 133, 31, 0.13), transparent 24%), linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.56)), url('../images/projects/ctp-flexibles-cape-town.jpg');
}
.support-fixed-section--sla {
background-image: radial-gradient(circle at 15% 20%, rgba(153, 202, 61, 0.16), transparent 28%), radial-gradient(circle at 88% 14%, rgba(29, 156, 235, 0.15), transparent 24%), linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.56)), url('../images/projects/stellenbosch-university-tygerberg-campus.jpg');
}
.support-fixed-section--projects {
background-image: radial-gradient(circle at 18% 18%, rgba(29, 156, 235, 0.16), transparent 28%), radial-gradient(circle at 86% 76%, rgba(245, 133, 31, 0.13), transparent 24%), linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.56)), url('../images/projects/bmri-stellenbosch-university-parow.jpg');
}
.support-fixed-section--articles {
background-image: radial-gradient(circle at 16% 20%, rgba(153, 202, 61, 0.15), transparent 28%), radial-gradient(circle at 86% 18%, rgba(29, 156, 235, 0.12), transparent 24%), linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.56)), url('../images/projects/upd-rooftop-lea-glen.jpg');
}
.support-frost-panel,
.support-fixed-section .sla-packages,
.support-fixed-section .legal-row,
.support-fixed-section .sla-row,
.support-fixed-section .sla-abandoned-callout,
.support-fixed-section [data-project-carousel] {
border-color: rgba(153, 202, 61, 0.24) !important;
background-color: rgba(0, 0, 0, 0.52) !important;
backdrop-filter: blur(14px) saturate(125%);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}
.support-fixed-section .legal-row,
.support-fixed-section .sla-row {
margin-top: 1rem;
border: 1px solid rgba(153, 202, 61, 0.18);
border-radius: 18px;
padding: 1.5rem;
}
.support-fixed-section .legal-row,
.support-fixed-section .sla-row,
.solar-recycling-panel {
position: relative;
overflow: hidden;
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.support-fixed-section .legal-row::before,
.support-fixed-section .sla-row::before,
.solar-recycling-panel::before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: linear-gradient(90deg, #1D9CEB, #99CA3D);
transition: width 250ms ease;
}
.support-fixed-section .legal-row:hover,
.support-fixed-section .sla-row:hover,
.solar-recycling-panel:hover {
border-color: rgba(255, 255, 255, 0.78) !important;
box-shadow: 0 26px 76px rgba(0, 0, 0, 0.42);
transform: translateY(-6px);
}
.support-fixed-section .legal-row:hover::before,
.support-fixed-section .sla-row:hover::before,
.solar-recycling-panel:hover::before {
width: 100%;
}
.solar-recycling-panel {
background: rgba(0, 0, 0, 0.52);
backdrop-filter: blur(16px) saturate(125%);
}
.project-portfolio-teaser {
position: relative;
display: flex;
min-height: 100vh;
align-items: flex-end;
overflow: hidden;
border-top: 0;
background-color: #050605;
background-position: center;
background-size: cover;
}
.project-portfolio-teaser--home {
background-image: url('../images/projects/the-one-stellenbosch.jpg');
}
.project-portfolio-teaser--projects {
background-image: url('../images/projects/bmri-stellenbosch-university-parow.jpg');
}
.project-portfolio-teaser--terms {
background-image: url('../images/projects/ctp-flexibles-cape-town.jpg');
}
.project-portfolio-teaser--sla {
background-image: url('../images/projects/stellenbosch-university-tygerberg-campus.jpg');
}
.project-portfolio-teaser--solar {
background-image: url('../images/projects/nutec-ink-ottery.jpg');
}
.project-portfolio-teaser--articles {
background-image: url('../images/projects/dewetshof-wines-robertson.jpg');
}
.project-portfolio-teaser__content {
width: min(100%, 1440px);
margin: 0 auto;
padding: 6rem 1.5rem;
}
.project-portfolio-teaser__panel {
width: min(100%, 560px);
border: 1px solid rgba(153, 202, 61, 0.3);
border-left: 3px solid #99CA3D;
border-radius: 20px;
background: rgba(5, 6, 5, 0.88);
backdrop-filter: blur(16px) saturate(125%);
-webkit-backdrop-filter: blur(16px) saturate(125%);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
padding: 1.5rem 1.35rem 1.5rem 1.25rem;
color: #fff;
text-shadow: none;
}
.project-portfolio-teaser__eyebrow {
color: #99CA3D;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.32em;
text-transform: uppercase;
}
.project-portfolio-teaser__title {
margin-top: 0.8rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: clamp(3rem, 8vw, 5.8rem);
font-weight: 900;
line-height: 0.9;
text-transform: uppercase;
}
.project-portfolio-teaser__size {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(1.05rem, 2vw, 1.35rem);
font-weight: 700;
}
.project-portfolio-teaser__proof {
margin-top: 0.55rem;
max-width: 28rem;
color: rgba(255, 255, 255, 0.78);
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.project-portfolio-teaser__button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-top: 2rem;
border: 1px solid rgba(153, 202, 61, 0.82);
border-radius: 8px;
background: rgba(0, 0, 0, 0.48);
padding: 0.95rem 1.2rem;
color: #fff;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.3rem;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
text-shadow: none;
transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.project-portfolio-teaser__button:hover,
.project-portfolio-teaser__button:focus-visible {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
outline: none;
transform: translateY(-2px);
}
/* Projects page carousel */
.project-category-block + .project-category-block {
margin-top: 0;
}
.project-carousel,
.support-fixed-section [data-project-carousel].project-carousel,
.support-fixed-section .project-carousel {
position: relative;
display: grid;
overflow: hidden;
width: 100%;
max-width: none;
height: 100vh;
height: 100svh;
min-height: 100vh;
min-height: 100svh;
border: 0 !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
padding-bottom: 0;
}
.project-carousel .project-slide {
position: relative;
grid-area: 1 / 1;
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
border: 0;
border-radius: 0;
background-color: #0d0f0d;
opacity: 0;
visibility: hidden;
transform: translateX(24px);
pointer-events: none;
}
.project-carousel .project-slide.is-active {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
.project-slide__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
border-radius: inherit;
background: #0d0f0d;
}
.project-slide__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.project-carousel .project-slide__panel.project-portfolio-teaser__panel {
position: absolute;
top: 1.35rem;
right: 1.35rem;
z-index: 2;
width: min(calc(100% - 2.7rem), 420px);
max-width: 420px;
margin: 0;
}
.project-carousel .project-slide__panel .project-portfolio-teaser__title {
font-size: clamp(1.85rem, 3.6vw, 3.35rem);
}
.project-carousel .project-arrow {
top: 50%;
z-index: 3;
}
.project-carousel-mobile-details {
display: none;
}
html[data-theme="light"] .project-slide__media {
background: #10150d;
}
html[data-theme="light"] .support-fixed-section .project-carousel,
html[data-theme="light"] .support-fixed-section [data-project-carousel].project-carousel {
background-color: transparent !important;
backdrop-filter: none !important;
}
@media (max-width: 1023px) {
.project-carousel .project-slide__panel .project-portfolio-teaser__title {
font-size: clamp(1.65rem, 7vw, 2.6rem);
}
}
@media (max-width: 767px) {
.support-fixed-section [data-project-carousel],
.support-fixed-section [data-project-carousel].project-carousel,
.support-fixed-section .project-carousel {
display: block;
position: relative;
height: auto !important;
min-height: 0 !important;
padding-bottom: 0;
border-radius: 0;
}
.project-carousel .project-slide {
display: none;
grid-area: auto;
min-height: 0;
height: auto;
border-radius: 0;
}
.project-carousel .project-slide.is-active {
display: block;
}
.project-carousel .project-slide__panel.project-portfolio-teaser__panel {
display: none;
}
.project-carousel-mobile-details {
display: block;
position: static;
width: 100%;
max-width: none;
margin: 0;
padding: 0.65rem 0.85rem 0.75rem;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-left: 3px solid #99CA3D;
border-radius: 0;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(12px) saturate(125%);
}
.project-carousel-mobile-details .project-portfolio-teaser__eyebrow {
font-size: 0.43rem;
letter-spacing: 0.2em;
}
.project-carousel-mobile-details .project-portfolio-teaser__title {
margin-top: 0.3rem;
font-size: 1.1rem !important;
line-height: 1 !important;
}
.project-carousel-mobile-details .project-portfolio-teaser__size {
margin-top: 0.3rem;
font-size: 0.7rem;
line-height: 1.25;
}
.project-slide__media {
position: relative;
inset: auto;
display: block;
aspect-ratio: 16 / 9;
min-height: 0;
padding: 0;
background: #0d0f0d;
}
.project-carousel .project-slide__image {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center;
}
.project-carousel .project-arrow {
top: 50%;
width: 2.5rem !important;
height: 2.5rem !important;
}
.project-carousel .project-carousel-dots {
display: none;
}
html[data-theme="light"] .project-carousel-mobile-details {
border-top-color: rgba(16, 21, 13, 0.12);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 40px rgba(16, 21, 13, 0.1);
}
}
@media (min-width: 1024px) {
.project-portfolio-teaser__content {
display: flex;
justify-content: flex-end;
padding-right: clamp(2rem, 6vw, 5rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.project-portfolio-teaser__panel {
width: min(100%, 420px);
padding: 1.35rem 1.2rem 1.35rem 1.1rem;
border-left-width: 3px;
}
.project-portfolio-teaser__eyebrow {
font-size: 0.58rem;
letter-spacing: 0.24em;
}
.project-portfolio-teaser__title {
margin-top: 0.65rem;
font-size: clamp(2rem, 3.4vw, 3.45rem);
}
.project-portfolio-teaser__size {
margin-top: 0.65rem;
font-size: 0.98rem;
}
.project-portfolio-teaser__button {
margin-top: 1.15rem;
padding: 0.72rem 0.9rem;
font-size: 1rem;
}
}
@media (max-width: 767px) {
.project-portfolio-teaser__content {
padding: 3.5rem 1.25rem;
}
.project-portfolio-teaser__panel {
width: 100%;
max-width: 22rem;
padding: 1.25rem 1.15rem 1.25rem 1rem;
border-left-width: 3px;
}
.project-portfolio-teaser__eyebrow {
font-size: 0.56rem;
letter-spacing: 0.22em;
}
.project-portfolio-teaser__title {
margin-top: 0.65rem;
font-size: clamp(1.85rem, 10vw, 2.5rem);
line-height: 0.95;
}
.project-portfolio-teaser__size {
margin-top: 0.75rem;
font-size: 0.9rem;
}
.project-portfolio-teaser__proof {
font-size: 0.76rem;
}
.project-portfolio-teaser__button {
margin-top: 1.35rem;
padding: 0.75rem 0.95rem;
font-size: 0.88rem;
}
}
@media (max-width: 767px) {
.support-fixed-section {
background-attachment: scroll;
}
.trifecta-section,
.energy-calculator-section {
background-attachment: scroll;
}
}
html[data-theme="light"] .support-fixed-section--terms {
background-image: radial-gradient(circle at 15% 20%, rgba(153, 202, 61, 0.14), transparent 28%), radial-gradient(circle at 88% 14%, rgba(245, 133, 31, 0.1), transparent 24%), linear-gradient(90deg, rgba(245, 247, 239, 0.78), rgba(245, 247, 239, 0.56)), url('../images/projects/ctp-flexibles-cape-town.jpg');
}
html[data-theme="light"] .support-fixed-section--sla {
background-image: radial-gradient(circle at 15% 20%, rgba(153, 202, 61, 0.14), transparent 28%), radial-gradient(circle at 88% 14%, rgba(29, 156, 235, 0.1), transparent 24%), linear-gradient(90deg, rgba(245, 247, 239, 0.78), rgba(245, 247, 239, 0.56)), url('../images/projects/stellenbosch-university-tygerberg-campus.jpg');
}
html[data-theme="light"] .support-fixed-section--projects {
background-image: radial-gradient(circle at 18% 18%, rgba(29, 156, 235, 0.12), transparent 28%), radial-gradient(circle at 86% 76%, rgba(245, 133, 31, 0.1), transparent 24%), linear-gradient(90deg, rgba(245, 247, 239, 0.78), rgba(245, 247, 239, 0.56)), url('../images/projects/bmri-stellenbosch-university-parow.jpg');
}
html[data-theme="light"] .support-fixed-section--articles {
background-image: radial-gradient(circle at 16% 20%, rgba(153, 202, 61, 0.13), transparent 28%), radial-gradient(circle at 86% 18%, rgba(29, 156, 235, 0.1), transparent 24%), linear-gradient(90deg, rgba(245, 247, 239, 0.78), rgba(245, 247, 239, 0.56)), url('../images/projects/upd-rooftop-lea-glen.jpg');
}
html[data-theme="light"] .support-frost-panel,
html[data-theme="light"] .support-fixed-section .sla-packages,
html[data-theme="light"] .support-fixed-section .legal-row,
html[data-theme="light"] .support-fixed-section .sla-row,
html[data-theme="light"] .support-fixed-section .sla-abandoned-callout,
html[data-theme="light"] .support-fixed-section [data-project-carousel],
html[data-theme="light"] .solar-recycling-panel {
background-color: rgba(255, 255, 255, 0.62) !important;
backdrop-filter: blur(16px) saturate(125%);
}
/* Mobile responsiveness pass across the shared Varition 2 pages */
@media (max-width: 1023px) {
.site-header {
flex-wrap: wrap;
gap: 1rem;
padding: 1rem 1.25rem !important;
}
.site-header > a {
flex: 1 1 auto;
min-width: 0;
}
.site-header img[alt="Infoled"] {
max-width: min(180px, 52vw);
}
.site-header nav.hidden {
order: 3;
display: flex !important;
width: 100%;
gap: 1rem;
overflow-x: auto;
padding: 0.25rem 0 0.15rem;
color: inherit;
scrollbar-width: none;
}
.site-header nav.hidden::-webkit-scrollbar {
display: none;
}
.site-header nav a {
flex: 0 0 auto;
white-space: nowrap;
font-size: 0.78rem;
}
.site-header > div.hidden {
display: flex !important;
flex: 0 0 auto;
gap: 0.6rem;
}
.site-header .client-portal-link {
min-height: 38px;
padding: 0.45rem 0.8rem !important;
font-size: 0.75rem;
white-space: nowrap;
}
main > section:first-child h1,
.hero-section h1 {
max-width: 100%;
font-size: clamp(2.75rem, 15vw, 4.7rem) !important;
line-height: 0.92 !important;
overflow-wrap: anywhere;
}
main > section:first-child p,
.hero-copy,
.trifecta-section p,
.energy-calculator-section p {
max-width: 100%;
}
.trifecta-section,
.energy-calculator-section {
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
}
.trifecta-section h2,
.energy-calculator-section h2 {
font-size: clamp(2.6rem, 13vw, 4.5rem) !important;
line-height: 0.94 !important;
}
.trifecta-section .grid {
grid-template-columns: 1fr !important;
}
.trifecta-card {
min-height: auto;
padding: 1.5rem !important;
}
.trifecta-card-head {
margin-bottom: 1.5rem !important;
}
.energy-result-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.energy-result-card--wide {
grid-column: span 2;
}
.project-slide h3 {
font-size: clamp(2.4rem, 11vw, 4rem) !important;
overflow-wrap: anywhere;
}
}
@media (max-width: 767px) {
body {
overflow-x: hidden;
}
.hero-section {
--hero-video-position: 50% 8%;
justify-content: flex-start !important;
}
body:not(.page-home) .hero-section {
background-color: #000 !important;
}
.hero-section__backdrop,
.hero-section__overlay {
position: absolute;
inset: 0;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
transform: none;
object-fit: cover;
object-position: var(--hero-video-position);
filter: none;
}
.hero-section > main {
flex-grow: 0 !important;
justify-content: flex-start !important;
margin-top: 0 !important;
padding-top: 3.2rem !important;
padding-bottom: 1rem !important;
}
body.page-home .hero-section__content > main {
padding-top: 1.75rem !important;
padding-bottom: 1.25rem !important;
}
.hero-section > main > div {
max-width: 100% !important;
}
.hero-kicker {
font-size: clamp(3.85rem, 17vw, 5rem) !important;
line-height: 0.86 !important;
max-width: 92vw;
}
.hero-cta {
display: block !important;
width: min(100%, 24rem);
margin-top: 2.2rem !important;
}
.hero-cta button {
width: 100%;
height: 58px !important;
justify-content: center;
padding-right: 1.4rem !important;
padding-left: 1.4rem !important;
font-size: 1rem;
font-weight: 800;
}
.hero-copy {
margin-top: 1.5rem !important;
font-size: 1rem !important;
line-height: 1.55 !important;
color: rgba(255, 255, 255, 0.82) !important;
}
.hero-offerings {
margin-top: 0 !important;
padding-bottom: 0 !important;
}
.hero-offerings > .mb-4 {
margin-bottom: 0.85rem !important;
}
.hero-offering-header {
display: block;
}
.hero-offering-header h2 {
font-size: clamp(2.35rem, 11vw, 3.25rem);
}
.hero-offering-header p {
max-width: 100%;
margin-top: 0.55rem;
font-size: 0.88rem;
text-align: left;
}
.hero-offerings > .mb-4 p {
letter-spacing: 0.28em !important;
}
.hero-section .grid.grid-cols-1 {
gap: 0.85rem !important;
}
.hero-offering-card {
height: auto !important;
min-height: 240px !important;
border-radius: 18px !important;
overflow: visible !important;
}
.hero-offering-content {
min-height: 240px;
justify-content: flex-start;
padding: 1.15rem !important;
padding-right: 4.3rem !important;
}
.hero-offering-icon {
width: 44px;
height: 44px;
}
.hero-offering-icon svg {
width: 22px;
height: 22px;
}
.hero-offering-title {
max-width: 100%;
font-size: clamp(2rem, 8.6vw, 2.7rem) !important;
line-height: 1 !important;
overflow-wrap: normal;
}
.hero-offering-detail {
margin-top: auto;
font-size: 0.76rem;
line-height: 1.35;
}
main > section:first-child > .relative,
main > section:first-child .mx-auto,
.support-fixed-section > .mx-auto,
.trifecta-section > .relative,
.energy-calculator-section > .relative,
footer > .max-w-\[1440px\] {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
main > section:first-child .tracking-\[0\.35em\],
main > section:first-child .tracking-\[0\.28em\],
.energy-calculator-section .tracking-\[0\.35em\],
.energy-calculator-section .tracking-\[0\.3em\] {
letter-spacing: 0.18em !important;
}
.energy-calculator-intro {
gap: 1rem;
}
.energy-calculator-icon {
width: 58px;
height: 58px;
}
.energy-calculator-icon svg {
width: 34px;
height: 34px;
}
.energy-calculator-section h3 {
font-size: clamp(2.15rem, 12vw, 3rem) !important;
}
.energy-result-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.energy-result-card,
.energy-result-card--wide {
grid-column: auto;
min-height: 104px;
padding: 1rem;
}
.energy-result-card span {
font-size: 0.82rem;
}
.energy-result-card strong {
font-size: clamp(1.35rem, 8vw, 1.85rem);
}
.energy-calculator-heading h1,
.energy-calculator-heading h2 {
font-size: clamp(2.85rem, 13vw, 4.6rem) !important;
}
.energy-calculator-subheading {
font-size: clamp(1.25rem, 6vw, 1.85rem);
}
.energy-calculator-heading-copy {
font-size: 1rem;
}
.energy-calculator-cta {
flex-direction: column;
align-items: stretch;
padding: 1rem;
}
.energy-calculator-cta p {
font-size: 1.35rem;
}
.energy-calculator-cta button {
width: 100%;
}
.support-fixed-section .legal-row,
.support-fixed-section .sla-row {
grid-template-columns: 1fr !important;
padding: 1.25rem;
}
.legal-icon {
width: 4rem !important;
height: 4rem !important;
}
.support-fixed-section h2,
.support-fixed-section h3 {
font-size: clamp(2rem, 10vw, 2.75rem) !important;
line-height: 0.98 !important;
overflow-wrap: anywhere;
}
.project-slide {
grid-template-columns: 1fr !important;
}
.solar-recycling-panel {
border-radius: 18px;
padding: 1.25rem;
}
.solar-recycling-panel--video {
padding: 0.75rem;
}
.solar-recycling-video {
border-radius: 14px;
}
.solar-recycling-panel h2 {
font-size: clamp(2.2rem, 11vw, 3.3rem) !important;
}
.enquiry-dialog,
.portal-dialog,
.offering-dialog,
.trifecta-dialog {
width: calc(100vw - 1.5rem) !important;
max-height: calc(100vh - 1.5rem);
overflow-y: auto;
}
footer .grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 420px) {
.site-header > div.hidden {
width: 100%;
justify-content: space-between;
}
.site-header .client-portal-link {
flex: 1 1 auto;
}
.theme-toggle {
flex: 0 0 74px;
}
}
.mobile-menu-toggle {
display: none;
}
.mobile-offcanvas {
position: fixed;
inset: 0;
z-index: 80;
pointer-events: none;
}
.mobile-offcanvas__scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.68);
opacity: 0;
transition: opacity 220ms ease;
}
.mobile-offcanvas__panel {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: min(86vw, 360px);
display: flex;
flex-direction: column;
gap: 1.8rem;
padding: 1.2rem;
border-right: 1px solid rgba(153, 202, 61, 0.32);
background: rgba(5, 6, 5, 0.96);
box-shadow: 28px 0 70px rgba(0, 0, 0, 0.42);
transform: translateX(-100%);
transition: transform 240ms ease;
}
.mobile-offcanvas.is-open {
pointer-events: auto;
}
.mobile-offcanvas.is-open .mobile-offcanvas__scrim {
opacity: 1;
}
.mobile-offcanvas.is-open .mobile-offcanvas__panel {
transform: translateX(0);
}
.mobile-offcanvas__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.mobile-offcanvas__logo {
height: 2.45rem;
max-width: 170px;
object-fit: contain;
}
.mobile-offcanvas__close {
display: inline-flex;
width: 2.6rem;
height: 2.6rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 9999px;
color: #fff;
font-size: 1.7rem;
line-height: 1;
}
.mobile-offcanvas__nav {
display: grid;
gap: 0.35rem;
}
.mobile-offcanvas__nav a,
.mobile-offcanvas__quote,
.mobile-offcanvas__portal {
display: flex;
min-height: 3.25rem;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 0 1rem;
color: #fff;
font-size: 0.86rem;
font-weight: 800;
text-transform: uppercase;
transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.mobile-offcanvas__nav a:hover,
.mobile-offcanvas__nav a:focus-visible,
.mobile-offcanvas__nav a.is-active,
.mobile-offcanvas__quote:hover,
.mobile-offcanvas__quote:focus-visible,
.mobile-offcanvas__portal:hover,
.mobile-offcanvas__portal:focus-visible {
border-color: rgba(153, 202, 61, 0.7);
background: rgba(153, 202, 61, 0.1);
color: #99CA3D;
}
.mobile-offcanvas__quote {
justify-content: center;
border-color: rgba(29, 156, 235, 0.34);
color: #fff;
}
.mobile-offcanvas__portal {
margin-top: 0;
justify-content: center;
background: #99CA3D;
color: #10150d;
}
html[data-theme="light"] .mobile-offcanvas__scrim {
background: rgba(16, 21, 13, 0.42);
}
html[data-theme="light"] .mobile-offcanvas__panel {
border-color: rgba(111, 152, 41, 0.34);
background: rgba(245, 247, 239, 0.98);
box-shadow: 28px 0 70px rgba(16, 21, 13, 0.18);
}
html[data-theme="light"] .mobile-offcanvas__close {
border-color: rgba(16, 21, 13, 0.2);
color: #10150d;
}
html[data-theme="light"] .mobile-offcanvas__nav a,
html[data-theme="light"] .mobile-offcanvas__quote {
border-color: rgba(16, 21, 13, 0.1);
color: #10150d;
}
html[data-theme="light"] .mobile-offcanvas__portal {
color: #10150d;
}
@media (max-width: 1023px) {
.site-header {
display: grid !important;
grid-template-columns: 3rem minmax(0, 1fr) 74px;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem !important;
}
.site-header > a,
.site-header > div:not(.hidden) {
display: none !important;
}
.site-header nav.hidden {
display: none !important;
}
.site-header > div.hidden {
display: contents !important;
}
.site-header .client-portal-link {
display: none !important;
}
.site-header .theme-toggle {
grid-column: 3;
justify-self: end;
}
.mobile-menu-toggle {
grid-column: 1;
display: inline-flex;
width: 2.8rem;
height: 2.8rem;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.34rem;
border: 1px solid rgba(153, 202, 61, 0.62);
border-radius: 9999px;
background: rgba(0, 0, 0, 0.45);
color: #fff;
backdrop-filter: blur(10px);
}
.mobile-menu-toggle span {
display: block;
width: 1.1rem;
height: 2px;
border-radius: 9999px;
background: currentColor;
}
html[data-theme="light"] .mobile-menu-toggle {
border-color: rgba(17, 24, 39, 0.18);
background: rgba(255, 255, 255, 0.82);
color: #111827;
}
}
@media (min-width: 1024px) {
.mobile-offcanvas {
display: none;
}
}
/* Hero offering typography alignment */
.hero-offering-header h2 {
font-size: clamp(2.45rem, 3.25vw, 3.45rem);
letter-spacing: 0;
}
.hero-section [class*="Energy as a Service"] {
letter-spacing: 0;
}
@media (min-width: 1024px) {
.hero-offering-content {
justify-content: flex-start;
padding-top: 4.05rem;
}
.hero-offering-title {
margin-bottom: 0.45rem;
font-size: clamp(1.75rem, 2.05vw, 2.12rem);
line-height: 0.96;
}
.hero-offering-detail {
margin-top: auto;
}
}
/* Over-image heading copy contrast */
.energy-calculator-section .energy-calculator-heading-copy,
.trifecta-section > .relative > div:first-child > p {
color: rgba(255, 255, 255, 0.94) !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
.trifecta-tagline,
html[data-theme="light"] .trifecta-section .trifecta-tagline {
color: #fff !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
html[data-theme="light"] .energy-calculator-section .energy-calculator-heading-copy,
html[data-theme="light"] .trifecta-section > .relative > div:first-child > p {
color: #10150d !important;
text-shadow: none;
}
/* Prevent image-backed Home sections from tiling in light mode */
.energy-calculator-section,
.trifecta-section,
.project-portfolio-teaser {
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
}
html[data-theme="light"] .energy-calculator-section,
html[data-theme="light"] .trifecta-section,
html[data-theme="light"] .project-portfolio-teaser {
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
}
/* Light mode header contrast */
html[data-theme="light"] .site-header img[alt="Infoled"],
html[data-theme="light"] .mobile-offcanvas__logo {
content: url("../images/logo-new-dark.png") !important;
}
html[data-theme="light"] .site-header nav a,
html[data-theme="light"] .hero-section .site-header nav a,
html[data-theme="light"] .site-header .client-portal-link {
color: #10150d !important;
}
html[data-theme="light"] .site-header nav a:hover,
html[data-theme="light"] .hero-section .site-header nav a:hover,
html[data-theme="light"] .site-header nav a.is-active {
color: #6f9829 !important;
}
html[data-theme="light"] .mobile-menu-toggle,
html[data-theme="light"] .hero-section .site-header button.mobile-menu-toggle {
border-color: rgba(16, 21, 13, 0.28) !important;
background: rgba(255, 255, 255, 0.82) !important;
color: #10150d !important;
}
html[data-theme="light"] .mobile-menu-toggle span {
background: #10150d !important;
}
html[data-theme="light"] .mobile-offcanvas__nav a,
html[data-theme="light"] .mobile-offcanvas__quote {
color: #10150d !important;
}
/* Mobile content reduction from client screenshots */
@media (max-width: 767px) {
.energy-calculator-heading-copy,
.energy-calculator-grid--home .energy-calculator-results {
display: none !important;
}
.trifecta-section > .relative > div:first-child > p {
display: none !important;
}
.support-fixed-section--projects .project-slide dl {
display: none !important;
}
.support-fixed-section--projects .project-category-block > .mx-auto > .flex > div:first-child > p {
display: none !important;
}
main > section:first-child h1 + p,
main > section:first-child h1 + div,
.legal-grid h1 + p,
.legal-grid h1 + div {
display: none !important;
}
}
/* NEW_UPDATE.md section 1: shared desktop/mobile background and card polish */
.support-fixed-section,
.energy-calculator-section,
.trifecta-section,
.solar-recycling-fixed {
position: relative;
overflow: hidden;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
}
.support-fixed-section::after,
.energy-calculator-section::after,
.trifecta-section::after,
.solar-recycling-fixed::after {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
content: "";
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.18) 86%,
rgba(0, 0, 0, 0) 100%
);
}
html[data-theme="light"] .support-fixed-section::after,
html[data-theme="light"] .energy-calculator-section::after,
html[data-theme="light"] .trifecta-section::after,
html[data-theme="light"] .solar-recycling-fixed::after {
background: linear-gradient(
180deg,
rgba(245, 247, 239, 0) 0%,
rgba(245, 247, 239, 0) 70%,
rgba(245, 247, 239, 0.2) 86%,
rgba(245, 247, 239, 0) 100%
);
}
.support-fixed-section > *,
.energy-calculator-section > *,
.trifecta-section > *,
.solar-recycling-fixed > * {
position: relative;
z-index: 1;
}
.energy-calculator-section,
.trifecta-section {
border-top: none !important;
}
.support-fixed-section + .project-portfolio-teaser,
.energy-calculator-section + .project-portfolio-teaser,
.trifecta-section + .project-portfolio-teaser,
.solar-recycling-fixed + .project-portfolio-teaser,
.site-page-body + .project-portfolio-teaser {
border-top-color: transparent !important;
}
.project-portfolio-teaser__panel {
opacity: 0;
transform: translateY(16px);
transition:
opacity 360ms ease,
transform 360ms ease,
border-color 250ms ease,
box-shadow 250ms ease;
transition-delay: 0ms !important;
}
.energy-service-card,
.sla-tier-card,
.legal-row,
.sla-row,
.solar-recycling-panel,
.energy-calculator-panel,
.energy-result-card {
opacity: 0;
transform: translateY(24px);
transition:
opacity 600ms ease,
transform 600ms ease,
border-color 250ms ease,
box-shadow 250ms ease;
}
.trifecta-card {
opacity: 0;
transform: translateY(24px);
transition:
opacity 900ms ease,
transform 900ms ease,
border-color 500ms ease,
box-shadow 500ms ease;
}
.hero-offering-card {
opacity: 0;
transform: translateY(24px);
transition:
opacity 900ms ease,
transform 900ms ease,
border-color 500ms ease,
box-shadow 500ms ease,
background-color 500ms ease;
}
.energy-service-card.is-visible,
.sla-tier-card.is-visible,
.legal-row.is-visible,
.sla-row.is-visible,
.solar-recycling-panel.is-visible,
.energy-calculator-panel.is-visible,
.energy-result-card.is-visible,
.project-portfolio-teaser__panel.is-visible {
opacity: 1;
transform: translateY(0);
}
.trifecta-card.is-visible {
opacity: 1;
transform: translateY(-6px);
border-color: rgba(255, 255, 255, 0.8);
}
.hero-offering-card.is-visible {
opacity: 1;
transform: translateY(-4px);
border-color: rgba(153, 202, 61, 0.82);
box-shadow: inset 0 0 0 1px rgba(153, 202, 61, 0.16), 0 22px 58px rgba(0, 0, 0, 0.42);
}
.energy-service-card,
.trifecta-card,
.sla-tier-card,
.legal-row,
.sla-row,
.solar-recycling-panel,
.energy-calculator-panel,
.energy-result-card {
background-color: rgba(8, 10, 8, 0.62) !important;
}
html[data-theme="light"] .energy-service-card,
html[data-theme="light"] .trifecta-card,
html[data-theme="light"] .sla-tier-card,
html[data-theme="light"] .legal-row,
html[data-theme="light"] .sla-row,
html[data-theme="light"] .solar-recycling-panel,
html[data-theme="light"] .energy-calculator-panel,
html[data-theme="light"] .energy-result-card {
background-color: rgba(255, 255, 255, 0.68) !important;
}
.legal-row:hover,
.sla-row:hover,
.solar-recycling-panel:hover,
.energy-calculator-panel:hover,
.energy-result-card:hover {
transform: translateY(-6px);
border-color: rgba(153, 202, 61, 0.72);
box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
}
/* Keep the final portfolio reveal on the same visual plane as the page background. */
.support-fixed-section,
.energy-calculator-section,
.trifecta-section,
.solar-recycling-fixed,
.project-portfolio-teaser {
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
}
.support-fixed-section::after,
.energy-calculator-section::after,
.trifecta-section::after,
.solar-recycling-fixed::after {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.64) 0%,
rgba(0, 0, 0, 0.58) 58%,
rgba(0, 0, 0, 0.28) 84%,
rgba(0, 0, 0, 0) 100%
) !important;
}
html[data-theme="light"] .support-fixed-section::after,
html[data-theme="light"] .energy-calculator-section::after,
html[data-theme="light"] .trifecta-section::after,
html[data-theme="light"] .solar-recycling-fixed::after {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.54) 0%,
rgba(255, 255, 255, 0.44) 58%,
rgba(255, 255, 255, 0.2) 84%,
rgba(255, 255, 255, 0) 100%
) !important;
}
.project-portfolio-teaser {
border-top: 0 !important;
}
.project-portfolio-teaser::before {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
content: "";
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.42) 0%,
rgba(0, 0, 0, 0.18) 18%,
rgba(0, 0, 0, 0) 38%
);
}
html[data-theme="light"] .project-portfolio-teaser::before {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.34) 0%,
rgba(255, 255, 255, 0.14) 18%,
rgba(255, 255, 255, 0) 38%
);
}
.project-portfolio-teaser > * {
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.support-fixed-section,
.energy-calculator-section,
.trifecta-section,
.solar-recycling-fixed,
.project-portfolio-teaser {
background-attachment: scroll !important;
}
}
/* Use one actual background image per page area; overlays fade separately. */
.energy-calculator-section,
.trifecta-section,
html[data-theme="light"] .energy-calculator-section,
html[data-theme="light"] .trifecta-section {
background-image: url('../images/projects/the-one-stellenbosch.jpg') !important;
}
.support-fixed-section--projects,
html[data-theme="light"] .support-fixed-section--projects {
background-image: url('../images/projects/bmri-stellenbosch-university-parow.jpg') !important;
}
.support-fixed-section--terms,
html[data-theme="light"] .support-fixed-section--terms {
background-image: url('../images/projects/ctp-flexibles-cape-town.jpg') !important;
}
.support-fixed-section--sla,
html[data-theme="light"] .support-fixed-section--sla {
background-image: url('../images/projects/stellenbosch-university-tygerberg-campus.jpg') !important;
}
.support-fixed-section--articles,
html[data-theme="light"] .support-fixed-section--articles {
background-image: url('../images/projects/dewetshof-wines-robertson.jpg') !important;
}
.solar-recycling-fixed,
html[data-theme="light"] .solar-recycling-fixed {
background-image: url('../images/projects/nutec-ink-ottery.jpg') !important;
}
/* Correct overlay behavior: steady until the final section, then fade into the portfolio image. */
.project-portfolio-teaser::before {
display: none !important;
}
.energy-calculator-section::after {
display: none !important;
}
html[data-theme="light"] .energy-calculator-section::after {
display: none !important;
}
.trifecta-section::after,
.support-fixed-section::after,
.solar-recycling-fixed::after {
display: none !important;
}
html[data-theme="light"] .trifecta-section::after,
html[data-theme="light"] .support-fixed-section::after,
html[data-theme="light"] .solar-recycling-fixed::after {
display: none !important;
}
.hero-copy__mobile {
display: none;
}
.home-mobile-hero-logo {
display: none;
}
@media (max-width: 767px) {
.home-mobile-hero-logo {
position: absolute;
top: 1.25rem;
left: 1.25rem;
z-index: 12;
display: block;
width: min(42vw, 150px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.48));
}
.hero-section {
min-height: 0;
}
.hero-section > main {
min-height: 0;
padding-top: 4.6rem !important;
padding-bottom: 2.8rem !important;
}
.hero-copy {
max-width: 19rem !important;
}
.hero-copy__desktop {
display: none;
}
.hero-copy__mobile {
display: grid;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.92);
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0.12em;
line-height: 1.15;
text-transform: uppercase;
}
.hero-copy__mobile span {
display: inline-flex;
width: fit-content;
border-left: 2px solid #99CA3D;
padding-left: 0.75rem;
}
.hero-offerings {
position: relative;
z-index: 1;
margin-top: 0 !important;
padding-top: 3rem !important;
}
body.page-home .hero-offerings {
padding-top: 1.5rem !important;
}
.hero-offering-card {
overflow: hidden !important;
background-color: rgba(8, 12, 10, 0.72) !important;
backdrop-filter: blur(14px) saturate(120%);
}
html[data-theme="light"] .hero-offering-card {
background-color: rgba(255, 255, 255, 0.72) !important;
}
html[data-theme="light"] .hero-offering-card .hero-offering-title,
html[data-theme="light"] .hero-offering-card .hero-offering-detail,
html[data-theme="light"] .hero-offering-card .text-gray-300,
html[data-theme="light"] .hero-offering-card .text-\[\#1D9CEB\],
html[data-theme="light"] .hero-offering-card p {
color: #10150d !important;
}
html[data-theme="light"] .hero-offering-card .hero-offering-detail {
border-top-color: rgba(16, 21, 13, 0.14);
}
html[data-theme="light"] .hero-offering-card::after {
color: #10150d;
border-color: rgba(16, 21, 13, 0.28);
}
}
/* Mobile header should retain the site header surface, not reveal hero media underneath. */
@media (max-width: 767px) {
.hero-section .site-header {
height: 5.25rem !important;
min-height: 5.25rem !important;
align-content: center !important;
background: rgba(5, 6, 5, 0.98) !important;
border-bottom: 1px solid rgba(153, 202, 61, 0.45) !important;
padding-top: 0.85rem !important;
padding-bottom: 0.85rem !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}
html[data-theme="light"] .hero-section .site-header {
background: rgba(245, 247, 239, 0.98) !important;
border-bottom-color: rgba(16, 21, 13, 0.18) !important;
box-shadow: 0 12px 32px rgba(16, 21, 13, 0.12) !important;
}
}
.page-articles .articles-intro-copy,
html[data-theme="light"] .page-articles .articles-intro-copy {
color: #fff !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.article-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: 3rem;
}
.article-pagination__link {
display: inline-flex;
min-width: 2.75rem;
min-height: 2.75rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(153, 202, 61, 0.48);
border-radius: 9999px;
background: rgba(5, 6, 5, 0.72);
padding: 0 0.95rem;
color: #fff;
font-weight: 800;
line-height: 1;
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.article-pagination__link--wide {
min-width: 7rem;
}
.article-pagination__link:hover,
.article-pagination__link.is-active {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
transform: translateY(-2px);
}
.contact-page-form .enquiry-dialog {
position: relative;
width: 100%;
max-width: none;
}
.contact-page-form .enquiry-form textarea {
width: 100%;
min-height: 140px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
background: #1b1b1b;
padding: 16px 18px;
color: #fff;
outline: none;
resize: vertical;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.contact-page-form .enquiry-form textarea:focus {
border-color: #99CA3D;
box-shadow: 0 0 0 3px rgba(153, 202, 61, 0.12);
}
.contact-page-form .booking-link {
width: fit-content;
padding-right: 1.25rem;
padding-left: 1.25rem;
}
body.page-contact {
--site-page-bg-image: url('../images/projects/clicks-head-office.jpg');
}
html[data-theme="light"] .article-pagination__link {
background: rgba(255, 255, 255, 0.76);
color: #10150d;
}
/* Keep the enquiry dialog inside the usable mobile viewport and make its content scrollable. */
@media (max-width: 767px) {
.enquiry-modal,
.enquiry-modal.is-open {
height: 100vh;
height: 100dvh;
align-items: flex-start;
overflow: hidden;
padding: 0.5rem;
}
.enquiry-dialog {
width: 100% !important;
max-height: calc(100vh - 1rem) !important;
max-height: calc(100dvh - 1rem) !important;
min-height: 0;
overflow-x: hidden;
overflow-y: auto !important;
overscroll-behavior: contain;
scrollbar-gutter: stable;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}
}
/* Final shared section-media treatment: preserve source framing and use one dark fade in both themes. */
.support-fixed-section,
.energy-calculator-section,
.trifecta-section,
.solar-recycling-fixed,
.project-portfolio-teaser {
background-attachment: scroll !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.support-fixed-section::after,
.energy-calculator-section::after,
.trifecta-section::after,
.solar-recycling-fixed::after,
html[data-theme="light"] .support-fixed-section::after,
html[data-theme="light"] .energy-calculator-section::after,
html[data-theme="light"] .trifecta-section::after,
html[data-theme="light"] .solar-recycling-fixed::after {
display: none !important;
background: none !important;
}
html[data-theme="light"] .energy-calculator-heading h1,
html[data-theme="light"] .energy-calculator-heading h2,
html[data-theme="light"] .trifecta-section > .relative > div:first-child h2 {
color: #fff !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
html[data-theme="light"] .energy-calculator-section .energy-calculator-heading-copy,
html[data-theme="light"] .trifecta-section > .relative > div:first-child > p {
color: rgba(255, 255, 255, 0.92) !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
/* === Global stationary page background (one image per page, content scrolls) === */
:root {
--site-page-overlay: rgba(0, 0, 0, 0.78);
--site-page-overlay-light: rgba(16, 21, 13, 0.82);
}
body.page-home {
--site-page-bg-image: url('../images/projects/the-one-stellenbosch.jpg');
}
body.page-projects {
--site-page-bg-image: url('../images/projects/bmri-stellenbosch-university-parow.jpg');
}
body.page-terms {
--site-page-bg-image: url('../images/projects/ctp-flexibles-cape-town.jpg');
}
body.page-sla {
--site-page-bg-image: url('../images/projects/stellenbosch-university-tygerberg-campus.jpg');
}
body.page-solar {
--site-page-bg-image: url('../images/projects/nutec-ink-ottery.jpg');
}
body.page-articles {
--site-page-bg-image: url('../images/projects/dewetshof-wines-robertson.jpg');
}
body.page-calculator {
--site-page-bg-image: url('../images/projects/clicks-head-office.jpg');
}
body {
position: relative;
background-color: #050605 !important;
isolation: isolate;
}
body::before {
position: fixed;
inset: 0;
z-index: -2;
background-color: #050605;
background-image: var(--site-page-bg-image, url('../images/projects/the-one-stellenbosch.jpg'));
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
content: "";
pointer-events: none;
}
@media (max-width: 767px) {
body::before {
background-position: center center;
background-size: cover;
}
body.page-projects::before {
background-position: center top;
background-size: 100% auto;
}
}
body.page-projects::before {
background-position: center top;
background-size: 100% auto;
}
body::after {
display: none;
}
html[data-theme="light"] body::before {
background-color: #f5f7ef;
}
body.page-home .hero-section {
position: relative;
z-index: 2;
isolation: isolate;
background-color: #000;
}
body.page-home .hero-section__content {
display: contents;
}
@media (max-width: 767px) {
body.page-home .hero-section {
min-height: 0;
margin-bottom: 0;
overflow: visible;
background: transparent !important;
isolation: auto;
}
html[data-theme="light"] body.page-home .hero-section {
background: transparent !important;
color: #fff;
}
body.page-home .hero-section__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
body.page-home .hero-section__content::before {
position: absolute;
inset: 0;
z-index: 0;
background: var(--site-page-overlay);
content: "";
pointer-events: none;
}
html[data-theme="light"] body.page-home .hero-section__content::before {
background: var(--site-page-overlay-light);
}
body.page-home .hero-section__content > * {
position: relative;
z-index: 1;
}
body.page-home .hero-section__backdrop {
position: relative;
inset: auto;
flex: 0 0 auto;
width: 100%;
height: auto;
overflow: hidden;
background-color: #000;
}
body.page-home .hero-section__overlay {
position: absolute;
inset: 0;
}
body.page-home .hero-video {
position: relative;
display: block;
width: 100%;
height: auto;
min-width: 0;
min-height: 0;
transform: none;
object-fit: contain;
object-position: center center;
vertical-align: top;
}
body.page-home .hero-section__content > main {
position: relative;
z-index: 1;
flex-grow: 0;
margin-top: 0;
padding-top: 1.75rem !important;
padding-bottom: 1.25rem !important;
}
body.page-home .hero-kicker {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
body.page-home .hero-copy__mobile span {
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
body.page-home .hero-section__content > .hero-offerings {
position: relative;
z-index: 1;
padding-bottom: 0 !important;
padding-top: 1.5rem !important;
}
body.page-home .site-scroll-surface {
margin-top: 0;
}
body.page-home .energy-calculator-section {
padding-top: 3rem !important;
}
}
body.page-home .site-scroll-surface {
position: relative;
z-index: 1;
}
.site-page-body {
position: relative;
}
.site-page-body::before {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(
180deg,
var(--site-page-overlay) 0%,
var(--site-page-overlay) 84%,
rgba(0, 0, 0, 0.52) 90%,
rgba(0, 0, 0, 0.28) 94%,
rgba(0, 0, 0, 0.1) 97%,
rgba(0, 0, 0, 0) 100%
);
content: "";
pointer-events: none;
}
html[data-theme="light"] .site-page-body::before {
background: linear-gradient(
180deg,
var(--site-page-overlay-light) 0%,
var(--site-page-overlay-light) 84%,
rgba(16, 21, 13, 0.56) 90%,
rgba(16, 21, 13, 0.3) 94%,
rgba(16, 21, 13, 0.1) 97%,
rgba(16, 21, 13, 0) 100%
);
}
.site-page-body + .project-portfolio-teaser {
margin-top: 0;
}
.site-page-body > * {
position: relative;
z-index: 1;
}
body.page-home .site-scroll-surface > * {
position: relative;
z-index: 1;
}
.project-portfolio-teaser {
position: relative;
z-index: 1;
border-top: 0 !important;
}
.project-portfolio-teaser::before,
html[data-theme="light"] .project-portfolio-teaser::before {
display: none !important;
}
.project-portfolio-teaser > * {
position: relative;
z-index: 1;
}
.support-fixed-section,
.energy-calculator-section,
.trifecta-section,
.solar-recycling-fixed,
.project-portfolio-teaser,
.project-portfolio-teaser--home,
.project-portfolio-teaser--projects,
.project-portfolio-teaser--terms,
.project-portfolio-teaser--sla,
.project-portfolio-teaser--solar,
.project-portfolio-teaser--articles,
.support-fixed-section--terms,
.support-fixed-section--sla,
.support-fixed-section--projects,
.support-fixed-section--articles,
html[data-theme="light"] .support-fixed-section,
html[data-theme="light"] .support-fixed-section--terms,
html[data-theme="light"] .support-fixed-section--sla,
html[data-theme="light"] .support-fixed-section--projects,
html[data-theme="light"] .support-fixed-section--articles,
html[data-theme="light"] .energy-calculator-section,
html[data-theme="light"] .trifecta-section,
html[data-theme="light"] .solar-recycling-fixed {
background-image: none !important;
background-color: transparent !important;
background-attachment: scroll !important;
}
.support-fixed-section::after,
.energy-calculator-section::after,
.trifecta-section::after,
.solar-recycling-fixed::after,
html[data-theme="light"] .support-fixed-section::after,
html[data-theme="light"] .energy-calculator-section::after,
html[data-theme="light"] .trifecta-section::after,
html[data-theme="light"] .solar-recycling-fixed::after {
display: none !important;
}
.project-portfolio-teaser::before,
html[data-theme="light"] .project-portfolio-teaser::before {
display: none !important;
}
@media (max-width: 767px) {
.energy-calculator-mobile-callout h3 {
max-width: none;
font-size: clamp(3.1rem, 15vw, 4.25rem) !important;
line-height: 0.88;
}
/* Keep every page's stationary image covering the full mobile viewport. */
body::before,
body.page-projects::before {
z-index: -1;
background-position: center center !important;
background-size: cover !important;
}
/* Remove the desktop full-screen reveal gap after the final projects carousel. */
body.page-projects .project-portfolio-teaser--projects {
display: block !important;
height: auto !important;
min-height: 0 !important;
align-items: initial !important;
overflow: visible;
}
body.page-projects .project-portfolio-teaser--projects .project-portfolio-teaser__content {
min-height: 0 !important;
margin: 0 auto;
padding: 1rem 0.75rem 1.5rem !important;
}
}
/* Keep the nav readable over the stationary page background. */
.site-header {
background: rgba(0, 0, 0, 0.82);
border-bottom: 1px solid rgba(153, 202, 61, 0.65) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.site-header.is-sticky {
background: rgba(0, 0, 0, 0.82);
}
html[data-theme="light"] .site-header {
background: rgba(255, 255, 255, 0.86);
border-bottom-color: rgba(153, 202, 61, 0.72) !important;
box-shadow: 0 12px 32px rgba(16, 21, 13, 0.12);
}
html[data-theme="light"] .site-header.is-sticky {
background: rgba(255, 255, 255, 0.86);
border-bottom-color: rgba(153, 202, 61, 0.72) !important;
}
.page-header {
position: relative;
z-index: 2;
background: rgba(0, 0, 0, 0.82);
border-bottom: 1px solid rgba(153, 202, 61, 0.65) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.page-header.legal-grid {
background-image: none;
}
.page-header > .absolute.inset-0 {
display: none;
}
.page-header .energy-calculator-heading-copy,
.page-header p:not([class*="text-xs"]):not(.energy-calculator-subheading),
.page-header .mt-6[class*="text-lg"] {
font-size: 1rem !important;
}
html[data-theme="light"] .page-header {
background: rgba(255, 255, 255, 0.86);
border-bottom-color: rgba(153, 202, 61, 0.72) !important;
box-shadow: 0 12px 32px rgba(16, 21, 13, 0.12);
}
html[data-theme="light"] .page-header h1,
html[data-theme="light"] .page-header .text-white {
color: #10150d !important;
}
html[data-theme="light"] .page-header .text-gray-300,
html[data-theme="light"] .page-header .text-gray-400 {
color: #4b5543 !important;
}
html[data-theme="light"] .support-fixed-section--projects .project-category-heading {
color: #fff !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
/* Light mode: green accent text on light surfaces reads as black; orange subheading stays orange. */
html[data-theme="light"] .trifecta-card:hover,
html[data-theme="light"] .trifecta-card.is-visible {
border-color: rgba(111, 152, 41, 0.72) !important;
box-shadow: 0 24px 60px rgba(16, 21, 13, 0.14);
}
html[data-theme="light"] .page-header .text-\[\#99CA3D\],
html[data-theme="light"] .energy-calculator-panel .text-\[\#99CA3D\],
html[data-theme="light"] .energy-calculator-results .text-\[\#99CA3D\],
html[data-theme="light"] .energy-calculator-mobile-callout .text-\[\#99CA3D\],
html[data-theme="light"] .energy-result-card strong,
html[data-theme="light"] .solar-recycling-panel .text-\[\#99CA3D\],
html[data-theme="light"] .solar-recycling-panel h2,
html[data-theme="light"] .trifecta-card .text-\[\#99CA3D\],
html[data-theme="light"] .legal-row .text-\[\#99CA3D\],
html[data-theme="light"] .sla-row .text-\[\#99CA3D\],
html[data-theme="light"] .sla-packages .text-\[\#99CA3D\],
html[data-theme="light"] .sla-tier-card .text-\[\#99CA3D\],
html[data-theme="light"] .sla-abandoned-callout .text-\[\#99CA3D\],
html[data-theme="light"] .article-card .text-\[\#99CA3D\],
html[data-theme="light"] .article-body .text-\[\#99CA3D\],
html[data-theme="light"] .enquiry-dialog .text-\[\#99CA3D\],
html[data-theme="light"] .offering-dialog .text-\[\#99CA3D\],
html[data-theme="light"] .energy-calculator-cta small,
html[data-theme="light"] footer .text-\[\#99CA3D\],
html[data-theme="light"] .footer-reveal .text-\[\#99CA3D\] {
color: #10150d !important;
}
html[data-theme="light"] .energy-result-card--blue strong {
color: #1D9CEB !important;
}
html[data-theme="light"] .energy-calculator-section .energy-calculator-subheading {
color: #F5851F !important;
}
html[data-theme="light"] .hero-offering-icon,
html[data-theme="light"] .energy-calculator-icon {
color: #10150d !important;
border-color: rgba(16, 21, 13, 0.24) !important;
background: rgba(16, 21, 13, 0.06) !important;
}
html[data-theme="light"] .project-portfolio-teaser__panel {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(111, 152, 41, 0.34);
border-left-color: #99CA3D;
box-shadow: 0 24px 60px rgba(16, 21, 13, 0.14);
}
html[data-theme="light"] .project-portfolio-teaser__eyebrow {
color: #6f9829 !important;
}
html[data-theme="light"] .project-portfolio-teaser__title {
color: #10150d !important;
}
html[data-theme="light"] .project-portfolio-teaser__size {
color: #10150d !important;
}
html[data-theme="light"] .project-portfolio-teaser__proof {
color: #4b5543 !important;
}
html[data-theme="light"] .project-portfolio-teaser__button {
border-color: rgba(111, 152, 41, 0.65);
background: #10150d;
color: #fff;
}
html[data-theme="light"] .project-portfolio-teaser__button:hover,
html[data-theme="light"] .project-portfolio-teaser__button:focus-visible {
border-color: #99CA3D;
background: #99CA3D;
color: #050605;
}