/** * Faith Exchange — Main Stylesheet * /assets/css/fe-main.css * * Shared across: index.php, about.php, give.php, prayer.php, * praise.php, newsletter.php, events.php, event.php * * Fonts loaded separately in each page : * Libre Baskerville, Plus Jakarta Sans, Lora (Google Fonts) */ /* ── CSS VARIABLES ─────────────────────────────────────────────────────────── */ :root { --white: #FFFFFF; --off: #F6F8FC; --blue: #1B4F8A; --blue-mid: #2D6DB5; --blue-lt: #EBF2FB; --coral: #F05A35; --coral-lt: #FEF0EB; --coral-dk: #C9431F; --ink: #14213D; --ink-60: #6B7280; --ink-30: #C5CBD6; --border: rgba(27,79,138,0.1); } /* ── RESET ─────────────────────────────────────────────────────────────────── */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--white); color:var(--ink); overflow-x:hidden; } /* ── NAV ───────────────────────────────────────────────────────────────────── */ nav { position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(255,255,255,0.96); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-between; padding:0 4rem; height:68px; transition:background .3s; } .nav-logo { display:flex; align-items:center; gap:.65rem; text-decoration:none; } .nav-logo-img { width:40px; height:40px; object-fit:contain; } .nav-logo-icon { width:36px; height:36px; background:var(--blue); border-radius:6px; display:flex; align-items:center; justify-content:center; color:white; font-size:1.05rem; font-weight:700; font-family:'Libre Baskerville',serif; flex-shrink:0; } .nav-logo-text { font-family:'Libre Baskerville',serif; font-size:1.15rem; font-weight:700; color:var(--ink); } .nav-logo-text span { color:var(--coral); } .nav-links { display:flex; align-items:center; gap:2rem; list-style:none; font-size:.82rem; font-weight:600; } .nav-links a { text-decoration:none; color:var(--ink-60); transition:color .2s; } .nav-links a:hover, .nav-links a.active { color:var(--blue); } .nav-right { display:flex; gap:.75rem; align-items:center; } .hamburger { display:none; background:none; border:none; cursor:pointer; padding:.25rem; color:var(--ink); } .hamburger svg { width:22px; height:22px; } /* ── MOBILE MENU ───────────────────────────────────────────────────────────── */ .mobile-menu { display:none; position:fixed; top:68px; left:0; right:0; background:white; border-bottom:1px solid var(--border); z-index:190; padding:1.5rem 2rem; } .mobile-menu.open { display:block; } .mobile-menu ul { list-style:none; display:flex; flex-direction:column; gap:1rem; } .mobile-menu a { text-decoration:none; font-size:.95rem; font-weight:600; color:var(--ink-60); } .mobile-menu a:hover { color:var(--blue); } .mobile-menu .mobile-ctas { display:flex; gap:.75rem; margin-top:1.25rem; flex-wrap:wrap; } /* ── BUTTONS ───────────────────────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; border:none; cursor:pointer; font-family:inherit; font-weight:600; border-radius:7px; transition:all .2s; } .btn-ghost { font-size:.82rem; color:var(--blue); padding:.5rem 1rem; background:var(--blue-lt); } .btn-ghost:hover { background:#D8E8F7; } .btn-coral { font-size:.82rem; color:white; padding:.55rem 1.2rem; background:var(--coral); } .btn-coral:hover { background:var(--coral-dk); transform:translateY(-1px); } .btn-blue { font-size:.82rem; color:white; padding:.55rem 1.2rem; background:var(--blue); } .btn-blue:hover { background:#153F72; transform:translateY(-1px); } .btn-give { font-size:.82rem; color:white; padding:.55rem 1.3rem; background:linear-gradient(135deg,#E8523C,#F07050); border-radius:7px; } .btn-give:hover { background:linear-gradient(135deg,#C9431F,#D86040); transform:translateY(-1px); } .hero-btn-outline { padding:.85rem 1.75rem; font-size:.88rem; border-radius:8px; background:rgba(255,255,255,0.15); color:white; border:1px solid rgba(255,255,255,0.35); text-decoration:none; display:inline-flex; align-items:center; font-weight:600; transition:all .2s; } .hero-btn-outline:hover { background:rgba(255,255,255,0.25); } /* ── SECTIONS ──────────────────────────────────────────────────────────────── */ section { padding:5.5rem 4.5rem; } .section-alt { background:var(--off); } .eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--coral); margin-bottom:.65rem; display:flex; align-items:center; gap:.5rem; } .eyebrow::before { content:''; display:inline-block; width:1.5rem; height:2px; background:var(--coral); border-radius:2px; } .section-h { font-family:'Libre Baskerville',serif; font-size:clamp(1.9rem,3vw,2.75rem); font-weight:700; color:var(--ink); letter-spacing:-0.02em; line-height:1.2; margin-bottom:1rem; } .section-h em { font-style:italic; color:var(--coral); } .section-sub { font-size:.9rem; color:var(--ink-60); line-height:1.75; max-width:36rem; } .section-header-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3rem; } .divider { width:3rem; height:3px; background:var(--coral); border-radius:2px; margin:1rem 0 1.5rem; } /* ── PAGE HERO (inner pages) ───────────────────────────────────────────────── */ .page-hero { background:linear-gradient(105deg,#0D2340 0%,var(--blue) 60%,#0D2340 100%); padding:7.5rem 4.5rem 5rem; position:relative; overflow:hidden; } .page-hero-dots { position:absolute; inset:0; opacity:.05; background-image:radial-gradient(white 1.5px,transparent 1.5px); background-size:28px 28px; } .page-hero-inner { position:relative; z-index:1; max-width:700px; } .page-hero-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; } .page-hero-eyebrow::before { content:''; display:inline-block; width:1.5rem; height:2px; background:var(--coral); border-radius:2px; } .page-hero h1 { font-family:'Libre Baskerville',serif; font-size:clamp(2.4rem,4vw,4rem); font-weight:700; color:white; line-height:1.1; letter-spacing:-.02em; margin-bottom:1rem; } .page-hero h1 em { font-style:italic; color:var(--coral); } .page-hero p { font-family:'Lora',serif; font-size:1.05rem; color:rgba(255,255,255,.65); line-height:1.8; max-width:36rem; } /* ── HERO (homepage) ───────────────────────────────────────────────────────── */ .hero { position:relative; min-height:100vh; display:flex; align-items:stretch; padding-top:68px; overflow:hidden; } .hero-video-bg { position:absolute; inset:0; z-index:0; background:#0D2340; } .hero-video-bg video { width:100%; height:100%; object-fit:cover; opacity:.45; } #heroCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; } .hero-overlay { position:absolute; inset:0; z-index:2; background:linear-gradient(105deg,rgba(13,35,64,0.92) 0%,rgba(27,79,138,0.75) 50%,rgba(13,35,64,0.6) 100%); } .hero-content { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,39%) minmax(360px,31%) minmax(320px,30%); width:100%; min-height:calc(100vh - 68px); padding:4rem 4.5rem 0 4.5rem; gap:1rem; align-items:center; } .hero-copy { align-self:center; padding-bottom:2.5rem; } .hero-tag { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,0.12); color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,0.2); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.35rem .9rem; border-radius:100px; margin-bottom:1.75rem; width:fit-content; backdrop-filter:blur(6px); animation:fadeUp .5s ease both; } .hero-tag-dot { width:6px; height:6px; background:var(--coral); border-radius:50%; animation:blink 1.4s infinite; } .hero-h1 { font-family:'Libre Baskerville',serif; font-size:clamp(2.8rem,4.8vw,5rem); font-weight:700; line-height:1.06; color:white; letter-spacing:-0.025em; margin-bottom:1.5rem; animation:fadeUp .5s .1s ease both; } .hero-h1 .accent { color:var(--coral); font-style:italic; } .hero-h1 .hl { color:#7EC8F4; } .hero-sub { font-family:'Lora',serif; font-size:.95rem; font-weight:400; line-height:1.75; color:rgba(255,255,255,.82); max-width:30rem; margin-bottom:2.25rem; animation:fadeUp .5s .2s ease both; font-style:italic; } .hero-actions { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:2.5rem; animation:fadeUp .5s .3s ease both; } .hero-actions .btn { padding:.85rem 1.75rem; font-size:.88rem; border-radius:8px; } /* Hero address info */ .hero-info-block { display:flex; flex-direction:column; gap:.5rem; margin-top:1.75rem; animation:fadeUp .5s .4s ease both; } .hero-info-row { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:white; line-height:1.5; flex-wrap:wrap; } .hero-info-icon { font-size:.95rem; flex-shrink:0; } .hero-info-row strong { color:white; font-weight:700; } .hero-info-link { color:white; text-decoration:none; font-weight:500; transition:opacity .2s; } .hero-info-link:hover { opacity:.75; text-decoration:underline; } .hero-info-sep { color:rgba(255,255,255,.4); margin:0 .15rem; } /* Pastors photo */ .hero-pastors-col { display:flex; align-items:flex-end; justify-content:center; align-self:end; min-height:calc(100vh - 68px); padding-bottom:0; margin-bottom:-6px; pointer-events:none; } .hero-pastors-img { width:min(39vw,620px); height:80vh; min-height:610px; max-height:none; max-width:none; object-fit:contain; object-position:center bottom; vertical-align:bottom; display:block; filter:drop-shadow(0 12px 36px rgba(0,0,0,0.48)); animation:fadeUp .6s .15s ease both; } /* Hero panel */ .hero-panel { justify-self:end; align-self:center; width:100%; max-width:390px; transform:translateX(1.75rem); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:16px; padding:1.1rem; backdrop-filter:blur(16px); animation:fadeUp .6s .2s ease both; } .live-banner { background:var(--coral); border-radius:9px 9px 0 0; padding:.7rem 1rem; display:flex; align-items:center; gap:.55rem; } .live-dot { width:8px; height:8px; background:white; border-radius:50%; animation:blink 1.4s infinite; flex-shrink:0; } .live-banner-text { color:white; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .schedule-inner { background:white; border-radius:0 0 9px 9px; padding:.9rem; margin-bottom:.85rem; } .schedule-row { display:flex; align-items:center; gap:.65rem; padding:.45rem 0; border-bottom:1px solid #F0F4F9; } .schedule-row:last-child { border-bottom:none; padding-bottom:0; } .sday { width:40px; height:40px; border-radius:7px; background:var(--blue-lt); color:var(--blue); font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; } .sday span:last-child { font-size:.95rem; font-weight:700; line-height:1; } .sinfo-title { font-size:.8rem; font-weight:700; color:var(--ink); } .sinfo-time { font-size:.7rem; color:var(--ink-60); margin-top:.1rem; } .slive { font-size:.62rem; font-weight:700; color:var(--coral); letter-spacing:.06em; text-transform:uppercase; } .hero-scripture { border-top:1px solid rgba(255,255,255,0.12); padding-top:.85rem; margin-top:.15rem; } .hero-scripture p { font-family:'Lora',serif; font-style:italic; font-size:.9rem; color:rgba(255,255,255,.8); line-height:1.65; margin-bottom:.35rem; } .hero-scripture span { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); } /* ── EVENTS ─────────────────────────────────────────────────────────────────── */ .events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .event-card { background:white; border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s,box-shadow .25s; cursor:pointer; } .event-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(27,79,138,.12); } .event-top { height:10rem; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:1rem; } .event-top-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--blue) 0%,#2D6DB5 100%); } .event-top-bg.coral { background:linear-gradient(135deg,var(--coral) 0%,#F47A5A 100%); } .event-top-bg.navy { background:linear-gradient(135deg,#0D2847 0%,var(--blue) 100%); } .event-top-bg.teal { background:linear-gradient(135deg,#0E6B70 0%,#1A9BA2 100%); } .event-top-bg.purple { background:linear-gradient(135deg,#5B3A8A 0%,#7B5DBF 100%); } .event-top-pattern { position:absolute; inset:0; opacity:.12; background-image: repeating-linear-gradient(45deg,white 0,white 1px,transparent 0,transparent 32px), repeating-linear-gradient(-45deg,white 0,white 1px,transparent 0,transparent 32px); } .event-date-badge { position:relative; z-index:2; background:white; border-radius:7px; padding:.4rem .7rem; text-align:center; min-width:44px; } .event-date-month { font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); } .event-date-day { font-family:'Libre Baskerville',serif; font-size:1.4rem; font-weight:700; color:var(--ink); line-height:1; } .event-type-badge { position:absolute; top:.85rem; right:.85rem; z-index:2; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); color:white; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .6rem; border-radius:4px; backdrop-filter:blur(4px); } .event-body { padding:1.25rem; flex:1; display:flex; flex-direction:column; } .event-cat { font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:.3rem; } .event-title { font-family:'Libre Baskerville',serif; font-size:1.05rem; font-weight:700; color:var(--ink); line-height:1.35; margin-bottom:.6rem; } .event-meta { font-size:.75rem; color:var(--ink-60); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; } .event-sep { color:var(--ink-30); } .event-speaker { font-size:.72rem; color:var(--blue); font-weight:600; margin-top:.5rem; } .event-rsvp { margin-top:auto; padding-top:1rem; } .event-rsvp a { font-size:.75rem; font-weight:700; color:var(--coral); text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; } .event-rsvp a:hover { color:var(--coral-dk); } .events-more-card { background:var(--blue-lt); border:1px solid rgba(27,79,138,.15); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; text-align:center; min-height:240px; } /* ── PASTORS ─────────────────────────────────────────────────────────────────── */ .pastors-intro { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-bottom:3rem; } .pastors-story { font-family:'Lora',serif; font-size:.98rem; line-height:1.88; color:var(--ink-60); } .pastors-story strong { color:var(--ink); font-weight:600; } .pastors-story p+p { margin-top:1rem; } .pastors-quote-block { background:var(--blue-lt); border-left:4px solid var(--blue); border-radius:0 10px 10px 0; padding:1.5rem 1.75rem; } .pastors-quote { font-family:'Lora',serif; font-style:italic; font-size:1.1rem; color:var(--blue); line-height:1.7; margin-bottom:.65rem; } .pastors-quote-attr { font-size:.75rem; font-weight:700; color:var(--ink-60); letter-spacing:.06em; text-transform:uppercase; } .pastors-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; } .pastor-card { background:white; border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:transform .2s,box-shadow .2s; } .pastor-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(27,79,138,.1); } .pastor-photo { height:300px; background:#EBF2FB; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; } .pastor-photo img { width:100%; height:100%; object-fit:contain; object-position:center bottom; } .pastor-photo-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--blue-lt) 0%,#D8E8F7 100%); } .pastor-initials { position:relative; z-index:1; font-family:'Libre Baskerville',serif; font-size:2.5rem; font-weight:700; color:var(--blue); opacity:.3; } .pastor-tag { position:absolute; bottom:.75rem; left:.75rem; background:var(--coral); color:white; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .6rem; border-radius:4px; z-index:2; } .pastor-body { padding:1.25rem; } .pastor-name { font-family:'Libre Baskerville',serif; font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:.2rem; } .pastor-role { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:.65rem; } .pastor-bio { font-size:.78rem; color:var(--ink-60); line-height:1.65; } .pastor-more { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:700; color:var(--coral); text-decoration:none; margin-top:.75rem; } .pastor-more:hover { color:var(--coral-dk); } /* ── MINISTRIES ──────────────────────────────────────────────────────────────── */ .ministries-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .ministry-card { border-radius:12px; overflow:hidden; background:white; border:1px solid var(--border); display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; } .ministry-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(27,79,138,.09); } .ministry-top { height:9rem; padding:1.5rem; display:flex; flex-direction:column; justify-content:flex-end; position:relative; } .mt-blue { background:linear-gradient(135deg,var(--blue) 0%,#2D6DB5 100%); } .mt-coral { background:linear-gradient(135deg,var(--coral) 0%,#F47A5A 100%); } .mt-navy { background:linear-gradient(135deg,#0D2847 0%,var(--blue) 100%); } .ministry-top-icon { font-size:2rem; margin-bottom:.5rem; } .ministry-top-title { font-family:'Libre Baskerville',serif; font-size:1.1rem; font-weight:700; color:white; line-height:1.25; } .ministry-body { padding:1.25rem; flex:1; } .ministry-body p { font-size:.82rem; color:var(--ink-60); line-height:1.7; } .ministry-link { font-size:.75rem; font-weight:700; color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; margin-top:.85rem; } .ministry-link:hover { color:var(--coral); } /* ── FORMS (shared) ──────────────────────────────────────────────────────────── */ .form-card { background:white; border:1px solid var(--border); border-radius:16px; padding:2.25rem; box-shadow:0 4px 20px rgba(27,79,138,.07); } .form-title { font-family:'Libre Baskerville',serif; font-size:1.3rem; font-weight:700; color:var(--ink); margin-bottom:.25rem; } .form-subtitle { font-size:.82rem; color:var(--ink-60); margin-bottom:1.5rem; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.75rem; } .form-field { display:flex; flex-direction:column; gap:.3rem; } .form-field.full { grid-column:1/-1; } .form-label { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); } .form-input, .form-select { padding:.72rem 1rem; border:1.5px solid var(--border); border-radius:7px; font-family:inherit; font-size:.85rem; color:var(--ink); background:var(--off); outline:none; transition:border-color .2s; width:100%; } .form-input:focus, .form-select:focus { border-color:var(--blue); background:white; } .form-input::placeholder { color:var(--ink-30); } .form-submit { width:100%; padding:.9rem; font-size:.85rem; font-weight:700; border-radius:8px; margin-top:.5rem; } .form-note { font-size:.68rem; color:var(--ink-60); text-align:center; margin-top:.75rem; line-height:1.5; } .msg-success { background:#EBF7F0; border:1px solid #34C759; color:#1a5c2e; border-radius:8px; padding:1rem 1.25rem; margin-bottom:1.25rem; font-size:.85rem; font-weight:600; } .msg-error { background:var(--coral-lt); border:1px solid var(--coral); color:var(--coral-dk); border-radius:8px; padding:1rem 1.25rem; margin-bottom:1.25rem; font-size:.85rem; font-weight:600; } .hp-field { display:none; } /* ── FOOTER ──────────────────────────────────────────────────────────────────── */ footer { background:var(--ink); padding:4.5rem 4.5rem 2rem; } .footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); } .footer-logo-text { font-family:'Libre Baskerville',serif; font-size:1.3rem; font-weight:700; color:white; margin-bottom:.5rem; } .footer-logo-text span { color:var(--coral); font-style:italic; } .footer-tagline { font-family:'Lora',serif; font-style:italic; font-size:.88rem; color:rgba(255,255,255,.4); line-height:1.65; margin-bottom:1.25rem; } .footer-address { font-size:.78rem; color:rgba(255,255,255,.38); line-height:1.7; } .footer-address strong { color:rgba(255,255,255,.6); font-weight:600; } .social-row { display:flex; gap:.6rem; margin-top:1.25rem; } .sbtn { width:34px; height:34px; border:1px solid rgba(255,255,255,.15); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.4); text-decoration:none; transition:all .2s; } .sbtn:hover { border-color:var(--coral); color:var(--coral); } .fcol-title { font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:1.1rem; } .fcol-links { list-style:none; } .fcol-links li { margin-bottom:.6rem; } .fcol-links a { text-decoration:none; font-size:.82rem; color:rgba(255,255,255,.48); transition:color .2s; } .fcol-links a:hover { color:white; } .footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:1.75rem; font-size:.72rem; color:rgba(255,255,255,.18); } /* ── ANIMATIONS ──────────────────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } } @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.3; } } .reveal { opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; } .reveal.in { opacity:1; transform:translateY(0); } /* ── RESPONSIVE ──────────────────────────────────────────────────────────────── */ @media(max-width:1200px) { .hero-content { grid-template-columns:1fr 1fr; padding:3rem 2.5rem 0; gap:2rem; } .hero-copy { padding-bottom:0; } .hero-pastors-col { display:none; } .hero-panel { justify-self:start; transform:none; max-width:420px; } } @media(max-width:1100px) { nav { padding:0 2rem; } section { padding:4rem 2.5rem; } .page-hero { padding:6rem 2.5rem 4rem; } .events-grid { grid-template-columns:repeat(2,1fr); } .pastors-grid { grid-template-columns:repeat(2,1fr); } .pastors-intro { grid-template-columns:1fr; gap:2rem; } .ministries-grid { grid-template-columns:1fr 1fr; } .footer-top { grid-template-columns:1fr 1fr; } footer { padding:3rem 2.5rem 2rem; } } @media(max-width:768px) { .nav-links, .nav-right { display:none; } .hamburger { display:block; } .hero-content { grid-template-columns:1fr; padding:2.5rem 1.5rem 0; } .hero-pastors-col { display:none; } .hero-panel { max-width:100%; justify-self:stretch; transform:none; } #watch { padding:3.5rem 1.5rem !important; overflow:hidden; } #watch > .reveal { display:grid !important; grid-template-columns:1fr !important; gap:1.75rem !important; } #watch > .reveal > div:first-child { position:relative !important; width:100% !important; padding-top:56.25% !important; height:auto !important; background:var(--ink) !important; border-radius:12px !important; overflow:hidden !important; } #watch > .reveal > div:first-child iframe { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; border:0 !important; } .form-row { grid-template-columns:1fr; } } @media(max-width:640px) { section { padding:3.5rem 1.5rem; } .events-grid, .pastors-grid, .ministries-grid { grid-template-columns:1fr; } footer { padding:2.5rem 1.5rem 1.5rem; } .footer-top { grid-template-columns:1fr; } }