:root{
--bg: #f6f3ec;
--paper: #fbfaf7;
--ink: #1a1a1a;
--muted: #6c6a63;
--line: rgba(0,0,0,.12);
--softLine: rgba(0,0,0,.08);
--accent: #a99763; --dark: #2a2a2a;
--frame: 1360px;
--edge: clamp(18px, 3vw, 44px);
--radius: 14px; --radiusSoft: 12px;
--shadow: 0 20px 60px rgba(0,0,0,.10);
--shadowSoft: 0 12px 34px rgba(0,0,0,.10);
--serif: ui-serif, "Times New Roman", Times, serif;
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
margin:0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
line-height: 1.45;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
.srOnly{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.frame{
width: min(var(--frame), 100% - (var(--edge) * 2));
margin-inline: auto;
}
.frame--narrow{
width: min(920px, 100% - (var(--edge) * 2));
}
.eyebrow{
letter-spacing: .28em;
text-transform: uppercase;
font-size: 12px;
color: var(--muted);
margin: 0 0 12px;
}
.h2{
font-family: var(--serif);
font-weight: 500;
letter-spacing: .01em;
margin: 0;
font-size: clamp(28px, 3.2vw, 44px);
}
.p{
color: var(--muted);
font-size: 15px;
max-width: 72ch;
}
.divider{
height: 2px;
width: 84px;
background: var(--accent);
opacity: .75;
} .preloader{
position: fixed;
inset: 0;
z-index: 9999;
background: #0f0f10;
display: grid;
place-items: center;
transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-hidden{
opacity: 0;
visibility: hidden;
}
.preloader__inner{
display: grid;
place-items: center;
gap: 18px;
text-align: center;
padding: 24px;
}
.ring{
width: 74px;
height: 74px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
position: relative;
}
.ring:before{
content:"";
position:absolute;
inset: -2px;
border-radius: inherit;
border: 2px solid rgba(255,255,255,.55);
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(0deg);
animation: spin 1.2s linear infinite;
}
.wordmark__brand{
font-family: var(--serif);
color: rgba(255,255,255,.92);
letter-spacing: .18em;
font-size: 12px;
text-transform: uppercase;
}
.wordmark__tag{
margin-top: 8px;
color: rgba(255,255,255,.68);
letter-spacing: .06em;
font-size: 12px;
}
@keyframes spin{ to{ transform: rotate(360deg);} }
@media (prefers-reduced-motion: reduce){
.ring:before{ animation: none; }
} .wa-float{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 50;
width: 54px;
height: 54px;
border-radius: 999px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(0,0,0,.10);
display: grid;
place-items: center;
box-shadow: var(--shadowSoft);
}
.wa-float__dot{
position:absolute;
inset: 8px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.08);
}
.wa-float__label{
font-size: 12px;
letter-spacing: .12em;
color: rgba(0,0,0,.78);
} .header{
position: sticky;
top: 0;
z-index: 40;
background: rgba(255,255,255,.22);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255,255,255,.14);
transition: background .25s ease, border-color .25s ease;
}
.header.is-scrolled{
background: rgba(255,255,255,.96);
border-bottom: 1px solid rgba(0,0,0,.10);
}
.header__inner{
width: min(var(--frame), 100% - (var(--edge) * 2));
margin-inline: auto;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
padding: 14px 0;
}
.brand{
display: inline-flex;
align-items: center;
gap: 12px;
}
.brand__mark{
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.16);
}
.brand__text{ display: grid; line-height: 1.1; }
.brand__name{
font-family: var(--serif);
letter-spacing: .06em;
text-transform: uppercase;
font-size: 12px;
}
.brand__sub{
margin-top: 2px;
color: var(--muted);
letter-spacing: .18em;
text-transform: uppercase;
font-size: 10px;
}
.nav{
justify-self: center;
display: flex;
gap: 18px;
}
.nav__link{
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(0,0,0,.72);
padding: 10px 8px;
border-radius: 999px;
}
.nav__link:hover{ background: rgba(0,0,0,.05); }
.navToggle{
display: none;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(255,255,255,.65);
cursor: pointer;
}
.navToggle__line{
display:block;
width: 18px;
height: 2px;
background: rgba(0,0,0,.72);
margin: 0 auto;
}
.navToggle__line + .navToggle__line{ margin-top: 6px; }
.navMobile{
display:none;
width: min(var(--frame), 100% - (var(--edge) * 2));
margin: 0 auto 14px;
padding: 12px;
border-radius: var(--radius);
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.96);
}
.navMobile.is-open{ display: grid; gap: 8px; }
.navMobile__link{
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.08);
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(0,0,0,.72);
}
.navMobile__link:hover{ background: rgba(0,0,0,.04); } .hero{
position: relative;
height: clamp(520px, 78vh, 820px);
background: #111;
overflow: hidden;
}
.hero__media{
position:absolute; inset:0;
background:
radial-gradient(1200px 600px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65)),
url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/hero_image_the_dome.jpg);
background-size: cover;
background-position: center;
transform: scale(1.02);
} .special-offers{
background:
radial-gradient(1200px 600px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65)),
url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09976-scaled.jpg) !important;
background-position: center center !important;
}
.experiences{
background:
radial-gradient(1200px 600px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65)),
url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/experience_4-scaled.jpg) !important;
background-position: center center !important;
}
.events{
background:
radial-gradient(1200px 600px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65)),
url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DJI_0846-scaled.jpg) !important;
background-position: center center !important;
}
.hero__overlay{
position:absolute; inset:0;
background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.62));
}
.hero__content{
position: relative;
width: min(var(--frame), 100% - (var(--edge) * 2));
margin-inline: auto;
height: 100%;
display: grid;
align-content: center;
max-width: 760px;
color: rgba(255,255,255,.92);
padding: 48px 0;
}
.hero__kicker{
margin: 0 0 12px;
font-size: 12px;
letter-spacing: .28em;
text-transform: uppercase;
opacity: .86;
}
.hero__title{
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 64px);
letter-spacing: .01em;
}
.hero__desc{
margin: 14px 0 22px;
color: rgba(255,255,255,.78);
max-width: 62ch;
font-size: 15px;
}
.hero__cta{
justify-self: start;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.26);
background: rgba(0,0,0,.22);
letter-spacing: .18em;
text-transform: uppercase;
font-size: 11px;
} .section{
padding: clamp(54px, 7vw, 96px) 0;
}
.section--intro{
padding-top: clamp(44px, 6vw, 76px);
padding-bottom: clamp(54px, 7vw, 84px);
}
.section--alt{ background: var(--bg); }
.section--soft{ background: #f3f0ea; }
.sectionHead{
display:flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
margin-bottom: 28px;
}
.sectionHead--center{
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px;
margin-bottom: 34px;
}
.sub{
margin: 0;
color: var(--muted);
max-width: 72ch;
font-size: 14px;
} .accomGrid{
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: clamp(14px, 2vw, 22px);
align-items: stretch;
}
.accomCard{
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: 320px;
background: #ddd;
}
.accomCard__img{
position:absolute; inset:0;
background-size: cover;
background-position: center;
transform: scale(1.03);
}
.accomCard__shade{
position:absolute; inset:0;
background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05));
opacity: .92;
}
.accomCard__img--1{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/DSC00407-scaled.jpg);
}
.accomCard__img--2{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/room_2.jpg);
}
.accomCard__img--3{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/DSC09649-2-scaled.jpg);
}
.accomCard__content{
position: relative;
height: 100%;
display: grid;
place-items: center;
gap: 14px;
padding: 22px;
text-align: center;
}
.accomCard__kicker{
margin: 0;
color: rgba(255,255,255,.92);
letter-spacing: .22em;
text-transform: uppercase;
font-size: 11px;
} .btn{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: 999px;
padding: 11px 16px;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
border: 1px solid rgba(0,0,0,.14);
background: transparent;
color: rgba(0,0,0,.76);
white-space: nowrap;
}
.btn--primary{
border-color: rgba(255,255,255,.30);
background: rgba(0,0,0,.30);
color: rgba(255,255,255,.92);
}
.btn--ghost{
border-color: rgba(0,0,0,.18);
background: rgba(255,255,255,.35);
} .offerBand{
display:grid;
grid-template-columns: 1fr 1.25fr 1fr;
gap: clamp(14px, 2vw, 22px);
align-items: stretch;
}
.offerBand__media{
border-radius: var(--radius);
overflow:hidden;
background-size: cover;
background-position: center;
min-height: 300px;
}
.offerBand__media--left{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/offer_1.jpg);
}
.offerBand__media--right{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/offer_2.jpg);
}
.offerBand__center{
border-radius: var(--radius);
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.62);
padding: clamp(18px, 2.2vw, 26px);
display:grid;
align-content: center;
justify-items: center;
text-align:center;
}
.offerBand__kicker{
margin:0 0 10px;
letter-spacing: .24em;
text-transform: uppercase;
font-size: 11px;
color: rgba(0,0,0,.70);
}
.offerBand__text{
margin: 0 0 16px;
color: var(--muted);
max-width: 56ch;
font-size: 14px;
} .expGrid{
display:grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto;
gap: clamp(14px, 2vw, 22px);
grid-template-areas:
"a b c"
"a d d";
align-items: stretch;
}
.expCard{
position: relative;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(0,0,0,.10);
background: #d9d9d9;
min-height: 0;
}
.expCard__img{
position:absolute; inset:0;
background-size: cover;
background-position: center;
}
.expCard__cap{
position:absolute;
left: 12px;
top: 10px;
font-size: 12px;
color: rgba(0,0,0,.70);
background: rgba(255,255,255,.62);
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
padding: 6px 10px; display: none;
} .expCard--a{ grid-area: a; }
.expCard--b{ grid-area: b; }
.expCard--c{ grid-area: c; }
.expCard--d{ grid-area: d; } .expCard--a{ aspect-ratio: 16 / 9; } .expCard--b{ aspect-ratio: 4 / 3; } .expCard--c{ aspect-ratio: 4 / 3; } .expCard--d{ aspect-ratio: 16 / 7; } .expCard__img--1{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09922-scaled.jpg);
}
.expCard__img--2{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/experience_2.jpg);
}
.expCard__img--3{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/experience_3.jpg);
}
.expCard__img--4{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC00455-scaled.jpg);
} .expCard__img--5{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC00077-scaled.jpg);
}
.expCard__img--6{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09555-scaled.jpg);
}
.expCard__img--7{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09835-scaled.jpg);
}
.expCard__img--8{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/experience_4.jpg);
}
.expCard__img--9{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/b_can_you_enhance_it_p-scaled.jpeg);
}
.expCard__img--10{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/experience_3-scaled.jpg);
}
.expCard__img--11{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09637-scaled.jpg);
}
.expCard__img--12{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09555-scaled.jpg);
}
.expCard__img--13{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09709-2-scaled.jpg);
}
.expCard__img--14{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09884-scaled.jpg);
}
.expCard__img--15{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/room_3-scaled.jpg);
}
.expCard__img--16{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/experience_4-scaled.jpg);
}
.background-position-230{
background-position: center 280px !important;
} .roomGrid{
display:grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto;
gap: clamp(14px, 2vw, 22px);
grid-template-areas:
"a b c"
"a d d";
align-items: stretch;
}
.roomCard{
position: relative;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(0,0,0,.10);
background: #d9d9d9;
min-height: 0;
}
.roomCard__img{
position:absolute; inset:0;
background-size: cover;
background-position: center;
}
.roomCard__cap{
position:absolute;
left: 12px;
top: 10px;
font-size: 12px;
color: rgba(0,0,0,.70);
background: rgba(255,255,255,.62);
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
padding: 6px 10px;
} .roomCard--a{ grid-area: a; }
.roomCard--b{ grid-area: b; }
.roomCard--c{ grid-area: c; }
.roomCard--d{ grid-area: d; } .roomCard--a{ aspect-ratio: 16 / 9; } .roomCard--b{ aspect-ratio: 4 / 3; } .roomCard--c{ aspect-ratio: 4 / 3; } .roomCard--d{ aspect-ratio: 16 / 7; } .roomCard__img--1{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/DSC09440-HDR-Enhanced-NR-copy-scaled.jpg);
}
.roomCard__img--2{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/DSC09479-HDR-Enhanced-NR-copy-scaled.jpg);
}
.roomCard__img--3{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/02/DSC00186-scaled.jpg);
}
.roomCard__img--4{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/experience_4.jpg);
} .roomCard__img--5{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09637-scaled.jpg);
}
.roomCard__img--6{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09446-HDR-Enhanced-NR-copy-scaled.jpg);
}
.roomCard__img--7{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09516-scaled.jpg);
}
.roomCard__img--8{
background-image: url(https://dev-thedome.kayanacreative.id/draft/wp-content/uploads/2026/03/DSC09649-2-scaled.jpg);
} .facilityStrip{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 22px);
}
.facilityCard{
border-radius: var(--radius);
overflow:hidden;
border: 1px solid rgba(0,0,0,.10);
background:#ddd;
}
.facilityCard__img{
width:100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
}
.facilityCard__img--1{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/facilities_1.jpg);
}
.facilityCard__img--2{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/facilities_2.jpg);
}
.facilityCard__img--3{
background-image: url(//thedomebali.com/wp-content/themes/the-dome-ukiran/assets/images/facilities_3.jpg);
} .footer{
background: #2f2f2c;
color: rgba(255,255,255,.78);
padding: clamp(54px, 6vw, 82px) 0;
}
.footerTitle{
font-family: var(--serif);
color: rgba(255,255,255,.92);
letter-spacing: .12em;
text-transform: uppercase;
font-size: 12px;
margin: 0 0 12px;
}
.footerText{
margin: 0 0 12px;
color: rgba(255,255,255,.70);
font-size: 13px;
}
.footerLink{
display:inline-block;
margin-top: 10px;
color: rgba(255,255,255,.70);
letter-spacing: .14em;
text-transform: uppercase;
font-size: 11px;
border-bottom: 1px solid rgba(255,255,255,.20);
padding-bottom: 6px;
}
.footerTop{
display:grid;
grid-template-columns: 1.15fr 1.2fr .75fr;
gap: clamp(18px, 2.6vw, 38px);
padding-bottom: 26px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.footerNav{
display:grid;
gap: 10px;
}
.footerNav a{
color: rgba(255,255,255,.70);
font-size: 13px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(255,255,255,.12);
}
.footerBtns{
margin-top: 16px;
display:flex;
gap: 10px;
flex-wrap: wrap;
}
.subscribe{
display:flex;
gap: 10px;
align-items: center;
margin-top: 10px;
}
.subscribe__input{
flex: 1;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.86);
padding: 0 14px;
outline: none;
}
.subscribe__input::placeholder{ color: rgba(255,255,255,.46); }
.subscribe__btn{
height: 44px;
border-radius: 999px;
padding: 0 16px;
border: 1px solid rgba(255,255,255,.20);
background: rgba(255,255,255,.90);
color: rgba(0,0,0,.78);
letter-spacing: .16em;
text-transform: uppercase;
font-size: 11px;
cursor:pointer;
}
.footerBottom{
display:flex;
justify-content: space-between;
gap: 18px;
padding-top: 18px;
}
.footerFine{
color: rgba(255,255,255,.55);
font-size: 12px;
}
.footerFine a{ color: rgba(255,255,255,.62); } @media (max-width: 980px){
.nav{ display:none; }
.navToggle{ display:block; }
.header__inner{ grid-template-columns: auto 1fr auto; }
.offerBand{ grid-template-columns: 1fr; }
.offerBand__media{ min-height: 260px; }
.accomGrid{ grid-template-columns: 1fr; }
.accomCard{ min-height: 300px; }
.facilityStrip{ grid-template-columns: 1fr; }
.footerTop{ grid-template-columns: 1fr; }
.footerBottom{ flex-direction: column; align-items: flex-start; } .expGrid{
grid-template-columns: 1fr;
grid-template-areas:
"a"
"b"
"c"
"d";
}
.expCard--a{ aspect-ratio: 16/10; }
.expCard--b,
.expCard--c{ aspect-ratio: 16/10; }
.expCard--d{ aspect-ratio: 16/10; } .roomGrid{
grid-template-columns: 1fr;
grid-template-areas:
"a"
"b"
"c"
"d";
}
.roomCard--a{ aspect-ratio: 16/10; }
.roomCard--b,
.roomCard--c{ aspect-ratio: 16/10; }
.roomCard--d{ aspect-ratio: 16/10; }
}
@media (max-width: 520px){
.hero__content{ padding: 40px 0; }
.subscribe{ flex-direction: column; align-items: stretch; }
.subscribe__btn{ width: 100%; }
}