:root {
--theme: #0f7c56;
--theme-2: #14b87f;
--theme-soft: #e7f6ef;
--bg: #ffffff;
--bg-2: #f5f7f6;
--surface: #ffffff;
--line: #e6eae8;
--txt: #101613;
--txt-2: #5c6a64;
--shadow: 0 18px 40px -18px rgba(16, 22, 19, .22);
--radius: 26px;
--f-head: 'Sora', sans-serif;
--f-body: 'Inter', sans-serif;
--f-mono: 'JetBrains Mono', monospace;
}
[data-theme="dark"] {
--bg: #0b1110;
--bg-2: #111a18;
--surface: #141e1b;
--line: #22302c;
--txt: #eaf3ef;
--txt-2: #9db0a8;
--theme-soft: #132520;
--shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
}
* {
scroll-behavior: smooth
}
body {
background: var(--bg);
color: var(--txt);
font-family: var(--f-body);
overflow-x: hidden;
transition: background .45s ease, color .45s ease
}
h1,
h2,
h3,
h4,
h5,
.brand {
font-family: var(--f-head);
letter-spacing: -.03em;
font-weight: 700
}
.mono {
font-family: var(--f-mono)
}
.tsec {
color: var(--theme)
}
.muted {
color: var(--txt-2)
}
section {
position: relative
}
::-webkit-scrollbar {
width: 9px;
height: 9px
}
::-webkit-scrollbar-track {
background: var(--bg-2)
}
::-webkit-scrollbar-thumb {
background: var(--theme);
border-radius: 9px
}
/* ---------- NAV (pill, like reference) ---------- */
.nav-wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1040;
padding: 14px 0;
transition: .35s
}
.nav-wrap.stuck {
padding: 8px 0;
backdrop-filter: blur(14px);
background: color-mix(in srgb, var(--bg) 80%, transparent)
}
.brand-mark {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--theme);
color: #fff;
font-size: 1.25rem;
box-shadow: 0 8px 20px -8px var(--theme)
}
.pillnav {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px;
box-shadow: var(--shadow);
display: flex;
gap: 2px
}
.pillnav a {
padding: .55rem 1.05rem;
border-radius: 999px;
font-size: .9rem;
font-weight: 600;
color: var(--txt-2);
text-decoration: none;
transition: .25s;
white-space: nowrap
}
.pillnav a:hover {
color: var(--theme)
}
.pillnav a.active {
background: var(--theme);
color: #fff
}
.icon-btn {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: var(--surface);
color: var(--txt);
position: relative;
transition: .25s
}
.icon-btn:hover {
background: var(--theme);
color: #fff;
transform: translateY(-3px)
}
.icon-btn .cnt {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
border-radius: 999px;
background: #f43f5e;
color: #fff;
font-size: .68rem;
font-weight: 700;
display: grid;
place-items: center;
padding: 0 5px
}
@keyframes pop {
0% {
transform: scale(1)
}
45% {
transform: scale(1.5)
}
100% {
transform: scale(1)
}
}
.pop {
animation: pop .4s ease
}
/* ---------- HERO ---------- */
#hero {
padding: 130px 0 40px;
overflow: hidden
}
.hero-blob {
position: absolute;
right: -6%;
top: -8%;
width: 640px;
height: 640px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--theme-2), var(--theme));
transition: background 1s cubic-bezier(.16, 1, .3, 1);
filter: saturate(1.05)
}
.hero-blob:after {
content: "";
position: absolute;
inset: -40px;
border-radius: 50%;
border: 1px dashed color-mix(in srgb, var(--theme) 45%, transparent)
}
.h-title {
font-size: clamp(2.3rem, 3vw, 2rem);
line-height: 1.04;
font-weight: 800
}
.h-title em {
font-style: normal;
color: var(--theme)
}
.h-price {
font-family: var(--f-mono);
font-size: clamp(1.9rem, 2.4vw, 2rem);
color: var(--theme);
font-weight: 700
}
.qty-pill {
display: inline-flex;
align-items: center;
gap: .4rem;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 999px;
padding: .3rem
}
.qty-pill button {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--bg-2);
color: var(--txt);
font-weight: 700
}
.qty-pill button:hover {
background: var(--theme);
color: #fff
}
.btn-theme {
background: var(--theme);
color: #fff;
border: none;
border-radius: 999px;
padding: .72rem 1.6rem;
font-weight: 600;
transition: .28s;
box-shadow: 0 12px 24px -12px var(--theme)
}
.btn-theme:hover {
color: #fff;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 18px 30px -12px var(--theme)
}
.btn-ghost {
border: 1.5px solid var(--line);
background: transparent;
color: var(--txt);
border-radius: 999px;
padding: .72rem 1.6rem;
font-weight: 600;
transition: .28s;
display: inline-block
}
.btn-ghost:hover {
border-color: var(--theme);
color: var(--theme);
transform: translateY(-3px)
}
.stage {
perspective: 1400px;
position: relative;
height: min(62vw, 520px)
}
.stage-img {
position: absolute;
inset: 0;
margin: auto;
width: 74%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .55);
transform-style: preserve-3d;
border: 10px solid rgba(255, 255, 255, .35)
}
@keyframes flyIn {
0% {
opacity: 0;
transform: translateZ(-620px) rotateY(-95deg) rotateX(25deg) scale(.35)
}
55% {
opacity: 1;
transform: translateZ(90px) rotateY(14deg) rotateX(-6deg) scale(1.08)
}
100% {
opacity: 1;
transform: translateZ(0) rotateY(0) rotateX(0) scale(1)
}
}
.fly {
animation: flyIn 1s cubic-bezier(.2, .9, .25, 1) both
}
@keyframes float {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-16px)
}
}
.floaty {
animation: float 6s ease-in-out infinite
}
.bean {
position: absolute;
border-radius: 50%;
background: var(--theme);
opacity: .85;
filter: blur(.2px)
}
.spin-ring {
position: absolute;
inset: 6%;
border-radius: 50%;
border: 2px dotted rgba(255, 255, 255, .5);
animation: spin 26s linear infinite
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
@keyframes txtUp {
from {
opacity: 0;
transform: translateY(22px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.reveal {
animation: txtUp .6s ease both
}
.mini-card {
width: 104px;
border-radius: 20px;
padding: 8px;
background: var(--surface);
border: 1px solid var(--line);
cursor: pointer;
transition: .3s;
text-align: center;
flex: 0 0 auto
}
.mini-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 14px
}
.mini-card:hover {
transform: translateY(-10px) rotate(-2deg)
}
.mini-card.on {
border-color: var(--theme);
box-shadow: 0 14px 26px -14px var(--theme);
transform: translateY(-8px)
}
.mini-card .nm {
font-size: .63rem;
font-weight: 700;
line-height: 1.2;
margin-top: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.mini-card .pr {
font-family: var(--f-mono);
font-size: .7rem;
color: var(--theme);
font-weight: 700
}
.tagchip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .75rem;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
background: var(--theme-soft);
color: var(--theme)
}
/* ---------- ALERTS ---------- */
#alertZone {
position: fixed;
top: 88px;
right: 18px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 10px;
width: 330px;
max-width: calc(100vw - 36px)
}
.alert-card {
position: relative;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
border-left: 5px solid var(--theme);
border-radius: 16px;
padding: 12px 14px;
box-shadow: var(--shadow);
display: flex;
gap: 11px;
align-items: flex-start;
animation: alertIn .55s cubic-bezier(.2, 1.4, .4, 1) both
}
.alert-card.out {
animation: alertOut .4s ease forwards
}
@keyframes alertIn {
0% {
opacity: 0;
transform: translateX(120%) rotate(6deg) scale(.8)
}
100% {
opacity: 1;
transform: none
}
}
@keyframes alertOut {
to {
opacity: 0;
transform: translateX(120%) scale(.85)
}
}
.alert-ic {
width: 34px;
height: 34px;
border-radius: 11px;
display: grid;
place-items: center;
background: var(--theme);
color: #fff;
flex: 0 0 auto;
animation: icPop .6s .1s both
}
@keyframes icPop {
0% {
transform: scale(0) rotate(-90deg)
}
60% {
transform: scale(1.25) rotate(8deg)
}
100% {
transform: scale(1)
}
}
.alert-bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
background: var(--theme);
animation: bar 3.6s linear forwards
}
@keyframes bar {
from {
width: 100%
}
to {
width: 0
}
}
/* ---------- SECTION HEADERS ---------- */
.eyebrow {
font-size: .72rem;
letter-spacing: .22em;
font-weight: 700;
color: var(--theme);
text-transform: uppercase
}
.sec-title {
font-size: clamp(1.8rem, 3.6vw, 2.8rem);
font-weight: 800
}
.line-deco {
height: 1px;
background: linear-gradient(90deg, var(--theme), transparent);
flex: 1
}
/* ---------- ABOUT bento ---------- */
.bento {
display: grid;
gap: 16px;
grid-template-columns: repeat(4, 1fr)
}
.bento>div {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 24px;
padding: 24px;
position: relative;
overflow: hidden;
transition: .35s
}
.bento>div:hover {
transform: translateY(-6px);
border-color: var(--theme)
}
.b-lg {
grid-column: span 2;
grid-row: span 2
}
.b-md {
grid-column: span 2
}
.b-sm {
grid-column: span 1
}
.b-num {
font-family: var(--f-mono);
font-size: 2.6rem;
font-weight: 700;
color: var(--theme);
line-height: 1
}
.glow {
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
background: var(--theme);
filter: blur(70px);
opacity: .22;
right: -40px;
bottom: -40px
}
@media(max-width:900px) {
.bento {
grid-template-columns: repeat(2, 1fr)
}
.b-lg,
.b-md {
grid-column: span 2
}
}
/* ---------- CATEGORY marquee-rail ---------- */
.cat-tile {
min-width: 230px;
border-radius: 24px;
padding: 22px;
background: var(--surface);
border: 1px solid var(--line);
position: relative;
overflow: hidden;
cursor: pointer;
transition: .4s
}
.cat-tile .sweep {
position: absolute;
inset: 0;
background: var(--theme);
transform: translateY(101%);
transition: .45s cubic-bezier(.16, 1, .3, 1);
z-index: 0
}
.cat-tile:hover .sweep {
transform: translateY(0)
}
.cat-tile>* {
position: relative;
z-index: 1;
transition: .35s
}
.cat-tile:hover,
.cat-tile:hover .muted,
.cat-tile:hover .mono {
color: #fff !important
}
.rail {
display: flex;
gap: 16px;
overflow-x: auto;
padding: 10px 4px 22px;
scroll-snap-type: x mandatory
}
.rail>* {
scroll-snap-align: start
}
.rail::-webkit-scrollbar {
height: 6px
}
/* ---------- FEATURED coverflow ---------- */
.cover {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 26px 4px;
perspective: 1200px
}
.cover-card {
flex: 0 0 260px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 26px;
overflow: hidden;
transition: .5s cubic-bezier(.16, 1, .3, 1);
transform-style: preserve-3d
}
.cover-card:hover {
transform: translateY(-14px) rotateY(-8deg) rotateX(4deg);
box-shadow: var(--shadow);
border-color: var(--theme)
}
.cover-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
transition: .6s
}
.cover-card:hover img {
transform: scale(1.09)
}
/* ---------- PRODUCTS: unique "pod" cards ---------- */
.pod {
position: relative;
border-radius: 28px;
padding: 74px 18px 18px;
background: var(--surface);
border: 1px solid var(--line);
text-align: center;
transition: .45s cubic-bezier(.16, 1, .3, 1);
height: 100%;
overflow: visible;
transform-style: preserve-3d
}
.pod:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 120px;
border-radius: 28px 28px 60% 60%/28px 28px 40% 40%;
background: linear-gradient(160deg, var(--pc, var(--theme)), color-mix(in srgb, var(--pc, var(--theme)) 55%, #000));
opacity: .16;
transition: .4s
}
.pod:hover {
transform: translateY(-12px);
border-color: var(--pc, var(--theme));
box-shadow: 0 28px 50px -26px var(--pc, var(--theme))
}
.pod:hover:before {
opacity: .3;
height: 150px
}
.pod-img {
width: 118px;
height: 118px;
border-radius: 50%;
object-fit: cover;
margin: -56px auto 10px;
display: block;
position: relative;
border: 6px solid var(--surface);
box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5);
transition: .55s cubic-bezier(.16, 1, .3, 1)
}
.pod:hover .pod-img {
transform: translateY(-14px) rotate(6deg) scale(1.1)
}
.pod .cat {
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pc, var(--theme))
}
.pod h5 {
font-size: .98rem;
margin: .35rem 0;
min-height: 2.4em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.pod .pz {
font-family: var(--f-mono);
font-size: 1.3rem;
font-weight: 700
}
.pod .acts {
display: flex;
gap: 6px;
justify-content: center;
margin-top: 12px;
opacity: .55;
transform: translateY(6px);
transition: .35s
}
.pod:hover .acts {
opacity: 1;
transform: none
}
.mini-act {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--bg-2);
color: var(--txt);
display: grid;
place-items: center;
transition: .25s
}
.mini-act:hover {
background: var(--pc, var(--theme));
color: #fff;
transform: translateY(-3px)
}
.mini-act.wished {
background: #f43f5e;
color: #fff;
border-color: #f43f5e
}
.add-btn {
border: none;
border-radius: 12px;
padding: .55rem 1rem;
font-weight: 600;
font-size: .85rem;
background: var(--pc, var(--theme));
color: #fff;
transition: .25s
}
.add-btn:hover {
filter: brightness(1.1);
transform: translateY(-3px);
color: #fff
}
@keyframes podIn {
from {
opacity: 0;
transform: translateY(40px) rotateX(-18deg)
}
to {
opacity: 1;
transform: none
}
}
.pod-anim {
animation: podIn .6s cubic-bezier(.2, .9, .3, 1) both
}
.chip {
border: 1px solid var(--line);
background: var(--surface);
color: var(--txt-2);
border-radius: 999px;
padding: .45rem 1rem;
font-size: .85rem;
font-weight: 600;
transition: .25s;
white-space: nowrap
}
.chip:hover {
color: var(--theme);
border-color: var(--theme)
}
.chip.on {
background: var(--theme);
color: #fff;
border-color: var(--theme)
}
.ctrl {
background: var(--surface);
border: 1px solid var(--line);
color: var(--txt)
}
.ctrl:focus {
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--theme) 25%, transparent);
border-color: var(--theme);
background: var(--surface);
color: var(--txt)
}
/* ---------- WHY: stepper ---------- */
.step {
display: flex;
gap: 20px;
padding: 22px;
border-radius: 24px;
border: 1px solid var(--line);
background: var(--surface);
transition: .35s;
position: relative;
overflow: hidden
}
.step:hover {
transform: translateX(10px);
border-color: var(--theme)
}
.step-n {
font-family: var(--f-mono);
font-size: 1.6rem;
font-weight: 700;
color: var(--theme);
opacity: .45
}
.step-ic {
width: 52px;
height: 52px;
border-radius: 16px;
display: grid;
place-items: center;
background: var(--theme-soft);
color: var(--theme);
font-size: 1.35rem;
flex: 0 0 auto;
transition: .35s
}
.step:hover .step-ic {
background: var(--theme);
color: #fff;
transform: rotate(-8deg)
}
/* ---------- FAQ ---------- */
.accordion-item {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: 20px !important;
margin-bottom: 12px;
overflow: hidden
}
.accordion-button {
background: var(--surface);
color: var(--txt);
font-family: var(--f-head);
font-weight: 700;
font-size: 1rem;
box-shadow: none !important;
padding: 1.05rem 1.3rem
}
.accordion-button:not(.collapsed) {
background: var(--theme-soft);
color: var(--theme)
}
.accordion-button::after {
filter: var(--ico, none)
}
[data-theme="dark"] .accordion-button::after {
filter: invert(1)
}
.accordion-body {
color: var(--txt-2);
font-size: .94rem
}
/* ---------- misc ---------- */
.glass {
background: color-mix(in srgb, var(--surface) 78%, transparent);
backdrop-filter: blur(14px);
border: 1px solid var(--line);
border-radius: 26px
}
.offcanvas,
.modal-content {
background: var(--bg);
color: var(--txt)
}
.modal-content {
border: 1px solid var(--line);
border-radius: 26px
}
.form-control,
.form-select {
background: var(--surface);
border: 1px solid var(--line);
color: var(--txt)
}
.form-control:focus,
.form-select:focus {
background: var(--surface);
color: var(--txt);
border-color: var(--theme);
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--theme) 22%, transparent)
}
.form-control::placeholder {
color: var(--txt-2);
opacity: .7
}
.divider {
height: 1px;
background: var(--line)
}
#toTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
border-radius: 16px;
border: none;
background: var(--theme);
color: #fff;
z-index: 900;
opacity: 0;
pointer-events: none;
transition: .3s;
box-shadow: 0 14px 26px -12px var(--theme)
}
#toTop.on {
opacity: 1;
pointer-events: auto
}
.cart-row img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 14px
}
.marq {
overflow: hidden;
white-space: nowrap;
border-block: 1px solid var(--line);
padding: 14px 0
}
.marq div {
display: inline-block;
animation: slide 26s linear infinite;
font-family: var(--f-head);
font-weight: 700;
font-size: 1.05rem
}
@keyframes slide {
to {
transform: translateX(-50%)
}
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--theme);
display: inline-block;
margin: 0 18px;
vertical-align: middle
}
/* ---------- INNER PAGES ---------- */
.page-head {
padding: 140px 0 28px
}
.form-shell {
max-width: 680px;
margin-left: auto;
margin-right: auto
}
.legal-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px 24px;
margin-bottom: 14px;
transition: .3s
}
.legal-item:hover {
border-color: var(--theme);
transform: translateY(-3px)
}
.legal-item h6 {
font-weight: 700;
margin-bottom: 6px
}
.legal-item p {
margin-bottom: 0
}
.ck-success {
display: none
}
.ck-success.on {
display: block;
animation: txtUp .5s ease both
}