/* Start custom CSS for html, class: .elementor-element-54dc41a *//* =====================================================
KAUSORA LEAF — PREMIUM TOP ANNOUNCEMENT BAR
===================================================== */
.kl-topbar {
--kl-green: #263b18;
--kl-green-deep: #1b2b11;
--kl-gold: #c7a451;
--kl-ivory: #f7f4ea;
width: 100%;
position: relative;
z-index: 9999;
overflow: hidden;
background:
linear-gradient(
90deg,
var(--kl-green-deep) 0%,
var(--kl-green) 35%,
#30491f 50%,
var(--kl-green) 65%,
var(--kl-green-deep) 100%
);
border-bottom: 1px solid rgba(199,164,81,0.38);
box-shadow:
0 3px 18px rgba(0,0,0,0.08),
inset 0 -1px 0 rgba(255,255,255,0.05);
color: var(--kl-ivory);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
}
/* Very subtle premium texture */
.kl-topbar::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 20% 50%,
rgba(199,164,81,0.10),
transparent 28%
),
radial-gradient(
circle at 80% 50%,
rgba(255,255,255,0.045),
transparent 30%
);
pointer-events: none;
}
/* Ticker window */
.kl-ticker {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
/* Moving track */
.kl-ticker-track {
display: flex;
width: max-content;
animation:
klMarquee 30s linear infinite;
will-change: transform;
}
/* Individual repeated set */
.kl-ticker-set {
display: flex;
align-items: center;
flex-shrink: 0;
}
/* Text item */
.kl-ticker-item {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 20px;
font-size: 13px;
line-height: 1;
font-weight: 500;
letter-spacing: 0.045em;
text-transform: none;
color: rgba(247,244,234,0.94);
}
/* Small gold symbol */
.kl-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--kl-gold);
font-size: 15px;
line-height: 1;
transform: translateY(-1px);
text-shadow:
0 0 10px rgba(199,164,81,0.20);
}
/* Divider */
.kl-divider {
display: inline-flex;
align-items: center;
color: var(--kl-gold);
font-size: 14px;
opacity: 0.85;
}
/* Marquee animation */
@keyframes klMarquee {
from {
transform: translate3d(0,0,0);
}
to {
transform: translate3d(-50%,0,0);
}
}
/* Pause on hover / touch */
.kl-topbar.kl-paused .kl-ticker-track {
animation-play-state: paused;
}
/* =====================================================
DESKTOP
===================================================== */
@media (min-width: 769px) {
.kl-ticker-item {
padding-top: 12px;
padding-bottom: 12px;
font-size: 13px;
}
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 768px) {
.kl-ticker-track {
animation-duration: 25s;
}
.kl-ticker-item {
padding: 10px 15px;
font-size: 11px;
letter-spacing: 0.035em;
gap: 7px;
}
.kl-icon {
font-size: 13px;
}
.kl-divider {
font-size: 12px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 480px) {
.kl-ticker-track {
animation-duration: 21s;
}
.kl-ticker-item {
padding: 9px 13px;
font-size: 10px;
letter-spacing: 0.025em;
}
.kl-icon {
font-size: 12px;
}
.kl-divider {
font-size: 11px;
}
}
/* =====================================================
ACCESSIBILITY
===================================================== */
@media (prefers-reduced-motion: reduce) {
.kl-ticker-track {
animation: none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5c940f0 *//* =========================================================
KAUSORA LEAF
SECTION 01 — FULL WIDTH HERO BANNER
========================================================= */
.kl-hero-slider{
position:relative;
width:100%;
max-width:100%;
height:
clamp(380px, 34vw, 540px);
margin:0;
padding:0;
overflow:hidden;
background:#f7f5ed;
}
/* =========================================================
TRACK
========================================================= */
.kl-slider-track{
position:relative;
width:100%;
height:100%;
}
/* =========================================================
SLIDES
========================================================= */
.kl-slide{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
opacity:0;
visibility:hidden;
z-index:0;
overflow:hidden;
text-decoration:none !important;
transition:
opacity .7s ease,
visibility .7s ease;
}
.kl-slide.active{
opacity:1;
visibility:visible;
z-index:1;
}
/* =========================================================
IMAGES
========================================================= */
.kl-banner-desktop,
.kl-banner-mobile{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transform:
scale(1.01);
transition:
transform 6s
cubic-bezier(.2,.6,.2,1);
}
.kl-slide.active
.kl-banner-desktop,
.kl-slide.active
.kl-banner-mobile{
transform:
scale(1.035);
}
/* =========================================================
MOBILE IMAGE
========================================================= */
.kl-banner-mobile{
display:none;
}
/* =========================================================
ARROWS
========================================================= */
.kl-slider-arrow{
position:absolute;
top:50%;
z-index:10;
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
padding:0;
border:
1px solid
rgba(255,255,255,.65);
border-radius:50%;
color:#263A18;
background:
rgba(255,255,255,.82);
backdrop-filter:
blur(8px);
-webkit-backdrop-filter:
blur(8px);
cursor:pointer;
transform:
translateY(-50%);
transition:
background .3s ease,
color .3s ease,
transform .3s ease,
border-color .3s ease;
}
.kl-slider-prev{
left:25px;
}
.kl-slider-next{
right:25px;
}
.kl-slider-arrow span{
display:block;
font-family:
Arial,
sans-serif;
font-size:17px;
line-height:1;
transition:
transform .3s ease;
}
.kl-slider-arrow:hover{
color:#fff;
background:#263A18;
border-color:#263A18;
}
.kl-slider-prev:hover{
transform:
translateY(-50%)
translateX(-3px);
}
.kl-slider-next:hover{
transform:
translateY(-50%)
translateX(3px);
}
/* =========================================================
DOTS
========================================================= */
.kl-slider-dots{
position:absolute;
left:50%;
bottom:20px;
z-index:10;
display:flex;
align-items:center;
gap:7px;
transform:
translateX(-50%);
}
.kl-slider-dot{
width:7px;
height:7px;
padding:0;
border:0;
border-radius:50%;
background:
rgba(255,255,255,.55);
cursor:pointer;
transition:
width .35s ease,
background .35s ease,
transform .35s ease;
}
.kl-slider-dot.active{
width:24px;
border-radius:10px;
background:#C7A451;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:1024px){
.kl-hero-slider{
height:
clamp(330px, 38vw, 450px);
}
.kl-slider-prev{
left:18px;
}
.kl-slider-next{
right:18px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767px){
.kl-hero-slider{
height:
clamp(360px, 105vw, 520px);
}
/* Hide desktop image */
.kl-banner-desktop{
display:none;
}
/* Show mobile image */
.kl-banner-mobile{
display:block;
}
/* Mobile image positioning */
.kl-banner-mobile{
object-position:center;
}
.kl-slide.active
.kl-banner-mobile{
transform:
scale(1.025);
}
/* Smaller arrows */
.kl-slider-arrow{
width:36px;
height:36px;
background:
rgba(255,255,255,.9);
}
.kl-slider-arrow span{
font-size:14px;
}
.kl-slider-prev{
left:12px;
}
.kl-slider-next{
right:12px;
}
.kl-slider-dots{
bottom:13px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:390px){
.kl-hero-slider{
height:
390px;
}
.kl-slider-arrow{
width:33px;
height:33px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.kl-slider-arrow:focus-visible,
.kl-slider-dot:focus-visible{
outline:
2px solid #C7A451;
outline-offset:3px;
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion:reduce){
.kl-slide,
.kl-banner-desktop,
.kl-banner-mobile,
.kl-slider-arrow,
.kl-slider-dot{
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a6c29ac *//* =========================================================
KAUSORA LEAF
SECTION 02 — QUALITY STRIP
========================================================= */
.kl-quality-strip{
--forest:#263A18;
--deep:#17250F;
--gold:#C7A451;
--gold-light:#DFC476;
--cream:#F7F6F0;
--line:rgba(38,58,24,.13);
position:relative;
width:100%;
padding:
0 6vw;
background:#fff;
overflow:hidden;
}
/* =========================================================
INNER
========================================================= */
.kl-quality-inner{
position:relative;
display:grid;
grid-template-columns:
repeat(4,1fr);
max-width:1380px;
margin:0 auto;
border-left:
1px solid var(--line);
}
/* =========================================================
CARD
========================================================= */
.kl-quality-card{
position:relative;
min-height:245px;
padding:
32px 32px 30px;
border-right:
1px solid var(--line);
background:#fff;
overflow:hidden;
cursor:default;
opacity:0;
transform:
translateY(25px);
transition:
background .45s ease,
color .45s ease,
transform .65s
cubic-bezier(.2,.7,.2,1),
opacity .65s ease;
}
/* stagger animation */
.kl-quality-card:nth-child(1){
transition-delay:.05s;
}
.kl-quality-card:nth-child(2){
transition-delay:.12s;
}
.kl-quality-card:nth-child(3){
transition-delay:.19s;
}
.kl-quality-card:nth-child(4){
transition-delay:.26s;
}
.kl-quality-visible
.kl-quality-card{
opacity:1;
transform:
translateY(0);
}
/* =========================================================
TOP
========================================================= */
.kl-quality-top{
position:relative;
z-index:3;
display:flex;
align-items:flex-start;
justify-content:space-between;
}
.kl-quality-number{
color:
rgba(38,58,24,.32);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:8px;
font-weight:700;
letter-spacing:.14em;
transition:
color .35s ease;
}
.kl-quality-icon{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border:
1px solid
rgba(38,58,24,.16);
border-radius:50%;
background:
rgba(247,246,240,.6);
transition:
background .45s ease,
border-color .45s ease,
transform .55s
cubic-bezier(.2,.8,.2,1);
}
.kl-quality-icon svg{
width:25px;
height:25px;
fill:none;
stroke:var(--forest);
stroke-width:1.35;
stroke-linecap:round;
stroke-linejoin:round;
transition:
stroke .35s ease,
transform .45s ease;
}
/* =========================================================
CONTENT
========================================================= */
.kl-quality-content{
position:relative;
z-index:3;
margin-top:42px;
}
.kl-quality-content h3{
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:
clamp(27px,2.3vw,36px);
font-weight:400;
line-height:.88;
letter-spacing:-.025em;
transition:
color .35s ease,
transform .45s
cubic-bezier(.2,.8,.2,1);
}
.kl-quality-content h3 em{
color:var(--gold);
font-style:italic;
transition:
color .35s ease;
}
.kl-quality-content p{
max-width:220px;
margin:
14px 0 0;
color:
rgba(38,58,24,.52);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:9px;
line-height:1.7;
transition:
color .35s ease;
}
/* =========================================================
GOLD HOVER LINE
========================================================= */
.kl-quality-hover-line{
position:absolute;
left:0;
bottom:0;
width:100%;
height:3px;
background:var(--gold);
transform:
scaleX(0);
transform-origin:left;
transition:
transform .5s
cubic-bezier(.2,.8,.2,1);
}
/* =========================================================
DECORATIVE BACKGROUND
========================================================= */
.kl-quality-card::before{
content:"";
position:absolute;
right:-55px;
bottom:-70px;
width:180px;
height:180px;
border:
1px solid
rgba(199,164,81,.15);
border-radius:50%;
transform:
scale(.5);
opacity:0;
transition:
transform .65s
cubic-bezier(.2,.8,.2,1),
opacity .45s ease;
}
.kl-quality-card::after{
content:"";
position:absolute;
right:25px;
bottom:20px;
width:7px;
height:7px;
border-radius:50%;
background:var(--gold);
opacity:0;
transform:
translateY(10px);
transition:
opacity .35s ease,
transform .45s ease;
}
/* =========================================================
DESKTOP HOVER
========================================================= */
@media (min-width:768px){
.kl-quality-card:hover{
z-index:5;
color:#fff;
background:var(--forest);
transform:
translateY(-8px);
box-shadow:
0 22px 45px
rgba(38,58,24,.16);
}
.kl-quality-card:hover
.kl-quality-number{
color:
rgba(255,255,255,.45);
}
.kl-quality-card:hover
.kl-quality-icon{
background:var(--gold);
border-color:var(--gold);
transform:
rotate(-8deg)
scale(1.08);
}
.kl-quality-card:hover
.kl-quality-icon svg{
stroke:var(--forest);
transform:
rotate(8deg)
scale(1.08);
}
.kl-quality-card:hover
.kl-quality-content h3{
color:#fff;
transform:
translateX(4px);
}
.kl-quality-card:hover
.kl-quality-content h3 em{
color:var(--gold-light);
}
.kl-quality-card:hover
.kl-quality-content p{
color:
rgba(255,255,255,.65);
}
.kl-quality-card:hover
.kl-quality-hover-line{
transform:
scaleX(1);
}
.kl-quality-card:hover::before{
opacity:1;
transform:
scale(1);
}
.kl-quality-card:hover::after{
opacity:1;
transform:
translateY(0);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:1024px){
.kl-quality-strip{
padding:
0 25px;
}
.kl-quality-card{
min-height:230px;
padding:
27px 22px;
}
.kl-quality-content{
margin-top:35px;
}
.kl-quality-content h3{
font-size:28px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767px){
.kl-quality-strip{
padding:
0 15px;
}
.kl-quality-inner{
grid-template-columns:
repeat(2,1fr);
border-left:
1px solid var(--line);
}
.kl-quality-card{
min-height:220px;
padding:
24px 19px;
}
.kl-quality-card:nth-child(1),
.kl-quality-card:nth-child(2){
border-bottom:
1px solid var(--line);
}
.kl-quality-content{
margin-top:32px;
}
.kl-quality-content h3{
font-size:
clamp(25px,7vw,32px);
}
.kl-quality-content p{
font-size:8px;
line-height:1.65;
}
.kl-quality-icon{
width:42px;
height:42px;
}
.kl-quality-icon svg{
width:22px;
height:22px;
}
/* Mobile active state */
.kl-quality-touch{
color:#fff;
background:var(--forest);
}
.kl-quality-touch
.kl-quality-number{
color:
rgba(255,255,255,.45);
}
.kl-quality-touch
.kl-quality-icon{
background:var(--gold);
border-color:var(--gold);
transform:
rotate(-6deg)
scale(1.05);
}
.kl-quality-touch
.kl-quality-icon svg{
stroke:var(--forest);
}
.kl-quality-touch
.kl-quality-content h3{
color:#fff;
}
.kl-quality-touch
.kl-quality-content h3 em{
color:var(--gold-light);
}
.kl-quality-touch
.kl-quality-content p{
color:
rgba(255,255,255,.65);
}
.kl-quality-touch
.kl-quality-hover-line{
transform:
scaleX(1);
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:390px){
.kl-quality-card{
min-height:205px;
padding:
20px 15px;
}
.kl-quality-content{
margin-top:27px;
}
.kl-quality-content h3{
font-size:24px;
}
.kl-quality-content p{
font-size:7.5px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion:reduce){
.kl-quality-card,
.kl-quality-card *,
.kl-quality-strip{
animation:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3b8ed16 *//* =========================================================
KAUSORA LEAF
SECTION 03 — FROM THE HEART OF KAUSANI
========================================================= */
.kl-story-section{
--forest:#263A18;
--deep:#17250F;
--gold:#C7A451;
--gold-light:#DFC476;
--cream:#F6F4EC;
--line:rgba(38,58,24,.13);
position:relative;
width:100%;
padding:
105px 6vw
85px;
overflow:hidden;
background:#fff;
color:var(--forest);
isolation:isolate;
}
/* =========================================================
FALLING LEAVES CONTAINER
========================================================= */
.kl-falling-leaves{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
overflow:hidden;
}
/* =========================================================
INDIVIDUAL TEA LEAF
========================================================= */
.kl-falling-leaf{
position:absolute;
top:-30px;
display:block;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#5F783D,
#263A18
);
opacity:.30;
transform:
rotate(25deg);
animation:
klLeafFall
var(--leaf-duration)
linear
var(--leaf-delay)
infinite;
}
/* leaf vein */
.kl-falling-leaf::after{
content:"";
position:absolute;
left:18%;
top:47%;
width:70%;
height:1px;
background:
rgba(255,255,255,.30);
transform:
rotate(-18deg);
}
/* =========================================================
LEAF ANIMATION
========================================================= */
@keyframes klLeafFall{
0%{
transform:
translate3d(0,-40px,0)
rotate(0deg);
opacity:0;
}
10%{
opacity:.30;
}
45%{
transform:
translate3d(
var(--leaf-drift),
45vh,
0
)
rotate(
var(--leaf-rotation)
);
}
75%{
transform:
translate3d(
calc(var(--leaf-drift) * -.45),
78vh,
0
)
rotate(
calc(
var(--leaf-rotation) * -1
)
);
opacity:.25;
}
100%{
transform:
translate3d(
var(--leaf-drift),
110vh,
0
)
rotate(
calc(
var(--leaf-rotation) + 180deg
)
);
opacity:0;
}
}
/* =========================================================
CONTENT CONTAINER
========================================================= */
.kl-story-container{
position:relative;
z-index:3;
display:grid;
grid-template-columns:
minmax(400px,1.05fr)
minmax(380px,.95fr);
align-items:center;
gap:
clamp(55px,8vw,125px);
max-width:1250px;
margin:0 auto;
}
/* =========================================================
IMAGE
========================================================= */
.kl-story-image-wrap{
position:relative;
}
.kl-story-image{
position:relative;
width:100%;
aspect-ratio:
1 / .88;
overflow:hidden;
background:var(--cream);
}
.kl-story-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transform:
scale(1);
transition:
transform
1.2s
cubic-bezier(.2,.7,.2,1);
}
/* image subtle frame */
.kl-story-image::before{
content:"";
position:absolute;
z-index:3;
inset:14px;
border:
1px solid
rgba(255,255,255,.55);
pointer-events:none;
}
/* image gold corner */
.kl-story-image::after{
content:"";
position:absolute;
z-index:4;
left:-1px;
bottom:28px;
width:65px;
height:2px;
background:var(--gold);
}
/* =========================================================
IMAGE OVERLAY
========================================================= */
.kl-story-image-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
to top,
rgba(20,30,12,.42),
transparent 42%
);
pointer-events:none;
}
/* =========================================================
LOCATION
========================================================= */
.kl-story-location{
position:absolute;
z-index:5;
left:28px;
bottom:24px;
display:flex;
align-items:center;
gap:9px;
color:#fff;
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.17em;
}
.kl-location-dot{
width:6px;
height:6px;
border-radius:50%;
background:var(--gold);
box-shadow:
0 0 0 4px
rgba(199,164,81,.18);
}
/* =========================================================
STORY CONTENT
========================================================= */
.kl-story-content{
position:relative;
max-width:510px;
}
.kl-story-label{
display:flex;
align-items:center;
gap:10px;
margin-bottom:17px;
color:var(--gold);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:8px;
font-weight:700;
letter-spacing:.22em;
}
.kl-story-label span{
width:32px;
height:1px;
background:var(--gold);
}
/* =========================================================
HEADING
========================================================= */
.kl-story-content h2{
max-width:500px;
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:
clamp(50px,5.3vw,76px);
font-weight:400;
line-height:.82;
letter-spacing:-.045em;
}
.kl-story-content h2 em{
display:block;
color:var(--gold);
font-style:italic;
}
/* =========================================================
COPY
========================================================= */
.kl-story-copy{
max-width:425px;
margin:
28px 0 27px;
}
.kl-story-copy p{
margin:
0 0 13px;
color:
rgba(38,58,24,.56);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:10px;
line-height:1.8;
}
.kl-story-copy p:last-child{
margin-bottom:0;
}
/* =========================================================
BUTTON
========================================================= */
.kl-story-button{
display:inline-flex;
align-items:center;
gap:12px;
padding:
9px 9px 9px 17px;
color:#fff;
background:var(--forest);
text-decoration:none !important;
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.14em;
transition:
background .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.kl-story-button i{
display:flex;
align-items:center;
justify-content:center;
width:25px;
height:25px;
color:var(--forest);
background:var(--gold);
font-style:normal;
transition:
transform .35s ease;
}
.kl-story-button:hover{
color:#fff;
background:var(--deep);
transform:
translateY(-3px);
box-shadow:
0 12px 25px
rgba(38,58,24,.15);
}
.kl-story-button:hover i{
transform:
rotate(45deg);
}
/* =========================================================
FACTS
========================================================= */
.kl-story-facts{
display:grid;
grid-template-columns:
repeat(3,1fr);
max-width:480px;
margin-top:42px;
border-top:
1px solid var(--line);
}
.kl-story-fact{
position:relative;
padding:
17px 12px 5px 0;
border-right:
1px solid var(--line);
}
.kl-story-fact:not(:first-child){
padding-left:17px;
}
.kl-story-fact:last-child{
border-right:0;
}
.kl-fact-number{
display:block;
margin-bottom:9px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
}
.kl-story-fact strong{
display:block;
margin-bottom:5px;
color:var(--forest);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
letter-spacing:.11em;
}
.kl-story-fact small{
display:block;
color:
rgba(38,58,24,.42);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
}
/* =========================================================
BOTTOM LINE
========================================================= */
.kl-story-bottom{
position:relative;
z-index:3;
display:flex;
align-items:center;
justify-content:center;
gap:20px;
max-width:1250px;
margin:
75px auto 0;
}
.kl-story-bottom span{
width:65px;
height:1px;
background:var(--line);
}
.kl-story-bottom p{
margin:0;
color:
rgba(38,58,24,.43);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:17px;
font-style:italic;
}
.kl-story-bottom em{
color:var(--gold);
}
/* =========================================================
SCROLL REVEAL
========================================================= */
.kl-story-image-wrap,
.kl-story-content,
.kl-story-bottom{
opacity:0;
transform:
translateY(30px);
transition:
opacity .9s ease,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-story-visible
.kl-story-image-wrap{
opacity:1;
transform:translateY(0);
}
.kl-story-visible
.kl-story-content{
opacity:1;
transform:translateY(0);
transition-delay:.12s;
}
.kl-story-visible
.kl-story-bottom{
opacity:1;
transform:translateY(0);
transition-delay:.25s;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:1050px){
.kl-story-section{
padding:
90px 35px
75px;
}
.kl-story-container{
grid-template-columns:
1fr 1fr;
gap:50px;
}
.kl-story-content h2{
font-size:57px;
}
.kl-story-copy{
margin-top:22px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767px){
.kl-story-section{
padding:
75px 20px
60px;
}
/* fewer leaves */
.kl-falling-leaves{
opacity:.75;
}
/* MAIN */
.kl-story-container{
display:flex;
flex-direction:column;
gap:40px;
}
/* IMAGE */
.kl-story-image-wrap{
width:100%;
}
.kl-story-image{
aspect-ratio:
1 / 1.05;
}
.kl-story-image::before{
inset:10px;
}
.kl-story-location{
left:21px;
bottom:19px;
font-size:6px;
}
/* CONTENT */
.kl-story-content{
width:100%;
max-width:none;
}
.kl-story-label{
font-size:7px;
gap:8px;
}
.kl-story-label span{
width:24px;
}
.kl-story-content h2{
font-size:
clamp(47px,13vw,61px);
line-height:.84;
}
.kl-story-copy{
max-width:100%;
margin:
22px 0 24px;
}
.kl-story-copy p{
font-size:9px;
line-height:1.75;
}
.kl-story-button{
font-size:6.5px;
}
/* FACTS */
.kl-story-facts{
width:100%;
margin-top:35px;
}
.kl-story-fact{
padding-top:15px;
}
.kl-story-fact:not(:first-child){
padding-left:11px;
}
.kl-story-fact strong{
font-size:6.5px;
}
.kl-story-fact small{
font-size:6.5px;
}
/* BOTTOM */
.kl-story-bottom{
margin-top:50px;
gap:10px;
}
.kl-story-bottom span{
width:25px;
}
.kl-story-bottom p{
font-size:14px;
text-align:center;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:390px){
.kl-story-section{
padding:
65px 16px
50px;
}
.kl-story-container{
gap:32px;
}
.kl-story-content h2{
font-size:45px;
}
.kl-story-fact:not(:first-child){
padding-left:8px;
}
.kl-story-fact small{
font-size:6px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion:reduce){
.kl-story-section *,
.kl-story-section{
animation:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-969f3d2 *//* =========================================================
KAUSORA LEAF
SECTION 04 — TEA & WELLNESS
========================================================= */
.kl-wellness{
--forest:#263A18;
--deep:#17250F;
--gold:#C7A451;
--gold-light:#DFC476;
--cream:#F6F4EC;
--line:rgba(38,58,24,.13);
position:relative;
width:100%;
padding:
110px 6vw
85px;
overflow:hidden;
background:#F8F7F2;
color:var(--forest);
}
/* =========================================================
HEADER
========================================================= */
.kl-wellness-header{
max-width:650px;
margin:
0 auto 55px;
text-align:center;
}
.kl-wellness-eyebrow{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:16px;
color:var(--gold);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:8px;
font-weight:700;
letter-spacing:.23em;
}
.kl-wellness-eyebrow span{
width:28px;
height:1px;
background:var(--gold);
}
.kl-wellness-header h2{
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:
clamp(48px,5vw,70px);
font-weight:400;
line-height:.86;
letter-spacing:-.04em;
}
.kl-wellness-header h2 em{
color:var(--gold);
font-style:italic;
}
.kl-wellness-header p{
max-width:430px;
margin:
18px auto 0;
color:
rgba(38,58,24,.53);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:9px;
line-height:1.75;
}
/* =========================================================
GRID
========================================================= */
.kl-wellness-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:12px;
max-width:1300px;
margin:0 auto;
}
/* =========================================================
CARD
========================================================= */
.kl-wellness-card{
position:relative;
min-height:510px;
overflow:hidden;
background:#fff;
border:
1px solid
rgba(38,58,24,.10);
cursor:pointer;
opacity:0;
transform:
translateY(30px);
transition:
opacity .7s ease,
transform .7s
cubic-bezier(.2,.7,.2,1),
box-shadow .4s ease;
}
.kl-wellness-card:nth-child(1){
transition-delay:.05s;
}
.kl-wellness-card:nth-child(2){
transition-delay:.12s;
}
.kl-wellness-card:nth-child(3){
transition-delay:.19s;
}
.kl-wellness-card:nth-child(4){
transition-delay:.26s;
}
.kl-wellness-visible
.kl-wellness-card{
opacity:1;
transform:
translateY(0);
}
.kl-wellness-card:hover{
box-shadow:
0 20px 45px
rgba(38,58,24,.13);
}
/* =========================================================
IMAGE
========================================================= */
.kl-wellness-image{
position:relative;
width:100%;
height:250px;
overflow:hidden;
background:#EDEBE2;
}
.kl-wellness-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:
transform .8s
cubic-bezier(.2,.7,.2,1);
}
.kl-wellness-card:hover
.kl-wellness-image img{
transform:
scale(1.07);
}
/* =========================================================
IMAGE OVERLAY
========================================================= */
.kl-wellness-image::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
to bottom,
rgba(20,30,12,.12),
transparent 55%
);
pointer-events:none;
}
/* =========================================================
NUMBER
========================================================= */
.kl-wellness-number{
position:absolute;
left:17px;
top:17px;
z-index:3;
color:#fff;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.15em;
opacity:.8;
}
/* =========================================================
PLUS
========================================================= */
.kl-wellness-plus{
position:absolute;
right:15px;
top:15px;
z-index:4;
display:flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border:
1px solid
rgba(255,255,255,.65);
border-radius:50%;
color:#fff;
font-family:Arial,sans-serif;
font-size:16px;
font-weight:300;
background:
rgba(38,58,24,.18);
backdrop-filter:
blur(5px);
transition:
background .35s ease,
transform .45s ease;
}
.kl-wellness-card:hover
.kl-wellness-plus{
background:var(--gold);
color:var(--forest);
border-color:var(--gold);
transform:
rotate(45deg);
}
/* =========================================================
INFO
========================================================= */
.kl-wellness-info{
position:relative;
min-height:260px;
padding:
28px 25px 24px;
}
.kl-wellness-type{
display:block;
margin-bottom:12px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.20em;
}
.kl-wellness-info h3{
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:
clamp(29px,2.6vw,38px);
font-weight:400;
line-height:.86;
letter-spacing:-.03em;
}
.kl-wellness-info h3 em{
display:block;
color:var(--gold);
font-style:italic;
}
.kl-wellness-info p{
max-width:250px;
margin:
17px 0 20px;
color:
rgba(38,58,24,.52);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:8.5px;
line-height:1.75;
}
/* =========================================================
BENEFITS
========================================================= */
.kl-benefits{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.kl-benefits span{
display:inline-flex;
align-items:center;
min-height:25px;
padding:
5px 8px;
border:
1px solid
rgba(38,58,24,.12);
color:
rgba(38,58,24,.58);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6.5px;
line-height:1.2;
transition:
color .3s ease,
background .3s ease,
border-color .3s ease;
}
.kl-wellness-card:hover
.kl-benefits span{
color:var(--forest);
background:
rgba(199,164,81,.13);
border-color:
rgba(199,164,81,.35);
}
/* =========================================================
ACTIVE GOLD LINE
========================================================= */
.kl-wellness-card::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:3px;
background:var(--gold);
transform:
scaleX(0);
transform-origin:left;
transition:
transform .5s
cubic-bezier(.2,.8,.2,1);
}
.kl-wellness-card:hover::after,
.kl-wellness-card.active::after{
transform:
scaleX(1);
}
/* =========================================================
NOTE
========================================================= */
.kl-wellness-note{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
max-width:600px;
margin:
28px auto 0;
}
.kl-wellness-note span{
color:var(--gold);
font-size:9px;
}
.kl-wellness-note p{
margin:0;
color:
rgba(38,58,24,.36);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
line-height:1.6;
text-align:center;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1050px){
.kl-wellness{
padding:
90px 30px
75px;
}
.kl-wellness-grid{
grid-template-columns:
repeat(2,1fr);
gap:14px;
}
.kl-wellness-card{
min-height:470px;
}
.kl-wellness-info h3{
font-size:34px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-wellness{
padding:
75px 18px
60px;
}
.kl-wellness-header{
margin-bottom:35px;
}
.kl-wellness-eyebrow{
font-size:7px;
}
.kl-wellness-header h2{
font-size:
clamp(43px,12vw,57px);
}
.kl-wellness-header p{
max-width:320px;
font-size:8.5px;
}
/* GRID */
.kl-wellness-grid{
grid-template-columns:
repeat(2,1fr);
gap:9px;
}
/* CARD */
.kl-wellness-card{
min-height:390px;
}
/* IMAGE */
.kl-wellness-image{
height:185px;
}
.kl-wellness-number{
left:12px;
top:12px;
}
.kl-wellness-plus{
right:10px;
top:10px;
width:27px;
height:27px;
font-size:14px;
}
/* INFO */
.kl-wellness-info{
min-height:205px;
padding:
20px 15px 18px;
}
.kl-wellness-type{
font-size:6px;
margin-bottom:9px;
}
.kl-wellness-info h3{
font-size:
clamp(24px,7vw,30px);
}
.kl-wellness-info p{
margin:
13px 0 15px;
font-size:7.5px;
line-height:1.65;
}
.kl-benefits{
gap:4px;
}
.kl-benefits span{
min-height:22px;
padding:
4px 6px;
font-size:5.8px;
}
.kl-wellness-note{
padding:
0 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-wellness{
padding:
65px 13px
50px;
}
.kl-wellness-grid{
gap:7px;
}
.kl-wellness-card{
min-height:365px;
}
.kl-wellness-image{
height:165px;
}
.kl-wellness-info{
min-height:200px;
padding:
17px 12px;
}
.kl-wellness-info h3{
font-size:22px;
}
.kl-wellness-info p{
font-size:7px;
}
.kl-benefits span{
font-size:5.4px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-wellness *,
.kl-wellness{
animation:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d932dbb *//* =========================================================
KAUSORA LEAF
OUR PRODUCTS — PREMIUM B2B COLLECTION
========================================================= */
.kl-products{
--forest:#263A18;
--deep:#17250F;
--gold:#C7A451;
--gold-light:#DFC476;
--cream:#F6F4EC;
--line:rgba(38,58,24,.12);
position:relative;
width:100%;
padding:
110px 6vw
95px;
overflow:hidden;
background:#F;
color:var(--forest);
isolation:isolate;
}
/* =========================================================
FALLING LEAVES LAYER
========================================================= */
.kl-products-leaves{
position:absolute;
inset:0;
z-index:20;
pointer-events:none;
overflow:hidden;
}
/* =========================================================
INDIVIDUAL TEA LEAF
========================================================= */
.kl-product-leaf{
position:absolute;
top:-45px;
display:block;
width:16px;
height:8px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#7D9655 0%,
#526D32 45%,
#263A18 100%
);
opacity:0;
box-shadow:
0 2px 6px
rgba(38,58,24,.13);
will-change:
transform,
opacity;
animation:
klProductLeafFall
var(--leaf-duration)
linear
var(--leaf-delay)
infinite;
}
/* =========================================================
TEA LEAF VEIN
========================================================= */
.kl-product-leaf::after{
content:"";
position:absolute;
left:12%;
top:47%;
width:76%;
height:1px;
background:
rgba(255,255,255,.45);
transform:
rotate(-18deg);
}
/* =========================================================
FALLING ANIMATION
========================================================= */
@keyframes klProductLeafFall{
0%{
transform:
translate3d(
0,
-50px,
0
)
rotate(0deg)
scale(.65);
opacity:0;
}
8%{
opacity:.58;
}
30%{
transform:
translate3d(
calc(
var(--leaf-drift) * .35
),
30vh,
0
)
rotate(150deg)
scale(1);
opacity:.58;
}
55%{
transform:
translate3d(
var(--leaf-drift),
55vh,
0
)
rotate(290deg)
scale(.9);
opacity:.50;
}
78%{
transform:
translate3d(
calc(
var(--leaf-drift) * -.4
),
78vh,
0
)
rotate(430deg)
scale(1.05);
opacity:.35;
}
100%{
transform:
translate3d(
var(--leaf-drift),
115vh,
0
)
rotate(620deg)
scale(.7);
opacity:0;
}
}
/* =========================================================
HEADER
========================================================= */
.kl-products-header{
position:relative;
z-index:5;
max-width:650px;
margin:
0 auto 45px;
text-align:center;
}
.kl-products-eyebrow{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:17px;
color:var(--gold);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:8px;
font-weight:700;
letter-spacing:.23em;
}
.kl-products-eyebrow span{
width:28px;
height:1px;
background:var(--gold);
}
.kl-products-header h2{
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:
clamp(50px,5.3vw,74px);
font-weight:400;
line-height:.84;
letter-spacing:-.045em;
}
.kl-products-header h2 em{
color:var(--gold);
font-style:italic;
}
.kl-products-header p{
max-width:480px;
margin:
18px auto 0;
color:
rgba(38,58,24,.52);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:9px;
line-height:1.8;
}
/* =========================================================
FILTERS
========================================================= */
.kl-product-filters{
position:relative;
z-index:25;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
margin:
0 auto 40px;
}
.kl-filter{
padding:
9px 17px;
border:
1px solid
rgba(38,58,24,.14);
border-radius:30px;
color:
rgba(38,58,24,.58);
background:
rgba(255,255,255,.7);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:7px;
font-weight:600;
letter-spacing:.08em;
cursor:pointer;
transition:
background .3s ease,
color .3s ease,
border-color .3s ease,
transform .3s ease;
}
.kl-filter:hover{
color:var(--forest);
border-color:var(--gold);
transform:
translateY(-2px);
}
.kl-filter.active{
color:#fff;
background:var(--forest);
border-color:var(--forest);
}
/* =========================================================
PRODUCT GRID
========================================================= */
.kl-products-grid{
position:relative;
z-index:5;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:20px;
max-width:1320px;
margin:0 auto;
}
/* =========================================================
PRODUCT CARD
========================================================= */
.kl-product-card{
position:relative;
z-index:5;
background:#fff;
border:
1px solid
rgba(38,58,24,.09);
opacity:0;
transform:
translateY(28px);
transition:
opacity .7s ease,
transform .7s
cubic-bezier(.2,.7,.2,1),
box-shadow .4s ease;
}
.kl-product-card:nth-child(1){
transition-delay:.03s;
}
.kl-product-card:nth-child(2){
transition-delay:.06s;
}
.kl-product-card:nth-child(3){
transition-delay:.09s;
}
.kl-product-card:nth-child(4){
transition-delay:.12s;
}
.kl-product-card:nth-child(5){
transition-delay:.15s;
}
.kl-product-card:nth-child(6){
transition-delay:.18s;
}
.kl-product-card:nth-child(7){
transition-delay:.21s;
}
.kl-product-card:nth-child(8){
transition-delay:.24s;
}
.kl-products-visible
.kl-product-card{
opacity:1;
transform:
translateY(0);
}
.kl-product-card:hover{
z-index:8;
box-shadow:
0 20px 45px
rgba(38,58,24,.13);
}
/* =========================================================
PRODUCT IMAGE
========================================================= */
.kl-product-image{
position:relative;
z-index:6;
display:block;
width:100%;
aspect-ratio:
1 / 1.13;
overflow:hidden;
background:
linear-gradient(
145deg,
#F8F7F1,
#ECE9DE
);
text-decoration:none !important;
}
.kl-product-image img{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:
opacity .55s ease,
transform .8s
cubic-bezier(.2,.7,.2,1);
}
.kl-product-primary{
opacity:1;
transform:
scale(1);
}
.kl-product-secondary{
opacity:0;
transform:
scale(1.035);
}
.kl-product-card:hover
.kl-product-primary{
opacity:0;
}
.kl-product-card:hover
.kl-product-secondary{
opacity:1;
transform:
scale(1.06);
}
/* =========================================================
PRODUCT NUMBER
========================================================= */
.kl-product-number{
position:absolute;
left:14px;
top:14px;
z-index:8;
display:flex;
align-items:center;
justify-content:center;
width:27px;
height:27px;
border-radius:50%;
color:#fff;
background:
rgba(38,58,24,.78);
backdrop-filter:
blur(6px);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
}
/* =========================================================
VIEW BUTTON
========================================================= */
.kl-product-view{
position:absolute;
right:14px;
bottom:14px;
z-index:9;
display:flex;
align-items:center;
gap:6px;
padding:
6px 6px 6px 10px;
color:var(--forest);
background:
rgba(255,255,255,.93);
backdrop-filter:
blur(8px);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.12em;
opacity:0;
transform:
translateY(8px);
transition:
opacity .35s ease,
transform .35s ease;
}
.kl-product-view i{
display:flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
color:var(--forest);
background:var(--gold);
font-style:normal;
}
.kl-product-card:hover
.kl-product-view{
opacity:1;
transform:
translateY(0);
}
/* =========================================================
PRODUCT DETAILS
========================================================= */
.kl-product-details{
position:relative;
z-index:7;
padding:
18px 18px 17px;
background:#fff;
}
.kl-product-type{
display:block;
margin-bottom:7px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.18em;
}
.kl-product-details h3{
min-height:38px;
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:23px;
font-weight:500;
line-height:.95;
}
.kl-product-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:14px;
padding-top:11px;
border-top:
1px solid var(--line);
}
.kl-product-bottom > span{
color:
rgba(38,58,24,.4);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:600;
letter-spacing:.1em;
}
.kl-product-bottom a{
color:var(--forest);
text-decoration:none !important;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.10em;
transition:
color .3s ease,
transform .3s ease;
}
.kl-product-bottom a:hover{
color:var(--gold);
}
/* =========================================================
FILTER HIDDEN
========================================================= */
.kl-product-hidden{
display:none !important;
}
/* =========================================================
BULK CTA
========================================================= */
.kl-products-cta{
position:relative;
z-index:7;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
max-width:1320px;
margin:
55px auto 0;
padding:
30px 35px;
background:var(--forest);
}
.kl-products-cta > div > span{
display:block;
margin-bottom:8px;
color:
rgba(255,255,255,.48);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.17em;
}
.kl-products-cta h3{
margin:0;
color:#fff;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(30px,3vw,42px);
font-weight:400;
line-height:.9;
}
.kl-products-cta h3 em{
color:var(--gold-light);
font-style:italic;
}
.kl-products-cta-button{
display:inline-flex;
align-items:center;
gap:10px;
flex-shrink:0;
padding:
8px 8px 8px 16px;
color:var(--forest);
background:#fff;
text-decoration:none !important;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.13em;
transition:
transform .3s ease,
background .3s ease;
}
.kl-products-cta-button i{
display:flex;
align-items:center;
justify-content:center;
width:25px;
height:25px;
background:var(--gold);
font-style:normal;
}
.kl-products-cta-button:hover{
color:#fff;
background:var(--deep);
transform:
translateY(-3px);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1050px){
.kl-products{
padding:
90px 30px
80px;
}
.kl-products-grid{
grid-template-columns:
repeat(3,1fr);
gap:15px;
}
.kl-product-details h3{
font-size:21px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-products{
padding:
75px 14px
65px;
}
/* Leaves remain visible */
.kl-products-leaves{
z-index:20;
}
.kl-products-header{
margin-bottom:28px;
}
.kl-products-header h2{
font-size:
clamp(44px,12vw,58px);
}
.kl-products-header p{
padding:
0 8px;
font-size:8.5px;
}
/* FILTER SCROLL */
.kl-product-filters{
justify-content:flex-start;
overflow-x:auto;
padding:
2px 2px 8px;
margin-bottom:25px;
scrollbar-width:none;
}
.kl-product-filters::-webkit-scrollbar{
display:none;
}
.kl-filter{
flex:
0 0 auto;
padding:
8px 14px;
font-size:6.5px;
}
/* GRID */
.kl-products-grid{
grid-template-columns:
repeat(2,1fr);
gap:8px;
}
/* IMAGE */
.kl-product-image{
aspect-ratio:
1 / 1.16;
}
.kl-product-number{
left:9px;
top:9px;
width:23px;
height:23px;
font-size:5.5px;
}
.kl-product-view{
right:8px;
bottom:8px;
padding:
5px 5px 5px 8px;
font-size:5px;
opacity:1;
transform:
translateY(0);
}
.kl-product-view i{
width:17px;
height:17px;
}
/* DETAILS */
.kl-product-details{
padding:
13px 11px 12px;
}
.kl-product-type{
margin-bottom:6px;
font-size:5.5px;
}
.kl-product-details h3{
min-height:34px;
font-size:
clamp(18px,5vw,24px);
}
.kl-product-bottom{
margin-top:11px;
padding-top:9px;
}
.kl-product-bottom > span{
font-size:5px;
}
.kl-product-bottom a{
font-size:5px;
}
/* BULK CTA */
.kl-products-cta{
display:block;
margin-top:40px;
padding:
25px 20px;
}
.kl-products-cta > div > span{
font-size:5.5px;
}
.kl-products-cta h3{
font-size:31px;
}
.kl-products-cta-button{
margin-top:20px;
}
/* Mobile leaves slightly smaller */
.kl-product-leaf{
transform:
scale(.85);
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-products{
padding:
65px 10px
55px;
}
.kl-products-grid{
gap:6px;
}
.kl-product-details{
padding:
11px 9px;
}
.kl-product-details h3{
font-size:18px;
}
.kl-product-bottom a{
font-size:4.8px;
}
.kl-product-leaf{
transform:
scale(.72);
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-products *,
.kl-products{
animation:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f6b4771 *//* =========================================================
KAUSORA LEAF
PARTNERS / WHO WE SERVE
========================================================= */
.kl-partners{
--forest:#263A18;
--gold:#B89548;
--gold-light:#D4B96D;
--paper:#F8F6EF;
--line:rgba(38,58,24,.13);
position:relative;
width:100%;
padding:
110px 6vw
85px;
overflow:hidden;
background:var(--paper);
color:var(--forest);
isolation:isolate;
}
/* =========================================================
BACKGROUND DECOR
========================================================= */
.kl-partners-bg-leaf{
position:absolute;
width:220px;
height:390px;
border:
1px solid
rgba(38,58,24,.07);
border-radius:
100% 0 100% 0;
pointer-events:none;
}
.kl-partners-bg-leaf::after{
content:"";
position:absolute;
left:50%;
top:7%;
width:1px;
height:86%;
background:
rgba(38,58,24,.07);
transform:
rotate(22deg);
}
.kl-bg-leaf-1{
left:-130px;
top:70px;
transform:
rotate(-25deg);
}
.kl-bg-leaf-2{
right:-130px;
bottom:40px;
transform:
rotate(150deg)
scale(.8);
}
/* =========================================================
CONTAINER
========================================================= */
.kl-partners-container{
position:relative;
z-index:5;
max-width:1350px;
margin:0 auto;
}
/* =========================================================
HEADER
========================================================= */
.kl-partners-header{
max-width:720px;
margin:
0 auto 65px;
text-align:center;
}
.kl-partners-eyebrow{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:18px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:8px;
font-weight:700;
letter-spacing:.22em;
}
.kl-partners-eyebrow span{
width:28px;
height:1px;
background:var(--gold);
}
.kl-partners-header h2{
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:
clamp(58px,6vw,86px);
font-weight:400;
line-height:.82;
letter-spacing:-.055em;
}
.kl-partners-header h2 em{
display:block;
color:var(--gold);
font-style:italic;
}
.kl-partners-header p{
max-width:580px;
margin:
22px auto 0;
color:
rgba(38,58,24,.52);
font-family:
"Montserrat",
"Inter",
Arial,
sans-serif;
font-size:9px;
line-height:1.85;
}
/* =========================================================
MAIN STAGE
========================================================= */
.kl-partners-stage{
position:relative;
width:min(950px,100%);
min-height:620px;
margin:0 auto;
}
/* =========================================================
MAIN PHOTO
========================================================= */
.kl-partners-photo{
position:absolute;
left:50%;
top:50%;
width:390px;
height:530px;
overflow:hidden;
transform:
translate(-50%,-50%);
background:#E7E4D9;
box-shadow:
0 25px 70px
rgba(38,58,24,.13);
}
.kl-partners-photo::before{
content:"";
position:absolute;
inset:12px;
z-index:5;
border:
1px solid
rgba(255,255,255,.55);
pointer-events:none;
}
.kl-partners-photo img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:
scale(1.01);
transition:
opacity .5s ease,
transform 1s
cubic-bezier(.2,.7,.2,1);
}
.kl-partners-photo:hover img{
transform:
scale(1.07);
}
.kl-partner-image-change{
opacity:.15 !important;
}
.kl-photo-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
to top,
rgba(22,32,12,.66),
transparent 58%
);
}
.kl-photo-brand{
position:absolute;
z-index:8;
left:27px;
bottom:26px;
color:#fff;
}
.kl-photo-brand span{
display:block;
margin-bottom:5px;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.18em;
}
.kl-photo-brand small{
color:
rgba(255,255,255,.58);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:5px;
letter-spacing:.13em;
}
/* =========================================================
CENTER INFORMATION
========================================================= */
.kl-partner-info{
position:absolute;
left:50%;
bottom:32px;
z-index:10;
width:280px;
padding:
18px 22px;
transform:
translateX(-50%);
background:
rgba(250,249,244,.94);
backdrop-filter:
blur(12px);
border:
1px solid
rgba(255,255,255,.75);
box-shadow:
0 15px 35px
rgba(38,58,24,.10);
text-align:center;
}
.kl-partner-info span{
display:block;
margin-bottom:6px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.18em;
transition:
opacity .2s ease,
transform .2s ease;
}
.kl-partner-info h3{
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:30px;
font-weight:500;
line-height:.9;
transition:
opacity .2s ease,
transform .2s ease;
}
.kl-partner-info p{
margin:
9px 0 0;
color:
rgba(38,58,24,.55);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
line-height:1.65;
transition:
opacity .2s ease,
transform .2s ease;
}
.kl-info-hide{
opacity:0 !important;
transform:
translateY(5px);
}
/* =========================================================
FLOATING TAGS
========================================================= */
.kl-partner-tag{
position:absolute;
z-index:15;
display:flex;
align-items:center;
gap:10px;
min-width:180px;
padding:
12px 12px 12px 14px;
border:
1px solid
rgba(38,58,24,.15);
background:
rgba(250,249,244,.88);
backdrop-filter:
blur(12px);
color:var(--forest);
cursor:pointer;
box-shadow:
0 10px 30px
rgba(38,58,24,.07);
text-align:left;
transition:
transform .45s
cubic-bezier(.2,.7,.2,1),
background .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.kl-partner-tag:hover,
.kl-partner-tag.active{
background:#fff;
border-color:
rgba(184,149,72,.65);
box-shadow:
0 18px 40px
rgba(38,58,24,.12);
}
.kl-partner-tag:hover{
transform:
translateY(-5px);
}
.kl-partner-tag strong{
flex:1;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:22px;
font-weight:500;
line-height:1;
}
.kl-partner-tag i{
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:50%;
color:
rgba(38,58,24,.45);
background:
rgba(38,58,24,.06);
font-size:9px;
font-style:normal;
transition:
transform .4s ease,
background .3s ease,
color .3s ease;
}
.kl-partner-tag:hover i,
.kl-partner-tag.active i{
color:#fff;
background:var(--gold);
transform:
rotate(45deg);
}
.tag-dot{
width:7px;
height:7px;
flex-shrink:0;
border-radius:50%;
background:
rgba(38,58,24,.22);
transition:
background .3s ease,
transform .3s ease;
}
.kl-partner-tag:hover .tag-dot,
.kl-partner-tag.active .tag-dot{
background:var(--gold);
transform:
scale(1.45);
}
/* =========================================================
TAG POSITIONS
========================================================= */
.tag-retail{
left:0;
top:80px;
}
.tag-distributors{
left:0;
top:235px;
}
.tag-cafes{
left:40px;
bottom:80px;
}
.tag-resorts{
right:0;
top:80px;
}
.tag-corporate{
right:0;
top:235px;
}
.tag-government{
right:40px;
bottom:80px;
}
/* =========================================================
CONNECTING LINES
========================================================= */
.kl-partner-tag::after{
content:"";
position:absolute;
top:50%;
width:45px;
height:1px;
background:
var(--gold);
opacity:0;
transform:
scaleX(0);
transition:
opacity .35s ease,
transform .45s ease;
}
.tag-retail::after,
.tag-distributors::after,
.tag-cafes::after{
right:-45px;
transform-origin:left;
}
.tag-resorts::after,
.tag-corporate::after,
.tag-government::after{
left:-45px;
transform-origin:right;
}
.kl-partner-tag:hover::after,
.kl-partner-tag.active::after{
opacity:.7;
transform:
scaleX(1);
}
/* =========================================================
CENTER MARKER
========================================================= */
.kl-partner-marker{
position:absolute;
left:50%;
top:50%;
z-index:3;
width:18px;
height:18px;
border:
1px solid
rgba(255,255,255,.8);
border-radius:50%;
transform:
translate(-50%,-50%);
pointer-events:none;
}
.kl-partner-marker span{
position:absolute;
inset:4px;
border-radius:50%;
background:var(--gold);
animation:
klMarkerPulse
2.4s
ease-in-out
infinite;
}
@keyframes klMarkerPulse{
0%,
100%{
transform:scale(.7);
opacity:.55;
}
50%{
transform:scale(1);
opacity:1;
}
}
/* =========================================================
FOOTER CTA
========================================================= */
.kl-partners-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
max-width:1050px;
margin:
70px auto 0;
padding:
28px 0;
border-top:
1px solid var(--line);
border-bottom:
1px solid var(--line);
}
.kl-footer-copy > span{
display:block;
margin-bottom:6px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.18em;
}
.kl-footer-copy h3{
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(30px,3vw,42px);
font-weight:400;
line-height:.9;
}
.kl-footer-copy h3 em{
color:var(--gold);
font-style:italic;
}
.kl-partners-button{
display:inline-flex;
align-items:center;
gap:9px;
flex-shrink:0;
padding:
8px 8px 8px 17px;
color:#fff;
background:var(--forest);
text-decoration:none !important;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.13em;
transition:
transform .3s ease,
background .3s ease;
}
.kl-partners-button i{
display:flex;
align-items:center;
justify-content:center;
width:27px;
height:27px;
color:var(--forest);
background:var(--gold);
font-style:normal;
transition:
transform .35s ease;
}
.kl-partners-button:hover{
background:#17250F;
color:#fff;
transform:
translateY(-3px);
}
.kl-partners-button:hover i{
transform:
rotate(45deg);
}
/* =========================================================
SCROLL REVEAL
========================================================= */
.kl-partners-header,
.kl-partners-stage,
.kl-partners-footer{
opacity:0;
transform:
translateY(30px);
transition:
opacity .85s ease,
transform .85s
cubic-bezier(.2,.7,.2,1);
}
.kl-partners-visible
.kl-partners-header{
opacity:1;
transform:
translateY(0);
}
.kl-partners-visible
.kl-partners-stage{
opacity:1;
transform:
translateY(0);
transition-delay:.12s;
}
.kl-partners-visible
.kl-partners-footer{
opacity:1;
transform:
translateY(0);
transition-delay:.28s;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1050px){
.kl-partners{
padding:
90px 30px
70px;
}
.kl-partners-stage{
min-height:560px;
}
.kl-partners-photo{
width:330px;
height:470px;
}
.kl-partner-tag{
min-width:155px;
padding:
10px 10px 10px 12px;
}
.kl-partner-tag strong{
font-size:19px;
}
.tag-retail{
left:0;
}
.tag-distributors{
left:0;
}
.tag-cafes{
left:15px;
}
.tag-resorts{
right:0;
}
.tag-corporate{
right:0;
}
.tag-government{
right:15px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-partners{
padding:
75px 16px
60px;
}
.kl-partners-header{
margin-bottom:38px;
}
.kl-partners-header h2{
font-size:
clamp(48px,13vw,64px);
}
.kl-partners-header p{
padding:
0 5px;
font-size:8px;
}
/* Stage */
.kl-partners-stage{
display:flex;
flex-direction:column;
min-height:auto;
}
/* Image */
.kl-partners-photo{
position:relative;
left:auto;
top:auto;
width:100%;
height:auto;
aspect-ratio:
.9 / 1;
transform:none;
order:1;
}
.kl-partner-info{
position:absolute;
left:50%;
bottom:auto;
top:285px;
width:
calc(100% - 45px);
padding:
15px 17px;
transform:
translateX(-50%);
}
.kl-partner-info h3{
font-size:27px;
}
.kl-partner-info p{
font-size:6.5px;
}
/* Tags */
.kl-partner-tag{
position:relative;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100%;
min-width:0;
min-height:56px;
margin-top:8px;
padding:
10px 12px;
transform:none !important;
}
.kl-partner-tag::after{
display:none;
}
.kl-partner-tag strong{
font-size:21px;
}
.kl-partner-tag:nth-of-type(1){
margin-top:60px;
}
/* Marker */
.kl-partner-marker{
display:none;
}
/* Footer */
.kl-partners-footer{
display:block;
margin-top:42px;
padding:
24px 0;
}
.kl-footer-copy h3{
font-size:30px;
}
.kl-partners-button{
margin-top:20px;
}
.kl-bg-leaf-1{
left:-150px;
top:200px;
}
.kl-bg-leaf-2{
right:-150px;
bottom:100px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-partners{
padding:
65px 12px
50px;
}
.kl-partners-header h2{
font-size:46px;
}
.kl-partner-info{
top:245px;
width:
calc(100% - 30px);
}
.kl-partner-tag:nth-of-type(1){
margin-top:55px;
}
.kl-partner-tag strong{
font-size:20px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-partners *,
.kl-partners{
animation:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c9c0fa6 *//* =========================================================
KAUSORA LEAF
THE KAUSORA DIFFERENCE
========================================================= */
.kl-diff{
--forest:#283A1A;
--gold:#B7974E;
--gold-light:#D1B66C;
--paper:#FFFFFF;
--soft:#F5F4EE;
--line:rgba(40,58,26,.13);
position:relative;
width:100%;
padding:
95px 6vw
75px;
overflow:hidden;
background:#FFFFFF;
color:var(--forest);
isolation:isolate;
}
/* =========================================================
DECORATIVE LEAVES
========================================================= */
.kl-diff-leaf{
position:absolute;
width:150px;
height:270px;
border:
1px solid
rgba(40,58,26,.055);
border-radius:
100% 0 100% 0;
pointer-events:none;
}
.kl-diff-leaf::after{
content:"";
position:absolute;
top:7%;
left:50%;
width:1px;
height:86%;
background:
rgba(40,58,26,.055);
transform:
rotate(20deg);
}
.kl-diff-leaf-one{
left:-95px;
top:80px;
transform:
rotate(-28deg);
}
.kl-diff-leaf-two{
right:-100px;
bottom:20px;
transform:
rotate(150deg);
}
/* =========================================================
WRAP
========================================================= */
.kl-diff-wrap{
position:relative;
z-index:5;
max-width:1180px;
margin:0 auto;
}
/* =========================================================
HEADER
========================================================= */
.kl-diff-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:40px;
margin-bottom:48px;
}
.kl-diff-kicker{
display:flex;
align-items:center;
gap:9px;
flex-shrink:0;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.19em;
}
.kl-diff-kicker span{
width:25px;
height:1px;
background:var(--gold);
}
.kl-diff-head h2{
max-width:470px;
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:
clamp(39px,4vw,57px);
font-weight:400;
line-height:.9;
letter-spacing:-.045em;
}
.kl-diff-head h2 em{
color:var(--gold);
font-style:italic;
}
/* =========================================================
MAIN
========================================================= */
.kl-diff-main{
display:grid;
grid-template-columns:
.95fr
1.05fr;
gap:
clamp(45px,7vw,100px);
align-items:center;
}
/* =========================================================
VISUAL
========================================================= */
.kl-diff-visual{
position:relative;
width:100%;
aspect-ratio:
1 / 1.08;
overflow:hidden;
background:#ECEAE1;
}
.kl-diff-visual::before{
content:"";
position:absolute;
inset:13px;
z-index:6;
border:
1px solid
rgba(255,255,255,.6);
pointer-events:none;
}
.kl-diff-visual img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:
scale(1);
transition:
opacity .4s ease,
transform 1s
cubic-bezier(.2,.7,.2,1);
}
.kl-diff-visual:hover img{
transform:
scale(1.045);
}
.kl-diff-changing{
opacity:.12 !important;
}
.kl-diff-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
to top,
rgba(25,36,15,.58),
transparent 60%
);
}
.kl-diff-image-text{
position:absolute;
left:25px;
bottom:22px;
z-index:10;
}
.kl-diff-image-text span{
color:
rgba(255,255,255,.7);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.16em;
}
/* =========================================================
BADGE
========================================================= */
.kl-diff-badge{
position:absolute;
top:22px;
right:22px;
z-index:12;
display:flex;
align-items:center;
gap:10px;
padding:
9px 12px;
background:
rgba(255,255,255,.92);
backdrop-filter:
blur(10px);
box-shadow:
0 10px 25px
rgba(0,0,0,.08);
}
.kl-diff-badge > span{
display:flex;
align-items:center;
justify-content:center;
width:25px;
height:25px;
border-radius:50%;
color:#fff;
background:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
}
.kl-diff-badge strong{
display:block;
color:var(--forest);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.12em;
}
.kl-diff-badge small{
display:block;
margin-top:2px;
color:
rgba(40,58,26,.45);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:5px;
letter-spacing:.09em;
}
/* =========================================================
POINTS
========================================================= */
.kl-diff-points{
border-top:
1px solid var(--line);
}
.kl-diff-point{
position:relative;
display:flex;
align-items:center;
gap:17px;
width:100%;
min-height:100px;
padding:
18px 0;
border:0;
border-bottom:
1px solid var(--line);
background:transparent;
color:var(--forest);
text-align:left;
cursor:pointer;
transition:
padding .4s ease,
opacity .3s ease;
}
.kl-diff-point:not(.active){
opacity:.48;
}
.kl-diff-point:hover,
.kl-diff-point.active{
opacity:1;
padding-left:10px;
}
/* =========================================================
NUMBER
========================================================= */
.kl-diff-number{
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:34px;
height:34px;
border:
1px solid
rgba(40,58,26,.16);
border-radius:50%;
color:
rgba(40,58,26,.4);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
transition:
color .3s ease,
background .3s ease,
border-color .3s ease,
transform .35s ease;
}
.kl-diff-point:hover
.kl-diff-number,
.kl-diff-point.active
.kl-diff-number{
color:#fff;
background:var(--forest);
border-color:var(--forest);
transform:
scale(1.1);
}
/* =========================================================
COPY
========================================================= */
.kl-diff-copy{
flex:1;
}
.kl-diff-copy small{
display:block;
margin-bottom:5px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.17em;
}
.kl-diff-copy strong{
display:block;
color:var(--forest);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(26px,2.5vw,34px);
font-weight:500;
line-height:.9;
}
.kl-diff-copy p{
margin:
6px 0 0;
color:
rgba(40,58,26,.48);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
line-height:1.6;
}
/* =========================================================
ARROW
========================================================= */
.kl-diff-arrow{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:27px;
height:27px;
border:
1px solid
rgba(40,58,26,.14);
border-radius:50%;
color:
rgba(40,58,26,.38);
font-size:10px;
transition:
background .3s ease,
color .3s ease,
transform .4s ease;
}
.kl-diff-point:hover
.kl-diff-arrow,
.kl-diff-point.active
.kl-diff-arrow{
color:#fff;
background:var(--gold);
border-color:var(--gold);
transform:
rotate(45deg);
}
/* =========================================================
GOLD ACTIVE LINE
========================================================= */
.kl-diff-point::before{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:0;
height:2px;
background:var(--gold);
transition:
width .45s
cubic-bezier(.2,.8,.2,1);
}
.kl-diff-point:hover::before,
.kl-diff-point.active::before{
width:80px;
}
/* =========================================================
BOTTOM
========================================================= */
.kl-diff-bottom{
display:flex;
align-items:center;
justify-content:center;
gap:22px;
margin-top:55px;
}
.kl-diff-bottom-item{
display:flex;
align-items:center;
gap:7px;
}
.kl-diff-bottom-item span{
color:var(--gold);
font-size:8px;
}
.kl-diff-bottom-item p{
margin:0;
color:
rgba(40,58,26,.48);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:600;
letter-spacing:.08em;
}
.kl-diff-bottom-line{
width:45px;
height:1px;
background:var(--line);
}
/* =========================================================
SCROLL REVEAL
========================================================= */
.kl-diff-head,
.kl-diff-main,
.kl-diff-bottom{
opacity:0;
transform:
translateY(25px);
transition:
opacity .75s ease,
transform .75s
cubic-bezier(.2,.7,.2,1);
}
.kl-diff-visible
.kl-diff-head{
opacity:1;
transform:
translateY(0);
}
.kl-diff-visible
.kl-diff-main{
opacity:1;
transform:
translateY(0);
transition-delay:.1s;
}
.kl-diff-visible
.kl-diff-bottom{
opacity:1;
transform:
translateY(0);
transition-delay:.2s;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1050px){
.kl-diff{
padding:
85px 30px
65px;
}
.kl-diff-main{
gap:45px;
}
.kl-diff-head h2{
font-size:48px;
}
.kl-diff-copy strong{
font-size:28px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-diff{
padding:
70px 16px
55px;
}
.kl-diff-head{
display:block;
margin-bottom:35px;
}
.kl-diff-kicker{
margin-bottom:13px;
}
.kl-diff-head h2{
font-size:
clamp(34px,9vw,44px);
line-height:.92;
}
.kl-diff-main{
display:flex;
flex-direction:column;
gap:28px;
}
.kl-diff-visual{
width:100%;
aspect-ratio:
.95 / 1;
}
.kl-diff-badge{
top:15px;
right:15px;
}
.kl-diff-image-text{
left:20px;
bottom:18px;
}
.kl-diff-point{
min-height:88px;
padding:
14px 0;
gap:11px;
}
.kl-diff-point:hover,
.kl-diff-point.active{
padding-left:6px;
}
.kl-diff-number{
width:29px;
height:29px;
font-size:5.5px;
}
.kl-diff-copy small{
font-size:5.5px;
}
.kl-diff-copy strong{
font-size:
clamp(25px,7.5vw,31px);
}
.kl-diff-copy p{
font-size:6.5px;
line-height:1.55;
}
.kl-diff-arrow{
width:25px;
height:25px;
font-size:9px;
}
.kl-diff-bottom{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:8px;
margin-top:38px;
}
.kl-diff-bottom-line{
display:none;
}
.kl-diff-bottom-item{
justify-content:center;
text-align:center;
}
.kl-diff-bottom-item p{
font-size:5.5px;
}
.kl-diff-leaf-one{
left:-130px;
top:220px;
}
.kl-diff-leaf-two{
right:-130px;
bottom:80px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-diff{
padding:
60px 12px
48px;
}
.kl-diff-head h2{
font-size:34px;
}
.kl-diff-copy strong{
font-size:24px;
}
.kl-diff-copy p{
font-size:6px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-diff *,
.kl-diff{
animation:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fd9012a *//* =========================================================
KAUSORA LEAF
B2B FINAL ENQUIRY — VERSION 02
========================================================= */
.kl-b2b-final{
--forest:#263A18;
--deep:#18240F;
--gold:#B7964E;
--gold-light:#D5B96C;
--cream:#F3F1E8;
--white:#FFFFFF;
--line:rgba(38,58,24,.14);
position:relative;
width:100%;
min-height:700px;
padding:
105px 6vw
90px;
overflow:hidden;
background:
#F3F1E8;
color:var(--forest);
isolation:isolate;
}
/* =========================================================
BACKGROUND SHAPES
========================================================= */
.kl-b2b-final::before{
content:"";
position:absolute;
width:600px;
height:600px;
right:-250px;
top:-300px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(183,150,78,.14),
transparent 68%
);
}
.kl-b2b-final::after{
content:"";
position:absolute;
left:45%;
top:0;
width:1px;
height:100%;
background:
linear-gradient(
to bottom,
transparent,
rgba(38,58,24,.10) 20%,
rgba(38,58,24,.10) 80%,
transparent
);
}
/* =========================================================
FALLING TEA LEAVES
========================================================= */
.kl-b2b-leaves{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
overflow:hidden;
}
.kl-b2b-leaf{
position:absolute;
top:-35px;
display:block;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#9BAF70,
#4D672F
);
opacity:.28;
animation:
klB2BLeafFall
var(--leaf-duration)
linear
var(--leaf-delay)
infinite;
}
.kl-b2b-leaf::after{
content:"";
position:absolute;
left:9%;
top:48%;
width:82%;
height:1px;
background:
rgba(255,255,255,.55);
transform:
rotate(-15deg);
}
@keyframes klB2BLeafFall{
0%{
transform:
translate3d(
0,
-40px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
8%{
opacity:.28;
}
30%{
transform:
translate3d(
calc(var(--leaf-drift) * .35),
28vh,
0
)
rotate(
calc(var(--leaf-rotate) * .3)
)
scale(1);
}
62%{
transform:
translate3d(
calc(var(--leaf-drift) * -.3),
65vh,
0
)
rotate(
calc(var(--leaf-rotate) * .65)
);
}
100%{
transform:
translate3d(
var(--leaf-drift),
110vh,
0
)
rotate(
var(--leaf-rotate)
)
scale(.7);
opacity:0;
}
}
/* =========================================================
SHELL
========================================================= */
.kl-b2b-shell{
position:relative;
z-index:5;
max-width:1160px;
margin:0 auto;
display:grid;
grid-template-columns:
.9fr
1.1fr;
gap:
clamp(55px,8vw,120px);
align-items:center;
}
/* =========================================================
LEFT
========================================================= */
.kl-b2b-left{
position:relative;
transition:
transform .6s
cubic-bezier(.2,.7,.2,1);
}
.kl-b2b-eyebrow{
display:flex;
align-items:center;
gap:10px;
margin-bottom:25px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.2em;
}
.kl-b2b-eyebrow span{
width:28px;
height:1px;
background:var(--gold);
}
.kl-b2b-number{
position:absolute;
right:0;
top:-20px;
color:
rgba(38,58,24,.055);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:170px;
line-height:1;
pointer-events:none;
}
.kl-b2b-left h2{
position:relative;
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
"Playfair Display",
Georgia,
serif;
font-size:
clamp(57px,6vw,84px);
font-weight:400;
line-height:.76;
letter-spacing:-.06em;
}
.kl-b2b-left h2 em{
color:var(--gold);
font-style:italic;
}
.kl-b2b-intro{
max-width:370px;
margin:
32px 0 0;
color:
rgba(38,58,24,.53);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:8px;
line-height:1.9;
}
.kl-b2b-line{
width:65px;
height:1px;
margin-top:33px;
background:var(--gold);
}
/* =========================================================
TRUST STRIP
========================================================= */
.kl-b2b-trust{
display:flex;
gap:28px;
margin-top:24px;
}
.kl-b2b-trust div{
display:flex;
flex-direction:column;
gap:5px;
}
.kl-b2b-trust strong{
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
}
.kl-b2b-trust span{
color:
rgba(38,58,24,.48);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:600;
letter-spacing:.08em;
}
/* =========================================================
SIGNATURE
========================================================= */
.kl-b2b-signature{
display:flex;
align-items:center;
gap:12px;
margin-top:60px;
}
.kl-b2b-kl{
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border:
1px solid
rgba(38,58,24,.18);
color:var(--forest);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:21px;
font-style:italic;
}
.kl-b2b-signature strong{
display:block;
color:var(--forest);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:7px;
font-weight:700;
letter-spacing:.17em;
}
.kl-b2b-signature small{
display:block;
margin-top:4px;
color:
rgba(38,58,24,.4);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:5px;
letter-spacing:.12em;
}
/* =========================================================
RIGHT
========================================================= */
.kl-b2b-right{
position:relative;
z-index:10;
}
.kl-b2b-form-card{
position:relative;
padding:
38px 42px 30px;
background:
rgba(255,255,255,.92);
border:
1px solid
rgba(38,58,24,.14);
box-shadow:
18px 25px 0
rgba(38,58,24,.055),
0 35px 75px
rgba(38,58,24,.1);
transition:
transform .6s
cubic-bezier(.2,.7,.2,1);
overflow:hidden;
}
.kl-b2b-form-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:3px;
background:
linear-gradient(
90deg,
var(--gold),
var(--forest),
var(--gold)
);
}
.kl-b2b-form-card::after{
content:"";
position:absolute;
width:230px;
height:230px;
right:-120px;
bottom:-120px;
border-radius:50%;
border:
1px solid
rgba(183,150,78,.16);
}
/* =========================================================
CARD TOP
========================================================= */
.kl-b2b-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
margin-bottom:26px;
}
.kl-b2b-card-top span{
display:block;
margin-bottom:8px;
color:var(--gold);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-b2b-card-top h3{
margin:0;
color:var(--forest);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(33px,3.5vw,47px);
font-weight:400;
line-height:.8;
letter-spacing:-.04em;
}
.kl-b2b-card-top h3 em{
color:var(--gold);
font-style:italic;
}
.kl-b2b-arrow-circle{
display:flex;
align-items:center;
justify-content:center;
width:45px;
height:45px;
border-radius:50%;
color:#fff;
background:var(--forest);
font-size:14px;
transition:
transform .4s ease,
background .3s ease;
}
.kl-b2b-form-card:hover
.kl-b2b-arrow-circle{
transform:
rotate(-35deg);
background:var(--gold);
color:var(--forest);
}
/* =========================================================
FORM FIELDS
========================================================= */
.kl-b2b-field{
margin-bottom:18px;
}
.kl-b2b-field label{
display:block;
margin-bottom:7px;
color:
rgba(38,58,24,.46);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:5.5px;
font-weight:700;
letter-spacing:.17em;
}
.kl-b2b-field input,
.kl-b2b-field textarea{
display:block;
width:100%;
padding:
4px 0 8px;
border:0;
border-bottom:
1px solid
rgba(38,58,24,.15);
border-radius:0;
outline:none;
background:transparent;
color:var(--forest);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:8px;
box-shadow:none;
resize:none;
transition:
border-color .3s ease,
padding .3s ease;
}
.kl-b2b-field input::placeholder,
.kl-b2b-field textarea::placeholder{
color:
rgba(38,58,24,.25);
}
.kl-b2b-field input:focus,
.kl-b2b-field textarea:focus{
border-color:var(--gold);
padding-left:5px;
}
/* =========================================================
OPTIONS
========================================================= */
.kl-b2b-options{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:6px;
}
.kl-b2b-option{
min-height:32px;
padding:
7px 8px;
border:
1px solid
rgba(38,58,24,.12);
background:
#F8F7F1;
color:
rgba(38,58,24,.53);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:5.5px;
font-weight:600;
cursor:pointer;
transition:
all .3s
cubic-bezier(.2,.7,.2,1);
}
.kl-b2b-option:hover{
border-color:var(--gold);
color:var(--forest);
transform:
translateY(-2px);
}
.kl-b2b-option.active{
background:var(--forest);
border-color:var(--forest);
color:#fff;
box-shadow:
inset 3px 0 0
var(--gold);
}
/* =========================================================
SUBMIT
========================================================= */
.kl-b2b-submit{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:52px;
padding:
6px 7px 6px 18px;
border:0;
background:var(--forest);
color:#fff;
cursor:pointer;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
font-weight:700;
letter-spacing:.15em;
transition:
transform .35s ease,
background .35s ease,
box-shadow .35s ease;
}
.kl-b2b-submit b{
display:flex;
align-items:center;
justify-content:center;
width:39px;
height:39px;
background:var(--gold);
color:var(--forest);
font-size:13px;
font-weight:400;
transition:
transform .4s ease;
}
.kl-b2b-submit:hover{
background:var(--deep);
transform:
translateY(-3px);
box-shadow:
0 12px 25px
rgba(38,58,24,.14);
}
.kl-b2b-submit:hover b{
transform:
rotate(45deg);
}
.kl-b2b-submit.loading{
opacity:.65;
}
/* =========================================================
STATUS
========================================================= */
.kl-b2b-status{
min-height:13px;
margin-top:7px;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:6px;
}
.kl-b2b-status.error{
color:#A04B3C;
}
.kl-b2b-status.success{
color:var(--forest);
}
.kl-b2b-note{
display:block;
margin-top:1px;
color:
rgba(38,58,24,.28);
font-family:
"Montserrat",
Arial,
sans-serif;
font-size:5px;
}
/* =========================================================
REVEAL
========================================================= */
.kl-b2b-left,
.kl-b2b-right{
opacity:0;
transform:
translateY(30px);
transition:
opacity .9s ease,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-b2b-visible
.kl-b2b-left{
opacity:1;
transform:
translateY(0);
}
.kl-b2b-visible
.kl-b2b-right{
opacity:1;
transform:
translateY(0);
transition-delay:.14s;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1050px){
.kl-b2b-final{
padding:
85px 30px
70px;
}
.kl-b2b-shell{
gap:45px;
}
.kl-b2b-form-card{
padding:
32px 28px 26px;
}
.kl-b2b-left h2{
font-size:61px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-b2b-final{
min-height:auto;
padding:
70px 16px
55px;
}
.kl-b2b-final::after{
display:none;
}
.kl-b2b-shell{
display:flex;
flex-direction:column;
gap:36px;
}
.kl-b2b-left{
width:100%;
}
.kl-b2b-number{
right:0;
top:-15px;
font-size:120px;
}
.kl-b2b-left h2{
font-size:
clamp(52px,14vw,68px);
}
.kl-b2b-intro{
margin-top:24px;
font-size:7px;
}
.kl-b2b-trust{
gap:18px;
}
.kl-b2b-trust span{
font-size:5.5px;
}
.kl-b2b-signature{
margin-top:30px;
}
/* FORM */
.kl-b2b-right{
width:100%;
}
.kl-b2b-form-card{
padding:
28px 20px 24px;
box-shadow:
10px 15px 0
rgba(38,58,24,.05),
0 25px 55px
rgba(38,58,24,.09);
}
.kl-b2b-card-top h3{
font-size:34px;
}
.kl-b2b-arrow-circle{
width:38px;
height:38px;
}
.kl-b2b-options{
grid-template-columns:
repeat(2,1fr);
}
.kl-b2b-option{
min-height:38px;
font-size:5.5px;
}
.kl-b2b-field input,
.kl-b2b-field textarea{
font-size:8px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-b2b-final{
padding:
60px 12px
48px;
}
.kl-b2b-left h2{
font-size:48px;
}
.kl-b2b-form-card{
padding:
25px 16px 21px;
}
.kl-b2b-card-top h3{
font-size:30px;
}
.kl-b2b-option{
font-size:5px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-b2b-final *,
.kl-b2b-final{
animation:none !important;
transition:none !important;
}
}/* End custom CSS */