*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;color:#102d33;background:#f6f3eb}a{text-decoration:none;color:inherit}.hero{
min-height:100vh;
position:relative;
overflow:hidden;
color:white;
display:flex;
flex-direction:column;
background:#082f36;
}
.hero::before{
content:"";
position:absolute;
inset:0;
background:url('/assets/maldives-hero.png') center/cover no-repeat;
transform:scaleX(-1);
z-index:0;
}
.hero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(5,25,29,.58) 0%,
rgba(5,25,29,.32) 38%,
rgba(5,25,29,.10) 68%,
rgba(5,25,29,.02) 100%
);
z-index:1;
pointer-events:none;
}
.hero > *{
position:relative;
z-index:2;
}.nav{display:flex;align-items:center;justify-content:space-between;padding:28px clamp(24px,5vw,80px);border-bottom:none}.brand{font-weight:700;letter-spacing:.22em;font-size:1rem}.navlinks{display:flex;align-items:center;gap:28px;font-size:.92rem}.nav-cta{border:1px solid rgba(255,255,255,.55);padding:11px 16px;border-radius:999px}.hero-inner{margin:auto 0;padding:80px clamp(24px,8vw,132px) 110px;max-width:880px}.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.2em;margin:0 0 22px}.eyebrow.dark{color:#38717a}.hero h1,.section h2{font-family:"Playfair Display",Georgia,serif}.hero h1{font-size:clamp(3.4rem,7vw,7.2rem);line-height:.95;letter-spacing:-.035em;margin:0 0 30px;max-width:900px}.hero-copy{font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.65;max-width:680px;color:rgba(255,255,255,.92)}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}.button{display:inline-block;padding:15px 21px;border-radius:999px;font-weight:600;font-size:.95rem;border:0;cursor:pointer}.button.primary{background:#f3c66a;color:#17343a}.button.ghost{border:1px solid rgba(255,255,255,.55)}.micro{margin-top:22px;font-size:.84rem;color:rgba(255,255,255,.72)}.section{padding:110px clamp(24px,8vw,132px)}.intro{max-width:1220px}.section h2{font-size:clamp(2.4rem,4vw,4.7rem);line-height:1.05;letter-spacing:-.025em;margin:0}.lede{font-size:1.2rem;line-height:1.8;max-width:760px;margin-top:34px;color:#52686c}.services{background:white}.section-heading{max-width:900px;margin-bottom:56px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{padding:34px 26px 42px;border:1px solid #d9e1df;min-height:280px}.num{display:block;font-size:.78rem;letter-spacing:.15em;color:#739096;margin-bottom:48px}.card h3{font-family:"Playfair Display",Georgia,serif;font-size:1.7rem;margin:0 0 18px}.card p{line-height:1.7;color:#607377;margin:0}.partner-panel{background:#0d5962;color:white;display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end}.partner-panel h2{max-width:760px}.partner-panel p{line-height:1.8;color:rgba(255,255,255,.83)}.text-link{display:inline-block;margin-top:20px;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:4px}.about{display:grid;grid-template-columns:1fr 1fr;gap:80px}.about-copy{font-size:1.08rem;line-height:1.85;color:#52686c}.contact{background:#082f36;color:white;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}.contact-copy h2{max-width:700px}.contact-copy>p{color:rgba(255,255,255,.72)}.direct-email{margin-top:28px}.direct-email a{border-bottom:1px solid rgba(255,255,255,.55)}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}.field label{font-size:.83rem;color:rgba(255,255,255,.74)}.field input,.field textarea{width:100%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:white;border-radius:10px;padding:14px 15px;font:inherit;outline:none}.field input:focus,.field textarea:focus{border-color:rgba(255,255,255,.65)}.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.38)}.form-row{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.button.light{background:white;color:#082f36}.form-status{margin:0;color:rgba(255,255,255,.78);font-size:.9rem}footer{padding:32px clamp(24px,5vw,80px);display:flex;align-items:center;gap:24px;justify-content:space-between;background:#041f24;color:rgba(255,255,255,.68);font-size:.8rem}.footer-brand{color:white}@media(max-width:900px){.navlinks a:not(.nav-cta){display:none}.cards{grid-template-columns:1fr 1fr}.partner-panel,.about,.contact{grid-template-columns:1fr}.hero-inner{padding-bottom:70px}.section{padding-top:80px;padding-bottom:80px}}@media(max-width:600px){.cards,.contact-form{grid-template-columns:1fr}.nav{padding:22px}.hero-inner{padding-left:24px;padding-right:24px}.hero h1{font-size:3.45rem}footer{flex-direction:column;align-items:flex-start}.nav-cta{padding:9px 12px;font-size:.82rem}}
/* Hapaxora header logo — clean production definition */
.logo-brand{
display:flex;
align-items:center;
line-height:0;
flex-shrink:0;
}
.logo-brand img{
display:block;
width:210px;
max-width:38vw;
height:auto;
object-fit:contain;
}
@media(max-width:600px){
.logo-brand img{
width:155px;
max-width:52vw;
}
}
/* Hapaxora reverse logo for photographic hero */
.logo-brand img {
filter: brightness(0) invert(1);
opacity: 1;
filter:
brightness(0)
invert(1)
drop-shadow(0 2px 5px rgba(0,0,0,.30));
}
/* ==========================================================
ONE LOCAL RELATIONSHIP — B2B FLOW
========================================================== */
.relationship-section{
max-width:none;
}
.relationship-section > h2{
max-width:1000px;
}
.relationship-section > .lede{
max-width:760px;
}
/* Main relationship diagram */
.relationship-map{
display:grid;
grid-template-columns:
minmax(190px,1fr)
minmax(65px,.28fr)
minmax(230px,1.12fr)
minmax(65px,.28fr)
minmax(190px,1fr);
align-items:stretch;
margin-top:72px;
}
/* Three main boxes */
.relationship-box{
position:relative;
min-height:220px;
padding:30px 28px;
border:1px solid #cbd8d6;
background:rgba(255,255,255,.35);
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.relationship-kicker{
position:absolute;
top:28px;
left:28px;
font-size:.67rem;
font-weight:700;
letter-spacing:.18em;
color:#66858a;
}
.relationship-box strong{
display:block;
font-family:"Playfair Display",Georgia,serif;
font-size:clamp(1.55rem,2.2vw,2.3rem);
font-weight:500;
line-height:1.08;
color:#17343a;
}
.relationship-box small{
display:block;
margin-top:13px;
font-size:.78rem;
line-height:1.5;
color:#718387;
}
/* Central Hapaxora box */
.relationship-hapaxora{
background:#0d5962;
border-color:#0d5962;
}
.relationship-hapaxora .relationship-kicker{
color:#f3c66a;
}
.relationship-hapaxora strong{
font-family:Inter,system-ui,sans-serif;
font-size:clamp(1.6rem,2.5vw,2.65rem);
font-weight:800;
letter-spacing:.12em;
color:white;
}
.relationship-hapaxora small{
color:rgba(255,255,255,.72);
}
/* Connecting lines */
.relationship-link{
display:flex;
align-items:center;
justify-content:center;
padding:0 12px;
}
.relationship-link span{
height:1px;
flex:1;
background:#b5c8c5;
}
.relationship-link b{
width:30px;
height:30px;
flex:0 0 30px;
margin-left:-1px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #9eb8b5;
border-radius:50%;
font-size:.82rem;
font-weight:400;
color:#38717a;
}
/* Supply categories */
.relationship-supply{
display:grid;
grid-template-columns:repeat(4,1fr);
margin-top:45px;
border-top:1px solid #d2dddb;
border-bottom:1px solid #d2dddb;
}
.relationship-supply > div{
min-height:100px;
padding:24px 22px;
display:flex;
flex-direction:column;
justify-content:center;
border-right:1px solid #d2dddb;
}
.relationship-supply > div:first-child{
padding-left:0;
}
.relationship-supply > div:last-child{
border-right:0;
}
.relationship-supply span{
margin-bottom:9px;
font-size:.65rem;
letter-spacing:.15em;
color:#8b9e9f;
}
.relationship-supply strong{
font-size:.91rem;
font-weight:600;
color:#29484d;
}
/* Subtle interaction — desktop only */
@media(min-width:901px){
.relationship-box{
transition:
transform .22s ease,
border-color .22s ease,
box-shadow .22s ease;
}
.relationship-source:hover,
.relationship-network:hover{
transform:translateY(-3px);
border-color:#9db8b4;
box-shadow:0 12px 30px rgba(23,52,58,.06);
}
}
/* Tablet / mobile */
@media(max-width:900px){
.relationship-map{
grid-template-columns:1fr;
margin-top:55px;
}
.relationship-box{
min-height:175px;
}
.relationship-link{
height:64px;
padding:0;
flex-direction:column;
}
.relationship-link span{
width:1px;
height:auto;
flex:1;
}
.relationship-link b{
margin:-1px 0 0;
transform:rotate(90deg);
}
}
@media(max-width:600px){
.relationship-map{
margin-top:45px;
}
.relationship-box{
min-height:155px;
padding:25px 22px;
}
.relationship-kicker{
top:23px;
left:22px;
}
.relationship-supply{
grid-template-columns:1fr 1fr;
margin-top:38px;
}
.relationship-supply > div{
min-height:82px;
padding:18px 16px;
}
.relationship-supply > div:first-child{
padding-left:16px;
}
.relationship-supply > div:nth-child(2){
border-right:0;
}
.relationship-supply > div:nth-child(1),
.relationship-supply > div:nth-child(2){
border-bottom:1px solid #d2dddb;
}
}
/* ==========================================================
EXPANDABLE STAYS — CORAL GRAND
========================================================== */
.interactive-card{
cursor:pointer;
position:relative;
transition:
transform .22s ease,
border-color .22s ease,
box-shadow .22s ease,
background .22s ease;
}
.interactive-card:hover,
.interactive-card:focus{
transform:translateY(-4px);
border-color:#7fb5b7;
background:#f8fcfb;
box-shadow:0 14px 34px rgba(8,47,54,.08);
outline:none;
}
.card-action{
display:inline-block;
margin-top:28px;
font-size:.8rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:#0d6971;
}
.stays-panel{
margin-top:34px;
border-top:1px solid #d9e1df;
}
.stays-panel[hidden],
.hotel-details[hidden]{
display:none;
}
.stays-panel-inner{
padding-top:54px;
}
.stays-panel-heading{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:30px;
margin-bottom:36px;
}
.stays-panel-heading h2{
max-width:760px;
font-size:clamp(2.2rem,3.5vw,4rem);
}
.stays-close{
border:1px solid #cbd8d6;
background:white;
color:#315b60;
padding:10px 14px;
border-radius:999px;
font:inherit;
cursor:pointer;
}
.hotel-feature{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
border:1px solid #d9e1df;
background:#fff;
}
.hotel-hero{
position:relative;
min-height:500px;
overflow:hidden;
}
.hotel-hero img{
width:100%;
height:100%;
min-height:500px;
object-fit:cover;
display:block;
}
.hotel-badge{
position:absolute;
left:24px;
bottom:24px;
background:rgba(6,43,49,.88);
color:white;
padding:10px 14px;
font-size:.72rem;
font-weight:700;
letter-spacing:.12em;
}
.hotel-info{
padding:46px 40px;
display:flex;
flex-direction:column;
justify-content:center;
}
.hotel-kicker{
margin:0 0 12px;
color:#0d6971;
font-size:.75rem;
font-weight:700;
letter-spacing:.14em;
}
.hotel-info h3{
font-family:"Playfair Display",Georgia,serif;
font-size:clamp(2rem,3vw,3.2rem);
line-height:1.05;
margin:0 0 22px;
}
.hotel-summary{
color:#52686c;
line-height:1.75;
margin:0 0 26px;
}
.hotel-facts{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:28px;
}
.hotel-facts span{
border:1px solid #d7e3e1;
padding:8px 10px;
font-size:.78rem;
color:#45676b;
}
.hotel-room-types{
border-top:1px solid #e1e7e5;
padding-top:20px;
}
.hotel-room-types strong{
display:block;
margin-bottom:6px;
}
.hotel-room-types p{
margin:0;
line-height:1.65;
color:#607377;
}
.hotel-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px;
}
.hotel-details-btn{
background:#0d5962;
color:white;
}
.hotel-enquiry-btn{
background:#f3c66a;
color:#17343a;
}
.hotel-details{
padding-top:30px;
}
.hotel-gallery{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}
.hotel-gallery img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
display:block;
}
.hotel-detail-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin-top:24px;
}
.hotel-detail-grid > div{
border:1px solid #d9e1df;
padding:24px;
}
.hotel-detail-grid h4{
margin:0 0 10px;
font-size:1rem;
color:#0d5962;
}
.hotel-detail-grid p{
margin:0;
line-height:1.7;
color:#607377;
}
@media(max-width:900px){
.hotel-feature{
grid-template-columns:1fr;
}
.hotel-hero,
.hotel-hero img{
min-height:380px;
}
.hotel-gallery{
grid-template-columns:1fr 1fr;
}
.hotel-detail-grid{
grid-template-columns:1fr;
}
}
@media(max-width:600px){
.stays-panel-heading{
display:block;
}
.stays-close{
margin-top:20px;
}
.hotel-info{
padding:30px 22px;
}
.hotel-hero,
.hotel-hero img{
min-height:300px;
}
.hotel-gallery{
grid-template-columns:1fr 1fr;
gap:6px;
}
}
/* ==========================================================
HOTEL PHOTO LIGHTBOX
========================================================== */
.hotel-photo-clickable{
cursor:zoom-in;
}
.hotel-gallery .hotel-photo-clickable{
transition:transform .2s ease, opacity .2s ease;
}
.hotel-gallery .hotel-photo-clickable:hover{
transform:scale(1.015);
opacity:.92;
}
.photo-lightbox{
position:fixed;
inset:0;
z-index:9999;
background:rgba(2,18,21,.94);
display:flex;
align-items:center;
justify-content:center;
padding:36px 82px;
}
.photo-lightbox[hidden]{
display:none;
}
body.lightbox-open{
overflow:hidden;
}
.lightbox-stage{
width:min(1180px,100%);
height:min(82vh,860px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.lightbox-stage img{
display:block;
max-width:100%;
max-height:calc(82vh - 70px);
width:auto;
height:auto;
object-fit:contain;
box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.lightbox-caption{
color:rgba(255,255,255,.86);
margin:16px 0 0;
text-align:center;
font-size:.9rem;
}
.lightbox-counter{
color:rgba(255,255,255,.52);
margin:6px 0 0;
font-size:.78rem;
letter-spacing:.08em;
}
.lightbox-close{
position:absolute;
top:22px;
right:26px;
width:46px;
height:46px;
border:1px solid rgba(255,255,255,.3);
border-radius:50%;
background:rgba(255,255,255,.08);
color:white;
font-size:2rem;
line-height:1;
cursor:pointer;
}
.lightbox-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:52px;
height:70px;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.07);
color:white;
font-size:2.5rem;
cursor:pointer;
}
.lightbox-prev{
left:20px;
}
.lightbox-next{
right:20px;
}
.lightbox-close:hover,
.lightbox-nav:hover{
background:rgba(255,255,255,.16);
}
@media(max-width:600px){
.photo-lightbox{
padding:70px 16px 84px;
}
.lightbox-stage{
height:auto;
}
.lightbox-stage img{
max-height:70vh;
}
.lightbox-nav{
top:auto;
bottom:18px;
transform:none;
width:54px;
height:48px;
}
.lightbox-prev{
left:calc(50% - 64px);
}
.lightbox-next{
right:calc(50% - 64px);
}
.lightbox-close{
top:16px;
right:16px;
}
}
/* HTM Rentals */
.htm-feature {
margin-top: 2rem;
}
.htm-details {
margin-top: 1rem;
}
.htm-intro {
margin-bottom: 1.5rem;
}
.htm-apartments {
display: grid;
gap: 0.9rem;
}
.htm-apartment {
border: 1px solid rgba(18, 65, 70, 0.16);
border-radius: 18px;
overflow: hidden;
background: #fff;
}
.htm-apartment-toggle {
width: 100%;
border: 0;
background: transparent;
padding: 1rem 1.15rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
text-align: left;
color: inherit;
font: inherit;
}
.htm-apartment-toggle strong {
display: block;
font-size: 1rem;
}
.htm-apartment-toggle small {
display: block;
margin-top: 0.25rem;
opacity: 0.7;
}
.htm-toggle-symbol {
font-size: 1.5rem;
line-height: 1;
}
.htm-apartment-content {
padding: 0 1.15rem 1.25rem;
}
.htm-apartment-cover {
width: 100%;
max-height: 480px;
object-fit: cover;
border-radius: 14px;
margin-bottom: 1rem;
}
.htm-apartment-content .hotel-gallery {
margin-top: 1rem;
}
.htm-apartment-content .hotel-gallery img {
cursor: pointer;
}
@media (max-width: 700px) {
.htm-apartment-cover {
max-height: 320px;
}
}
/* ==========================================================
FOCUSED STAY NAVIGATION
========================================================== */
/* Compact cards before a property is selected */
.stays-panel-inner > .hotel-feature {
max-width: 980px;
margin: 1.25rem auto;
display: grid;
grid-template-columns: minmax(240px, 0.82fr) minmax(300px, 1.18fr);
min-height: 0;
}
.stays-panel-inner > .hotel-feature .hotel-hero {
min-height: 230px;
height: 100%;
}
.stays-panel-inner > .hotel-feature .hotel-hero img {
width: 100%;
height: 100%;
min-height: 230px;
max-height: 310px;
object-fit: cover;
}
.stays-panel-inner > .hotel-feature .hotel-info {
padding: 1.5rem;
}
.stays-panel-inner > .hotel-feature .hotel-summary {
margin-bottom: 1rem;
}
/* Property detail no longer feels like endless content */
.hotel-details {
max-width: 1180px;
margin: 1rem auto 2rem;
}
/* Back navigation */
.stay-back-button {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0 0 1.25rem;
font: inherit;
font-weight: 700;
cursor: pointer;
color: inherit;
opacity: 0.76;
}
.stay-back-button:hover {
opacity: 1;
}
/* ----------------------------------------------------------
HTM apartment selection
---------------------------------------------------------- */
.htm-intro {
max-width: 720px;
margin-bottom: 1.5rem;
}
.htm-apartments {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.htm-apartment {
border: 1px solid rgba(18, 65, 70, 0.14);
border-radius: 16px;
overflow: hidden;
background: #fff;
}
/* Compact apartment selector */
.htm-apartment:not(.is-selected) .htm-apartment-toggle {
min-height: 92px;
}
/* Once an apartment is selected it uses the full width */
.htm-apartment.is-selected {
grid-column: 1 / -1;
border: 0;
background: transparent;
}
.htm-apartment.is-selected .htm-apartment-toggle {
display: none;
}
.htm-apartment-toggle {
width: 100%;
border: 0;
padding: 1rem 1.1rem;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.htm-apartment-toggle strong {
display: block;
font-size: 1.02rem;
}
.htm-apartment-toggle small {
display: block;
margin-top: 0.25rem;
opacity: 0.65;
}
.htm-toggle-symbol {
font-size: 1.45rem;
flex: 0 0 auto;
}
.htm-apartment-content {
padding: 0;
}
.htm-apartment-cover {
width: 100%;
height: clamp(280px, 46vw, 570px);
object-fit: cover;
border-radius: 18px;
margin-bottom: 1.25rem;
}
.htm-apartment-content > p,
.htm-apartment-content > .hotel-facts {
max-width: 820px;
}
/* Gallery becomes larger only after selecting the apartment */
.htm-apartment.is-selected .hotel-gallery {
margin-top: 1.5rem;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.7rem;
}
.htm-apartment.is-selected .hotel-gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
}
/* Keep the main Stay view compact */
.hotel-feature .hotel-facts {
gap: 0.4rem;
}
.hotel-feature .hotel-room-types {
margin-top: 0.9rem;
}
@media (max-width: 820px) {
.stays-panel-inner > .hotel-feature {
grid-template-columns: 1fr;
}
.stays-panel-inner > .hotel-feature .hotel-hero,
.stays-panel-inner > .hotel-feature .hotel-hero img {
min-height: 210px;
max-height: 280px;
}
.htm-apartments {
grid-template-columns: 1fr;
}
.htm-apartment.is-selected .hotel-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.stays-panel-inner > .hotel-feature .hotel-info {
padding: 1.15rem;
}
.htm-apartment.is-selected .hotel-gallery {
grid-template-columns: 1fr 1fr;
gap: 0.45rem;
}
.htm-apartment-cover {
height: 300px;
}
}
/* Stay property grid: two properties per row */
.stays-panel-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
align-items: start;
}
/* Heading and detail views span the full width */
.stays-panel-heading,
.stays-panel-inner > .hotel-details {
grid-column: 1 / -1;
}
/* Property cards fill their grid cell */
.stays-panel-inner > .hotel-feature {
width: 100%;
max-width: none;
margin: 0;
grid-template-columns: 1fr;
}
/* Keep compact card images consistent */
.stays-panel-inner > .hotel-feature .hotel-hero {
min-height: 220px;
}
.stays-panel-inner > .hotel-feature .hotel-hero img {
width: 100%;
height: 220px;
min-height: 220px;
max-height: 220px;
object-fit: cover;
}
/* Mobile */
@media (max-width: 820px) {
.stays-panel-inner {
grid-template-columns: 1fr;
}
.stays-panel-heading,
.stays-panel-inner > .hotel-details {
grid-column: 1;
}
}
/* ==========================================================
HAPAXORA PROPERTY MODAL
========================================================== */
body.property-modal-open{
overflow:hidden;
}
.property-modal{
position:fixed;
inset:0;
z-index:8000;
display:flex;
align-items:center;
justify-content:center;
padding:clamp(18px,4vw,52px);
background:rgba(2,25,29,.76);
backdrop-filter:blur(5px);
}
.property-modal[hidden]{
display:none;
}
.property-modal-window{
position:relative;
width:min(1180px,100%);
max-height:90vh;
overflow-y:auto;
overscroll-behavior:contain;
background:#fff;
border-radius:18px;
box-shadow:0 28px 90px rgba(0,0,0,.34);
}
.property-modal-header{
position:sticky;
top:0;
z-index:5;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px 22px;
border-bottom:1px solid #e0e7e5;
background:rgba(255,255,255,.96);
backdrop-filter:blur(8px);
}
.property-modal-title{
margin:0;
font-family:"Playfair Display",Georgia,serif;
font-size:1.4rem;
color:#173f45;
}
.property-modal-close{
width:42px;
height:42px;
flex:0 0 42px;
border:1px solid #cfdbd9;
border-radius:50%;
background:white;
color:#173f45;
font:inherit;
font-size:1.7rem;
line-height:1;
cursor:pointer;
}
.property-modal-close:hover{
background:#f3f8f7;
}
.property-modal-body{
padding:clamp(22px,4vw,48px);
}
/* Details are no longer part of the homepage layout while modal is open */
.property-modal-body > .hotel-details{
width:100%;
max-width:none;
margin:0;
padding-top:0;
grid-column:auto;
}
/* Apartment list starts cleanly inside popup */
.property-modal-body .htm-apartments{
width:100%;
}
/* Apartment detail can use the popup's full width */
.property-modal-body .htm-apartment.is-selected{
width:100%;
}
/* Keep popup gallery comfortable rather than changing homepage dimensions */
.property-modal-body .htm-apartment.is-selected .hotel-gallery{
grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:820px){
.property-modal{
padding:12px;
align-items:flex-start;
}
.property-modal-window{
margin-top:10px;
max-height:94vh;
border-radius:14px;
}
.property-modal-header{
padding:14px 16px;
}
.property-modal-body{
padding:20px 16px 28px;
}
.property-modal-body .htm-apartment.is-selected .hotel-gallery{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:520px){
.property-modal{
padding:0;
}
.property-modal-window{
width:100%;
max-height:100vh;
min-height:100vh;
margin:0;
border-radius:0;
}
}
/* =========================================================
HAPAXORA TRANSPORT SECTION
========================================================= */
.transport-panel {
margin-top: 2rem;
}
.transport-panel-inner {
padding: 2rem;
border-radius: 24px;
background: #f7f4ed;
}
.transport-panel-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1.75rem;
}
.transport-panel-heading h2 {
margin-top: .35rem;
}
.transport-intro {
max-width: 720px;
margin-top: .75rem;
line-height: 1.7;
}
.transport-close {
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
font-weight: 600;
white-space: nowrap;
}
.transport-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.transport-option {
position: relative;
padding: 1.5rem;
border-radius: 20px;
background: #ffffff;
border: 1px solid rgba(0,0,0,.08);
}
.transport-option h3 {
margin: .75rem 0 .65rem;
}
.transport-option p {
line-height: 1.65;
}
.transport-note {
font-size: .92rem;
opacity: .78;
}
.transport-status {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: .3rem .65rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
background: rgba(0,0,0,.06);
}
.transport-status.active {
background: #153f3b;
color: #ffffff;
}
.transport-button {
display: inline-flex;
margin-top: 1rem;
}
.transport-option.coming-soon {
opacity: .7;
}
@media (max-width: 850px) {
.transport-options {
grid-template-columns: 1fr;
}
.transport-panel-heading {
flex-direction: column;
}
.transport-close {
align-self: flex-end;
}
}
/* Shared panels for main What We Coordinate navigation */
.service-panel {
margin-top: 2rem;
}
.service-panel-inner {
padding: 2rem;
border-radius: 24px;
background: #f7f4ed;
}
.service-panel-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
}
.service-panel-heading h2 {
margin-top: .35rem;
}
.service-panel-heading p {
max-width: 720px;
line-height: 1.7;
}
.service-panel-close {
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 850px) {
.service-panel-heading {
flex-direction: column;
}
.service-panel-close {
align-self: flex-end;
}
}
/* =========================================================
AIRPORT TRANSFER POPUP
========================================================= */
.airport-transfer-card {
cursor: pointer;
}
.airport-transfer-modal[hidden] {
display: none;
}
.airport-transfer-modal {
position: fixed;
inset: 0;
z-index: 5000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(8, 26, 25, .72);
backdrop-filter: blur(8px);
}
body.airport-transfer-modal-open {
overflow: hidden;
}
.airport-transfer-window {
position: relative;
width: min(980px, 100%);
max-height: 92vh;
overflow-y: auto;
background: #f8f5ee;
border-radius: 26px;
box-shadow:
0 30px 90px rgba(0, 0, 0, .32);
}
.airport-transfer-close {
position: absolute;
z-index: 3;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .94);
font-size: 28px;
line-height: 1;
cursor: pointer;
box-shadow:
0 5px 18px rgba(0, 0, 0, .16);
}
.airport-transfer-hero {
position: relative;
width: 100%;
height: clamp(260px, 42vw, 430px);
overflow: hidden;
border-radius: 26px 26px 0 0;
}
.airport-transfer-hero img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.airport-transfer-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(7, 32, 30, .42),
transparent 45%
);
}
.airport-transfer-hero-label {
position: absolute;
z-index: 2;
left: 24px;
bottom: 22px;
padding: 8px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, .92);
color: #173f3b;
font-size: .72rem;
font-weight: 700;
letter-spacing: .1em;
}
.airport-transfer-content {
padding: clamp(28px, 5vw, 52px);
}
.airport-transfer-content h2 {
margin:
.35rem 0
.9rem;
font-size:
clamp(2rem, 5vw, 3.4rem);
}
.airport-transfer-lede {
max-width: 760px;
margin: 0;
font-size: 1.08rem;
line-height: 1.75;
}
.airport-transfer-facts {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 32px;
}
.airport-transfer-fact {
padding: 20px;
border-radius: 18px;
background: #ffffff;
border:
1px solid rgba(18, 62, 58, .10);
}
.airport-transfer-fact strong {
display: block;
margin-bottom: 8px;
color: #173f3b;
}
.airport-transfer-fact span {
display: block;
line-height: 1.6;
font-size: .93rem;
}
.airport-transfer-arrangement {
margin-top: 28px;
padding: 24px;
border-radius: 18px;
background: rgba(22, 65, 61, .07);
}
.airport-transfer-arrangement h3 {
margin: 0 0 8px;
}
.airport-transfer-arrangement p {
margin: 0;
line-height: 1.7;
}
.airport-transfer-request {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 28px;
padding-top: 28px;
border-top:
1px solid rgba(0, 0, 0, .10);
}
.airport-transfer-request strong {
font-size: 1.08rem;
}
.airport-transfer-request p {
max-width: 620px;
margin:
5px 0 0;
line-height: 1.6;
}
.airport-whatsapp {
flex: 0 0 auto;
white-space: nowrap;
}
/* MOBILE */
@media (max-width: 760px) {
.airport-transfer-modal {
padding: 10px;
}
.airport-transfer-window {
max-height: 96vh;
border-radius: 20px;
}
.airport-transfer-hero {
height: 250px;
border-radius:
20px 20px 0 0;
}
.airport-transfer-facts {
grid-template-columns: 1fr;
}
.airport-transfer-request {
flex-direction: column;
align-items: stretch;
}
.airport-whatsapp {
text-align: center;
justify-content: center;
}
}
/* =========================================================
AIRPORT TRANSFER MODAL
========================================================= */
.airport-transfer-card {
cursor: pointer;
}
.airport-transfer-card:hover {
transform: translateY(-2px);
}
.airport-transfer-modal[hidden] {
display: none;
}
.airport-transfer-modal {
position: fixed;
inset: 0;
z-index: 6000;
display: flex;
justify-content: center;
align-items: center;
padding: 22px;
background: rgba(6, 28, 26, .76);
backdrop-filter: blur(7px);
}
body.airport-transfer-open {
overflow: hidden;
}
.airport-transfer-window {
position: relative;
width: min(980px, 100%);
max-height: 92vh;
overflow-y: auto;
background: #f8f5ee;
border-radius: 26px;
box-shadow: 0 30px 90px rgba(0,0,0,.30);
}
.airport-transfer-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.94);
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.airport-transfer-hero {
position: relative;
height: clamp(270px, 43vw, 430px);
overflow: hidden;
border-radius: 26px 26px 0 0;
}
.airport-transfer-hero img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.airport-transfer-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(8, 37, 34, .42),
transparent 45%
);
}
.airport-transfer-badge {
position: absolute;
left: 24px;
bottom: 22px;
z-index: 2;
padding: 8px 13px;
border-radius: 999px;
background: rgba(255,255,255,.93);
color: #173f3b;
font-size: .72rem;
font-weight: 700;
letter-spacing: .09em;
}
.airport-transfer-body {
padding: clamp(28px, 5vw, 50px);
}
.airport-transfer-body h2 {
margin: .3rem 0 1rem;
font-size: clamp(2rem, 5vw, 3.3rem);
}
.airport-transfer-intro {
max-width: 760px;
font-size: 1.05rem;
line-height: 1.75;
}
.airport-transfer-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 30px;
}
.airport-transfer-item {
padding: 20px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(20, 63, 59, .10);
}
.airport-transfer-item strong {
display: block;
margin-bottom: 8px;
color: #173f3b;
}
.airport-transfer-item p {
margin: 0;
line-height: 1.65;
}
.airport-transfer-how {
margin-top: 26px;
padding: 23px;
border-radius: 18px;
background: rgba(21, 63, 59, .07);
}
.airport-transfer-how h3 {
margin: 0 0 8px;
}
.airport-transfer-how p {
margin: 0;
line-height: 1.7;
}
.airport-transfer-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid rgba(0,0,0,.10);
}
.airport-transfer-action p {
margin: 5px 0 0;
line-height: 1.6;
}
@media (max-width: 760px) {
.airport-transfer-modal {
padding: 10px;
}
.airport-transfer-window {
max-height: 96vh;
border-radius: 20px;
}
.airport-transfer-hero {
height: 245px;
border-radius: 20px 20px 0 0;
}
.airport-transfer-grid {
grid-template-columns: 1fr;
}
.airport-transfer-action {
flex-direction: column;
align-items: stretch;
}
.airport-transfer-action .button {
text-align: center;
justify-content: center;
}
}
/* HAPAXORA SEA TRANSFER PREVIEW */
.transport-next {
background: rgba(185, 145, 76, .14);
color: #80602f;
}
.sea-transfer-preview {
position: relative;
overflow: hidden;
}
.sea-transfer-preview::after {
content: "→";
position: absolute;
right: 20px;
bottom: 16px;
font-size: 1.5rem;
opacity: .28;
}
/* =========================================================
HAPAXORA TRANSPORT STAYS-LIKE STYLE
========================================================= */
/*
* Keep Transport visually consistent with Stays:
* white base, clean cards, imagery and restrained borders.
*/
.transport-panel {
margin-top: 2rem;
}
.transport-panel-inner {
background: #ffffff !important;
padding: 0 !important;
border-radius: 0 !important;
}
.transport-panel-heading {
padding: 0 0 1.75rem;
margin-bottom: 0;
}
.transport-intro {
max-width: 720px;
}
/* THREE TRANSPORT OPTIONS */
.transport-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.transport-option {
background: #ffffff !important;
border:
1px solid rgba(20, 63, 59, .12);
border-radius: 20px;
overflow: hidden;
padding: 22px;
box-shadow:
0 8px 28px rgba(15, 50, 47, .06);
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
/* ACTIVE AIRPORT CARD */
.airport-transfer-card {
padding: 0 !important;
cursor: pointer;
}
.airport-transfer-card:hover {
transform: translateY(-4px);
border-color:
rgba(20, 63, 59, .24);
box-shadow:
0 15px 38px rgba(15, 50, 47, .12);
}
/* AIRPORT IMAGE */
.transport-card-hero {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: #eef2ef;
}
.transport-card-hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.transport-card-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(8, 35, 32, .35),
transparent 50%
);
}
.transport-card-image-badge {
position: absolute;
left: 16px;
bottom: 15px;
z-index: 2;
padding: 7px 11px;
border-radius: 999px;
background:
rgba(255,255,255,.93);
color: #173f3b;
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
}
/*
* Content spacing inside the airport card,
* because its image occupies the full card width.
*/
.airport-transfer-card > .transport-status {
margin:
20px 22px
0;
}
.airport-transfer-card > h3 {
margin:
14px 22px
8px;
}
.airport-transfer-card > p {
margin-left: 22px;
margin-right: 22px;
}
.airport-transfer-card > .transport-button {
margin:
8px 22px
22px;
}
/* STATUS LABELS */
.transport-status {
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
}
.transport-status.active {
background: #173f3b;
color: #ffffff;
}
/* SEA TRANSFER - UPCOMING */
.sea-transfer-preview {
background:
linear-gradient(
180deg,
#ffffff 0%,
#fbfaf7 100%
) !important;
}
/* COMING SOON MOBILITY */
.transport-option.coming-soon {
opacity: 1 !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#fafafa 100%
) !important;
}
/* SMALL SCREEN */
@media (max-width: 850px) {
.transport-options {
grid-template-columns: 1fr;
}
.transport-card-hero {
height: 250px;
}
}
/* SEA TRANSFERS PHOTO CARD */
.sea-transfer-preview {
position: relative !important;
overflow: hidden !important;
min-height: 430px;
display: flex !important;
flex-direction: column;
justify-content: flex-end;
padding: 26px !important;
background:
url("/assets/transport/sea-transfers-card.png")
center center / cover no-repeat !important;
border-color: rgba(20, 63, 59, .18) !important;
box-shadow: 0 12px 34px rgba(10, 45, 42, .16) !important;
}
.sea-transfer-preview::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(
180deg,
rgba(5, 30, 36, .08) 0%,
rgba(5, 32, 35, .22) 38%,
rgba(5, 31, 32, .90) 100%
);
pointer-events: none;
}
.sea-transfer-preview > * {
position: relative;
z-index: 2;
}
.sea-transfer-preview h3 {
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.sea-transfer-preview p,
.sea-transfer-preview .transport-note {
color: rgba(255,255,255,.96) !important;
text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.sea-transfer-preview .transport-next {
align-self: flex-start;
background: rgba(255,255,255,.95) !important;
color: #173f3b !important;
box-shadow: 0 5px 16px rgba(0,0,0,.18);
}
.sea-transfer-preview::after {
content: "→";
position: absolute;
right: 22px;
bottom: 18px;
z-index: 2;
color: rgba(255,255,255,.62);
font-size: 1.6rem;
}
@media (max-width: 850px) {
.sea-transfer-preview {
min-height: 390px;
}
}
/* ===== CORAL GRAND IMMERSIVE CARD PREVIEW ===== */
/*
* Coral Grand:
* image-led upper zone + clean booking zone below.
* Existing wording and typography remain unchanged.
*/
.hotel-feature:not(.htm-feature) {
position: relative !important;
display: block !important;
overflow: hidden;
background: #ffffff !important;
border-radius: 24px;
box-shadow:
0 12px 36px rgba(10, 45, 42, .10);
}
/*
* The original hero remains in the DOM for the site's
* photo system, but the same image becomes the upper
* card background instead.
*/
.hotel-feature:not(.htm-feature) > .hotel-hero {
position: absolute !important;
inset: 0 auto auto 0;
width: 100%;
height: 0;
overflow: visible;
z-index: 4;
pointer-events: none;
}
.hotel-feature:not(.htm-feature) > .hotel-hero img {
display: none !important;
}
/* Keep the existing Hulhumalé / Beachfront badge */
.hotel-feature:not(.htm-feature) > .hotel-hero .hotel-badge {
position: absolute !important;
top: 22px;
left: 24px;
z-index: 5;
white-space: nowrap;
background: rgba(255,255,255,.94) !important;
color: #173f3b !important;
box-shadow:
0 5px 16px rgba(0,0,0,.14);
}
/*
* Existing Coral Grand hero:
* fills everything above Room Categories.
*/
.hotel-feature:not(.htm-feature) > .hotel-info {
position: relative;
display: block !important;
padding:
100px 34px
0 !important;
background:
linear-gradient(
180deg,
rgba(5, 31, 34, .15) 0%,
rgba(5, 32, 34, .36) 35%,
rgba(5, 31, 32, .86) 78%,
rgba(5, 31, 32, .93) 100%
),
url("/assets/coral-grand/01_hero_rooftop_ocean_view.jpg")
center center / cover no-repeat !important;
}
/* Upper image-area typography */
.hotel-feature:not(.htm-feature) .hotel-kicker {
color: rgba(255,255,255,.82) !important;
text-shadow:
0 2px 8px rgba(0,0,0,.32);
}
.hotel-feature:not(.htm-feature) .hotel-info > h3 {
color: #ffffff !important;
text-shadow:
0 3px 16px rgba(0,0,0,.36);
}
.hotel-feature:not(.htm-feature) .hotel-summary {
max-width: 680px;
color: rgba(255,255,255,.96) !important;
text-shadow:
0 2px 10px rgba(0,0,0,.40);
}
/* Existing hotel facts become glass-style chips */
.hotel-feature:not(.htm-feature) .hotel-facts {
margin-top: 22px;
margin-bottom: 34px;
}
.hotel-feature:not(.htm-feature) .hotel-facts span {
background: rgba(255,255,255,.91) !important;
color: #173f3b !important;
border:
1px solid rgba(255,255,255,.50);
box-shadow:
0 4px 14px rgba(0,0,0,.12);
}
/*
* WHITE PRACTICAL ZONE
*
* Image ends immediately above Room Categories.
*/
.hotel-feature:not(.htm-feature) .hotel-room-types {
margin:
0 -34px !important;
padding:
25px 34px
10px !important;
background: #ffffff !important;
color: inherit !important;
border-top:
1px solid rgba(20,63,59,.14);
}
.hotel-feature:not(.htm-feature) .hotel-room-types strong,
.hotel-feature:not(.htm-feature) .hotel-room-types p {
color: inherit !important;
text-shadow: none !important;
}
/* Availability/action zone remains clean and easy to scan */
.hotel-feature:not(.htm-feature) .hotel-actions {
margin:
0 -34px !important;
padding:
14px 34px
30px !important;
background: #ffffff !important;
}
/* Subtle image movement on desktop only */
@media (hover: hover) {
.hotel-feature:not(.htm-feature) {
transition:
transform .25s ease,
box-shadow .25s ease;
}
.hotel-feature:not(.htm-feature):hover {
transform: translateY(-3px);
box-shadow:
0 18px 46px rgba(10,45,42,.15);
}
}
/* Mobile */
@media (max-width: 760px) {
.hotel-feature:not(.htm-feature) > .hotel-info {
padding:
92px 22px
0 !important;
background-position:
center center !important;
}
.hotel-feature:not(.htm-feature) > .hotel-hero .hotel-badge {
left: 18px;
top: 18px;
}
.hotel-feature:not(.htm-feature) .hotel-room-types {
margin:
0 -22px !important;
padding:
23px 22px
10px !important;
}
.hotel-feature:not(.htm-feature) .hotel-actions {
margin:
0 -22px !important;
padding:
14px 22px
24px !important;
}
}
/* ===== END CORAL GRAND IMMERSIVE CARD PREVIEW ===== */
/* =========================================================
CORAL GRAND LABEL FIX
========================================================= */
/* Compact location badge */
.hotel-feature:not(.htm-feature) > .hotel-hero .hotel-badge {
position: absolute !important;
top: 22px !important;
left: 24px !important;
right: auto !important;
display: inline-flex !important;
align-items: center;
width: max-content !important;
max-width: calc(100% - 48px);
padding: 7px 12px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.94) !important;
color: #173f3b !important;
font-size: .69rem !important;
font-weight: 700 !important;
letter-spacing: .08em;
line-height: 1.2 !important;
white-space: nowrap;
box-shadow:
0 5px 16px rgba(0,0,0,.15);
z-index: 6;
}
/* Bring back Hapaxora Selected Stay label */
.hotel-feature:not(.htm-feature) .hotel-kicker {
display: inline-flex !important;
align-items: center;
width: max-content;
margin:
0 0 14px !important;
padding:
6px 10px;
border-radius: 999px;
background:
rgba(14, 58, 54, .86);
color:
rgba(255,255,255,.98) !important;
font-size:
.68rem !important;
font-weight:
700 !important;
letter-spacing:
.10em;
line-height:
1.2;
text-shadow: none !important;
box-shadow:
0 4px 14px rgba(0,0,0,.18);
}
/* Make sure it sits clearly above the hotel title */
.hotel-feature:not(.htm-feature) .hotel-info > h3 {
margin-top: 0 !important;
}
/* Mobile */
@media (max-width: 760px) {
.hotel-feature:not(.htm-feature) > .hotel-hero .hotel-badge {
top: 18px !important;
left: 18px !important;
max-width:
calc(100% - 36px);
}
}
/* =========================================================
CORAL GRAND COMBINED LABEL FINAL
========================================================= */
/*
* Remove the old separate beachfront badge completely.
* This also removes the large white-circle conflict.
*/
.hotel-feature:not(.htm-feature) > .hotel-hero .hotel-badge {
display: none !important;
}
/*
* One combined Hapaxora/property badge,
* positioned at the top-left of the image.
*/
.hotel-feature:not(.htm-feature) .hotel-kicker {
position: absolute !important;
top: 22px !important;
left: 24px !important;
z-index: 10 !important;
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: calc(100% - 48px) !important;
margin: 0 !important;
padding: 8px 13px !important;
border-radius: 3px !important;
background: rgba(12, 58, 55, .92) !important;
color: #ffffff !important;
font-size: .68rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: .10em !important;
white-space: nowrap !important;
text-shadow: none !important;
box-shadow:
0 5px 16px rgba(0,0,0,.18) !important;
}
/*
* Give the hotel title enough breathing room
* below the top badge.
*/
.hotel-feature:not(.htm-feature) .hotel-info {
position: relative !important;
padding-top: 102px !important;
}
/* Mobile */
@media (max-width: 760px) {
.hotel-feature:not(.htm-feature) .hotel-kicker {
top: 18px !important;
left: 18px !important;
max-width: calc(100% - 36px) !important;
font-size: .61rem !important;
white-space: normal !important;
}
.hotel-feature:not(.htm-feature) .hotel-info {
padding-top: 98px !important;
}
}
/* =========================================================
CORAL GRAND FACTS - TEXT ONLY
========================================================= */
.hotel-feature:not(.htm-feature) .hotel-facts {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 22px;
margin-bottom: 34px;
}
.hotel-feature:not(.htm-feature) .hotel-facts span {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
color: #000000 !important;
font-weight: 700 !important;
font-size: .88rem !important;
text-shadow:
0 1px 4px rgba(255,255,255,.55);
}
/* =========================================================
CORAL GRAND BACKGROUND CROP ADJUSTMENT
========================================================= */
.hotel-feature:not(.htm-feature) > .hotel-info {
background-position: 68% 50% !important;
}
@media (max-width: 760px) {
.hotel-feature:not(.htm-feature) > .hotel-info {
background-position: 72% 50% !important;
}
}
/* =========================================================
CORAL GRAND — FULL IMMERSIVE PHOTO CARD
========================================================= */
/*
* Use the existing Coral Grand image across the entire card.
* Shift the image strongly toward the hotel structure.
*/
.hotel-feature:not(.htm-feature) > .hotel-info {
position: relative !important;
min-height: 100%;
padding:
100px 30px
30px !important;
background:
linear-gradient(
180deg,
rgba(5, 28, 30, .12) 0%,
rgba(5, 30, 31, .28) 34%,
rgba(5, 30, 31, .64) 68%,
rgba(5, 29, 30, .82) 100%
),
url("/assets/coral-grand/01_hero_rooftop_ocean_view.jpg")
78% 50% / cover no-repeat !important;
}
/* ---------------------------------------------------------
MAIN TEXT
--------------------------------------------------------- */
.hotel-feature:not(.htm-feature) .hotel-info > h3 {
color: #ffffff !important;
text-shadow:
0 3px 15px rgba(0,0,0,.42);
}
.hotel-feature:not(.htm-feature) .hotel-summary {
color: rgba(255,255,255,.96) !important;
text-shadow:
0 2px 10px rgba(0,0,0,.40);
}
/* ---------------------------------------------------------
HOTEL FACTS
Turn the five loose words into one professional glass row.
--------------------------------------------------------- */
.hotel-feature:not(.htm-feature) .hotel-facts {
display: flex !important;
flex-wrap: wrap;
gap: 0 !important;
width: fit-content;
max-width: 100%;
margin:
22px 0
22px !important;
padding:
10px 6px !important;
border:
1px solid rgba(255,255,255,.24);
border-radius: 10px;
background:
rgba(8, 40, 38, .58);
backdrop-filter:
blur(7px);
box-shadow:
0 7px 20px rgba(0,0,0,.16);
}
.hotel-feature:not(.htm-feature) .hotel-facts span {
position: relative;
padding:
3px 13px !important;
background:
transparent !important;
border: 0 !important;
box-shadow:
none !important;
color:
rgba(255,255,255,.97) !important;
font-size:
.78rem !important;
font-weight:
700 !important;
line-height:
1.25;
text-shadow:
none !important;
white-space:
nowrap;
}
/* subtle separators */
.hotel-feature:not(.htm-feature) .hotel-facts span + span {
border-left:
1px solid rgba(255,255,255,.28) !important;
}
/* ---------------------------------------------------------
ROOM CATEGORIES
Keep the photo visible underneath.
--------------------------------------------------------- */
.hotel-feature:not(.htm-feature) .hotel-room-types {
margin:
10px 0
0 !important;
padding:
18px 20px !important;
border:
1px solid rgba(255,255,255,.22) !important;
border-radius:
12px !important;
background:
rgba(7, 39, 37, .60) !important;
backdrop-filter:
blur(7px);
box-shadow:
0 7px 22px rgba(0,0,0,.15);
}
.hotel-feature:not(.htm-feature) .hotel-room-types strong {
color:
#ffffff !important;
font-weight:
700 !important;
}
.hotel-feature:not(.htm-feature) .hotel-room-types p {
color:
rgba(255,255,255,.93) !important;
text-shadow:
none !important;
}
/* ---------------------------------------------------------
ACTION AREA
No white background — photo continues underneath.
--------------------------------------------------------- */
.hotel-feature:not(.htm-feature) .hotel-actions {
margin:
18px 0
0 !important;
padding:
0 !important;
background:
transparent !important;
border:
0 !important;
}
/* View Property */
.hotel-feature:not(.htm-feature) .hotel-details-btn {
background:
#0f6667 !important;
color:
#ffffff !important;
border:
1px solid rgba(255,255,255,.18) !important;
box-shadow:
0 7px 18px rgba(0,0,0,.22) !important;
}
/* Check Availability */
.hotel-feature:not(.htm-feature) .hotel-enquiry-btn {
background:
#f4c45e !important;
color:
#102f31 !important;
border:
1px solid rgba(255,255,255,.20) !important;
font-weight:
700 !important;
box-shadow:
0 7px 18px rgba(0,0,0,.20) !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.hotel-feature:not(.htm-feature) > .hotel-info {
padding:
92px 20px
24px !important;
background:
linear-gradient(
180deg,
rgba(5, 28, 30, .14) 0%,
rgba(5, 30, 31, .34) 34%,
rgba(5, 30, 31, .70) 68%,
rgba(5, 29, 30, .88) 100%
),
url("/assets/coral-grand/01_hero_rooftop_ocean_view.jpg")
84% 50% / cover no-repeat !important;
}
.hotel-feature:not(.htm-feature) .hotel-facts {
width: 100%;
}
.hotel-feature:not(.htm-feature) .hotel-facts span {
flex:
1 1 auto;
text-align:
center;
}
.hotel-feature:not(.htm-feature) .hotel-facts span + span {
border-left:
0 !important;
}
}
/* =========================================================
CORAL GRAND - MORE TRANSPARENT GLASS
========================================================= */
/* Hotel facts strip */
.hotel-feature:not(.htm-feature) .hotel-facts {
background:
rgba(7, 39, 37, .26) !important;
border:
1px solid rgba(255,255,255,.24) !important;
backdrop-filter:
blur(5px) !important;
box-shadow:
0 5px 16px rgba(0,0,0,.10) !important;
}
/* Room categories glass panel */
.hotel-feature:not(.htm-feature) .hotel-room-types {
background:
rgba(7, 39, 37, .24) !important;
border:
1px solid rgba(255,255,255,.22) !important;
backdrop-filter:
blur(5px) !important;
box-shadow:
0 5px 16px rgba(0,0,0,.10) !important;
}
/* Keep text strong enough over the photo */
.hotel-feature:not(.htm-feature) .hotel-facts span,
.hotel-feature:not(.htm-feature) .hotel-room-types strong,
.hotel-feature:not(.htm-feature) .hotel-room-types p {
color: rgba(255,255,255,.98) !important;
text-shadow:
0 1px 5px rgba(0,0,0,.38) !important;
}
/* =========================================================
PROPERTY MODAL ROOM CATEGORIES
========================================================= */
.property-modal-heading-group {
min-width: 0;
}
.property-modal-room-types {
margin-top: 7px;
}
.property-modal-room-types[hidden] {
display: none;
}
.property-modal-room-types strong {
display: block;
margin-bottom: 3px;
color: #0e5656;
font-size: .72rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.property-modal-room-types p {
margin: 0;
color: #647678;
font-size: .88rem;
line-height: 1.45;
}
@media (max-width: 760px) {
.property-modal-room-types p {
font-size: .80rem;
}
}
/* =========================================================
PROPERTY MODAL ROOM TYPES FINAL
========================================================= */
.property-modal-heading-group {
min-width: 0;
}
.property-modal-room-types {
margin-top: 6px;
}
.property-modal-room-types[hidden] {
display: none !important;
}
.property-modal-room-types strong {
display: block;
margin-bottom: 3px;
color: #0e5656;
font-size: .70rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.property-modal-room-types p {
margin: 0;
color: #647678;
font-size: .86rem;
line-height: 1.45;
}
@media (max-width: 760px) {
.property-modal-room-types p {
font-size: .79rem;
}
}
/* =========================================================
HTM MODAL STAY SUMMARY
========================================================= */
.htm-modal-stay-summary {
margin:
0 0 22px;
padding:
0 0 18px;
border-bottom:
1px solid rgba(20, 63, 59, .12);
}
.htm-modal-stay-summary .eyebrow {
margin-bottom: 6px;
}
.htm-modal-stay-types {
margin: 0;
color: #607476;
font-size: .94rem;
line-height: 1.6;
}
@media (max-width: 760px) {
.htm-modal-stay-types {
font-size: .86rem;
}
}
/* =========================================================
HTM RENTALS — FULL IMMERSIVE PHOTO CARD
========================================================= */
.htm-feature {
position: relative !important;
overflow: hidden !important;
background: #ffffff !important;
border-radius: 24px;
box-shadow:
0 12px 36px rgba(10,45,42,.10);
}
/* Hide separate hero image because the same photo becomes
the full-card background */
.htm-feature > .hotel-hero {
position: absolute !important;
inset: 0 !important;
width: 100%;
height: 100%;
pointer-events: none;
}
.htm-feature > .hotel-hero img {
display: none !important;
}
/* Keep HTM top badge visible */
.htm-feature > .hotel-hero .hotel-badge {
position: absolute !important;
top: 22px !important;
left: 24px !important;
right: auto !important;
display: inline-flex !important;
width: auto !important;
max-width: calc(100% - 48px);
padding: 8px 13px !important;
border-radius: 3px !important;
background: rgba(255,255,255,.94) !important;
color: #173f3b !important;
font-size: .68rem !important;
font-weight: 700 !important;
letter-spacing: .09em !important;
box-shadow:
0 5px 16px rgba(0,0,0,.15);
z-index: 6;
}
/* Full background across entire HTM card */
.htm-feature > .hotel-info {
position: relative !important;
padding:
100px 30px
30px !important;
background:
linear-gradient(
180deg,
rgba(20, 24, 22, .10) 0%,
rgba(19, 25, 23, .28) 34%,
rgba(16, 28, 25, .62) 68%,
rgba(13, 28, 26, .84) 100%
),
url("/assets/stays/htm-rentals/a701/a701-living-room-01.jpg")
center 52% / cover no-repeat !important;
}
/* LOCAL APARTMENT STAY label */
.htm-feature .hotel-kicker {
display: inline-flex !important;
width: auto !important;
margin: 0 0 14px !important;
padding: 6px 10px !important;
border-radius: 999px;
background: rgba(13, 61, 57, .84);
color: #ffffff !important;
font-size: .68rem !important;
font-weight: 700 !important;
letter-spacing: .09em;
text-shadow: none !important;
}
/* Main text */
.htm-feature .hotel-info > h3 {
color: #ffffff !important;
text-shadow:
0 3px 15px rgba(0,0,0,.42);
}
.htm-feature .hotel-summary {
color: rgba(255,255,255,.96) !important;
text-shadow:
0 2px 10px rgba(0,0,0,.40);
}
/* HTM facts as subtle glass strip */
.htm-feature .hotel-facts {
display: flex !important;
flex-wrap: wrap;
gap: 0 !important;
width: fit-content;
max-width: 100%;
margin:
22px 0
24px !important;
padding:
9px 6px !important;
border:
1px solid rgba(255,255,255,.22);
border-radius: 10px;
background:
rgba(8, 38, 35, .24);
backdrop-filter:
blur(5px);
box-shadow:
0 5px 16px rgba(0,0,0,.10);
}
.htm-feature .hotel-facts span {
padding:
3px 13px !important;
background:
transparent !important;
border: 0 !important;
box-shadow:
none !important;
color: rgba(255,255,255,.98) !important;
font-size: .78rem !important;
font-weight: 700 !important;
text-shadow:
0 1px 5px rgba(0,0,0,.35);
}
.htm-feature .hotel-facts span + span {
border-left:
1px solid rgba(255,255,255,.24) !important;
}
/* Action area stays on image */
.htm-feature .hotel-actions {
margin: 18px 0 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* View apartments */
.htm-feature .hotel-details-btn {
background: #0f6667 !important;
color: #ffffff !important;
border:
1px solid rgba(255,255,255,.18) !important;
box-shadow:
0 7px 18px rgba(0,0,0,.22) !important;
}
/* Check availability */
.htm-feature .hotel-enquiry-btn {
background: #f4c45e !important;
color: #102f31 !important;
border:
1px solid rgba(255,255,255,.20) !important;
font-weight: 700 !important;
box-shadow:
0 7px 18px rgba(0,0,0,.20) !important;
}
/* Desktop hover */
@media (hover: hover) {
.htm-feature {
transition:
transform .25s ease,
box-shadow .25s ease;
}
.htm-feature:hover {
transform: translateY(-3px);
box-shadow:
0 18px 46px rgba(10,45,42,.15);
}
}
/* Mobile */
@media (max-width: 760px) {
.htm-feature > .hotel-info {
padding:
92px 20px
24px !important;
background:
linear-gradient(
180deg,
rgba(20,24,22,.12) 0%,
rgba(19,25,23,.32) 34%,
rgba(16,28,25,.68) 68%,
rgba(13,28,26,.88) 100%
),
url("/assets/stays/htm-rentals/a701/a701-living-room-01.jpg")
center 52% / cover no-repeat !important;
}
.htm-feature > .hotel-hero .hotel-badge {
top: 18px !important;
left: 18px !important;
max-width:
calc(100% - 36px);
}
.htm-feature .hotel-facts {
width: 100%;
}
.htm-feature .hotel-facts span {
flex: 1 1 auto;
text-align: center;
}
.htm-feature .hotel-facts span + span {
border-left: 0 !important;
}
}
/* =========================================================
HTM COMBINED LABEL FINAL
========================================================= */
.htm-feature > .hotel-hero .hotel-badge {
position: absolute !important;
top: 22px !important;
left: 24px !important;
right: auto !important;
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: calc(100% - 48px) !important;
padding: 8px 13px !important;
border-radius: 3px !important;
background: rgba(12, 58, 55, .92) !important;
color: #ffffff !important;
font-size: .68rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: .10em !important;
white-space: nowrap !important;
box-shadow:
0 5px 16px rgba(0,0,0,.18) !important;
z-index: 10 !important;
}
/* With the separate kicker removed, give HTM title clean spacing */
.htm-feature > .hotel-info {
padding-top: 102px !important;
}
.htm-feature .hotel-info > h3 {
margin-top: 0 !important;
}
@media (max-width: 760px) {
.htm-feature > .hotel-hero .hotel-badge {
top: 18px !important;
left: 18px !important;
max-width: calc(100% - 36px) !important;
font-size: .61rem !important;
white-space: normal !important;
}
.htm-feature > .hotel-info {
padding-top: 98px !important;
}
}
/* =========================================================
HTM LABEL — COMPACT FINAL FIX
========================================================= */
.htm-feature > .hotel-hero {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
}
/* Remove any old oversized treatment */
.htm-feature > .hotel-hero .hotel-badge {
position: absolute !important;
top: 22px !important;
left: 24px !important;
right: auto !important;
bottom: auto !important;
display: inline-flex !important;
align-items: center !important;
width: max-content !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: calc(100% - 48px) !important;
margin: 0 !important;
padding: 8px 13px !important;
border: 0 !important;
border-radius: 3px !important;
background: rgba(12, 58, 55, .92) !important;
color: #ffffff !important;
font-size: .68rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: .10em !important;
white-space: nowrap !important;
box-shadow:
0 5px 16px rgba(0,0,0,.18) !important;
z-index: 20 !important;
transform: none !important;
}
/* Ensure no pseudo/background element is creating the large teal block */
.htm-feature > .hotel-hero .hotel-badge::before,
.htm-feature > .hotel-hero .hotel-badge::after {
content: none !important;
display: none !important;
}
/* Keep title area comfortably below badge */
.htm-feature > .hotel-info {
padding-top: 102px !important;
}
/* Mobile */
@media (max-width: 760px) {
.htm-feature > .hotel-hero .hotel-badge {
top: 18px !important;
left: 18px !important;
max-width: calc(100% - 36px) !important;
font-size: .61rem !important;
white-space: normal !important;
}
.htm-feature > .hotel-info {
padding-top: 98px !important;
}
}
/* =========================================================
PRIVATE MOBILITY FULL IMAGE CARD FINAL
========================================================= */
.private-mobility-preview {
position: relative !important;
overflow: hidden !important;
min-height: 430px;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: flex-end !important;
padding: 26px !important;
background:
url("/assets/transport/private-mobility-card.png")
center center / cover no-repeat !important;
opacity: 1 !important;
border-color: rgba(20,63,59,.18) !important;
box-shadow:
0 12px 34px rgba(10,45,42,.16) !important;
}
/* Darker on right so the key + licence remain visible left */
.private-mobility-preview::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(
105deg,
rgba(6,30,32,.04) 0%,
rgba(6,30,32,.10) 32%,
rgba(6,30,32,.48) 65%,
rgba(6,30,32,.88) 100%
);
pointer-events: none;
}
.private-mobility-preview > * {
position: relative;
z-index: 2;
width: min(100%, 310px);
}
/* Coming Soon */
.private-mobility-preview .transport-status {
width: max-content !important;
background: rgba(255,255,255,.95) !important;
color: #173f3b !important;
box-shadow:
0 5px 16px rgba(0,0,0,.18);
}
/* Title */
.private-mobility-preview h3 {
color: #ffffff !important;
text-align: right;
text-shadow:
0 2px 10px rgba(0,0,0,.45);
}
/* Existing wording */
.private-mobility-preview p,
.private-mobility-preview .transport-note {
color: rgba(255,255,255,.96) !important;
text-align: right;
text-shadow:
0 2px 8px rgba(0,0,0,.45);
}
/* Remove generic arrow */
.private-mobility-preview::after {
content: none !important;
}
@media (hover: hover) {
.private-mobility-preview {
transition:
transform .25s ease,
box-shadow .25s ease;
}
.private-mobility-preview:hover {
transform: translateY(-4px);
box-shadow:
0 18px 44px rgba(10,45,42,.22) !important;
}
}
@media (max-width: 850px) {
.private-mobility-preview {
min-height: 390px;
background-position:
42% center !important;
}
.private-mobility-preview > * {
width: min(100%, 290px);
}
}
/* ==========================================================
SHERATON MALDIVES — DAY ESCAPE
========================================================== */
.experiences-panel{
margin-top:34px;
border-top:1px solid #d9e1df;
}
.experiences-panel[hidden],
.experience-details[hidden]{
display:none;
}
.experiences-panel .service-panel-inner{
padding-top:54px;
}
.experiences-panel .service-panel-heading{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:30px;
margin-bottom:36px;
}
.experiences-panel .service-panel-heading h2{
max-width:760px;
font-size:clamp(2.2rem,3.5vw,4rem);
}
.experiences-panel .service-panel-heading > div > p:last-child{
max-width:720px;
color:#607377;
line-height:1.7;
}
.experience-feature{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
overflow:hidden;
border:1px solid #d9e1df;
background:#fff;
}
.experience-card-hero{
position:relative;
min-height:430px;
overflow:hidden;
}
.experience-card-hero img{
width:100%;
height:100%;
object-fit:cover;
display:block;
position:absolute;
inset:0;
}
.experience-card-hero::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(4,31,36,.34),
rgba(4,31,36,0) 52%
);
}
.experience-badge{
position:absolute;
z-index:2;
left:22px;
bottom:22px;
padding:9px 13px;
border-radius:999px;
background:rgba(4,31,36,.78);
backdrop-filter:blur(7px);
color:#fff;
font-size:.72rem;
font-weight:700;
letter-spacing:.1em;
}
.experience-card-content{
display:flex;
flex-direction:column;
justify-content:center;
padding:44px 40px;
}
.experience-kicker{
margin:0 0 13px;
color:#38717a;
font-size:.73rem;
font-weight:700;
letter-spacing:.14em;
}
.experience-card-content h3,
.experience-detail-header h3{
font-family:"Playfair Display",Georgia,serif;
}
.experience-card-content h3{
margin:0 0 20px;
font-size:clamp(2rem,3vw,3rem);
line-height:1.05;
color:#17343a;
}
.experience-summary{
margin:0;
line-height:1.75;
color:#607377;
}
.experience-highlights{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:25px;
}
.experience-highlights span{
padding:8px 11px;
border:1px solid #d6e1df;
border-radius:999px;
background:#f8fbfa;
color:#41656a;
font-size:.76rem;
}
.experience-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:30px;
}
.experience-details-btn{
background:#0d5962;
color:#fff;
}
.experience-enquiry-btn{
border:1px solid #bdd0ce;
color:#17343a;
background:#fff;
}
.experience-details{
margin-top:28px;
padding:34px;
border:1px solid #d9e1df;
background:#f9fbfa;
}
.experience-detail-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:30px;
margin-bottom:28px;
}
.experience-detail-header h3{
margin:0;
max-width:690px;
font-size:clamp(1.8rem,3vw,3rem);
line-height:1.08;
color:#17343a;
}
.experience-detail-close{
flex:0 0 auto;
border:1px solid #cbd8d6;
border-radius:999px;
padding:10px 14px;
background:#fff;
color:#315b60;
font:inherit;
cursor:pointer;
}
.experience-gallery{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.experience-photo{
position:relative;
min-height:230px;
margin:0;
overflow:hidden;
background:#dce7e5;
}
.experience-photo-wide{
grid-column:span 2;
}
.experience-photo img{
width:100%;
height:100%;
min-height:230px;
display:block;
object-fit:cover;
transition:transform .35s ease;
}
.experience-photo:hover img{
transform:scale(1.025);
}
.experience-photo figcaption{
position:absolute;
left:12px;
bottom:12px;
padding:7px 10px;
border-radius:999px;
background:rgba(4,31,36,.76);
color:#fff;
font-size:.72rem;
backdrop-filter:blur(5px);
}
.experience-info-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
margin-top:30px;
border-top:1px solid #d9e1df;
border-bottom:1px solid #d9e1df;
}
.experience-info-grid section{
padding:24px 22px;
border-right:1px solid #d9e1df;
}
.experience-info-grid section:last-child{
border-right:0;
}
.experience-info-grid h4{
margin:0 0 10px;
color:#17343a;
font-family:"Playfair Display",Georgia,serif;
font-size:1.15rem;
}
.experience-info-grid p{
margin:0;
color:#607377;
line-height:1.65;
font-size:.9rem;
}
.experience-note{
margin-top:24px;
padding:20px 22px;
background:#eef5f3;
color:#45656a;
line-height:1.65;
}
.experience-note strong{
color:#17343a;
}
.experience-note p{
margin:6px 0 0;
}
@media(max-width:900px){
.experience-feature{
grid-template-columns:1fr;
}
.experience-card-hero{
min-height:380px;
}
.experience-gallery{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.experience-photo-wide{
grid-column:span 2;
}
.experience-info-grid{
grid-template-columns:1fr 1fr;
}
.experience-info-grid section:nth-child(2){
border-right:0;
}
.experience-info-grid section:nth-child(-n+2){
border-bottom:1px solid #d9e1df;
}
}
@media(max-width:600px){
.experiences-panel .service-panel-heading,
.experience-detail-header{
flex-direction:column;
}
.experience-card-hero{
min-height:300px;
}
.experience-card-content{
padding:30px 24px;
}
.experience-details{
padding:20px;
}
.experience-gallery{
grid-template-columns:1fr;
}
.experience-photo-wide{
grid-column:auto;
}
.experience-photo,
.experience-photo img{
min-height:220px;
}
.experience-info-grid{
grid-template-columns:1fr;
}
.experience-info-grid section{
border-right:0;
border-bottom:1px solid #d9e1df;
}
.experience-info-grid section:last-child{
border-bottom:0;
}
}
/* ==========================================================
SHERATON DAY ESCAPE — APPROVED EDITORIAL DESIGN
========================================================== */
.sheraton-editorial{
padding-top:22px !important;
}
.sheraton-topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}
.sheraton-back{
border:0;
background:transparent;
padding:8px 0;
color:#42676c;
font:inherit;
font-size:.86rem;
cursor:pointer;
}
.sheraton-panel-close{
border:1px solid #ccd9d7;
background:#fff;
color:#315b60;
padding:9px 14px;
border-radius:999px;
cursor:pointer;
}
/* HERO */
.sheraton-editorial-hero{
position:relative;
min-height:610px;
overflow:hidden;
background:#073b43;
}
.sheraton-editorial-hero > img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.sheraton-editorial-shade{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(3,39,48,.84) 0%,
rgba(3,39,48,.60) 35%,
rgba(3,39,48,.12) 68%,
rgba(3,39,48,.02) 100%
),
linear-gradient(
0deg,
rgba(2,31,38,.28),
transparent 50%
);
}
.sheraton-editorial-copy{
position:relative;
z-index:2;
max-width:650px;
padding:118px 64px 80px;
color:white;
}
.sheraton-editorial-kicker{
margin:0 0 22px;
font-size:.76rem;
font-weight:700;
letter-spacing:.19em;
color:rgba(255,255,255,.9);
}
.sheraton-editorial-kicker.dark{
color:#427078;
}
.sheraton-editorial-copy h2{
margin:0 0 24px;
max-width:620px;
color:white;
font-family:"Playfair Display",Georgia,serif;
font-size:clamp(3rem,5.4vw,5.6rem);
line-height:.94;
letter-spacing:-.035em;
}
.sheraton-editorial-copy > p:not(.sheraton-editorial-kicker){
max-width:570px;
margin:0;
font-size:1.04rem;
line-height:1.75;
color:rgba(255,255,255,.92);
}
.sheraton-gold-button{
display:inline-flex;
align-items:center;
gap:36px;
margin-top:34px;
padding:15px 22px;
border:0;
border-radius:999px;
background:#f2cc72;
color:#17343a;
font:inherit;
font-weight:700;
cursor:pointer;
}
.sheraton-gold-button span{
font-size:1.25rem;
}
/* EXPANDED EXPERIENCE */
.sheraton-expanded{
padding-top:12px;
}
.sheraton-expanded[hidden]{
display:none;
}
/* PHOTO STORY */
.sheraton-photo-story{
display:grid;
grid-template-columns:2fr 1.05fr .85fr;
gap:8px;
padding:8px 0 0;
}
.sheraton-photo{
height:360px;
margin:0;
overflow:hidden;
background:#e3ecea;
}
.sheraton-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .45s ease;
}
.sheraton-photo:hover img{
transform:scale(1.025);
}
/* BENEFIT CARDS */
.sheraton-benefit-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
padding-top:8px;
}
.sheraton-benefit-card{
position:relative;
min-height:330px;
overflow:hidden;
background:#123d43;
}
.sheraton-benefit-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.sheraton-benefit-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(3,32,39,.92),
rgba(3,32,39,.18) 70%
);
}
.sheraton-benefit-copy{
position:absolute;
z-index:2;
left:28px;
right:28px;
bottom:26px;
color:white;
}
.sheraton-benefit-number{
margin:0 0 2px;
font-family:"Playfair Display",Georgia,serif;
font-size:2rem;
line-height:1;
}
.sheraton-benefit-copy h3{
margin:0 0 12px;
font-family:"Playfair Display",Georgia,serif;
font-size:2rem;
font-weight:500;
}
.sheraton-benefit-copy p:last-child{
margin:0;
max-width:330px;
line-height:1.6;
color:rgba(255,255,255,.88);
}
/* LOWER EDITORIAL SECTION */
.sheraton-experience-lower{
display:grid;
grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);
gap:64px;
padding:70px 34px 58px;
background:#fbfaf6;
}
.sheraton-experience-copy h2{
margin:0;
max-width:760px;
color:#17343a;
font-family:"Playfair Display",Georgia,serif;
font-size:clamp(2.6rem,4vw,4.5rem);
line-height:1;
letter-spacing:-.025em;
}
.sheraton-experience-lede{
max-width:800px;
margin:28px 0 0;
color:#566c70;
font-size:1.05rem;
line-height:1.8;
}
.sheraton-fact-row{
display:grid;
grid-template-columns:repeat(3,1fr);
margin-top:44px;
border-top:1px solid #d7dfdc;
}
.sheraton-fact{
padding:28px 28px 0 0;
}
.sheraton-fact + .sheraton-fact{
padding-left:28px;
border-left:1px solid #d7dfdc;
}
.sheraton-fact-icon{
display:block;
margin-bottom:16px;
color:#17343a;
font-size:1.65rem;
}
.sheraton-fact h4{
margin:0 0 8px;
color:#17343a;
font-family:"Playfair Display",Georgia,serif;
font-size:1.25rem;
}
.sheraton-fact p{
margin:0;
color:#617377;
line-height:1.65;
font-size:.91rem;
}
.sheraton-planning-note{
margin-top:46px;
padding-top:24px;
border-top:1px solid #d7dfdc;
}
.sheraton-planning-note h4{
margin:0 0 9px;
color:#17343a;
}
.sheraton-planning-note p{
margin:0;
max-width:850px;
color:#64777a;
line-height:1.7;
font-size:.9rem;
}
/* ENQUIRY CARD */
.sheraton-enquiry-panel{
align-self:start;
padding:34px;
background:#f3f1eb;
border-radius:4px;
}
.sheraton-enquiry-panel h3{
margin:0 0 14px;
color:#17343a;
font-family:"Playfair Display",Georgia,serif;
font-size:1.7rem;
line-height:1.15;
}
.sheraton-enquiry-panel > p:not(.sheraton-editorial-kicker){
color:#627478;
line-height:1.65;
}
.sheraton-enquiry-button{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:26px;
padding:15px 19px;
border-radius:999px;
background:#075765;
color:white;
font-weight:700;
}
.sheraton-enquiry-button span{
font-size:1.25rem;
}
.sheraton-enquiry-divider{
height:1px;
margin:30px 0;
background:#d2d8d5;
}
.sheraton-enquiry-small{
margin-bottom:7px !important;
font-size:.85rem;
}
.sheraton-email-link{
color:#0b5966;
border-bottom:1px solid rgba(11,89,102,.35);
}
.sheraton-close-row{
display:flex;
justify-content:center;
padding:0 34px 55px;
background:#fbfaf6;
}
/* RESPONSIVE */
@media(max-width:1000px){
.sheraton-editorial-hero{
min-height:560px;
}
.sheraton-photo-story{
grid-template-columns:1.5fr 1fr;
}
.sheraton-photo-story .sheraton-photo:last-child{
grid-column:1/-1;
height:300px;
}
.sheraton-benefit-grid{
grid-template-columns:1fr 1fr;
}
.sheraton-benefit-card:last-child{
grid-column:1/-1;
}
.sheraton-experience-lower{
grid-template-columns:1fr;
}
}
@media(max-width:700px){
.sheraton-editorial-hero{
min-height:620px;
}
.sheraton-editorial-shade{
background:
linear-gradient(
to top,
rgba(3,39,48,.9) 0%,
rgba(3,39,48,.55) 55%,
rgba(3,39,48,.10) 100%
);
}
.sheraton-editorial-copy{
position:absolute;
left:0;
right:0;
bottom:0;
padding:40px 24px 42px;
}
.sheraton-editorial-copy h2{
font-size:3.35rem;
}
.sheraton-photo-story,
.sheraton-benefit-grid{
grid-template-columns:1fr;
}
.sheraton-photo,
.sheraton-photo-story .sheraton-photo:last-child{
grid-column:auto;
height:300px;
}
.sheraton-benefit-card,
.sheraton-benefit-card:last-child{
grid-column:auto;
min-height:350px;
}
.sheraton-experience-lower{
padding:54px 24px 44px;
}
.sheraton-fact-row{
grid-template-columns:1fr;
}
.sheraton-fact{
padding:24px 0;
}
.sheraton-fact + .sheraton-fact{
padding-left:0;
border-left:0;
border-top:1px solid #d7dfdc;
}
.sheraton-enquiry-panel{
padding:28px 24px;
}
}
/* Make service cards reliably clickable */
.interactive-card{
cursor:pointer;
position:relative;
}
.interactive-card .card-action{
pointer-events:none;
}
/* ==========================================================
HAPAXORA EXPERIENCE CARD SYSTEM
Compact card → immersive experience
========================================================== */
.experiences-panel{
margin-top:34px;
border-top:1px solid #d9e1df;
}
.experiences-panel[hidden],
.sheraton-full-experience[hidden]{
display:none !important;
}
.experiences-panel .service-panel-inner{
padding-top:54px;
}
.experience-list-heading{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:30px;
margin-bottom:36px;
}
.experience-list-heading h2{
max-width:760px;
}
.experience-list-heading > div > p:last-child{
max-width:730px;
color:#607377;
line-height:1.7;
}
/* ==========================================================
EXPERIENCE CARD GRID
========================================================== */
.experience-card-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}
.experience-list-card{
display:grid;
grid-template-columns:1fr;
overflow:hidden;
border:1px solid #d9e1df;
background:white;
min-width:0;
}
.experience-list-image{
position:relative;
height:310px;
overflow:hidden;
background:#dce8e6;
}
.experience-list-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .45s ease;
}
.experience-list-card:hover .experience-list-image img{
transform:scale(1.025);
}
.experience-list-image::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(4,31,36,.42),
rgba(4,31,36,0) 55%
);
}
.experience-list-badge{
position:absolute;
z-index:2;
left:20px;
bottom:18px;
padding:8px 11px;
border-radius:999px;
background:rgba(4,31,36,.76);
color:white;
font-size:.68rem;
font-weight:700;
letter-spacing:.1em;
backdrop-filter:blur(6px);
}
.experience-list-info{
display:flex;
flex-direction:column;
padding:30px 28px 32px;
}
.experience-list-kicker{
margin:0 0 10px;
color:#4c777c;
font-size:.7rem;
font-weight:700;
letter-spacing:.13em;
}
.experience-list-info h3{
margin:0;
color:#17343a;
font-family:"Playfair Display",Georgia,serif;
font-size:2rem;
line-height:1.08;
}
.experience-list-summary{
margin:18px 0 0;
color:#607377;
line-height:1.7;
}
.experience-list-facts{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:22px;
}
.experience-list-facts span{
padding:7px 10px;
border:1px solid #d7e1df;
border-radius:999px;
background:#f8fbfa;
color:#486b70;
font-size:.73rem;
}
.experience-list-button{
align-self:flex-start;
margin-top:28px;
background:#0d5962;
color:white;
}
.experience-list-button:hover{
background:#084a53;
}
/* ==========================================================
FULL EXPERIENCE ENTRANCE
========================================================== */
.sheraton-full-experience{
margin-top:20px;
animation:sheratonExperienceReveal .38s ease both;
}
@keyframes sheratonExperienceReveal{
from{
opacity:0;
transform:translateY(18px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.sheraton-topbar{
display:flex;
justify-content:flex-start;
align-items:center;
padding:13px 4px 18px;
}
.sheraton-back-to-list{
border:0;
background:transparent;
padding:8px 0;
color:#42676c;
font:inherit;
font-size:.88rem;
cursor:pointer;
}
.sheraton-back-to-list:hover{
color:#082f36;
}
/* HERO */
.sheraton-editorial-hero{
position:relative;
min-height:610px;
overflow:hidden;
background:#073b43;
}
.sheraton-editorial-hero > img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.sheraton-editorial-shade{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(3,39,48,.84) 0%,
rgba(3,39,48,.60) 35%,
rgba(3,39,48,.12) 68%,
rgba(3,39,48,.02) 100%
),
linear-gradient(
0deg,
rgba(2,31,38,.28),
transparent 50%
);
}
.sheraton-editorial-copy{
position:relative;
z-index:2;
max-width:650px;
padding:118px 64px 80px;
color:white;
}
.sheraton-editorial-kicker{
margin:0 0 22px;
font-size:.76rem;
font-weight:700;
letter-spacing:.19em;
color:rgba(255,255,255,.9);
}
.sheraton-editorial-kicker.dark{
color:#427078;
}
.sheraton-editorial-copy h2{
margin:0 0 24px;
max-width:620px;
color:white;
font-family:"Playfair Display",Georgia,serif;
font-size:clamp(3rem,5.4vw,5.6rem);
line-height:.94;
letter-spacing:-.035em;
}
.sheraton-editorial-copy > p:not(.sheraton-editorial-kicker){
max-width:570px;
margin:0;
font-size:1.04rem;
line-height:1.75;
color:rgba(255,255,255,.92);
}
.sheraton-gold-button{
display:inline-flex;
align-items:center;
gap:36px;
margin-top:34px;
padding:15px 22px;
border-radius:999px;
background:#f2cc72;
color:#17343a;
font-weight:700;
}
.sheraton-gold-button span{
font-size:1.25rem;
}
/* PHOTO STORY */
.sheraton-photo-story{
display:grid;
grid-template-columns:2fr 1.05fr .85fr;
gap:8px;
padding-top:8px;
}
.sheraton-photo{
height:360px;
margin:0;
overflow:hidden;
background:#e3ecea;
}
.sheraton-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* BENEFITS */
.sheraton-benefit-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
padding-top:8px;
}
.sheraton-benefit-card{
position:relative;
min-height:330px;
overflow:hidden;
background:#123d43;
}
.sheraton-benefit-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.sheraton-benefit-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(3,32,39,.92),
rgba(3,32,39,.18) 70%
);
}
.sheraton-benefit-copy{
position:absolute;
z-index:2;
left:28px;
right:28px;
bottom:26px;
color:white;
}
.sheraton-benefit-number{
margin:0 0 2px;
font-family:"Playfair Display",Georgia,serif;
font-size:2rem;
}
.sheraton-benefit-copy h3{
margin:0 0 12px;
font-family:"Playfair Display",Georgia,serif;
font-size:2rem;
font-weight:500;
}
.sheraton-benefit-copy p:last-child{
margin:0;
line-height:1.6;
color:rgba(255,255,255,.88);
}
/* LOWER EDITORIAL */
.sheraton-experience-lower{
display:grid;
grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);
gap:64px;
padding:70px 34px 58px;
background:#fbfaf6;
}
.sheraton-experience-copy h2{
margin:0;
color:#17343a;
font-family:"Playfair Display",Georgia,serif;
font-size:clamp(2.6rem,4vw,4.5rem);
line-height:1;
}
.sheraton-experience-lede{
max-width:800px;
margin:28px 0 0;
color:#566c70;
font-size:1.05rem;
line-height:1.8;
}
.sheraton-fact-row{
display:grid;
grid-template-columns:repeat(3,1fr);
margin-top:44px;
border-top:1px solid #d7dfdc;
}
.sheraton-fact{
padding:28px 28px 0 0;
}
.sheraton-fact + .sheraton-fact{
padding-left:28px;
border-left:1px solid #d7dfdc;
}
.sheraton-fact-icon{
display:block;
margin-bottom:16px;
color:#17343a;
font-size:1.65rem;
}
.sheraton-fact h4{
margin:0 0 8px;
color:#17343a;
font-family:"Playfair Display",Georgia,serif;
font-size:1.25rem;
}
.sheraton-fact p{
margin:0;
color:#617377;
line-height:1.65;
font-size:.91rem;
}
.sheraton-planning-note{
margin-top:46px;
padding-top:24px;
border-top:1px solid #d7dfdc;
}
.sheraton-planning-note h4{
margin:0 0 9px;
color:#17343a;
}
.sheraton-planning-note p{
margin:0;
color:#64777a;
line-height:1.7;
font-size:.9rem;
}
/* ENQUIRY PANEL */
.sheraton-enquiry-panel{
align-self:start;
padding:34px;
background:#f3f1eb;
}
.sheraton-enquiry-panel h3{
margin:0 0 14px;
color:#17343a;
font-family:"Playfair Display",Georgia,serif;
font-size:1.7rem;
}
.sheraton-enquiry-panel > p:not(.sheraton-editorial-kicker){
color:#627478;
line-height:1.65;
}
.sheraton-enquiry-button{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:26px;
padding:15px 19px;
border-radius:999px;
background:#075765;
color:white;
font-weight:700;
}
.sheraton-enquiry-divider{
height:1px;
margin:30px 0;
background:#d2d8d5;
}
.sheraton-enquiry-small{
margin-bottom:7px !important;
font-size:.85rem;
}
.sheraton-email-link{
color:#0b5966;
border-bottom:1px solid rgba(11,89,102,.35);
}
.sheraton-close-row{
display:flex;
justify-content:center;
padding:0 34px 55px;
background:#fbfaf6;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media(max-width:900px){
.experience-card-grid{
grid-template-columns:1fr;
}
.sheraton-photo-story{
grid-template-columns:1fr 1fr;
}
.sheraton-photo-main{
grid-column:1/-1;
}
.sheraton-benefit-grid{
grid-template-columns:1fr;
}
.sheraton-experience-lower{
grid-template-columns:1fr;
}
}
@media(max-width:600px){
.experience-list-heading{
flex-direction:column;
}
.experience-list-image{
height:250px;
}
.sheraton-editorial-hero{
min-height:610px;
}
.sheraton-editorial-shade{
background:
linear-gradient(
to top,
rgba(3,39,48,.92),
rgba(3,39,48,.42) 60%,
rgba(3,39,48,.05)
);
}
.sheraton-editorial-copy{
position:absolute;
left:0;
right:0;
bottom:0;
padding:38px 24px 40px;
}
.sheraton-editorial-copy h2{
font-size:3.3rem;
}
.sheraton-photo-story{
grid-template-columns:1fr;
}
.sheraton-photo-main{
grid-column:auto;
}
.sheraton-photo{
height:280px;
}
.sheraton-experience-lower{
padding:50px 24px 40px;
}
.sheraton-fact-row{
grid-template-columns:1fr;
}
.sheraton-fact{
padding:23px 0;
}
.sheraton-fact + .sheraton-fact{
padding-left:0;
border-left:0;
border-top:1px solid #d7dfdc;
}
}
/* ==========================================================
EXPERIENCE CARDS — FULL IMAGE STYLE
Matches the visual language of Stays
========================================================== */
.experience-list-card{
position:relative;
display:block;
min-height:430px;
overflow:hidden;
border:0;
border-radius:20px;
background:#082f36;
box-shadow:0 14px 34px rgba(8,47,54,.10);
}
/* Image fills the complete card */
.experience-list-image{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:hidden;
background:#082f36;
}
.experience-list-image img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .45s ease;
}
.experience-list-card:hover .experience-list-image img{
transform:scale(1.025);
}
/* Strong natural-looking image shade */
.experience-list-image::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(3,27,32,.94) 0%,
rgba(3,27,32,.72) 35%,
rgba(3,27,32,.27) 69%,
rgba(3,27,32,.08) 100%
);
}
/* Top label */
.experience-list-badge{
position:absolute;
z-index:4;
top:20px;
left:22px;
bottom:auto;
max-width:calc(100% - 44px);
padding:8px 12px;
border-radius:3px;
background:rgba(4,65,67,.90);
color:#fff;
font-size:.67rem;
font-weight:700;
letter-spacing:.11em;
backdrop-filter:blur(5px);
}
/* Content sits over the lower part of the photo */
.experience-list-info{
position:relative;
z-index:3;
min-height:430px;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:105px 28px 28px;
background:transparent;
}
/* The top badge already communicates selection,
so this line becomes subtle rather than competing */
.experience-list-kicker{
margin:0 0 10px;
color:rgba(255,255,255,.74);
font-size:.69rem;
font-weight:700;
letter-spacing:.13em;
}
/* Main title */
.experience-list-info h3{
max-width:560px;
margin:0;
color:#fff;
font-family:"Playfair Display",Georgia,serif;
font-size:clamp(2rem,3vw,2.8rem);
line-height:1.02;
letter-spacing:-.02em;
}
/* Description */
.experience-list-summary{
max-width:620px;
margin:15px 0 0;
color:rgba(255,255,255,.90);
font-size:.94rem;
line-height:1.65;
}
/* Benefit strip */
.experience-list-facts{
display:flex;
flex-wrap:wrap;
gap:0;
align-self:flex-start;
margin-top:20px;
overflow:hidden;
border:1px solid rgba(255,255,255,.28);
border-radius:10px;
background:rgba(5,39,44,.48);
backdrop-filter:blur(7px);
}
.experience-list-facts span{
padding:9px 13px;
border:0;
border-right:1px solid rgba(255,255,255,.22);
border-radius:0;
background:transparent;
color:#fff;
font-size:.73rem;
}
.experience-list-facts span:last-child{
border-right:0;
}
/* Explore button */
.experience-list-button{
align-self:flex-start;
margin-top:18px;
padding:13px 19px;
border-radius:999px;
background:#0c7178;
color:#fff;
font-weight:700;
box-shadow:none;
}
.experience-list-button:hover{
background:#0a6268;
transform:translateY(-1px);
}
/* ==========================================================
Cards remain in a clean 2-column system
Sheraton + Diving will sit side by side
========================================================== */
.experience-card-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
align-items:stretch;
}
/* ==========================================================
IMPORTANT:
When full Sheraton experience opens,
the card grid disappears exactly as before.
========================================================== */
#experienceCardGrid[hidden]{
display:none !important;
}
#sheratonFullExperience[hidden]{
display:none !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:900px){
.experience-card-grid{
grid-template-columns:1fr;
}
}
@media(max-width:600px){
.experience-list-card,
.experience-list-info{
min-height:470px;
}
.experience-list-info{
padding:110px 22px 24px;
}
.experience-list-info h3{
font-size:2.35rem;
}
.experience-list-summary{
font-size:.9rem;
}
.experience-list-facts{
gap:0;
}
.experience-list-facts span{
padding:8px 10px;
font-size:.68rem;
}
}
/* ============================================================
HAPAXORA DIVING EXPERIENCE
============================================================ */
.diving-modal {
position: fixed;
inset: 0;
z-index: 3000;
overflow-y: auto;
background: rgba(3, 23, 28, 0.86);
padding: 36px 20px;
}
.diving-modal[hidden] {
display: none;
}
.diving-window {
position: relative;
width: min(1180px, 100%);
margin: 0 auto;
background: #f7f5ef;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0,0,0,.32);
}
.diving-close {
position: absolute;
top: 20px;
right: 22px;
z-index: 10;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(0,0,0,.48);
color: white;
font-size: 26px;
cursor: pointer;
}
.diving-hero {
position: relative;
min-height: 500px;
}
.diving-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.diving-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(1,24,31,.82) 0%,
rgba(1,24,31,.48) 45%,
rgba(1,24,31,.08) 78%
);
}
.diving-hero-copy {
position: relative;
z-index: 2;
max-width: 650px;
padding: 110px 70px 90px;
color: white;
}
.diving-kicker,
.diving-card-kicker {
margin: 0 0 12px;
font-size: .78rem;
letter-spacing: .16em;
font-weight: 700;
}
.diving-hero-copy h2 {
margin: 0 0 22px;
font-size: clamp(3rem, 7vw, 6.3rem);
line-height: .92;
}
.diving-hero-copy > p:last-child {
max-width: 580px;
font-size: 1.08rem;
line-height: 1.65;
}
.diving-body {
padding: 70px;
}
.diving-intro {
max-width: 760px;
margin-bottom: 42px;
}
.diving-intro h2 {
margin: 8px 0 18px;
font-size: clamp(2rem,4vw,3.4rem);
}
.diving-intro > p:last-child {
line-height: 1.7;
}
.diving-experience-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 24px;
}
.diving-experience-card {
overflow: hidden;
background: white;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(10,43,48,.08);
}
.diving-experience-card img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}
.diving-experience-copy {
padding: 26px;
}
.diving-card-kicker {
color: #77705d;
}
.diving-experience-copy h3 {
margin: 0 0 12px;
font-size: 1.55rem;
}
.diving-experience-copy p {
margin: 0 0 20px;
line-height: 1.6;
}
.diving-experience-copy span {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.diving-course-card {
grid-column: 1 / -1;
}
.diving-course-card img {
height: 340px;
}
.diving-planning {
display: grid;
grid-template-columns: 1.4fr .8fr;
gap: 38px;
margin-top: 60px;
padding-top: 48px;
border-top: 1px solid rgba(0,0,0,.12);
}
.diving-planning h2 {
margin: 8px 0 14px;
}
.diving-planning p {
line-height: 1.65;
}
.diving-partner-note {
padding: 28px;
border-radius: 16px;
background: #e9e4d8;
}
.diving-private-rate {
display: inline-block;
margin-top: 12px;
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
}
.diving-enquiry {
display: flex;
justify-content: space-between;
align-items: center;
gap: 35px;
margin-top: 55px;
padding: 35px;
border-radius: 18px;
background: #092f36;
color: white;
}
.diving-enquiry h3 {
margin: 5px 0 8px;
font-size: 1.8rem;
}
.diving-enquiry p {
margin-bottom: 0;
}
.diving-kicker.dark {
color: inherit;
}
body.diving-open {
overflow: hidden;
}
@media (max-width: 760px) {
.diving-modal {
padding: 0;
}
.diving-window {
border-radius: 0;
}
.diving-hero {
min-height: 520px;
}
.diving-hero-copy {
padding: 115px 26px 55px;
}
.diving-body {
padding: 45px 22px;
}
.diving-experience-grid,
.diving-planning {
grid-template-columns: 1fr;
}
.diving-course-card {
grid-column: auto;
}
.diving-experience-card img,
.diving-course-card img {
height: 230px;
}
.diving-enquiry {
align-items: flex-start;
flex-direction: column;
}
}
/* ============================================================
PADI COURSES POPUP
============================================================ */
.diving-course-clickable {
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
}
.diving-course-clickable:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(10,43,48,.14);
}
.padi-modal {
position: fixed;
inset: 0;
z-index: 4000;
overflow-y: auto;
padding: 36px 20px;
background: rgba(3,23,28,.88);
}
.padi-modal[hidden] {
display: none;
}
.padi-window {
position: relative;
width: min(1100px, 100%);
margin: 0 auto;
padding: 60px;
border-radius: 22px;
background: #f7f5ef;
box-shadow: 0 25px 80px rgba(0,0,0,.35);
}
.padi-close {
position: absolute;
top: 20px;
right: 22px;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: #0a343c;
color: #fff;
font-size: 26px;
cursor: pointer;
}
.padi-header {
max-width: 760px;
margin-bottom: 36px;
}
.padi-header h2 {
margin: 8px 0 14px;
font-size: clamp(2.4rem,5vw,4.2rem);
}
.padi-header p {
line-height: 1.65;
}
.padi-course-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 20px;
}
.padi-course-item {
padding: 28px;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 24px rgba(10,43,48,.07);
}
.padi-course-item h3 {
margin: 0 0 12px;
font-size: 1.45rem;
}
.padi-course-item > p {
line-height: 1.6;
}
.padi-course-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px 0;
}
.padi-course-facts span {
padding: 7px 10px;
border-radius: 999px;
background: #ece7dc;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
.padi-course-note {
margin-bottom: 0;
font-size: .9rem;
}
.padi-common-info {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 18px;
margin-top: 36px;
padding-top: 32px;
border-top: 1px solid rgba(0,0,0,.12);
}
.padi-common-info > div {
padding: 20px;
border-radius: 14px;
background: #ebe5d9;
}
.padi-common-info p {
margin-bottom: 0;
line-height: 1.5;
}
.padi-private-rates {
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px;
margin-top: 34px;
padding: 30px;
border-radius: 16px;
background: #0a343c;
color: #fff;
}
.padi-private-rates h3 {
margin: 5px 0 8px;
}
.padi-private-rates p {
margin-bottom: 0;
}
body.padi-open {
overflow: hidden;
}
@media (max-width: 760px) {
.padi-modal {
padding: 0;
}
.padi-window {
min-height: 100vh;
padding: 70px 22px 40px;
border-radius: 0;
}
.padi-course-grid,
.padi-common-info {
grid-template-columns: 1fr;
}
.padi-private-rates {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
PADI COURSES POPUP - visual upgrade
============================================================ */
.padi-window {
width: min(1180px, 100%);
padding: 0;
overflow: hidden;
border-radius: 22px;
}
.padi-hero {
position: relative;
min-height: 360px;
}
.padi-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.padi-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(3, 24, 30, 0.82) 0%,
rgba(3, 24, 30, 0.48) 46%,
rgba(3, 24, 30, 0.12) 80%
);
}
.padi-hero-copy {
position: relative;
z-index: 2;
max-width: 620px;
padding: 90px 60px 70px;
color: #fff;
}
.padi-hero-copy h2 {
margin: 8px 0 16px;
font-size: clamp(2.8rem, 5vw, 4.8rem);
line-height: .96;
}
.padi-hero-copy p:last-child {
line-height: 1.65;
}
.padi-body {
padding: 46px 56px 56px;
}
.padi-intro {
max-width: 760px;
margin-bottom: 28px;
}
.padi-intro h3 {
margin: 8px 0 14px;
font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}
.padi-intro p:last-child {
line-height: 1.65;
}
.padi-course-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.padi-course-item {
padding: 0;
overflow: hidden;
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 28px rgba(10, 43, 48, .08);
}
.padi-course-image {
width: 100%;
height: 210px;
object-fit: cover;
display: block;
}
.padi-course-copy {
padding: 24px;
}
.padi-course-copy h3 {
margin: 0 0 10px;
font-size: 1.45rem;
}
.padi-course-copy > p {
margin: 0 0 16px;
line-height: 1.6;
}
.padi-course-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 16px;
}
.padi-course-facts span {
padding: 7px 10px;
border-radius: 999px;
background: #ece7dc;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
.padi-course-note {
margin-bottom: 0;
font-size: .92rem;
color: #4b585b;
}
.padi-common-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 34px;
padding-top: 30px;
border-top: 1px solid rgba(0,0,0,.12);
}
.padi-common-info > div {
padding: 20px;
border-radius: 16px;
background: #ebe5d9;
}
.padi-common-info strong {
display: inline-block;
margin-bottom: 10px;
}
.padi-common-info p {
margin-bottom: 0;
line-height: 1.55;
}
.padi-private-rates {
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px;
margin-top: 30px;
padding: 28px 30px;
border-radius: 18px;
background: #0a343c;
color: #fff;
}
.padi-private-rates h3 {
margin: 5px 0 8px;
font-size: 1.65rem;
}
.padi-private-rates p {
margin-bottom: 0;
}
@media (max-width: 760px) {
.padi-window {
border-radius: 0;
}
.padi-hero {
min-height: 420px;
}
.padi-hero-copy {
padding: 90px 24px 48px;
}
.padi-body {
padding: 36px 22px 42px;
}
.padi-course-grid,
.padi-common-info {
grid-template-columns: 1fr;
}
.padi-course-image {
height: 220px;
}
.padi-private-rates {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
HAPAXORA FULL-DAY ADVENTURE
============================================================ */
.adventure-modal {
position: fixed;
inset: 0;
z-index: 3500;
overflow-y: auto;
padding: 36px 20px;
background: rgba(3, 23, 28, .86);
}
.adventure-modal[hidden] {
display: none;
}
.adventure-window {
position: relative;
width: min(1180px, 100%);
margin: 0 auto;
overflow: hidden;
border-radius: 22px;
background: #f7f5ef;
box-shadow: 0 25px 80px rgba(0,0,0,.32);
}
.adventure-close {
position: absolute;
top: 20px;
right: 22px;
z-index: 10;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(0,0,0,.48);
color: #fff;
font-size: 26px;
cursor: pointer;
}
.adventure-hero {
position: relative;
min-height: 500px;
}
.adventure-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.adventure-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(1,24,31,.82) 0%,
rgba(1,24,31,.45) 48%,
rgba(1,24,31,.08) 80%
);
}
.adventure-hero-copy {
position: relative;
z-index: 2;
max-width: 650px;
padding: 110px 70px 90px;
color: #fff;
}
.adventure-kicker,
.adventure-card-kicker {
margin: 0 0 12px;
font-size: .78rem;
letter-spacing: .16em;
font-weight: 700;
}
.adventure-hero-copy h2 {
margin: 0 0 22px;
font-size: clamp(3rem, 7vw, 6rem);
line-height: .94;
}
.adventure-hero-copy p:last-child {
font-size: 1.08rem;
line-height: 1.65;
}
.adventure-body {
padding: 70px;
}
.adventure-intro {
max-width: 760px;
margin-bottom: 40px;
}
.adventure-intro h2 {
margin: 8px 0 18px;
font-size: clamp(2rem,4vw,3.4rem);
}
.adventure-intro p:last-child {
line-height: 1.7;
}
.adventure-story-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 24px;
}
.adventure-story-card {
overflow: hidden;
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(10,43,48,.08);
}
.adventure-story-card img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}
.adventure-story-copy {
padding: 26px;
}
.adventure-card-kicker {
color: #77705d;
}
.adventure-story-copy h3 {
margin: 0 0 12px;
font-size: 1.55rem;
}
.adventure-story-copy p:last-child {
margin-bottom: 0;
line-height: 1.6;
}
.adventure-story-wide {
grid-column: 1 / -1;
}
.adventure-story-wide img {
height: 350px;
}
.adventure-lower {
display: grid;
grid-template-columns: 1.4fr .8fr;
gap: 38px;
margin-top: 60px;
padding-top: 48px;
border-top: 1px solid rgba(0,0,0,.12);
}
.adventure-lower h2 {
margin: 8px 0 18px;
}
.adventure-facts {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.adventure-facts span {
padding: 9px 12px;
border-radius: 999px;
background: #ebe5d9;
font-size: .78rem;
font-weight: 700;
}
.adventure-partner-note {
padding: 28px;
border-radius: 16px;
background: #e9e4d8;
}
.adventure-partner-note p {
line-height: 1.6;
}
.adventure-partner-note span {
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
}
.adventure-planning-note {
margin-top: 34px;
padding: 28px;
border-radius: 16px;
background: #fff;
}
.adventure-planning-note p:last-child {
margin-bottom: 0;
line-height: 1.65;
}
.adventure-enquiry {
display: flex;
justify-content: space-between;
align-items: center;
gap: 35px;
margin-top: 38px;
padding: 35px;
border-radius: 18px;
background: #092f36;
color: #fff;
}
.adventure-enquiry h3 {
margin: 5px 0 8px;
font-size: 1.8rem;
}
.adventure-enquiry p {
margin-bottom: 0;
}
body.adventure-open {
overflow: hidden;
}
@media (max-width: 760px) {
.adventure-modal {
padding: 0;
}
.adventure-window {
border-radius: 0;
}
.adventure-hero {
min-height: 520px;
}
.adventure-hero-copy {
padding: 115px 26px 55px;
}
.adventure-body {
padding: 45px 22px;
}
.adventure-story-grid,
.adventure-lower {
grid-template-columns: 1fr;
}
.adventure-story-wide {
grid-column: auto;
}
.adventure-story-card img,
.adventure-story-wide img {
height: 230px;
}
.adventure-enquiry {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
HAPAXORA RESPONSIVE BROWSING CARD SYSTEM
Applies to:
- Experiences
- Stays
- Transport
- Future Packages
Principle:
Browse compactly -> open for full detail
============================================================ */
@media (max-width: 760px) {
/* ----------------------------------------------------------
SHARED PANEL SPACING
Reduce excessive empty space on mobile
---------------------------------------------------------- */
.experiences-panel .service-panel-inner,
.stays-panel-inner,
.transport-panel-inner,
.packages-panel .service-panel-inner {
width: 100%;
max-width: none;
padding-left: 16px;
padding-right: 16px;
}
.experience-list-heading,
.stays-panel-heading,
.transport-panel-heading {
margin-bottom: 24px;
}
/* ==========================================================
EXPERIENCES
========================================================== */
.experience-card-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.experience-list-card {
display: block;
width: 100%;
margin: 0;
overflow: hidden;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(8, 38, 44, .08);
}
/*
* Image becomes a dedicated top section.
* No more full-card background treatment on mobile.
*/
.experience-list-image {
position: relative;
width: 100%;
height: 230px;
min-height: 0;
overflow: hidden;
}
.experience-list-image img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: none;
}
.experience-list-card:hover .experience-list-image img {
transform: none;
}
/*
* Remove the heavy dark fade that was needed when text sat
* over the photograph.
*/
.experience-list-image::after {
background:
linear-gradient(
180deg,
rgba(0, 28, 34, .04) 30%,
rgba(0, 28, 34, .28) 100%
);
}
.experience-list-badge {
top: 16px;
left: 16px;
right: auto;
max-width: calc(100% - 32px);
padding: 9px 12px;
font-size: .68rem;
line-height: 1.35;
letter-spacing: .10em;
}
/*
* Text gets its own clean area below the photograph.
*/
.experience-list-info {
position: static;
inset: auto;
display: block;
padding: 20px 20px 22px;
background: #ffffff;
color: #0b3239;
}
.experience-list-kicker {
margin: 0 0 7px;
color: #6f6a5c;
font-size: .68rem;
letter-spacing: .11em;
}
.experience-list-info h3 {
margin: 0 0 10px;
color: #0b3239;
font-size: 1.55rem;
line-height: 1.1;
}
.experience-list-summary {
display: -webkit-box;
margin: 0 0 16px;
overflow: hidden;
color: #47575a;
font-size: .94rem;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/*
* Mobile browsing should show at most two quick facts.
*/
.experience-list-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
}
.experience-list-facts span {
padding: 7px 10px;
border: 1px solid rgba(11, 50, 57, .12);
border-radius: 999px;
background: #f1eee6;
color: #243d42;
font-size: .68rem;
line-height: 1.2;
}
.experience-list-facts span:nth-child(n+3) {
display: none;
}
.experience-list-button {
display: flex;
width: 100%;
min-height: 48px;
align-items: center;
justify-content: center;
margin: 0;
}
/* ==========================================================
STAYS
========================================================== */
.stays-panel-inner > .hotel-feature {
display: block;
width: 100%;
margin-bottom: 20px;
overflow: hidden;
border-radius: 18px;
background: #ffffff;
}
.stays-panel-inner > .hotel-feature .hotel-hero {
position: relative;
width: 100%;
height: 230px;
min-height: 0;
}
.stays-panel-inner > .hotel-feature .hotel-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.stays-panel-inner > .hotel-feature .hotel-info {
position: static;
padding: 20px;
background: #ffffff;
color: #0b3239;
}
.stays-panel-inner > .hotel-feature .hotel-kicker {
margin-bottom: 7px;
color: #6f6a5c;
font-size: .68rem;
line-height: 1.35;
letter-spacing: .10em;
}
.stays-panel-inner > .hotel-feature .hotel-info h3 {
margin-bottom: 10px;
color: #0b3239;
font-size: 1.55rem;
line-height: 1.1;
}
.stays-panel-inner > .hotel-feature .hotel-summary {
display: -webkit-box;
overflow: hidden;
color: #47575a;
font-size: .94rem;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.stays-panel-inner > .hotel-feature .hotel-facts {
gap: 8px;
}
.stays-panel-inner > .hotel-feature .hotel-facts > *:nth-child(n+3) {
display: none;
}
.stays-panel-inner > .hotel-feature .hotel-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 18px;
}
.stays-panel-inner > .hotel-feature .hotel-actions .button {
width: 100%;
min-height: 48px;
}
/* ==========================================================
TRANSPORT
========================================================== */
.transport-options {
grid-template-columns: 1fr;
gap: 20px;
}
.transport-option {
width: 100%;
margin: 0;
padding: 20px;
border-radius: 18px;
}
.airport-transfer-card {
padding: 0 0 20px;
overflow: hidden;
}
.transport-card-hero {
width: 100%;
height: 220px;
min-height: 0;
margin-bottom: 18px;
}
.transport-card-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.airport-transfer-card > h3,
.airport-transfer-card > p,
.airport-transfer-card > .transport-status,
.airport-transfer-card > .transport-button {
margin-left: 20px;
margin-right: 20px;
}
.airport-transfer-card > h3 {
font-size: 1.5rem;
line-height: 1.1;
}
.airport-transfer-card > p {
display: -webkit-box;
overflow: hidden;
font-size: .94rem;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.airport-transfer-card > .transport-button {
display: flex;
width: calc(100% - 40px);
min-height: 48px;
align-items: center;
justify-content: center;
}
/* ==========================================================
FUTURE PACKAGES
Use these classes when package browsing cards are added.
========================================================== */
.package-card-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.package-list-card {
display: block;
width: 100%;
overflow: hidden;
border-radius: 18px;
background: #ffffff;
}
.package-list-image {
position: relative;
width: 100%;
height: 230px;
}
.package-list-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.package-list-info {
padding: 20px;
}
.package-list-summary {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.package-list-facts > *:nth-child(n+3) {
display: none;
}
.package-list-button {
width: 100%;
min-height: 48px;
}
}
/* ============================================================
EXPERIENCE CARDS — FINAL MOBILE SPLIT OVERRIDE
============================================================ */
@media (max-width: 760px) {
.experiences-panel .service-panel-inner {
width: 100% !important;
max-width: none !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
.experience-card-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
width: 100% !important;
}
.experience-list-card {
position: relative !important;
display: block !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
overflow: hidden !important;
border-radius: 18px !important;
background: #fff !important;
box-shadow:
0 8px 24px rgba(8, 38, 44, .08) !important;
}
/* PHOTO AREA */
.experience-list-image {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: 220px !important;
min-height: 0 !important;
overflow: hidden !important;
background: #0b343b !important;
}
.experience-list-image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transform: none !important;
}
.experience-list-image::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(
to bottom,
rgba(3,27,32,.02) 45%,
rgba(3,27,32,.30) 100%
) !important;
}
/* IMAGE BADGE */
.experience-list-badge {
position: absolute !important;
top: 14px !important;
left: 14px !important;
right: auto !important;
bottom: auto !important;
max-width: calc(100% - 28px) !important;
padding: 8px 10px !important;
border-radius: 4px !important;
font-size: .64rem !important;
line-height: 1.35 !important;
letter-spacing: .09em !important;
}
/* CONTENT BELOW PHOTO */
.experience-list-info {
position: static !important;
inset: auto !important;
display: block !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 18px 18px 20px !important;
background: #fff !important;
color: #0b3239 !important;
}
.experience-list-kicker {
margin: 0 0 6px !important;
color: #77705d !important;
font-size: .64rem !important;
line-height: 1.3 !important;
letter-spacing: .10em !important;
}
.experience-list-info h3 {
max-width: none !important;
margin: 0 0 9px !important;
color: #0b3239 !important;
font-size: 1.48rem !important;
line-height: 1.08 !important;
}
.experience-list-summary {
display: -webkit-box !important;
max-width: none !important;
margin: 0 0 14px !important;
overflow: hidden !important;
color: #4c5b5e !important;
font-size: .90rem !important;
line-height: 1.46 !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
}
/* ONLY TWO QUICK FACTS */
.experience-list-facts {
display: flex !important;
flex-wrap: wrap !important;
gap: 7px !important;
margin: 0 0 16px !important;
border: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
}
.experience-list-facts span {
display: inline-block !important;
padding: 7px 9px !important;
border: 1px solid rgba(11,50,57,.12) !important;
border-radius: 999px !important;
background: #f1eee6 !important;
color: #253e42 !important;
font-size: .66rem !important;
line-height: 1.15 !important;
}
.experience-list-facts span:nth-child(n+3) {
display: none !important;
}
/* ACTION */
.experience-list-button {
display: flex !important;
width: 100% !important;
min-height: 46px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 11px 16px !important;
border-radius: 999px !important;
}
}
/* ============================================================
SHERATON DAY ESCAPE — MODAL STANDARD
Matches Diving + Full-Day Adventure interaction
============================================================ */
.sheraton-full-experience {
position: fixed !important;
inset: 0 !important;
z-index: 3500 !important;
width: 100% !important;
height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 36px 20px !important;
background: rgba(3, 23, 28, .86) !important;
}
.sheraton-full-experience[hidden] {
display: none !important;
}
/*
* Existing Sheraton sections collectively form
* the centered modal window.
*/
.sheraton-full-experience > * {
width: min(1180px, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* TOP BAR */
.sheraton-full-experience > .sheraton-topbar {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
padding: 18px 20px !important;
border-radius: 22px 22px 0 0 !important;
background: #fbfaf6 !important;
}
.sheraton-back-to-list {
margin: 0 !important;
padding: 10px 15px !important;
border: 0 !important;
border-radius: 999px !important;
background: #0a343c !important;
color: #fff !important;
font-size: .82rem !important;
font-weight: 700 !important;
cursor: pointer !important;
}
/*
* Hero now begins directly below modal header.
*/
.sheraton-full-experience
.sheraton-editorial-hero {
margin-top: 0 !important;
}
/*
* Keep all interior content visually connected
* as one window rather than separate page sections.
*/
.sheraton-full-experience
.sheraton-photo-story,
.sheraton-full-experience
.sheraton-benefit-grid,
.sheraton-full-experience
.sheraton-experience-lower,
.sheraton-full-experience
.sheraton-close-row {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* BOTTOM OF WINDOW */
.sheraton-full-experience
.sheraton-close-row {
padding-bottom: 38px !important;
border-radius: 0 0 22px 22px !important;
background: #fbfaf6 !important;
}
.sheraton-full-experience
.experience-detail-close {
cursor: pointer !important;
}
/* Prevent page underneath from scrolling */
body.sheraton-experience-open {
overflow: hidden !important;
}
/* ============================================================
SHERATON MODAL — MOBILE
============================================================ */
@media (max-width: 760px) {
.sheraton-full-experience {
padding: 0 !important;
}
.sheraton-full-experience > * {
width: 100% !important;
border-radius: 0 !important;
}
.sheraton-full-experience
> .sheraton-topbar {
position: sticky !important;
top: 0 !important;
z-index: 20 !important;
padding: 12px 14px !important;
border-radius: 0 !important;
background: rgba(251,250,246,.96) !important;
backdrop-filter: blur(8px) !important;
}
.sheraton-back-to-list {
min-height: 42px !important;
padding: 9px 14px !important;
}
.sheraton-full-experience
.sheraton-close-row {
border-radius: 0 !important;
}
}
/* ============================================================
SHERATON MODAL CLOSE BUTTON — match other experience modals
============================================================ */
.sheraton-modal-close {
position: absolute;
top: 20px;
right: 22px;
z-index: 20;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .48);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.sheraton-modal-close:hover {
background: rgba(0, 0, 0, .60);
}
.sheraton-full-experience > .sheraton-topbar {
display: none !important;
}
/* remove the old top white strip effect */
.sheraton-full-experience > .sheraton-editorial-hero {
width: min(1180px, 100%) !important;
margin-top: 0 !important;
border-radius: 22px 22px 0 0 !important;
overflow: hidden !important;
}
@media (max-width: 760px) {
.sheraton-modal-close {
top: 14px;
right: 14px;
width: 42px;
height: 42px;
}
.sheraton-full-experience > .sheraton-editorial-hero {
border-radius: 0 !important;
}
}
/* ============================================================
EXPERIENCE MODAL NAVIGATION — FINAL CONSISTENT STANDARD
============================================================ */
.experience-modal-bottom-close,
.sheraton-close-row {
display: flex !important;
justify-content: center !important;
margin-top: 34px !important;
padding: 28px 0 4px !important;
border-top: 1px solid rgba(11, 50, 57, .12) !important;
}
.experience-bottom-close-button,
.sheraton-close-row .experience-detail-close {
display: inline-flex !important;
min-width: 210px !important;
min-height: 46px !important;
align-items: center !important;
justify-content: center !important;
padding: 11px 20px !important;
border: 1px solid rgba(11, 50, 57, .18) !important;
border-radius: 999px !important;
background: transparent !important;
color: #0b3239 !important;
font: inherit !important;
font-weight: 700 !important;
cursor: pointer !important;
box-shadow: none !important;
}
.experience-bottom-close-button:hover,
.sheraton-close-row .experience-detail-close:hover {
background: #0b343b !important;
color: #fff !important;
}
/* Sheraton floating X */
.sheraton-modal-close {
position: fixed !important;
top: 52px !important;
right: max(
22px,
calc((100vw - 1180px) / 2 + 22px)
) !important;
z-index: 5000 !important;
display: flex !important;
width: 44px !important;
height: 44px !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(3, 40, 48, .88) !important;
color: white !important;
font-size: 27px !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 5px 18px rgba(0,0,0,.20) !important;
}
@media (max-width: 760px) {
.sheraton-modal-close {
top: 14px !important;
right: 14px !important;
}
.experience-bottom-close-button,
.sheraton-close-row .experience-detail-close {
width: 100% !important;
}
}
/* ============================================================
SHERATON MODAL X — FORCE ABOVE ALL CONTENT
============================================================ */
#closeSheratonExperienceTop {
position: fixed !important;
top: 18px !important;
right: 18px !important;
z-index: 99999 !important;
display: flex !important;
width: 46px !important;
height: 46px !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(3, 40, 48, .92) !important;
color: #ffffff !important;
font-size: 28px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow: 0 5px 18px rgba(0,0,0,.24) !important;
}
#closeSheratonExperienceTop:hover {
background: #0b5962 !important;
}
#sheratonFullExperience[hidden]
#closeSheratonExperienceTop {
display: none !important;
}
/* ============================================================
SHERATON X INSIDE HERO
============================================================ */
.sheraton-editorial-hero {
position: relative !important;
}
#closeSheratonExperienceTop.sheraton-modal-close {
position: absolute !important;
top: 18px !important;
right: 18px !important;
z-index: 50 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(3, 40, 48, .82) !important;
color: #fff !important;
font-size: 26px !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 5px 18px rgba(0,0,0,.22) !important;
}
#closeSheratonExperienceTop.sheraton-modal-close:hover {
background: rgba(3, 40, 48, .95) !important;
}
@media (max-width: 760px) {
#closeSheratonExperienceTop.sheraton-modal-close {
top: 14px !important;
right: 14px !important;
width: 42px !important;
height: 42px !important;
}
}
/* ============================================================
CORAL GRAND — HAPAXORA STAY MODAL
============================================================ */
.coral-property-detail {
padding: 0 !important;
overflow: hidden;
background: #fbfaf6;
}
.coral-property-hero {
position: relative;
min-height: 590px;
overflow: hidden;
background: #073740;
}
.coral-property-hero > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.coral-property-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(3,34,41,.90) 0%,
rgba(3,34,41,.58) 42%,
rgba(3,34,41,.12) 72%,
rgba(3,34,41,.03) 100%
);
}
.coral-property-hero-copy {
position: relative;
z-index: 2;
display: flex;
min-height: 590px;
flex-direction: column;
justify-content: center;
max-width: 670px;
padding: 70px 58px;
}
.coral-property-kicker {
margin: 0 0 15px;
color: rgba(255,255,255,.82);
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
}
.coral-property-kicker.dark {
color: #497175;
}
.coral-property-hero h2 {
margin: 0;
color: #fff;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(3.5rem, 7vw, 6rem);
line-height: .94;
letter-spacing: -.035em;
}
.coral-property-hero-copy > p:not(.coral-property-kicker) {
max-width: 590px;
margin: 24px 0 0;
color: rgba(255,255,255,.94);
font-size: 1rem;
line-height: 1.7;
}
.coral-property-enquire {
align-self: flex-start;
margin-top: 28px;
}
/* ============================================================
PHOTO STORY
============================================================ */
.coral-property-gallery {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-auto-rows: 270px;
gap: 6px;
padding: 6px;
background: #fbfaf6;
}
.coral-photo {
margin: 0;
overflow: hidden;
background: #e6e4de;
}
.coral-photo-wide {
grid-row: span 2;
}
.coral-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
@media (hover:hover) {
.coral-photo:hover img {
transform: scale(1.025);
}
}
/* ============================================================
PROPERTY INFORMATION
============================================================ */
.coral-property-info {
padding: 70px 58px 62px;
background: #fbfaf6;
}
.coral-property-intro {
max-width: 760px;
}
.coral-property-intro h2 {
max-width: 720px;
margin: 0;
color: #103c42;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(2.4rem, 4vw, 4rem);
line-height: 1;
letter-spacing: -.025em;
}
.coral-property-intro > p:last-child {
max-width: 680px;
margin: 22px 0 0;
color: #536468;
line-height: 1.7;
}
.coral-property-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 52px;
border-top: 1px solid #d8dfdc;
border-bottom: 1px solid #d8dfdc;
}
.coral-property-facts article {
padding: 28px 24px;
border-right: 1px solid #d8dfdc;
}
.coral-property-facts article:first-child {
padding-left: 0;
}
.coral-property-facts article:last-child {
border-right: 0;
}
.coral-property-facts span {
display: block;
margin-bottom: 16px;
color: #7b8d8e;
font-size: .68rem;
font-weight: 700;
letter-spacing: .13em;
}
.coral-property-facts h3 {
margin: 0 0 10px;
color: #123d43;
font-size: 1rem;
}
.coral-property-facts p {
margin: 0;
color: #637174;
font-size: .88rem;
line-height: 1.55;
}
/* ============================================================
PARTNER AREA
============================================================ */
.coral-property-partner {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: end;
padding: 55px 58px;
background: #edf1ed;
}
.coral-property-partner h2 {
margin: 0;
color: #123d43;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(2rem, 3vw, 3rem);
}
.coral-property-partner p:last-child {
max-width: 660px;
margin: 15px 0 0;
color: #596a6d;
line-height: 1.65;
}
.coral-property-enquire.dark {
margin: 0;
white-space: nowrap;
}
/* ============================================================
BACK TO STAYS
============================================================ */
.coral-back-row {
display: flex;
justify-content: center;
padding: 32px 58px 42px;
background: #fbfaf6;
}
.coral-back-to-stays {
min-width: 210px;
min-height: 46px;
padding: 11px 20px;
border: 1px solid rgba(11,50,57,.18);
border-radius: 999px;
background: transparent;
color: #0b3239;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.coral-back-to-stays:hover {
background: #0b343b;
color: #fff;
}
/* ============================================================
CORAL GRAND — MOBILE
============================================================ */
@media (max-width: 760px) {
.coral-property-hero,
.coral-property-hero-copy {
min-height: 520px;
}
.coral-property-hero-shade {
background:
linear-gradient(
to top,
rgba(3,34,41,.94) 0%,
rgba(3,34,41,.53) 55%,
rgba(3,34,41,.10) 100%
);
}
.coral-property-hero-copy {
justify-content: flex-end;
padding: 75px 22px 34px;
}
.coral-property-hero h2 {
font-size: 3.2rem;
}
.coral-property-gallery {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 190px;
}
.coral-photo-wide {
grid-column: 1 / -1;
grid-row: auto;
height: 240px;
}
.coral-property-info {
padding: 48px 22px 42px;
}
.coral-property-facts {
grid-template-columns: 1fr;
}
.coral-property-facts article,
.coral-property-facts article:first-child {
padding: 22px 0;
border-right: 0;
border-bottom: 1px solid #d8dfdc;
}
.coral-property-facts article:last-child {
border-bottom: 0;
}
.coral-property-partner {
grid-template-columns: 1fr;
gap: 24px;
padding: 42px 22px;
}
.coral-property-enquire.dark {
width: 100%;
}
.coral-back-row {
padding: 28px 22px 36px;
}
.coral-back-to-stays {
width: 100%;
}
}
/* ============================================================
CORAL GRAND HERO CLOSE
============================================================ */
.coral-property-close {
position: absolute;
top: 18px;
right: 18px;
z-index: 20;
display: flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(3,40,48,.86);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
box-shadow: 0 5px 18px rgba(0,0,0,.22);
}
.coral-property-close:hover {
background: rgba(3,40,48,.98);
}
@media (max-width:760px) {
.coral-property-close {
top: 14px;
right: 14px;
width: 42px;
height: 42px;
}
}
/* ============================================================
CORAL GRAND — REMOVE OLD PROPERTY MODAL SHELL
Match Experience modal presentation
============================================================ */
#propertyModal.coral-property-mode {
padding: 30px 18px !important;
}
/* Outer modal window becomes transparent */
#propertyModal.coral-property-mode .property-modal-window {
width: min(1180px, 100%) !important;
max-width: 1180px !important;
height: auto !important;
max-height: calc(100vh - 60px) !important;
padding: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border: 0 !important;
border-radius: 20px !important;
background: transparent !important;
box-shadow: none !important;
}
/* Remove old white title/header completely */
#propertyModal.coral-property-mode .property-modal-header {
display: none !important;
}
/* Remove padding around the actual Coral content */
#propertyModal.coral-property-mode .property-modal-body {
padding: 0 !important;
background: transparent !important;
}
/* Coral content itself becomes the modal window */
#propertyModal.coral-property-mode #coralDetails {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 20px !important;
overflow: hidden !important;
background: #fbfaf6 !important;
}
/* Keep only the X inside the hero */
#propertyModal.coral-property-mode #propertyModalClose {
display: none !important;
}
/* Mobile */
@media (max-width: 760px) {
#propertyModal.coral-property-mode {
padding: 0 !important;
}
#propertyModal.coral-property-mode .property-modal-window {
width: 100% !important;
max-width: none !important;
height: 100vh !important;
max-height: none !important;
border-radius: 0 !important;
}
#propertyModal.coral-property-mode #coralDetails {
border-radius: 0 !important;
}
}
/* ============================================================
CORAL GRAND HERO — REMOVE LEGACY GRID / SEPARATOR ARTIFACTS
============================================================ */
#coralDetails .coral-property-hero {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background-image: none !important;
}
/* Hero photograph itself */
#coralDetails .coral-property-hero > img {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* Keep only our intended smooth dark shade */
#coralDetails .coral-property-hero-shade {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background-image:
linear-gradient(
90deg,
rgba(3,34,41,.90) 0%,
rgba(3,34,41,.58) 42%,
rgba(3,34,41,.12) 72%,
rgba(3,34,41,.03) 100%
) !important;
}
/* Kill any legacy decorative pseudo-elements */
#coralDetails .coral-property-hero::before,
#coralDetails .coral-property-hero::after,
#coralDetails .coral-property-hero-shade::before,
#coralDetails .coral-property-hero-shade::after,
#coralDetails .coral-property-hero-copy::before,
#coralDetails .coral-property-hero-copy::after {
content: none !important;
display: none !important;
}
/* Remove stray separator borders from hero children */
#coralDetails .coral-property-hero-copy {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* Keep the close button shadow after the cleanup above */
#coralDetails .coral-property-close {
box-shadow: 0 5px 18px rgba(0,0,0,.22) !important;
}
/* ============================================================
CORAL GRAND — REMOVE FIREFOX BACKDROP TILE SEAMS
============================================================ */
#propertyModal.coral-property-mode {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
filter: none !important;
}
/* Avoid forcing separate compositing layers */
#propertyModal.coral-property-mode .property-modal-window,
#propertyModal.coral-property-mode #coralDetails,
#propertyModal.coral-property-mode .coral-property-hero,
#propertyModal.coral-property-mode .coral-property-hero > img,
#propertyModal.coral-property-mode .coral-property-hero-shade {
transform: none !important;
will-change: auto !important;
backface-visibility: visible !important;
}
/* ============================================================
CORAL GRAND — SMOOTH HERO SHADE
Remove visible gradient stop seams
============================================================ */
#coralDetails .coral-property-hero-shade {
background:
linear-gradient(
90deg,
rgba(3,34,41,.90) 0%,
rgba(3,34,41,.04) 100%
) !important;
}
/* ============================================================
CORAL GRAND — CLEAN STAY FACTS
============================================================ */
#coralDetails .coral-property-facts article > span {
display: none !important;
}
#coralDetails .coral-property-facts h3 {
margin-top: 0 !important;
}
/* ============================================================
HTM RENTALS — VISUAL APARTMENT EXPERIENCE
Existing apartment JS/data remain intact
============================================================ */
/* ------------------------------------------------------------
HTM modal shell — match Coral / Experiences
------------------------------------------------------------ */
#propertyModal.htm-property-mode {
padding: 30px 18px !important;
backdrop-filter: none !important;
}
#propertyModal.htm-property-mode .property-modal-window {
position: relative !important;
width: min(1180px, 100%) !important;
max-width: 1180px !important;
max-height: calc(100vh - 60px) !important;
padding: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border: 0 !important;
border-radius: 20px !important;
background: #fbfaf6 !important;
box-shadow: none !important;
}
/* Header becomes only the floating X */
#propertyModal.htm-property-mode .property-modal-header {
position: absolute !important;
top: 16px !important;
right: 16px !important;
z-index: 50 !important;
display: block !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
pointer-events: none;
}
#propertyModal.htm-property-mode .property-modal-heading-group {
display: none !important;
}
#propertyModal.htm-property-mode #propertyModalClose {
display: flex !important;
width: 44px !important;
height: 44px !important;
align-items: center;
justify-content: center;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(3,40,48,.86) !important;
color: #fff !important;
font-size: 26px !important;
box-shadow: 0 5px 18px rgba(0,0,0,.22) !important;
pointer-events: auto;
cursor: pointer;
}
#propertyModal.htm-property-mode .property-modal-body {
padding: 0 !important;
background: transparent !important;
}
#propertyModal.htm-property-mode #htmDetails {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fbfaf6 !important;
}
/* ------------------------------------------------------------
Hero
------------------------------------------------------------ */
.htm-property-hero {
position: relative;
min-height: 560px;
overflow: hidden;
background: #073740;
}
.htm-property-hero > img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.htm-property-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(3,34,41,.90) 0%,
rgba(3,34,41,.04) 100%
);
}
.htm-property-hero-copy {
position: relative;
z-index: 2;
display: flex;
min-height: 560px;
max-width: 690px;
flex-direction: column;
justify-content: center;
padding: 70px 58px;
color: #fff;
}
.htm-property-kicker {
margin: 0 0 16px;
color: rgba(255,255,255,.82);
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
}
.htm-property-hero h2 {
margin: 0;
color: #fff;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(3.5rem, 7vw, 6rem);
line-height: .94;
letter-spacing: -.035em;
}
.htm-property-hero-copy > p:last-child {
max-width: 590px;
margin: 24px 0 0;
color: rgba(255,255,255,.94);
font-size: 1rem;
line-height: 1.7;
}
/* Old intro remains in HTML but not duplicated visually */
#htmDetails .htm-original-intro-hidden {
display: none !important;
}
/* ------------------------------------------------------------
Apartment chooser
------------------------------------------------------------ */
#htmDetails .htm-apartments {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
padding: 48px 48px 58px !important;
background: #fbfaf6 !important;
}
#htmDetails .htm-apartment {
position: relative;
min-width: 0;
margin: 0 !important;
overflow: hidden;
border: 0 !important;
border-radius: 18px !important;
background: #e5e8e5 !important;
box-shadow:
0 10px 28px rgba(8,38,44,.10);
}
/* Existing toggle now becomes the browse card */
#htmDetails
.htm-apartment:not(.is-selected)
> .htm-apartment-toggle {
position: relative;
display: flex !important;
width: 100% !important;
min-height: 390px !important;
align-items: flex-end !important;
padding: 28px !important;
overflow: hidden;
border: 0 !important;
border-radius: 18px !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
color: #fff !important;
text-align: left !important;
cursor: pointer;
}
/* Apartment hero photographs */
#htmDetails
.htm-apartment:nth-child(1)
> .htm-apartment-toggle {
background-image:
linear-gradient(
to top,
rgba(2,31,36,.88) 0%,
rgba(2,31,36,.12) 65%
),
url("/assets/stays/htm-rentals/a701/a701-living-room-01.jpg") !important;
}
#htmDetails
.htm-apartment:nth-child(2)
> .htm-apartment-toggle {
background-image:
linear-gradient(
to top,
rgba(2,31,36,.88) 0%,
rgba(2,31,36,.12) 65%
),
url("/assets/stays/htm-rentals/a207/a207-living-room.jpg") !important;
}
#htmDetails
.htm-apartment:nth-child(3)
> .htm-apartment-toggle {
background-image:
linear-gradient(
to top,
rgba(2,31,36,.88) 0%,
rgba(2,31,36,.12) 65%
),
url("/assets/stays/htm-rentals/a106/a106-living-room.jpg") !important;
}
#htmDetails
.htm-apartment:nth-child(4)
> .htm-apartment-toggle {
background-image:
linear-gradient(
to top,
rgba(2,31,36,.88) 0%,
rgba(2,31,36,.12) 65%
),
url("/assets/stays/htm-rentals/a118/a118-living-room.jpg") !important;
}
/* Apartment name */
#htmDetails
.htm-apartment:not(.is-selected)
.htm-apartment-toggle > span:first-child {
position: relative;
z-index: 2;
display: block;
max-width: 78%;
}
#htmDetails
.htm-apartment:not(.is-selected)
.htm-apartment-toggle strong {
display: block;
color: #fff !important;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.8rem, 3vw, 2.7rem);
line-height: 1.05;
}
#htmDetails
.htm-apartment:not(.is-selected)
.htm-apartment-toggle small {
display: block;
margin-top: 10px;
color: rgba(255,255,255,.88) !important;
font-size: .82rem;
font-weight: 700;
letter-spacing: .06em;
}
/* Remove old + symbol */
#htmDetails
.htm-apartment:not(.is-selected)
.htm-toggle-symbol {
display: none !important;
}
/* Small View apartment label */
#htmDetails
.htm-apartment:not(.is-selected)
> .htm-apartment-toggle::after {
content: "View apartment";
position: absolute;
right: 24px;
bottom: 28px;
z-index: 3;
color: #f4c45e;
font-size: .76rem;
font-weight: 800;
letter-spacing: .05em;
}
/* Selected apartment becomes clean detail screen */
#htmDetails
.htm-apartment.is-selected {
grid-column: 1 / -1 !important;
overflow: visible !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#htmDetails
.htm-apartment.is-selected
> .htm-apartment-toggle {
display: none !important;
}
#htmDetails
.htm-apartment.is-selected
.htm-apartment-content {
padding: 10px 10px 30px !important;
background: #fbfaf6;
}
/* Existing back control now visually consistent */
#htmDetails .apartment-back {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
margin: 12px 0 28px !important;
padding: 11px 22px !important;
border:
1px solid rgba(11,50,57,.18) !important;
border-radius: 999px !important;
background: transparent !important;
color: #0b3239 !important;
font-weight: 700 !important;
}
#htmDetails .apartment-back:hover {
background: #0b343b !important;
color: #fff !important;
}
/* ------------------------------------------------------------
Back to Stays
------------------------------------------------------------ */
.htm-back-row {
display: flex;
justify-content: center;
padding: 32px 48px 42px;
background: #fbfaf6;
}
.htm-back-to-stays {
min-width: 210px;
min-height: 46px;
padding: 11px 20px;
border: 1px solid rgba(11,50,57,.18);
border-radius: 999px;
background: transparent;
color: #0b3239;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.htm-back-to-stays:hover {
background: #0b343b;
color: #fff;
}
/* ============================================================
HTM MOBILE
============================================================ */
@media (max-width: 760px) {
#propertyModal.htm-property-mode {
padding: 0 !important;
}
#propertyModal.htm-property-mode
.property-modal-window {
width: 100% !important;
max-width: none !important;
height: 100vh !important;
max-height: none !important;
border-radius: 0 !important;
}
.htm-property-hero,
.htm-property-hero-copy {
min-height: 520px;
}
.htm-property-hero-shade {
background:
linear-gradient(
to top,
rgba(3,34,41,.94) 0%,
rgba(3,34,41,.10) 100%
);
}
.htm-property-hero-copy {
justify-content: flex-end;
padding: 75px 22px 36px;
}
.htm-property-hero h2 {
font-size: 3.2rem;
}
#htmDetails .htm-apartments {
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 28px 18px 42px !important;
}
#htmDetails
.htm-apartment:not(.is-selected)
> .htm-apartment-toggle {
min-height: 310px !important;
padding: 22px !important;
}
#htmDetails
.htm-apartment:not(.is-selected)
> .htm-apartment-toggle::after {
right: 20px;
bottom: 22px;
}
.htm-back-row {
padding: 26px 20px 36px;
}
.htm-back-to-stays {
width: 100%;
}
}
/* ============================================================
DIVING — PARTNER LIABILITY NOTE
============================================================ */
.diving-liability-note {
margin: 28px 0;
padding: 24px 26px;
border-radius: 16px;
background: #e9e4d8;
color: #17343a;
}
.diving-liability-note strong {
display: block;
margin-bottom: 7px;
font-size: .82rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.diving-liability-note p {
margin: 0;
color: #5e6e71;
line-height: 1.6;
}
/* ============================================================
PADI POPUP NAVIGATION FIX
============================================================ */
/* Keep close button above PADI hero image/overlay */
.padi-close {
z-index: 20;
display: grid;
place-items: center;
line-height: 1;
}
/* Bottom return navigation */
.padi-back-row {
display: flex;
justify-content: center;
margin-top: 42px;
padding-top: 26px;
border-top: 1px solid rgba(10, 52, 60, .14);
}
.padi-back-to-diving {
appearance: none;
border: 1px solid #0a343c;
border-radius: 999px;
background: transparent;
color: #0a343c;
padding: 12px 24px;
font: inherit;
font-weight: 600;
cursor: pointer;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
.padi-back-to-diving:hover {
background: #0a343c;
color: #fff;
transform: translateY(-1px);
}
@media (max-width: 760px) {
.padi-close {
top: 16px;
right: 16px;
}
.padi-back-row {
margin-top: 32px;
}
.padi-back-to-diving {
width: 100%;
}
}
/* ============================================================
DIVING CARDS - POLISHED INTERACTION SYSTEM
============================================================ */
.diving-experience-card {
position: relative;
transform: translateY(0);
transition:
transform .28s cubic-bezier(.2,.7,.2,1),
box-shadow .28s ease;
}
.diving-experience-card img {
transform: scale(1);
transition:
transform .7s cubic-bezier(.2,.7,.2,1),
filter .35s ease;
}
/* Slightly calmer text spacing across all cards */
.diving-experience-copy {
display: flex;
flex-direction: column;
min-height: 205px;
}
.diving-experience-copy p {
flex-grow: 1;
}
/* Desktop / pointer interaction only */
@media (hover: hover) and (pointer: fine) {
.diving-experience-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 44px rgba(10,43,48,.14);
}
.diving-experience-card:hover img {
transform: scale(1.04);
}
}
/* PADI is clickable, so give keyboard users the same feedback */
.diving-course-clickable:focus-visible {
outline: 3px solid rgba(10,52,60,.28);
outline-offset: 4px;
}
/* Keep motion comfortable for users who disable animation */
@media (prefers-reduced-motion: reduce) {
.diving-experience-card,
.diving-experience-card img {
transition: none !important;
transform: none !important;
}
}
/* ============================================================
HAPAXORA DIVING POLISH V1
Clean cards + restrained motion + hero depth
============================================================ */
/* ---------- HERO ---------- */
.diving-hero {
overflow: hidden;
}
.diving-hero img {
--diving-parallax: 0px;
transform:
translate3d(
0,
var(--diving-parallax),
0
)
scale(1.035);
transform-origin: center center;
transition:
filter .35s ease;
will-change: transform;
}
/* Gentle entrance when Diving opens */
@keyframes divingHeroCopyIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.diving-modal:not([hidden])
.diving-hero-copy {
animation:
divingHeroCopyIn
.55s
cubic-bezier(.2,.7,.2,1)
both;
}
/* ---------- CARDS ---------- */
.diving-experience-card {
position: relative;
border:
1px solid
rgba(10,52,60,.07);
transform:
translate3d(0,0,0);
transition:
transform
.28s
cubic-bezier(.2,.7,.2,1),
box-shadow
.28s ease,
border-color
.28s ease;
}
.diving-experience-card img {
transform:
scale(1);
transition:
transform
.7s
cubic-bezier(.2,.7,.2,1),
filter
.35s ease;
}
/* Keep card copy visually balanced */
.diving-experience-card:not(
.diving-course-card
)
.diving-experience-copy {
display: flex;
flex-direction: column;
min-height: 215px;
}
.diving-experience-card:not(
.diving-course-card
)
.diving-experience-copy > p:not(
.diving-card-kicker
) {
flex-grow: 1;
}
/* Product fact / qualification */
.diving-experience-copy > span {
align-self: flex-start;
padding:
7px
10px;
border-radius:
999px;
background:
rgba(10,52,60,.055);
color:
#0a343c;
}
/* ---------- POINTER HOVER ---------- */
@media
(hover: hover)
and
(pointer: fine) {
.diving-experience-card:hover {
transform:
translate3d(
0,
-4px,
0
);
border-color:
rgba(10,52,60,.14);
box-shadow:
0
18px
44px
rgba(10,43,48,.14);
}
.diving-experience-card:hover img {
transform:
scale(1.04);
}
.diving-experience-card:hover
.diving-experience-copy > span {
background:
rgba(10,52,60,.09);
}
}
/* ---------- PADI CLICKABLE CARD ---------- */
.diving-course-clickable {
transition:
transform
.28s
cubic-bezier(.2,.7,.2,1),
box-shadow
.28s ease,
border-color
.28s ease;
}
.diving-course-clickable:focus-visible {
outline:
3px solid
rgba(10,52,60,.25);
outline-offset:
4px;
}
/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
.diving-experience-card:not(
.diving-course-card
)
.diving-experience-copy {
min-height: 0;
}
}
/* ---------- REDUCED MOTION ---------- */
@media
(prefers-reduced-motion: reduce) {
.diving-hero img,
.diving-hero-copy,
.diving-experience-card,
.diving-experience-card img,
.diving-course-clickable {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* ============================================================
HAPAXORA PACKAGE CARDS
============================================================ */
.package-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
margin-top: 34px;
}
.package-list-card {
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(10,52,60,.07);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(10,43,48,.08);
cursor: pointer;
transform: translateY(0);
transition:
transform .28s cubic-bezier(.2,.7,.2,1),
box-shadow .28s ease,
border-color .28s ease;
}
.package-list-image {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: #dfe9ea;
}
.package-list-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1);
transition:
transform .7s cubic-bezier(.2,.7,.2,1);
}
.package-list-badge {
position: absolute;
top: 16px;
left: 16px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(4,31,37,.82);
color: #ffffff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.2;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.package-list-info {
display: flex;
flex-direction: column;
min-height: 310px;
padding: 26px;
}
.package-list-kicker {
margin: 0 0 8px;
color: #77705d;
font-size: .74rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
.package-list-info h3 {
margin: 0 0 12px;
color: #0a343c;
font-size: 1.55rem;
}
.package-list-summary {
flex-grow: 1;
margin: 0 0 22px;
line-height: 1.6;
}
.package-list-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
.package-list-facts span {
padding: 7px 10px;
border-radius: 999px;
background: rgba(10,52,60,.055);
color: #0a343c;
font-size: .74rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.package-list-button {
align-self: flex-start;
}
.package-list-card:focus-visible {
outline: 3px solid rgba(10,52,60,.25);
outline-offset: 4px;
}
@media (hover:hover) and (pointer:fine) {
.package-list-card:hover {
transform: translateY(-4px);
border-color: rgba(10,52,60,.14);
box-shadow: 0 18px 44px rgba(10,43,48,.14);
}
.package-list-card:hover .package-list-image img {
transform: scale(1.04);
}
}
@media (max-width: 760px) {
.package-card-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.package-list-image {
height: 230px;
}
.package-list-info {
min-height: 0;
padding: 20px;
}
.package-list-button {
width: 100%;
min-height: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
.package-list-card,
.package-list-image img {
transition: none !important;
transform: none !important;
}
}
/* ============================================================
HAPAXORA PACKAGE DETAIL POPUP
============================================================ */
body.package-detail-open {
overflow: hidden;
}
.package-detail-overlay[hidden] {
display: none !important;
}
.package-detail-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 26px;
overflow-y: auto;
background: rgba(3, 24, 29, .72);
backdrop-filter: blur(10px);
opacity: 0;
transition:
opacity .22s ease;
}
.package-detail-overlay.is-open {
opacity: 1;
}
.package-detail-modal {
position: relative;
width: min(1120px, 100%);
max-height: calc(100vh - 52px);
overflow-y: auto;
background: #ffffff;
border: 1px solid rgba(255,255,255,.14);
border-radius: 24px;
box-shadow:
0 30px 90px rgba(0,0,0,.28);
transform:
translateY(14px)
scale(.99);
opacity: 0;
transition:
transform .25s cubic-bezier(.2,.7,.2,1),
opacity .22s ease;
}
.package-detail-overlay.is-open
.package-detail-modal {
transform:
translateY(0)
scale(1);
opacity: 1;
}
.package-detail-close {
position: absolute;
top: 18px;
right: 18px;
z-index: 5;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(4,31,37,.82);
color: #ffffff;
font-size: 1.65rem;
line-height: 1;
cursor: pointer;
backdrop-filter: blur(8px);
transition:
transform .2s ease,
background .2s ease;
}
.package-detail-close:hover {
transform: scale(1.05);
background: #0a343c;
}
.package-detail-close:focus-visible {
outline: 3px solid rgba(255,255,255,.8);
outline-offset: 3px;
}
.package-detail-shell {
min-height: 680px;
}
.package-detail-placeholder-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: 390px;
padding: 34px;
overflow: hidden;
border-radius:
24px
24px
0
0;
background:
linear-gradient(
135deg,
#0a343c,
#155f69
);
color: rgba(255,255,255,.72);
}
.package-detail-placeholder-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 75% 35%,
rgba(255,255,255,.14),
transparent 32%
);
}
.package-detail-placeholder-hero span {
position: relative;
font-size: .76rem;
font-weight: 700;
letter-spacing: .13em;
}
.package-detail-content {
padding: 42px;
}
.package-detail-kicker {
margin: 0 0 9px;
color: #77705d;
font-size: .76rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.package-detail-content h2 {
margin: 0 0 18px;
color: #0a343c;
font-size:
clamp(2rem, 5vw, 3.25rem);
line-height: 1.05;
}
.package-detail-intro {
max-width: 720px;
margin:
0
0
28px;
color: #42565a;
font-size: 1.03rem;
line-height: 1.7;
}
.package-detail-facts {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 24px;
}
.package-detail-facts span {
padding: 8px 12px;
border-radius: 999px;
background: rgba(10,52,60,.065);
color: #0a343c;
font-size: .76rem;
font-weight: 700;
letter-spacing: .035em;
text-transform: uppercase;
}
.package-detail-build-note {
display: flex;
flex-direction: column;
gap: 5px;
margin:
12px
0
34px;
padding: 22px;
border:
1px solid
rgba(10,52,60,.08);
border-radius: 16px;
background:
rgba(10,52,60,.035);
color: #42565a;
}
.package-detail-build-note strong {
color: #0a343c;
}
.package-detail-back {
min-height: 48px;
}
@media (max-width: 760px) {
.package-detail-overlay {
align-items: start;
padding:
12px;
}
.package-detail-modal {
max-height:
calc(100vh - 24px);
border-radius: 18px;
}
.package-detail-placeholder-hero {
min-height: 250px;
padding: 22px;
border-radius:
18px
18px
0
0;
}
.package-detail-close {
top: 12px;
right: 12px;
width: 42px;
height: 42px;
}
.package-detail-content {
padding:
28px
20px
24px;
}
.package-detail-back {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.package-detail-overlay,
.package-detail-modal,
.package-detail-close {
transition: none !important;
}
}
/* ============================================================
FIRST DIVE ESCAPE · PACKAGE DETAIL
============================================================ */
.package-detail-modal {
width: min(1380px, calc(100% - 20px));
background: #f7faf9;
}
.package-detail-shell {
min-height: 0;
}
.package-experience-hero {
position: relative;
min-height: 390px;
display: flex;
align-items: flex-end;
overflow: hidden;
padding: 42px 48px;
border-radius: 24px 24px 0 0;
background: linear-gradient(135deg, #0a343c, #155f69);
background-position: center;
background-size: cover;
color: #ffffff;
}
.package-experience-hero-content {
position: relative;
z-index: 2;
width: min(680px, 70%);
}
.package-experience-hero .package-detail-kicker {
color: rgba(255,255,255,.82);
margin-bottom: 12px;
}
.package-experience-hero #packageDetailTitle {
margin: 0 0 22px;
color: #ffffff;
font-size: clamp(2.8rem, 6vw, 5.4rem);
line-height: .97;
letter-spacing: -.035em;
}
.package-experience-hero .package-detail-intro {
max-width: 650px;
margin: 22px 0 0;
color: rgba(255,255,255,.92);
font-size: 1.04rem;
line-height: 1.65;
}
.package-experience-hero .package-detail-facts {
gap: 10px;
margin: 0;
}
.package-experience-hero .package-detail-facts span {
padding: 9px 13px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(0,20,25,.30);
color: #ffffff;
backdrop-filter: blur(7px);
}
.first-dive-detail {
padding: 28px 30px 24px;
background: #ffffff;
}
.first-dive-main-grid {
display: grid;
grid-template-columns:
minmax(250px, .9fr)
minmax(420px, 1.25fr)
minmax(270px, .85fr);
gap: 26px;
align-items: start;
}
.first-dive-section {
padding-bottom: 26px;
}
.first-dive-section + .first-dive-section {
padding-top: 24px;
border-top: 1px solid rgba(10,52,60,.09);
}
.first-dive-section h3,
.first-dive-stay-card h3,
.first-dive-lower-panel h3 {
margin: 0 0 14px;
color: #0a343c;
font-size: 1.18rem;
}
.first-dive-inclusions {
display: grid;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
.first-dive-inclusions li {
display: flex;
align-items: flex-start;
gap: 10px;
color: #344b50;
font-size: .94rem;
line-height: 1.45;
}
.first-dive-check {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 50%;
background: #0a5260;
color: #ffffff;
font-size: .72rem;
font-weight: 800;
}
.first-dive-for p {
margin: 0;
color: #536469;
font-size: .94rem;
line-height: 1.65;
}
.first-dive-dive-gallery {
display: grid;
grid-template-columns:
minmax(0, 1.35fr)
minmax(150px, .8fr);
gap: 10px;
}
.first-dive-dive-gallery figure {
margin: 0;
}
.first-dive-gallery-main,
.first-dive-gallery-side figure {
position: relative;
overflow: hidden;
border-radius: 13px;
background: #dce8e8;
}
.first-dive-gallery-main {
min-height: 420px;
}
.first-dive-gallery-side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 10px;
}
.first-dive-gallery-side figure {
min-height: 205px;
}
.first-dive-dive-gallery img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.first-dive-dive-gallery figcaption {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
padding: 8px 10px;
border-radius: 9px;
background: rgba(2,31,37,.70);
color: #ffffff;
font-size: .73rem;
line-height: 1.35;
backdrop-filter: blur(6px);
}
.first-dive-stay-card {
padding: 18px;
border: 1px solid rgba(10,52,60,.07);
border-radius: 17px;
background: linear-gradient(180deg, #f5f8f7, #eef4f3);
}
.first-dive-stay-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.first-dive-stay-heading h3 {
margin: 3px 0 0;
font-size: 1rem;
}
.first-dive-stay-label,
.first-dive-small-label {
margin: 0;
color: #77705d;
font-size: .68rem;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
}
.first-dive-stay-tag {
padding: 5px 8px;
border-radius: 999px;
background: rgba(10,52,60,.07);
color: #0a343c;
font-size: .65rem;
font-weight: 700;
}
.first-dive-stay-slider {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 12px;
background: #dfe9e8;
}
.first-dive-stay-track {
display: flex;
width: 100%;
transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.first-dive-stay-slide {
position: relative;
flex: 0 0 100%;
aspect-ratio: 4 / 3;
}
.first-dive-stay-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.first-dive-stay-slide span {
position: absolute;
left: 10px;
bottom: 10px;
padding: 7px 9px;
border-radius: 8px;
background: rgba(4,31,37,.72);
color: #ffffff;
font-size: .68rem;
backdrop-filter: blur(6px);
}
.first-dive-stay-arrow {
position: absolute;
top: 50%;
z-index: 3;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: rgba(4,44,53,.88);
color: #ffffff;
font-size: 1.45rem;
cursor: pointer;
transform: translateY(-50%);
}
.first-dive-stay-prev {
left: 10px;
}
.first-dive-stay-next {
right: 10px;
}
.first-dive-stay-prev.is-muted {
opacity: .28;
}
.first-dive-stay-dots {
display: flex;
justify-content: center;
gap: 6px;
padding: 10px 0 4px;
}
.first-dive-stay-dots button {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(10,52,60,.24);
cursor: pointer;
}
.first-dive-stay-dots button.is-active {
background: #0a5260;
}
.first-dive-stay-copy {
margin: 11px 0 13px;
color: #536469;
font-size: .84rem;
line-height: 1.55;
}
.first-dive-stay-facts {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.first-dive-stay-facts span {
padding: 6px 8px;
border-radius: 999px;
background: #ffffff;
color: #0a343c;
font-size: .65rem;
font-weight: 700;
}
.first-dive-lower-panel {
display: grid;
grid-template-columns:
minmax(0, 1.65fr)
minmax(240px, .75fr)
minmax(200px, .55fr);
gap: 28px;
margin-top: 26px;
padding: 24px;
border-radius: 17px;
background: linear-gradient(135deg, #f4f8f7, #edf4f3);
}
.first-dive-section-heading {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 23px;
}
.first-dive-section-heading h3 {
margin: 3px 0 0;
}
.first-dive-section-heading > span {
max-width: 260px;
color: #718085;
font-size: .74rem;
line-height: 1.45;
}
.first-dive-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.first-dive-timeline::before {
content: "";
position: absolute;
top: 14px;
left: 12.5%;
right: 12.5%;
height: 1px;
background: rgba(10,52,60,.28);
}
.first-dive-day {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
}
.first-dive-day-number {
display: grid;
place-items: center;
width: 29px;
height: 29px;
margin-bottom: 6px;
border-radius: 50%;
background: #083d48;
color: #ffffff;
font-size: .72rem;
font-weight: 800;
}
.first-dive-day strong {
color: #0a343c;
font-size: .82rem;
}
.first-dive-day span {
color: #66777b;
font-size: .69rem;
line-height: 1.35;
}
.first-dive-transport {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
padding-left: 24px;
border-left: 1px solid rgba(10,52,60,.15);
}
.first-dive-transport-icon {
font-size: 1.4rem;
}
.first-dive-transport h3 {
margin: 3px 0 8px;
font-size: .98rem;
}
.first-dive-transport p:not(.first-dive-small-label) {
margin: 0;
color: #617277;
font-size: .75rem;
line-height: 1.5;
}
.first-dive-transport-photo-placeholder {
height: 40px;
margin-top: 12px;
border: 1px dashed rgba(10,52,60,.18);
border-radius: 9px;
background: rgba(255,255,255,.42);
}
.first-dive-actions {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.first-dive-plan {
min-height: 48px;
background: #07515f;
}
.first-dive-actions .package-detail-back {
min-height: 46px;
background: transparent;
border: 1px solid rgba(10,52,60,.24);
color: #0a343c;
}
.first-dive-footnote {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 17px 4px 0;
color: #7b898d;
font-size: .67rem;
line-height: 1.4;
}
.package-generic-detail[hidden],
.first-dive-detail[hidden] {
display: none !important;
}
@media (max-width: 1100px) {
.first-dive-main-grid {
grid-template-columns: 1fr 1.3fr;
}
.first-dive-stay-card {
grid-column: 1 / -1;
}
.first-dive-lower-panel {
grid-template-columns: 1fr .65fr;
}
.first-dive-actions {
grid-column: 1 / -1;
flex-direction: row;
}
}
@media (max-width: 760px) {
.package-detail-overlay {
padding: 8px;
}
.package-detail-modal {
width: 100%;
max-height: calc(100vh - 16px);
border-radius: 18px;
}
.package-experience-hero {
min-height: 420px;
padding: 80px 22px 25px;
border-radius: 18px 18px 0 0;
background-position: 60% center;
}
.package-experience-hero-content {
width: 100%;
}
.first-dive-detail {
padding: 18px 14px;
}
.first-dive-main-grid {
grid-template-columns: 1fr;
}
.first-dive-dive-gallery {
grid-template-columns: 1fr;
}
.first-dive-gallery-main {
min-height: 300px;
}
.first-dive-gallery-side {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.first-dive-gallery-side figure {
min-height: 160px;
}
.first-dive-lower-panel {
grid-template-columns: 1fr;
}
.first-dive-section-heading {
flex-direction: column;
}
.first-dive-timeline {
grid-template-columns: 1fr 1fr;
}
.first-dive-timeline::before {
display: none;
}
.first-dive-transport {
padding: 18px 0 0;
border-left: 0;
border-top: 1px solid rgba(10,52,60,.12);
}
.first-dive-actions {
flex-direction: column;
}
.first-dive-footnote {
flex-direction: column;
}
}
/* ============================================================
FIRST DIVE ESCAPE · DREAM LAYOUT
============================================================ */
.package-detail-modal {
width: min(1420px, calc(100% - 26px));
}
.package-experience-hero {
min-height: 375px;
padding:
68px
58px
32px;
}
.package-experience-hero-content {
width: min(690px, 57%);
}
.package-experience-hero #packageDetailTitle {
font-family: Georgia, "Times New Roman", serif;
font-size:
clamp(3rem, 5.2vw, 5.2rem);
font-weight: 600;
}
.package-experience-hero .package-detail-facts {
display: none;
}
.package-experience-hero .package-detail-intro {
margin-top: 28px;
max-width: 650px;
font-size: 1.02rem;
}
/* top facts */
.dream-package-facts {
display: flex;
gap: 44px;
padding:
22px
44px
0;
background: #ffffff;
}
.dream-package-fact {
display: flex;
align-items: center;
gap: 12px;
min-width: 180px;
}
.dream-fact-icon {
font-size: 2rem;
color: #0a4a58;
}
.dream-package-fact div {
display: flex;
flex-direction: column;
gap: 2px;
}
.dream-package-fact strong {
color: #0c2630;
font-size: .80rem;
letter-spacing: .035em;
}
.dream-package-fact span:not(.dream-fact-icon) {
color: #53656a;
font-size: .76rem;
}
/* main white body */
.first-dive-detail {
padding:
0
38px
24px;
background: #ffffff;
}
.dream-main-grid {
display: grid;
grid-template-columns:
minmax(260px, .92fr)
minmax(490px, 1.45fr)
minmax(300px, .92fr);
gap: 26px;
padding-top: 24px;
align-items: start;
}
/* inclusions */
.dream-inclusions h3,
.dream-stay-card h3,
.dream-lower-panel h3 {
margin: 0;
color: #102b35;
font-size: 1.18rem;
}
.dream-inclusions ul {
display: grid;
gap: 10px;
margin:
15px
0
30px;
padding: 0;
list-style: none;
}
.dream-inclusions li {
display: flex;
gap: 10px;
align-items: flex-start;
color: #344a50;
font-size: .90rem;
line-height: 1.45;
}
.dream-inclusions li span {
display: grid;
place-items: center;
width: 21px;
height: 21px;
flex: 0 0 21px;
border-radius: 50%;
background: #0c5864;
color: #ffffff;
font-size: .69rem;
font-weight: 800;
}
.dream-who {
padding-top: 25px;
border-top:
1px solid
rgba(10,52,60,.10);
}
.dream-who p {
margin:
13px
0
0;
color: #53646a;
line-height: 1.65;
font-size: .90rem;
}
/* editorial gallery */
.dream-dive-gallery {
display: grid;
grid-template-columns:
1.25fr
.9fr;
gap: 10px;
}
.dream-dive-gallery figure {
margin: 0;
}
.dream-photo-large,
.dream-photo-stack figure {
position: relative;
overflow: hidden;
background: #dce9e9;
}
.dream-photo-large {
height: 410px;
}
.dream-photo-stack {
display: grid;
grid-template-rows:
1fr
1fr;
gap: 10px;
height: 410px;
}
.dream-dive-gallery img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dream-dive-gallery figcaption {
padding-top: 7px;
color: #31484e;
font-size: .70rem;
line-height: 1.35;
background: #ffffff;
}
.dream-photo-large img {
height: calc(100% - 28px);
}
.dream-photo-stack figure img {
height: calc(100% - 26px);
}
/* stay card */
.dream-stay-card {
padding: 18px;
border-radius: 15px;
background:
linear-gradient(
180deg,
#f5f8f7,
#eff4f3
);
}
.dream-stay-name {
margin:
4px
0
10px;
color: #465a60;
font-size: .78rem;
}
.dream-stay-slider {
position: relative;
overflow: hidden;
border-radius: 8px;
background: #dfe8e8;
}
.dream-stay-track {
display: flex;
transition:
transform .32s
cubic-bezier(.2,.7,.2,1);
}
.dream-stay-track figure {
flex: 0 0 100%;
margin: 0;
aspect-ratio: 16 / 10;
}
.dream-stay-track img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.dream-stay-arrow {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
display: grid;
place-items: center;
transform:
translateY(-50%);
border: 0;
border-radius: 50%;
background:
rgba(4,52,62,.92);
color: #ffffff;
cursor: pointer;
font-size: 1.15rem;
}
.dream-stay-prev {
left: 9px;
}
.dream-stay-next {
right: 9px;
}
.dream-stay-dots {
display: flex;
justify-content: center;
gap: 5px;
padding:
8px
0
9px;
}
.dream-stay-dots button {
width: 6px;
height: 6px;
padding: 0;
border: 0;
border-radius: 50%;
background:
rgba(10,52,60,.22);
}
.dream-stay-dots button.is-active {
background: #0b5764;
}
.dream-stay-description {
margin:
4px
0
0;
color: #52656b;
font-size: .79rem;
line-height: 1.55;
}
/* lower panel */
.dream-lower-panel {
display: grid;
grid-template-columns:
minmax(0, 1.65fr)
minmax(230px, .75fr)
minmax(220px, .62fr);
gap: 28px;
margin-top: 28px;
padding: 22px 26px;
border-radius: 15px;
background:
linear-gradient(
90deg,
#f3f7f6,
#eef4f3
);
}
.dream-itinerary-line {
position: relative;
display: grid;
grid-template-columns:
repeat(4, 1fr);
margin-top: 18px;
}
.dream-itinerary-line::before {
content: "";
position: absolute;
top: 13px;
left: 12%;
right: 12%;
height: 1px;
background:
rgba(8,58,70,.38);
}
.dream-day {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
}
.dream-day-number {
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-bottom: 3px;
border-radius: 50%;
background: #083e4a;
color: #ffffff;
font-size: .68rem;
font-weight: 800;
}
.dream-day strong {
color: #102e37;
font-size: .79rem;
}
.dream-day small {
color: #66777c;
font-size: .67rem;
line-height: 1.42;
}
/* transport */
.dream-transport {
display: grid;
grid-template-columns:
36px
1fr;
gap: 12px;
padding-left: 24px;
border-left:
1px solid
rgba(8,58,70,.18);
}
.dream-transport-icon {
font-size: 1.55rem;
color: #0a4755;
}
.dream-transport p {
margin:
10px
0
0;
color: #607277;
font-size: .75rem;
line-height: 1.5;
}
/* actions */
.dream-actions {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.dream-plan {
min-height: 50px;
border-radius: 999px;
background: #075461;
color: #ffffff;
}
.dream-back {
min-height: 46px;
background: transparent;
border:
1px solid
rgba(8,58,70,.28);
color: #17353d;
}
/* trust footer */
.dream-trust-strip {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 24px;
margin-top: 14px;
padding:
15px
4px
0;
border-top:
1px solid
rgba(10,52,60,.08);
}
.dream-trust-strip > div {
display: flex;
flex-direction: column;
gap: 3px;
}
.dream-trust-strip strong {
color: #31464b;
font-size: .67rem;
}
.dream-trust-strip span {
color: #849095;
font-size: .58rem;
}
.dream-hapaxora-mark {
text-align: right;
}
.dream-hapaxora-mark strong {
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 1.25rem;
}
.dream-hapaxora-mark span {
letter-spacing: .16em;
}
/* responsive */
@media (max-width: 1080px) {
.dream-main-grid {
grid-template-columns:
1fr
1.35fr;
}
.dream-stay-card {
grid-column:
1 / -1;
}
.dream-lower-panel {
grid-template-columns:
1fr
.75fr;
}
.dream-actions {
grid-column:
1 / -1;
flex-direction: row;
}
}
@media (max-width: 760px) {
.package-experience-hero-content {
width: 100%;
}
.dream-package-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
padding:
18px
16px
0;
}
.first-dive-detail {
padding:
0
14px
18px;
}
.dream-main-grid {
grid-template-columns: 1fr;
}
.dream-dive-gallery {
grid-template-columns: 1fr;
}
.dream-photo-large {
height: 310px;
}
.dream-photo-stack {
grid-template-columns:
1fr
1fr;
grid-template-rows: 1fr;
height: 190px;
}
.dream-lower-panel {
grid-template-columns: 1fr;
}
.dream-itinerary-line {
grid-template-columns:
1fr
1fr;
gap: 24px 12px;
}
.dream-itinerary-line::before {
display: none;
}
.dream-transport {
padding:
20px
0
0;
border-left: 0;
border-top:
1px solid
rgba(8,58,70,.12);
}
.dream-actions {
flex-direction: column;
}
.dream-trust-strip {
grid-template-columns:
1fr
1fr;
}
}
/* ============================================================
FIRST DIVE · FINAL HERO MATCH
============================================================ */
.package-experience-hero {
min-height: 380px;
padding:
64px
58px
30px;
background-size: cover;
/* keeps the diver/fish on the right like the 3:10 reference */
background-position:
66% center;
}
.package-experience-hero-content {
width: min(690px, 56%);
}
.package-experience-hero.is-first-dive {
position: relative;
}
.package-experience-hero.is-first-dive::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(1,24,30,.94) 0%,
rgba(1,28,34,.84) 26%,
rgba(1,30,36,.58) 47%,
rgba(1,30,36,.18) 67%,
rgba(1,30,36,.02) 100%
);
}
.package-experience-hero.is-first-dive
.package-experience-hero-content {
position: relative;
z-index: 2;
}
.package-experience-hero.is-first-dive
.package-detail-kicker {
color: rgba(255,255,255,.92);
font-size: .76rem;
letter-spacing: .13em;
}
.package-experience-hero.is-first-dive
#packageDetailTitle {
max-width: 640px;
margin:
10px
0
22px;
color: #ffffff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(3.2rem, 5.4vw, 5.35rem);
font-weight: 600;
line-height: .98;
letter-spacing: -.035em;
}
.package-experience-hero.is-first-dive
.package-detail-intro {
max-width: 620px;
color: rgba(255,255,255,.93);
font-size: 1.02rem;
line-height: 1.6;
}
@media (max-width: 760px) {
.package-experience-hero {
background-position:
72% center;
}
.package-experience-hero-content {
width: 100%;
}
.package-experience-hero.is-first-dive::after {
background:
linear-gradient(
90deg,
rgba(1,24,30,.92) 0%,
rgba(1,24,30,.76) 50%,
rgba(1,24,30,.25) 100%
);
}
}
/* ============================================================
FIRST DIVE · HERO FACT BLOCKS
============================================================ */
.first-dive-detail > .dream-package-facts {
display: none !important;
}
/* restore facts inside the actual hero */
.package-experience-hero.is-first-dive
.package-detail-facts {
display: flex !important;
align-items: center;
flex-wrap: nowrap;
gap: 38px;
margin:
22px
0
26px;
}
.package-experience-hero.is-first-dive
.package-detail-facts > span {
position: relative;
display: grid;
grid-template-columns:
42px
auto;
grid-template-rows:
auto
auto;
column-gap: 10px;
align-items: center;
min-width: 170px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #ffffff;
backdrop-filter: none;
text-transform: none;
}
/* icons */
.package-experience-hero.is-first-dive
.package-detail-facts > span::before {
grid-column: 1;
grid-row: 1 / 3;
display: grid;
place-items: center;
width: 38px;
height: 38px;
color: #ffffff;
font-size: 2rem;
font-weight: 300;
line-height: 1;
}
.package-experience-hero.is-first-dive
.package-detail-facts > span:nth-child(1)::before {
content: "☾";
}
.package-experience-hero.is-first-dive
.package-detail-facts > span:nth-child(2)::before {
content: "≋";
}
.package-experience-hero.is-first-dive
.package-detail-facts > span:nth-child(3)::before {
content: "✈";
}
/* fact title */
.package-experience-hero.is-first-dive
.package-detail-facts strong {
grid-column: 2;
grid-row: 1;
color: #ffffff;
font-size: .78rem;
font-weight: 800;
letter-spacing: .045em;
line-height: 1.15;
}
/* fact subtitle */
.package-experience-hero.is-first-dive
.package-detail-facts small {
grid-column: 2;
grid-row: 2;
margin-top: 2px;
color: rgba(255,255,255,.88);
font-size: .77rem;
font-weight: 400;
line-height: 1.2;
}
/* hero paragraph matching reference */
.package-experience-hero.is-first-dive
.package-detail-intro {
max-width: 625px;
margin-top: 0;
font-size: .99rem;
line-height: 1.58;
color: rgba(255,255,255,.94);
}
@media (max-width: 760px) {
.package-experience-hero.is-first-dive
.package-detail-facts {
display: grid !important;
grid-template-columns:
1fr
1fr;
gap:
16px
12px;
}
.package-experience-hero.is-first-dive
.package-detail-facts > span {
min-width: 0;
}
.package-experience-hero.is-first-dive
.package-detail-facts > span:nth-child(3) {
grid-column:
1 / -1;
}
}
/* ============================================================
PACKAGE → HTM CONTEXTUAL NAVIGATION
============================================================ */
.dream-view-apartment {
display: inline-flex;
align-items: center;
margin-top: 15px;
padding:
3px
0;
border: 0;
border-bottom:
1px solid
rgba(8,58,70,.42);
background: transparent;
color: #123b45;
font: inherit;
font-size: .79rem;
font-weight: 700;
line-height: 1.3;
cursor: pointer;
}
.dream-view-apartment:hover {
color: #067083;
border-color: #067083;
}
.dream-view-apartment:focus-visible {
outline:
3px solid
rgba(8,88,102,.18);
outline-offset: 4px;
}
.package-return-row[hidden] {
display: none !important;
}
.package-return-row {
margin-bottom: 18px;
}
.package-return-button {
display: inline-flex;
align-items: center;
min-height: 42px;
padding:
8px
14px;
border:
1px solid
rgba(10,52,60,.14);
border-radius: 999px;
background: #ffffff;
color: #0a3e49;
font: inherit;
font-size: .79rem;
font-weight: 700;
cursor: pointer;
box-shadow:
0 5px 16px
rgba(10,43,48,.06);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.package-return-button:hover {
transform:
translateY(-1px);
border-color:
rgba(10,52,60,.28);
box-shadow:
0 8px 20px
rgba(10,43,48,.09);
}
@media (max-width: 760px) {
.dream-view-apartment {
min-height: 42px;
}
.package-return-button {
width: 100%;
justify-content: center;
}
}
/* ============================================================
OBJECTIVE 8 · HTM MINI-SLIDER FINAL POLISH
============================================================ */
.dream-stay-slider {
touch-action: pan-y;
box-shadow:
0 8px 22px
rgba(9,48,56,.08);
}
.dream-stay-track {
will-change: transform;
transition:
transform .28s
cubic-bezier(.22,.68,.28,1);
}
.dream-stay-track figure {
overflow: hidden;
}
.dream-stay-arrow {
z-index: 3;
opacity: .92;
box-shadow:
0 4px 13px
rgba(0,0,0,.16);
transition:
opacity .18s ease,
transform .18s ease,
background .18s ease;
}
.dream-stay-arrow:hover:not(:disabled) {
background:
rgba(4,52,62,.98);
transform:
translateY(-50%)
scale(1.04);
}
.dream-stay-arrow.is-hidden,
.dream-stay-arrow:disabled {
opacity: 0;
pointer-events: none;
}
.dream-stay-dots button {
cursor: pointer;
transition:
transform .18s ease,
background .18s ease;
}
.dream-stay-dots button.is-active {
transform: scale(1.2);
}
@media (max-width: 760px) {
.dream-stay-arrow {
width: 34px;
height: 34px;
opacity: .96;
}
}
/* ============================================================
REEF DIVER · FIVE-DAY ITINERARY
============================================================ */
.dream-itinerary-line.is-five-day {
grid-template-columns:
repeat(5, 1fr);
}
.dream-itinerary-line.is-five-day::before {
left: 10%;
right: 10%;
}
@media (max-width: 760px) {
.dream-itinerary-line.is-five-day {
grid-template-columns:
1fr;
}
}
/* ============================================================
ADVENTURE DIVER · SIX-DAY ITINERARY
============================================================ */
.dream-itinerary-line.is-six-day {
grid-template-columns:
repeat(6, 1fr);
}
.dream-itinerary-line.is-six-day::before {
left: 8%;
right: 8%;
}
.dream-itinerary-line.is-six-day
.dream-day small {
font-size: .64rem;
}
@media (max-width: 900px) {
.dream-itinerary-line.is-six-day {
grid-template-columns:
repeat(3, 1fr);
row-gap: 24px;
}
.dream-itinerary-line.is-six-day::before {
display: none;
}
}
@media (max-width: 600px) {
.dream-itinerary-line.is-six-day {
grid-template-columns:
1fr;
}
}
/* ============================================================
DIVE WEEK · EIGHT-DAY ITINERARY
============================================================ */
.dream-itinerary-line.is-eight-day {
grid-template-columns:
repeat(8, 1fr);
}
.dream-itinerary-line.is-eight-day::before {
left: 6%;
right: 6%;
}
.dream-itinerary-line.is-eight-day
.dream-day strong {
font-size: .72rem;
}
.dream-itinerary-line.is-eight-day
.dream-day small {
font-size: .59rem;
}
@media (max-width: 1100px) {
.dream-itinerary-line.is-eight-day {
grid-template-columns:
repeat(4, 1fr);
row-gap: 25px;
}
.dream-itinerary-line.is-eight-day::before {
display: none;
}
}
@media (max-width: 650px) {
.dream-itinerary-line.is-eight-day {
grid-template-columns:
repeat(2, 1fr);
}
}
@media (max-width: 430px) {
.dream-itinerary-line.is-eight-day {
grid-template-columns:
1fr;
}
}
/* ============================================================
OBJECTIVE 12A · PARTNER ACCESS
============================================================ */
.partner-access-nav {
padding: 8px 13px;
border:
1px solid
rgba(255,255,255,.28);
border-radius: 999px;
background:
rgba(255,255,255,.06);
color: inherit;
font: inherit;
font-size: .84rem;
font-weight: 600;
cursor: pointer;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease;
}
.partner-access-nav:hover {
background:
rgba(255,255,255,.13);
border-color:
rgba(255,255,255,.48);
transform:
translateY(-1px);
}
.partner-panel-actions {
display: flex;
flex-wrap: wrap;
gap:
10px
18px;
align-items: center;
margin-top: 14px;
}
.partner-panel-access {
padding: 0;
border: 0;
background: transparent;
font: inherit;
cursor: pointer;
}
/* overlay */
.partner-access-overlay {
position: fixed;
inset: 0;
z-index: 5000;
display: grid;
place-items: center;
padding: 24px;
overflow-y: auto;
background:
rgba(2,19,23,.76);
backdrop-filter:
blur(8px);
opacity: 0;
transition:
opacity .22s ease;
}
.partner-access-overlay[hidden] {
display: none !important;
}
.partner-access-overlay.is-open {
opacity: 1;
}
body.partner-access-open {
overflow: hidden;
}
/* modal */
.partner-access-modal {
position: relative;
width:
min(760px, 100%);
max-height:
calc(100vh - 48px);
overflow-y: auto;
border:
1px solid
rgba(255,255,255,.12);
border-radius: 22px;
background:
#f7f8f5;
color:
#12343c;
box-shadow:
0 30px 90px
rgba(0,0,0,.30);
}
.partner-access-close {
position: absolute;
top: 16px;
right: 17px;
z-index: 3;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border:
1px solid
rgba(10,57,67,.13);
border-radius: 50%;
background:
rgba(255,255,255,.82);
color:
#173f48;
font-size: 1.3rem;
cursor: pointer;
}
/* heading */
.partner-access-brand {
padding:
42px
46px
27px;
border-bottom:
1px solid
rgba(10,57,67,.10);
background:
linear-gradient(
145deg,
#f9faf6,
#eff4f1
);
}
.partner-access-brand h2 {
margin:
4px
0
10px;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(2rem, 4vw, 3rem);
color:
#123b45;
}
.partner-access-brand > p:last-child {
max-width: 590px;
margin: 0;
color:
#64767a;
line-height: 1.6;
}
/* tabs */
.partner-access-tabs {
display: grid;
grid-template-columns:
1fr
1fr;
margin:
25px
46px
0;
padding: 4px;
border-radius: 12px;
background:
#e9efed;
}
.partner-access-tab {
min-height: 44px;
border: 0;
border-radius: 9px;
background: transparent;
color:
#566b70;
font: inherit;
font-size: .82rem;
font-weight: 700;
cursor: pointer;
}
.partner-access-tab.is-active {
background:
#ffffff;
color:
#0b4d5a;
box-shadow:
0 3px 12px
rgba(11,64,73,.08);
}
/* panels */
.partner-access-panel,
.partner-access-success {
padding:
28px
46px
36px;
}
.partner-access-panel[hidden],
.partner-access-success[hidden] {
display: none !important;
}
.partner-access-intro {
display: grid;
grid-template-columns:
42px
1fr;
gap: 14px;
align-items: start;
margin-bottom: 22px;
}
.partner-access-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background:
#e3eeeb;
color:
#0b5965;
font-size: 1.1rem;
font-weight: 800;
}
.partner-access-intro h3 {
margin:
1px
0
5px;
color:
#173b44;
font-size: 1.02rem;
}
.partner-access-intro p {
margin: 0;
color:
#6b7b7e;
font-size: .81rem;
line-height: 1.5;
}
/* forms */
.partner-access-form {
display: grid;
gap: 16px;
}
.partner-access-form label {
display: grid;
gap: 7px;
color:
#314f56;
font-size: .75rem;
font-weight: 700;
}
.partner-access-form input {
width: 100%;
min-height: 46px;
padding:
10px
13px;
border:
1px solid
rgba(13,64,74,.16);
border-radius: 9px;
background:
#ffffff;
color:
#17383f;
font: inherit;
font-size: .86rem;
outline: none;
}
.partner-access-form input:focus {
border-color:
rgba(8,104,120,.56);
box-shadow:
0 0 0 3px
rgba(8,104,120,.09);
}
.partner-code-field input {
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.partner-access-two-column {
display: grid;
grid-template-columns:
1fr
1fr;
gap:
16px
18px;
}
.partner-access-primary {
justify-self: start;
margin-top: 3px;
background:
#083f4a;
color:
#ffffff;
}
.partner-access-note {
margin:
-2px
0
0;
color:
#819093;
font-size: .7rem;
line-height: 1.45;
}
/* success */
.partner-access-success {
text-align: center;
}
.partner-success-mark {
width: 54px;
height: 54px;
display: grid;
place-items: center;
margin:
0
auto
18px;
border-radius: 50%;
background:
#dcebe5;
color:
#12634f;
font-size: 1.45rem;
font-weight: 800;
}
.partner-access-success h3 {
margin:
8px
0
10px;
font-family:
"Playfair Display",
Georgia,
serif;
font-size: 1.65rem;
color:
#173b44;
}
.partner-access-success > p {
max-width: 510px;
margin:
0
auto;
color:
#67797d;
line-height: 1.6;
}
.partner-preview-points {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin:
22px
0;
}
.partner-preview-points span {
padding:
7px
10px;
border-radius: 999px;
background:
#eaf0ee;
color:
#425d63;
font-size: .69rem;
font-weight: 700;
}
/* footer */
.partner-access-footer {
display: flex;
justify-content: space-between;
gap: 16px;
padding:
18px
46px;
border-top:
1px solid
rgba(10,57,67,.09);
color:
#7b8a8d;
font-size: .69rem;
}
.partner-access-footer a {
color:
#315b64;
}
/* mobile */
@media (max-width: 720px) {
.partner-access-overlay {
padding: 10px;
}
.partner-access-modal {
max-height:
calc(100vh - 20px);
border-radius: 16px;
}
.partner-access-brand {
padding:
36px
22px
22px;
}
.partner-access-tabs {
margin:
20px
22px
0;
}
.partner-access-panel,
.partner-access-success {
padding:
24px
22px
30px;
}
.partner-access-two-column {
grid-template-columns:
1fr;
}
.partner-access-footer {
flex-direction: column;
padding:
16px
22px;
}
}
/* ============================================================
OBJECTIVE 12B-2 · PARTNER INVITATION FEEDBACK
============================================================ */
.partner-access-note.is-error {
color: #9b3d3d;
}
.partner-access-note.is-success {
color: #286a55;
}
.partner-access-primary:disabled {
opacity: .6;
cursor: wait;
}
/* ============================================================
OBJECTIVE 12B-3B · PARTNER ACCOUNT ACTIVATION
============================================================ */
.partner-account-activation {
padding:
30px
46px
38px;
text-align: center;
}
.partner-account-activation[hidden] {
display: none !important;
}
.partner-account-activation h3 {
margin:
8px
0
8px;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
1.7rem;
color:
#173b44;
}
.partner-activation-company {
max-width: 520px;
margin:
0
auto
24px;
color:
#6a7c80;
font-size:
.86rem;
line-height:
1.55;
}
/* verified details */
.partner-activation-summary {
display: grid;
grid-template-columns:
1fr
1fr;
gap: 12px;
margin:
0
0
24px;
text-align: left;
}
.partner-activation-summary div {
padding:
13px
14px;
border:
1px solid
rgba(12,63,74,.10);
border-radius:
10px;
background:
#eef3f1;
}
.partner-activation-summary span {
display: block;
margin-bottom:
4px;
color:
#7b8b8e;
font-size:
.60rem;
font-weight:
700;
letter-spacing:
.12em;
}
.partner-activation-summary strong {
display: block;
overflow-wrap:
anywhere;
color:
#244a52;
font-size:
.78rem;
}
/* account form */
.partner-account-form {
display: grid;
gap: 16px;
max-width:
520px;
margin:
0 auto;
text-align: left;
}
.partner-account-form label {
display: grid;
gap: 7px;
color:
#314f56;
font-size:
.75rem;
font-weight:
700;
}
.partner-account-form input {
min-height:
46px;
width:
100%;
padding:
10px
13px;
border:
1px solid
rgba(13,64,74,.16);
border-radius:
9px;
background:
#fff;
color:
#17383f;
font:
inherit;
outline:
none;
}
.partner-account-form input:focus {
border-color:
rgba(8,104,120,.56);
box-shadow:
0 0 0 3px
rgba(8,104,120,.09);
}
.partner-account-form small {
color:
#899699;
font-size:
.64rem;
font-weight:
500;
}
/* password checks */
.partner-password-guidance {
display: flex;
flex-wrap: wrap;
gap:
8px
18px;
color:
#879497;
font-size:
.68rem;
}
.partner-password-guidance .is-valid {
color:
#286a55;
font-weight:
700;
}
.partner-account-form
.partner-access-primary {
justify-self:
center;
min-width:
205px;
margin-top:
3px;
}
.partner-account-form
.partner-access-note {
margin:
0;
text-align:
center;
}
@media (max-width: 720px) {
.partner-account-activation {
padding:
26px
22px
32px;
}
.partner-activation-summary {
grid-template-columns:
1fr;
}
}
/* ============================================================
OBJECTIVE 12B-4 · PARTNER LOGIN SUCCESS
============================================================ */
.partner-login-success {
padding:
8px
0
4px;
text-align: center;
}
.partner-login-success h3 {
margin:
8px
0;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
1.7rem;
color:
#173b44;
}
.partner-login-success > p {
max-width:
480px;
margin:
0 auto;
color:
#67797d;
line-height:
1.6;
}
.partner-login-success
.partner-access-primary {
margin:
4px auto 0;
}
/* ============================================================
OBJECTIVE 12C-1 · AUTHENTICATED PARTNER VIEW
============================================================ */
.partner-access-nav.is-authenticated {
position: relative;
padding-left: 28px;
background:
rgba(255,255,255,.14);
border-color:
rgba(255,255,255,.44);
}
.partner-access-nav.is-authenticated::before {
content: "";
position: absolute;
left: 12px;
top: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
background:
#9fdbc0;
transform:
translateY(-50%);
box-shadow:
0 0 0 3px
rgba(159,219,192,.12);
}
.partner-session-card {
padding:
8px
0
5px;
text-align:
center;
}
.partner-session-status {
display:
inline-flex;
align-items:
center;
gap:
7px;
margin-bottom:
18px;
padding:
7px
10px;
border-radius:
999px;
background:
#e5efeb;
color:
#356354;
font-size:
.61rem;
font-weight:
800;
letter-spacing:
.10em;
}
.partner-session-status span {
width:
7px;
height:
7px;
border-radius:
50%;
background:
#3d886d;
}
.partner-session-card h3 {
margin:
8px
0
4px;
font-family:
"Playfair Display",
Georgia,
serif;
color:
#173b44;
font-size:
1.8rem;
}
.partner-session-company {
margin:
0
0
22px;
color:
#65787c;
font-size:
.88rem;
font-weight:
600;
}
.partner-session-details {
display:
grid;
grid-template-columns:
1fr
1fr;
gap:
10px;
margin:
0
0
22px;
text-align:
left;
}
.partner-session-details div {
padding:
13px
14px;
border:
1px solid
rgba(12,63,74,.10);
border-radius:
10px;
background:
#eef3f1;
}
.partner-session-details span {
display:
block;
margin-bottom:
5px;
color:
#879497;
font-size:
.59rem;
font-weight:
800;
letter-spacing:
.12em;
}
.partner-session-details strong {
color:
#284d55;
font-size:
.77rem;
overflow-wrap:
anywhere;
}
.partner-session-actions {
display:
flex;
justify-content:
center;
align-items:
center;
flex-wrap:
wrap;
gap:
10px
18px;
}
.partner-signout-button {
padding:
8px
3px;
border:
0;
background:
transparent;
color:
#718286;
font:
inherit;
font-size:
.73rem;
font-weight:
700;
cursor:
pointer;
}
.partner-signout-button:hover {
color:
#274f58;
}
@media (max-width: 720px) {
.partner-session-details {
grid-template-columns:
1fr;
}
}
/* ============================================================
OBJECTIVE 12C-1 · PARTNER PORTAL POLISH
============================================================ */
.partner-access-tabs.is-partner-portal {
grid-template-columns: 1fr;
}
.partner-access-tabs.is-partner-portal
.partner-access-tab {
width: 100%;
}
/* ============================================================
FIRST DIVE ESCAPE · PRIVATE PARTNER COMMERCIAL PANEL
============================================================ */
.partner-commercial-panel {
margin:
34px
0;
padding:
28px;
border:
1px solid
rgba(13,77,88,.16);
border-radius:
18px;
background:
linear-gradient(
145deg,
#edf5f2,
#f8faf8
);
color:
#173d45;
}
.partner-commercial-heading {
display:
flex;
justify-content:
space-between;
align-items:
flex-start;
gap:
20px;
margin-bottom:
22px;
}
.partner-commercial-kicker {
margin:
0
0
5px;
color:
#397163;
font-size:
.63rem;
font-weight:
800;
letter-spacing:
.15em;
}
.partner-commercial-heading h3 {
margin:
0
0
5px;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
1.55rem;
color:
#173d45;
}
.partner-commercial-validity {
margin:
0;
color:
#75868a;
font-size:
.75rem;
}
.partner-private-badge {
padding:
7px
9px;
border-radius:
999px;
background:
#173f48;
color:
#fff;
font-size:
.57rem;
font-weight:
800;
letter-spacing:
.12em;
}
.partner-rate-grid {
display:
grid;
grid-template-columns:
repeat(3, 1fr);
gap:
12px;
margin-bottom:
18px;
}
.partner-rate-card {
padding:
18px;
border:
1px solid
rgba(16,77,87,.10);
border-radius:
13px;
background:
rgba(255,255,255,.78);
}
.partner-rate-card.is-featured {
background:
#123f49;
color:
#fff;
}
.partner-rate-label {
display:
block;
margin-bottom:
12px;
color:
#718488;
font-size:
.58rem;
font-weight:
800;
letter-spacing:
.12em;
}
.partner-rate-card.is-featured
.partner-rate-label {
color:
rgba(255,255,255,.68);
}
.partner-rate-card strong {
display:
block;
font-size:
1.65rem;
line-height:
1;
}
.partner-rate-card strong small {
font-size:
.68rem;
font-weight:
600;
}
.partner-rate-card p {
margin:
9px
0
5px;
font-size:
.72rem;
}
.partner-rate-card > small {
color:
#849296;
font-size:
.64rem;
}
.partner-rate-card.is-featured > small {
color:
rgba(255,255,255,.64);
}
.partner-commercial-note {
padding:
15px
17px;
border-radius:
11px;
background:
#e3eeea;
margin-bottom:
20px;
}
.partner-commercial-note strong {
display:
block;
margin-bottom:
3px;
color:
#28574e;
font-size:
.77rem;
}
.partner-commercial-note p {
margin:
0;
color:
#657b78;
font-size:
.69rem;
line-height:
1.5;
}
.partner-commercial-columns {
display:
grid;
grid-template-columns:
1fr
1fr;
gap:
24px;
padding:
20px
0;
}
.partner-commercial-columns h4 {
margin:
0
0
10px;
color:
#274f57;
font-size:
.78rem;
}
.partner-commercial-columns ul {
margin:
0;
padding-left:
17px;
color:
#677b7f;
font-size:
.68rem;
line-height:
1.65;
}
.partner-commercial-footer {
display:
flex;
justify-content:
space-between;
align-items:
center;
gap:
18px;
padding-top:
18px;
border-top:
1px solid
rgba(13,77,88,.11);
}
.partner-commercial-footer span {
display:
block;
margin-bottom:
3px;
color:
#859397;
font-size:
.55rem;
font-weight:
800;
letter-spacing:
.12em;
}
.partner-commercial-footer strong {
color:
#34545b;
font-size:
.7rem;
}
.partner-commercial-action {
background:
#123f49;
color:
#fff;
}
@media (max-width: 800px) {
.partner-rate-grid {
grid-template-columns:
1fr;
}
.partner-commercial-columns {
grid-template-columns:
1fr;
}
.partner-commercial-footer {
align-items:
flex-start;
flex-direction:
column;
}
}
/* ============================================================
FIRST DIVE · PARTNER VIEW MIDDLE COLUMN
============================================================ */
.dream-partner-column {
min-width: 0;
}
.dream-partner-box {
display: flex;
flex-direction: column;
height: 100%;
min-height: 520px;
padding: 24px;
border: 1px solid rgba(14, 65, 73, .10);
border-radius: 18px;
background: linear-gradient(180deg, #f8fbfa 0%, #eef4f2 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.dream-partner-box.is-private {
background: linear-gradient(180deg, #f4f8f7 0%, #e9f0ee 100%);
}
.dream-partner-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
margin-bottom: 16px;
}
.dream-partner-kicker {
margin: 0 0 5px;
color: #4b7b76;
font-size: .64rem;
font-weight: 800;
letter-spacing: .16em;
}
.dream-partner-header h3 {
margin: 0 0 6px;
color: #193f46;
font-family: "Playfair Display", Georgia, serif;
font-size: 1.55rem;
line-height: 1.05;
}
.dream-partner-subtitle {
margin: 0;
color: #708185;
font-size: .78rem;
line-height: 1.45;
}
.dream-partner-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 10px;
border-radius: 999px;
background: #174851;
color: #fff;
font-size: .58rem;
font-weight: 800;
letter-spacing: .12em;
}
.dream-partner-public-state {
margin-top: auto;
margin-bottom: auto;
padding: 18px;
border-radius: 14px;
background: rgba(255,255,255,.65);
}
.dream-partner-public-state strong {
display: block;
margin-bottom: 8px;
color: #224c53;
font-size: .95rem;
}
.dream-partner-public-state p {
margin: 0;
color: #6f8083;
font-size: .78rem;
line-height: 1.6;
}
.dream-partner-rate-hero {
padding: 18px 18px 16px;
border-radius: 16px;
background: #154b55;
color: #fff;
margin-bottom: 14px;
}
.dream-rate-label {
display: block;
margin-bottom: 10px;
color: rgba(255,255,255,.72);
font-size: .62rem;
font-weight: 800;
letter-spacing: .14em;
}
.dream-partner-rate-hero strong {
display: block;
font-size: 2.45rem;
line-height: .95;
margin-bottom: 10px;
}
.dream-partner-rate-hero strong small {
font-size: .8rem;
font-weight: 600;
}
.dream-partner-rate-hero p {
margin: 0 0 6px;
font-size: .82rem;
}
.dream-partner-rate-hero > small {
color: rgba(255,255,255,.74);
font-size: .74rem;
}
.dream-partner-mini-rates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.dream-partner-mini-rates article {
padding: 14px;
border-radius: 14px;
background: rgba(255,255,255,.78);
border: 1px solid rgba(13,77,88,.10);
}
.dream-partner-mini-rates span {
display: block;
margin-bottom: 8px;
color: #7b8a8d;
font-size: .58rem;
font-weight: 800;
letter-spacing: .14em;
}
.dream-partner-mini-rates strong {
display: block;
color: #173f46;
font-size: 1.4rem;
line-height: 1.05;
margin-bottom: 5px;
}
.dream-partner-mini-rates strong small {
font-size: .68rem;
font-weight: 600;
}
.dream-partner-mini-rates small {
color: #6d7f82;
font-size: .72rem;
line-height: 1.45;
}
.dream-partner-note {
margin-bottom: 14px;
padding: 14px 15px;
border-radius: 12px;
background: rgba(210, 226, 222, .65);
}
.dream-partner-note strong {
display: block;
margin-bottom: 5px;
color: #28545b;
font-size: .8rem;
}
.dream-partner-note p {
margin: 0;
color: #6a7e81;
font-size: .73rem;
line-height: 1.55;
}
.dream-partner-scroll {
margin-top: 2px;
padding-right: 8px;
overflow-y: auto;
max-height: 210px;
}
.dream-partner-scroll::-webkit-scrollbar {
width: 8px;
}
.dream-partner-scroll::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(25, 72, 81, .22);
}
.dream-partner-section + .dream-partner-section {
margin-top: 18px;
}
.dream-partner-section h4 {
margin: 0 0 9px;
color: #21474f;
font-size: .82rem;
}
.dream-partner-section ul {
margin: 0;
padding-left: 18px;
color: #667b7f;
font-size: .72rem;
line-height: 1.65;
}
@media (max-width: 980px) {
.dream-partner-mini-rates {
grid-template-columns: 1fr;
}
.dream-partner-box {
min-height: auto;
}
.dream-partner-scroll {
max-height: none;
}
}
/* ============================================================
FIRST DIVE · WHOLE PARTNER VIEW SCROLL
============================================================ */
/*
* Keep all three main columns aligned from the top.
* The Partner View no longer determines an unnecessarily
* large row height.
*/
.dream-main-grid {
align-items: start;
}
/*
* Desktop:
* the entire Partner View is one scrollable card.
*/
.dream-partner-box {
display: block;
box-sizing: border-box;
height: 360px;
min-height: 0;
max-height: 360px;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color:
rgba(25,72,81,.24)
transparent;
}
.dream-partner-box::-webkit-scrollbar {
width: 5px;
}
.dream-partner-box::-webkit-scrollbar-track {
background: transparent;
}
.dream-partner-box::-webkit-scrollbar-thumb {
background:
rgba(25,72,81,.24);
border-radius: 999px;
}
/*
* The lower commercial area must NOT have its own scrollbar.
* Everything now scrolls together with the whole card.
*/
.dream-partner-scroll {
display: block;
max-height: none;
height: auto;
min-height: 0;
overflow: visible;
padding-right: 0;
}
.dream-partner-scroll::-webkit-scrollbar {
display: none;
}
/*
* Keep sections flowing naturally inside the main scroll.
*/
.dream-partner-section {
overflow: visible;
}
.dream-partner-section + .dream-partner-section {
margin-top: 18px;
}
/*
* Mobile/tablet:
* remove the internal scrolling entirely.
* The normal page handles the scrolling.
*/
@media (max-width: 800px) {
.dream-partner-box {
height: auto;
min-height: 0;
max-height: none;
overflow: visible;
}
.dream-partner-scroll {
height: auto;
max-height: none;
overflow: visible;
}
}
/* ============================================================
FIRST DIVE · CONTEXTUAL NAVIGATION + COMMERCIAL DETAILS
============================================================ */
.first-dive-experiences-link {
display: inline-block;
padding: 3px 7px;
margin-bottom: 2px;
border: 0;
border-radius: 999px;
background:
#e4efec;
color:
#174f58;
font: inherit;
font-size: .67rem;
font-weight: 800;
cursor: pointer;
}
.first-dive-experiences-link:hover {
background:
#d8e9e5;
}
.experience-context-back {
align-self: flex-start;
margin-top: 12px;
padding:
8px 12px;
border:
1px solid
rgba(15,76,87,.18);
border-radius:
999px;
background:
#fff;
color:
#174f58;
font: inherit;
font-size: .72rem;
font-weight: 800;
cursor: pointer;
}
.dream-partner-section-heading {
display: flex;
justify-content:
space-between;
align-items:
center;
gap: 14px;
margin-bottom:
9px;
}
.dream-partner-section-heading h4 {
margin: 0;
}
.partner-commercial-details-link {
flex-shrink: 0;
padding: 0;
border: 0;
background: transparent;
color:
#145866;
font: inherit;
font-size: .69rem;
font-weight: 800;
cursor: pointer;
}
.partner-commercial-details-link:hover {
text-decoration: underline;
}
/* Commercial details modal */
.commercial-details-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: grid;
place-items: center;
padding: 24px;
background:
rgba(3,24,29,.78);
backdrop-filter:
blur(8px);
}
.commercial-details-overlay[hidden] {
display: none !important;
}
body.commercial-details-open {
overflow: hidden;
}
.commercial-details-modal {
position: relative;
width:
min(920px, 100%);
max-height:
calc(100vh - 48px);
overflow-y: auto;
padding:
38px;
border-radius:
22px;
background:
#f7f9f7;
color:
#173e46;
box-shadow:
0 32px 100px
rgba(0,0,0,.35);
}
.commercial-details-close {
position: absolute;
top: 16px;
right: 17px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border:
1px solid
rgba(10,57,67,.13);
border-radius: 50%;
background: #fff;
color:
#173f48;
font-size: 1.25rem;
cursor: pointer;
}
.commercial-details-header {
max-width: 650px;
margin-bottom: 24px;
}
.commercial-details-kicker {
margin:
0 0 6px;
color:
#4b7b76;
font-size:
.62rem;
font-weight:
800;
letter-spacing:
.16em;
}
.commercial-details-header h2 {
margin:
0 0 7px;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(2rem, 4vw, 3rem);
color:
#173f48;
}
.commercial-details-header > p:last-child {
margin: 0;
color:
#708185;
line-height: 1.55;
}
.commercial-details-rate-summary {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 12px;
margin-bottom:
12px;
}
.commercial-details-rate-summary > div {
padding:
18px;
border:
1px solid
rgba(13,77,88,.10);
border-radius:
14px;
background:
#edf3f1;
}
.commercial-details-rate-summary span {
display: block;
margin-bottom: 9px;
color:
#77898c;
font-size:
.59rem;
font-weight:
800;
letter-spacing:
.13em;
}
.commercial-details-rate-summary strong {
display: block;
margin-bottom: 6px;
color:
#173f48;
font-size:
1.8rem;
}
.commercial-details-rate-summary strong small {
font-size:
.72rem;
}
.commercial-details-rate-summary > div > small {
color:
#728387;
font-size:
.7rem;
}
.commercial-details-validity {
margin:
0 0 28px;
color:
#597276;
font-size:
.76rem;
font-weight:
700;
}
.commercial-details-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap:
12px;
}
.commercial-details-grid section {
padding:
18px;
border:
1px solid
rgba(13,77,88,.09);
border-radius:
13px;
background:
#fff;
}
.commercial-details-grid h3 {
margin:
0 0 8px;
color:
#244c54;
font-size:
.88rem;
}
.commercial-details-grid p,
.commercial-details-grid ul {
margin: 0;
color:
#687c80;
font-size:
.74rem;
line-height:
1.65;
}
.commercial-details-grid ul {
padding-left:
18px;
}
.commercial-details-actions {
display: flex;
justify-content:
space-between;
align-items:
center;
flex-wrap:
wrap;
gap: 12px;
margin-top:
24px;
padding-top:
20px;
border-top:
1px solid
rgba(13,77,88,.10);
}
.commercial-details-back {
border:
1px solid
rgba(15,76,87,.18);
background:
transparent;
color:
#174f58;
}
@media (max-width: 720px) {
.commercial-details-overlay {
padding: 10px;
}
.commercial-details-modal {
max-height:
calc(100vh - 20px);
padding:
28px 20px;
border-radius:
16px;
}
.commercial-details-rate-summary,
.commercial-details-grid {
grid-template-columns:
1fr;
}
.commercial-details-actions {
align-items:
stretch;
flex-direction:
column-reverse;
}
.commercial-details-actions
.button {
width: 100%;
justify-content: center;
}
}
/* ============================================================
FIRST DIVE · COMMERCIAL DETAILS FINAL NOTE
============================================================ */
.commercial-details-legal-note {
margin-top: 18px;
padding: 16px 18px;
border: 1px solid rgba(13,77,88,.10);
border-radius: 13px;
background: #eaf1ef;
}
.commercial-details-legal-note strong {
display: block;
margin-bottom: 6px;
color: #264f56;
font-size: .78rem;
}
.commercial-details-legal-note p {
margin: 0;
color: #687d80;
font-size: .73rem;
line-height: 1.6;
}
/* ============================================================
COMMERCIAL DETAILS · FORCE ABOVE PACKAGE MODAL
============================================================ */
.commercial-details-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 2147483000 !important;
isolation: isolate;
}
.commercial-details-modal {
position: relative;
z-index: 1;
}
body.commercial-details-open
.commercial-details-overlay {
display: grid;
}
/* ============================================================
HAPAXORA PARTNER · LEGAL / TERMS CENTRE
============================================================ */
.partner-legal-consent {
margin: 18px 0;
padding: 15px 16px;
border:
1px solid rgba(14,70,79,.12);
border-radius: 13px;
background: #f2f6f5;
}
.partner-consent-row {
display: flex;
align-items: flex-start;
gap: 10px;
color: #536c71;
font-size: .74rem;
line-height: 1.55;
cursor: pointer;
}
.partner-consent-row input {
width: 17px;
height: 17px;
flex: 0 0 auto;
margin-top: 2px;
accent-color: #174d57;
}
.partner-inline-legal-link {
display: inline;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #145966;
font: inherit;
font-weight: 800;
text-decoration: underline;
cursor: pointer;
}
.partner-consent-version {
margin-top: 9px;
margin-left: 27px;
color: #8a989a;
font-size: .61rem;
letter-spacing: .03em;
}
#partnerActivateForm button[type="submit"]:disabled {
opacity: .45;
cursor: not-allowed;
}
/* LOGGED IN LEGAL CENTRE */
.partner-legal-centre {
margin-top: 18px;
padding: 18px;
border:
1px solid rgba(14,70,79,.11);
border-radius: 15px;
background:
linear-gradient(
180deg,
#f7faf9,
#edf3f1
);
}
.partner-legal-centre-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 13px;
}
.partner-legal-centre-heading p {
margin: 0 0 4px;
color: #758a8e;
font-size: .57rem;
font-weight: 800;
letter-spacing: .14em;
}
.partner-legal-centre-heading h3 {
margin: 0;
color: #204950;
font-size: .95rem;
}
.partner-legal-centre-heading > span {
padding: 5px 8px;
border-radius: 999px;
background: #174d57;
color: #fff;
font-size: .57rem;
font-weight: 800;
}
.partner-legal-doc-button {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-top: 8px;
padding: 11px 12px;
border:
1px solid rgba(14,70,79,.09);
border-radius: 10px;
background: rgba(255,255,255,.82);
color: #526b70;
font: inherit;
font-size: .72rem;
text-align: left;
cursor: pointer;
}
.partner-legal-doc-button:hover {
background: #fff;
}
.partner-legal-doc-button strong {
color: #145966;
font-size: .68rem;
white-space: nowrap;
}
.partner-legal-product-note {
margin-top: 12px;
padding-top: 12px;
border-top:
1px solid rgba(14,70,79,.09);
}
.partner-legal-product-note span {
display: block;
margin-bottom: 4px;
color: #7b8d90;
font-size: .56rem;
font-weight: 800;
letter-spacing: .12em;
}
.partner-legal-product-note p {
margin: 0;
color: #708286;
font-size: .68rem;
line-height: 1.5;
}
/* FULL LEGAL MODAL */
.partner-legal-overlay {
position: fixed;
inset: 0;
z-index: 2147483500;
display: grid;
place-items: center;
padding: 24px;
background:
rgba(3,24,29,.82);
backdrop-filter: blur(8px);
}
.partner-legal-overlay[hidden] {
display: none !important;
}
body.partner-legal-open {
overflow: hidden;
}
.partner-legal-modal {
width: min(900px, 100%);
max-height:
calc(100vh - 48px);
overflow-y: auto;
padding: 34px;
border-radius: 22px;
background: #f7f9f7;
box-shadow:
0 36px 110px
rgba(0,0,0,.38);
}
.partner-legal-topbar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 24px;
}
.partner-legal-kicker {
margin: 0 0 4px;
color: #4e7d77;
font-size: .59rem;
font-weight: 800;
letter-spacing: .15em;
}
.partner-legal-topbar h2 {
margin: 0;
color: #173f48;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(1.7rem, 4vw, 2.5rem);
}
.partner-legal-close {
width: 38px;
height: 38px;
flex: 0 0 auto;
display: grid;
place-items: center;
border:
1px solid rgba(14,70,79,.12);
border-radius: 50%;
background: #fff;
color: #173f48;
font-size: 1.2rem;
cursor: pointer;
}
.partner-legal-meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 18px;
}
.partner-legal-meta span {
padding: 6px 9px;
border-radius: 999px;
background: #e3eeeb;
color: #426b66;
font-size: .63rem;
font-weight: 800;
}
.partner-legal-intro {
max-width: 680px;
margin-bottom: 24px;
}
.partner-legal-intro h3 {
margin: 0 0 8px;
color: #214b53;
font-size: 1.2rem;
}
.partner-legal-intro p {
margin: 0;
color: #6e8184;
font-size: .8rem;
line-height: 1.65;
}
.partner-legal-sections {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 10px;
}
.partner-legal-sections section {
padding: 16px;
border:
1px solid rgba(14,70,79,.09);
border-radius: 12px;
background: #fff;
}
.partner-legal-sections h4 {
margin: 0 0 7px;
color: #284e55;
font-size: .82rem;
}
.partner-legal-sections p {
margin: 0;
color: #6b7e82;
font-size: .72rem;
line-height: 1.65;
}
.partner-legal-draft-note {
margin-top: 16px;
padding: 15px 17px;
border-radius: 12px;
background: #e9f0ee;
}
.partner-legal-draft-note strong {
display: block;
margin-bottom: 5px;
color: #315a57;
font-size: .76rem;
}
.partner-legal-draft-note p {
margin: 0;
color: #6b7f7c;
font-size: .7rem;
line-height: 1.55;
}
@media (max-width: 720px) {
.partner-legal-overlay {
padding: 10px;
}
.partner-legal-modal {
max-height:
calc(100vh - 20px);
padding:
26px 18px;
border-radius: 16px;
}
.partner-legal-sections {
grid-template-columns: 1fr;
}
}
/* Homepage hero — centred Maldives shoreline composition */
#homeHero {
min-height: 760px;
min-height: max(720px, 92svh);
isolation: isolate;
}
#homeHero::before {
background: url('/assets/hero-maldives.jpg') center 65% / cover no-repeat;
transform: none;
pointer-events: none;
}
#homeHero::after {
background: linear-gradient(180deg,
rgba(2, 20, 29, .32) 0%,
rgba(2, 20, 29, .12) 22%,
rgba(2, 20, 29, .30) 52%,
rgba(2, 20, 29, .56) 100%);
}
#homeHero .nav { flex: 0 0 auto; }
#homeHero .hero-inner {
flex: 1 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 64px 28px 96px;
text-align: center;
}
#homeHero .eyebrow {
margin: 0 0 24px;
color: rgba(255, 255, 255, .94);
font-size: .75rem;
line-height: 1.6;
letter-spacing: .24em;
}
#homeHero h1 {
max-width: 100%;
margin: 0;
color: #fff;
font-size: clamp(2.5rem, 4.8vw, 5.5rem);
text-wrap: balance;
line-height: 1.07;
letter-spacing: -.035em;
font-weight: 600;
text-shadow: 0 3px 24px rgba(0, 17, 25, .28);
}
#homeHero .hero-copy {
max-width: 620px;
margin: 26px auto 0;
color: #fff;
font-size: clamp(1rem, 1.3vw, 1.16rem);
line-height: 1.75;
text-wrap: pretty;
text-shadow: 0 2px 14px rgba(0, 17, 25, .5);
}
#homeHero .hero-actions {
justify-content: center;
gap: 14px;
margin: 32px 0 0;
}
#homeHero .hero-actions .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 15px 25px;
line-height: 1.4;
transition: background-color .2s ease, box-shadow .2s ease;
}
#homeHero .hero-actions .primary:hover { background: #ffdb91; }
#homeHero .hero-actions .ghost {
background: rgba(3, 30, 39, .46);
border-color: rgba(255, 255, 255, .75);
color: #fff;
}
#homeHero .hero-actions .ghost:hover { background: rgba(3, 30, 39, .7); }
#homeHero a:focus-visible, #homeHero button:focus-visible {
outline: 3px solid #f3c66a;
outline-offset: 5px;
}
@media (max-width: 600px) {
#homeHero { min-height: max(680px, 92svh); }
#homeHero::before { background-position: center 42%; }
#homeHero .nav { padding: 20px 18px; gap: 14px; }
#homeHero .navlinks { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
#homeHero .logo-brand img { max-width: 34vw; }
#homeHero .hero-inner { padding: 48px 22px 72px; }
#homeHero .eyebrow { font-size: .65rem; letter-spacing: .18em; margin-bottom: 20px; }
#homeHero h1 { font-size: clamp(2rem, 8.5vw, 3rem); line-height: 1.12; }
#homeHero .hero-copy { margin-top: 22px; font-size: 1rem; line-height: 1.7; }
#homeHero .hero-actions { width: 100%; max-width: 330px; gap: 12px; margin-top: 28px; }
#homeHero .hero-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
#homeHero .hero-actions .button { transition: none; }
}
/* Hapaxora tier cards — white space and subtle light behind each card */
.hapaxora-tiers {
background: #fff;
padding: 68px clamp(24px, 8vw, 132px) 58px;
}
.hapaxora-tiers-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
max-width: 1180px;
margin: 0 auto;
}
.hapaxora-tier {
position: relative;
isolation: isolate;
min-width: 0;
border-radius: 20px;
--tier-glow: 37, 174, 153;
--tier-tint: #f5fcfa;
--tier-ink: #174d47;
}
.hapaxora-tier-standard {
--tier-glow: 220, 170, 62;
--tier-tint: #fffbf2;
--tier-ink: #655026;
}
.hapaxora-tier-epic {
--tier-glow: 151, 91, 225;
--tier-tint: #faf5ff;
--tier-ink: #623990;
}
.hapaxora-tier::before {
content: "";
position: absolute;
inset: 2px -3px -5px;
z-index: -1;
border-radius: inherit;
background: rgba(var(--tier-glow), .38);
filter: blur(11px);
pointer-events: none;
}
.hapaxora-tier-face {
display: flex;
align-items: center;
justify-content: center;
min-height: 178px;
padding: 36px 24px;
border: 1px solid rgba(var(--tier-glow), .18);
border-radius: inherit;
background: linear-gradient(145deg, #fff 18%, var(--tier-tint) 100%);
box-shadow: 0 12px 24px rgba(20, 45, 51, .065);
}
.hapaxora-tier-face h2 {
margin: 0;
color: var(--tier-ink);
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
line-height: 1.2;
font-weight: 600;
letter-spacing: -.025em;
text-align: center;
}
@media (max-width: 600px) {
.hapaxora-tiers { padding: 42px 24px 36px; }
.hapaxora-tiers-grid { grid-template-columns: 1fr; gap: 24px; }
.hapaxora-tier-face { min-height: 130px; padding: 28px 20px; }
}
/* HAPAXORA PHOTO CONTACT V1 START */
/* ==========================================================
MAIN CONTACT BACKGROUND
========================================================== */
.hapaxora-photo-contact {
position: relative;
isolation: isolate;
overflow: hidden;
background-image:
url("/assets/hapaxora-contact-watersports.jpg");
background-size:
cover;
background-position:
center center;
background-repeat:
no-repeat;
color:
#ffffff;
}
/*
* Left-side Hapaxora shadow.
*
* Important:
* This DOES NOT cover the entire enquiry form.
* It fades away toward the right side.
*/
.hapaxora-photo-contact::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(5, 39, 39, 0.94)
0%,
rgba(5, 39, 39, 0.88)
19%,
rgba(5, 39, 39, 0.72)
34%,
rgba(5, 39, 39, 0.40)
48%,
rgba(5, 39, 39, 0.12)
63%,
rgba(5, 39, 39, 0.00)
76%
);
}
/* Keep actual section content above background. */
.hapaxora-photo-contact > * {
position: relative;
z-index: 1;
}
/* ==========================================================
LEFT TEXT
========================================================== */
.hapaxora-photo-contact h1,
.hapaxora-photo-contact h2,
.hapaxora-photo-contact h3,
.hapaxora-photo-contact h4 {
color:
#ffffff;
}
.hapaxora-photo-contact p {
color:
rgba(255, 255, 255, 0.86);
}
.hapaxora-photo-contact .eyebrow,
.hapaxora-photo-contact .kicker {
color:
#e8c979;
}
.hapaxora-photo-contact a:not(.button):not(.btn) {
color:
rgba(255, 255, 255, 0.9);
}
/* ==========================================================
THE IMPORTANT PART:
THE FORM ITSELF IS INVISIBLE
========================================================== */
.hapaxora-photo-contact form,
.hapaxora-photo-contact .contact-form,
.hapaxora-photo-contact .enquiry-form,
.hapaxora-photo-contact .form-panel,
.hapaxora-photo-contact .form-wrapper {
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
backdrop-filter:
none !important;
-webkit-backdrop-filter:
none !important;
}
/*
* Labels stay directly over the photograph.
*/
.hapaxora-photo-contact label {
color:
rgba(255, 255, 255, 0.96);
text-shadow:
0 1px 8px
rgba(0, 24, 25, 0.34);
}
/* ==========================================================
ONLY INPUT BOXES GET THE GLASS / BLUR EFFECT
========================================================== */
.hapaxora-photo-contact input,
.hapaxora-photo-contact textarea,
.hapaxora-photo-contact select {
color:
#ffffff !important;
background:
rgba(231, 247, 247, 0.14) !important;
border:
1px solid
rgba(255, 255, 255, 0.56) !important;
box-shadow:
inset 0 1px 0
rgba(255, 255, 255, 0.08),
0 4px 20px
rgba(0, 35, 36, 0.08);
backdrop-filter:
blur(10px)
saturate(115%);
-webkit-backdrop-filter:
blur(10px)
saturate(115%);
border-radius:
10px;
}
/*
* Textarea slightly stronger glass so longer text remains readable.
*/
.hapaxora-photo-contact textarea {
background:
rgba(225, 244, 244, 0.17) !important;
}
/* Placeholder text */
.hapaxora-photo-contact input::placeholder,
.hapaxora-photo-contact textarea::placeholder {
color:
rgba(255, 255, 255, 0.66) !important;
opacity:
1;
}
/*
* Focus state.
* Strong enough to see which field is active,
* without turning into a solid form panel.
*/
.hapaxora-photo-contact input:focus,
.hapaxora-photo-contact textarea:focus,
.hapaxora-photo-contact select:focus {
outline:
none;
border-color:
rgba(255, 255, 255, 0.9) !important;
background:
rgba(225, 244, 244, 0.23) !important;
box-shadow:
0 0 0 3px
rgba(255, 255, 255, 0.10);
}
/*
* Browsers can render select options on white backgrounds.
*/
.hapaxora-photo-contact select option {
color:
#103b39;
background:
#ffffff;
}
/* ==========================================================
BUTTONS
========================================================== */
/*
* Keep existing button styling/design.
* Only ensure readability over photograph.
*/
.hapaxora-photo-contact button,
.hapaxora-photo-contact .button,
.hapaxora-photo-contact .btn {
position: relative;
z-index: 2;
}
/*
* Send enquiry / white button remains visible.
*/
.hapaxora-photo-contact form button[type="submit"] {
background:
#ffffff;
color:
#103b39;
border-color:
rgba(255, 255, 255, 0.9);
box-shadow:
0 5px 20px
rgba(2, 31, 31, 0.14);
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (
max-width: 900px
) {
.hapaxora-photo-contact {
background-position:
58% center;
}
/*
* Mobile needs a slightly stronger shadow
* because text/form stack vertically.
*/
.hapaxora-photo-contact::before {
background:
linear-gradient(
180deg,
rgba(5, 39, 39, 0.86)
0%,
rgba(5, 39, 39, 0.68)
42%,
rgba(5, 39, 39, 0.24)
72%,
rgba(5, 39, 39, 0.10)
100%
);
}
.hapaxora-photo-contact input,
.hapaxora-photo-contact textarea,
.hapaxora-photo-contact select {
background:
rgba(225, 244, 244, 0.18) !important;
backdrop-filter:
blur(9px);
-webkit-backdrop-filter:
blur(9px);
}
}
/* HAPAXORA PHOTO CONTACT V1 END */
/* HAPAXORA CONTACT PHOTO FRAMING V2 START */
/*
* The original 4:3 photograph is too tall for a very wide
* website section. Instead of forcing it to cover the whole
* section, the photograph now occupies mainly the right side.
*
* This keeps much more sky, horizon and lagoon visible.
*/
.hapaxora-photo-contact {
position: relative;
min-height: 650px;
background-image:
none !important;
background-color:
#073837;
isolation: isolate;
overflow: hidden;
}
/* ==========================================================
PHOTO LAYER
========================================================== */
.hapaxora-photo-contact::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
/*
* Restricting the photograph to this area means it doesn't
* have to be enlarged as aggressively as before.
*/
width: 80%;
z-index: 0;
pointer-events: none;
background-image:
url("/assets/hapaxora-contact-watersports.jpg");
background-repeat:
no-repeat;
background-size:
cover;
/*
* Favour the upper part of the photograph:
* sky + ocean + lagoon remain visible.
*/
background-position:
center 24%;
/*
* Blend the picture gently into Hapaxora teal on the left.
*/
-webkit-mask-image:
linear-gradient(
90deg,
transparent 0%,
rgba(0,0,0,.32) 7%,
rgba(0,0,0,.82) 18%,
#000 30%,
#000 100%
);
mask-image:
linear-gradient(
90deg,
transparent 0%,
rgba(0,0,0,.32) 7%,
rgba(0,0,0,.82) 18%,
#000 30%,
#000 100%
);
}
/* ==========================================================
LEFT TEXT SHADOW
========================================================== */
.hapaxora-photo-contact::before {
z-index: 1 !important;
background:
linear-gradient(
90deg,
rgba(5, 39, 39, .98)
0%,
rgba(5, 39, 39, .94)
17%,
rgba(5, 39, 39, .82)
29%,
rgba(5, 39, 39, .55)
39%,
rgba(5, 39, 39, .26)
49%,
rgba(5, 39, 39, .08)
58%,
rgba(5, 39, 39, 0)
68%
) !important;
}
/*
* Text + enquiry fields stay above both photographic layers.
*/
.hapaxora-photo-contact > * {
position: relative;
z-index: 2 !important;
}
/* ==========================================================
FORM REMAINS STRUCTURALLY INVISIBLE
========================================================== */
.hapaxora-photo-contact form,
.hapaxora-photo-contact .contact-form,
.hapaxora-photo-contact .enquiry-form,
.hapaxora-photo-contact .form-panel,
.hapaxora-photo-contact .form-wrapper {
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
backdrop-filter:
none !important;
-webkit-backdrop-filter:
none !important;
}
/*
* Only actual input surfaces use glass.
*/
.hapaxora-photo-contact input,
.hapaxora-photo-contact textarea,
.hapaxora-photo-contact select {
background:
rgba(225, 245, 245, .15) !important;
border:
1px solid
rgba(255, 255, 255, .58) !important;
backdrop-filter:
blur(9px)
saturate(115%);
-webkit-backdrop-filter:
blur(9px)
saturate(115%);
color:
#ffffff !important;
}
.hapaxora-photo-contact textarea {
background:
rgba(225, 245, 245, .17) !important;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 900px) {
.hapaxora-photo-contact {
min-height:
760px;
}
/*
* On narrow displays we need the photograph across almost
* the full width because the form stacks vertically.
*/
.hapaxora-photo-contact::after {
width:
100%;
background-position:
60% 18%;
-webkit-mask-image:
none;
mask-image:
none;
}
.hapaxora-photo-contact::before {
background:
linear-gradient(
180deg,
rgba(5,39,39,.91)
0%,
rgba(5,39,39,.77)
34%,
rgba(5,39,39,.42)
61%,
rgba(5,39,39,.18)
100%
) !important;
}
}
/* HAPAXORA CONTACT PHOTO FRAMING V2 END */
/* Homepage value strip. Change these variables alongside future hero themes. */
#homeHero {
--hero-strip-surface: rgba(250, 248, 243, .96);
--hero-strip-ink: #173943;
--hero-strip-icon: #a18459;
--hero-strip-edge: rgba(15, 54, 62, .12);
}
#homeHero .hero-value-strip {
flex: 0 0 auto;
width: 100%;
background: var(--hero-strip-surface);
color: var(--hero-strip-ink);
border-top: 1px solid var(--hero-strip-edge);
box-shadow: 0 -8px 32px rgba(2, 25, 31, .08);
}
#homeHero .hero-value-strip-inner {
width: min(100%, 1600px);
margin-inline: auto;
padding: 16px clamp(24px, 3vw, 52px);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: clamp(16px, 2vw, 36px);
}
#homeHero .hero-value {
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
font-size: clamp(.64rem, .7vw, .78rem);
font-weight: 600;
line-height: 1.5;
letter-spacing: .14em;
text-transform: uppercase;
}
#homeHero .hero-value svg {
width: 34px;
height: 34px;
flex: 0 0 34px;
fill: none;
stroke: var(--hero-strip-icon);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 760px) {
#homeHero .hero-value-strip-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 16px 20px;
gap: 16px;
}
#homeHero .hero-value { font-size: .67rem; letter-spacing: .09em; gap: 10px; }
#homeHero .hero-value svg { width: 28px; height: 28px; flex-basis: 28px; }
}
@media (max-width: 360px) {
#homeHero .hero-value-strip-inner { grid-template-columns: 1fr; }
#homeHero .hero-value span br { display: none; }
}
/* Hero strip full-width refinement */
#homeHero .hero-value-strip-inner { width: 100%; }
#homeHero .hero-value:first-child { justify-self: start; }
#homeHero .hero-value:last-child { justify-self: end; }
#homeHero .hero-value:nth-child(2),
#homeHero .hero-value:nth-child(3) { justify-self: center; }
@media (max-width: 760px) {
#homeHero .hero-value { justify-self: start; }
}
/* Larger Maldivian palm */
#homeHero .hero-value:last-child svg { width: 42px; height: 42px; flex-basis: 42px; }
/* FLOATING EXPERIENCES AND PACKAGES V1 */
#experiencesPanel .service-panel-inner,
#packagesPanel .service-panel-inner {
padding: 54px 0 96px;
border-radius: 0;
background: #fff;
}
#experiencesPanel .experience-card-grid,
#packagesPanel .package-card-grid {
gap: 24px;
}
#experiencesPanel .experience-list-card,
#packagesPanel .package-list-card {
overflow: hidden;
border: 1px solid #dce5e3;
border-radius: 20px;
box-shadow:
0 18px 42px rgba(8, 38, 44, .13),
0 3px 10px rgba(8, 38, 44, .05);
}
#experiencesPanel .service-panel-close,
#packagesPanel .service-panel-close {
padding: 10px 14px;
border: 1px solid #d1deda;
border-radius: 999px;
background: #fff;
color: #315b60;
}
@media (max-width: 760px) {
#experiencesPanel .service-panel-inner,
#packagesPanel .service-panel-inner {
padding-top: 34px;
padding-bottom: 64px;
}
#experiencesPanel .experience-card-grid,
#packagesPanel .package-card-grid {
gap: 20px;
}
}
/* Match Stays and Experiences headings to Transport and Packages */
#staysPanel .stays-panel-heading h2,
#experiencesPanel .service-panel-heading h2 {
max-width: none;
margin-top: .35rem;
font-size: clamp(2.4rem, 4vw, 4.7rem);
line-height: 1.05;
letter-spacing: -.025em;
}
/* PACKAGE FAMILIES V1 */
#packagesPanel .package-family-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:36px; }
#packagesPanel .package-family-card { min-width:0; min-height:360px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:30px; border:1px solid #dce5e3; border-radius:20px; color:#fff; cursor:pointer; font:inherit; box-shadow:0 18px 42px rgba(8,38,44,.15); }
#packagesPanel .family-escapes { background:linear-gradient(145deg,#136b72,#07363e); }
#packagesPanel .family-diving { background:linear-gradient(145deg,#176586,#092c4a); }
#packagesPanel .family-stopovers { background:linear-gradient(145deg,#886d49,#483d37); }
#packagesPanel .package-family-kicker { font-size:.7rem; font-weight:700; letter-spacing:.14em; }
#packagesPanel .package-family-title { margin-top:56px; font-family:"Playfair Display",Georgia,serif; font-size:clamp(2rem,2.5vw,3rem); line-height:1.1; }
#packagesPanel .package-family-copy { margin-top:16px; line-height:1.65; color:rgba(255,255,255,.9); }
#packagesPanel .package-family-action { margin-top:auto; padding-top:24px; font-weight:700; }
#packagesPanel .package-family-card:hover { transform:translateY(-3px); box-shadow:0 24px 48px rgba(8,38,44,.2); }
#packagesPanel .package-family-card:focus-visible, #packagesPanel .package-family-back:focus-visible { outline:3px solid #f3c66a; outline-offset:4px; }
#packagesPanel .package-family-detail { margin-top:32px; }
#packagesPanel .package-family-detail[hidden], #packagesPanel .package-family-grid[hidden] { display:none !important; }
#packagesPanel .package-family-back { margin-bottom:28px; padding:10px 16px; border:1px solid #cbd8d6; border-radius:999px; background:white; color:#315b60; font:inherit; cursor:pointer; }
#packagesPanel .package-family-detail h3 { margin:0; font-family:"Playfair Display",Georgia,serif; font-size:clamp(2.3rem,4vw,4rem); line-height:1.1; }
#packagesPanel .package-family-detail > p:not(.eyebrow) { max-width:760px; line-height:1.7; color:#52686c; }
#packagesPanel .escape-tier-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:30px; }
#packagesPanel .escape-tier-grid article { padding:30px; min-height:200px; border:1px solid #dce5e3; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(8,38,44,.1); }
#packagesPanel .escape-tier-grid span { color:#6c898b; font-size:.72rem; letter-spacing:.12em; }
#packagesPanel .escape-tier-grid h4 { margin:22px 0 10px; font-family:"Playfair Display",Georgia,serif; font-size:1.9rem; }
#packagesPanel .escape-tier-grid p { color:#52686c; line-height:1.6; }
#packagesPanel .stopover-tags { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0; }
#packagesPanel .stopover-tags span { padding:9px 13px; border:1px solid #dce5e3; border-radius:999px; background:#f7fbfa; }
#packagesPanel .package-stopover-enquiry { background:#0d5962; color:#fff; }
@media (max-width:900px) { #packagesPanel .package-family-grid, #packagesPanel .escape-tier-grid { grid-template-columns:1fr; } #packagesPanel .package-family-card { min-height:285px; } #packagesPanel .package-family-title { margin-top:35px; } }
@media (prefers-reduced-motion:reduce) { #packagesPanel .package-family-card:hover { transform:none; } }
/* PACKAGE SHOWCASE V1 — continuous white space below the hero */
#packageShowcase { background:#fff; padding:34px clamp(24px,5vw,80px) 88px; }
#packageShowcase .package-showcase-heading { display:grid; grid-template-columns:1fr 1.45fr auto; align-items:center; gap:30px; max-width:1680px; margin:0 auto 28px; }
#packageShowcase .package-showcase-heading h2 { margin:0; color:#0c333a; font-family:"Playfair Display",Georgia,serif; font-size:clamp(2.1rem,3vw,3.3rem); line-height:1.1; }
#packageShowcase .package-showcase-heading p { max-width:600px; margin:0; color:#60767a; line-height:1.55; }
#packageShowcase .package-showcase-all { padding:14px 22px; border:1px solid #e7eceb; border-radius:999px; background:#fff; color:#0c333a; box-shadow:0 7px 20px rgba(8,38,44,.07); font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
#packageShowcase .package-showcase-all span { margin-left:8px; }
#packageShowcase .hapaxora-tiers-grid { max-width:1680px; gap:24px; }
#packageShowcase .hapaxora-tier { overflow:hidden; border:1px solid #e5e9e7; border-radius:22px; background:#fff; box-shadow:0 18px 38px rgba(8,38,44,.13); }
#packageShowcase .hapaxora-tier::before { display:none; }
#packageShowcase .tier-art { height:170px; display:flex; align-items:flex-start; padding:20px; }
#packageShowcase .hapaxora-tier-budget .tier-art { background:radial-gradient(circle at 78% 15%,#caf7ee 0,transparent 42%),linear-gradient(140deg,#0a6a71,#d7eee9); }
#packageShowcase .hapaxora-tier-standard .tier-art { background:radial-gradient(circle at 75% 8%,#fff0b1 0,transparent 44%),linear-gradient(140deg,#3f98a2,#f6e8c3); }
#packageShowcase .hapaxora-tier-epic .tier-art { background:radial-gradient(circle at 78% 14%,#e5b7ff 0,transparent 42%),linear-gradient(140deg,#43216b,#ae76b9); }
#packageShowcase .tier-art span { display:inline-block; padding:10px 17px; border-radius:999px; background:rgba(255,255,255,.93); color:#123941; font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
#packageShowcase .hapaxora-tier-epic .tier-art span { color:#653590; }
#packageShowcase .tier-content { display:flex; flex-direction:column; min-height:260px; padding:24px 24px 20px; }
#packageShowcase .tier-content h3 { margin:0; color:#0c333a; font-family:"Playfair Display",Georgia,serif; font-size:clamp(1.7rem,2vw,2.3rem); line-height:1.15; }
#packageShowcase .tier-content p { margin:8px 0 20px; color:#60767a; line-height:1.5; }
#packageShowcase .tier-facts { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
#packageShowcase .tier-facts span { padding:7px 9px; border-radius:999px; background:#f1f5f4; color:#416169; font-size:.72rem; }
#packageShowcase .tier-explore { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:20px; padding:13px 17px; border:0; border-radius:999px; background:#073e47; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
#packageShowcase .hapaxora-tier-standard .tier-explore { background:#e6bd68; color:#153940; }
#packageShowcase .hapaxora-tier-epic .tier-explore { background:#6d329e; }
#packageShowcase button:focus-visible { outline:3px solid #e4bd6b; outline-offset:4px; }
@media (max-width:1000px) { #packageShowcase .package-showcase-heading { grid-template-columns:1fr auto; } #packageShowcase .package-showcase-heading p { grid-column:1; grid-row:2; } #packageShowcase .package-showcase-all { grid-column:2; grid-row:1 / 3; } }
@media (max-width:700px) { #packageShowcase { padding:28px 20px 58px; } #packageShowcase .package-showcase-heading { display:block; } #packageShowcase .package-showcase-heading p { margin:12px 0 18px; } #packageShowcase .hapaxora-tiers-grid { grid-template-columns:1fr; gap:20px; } #packageShowcase .tier-art { height:135px; } #packageShowcase .tier-content { min-height:0; } }
/* PACKAGE SHOWCASE HEADING ALIGNMENT */
@media (min-width: 1301px) {
#packageShowcase .package-showcase-heading {
grid-template-columns: minmax(330px, .8fr) minmax(500px, 1.3fr) auto;
gap: 32px;
}
#packageShowcase .package-showcase-heading p {
max-width: none;
white-space: nowrap;
}
}
@media (min-width: 701px) and (max-width: 1300px) {
#packageShowcase .package-showcase-heading {
grid-template-columns: 1fr auto;
}
#packageShowcase .package-showcase-heading p {
grid-column: 1;
grid-row: 2;
}
#packageShowcase .package-showcase-all {
grid-column: 2;
grid-row: 1 / 3;
}
}
/* PACKAGE SIGNATURE V1 */
#packageShowcase .package-signature { position:relative; display:flex; align-items:center; min-height:1.5em; max-width:none; margin:0; color:#9b7950; font-family:"Allura","Brush Script MT",cursive; font-size:clamp(1.5rem,1.95vw,2.2rem); font-weight:400; line-height:1.25; letter-spacing:0; white-space:nowrap; }
#packageShowcase .signature-pen { width:20px; height:20px; flex:0 0 20px; margin-left:4px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-20deg) translateY(-4px); }
#packageShowcase .signature-complete .signature-pen { display:none; }
@media (min-width:1301px) { #packageShowcase .package-showcase-heading { grid-template-columns:max-content minmax(0,1fr) max-content; gap:clamp(24px,2.2vw,40px); } }
@media (max-width:1300px) { #packageShowcase .package-signature { white-space:normal; min-height:2.8em; } }
@media (max-width:700px) { #packageShowcase .package-signature { font-size:1.75rem; min-height:3.3em; } }
@media (prefers-reduced-motion:reduce) { #packageShowcase .signature-pen { display:none; } }
/* WIDE PACKAGE SIGNATURE V2 */
#packageShowcase .package-showcase-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; }
#packageShowcase .package-showcase-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#packageShowcase .package-showcase-heading .package-signature { grid-column:1; grid-row:1; min-width:0; max-width:none; min-height:1.4em; overflow:hidden; margin:0; font-size:clamp(2.25rem,2.55vw,2.85rem); font-weight:700; -webkit-text-stroke:.35px currentColor; color:#8d6a43; white-space:nowrap; }
#packageShowcase .package-showcase-all { grid-column:2; grid-row:1; }
#packageShowcase .signature-pen { display:none; }
@media (max-width:1250px) {
#packageShowcase .package-showcase-heading { grid-template-columns:1fr; gap:12px; }
#packageShowcase .package-showcase-heading .package-signature { grid-column:1; grid-row:1; min-height:2.7em; overflow:visible; white-space:normal; font-size:clamp(2rem,3.2vw,2.55rem); }
#packageShowcase .package-showcase-all { grid-column:1; grid-row:2; justify-self:start; }
}
@media (max-width:700px) {
#packageShowcase .package-showcase-heading .package-signature { min-height:3.5em; font-size:clamp(1.9rem,6vw,2.3rem); }
}
/* PACKAGE SHOWCASE PHOTOS V1 */
#packageShowcase .tier-art {
position:relative; isolation:isolate; overflow:hidden;
height:clamp(220px, 22vw, 285px); padding:20px;
}
#packageShowcase .tier-art::before,
#packageShowcase .tier-art::after {
content:""; position:absolute; inset:0; z-index:0;
background-image:var(--tier-photo); background-repeat:no-repeat;
}
#packageShowcase .tier-art::before {
background-size:cover; background-position:center;
filter:blur(16px) brightness(.7); transform:scale(1.12);
}
#packageShowcase .tier-art::after { z-index:1; background-size:contain; background-position:center; }
#packageShowcase .tier-art span { position:relative; z-index:2; }
#packageShowcase .hapaxora-tier-budget .tier-art {
--tier-photo:url("assets/package-showcase/budget.jpg"); background:#809b9d;
}
#packageShowcase .hapaxora-tier-standard .tier-art {
--tier-photo:url("assets/package-showcase/standard.jpg"); background:#c8c4b1;
}
#packageShowcase .hapaxora-tier-standard .tier-art::after {
background-size:cover; background-position:center 59%;
}
#packageShowcase .hapaxora-tier-epic .tier-art {
--tier-photo:url("assets/package-showcase/epic.jpg"); background:#437b86;
}
@media (max-width:700px) {
#packageShowcase .tier-art { height:clamp(220px, 62vw, 300px); }
}
/* Package photo framing */
#packageShowcase .tier-art { height:320px; }
#packageShowcase .hapaxora-tier-budget .tier-art::after {
background-size:cover;
background-position:center;
}
#packageShowcase .hapaxora-tier-epic .tier-art::after {
background-size:cover;
background-position:center 25%;
}
@media (max-width:700px) {
#packageShowcase .tier-art { height:clamp(260px,65vw,330px); }
}
/* PACKAGE FAMILY PHOTOS V1 */
#packagesPanel .family-escapes {
background-image:linear-gradient(180deg,rgba(4,36,43,.10),rgba(4,31,39,.88)),url("assets/package-families/escapes.jpg");
background-size:cover; background-position:center 53%;
}
#packagesPanel .family-diving {
background-image:linear-gradient(180deg,rgba(3,31,49,.12),rgba(3,31,49,.87)),url("assets/packages/supporting-dcm/reef-diver-blue-water.webp");
background-size:cover; background-position:center;
}
#packagesPanel .family-stopovers {
background-image:linear-gradient(180deg,rgba(18,32,40,.12),rgba(13,30,39,.88)),url("assets/package-families/stopover.jpg");
background-size:cover; background-position:35% center;
}
/* HAPAXORA HEADER MENUS V1 */
#homeHero .nav {
display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:center; gap:26px; padding:15px clamp(22px,3vw,58px);
background:rgba(247,252,251,.93); color:#073540;
border-bottom:1px solid rgba(10,65,74,.08); z-index:10;
}
#homeHero .logo-brand { justify-self:start; }
#homeHero .logo-brand img { filter:brightness(0) saturate(100%) invert(16%) sepia(32%) saturate(1200%) hue-rotate(145deg); }
#homeHero .hapaxora-nav-center { justify-self:center; display:flex; align-items:center; gap:clamp(14px,2.1vw,38px); }
#homeHero .nav-group { position:relative; }
#homeHero .nav-trigger {
display:inline-flex; align-items:center; gap:7px; border:0; padding:11px 4px;
background:transparent; color:#073540; font:inherit; font-weight:600;
white-space:nowrap; cursor:pointer;
}
#homeHero .nav-trigger span { font-size:1.1em; line-height:.7; }
#homeHero .nav-trigger:hover, #homeHero .nav-trigger[aria-expanded="true"] { color:#9a7244; }
#homeHero .nav-menu {
position:absolute; z-index:20; top:calc(100% + 9px); left:50%; transform:translateX(-50%);
width:max-content; min-width:220px; max-width:min(320px,85vw);
padding:9px; border:1px solid #d9e5e3; border-radius:16px;
background:#fff; box-shadow:0 18px 44px rgba(5,35,43,.23); color:#173e46;
}
#homeHero .nav-menu[hidden] { display:none !important; }
#homeHero .nav-menu button {
display:block; width:100%; padding:12px 14px; border:0; border-radius:10px;
background:transparent; color:inherit; text-align:left; font:inherit; font-size:.88rem;
cursor:pointer;
}
#homeHero .nav-menu button:hover, #homeHero .nav-menu button:focus-visible { background:#eaf5f3; }
#homeHero .nav-cta {
justify-self:end; display:inline-flex; align-items:center; gap:9px;
padding:13px 22px; border:0; border-radius:999px;
background:#063846; color:#fff; font-family:"Playfair Display",Georgia,serif;
font-size:1rem; white-space:nowrap;
}
#homeHero .nav-cta:hover { background:#145665; }
@media (max-width:1050px) {
#homeHero .nav { grid-template-columns:1fr auto; gap:5px 18px; }
#homeHero .hapaxora-nav-center { grid-column:1 / -1; grid-row:2; justify-self:center; flex-wrap:wrap; justify-content:center; gap:6px 22px; }
#homeHero .nav-cta { grid-column:2; grid-row:1; }
#homeHero .navlinks a.nav-trigger { display:inline-flex; }
}
@media (max-width:600px) {
#homeHero .nav { padding:12px 16px; gap:4px 8px; }
#homeHero .logo-brand img { max-width:140px; }
#homeHero .nav-cta { padding:10px 13px; font-size:.78rem; }
#homeHero .hapaxora-nav-center { gap:0 16px; }
#homeHero .nav-trigger { font-size:.78rem; padding:9px 0; }
#homeHero .nav-group:first-child .nav-menu { left:0; transform:none; }
#homeHero .nav-group:nth-child(3) .nav-menu { left:auto; right:0; transform:none; }
}
/* Compact header and hero */
#homeHero { min-height:0; height:clamp(610px,70svh,690px); }
#homeHero .nav { padding-block:7px; gap:16px; }
#homeHero .logo-brand img { width:150px; }
#homeHero .hapaxora-nav-center { gap:20px; }
#homeHero .nav-trigger { padding-block:8px; }
#homeHero .nav-cta { padding:11px 18px; font-size:.92rem; }
#homeHero .hero-inner { max-width:1000px; padding-top:30px; padding-bottom:48px; }
#homeHero::before { background-position:center 70%; }
@media (max-width:600px) {
#homeHero { height:auto; min-height:620px; }
#homeHero .logo-brand img { width:120px; }
#homeHero .hapaxora-nav-center { gap:0 14px; }
#homeHero .hero-inner { padding:42px 20px 54px; }
}
/* Keep the signature's full space while its letters animate */
#packageShowcase .package-showcase-heading .package-signature {
display:block;
min-height:0;
position:relative;
}
#packageShowcase .package-signature::before {
content:attr(aria-label);
display:block;
visibility:hidden;
}
#packageShowcase #packageSignatureInk {
position:absolute;
top:0;
left:0;
width:100%;
display:block;
}
@media (max-width:700px) {
#packageShowcase .package-showcase-heading .package-signature {
font-size:clamp(9px,3vw,17px);
white-space:nowrap;
line-height:1.5;
overflow:hidden;
}
}
/* LEFT TO RIGHT SIGNATURE ERASE V1 */
#packageShowcase .package-showcase-heading .package-signature { position:relative; display:block; min-height:0; }
#packageShowcase .package-signature::before { content:attr(aria-label); display:block; visibility:hidden; }
#packageShowcase #packageSignatureInk { position:absolute; top:0; left:0; width:100%; display:block; }
#packageShowcase #packageSignatureInk .signature-layer {
position:absolute; top:0; left:0; display:block; width:100%; white-space:inherit;
}
/* LOCAL LAYER LETTER BUILD V1 */
#services .section-heading { max-width:none; }
#services #localLayerHeadline {
display:block; width:100%; white-space:nowrap; overflow:visible;
font-size:clamp(1.7rem,2.4vw,2.65rem); line-height:1.35;
}
#services .local-layer-letter {
display:inline-block; opacity:0;
transform:translateY(-.5em) rotate(-4deg);
transition:transform 430ms cubic-bezier(.18,1.5,.3,1),opacity 260ms ease;
}
#services .local-layer-letter.is-laid { opacity:1; transform:translateY(0) rotate(0); }
@media (max-width:900px) {
#services #localLayerHeadline { font-size:clamp(10px,2.7vw,21px); }
}
@media (prefers-reduced-motion:reduce) {
#services #localLayerHeadline { opacity:1; }
}
/* LOCAL LAYER LETTER MOTION V2 */
#services .local-layer-letter {
opacity:0; filter:blur(0);
transition:transform 620ms cubic-bezier(.16,1,.3,1),
opacity 240ms ease,filter 500ms ease;
will-change:transform,opacity;
}
#services .local-layer-letter.from-above { transform:translate3d(0,-1.4em,0) rotate(-7deg); }
#services .local-layer-letter.from-left { transform:translate3d(-1.25em,0,0) rotate(-5deg); }
#services .local-layer-letter.from-depth { transform:translate3d(0,.1em,0) scale(2.25); filter:blur(2px); }
#services .local-layer-letter.is-laid { opacity:1; transform:translate3d(0,0,0) scale(1) rotate(0); filter:blur(0); }
#services .local-layer-letter.is-final.is-laid {
animation:local-layer-brake 900ms both;
}
#services .is-measuring .local-layer-letter { transform:none !important; filter:none !important; animation:none !important; }
@keyframes local-layer-brake {
0% { opacity:0; transform:translateX(-1.4em) rotate(-5deg); }
64% { opacity:1; transform:translateX(.16em) rotate(1deg); }
84% { opacity:1; transform:translateX(-.05em) rotate(0); }
100% { opacity:1; transform:translateX(0) rotate(0); }
}
@media (prefers-reduced-motion:reduce) {
#services .local-layer-letter { transition:none; animation:none; }
}
/* MATCHED ANIMATED HEADLINES V1 */
#packageShowcase { padding-bottom:24px; }
#services { padding-top:34px; }
#services .section-heading {
max-width:none; margin-left:auto; margin-right:auto; text-align:center;
}
#services .section-heading .eyebrow {
margin:0 0 12px; color:#0c4350; font-size:.88rem;
font-weight:800; letter-spacing:.22em;
}
#services #localLayerHeadline {
margin:0; font-size:clamp(2.25rem,2.55vw,2.85rem);
text-align:center; line-height:1.35;
}
#services .local-layer-letter.is-final.is-laid {
animation-duration:620ms;
}
@media (max-width:1250px) {
#services #localLayerHeadline { font-size:clamp(2rem,3.2vw,2.55rem); }
}
@media (max-width:700px) {
#packageShowcase { padding-bottom:22px; }
#services { padding-top:30px; }
#services #localLayerHeadline { font-size:clamp(9px,3vw,17px); }
}
@media (max-width:700px) {
#packageShowcase .package-showcase-all {
width:max-content;
min-height:34px;
padding:7px 11px;
font-size:.72rem;
line-height:1.2;
}
#packageShowcase .package-showcase-all span { margin-left:4px; }
}
/* EXTREME WATER SPORTS PHOTO V1 */
#experienceCardGrid .extreme-water-sports-photo {
width:100%; height:100%; object-fit:cover; object-position:center 52%;
}
/* Compact service pills */
#services .section-heading { margin-bottom:24px; }
#services .cards {
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
max-width:960px;
margin-inline:auto;
}
#services .cards .card {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-width:0;
min-height:58px;
padding:10px 12px;
border-radius:999px;
background:#fff;
box-shadow:0 10px 26px rgba(8,47,54,.12),0 0 20px rgba(181,222,219,.3);
white-space:nowrap;
}
#services .cards .card h3 {
margin:0;
font:700 1rem Inter,system-ui,sans-serif;
}
#services .cards .card p,
#services .cards .card .num { display:none; }
#services .cards .card-action {
margin:0;
color:inherit;
font-size:0;
letter-spacing:0;
}
#services .cards .card-action::after {
content:"▾";
font-size:1.1rem;
}
#services .cards .card[aria-expanded="true"] {
background:#0d5962;
border-color:#0d5962;
color:#fff;
}
@media (max-width:600px) {
#services .cards {
grid-template-columns:repeat(4,minmax(0,1fr));
gap:4px;
max-width:none;
margin-inline:-12px;
}
#services .cards .card {
gap:2px;
min-height:44px;
padding:6px 4px;
}
#services .cards .card h3 {
font-size:clamp(8px,2.55vw,10.5px);
}
#services .cards .card-action::after { font-size:11px; }
}
/* Diving experience: direct route to curated packages */
#experienceCardGrid .diving-card-actions {
display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px;
}
#experienceCardGrid .diving-card-actions > .button { margin:0; }
#experienceCardGrid .diving-packages-link {
background:#edf5f4; color:#0d5962; border:1px solid #b9d3d0;
border-radius:999px; font:inherit; font-size:.88rem; font-weight:700;
padding:13px 18px; cursor:pointer;
}
#experienceCardGrid .diving-packages-link:hover { background:#dceeea; }
#experienceCardGrid .diving-packages-link:focus-visible { outline:3px solid #d6ac5b; outline-offset:3px; }
/* MOBILE HERO SHORELINE CROP V1 */
@media (max-width: 600px) {
#homeHero::before {
background-size: cover;
background-position: center 70%;
transform: scale(1.2);
transform-origin: center 65%;
}
}
/* EXPERIENCE RECTANGLES AND HERITAGE V1 */
#experienceCardGrid {
display:grid !important; grid-template-columns:minmax(0,1fr) !important;
width:100% !important; gap:26px !important;
}
#experienceCardGrid > .experience-list-card {
display:grid !important; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) !important;
width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important;
border:1px solid #dce5e3 !important; border-radius:24px !important;
overflow:hidden !important; background:#fff !important;
box-shadow:0 14px 36px rgba(8,38,44,.1) !important;
}
#experienceCardGrid .experience-list-image {
position:relative !important; inset:auto !important; width:100% !important;
height:100% !important; min-height:300px !important;
}
#experienceCardGrid .experience-list-image img {
position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
object-fit:cover !important; transform:none !important;
}
#experienceCardGrid .experience-list-image::after { background:linear-gradient(180deg,transparent 65%,rgba(3,27,32,.2)) !important; }
#experienceCardGrid .experience-list-info {
position:relative !important; inset:auto !important; display:flex !important;
flex-direction:column !important; justify-content:center !important;
width:100% !important; height:auto !important; min-height:0 !important;
padding:28px 32px !important; background:#fff !important; color:#0c333a !important;
}
#experienceCardGrid .experience-list-info h3 {
margin:0 0 12px !important; max-width:none !important;
font-size:clamp(1.7rem,2.5vw,2.8rem) !important; line-height:1.12 !important; color:#0c333a !important;
}
#experienceCardGrid .experience-list-summary {
display:block !important; margin:0 0 16px !important; overflow:visible !important;
color:#60767a !important; font-size:1rem !important; line-height:1.6 !important;
-webkit-line-clamp:unset !important;
}
#experienceCardGrid .experience-list-facts { display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin:0 0 18px !important; }
#experienceCardGrid .experience-list-facts span { display:inline-block !important; }
#experienceCardGrid .experience-list-button { width:fit-content !important; margin:0 !important; }
#experienceCardGrid .diving-card-actions { margin-top:0; }
#experienceCardGrid .heritage-main-photo, .heritage-tier-photo {
background:linear-gradient(145deg,#b9e5dd,#146c79 60%,#073640);
}
.heritage-photo-label { display:grid; place-items:center; height:100%; min-height:170px; color:white; font-family:"Playfair Display",Georgia,serif; font-size:1.8rem; }
.heritage-choose { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; margin-top:8px; padding:18px 0 0; border:0; border-top:1px solid #dce5e3; background:white; color:#0c333a; font:600 1.15rem "Playfair Display",Georgia,serif; cursor:pointer; }
.heritage-options { grid-column:1 / -1; padding:22px; }
.heritage-options[hidden], .heritage-detail[hidden] { display:none !important; }
.heritage-tier-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.heritage-tier { --heritage-glow:37,174,153; border:1px solid #dce5e3; border-radius:22px; overflow:hidden; background:white; box-shadow:0 12px 25px rgba(8,38,44,.08),0 0 15px rgba(var(--heritage-glow),.24); }
.heritage-tier-standard { --heritage-glow:220,170,62; }
.heritage-tier-epic { --heritage-glow:151,91,225; }
.heritage-tier-photo { aspect-ratio:1.8; overflow:hidden; }
.heritage-tier-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.heritage-tier-standard .heritage-tier-photo { background:linear-gradient(145deg,#f6e8c3,#b49763); }
.heritage-tier-epic .heritage-tier-photo { background:linear-gradient(145deg,#ae76b9,#43216b); }
.heritage-tier-content { padding:22px; }
.heritage-tier-content h4 { margin:0 0 10px; font:600 2rem "Playfair Display",Georgia,serif; color:#0c333a; }
.heritage-duration { margin:0 0 10px; color:#60767a; font-size:.95rem; }
.heritage-price { margin:0 0 16px; color:#0c333a; font:600 2rem "Playfair Display",Georgia,serif; }
.heritage-price small { font:400 .9rem Inter,system-ui,sans-serif; }
.heritage-tier-content ul { min-height:100px; padding:16px 0 0 19px; margin:0 0 20px; border-top:1px solid #e7eceb; color:#60767a; line-height:1.8; font-size:.93rem; }
.heritage-tier-explore { display:flex; justify-content:space-between; align-items:center; width:100%; padding:13px 17px; border:0; border-radius:999px; color:#fff; background:#073e47; font:700 .95rem Inter,system-ui,sans-serif; cursor:pointer; }
.heritage-tier-standard .heritage-tier-explore { background:#e6bd68; color:#153940; }
.heritage-tier-epic .heritage-tier-explore { background:#6d329e; }
.heritage-detail { margin-top:24px; padding:24px; border:1px solid #dce5e3; border-radius:18px; background:#f7fbfa; }
.heritage-detail h4 { margin:0; color:#0c333a; font:600 1.6rem "Playfair Display",Georgia,serif; }
.heritage-detail p { color:#60767a; line-height:1.7; }
.heritage-detail .button { background:#073e47; color:#fff; }
.heritage-choose:focus-visible, .heritage-tier-explore:focus-visible { outline:3px solid #e6bd68; outline-offset:4px; }
@media (max-width:700px) {
#experienceCardGrid > .experience-list-card { grid-template-columns:minmax(0,1fr) !important; }
#experienceCardGrid .experience-list-image { height:200px !important; min-height:0 !important; }
#experienceCardGrid .experience-list-info { padding:20px !important; }
#experienceCardGrid .experience-list-info h3 { font-size:1.55rem !important; }
#experienceCardGrid .experience-list-summary { font-size:.93rem !important; }
.heritage-options { padding:16px; }
.heritage-tier-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
.heritage-tier-content ul { min-height:0; }
}
/* SHERATON SINGLE CARD V1 */
#sheratonFullExperience .sx-card {box-sizing:border-box;width:min(1120px,100%)!important;margin:auto!important;background:#fffdf8;border:1px solid #e8e4db;border-radius:24px;overflow:hidden;box-shadow:0 20px 70px #001e2855;color:#153d45}
#sheratonFullExperience .sx-heading {position:relative;padding:30px 70px 22px 32px}
#sheratonFullExperience .sx-heading h2 {margin:8px 0;font-family:Georgia,serif;font-size:clamp(26px,3.5vw,46px);line-height:1.12}
#sheratonFullExperience .sx-heading p {margin:8px 0;max-width:820px;line-height:1.6}
#sheratonFullExperience .sx-kicker {font-size:11px;font-weight:700;letter-spacing:.15em;color:#50777c}
#sheratonFullExperience #closeSheratonExperienceTop {position:absolute!important;top:20px!important;right:20px!important}
#sheratonFullExperience .sx-gallery {margin:0 20px;position:relative;border-radius:17px;overflow:hidden;background:#0d343d}
#sheratonFullExperience .sx-window {overflow:hidden;touch-action:pan-y}
#sheratonFullExperience .sx-track {display:flex;transition:transform .65s ease;will-change:transform}
#sheratonFullExperience .sx-slide {flex:0 0 100%;min-width:0;height:360px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;box-sizing:border-box}
#sheratonFullExperience .sx-slide:first-child {grid-template-columns:1fr}
#sheratonFullExperience .sx-tile {position:relative;margin:0;min-width:0;overflow:hidden}
#sheratonFullExperience .sx-tile img {width:100%;height:100%;display:block;object-fit:cover}
#sheratonFullExperience .sx-caption {position:absolute;inset:auto 0 0;padding:65px 16px 20px;background:linear-gradient(transparent,#07282fed);color:white;line-height:1.45}
#sheratonFullExperience .sx-caption h3 {margin:4px 0;font-family:Georgia,serif;font-size:clamp(18px,2.2vw,29px);color:white}
#sheratonFullExperience .sx-caption p {margin:5px 0;font-size:13px;color:#fff}
#sheratonFullExperience .sx-controls {display:flex;justify-content:center;align-items:center;gap:10px;padding:10px;background:#fffdf8}
#sheratonFullExperience .sx-controls button {border:1px solid #d4dfdc;border-radius:99px;background:#fff;color:#153d45;min-height:32px;min-width:32px;cursor:pointer}
#sheratonFullExperience .sx-dot[aria-current=true] {background:#164b55;color:white}
#sheratonFullExperience .sx-details {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;padding:30px 32px}
#sheratonFullExperience .sheraton-experience-copy {min-width:0}
#sheratonFullExperience .sheraton-experience-copy h2 {font-size:clamp(25px,3vw,36px)!important;margin:8px 0 15px!important;line-height:1.2!important}
#sheratonFullExperience .sheraton-experience-lede {font-size:15px!important;line-height:1.6!important}
#sheratonFullExperience .sheraton-fact-row {display:grid!important;grid-template-columns:1fr!important;gap:18px!important;margin:24px 0!important}
#sheratonFullExperience .sheraton-fact {position:relative;padding:0 0 0 40px!important;border:0!important;background:transparent!important}
#sheratonFullExperience .sheraton-fact-icon {position:absolute;left:0;top:0;width:28px;height:28px;border:1px solid #c5a96d;border-radius:50%;text-align:center;line-height:26px;color:#9b7433}
#sheratonFullExperience .sheraton-fact h4 {margin:0 0 6px!important;font-size:18px!important}
#sheratonFullExperience .sheraton-fact p,#sheratonFullExperience .sheraton-planning-note p {font-size:14px!important;line-height:1.6!important;margin:0!important}
#sheratonFullExperience .sheraton-planning-note {padding:18px!important;background:#f5f2eb;border-radius:14px}
#sheratonFullExperience .sx-private {position:relative;padding:24px;border:1px solid #d5e1e2;border-radius:18px;background:linear-gradient(#f8fbfb,#edf4f2)}
#sheratonFullExperience .sx-private h3 {font-family:Georgia,serif;font-size:25px;margin:8px 0}
#sheratonFullExperience .sx-private p {font-size:13px;line-height:1.6;color:#627f85}
#sheratonFullExperience .sx-badge {float:right;padding:7px 11px;background:#164b55;color:white;border-radius:99px;font-size:9px;letter-spacing:.1em}
#sheratonFullExperience .sx-lock {padding:18px;margin-top:16px;background:#ffffffb8;border-radius:14px;font-size:14px;line-height:1.5}
#sheratonFullExperience .sx-login {border:0;background:none;color:#164b55;padding:6px 0;font-weight:700;cursor:pointer}
#sheratonFullExperience .sheraton-enquiry-panel {margin-top:18px;padding:22px!important;border-radius:18px!important;background:#f4f1ea!important}
#sheratonFullExperience .sheraton-enquiry-panel h3 {font-size:24px!important;line-height:1.2!important}
#sheratonFullExperience .sheraton-enquiry-panel p {font-size:14px!important;line-height:1.6!important}
#sheratonFullExperience .sheraton-close-row {padding:0 32px 25px!important;background:transparent!important}
@media(max-width:700px) {
#sheratonFullExperience {padding:12px 8px!important}
#sheratonFullExperience .sx-heading {padding:22px 55px 18px 18px}
#sheratonFullExperience .sx-gallery {margin:0 10px}
#sheratonFullExperience .sx-slide {height:280px;gap:3px}
#sheratonFullExperience .sx-caption {padding:45px 7px 12px}
#sheratonFullExperience .sx-caption h3 {font-size:clamp(12px,3.4vw,20px)}
#sheratonFullExperience .sx-caption p {font-size:10px;line-height:1.4}
#sheratonFullExperience .sx-details {grid-template-columns:1fr;gap:22px;padding:24px 18px}
}
@media(prefers-reduced-motion:reduce){#sheratonFullExperience .sx-track{transition:none}}
/* SHERATON FLOATING PLAY PAUSE V1 */
#sheratonFullExperience .sx-controls {position:relative;overflow:visible}
#sheratonFullExperience .sx-controls .sx-pause {position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);z-index:5;display:grid;place-items:center;width:40px;height:40px;padding:8px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:white;filter:drop-shadow(0 2px 3px #0009);font-size:0;cursor:pointer}
#sheratonFullExperience .sx-pause::before {content:"";display:block;width:19px;height:22px;background:linear-gradient(to right,currentColor 0 35%,transparent 35% 65%,currentColor 65% 100%)}
#sheratonFullExperience .sx-pause[aria-label="Play photo slideshow"]::before {background:currentColor;clip-path:polygon(12% 0,100% 50%,12% 100%)}
#sheratonFullExperience .sx-pause:hover {color:#efd495}
#sheratonFullExperience .sx-pause:focus-visible {outline:2px solid white;outline-offset:2px}
/* HERITAGE TOUR PANELS V1 */
#heritageTourModal {box-sizing:border-box;width:min(790px,calc(100vw - 40px));max-width:none;max-height:90dvh;padding:0;border:1px solid #e6e2d8;border-radius:25px;background:#fffefa;color:#103945;overflow:hidden;box-shadow:0 24px 90px #001a3866}
#heritageTourModal::backdrop {background:rgba(12,28,29,.55);backdrop-filter:blur(4px)}
#heritageTourModal[open] {display:flex;flex-direction:column;animation:ht-enter .28s ease-out}
#heritageTourModal * {box-sizing:border-box}
#heritageTourModal .ht-scroll {overflow:auto;min-height:0;overscroll-behavior:contain}
#heritageTourModal .ht-photo {height:245px;position:relative;background:linear-gradient(135deg,#b4d2c9,#ead6b1);overflow:hidden}
#heritageTourModal .ht-photo img {width:100%;height:100%;object-fit:cover;display:block}
#heritageTourModal .ht-photo span {display:grid;place-items:center;height:100%;font-family:Georgia,serif;font-size:28px;color:#174b55}
#heritageTourModal .ht-close {position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:white;color:#103945;font-size:26px;cursor:pointer;z-index:2;box-shadow:0 2px 8px #0002}
#heritageTourModal .ht-content {padding:20px 28px}
#heritageTourModal .ht-tier {display:inline-block;border-radius:99px;background:var(--ht-tint);padding:5px 15px;letter-spacing:.16em;font-size:10px;font-weight:700;text-transform:uppercase}
#heritageTourModal h2 {font-family:Georgia,serif;font-size:clamp(25px,3vw,37px);line-height:1.16;margin:10px 0 14px;color:#103945}
#heritageTourModal .ht-meta {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
#heritageTourModal .ht-price {font-family:Georgia,serif;white-space:nowrap;font-size:34px;font-weight:700}
#heritageTourModal .ht-price small {font-size:13px;font-weight:400}
#heritageTourModal .ht-tabs {display:flex;gap:22px;border-top:1px solid #dde5e5;border-bottom:1px solid #dde5e5;margin:22px 0 18px}
#heritageTourModal .ht-tabs button {border:0;border-bottom:2px solid transparent;background:transparent;padding:15px 9px;font-family:Georgia,serif;color:#526b75;cursor:pointer}
#heritageTourModal .ht-tabs button[aria-selected=true] {border-bottom-color:#124e5a;color:#103945;font-weight:700}
#heritageTourModal .ht-panel {font-size:14px;line-height:1.65}
#heritageTourModal [hidden] {display:none!important}
#heritageTourModal .ht-route {list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;counter-reset:stops}
#heritageTourModal .ht-route li {position:relative;counter-increment:stops;padding:0 0 24px 48px;break-inside:avoid}
#heritageTourModal .ht-route li::before {content:counter(stops,decimal-leading-zero);position:absolute;left:0;top:0;width:33px;height:33px;border:1px solid #cfb373;border-radius:50%;text-align:center;line-height:31px;font-family:Georgia,serif;background:#fffefa}
#heritageTourModal .ht-route li::after {content:'';position:absolute;left:16px;top:36px;bottom:4px;width:1px;background:#d8bc83}
#heritageTourModal .ht-route li:last-child::after {display:none}
#heritageTourModal .ht-route strong {display:block;font-family:Georgia,serif;font-size:15px;line-height:1.4}
#heritageTourModal .ht-route p {margin:5px 0;color:#617780;font-size:13px;line-height:1.5}
#heritageTourModal .ht-note {padding:14px;border-radius:12px;background:#f5f2eb;color:#60757c;font-size:13px}
#heritageTourModal .ht-included {padding-left:20px}
#heritageTourModal .ht-included li {margin:10px 0}
#heritageTourModal .ht-footer {flex-shrink:0;padding:15px 28px 18px;border-top:1px solid #dde5e5;background:#fffefa;display:flex;align-items:center;justify-content:space-between;gap:15px}
#heritageTourModal .ht-footer a {display:block;text-align:center;padding:14px 24px;border-radius:12px;background:#064c5c;color:white;text-decoration:none;font-family:Georgia,serif;font-size:17px}
#heritageTourModal .ht-footer small {display:block;font-size:11px;color:#617780;margin-top:5px;text-align:center}
#heritageTourModal .ht-footer-summary {font-family:Georgia,serif;font-size:18px;white-space:nowrap}
@keyframes ht-enter {from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
#heritageTourModal {width:100%;max-height:88dvh;margin:auto 0 0;border-radius:25px 25px 0 0;border-bottom:0;animation:ht-up .3s ease-out}
#heritageTourModal .ht-scroll {padding-top:24px}
#heritageTourModal::before {content:'';position:absolute;top:10px;left:calc(50% - 20px);height:4px;width:40px;background:#bdc7cb;border-radius:99px;z-index:3}
#heritageTourModal .ht-photo {height:175px;margin:10px 12px 0;border-radius:15px}
#heritageTourModal .ht-close {top:4px;right:7px;width:29px;height:29px;background:#fffefa;box-shadow:none;font-size:24px}
#heritageTourModal .ht-content {padding:17px 20px}
#heritageTourModal .ht-route {grid-template-columns:1fr}
#heritageTourModal .ht-meta {font-size:12px;gap:8px}
#heritageTourModal .ht-price {font-size:28px}
#heritageTourModal .ht-tabs {gap:12px}
#heritageTourModal .ht-footer {padding:12px 16px max(12px,env(safe-area-inset-bottom));display:block}
#heritageTourModal .ht-footer-summary {display:none}
#heritageTourModal .ht-footer a {width:100%}
}
@keyframes ht-up {from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#heritageTourModal[open]{animation:none!important}}
/* SHERATON FLOATING PANEL AND MOBILE SHEET V1 */
#sheratonFullExperience:not([hidden]) {
display:flex!important;align-items:center!important;justify-content:center!important;
padding:20px!important;overflow:hidden!important;
background:rgba(12,28,29,.55)!important;backdrop-filter:blur(4px);
}
#sheratonFullExperience .sx-card {
flex:0 1 1120px;width:min(1120px,100%)!important;max-height:90vh;max-height:90dvh;
min-height:0;margin:0!important;overflow-x:hidden!important;overflow-y:auto!important;
overscroll-behavior:contain;border-radius:25px!important;
animation:sheraton-panel-enter .28s ease-out;
}
@keyframes sheraton-panel-enter {
from {opacity:0;transform:translateY(15px)}
to {opacity:1;transform:translateY(0)}
}
@media(max-width:600px) {
#sheratonFullExperience:not([hidden]) {
align-items:flex-end!important;padding:0!important;
}
#sheratonFullExperience .sx-card {
flex:0 1 auto;width:100%!important;max-height:88vh;max-height:88dvh;
border-radius:25px 25px 0 0!important;border-bottom:0;
padding-bottom:env(safe-area-inset-bottom);
animation:sheraton-sheet-enter .3s ease-out;
}
#sheratonFullExperience .sx-card::before {
content:'';display:block;width:40px;height:4px;
margin:10px auto 0;background:#bdc7cb;border-radius:99px;
}
#sheratonFullExperience .sx-heading {padding-top:18px}
}
@keyframes sheraton-sheet-enter {
from {transform:translateY(100%);opacity:.7}
to {transform:translateY(0);opacity:1}
}
@media(prefers-reduced-motion:reduce) {
#sheratonFullExperience .sx-card {animation:none!important}
}
/* CARD HERO IMAGE ACTIONS V1 */
[data-card-image-action] {cursor:pointer!important}
[data-card-image-action]:focus-visible {outline:3px solid #c5a363!important;outline-offset:-4px!important}
/* DIVING INLINE EXPANSION V1 */
#experiencesPanel.dx-expanded .experience-list-heading,#experiencesPanel.dx-expanded #experienceCardGrid > [hidden] {display:none!important}
#experiencesPanel .dx-intro[hidden] {display:none!important}
#experiencesPanel .dx-intro {width:100%;max-width:920px;padding:0 0 22px;margin:0!important;scroll-margin-top:28px}
#experiencesPanel .dx-intro h2 {font-size:clamp(27px,3vw,42px)!important;line-height:1.15;margin:10px 0 14px!important;color:#153d45}
#experiencesPanel .dx-intro > p:last-child {font-size:15px;line-height:1.65;max-width:780px;margin:0}
#divingExperienceModal.dx-inline {position:static!important;inset:auto!important;z-index:auto!important;display:block!important;grid-column:1/-1;width:100%!important;height:auto!important;max-height:none!important;padding:0!important;margin:0!important;background:transparent!important;overflow:visible!important;backdrop-filter:none!important}
#divingExperienceModal.dx-inline[hidden] {display:none!important}
#divingExperienceModal.dx-inline .diving-window {width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;animation:none!important}
#divingExperienceModal.dx-inline .diving-body {padding:0!important;background:transparent!important}
#divingExperienceModal.dx-inline .diving-experience-grid {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:24px!important;margin:0!important}
#divingExperienceModal.dx-inline .diving-experience-card {display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important;min-height:270px!important;width:100%!important;max-width:none!important;padding:0!important;border:1px solid #dce5e3!important;border-radius:24px!important;overflow:hidden!important;background:white!important;box-shadow:0 14px 36px #08262c18!important;transform:none!important}
#divingExperienceModal.dx-inline .dx-photo {position:relative;min-height:270px;cursor:pointer}
#divingExperienceModal.dx-inline .dx-photo img {position:absolute;inset:0;display:block;width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important;border-radius:0!important}
#divingExperienceModal.dx-inline .diving-experience-copy {position:static!important;background:white!important;padding:28px 32px!important;align-self:center}
#divingExperienceModal.dx-inline .diving-experience-copy h3 {font-size:clamp(24px,2.5vw,34px)!important;line-height:1.15;color:#153d45;margin:8px 0 13px!important}
#divingExperienceModal.dx-inline .diving-experience-copy p {font-size:14px!important;line-height:1.65!important;color:#62777e}
#divingExperienceModal.dx-inline .diving-experience-copy span {display:block;font-size:12px;margin-bottom:16px;color:#56717a}
#divingExperienceModal.dx-inline .dx-row-action,#divingExperienceModal.dx-inline .dx-back {display:inline-block;border:0;border-radius:99px;background:#124b57;color:white;font:inherit;font-size:14px;padding:12px 20px;cursor:pointer;text-decoration:none}
#divingExperienceModal.dx-inline .dx-back-row {padding:24px 0;text-align:center}
#divingExperienceModal.dx-inline .experience-modal-bottom-close {display:none!important}
#divingExperienceModal.dx-inline .diving-planning {margin-top:28px!important}
#divingExperienceModal.dx-inline .dx-photo:focus-visible {outline:3px solid #c5a363;outline-offset:-4px}
#padiCoursesModal:not([hidden]) {display:flex!important;align-items:center!important;justify-content:center!important;padding:20px!important;overflow:hidden!important;background:rgba(12,28,29,.55)!important;backdrop-filter:blur(4px)}
#padiCoursesModal .padi-window {width:min(1120px,100%)!important;max-height:90vh!important;max-height:90dvh!important;margin:0!important;overflow:auto!important;overscroll-behavior:contain;border-radius:25px!important;animation:dx-panel-enter .28s ease-out}
@keyframes dx-panel-enter {from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
#divingExperienceModal.dx-inline .diving-experience-card {grid-template-columns:1fr!important}
#divingExperienceModal.dx-inline .dx-photo {min-height:220px;height:220px}
#divingExperienceModal.dx-inline .diving-experience-copy {padding:22px!important}
}
@media(max-width:600px){
#padiCoursesModal:not([hidden]) {align-items:flex-end!important;padding:0!important}
#padiCoursesModal .padi-window {width:100%!important;max-height:88vh!important;max-height:88dvh!important;border-radius:25px 25px 0 0!important;animation:dx-sheet-enter .3s ease-out;padding-bottom:env(safe-area-inset-bottom)}
}
@keyframes dx-sheet-enter {from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#padiCoursesModal .padi-window{animation:none!important}}
/* MOBILE EXPERIENCE AND DIVING CARD MATCH V1 */
#experienceCardGrid .diving-card-actions,
#divingExperienceModal .dx-card-actions {
display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
}
#experienceCardGrid .diving-card-actions > button {
display:inline-flex !important;
justify-content:center; align-items:center;
margin:0 !important; padding:12px 20px !important;
border:0 !important; border-radius:99px !important;
background:#124b57 !important; color:white !important;
font-size:14px !important; line-height:1.4 !important;
cursor:pointer;
}
#divingExperienceModal .dx-card-actions > .dx-row-action {
display:inline-flex !important; align-items:center;
justify-content:center; margin:0 !important;
}
@media(max-width:700px) {
#experienceCardGrid > .experience-list-card,
#divingExperienceModal.dx-inline .diving-experience-card {
grid-template-columns:minmax(0,1fr) !important;
min-height:0 !important;
}
#experienceCardGrid .experience-list-image,
#divingExperienceModal.dx-inline .dx-photo {
height:200px !important; min-height:200px !important;
}
#experienceCardGrid .experience-list-info,
#divingExperienceModal.dx-inline .diving-experience-copy {
padding:20px !important;
}
#experienceCardGrid .diving-card-actions,
#divingExperienceModal .dx-card-actions {
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
#experienceCardGrid .diving-card-actions > button,
#divingExperienceModal .dx-card-actions > .dx-row-action {
width:100% !important; min-width:0 !important;
text-align:center; white-space:normal !important;
font-size:13px !important;
}
}
/* Stack diving buttons in two rows */
#experienceCardGrid .diving-card-actions,
#divingExperienceModal .dx-card-actions {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
gap:10px !important;
}
#experienceCardGrid .diving-card-actions > button,
#divingExperienceModal .dx-card-actions > .dx-row-action {
width:100% !important;
justify-content:center !important;
text-align:center !important;
background:#124b57 !important;
color:#fff !important;
}
/* Mobile floating experience cards */
@media (max-width:700px) {
#experiencesPanel {
box-sizing:border-box !important;
width:calc(100vw - 16px) !important;
max-width:none !important;
margin-left:calc((100% - 100vw)/2 + 8px) !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#experiencesPanel > .service-panel-inner {
width:100% !important;
max-width:none !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#experiencesPanel .experience-list-heading,
#experiencesPanel .dx-intro {
padding:18px 10px !important;
}
#experiencesPanel #experienceCardGrid,
#divingExperienceModal.dx-inline .diving-experience-grid {
width:100% !important;
padding:0 !important;
gap:22px !important;
background:transparent !important;
}
#experienceCardGrid > .experience-list-card,
#divingExperienceModal.dx-inline .diving-experience-card {
box-sizing:border-box !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
border:1px solid rgba(19,67,62,.1) !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:0 8px 24px rgba(12,48,43,.09) !important;
}
}
/* Mobile floating Dive Journeys cards */
@media(max-width:700px) {
#packagesPanel:has(#diveJourneysPanel:not([hidden])) {
box-sizing:border-box !important;
width:calc(100vw - 16px) !important;
max-width:none !important;
margin-left:calc((100% - 100vw)/2 + 8px) !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#packagesPanel:has(#diveJourneysPanel:not([hidden]))
> .service-panel-inner,
#diveJourneysPanel {
width:100% !important;
max-width:none !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#diveJourneysPanel .package-card-grid {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
width:100% !important;
padding:0 !important;
gap:22px !important;
background:transparent !important;
}
#diveJourneysPanel .package-list-card {
box-sizing:border-box !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
border:1px solid rgba(19,67,62,.1) !important;
border-radius:20px !important;
overflow:hidden !important;
background:#fff !important;
box-shadow:0 8px 24px rgba(12,48,43,.09) !important;
}
}
/* Floating mobile cards throughout Packages */
@media(max-width:700px) {
#packagesPanel {
box-sizing:border-box !important;
width:calc(100vw - 16px) !important;
max-width:none !important;
margin-left:calc((100% - 100vw)/2 + 8px) !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#packagesPanel > .service-panel-inner {
width:100% !important;
max-width:none !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#packagesPanel .package-family-grid,
#packagesPanel .package-card-grid {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
width:100% !important;
padding:0 !important;
gap:22px !important;
background:transparent !important;
}
#packagesPanel .package-family-card,
#packagesPanel .package-list-card {
box-sizing:border-box !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
border:1px solid rgba(19,67,62,.1) !important;
border-radius:20px !important;
overflow:hidden !important;
box-shadow:0 8px 24px rgba(12,48,43,.09) !important;
}
}
/* Floating mobile Stays and Transport */
@media(max-width:700px) {
#staysPanel, #transportPanel {
box-sizing:border-box !important;
width:calc(100vw - 16px) !important;
max-width:none !important;
margin-left:calc((100% - 100vw)/2 + 8px) !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#staysPanel > .service-panel-inner,
#transportPanel > .service-panel-inner {
width:100% !important;
max-width:none !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
#staysPanel .hotel-card,
#transportPanel .transport-option {
box-sizing:border-box !important;
width:100% !important;
max-width:none !important;
border:1px solid rgba(19,67,62,.1) !important;
border-radius:20px !important;
overflow:hidden !important;
background:#fff !important;
box-shadow:0 8px 24px rgba(12,48,43,.09) !important;
}
#staysPanel .hotel-card {
margin:0 0 22px !important;
}
#transportPanel .transport-grid {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
width:100% !important;
padding:0 !important;
gap:22px !important;
background:transparent !important;
}
#transportPanel .transport-option {
margin:0 !important;
}
}
@media(max-width:700px) {
#staysPanel .hotel-hero {
box-sizing:border-box !important;
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}
#staysPanel .hotel-hero > img {
display:block !important;
width:100% !important;
max-width:none !important;
}
}
/* Dive Journeys: match diving experience rows */
#diveJourneysPanel .package-card-grid {
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
gap:24px !important;
}
#diveJourneysPanel .package-list-card {
display:grid !important;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) !important;
width:100% !important;
max-width:none !important;
height:auto !important;
min-height:270px !important;
padding:0 !important;
border:1px solid #dce5e3 !important;
border-radius:24px !important;
overflow:hidden !important;
background:#fff !important;
box-shadow:0 14px 36px rgba(8,38,44,.09) !important;
}
#diveJourneysPanel .package-list-image {
position:relative !important;
inset:auto !important;
width:100% !important;
height:100% !important;
min-height:270px !important;
margin:0 !important;
}
#diveJourneysPanel .package-list-image img {
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
transform:none !important;
}
#diveJourneysPanel .package-list-info {
position:static !important;
width:100% !important;
height:auto !important;
padding:28px 32px !important;
background:#fff !important;
color:#153d45 !important;
align-self:center !important;
}
#diveJourneysPanel .package-list-info h3 {
font-size:clamp(24px,2.5vw,34px) !important;
line-height:1.15 !important;
color:#153d45 !important;
margin:8px 0 13px !important;
}
#diveJourneysPanel .package-list-summary {
font-size:14px !important;
line-height:1.65 !important;
color:#62777e !important;
}
#diveJourneysPanel .package-list-button {
background:#124b57 !important;
color:#fff !important;
border:0 !important;
border-radius:99px !important;
padding:12px 20px !important;
font-size:14px !important;
cursor:pointer;
}
@media(max-width:700px) {
#diveJourneysPanel .package-list-card {
grid-template-columns:minmax(0,1fr) !important;
min-height:0 !important;
border-radius:20px !important;
}
#diveJourneysPanel .package-list-image {
height:220px !important;
min-height:220px !important;
}
#diveJourneysPanel .package-list-info {
padding:22px !important;
}
#diveJourneysPanel .package-list-button {
width:100% !important;
text-align:center !important;
}
}