/*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;}p { padding: 1rem 0;}.content ul { padding: 0 20px 20px 20px;}.content ul li { margin-bottom: 0.6rem;}body { font-size: 1rem; font-family: 'Inter', sans-serif; letter-spacing: 0;}.inter-700 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}.inter-400 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}.inter-500 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}.container { display: grid; grid-template-columns: 1fr 6fr 1fr; position: relative;}.container .el--4 { grid-column: 1 / 4; grid-row: 2;}.container .el--5 { grid-column: 2 / 3; grid-row: 3;}.container .el--9 { grid-column: 1 / 4; grid-row: 6;}.container .el--10 { grid-column: 1 / 4; grid-row: 7;}h4 { margin-bottom: 20px;}.banner { grid-column: 5 / 8; position: relative;}.container .el--8 { grid-column: 2 / 3; grid-row: 5; position: relative;}header .call-us, header .call-us a { color: var(--orange); font-size: 1.6rem;}header .call-us a:hover { color: var(--redlight);}header .call-us { position: absolute; right: 0; top: 40px; font-size: 1.1rem; z-index: 99;}.key-area, .ethos, .call-us { /*border-radius: 5px;*/ /*background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 70%, var(--yellow) 95%);*/ /*padding: 5px 10px;*/ font-weight: bolder;}.key-area, .key-area strong, .key-area a { /*color: #ffffff !important;*/ font-weight: bolder;}header .header_menu { flex: 1;}header nav ul { display: flex; gap: 50px; margin: 60px 0 0;} header nav li { list-style: none; font-size: 1.2rem; }header nav a { color: var(--grey); text-decoration: none; font-weight: 400;}header nav .current-menu-item a,header nav a:hover { color: var(--orange); text-decoration: underline;}.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 { padding: 10px 5px; display: flex; gap: 10px; img { border-radius: 5px; width: 32%; } } @media (max-width: 1350px) { .organisation-trademark h2 { font-size: 1.3rem; } } @media (max-width: 600px) { .organisation-trademark { flex-direction: column; img { width: 100%; } } .container .el--8 { grid-column: 2; } } .southern-solar-about { background: var(--white); padding: 20px; display: flex; gap: 1rem; .illustration { min-width: 300px; } } .southern-solar-about h4 { font-size: 1.3rem; } .southern-solar-about .ethos { color: var(--orange); font-size: 1.1rem; } .southern-solar-about p, .southern-solar-about h4 { color: var(--grey); line-height: 1.5; } .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%; padding: 40px 20px; } .southern-solar-intro p { padding: 0; } .southern-solar-intro p .fa { padding-right: 5px; } .southern-solar-intro .solar-organisation { width: 317px; } .southern-solar-intro .main-hub { color: var(--blue); font-size: 1rem; font-weight: bolder; } .southern-solar-intro .solar-service { color: var(--blue); font-size: 1.6rem; 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 p { font-size: 1.1rem; line-height: 1.3; } .southern-solar-intro div h4 { font-size: 1.1rem; line-height: 1.4; color: var(--orange) } .southern-solar-intro div h3 { font-size: 1rem; 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; padding: 60px 0 20px; } .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; padding: 20px; } .contact-home form { background-color: rgba(0, 0, 0, 0.5); border-radius: 25px; height: 600px; padding: 20px; } .contact-home form h3 { font-size: 1.6rem; line-height: 1.2; } .contact-home form p { font-size: 1rem; } .contact-home label { font-size: 1rem; 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; margin: 9px; padding: 5px; } .contact-home form .float-label-field label { padding: 0 10px; color: var(--white); } .certification-declaration { /*background-image: url("./eletric-certifcation-banner.jpg");*/ background: var(--darkorange); /*background: linear-gradient(90deg, var(--darkorange) 0%, var(--darkorange) 50%, rgba(236,192,186,1) 72%, rgba(255,255,255,1) 95%);*/ 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; padding: 40px 30px; } .certification-declaration h3, .certification-declaration p { color: white; margin: 1rem 0; } .certification-declaration p { font-size: 1rem; } .site-footer, .el--101, .el--102 { background: var(--blue); } .site-footer { .southern-solar-intro, .southern-solar-intro .main-hub, .southern-solar-intro .solar-service, .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; h4 { color: var(--white); } } } @media (max-width: 1600px) { header nav ul { gap: 20px; } header nav li { font-size: 1rem; } } @media (max-width: 1200px) { header nav li { font-size: 1rem; } .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; margin: 0 0 20px 0; padding: 0; box-sizing: border-box;}.float-label-field input,.float-label-field textarea { border: none; outline: none; padding: 5px 5px 8px 5px; width: 100%; font-size: 18px; border-bottom: solid 1px #efefef;}.float-label-field label { opacity: 0.5; position: absolute; top: 5px; left: 5px; transition: all 0.2s ease; font-size: 18px;}.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-code { color: #f8f8f2; background: none; text-shadow: 0 1px rgba(0,0,0,0.3); font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none;}td code { padding: 7px 4px 7px 2px;}.wp-block-navigation .current-menu-item a { text-decoration: underline !important;}#map { height:100%}.placeholder-block { padding: 20px; font-size: 1.4rem; background: var(--grey);}.float-label-field { border: none; outline: none; position: relative; margin: 0 0 20px 0; padding: 0; box-sizing: border-box;}.float-label-field input,.float-label-field textarea { border: none; outline: none; padding: 5px 5px 8px 5px; width: 100%; font-size: 18px; border-bottom: solid 1px #efefef;}.float-label-field label { opacity: 0.5; position: absolute; top: 5px; left: 5px; transition: all 0.2s ease; font-size: 18px;}.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-code { color: #f8f8f2; background: none; text-shadow: 0 1px rgba(0,0,0,0.3); font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none;}td code { padding: 7px 4px 7px 2px;}.wp-block-navigation .current-menu-item a { text-decoration: underline !important;}#map { height:100%}.placeholder-block { padding: 20px; font-size: 1.4rem; background: var(--grey);}.call-to-action-home { z-index: 99; display: flex; gap: 20px; margin: 20px 0 20px 0; font-size: 1.1rem; line-height: 1.6;}.call-to-action-home div { background: var(--lightgrey); border-radius: 1rem; padding: 15px; width: 24%; position: relative;}.call-to-action-home div h3 { font-size: 1.6rem;}.call-to-action-home div p { margin-bottom: 50px;}.call-to-action-home div button { display: block; width: 70%; padding: 10px; margin: 0 auto; background: var(--orange); border: 1px solid var(--orange); color:var(--white); font-size:1.3rem; 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; margin: 2rem;}.call-to-action-home header .ethos, .call-to-action-home header .ethos strong { font-size: xx-large;}.solar-benefits-wrapper { display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; padding: 2rem 1rem; background: #f9f9f9; font-family: sans-serif; line-height: 1.6;}.solar-box { flex: 1 1 45%; background: white; padding: 1.5rem; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-width: 280px;}.solar-box h2 { margin-top: 0; font-size: 1.4rem; color: #333;}.solar-box .sub { font-weight: bold; color: #666; margin-bottom: 1rem;}.solar-box .cta { margin-top: 1rem; font-weight: bold; color: #006400;}@media (max-width: 767px) { .solar-benefits-wrapper { padding: 0; flex-direction: column; } .solar-box { width: 100%; }}nav { position: relative;}nav button { visibility: hidden;}header { display: flex; align-items: center; font-size: 1rem; justify-content: space-between; position: relative; padding: 0;}header h1 { margin: 0;}header .ethos { width: 450px; margin-top: 30px;}header .ethos, .ethos strong { color: var(--darkyellow); font-size: 2.7rem; font-family: 'Trebuchet MS', Serif, serif; font-weight: 400;}@media (max-width: 1200px) { nav button { position: absolute; right: 10px; top: 10px; } nav button.open { visibility: visible; width: 30px; color: white; } nav { visibility: hidden; width: max-content; } nav.active button.open { visibility: hidden; } nav.active button.close { visibility: visible; width: 30px; } nav.active { position: absolute; 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(--yellow2); border-radius: 5px; position: absolute; z-index: 99; padding: 20px; right: 0; border: 1px solid var(--orange); } .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 button { width: 25px; } header nav.active { width: 60%; } header nav.active ul { flex-direction: column; }}.southern-solar-about-story { background: var(--lightgrey); position: relative; display: flex; padding: 20px; margin: 10px 0; gap: 1rem; line-height: 1.5; .content { line-height: 1.5; } .ethos { color: var(--orange); font-size: 1.1rem; letter-spacing: 0; line-height: 1.2; } .illustration { } h4 { font-size: 1.6rem; line-height: 1.1 } p { line-height: 1.4rem; }}.southern-solar-about-battery { margin: 10px 0 20px; background: var(--darkgrey); gap: 1rem; position: relative; display: flex; padding: 20px; ul li, h4, p { color:var(--white); } ul li { line-height: 1.8rem; } .content { padding: 0 20px; } .illustration { } h4 { font-size: 1.6rem; padding: 10px 0; line-height: 1.1; } p { line-height: 1.3rem; }}@media (max-width: 1200px) { .southern-solar-about-story, .southern-solar-about-battery { flex-direction: column; margin: 0; }}.values { main { background: linear-gradient(90deg, #ffffff 0%, var(--yellow) 30%, var(--lightorange) 50%, var(--yellow) 70%, #ffffff 95%); height: 100vh; text-align: center; .working-method { color: var(--black); font-size: 1.4rem; line-height: 2; font-weight: normal; padding: 10rem 20rem 3rem; } .business-mantra { color: var(--black); font-size: 1.6rem; line-height: 1.4; font-weight: normal; padding: 2rem 10rem; } }}.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); }}