/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Root type scale.
The design was visually tuned at the office monitor's ~1920px CSS width. On laptops
(commonly 125% Windows display scaling -> ~1536px effective CSS width at DPR 1.25) the
same design renders proportionally larger, which is why setting the browser to 80% zoom
"fixed" it (0.80 = 1 / 1.25). Scaling the root font-size fluidly below the 1920px
reference makes every rem / em / ch based size shrink to match, so the site displays
correctly at 100% browser zoom on laptops. No effect at >=1920px (office reference) or
below 1000px (mobile/tablet keep the original 16px base and existing breakpoints). */
html { font-size: 16px; }
@media (min-width: 1000px) {
html { font-size: clamp(13px, 0.834vw, 16px); }
}
body {
font-family: 'Inter', system-ui, sans-serif;
color: #0f1a24;
background: #faf7f2;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.eyebrow {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1594D8;
font-weight: 600;
margin-bottom: 14px;
}
h1, h2, h3 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
border-radius: 999px;
font-weight: 500;
font-size: 0.875rem;
letter-spacing: 0.02em;
cursor: pointer;
border: 1px solid transparent;
transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: #1594D8; color: #fff; box-shadow: 0 4px 14px rgba(21,148,216,0.25); }
.btn--primary:hover { background: #1179B4; box-shadow: 0 6px 18px rgba(21,148,216,0.35); }
.btn--dark { background: #0f1a24; color: #fff; }
.btn--dark:hover { background: #1d2c3a; }
.btn--outline { border-color: #fff; color: #fff; }
.btn--outline:hover { background: #fff; color: #0f1a24; }
.btn--ghost { background: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.35); }
.btn--ghost:hover { background: #fff; color: #0f1a24; border-color: #fff; }
/* ---------- Nav ---------- */
.nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 10;
padding: 18px 0;
}
.nav__inner {
/* transparent container — only the links pill is tinted */
}
.nav__links {
background: rgba(15,26,36,0.32);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
padding: 10px 22px;
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.nav__links a,
.nav__trigger {
text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
/* Scrolled state */
.nav.is-scrolled {
position: fixed;
padding: 10px 0;
animation: navSlideDown .35s ease;
}
.nav.is-scrolled .nav__links {
background: rgba(15,26,36,0.7);
}
@keyframes navSlideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
.nav__inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.brand__logo {
height: 70px;
width: auto;
display: block;
/* Inverts dark text to white while keeping the blue wave its original color */
filter: invert(1) hue-rotate(180deg) saturate(1.3) brightness(1.1)
drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
.brand__mark {
font-size: 1.375rem;
color: #ffd27a;
}
.brand__name {
font-family: 'Fraunces', serif;
font-size: 1.375rem;
letter-spacing: 0.02em;
}
.nav__links {
display: flex;
gap: 20px;
font-size: 0.844rem;
align-items: center;
flex: 1;
min-width: 0;
justify-content: center;
margin-inline: 10px;
}
.nav__links a { opacity: .9; transition: opacity .2s; white-space: nowrap; }
.nav__links a:hover { opacity: 1; }
.nav__links > a {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid transparent;
transition: opacity .2s ease, background .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.nav__cta { flex-shrink: 0; }
@media (min-width: 1100px) { .nav__links { gap: 26px; font-size: 0.875rem; } }
/* Hamburger button (hidden on desktop) */
.nav__burger {
display: none;
width: 44px; height: 44px;
border: 0; background: rgba(255,255,255,0.12);
border-radius: 12px;
backdrop-filter: blur(8px);
cursor: pointer;
padding: 0;
position: relative;
}
.nav__burger span {
position: absolute;
left: 11px; right: 11px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 27px; }
.nav__burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 92vh;
width: 100%;
display: flex;
align-items: center;
color: #fff;
overflow: hidden;
background: #0f1a24;
}
.hero__bg {
position: absolute; inset: 0;
background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
transform-origin: 60% 55%;
animation: kenburns 22s ease-in-out infinite alternate;
will-change: transform;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
background: #0f1a24;
display: block;
}
@keyframes kenburns {
0% {
transform: scale(1.05) translate3d(0, 0, 0);
filter: brightness(1) saturate(1);
}
50% {
transform: scale(1.15) translate3d(-2%, -1.5%, 0);
filter: brightness(1.04) saturate(1.08);
}
100% {
transform: scale(1.18) translate3d(2%, 1%, 0);
filter: brightness(1.02) saturate(1.05);
}
}
/* Soft moving shimmer / sunlight layer */
.hero__shine {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255, 220, 160, 0.22), transparent 60%),
radial-gradient(ellipse 50% 35% at 75% 65%, rgba(120, 200, 230, 0.18), transparent 65%);
mix-blend-mode: screen;
animation: shineDrift 14s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes shineDrift {
0% { transform: translate3d(-3%, -2%, 0); opacity: 0.85; }
50% { transform: translate3d(2%, 1%, 0); opacity: 1; }
100% { transform: translate3d(4%, 3%, 0); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
.hero__bg, .hero__shine { animation: none; }
}
.hero__overlay {
position: absolute; inset: 0;
background: transparent;
pointer-events: none;
}
.hero__content {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 140px 28px 80px;
width: 100%;
text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.6);
}
.hero .eyebrow { color: #ffd27a; }
.hero__title {
font-size: clamp(40px, 6vw, 78px);
line-height: 1.05;
max-width: 14ch;
margin-bottom: 22px;
}
.hero__title em {
font-style: italic;
color: #ffd27a;
font-weight: 400;
position: relative;
white-space: nowrap;
}
.hero__title em::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0.04em;
height: 0.14em;
background: linear-gradient(90deg, #ffd27a, #ffb949);
border-radius: 4px;
opacity: 0.55;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
animation: dpUnderline 0.9s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
}
.hero__sub {
max-width: 52ch;
font-size: 1.125rem;
opacity: .9;
margin: 0 0 36px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 60px; }
.hero__meta {
display: flex;
gap: 48px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.18);
max-width: 600px;
}
.hero__meta div { display: flex; flex-direction: column; }
.hero__meta strong {
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 600;
}
.hero__meta span {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: .7;
}
/* ---------- Sections ---------- */
.section-head {
max-width: 720px;
margin: 0 auto 56px;
text-align: center;
padding: 0 24px;
}
.section-head h2 {
font-size: clamp(30px, 4vw, 46px);
line-height: 1.1;
}
.section-head p {
color: #4a5a68;
font-size: 1rem;
margin: 0;
}
.stays { padding: 110px 0 100px; background: #faf7f2; }
/* ---------- Cards ---------- */
.cards {
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.card {
background: #fff;
border-radius: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(15,26,36,0.06);
transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(15,26,36,0.12);
}
.card--featured {
outline: 2px solid #1594D8;
outline-offset: -2px;
}
.card__media {
position: relative;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
}
.card__media--home {
background-image: url('Images/Home%20page%20images%28Home%20stay%2Ccoraline%26Lakshabay%29/Home%20stay%20image.png');
}
.card__media--coraline {
background-image: url('Images/Home%20page%20images%28Home%20stay%2Ccoraline%26Lakshabay%29/Coraline%20image%201.jpeg');
}
.card__media--laksha {
background-image: url('Images/Home%20page%20images%28Home%20stay%2Ccoraline%26Lakshabay%29/Lakshabay%20image.jpeg');
}
/* Coraline slider */
.card__slider {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #0f1a24;
}
.slider__track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform;
}
.slider__track img {
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
-webkit-user-drag: none;
}
.slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.92);
color: #0f1a24;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .25s ease, background .2s ease;
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
z-index: 2;
}
.slider__btn--prev { left: 14px; }
.slider__btn--next { right: 14px; }
.card__slider:hover .slider__btn { opacity: 1; }
.slider__btn:hover { background: #fff; }
.slider__dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 2;
}
.slider__dots .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.55);
transition: all .3s ease;
cursor: pointer;
border: 0;
padding: 0;
}
.slider__dots .dot:focus-visible {
outline: 2px solid #B9E7FF;
outline-offset: 3px;
}
.slider__dots .dot.is-active {
background: #fff;
width: 22px;
border-radius: 999px;
}
.card__slider .card__tag {
z-index: 2;
}
/* Fullscreen hint badge */
.slider__hint {
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: rgba(15, 26, 36, 0.55);
color: #fff;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
opacity: 0;
transform: translateY(-4px);
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
z-index: 2;
}
.card__slider:hover .slider__hint,
.card__media:hover .slider__hint {
opacity: 1;
transform: translateY(0);
}
.slider__hint svg {
flex-shrink: 0;
opacity: 0.9;
}
@media (max-width: 768px) {
/* Always show on touch devices */
.slider__hint { opacity: 1; transform: none; }
}
.card__tag {
position: absolute;
top: 16px;
left: 16px;
background: rgba(255,255,255,0.95);
color: #0f1a24;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
}
.card__tag--accent { background: #ffd27a; color: #5a3d00; }
.card__body {
padding: 26px 24px 24px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.card__head h3 {
font-size: 26px;
margin: 0 0 4px;
}
.stay-name {
display: inline-block;
font-family: 'Fraunces', serif;
font-weight: 700;
font-size: 1.32em;
line-height: 1.1;
color: #1a3a5c;
letter-spacing: -0.01em;
padding-bottom: 4px;
background-image: linear-gradient(90deg, #c97b3a 0%, #c97b3a 38%, #1a3a5c 38%, #1a3a5c 100%);
background-repeat: no-repeat;
background-size: 56px 3px;
background-position: 0 100%;
}
.card__loc {
margin: 8px 0 0;
font-size: 15px;
font-weight: 600;
color: #c97b3a;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.card__desc {
margin: 0;
font-size: 14.5px;
color: #3b4a57;
}
.card__feats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 14px;
font-size: 13px;
color: #4a5a68;
}
.card__feats li {
position: relative;
padding-left: 16px;
}
.card__feats li::before {
content: "";
position: absolute;
left: 0; top: 7px;
width: 6px; height: 6px;
border-radius: 50%;
background: #1594D8;
}
.card__rates {
list-style: none;
margin: 0;
padding: 12px 14px;
display: flex;
gap: 18px;
flex-wrap: wrap;
background: #f6efe2;
border-radius: 12px;
}
.card__rates li {
display: flex;
flex-direction: column;
gap: 2px;
}
.card__rates li span {
font-size: 11px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #6b7a87;
font-weight: 600;
}
.card__rates li strong {
font-family: 'Fraunces', serif;
font-size: 20px;
font-weight: 600;
color: #0f1a24;
}
.card__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #efe9df;
}
.price__amt {
font-family: 'Fraunces', serif;
font-size: 24px;
font-weight: 600;
}
.price-cue {
display: inline-flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
text-decoration: none;
transition: transform .2s ease;
}
.price-cue:hover { transform: translateY(-1px); }
.price-cue:hover .price-cue__text { color: #08807f; }
.price-cue__label {
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: #0f1a24;
}
.price-cue__text {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Fraunces', serif;
font-size: 26px;
font-weight: 600;
color: #1179B4;
}
.price-cue__text svg {
width: 15px;
height: 15px;
animation: priceBounce 1.8s ease-in-out infinite;
}
.price-cue__reg {
font-size: 12px;
font-weight: 800;
color: #0f1a24;
letter-spacing: .01em;
}
@keyframes priceBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
.price-cue__text svg { animation: none; }
}
.price__per {
font-size: 13px;
color: #6b7a87;
margin-left: 4px;
}
/* ---------- Experience ---------- */
.experience {
background: #0f1a24;
color: #fff;
padding: 110px 0;
}
.experience .eyebrow { color: #ffd27a; }
.experience__grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
}
.experience__text h2 {
font-size: clamp(30px, 3.6vw, 44px);
margin-bottom: 18px;
}
.experience__text p {
color: #b4c2cf;
font-size: 16px;
max-width: 50ch;
}
.experience__pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.experience__pills span {
padding: 8px 16px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 999px;
font-size: 13px;
}
.experience__visual {
height: 460px;
border-radius: 24px;
background-image: url('Images/website all images/Why lakshadweep used image.png');
background-size: cover;
background-position: center;
}
/* ---------- Contact ---------- */
.contact {
padding: 110px 0;
background: #faf7f2;
}
.contact__inner {
max-width: 720px;
margin: 0 auto;
padding: 0 28px;
text-align: center;
}
.contact h2 {
font-size: clamp(30px, 4vw, 44px);
}
.contact p {
color: #4a5a68;
margin: 0 0 36px;
}
.contact__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
text-align: left;
}
.contact__form select,
.contact__form input {
padding: 14px 18px;
border-radius: 12px;
border: 1px solid #e3dccf;
background: #fff;
font-family: inherit;
font-size: 14px;
color: #0f1a24;
outline: none;
transition: border .2s;
}
.contact__form input:focus,
.contact__form select:focus { border-color: #1594D8; }
.contact__form select { grid-column: span 2; }
.contact__form button { grid-column: span 2; padding: 16px; }
/* ---------- Footer ---------- */
.footer {
background: #0f1a24;
color: #b4c2cf;
padding: 28px 0;
font-size: 13px;
}
.footer__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
/* ---------- Lightbox ---------- */
.lightbox {
position: fixed;
inset: 0;
background: rgba(8, 14, 20, 0.94);
display: flex;
align-items: center;
justify-content: center;
z-index: 12000;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
backdrop-filter: blur(6px);
padding: 40px;
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
}
/* Hide floating rails/buttons when fullscreen lightbox is active */
body.lightbox-open .social-rail,
body.lightbox-open .jc-fab,
body.lightbox-open .wa-float,
body.lightbox-open .to-top,
body.lightbox-open .book-bar {
opacity: 0;
pointer-events: none;
transform: translateY(10px);
}
.lightbox__img {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 30px 80px rgba(0,0,0,0.6);
animation: lbZoom .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes lbZoom {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.lightbox__close,
.lightbox__nav {
position: absolute;
background: rgba(255,255,255,0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease, transform .2s ease;
font-family: inherit;
}
.lightbox__close:hover,
.lightbox__nav:hover {
background: rgba(255,255,255,0.22);
transform: scale(1.05);
}
.lightbox__close {
top: 24px;
right: 28px;
width: 44px;
height: 44px;
font-size: 26px;
line-height: 1;
}
.lightbox__nav {
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
font-size: 30px;
line-height: 1;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav--prev { left: 28px; }
.lightbox__nav--next { right: 28px; }
.lightbox__counter {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.8);
font-size: 13px;
letter-spacing: 0.1em;
background: rgba(0,0,0,0.4);
padding: 6px 14px;
border-radius: 999px;
}
@media (max-width: 600px) {
.lightbox { padding: 16px; }
.lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.cards { grid-template-columns: 1fr; }
.experience__grid { grid-template-columns: 1fr; }
.experience__visual { height: 320px; }
.hero__meta { gap: 28px; flex-wrap: wrap; }
.contact__form { grid-template-columns: 1fr; }
.contact__form select,
.contact__form button { grid-column: span 1; }
/* Mobile nav */
.nav__burger { display: block; }
.nav__cta { display: none; }
.nav__links {
position: fixed;
top: 0; right: 0;
height: 100vh;
width: min(78vw, 320px);
background: #0f1a24;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
text-align: left;
gap: 0;
padding: 88px 24px 28px;
transform: translateX(100%);
transition: transform .35s ease;
box-shadow: -8px 0 30px rgba(0,0,0,0.25);
z-index: 9;
overflow-y: auto;
}
.nav__links.is-open { transform: translateX(0); }
.nav__links a,
.nav__links .nav__trigger {
display: block;
width: 100%;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
font-size: 16px;
text-align: left;
opacity: 1;
color: #fff;
background: transparent;
border-left: 0; border-right: 0; border-top: 0;
}
.has-dropdown { width: 100%; }
/* Backdrop behind the open mobile menu — tap to close */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(15,26,36,0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s;
z-index: 8;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }
}
/* ---------- Reviews ---------- */
.reviews {
padding: 100px 24px;
background: #fff;
}
.reviews .section-head {
max-width: 720px;
margin: 0 auto 50px;
text-align: center;
}
.reviews .section-head h2 {
font-size: clamp(1.9rem, 3.6vw, 2.6rem);
line-height: 1.15;
}
.reviews__grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) { .reviews__grid { grid-template-columns: 1fr; } }
.review {
background: #faf7f2;
border-radius: 20px;
padding: 28px 26px;
border: 1px solid rgba(15,26,36,0.06);
display: flex;
flex-direction: column;
gap: 16px;
transition: transform .25s ease, box-shadow .25s ease;
}
.review:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,26,36,0.08); }
.review__stars { color: #e89a3c; letter-spacing: 2px; font-size: 16px; }
.review__text {
margin: 0;
font-family: 'Fraunces', Georgia, serif;
font-size: 1.05rem;
line-height: 1.55;
color: #2a3744;
}
.review__author {
display: flex; align-items: center; gap: 12px;
margin-top: auto;
}
.review__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #1594D8, #B9E7FF);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 18px;
}
.review__author strong { display: block; font-size: 14px; color: #0f1a24; }
.review__author span { font-size: 12px; color: #6b7785; }
/* ---------- WhatsApp Floating Button ---------- */
.wa-float {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 100;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 14px;
background: #25d366;
color: #fff;
border-radius: 999px;
box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0,0,0,0.15);
font-weight: 600;
font-size: 14px;
transition: transform .2s ease, box-shadow .2s ease;
animation: wa-pulse 2.4s ease-in-out infinite;
}
.wa-float:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 16px 36px rgba(37, 211, 102, 0.5), 0 6px 16px rgba(0,0,0,0.18);
}
.wa-float__label { white-space: nowrap; }
@keyframes wa-pulse {
0%, 100% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0,0,0,0.15), 0 0 0 0 rgba(37, 211, 102, 0.5); }
50% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0,0,0,0.15), 0 0 0 14px rgba(37, 211, 102, 0); }
}
@media (max-width: 600px) {
.wa-float { padding: 12px; border-radius: 50%; }
.wa-float__label { display: none; }
}
/* ---------- Detail Page (Stays / Guide) ---------- */
.detail { padding-top: 110px; }
.detail--flush-hero { padding-top: 0; }
.detail__hero { position: relative; height: 56vh; min-height: 380px; background-size: cover; background-position: center; }
.detail__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,26,36,0.35) 0%, rgba(15,26,36,0.7) 100%); }
.detail__hero-content { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 28px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 50px; color: #fff !important; }
.detail__hero-content .eyebrow { color: #B9E7FF !important; }
.detail__hero-content h1 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; margin: 0 0 10px; color: #fff !important; text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.detail__hero-content p { font-size: 1.05rem; color: rgba(255,255,255,0.95) !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.stay-hero {
overflow: hidden;
background: none;
}
.stay-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--stay-hero-bg);
background-size: cover;
background-position: center;
z-index: 0;
transform: scale(1.12);
animation: dpHeroZoom 2.4s cubic-bezier(0.22,1,0.36,1) forwards;
}
.stay-hero::after {
z-index: 1;
background: linear-gradient(180deg, rgba(15,26,36,0.48) 0%, rgba(15,26,36,0.64) 46%, rgba(15,26,36,0.82) 100%);
}
.stay-hero .detail__hero-content {
z-index: 2;
animation: dpHeroRise 1s cubic-bezier(0.22,1,0.36,1) 0.15s both;
}
.stay-hero .detail__hero-content > * {
opacity: 0;
animation: pageRise 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.stay-hero .detail__hero-content > *:nth-child(1) { animation-delay: 0.12s; }
.stay-hero .detail__hero-content > *:nth-child(2) { animation-delay: 0.34s; }
.stay-hero .detail__hero-content > *:nth-child(3) { animation-delay: 0.56s; }
@media (prefers-reduced-motion: reduce) {
.stay-hero::before,
.stay-hero .detail__hero-content,
.stay-hero .detail__hero-content > * {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
.detail__body { max-width: 1100px; margin: 0 auto; padding: 70px 28px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 50px; }
@media (max-width: 900px) { .detail__body { grid-template-columns: 1fr; gap: 30px; } }
.detail__main h2 { font-family: 'Fraunces', serif; font-size: 1.7rem; margin: 0 0 14px; color: #0f1a24; }
.detail__main p { color: #4a5663; line-height: 1.75; margin: 0 0 22px; }
.detail__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 36px; }
.detail__gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; cursor: zoom-in; transition: transform .3s ease; }
.detail__gallery img:hover { transform: scale(1.02); }
@media (max-width: 600px) { .detail__gallery { grid-template-columns: repeat(2, 1fr); } .detail__gallery img { height: 140px; } }
.amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; list-style: none; padding: 0; margin: 0 0 32px; }
.amenities li { display: flex; align-items: center; gap: 10px; color: #34404d; font-size: 0.95rem; }
.amenities li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: rgba(21,148,216,0.12); position: relative; flex-shrink: 0; }
.amenities li { position: relative; }
.amenities li::after { content: '\2713'; position: absolute; left: 4px; color: #1594D8; font-weight: 700; font-size: 12px; }
.detail__aside {
position: sticky;
top: 100px;
align-self: start;
background: linear-gradient(180deg, #ffffff 0%, #fcfefd 100%);
border-radius: 24px;
padding: 24px 22px;
box-shadow: 0 22px 52px rgba(15,26,36,0.12);
border: 1px solid rgba(21,148,216,0.12);
}
.detail__price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: 18px;
padding: 14px 14px 12px;
border: 1px solid rgba(21, 148, 216, 0.2);
border-radius: 14px;
background: linear-gradient(180deg, rgba(21, 148, 216, 0.1), rgba(21, 148, 216, 0.03));
}
.detail__price strong {
font-family: 'Fraunces', serif;
font-size: 1.9rem;
line-height: 1.05;
color: #0f1a24;
}
.detail__price span {
color: #4f5d6b;
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.detail__price .detail__price-kicker {
display: inline-flex;
align-items: center;
padding: 4px 9px;
border-radius: 999px;
background: #1594D8;
color: #fff;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.detail__aside ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.detail__aside ul li { display: flex; justify-content: space-between; font-size: 0.92rem; color: #4a5663; padding: 8px 0; border-bottom: 1px dashed rgba(15,26,36,0.08); }
.detail__aside .btn { width: 100%; }
.detail__aside .card__rates {
margin: 0 0 16px;
gap: 8px;
}
.detail__aside .card__rates li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(21,148,216,0.14);
border-radius: 12px;
background: #f7fbfb;
}
.detail__aside .card__rates li span {
font-size: 0.77rem;
color: #5f6d7b;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 700;
}
.detail__aside .card__rates li strong {
font-size: 1rem;
color: #1179B4;
}
.detail__aside .card__rates li .rate-pair {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
text-align: center;
}
.rate-pair__col {
display: flex;
flex-direction: column;
align-items: center;
min-width: 64px;
line-height: 1.1;
}
.rate-pair__col b {
font-family: 'Fraunces', serif;
font-size: 1.25rem;
font-weight: 600;
color: #1179B4;
font-variant-numeric: tabular-nums;
}
.rate-pair__col em {
margin-top: 3px;
font-style: normal;
font-size: 0.68rem;
font-weight: 800;
color: #0f1a24;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rate-pair__slash {
align-self: flex-start;
margin-top: 4px;
color: #cdd8dd;
font-size: 1.1rem;
font-weight: 400;
line-height: 1;
}
.detail__actions {
display: grid;
gap: 10px;
margin-top: 10px;
}
.detail__btn {
border-radius: 14px;
min-height: 48px;
display: inline-flex;
justify-content: center;
align-items: center;
font-weight: 700;
letter-spacing: 0.01em;
}
.detail__btn--primary {
box-shadow: 0 12px 24px rgba(21,148,216,0.2);
}
.detail__btn--whatsapp {
box-shadow: 0 10px 20px rgba(7,22,39,0.24);
}
.detail__btn--subtle {
min-height: 40px;
font-size: 0.88rem;
border-color: rgba(15,26,36,0.12);
background: #ffffff;
color: #2f3c49;
}
.back-link { display: inline-block; margin-bottom: 18px; color: #1594D8; font-size: 0.9rem; font-weight: 500; }
.back-link:hover { text-decoration: underline; }
/* ---------- Smooth scroll + reveal ---------- */
html { scroll-behavior: auto; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ---------- Sticky shrink nav (after scroll) ---------- */
.nav.is-scrolled {
position: fixed;
background: rgba(15,26,36,0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 8px 0;
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
animation: navDrop .35s ease;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav.is-scrolled .brand__logo { height: 40px; transition: height .25s ease; }
.brand__logo { transition: height .25s ease; }
@keyframes navDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* ---------- Compare stays table ---------- */
.compare { padding: 90px 24px; background: #faf7f2; scroll-margin-top: 90px; }
.compare__inner { max-width: 1100px; margin: 0 auto; }
.compare .section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.compare__wrap { overflow-x: auto; border-radius: 18px; box-shadow: 0 14px 40px rgba(15,26,36,0.08); background:#fff; }
.compare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td { padding: 18px 20px; text-align: left; border-bottom: 1px solid rgba(15,26,36,0.06); font-size: .95rem; color:#34404d; }
.compare thead th { background: #0f1a24; color:#fff; font-family:'Fraunces', serif; font-weight: 600; font-size: 1.05rem; }
.compare tbody th { font-family:'Inter', sans-serif; font-weight: 600; color:#0f1a24; background:#faf7f2; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare .pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; background: rgba(21,148,216,0.12); color:#1179B4; letter-spacing:.04em; }
.compare .btn { padding: 8px 16px; font-size: 13px; }
.compare .compare__group th { background:#1179B4; color:#fff; font-family:'Fraunces', serif; font-weight:600; font-size:.98rem; letter-spacing:.02em; }
.compare .rate { font-family:'Fraunces', serif; font-weight:600; color:#0f1a24; font-size:1.04rem; white-space:nowrap; }
/* ---------- Sticky mobile book bar ---------- */
.book-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 90;
display: none;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: rgba(15,26,36,0.96);
backdrop-filter: blur(10px);
box-shadow: 0 -6px 20px rgba(0,0,0,0.18);
align-items: center;
justify-content: space-between;
gap: 10px;
}
.book-bar__price { color:#fff; font-size:13px; line-height:1.2; }
.book-bar__price strong { font-family:'Fraunces', serif; font-size:18px; display:block; }
.book-bar__actions { display:flex; gap:8px; }
.book-bar .btn { padding: 10px 16px; font-size: 13px; }
@media (max-width: 720px) { .book-bar { display: flex; } body { padding-bottom: 70px; } .wa-float { bottom: 160px; } }
/* ---------- Newsletter ---------- */
.newsletter { padding: 80px 24px; background: linear-gradient(135deg, #1594D8 0%, #1179B4 100%); color: #fff; text-align: center; }
.newsletter__inner { max-width: 620px; margin: 0 auto; }
.newsletter h2 { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: #fff; margin: 0 0 10px; }
.newsletter p { opacity: 0.92; margin: 0 0 26px; font-size: 1rem; line-height: 1.6; }
.newsletter__form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.newsletter__form input { flex: 1; padding: 14px 18px; border: 0; border-radius: 999px; font-size: 14px; font-family: inherit; outline: none; }
.newsletter__form input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }
.newsletter__form button { padding: 14px 24px; border: 0; border-radius: 999px; background: #0f1a24; color: #fff; font-weight: 600; cursor: pointer; font-size: 14px; transition: transform .2s ease, background .2s ease; }
.newsletter__form button:hover { background: #1d2c3a; transform: translateY(-1px); }
.newsletter__hint { display: block; margin-top: 14px; font-size: 12px; opacity: 0.75; letter-spacing: 0.05em; }
@media (max-width: 540px) { .newsletter__form { flex-direction: column; } .newsletter__form button { width: 100%; } }
/* ---------- Instagram grid ---------- */
.insta { padding: 90px 24px 100px; background: #fff; }
.insta__inner { max-width: 1100px; margin: 0 auto; }
.insta__head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.social-rail {
position: fixed;
top: 38%;
right: 0;
z-index: 900;
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 12px 12px 14px;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(15,26,36,0.06);
border-right: none;
border-radius: 18px 0 0 18px;
box-shadow: 0 10px 30px rgba(15,26,36,0.12);
}
.social-rail__btn {
position: relative;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
color: #fff;
box-shadow: 0 4px 12px rgba(15,26,36,0.18);
transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-radius .28s ease;
}
.social-rail__btn::after {
content: attr(aria-label);
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(6px);
background: #0f1a24;
color: #fff;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 5px 10px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.social-rail__btn:hover {
transform: scale(1.08);
border-radius: 50%;
box-shadow: 0 10px 22px rgba(15,26,36,0.28);
}
.social-rail__btn:hover::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.social-rail__btn--fb { background: #1877f2; }
.social-rail__btn--x { background: #0f1419; }
.social-rail__btn--in { background: #0a66c2; }
.social-rail__btn--ig { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.social-rail__btn--yt { background: #ff0000; }
@media (max-width: 768px) {
/* Move the social rail to the LEFT edge, mid-height, so it can never
overlap the cart / WhatsApp buttons stacked on the bottom-right. */
.social-rail {
top: 50%; bottom: auto;
left: 0; right: auto;
transform: translateY(-50%);
gap: 8px; padding: 8px 10px 8px 8px;
border-radius: 0 18px 18px 0;
border-left: none;
border-right: 1px solid rgba(15,26,36,0.06);
}
.social-rail__btn { width: 38px; height: 38px; }
/* Tooltip now appears to the RIGHT of the rail. */
.social-rail__btn::after {
right: auto; left: calc(100% + 12px);
transform: translateY(-50%) translateX(-6px);
}
.social-rail__btn:hover::after { transform: translateY(-50%) translateX(0); }
}
.insta__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; color: #fff; background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); box-shadow: 0 8px 22px rgba(220,39,67,0.28); transition: transform .25s ease, box-shadow .25s ease; }
.insta__icon:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(220,39,67,0.38); }
.insta__handle { display: inline-block; margin-top: 6px; color: #1594D8; font-weight: 600; font-size: 0.95rem; }
.insta__handle:hover { text-decoration: underline; }
.insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 900px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .insta__grid { grid-template-columns: repeat(2, 1fr); } }
.insta__tile { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 10px; background: #f4f0ea; display: block; }
.insta__tile img,
.insta__tile video { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.insta__tile:hover img,
.insta__tile:hover video { transform: scale(1.08); }
.insta__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .insta__grid--4 { grid-template-columns: repeat(2, 1fr); } }
.insta__tile::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(225,48,108,0.0) 0%, rgba(225,48,108,0.0) 60%, rgba(225,48,108,0.55) 100%);
opacity: 0; transition: opacity .3s ease;
}
.insta__tile:hover::after { opacity: 1; }
.insta__icon {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.8);
width: 32px; height: 32px; color: #fff; opacity: 0; transition: opacity .3s ease, transform .3s ease;
z-index: 1; pointer-events: none;
}
.insta__tile:hover .insta__icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* ---------- Availability calendar (detail pages) ---------- */
.availability { margin-top: 16px; padding-top: 18px; border-top: 1px dashed rgba(15,26,36,0.12); }
.availability h4 { margin: 0 0 4px; font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7785; font-weight: 700; }
.availability__hint { margin: 0 0 12px; color: #6b7785; font-size: 0.84rem; }
.cal { width: 100%; max-width: 100%; background: linear-gradient(180deg, #faf7f2 0%, #f5f9f8 100%); border-radius: 16px; padding: 14px; border: 1px solid rgba(15,26,36,0.06); overflow: hidden; }
.cal__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal__month { font-family: 'Fraunces', serif; font-size: clamp(0.98rem, 2.8vw, 1.05rem); color: #0f1a24; }
.cal__nav { display: flex; gap: 4px; flex-shrink: 0; }
.cal__nav button { width: 30px; height: 30px; border: 1px solid rgba(15,26,36,0.12); background: #fff; border-radius: 8px; cursor: pointer; color: #0f1a24; font-size: 16px; line-height: 1; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.cal__nav button:hover { background: #1594D8; color: #fff; border-color: #1594D8; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal__dow { text-align: center; font-size: clamp(9px, 2.2vw, 10px); font-weight: 600; color: #6b7785; padding: 4px 0; letter-spacing: 0.04em; }
.cal__day { min-height: 44px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: clamp(11px, 2.6vw, 12px); color: #34404d; background: #fff; border-radius: 8px; font-weight: 500; }
.cal__day--empty { background: transparent; }
.cal__day--past { color: #c8cdd3; background: transparent; }
.cal__day--booked { background: #f3d6d6; color: #b03434; text-decoration: line-through; }
.cal__day--today { outline: 2px solid #1594D8; outline-offset: -2px; }
.cal__legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: #6b7785; flex-wrap: wrap; }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal__legend .sw-free { background: #fff; border: 1px solid #cbd5d5; }
.cal__legend .sw-book { background: #f3d6d6; }
@media (max-width: 420px) {
.cal { padding: 10px; border-radius: 12px; }
.cal__head { margin-bottom: 8px; }
.cal__month { font-size: 0.95rem; }
.cal__nav button { width: 28px; height: 28px; font-size: 14px; }
.cal__grid { gap: 4px; }
.cal__day { min-height: 36px; border-radius: 6px; }
.cal__legend { margin-top: 10px; gap: 10px; font-size: 10px; }
}
/* ---------- Shared solid nav (used by interior pages) ---------- */
.nav--solid {
position: fixed;
background: rgba(15,26,36,0.85);
backdrop-filter: blur(12px);
}
/* ---------- Accessibility ---------- */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 1000;
background: #1594D8; color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid #B9E7FF; outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; }
/* ---------- Trust badges strip ---------- */
.trust { background: #fff; padding: 30px 24px; border-bottom: 1px solid rgba(15,26,36,0.06); }
.trust__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 800px) { .trust__inner { grid-template-columns: repeat(2, 1fr); } }
.trust__item { display: flex; align-items: center; gap: 12px; }
.trust__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(21,148,216,0.1); color: #1594D8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust__text strong { display: block; font-size: 0.92rem; color: #0f1a24; }
.trust__text span { font-size: 0.8rem; color: #6b7785; }
/* ---------- Owner-direct banner ---------- */
.owner-direct {
position: relative;
background: linear-gradient(90deg, #1594D8 0%, #A9E0FF 50%, #1594D8 100%);
background-size: 200% 100%;
color: #fff;
padding: 16px 24px;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(0,0,0,0.06);
overflow: hidden;
animation: owner-direct-gradient 8s ease-in-out infinite;
box-shadow: 0 4px 18px rgba(21,148,216,0.22);
}
.owner-direct::before {
content: "";
position: absolute; top: 0; left: -60%;
width: 50%; height: 100%;
background: linear-gradient(100deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.18) 50%,
rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
animation: owner-direct-shine 4.5s ease-in-out infinite;
pointer-events: none;
}
.owner-direct__inner {
position: relative; z-index: 1;
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; gap: 16px;
justify-content: center; text-align: left;
}
.owner-direct__badge {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
animation: owner-direct-pulse 2.4s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(255,255,255,0.45);
}
.owner-direct__text strong {
display: block; font-size: 1rem; font-weight: 700; letter-spacing: 0.2px;
position: relative;
}
.owner-direct__text strong::after {
content: "";
display: inline-block;
width: 8px; height: 8px;
margin-left: 8px;
border-radius: 50%;
background: #ffd66b;
vertical-align: middle;
animation: owner-direct-dot 1.6s ease-in-out infinite;
box-shadow: 0 0 8px rgba(255,214,107,0.9);
}
.owner-direct__text span {
display: block; font-size: 0.88rem; opacity: 0.95; margin-top: 2px;
}
@keyframes owner-direct-gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes owner-direct-shine {
0% { left: -60%; }
60% { left: 120%; }
100% { left: 120%; }
}
@keyframes owner-direct-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); transform: scale(1); }
50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); transform: scale(1.06); }
}
@keyframes owner-direct-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
.owner-direct,
.owner-direct::before,
.owner-direct__badge,
.owner-direct__text strong::after {
animation: none !important;
}
}
@media (max-width: 600px) {
.owner-direct__inner { flex-direction: column; text-align: center; gap: 10px; }
.owner-direct__text strong { font-size: 0.95rem; }
.owner-direct__text span { font-size: 0.82rem; }
}
/* ---------- Back to top ---------- */
.to-top {
position: fixed; left: 22px; bottom: 22px; z-index: 90;
width: 44px; height: 44px; border-radius: 50%;
background: #0f1a24; color: #fff; border: 0;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); background: #1594D8; }
@media (max-width: 720px) { .to-top { left: 14px; bottom: 80px; } }
/* ---------- Map ---------- */
.map-wrap { max-width: 1100px; margin: 30px auto 0; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(15,26,36,0.12); aspect-ratio: 16/8; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9); }
@media (max-width: 600px) { .map-wrap { aspect-ratio: 4/3; } }
/* ---------- Related stays (detail pages) ---------- */
.related { background: #faf7f2; padding: 70px 24px 90px; }
.related__inner { max-width: 1100px; margin: 0 auto; }
.related h2 { font-family: 'Fraunces', serif; font-size: 1.6rem; text-align: center; margin: 0 0 30px; color: #0f1a24; }
.related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px) { .related__grid { grid-template-columns: 1fr; } }
.related__card { display: flex; gap: 16px; background: #fff; padding: 18px; border-radius: 16px; border: 1px solid rgba(15,26,36,0.06); transition: transform .25s ease, box-shadow .25s ease; }
.related__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,26,36,0.1); }
.related__thumb { width: 110px; height: 110px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.related__body h3 { font-family: 'Fraunces', serif; font-size: 1.15rem; margin: 0 0 4px; color: #0f1a24; }
.related__body p { margin: 0 0 6px; font-size: 0.88rem; color: #6b7785; }
.related__price { font-weight: 600; color: #1594D8; font-size: 0.95rem; }
/* ---------- Footer upgrade ---------- */
.footer { background: #0f1a24; color: #cbd5d5; padding: 50px 24px 26px; }
.footer__cols { max-width: 1200px; margin: 0 auto 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 800px) { .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer__cols { grid-template-columns: 1fr; } }
.footer__brand { font-family: 'Fraunces', serif; font-size: 1.4rem; color: #fff; margin: 0 0 10px; }
.footer__about { font-size: 0.9rem; line-height: 1.65; opacity: 0.8; max-width: 320px; }
.footer__col h4 { color: #fff; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; font-family: 'Inter', sans-serif; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__col a { color: #cbd5d5; font-size: 0.92rem; opacity: 0.85; transition: opacity .2s ease, color .2s ease; }
.footer__col a:hover { opacity: 1; color: #B9E7FF; }
.footer__socials { display: flex; gap: 10px; margin-top: 14px; }
.footer__socials a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s ease; }
.footer__socials a:hover { background: #1594D8; }
.footer__bottom { max-width: 1200px; margin: 0 auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; font-size: 0.82rem; opacity: 0.7; flex-wrap: wrap; gap: 10px; }
/* ============================================================
PAGE-SPECIFIC STYLES (extracted from inline blocks)
============================================================ */
/* ---- Know Before You Go (index.html) ---- */
.kbyg { background: linear-gradient(180deg, #faf7f2 0%, #f1ebe1 100%); padding: 90px 24px; }
.kbyg__inner { max-width: 1100px; margin: 0 auto; }
.kbyg__head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.kbyg__head .eyebrow { color: #1594D8; }
.kbyg__head h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 10px 0 14px; color: #0f1a24; line-height: 1.15; }
.kbyg__head h2 em { color: #1594D8; font-style: italic; }
.kbyg__head p { color: #4a5663; font-size: 1.02rem; line-height: 1.7; }
.kbyg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 820px) { .kbyg__grid { grid-template-columns: 1fr; } }
.kbyg__card { background: #fff; border-radius: 20px; padding: 30px 28px; border: 1px solid rgba(15, 26, 36, 0.06); box-shadow: 0 10px 30px rgba(15, 26, 36, 0.06); }
.kbyg__card--realities { border-top: 4px solid #e89a3c; }
.kbyg__card--joys { border-top: 4px solid #1594D8; }
.kbyg__card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; margin: 0 0 6px; color: #0f1a24; }
.kbyg__card .kbyg__lede { margin: 0 0 18px; color: #6b7785; font-size: 0.92rem; letter-spacing: 0.04em; }
.kbyg__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.kbyg__list li { display: flex; gap: 12px; align-items: flex-start; color: #34404d; font-size: 0.97rem; line-height: 1.6; }
.kbyg__list li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; }
.kbyg__card--realities .kbyg__list li::before { background: #e89a3c; }
.kbyg__card--joys .kbyg__list li::before { background: #1594D8; }
.kbyg__note { margin: 30px auto 0; text-align: center; font-family: 'Fraunces', Georgia, serif; font-style: italic; color: #1179B4; font-size: 1.05rem; max-width: 720px; padding: 18px 22px; border-left: 3px solid #B9E7FF; background: rgba(185, 231, 255, 0.08); border-radius: 6px; }
/* ---- Jet Ski page ---- */
.js-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-align: center; }
.js-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.js-hero__overlay { position: absolute; inset: 0; background: transparent; z-index: 1; }
.js-hero__content { position: relative; z-index: 2; max-width: 820px; padding: 0 24px; text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 4px 24px rgba(0,0,0,0.5); }
.js-hero__title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.05; margin: 0 0 18px; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 4px 28px rgba(0,0,0,0.55); }
.js-hero__title em { display: inline-block; font-style: italic; font-weight: 600; padding: 0.04em 0.18em; margin: -0.04em -0.16em; background: linear-gradient(120deg, #B9E7FF, #D4F2FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.js-hero__sub { font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 640px; margin: 0 auto 28px; opacity: 0.92; text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
.js-intro { max-width: 900px; margin: 0 auto; padding: 90px 24px 30px; text-align: center; }
.js-intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.js-intro p { color: #4a5663; font-size: 1.05rem; }
.js-sports { max-width: 1200px; margin: 0 auto; padding: 40px 24px 90px; }
.js-sports__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.js-sport { background: #fff; border-radius: 18px; padding: 22px 20px; box-shadow: 0 6px 24px rgba(15, 26, 36, 0.06); border: 1px solid rgba(21, 148, 216, 0.08); transition: transform .25s ease, box-shadow .25s ease; }
.js-sport:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(15, 26, 36, 0.12); }
.js-sport__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #1594D8, #B9E7FF); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; margin-bottom: 14px; }
.js-sport h3 { font-size: 1.15rem; margin: 0 0 6px; }
.js-sport p { margin: 0; color: #57646f; font-size: 0.92rem; line-height: 1.5; }
.js-sport__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(21, 148, 216, 0.12); }
.js-sport__link { font-size: 0.86rem; font-weight: 600; color: #1a3a5c; text-decoration: none; letter-spacing: 0.01em; transition: color .2s ease; }
.js-sport__link:hover { color: #1594D8; }
.js-sport__link--price { color: #c97b3a; }
.js-sport__link--price:hover { color: #a85f25; }
.js-sport__video { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; display: block; background: #0f1a24; }
.js-sport--featured { grid-column: span 2; background: linear-gradient(135deg, #ffffff 0%, #eafafa 100%); border-color: rgba(21, 148, 216, 0.25); }
.js-sport--featured .js-sport__video { height: 280px; }
@media (max-width: 640px) { .js-sport--featured { grid-column: span 1; } .js-sport--featured .js-sport__video { height: 200px; } }
.js-trips { background: #0f1a24; color: #fff; padding: 90px 24px; }
.js-trips__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.js-trips h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.js-trips p.lead { color: #b9c4cf; max-width: 680px; margin: 0 auto 36px; }
.js-trip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 30px; }
.js-trip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 24px 22px; text-align: left; transition: background .25s ease, border-color .25s ease; }
.js-trip:hover { background: rgba(185, 231, 255, 0.08); border-color: rgba(185, 231, 255, 0.35); }
.js-trip h4 { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; margin: 0 0 8px; color: #B9E7FF; }
.js-trip p { margin: 0; color: #cbd5e0; font-size: 0.95rem; }
.js-cta { padding: 80px 24px; text-align: center; background: #faf7f2; }
.js-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 12px; }
.js-cta p { color: #4a5663; margin-bottom: 26px; }
/* ---- Blog page ---- */
.blog-hero { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff6e6; background: url('Images/website all images/Blog page poster image.jpg') center/cover no-repeat; padding: 140px 24px 80px; text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.6); overflow: hidden; }
.blog-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.1); animation: dpHeroZoom 2.4s cubic-bezier(0.22,1,0.36,1) forwards; }
.blog-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,26,36,0.4) 0%, rgba(15,26,36,0.65) 100%); z-index: 1; }
.blog-hero__content { max-width: 760px; position: relative; z-index: 2; animation: dpHeroRise 1s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
@media (prefers-reduced-motion: reduce) { .blog-hero__video, .blog-hero__content { animation: none !important; transform: none !important; } }
.blog-hero h1 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; margin: 0 0 16px; color: #fffaf0; }
.blog-hero h1 em { color: #ffd27a; font-style: italic; }
.blog-hero p { font-size: clamp(1rem, 1.5vw, 1.15rem); opacity: 1; margin: 0; color: #fdf4e3; }
.blog { max-width: 1100px; margin: 0 auto; padding: 80px 24px; }
.blog__intro { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.blog__intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.blog__intro p { color: #4a5663; }
.blog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.post { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid rgba(21, 148, 216, 0.08); box-shadow: 0 8px 28px rgba(15, 26, 36, 0.06); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.post:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 26, 36, 0.12); }
.post__media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #e6f6f6 0%, #cdeaea 100%); overflow: hidden; }
.post__media img, .post__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1594D8; gap: 8px; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.post__placeholder svg { opacity: 0.85; }
.post__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__meta { display: flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #1594D8; font-weight: 600; }
.post__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: #cbd5d5; display: inline-block; }
.post h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; margin: 0; color: #0f1a24; }
.post p { margin: 0; color: #4a5663; font-size: 0.96rem; line-height: 1.55; }
.post__tag { align-self: flex-start; margin-top: 6px; font-size: 11px; padding: 5px 10px; border-radius: 999px; background: rgba(21, 148, 216, 0.1); color: #1594D8; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.coming-soon { max-width: 1100px; margin: 0 auto 60px; padding: 22px 26px; border-radius: 16px; background: linear-gradient(90deg, rgba(21,148,216,0.08), rgba(185,231,255,0.12)); border: 1px dashed rgba(21, 148, 216, 0.4); color: #1179B4; text-align: center; font-size: 0.95rem; }
.coming-soon strong { color: #1179B4; }
.stories { max-width: 1100px; margin: 0 auto; padding: 30px 24px 80px; display: flex; flex-direction: column; gap: 110px; }
.story { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.story:nth-child(even) { grid-template-columns: 1fr 1.05fr; }
.story:nth-child(even) .story__media-wrap { order: 2; }
.story:nth-child(even) .story__text { order: 1; }
.story__text .eyebrow { margin-bottom: 10px; }
.story__text h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin: 0 0 18px; color: #0f1a24; }
.story__text p { color: #4a5663; font-size: 1.02rem; line-height: 1.75; margin: 0 0 14px; }
.story__text p.lede { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: #1179B4; font-size: 1.1rem; border-left: 3px solid #B9E7FF; padding-left: 16px; }
.story__byline { margin-top: 22px; display: flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #1594D8; font-weight: 600; }
.story__byline .dot { width: 4px; height: 4px; border-radius: 50%; background: #cbd5d5; display: inline-block; }
.story__media-wrap { width: 100%; }
.story__media { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; position: relative; background: linear-gradient(135deg, #e6f6f6 0%, #cdeaea 100%); box-shadow: 0 18px 50px rgba(15, 26, 36, 0.12); }
.story__media img, .story__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.story__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.story__thumb { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #eef9f9 0%, #d6ecec 100%); position: relative; }
.story__thumb img, .story__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1594D8; gap: 8px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; text-align: center; padding: 12px; }
.media-placeholder svg { opacity: 0.8; }
.media-placeholder.small { font-size: 0.65rem; }
.media-placeholder.small svg { width: 22px; height: 22px; }
.section-band { position: relative; background: radial-gradient(ellipse at 20% 0%, rgba(185,231,255,0.18), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(255,210,122,0.14), transparent 50%), linear-gradient(140deg, #0f1a24 0%, #214E69 55%, #193B50 100%); padding: 130px 24px 110px; text-align: center; overflow: hidden; color: #f5fbfb; }
.section-band::before, .section-band::after { content: ""; position: absolute; left: 0; right: 0; height: 60px; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.section-band::before { top: -1px; background-image: url("data:image/svg+xml;utf8,"); }
.section-band::after { bottom: -1px; transform: scaleY(-1); background-image: url("data:image/svg+xml;utf8,"); }
.section-band__inner { position: relative; max-width: 820px; margin: 0 auto; z-index: 1; }
.section-band .eyebrow { display: inline-block; color: #B9E7FF; letter-spacing: 0.28em; padding: 6px 14px; border: 1px solid rgba(185,231,255,0.4); border-radius: 999px; background: rgba(185,231,255,0.08); }
.section-band h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.1; margin: 22px 0 18px; color: #fffaf0; }
.section-band h2 em { color: #ffd27a; font-style: italic; }
.section-band p { color: #cfe3e3; font-size: 1.08rem; line-height: 1.7; max-width: 640px; margin: 0 auto; }
.section-band--sea {
background:
radial-gradient(ellipse at 12% 8%, rgba(148, 223, 255, 0.22), transparent 52%),
radial-gradient(ellipse at 88% 92%, rgba(137, 188, 255, 0.2), transparent 48%),
linear-gradient(145deg, #061a34 0%, #0a2c59 52%, #104a75 100%);
color: #eef7ff;
}
.section-band--sea .eyebrow {
color: #9ed8ff;
border-color: rgba(158, 216, 255, 0.45);
background: rgba(158, 216, 255, 0.1);
}
.section-band--sea h2 { color: #f4fbff; }
.section-band--sea h2 em { color: #9bd4ff; }
.section-band--sea p { color: #d0e8ff; }
.section-band--sea .band-tags span {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(186, 222, 255, 0.35);
color: #e5f4ff;
}
.band-faces { display: flex; justify-content: center; gap: 0; margin: 34px 0 6px; }
.band-faces span { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; border: 3px solid #214E69; background: linear-gradient(135deg, #B9E7FF, #1594D8); color: #0f1a24; box-shadow: 0 6px 18px rgba(0,0,0,0.35); margin-left: -14px; transition: transform .25s ease; }
.band-faces span:first-child { margin-left: 0; }
.band-faces span:nth-child(2) { background: linear-gradient(135deg, #ffd27a, #e89a3c); }
.band-faces span:nth-child(3) { background: linear-gradient(135deg, #D8F3FF, #B9E7FF); }
.band-faces span:nth-child(4) { background: linear-gradient(135deg, #ffb085, #d65a3a); }
.band-faces span:nth-child(5) { background: linear-gradient(135deg, #c7f0c7, #4ea878); }
.band-faces span:hover { transform: translateY(-4px) scale(1.06); z-index: 2; }
.band-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.band-tags span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #eafafa; font-weight: 600; backdrop-filter: blur(6px); }
@media (max-width: 820px) {
.story, .story:nth-child(even) { grid-template-columns: 1fr; gap: 30px; }
.story:nth-child(even) .story__media-wrap { order: 0; }
.story:nth-child(even) .story__text { order: 0; }
.story__media { aspect-ratio: 4 / 3; }
.stories { gap: 80px; }
}
@media (max-width: 600px) {
.blog { padding: 60px 18px; }
.blog-hero { min-height: 50vh; padding: 120px 18px 60px; }
.stories { padding: 20px 18px 60px; gap: 70px; }
.section-band { padding: 70px 18px 20px; }
}
/* ---- FAQ (homepage + travel-guide) ---- */
.faq { background: #fff; padding: 90px 24px; }
.faq__inner { max-width: 860px; margin: 0 auto; }
.faq__head { text-align: center; margin-bottom: 36px; }
.faq__head h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 8px 0 8px; color: #0f1a24; }
.faq__head p { color: #4a5663; }
.faq details { background: #faf7f2; border: 1px solid rgba(15,26,36,0.06); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; transition: background .2s ease; }
.faq details[open] { background: #fff; border-color: rgba(21,148,216,0.25); box-shadow: 0 6px 20px rgba(15,26,36,0.06); }
.faq summary { cursor: pointer; font-weight: 600; color: #0f1a24; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #1594D8; font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { content: "-"; }
.faq details p { margin: 12px 0 0; color: #4a5663; line-height: 1.65; font-size: 0.97rem; }
/* ---- Included / Policy block on detail pages ---- */
.policy { max-width: 1100px; margin: 0 auto; padding: 60px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 820px) { .policy { grid-template-columns: 1fr; } }
.policy__card { background: #fff; border: 1px solid rgba(15,26,36,0.06); border-radius: 18px; padding: 26px 24px; box-shadow: 0 8px 24px rgba(15,26,36,0.05); }
.policy__card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; margin: 0 0 14px; color: #0f1a24; }
.policy__card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.policy__card li { display: flex; gap: 10px; align-items: flex-start; color: #34404d; font-size: 0.96rem; line-height: 1.5; }
.policy__card li::before { content: "✓"; color: #1594D8; font-weight: 700; flex-shrink: 0; }
.policy__card--cancel li::before { content: "⚠"; color: #e89a3c; }
/* ---- Price calculator (detail pages) ---- */
.calc { margin-top: 10px; padding: 14px; background: linear-gradient(180deg, #f9fbfb 0%, #f3f8f8 100%); border-radius: 14px; border: 1px solid rgba(21,148,216,0.14); }
.calc__title { margin: 0 0 10px; color: #4f5d6b; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.calc__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc__field { display: flex; flex-direction: column; gap: 6px; }
.calc__field span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7785; }
.calc__row input,
.calc__row select { width: 100%; min-height: 46px; padding: 9px 11px; border: 1px solid rgba(15,26,36,0.16); border-radius: 10px; background: #fff; font: inherit; color: #1f2b36; }
.calc__row input:focus,
.calc__row select:focus { outline: none; border-color: #1594D8; box-shadow: 0 0 0 3px rgba(21,148,216,0.14); }
.calc__hint { margin: 0 0 10px; font-size: .8rem; line-height: 1.45; color: #6b7785; }
.calc__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px dashed rgba(15,26,36,0.14); font-size: 0.92rem; color: #4a5663; }
.calc__total strong { color: #1594D8; font-size: 1.15rem; font-family: 'Fraunces', Georgia, serif; }
@media (max-width: 820px) {
.detail__aside { position: static; border-radius: 18px; padding: 18px; }
}
@media (max-width: 560px) {
.detail__aside { padding: 16px; }
.detail__aside .card__rates li { padding: 9px 10px; }
.detail__aside .card__rates li strong { font-size: 0.95rem; }
.calc__row { grid-template-columns: 1fr 1fr; gap: 8px; }
.calc__row--3 { grid-template-columns: 1fr; }
.detail__btn { min-height: 46px; }
}
/* ---- Reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
.hero__shine, .hero__video { animation: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* ---- Active nav link ---- */
.nav__links > a[aria-current="page"],
.nav__links > .has-dropdown.has-active > .nav__trigger,
.nav__links > .has-dropdown > .nav__trigger[aria-current="page"] {
opacity: 1;
color: #bff6f6;
border-color: rgba(185,231,255,0.38);
background: linear-gradient(145deg, rgba(185,231,255,0.24) 0%, rgba(185,231,255,0.1) 100%);
box-shadow: 0 8px 20px rgba(3, 18, 28, 0.28), inset 0 0 0 1px rgba(255,255,255,0.08);
}
/* ============================================================
EXPERIENCE + CONTACT PAGE STYLES
============================================================ */
/* Shared page hero (no video, with bg image) */
.page-hero {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-position: center;
color: #fff;
padding: 140px 24px 80px;
text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.page-hero--short { min-height: 50vh; padding: 130px 24px 60px; }
.page-hero--video { position: relative; overflow: hidden; background: #0f1a24; }
.page-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.page-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
}
.page-hero--video .page-hero__content { position: relative; z-index: 2; }
.page-hero__content { max-width: 820px; }
.page-hero h1 {
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(2.2rem, 5vw, 3.6rem);
line-height: 1.1;
margin: 14px 0 16px;
color: #fff;
}
/* Packages page hero animation (matches Travel Guide/Drone feel) */
.packages-hero {
position: relative;
overflow: hidden;
background: none;
}
.packages-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--packages-hero-bg);
background-size: cover;
background-position: center;
z-index: 0;
transform: scale(1.12);
animation: dpHeroZoom 2.4s cubic-bezier(0.22,1,0.36,1) forwards;
}
.packages-hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(15,26,36,0.42) 0%, rgba(15,26,36,0.72) 100%);
}
.packages-hero .page-hero__content {
position: relative;
z-index: 2;
animation: dpHeroRise 1s cubic-bezier(0.22,1,0.36,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
.packages-hero::before,
.packages-hero .page-hero__content {
animation: none !important;
transform: none !important;
}
}
.page-hero h1 em {
display: inline-block;
font-style: italic;
font-weight: 600;
position: relative;
white-space: nowrap;
padding: 0.04em 0.18em;
margin: -0.04em -0.16em;
background: linear-gradient(120deg, #B9E7FF, #D4F2FF);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-hero p {
font-size: clamp(1rem, 1.4vw, 1.15rem);
max-width: 640px;
margin: 0 auto;
color: #f5fbfb;
opacity: 0.95;
}
.page-cta { background: #faf7f2; padding: 80px 24px; text-align: center; }
.page-cta__inner { max-width: 720px; margin: 0 auto; }
.page-cta h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 12px; color: #0f1a24; }
.page-cta p { color: #4a5663; margin: 0 0 24px; }
.page-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ===== Experience page ===== */
.exp-intro { max-width: 820px; margin: 0 auto; padding: 70px 24px 20px; text-align: center; }
.exp-intro .lede { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: #1179B4; font-size: 1.2rem; line-height: 1.6; }
.exp-grid-wrap { max-width: 1200px; margin: 0 auto; padding: 50px 24px 80px; }
.exp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
margin-top: 30px;
}
.exp-tile {
background: #fff;
border-radius: 18px;
padding: 26px 24px;
border: 1px solid rgba(15,26,36,0.06);
box-shadow: 0 8px 24px rgba(15,26,36,0.05);
transition: transform .25s ease, box-shadow .25s ease;
display: flex; flex-direction: column; gap: 10px;
}
.exp-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,26,36,0.1); }
.exp-tile__icon { font-size: 2.2rem; line-height: 1; }
.exp-tile h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; margin: 0; color: #0f1a24; }
.exp-tile p { margin: 0; color: #4a5663; font-size: 0.96rem; line-height: 1.6; }
.exp-tile__tag {
margin-top: auto;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: #1594D8;
padding-top: 6px;
}
/* Timeline */
.rhythm { background: linear-gradient(180deg, #faf7f2, #f1ebe1); padding: 90px 24px; }
.rhythm__inner { max-width: 880px; margin: 0 auto; }
.timeline {
list-style: none;
padding: 30px 0 0;
margin: 0;
position: relative;
}
.timeline::before {
content: "";
position: absolute;
left: 88px;
top: 30px;
bottom: 10px;
width: 2px;
background: linear-gradient(180deg, rgba(21,148,216,0.3), rgba(21,148,216,0.1));
}
.timeline__item {
position: relative;
padding: 0 0 28px 120px;
}
.timeline__item::before {
content: "";
position: absolute;
left: 82px;
top: 8px;
width: 14px; height: 14px;
border-radius: 50%;
background: #fff;
border: 3px solid #1594D8;
box-shadow: 0 0 0 4px rgba(21,148,216,0.12);
}
.timeline__time {
position: absolute;
left: 0;
top: 6px;
width: 70px;
text-align: right;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: #1594D8;
}
.timeline__item h4 { font-family: 'Fraunces', Georgia, serif; margin: 0 0 4px; font-size: 1.1rem; color: #0f1a24; }
.timeline__item p { margin: 0; color: #4a5663; font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 600px) {
.timeline::before { left: 18px; }
.timeline__item { padding-left: 50px; }
.timeline__item::before { left: 12px; }
.timeline__time { position: static; width: auto; text-align: left; display: block; margin-bottom: 2px; }
}
/* Food */
.exp-food { padding: 90px 24px; background: #fff; }
.exp-food__inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
@media (max-width: 820px) { .exp-food__inner { grid-template-columns: 1fr; } }
.exp-food__text h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 8px 0 14px; color: #0f1a24; }
.exp-food__text p { color: #4a5663; line-height: 1.7; }
.exp-food__list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.exp-food__list li { padding: 10px 14px; background: #faf7f2; border-left: 3px solid #1594D8; border-radius: 6px; color: #34404d; font-size: 0.95rem; }
.exp-food__list strong { color: #1179B4; font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.exp-food__visual {
height: 100%;
min-height: 340px;
background: url('Images/website all images/Lakshadweep-food.webp') center/cover;
border-radius: 22px;
box-shadow: 0 18px 50px rgba(15,26,36,0.12);
}
/* Season */
.season { padding: 90px 24px; background: linear-gradient(180deg, #f1ebe1, #faf7f2); }
.season__inner { max-width: 1100px; margin: 0 auto; }
.season__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin-top: 30px;
}
.season__card { background: #fff; border-radius: 18px; padding: 24px 22px; border: 1px solid rgba(15,26,36,0.06); box-shadow: 0 6px 18px rgba(15,26,36,0.05); position: relative; }
.season__card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; margin: 8px 0 8px; color: #0f1a24; }
.season__card p { margin: 0; color: #4a5663; font-size: 0.95rem; line-height: 1.55; }
.season__badge { display: inline-block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.season__badge--peak { background: rgba(21,148,216,0.12); color: #1179B4; }
.season__badge--good { background: rgba(232,154,60,0.15); color: #b56b22; }
.season__badge--off { background: rgba(15,26,36,0.08); color: #4a5663; }
/* ===== Contact page ===== */
.contact-methods { padding: 70px 24px 30px; max-width: 1200px; margin: 0 auto; }
.contact-methods__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
.contact-card {
background: #fff;
border-radius: 18px;
padding: 26px 22px;
border: 1px solid rgba(15,26,36,0.06);
box-shadow: 0 8px 22px rgba(15,26,36,0.05);
display: flex; flex-direction: column; gap: 8px;
text-decoration: none; color: inherit;
transition: transform .25s ease, box-shadow .25s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,26,36,0.1); }
.contact-card__icon {
width: 48px; height: 48px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
}
.contact-card h3 { font-family: 'Fraunces', Georgia, serif; margin: 0; font-size: 1.15rem; color: #0f1a24; }
.contact-card p { margin: 0; color: #4a5663; font-size: 0.95rem; }
.contact-card__cta { margin-top: auto; padding-top: 6px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #1594D8; }
.contact-main { padding: 50px 24px 80px; max-width: 1200px; margin: 0 auto; }
.contact-main__grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
align-items: start;
}
@media (max-width: 900px) { .contact-main__grid { grid-template-columns: 1fr; } }
.contact-main__form-wrap h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin: 0 0 6px; color: #0f1a24; }
.contact-main__sub { color: #4a5663; margin: 0 0 24px; }
.contact__form--full {
display: flex; flex-direction: column; gap: 14px;
background: #fff;
border: 1px solid rgba(15,26,36,0.06);
border-radius: 18px;
padding: 28px;
box-shadow: 0 10px 30px rgba(15,26,36,0.05);
}
.contact__form--full label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: #34404d; font-weight: 600; }
.contact__form--full input[type="text"],
.contact__form--full input[type="email"],
.contact__form--full input[type="tel"],
.contact__form--full input[type="number"],
.contact__form--full input[type="date"],
.contact__form--full select,
.contact__form--full textarea {
width: 100%;
padding: 11px 13px;
border: 1px solid rgba(15,26,36,0.15);
border-radius: 10px;
font: inherit;
font-weight: 400;
color: #0f1a24;
background: #faf7f2;
transition: border-color .2s, background .2s;
}
.contact__form--full input:focus,
.contact__form--full select:focus,
.contact__form--full textarea:focus {
outline: none;
border-color: #1594D8;
background: #fff;
}
.contact__form--full textarea { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.check-row { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 500; color: #34404d; padding: 7px 12px; background: #faf7f2; border: 1px solid rgba(15,26,36,0.08); border-radius: 999px; cursor: pointer; }
.check input { margin: 0; accent-color: #1594D8; }
.check--inline { font-weight: 500; padding: 0; background: none; border: none; }
.form-note { font-size: 0.82rem; color: #6b7785; margin: 4px 0 0; }
.contact__form--full button[type="submit"] { align-self: flex-start; }
.contact-main__aside { display: flex; flex-direction: column; gap: 14px; }
.info-card { background: #fff; border-radius: 16px; padding: 22px 22px; border: 1px solid rgba(15,26,36,0.06); box-shadow: 0 6px 18px rgba(15,26,36,0.04); }
.info-card h3 { font-family: 'Fraunces', Georgia, serif; margin: 0 0 10px; font-size: 1.1rem; color: #0f1a24; }
.info-card p { margin: 0; color: #4a5663; font-size: 0.94rem; line-height: 1.5; }
.info-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.info-card li { display: flex; justify-content: space-between; gap: 14px; font-size: 0.92rem; color: #34404d; padding: 6px 0; border-bottom: 1px dashed rgba(15,26,36,0.08); }
.info-card li:last-child { border-bottom: none; }
.info-card li span:last-child { color: #1179B4; font-weight: 600; }
.info-card--accent { background: linear-gradient(135deg, #1594D8, #1179B4); color: #fff; }
.info-card--accent h3, .info-card--accent p { color: #fff; }
.info-card--accent .btn { margin-top: 14px; background: #fff; color: #1594D8; }
.map-section { padding: 70px 24px 90px; background: #faf7f2; }
.map-section__inner { max-width: 1100px; margin: 0 auto; }
.map-section .map-wrap { margin-top: 30px; }
/* ============================================================
EXPERIENCE + CONTACT \u2014 added sections
============================================================ */
/* Gallery on experience page */
.exp-gallery { background: #faf7f2; padding: 80px 24px; }
.exp-gallery__inner { max-width: 1200px; margin: 0 auto; }
.exp-gallery__grid {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
gap: 14px;
}
.exp-gallery__tile {
overflow: hidden;
border-radius: 16px;
position: relative;
box-shadow: 0 8px 22px rgba(15,26,36,0.08);
display: block;
}
.exp-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.exp-gallery__tile:hover img { transform: scale(1.06); }
.exp-gallery__tile--lg { grid-column: span 2; grid-row: span 2; }
.exp-gallery__tile--wide { grid-column: span 2; }
@media (max-width: 820px) {
.exp-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
.exp-gallery__tile--lg, .exp-gallery__tile--wide { grid-column: span 2; }
}
/* Itineraries */
.itineraries { padding: 90px 24px; background: #fff; }
.itineraries__inner { max-width: 1200px; margin: 0 auto; }
.itin-grid {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
}
.itin-card {
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 20px;
padding: 28px 26px;
display: flex; flex-direction: column;
box-shadow: 0 8px 22px rgba(15,26,36,0.05);
transition: transform .25s ease, box-shadow .25s ease;
}
.itin-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,26,36,0.1); }
.itin-card--feat { background: linear-gradient(160deg, #fff, #eafafa); border-color: rgba(21,148,216,0.25); }
.itin-card__len {
align-self: flex-start;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
background: rgba(21,148,216,0.12); color: #1179B4;
padding: 6px 12px; border-radius: 999px; font-weight: 700;
}
.itin-card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; margin: 14px 0 4px; color: #0f1a24; }
.itin-card__sub { margin: 0 0 14px; color: #6b7785; font-size: 0.92rem; }
.itin-card ol { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.itin-card li { padding-left: 14px; position: relative; color: #34404d; font-size: 0.94rem; line-height: 1.55; }
.itin-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #1594D8; }
.itin-card strong { color: #1179B4; font-weight: 600; }
.itin-card__foot {
margin-top: auto;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding-top: 16px; border-top: 1px dashed rgba(15,26,36,0.1);
}
.itin-card__foot span { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: #0f1a24; font-size: 1.1rem; }
.itin-card__foot span small { color: #6b7785; font-weight: 400; font-size: 0.75rem; }
.itin-note { text-align: center; color: #6b7785; font-size: 0.88rem; margin-top: 26px; }
/* Add-on pricing table */
.addon-pricing { padding: 80px 24px; background: linear-gradient(180deg, #faf7f2, #f1ebe1); }
.addon-pricing__inner { max-width: 900px; margin: 0 auto; }
.addon-table {
margin-top: 30px;
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(15,26,36,0.06);
}
.addon-table table { width: 100%; border-collapse: collapse; }
.addon-table th {
text-align: left; padding: 16px 22px;
background: #0f1a24; color: #fff;
font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.addon-table th:last-child, .addon-table td:last-child { text-align: right; }
.addon-table td { padding: 16px 22px; border-bottom: 1px solid rgba(15,26,36,0.06); color: #34404d; font-size: 0.95rem; }
.addon-table td > strong:first-child {
display: block;
font-family: 'Fraunces', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
color: #0f1a24;
letter-spacing: 0.005em;
line-height: 1.25;
margin-bottom: 2px;
}
@media (max-width: 600px) {
.addon-table td > strong:first-child { font-size: 1.05rem; }
}
.addon-table tr:last-child td { border-bottom: none; }
.addon-table tr:hover td { background: #faf7f2; }
.addon-table tr.addon-cat:hover td,
.addon-table tr.addon-cat:hover th { background: transparent; }
.addon-table tr.addon-cat th {
background: linear-gradient(90deg, #faf7f2, #fff);
color: #c97b3a;
text-align: left;
padding: 22px 22px 10px;
font-family: 'Fraunces', Georgia, serif;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 2px solid rgba(201, 123, 58, 0.2);
}
.addon-table tr.addon-cat:first-child th { padding-top: 18px; }
.addon-table tr:target td,
.addon-table tr.is-highlight td {
background: #fff7e8;
box-shadow: inset 4px 0 0 #c97b3a;
animation: addonHighlight 2.4s ease 1 both;
}
.addon-table tr:target td:first-child,
.addon-table tr.is-highlight td:first-child { position: relative; }
.addon-table tr:target td:first-child::before,
.addon-table tr.is-highlight td:first-child::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 0% 50%, rgba(201,123,58,0.35), transparent 60%);
animation: addonRipple 2.4s ease 1 both;
}
@keyframes addonHighlight {
0% { background: #ffd9a8; box-shadow: inset 6px 0 0 #c97b3a, 0 0 0 4px rgba(201,123,58,0.25); }
20% { background: #ffe7c2; box-shadow: inset 6px 0 0 #c97b3a, 0 0 0 8px rgba(201,123,58,0.18); }
60% { background: #fff3df; box-shadow: inset 4px 0 0 #c97b3a, 0 0 0 0 rgba(201,123,58,0); }
100% { background: #fff7e8; box-shadow: inset 4px 0 0 #c97b3a; }
}
@keyframes addonRipple {
0% { opacity: 1; transform: scale(0.8); }
100% { opacity: 0; transform: scale(1.2); }
}
/* ===== Contact page: how it works ===== */
.how-works { padding: 80px 24px; background: #fff; }
.how-works__inner { max-width: 1100px; margin: 0 auto; }
.steps {
list-style: none; padding: 0; margin: 36px 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
counter-reset: step;
}
.step {
background: #faf7f2;
border-radius: 16px;
padding: 24px 22px;
border: 1px solid rgba(15,26,36,0.06);
position: relative;
}
.step__num {
font-family: 'Fraunces', Georgia, serif;
font-size: 2.2rem; font-weight: 600;
color: #1594D8;
display: block;
margin-bottom: 8px;
line-height: 1;
}
.step h3 { font-family: 'Fraunces', Georgia, serif; margin: 0 0 6px; font-size: 1.15rem; color: #0f1a24; }
.step p { margin: 0; color: #4a5663; font-size: 0.94rem; line-height: 1.55; }
/* Getting here */
.getting-here { padding: 90px 24px; background: linear-gradient(180deg, #f1ebe1, #faf7f2); }
.getting-here__inner { max-width: 1100px; margin: 0 auto; }
.gh-grid {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.gh-card {
background: #fff; border-radius: 18px; padding: 26px 24px;
border: 1px solid rgba(15,26,36,0.06);
box-shadow: 0 8px 22px rgba(15,26,36,0.05);
display: flex; flex-direction: column; gap: 10px;
}
.gh-card__icon { font-size: 1.8rem; line-height: 1; }
.gh-card h3 { font-family: 'Fraunces', Georgia, serif; margin: 0; font-size: 1.2rem; color: #0f1a24; }
.gh-card p { margin: 0; color: #4a5663; font-size: 0.95rem; line-height: 1.6; }
.gh-card strong { color: #1179B4; }
.gh-card__tag {
margin-top: auto; padding-top: 6px;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: #1594D8; font-weight: 700;
}
/* Contact reviews wrapper */
.contact-reviews { padding: 80px 24px; background: #fff; }
.contact-reviews__inner { max-width: 1100px; margin: 0 auto; }
/* ============================================================
PACKAGES PAGE
============================================================ */
.packages-section { padding: 80px 24px; background: #fff; }
.packages-section--alt { background: linear-gradient(180deg, #faf7f2, #f1ebe1); }
.packages__inner { max-width: 980px; margin: 0 auto; }
.pkg-sub {
display: block;
margin-top: 8px;
padding: 6px 12px 6px 14px;
background: linear-gradient(135deg, rgba(21,148,216,0.07), rgba(255,185,73,0.06));
border-left: 3px solid #1594D8;
border-radius: 0 8px 8px 0;
color: #2c5454;
font-size: 0.84rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.005em;
transition: background .25s ease, border-color .25s ease;
}
.pkg-sub:hover {
background: linear-gradient(135deg, rgba(21,148,216,0.11), rgba(255,185,73,0.10));
border-left-color: #ffb949;
}
.pkg-sub--spec { /* kept for backward compatibility — same look as .pkg-sub */ }
@media (max-width: 600px) {
.pkg-sub { font-size: 0.78rem; padding: 5px 10px 5px 12px; }
}
.pkg-price {
display: inline-block;
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
color: #0f1a24;
font-size: 1.05rem;
white-space: nowrap;
}
.pkg-price small { color: #6b7785; font-weight: 400; font-size: 0.72rem; display: block; margin-top: 2px; }
.pkg-price-alt {
display: inline-block;
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
color: #1179B4;
font-size: 1.05rem;
white-space: nowrap;
margin-left: 14px;
padding-left: 14px;
border-left: 1px dashed rgba(15,26,36,0.15);
}
.pkg-price-alt small { color: #6b7785; font-weight: 400; font-size: 0.72rem; display: block; margin-top: 2px; }
.pkg-note { text-align: center; color: #6b7785; font-size: 0.88rem; margin-top: 24px; line-height: 1.6; }
@media (max-width: 600px) {
.pkg-price-alt { margin-left: 0; padding-left: 0; border-left: none; display: block; margin-top: 6px; }
}
/* Featured package cards */
.featured-packages { padding: 90px 24px; background: #fff; }
.featured-packages__inner { max-width: 1200px; margin: 0 auto; }
.pkg-grid {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
}
.pkg-card {
position: relative;
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 20px;
padding: 32px 26px 26px;
display: flex; flex-direction: column;
box-shadow: 0 8px 22px rgba(15,26,36,0.05);
transition: transform .25s ease, box-shadow .25s ease;
}
.pkg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,26,36,0.1); }
.pkg-card--feat {
background: linear-gradient(160deg, #fff, #eafafa);
border-color: rgba(21,148,216,0.3);
transform: translateY(-6px);
}
.pkg-card--feat:hover { transform: translateY(-10px); }
.pkg-card__badge {
position: absolute;
top: -12px; left: 22px;
background: #1594D8; color: #fff;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px; font-weight: 700;
}
.pkg-card--feat .pkg-card__badge { background: #0f1a24; }
.pkg-card h3 {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.3rem; color: #0f1a24;
margin: 8px 0 10px;
}
.pkg-card__price {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.8rem; font-weight: 600;
color: #1179B4;
margin-bottom: 18px;
}
.pkg-card__price small { font-size: 0.85rem; color: #6b7785; font-weight: 400; }
.pkg-card__list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.pkg-card__list li { padding-left: 22px; position: relative; color: #34404d; font-size: 0.94rem; line-height: 1.5; }
.pkg-card__list li::before {
content: "✓"; position: absolute; left: 0; top: 0;
color: #1594D8; font-weight: 700;
}
.pkg-card .btn { margin-top: auto; align-self: flex-start; }
/* Policies grid */
.pkg-policies { padding: 80px 24px; background: linear-gradient(180deg, #faf7f2, #fff); }
.pkg-policies__inner { max-width: 1100px; margin: 0 auto; }
.pkg-policies__grid {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
}
.policy-card {
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 18px;
padding: 28px 26px;
box-shadow: 0 8px 22px rgba(15,26,36,0.05);
}
.policy-card h3 {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.2rem; color: #0f1a24;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(15,26,36,0.08);
}
.policy-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.policy-card li { padding-left: 22px; position: relative; color: #34404d; font-size: 0.94rem; line-height: 1.55; }
.policy-card li::before {
content: "•"; position: absolute; left: 6px; top: -2px;
color: #1594D8; font-weight: 700; font-size: 1.2rem;
}
/* ============================================================
TRAVEL GUIDE PAGE - V2
============================================================ */
/* Quick stats strip */
.tg-quickstats { background: linear-gradient(180deg, #1594D8, #1179B4); padding: 50px 24px; }
.tg-quickstats__inner {
max-width: 1200px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 26px;
}
.tg-stat { color: #fff !important; text-align: center; padding: 10px 14px; border-left: 1px solid rgba(255,255,255,0.2); }
.tg-stat:first-child { border-left: none; }
.tg-stat__num {
font-family: 'Fraunces', Georgia, serif;
font-size: 2.2rem; font-weight: 700;
color: #ffffff !important; line-height: 1.1;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.tg-stat__label { font-size: 0.95rem; color: #ffffff !important; line-height: 1.45; font-weight: 500; }
.tg-stat__label span { display: block; color: rgba(255,255,255,0.8) !important; font-size: 0.8rem; margin-top: 4px; font-weight: 400; }
@media (max-width: 820px) {
.tg-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 22px; }
.tg-stat:first-child { border-top: none; padding-top: 10px; }
}
/* Guide layout (TOC + body) */
.guide {
max-width: 1200px; margin: 0 auto;
padding: 80px 24px;
display: grid;
grid-template-columns: 260px 1fr;
gap: 50px;
align-items: start;
}
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; gap: 30px; } }
.guide__toc {
position: sticky; top: 100px;
background: #faf7f2;
border-radius: 16px;
padding: 26px 24px;
border: 1px solid rgba(15,26,36,0.08);
}
.guide__toc h3 {
font-family: 'Fraunces', Georgia, serif;
font-size: 1rem; margin: 0 0 16px;
color: #0f1a24;
letter-spacing: 0.04em; text-transform: uppercase;
}
.guide__toc ol {
list-style: none; padding: 0; margin: 0 0 22px;
counter-reset: tocstep;
display: flex; flex-direction: column; gap: 8px;
}
.guide__toc li { counter-increment: tocstep; }
.guide__toc ol a {
display: flex; align-items: center; gap: 10px;
text-decoration: none; color: #34404d;
font-size: 0.94rem;
padding: 8px 10px; border-radius: 8px;
transition: background .15s ease, color .15s ease;
}
.guide__toc ol a::before {
content: counter(tocstep, decimal-leading-zero);
font-size: 0.75rem; font-weight: 700;
color: #1594D8;
background: rgba(21,148,216,0.1);
padding: 4px 7px; border-radius: 6px;
min-width: 28px; text-align: center;
}
.guide__toc ol a:hover { background: rgba(21,148,216,0.08); color: #1179B4; }
.guide__toc-cta {
padding-top: 18px;
border-top: 1px dashed rgba(15,26,36,0.15);
}
.guide__toc-cta p { margin: 0 0 10px; font-size: 0.88rem; color: #6b7785; }
.guide__toc-cta .btn--primary { color: #fff !important; text-decoration: none; }
.btn--sm { padding: 8px 14px !important; font-size: 0.85rem !important; }
.guide__body { display: flex; flex-direction: column; gap: 80px; }
/* Block */
.tg-block { scroll-margin-top: 100px; }
.tg-step {
display: inline-block;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: #1594D8; font-weight: 700;
background: rgba(21,148,216,0.1);
padding: 6px 12px; border-radius: 999px;
margin-bottom: 14px;
}
.tg-block h2 {
font-family: 'Fraunces', Georgia, serif;
font-size: 2rem; color: #0f1a24;
margin: 0 0 16px; line-height: 1.2;
}
.tg-block > p { color: #4a5663; font-size: 1.02rem; line-height: 1.65; max-width: 720px; }
/* Permit card */
.tg-permit {
margin-top: 28px;
background: linear-gradient(160deg, #fff, #eafafa);
border: 1px solid rgba(21,148,216,0.25);
border-radius: 20px;
padding: 30px 28px;
box-shadow: 0 10px 30px rgba(15,26,36,0.06);
}
.tg-permit__head {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.tg-permit__head h3 { font-family: 'Fraunces', Georgia, serif; margin: 0; font-size: 1.3rem; color: #0f1a24; }
.tg-permit__tag {
background: #1594D8; color: #fff;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px; font-weight: 700;
}
.tg-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tg-checklist li {
padding-left: 32px; position: relative;
color: #34404d; line-height: 1.5;
}
.tg-checklist li::before {
content: "\2713";
position: absolute; left: 0; top: 0;
width: 22px; height: 22px;
background: #1594D8; color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.78rem; font-weight: 700;
}
.tg-checklist em { color: #6b7785; font-style: normal; font-size: 0.88rem; }
.tg-permit__note {
margin-top: 22px; padding: 14px 18px;
background: #fff;
border-left: 3px solid #1594D8;
border-radius: 8px;
color: #34404d; font-size: 0.94rem; line-height: 1.55;
}
/* Routes (flight vs ship) */
.tg-routes {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 22px;
}
.tg-route {
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 20px;
padding: 28px 26px;
box-shadow: 0 10px 28px rgba(15,26,36,0.06);
display: flex; flex-direction: column; gap: 18px;
}
.tg-route--feat { background: linear-gradient(160deg, #fff, #eafafa); border-color: rgba(21,148,216,0.3); }
.tg-route__head { display: flex; gap: 16px; align-items: flex-start; }
.tg-route__icon {
width: 52px; height: 52px; flex-shrink: 0;
border-radius: 14px;
background: #1594D8; color: #fff;
display: flex; align-items: center; justify-content: center;
}
.tg-route--feat .tg-route__icon { background: #0f1a24; }
.tg-route__head h3 { font-family: 'Fraunces', Georgia, serif; margin: 6px 0 2px; font-size: 1.35rem; color: #0f1a24; }
.tg-route__tag {
display: inline-block;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: #1179B4; font-weight: 700;
background: rgba(21,148,216,0.15);
padding: 4px 9px; border-radius: 999px;
}
.tg-route__tag--alt { color: #6b7785; background: rgba(15,26,36,0.06); }
.tg-route__sub { margin: 4px 0 0; color: #6b7785; font-size: 0.9rem; }
.tg-route__steps { list-style: none; padding: 0; margin: 0; counter-reset: rstep; display: flex; flex-direction: column; gap: 12px; }
.tg-route__steps li {
counter-increment: rstep;
padding-left: 36px; position: relative;
color: #34404d; line-height: 1.55; font-size: 0.96rem;
}
.tg-route__steps li::before {
content: counter(rstep);
position: absolute; left: 0; top: 0;
width: 26px; height: 26px;
background: rgba(21,148,216,0.12);
color: #1179B4; font-weight: 700; font-size: 0.85rem;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.tg-route__tip {
margin-top: auto;
padding: 12px 16px;
background: #faf7f2;
border-left: 3px solid #1594D8;
border-radius: 8px;
color: #34404d; font-size: 0.9rem; line-height: 1.5;
}
.tg-route__tip--warn { border-left-color: #e89a3c; background: #fff8ed; }
/* Season grid */
.tg-season {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.tg-season-card {
position: relative;
padding: 24px 22px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
box-shadow: 0 8px 22px rgba(15,26,36,0.05);
}
.tg-season-card__badge {
position: absolute; top: -10px; left: 18px;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px;
font-weight: 700; color: #fff;
}
.tg-season-card--best { background: linear-gradient(160deg, #eafafa, #fff); border-color: rgba(21,148,216,0.3); }
.tg-season-card--best .tg-season-card__badge { background: #1594D8; }
.tg-season-card--good .tg-season-card__badge { background: #4caf50; }
.tg-season-card--ok .tg-season-card__badge { background: #e89a3c; }
.tg-season-card--avoid { background: #fdf3f0; border-color: rgba(232,72,72,0.2); }
.tg-season-card--avoid .tg-season-card__badge { background: #d04a3c; }
.tg-season-card h3 { font-family: 'Fraunces', Georgia, serif; margin: 10px 0 4px; font-size: 1.3rem; color: #0f1a24; }
.tg-season-card__temp { margin: 0 0 10px; color: #1179B4; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; }
.tg-season-card p { margin: 0; color: #4a5663; font-size: 0.92rem; line-height: 1.5; }
.guide p.tg-season__note,
.tg-season__note {
margin-top: 22px;
padding: 16px 20px;
background: #1594D8;
color: #fff !important;
border-radius: 12px;
font-size: 0.96rem;
line-height: 1.55;
}
.guide p.tg-season__note strong,
.tg-season__note strong { color: #fff !important; }
/* Packing grid */
.tg-pack {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.tg-pack-card {
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 18px;
padding: 26px 24px;
box-shadow: 0 8px 22px rgba(15,26,36,0.05);
}
.tg-pack-card__icon { font-size: 1.8rem; line-height: 1; margin-bottom: 12px; }
.tg-pack-card h3 { font-family: 'Fraunces', Georgia, serif; margin: 0 0 14px; font-size: 1.2rem; color: #0f1a24; padding-bottom: 10px; border-bottom: 1px solid rgba(15,26,36,0.08); }
.tg-pack-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tg-pack-card li {
padding-left: 18px; position: relative;
color: #34404d; font-size: 0.92rem; line-height: 1.5;
}
.tg-pack-card li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 6px; height: 6px;
border-radius: 50%;
background: #1594D8;
}
/* Info grid (money/network/etc) */
.tg-info-grid {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.tg-info {
background: #faf7f2;
border-radius: 16px;
padding: 22px 22px;
border: 1px solid rgba(15,26,36,0.06);
}
.tg-info h3 {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.1rem; color: #0f1a24;
margin: 0 0 8px;
}
.tg-info p { margin: 0; color: #4a5663; font-size: 0.94rem; line-height: 1.55; }
/* CTA */
.tg-cta {
text-align: center;
padding: 56px 32px;
background: linear-gradient(135deg, #1594D8, #1179B4);
color: #fff !important;
border-radius: 24px;
margin-top: 30px;
box-shadow: 0 18px 40px rgba(21,148,216,0.25);
}
.tg-cta h2 {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.9rem;
margin: 0 0 12px;
color: #fff !important;
}
.tg-cta p {
color: rgba(255,255,255,0.92) !important;
margin: 0 auto 24px;
max-width: 540px;
font-size: 1.02rem;
line-height: 1.55;
}
.tg-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tg-cta .btn--primary { background: #fff; color: #1179B4; }
.tg-cta .btn--primary:hover { background: #eafafa; color: #1179B4; }
.tg-cta .btn--dark { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.tg-cta .btn--dark:hover { background: rgba(255,255,255,0.2); }
/* ============================================================
TRAVEL GUIDE PAGE - V3 (hero buttons, islands, itinerary, cost, etiquette)
============================================================ */
/* Hero buttons + scroll cue */
.tg-hero {
position: relative;
overflow: hidden;
background: none;
}
.tg-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--tg-bg);
background-size: cover;
background-position: center;
z-index: 0;
transform: scale(1.12);
animation: dpHeroZoom 2.4s cubic-bezier(0.22,1,0.36,1) forwards;
}
.tg-hero .detail__hero-content {
position: relative;
z-index: 2;
padding-bottom: 70px;
animation: dpHeroRise 1s cubic-bezier(0.22,1,0.36,1) 0.15s both;
}
.tg-hero::after {
display: block;
z-index: 1;
background: linear-gradient(
180deg,
rgba(15,26,36,0.52) 0%,
rgba(15,26,36,0.66) 45%,
rgba(15,26,36,0.82) 100%
);
}
.tg-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.btn--ghost-light {
background: rgba(255,255,255,0.1) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.45) !important;
backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.2) !important; }
.tg-hero__scroll {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 4px;
color: rgba(255,255,255,0.85) !important;
font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
z-index: 3;
animation: tgScrollBob 2.2s ease-in-out infinite;
}
@keyframes tgScrollBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) {
.tg-hero::before,
.tg-hero .detail__hero-content,
.tg-hero__scroll {
animation: none !important;
transform: none !important;
}
}
/* Islands grid */
.tg-islands {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.tg-island {
position: relative;
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 20px;
padding: 28px 24px 24px;
box-shadow: 0 8px 24px rgba(15,26,36,0.05);
transition: transform .25s ease, box-shadow .25s ease;
}
.tg-island:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,26,36,0.1); }
.tg-island--feat { background: linear-gradient(160deg, #fff, #eafafa); border-color: rgba(21,148,216,0.3); }
.tg-island__rank {
position: absolute; top: 18px; right: 22px;
font-family: 'Fraunces', Georgia, serif;
font-size: 1.6rem; font-weight: 700;
color: rgba(21,148,216,0.22);
line-height: 1;
}
.tg-island h3 {
font-family: 'Fraunces', Georgia, serif;
margin: 0 0 4px; font-size: 1.4rem; color: #0f1a24;
}
.tg-island__tag {
margin: 0 0 12px !important;
color: #1179B4; font-size: 0.82rem; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase;
}
.tg-island > p { color: #4a5663; font-size: 0.95rem; line-height: 1.55; margin: 0 0 14px; }
.tg-island__meta { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px dashed rgba(15,26,36,0.1); display: flex; flex-direction: column; gap: 6px; }
.tg-island__meta li { font-size: 0.86rem; color: #34404d; }
.tg-island__meta strong { color: #0f1a24; font-weight: 600; min-width: 56px; display: inline-block; }
/* Itinerary timeline */
.tg-timeline {
list-style: none; padding: 0; margin: 28px 0 0;
position: relative;
display: flex; flex-direction: column; gap: 22px;
}
.tg-timeline::before {
content: ''; position: absolute;
left: 39px; top: 18px; bottom: 18px;
width: 2px; background: linear-gradient(180deg, #1594D8, rgba(21,148,216,0.15));
}
.tg-day { display: flex; gap: 22px; align-items: stretch; position: relative; }
.tg-day__marker {
flex-shrink: 0; width: 80px;
display: flex; align-items: flex-start; justify-content: center;
position: relative; z-index: 2;
}
.tg-day__marker span {
display: inline-flex; align-items: center; justify-content: center;
width: 80px; height: 80px; border-radius: 50%;
background: linear-gradient(135deg, #1594D8, #1179B4);
color: #fff !important; font-family: 'Fraunces', Georgia, serif;
font-size: 1.1rem; font-weight: 700; line-height: 1.1;
box-shadow: 0 10px 24px rgba(21,148,216,0.3);
text-align: center;
}
.tg-day__card {
flex: 1; background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 18px;
padding: 22px 24px;
box-shadow: 0 8px 20px rgba(15,26,36,0.05);
}
.tg-day__card h3 {
font-family: 'Fraunces', Georgia, serif;
margin: 0 0 12px; font-size: 1.2rem; color: #0f1a24;
}
.tg-day__card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tg-day__card li { color: #34404d; font-size: 0.94rem; line-height: 1.55; padding-left: 0; }
.tg-day__card li strong { color: #1179B4; font-weight: 700; margin-right: 6px; }
@media (max-width: 600px) {
.tg-timeline::before { left: 30px; }
.tg-day__marker { width: 60px; }
.tg-day__marker span { width: 60px; height: 60px; font-size: 0.85rem; }
.tg-day { gap: 14px; }
}
/* Cost estimator */
.tg-cost {
margin-top: 28px;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 24px;
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 20px;
padding: 28px;
box-shadow: 0 10px 30px rgba(15,26,36,0.06);
}
@media (max-width: 760px) { .tg-cost { grid-template-columns: 1fr; padding: 22px; } }
.tg-cost__rows { display: flex; flex-direction: column; }
.tg-cost__row {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 14px 0; border-bottom: 1px dashed rgba(15,26,36,0.1);
}
.tg-cost__row:last-child { border-bottom: none; }
.tg-cost__label { color: #34404d; font-size: 0.96rem; display: flex; align-items: center; gap: 10px; }
.tg-cost__ico { font-size: 1.05rem; }
.tg-cost__val { color: #0f1a24; font-weight: 600; font-size: 0.96rem; white-space: nowrap; }
.tg-cost__row--total {
margin-top: 8px; padding-top: 18px;
border-top: 2px solid rgba(21,148,216,0.2);
border-bottom: none !important;
}
.tg-cost__row--total .tg-cost__label strong { color: #0f1a24; font-size: 1.02rem; }
.tg-cost__row--total .tg-cost__val strong { color: #1179B4; font-size: 1.15rem; }
.tg-cost__aside {
background: linear-gradient(160deg, #eafafa, #faf7f2);
border-radius: 14px;
padding: 22px 22px;
display: flex; flex-direction: column; gap: 12px;
border: 1px solid rgba(21,148,216,0.15);
}
.tg-cost__aside h4 {
margin: 0; font-family: 'Fraunces', Georgia, serif;
font-size: 1.05rem; color: #0f1a24;
}
.tg-cost__aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tg-cost__aside li {
color: #34404d; font-size: 0.88rem; line-height: 1.5;
padding-left: 16px; position: relative;
}
.tg-cost__aside li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 6px; height: 6px; border-radius: 50%; background: #1594D8;
}
.tg-cost__aside .btn { align-self: flex-start; margin-top: 4px; }
/* Etiquette grid */
.tg-etiq {
margin-top: 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 700px) { .tg-etiq { grid-template-columns: 1fr; } }
.tg-etiq__col {
background: #fff;
border: 1px solid rgba(15,26,36,0.08);
border-radius: 18px;
padding: 24px 24px;
box-shadow: 0 8px 22px rgba(15,26,36,0.05);
}
.tg-etiq__col--do { background: linear-gradient(160deg, #f0faf5, #fff); border-color: rgba(76,175,80,0.25); }
.tg-etiq__col--dont { background: linear-gradient(160deg, #fdf2f1, #fff); border-color: rgba(208,74,60,0.2); }
.tg-etiq__col h3 {
font-family: 'Fraunces', Georgia, serif;
margin: 0 0 14px; font-size: 1.2rem;
display: flex; align-items: center; gap: 10px;
}
.tg-etiq__col--do h3 { color: #2f7d3a; }
.tg-etiq__col--dont h3 { color: #b03434; }
.tg-etiq__col h3 span {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
color: #fff; font-size: 0.78rem; font-weight: 700;
}
.tg-etiq__col--do h3 span { background: #4caf50; }
.tg-etiq__col--dont h3 span { background: #d04a3c; }
.tg-etiq__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tg-etiq__col li { color: #34404d; font-size: 0.93rem; line-height: 1.55; padding-left: 18px; position: relative; }
.tg-etiq__col--do li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 8px; height: 8px; border-radius: 50%; background: #4caf50;
}
.tg-etiq__col--dont li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 8px; height: 8px; border-radius: 50%; background: #d04a3c;
}
/* ============== PACKAGES V2 ============== */
.section-sub { color: #5a6573; font-size: 1rem; line-height: 1.55; max-width: 640px; margin: 12px auto 0; text-align: center; }
.pkg-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
@media (max-width: 1024px) { .pkg-grid--3 { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
.pkg-grid--2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
margin: 36px auto 0;
max-width: 920px;
align-items: stretch;
}
.pkg-grid--2 > .pkg-card--v2 { height: 100%; }
@media (max-width: 860px) {
.pkg-grid--2 { grid-template-columns: 1fr; max-width: 520px; gap: 28px; }
}
.pkg-card--v2 { display: flex; flex-direction: column; padding: 28px 26px; border-radius: 18px; background: #fff; border: 1px solid #e6ebf0; box-shadow: 0 4px 18px rgba(15,26,36,0.06); position: relative; }
.pkg-card--v2 .pkg-card__badge { position: absolute; top: -12px; left: 22px; background: #1594D8; color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pkg-card--v2.pkg-card--feat { background: linear-gradient(155deg, #367FA8 0%, #1594D8 100%); border-color: transparent; box-shadow: 0 10px 28px rgba(21,148,216,0.28); color: #fff; }
.pkg-card--v2.pkg-card--feat .pkg-card__badge { background: #ffb949; color: #0f1a24; }
.pkg-card--v2.pkg-card--feat h3,
.pkg-card--v2.pkg-card--feat .pkg-card__meta,
.pkg-card--v2.pkg-card--feat .pkg-card__h4,
.pkg-card--v2.pkg-card--feat .pkg-card__list li,
.pkg-card--v2.pkg-card--feat .pkg-card__extras li,
.pkg-card--v2.pkg-card--feat .pkg-card__row span,
.pkg-card--v2.pkg-card--feat .pkg-card__row strong,
.pkg-card--v2.pkg-card--feat .pkg-card__season { color: #fff !important; }
.pkg-card--v2.pkg-card--feat .pkg-card__price-grid > div { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.pkg-card--v2 h3 { font-family: 'Fraunces', serif; font-size: 1.4rem; color: #0f1a24; margin: 14px 0 4px; line-height: 1.2; }
.pkg-card__meta { color: #5a6573; font-size: 0.86rem; margin: 0 0 16px; }
.pkg-card__price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pkg-card__price-grid > div { background: #f4f7f9; border: 1px solid #e6ebf0; border-radius: 12px; padding: 12px; }
.pkg-card__season { display: block; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: #1594D8; margin-bottom: 8px; }
.pkg-card__season--mon { color: #c0723a; }
.pkg-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.86rem; }
.pkg-card__row span { color: #5a6573; }
.pkg-card__row strong { color: #0f1a24; font-weight: 700; }
.pkg-card__h4 { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #5a6573; margin: 6px 0 10px; font-weight: 600; }
.pkg-card--v2 .pkg-card__list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 7px; }
.pkg-card--v2 .pkg-card__list li { color: #34404d; font-size: 0.9rem; line-height: 1.5; padding-left: 20px; position: relative; }
.pkg-card--v2 .pkg-card__list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #1594D8; font-weight: 700; }
.pkg-card--v2.pkg-card--feat .pkg-card__list li::before { color: #ffb949; }
.pkg-card__excl { margin: -4px 0 14px; padding: 10px 12px; border-left: 3px solid #c0723a; background: #fff6ec; color: #5a3a1a; font-size: 0.84rem; line-height: 1.45; border-radius: 6px; }
.pkg-card__excl strong { color: #8a4a18; }
.pkg-card--v2.pkg-card--feat .pkg-card__excl { background: rgba(255,255,255,0.12); border-left-color: #ffb949; color: #fff; }
.pkg-card--v2.pkg-card--feat .pkg-card__excl strong { color: #ffb949; }
.pkg-card__extras { list-style: none; padding: 14px; margin: 0 0 18px; background: #f4f7f9; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.pkg-card--v2.pkg-card--feat .pkg-card__extras { background: rgba(255,255,255,0.10); }
.pkg-card__extras li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.84rem; color: #34404d; }
.pkg-card__extras strong { color: #0f1a24; font-weight: 700; }
.pkg-card__extras small { color: #5a6573; font-weight: 500; margin-left: 4px; font-size: 0.72rem; }
.pkg-card--v2.pkg-card--feat .pkg-card__extras small { color: rgba(255,255,255,0.75); }
.pkg-card--v2 .btn { margin-top: auto; align-self: flex-start; }
.pkg-monsoon-note { margin-top: 32px; background: #fff4e6; border: 1px solid #f3d8a8; border-left: 4px solid #c0723a; border-radius: 10px; padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start; }
.pkg-monsoon-note__tag { background: #c0723a; color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0; }
.pkg-monsoon-note p { color: #34404d; margin: 0; font-size: 0.9rem; line-height: 1.55; }
/* Itinerary */
.pkg-itinerary { padding: 80px 24px; background: #fbfaf6; }
.pkg-itinerary__inner { max-width: 980px; margin: 0 auto; }
.pkg-days { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-direction: column; gap: 18px; position: relative; }
.pkg-day { display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: flex-start; }
.pkg-day__marker { background: #1594D8; color: #fff; padding: 10px 0; border-radius: 12px; text-align: center; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; position: sticky; top: 90px; }
.pkg-day__card { background: #fff; border: 1px solid #e6ebf0; border-radius: 14px; padding: 22px 24px; box-shadow: 0 2px 10px rgba(15,26,36,0.04); }
.pkg-day__card h3 { font-family: 'Fraunces', serif; font-size: 1.15rem; color: #0f1a24; margin: 0 0 12px; }
.pkg-day__tag { display: inline-block; background: #fff4e6; color: #c0723a; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; vertical-align: middle; margin-left: 6px; font-family: 'Inter', sans-serif; letter-spacing: 0.03em; text-transform: uppercase; }
.pkg-day__card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.pkg-day__card li { color: #34404d; font-size: 0.9rem; line-height: 1.55; padding-left: 18px; position: relative; }
.pkg-day__card li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #1594D8; }
.pkg-day__card em { color: #5a6573; font-style: italic; }
@media (max-width: 600px) {
.pkg-day { grid-template-columns: 1fr; gap: 10px; }
.pkg-day__marker { position: static; padding: 6px 14px; align-self: flex-start; display: inline-block; }
}
/* Packages V2 - card media */
.pkg-card__media {
margin: -28px -26px 18px;
border-radius: 18px 18px 0 0;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #f4f7f9;
}
.pkg-card__media img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .6s ease;
}
.pkg-card--v2:hover .pkg-card__media img { transform: scale(1.04); }
.pkg-card--v2 .pkg-card__media + .pkg-card__badge { top: auto; margin-top: -14px; position: absolute; }
.pkg-card--v2.pkg-card--feat .pkg-card__media { background: rgba(255,255,255,0.10); }
/* =========================================================
UI POLISH (2026-05-20) — added after full-site UI audit
========================================================= */
/* Better antialiasing on macOS / iOS */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Custom dropdown arrow on every