/* ============================================================================ * Anan Scroll Stack - homepage * ============================================================================ * Three full-height layers that slide over one another: * * 1 .anan-hero the film (Anan Hero plugin) * 2 .elementor-element-2c59eaac "Your Trusted Real Estate Agents" * 3 .elementor-element-anmeetsec "Meet Anan Property Group" * * Each is position:sticky at top:0 with a rising z-index, so as the page * scrolls the next one climbs the screen and covers the one before it. Nothing * moves except the page - there is no scroll listener behind the effect itself. * * Variables written onto by scroll-stack.js: * * --anan-header the sticky header's height (mobile header on phones, * master header on desktop, plus the admin bar if any) * --anan-bar-space how much of the bottom of the screen the pinned search * bar occupies (its own height plus its offset). On * desktop this is measured from the bar's TALLEST tab; * on phones from its DEFAULT tab - see section M6. * --anan-fit-2/3 a scale factor for the content of layers 2 and 3, 1 on * a tall screen, less on a short one. See the JS. * --anan-l3-top phones only: the sticky top offset that pins the Meet * Anan layer by its BOTTOM edge - see section M4. * * The stack runs at two sizes and nowhere in between: * * desktop (min-width: 1025px) and (min-height: 820px) * phone (max-width: 767px) and (min-height: 560px) * * Between 768 and 1024px (tablets), and on desktop windows shorter than 820px * or phones in landscape, the homepage keeps the layout it had before this * module existed. The desktop height floor was 960 (bar reserve + "Meet Anan" * scaling under 0.84 reads badly) until 2026-09-14, when a 1920x1080 desktop * Chrome with a bookmarks bar measured 889px tall and the whole stack, the * villa build and the screen-sized map silently switched off - which the * user read as the homepage being broken. 820 covers every 1080p desktop * with normal browser chrome; Meet Anan scales to ~0.75 there, and the fit * logic in the JS keeps the bar clear of the copy. The phone height floor is 560 so a * landscape phone - where almost nothing would be left between header and * bar - stays on the plain layout. * * Rules shared by both sizes live in the first block; anything geometric that * differs (where the bar anchors, how the hero copy is placed, how much each * layer reserves) lives in the size-specific blocks below it. * ============================================================================ */ /* The phone search controls - the "Search" pill and the minimise chevron - are built by scroll-stack.js and only mean anything inside the phone block at the bottom of this file. Everywhere else they must not exist, including on desktop if a phone-built page is resized up. */ .anan-ss-minbtn, .anan-ss-pill { display: none; } /* ============================================================================ * SHARED - the stack itself, identical at both sizes * ============================================================================ */ @media (min-width: 1025px) and (min-height: 820px), (max-width: 767px) and (min-height: 560px) { /* --- 1. the three layers -------------------------------------------------- */ body.anan-stack .anan-hero, body.anan-stack .elementor-element-2c59eaac, body.anan-stack .elementor-element-anmeetsec { position: -webkit-sticky; position: sticky; top: 0; /* !important on the hero because the plugin prints min-height inline from Anan Hero > Height (and its own stylesheet caps it with !important on phones); on the containers because Elementor's own min_height rule (1080px) loads after this file. */ min-height: 100vh !important; } body.anan-stack .anan-hero { z-index: 1; } body.anan-stack .elementor-element-2c59eaac { z-index: 2; } body.anan-stack .elementor-element-anmeetsec { z-index: 3; } /* --- 1b. how long each layer holds still ---------------------------------- */ /* Three sticky layers of exactly 100vh stack, but nothing ever rests: the moment one lands on the top of the screen the next is already at the bottom edge climbing over it, so each layer is whole for a single instant and the copy would fade in while it was being covered. The gap between them is what buys the pause. It is transparent, and the layer underneath is still pinned behind it, so scrolling through the gap shows that layer alone and nothing moves - which is the beat the fade-in happens on. Every layer therefore costs 100vh of climb plus this, and 60vh is roughly a second of unhurried scrolling - about one thumb-swipe on a phone. Raise it for a longer hold, lower it to move through the sequence faster; it is the only number worth tuning here. The -83px in the "Meet Anan" section's Elementor settings pulled it up over its old seam with the section above. There is no seam any more - it slides over that section - and the negative margin would start the slide early. */ body.anan-stack { --anan-dwell: 60vh; } body.anan-stack .elementor-element-2c59eaac, body.anan-stack .elementor-element-anmeetsec, body.anan-stack .elementor-element-explore-phuket-map { margin-top: var(--anan-dwell) !important; } /* --- 2. everything below has to rise over the stack ----------------------- */ /* The three layers are positioned, so without this the rest of the page would paint underneath them and never appear. */ body.anan-stack .elementor-element-explore-phuket-map, body.anan-stack .elementor-element-explore-phuket-map ~ .elementor-element { position: relative; z-index: 4; } /* A sticky layer stays stuck until its containing block runs out, i.e. to the bottom of the page - it is simply covered on the way down. That only works if what covers it is opaque. These three sections set no background of their own and have always rendered on the white of , so painting them white is a no-op today and stops the taupe of layer 3 showing through them. */ body.anan-stack .elementor-element-explore-phuket-map, body.anan-stack .elementor-element-5300008a, body.anan-stack .elementor-element-1082f42e, body.anan-stack .elementor-element-b25239f { background-color: #fff; } /* b25239f is in that list for a different reason: it does have a background, but it is an image, and Elementor holds container background images at `background-image: none !important` until the container scrolls into view and gains .e-lazyloaded. For those few frames it is transparent. White is also what showed through any alpha in the PNG before, so this changes nothing that was visible. */ /* Elementor gives every widget a 20px bottom margin, and the map is the only top-level widget on this page - everything else is a container or a section. Against the white body that gap was invisible. With a layer still pinned behind it, it is a 20px band of taupe between the map and the portfolio. */ body.anan-stack .elementor-element-explore-phuket-map { margin-bottom: 0 !important; } /* The footer is a sibling of the whole page wrapper, not of the layers, so the z-index above does not reach it. It needs one of its own because the hero's logo and copy are anchored to the screen (sections D3 and M3) and therefore stay put after the hero itself has scrolled away - without this they would float over the footer at the bottom of the page. */ body.anan-stack .website-wrapper > footer { position: relative; z-index: 5; } /* --- 4. layers 2 and 3, centred and clear of the bar ---------------------- */ body.anan-stack .elementor-element-2c59eaac, body.anan-stack .elementor-element-anmeetsec, body.anan-stack .elementor-element-anmeetsec > .e-con-inner { justify-content: center !important; } /* A boxed container carries its padding on .e-con-inner, not on itself, so the padding set in the size-specific blocks would simply be added to the reserve set on the outer box and the layer would stand taller than the screen. */ body.anan-stack .elementor-element-anmeetsec > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; } /* 200px of margin and a 600px floor were sized for a 1080px section; inside a centred 100vh layer they only push the copy off the bottom. */ body.anan-stack .elementor-element-a2f3014 { margin-top: 0 !important; min-height: 0 !important; } /* The fit scale in section 5 is a transform, and a transform does not change the space the element reserves - a layer whose copy was scaled to 0.95 still stood 36px taller than the screen, which pushed the reserve for the search bar off the bottom and put the bar back over the copy. These negative margins are the layout half of that scale: the script sets each one to exactly the height the scale takes away. Paired with transform-origin: top so the shrinkage all happens at the bottom edge, where the margin removes it. */ body.anan-stack .elementor-element-a2f3014, body.anan-stack .elementor-element-anmeetrow { transform-origin: center top; } body.anan-stack .elementor-element-a2f3014 { margin-bottom: var(--anan-shrink-2, 0px) !important; } body.anan-stack .elementor-element-anmeetrow { margin-bottom: var(--anan-shrink-3, 0px) !important; } /* --- 5. the copy fades in once its layer reaches the top ------------------ */ /* Gated on .anan-stack-ready, which the script adds: if the JS never runs the copy must still be visible. .is-revealed is added once and never removed - on the way back up the layer is still fully on screen, so fading it out again would blank a section the reader is looking at. The script adds it while the layer is still CLIMBING, not once it lands, so the fade runs during the climb instead of after it - waiting for the landing left the layer as an empty photograph the whole way up. */ body.anan-stack-ready .elementor-element-a2f3014, body.anan-stack-ready .elementor-element-anmeetrow { opacity: 0; transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); } body.anan-stack-ready .elementor-element-2c59eaac .elementor-element-a2f3014 { transform: translateY(30px) scale(var(--anan-fit-2, 1)); } body.anan-stack-ready .elementor-element-anmeetsec .elementor-element-anmeetrow { transform: translateY(30px) scale(var(--anan-fit-3, 1)); } body.anan-stack-ready .is-revealed .elementor-element-a2f3014 { opacity: 1; transform: scale(var(--anan-fit-2, 1)); } body.anan-stack-ready .is-revealed .elementor-element-anmeetrow { opacity: 1; transform: scale(var(--anan-fit-3, 1)); } /* --- 6. the search bar, pinned across all three --------------------------- */ /* The child theme parks the bar on the old hero/about seam with a -103px margin and a 0-height container around it. In the stack there is no seam to sit on, so it comes out of the page and pins to the screen instead - top- anchored on desktop, bottom-anchored on phones; the geometry lives in the size-specific blocks. */ body.anan-stack .elementor-element-c40a6cc, body.anan-stack .elementor-element-c40a6cc > .e-con-inner { transform: none !important; } /* The -103px that lifted the bar onto the old seam lives on the widget CONTAINER, not on the widget - the child theme's `margin: 0 !important` on the widget never reached it, which is why the widget box has always been 86px tall around a 188px bar. Harmless while the container was 0-height and only the visible bar mattered; now that the widget is the thing being positioned, its box has to be the real size of the bar or everything measured from it is 103px out. */ body.anan-stack .elementor-element-07a32e7 > .elementor-widget-container { margin: 0 !important; } body.anan-stack .elementor-element-07a32e7 { position: fixed; /* Above the header's 9999 so a tall tab opened at the top of the page is not clipped by it, below the top bar and the admin bar. !important because the widget's own Elementor z-index (200) is printed as a four-class selector in post-18593.css, which loads after this file. */ z-index: 10000 !important; transition: opacity 400ms ease, transform 400ms ease; } /* Set by the script once the map is nearly up. visibility rather than display so the fade can play, and pointer-events so a half-faded bar cannot swallow a click meant for the map. */ body.anan-stack.anan-stack-nosearch .elementor-element-07a32e7 { opacity: 0; transform: translateY(26px); pointer-events: none; visibility: hidden; transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 400ms; } /* --- 7. reduced motion ---------------------------------------------------- */ /* The stacking itself is honest scrolling and stays. What goes is the fade and the travel on the copy, and the bar's slide. */ @media (prefers-reduced-motion: reduce) { body.anan-stack-ready .elementor-element-a2f3014, body.anan-stack-ready .elementor-element-anmeetrow, body.anan-stack-ready .elementor-element-2c59eaac .elementor-element-a2f3014, body.anan-stack-ready .elementor-element-anmeetsec .elementor-element-anmeetrow { opacity: 1; transition: none; } body.anan-stack-ready .elementor-element-2c59eaac .elementor-element-a2f3014 { transform: scale(var(--anan-fit-2, 1)); } body.anan-stack-ready .elementor-element-anmeetsec .elementor-element-anmeetrow { transform: scale(var(--anan-fit-3, 1)); } body.anan-stack .elementor-element-07a32e7 { transition: none; } body.anan-stack.anan-stack-nosearch .elementor-element-07a32e7 { transform: none; transition: none; } } } /* end SHARED */ /* ============================================================================ * DESKTOP - (min-width: 1025px) and (min-height: 820px) * ============================================================================ */ @media (min-width: 1025px) and (min-height: 820px) { /* --- D2. the map, sized to the screen rather than to its own width -------- */ /* Phuket is a long thin island: the map is a 600x1215 SVG, so capping it at 620px WIDE - which is what it does everywhere else on the site - makes it 1256px tall and it runs off the bottom of the screen. Now that everything above it is exactly one screen, it has to be too, so the cap moves to the height and the width follows from the aspect ratio. flex: 0 0 auto because the wrapper is a flex item with a 420px basis; left as it was, the flex algorithm would go on sizing it by width. The auto side margins are what centre it in the space left over beside the intro column, exactly as its own stylesheet does. */ body.anan-stack .elementor-element-explore-phuket-map .ana-phuket-map { /* Once you scroll past control_vars.scroll_trigger the theme pins .master_header to the top of the screen - position:sticky, 91px, opaque white, z-index 9999 - and it stays there for the rest of the page. It wins against anything in here, so the island's northern tip was simply disappearing under it. Everything the section is allowed to use starts below that. */ padding-top: calc(var(--anan-header, 91px) + 48px); padding-bottom: 48px; } body.anan-stack .elementor-element-explore-phuket-map .apm-mapwrap { flex: 0 0 calc(50% - 24px); width: auto; max-width: calc(50% - 24px); /* min() so a very tall window cannot blow the map up past the 620x1256 it was drawn for - beyond that it would only get soft. */ height: min(calc(100vh - var(--anan-header, 91px) - 96px), 1256px); margin-left: auto; margin-right: auto; } body.anan-stack .elementor-element-explore-phuket-map .apm-clip { height: 100%; } body.anan-stack .elementor-element-explore-phuket-map .apm-clip > svg { display: block; width: 100%; height: 100%; } /* --- D3. the hero, recomposed for a full-height frame --------------------- */ /* The hero was 1000px and its parts were placed inside that box: logo centred at 50%, the line sequence at 73%, and the search bar hanging off the bottom edge onto the section below. At 100vh that arrangement collides - on a 900px screen the sequence would end at 725px and the bar would start at 668px. Both are anchored to the SCREEN rather than to the hero. The hero is 100vh tall but, until the page is scrolled, the top bar and header hold it 163px down - so it is a full screen of box with only 737px of it in view, and anything placed relative to its bottom edge lands 163px low and finishes up behind the search bar. Anchoring to the viewport puts the copy in exactly the same place at rest as when the hero is pinned, so nothing moves as the hero takes the screen and the bar can be there from the first paint. Three things make this safe rather than clever: the hero's overflow:hidden does not clip them, because a fixed element's containing block is the viewport and the hero has no transform to become one; they still paint inside the hero's own stacking context, so layer 2 covers them on schedule; and the sequence keeps a constant gap to the bar at every screen height, which a percentage of the hero could not. The award ribbons stay anchored to the hero rather than the screen: they hang from its top edge, and at rest that edge is where they belong - just under the header rather than behind it. */ body.anan-stack .anan-hero__logo { position: fixed; top: 34%; width: 16%; } /* Sits under the logo, centred in whatever room is left between the logo's bottom edge and the top of the search bar. The script measures both and publishes the midpoint, because the logo's height comes from a percentage of the viewport WIDTH while the bar is placed off the height - so there is no percentage of either that stays balanced as the window changes shape. */ body.anan-stack .anan-hero__seq { position: fixed; top: var(--anan-seq-top, calc(67vh + 2.825vw - 173px)); bottom: auto; transform: translate(-50%, -50%); } /* --- D4. what each layer reserves ----------------------------------------- */ /* The top pad IS the sticky header - see the note on the map above. Without it the header covered the top 67px of "Meet Anan" (its whole infinity divider) and 15px of "Your Trusted Agents". No extra padding on top of it: the layers centre their copy in whatever is left, so the space is spent on the copy rather than on a margin nobody sees. */ body.anan-stack .elementor-element-2c59eaac, body.anan-stack .elementor-element-anmeetsec { padding-top: var(--anan-header, 91px) !important; padding-bottom: calc(var(--anan-bar-space, 346px) + 28px) !important; } /* --- D6. the search bar, top-anchored ------------------------------------- */ /* Anchored by its TOP, so switching to a taller tab grows the panel downward and the top edge never moves. The script puts that top far enough up the screen that the tallest tab (Advanced Search, 314px against 188px for the default one) still clears the bottom. The fallbacks in this file and the one on the copy above are not rough guesses - they are the same arithmetic the script does, written in calc, and they land within a pixel of it. That matters because FlyingPress inlines these rules as critical CSS but loads the script separately: with a placeholder like 55% the bar painted in the middle of the screen and jumped down the moment the script ran. The script still has the last word, and still has to, because it measures the tallest tab rather than assuming 314px. It only has nothing left to correct. The copy's fallback resolves the midpoint between the logo's bottom edge and the bar's top: the logo is 16% of the viewport width at a 555x392 aspect, so its height is 11.3vw and its centre is at 34vh, which makes the midpoint 67vh + 2.825vw - 173px. Change the logo's width or the image's proportions and this drifts a pixel or two for one frame. left/right/margin rather than left:50% + translateX, because a fixed element resolves percentages against the layout viewport, which excludes the scrollbar - so this centres on the same axis as the rest of the page. */ body.anan-stack .elementor-element-07a32e7 { left: 0; right: 0; top: var(--anan-bar-top, calc(100vh - 346px)); bottom: auto; width: min(1140px, calc(100% - 60px)); margin: 0 auto !important; transform: none; } } /* end DESKTOP */ /* ============================================================================ * PHONE - (max-width: 767px) and (min-height: 560px) * ============================================================================ * The same three-layer stack, re-derived for a screen that is tall, narrow and * driven by a thumb. What changes and why: * * - The hero's own stylesheet caps it at 42vh on phones; here it takes the * whole screen again, like desktop. * - Layer 2 fits one screen once its type is set at phone sizes (below). * - Layer 3 ("Meet Anan") is ~4 screens of copy at phone width. Scaling it * to fit would make it unreadable and hiding parts of it would lose the * company's legal disclosure, so instead it scrolls through in full and * then pins by its BOTTOM edge (the script sets --anan-l3-top to * viewport-minus-height) - the reader finishes it, it holds, and the map * slides over it. Same stack, one layer reads before it pins. * - The bar anchors to the BOTTOM edge and reserves its DEFAULT tab, not its * tallest: the Advanced tab is 654px at this width against 238px for the * default, and a top anchor high enough for it would park the resting bar * in the middle of the screen. Growing upward keeps the submit under the * thumb; a pane taller than the screen scrolls inside itself. * ============================================================================ */ @media (max-width: 767px) and (min-height: 560px) { /* --- M1. full-screen layers on a dynamic viewport ------------------------- */ /* 100dvh where supported, so the layers track the browser chrome as the address bar collapses; the shared 100vh is the fallback. The hero's own stylesheet caps it at clamp(320px, 42vh, 400px) !important on phones - the two extra classes here outweigh that. */ body.anan-stack .anan-hero, body.anan-stack .elementor-element-2c59eaac, body.anan-stack .elementor-element-anmeetsec { min-height: 100dvh !important; } /* A shorter beat between the layers than desktop's 60vh: on a phone the dwell is dead travel under the thumb, and with the villa build retired below 768px (villa.css, 2026-08-20) nothing needs the pause to finish drawing. 40vh still gives each landed layer a moment alone before the next climbs over it. */ body.anan-stack { --anan-dwell: 40vh; } /* --- M3. the hero, recomposed for a phone screen -------------------------- */ /* Same viewport anchoring as desktop (section D3), at phone proportions. The plugin prints the logo's phone placement inline (top 22% of the hero, width 42%); fixed positioning keeps the same numbers but measures them against the screen, which is the same box now that the hero is full-height. */ body.anan-stack .anan-hero__logo { position: fixed; top: 22%; width: min(42%, 230px); } /* The fallback is the script's arithmetic in calc: the logo's centre is at 22vh, its height 42vw at the mark's 555x392 aspect (29.7vw, half of it 14.85vw), and the bar's default reserve is 248px - so the midpoint between logo bottom and bar top is (22vh + 14.85vw + 100vh - 248px) / 2. */ body.anan-stack .anan-hero__seq { position: fixed; top: var(--anan-seq-top, calc(61vh + 7.4vw - 124px)); bottom: auto; transform: translate(-50%, -50%); } /* --- M4. what each layer reserves, and how layer 3 pins ------------------- */ body.anan-stack .elementor-element-2c59eaac, body.anan-stack .elementor-element-anmeetsec { padding-top: var(--anan-header, 70px) !important; padding-bottom: calc(var(--anan-bar-space, 248px) + 16px) !important; } /* Pinned by its bottom edge: the script sets --anan-l3-top to the viewport height minus the layer's own height (never above 0), so the layer scrolls through in full and sticks the moment its last line clears the search bar. With the variable unset it degrades to top:0 - the layer pins early and the tail of the copy is covered on the way down, which is the acceptable shape of "the script never ran". */ body.anan-stack .elementor-element-anmeetsec { top: var(--anan-l3-top, 0px); } /* --- M5. phone type, sized so layer 2 is one screen ----------------------- */ /* Layer 2's copy is 669px at inherited desktop sizes against ~470px of room between header and bar; these settings bring it to ~400px without touching any other breakpoint. Layer 3 gets the same treatment not to fit - it scrolls through - but so four screens of copy become nearer three. */ body.anan-stack .elementor-element.elementor-element-a2f3014 { gap: 16px !important; } body.anan-stack .elementor-element.elementor-element-87425c1 .elementor-heading-title { font-size: 30px !important; line-height: 1.15 !important; } body.anan-stack .elementor-element.elementor-element-38ef5e77 .elementor-heading-title { font-size: 15px !important; line-height: 1.55 !important; } /* The infinity ornament: 64px of pattern in 15px of padding at desktop scale, 40px in 6px here. --divider-pattern-height is how Elementor sizes a pattern divider; the explicit height is the belt to that suspender. */ body.anan-stack .elementor-element.elementor-element-anctadiv .elementor-divider, body.anan-stack .elementor-element.elementor-element-anmeetdiv .elementor-divider { --divider-pattern-height: 40px; padding-top: 6px; padding-bottom: 6px; } body.anan-stack .elementor-element.elementor-element-anctadiv .elementor-divider-separator, body.anan-stack .elementor-element.elementor-element-anmeetdiv .elementor-divider-separator { height: 40px !important; } body.anan-stack .elementor-element.elementor-element-anmeetrow { gap: 24px !important; } body.anan-stack .elementor-element.elementor-element-anmeettitle .elementor-heading-title { font-size: 28px !important; line-height: 1.15 !important; } body.anan-stack .elementor-element.elementor-element-anmeetbody p { font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 12px; } body.anan-stack .elementor-element.elementor-element-anmeetlegal p { font-size: 11px !important; line-height: 1.5 !important; } /* --- M6. the search bar, bottom-anchored and minimised by default --------- */ /* Bottom-anchored, unlike desktop, and deliberately so: anchoring by the top means placing it high enough for the tallest tab, and at this width the Advanced tab is 654px against the default's 238px - the resting bar would float in the middle of the screen. Anchored here, a taller tab grows UPWARD over the layer's copy while the tabs and the submit stay under the thumb. The pane cap below keeps the whole bar on screen; past it the pane scrolls inside itself. The full bar is 238px even on its default tab - nearly a third of a phone screen - so its RESTING state is a slim "Search" pill (built by the script) and the full bar is an overlay that opens over the layer. The layers only ever reserve the pill's footprint, so opening and minimising never reflows the stack; the copy simply sits behind the open bar until it closes. */ body.anan-stack .elementor-element-07a32e7 { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; margin: 0 !important; transform: none; } /* Screen minus the header band, the tab strip (47px) and the bar's own offset, with a little air. Only the pane scrolls - the tab strip stays put. */ body.anan-stack .elementor-element-07a32e7 .anan-st__panels { max-height: calc(100dvh - var(--anan-header, 70px) - 47px - 44px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Minimised: the bar leaves the same way it does when the map retires it. Gated on .anan-stack-ready so a page whose script never ran (and so could never expand it again) keeps the plain fixed bar instead. */ body.anan-stack.anan-stack-ready.anan-ss-min .elementor-element-07a32e7 { opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 250ms; } /* The chevron that minimises the open bar: a small circle floating off the bar's top-right shoulder, in the idle tabs' taupe. */ /* Only a real, open bar offers the chevron. display (not visibility) so the boot and minimise transitions never leave a half-visible sub-24px tap target for accessibility audits to trip over. */ body.anan-stack.anan-stack-ready:not(.anan-ss-min):not(.anan-stack-nosearch) .anan-ss-minbtn { display: flex; align-items: center; justify-content: center; position: absolute; top: -14px; right: 6px; z-index: 4; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #7a7264; color: #fff; box-shadow: 0 3px 10px rgba(20, 19, 16, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4); cursor: pointer; } body.anan-stack .anan-ss-minbtn svg { width: 17px; height: 17px; } /* The resting pill: brand taupe, centred on the bottom edge between the toolbar circle (left) and the Ana avatar (right). */ body.anan-stack .anan-ss-pill { display: inline-flex; align-items: center; gap: 9px; position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 10000; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: #6e6659; color: #fff; font-family: Montserrat, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(20, 19, 16, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); cursor: pointer; transition: opacity 250ms ease, transform 250ms ease; } body.anan-stack .anan-ss-pill svg { width: 16px; height: 16px; } /* Only one of pill and bar is ever offered: the pill leaves while the bar is open, and both leave when the map retires the search. */ body.anan-stack:not(.anan-ss-min) .anan-ss-pill, body.anan-stack.anan-stack-nosearch .anan-ss-pill { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; visibility: hidden; transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 250ms; } @media (prefers-reduced-motion: reduce) { body.anan-stack .anan-ss-pill, body.anan-stack.anan-stack-ready.anan-ss-min .elementor-element-07a32e7, body.anan-stack:not(.anan-ss-min) .anan-ss-pill, body.anan-stack.anan-stack-nosearch .anan-ss-pill { transition: none; } } /* --- M7. the map section on a phone --------------------------------------- */ /* The desktop block turns the map sideways-on to the screen by capping its height; at 375px wide the SVG is ~760px tall from its width cap alone and needs nothing but clearance for the sticky header when the bar retires. */ body.anan-stack .elementor-element-explore-phuket-map .ana-phuket-map { padding-top: calc(var(--anan-header, 70px) + 24px); padding-bottom: 24px; } /* --- M8. layer 3 no longer pins (2026-08-20) ------------------------------- */ /* The bottom-edge pin was re-measured every time iOS collapsed or expanded its toolbar - innerHeight changes, --anan-l3-top changes, and the section the reader is mid-way through visibly slides up and down. On a phone the honest fix is no pin at all: "Meet Anan" scrolls like a normal section, still covering the pinned layer 2 beneath it (it keeps its z-index and background), and the map follows in normal flow with no dwell of its own - a dwell gap after a static section would show layer 2's copy again, out of sequence. Later in the file than M1/M4, so equal specificity wins. */ body.anan-stack .elementor-element-anmeetsec { position: relative; top: auto; min-height: 0 !important; } body.anan-stack .elementor-element-explore-phuket-map { margin-top: 0 !important; } } /* end PHONE */ /* --- V1. layer 2 background video (2026-08-20) ----------------------------- */ /* The Trusted Agents layer carries the "Pearl of the Andaman" reel as an Elementor container background video. The three standard traps (hit before on the Prive band): 1. Elementor writes the fallback poster with the background: shorthand, which wipes background-color - restore a dark ground so the white copy never floats on nothing while the video loads (or on phones if it declines to autoplay). 2. The gradient scrim is the container's ::before with z-index auto, and .elementor-background-video-container comes later in tree order at z-index 0 - so the scrim paints UNDER the video. Lift scrim above video, content above both. 3. Elementor's generated rule is four classes and enqueued after this file - five classes wins. */ .elementor .elementor-element.elementor-element-2c59eaac.e-con.e-parent { background-color: #1e1b17; } .elementor .elementor-element.elementor-element-2c59eaac.e-con.e-parent > .elementor-background-video-container { z-index: 0; } .elementor .elementor-element.elementor-element-2c59eaac.e-con.e-parent::before { z-index: 1; } .elementor .elementor-element.elementor-element-2c59eaac.e-con.e-parent > .e-con-inner, .elementor .elementor-element.elementor-element-2c59eaac.e-con.e-parent > .elementor-element { position: relative; z-index: 2; }