/* "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 and .im-sec are combined on the same element constantly (nearly every section on every immersive page). Both used the `padding` SHORTHAND for different axes — .im-wrap for left/right, .im-sec for top/bottom — same specificity, so whichever rule is declared second in this file wins *entirely* and silently zeroes the other's axis. .im-sec was winning, so every one of these sections had 0 horizontal padding, content flush against the screen edge. Longhand properties on disjoint axes can never collide like this regardless of file order, so that's the permanent fix rather than patching individual instances. */ .im-wrap { max-width: 1240px; margin: 0 auto; padding-left: 46px; padding-right: 46px; } .im-sec { padding-top: 110px; padding-bottom: 110px; } .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-left: 24px; padding-right: 24px; } .im-sec { padding-top: 70px; padding-bottom: 70px; } } /* ---------- 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