/* Start custom CSS for html, class: .elementor-element-b67d98c *//* =====================================================
JENVORA EARRINGS CSS
===================================================== */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
background: #fff7fa;
font-family:
Inter,
Arial,
Helvetica,
sans-serif;
}
/* =====================================================
MAIN PAGE
===================================================== */
.jv-earrings-page {
width: 100%;
background: #fff7fa;
color: #33232b;
overflow: hidden;
}
/* =====================================================
HERO
===================================================== */
.jv-earrings-hero {
min-height: 450px;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 70px 20px;
overflow: hidden;
color: #fff;
background:
radial-gradient(
circle at 15% 20%,
rgba(255,255,255,.20),
transparent 28%
),
radial-gradient(
circle at 85% 75%,
rgba(255,215,0,.17),
transparent 30%
),
linear-gradient(
135deg,
#8b123f,
#c2185b,
#8f1748
);
}
.jv-hero-content {
position: relative;
z-index: 3;
width: 100%;
max-width: 850px;
}
.jv-hero-label {
display: inline-block;
padding: 9px 18px;
border: 1px solid rgba(255,255,255,.4);
border-radius: 50px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 20px;
}
.jv-earrings-hero h1 {
margin: 0 0 18px;
color: #fff;
font-size: clamp(44px, 6vw, 78px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -2px;
}
.jv-earrings-hero h1 span {
font-size: .65em;
}
.jv-earrings-hero p {
max-width: 650px;
margin: 0 auto 28px;
color: rgba(255,255,255,.9);
font-size: 16px;
line-height: 1.8;
}
.jv-hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 25px;
border-radius: 50px;
background: #fff;
color: #c2185b;
text-decoration: none;
font-size: 12px;
font-weight: 800;
transition: .3s ease;
}
.jv-hero-button:hover {
transform: translateY(-4px);
box-shadow:
0 15px 35px rgba(0,0,0,.16);
}
.jv-hero-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.13);
}
.circle-one {
width: 350px;
height: 350px;
right: -100px;
top: -140px;
}
.circle-two {
width: 250px;
height: 250px;
left: -100px;
bottom: -120px;
}
/* =====================================================
TOOLBAR
===================================================== */
.jv-toolbar {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 45px 25px 20px;
}
.jv-toolbar-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-bottom: 22px;
}
.jv-heading span {
color: #c2185b;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.jv-heading h2 {
margin: 7px 0 6px;
color: #351d27;
font-size: 32px;
line-height: 1.2;
}
.jv-heading p {
margin: 0;
color: #76616b;
font-size: 13px;
}
/* =====================================================
SEARCH
===================================================== */
.jv-search {
width: 290px;
position: relative;
}
.jv-search input {
width: 100%;
height: 47px;
padding:
0
45px
0
18px;
border:
1px solid #ead5df;
border-radius: 50px;
outline: none;
background: #fff;
color: #33232b;
font-size: 13px;
transition: .25s ease;
}
.jv-search input:focus {
border-color: #c2185b;
box-shadow:
0 0 0 4px rgba(194,24,91,.07);
}
.jv-search-icon {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
font-size: 14px;
pointer-events: none;
}
/* =====================================================
FILTERS
===================================================== */
.jv-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.jv-filter {
padding: 10px 18px;
border:
1px solid #ead5df;
border-radius: 50px;
background: #fff;
color: #654e58;
cursor: pointer;
font-size: 12px;
font-weight: 700;
transition: .25s ease;
}
.jv-filter:hover {
border-color: #c2185b;
color: #c2185b;
}
.jv-filter.active {
background: #c2185b;
border-color: #c2185b;
color: #fff;
box-shadow:
0 8px 20px rgba(194,24,91,.18);
}
/* =====================================================
PRODUCTS
===================================================== */
.jv-products {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding:
20px
25px
75px;
display: grid;
grid-template-columns:
repeat(3, minmax(0,1fr));
gap: 24px;
}
/* =====================================================
PRODUCT CARD
===================================================== */
.jv-product-card {
background: #fff;
border:
1px solid #f0dfe6;
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow:
0 8px 25px rgba(80,20,50,.05);
transition:
transform .3s ease,
box-shadow .3s ease;
animation:
jvFadeIn .5s ease both;
}
@keyframes jvFadeIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.jv-product-card:hover {
transform: translateY(-7px);
box-shadow:
0 18px 45px rgba(80,20,50,.12);
}
.jv-product-card.hidden {
display: none;
}
/* =====================================================
IMAGE
===================================================== */
.jv-product-image {
width: 100%;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
background: #fff3f7;
}
.jv-product-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .6s ease;
}
.jv-product-card:hover
.jv-product-image img {
transform: scale(1.07);
}
/* =====================================================
SALE
===================================================== */
.jv-sale {
position: absolute;
top: 13px;
left: 13px;
z-index: 5;
padding: 7px 11px;
border-radius: 50px;
background: #c2185b;
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .5px;
}
/* =====================================================
WISHLIST
===================================================== */
.jv-wishlist {
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.95);
color: #c2185b;
cursor: pointer;
font-size: 20px;
line-height: 1;
box-shadow:
0 5px 15px rgba(0,0,0,.08);
transition: .25s ease;
}
.jv-wishlist:hover {
transform: scale(1.08);
}
.jv-wishlist.liked {
background: #c2185b;
color: #fff;
}
/* =====================================================
CONTENT
===================================================== */
.jv-product-content {
padding: 20px;
}
.jv-category {
display: block;
margin-bottom: 7px;
color: #c2185b;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.jv-product-content h3 {
margin: 0 0 8px;
color: #34232b;
font-size: 17px;
line-height: 1.4;
font-weight: 700;
}
.jv-product-subtitle {
margin:
-3px
0
10px;
color: #806d75;
font-size: 11px;
line-height: 1.5;
}
/* =====================================================
RATING
===================================================== */
.jv-rating {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 8px;
}
.stars {
color: #d4af37;
font-size: 13px;
letter-spacing: 1px;
}
.reviews {
color: #8c747e;
font-size: 10px;
}
/* =====================================================
STOCK
===================================================== */
.jv-stock {
margin-bottom: 13px;
color: #23843a;
font-size: 11px;
font-weight: 700;
}
.jv-stock span {
margin-right: 4px;
font-size: 13px;
}
/* =====================================================
PRICE
===================================================== */
.jv-price {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 17px;
}
.old-price {
color: #a99aa1;
font-size: 12px;
text-decoration: line-through;
}
.new-price {
color: #c2185b;
font-size: 20px;
font-weight: 800;
}
/* =====================================================
BUTTONS
===================================================== */
.jv-buttons {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 8px;
}
.jv-buttons a {
min-height: 43px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
text-decoration: none;
font-size: 10px;
font-weight: 800;
transition: .25s ease;
}
.jv-view-button {
border:
1px solid #f2d5e1;
background: #fff0f5;
color: #c2185b;
}
.jv-buy-button {
border:
1px solid #c2185b;
background: #c2185b;
color: #fff;
}
.jv-view-button:hover {
background: #c2185b;
color: #fff;
}
.jv-buy-button:hover {
background: #941247;
border-color: #941247;
transform: translateY(-2px);
}
/* =====================================================
EMPTY
===================================================== */
.jv-empty {
display: none;
grid-column: 1 / -1;
text-align: center;
padding: 80px 20px;
color: #76616b;
}
.jv-empty.show {
display: block;
}
.empty-icon {
font-size: 40px;
margin-bottom: 12px;
}
.jv-empty h3 {
margin: 0 0 7px;
color: #351d27;
font-size: 22px;
}
.jv-empty p {
margin: 0;
font-size: 13px;
}
/* =====================================================
CTA
===================================================== */
.jv-cta {
width: 100%;
padding: 75px 20px;
text-align: center;
color: #fff;
background:
linear-gradient(
135deg,
#8b123f,
#c2185b
);
}
.jv-cta-inner {
max-width: 700px;
margin: auto;
}
.jv-cta span {
font-size: 10px;
font-weight: 800;
letter-spacing: 3px;
opacity: .75;
}
.jv-cta h2 {
margin: 10px 0 12px;
color: #fff;
font-size: clamp(28px,4vw,45px);
line-height: 1.2;
}
.jv-cta p {
margin: 0 auto 25px;
max-width: 600px;
color: rgba(255,255,255,.88);
font-size: 14px;
line-height: 1.7;
}
.jv-cta a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: 50px;
background: #fff;
color: #c2185b;
text-decoration: none;
font-size: 11px;
font-weight: 800;
transition: .25s ease;
}
.jv-cta a:hover {
transform: translateY(-3px);
box-shadow:
0 12px 30px rgba(0,0,0,.16);
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 1024px) {
.jv-products {
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 18px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 767px) {
.jv-earrings-hero {
min-height: 360px;
padding: 55px 18px;
}
.jv-earrings-hero h1 {
font-size: 43px;
letter-spacing: -1px;
}
.jv-earrings-hero p {
font-size: 14px;
}
.jv-toolbar {
padding:
30px
12px
15px;
}
.jv-toolbar-top {
display: block;
margin-bottom: 18px;
}
.jv-heading {
margin-bottom: 18px;
}
.jv-heading h2 {
font-size: 26px;
}
.jv-search {
width: 100%;
}
.jv-filters {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 5px;
scrollbar-width: none;
}
.jv-filters::-webkit-scrollbar {
display: none;
}
.jv-filter {
flex: 0 0 auto;
white-space: nowrap;
padding:
9px
14px;
}
.jv-products {
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 11px;
padding:
15px
10px
50px;
}
.jv-product-card {
border-radius: 15px;
}
.jv-product-content {
padding: 12px;
}
.jv-product-content h3 {
font-size: 12px;
line-height: 1.4;
}
.jv-product-subtitle {
font-size: 9px;
}
.jv-rating {
gap: 3px;
}
.stars {
font-size: 9px;
letter-spacing: 0;
}
.reviews {
font-size: 8px;
}
.jv-stock {
font-size: 9px;
margin-bottom: 9px;
}
.old-price {
font-size: 9px;
}
.new-price {
font-size: 15px;
}
.jv-price {
gap: 5px;
margin-bottom: 11px;
}
.jv-buttons {
grid-template-columns: 1fr;
gap: 5px;
}
.jv-buttons a {
min-height: 36px;
font-size: 9px;
border-radius: 9px;
}
.jv-wishlist {
width: 32px;
height: 32px;
font-size: 17px;
}
.jv-sale {
top: 9px;
left: 9px;
padding:
5px
8px;
font-size: 8px;
}
.jv-cta {
padding:
55px
18px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media (max-width: 380px) {
.jv-products {
gap: 8px;
padding-left: 7px;
padding-right: 7px;
}
.jv-product-content {
padding: 10px;
}
.jv-product-content h3 {
font-size: 11px;
}
.new-price {
font-size: 14px;
}
.jv-product-subtitle {
font-size: 8px;
}
}/* End custom CSS */