/*fffhttps://coolors.co/eae2b7MAIN COLOR: #E63946 hover: #2C3F7CGREY COLOR: #495057ACCENT COLOR: #1D3557type-scale.comSPACING STSTEM (px)2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128FONT SYSTEM (px)10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98strong: orangesecond: blue*/* { margin: 0; padding: 0; box-sizing: border-box; color: var(--grey); --red: #D62828; --redlight: #D62828; --lightgrey: #F5F5F5; --grey: #495057; --darkgrey: #495057; --blue: #003652; --lightblue: #5CC6FF; --mediumblue: #00507A; --yellow: #f0cc71; --yellow2: #feed9d; --darkyellow: #ff5c35; /* #f39738;*/ --lightorange: #F5B72A; --orange: var(--darkyellow); /* #c74634;*/ --darkorange: #c74634; --white: #F6F2DF; --heading-color: #333; --text-color: var(--grey); --clear-font-family: 'Inter', sans-serif; --engaging-font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --cta-primary: var(--blue); --cta-primary-hover: var(--mediumblue); --cta-secondary: var(--orange); --cta-secondary-hover: var(--orange);}:root { /* Font Sizes (Desktop) */ --h1-size: 3rem; --h2-size: 2rem; --h3-size: 1.7rem; --h4-size: 1.6rem; /* Line Heights (Desktop) */ --h1-line-height: 1.2; --h2-line-height: 1.3; --h3-line-height: 1.3; --h4-line-height: 1.4; /* Layout Tokens */ --standard-gap: 2rem; --header-height: 150px; --usp-height: 55px; /* Font Sizes (Desktop) */ --p-size: 1.3rem; --li-size: 1.2rem; --section-title-size: 2rem; /* Line Heights (Desktop) */ --p-line-height: 1.8; --li-line-height: 1.6; --section-title-line-height: 1.3; /* Spacing */ --section-padding: 3rem; --sub-section-padding: 1.5rem; --card-padding: 1.2rem; --card-margin: 1.2rem 0.3rem; --icon-margin: 0.3rem; --list-margin-left: 1rem; /* Vertical Rhythm */ --heading-margin-bottom: 1.5rem; --paragraph-margin-bottom: 1.2rem; --list-margin-bottom: 1.2rem; --h1-margin-bottom: 1.5rem; --h2-margin-bottom: 1.4rem; --h3-margin-bottom: 1.3rem; --h4-margin-bottom: 1.2rem; --button-padding: 1rem 2rem; --button-width: 200px; /* Widgets styling */ --text-font-family: var(--clear-font-family); --text-font-size: 1.3em; --text-line-height: var(--p-line-height); --text-margin-bottom: var(--paragraph-margin-bottom); --nav-font-family: var(--engaging-font-family); --nav-font-size: 1.4em; --nav-line-height: var(--h4-line-height); --nav-margin-bottom: var(--paragraph-margin-bottom); --nav-color: var(--text-color); --title-font-family: var(--clear-font-family); --title-font-size: 2em; --title-line-height: var(--h4-line-height); --title-margin-bottom: var(--h4-margin-bottom); --title-color: var(--heading-color); --cta-padding: 0.7em; --cta-bg: var(--cta-secondary); --cta-bg-hover: var(--cta-secondary-hover); --cta-color: var(--white); --cta-font-size: var(--h4-size); --cta-width: var(--button-width); --cta-radius: 3px; --input-border-color: var(--grey); --input-border-radius: 3px; --col-gap: 3em; --megamenu-background-color: #fff; --highlight-text-font-family: var(--engaging-font-family); --highlight-text-spacing: 1px; --highlight-text-size: 1.5rem;}@media (max-width: 1200px) { :root { --megamenu-background-color: var(--white); }}@media (max-width: 768px) { :root { /* Font Sizes (Mobile) */ --h1-size: 2.2rem !important;; --h2-size: 1.8rem; --h3-size: 1.5rem; --h4-size: 1.4rem; /* Line Heights (Mobile) */ --h1-line-height: 1.3; --h2-line-height: 1.35; --h3-line-height: 1.4; --h4-line-height: 1.5; /* Adjust layout if needed */ --header-height: 100px; --usp-height: 50px; --standard-gap: 1.5rem; /* Font Sizes (Mobile) */ --p-size: 1rem; --li-size: 1rem; --section-title-size: 1.6rem; /* Line Heights (Mobile) */ --p-line-height: 1.5; --li-line-height: 1.5; --section-title-line-height: 1.3; /* Adjusted Section Padding */ --section-padding: 2.5rem 1.5rem; --sub-section-padding: 1rem; --paragraph-margin-bottom: 1rem; --list-margin-bottom: 1rem; --h1-margin-bottom: 1.5rem; --h2-margin-bottom: 1.5rem; --h3-margin-bottom: 1.5rem; --h4-margin-bottom: 1.5rem; --button-padding: 1rem 2rem; --card-margin: 1.2rem; --icon-margin: 0.3rem; --list-margin-left: 1rem; --megamenu-background-color: var(--white); }}h1,h2,h3,h4 { font-family: var(--clear-font-family);}h1 { font-size: var(--h1-size); line-height: var(--h1-line-height); margin-bottom: var(--h1-margin-bottom);}h2 { font-size: var(--h2-size); line-height: var(--h2-line-height); margin-bottom: var(--h2-margin-bottom);}h3 { font-size: var(--h3-size); line-height: var(--h3-line-height); margin-bottom: var(--h3-margin-bottom);}h4 { font-size: var(--h4-size); line-height: var(--h4-line-height); margin-bottom: var(--h4-margin-bottom);}p { font-size: var(--p-size); line-height: var(--p-line-height); margin-bottom: var(--paragraph-margin-bottom);}ul { margin-left: var(--list-margin-left);}li { font-size: var(--li-size); line-height: var(--li-line-height); margin-bottom: var(--list-margin-bottom);}section h2 { font-size: var(--section-title-size); line-height: var(--section-title-line-height);}section, .content, .info-content, .illustration { padding: var(--section-padding);}button { font-size: var(--p-size); padding: var(--button-padding); min-width: 200px;}i { margin-right: var(--icon-margin);}.page-content { margin-top: calc(var(--header-height) + var(--usp-height));}body { font-family: 'Inter', sans-serif; letter-spacing: 0;}.container { display: flex; flex-direction: column;}.yellow-start { background: #feed9d;}.banner { background: linear-gradient(90deg, #feed9d 0%, #feed9d 100%);}.yellow-end { background: linear-gradient(90deg, #feed9d 0%, rgba(255,255,255,1) 80%);} .organisation-trademark { width: 95%; padding: 10px 5px; display: flex; gap: 10px; img { border-radius: 5px; width: 32%; } } @media (max-width: 600px) { .organisation-trademark { flex-direction: column; img { width: 100%; } } .container .el--8 { grid-column: 2; } } .southern-solar-about { background: var(--white); display: flex; gap: 1rem; } .southern-solar-about .illustration { min-width: 350px; padding: 2rem 2rem 0 0; } .southern-solar-about h4 { font-size: var(--h4-size); } .southern-solar-about .ethos { color: var(--orange); font-family: var(--highlight-text-font-family); letter-spacing: var(--highlight-text-spacing); font-size: var(--highlight-text-size); } .southern-solar-about p, .southern-solar-about h4 { color: var(--grey); } .southern-solar-intro { position: relative; display: flex; } .southern-solar-intro { background: var(--lightgrey); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; width: 100%; } .southern-solar-intro .solar-organisation { width: 317px; } .southern-solar-intro .main-hub { color: var(--blue); font-weight: bolder; } .southern-solar-intro .solar-service { color: var(--blue); font-weight: bolder; } .southern-solar-intro div { flex: 1 0 300px; height: 100px; } .southern-solar-intro div:last-child { margin-right: 0; } .southern-solar-intro div h4 { color: var(--orange) } .southern-solar-intro div h3 { letter-spacing: -1px; } .southern-solar-intro div a:link { text-decoration: none; } .southern-solar-intro div a:hover, .southern-solar-intro div a:focus, .southern-solar-intro div a:active { text-decoration: underline; cursor: pointer; } .contact-home { width:100%; overflow: hidden; position: relative; } .contact-home { display: block; background-image: url("../images/van2.jpg"); width: 100%; background-position-y: -650px; } .contact-home .content { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; position: relative; width: 60%; margin: 0 auto; } .contact-home .southern-solar-location { background: var(--red); height: 600px; background-color: rgba(0, 0, 0, 0.5); border-radius: 25px; } .contact-home form { background-color: rgba(0, 0, 0, 0.5); border-radius: 25px; height: 600px; } .contact-home label { display: block; } .contact-home form h3, .contact-home form p { color: var(--white); } .contact-home form input, .contact-home form textarea { border-radius: 5px; display: block; } .contact-home form .float-label-field label { color: var(--white); } @media (max-width: 1600px) { header nav ul { gap: 20px; } } @media (max-width: 1200px) { .certification-declaration .content { width: 100%; } .site-footer { width: 100%; } .site-footer { .southern-solar-intro { width: 100%; } } .contact-home .southern-solar-location { visibility: hidden; height: 0; } .contact-home .southern-solar-location { width: 100%; } .contact-home .content { grid-template-columns: 1fr; gap: 0; width: 90%; } .certification-declaration { width: 100%; } .call-to-action-home { flex-direction: column; } .call-to-action-home div { width: 100% !important; } .southern-solar-about { flex-direction: column; } } @media (max-width: 900px) { .contact-home .content { width: 70%; } } .el--8 { position: absolute; top: -400px; }iframe, object, embed { max-width: 100%;}.float-label-field { border: none; outline: none; position: relative; box-sizing: border-box;}.float-label-field input,.float-label-field textarea { border: none; outline: none; width: 100%; border-bottom: solid 1px #efefef;}.float-label-field label { opacity: 0.5; position: absolute; top: 5px; left: 5px; transition: all 0.2s ease;}.float-label-field.focus label { color: orange;}.float-label-field.focus input, .float-label-field.focus textarea { border-bottom: solid 1px orange;}.float-label-field.float label { opacity: 1; top: -8px; transition: all 0.2s ease; font-weight: bold;}.success { color:green; margin-bottom: 1rem;}.error { color:red;}.wp-block-navigation .current-menu-item a { text-decoration: underline !important;}#map { height:100%}.placeholder-block { background: var(--grey);}.float-label-field { border: none; outline: none; position: relative; box-sizing: border-box;}.float-label-field input,.float-label-field textarea { border: none; outline: none; width: 100%; border-bottom: solid 1px #efefef;}.float-label-field label { opacity: 0.5; position: absolute; top: 5px; left: 5px; transition: all 0.2s ease;}.float-label-field.focus label { color: orange;}.float-label-field.focus input, .float-label-field.focus textarea { border-bottom: solid 1px orange;}.float-label-field.float label { opacity: 1; top: -8px; font-size: 60%; transition: all 0.2s ease; font-weight: bold;}.success { color:green; margin-bottom: 1rem;}.error { color:red;}.wp-block-navigation .current-menu-item a { text-decoration: underline !important;}#map { height:100%}.placeholder-block { background: var(--grey);}.banner { display: flex; justify-content: center; padding: var(--standard-gap); margin-top: 200px;}.banner #home-banner { width: 95%; overflow: hidden;}.call-to-action-home { z-index: 99; display: flex; gap: 20px; padding: var(--sub-section-padding);}.call-to-action-home div { background: var(--lightgrey); border-radius: 1rem; width: 24%; position: relative; padding: var(--card-padding); height: 300px;}.call-to-action-home div button { display: block; width: 70%; margin: 0 auto; background: var(--orange); border: 1px solid var(--orange); color:var(--white); position: absolute; left: 15%; bottom: 10px; border-radius: 5px; cursor: pointer;}.call-to-action-home header { justify-content: normal;}.call-to-action-home header .ethos { width: 300px;}.solar-benefits-wrapper { display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; background: #f9f9f9;}.scsolar-ethos-wrapper { padding: 0 0 var(--sub-section-padding) 0;}.solar-box { flex: 1 1 45%; background: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-width: 280px; padding: var(--sub-section-padding);}.solar-box h2 { color: #333;}.solar-box .sub { font-weight: bold; color: #666;}.solar-box .cta { font-weight: bold; color: #006400;}@media (max-width: 767px) { .solar-benefits-wrapper { flex-direction: column; } .solar-box { width: 100%; }}.solar-benefits-wrapper {}nav button { visibility: hidden;}header { width: 100%; display: flex; justify-content: space-between; align-items: center; position: fixed; background: white; margin-top: var(--usp-height); z-index: 100; height: 120px;}header nav ul { display: flex; gap: var(--standard-gap);}header nav li { list-style: none;}header nav li.menu-item { list-style: none;}header nav a { color: var(--grey); text-decoration: none; font-weight: 400;}header nav .current-menu-item a,header nav a:hover { text-decoration: underline;}header h1 { flex: 1; /* same width logic as menu */ display: flex;}header nav { flex: 2; /* menu gets more space */ display: flex; align-items: center;}header .cta { margin-left: var(--standard-gap);}header .cta a { background: var(--orange); padding: var(--cta-padding); color: var(--white); display: block; width: 180px;}header nav a { white-space: nowrap;}header h1 { margin: 0;}@media (max-width: 1200px) { nav { position: relative; } nav button.open, nav button.close { background: none; border: none; cursor: pointer; } nav button { position: absolute; right: 10px; width: 40px; min-width: unset; } nav button.open { visibility: visible; width: 30px; color: white; } nav { visibility: hidden; width: max-content; } nav.active button.open { visibility: hidden; top: 50px; } nav.active button.close { visibility: visible; width: 30px; right: 30px; } nav.active { visibility: visible; right: 0; top: 30px; } nav.active a { width: 100%; float: right; } nav.active { flex-direction: column; gap: 15px !important; width: 50%; background: var(--white); border-radius: 5px; position: absolute; z-index: 99; right: 0; padding: 2rem; } .call-us { visibility: hidden; } nav { margin-top: 0 !important; }}@media (max-width: 600px) { .container { grid-template-columns: 1fr; } .col-1, .col-4, .yellow-start { visibility: hidden; } .southern-solar-intro { grid-template-columns: 1fr; gap: 1rem; } header { justify-content: normal; } header .ethos { width: 170px; margin: 2rem; } header .ethos, .ethos strong { font-size: medium; } nav { width: 100px; } header nav.active { width: 60%; } header nav.active ul { flex-direction: column; }}.southern-solar-about-story { background: var(--lightgrey); position: relative; display: flex; gap: 1rem; padding: var(--section-padding); .ethos { color: var(--orange); letter-spacing: 0; } .illustration { } h4 { font-size: 1.6rem; }}.southern-solar-about-battery { background: var(--darkgrey); gap: 1rem; position: relative; display: flex; ul li, h4, p { color:var(--white); }}@media (max-width: 1200px) { .southern-solar-about-story, .southern-solar-about-battery { flex-direction: column; margin: 0; }}.southern-solar-about-story { animation-name: main-appear; animation-duration: 1s; animation-timing-function: linear;}@keyframes main-appear { 0% { visibility:hidden;transform: translateX(50px);} 100% { transform: translateX(0px); }}.content h4, .values .working-method { /* animation properties */ animation-name: vision-method; animation-duration: 1s; animation-timing-function: linear;}@keyframes vision-method { 0% { transform: scale(0.90);} 100% { transform: scale(1); }}.info-block { display: flex; align-items: center; justify-content: space-between; gap: 2rem; border: 2px solid #e2e8f0; /* light grey */ border-radius: 12px; background: #f9fafb; /* subtle contrast */}.info-content { flex: 1 1 55%;}.info-content h4 { font-size: var(--h4-size);}.info-illustration { flex: 1 1 45%; text-align: center;}.info-illustration img,.info-illustration svg { max-width: 100%; height: auto;}@media (max-width: 768px) { .info-block { flex-direction: column; }}.usp { position: fixed; width: 100%; justify-content: space-between; background: var(--blue); color: var(--white); z-index: 100; display: block; padding: 0;}.site-footer { padding: var(--section-padding);}.site-footer,.el--101,.el--102 { background: var(--blue);}.site-footer .southern-solar-intro,.site-footer .southern-solar-intro .main-hub,.site-footer .southern-solar-intro .solar-service,.site-footer .southern-solar-intro div a { color: var(--white);}.site-footer p,.site-footer h4,.site-footer .fa { color: var(--white);}.site-footer .southern-solar-intro { background: var(--blue); color: white; width: 70%; margin: 0 auto;}.site-footer .southern-solar-intro .solar-organisation { margin-top: 15px;}.site-footer .southern-solar-intro p { margin-bottom: 0;}.site-footer .solar-organisation p { font-size: var(--h4-size);}.site-footer .southern-solar-intro h4 { color: var(--white); margin-bottom: 5px;}.certification-declaration { background: var(--darkorange); background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 50%, var(--yellow) 72%, rgba(255,255,255,1) 95%);}.certification-declaration p { padding: 0;}.certification-declaration .content { position: relative; width: 70%; margin: 0 auto;}.certification-declaration h3 { font-size: var(--h3-size);}.certification-declaration h3,.certification-declaration p { color: white;}.site-footer, .el--101, .el--102 { background: var(--blue);}.site-footer p, .site-footer h4, .site-footer .fa { color: var(--white);}.contact-form { padding: var(--section-padding); max-width: 1200px; margin: 0 auto;}