*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
margin:0;
background:#090908;
color:#e3d5bb;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
line-height:1.6
}
img,video{
display:block;
max-width:100%
}
a{
text-decoration:none;
color:inherit
}button{
font:inherit
}
.topbar{
position:fixed;
z-index:50;
top:0;
left:0;
width:100%;
height:82px;
padding:0 4vw;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:28px;
background:rgba(0,0,0,.72);
border-bottom:1px solid rgba(200,170,111,.2);
backdrop-filter:blur(14px)
}
.brand{
font-family:Didot,"Bodoni MT",Georgia,serif;
font-size:25px;letter-spacing:.04em;
line-height:.9;
color:#e3d5bb}
.brand span{
color:#c8aa6f
}
.brand small{
display:block;
font-family:Arial,sans-serif;
font-size:7px;
letter-spacing:.38em;
margin-top:9px
}
.topbar nav{
display:flex;
justify-content:center;
align-items:center;
gap:25px;
font-size:13px
}
.topbar nav>a,.nav-services>button{
color:#e3d5bb;
background:none;
border:0;
padding:10px 2px;
cursor:pointer
}
.topbar nav>a:hover,.nav-services>button:hover{
color:#c8aa6f}
.nav-services
{position:relative}
.dropdown{
visibility:hidden;
opacity:0;
transform:translateY(8px);
position:absolute;
top:100%;
left:-20px;
min-width:230px;
padding:10px;
background:#121210;
border:1px solid rgba(200,170,111,.28);
transition:.2s}
.nav-services:hover .dropdown{
visibility:visible;
opacity:1;
transform:none
}
.dropdown a{
display:block;
padding:10px 12px;
font-size:12px;
border-bottom:1px solid rgba(227,213,187,.08)
}
.header-actions{
display:flex;
align-items:center;
gap:10px
}
.cta{
display:inline-flex;
align-items:center;
gap:14px;
padding:14px 23px;
border:1px solid #a07f3a;
background:#a07f3a;
color:#050505;
text-transform:uppercase;
letter-spacing:.12em;
font-size:11px;
font-weight:700;
transition:.25s
}
.cta:hover{
background:#c8aa6f;
border-color:#c8aa6f;
transform:translateY(-2px)
}
.cta.small{
padding:11px 16px}
.theme-toggle{width:40px;height:40px;border:1px solid rgba(200,170,111,.5);border-radius:50%;background:transparent;color:#c8aa6f;cursor:pointer}.burger{display:block;background:none;border:0;padding:6px}.burger span{display:block;width:27px;height:1px;background:#c8aa6f;margin:6px 0}.hero{min-height:760px;height:92vh;padding:150px 7vw 90px;display:flex;align-items:center;justify-content:flex-end;position:relative;overflow:hidden;background:#000}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.88) 25%,rgba(0,0,0,.56) 47%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.04) 100%),var(--hero);background-position:center;background-size:cover;filter:brightness(.68)}.hero:after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,#090908)}.hero-copy{position:relative;z-index:2;width:min(600px,48vw);margin-left:auto;padding-right:2vw}.kicker{display:block;color:#c8aa6f;font-size:15px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;margin-bottom:18px}.hero h1,.section-head h2,.service-hero h1,
.hero h1{font-size:clamp(64px,8vw,120px)}h1 em,h2 em{font-weight:400;color:#c8aa6f}.hero-sub{font-family:Didot,"Bodoni MT",Georgia,serif;font-size:28px;color:#c8aa6f}.hero-copy>p{max-width:560px;color:#c9baa3}.services-section,.gallery-section,.reviews-section,.contact-section,.price-section{padding:110px 7vw}.section-head{max-width:980px;margin:0 auto 70px;text-align:center}.section-head h2{font-size:clamp(50px,6vw,84px);white-space:nowrap}.section-head p{color:#9d917f}.service-icons{max-width:1150px;margin:0 auto 110px;display:flex;justify-content:center;gap:42px;flex-wrap:wrap}.service-icon{text-align:center;width:155px}.icon-circle{width:145px;height:145px;border:1px solid rgba(200,170,111,.45);border-radius:50%;overflow:hidden;background:#151512;transition:.35s}.icon-circle img{width:100%;height:100%;object-fit:cover;transition:.45s}.service-icon:hover .icon-circle{border-color:#c8aa6f;box-shadow:0 0 0 10px rgba(160,127,58,.08)}.service-icon:hover img{transform:scale(1.12)}.service-icon>span{display:block;margin-top:14px;font-size:12px;letter-spacing:.04em}.service-previews{max-width:1200px;margin:auto}.service-preview{display:grid;grid-template-columns:1.08fr .92fr;min-height:480px;margin:0 0 90px;border:1px solid rgba(200,170,111,.18);background:#10100e}.service-preview.reverse{grid-template-columns:.92fr 1.08fr}.service-preview.reverse .media-frame{order:2}.media-frame{min-height:480px;overflow:hidden;background:#171714}.media-frame img,.media-frame video{width:100%;height:100%;object-fit:cover;filter:brightness(.82)}.preview-copy{padding:65px;align-self:center}.preview-copy .num{color:#a07f3a;font-size:11px;letter-spacing:.25em}.preview-copy h3{font-family:Didot,"Bodoni MT",Georgia,serif;font-size:48px;font-weight:400;margin:8px 0 20px}.preview-copy p,.preview-copy li{color:#b9aa95}.preview-copy ul{list-style:none;padding:0}.preview-copy li{padding:7px 0;border-bottom:1px solid rgba(200,170,111,.15)}.preview-copy li:before{content:"✦";color:#a07f3a;margin-right:10px;font-size:10px}.text-link{display:inline-flex;gap:12px;margin-top:14px;color:#c8aa6f;text-transform:uppercase;font-size:11px;letter-spacing:.18em}.gallery-section{background:#0c0c0a;overflow:hidden}.marquee{overflow:hidden;margin-inline:-7vw}.marquee-track{display:flex;width:max-content;gap:18px;animation:marquee 38s linear infinite}.marquee:hover .marquee-track{animation-play-state:paused}@keyframes marquee{to{transform:translateX(-50%)}}.gallery-item{padding:0;border:0;background:none;color:inherit;cursor:pointer}.gallery-item img,.gallery-item video{width:310px;height:390px;object-fit:cover;filter:brightness(.78);transition:.3s}.gallery-item:hover img{filter:brightness(.95);transform:scale(1.02)}.gallery-item span{display:block;text-align:left;padding:12px 3px;color:#c8aa6f;font-size:11px;text-transform:uppercase;letter-spacing:.16em}.lightbox{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:5vw}.lightbox.show{display:flex}.lightbox img{max-height:88vh;max-width:90vw}.lightbox button{position:absolute;right:28px;top:18px;background:none;border:0;color:#e3d5bb;font-size:40px;cursor:pointer}.reviews-grid{max-width:1200px;margin:0 auto 45px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.review{padding:34px 30px;min-height:245px;border:1px solid rgba(200,170,111,.18);background:#11110f}.stars{color:#a07f3a;letter-spacing:.15em}.review p{color:#c9baa3;font-family:Georgia,serif;font-size:17px}.review strong{font-size:11px;text-transform:uppercase;letter-spacing:.12em}.reviews-section{text-align:center}.outline-cta{background:transparent;color:#c8aa6f}.contact-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;background:#10100e}.contact-copy h2{font-size:clamp(52px,6vw,80px);margin-bottom:35px}.contact-copy p,.contact-copy a{color:#c9baa3}.socials{margin:25px 0}.map-wrap{height:470px;border:1px solid rgba(200,170,111,.25);overflow:hidden}.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(1) sepia(.18) brightness(.72)}footer{padding:35px 7vw;display:flex;justify-content:space-between;border-top:1px solid rgba(200,170,111,.2);font-size:11px;color:#857966;background:#060606}footer strong{font-family:Didot,Georgia,serif;font-size:22px;color:#c8aa6f;margin-right:20px}.service-hero{padding:180px 7vw 80px;min-height:430px;display:flex;align-items:end;background:radial-gradient(circle at 80% 20%,rgba(160,127,58,.2),transparent 35%),#080807;border-bottom:1px solid rgba(200,170,111,.18)}.service-hero h1{font-size:clamp(64px,8vw,110px)}.service-hero p{color:#a99a85}.service-page{padding:90px 7vw;display:grid;grid-template-columns:1.1fr .9fr;gap:80px}.service-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-content:start}.service-gallery-grid .gallery-item:first-child{grid-column:1/-1}.service-gallery-grid .gallery-item img,.service-gallery-grid .gallery-item video{width:100%;height:300px}.service-gallery-grid .gallery-item:first-child img,.service-gallery-grid .gallery-item:first-child video,.service-main-placeholder{width:100%;height:540px;object-fit:cover}
.lux-list li:before{content:"✦";color:#a07f3a;margin-right:12px}.price-section{text-align:center;background:#0c0c0a}.price-table{max-width:850px;margin:0 auto 40px;border-top:1px solid rgba(200,170,111,.25)}.price-table>div{display:flex;justify-content:space-between;gap:20px;padding:18px 4px;border-bottom:1px solid rgba(200,170,111,.18);text-align:left}.price-table strong{color:#c8aa6f}.reveal{opacity:0;transform:translateY(28px);transition:.75s ease}.reveal.visible{opacity:1;transform:none}
/* Light theme */html[data-theme="light"] body{background:#f4ecdf;color:#2f2f2f}html[data-theme="light"] .topbar{background:rgba(244,236,223,.92);border-color:rgba(47,47,47,.12)}html[data-theme="light"] .brand,html[data-theme="light"] .topbar nav>a,html[data-theme="light"] .nav-services>button{color:#2f2f2f}html[data-theme="light"] .dropdown{background:#eadcc6}html[data-theme="light"] .dropdown a{color:#2f2f2f;border-color:rgba(47,47,47,.1)}html[data-theme="light"] .hero:before{background-image:linear-gradient(90deg,#f4ecdf 0%,rgba(244,236,223,.88) 26%,rgba(244,236,223,.52) 48%,rgba(244,236,223,.05) 75%),var(--hero);filter:brightness(.8)}html[data-theme="light"] .hero:after{background:linear-gradient(transparent,#f4ecdf)}html[data-theme="light"] .hero h1,html[data-theme="light"] .section-head h2,html[data-theme="light"] .preview-copy h3,html[data-theme="light"] .service-hero h1,html[data-theme="light"]
.contact-copy h2{color:#2f2f2f}html[data-theme="light"] .hero-copy>p,html[data-theme="light"] .section-head p,html[data-theme="light"] .preview-copy p,html[data-theme="light"] .preview-copy li,html[data-theme="light"] .review p,html[data-theme="light"] .contact-copy p,html[data-theme="light"] .contact-copy a,html[data-theme="light"] .long-text,html[data-theme="light"] .lux-list{color:#5f554a}html[data-theme="light"] .services-section,html[data-theme="light"] .reviews-section{background:#f4ecdf}html[data-theme="light"] .gallery-section,html[data-theme="light"] .contact-section,html[data-theme="light"] .price-section{background:#e3d5bb}html[data-theme="light"] .service-preview,html[data-theme="light"] .review{background:#eee3d2;border-color:rgba(47,47,47,.12)}html[data-theme="light"] .icon-circle{background:#eadcc6}html[data-theme="light"] .service-page{background:#f4ecdf}html[data-theme="light"] .service-hero{background:radial-gradient(circle at 80% 20%,rgba(160,127,58,.18),transparent 35%),#e3d5bb}html[data-theme="light"] footer{background:#2f2f2f}
@media(max-width:980px){.topbar{grid-template-columns:auto auto auto;justify-content:space-between}.burger{display:block;order:-1}.topbar nav{position:fixed;left:0;top:82px;width:100%;max-height:0;overflow:hidden;display:block;background:#0b0b09;transition:.3s;padding:0 7vw}.topbar nav.open{max-height:80vh;padding-top:18px;padding-bottom:25px}.topbar nav>a,.nav-services>button{display:block;width:100%;text-align:left;padding:12px 0}.nav-services .dropdown{position:static;visibility:visible;opacity:1;transform:none;background:transparent;border:0;padding:0 0 10px 12px}.header-actions .cta{display:none}.hero{justify-content:flex-start}.hero-copy{width:min(650px,82vw);margin-left:0}.service-preview,.service-preview.reverse,.contact-section,.service-page{grid-template-columns:1fr}.service-preview.reverse .media-frame{order:0}.reviews-grid{grid-template-columns:1fr 1fr}
.section-head h2{white-space:normal}}
@media(max-width:620px){.topbar{height:70px;padding-inline:18px}.brand{font-size:19px}.brand small{display:none}.theme-toggle{width:36px;height:36px}.hero{min-height:690px;height:auto;padding:130px 22px 80px}.hero:before{background-image:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.82) 75%),var(--hero);background-position:58% center}.hero-copy{width:100%;align-self:end}.hero h1{font-size:62px}.hero-copy>p{color:#eee2cf}.services-section,.gallery-section,.reviews-section,.contact-section,.price-section{padding:80px 22px}.section-head{margin-bottom:45px}.section-head h2{font-size:47px}.service-icons{gap:20px;margin-bottom:70px}.service-icon{width:125px}.icon-circle{width:120px;height:120px}.service-preview{margin-bottom:45px}.media-frame{min-height:330px}.preview-copy{padding:35px 26px}.preview-copy h3{font-size:40px}.gallery-item img,.gallery-item video{width:245px;height:320px}.reviews-grid{grid-template-columns:1fr}.contact-section{gap:35px}.map-wrap{height:350px}.service-page{padding:60px 22px;gap:45px}.service-gallery-grid{grid-template-columns:1fr}.service-gallery-grid .gallery-item:first-child{grid-column:auto}.service-gallery-grid .gallery-item img,.service-gallery-grid .gallery-item video,.service-gallery-grid .gallery-item:first-child img,.service-gallery-grid .gallery-item:first-child video,.service-main-placeholder{height:360px}
footer{display:block;padding:30px 22px}footer div+div{margin-top:12px}html[data-theme="light"] .hero:before{background-image:linear-gradient(180deg,rgba(244,236,223,.1),rgba(244,236,223,.88) 76%),var(--hero)}}
/* =========================================================
ART BEAUTY — NAV / ABOUT / REVIEWS / CAROUSEL UPDATE
Palette inspired by the supplied luxury reference:
black, warm charcoal, cream, nude beige and muted gold.
========================================================= */
:root{
--ab-black:#070706;
--ab-charcoal:#12100e;
--ab-charcoal-2:#1a1714;
--ab-cream:#ead8c8;
--ab-beige:#d6bdab;
--ab-brown:#9a6f51;
--ab-gold:#b78c58;
--ab-gold-soft:#cfad82;
--ab-line:rgba(234,216,200,.18);
}
/* NAVIGATION */
.topbar{
height:72px !important;
padding:0 6.8vw !important;
grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr) !important;
gap:32px !important;
background:rgba(7,7,6,.96) !important;
border-bottom:1px solid rgba(183,140,88,.20) !important;
box-shadow:0 8px 28px rgba(0,0,0,.16);
}
.brand{
justify-self:start;
font-family:Didot,"Bodoni MT","Bodoni 72",Georgia,serif !important;
font-size:25px !important;
letter-spacing:.16em !important;
line-height:1 !important;
color:var(--ab-cream) !important;
white-space:nowrap;
}
.brand span{color:var(--ab-gold-soft) !important}
.brand small{display:none !important}
.topbar nav{
justify-self:center;
gap:32px !important;
font-size:10px !important;
text-transform:uppercase;
letter-spacing:.18em;
}
.topbar nav>a,
.nav-services>button{
position:relative;
color:#d9cec3 !important;
padding:27px 0 24px !important;
}
.topbar nav>a::after,
.nav-services>button::after{
content:"";
position:absolute;
left:0;
right:100%;
bottom:18px;
height:1px;
background:var(--ab-gold);
transition:right .25s ease;
}
.topbar nav>a:hover::after,
.nav-services>button:hover::after{
right:0;
}
.dropdown{
top:calc(100% - 1px) !important;
left:-24px !important;
min-width:260px !important;
padding:10px 14px !important;
background:#0d0c0b !important;
border:1px solid rgba(183,140,88,.26) !important;
box-shadow:0 20px 45px rgba(0,0,0,.34);
}
.dropdown a{
color:#d9cec3 !important;
padding:12px 10px !important;
text-transform:none;
letter-spacing:.04em;
}
.dropdown a:hover{color:var(--ab-gold-soft) !important}
.header-actions{
justify-self:end;
gap:9px !important;
}
.nav-book{
min-height:40px;
padding:11px 20px !important;
border:1px solid var(--ab-gold) !important;
background:transparent !important;
color:#e7d8ca !important;
letter-spacing:.15em;
}
.nav-book:hover{
background:var(--ab-gold) !important;
color:#090807 !important;
transform:none !important;
}
.theme-toggle{
width:40px !important;
height:40px !important;
display:grid !important;
place-items:center;
margin:0 !important;
border:1px solid rgba(183,140,88,.65) !important;
border-radius:0 !important;
background:transparent !important;
color:var(--ab-gold-soft) !important;
font-size:18px;
cursor:pointer;
transition:.25s;
}
.theme-toggle:hover{
background:var(--ab-gold) !important;
color:#090807 !important;
}
/* ABOUT / HERO: supplied salon photo, copy aligned left */
.hero{
justify-content:flex-start !important;
padding-left:7vw !important;
}
.hero:before{
background-image:
linear-gradient(90deg,rgba(4,4,3,.92) 0%,rgba(4,4,3,.82) 27%,rgba(4,4,3,.54) 48%,rgba(4,4,3,.12) 75%,rgba(4,4,3,.04) 100%),
var(--hero) !important;
background-position:center !important;
filter:brightness(.68) saturate(.92) !important;
}
.hero-copy{
width:min(610px,46vw) !important;
margin-left:0 !important;
margin-right:auto !important;
padding-right:0 !important;
text-align:left !important;
}
.hero h1{color:var(--ab-cream) !important}
.hero-sub{color:var(--ab-gold-soft) !important}
.hero-copy>p{color:#d5c8bc !important}
/* Main dark palette */
.services-section{background:#0b0a09 !important}
.gallery-section{background:#12100e !important}
.reviews-section{background:#0b0a09 !important}
.contact-section{background:#15120f !important}
.section-head h2,.preview-copy h3,.contact-copy h2{color:var(--ab-cream) !important}
.section-head p,.preview-copy p,.preview-copy li,.contact-copy p,.contact-copy a{color:#c9b9ab !important}
.kicker,.text-link,.service-icon>span{color:var(--ab-gold-soft) !important}
.service-preview,.review{border-color:var(--ab-line) !important}
/* GALLERY CAROUSEL */
.gallery-carousel{
position:relative;
max-width:1380px;
margin:0 auto;
padding:0 58px;
}
.carousel-viewport{
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
scrollbar-width:none;
scroll-snap-type:x mandatory;
}
.carousel-viewport::-webkit-scrollbar{display:none}
.carousel-track{
display:flex;
gap:18px;
width:max-content;
padding:5px 0 12px;
}
.gallery-carousel .gallery-item{
flex:0 0 310px;
scroll-snap-align:start;
}
.gallery-carousel .gallery-item img{
width:310px;
height:390px;
object-fit:cover;
background:#181512;
}
.carousel-arrow{
position:absolute;
z-index:5;
top:calc(50% - 30px);
width:44px;
height:44px;
border:1px solid rgba(207,173,130,.55);
background:rgba(7,7,6,.86);
color:var(--ab-cream);
font-family:Georgia,serif;
font-size:32px;
line-height:1;
cursor:pointer;
transition:.2s;
}
.carousel-arrow:hover{
background:var(--ab-gold);
color:#090807;
}
.carousel-prev{left:0}
.carousel-next{right:0}
/* LIGHTBOX with navigation */
body.lightbox-open{overflow:hidden}
.lightbox{
padding:4vw 80px !important;
background:rgba(5,5,4,.96) !important;
}
.lightbox figure{
margin:0;
max-width:min(1050px,82vw);
text-align:center;
}
.lightbox img{
display:block;
max-height:82vh !important;
max-width:100% !important;
margin:auto;
object-fit:contain;
}
.lightbox figcaption{
position:static !important;
display:block;
padding:14px 0 0 !important;
background:none !important;
color:var(--ab-gold-soft) !important;
text-transform:uppercase;
letter-spacing:.14em;
font-size:10px;
}
.lightbox-close{
position:absolute !important;
right:28px !important;
top:18px !important;
}
.lightbox-arrow{
position:absolute !important;
top:50% !important;
transform:translateY(-50%);
width:50px;
height:62px;
border:1px solid rgba(207,173,130,.45) !important;
background:rgba(14,12,10,.7) !important;
color:var(--ab-cream) !important;
font-size:38px !important;
cursor:pointer;
}
.lightbox-arrow:hover{
background:var(--ab-gold) !important;
color:#080706 !important;
}
.lightbox-prev{left:20px !important;right:auto !important}
.lightbox-next{right:20px !important;left:auto !important}
/* GOOGLE-LIKE REVIEWS */
.google-rating{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:9px;
margin-top:20px;
color:#cfc2b6;
font-size:13px;
}
.google-rating strong{
color:var(--ab-cream);
font-size:16px;
}
.google-stars,.stars{
color:#fbbc04 !important;
letter-spacing:2px;
}
.google-g{
display:inline-grid;
place-items:center;
width:26px;
height:26px;
border-radius:50%;
background:#fff;
color:#4285f4 !important;
font:700 17px Arial,sans-serif;
letter-spacing:-1px;
}
.google-g.mini{
width:24px;
height:24px;
margin-left:auto;
font-size:15px;
}
.google-reviews{
grid-template-columns:repeat(3,1fr) !important;
max-width:1120px !important;
}
.google-review{
text-align:left !important;
min-height:220px;
padding:24px !important;
background:#151310 !important;
border:1px solid rgba(234,216,200,.13) !important;
border-radius:12px;
box-shadow:0 12px 32px rgba(0,0,0,.16);
}
.review-head{
display:flex;
align-items:center;
gap:11px;
margin-bottom:16px;
}
.review-head>div:nth-child(2){
display:flex;
flex-direction:column;
}
.review-head strong{
color:#eee3d8 !important;
font-size:14px;
}
.review-head small{
color:#8f8176;
font-size:11px;
}
.review-avatar{
flex:0 0 38px;
width:38px;
height:38px;
border-radius:50%;
display:grid;
place-items:center;
background:#6f4d39;
color:#fff;
font-weight:700;
}
.google-review p{
margin:10px 0 0 !important;
color:#cfc2b6 !important;
font-size:14px;
line-height:1.65;
}
/* INSTAGRAM ICON */
.socials{margin:18px 0 26px}
.instagram-link{
width:43px;
height:43px;
display:grid !important;
place-items:center;
border:1px solid rgba(207,173,130,.55);
color:var(--ab-gold-soft) !important;
transition:.2s;
}
.instagram-link svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
}
.instagram-link:hover{
background:var(--ab-gold);
color:#080706 !important;
}
/* LIGHT THEME: same palette, inverted without changing layout */
html[data-theme="light"] body{background:#ead8c8;color:#2e2823}
html[data-theme="light"] .topbar{background:rgba(236,219,204,.96) !important;border-bottom-color:rgba(87,62,45,.16) !important}
html[data-theme="light"] .brand{color:#181411 !important}
html[data-theme="light"] .brand span{color:#8d6448 !important}
html[data-theme="light"] .topbar nav>a,
html[data-theme="light"] .nav-services>button{color:#3c3028 !important}
html[data-theme="light"] .nav-book{color:#3a2b21 !important;border-color:#8d6448 !important}
html[data-theme="light"] .theme-toggle{color:#704c35 !important;border-color:#8d6448 !important}
html[data-theme="light"] .dropdown{background:#efe0d3 !important}
html[data-theme="light"] .dropdown a{color:#3b2f27 !important}
html[data-theme="light"] .hero:before{
background-image:
linear-gradient(90deg,rgba(235,216,200,.96) 0%,rgba(235,216,200,.84) 30%,rgba(235,216,200,.46) 53%,rgba(235,216,200,.08) 76%),
var(--hero) !important;
filter:brightness(.82) saturate(.88) !important;
}
html[data-theme="light"] .hero:after{background:linear-gradient(transparent,#ead8c8) !important}
html[data-theme="light"] .hero h1{color:#211a16 !important}
html[data-theme="light"] .hero-sub{color:#81583f !important}
html[data-theme="light"] .hero-copy>p{color:#4c3d33 !important}
html[data-theme="light"] .services-section,
html[data-theme="light"] .reviews-section{background:#ead8c8 !important}
html[data-theme="light"] .gallery-section{background:#dfc9b7 !important}
html[data-theme="light"] .contact-section{background:#d4b9a4 !important}
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .preview-copy h3,
html[data-theme="light"] .contact-copy h2{color:#211a16 !important}
html[data-theme="light"] .section-head p,
html[data-theme="light"] .preview-copy p,
html[data-theme="light"] .preview-copy li,
html[data-theme="light"] .contact-copy p,
html[data-theme="light"] .contact-copy a{color:#5c493d !important}
html[data-theme="light"] .google-review{background:#f1e3d7 !important;border-color:rgba(70,48,34,.12) !important}
html[data-theme="light"] .review-head strong,
html[data-theme="light"] .google-rating strong{color:#2b211b !important}
html[data-theme="light"] .google-review p,
html[data-theme="light"] .google-rating{color:#5b493d !important}
/* =========================================================
FINAL NAV + ABOUT + INFINITE GALLERY FIX
========================================================= */
/* Header: logo on the left, nav + booking + theme together */
.topbar{
display:flex !important;
grid-template-columns:none !important;
align-items:center !important;
height:72px !important;
padding:0 6.8vw !important;
gap:0 !important;
}
.brand{
flex:0 0 auto;
margin-right:auto !important;
}
.topbar nav{
position:static !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:28px !important;
width:auto !important;
max-height:none !important;
overflow:visible !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
}
.header-actions{
flex:0 0 auto;
display:flex !important;
align-items:center !important;
gap:8px !important;
margin-left:18px !important;
}
/* Three-line hamburger is completely removed */
.burger{
display:none !important;
}
/* Booking button always stays visible next to navigation */
.header-actions .nav-book{
display:inline-flex !important;
white-space:nowrap;
}
/* About photo is now a real image element, so it cannot vanish
because of an old CSS/database path. */
.hero{
position:relative !important;
background:#050504 !important;
}
.hero-bg{
position:absolute !important;
inset:0 !important;
z-index:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center !important;
filter:brightness(.68) saturate(.92) !important;
}
.hero:before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background:
linear-gradient(
90deg,
rgba(4,4,3,.94) 0%,
rgba(4,4,3,.84) 28%,
rgba(4,4,3,.58) 50%,
rgba(4,4,3,.15) 76%,
rgba(4,4,3,.04) 100%
) !important;
filter:none !important;
}
.hero:after{
z-index:1 !important;
}
.hero-copy{
position:relative !important;
z-index:2 !important;
}
/* Light theme version of the About image */
html[data-theme="light"] .hero-bg{
filter:brightness(.83) saturate(.88) !important;
}
html[data-theme="light"] .hero:before{
background:
linear-gradient(
90deg,
rgba(235,216,200,.97) 0%,
rgba(235,216,200,.86) 30%,
rgba(235,216,200,.50) 54%,
rgba(235,216,200,.10) 78%
) !important;
}
/* Infinite gallery */
.carousel-viewport{
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-behavior:smooth;
scrollbar-width:none;
}
.carousel-track{
display:flex !important;
flex-wrap:nowrap !important;
width:max-content !important;
}
.gallery-carousel .gallery-item{
flex:0 0 310px !important;
}
/* Arrows stay clearly visible when a photo is enlarged */
.lightbox{
z-index:9999 !important;
}
.lightbox-arrow{
display:grid !important;
place-items:center !important;
z-index:10002 !important;
top:50% !important;
width:54px !important;
height:68px !important;
margin:0 !important;
padding:0 !important;
border:1px solid rgba(207,173,130,.72) !important;
background:rgba(7,7,6,.82) !important;
color:#ead8c8 !important;
font-size:42px !important;
line-height:1 !important;
cursor:pointer !important;
}
.lightbox-prev{
left:24px !important;
right:auto !important;
transform:translateY(-50%) !important;
}
.lightbox-next{
right:24px !important;
left:auto !important;
transform:translateY(-50%) !important;
}
.lightbox-close{
z-index:10003 !important;
}
/* =========================================================
ART BEAUTY — SOFTER DARK THEME
Dark theme stays dark, but no longer almost pure black.
========================================================= */
:root{
--ab-black:#1a1714;
--ab-charcoal:#24201c;
--ab-charcoal-2:#2d2722;
--ab-cream:#f1e3d6;
--ab-beige:#dcc3b0;
--ab-brown:#a77d60;
--ab-gold:#c79a62;
--ab-gold-soft:#dfbd91;
--ab-line:rgba(241,227,214,.22);
}
/* Main dark surfaces */
body{
background:#1d1a17 !important;
color:#f0e2d5 !important;
}
.topbar{
background:rgba(30,27,24,.97) !important;
border-bottom-color:rgba(199,154,98,.28) !important;
}
.dropdown{
background:#27221e !important;
border-color:rgba(199,154,98,.32) !important;
}
.services-section{
background:#211d19 !important;
}
.gallery-section{
background:#29231f !important;
}
.reviews-section{
background:#231f1b !important;
}
.contact-section{
background:#302923 !important;
}
.service-page,
.service-detail,
.service-details-section,
.service-content{
background:#211d19 !important;
}
.service-preview,
.review,
.google-review{
background:#2b2520 !important;
border-color:rgba(241,227,214,.16) !important;
}
.service-preview:nth-child(even){
background:#302923 !important;
}
/* Text contrast */
.section-head h2,
.preview-copy h3,
.contact-copy h2,
.service-detail h1,
.service-detail h2,
.service-detail h3{
color:#f4e8dd !important;
}
.section-head p,
.preview-copy p,
.preview-copy li,
.contact-copy p,
.contact-copy a,
.service-detail p,
.service-detail li{
color:#d8c8ba !important;
}
.kicker,
.text-link,
.service-icon>span,
.hero-sub{
color:#dfbd91 !important;
}
/* Header/nav text */
.brand{
color:#f1e3d6 !important;
}
.brand span{
color:#dfbd91 !important;
}
.topbar nav>a,
.nav-services>button{
color:#e2d5ca !important;
}
.topbar nav>a:hover,
.nav-services>button:hover{
color:#dfbd91 !important;
}
.nav-book{
border-color:#c79a62 !important;
color:#f0e2d5 !important;
}
.nav-book:hover{
background:#c79a62 !important;
color:#211a16 !important;
}
.theme-toggle{
border-color:rgba(199,154,98,.78) !important;
color:#dfbd91 !important;
background:#25201c !important;
}
.theme-toggle:hover{
background:#c79a62 !important;
color:#211a16 !important;
}
/* Hero / About stays dramatic, but less black */
.hero{
background:#1c1916 !important;
}
.hero-bg{
filter:brightness(.78) saturate(.92) !important;
}
.hero:before{
background:
linear-gradient(
90deg,
rgba(29,26,23,.90) 0%,
rgba(29,26,23,.78) 28%,
rgba(29,26,23,.50) 50%,
rgba(29,26,23,.12) 76%,
rgba(29,26,23,.02) 100%
) !important;
}
.hero h1{
color:#f4e8dd !important;
}
.hero-copy>p{
color:#d8c8ba !important;
}
/* Gallery */
.gallery-carousel .gallery-item{
background:#2d2722 !important;
}
.carousel-arrow{
background:rgba(40,35,30,.92) !important;
border-color:rgba(223,189,145,.65) !important;
color:#f0e2d5 !important;
}
.carousel-arrow:hover{
background:#c79a62 !important;
color:#211a16 !important;
}
.lightbox{
background:rgba(25,22,19,.97) !important;
}
.lightbox-arrow{
background:rgba(42,36,31,.92) !important;
border-color:rgba(223,189,145,.70) !important;
color:#f0e2d5 !important;
}
.lightbox-arrow:hover{
background:#c79a62 !important;
color:#211a16 !important;
}
/* Google-style reviews */
.google-review{
background:#2b2520 !important;
}
.review-head strong,
.google-rating strong{
color:#f0e2d5 !important;
}
.google-review p,
.google-rating{
color:#d3c2b4 !important;
}
/* Instagram */
.instagram-link{
background:#29231f !important;
border-color:rgba(223,189,145,.62) !important;
color:#dfbd91 !important;
}
.instagram-link:hover{
background:#c79a62 !important;
color:#211a16 !important;
}
/* Footer */
footer{
background:#191613 !important;
color:#cdbdaf !important;
border-top-color:rgba(199,154,98,.28) !important;
}
/* Keep the light theme untouched, just make sure these overrides don't beat it */
html[data-theme="light"] body{
background:#ead8c8 !important;
color:#2e2823 !important;
}
html[data-theme="light"] .topbar{
background:rgba(236,219,204,.96) !important;
}
html[data-theme="light"] .services-section,
html[data-theme="light"] .reviews-section{
background:#ead8c8 !important;
}
html[data-theme="light"] .google-review{
background:#f1e3d7 !important;
}
/* =========================================================
CONTINUOUS GALLERY + CONTACT ACTIONS + ABOUT VIDEO
========================================================= */
/* About can now be an image or a video */
.hero-bg,
.hero-video{
pointer-events:none;
}
.hero-video{
object-fit:cover !important;
}
/* The gallery itself has NO visible arrows.
It moves continuously like a running line. */
.carousel-arrow{
display:none !important;
}
.gallery-carousel{
padding-left:0 !important;
padding-right:0 !important;
overflow:hidden;
}
.carousel-viewport{
overflow-x:hidden !important;
overflow-y:hidden !important;
scroll-behavior:auto !important;
scroll-snap-type:none !important;
scrollbar-width:none !important;
}
.carousel-track{
display:flex !important;
flex-wrap:nowrap !important;
width:max-content !important;
gap:18px !important;
will-change:transform;
}
.gallery-carousel .gallery-item{
scroll-snap-align:none !important;
flex:0 0 310px !important;
cursor:pointer;
}
.gallery-carousel .gallery-item img{
width:310px !important;
height:390px !important;
}
/* Arrows exist only in enlarged photo mode. */
.lightbox:not(.show){
pointer-events:none;
}
.lightbox.show .lightbox-arrow{
display:grid !important;
}
/* Contact: Instagram + Booksy in one horizontal line */
.contact-actions{
display:flex;
align-items:center;
gap:12px;
margin:20px 0 26px;
}
.contact-actions .instagram-link{
flex:0 0 46px;
width:46px;
height:46px;
margin:0 !important;
}
.contact-actions .cta{
margin:0 !important;
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.socials{
margin:0 !important;
}
@media(max-width:680px){
.gallery-carousel .gallery-item{
flex-basis:245px !important;
}
.gallery-carousel .gallery-item img{
width:245px !important;
height:320px !important;
}
.contact-actions{
flex-wrap:wrap;
}
}
/* ===== FULL-BLEED GALLERY ===== */
.gallery-section{overflow:hidden!important}
.gallery-carousel{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:0!important}
.carousel-viewport{width:100vw!important}
.carousel-track{padding-left:0!important;padding-right:0!important}
/* ===== LIGHT SERVICES / DARK TEXT ===== */
.services-section{background:#ead8c8!important;color:#2c241f!important}
.services-section .section-head h2,.services-section .preview-copy h3,.services-section .service-icon>span{color:#251d18!important}
.services-section .section-head p,.services-section .preview-copy p,.services-section .preview-copy li{color:#59483d!important}
.services-section .kicker,.services-section .text-link,.services-section .preview-copy .num{color:#8f6548!important}
.services-section .icon-circle{background:#f6eee7!important;border-color:rgba(104,72,52,.24)!important;box-shadow:0 14px 34px rgba(78,52,37,.08)}
.services-section .service-icon:hover .icon-circle{border-color:#9a6f51!important;box-shadow:0 0 0 10px rgba(154,111,81,.10),0 18px 42px rgba(78,52,37,.12)!important}
.services-section .service-preview{background:#f2e5da!important;border-color:rgba(76,52,38,.12)!important}
.services-section .service-preview:nth-child(even){background:#e3cebd!important}
.services-section .media-frame{background:#d6bdab!important}
.services-section .preview-copy li{border-bottom-color:rgba(76,52,38,.12)!important}
.services-section .preview-copy li:before{color:#9a6f51!important}
.service-hero{background:linear-gradient(120deg,#d9c0ad,#f0e3d7)!important;border-bottom-color:rgba(64,44,31,.12)!important}
.service-hero h1{color:#211a16!important}
.service-hero p{color:#58473b!important}
.service-hero .kicker{color:#8f6548!important}
.service-page{background:#f1e4d9!important;color:#2b231e!important}
.long-text,.lux-list{color:#56463b!important}
.lux-list li{border-bottom-color:rgba(66,44,31,.13)!important}
.lux-list li:before{color:#9a6f51!important}
.service-gallery-grid .gallery-item,.service-main-placeholder{background:#dfc7b5!important}
.service-gallery-grid .gallery-item img,.service-gallery-grid .gallery-item video,.service-main-placeholder{filter:none!important;object-fit:cover!important}
/* ===== LIGHT FOOTER ===== */
footer{background:#e5d1c1!important;color:#58473b!important;border-top:1px solid rgba(76,52,38,.14)!important}
footer strong{color:#2a211c!important}
footer span,footer a,footer div{color:#58473b!important}
/* ===== BOOKSY-LIKE PRICE LIST ===== */
.price-section{background:#fff!important;color:#242424!important;text-align:left!important;padding-top:74px!important;padding-bottom:90px!important}
.price-shell{width:min(100%,980px);margin:0 auto}
.price-kicker{color:#8d684f!important;margin-bottom:12px!important}
.price-service-title{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:0 0 19px;border-bottom:1px solid #e6e6e6}
.price-service-title h2{margin:0;color:#202020!important;font-family:Arial,Helvetica,sans-serif!important;font-size:23px!important;font-weight:500!important;letter-spacing:0!important}
.price-service-title p{max-width:680px;margin:6px 0 0;color:#707070!important;font-size:13px;line-height:1.45}
.service-more-button{flex:0 0 42px;width:42px;height:38px;display:grid;place-items:center;padding:0 0 7px;border:0;border-radius:10px;background:#f0f0f0;color:#6e6e6e;font-size:24px;font-weight:700;letter-spacing:2px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.06)}
.service-more-button:hover{background:#e8e8e8;color:#222}
.booksy-price-list{margin:0 0 32px}
.booksy-price-row{min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid #ededed}
.price-name{display:grid;gap:3px}.price-name strong{color:#272727!important;font-size:14px;font-weight:400}.price-name small{color:#9a9a9a;font-size:11px}
.price-booking{display:flex;align-items:center;gap:12px}.price-booking>strong{min-width:90px;color:#222!important;text-align:right;font-size:15px;font-weight:700}
.price-book-button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 13px;border-radius:7px;background:#2f96b7;color:#fff!important;font-size:12px;font-weight:700;text-decoration:none}.price-book-button:hover{background:#2788a6}
/* ===== SERVICE INFO POPUP ===== */
body.modal-open{overflow:hidden}.service-info-modal{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.52)}.service-info-modal.show{display:flex}
.service-info-dialog{width:min(620px,100%);max-height:min(860px,90vh);overflow:auto;background:#fff;color:#344054;border-radius:4px;box-shadow:0 30px 90px rgba(0,0,0,.28)}
.service-info-modal-head{display:flex;align-items:center;gap:22px;padding:19px 22px;border-bottom:1px solid #e9e9e9}.service-info-modal-head h2{margin:0;color:#222!important;font-family:Arial,Helvetica,sans-serif!important;font-size:20px;font-weight:500;letter-spacing:0}
.service-info-close{flex:0 0 auto;width:34px;height:34px;padding:0;border:0;background:transparent;color:#222;font-size:34px;font-weight:300;line-height:1;cursor:pointer}
.service-info-modal-body{padding:24px 24px 30px;color:#475467;font-size:14px;line-height:1.75}.service-info-modal-body .modal-lead{color:#344054!important;font-weight:500}.service-info-modal-body h3{margin:24px 0 10px;color:#555!important;font-family:Arial,Helvetica,sans-serif!important;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.service-info-modal-body ul{margin:0;padding-left:24px}.service-info-modal-body li{padding:4px 0}
html[data-theme="light"] .services-section,html[data-theme="light"] .service-page,html[data-theme="light"] .price-section{color:#2b231e!important}html[data-theme="light"] footer{background:#e5d1c1!important}
@media(max-width:680px){.price-section{padding-left:22px!important;padding-right:22px!important}.price-service-title h2{font-size:20px!important}.booksy-price-row{gap:10px}.price-booking{gap:8px}.price-booking>strong{min-width:auto;font-size:13px}.price-book-button{padding:7px 10px}.service-info-modal{padding:10px}}
/* =========================================================
THEME CORRECTION — DARK IS DARK AGAIN / LIGHT IS LIGHT
========================================================= */
/* ---------- DEFAULT DARK THEME ---------- */
html:not([data-theme="light"]) body{
background:#1d1a17 !important;
color:#f0e2d5 !important;
}
html:not([data-theme="light"]) .services-section{
background:#211d19 !important;
color:#f0e2d5 !important;
}
html:not([data-theme="light"]) .services-section .section-head h2,
html:not([data-theme="light"]) .services-section .preview-copy h3,
html:not([data-theme="light"]) .services-section .service-icon>span{
color:#f4e8dd !important;
}
html:not([data-theme="light"]) .services-section .section-head p,
html:not([data-theme="light"]) .services-section .preview-copy p,
html:not([data-theme="light"]) .services-section .preview-copy li{
color:#d3c2b4 !important;
}
html:not([data-theme="light"]) .services-section .kicker,
html:not([data-theme="light"]) .services-section .text-link,
html:not([data-theme="light"]) .services-section .preview-copy .num{
color:#dfbd91 !important;
}
html:not([data-theme="light"]) .services-section .icon-circle{
background:#2a2520 !important;
border-color:rgba(199,154,98,.46) !important;
box-shadow:none !important;
}
html:not([data-theme="light"]) .services-section .service-preview{
background:#2b2520 !important;
border-color:rgba(241,227,214,.14) !important;
}
html:not([data-theme="light"]) .services-section .service-preview:nth-child(even){
background:#302923 !important;
}
html:not([data-theme="light"]) .services-section .media-frame{
background:#181512 !important;
}
html:not([data-theme="light"]) .services-section .preview-copy li{
border-bottom-color:rgba(223,189,145,.18) !important;
}
html:not([data-theme="light"]) .service-hero{
background:
radial-gradient(circle at 80% 20%,rgba(199,154,98,.18),transparent 38%),
#1c1916 !important;
border-bottom-color:rgba(199,154,98,.20) !important;
}
html:not([data-theme="light"]) .service-hero h1{
color:#f4e8dd !important;
}
html:not([data-theme="light"]) .service-hero p{
color:#cdbcae !important;
}
html:not([data-theme="light"]) .service-hero .kicker{
color:#dfbd91 !important;
}
html:not([data-theme="light"]) .service-page{
background:#211d19 !important;
color:#f0e2d5 !important;
}
html:not([data-theme="light"]) .uslugi h2{
color:#f4e8dd !important;
}
html:not([data-theme="light"]) .uslugi .kicker{
color:#dfbd91 !important;
}
html:not([data-theme="light"]) .long-text,
html:not([data-theme="light"]) .lux-list{
color:#d3c2b4 !important;
}
html:not([data-theme="light"]) .lux-list li{
border-bottom-color:rgba(223,189,145,.18) !important;
}
html:not([data-theme="light"]) .service-gallery-grid .gallery-item,
html:not([data-theme="light"]) .service-main-placeholder{
background:#2d2722 !important;
}
/* Price section in the same visual language as the site */
html:not([data-theme="light"]) .price-section{
background:#24201c !important;
color:#f0e2d5 !important;
}
html:not([data-theme="light"]) .price-shell{
width:min(100%,1080px) !important;
}
html:not([data-theme="light"]) .price-kicker{
color:#c79a62 !important;
}
html:not([data-theme="light"]) .price-service-title{
border-bottom-color:rgba(241,227,214,.15) !important;
}
html:not([data-theme="light"]) .price-service-title h2{
color:#f4e8dd !important;
font-family:Didot,"Bodoni MT","Bodoni 72",Georgia,serif !important;
font-size:34px !important;
font-weight:400 !important;
letter-spacing:-.02em !important;
}
html:not([data-theme="light"]) .price-service-title p{
color:#cdbcae !important;
}
html:not([data-theme="light"]) .service-more-button{
background:#302923 !important;
color:#dfbd91 !important;
border:1px solid rgba(199,154,98,.42) !important;
border-radius:0 !important;
box-shadow:none !important;
}
html:not([data-theme="light"]) .service-more-button:hover{
background:#c79a62 !important;
color:#211a16 !important;
}
html:not([data-theme="light"]) .booksy-price-row{
border-bottom-color:rgba(241,227,214,.12) !important;
}
html:not([data-theme="light"]) .price-name strong,
html:not([data-theme="light"]) .price-booking>strong{
color:#eee1d5 !important;
}
html:not([data-theme="light"]) .price-name small{
color:#9f8e80 !important;
}
html:not([data-theme="light"]) .price-book-button{
background:#c79a62 !important;
color:#201914 !important;
border-radius:0 !important;
text-transform:uppercase;
letter-spacing:.08em;
}
html:not([data-theme="light"]) .price-book-button:hover{
background:#dfbd91 !important;
}
/* Popup also follows the dark site style */
html:not([data-theme="light"]) .service-info-modal{
background:rgba(10,8,7,.72) !important;
}
html:not([data-theme="light"]) .service-info-dialog{
background:#28231f !important;
color:#d8c8ba !important;
border:1px solid rgba(199,154,98,.26) !important;
border-radius:0 !important;
box-shadow:0 35px 100px rgba(0,0,0,.42) !important;
}
html:not([data-theme="light"]) .service-info-modal-head{
border-bottom-color:rgba(241,227,214,.12) !important;
}
html:not([data-theme="light"]) .service-info-modal-head h2{
color:#f4e8dd !important;
font-family:Didot,"Bodoni MT","Bodoni 72",Georgia,serif !important;
font-size:31px !important;
font-weight:400 !important;
}
html:not([data-theme="light"]) .service-info-close{
color:#dfbd91 !important;
}
html:not([data-theme="light"]) .service-info-modal-body{
color:#d8c8ba !important;
}
html:not([data-theme="light"]) .service-info-modal-body .modal-lead{
color:#eee1d5 !important;
}
html:not([data-theme="light"]) .service-info-modal-body h3{
color:#c79a62 !important;
}
html:not([data-theme="light"]) .service-info-modal-body li::marker{
color:#c79a62 !important;
}
/* Footer restored to the dark version */
html:not([data-theme="light"]) footer{
background:#191613 !important;
color:#cdbdaf !important;
border-top-color:rgba(199,154,98,.28) !important;
}
html:not([data-theme="light"]) footer strong{
color:#dfbd91 !important;
}
html:not([data-theme="light"]) footer span,
html:not([data-theme="light"]) footer a,
html:not([data-theme="light"]) footer div{
color:#cdbdaf !important;
}
/* ---------- LIGHT THEME ---------- */
html[data-theme="light"] body{
background:#f4ecdf !important;
color:#2f2924 !important;
}
html[data-theme="light"] .services-section{
background:#f4ecdf !important;
color:#2f2924 !important;
}
html[data-theme="light"] .services-section .section-head h2,
html[data-theme="light"] .services-section .preview-copy h3,
html[data-theme="light"] .services-section .service-icon>span{
color:#251d18 !important;
}
html[data-theme="light"] .services-section .section-head p,
html[data-theme="light"] .services-section .preview-copy p,
html[data-theme="light"] .services-section .preview-copy li{
color:#59483d !important;
}
html[data-theme="light"] .services-section .icon-circle{
background:#f8f0e9 !important;
border-color:rgba(104,72,52,.24) !important;
}
html[data-theme="light"] .services-section .service-preview{
background:#efe1d5 !important;
border-color:rgba(76,52,38,.12) !important;
}
html[data-theme="light"] .services-section .service-preview:nth-child(even){
background:#e2cdbc !important;
}
html[data-theme="light"] .services-section .media-frame{
background:#d6bdab !important;
}
html[data-theme="light"] .service-hero{
background:
radial-gradient(circle at 80% 20%,rgba(160,127,58,.15),transparent 38%),
#e3d5bb !important;
border-bottom-color:rgba(64,44,31,.12) !important;
}
html[data-theme="light"] .service-hero h1{
color:#211a16 !important;
}
html[data-theme="light"] .service-hero p{
color:#58473b !important;
}
html[data-theme="light"] .service-page{
background:#f4ecdf !important;
color:#2b231e !important;
}
html[data-theme="light"] .uslugi h2{
color:#211a16 !important;
}
html[data-theme="light"] .long-text,
html[data-theme="light"] .lux-list{
color:#56463b !important;
}
html[data-theme="light"] .service-gallery-grid .gallery-item,
html[data-theme="light"] .service-main-placeholder{
background:#dfc7b5 !important;
}
/* Price section stays light, but uses ART BEAUTY beige/gold instead of generic Booksy blue */
html[data-theme="light"] .price-service-title{
border-bottom-color:rgba(76,52,38,.14) !important;
}
html[data-theme="light"] .price-service-title h2{
color:#211a16 !important;
font-family:Didot,"Bodoni MT","Bodoni 72",Georgia,serif !important;
font-size:34px !important;
font-weight:400 !important;
letter-spacing:-.02em !important;
}
html[data-theme="light"] .price-service-title p{
color:#665347 !important;
}
html[data-theme="light"] .service-more-button{
background:#ead9ca !important;
color:#765039 !important;
border:1px solid rgba(118,80,57,.20) !important;
border-radius:0 !important;
box-shadow:none !important;
}
html[data-theme="light"] .service-more-button:hover{
background:#c79a62 !important;
color:#fff8f0 !important;
}
html[data-theme="light"] .booksy-price-row{
border-bottom-color:rgba(76,52,38,.12) !important;
}
html[data-theme="light"] .price-name strong,
html[data-theme="light"] .price-booking>strong{
color:#2b231e !important;
}
html[data-theme="light"] .price-name small{
color:#8d7b6e !important;
}
html[data-theme="light"] .price-book-button{
background:#a87957 !important;
color:#fffaf5 !important;
border-radius:0 !important;
text-transform:uppercase;
letter-spacing:.08em;
}
html[data-theme="light"] .price-book-button:hover{
background:#8c6247 !important;
}
/* Popup light version */
html[data-theme="light"] .service-info-modal{
background:rgba(44,34,27,.38) !important;
}
html[data-theme="light"] .service-info-dialog{
background:#fffaf5 !important;
color:#4c3d33 !important;
border:1px solid rgba(76,52,38,.12) !important;
border-radius:0 !important;
}
html[data-theme="light"] .service-info-modal-head{
border-bottom-color:rgba(76,52,38,.12) !important;
}
html[data-theme="light"] .service-info-modal-head h2{
color:#211a16 !important;
font-family:Didot,"Bodoni MT","Bodoni 72",Georgia,serif !important;
font-size:31px !important;
font-weight:400 !important;
}
html[data-theme="light"] .service-info-close{
color:#6f4c37 !important;
}
html[data-theme="light"] .service-info-modal-body{
color:#59483d !important;
}
html[data-theme="light"] .service-info-modal-body .modal-lead{
color:#352a23 !important;
}
html[data-theme="light"] .service-info-modal-body h3{
color:#8c6247 !important;
}
/* Footer is light only in light mode */
html[data-theme="light"] footer{
background:#e5d1c1 !important;
color:#58473b !important;
border-top-color:rgba(76,52,38,.14) !important;
}
html[data-theme="light"] footer strong{
color:#2a211c !important;
}
html[data-theme="light"] footer span,
html[data-theme="light"] footer a,
html[data-theme="light"] footer div{
color:#58473b !important;
}
/* Popup editor marker in admin */
.popup-admin-title{
margin-top:22px !important;
padding-top:20px !important;
border-top:1px solid rgba(241,227,214,.14) !important;
}
/* =========================================================
SERVICE EDITORIAL MEDIA LAYOUT
First photo left, text right, remaining media underneath
beginning from the right side and continuing to the left.
========================================================= */
.service-editorial{
padding:90px 5.2vw 70px !important;
display:grid !important;
grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr) !important;
gap:72px 70px !important;
align-items:start !important;
}
.service-lead-media{
min-width:0;
}
.service-lead-photo,
.service-main-placeholder{
width:100% !important;
height:560px !important;
margin:0 !important;
background:#17130f !important;
}
.service-lead-photo img,
.service-lead-photo video,
.service-main-placeholder{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
.service-right-banner{
position:static !important;
top:auto !important;
min-width:0;
padding-top:8px;
}
.service-extra-media-strip{
grid-column:1 / -1;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
direction:rtl;
align-items:stretch;
}
.service-extra-media-strip .service-photo{
direction:ltr;
width:100%;
min-width:0;
}
.service-extra-media-strip .service-photo img,
.service-extra-media-strip .service-photo video{
width:100% !important;
height:360px !important;
object-fit:cover !important;
}
/* =========================================================
GROUPED PRICE LIST
========================================================= */
.price-main-title{
margin-bottom:44px;
padding-bottom:18px;
border-bottom:1px solid rgba(241,227,214,.14);
}
.price-main-title h2{
margin:0;
font-family:Didot,"Bodoni MT","Bodoni 72",Georgia,serif;
font-size:clamp(42px,5vw,68px);
font-weight:400;
line-height:1;
letter-spacing:-.03em;
}
.price-groups{
display:grid;
gap:34px;
}
.price-group{
padding:0 0 6px;
}
.price-group-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
padding:0 0 14px;
border-bottom:1px solid rgba(241,227,214,.13);
}
.price-group-head h3{
margin:0;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
font-weight:500;
letter-spacing:0;
}
.price-group-head p{
max-width:720px;
margin:5px 0 0;
font-size:12px;
line-height:1.45;
}
.price-group .service-more-button{
flex:0 0 40px;
width:40px;
height:36px;
}
.price-group .booksy-price-row{
padding-left:0 !important;
padding-right:0 !important;
}
.price-group-unassigned{
margin-top:34px;
}
/* DARK theme */
html:not([data-theme="light"]) .price-main-title{
border-bottom-color:rgba(241,227,214,.14);
}
html:not([data-theme="light"]) .price-main-title h2,
html:not([data-theme="light"]) .price-group-head h3{
color:#f4e8dd !important;
}
html:not([data-theme="light"]) .price-group-head p{
color:#bca99a !important;
}
/* LIGHT theme */
html[data-theme="light"] .price-main-title{
border-bottom-color:rgba(76,52,38,.14);
}
html[data-theme="light"] .price-main-title h2,
html[data-theme="light"] .price-group-head h3{
color:#211a16 !important;
}
html[data-theme="light"] .price-group-head p{
color:#69564a !important;
}
/* =========================================================
PRICE GROUP POPUPS
========================================================= */
body.modal-open{
overflow:hidden;
}
.price-group-modal{
position:fixed;
inset:0;
z-index:10070;
display:none;
align-items:center;
justify-content:center;
padding:22px;
}
.price-group-modal.show{
display:flex;
}
.price-group-dialog{
width:min(640px,100%);
max-height:90vh;
overflow:auto;
}
.price-group-modal-head{
display:flex;
align-items:center;
gap:20px;
padding:19px 22px;
}
.price-group-modal-head h2{
margin:0;
}
.price-group-close{
flex:0 0 34px;
width:34px;
height:34px;
padding:0;
border:0;
background:transparent;
font-size:34px;
line-height:1;
cursor:pointer;
}
.price-group-modal-body{
padding:25px 24px 31px;
font-size:14px;
line-height:1.75;
}
.price-group-modal-body .modal-lead{
font-weight:600;
}
.price-group-modal-body h3{
margin:24px 0 10px;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
}
.price-group-modal-body ul{
margin:0;
padding-left:22px;
}
/* Dark popup */
html:not([data-theme="light"]) .price-group-modal{
background:rgba(9,7,6,.74);
}
html:not([data-theme="light"]) .price-group-dialog{
background:#28231f;
color:#d8c8ba;
border:1px solid rgba(199,154,98,.28);
box-shadow:0 35px 100px rgba(0,0,0,.44);
}
html:not([data-theme="light"]) .price-group-modal-head{
border-bottom:1px solid rgba(241,227,214,.12);
}
html:not([data-theme="light"]) .price-group-modal-head h2{
color:#f4e8dd;
font-family:Didot,"Bodoni MT","Bodoni 72",Georgia,serif;
font-size:31px;
font-weight:400;
}
html:not([data-theme="light"]) .price-group-close{
color:#dfbd91;
}
html:not([data-theme="light"]) .price-group-modal-body .modal-lead{
color:#eee1d5;
}
html:not([data-theme="light"]) .price-group-modal-body h3,
html:not([data-theme="light"]) .price-group-modal-body li::marker{
color:#c79a62;
}
/* Light popup */
html[data-theme="light"] .price-group-modal{
background:rgba(45,34,27,.38);
}
html[data-theme="light"] .price-group-dialog{
background:#fffaf5;
color:#59483d;
border:1px solid rgba(76,52,38,.13);
box-shadow:0 30px 90px rgba(72,48,33,.18);
}
html[data-theme="light"] .price-group-modal-head{
border-bottom:1px solid rgba(76,52,38,.12);
}
html[data-theme="light"] .price-group-modal-head h2{
color:#211a16;
font-family:Didot,"Bodoni MT","Bodoni 72",Georgia,serif;
font-size:31px;
font-weight:400;
}
html[data-theme="light"] .price-group-close{
color:#6f4c37;
}
html[data-theme="light"] .price-group-modal-body .modal-lead{
color:#352a23;
}
html[data-theme="light"] .price-group-modal-body h3{
color:#8c6247;
}
/* =========================================================
ADMIN: grouped price editor
========================================================= */
.price-services-admin{
display:grid;
gap:28px;
}
.price-service-admin-card{
padding:24px;
background:linear-gradient(145deg,#28231f,#24201c);
border:1px solid rgba(241,227,214,.14);
}
.admin-price-groups{
display:grid;
gap:22px;
}
.admin-price-group{
padding:18px;
background:#211d1a;
border:1px solid rgba(241,227,214,.10);
}
.admin-group-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-bottom:14px;
}
.admin-group-heading strong{
color:#f1e3d6;
font-size:18px;
}
.admin-group-grid{
display:grid;
grid-template-columns:1fr 180px;
gap:12px;
}
.admin-group-grid label{
display:grid;
gap:7px;
color:#e8dacf;
font-size:11px;
font-weight:600;
}
.admin-group-grid .wide-field{
grid-column:1 / -1;
}
.admin-group-grid input,
.admin-group-grid textarea,
.price-edit-row select,
.standalone-price-add select{
width:100%;
padding:11px 12px;
border:1px solid rgba(241,227,214,.16);
background:#1c1916;
color:#f1e3d6;
outline:none;
}
.price-group-editor>button{
margin-top:13px;
}
.group-delete-form{
display:flex;
justify-content:flex-end;
margin-top:-36px;
margin-bottom:18px;
}
.group-prices-admin{
margin-top:22px;
padding-top:18px;
border-top:1px solid rgba(241,227,214,.10);
}
.group-prices-admin h3,
.unassigned-prices h3{
color:#dfbd91;
font-size:18px;
}
.grouped-price-row{
grid-template-columns:minmax(170px,1fr) 110px 125px minmax(180px,.8fr) 78px auto !important;
}
.grouped-price-row select,
.standalone-price-add select{
min-height:43px;
}
.grouped-price-add{
grid-template-columns:minmax(180px,1fr) 120px 130px 80px auto !important;
}
.add-price-group-panel{
margin:20px 0;
padding:14px 16px;
border:1px solid rgba(199,154,98,.24);
background:#25201c;
}
.add-price-group-panel summary{
color:#dfbd91;
cursor:pointer;
font-size:12px;
text-transform:uppercase;
letter-spacing:.10em;
}
.new-price-group{
margin-top:18px;
}
.unassigned-prices{
margin-top:22px;
padding:18px;
border:1px dashed rgba(223,189,145,.30);
}
.standalone-price-add{
margin-top:22px;
grid-template-columns:minmax(170px,1fr) 115px 120px minmax(180px,.8fr) 76px auto !important;
}
@media(max-width:980px){
.service-editorial{
grid-template-columns:1fr !important;
gap:38px !important;
}
.service-right-banner{
position:static !important;
}
.service-extra-media-strip{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.grouped-price-row,
.standalone-price-add{
grid-template-columns:1fr 1fr !important;
}
}
@media(max-width:680px){
.service-editorial{
padding:60px 22px 55px !important;
}
.service-lead-photo,
.service-main-placeholder{
height:410px !important;
}
.service-extra-media-strip{
grid-template-columns:1fr;
direction:ltr;
}
.service-extra-media-strip .service-photo img,
.service-extra-media-strip .service-photo video{
height:360px !important;
}
.price-group-head{
gap:12px;
}
.price-main-title h2{
font-size:42px;
}
.admin-group-grid,
.grouped-price-row,
.grouped-price-add,
.standalone-price-add{
grid-template-columns:1fr !important;
}
.group-delete-form{
justify-content:flex-start;
margin:10px 0 18px;
}
}
/* =========================================================
FINAL PRICE STRUCTURE
PROCEDURE -> ••• -> MASTERS / PRICES
========================================================= */
.price-section{
padding:85px 6vw !important;
}
.price-shell{
width:min(100%,1050px) !important;
margin:0 auto !important;
}
.price-main-heading{
margin:10px 0 45px !important;
font-family:
Didot,
"Bodoni MT",
Georgia,
serif !important;
font-size:clamp(42px,5vw,68px) !important;
font-weight:400 !important;
line-height:1 !important;
letter-spacing:-.03em !important;
}
/* One procedure = one complete section */
.procedure-price-card{
padding:0 0 8px !important;
margin-bottom:32px !important;
border-bottom:
1px solid rgba(223,189,145,.18) !important;
}
/* Procedure heading */
.procedure-price-header{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:25px !important;
padding:0 0 15px !important;
}
.procedure-title-box{
min-width:0;
}
.procedure-title-box h3{
margin:0 !important;
font-family:
Arial,
Helvetica,
sans-serif !important;
font-size:16px !important;
font-weight:500 !important;
line-height:1.35 !important;
letter-spacing:0 !important;
}
.procedure-title-box p{
max-width:620px !important;
margin:5px 0 0 !important;
font-size:12px !important;
line-height:1.45 !important;
}
/* Three dots */
.procedure-more{
flex:0 0 40px !important;
width:40px !important;
height:36px !important;
padding:0 0 7px !important;
border:
1px solid rgba(199,154,98,.35) !important;
background:transparent !important;
color:#dfbd91 !important;
font-size:23px !important;
font-weight:700 !important;
letter-spacing:2px !important;
cursor:pointer !important;
transition:.2s !important;
}
.procedure-more:hover{
background:#c79a62 !important;
color:#211a16 !important;
}
/* Masters / price variants */
.procedure-variants{
width:100% !important;
}
.procedure-variant{
min-height:67px !important;
display:grid !important;
grid-template-columns:
minmax(0,1fr)
auto !important;
align-items:center !important;
gap:20px !important;
padding:14px 0 !important;
border-top:
1px solid rgba(223,189,145,.12) !important;
}
.procedure-empty-variant{
opacity:.72;
}
.variant-name span{
font-size:14px !important;
}
.variant-booking{
display:flex !important;
align-items:center !important;
gap:13px !important;
}
.variant-price{
min-width:95px !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
}
.variant-price strong{
font-size:14px !important;
}
.variant-price small{
margin-top:2px !important;
opacity:.55 !important;
font-size:10px !important;
}
/* Booking button */
.variant-book-button{
min-width:51px !important;
padding:9px 11px !important;
display:inline-flex !important;
justify-content:center !important;
align-items:center !important;
background:#c79a62 !important;
color:#211a16 !important;
text-decoration:none !important;
font-size:11px !important;
font-weight:700 !important;
transition:.2s !important;
}
.variant-book-button:hover{
background:#dfbd91 !important;
}
/* ===============================
DARK
=============================== */
html:not([data-theme="light"])
.price-section{
background:#24201c !important;
color:#eee1d5 !important;
}
/* ===============================
LIGHT
=============================== */
html[data-theme="light"]
.price-section{
background:#f7efe8 !important;
color:#2b231e !important;
}
html[data-theme="light"]
.procedure-price-card{
border-bottom-color:
rgba(76,52,38,.15) !important;
}
html[data-theme="light"]
.procedure-variant{
border-top-color:
rgba(76,52,38,.11) !important;
}
html[data-theme="light"]
.procedure-more{
background:#ead9ca !important;
border-color:
rgba(108,73,51,.16) !important;
color:#765039 !important;
}
html[data-theme="light"]
.procedure-more:hover{
background:#a87957 !important;
color:#fff !important;
}
html[data-theme="light"]
.variant-book-button{
background:#a87957 !important;
color:#fff !important;
}
/* ===================================
PROCEDURE POPUP
=================================== */
body.modal-open{
overflow:hidden !important;
}
.procedure-modal{
position:fixed !important;
inset:0 !important;
z-index:20000 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:22px !important;
background:
rgba(0,0,0,.65) !important;
}
.procedure-modal.show{
display:flex !important;
}
.procedure-modal-dialog{
width:min(630px,100%) !important;
max-height:88vh !important;
overflow-y:auto !important;
}
html:not([data-theme="light"])
.procedure-modal-dialog{
background:#28231f !important;
color:#d8c8ba !important;
border:
1px solid
rgba(199,154,98,.3) !important;
}
html[data-theme="light"]
.procedure-modal-dialog{
background:#fffaf5 !important;
color:#59483d !important;
}
.procedure-modal-header{
display:flex !important;
align-items:center !important;
gap:22px !important;
padding:20px 23px !important;
border-bottom:
1px solid
rgba(199,154,98,.18) !important;
}
.procedure-modal-header h2{
margin:0 !important;
font-family:
Didot,
"Bodoni MT",
Georgia,
serif !important;
font-size:31px !important;
font-weight:400 !important;
}
.procedure-modal-close{
width:34px !important;
height:34px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
color:#c79a62 !important;
font-size:35px !important;
line-height:1 !important;
cursor:pointer !important;
}
.procedure-modal-body{
padding:26px 25px 32px !important;
font-size:14px !important;
line-height:1.75 !important;
}
.procedure-modal-intro{
font-weight:600 !important;
}
.procedure-modal-body h4{
margin:25px 0 10px !important;
color:#c79a62 !important;
font-size:11px !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
}
.procedure-modal-body ul{
padding-left:22px !important;
}
/* Mobile */
@media(max-width:650px){
.price-section{
padding:65px 22px !important;
}
.procedure-variant{
gap:10px !important;
}
.variant-booking{
gap:8px !important;
}
.variant-price{
min-width:70px !important;
}
.procedure-modal{
padding:10px !important;
}
}
/* =========================================================
EXACT PRICE LAYOUT REQUESTED BY USER
Procedure title + description + •••, then master rows.
========================================================= */
.price-procedures{
display:block !important;
}
.procedure-price-card{
width:100% !important;
margin:0 !important;
padding:22px 0 8px !important;
border:0 !important;
border-bottom:1px solid rgba(223,189,145,.20) !important;
}
.procedure-price-card:first-child{
padding-top:0 !important;
}
.procedure-price-header{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
align-items:start !important;
gap:18px !important;
padding:0 0 9px !important;
}
.procedure-title-box{
min-width:0 !important;
}
.procedure-title-box h3{
margin:0 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:15px !important;
font-weight:500 !important;
line-height:1.35 !important;
}
.procedure-title-box p{
margin:3px 0 0 !important;
max-width:720px !important;
font-size:11px !important;
line-height:1.35 !important;
opacity:.8 !important;
}
.procedure-more{
align-self:start !important;
width:34px !important;
height:30px !important;
flex:0 0 34px !important;
display:grid !important;
place-items:center !important;
padding:0 0 5px !important;
font-size:20px !important;
line-height:1 !important;
}
.procedure-variants{
display:block !important;
width:100% !important;
}
.procedure-variant{
width:100% !important;
min-height:58px !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
align-items:center !important;
gap:20px !important;
padding:11px 0 !important;
border-top:0 !important;
}
.variant-name{
min-width:0 !important;
}
.variant-name span{
display:block !important;
font-size:13px !important;
line-height:1.35 !important;
}
.variant-booking{
display:grid !important;
grid-template-columns:auto auto !important;
align-items:center !important;
gap:12px !important;
}
.variant-price{
min-width:86px !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
justify-content:center !important;
}
.variant-price strong{
font-size:14px !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
.variant-price small{
margin-top:2px !important;
font-size:10px !important;
line-height:1.1 !important;
opacity:.55 !important;
white-space:nowrap !important;
}
.variant-book-button{
min-width:48px !important;
min-height:32px !important;
padding:7px 10px !important;
font-size:10px !important;
line-height:1 !important;
}
/* Dark theme */
html:not([data-theme="light"]) .procedure-price-card{
border-bottom-color:rgba(223,189,145,.18) !important;
}
html:not([data-theme="light"]) .procedure-title-box h3,
html:not([data-theme="light"]) .variant-name span,
html:not([data-theme="light"]) .variant-price strong{
color:#eee1d5 !important;
}
html:not([data-theme="light"]) .procedure-title-box p{
color:#ad9b8d !important;
}
/* Light theme */
html[data-theme="light"] .procedure-price-card{
border-bottom-color:rgba(76,52,38,.14) !important;
}
html[data-theme="light"] .procedure-title-box h3,
html[data-theme="light"] .variant-name span,
html[data-theme="light"] .variant-price strong{
color:#2b231e !important;
}
html[data-theme="light"] .procedure-title-box p{
color:#725e50 !important;
}
@media(max-width:650px){
.procedure-price-header{
gap:10px !important;
}
.procedure-variant{
gap:10px !important;
}
.variant-booking{
gap:7px !important;
}
.variant-price{
min-width:68px !important;
}
.variant-name span{
font-size:12px !important;
}
}
/* =========================================================
ART BEAUTY — MOVING LUXURY BACKGROUND
========================================================= */
@keyframes artBeautyAmbientBackground{
0%{
background-position:
0% 20%,
100% 80%;
}
50%{
background-position:
70% 70%,
25% 20%;
}
100%{
background-position:
100% 30%,
0% 90%;
}
}
/*
* Moving light is deliberately subtle.
* Existing section colors stay the same.
*/
.services-section,
.gallery-section,
.reviews-section,
.contact-section,
.service-page,
.price-section,
.service-hero,
footer{
background-image:
radial-gradient(
circle at center,
rgba(199,154,98,.075) 0,
rgba(199,154,98,.028) 21%,
transparent 45%
),
radial-gradient(
circle at center,
rgba(223,189,145,.05) 0,
transparent 40%
) !important;
background-size:
165% 165%,
185% 185% !important;
background-repeat:no-repeat !important;
animation:
artBeautyAmbientBackground
18s
ease-in-out
infinite
alternate;
}
/* A slightly calmer movement for the footer. */
footer{
animation-duration:24s !important;
}
/* Light theme gets a warmer, softer moving background. */
html[data-theme="light"]
.services-section,
html[data-theme="light"]
.gallery-section,
html[data-theme="light"]
.reviews-section,
html[data-theme="light"]
.contact-section,
html[data-theme="light"]
.service-page,
html[data-theme="light"]
.price-section,
html[data-theme="light"]
.service-hero,
html[data-theme="light"]
footer{
background-image:
radial-gradient(
circle at center,
rgba(160,127,58,.10) 0,
rgba(160,127,58,.035) 24%,
transparent 48%
),
radial-gradient(
circle at center,
rgba(167,125,96,.08) 0,
transparent 42%
) !important;
}
/* Respect accessibility settings. */
@media (prefers-reduced-motion: reduce){
.services-section,
.gallery-section,
.reviews-section,
.contact-section,
.service-page,
.price-section,
.service-hero,
footer{
animation:none !important;
}
}
/* =========================================================
SERVICE NAMES — ORDINARY STATIC TEXT
========================================================= */
.service-icon{
text-align:center !important;
width:155px !important;
}
.service-icon-image-link{
display:block !important;
width:145px !important;
margin:0 auto !important;
}
.service-name-static{
display:block !important;
position:static !important;
margin-top:14px !important;
color:inherit !important;
font-family:
Arial,
Helvetica,
sans-serif !important;
font-size:12px !important;
font-weight:400 !important;
line-height:1.35 !important;
letter-spacing:.02em !important;
text-transform:none !important;
transform:none !important;
transition:none !important;
cursor:default !important;
pointer-events:none !important;
}
/*
* Only the icon reacts to hover.
* The service name stays exactly where it is.
*/
.service-icon:hover .service-name-static{
color:inherit !important;
transform:none !important;
}
.service-icon-image-link:hover .icon-circle{
border-color:#c8aa6f !important;
box-shadow:
0 0 0 10px
rgba(160,127,58,.08) !important;
}
.service-icon-image-link:hover img{
transform:scale(1.12) !important;
}
/* =========================================================
BACK TO TOP BUTTON
========================================================= */
.back-to-top{
position:fixed !important;
right:24px !important;
bottom:24px !important;
z-index:9990 !important;
width:48px !important;
height:48px !important;
display:grid !important;
place-items:center !important;
padding:0 !important;
border:
1px solid
rgba(199,154,98,.72) !important;
border-radius:50% !important;
background:
rgba(36,32,28,.92) !important;
color:#dfbd91 !important;
box-shadow:
0 14px 38px
rgba(0,0,0,.22) !important;
backdrop-filter:blur(12px);
cursor:pointer !important;
opacity:0 !important;
visibility:hidden !important;
transform:
translateY(14px)
scale(.92) !important;
transition:
opacity .25s ease,
visibility .25s ease,
transform .25s ease,
background .2s ease,
color .2s ease !important;
}
.back-to-top span{
display:block;
margin-top:-2px;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:23px;
font-weight:300;
line-height:1;
}
.back-to-top.visible{
opacity:1 !important;
visibility:visible !important;
transform:
translateY(0)
scale(1) !important;
}
.back-to-top:hover{
background:#c79a62 !important;
color:#211a16 !important;
transform:
translateY(-3px)
scale(1.04) !important;
}
/* Light-theme arrow. */
html[data-theme="light"]
.back-to-top{
background:
rgba(247,239,232,.94) !important;
color:#765039 !important;
border-color:
rgba(118,80,57,.46) !important;
box-shadow:
0 14px 34px
rgba(75,52,38,.14) !important;
}
html[data-theme="light"]
.back-to-top:hover{
background:#a87957 !important;
color:#fffaf5 !important;
}
@media(max-width:620px){
.service-icon{
width:125px !important;
}
.service-icon-image-link{
width:120px !important;
}
.back-to-top{
right:15px !important;
bottom:16px !important;
width:44px !important;
height:44px !important;
}
}
/* =========================================================
ART BEAUTY — FINAL CONSOLIDATED FRONTEND RULES
One authoritative block for font, navigation, hero, Vanta,
service pages, pricing and responsive behavior.
========================================================= */
:root{
--art-display-font:"Bodoni Moda",Didot,"Bodoni MT","Bodoni 72",Georgia,serif;
--art-bg:#17130f;
--art-panel:#211d19;
--art-panel-2:#2b2520;
--art-cream:#f4e8dd;
--art-text:#d8c8ba;
--art-gold:#c79a62;
--art-gold-soft:#dfbd91;
--art-line:rgba(223,189,145,.22);
}
/* ---------- TYPOGRAPHY ---------- */
.brand,
.hero h1,
.hero-sub,
.section-head h2,
.preview-copy h3,
.service-hero h1,
.contact-copy h2,
footer strong,
.price-main-heading,
.price-main-title h2,
.procedure-title-box h3,
.uslugi h2{
font-family:var(--art-display-font) !important;
}
/* ---------- GLOBAL LAYERS / MOVING BACKGROUND ---------- */
html{
background:#080706 !important;
}
body{
position:relative !important;
background:#080706 !important;
overflow-x:hidden;
}
#vanta-background{
position:fixed !important;
inset:0 !important;
z-index:0 !important;
display:block !important;
width:100vw !important;
height:100vh !important;
pointer-events:none !important;
overflow:hidden !important;
background:#080706 !important;
}
#vanta-background canvas{
position:absolute !important;
inset:0 !important;
display:block !important;
width:100% !important;
height:100% !important;
}
body::before{
content:"";
position:fixed;
inset:-18%;
z-index:0;
pointer-events:none;
background:
radial-gradient(circle at 22% 28%,rgba(160,127,58,.075),transparent 36%),
radial-gradient(circle at 76% 67%,rgba(200,170,111,.05),transparent 40%),
radial-gradient(circle at 50% 50%,rgba(110,81,43,.035),transparent 48%);
filter:blur(70px);
animation:artBeautySoftGlow 38s ease-in-out infinite alternate;
}
@keyframes artBeautySoftGlow{
0%{transform:translate3d(-2%,-1%,0) scale(1)}
50%{transform:translate3d(2%,2%,0) scale(1.04)}
100%{transform:translate3d(-1%,3%,0) scale(1.02)}
}
.topbar{
z-index:50 !important;
}
main,
footer,
.back-to-top{
position:relative;
z-index:1;
}
/* ---------- HEADER / NAVIGATION ---------- */
.topbar{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
width:100% !important;
height:72px !important;
min-height:72px !important;
padding:0 clamp(18px,3.8vw,62px) !important;
gap:0 !important;
overflow:visible !important;
background:rgba(22,18,15,.97) !important;
border-bottom:1px solid rgba(199,154,98,.26) !important;
backdrop-filter:blur(14px);
}
.brand{
order:1 !important;
flex:0 0 auto !important;
margin:0 auto 0 0 !important;
font-size:26px !important;
letter-spacing:.13em !important;
line-height:1 !important;
white-space:nowrap !important;
}
.brand small{
display:none !important;
}
.burger{
display:none !important;
}
.topbar nav{
order:2 !important;
flex:0 1 auto !important;
position:static !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
width:auto !important;
max-height:none !important;
gap:clamp(16px,1.8vw,30px) !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
background:transparent !important;
}
.topbar nav>a,
.nav-services>button{
position:relative;
display:block !important;
width:auto !important;
padding:27px 0 24px !important;
color:#e2d5ca !important;
font-size:11.5px !important;
font-weight:500 !important;
line-height:1 !important;
letter-spacing:.09em !important;
white-space:nowrap !important;
}
.topbar nav>a::after,
.nav-services>button::after{
content:"";
position:absolute;
left:0;
right:100%;
bottom:18px;
height:1px;
background:var(--art-gold);
transition:right .25s ease;
}
.topbar nav>a:hover::after,
.nav-services>button:hover::after{
right:0;
}
.nav-services{
position:relative !important;
}
.nav-services .dropdown{
position:absolute !important;
top:calc(100% - 1px) !important;
left:50% !important;
right:auto !important;
width:min(300px,calc(100vw - 24px)) !important;
min-width:0 !important;
padding:10px 14px !important;
visibility:hidden !important;
opacity:0 !important;
transform:translate(-50%,8px) !important;
pointer-events:none !important;
background:#211c18 !important;
border:1px solid rgba(199,154,98,.30) !important;
box-shadow:0 18px 44px rgba(0,0,0,.40) !important;
transition:
opacity .2s ease,
transform .2s ease,
visibility .2s ease !important;
z-index:500 !important;
}
.nav-services:hover .dropdown,
.nav-services:focus-within .dropdown{
visibility:visible !important;
opacity:1 !important;
transform:translate(-50%,0) !important;
pointer-events:auto !important;
}
.dropdown a{
display:block !important;
padding:11px 9px !important;
font-size:12px !important;
font-weight:500 !important;
line-height:1.35 !important;
white-space:normal !important;
}
.header-actions{
order:3 !important;
flex:0 0 auto !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
margin-left:18px !important;
}
.header-actions .nav-book{
display:inline-flex !important;
min-height:40px !important;
padding:10px 16px !important;
font-size:9.5px !important;
letter-spacing:.10em !important;
white-space:nowrap !important;
}
.theme-toggle{
width:40px !important;
height:40px !important;
flex:0 0 40px !important;
}
/* ---------- HOME HERO / ABOUT ---------- */
/*
Full viewport on desktop: the next section stays below the fold.
Photo/video is always visible and fills the hero.
*/
.hero{
position:relative !important;
min-height:100svh !important;
height:100svh !important;
padding:
150px
7vw
90px !important;
overflow:hidden !important;
background:#17130f !important;
}
.hero-bg,
.hero-video{
position:absolute !important;
inset:0 !important;
z-index:0 !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center center !important;
filter:brightness(.61) saturate(.88) !important;
pointer-events:none !important;
}
.hero::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background:linear-gradient(
90deg,
rgba(16,13,11,.98) 0%,
rgba(16,13,11,.93) 24%,
rgba(16,13,11,.70) 44%,
rgba(16,13,11,.36) 64%,
rgba(16,13,11,.10) 82%,
rgba(16,13,11,.03) 100%
) !important;
filter:none !important;
}
.hero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
z-index:1 !important;
height:110px;
background:linear-gradient(transparent,rgba(15,12,10,.40)) !important;
}
.hero-copy{
position:relative !important;
z-index:2 !important;
}
/* ---------- MAIN DARK SECTIONS ---------- */
html:not([data-theme="light"]) .services-section{
background:rgba(25,22,19,.78) !important;
background-image:none !important;
}
html:not([data-theme="light"]) .gallery-section{
background:rgba(31,27,23,.82) !important;
}
html:not([data-theme="light"]) .reviews-section{
background:rgba(25,22,19,.84) !important;
}
html:not([data-theme="light"]) .contact-section{
background:rgba(37,31,26,.84) !important;
}
html:not([data-theme="light"]) footer{
background:rgba(20,17,14,.92) !important;
}
/* ---------- SERVICE PAGE ---------- */
html:not([data-theme="light"]) .service-hero{
background:#1c1916 !important;
background-image:none !important;
}
html:not([data-theme="light"]) .service-page,
html:not([data-theme="light"]) .service-editorial{
background:#211d19 !important;
background-image:none !important;
}
html:not([data-theme="light"]) .service-page .service-editorial{
background:transparent !important;
}
.service-hero{
width:100%;
max-width:100%;
min-height:430px;
padding:
clamp(125px,10vw,180px)
clamp(24px,7vw,135px)
clamp(50px,6vw,80px) !important;
box-sizing:border-box;
overflow:hidden;
}
.service-hero > div{
width:100%;
max-width:100%;
}
.service-hero h1{
width:100%;
max-width:100%;
margin:0;
font-size:clamp(48px,5.5vw,96px) !important;
font-weight:500 !important;
line-height:.98 !important;
letter-spacing:-.025em !important;
text-wrap:balance;
overflow-wrap:normal;
word-break:normal;
}
.service-hero p{
width:min(100%,850px);
margin-top:34px;
font-size:clamp(15px,1vw,17px) !important;
line-height:1.6;
}
/* ---------- SERVICE PREVIEW CARDS ---------- */
.preview-copy h3{
font-weight:500 !important;
line-height:1.02 !important;
letter-spacing:-.025em !important;
}
.preview-copy p,
.preview-copy li{
font-weight:400;
line-height:1.55;
}
.preview-copy li{
border-bottom:1px solid rgba(223,189,145,.24) !important;
}
/* ---------- SERVICE EDITORIAL MEDIA ---------- */
.service-editorial{
grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr) !important;
}
.service-lead-photo,
.service-main-placeholder{
width:100% !important;
height:560px !important;
}
.service-lead-photo img,
.service-lead-photo video,
.service-main-placeholder{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
.service-right-banner{
position:static !important;
top:auto !important;
}
/* ---------- LIST STARS ---------- */
.lux-list{
list-style:none !important;
padding-left:0 !important;
}
.lux-list li{
list-style:none !important;
}
.lux-list li::marker{
content:"" !important;
}
.lux-list li::before{
content:"✦" !important;
color:#a07f3a !important;
margin-right:12px !important;
}
/* ---------- PRICE LIST: BIGGER / EASIER TO READ ---------- */
.price-main-title h2{
font-size:clamp(46px,5vw,72px) !important;
font-weight:500 !important;
}
.procedure-title-box h3{
font-family:Arial,Helvetica,sans-serif !important;
font-size:19px !important;
font-weight:600 !important;
line-height:1.35 !important;
}
.procedure-title-box p{
font-size:13.5px !important;
line-height:1.5 !important;
}
.procedure-variant{
min-height:76px !important;
padding:17px 0 !important;
border-top:1px solid rgba(223,189,145,.22) !important;
}
.variant-name span{
font-size:16px !important;
font-weight:500 !important;
line-height:1.4 !important;
}
.variant-price strong{
font-size:16px !important;
font-weight:700 !important;
}
.variant-price small{
margin-top:3px !important;
opacity:.78 !important;
font-size:12px !important;
}
.variant-book-button{
min-width:58px !important;
padding:10px 13px !important;
font-size:12px !important;
}
.price-name strong{
font-size:16px !important;
font-weight:500 !important;
}
.price-name small{
font-size:12px !important;
}
.price-booking>strong{
font-size:16px !important;
}
/* ---------- LIGHT THEME ---------- */
html[data-theme="light"] #vanta-background{
display:none !important;
}
html[data-theme="light"] body{
background:#f4ecdf !important;
}
html[data-theme="light"] .hero-bg,
html[data-theme="light"] .hero-video{
display:block !important;
filter:brightness(.82) saturate(.88) !important;
}
html[data-theme="light"] .hero::before{
background:linear-gradient(
90deg,
rgba(244,236,223,.98) 0%,
rgba(244,236,223,.91) 26%,
rgba(244,236,223,.65) 47%,
rgba(244,236,223,.25) 67%,
rgba(244,236,223,.04) 100%
) !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:900px){
.topbar{
height:68px !important;
min-height:68px !important;
padding:0 10px !important;
}
.brand{
font-size:clamp(14px,2.7vw,18px) !important;
letter-spacing:.08em !important;
}
.topbar nav{
gap:clamp(7px,1.5vw,13px) !important;
}
.topbar nav>a,
.nav-services>button{
padding:24px 0 21px !important;
font-size:clamp(8px,1.22vw,9.5px) !important;
letter-spacing:.035em !important;
}
.header-actions{
gap:5px !important;
margin-left:7px !important;
}
.header-actions .nav-book{
min-height:32px !important;
padding:6px 8px !important;
font-size:7.5px !important;
}
.theme-toggle{
width:32px !important;
height:32px !important;
flex-basis:32px !important;
}
.hero{
min-height:100svh !important;
height:100svh !important;
padding:
125px
5vw
70px !important;
}
.service-hero{
min-height:380px;
padding:
125px
34px
55px !important;
}
.service-hero h1{
font-size:clamp(40px,7.5vw,72px) !important;
}
.service-preview,
.service-preview.reverse{
grid-template-columns:1fr !important;
}
.service-preview.reverse .media-frame{
order:0 !important;
}
.service-editorial{
grid-template-columns:1fr !important;
gap:34px !important;
padding:
60px
clamp(20px,5vw,42px)
52px !important;
}
.service-lead-photo,
.service-main-placeholder{
height:auto !important;
aspect-ratio:4 / 3 !important;
}
.service-extra-media-strip{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
direction:ltr !important;
}
.service-extra-media-strip .service-photo{
aspect-ratio:4 / 3 !important;
overflow:hidden !important;
}
.service-extra-media-strip .service-photo img,
.service-extra-media-strip .service-photo video{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
}
/* =========================================================
PHONE
========================================================= */
@media (max-width:620px){
.topbar{
height:64px !important;
min-height:64px !important;
padding:0 8px !important;
}
.brand{
font-size:13.5px !important;
letter-spacing:.055em !important;
}
.topbar nav{
gap:6px !important;
}
.topbar nav>a,
.nav-services>button{
padding:23px 0 20px !important;
font-size:8px !important;
font-weight:600 !important;
letter-spacing:0 !important;
}
.header-actions{
margin-left:5px !important;
}
.header-actions .nav-book{
display:none !important;
}
.theme-toggle{
width:30px !important;
height:30px !important;
flex-basis:30px !important;
}
.dropdown a{
font-size:12px !important;
}
/* HERO */
.hero{
min-height:100svh !important;
height:100svh !important;
padding:
102px
20px
55px !important;
}
.hero-bg,
.hero-video{
object-position:62% center !important;
}
html:not([data-theme="light"]) .hero::before{
background:linear-gradient(
180deg,
rgba(16,13,11,.24) 0%,
rgba(16,13,11,.42) 40%,
rgba(16,13,11,.88) 76%,
rgba(16,13,11,.98) 100%
) !important;
}
html[data-theme="light"] .hero::before{
background:linear-gradient(
180deg,
rgba(244,236,223,.12) 0%,
rgba(244,236,223,.38) 42%,
rgba(244,236,223,.89) 80%,
rgba(244,236,223,.97) 100%
) !important;
}
.hero-copy{
width:100% !important;
max-width:100% !important;
align-self:flex-end !important;
}
.hero h1{
font-size:clamp(48px,15vw,68px) !important;
font-weight:500 !important;
}
/* SERVICE HERO */
.service-hero{
min-height:auto !important;
padding:
100px
18px
38px !important;
}
.service-hero h1{
width:100% !important;
max-width:100% !important;
font-size:clamp(30px,8.7vw,44px) !important;
font-weight:500 !important;
line-height:1.04 !important;
letter-spacing:-.018em !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
hyphens:auto !important;
}
.service-hero p{
margin-top:20px !important;
font-size:15px !important;
line-height:1.55 !important;
}
/* SERVICE PREVIEW CARDS */
.service-preview,
.service-preview.reverse{
display:block !important;
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
.service-preview .media-frame,
.service-preview.reverse .media-frame{
width:100% !important;
height:auto !important;
min-height:0 !important;
aspect-ratio:4 / 3 !important;
overflow:hidden !important;
}
.service-preview .media-frame img,
.service-preview .media-frame video,
.service-preview.reverse .media-frame img,
.service-preview.reverse .media-frame video{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
}
.preview-copy{
padding:30px 22px !important;
}
.preview-copy h3{
width:100% !important;
max-width:100% !important;
margin:10px 0 22px !important;
font-size:clamp(31px,8.2vw,42px) !important;
font-weight:500 !important;
line-height:1.05 !important;
letter-spacing:-.018em !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
hyphens:auto !important;
}
.preview-copy p{
font-size:16.5px !important;
font-weight:500 !important;
line-height:1.58 !important;
}
.preview-copy li{
padding:11px 0 !important;
font-size:16px !important;
font-weight:500 !important;
line-height:1.45 !important;
border-bottom:1px solid rgba(223,189,145,.36) !important;
}
.preview-copy li::before{
font-size:11px !important;
}
/* INDIVIDUAL SERVICE PAGE MEDIA */
.service-page,
.service-editorial{
width:100% !important;
max-width:100% !important;
display:block !important;
padding:
34px
14px
46px !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
.service-lead-media,
.service-lead-photo,
.service-main-placeholder{
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
aspect-ratio:9 / 16 !important;
overflow:hidden !important;
}
.service-lead-photo img,
.service-lead-photo video,
.service-main-placeholder img,
.service-main-placeholder video{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
}
.service-extra-media-strip{
display:block !important;
width:100% !important;
max-width:100% !important;
margin-top:16px !important;
direction:ltr !important;
}
.service-extra-media-strip .service-photo{
width:100% !important;
margin:0 0 14px !important;
aspect-ratio:9 / 16 !important;
overflow:hidden !important;
}
.service-extra-media-strip .service-photo img,
.service-extra-media-strip .service-photo video{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
}
/* PRICE LIST */
.price-section{
padding-left:16px !important;
padding-right:16px !important;
}
.price-main-title h2{
font-size:clamp(36px,10vw,48px) !important;
}
.procedure-price-header{
gap:12px !important;
}
.procedure-title-box h3{
font-size:17px !important;
font-weight:700 !important;
}
.procedure-title-box p{
font-size:13px !important;
}
.procedure-variant{
min-height:74px !important;
gap:10px !important;
padding:15px 0 !important;
}
.variant-name span{
font-size:15.5px !important;
font-weight:600 !important;
}
.variant-price{
min-width:82px !important;
}
.variant-price strong{
font-size:15.5px !important;
}
.variant-price small{
font-size:11.5px !important;
opacity:.82 !important;
}
.variant-book-button{
min-width:54px !important;
padding:9px 10px !important;
font-size:11.5px !important;
}
.price-name strong{
font-size:15.5px !important;
}
.price-booking>strong{
font-size:15.5px !important;
}
}
/* Very small phones */
@media (max-width:430px){
.brand{
font-size:11.5px !important;
}
.topbar nav{
gap:4px !important;
}
.topbar nav>a,
.nav-services>button{
font-size:7.3px !important;
}
.theme-toggle{
width:28px !important;
height:28px !important;
flex-basis:28px !important;
}
.preview-copy h3{
font-size:clamp(29px,8.2vw,37px) !important;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
#vanta-background{
display:none !important;
}
body::before{
animation:none !important;
}
}
/* =========================================================
PRICE LAYOUT — LIKE FIRST REFERENCE, WITH LARGER TEXT
========================================================= */
.procedure-price-card{
padding:0 0 34px !important;
margin:0 0 34px !important;
border-bottom:1px solid rgba(223,189,145,.22) !important;
}
.procedure-price-header{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:24px !important;
margin:0 0 18px !important;
padding:0 !important;
border:0 !important;
}
.procedure-title-box{
min-width:0 !important;
flex:1 1 auto !important;
}
.procedure-title-box h3{
margin:0 0 6px !important;
font-size:21px !important;
font-weight:600 !important;
line-height:1.28 !important;
}
.procedure-title-box p{
max-width:760px !important;
margin:0 !important;
font-size:14px !important;
line-height:1.45 !important;
opacity:.72 !important;
}
.procedure-more{
flex:0 0 42px !important;
width:42px !important;
height:32px !important;
display:grid !important;
place-items:center !important;
margin-top:0 !important;
padding:0 0 6px !important;
border:1px solid rgba(199,154,98,.48) !important;
border-radius:0 !important;
background:transparent !important;
color:#dfbd91 !important;
font-size:22px !important;
line-height:1 !important;
letter-spacing:2px !important;
}
.procedure-variants{
display:grid !important;
gap:0 !important;
}
/* No separator between every master/variant row.
Only the whole procedure gets a separator. */
.procedure-variant{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
align-items:center !important;
min-height:58px !important;
padding:10px 0 !important;
gap:24px !important;
border:0 !important;
border-top:0 !important;
border-bottom:0 !important;
}
.variant-name{
min-width:0 !important;
}
.variant-name span{
display:block !important;
font-size:17px !important;
font-weight:500 !important;
line-height:1.35 !important;
}
.variant-booking{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:14px !important;
}
.variant-price{
min-width:92px !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
text-align:right !important;
}
.variant-price strong{
font-size:18px !important;
font-weight:700 !important;
line-height:1.15 !important;
}
.variant-price small{
margin-top:3px !important;
font-size:12.5px !important;
line-height:1.2 !important;
opacity:.72 !important;
}
.variant-book-button{
min-width:64px !important;
min-height:38px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:9px 13px !important;
border-radius:0 !important;
font-size:12px !important;
font-weight:700 !important;
}
/* ---------- MOBILE ---------- */
@media (max-width:620px){
.procedure-price-card{
padding-bottom:28px !important;
margin-bottom:30px !important;
}
.procedure-price-header{
gap:12px !important;
margin-bottom:16px !important;
}
.procedure-title-box h3{
font-size:18px !important;
font-weight:700 !important;
}
.procedure-title-box p{
font-size:13px !important;
}
.procedure-more{
flex-basis:38px !important;
width:38px !important;
height:30px !important;
font-size:20px !important;
}
.procedure-variant{
grid-template-columns:minmax(0,1fr) auto !important;
min-height:62px !important;
padding:11px 0 !important;
gap:12px !important;
}
.variant-name span{
font-size:16px !important;
font-weight:600 !important;
}
.variant-booking{
gap:8px !important;
}
.variant-price{
min-width:72px !important;
}
.variant-price strong{
font-size:16.5px !important;
}
.variant-price small{
font-size:11.5px !important;
}
.variant-book-button{
min-width:56px !important;
min-height:36px !important;
padding:8px 10px !important;
font-size:11.5px !important;
}
}
/* =========================================================
FINAL SERVICE MEDIA FIX — SHOW FULL PHOTO / VIDEO
Keep this block at the VERY END of style.css.
It overrides all earlier fixed heights, aspect ratios and cover rules.
========================================================= */
/* New service page markup */
.service-lead-media,
.service-lead-photo{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
background:#1c1916 !important;
}
/* Full image, natural proportions */
.service-lead-photo img{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
margin:0 auto !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
}
/* Full video, natural proportions */
.service-lead-photo video{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
margin:0 auto !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
}
/* Older service page markup, if this service still uses it */
.service-gallery-grid .gallery-item:first-child{
display:block !important;
grid-column:1 / -1 !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
overflow:visible !important;
background:#1c1916 !important;
}
.service-gallery-grid .gallery-item:first-child img,
.service-gallery-grid .gallery-item:first-child video{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
margin:0 auto !important;
object-fit:contain !important;
object-position:center center !important;
transform:none !important;
}
/* Never allow mobile rules to force 4:3 or 9:16 on the main media */
@media (max-width:980px){
.service-lead-media,
.service-lead-photo,
.service-gallery-grid .gallery-item:first-child{
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
overflow:visible !important;
}
.service-lead-photo img,
.service-lead-photo video,
.service-gallery-grid .gallery-item:first-child img,
.service-gallery-grid .gallery-item:first-child video{
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
object-fit:contain !important;
object-position:center center !important;
}
}
@media (max-width:620px){
.service-lead-media,
.service-lead-photo,
.service-gallery-grid .gallery-item:first-child{
width:100% !important;
max-width:100% !important;
height:auto !important;
aspect-ratio:auto !important;
}
.service-lead-photo img,
.service-lead-photo video,
.service-gallery-grid .gallery-item:first-child img,
.service-gallery-grid .gallery-item:first-child video{
width:100% !important;
max-width:100% !important;
height:auto !important;
aspect-ratio:auto !important;
object-fit:contain !important;
}
}
/* =========================================================
FINAL SERVICE TEXT SIZE — 25PX
========================================================= */
.service-right-banner .long-text,
.service-right-banner .long-text *,
.service-right-banner .lux-list,
.service-right-banner .lux-list li,
.uslugi .long-text,
.uslugi .long-text *,
.uslugi .lux-list,
.uslugi .lux-list li {
font-size: 25px !important;
line-height: 1.55 !important;
}
/* Decorative stars should stay smaller */
.service-right-banner .lux-list li::before,
.uslugi .lux-list li::before {
font-size: 15px !important;
}