/*==================================================== NEW CHURCH BUILDING (RAJA HOPE FOUNDATION) Add this file to your : ====================================================*/ :root{ --rhf-navy:#050816; --rhf-navy-soft:#0c1024; --rhf-gold:#d4af37; --rhf-gold-soft:#e6c04a; } /*============================== HERO ==============================*/ .rhf-hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--rhf-navy); padding:190px 0 100px; } .rhf-glow{ position:absolute; border-radius:50%; filter:blur(100px); z-index:0; pointer-events:none; } .glow-a{ width:560px; height:560px; top:-220px; right:-160px; background:radial-gradient(circle, rgba(212,175,55,.28) 0%, rgba(212,175,55,0) 70%); } .glow-b{ width:480px; height:480px; bottom:-220px; left:-160px; background:radial-gradient(circle, rgba(20,90,120,.5) 0%, rgba(20,90,120,0) 70%); } .rhf-hero .container{ position:relative; z-index:1; } .rhf-crumb{ display:flex; align-items:center; gap:10px; color:#9aa0bd; font-size:13px; margin-bottom:26px; } .rhf-crumb a{ color:#9aa0bd; text-decoration:none; } .rhf-crumb a:hover{ color:var(--rhf-gold); } .rhf-crumb i{ font-size:9px; opacity:.6; } .rhf-crumb span:last-child{ color:var(--rhf-gold); } .rhf-eyebrow{ display:inline-flex; align-items:center; gap:12px; color:var(--rhf-gold); margin-bottom:22px; } .ray-icon{ width:24px; height:24px; color:var(--rhf-gold); } .rhf-eyebrow span{ font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; } .rhf-title{ font-family:'Poppins',sans-serif; font-weight:800; color:#fff; font-size:clamp(38px, 5.5vw, 64px); line-height:1.1; margin-bottom:26px; } .rhf-title span{ background:linear-gradient(90deg, #fff, var(--rhf-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .rhf-lead{ max-width:640px; color:#c7cbdc; font-size:19px; line-height:1.8; } /*============================== SHARED SECTION BITS ==============================*/ .rhf-tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--rhf-gold); margin-bottom:14px; } .rhf-h2{ font-family:'Poppins',sans-serif; font-weight:800; color:#fff; font-size:clamp(26px, 3vw, 36px); line-height:1.2; margin-bottom:20px; } .rhf-text{ color:#c7cbdc; font-size:16.5px; line-height:1.85; margin-bottom:18px; } .rhf-center{ max-width:560px; margin:0 auto; text-align:center; } .rhf-section-head{ text-align:center; max-width:680px; margin:0 auto 56px; } /*============================== VISION ==============================*/ .rhf-vision{ background:var(--rhf-navy); padding:100px 0; border-top:1px solid rgba(255,255,255,.06); } .rhf-frame{ position:relative; border-radius:16px; overflow:hidden; box-shadow: 0 25px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.3); } .rhf-frame img{ width:100%; display:block; } /*============================== FACILITIES ==============================*/ .rhf-facilities{ background: radial-gradient(ellipse at top, rgba(212,175,55,.07) 0%, rgba(212,175,55,0) 55%), var(--rhf-navy); padding:100px 0; border-top:1px solid rgba(255,255,255,.06); } .rhf-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; } .rhf-card{ background:var(--rhf-navy-soft); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:34px 28px; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .rhf-card:hover{ transform:translateY(-6px); border-color:rgba(212,175,55,.4); box-shadow:0 20px 45px rgba(0,0,0,.4); } .rhf-icon{ width:52px; height:52px; border-radius:14px; background:rgba(212,175,55,.12); color:var(--rhf-gold); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:20px; } .rhf-card h3{ font-family:'Poppins',sans-serif; font-weight:700; color:#fff; font-size:19px; margin-bottom:10px; } .rhf-card p{ color:#a9aec4; font-size:14.5px; line-height:1.75; margin:0; } /* first card (3,000 seats) reads as a stat, not a sentence */ .rhf-card:first-child h3{ font-size:32px; color:var(--rhf-gold); } /*============================== GALLERY ==============================*/ .rhf-gallery{ background:var(--rhf-navy); padding:100px 0; border-top:1px solid rgba(255,255,255,.06); } .rhf-gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:220px; gap:18px; } .rhf-gimg{ position:relative; border-radius:14px; overflow:hidden; cursor:zoom-in; box-shadow:0 0 0 1px rgba(255,255,255,.08); } .rhf-gimg.span-2{ grid-column:span 2; } .rhf-gimg img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease, filter .4s ease; filter:brightness(.88); } .rhf-gimg::after{ content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(5,8,22,.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; opacity:0; transition:opacity .3s ease; } .rhf-gimg:hover::after{ opacity:1; } .rhf-gimg:hover img{ transform:scale(1.06); filter:brightness(1); } /* Lightbox */ .rhf-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(5,8,22,.94); display:flex; align-items:center; justify-content:center; padding:40px; opacity:0; visibility:hidden; transition:opacity .3s ease; } .rhf-lightbox.active{ opacity:1; visibility:visible; } .rhf-lightbox img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); } .rhf-lightbox-close{ position:absolute; top:26px; right:30px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; font-size:18px; cursor:pointer; transition:.3s; } .rhf-lightbox-close:hover{ background:var(--rhf-gold); color:#111; border-color:var(--rhf-gold); } /*============================== CTA ==============================*/ .rhf-cta{ background:var(--rhf-navy); padding:0 0 110px; } .rhf-cta-box{ position:relative; overflow:hidden; text-align:center; padding:64px 40px; border-radius:24px; background: radial-gradient(ellipse at top left, rgba(212,175,55,.18) 0%, rgba(212,175,55,0) 60%), linear-gradient(135deg, #0c1024, #0a1330); border:1px solid rgba(212,175,55,.25); } .rhf-cta-box h2{ font-family:'Poppins',sans-serif; font-weight:800; color:#fff; font-size:clamp(26px, 3.2vw, 36px); margin-bottom:16px; } .rhf-cta-box p{ max-width:560px; margin:0 auto 34px; color:#c7cbdc; font-size:16.5px; line-height:1.8; } .rhf-cta-buttons{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; } .rhf-cta-buttons .gold-btn, .rhf-cta-buttons .glass-btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 32px; border-radius:50px; font-weight:600; text-decoration:none; transition:.35s; } .rhf-cta-buttons .gold-btn{ background:var(--rhf-gold); color:#111; } .rhf-cta-buttons .gold-btn:hover{ background:var(--rhf-gold-soft); transform:translateY(-4px); box-shadow:0 18px 40px rgba(212,175,55,.35); } .rhf-cta-buttons .glass-btn{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#fff; } .rhf-cta-buttons .glass-btn:hover{ background:rgba(255,255,255,.12); transform:translateY(-4px); } /*========================== TABLET ===========================*/ @media(max-width:991px){ .rhf-hero{ padding:160px 0 80px; } .rhf-grid{ grid-template-columns:repeat(2, 1fr); } .rhf-gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:200px; } .rhf-gimg.span-2{ grid-column:span 2; } } /*========================== MOBILE ===========================*/ @media(max-width:576px){ .rhf-hero{ padding:150px 0 60px; } .rhf-vision, .rhf-facilities, .rhf-gallery{ padding:70px 0; } .rhf-grid{ grid-template-columns:1fr; } .rhf-gallery-grid{ grid-template-columns:1fr; grid-auto-rows:220px; } .rhf-gimg.span-2{ grid-column:span 1; } .rhf-cta-box{ padding:44px 24px; } .rhf-cta-buttons{ flex-direction:column; } }