Skip to main content

Nuke it with yellow

A screenshot of the City of Alameda Health Care District website with navigation options and information sections.
OG 


//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;
 }
 //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%) ;}
 //custom carousel gradient
// //eliminate carousel caption gradient
// .carousel-instance .homepage-carousel-caption {
// min-height: 180px !important;
// background: transparent;
// }
//now add waves
// #carousel-items > div > div > div.homepage-carousel-image {
//     position: relative; /* Ensure that the container for the image is relative to position the overlay properly */
//     z-index: 0; /* Layer below the overlay */
// }

// #carousel-items > div > div > div.homepage-carousel-image img {
//     width: 100%; /* Ensures the image fills the container */
//     height: auto; /* Maintain aspect ratio */
//     display: block;
// }

// /* Add overlay on the image */
// #carousel-items > div > div > div.homepage-carousel-image:after {
//     content: "";
//     background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
//     background-size: cover;
//     background-position: 40% 20%;
//     position: absolute;
//     top: 0;
//     left: 0;
//     right: 0;
//     bottom: 0;
//     opacity: 0.4; /* Adjust for transparency */
//     pointer-events: none; /* Overlay doesn't block clicks */
//     z-index: 2; /* Ensure overlay is above the image */
// }
// //end of waves custom carousel gradient
#page-header {
  padding-bottom: 5px !important;
  background-size: cover;
  background-color: #fff !important;
}

#page-navigation{ 
background: rgb(7,29,66);
background: linear-gradient(90deg, rgba(7,29,66,1) 0%, rgba(13,49,108,1) 15%, rgba(10,85,140,1) 58%, rgba(8,116,168,1) 94%);
// background: rgb(226,228,226);
// background: linear-gradient(0deg, rgba(226,228,226,1) 0%, rgba(163,167,169,1) 1%, rgba(43,71,105,1) 5%, rgba(43,71,105,1) 27%, rgba(43,71,105,1) 95%, rgba(163,167,169,1) 98%, rgba(226,228,226,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;
}
.homepage-layout .poc-instances-main-content {
    padding: 30px 0;
    background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
    background-position: 40% 70%;
    // background-opacity: 0.6;
}
.navbar-nav li a{
  color: white !important;  
}

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


// Messing with quicklinks (Gradients created with https://cssgradient.io/)

.homepage-quicklinks { 
    padding: 0 0 15px 0;
  //  background: #2589c5 !important;
background: rgb(7,29,66);
background: linear-gradient(90deg, rgba(7,29,66,1) 0%, rgba(13,49,108,1) 15%, rgba(10,85,140,1) 58%, rgba(8,116,168,1) 94%);
}

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

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

.homepage-quicklinks .quicklink-instance h3 {
    color: #fff !important;
}

//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;
}
//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;
}
//teaser hover colors
.homepage-layout .poc-instance .inner:hover p.teaser,
.homepage-layout .poc-instance .inner:hover h3 {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover p.teaser {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover .call-to-action, .homepage-layout .poc-instance .inner:hover h3 {
    color: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner {
    background: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner:hover {
    background: #2B476A;
}
//end of teaser hover colors
// Messing with quicklinks (Gradients created with https://cssgradient.io/)


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

p.social-header-streamline {
margin-top: 15px;
text-align: center;
}
}
 

This is a screenshot of a healthcare district's website with navigation, community section, and an image of a hospital facade.
Terrible and broken but rounded quicklinks 


//Updating font to outfit
@at-root {

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

}
& {
  font-family: "Mulish", 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%) ;}
 custom carousel gradient
//eliminate carousel caption gradient
.carousel-instance .homepage-carousel-caption {
min-height: 180px !important;
background: transparent;
}
now add waves
#carousel-items > div > div > div.homepage-carousel-image {
    position: relative; /* Ensure that the container for the image is relative to position the overlay properly */
    z-index: 0; /* Layer below the overlay */
}

#carousel-items > div > div > div.homepage-carousel-image img {
    width: 100%; /* Ensures the image fills the container */
    height: auto; /* Maintain aspect ratio */
    display: block;
}

