:root {
  --em: #B52F50;
  --em2: #E45B72;
  --emd: #81203C;
  --ems: rgba(181, 47, 80, .10);

  --bg: #F8F0E9;
  --sf: #FFFCF8;
  --sf2: #F2E6DE;

  --ln: rgba(69, 34, 43, .10);
  --tx: #45222B;
  --mt: #856C70;

  --blush: #C5EEE5;

  --sh: 0 16px 48px rgba(69, 34, 43, .10);
  --r: 26px;
}

[data-theme="dark"] {
  --em: #FF7893;
  --em2: #FFA0AF;
  --emd: #D94A6C;
  --ems: rgba(255, 120, 147, .14);

  --bg: #191116;
  --sf: #261920;
  --sf2: #332129;

  --ln: rgba(255, 235, 238, .10);
  --tx: #FFF0EF;
  --mt: #C5A8B0;

  --blush: rgba(91, 207, 180, .12);

  --sh: 0 16px 48px rgba(0, 0, 0, .46);
}
* {
scroll-behavior: smooth;
box-sizing: border-box
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--bg);
color: var(--tx);
overflow-x: hidden;
transition: background .5s, color .5s
}
h1,
h2,
h3,
h4,
.serif {
font-family: 'Playfair Display', serif;
letter-spacing: -.5px
}
.text-em {
color: var(--em) !important
}
.eyebrow {
letter-spacing: .28em;
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
color: var(--em)
}
.muted {
color: var(--mt)
}
.shell {
background: var(--sf);
border: 1px solid var(--ln);
border-radius: var(--r);
box-shadow: var(--sh);
transition: background .5s, border-color .5s
}
/* -------- NAV -------- */
.navbar {
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: blur(18px);
border-bottom: 1px solid var(--ln);
transition: .35s
}
.navbar.scrolled {
box-shadow: 0 8px 30px rgba(0, 0, 0, .09)
}
.navbar-brand {
font-family: 'Playfair Display', serif;
font-weight: 700;
letter-spacing: .2em;
font-size: 1.25rem;
color: var(--tx) !important
}
.nav-link {
font-size: .88rem;
font-weight: 500;
color: var(--tx) !important;
padding: .4rem .75rem !important;
position: relative
}
.nav-link::after {
content: '';
position: absolute;
left: 50%;
bottom: .1rem;
width: 0;
height: 2px;
background: var(--em);
border-radius: 2px;
transition: .35s;
transform: translateX(-50%)
}
.nav-link:hover::after,
.nav-link.active::after {
width: 60%
}
.ib {
width: 40px;
height: 40px;
border-radius: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ln);
background: var(--sf);
color: var(--tx);
transition: .3s;
position: relative;
font-size: 1rem
}
.ib:hover {
background: var(--em);
color: #fff;
border-color: var(--em);
transform: translateY(-3px) rotate(-5deg)
}
.pip {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
border-radius: 50%;
background: var(--em);
color: #fff;
font-size: .58rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
border: 2px solid var(--bg);
transition: border-color .5s
}
.pip.pop {
animation: ppop .5s cubic-bezier(.2, 1.5, .4, 1)
}
@keyframes ppop {
0% {
transform: scale(1)
}
50% {
transform: scale(1.7)
}
100% {
transform: scale(1)
}
}
/* -------- BUTTONS -------- */
.btn-em {
background: linear-gradient(135deg, var(--em2), var(--em));
color: #fff;
border: none;
border-radius: 999px;
padding: .7rem 1.5rem;
font-weight: 600;
font-size: .88rem;
box-shadow: 0 12px 28px rgba(14, 107, 79, .25);
transition: .35s;
overflow: hidden;
position: relative
}
.btn-em::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
transform: translateX(-130%);
transition: .6s
}
.btn-em:hover {
color: #fff;
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(14, 107, 79, .35)
}
.btn-em:hover::before {
transform: translateX(130%)
}
.btn-ol {
border: 1.5px solid var(--ln);
border-radius: 999px;
padding: .7rem 1.5rem;
font-weight: 600;
font-size: .88rem;
color: var(--tx);
background: transparent;
transition: .3s
}
.btn-ol:hover {
background: var(--tx);
color: var(--bg);
border-color: var(--tx)
}
/* ======== HERO ======== */
.hero {
margin-top: 10px;
position: relative;
width: 100%;
height: clamp(420px, 60vw, 650px);
overflow: hidden;
cursor: pointer;
border-radius: 0 0 44px 44px;
background: #111
}
.hero-img {
position: absolute;
width: 100%;
height: 100vh;
object-fit: cover;
object-position: 62% center;
transform: scale(1.08);
animation: heroZoom 20s ease-in-out infinite alternate;
transition: transform .15s ease-out;
will-change: transform
}
@keyframes heroZoom {
0% {
transform: scale(1)
}
100% {
transform: scale(1)
}
}
.hero-overlay {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 62% 50%, transparent 30%, rgba(0, 0, 0, .35) 100%);
z-index: 1
}
/* particles */
.hero canvas {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none
}
/* light rays */
.hero .rays {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: .22;
background: repeating-conic-gradient(from 42deg at 62% 48%, transparent 0deg, rgba(255, 255, 255, .06) 1.5deg, transparent 3deg);
animation: raysSpin 60s linear infinite
}
@keyframes raysSpin {
to {
transform: rotate(360deg)
}
}
/* explore cue */
.hero-cue {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px
}
.cue-dot {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255, 255, 255, .15);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2rem;
border: 1px solid rgba(255, 255, 255, .25);
animation: cueBounce 2.6s ease-in-out infinite
}
.cue-dot::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .2);
animation: cueRing 2.6s ease-in-out infinite
}
@keyframes cueBounce {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-12px)
}
}
@keyframes cueRing {
0%,
100% {
transform: scale(1);
opacity: 1
}
50% {
transform: scale(1.5);
opacity: 0
}
}
.cue-bar {
width: 1px;
height: 36px;
background: linear-gradient(transparent, rgba(255, 255, 255, .45));
animation: barGrow 2.6s ease-in-out infinite
}
@keyframes barGrow {
0%,
100% {
height: 36px;
opacity: .7
}
50% {
height: 52px;
opacity: 1
}
}
/* -------- SUB-PAGE HERO -------- */
.page-hero {
position: relative;
overflow: hidden;
margin-top: 10px;
padding: 4.2rem 0 3.4rem;
background: linear-gradient(130deg, #084435, #0E6B4F 55%, #12A175);
color: #fff;
border-radius: 0 0 44px 44px
}
.page-hero .blob {
position: absolute;
border-radius: 50%;
filter: blur(50px);
opacity: .35
}
.page-hero .b1 {
width: 340px;
height: 340px;
background: #8fe3c2;
top: -120px;
right: -60px;
animation: blobDrift 14s ease-in-out infinite
}
.page-hero .b2 {
width: 260px;
height: 260px;
background: #F2E4DE;
bottom: -100px;
left: 10%;
animation: blobDrift 18s ease-in-out infinite reverse
}
.page-hero .eyebrow {
color: rgba(255, 255, 255, .65)
}
.page-hero .crumb {
font-size: .78rem;
color: rgba(255, 255, 255, .75)
}
.page-hero .crumb a {
color: rgba(255, 255, 255, .75);
text-decoration: none
}
.page-hero .crumb a:hover {
color: #fff
}
/* -------- MARQUEE -------- */
.marq {
padding: .75rem 0;
overflow: hidden;
border-radius: 18px;
background: var(--tx);
color: var(--bg);
margin-top: -24px;
position: relative;
z-index: 5
}
.marq-track {
display: flex;
gap: 3rem;
width: max-content;
animation: marqSlide 32s linear infinite
}
@keyframes marqSlide {
to {
transform: translateX(-50%)
}
}
.marq-track span {
font-size: .78rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
white-space: nowrap;
opacity: .85
}
/* -------- ABOUT: numbered list + stat cards -------- */
.stat-card {
background: var(--sf);
border: 1px solid var(--ln);
border-radius: 20px;
padding: 1.4rem;
text-align: center;
transition: .4s
}
.stat-card:hover {
transform: translateY(-8px);
box-shadow: var(--sh);
border-color: color-mix(in srgb, var(--em) 40%, transparent)
}
.stat-card b {
font-family: 'Playfair Display', serif;
font-size: 2.3rem;
display: block;
color: var(--em)
}
.step-list {
counter-reset: step
}
.step-item {
display: flex;
gap: 1rem;
padding: 1.1rem 0;
border-bottom: 1px dashed var(--ln);
position: relative;
transition: .35s;
align-items: flex-start
}
.step-item:last-child {
border: none
}
.step-item:hover {
transform: translateX(10px)
}
.step-num {
counter-increment: step;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 14px;
background: var(--ems);
color: var(--em);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1rem;
transition: .35s
}
.step-item:hover .step-num {
background: var(--em);
color: #fff;
transform: rotate(-8deg)
}
/* -------- CATEGORIES: HEXAGON GRID -------- */
.hex-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
max-width: 1500px;
margin: 0 auto
}
.hex {
width: 140px;
height: 160px;
position: relative;
cursor: pointer;
transition: .5s cubic-bezier(.2, .8, .2, 1)
}
.hex:hover {
transform: translateY(-12px) scale(1.06);
z-index: 2
}
.hex-inner {
width: 100%;
height: 100%;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: linear-gradient(160deg, var(--sf2), var(--sf));
border: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
transition: .5s;
position: relative;
overflow: hidden
}
.hex:hover .hex-inner {
background: linear-gradient(160deg, var(--em), var(--emd));
color: #fff;
box-shadow: 0 20px 50px rgba(14, 107, 79, .35)
}
.hex:nth-child(even) {
margin-top: 2.5rem
}
.hex .hicon {
font-size: 2rem;
transition: .4s
}
.hex:hover .hicon {
transform: scale(1.3) rotate(-10deg)
}
.hex h6 {
font-size: .78rem;
font-weight: 700;
margin: .4rem 0 0;
transition: .3s
}
.hex small {
font-size: .62rem;
opacity: .7;
transition: .3s
}
.hex:hover h6,
.hex:hover small {
color: #fff
}
.hex .hex-outline {
position: absolute;
inset: 3px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
border: 1.5px solid var(--ln);
background: transparent;
transition: .4s
}
.hex:hover .hex-outline {
border-color: rgba(255, 255, 255, .3)
}
@media(max-width:575px) {
.hex {
width: 110px;
height: 126px
}
.hex:nth-child(even) {
margin-top: 1.5rem
}
}
/* -------- FEATURED: tilt conveyor -------- */
.conv {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
position: relative
}
.conv-track {
display: flex;
gap: 1.1rem;
width: max-content;
animation: convSlide 50s linear infinite
}
.conv:hover .conv-track {
animation-play-state: paused
}
@keyframes convSlide {
to {
transform: translateX(-50%)
}
}
.conv-track>div {
width: 240px;
flex: 0 0 240px
}
/* -------- PRODUCT CARD -------- */
.pc {
background: var(--sf);
border: 1px solid var(--ln);
border-radius: 22px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
transition: .5s cubic-bezier(.2, .8, .2, 1)
}
.pc:hover {
transform: perspective(800px) rotateY(-2deg) translateY(-10px);
box-shadow: 0 32px 60px rgba(14, 107, 79, .16);
border-color: color-mix(in srgb, var(--em) 35%, transparent)
}
.pc-img {
position: relative;
overflow: hidden;
background: var(--sf2);
aspect-ratio: 1/1
}
.pc-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s cubic-bezier(.2, .8, .2, 1);
will-change: transform
}
.pc:hover .pc-img img {
transform: scale(1.12) rotate(1deg)
}
.pc-tag {
position: absolute;
top: 10px;
left: 10px;
background: color-mix(in srgb, var(--sf) 88%, transparent);
backdrop-filter: blur(8px);
color: var(--em);
font-size: .6rem;
font-weight: 800;
padding: .28rem .58rem;
border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase
}
.pc-wish {
position: absolute;
top: 8px;
right: 8px;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: color-mix(in srgb, var(--sf) 85%, transparent);
backdrop-filter: blur(8px);
color: var(--tx);
transition: .3s;
z-index: 3;
font-size: .85rem
}
.pc-wish:hover {
transform: scale(1.15)
}
.pc-wish.on {
background: #e35d6a;
color: #fff;
animation: heartBeat .5s
}
@keyframes heartBeat {
0%,
100% {
transform: scale(1)
}
40% {
transform: scale(1.4)
}
}
.pc-actions {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
display: flex;
gap: .4rem;
transform: translateY(140%);
opacity: 0;
transition: .45s cubic-bezier(.2, 1.4, .4, 1)
}
.pc:hover .pc-actions {
transform: translateY(0);
opacity: 1
}
.act {
flex: 1;
border: none;
border-radius: 13px;
background: var(--tx);
color: var(--bg);
font-size: .73rem;
font-weight: 700;
padding: .52rem;
transition: .25s
}
.act:hover {
background: var(--em);
color: #fff
}
.act.sq {
flex: 0 0 40px
}
.pc-body {
padding: .85rem .95rem 1rem
}
.pn {
font-size: .88rem;
font-weight: 600;
margin: .12rem 0 .3rem;
line-height: 1.3
}
.pcat {
font-size: .68rem;
color: var(--mt);
letter-spacing: .05em;
text-transform: uppercase
}
.pprice {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.1rem;
color: var(--em)
}
/* -------- PRODUCTS: orbit nav -------- */
.orbit-nav {
position: sticky;
top: 90px
}
.orb-btn {
display: flex;
align-items: center;
gap: .8rem;
width: 100%;
background: transparent;
border: none;
border-radius: 16px;
padding: .6rem .8rem;
text-align: left;
color: var(--mt);
font-weight: 600;
font-size: .82rem;
transition: .4s;
position: relative;
overflow: hidden
}
.orb-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--em);
border-radius: 16px;
transform: scaleX(0);
transform-origin: left;
transition: .4s;
z-index: -1
}
.orb-btn .emoji {
font-size: 1.2rem;
transition: .3s
}
.orb-btn .cnt {
margin-left: auto;
font-size: .68rem;
background: var(--sf2);
border-radius: 999px;
padding: .15rem .5rem;
transition: .3s
}
.orb-btn:hover {
color: var(--tx);
transform: translateX(6px)
}
.orb-btn.active {
color: #fff
}
.orb-btn.active::before {
transform: scaleX(1)
}
.orb-btn.active .cnt {
background: rgba(255, 255, 255, .2);
color: #fff
}
.orb-btn.active .emoji {
transform: scale(1.2) rotate(-8deg)
}
.searchcap {
display: flex;
align-items: center;
gap: .5rem;
border: 1px solid var(--ln);
border-radius: 999px;
padding: .48rem .9rem;
background: var(--sf);
transition: .4s
}
.searchcap:focus-within {
border-color: var(--em);
box-shadow: 0 0 0 5px var(--ems)
}
.searchcap input {
border: none;
background: transparent;
outline: none;
color: var(--tx);
font-size: .86rem;
width: 100%
}
.pgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
gap: 1rem
}
@media(max-width:575px) {
.pgrid {
grid-template-columns: repeat(2, 1fr);
gap: .7rem
}
}
.card-reveal {
opacity: 0;
transform: translateY(30px) scale(.94);
transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1)
}
.card-reveal.vis {
opacity: 1;
transform: none
}
/* -------- WHY: stacked cards -------- */
.why-card {
background: var(--sf);
border: 1px solid var(--ln);
border-radius: 22px;
padding: 1.4rem;
transition: .5s cubic-bezier(.2, .8, .2, 1);
position: relative;
overflow: hidden
}
.why-card:hover {
transform: translateY(-10px) rotate(-.5deg);
box-shadow: 0 28px 56px rgba(14, 107, 79, .15);
border-color: color-mix(in srgb, var(--em) 40%, transparent)
}
.why-card .glow {
position: absolute;
inset: auto -20% -20% -20%;
height: 60%;
background: radial-gradient(ellipse, var(--ems), transparent 70%);
opacity: 0;
transition: .5s
}
.why-card:hover .glow {
opacity: 1
}
.why-ico {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
background: var(--ems);
color: var(--em);
margin-bottom: .9rem;
transition: .4s;
position: relative;
z-index: 1
}
.why-card:hover .why-ico {
background: var(--em);
color: #fff;
transform: rotate(-8deg) scale(1.1)
}
/* -------- FAQ: floating cards -------- */
.fq {
border: 1px solid var(--ln);
border-radius: 20px;
background: var(--sf);
overflow: hidden;
margin-bottom: .7rem;
transition: .4s
}
.fq.open {
border-color: color-mix(in srgb, var(--em) 50%, transparent);
box-shadow: 0 16px 40px rgba(14, 107, 79, .1)
}
.fq-head {
display: flex;
align-items: center;
gap: .9rem;
padding: 1rem 1.2rem;
cursor: pointer;
font-weight: 600;
font-size: .92rem;
position: relative;
transition: .3s
}
.fq-head:hover {
background: var(--sf2)
}
.fq-n {
font-family: 'Playfair Display', serif;
color: var(--em);
font-size: .82rem;
min-width: 30px
}
.fq-tog {
margin-left: auto;
width: 30px;
height: 30px;
border-radius: 10px;
background: var(--sf2);
display: flex;
align-items: center;
justify-content: center;
transition: .45s
}
.fq.open .fq-tog {
background: var(--em);
color: #fff;
transform: rotate(135deg);
border-radius: 50%
}
.fq-body {
max-height: 0;
overflow: hidden;
transition: max-height .5s ease
}
.fq-body>div {
padding: 0 1.2rem 1.2rem 3.5rem;
color: var(--mt);
font-size: .88rem
}
/* -------- NEWSLETTER: morphing bg -------- */
.nl-wrap {
border-radius: var(--r);
overflow: hidden;
position: relative;
background: linear-gradient(130deg, #084435, #0E6B4F 55%, #12A175);
padding: 2.6rem;
color: #fff
}
.nl-wrap .blob {
position: absolute;
border-radius: 50%;
filter: blur(50px);
opacity: .35
}
.nl-wrap .b1 {
width: 340px;
height: 340px;
background: #8fe3c2;
top: -120px;
right: -60px;
animation: blobDrift 14s ease-in-out infinite
}
.nl-wrap .b2 {
width: 260px;
height: 260px;
background: var(--blush);
bottom: -100px;
left: 10%;
animation: blobDrift 18s ease-in-out infinite reverse
}
@keyframes blobDrift {
0%,
100% {
transform: translate(0, 0) scale(1)
}
50% {
transform: translate(-35px, 30px) scale(1.1)
}
}
.nl-wrap .form-control,
.nl-wrap .form-select {
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .25);
color: #fff;
border-radius: 14px;
padding: .65rem .9rem
}
.nl-wrap .form-control::placeholder {
color: rgba(255, 255, 255, .55)
}
.nl-wrap .form-control:focus {
background: rgba(255, 255, 255, .2);
border-color: #fff;
box-shadow: none;
color: #fff
}
.nl-wrap label {
color: rgba(255, 255, 255, .82);
font-size: .8rem;
font-weight: 600
}
.nl-wrap .form-check-input {
background-color: rgba(255, 255, 255, .2);
border-color: rgba(255, 255, 255, .45)
}
.nl-wrap .form-check-input:checked {
background-color: #fff;
border-color: #fff
}
.nl-wrap .form-control::-webkit-calendar-picker-indicator {
filter: invert(1)
}
/* -------- BENTO CONTACT -------- */
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem
}
.bento>div {
background: var(--sf);
border: 1px solid var(--ln);
border-radius: 22px;
padding: 1.3rem;
transition: .4s
}
.bento>div:hover {
transform: translateY(-6px);
box-shadow: var(--sh)
}
.b-form {
grid-column: span 2;
grid-row: span 2
}
.b-map {
grid-column: span 2;
background: linear-gradient(150deg, var(--ems), var(--sf)) !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 200px;
border-style: dashed !important
}
.b-map {
grid-column: 1 / -1
}
.ico-box {
width: 46px;
height: 46px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
background: var(--ems);
color: var(--em);
transition: .35s
}
.bento>div:hover .ico-box {
transform: rotate(-8deg) scale(1.1)
}
@media(max-width:991px) {
.bento {
grid-template-columns: repeat(2, 1fr)
}
.b-form {
grid-column: span 2
}
}
@media(max-width:575px) {
.bento {
grid-template-columns: 1fr
}
.b-form,
.b-map {
grid-column: span 1
}
}
.form-control,
.form-select {
border-radius: 14px;
padding: .65rem .9rem;
border: 1px solid var(--ln);
font-size: .88rem;
background: var(--sf);
color: var(--tx)
}
.form-control:focus,
.form-select:focus {
border-color: var(--em);
box-shadow: 0 0 0 4px var(--ems);
background: var(--sf);
color: var(--tx)
}
.form-label {
font-size: .78rem;
font-weight: 600;
margin-bottom: .3rem
}
.form-check-input:checked {
background-color: var(--em);
border-color: var(--em)
}
/* -------- POLICY PAGES -------- */
.policy h6 {
color: var(--tx);
margin-top: 1.15rem
}
.policy p {
margin-bottom: .8rem
}
/* -------- CART / DRAWERS -------- */
.offcanvas {
background: var(--sf);
color: var(--tx);
border-radius: 24px 0 0 24px;
border-left: 1px solid var(--ln)
}
.ri {
display: flex;
gap: .8rem;
padding: .75rem 0;
border-bottom: 1px dashed var(--ln)
}
.ri img {
width: 62px;
height: 62px;
border-radius: 14px;
object-fit: cover;
background: var(--sf2)
}
.qb {
width: 28px;
height: 28px;
border-radius: 9px;
border: 1px solid var(--ln);
background: var(--sf);
color: var(--tx);
display: flex;
align-items: center;
justify-content: center;
font-size: .72rem;
transition: .25s
}
.qb:hover {
background: var(--em);
color: #fff;
border-color: var(--em)
}
/* -------- MODALS -------- */
.modal-content {
background: var(--sf);
color: var(--tx);
border-radius: 24px;
border: 1px solid var(--ln)
}
[data-theme="dark"] .btn-close {
filter: invert(1)
}
/* -------- ALERTS -------- */
#alerts {
position: fixed;
top: 80px;
right: 16px;
z-index: 4000;
display: flex;
flex-direction: column;
gap: .6rem;
width: 340px;
max-width: calc(100vw - 28px)
}
.alt {
position: relative;
display: flex;
gap: .75rem;
align-items: flex-start;
background: var(--sf);
border: 1px solid var(--ln);
border-radius: 20px;
padding: .9rem 1rem;
box-shadow: 0 24px 52px rgba(0, 0, 0, .22);
overflow: hidden;
transform: translateX(140%) scale(.85);
opacity: 0;
animation: altIn .6s cubic-bezier(.14, 1.4, .3, 1) forwards
}
.alt.die {
animation: altOut .45s ease forwards
}
@keyframes altIn {
to {
transform: translateX(0) scale(1);
opacity: 1
}
}
@keyframes altOut {
to {
transform: translateX(140%) scale(.8);
opacity: 0
}
}
.alt .a-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
color: #fff;
animation: iconPop .65s cubic-bezier(.2, 1.5, .4, 1)
}
@keyframes iconPop {
0% {
transform: scale(0) rotate(-40deg)
}
60% {
transform: scale(1.2) rotate(6deg)
}
100% {
transform: scale(1) rotate(0)
}
}
.alt h6 {
margin: 0;
font-size: .82rem;
font-weight: 700;
line-height: 1.3
}
.alt p {
margin: 0;
font-size: .72rem;
color: var(--mt);
line-height: 1.3
}
.alt .bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
transform-origin: left;
animation: barShrink 3.2s linear forwards
}
@keyframes barShrink {
to {
transform: scaleX(0)
}
}
.alt .x {
position: absolute;
top: 8px;
right: 10px;
border: none;
background: transparent;
color: var(--mt);
font-size: .78rem;
cursor: pointer
}
.alt .confetti {
position: absolute;
width: 6px;
height: 6px;
border-radius: 2px;
top: -10px
}
@keyframes confFall {
0% {
opacity: 1;
transform: translateY(0) rotate(0)
}
100% {
opacity: 0;
transform: translateY(120px) rotate(360deg)
}
}
/* -------- FOOTER -------- */
footer {
background: var(--tx);
color: var(--bg);
border-radius: 36px 36px 0 0;
margin-top: 2.5rem;
transition: background .5s
}
footer a {
color: color-mix(in srgb, var(--bg) 68%, transparent);
text-decoration: none;
font-size: .86rem;
transition: .25s;
display: inline-block
}
footer a:hover {
color: var(--bg);
transform: translateX(5px)
}
.soc {
width: 38px;
height: 38px;
border-radius: 13px;
background: color-mix(in srgb, var(--bg) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--bg);
transition: .35s
}
.soc:hover {
background: var(--em);
color: #fff;
transform: translateY(-4px) rotate(-8deg)
}
#top {
position: fixed;
right: 16px;
bottom: 16px;
width: 46px;
height: 46px;
border-radius: 15px;
background: var(--em);
color: #fff;
border: none;
display: none;
z-index: 1500;
box-shadow: 0 12px 28px rgba(14, 107, 79, .35);
font-size: 1.1rem
}
.sparkle {
display: inline-block;
animation: sparkRot 10s linear infinite
}
@keyframes sparkRot {
to {
transform: rotate(360deg)
}
}
@keyframes float {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-14px)
}
}