Skip to main content

Castle pines codes

Castle Pines Metropolitan District site with info on water, roads, payment, and events. Snowy landscape image.
Watercolor painting of evergreen trees against a dark background.
Foggy forest with tall evergreen trees partially obscured by mist.
Watercolor painting of a forest with layers of green and teal trees against a black background.
preferences 

$primary-color: #0d7d45;
$secondary-color: #3B759B;
$logo-height: 105px;
$carousel-image-aspect-ratio: 35%;
$carousel-caption-aspect-ratio: 35%;

styles 


//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;
 }
  //add secondary nav background
#page-header > div > nav > div > ul {
  background-color: #0d7d45;
  border-radius: 20px;
//  margin-left: 5px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-right: 10px;
  color: #fff !important;
}
#page-header {
  padding-bottom: 5px !important;
  background: url('https://streamline.imgix.net/f06c09fb-8ed8-4b8e-844b-63ccacdc16a1/709dfec1-b4d0-4f56-95ee-7052059b3a1f/Castle%20pines.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=6bff30c941a9630ba053d2a95879ace9');
  background-size: cover;
  background-color: #fff !important;
  background-position: 20% 35%;
}
#page-header .header-links ul li a {
    color: #fff !important;
    font-weight: 650;
    font-size: 1.1em;
}
#page-header .header-links ul li a:hover, .header-links ul li a:focus {
    color: #3B759B;//#037cb5;
}
.banner-zone:before {
    opacity: 0;
}
//carousel caption gradient
.carousel-instance .homepage-carousel-caption {
min-height: 180px !important;
//blue to solid fade
// background: rgba(59, 117, 155, 0.3); 
// background: linear-gradient(0deg, rgba(59, 117, 155, 1) 100%, rgba(59, 117, 155, 0.85) 75%, rgba(59, 117, 155, 0.5) 50%, rgba(59, 117, 155, 0.3) 0%);
//blue fade
background: rgba(35, 79, 105, 0.85); /* Darker base color */
background: linear-gradient(0deg, rgba(35, 79, 105, 0.85) 56%, rgba(35, 79, 105, 0) 100%);
//black fade
//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: #fff;
  // 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%);
  // -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: #0d7d45 !important;  
}
//text for items that have no dropdown on hover fix
.navbar-nav li a:hover, .navbar-nav li a:focus{
  color: #fff !important;
}
.navbar-nav > li.sl-menu--open > a{
  background: #0d7d45;
  color: #FFF !important;
}
.dropdown-menu{
  background: #0d7d45;
  color: #FFF !important;
}
.dropdown-menu > li > a, .dropdown-menu > li > .sl-menu__toggle {
    //border: none;
    color: #FFF !important;
    //transition: background-color 0.3s ease;
}
// .dropdown-menu > li > a:hover,
// .dropdown-menu > li > .sl-menu__toggle:hover,
// .dropdown-menu > li > a:focus,
// .dropdown-menu > li > .sl-menu__toggle:focus {
//   background: #E9BE01 !important;
// }

/* Hover and focus states for links inside .navbar-nav */
.navbar-nav > li > a:hover, 
.navbar-nav > li > a:focus {
  background: #0d7d45;
  color: #FFF;
}
.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus {
  background: #0d7d45;
  color: #FFF;
}
.header-links ul li a {
  color: #fff !important;
}

// .navbar-nav li a{
//   color: #555555 !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(178,225,255);
background: linear-gradient(0deg, rgba(178,225,255,1) 0%, rgba(59,117,155,1) 5%, rgba(59,117,155,1) 97%, rgba(53,110,148,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;
}

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


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

p.social-header-streamline {
margin-top: 15px;
text-align: center;
}
}
.homepage-layout .poc-instances-main-content{
background: url('https://streamline.imgix.net/f06c09fb-8ed8-4b8e-844b-63ccacdc16a1/9efce0d1-0ed0-4c6a-abab-784d43e50efd/1.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=c4e97b691503d14aee1268b00bfe0867');
  background-size: cover;
  padding: 5%;
  background-color: #fff !important;
  background-position: 50% 90%;
}

Join our mailing list
//leave site warning CLA