/* Add overlay on the image */
#carousel-items > div > div > div.homepage-carousel-image:after {
    content: "";
    background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
    background-size: cover;
    background-position: 40% 20%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4; /* Adjust for transparency */
    pointer-events: none; /* Overlay doesn't block clicks */
    z-index: 2; /* Ensure overlay is above the image */
}
//end of waves custom carousel gradient
#page-header {
  padding-bottom: 5px !important;
  background-size: cover;
  background-color: #fff !important;
}
.secondary-navigation > li:last-child {
  color: black !important;
  background-color: #24CBA1;
  border-radius: 5px;
}

#page-header > div > nav > div > ul > li:nth-child(2) {
  background-color: #36BCEE;
  color: black !important;
  border-radius: 5px;
  margin-right: 5px;
}
#page-header > div > nav > div > ul > li:nth-child(1) {
  background-color: #FCBF2B;
  color: #33476A !important;
  border-radius: 5px;
  margin-right: 4px;
}
// #page-header > div > nav > div > ul > li:nth-child(1) {
//   background-color: #FCBF2B;
//   border-radius: 9px;
// }
//then make text not black
#page-header .header-links ul li a {
   // color: #33476A !important;
    padding: 0 15px;
    font-weight: 500;
}
#page-navigation{ 
background: rgb(7,29,66);
background: linear-gradient(90deg, rgba(7,29,66,1) 0%, rgba(13,49,108,1) 15%, rgba(10,85,140,1) 58%, rgba(8,116,168,1) 94%);
// background: rgb(226,228,226);
// background: linear-gradient(0deg, rgba(226,228,226,1) 0%, rgba(163,167,169,1) 1%, rgba(43,71,105,1) 5%, rgba(43,71,105,1) 27%, rgba(43,71,105,1) 95%, rgba(163,167,169,1) 98%, rgba(226,228,226,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;
}
.homepage-layout .poc-instances-main-content {
    padding: 30px 0;
    background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
    background-position: 40% 70%;
    // background-opacity: 0.6;
}
.navbar-nav li a{
  color: white !important;  
}

.homepage-quicklinks.horizontal .quicklink-instances {
  padding: 30px 0px;
  
}
.homepage-quicklinks{
  background: #0073ad;
}
//round quicklinks below
// .homepage-quicklinks .quicklink-instance a:hover h3{
//   color: #0b3247;
// }
// // New quicklink color
// .homepage-quicklinks .quicklink-instance .icon {
// background: #2D6322 !important;
// }

// //New quicklink hover state
// .homepage-quicklinks .quicklink-instance a:hover .icon{
// background: #063970  !important;

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


// Messing with quicklinks (Gradients created with https://cssgradient.io/)

// .homepage-quicklinks { 
//     padding: 0 0 15px 0;
//   background: #36BCEE !important;
// // background: rgb(7,29,66);
// background: linear-gradient(90deg, rgba(7,29,66,1) 0%, rgba(13,49,108,1) 15%, rgba(10,85,140,1) 58%, rgba(8,116,168,1) 94%);
//}

// .homepage-quicklinks .quicklink-instance a:hover .icon{
//     background: none !important;
//     transform: scale(1.3);
//     color: #000;
// }

// .homepage-quicklinks .quicklink-instance a:hover h3 {
//     color: #fff !important;
// }

// .homepage-quicklinks.horizontal .quicklink-instances{
// padding: 10px 0 20px 0 !important;
// }

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

// .homepage-quicklinks .quicklink-instance h3 {
//     color: #fff !important;
// }

