{"id":17,"date":"2026-06-26T12:00:00","date_gmt":"2026-06-26T12:00:00","guid":{"rendered":"https:\/\/www.shangri-la-boutique-oregon.com\/?page_id=17"},"modified":"2026-07-24T18:09:19","modified_gmt":"2026-07-24T18:09:19","slug":"coastal","status":"publish","type":"page","link":"https:\/\/review.sygnifistaging.com\/?page_id=17","title":{"rendered":"Coastal"},"content":{"rendered":"<section class=\"sg-hero sg-hero--compact\">\n<p class=\"sg-kicker\">Gallery<\/p>\n<h1>Coastal<\/h1>\n<p class=\"sg-hero-text\">Browse the coastal collection gallery.<\/p>\n<\/section>\n<section class=\"sg-section sg-section--white\">\n<div class=\"sg-container\">\n<p class=\"sg-eyebrow\">Relaxed coastal style<\/p>\n<h2>Beach-inspired decor with a light, breezy feel.<\/h2>\n<p>Browse coastal accents, seaside-inspired decor, and distinctive giftware that bring a relaxed touch to any space. The collection blends playful details with easygoing style.<\/p>\n<\/p>\n<\/div>\n<\/section>\n<div class=\"sg-gallery-grid sg-container\">\n<figure class=\"sg-gallery-item\"><a href=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/32fd1379944ce4e100ffdf7dc62006f5-scaled.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/32fd1379944ce4e100ffdf7dc62006f5-scaled.jpg\" alt=\"Coastal gallery image\"><\/a><\/figure>\n<figure class=\"sg-gallery-item\"><a href=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/8edc863785316830fe5226bb8aa3afdd-scaled.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/8edc863785316830fe5226bb8aa3afdd-scaled.jpg\" alt=\"Coastal gallery image\"><\/a><\/figure>\n<figure class=\"sg-gallery-item\"><a href=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/85ae6361e1394bf0107ca9edae6b6805-scaled.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/85ae6361e1394bf0107ca9edae6b6805-scaled.jpg\" alt=\"Coastal gallery image\"><\/a><\/figure>\n<figure class=\"sg-gallery-item\"><a href=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/a8a6624295c01ab8b812ee9462ab86e5-scaled.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/a8a6624295c01ab8b812ee9462ab86e5-scaled.jpg\" alt=\"Coastal gallery image\"><\/a><\/figure>\n<figure class=\"sg-gallery-item\"><a href=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/cdcd3ce3639b28a731f1ba71a9979dff.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/review.sygnifistaging.com\/wp-content\/uploads\/2026\/06\/cdcd3ce3639b28a731f1ba71a9979dff.jpg\" alt=\"Coastal gallery image\"><\/a><\/figure>\n<\/div>\n\n\n<style data-wp-block-html=\"css\">\r\n\/* ---------- Gallery grid entrance animation ---------- *\/\r\n.sg-gallery-item {\r\n  opacity: 0;\r\n  transform: translateY(24px);\r\n  transition: opacity 0.6s ease, transform 0.6s ease;\r\n}\r\n.sg-gallery-item.sg-item-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n.sg-gallery-item img {\r\n  transition: transform 0.4s ease, filter 0.4s ease;\r\n  cursor: pointer;\r\n}\r\n.sg-gallery-item a:hover img {\r\n  transform: scale(1.04);\r\n  filter: brightness(1.05);\r\n}\r\n\r\n\/* ---------- Lightbox overlay ---------- *\/\r\n.sg-lightbox-overlay {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(0, 0, 0, 0.9);\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 9999;\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease;\r\n}\r\n.sg-lightbox-overlay.sg-lightbox-open {\r\n  display: flex;\r\n  opacity: 1;\r\n}\r\n.sg-lightbox-content {\r\n  position: relative;\r\n  max-width: 90vw;\r\n  max-height: 90vh;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n}\r\n.sg-lightbox-content img {\r\n  max-width: 90vw;\r\n  max-height: 90vh;\r\n  object-fit: contain;\r\n  border-radius: 4px;\r\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\r\n  opacity: 0;\r\n  transform: scale(0.92);\r\n  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),\r\n              opacity 0.35s ease;\r\n}\r\n.sg-lightbox-overlay.sg-lightbox-open .sg-lightbox-content img.sg-img-visible {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n}\r\n\r\n\/* Directional slide classes applied just before swapping src *\/\r\n.sg-lightbox-content img.sg-slide-out-left {\r\n  opacity: 0;\r\n  transform: translateX(-60px) scale(0.96);\r\n}\r\n.sg-lightbox-content img.sg-slide-out-right {\r\n  opacity: 0;\r\n  transform: translateX(60px) scale(0.96);\r\n}\r\n.sg-lightbox-content img.sg-slide-in-left {\r\n  transform: translateX(-60px) scale(0.96);\r\n  opacity: 0;\r\n  transition: none;\r\n}\r\n.sg-lightbox-content img.sg-slide-in-right {\r\n  transform: translateX(60px) scale(0.96);\r\n  opacity: 0;\r\n  transition: none;\r\n}\r\n\r\n\/* Loading spinner *\/\r\n.sg-lightbox-spinner {\r\n  position: absolute;\r\n  width: 40px;\r\n  height: 40px;\r\n  border: 3px solid rgba(255, 255, 255, 0.2);\r\n  border-top-color: #fff;\r\n  border-radius: 50%;\r\n  animation: sg-spin 0.8s linear infinite;\r\n  opacity: 0;\r\n  transition: opacity 0.2s ease;\r\n  pointer-events: none;\r\n}\r\n.sg-lightbox-spinner.sg-spinner-visible {\r\n  opacity: 1;\r\n}\r\n@keyframes sg-spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n\/* Buttons *\/\r\n.sg-lightbox-close,\r\n.sg-lightbox-prev,\r\n.sg-lightbox-next {\r\n  position: fixed;\r\n  background: rgba(255, 255, 255, 0.1);\r\n  border: none;\r\n  color: #fff;\r\n  font-size: 22px;\r\n  width: 44px;\r\n  height: 44px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background 0.2s ease, transform 0.2s ease;\r\n  z-index: 10000;\r\n  opacity: 0;\r\n}\r\n.sg-lightbox-overlay.sg-lightbox-open .sg-lightbox-close,\r\n.sg-lightbox-overlay.sg-lightbox-open .sg-lightbox-prev,\r\n.sg-lightbox-overlay.sg-lightbox-open .sg-lightbox-next {\r\n  animation: sg-fade-in-btn 0.4s ease forwards;\r\n  animation-delay: 0.1s;\r\n}\r\n@keyframes sg-fade-in-btn {\r\n  to { opacity: 1; }\r\n}\r\n.sg-lightbox-close:hover {\r\n  background: rgba(255, 255, 255, 0.25);\r\n  transform: rotate(90deg);\r\n}\r\n.sg-lightbox-prev:hover {\r\n  background: rgba(255, 255, 255, 0.25);\r\n  transform: translateY(-50%) scale(1.15) translateX(-3px);\r\n}\r\n.sg-lightbox-next:hover {\r\n  background: rgba(255, 255, 255, 0.25);\r\n  transform: translateY(-50%) scale(1.15) translateX(3px);\r\n}\r\n.sg-lightbox-close {\r\n  top: 20px;\r\n  right: 20px;\r\n}\r\n.sg-lightbox-prev {\r\n  left: 20px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.sg-lightbox-next {\r\n  right: 20px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n.sg-lightbox-counter {\r\n  position: fixed;\r\n  bottom: 20px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  color: #fff;\r\n  font-size: 14px;\r\n  opacity: 0;\r\n  z-index: 10000;\r\n  transition: opacity 0.3s ease 0.2s;\r\n}\r\n.sg-lightbox-overlay.sg-lightbox-open .sg-lightbox-counter {\r\n  opacity: 0.8;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .sg-lightbox-prev, .sg-lightbox-next, .sg-lightbox-close {\r\n    width: 38px;\r\n    height: 38px;\r\n    font-size: 18px;\r\n  }\r\n  .sg-lightbox-prev { left: 8px; }\r\n  .sg-lightbox-next { right: 8px; }\r\n  .sg-lightbox-close { top: 10px; right: 10px; }\r\n}\r\n<\/style>\r\n\r\n<script data-wp-block-html=\"js\">\r\n(function () {\r\n  var galleryLinks = Array.prototype.slice.call(\r\n    document.querySelectorAll('.sg-gallery-item a')\r\n  );\r\n\r\n  if (!galleryLinks.length) return;\r\n\r\n  var currentIndex = 0;\r\n\r\n  \/* ---------- Staggered entrance animation for grid items ---------- *\/\r\n  var items = document.querySelectorAll('.sg-gallery-item');\r\n  if ('IntersectionObserver' in window) {\r\n    var observer = new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (entry) {\r\n        if (entry.isIntersecting) {\r\n          var el = entry.target;\r\n          var idx = Array.prototype.indexOf.call(items, el);\r\n          setTimeout(function () {\r\n            el.classList.add('sg-item-visible');\r\n          }, (idx % 8) * 60); \/\/ stagger, cycles every 8 items\r\n          observer.unobserve(el);\r\n        }\r\n      });\r\n    }, { threshold: 0.1 });\r\n    items.forEach(function (el) { observer.observe(el); });\r\n  } else {\r\n    items.forEach(function (el) { el.classList.add('sg-item-visible'); });\r\n  }\r\n\r\n  \/* ---------- Lightbox markup ---------- *\/\r\n  var overlay = document.createElement('div');\r\n  overlay.className = 'sg-lightbox-overlay';\r\n  overlay.innerHTML =\r\n    '<button class=\"sg-lightbox-close\" aria-label=\"Close\">&times;<\/button>' +\r\n    '<button class=\"sg-lightbox-prev\" aria-label=\"Previous\">&#10094;<\/button>' +\r\n    '<div class=\"sg-lightbox-content\">' +\r\n      '<div class=\"sg-lightbox-spinner\"><\/div>' +\r\n      '<img decoding=\"async\" src=\"\" alt=\"\">' +\r\n    '<\/div>' +\r\n    '<button class=\"sg-lightbox-next\" aria-label=\"Next\">&#10095;<\/button>' +\r\n    '<div class=\"sg-lightbox-counter\"><\/div>';\r\n  document.body.appendChild(overlay);\r\n\r\n  var imgEl = overlay.querySelector('img');\r\n  var spinnerEl = overlay.querySelector('.sg-lightbox-spinner');\r\n  var counterEl = overlay.querySelector('.sg-lightbox-counter');\r\n  var closeBtn = overlay.querySelector('.sg-lightbox-close');\r\n  var prevBtn = overlay.querySelector('.sg-lightbox-prev');\r\n  var nextBtn = overlay.querySelector('.sg-lightbox-next');\r\n\r\n  var isAnimating = false;\r\n\r\n  function loadImage(index, direction) {\r\n    \/\/ direction: 'left' (next) | 'right' (prev) | null (first open)\r\n    var link = galleryLinks[index];\r\n    var fullSrc = link.getAttribute('href');\r\n    var altText = link.querySelector('img')\r\n      ? link.querySelector('img').getAttribute('alt')\r\n      : '';\r\n\r\n    spinnerEl.classList.add('sg-spinner-visible');\r\n\r\n    var preloader = new Image();\r\n    preloader.onload = function () {\r\n      imgEl.setAttribute('src', fullSrc);\r\n      imgEl.setAttribute('alt', altText || '');\r\n\r\n      if (direction === 'left') {\r\n        imgEl.classList.remove('sg-slide-in-right', 'sg-img-visible');\r\n        imgEl.classList.add('sg-slide-in-left');\r\n        \/\/ force reflow so the transition triggers\r\n        void imgEl.offsetWidth;\r\n        imgEl.classList.remove('sg-slide-in-left');\r\n        imgEl.style.transition = '';\r\n        requestAnimationFrame(function () {\r\n          imgEl.classList.add('sg-img-visible');\r\n        });\r\n      } else if (direction === 'right') {\r\n        imgEl.classList.remove('sg-slide-in-left', 'sg-img-visible');\r\n        imgEl.classList.add('sg-slide-in-right');\r\n        void imgEl.offsetWidth;\r\n        imgEl.classList.remove('sg-slide-in-right');\r\n        imgEl.style.transition = '';\r\n        requestAnimationFrame(function () {\r\n          imgEl.classList.add('sg-img-visible');\r\n        });\r\n      } else {\r\n        imgEl.classList.add('sg-img-visible');\r\n      }\r\n\r\n      spinnerEl.classList.remove('sg-spinner-visible');\r\n      isAnimating = false;\r\n    };\r\n    preloader.src = fullSrc;\r\n\r\n    counterEl.textContent = (index + 1) + ' \/ ' + galleryLinks.length;\r\n  }\r\n\r\n  function showImage(newIndex, direction) {\r\n    if (isAnimating) return;\r\n    isAnimating = true;\r\n\r\n    newIndex = (newIndex + galleryLinks.length) % galleryLinks.length;\r\n    currentIndex = newIndex;\r\n\r\n    if (!direction) {\r\n      loadImage(currentIndex, null);\r\n      return;\r\n    }\r\n\r\n    \/\/ Slide the current image out first, then load the new one\r\n    imgEl.classList.remove('sg-img-visible');\r\n    imgEl.classList.add(direction === 'left' ? 'sg-slide-out-left' : 'sg-slide-out-right');\r\n\r\n    setTimeout(function () {\r\n      imgEl.classList.remove('sg-slide-out-left', 'sg-slide-out-right');\r\n      loadImage(currentIndex, direction);\r\n    }, 220);\r\n  }\r\n\r\n  function openLightbox(index) {\r\n    currentIndex = index;\r\n    imgEl.className = ''; \/\/ reset animation classes\r\n    overlay.classList.add('sg-lightbox-open');\r\n    document.body.style.overflow = 'hidden';\r\n    showImage(index, null);\r\n  }\r\n\r\n  function closeLightbox() {\r\n    overlay.classList.remove('sg-lightbox-open');\r\n    document.body.style.overflow = '';\r\n    setTimeout(function () {\r\n      imgEl.classList.remove('sg-img-visible');\r\n      imgEl.setAttribute('src', '');\r\n    }, 300);\r\n  }\r\n\r\n  galleryLinks.forEach(function (link, index) {\r\n    link.addEventListener('click', function (e) {\r\n      e.preventDefault();\r\n      openLightbox(index);\r\n    });\r\n  });\r\n\r\n  closeBtn.addEventListener('click', closeLightbox);\r\n  prevBtn.addEventListener('click', function () { showImage(currentIndex - 1, 'right'); });\r\n  nextBtn.addEventListener('click', function () { showImage(currentIndex + 1, 'left'); });\r\n\r\n  overlay.addEventListener('click', function (e) {\r\n    if (e.target === overlay) closeLightbox();\r\n  });\r\n\r\n  document.addEventListener('keydown', function (e) {\r\n    if (!overlay.classList.contains('sg-lightbox-open')) return;\r\n    if (e.key === 'Escape') closeLightbox();\r\n    if (e.key === 'ArrowLeft') showImage(currentIndex - 1, 'right');\r\n    if (e.key === 'ArrowRight') showImage(currentIndex + 1, 'left');\r\n  });\r\n\r\n  \/* ---------- Basic swipe support for touch devices ---------- *\/\r\n  var touchStartX = 0;\r\n  overlay.addEventListener('touchstart', function (e) {\r\n    touchStartX = e.changedTouches[0].screenX;\r\n  }, { passive: true });\r\n  overlay.addEventListener('touchend', function (e) {\r\n    var deltaX = e.changedTouches[0].screenX - touchStartX;\r\n    if (Math.abs(deltaX) < 40) return;\r\n    if (deltaX < 0) showImage(currentIndex + 1, 'left');\r\n    else showImage(currentIndex - 1, 'right');\r\n  }, { passive: true });\r\n})();\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Browse coastal decor, seaside-inspired accents, and distinctive giftware with a relaxed, breezy feel at Shangri-la Boutique.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":14,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":19,"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":465,"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/465"}],"up":[{"embeddable":true,"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=\/wp\/v2\/pages\/14"}],"wp:attachment":[{"href":"https:\/\/review.sygnifistaging.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}