/* ========================================================= Mabesh — production stylesheet Glassmorphic surfaces, silky motion, 3 switchable themes (set via , see includes/header.php) ========================================================= */ /* ---------------- Shared mechanics (theme-independent) ---------------- */ :root{ --radius-s:8px; --radius-m:16px; --radius-l:28px; --blur-sm:blur(10px); --blur-md:blur(18px); --blur-lg:blur(30px); --ease-silk:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1); --dur-fast:.25s; --dur-med:.45s; --dur-slow:.8s; --font-display:"Playfair Display", Georgia, serif; --font-body:"Inter", -apple-system, "Segoe UI", Arial, sans-serif; } /* ---------------- Theme 1: Navy & Gold (default) ---------------- */ :root, [data-theme="navy-gold"]{ --brand-900:#0E1A33; --brand-800:#152A4F; --brand-700:#1B2A4A; --brand-600:#2c4270; --accent-500:#B8912F; --accent-600:#d9b25c; --accent-100:#F5EACD; --surface:#FAF8F3; --surface-alt:#F2EFE6; --ink-900:#1C2430; --ink-600:#5B6472; --glass-light:rgba(255,255,255,.62); --glass-light-strong:rgba(255,255,255,.82); --glass-border-light:rgba(255,255,255,.55); --glass-dark:rgba(14,26,51,.48); --glass-dark-strong:rgba(14,26,51,.68); --glass-border-dark:rgba(255,255,255,.16); --shadow-soft:0 12px 30px -14px rgba(14,26,51,.30); --shadow-glass:0 8px 24px -12px rgba(14,26,51,.22), 0 2px 8px -2px rgba(14,26,51,.12), inset 0 1px 0 rgba(255,255,255,.5); --shadow-glass-dark:0 20px 50px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); } /* ---------------- Theme 2: Emerald Sanctuary ---------------- */ [data-theme="emerald-sanctuary"]{ --brand-900:#07231D; --brand-800:#0D3B33; --brand-700:#145C50; --brand-600:#1B8570; --accent-500:#C9A227; --accent-600:#E0BE55; --accent-100:#F2ECD2; --surface:#F7FBF9; --surface-alt:#EEF5F1; --ink-900:#152420; --ink-600:#54655F; --glass-light:rgba(255,255,255,.62); --glass-light-strong:rgba(255,255,255,.82); --glass-border-light:rgba(255,255,255,.55); --glass-dark:rgba(7,35,29,.48); --glass-dark-strong:rgba(7,35,29,.68); --glass-border-dark:rgba(255,255,255,.16); --shadow-soft:0 12px 30px -14px rgba(7,35,29,.30); --shadow-glass:0 8px 24px -12px rgba(7,35,29,.22), 0 2px 8px -2px rgba(7,35,29,.12), inset 0 1px 0 rgba(255,255,255,.5); --shadow-glass-dark:0 20px 50px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); } /* ---------------- Theme 3: Royal Purple & Gold ---------------- */ [data-theme="royal-purple"]{ --brand-900:#1E0B3D; --brand-800:#2E1065; --brand-700:#40197E; --brand-600:#5B2A9E; --accent-500:#D4AF37; --accent-600:#E8C468; --accent-100:#F3E9D0; --surface:#FAF8FC; --surface-alt:#F1ECF7; --ink-900:#211530; --ink-600:#5D5468; --glass-light:rgba(255,255,255,.62); --glass-light-strong:rgba(255,255,255,.82); --glass-border-light:rgba(255,255,255,.55); --glass-dark:rgba(30,11,61,.48); --glass-dark-strong:rgba(30,11,61,.68); --glass-border-dark:rgba(255,255,255,.16); --shadow-soft:0 12px 30px -14px rgba(30,11,61,.32); --shadow-glass:0 8px 24px -12px rgba(30,11,61,.24), 0 2px 8px -2px rgba(30,11,61,.13), inset 0 1px 0 rgba(255,255,255,.5); --shadow-glass-dark:0 20px 50px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); } /* ---------------- Base ---------------- */ *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; overflow-x:hidden;} body{ font-family:var(--font-body); color:var(--ink-900); background:var(--surface); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; color:var(--brand-800); line-height:1.15;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} ul{list-style:none;} .container{max-width:1180px; margin:0 auto; padding:0 24px;} section{padding:72px 0;} p{color:var(--ink-600); margin:0 0 12px 0;} .lead{font-size:17px;} .eyebrow{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; color:var(--accent-600); display:block; margin-bottom:10px; } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1 !important; transform:none !important; transition:none !important;} *{animation:none !important; transition-duration:.01ms !important;} } /* ---------------- Scroll-reveal animation ---------------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--dur-slow) var(--ease-silk), transform var(--dur-slow) var(--ease-silk); will-change:opacity, transform; } .reveal.is-visible{opacity:1; transform:translateY(0);} .reveal-group > *:nth-child(1){transition-delay:0ms;} .reveal-group > *:nth-child(2){transition-delay:70ms;} .reveal-group > *:nth-child(3){transition-delay:140ms;} .reveal-group > *:nth-child(4){transition-delay:210ms;} .reveal-group > *:nth-child(5){transition-delay:280ms;} .reveal-group > *:nth-child(6){transition-delay:350ms;} .reveal-group > *:nth-child(7){transition-delay:420ms;} .reveal-group > *:nth-child(8){transition-delay:490ms;} /* ---------------- Buttons ---------------- */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:100px; font-weight:600; font-size:14.5px; border:1.5px solid transparent; cursor:pointer; transition:transform var(--dur-fast) var(--ease-silk), box-shadow var(--dur-fast) var(--ease-silk), background var(--dur-fast) var(--ease-silk); } .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--accent-500); color:#fff; box-shadow:var(--shadow-soft);} .btn-primary:hover{background:var(--accent-600); box-shadow:0 10px 22px -8px rgba(0,0,0,.3);} .btn-outline{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.7); color:#fff; backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); } .btn-outline:hover{background:rgba(255,255,255,.18);} .btn-solid{background:var(--brand-700); color:#fff;} .btn-solid:hover{background:var(--brand-600);} .btn-block{width:100%; justify-content:center;} .btn.disabled, .btn[disabled]{opacity:.55; cursor:not-allowed; transform:none !important;} /* ---------------- Header (glass, sticky, intensifies on scroll) ---------------- */ .site-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; background:var(--surface); border-bottom:1px solid var(--glass-border-light); box-shadow:0 2px 14px -8px rgba(0,0,0,.18); position:sticky; top:0; z-index:500; transition:box-shadow var(--dur-med) var(--ease-silk), padding var(--dur-med) var(--ease-silk); } .site-header.is-scrolled{ box-shadow:0 12px 34px -18px rgba(0,0,0,.32); padding-top:11px; padding-bottom:11px; } .nav-inner{display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1180px; margin:0 auto;} .logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; color:var(--brand-800);} .logo .mark{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--accent-500), var(--accent-600)); display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; font-weight:800; box-shadow:var(--shadow-soft); flex-shrink:0; transition:transform var(--dur-med) var(--ease-silk); } .logo:hover .mark{transform:scale(1.06) rotate(-3deg);} nav.nav-links{display:flex; align-items:center; gap:24px;} nav.nav-links a{ color:var(--ink-900); font-size:14.5px; font-weight:500; position:relative; padding:6px 0; transition:color var(--dur-fast) var(--ease-silk); } nav.nav-links a:hover, nav.nav-links a.active{color:var(--brand-700);} nav.nav-links a.active::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent-500);} .nav-cta{ background:var(--accent-500) !important; color:#fff !important; padding:9px 20px !important; border-radius:24px; font-weight:700 !important; } .nav-cta:hover{background:var(--accent-600) !important;} .nav-toggle{ display:none; background:none; border:none; color:var(--brand-800); font-size:22px; cursor:pointer; width:40px; height:40px; align-items:center; justify-content:center; position:relative; z-index:450; } .logo{position:relative; z-index:450;} .nav-toggle .icon-close{display:none;} .nav-toggle.open .icon-open{display:none;} .nav-toggle.open .icon-close{display:inline;} .site-header.menu-open .logo, .site-header.menu-open .nav-toggle{color:#fff;} @media (max-width:900px){ nav.nav-links{ position:fixed; top:0; right:0; bottom:0; width:min(320px, 84vw); z-index:400; background:var(--brand-900); background-image:linear-gradient(160deg, var(--glass-dark-strong), var(--brand-900) 70%); -webkit-backdrop-filter:var(--blur-lg); backdrop-filter:var(--blur-lg); flex-direction:column; align-items:flex-start; justify-content:center; padding:32px; gap:22px; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-16px); transition:opacity var(--dur-med) var(--ease-silk), transform var(--dur-med) var(--ease-silk), visibility var(--dur-med); box-shadow:-20px 0 50px -20px rgba(0,0,0,.6); } nav.nav-links.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);} nav.nav-links a{color:#fff; font-size:17px;} nav.nav-links a.active{color:var(--accent-600);} .nav-toggle{display:flex;} } /* ---------------- Status bar ---------------- */ .status-bar{ background:linear-gradient(90deg, var(--accent-500), var(--accent-600)); color:#fff; text-align:center; padding:11px 20px; font-size:14px; font-weight:600; letter-spacing:.3px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; } .status-dot{ width:9px; height:9px; border-radius:50%; background:#fff; animation:pulse 1.6s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%{box-shadow:0 0 0 8px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} } /* ================= HERO IMAGE SLIDER ================= */ .hero{ position:relative; min-height:min(92vh, 720px); overflow:hidden; display:flex; align-items:center; background:var(--brand-900); } .hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s var(--ease-silk), visibility 1.1s; display:flex; align-items:center; } .hero-slide.active{opacity:1; visibility:visible; z-index:1;} .hero-slide-bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--brand-800); } .hero-slide:not(.has-image) .hero-slide-bg{ background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 45%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 40px), linear-gradient(135deg, var(--brand-700), var(--brand-900) 70%); } .hero-slide-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.1) 100%); } .hero-content{ position:relative; z-index:2; max-width:620px; margin:0 32px; padding:40px 44px; background:var(--glass-dark); -webkit-backdrop-filter:var(--blur-md); backdrop-filter:var(--blur-md); border:1px solid var(--glass-border-dark); border-radius:var(--radius-l); box-shadow:var(--shadow-glass-dark); color:#fff; } .hero-content .eyebrow{color:var(--accent-600);} .hero-content h1{color:#fff; font-size:clamp(28px, 4vw, 44px); margin-bottom:14px;} .hero-content p{color:rgba(255,255,255,.82); margin-bottom:0;} .hero-btns{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;} .hero-dots{position:absolute; z-index:3; left:50%; bottom:26px; transform:translateX(-50%); display:flex; gap:10px;} .hero-dots button{ width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); background:rgba(255,255,255,.25); cursor:pointer; padding:0; transition:all var(--dur-fast) var(--ease-silk); } .hero-dots button.active{background:var(--accent-500); border-color:var(--accent-500); width:26px; border-radius:6px;} .hero-arrows{position:absolute; z-index:3; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 18px; pointer-events:none;} .hero-arrows button{ pointer-events:auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--glass-border-dark); background:var(--glass-dark); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk); } .hero-arrows button:hover{background:var(--glass-dark-strong); transform:scale(1.06);} @media (max-width:640px){ .hero-content{margin:0 16px; padding:28px 26px;} .hero-arrows{display:none;} } /* ---------------- Glass cards / tiles ---------------- */ .bg-alt{background:var(--surface-alt);} .section-head{text-align:center; max-width:640px; margin:0 auto 44px;} .glass-card{ background:var(--glass-light); -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm); border:1px solid var(--glass-border-light); border-radius:var(--radius-m); box-shadow:var(--shadow-glass); transition:transform var(--dur-med) var(--ease-silk), box-shadow var(--dur-med) var(--ease-silk); } .glass-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-soft);} .tiles-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;} .tile{ padding:30px 20px; text-align:center; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--radius-m); box-shadow:0 12px 28px -16px rgba(0,0,0,.18); transition:transform var(--dur-med) var(--ease-silk), box-shadow var(--dur-med) var(--ease-silk), border-color var(--dur-med) var(--ease-silk); } .tile:hover{transform:translateY(-6px); box-shadow:0 20px 36px -16px rgba(0,0,0,.26); border-color:var(--accent-500);} .tile .icon{ width:72px; height:72px; margin:0 auto 14px; border-radius:50%; background:linear-gradient(135deg, var(--accent-100), #fff); display:flex; align-items:center; justify-content:center; font-size:32px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); } .tile h3{font-size:16px; font-weight:700; margin-bottom:5px;} .tile p{font-size:13px; font-weight:500; margin:0; color:var(--ink-600);} .tile .badge{display:inline-block; margin-top:8px; font-size:10.5px; font-weight:700; color:var(--accent-600); background:var(--accent-100); padding:3px 10px; border-radius:12px;} .tile.disabled{opacity:.6;} @media (max-width:900px){.tiles-grid{grid-template-columns:repeat(2,1fr);}} .two-col{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;} @media (max-width:900px){.two-col{grid-template-columns:1fr;}} .media-box{ aspect-ratio:16/10; border-radius:var(--radius-m); position:relative; overflow:hidden; background:linear-gradient(135deg, var(--brand-700), var(--brand-900)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:44px; box-shadow:var(--shadow-soft); background-size:contain; background-repeat:no-repeat; background-position:center; } .video-facade{cursor:pointer;} .video-facade .play-icon{ position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%; background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; transition:transform var(--dur-fast) var(--ease-silk), background var(--dur-fast) var(--ease-silk), border-color var(--dur-fast) var(--ease-silk); } .video-facade:hover .play-icon{transform:scale(1.08); background:var(--accent-500); border-color:var(--accent-500);} .video-facade.is-playing{cursor:default;} .video-facade.is-playing iframe{position:absolute; inset:0; width:100%; height:100%; border:0;} .card{ background:var(--glass-light); -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm); border:1px solid var(--glass-border-light); border-radius:var(--radius-m); padding:26px; box-shadow:var(--shadow-glass); } /* ---------------- Newsletter ---------------- */ .newsletter{ background:linear-gradient(135deg, var(--brand-800), var(--brand-900)); color:#fff; text-align:center; } .newsletter h2{color:#fff;} .newsletter p{color:rgba(255,255,255,.72);} .newsletter-row{display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap;} .newsletter-row input{ width:300px; max-width:100%; padding:13px 18px; border-radius:26px; border:1px solid var(--glass-border-dark); background:var(--glass-dark); color:#fff; font-size:14px; backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); } .newsletter-row input::placeholder{color:rgba(255,255,255,.55);} /* ---------------- Footer ---------------- */ footer.site-footer{background:var(--brand-900); color:rgba(255,255,255,.72); padding:56px 0 0; font-size:14px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;} .footer-grid h4{color:#fff; font-size:14px; margin-bottom:14px; letter-spacing:.5px;} .footer-grid a{display:block; color:rgba(255,255,255,.6); margin-bottom:8px;} .footer-grid a:hover{color:var(--accent-600);} .footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding:20px 24px; text-align:center; font-size:12.5px; color:rgba(255,255,255,.45);} .social-row{display:flex; gap:10px; margin-top:14px;} .social-row a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; margin:0;} @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:480px){.footer-grid{grid-template-columns:1fr;}} /* ---------------- Breadcrumb / ministry & branch pages ---------------- */ .breadcrumb{background:var(--surface-alt); padding:14px 0; font-size:13px; color:var(--ink-600);} .breadcrumb a{color:var(--brand-700); font-weight:600;} .banner{ position:relative; color:#fff; padding:80px 0 68px; text-align:center; overflow:hidden; background:linear-gradient(135deg, var(--brand-900), var(--brand-700) 60%, var(--accent-600)); } .banner h1{color:#fff;} .banner .icon-lg{font-size:54px; margin-bottom:14px;} .ministry-two-col{display:grid; grid-template-columns:1.5fr 1fr; gap:44px; padding:64px 0;} @media (max-width:900px){.ministry-two-col{grid-template-columns:1fr;}} .program-item{font-size:15px; color:var(--ink-900); margin-bottom:10px; display:flex; gap:10px;} .program-item .check{color:var(--accent-600); font-weight:800;} .fact-row{display:flex; justify-content:space-between; gap:12px; font-size:14.5px; padding:10px 0; border-bottom:1px dashed rgba(0,0,0,.08);} .fact-row span:first-child{color:var(--ink-600);} .fact-row span:last-child{font-weight:600; color:var(--brand-800); text-align:right;} .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;} .gallery-grid .media-box{aspect-ratio:1/1; font-size:26px;} @media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}} .chips{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px;} .chip{border:1.5px solid var(--accent-600); border-radius:20px; padding:8px 18px; font-size:13.5px; color:var(--brand-800); font-weight:600; transition:background var(--dur-fast) var(--ease-silk), color var(--dur-fast) var(--ease-silk);} .chip:hover{background:var(--accent-500); color:#fff;} /* ---------------- Generic content pages ---------------- */ .page-hero{background:linear-gradient(135deg, var(--brand-900), var(--brand-700)); color:#fff; text-align:center; padding:64px 24px;} .page-hero h1{color:#fff;} .page-hero p{color:rgba(255,255,255,.72); max-width:580px; margin:0 auto;} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;} .pub-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;} @media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr;} .pub-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:480px){.pub-grid{grid-template-columns:1fr;}} .event-card, .pub-card, .value-card{ background:var(--glass-light); -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm); border:1px solid var(--glass-border-light); border-radius:var(--radius-m); padding:22px; box-shadow:var(--shadow-glass); transition:transform var(--dur-med) var(--ease-silk), box-shadow var(--dur-med) var(--ease-silk); } .event-card:hover, .pub-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft);} .event-date{display:inline-block; background:var(--brand-800); color:#fff; border-radius:8px; padding:8px 14px; font-weight:700; font-size:13px; margin-bottom:12px;} .pub-cover{background:linear-gradient(135deg, var(--accent-500), var(--brand-800)); aspect-ratio:3/4; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; margin-bottom:14px; background-size:contain; background-repeat:no-repeat; background-position:center;} /* ---------------- Filter tabs (gallery / events) ---------------- */ .filter-tabs{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 auto 36px;} .filter-tabs button{ border:1.5px solid rgba(0,0,0,.12); background:#fff; color:var(--ink-600); padding:9px 20px; border-radius:100px; font-size:13.5px; font-weight:600; cursor:pointer; transition:all var(--dur-fast) var(--ease-silk); } .filter-tabs button:hover{border-color:var(--accent-500); color:var(--brand-800);} .filter-tabs button.active{background:var(--brand-800); border-color:var(--brand-800); color:#fff;} /* ---------------- Gallery grid ---------------- */ .gallery-page-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;} @media (max-width:900px){.gallery-page-grid{grid-template-columns:repeat(2, 1fr);}} .gallery-item{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-m); overflow:hidden; cursor:pointer; background:linear-gradient(135deg, var(--brand-700), var(--brand-900)); box-shadow:var(--shadow-glass); transition:transform var(--dur-med) var(--ease-silk), box-shadow var(--dur-med) var(--ease-silk); } .gallery-item:hover{transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-soft);} .gallery-item img{width:100%; height:100%; object-fit:contain; display:block; transition:transform var(--dur-slow) var(--ease-silk);} .gallery-item:hover img{transform:scale(1.06);} .gallery-item .gi-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.65) 100%); opacity:0; transition:opacity var(--dur-fast) var(--ease-silk); } .gallery-item:hover .gi-overlay{opacity:1;} .gallery-item .gi-overlay span{color:#fff; font-size:13px; font-weight:600;} .gallery-empty{text-align:center; padding:60px 24px; color:var(--ink-600);} /* ---------------- Lightbox ---------------- */ .lightbox{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(8,10,20,.92); padding:24px; opacity:0; transition:opacity var(--dur-med) var(--ease-silk); } .lightbox.show{display:flex;} .lightbox.is-open{opacity:1;} .lightbox img{max-width:min(900px, 90vw); max-height:78vh; border-radius:var(--radius-m); box-shadow:0 30px 70px -20px rgba(0,0,0,.7); transform:scale(.96); transition:transform var(--dur-med) var(--ease-silk);} .lightbox.is-open img{transform:scale(1);} .lb-caption{position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#fff; font-size:14px;} .lb-close, .lb-prev, .lb-next{ position:absolute; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast) var(--ease-silk); } .lb-close:hover, .lb-prev:hover, .lb-next:hover{background:rgba(255,255,255,.2);} .lb-close{top:20px; right:20px;} .lb-prev{left:20px; top:50%; transform:translateY(-50%);} .lb-next{right:20px; top:50%; transform:translateY(-50%);} @media (max-width:640px){.lb-prev, .lb-next{width:38px; height:38px; font-size:16px;}} .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px;} @media (max-width:900px){.contact-grid{grid-template-columns:1fr;}} .form-group{margin-bottom:16px; text-align:left;} .form-group label{display:block; font-size:13.5px; font-weight:600; color:var(--brand-800); margin-bottom:6px;} .form-group input, .form-group textarea, .form-group select{ width:100%; padding:12px 14px; border:1px solid rgba(0,0,0,.12); border-radius:var(--radius-s); font-size:14px; font-family:inherit; background:rgba(255,255,255,.7); transition:border-color var(--dur-fast) var(--ease-silk); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus{outline:none; border-color:var(--accent-500);} .form-group textarea{resize:vertical; min-height:110px;} .info-row{display:flex; gap:14px; margin-bottom:20px;} .info-row .ic{font-size:22px;} .give-tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px;} .give-tier{border:2px solid rgba(0,0,0,.1); border-radius:var(--radius-m); padding:20px; text-align:center; cursor:pointer; font-weight:700; color:var(--brand-800); transition:border-color var(--dur-fast) var(--ease-silk), background var(--dur-fast) var(--ease-silk);} .give-tier:hover, .give-tier.selected{border-color:var(--accent-500); background:var(--accent-100);} @media (max-width:900px){.give-tiers{grid-template-columns:1fr 1fr;}} .form-msg{display:none; margin-top:14px; padding:12px 16px; border-radius:var(--radius-s); font-size:14px;} .form-msg.show{display:block;} .form-msg.success{background:#e9f7ef; color:#1e7e42; border:1px solid #b9e4c9;} .form-msg.error{background:#fbeaea; color:#a12626; border:1px solid #f0c2c2;} /* ================= ADMIN PANEL ================= */ .admin-shell{background:var(--surface); min-height:100vh;} .admin-login{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden; background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.10), transparent 45%), radial-gradient(circle at 85% 78%, var(--accent-600) 0%, transparent 40%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 40px), linear-gradient(150deg, var(--brand-700), var(--brand-900) 65%); } .admin-login::before{ content:''; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, var(--accent-500), transparent 70%); opacity:.18; filter:blur(60px); top:-120px; right:-100px; pointer-events:none; } .login-card{ position:relative; z-index:1; width:100%; max-width:400px; padding:44px 38px; text-align:center; background:var(--glass-light-strong); -webkit-backdrop-filter:var(--blur-lg); backdrop-filter:var(--blur-lg); border:1px solid rgba(255,255,255,.9); border-radius:var(--radius-l); box-shadow:0 30px 70px -25px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.6) inset; animation:loginCardIn .6s var(--ease-silk) both; } @keyframes loginCardIn{from{opacity:0; transform:translateY(18px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}} .login-card .brand-mark{ width:64px; height:64px; border-radius:50%; margin:0 auto 20px; overflow:hidden; background:linear-gradient(135deg, var(--accent-500), var(--accent-600)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:24px; box-shadow:0 10px 24px -8px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.5); } .login-card .eyebrow{display:block; margin-bottom:8px;} .login-card h3{margin-bottom:6px; font-size:24px;} .login-card p{margin-bottom:26px; font-size:13.5px;} .login-error{background:#fbeaea; color:#a12626; border:1px solid #f0c2c2; border-radius:var(--radius-s); padding:10px 14px; font-size:13.5px; margin-bottom:16px; text-align:left;} .login-success{background:#e9f7ef; color:#1e7e42; border:1px solid #b9e4c9; border-radius:var(--radius-s); padding:10px 14px; font-size:13.5px; margin-bottom:16px; text-align:left;} .input-stack{display:flex; flex-direction:column; gap:14px;} .input-group{position:relative; text-align:left;} .input-group .input-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-600); opacity:.55; pointer-events:none; display:flex; } .input-stack input{ width:100%; padding:14px 16px 14px 44px; border:1.5px solid rgba(0,0,0,.1); border-radius:var(--radius-m); font-size:14.5px; font-family:inherit; background:#fff; transition:border-color var(--dur-fast) var(--ease-silk), box-shadow var(--dur-fast) var(--ease-silk); } .input-stack input:focus{outline:none; border-color:var(--accent-500); box-shadow:0 0 0 4px var(--accent-100);} .login-card .btn-block{margin-top:4px; padding:14px 28px; font-size:15px;} .login-links{margin-top:20px; font-size:13.5px; display:flex; flex-direction:column; gap:8px;} .login-links a{color:var(--brand-700); font-weight:600; transition:color var(--dur-fast) var(--ease-silk);} .login-links a:hover{color:var(--accent-600);} .admin-app{display:grid; grid-template-columns:250px 1fr; min-height:100vh;} .admin-sidebar{ background:var(--brand-900); color:#fff; padding:26px 18px; display:flex; flex-direction:column; gap:26px; position:sticky; top:0; height:100vh; overflow-y:auto; } .admin-sidebar .brand{display:flex; align-items:center; gap:10px;} .admin-sidebar .brand-mark{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0; background:linear-gradient(135deg, var(--accent-500), var(--accent-600)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; } .admin-sidebar .name{font-weight:700; font-size:15px;} .admin-sidebar nav{display:flex; flex-direction:column; gap:4px;} .admin-sidebar nav a{ color:rgba(255,255,255,.72); font-size:14px; padding:10px 14px; border-radius:var(--radius-s); transition:background var(--dur-fast) var(--ease-silk), color var(--dur-fast) var(--ease-silk); display:flex; align-items:center; justify-content:space-between; } .admin-sidebar nav a:hover{background:rgba(255,255,255,.08); color:#fff;} .admin-sidebar nav a.active{background:var(--accent-500); color:#fff; font-weight:600;} .badge-unread{background:#fff; color:var(--brand-900); border-radius:10px; font-size:11px; font-weight:800; padding:1px 7px;} .admin-main{padding:30px 36px; overflow-x:hidden;} .admin-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px;} .admin-sidebar-toggle{display:none;} .admin-sidebar-close{display:none;} .admin-overlay{display:none;} @media (max-width:900px){ .admin-app{display:block;} .admin-sidebar{ position:fixed; top:0; left:0; bottom:0; width:min(280px,82vw); height:100vh; z-index:600; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-16px); transition:opacity var(--dur-med) var(--ease-silk), transform var(--dur-med) var(--ease-silk), visibility var(--dur-med); box-shadow:20px 0 50px -20px rgba(0,0,0,.5); } .admin-sidebar.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);} .admin-sidebar .brand{width:100%;} .admin-sidebar-close{ display:flex; align-items:center; justify-content:center; margin-left:auto; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px 8px; } .admin-main{padding:18px 16px;} .admin-sidebar-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-s); border:1px solid rgba(0,0,0,.12); background:#fff; font-size:20px; cursor:pointer; color:var(--brand-800); flex-shrink:0; } .admin-overlay{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:590; opacity:0; visibility:hidden; transition:opacity var(--dur-med) var(--ease-silk), visibility var(--dur-med); } .admin-overlay.open{opacity:1; visibility:visible;} } .admin-profile{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--brand-800);} .icon-pill{width:32px; height:32px; border-radius:50%; background:var(--accent-100); color:var(--brand-800); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;} .alert{padding:13px 18px; border-radius:var(--radius-s); margin-bottom:20px; font-size:14px;} .alert-success{background:#e9f7ef; color:#1e7e42; border:1px solid #b9e4c9;} .alert-error{background:#fbeaea; color:#a12626; border:1px solid #f0c2c2;} .dash-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;} @media (max-width:900px){.dash-grid{grid-template-columns:1fr 1fr;}} .dash-card{background:var(--glass-light); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); border:1px solid var(--glass-border-light); border-radius:var(--radius-m); padding:22px; box-shadow:var(--shadow-glass);} .dash-count{font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--brand-800);} .dash-label{font-size:13px; color:var(--ink-600); margin-top:4px;} .admin-card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--radius-m); padding:24px; margin-bottom:22px; box-shadow:0 2px 10px -6px rgba(0,0,0,.08);} .admin-card h3{font-size:16px; margin-bottom:16px;} .admin-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;} @media (max-width:700px){.admin-form-row{grid-template-columns:1fr;}} .admin-form-row .full{grid-column:1/-1;} .field{margin-bottom:14px;} .field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-600); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;} .field input, .field textarea, .field select{ width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.14); border-radius:var(--radius-s); font-size:14px; font-family:inherit; } .field textarea{min-height:90px; resize:vertical;} .field-check{display:flex; align-items:center; gap:8px; font-size:13.5px;} .admin-table{width:100%; border-collapse:collapse; font-size:13.5px;} .admin-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-600); padding:10px 12px; border-bottom:2px solid rgba(0,0,0,.08);} .admin-table td{padding:12px; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:middle;} .admin-table tr:hover td{background:rgba(0,0,0,.02);} .admin-thumb{width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--surface-alt);} .row-actions{display:flex; gap:8px;} .btn-sm{padding:6px 14px; font-size:12.5px;} .btn-danger{background:#c0392b; color:#fff;} .btn-danger:hover{background:#d9463a;} .btn-ghost{background:transparent; border:1px solid rgba(0,0,0,.15); color:var(--ink-900);} .btn-ghost:hover{background:rgba(0,0,0,.04);} .theme-picker{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;} @media (max-width:700px){.theme-picker{grid-template-columns:1fr;}} .theme-swatch{ border:2px solid rgba(0,0,0,.1); border-radius:var(--radius-m); padding:16px; cursor:pointer; text-align:left; transition:border-color var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk); } .theme-swatch:hover{transform:translateY(-2px);} .theme-swatch.selected{border-color:var(--accent-500); box-shadow:0 0 0 3px var(--accent-100);} .theme-swatch .swatch-bar{height:36px; border-radius:8px; margin-bottom:10px; display:flex; overflow:hidden;} .theme-swatch .swatch-bar span{flex:1;} .theme-swatch .swatch-name{font-weight:700; font-size:13.5px;}