/* Start custom CSS for html, class: .elementor-element-7735d55 *//* =========================================================
KAUSORA LEAF — FINAL HEADER
ONLY 2 CHANGES:
1. TEXT IS LARGER
2. TEA LEAVES ARE DARKER + FALL FURTHER
========================================================= */
.kl-mega-header{
--kl-green:#263A18;
--kl-deep:#17240F;
--kl-gold:#B7964E;
--kl-gold-light:#D6BB76;
--kl-cream:#F5F2E8;
--kl-white:#FFFFFF;
position:relative;
z-index:999999;
width:100%;
font-family:
"Montserrat",
Arial,
sans-serif;
}
/* =========================================================
TOP BAR — TEXT INCREASED
========================================================= */
.kl-shipping-bar{
position:relative;
z-index:20;
height:30px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
var(--kl-green);
color:
var(--kl-cream);
}
.kl-shipping-track{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
white-space:nowrap;
font-size:8px;
font-weight:600;
letter-spacing:.15em;
}
.kl-shipping-dot{
color:
var(--kl-gold-light);
font-size:10px;
}
.kl-shipping-leaf{
color:
var(--kl-gold-light);
font-size:14px;
opacity:.9;
}
/* =========================================================
LEAF LAYER
NOW EXTENDS THROUGH NAVIGATION
========================================================= */
.kl-header-leaf-layer{
position:absolute;
top:0;
left:0;
right:0;
height:185px;
z-index:30;
overflow:hidden;
pointer-events:none;
}
.kl-falling-leaf{
position:absolute;
top:-25px;
display:block;
border-radius:
100% 0 100% 0;
/* DARKER THAN BEFORE */
background:
linear-gradient(
135deg,
#71874A,
#30471C
);
opacity:.52;
animation:
klLeafDrop
var(--fall-duration)
linear
var(--fall-delay)
infinite;
filter:
drop-shadow(
0 1px 1px
rgba(38,58,24,.15)
);
}
.kl-falling-leaf::after{
content:"";
position:absolute;
left:8%;
top:48%;
width:84%;
height:1px;
background:
rgba(238,236,211,.72);
transform:
rotate(-16deg);
}
@keyframes klLeafDrop{
0%{
transform:
translate3d(
0,
-25px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
10%{
opacity:.52;
}
35%{
transform:
translate3d(
calc(var(--fall-drift) * .35),
70px,
0
)
rotate(
calc(var(--fall-rotation) * .3)
)
scale(1);
}
65%{
transform:
translate3d(
calc(var(--fall-drift) * -.35),
135px,
0
)
rotate(
calc(var(--fall-rotation) * .65)
)
scale(.92);
}
90%{
opacity:.32;
}
100%{
transform:
translate3d(
var(--fall-drift),
205px,
0
)
rotate(
var(--fall-rotation)
)
scale(.72);
opacity:0;
}
}
/* =========================================================
MAIN HEADER
========================================================= */
.kl-main-header{
position:relative;
z-index:10;
height:104px;
background:
rgba(250,249,244,.98);
border-bottom:
1px solid
rgba(38,58,24,.1);
transition:
height .45s ease,
box-shadow .45s ease;
}
.kl-main-inner{
width:
min(1360px,92%);
height:100%;
margin:0 auto;
display:grid;
grid-template-columns:
185px
minmax(300px,620px)
330px;
align-items:center;
justify-content:space-between;
gap:30px;
}
/* =========================================================
LOGO
========================================================= */
.kl-main-logo{
position:relative;
display:flex;
align-items:center;
width:max-content;
text-decoration:none !important;
}
.kl-main-logo::before{
content:"";
position:absolute;
left:-15px;
width:5px;
height:5px;
border-radius:50%;
background:
var(--kl-gold);
transition:
transform .4s ease;
}
.kl-main-logo:hover::before{
transform:scale(2);
}
.kl-main-logo img{
display:block;
width:155px;
max-height:75px;
object-fit:contain;
transition:
transform .4s ease;
}
.kl-main-logo:hover img{
transform:
translateY(-2px);
}
/* =========================================================
SEARCH — LARGER TEXT
========================================================= */
.kl-search-area{
position:relative;
width:100%;
}
.kl-search-form{
position:relative;
height:48px;
display:flex;
align-items:center;
padding:
0 15px 0 16px;
background:
#EFEEE7;
border:
1px solid
rgba(38,58,24,.1);
transition:
border-color .35s ease,
background .35s ease,
box-shadow .35s ease;
}
.kl-search-form:focus-within{
background:#fff;
border-color:
rgba(183,150,78,.6);
box-shadow:
0 8px 25px
rgba(38,58,24,.06);
}
.kl-search-label{
margin-right:12px;
color:
var(--kl-gold);
font-size:7px;
font-weight:700;
letter-spacing:.15em;
}
.kl-search-form input{
flex:1;
min-width:0;
height:100%;
padding:0;
border:0 !important;
outline:0 !important;
background:transparent !important;
color:
var(--kl-green);
font-family:
"Montserrat",
Arial,
sans-serif;
/* BIGGER */
font-size:10px;
box-shadow:none !important;
}
.kl-search-form input::placeholder{
color:
rgba(38,58,24,.4);
}
.kl-search-form button{
position:relative;
width:32px;
height:32px;
padding:0;
border:0;
border-radius:50%;
background:
var(--kl-green);
cursor:pointer;
transition:
transform .35s ease,
background .35s ease;
}
.kl-search-form button span{
position:absolute;
left:9px;
top:8px;
width:10px;
height:10px;
border:
1px solid
var(--kl-cream);
border-radius:50%;
}
.kl-search-form button i{
position:absolute;
left:19px;
top:19px;
width:6px;
height:1px;
background:
var(--kl-cream);
transform:
rotate(45deg);
}
.kl-search-form button:hover{
background:
var(--kl-gold);
transform:
rotate(-8deg)
scale(1.05);
}
/* =========================================================
SEARCH RESULTS — LARGER
========================================================= */
.kl-search-results{
position:absolute;
left:0;
right:0;
top:54px;
z-index:100;
display:none;
background:#fff;
border:
1px solid
rgba(38,58,24,.1);
box-shadow:
0 18px 40px
rgba(38,58,24,.12);
}
.kl-search-results.show{
display:block;
}
.kl-search-results a{
display:flex;
align-items:center;
justify-content:space-between;
padding:
15px 17px;
color:
var(--kl-green);
text-decoration:none !important;
border-bottom:
1px solid
rgba(38,58,24,.08);
font-size:9px;
transition:
background .25s ease,
padding .25s ease;
}
.kl-search-results a:hover{
background:
var(--kl-cream);
padding-left:22px;
}
.kl-search-results b{
color:
var(--kl-gold);
}
.kl-no-search{
padding:16px;
color:
rgba(38,58,24,.5);
font-size:8px;
}
/* =========================================================
RIGHT ACTIONS — LARGER
========================================================= */
.kl-header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}
.kl-account-button{
display:flex;
align-items:center;
gap:8px;
padding:5px;
border:0;
background:transparent;
color:
var(--kl-green);
cursor:pointer;
}
.kl-account-icon{
position:relative;
display:block;
width:35px;
height:35px;
border:
1px solid
rgba(38,58,24,.2);
border-radius:50%;
transition:
background .3s ease,
border-color .3s ease,
transform .35s ease;
}
.kl-account-icon::before{
content:"";
position:absolute;
left:12px;
top:8px;
width:9px;
height:9px;
border:
1px solid
var(--kl-green);
border-radius:50%;
}
.kl-account-icon::after{
content:"";
position:absolute;
left:8px;
bottom:7px;
width:17px;
height:8px;
border:
1px solid
var(--kl-green);
border-bottom:0;
border-radius:
10px 10px 0 0;
}
.kl-account-button:hover
.kl-account-icon{
background:
var(--kl-gold);
border-color:
var(--kl-gold);
transform:
rotate(-8deg);
}
.kl-account-text{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.kl-account-text small{
color:
var(--kl-gold);
/* BIGGER */
font-size:6px;
letter-spacing:.14em;
}
.kl-account-text strong{
margin-top:2px;
/* BIGGER */
font-size:8px;
font-weight:700;
letter-spacing:.08em;
}
/* =========================================================
BULK ENQUIRY — LARGER
========================================================= */
.kl-header-enquiry{
display:flex;
align-items:center;
gap:5px;
min-width:135px;
padding:5px;
background:
var(--kl-green);
color:#fff !important;
text-decoration:none !important;
/* BIGGER */
font-size:8px;
font-weight:700;
letter-spacing:.09em;
text-transform:uppercase;
transition:
background .3s ease,
transform .35s ease,
box-shadow .35s ease;
}
.kl-header-enquiry span{
flex:1;
padding-left:9px;
}
.kl-header-enquiry b{
display:flex;
align-items:center;
justify-content:center;
width:31px;
height:31px;
color:
var(--kl-green);
background:
var(--kl-gold);
font-size:12px;
font-weight:400;
transition:
transform .4s ease;
}
.kl-header-enquiry:hover{
background:
var(--kl-deep);
transform:
translateY(-2px);
box-shadow:
0 10px 24px
rgba(38,58,24,.17);
}
.kl-header-enquiry:hover b{
transform:
rotate(45deg);
}
/* =========================================================
GREEN NAV — LARGER
========================================================= */
.kl-green-nav{
position:relative;
z-index:9;
height:48px;
background:
var(--kl-green);
}
.kl-green-nav-inner{
width:
min(1050px,88%);
height:100%;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
}
.kl-green-link{
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:100%;
padding:0 16px;
color:
var(--kl-cream) !important;
text-decoration:none !important;
/* BIGGER */
font-size:8px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
}
.kl-green-link small{
position:absolute;
top:5px;
color:
var(--kl-gold-light);
font-size:4px;
opacity:0;
transform:
translateY(4px);
transition:
opacity .3s ease,
transform .3s ease;
}
.kl-green-link::after{
content:"";
position:absolute;
left:15px;
right:15px;
bottom:8px;
height:1px;
background:
var(--kl-gold-light);
transform:
scaleX(0);
transform-origin:right;
transition:
transform .45s
cubic-bezier(.2,.7,.2,1);
}
.kl-green-link:hover,
.kl-green-link.active{
color:
var(--kl-gold-light) !important;
}
.kl-green-link:hover small,
.kl-green-link.active small{
opacity:1;
transform:
translateY(0);
}
.kl-green-link:hover::after,
.kl-green-link.active::after{
transform:
scaleX(1);
transform-origin:left;
}
/* =========================================================
MOBILE
========================================================= */
.kl-mobile-header{
display:none;
}
.kl-mobile-overlay{
display:none;
}
.kl-account-modal{
position:fixed;
inset:0;
z-index:1000000;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
visibility:hidden;
opacity:0;
transition:
opacity .35s ease,
visibility .35s ease;
}
.kl-account-modal.open{
visibility:visible;
opacity:1;
}
.kl-account-backdrop{
position:absolute;
inset:0;
background:
rgba(23,36,15,.55);
backdrop-filter:
blur(8px);
}
.kl-account-card{
position:relative;
z-index:2;
width:
min(440px,100%);
max-height:
calc(100vh - 40px);
overflow:auto;
padding:38px;
background:
var(--kl-cream);
border:
1px solid
rgba(183,150,78,.25);
box-shadow:
0 35px 90px
rgba(0,0,0,.25);
transform:
translateY(20px)
scale(.97);
transition:
transform .5s
cubic-bezier(.2,.7,.2,1);
}
.kl-account-modal.open
.kl-account-card{
transform:
translateY(0)
scale(1);
}
.kl-account-close{
position:absolute;
right:17px;
top:17px;
width:32px;
height:32px;
border:
1px solid
rgba(38,58,24,.15);
border-radius:50%;
background:transparent;
color:
var(--kl-green);
font-size:20px;
cursor:pointer;
transition:
transform .35s ease,
background .3s ease;
}
.kl-account-close:hover{
transform:rotate(90deg);
background:
var(--kl-gold);
}
.kl-account-heading > span{
color:
var(--kl-gold);
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-account-heading h2{
margin:
12px 0 9px;
color:
var(--kl-green);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:48px;
font-weight:400;
line-height:.8;
}
.kl-account-heading h2 em{
color:
var(--kl-gold);
font-style:italic;
}
.kl-account-heading p{
max-width:300px;
margin:0;
color:
rgba(38,58,24,.48);
font-size:8px;
line-height:1.7;
}
.kl-account-tabs{
display:grid;
grid-template-columns:1fr 1fr;
margin:
28px 0 24px;
border-bottom:
1px solid
rgba(38,58,24,.13);
}
.kl-account-tab{
position:relative;
padding:10px;
border:0;
background:transparent;
color:
rgba(38,58,24,.4);
font-size:7px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
cursor:pointer;
}
.kl-account-tab::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:100%;
height:2px;
background:
var(--kl-gold);
transform:scaleX(0);
transition:
transform .35s ease;
}
.kl-account-tab.active{
color:
var(--kl-green);
}
.kl-account-tab.active::after{
transform:scaleX(1);
}
.kl-account-form{
display:none;
}
.kl-account-form.active{
display:block;
}
.kl-account-form label{
display:block;
margin:
14px 0 6px;
color:
rgba(38,58,24,.48);
font-size:6px;
font-weight:700;
letter-spacing:.15em;
}
.kl-account-form input{
width:100%;
height:40px;
padding:
0 10px;
border:
1px solid
rgba(38,58,24,.13);
outline:none;
background:
rgba(255,255,255,.55);
color:
var(--kl-green);
font-size:8px;
}
.kl-two-inputs{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.kl-account-submit{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:45px;
margin-top:21px;
padding:
5px 6px 5px 15px;
border:0;
background:
var(--kl-green);
color:#fff;
font-size:7px;
font-weight:700;
letter-spacing:.12em;
cursor:pointer;
}
.kl-account-submit b{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
background:
var(--kl-gold);
color:
var(--kl-green);
font-size:11px;
}
.kl-account-message{
min-height:12px;
margin-top:8px;
color:
var(--kl-green);
font-size:7px;
}
.kl-account-note{
display:block;
margin-top:17px;
color:
rgba(38,58,24,.3);
font-size:5px;
line-height:1.6;
}
/* =========================================================
COMPACT
========================================================= */
.kl-header-compact
.kl-main-header{
height:82px;
box-shadow:
0 10px 30px
rgba(38,58,24,.07);
}
.kl-header-compact
.kl-main-logo img{
width:135px;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1100px){
.kl-main-inner{
width:94%;
grid-template-columns:
150px
minmax(260px,1fr)
290px;
gap:15px;
}
.kl-main-logo img{
width:130px;
}
.kl-account-text{
display:none;
}
.kl-header-enquiry{
min-width:110px;
}
.kl-green-nav-inner{
width:94%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-shipping-bar{
height:28px;
}
.kl-shipping-track{
gap:10px;
/* BIGGER MOBILE TEXT */
font-size:6px;
letter-spacing:.11em;
}
.kl-shipping-track
span:nth-child(4){
display:none;
}
.kl-main-header{
display:none;
}
.kl-green-nav{
display:none;
}
.kl-mobile-header{
position:relative;
z-index:50;
height:68px;
display:flex;
align-items:center;
justify-content:space-between;
padding:
0 16px;
background:
var(--kl-cream);
border-bottom:
1px solid
rgba(38,58,24,.12);
}
.kl-mobile-logo img{
display:block;
width:112px;
max-height:52px;
object-fit:contain;
}
.kl-mobile-actions{
display:flex;
align-items:center;
gap:8px;
}
.kl-mobile-wa{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
background:
var(--kl-green);
color:
var(--kl-gold-light) !important;
text-decoration:none !important;
font-size:11px;
}
.kl-mobile-menu-button{
position:relative;
width:43px;
height:40px;
padding:0;
border:0;
background:transparent;
cursor:pointer;
}
.kl-mobile-menu-button span{
position:absolute;
right:0;
width:23px;
height:1px;
background:
var(--kl-green);
}
.kl-mobile-menu-button span:first-child{
top:11px;
}
.kl-mobile-menu-button span:nth-child(2){
top:18px;
width:16px;
}
.kl-mobile-menu-button small{
position:absolute;
right:0;
bottom:2px;
color:
var(--kl-green);
font-size:5px;
letter-spacing:.13em;
}
/* MOBILE MENU */
.kl-mobile-overlay{
position:fixed;
inset:0;
z-index:100000;
display:flex;
flex-direction:column;
padding:
22px 18px
18px;
background:
var(--kl-cream);
visibility:hidden;
opacity:0;
clip-path:
circle(0% at 92% 4%);
transition:
clip-path .7s
cubic-bezier(.2,.8,.2,1),
opacity .25s ease,
visibility .25s;
}
.kl-mobile-overlay.open{
visibility:visible;
opacity:1;
clip-path:
circle(150% at 92% 4%);
}
.kl-mobile-overlay-head{
position:relative;
z-index:3;
display:flex;
align-items:center;
justify-content:space-between;
}
.kl-mobile-overlay-head span{
color:
var(--kl-gold);
font-size:7px;
font-weight:700;
letter-spacing:.18em;
}
.kl-mobile-overlay-head button{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border:
1px solid
rgba(38,58,24,.16);
border-radius:50%;
background:transparent;
color:
var(--kl-green);
font-size:22px;
}
.kl-mobile-menu-watermark{
position:absolute;
right:-40px;
top:65px;
color:
rgba(38,58,24,.035);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:260px;
font-style:italic;
}
.kl-mobile-navigation{
position:relative;
z-index:3;
display:flex;
flex-direction:column;
margin-top:50px;
}
.kl-mobile-navigation a{
display:grid;
grid-template-columns:
30px 1fr 32px;
align-items:center;
min-height:57px;
border-bottom:
1px solid
rgba(38,58,24,.12);
color:
var(--kl-green);
text-decoration:none !important;
}
.kl-mobile-navigation a small{
color:
var(--kl-gold);
font-size:6px;
}
.kl-mobile-navigation a span{
font-family:
"Cormorant Garamond",
Georgia,
serif;
/* BIGGER */
font-size:29px;
}
.kl-mobile-navigation a b{
display:flex;
align-items:center;
justify-content:center;
width:27px;
height:27px;
border:
1px solid
rgba(38,58,24,.15);
border-radius:50%;
font-size:11px;
}
.kl-mobile-menu-bottom > span{
font-size:5px;
}
.kl-mobile-menu-bottom a{
min-height:47px;
font-size:7px;
}
.kl-header-leaf-layer{
/* FALLS DOWN TO NAV AREA */
height:175px;
}
/* ACCOUNT */
.kl-account-card{
padding:
28px 20px;
}
.kl-account-heading h2{
font-size:42px;
}
.kl-two-inputs{
grid-template-columns:1fr;
gap:0;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-shipping-track{
font-size:5.2px;
}
.kl-mobile-header{
height:64px;
}
.kl-mobile-logo img{
width:100px;
}
.kl-mobile-navigation{
margin-top:38px;
}
.kl-mobile-navigation a{
min-height:53px;
}
.kl-mobile-navigation a span{
font-size:25px;
}
}
/* =========================================================
BODY LOCK
========================================================= */
body.kl-lock-scroll{
overflow:hidden !important;
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-mega-header *,
.kl-mega-header{
animation:none !important;
transition:none !important;
}
}/* End custom CSS */