/* Shared mobile drill-down navigation. The panel is portalled to . */ .mobile-navigation { display: none; } @media (max-width: 900px) { .mobile-navigation { position: fixed; z-index: 1000; inset: 0; display: block; width: 100vw; height: 100vh; height: 100dvh; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; overscroll-behavior: contain; /* Same glass language as the headers, ported from the Orbitz drawer (rgba(6,32,43,.82) + blur(.75rem)) and restated in Floret's paper. The panel is portalled to and is the topmost layer, so the filter sits safely on the panel itself — it has no fixed-position descendants of its own to re-parent. Held at .88 rather than .82: this surface carries long-form nav copy, so it keeps the extra contrast margin. */ background: linear-gradient(145deg, rgba(255, 255, 255, .55), transparent 42%), rgba(241, 236, 223, .88); -webkit-backdrop-filter: blur(.75rem); backdrop-filter: blur(.75rem); color: var(--ink, #17231f); opacity: 0; transform: translateY(-1rem); transition: opacity .28s ease, transform .36s cubic-bezier(.22, 1, .36, 1); } .mobile-navigation[hidden] { display: none !important; } .mobile-navigation.is-open { opacity: 1; transform: none; } .mobile-navigation__topbar { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem clamp(1rem, 5vw, 1.5rem); border-bottom: 1px solid var(--line, rgba(23, 55, 47, .2)); } .mobile-navigation__brand { max-width: 16rem; color: inherit; font-family: var(--serif, Georgia, serif); font-size: clamp(1.25rem, 5vw, 1.65rem); line-height: 1; text-decoration: none; } .mobile-navigation__close, .mobile-navigation__back, .mobile-navigation__drill { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; } .mobile-navigation__close { min-width: 44px; min-height: 44px; padding: .65rem .75rem; border: 1px solid currentColor; font-family: var(--sans, Arial, sans-serif); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .mobile-navigation__views { height: calc(100% - 72px); overflow: hidden; } .mobile-navigation__view { height: 100%; padding: clamp(1.35rem, 5vw, 2rem) clamp(1rem, 5vw, 1.5rem) 2rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .mobile-navigation__view[hidden] { display: none; } .mobile-navigation__heading { display: grid; gap: .7rem; margin-bottom: 1.2rem; } .mobile-navigation__heading h2 { margin: 0; color: var(--pine, #17372f); font-family: var(--serif, Georgia, serif); font-size: clamp(2.2rem, 10vw, 3.25rem); font-weight: 400; letter-spacing: -.035em; line-height: .95; } .mobile-navigation__back { justify-self: start; min-height: 44px; padding: .65rem 0; color: var(--pine, #17372f); font-family: var(--sans, Arial, sans-serif); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .35em; } .mobile-navigation__list { display: grid; margin: 0; padding: 0; list-style: none; } .mobile-navigation__list li { border-top: 1px solid var(--line, rgba(23, 55, 47, .2)); } .mobile-navigation__list li:last-child { border-bottom: 1px solid var(--line, rgba(23, 55, 47, .2)); } .mobile-navigation__list a, .mobile-navigation .mobile-navigation__drill { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; color: inherit; font-family: var(--serif, Georgia, serif); font-size: clamp(1.45rem, 7vw, 2.15rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; text-align: left; text-decoration: none; } .mobile-navigation__drill small { flex: 0 0 auto; color: var(--pine, #17372f); font-family: var(--sans, Arial, sans-serif); font-size: .61rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .mobile-navigation__list a[aria-current="page"] { color: var(--pine, #17372f); text-decoration: underline; text-decoration-color: var(--gold, #c4a05a); text-decoration-thickness: 2px; text-underline-offset: .3em; } .mobile-navigation :focus-visible { outline: 3px solid var(--gold, #c4a05a); outline-offset: 4px; } .mobile-navigation-open .mobile-cta { visibility: hidden !important; transform: translateY(110%) !important; } } @media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { .mobile-navigation__topbar { min-height: 56px; } .mobile-navigation__views { height: calc(100% - 56px); } .mobile-navigation__view { padding-top: .75rem; } .mobile-navigation__heading { grid-template-columns: auto 1fr; align-items: center; margin-bottom: .35rem; } .mobile-navigation__heading h2 { font-size: 1.8rem; } .mobile-navigation__list a, .mobile-navigation .mobile-navigation__drill { min-height: 46px; padding: .55rem 0; font-size: 1.25rem; } } /* Orbitz pairs every glass surface with a solid fallback where the filter is unsupported, so the panel never degrades to a see-through overlay. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { @media (max-width: 900px) { .mobile-navigation { background: linear-gradient(145deg, rgba(255, 255, 255, .55), transparent 42%), var(--paper, #f2eee4); } } } @media (prefers-reduced-motion: reduce) { .mobile-navigation { transition: none; } } /* ---------------------------------------------------------- touch targets Loaded on all 16 pages, so this is the one place a sitewide minimum can live. Measured rendered at 320-1024px, not inferred from the markup. Two techniques, chosen per element: - block / flex controls get min-height and centring; - links sitting inside a sentence get vertical padding instead, which grows the hit box without opening up the line box around them. Links that are genuinely incidental prose ("the rooms page", "the North Sikkim permit guide") are deliberately left alone: WCAG 2.2 exempts a link in a block of text, and padding them would fight the typography. */ /* Header wordmark: measured 186x42, two pixels short of the minimum. */ .brand, .guide-brand { min-height: 44px; } /* Footer navigation columns: measured 17px tall. */ .footer__nav a, .page-footer nav a, .site-footer nav a, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; } /* Breadcrumb trails: measured 13-14px tall. */ .page-breadcrumbs a, .page-breadcrumbs [aria-current="page"], .travel-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; } /* Conversion actions — phone, WhatsApp and email. This property takes its bookings on these links, so they get the full target wherever they appear, including inside a paragraph on /contact/. */ a[href^="tel:"], a[href^="mailto:"], a[href*="wa.me"], a[href*="api.whatsapp.com"], .contact-number { padding-block: 0.75rem; } /* ...but not when they are already a button or a bar item with its own box. */ .button[href^="tel:"], .button[href*="wa.me"], .mobile-cta a, .btn[href^="tel:"], .btn[href*="wa.me"] { padding-block: revert; } /* Footer address block stacks these, so give them the box rather than padding. */ .site-footer address a, .page-footer address a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; } /* Short nav words ("Home", "Rooms") are only ~30px wide, so height alone does not reach the minimum. Padding grows the hit box on both sides and an equal negative margin puts the text back exactly where it was, so nothing moves visually. The gaps in these lists are wider than the padding, so neighbouring targets still do not overlap. */ .footer__nav a, .page-footer nav a, .site-footer nav a, .footer-links a, .guide-nav a, .page-breadcrumbs a, .page-breadcrumbs [aria-current="page"], .travel-breadcrumbs a { justify-content: center; min-width: 44px; padding-inline: 0.5rem; margin-inline: -0.5rem; } /* Second touch-target pass. These were found by rendering all 16 pages at 320-1280px, not by reading the markup — each size below is a measurement. Nav, card CTAs and citation lists are lists of links, so the WCAG "link in a block of text" exception does not cover them. Links genuinely inside a sentence are still left alone. */ /* Sub-page header nav, measured 34x13. */ .guide-nav a, /* "Related guides" and "back to" navigation inside the article, 166x19. */ .travel-main nav a, /* Source citation lists at the foot of each guide, 221x16. */ .travel-sources li a, /* Room card call-to-action, 264x20. */ .room-summary-body a, /* Inline CTA panel inside a guide, 282x40. */ .travel-inline-cta a, /* Footer contact column, 173x42. */ .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; } /* Desktop primary nav measured 47x41 — three pixels short of the minimum. */ .site-nav a { min-height: 44px; } /* Third and final touch-target pass, from a full enumeration across 8 pages at 390/768/1280px. Each of these is a link that stands on its own as a list item, card action or table header — none is a link inside a sentence. */ .travel-card-link, /* guide card "Read ..." action, 16px tall */ .rate-table th a, /* tariff table column headers, 42px */ main nav a, /* in-article nav lists, 37px */ .article-help a { /* sidebar "Check availability", 13px */ display: inline-flex; align-items: center; min-height: 44px; } /* One desktop nav item ("Tariff") came out a pixel under on width. */ .site-nav a { min-width: 44px; justify-content: center; } /* .page-list items are a link plus, sometimes, trailing prose. Padding grows the hit box without reflowing the text the way a flex box would. */ .page-list a { padding-block: 0.75rem; }