@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:block;src:url('/fg-nunito-bold.woff2') format('woff2')} /* No separate @font-face for weight 800 — the Google Fonts URL was for the wrong subset (cyrillic) so weight 800 was falling back to sans-serif. Using the preloaded weight 700 instead — bold enough for the FG name. */ #fg-instant{position:fixed;inset:0;z-index:2147483646;background:#fff;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;font-family:Nunito,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;opacity:1;transition:opacity .9s ease} #fg-instant.fg-hide{opacity:0;pointer-events:none} /* === Branded first-screen === The real photo+name+bio are laid out from the very first frame; an absolutely-positioned FreeGuides cover sits over the photo+name row and crossfades out after the ~2s brand hold (see public/fg-instant.js). Because the cover is absolute, lifting it causes NO layout shift. Whitelabel guides render with .fg-revealed from the start, so the cover never appears. The old green Lottie spinner was removed entirely. */ #fg-instant .fg-screen-side{position:relative} /* Cross-dissolve: the FreeGuides cover fades OUT while the real photo+name fade IN over the same eased ~0.85s, so the swap reads as a soft dissolve, not a snap. The cover is absolute (over the namerow) so this causes no layout shift. */ #fg-instant .fg-brand-cover{position:absolute;top:0;left:0;right:0;height:80px;display:flex;align-items:center;gap:15px;background:#fff;z-index:3;transition:opacity .85s cubic-bezier(.4,0,.2,1)} #fg-instant .fg-brand-cover .fg-bc-logo{width:80px;height:80px;object-fit:contain;display:block} /* Match the hotel name EXACTLY (same brand font via inherit, weight 600, size) so "FreeGuides" and e.g. "Novotel Canberra" render at the same visual size. (Both were 16px, but Nunito-700 reads larger than the property's font-600.) */ #fg-instant .fg-brand-cover .fg-bc-name{font-family:inherit;font-weight:600;font-size:16px;line-height:normal;color:rgb(14,14,14)} @media(min-width:769px){#fg-instant .fg-brand-cover .fg-bc-name{font-size:18px}} #fg-instant.fg-revealed .fg-brand-cover{opacity:0;pointer-events:none} /* Real photo+name start hidden under the cover and fade in on reveal. */ #fg-instant .fg-screen-namerow{opacity:0;transition:opacity .85s cubic-bezier(.4,0,.2,1)} #fg-instant.fg-revealed .fg-screen-namerow{opacity:1} /* Bio: skeleton and real bio share the same slot and crossfade (no hard swap). The real bio sits in normal flow (defines the slot height); the skeleton is absolutely overlaid on top. On reveal the skeleton fades out, bio fades in. */ #fg-instant .fg-bio-wrap{position:relative;min-height:42px} #fg-instant .fg-bio-sk{position:absolute;left:0;right:0;top:0;height:100%;border-radius:10px;background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);background-size:400% 100%;animation:fgsk 1.4s ease infinite;transition:opacity .6s ease} #fg-instant .fg-screen-bio.fg-real{opacity:0;transition:opacity .85s cubic-bezier(.4,0,.2,1)} #fg-instant.fg-revealed .fg-screen-bio.fg-real{opacity:1} #fg-instant.fg-revealed .fg-bio-sk{opacity:0;pointer-events:none} /* CTA skeleton sits a touch below the bio. */ #fg-instant .fg-sk-cta{margin-top:10px} /* === DESKTOP header (>=769px, non-whitelabel) === Mirrors React's
so the FreeGuides logo+name sit in the SAME place before and after React mounts — no jump, no layout shift. Mobile hides it (React has no header there) and the FreeGuides brand lives in the photo cover. */ #fg-instant .fg-dt-header{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:20px 8%;border-bottom:1px solid lightgray;background:#fff} #fg-instant .fg-dt-header img{width:50px;height:50px;border-radius:50%;object-fit:cover;display:block} #fg-instant .fg-dt-header span{font-family:Nunito,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-weight:700;font-size:20px;color:#222} @media(max-width:768px){#fg-instant .fg-dt-header{display:none}} /* On desktop the namerow cover is a skeleton (photo circle + name bar), not the FreeGuides logo — the brand is in the header instead. Crossfades out on reveal. */ #fg-instant .fg-bc-photo-sk{width:80px;height:80px;border-radius:50%;flex:none;background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);background-size:400% 100%;animation:fgsk 1.4s ease infinite} #fg-instant .fg-bc-name-sk{height:18px;width:60%;max-width:160px;border-radius:6px;background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);background-size:400% 100%;animation:fgsk 1.4s ease infinite} /* --- First-screen content (Phase 2) — sized & spaced to match the React app so the fade-out to React is visually seamless. --- */ #fg-instant .fg-screen{flex:1;overflow:auto;background:#fff;color:rgba(0,0,0,1)} #fg-instant .fg-screen-header{display:none} #fg-instant .fg-screen-wrap{padding:10% 5% 5%} @media(min-width:769px){#fg-instant .fg-screen-wrap{padding:2% 5% 5% 14%}} #fg-instant .fg-screen-cols{display:flex;flex-direction:column;gap:0} @media(min-width:769px){#fg-instant .fg-screen-cols{flex-direction:row;gap:20px}} /* Profile-side column. Matches React's styles.profile EXACTLY: on mobile gap=8 between photo-row and bio (NOT 20); on desktop gap=50. */ #fg-instant .fg-screen-side{display:flex;flex-direction:column;gap:8px} @media(min-width:769px){#fg-instant .fg-screen-side{width:25%;gap:50px}} #fg-instant .fg-screen-photo{width:80px;height:80px;border-radius:50%;object-fit:cover;background:#eee;display:block} #fg-instant .fg-screen-namerow{display:flex;align-items:center;gap:15px} /* Name: 16px mobile / 18px desktop, weight 600, BLACK. font-family inherits from .fg-screen-wrap which is set to brand.font (or Quicksand), matching React exactly. */ #fg-instant .fg-screen-name{font-family:inherit;font-weight:600;font-size:16px;color:#000;width:90%} @media(min-width:769px){#fg-instant .fg-screen-name{font-size:18px}} /* Bio: line-height tuned to ~1.3 to match React Native Text default; pure black (no alpha) so the colour does not shift on handoff. font-family inherits from .fg-screen-wrap. The 4px top margin compensates for the intrinsic half-leading that React Native's Text component adds — without it the bio shifts down 4px when React paints. */ #fg-instant .fg-screen-bio{font-family:inherit;font-size:16px;line-height:1.3;color:#000;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0 0;font-weight:400} @media(min-width:769px){#fg-instant .fg-screen-bio{font-size:18px;-webkit-line-clamp:10}} #fg-instant .fg-screen-share{padding:9px;border:1px solid #e4e4e4;border-radius:10px;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} #fg-instant .fg-screen-share svg{display:block} #fg-instant .fg-screen-name{flex:1} #fg-instant .fg-screen-ctas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0} #fg-instant .fg-screen-cta{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;border-radius:.44em;font-weight:600;text-decoration:none;font-size:.88em;height:45px;width:100%;box-sizing:border-box;margin-bottom:10px;line-height:1.5} #fg-instant .fg-screen-main{flex:1;margin-top:10px;min-width:0} #fg-instant .fg-screen-tabs{display:flex;gap:0;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid rgba(101,119,134,.2)} #fg-instant .fg-screen-tab{padding:10px;border-radius:7px;font-weight:600;font-size:14px;color:gray;white-space:nowrap;display:flex;justify-content:center;align-items:center;height:auto;background:transparent;margin:2px} @media(min-width:769px){#fg-instant .fg-screen-tab{font-size:20px;padding:10px}} /* Skeleton rows — fade-and-slide-down individually so the "more is coming" feeling reveals naturally as the eye tracks downwards. */ #fg-instant .fg-sk-row{background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);background-size:400% 100%;border-radius:10px;margin-bottom:12px;opacity:0;transform:translateY(-6px);animation:fgsk 1.4s ease infinite,fgRevealDown .4s ease forwards} @keyframes fgsk{0%{background-position:100% 0}100%{background-position:-100% 0}} @keyframes fgRevealDown{to{opacity:1;transform:translateY(0)}} /* Mobile tab bar — break out of the profile container's 5% horizontal padding so the horizontal scroll runs edge-to-edge. Without this, tabs are clipped prematurely at the padded boundary and a gap of 5% blank space sits on each side, which feels broken when the user swipes. rneui's renders: .fg-tab-bleed > [role="tablist"] (wrapper) > div (the scrollable, overflow-x:auto) > div (the tab row — content) We let .fg-tab-bleed and [role="tablist"] both extend to 100vw with no padding. The 5% inset is moved onto the SCROLLABLE element so the first tab still aligns visually but the scroll cut-off now happens at the screen edge, not at the container's padded boundary. */ @media(max-width:768px){ .fg-tab-bleed{margin-left:-5%;margin-right:-5%} .fg-tab-bleed [role="tablist"]{padding-left:0!important;padding-right:0!important;box-sizing:border-box;width:100vw} /* padding-left:5% gives the first tab its visual inset; padding-right:0 lets the last tab scroll all the way to the screen's right edge with no gap. */ .fg-tab-bleed [role="tablist"] > div{padding-left:5%!important;padding-right:0!important;box-sizing:border-box;width:100vw} } /* Vertical breathing room for the expanding tab attention ring. The tab row scrolls horizontally (overflow-x:auto), which forces overflow-y to CLIP — so a ring expanding up/down gets cut off top & bottom. We pad the scrollable row so the ring has room to expand INTO, then pull the whole bar back with a negative margin so the visible layout is unchanged. */ .fg-tab-bleed [role="tablist"] > div{padding-top:16px;padding-bottom:16px} .fg-tab-bleed{margin-top:-14px;margin-bottom:-14px} /* Tab bar one-time slide-in wiggle. Plays ONCE on profile load to signal "these tabs scroll horizontally" — a subtle nudge to encourage swipe. ~600ms total: peeks 30px right, settles back with a soft ease-out. */ @keyframes fgTabsWiggle{ 0% {transform:translateX(0)} 35% {transform:translateX(30px)} 60% {transform:translateX(-6px)} 100% {transform:translateX(0)} } /* Timing is controlled in JS (fires 0.5s after the profile fully loads), so the animation itself starts immediately when the class is added. */ .fg-tabs-wiggle{animation:fgTabsWiggle .65s cubic-bezier(.34,.92,.56,1) 0s 1 both} /* === Tab-content lazy-mount skeleton === Generic fallback for tabs other than tours — 3 stacked shimmer bars. */ .fg-tabskel{display:flex;flex-direction:column;gap:14px;padding:24px 4px} .fg-tabskel > div{background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);background-size:400% 100%;border-radius:12px;animation:fgsk 1.4s ease infinite} .fg-tabskel > div:nth-child(1){height:80px} .fg-tabskel > div:nth-child(2){height:140px} .fg-tabskel > div:nth-child(3){height:140px} /* === Tours-specific skeleton === Mirrors the actual tour card layout: a portrait cover-image area with the same aspectRatio:2/3 + borderRadius:15 + 1px lightgray border the real cards use, plus name + duration text rows. Two cards on mobile (45% each), three on desktop (30% each) — same as the real tour list. */ .fg-tours-skel{display:flex;flex-wrap:wrap;gap:30px;padding-bottom:5%} .fg-tours-skel-card{display:flex;flex-direction:column;width:45%} @media(min-width:769px){.fg-tours-skel-card{width:30%}} .fg-tours-skel-img{aspect-ratio:2/3;border:1px solid lightgray;border-radius:15px;margin-bottom:10px;background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);background-size:400% 100%;animation:fgsk 1.4s ease infinite} .fg-tours-skel-name{height:14px;border-radius:6px;margin-bottom:8px;background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);background-size:400% 100%;animation:fgsk 1.4s ease infinite;width:80%} .fg-tours-skel-meta{height:10px;border-radius:6px;background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 37%,#f2f2f2 63%);background-size:400% 100%;animation:fgsk 1.4s ease infinite;width:50%}