:root{ --navy:#0b1330; --navy-2:#111b3e; --cream:#f6f4ef; --cream-2:#efece4; --ink:#1b1e2a; --ink-soft:#4a4e5c; --muted:#6b6f7d; --gold:#c9a86a; --green:#3f7a4e; --purple:#6a5fc2; --red:#c14a4a; --line:rgba(255,255,255,0.12); --line-dark:rgba(17,20,40,0.1); /* Card/panel surfaces (was a bare #fff everywhere) and the "navy used as a text/border accent" role (was a bare var(--navy) everywhere a light background was assumed) - both need to flip in dark mode. --navy itself stays constant: every OTHER place it's used is as the background of an already-dark, white-text block (footer, marquee, primary buttons) that's correct in either theme unchanged. */ --surface:#fff; --accent:var(--navy); --surface-translucent:rgba(255,255,255,0.7); --surface-translucent-solid:rgba(255,255,255,0.96); } /* Dark mode - follows the OS/browser preference by default; the toggle in site-nav (public/js/theme-toggle.js) overrides it explicitly by setting data-theme="dark"/"light" on , persisted in localStorage. Same variable set in both blocks so an explicit choice and the OS default never disagree. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --cream:#14161f; --cream-2:#1a1d29; --ink:#eef0f6; --ink-soft:#c7cbe0; --muted:#9498ab; --line-dark:rgba(255,255,255,0.14); --surface:#1c1f2b; --accent:#8ea1e8; --surface-translucent:rgba(20,22,31,0.75); --surface-translucent-solid:rgba(20,22,31,0.96); } } :root[data-theme="dark"]{ --cream:#14161f; --cream-2:#1a1d29; --ink:#eef0f6; --ink-soft:#c7cbe0; --muted:#9498ab; --line-dark:rgba(255,255,255,0.14); --surface-translucent:rgba(20,22,31,0.75); --surface-translucent-solid:rgba(20,22,31,0.96); --surface:#1c1f2b; --accent:#8ea1e8; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;font-family:'Inter',sans-serif;background:var(--cream);color:var(--ink);} h1,h2,h3,.serif{font-family:'Playfair Display', serif;} a{text-decoration:none;color:inherit;} img{max-width:100%;display:block;} /* Baseline breathing room between stacked page sections - many sections across the site only carry an id or a one-off content class with no padding of their own, so without this they sit flush against each other. Any class/inline style with its own padding (hero bands, teaser strips, etc.) simply overrides this via normal CSS specificity. */ section{padding:80px 0;} .wrap{max-width:1200px;margin:0 auto;padding:0 40px;} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:12px;letter-spacing:2px;text-transform:uppercase; font-weight:600;color:var(--accent); margin-bottom:14px; } .eyebrow.light{color:#d8dcff;} .eyebrow::before{ content:"";width:6px;height:6px;border-radius:50%; background:var(--green);display:inline-block; } .btn{ display:inline-flex;align-items:center;justify-content:center; background:var(--navy);color:#fff; padding:14px 28px;border-radius:40px; font-size:14px;font-weight:600; border:none;cursor:pointer; box-shadow:0 6px 16px rgba(11,19,48,0.25); transition:transform .2s ease, box-shadow .2s ease; } .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(11,19,48,0.3);} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;} .btn.light{background:var(--surface);color:var(--accent);} .btn.block{width:100%;} .btn.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--line-dark);box-shadow:none;} /* ===== NAV (full site nav - forms.html and other full pages) ===== */ .site-header-outer{ position:sticky;top:0;z-index:500; background:var(--surface-translucent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:background .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom:1px solid transparent; } .site-header-outer.scrolled{ background:var(--surface-translucent-solid); box-shadow:0 8px 28px rgba(11,19,48,.10); border-bottom-color:var(--line-dark); } header.site{ display:flex;align-items:center;justify-content:space-between; padding:22px 40px;max-width:1200px;margin:0 auto; position:relative; } .logo-word{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;letter-spacing:1px;} nav.main{display:flex;gap:34px;align-items:center;font-size:14px;font-weight:500;color:var(--ink-soft);} nav.main a.active{color:var(--accent);font-weight:600;} nav.main a{position:relative;} .nav-right{display:flex;align-items:center;gap:22px;} .theme-toggle-btn{ background:none;border:1px solid var(--line-dark);border-radius:50%; width:36px;height:36px;display:flex;align-items:center;justify-content:center; font-size:15px;line-height:1;cursor:pointer;color:var(--ink);flex:none; transition:background .2s,border-color .2s; } .theme-toggle-btn:hover{background:var(--cream-2);border-color:var(--navy);} /* .welcome-header sits on the permanently-dark Welcome page background regardless of site theme, so its button needs its own light-on-dark styling instead of the default (page-surface-aware) look above. */ .welcome-header .theme-toggle-btn{ border-color:rgba(255,255,255,.3);color:#fff; } .welcome-header .theme-toggle-btn:hover{background:rgba(255,255,255,.12);} .welcome-header{position:relative;} .welcome-header .theme-toggle-btn{position:absolute;right:24px;top:36px;} .brand-mark{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent);} .brand-mark .icon{height:34px;width:auto;object-fit:contain;display:block;} .nav-dropdown{position:relative;} .nav-dropdown-trigger{ background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0; display:flex;align-items:center;gap:4px; } .nav-dropdown-menu{ position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-8px); background:var(--surface);border-radius:14px;box-shadow:0 20px 50px rgba(11,19,48,.18); padding:10px;min-width:230px;display:flex;flex-direction:column;gap:2px; opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease; z-index:200; } .nav-dropdown-menu.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);} .nav-dropdown-menu a{ padding:10px 14px;border-radius:9px;font-size:13px;font-weight:500; color:var(--ink);transition:background .15s; } .nav-dropdown-menu a:hover{background:var(--cream-2);} /* ===== SIMPLE NAV (individual form pages) ===== */ header.form-nav{ display:flex;align-items:center;justify-content:space-between; padding:22px 40px;max-width:900px;margin:0 auto; } header.form-nav .logo-word{font-size:19px;} header.form-nav .back-link{font-size:13px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:6px;} /* ===== PAGE BAND ===== */ .page-band{background:var(--cream);padding:70px 0;text-align:center;} .page-band h1{font-size:34px;font-weight:500;margin:0;} body.forms-landing{background:var(--cream);} /* ===== FORMS LANDING: INTRO ===== */ .forms-intro{padding:80px 0 55px;} .intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;} .intro-grid h2{font-size:30px;font-weight:500;line-height:1.3;margin:0 0 16px;} .intro-grid p{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 12px;} .intro-grid p a{color:var(--accent);font-weight:600;} .intro-photo{border-radius:18px;overflow:hidden;width:100%;aspect-ratio:4/3;object-fit:cover;} /* ===== FORMS GRID ===== */ .forms-grid-panel{ background:var(--surface);border-radius:22px;padding:34px; box-shadow:0 10px 40px rgba(0,0,0,.05);margin-bottom:80px; } .forms-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;} .form-card{display:block;text-align:center;} .form-card .thumb{ border-radius:12px;overflow:hidden;aspect-ratio:1/1;background-size:cover;background-position:center; margin-bottom:10px;position:relative;transition:transform .2s ease; } .form-card:hover .thumb{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.12);} .form-card .label{font-size:12.5px;font-weight:600;color:var(--ink);} /* ===== SHARED FOOTER (full, site pages) ===== */ footer.site-footer{background:var(--navy);color:#fff;padding:70px 0 30px;} .footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;padding-bottom:40px;} .footer-brand{max-width:340px;} .footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;} .footer-logo .icon{height:44px;width:auto;object-fit:contain;display:block;} .footer-logo span{font-family:'Playfair Display',serif;font-size:20px;} .footer-brand p{font-size:13px;color:#aeb2d4;line-height:1.6;} .footer-links{display:flex;gap:70px;flex-wrap:wrap;} .footer-links .col{display:flex;flex-direction:column;gap:12px;font-size:14px;color:#dcdeee;} .footer-links .col a:hover{color:#fff;} .newsletter{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px;padding-bottom:40px;border-bottom:1px solid var(--line);margin-bottom:26px;} .newsletter .eyebrow{color:#9aa0cc;} .newsletter h3{font-size:26px;font-weight:500;margin:6px 0 0;max-width:340px;line-height:1.3;} .newsletter-form{display:flex;gap:10px;flex-wrap:wrap;} .newsletter-form input{background:transparent;border:none;border-bottom:1px solid var(--line);padding:10px 4px;color:#fff;font-size:14px;width:230px;outline:none;} .newsletter-form input::placeholder{color:#8f93bb;} .newsletter-form button{background:var(--surface);color:var(--accent);border:none;padding:10px 26px;border-radius:30px;font-size:13px;font-weight:600;cursor:pointer;} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;color:#9aa0cc;} .socials{display:flex;gap:16px;} .socials a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;} .foot-email{margin-top:6px;} .foot-email a{color:#dfe2ff;font-size:13px;font-weight:600;} .foot-email a:hover{color:#fff;text-decoration:underline;} /* ===== SIMPLE FOOTER (individual form pages) ===== */ footer.simple{background:var(--navy);color:#fff;padding:36px 0;margin-top:20px;} .foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;max-width:900px;margin:0 auto;padding:0 40px;} .foot-brand{display:flex;align-items:center;gap:10px;} .foot-brand .icon{height:30px;width:auto;object-fit:contain;display:block;} .foot-brand span{font-family:'Playfair Display',serif;font-size:15px;} .foot-copy{font-size:12px;color:#9aa0cc;} .foot-email-inline{margin-left:16px;color:#dfe2ff;font-size:12.5px;font-weight:600;} .foot-email-inline:hover{color:#fff;text-decoration:underline;} /* ===================================================== */ /* ===== FORM SHELL (the actual white form card) ======= */ /* ===================================================== */ .form-shell{ max-width:660px;margin:20px auto 50px;background:var(--surface);border-radius:22px; box-shadow:0 20px 60px rgba(11,19,48,.08);overflow:hidden; } .fs-header{padding:36px 40px 0;text-align:center;} .fs-header h1{font-size:24px;font-weight:500;margin:0 0 26px;} .fs-banner{ position:relative;height:130px;background-size:cover;background-position:center; display:flex;align-items:center;justify-content:center; } .fs-banner::after{content:"";position:absolute;inset:0;background:rgba(8,10,20,.5);} .fs-banner span{position:relative;z-index:2;color:#fff;font-size:19px;font-weight:600;} .fs-banner p{position:relative;z-index:2;color:#e4e6f5;font-size:12.5px;margin:6px 0 0;max-width:420px;} .fs-toolbar{display:flex;justify-content:space-between;align-items:center;padding:22px 40px 0;flex-wrap:wrap;gap:10px;} .go-back{ border:1px solid var(--line-dark);background:var(--surface);border-radius:30px;padding:8px 18px; font-size:12px;font-weight:600;cursor:pointer;color:var(--ink); } .go-back:hover{border-color:var(--accent);} .section-label{font-size:13px;font-weight:600;color:var(--ink);} .clear-link{font-size:12px;color:#3d5a8a;font-weight:600;cursor:pointer;background:none;border:none;} .clear-link:hover{text-decoration:underline;} .fs-body{padding:26px 40px 0;} .fs-step{display:none;} .fs-step.active{display:block;} .step-heading{font-size:17px;font-weight:600;margin:0 0 20px;} .q-block{margin-bottom:22px;} .q-label{font-size:13.5px;font-weight:600;margin:0 0 2px;} .q-label .req{color:var(--red);margin-left:2px;} .q-hint{font-size:11px;color:var(--muted);margin:0 0 10px;} .q-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .q-input, .q-textarea, .q-select{ width:100%;border:1px solid var(--line-dark);background:var(--cream-2);border-radius:8px; padding:12px 14px;font-size:14px;font-family:inherit;outline:none; transition:border-color .2s, background .2s; } .q-input:focus, .q-textarea:focus, .q-select:focus{border-color:var(--accent);background:var(--surface);} .q-textarea{min-height:80px;resize:vertical;} .q-file{ width:100%;border:1.5px dashed var(--line-dark);background:var(--cream-2);border-radius:10px; padding:16px 14px;font-size:13px;font-family:inherit;outline:none;color:var(--muted);cursor:pointer; } .opt-list{display:flex;flex-direction:column;gap:2px;} .opt-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;} .opt-row{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;padding:6px 2px;user-select:none;} .opt-row .box{ width:16px;height:16px;border:1.5px solid #9aa0b4;border-radius:4px;flex:none; display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s; } .opt-row .box::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--navy);transform:scale(0);transition:transform .15s;} .opt-row.checked .box{border-color:var(--accent);} .opt-row.checked .box::after{transform:scale(1);} .opt-row input{display:none;} .rating-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .rating-row .rate-lbl{font-size:11px;color:var(--muted);font-weight:600;} .rating-opts{display:flex;gap:14px;} .rating-opt{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;cursor:pointer;} .rating-opt .box{ width:18px;height:18px;border:1.5px solid #9aa0b4;border-radius:4px; display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s; } .rating-opt .box::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--navy);transform:scale(0);transition:transform .15s;} .rating-opt.checked .box{border-color:var(--accent);} .rating-opt.checked .box::after{transform:scale(1);} .rating-opt input{display:none;} .field-note{font-size:11px;color:var(--muted);margin:-14px 0 20px;font-style:italic;} .fs-submit{padding:10px 40px 40px;} .fs-submit .btn{width:100%;} .recap-box{ background:var(--cream-2);border:1px solid var(--line-dark);border-radius:12px; padding:16px 18px;font-size:13px;color:var(--muted);margin-bottom:22px; } .recap-box b{color:var(--ink);} .form-error{ background:#fdeceb;color:var(--red);border-radius:10px;padding:12px 16px; font-size:13px;margin:0 40px 20px; } /* ===== MODAL SYSTEM (shared: simple form success popups + the fuller Get In Touch / Subscribe / RSVP / Calendar multi-step modal on pages like events.ejs) ===== */ .modal-overlay{ position:fixed;inset:0;background:rgba(6,10,26,.68); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center;padding:24px;z-index:999; } .modal-overlay.active{display:flex;} .modal-card{ background:var(--surface);border-radius:22px;width:100%;max-width:420px;padding:36px 32px;position:relative; box-shadow:0 40px 90px rgba(6,10,26,.4);animation:modalIn .32s cubic-bezier(.2,.8,.2,1); max-height:88vh;overflow-y:auto; } .modal-card.hidden{display:none;} /* Used by the single-card success popups on the 11 form pages, where the fuller modal's left-aligned multi-step layout isn't needed. */ .modal-card.center{text-align:center;max-width:400px;} .modal-card.center .success-icon{margin-left:auto;margin-right:auto;} @keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}} .modal-close{ position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%; border:none;background:var(--cream-2);color:var(--accent); display:flex;align-items:center;justify-content:center;font-size:16px; cursor:pointer;transition:background .2s,transform .2s; } .modal-close:hover{background:#e6e3da;transform:rotate(90deg);} .modal-eyebrow{color:var(--green);} .modal-title{font-size:23px;font-weight:600;margin:4px 0 10px;line-height:1.3;} .modal-body{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 22px;} .success-icon{ width:54px;height:54px;border-radius:50%;background:#e9f6ec;color:var(--green); display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 0 20px; } .contact-row{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 16px;border:1px solid var(--line-dark);border-radius:12px;margin-bottom:10px; } .contact-row .ic{font-size:16px;} .contact-row .txt{flex:1;font-size:13px;} .contact-row .txt .lbl{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;} .contact-row .txt .val{font-weight:600;color:var(--ink);font-size:14px;} .copy-btn{ background:var(--cream-2);border:none;border-radius:8px;width:30px;height:30px; display:flex;align-items:center;justify-content:center;cursor:pointer; font-size:12px;color:var(--accent);flex:none;transition:background .2s; } .copy-btn:hover{background:#e6e3da;} .social-label{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin:20px 0 10px;} .social-row{display:flex;gap:10px;margin-bottom:24px;} .social-row a{ width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff; display:flex;align-items:center;justify-content:center;font-size:15px; transition:transform .2s, background .2s; } .social-row a:hover{transform:translateY(-3px);background:var(--navy-2);} .modal-divider{border:none;border-top:1px solid var(--line-dark);margin:22px 0;} .modal-field{margin-bottom:14px;} .modal-field label{ display:block;font-size:11px;font-weight:600;color:var(--accent); margin-bottom:6px;letter-spacing:.5px;text-transform:uppercase; } .modal-field input, .modal-field textarea{ width:100%;border:1px solid var(--line-dark);border-radius:10px; padding:11px 14px;font-size:14px;font-family:inherit;outline:none; transition:border-color .2s;color:var(--ink); } .modal-field input:focus, .modal-field textarea:focus{border-color:var(--accent);} .modal-field textarea{resize:vertical;min-height:74px;} .modal-btn{width:100%;} .modal-skip{ display:block;text-align:center;margin-top:14px;font-size:12px; color:var(--muted);cursor:pointer;background:none;border:none; width:100%;font-family:inherit; } .modal-skip:hover{color:var(--accent);} .toast-copied{ position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px); background:var(--navy);color:#fff;font-size:13px;font-weight:600; padding:12px 22px;border-radius:30px;opacity:0;pointer-events:none; transition:opacity .25s,transform .25s;z-index:1100; } .toast-copied.show{opacity:1;transform:translateX(-50%) translateY(0);} /* ===== EVENTS PAGE ===== */ .events-hero{padding:70px 0 55px;} .events-hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;} .events-hero h1{font-size:48px;font-weight:500;line-height:1.1;margin:8px 0;} .events-hero h1 .script{display:block;font-family:'Playfair Display',serif;font-style:italic;font-size:26px;font-weight:400;color:var(--muted);margin-top:6px;} .events-hero-photo{border-radius:20px;overflow:hidden;width:100%;aspect-ratio:4/3;object-fit:cover;} .main-event{padding:40px 0 85px;} .main-event-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;background:var(--surface);border-radius:24px;padding:30px;box-shadow:0 10px 40px rgba(0,0,0,.05);} .main-event-photo{border-radius:18px;overflow:hidden;width:100%;aspect-ratio:4/3;object-fit:cover;} .main-event-info h3{font-size:28px;font-weight:500;margin:0 0 8px;} .main-event-info .theme{font-size:14px;font-weight:600;color:var(--accent);margin-bottom:4px;} .main-event-info .subtitle{font-family:'Playfair Display',serif;font-style:italic;font-size:17px;color:var(--muted);margin-bottom:14px;} .main-event-info .desc{font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:20px;} .main-event-meta{display:flex;gap:26px;font-size:13.5px;margin-bottom:22px;} .main-event-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .link-btn{background:none;border:none;font-size:13px;font-weight:600;color:var(--accent);cursor:pointer;padding:0;} .link-btn:hover{text-decoration:underline;} .events-grid-section{padding:85px 0;background:var(--cream-2);} .events-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .event-tile{border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 10px 24px rgba(0,0,0,.06);} .event-tile img{width:100%;height:170px;object-fit:cover;} .event-tile .info{padding:16px 18px;} .event-tile .info h4{font-size:15px;font-weight:600;margin:0 0 4px;} .event-tile .info p{font-size:12.5px;color:var(--muted);margin:0;} .cal-section{padding:85px 0;} .cal-card{background:var(--surface);border-radius:20px;padding:26px 30px;box-shadow:0 10px 40px rgba(0,0,0,.05);max-width:520px;margin:0 auto;} .cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;} .cal-header h3{font-size:17px;font-weight:600;margin:0;} .cal-nav-btn{background:var(--cream-2);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;} .cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px;} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;} .cal-day{aspect-ratio:1;border:none;background:none;border-radius:10px;cursor:default;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;} .cal-day.empty{visibility:hidden;} .cal-day.has-event{cursor:pointer;background:var(--cream-2);} .cal-day.has-event:hover{background:#e6e3da;} .cal-day.today span:first-child{color:var(--accent);font-weight:700;} .cal-day .dot-row{display:flex;gap:2px;height:5px;} .cal-day .dot-row .dot{width:5px;height:5px;border-radius:50%;background:var(--muted);} .cal-day .dot-row .dot.major{background:var(--green);} .cal-legend{display:flex;gap:20px;margin-top:16px;font-size:11.5px;color:var(--muted);} .cal-legend .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin-right:5px;} .cal-legend .dot.major{background:var(--green);} .highlights-section{padding:0 0 80px;} .highlights-row{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:6px;} .highlight-thumb{flex:none;width:220px;height:150px;border-radius:14px;background-size:cover;background-position:center;position:relative;cursor:pointer;} .highlight-thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);border-radius:14px;} .highlight-thumb .play span{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:16px;} .highlights-nav{display:flex;gap:10px;margin-top:16px;} .highlights-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-dark);background:var(--surface);cursor:pointer;font-size:14px;} @media (max-width:900px){ .events-hero-grid, .main-event-grid{grid-template-columns:1fr;} .events-cards-grid{grid-template-columns:1fr 1fr;} } @media (max-width: 900px){ .intro-grid{grid-template-columns:1fr;} .forms-grid{grid-template-columns:repeat(3,1fr);} nav.main{display:none;} .wrap{padding:0 22px;} .footer-top,.newsletter{flex-direction:column;} .q-row{grid-template-columns:1fr;} .fs-header, .fs-toolbar, .fs-body{padding-left:24px;padding-right:24px;} .fs-submit{padding-left:24px;padding-right:24px;} } @media (max-width: 560px){ .forms-grid{grid-template-columns:repeat(2,1fr);} .opt-grid-2{grid-template-columns:1fr;} } /* ===== MINISTRIES LIST PAGE ===== */ .m-hero{padding:75px 0 0;text-align:center;} .m-hero h2{font-size:32px;font-weight:500;margin:0 0 30px;} .m-lead{font-size:14.5px;line-height:1.8;color:var(--muted);max-width:680px;margin:0 auto 14px;text-align:center;} .m-lead.strong{color:var(--ink);font-weight:600;margin-bottom:40px;} /* ===== MINISTRIES LISTING PAGE (card grid) ===== */ .ministry-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-bottom:80px;} .ministry-card{display:block;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s;} .ministry-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.1);} .ministry-card-photo{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;} .ministry-card-logo{position:absolute;left:18px;bottom:-24px;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--surface);border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.15);} .ministry-card-body{padding:34px 20px 20px;} .ministry-card-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;} .ministry-card-emoji{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;} .ministry-card-body h4{font-size:17px;font-weight:600;margin:0;font-family:'Playfair Display',serif;} .ministry-card-body p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:8px 0 14px;} .ministry-card-link{font-size:12.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.4px;} /* ===== MINISTRY DETAIL PAGE ===== */ .m-toolbar{display:flex;justify-content:space-between;align-items:center;padding:34px 0 0;flex-wrap:wrap;gap:14px;} .m-title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;} .m-badge{width:26px;height:26px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;} .m-insta{font-size:13px;color:var(--muted);} .m-socials{display:flex;gap:12px;margin-top:14px;} .m-socials a{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink);} .m-socials a:hover{border-color:var(--accent);color:var(--accent);} .m-info{display:grid;grid-template-columns:180px 1fr;gap:26px;padding:26px 0 0;align-items:stretch;} .m-logo{border-radius:14px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:20px;text-align:center;padding:16px;letter-spacing:.5px;line-height:1.2;} .m-pastor-photo{width:100%;height:100%;min-height:180px;border-radius:14px;object-fit:cover;display:block;} .m-info-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:14px;padding:20px 24px;} .m-info-card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px;} .m-info-card .pastor{font-size:16px;font-weight:600;margin:0 0 12px;} .m-info-card p{font-size:13.5px;line-height:1.75;color:var(--ink-soft);margin:0;} .m-goal{background:color-mix(in srgb, var(--accent) 12%, white);border-radius:18px;padding:40px;margin:40px 0 0;display:grid;grid-template-columns:1fr 130px;gap:20px;align-items:center;} .m-goal h3{font-size:26px;font-weight:700;margin:0 0 14px;font-family:'Playfair Display',serif;font-style:italic;} .m-goal p{font-size:13.5px;line-height:1.75;color:#3a3d47;margin:0;max-width:520px;} .m-goal-icon{width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:46px;justify-self:end;overflow:hidden;} .m-goal-icon img{width:70%;height:70%;object-fit:contain;} .m-body{padding:50px 0 0;max-width:760px;} .m-body p{font-size:13.5px;line-height:1.8;color:var(--ink-soft);margin:0 0 14px;} .m-tagline{padding:50px 0 0;} .m-tagline h4{font-size:20px;font-weight:600;margin:0 0 6px;} .m-tagline p{font-size:13.5px;color:var(--muted);margin:0;} .m-quote{position:relative;overflow:hidden;background:#181a26;border-radius:16px;padding:46px 40px;margin:24px 0 0;text-align:center;} .m-quote::before{ content:attr(data-watermark);position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:'Playfair Display',serif;font-weight:800;font-size:64px;color:rgba(255,255,255,.06); white-space:nowrap;letter-spacing:2px;pointer-events:none; } .m-quote-logo{ position:absolute;inset:0;margin:auto;width:60%;height:60%;object-fit:contain; opacity:.08;filter:brightness(0) invert(1);pointer-events:none; } .m-quote-inner{position:relative;z-index:2;} .m-quote p{color:#fff;font-size:15px;line-height:1.8;font-style:italic;max-width:640px;margin:0 auto 12px;} .m-quote cite{display:block;color:#8ea1e8;font-size:12px;font-style:normal;font-weight:600;margin-bottom:20px;} .m-event{padding:70px 0 0;} .m-event-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;} .m-event-head h3{font-size:22px;font-weight:500;margin:0;font-family:'Playfair Display',serif;} .m-event-head a{font-size:13px;font-weight:600;text-decoration:underline;color:var(--ink);} .m-event-grid{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start;} .m-event-poster{border-radius:14px;overflow:hidden;aspect-ratio:4/5;object-fit:cover;width:100%;} .m-event-info h4{font-size:22px;font-weight:600;margin:0 0 10px;} .m-event-info .theme{font-size:14px;font-weight:600;margin:0 0 2px;} .m-event-info .theme-sub{font-size:13px;color:var(--muted);font-style:italic;margin:0 0 12px;} .m-event-info p.desc{font-size:13.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px;} .m-event-info .dl{font-size:13.5px;margin:4px 0;} .m-event-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap;} .m-event-actions .save{font-size:12px;color:var(--muted);font-weight:600;} .m-moments{padding:70px 0 0;} .m-moments h3{font-size:22px;font-weight:500;margin:0 0 20px;font-family:'Playfair Display',serif;} .m-moments-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .m-moments-grid img{border-radius:12px;aspect-ratio:1/1;object-fit:cover;width:100%;} .m-moments-slideshow{position:relative;max-width:520px;aspect-ratio:1/1;border-radius:16px;overflow:hidden;} .m-moments-slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;} .m-moments-slideshow img.active{opacity:1;} .m-moments-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:2;} .m-moments-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;} .m-moments-dots span.active{background:var(--surface);} .m-footer-space{height:70px;} .m-hf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;background:var(--navy);border-radius:18px;overflow:hidden;margin-top:50px;} .m-hf-item{padding:24px 18px;border-right:1px solid rgba(255,255,255,.12);color:#fff;} .m-hf-item:last-child{border-right:none;} .m-hf-item h4{font-family:'Playfair Display',serif;font-style:italic;font-size:16px;font-weight:500;margin:0 0 10px;color:#dfe2ff;} .m-hf-item p{margin:2px 0;font-size:12px;color:#b6bade;} .m-hf-item p.day{color:#e9ebff;font-weight:500;} /* ===== "Connect With TNH" section (ministry pages) ===== */ .connect{text-align:center;padding:100px 0;} .connect h2{font-size:36px;font-weight:500;margin:0 0 26px;} .connect p{font-size:14px;line-height:1.8;color:var(--muted);max-width:560px;margin:0 auto 4px;} .connect p.bold{color:var(--ink);font-weight:600;margin-bottom:26px;} .connect .find{font-size:14px;margin-top:36px;} .connect .addr{font-style:italic;font-size:14px;margin:6px 0 26px;} .map-embed{border-radius:16px;overflow:hidden;width:100%;aspect-ratio:18/5;height:auto;border:1px solid var(--line-dark);} .map-embed iframe{width:100%;height:100%;border:0;display:block;} .multi-map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left;} .multi-map-grid .center-map{border-radius:14px;overflow:hidden;border:1px solid var(--line-dark);} .multi-map-grid .center-map iframe{width:100%;aspect-ratio:4/3;height:auto;border:0;display:block;} .multi-map-grid .center-name{padding:10px 14px;font-size:13px;font-weight:600;background:var(--cream-2);} .multi-map-grid .center-name .day{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:2px;} /* ===== TESTIMONIES PAGE ===== */ .filter-pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;} .filter-pill{ padding:9px 18px;border-radius:30px;border:1px solid var(--line-dark);background:var(--surface); font-size:13px;font-weight:600;cursor:pointer;color:var(--ink); transition:background .2s,color .2s,border-color .2s; } .filter-pill:hover{border-color:var(--accent);} .filter-pill.active{background:var(--navy);color:#fff;border-color:var(--accent);} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .testi-card{ background:var(--surface);border-radius:16px;padding:26px 24px;box-shadow:0 10px 28px rgba(11,19,48,.06); display:flex;flex-direction:column; } .testi-card .quote-mark{font-family:'Playfair Display',serif;font-size:36px;color:var(--green);line-height:1;margin-bottom:10px;} .testi-card p.quote{font-size:14px;color:var(--ink-soft);line-height:1.75;margin:0 0 18px;flex:1;} .testi-card .who{display:flex;align-items:center;gap:12px;} .testi-card .avatar{width:40px;height:40px;border-radius:50%;background-size:cover;background-position:center;flex:none;} .testi-card .name{font-size:13.5px;font-weight:600;} .testi-card .tag{font-size:11.5px;color:var(--muted);} .submit-banner{ background:linear-gradient(135deg,#1b1442,#241a5c);color:#fff;border-radius:22px; padding:40px 44px;text-align:center; } .submit-banner h3{font-size:22px;font-weight:500;margin:0 0 10px;} .submit-banner p{font-size:13.5px;color:#c3c6e6;margin:0 0 22px;max-width:480px;margin-left:auto;margin-right:auto;} .submit-banner .btn{background:var(--surface);color:var(--accent);} @media (max-width:900px){ .m-info{grid-template-columns:1fr;} .m-logo{max-width:180px;height:120px;} .m-goal{grid-template-columns:1fr;text-align:left;} .m-goal-icon{justify-self:start;} .m-event-grid{grid-template-columns:1fr;} .m-moments-grid{grid-template-columns:repeat(2,1fr);} .m-hf-grid{grid-template-columns:1fr 1fr;} .m-hf-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.12);} .pill-grid{grid-template-columns:repeat(2,1fr);} .carousel-slide{width:280px;height:260px;} .carousel{height:320px;} .multi-map-grid{grid-template-columns:1fr 1fr;} .testi-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .pill-grid{grid-template-columns:1fr;} .multi-map-grid{grid-template-columns:1fr;} .testi-grid{grid-template-columns:1fr;} } /* ===================== GIVING ===================== */ .page-band{background:var(--cream-2);padding:70px 0;text-align:center;} .page-band h1{font-size:34px;font-weight:500;margin:0;} .verse-box{background:#eaf1fb;border:1px solid #d9e6f7;border-radius:18px;padding:38px 40px;text-align:center;} .verse-box p{font-family:'Playfair Display',serif;font-style:italic;font-size:18px;line-height:1.7;margin:0 0 10px;color:#1c2b4a;} .verse-box cite{font-style:normal;font-size:13px;color:#3d5a8a;font-weight:600;} .give-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;} .panel{background:var(--surface);border:1px solid var(--line-dark);border-radius:18px;padding:30px;} .panel h3{font-size:18px;font-weight:600;margin:0 0 6px;} .panel .sub{font-size:13px;color:var(--muted);margin:0 0 20px;} .pay-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;} .pay-type{ border:1px solid var(--line-dark);border-radius:12px;padding:12px 14px; font-size:13px;font-weight:600;color:var(--ink);background:var(--surface); cursor:pointer;text-align:center;transition:border-color .2s,background .2s,color .2s; } .pay-type:hover{border-color:var(--accent);} .pay-type.active{background:var(--navy);color:#fff;border-color:var(--accent);} .amount-field label{display:block;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;} .amount-field input{width:100%;border:1px solid var(--line-dark);border-radius:12px;padding:14px 16px;font-size:15px;font-family:inherit;outline:none;margin-bottom:20px;transition:border-color .2s;} .amount-field input:focus{border-color:var(--accent);} .give-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;} .give-method{border:1px solid var(--line-dark);border-radius:12px;padding:12px 14px;font-size:13px;font-weight:600;background:var(--surface);cursor:pointer;text-align:center;} .give-method.active{background:var(--purple);color:#fff;border-color:var(--purple);} .give-method[disabled]{opacity:.45;cursor:not-allowed;} .bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .bank-card{border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;} .bank-card .cat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:rgba(20,20,40,.6);margin-bottom:10px;} .bank-card .acct{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#181a2e;margin-bottom:6px;} .bank-card .meta{font-size:11px;color:rgba(20,20,40,.65);line-height:1.5;} .bank-card .copy-btn{background:rgba(255,255,255,.6);border:none;border-radius:8px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:#181a2e;flex:none;} .bc-1{background:linear-gradient(135deg,#dfeaff,#eef4ff);} .bc-2{background:linear-gradient(135deg,#ffe3ea,#fff0f3);} .bc-3{background:linear-gradient(135deg,#e2f7e6,#f0fbf1);} .bc-4{background:linear-gradient(135deg,#eee1ff,#f6effe);} .bc-5{background:linear-gradient(135deg,#fff3d6,#fff9ec);} .bc-6{background:linear-gradient(135deg,#ffe1f0,#fff0f7);} .stock-panel{background:var(--surface);border:1px solid var(--line-dark);border-radius:20px;padding:44px;text-align:center;} .stock-panel h3{font-size:20px;font-weight:600;margin:0 0 10px;} .stock-panel p{font-size:14px;color:var(--muted);max-width:480px;margin:0 auto 24px;line-height:1.7;} .quote-band{background:#fdf6e3;border:1px solid #f2e6bd;border-radius:18px;padding:40px;text-align:center;} .quote-band p{font-family:'Playfair Display',serif;font-style:italic;font-size:17px;line-height:1.8;margin:0 0 12px;color:#4a3d14;} .quote-band cite{font-style:normal;font-size:13px;color:#8a742c;font-weight:600;} .why-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start;} .why-photo-wrap{position:relative;width:100%;aspect-ratio:4/5;} .why-photo{position:absolute;inset:0;border-radius:52% 48% 42% 58% / 46% 40% 60% 54%;overflow:hidden;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .8s ease;} .why-photo.active{opacity:1;} .why-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:16px;padding:30px 32px;} .why-card p{font-size:14px;line-height:1.8;color:var(--ink-soft);margin:0 0 16px;} /* ===================== SHOP ===================== */ .shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px;} .shop-filters{display:flex;gap:10px;flex-wrap:wrap;} .shop-search{border:1px solid var(--line-dark);border-radius:30px;padding:10px 18px;font-size:13px;width:220px;outline:none;} .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .product-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:16px;overflow:hidden;} .product-card img{width:100%;aspect-ratio:1/1;object-fit:cover;} .product-card .pinfo{padding:16px 18px;} .product-card .cat{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:6px;} .product-card h4{font-size:15px;font-weight:600;margin:0 0 8px;} .product-card .price{font-weight:700;color:var(--accent);margin-bottom:12px;} .add-btn{width:100%;background:var(--navy);color:#fff;border:none;border-radius:30px;padding:10px;font-size:13px;font-weight:600;cursor:pointer;} .cart-fab{position:fixed;bottom:26px;right:26px;background:var(--navy);color:#fff;border:none;border-radius:30px;padding:14px 22px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px rgba(11,19,48,.3);z-index:60;} .cart-badge{background:var(--surface);color:var(--accent);border-radius:50%;padding:2px 7px;font-size:11px;margin-left:6px;} .cart-overlay{position:fixed;inset:0;background:rgba(6,10,26,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80;} .cart-overlay.active{opacity:1;pointer-events:auto;} .cart-drawer{position:fixed;top:0;right:-420px;width:400px;max-width:90vw;height:100%;background:var(--surface);z-index:81;transition:right .25s ease;display:flex;flex-direction:column;} .cart-drawer.active{right:0;} .cart-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line-dark);} .cart-drawer-body{flex:1;overflow-y:auto;padding:16px 22px;} .cart-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-dark);} .cart-line img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:none;} .cart-line .qty-stepper{display:flex;align-items:center;gap:8px;margin-top:6px;} .cart-line .qty-stepper button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-dark);background:var(--surface);cursor:pointer;} .cart-drawer-foot{padding:20px 22px;border-top:1px solid var(--line-dark);} .cart-subtotal{display:flex;justify-content:space-between;font-weight:700;margin-bottom:14px;} .modal-btn{width:100%;} .checkout-progress{display:flex;gap:8px;justify-content:center;margin-bottom:18px;} .checkout-progress span{width:24px;height:4px;border-radius:2px;background:var(--line-dark);} .checkout-progress span.active{background:var(--navy);} .order-summary-row{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;} .order-summary-row.total{font-weight:700;border-top:1px solid var(--line-dark);margin-top:8px;padding-top:12px;} /* ===================== PARTNERSHIP ===================== */ .months-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .months-grid label{border:1px solid var(--line-dark);border-radius:10px;padding:10px;text-align:center;font-size:13px;cursor:pointer;display:block;} .months-grid input{display:none;} .months-grid input:checked + span, .months-grid label:has(input:checked){background:var(--navy);color:#fff;border-color:var(--accent);} .review-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:16px;padding:26px;position:sticky;top:100px;} .review-card .row{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line-dark);} .partner-dash-top{background:linear-gradient(135deg,#6a5fc2,#4238a0);color:#fff;border-radius:18px;padding:30px;margin-bottom:26px;} .partner-dash-top .row{display:flex;justify-content:space-between;font-size:13.5px;padding:4px 0;} .sub-table{width:100%;border-collapse:collapse;font-size:13px;} .sub-table th,.sub-table td{padding:12px;text-align:left;border-bottom:1px solid var(--line-dark);} .status-pill-pub{background:#e2f7e6;color:#1f5a2c;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;} /* ===================== TWC ===================== */ .twc-hero{background:linear-gradient(180deg,rgba(6,10,26,.55),rgba(6,10,26,.85)),var(--twc-hero-bg,url('https://images.unsplash.com/photo-1508614589041-895b88991e3e?q=80&w=1600&auto=format&fit=crop')) center/cover;color:#fff;padding:110px 0 75px;text-align:center;} .twc-hero .sub{color:#d8dcff;letter-spacing:2px;font-size:12px;text-transform:uppercase;font-weight:600;margin-bottom:10px;} .twc-hero h1{font-size:44px;margin:0 0 16px;} .twc-hero p{max-width:560px;margin:0 auto 26px;color:#dcdeee;font-size:14.5px;line-height:1.7;} .countdown-card{max-width:420px;margin:0 auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:22px;} .countdown-label{font-size:12px;color:#d8dcff;margin-bottom:12px;} .countdown-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .countdown-grid .num{font-size:28px;font-weight:700;} .countdown-grid .lbl{font-size:11px;color:#c7cbea;} .twc-event-card{display:grid;grid-template-columns:1fr 1.3fr;gap:0;background:var(--surface);border:1px solid var(--line-dark);border-radius:18px;overflow:hidden;} .twc-event-photo{width:100%;height:100%;object-fit:cover;} .twc-event-info{padding:30px;} .twc-event-info .theme{color:var(--accent);font-weight:600;font-size:13px;margin:6px 0;} .twc-event-info .subtitle{color:var(--muted);font-size:13px;margin-bottom:14px;} .twc-event-meta{display:flex;gap:26px;font-size:13px;margin:16px 0;} .twc-event-actions{display:flex;gap:10px;flex-wrap:wrap;} .mission-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;} .mission-list li{background:var(--surface);border:1px solid var(--line-dark);border-radius:12px;padding:16px 20px;font-size:14px;} .merch-tile{background:var(--surface);border:1px solid var(--line-dark);border-radius:14px;overflow:hidden;} .merch-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;} .merch-tile .info{padding:12px 14px;} .merch-tile h5{font-size:13.5px;margin:0 0 4px;} .merch-tile .price{font-size:13px;font-weight:700;color:var(--accent);} .merch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} .moments-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .moments-grid img{border-radius:12px;aspect-ratio:1/1;object-fit:cover;} .highlight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .highlight-thumb{position:relative;border-radius:12px;aspect-ratio:1/1;background-size:cover;background-position:center;} .highlight-thumb a{display:block;width:100%;height:100%;} .highlight-thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;background:rgba(6,10,26,.25);border-radius:12px;} /* ===================== SHARED: payment result ===================== */ .result-card{max-width:480px;margin:100px auto;background:var(--surface);border:1px solid var(--line-dark);border-radius:18px;padding:44px;text-align:center;} .result-icon{font-size:40px;margin-bottom:16px;} @media (max-width:900px){ .give-grid{grid-template-columns:1fr;} .bank-grid{grid-template-columns:1fr;} .why-grid{grid-template-columns:1fr;} .product-grid{grid-template-columns:repeat(2,1fr);} .merch-grid{grid-template-columns:repeat(2,1fr);} .moments-grid{grid-template-columns:repeat(2,1fr);} .highlight-grid{grid-template-columns:repeat(2,1fr);} .twc-event-card{grid-template-columns:1fr;} .months-grid{grid-template-columns:repeat(2,1fr);} } /* ===================== HOMEPAGE ===================== */ /* Hero: photo background, a top row (text left / "Service for Today" badge right), then a large gap before a single centered CTA line + one button - NOT a two-button center-everything hero. */ .hero{ position:relative;overflow:hidden; color:#fff;min-height:620px;display:flex;flex-direction:column;justify-content:center; } .hero-bg-slideshow{position:absolute;inset:0;z-index:0;background:#0b1330;} .hero-bg-slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;} .hero-bg-slideshow img.active{opacity:1;} .hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,10,26,.35),rgba(6,10,26,.75));} .hero-bg-dots{z-index:2;} .hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 40px;width:100%;} .hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;} .hero h1{font-size:64px;line-height:1.05;margin:6px 0;font-weight:500;} .hero .tagline{max-width:480px;font-style:italic;font-size:16px;line-height:1.6;color:#e7e7ee;margin-top:18px;} .service-today{text-align:right;} .service-today .label{font-size:16px;margin-bottom:10px;} .pill-open{background:var(--surface);color:var(--accent);padding:8px 20px;border-radius:30px;font-size:13px;font-weight:600;} .hero-cta{margin-top:100px;text-align:center;} .hero-cta p{font-size:15px;font-weight:600;letter-spacing:.3px;max-width:640px;margin:0 auto 24px;} .hero-cta .btn{background:var(--surface);color:var(--accent);} .marquee{background:var(--navy);color:#fff;overflow:hidden;white-space:nowrap;padding:14px 0;border-top:1px solid var(--line);} .marquee-track{display:inline-block;padding-left:100%;animation:marquee-scroll 18s linear infinite;font-size:13px;letter-spacing:2px;font-weight:600;} .marquee-track span{margin-right:80px;color:#aeb4d6;} @keyframes marquee-scroll{0%{transform:translateX(0);}100%{transform:translateX(-100%);}} /* Next Service / Daily Word: NOT full-bleed sections - each is a small rounded gradient "card" sitting inside a plain (cream-page-background) section, so the hero (photo) doesn't visually run into them. */ .gradient-card{ background:linear-gradient(135deg,#1b1442,#241a5c);border-radius:22px;padding:34px 40px;color:#fff; display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; } .gradient-card .eyebrow{color:#cfd2f2;} .gradient-card h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;margin:0;} .gradient-card .when{font-size:13px;color:#c3c6e6;margin-top:4px;} .gradient-card .btn.light{background:var(--surface);color:var(--accent);white-space:nowrap;} .ns-countdown{display:flex;gap:22px;} .ns-countdown .unit{text-align:center;} .ns-countdown .num{font-family:'Playfair Display',serif;font-size:28px;font-weight:600;} .ns-countdown .lbl{font-size:10.5px;color:#9aa0cc;text-transform:uppercase;letter-spacing:1px;} .daily-word-card{max-width:520px;} .daily-word-card h3{margin:0 0 8px;} .daily-word-card .quote{font-family:'Playfair Display',serif;font-style:italic;color:#dfe2ff;font-size:14px;margin:0 0 6px;line-height:1.6;} .daily-word-card cite{font-size:12.5px;color:#8fe3a3;font-weight:600;} .section-band{padding:100px 0;} .section-head{text-align:center;max-width:640px;margin:0 auto 46px;} .section-head h2{font-size:34px;font-weight:500;margin:0;} .section-head p{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.7;} .about-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .about-teaser-card{position:relative;height:340px;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;} .about-teaser-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.65) 100%);} .about-teaser-card span{position:absolute;left:24px;bottom:22px;color:#fff;font-size:14px;font-weight:700;letter-spacing:2px;z-index:2;} /* Services: one dark gradient panel holding all 3 items, not 3 separate white cards. */ .services-band{background:var(--cream-2);} .services-band .section-head .sub{font-family:'Playfair Display',serif;font-style:italic;font-size:26px;margin-top:6px;color:var(--accent);} .service-panel{background:linear-gradient(135deg,#1b1442,#241a5c);border-radius:22px;padding:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:760px;margin:0 auto;} .service-item{color:#fff;text-align:left;} .service-item .ic{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:18px;} .service-item h4{margin:0 0 4px;font-size:15px;font-weight:600;} .service-item .day, .service-item .time{font-size:13px;color:#b9bce0;margin-bottom:2px;} /* Ministries: whole block floats in a white card with shadow; photo is a plain rounded rectangle (NOT the organic "blob" shape used elsewhere on the site), list column is wider than the photo column. */ .ministries-wrap{background:var(--surface);border-radius:24px;padding:50px;box-shadow:0 10px 40px rgba(0,0,0,.05);} .ministries-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;flex-wrap:wrap;gap:20px;} .ministries-head h2{font-size:34px;font-weight:500;margin:6px 0 0;} .ministries-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:stretch;} .ministries-photo{position:relative;border-radius:18px;overflow:hidden;min-height:420px;} .ministries-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;} .ministries-photo img.active{opacity:1;} .ministries-list h3{font-size:22px;font-weight:500;margin:0 0 18px;} .ministry-row{display:flex;gap:16px;align-items:flex-start;padding:16px 4px;border-bottom:1px solid var(--line-dark);border-radius:10px;transition:background .2s,padding-left .2s;} .ministry-row:hover{background:var(--cream-2);padding-left:10px;} .ministry-row:last-child{border-bottom:none;} .ministry-row .em{width:36px;height:36px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;} .ministry-row h5{margin:0 0 4px;font-size:15px;font-weight:600;} .ministry-row p{margin:0;font-size:13px;color:var(--muted);line-height:1.5;} /* Events: a promo video banner ABOVE the 3-tile grid - this was dropped in an earlier pass and is being restored here. */ .events-video{ position:relative;border-radius:20px;overflow:hidden;height:420px;margin-bottom:30px; background-size:cover;background-position:center; display:flex;align-items:center;justify-content:center;border:none;padding:0;cursor:default;width:100%; } .events-video::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.2),rgba(10,10,10,.75));} .events-video.has-video{cursor:pointer;} .events-video .play-btn{position:relative;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;backdrop-filter:blur(4px);} .events-caption{position:absolute;bottom:22px;left:26px;color:#fff;font-size:13px;letter-spacing:.5px;} .events-band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .events-band-grid .tile{border-radius:16px;aspect-ratio:4/3;background-size:cover;background-position:center;box-shadow:0 10px 24px rgba(0,0,0,.08);} .fellowship-band{background:var(--cream-2);} .fellowship-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;} .fellowship-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:14px;padding:22px;} .fellowship-card h5{font-size:15px;margin:0 0 6px;} .fellowship-card p{font-size:12.5px;color:var(--muted);margin:0 0 3px;} .testi-slideshow{max-width:680px;margin:0 auto;text-align:center;position:relative;} .testi-slide{display:none;} .testi-slide.active{display:block;} .testi-slide p{font-family:'Playfair Display',serif;font-style:italic;font-size:19px;line-height:1.8;color:var(--ink-soft);margin:0 0 16px;} .testi-slide cite{font-size:13px;font-weight:600;color:var(--muted);} .testi-dots{display:flex;gap:8px;justify-content:center;margin-top:24px;} .testi-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-dark);cursor:pointer;} .testi-dots span.active{background:var(--navy);} .cta-band{border-radius:24px;padding:60px;text-align:center;background-size:cover;background-position:center;position:relative;overflow:hidden;color:#fff;} .cta-band::after{content:"";position:absolute;inset:0;background:rgba(6,10,26,.55);} .cta-band .inner{position:relative;z-index:2;} .cta-band h2{font-size:30px;margin:0 0 8px;} .cta-band p{color:#dcdeee;font-size:14px;margin:0 0 24px;} .cta-band-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;} /* ===================== ABOUT ===================== */ .home-family-band{background:var(--cream-2);} .home-family-band > .wrap > h2{font-size:34px;font-weight:500;margin:0 0 40px;} .hf-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:start;} .hf-photo{border-radius:61% 39% 44% 56% / 51% 43% 57% 49%;overflow:hidden;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;transition:border-radius .6s ease;} .hf-photo:hover{border-radius:39% 61% 56% 44% / 49% 57% 43% 51%;} .hf-text h3{font-size:20px;font-weight:500;line-height:1.4;margin:0 0 10px;} .hf-text .also{font-size:13px;color:var(--muted);margin-bottom:20px;} .hf-text .also b{color:var(--accent);font-weight:600;} .hf-card{background:var(--surface);border-radius:14px;padding:26px 28px;border:1px solid var(--line-dark);} .hf-card p{font-size:14px;line-height:1.75;color:var(--ink-soft);margin:0;} .pastors-band > .wrap > h2{font-size:34px;font-weight:500;text-align:right;margin:0 0 30px;} .pastors-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:16px;padding:34px;} .pastors-card h3{font-size:26px;font-weight:500;margin:0 0 18px;} .pastors-card p{font-size:14px;line-height:1.75;color:var(--ink-soft);margin:0 0 16px;} .pastors-card p:last-of-type{margin-bottom:20px;} .pastors-photo{border-radius:48% 52% 38% 62% / 42% 36% 64% 58%;overflow:hidden;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;display:block;transition:border-radius .6s ease;} .pastors-photo:hover{border-radius:52% 48% 62% 38% / 58% 64% 36% 42%;} /* Small 3-card teaser embedded on the About page, linking to the full /leaders roster */ .leaders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .leader-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:8/5;background-size:cover;background-position:center;} .leader-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.65) 100%);} .leader-card span{position:absolute;left:18px;bottom:16px;color:#fff;font-size:14px;font-weight:600;z-index:2;} /* Full /leaders page - alternating zigzag bio blocks */ .leaders-intro{padding-bottom:20px;} .leaders-intro h2{font-size:32px;font-weight:500;margin:0 0 14px;} .leaders-intro p{font-size:14px;color:var(--muted);max-width:640px;line-height:1.75;} .leader-block{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line-dark);} .leader-block:last-child{border-bottom:none;} .leader-block.reverse{grid-template-columns:1.4fr 1fr;} .leader-block.reverse .leader-photo{order:2;} .leader-block.reverse .leader-text{order:1;} .leader-photo{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:58% 42% 44% 56% / 48% 40% 60% 52%;transition:border-radius .6s ease;} .leader-photo:hover{border-radius:42% 58% 56% 44% / 52% 60% 40% 48%;} .leader-text h3{font-size:24px;font-weight:600;margin:0 0 2px;} .leader-text .role{font-size:13px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;} .leader-text p{font-size:14px;color:var(--muted);line-height:1.75;margin:0;} .suggestion-link{display:block;text-align:center;padding:24px 0;color:var(--muted);font-size:13px;text-decoration:underline;} @media (max-width:900px){ .ministries-grid{grid-template-columns:1fr;} .service-panel{grid-template-columns:1fr;} .hero h1{font-size:40px;} .hero-top{flex-direction:column;gap:20px;} .about-teaser-grid{grid-template-columns:1fr;} .events-band-grid{grid-template-columns:1fr 1fr;} .cta-band-grid{grid-template-columns:1fr;} .hf-grid{grid-template-columns:1fr;} .leaders-grid{grid-template-columns:1fr 1fr;} .leader-block, .leader-block.reverse{grid-template-columns:1fr;} .leader-block.reverse .leader-photo{order:1;} .leader-block.reverse .leader-text{order:2;} .leader-photo{aspect-ratio:1/1;border-radius:32px;} .leader-photo:hover{border-radius:32px;} } /* ===================== WATCH / SERMONS ===================== */ .live-panel{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;} .live-video{position:relative;border-radius:20px;overflow:hidden;height:280px;background:linear-gradient(180deg,rgba(10,10,10,.2),rgba(10,10,10,.75)),url('https://images.unsplash.com/photo-1508162153744-e7f38bbcf9c9?q=80&w=1200&auto=format&fit=crop') center/cover;display:flex;align-items:center;justify-content:center;} .live-video .play-btn{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;backdrop-filter:blur(4px);} .live-badge{position:absolute;top:18px;left:18px;background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;padding:6px 12px;border-radius:20px;} .live-info h3{font-size:24px;margin:0 0 10px;} .live-info p{font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.7;} .live-info .btn{margin-right:10px;margin-bottom:10px;} .live-info .btn.outline{background:var(--surface);border:1px solid var(--line-dark);color:var(--accent);box-shadow:none;} .sermon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .sermon-card{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.06);cursor:pointer;} .sermon-card .thumb{position:relative;height:170px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;} .sermon-card .thumb .play{color:#fff;font-size:26px;background:rgba(0,0,0,.35);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;} .sermon-card .info{padding:16px 18px;} .sermon-card .tag{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--accent);margin-bottom:6px;} .sermon-card h4{font-size:15px;font-weight:600;margin:0 0 6px;} .sermon-card .meta{font-size:12.5px;color:var(--muted);} .series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .series-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;background-size:cover;background-position:center;} .series-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%);} .series-card span{position:absolute;left:16px;bottom:14px;color:#fff;font-weight:700;font-size:14px;z-index:2;} .podcast-strip{background:var(--navy);border-radius:22px;padding:36px 44px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;} .podcast-strip h3{font-size:22px;margin:6px 0 0;} .mixlr-panel{background:var(--cream-2);border:1px solid var(--line-dark);border-radius:16px;padding:28px;text-align:center;} .mixlr-panel h3{margin:0 0 8px;} .mixlr-panel p{color:var(--muted);font-size:14.5px;margin:0 0 20px;} .mixlr-embed{border-radius:12px;overflow:hidden;max-width:640px;margin:0 auto;} .mixlr-embed iframe{width:100%;min-height:150px;border:0;display:block;} .video-embed{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b1330;} .video-embed iframe, .video-embed video{width:100%;height:100%;border:0;display:block;} .video-embed.placeholder{display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;} /* ===================== RESOURCES ===================== */ .resource-search{display:flex;gap:10px;max-width:520px;margin:24px auto 0;} .resource-search input{flex:1;border:1px solid var(--line-dark);border-radius:30px;padding:12px 18px;font-size:13.5px;outline:none;} .resource-search button{background:var(--navy);color:#fff;border:none;border-radius:30px;padding:12px 22px;font-size:13px;font-weight:600;cursor:pointer;} .featured-banner{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;align-items:center;background:var(--surface);border:1px solid var(--line-dark);border-radius:20px;padding:30px;} .featured-banner img{width:100%;border-radius:14px;aspect-ratio:1/1;object-fit:cover;} .featured-banner h3{font-size:24px;margin:6px 0 12px;} .featured-banner p{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 20px;} .resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .resource-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:16px;overflow:hidden;} .resource-card .thumb{position:relative;height:160px;background-size:cover;background-position:center;} .resource-card .type-badge{position:absolute;top:12px;left:12px;background:rgba(11,19,48,.85);color:#fff;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:20px;} .resource-card .info{padding:16px 18px;} .resource-card .cat{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:6px;} .resource-card h4{font-size:15px;font-weight:600;margin:0 0 8px;} .resource-card p{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 14px;} .resource-card .dl-btn{display:inline-block;background:var(--navy);color:#fff;border:none;border-radius:20px;padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;} /* ===================== DAILY WORD ===================== */ .dw-hero{background:var(--cream-2);} .dw-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;} .dw-hero-head h1{font-size:34px;margin:6px 0 16px;} .dw-hero-head p{font-size:14px;color:var(--muted);line-height:1.75;max-width:420px;} .dw-today{background:var(--surface);border-radius:20px;padding:34px;box-shadow:0 10px 40px rgba(0,0,0,.05);} .dw-today .date{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;} .dw-today h2{font-size:26px;margin:0 0 14px;} .dw-today .verse{font-family:'Playfair Display',serif;font-style:italic;font-size:16px;color:var(--ink-soft);margin-bottom:8px;line-height:1.6;} .dw-today .ref{font-size:12.5px;font-weight:600;color:var(--green);margin-bottom:18px;} .dw-today .body-text{font-size:13.5px;color:var(--ink-soft);line-height:1.8;margin-bottom:22px;} .dw-audio{width:100%;display:block;margin-bottom:22px;} .dw-today .actions{display:flex;gap:10px;flex-wrap:wrap;} .dw-today .btn.outline{background:var(--surface);border:1px solid var(--line-dark);color:var(--accent);box-shadow:none;} .dw-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .dw-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:14px;padding:22px;} .dw-card .date{font-size:11.5px;color:var(--muted);margin-bottom:8px;} .dw-card h4{font-size:16px;margin:0 0 6px;} .dw-card .ref{font-size:12px;font-weight:600;color:var(--green);margin-bottom:10px;} .dw-card p{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 14px;} .dw-card .readmore{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;} .dw-subscribe{background:var(--navy);} .dw-subscribe-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:#fff;} .dw-subscribe-inner h3{font-size:22px;margin:6px 0 0;} /* ===================== WELCOME / LANDING ===================== */ body.welcome-body{ margin:0;min-height:100vh;display:flex;flex-direction:column;color:#fff;position:relative; } .welcome-bg-layer{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#0b1330;} .welcome-bg-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;} .welcome-bg-slide.active{opacity:1;} .welcome-bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,26,.35) 0%,rgba(6,10,26,.55) 45%,rgba(6,10,26,.92) 100%);} .welcome-header{display:flex;justify-content:center;padding:36px 24px 0;} .welcome-header img{height:112px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));} .welcome-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;} .welcome-main h1{font-family:'Playfair Display',serif;font-weight:500;font-size:52px;line-height:1.1;margin:18px 0;max-width:720px;} .welcome-main h1 em{font-style:italic;color:#8fe3a3;} .welcome-main .tagline{font-size:15.5px;color:#dfe2ee;max-width:480px;line-height:1.75;margin:0 0 40px;} .welcome-main .cta-stack{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:10px;} .welcome-btn{display:inline-flex;align-items:center;gap:10px;background:var(--surface);color:var(--accent);padding:18px 40px;border-radius:50px;font-size:15px;font-weight:700;letter-spacing:.3px;box-shadow:0 20px 50px rgba(0,0,0,.35);border:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;} .welcome-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 26px 60px rgba(0,0,0,.4);} .new-here-btn{display:inline-flex;align-items:center;gap:10px;background:transparent;color:#fff;padding:18px 40px;border-radius:50px;font-size:15px;font-weight:700;letter-spacing:.3px;border:1.5px solid rgba(255,255,255,.55);cursor:pointer;transition:transform .25s ease,background .25s ease,border-color .25s ease;} .new-here-btn:hover{transform:translateY(-3px) scale(1.02);background:rgba(255,255,255,.12);border-color:#fff;} .welcome-main .arrow{transition:transform .25s ease;} .welcome-main button:hover .arrow{transform:translateX(4px);} .quick-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px;} .quick-links a{font-size:12.5px;font-weight:600;color:#e7e9f7;padding:10px 18px;border-radius:30px;border:1px solid rgba(255,255,255,.3);transition:background .2s,border-color .2s;} .quick-links a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);} footer.mini{text-align:center;padding:24px 20px 30px;font-size:11.5px;color:#a9adcc;display:flex;flex-direction:column;gap:10px;align-items:center;} .mini-socials{display:flex;gap:14px;} .mini-socials a{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:12px;color:#e7e9f7;} @media (max-width:900px){ .live-panel{grid-template-columns:1fr;} .sermon-grid{grid-template-columns:1fr 1fr;} .series-grid{grid-template-columns:1fr 1fr;} .featured-banner{grid-template-columns:1fr;} .resource-grid{grid-template-columns:1fr 1fr;} .dw-hero-grid{grid-template-columns:1fr;} .dw-archive-grid{grid-template-columns:1fr 1fr;} } @media (max-width:600px){ .welcome-main h1{font-size:34px;} .welcome-btn, .new-here-btn{padding:16px 26px;font-size:14px;} .welcome-main .cta-stack{flex-direction:column;align-items:stretch;} } /* ===================== PLAN YOUR VISIT / FAQ ===================== */ .info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .info-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:16px;padding:26px;text-align:center;} .info-card .ic{font-size:26px;margin-bottom:14px;} .info-card h5{font-size:15px;font-weight:600;margin:0 0 8px;} .info-card p{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0;} /* ===================== GALLERY ===================== */ /* Opening collage: tiles start scattered/rotated (via inline custom properties set per-tile in gallery.ejs) and fly into a neat grid once the "in" class is added by the page's script, staggered per tile. */ .gallery-collage{ display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:110px;gap:12px;margin:36px 0 10px; } .gallery-collage .collage-tile{ position:relative;border-radius:14px;overflow:hidden;opacity:0; transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--tr,0deg)) scale(.82); transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease; } .gallery-collage .collage-tile.in{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);} .gallery-collage .collage-tile img{width:100%;height:100%;object-fit:cover;display:block;} .gallery-collage .collage-tile:nth-child(6n+1){grid-column:span 2;grid-row:span 2;} .gallery-collage .collage-tile:nth-child(6n+4){grid-column:span 2;} .gallery-album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px;} .gallery-album-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:transform .25s ease,box-shadow .25s ease;} .gallery-album-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,19,48,.12);} .gallery-album-card .thumb{height:190px;background-size:cover;background-position:center;background-color:var(--cream-2);} .gallery-album-card .info{padding:16px 18px;} .gallery-album-card h4{font-size:15.5px;font-weight:600;margin:0 0 6px;} .gallery-album-card p{font-size:12.5px;color:var(--muted);margin:0;} .gallery-album-card .count{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--gold);} .gallery-empty{text-align:center;padding:60px 20px;color:var(--muted);} .gallery-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px;} .gallery-photo-grid .g-photo{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;border:none;padding:0;background:none;} .gallery-photo-grid .g-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;} .gallery-photo-grid .g-photo:hover img{transform:scale(1.06);} .gallery-lightbox{ position:fixed;inset:0;background:rgba(6,10,26,.92);display:none; align-items:center;justify-content:center;z-index:1000;padding:30px; } .gallery-lightbox.active{display:flex;} .gallery-lightbox img{max-width:min(88vw,1000px);max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);} .gallery-lightbox .lb-caption{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#e7e9f7;font-size:13px;} .gallery-lightbox .lb-close{position:absolute;top:24px;right:28px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer;} .gallery-lightbox .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer;} .gallery-lightbox .lb-prev{left:20px;} .gallery-lightbox .lb-next{right:20px;} /* ===== Shared on-site video popup (Homepage/Events/TWC/Ministry promo & highlight videos) ===== */ .video-popup-overlay{ position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center; background:rgba(6,10,26,.92);padding:30px; } .video-popup-overlay.active{display:flex;} .video-popup-wrap{width:100%;max-width:960px;max-height:88vh;overflow-y:auto;} .video-popup-content{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;} .video-popup-content video, .video-popup-content iframe{width:100%;height:100%;border:0;display:block;} .video-popup-close{position:absolute;top:24px;right:28px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer;z-index:1;} .video-popup-info{padding:20px 4px 0;color:#fff;} .video-popup-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;margin:0 0 8px;} .video-popup-desc{font-size:13.5px;color:#c3c6e6;line-height:1.6;margin:0;} @media (max-width:900px){ .gallery-collage{grid-template-columns:repeat(3,1fr);} .gallery-album-grid{grid-template-columns:1fr 1fr;} .gallery-photo-grid{grid-template-columns:1fr 1fr;} } @media (max-width:600px){ .gallery-collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:90px;} .gallery-album-grid{grid-template-columns:1fr;} .gallery-photo-grid{grid-template-columns:1fr 1fr;} } .faq-item{background:var(--surface);border:1px solid var(--line-dark);border-radius:12px;padding:18px 22px;margin-bottom:12px;} .faq-item summary{cursor:pointer;font-size:14.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;list-style:none;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary .plus{transition:transform .2s;color:var(--muted);font-weight:400;} .faq-item[open] summary .plus{transform:rotate(45deg);} .faq-item p{font-size:13.5px;color:var(--muted);line-height:1.75;margin:14px 0 0;} .faq-cta{text-align:center;background:var(--cream-2);border-radius:20px;padding:44px;margin-top:40px;} .faq-cta h4{font-size:20px;margin:0 0 8px;} .faq-cta p{font-size:14px;color:var(--muted);margin:0 0 20px;} @media (max-width:900px){ .info-grid{grid-template-columns:1fr 1fr;} } /* ===================== CAMPUS (LMS) ===================== */ .my-learning-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:600px;margin:0 auto;} .ml-tile{background:var(--surface);border:1px solid var(--line-dark);border-radius:14px;padding:20px;text-align:center;} .ml-tile .num{font-family:'Playfair Display',serif;font-size:28px;font-weight:600;color:var(--accent);} .ml-tile .lbl{font-size:11.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px;} .campus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .campus-card{background:var(--surface);border:1px solid var(--line-dark);border-radius:16px;overflow:hidden;display:block;} .campus-card img{width:100%;aspect-ratio:16/10;object-fit:cover;} .campus-card .info{padding:18px 20px;} .campus-card h4{font-size:16px;font-weight:600;margin:0 0 8px;} .campus-card p{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 12px;} .progress-track{width:100%;height:8px;background:var(--cream-2);border-radius:6px;overflow:hidden;} .progress-fill{height:100%;background:var(--green);border-radius:6px;transition:width .3s ease;} .campus-course-head{margin:20px 0 30px;} .campus-course-head h1{font-size:32px;margin:10px 0 10px;} .campus-course-head p{font-size:14px;color:var(--muted);max-width:600px;margin:0 0 18px;} .cert-banner{background:linear-gradient(135deg,#1b1442,#241a5c);color:#fff;border-radius:16px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:30px;} .campus-module-list{display:flex;flex-direction:column;gap:12px;} .campus-module-row{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line-dark);border-radius:14px;padding:18px 20px;} .campus-module-row:hover{border-color:var(--accent);} .campus-module-row h5{font-size:15px;font-weight:600;margin:0 0 4px;} .campus-module-row p{font-size:12.5px;color:var(--muted);margin:0;} .num-circle{width:34px;height:34px;border-radius:50%;background:var(--cream-2);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;} .num-circle.done{background:var(--green);color:#fff;} .module-state{font-size:11.5px;color:var(--muted);white-space:nowrap;} .materials-list{margin-top:26px;} .materials-list h4{font-size:15px;margin:0 0 12px;} .material-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line-dark);border-radius:10px;padding:12px 16px;margin-bottom:8px;font-size:13px;} .quiz-question{background:var(--surface);border:1px solid var(--line-dark);border-radius:14px;padding:20px 22px;margin-bottom:16px;} .quiz-question h4{font-size:14.5px;margin:0 0 14px;} .quiz-option{border:1px solid var(--line-dark);border-radius:10px;padding:12px 16px;margin-bottom:8px;font-size:13.5px;cursor:pointer;transition:border-color .2s,background .2s;} .quiz-option:hover{border-color:var(--accent);} .quiz-option.selected{background:var(--navy);color:#fff;border-color:var(--accent);} .quiz-result{text-align:center;background:var(--surface);border:1px solid var(--line-dark);border-radius:18px;padding:44px;} .quiz-result .score{font-family:'Playfair Display',serif;font-size:48px;font-weight:700;color:var(--accent);} .quiz-result .verdict{font-size:18px;font-weight:600;margin:10px 0;} .certificate{background:var(--surface);border:2px solid var(--gold);border-radius:20px;padding:60px;text-align:center;max-width:720px;margin:0 auto;} .certificate h1{font-size:34px;margin:16px 0 24px;} .cert-line{font-size:14px;color:var(--muted);margin:0;} .cert-name{font-size:30px;margin:10px 0;color:var(--accent);} .cert-course{font-size:22px;margin:10px 0 20px;font-style:italic;} .cert-date{font-size:13px;color:var(--muted);margin-bottom:36px;} .cert-signatures{display:flex;justify-content:space-around;gap:20px;font-size:12.5px;color:var(--muted);} .cert-signatures span{font-size:11px;} .sig-line{width:160px;border-top:1px solid var(--ink);margin:0 auto 8px;padding-top:6px;} @media (max-width:900px){ .campus-grid{grid-template-columns:1fr 1fr;} .my-learning-bar{grid-template-columns:1fr;} } /* ===================== PHONE FIELD (country code + number) ===================== */ .phone-field-wrap{ display:flex;align-items:stretch;border:1px solid var(--line-dark);border-radius:10px; background:var(--surface);overflow:hidden;transition:border-color .2s;margin-bottom:16px; } .phone-field-wrap:focus-within{border-color:var(--accent);} .phone-cc{ border:none;background:var(--cream-2);padding:11px 6px 11px 12px;font-size:13px;font-family:inherit; outline:none;border-right:1px solid var(--line-dark);color:var(--ink);cursor:pointer;flex:none;max-width:112px; } .phone-number{flex:1;border:none;padding:11px 14px;font-size:14px;font-family:inherit;outline:none;min-width:0;color:var(--ink);}