Skip to main content

Recommended menu items

  1. Home
  2. About Us
    • Who We Are
    • Customer Resources
    • Water Quality Report
    • Non-Discrimination Policy
    • Board of Directors / Staff
  3. Public Notices
  4. Projects & Initiatives
    • SWSA Project Info
    • RFP / RFQ's
  5. Community
    • Community Information
    • Violations
    • Pension Board of Trustees
  6. Board Meetings
  7. Resources
    • Downloads
    • FAQs
  8. How Do I?
    • Pay My Bill
    • Apply for a Job
    • Access Customer Support
  9. Contact Us
  10. Payments
Layout 5 styles 

// 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;
}
 

Screenshot of Okeechobee Utility Authority website with sections on privacy policy, transparency, special districts, and upcoming board meetings.
A screenshot of the Okeechobee Utility Authority website with navigation, info sections, and facility images.