/* Start custom CSS for html, class: .elementor-element-4fcd00b *//* =========================================================
KAUSORA LEAF — OUR TEAS BANNER
========================================================= */
.kl-our-teas-hero{
position:relative;
width:100%;
height:465px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:#263A18;
color:#fff;
}
/* =========================================================
BACKGROUND IMAGE
========================================================= */
.kl-teas-bg-image{
position:absolute;
inset:0;
overflow:hidden;
}
.kl-teas-bg-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transform:
scale(1.06);
transition:
transform 1.2s ease;
}
/* =========================================================
OVERLAY
========================================================= */
.kl-teas-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
90deg,
rgba(18,25,11,.58),
rgba(20,29,13,.38),
rgba(18,25,11,.58)
);
}
/* Extra soft centre */
.kl-teas-overlay::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at center,
rgba(0,0,0,.05),
rgba(0,0,0,.27)
);
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-teas-falling-leaves{
position:absolute;
inset:0;
z-index:4;
overflow:hidden;
pointer-events:none;
}
.kl-tea-falling-leaf{
position:absolute;
top:-25px;
display:block;
border-radius:
100% 0 100% 0;
background:
#8A9B56;
opacity:.38;
filter:
drop-shadow(
0 2px 3px
rgba(0,0,0,.2)
);
animation:
klTeaFall
var(--fall-time)
linear
var(--fall-delay)
infinite;
}
.kl-tea-falling-leaf::after{
content:"";
position:absolute;
width:85%;
height:1px;
top:50%;
left:7%;
background:
rgba(255,255,255,.5);
transform:
rotate(-15deg);
}
@keyframes klTeaFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.38;
}
45%{
transform:
translate3d(
calc(var(--fall-drift) * .4),
210px,
0
)
rotate(
calc(var(--fall-rotation) * .45)
)
scale(1);
}
72%{
transform:
translate3d(
calc(var(--fall-drift) * -.25),
350px,
0
)
rotate(
calc(var(--fall-rotation) * .75)
)
scale(.9);
}
100%{
transform:
translate3d(
var(--fall-drift),
520px,
0
)
rotate(
var(--fall-rotation)
)
scale(.65);
opacity:0;
}
}
/* =========================================================
CENTER CONTENT
========================================================= */
.kl-teas-hero-content{
position:relative;
z-index:5;
width:90%;
max-width:720px;
text-align:center;
opacity:0;
transform:
translateY(22px);
transition:
opacity 1s ease,
transform 1s
cubic-bezier(.2,.7,.2,1);
}
.kl-teas-hero-content.kl-teas-show{
opacity:1;
transform:
translateY(0);
}
/* =========================================================
SMALL LABEL
========================================================= */
.kl-teas-small-label{
margin-bottom:13px;
color:#E0C887;
font-size:8px;
font-weight:700;
letter-spacing:.34em;
}
/* =========================================================
TITLE
========================================================= */
.kl-teas-hero-content h1{
margin:0;
color:#fff;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(62px,8vw,92px);
line-height:.8;
font-weight:400;
letter-spacing:-.04em;
text-shadow:
0 4px 25px
rgba(0,0,0,.18);
}
/* =========================================================
GOLD DECORATIVE LINE
========================================================= */
.kl-teas-gold-line{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
width:135px;
margin:
19px auto 17px;
}
.kl-teas-gold-line span{
flex:1;
height:1px;
background:
rgba(224,200,135,.7);
}
.kl-teas-gold-line i{
width:5px;
height:5px;
background:#DCC17B;
transform:
rotate(45deg);
}
/* =========================================================
DESCRIPTION
========================================================= */
.kl-teas-hero-content p{
max-width:570px;
margin:0 auto;
color:
rgba(255,255,255,.86);
font-size:11px;
line-height:1.8;
font-weight:400;
letter-spacing:.01em;
}
/* =========================================================
SCROLL
========================================================= */
.kl-teas-scroll{
position:absolute;
bottom:22px;
left:50%;
z-index:6;
transform:
translateX(-50%);
display:flex;
align-items:center;
gap:8px;
color:
rgba(255,255,255,.62);
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-teas-scroll i{
display:block;
width:4px;
height:4px;
border-radius:50%;
background:#D6BD7B;
animation:
klScrollPulse
1.7s ease-in-out
infinite;
}
@keyframes klScrollPulse{
0%,
100%{
opacity:.35;
transform:
translateY(0);
}
50%{
opacity:1;
transform:
translateY(4px);
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-our-teas-hero{
height:440px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-our-teas-hero{
height:400px;
}
.kl-teas-bg-image img{
object-position:
center center;
transform:
scale(1.04);
}
.kl-teas-overlay{
background:
linear-gradient(
180deg,
rgba(18,25,11,.45),
rgba(18,25,11,.55)
);
}
.kl-teas-small-label{
font-size:6.5px;
letter-spacing:.27em;
margin-bottom:12px;
}
.kl-teas-hero-content h1{
font-size:58px;
}
.kl-teas-gold-line{
margin:
17px auto 14px;
width:110px;
}
.kl-teas-hero-content p{
width:94%;
font-size:9.5px;
line-height:1.75;
}
.kl-teas-scroll{
bottom:17px;
}
.kl-tea-falling-leaf{
opacity:.3;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-our-teas-hero{
height:370px;
}
.kl-teas-hero-content h1{
font-size:53px;
}
.kl-teas-hero-content p{
font-size:9px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-tea-falling-leaf,
.kl-teas-scroll i{
animation:none !important;
}
.kl-teas-hero-content{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1fa05dc *//* =========================================================
KAUSORA LEAF — PREMIUM PRODUCT COLLECTION
========================================================= */
.kl-new-tea-collection{
--green:#263A18;
--deep:#17240F;
--gold:#B7964E;
--gold-light:#D6BD7B;
--cream:#F6F1E6;
--paper:#FCFBF7;
position:relative;
width:100%;
overflow:hidden;
background:var(--paper);
color:var(--green);
font-family:
"Montserrat",
Arial,
sans-serif;
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-product-fall-leaves{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:1;
}
.kl-product-falling-leaf{
position:absolute;
top:-30px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#82934D,
#4D6128
);
opacity:.18;
animation:
klProductLeafFall
var(--duration)
linear
var(--delay)
infinite;
}
@keyframes klProductLeafFall{
0%{
transform:
translate3d(0,-30px,0)
rotate(0deg)
scale(.5);
opacity:0;
}
15%{
opacity:.2;
}
50%{
transform:
translate3d(
calc(var(--drift)*.35),
430px,
0
)
rotate(
calc(var(--rotation)*.5)
)
scale(1);
}
100%{
transform:
translate3d(
var(--drift),
1050px,
0
)
rotate(
var(--rotation)
)
scale(.65);
opacity:0;
}
}
/* =========================================================
WRAPPER
========================================================= */
.kl-product-wrap{
position:relative;
z-index:3;
width:min(1180px,90%);
margin:auto;
padding:
85px 0 70px;
}
/* =========================================================
HEADING
========================================================= */
.kl-product-heading{
text-align:center;
max-width:650px;
margin:
0 auto 55px;
}
.kl-product-kicker{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.25em;
margin-bottom:17px;
}
.kl-product-kicker span{
width:25px;
height:1px;
background:var(--gold);
}
.kl-product-heading h2{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px,6vw,68px);
font-weight:400;
line-height:.85;
letter-spacing:-.04em;
}
.kl-product-heading h2 em{
color:var(--gold);
font-style:italic;
}
.kl-product-heading p{
max-width:470px;
margin:
18px auto 0;
color:
rgba(38,58,24,.5);
font-size:10px;
line-height:1.8;
}
/* =========================================================
GRID
========================================================= */
.kl-product-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:
32px 23px;
}
/* =========================================================
PRODUCT CARD
========================================================= */
.kl-new-product{
position:relative;
display:block;
text-decoration:none;
color:var(--green);
opacity:0;
transform:
translateY(25px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-new-product.kl-product-visible{
opacity:1;
transform:
translateY(0);
}
/* =========================================================
VISUAL
========================================================= */
.kl-product-visual{
position:relative;
width:100%;
aspect-ratio:
4 / 5;
overflow:hidden;
background:#E9E3D4;
box-shadow:
0 12px 35px
rgba(38,58,24,.07);
transition:
box-shadow .45s ease,
transform .45s ease;
}
.kl-new-product:hover
.kl-product-visual{
transform:
translateY(-6px);
box-shadow:
0 25px 60px
rgba(38,58,24,.13);
}
/* =========================================================
PRODUCT IMAGES
========================================================= */
.kl-product-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:
opacity .65s ease,
transform .8s
cubic-bezier(.2,.7,.2,1);
}
.kl-product-img.primary{
opacity:1;
transform:
scale(1);
}
.kl-product-img.secondary{
opacity:0;
transform:
scale(1.08);
}
/* =========================================================
HOVER:
SECONDARY IMAGE TAKES ENTIRE CARD
========================================================= */
.kl-new-product:hover
.kl-product-img.primary{
opacity:0;
transform:
scale(1.08);
}
.kl-new-product:hover
.kl-product-img.secondary{
opacity:1;
transform:
scale(1);
}
/* =========================================================
DARK OVERLAY
========================================================= */
.kl-product-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
180deg,
rgba(10,18,7,.05),
rgba(10,18,7,.72)
);
opacity:0;
transition:
opacity .5s ease;
}
.kl-new-product:hover
.kl-product-overlay{
opacity:1;
}
/* =========================================================
TOP TEA LEAF ART
========================================================= */
.kl-product-leaf-art{
position:absolute;
top:12px;
left:50%;
z-index:5;
width:105px;
height:42px;
transform:
translateX(-50%);
pointer-events:none;
}
.kl-product-leaf-art::before{
content:"";
position:absolute;
width:78px;
height:1px;
left:14px;
top:25px;
background:
rgba(255,255,255,.65);
transform:
rotate(-3deg);
}
.kl-product-leaf-art span{
position:absolute;
width:21px;
height:12px;
border-radius:
100% 0 100% 0;
background:
rgba(255,255,255,.78);
filter:
drop-shadow(
0 2px 3px
rgba(0,0,0,.15)
);
}
.kl-product-leaf-art span:nth-child(1){
left:10px;
top:17px;
transform:
rotate(-35deg);
}
.kl-product-leaf-art span:nth-child(2){
left:42px;
top:8px;
transform:
rotate(5deg);
}
.kl-product-leaf-art span:nth-child(3){
right:8px;
top:17px;
transform:
rotate(35deg);
}
/* =========================================================
HOVER CONTENT
========================================================= */
.kl-product-hover-content{
position:absolute;
left:25px;
right:25px;
bottom:25px;
z-index:6;
display:flex;
flex-direction:column;
align-items:flex-start;
opacity:0;
transform:
translateY(18px);
transition:
opacity .45s ease .08s,
transform .45s ease .08s;
}
.kl-new-product:hover
.kl-product-hover-content{
opacity:1;
transform:
translateY(0);
}
.kl-product-hover-content small{
margin-bottom:8px;
color:var(--gold-light);
font-size:6px;
font-weight:700;
letter-spacing:.23em;
}
.kl-product-hover-content strong{
max-width:280px;
color:#fff;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:30px;
font-weight:500;
line-height:.95;
}
.kl-product-hover-content span{
display:flex;
align-items:center;
gap:10px;
margin-top:17px;
padding-bottom:6px;
border-bottom:
1px solid
rgba(214,189,123,.7);
color:#fff;
font-size:6px;
font-weight:700;
letter-spacing:.18em;
}
.kl-product-hover-content i{
font-size:13px;
font-style:normal;
transition:
transform .35s ease;
}
.kl-new-product:hover
.kl-product-hover-content i{
transform:
rotate(45deg);
}
/* =========================================================
INDEX
========================================================= */
.kl-product-index{
position:absolute;
right:16px;
top:15px;
z-index:6;
color:
rgba(255,255,255,.8);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:24px;
}
/* =========================================================
NORMAL CARD DETAILS
========================================================= */
.kl-product-details{
padding:
17px 3px 2px;
transition:
opacity .35s ease,
transform .35s ease;
}
.kl-product-details small{
display:block;
margin-bottom:6px;
color:var(--gold);
font-size:6px;
font-weight:700;
letter-spacing:.18em;
}
.kl-product-details h3{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:25px;
font-weight:500;
line-height:1;
}
.kl-product-details span{
display:block;
margin-top:7px;
color:
rgba(38,58,24,.4);
font-size:7px;
}
/* =========================================================
ON HOVER — DETAILS DISAPPEAR
========================================================= */
.kl-new-product:hover
.kl-product-details{
opacity:0;
transform:
translateY(-10px);
}
/* =========================================================
BOTTOM LINE
========================================================= */
.kl-product-footer-line{
display:flex;
align-items:center;
gap:17px;
margin-top:60px;
}
.kl-product-footer-line span{
white-space:nowrap;
color:
rgba(38,58,24,.3);
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-product-footer-line div{
flex:1;
height:1px;
background:
rgba(183,150,78,.25);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:950px){
.kl-product-grid{
grid-template-columns:
repeat(2,1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-product-wrap{
width:89%;
padding:
65px 0 55px;
}
.kl-product-heading{
margin-bottom:38px;
}
.kl-product-heading h2{
font-size:48px;
}
.kl-product-heading p{
font-size:9px;
}
.kl-product-grid{
grid-template-columns:1fr;
gap:28px;
}
.kl-product-visual{
aspect-ratio:
4 / 4.8;
}
/*
Mobile has no hover,
so the secondary image is activated
by tapping the card.
*/
.kl-mobile-product-active
.kl-product-img.primary{
opacity:0;
transform:
scale(1.08);
}
.kl-mobile-product-active
.kl-product-img.secondary{
opacity:1;
transform:
scale(1);
}
.kl-mobile-product-active
.kl-product-overlay{
opacity:1;
}
.kl-mobile-product-active
.kl-product-hover-content{
opacity:1;
transform:
translateY(0);
}
.kl-mobile-product-active
.kl-product-details{
opacity:0;
transform:
translateY(-10px);
}
.kl-product-hover-content{
left:20px;
right:20px;
bottom:21px;
}
.kl-product-hover-content strong{
font-size:28px;
}
.kl-product-leaf-art{
top:10px;
}
.kl-product-falling-leaf{
opacity:.13;
}
.kl-product-footer-line{
margin-top:42px;
gap:8px;
}
.kl-product-footer-line span{
font-size:4.5px;
letter-spacing:.12em;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-product-heading h2{
font-size:44px;
}
.kl-product-hover-content strong{
font-size:25px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-product-falling-leaf{
animation:none !important;
}
.kl-new-product{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bb01134 *//* =========================================================
KAUSORA LEAF — THE ART OF A GOOD CUP
========================================================= */
.kl-tea-ritual{
--green:#263A18;
--deep:#17240F;
--gold:#B7964E;
--gold-light:#D6BD7B;
--paper:#FFFFFF;
--soft:#F7F4EB;
position:relative;
width:100%;
overflow:hidden;
background:#FFFFFF;
color:var(--green);
font-family:
"Montserrat",
Arial,
sans-serif;
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-ritual-leaves{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:1;
}
.kl-ritual-leaf{
position:absolute;
top:-30px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#83934E,
#4D6128
);
opacity:.17;
animation:
klRitualLeafFall
var(--ritual-time)
linear
var(--ritual-delay)
infinite;
}
@keyframes klRitualLeafFall{
0%{
transform:
translate3d(0,-30px,0)
rotate(0deg)
scale(.55);
opacity:0;
}
12%{
opacity:.2;
}
45%{
transform:
translate3d(
calc(var(--ritual-drift) * .4),
300px,
0
)
rotate(
calc(var(--ritual-rotation) * .45)
)
scale(1);
}
75%{
transform:
translate3d(
calc(var(--ritual-drift) * -.3),
600px,
0
)
rotate(
calc(var(--ritual-rotation) * .75)
);
}
100%{
transform:
translate3d(
var(--ritual-drift),
950px,
0
)
rotate(
var(--ritual-rotation)
)
scale(.65);
opacity:0;
}
}
/* =========================================================
WRAPPER
========================================================= */
.kl-ritual-wrap{
position:relative;
z-index:3;
width:min(1120px,89%);
margin:auto;
padding:
90px 0 65px;
}
/* =========================================================
KICKER
========================================================= */
.kl-ritual-kicker{
display:flex;
align-items:center;
justify-content:center;
gap:11px;
margin-bottom:55px;
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.27em;
opacity:0;
transform:
translateY(15px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-ritual-kicker.kl-ritual-visible{
opacity:1;
transform:
translateY(0);
}
.kl-ritual-kicker span{
width:27px;
height:1px;
background:var(--gold);
}
/* =========================================================
MAIN GRID
========================================================= */
.kl-ritual-main{
display:grid;
grid-template-columns:
1fr 1fr;
gap:85px;
align-items:center;
}
/* =========================================================
VISUAL
========================================================= */
.kl-ritual-visual{
position:relative;
height:560px;
overflow:visible;
opacity:0;
transform:
translateX(-25px);
transition:
opacity .9s ease .1s,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-ritual-visual.kl-ritual-visible{
opacity:1;
transform:
translateX(0);
}
/* IMAGE */
.kl-ritual-visual > img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:
transform .5s ease;
}
.kl-ritual-visual::before{
content:"";
position:absolute;
inset:15px;
z-index:2;
border:
1px solid
rgba(255,255,255,.65);
pointer-events:none;
}
.kl-ritual-visual::after{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(
180deg,
transparent 50%,
rgba(20,30,12,.28)
);
pointer-events:none;
}
/* GOLD FRAME */
.kl-ritual-image-frame{
position:absolute;
z-index:4;
left:-17px;
top:18px;
width:100%;
height:100%;
border:
1px solid
rgba(183,150,78,.42);
pointer-events:none;
}
/* =========================================================
STEAM
========================================================= */
.kl-steam{
position:absolute;
z-index:6;
left:53%;
top:24%;
width:100px;
height:130px;
pointer-events:none;
}
.kl-steam i{
position:absolute;
bottom:0;
width:25px;
height:100px;
border-left:
1px solid
rgba(255,255,255,.55);
border-radius:50%;
filter:
blur(1px);
opacity:0;
animation:
klSteam
4s ease-in-out
infinite;
}
.kl-steam i:nth-child(1){
left:10px;
animation-delay:0s;
}
.kl-steam i:nth-child(2){
left:38px;
height:120px;
animation-delay:1.2s;
}
.kl-steam i:nth-child(3){
left:65px;
height:90px;
animation-delay:2.1s;
}
@keyframes klSteam{
0%{
opacity:0;
transform:
translateY(15px)
scaleX(.7);
}
30%{
opacity:.4;
}
70%{
opacity:.18;
}
100%{
opacity:0;
transform:
translateY(-50px)
scaleX(1.3);
}
}
/* =========================================================
FLOATING BADGE
========================================================= */
.kl-ritual-badge{
position:absolute;
z-index:7;
right:-28px;
bottom:45px;
display:flex;
flex-direction:column;
padding:
17px 21px;
background:
rgba(255,255,255,.94);
border:
1px solid
rgba(183,150,78,.42);
box-shadow:
0 15px 35px
rgba(38,58,24,.1);
}
.kl-ritual-badge small{
color:var(--gold);
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-ritual-badge strong{
margin-top:4px;
color:var(--green);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:22px;
font-weight:500;
}
/* =========================================================
CONTENT
========================================================= */
.kl-ritual-content{
opacity:0;
transform:
translateX(25px);
transition:
opacity .9s ease .18s,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-ritual-content.kl-ritual-visible{
opacity:1;
transform:
translateX(0);
}
.kl-ritual-small{
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.23em;
}
.kl-ritual-content h2{
margin:
14px 0 18px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(52px,5.5vw,72px);
line-height:.83;
font-weight:400;
letter-spacing:-.045em;
}
.kl-ritual-content h2 em{
display:block;
color:var(--gold);
font-style:italic;
}
.kl-ritual-intro{
max-width:420px;
margin:0 0 31px;
color:
rgba(38,58,24,.54);
font-size:10px;
line-height:1.9;
}
/* =========================================================
STEPS
========================================================= */
.kl-ritual-steps{
border-top:
1px solid
rgba(38,58,24,.1);
}
.kl-ritual-step{
position:relative;
display:grid;
grid-template-columns:
32px 1px 1fr;
gap:15px;
padding:
16px 0;
border-bottom:
1px solid
rgba(38,58,24,.1);
opacity:0;
transform:
translateY(15px);
transition:
opacity .6s ease,
transform .6s ease;
}
.kl-ritual-step:nth-child(2){
transition-delay:.08s;
}
.kl-ritual-step:nth-child(3){
transition-delay:.16s;
}
.kl-ritual-step.kl-ritual-visible{
opacity:1;
transform:
translateY(0);
}
.kl-step-number{
color:
rgba(183,150,78,.7);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:18px;
}
.kl-step-line{
width:1px;
height:100%;
background:
rgba(183,150,78,.35);
}
.kl-step-text small{
display:block;
margin-bottom:3px;
color:
rgba(38,58,24,.4);
font-size:5.5px;
font-weight:700;
letter-spacing:.19em;
}
.kl-step-text h3{
margin:0;
color:var(--green);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:23px;
font-weight:500;
}
.kl-step-text p{
margin:
4px 0 0;
color:
rgba(38,58,24,.42);
font-size:7.5px;
line-height:1.55;
}
/* =========================================================
BUTTON
========================================================= */
.kl-ritual-button{
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:30px;
width:190px;
margin-top:28px;
padding:
12px 13px 12px 17px;
text-decoration:none;
color:#fff;
background:var(--green);
font-size:6.5px;
font-weight:700;
letter-spacing:.15em;
transition:
background .3s ease,
transform .3s ease;
opacity:0;
transform:
translateY(15px);
}
.kl-ritual-button.kl-ritual-visible{
opacity:1;
transform:
translateY(0);
}
.kl-ritual-button:hover{
background:var(--deep);
transform:
translateY(-2px);
}
.kl-ritual-button i{
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:50%;
background:var(--gold-light);
color:var(--green);
font-size:12px;
font-style:normal;
transition:
transform .35s ease;
}
.kl-ritual-button:hover i{
transform:
rotate(45deg);
}
/* =========================================================
BOTTOM
========================================================= */
.kl-ritual-bottom{
display:flex;
align-items:center;
gap:17px;
margin-top:70px;
opacity:0;
transform:
translateY(12px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-ritual-bottom.kl-ritual-visible{
opacity:1;
transform:
translateY(0);
}
.kl-ritual-bottom span{
white-space:nowrap;
color:
rgba(38,58,24,.3);
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-ritual-bottom div{
flex:1;
height:1px;
background:
rgba(183,150,78,.25);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:950px){
.kl-ritual-main{
gap:55px;
}
.kl-ritual-visual{
height:500px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-ritual-wrap{
width:89%;
padding:
65px 0 50px;
}
.kl-ritual-kicker{
margin-bottom:38px;
font-size:6px;
}
.kl-ritual-main{
display:flex;
flex-direction:column;
gap:55px;
}
.kl-ritual-visual{
width:100%;
height:390px;
}
.kl-ritual-image-frame{
left:-9px;
top:9px;
}
.kl-ritual-badge{
right:-5px;
bottom:25px;
padding:
13px 16px;
}
.kl-ritual-badge strong{
font-size:19px;
}
.kl-ritual-content h2{
font-size:48px;
line-height:.86;
}
.kl-ritual-intro{
font-size:9px;
line-height:1.85;
margin-bottom:25px;
}
.kl-ritual-step{
grid-template-columns:
28px 1px 1fr;
gap:12px;
padding:
14px 0;
}
.kl-step-text h3{
font-size:21px;
}
.kl-step-text p{
font-size:7px;
}
.kl-ritual-button{
width:185px;
}
.kl-ritual-bottom{
margin-top:45px;
gap:8px;
}
.kl-ritual-bottom span{
font-size:4.5px;
letter-spacing:.12em;
}
.kl-ritual-leaf{
opacity:.13;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-ritual-visual{
height:360px;
}
.kl-ritual-content h2{
font-size:44px;
}
.kl-ritual-badge{
right:0;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-ritual-leaf,
.kl-steam i{
animation:none !important;
}
.kl-ritual-kicker,
.kl-ritual-visual,
.kl-ritual-content,
.kl-ritual-step,
.kl-ritual-button,
.kl-ritual-bottom{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */