/* ============================================================================ * voyage.css — v205000 "Voyage" design layer (loaded last) * ---------------------------------------------------------------------------- * §0 tokens §4 pill search §8 footer §12 responsive * §1 base §5 home hero §9 page heads * §2 buttons §6 section heads §10 legal / about * §3 header §7 card rail §11 inner-page polish * * Mobile first: the base rules are phone rules; min-width queries add room. * Breakpoints: 560 · 720 · 960 · 1280 · 1600. * Prefix: og- (new chrome, nothing in the older sheets touches it). * ==========================================================================*/ /* §0 ── Tokens ───────────────────────────────────────────────────────────── */ :root { --og-navy: #1c3f8f; --og-navy-2: #15337a; --og-navy-deep: #0f1c3f; --og-red: #d81f36; --og-ink: #111827; --og-ink-2: #2b3347; --og-ink-3: #5b6478; --og-line: #e3e7ef; --og-line-2: #c8cfdd; --og-wash: #f3f5fa; --og-tint: #eaf0fc; --og-white: #fff; --og-r: 16px; --og-r-lg: 24px; --og-shadow: 0 1px 2px rgba(15, 28, 63, .05), 0 8px 24px rgba(15, 28, 63, .08); --og-shadow-lg: 0 2px 4px rgba(15, 28, 63, .05), 0 18px 48px rgba(15, 28, 63, .14); --og-gutter: clamp(16px, 4.5vw, 40px); --og-max: 1240px; --og-hh: 64px; --og-font: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Arial, sans-serif; } @media (min-width: 960px) { :root { --og-hh: 76px; } } /* §1 ── Base ─────────────────────────────────────────────────────────────── */ html { scroll-padding-top: calc(var(--og-hh) + 16px); -webkit-text-size-adjust: 100%; } html.og-lock, html.og-lock body { overflow: hidden; } body.og-voyage { font-family: var(--og-font); color: var(--og-ink); overflow-x: clip; } body.og-voyage img { max-width: 100%; height: auto; } .og-wrap { width: 100%; max-width: var(--og-max); margin-inline: auto; padding-inline: var(--og-gutter); } .og-main { display: block; } body.og-voyage .oga-container { max-width: var(--og-max); padding-inline: var(--og-gutter); } /* One content width for the new chrome and the older sections */ body.og-voyage .ogx-wrap { width: 100%; max-width: var(--og-max); margin-inline: auto; padding-inline: var(--og-gutter); box-sizing: border-box; } .og-eyebrow { margin: 0 0 14px; font: 700 13px/1.3 var(--og-font); letter-spacing: .1em; text-transform: uppercase; color: var(--og-navy); } .og-eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--og-red); transform: rotate(45deg); vertical-align: 1px; } body.og-voyage :focus-visible { outline: 3px solid color-mix(in srgb, var(--og-navy) 55%, white); outline-offset: 2px; border-radius: 6px; } .og-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--og-navy); color: #fff !important; padding: 10px 16px; border-radius: 10px; } .og-skip:focus { top: 12px; } /* §2 ── Buttons ──────────────────────────────────────────────────────────── */ .og-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent; font: 700 15.5px/1 var(--og-font); letter-spacing: .005em; white-space: nowrap; cursor: pointer; text-decoration: none !important; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; } .og-btn:active { transform: translateY(1px); } body.og-voyage .og-btn--solid { background: var(--og-navy); border-color: var(--og-navy); color: #fff; } body.og-voyage .og-btn--solid:hover { background: var(--og-navy-2); border-color: var(--og-navy-2); } body.og-voyage .og-btn--line { background: #fff; border-color: var(--og-line-2); color: var(--og-ink); } body.og-voyage .og-btn--line:hover { border-color: var(--og-navy); color: var(--og-navy); } body.og-voyage .og-btn--white { background: #fff; border-color: #fff; color: var(--og-navy); } body.og-voyage .og-btn--white:hover { background: var(--og-tint); border-color: var(--og-tint); } body.og-voyage .og-btn--ghost-white { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; } body.og-voyage .og-btn--ghost-white:hover { border-color: #fff; background: rgba(255, 255, 255, .1); } .og-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--og-line); background: #fff; color: var(--og-ink); cursor: pointer; transition: border-color .15s, background-color .15s; } .og-iconbtn:hover { border-color: var(--og-navy); color: var(--og-navy); } .og-iconbtn[aria-expanded="true"] { background: var(--og-tint); border-color: var(--og-navy); color: var(--og-navy); } /* §3 ── Header ───────────────────────────────────────────────────────────── */ .og-header { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; padding-top: env(safe-area-inset-top); } .og-header.is-scrolled { border-bottom-color: var(--og-line); box-shadow: 0 6px 20px rgba(15, 28, 63, .06); } body.admin-bar .og-header { top: 46px; } @media (min-width: 783px) { body.admin-bar .og-header { top: 32px; } } .og-header__row { display: flex; align-items: center; gap: 12px; min-height: var(--og-hh); } .og-logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none !important; color: var(--og-navy); flex: 0 1 auto; } .og-logo__mark, .og-logo__img, .og-header .og-logo img { width: 38px !important; height: 38px !important; object-fit: contain; flex: none; } .og-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .og-header__book { display: none; } .og-menutoggle__close { display: none; } .og-menutoggle[aria-expanded="true"] .og-menutoggle__open { display: none; } .og-menutoggle[aria-expanded="true"] .og-menutoggle__close { display: inline-flex; } /* Mobile: the nav is a panel under the header */ .og-nav { position: fixed; inset: calc(var(--og-hh) + env(safe-area-inset-top)) 0 auto 0; z-index: 95; background: #fff; padding: 8px var(--og-gutter) 24px; max-height: calc(100dvh - var(--og-hh) - env(safe-area-inset-top)); overflow-y: auto; border-top: 1px solid var(--og-line); box-shadow: 0 24px 40px rgba(15, 28, 63, .18); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s, transform .18s, visibility 0s .18s; } body.admin-bar .og-nav { top: calc(var(--og-hh) + 46px); } .og-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s; } .og-nav__list { list-style: none; margin: 0; padding: 0; display: grid; } .og-nav__link { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 4px; border-bottom: 1px solid var(--og-line); font: 700 18px/1.2 var(--og-font); color: var(--og-ink) !important; text-decoration: none !important; } .og-nav__ic { color: var(--og-navy); flex: none; } .og-nav__item.is-current .og-nav__link { color: var(--og-navy) !important; } .og-nav__item.is-current .og-nav__link::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--og-red); } .og-nav__book { display: flex; margin-top: 20px; width: 100%; min-height: 54px; } .og-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(15, 28, 63, .45); } .og-scrim[hidden] { display: none; } .og-searchpanel { border-top: 1px solid var(--og-line); background: var(--og-wash); padding-block: 14px 18px; } .og-searchpanel[hidden] { display: none; } @media (min-width: 960px) { .og-menutoggle, .og-scrim { display: none !important; } .og-header__book { display: inline-flex; min-height: 44px; padding: 0 20px; } .og-nav { position: static; inset: auto; z-index: auto; background: none; padding: 0; max-height: none; overflow: visible; border: 0; box-shadow: none; visibility: visible; opacity: 1; transform: none; margin-left: clamp(12px, 3vw, 44px); flex: 1 1 auto; display: flex; align-items: center; } .og-nav__list { display: flex; gap: 2px; } .og-nav__link { min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--og-ink-2) !important; transition: background-color .15s, color .15s; } .og-nav__link:hover { background: var(--og-wash); color: var(--og-navy) !important; } .og-nav__ic { display: none; } .og-nav__item.is-current .og-nav__link { background: var(--og-tint); color: var(--og-navy) !important; font-weight: 700; } .og-nav__item.is-current .og-nav__link::after { display: none; } .og-nav__book { display: none; } } /* §4 ── Pill search ──────────────────────────────────────────────────────── */ .og-pill { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border: 1px solid #e6dfd0; border-radius: 28px; box-shadow: 0 2px 4px rgba(15, 28, 63, .04), 0 14px 36px rgba(15, 28, 63, .1); padding: 8px; } .og-pill__field { position: relative; display: flex; align-items: center; min-width: 0; min-height: 56px; } .og-pill__field--q { grid-column: 1 / -1; padding: 0 12px; border-bottom: 1px solid var(--og-line); } .og-pill__field--select + .og-pill__field--select { border-left: 1px solid var(--og-line); } .og-pill__ic { color: var(--og-ink-3); flex: none; margin-right: 10px; } .og-pill input[type="search"] { flex: 1; min-width: 0; width: 100%; height: 54px; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important; padding: 0 !important; font: 600 17px/1 var(--og-font); color: var(--og-ink); -webkit-appearance: none; appearance: none; } .og-pill input[type="search"]::placeholder { color: #7b7468; opacity: 1; } .og-pill input[type="search"]::-webkit-search-cancel-button { display: none; } .og-pill select { width: 100%; height: 54px; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important; padding: 0 36px 0 16px !important; font: 700 17px/1 var(--og-font); color: var(--og-ink); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; } .og-pill__caret { position: absolute; right: 14px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--og-ink-2); } .og-pill__field:focus-within { background: var(--og-wash); border-radius: 18px; } .og-pill__field--q:focus-within { border-radius: 18px 18px 0 0; } .og-pill__go { grid-column: 1 / -1; margin-top: 8px; min-height: 54px; border: 0; border-radius: 999px; background: var(--og-navy); color: #fff; font: 800 17px/1 var(--og-font); letter-spacing: .01em; cursor: pointer; transition: background-color .15s; } .og-pill__go:hover { background: var(--og-navy-2); } @media (min-width: 720px) and (max-width: 959px) { .og-pill { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; border-radius: 32px; align-items: center; } .og-pill__go { grid-column: auto; margin: 0 0 0 8px; padding: 0 30px; } } @media (min-width: 960px) { .og-pill { grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) minmax(180px, 250px) auto; border-radius: 999px; padding: 8px 8px 8px 12px; align-items: center; } .og-pill__field--q { grid-column: auto; border-bottom: 0; padding: 0 16px 0 18px; } .og-pill__field--select { border-left: 1px solid #e6dfd0 !important; } .og-pill__field:focus-within, .og-pill__field--q:focus-within { border-radius: 999px; } .og-pill__go { grid-column: auto; margin: 0; height: 56px; padding: 0 38px; } .og-pill input[type="search"], .og-pill select { font-size: 19px; height: 60px; } } @media (min-width: 720px) { .og-pill__field { min-height: 64px; } .og-pill__field--select { border-left: 1px solid #e6dfd0 !important; } .og-pill input[type="search"], .og-pill select { font-size: 19px; height: 60px; } .og-pill__go { height: 56px; } } @media (min-width: 720px) and (max-width: 959px) { .og-pill__field--q { grid-column: 1 / -1; border-bottom: 1px solid var(--og-line); border-left: 0; } .og-pill__field--q:focus-within { border-radius: 22px 22px 0 0; } .og-pill__field--q + .og-pill__field--select { border-left: 0 !important; } } @media (min-width: 1280px) { .og-pill input[type="search"], .og-pill select { font-size: 20px; } } /* §5 ── Home hero ────────────────────────────────────────────────────────── */ .og-hero { background: linear-gradient(180deg, #f1f3f8 0%, #f8f9fc 55%, #fff 100%); padding-block: clamp(40px, 8vw, 104px) clamp(36px, 6vw, 72px); } .og-hero__in { text-align: center; } body.og-voyage .og-hero__title { margin: 0 auto clamp(28px, 4.6vw, 52px); max-width: 16ch; font-family: var(--og-font); font-weight: 900; font-size: clamp(40px, 8.6vw, 92px); line-height: 1.03; letter-spacing: -.04em; color: var(--og-navy); text-wrap: balance; } .og-hero .og-pill { max-width: 1000px; margin-inline: auto; text-align: left; } .og-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; } .og-popular__label { font: 600 15px/1 var(--og-font); color: var(--og-ink-3); margin-right: 2px; } .og-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid #e8e3d6; color: var(--og-ink) !important; font: 600 15px/1 var(--og-font); text-decoration: none !important; transition: border-color .15s, color .15s, background-color .15s; } .og-chip:hover { border-color: var(--og-navy); color: var(--og-navy) !important; background: var(--og-tint); } .og-hero__strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; margin-top: clamp(26px, 4vw, 44px); } .og-hero__price { margin: 0; flex: 1 1 100%; font: 500 16px/1.4 var(--og-font); color: var(--og-ink-2); } .og-hero__price strong { font-weight: 900; font-size: 1.5em; color: var(--og-navy); letter-spacing: -.02em; margin-right: 4px; } .og-hero__strip .og-btn { flex: 1 1 100%; } .og-values { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; } .og-values li { display: inline-flex; align-items: center; gap: 8px; font: 700 14.5px/1.2 var(--og-font); color: var(--og-ink-2); } .og-values svg { color: var(--og-navy); } @media (min-width: 560px) { .og-hero__price { flex: 0 1 auto; } .og-hero__strip .og-btn { flex: 0 0 auto; } } /* §6 ── Section heads ────────────────────────────────────────────────────── */ .og-section { padding-block: clamp(36px, 6vw, 80px); } .og-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: clamp(18px, 3vw, 32px); } body.og-voyage .og-head__title { margin: 0; font-family: var(--og-font); font-weight: 800; font-size: clamp(26px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -.035em; color: var(--og-ink); text-wrap: balance; } .og-head__more { font: 700 15px/1 var(--og-font); color: var(--og-navy) !important; text-decoration: none !important; white-space: nowrap; } .og-head__more:hover { text-decoration: underline !important; text-underline-offset: 4px; } /* §7 ── Card rail ────────────────────────────────────────────────────────── */ .og-rail { list-style: none; margin: 0 calc(-1 * var(--og-gutter)); padding: 4px var(--og-gutter) 14px; display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--og-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .og-rail::-webkit-scrollbar { display: none; } .og-rail > li { scroll-snap-align: start; min-width: 0; } .og-card { display: flex; flex-direction: column; height: 100%; text-decoration: none !important; color: var(--og-ink) !important; border-radius: var(--og-r); } .og-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--og-r); background: var(--og-wash); } body.og-voyage .og-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .og-card:hover .og-card__media img { transform: scale(1.05); } .og-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 2px 0; } .og-card__title { font: 800 18px/1.2 var(--og-font); letter-spacing: -.015em; } .og-card:hover .og-card__title { color: var(--og-navy); } .og-card__text { font: 500 15px/1.4 var(--og-font); color: var(--og-ink-3); } @media (min-width: 720px) { .og-rail { margin-inline: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; scroll-snap-type: none; } } @media (min-width: 960px) { .og-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; } } @media (min-width: 1280px) { .og-rail { gap: 32px 24px; } .og-card__title { font-size: 20px; } } @media (min-width: 1600px) { :root { --og-max: 1360px; } } /* §8 ── Footer ───────────────────────────────────────────────────────────── */ .og-footer { margin-top: clamp(40px, 6vw, 88px); color: #d6def2; background: var(--og-navy-deep); padding-bottom: env(safe-area-inset-bottom); } .og-plan { background: var(--og-navy); color: #fff; margin-top: calc(-1 * clamp(40px, 6vw, 88px)); position: relative; } .og-plan__in { display: grid; gap: 22px; padding-block: clamp(32px, 5vw, 56px); align-items: center; } .og-plan h2 { margin: 0 0 8px; font: 800 clamp(24px, 3.6vw, 36px)/1.12 var(--og-font); letter-spacing: -.03em; color: #fff !important; text-wrap: balance; } .og-plan p { margin: 0; color: #d6def2 !important; max-width: 56ch; } .og-plan__actions { display: flex; flex-wrap: wrap; gap: 10px; } .og-plan__actions .og-btn { flex: 1 1 auto; } .og-footer__main { display: grid; gap: 36px; padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); } .og-footer .og-logo, .og-footer .og-logo__name { color: #fff; } .og-footer .og-logo__sub { color: #ff8f9d; } .og-footer__tagline { margin: 18px 0 0; max-width: 40ch; color: #b9c5e4; font-size: 15.5px; line-height: 1.6; } .og-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; } .og-footer__col--contact { grid-column: 1 / -1; } .og-footer__head { margin: 0 0 14px !important; font: 700 13px/1.2 var(--og-font) !important; letter-spacing: .12em; text-transform: uppercase; color: #fff !important; } .og-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .og-footer__col li { display: flex; align-items: center; gap: 10px; min-height: 36px; color: #b9c5e4; font-size: 15.5px; } body.og-voyage .og-footer a { color: #d6def2; text-decoration: none; } body.og-voyage .og-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } body.og-voyage .og-footer .og-logo, body.og-voyage .og-footer .og-logo:hover { text-decoration: none; color: #fff; } body.og-voyage .og-footer .og-btn--white { color: var(--og-navy); } body.og-voyage .og-footer .og-btn--ghost-white { color: #fff; } .og-footer__ic { flex: none; color: #8fa6dc; } .og-footer .oga-site-footer__social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; } .og-footer .oga-site-footer__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #fff !important; } .og-footer .oga-site-footer__social a:hover { background: #fff; color: var(--og-navy) !important; } .og-footer__bar { border-top: 1px solid rgba(255, 255, 255, .14); } .og-footer__bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-block: 18px; font-size: 14px; color: #9fb0d8; } .og-footer__bar p { margin: 0; } .og-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; } .og-footer__top { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .og-footer__top svg { transform: rotate(180deg); } @media (min-width: 720px) { .og-plan__in { grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; } .og-plan__actions .og-btn { flex: 0 0 auto; } .og-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } .og-footer__col--contact { grid-column: auto; } } @media (min-width: 960px) { .og-footer__main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 64px; } } @media (max-width: 559px) { .og-footer__legal { flex: 1 1 100%; order: 3; } .og-footer__top { margin-left: 0; } } /* §9 ── Page heads ───────────────────────────────────────────────────────── */ .og-pagehead { background: linear-gradient(180deg, #f1f3f8, #fff); padding-block: clamp(36px, 7vw, 88px) clamp(28px, 4vw, 56px); } body.og-voyage .og-pagehead__title { margin: 0; max-width: 20ch; font: 900 clamp(34px, 6.6vw, 68px)/1.04 var(--og-font); letter-spacing: -.04em; color: var(--og-navy); text-wrap: balance; } .og-pagehead__lede { margin: 18px 0 0; max-width: 62ch; font: 500 clamp(17px, 2vw, 20px)/1.6 var(--og-font); color: var(--og-ink-2); } .og-pagehead__meta { margin: 18px 0 0; font: 600 14px/1 var(--og-font); color: var(--og-ink-3); } /* §10 ── About · Terms · Privacy ─────────────────────────────────────────── */ .og-legal { display: grid; gap: 28px; padding-block: clamp(24px, 4vw, 56px) 0; } .og-legal__toc { border: 1px solid var(--og-line); border-radius: var(--og-r); padding: 16px 18px; background: #fff; align-self: start; } .og-legal__toc-h { margin: 0 0 8px; font: 700 12.5px/1 var(--og-font); letter-spacing: .12em; text-transform: uppercase; color: var(--og-ink-3); } .og-legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: t; } .og-legal__toc li { counter-increment: t; } .og-legal__toc a { display: flex; gap: 10px; align-items: center; min-height: 38px; padding: 0 8px; border-radius: 10px; font: 600 15px/1.25 var(--og-font); color: var(--og-ink-2) !important; text-decoration: none !important; } .og-legal__toc a::before { content: counter(t, decimal-leading-zero); font-weight: 800; font-size: 12.5px; color: var(--og-navy); min-width: 1.6em; } .og-legal__toc a:hover { background: var(--og-tint); color: var(--og-navy) !important; } .og-legal__body { min-width: 0; max-width: 760px; } .og-legal__sec { padding-block: clamp(20px, 3vw, 32px); border-top: 1px solid var(--og-line); } .og-legal__sec:first-child { border-top: 0; padding-top: 0; } body.og-voyage .og-legal__sec h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font: 800 clamp(22px, 3vw, 30px)/1.15 var(--og-font); letter-spacing: -.03em; color: var(--og-ink); } .og-legal__n { font-weight: 800; font-size: .6em; letter-spacing: .06em; color: var(--og-red); } .og-legal__sec p { margin: 0 0 14px; font: 400 17px/1.75 var(--og-font); color: var(--og-ink-2); } .og-ticks { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; } .og-ticks li { position: relative; padding-left: 30px; font: 400 17px/1.65 var(--og-font); color: var(--og-ink-2); } .og-ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 3px solid var(--og-navy); border-bottom: 3px solid var(--og-navy); transform: rotate(-45deg) translateY(-30%); } .og-cards3 { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; } .og-cards3__item { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--og-line); border-radius: var(--og-r); background: #fff; font: 400 15.5px/1.55 var(--og-font); color: var(--og-ink-2); } .og-cards3__item strong { font: 800 19px/1.2 var(--og-font); letter-spacing: -.02em; color: var(--og-ink); } .og-cards3__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--og-tint); color: var(--og-navy); } .og-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .og-prose { font: 400 17px/1.75 var(--og-font); color: var(--og-ink-2); } .og-prose h2 { font-size: clamp(22px, 3vw, 30px); margin: 1.6em 0 .5em; } .og-prose a { color: var(--og-navy); } @media (max-width: 959px) { .og-legal__toc { padding: 10px 0 10px 14px; border-radius: 14px; } .og-legal__toc-h { display: none; } .og-legal__toc ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-right: 14px; } .og-legal__toc ol::-webkit-scrollbar { display: none; } .og-legal__toc a { white-space: nowrap; background: var(--og-wash); border-radius: 999px; padding: 0 14px; } } @media (min-width: 720px) { .og-cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { .og-legal--toc { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } .og-legal__toc { position: sticky; top: calc(var(--og-hh) + 24px); } body.admin-bar .og-legal__toc { top: calc(var(--og-hh) + 56px); } .og-legal:not(.og-legal--toc) .og-legal__body { margin-inline: auto; } } /* §11 ── Inner pages: polish the older components under the new system ─────── */ html body.ogx .ogp-hero, html body.ogx .ogx-pagehead, html body.ogx .oga-archive__head { background: linear-gradient(180deg, #f1f3f8, #fff) !important; border-color: transparent !important; } html body.ogx :is(.ogp-hero, .ogx-pagehead, .oga-archive__head) :is(h1, .ogp-hero__title, .ogx-pagehead__title, .oga-archive__title) { color: var(--og-navy) !important; font-weight: 900 !important; letter-spacing: -.04em !important; } html body.ogx .ogp-hero__aside { background: #fff !important; border: 1px solid var(--og-line) !important; box-shadow: var(--og-shadow) !important; } html body.ogx .ogp-identity :is(p, h2, h3, span) { color: var(--og-ink-2) !important; } html body.ogx .ogp-identity .ogp-identity__line { color: var(--og-navy) !important; font-weight: 800; } html body.ogx .oa-close { background: var(--og-navy) !important; color: #fff; margin-top: clamp(48px, 7vw, 96px); } html body.ogx .oa-close .oa-close__title, html body.ogx .oa-close .oa-kicker { color: #fff !important; } html body.ogx .oa-close .oa-btn--accent { background: #fff !important; border-color: #fff !important; color: var(--og-navy) !important; } html body.ogx .oa-close .oa-btn--onband { background: transparent !important; border-color: rgba(255, 255, 255, .6) !important; color: #fff !important; } html body.ogx .ogn-biz, html body.ogx .ogn-join, html body.ogx .ogn-network { background: var(--og-wash) !important; border-radius: var(--og-r-lg); } body.og-voyage .oa-home + .og-footer, body.og-voyage .oa-close + .og-footer { margin-top: 0; } body.og-voyage .ogx-crumbs { background: #fff; border-bottom: 1px solid var(--og-line); } /* §12 ── Large screens and touch ─────────────────────────────────────────── */ @media (min-width: 1600px) { body.og-voyage { font-size: 17.5px; } .og-hero__title { max-width: 18ch; } } @media (hover: none) { .og-card:hover .og-card__media img { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .og-header, .og-footer, .og-searchpanel, .og-scrim, .og-legal__toc { display: none !important; } .og-pagehead { background: none; padding-block: 0; } } /* Very small phones (≤ 359px) */ @media (max-width: 359px) { .og-pill input[type="search"], .og-pill select { font-size: 15px; } .og-pill select { padding-left: 10px !important; padding-right: 28px !important; } .og-pill__caret { right: 8px; } .og-popular .og-chip { min-height: 36px; padding: 0 12px; font-size: 14px; } } /* §13 ── v205100: one-row logo lockup ───────────────────────────────────────── * [mark] │ Online Guide Association — one line at every width. * Title case, heavy Work Sans; "Online Guide" navy, "Association" red. * Phones < 560px drop the rule; phones < 360px drop the mark so the name stays on one line. * ────────────────────────────────────────────────────────────────────────── */ .og-logo { gap: 10px; flex: 0 1 auto; min-width: 0; } .og-logo__rule { flex: none; width: 1.5px; height: 26px; border-radius: 2px; background: var(--og-line-2); } .og-logo__word, .og-logo__word--line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px/1.1 var(--og-font); letter-spacing: -.012em; text-transform: none; } .og-logo__word .og-logo__name, .og-logo__word .og-logo__sub { display: inline; margin: 0; font: inherit; letter-spacing: inherit; } .og-logo__word .og-logo__name { color: var(--og-navy); } .og-logo__word .og-logo__sub { color: var(--og-red); } .og-header .og-nav { min-width: 0; } @media (max-width: 559px) { .og-header .og-logo__rule { display: none; } .og-header .og-logo { gap: 8px; } } @media (max-width: 379px) { .og-header .og-logo__mark, .og-header .og-logo__img { width: 30px !important; height: 30px !important; } .og-header .og-logo__word { font-size: 15px; letter-spacing: -.018em; } .og-header__actions { gap: 6px; } } @media (max-width: 374px) { .og-header .og-logo__mark, .og-header .og-logo__img { display: none !important; } } @media (min-width: 380px) and (max-width: 559px) { .og-header .og-logo__word { font-size: clamp(15px, 4.1vw, 17px); } } @media (min-width: 560px) { .og-logo__word { font-size: 18px; } .og-logo__rule { height: 28px; } } /* Desktop row: logo · 5 links · (search) · Book a guide — tuned so it never wraps. */ @media (min-width: 960px) { .og-header .og-logo { gap: 8px; } .og-header .og-logo__mark, .og-header .og-logo__img { width: 34px !important; height: 34px !important; } .og-header .og-logo__word { font-size: 15px; } .og-header .og-logo__rule { height: 24px; } .og-nav { margin-left: 14px; } .og-nav__link { padding: 0 9px; font-size: 14.5px; } .og-header__book { padding: 0 16px; } } @media (min-width: 960px) and (max-width: 1023px) { .og-header .og-logo__word { font-size: 14px; letter-spacing: -.018em; } .og-header .og-logo__rule { display: none; } } @media (min-width: 1100px) { .og-header .og-logo__word { font-size: 17px; } .og-nav { margin-left: clamp(18px, 2.4vw, 40px); } .og-nav__link { padding: 0 13px; font-size: 15px; } } @media (min-width: 1280px) { .og-header .og-logo { gap: 12px; } .og-header .og-logo__mark, .og-header .og-logo__img { width: 40px !important; height: 40px !important; } .og-header .og-logo__word { font-size: 19px; } .og-header .og-logo__rule { height: 30px; } .og-nav__link { padding: 0 15px; } } .og-footer .og-logo__rule { background: rgba(255, 255, 255, .28); } .og-footer .og-logo__word .og-logo__name { color: #fff; } .og-footer .og-logo__word .og-logo__sub { color: #ff8f9d; } .og-footer .og-logo__word { font-size: clamp(16px, 4.4vw, 20px); overflow: visible; white-space: normal; } /* §14 ── v205100: "Find the association" frame (#find-us) ───────────────────── * Layer 1 head eyebrow · title · lede * Layer 2 steps 01 Visit · 02 Message · 03 Review (real links) * Layer 3 grid map │ contact card / Tripadvisor card * Phones: one column (contact → map → reviews). Tablets: map full width, * cards side by side. Desktop: map left, cards stacked right. * ────────────────────────────────────────────────────────────────────────── */ .og-find { margin-block: clamp(40px, 6vw, 80px); } .og-find__frame { position: relative; overflow: hidden; isolation: isolate; padding: clamp(18px, 3.4vw, 40px); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); background: linear-gradient(180deg, var(--og-tint) 0%, #f7f9fd 42%, #fff 100%); box-shadow: var(--og-shadow); } .og-find__frame::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--og-navy) 0 62%, var(--og-red) 62% 100%); } .og-find__head { max-width: 720px; margin: 0 0 clamp(18px, 2.6vw, 28px); } .og-find__eyebrow { margin-bottom: 10px; } .og-find__title { margin: 0; font: 900 clamp(26px, 4.6vw, 44px)/1.06 var(--og-font); letter-spacing: -.025em; color: var(--og-navy); text-wrap: balance; } .og-find__lede { margin: 12px 0 0; max-width: 60ch; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: var(--og-ink-3); } /* Steps */ .og-find__steps { list-style: none; margin: 0 0 clamp(16px, 2.4vw, 24px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: none; } .og-find__steps li { margin: 0; min-width: 0; } .og-find__step { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 14px 8px; text-align: center; border-radius: var(--og-r); background: #fff; border: 1px solid var(--og-line); color: var(--og-ink) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; } .og-find__step:hover { border-color: var(--og-navy); box-shadow: var(--og-shadow); transform: translateY(-2px); } .og-find__stepic { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--og-tint); color: var(--og-navy); } .og-find__steps li:nth-child(2) .og-find__stepic { background: #e7f8ee; color: #128c4a; } .og-find__steps li:nth-child(3) .og-find__stepic { background: #fdeaed; color: var(--og-red); } .og-find__stepcopy { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; } .og-find__stepnum { font: 700 11px/1 var(--og-font); letter-spacing: .12em; color: var(--og-ink-3); } .og-find__stepcopy strong { font: 800 15.5px/1.2 var(--og-font); color: var(--og-ink); } .og-find__steptext { display: none; font-size: 14px; line-height: 1.35; color: var(--og-ink-3); } .og-find__steparrow { display: none; margin-left: auto; font-weight: 700; color: var(--og-navy); transition: transform .15s; } .og-find__step:hover .og-find__steparrow { transform: translateX(3px); } /* Grid */ .og-find__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "contact" "map" "ta"; gap: 14px; } .og-find__contact { grid-area: contact; } .og-find__map { grid-area: map; } .og-find__ta { grid-area: ta; } .og-find__map { position: relative; overflow: hidden; min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--og-r); border: 1px solid var(--og-line); background: var(--og-wash); box-shadow: var(--og-shadow); } .og-find__map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } .og-find__mapchip { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--og-line); box-shadow: 0 6px 18px rgba(15, 28, 63, .16); font: 700 14px/1 var(--og-font); color: var(--og-navy) !important; text-decoration: none !important; } .og-find__mapchip:hover { border-color: var(--og-navy); } .og-find__card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(16px, 2.4vw, 24px); background: #fff; border: 1px solid var(--og-line); border-radius: var(--og-r); box-shadow: var(--og-shadow); } .og-find__id { display: flex; align-items: center; gap: 12px; min-width: 0; } .og-find__mark { width: 44px; height: 44px; flex: none; } .og-find__idcopy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .og-find__name { font: 800 clamp(17px, 2vw, 20px)/1.2 var(--og-font); letter-spacing: -.01em; color: var(--og-navy); } .og-find__addr { font-size: 14.5px; color: var(--og-ink-3); } .og-find__facts { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--og-line); display: grid; gap: 10px; } .og-find__facts li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--og-ink-2); } .og-find__facts a { font-weight: 700; color: var(--og-ink) !important; text-decoration: none !important; } .og-find__facts a:hover { color: var(--og-navy) !important; text-decoration: underline !important; } .og-find__factic { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--og-wash); color: var(--og-navy); margin-top: -4px; } .og-find__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .og-find__actions .og-btn { min-height: 48px; padding: 0 12px; font-size: 15px; } .og-find__actions .og-btn:first-child { grid-column: 1 / -1; } body.og-voyage .og-find__wa:hover { border-color: #128c4a; color: #128c4a; } body.og-voyage .og-find__tg:hover { border-color: #229ed9; color: #1b86b8; } .og-find__tahead { display: flex; align-items: center; gap: 10px; } .og-find__taic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e6f6ef; color: #00865c; flex: none; } .og-find__tahead strong { font: 800 17px/1.2 var(--og-font); color: var(--og-ink); } .og-find__widget { min-width: 0; padding: 12px; border-radius: 12px; background: var(--og-wash); border: 1px solid var(--og-line); overflow: hidden; } .og-find__widget .TA_selfserveprop, .og-find__widget .TA_links { margin: 0 !important; padding: 0 !important; list-style: none; } .og-find__widget .TA_links li { margin: 0; } .og-find__widget img { max-width: 100%; height: auto; } /* Tripadvisor draws fixed-width markup; let it fill the card. */ .og-find__widget #CDSWIDSSP, .og-find__widget .widSSP { width: 100% !important; max-width: 100% !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; box-sizing: border-box; } .og-find__widget .widSSPData { border: 0 !important; padding: 0 !important; background: transparent !important; } .og-find__widget #CDSWIDSSP * { max-width: 100%; box-sizing: border-box; word-wrap: break-word; } .og-find__widget .widSSPReviews li, .og-find__widget .widSSPH18 { font-family: var(--og-font) !important; } .og-find__taactions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .og-find__taactions .og-btn { min-height: 46px; padding: 0 10px; font-size: 14.5px; } /* ≥ 560px: steps become wider tiles with their short line */ @media (min-width: 560px) { .og-find__step { flex-direction: row; align-items: center; text-align: left; padding: 14px 16px; gap: 12px; } .og-find__stepcopy { align-items: flex-start; } .og-find__steptext { display: block; } .og-find__steps { gap: 12px; } } /* 560–719: three tiles would be cramped with text → one column of rows */ @media (min-width: 560px) and (max-width: 719px) { .og-find__steps { grid-template-columns: minmax(0, 1fr); } .og-find__steparrow { display: inline; } } /* Tablet: map full width, cards side by side */ @media (min-width: 720px) { .og-find__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "map map" "contact ta"; gap: 16px; } .og-find__map { aspect-ratio: 16 / 8; } } /* Desktop: map left, cards stacked right */ @media (min-width: 1024px) { .og-find__grid { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); grid-template-areas: "map contact" "map ta"; gap: 18px; } .og-find__map { aspect-ratio: auto; min-height: 460px; height: 100%; } .og-find__steparrow { display: inline; } } @media (min-width: 1280px) { .og-find__grid { grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr); } } /* Small phones */ @media (max-width: 379px) { .og-find__frame { padding: 16px 12px; border-radius: 18px; } .og-find__steps { gap: 6px; } .og-find__step { padding: 12px 4px; } .og-find__stepic { width: 38px; height: 38px; } .og-find__stepcopy strong { font-size: 14px; } .og-find__actions .og-btn, .og-find__taactions .og-btn { font-size: 14px; padding: 0 8px; gap: 6px; } } @media (hover: none) { .og-find__step:hover { transform: none; box-shadow: none; } } @media print { .og-find__map, .og-find__steps, .og-find__widget { display: none !important; } .og-find__frame { box-shadow: none; background: none; } } /* §15 ── v205200: "From the community" voices layer (#feed) ────────────────── * head · oga.asia join bar · Guides / Travellers / Locals · highlights. * Same frame language as #find-us (§14). Posting happens on oga.asia only. * ────────────────────────────────────────────────────────────────────────── */ .og-voices { position: relative; margin-block: clamp(40px, 6vw, 80px); scroll-margin-top: calc(var(--og-hh) + 16px); } .og-voices__anchor { position: absolute; top: 0; } .og-voices__frame { position: relative; overflow: hidden; isolation: isolate; padding: clamp(18px, 3.4vw, 40px); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); box-shadow: var(--og-shadow); background: linear-gradient(180deg, var(--og-tint) 0%, #f7f9fd 40%, #fff 100%); } .og-voices__frame::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--og-navy) 0 62%, var(--og-red) 62% 100%); } .og-voices__head { max-width: 760px; margin-bottom: clamp(18px, 2.6vw, 26px); } .og-voices__head .og-eyebrow { margin-bottom: 10px; } .og-voices__title { margin: 0; font: 900 clamp(26px, 4.6vw, 44px)/1.06 var(--og-font); letter-spacing: -.025em; color: var(--og-navy); text-wrap: balance; } .og-voices__lede { margin: 12px 0 0; max-width: 62ch; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: var(--og-ink-3); } .og-voices__platform { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: clamp(16px, 2.4vw, 22px); margin-bottom: clamp(14px, 2vw, 20px); background: var(--og-navy); color: #fff; border-radius: var(--og-r); box-shadow: var(--og-shadow); } .og-voices__badge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: #fff; } .og-voices__pcopy { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .og-voices__pcopy strong { font: 800 clamp(17px, 2vw, 20px)/1.2 var(--og-font); color: #fff; } .og-voices__pcopy span { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); } .og-voices__pactions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; } body.og-voyage .og-voices__pactions .og-btn--solid { background: #fff; border-color: #fff; color: var(--og-navy); } body.og-voyage .og-voices__pactions .og-btn--solid:hover { background: var(--og-tint); border-color: var(--og-tint); } body.og-voyage .og-voices__pactions .og-btn--line { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; } body.og-voyage .og-voices__pactions .og-btn--line:hover { border-color: #fff; background: rgba(255, 255, 255, .08); } .og-voices__pactions .og-btn { min-height: 48px; padding: 0 14px; } .og-voices__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .og-voice { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: clamp(16px, 2.2vw, 22px); background: #fff; border: 1px solid var(--og-line); border-radius: var(--og-r); box-shadow: var(--og-shadow); transition: border-color .15s, transform .15s; } .og-voice:hover { border-color: var(--og-navy); transform: translateY(-2px); } .og-voice__top { display: flex; align-items: center; gap: 10px; } .og-voice__ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--og-tint); color: var(--og-navy); flex: none; } .og-voices__grid > li:nth-child(2) .og-voice__ic { background: #fff4e5; color: #b45309; } .og-voices__grid > li:nth-child(3) .og-voice__ic { background: #fdeaed; color: var(--og-red); } .og-voice__who { font: 700 12.5px/1 var(--og-font); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-3); } .og-voice__title { margin: 0; font: 800 clamp(18px, 2vw, 21px)/1.2 var(--og-font); letter-spacing: -.01em; color: var(--og-ink); } .og-voice__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--og-ink-2); } .og-voice__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .og-voice__tags li { margin: 0; padding: 5px 10px; border-radius: 999px; background: var(--og-wash); font-size: 13px; font-weight: 600; color: var(--og-ink-2); } .og-voice__cta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--og-line); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 44px; font-weight: 800; color: var(--og-navy) !important; text-decoration: none !important; } .og-voice__host { font-weight: 600; color: var(--og-ink-3); white-space: nowrap; } .og-voice__cta > span[aria-hidden] { margin-left: auto; transition: transform .15s; } .og-voice:hover .og-voice__cta > span[aria-hidden] { transform: translateX(3px); } .og-voices__highlights { margin-top: clamp(16px, 2.4vw, 24px); padding-top: clamp(16px, 2.4vw, 22px); border-top: 1px solid var(--og-line); } .og-voices__hhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .og-voices__hhead h3 { margin: 0; font: 800 18px/1.2 var(--og-font); color: var(--og-ink); } .og-voices__hhead a { font-weight: 700; white-space: nowrap; color: var(--og-navy) !important; } .og-voices__empty { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px dashed var(--og-line-2); font-size: 15px; line-height: 1.5; color: var(--og-ink-3); } .og-voices__empty svg { flex: none; margin-top: 2px; color: var(--og-navy); } .og-voices__notes > * + * { margin-top: 12px; } @media (min-width: 640px) { .og-voices__platform { grid-template-columns: auto minmax(0, 1fr) auto; } .og-voices__pactions { grid-column: auto; display: flex; } .og-voices__pactions .og-btn { padding: 0 22px; } } @media (min-width: 560px) and (max-width: 959px) { .og-voice__text { max-width: 62ch; } .og-voice__cta { max-width: 420px; } } @media (min-width: 960px) { .og-voices__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (hover: none) { .og-voice:hover { transform: none; } } /* "Post on oga.asia" box (replaces posting forms) */ .og-postcta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 16px 0; padding: 16px; border: 1px solid var(--og-line); border-radius: var(--og-r); background: var(--og-tint); } .og-postcta__ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--og-navy); } .og-postcta__copy { display: flex; flex-direction: column; gap: 3px; } .og-postcta__copy strong { font: 800 16px/1.25 var(--og-font); color: var(--og-ink); } .og-postcta__copy span { font-size: 14px; line-height: 1.45; color: var(--og-ink-3); } .og-postcta .og-btn { grid-column: 1 / -1; min-height: 46px; } @media (min-width: 640px) { .og-postcta { grid-template-columns: auto minmax(0, 1fr) auto; } .og-postcta .og-btn { grid-column: auto; } } /* §16 ── v205200: Ask OGAICE — one clean skin (floating panel + inline + /ask-ogaice/) ── * Brand tokens re-pointed at the logo navy (the old "clean white" tokens made the * button and send icon black-on-black). Same frame stripe, radii and type as the site. * ────────────────────────────────────────────────────────────────────────── */ body.og-voyage .ogaice { --ogaice-brand: var(--og-navy); --ogaice-brand-ink: #fff; --ogaice-accent: var(--og-red); --ogaice-ink: var(--og-ink); --ogaice-muted: var(--og-ink-3); --ogaice-line: var(--og-line); --ogaice-soft: var(--og-wash); --ogaice-bg: #fff; --ogaice-r: 14px; --ogaice-r-lg: var(--og-r-lg); --ogaice-head: var(--og-font); --ogaice-wa: #128c4a; --ogaice-tg: #1b86b8; font-family: var(--og-font); } body.og-voyage .ogaice-assist { position: relative; overflow: hidden; gap: 16px; border-color: var(--og-line); box-shadow: var(--og-shadow); } body.og-voyage .ogaice-assist::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--og-navy) 0 62%, var(--og-red) 62% 100%); } body.og-voyage .ogaice-assist__mark { width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--og-line); } body.og-voyage .ogaice-assist__mark img { width: 34px; height: 34px; } body.og-voyage .ogaice-assist__title { font: 800 19px/1.15 var(--og-font); letter-spacing: -.01em; color: var(--og-navy); } body.og-voyage .ogaice-assist__status { font-size: 13px; line-height: 1.3; color: var(--og-ink-3); } body.og-voyage .ogaice-assist__intro { font-size: 15px; line-height: 1.55; color: var(--og-ink-2); } /* Topic tiles: compact, icon over label */ body.og-voyage .ogaice-assist__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body.og-voyage .ogaice-tile { flex-direction: column; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 6px; text-align: center; background: #fff; border: 1px solid var(--og-line); border-radius: 14px; } body.og-voyage .ogaice-tile:hover { border-color: var(--og-navy); background: #fff; box-shadow: var(--og-shadow); } body.og-voyage .ogaice-tile__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--og-tint); color: var(--og-navy); box-shadow: none; } body.og-voyage .ogaice-tile__txt { align-items: center; } body.og-voyage .ogaice-tile__txt strong { font: 700 14px/1.2 var(--og-font); color: var(--og-ink); } body.og-voyage .ogaice-tile__txt small { display: none; } @media (min-width: 720px) { body.og-voyage .ogaice-tile__txt small { display: block; font-size: 12.5px; margin-top: 2px; } } body.og-voyage .ogaice-float__panel .ogaice-tile__txt small { display: none; } /* Suggested questions: one swipeable row */ body.og-voyage .ogaice-assist__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; scroll-snap-type: x proximity; } body.og-voyage .ogaice-assist__chips::-webkit-scrollbar { display: none; } body.og-voyage .ogaice-chip { flex: none; scroll-snap-align: start; min-height: 38px; padding: 0 14px; border-color: var(--og-line); background: var(--og-wash); color: var(--og-navy); font: 600 14px/1 var(--og-font); white-space: nowrap; } body.og-voyage .ogaice-chip:hover { background: var(--og-tint); border-color: var(--og-navy); } /* Ask box: one ring only, visible send arrow */ body.og-voyage .ogaice-assist__form { padding: 5px 5px 5px 18px; border: 1.5px solid var(--og-line-2); background: #fff; } body.og-voyage .ogaice-assist__form:focus-within { border-color: var(--og-navy); box-shadow: 0 0 0 4px rgba(28, 63, 143, .14); } body.og-voyage .ogaice-assist__form input, body.og-voyage .ogaice-assist__form input:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 0 !important; height: auto !important; padding: 10px 0 !important; margin: 0 !important; border-radius: 0 !important; font: 500 16px/1.3 var(--og-font) !important; color: var(--og-ink) !important; } body.og-voyage .ogaice-assist__send { width: 44px; height: 44px; background: var(--og-navy); color: #fff; transition: background-color .15s; } body.og-voyage .ogaice-assist__send:hover { background: var(--og-navy-2); } body.og-voyage .ogaice-assist__send svg { stroke: #fff; color: #fff; } body.og-voyage .ogaice-assist__send svg path { stroke: #fff; } /* Messages */ body.og-voyage .ogaice-msg--me { background: var(--og-navy); color: #fff; } body.og-voyage .ogaice-msg--bot { background: var(--og-wash); color: var(--og-ink); } body.og-voyage .ogaice-msg__src a { color: var(--og-navy); font-weight: 600; } /* Human hand-off */ body.og-voyage .ogaice-assist__guide { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--og-line); } body.og-voyage .ogaice-assist__guide p { font-size: 14px; line-height: 1.45; color: var(--og-ink-3); } body.og-voyage .ogaice-assist__links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } body.og-voyage .ogaice-assist__links .ogaice-btn { justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; font: 700 14.5px/1 var(--og-font); } body.og-voyage .ogaice-btn--wa, body.og-voyage .ogaice-btn--wa:visited { background: var(--ogaice-wa); color: #fff !important; } body.og-voyage .ogaice-btn--tg, body.og-voyage .ogaice-btn--tg:visited { background: var(--ogaice-tg); color: #fff !important; } /* Floating launcher */ body.og-voyage .ogaice-float { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); } body.og-voyage .ogaice-fab { position: relative; gap: 10px; min-height: 52px; padding: 6px 18px 6px 6px; background: var(--og-navy); color: #fff; font: 700 15px/1 var(--og-font); box-shadow: 0 12px 30px -8px rgba(15, 28, 63, .5); transition: background-color .15s, transform .15s; } body.og-voyage .ogaice-fab:hover { background: var(--og-navy-2); transform: translateY(-1px); } body.og-voyage .ogaice-fab__mark { width: 40px; height: 40px; background: #fff; } body.og-voyage .ogaice-fab__txt { color: #fff; } /* Floating panel */ body.og-voyage .ogaice-float__panel { width: min(400px, calc(100vw - 32px)); max-height: min(700px, calc(100dvh - 32px)); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); box-shadow: var(--og-shadow-lg); } body.og-voyage .ogaice-float__panel .ogaice-assist { padding: 20px 18px 18px; box-shadow: none; } body.og-voyage .ogaice-float__panel .ogaice-assist__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.og-voyage .ogaice-float__panel .ogaice-tile { min-height: 84px; } body.og-voyage .ogaice-float__bar { top: 18px; right: 14px; } body.og-voyage .ogaice-float__icon, body.og-voyage .ogaice-assist__clear { width: 34px; height: 34px; border-radius: 50%; border-color: var(--og-line); color: var(--og-ink-3); } body.og-voyage .ogaice-float__icon:hover, body.og-voyage .ogaice-assist__clear:hover { color: var(--og-navy); border-color: var(--og-navy); } body.og-voyage .ogaice-float__panel .ogaice-assist__clear { top: 18px; right: 94px; } body.og-voyage .ogaice-float__panel .ogaice-assist__status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 520px) { body.og-voyage .ogaice-fab { width: 56px; height: 56px; min-height: 0; padding: 0; justify-content: center; } body.og-voyage .ogaice-fab .ogaice-dot { position: absolute; top: 4px; right: 4px; margin: 0; } body.og-voyage .ogaice-fab__mark { width: 46px; height: 46px; } body.og-voyage .ogaice-float__panel { width: 100%; max-height: 88dvh; border-radius: 24px 24px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); } body.og-voyage .ogaice-float__panel .ogaice-assist__status { white-space: normal; } } @media (max-width: 359px) { body.og-voyage .ogaice-tile__txt strong { font-size: 13px; } body.og-voyage .ogaice-assist__links { grid-template-columns: 1fr; } } body.og-voyage .ogaice .ogaice-dot { flex: none; } body.og-voyage .ogaice-assist__links .ogaice-btn, body.og-voyage .ogaice-assist__links .ogaice-btn:hover { text-decoration: none !important; } @media (min-width: 960px) and (max-width: 1199px) { .og-voice__host { display: none; } } /* §17 ── v205300: home "Cambodia Travel Community" band (.og-hcom) ──────────── */ .og-hcom__frame { position: relative; overflow: hidden; isolation: isolate; padding: clamp(18px, 3.4vw, 40px); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); box-shadow: var(--og-shadow); background: linear-gradient(180deg, var(--og-tint) 0%, #f7f9fd 45%, #fff 100%); } .og-hcom__frame::before, .og-mkt__frame::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--og-navy) 0 62%, var(--og-red) 62% 100%); } .og-hcom__head { margin-bottom: 18px; } .og-hcom__head .og-eyebrow { margin-bottom: 10px; } .og-hcom__title, .og-mkt__title { margin: 0; font: 900 clamp(26px, 4.6vw, 44px)/1.06 var(--og-font); letter-spacing: -.025em; color: var(--og-navy); text-wrap: balance; } .og-hcom__lede, .og-mkt__lede { margin: 12px 0 0; max-width: 62ch; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: var(--og-ink-3); } .og-hcom__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: clamp(16px, 2.4vw, 24px); } .og-hcom__actions .og-btn { min-height: 48px; padding: 0 14px; } .og-hcom__actions .og-btn:first-child { grid-column: 1 / -1; } .og-hcom__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .og-hcom__cards li { margin: 0; } .og-hcom__card { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px; background: #fff; border: 1px solid var(--og-line); border-radius: var(--og-r); box-shadow: var(--og-shadow); color: var(--og-ink) !important; text-decoration: none !important; transition: border-color .15s, transform .15s; } .og-hcom__card:hover { border-color: var(--og-navy); transform: translateY(-2px); } .og-hcom__ic { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--og-tint); color: var(--og-navy); } .og-hcom__cards li:nth-child(2) .og-hcom__ic { background: #fff4e5; color: #b45309; } .og-hcom__cards li:nth-child(3) .og-hcom__ic { background: #fdeaed; color: var(--og-red); } .og-hcom__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .og-hcom__copy strong { font: 800 17px/1.2 var(--og-font); } .og-hcom__copy span { font-size: 14.5px; line-height: 1.45; color: var(--og-ink-3); } .og-hcom__go { margin-left: auto; font-weight: 800; color: var(--og-navy); transition: transform .15s; } .og-hcom__card:hover .og-hcom__go { transform: translateX(3px); } @media (min-width: 640px) { .og-hcom__actions { display: flex; flex-wrap: wrap; } .og-hcom__actions .og-btn { padding: 0 22px; } } @media (min-width: 960px) { .og-hcom__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .og-hcom__card { flex-direction: column; align-items: flex-start; padding: 20px; } .og-hcom__go { margin-left: 0; margin-top: auto; } } @media (hover: none) { .og-hcom__card:hover { transform: none; } } /* §18 ── v205300: Full Marketing Solution frame (.og-mkt) ──────────────────── * head · channel chips · L1–L5 layers (open/close) · navy close panel. * ────────────────────────────────────────────────────────────────────────── */ .og-mkt { margin-block: clamp(40px, 6vw, 80px); scroll-margin-top: calc(var(--og-hh) + 16px); } .og-mkt__frame { position: relative; overflow: hidden; isolation: isolate; padding: clamp(18px, 3.4vw, 40px); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); box-shadow: var(--og-shadow); background: linear-gradient(180deg, var(--og-tint) 0%, #f7f9fd 30%, #fff 100%); } .og-mkt__head { margin-bottom: clamp(18px, 2.6vw, 26px); } .og-mkt__head .og-eyebrow { margin-bottom: 10px; } .og-mkt__slogan { display: flex; flex-wrap: wrap; gap: 0 .35em; margin: 14px 0 0; font: 800 clamp(19px, 2.6vw, 26px)/1.25 var(--og-font); letter-spacing: -.015em; } .og-mkt__slogan span:nth-child(1) { color: var(--og-navy); } .og-mkt__slogan span:nth-child(2) { color: var(--og-red); } .og-mkt__slogan span:nth-child(3) { color: var(--og-ink); } .og-mkt__channels { margin-bottom: clamp(18px, 2.6vw, 26px); } .og-mkt__label { margin: 0 0 10px; font: 700 12.5px/1 var(--og-font); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-3); } .og-mkt__channels ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .og-mkt__channels li { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; border: 1px solid var(--og-line); font: 600 14.5px/1 var(--og-font); color: var(--og-ink-2); } .og-mkt__chic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--og-tint); color: var(--og-navy); } .og-mkt__layers { display: grid; gap: 10px; } .og-mkt__layer { background: #fff; border: 1px solid var(--og-line); border-radius: var(--og-r); box-shadow: var(--og-shadow); overflow: hidden; } .og-mkt__layer[open] { border-color: color-mix(in srgb, var(--og-navy) 35%, var(--og-line)); } .og-mkt__sum { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; cursor: pointer; list-style: none; } .og-mkt__sum::-webkit-details-marker { display: none; } .og-mkt__sum:hover { background: var(--og-wash); } .og-mkt__num { flex: none; min-width: 34px; padding: 5px 0; border-radius: 8px; background: var(--og-navy); color: #fff; font: 800 12px/1 var(--og-font); letter-spacing: .04em; text-align: center; } .og-mkt__gic { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--og-tint); color: var(--og-navy); } .og-mkt__gname { flex: 1; min-width: 0; font: 800 clamp(16px, 1.8vw, 19px)/1.2 var(--og-font); color: var(--og-ink); } .og-mkt__count { flex: none; font-size: 13.5px; font-weight: 600; color: var(--og-ink-3); } .og-mkt__chev { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--og-line); color: var(--og-navy); transition: transform .18s; } .og-mkt__layer[open] .og-mkt__chev { transform: rotate(180deg); background: var(--og-tint); } .og-mkt__grid { list-style: none; margin: 0; padding: 4px 16px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border-top: 1px solid var(--og-line); padding-top: 16px; } .og-mkt__card { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px; border-radius: 12px; background: var(--og-wash); border: 1px solid transparent; transition: border-color .15s, background-color .15s; } .og-mkt__card:hover { background: #fff; border-color: var(--og-line-2); } .og-mkt__cic { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--og-navy); box-shadow: inset 0 0 0 1px var(--og-line); } .og-mkt__ccopy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .og-mkt__ccopy strong { font: 700 15.5px/1.25 var(--og-font); color: var(--og-ink); } .og-mkt__ccopy span { font-size: 14px; line-height: 1.45; color: var(--og-ink-3); } .og-mkt__close { display: grid; gap: 16px; margin-top: clamp(16px, 2.4vw, 24px); padding: clamp(18px, 2.8vw, 28px); border-radius: var(--og-r); background: var(--og-navy); color: #fff; box-shadow: var(--og-shadow-lg); } .og-mkt__closecopy { display: flex; gap: 14px; align-items: flex-start; } .og-mkt__closeic { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: #fff; } .og-mkt__closecopy h3 { margin: 0 0 6px; font: 800 clamp(18px, 2.2vw, 22px)/1.2 var(--og-font); color: #fff; } .og-mkt__closecopy p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .82); } .og-mkt__offer { display: grid; gap: 10px; } .og-mkt__price { display: flex; align-items: baseline; gap: 8px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 14.5px; } .og-mkt__price strong { font: 900 34px/1 var(--og-font); letter-spacing: -.02em; color: #fff; } .og-mkt__btn { width: 100%; min-height: 52px; white-space: normal; text-align: center; } @media (min-width: 560px) { .og-mkt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 419px) { .og-mkt__count { display: none; } .og-mkt__gic { display: none; } } @media (min-width: 960px) { .og-mkt__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 20px 20px; gap: 10px; } .og-mkt__sum { padding: 12px 20px; } .og-mkt__close { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; } .og-mkt__offer { justify-items: start; } .og-mkt__btn { width: auto; padding: 0 26px; white-space: nowrap; } } @media (min-width: 1280px) { .og-mkt__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .og-mkt__card { flex-direction: column; } } @media print { .og-mkt__layer { break-inside: avoid; } .og-mkt__layer:not([open]) .og-mkt__grid { display: grid; } } /* §19 ── v205300: one-row hooks (assets/js/oga-site.js sets .is-fit ≥ 768px) ─── */ .og-oneline.is-fit { white-space: nowrap; text-wrap: nowrap; max-width: none !important; width: auto; overflow: visible; } /* v205300 specificity guards: older ogx/main heading rules lose to these */ body.og-voyage .og-hcom__title, body.og-voyage .og-mkt__title, body.og-voyage .og-voices__title, body.og-voyage .og-find__title { font-family: var(--og-font); font-weight: 900; letter-spacing: -.025em; color: var(--og-navy); line-height: 1.06; } body.og-voyage .og-mkt__closecopy h3 { color: #fff; font-family: var(--og-font); font-weight: 800; } body.og-voyage .og-mkt__gname, body.og-voyage .og-mkt__ccopy strong, body.og-voyage .og-hcom__copy strong { font-family: var(--og-font); } .og-hcom__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .og-hcom__actions .og-btn { white-space: normal; text-align: center; line-height: 1.15; } @media (max-width: 419px) { .og-hcom__actions { grid-template-columns: minmax(0, 1fr); } } /* §20 ── v205400: landing home (.og-landing) — promotes onlineguideassociation.com ─── */ .og-eyebrow--light { color: #fff; } .og-eyebrow--light::before { background: #ff8f9d; } /* Hero */ .og-lhero { position: relative; overflow: hidden; padding-block: clamp(36px, 7vw, 96px) clamp(32px, 5vw, 64px); background: radial-gradient(1100px 520px at 85% -10%, var(--og-tint), transparent 60%), linear-gradient(180deg, #f6f8fc 0%, #fff 100%); border-bottom: 1px solid var(--og-line); } .og-lhero__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; } .og-lhero__copy .og-eyebrow { margin-bottom: 14px; } body.og-voyage .og-lhero__title { margin: 0; font: 900 clamp(34px, 6.2vw, 64px)/1.02 var(--og-font); letter-spacing: -.035em; color: var(--og-navy); text-wrap: balance; max-width: 16ch; } .og-lhero__lede { margin: 18px 0 0; max-width: 56ch; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--og-ink-2); } .og-lhero__ctas { display: grid; gap: 10px; margin-top: 26px; } .og-lhero__ctas .og-btn { min-height: 54px; padding: 0 22px; font-size: 16px; } .og-lhero__main span { overflow: hidden; text-overflow: ellipsis; } .og-lhero__ticks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .og-lhero__ticks li { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--og-ink-2); } .og-lhero__ticks svg { color: #128c4a; } /* Browser preview of the platform */ .og-browser { border-radius: 20px; background: #fff; border: 1px solid var(--og-line); box-shadow: var(--og-shadow-lg); overflow: hidden; } .og-browser__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--og-wash); border-bottom: 1px solid var(--og-line); } .og-browser__dots { display: inline-flex; gap: 6px; } .og-browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #e5534b; } .og-browser__dots i:nth-child(2) { background: #f0b429; } .og-browser__dots i:nth-child(3) { background: #36b37e; } .og-browser__url { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--og-line); font: 600 13px/1 var(--og-font); color: var(--og-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .og-browser__url svg { color: #128c4a; flex: none; } .og-browser__body { padding: clamp(18px, 3vw, 28px); } .og-browser__kicker { margin: 0 0 6px; font: 700 12px/1 var(--og-font); letter-spacing: .1em; text-transform: uppercase; color: var(--og-red); } .og-browser__title { margin: 0 0 14px; font: 900 clamp(22px, 3vw, 30px)/1.1 var(--og-font); letter-spacing: -.02em; color: var(--og-ink); } .og-browser__ask { display: flex; gap: 6px; align-items: center; padding: 5px 5px 5px 16px; border: 1.5px solid var(--og-line-2); border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(15, 28, 63, .06); } .og-browser__ask:focus-within { border-color: var(--og-navy); box-shadow: 0 0 0 4px rgba(28, 63, 143, .14); } .og-browser__ask input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; padding: 10px 0 !important; margin: 0 !important; min-height: 0 !important; font: 500 15.5px/1.3 var(--og-font) !important; color: var(--og-ink) !important; } .og-browser__ask .og-btn { min-height: 44px; padding: 0 18px; flex: none; } .og-browser__label { margin: 18px 0 8px; font: 700 12px/1 var(--og-font); letter-spacing: .1em; text-transform: uppercase; color: var(--og-ink-3); } .og-browser__qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .og-browser__qs li { margin: 0; } .og-browser__qs a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--og-wash); font-size: 14.5px; font-weight: 600; color: var(--og-navy) !important; text-decoration: none !important; transition: background-color .15s; } .og-browser__qs a::after { content: "↗"; font-weight: 700; } .og-browser__qs a:hover { background: var(--og-tint); } .og-browser__foot { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--og-line); font-size: 13.5px; color: var(--og-ink-3); } .og-browser__foot svg { color: #128c4a; flex: none; } @media (min-width: 560px) { .og-lhero__ctas { display: flex; flex-wrap: wrap; } } @media (min-width: 1024px) { .og-lhero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(400px, .9fr); } .og-lhero__preview { transform: rotate(-.6deg); } } /* Facts */ .og-lfacts { margin-top: clamp(24px, 4vw, 40px); } .og-lfacts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .og-lfacts__list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 16px; border-radius: var(--og-r); background: #fff; border: 1px solid var(--og-line); } .og-lfacts__ic { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--og-tint); color: var(--og-navy); } .og-lfacts__list strong { display: block; font: 800 15.5px/1.25 var(--og-font); color: var(--og-ink); } .og-lfacts__list li > span:last-child > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--og-ink-3); } @media (min-width: 560px) { .og-lfacts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .og-lfacts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Platform: five steps */ .og-lplat { margin-block: clamp(40px, 6vw, 80px); } .og-lplat__frame { position: relative; overflow: hidden; isolation: isolate; padding: clamp(18px, 3.4vw, 40px); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); box-shadow: var(--og-shadow); background: linear-gradient(180deg, var(--og-tint) 0%, #f7f9fd 45%, #fff 100%); } .og-lplat__frame::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--og-navy) 0 62%, var(--og-red) 62% 100%); } .og-lplat__head { display: grid; gap: 16px; margin-bottom: clamp(18px, 2.6vw, 26px); } .og-lplat__head .og-eyebrow { margin-bottom: 10px; } body.og-voyage .og-lplat__title { margin: 0; font: 900 clamp(26px, 4.6vw, 44px)/1.06 var(--og-font); letter-spacing: -.025em; color: var(--og-navy); } .og-lplat__lede { margin: 10px 0 0; max-width: 60ch; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: var(--og-ink-3); } .og-lplat__all { justify-self: start; min-height: 46px; } .og-lplat__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; } .og-lplat__steps li { margin: 0; } .og-lstep { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px; background: #fff; border: 1px solid var(--og-line); border-radius: var(--og-r); box-shadow: var(--og-shadow); color: var(--og-ink) !important; text-decoration: none !important; transition: border-color .15s, transform .15s; } .og-lstep:hover { border-color: var(--og-navy); transform: translateY(-2px); } .og-lstep__top { display: flex; align-items: center; gap: 10px; } .og-lstep__ic { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--og-tint); color: var(--og-navy); } .og-lplat__steps li:nth-child(2) .og-lstep__ic { background: #fff4e5; color: #b45309; } .og-lplat__steps li:nth-child(3) .og-lstep__ic { background: #eef0ff; color: #4f46e5; } .og-lplat__steps li:nth-child(4) .og-lstep__ic { background: #fdeaed; color: var(--og-red); } .og-lplat__steps li:nth-child(5) .og-lstep__ic { background: #e7f8ee; color: #128c4a; } .og-lstep__n { font: 700 12px/1.2 var(--og-font); letter-spacing: .06em; text-transform: uppercase; color: var(--og-ink-3); } .og-lstep__title { font: 800 18px/1.2 var(--og-font); color: var(--og-ink); } .og-lstep__text { font-size: 14.5px; line-height: 1.5; color: var(--og-ink-3); } .og-lstep__cta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--og-line); font-weight: 800; color: var(--og-navy); } @media (min-width: 560px) { .og-lplat__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .og-lplat__steps li:last-child { grid-column: 1 / -1; } } @media (min-width: 720px) { .og-lplat__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } } @media (min-width: 900px) and (max-width: 1279px) { .og-lplat__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); } .og-lplat__steps li { grid-column: span 2; } .og-lplat__steps li:nth-child(4), .og-lplat__steps li:last-child { grid-column: span 3; } } @media (min-width: 1280px) { .og-lplat__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .og-lplat__steps li:last-child { grid-column: auto; } } .og-lstep__n { white-space: nowrap; } .og-lstep__cta { white-space: nowrap; } @media (hover: none) { .og-lstep:hover { transform: none; } } /* Businesses band */ .og-lbiz { display: grid; gap: 22px; margin-block: clamp(40px, 6vw, 80px); padding: clamp(22px, 4vw, 44px); border-radius: var(--og-r-lg); background: linear-gradient(135deg, var(--og-navy) 0%, var(--og-navy-deep) 100%); color: #fff; box-shadow: var(--og-shadow-lg); } body.og-voyage .og-lbiz__title { margin: 8px 0 0; font: 900 clamp(26px, 4.4vw, 42px)/1.08 var(--og-font); letter-spacing: -.025em; color: #fff; } .og-lbiz__lede { margin: 12px 0 0; max-width: 58ch; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, .84); } .og-lbiz__chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .og-lbiz__chips li { display: inline-flex; align-items: center; gap: 7px; margin: 0; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 14px; font-weight: 600; color: #fff; } .og-lbiz__offer { display: grid; gap: 10px; align-content: center; } .og-lbiz__price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; color: rgba(255, 255, 255, .82); } .og-lbiz__price strong { font: 900 40px/1 var(--og-font); color: #fff; letter-spacing: -.02em; } .og-lbiz__offer .og-btn { min-height: 52px; width: 100%; } @media (min-width: 960px) { .og-lbiz { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 40px; } } /* Closing band */ .og-lclose { margin-top: clamp(40px, 6vw, 80px); padding-block: clamp(48px, 8vw, 96px); background: radial-gradient(900px 400px at 15% 0%, rgba(255, 255, 255, .1), transparent 60%), var(--og-navy); color: #fff; text-align: center; } .og-lclose__inner { display: flex; flex-direction: column; align-items: center; } body.og-voyage .og-lclose__title { margin: 6px 0 0; font: 900 clamp(26px, 5vw, 50px)/1.06 var(--og-font); letter-spacing: -.03em; color: #fff; overflow-wrap: anywhere; } .og-lclose__lede { margin: 14px 0 0; max-width: 54ch; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .84); } .og-lclose__ctas { display: grid; gap: 10px; width: 100%; max-width: 420px; margin-top: 26px; } .og-lclose__ctas .og-btn { min-height: 52px; } @media (min-width: 640px) { .og-lclose__ctas { display: flex; flex-wrap: wrap; justify-content: center; max-width: none; width: auto; } .og-lclose__ctas .og-btn { padding: 0 24px; } } body.og-voyage .og-lclose + .og-footer { margin-top: 0; } /* §21 ── v205500: "About Leng Ratha" founder frame (.og-founder) ─────────────── */ .og-founder { margin-block: clamp(40px, 6vw, 80px); scroll-margin-top: calc(var(--og-hh) + 16px); } .og-founder__frame { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(18px, 3.4vw, 40px); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); box-shadow: var(--og-shadow); background: linear-gradient(180deg, var(--og-tint) 0%, #f7f9fd 45%, #fff 100%); } .og-founder__frame::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--og-navy) 0 62%, var(--og-red) 62% 100%); } .og-founder__media { position: relative; margin: 0; align-self: start; border-radius: var(--og-r); overflow: hidden; background: var(--og-wash); box-shadow: var(--og-shadow-lg); aspect-ratio: 4 / 4.2; max-width: 440px; width: 100%; justify-self: center; } .og-founder__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .og-founder__badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--og-navy); font: 700 14px/1 var(--og-font); box-shadow: 0 8px 22px rgba(15, 28, 63, .2); } .og-founder__badge svg { color: #128c4a; flex: none; } .og-founder__body { min-width: 0; } .og-founder__body .og-eyebrow { margin-bottom: 12px; } .og-founder__role { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--og-line); font: 700 13.5px/1.2 var(--og-font); color: var(--og-ink-2); } .og-founder__role svg { color: var(--og-navy); flex: none; } body.og-voyage .og-founder__name { margin: 0; font: 900 clamp(32px, 5vw, 52px)/1.02 var(--og-font); letter-spacing: -.03em; color: var(--og-navy); } .og-founder__bio { margin: 14px 0 0; max-width: 62ch; font-size: clamp(15.5px, 1.7vw, 17.5px); line-height: 1.6; color: var(--og-ink-2); } .og-founder__facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .og-founder__facts li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 12px; border-radius: var(--og-r); background: #fff; border: 1px solid var(--og-line); box-shadow: var(--og-shadow); } .og-founder__facts strong { font: 900 clamp(24px, 3.4vw, 34px)/1 var(--og-font); letter-spacing: -.02em; color: var(--og-navy); } .og-founder__facts li:nth-child(2) strong { color: var(--og-red); } .og-founder__facts span { font-size: 13px; line-height: 1.35; color: var(--og-ink-3); } .og-founder__lanes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .og-founder__lanes li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--og-line); } .og-founder__lic { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--og-tint); color: var(--og-navy); } .og-founder__lanes li:nth-child(2) .og-founder__lic { background: #fff4e5; color: #b45309; } .og-founder__lanes li:nth-child(3) .og-founder__lic { background: #e7f8ee; color: #128c4a; } .og-founder__lanes li:nth-child(4) .og-founder__lic { background: #fdeaed; color: var(--og-red); } .og-founder__lcopy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .og-founder__lcopy strong { font: 800 15.5px/1.25 var(--og-font); color: var(--og-ink); } .og-founder__lcopy span { font-size: 14px; line-height: 1.45; color: var(--og-ink-3); } .og-founder__ctas { display: grid; gap: 8px; margin-top: 20px; } .og-founder__ctas .og-btn { min-height: 50px; padding: 0 20px; } @media (min-width: 560px) { .og-founder__lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .og-founder__ctas { display: flex; flex-wrap: wrap; } } @media (min-width: 960px) { .og-founder__frame { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); align-items: start; } .og-founder__media { position: sticky; top: calc(var(--og-hh) + 24px); max-width: none; aspect-ratio: 4 / 5; } } @media (max-width: 379px) { .og-founder__facts { grid-template-columns: minmax(0, 1fr); } .og-founder__facts li { flex-direction: row; align-items: baseline; gap: 10px; } } body.og-voyage .og-founder__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; } /* §22 ── v205600: CTA bands with a one-row hook ────────────────────────────── * Footer "Plan your visit…" (.og-plan) and the page CTA band (.ogn-biz): * ≥ 768px row 1: [eyebrow] + heading across the full width (one line, fitted) * row 2: lede (left) │ buttons (right) * phones everything stacked, buttons full width. * ────────────────────────────────────────────────────────────────────────── */ .og-oneline.is-fit { min-width: 0; max-width: 100% !important; } /* Footer plan strip */ .og-plan__in { grid-template-columns: minmax(0, 1fr); gap: 14px; } .og-plan__copy { display: contents; } .og-plan__copy h2 { margin: 0; } .og-plan__copy p, .og-plan__copy .ogx-rota { margin: 0; } .og-plan__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 6px; } .og-plan__actions .og-btn { min-height: 50px; padding: 0 14px; } .og-plan__actions .og-btn:first-child { grid-column: 1 / -1; } @media (min-width: 768px) { .og-plan__in { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 56px); row-gap: 10px; align-items: center; } .og-plan__copy h2 { grid-column: 1 / -1; } .og-plan__copy p, .og-plan__copy .ogx-rota { grid-column: 1; } .og-plan__actions { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-wrap: nowrap; margin: 0; align-self: center; } .og-plan__actions .og-btn { flex: 0 0 auto; padding: 0 20px; } } @media (min-width: 768px) and (max-width: 1023px) { .og-plan__actions { flex-direction: column; } .og-plan__actions .og-btn { width: 100%; } } /* Page CTA band */ html body.ogx.og-voyage section.ogn-biz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; padding: clamp(20px, 3.6vw, 40px) !important; border: 1px solid var(--og-line); border-radius: var(--og-r-lg) !important; background: linear-gradient(180deg, var(--og-tint) 0%, #fff 100%) !important; box-shadow: var(--og-shadow); position: relative; overflow: hidden; } html body.ogx.og-voyage section.ogn-biz::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--og-navy) 0 62%, var(--og-red) 62% 100%); } html body.ogx.og-voyage section.ogn-biz .ogn-biz__copy { display: contents; } html body.ogx.og-voyage section.ogn-biz .ogn-biz__copy h2 { margin: 0 !important; font: 900 clamp(24px, 3.6vw, 38px)/1.1 var(--og-font) !important; letter-spacing: -.025em !important; color: var(--og-navy) !important; } html body.ogx.og-voyage section.ogn-biz .ogn-biz__copy p { margin: 0 !important; max-width: 62ch; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: var(--og-ink-3) !important; } html body.ogx.og-voyage section.ogn-biz .ogn-eyebrow-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1.3 var(--og-font); letter-spacing: .1em; text-transform: uppercase; color: var(--og-navy) !important; } html body.ogx.og-voyage section.ogn-biz .ogn-biz__ctas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 6px; } html body.ogx.og-voyage section.ogn-biz .ogn-biz__ctas .ogn-btn { justify-content: center; min-height: 50px; white-space: nowrap; } @media (min-width: 768px) { html body.ogx.og-voyage section.ogn-biz { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 56px); row-gap: 10px; } html body.ogx.og-voyage section.ogn-biz .ogn-eyebrow-brand, html body.ogx.og-voyage section.ogn-biz .ogn-biz__copy h2 { grid-column: 1 / -1; } html body.ogx.og-voyage section.ogn-biz .ogn-biz__copy p { grid-column: 1; } html body.ogx.og-voyage section.ogn-biz .ogn-biz__ctas { grid-column: 2; grid-row: 3; display: flex; margin: 0; } html body.ogx.og-voyage section.ogn-biz .ogn-biz__ctas .ogn-btn { flex: 0 0 auto; padding: 0 22px; } } @media (max-width: 379px) { .og-plan__actions, html body.ogx.og-voyage section.ogn-biz .ogn-biz__ctas { grid-template-columns: minmax(0, 1fr); } } /* v205600: beat the older atlas.css colour reset (it carries several :not() selectors) */ html body.ogx.og-voyage section.ogn-biz .ogn-biz__copy h2:not(#og-x) { color: var(--og-navy) !important; } html body.ogx.og-voyage section.ogn-biz .ogn-eyebrow-brand:not(#og-x) { color: var(--og-navy) !important; } html body.ogx.og-voyage section.ogn-biz .ogn-biz__copy p:not(#og-x) { color: var(--og-ink-3) !important; } /* §23 ── v205700: FAQ list on info pages (.og-faqlist) ──────────────────────── */ .og-faqlist { display: grid; gap: 8px; margin-top: 8px; } .og-faqlist__item { border: 1px solid var(--og-line); border-radius: 14px; background: #fff; overflow: hidden; } .og-faqlist__item[open] { border-color: color-mix(in srgb, var(--og-navy) 35%, var(--og-line)); box-shadow: var(--og-shadow); } .og-faqlist__item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 16px; cursor: pointer; list-style: none; font: 700 16px/1.35 var(--og-font); color: var(--og-ink); } .og-faqlist__item summary::-webkit-details-marker { display: none; } .og-faqlist__item summary:hover { background: var(--og-wash); } .og-faqlist__ic { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--og-tint); color: var(--og-navy); transition: transform .18s; } .og-faqlist__item[open] .og-faqlist__ic { transform: rotate(45deg); } .og-faqlist__item p { margin: 0 !important; padding: 0 16px 16px; font-size: 15.5px; line-height: 1.6; color: var(--og-ink-2); }