/* Theme Name: Eco Divers Description: One-page website for White Sands Lembeh and its dive centre, Eco Divers: a dive-log descent from the surface to 30 m, with PADI courses, a rate calculator, photo galleries and an enquiry form. Author: liquidguru Version: 0.18.2 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: eco-divers */ @font-face{font-family:'Big Shoulders Display';font-weight:700 900;font-display:swap;src:url('assets/fonts/big-shoulders-display.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Instrument Sans';font-weight:400 600;font-display:swap;src:url('assets/fonts/instrument-sans.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'JetBrains Mono';font-weight:400 600;font-display:swap;src:url('assets/fonts/jetbrains-mono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* Layout: one long descent. Page background steps from surface to 30 m; a fixed gauge reads depth as you scroll. */ :root{ --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --f-body:"Instrument Sans",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace; --d0:#d6f0ec;--d1:#9fd6d6;--d2:#2b7f94;--d3:#14516b;--d4:#0a2f47;--d5:#04131d; --ink:#06222b;--paper:#f2fbfb;--signal:#ffd23f; color-scheme:light; } *{box-sizing:border-box} body{margin:0;background:var(--d5);color:var(--paper);font:400 17px/1.6 var(--f-body);padding-inline:0} a{color:inherit} .wrap{max-width:1080px;margin-inline:auto;padding-inline:20px} section{padding-block:96px 88px;background:linear-gradient(var(--from),var(--to) 220px);color:var(--fg);position:relative} .s0{--from:var(--d0);--to:var(--d0);--fg:var(--ink);--ac:var(--ink);--ac-fg:var(--paper);padding-top:28px} .s1{--from:var(--d0);--to:var(--d1);--fg:var(--ink);--ac:var(--ink);--ac-fg:var(--paper)} .s2{--from:var(--d1);--to:var(--d2);--fg:var(--paper);--ac:var(--signal);--ac-fg:var(--ink)} .s3{--from:var(--d2);--to:var(--d3);--fg:var(--paper);--ac:var(--signal);--ac-fg:var(--ink)} .s4{--from:var(--d3);--to:var(--d4);--fg:var(--paper);--ac:var(--signal);--ac-fg:var(--ink)} .s5{--from:var(--d4);--to:var(--d5);--fg:var(--paper);--ac:var(--signal);--ac-fg:var(--ink)} .mono{font:600 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase} h1,h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;line-height:.92;margin:0;text-wrap:balance} h1{font-size:clamp(52px,9vw,124px);letter-spacing:-.01em;overflow-wrap:anywhere} h2{font-size:clamp(40px,7vw,84px)} h3{font:600 20px/1.3 var(--f-body);margin:0 0 6px} p{margin:0 0 1em;max-width:62ch} nav{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:56px} .brand{font:900 26px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;text-decoration:none} .brand small{display:block;font:600 10px var(--f-mono);letter-spacing:.2em;opacity:.7;margin-top:4px} nav ul{list-style:none;display:flex;gap:6px 22px;flex-wrap:wrap;margin:0;padding:0} nav a.l{text-decoration:none;font:600 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent} nav a.l:hover,nav a.l:focus-visible{border-color:currentColor;outline:none} .btn{display:inline-block;background:var(--ac);color:var(--ac-fg);text-decoration:none;font:600 13px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:14px 22px;border:0;cursor:pointer} .btn:hover{filter:brightness(1.08)}.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--ac);outline-offset:3px} .ghost{background:transparent;color:var(--fg);border:2px solid currentColor} .hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end} .hero-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block} .lede{font-size:20px;margin-top:28px} .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;margin-top:40px;border-top:2px solid currentColor} .facts div{padding:16px 16px 16px 0}.facts b{display:block;font:900 44px/1 var(--f-display)} .two>*,.hero-grid>*{min-width:0} .two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:40px} .two img{width:100%;display:block} .stack{display:grid;gap:12px} .log{width:100%;border-collapse:collapse;margin-top:36px;font-size:16px} .log th{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:10px 12px 10px 0;border-bottom:2px solid currentColor;opacity:.85} .log td{padding:16px 12px 16px 0;border-bottom:1px solid color-mix(in srgb,currentColor 30%,transparent);vertical-align:top} .log td:first-child{font:700 26px/1 var(--f-display);text-transform:uppercase;white-space:nowrap} .log em{opacity:.75} .tablewrap{overflow-x:auto} .ph{margin-top:28px;aspect-ratio:21/8;display:grid;place-items:center;text-align:center;padding:16px;border:2px dashed currentColor;background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,currentColor 10%,transparent) 14px 16px)} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:40px} .card{border:2px solid currentColor;padding:22px} .card p{font-size:15px;margin:0} .big{font:900 clamp(30px,5vw,56px)/1 var(--f-display);text-transform:uppercase;word-break:break-word} form{display:grid;gap:14px;margin-top:8px} label{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;display:grid;gap:6px} input,textarea{font:400 17px var(--f-body);padding:12px;background:color-mix(in srgb,var(--paper) 10%,transparent);color:var(--paper);border:1px solid color-mix(in srgb,var(--paper) 50%,transparent);width:100%} .note{font:400 14px var(--f-mono);margin-top:12px;min-height:1.5em} footer{background:var(--d5);color:var(--paper);padding:36px 20px 44px;font:400 13px var(--f-mono);opacity:.9} footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .gauge{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);right:14px;z-index:9;background:var(--ink);color:var(--signal);padding:8px 12px;font:600 12px var(--f-mono);letter-spacing:.1em;text-align:right;min-width:116px;box-shadow:0 0 0 1px rgba(255,255,255,.18)} .gauge b{display:block;font:900 30px/1 var(--f-display);color:var(--paper);letter-spacing:.02em;font-variant-numeric:tabular-nums} .gauge i{display:block;height:3px;background:rgba(255,255,255,.2);margin-top:6px}.gauge i span{display:block;height:100%;width:0;background:var(--signal)} .tag{display:inline-block;background:var(--ac);color:var(--ac-fg);padding:3px 8px;font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase} @media(max-width:820px){.hero-grid,.two{grid-template-columns:1fr}.hero-grid img{aspect-ratio:16/10}section{padding-block:72px 64px}nav{padding-bottom:36px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}} /* Smooth only once the visitor has touched the page (main.js adds .smooth); landing on a link or after sending the form is an instant jump. */ html.smooth{scroll-behavior:smooth} /* ---- Eco Divers theme additions ---- */ .skip{position:absolute;left:-999px;top:0;background:var(--signal);color:var(--ink);padding:10px 14px;z-index:20}.skip:focus{left:8px;top:8px} .brand{display:flex;align-items:center;gap:14px} .brand img{width:64px;height:64px;display:block} .brand span{display:block} .hero-grid figure{margin:0} .hero-grid figure img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block} figcaption.credit{font:600 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-top:8px;opacity:.8} .species{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:36px;padding:0;list-style:none} .species li{border-top:2px solid currentColor;padding-top:10px} .species b{display:block;font:700 26px/1.05 var(--f-display);text-transform:uppercase} .species small{display:block;opacity:.8;font-size:14px;margin-top:4px} .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:36px 0 0;padding:0;list-style:none} .gallery li{aspect-ratio:1;overflow:hidden;background:rgba(0,0,0,.25)} .gallery button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in} .gallery button:focus-visible{outline:3px solid var(--ac);outline-offset:-3px} .gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} .gallery button:hover img{transform:scale(1.05)} .hero-photo{margin-top:32px;aspect-ratio:21/8;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:cover;display:block} dialog#lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:var(--paper)} dialog#lb::backdrop{background:rgba(2,10,16,.94)} .lb-in{display:grid;grid-template-rows:1fr auto;height:100%;padding:16px;gap:10px} .lb-in img{max-width:100%;max-height:100%;margin:auto;display:block;object-fit:contain;min-height:0} .lb-in p{margin:0;text-align:center;font:600 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase} .lb-b{position:absolute;background:var(--ink);color:var(--paper);border:1px solid rgba(255,255,255,.3);width:48px;height:48px;font:600 22px var(--f-mono);cursor:pointer} .lb-b:hover,.lb-b:focus-visible{background:var(--signal);color:var(--ink);outline:none} .lb-x{top:14px;right:14px}.lb-p{left:12px;top:50%}.lb-n{right:12px;top:50%} .ok{border:2px solid var(--signal);padding:16px;font-weight:600} .err{color:#ffb4a8;font-weight:600} .hp{position:absolute;left:-9999px;height:0;overflow:hidden} .aerial{margin-top:28px}.aerial img{width:100%;display:block} @media(max-width:820px){.brand img{width:52px;height:52px}.hero-photo{aspect-ratio:16/9}.gallery{grid-template-columns:repeat(2,1fr)}} /* Images carry width/height attributes for layout stability; let CSS set the height. */ .two img,.aerial img,.hero-grid figure img{height:auto} /* Hero photo slideshow: sharp photo, rounded corners, slow crossfade. */ .hero-grid .slides{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:36px;box-shadow:0 14px 34px rgba(6,34,43,.22)} .hero-grid .slides img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity 1.6s ease} .hero-grid .slides img.on{opacity:1} @media(prefers-reduced-motion:reduce){.hero-grid .slides img{transition:none}} .dc{display:grid;grid-template-columns:130px 1fr;gap:24px;align-items:start;margin-top:24px} .dc img{width:130px;height:auto;display:block;margin-top:6px} .dc p{margin:0} select,input[type=date],input[type=number]{font:400 17px var(--f-body);padding:12px;background:color-mix(in srgb,var(--paper) 10%,transparent);color:var(--paper);border:1px solid color-mix(in srgb,var(--paper) 50%,transparent);width:100%;color-scheme:dark} select option{color:#04131d} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .row3{display:grid;grid-template-columns:1fr 1fr .7fr;gap:14px} .row2>*,.row3>*{min-width:0} @media(max-width:820px){.dc{grid-template-columns:1fr;gap:10px}.row2,.row3{grid-template-columns:1fr 1fr}.row3 label:last-child{grid-column:1/-1}} @media(max-width:420px){.row2{grid-template-columns:1fr}} /* Date and number boxes have a built-in minimum width; let them shrink inside the grid. */ input,select,textarea{min-width:0;max-width:100%} input[type=date]{-webkit-appearance:none;appearance:none;min-height:50px} /* Availability checker (Freetobook widget, loaded when the booking section is near). */ .avail{margin-top:32px;border:2px solid var(--ac);padding:22px;max-width:780px} .avail h3,h3.or{font:700 28px/1 var(--f-display);text-transform:uppercase;margin:0 0 10px} .avail p{margin:0 0 16px} .avail .ftb-widget{min-height:76px} h3.or{margin:44px 0 0} .avail .ftb-bookingWidget__inner{background-color:var(--d4)!important} /* All photos get rounded corners. */ :root{--r:28px} .stack img,.aerial img{border-radius:var(--r)} .hero-photo{border-radius:var(--r)} .lb-in img{border-radius:18px} /* Gallery box: big photo with a slow zoom and crossfade, thumbnails beside it. */ .gbox{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-top:36px;align-items:stretch} .gstage{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:rgba(0,0,0,.3);box-shadow:0 14px 34px rgba(2,10,16,.3)} .gstage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;display:block} .gstage>img.on{opacity:1;animation:gzoom 9s ease-out both} @keyframes gzoom{from{transform:scale(1)}to{transform:scale(1.07)}} .g-open{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;cursor:zoom-in;padding:0} .g-open:focus-visible{outline:3px solid var(--ac);outline-offset:-6px;border-radius:var(--r)} .g-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(4,19,29,.55);color:var(--paper);font:600 24px/1 var(--f-mono);cursor:pointer;backdrop-filter:blur(4px)} .g-nav:hover,.g-nav:focus-visible{background:var(--signal);color:var(--ink);outline:none} .g-prev{left:14px}.g-next{right:14px} .gcap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 18px 14px;display:flex;justify-content:space-between;gap:12px;font:600 12px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:linear-gradient(transparent,rgba(2,10,16,.75));pointer-events:none} .gcap-n{white-space:nowrap;font-variant-numeric:tabular-nums} .gthumbs-wrap{position:relative;min-height:0} .gthumbs{position:absolute;inset:0;margin:0;padding:2px 6px 2px 2px;list-style:none;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;scrollbar-width:thin;scrollbar-color:var(--signal) transparent} .gthumbs button{all:unset;display:block;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:pointer;opacity:.62;transition:opacity .25s,transform .25s;box-sizing:border-box} .gthumbs button img{width:100%;height:100%;object-fit:cover;display:block} .gthumbs button:hover{opacity:1;transform:translateY(-2px)} .gthumbs button.cur{opacity:1;outline:3px solid var(--signal);outline-offset:-3px} .gthumbs button:focus-visible{opacity:1;outline:3px solid var(--paper);outline-offset:-3px} @media(max-width:820px){ .gbox{grid-template-columns:minmax(0,1fr)} .gthumbs-wrap{min-width:0} .gthumbs-wrap{position:static} .gthumbs{position:static;display:flex;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px} .gthumbs li{flex:0 0 76px} .gcap{font-size:11px} } @media(prefers-reduced-motion:reduce){.gstage>img{transition:none}.gstage>img.on{animation:none}} /* Opening paragraph carries the Eco Divers logo inline. */ .inline-logo{height:2.1em;width:auto;vertical-align:-.75em;margin:0 .1em} /* Show whole photos in the gallery box (the photographer's mark sits in the corner) on a black stage. */ .gstage{background:#02080c} .gstage>img{object-fit:contain} .gstage>img.on{animation-name:gzoom2} @keyframes gzoom2{from{transform:scale(1)}to{transform:scale(1.035)}} /* Hero: keep the bottom of the photo, where the mark is. */ .hero-grid .slides img{object-position:50% 100%} .hero-photo img{object-position:50% 72%} .hero-grid .inline-logo{display:inline-block;width:auto;height:2.5em;aspect-ratio:auto;object-fit:contain;vertical-align:-.75em;margin:0 .1em} .hero-photo{aspect-ratio:16/9}.hero-photo img{object-position:50% 100%} @media(max-width:820px){.hero-photo{aspect-ratio:4/3}} /* Depth gauge doubles as the back-to-top button: hover shows "Return to the surface". */ .gauge{display:grid;box-sizing:border-box;width:120px;border:0;cursor:pointer;font-family:var(--f-mono);appearance:none} .gauge>span{grid-area:1/1;transition:opacity .2s ease} .gauge em{font-style:normal} .gauge.at-top{cursor:default} .gauge.at-top em{visibility:hidden} .g-up{opacity:0;align-self:center;justify-self:center;text-align:center;font:600 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .gauge:not(.at-top):focus-visible{background:var(--signal);outline:none} .gauge:not(.at-top):focus-visible .g-depth{opacity:0} .gauge:not(.at-top):focus-visible .g-up{opacity:1} @media(hover:hover){ .gauge:not(.at-top):hover{background:var(--signal);outline:none} .gauge:not(.at-top):hover .g-depth{opacity:0} .gauge:not(.at-top):hover .g-up{opacity:1} } .gauge:focus-visible{box-shadow:0 0 0 3px var(--paper)} /* Touch screens have no hover, so away from the top the gauge shows a static "Return to the surface" line under the depth. (Not animated: phones with "remove animations" on would otherwise never see it.) */ @media(hover:none){ .gauge:not(.at-top){padding:7px 10px} .gauge:not(.at-top)>span{grid-area:auto} .gauge:not(.at-top) .g-depth{font-size:0} .gauge:not(.at-top) .g-up{order:-1;opacity:1;color:var(--signal);font-size:11px;line-height:1;letter-spacing:.1em;text-align:right;justify-self:end;margin-bottom:5px;white-space:nowrap} .gauge:not(.at-top) .g-up .g-long{display:none} .gauge{transition:opacity .15s ease} .gauge:not(.at-top):active{opacity:.55} } @media(prefers-reduced-motion:reduce){.gauge>span{transition:none}} /* Keep the gauge inside the visible screen even when the browser's toolbar sits at the bottom (Chrome on Android). 100svh is the height with the toolbars showing. */ @supports (height:100svh){ .gauge{bottom:auto;top:calc(100svh - 14px - env(safe-area-inset-bottom,0px));transform:translateY(-100%)} } /* ---- Sticky bar: clear over the hero, slim dark bar once you scroll ---- */ .bar{position:fixed;top:0;left:0;right:0;z-index:30;color:var(--ink);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,backdrop-filter .25s} .bar-in{max-width:1080px;margin-inline:auto;padding:14px 20px;display:flex;align-items:center;gap:18px;transition:padding .25s ease} .bar nav{padding:0;flex-wrap:nowrap;margin-left:auto;display:block} .bar nav ul{gap:4px 22px;flex-wrap:nowrap} .bar nav a.l{white-space:nowrap;padding:10px 0;border-bottom:2px solid transparent} .bar nav a.l[aria-current="true"]{border-bottom-color:currentColor} .bar .brand{color:inherit;gap:12px} .bar .brand img{width:48px;height:48px;transition:width .25s,height .25s} .bar .brand small{opacity:.75} .bar-book{padding:10px 18px;font-size:12px;background:var(--ink);color:var(--paper);white-space:nowrap} .bar-menu{display:none;align-items:center;gap:10px;border:2px solid currentColor;background:transparent;color:inherit;font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer} .bar-menu:focus-visible,.bar a:focus-visible{outline:3px solid var(--signal);outline-offset:3px} .bm-i{display:grid;gap:4px;width:16px}.bm-i i{display:block;height:2px;background:currentColor;transition:transform .2s,opacity .2s} .bar.open .bm-i i:first-child{transform:translateY(3px) rotate(45deg)}.bar.open .bm-i i:last-child{transform:translateY(-3px) rotate(-45deg)} .menu-book{display:none} .menu-social{display:none} .bar.scrolled,.bar.open{background:rgba(4,19,29,.94);color:var(--paper);box-shadow:0 2px 18px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .bar.scrolled .bar-in{padding-block:8px} .bar.scrolled .brand img{width:40px;height:40px} .bar .logo-light{display:none} .bar.scrolled .logo-light,.bar.open .logo-light{display:block} .bar.scrolled .logo-dark,.bar.open .logo-dark{display:none} .bar.scrolled .brand small{display:none} .bar.scrolled .bar-book,.bar.open .bar-book{background:var(--signal);color:var(--ink)} /* The hero now starts below the fixed bar, and anchors stop short of it. */ .s0{padding-top:calc(146px + var(--nh,0px))} section[id]{scroll-margin-top:104px} @media(max-width:1040px){ .bar-in{gap:12px} .bar-menu{display:inline-flex;margin-left:auto} .bar-book{display:none} .bar nav{position:absolute;top:100%;left:0;right:0;margin:0;background:rgba(4,19,29,.97);color:var(--paper);display:none;padding:6px 20px 22px;box-shadow:0 18px 30px rgba(0,0,0,.35)} .bar.open nav{display:block} .bar nav ul{flex-direction:column;gap:0;align-items:stretch} .bar nav a.l{display:block;font:900 30px/1 var(--f-display);letter-spacing:.01em;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)} .bar nav a.l[aria-current="true"]{color:var(--signal);border-bottom-color:rgba(255,255,255,.14)} .menu-book{display:block;padding-top:18px}.menu-book .btn{display:block;text-align:center;background:var(--signal);color:var(--ink)} .s0{padding-top:calc(92px + var(--nh,0px))} section[id]{scroll-margin-top:64px} .bar-social{display:none} .menu-social{display:block;padding-top:20px} .bar nav ul.social{flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center} .bar .brand span{font-size:22px} } @media(max-width:380px){.bar .brand small{display:none}} @media(prefers-reduced-motion:reduce){.bar,.bar-in,.bar .brand img,.bm-i i{transition:none}} .bar.open{background:#04131d} @media(max-width:900px){.bar nav{background:#04131d}} /* FAQ: native details/summary, no script. */ .s-flat{--from:var(--d4);--to:var(--d4)} section[id="gallery"],#gallery{scroll-margin-top:90px} .faq{margin-top:34px;max-width:820px;border-top:2px solid color-mix(in srgb,currentColor 45%,transparent)} .faq-item{border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent)} .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font:700 26px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";flex:none;width:34px;height:34px;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font:600 20px/1 var(--f-mono);transition:transform .25s ease,background-color .2s,color .2s} .faq-item[open] summary::after{content:"\2212";background:var(--signal);color:var(--ink);border-color:var(--signal)} .faq-item summary:hover{color:var(--signal)} .faq-item summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px} .faq-a{padding:0 54px 20px 0} .faq-a p{margin:0 0 .9em;max-width:64ch} .faq-a a{text-decoration:underline;text-underline-offset:3px} @media(max-width:820px){.faq-item summary{font-size:22px}.faq-a{padding-right:0}} @media(prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}} footer a{text-decoration:underline;text-underline-offset:3px}footer a:hover,footer a:focus-visible{color:var(--signal)} /* Resort gallery: same box, but bright landscape photos fill the frame. */ .stay-copy{columns:2;column-gap:48px;margin-top:28px} .stay-copy p{break-inside:avoid;margin:0 0 1em;max-width:none} .gbox--cover .gstage{aspect-ratio:4/3;background:rgba(0,0,0,.12)} .gbox--cover .gstage>img{object-fit:cover} .gbox--cover .gthumbs{grid-template-columns:repeat(2,1fr)} @media(max-width:820px){.stay-copy{columns:1}.gbox--cover .gthumbs li{flex:0 0 96px}} /* Safari-safe sizing: boxes that hold only overlaid images get their height from an in-flow ::before (the padding-top trick), not from aspect-ratio, which some Safari versions ignore for such boxes. */ .hero-grid .slides{aspect-ratio:auto} .hero-grid .slides::before{content:"";display:block;padding-top:125%} .gstage{aspect-ratio:auto} .gstage::before{content:"";display:block;padding-top:100%} .gbox--cover .gstage{aspect-ratio:auto} .gbox--cover .gstage::before{padding-top:75%} .gthumbs button{aspect-ratio:auto;position:relative} .gthumbs button::before{content:"";display:block;padding-top:100%} .gthumbs button img{position:absolute;inset:0;width:100%;height:100%} .hero-photo{aspect-ratio:auto;position:relative} .hero-photo::before{content:"";display:block;padding-top:56.25%} .hero-photo img{position:absolute;inset:0} @media(max-width:820px){.hero-photo{aspect-ratio:auto}.hero-photo::before{padding-top:75%}} /* The dive photos carry the photographer's mark near the edge: crossfade only, no zoom that could crop it. */ .gbox:not(.gbox--cover) .gstage>img.on{animation:none} .sub-h{margin-top:56px;font-size:clamp(22px,3vw,28px)} .sub-h+p{margin-top:12px} .courses summary small{display:block;margin-top:6px;font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.8} .courses{max-width:820px} /* Rates: currency tabs, calculator, price list. */ .s-rates{--from:var(--d3);--to:var(--d3)} .rt{margin-top:34px} .rt [hidden]{display:none!important} .rt-top{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between} .rt-cur{display:inline-flex;border:2px solid currentColor;border-radius:999px;padding:3px} .rt-cur button{font:600 13px var(--f-mono);letter-spacing:.12em;color:inherit;background:none;border:0;border-radius:999px;padding:9px 20px;cursor:pointer} .rt-cur button[aria-pressed="true"]{background:var(--signal);color:var(--ink)} .rt-cur button:focus-visible{outline:3px solid var(--signal);outline-offset:2px} .rt-pdfs{margin:0;font-size:15px} .rt-pdfs a{text-underline-offset:3px} .rt-expired{margin:16px 0 0;padding:12px 16px;border:2px solid var(--signal);color:var(--signal)} .rt-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;margin-top:26px;align-items:start} .rt-form fieldset{border:0;padding:0;margin:0 0 22px} .rt-form legend{font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal);padding:0;margin-bottom:10px} .rt-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .rt-opts3{grid-template-columns:repeat(3,1fr)} .rt-opt{display:block;cursor:pointer;position:relative} .rt-opt input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none} .rt-opt>span{display:block;height:100%;border:2px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:14px;padding:12px 14px;transition:border-color .15s,background-color .15s} .rt-opt b{display:block;font:700 20px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em} .rt-opt small{display:block;font-size:13px;opacity:.85;margin-top:4px} .rt-opt em,.rt-form label em,.rt-chk em{font:500 13px var(--f-mono);font-style:normal;color:var(--signal)} .rt-opt em{display:block;margin-top:6px} .rt-opt input:checked+span{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 14%,transparent)} .rt-opt input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px} .rt-opt:hover>span{border-color:var(--signal)} .rt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:8px} .rt-form label{font-size:15px} .rt-row label{display:flex;flex-direction:column;gap:6px} .rt-form select{font:500 16px var(--f-body);color:var(--ink);background:var(--paper);border:2px solid transparent;border-radius:10px;padding:10px 12px;width:100%} .rt-form select:focus-visible{outline:3px solid var(--signal);outline-offset:2px} .rt-chk{display:flex;gap:12px;align-items:center;margin-bottom:12px;cursor:pointer} .rt-chk input{width:22px;height:22px;accent-color:var(--signal);flex:none} .rt-note{font-size:13px;opacity:.8;margin:6px 0 16px;max-width:64ch} .rt-sum{position:sticky;top:84px;background:rgba(4,19,29,.55);border:2px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:18px;padding:22px} .rt-sum h3{margin:0 0 4px;font:700 26px/1 var(--f-display);text-transform:uppercase} .rt-who{margin:0 0 14px;font-size:15px;opacity:.9} .rt-lines{list-style:none;margin:0;padding:0;border-top:1px solid color-mix(in srgb,currentColor 30%,transparent)} .rt-lines li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent);font-size:15px} .rt-lines b{font:600 14px var(--f-mono);white-space:nowrap} .rt-total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;font:700 22px var(--f-display);text-transform:uppercase} .rt-total b{font:700 30px var(--f-display);color:var(--signal)} .rt-per{margin:2px 0 0;font-size:14px;opacity:.85;min-height:1.2em} .rt-warn{margin:12px 0 0;font-size:14px;color:var(--signal)} .rt-send{margin-top:16px;text-align:center;width:100%} .rt-fine{font-size:12px;opacity:.75;margin:14px 0 0} .rt-list{margin-top:30px;max-width:none} .rt-list>summary{font-size:22px} .rt-pl h4,.rt-list h4{font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:22px 0 6px} .rt-pl dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:0 20px;max-width:640px} .rt-pl dt,.rt-pl dd{margin:0;padding:7px 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:15px} .rt-pl dd{font:500 14px var(--f-mono);text-align:right} @media(max-width:860px){.rt-grid{grid-template-columns:1fr}.rt-sum{position:static}} @media(max-width:520px){.rt-opts3{grid-template-columns:1fr}.rt-opts{grid-template-columns:1fr}} .rt-form select{-webkit-appearance:none;appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2306222b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px;color:var(--ink)} .rt-row label,.rt-form label{text-transform:none;letter-spacing:0;font:500 15px var(--f-body)} /* Course prices inside the course panels. */ .c-curbar{display:flex;align-items:center;gap:14px;margin-top:22px;font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase} .c-price{list-style:none;margin:4px 0 6px;padding:0;max-width:420px} .c-price li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:15px} .c-price b{font:600 15px var(--f-mono);color:var(--signal)} /* Click-to-load resort video. */ .vid{position:relative;margin-top:28px;border-radius:var(--r);overflow:hidden;background:#04131d;box-shadow:0 14px 34px rgba(2,10,16,.3)} .vid::before{content:"";display:block;padding-top:56.25%} .vid-play,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vid-play{display:block;color:#fff;text-decoration:none} .vid-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .vid-play:hover img{transform:scale(1.03)} .vid-play:focus-visible{outline:3px solid var(--signal);outline-offset:-3px} .vid-btn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--signal);box-shadow:0 6px 24px rgba(0,0,0,.4)} .vid-btn::after{content:"";position:absolute;left:33px;top:25px;border-left:26px solid var(--ink);border-top:17px solid transparent;border-bottom:17px solid transparent} .vid-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;background:linear-gradient(transparent,rgba(2,10,16,.8));font:700 20px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em} .vid-cap small{display:block;margin-top:5px;font:500 12px var(--f-mono);letter-spacing:.08em;opacity:.85} @media(max-width:520px){.vid-btn{width:64px;height:64px;margin:-32px 0 0 -32px}.vid-btn::after{left:25px;top:19px;border-left-width:20px;border-top-width:13px;border-bottom-width:13px}} /* Top bar: links and Book now share one centre line on desktop. */ @media(min-width:1041px){ .bar nav ul{align-items:center} .bar nav a.l{display:inline-flex;align-items:center;line-height:18px;height:40px;padding-block:0;box-sizing:border-box} } /* Social icons (hero and footer). */ .social{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0} .social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid currentColor;color:inherit;transition:background-color .2s,color .2s,border-color .2s} .social a:hover,.social a:focus-visible{background:var(--signal);border-color:var(--signal);color:var(--ink)} .social a:focus-visible{outline:3px solid var(--signal);outline-offset:3px} .social--foot{flex-basis:100%;margin-bottom:6px} /* Second sticky strip under the top bar: social icons, shrinking as the page scrolls. */ .bar-social-in{max-width:1080px;margin-inline:auto;padding:0 20px 8px;display:flex;justify-content:flex-end;align-items:center;gap:12px;transition:padding .25s ease} .bar-social-l{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8;transition:opacity .2s} .social--bar{gap:8px;flex-wrap:nowrap} .social--bar a{width:32px;height:32px;border-width:1.5px;transition:width .25s ease,height .25s ease} .social--bar svg{width:16px;height:16px;transition:width .25s ease,height .25s ease} .bar.scrolled .bar-social-in{padding-bottom:5px} .bar.scrolled .bar-social-l{display:none} .bar.scrolled .social--bar a{width:24px;height:24px} .bar.scrolled .social--bar svg{width:12px;height:12px} @media(prefers-reduced-motion:reduce){.bar-social-in,.social--bar a,.social--bar svg{transition:none}} /* Optional notice at the top of the page (set in the admin: Site Text > Notice banner). */ .notice{position:absolute;top:0;left:0;right:0;z-index:31;background:var(--signal);color:var(--ink);display:flex;justify-content:center;align-items:center;padding:9px 48px 9px 20px;font-size:15px;line-height:1.35} .notice[hidden]{display:none} .notice p{margin:0;text-align:center} .notice a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .notice-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:inherit;font-size:26px;line-height:1;cursor:pointer;border-radius:50%} .notice-x:hover,.notice-x:focus-visible{background:rgba(0,0,0,.12)} .notice-x:focus-visible{outline:3px solid var(--ink);outline-offset:1px} /* Raja Ampat section: text beside a photo mosaic that adapts to 1 to 6 photos (the first is the largest). */ .raja-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center} .raja-grid--text{grid-template-columns:1fr;max-width:760px} .raja-copy .cta{margin-top:28px} .raja-photos{display:grid;grid-template-columns:1.15fr 1fr;grid-auto-rows:clamp(110px,16vw,176px);gap:10px} .raja-photos img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r);box-shadow:0 10px 26px rgba(2,10,16,.28)} /* nth-of-type, not nth-child: speed plugins wrap images in