//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;
}
//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;
}
//teaser hover colors
.homepage-layout .poc-instance .inner:hover p.teaser,
.homepage-layout .poc-instance .inner:hover h3 {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover p.teaser {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover .call-to-action, .homepage-layout .poc-instance .inner:hover h3 {
    color: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner {
    background: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner:hover {
    background: #2B476A;
}
//end of teaser hover colors
// Messing with quicklinks (Gradients created with https://cssgradient.io/)


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

p.social-header-streamline {
margin-top: 15px;
text-align: center;
}
}
 

Starting over 

/* Updating font to Outfit */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

& {
  font-family: "Mulish", sans-serif;
}

/* Carousel Caption Gradient */
.carousel-instance .homepage-carousel-caption {
  min-height: 180px !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 56%, rgba(0,0,0,0) 100%);
}

/* Eliminate Carousel Caption Gradient */
.carousel-instance .homepage-carousel-caption {
  background: transparent;
}

/* Waves Overlay */
#carousel-items > div > div > div.homepage-carousel-image {
  position: relative;
  z-index: 0;
}

#carousel-items > div > div > div.homepage-carousel-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Add Overlay on the Image */
#carousel-items > div > div > div.homepage-carousel-image:after {
  content: "";
  background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
  background-size: cover;
  background-position: 40% 20%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}

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

/* Navigation Styles */
.secondary-navigation > li:last-child {
  color: black !important;
  background-color: #24CBA1;
  border-radius: 5px;
}

#page-header > div > nav > div > ul > li:nth-child(1) {
  background-color: #FCBF2B;
  color: #33476A !important;
  border-radius: 5px;
  margin-right: 4px;
}

#page-header > div > nav > div > ul > li:nth-child(2) {
  background-color: #36BCEE;
  color: black !important;
  border-radius: 5px;
  margin-right: 5px;
}

/* Header Links */
#page-header .header-links ul li a {
  padding: 0 15px;
  font-weight: 500;
}

/* Page Navigation */
#page-navigation {
  background: linear-gradient(90deg, rgba(7,29,66,1) 0%, rgba(13,49,108,1) 15%, rgba(10,85,140,1) 58%, rgba(8,116,168,1) 94%);
  box-shadow: 0px 5px 10px rgba(0,0,0,0.21);
}

/* Homepage Layout */
.homepage-layout .poc-instances-main-content {
  padding: 30px 0;
  background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
  background-position: 40% 70%;
}

.homepage-quicklinks {
  background: #0073ad;
}

/* Quicklinks Hover Effects */
.homepage-quicklinks .quicklink-instance a:hover h3 {
  color: #0b3247;
}

.homepage-quicklinks .quicklink-instance a:hover .icon {
  background: none !important;
  transform: scale(1.3);
  color: #000;
}

.homepage-quicklinks .quicklink-instance a:hover h3 {
  color: #fff !important;
}

/* Box Shadow Styles */
.homepage-layout .poc-instances-main-content .poc-instance .inner,
.board-meetings .poc-instance .inner,
.poc-instances-side-content .poc-instance .inner {
  box-shadow: 0px 5px 10px rgba(0,0,0,0.21);
}

/* Rounding for Teaser Cards */
.homepage-layout .poc-instances-main-content .poc-instance .inner {
  border-radius: 15px !important;
}

.homepage-layout .poc-instances-main-content .poc-instance .inner .image img {
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}

/* Teaser Hover Colors */
.homepage-layout .poc-instance .inner:hover p.teaser,
.homepage-layout .poc-instance .inner:hover h3,
.homepage-layout .poc-instance .inner:hover .call-to-action {
  color: #fff !important;
}

.homepage-layout .poc-instances-main-content .poc-instance .inner {
  background: #fff;
}

.homepage-layout .poc-instances-main-content .poc-instance .inner:hover {
  background: #2B476A;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  p.social-header-streamline {
    margin-top: 15px;
    text-align: center;
  }
}
 

A screenshot of the City of Alameda Health Care District website, showing navigation menus and information sections like "History" and "Board Meetings."
double waves yellow nav and footer (without the color behind secondary nav) 

