/* Royal Phuket Marina — Homepage overrides Extends the shared lifestyle pattern to match the reference: cream circular hotspots with concentric rings, portrait carousel, logo-mark header (white over hero -> navy once settled). */ /* ---------- logo fixed in the header: white over hero, navy once settled ---------- ELEMENTOR: Site Logo widget in the Theme Builder header, with a second navy copy stacked and crossfaded by the sticky-header class. */ #logoSlot{display:none} .brandmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(112px,13vw,150px);display:block;font-size:0;line-height:0;pointer-events:auto} .brandmark .sizer{position:relative;width:100%;height:auto;visibility:hidden} .brandmark img.white,.brandmark img.navy{position:absolute;left:0;top:0;width:100%;height:auto;transition:opacity .45s ease} .brandmark img.navy{opacity:0} #topbar.settled .brandmark img.white{opacity:0} #topbar.settled .brandmark img.navy{opacity:1} /* ---------- header nav: hidden over the hero, revealed once settled ---------- */ #topbar .grp{gap:clamp(12px,1.9vw,28px)} #topbar.hero-mode .grp{pointer-events:none} .moburger{display:none;background:none;border:0;padding:0;cursor:pointer;color:inherit} .fsocial{display:flex;gap:14px;margin-top:20px} .fsocial a{width:32px;height:32px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;transition:background .3s ease,border-color .3s ease} .fsocial a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)} .fsocial svg{width:14px;height:14px;fill:rgba(255,255,255,.78)} .flegal{display:flex;gap:clamp(14px,2vw,26px)} /* ---------- hero: big serif wordmark, centred ---------- */ #bigmark{left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;padding:0 var(--gut);font-family:var(--display);font-size:clamp(30px,7.2vw,104px);line-height:1.02;letter-spacing:.055em;text-transform:uppercase;color:#fff} /* static fallback if the canvas cannot paint — homepage master */ #stage{background:var(--navy-900) url('/wp-content/uploads/2026/09/home-hero.jpg') center/cover no-repeat} /* ---------- hotspots: filled cream discs with pulsing rings ---------- */ .hs{width:200px;height:200px;margin:-100px 0 0 -100px;transform:none;display:grid;place-items:center;overflow:visible} .hs::before{display:none} .hs .dot{grid-area:1/1;position:static;transform:none;width:118px;height:118px;border-radius:50%;background:rgba(233,226,214,.96);color:var(--navy-800);display:grid;place-items:center;text-align:center;white-space:normal;text-shadow:none;font-family:var(--ui);font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.7;padding:10px;box-shadow:0 8px 30px rgba(0,20,30,.4);transition:transform .45s cubic-bezier(.2,.8,.25,1),background .3s} .hs:hover .dot{transform:scale(1.09);background:#fff} .hs .sub{display:block;font-weight:400;font-size:8.5px;letter-spacing:.1em;opacity:.6;margin-top:3px} .hs .ring{grid-area:1/1;position:static;margin:0;width:118px;height:118px;border:1px solid rgba(233,226,214,.62);border-radius:50%;animation:ringPulse 3.4s ease-out infinite;pointer-events:none} .hs .ring:nth-of-type(2){animation-delay:1.13s} .hs .ring:nth-of-type(3){animation-delay:2.26s} @keyframes ringPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}} /* ---------- hero type ---------- */ #meet em{display:inline;font-size:.42em;margin:0 0 0 .12em;opacity:.9} #welcome{bottom:auto;top:58%;max-width:min(40ch,34vw)} @media(max-width:1024px){#welcome{max-width:min(44ch,76vw);top:60%}} /* ---------- audience toggle sits bottom-left ---------- */ #toggle{left:var(--gut);transform:none} /* the cue is centred so it never sits under the floating actions column */ #scrollcue{left:50%;right:auto;transform:translateX(-50%);text-align:center} /* ---------- the hero's left lane: menu, headline, toggle in one column ---------- */ /* No max-height: the children are flex:0 0 auto, so a cap cannot shrink them and would only push the stack past the fold. The lane sizes to its content and the menu is gated on viewport HEIGHT below, so the content always fits. */ #leftlane{position:absolute;left:var(--gut);right:auto;bottom:5.4vh;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,3vh,34px);pointer-events:none} #leftlane>*{position:static!important;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin:0;flex:0 0 auto} #leftlane #meet{max-width:none} /* ---------- segment menu (final hero step) ---------- */ #segnav{width:min(252px,30vw);pointer-events:auto;display:flex;flex-direction:column;background:rgba(250,247,241,.92);backdrop-filter:blur(10px);box-shadow:0 20px 60px -22px rgba(12,31,56,.55);text-shadow:none} #segnav a{position:relative;display:flex;align-items:center;min-height:42px;padding:9px 20px 9px 24px;font-family:var(--ui);font-weight:400;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-800);border-bottom:1px solid rgba(18,42,74,.1);transition:background .35s ease,color .35s ease,padding-left .35s ease} #segnav a:last-child{border-bottom:0} #segnav a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brass);transform:scaleY(0);transform-origin:50% 50%;transition:transform .4s cubic-bezier(.22,.7,.2,1)} #segnav a:hover{background:#fff;color:var(--brass-600);padding-left:32px} #segnav a:hover::before{transform:scaleY(1)} #segnav a:first-child span{font-family:var(--display);font-size:21px;letter-spacing:.02em;text-transform:none;color:var(--navy-800)} #segnav a:first-child{min-height:52px} #segnav a:first-child:hover span{color:var(--brass-600)} /* ---------- portrait cards ---------- */ .card figure img{aspect-ratio:3/4} /* ---------- carousel: portrait cards on a scroll-snap rail ---------- ELEMENTOR: this maps to a Loop Carousel widget (3 slides desktop / 2 tablet / 1 mobile, arrows on, drag on). The markup below is the same structure Elementor emits, so the styling transfers directly. */ .railhead{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px} .railnav{display:flex;gap:10px;flex-shrink:0} .railnav button{width:46px;height:46px;border:1px solid var(--line);background:none;border-radius:50%;cursor:pointer;color:var(--navy);display:grid;place-items:center;transition:background .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease} .railnav button:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff} .railnav button:disabled{opacity:.3;cursor:default} .railnav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4} .rail{display:flex;gap:clamp(1.25rem,2.4vw,2.5rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scroll-behavior:smooth;padding:0 var(--gut) 6px;margin:0;list-style:none;scrollbar-width:none;-ms-overflow-style:none} .rail::-webkit-scrollbar{display:none} .rail>.card{scroll-snap-align:start;flex:0 0 calc((min(100vw,var(--maxw)) - 2*var(--gut) - 2*clamp(1.25rem,2.4vw,2.5rem)) / 3);min-width:0} .rail>.card:first-child{scroll-snap-align:start} .railcount{font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:20px;text-align:center} /* ---------- floating action stack: chatbot + WhatsApp + scroll-to-top ---------- The scroll-to-top button already exists on the dev site; landing-page-fabs.js moves it into this column rather than replacing it. Styles are written so an adopted or