/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Aleksandra Hola
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.0.0
Updated: 2025-09-20 18:02:26

/* CUSTOM FONTS*/
 @font-face {
    font-family: 'CMU';
    src: url('./assets/font/cmunrm.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'CMU Bold';
    src: url('./assets/font/cmunbx.ttf') format('ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'CMU Italic';
    src: url('./assets/font/cmunti.ttf') format('ttf');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'CMU Bold Italic'; /* This is the name you will use in CSS */
    src: url('./assets/font/cmunbi.ttf') format('ttf');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
  }
  
  /* custom styles */
  body .single-content, button, input, select, textarea {
    font-family: 'CMU', serif;
  }

  
  .header-menu-container,
  .mobile-menu-container,
  .footer-html-inner {
      font-family: 'CMU', serif !important;
  }
  
  body h1 .wp-block-heading,
  body h2 .wp-block-heading,
  body h3 .wp-block-heading,
  body h4 .wp-block-heading,
  body h5 .wp-block-heading {
    font-family: 'CMU Bold', serif;
    font-weight: 700;
  }

  body .content-area {
    margin-block: 0;
  }

  body .entry-content-wrap {
    padding: 0;
  }

  .wp-block-kadence-countdown .kb-countdown-date-item .kb-countdown-number {
    font-family: 'CMU', serif !important;
  }

  /* rsvp form btn */
  button.ff-btn-submit:hover {
    box-shadow: none;
  }

  #primary-menu > li:last-child {
    color: black !important;
    border: 2px solid black !important;
    border-radius: 3px !important;
  }

  #primary-menu > li:last-child:hover {
    border: 2px solid #a3b899 !important;
    border-radius: 3px !important;
  }

  .sub-menu li a {
    background-color: #f0f2ef !important;
    color: #1d211d !important;
  }

  .sub-menu li a:hover {
    background-color: #f0f2ef !important;
  }


/* Custom scroll animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: 0.2s;
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

  
/* custom scroll for schedule section START */
.scroll-wrapper {
  height: 150vh; 
  position: relative;
}

.sticky-frame-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  
  /* effect to hide the scrolling text: hite at top, Transparent in middle, White at bottom */
  background: linear-gradient(
      to bottom, 
      #FFF 15%,           
      rgba(255,255,255,0) 25%, 
      rgba(255,255,255,0) 75%, 
      #FFF 85%            
  );
}

.sticky-frame-container {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  height: 100vh !important; 
  width: 100%;
  overflow: hidden;
  z-index: 10;
  
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.sticky-frame-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* local background-image: url('http://wiatr-lenart-wedding.local/wp-content/uploads/2025/11/invitation_frame-1.png');  */
  /* staging background-image: url('https://staging.wiatr-lenart-wedding.pl/wp-content/uploads/2025/11/invitation_frame-1.png'); */
  background-image: url('https://wiatr-lenart-wedding.pl/wp-content/uploads/2025/11/invitation_frame-1.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 50;
  pointer-events: none;
}

.timeline-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 900px;
  padding-top: 20vh; 
  padding-bottom: 20vh;
}
/* custom scroll for schedule section END */

/* styling of the photo carousels START */
.custom-marquee {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.marquee-mover {
  display: flex;
  height: 100%;
  width: max-content;
}

.marquee-mover img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  margin-right: 20px;
  object-fit: cover;
}
/* styling of the photo carousels END */

/* flipping of the bridesmaids cards START */
.my-flip-container {
  perspective: 1000px;
  z-index: 1;
  background: transparent;
  cursor: pointer;
}

.my-flipper {
  position: relative;
  width: 100%;
  /* Height is dictated by the Front card (relative) */
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.my-front, .my-back {
  border-radius: 10px;
  overflow: hidden;
  transition: opacity 0s 0.2s;
}

.my-front {
  position: relative;
  z-index: 2;
  transform: rotateY(0deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
}

.my-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.bridesmaids .my-front {
  border: 2px solid linear-gradient(to bottom left, #ebefea, #fcf4f5);
  background: linear-gradient(to bottom right, #ebefea, #fcf4f5);
}

.bridesmaids .my-back {
  background: linear-gradient(to bottom left, #ebefea, #fcf4f5);
  border: 2px solid linear-gradient(to bottom right, #ebefea, #fcf4f5);
}

.groomsmen .my-front {
  border: 2px solid linear-gradient(to bottom left, #ebefea, #fcf4f5,);
  background: linear-gradient(to bottom right, #fcf4f5, #ebefea);
}

.groomsmen .my-back {
  background: linear-gradient(to bottom left, #fcf4f5, #ebefea);
  border: 2px solid linear-gradient(to bottom right, #fcf4f5, #ebefea);
}

/* fix for the mobile tap not working on flipping back the card */
@media (hover: hover) and (pointer: fine) {
  .my-flip-container:hover .my-flipper {
    transform: rotateY(180deg);
  }
  .my-flip-container:hover .my-front {
    opacity: 0;
    pointer-events: none;
  }
}

.my-flip-container.is-flipped .my-flipper {
  transform: rotateY(180deg);
}
.my-flip-container.is-flipped .my-front {
  opacity: 0;
  pointer-events: none;
}
/* flipping of the bridesmaids cards END */

@media (max-width: 1239px) {
  .timeline-content {
    max-width: 500px;
    padding-top: 15vh;
    padding-bottom: 15vh;
  }

  .sticky-frame-container::before {
    background: linear-gradient(
        to bottom, 
        #FFF 10%,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,0) 80%,
        #FFF 90%
    );
  }

  .scroll-wrapper {
    height: 250vh;
  }
    
  .sticky-frame-container::after {
    /* local background-image: url('http://wiatr-lenart-wedding.local/wp-content/uploads/2025/11/invitation_frame-726x1024.png');  */
    /* staging background-image: url('https://staging.wiatr-lenart-wedding.pl/wp-content/uploads/2025/11/invitation_frame.png');  */
    background-image: url('https://wiatr-lenart-wedding.pl/wp-content/uploads/2025/11/invitation_frame.png');
  }
}


@media (max-width: 767px) {
  h6.hero-text {
    padding: 0 !important;
  }

  .sticky-frame-container::before {
    background: linear-gradient(
        to bottom, 
        #FFF 18%,          
        rgba(255,255,255,0) 34%, 
        rgba(255,255,255,0) 66%, 
        #FFF 82%
    );
  }

  .sticky-frame-container::after {
    background-size: 100% 80%;
  }

  .timeline-content {
      max-width: 300px; 
      padding-top: 25vh !important;
      padding-bottom: 25vh !important;
  }

  .scroll-wrapper {
      height: 250vh; 
  }
}

@media (max-width: 400px) {
  .timeline-content {
    max-width: 200px;
  }
}