//* Updating font to Mulish */
@at-root {
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
}
& {
  font-family: "Mulish", sans-serif;
}
#page-navigation {
  background: #FEBD3A
}
/* Waves Overlay */
// #carousel-items > div > div > div.homepage-carousel-image {
//   position: relative;
//   z-index: 0;
// }
/* Eliminate Carousel Caption Gradient */
.carousel-instance .homepage-carousel-caption {
  background: transparent;
}
#carousel-items > div > div > div.homepage-carousel-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Add Overlay on the Image */
#carousel-items > div > div > div.homepage-carousel-image:after {
  content: "";
    background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
 // background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
  background-size: cover;
  background-position: 40% 20%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.8;
  pointer-events: none;
  z-index: 2;
}
/* Homepage Layout */
.homepage-layout .poc-instances-main-content {
  padding: 30px 0;
  //background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
  background-position: 40% 10%;
  background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
}
//quicklinks
.homepage-quicklinks {
  background: #0D316C;
  padding: 10px 0;
}
.homepage-quicklinks .quicklink-instance .icon {
    background: transparent;
}
.homepage-quicklinks .quicklink-instance h3 {
  color: #fff !important;
}
// 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; 
}
.poc-instance .call-to-action {
//color: #30971a;
}
//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;
}
//teaser hover colors
.homepage-layout .poc-instance .inner:hover p.teaser,
.homepage-layout .poc-instance .inner:hover h3 {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover p.teaser {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover .call-to-action, .homepage-layout .poc-instance .inner:hover h3 {
    color: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner {
    background: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner:hover {
    background: #2B476A;
}
//end of teaser hover colors
#page-footer {
    font-size: 12px;
    line-height: 24px;
    text-transform: uppercase;
    padding: 25px 0 60px 0;
    color: #2C4769;
    background: #FEBD3A;
}
#page-footer a, #page-footer a:link, #page-footer a:visited, #page-footer a:hover, #page-footer a:focus {
    color: #2D496C;
}
#page-footer .footer-streamline .streamline {
    color: #2D496C;
}

A screenshot of the City of Alameda Health Care District website with navigation menus and sections for history, board members, and meetings.
Same as above but with secondary nav button colors 

//* Updating font to Mulish */
@at-root {
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
}
& {
  font-family: "Mulish", sans-serif;
}
#page-header > div > nav > div > ul > li:nth-child(1) {
  background-color: #FCBF2B;
  color: #33476A !important;
  border-radius: 5px;
  margin-right: 4px;
}

#page-header > div > nav > div > ul > li:nth-child(2) {
  background-color: #36BCEE;
  color: black !important;
  border-radius: 5px;
  margin-right: 5px;
}

/* Header Links */
#page-header .header-links ul li a {
  padding: 0 15px;
  font-weight: 500;
}


