/* "Immersive" theme — loaded only when includes/header.php sets $pageTheme = 'immersive' (Home, Group Tours, Private Tours, Package Detail, About, Gallery, Contact). Blog/FAQ/Community keep style.css's classic look untouched. Reuses this project's existing --navy/--gold/ etc. custom properties (defined in style.css) rather than a parallel token set — same values, no renaming churn. Two tokens the source design references that don't exist in style.css (--tk-gold-deep, --tk-text-faint) are hardcoded here instead of added to the shared :root, so this file makes zero changes to anything the classic theme depends on. */ body.im-body { margin: 0; background: #040B16; overflow-x: hidden; } body.im-body::before { content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; } body.im-body::after { content: ""; position: fixed; inset: 0; z-index: 149; pointer-events: none; background: radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.5)); } body.im-body a { color: var(--gold); text-decoration: none; } body.im-body a:hover { color: var(--gold-light); } /* ---------- shell ---------- */ .im-wrap { max-width: 1240px; margin: 0 auto; padding: 0 46px; } .im-sec { padding: 110px 0; } .im-ey { font-size: .64rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .im-ey::before { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); display: inline-block; } .im-ey-c { justify-content: center; } .im-ey-cream { color: #B08D2A; } .im-h1 { font-family: var(--font-heading); font-weight: 500; line-height: .98; letter-spacing: -.02em; color: #fff; margin: 0; text-wrap: pretty; text-shadow: 0 2px 20px rgba(0,0,0,.5); } .im-h2 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.1rem,3.4vw,3.35rem); line-height: 1.03; letter-spacing: -.022em; margin: 18px 0 0; color: #fff; text-wrap: pretty; } .im-hblock { max-width: 720px; } .im-hblock--c { margin-left: auto; margin-right: auto; text-align: center; } .im-hblock--c::after { content: ""; display: block; width: 56px; height: 1px; margin: 26px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .im-hblock--cream::after { background: linear-gradient(90deg, transparent, #B08D2A, transparent); } .im-h2-cream { color: var(--text-on-cream); } .im-lede { font-weight: 300; font-size: 1.02rem; line-height: 1.7; color: var(--text-muted); max-width: 560px; margin: 16px auto 0; } .im-it { font-style: italic; color: var(--gold); } /* ---------- glassmorphism ---------- */ .im-glass { position: relative; background: linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 46%, rgba(212,175,55,.045)), linear-gradient(rgba(6,16,32,.55), rgba(6,16,32,.55)); backdrop-filter: blur(26px) saturate(155%); -webkit-backdrop-filter: blur(26px) saturate(155%); border: 1px solid rgba(212,175,55,.22); border-radius: 20px 3px 20px 3px; box-shadow: 0 34px 80px -36px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(212,175,55,.1); } .im-glass-cream { position: relative; background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(255,255,255,.6) 55%, rgba(212,175,55,.09)); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(176,141,42,.24); border-radius: 20px 3px 20px 3px; box-shadow: 0 32px 74px -38px rgba(7,26,51,.42), inset 0 1px 0 rgba(255,255,255,.85); } /* corner brackets — the "cut" detail on hero-level boxes */ .im-brackets::before, .im-brackets::after { content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 3; } .im-brackets::before { top: 12px; left: 12px; border-top: 1px solid rgba(212,175,55,.6); border-left: 1px solid rgba(212,175,55,.6); } .im-brackets::after { bottom: 12px; right: 12px; border-bottom: 1px solid rgba(212,175,55,.6); border-right: 1px solid rgba(212,175,55,.6); } .im-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,.4), transparent); border: 0; margin: 0; } .im-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* ---------- buttons (immersive pages only — .button/.button--outline classes keep their classic styling elsewhere; this ADDS the shine-sweep + shape only inside body.im-body, so Blog/FAQ/Community buttons are unaffected) ---------- */ body.im-body button, body.im-body .button { position: relative; overflow: hidden; border-radius: 2px; text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; font-weight: 600; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .45s; } body.im-body button:hover, body.im-body .button:hover { transform: translateY(-2px); } body.im-body button::after, body.im-body .button::after { content: ""; position: absolute; top: 0; bottom: 0; left: -130%; width: 55%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); transition: left .8s cubic-bezier(.16,1,.3,1); pointer-events: none; } body.im-body button:hover::after, body.im-body .button:hover::after { left: 140%; } [data-motion="off"] button:hover, [data-motion="off"] .button:hover { transform: none; } [data-motion="off"] button::after, [data-motion="off"] .button::after { display: none; } /* the generic `body.im-body a` link-color rule above (higher specificity than a bare .button/.button--outline class) was winning on every , turning solid-gold CTA buttons' navy text gold-on-gold (invisible). Pin each button variant's intended text color back explicitly. */ body.im-body a.button, body.im-body a.button:hover, body.im-body .button, body.im-body .button:hover { color: var(--navy); } body.im-body a.button--outline, body.im-body .button--outline { color: #fff; } body.im-body a.button--outline:hover, body.im-body .button--outline:hover { color: var(--gold); } body.im-body a.button--ghost, body.im-body .button--ghost { color: var(--text); } body.im-body a.button--danger, body.im-body .button--danger { color: #fff; } /* ---------- nav ---------- */ .im-nav { position: sticky; top: 0; z-index: 60; background: rgba(5,15,31,.62); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); border-bottom: 1px solid rgba(212,175,55,.16); } .im-nav nav a { color: var(--text); font-size: .8rem; letter-spacing: .02em; cursor: pointer; position: relative; padding: 4px 0; transition: color .3s; } .im-nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); } .im-nav nav a:hover { color: var(--gold); } .im-nav nav a:hover::after { transform: scaleX(1); } .im-nav nav a[data-on="1"] { color: var(--gold); } .im-nav nav a[data-on="1"]::after { transform: scaleX(1); } /* ---------- entrance (fails open — base state is visible; the CSS below only plays if body[data-anim="1"], toggled once by assets/js/immersive.js after load, and skipped entirely when motion is off/reduced) ---------- */ @keyframes imRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } @keyframes imFade { from { opacity: 0; } to { opacity: 1; } } @keyframes imZoom { from { opacity: 0; transform: scale(.955); } to { opacity: 1; transform: none; } } [data-anim="1"] [data-rv] { animation: imRise 1s cubic-bezier(.16,1,.3,1) both; } [data-anim="1"] [data-stag]>* { animation: imRise .95s cubic-bezier(.16,1,.3,1) both; } [data-anim="1"] [data-stag]>*:nth-child(1) { animation-delay: .04s; } [data-anim="1"] [data-stag]>*:nth-child(2) { animation-delay: .13s; } [data-anim="1"] [data-stag]>*:nth-child(3) { animation-delay: .22s; } [data-anim="1"] [data-stag]>*:nth-child(4) { animation-delay: .31s; } [data-anim="1"] [data-stag]>*:nth-child(5) { animation-delay: .4s; } [data-anim="1"] [data-stag]>*:nth-child(6) { animation-delay: .49s; } [data-anim="1"] [data-stag]>*:nth-child(7) { animation-delay: .58s; } [data-anim="1"] [data-stag]>*:nth-child(8) { animation-delay: .67s; } [data-anim="1"] [data-stag]>*:nth-child(9) { animation-delay: .76s; } [data-reveal="off"] [data-rv], [data-reveal="off"] [data-stag]>* { animation: none; } /* ---------- cinematic page wipe (plays once per page load — see includes/header.php) ---------- */ @keyframes imWipe { 0% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } } .im-wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; transform-origin: top; background: linear-gradient(180deg,#050F1F,#0A2342 60%,#050F1F); animation: imWipe 1.05s cubic-bezier(.76,0,.24,1) forwards; } .im-wipe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* ---------- floating travel elements ---------- */ @keyframes imDrift { 0%,100% { transform: translate3d(0,0,0) rotate(var(--r,0deg)); } 50% { transform: translate3d(0,-22px,0) rotate(calc(var(--r,0deg) + 1.5deg)); } } .im-float { animation: imDrift var(--d,13s) ease-in-out infinite; animation-delay: var(--dl,0s); will-change: transform; } /* .im-glass's default box-shadow is a large soft panel shadow (0 34px 80px), tuned for a card sitting on a flat section background. Floating badges over the globe sit on a busy, lit sphere instead — that same shadow reads as an ugly dark rectangular smudge cutting across the globe's surface, not a natural drop shadow. Give floating badges a smaller, tighter one. */ .im-float.im-glass { box-shadow: 0 10px 26px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(212,175,55,.1); } @keyframes imOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } } .im-orbit { animation: imOrbit 46s linear infinite; } @keyframes imGlow { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } } .im-glow { animation: imGlow 7s ease-in-out infinite; } /* ---------- misc motion ---------- */ .im-kb { animation: imKB 26s ease-out both; } @keyframes imKB { from { transform: scale(1); } to { transform: scale(1.14); } } .im-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); position: relative; flex: none; } .im-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); animation: imPulse 2.1s cubic-bezier(.16,1,.3,1) infinite; } @keyframes imPulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(3.6); opacity: 0; } 100% { opacity: 0; } } .im-mqwrap { overflow: hidden; border-top: 1px solid rgba(212,175,55,.14); border-bottom: 1px solid rgba(212,175,55,.14); } .im-mq { display: flex; width: max-content; animation: imMq 40s linear infinite; } .im-mqwrap:hover .im-mq { animation-play-state: paused; } @keyframes imMq { from { transform: translateX(0); } to { transform: translateX(-50%); } } .im-cue { animation: imCue 2.4s ease-in-out infinite; } @keyframes imCue { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(9px); opacity: 1; } } /* ---------- interactive cards ---------- */ .im-card { position: relative; border-radius: 20px 3px 20px 3px; overflow: hidden; cursor: pointer; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1); box-shadow: 0 26px 60px -34px rgba(0,0,0,.8); } .im-card:hover { box-shadow: 0 46px 96px -34px rgba(0,0,0,.92), 0 0 0 1px rgba(212,175,55,.5), 0 0 40px -12px rgba(212,175,55,.28); } .im-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s cubic-bezier(.16,1,.3,1); } .im-card:hover .im-card__img { transform: scale(1.09); } .im-card__sheen { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(212,175,55,.24), transparent 62%); opacity: 0; transition: opacity .5s; } .im-card:hover .im-card__sheen { opacity: 1; } .im-row { transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, background .5s; } .im-row:hover { transform: translateY(-5px); border-color: rgba(212,175,55,.42); } .im-lift { transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s; } .im-lift:hover { transform: translateY(-7px); } /* ---------- globe ---------- */ .im-globe { position: relative; width: 100%; aspect-ratio: 1; max-width: 620px; margin: 0 auto; } .im-globe canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; } .im-globe canvas:active { cursor: grabbing; } .im-halo { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(212,175,55,.2), rgba(10,35,66,.5) 52%, transparent 72%); filter: blur(14px); pointer-events: none; } .im-ring { position: absolute; inset: -2%; border-radius: 50%; border: 1px solid rgba(212,175,55,.18); pointer-events: none; } .im-ring::before { content: ""; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px 3px rgba(212,175,55,.7); } .im-footcol a { display: block; color: var(--text-muted); font-size: .85rem; font-weight: 300; padding: 5px 0; transition: color .3s, transform .3s; } .im-footcol a:hover { color: var(--gold); transform: translateX(5px); } /* ---------- motion tweak overrides ---------- */ [data-motion="off"] .im-kb, [data-motion="off"] .im-mq, [data-motion="off"] .im-dot::after, [data-motion="off"] .im-cue, [data-motion="off"] .im-float, [data-motion="off"] .im-orbit, [data-motion="off"] .im-glow { animation: none; } [data-motion="off"] [data-rv], [data-motion="off"] [data-stag]>* { animation: none; } [data-motion="off"] .im-wipe { display: none; } [data-motion="off"] .im-card:hover .im-card__img, [data-motion="off"] .im-row:hover, [data-motion="off"] .im-lift:hover { transform: none; } [data-motion="subtle"] .im-kb { animation-duration: 52s; } [data-motion="subtle"] [data-rv], [data-motion="subtle"] [data-stag]>* { animation-name: imFade; animation-duration: .7s; } [data-motion="subtle"] .im-cue, [data-motion="subtle"] .im-float { animation: none; } [data-float="0"] .im-float { animation: none; } [data-mq="0"] .im-mqwrap { display: none; } @media (prefers-reduced-motion: reduce) { .im-kb, .im-mq, .im-dot::after, .im-cue, .im-float, .im-orbit, .im-glow, .im-wipe { animation: none !important; } [data-rv], [data-stag]>* { animation: none !important; } } @media (max-width: 900px) { .im-wrap { padding: 0 24px; } .im-sec { padding: 70px 0; } } /* ---------- mobile ---------- Every per-page section layout in the immersive theme is an inline `style="display:grid;grid-template-columns:..."` written directly in the PHP templates (nothing to hook with a plain media query), and the nav's desktop link row is an inline-styled