options

A screenshot of the Clackamas River Water website with navigation tabs, scenic banner, mission statement, and utility information.

Styles 1

//Updating font to outfit
@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;
}
#page-header {
padding-bottom: 5px !important;
background-size: cover;
background-color: #fff !important;
height: 170px;
}
.homepage-layout .poc-instances-main-content{
background: url('https://streamline.imgix.net/bae7b8a1-91d5-4f1a-95d9-13621ed43a9d/84944dd0-bb33-4b39-85fc-aa3b4d7e4890/3.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=477afe913a75bb43f4f5a92ee07f0fec');
background-size: cover;
padding: 5%;
background-color: #fff !important;
//background-opacity: 0.8;
}
#page-header {
padding-bottom: 20px;
background: url('https://streamline.imgix.net/bae7b8a1-91d5-4f1a-95d9-13621ed43a9d/fbc1c2ec-022e-4810-b90d-2e0192431b9a/water%20info%20banners%20(2000%20x%20180%20px)%20(1).png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=64ee243ebc09658a9dd0764cc4750386');
background-size: cover;
background-color: #fff !important;
background-position: 20% 90%;
padding-top: 5px;
//opacity: 0.8;
}
//add secondary nav background
#page-header > div > nav > div > ul {
background-color: #000000;
border-radius: 20px;
// margin-left: 5px;
font-weight: 500;
margin-bottom: 10px;
margin-right: 10px;
color: #fff;
}
#page-header .header-links ul li a {
color: #FFF !important;
font-weight: 500;
}
#page-header .header-links ul li a:hover, .header-links ul li a:focus {
color: #DCDDDE;
}
// #page-header {
// padding-bottom: 5px !important;
// background: url('https://streamline.imgix.net/bae7b8a1-91d5-4f1a-95d9-13621ed43a9d/4100d139-34f7-4a3a-8dd0-4153ab688f32/water%20info%20banners.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=6bfe8f801cd4d618a3a1f39844214504');
// background-size: cover;
// background-color: #fff !important;
// }
//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%) ;
}

#page-header {
padding-bottom: 5px !important;
background-size: cover;
background-color: #fff !important;
}

#page-navigation{
background: rgb(6,44,108);
background: linear-gradient(0deg, rgba(6,44,108,1) 0%, rgba(25,71,151,1) 100%);
// background: rgb(2,16,38);
// background: linear-gradient(0deg, rgba(2,16,38,1) 0%, rgba(6,44,108,1) 13%, rgba(25,71,151,1) 100%);
// background: rgb(34,57,112);
// background: linear-gradient(90deg, rgba(34,57,112,1) 0%, rgba(118,144,197,1) 50%, rgba(34,57,112,1) 100%);
// -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);
}

.header-links ul li a {
color: #000 !important;
}

.navbar-nav li a {
color: white !important;
font-size: large;
font-weight: 550;
}

// .homepage-quicklinks.horizontal .quicklink-instances {
// padding: 30px 0px;

// }

// Box Shadow - homepage teasers

.homepage-layout .poc-instances-main-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);
}

// Box Shadow - homepage meetings

.board-meetings .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);
}

.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);
}

.poc-layout .poc-instances-main-content .poc-instance {
padding-bottom: 25px;
}

// /* Hover Effects for Quicklinks */
// .homepage-layout-5 .homepage-quicklinks .quicklink-instance:hover .icon {
// background-color: #1A4780 !important;
// }

// .homepage-layout-5 .homepage-quicklinks .quicklink-instance:hover h3,
// .homepage-layout-5 .homepage-quicklinks .quicklink-instance:hover h3 span {
// color: #16447E !important;
// transform: scale(1.1);
// transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
// }

// /* Quicklinks Container */
// .homepage-quicklinks {
// padding: 0 0 15px 0;
// /* Uncomment one of the backgrounds below as needed */
// /* background: linear-gradient(0deg, rgba(6,44,108,1) 0%, rgba(25,71,151,1) 100%); */
// /* background: linear-gradient(90deg, rgba(34,57,112,1) 0%, rgba(118,144,197,1) 50%, rgba(34,57,112,1) 100%); */
// }

// /* Quicklink Icon Hover */
// .homepage-quicklinks .quicklink-instance a:hover .icon {
// background: none !important;
// transform: scale(1.3);
// }

// /* Quicklink Instances (Horizontal Layout) */
// .homepage-quicklinks.horizontal .quicklink-instances {
// padding: 10px 0 20px 0 !important;
// }

// /* Quicklink Icon Styling */
// .homepage-quicklinks .quicklink-instance .icon {
// width: 40px;
// height: 40px;
// overflow: visible !important;
// border-radius: 0;
// background: none !important;
// transition: transform 0.2s;
// margin-bottom: 20px !important;
// }

// /* Icon Image Styling */
// .homepage-quicklinks .quicklink-instance .icon img {
// width: 40px;
// height: 40px;
// margin: 20px auto;
// }

// // //poc instances bg adjustments

// meeting color adjustments

.board-meetings .poc-instance .inner { background: #f0f0f0 !important;}

//lower teasers

.homepage-layout .poc-instances-main-content {
padding: 30px 0;
}

.poc-instances-side-content .poc-instance .inner{
background: #f0f0f0 !important;}

//board meetings
.board-meetings {
padding: 10px 0 50px 0;
}

//CTA

.poc-instance .call-to-action {
//color: #30971a;
}

// mobile adjustments
@media (max-width: 480px) {

p.social-header-streamline {
margin-top: 15px;
text-align: center;
}
}
/* Rounding for homepage teaser cards */
.homepage-layout .poc-instances-main-content .poc-instance .inner {
border-radius: 15px !important; /* removed semicolon after !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; /* removed semicolon after !important */
border-top-right-radius: 15px !important; /* removed semicolon after !important */
}
.homepage-layout .poc-instance .inner:hover p.teaser{
color: #fff;
}

.homepage-layout .poc-instance .inner:hover h3{
color: #fff;
}

.homepage-layout .poc-instance .inner:hover .call-to-action {
color: #292E74;//#2296F5;
}

.homepage-layout .poc-instances-main-content .poc-instance .inner:hover{
background: #43569F;//#2296F5;//#292E74;
}
@media screen and (min-width: 480px) {
#app #page-header .header-logo img {
width: auto;
height: 95px;
padding-top: 10px;
padding-left: 30px;
}
}
//on hover board meeting color contrast fix
.upcoming-meetings .poc-instance:hover h3,
.board-meetings .poc-instance:hover h3 {
color: #1B1970 !important;
}
//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;
}

Website Accessibility Statement