{"id":1386,"date":"2026-06-19T18:19:01","date_gmt":"2026-06-19T18:19:01","guid":{"rendered":"https:\/\/schoenstattnewyork.org\/?page_id=1386"},"modified":"2026-06-19T18:19:02","modified_gmt":"2026-06-19T18:19:02","slug":"photos","status":"publish","type":"page","link":"https:\/\/schoenstattnewyork.org\/en\/photos\/","title":{"rendered":"Photos"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Photo Gallery \u2013 Schoenstatt New York<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&amp;display=swap\" rel=\"stylesheet\">\n  <style>\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    :root {\n      --navy:       #1c19a3;\n      --navy-light: #2520b8;\n      --gold:       #C9A84C;\n      --gold-light: #E2C47A;\n      --cream:      #F8F5EF;\n      --white:      #FFFFFF;\n      --text:       #2B2B2B;\n      --muted:      #6B6B6B;\n      --rule:       #E8E3DA;\n      --max-w:      1140px;\n    }\n    body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }\n    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }\n    .gold-rule { width: 40px; height: 2px; background: var(--gold); margin-bottom: 24px; }\n\n    \/* \u2500\u2500 ORBS \u2500\u2500 *\/\n    .orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }\n    .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0; animation: orbFloat linear infinite; }\n    .orb-1 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(28,25,163,0.13), transparent 70%); top: -8%; left: -6%; animation-duration: 28s; }\n    .orb-2 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(201,168,76,0.09), transparent 70%); top: 45%; right: -5%; animation-duration: 22s; animation-delay: -8s; }\n    .orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(28,25,163,0.07), transparent 70%); bottom: -10%; left: 30%; animation-duration: 34s; animation-delay: -14s; }\n    @keyframes orbFloat { 0% { opacity:0; transform:translate(0,0) scale(1); } 15% { opacity:1; } 50% { transform:translate(25px,-35px) scale(1.06); } 85% { opacity:1; } 100% { opacity:0; transform:translate(-8px,18px) scale(0.96); } }\n\n    \/* \u2500\u2500 HERO \u2500\u2500 *\/\n    .page-hero {\n      background: var(--navy); color: var(--white);\n      padding: 88px 0 72px; text-align: center;\n      position: relative; overflow: hidden;\n    }\n    .page-hero::after {\n      content: ''; position: absolute; inset: 0;\n      background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.10) 0%, transparent 65%);\n      pointer-events: none; animation: heroGlow 10s ease-in-out infinite alternate;\n    }\n    @keyframes heroGlow { 0% { opacity:.6; transform:scale(1); } 100% { opacity:1; transform:scale(1.1); } }\n    .page-hero::before {\n      content: ''; position: absolute; top:0; left:-100%; bottom:0; width:1px;\n      background: linear-gradient(180deg, transparent, rgba(201,168,76,0.5), transparent);\n      animation: lineSweep 9s ease-in-out infinite; z-index:1;\n    }\n    @keyframes lineSweep { 0% { left:-5%; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { left:105%; opacity:0; } }\n    .page-hero .container { position: relative; z-index:2; display:flex; flex-direction:column; align-items:center; }\n    .hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; animation: fadeUp 0.9s 0.1s both; }\n    .hero-title { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; color: var(--white); line-height: 1.0; margin-bottom: 20px; letter-spacing: -0.02em; animation: fadeUp 0.9s 0.22s both;     margin: 0px !important;}\n    .hero-title span {\n      font-weight: 300;\n      background: linear-gradient(100deg, var(--gold-light) 0%, #fff5c0 40%, var(--gold-light) 80%);\n      background-size: 220% 100%;\n      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n      animation: goldShimmer 5s ease-in-out infinite 1.2s;\n    }\n    @keyframes goldShimmer { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }\n    .hero-sub { font-size: 0.95rem; line-height: 1.8; color: rgba(255,255,255,0.62); max-width: 480px; animation: fadeUp 0.9s 0.34s both; }\n    @keyframes fadeUp { 0% { opacity:0; transform:translateY(18px); } 100% { opacity:1; transform:translateY(0); } }\n\n    \/* \u2500\u2500 GALLERY \u2500\u2500 *\/\n    .gallery-section { padding: 72px 0 96px; position: relative; z-index:1; }\n\n    \/* Masonry-style grid *\/\n    .gallery-grid {\n      columns: 3;\n      column-gap: 12px;\n    }\n    .gallery-item {\n      break-inside: avoid;\n      margin-bottom: 12px;\n      position: relative;\n      overflow: hidden;\n      cursor: pointer;\n    }\n    .gallery-item img {\n      width: 100%;\n      display: block;\n      transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);\n      filter: brightness(0.96);\n    }\n    .gallery-item:hover img {\n      transform: scale(1.05);\n      filter: brightness(1);\n    }\n    \/* Gold overlay on hover *\/\n    .gallery-item::after {\n      content: '';\n      position: absolute; inset: 0;\n      background: linear-gradient(to top, rgba(28,25,163,0.55) 0%, transparent 55%);\n      opacity: 0;\n      transition: opacity 0.4s ease;\n    }\n    .gallery-item:hover::after { opacity: 1; }\n\n    \/* Zoom icon *\/\n    .gallery-item-icon {\n      position: absolute; bottom: 16px; right: 16px;\n      width: 36px; height: 36px;\n      background: var(--gold); color: var(--navy);\n      display: flex; align-items: center; justify-content: center;\n      font-size: 1rem; font-weight: 700;\n      opacity: 0; transform: translateY(8px);\n      transition: opacity 0.3s, transform 0.3s;\n      z-index: 2;\n    }\n    .gallery-item:hover .gallery-item-icon { opacity: 1; transform: translateY(0); }\n\n    \/* \u2500\u2500 LIGHTBOX \u2500\u2500 *\/\n    .lightbox {\n      display: none; position: fixed; inset: 0; z-index: 2000;\n      background: rgba(8,6,40,0.96);\n      align-items: center; justify-content: center;\n    }\n    .lightbox.active { display: flex; }\n\n    .lb-inner {\n      position: relative; max-width: 90vw; max-height: 90vh;\n      display: flex; flex-direction: column; align-items: center;\n    }\n    .lb-img-wrap {\n      position: relative; max-width: 88vw; max-height: 80vh;\n      display: flex; align-items: center; justify-content: center;\n    }\n    .lb-img-wrap img {\n      max-width: 88vw; max-height: 80vh;\n      object-fit: contain; display: block;\n      box-shadow: 0 32px 80px rgba(0,0,0,0.6);\n      animation: lbIn 0.3s cubic-bezier(0.16,1,0.3,1) both;\n    }\n    @keyframes lbIn { 0% { opacity:0; transform:scale(0.94); } 100% { opacity:1; transform:scale(1); } }\n\n    \/* Nav arrows *\/\n    .lb-arrow {\n      position: fixed; top: 50%; transform: translateY(-50%);\n      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);\n      color: var(--white); width: 48px; height: 48px;\n      display: flex; align-items: center; justify-content: center;\n      font-size: 1.3rem; cursor: pointer;\n      transition: background 0.2s; z-index: 10;\n    }\n    .lb-arrow:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }\n    .lb-arrow.prev { left: 24px; }\n    .lb-arrow.next { right: 24px; }\n\n    \/* Close *\/\n    .lb-close {\n      position: fixed; top: 20px; right: 20px;\n      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);\n      color: var(--white); width: 40px; height: 40px;\n      display: flex; align-items: center; justify-content: center;\n      font-size: 1.1rem; cursor: pointer; z-index: 10;\n      transition: background 0.2s;\n    }\n    .lb-close:hover { background: rgba(255,255,255,0.2); }\n\n    \/* Counter *\/\n    .lb-counter {\n      margin-top: 16px; font-size: 11px; font-weight: 600;\n      letter-spacing: 0.14em; color: rgba(255,255,255,0.45);\n      text-transform: uppercase;\n    }\n\n    \/* Dot strip *\/\n    .lb-dots {\n      display: flex; gap: 8px; margin-top: 14px;\n    }\n    .lb-dot {\n      width: 6px; height: 6px; border-radius: 50%;\n      background: rgba(255,255,255,0.25); cursor: pointer;\n      transition: background 0.2s, transform 0.2s;\n    }\n    .lb-dot.active { background: var(--gold); transform: scale(1.4); }\n\n    @media (max-width: 768px) {\n      .gallery-grid { columns: 2; }\n      .lb-arrow { display: none; }\n      .orbs { display: none; }\n    }\n    @media (max-width: 480px) {\n      .gallery-grid { columns: 1; }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }\n    }\n  <\/style>\n\n\n\n  <div class=\"orbs\" aria-hidden=\"true\">\n    <div class=\"orb orb-1\"><\/div>\n    <div class=\"orb orb-2\"><\/div>\n    <div class=\"orb orb-3\"><\/div>\n  <\/div>\n\n  <!-- HERO -->\n  <section class=\"page-hero\">\n    <div class=\"container\">\n      <p class=\"hero-eyebrow\">Schoenstatt New York<\/p>\n      <h1 class=\"hero-title\">Photo <span>Gallery<\/span><\/h1>\n      <p class=\"hero-sub\">Moments of grace, community, and prayer from the Schoenstatt Shrine of Light in Staten Island.<\/p>\n    <\/div>\n  <\/section>\n\n  <!-- GALLERY -->\n  <section class=\"gallery-section\">\n    <div class=\"container\">\n      <div class=\"gallery-grid\" id=\"galleryGrid\">\n\n        <div class=\"gallery-item\" onclick=\"openLightbox(0)\">\n          <img decoding=\"async\" src=\"https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472342029.jpg\" alt=\"Schoenstatt New York\" loading=\"lazy\">\n          <div class=\"gallery-item-icon\">+<\/div>\n        <\/div>\n\n        <div class=\"gallery-item\" onclick=\"openLightbox(1)\">\n          <img decoding=\"async\" src=\"https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472367896-1.jpg\" alt=\"Schoenstatt New York\" loading=\"lazy\">\n          <div class=\"gallery-item-icon\">+<\/div>\n        <\/div>\n\n        <div class=\"gallery-item\" onclick=\"openLightbox(2)\">\n          <img decoding=\"async\" src=\"https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472375761.jpg\" alt=\"Schoenstatt New York\" loading=\"lazy\">\n          <div class=\"gallery-item-icon\">+<\/div>\n        <\/div>\n\n        <div class=\"gallery-item\" onclick=\"openLightbox(3)\">\n          <img decoding=\"async\" src=\"https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472388453.jpg\" alt=\"Schoenstatt New York\" loading=\"lazy\">\n          <div class=\"gallery-item-icon\">+<\/div>\n        <\/div>\n\n        <div class=\"gallery-item\" onclick=\"openLightbox(4)\">\n          <img decoding=\"async\" src=\"https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472391702.jpg\" alt=\"Schoenstatt New York\" loading=\"lazy\">\n          <div class=\"gallery-item-icon\">+<\/div>\n        <\/div>\n\n        <div class=\"gallery-item\" onclick=\"openLightbox(5)\">\n          <img decoding=\"async\" src=\"https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472396560.jpg\" alt=\"Schoenstatt New York\" loading=\"lazy\">\n          <div class=\"gallery-item-icon\">+<\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- LIGHTBOX -->\n  <div class=\"lightbox\" id=\"lightbox\" onclick=\"handleLbClick(event)\">\n    <button class=\"lb-close\" onclick=\"closeLightbox()\">\u2715<\/button>\n    <button class=\"lb-arrow prev\" onclick=\"lbNav(-1)\">\u2190<\/button>\n    <button class=\"lb-arrow next\" onclick=\"lbNav(1)\">\u2192<\/button>\n\n    <div class=\"lb-inner\">\n      <div class=\"lb-img-wrap\">\n        <img decoding=\"async\" id=\"lbImg\" src=\"\" alt=\"\">\n      <\/div>\n      <p class=\"lb-counter\" id=\"lbCounter\">1 \/ 6<\/p>\n      <div class=\"lb-dots\" id=\"lbDots\"><\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    var images = [\n      'https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472342029.jpg',\n      'https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472367896-1.jpg',\n      'https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472375761.jpg',\n      'https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472388453.jpg',\n      'https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472391702.jpg',\n      'https:\/\/schoenstatt-newyork.us\/wp-content\/uploads\/2021\/08\/1626472396560.jpg'\n    ];\n\n    var current = 0;\n\n    \/\/ Build dots\n    var dotsEl = document.getElementById('lbDots');\n    images.forEach(function(_, i) {\n      var dot = document.createElement('div');\n      dot.className = 'lb-dot' + (i === 0 ? ' active' : '');\n      dot.onclick = function(e) { e.stopPropagation(); showImage(i); };\n      dotsEl.appendChild(dot);\n    });\n\n    function openLightbox(index) {\n      current = index;\n      showImage(current);\n      document.getElementById('lightbox').classList.add('active');\n      document.body.style.overflow = 'hidden';\n    }\n\n    function closeLightbox() {\n      document.getElementById('lightbox').classList.remove('active');\n      document.body.style.overflow = '';\n    }\n\n    function showImage(index) {\n      current = (index + images.length) % images.length;\n      var img = document.getElementById('lbImg');\n      img.style.animation = 'none';\n      img.src = images[current];\n      img.style.animation = '';\n      document.getElementById('lbCounter').textContent = (current + 1) + ' \/ ' + images.length;\n      document.querySelectorAll('.lb-dot').forEach(function(d, i) {\n        d.classList.toggle('active', i === current);\n      });\n    }\n\n    function lbNav(dir) {\n      showImage(current + dir);\n    }\n\n    function handleLbClick(e) {\n      if (e.target === document.getElementById('lightbox')) closeLightbox();\n    }\n\n    document.addEventListener('keydown', function(e) {\n      if (!document.getElementById('lightbox').classList.contains('active')) return;\n      if (e.key === 'Escape')     closeLightbox();\n      if (e.key === 'ArrowRight') lbNav(1);\n      if (e.key === 'ArrowLeft')  lbNav(-1);\n    });\n\n    \/\/ Touch swipe\n    var touchStartX = 0;\n    document.getElementById('lightbox').addEventListener('touchstart', function(e) {\n      touchStartX = e.touches[0].clientX;\n    });\n    document.getElementById('lightbox').addEventListener('touchend', function(e) {\n      var diff = touchStartX - e.changedTouches[0].clientX;\n      if (Math.abs(diff) > 50) lbNav(diff > 0 ? 1 : -1);\n    });\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Photo Gallery \u2013 Schoenstatt New York Schoenstatt New York Photo Gallery Moments of grace, community, and prayer from the Schoenstatt Shrine of Light in Staten Island. + + + +&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-1386","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/schoenstattnewyork.org\/en\/wp-json\/wp\/v2\/pages\/1386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoenstattnewyork.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoenstattnewyork.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoenstattnewyork.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoenstattnewyork.org\/en\/wp-json\/wp\/v2\/comments?post=1386"}],"version-history":[{"count":1,"href":"https:\/\/schoenstattnewyork.org\/en\/wp-json\/wp\/v2\/pages\/1386\/revisions"}],"predecessor-version":[{"id":1387,"href":"https:\/\/schoenstattnewyork.org\/en\/wp-json\/wp\/v2\/pages\/1386\/revisions\/1387"}],"wp:attachment":[{"href":"https:\/\/schoenstattnewyork.org\/en\/wp-json\/wp\/v2\/media?parent=1386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}