#page-navigation {
  background: #FEBD3A
}
/* Waves Overlay */
// #carousel-items > div > div > div.homepage-carousel-image {
//   position: relative;
//   z-index: 0;
// }
/* Eliminate Carousel Caption Gradient */
.carousel-instance .homepage-carousel-caption {
  background: transparent;
}
#carousel-items > div > div > div.homepage-carousel-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Add Overlay on the Image */
#carousel-items > div > div > div.homepage-carousel-image:after {
  content: "";
    background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
 // background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
  background-size: cover;
  background-position: 40% 20%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.8;
  pointer-events: none;
  z-index: 2;
}
/* Homepage Layout */
.homepage-layout .poc-instances-main-content {
  padding: 30px 0;
  //background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
  background-position: 40% 10%;
  background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
}
//quicklinks
.homepage-quicklinks {
  background: #0D316C;
  padding: 10px 0;
}
.homepage-quicklinks .quicklink-instance .icon {
    background: transparent;
}
.homepage-quicklinks .quicklink-instance h3 {
  color: #fff !important;
}
// 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; 
}
.poc-instance .call-to-action {
//color: #30971a;
}
//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;
}
//teaser hover colors
.homepage-layout .poc-instance .inner:hover p.teaser,
.homepage-layout .poc-instance .inner:hover h3 {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover p.teaser {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover .call-to-action, .homepage-layout .poc-instance .inner:hover h3 {
    color: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner {
    background: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner:hover {
    background: #2B476A;
}
//end of teaser hover colors
#page-footer {
    font-size: 12px;
    line-height: 24px;
    text-transform: uppercase;
    padding: 25px 0 60px 0;
    color: #2C4769;
    background: #FEBD3A;
}
#page-footer a, #page-footer a:link, #page-footer a:visited, #page-footer a:hover, #page-footer a:focus {
    color: #2D496C;
}
#page-footer .footer-streamline .streamline {
    color: #2D496C;
}

A screenshot of the City of Alameda Health Care District website's history section, showing navigation items and informational blurbs.
YELLOW REIGNS SUPREME EXTREME YELLOW NUKED 

//* Updating font to Mulish */
@at-root {
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
}
& {
  font-family: "Mulish", sans-serif;
}
#page-header {
  background: #FCBF2B;
}
#page-header > div > nav > div > ul > li:nth-child(1) {
  background-color: #36BCEE;
  color: #33476A !important;
  border-radius: 5px;
  margin-right: 4px;
}

#page-header > div > nav > div > ul > li:nth-child(2) {
  background-color: #36BCEE;
  color: black !important;
  border-radius: 5px;
  margin-right: 5px;
}

/* Header Links */
#page-header .header-links ul li a {
  padding: 0 15px;
  font-weight: 500;
}


#page-navigation {
  background: #FEBD3A
}
/* Waves Overlay */
// #carousel-items > div > div > div.homepage-carousel-image {
//   position: relative;
//   z-index: 0;
// }
/* Eliminate Carousel Caption Gradient */
.carousel-instance .homepage-carousel-caption {
  background: transparent;
}
#carousel-items > div > div > div.homepage-carousel-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Add Overlay on the Image */
#carousel-items > div > div > div.homepage-carousel-image:after {
  content: "";
    background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
 // background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
  background-size: cover;
  background-position: 40% 20%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.8;
  pointer-events: none;
  z-index: 2;
}
/* Homepage Layout */
.homepage-layout .poc-instances-main-content {
  padding: 30px 0;
  //background: url(https://www.getstreamline.com/hubfs/IM%20Background%20Images/City%20of%20alameda.png);
  background-position: 40% 10%;
  background-image: url('https://www.getstreamline.com/hubfs/IM%20Background%20Images/Untitled%20design%20(24).png');
}
//quicklinks
.homepage-quicklinks {
  background: #0D316C;
  padding: 10px 0;
}
.homepage-quicklinks .quicklink-instance .icon {
    background: transparent;
}
.homepage-quicklinks .quicklink-instance h3 {
  color: #fff !important;
}
// 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; 
}
.poc-instance .call-to-action {
//color: #30971a;
}
//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;
}
//teaser hover colors
.homepage-layout .poc-instance .inner:hover p.teaser,
.homepage-layout .poc-instance .inner:hover h3 {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover p.teaser {
    color: #fff !important;
}

.homepage-layout .poc-instance .inner:hover .call-to-action, .homepage-layout .poc-instance .inner:hover h3 {
    color: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner {
    background: #fff;
}
.homepage-layout .poc-instances-main-content .poc-instance .inner:hover {
    background: #2B476A;
}
//end of teaser hover colors
#page-footer {
    font-size: 12px;
    line-height: 24px;
    text-transform: uppercase;
    padding: 25px 0 60px 0;
    color: #2C4769;
    background: #FEBD3A;
}
#page-footer a, #page-footer a:link, #page-footer a:visited, #page-footer a:hover, #page-footer a:focus {
    color: #2D496C;
}
#page-footer .footer-streamline .streamline {
    color: #2D496C;
}

Join our mailing list
//leave site warning CLA