/* Shared UI layer for both demo sites (modal, toast, mobile menu). Kept framework-free so it drops onto either Tailwind theme unchanged. */ :root { --hg-accent: #9a442d; --hg-accent-ink: #ffffff; --hg-ink: #201b11; --hg-muted: #6a6860; --hg-surface: #fff8f1; --hg-line: rgba(32, 27, 17, .14); --hg-font: "Inter", system-ui, sans-serif; --hg-brand-font: "Playfair Display", Georgia, serif; --hg-brand-weight: 700; --hg-nav-bg: rgba(255, 248, 241, .86); --hg-nav-border: rgba(202, 198, 189, .55); --hg-cta-bg: #201b11; --hg-cta-ink: #fff8f1; --hg-cta-radius: 0; --hg-brand-transform: uppercase; --hg-link-transform: uppercase; --hg-field-bg: #ffffff; } [data-hg-site="b"] { --hg-accent: #526600; --hg-accent-ink: #ffffff; --hg-ink: #151c27; --hg-muted: #5a6672; --hg-surface: #f9f9ff; --hg-line: rgba(21, 28, 39, .14); --hg-font: "Work Sans", "Inter", system-ui, sans-serif; --hg-brand-font: "Montserrat", "Work Sans", system-ui, sans-serif; --hg-brand-weight: 800; --hg-nav-bg: rgba(249, 249, 255, .9); --hg-nav-border: #c6c8b1; --hg-cta-bg: #c7e65a; --hg-cta-ink: #2b3600; --hg-cta-radius: 4px; } /* site C ships with - the whole palette is inverted */ [data-hg-site="c"] { --hg-accent: #b5d349; --hg-accent-ink: #2a3500; --hg-ink: #e0e3e7; --hg-muted: #a8abaf; --hg-surface: #101417; --hg-line: rgba(224, 227, 231, .16); --hg-font: "Inter", system-ui, sans-serif; --hg-brand-font: "Montserrat", system-ui, sans-serif; --hg-brand-weight: 800; --hg-nav-bg: rgba(16, 20, 23, .88); --hg-nav-border: #44474b; --hg-cta-bg: #b5d349; --hg-cta-ink: #2a3500; --hg-cta-radius: 2px; --hg-field-bg: #1c2023; } [data-hg-site="d"] { --hg-accent: #b02517; --hg-accent-ink: #ffffff; --hg-ink: #1d1c13; --hg-muted: #5a413c; --hg-surface: #fff9eb; --hg-line: rgba(29, 28, 19, .14); --hg-font: "Montserrat", system-ui, sans-serif; --hg-brand-font: "Playfair Display", Georgia, serif; --hg-brand-weight: 700; --hg-nav-bg: rgba(255, 249, 235, .82); --hg-nav-border: #e2beb8; --hg-cta-bg: #b02517; --hg-cta-ink: #ffffff; --hg-cta-radius: 999px; /* the wordmark is set in Playfair mixed-case, not caps */ --hg-brand-transform: none; --hg-link-transform: none; } /* Site D's export never gave the 84px display size a mobile step, so long words ("NORTHERN EDGE", "HA GIANG") push past the viewport on phones. */ @media (max-width: 767px) { [data-hg-site="d"] .text-display-xl { font-size: 44px; line-height: 1.06; } } /* anchor targets must clear the fixed top bar when jumped to */ #about, #private-tours { scroll-margin-top: 100px; } /* ---- shared top bar (replaces the per-page navbars from the export) ---- */ .hg-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; background: var(--hg-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hg-nav-border); } .hg-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; max-width: 1440px; margin: 0 auto; padding: 0 20px; } @media (min-width: 768px) { .hg-nav__inner { height: 76px; padding: 0 64px; } } .hg-nav__brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--hg-brand-font); font-weight: var(--hg-brand-weight); font-size: 18px; letter-spacing: -.02em; text-transform: var(--hg-brand-transform, uppercase); white-space: nowrap; color: var(--hg-ink); text-decoration: none; transition: color .2s ease; } @media (min-width: 768px) { .hg-nav__brand { font-size: 22px; } } .hg-nav__brand:hover { color: var(--hg-accent); } .hg-nav__links { display: none; align-items: center; gap: 30px; } @media (min-width: 900px) { .hg-nav__links { display: flex; } } .hg-nav__links a { font-family: var(--hg-font); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: var(--hg-link-transform, uppercase); color: var(--hg-muted); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .hg-nav__links a:hover { color: var(--hg-accent); } .hg-nav__links a.is-active { color: var(--hg-ink); border-bottom-color: var(--hg-accent); } .hg-nav__actions { display: flex; align-items: center; gap: 14px; } .hg-nav__lang { display: none; font-family: var(--hg-font); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--hg-muted); background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s ease; } @media (min-width: 900px) { .hg-nav__lang { display: block; } } .hg-nav__lang:hover { color: var(--hg-accent); } .hg-nav__cta { font-family: var(--hg-font); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--hg-cta-ink); background: var(--hg-cta-bg); border: 0; border-radius: var(--hg-cta-radius); padding: 12px 20px; cursor: pointer; transition: background .2s ease, color .2s ease; } @media (min-width: 768px) { .hg-nav__cta { padding: 13px 26px; } } .hg-nav__cta:hover { background: var(--hg-accent); color: #fff; } .hg-nav__cta .is-short { display: inline; } .hg-nav__cta .is-full { display: none; } @media (min-width: 560px) { .hg-nav__cta .is-short { display: none; } .hg-nav__cta .is-full { display: inline; } } .hg-nav__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; } @media (min-width: 900px) { .hg-nav__burger { display: none; } } .hg-nav__burger span { display: block; height: 1.5px; border-radius: 2px; background: var(--hg-ink); } /* very small phones (iPhone SE and friends) - the wordmark, CTA and burger do not fit at their default sizes, so tighten everything up */ @media (max-width: 420px) { /* single long words at display sizes ("AROUND", "Expedition") are wider than the screen and would otherwise force a horizontal scrollbar */ h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; } .hg-nav__inner { gap: 10px; padding: 0 14px; } .hg-nav__brand { font-size: 15px; } .hg-nav__actions { gap: 8px; } .hg-nav__cta { padding: 10px 13px; font-size: 10px; letter-spacing: .1em; } .hg-nav__burger { width: 26px; } } /* floating-pill variant — site D's export uses a centred rounded bar */ .hg-nav--pill { background: none; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 16px; pointer-events: none; } .hg-nav--pill .hg-nav__inner { pointer-events: auto; width: -moz-fit-content; width: fit-content; max-width: 100%; height: auto; gap: 22px; padding: 9px 10px 9px 22px; border: 1px solid var(--hg-nav-border); border-radius: 999px; background: var(--hg-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 30px rgba(0, 0, 0, .06); } @media (min-width: 768px) { .hg-nav--pill { padding: 16px; } .hg-nav--pill .hg-nav__inner { height: auto; padding: 10px 12px 10px 26px; gap: 28px; } } .hg-nav--pill .hg-nav__brand { color: var(--hg-accent); } .hg-nav--pill .hg-nav__cta { padding: 10px 20px; } @media (max-width: 420px) { .hg-nav--pill { padding: 10px 12px; } .hg-nav--pill .hg-nav__inner { gap: 10px; padding: 8px 8px 8px 16px; } .hg-nav--pill .hg-nav__cta { padding: 9px 14px; } } @media (min-width: 768px) { .hg-nav--pill .hg-nav__cta { padding: 11px 24px; } } .hg-nav--pill .hg-nav__links a { letter-spacing: .1em; font-weight: 700; font-size: 12px; } .hg-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 18, 14, .6); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .hg-overlay.is-open { opacity: 1; pointer-events: auto; } .hg-modal { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: var(--hg-surface); color: var(--hg-ink); font-family: var(--hg-font); padding: 32px; border-radius: 4px; transform: translateY(12px) scale(.98); transition: transform .25s ease; } .hg-overlay.is-open .hg-modal { transform: none; } .hg-modal__eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; margin: 0 0 6px; } .hg-modal__title { font-size: 26px; line-height: 1.15; font-weight: 700; margin: 0 0 20px; text-transform: uppercase; letter-spacing: -.01em; } .hg-field { display: block; margin-bottom: 14px; } .hg-field span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 6px; } .hg-field input, .hg-field select { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 15px; color: inherit; background: var(--hg-field-bg, #fff); border: 1px solid var(--hg-line); border-radius: 3px; outline: none; } .hg-field input:focus, .hg-field select:focus { border-color: var(--hg-accent); } .hg-btn { width: 100%; padding: 14px; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hg-accent-ink); background: var(--hg-accent); border: 0; border-radius: 3px; cursor: pointer; transition: opacity .2s ease; } .hg-btn:hover { opacity: .88; } .hg-modal__close { float: right; margin: -8px -8px 0 0; width: 32px; height: 32px; font-size: 20px; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; opacity: .5; } .hg-modal__close:hover { opacity: 1; } .hg-modal__note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; opacity: .55; } .hg-success { text-align: center; padding: 8px 0; } .hg-success__mark { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--hg-accent); color: var(--hg-accent-ink); font-size: 28px; line-height: 56px; } /* Toast */ .hg-toast { position: fixed; left: 50%; bottom: 32px; z-index: 9999; transform: translate(-50%, 20px); padding: 12px 22px; font-family: var(--hg-font); font-size: 13px; letter-spacing: .04em; color: #fff; background: rgba(28, 25, 20, .94); border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .hg-toast.is-open { opacity: 1; transform: translate(-50%, 0); } /* Mobile menu */ .hg-drawer { position: fixed; inset: 0; z-index: 9997; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 32px; background: var(--hg-surface); font-family: var(--hg-font); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .hg-drawer.is-open { opacity: 1; pointer-events: auto; } .hg-drawer a { color: var(--hg-ink); font-size: 30px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--hg-line); } .hg-drawer a:hover { color: var(--hg-accent); } .hg-drawer a.is-active { color: var(--hg-accent); } .hg-drawer__close { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; font-size: 26px; color: var(--hg-ink); background: none; border: 0; cursor: pointer; } /* Back-to-gallery pill */ .hg-home { position: fixed; left: 16px; bottom: 16px; z-index: 9990; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-family: var(--hg-font); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none; background: rgba(28, 25, 20, .8); backdrop-filter: blur(6px); border-radius: 999px; transition: background .2s ease; } .hg-home:hover { background: var(--hg-accent); }