CSS CWS

/* Website Loading Screen */
.stop-scrolling { 
  height: 100%; 
  overflow: hidden; 
} 

#header {
  visibility: hidden;
}

.loadingscreen {
  position: absolute;
  background: #fff;
  opacity: 1;
  z-index: 2000;
  width: 100%;
}

.loadingscreen > .loading {
  background: #FFF;  
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

}

.loading img {
  height: 200px;
  width: 200px;
}

.logo-pulse{
  animation-name: pulse;
  -webkit-animation-name: pulse;	

  animation-duration: 1.5s;	
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

// Enable Smooth Scrolling for anchor links
html {scroll-behavior: smooth;}

// Custom bullet points
ul[data-rte-list] li>*:first-child::before{content: "⟢"!important}

// Custom testimonial section
/* ---- GHOST PLUGINS - BOLDLY TESTIMONIAL SLIDER START ---- */
@boldly-ghost-card-background: #fff; // background color
@boldly-ghost-card-border-style: 1px solid #eee; // border radius
@boldly-ghost-card-border-radius: 10px; // border radius
@boldly-ghost-card-shadow-color: #fff; // subtle shadow color

@boldly-ghost-desc-font-size: 18px; // quote size
@boldly-ghost-desc-mobile-font-size: 1.2em; // mobile quote size
@boldly-ghost-desc-font-color: #000; // quote color

@boldly-ghost-title-font-size: 20px; // name title size
@boldly-ghost-title-mobile-font-size: 1.2em; // mobile name title size
@boldly-ghost-title-font-color: #000; // name title color

@boldly-ghost-position-size: 15px; // tag meta size
@boldly-ghost-position-mobile-font-size: 1em; // mobile tag meta size
@boldly-ghost-position-color: #666; // tag meta color

@boldly-ghost-arrow-size: 2em; // arrow button size
@boldly-ghost-arrow-bg-color: #000; // arrow background
@boldly-ghost-arrow-color: #fff; // arrow icon color

@boldly-ghost-quote-symbol-size: 30px; // quote icon size
@boldly-ghost-quote-symbol-color: #000; // quote icon color

@boldly-ghost-bullet-size: 12px; // bullet slider icon size
@boldly-ghost-bullet-color: #000; // bullet slider icon color

/* ----- DON'T EDIT BELOW THIS LINE - SUPPORT NOT PROVIDED IF EDITING BELOW THIS LINE ----- */
body{.boldly-plugin{.image-slide{border: @boldly-ghost-card-border-style !important; background: @boldly-ghost-card-background;border-radius: @boldly-ghost-card-border-radius;&:after{background-color: @boldly-ghost-card-background;border-radius: @boldly-ghost-card-border-radius;}&:before{box-shadow: 0px 1px 5px 5px @boldly-ghost-card-shadow-color;border-radius: @boldly-ghost-card-border-radius;}}h3{font-size: @boldly-ghost-title-font-size;color: @boldly-ghost-title-font-color !important;@media only screen and (max-width: 640px){font-size: @boldly-ghost-title-mobile-font-size;}}p{font-size: @boldly-ghost-desc-font-size;color: @boldly-ghost-desc-font-color;a{color: @boldly-ghost-desc-font-color;}}svg{width: @boldly-ghost-quote-symbol-size;height: @boldly-ghost-quote-symbol-size;stroke: @boldly-ghost-quote-symbol-color;path{fill: @boldly-ghost-quote-symbol-color;}}.desc-wrapper{p{@media only screen and (max-width: 640px){font-size: @boldly-ghost-desc-mobile-font-size;}}}.author-info{p{line-height: 1.2;font-size: @boldly-ghost-position-size;color: @boldly-ghost-position-color;@media only screen and (max-width: 640px){font-size: @boldly-ghost-position-mobile-font-size;}}.author-position p, p a{color: @boldly-ghost-position-color;}}}.boldly-pagination.swiper-pagination{.swiper-pagination-bullet{width: @boldly-ghost-bullet-size;height: @boldly-ghost-bullet-size;margin: @boldly-ghost-bullet-size/2;background-color: @boldly-ghost-bullet-color;}}.boldly-control-wrapper{height: @boldly-ghost-arrow-size;.boldly-control{.swiper-button-next, .swiper-button-prev{color: @boldly-ghost-arrow-color;left: -@boldly-ghost-arrow-size/2;background-color: @boldly-ghost-arrow-bg-color;&:after{font-size: @boldly-ghost-arrow-size;}}.swiper-button-next{right: -@boldly-ghost-arrow-size/2;}}}
  /* ---- GHOST PLUGINS - BOLDLY TESTIMONIAL SLIDER END ---- */


  // Add solid black line around picture on ABOUT page (Meet Mary Lou Hoover)
  #block-fb64aa8e33ec53d1f8ac{
    border: 2px solid black;
  }

  /******* MOBILE ONLY Code *******/
  @media only screen and (max-width: 640px) {
    // Center the headings
    #block-650a19492b582ebec7dfdcd7 h3
    {
      text-align: center;
    }

    // Change H1 size
    h1 {
      font-size: 2.5rem
    } 

    // Add padding to ABOUT page with the white background behind text
    .fe-block-65370874633f041db8a2d0e3{
      padding: 17px 17px 17px 17px !important;
      // Center text on ABOUT page
      p{
        text-align: center;
      }
    }

    // Center text and buttons om mobile
    [data-section-id="65186fca6ce6416583d3f009"], [data-section-id="650a1949e95695d995395cdc"], [data-section-id="65383a8fb4d3ab00c6b2a5c9"]{
      h1, h2, h3, p{
        text-align: center !important;
      }
      .sqs-block-button-container--left{
        justify-content: center !important;
      }
    }

    // Portfolio page fonts on mobile
    .portfolio-hover[data-variant-hover-cover] .portfolio-hover-item-title{
      font-size: 38px !important;
    }
  }
  
/**
 * Background Image For Mobile Menu
 * From Will-Myers.com
**/
.header-menu-bg {
  --opacity: 0.75;
  --blur: 5px;

  &:after {
    background-image: url(https://static1.squarespace.com/static/6442d193d9f352786c7e8651/t/654433505e58705c235caf2a/1698968401549/natural-light-on-workspace.jpg);

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: 50% 50%;
   // filter: blur(var(--blur, 5px));
    transform: scale(1);
    opacity: var(--opacity, 1);
    transition: transform 0.8s ease;
  }
  .header--menu-open &:before{
    transform: scale(1.1);
  }
}
  /******* TABLET ONLY Code ********/
  @media only screen and (min-width: 767px) and (max-width:950px) {
    // Center text and buttons om tablet
    [data-section-id="650a1949e95695d995395cdc"], [data-section-id="65186fca6ce6416583d3f009"]{
      h1, h2, h3, p{
        text-align: center !important;
      }
      .sqs-block-button-container--left{
        justify-content: center !important;
      }
    }

    .fe-block-65370874633f041db8a2d0e3{
      padding: 17px 17px 17px 17px !important;
    }
  }

  /* DESKTOP ONLY Code
  @media only screen and (min-width: 951px) {code goes here}
  */


  /******* FOOTER Code *******/
  // Remove underlines on footer text links
  Footer p a {
    text-decoration: none !important;
  }

  // Remove the automatic hyphens on headings and paragraphs
  h1, h2, h3, h4, p {
    hyphens: none;
  }
}

// Change lightbox background color
html .c-lightbox[data-type=inline]:not([data-group]) .c-lightbox__overlay {
  background: #FAF7F9;
}

/* Portfolio titles below image on mobile */
@media screen and (max-width:767px) {
  div#gridThumbs {
    grid-template-columns: repeat(1,1fr);
  }

  a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
  }

  .portfolio-text {
    position: relative !important;
    opacity: 1 !important;
    padding-top: 15px !important;
  }
}

.process-number{
  width: 100px;
  height: 100px;
  background-color: #45554d;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  border-radius: 100%;
  font-size: 36px;
}