:root {
--color-cream-bg: #F8F3E9;
--color-cream-90: #F8F3E9E5;
--color-cream-30: #F8F3E94D;
--color-porcelain: #FEFEFE;
--color-oat: #EDE2C8;
--color-linen: #F3ECE2;
--color-sand: #D6CDB6;
--color-sand-80: #D6CDB6CC;
--color-sand-30: #D6CDB64D;
--color-white: #FFFFFF;
--color-white-60: #FFFFFF99;
--color-white-46: #FFFFFF75;
--color-white-40: #FFFFFF66;
--color-white-30: #FFFFFF4D;
--color-white-23: #FFFFFF3B;
--color-espresso: #2E1B12;
--color-espresso-80: #2E1B12CC;
--color-espresso-60: #2E1B1299;
--color-espresso-50: #2E1B1280;
--color-espresso-43: #2E1B126E;
--color-espresso-40: #2E1B1266;
--color-espresso-30: #2E1B124D;
--color-espresso-20: #2E1B1233;
--color-espresso-15: #2E1B1226;
--color-espresso-12: #2E1B121F;
--color-espresso-07: #2E1B1212;
--color-espresso-deep: #2F1C13;
--color-cinnamon: #BE581E;
--color-cinnamon-80: #BE581ECC;
--color-cinnamon-30: #BE581E4D;
--color-cinnamon-20: #BE581E33;
--color-cinnamon-15: #BE581E26;
--color-cinnamon-05: #BE581E0D;
--color-caramel: #D89455;
--color-caramel-18: #D894552E;
--color-caramel-05: #D894550D;
--font-display: 'Cantora One';
--font-body: 'Poppins';
--tx-display: clamp(4.5rem, 2.5632rem + 8.2629vw, 10rem);
--tx-h1: clamp(2.5rem, 1.5385rem + 3.8462vw, 5rem);
--tx-h2: clamp(2rem, 1.6154rem + 1.5385vw, 3rem);
--tx-h3: clamp(1.5rem, 1.3077rem + 0.7692vw, 2rem);
--tx-h4: clamp(1.5rem, 1.4038rem + 0.3846vw, 1.75rem);
--tx-h5: clamp(1.25rem, 1.1538rem + 0.3846vw, 1.5rem);
--tx-body-lg: clamp(1.125rem, 1.0769rem + 0.1923vw, 1.25rem);
--tx-body: 16px;
--tx-body-sm: 14px;
--tx-body-xs: 12px;
--tx-body-xxs: 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
:focus-visible {
outline: none;
}
body {
font-family: var(--font-body);
background-color: var(--color-cream-bg);
}
:is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -1%;
}
h1 {
font-size: var(--tx-h1);
line-height: 100%;
}
h2 {
font-size: var(--tx-h2);
line-height: 100%;
}
h3,
.promo-hero-content h2 {
font-size: var(--tx-h3);
line-height: 100%;
}
.container {
max-width: 1440px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
white-space: nowrap;
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
}
li {
list-style: none;
}
.list-tag {
display: flex;
flex-direction: column;
gap: 8px;
}
.list-tag li {
position: relative;
padding: 4px 0 4px 32px;
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.list-tag li::after {
content: '';
position: absolute;
top: 5px;
left: 0;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
}
.list-tag-black li::after {
background-image: url('data:image/svg+xml,');
}
a {
text-decoration: none;
cursor: pointer;
}
img {
width: 100%;
height: auto;
object-fit: cover;
}
:where(a, button, input, select, textarea):focus-visible {
outline: none;
}
.section-heading {
display: flex;
flex-direction: column;
gap: 24px;
}
.section-heading-btn {
flex-direction: row;
justify-content: space-between;
align-items: end;
}
.section-heading-btn a {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso);
flex: none;
}
.section-title {
display: flex;
flex-direction: column;
gap: 16px;
}
.section-tagline {
position: relative;
font-weight: 400;
font-size: var(--tx-body);
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
color: var(--color-caramel);
}
.section-tagline::after {
content: "";
position: absolute;
bottom: -4px;
width: 62px;
height: 1px;
background-color: var(--color-caramel);
left: 0;
}
.section-heading h2 {
color: var(--color-espresso);
}
.section-heading h2 span {
color: var(--color-cinnamon);
}
.section-heading p,
.about-process-intro,
.team-intro {
font-weight: 500;
font-size: var(--tx-body);
line-height: 130%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.py {
padding: clamp(2.5rem, 0.7143rem + 4.7619vw, 5rem) 0;
}
.pt {
padding-top: 0 !important;
}
.btn {
position: relative;
overflow: hidden;
border: none;
background-color: var(--color-cream-bg);
width: fit-content;
padding: 12px 40px;
display: flex;
align-items: center;
gap: 24px;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h5);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-espresso);
z-index: 1;
border-radius: 0;
transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 95%;
height: 100%;
background-image: url(../img/Vector.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: left center;
z-index: -1;
transform: translate(-100%, -50%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover {
color: var(--color-white);
border-radius: 12px;
}
.btn:hover::after {
transform: translate(0%, -50%);
}
.btn-v1 {
background-color: var(--color-oat);
}
.btn-outline {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px;
border: 1px solid var(--color-cinnamon);
background-color: transparent;
outline: none;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cinnamon);
cursor: pointer;
border-radius: 0;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease;
}
.product-card:hover .btn-outline,
.btn-outline:hover {
border-radius: 4px;
background-color: var(--color-cinnamon);
color: var(--color-cream-bg);
}
.btn-outline-v1 {
position: relative;
overflow: hidden;
border: none;
background-color: transparent;
border: 1px solid var(--color-cinnamon);
width: fit-content;
padding: 12px 40px;
display: flex;
align-items: center;
gap: 24px;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h5);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-cinnamon);
z-index: 1;
border-radius: 0;
transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-outline-v1::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: url(../img/Vector1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: bottom center;
z-index: -1;
transform: translate(0%, 106%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-outline-v1:hover {
color: var(--color-white);
}
.btn-outline-v1:hover::after {
transform: translate(0%, 0%);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
header {
box-shadow: 0px 10px 24px 0px #00000029;
position: relative;
}
header .top-bar {
background-color: var(--color-espresso);
padding: 12px 0;
}
header .top-bar p {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
text-align: center;
color: var(--color-sand);
}
header .navbar {
padding: 12px 0;
background-color: var(--color-cream-bg);
box-shadow: 0px 8px 32px 0px #2E1B123D;
}
header.is-stuck {
padding-bottom: var(--navbar-height, 0px);
}
header.is-stuck .navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
animation: navbar-pin 0.3s ease;
-webkit-animation: navbar-pin 0.3s ease;
}
@keyframes navbar-pin {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
header .navbar .navbar-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
header .navbar .navbar-wrapper .logo,
header .navbar .navbar-wrapper .logo a {
max-width: 218px;
}
header .navbar .navbar-wrapper .logo img {
width: 100%;
height: auto;
}
header .navbar nav ul {
display: flex;
align-items: center;
gap: 36px;
}
header .navbar nav ul li a {
position: relative;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
display: inline-block;
transition: color 0.3s ease;
}
header .navbar nav ul li a:hover,
header .navbar nav ul li a[aria-current] {
color: var(--color-cinnamon);
}
header .navbar nav ul li a::after {
content: '';
position: absolute;
width: 0%;
height: 1px;
background-color: var(--color-cinnamon);
bottom: -10px;
left: 50%;
transform: translateX(-50%);
transition: width 0.3s ease;
}
header .navbar nav ul li a:hover::after,
header .navbar nav ul li a[aria-current]::after {
width: 100%;
}
header .navbar .social-icon {
display: flex;
align-items: center;
gap: 32px;
}
header .navbar .icons {
display: inline-flex;
padding: 0;
border: none;
background: none;
color: var(--color-espresso-80);
cursor: pointer;
}
header .navbar .social-icon .icons svg {
width: 24px;
height: 24px;
}
header .close-icon,
header .navbar .open-menu,
.menu-overlay {
display: none;
}
.hero {
position: relative;
background: linear-gradient(90deg, #2F1C13 25%, rgba(149, 89, 60, 0) 68.82%), url(../img/hero.webp);
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 26px 0px 66px 0px #0000003D inset;
padding: 160px 0;
z-index: 1;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(253.66deg, rgba(0, 0, 0, 0) 36.28%, rgba(37, 23, 17, 0.9) 70.66%);
z-index: -1;
}
.hero .hero-wrapper {
display: flex;
flex-direction: column;
gap: 48px;
}
.hero .hero-wrapper .hero-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.hero .hero-wrapper .hero-content .tagline p {
font-weight: 400;
font-size: var(--tx-body-sm);
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
color: var(--color-caramel);
text-shadow: 1px 4px 4px #0000007A;
}
.hero .hero-wrapper .hero-content h1 {
color: var(--color-cream-bg);
text-shadow: 2px 6px 12px 0px #00000052;
}
.hero .hero-wrapper .hero-content h1 span {
color: var(--color-caramel);
}
.page-hero {
position: relative;
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
padding: 120px 0;
}
.shop-hero {
background-image: linear-gradient(263.51deg, rgba(0, 0, 0, 0) 49.5%, #140C05 78.05%), url(../img/shop-bg.webp);
}
.about-hero {
background-image: linear-gradient(263.51deg, rgba(0, 0, 0, 0) 49.5%, #140C05 78.05%), url(../img/about-bg.webp);
}
.subscriptions-hero {
background-image: linear-gradient(263.51deg, rgba(0, 0, 0, 0) 49.5%, #140C05 78.05%), url(../img/subscriptions-bg.webp);
}
.contact-hero {
background-image: linear-gradient(263.51deg, rgba(0, 0, 0, 0) 49.5%, #140C05 78.05%), url(../img/contact-bg.webp);
}
.subscriptions-hero {
background-position: right bottom;
}
.contact-hero .page-hero-title {
font-size: var(--tx-h2);
}
.cart-hero,
.checkout-hero,
.wishlist-hero,
.gifts-hero,
.blog-hero {
background-color: var(--color-espresso);
background-position: right center;
background-size: 50% 100%;
background-repeat: no-repeat;
padding: 80px 0;
}
.cart-hero {
background-image:
linear-gradient(270deg,
rgba(46, 27, 18, 0) 66.01%,
#2E1B12 98.21%),
url(../img/cart-bg.webp);
}
.checkout-hero {
background-image:
linear-gradient(270deg,
rgba(46, 27, 18, 0) 66.01%,
#2E1B12 98.21%),
url(../img/checkout-bg.webp);
}
.wishlist-hero {
background-image:
linear-gradient(270deg,
rgba(46, 27, 18, 0) 66.01%,
#2E1B12 98.21%),
url(../img/whishlist-bg.webp);
}
.gifts-hero {
background-image:
linear-gradient(270deg,
rgba(46, 27, 18, 0) 66.01%,
#2E1B12 98.21%),
url(../img/gift-bg.webp);
}
.blog-hero {
background-image:
linear-gradient(270deg,
rgba(46, 27, 18, 0) 66.01%,
#2E1B12 98.21%),
url(../img/blog-bg.webp);
}
:is(.cart-hero, .checkout-hero, .wishlist-hero, .gifts-hero, .blog-hero) .page-hero-title {
font-size: var(--tx-h2);
}
.cart-hero-count {
color: var(--color-cream-bg);
}
.page-hero-content {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 620px;
}
.breadcrumb {
margin-bottom: 8px;
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.breadcrumb a {
font-weight: 500;
font-size: var(--tx-body-xs);
line-height: 100%;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-oat);
transition: color 0.3s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
color: var(--color-cream-bg);
}
.breadcrumb li+li::before {
content: '/';
margin-right: 8px;
font-size: var(--tx-body-xs);
line-height: 100%;
color: var(--color-oat);
}
.breadcrumb .breadcrumb-current,
.breadcrumb .breadcrumb-current:hover {
color: var(--color-caramel);
}
.page-hero-title {
line-height: 110%;
color: var(--color-cream-bg);
text-shadow: 2px 6px 12px 0px #00000052;
}
.page-hero-title span {
color: var(--color-caramel);
}
.page-hero-note {
font-weight: 400;
font-size: var(--tx-body-lg);
line-height: 150%;
color: var(--color-cream-bg);
text-shadow: 1px 4px 4px #0000007A;
}
.about,
.why-subscribe,
.gift-intro,
.error {
background-image: url(../img/about-vector-bg.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.about .about-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 48px;
}
.about .about-img {
position: relative;
}
.about .about-img .about-coffee-lover {
box-shadow: 2px 8px 16px 0px #00000029;
background-color: var(--color-cinnamon);
padding: 32px 28px;
display: flex;
align-items: center;
gap: 16px;
width: fit-content;
position: absolute;
right: -24px;
bottom: -4px;
}
.about .about-img .about-coffee-lover .about-coffee-lover-text {
display: flex;
flex-direction: column;
gap: 8px;
}
.about .about-img .about-coffee-lover .about-coffee-lover-text .about-coffee-lover-value {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h3);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-cream-bg);
}
.about .about-img .about-coffee-lover .about-coffee-lover-text p {
color: var(--color-cream-bg);
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
}
.about .about-content {
display: flex;
flex-direction: column;
gap: 32px;
}
.about .about-content .section-title {
max-width: 590px;
}
.about-why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 48px;
}
.about-why-content {
display: flex;
flex-direction: column;
gap: 32px;
}
.about-why-copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.commitment {
background-color: var(--color-oat);
background-image: url(../img/coffee-commitment.webp);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}
.commitment-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.commitment-heading {
max-width: 720px;
text-align: center;
}
.commitment-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
max-width: 900px;
}
.commitment-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-width: 0;
padding: 4px 16px;
text-align: center;
}
.commitment-stat+.commitment-stat {
border-left: 1px solid var(--color-cinnamon-30);
}
.commitment-value {
font-size: var(--tx-h2);
color: var(--color-cinnamon);
font-variant-numeric: tabular-nums;
}
.commitment-label {
font-size: var(--tx-h5);
color: var(--color-espresso);
}
.purpose {
background-color: var(--color-espresso);
}
.purpose-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 48px;
}
.purpose-media {
position: relative;
padding: 40px 72px 24px 24px;
}
.purpose-media::before {
content: "";
position: absolute;
inset: 64px 96px 0 0;
border: 2px solid var(--color-caramel);
}
.purpose-main {
position: relative;
aspect-ratio: 5 / 6;
object-position: 62% center;
}
.purpose-inset {
position: absolute;
top: 0;
right: 0;
width: 35%;
aspect-ratio: 3 / 4;
}
.purpose-content {
display: flex;
flex-direction: column;
min-width: 0;
gap: 32px;
max-width: 668px;
}
.purpose .section-heading h2 {
color: var(--color-cream-bg);
}
.purpose .section-heading h2 span {
color: var(--color-caramel);
}
.purpose .section-heading p {
color: var(--color-sand);
}
.purpose .btn {
align-self: flex-start;
}
.about-process-wrapper {
display: flex;
flex-direction: column;
gap: 48px;
}
.about-process-head,
.team-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 813px;
align-items: end;
gap: 32px;
}
.about-process-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px 48px;
}
.about-process-card {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
text-align: center;
}
.about-process-media {
position: relative;
}
.about-process-media img {
display: block;
aspect-ratio: 4 / 3;
}
.about-process-crop {
object-position: center 68%;
}
.about-process-badge {
position: absolute;
top: -8px;
right: -8px;
padding: 6px 16px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h5);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-cream-bg);
background-color: var(--color-cinnamon);
box-shadow: 0px 4px 8px 0px #00000040;
}
.about-process-content {
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
padding: 0 42px;
text-align: center;
}
.about-process-title {
font-size: var(--tx-h5);
color: var(--color-cinnamon);
position: relative;
text-align: center;
padding-bottom: 5px;
display: inline-block;
width: fit-content;
margin: 0 auto;
}
.about-process-title::after {
content: '';
width: calc(100% - 50%);
height: 1px;
background-color: var(--color-caramel);
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
}
.about-process-content .about-process-note,
.team-card-content .team-note {
font-size: var(--tx-body);
}
.team {
background-image: url(../img/about-vector-bg.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.team-wrapper {
display: flex;
flex-direction: column;
gap: 48px;
}
.team-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.team-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
min-width: 0;
padding: 24px;
text-align: center;
background-color: var(--color-cream-bg);
box-shadow: 2px 10px 16px 0px #00000014;
border-radius: 8px;
}
.team-photo {
width: 52%;
max-width: 240px;
aspect-ratio: 1 / 1;
}
.team-card-content {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.team-card-heading {
display: flex;
flex-direction: column;
gap: 6px;
}
.team-name {
color: var(--color-cinnamon);
}
.team-role {
font-weight: 400;
font-size: var(--tx-body);
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
color: var(--color-cinnamon);
}
.team-role::after {
content: "";
display: block;
width: 48px;
height: 1px;
margin: 8px auto 0;
background-color: var(--color-caramel);
}
.team-card-des {
display: flex;
flex-direction: column;
gap: 32px;
flex: 1;
}
.team-note {
flex: 1;
}
.team-socials {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.team-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--color-espresso);
border: 1px solid var(--color-espresso-30);
border-radius: 50%;
transition: color 0.3s ease, border-color 0.3s ease;
}
.team-social svg {
width: 16px;
height: 16px;
}
.team-social:hover {
color: var(--color-cinnamon);
border-color: var(--color-cinnamon);
}
.products .products-wrapper {
display: flex;
flex-direction: column;
gap: 32px;
}
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.product-card {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--color-white-40);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover,
.blog-card:hover {
box-shadow: 1px 10px 32px 0px #00000029;
background-color: var(--color-white);
}
.product-card-media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
height: 288px;
background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(20, 20, 20, 0.34) 100%), linear-gradient(0deg, #FFF2E5, #FFF2E5);
overflow: hidden;
}
.product-card-media img {
width: 100%;
height: 280px;
object-fit: contain;
}
.product-card-media .product-card-media-fill {
height: 100%;
object-fit: cover;
}
.contact-wrapper {
display: flex;
flex-direction: column;
gap: 32px;
}
.contact-heading {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-heading h2 {
color: var(--color-espresso);
}
.contact-heading p {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.contact-layout {
display: grid;
grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
align-items: start;
gap: 24px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.contact-label {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.contact-select-shell {
display: flex;
flex-direction: column;
border: 1px solid var(--color-espresso-20);
background-color: transparent;
transition: border-color 0.3s ease;
}
.contact-select-shell:hover {
border-color: var(--color-espresso-30);
}
.contact-select-shell.is-open {
border-color: var(--color-cinnamon);
}
.contact-select {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 16px;
border: none;
background-color: transparent;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
text-align: left;
color: var(--color-espresso);
cursor: pointer;
}
.contact-select-value {
color: var(--color-espresso-50);
}
.contact-select-shell.is-open .contact-select-value,
.contact-select-value.is-chosen {
color: var(--color-cinnamon);
}
.contact-select-arrow {
flex: none;
color: var(--color-espresso-50);
transition: transform 0.28s ease, color 0.28s ease;
}
.contact-select-shell.is-open .contact-select-arrow {
color: var(--color-cinnamon);
transform: rotate(180deg);
}
.contact-options {
max-height: 0;
overflow: hidden;
visibility: hidden;
background-color: #fff;
opacity: 0;
transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s;
}
.contact-select-shell.is-open .contact-options {
max-height: 600px;
visibility: visible;
opacity: 1;
transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s;
}
.contact-option {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 16px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.contact-option:first-child {
margin-top: 4px;
border-top: 1px solid var(--color-espresso-12);
padding-top: 14px;
}
.contact-option:last-child {
padding-bottom: 14px;
}
.contact-option:hover,
.contact-option.is-active {
background-color: var(--color-cinnamon-05);
}
.contact-option[aria-selected="true"] .contact-option-name {
color: var(--color-cinnamon);
}
.contact-option-name {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.contact-option-note {
font-weight: 400;
font-size: var(--tx-body-xs);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-60);
}
.contact-done {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-cinnamon);
}
.contact-send {
align-self: flex-start;
padding: 12px 24px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
.contact-info-title {
font-size: var(--tx-h3);
color: var(--color-espresso);
}
.contact-reach {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-way {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-way-link {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-cinnamon);
transition: color 0.3s ease;
}
.contact-way-link:hover {
color: var(--color-espresso);
}
.contact-follow {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 32px;
border-top: 1px solid #2E1B124D;
}
.contact-follow .contact-way-note {
color: #2E1B12;
}
.contact-follow .team-socials {
justify-content: flex-start;
}
.great-cup {
background-color: var(--color-linen);
background-image: url(../img/great-cup-bg.webp);
background-position: right 25%;
background-repeat: no-repeat;
background-size: cover;
}
.great-cup-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: 610px;
}
.great-cup-content h2 {
color: var(--color-espresso);
}
.great-cup-content h2 span {
color: var(--color-cinnamon);
}
.great-cup-content p {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.faq {
position: relative;
z-index: 1;
background: linear-gradient(270deg, #251711 32.51%, #251711 66%);
overflow: hidden;
}
.faq::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: url(../img/faq-vector.webp);
background-position: left -60px top -30px;
background-size: 380px auto;
background-repeat: no-repeat;
opacity: 0.16;
}
.faq::after,
.comments::before {
content: '';
position: absolute;
right: 0;
top: 0;
z-index: -1;
background-image: url(../img/faq-vector.webp);
background-position: right 0 top 202px;
background-size: 340px auto;
background-repeat: no-repeat;
opacity: 0.16;
transform: rotateX(174deg) rotateY(-181deg);
width: 340px;
height: 500px;
}
.faq-grid {
display: grid;
grid-template-columns: minmax(0, 26fr) minmax(0, 74fr);
align-items: start;
gap: 64px;
}
.faq-content {
display: flex;
flex-direction: column;
min-width: 0;
gap: 32px;
}
.faq .section-heading h2 {
color: var(--color-cream-bg);
}
.faq .section-heading h2 span {
color: var(--color-caramel);
}
.faq .section-heading p {
color: var(--color-sand);
}
.faq-btn {
align-self: flex-start;
}
.faq-list {
position: relative;
min-width: 0;
padding: 32px 48px;
border: 1px solid transparent;
box-shadow: 0px 8px 16px 0px #2B1305;
background-color: #2E1B12CC;
}
.faq-list::after,
.review-card::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
background:
linear-gradient(293.99deg,
rgba(0, 0, 0, 0) 66.48%,
rgba(216, 148, 85, 0.55) 99.63%),
linear-gradient(294.63deg,
rgba(216, 148, 85, 0.55) 1.07%,
rgba(102, 102, 102, 0) 50.64%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.faq-item+.faq-item {
border-top: 1px solid #D894554D;
}
.faq-question {
margin: 0;
}
.faq-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 20px 0;
border: none;
background: none;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-align: left;
color: var(--color-cream-bg);
cursor: pointer;
transition: color 0.3s ease;
}
.faq-toggle:hover {
color: #BE581E;
}
.faq-label {
min-width: 0;
}
.faq-icon {
position: relative;
flex: none;
width: 16px;
height: 16px;
color: var(--color-cinnamon);
transition: transform 0.3s ease, color 0.3s ease;
}
.faq-icon::before,
.faq-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background-color: currentColor;
transform: translate(-50%, -50%);
}
.faq-icon::before {
width: 16px;
height: 1.5px;
}
.faq-icon::after {
width: 1.5px;
height: 16px;
}
.faq-item.is-open .faq-icon {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
}
.faq-item.is-open .faq-answer {
max-height: 320px;
visibility: visible;
opacity: 1;
transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s;
}
.faq-note {
padding-bottom: 20px;
font-weight: 400;
font-size: var(--tx-body-sm);
line-height: 160%;
letter-spacing: 0%;
color: var(--color-cream-bg);
}
.gift-cta {
background-color: var(--color-espresso);
}
.gift-cta-wrapper {
display: flex;
align-items: center;
gap: 32px;
padding: 16px 0;
}
.gift-cta-media {
flex: none;
width: 200px;
margin-top: -48px;
margin-bottom: -8px;
}
.gift-cta-content {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 0;
}
.gift-cta-title {
font-size: var(--tx-h5);
color: var(--color-cream-bg);
}
.gift-cta-title span {
color: var(--color-cinnamon);
}
.gift-cta-note {
font-weight: 400;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-sand);
}
.gift-cta-btn {
flex: none;
}
.gift-intro ul {
display: flex;
flex-direction: column;
gap: 12px;
}
.gift-intro ul li {
padding: 0;
display: flex;
align-items: center;
gap: 16px;
}
.gift-intro ul li::after {
content: none;
}
.gift-intro ul li span {
flex: none;
}
.product-card-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 6px;
background-color: var(--color-cinnamon-80);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cream-bg);
border-radius: 4px;
}
.product-card-wishlist {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
padding: 4px;
border: none;
background: none;
color: var(--color-cinnamon);
cursor: pointer;
transition: transform 0.3s ease;
transform: translateX(200px);
background-color: var(--color-white);
border-radius: 50%;
}
.product-card:hover .product-card-wishlist {
transform: translateX(0);
}
.product-card-wishlist[aria-pressed="true"] svg path {
fill: currentColor;
}
.product-card-body {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
padding: 8px 16px 24px;
}
.product-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.product-card-roast {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.product-card-rating {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.product-card-heading {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.product-card-title,
.origin-card-title,
.blog-card-title,
.process-step-title,
.contact-way-title {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
:is(.product-card-title, .blog-card-title) a {
color: inherit;
transition: color 0.3s ease;
}
:is(.product-card-title, .blog-card-title) a::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.product-card:hover .product-card-title a,
.blog-card:hover .blog-card-title a {
color: var(--color-cinnamon);
}
.copy-note,
.checkout-terms .checkout-check-name {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.product-card-prices-tag {
display: flex;
flex-direction: column;
gap: 8px;
}
.product-card-prices {
display: flex;
align-items: baseline;
gap: 8px;
}
.product-card-price-old {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
text-decoration: line-through;
color: var(--color-espresso-60);
}
.product-card-price {
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.product-card-price-offer {
color: var(--color-cinnamon);
}
.product-card-tag {
width: fit-content;
padding: 4px;
border-radius: 4px;
background-color: var(--color-cinnamon-15);
font-weight: 500;
font-size: var(--tx-body-xxs);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cinnamon);
}
.product-card-tag span {
color: var(--color-espresso-80);
}
.product-card-cart {
position: relative;
z-index: 2;
margin-top: auto;
}
.product-card-wishlist {
z-index: 2;
}
.shop-layout {
display: grid;
grid-template-columns: 20% minmax(0, 1fr);
align-items: start;
gap: 32px;
}
.shop-filters {
position: sticky;
top: 24px;
display: flex;
flex-direction: column;
gap: 32px;
min-width: 0;
background-color: var(--color-white-40);
padding: 24px 16px;
border-radius: 8px;
}
.shop-filters-head {
display: none;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.shop-filters-heading {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h5);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-espresso);
}
.shop-filters-close {
display: inline-flex;
padding: 6px;
border: none;
background: none;
color: var(--color-espresso);
cursor: pointer;
}
.filter-group {
display: block;
min-width: 0;
margin: 0;
padding: 0 0 32px;
border: none;
border-bottom: 1px solid var(--color-espresso-15);
}
.filter-group-title {
padding: 0;
margin-bottom: 24px;
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.filter-price-slider-values {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-options {
display: flex;
flex-direction: column;
gap: 16px;
}
.filter-option {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 2px 0;
cursor: pointer;
}
.tick-box {
position: relative;
flex: none;
width: 18px;
height: 18px;
border: 1.5px solid var(--color-espresso-30);
background-color: var(--color-white-40);
border-radius: 4px;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.tick-box::after {
content: '';
position: absolute;
inset: 0;
opacity: 0;
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: no-repeat;
background-size: 12px 12px;
transition: opacity 0.3s ease;
}
.filter-option:hover .filter-option-box {
border-color: var(--color-cinnamon);
}
.filter-option-input:checked+.filter-option-box {
border-color: var(--color-cinnamon);
background-color: var(--color-cinnamon);
}
.filter-option-input:checked+.filter-option-box::after {
opacity: 1;
}
.filter-option-input[type="radio"]+.filter-option-box,
.filter-option-input[type="radio"]+.filter-option-box::after {
border-radius: 50%;
}
.filter-option-input[type="radio"]:checked+.filter-option-box {
background-color: var(--color-white-40);
}
.filter-option-input[type="radio"]:checked+.filter-option-box::after {
inset: 3px;
background-image: none;
background-color: var(--color-cinnamon);
}
.filter-option-name {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.filter-option-count {
margin-left: auto;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
text-align: right;
color: var(--color-espresso-80);
}
.filter-option-input[type="radio"]:checked+.filter-option-box~.filter-option-name,
.filter-option-input[type="radio"]:checked+.filter-option-box~.filter-option-count,
.filter-option-input:checked+.filter-option-box~.filter-option-name,
.filter-option-input:checked+.filter-option-box~.filter-option-count {
color: var(--color-espresso);
}
.filter-price-slider {
position: relative;
display: flex;
align-items: center;
height: 20px;
}
.filter-price-track,
.filter-price-fill {
position: absolute;
height: 4px;
border-radius: 2px;
}
.filter-price-track {
left: 0;
right: 0;
background-color: var(--color-sand);
}
.filter-price-fill {
left: var(--price-from, 0%);
right: var(--price-to, 0%);
background-color: var(--color-cinnamon);
}
.filter-price-input {
position: absolute;
left: 0;
width: 100%;
height: 20px;
margin: 0;
padding: 0;
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.filter-price-input::-webkit-slider-runnable-track {
height: 20px;
background: none;
}
.filter-price-input::-moz-range-track {
height: 20px;
background: none;
}
.filter-price-input::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 16px;
height: 16px;
border: 2px solid var(--color-cream-bg);
background-color: var(--color-cinnamon);
cursor: pointer;
box-shadow: 0px 2px 6px 0px #2E1B1240;
border-radius: 50%;
}
.filter-price-input::-moz-range-thumb {
pointer-events: auto;
width: 16px;
height: 16px;
border: 2px solid var(--color-cream-bg);
background-color: var(--color-cinnamon);
cursor: pointer;
box-shadow: 0px 2px 6px 0px #2E1B1240;
border-radius: 50%;
}
.filter-price-values {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.filter-clear {
align-self: flex-start;
padding: 0;
border: none;
background: none;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
text-decoration: underline;
text-underline-offset: 4px;
color: var(--color-cinnamon);
cursor: pointer;
}
.filter-help {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 16px 10px;
background-color: var(--color-cream-bg);
border-radius: 8px;
}
.filter-help-heding {
display: flex;
flex-direction: column;
gap: 4px;
}
.filter-help-title {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.filter-help-note {
font-weight: 400;
font-size: var(--tx-body-xs);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.filter-help .link-btn {
font-size: var(--tx-body-sm);
color: var(--color-espresso-80);
}
.shop-results {
display: flex;
flex-direction: column;
gap: 48px;
min-width: 0;
}
.shop-results-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.shop-results-count {
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
vertical-align: middle;
color: var(--color-espresso);
}
.shop-filters-toggle {
display: none;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--color-sand);
background-color: var(--color-white-40);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
color: var(--color-espresso);
cursor: pointer;
border-radius: 4px;
}
.shop-sort {
margin-left: auto;
}
.shop-sort-select {
padding: 10px 42px 10px 16px;
border: 1px solid var(--color-sand);
background-color: var(--color-white-40);
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
color: var(--color-espresso);
cursor: pointer;
border-radius: 4px;
transition: border-color 0.3s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.shop-sort-select:hover,
.shop-sort-select:focus-visible {
border-color: var(--color-cinnamon);
}
.shop-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.shop-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 48px 24px;
border-radius: 8px;
background-color: var(--color-white-40);
text-align: center;
}
.shop-empty-note {
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 140%;
color: var(--color-espresso-80);
}
.shop-empty .btn-outline {
padding: 10px 20px;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.pagination-list {
display: flex;
align-items: center;
gap: 8px;
}
.pagination-arrow,
.pagination-page {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--color-sand);
background-color: var(--color-white-40);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
color: var(--color-espresso-80);
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.pagination-arrow:hover:not(:disabled),
.pagination-page:hover {
border-color: var(--color-cinnamon);
color: var(--color-cinnamon);
}
.pagination-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination-page.is-active,
.pagination-page.is-active:hover {
border-color: var(--color-cinnamon);
background-color: var(--color-cinnamon);
color: var(--color-cream-bg);
}
.shop-filters-overlay {
display: none;
}
.social-icon .cart {
position: relative;
}
.cart-count {
position: absolute;
top: -4px;
right: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background-color: var(--color-cinnamon);
font-weight: 600;
font-size: var(--tx-body-xxs);
line-height: 100%;
color: var(--color-cream-bg);
border-radius: 999px;
}
.product-detail .breadcrumb {
margin-bottom: 32px;
}
:is(.product-detail, .article) .breadcrumb a {
color: var(--color-espresso-80);
}
:is(.product-detail, .article) .breadcrumb a:is(:hover, :focus-visible) {
color: var(--color-espresso);
}
:is(.product-detail, .article) .breadcrumb li+li::before {
color: var(--color-espresso-80);
}
:is(.product-detail, .article) .breadcrumb .breadcrumb-current,
:is(.product-detail, .article) .breadcrumb .breadcrumb-current:hover {
color: var(--color-cinnamon);
}
.product-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 32px;
}
.product-gallery {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 16px;
}
.product-gallery-thumbs {
display: flex;
flex-direction: column;
gap: 16px;
}
.product-gallery-thumb {
display: block;
width: 100%;
height: 112px;
padding: 0px;
border: 1px solid var(--color-sand-30);
background-color: var(--color-oat);
cursor: pointer;
overflow: hidden;
transition: border-color 0.3s ease;
}
.product-gallery-thumb img {
height: 100%;
object-fit: cover;
}
.product-gallery-thumb:hover {
border-color: var(--color-sand);
}
.product-gallery-thumb.is-active {
border-width: 2px;
border-color: var(--color-cinnamon);
}
.product-gallery-stage {
position: relative;
background-color: var(--color-oat);
overflow: hidden;
}
.product-gallery-viewport {
overflow: hidden;
touch-action: pan-y;
cursor: grab;
}
.product-gallery-track {
display: flex;
transform: translate3d(calc(var(--slide, 0) * -100% + var(--drag, 0px)), 0, 0);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-gallery-viewport.is-dragging {
cursor: grabbing;
}
.product-gallery-viewport.is-dragging .product-gallery-track {
transition: none;
}
.product-gallery-slide {
flex: 0 0 100%;
height: 700px;
}
.product-gallery-slide img {
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
.product-gallery-arrow {
position: absolute;
top: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-sand);
background-color: var(--color-cream-90);
color: var(--color-espresso);
cursor: pointer;
opacity: 0.55;
transform: translateY(-50%);
border-radius: 50%;
transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.product-gallery-stage:hover .product-gallery-arrow,
.product-gallery-arrow:focus-visible {
opacity: 1;
}
.product-gallery-arrow:hover {
border-color: var(--color-cinnamon);
background-color: var(--color-cinnamon);
color: var(--color-cream-bg);
}
.product-gallery-prev {
left: 16px;
}
.product-gallery-next {
right: 16px;
}
.product-gallery-dots {
grid-column: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.product-gallery-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
background-color: var(--color-sand);
cursor: pointer;
border-radius: 4px;
transition: width 0.3s ease, background-color 0.3s ease;
}
.product-gallery-dot.is-active {
width: 16px;
background-color: var(--color-cinnamon);
}
.product-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.product-badge {
padding: 4px 6px;
background-color: var(--color-cinnamon);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cream-bg);
box-shadow: 0px 4px 7px 0px #0000000D;
border: 0.5px solid var(--color-espresso-07);
border-radius: 4px;
}
.product-info-heading {
display: flex;
flex-direction: column;
gap: 8px;
}
.product-title {
font-size: var(--tx-h2);
line-height: 120%;
color: var(--color-espresso);
}
.product-subtitle {
font-weight: 400;
font-size: var(--tx-body);
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
color: var(--color-cinnamon);
}
.product-note {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.product-price-terms {
display: flex;
flex-direction: column;
gap: 4px;
}
.product-price-row {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h2);
line-height: 100%;
color: var(--color-espresso);
}
.product-weight {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body);
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.product-terms {
font-weight: 500;
font-size: var(--tx-body);
line-height: 120%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.product-extra-info {
margin-top: 8px;
padding-top: 24px;
border-top: 1px solid var(--color-espresso-15);
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}
.product-facts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
width: 100%;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.product-facts b {
font-weight: 600;
}
.product-fact+.product-fact {
padding-left: 24px;
border-left: 1px solid var(--color-espresso-30);
}
.product-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
width: 100%;
}
.product-option {
display: flex;
flex-direction: column;
gap: 8px;
}
.product-option-label {
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.product-option-field {
position: relative;
}
.product-option-icon {
position: absolute;
top: 50%;
left: 14px;
display: inline-flex;
color: var(--color-espresso-60);
pointer-events: none;
transform: translateY(-50%);
}
.product-option-select {
width: 100%;
padding: 15px 42px 15px 44px;
border: 1px solid var(--color-sand);
background-color: transparent;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body);
line-height: 120%;
letter-spacing: 0%;
color: var(--color-espresso);
cursor: pointer;
transition: border-color 0.3s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 8px;
}
.product-option-select:hover,
.product-option-select:focus-visible {
border-color: var(--color-cinnamon);
}
.product-quantity {
display: flex;
align-items: center;
border: 1px solid var(--color-sand);
background-color: transparent;
overflow: hidden;
border-radius: 8px;
}
.product-quantity-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
height: 48px;
padding: 0;
border: none;
background: none;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 100%;
color: var(--color-espresso);
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.product-quantity-btn:hover {
background-color: var(--color-cinnamon);
color: var(--color-cream-bg);
}
.product-quantity-input {
width: 100%;
min-width: 0;
height: 48px;
padding: 0 4px;
border: none;
background: none;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body);
line-height: 120%;
letter-spacing: 0%;
color: var(--color-espresso);
text-align: center;
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
.product-quantity-input::-webkit-outer-spin-button,
.product-quantity-input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.product-add-share {
display: flex;
flex-direction: column;
gap: 24px;
}
.product-add.is-added {
background-color: var(--color-cinnamon);
color: var(--color-cream-bg);
}
.product-share,
.product-share-links {
display: flex;
align-items: center;
gap: 8px;
}
.product-share-label {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.product-share-links li {
display: flex;
}
.product-share-link {
display: inline-flex;
color: var(--color-espresso);
transition: color 0.3s ease;
}
.product-share-link:hover {
color: var(--color-cinnamon);
}
.gift-detail .product-gallery-slide {
height: auto;
aspect-ratio: 4 / 3;
}
.gift-detail .product-gallery-thumb {
height: 96px;
}
.gift-detail .product-gallery-thumb img {
width: 100%;
object-fit: contain;
}
.gift-detail .product-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gift-detail .checkout-input {
border-color: var(--color-sand);
border-radius: 8px;
}
.gift-message-count {
text-align: right;
}
.product-tabs-grid {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 48px;
}
.product-tablist {
display: flex;
flex-direction: column;
border: 1px solid var(--color-espresso-15);
background-color: var(--color-linen);
overflow: hidden;
border-radius: 8px;
}
.product-tab {
position: relative;
padding: 16px 24px;
border: none;
border-bottom: 1px solid var(--color-espresso-30);
background-color: transparent;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
color: var(--color-espresso);
cursor: pointer;
text-align: left;
transition: background-color 0.3s ease, color 0.3s ease;
}
.product-tab::after {
content: '';
position: absolute;
left: 24px;
bottom: 12px;
width: 0;
height: 2px;
background-color: var(--color-cinnamon);
transition: width 0.3s ease;
}
.product-tab:hover {
color: var(--color-espresso);
}
.product-tab.is-active {
background-color: var(--color-white);
}
.product-tab.is-active::after {
width: calc(100% - 48px);
}
.product-tabpanels {
min-width: 0;
}
.product-tabpanel {
display: flex;
flex-direction: column;
gap: 24px;
animation: product-tab-in 0.35s ease both;
-webkit-animation: product-tab-in 0.35s ease both;
}
@keyframes product-tab-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-tabpanel .section-heading {
gap: 8px;
}
.product-tabpanel h2 {
font-size: var(--tx-h3);
line-height: 120%;
color: var(--color-espresso);
}
.product-specs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
padding-top: 24px;
border-top: 1px solid var(--color-espresso-30);
}
.product-spec {
display: flex;
flex-direction: column;
gap: 8px;
}
.product-spec-title {
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.product-spec-value {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.product-tasting {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
}
.product-tasting li+li::before {
content: '|';
margin-right: 8px;
color: var(--color-espresso-30);
}
.product-reviews {
display: flex;
flex-direction: column;
gap: 32px;
}
.product-review {
display: flex;
flex-direction: column;
gap: 16px;
}
.product-review-head {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid;
border-image: linear-gradient(90deg, rgba(216, 148, 85, 0.35) 36.8%, rgba(32, 18, 11, 0.35) 100%) 1;
}
.product-review-avatar {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
}
.product-review-who {
min-width: 0;
}
.product-review-name {
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
color: var(--color-cinnamon);
}
.product-review-meta {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.product-review-rating {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.product-review-score {
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
color: var(--color-espresso-80);
}
.product-review-max {
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
}
.product-review-quote p {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.cart-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
align-items: start;
gap: 32px;
}
.cart-products,
.cart-summary,
.checkout-form,
.contact-form,
.contact-info,
.article-side-card {
padding: 24px;
background-color: var(--color-white-40);
box-shadow: 2px 8px 24px 0px #00000014;
border-radius: 8px;
}
.cart-products-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-espresso-15);
}
.cart-products-title,
.cart-summary-title,
.cart-products-total {
font-size: var(--tx-h3);
color: var(--color-espresso);
}
.cart-items {
display: flex;
flex-direction: column;
gap: 24px;
padding-top: 48px;
}
.cart-item {
display: grid;
grid-template-columns: 80px minmax(0, 1fr) auto;
align-items: start;
gap: 16px;
}
.cart-item+.cart-item {
padding-top: 24px;
border-top: 1px solid var(--color-espresso-15);
}
.cart-item-media {
display: block;
height: 100px;
overflow: hidden;
background-color: var(--color-oat);
}
.cart-item-media img {
height: 100%;
object-fit: contain;
}
.cart-item-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
min-width: 0;
}
.cart-item-title {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.cart-item-title a {
color: inherit;
transition: color 0.3s ease;
}
.cart-item-title a:hover {
color: var(--color-cinnamon);
}
.cart-item-prices {
display: flex;
align-items: baseline;
gap: 8px;
}
.cart-item-price-old {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
text-decoration: line-through;
color: var(--color-espresso-60);
}
.cart-item-price {
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.cart-item-controls {
display: flex;
align-items: center;
gap: 12px;
}
.cart-item-quantity .product-quantity-btn {
flex: 0 0 32px;
height: 34px;
font-size: var(--tx-body);
}
.cart-item-quantity .product-quantity-input {
width: 40px;
height: 34px;
font-size: var(--tx-body);
}
.cart-item-remove {
display: inline-flex;
padding: 0;
border: none;
background: none;
color: var(--color-espresso);
cursor: pointer;
transition: color 0.3s ease;
}
.cart-item-remove:hover {
color: var(--color-cinnamon);
}
.cart-item-total {
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.cart-empty {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: flex-start;
gap: 16px;
}
.cart-empty-note {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
text-align: center;
width: 100%;
color: var(--color-espresso-80);
}
.cart-empty .btn-outline {
padding: 10px 20px;
margin: 0 auto;
text-decoration: none;
}
.cart-summary-title {
padding-bottom: 24px;
border-bottom: 1px solid var(--color-espresso-15);
}
.cart-coupon {
border-bottom: 1px solid var(--color-espresso-15);
border-top: 1px solid var(--color-espresso-15);
}
.cart-coupon-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 24px 0;
border: none;
background: none;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
text-align: left;
color: var(--color-espresso-80);
cursor: pointer;
transition: color 0.3s ease;
}
.cart-coupon-toggle:hover {
color: var(--color-espresso);
}
.cart-coupon-arrow {
display: inline-flex;
color: var(--color-espresso-60);
transition: transform 0.3s ease;
}
.cart-coupon-toggle[aria-expanded="true"] .cart-coupon-arrow {
transform: rotate(180deg);
}
.cart-coupon-panel {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-bottom: 16px;
}
.cart-coupon-input {
flex: 1 1 140px;
min-width: 0;
padding: 8px 14px;
border: 1px solid var(--color-sand);
background-color: var(--color-white-40);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
color: var(--color-espresso);
border-radius: 4px;
transition: border-color 0.3s ease;
}
.cart-coupon-input:hover,
.cart-coupon-input:focus-visible {
border-color: var(--color-cinnamon);
}
.cart-coupon-apply {
flex: 0 0 auto;
padding: 8px 18px;
}
.cart-coupon-note {
flex: 1 1 100%;
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
color: var(--color-espresso-60);
}
.cart-coupon-note:empty {
display: none;
}
.cart-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 24px 0;
}
.cart-total-label,
.cart-total-value {
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.cart-checkout {
width: 100%;
justify-content: center;
text-align: center;
}
.checkout-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.checkout-fieldset {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
margin: 0;
padding: 0 0 24px;
border: none;
}
.checkout-fieldset:not(:last-child) {
border-bottom: 1px solid var(--color-espresso-15);
}
.checkout-legend {
padding: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h5);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-espresso);
margin-bottom: 16px;
}
.checkout-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.checkout-note {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 120%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.checkout-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.checkout-field {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.checkout-input {
width: 100%;
padding: 16px 24px 16px 16px;
border: 1px solid var(--color-espresso-20);
background-color: transparent;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.checkout-input::placeholder {
color: var(--color-espresso-50);
}
.checkout-input:hover {
border-color: var(--color-espresso-30);
}
.checkout-input:focus-visible {
border-color: var(--color-cinnamon);
}
.checkout-message {
min-height: 96px;
line-height: 150%;
resize: none;
}
.checkout-field-icon {
position: absolute;
top: 20px;
right: 16px;
display: inline-flex;
pointer-events: none;
color: var(--color-espresso-40);
}
.checkout-error {
font-weight: 500;
font-size: var(--tx-body-xs);
line-height: 140%;
color: var(--color-cinnamon);
}
.checkout-error:empty {
display: none;
}
.checkout-input[aria-invalid="true"] {
border-color: var(--color-cinnamon);
box-shadow: 0px 0px 0px 3px #BE581E26;
}
.checkout-check-input[aria-invalid="true"]+.checkout-check-label .checkout-check-box {
border-color: var(--color-cinnamon);
box-shadow: 0px 0px 0px 3px #BE581E26;
}
.checkout-more {
align-self: flex-start;
padding: 0;
border: none;
background: none;
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
cursor: pointer;
transition: color 0.3s ease;
}
.checkout-more:hover {
color: var(--color-cinnamon);
}
.checkout-more-panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.checkout-payment {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 16px;
border: 1px solid var(--color-sand);
background-color: transparent;
}
.checkout-pay-label,
.checkout-check-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.checkout-pay-dot {
position: relative;
flex: none;
width: 16px;
height: 16px;
margin-top: 1px;
border: 1.5px solid var(--color-espresso-30);
border-radius: 50%;
transition: border-color 0.3s ease;
}
.checkout-pay-dot::after {
content: '';
position: absolute;
inset: 2px;
opacity: 0;
background-color: var(--color-cinnamon);
border-radius: 50%;
transition: opacity 0.3s ease;
}
.checkout-pay-label:hover .checkout-pay-dot,
.checkout-check-label:hover .checkout-check-box {
border-color: var(--color-cinnamon);
}
.checkout-pay-input:checked+.checkout-pay-label .checkout-pay-dot {
border-color: var(--color-cinnamon);
}
.checkout-pay-input:checked+.checkout-pay-label .checkout-pay-dot::after {
opacity: 1;
}
.checkout-pay-name {
font-weight: 500;
font-size: var(--tx-body-xxs);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cinnamon);
}
.checkout-pay-note {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.checkout-check {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
}
.checkout-check-input:checked+.checkout-check-label .checkout-check-box {
border-color: var(--color-cinnamon);
background-color: var(--color-cinnamon);
}
.checkout-check-input:checked+.checkout-check-label .checkout-check-box::after {
opacity: 1;
}
.checkout-check-name {
font-weight: 500;
font-size: var(--tx-body-xxs);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cinnamon);
}
.checkout-terms a {
color: var(--color-cinnamon);
text-decoration: underline;
}
.checkout-alert {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
color: var(--color-cinnamon);
}
.checkout-alert:empty {
display: none;
}
.checkout-actions {
display: flex;
justify-content: flex-end;
}
.checkout-summary-items {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px 0;
}
.checkout-summary-items:empty {
display: none;
}
.checkout-summary-item {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
}
.checkout-summary-item+.checkout-summary-item {
padding-top: 16px;
border-top: 1px solid var(--color-espresso-15);
}
.checkout-summary-media {
display: block;
height: 76px;
overflow: hidden;
border-radius: 4px;
}
.checkout-summary-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checkout-summary-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.checkout-summary-name {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.checkout-summary-name a {
color: var(--color-espresso);
transition: color 0.3s ease;
}
.checkout-summary-name a:hover {
color: var(--color-cinnamon);
}
.checkout-summary-qty {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.checkout-summary-note {
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.checkout-summary-price {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
white-space: nowrap;
color: var(--color-espresso);
}
.checkout-subtotal .cart-total-label,
.checkout-subtotal .cart-total-value {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.checkout-grand {
border-top: 1px solid var(--color-espresso-15);
padding-bottom: 0;
}
.checkout-summary .cart-empty {
padding: 24px 0;
}
.checkout-done {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: 620px;
padding: 32px;
background-color: var(--color-white-40);
box-shadow: 2px 8px 24px 0px #00000014;
margin: 0 auto;
border-radius: 8px;
}
.checkout-done-title {
font-size: var(--tx-h3);
color: var(--color-espresso);
}
.checkout-done-note {
font-weight: 400;
font-size: var(--tx-body);
line-height: 150%;
color: var(--color-espresso-80);
}
.checkout-done-ref {
font-weight: 600;
color: var(--color-cinnamon);
}
.product-card-cart.is-added,
.product-card:hover .product-card-cart.is-added {
border-color: var(--color-cinnamon);
background-color: var(--color-cinnamon);
color: var(--color-cream-bg);
box-shadow: 0px 0px 0px 3px #BE581E33;
}
.promo-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: stretch;
gap: 24px;
}
.promo-hero,
.promo-card {
position: relative;
min-width: 0;
overflow: hidden;
background-color: var(--color-white);
box-shadow: 2px 10px 32px 0px #00000014;
}
.promo-hero {
background: linear-gradient(270deg, rgba(205, 169, 142, 0) 15.96%, #FFFFFF 85.99%);
padding: 48px 32px;
background-image: url(../img/offer-bg.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
}
.promo-hero-content {
position: relative;
z-index: 2;
min-width: 0;
display: flex;
flex-direction: column;
gap: 32px;
max-width: 244px;
}
.promo-hero-content .section-heading p {
color: var(--color-espresso);
}
.promo-badge {
position: absolute;
top: 50%;
left: 55%;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: 120px;
height: 120px;
background-color: var(--color-cinnamon);
color: var(--color-cream-bg);
text-align: center;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.promo-badge-lead,
.promo-badge-unit {
font-weight: 400;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-transform: uppercase;
}
.promo-badge-value {
font-family: var(--font-display);
font-size: var(--tx-h3);
line-height: 100%;
}
.promo-cards {
display: grid;
min-width: 0;
grid-template-rows: 1fr 1fr;
gap: 24px;
}
.promo-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 210px;
align-items: center;
gap: 16px;
padding: 16px 24px;
}
.promo-card-content {
display: flex;
flex-direction: column;
min-width: 0;
align-items: flex-start;
gap: 16px;
}
.promo-card-badge {
padding: 4px 12px;
width: fit-content;
background-color: var(--color-cinnamon-15);
font-weight: 600;
font-size: var(--tx-body-xs);
line-height: 16px;
letter-spacing: 8%;
color: var(--color-cinnamon);
text-transform: uppercase;
border-radius: 8px;
}
.promo-card-heading {
display: flex;
flex-direction: column;
gap: 8px;
}
.link-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
color: var(--color-espresso);
transition: color 0.3s ease;
}
.link-btn span {
transition: transform 0.3s ease;
}
:is(.promo-card, .blog-card):hover .link-btn,
.link-btn:hover {
color: var(--color-cinnamon);
}
.link-btn:hover span,
:is(.promo-card, .blog-card):hover .link-btn span {
transform: translateX(4px);
}
.promo-card-media {
position: relative;
min-width: 0;
height: 176px;
}
.promo-card-media img {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.4s ease;
}
.promo-card:hover .promo-card-media img {
transform: translateY(-6px);
}
.origins .origins-wrapper {
display: flex;
flex-direction: column;
gap: 32px;
}
.origins-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.origin-card {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
min-width: 0;
text-align: center;
}
.origin-card-media {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid var(--color-espresso-30);
border-radius: 50%;
background-color: var(--color-caramel-05);
}
.origin-card-icon {
width: auto;
height: auto;
max-width: 62%;
max-height: 62%;
fill: var(--color-espresso);
}
.origin-card-body {
padding: 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.origin-card-title a {
color: inherit;
}
.origin-card-title a::after {
content: "";
position: absolute;
inset: 0;
}
.origin-card-region {
width: 100px;
padding-top: 12px;
border-top: 1px solid var(--color-cinnamon-15);
font-size: var(--tx-body-sm);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-cinnamon);
}
.subscribe {
background-color: var(--color-espresso-deep);
}
.subscribe-grid {
display: grid;
grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
align-items: stretch;
overflow: hidden;
}
.subscribe-media {
position: relative;
min-width: 0;
overflow: hidden;
background-color: var(--color-espresso-deep);
box-shadow: 2px 10px 40px 0px #5F220E52;
}
.subscribe-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.subscribe-stamp {
position: absolute;
top: 20px;
right: 32px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 290px;
height: 127px;
padding: 8px 46px;
margin: 0;
box-sizing: border-box;
background: var(--color-cinnamon);
color: var(--color-oat);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
-webkit-mask:
radial-gradient(circle 33px at 0 50%,
transparent 32px,
#000 33px),
radial-gradient(circle 33px at 100% 50%,
transparent 32px,
#000 33px);
mask:
radial-gradient(circle 33px at 0 50%,
transparent 32px,
#000 33px),
radial-gradient(circle 33px at 100% 50%,
transparent 32px,
#000 33px);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.subscribe-stamp-lead,
.subscribe-stamp-unit {
font-weight: 400;
font-size: var(--tx-body-sm);
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
color: var(--color-oat);
}
.subscribe-stamp-value {
font-family: var(--font-display);
font-size: var(--tx-h2);
line-height: 100%;
text-transform: uppercase;
color: var(--color-cream-bg);
}
.subscribe-content {
display: flex;
flex-direction: column;
min-width: 0;
gap: 32px;
padding: 100px 48px;
max-width: 791px;
}
.subscribe-content .section-heading h2 {
color: var(--color-cream-bg);
}
.subscribe-content .section-heading h2 span {
color: var(--color-caramel);
}
.subscribe-content .section-heading p,
.subscribe-content .list-tag li {
color: var(--color-sand);
}
.subscribe-list-tag li::after {
background-image: url('data:image/svg+xml,');
}
.subscribe-plans {
min-width: 0;
border: 0;
}
.subscribe-plans-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: center;
}
.subscribe-plan {
position: relative;
min-width: 0;
}
.subscribe-plan-flag {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
padding: 4px 6px;
background-color: var(--color-cinnamon);
font-weight: 500;
font-size: var(--tx-body-xs);
line-height: 100%;
letter-spacing: 0%;
text-transform: uppercase;
white-space: nowrap;
color: var(--color-cream-bg);
pointer-events: none;
border-radius: 4px;
transform: translate(-50%, -50%);
}
.subscribe-plan-label {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
height: 100%;
padding: 20px 16px 16px;
border: 1px solid var(--color-sand-30);
text-align: center;
cursor: pointer;
background: var(--color-cinnamon-05);
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.subscribe-plan-input:checked+.subscribe-plan-label {
border-color: var(--color-cinnamon);
background-color: var(--color-cinnamon-20);
box-shadow: 2px 10px 32px 0px #E74F0B14;
border-radius: 8px;
}
.subscribe-plan-heading {
display: flex;
flex-direction: column;
gap: 4px;
border-bottom: 1px solid var(--color-white-23);
width: 100%;
padding-bottom: 10px;
}
.subscribe-plan-name {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h5);
line-height: 100%;
letter-spacing: -1%;
text-align: center;
color: var(--color-cream-bg);
}
.subscribe-plan-detail {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: var(--color-cream-bg);
}
.subscribe-plan-price {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h5);
line-height: 100%;
letter-spacing: -1%;
text-align: center;
color: var(--color-cream-bg);
}
.subscribe-plan-check {
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
display: none;
}
.subscribe-plan-input:checked+.subscribe-plan-label .subscribe-plan-check {
display: inline-flex;
}
.plans-wrapper {
display: flex;
flex-direction: column;
gap: 48px;
}
.plans-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.plan-card {
display: flex;
flex-direction: column;
min-width: 0;
background-color: var(--color-white-60);
border: 1px solid var(--color-espresso-30);
}
.plan-card-popular {
background-color: var(--color-white-60);
border: 2px solid var(--color-cinnamon);
box-shadow: 2px 10px 16px 0px #00000029;
border-radius: 8px;
height: calc(100% + 20px);
margin-top: -10px;
}
.plan-flag {
padding: 8px 16px;
background-color: var(--color-cinnamon);
font-weight: 400;
font-size: var(--tx-body);
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
text-align: center;
color: var(--color-cream-bg);
}
.plan-body {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
padding: 32px 24px;
}
.plan-head {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-espresso-15);
text-align: center;
}
.plan-name {
font-size: var(--tx-h5);
color: var(--color-espresso);
}
.plan-card-popular .plan-name {
font-size: var(--tx-h3);
color: var(--color-cinnamon);
}
.plan-note {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.plan-pricing {
display: flex;
flex-direction: column;
gap: 8px;
}
.plan-price {
display: flex;
align-items: baseline;
gap: 6px;
}
.plan-price-value {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h3);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-espresso);
}
.plan-term {
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso-80);
}
.plan-billing {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.plan-benefits {
gap: 0px;
}
.plan-benefits li {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.plan-benefits li::after {
top: 6px;
}
.plan-save {
margin-top: 16px;
display: flex;
align-items: center;
gap: 16px;
}
.plan-save-badge {
width: 60px;
flex: none;
padding: 8px 10px;
background-color: var(--color-cinnamon-20);
border-radius: 4px;
font-weight: 500;
font-size: var(--tx-body);
line-height: 130%;
letter-spacing: 0%;
text-align: center;
color: var(--color-cinnamon);
}
.plan-save-text {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.plan-save-title {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h5);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-espresso);
}
.plan-save-note {
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.plan-cta {
width: 100%;
margin-top: auto;
padding: 12px 16px;
}
.plan-card-popular .plan-cta {
background-color: var(--color-cinnamon);
color: var(--color-cream-bg);
border-radius: 4px;
}
.process {
background-image: url(../img/about-vector-bg.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.process .process-wrapper {
display: grid;
grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
align-items: flex-start;
gap: 80px;
}
.process-intro {
min-width: 0;
}
.process-steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px;
min-width: 0;
}
.process-step {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
min-width: 0;
}
.process-step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background-color: var(--color-cinnamon-20);
color: var(--color-espresso);
border-radius: 50%;
}
.process-step-icon img {
width: 42px;
height: 42px;
object-fit: contain;
}
.process-step-number {
display: flex;
align-items: center;
align-self: stretch;
gap: 16px;
color: var(--color-cinnamon);
}
.process-step-number::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--color-sand);
}
.process-step-heading {
display: flex;
flex-direction: column;
gap: 8px;
}
.process-step-heading .process-step-note {
font-size: var(--tx-body);
color: var(--color-espresso);
}
.reviews {
background: linear-gradient(270deg, #251711 32.51%, rgba(37, 23, 17, 0) 66%), url(../img/review-bg.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.reviews .reviews-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 24px;
}
.reviews-intro {
min-width: 0;
gap: 32px;
}
:is(.reviews-intro, .reviews) .section-heading h2 {
color: var(--color-cream-bg);
}
.reviews .section-heading h2 span {
color: var(--color-caramel);
}
.reviews-intro .reviews-stats {
display: flex;
align-items: center;
gap: 32px;
}
.reviews-intro .reviews-rating {
display: flex;
align-items: center;
gap: 12px;
}
.reviews-intro .reviews-stars {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--color-caramel);
}
.reviews-intro .reviews-score {
color: var(--color-sand);
}
.reviews-intro .reviews-score-max {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
}
.reviews-intro .reviews-count {
display: flex;
flex-direction: column;
gap: 4px;
padding-left: 32px;
border-left: 1px solid var(--color-white-46);
}
.reviews-intro .reviews-count-value {
color: var(--color-caramel);
}
.reviews-intro .reviews-count-label {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
color: var(--color-sand);
}
.reviews-carousel {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
gap: 20px;
}
.reviews-track {
display: grid;
width: 100%;
min-width: 0;
}
.review-card {
grid-area: 1 / 1;
position: relative;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
gap: 56px;
padding: 40px 48px 32px;
background-color: var(--color-espresso-50);
position: relative;
border: 1px solid transparent;
box-shadow: 0px 8px 16px 0px #2B1305;
}
.review-card.is-active {
opacity: 1;
visibility: visible;
}
.review-quote-mark {
position: absolute;
top: 0;
left: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: var(--color-caramel);
color: var(--color-cream-bg);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.review-quote p {
font-weight: 500;
font-size: var(--tx-h5);
line-height: 38px;
letter-spacing: 2%;
color: var(--color-cream-bg);
}
.review-author {
display: flex;
align-items: center;
gap: 16px;
padding-top: 32px;
border-top: 1px solid transparent;
border-image: linear-gradient(90deg, rgba(216, 148, 85, 0.35) 36.8%, rgba(32, 18, 11, 0.35) 100%) 1;
}
.review-author-avatar {
width: 40px;
height: 40px;
flex: none;
overflow: hidden;
object-fit: cover;
border-radius: 50%;
}
.review-author-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.review-author-name {
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
color: var(--color-caramel);
}
.review-author-meta {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-sand);
}
.reviews-dots {
display: flex;
align-items: center;
gap: 8px;
}
.reviews-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
background-color: var(--color-cream-bg);
cursor: pointer;
border-radius: 4px;
transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
.reviews-dot.is-active {
width: 16px;
background-color: var(--color-cinnamon);
opacity: 1;
}
@media(max-width:1250px) {
.process .process-wrapper {
grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
gap: 40px;
}
.origin-card-media {
width: 140px;
height: 140px;
}
}
.blog .blog-wrapper {
display: flex;
flex-direction: column;
gap: 32px;
}
.blog-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px;
}
.blog-feature {
position: relative;
display: flex;
align-items: flex-end;
min-width: 0;
min-height: 400px;
overflow: hidden;
}
.blog-feature img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-feature::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90.13deg, rgba(0, 0, 0, 0.9) 16.21%, rgba(28, 28, 28, 0.653297) 31.45%, rgba(40, 40, 40, 0.63) 39.47%, rgba(102, 102, 102, 0) 99.89%);
}
.blog-feature-body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
max-width: 380px;
padding: 24px;
}
.blog-feature-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.blog-feature-heading {
display: flex;
flex-direction: column;
gap: 8px;
}
.blog-badge {
width: fit-content;
padding: 4px 10px;
background-color: var(--color-caramel-18);
border: 0.5px solid var(--color-caramel);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--tx-body);
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
color: var(--color-caramel);
border-radius: 4px;
}
.blog-feature-title {
position: relative;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--tx-body-lg);
line-height: 28px;
letter-spacing: 2%;
color: var(--color-cream-90);
padding-bottom: 8px;
}
.blog-feature-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 62px;
height: 2px;
background-color: var(--color-cinnamon);
}
.blog-feature-note {
font-weight: 500;
font-size: var(--tx-body);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-cream-90);
}
.blog-feature .link-btn {
color: var(--color-cream-bg);
}
.blog-feature:hover .link-btn,
.blog-feature .link-btn:hover {
color: var(--color-caramel);
}
.blog-list {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 24px;
min-width: 0;
}
.blog-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-width: 0;
background-color: var(--color-white-40);
overflow: hidden;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.blog-card-media {
position: relative;
min-width: 0;
overflow: hidden;
}
.blog-card-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card-media::before,
.blog-card-media::after {
content: '';
position: absolute;
z-index: 1;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.blog-card-media::after {
inset: 0;
background-color: var(--color-espresso-40);
}
.blog-card-media::before {
top: 50%;
left: 50%;
z-index: 2;
width: 56px;
height: 56px;
background-color: var(--color-cinnamon);
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.7);
}
.blog-card:hover .blog-card-media::after {
opacity: 1;
}
.blog-card:hover .blog-card-media::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.blog-card:hover .blog-card-media img {
transform: scale(1.06);
}
.blog-card-body {
display: flex;
flex-direction: column;
gap: 100px;
min-width: 0;
padding: 24px 16px;
}
.blog-card-heading {
display: flex;
flex-direction: column;
gap: 8px;
}
.blog-card-category {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cinnamon);
}
.blog-card-category::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
flex: none;
background-color: var(--color-cinnamon);
}
.blog-card-title {
font-family: var(--font-body);
font-weight: 600;
font-size: 20px;
line-height: 28px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.blog-card-body .blog-card-note {
font-size: var(--tx-body);
}
.blog-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: auto;
}
.blog-card-meta {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-50);
}
.blog-card-footer .link-btn {
font-size: var(--tx-body-sm);
flex: none;
}
@media(max-width:1360px) {
.blog-card-footer {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
.blog-posts-wrapper {
display: flex;
flex-direction: column;
gap: 32px;
}
.blog-posts-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.blog-posts .blog-card {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.blog-posts .blog-card-media {
aspect-ratio: 3/2;
}
.blog-posts .blog-card-body {
gap: 32px;
padding: 16px 24px 32px;
}
.blog-posts .blog-card-heading {
gap: 8px;
}
.blog-posts .blog-card-footer {
flex-direction: row;
align-items: center;
gap: 12px;
}
.article .breadcrumb {
margin-bottom: 0;
}
.article-layout {
display: grid;
grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
align-items: start;
gap: 48px;
}
.article-main {
display: flex;
flex-direction: column;
min-width: 0;
gap: 32px;
}
.article-head {
display: flex;
flex-direction: column;
gap: 8px;
}
.article-title-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.article-title {
font-size: var(--tx-h2);
line-height: 110%;
color: var(--color-espresso);
}
.article-meta {
flex: none;
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.article-media {
position: relative;
aspect-ratio: 2/1;
overflow: hidden;
}
.article-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.article-lead-share {
display: flex;
flex-direction: column;
gap: 16px;
}
.article-lead {
font-weight: 500;
font-size: 16px;
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.article-share {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.article-share-label {
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.article-share-links {
display: flex;
align-items: center;
gap: 8px;
}
.article-share-links li {
display: flex;
}
.article-share-link {
display: inline-flex;
color: var(--color-espresso-80);
transition: color 0.3s ease;
}
.article-share-link:hover {
color: var(--color-cinnamon);
}
.article-toc {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px;
background: linear-gradient(270deg, #251711 32.51%, #251711 66%);
overflow: hidden;
border: 1px solid #2E1B1299
}
.article-toc::after {
content: '';
position: absolute;
right: -80px;
bottom: 0px;
z-index: -1;
width: 240px;
height: 240px;
background-image: url(../img/faq-vector.webp);
background-position: right bottom;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.2;
transform: rotateY(185deg);
}
.article-toc-title {
font-size: var(--tx-h5);
line-height: 120%;
color: #F8F3E9;
}
.article-toc-list {
display: flex;
flex-direction: column;
gap: 8px;
counter-reset: article-toc;
}
.article-toc-list li {
display: flex;
gap: 8px;
counter-increment: article-toc;
}
.article-toc-list li::before {
content: counter(article-toc) ".";
flex: none;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #F8F3E9;
}
.article-toc-link {
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #F8F3E9;
transition: color 0.3s ease;
}
.article-toc-link:hover {
color: var(--color-caramel);
}
.article-body {
display: flex;
flex-direction: column;
gap: 24px;
}
.article-section {
display: flex;
flex-direction: column;
gap: 16px;
scroll-margin-top: 120px;
}
.article-section+.article-section {
padding-top: 24px;
border-top: 1px solid var(--color-espresso-15);
}
.article-section-title {
font-size: var(--tx-h5);
line-height: 120%;
color: #2E1B12;
}
.article-note {
font-size: var(--tx-body);
}
.article-tools {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 16px;
}
.article-tool {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.article-tool-icon,
.article-tip-icon {
display: inline-flex;
flex: none;
color: var(--color-cinnamon);
}
.article-tool-name {
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: var(--color-espresso);
}
.article-steps {
display: flex;
flex-direction: column;
gap: 20px;
}
.article-step {
display: flex;
flex-direction: column;
gap: 6px;
}
.article-step-title {
font-family: var(--font-body);
font-weight: 500;
font-size: 20px;
line-height: 32px;
letter-spacing: 2%;
color: var(--color-espresso);
}
.article-tips {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.article-tip {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background-color: #EDE2C880;
}
.article-mistakes {
display: flex;
flex-direction: column;
gap: 8px;
}
.article-side {
min-width: 0;
}
.article-side-card {
display: flex;
flex-direction: column;
gap: 24px;
}
.article-side-group {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var(--color-espresso-15);
}
.article-side-title {
font-size: var(--tx-h3);
line-height: 120%;
color: var(--color-espresso);
}
.article-search .checkout-input {
padding-right: 44px;
}
.article-categories {
display: flex;
flex-direction: column;
gap: 16px;
}
.article-category {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: var(--color-espresso);
transition: color 0.3s ease;
}
.article-category:hover {
color: var(--color-cinnamon);
}
.article-category-name {
min-width: 0;
}
.article-category-count {
flex: none;
color: #2E1B1280;
}
.article-popular {
display: flex;
flex-direction: column;
gap: 16px;
}
.article-post {
display: flex;
align-items: flex-start;
gap: 16px;
}
.article-post-media {
position: relative;
flex: none;
width: 80px;
height: 80px;
overflow: hidden;
}
.article-post-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.article-post-body {
display: flex;
flex-direction: column;
min-width: 0;
gap: 6px;
}
.article-post-title {
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.article-post-title a {
color: inherit;
transition: color 0.3s ease;
}
.article-post-title a:hover {
color: var(--color-cinnamon);
}
.article-post-meta,
.article-popular-empty {
font-weight: 500;
font-size: var(--tx-body-xs);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-espresso-50);
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.article-tag {
display: inline-flex;
padding: 8px 12px;
border: 1px solid var(--color-espresso-20);
border-radius: 8px;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
background-color: transparent;
color: var(--color-espresso-80);
transition: color 0.3s ease, background-color 0.3s ease;
}
.article-tag:hover {
color: var(--color-cream-bg);
background-color: var(--color-cinnamon);
}
.blog-posts-more {
align-self: center;
padding: 14px 32px;
}
.comments {
position: relative;
z-index: 1;
background-color: var(--color-espresso);
overflow: hidden;
}
.comments-grid {
display: grid;
grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
align-items: start;
gap: 40px;
}
.comments-form,
.comments-panel {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
gap: 24px;
padding: 32px;
background-color: var(--color-espresso);
border: 1px solid transparent;
box-shadow: 2px 8px 24px 0px #00000029;
}
.comments-form::after,
.comments-panel::after {
content: "";
position: absolute;
inset: 0;
padding: 1px;
background: linear-gradient(293.99deg, rgba(0, 0, 0, 0) 66.48%, rgba(216, 148, 85, 0.55) 99.63%), linear-gradient(294.63deg, rgba(216, 148, 85, 0.55) 1.07%, rgba(102, 102, 102, 0) 50.64%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.comments-title {
font-size: var(--tx-h5);
line-height: 120%;
color: var(--color-cream-bg);
}
.comments-count {
font-family: var(--font-body);
font-weight: 600;
font-size: 20px;
line-height: 28px;
letter-spacing: 2%;
color: var(--color-cream-bg);
}
.comments-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.comments .checkout-input {
border-color: var(--color-cinnamon-30);
color: var(--color-cream-bg);
}
.comments .checkout-message {
scroll-margin-top: 120px;
}
.comments .checkout-input::placeholder {
color: var(--color-sand);
}
.comments .checkout-input:hover {
border-color: var(--color-cinnamon);
}
.comments .checkout-input:focus-visible {
border-color: var(--color-caramel);
}
.comments-post {
align-self: flex-start;
}
.comments-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.comments-sort {
padding: 0 0 3px;
border-bottom: 1px solid var(--color-caramel);
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-caramel);
}
.comments-list {
display: flex;
flex-direction: column;
}
.comment {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 8px 16px;
}
.comment+.comment {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--color-cinnamon-30);
}
.comment-avatar {
grid-area: 1 / 1 / 3 / 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-cream-bg);
font-weight: 600;
font-size: var(--tx-body-xs);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cinnamon);
border-radius: 50%;
}
.comment-head {
grid-area: 1 / 2 / 2 / 4;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
}
.comment-name {
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cream-bg);
}
.comment-date {
font-weight: 500;
font-size: 10px;
line-height: 100%;
letter-spacing: 0%;
color: #EDE2C8;
}
.comment-text {
grid-area: 2 / 2 / 3 / 3;
font-weight: 500;
font-size: 14px;
line-height: 140%;
letter-spacing: 0%;
color: #F8F3E9CC;
}
.comment-reply {
grid-area: 2 / 3 / 3 / 4;
align-self: end;
justify-self: end;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
margin-right: -4px;
border: none;
background-color: transparent;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
color: #D89455;
cursor: pointer;
transition: color 0.3s ease;
}
.comment-reply:hover {
color: var(--color-cream-bg);
}
.soon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 48px 0;
background-color: var(--color-cream-bg);
overflow: hidden;
}
.soon::before,
.soon::after {
content: '';
position: absolute;
z-index: 0;
background-repeat: no-repeat;
background-size: contain;
}
.soon::before {
left: 0;
bottom: 0;
width: 34vw;
max-width: 480px;
aspect-ratio: 1226/1283;
background-image: url(../img/Coming-soon.webp);
background-position: left bottom;
}
.soon::after {
right: 0;
top: 0;
width: 32vw;
max-width: 580px;
aspect-ratio: 1536/1024;
background-image: url(../img/Coming-soon1.webp);
background-position: right top;
}
.soon-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
max-width: 620px;
margin: 0 auto;
text-align: center;
}
.soon-logo {
display: inline-flex;
margin-bottom: 24px;
}
.soon-logo img {
width: 308px;
}
.soon-eyebrow {
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
color: var(--color-cinnamon);
position: relative;
}
.soon-eyebrow::after {
content: "";
position: absolute;
bottom: -4px;
width: 62px;
height: 1px;
background-color: var(--color-cinnamon);
left: 50%;
transform: translateX(-50%);
}
.soon-title {
position: relative;
color: var(--color-espresso);
}
.soon-title span {
position: relative;
color: var(--color-cinnamon);
}
.soon-title span::after {
content: '';
position: absolute;
top: 42%;
left: calc(100% + 12px);
width: 72px;
height: 48px;
background-image: url(../img/soon-vector.webp);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.soon-note {
max-width: 640px;
font-weight: 600;
font-size: 20px;
line-height: 28px;
letter-spacing: 2%;
text-align: center;
color: var(--color-espresso);
}
.soon-countdown {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
margin-top: 32px;
}
.soon-clock {
display: flex;
align-items: center;
justify-content: center;
}
.soon-unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0 32px;
}
.soon-unit+.soon-unit {
border-left: 1px solid #2E1B124D;
}
.soon-value {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h2);
line-height: 140%;
letter-spacing: -1%;
color: #2E1B12;
}
.soon-label {
font-weight: 600;
font-size: 20px;
line-height: 28px;
letter-spacing: 2%;
text-align: center;
color: #2E1B12;
}
.soon-live {
margin-top: 16px;
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 150%;
letter-spacing: 0%;
color: var(--color-espresso);
}
.soon-live a {
color: var(--color-cinnamon);
text-decoration: underline;
text-underline-offset: 4px;
}
.error {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 64px 0;
background-color: var(--color-cream-bg);
overflow: hidden;
}
.error::before,
.error::after {
content: '';
position: absolute;
z-index: 0;
background-repeat: no-repeat;
background-size: contain;
}
.error::before {
right: 0;
top: 50%;
width: 30vw;
max-width: 520px;
aspect-ratio: 1536/1024;
background-image: url(../img/Coming-soon1.webp);
background-position: right center;
transform: translateY(-50%);
}
.error::after {
left: 0;
bottom: 0;
width: 16vw;
max-width: 240px;
aspect-ratio: 1536/1024;
background-image: url(../img/soon-vector.webp);
background-position: left bottom;
opacity: 0.45;
}
.error-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.error-logo {
display: inline-flex;
margin-bottom: 12px;
}
.error-logo img {
width: 240px;
}
.error-eyebrow {
position: relative;
font-weight: 400;
font-size: var(--tx-body);
line-height: 24px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-cinnamon);
}
.error-eyebrow::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
width: 62px;
height: 1px;
background-color: var(--color-cinnamon);
transform: translateX(-50%);
}
.error-code {
font-size: var(--tx-display);
line-height: 100%;
color: var(--color-espresso);
text-shadow: 0 18px 36px #2E1B1226;
}
.error-title {
color: var(--color-espresso);
}
.error-title span {
color: var(--color-cinnamon);
}
.error-note {
max-width: 560px;
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 150%;
letter-spacing: 0%;
color: var(--color-espresso-80);
}
.error-actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 12px;
}
.footer-benefits {
background-color: var(--color-porcelain);
border-top: 1px solid var(--color-espresso-30);
}
.benefits-list {
display: flex;
gap: 24px;
justify-content: space-between;
padding: 32px 0;
flex-wrap: wrap;
}
.benefit {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
width: calc(25% - 18px);
}
.benefit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex: none;
background-color: var(--color-cream-bg);
border-radius: 50%;
}
.benefit-icon svg {
width: 40px;
height: 40px;
}
.benefit-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.benefit-label {
font-weight: 400;
font-size: var(--tx-body);
line-height: 24px;
letter-spacing: 8%;
text-transform: uppercase;
color: var(--color-espresso-80);
}
.benefit-note {
font-weight: 500;
font-size: var(--tx-body-lg);
line-height: 32px;
letter-spacing: 2%;
color: var(--color-espresso-80);
}
.shop-footer-benefits .benefit-note {
font-size: var(--tx-body-sm);
line-height: 140%;
}
.footer-main {
position: relative;
overflow: hidden;
padding: 80px 0 24px;
background-color: var(--color-espresso);
}
.footer-main .container {
position: relative;
z-index: 1;
}
.footer-wordmark-logo {
max-width: 860px;
height: auto;
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.2fr);
gap: 48px;
padding-bottom: 50px;
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
min-width: 0;
max-width: 360px;
}
.footer-logo img {
width: 218px;
height: auto;
}
.footer-brand p {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-white);
}
.footer-nav {
display: flex;
flex-direction: column;
gap: 32px;
min-width: 0;
}
.footer-nav-title,
.footer-signup-title {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--tx-h4);
line-height: 100%;
letter-spacing: -1%;
color: var(--color-cream-bg);
}
.footer-nav ul {
display: flex;
flex-direction: column;
gap: 24px;
}
.footer-nav a {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-oat);
transition: color 0.3s ease;
}
.footer-nav a::before {
content: "";
width: 5px;
height: 5px;
flex: none;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
:is(.footer-nav, .footer-copy, .footer-legal) a:hover {
color: var(--color-caramel);
}
.footer-signup {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.footer-signup-title {
display: flex;
align-items: center;
gap: 10px;
}
.footer-signup-icon {
display: inline-flex;
flex: none;
color: var(--color-cinnamon);
}
.footer-form {
display: flex;
align-items: stretch;
border: 1px solid var(--color-sand-80);
}
.footer-form-input {
flex: 1;
min-width: 0;
padding: 14px 16px;
border: none;
outline: none;
background-color: transparent;
font-weight: 500;
font-size: var(--tx-body);
line-height: 100%;
letter-spacing: 0%;
color: var(--color-cream-bg);
}
.footer-form-input::placeholder {
color: var(--color-white-23);
}
.footer-form-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: calc(100% - 9px);
margin: auto 5px;
flex: none;
padding: 0;
border: none;
background-color: var(--color-oat);
color: var(--color-cinnamon);
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-socials {
display: flex;
align-items: center;
gap: 12px;
}
.footer-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-cream-bg);
color: var(--color-cream-bg);
border-radius: 50%;
transition: color 0.3s ease, border-color 0.3s ease;
}
.footer-social:hover {
color: var(--color-caramel);
border-color: var(--color-caramel);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 16px;
border-top: 1px solid var(--color-white-30);
}
.footer-copy,
.footer-legal a {
font-weight: 500;
font-size: var(--tx-body-sm);
line-height: 140%;
letter-spacing: 0%;
color: var(--color-sand);
transition: color 0.3s ease;
}
.footer-copy a {
color: var(--color-sand);
}
.footer-legal {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 20px;
}
.footer-legal li {
position: relative;
}
.footer-legal li+li {
padding-left: 10px;
}
.footer-legal li+li::before {
content: "";
position: absolute;
left: -5px;
top: 50%;
width: 1px;
height: 100%;
background-color: var(--color-cream-30);
transform: translateY(-50%);
}
@media(max-width:1280px) {
.about-process-head,
.team-head {
grid-template-columns: minmax(0, 1fr) 720px;
}
}
@media(max-width:1200px) {
.error-content {
max-width: 560px;
}
.error::before {
width: 30vw;
max-width: 360px;
}
.error::after {
max-width: 200px;
}
.soon::before {
width: 30vw;
}
.soon::after {
width: 28vw;
}
.comments-grid {
gap: 32px;
}
.comments-form,
.comments-panel {
padding: 24px;
}
.article-layout {
gap: 32px;
}
.products-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.benefits-list .benefit {
width: calc(50% - 12px);
}
.benefit-note br {
display: none;
}
.about-process-head,
.team-head {
grid-template-columns: minmax(0, 1fr) 650px;
}
}
@media(max-width:1150px) {
.plans-grid {
gap: 16px;
}
.plan-body {
padding: 20px;
}
header .navbar .navbar-wrapper .logo,
header .navbar .navbar-wrapper .logo a {
max-width: 168px;
}
.footer-grid {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.2fr);
gap: 32px;
}
header .navbar nav ul,
header .navbar .social-icon {
gap: 24px;
}
.subscribe-grid {
grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
}
.subscribe-content {
padding: 32px;
}
.process .process-wrapper {
grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
}
.product-detail-grid {
grid-template-columns: 55% minmax(0, 1fr);
}
.product-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media(max-width:1100px) {
.faq-grid {
gap: 40px;
}
.faq-list {
padding: 8px 20px;
}
.contact-layout {
gap: 16px;
}
.purpose-grid {
gap: 36px;
}
.purpose-media {
padding: 32px 60px 20px 20px;
}
.purpose-media::before {
inset: 52px 80px 0 0;
}
.about .about-wrapper,
.about-why-grid {
gap: 36px;
}
.promo-card {
grid-template-columns: minmax(0, 1fr) 170px;
}
.promo-badge {
left: 75%;
}
.shop-layout {
grid-template-columns: 30% minmax(0, 1fr);
}
.shop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commitment-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 520px;
}
.commitment-stat {
padding: 20px 16px;
}
.commitment-stat+.commitment-stat {
border-left: none;
}
.commitment-stat:nth-child(even) {
border-left: 1px solid var(--color-cinnamon-30);
}
.commitment-stat:nth-child(n+3) {
border-top: 1px solid var(--color-cinnamon-30);
}
.about-process-content {
padding: 0 20px;
}
.about-process-head,
.team-head {
grid-template-columns: minmax(0, 1fr) 600px;
}
}
@media(max-width:1024px) {
.about-process-head,
.team-head {
grid-template-columns: minmax(0, 1fr) 520px;
}
}
@media(max-width:992px) {
.error-content {
max-width: 480px;
}
.error::before {
width: 26vw;
max-width: 200px;
}
.error::after {
width: 18vw;
max-width: 150px;
}
.soon::before,
.soon::after {
width: 26vw;
}
.soon-unit {
padding: 0 24px;
}
.comments-grid {
grid-template-columns: minmax(0, 1fr);
}
.article-layout {
grid-template-columns: minmax(0, 1fr);
}
.gift-cta-wrapper {
gap: 24px;
}
.gift-cta-media {
width: 160px;
margin-top: -36px;
}
.product-card .product-card-wishlist {
transform: translateX(0);
}
.plans-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.plan-card:last-child {
grid-column: 1 / -1;
width: calc(50% - 8px);
justify-self: center;
}
.purpose-media {
padding: 24px 48px 16px 16px;
}
.purpose-media::before {
inset: 40px 64px 0 0;
}
.purpose-inset {
width: 38%;
}
.about-process-head,
.team-head {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.about-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cart-layout {
grid-template-columns: minmax(0, 1fr) 350px;
gap: 16px;
}
.cart-products,
.cart-summary,
.checkout-form {
padding: 20px;
}
.checkout-form {
gap: 24px;
}
.promo-hero {
padding: 32px;
}
.promo-grid {
grid-template-columns: minmax(0, 1fr);
}
.promo-cards {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto;
}
header .navbar nav {
position: fixed;
top: 0;
left: 0%;
max-width: 320px;
width: 100%;
padding: 32px 24px;
height: 100vh;
height: 100dvh;
background-color: var(--color-cream-bg);
-webkit-backdrop-filter: blur(54px);
backdrop-filter: blur(54px);
z-index: 9;
box-shadow: 0px 8px 32px 0px #2E1B123D;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
header .navbar nav.navbar-open {
transform: translateX(0);
}
header .navbar nav ul {
flex-direction: column;
align-items: start;
gap: 32px;
}
header .close-icon,
header .navbar .open-menu {
display: inline-flex;
padding: 0;
border: none;
background: none;
color: var(--color-espresso-80);
cursor: pointer;
}
header .close-icon {
position: absolute;
top: 20px;
right: 20px;
}
header .close-icon svg {
width: 20px;
height: 20px;
}
.menu-overlay {
display: block;
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 8;
background-color: var(--color-espresso-43);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
header .navbar nav.navbar-open~.menu-overlay {
opacity: 1;
visibility: visible;
}
.hero {
padding: 100px 0;
}
.shop-hero,
.about-hero,
.subscriptions-hero,
.contact-hero {
padding: 100px 0;
}
.cart-hero,
.checkout-hero,
.wishlist-hero,
.gifts-hero,
.blog-hero {
padding: 56px 0;
background-size: 60% 100%;
}
.product-detail-grid {
grid-template-columns: minmax(0, 1fr);
}
.product-gallery-slide {
height: 620px;
}
.product-options {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shop-layout {
grid-template-columns: minmax(0, 1fr);
}
.shop-filters {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
width: min(320px, 86vw);
overflow-y: auto;
padding: 24px 20px 40px;
background-color: var(--color-white);
box-shadow: 0px 8px 32px 0px #2E1B123D;
visibility: hidden;
border-radius: 0;
transform: translateX(-100%);
transition: transform 0.3s ease, visibility 0.3s ease;
}
.shop-filters.is-open {
visibility: visible;
transform: translateX(0);
}
.shop-filters-head,
.shop-filters-toggle {
display: flex;
}
.shop-filters-overlay {
display: block;
position: fixed;
inset: 0;
z-index: 99;
background-color: var(--color-espresso-50);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.shop-filters-overlay.is-open {
opacity: 1;
visibility: visible;
}
.filter-option {
padding: 7px 0;
}
.filter-option+.filter-option {
margin-top: 4px;
}
.shop-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about .about-wrapper {
grid-template-columns: 1fr;
}
.about .about-img .about-coffee-lover {
right: 0;
}
.about .about-img {
max-width: 660px;
margin: 0 auto;
padding-right: 24px;
}
.about .about-img img {
height: 100%;
}
.origins-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.subscribe-grid {
grid-template-columns: minmax(0, 1fr);
}
.subscribe-content {
max-width: 100%;
}
.process .process-wrapper {
grid-template-columns: minmax(0, 1fr);
}
.reviews-intro {
flex-direction: row;
justify-content: space-between;
}
.reviews .reviews-wrapper {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
padding-bottom: 96px;
}
.footer-brand,
.footer-signup {
grid-column: span 2;
max-width: 100%;
}
.footer-bottom {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.blog-posts-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-grid {
grid-template-columns: minmax(0, 1fr);
}
.blog-feature {
min-height: 360px;
}
.blog-feature-body {
max-width: 560px;
}
.blog-card-footer {
align-items: center;
justify-content: space-between;
flex-direction: row;
margin-top: auto;
}
.process-steps {
gap: 24px;
}
.subscribe-media {
aspect-ratio: 3 / 2;
}
.subscribe-media img {
object-position: center 62%;
}
.plan-card-popular {
margin: 0;
height: 100%;
}
}
@media(max-width:860px) {
.faq-grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.faq::before {
background-position: left -120px bottom -80px, right -160px top -340px;
background-size: 260px auto, 220px auto;
}
.contact-layout {
grid-template-columns: minmax(0, 1fr);
}
.products-grid,
.shop-grid {
grid-template-columns: repeat(2, 1fr);
}
.promo-card {
grid-template-columns: minmax(0, 1fr) 130px;
}
.origins-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-tabs-grid {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.product-tablist {
width: 100%;
flex-direction: row;
overflow-x: auto;
scrollbar-width: 0;
background-color: transparent;
border: none;
gap: 10px;
}
.product-tab {
flex: 0 0 auto;
border-bottom: none;
border: 1px solid var(--color-sand-80);
font-size: var(--tx-body);
border-radius: 8px;
white-space: nowrap;
padding: 10px 16px;
}
.product-tab.is-active {
border-color: var(--color-cinnamon);
}
.product-tab::after {
bottom: 10px;
content: none;
}
.cart-layout {
grid-template-columns: minmax(0, 1fr);
}
.cart-item-quantity .product-quantity-btn {
flex: 0 0 40px;
height: 44px;
}
.cart-item-quantity .product-quantity-input {
height: 44px;
}
.cart-item-remove {
padding: 12px;
}
.about-why-grid {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.purpose-grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.purpose-main {
aspect-ratio: 5 / 4;
}
}
@media(max-width:768px) {
.error-content {
max-width: 600px;
}
.error::before {
top: 34px;
width: 62vw;
max-width: 280px;
background-position: center top;
}
.error::after {
width: 26vw;
max-width: 140px;
}
.article-tools {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cart-hero,
.checkout-hero,
.wishlist-hero,
.gifts-hero,
.blog-hero {
background-size: 60% 100%;
}
}
@media(max-width:680px) {
.error::before {
max-width: 250px;
}
.error::after {
max-width: 130px;
opacity: 0.35;
}
.soon {
padding: 100px 0 170px;
}
.soon::before,
.soon::after {
width: 200px;
}
.soon-title span::after {
width: 52px;
height: 36px;
left: calc(100% + 8px);
}
.comments-fields {
grid-template-columns: minmax(0, 1fr);
}
.article-title-row {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.article-tips {
grid-template-columns: minmax(0, 1fr);
}
.article-toc {
padding: 24px;
}
.gift-cta-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0 0 24px;
}
.gift-cta-media {
width: 140px;
margin-top: -32px;
margin-bottom: 0;
}
.plans-grid {
grid-template-columns: minmax(0, 1fr);
}
.plan-card:last-child {
grid-column: auto;
width: auto;
justify-self: stretch;
}
.checkout-grid {
grid-template-columns: minmax(0, 1fr);
}
.checkout-actions {
justify-content: stretch;
}
.checkout-place {
width: 100%;
justify-content: center;
text-align: center;
}
.checkout-done {
padding: 24px;
}
.cart-item {
grid-template-columns: 80px minmax(0, 1fr);
}
.cart-item-total {
grid-column: 2;
text-align: left;
}
.product-specs {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.hero {
padding: 60px 0;
}
.shop-hero,
.about-hero,
.subscriptions-hero,
.contact-hero {
padding: 60px 0;
}
.cart-hero,
.checkout-hero,
.wishlist-hero,
.gifts-hero,
.blog-hero {
padding: 44px 0;
background-size: 70% 100%;
}
.product-gallery {
grid-template-columns: minmax(0, 1fr);
}
.product-gallery-stage {
order: 1;
}
.product-gallery-dots {
order: 2;
grid-column: 1;
margin-top: 0;
}
.product-gallery-thumbs {
order: 3;
flex-direction: row;
flex-wrap: wrap;
overflow-x: auto;
padding-bottom: 4px;
}
ul.product-gallery-thumbs li {
flex: 0 0 calc(25% - 12px);
}
.product-gallery-slide {
height: 340px;
}
.product-gallery-slide img {
object-fit: contain;
}
.product-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.page-hero-content {
max-width: 100%;
}
.shop-sort {
margin-left: 0;
width: 100%;
}
.shop-sort-select {
width: 100%;
}
.pagination-arrow,
.pagination-page {
width: 44px;
height: 44px;
}
.promo-cards {
grid-template-columns: minmax(0, 1fr);
}
.promo-grid,
.promo-cards {
gap: 20px;
}
.promo-card-media {
height: 130px;
}
.subscribe-stamp {
width: 250px;
height: 107px;
-webkit-mask: radial-gradient(circle 20px at 0 50%,
transparent 19px,
#000 20px),
radial-gradient(circle 20px at 100% 50%,
transparent 19px,
#000 20px);
mask: radial-gradient(circle 20px at 0 50%,
transparent 19px,
#000 20px),
radial-gradient(circle 20px at 100% 50%,
transparent 19px,
#000 20px);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.subscribe-media {
aspect-ratio: 4 / 3;
}
.subscribe-plans-grid {
grid-template-columns: minmax(0, 1fr);
}
.subscribe-plan-label {
padding: 14px 12px;
}
.process-steps {
grid-template-columns: minmax(0, 1fr);
}
.reviews-intro {
flex-direction: column;
}
.review-card {
gap: 40px;
padding: 40px 20px 20px;
}
.review-quote-mark {
width: 38px;
height: 38px;
}
.review-quote-mark svg {
width: 24px;
height: 24px;
}
.blog-posts-grid {
grid-template-columns: minmax(0, 1fr);
}
.blog-posts .blog-card-media {
height: auto;
}
.blog-card {
grid-template-columns: minmax(0, 1fr);
}
.blog-card-media {
height: 280px;
}
.blog-card-body {
gap: 60px;
}
.blog-feature {
min-height: 420px;
}
.about-process-grid {
grid-template-columns: minmax(0, 1fr);
}
.team-grid {
grid-template-columns: minmax(0, 1fr);
}
.about-process-media img {
aspect-ratio: 3 / 2;
}
}
@media(max-width:576px) {
.error {
padding: 165px 0 90px;
}
.error::before {
max-width: 200px;
}
.error::after {
max-width: 110px;
}
.error-content {
gap: 16px;
}
.error-logo img {
width: 190px;
}
.error-actions {
align-items: stretch;
flex-direction: column;
width: 100%;
}
.error-actions .btn,
.error-actions .btn-outline-v1 {
width: 100%;
justify-content: center;
}
.soon-unit {
padding: 0 12px;
}
.soon::before,
.soon::after {
width: 160px;
}
.comment-head {
grid-area: 1 / 2 / 2 / 3;
}
.comment-reply {
grid-area: 3 / 2 / 4 / 3;
justify-self: start;
margin-left: -4px;
margin-right: 0;
}
.article-media {
aspect-ratio: 3/2;
}
.article-tools {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faq-list {
padding: 4px 16px;
}
.faq-toggle {
gap: 16px;
padding: 18px 0;
font-size: var(--tx-body-sm);
}
.contact-form,
.contact-info {
padding: 20px 16px;
}
.contact-send {
align-self: stretch;
padding: 14px 24px;
}
.plans-wrapper {
gap: 32px;
}
.plan-body {
padding: 20px 16px;
}
.plan-save {
align-items: flex-start;
gap: 10px;
}
.purpose-media {
padding: 20px 40px 14px 14px;
}
.purpose-media::before {
inset: 34px 54px 0 0;
}
.purpose-inset {
width: 34%;
}
.purpose .btn {
align-self: stretch;
justify-content: center;
}
.about-process-wrapper {
gap: 36px;
}
.about-process-grid {
gap: 32px;
}
.team-wrapper {
gap: 36px;
}
.team-grid {
gap: 24px;
}
.commitment-wrapper {
gap: 28px;
}
.commitment-stat {
gap: 8px;
padding: 16px 8px;
}
.about-why .btn-outline {
align-self: stretch;
}
.cart-hero,
.checkout-hero,
.wishlist-hero,
.gifts-hero,
.blog-hero {
background-position: center right;
background-size: cover;
}
.gifts-hero {
background-image:
linear-gradient(270deg,
rgba(46, 27, 18, 0.45) 18%,
rgba(46, 27, 18, 0.92) 88%),
url(../img/gift-bg.webp);
}
.product-review-head {
flex-wrap: wrap;
}
.product-review-rating {
margin-left: 52px;
}
.product-options {
grid-template-columns: minmax(0, 1fr);
}
.gift-detail .product-options {
grid-template-columns: minmax(0, 1fr);
}
.product-gallery-slide {
height: 300px;
}
.product-gallery-prev {
left: 8px;
}
.product-gallery-next {
right: 8px;
}
.origins-grid {
gap: 24px;
}
.btn {
padding: 12px 30px;
}
header .navbar .navbar-wrapper .logo,
header .navbar .navbar-wrapper .logo a {
max-width: 168px;
}
header .navbar .social-icon {
gap: 14px;
}
header .navbar .social-icon .icons svg {
width: 20px;
height: 20px;
}
.products-grid,
.shop-grid {
grid-template-columns: repeat(1, 1fr);
}
.promo-hero,
.promo-card {
padding: 16px;
}
.promo-badge {
left: 85%;
top: 81%;
width: 90px;
height: 90px;
}
.subscribe-content {
padding: 24px 16px;
}
.subscribe-stamp {
right: 16px;
padding: 10px 16px 22px;
}
.reviews-stats {
flex-wrap: wrap;
}
.benefits-list .benefit {
width: 100%;
}
.footer-grid {
grid-template-columns: minmax(0, 1fr);
padding-bottom: 72px;
}
.footer-brand,
.footer-signup {
grid-column: auto;
}
.reviews-intro .reviews-stats {
gap: 10px;
}
.reviews-intro .reviews-count {
padding-left: 10px;
}
.blog-card-footer {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.great-cup {
background-position: left;
}
}
@media(max-width:425px) {
.product-gallery-thumb {
height: 82px;
}
.origins-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media(max-width:375px) {
.product-gallery-thumb {
height: 100px;
}
ul.product-gallery-thumbs li {
flex: 0 0 calc(50% - 8px);
}
}