/*
Theme Name:     indigo creativist studio
Theme URI:      https://indigo.creativiststudio.com/
Template:       kadence
Author:         creativist studio
Author URI:     https://creativist.studio
Description:    Indigo is a sleek and refined theme designed to showcase a single product and its accessories with maximum impact. Perfect for niche stores, it features a clean layout, smooth navigation, and an optimized presentation for high conversion. Its minimalist design adapts seamlessly to any brand looking for a sophisticated and effective online presence.
Version:        01
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ------------------------------------------------------- */

/* change color selection mouse pointer mouse */
::-moz-selection { /* Code for Firefox */
  color: white;
  background: #20084C;
}

::selection {
  color: white;
  background: #20084C; 
}
/* ------------------------------------------------------- */
	
/* Keyframes for the slide-down animation */
@keyframes slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Keyframes for the slide-up animation */
@keyframes slide-up {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* Initial state of the sticky header (transparent) */
.item-at-start {
    background-color: transparent; /* Ensure the background is transparent */
    transition: background-color 0.5s ease, opacity 0.5s ease; /* Smooth transition for background color and opacity */
    opacity: 1;
}

/* State of the sticky header when it becomes sticky and white */
.item-is-stuck {
    background-color: #20084C; /* Change background color to white */
    animation: slide-down 0.5s ease-out; /* Apply slide-down animation */
    opacity: 1; /* Ensure the opacity is set to 1 */
}

/* State of the sticky header when it is hidden */
.item-hidden {
    background-color: transparent; /* Ensure the background is transparent */
    animation: slide-up 0.5s ease-in; /* Apply slide-up animation */
    opacity: 0; /* Ensure the opacity is set to 0 */
}   /* --------
.item-is-stuck {

box-shadow: 0 2px 4px rgb(45 62 80 / 8%);
}
----------------------------------------------- */
/* ------------------------------------------------------- */
	
.rotate-text {  transform-origin: 0 0;    transform: rotate(-90deg);    
position: absolute;    
width: 350px !important;    bottom: 0;    
margin-left: 20px;}. 
.rotate-text-container {  position: relative;}

.rotate-text2 {  transform-origin: 0 0;    transform: rotate(-90deg);    
position: absolute;    
width: 350px !important;    bottom: 0;    
margin-left: 1px;}. 
.rotate-text-container {  position: relative;}

}
/* ------------------------------------------------------- */
.entry.loop-entry {
    border-radius: 0px 0px 0px 0px;
    box-shadow: 0px 0px 0px -0px rgba(0, 0, 0, 0.00);
}
 
.wp-block-kadence-posts .loop-entry {
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,.00);
	border-radius: .25rem;
}
/* ------------------------------------------------------- */

.justify-text 
{
	text-align: justify;
  text-justify: inter-word;
}

/* for openwork fonts with a border */
/* h4 {
    -webkit-text-stroke: 1px #F5F1E6; }/* width and color */
/* for buttons in forms */
.kb-radio-item label {
    color: #20084C;
}

/* ------------------------------------------------------- */
.wp-block-kadence-posts .loop-entry {
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,.00);
	border-radius: .25rem
}

.entry.loop-entry {
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,.00);
	
}
/* ------------------------------------------------------- */
.header-navigation ul.sub-menu {
padding: 25px;
}

/* ------------------------------------------------------- */

.frosted-frame {
 backdrop-filter: blur(3px);
	box-shadow: 30px 30px 30px 30px rgba(0,0,0,.00);
	border-radius: 30% 30% 30% 30%;;
}
/* ------------------------------------------------------- */
.site-branding .site-description {
	margin: 18px 0 0;
	word-wrap: break-word
}

.blend-text {
  
    background-image: url('https://indigo.creativiststudio.com/wp-content/uploads/2025/01/indigoscooter2.webp');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------- */
.post-type-archive-product .product, .wp-post-image, .content-bg .product.entry.loop-entry, .woocommerce-page .content-bg .product.entry.loop-entry, .woocommerce ul.products li.product a img, .woocommerce ul.products li.product .entry-content-wrap{
	border-radius: 24px; background-color: transparent;
}

.single-product div.product .woocommerce-tabs ul.tabs li{border: none;
	font-size: 20px; line-height: 23px; 
}

.single-product div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 3px solid #293a35; 
	margin: 0px;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
	background-color: transparent; 
	}

.single-product div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid 
	padding-left: 0px;  
}
/* ------------------------------------------------------- */

.imgtop-right {
  --r: 25px; /* radius */
  --s: 40px; /* size of the inner curve */
  
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask:
    right calc(var(--s) + var(--r)) top 0 var(--_m),
    right calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) 
     calc(-1*var(--r)) var(--r) no-repeat,
    conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)),
     #0000 25%,#000 0);
}
/* ------------------------------------------------------- */

.imgtop-left {
  --r: 25px; /* radius */
  --s: 40px; /* size of the inner curve */
  
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask:
    calc(var(--s) + var(--r)) 0 var(--_m),
    0 calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) 
     var(--r) var(--r) no-repeat,
    conic-gradient(at calc(var(--s) + 2*var(--r)) calc(var(--s) + 2*var(--r)),
     #000 75%,#0000 0);
}
/* ------------------------------------------------------- */

.imgbottom-left {
  --r: 25px; /* radius */
  --s: 40px; /* size of the inner curve */
  
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask:
    calc(var(--s) + var(--r)) bottom var(--_m),
    bottom calc(var(--s) + var(--r)) left 0 var(--_m),
    radial-gradient(var(--s) at 0 100%,#0000 99%,#000 calc(100% + 1px)) 
     var(--r) calc(-1*var(--r)) no-repeat,
    conic-gradient(from 180deg at calc(var(--s) + 2*var(--r)) calc(100% - var(--s) - 2*var(--r)),
     #0000 25%,#000 0);
}
/* ------------------------------------------------------- */
.imgbottom-right {
  --r: 25px; /* radius */
  --s: 40px; /* size of the inner curve */
  
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask:
    right 0 bottom calc(var(--s) + var(--r)) var(--_m),
    right calc(var(--s) + var(--r)) bottom 0 var(--_m),
    radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) 
     calc(-1*var(--r)) calc(-1*var(--r)) no-repeat,
    conic-gradient(from 90deg at calc(100% - var(--s) - 2*var(--r)) calc(100% - var(--s) - 2*var(--r)),
     #0000 25%,#000 0);
}
/* ------------------------------------------------------- */

.sub-menu {
	 border-radius: 20px;
	
}
.header-navigation li.menu-item {
    margin-right: 5px; 
	
	/* Ajoute un espace à droite de chaque bouton */
}
	/* ------------------------------------------------------- */
.brand img:hover {animation:jello-vertical .5s linear both} @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}}

.site-branding .site-title hover {animation:jello-vertical .5s linear both} @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}}