Recommended menu items
- Home
- About Us
- Who We Are
- Customer Resources
- Water Quality Report
- Non-Discrimination Policy
- Board of Directors / Staff
- Public Notices
- Projects & Initiatives
- SWSA Project Info
- RFP / RFQ's
- Community
- Community Information
- Violations
- Pension Board of Trustees
- Board Meetings
- Resources
- Downloads
- FAQs
- How Do I?
- Pay My Bill
- Apply for a Job
- Access Customer Support
- Contact Us
- Payments
// Font import at root
@at-root {
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
}
& {
font-family: 'Outfit', sans-serif;
}
// Carousel caption gradient
.carousel-instance .homepage-carousel-caption {
min-height: 180px !important;
background: rgba(0,0,0, 0.7);
background: linear-gradient(0deg, rgba(0,0,0,0.8) 56%, rgba(0,0,0,0) 100%);
}
//contact us button
#page-header > div > nav > div > ul > li:nth-child(1) {
background-color: #000000;
border-radius: 9px;
}
//then make text white
#page-header .header-links ul li a {
color: #FFF !important;
padding: 0 15px;
font-weight: 500;
}
//make contact us button align with searchbars
#page-header .header-links .container {
width: auto;
margin: 0;
padding: 0;
padding-right: 10px;
}
// Header styling
#page-header {
padding-bottom: 5px !important;
background-size: cover;
background-color: #fff !important;
}
.header-links ul li a {
color: #000 !important;
}
// Navigation styling
#page-navigation {
background: rgb(32,4,196);
background: linear-gradient(90deg, rgba(32,4,196,1) 0%, rgba(0,0,0,1) 100%);
// background: rgb(9,0,54);
// background: linear-gradient(0deg, rgba(9,0,54,1) 0%, rgba(27,6,143,1) 6%, rgba(35,0,223,1) 94%, rgba(255,255,255,1) 99%);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.21);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.21);
}
.navbar-nav li a {
color: white !important;
}
// Box Shadow - homepage elements
.homepage-layout .poc-instances-main-content .poc-instance .inner,
.board-meetings .poc-instance .inner,
.poc-instances-side-content .poc-instance .inner {
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.21);
-moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.21);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.21);
}
//quicklinks
// .homepage-quicklinks {
// padding: 0 0 15px 0;
// // background: #2589c5 !important;
// background: rgb(32,4,196);
// background: linear-gradient(90deg, rgba(32,4,196,1) 0%, rgba(0,0,0,1) 100%);
// // background: rgb(9,0,54);
// // background: linear-gradient(0deg, rgba(9,0,54,1) 0%, rgba(27,6,143,1) 6%, rgba(35,0,223,1) 94%, rgba(255,255,255,1) 99%);
// // background: rgb(154,40,37);
// // background: linear-gradient(90deg, rgba(154,40,37,1) 0%, rgba(196,50,46,1) 50%, rgba(228,58,53,1) 100%);
// }
// .homepage-quicklinks .quicklink-instance a:hover .icon{
// background: none !important;
// transform: scale(1.3);
// }
// .homepage-quicklinks .quicklink-instance a:hover h3 {
// color: #fff !important;
// }
// .homepage-quicklinks.horizontal .quicklink-instances{
// padding: 10px 0 20px 0 !important;
// }
// //get rid of bubbles
// .homepage-quicklinks .quicklink-instance .icon{
// width: 40px;
// height: 40px;
// overflow: visible !important;
// border-radius: 0;
// background: none !important;
// transition: transform .2s; /* Animation */
// margin-bottom: 20px !important;
// }
// .homepage-quicklinks .quicklink-instance .icon img {
// width: 40px;
// height: 40px;
// margin: 20px auto;
// }
// //make h3 white
// .homepage-quicklinks .quicklink-instance h3 {
// color: #fff !important;
// }
.homepage-layout-5 .homepage-quicklinks .quicklink-instance h3 {
color: #1f02ba;
}
.homepage-layout-5 .homepage-quicklinks .quicklink-instance .icon {
background-color: #1f02ba;
}
//end of quicklinks
// Homepage teasers
//teaser rounding for homepage start
/* Rounding for homepage teaser cards */
.homepage-layout .poc-instances-main-content .poc-instance .inner {
border-radius: 15px !important;
}
/* Rounding for top corners of homepage teaser images */
.homepage-layout .poc-instances-main-content .poc-instance .inner .image img {
border-top-left-radius: 15px !important;
border-top-right-radius: 15px !important;
}
/* Rounding for Facebook Embed */
.homepage-layout .poc-instances-main-content .poc-instance .inner iframe[title="instagram"] {
border-radius: 15px !important;
overflow: hidden !important;
}
//teaser hover colors
//teaser text color on hover
.homepage-layout .poc-instance .inner:hover p.teaser,
.homepage-layout .poc-instance .inner:hover h3 {
color: #fff;
}
//font color on hover
.homepage-layout .poc-instance .inner:hover p.teaser {
color: #EAE0D5;
}
//title and call to action on hover
.homepage-layout .poc-instance .inner:hover .call-to-action, .homepage-layout .poc-instance .inner:hover h3 {
color: #fff;
}
//background standard no hover
.homepage-layout .poc-instances-main-content .poc-instance .inner {
background: #D6E0EA;
}
//background on hover
.homepage-layout .poc-instances-main-content .poc-instance .inner:hover {
background: #2004C4;//#C0302E;
}
.poc-layout .poc-instances-main-content .poc-instance {
padding-bottom: 25px;
}
// Lower teasers
.homepage-layout .poc-instances-main-content {
padding: 30px 0;
}
.poc-instances-side-content .poc-instance .inner {
background: #f0f0f0 !important;
}
// CTA styling
.poc-instance .call-to-action {
//color: #30971a;
}
// Meeting color adjustments
.board-meetings .poc-instance .inner {
background: #f0f0f0 !important;
}
// Board meetings section
.board-meetings {
padding: 10px 0 50px 0;
}
//round board meetings
.board-meetings .poc-instance .inner {
background: #f0f0f0 !important;
border-radius: 15px;
}
.date-tile {
// width: 100px;
// height: 100px;
// background: #be312d;
transition: background-color 0.3s ease;
color: #fff;
text-align: center;
position: relative;
border-radius: 15px;
}
// Mobile adjustments
@media (max-width: 480px) {
p.social-header-streamline {
margin-top: 15px;
text-align: center;
}
}
// Image gallery improvements
.traction-image-gallery {
background-color: transparent;
padding: 10px;
}
.traction-image-gallery-nav {
background-color: #502215;
padding: 9px;
border-radius: 5px;
padding-right: 38px;
padding-left: 38px;
margin-bottom: 20px;
}
.slick-prev:before, .slick-next:before {
color: #FFF;
opacity: 1.0;
transition: opacity .9s;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
color: #FFF;
}
//on hover board meeting color contrast fix
.upcoming-meetings .poc-instance:hover h3,
.board-meetings .poc-instance:hover h3 {
color: #1B1970 !important;
}
.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=7003e3df4cdb977bed7c244441cad685)
