/* Start custom CSS for html, class: .elementor-element-3d39094 *//* =========================================================
KAUSORA LEAF
THE KAUSORA STANDARD — HERO
========================================================= */
.kl-standard-hero{
position:relative;
width:100%;
height:500px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:#263A18;
color:#fff;
}
/* =========================================================
BACKGROUND
========================================================= */
.kl-standard-hero-bg{
position:absolute;
inset:0;
overflow:hidden;
}
.kl-standard-hero-bg img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transform:scale(1.06);
transition:
transform 1s ease;
}
/* =========================================================
OVERLAY
========================================================= */
.kl-standard-hero-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
90deg,
rgba(14,24,9,.70),
rgba(25,35,14,.38),
rgba(14,24,9,.68)
);
}
.kl-standard-hero-overlay::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at center,
rgba(0,0,0,.02),
rgba(0,0,0,.25)
);
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-standard-leaves{
position:absolute;
inset:0;
z-index:4;
overflow:hidden;
pointer-events:none;
}
.kl-standard-leaf{
position:absolute;
top:-25px;
display:block;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#A1AD70,
#52652D
);
opacity:.35;
filter:
drop-shadow(
0 2px 3px
rgba(0,0,0,.25)
);
animation:
klStandardLeafFall
var(--standard-time)
linear
var(--standard-delay)
infinite;
}
.kl-standard-leaf::after{
content:"";
position:absolute;
width:84%;
height:1px;
top:50%;
left:8%;
background:
rgba(255,255,255,.5);
transform:
rotate(-15deg);
}
@keyframes klStandardLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.38;
}
42%{
transform:
translate3d(
calc(var(--standard-drift) * .4),
210px,
0
)
rotate(
calc(var(--standard-rotation) * .45)
)
scale(1);
}
70%{
transform:
translate3d(
calc(var(--standard-drift) * -.3),
350px,
0
)
rotate(
calc(var(--standard-rotation) * .72)
)
scale:.9;
}
100%{
transform:
translate3d(
var(--standard-drift),
550px,
0
)
rotate(
var(--standard-rotation)
)
scale:.65;
opacity:0;
}
}
/* =========================================================
CONTENT
========================================================= */
.kl-standard-hero-content{
position:relative;
z-index:5;
width:90%;
max-width:720px;
text-align:center;
opacity:0;
transform:
translateY(25px);
transition:
opacity .9s ease,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-standard-hero-content.kl-standard-visible{
opacity:1;
transform:
translateY(0);
}
/* =========================================================
EYEBROW
========================================================= */
.kl-standard-eyebrow{
display:block;
margin-bottom:17px;
color:#DFC27B;
font-size:7px;
font-weight:700;
letter-spacing:.34em;
}
/* =========================================================
TITLE
========================================================= */
.kl-standard-hero-content h1{
margin:0;
color:#fff;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(62px,7.5vw,94px);
line-height:.78;
font-weight:400;
letter-spacing:-.045em;
text-shadow:
0 6px 28px
rgba(0,0,0,.22);
}
.kl-standard-hero-content h1 em{
color:#D5B866;
font-style:italic;
}
/* =========================================================
DIVIDER
========================================================= */
.kl-standard-divider{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
width:145px;
margin:
22px auto 18px;
}
.kl-standard-divider span{
flex:1;
height:1px;
background:
rgba(220,193,122,.7);
}
.kl-standard-divider i{
width:5px;
height:5px;
background:#DCC17B;
transform:rotate(45deg);
}
/* =========================================================
DESCRIPTION
========================================================= */
.kl-standard-hero-content p{
max-width:530px;
margin:0 auto;
color:
rgba(255,255,255,.86);
font-size:10px;
line-height:1.8;
}
/* =========================================================
BOTTOM LABELS
========================================================= */
.kl-standard-bottom{
position:absolute;
z-index:6;
left:50%;
bottom:22px;
transform:
translateX(-50%);
display:flex;
align-items:center;
gap:13px;
white-space:nowrap;
}
.kl-standard-bottom span{
color:
rgba(255,255,255,.55);
font-size:5.5px;
font-weight:700;
letter-spacing:.22em;
}
.kl-standard-bottom i{
width:3px;
height:3px;
background:#D5B866;
transform:rotate(45deg);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-standard-hero{
height:460px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-standard-hero{
height:400px;
}
.kl-standard-hero-bg img{
object-position:center center;
}
.kl-standard-hero-overlay{
background:
linear-gradient(
180deg,
rgba(14,24,9,.45),
rgba(14,24,9,.68)
);
}
.kl-standard-eyebrow{
font-size:6px;
letter-spacing:.27em;
margin-bottom:14px;
}
.kl-standard-hero-content h1{
font-size:56px;
line-height:.82;
}
.kl-standard-divider{
width:110px;
margin:
18px auto 15px;
}
.kl-standard-hero-content p{
width:94%;
font-size:8.5px;
line-height:1.75;
}
.kl-standard-bottom{
bottom:16px;
gap:9px;
}
.kl-standard-bottom span{
font-size:4.5px;
letter-spacing:.14em;
}
.kl-standard-leaf{
opacity:.32;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-standard-hero{
height:380px;
}
.kl-standard-hero-content h1{
font-size:51px;
}
.kl-standard-hero-content p{
font-size:8px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-standard-leaf{
animation:none !important;
}
.kl-standard-hero-content{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-47cdaab *//* =========================================================
KAUSORA LEAF
THE KAUSORA STANDARD — INSIDE THE STANDARD
========================================================= */
.kl-inside-standard{
--is-green:#263A18;
--is-deep:#17240F;
--is-gold:#B7964E;
--is-gold-light:#D8C17D;
--is-muted:rgba(38,58,24,.48);
--is-line:rgba(38,58,24,.12);
position:relative;
width:100%;
overflow:hidden;
background:#fff;
color:var(--is-green);
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-is-leaves{
position:absolute;
inset:0;
z-index:1;
overflow:hidden;
pointer-events:none;
}
.kl-is-leaf{
position:absolute;
top:-30px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#64743B,
#263A18
);
opacity:.12;
animation:
klIsLeafFall
var(--is-time)
linear
var(--is-delay)
infinite;
}
.kl-is-leaf::after{
content:"";
position:absolute;
left:8%;
top:50%;
width:84%;
height:1px;
background:
rgba(255,255,255,.45);
transform:
rotate(-15deg);
}
@keyframes klIsLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.14;
}
45%{
transform:
translate3d(
calc(var(--is-drift) * .4),
250px,
0
)
rotate(
calc(var(--is-rotate) * .45)
)
scale(1);
}
75%{
transform:
translate3d(
calc(var(--is-drift) * -.25),
500px,
0
)
rotate(
calc(var(--is-rotate) * .75)
);
}
100%{
transform:
translate3d(
var(--is-drift),
800px,
0
)
rotate(
var(--is-rotate)
)
scale(.65);
opacity:0;
}
}
/* =========================================================
WRAPPER
========================================================= */
.kl-is-wrap{
position:relative;
z-index:4;
width:min(1160px,91%);
margin:auto;
padding:
82px 0 55px;
}
/* =========================================================
TOP LINE
========================================================= */
.kl-is-topline{
display:grid;
grid-template-columns:
auto 1fr auto;
align-items:center;
gap:18px;
margin-bottom:45px;
opacity:0;
transform:
translateY(12px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-is-topline.kl-is-visible{
opacity:1;
transform:
translateY(0);
}
.kl-is-topline span{
white-space:nowrap;
color:
rgba(38,58,24,.34);
font-size:5.5px;
font-weight:700;
letter-spacing:.2em;
}
.kl-is-topline span:first-child{
color:var(--is-gold);
}
.kl-is-topline div{
height:1px;
background:
rgba(183,150,78,.25);
}
/* =========================================================
MAIN
========================================================= */
.kl-is-main{
display:grid;
grid-template-columns:
.85fr 1.15fr;
gap:85px;
align-items:center;
}
/* =========================================================
CONTENT
========================================================= */
.kl-is-content{
opacity:0;
transform:
translateX(-25px);
transition:
opacity .9s ease,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-is-content.kl-is-visible{
opacity:1;
transform:
translateX(0);
}
.kl-is-number{
display:flex;
align-items:center;
justify-content:center;
width:35px;
height:35px;
margin-bottom:19px;
border:
1px solid
rgba(183,150,78,.4);
border-radius:50%;
color:var(--is-gold);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:15px;
}
.kl-is-content h2{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(55px,6vw,76px);
line-height:.82;
font-weight:400;
letter-spacing:-.05em;
}
.kl-is-content h2 em{
color:var(--is-gold);
font-style:italic;
}
.kl-is-content > p{
max-width:390px;
margin:
22px 0 35px;
color:var(--is-muted);
font-size:9px;
line-height:1.9;
}
/* =========================================================
STATS
========================================================= */
.kl-is-stats{
display:grid;
grid-template-columns:
repeat(4,1fr);
max-width:400px;
border-top:
1px solid var(--is-line);
border-bottom:
1px solid var(--is-line);
}
.kl-is-stats div{
padding:
12px 8px;
border-right:
1px solid var(--is-line);
}
.kl-is-stats div:last-child{
border-right:0;
}
.kl-is-stats strong{
display:block;
margin-bottom:3px;
color:var(--is-gold);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:17px;
font-weight:500;
}
.kl-is-stats span{
color:
rgba(38,58,24,.32);
font-size:4.5px;
font-weight:700;
letter-spacing:.13em;
}
/* =========================================================
VISUAL
========================================================= */
.kl-is-visual{
position:relative;
height:500px;
opacity:0;
transform:
translateX(25px);
transition:
opacity .9s ease .1s,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-is-visual.kl-is-visible{
opacity:1;
transform:
translateX(0);
}
.kl-is-image{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
.kl-is-image::before{
content:"";
position:absolute;
z-index:2;
inset:0;
background:
linear-gradient(
180deg,
transparent 50%,
rgba(20,30,12,.2)
);
pointer-events:none;
}
.kl-is-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:
transform .6s ease;
}
/* =========================================================
GOLD FRAME
========================================================= */
.kl-is-visual::before{
content:"";
position:absolute;
z-index:4;
top:-11px;
left:11px;
width:100%;
height:100%;
border:
1px solid
rgba(183,150,78,.48);
pointer-events:none;
}
/* =========================================================
FLOATING LABEL
========================================================= */
.kl-is-label{
position:absolute;
z-index:7;
left:-25px;
bottom:35px;
width:150px;
padding:
17px 17px 15px;
background:#fff;
border:
1px solid
rgba(183,150,78,.32);
box-shadow:
0 18px 38px
rgba(38,58,24,.09);
}
.kl-is-label span{
display:block;
margin-bottom:6px;
color:var(--is-gold);
font-size:5px;
font-weight:700;
letter-spacing:.2em;
}
.kl-is-label strong{
display:block;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:23px;
line-height:.9;
font-weight:500;
}
.kl-is-label i{
position:absolute;
right:12px;
bottom:12px;
color:var(--is-gold);
font-size:13px;
font-style:normal;
}
/* IMAGE NUMBER */
.kl-is-image-number{
position:absolute;
z-index:6;
right:14px;
bottom:13px;
color:
rgba(255,255,255,.75);
font-size:5px;
font-weight:700;
letter-spacing:.18em;
}
/* =========================================================
QUALITY STRIP
========================================================= */
.kl-is-strip{
display:grid;
grid-template-columns:
repeat(4,1fr);
margin-top:55px;
border-top:
1px solid var(--is-line);
border-bottom:
1px solid var(--is-line);
}
.kl-is-item{
position:relative;
display:grid;
grid-template-columns:
25px 1fr 24px;
align-items:center;
gap:9px;
min-height:75px;
padding:
10px 14px;
border-right:
1px solid var(--is-line);
cursor:pointer;
overflow:hidden;
opacity:0;
transform:
translateY(12px);
transition:
opacity .6s ease,
transform .6s ease,
background .35s ease;
}
.kl-is-item:last-child{
border-right:0;
}
.kl-is-item.kl-is-visible{
opacity:1;
transform:
translateY(0);
}
.kl-is-item:nth-child(1){
transition-delay:.05s;
}
.kl-is-item:nth-child(2){
transition-delay:.12s;
}
.kl-is-item:nth-child(3){
transition-delay:.19s;
}
.kl-is-item:nth-child(4){
transition-delay:.26s;
}
.kl-is-item::before{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:2px;
background:var(--is-gold);
transform:
translateX(-101%);
transition:
transform .45s ease;
}
.kl-is-item:hover::before,
.kl-is-item.active::before{
transform:
translateX(0);
}
.kl-is-item:hover,
.kl-is-item.active{
background:
rgba(247,243,232,.6);
}
.kl-is-item > span{
color:
rgba(38,58,24,.28);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:15px;
}
.kl-is-item small{
display:block;
margin-bottom:3px;
color:var(--is-gold);
font-size:4.5px;
font-weight:700;
letter-spacing:.16em;
}
.kl-is-item strong{
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:16px;
font-weight:500;
}
.kl-is-item i{
display:flex;
align-items:center;
justify-content:center;
width:23px;
height:23px;
border:
1px solid
rgba(183,150,78,.25);
border-radius:50%;
color:var(--is-gold);
font-size:10px;
font-style:normal;
transition:
transform .3s ease,
background .3s ease;
}
.kl-is-item:hover i,
.kl-is-item.active i{
transform:
rotate(45deg);
background:
var(--is-green);
color:#fff;
}
/* =========================================================
BOTTOM QUOTE
========================================================= */
.kl-is-bottom{
display:flex;
align-items:center;
gap:18px;
margin-top:38px;
opacity:0;
transform:
translateY(12px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-is-bottom.kl-is-visible{
opacity:1;
transform:
translateY(0);
}
.kl-is-bottom > span{
flex:1;
height:1px;
background:
rgba(183,150,78,.22);
}
.kl-is-bottom p{
margin:0;
color:
rgba(38,58,24,.35);
text-align:center;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:16px;
font-style:italic;
white-space:nowrap;
}
.kl-is-bottom em{
color:var(--is-gold);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-is-main{
gap:45px;
}
.kl-is-visual{
height:440px;
}
.kl-is-content h2{
font-size:55px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-is-wrap{
width:91%;
padding:
62px 0 45px;
}
.kl-is-topline{
grid-template-columns:
auto 1fr;
gap:10px;
margin-bottom:32px;
}
.kl-is-topline span:last-child{
display:none;
}
.kl-is-main{
display:flex;
flex-direction:column;
gap:42px;
}
.kl-is-content{
width:100%;
}
.kl-is-number{
width:31px;
height:31px;
font-size:13px;
}
.kl-is-content h2{
font-size:49px;
}
.kl-is-content > p{
font-size:8.5px;
margin:
18px 0 27px;
}
.kl-is-stats{
max-width:100%;
}
.kl-is-stats div{
padding:
10px 5px;
}
.kl-is-stats strong{
font-size:15px;
}
.kl-is-stats span{
font-size:4px;
}
.kl-is-visual{
width:100%;
height:360px;
}
.kl-is-label{
left:-5px;
bottom:20px;
width:140px;
padding:
14px;
}
.kl-is-label strong{
font-size:21px;
}
.kl-is-strip{
grid-template-columns:
1fr 1fr;
margin-top:42px;
}
.kl-is-item{
min-height:68px;
padding:
9px 10px;
border-bottom:
1px solid var(--is-line);
}
.kl-is-item:nth-child(2){
border-right:0;
}
.kl-is-item:nth-child(3){
border-bottom:0;
}
.kl-is-item:nth-child(4){
border-right:0;
border-bottom:0;
}
.kl-is-bottom{
margin-top:28px;
gap:8px;
}
.kl-is-bottom p{
font-size:13px;
white-space:normal;
max-width:220px;
}
.kl-is-leaf{
opacity:.1;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-is-content h2{
font-size:45px;
}
.kl-is-visual{
height:335px;
}
.kl-is-item strong{
font-size:14px;
}
.kl-is-item{
grid-template-columns:
20px 1fr 20px;
gap:6px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-is-leaf{
animation:none !important;
}
.kl-is-topline,
.kl-is-content,
.kl-is-visual,
.kl-is-item,
.kl-is-bottom{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-21456d4 *//* =========================================================
KAUSORA LEAF
OUR COMMITMENT
========================================================= */
.kl-commitment-section{
--kc-green:#263A18;
--kc-deep:#17240F;
--kc-gold:#B7964E;
--kc-gold-light:#D8C17D;
--kc-cream:#F7F2E6;
--kc-muted:rgba(38,58,24,.48);
--kc-line:rgba(38,58,24,.12);
position:relative;
width:100%;
overflow:hidden;
background:var(--kc-cream);
color:var(--kc-green);
}
/* =========================================================
LEAVES
========================================================= */
.kl-commit-leaves{
position:absolute;
inset:0;
z-index:1;
overflow:hidden;
pointer-events:none;
}
.kl-commit-leaf{
position:absolute;
top:-25px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#66763B,
#263A18
);
opacity:.14;
animation:
klCommitLeafFall
var(--commit-time)
linear
var(--commit-delay)
infinite;
}
.kl-commit-leaf::after{
content:"";
position:absolute;
left:8%;
top:50%;
width:84%;
height:1px;
background:
rgba(255,255,255,.5);
transform:
rotate(-15deg);
}
@keyframes klCommitLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.15;
}
45%{
transform:
translate3d(
calc(var(--commit-drift) * .4),
260px,
0
)
rotate(
calc(var(--commit-rotation) * .45)
)
scale(1);
}
75%{
transform:
translate3d(
calc(var(--commit-drift) * -.25),
520px,
0
)
rotate(
calc(var(--commit-rotation) * .75)
);
}
100%{
transform:
translate3d(
var(--commit-drift),
820px,
0
)
rotate(
var(--commit-rotation)
)
scale(.6);
opacity:0;
}
}
/* =========================================================
WRAPPER
========================================================= */
.kl-commit-wrap{
position:relative;
z-index:5;
width:min(1150px,91%);
margin:auto;
padding:
85px 0 58px;
}
/* =========================================================
TOP
========================================================= */
.kl-commit-top{
display:grid;
grid-template-columns:
auto 1fr auto;
align-items:center;
gap:18px;
margin-bottom:48px;
opacity:0;
transform:
translateY(12px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-commit-top.kl-commit-visible{
opacity:1;
transform:
translateY(0);
}
.kl-commit-label{
color:var(--kc-gold);
font-size:6px;
font-weight:700;
letter-spacing:.25em;
}
.kl-commit-small{
color:
rgba(38,58,24,.3);
font-size:5px;
font-weight:700;
letter-spacing:.18em;
}
.kl-commit-line{
height:1px;
background:
rgba(183,150,78,.28);
}
/* =========================================================
HEADING
========================================================= */
.kl-commit-heading{
position:relative;
max-width:850px;
margin:
0 auto 65px;
text-align:center;
opacity:0;
transform:
translateY(25px);
transition:
opacity .9s ease,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-commit-heading.kl-commit-visible{
opacity:1;
transform:
translateY(0);
}
.kl-small-number{
position:absolute;
left:0;
top:10px;
}
.kl-commit-small-number{
display:block;
margin-bottom:15px;
color:
rgba(38,58,24,.22);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:17px;
}
.kl-commit-heading h2{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(52px,6vw,76px);
line-height:.82;
font-weight:400;
letter-spacing:-.045em;
}
.kl-commit-heading h2 em{
color:var(--kc-gold);
font-style:italic;
}
.kl-commit-heading p{
max-width:480px;
margin:
20px auto 0;
color:var(--kc-muted);
font-size:9px;
line-height:1.9;
}
/* =========================================================
VALUES
========================================================= */
.kl-commit-values{
display:grid;
grid-template-columns:
repeat(4,1fr);
border-top:
1px solid var(--kc-line);
border-bottom:
1px solid var(--kc-line);
}
/* =========================================================
VALUE
========================================================= */
.kl-commit-value{
position:relative;
min-height:285px;
padding:
20px 20px 25px;
border-right:
1px solid var(--kc-line);
overflow:hidden;
cursor:pointer;
opacity:0;
transform:
translateY(20px);
transition:
opacity .7s ease,
transform .7s ease,
background .35s ease;
}
.kl-commit-value:last-child{
border-right:0;
}
.kl-commit-value.kl-commit-visible{
opacity:1;
transform:
translateY(0);
}
.kl-commit-value:nth-child(1){
transition-delay:.05s;
}
.kl-commit-value:nth-child(2){
transition-delay:.12s;
}
.kl-commit-value:nth-child(3){
transition-delay:.19s;
}
.kl-commit-value:nth-child(4){
transition-delay:.26s;
}
/* GOLD SWEEP */
.kl-commit-value::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:2px;
background:
var(--kc-gold);
transform:
translateX(-101%);
transition:
transform .45s ease;
}
.kl-commit-value:hover::after,
.kl-commit-value.kl-value-active::after{
transform:
translateX(0);
}
.kl-commit-value:hover,
.kl-commit-value.kl-value-active{
background:
rgba(255,255,255,.58);
}
/* =========================================================
VALUE HEADER
========================================================= */
.kl-value-head{
display:flex;
align-items:center;
justify-content:space-between;
}
.kl-value-head > span{
color:
rgba(38,58,24,.28);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:15px;
}
.kl-value-head i{
color:var(--kc-gold);
font-size:7px;
font-style:normal;
}
/* =========================================================
ICON
========================================================= */
.kl-value-icon{
position:relative;
width:44px;
height:44px;
margin:
38px 0 25px;
border:
1px solid
rgba(183,150,78,.35);
border-radius:50%;
}
.kl-value-icon span{
position:absolute;
width:21px;
height:10px;
left:11px;
top:15px;
border-radius:
100% 0 100% 0;
background:
var(--kc-green);
transform:
rotate(-28deg);
}
.kl-icon-leaf span{
background:
var(--kc-gold);
}
.kl-icon-cup span{
width:19px;
height:14px;
left:12px;
top:12px;
border:
2px solid var(--kc-green);
background:transparent;
border-radius:
3px 3px 8px 8px;
transform:none;
}
.kl-icon-heart span{
width:16px;
height:16px;
left:13px;
top:12px;
background:
var(--kc-gold);
border-radius:
50% 50% 50% 0;
transform:
rotate(-45deg);
}
/* =========================================================
VALUE TEXT
========================================================= */
.kl-commit-value h3{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:30px;
font-weight:500;
line-height:.9;
letter-spacing:-.025em;
}
.kl-commit-value p{
max-width:220px;
margin:
13px 0 0;
color:var(--kc-muted);
font-size:7.5px;
line-height:1.8;
}
/* =========================================================
BOTTOM
========================================================= */
.kl-commit-bottom{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin-top:45px;
opacity:0;
transform:
translateY(12px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-commit-bottom.kl-commit-visible{
opacity:1;
transform:
translateY(0);
}
.kl-commit-bottom-mark{
display:flex;
align-items:center;
gap:7px;
}
.kl-commit-bottom-mark span{
width:25px;
height:1px;
background:
rgba(183,150,78,.3);
}
.kl-commit-bottom-mark b{
color:var(--kc-gold);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:13px;
font-weight:500;
}
.kl-commit-bottom p{
margin:0;
color:
rgba(38,58,24,.32);
font-size:5px;
font-weight:700;
letter-spacing:.18em;
}
.kl-commit-bottom strong{
color:var(--kc-green);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-commit-values{
grid-template-columns:
repeat(2,1fr);
}
.kl-commit-value:nth-child(2){
border-right:0;
}
.kl-commit-value:nth-child(1),
.kl-commit-value:nth-child(2){
border-bottom:
1px solid var(--kc-line);
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-commit-wrap{
width:91%;
padding:
62px 0 45px;
}
.kl-commit-top{
grid-template-columns:
auto 1fr;
gap:10px;
margin-bottom:35px;
}
.kl-commit-small{
display:none;
}
.kl-commit-heading{
margin-bottom:45px;
}
.kl-commit-heading h2{
font-size:49px;
}
.kl-commit-heading p{
width:94%;
font-size:8.5px;
}
.kl-commit-values{
grid-template-columns:1fr;
}
.kl-commit-value{
min-height:210px;
border-right:0;
border-bottom:
1px solid var(--kc-line);
}
.kl-commit-value:last-child{
border-bottom:0;
}
.kl-value-icon{
margin:
22px 0 17px;
}
.kl-commit-value h3{
font-size:27px;
}
.kl-commit-value p{
max-width:90%;
font-size:8px;
}
.kl-commit-bottom{
margin-top:30px;
gap:9px;
}
.kl-commit-bottom p{
text-align:center;
line-height:1.7;
font-size:4px;
}
.kl-commit-leaf{
opacity:.1;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-commit-heading h2{
font-size:45px;
}
.kl-commit-value{
min-height:195px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-commit-leaf{
animation:none !important;
}
.kl-commit-top,
.kl-commit-heading,
.kl-commit-value,
.kl-commit-bottom{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1b59fb2 *//* =========================================================
KAUSORA LEAF
WHERE KAUSORA BELONGS
========================================================= */
.kl-belong-section{
--kb-green:#263A18;
--kb-deep:#17240F;
--kb-gold:#B7964E;
--kb-gold-light:#D8C17D;
--kb-cream:#FAF8F2;
--kb-muted:rgba(38,58,24,.48);
--kb-line:rgba(38,58,24,.12);
position:relative;
width:100%;
overflow:hidden;
background:#fff;
color:var(--kb-green);
}
/* =========================================================
LEAVES
========================================================= */
.kl-belong-leaves{
position:absolute;
inset:0;
z-index:1;
overflow:hidden;
pointer-events:none;
}
.kl-belong-leaf{
position:absolute;
top:-25px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#65763A,
#263A18
);
opacity:.12;
animation:
klBelongLeafFall
var(--belong-time)
linear
var(--belong-delay)
infinite;
}
.kl-belong-leaf::after{
content:"";
position:absolute;
left:8%;
top:50%;
width:84%;
height:1px;
background:
rgba(255,255,255,.5);
transform:
rotate(-15deg);
}
@keyframes klBelongLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.14;
}
45%{
transform:
translate3d(
calc(var(--belong-drift) * .4),
280px,
0
)
rotate(
calc(var(--belong-rotation) * .45)
)
scale(1);
}
75%{
transform:
translate3d(
calc(var(--belong-drift) * -.25),
550px,
0
)
rotate(
calc(var(--belong-rotation) * .75)
);
}
100%{
transform:
translate3d(
var(--belong-drift),
850px,
0
)
rotate(
var(--belong-rotation)
)
scale(.6);
opacity:0;
}
}
/* =========================================================
WRAPPER
========================================================= */
.kl-belong-wrap{
position:relative;
z-index:5;
width:min(1160px,91%);
margin:auto;
padding:
88px 0 58px;
}
/* =========================================================
INTRO
========================================================= */
.kl-belong-intro{
max-width:700px;
margin:
0 auto 65px;
text-align:center;
opacity:0;
transform:
translateY(22px);
transition:
opacity .8s ease,
transform .8s ease;
}
.kl-belong-intro.kl-belong-visible{
opacity:1;
transform:
translateY(0);
}
.kl-belong-eyebrow{
display:block;
margin-bottom:15px;
color:var(--kb-gold);
font-size:6px;
font-weight:700;
letter-spacing:.28em;
}
.kl-belong-intro h2{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(52px,6vw,76px);
line-height:.83;
font-weight:400;
letter-spacing:-.045em;
}
.kl-belong-intro h2 em{
color:var(--kb-gold);
font-style:italic;
}
.kl-belong-intro p{
max-width:500px;
margin:
20px auto 0;
color:var(--kb-muted);
font-size:9px;
line-height:1.9;
}
/* =========================================================
MAIN
========================================================= */
.kl-belong-main{
display:grid;
grid-template-columns:
.92fr 1.08fr;
gap:75px;
align-items:stretch;
}
/* =========================================================
VISUAL
========================================================= */
.kl-belong-visual{
position:relative;
min-height:580px;
opacity:0;
transform:
translateX(-25px);
transition:
opacity .9s ease,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-belong-visual.kl-belong-visible{
opacity:1;
transform:
translateX(0);
}
.kl-belong-image{
position:absolute;
inset:0 25px 0 0;
overflow:hidden;
}
.kl-belong-image::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
transparent 50%,
rgba(20,30,12,.24)
);
}
.kl-belong-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:
transform .6s ease;
}
/* GOLD FRAME */
.kl-belong-visual::before{
content:"";
position:absolute;
z-index:3;
inset:14px 11px 14px 14px;
border:
1px solid
rgba(183,150,78,.5);
pointer-events:none;
}
/* IMAGE CAPTION */
.kl-belong-image-caption{
position:absolute;
z-index:6;
left:-18px;
bottom:38px;
width:175px;
padding:
16px 18px;
background:#fff;
border:
1px solid
rgba(183,150,78,.32);
box-shadow:
0 18px 40px
rgba(38,58,24,.09);
}
.kl-belong-image-caption span{
display:block;
margin-bottom:6px;
color:var(--kb-gold);
font-size:5px;
font-weight:700;
letter-spacing:.2em;
}
.kl-belong-image-caption strong{
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:23px;
line-height:.88;
font-weight:500;
}
/* INDEX */
.kl-belong-index{
position:absolute;
z-index:5;
right:40px;
bottom:18px;
color:
rgba(255,255,255,.75);
font-size:5px;
font-weight:700;
letter-spacing:.17em;
}
/* =========================================================
LIST
========================================================= */
.kl-belong-list{
border-top:
1px solid var(--kb-line);
}
/* =========================================================
ITEM
========================================================= */
.kl-belong-item{
position:relative;
min-height:145px;
padding:
18px 0 20px;
border-bottom:
1px solid var(--kb-line);
cursor:pointer;
overflow:hidden;
opacity:0;
transform:
translateX(22px);
transition:
opacity .7s ease,
transform .7s ease,
padding-left .35s ease;
}
.kl-belong-item.kl-belong-visible{
opacity:1;
transform:
translateX(0);
}
.kl-belong-item:nth-child(1){
transition-delay:.05s;
}
.kl-belong-item:nth-child(2){
transition-delay:.12s;
}
.kl-belong-item:nth-child(3){
transition-delay:.19s;
}
.kl-belong-item:nth-child(4){
transition-delay:.26s;
}
/* TOP */
.kl-belong-item-top{
display:grid;
grid-template-columns:
30px 1fr 25px;
align-items:center;
gap:10px;
}
.kl-belong-item-top > span{
color:
rgba(38,58,24,.27);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:16px;
}
.kl-belong-item-top small{
color:var(--kb-gold);
font-size:5px;
font-weight:700;
letter-spacing:.18em;
}
.kl-belong-item-top i{
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border:
1px solid
rgba(183,150,78,.3);
border-radius:50%;
color:var(--kb-gold);
font-size:10px;
font-style:normal;
transition:
transform .35s ease,
background .35s ease,
color .35s ease;
}
/* TITLE */
.kl-belong-item h3{
margin:
13px 0 0 40px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:30px;
line-height:.88;
font-weight:500;
letter-spacing:-.025em;
}
.kl-belong-item h3 em{
color:var(--kb-gold);
font-style:italic;
}
/* DESCRIPTION */
.kl-belong-item p{
max-width:480px;
margin:
10px 40px;
color:var(--kb-muted);
font-size:7.5px;
line-height:1.8;
}
/* GOLD PROGRESS */
.kl-belong-progress{
position:absolute;
left:0;
bottom:0;
width:100%;
height:2px;
background:var(--kb-gold);
transform:
translateX(-101%);
transition:
transform .45s ease;
}
.kl-belong-item:hover .kl-belong-progress,
.kl-belong-item.active .kl-belong-progress{
transform:
translateX(0);
}
.kl-belong-item:hover,
.kl-belong-item.active{
padding-left:9px;
}
.kl-belong-item:hover
.kl-belong-item-top i,
.kl-belong-item.active
.kl-belong-item-top i{
background:var(--kb-green);
color:#fff;
transform:
rotate(45deg);
}
/* =========================================================
BOTTOM
========================================================= */
.kl-belong-bottom{
display:flex;
align-items:center;
gap:17px;
margin-top:48px;
opacity:0;
transform:
translateY(12px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-belong-bottom.kl-belong-visible{
opacity:1;
transform:
translateY(0);
}
.kl-belong-bottom > span{
flex:1;
height:1px;
background:
rgba(183,150,78,.23);
}
.kl-belong-bottom p{
margin:0;
color:
rgba(38,58,24,.32);
font-size:5px;
font-weight:700;
letter-spacing:.17em;
white-space:nowrap;
}
.kl-belong-bottom strong{
color:var(--kb-green);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-belong-main{
gap:45px;
}
.kl-belong-visual{
min-height:520px;
}
.kl-belong-item h3{
font-size:26px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-belong-wrap{
width:91%;
padding:
62px 0 45px;
}
.kl-belong-intro{
margin-bottom:40px;
}
.kl-belong-intro h2{
font-size:49px;
}
.kl-belong-intro p{
font-size:8.5px;
}
.kl-belong-main{
display:flex;
flex-direction:column;
gap:42px;
}
.kl-belong-visual{
min-height:380px;
width:100%;
}
.kl-belong-image{
inset:0 10px 0 0;
}
.kl-belong-image-caption{
left:-5px;
bottom:20px;
width:150px;
padding:
14px;
}
.kl-belong-image-caption strong{
font-size:21px;
}
.kl-belong-index{
right:20px;
bottom:13px;
}
.kl-belong-item{
min-height:155px;
}
.kl-belong-item h3{
font-size:28px;
margin-left:39px;
}
.kl-belong-item p{
margin-left:39px;
margin-right:20px;
font-size:8px;
}
.kl-belong-bottom{
margin-top:30px;
gap:8px;
}
.kl-belong-bottom p{
white-space:normal;
text-align:center;
font-size:4px;
line-height:1.7;
}
.kl-belong-leaf{
opacity:.1;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-belong-intro h2{
font-size:45px;
}
.kl-belong-visual{
min-height:350px;
}
.kl-belong-item h3{
font-size:26px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-belong-leaf{
animation:none !important;
}
.kl-belong-intro,
.kl-belong-visual,
.kl-belong-item,
.kl-belong-bottom{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */