{"id":28,"date":"2026-03-13T07:30:08","date_gmt":"2026-03-13T07:30:08","guid":{"rendered":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/?page_id=28"},"modified":"2026-07-11T12:55:11","modified_gmt":"2026-07-11T04:55:11","slug":"home","status":"publish","type":"page","link":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-aa5c1ae4 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-1'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n*{margin:0;padding:0;box-sizing:border-box}\n.ch{position:relative;width:100%;height:100vh;min-height:580px;overflow:hidden;background:#0b0f1a;font-family:'Lato',sans-serif;}\ncanvas#stained{position:absolute;inset:0;width:100%;height:100%;}\n.ch-btns a { text-decoration: none !important; }\n.ch-rays{position:absolute;inset:0;background:repeating-conic-gradient(from 270deg at 50% -10%,rgba(255,220,120,0.07) 0deg 3deg,transparent 3deg 8deg);animation:rayRotate 18s linear infinite;transform-origin:50% -10%;}\n@keyframes rayRotate{0%{transform:rotate(-4deg)}100%{transform:rotate(4deg)}}\n.ch-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 40%,rgba(5,8,18,0.82) 100%);}\n.ch-candles{position:absolute;bottom:0;left:0;right:0;height:160px;}\n.candle{position:absolute;bottom:0;}\n.candle-body{width:10px;border-radius:2px;background:#d4a96a;position:absolute;bottom:0;}\n.candle-flame{position:absolute;left:50%;transform:translateX(-50%);width:8px;height:14px;background:radial-gradient(ellipse at 50% 80%,#fff 0%,#ffe066 30%,#ffaa00 70%,transparent 100%);border-radius:50% 50% 30% 30%;animation:flicker 1.6s ease-in-out infinite;transform-origin:50% 100%;}\n.candle-glow{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,200,60,0.35) 0%,transparent 70%);animation:glowPulse 1.6s ease-in-out infinite;}\n@keyframes flicker{0%,100%{transform:translateX(-50%) scaleX(1) scaleY(1) rotate(-1deg)}25%{transform:translateX(-50%) scaleX(0.9) scaleY(1.05) rotate(1deg)}50%{transform:translateX(-50%) scaleX(1.05) scaleY(0.97) rotate(-0.5deg)}75%{transform:translateX(-50%) scaleX(0.95) scaleY(1.03) rotate(1.5deg)}}\n@keyframes glowPulse{0%,100%{opacity:0.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.15)}}\n.ch-content{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;}\n.ch-badge{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#c9a84c;margin-bottom:1.1rem;animation:fadeUp 1.2s ease both;}\n.ch-ornament{display:flex;align-items:center;gap:14px;margin-bottom:1.1rem;animation:fadeUp 1.2s 0.2s ease both;}\n.ch-ornament-line{height:1px;width:55px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.6));}\n.ch-ornament-line.r{background:linear-gradient(90deg,rgba(201,168,76,0.6),transparent);}\n.ch-ornament svg{width:20px;height:20px;fill:#c9a84c;}\n.ch-title{font-family:'Playfair Display',serif;font-size:clamp(26px,4.5vw,52px);font-weight:700;color:#fff;line-height:1.2;margin-bottom:0.45rem;text-shadow:0 0 40px rgba(201,168,76,0.3);animation:fadeUp 1.2s 0.35s ease both;}\n.ch-sub{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(13px,1.8vw,18px);color:#c9a84c;margin-bottom:1.1rem;letter-spacing:1px;animation:fadeUp 1.2s 0.5s ease both;}\n.ch-rule{width:1px;height:36px;background:linear-gradient(to bottom,rgba(201,168,76,0.6),transparent);margin:0 auto 1.1rem;animation:fadeUp 1.2s 0.6s ease both;}\n.ch-tagline{font-size:11px;color:rgba(255,255,255,0.65);letter-spacing:3px;text-transform:uppercase;margin-bottom:2.2rem;animation:fadeUp 1.2s 0.7s ease both;}\n.ch-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:fadeUp 1.2s 0.9s ease both;}\n.ch-btn-a{padding:12px 30px;border:1px solid rgba(201,168,76,0.7);background:rgba(201,168,76,0.12);color:#e8d08a;font-size:10px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;transition:background 0.3s;font-family:'Lato',sans-serif;}\n.ch-btn-a:hover{background:rgba(201,168,76,0.28);color:#fff;}\n.ch-btn-b{padding:12px 30px;border:1px solid rgba(255,255,255,0.25);background:transparent;color:rgba(255,255,255,0.75);font-size:10px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;transition:background 0.3s;font-family:'Lato',sans-serif;}\n.ch-btn-b:hover{background:rgba(255,255,255,0.08);color:#fff;}\n@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}\n.ch-goldbar{position:absolute;top:0;left:0;right:0;height:3px;z-index:20;background:linear-gradient(90deg,transparent,#c9a84c,#f0d878,#c9a84c,transparent);animation:shimmer 3s linear infinite;background-size:200% 100%;}\n@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}\n<\/style>\n\n<div class=\"ch\" id=\"churchHero\">\n  <canvas id=\"stained\"><\/canvas>\n  <div class=\"ch-rays\"><\/div>\n  <div class=\"ch-vignette\"><\/div>\n  <div class=\"ch-candles\" id=\"candlesLayer\"><\/div>\n  <div class=\"ch-goldbar\"><\/div>\n  <div class=\"ch-content\">\n    <p class=\"ch-badge\">Diocese of Gumaca \u00b7 Catanauan, Quezon<\/p>\n    <div class=\"ch-ornament\">\n      <div class=\"ch-ornament-line\"><\/div>\n      <svg viewBox=\"0 0 24 24\"><path d=\"M11 2h2v7h7v2h-7v11h-2V11H4V9h7V2z\"\/><\/svg>\n      <div class=\"ch-ornament-line r\"><\/div>\n    <\/div>\n    <h1 class=\"ch-title\">Immaculate Conception<br>Parish<\/h1>\n    <p class=\"ch-sub\">Catanauan, Quezon<\/p>\n    <div class=\"ch-rule\"><\/div>\n    <p class=\"ch-tagline\">All are welcome at the table of the Lord<\/p>\n    <div class=\"ch-btns\">\n      <a href=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/about-us\/\" class=\"ch-btn-a\">About Us<\/a>\n      <a href=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/donate\/\" class=\"ch-btn-b\">Donate<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var canvas=document.getElementById('stained');\n  var ctx=canvas.getContext('2d');\n  var hero=document.getElementById('churchHero');\n  function resize(){canvas.width=hero.offsetWidth;canvas.height=hero.offsetHeight;}\n  resize();\n  window.addEventListener('resize',resize);\n  var panels=[\n    {x:0.0,w:0.12,hue:220},{x:0.12,w:0.08,hue:40},{x:0.20,w:0.14,hue:270},\n    {x:0.34,w:0.06,hue:30},{x:0.40,w:0.20,hue:200},{x:0.60,w:0.06,hue:50},\n    {x:0.66,w:0.14,hue:260},{x:0.80,w:0.10,hue:180},{x:0.90,w:0.10,hue:15}\n  ];\n  var t=0;\n  function draw(){\n    var W=canvas.width,H=canvas.height;\n    ctx.clearRect(0,0,W,H);\n    panels.forEach(function(p,i){\n      var pulse=0.55+0.12*Math.sin(t*0.7+i*0.9);\n      var x=p.x*W,w=p.w*W;\n      var r=Math.round(pulse*(p.hue<60?180:p.hue<200?40:60));\n      var g=Math.round(pulse*(p.hue>180?140:p.hue>40&&p.hue<120?160:60));\n      var b=Math.round(pulse*(p.hue>200?200:p.hue>240?220:80));\n      ctx.fillStyle='rgba('+r+','+g+','+b+',0.18)';\n      ctx.fillRect(x,0,w,H);\n      ctx.strokeStyle='rgba(201,168,76,0.25)';\n      ctx.lineWidth=1;\n      ctx.strokeRect(x+0.5,0,w-1,H);\n      for(var s=0;s<5;s++){\n        var sy=(s\/5)*H,sh=H\/5;\n        var alpha=(0.06+0.06*Math.sin(t*0.5+i+s*0.7)).toFixed(2);\n        ctx.fillStyle='rgba('+r+','+g+','+b+','+alpha+')';\n        ctx.fillRect(x+1,sy+1,w-2,sh-2);\n        ctx.strokeStyle='rgba(201,168,76,0.12)';\n        ctx.lineWidth=0.5;\n        ctx.strokeRect(x+1,sy+1,w-2,sh-2);\n      }\n    });\n    t+=0.018;\n    requestAnimationFrame(draw);\n  }\n  draw();\n  var candleLayer=document.getElementById('candlesLayer');\n  [{left:'8%',h:55,d:0},{left:'14%',h:40,d:0.3},{left:'20%',h:60,d:0.7},\n   {left:'76%',h:60,d:0.2},{left:'82%',h:42,d:0.5},{left:'88%',h:55,d:0.8}\n  ].forEach(function(c){\n    var el=document.createElement('div');\n    el.className='candle';el.style.left=c.left;\n    el.innerHTML='<div class=\"candle-glow\" style=\"width:'+(c.h*1.4)+'px;height:'+(c.h*1.4)+'px;top:'+(-c.h*0.6)+'px;animation-delay:'+c.d+'s\"><\/div>'+\n      '<div class=\"candle-flame\" style=\"bottom:'+c.h+'px;animation-delay:'+c.d+'s\"><\/div>'+\n      '<div class=\"candle-body\" style=\"height:'+c.h+'px\"><\/div>';\n    candleLayer.appendChild(el);\n  });\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-94912c0b alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-2'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n.comm-section{background:#0b0f1a;padding:90px 40px;font-family:'Lato',sans-serif;position:relative;overflow:hidden;}\n.comm-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);}\n.comm-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}\n.comm-img-wrap{position:relative;opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease;}\n.comm-img-wrap.animate-in{opacity:1;transform:translateY(0);}\n.comm-img-placeholder{width:100%;aspect-ratio:4\/5;background:rgba(255,255,255,0.04);border:1px solid rgba(201,168,76,0.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative;overflow:hidden;}\n.comm-img-placeholder::before{content:'';position:absolute;top:12px;left:12px;right:12px;bottom:12px;border:1px solid rgba(201,168,76,0.1);pointer-events:none;}\n.comm-img-placeholder svg{width:40px;height:40px;opacity:0.25;fill:none;stroke:#c9a84c;stroke-width:1.5;}\n.comm-img-placeholder span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.35);font-family:'Lato',sans-serif;}\n.comm-img-corner{position:absolute;width:24px;height:24px;border-color:rgba(201,168,76,0.5);border-style:solid;opacity:0;transition:opacity 0.5s ease;}\n.comm-img-clickable:hover .comm-img-corner{opacity:1;}\n.comm-img-corner.tl{top:-1px;left:-1px;border-width:2px 0 0 2px;transition-delay:0s;}\n.comm-img-corner.tr{top:-1px;right:-1px;border-width:2px 2px 0 0;transition-delay:0.05s;}\n.comm-img-corner.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px;transition-delay:0.1s;}\n.comm-img-corner.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0;transition-delay:0.15s;}\n.comm-img-tag{position:absolute;bottom:-1px;left:30px;background:#0b0f1a;border:1px solid rgba(201,168,76,0.3);border-bottom:none;padding:8px 20px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c;font-family:'Lato',sans-serif;}\n.comm-img-clickable{position:relative;cursor:pointer;display:block;overflow:hidden;}\n.comm-img-clickable img{width:100%;aspect-ratio:4\/5;object-fit:cover;display:block;border:1px solid rgba(201,168,76,0.2);transition:transform 0.5s ease,filter 0.5s ease;}\n.comm-img-clickable:hover img{transform:scale(1.03);filter:brightness(1.05);}\n.comm-img-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);background:rgba(11,15,26,0.75);border:1px solid rgba(201,168,76,0.3);padding:10px 18px;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c;font-family:'Lato',sans-serif;opacity:0;transition:opacity 0.35s ease,transform 0.35s ease;pointer-events:none;white-space:nowrap;backdrop-filter:blur(4px);}\n.comm-img-clickable:hover .comm-img-hint{opacity:1;transform:translate(-50%,-50%) scale(1);}\n.comm-text{display:flex;flex-direction:column;}\n.comm-eyebrow{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:#c9a84c;margin-bottom:18px;display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(-20px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.comm-text.animate-in .comm-eyebrow{opacity:1;transform:translateX(0);transition-delay:0.15s;}\n.comm-heading{font-family:'Playfair Display',serif;font-size:clamp(28px,3vw,42px);font-weight:700;color:#fff;line-height:1.2;margin-bottom:10px;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.comm-text.animate-in .comm-heading{opacity:1;transform:translateY(0);transition-delay:0.25s;}\n.comm-heading em{font-style:italic;color:#c9a84c;}\n.comm-rule{width:50px;height:2px;background:linear-gradient(90deg,#c9a84c,transparent);margin:22px 0;transform:scaleX(0);transform-origin:left;transition:transform 0.6s ease;}\n.comm-text.animate-in .comm-rule{transform:scaleX(1);transition-delay:0.35s;}\n.comm-body{font-size:15px;line-height:1.85;color:rgba(255,255,255,0.6);margin-bottom:36px;font-weight:300;opacity:0;transform:translateY(15px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.comm-text.animate-in .comm-body{opacity:1;transform:translateY(0);transition-delay:0.45s;}\n.comm-link{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#e8d08a;text-decoration:none !important;border-bottom:1px solid rgba(201,168,76,0.35);padding-bottom:6px;transition:color 0.3s,border-color 0.3s;font-family:'Lato',sans-serif;width:fit-content;opacity:0;transform:translateY(10px);transition:opacity 0.6s ease,transform 0.6s ease,color 0.3s,border-color 0.3s;}\n.comm-text.animate-in .comm-link{opacity:1;transform:translateY(0);transition-delay:0.55s;}\n.comm-link:hover{color:#fff;border-color:rgba(255,255,255,0.4);}\n.comm-link svg{width:14px;height:14px;stroke:#c9a84c;fill:none;stroke-width:2;transition:transform 0.3s;}\n.comm-link:hover svg{transform:translateX(4px);stroke:#fff;}\n.comm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,168,76,0.15);margin-top:44px;border:1px solid rgba(201,168,76,0.15);opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.comm-text.animate-in .comm-stats{opacity:1;transform:translateY(0);transition-delay:0.65s;}\n.comm-stat{background:#0b0f1a;padding:20px 16px;text-align:center;}\n.comm-stat-num{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:#c9a84c;display:block;line-height:1;margin-bottom:6px;transition:color 0.3s;}\n.comm-stat:hover .comm-stat-num{color:#e8d08a;text-shadow:0 0 20px rgba(201,168,76,0.3);}\n.comm-stat-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);}\n\n\/* \u2500\u2500 AMBIENT PARTICLES \u2500\u2500 *\/\n.comm-particle{position:absolute;border-radius:50%;background:rgba(201,168,76,0.08);pointer-events:none;}\n.comm-particle:nth-child(1){width:180px;height:180px;top:-40px;right:-60px;animation:commFloat 12s ease-in-out infinite;}\n.comm-particle:nth-child(2){width:120px;height:120px;bottom:-30px;left:10%;animation:commFloat 15s ease-in-out infinite reverse;}\n.comm-particle:nth-child(3){width:80px;height:80px;top:30%;left:-20px;animation:commFloat 10s ease-in-out infinite 2s;}\n@keyframes commFloat{\n  0%,100%{transform:translateY(0) scale(1);opacity:0.5;}\n  50%{transform:translateY(-20px) scale(1.08);opacity:1;}\n}\n\n\/* \u2500\u2500 SHIMMER LINE ON IMAGE \u2500\u2500 *\/\n.comm-img-clickable::before{\n  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;\n  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.06),transparent);\n  z-index:2;pointer-events:none;\n  transition:none;\n}\n.comm-img-clickable:hover::before{\n  animation:commShimmer 0.8s ease forwards;\n}\n@keyframes commShimmer{\n  0%{left:-100%;}\n  100%{left:150%;}\n}\n\n\/* \u2500\u2500 LIGHTBOX \u2500\u2500 *\/\n.comm-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s ease;}\n.comm-lightbox.open{opacity:1;pointer-events:all;}\n.comm-lightbox-overlay{position:absolute;inset:0;background:rgba(5,7,14,0.93);backdrop-filter:blur(6px);}\n.comm-lightbox-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;transform:scale(0.92) translateY(16px);transition:transform 0.4s ease;}\n.comm-lightbox.open .comm-lightbox-inner{transform:scale(1) translateY(0);}\n.comm-lightbox-frame{position:relative;border:1px solid rgba(201,168,76,0.25);overflow:hidden;}\n.comm-lightbox-frame img{display:block;max-width:88vw;max-height:80vh;object-fit:contain;}\n.comm-lightbox-corner{position:absolute;width:20px;height:20px;border-color:rgba(201,168,76,0.5);border-style:solid;}\n.comm-lightbox-corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px;}\n.comm-lightbox-corner.tr{top:-1px;right:-1px;border-width:1px 1px 0 0;}\n.comm-lightbox-corner.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;}\n.comm-lightbox-corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}\n.comm-lightbox-caption{margin-top:14px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);font-family:'Lato',sans-serif;}\n.comm-lightbox-close{position:absolute;top:-38px;right:0;background:none;border:none;cursor:pointer;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);font-family:'Lato',sans-serif;display:flex;align-items:center;gap:8px;padding:0;transition:color 0.3s;}\n.comm-lightbox-close:hover{color:#c9a84c;}\n.comm-lightbox-close svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}\n\n@media(max-width:768px){\n  .comm-inner{grid-template-columns:1fr;gap:40px;}\n  .comm-section{padding:60px 24px;}\n}\n<\/style>\n\n<section class=\"comm-section\">\n  <div class=\"comm-particle\"><\/div>\n  <div class=\"comm-particle\"><\/div>\n  <div class=\"comm-particle\"><\/div>\n  <div class=\"comm-inner\">\n\n    <div class=\"comm-img-wrap\">\n      <div class=\"comm-img-clickable\" onclick=\"commLightboxOpen()\">\n        <img decoding=\"async\" src=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/catanauan-church.jpg\" alt=\"Parish Community\">\n        <div class=\"comm-img-hint\">View Image<\/div>\n        <div class=\"comm-img-corner tl\"><\/div>\n        <div class=\"comm-img-corner tr\"><\/div>\n        <div class=\"comm-img-corner bl\"><\/div>\n        <div class=\"comm-img-corner br\"><\/div>\n      <\/div>\n      <div class=\"comm-img-tag\">Est. Parish Community<\/div>\n    <\/div>\n\n    <div class=\"comm-text\">\n      <p class=\"comm-eyebrow\">Our Parish<\/p>\n      <h2 class=\"comm-heading\">A Community of<br><em>Living Faith<\/em><\/h2>\n      <div class=\"comm-rule\"><\/div>\n      <p class=\"comm-body\">The Immaculate Conception Parish Church has been a cornerstone of faith in Catanauan, Quezon, since 1855. For over 171+ years, our doors have remained open to all who seek God&#8217;s grace.\n\nHome to the miraculous image of La Inmaculada Concepci\u00f3n de Catanauan, we are a historic community of faith under the Diocese of Gumaca, serving the 46 barangays of Catanauan municipality.<\/p>\n      <a href=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/about-us\/\" class=\"comm-link\">\n        Discover Our Story\n        <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n      <\/a>\n      <div class=\"comm-stats\">\n        <div class=\"comm-stat\">\n          <span class=\"comm-stat-num\" data-target=\"1855\">1855<\/span>\n          <span class=\"comm-stat-label\">Founded<\/span>\n        <\/div>\n        <div class=\"comm-stat\">\n          <span class=\"comm-stat-num\" data-target=\"46\">46<\/span>\n          <span class=\"comm-stat-label\">Barangays<\/span>\n        <\/div>\n        <div class=\"comm-stat\">\n          <span class=\"comm-stat-num\" data-target=\"11\">11<\/span>\n          <span class=\"comm-stat-label\">Weekly Masses<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- LIGHTBOX -->\n<div class=\"comm-lightbox\" id=\"commLightbox\" onclick=\"commLightboxClose(event)\">\n  <div class=\"comm-lightbox-overlay\"><\/div>\n  <div class=\"comm-lightbox-inner\">\n    <div class=\"comm-lightbox-frame\">\n      <img decoding=\"async\" src=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/catanauan-church.jpg\" alt=\"Parish Community\">\n      <div class=\"comm-lightbox-corner tl\"><\/div>\n      <div class=\"comm-lightbox-corner tr\"><\/div>\n      <div class=\"comm-lightbox-corner bl\"><\/div>\n      <div class=\"comm-lightbox-corner br\"><\/div>\n      <button class=\"comm-lightbox-close\" onclick=\"commLightboxClose()\">\n        Close\n        <svg viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n      <\/button>\n    <\/div>\n    <p class=\"comm-lightbox-caption\">Immaculate Conception Parish Church \u2014 Catanauan, Quezon<\/p>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  \/* \u2500\u2500 lightbox \u2500\u2500 *\/\n  window.commLightboxOpen = function(){\n    document.getElementById('commLightbox').classList.add('open');\n    document.body.style.overflow = 'hidden';\n  };\n  window.commLightboxClose = function(e){\n    if(e && e.target.closest('.comm-lightbox-frame')) return;\n    document.getElementById('commLightbox').classList.remove('open');\n    document.body.style.overflow = '';\n  };\n  document.addEventListener('keydown', function(e){\n    if(e.key === 'Escape') window.commLightboxClose();\n  });\n\n  \/* \u2500\u2500 scroll reveal \u2500\u2500 *\/\n  var imgWrap  = document.querySelector('.comm-img-wrap');\n  var textWrap = document.querySelector('.comm-text');\n  var counted  = false;\n\n  function commOnScroll(){\n    var wh = window.innerHeight;\n\n    if(imgWrap){\n      var r1 = imgWrap.getBoundingClientRect();\n      if(r1.top < wh * 0.85) imgWrap.classList.add('animate-in');\n    }\n    if(textWrap){\n      var r2 = textWrap.getBoundingClientRect();\n      if(r2.top < wh * 0.85){\n        textWrap.classList.add('animate-in');\n\n        \/* count up stats once *\/\n        if(!counted){\n          counted = true;\n          textWrap.querySelectorAll('.comm-stat-num').forEach(function(el){\n            var target = parseInt(el.getAttribute('data-target'), 10);\n            var duration = 1600;\n            var start = 0;\n            var startTime = null;\n\n            \/* stagger each stat *\/\n            var idx = Array.from(el.closest('.comm-stats').querySelectorAll('.comm-stat-num')).indexOf(el);\n            var delay = idx * 200;\n\n            setTimeout(function(){\n              function step(ts){\n                if(!startTime) startTime = ts;\n                var progress = Math.min((ts - startTime) \/ duration, 1);\n                \/* ease out cubic *\/\n                var eased = 1 - Math.pow(1 - progress, 3);\n                el.textContent = Math.floor(eased * target);\n                if(progress < 1) requestAnimationFrame(step);\n                else el.textContent = target;\n              }\n              requestAnimationFrame(step);\n            }, delay + 650);\n          });\n        }\n      }\n    }\n  }\n\n  window.addEventListener('scroll', commOnScroll, {passive:true});\n  commOnScroll();\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-c682fc58 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-3'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n\n.patron-section{background:#0b0f1a;padding:90px 40px;font-family:'Lato',sans-serif;position:relative;overflow:hidden;}\n.patron-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);}\n.patron-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}\n\n.patron-image-wrap{position:relative;order:2;opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease;}\n.patron-image-wrap.animate-in{opacity:1;transform:translateY(0);}\n.patron-image-frame{position:relative;aspect-ratio:3\/4;background:rgba(255,255,255,0.02);border:1px solid rgba(201,168,76,0.15);overflow:hidden;cursor:pointer;}\n.patron-image-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease,filter 0.5s ease;}\n.patron-image-frame:hover img{transform:scale(1.04);filter:brightness(1.05);}\n.patron-image-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}\n.patron-image-placeholder svg{width:48px;height:48px;stroke:rgba(201,168,76,0.2);fill:none;stroke-width:1;}\n.patron-image-placeholder span{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.2);font-family:'Lato',sans-serif;}\n.patron-image-corner{position:absolute;width:24px;height:24px;border-color:rgba(201,168,76,0.4);border-style:solid;pointer-events:none;opacity:0;transition:opacity 0.5s ease;}\n.patron-image-frame:hover .patron-image-corner{opacity:1;}\n.patron-image-corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px;transition-delay:0s;}\n.patron-image-corner.tr{top:-1px;right:-1px;border-width:1px 1px 0 0;transition-delay:0.05s;}\n.patron-image-corner.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;transition-delay:0.1s;}\n.patron-image-corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;transition-delay:0.15s;}\n.patron-image-hover-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);background:rgba(11,15,26,0.75);border:1px solid rgba(201,168,76,0.3);padding:10px 18px;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c;font-family:'Lato',sans-serif;opacity:0;transition:opacity 0.35s ease,transform 0.35s ease;pointer-events:none;white-space:nowrap;backdrop-filter:blur(4px);}\n.patron-image-frame:hover .patron-image-hover-hint{opacity:1;transform:translate(-50%,-50%) scale(1);}\n.patron-feast-badge{position:absolute;bottom:0;left:0;right:0;background:rgba(11,15,26,0.92);border-top:1px solid rgba(201,168,76,0.15);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;}\n.patron-feast-label{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);}\n.patron-feast-date{font-family:'Playfair Display',serif;font-size:14px;font-style:italic;color:#c9a84c;}\n\n\/* shimmer sweep on image *\/\n.patron-image-frame::before{\n  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;\n  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.06),transparent);\n  z-index:2;pointer-events:none;transition:none;\n}\n.patron-image-frame:hover::before{\n  animation:patronShimmer 0.8s ease forwards;\n}\n@keyframes patronShimmer{\n  0%{left:-100%;}\n  100%{left:150%;}\n}\n\n.patron-content{order:1;}\n.patron-eyebrow{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:#c9a84c;margin-bottom:16px;display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(-20px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.patron-content.animate-in .patron-eyebrow{opacity:1;transform:translateX(0);transition-delay:0.15s;}\n.patron-eyebrow::before{content:'';display:block;width:30px;height:1px;background:rgba(201,168,76,0.5);}\n.patron-name{font-family:'Playfair Display',serif;font-size:clamp(28px,3.5vw,46px);font-weight:700;color:#fff;line-height:1.2;margin-bottom:0;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.patron-content.animate-in .patron-name{opacity:1;transform:translateY(0);transition-delay:0.25s;}\n.patron-name em{font-style:italic;color:#c9a84c;display:block;}\n.patron-divider{width:40px;height:1px;background:rgba(201,168,76,0.4);margin:24px 0;transform:scaleX(0);transform-origin:left;transition:transform 0.6s ease;}\n.patron-content.animate-in .patron-divider{transform:scaleX(1);transition-delay:0.35s;}\n.patron-bio{font-size:13.5px;color:rgba(255,255,255,0.5);line-height:1.9;margin-bottom:28px;opacity:0;transform:translateY(15px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.patron-content.animate-in .patron-bio{opacity:1;transform:translateY(0);transition-delay:0.45s;}\n.patron-feast-block{border:1px solid rgba(201,168,76,0.15);padding:24px 28px;position:relative;margin-bottom:0;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.patron-content.animate-in .patron-feast-block{opacity:1;transform:translateY(0);transition-delay:0.55s;}\n.patron-feast-block::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.3),transparent);}\n.patron-feast-block-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}\n.patron-feast-block-tag{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);}\n.patron-feast-block-date{font-family:'Playfair Display',serif;font-size:20px;font-style:italic;color:#c9a84c;transition:text-shadow 0.3s;}\n.patron-feast-block:hover .patron-feast-block-date{text-shadow:0 0 20px rgba(201,168,76,0.3);}\n.patron-feast-block-desc{font-size:13px;color:rgba(255,255,255,0.4);line-height:1.8;}\n\n\/* \u2500\u2500 AMBIENT PARTICLES \u2500\u2500 *\/\n.patron-particle{position:absolute;border-radius:50%;background:rgba(201,168,76,0.06);pointer-events:none;}\n.patron-particle:nth-child(1){width:200px;height:200px;top:-60px;left:-80px;animation:patronFloat 14s ease-in-out infinite;}\n.patron-particle:nth-child(2){width:140px;height:140px;bottom:-40px;right:5%;animation:patronFloat 18s ease-in-out infinite reverse;}\n.patron-particle:nth-child(3){width:90px;height:90px;top:40%;right:-30px;animation:patronFloat 11s ease-in-out infinite 3s;}\n@keyframes patronFloat{\n  0%,100%{transform:translateY(0) scale(1);opacity:0.4;}\n  50%{transform:translateY(-25px) scale(1.1);opacity:0.9;}\n}\n\n\/* \u2500\u2500 LIGHTBOX \u2500\u2500 *\/\n.patron-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s ease;}\n.patron-lightbox.open{opacity:1;pointer-events:all;}\n.patron-lightbox-overlay{position:absolute;inset:0;background:rgba(5,7,14,0.92);backdrop-filter:blur(6px);}\n.patron-lightbox-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:90vw;max-height:90vh;transform:scale(0.92) translateY(16px);transition:transform 0.4s ease;}\n.patron-lightbox.open .patron-lightbox-inner{transform:scale(1) translateY(0);}\n.patron-lightbox-frame{position:relative;border:1px solid rgba(201,168,76,0.25);overflow:hidden;}\n.patron-lightbox-frame img{display:block;max-width:88vw;max-height:78vh;object-fit:contain;}\n.patron-lightbox-corner{position:absolute;width:20px;height:20px;border-color:rgba(201,168,76,0.5);border-style:solid;}\n.patron-lightbox-corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px;}\n.patron-lightbox-corner.tr{top:-1px;right:-1px;border-width:1px 1px 0 0;}\n.patron-lightbox-corner.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;}\n.patron-lightbox-corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}\n.patron-lightbox-caption{margin-top:16px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);font-family:'Lato',sans-serif;text-align:center;}\n.patron-lightbox-close{position:absolute;top:-40px;right:0;background:none;border:none;cursor:pointer;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);font-family:'Lato',sans-serif;display:flex;align-items:center;gap:8px;padding:0;transition:color 0.3s;}\n.patron-lightbox-close:hover{color:#c9a84c;}\n.patron-lightbox-close svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}\n\n@media(max-width:900px){\n  .patron-inner{grid-template-columns:1fr;gap:48px;}\n  .patron-image-wrap{order:1;}\n  .patron-content{order:2;}\n  .patron-image-frame{aspect-ratio:4\/3;}\n  .patron-section{padding:60px 24px;}\n}\n<\/style>\n\n<section class=\"patron-section\">\n  <div class=\"patron-particle\"><\/div>\n  <div class=\"patron-particle\"><\/div>\n  <div class=\"patron-particle\"><\/div>\n  <div class=\"patron-inner\">\n\n    <div class=\"patron-content\">\n      <p class=\"patron-eyebrow\">Patroness<\/p>\n      <h2 class=\"patron-name\">\n        <em>La Inmaculada Concepci\u00f3n<\/em>\n      <\/h2>\n      <div class=\"patron-divider\"><\/div>\n      <p class=\"patron-bio\">\n        Our parish is home to the miraculous image of La Inmaculada Concepci\u00f3n de Catanauan \u2014 a beloved, brown-skinned wooden statue discovered half-buried in mud by a fisherman generations ago. This venerated image with praying hands, long hair, and Marian crown has been the heart of Catanauan's devotion, credited with protecting the town from pirates and calamities.\n      <\/p>\n      <div class=\"patron-feast-block\">\n        <div class=\"patron-feast-block-top\">\n          <span class=\"patron-feast-block-tag\">Feast Day<\/span>\n          <span class=\"patron-feast-block-date\">Dec 8<\/span>\n        <\/div>\n        <p class=\"patron-feast-block-desc\">\n          The Solemnity of the Immaculate Conception is celebrated with a grand nine-day novena, festive fiesta, solemn high Mass, and traditional procession through Catanauan's streets. Thousands of pilgrims flock to honor Our Lady, continuing centuries of Marian devotion that defines our parish identity.\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"patron-image-wrap\">\n      <div class=\"patron-image-frame\" onclick=\"patronLightboxOpen()\">\n        <img decoding=\"async\" src=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/449edd0b9d6163dfda4ab4190a69ec64f9236296.jpg\" alt=\"La Inmaculada Concepci\u00f3n de Catanauan\">\n        <div class=\"patron-image-hover-hint\">View Image<\/div>\n        <div class=\"patron-image-corner tl\"><\/div>\n        <div class=\"patron-image-corner tr\"><\/div>\n        <div class=\"patron-image-corner bl\"><\/div>\n        <div class=\"patron-image-corner br\"><\/div>\n        <div class=\"patron-feast-badge\">\n          <span class=\"patron-feast-label\">La Inmaculada Concepci\u00f3n de Catanauan<\/span>\n          <span class=\"patron-feast-date\">Est. Since Time Immemorial<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- LIGHTBOX -->\n<div class=\"patron-lightbox\" id=\"patronLightbox\" onclick=\"patronLightboxClose(event)\">\n  <div class=\"patron-lightbox-overlay\"><\/div>\n  <div class=\"patron-lightbox-inner\">\n    <div class=\"patron-lightbox-frame\">\n      <img decoding=\"async\" id=\"patronLightboxImg\" src=\"\" alt=\"La Inmaculada Concepci\u00f3n de Catanauan\">\n      <div class=\"patron-lightbox-corner tl\"><\/div>\n      <div class=\"patron-lightbox-corner tr\"><\/div>\n      <div class=\"patron-lightbox-corner bl\"><\/div>\n      <div class=\"patron-lightbox-corner br\"><\/div>\n      <button class=\"patron-lightbox-close\" onclick=\"patronLightboxClose()\">\n        Close\n        <svg viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n      <\/button>\n    <\/div>\n    <p class=\"patron-lightbox-caption\">La Inmaculada Concepci\u00f3n de Catanauan<\/p>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var IMG_SRC = 'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/449edd0b9d6163dfda4ab4190a69ec64f9236296.jpg';\n\n  var cardFrame  = document.querySelector('.patron-image-frame');\n  var cardImg    = cardFrame.querySelector('img');\n  var lbImg      = document.getElementById('patronLightboxImg');\n\n  if(cardImg) cardImg.src = IMG_SRC;\n  if(lbImg)   lbImg.src   = IMG_SRC;\n\n  window.patronLightboxOpen = function(){\n    document.getElementById('patronLightbox').classList.add('open');\n    document.body.style.overflow = 'hidden';\n  };\n\n  window.patronLightboxClose = function(e){\n    if(e && e.target.closest('.patron-lightbox-frame')) return;\n    document.getElementById('patronLightbox').classList.remove('open');\n    document.body.style.overflow = '';\n  };\n\n  document.addEventListener('keydown', function(e){\n    if(e.key === 'Escape') window.patronLightboxClose();\n  });\n\n  var imgWrap  = document.querySelector('.patron-image-wrap');\n  var textWrap = document.querySelector('.patron-content');\n\n  function patronOnScroll(){\n    var wh = window.innerHeight;\n\n    if(imgWrap){\n      var r1 = imgWrap.getBoundingClientRect();\n      if(r1.top < wh * 0.85) imgWrap.classList.add('animate-in');\n    }\n    if(textWrap){\n      var r2 = textWrap.getBoundingClientRect();\n      if(r2.top < wh * 0.85) textWrap.classList.add('animate-in');\n    }\n  }\n\n  window.addEventListener('scroll', patronOnScroll, {passive:true});\n  patronOnScroll();\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-6956b221 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-4'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n.mass-section{background:#0b0f1a;padding:90px 40px;font-family:'Lato',sans-serif;position:relative;overflow:hidden;}\n.mass-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);}\n.mass-bg-cross{position:absolute;right:-60px;top:50%;transform:translateY(-50%);opacity:0.02;}\n.mass-bg-cross svg{width:400px;height:400px;fill:#c9a84c;}\n.mass-inner{max-width:1100px;margin:0 auto;}\n.mass-header{text-align:center;margin-bottom:60px;}\n.mass-eyebrow{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:#c9a84c;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:14px;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.mass-header.animate-in .mass-eyebrow{opacity:1;transform:translateY(0);transition-delay:0.1s;}\n.mass-eyebrow::before,.mass-eyebrow::after{content:'';display:block;width:40px;height:1px;background:rgba(201,168,76,0.4);}\n.mass-title{font-family:'Playfair Display',serif;font-size:clamp(28px,3.5vw,44px);font-weight:700;color:#fff;margin-bottom:8px;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.mass-header.animate-in .mass-title{opacity:1;transform:translateY(0);transition-delay:0.2s;}\n.mass-subtitle{font-family:'Playfair Display',serif;font-style:italic;font-size:15px;color:rgba(201,168,76,0.7);letter-spacing:1px;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.mass-header.animate-in .mass-subtitle{opacity:1;transform:translateY(0);transition-delay:0.3s;}\n.mass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.15);margin-bottom:1px;}\n.mass-card{background:#0b0f1a;padding:32px 24px;position:relative;transition:background 0.3s;opacity:0;transform:translateY(25px);transition:opacity 0.6s ease,transform 0.6s ease,background 0.3s;}\n.mass-card.animate-in{opacity:1;transform:translateY(0);}\n.mass-card:hover{background:rgba(201,168,76,0.04);}\n\n\/* card corner accents on hover *\/\n.mass-card::before,.mass-card::after{content:'';position:absolute;width:14px;height:14px;border-color:rgba(201,168,76,0.3);border-style:solid;opacity:0;transition:opacity 0.4s ease;pointer-events:none;z-index:2;}\n.mass-card::before{top:8px;left:8px;border-width:1px 0 0 1px;}\n.mass-card::after{bottom:8px;right:8px;border-width:0 1px 1px 0;}\n.mass-card:hover::before,.mass-card:hover::after{opacity:1;}\n\n.mass-card-top{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(201,168,76,0.12);}\n.mass-card-icon{width:32px;height:32px;flex-shrink:0;border:1px solid rgba(201,168,76,0.3);display:flex;align-items:center;justify-content:center;transition:border-color 0.3s;}\n.mass-card:hover .mass-card-icon{border-color:rgba(201,168,76,0.6);}\n.mass-card-icon svg{width:14px;height:14px;fill:none;stroke:#c9a84c;stroke-width:1.5;}\n.mass-card-day{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c;font-family:'Lato',sans-serif;}\n.mass-card-type{font-size:11px;color:rgba(255,255,255,0.35);margin-top:2px;letter-spacing:1px;}\n.mass-times{display:flex;flex-direction:column;gap:8px;}\n.mass-time-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}\n.mass-time{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:0.5px;transition:text-shadow 0.3s;}\n.mass-card:hover .mass-time{text-shadow:0 0 16px rgba(201,168,76,0.15);}\n.mass-badge{font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:3px 8px;font-family:'Lato',sans-serif;white-space:nowrap;}\n.badge-fb{background:rgba(24,119,242,0.15);color:#6ba3f5;border:1px solid rgba(24,119,242,0.25);}\n.badge-vigil{background:rgba(201,168,76,0.1);color:#c9a84c;border:1px solid rgba(201,168,76,0.25);}\n.badge-peak{background:rgba(255,100,60,0.1);color:#ff9a7a;border:1px solid rgba(255,100,60,0.2);}\n.mass-note{font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:1px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(201,168,76,0.08);line-height:1.6;}\n.mass-special{background:rgba(201,168,76,0.04);border:1px solid rgba(201,168,76,0.15);border-top:none;padding:28px 32px;display:flex;align-items:center;gap:24px;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.mass-special.animate-in{opacity:1;transform:translateY(0);}\n.mass-special-icon{width:44px;height:44px;flex-shrink:0;border:1px solid rgba(201,168,76,0.3);display:flex;align-items:center;justify-content:center;transition:border-color 0.3s;}\n.mass-special:hover .mass-special-icon{border-color:rgba(201,168,76,0.6);}\n.mass-special-icon svg{width:18px;height:18px;fill:none;stroke:#c9a84c;stroke-width:1.5;}\n.mass-special-label{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:#c9a84c;margin-bottom:4px;}\n.mass-special-desc{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.6;}\n.mass-special-link{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:8px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#e8d08a;text-decoration:none !important;border-bottom:1px solid rgba(201,168,76,0.3);padding-bottom:4px;font-family:'Lato',sans-serif;white-space:nowrap;transition:color 0.3s;}\n.mass-special-link:hover{color:#fff;}\n.mass-special-link svg{width:12px;height:12px;stroke:#c9a84c;fill:none;stroke-width:2;transition:transform 0.3s;}\n.mass-special-link:hover svg{transform:translateX(4px);}\n.mass-fb-strip{margin-top:24px;background:rgba(24,119,242,0.06);border:1px solid rgba(24,119,242,0.15);padding:16px 24px;display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.mass-fb-strip.animate-in{opacity:1;transform:translateY(0);}\n.mass-fb-strip svg{width:18px;height:18px;fill:#6ba3f5;flex-shrink:0;}\n.mass-fb-strip span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);}\n.mass-fb-strip strong{color:#6ba3f5;font-weight:400;}\n\n\/* \u2500\u2500 AMBIENT PARTICLES \u2500\u2500 *\/\n.mass-particle{position:absolute;border-radius:50%;background:rgba(201,168,76,0.06);pointer-events:none;}\n.mass-particle:nth-child(1){width:200px;height:200px;top:-50px;left:-80px;animation:massFloat 14s ease-in-out infinite;}\n.mass-particle:nth-child(2){width:150px;height:150px;bottom:-40px;right:5%;animation:massFloat 18s ease-in-out infinite reverse;}\n.mass-particle:nth-child(3){width:90px;height:90px;top:35%;right:-30px;animation:massFloat 11s ease-in-out infinite 3s;}\n.mass-particle:nth-child(4){width:60px;height:60px;bottom:20%;left:8%;animation:massFloat 16s ease-in-out infinite 1s;}\n@keyframes massFloat{\n  0%,100%{transform:translateY(0) scale(1);opacity:0.4;}\n  50%{transform:translateY(-20px) scale(1.08);opacity:0.85;}\n}\n\n\/* \u2500\u2500 CROSS PULSE \u2500\u2500 *\/\n.mass-bg-cross{animation:massCrossPulse 8s ease-in-out infinite;}\n@keyframes massCrossPulse{\n  0%,100%{opacity:0.02;transform:translateY(-50%) scale(1);}\n  50%{opacity:0.04;transform:translateY(-50%) scale(1.03);}\n}\n\n\/* \u2500\u2500 BADGE PULSE \u2500\u2500 *\/\n.badge-fb{animation:massBadgePulse 3s ease-in-out infinite;}\n@keyframes massBadgePulse{\n  0%,100%{box-shadow:0 0 0 0 rgba(24,119,242,0);}\n  50%{box-shadow:0 0 8px 0 rgba(24,119,242,0.15);}\n}\n\n@media(max-width:900px){\n  .mass-grid{grid-template-columns:repeat(2,1fr);}\n  .mass-section{padding:60px 24px;}\n  .mass-special{flex-wrap:wrap;}\n  .mass-special-link{margin-left:0;}\n}\n@media(max-width:500px){\n  .mass-grid{grid-template-columns:1fr;}\n}\n<\/style>\n\n<section class=\"mass-section\">\n  <div class=\"mass-particle\"><\/div>\n  <div class=\"mass-particle\"><\/div>\n  <div class=\"mass-particle\"><\/div>\n  <div class=\"mass-particle\"><\/div>\n  <div class=\"mass-bg-cross\">\n    <svg viewBox=\"0 0 24 24\"><path d=\"M11 2h2v7h7v2h-7v11h-2V11H4V9h7V2z\"><\/path><\/svg>\n  <\/div>\n  <div class=\"mass-inner\">\n\n    <div class=\"mass-header\">\n      <p class=\"mass-eyebrow\">Holy Mass<\/p>\n      <h2 class=\"mass-title\">Weekly Mass Schedule<\/h2>\n      <p class=\"mass-subtitle\">Catanauan Parish \u00b7 Immaculate Conception<\/p>\n    <\/div>\n\n    <div class=\"mass-grid\">\n\n      <div class=\"mass-card\">\n        <div class=\"mass-card-top\">\n          <div class=\"mass-card-icon\">\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><polyline points=\"12 7 12 12 15 15\"><\/polyline><\/svg>\n          <\/div>\n          <div>\n            <div class=\"mass-card-day\">Monday \u2013 Friday<\/div>\n            <div class=\"mass-card-type\">Weekday Mass<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"mass-times\">\n          <div class=\"mass-time-row\">\n            <span class=\"mass-time\">6:00 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">AM<\/small><\/span>\n          <\/div>\n          <div class=\"mass-time-row\">\n            <span class=\"mass-time\">6:00 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">PM<\/small><\/span>\n            <span class=\"mass-badge badge-fb\">FB Live<\/span>\n          <\/div>\n        <\/div>\n        <p class=\"mass-note\">Livestream via Facebook<br>5:15 \u2013 6:15 PM<\/p>\n      <\/div>\n\n      <div class=\"mass-card\">\n        <div class=\"mass-card-top\">\n          <div class=\"mass-card-icon\">\n            <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\n          <\/div>\n          <div>\n            <div class=\"mass-card-day\">Saturday<\/div>\n            <div class=\"mass-card-type\">Vigil Mass<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"mass-times\">\n          <div class=\"mass-time-row\">\n            <span class=\"mass-time\">6:00 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">AM<\/small><\/span>\n          <\/div>\n          <div class=\"mass-time-row\">\n            <span class=\"mass-time\">6:00 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">PM<\/small><\/span>\n            <span class=\"mass-badge badge-vigil\">Vigil<\/span>\n          <\/div>\n        <\/div>\n        <p class=\"mass-note\">6:00 PM is the Anticipated<br>Sunday Mass<\/p>\n      <\/div>\n\n      <div class=\"mass-card\">\n        <div class=\"mass-card-top\">\n          <div class=\"mass-card-icon\">\n            <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"4\"><\/line><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"22\"><\/line><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"><\/line><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"><\/line><line x1=\"2\" y1=\"12\" x2=\"4\" y2=\"12\"><\/line><line x1=\"20\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"><\/line><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"><\/line><\/svg>\n          <\/div>\n          <div>\n            <div class=\"mass-card-day\">Sunday<\/div>\n            <div class=\"mass-card-type\">Sunday Masses<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"mass-times\">\n          <div class=\"mass-time-row\">\n            <span class=\"mass-time\">6:00 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">AM<\/small><\/span>\n            <span class=\"mass-badge badge-fb\">FB Live<\/span>\n          <\/div>\n          <div class=\"mass-time-row\"><span class=\"mass-time\">8:00 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">AM<\/small><\/span><\/div>\n          <div class=\"mass-time-row\"><span class=\"mass-time\">9:30 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">AM<\/small><\/span><\/div>\n          <div class=\"mass-time-row\"><span class=\"mass-time\">2:30 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">PM<\/small><\/span><\/div>\n          <div class=\"mass-time-row\">\n            <span class=\"mass-time\">4:00 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">PM<\/small><\/span>\n            <span class=\"mass-badge badge-peak\">Peak<\/span>\n          <\/div>\n          <div class=\"mass-time-row\">\n            <span class=\"mass-time\">6:00 <small style=\"font-size:13px;color:rgba(255,255,255,0.4)\">PM<\/small><\/span>\n            <span class=\"mass-badge badge-fb\">FB Live<\/span>\n          <\/div>\n        <\/div>\n        <p class=\"mass-note\">Peaks at 4:00 \u2013 6:00 PM<\/p>\n      <\/div>\n\n      <div class=\"mass-card\">\n        <div class=\"mass-card-top\">\n          <div class=\"mass-card-icon\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n          <\/div>\n          <div>\n            <div class=\"mass-card-day\">First Friday<\/div>\n            <div class=\"mass-card-type\">Special Devotion<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"mass-times\">\n          <div class=\"mass-time-row\">\n            <span class=\"mass-time\" style=\"font-size:15px;color:rgba(255,255,255,0.5)\">Special<br>Masses<\/span>\n          <\/div>\n        <\/div>\n        <p class=\"mass-note\">Additional masses &amp; special devotions. Check Facebook page for exact times.<\/p>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"mass-special\">\n      <div class=\"mass-special-icon\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M18 8h1a4 4 0 0 1 0 8h-1\"><\/path><path d=\"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z\"><\/path><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"4\"><\/line><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\"><\/line><line x1=\"14\" y1=\"1\" x2=\"14\" y2=\"4\"><\/line><\/svg>\n      <\/div>\n      <div class=\"mass-special-text\">\n        <p class=\"mass-special-label\">Special Devotions &amp; Events<\/p>\n        <p class=\"mass-special-desc\">Additional masses, novenas, and devotions may be scheduled. Always check our Facebook page for the latest announcements.<\/p>\n      <\/div>\n      <a href=\"https:\/\/www.facebook.com\/immaculateconceptioncatanauan\" class=\"mass-special-link\" target=\"_blank\">\n        Visit Facebook\n        <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n      <\/a>\n    <\/div>\n\n    <div class=\"mass-fb-strip\">\n      <svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"><\/path><\/svg>\n      <span><strong>FB Live<\/strong> &nbsp;masses streamed daily at 6:00 PM weekdays &amp; 6:00 AM Sunday \u2014 join us at the Immaculate Conception Parish Facebook page.<\/span>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var header  = document.querySelector('.mass-header');\n  var cards   = document.querySelectorAll('.mass-card');\n  var special = document.querySelector('.mass-special');\n  var fbStrip = document.querySelector('.mass-fb-strip');\n\n  function massOnScroll(){\n    var wh = window.innerHeight;\n\n    if(header){\n      var r = header.getBoundingClientRect();\n      if(r.top < wh * 0.85) header.classList.add('animate-in');\n    }\n\n    cards.forEach(function(card, i){\n      var r = card.getBoundingClientRect();\n      if(r.top < wh * 0.88){\n        setTimeout(function(){\n          card.classList.add('animate-in');\n        }, i * 100);\n      }\n    });\n\n    if(special){\n      var r3 = special.getBoundingClientRect();\n      if(r3.top < wh * 0.9) special.classList.add('animate-in');\n    }\n\n    if(fbStrip){\n      var r4 = fbStrip.getBoundingClientRect();\n      if(r4.top < wh * 0.9) fbStrip.classList.add('animate-in');\n    }\n  }\n\n  window.addEventListener('scroll', massOnScroll, {passive:true});\n  massOnScroll();\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-7ba59451 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-5'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n\n.updates-section{background:#0b0f1a;padding:90px 40px;font-family:'Lato',sans-serif;position:relative;overflow:hidden;}\n.updates-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);}\n.updates-inner{max-width:1100px;margin:0 auto;}\n\n.updates-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;flex-wrap:wrap;gap:20px;}\n\n.updates-eyebrow{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:#c9a84c;margin-bottom:12px;display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.updates-header.animate-in .updates-eyebrow{opacity:1;transform:translateY(0);transition-delay:0.1s;}\n.updates-eyebrow::before{content:'';display:block;width:30px;height:1px;background:rgba(201,168,76,0.5);}\n\n.updates-title{font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,40px);font-weight:700;color:#fff;line-height:1.2;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.updates-header.animate-in .updates-title{opacity:1;transform:translateY(0);transition-delay:0.2s;}\n.updates-title em{font-style:italic;color:#c9a84c;}\n\n.updates-tabs{display:flex;gap:1px;background:rgba(201,168,76,0.12);flex-wrap:wrap;opacity:0;transform:translateX(20px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.updates-header.animate-in .updates-tabs{opacity:1;transform:translateX(0);transition-delay:0.35s;}\n.updates-tab{padding:10px 20px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);font-family:'Lato',sans-serif;background:#0b0f1a;cursor:pointer;border:none;transition:all 0.3s;white-space:nowrap;}\n.updates-tab.active{background:rgba(201,168,76,0.1);color:#c9a84c;}\n.updates-tab:hover{color:#c9a84c;}\n\n.updates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,168,76,0.1);}\n\n.update-card{background:#0b0f1a;transition:background 0.3s;display:flex;flex-direction:column;opacity:0;transform:translateY(25px);transition:opacity 0.6s ease,transform 0.6s ease,background 0.3s;}\n.update-card.animate-in{opacity:1;transform:translateY(0);}\n.update-card:hover{background:rgba(201,168,76,0.04);}\n\n.update-card{position:relative;}\n.update-card::before,.update-card::after{content:'';position:absolute;width:12px;height:12px;border-color:rgba(201,168,76,0.3);border-style:solid;opacity:0;transition:opacity 0.4s ease;pointer-events:none;z-index:2;}\n.update-card::before{top:8px;left:8px;border-width:1px 0 0 1px;}\n.update-card::after{bottom:8px;right:8px;border-width:0 1px 1px 0;}\n.update-card:hover::before,.update-card:hover::after{opacity:1;}\n\n.update-card-img{width:100%;aspect-ratio:16\/9;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(201,168,76,0.08);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}\n.update-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease,filter 0.5s ease;}\n.update-card:hover .update-card-img img{transform:scale(1.05);filter:brightness(1.05);}\n.update-card-img svg{width:32px;height:32px;stroke:rgba(201,168,76,0.2);fill:none;stroke-width:1.5;}\n\n.update-card-img::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.06),transparent);z-index:2;pointer-events:none;transition:none;}\n.update-card:hover .update-card-img::before{animation:updatesShimmer 0.8s ease forwards;}\n@keyframes updatesShimmer{0%{left:-100%;}100%{left:150%;}}\n\n.update-card-cat{position:absolute;top:12px;left:12px;font-size:8px;letter-spacing:2px;text-transform:uppercase;background:rgba(11,15,26,0.9);color:#c9a84c;border:1px solid rgba(201,168,76,0.3);padding:4px 10px;font-family:'Lato',sans-serif;z-index:3;}\n\n.update-card-body{padding:24px;flex:1;display:flex;flex-direction:column;}\n.update-card-date{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:12px;}\n.update-card-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:10px;flex:1;}\n.update-card-excerpt{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.7;margin-bottom:20px;}\n.update-card-link{display:inline-flex;align-items:center;gap:8px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c;text-decoration:none !important;border-bottom:1px solid rgba(201,168,76,0.25);padding-bottom:4px;width:fit-content;transition:color 0.3s;font-family:'Lato',sans-serif;}\n.update-card-link svg{width:11px;height:11px;stroke:#c9a84c;fill:none;stroke-width:2;transition:transform 0.3s;}\n.update-card-link:hover{color:#fff !important;}\n.update-card-link:hover svg{transform:translateX(3px);}\n\n.updates-footer{margin-top:1px;background:rgba(201,168,76,0.04);border:1px solid rgba(201,168,76,0.12);border-top:none;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.updates-footer.animate-in{opacity:1;transform:translateY(0);}\n.updates-footer span{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.25);}\n.updates-all-link{display:inline-flex;align-items:center;gap:8px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#e8d08a;text-decoration:none !important;border-bottom:1px solid rgba(201,168,76,0.3);padding-bottom:3px;font-family:'Lato',sans-serif;transition:color 0.3s;}\n.updates-all-link:hover{color:#fff !important;}\n.updates-all-link svg{width:11px;height:11px;stroke:#c9a84c;fill:none;stroke-width:2;}\n\n.updates-loading{grid-column:1\/-1;padding:60px;text-align:center;color:rgba(201,168,76,0.4);font-size:10px;letter-spacing:3px;text-transform:uppercase;}\n\n.updates-particle{position:absolute;border-radius:50%;background:rgba(201,168,76,0.06);pointer-events:none;}\n.updates-particle:nth-child(1){width:180px;height:180px;top:-50px;right:-60px;animation:updatesFloat 13s ease-in-out infinite;}\n.updates-particle:nth-child(2){width:120px;height:120px;bottom:-30px;left:5%;animation:updatesFloat 17s ease-in-out infinite reverse;}\n.updates-particle:nth-child(3){width:70px;height:70px;top:40%;left:-15px;animation:updatesFloat 10s ease-in-out infinite 2s;}\n@keyframes updatesFloat{\n  0%,100%{transform:translateY(0) scale(1);opacity:0.4;}\n  50%{transform:translateY(-20px) scale(1.08);opacity:0.85;}\n}\n\n.skeleton-card{background:#0b0f1a;display:flex;flex-direction:column;}\n.skeleton-img{width:100%;aspect-ratio:16\/9;animation:skeletonShimmer 1.8s ease-in-out infinite;background:linear-gradient(90deg,rgba(201,168,76,0.03) 0%,rgba(201,168,76,0.08) 40%,rgba(201,168,76,0.03) 80%);background-size:300% 100%;border-bottom:1px solid rgba(201,168,76,0.08);}\n.skeleton-body{padding:24px;display:flex;flex-direction:column;gap:10px;}\n.skeleton-bone{background:linear-gradient(90deg,rgba(201,168,76,0.04) 0%,rgba(201,168,76,0.1) 40%,rgba(201,168,76,0.04) 80%);background-size:300% 100%;animation:skeletonShimmer 1.8s ease-in-out infinite;border-radius:2px;}\n.skeleton-date{width:40%;height:10px;}\n.skeleton-title{width:90%;height:14px;}\n.skeleton-title-2{width:60%;height:14px;}\n.skeleton-excerpt{width:100%;height:10px;}\n.skeleton-excerpt-2{width:85%;height:10px;}\n.skeleton-excerpt-3{width:50%;height:10px;}\n.skeleton-link{width:30%;height:10px;margin-top:6px;}\n@keyframes skeletonShimmer{\n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n\n@media(max-width:900px){.updates-grid{grid-template-columns:repeat(2,1fr);}.updates-section{padding:60px 24px;}.updates-header{flex-direction:column;align-items:flex-start;}}\n@media(max-width:540px){.updates-grid{grid-template-columns:1fr;}}\n<\/style>\n\n<section class=\"updates-section\">\n  <div class=\"updates-particle\"><\/div>\n  <div class=\"updates-particle\"><\/div>\n  <div class=\"updates-particle\"><\/div>\n  <div class=\"updates-inner\">\n\n    <div class=\"updates-header\">\n      <div>\n        <p class=\"updates-eyebrow\">Stay Informed<\/p>\n        <h2 class=\"updates-title\">Latest <em>Parish Updates<\/em><\/h2>\n      <\/div>\n      <div class=\"updates-tabs\" id=\"updatesTabs\"><\/div>\n    <\/div>\n\n    <div class=\"updates-grid\" id=\"updatesGrid\"><\/div>\n\n    <div class=\"updates-footer\">\n      <span id=\"updatesCount\"><\/span>\n      <a class=\"updates-all-link\" id=\"updatesAllLink\" href=\"#\">\n        View All Posts\n        <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n\n  var SITE_URL = 'https:\/\/demo2.yinwoodweb.com\/catanauan1';\n  var API_URL  = SITE_URL + '\/wp-json\/wp\/v2';\n  var BLOG_URL = SITE_URL + '\/updates\/';\n\n  var grid    = document.getElementById('updatesGrid');\n  var tabsEl  = document.getElementById('updatesTabs');\n  var countEl = document.getElementById('updatesCount');\n  var allLink = document.getElementById('updatesAllLink');\n\n  allLink.href = BLOG_URL;\n\n  \/* \u2500\u2500 show skeleton immediately \u2500\u2500 *\/\n  showSkeleton();\n\n  \/* \u2500\u2500 scroll reveal \u2500\u2500 *\/\n  var header = document.querySelector('.updates-header');\n  var footer = document.querySelector('.updates-footer');\n\n  function updatesOnScroll(){\n    var wh = window.innerHeight;\n    if(header){\n      var r = header.getBoundingClientRect();\n      if(r.top < wh * 0.85) header.classList.add('animate-in');\n    }\n    if(footer){\n      var r2 = footer.getBoundingClientRect();\n      if(r2.top < wh * 0.92) footer.classList.add('animate-in');\n    }\n  }\n  window.addEventListener('scroll', updatesOnScroll, {passive:true});\n  updatesOnScroll();\n\n  \/* \u2500\u2500 skeleton loader \u2500\u2500 *\/\n  function showSkeleton(){\n    var html = '';\n    for(var i = 0; i < 6; i++){\n      html +=\n        '<div class=\"skeleton-card\">' +\n          '<div class=\"skeleton-img\"><\/div>' +\n          '<div class=\"skeleton-body\">' +\n            '<div class=\"skeleton-bone skeleton-date\"><\/div>' +\n            '<div class=\"skeleton-bone skeleton-title\"><\/div>' +\n            '<div class=\"skeleton-bone skeleton-title-2\"><\/div>' +\n            '<div class=\"skeleton-bone skeleton-excerpt\"><\/div>' +\n            '<div class=\"skeleton-bone skeleton-excerpt-2\"><\/div>' +\n            '<div class=\"skeleton-bone skeleton-excerpt-3\"><\/div>' +\n            '<div class=\"skeleton-bone skeleton-link\"><\/div>' +\n          '<\/div>' +\n        '<\/div>';\n    }\n    grid.innerHTML = html;\n  }\n\n  function animateCards(){\n    var cards = grid.querySelectorAll('.update-card');\n    cards.forEach(function(card, i){\n      setTimeout(function(){\n        card.classList.add('animate-in');\n      }, i * 100);\n    });\n  }\n\n  function formatDate(str){\n    return new Date(str).toLocaleDateString('en-PH',{year:'numeric',month:'short',day:'numeric'});\n  }\n\n  function stripHtml(html){\n    var div = document.createElement('div');\n    div.innerHTML = html;\n    return (div.textContent || div.innerText || '').trim();\n  }\n\n  function getCategory(embedded){\n    var cat = 'General';\n    if(!embedded || !embedded['wp:term']) return cat;\n    var found = false;\n    embedded['wp:term'].forEach(function(group){\n      if(found) return;\n      group.forEach(function(term){\n        if(!found && term.taxonomy === 'category' && term.name){\n          cat = term.name;\n          found = true;\n        }\n      });\n    });\n    return cat;\n  }\n\n  function getThumb(embedded, title){\n    if(\n      embedded &&\n      embedded['wp:featuredmedia'] &&\n      embedded['wp:featuredmedia'][0] &&\n      embedded['wp:featuredmedia'][0].source_url\n    ){\n      return '<img decoding=\"async\" src=\"'+embedded['wp:featuredmedia'][0].source_url+'\" alt=\"'+title+'\" loading=\"lazy\">';\n    }\n    return '<svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>';\n  }\n\n  \/* \u2500\u2500 build a link into the custom Updates single-post route \u2500\u2500 *\/\n  function updatesLink(post){\n    return SITE_URL + '\/updates\/?update=' + encodeURIComponent(post.slug);\n  }\n\n  function render(posts){\n    grid.innerHTML = '';\n    if(!posts || !posts.length){\n      grid.innerHTML = '<div class=\"updates-loading\">No posts found.<\/div>';\n      countEl.textContent = '0 posts';\n      return;\n    }\n    posts.forEach(function(p){\n      var cat     = getCategory(p._embedded);\n      var thumb   = getThumb(p._embedded, p.title.rendered);\n      var excerpt = stripHtml(p.excerpt.rendered)\n                      .replace(\/$$(&hellip;|[\\u2026\u2026])$$\/g,'')\n                      .trim();\n      if(excerpt.length > 110) excerpt = excerpt.substring(0,110) + '\u2026';\n\n      var card = document.createElement('div');\n      card.className = 'update-card';\n      card.innerHTML =\n        '<div class=\"update-card-img\">'+\n          thumb+\n          '<span class=\"update-card-cat\">'+cat+'<\/span>'+\n        '<\/div>'+\n        '<div class=\"update-card-body\">'+\n          '<div class=\"update-card-date\">'+formatDate(p.date)+'<\/div>'+\n          '<h3 class=\"update-card-title\">'+p.title.rendered+'<\/h3>'+\n          '<p class=\"update-card-excerpt\">'+excerpt+'<\/p>'+\n          '<a href=\"'+updatesLink(p)+'\" class=\"update-card-link\">Read More '+\n            '<svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>'+\n          '<\/a>'+\n        '<\/div>';\n      grid.appendChild(card);\n    });\n    countEl.textContent = 'Showing '+posts.length+' post'+(posts.length !== 1 ? 's' : '');\n    animateCards();\n  }\n\n  function setActiveTab(btn){\n    tabsEl.querySelectorAll('.updates-tab').forEach(function(t){ t.classList.remove('active'); });\n    btn.classList.add('active');\n  }\n\n  function fetchPosts(catId, catSlug){\n    showSkeleton();\n\n    var url = API_URL+'\/posts?per_page=6&_embed=1&orderby=date&order=desc';\n    if(catId){\n      url += '&categories='+catId;\n      allLink.href = SITE_URL + '\/updates\/?cat=' + encodeURIComponent(catSlug);\n    } else {\n      allLink.href = BLOG_URL;\n    }\n\n    var start = Date.now();\n    fetch(url)\n      .then(function(r){ return r.json(); })\n      .then(function(posts){\n        var elapsed = Date.now() - start;\n        var remaining = Math.max(0, 400 - elapsed);\n        setTimeout(function(){ render(posts); }, remaining);\n      })\n      .catch(function(){ grid.innerHTML = '<div class=\"updates-loading\">Could not load posts.<\/div>'; });\n  }\n\n  function buildTabs(categories){\n    tabsEl.innerHTML = '';\n\n    var allBtn = document.createElement('button');\n    allBtn.className = 'updates-tab active';\n    allBtn.textContent = 'All';\n    allBtn.onclick = function(){\n      setActiveTab(allBtn);\n      fetchPosts('', '');\n    };\n    tabsEl.appendChild(allBtn);\n\n    categories\n      .filter(function(c){ return c.slug !== 'uncategorized' && c.count > 0; })\n      .forEach(function(c){\n        var btn = document.createElement('button');\n        btn.className = 'updates-tab';\n        btn.textContent = c.name;\n        btn.onclick = function(){\n          setActiveTab(btn);\n          fetchPosts(c.id, c.slug);\n        };\n        tabsEl.appendChild(btn);\n      });\n  }\n\n  fetch(API_URL+'\/categories?per_page=100&orderby=name&order=asc')\n    .then(function(r){ return r.json(); })\n    .then(function(cats){\n      buildTabs(cats);\n      fetchPosts('', '');\n    })\n    .catch(function(){\n      tabsEl.innerHTML = '';\n      var allBtn = document.createElement('button');\n      allBtn.className = 'updates-tab active';\n      allBtn.textContent = 'All';\n      allBtn.onclick = function(){ fetchPosts('', ''); };\n      tabsEl.appendChild(allBtn);\n      fetchPosts('', '');\n    });\n\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>&#8220;And I tell you, you are Peter, and on this rock I will build my church, and the gates of [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"@media only screen and (max-width: 767px) {\n.uagb-slider-container .swiper-button-prev, .uagb-slider-container .swiper-button-next, .uagb-slick-carousel button.slick-arrow {\n    display: none;\n}\n}\n\n.dashicons {\n    color: #6528f7;\n}\n.dashicons:hover {\n    color: #0f172a;\n}\n.single .post-navigation {\n    padding: 10px 0 0;\n}\n\n@media (max-width: 768px) {\n    .single .post-navigation {\n        padding: 10px 0;\n    }\n}","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"slim_seo":{"title":"Immaculate Conception Parish - Diocese of Gumaca","description":""},"footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Yin Wood","author_link":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/blogs\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":"&#8220;And I tell you, you are Peter, and on this rock I will build my church, and the gates of [&hellip;]","_links":{"self":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":206,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":1541,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/28\/revisions\/1541"}],"wp:attachment":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/media?parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}