/* ── Hero Reset ── */
.bt-hero *,
.bt-hero *::before,
.bt-hero *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ── Hero Container ── */
.bt-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #3a2e25;
}
/* ── Background Image ── */
.bt-hero__bg {
position: absolute;
inset: 0;
z-index: 1;
}
.bt-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
animation: bt-hero-zoom 25s ease-in-out infinite alternate;
}
@keyframes bt-hero-zoom {
0% { transform: scale(1); }
100% { transform: scale(1.08); }
}
/* ── Overlays ── */
/* Dark gradient for text legibility */
.bt-hero__overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(
180deg,
rgba(58, 46, 37, .3) 0%,
rgba(58, 46, 37, .15) 40%,
rgba(58, 46, 37, .25) 70%,
rgba(58, 46, 37, .65) 100%
);
}
/* Subtle vignette */
.bt-hero__overlay::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 50%, rgba(58, 46, 37, .4) 100%);
}
/* ── Content ── */
.bt-hero__content {
position: relative;
z-index: 3;
text-align: center;
padding: 40px 24px;
max-width: 800px;
animation: bt-hero-fadeIn 1.5s ease-out both;
}
@keyframes bt-hero-fadeIn {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Decorative line above title */
.bt-hero__line {
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, #b8956a, transparent);
margin: 0 auto 28px;
animation: bt-hero-lineGrow 1.8s ease-out both;
}
@keyframes bt-hero-lineGrow {
0% { width: 0; opacity: 0; }
100% { width: 60px; opacity: 1; }
}
/* Brand name – large elegant */
.bt-hero__title {
font-family: 'Playfair Display', 'Georgia', serif;
font-size: clamp(2.8rem, 8vw, 5.5rem);
font-weight: 400;
color: #ffffff;
letter-spacing: .04em;
line-height: 1.1;
margin-bottom: 12px;
text-shadow: 0 2px 30px rgba(0,0,0,.3);
}
.bt-hero__title em {
font-style: italic;
color: #d4b896;
}
/* "by Nataly" subtitle */
.bt-hero__subtitle {
font-family: 'Playfair Display', 'Georgia', serif;
font-size: clamp(1rem, 3vw, 1.5rem);
font-weight: 400;
font-style: italic;
color: rgba(212, 184, 150, .9);
letter-spacing: 3px;
text-transform: lowercase;
margin-bottom: 32px;
text-shadow: 0 1px 15px rgba(0,0,0,.3);
}
/* Tagline */
.bt-hero__tagline {
font-family: 'Inter', system-ui, sans-serif;
font-size: clamp(.75rem, 2vw, .95rem);
font-weight: 400;
color: rgba(255, 255, 255, .65);
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 48px;
line-height: 1.8;
}
/* CTA buttons */
.bt-hero__ctas {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.bt-hero__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 36px;
border-radius: 50px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all .4s cubic-bezier(.22,1,.36,1);
position: relative;
overflow: hidden;
}
/* Primary button – gold filled */
.bt-hero__btn--primary {
background: linear-gradient(135deg, #b8956a, #9a7650);
color: #ffffff;
border: none;
box-shadow: 0 4px 20px rgba(184, 149, 106, .35);
}
.bt-hero__btn--primary::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
background: linear-gradient(135deg, #9a7650, #6b5340);
opacity: 0;
transition: opacity .4s ease;
}
.bt-hero__btn--primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(184, 149, 106, .5);
color: #ffffff;
text-decoration: none;
}
.bt-hero__btn--primary:hover::before {
opacity: 1;
}
.bt-hero__btn--primary span {
position: relative;
z-index: 1;
}
/* Secondary button – outline */
.bt-hero__btn--secondary {
background: transparent;
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, .35);
box-shadow: none;
}
.bt-hero__btn--secondary:hover {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .6);
transform: translateY(-3px);
color: #ffffff;
text-decoration: none;
}
/* ── Scroll indicator ── */
.bt-hero__scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .4);
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
animation: bt-hero-fadeIn 2s ease-out 1s both;
}
.bt-hero__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(180deg, rgba(184, 149, 106, .6), transparent);
animation: bt-hero-scrollPulse 2s ease-in-out infinite;
}
@keyframes bt-hero-scrollPulse {
0%, 100% { opacity: .4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.2); }
}
/* ── Responsive ── */
@media (max-width: 768px) {
.bt-hero {
min-height: 100svh;
}
.bt-hero__content {
padding: 32px 20px;
}
.bt-hero__tagline {
letter-spacing: 2px;
margin-bottom: 36px;
}
.bt-hero__btn {
padding: 13px 28px;
font-size: 11px;
letter-spacing: 1.5px;
}
.bt-hero__ctas {
gap: 12px;
}
.bt-hero__scroll {
bottom: 20px;
}
}
@media (max-width: 480px) {
.bt-hero__ctas {
flex-direction: column;
gap: 10px;
}
.bt-hero__btn {
width: 100%;
justify-content: center;
}
}
Bali Touch
by Nataly
Masaj tradițional balinezian • Relaxare • Revigorare
/* ── Reset & Container ── */
.bt-tarife *,
.bt-tarife *::before,
.bt-tarife *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bt-tarife {
--bt-cream: #f5f0ea;
--bt-sand: #e8ddd0;
--bt-gold: #b8956a;
--bt-gold-dk: #9a7650;
--bt-brown: #6b5340;
--bt-dark: #3a2e25;
--bt-text: #4a3f35;
--bt-text-lt: #7a6f63;
--bt-white: #ffffff;
--bt-radius: 16px;
--bt-shadow: 0 4px 24px rgba(107, 83, 64, .10);
--bt-shadow-hover: 0 12px 40px rgba(107, 83, 64, .18);
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
color: var(--bt-text);
padding: 80px 24px;
max-width: 1320px;
margin: 0 auto;
}
/* ── Section Header ── */
.bt-tarife__header {
text-align: center;
margin-bottom: 60px;
}
.bt-tarife__title {
font-family: 'Playfair Display', 'Georgia', serif;
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 400;
color: var(--bt-dark);
letter-spacing: .02em;
margin-bottom: 12px;
}
.bt-tarife__subtitle {
font-size: 15px;
color: var(--bt-text-lt);
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* ── Category Labels ── */
.bt-tarife__category {
text-align: center;
margin: 56px 0 32px;
position: relative;
}
.bt-tarife__category:first-of-type {
margin-top: 0;
}
.bt-tarife__category span {
font-family: 'Playfair Display', 'Georgia', serif;
font-size: clamp(1.1rem, 3vw, 1.5rem);
font-weight: 400;
font-style: italic;
color: var(--bt-gold);
background: var(--bt-white);
padding: 0 24px;
position: relative;
z-index: 1;
}
.bt-tarife__category::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--bt-sand), transparent);
}
/* ── Grid ── */
.bt-tarife__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 28px;
margin-bottom: 16px;
}
/* ── Card ── */
.bt-card {
background: var(--bt-white);
border: 1px solid rgba(184, 149, 106, .15);
border-radius: var(--bt-radius);
padding: 36px 28px 28px;
display: flex;
flex-direction: column;
transition: transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease,
border-color .35s ease;
box-shadow: var(--bt-shadow);
position: relative;
overflow: hidden;
}
.bt-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--bt-gold), var(--bt-gold-dk));
opacity: 0;
transition: opacity .35s ease;
}
.bt-card:hover {
transform: translateY(-6px);
box-shadow: var(--bt-shadow-hover);
border-color: rgba(184, 149, 106, .35);
}
.bt-card:hover::before {
opacity: 1;
}
/* Card number badge */
.bt-card__number {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bt-cream);
color: var(--bt-gold);
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
flex-shrink: 0;
}
/* Card title */
.bt-card__title {
font-family: 'Playfair Display', 'Georgia', serif;
font-size: 1.35rem;
font-weight: 500;
color: var(--bt-dark);
margin-bottom: 20px;
line-height: 1.3;
}
/* Price rows */
.bt-card__prices {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
flex-grow: 1;
}
.bt-card__price-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: var(--bt-cream);
border-radius: 10px;
transition: background .25s ease;
}
.bt-card__price-row:hover {
background: var(--bt-sand);
}
.bt-card__duration {
font-size: 14px;
font-weight: 500;
color: var(--bt-text);
}
.bt-card__duration svg {
width: 14px;
height: 14px;
margin-right: 6px;
fill: var(--bt-gold);
vertical-align: -2px;
}
.bt-card__price {
font-size: 16px;
font-weight: 700;
color: var(--bt-gold-dk);
white-space: nowrap;
}
.bt-card__price small {
font-size: 12px;
font-weight: 500;
color: var(--bt-text-lt);
margin-left: 2px;
}
/* Separator */
.bt-card__sep {
height: 1px;
background: linear-gradient(90deg, transparent, var(--bt-sand), transparent);
margin-bottom: 24px;
}
/* CTA Button */
.bt-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
background: linear-gradient(135deg, var(--bt-gold), var(--bt-gold-dk));
color: var(--bt-white);
border: none;
border-radius: 50px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all .35s cubic-bezier(.22,1,.36,1);
box-shadow: 0 4px 16px rgba(184, 149, 106, .3);
position: relative;
overflow: hidden;
}
.bt-card__cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--bt-gold-dk), var(--bt-brown));
opacity: 0;
transition: opacity .35s ease;
border-radius: 50px;
}
.bt-card__cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(184, 149, 106, .4);
color: var(--bt-white);
text-decoration: none;
}
.bt-card__cta:hover::before {
opacity: 1;
}
.bt-card__cta svg,
.bt-card__cta span {
position: relative;
z-index: 1;
}
.bt-card__cta svg {
width: 18px;
height: 18px;
fill: var(--bt-white);
flex-shrink: 0;
}
/* ── Featured / Premium Card (4 Hands) ── */
.bt-card--premium {
background: linear-gradient(160deg, #3a2e25, #5a4636);
border-color: rgba(184, 149, 106, .3);
}
.bt-card--premium .bt-card__number {
background: rgba(184, 149, 106, .2);
color: var(--bt-gold);
}
.bt-card--premium .bt-card__title {
color: var(--bt-cream);
}
.bt-card--premium .bt-card__price-row {
background: rgba(255, 255, 255, .08);
}
.bt-card--premium .bt-card__price-row:hover {
background: rgba(255, 255, 255, .14);
}
.bt-card--premium .bt-card__duration {
color: rgba(245, 240, 234, .8);
}
.bt-card--premium .bt-card__duration svg {
fill: var(--bt-gold);
}
.bt-card--premium .bt-card__price {
color: var(--bt-gold);
}
.bt-card--premium .bt-card__price small {
color: rgba(245, 240, 234, .5);
}
.bt-card--premium .bt-card__sep {
background: linear-gradient(90deg, transparent, rgba(184, 149, 106, .3), transparent);
}
.bt-card--premium .bt-card__cta {
background: linear-gradient(135deg, var(--bt-gold), #c9a87c);
color: var(--bt-dark);
}
.bt-card--premium .bt-card__cta svg {
fill: var(--bt-dark);
}
.bt-card--premium .bt-card__cta:hover {
color: var(--bt-dark);
}
.bt-card--premium .bt-card__badge {
position: absolute;
top: 16px;
right: 16px;
background: var(--bt-gold);
color: var(--bt-dark);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 50px;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.bt-tarife {
padding: 60px 20px;
}
.bt-tarife__grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
}
@media (max-width: 640px) {
.bt-tarife {
padding: 48px 16px;
}
.bt-tarife__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.bt-card {
padding: 28px 20px 24px;
}
.bt-tarife__category {
margin: 40px 0 24px;
}
}
Masaje de relaxare
1
Balinese Massage
60 min
200 RON
90 min
250 RON
120 min
300 RON
Programează-te
4
Medical Massage / Lymphatic Drainage
30 min
150 RON
45 min
170 RON
Programează-te
Masaje revigorante
Masaje de îngrijire & anti-stres
9
De-Stress Massage
60 min
200 RON
90 min
250 RON
120 min
300 RON
Programează-te
11
Revitalizing Massage / Deep Tissue
60 min
200 RON
90 min
250 RON
120 min
300 RON
Programează-te
Experiență premium
Premium
12
4 Hands Massage
60 min
270 RON
90 min
320 RON
120 min
370 RON
Programează-te
<!-- Google Fonts (add to if not already loaded) -->