/* ═══════════════════════════════════════════════════════════════════ VAAVIYO HOTEL, main.css Brand-aligned styling drawn from the Vaaviyo logo (crimson deer wordmark) with subtle Rajasthani heritage cues, ivory, sandstone, deep maroon. Built mobile-first; breakpoints at 768/1024px. Brand palette --v-red #b8333a PRIMARY (from logo) --v-red-d #8e252b hover / pressed --v-red-l #d94951 light accent, dividers --v-maroon #5a1a1f deep, footer, dark surfaces --v-cream #f7f1e6 parchment / palace ivory (main bg) --v-stone #ebe1d1 card surface --v-sand #d9c4a3 sandstone gold secondary --v-ink #1f1a1a body text (warm near-black) --v-mist #8a7a78 muted warm grey Typography --font-display "Playfair Display", serif (h1, h2, eyebrows) --font-body "Inter", system-ui, sans (everything else) Subtle Rajasthani touches (used sparingly): - .arch-divider decorative jharokha-style separator between sections - .deco-corner subtle ornamental corner on cards - Slight serif weight on display type evokes carved sandstone ═══════════════════════════════════════════════════════════════════ */ :root { --v-red: #b8333a; --v-red-d: #8e252b; --v-red-l: #d94951; --v-red-90: rgba(184, 51, 58, .9); --v-red-15: rgba(184, 51, 58, .15); --v-maroon: #5a1a1f; --v-maroon-d: #3d0f13; --v-cream: #f7f1e6; --v-stone: #ebe1d1; --v-sand: #d9c4a3; --v-ink: #1f1a1a; --v-mist: #8a7a78; --v-white: #ffffff; --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --header-h: 100px; --header-h-mobile: 72px; --top-strip-h: 38px; --top-strip-h-mobile: 34px; /* Combined offset = strip + nav. Used by body padding-top and scroll-padding-top. At <=480px the strip is hidden, so we collapse this to just the nav height. */ --header-total-h: calc(var(--top-strip-h) + var(--header-h)); --container: 1280px; --gutter: clamp(20px, 4vw, 60px); --shadow-sm: 0 2px 10px rgba(58, 17, 20, .08); --shadow-md: 0 10px 32px rgba(58, 17, 20, .14); --shadow-lg: 0 22px 60px rgba(58, 17, 20, .24); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-total-h); } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--v-ink); background: var(--v-cream); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* Headings */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; letter-spacing: -.01em; color: var(--v-ink); } .eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--v-red); } /* Decorative jharokha-arch divider, drawn as a serif ornament with the brand red as a stroke. Place inside a .section-head after the

. / .arch-divider { width: 84px; height: 22px; margin: 14px auto 18px; position: relative; } .arch-divider::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 12px; border: 1.5px solid var(--v-red); border-bottom: 0; border-radius: 60px 60px 0 0; } .arch-divider::after { content: "❖"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; color: var(--v-red); background: var(--v-cream); padding: 0 6px; } / ─── NAV ─────────────────────────────────────────────────────── / / Fixed (not sticky) so the navbar stays pinned to the viewport even when ancestors have overflow rules that would disqualify position: sticky. The matching top-padding below compensates for the nav being removed from normal flow. / / Top promo strip, sits above the main nav. / .top-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 51; height: var(--top-strip-h); background: var(--v-maroon); color: var(--v-cream); display: flex; align-items: center; justify-content: center; padding: 0 clamp(16px, 3vw, 32px); padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right)); font-size: 13px; letter-spacing: 1.5px; border-bottom: 1px solid rgba(217, 196, 163, .22); } .top-strip a { color: var(--v-sand); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 11.5px; padding: 4px 0; transition: color .2s ease, transform .15s ease; } .top-strip a:hover { color: var(--v-white); } .top-strip a:hover .top-strip-arrow { transform: translateX(4px); } .top-strip-lead { opacity: .82; margin-right: 14px; font-size: 12px; letter-spacing: 1.4px; } .top-strip-arrow { transition: transform .2s ease; font-size: 10px; } .main-nav { position: fixed; top: var(--top-strip-h); left: 0; right: 0; z-index: 50; background: var(--v-white); padding: 0 clamp(28px, 4vw, 56px); height: var(--header-h); / Respect the iPhone notch + dynamic-island safe area on landscape / padding-left: max(clamp(28px, 4vw, 56px), env(safe-area-inset-left)); padding-right: max(clamp(28px, 4vw, 56px), env(safe-area-inset-right)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 40px; border-bottom: 1px solid var(--v-stone); transition: box-shadow .25s ease, padding .25s ease, height .25s ease; } / Push page content down by the combined top-strip + nav height so it starts below both. / body { padding-top: var(--header-total-h); } .main-nav.is-scrolled { box-shadow: var(--shadow-sm); } .nav-left, .nav-right-links { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; align-items: center; } .nav-left { justify-self: start; } .nav-left a, .nav-right-links a { font-size: 14px; font-weight: 500; letter-spacing: .6px; color: var(--v-ink); transition: color .2s ease; position: relative; padding: 6px 0; } .nav-left a::after, .nav-right-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--v-red); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } .nav-left a:hover, .nav-right-links a:hover, .nav-left a.active, .nav-right-links a.active { color: var(--v-red); } .nav-left a:hover::after, .nav-right-links a:hover::after, .nav-left a.active::after, .nav-right-links a.active::after { transform: scaleX(1); } / ─── NAV DROPDOWN ('Our Hotel' menu with hotel sub-links) ───── / / Markup:

… …

Behavior: hover-open on desktop, focus-within for keyboard, click for touch. / .nav-has-drop { position: relative; } .nav-drop-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 6px 0; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .6px; color: var(--v-ink); cursor: pointer; position: relative; transition: color .2s ease; } .nav-drop-toggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--v-red); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } .nav-drop-toggle i { font-size: 10px; transition: transform .25s ease; } .nav-has-drop:hover .nav-drop-toggle, .nav-has-drop:focus-within .nav-drop-toggle, .nav-has-drop.is-open .nav-drop-toggle { color: var(--v-red); } .nav-has-drop:hover .nav-drop-toggle::after, .nav-has-drop:focus-within .nav-drop-toggle::after, .nav-has-drop.is-open .nav-drop-toggle::after { transform: scaleX(1); } .nav-has-drop:hover .nav-drop-toggle i, .nav-has-drop:focus-within .nav-drop-toggle i, .nav-has-drop.is-open .nav-drop-toggle i { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + 14px); left: -16px; min-width: 240px; background: var(--v-white); border: 1px solid var(--v-stone); border-top: 3px solid var(--v-red); border-radius: 0 0 3px 3px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; z-index: 60; } .nav-has-drop:hover .nav-dropdown, .nav-has-drop:focus-within .nav-dropdown, .nav-has-drop.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s; } .nav-dropdown a { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 14px; font-weight: 500; color: var(--v-ink); border-bottom: 1px solid var(--v-stone); transition: background .2s ease, color .2s ease, padding-left .2s ease; } .nav-dropdown a:last-child { border-bottom: 0; } .nav-dropdown a:hover { background: var(--v-cream); color: var(--v-red); padding-left: 24px; } .nav-dropdown a img { width: 18px; height: 18px; border-radius: 2px; object-fit: cover; } .nav-dropdown a .drop-name { flex: 1; } .nav-dropdown a .drop-ext { font-size: 10px; opacity: .5; transition: opacity .2s ease, transform .2s ease; } .nav-dropdown a:hover .drop-ext { opacity: 1; transform: translateX(2px); color: var(--v-red); } / Make sure the dropdown's hit zone bridges the visual gap from the toggle / .nav-has-drop::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } / Drawer sub-menu (mobile), visually indented children under 'Our Hotel' / .drawer-sub { margin-left: 8px; padding-left: 14px; border-left: 2px solid var(--v-red-15, rgba(184, 51, 58, .15)); } .drawer-sub a { padding: 12px 0; font-size: 13px; } .drawer-sub a i { color: var(--v-red); } / Logo image inside the nav brand / .nav-brand { display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .nav-brand img { height: 64px; width: auto; display: block; transition: height .25s ease; } .main-nav.is-scrolled .nav-brand img { height: 56px; } / Right cluster, menu links + hamburger + button. The links live in the grid's right column (justify-self:end); the button sits in the same column as a separate cell via .nav-right wrapping. / .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 28px; } .nav-book { display: inline-flex; align-items: center; background: var(--v-red); color: var(--v-white); padding: 12px 24px; height: 42px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--v-red); border-radius: 2px; white-space: nowrap; transition: background .25s ease, border-color .25s ease, transform .15s ease, box-shadow .25s ease; } .nav-book:hover { background: var(--v-red-d); border-color: var(--v-red-d); color: var(--v-white); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(184, 51, 58, .35); } .nav-hamburger { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 8px; gap: 5px; flex-direction: column; justify-content: center; } .nav-hamburger span { display: block; width: 100%; height: 2px; background: var(--v-ink); transition: transform .25s ease, opacity .25s ease; } / ─── DRAWER (mobile) ─────────────────────────────────────────── / .drawer-overlay { position: fixed; inset: 0; background: rgba(58, 17, 20, .55); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 99; } .drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .nav-drawer { position: fixed; top: 0; right: 0; height: 100vh; height: 100svh; width: min(360px, 88vw); background: var(--v-cream); transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0.2,1); z-index: 100; padding: 80px 32px 32px; overflow-y: auto; box-shadow: -10px 0 32px rgba(58, 17, 20, .2); } .nav-drawer.is-open { transform: translateX(0); } .nav-drawer .drawer-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--v-red); margin: 24px 0 12px; } .nav-drawer a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--v-stone); color: var(--v-ink); font-weight: 500; } .nav-drawer a i { color: var(--v-red); width: 18px; } .nav-drawer a:hover, .nav-drawer a.active { color: var(--v-red); } .drawer-close { position: absolute; top: 22px; right: 22px; border: 0; background: transparent; width: 36px; height: 36px; font-size: 22px; color: var(--v-ink); } / ─── HERO ────────────────────────────────────────────────────── / .page-hero { position: relative; height: 92vh; height: 92svh; min-height: 580px; overflow: hidden; background: var(--v-maroon); display: flex; align-items: center; justify-content: center; } .hero-slider { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease-in-out; pointer-events: none; } .hero-slide.is-active { opacity: 1; pointer-events: auto; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; } / Hero image stays static (no zoom animation) / .page-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(58, 17, 20, .55) 0%, rgba(58, 17, 20, .18) 45%, rgba(58, 17, 20, .68) 100%); } .page-hero-content { position: relative; z-index: 2; text-align: center; color: var(--v-white); max-width: 880px; padding: 0 var(--gutter); animation: heroFadeUp 1.1s cubic-bezier(.4, 0.2, 1) .2s both; } .page-hero-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 6px; text-transform: uppercase; color: var(--v-cream); padding: 5px 14px; border: 1px solid rgba(247, 241, 230, .35); border-radius: 2px; margin-bottom: 26px; } .page-hero-title { font-size: clamp(38px, 6.5vw, 80px); font-weight: 400; line-height: 1; margin-bottom: 26px; letter-spacing: -.5px; color: #fff; } .page-hero-title em { font-style: italic; color: #fff; font-weight: 500; position: relative; } .page-hero-title em::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -8px; height: 2px; background: var(--v-red); opacity: .85; } .page-hero-sub { font-size: clamp(15px, 1.6vw, 18px); font-weight: 300; line-height: 1.7; max-width: 580px; margin: 0 auto 38px; opacity: .95; } .hero-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 2px; transition: transform .15s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; } .btn-primary { background: var(--v-red); color: var(--v-white); border: 1px solid var(--v-red); } .btn-primary:hover { background: var(--v-red-d); border-color: var(--v-red-d); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(184, 51, 58, .35); } .btn-ghost { background: transparent; color: var(--v-white); border: 1px solid rgba(255, 255, 255, .75); } .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--v-white); } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } / Hero dot navigation / .hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 32px; z-index: 4; display: flex; gap: 10px; padding: 8px 14px; background: rgba(58, 17, 20, .35); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .55); transition: width .25s ease, background .25s ease; } .hero-dots button[aria-current="true"] { width: 26px; background: var(--v-red-l); border-radius: 4px; } .hero-dots button:hover { background: rgba(255, 255, 255, .9); } / ─── SECTION HEAD (shared) ───────────────────────────────────── / .section { padding: clamp(70px, 9vw, 120px) var(--gutter); } .section-inner { max-width: var(--container); margin: 0 auto; } .section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; } .section-head .eyebrow { display: block; margin-bottom: 14px; } .section-head h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1; margin-bottom: 8px; } .section-head h2 em { font-style: italic; color: var(--v-red); font-weight: 500; } .section-head p { font-size: 16px; line-height: 1.75; color: var(--v-mist); max-width: 620px; margin: 6px auto 0; } / ─── WHY CHOOSE US (stats) ──────────────────────────────────── / .sec-why { background: var(--v-cream); position: relative; } .sec-why::before, .sec-why::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 80px; height: 1px; background: var(--v-sand); } .sec-why::before { top: 0; } .sec-why::after { bottom: 0; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: var(--container); margin: 0 auto; } .why-card { text-align: center; padding: 44px 24px; background: var(--v-white); border: 1px solid var(--v-stone); border-radius: 3px; position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .why-card::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--v-red); transition: width .35s ease; } .why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--v-sand); } .why-card:hover::before { width: 60%; } .why-card .why-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--v-red-15); color: var(--v-red); display: grid; place-items: center; margin: 0 auto 18px; font-size: 22px; } .why-card .why-num { font-family: var(--font-display); font-size: 46px; font-weight: 500; color: var(--v-ink); line-height: 1; } .why-card .why-num em { font-style: normal; color: var(--v-red); } .why-card .why-label { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--v-mist); margin-top: 12px; } / ─── ROOMS ──────────────────────────────────────────────────── / .sec-rooms { background: var(--v-white); } .rooms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: var(--container); margin: 0 auto; } .room-card { position: relative; overflow: hidden; border-radius: 3px; background: var(--v-stone); aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); } .room-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.4, 0.2, 1); } .room-card:hover img { transform: scale(1.06); } .room-card .room-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(58, 17, 20, .88) 0%, rgba(58, 17, 20, .25) 55%, transparent 100%); } .room-card .room-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px; color: var(--v-white); } .room-card h3 { font-size: 28px; font-weight: 500; margin-bottom: 8px; color: var(--v-white); } .room-card .room-meta { font-size: 12px; letter-spacing: 2px; color: var(--v-sand); text-transform: uppercase; margin-bottom: 14px; } .room-card .room-desc { font-size: 14px; line-height: 1.65; color: rgba(247, 241, 230, .92); margin: 0 0 16px; max-width: 38em; } .room-card .room-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--v-white); border-bottom: 1px solid var(--v-red-l); padding-bottom: 4px; transition: color .2s ease, border-color .2s ease; } .room-card .room-link:hover { color: var(--v-red-l); } / When .room-card is an (links to an external property site), keep anchor styling neutral and indicate full-card click target. / a.room-card { display: block; color: inherit; text-decoration: none; } a.room-card:hover .room-link { color: var(--v-red-l); border-color: var(--v-red-l); } / Property cards have more content, relax the rigid aspect-ratio so the description doesn't get cropped on narrower screens. / .sec-rooms .rooms-grid > .room-card { aspect-ratio: auto; min-height: 440px; } .sec-rooms .room-card .room-overlay { / stronger bottom gradient to keep multi-line copy readable / background: linear-gradient(to top, rgba(15, 10, 12, .9) 0%, rgba(58, 17, 20, .45) 55%, transparent 100%); } / ─── DINING ─────────────────────────────────────────────────── / .sec-dining { background: var(--v-cream); } .dining-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: var(--container); margin: 0 auto; } .dining-card { background: var(--v-white); border: 1px solid var(--v-stone); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; } .dining-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .dining-card .dining-img { aspect-ratio: 16 / 10; overflow: hidden; } .dining-card .dining-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; } .dining-card:hover .dining-img img { transform: scale(1.04); } .dining-card .dining-body { padding: 28px 30px 30px; } .dining-card .dining-tag { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--v-red); } .dining-card h3 { font-size: 28px; margin: 10px 0 12px; color: var(--v-ink); } .dining-card p { font-size: 15px; color: var(--v-mist); margin: 0 0 18px; } .dining-card .dining-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--v-red); } .dining-card .dining-link:hover { color: var(--v-red-d); } / ─── EXPERIENCES / OFFERS ───────────────────────────────────── / .sec-experiences { background: var(--v-maroon); color: var(--v-cream); position: relative; overflow: hidden; } .sec-experiences::before { / Subtle paisley-inspired radial gradient flourish, never overpowering / content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, rgba(217, 196, 163, .07) 0%, transparent 40%), radial-gradient(circle at 85% 75%, rgba(184, 51, 58, .12) 0%, transparent 40%); pointer-events: none; } .sec-experiences .section-inner { position: relative; z-index: 1; } .sec-experiences .section-head h2 { color: var(--v-cream); } .sec-experiences .section-head h2 em { color: var(--v-sand); } .sec-experiences .section-head p { color: rgba(247, 241, 230, .75); } .sec-experiences .eyebrow { color: var(--v-sand); } .sec-experiences .arch-divider::before { border-color: var(--v-sand); } .sec-experiences .arch-divider::after { background: var(--v-maroon); color: var(--v-sand); } .exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--container); margin: 0 auto; } .exp-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; cursor: pointer; } .exp-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; } .exp-card:hover img { transform: scale(1.06); } .exp-card .exp-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(58, 17, 20, .94) 0%, rgba(58, 17, 20, .35) 50%, transparent 100%); } .exp-card .exp-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; color: var(--v-white); } .exp-card .exp-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--v-white); background: var(--v-red); padding: 5px 12px; margin-bottom: 14px; } .exp-card h3 { font-size: 24px; margin-bottom: 8px; color: var(--v-white); } .exp-card .exp-meta { font-size: 13px; opacity: .85; color: var(--v-sand); } .exp-card .exp-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--v-sand); } .exp-card .exp-link:hover { color: var(--v-white); } / ─── FACILITIES ─────────────────────────────────────────────── / .sec-facilities { background: var(--v-cream); } .fac-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; max-width: var(--container); margin: 0 auto; } .fac-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; } .fac-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; } .fac-card:hover img { transform: scale(1.06); } .fac-card .fac-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(58, 17, 20, .9) 0%, transparent 55%); } .fac-card .fac-name { position: absolute; left: 18px; right: 18px; bottom: 18px; color: var(--v-white); font-family: var(--font-display); font-size: 18px; font-weight: 500; } .fac-card .fac-name::before { content: ""; display: block; width: 24px; height: 2px; background: var(--v-red-l); margin-bottom: 8px; } / ─── PARTNER CTA WIDGET (full-width band) ──────────────────── / / Used on index.html after Dining to invite hotel owners to partner. / .sec-partner-cta { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; padding: clamp(70px, 9vw, 110px) var(--gutter); overflow: hidden; background: var(--v-maroon); color: var(--v-cream); } .sec-partner-cta .partner-cta-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; / Subtle Ken-Burns drift on hover / transition: transform 1.2s cubic-bezier(.4,0.2,1); } .sec-partner-cta:hover .partner-cta-bg { transform: scale(1.04); } .sec-partner-cta .partner-cta-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(58, 17, 20, .88) 0%, rgba(58, 17, 20, .55) 55%, rgba(58, 17, 20, .82) 100%), radial-gradient(circle at 18% 50%, rgba(184, 51, 58, .25) 0%, transparent 55%); } .sec-partner-cta .partner-cta-content { position: relative; z-index: 2; text-align: center; max-width: 720px; animation: heroFadeUp 1s cubic-bezier(.4, 0.2, 1) .15s both; } .sec-partner-cta .eyebrow { display: inline-block; padding: 5px 14px; border: 1px solid rgba(247, 241, 230, .35); color: var(--v-sand); margin-bottom: 22px; } .sec-partner-cta h2 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.1; color: var(--v-cream); margin-bottom: 8px; } .sec-partner-cta h2 em { font-style: italic; color: var(--v-sand); } .sec-partner-cta .arch-divider::before { border-color: var(--v-sand); } .sec-partner-cta .arch-divider::after { background: var(--v-maroon); color: var(--v-sand); } .sec-partner-cta p { font-size: 16px; line-height: 1.75; color: rgba(247, 241, 230, .9); max-width: 580px; margin: 8px auto 32px; } .sec-partner-cta .btn-primary { / slightly elevated styling for the singular CTA / padding: 17px 38px; font-size: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); } .sec-partner-cta .btn-primary:hover { box-shadow: 0 16px 36px rgba(184, 51, 58, .55); } / ─── VAAVIYO ROYAL TOURS WIDGET (below Our Property) ──────── / / A side-by-side card linking out to the sister travel company. The whole card is an ; image left, content right, with a bottom-row CTA that animates on hover. / .sec-royal-tours { background: var(--v-cream); } .royal-tours-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: var(--container); margin: 0 auto; background: var(--v-white); border: 1px solid var(--v-stone); border-radius: 4px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.4,0.2,1), box-shadow .3s ease, border-color .3s ease; position: relative; } .royal-tours-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--v-sand); } .royal-tours-card .rt-img { position: relative; overflow: hidden; min-height: 380px; } .royal-tours-card .rt-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, transparent 70%, rgba(184, 51, 58, .12) 100%); pointer-events: none; } .royal-tours-card .rt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.4,0.2,1); } .royal-tours-card:hover .rt-img img { transform: scale(1.06); } .royal-tours-card .rt-body { padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 14px; } .royal-tours-card .rt-tagline { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--v-red); letter-spacing: .3px; } .royal-tours-card .rt-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--v-ink); margin: 0; } .royal-tours-card .rt-title em { font-style: italic; color: var(--v-red); } .royal-tours-card .rt-desc { font-size: 15px; line-height: 1.7; color: var(--v-mist); margin: 4px 0 6px; } .royal-tours-card .rt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 0; margin: 6px 0; border-top: 1px dashed var(--v-stone); border-bottom: 1px dashed var(--v-stone); } .royal-tours-card .rt-stat { text-align: center; } .royal-tours-card .rt-stat-num { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--v-ink); line-height: 1; } .royal-tours-card .rt-stat-num em { font-style: normal; color: var(--v-red); } .royal-tours-card .rt-stat-lbl { display: block; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v-mist); margin-top: 6px; } .royal-tours-card .rt-tags { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; } .royal-tours-card .rt-tags li { font-size: 12px; padding: 5px 12px; background: var(--v-stone); color: var(--v-ink); border-radius: 999px; letter-spacing: .3px; transition: background .2s ease, color .2s ease; } .royal-tours-card:hover .rt-tags li { background: var(--v-cream); } .royal-tours-card .rt-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--v-red); border-bottom: 1px solid var(--v-red); padding-bottom: 6px; align-self: flex-start; transition: gap .2s ease, color .2s ease; } .royal-tours-card:hover .rt-cta { gap: 14px; color: var(--v-red-d); } / External-link nav item ("Vaaviyo Royal Tours") with small chevron / .nav-tours-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .nav-tours-link .nav-ext-ico { font-size: 9px; opacity: .55; transition: opacity .2s ease, transform .2s ease; } .nav-tours-link:hover .nav-ext-ico { opacity: 1; transform: translate(2px, -2px); } / ─── TESTIMONIALS ───────────────────────────────────────────── / .sec-testimonials { background: var(--v-cream); } .test-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto; } .test-card { background: var(--v-white); padding: 36px 38px; border-left: 3px solid var(--v-red); border-radius: 3px; box-shadow: var(--shadow-sm); position: relative; } .test-card .quote-icon { font-size: 56px; color: var(--v-red); opacity: .18; font-family: var(--font-display); line-height: .6; margin-bottom: 10px; } .test-card .test-quote { font-family: var(--font-display); font-size: 18px; font-style: italic; line-height: 1.65; color: var(--v-ink); margin-bottom: 22px; } .test-card .test-author { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--v-ink); } .test-card .test-author span { display: block; font-weight: 400; color: var(--v-mist); font-size: 12px; margin-top: 4px; letter-spacing: 1px; text-transform: none; } .stars { color: var(--v-red); font-size: 14px; margin-bottom: 10px; letter-spacing: 2px; } / ─── RAJASTHAN HERITAGE BANNER (single full-bleed image strip) ─ Reusable visual divider used on partner.html and contact.html to inject a Rajasthani atmosphere between content sections. The image itself does the talking; a small italic caption optionally overlays at the bottom-left. / .sec-heritage-banner { position: relative; height: clamp(280px, 32vw, 380px); overflow: hidden; background: var(--v-maroon); } .sec-heritage-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.4,0.2,1); } .sec-heritage-banner:hover img { transform: scale(1.04); } .sec-heritage-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(58, 17, 20, .55) 0%, rgba(58, 17, 20, .1) 45%, transparent 100%); } .sec-heritage-banner .heritage-caption { position: absolute; left: clamp(22px, 5vw, 60px); right: clamp(22px, 5vw, 60px); bottom: clamp(22px, 4vw, 40px); z-index: 2; color: var(--v-cream); max-width: 580px; } .sec-heritage-banner .heritage-caption .eyebrow { display: inline-block; padding: 4px 12px; margin-bottom: 12px; border: 1px solid rgba(247, 241, 230, .35); color: var(--v-sand); font-size: 10px; letter-spacing: 3px; } .sec-heritage-banner .heritage-caption h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.5vw, 36px); line-height: 1.15; color: var(--v-cream); margin: 0 0 6px; } .sec-heritage-banner .heritage-caption h2 em { font-style: italic; color: var(--v-sand); } .sec-heritage-banner .heritage-caption p { font-size: 14px; line-height: 1.6; color: rgba(247, 241, 230, .85); margin: 0; max-width: 480px; } / ─── NEWSLETTER ─────────────────────────────────────────────── / .sec-newsletter { background: var(--v-maroon); color: var(--v-cream); text-align: center; padding: clamp(60px, 8vw, 90px) var(--gutter); position: relative; overflow: hidden; } .sec-newsletter::before, .sec-newsletter::after { / Decorative sandstone hairlines (Rajasthani palace molding feel) / content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right, transparent, var(--v-sand), transparent); } .sec-newsletter::before { top: 24px; } .sec-newsletter::after { bottom: 24px; } .sec-newsletter h2 { font-size: clamp(28px, 4vw, 42px); color: var(--v-cream); margin-bottom: 14px; } .sec-newsletter h2 em { color: var(--v-sand); font-style: italic; } .sec-newsletter p { color: rgba(247, 241, 230, .78); max-width: 480px; margin: 0 auto 28px; } .newsletter-form { display: flex; max-width: 460px; margin: 0 auto; border: 1px solid rgba(247, 241, 230, .25); border-radius: 2px; overflow: hidden; background: rgba(247, 241, 230, .06); } .newsletter-form input { flex: 1; padding: 16px 20px; background: transparent; border: 0; color: var(--v-cream); font: inherit; font-size: 14px; } .newsletter-form input::placeholder { color: rgba(247, 241, 230, .5); } .newsletter-form input:focus { outline: 0; } .newsletter-form button { background: var(--v-red); color: var(--v-white); border: 0; padding: 0 28px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; transition: background .25s ease; } .newsletter-form button:hover { background: var(--v-red-d); } .newsletter-form button:disabled { background: var(--v-mist); cursor: default; } .newsletter-note { font-size: 12px; color: rgba(247, 241, 230, .55); margin-top: 14px; } .newsletter-status { max-width: 520px; margin: 16px auto 0; font-size: 13px; line-height: 1.55; padding: 10px 16px; border-radius: 2px; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; pointer-events: none; } .newsletter-status.is-visible { opacity: 1; transform: translateY(0); } .newsletter-status.is-success { background: rgba(217, 196, 163, .15); color: var(--v-sand); border: 1px solid rgba(217, 196, 163, .35); } .newsletter-status.is-error { background: rgba(184, 51, 58, .18); color: #ffd9dc; border: 1px solid rgba(184, 51, 58, .55); } / ─── Newsletter reCAPTCHA modal ───────────────────────────── / .nl-modal { position: fixed; inset: 0; z-index: 9200; background: rgba(15, 8, 9, .72); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; display: flex; align-items: center; justify-content: center; padding: 16px; } .nl-modal.is-open { opacity: 1; visibility: visible; } .nl-modal-card { position: relative; width: 100%; max-width: 380px; background: var(--v-cream); color: var(--v-ink); border-radius: 4px; padding: 28px 24px 26px; box-shadow: 0 24px 56px rgba(0, 0, 0, .35); text-align: center; transform: translateY(12px); transition: transform .25s; font-family: var(--font-body); } .nl-modal.is-open .nl-modal-card { transform: translateY(0); } .nl-modal-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; background: transparent; border: none; color: var(--v-mist); font-size: 16px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .nl-modal-close:hover { background: rgba(31, 26, 26, .06); color: var(--v-ink); } .nl-modal-eyebrow { font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--v-red); font-weight: 600; margin-bottom: 6px; } .nl-modal-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--v-maroon); margin: 0 0 8px; line-height: 1.2; } .nl-modal-desc { font-size: 13px; line-height: 1.55; color: rgba(31, 26, 26, .72); margin: 0 0 18px; } .nl-modal-recaptcha { display: flex; justify-content: center; min-height: 78px; } / ─── FOOTER ─────────────────────────────────────────────────── / .site-footer { background: var(--v-maroon-d); color: rgba(247, 241, 230, .78); padding: 70px var(--gutter) 0; position: relative; / Respect notch/home-indicator safe areas on iOS / padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom); } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent 0%, var(--v-red) 20%, var(--v-sand) 50%, var(--v-red) 80%, transparent 100%); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 48px; max-width: var(--container); margin: 0 auto 50px; } .footer-logo { margin-bottom: 18px; } .footer-logo img { height: 80px; width: auto; filter: brightness(0) invert(1) sepia(.3); } .footer-tag { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--v-sand); margin-bottom: 18px; letter-spacing: 1px; } .footer-desc { font-size: 14px; line-height: 1.7; opacity: .82; max-width: 320px; } .footer-col h3, .footer-col h4 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--v-sand); margin-bottom: 22px; margin-top: 0; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 10px; } .footer-col a { font-size: 14px; transition: color .2s ease; } .footer-col a:hover { color: var(--v-sand); } .footer-contact { position: relative; padding: 26px 24px; border-radius: 6px; overflow: hidden; isolation: isolate; background-image: linear-gradient(180deg, rgba(40, 12, 14, .82) 0%, rgba(90, 26, 31, .9) 100%), url("https://assets.simplotel.com/simplotel/image/upload/w_5000,h_2046/x_0,y_0,w_5000,h_2046,c_crop,q_80,fl_progressive/w_1200,c_limit,f_auto/vaaviyo-hotels/siddhesh-mangela-WWUGg9Af7Kg-unsplash_a8904a4c.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid rgba(217, 196, 163, .18); box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .55); } .footer-contact h3 { color: var(--v-sand); margin-top: 0; } .footer-contact > div { font-size: 14px; line-height: 1.7; margin-bottom: 12px; display: flex; gap: 10px; } .footer-contact > div:last-child { margin-bottom: 0; } .footer-contact i { color: var(--v-sand); margin-top: 4px; width: 16px; flex: 0 0 16px; } .footer-contact a { color: var(--v-cream); } .footer-contact a:hover { color: var(--v-sand); } .footer-social { display: flex; gap: 12px; margin-top: 20px; } .footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(247, 241, 230, .25); border-radius: 50%; color: var(--v-cream); transition: background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease; } .footer-social a:hover { background: var(--v-red); border-color: var(--v-red); color: var(--v-white); transform: translateY(-2px); } .footer-bottom { border-top: 1px solid rgba(247, 241, 230, .12); padding: 22px 0; max-width: var(--container); margin: 0 auto; font-size: 12px; opacity: .65; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } .footer-bottom a { transition: color .2s ease; } .footer-bottom a:hover { color: var(--v-sand); } / ─── RESPONSIVE ─────────────────────────────────────────────── / / ═══════════════════════════════════════════════════════════════════ RESPONSIVE, mobile-first additions to the base rules above. Breakpoints follow common device sizes: 1280px ─ small desktop / large tablet landscape 1024px ─ tablet (hide desktop menu; show hamburger) 768px ─ small tablet / large phone landscape 480px ─ phone portrait 360px ─ small phone (older Android, SE) All long values use overflow-wrap so emails / URLs / addresses never force a horizontal scroll on tiny screens. ═══════════════════════════════════════════════════════════════════ / / Defensive: never let words cause horizontal overflow / body, p, h1, h2, h3, h4, li, a, span, div { overflow-wrap: break-word; word-wrap: break-word; } html, body { overflow-x: hidden; } / ─── ≤ 1280px (small desktop) ─────────────────────────────── / @media (max-width: 1280px) { :root { --container: 1100px; } .nav-left, .nav-right-links { gap: 28px; } .main-nav { column-gap: 28px; } } / ─── ≤ 1024px (tablet, switch to mobile nav) ─────────────── / @media (max-width: 1024px) { .nav-left, .nav-right-links { display: none; } .nav-hamburger { display: flex; } .main-nav { grid-template-columns: auto 1fr auto; column-gap: 16px; } .nav-right { gap: 14px; } .nav-brand img { height: 56px; } .nav-brand { justify-self: center; } .why-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .section { padding: clamp(56px, 8vw, 88px) var(--gutter); } .section-head { margin-bottom: 44px; } .rooms-grid { gap: 24px; } .sec-rooms .rooms-grid > .room-card { min-height: 400px; } .room-card .room-body { padding: 28px; } .room-card h3 { font-size: 24px; } .dining-card .dining-body { padding: 24px 26px; } .dining-card h3 { font-size: 24px; } .sec-partner-cta { min-height: 420px; padding: clamp(56px, 8vw, 90px) var(--gutter); } .sec-partner-cta h2 { font-size: clamp(28px, 4vw, 44px); } .page-hero { height: 78vh; height: 78svh; min-height: 520px; } .page-hero-title { font-size: clamp(38px, 6vw, 64px); } / Royal Tours card stacks image above content / .royal-tours-card { grid-template-columns: 1fr; } .royal-tours-card .rt-img { min-height: 260px; aspect-ratio: 16/9; } } / ─── ≤ 768px (large phone / small tablet) ─────────────────── / @media (max-width: 768px) { :root { --header-h: var(--header-h-mobile); --top-strip-h: var(--top-strip-h-mobile); --gutter: clamp(18px, 4vw, 28px); } .top-strip { font-size: 11.5px; } .top-strip-lead { display: none; } .top-strip a { font-size: 10.5px; letter-spacing: 1.5px; } .main-nav { height: var(--header-h-mobile); top: var(--top-strip-h-mobile); padding: 0 18px; column-gap: 12px; } .nav-brand img { height: 44px; } .nav-book { padding: 0 16px; height: 40px; font-size: 11px; letter-spacing: 1.2px; } .nav-hamburger { width: 44px; height: 44px; } / Drawer fills more of the screen on phones / .nav-drawer { width: min(320px, 88vw); padding: 72px 24px 28px; } / Hero / .page-hero { height: auto; min-height: 560px; padding: 80px 0; } .page-hero-content { padding: 0 22px; } .page-hero-title { font-size: clamp(34px, 9vw, 54px); line-height: 1.05; } .page-hero-sub { font-size: 15px; line-height: 1.65; } .page-hero-eyebrow { font-size: 10px; letter-spacing: 4px; padding: 4px 12px; margin-bottom: 20px; } .hero-dots { bottom: 22px; padding: 7px 12px; } .hero-dots button { width: 7px; height: 7px; } .hero-dots button[aria-current="true"] { width: 22px; } / Section heads / .section { padding: clamp(48px, 10vw, 70px) var(--gutter); } .section-head { margin-bottom: 36px; padding: 0 6px; } .section-head h2 { font-size: clamp(26px, 6vw, 38px); } .section-head p { font-size: 15px; } .arch-divider { width: 70px; } / Why-Choose-Us / .why-grid { gap: 14px; } .why-card { padding: 28px 18px; } .why-card .why-num { font-size: 36px; } .why-card .why-icon { width: 54px; height: 54px; font-size: 19px; margin-bottom: 14px; } .why-card .why-label { font-size: 11px; letter-spacing: 1.5px; } / Our Property (Brij Castle / Shiv Vilas cards) / .rooms-grid, .dining-grid { grid-template-columns: 1fr; gap: 24px; } .sec-rooms .rooms-grid > .room-card { min-height: 360px; } .room-card .room-body { padding: 24px 22px; } .room-card h3 { font-size: 22px; } .room-card .room-meta { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 10px; } .room-card .room-desc { font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; } / Dining / .dining-card .dining-img { aspect-ratio: 16/10; } .dining-card .dining-body { padding: 22px 22px 24px; } .dining-card h3 { font-size: 22px; } .dining-card p { font-size: 14px; } / Partner CTA widget / .sec-partner-cta { min-height: 360px; padding: 70px 22px; } .sec-partner-cta h2 { font-size: clamp(26px, 6vw, 36px); } .sec-partner-cta p { font-size: 15px; margin: 4px auto 26px; } .sec-partner-cta .btn-primary { padding: 14px 28px; font-size: 12px; } / Newsletter / .sec-newsletter { padding: 56px 22px; } .sec-newsletter h2 { font-size: clamp(24px, 5vw, 34px); } .newsletter-form { flex-direction: column; border-radius: 4px; max-width: 100%; } .newsletter-form input { padding: 14px 16px; text-align: center; font-size: 16px; } .newsletter-form button { padding: 14px; min-height: 48px; } / Footer / .site-footer { padding: 56px 22px 0; } .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-desc { max-width: 100%; } .footer-bottom { justify-content: center; text-align: center; gap: 6px; padding: 18px 0; } / Form / button minimum tap targets / .btn-primary, .btn-ghost { min-height: 44px; } / Long-string protection on contact links / .footer-contact a { word-break: break-word; } / Get in Touch card, give it room when the footer goes single-column / .footer-contact { padding: 28px 22px; } .footer-contact > div { padding: 4px 0; } .footer-contact a { display: inline-block; min-height: 28px; line-height: 1.7; } / Heritage banner on phone / .sec-heritage-banner { height: clamp(220px, 50vw, 280px); } .sec-heritage-banner .heritage-caption h2 { font-size: clamp(20px, 5.5vw, 28px); } .sec-heritage-banner .heritage-caption p { font-size: 13px; } / Royal Tours widget on phone / .royal-tours-card .rt-img { min-height: 220px; } .royal-tours-card .rt-body { padding: 24px 22px 28px; gap: 12px; } .royal-tours-card .rt-title { font-size: clamp(22px, 5.5vw, 28px); } .royal-tours-card .rt-desc { font-size: 14px; line-height: 1.6; } .royal-tours-card .rt-stats { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0; margin: 4px 0; } .royal-tours-card .rt-stat-num { font-size: 20px; } .royal-tours-card .rt-stat-lbl { font-size: 9.5px; letter-spacing: 1px; } .royal-tours-card .rt-tags li { font-size: 11.5px; padding: 4px 10px; } / Hide the small external-link arrow in nav on mobile (drawer already conveys 'external' via target="_blank") / .nav-tours-link .nav-ext-ico { display: none; } } / ─── ≤ 480px (phone portrait) ─────────────────────────────── / @media (max-width: 480px) { / Top strip, ultra-compact label so it sits in one line on 320px viewports / .top-strip a { font-size: 10px; letter-spacing: 1.2px; gap: 6px; } .top-strip-arrow { font-size: 9px; } .why-grid { grid-template-columns: 1fr; gap: 12px; } .why-card { padding: 24px 16px; display: flex; align-items: center; gap: 16px; text-align: left; } .why-card .why-icon { margin: 0; flex: 0 0 48px; width: 48px; height: 48px; font-size: 16px; } .why-card .why-num { font-size: 30px; } .why-card .why-label { margin-top: 4px; font-size: 10.5px; } .page-hero { min-height: 500px; padding: 64px 0; } .page-hero-title { font-size: clamp(30px, 10vw, 46px); } .page-hero-sub { font-size: 14.5px; } .nav-brand img { height: 40px; } .nav-book { padding: 0 14px; font-size: 11px; } .section { padding: 44px var(--gutter); } .section-head { margin-bottom: 28px; } .sec-partner-cta { min-height: 320px; padding: 56px 18px; } / Partner CTA bg, slightly recompose focal point for tall mobile crops / .sec-partner-cta .partner-cta-bg { object-position: 50% 40%; } .footer-social a { width: 36px; height: 36px; } / Footer Get in Touch card, tighter padding at small phone widths / .footer-contact { padding: 22px 18px; border-radius: 5px; } .footer-contact h3 { margin-bottom: 18px; font-size: 11px; letter-spacing: 2px; } } / ─── ≤ 360px (small phone, SE, older Android) ────────────── / @media (max-width: 360px) { :root { --gutter: 16px; } .main-nav { padding: 0 14px; column-gap: 8px; } .nav-book { padding: 0 12px; font-size: 10.5px; letter-spacing: 1px; } .nav-brand img { height: 38px; } .page-hero-title { font-size: 28px; line-height: 1.1; } .page-hero-sub { font-size: 14px; } .page-hero-eyebrow { letter-spacing: 3px; font-size: 9.5px; } .section-head h2 { font-size: 24px; } .room-card h3, .dining-card h3 { font-size: 20px; } .footer-bottom { font-size: 11px; } } / ─── Motion preferences ───────────────────────────────────── / @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ─── Data preferences (mobile metered connections) ──────────── / / When the browser signals data-saver, swap heavy decorative backgrounds for the maroon fallback / @media (prefers-reduced-data: reduce) { .footer-contact { background-image: none; } .partner-hero .partner-hero-bg, .contact-hero .contact-hero-bg, .sec-partner-cta .partner-cta-bg { display: none; } } / ─── High-DPI photo crispness ───────────────────────────────── / / Browsers can pick a slightly sharper crop on retina screens for the hero image tags */ @media (min-resolution: 2dppx) { .hero-slide img, .partner-hero-bg, .contact-hero-bg, .partner-cta-bg { image-rendering: -webkit-optimize-contrast; } }