/* ============================================================ STONE CHAPEL UNITED METHODIST CHURCH Shared stylesheet — "Etched in Stone" A warm, historic, highly legible design for an old congregation. Edit colors and type here once; every page updates. ============================================================ */ /* ---- Fonts (loaded from Google Fonts in each page's ) ---- Display: Fraunces — a warm, antique-feeling serif for headings Body: Libre Franklin — a clean, legible American grotesque */ :root { /* Palette — warm parchment, ink, oxblood, antique gold, stone */ --parchment: #F4ECDD; --parchment-deep: #EBE0CC; --surface: #FBF7EE; --ink: #2B251E; --ink-soft: #5C5345; --oxblood: #743029; --oxblood-deep: #57211C; --gold: #A37E37; --gold-soft: #C7A867; --stone: #9A8F7D; --stone-light: #CFC5B2; --line: rgba(43, 37, 30, 0.14); --line-strong: rgba(43, 37, 30, 0.30); --display: "Fraunces", Georgia, "Times New Roman", serif; --body: "Libre Franklin", "Segoe UI", system-ui, -apple-system, sans-serif; /* Comfortable reading measure */ --measure: 40rem; --wide: 72rem; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { font-family: var(--body); font-size: 1.125rem; /* 18px — generous for older readers */ line-height: 1.65; color: var(--ink); background-color: var(--parchment); /* Subtle paper grain */ background-image: radial-gradient(ellipse at top, rgba(255,255,255,0.45), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } /* ---- Skip link (accessibility) ---- */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--parchment); padding: 0.75rem 1.25rem; z-index: 200; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; } /* ---- Typography ---- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.12; color: var(--ink); font-optical-sizing: auto; } p { max-width: var(--measure); } a { color: var(--oxblood); text-underline-offset: 3px; } a:hover { color: var(--oxblood-deep); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; } .eyebrow { font-family: var(--body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oxblood); } /* ---- Layout helpers ---- */ .wrap { width: min(var(--wide), 92%); margin-inline: auto; } .narrow { width: min(var(--measure), 92%); margin-inline: auto; } .section { padding: clamp(3rem, 7vw, 6rem) 0; } .center { text-align: center; } /* Decorative center flourish: ✦ flanked by rules */ .flourish { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); margin: 1.25rem auto; } .flourish::before, .flourish::after { content: ""; height: 1px; width: min(8rem, 22vw); background: linear-gradient(90deg, transparent, var(--gold-soft)); } .flourish::after { transform: scaleX(-1); } .flourish svg { width: 18px; height: 18px; flex: none; } /* ============================================================ HEADER + TABULAR NAVIGATION A simple, high-contrast tab bar. No hidden menus — on small screens the tabs wrap into large, tappable rows. ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--parchment-deep); border-bottom: 1px solid var(--line); box-shadow: 0 2px 0 var(--line), 0 10px 24px -18px rgba(43,37,30,0.5); } .header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 0.75rem 0; } .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .brand .mark { width: 38px; height: 46px; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-family: var(--display); font-weight: 600; font-size: 1.18rem; color: var(--ink); letter-spacing: 0.01em; } .brand-tag { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } /* Tabs */ .tabs { display: flex; flex-wrap: wrap; gap: 0.15rem 0.4rem; list-style: none; } .tabs a { display: block; font-family: var(--body); font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none; padding: 0.55rem 0.9rem; border-radius: 7px; border-bottom: 3px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .tabs a:hover { background: rgba(116,48,41,0.08); color: var(--oxblood); } .tabs a[aria-current="page"] { color: var(--oxblood); border-bottom-color: var(--oxblood); } /* ============================================================ HERO (home) ============================================================ */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(235,224,204,0.55), transparent 45%), var(--parchment); border-bottom: 1px solid var(--line); } .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(2.5rem, 6vw, 5rem) 0; } .hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 500; letter-spacing: -0.01em; margin: 0.4rem 0 0.6rem; } .hero h1 em { font-style: italic; color: var(--oxblood); } .hero-lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 34rem; } .hero-art { display: flex; justify-content: center; } .hero-art svg { width: 100%; max-width: 460px; height: auto; } /* Pen-and-ink illustration framed as a "tipped-in plate" */ .hero-plate { margin: 0; width: 100%; max-width: 470px; background: #FFFDF8; /* clean cream mat behind the white drawing */ padding: 16px 16px 12px; border: 1px solid var(--gold-soft); border-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 36px -22px rgba(43,37,30,0.65), 0 4px 10px -6px rgba(43,37,30,0.4); transform: rotate(-0.6deg); /* a hair of tilt, like a pasted-in plate */ } .hero-plate img { display: block; width: 100%; height: auto; border: 1px solid rgba(43,37,30,0.18); /* thin keyline around the artwork */ } .hero-plate figcaption { margin-top: 10px; text-align: center; font-family: var(--display); font-style: italic; font-size: 0.95rem; letter-spacing: 0.01em; color: var(--ink-soft); } @media (max-width: 820px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-lead { margin-inline: auto; } .hero-art { order: -1; } .hero-art svg { max-width: 320px; } .hero-plate { max-width: 380px; transform: none; } /* sit straight on small screens */ } /* ============================================================ WORSHIP "WHEN & WHERE" FEATURE BAND — the most important info ============================================================ */ .worship-band { background: var(--oxblood); color: #F6ECDD; border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); } .worship-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); padding: clamp(1.5rem, 3.5vw, 2.25rem) 0; text-align: center; } .worship-item { display: flex; flex-direction: column; gap: 0.15rem; } .worship-item .label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); } .worship-item .value { font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 500; } .worship-item .value a { color: #F6ECDD; } .worship-divider { width: 1px; align-self: stretch; background: rgba(246,236,221,0.3); } @media (max-width: 700px) { .worship-divider { display: none; } } /* ============================================================ SECTION HEADINGS ============================================================ */ .section-head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); } .section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); } /* ============================================================ THREE THEMES — Worship / Ministry / Outreach cards ============================================================ */ .themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); } @media (max-width: 800px) { .themes { grid-template-columns: 1fr; } } .theme-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 10px; padding: 2rem 1.75rem; box-shadow: 0 18px 30px -28px rgba(43,37,30,0.7); } .theme-card .icon { width: 44px; height: 44px; color: var(--oxblood); margin: 0 auto 0.85rem; display: block; } .theme-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } .theme-card p { color: var(--ink-soft); font-size: 1.02rem; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--body); font-weight: 600; font-size: 1.02rem; text-decoration: none; padding: 0.8rem 1.4rem; border-radius: 8px; border: 1.5px solid var(--oxblood); transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease; } .btn-primary { background: var(--oxblood); color: #F6ECDD; } .btn-primary:hover { background: var(--oxblood-deep); color: #fff; transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--oxblood); } .btn-ghost:hover { background: rgba(116,48,41,0.08); transform: translateY(-2px); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; } .hero .btn-row { justify-content: flex-start; } @media (max-width: 820px) { .hero .btn-row { justify-content: center; } } /* ============================================================ PROSE (history + long reading) ============================================================ */ .prose { font-size: 1.14rem; } .prose h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin: 2.5rem 0 0.85rem; color: var(--oxblood); } .prose h2:first-of-type { margin-top: 1rem; } .prose p { margin-bottom: 1.15rem; } .prose p + p { margin-top: 0; } /* Drop cap on the first paragraph */ .prose > .lede::first-letter { font-family: var(--display); font-weight: 600; font-size: 3.4em; line-height: 0.8; float: left; padding: 0.08em 0.12em 0 0; color: var(--oxblood); } .prose .lede { font-size: 1.25rem; } blockquote.pullquote { font-family: var(--display); font-style: italic; font-size: 1.5rem; line-height: 1.35; color: var(--oxblood); border-left: 3px solid var(--gold); padding: 0.25rem 0 0.25rem 1.5rem; margin: 2rem 0; max-width: 38rem; } /* Figures / image slots */ figure.plate { margin: 2rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } figure.plate img { display: block; width: 100%; height: auto; } figure.plate .placeholder { display: grid; place-items: center; text-align: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, rgba(154,143,125,0.10) 0 14px, transparent 14px 28px), var(--parchment-deep); color: var(--ink-soft); padding: 1.5rem; } figure.plate .placeholder span { font-size: 0.95rem; max-width: 28rem; } figure.plate figcaption { padding: 0.85rem 1.1rem; font-size: 0.95rem; color: var(--ink-soft); border-top: 1px solid var(--line); } /* ---- Almanac timeline (the 1783 list) ---- */ .almanac { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.5rem, 3vw, 2.25rem); margin: 2rem 0; } .almanac h3 { font-size: 1.35rem; color: var(--oxblood); text-align: center; margin-bottom: 0.35rem; } .almanac .sub { text-align: center; color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.5rem; } .almanac ul { list-style: none; display: grid; gap: 0.9rem; } .almanac li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; padding-bottom: 0.9rem; border-bottom: 1px dotted var(--line-strong); } .almanac li:last-child { border-bottom: none; padding-bottom: 0; } .almanac .when { font-family: var(--display); font-weight: 600; color: var(--oxblood); white-space: nowrap; } /* ============================================================ STAFF / LEADERSHIP ============================================================ */ .leader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); } .leader { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2rem 1.25rem; } .leader.pastor { grid-column: 1 / -1; border-top: 3px solid var(--gold); } .avatar { width: 104px; height: 104px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--stone-light), var(--stone)); color: var(--surface); font-family: var(--display); font-size: 2.1rem; font-weight: 600; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line), 0 14px 26px -20px rgba(43,37,30,0.8); overflow: hidden; } .leader.pastor .avatar { width: 132px; height: 132px; font-size: 2.6rem; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .leader .role { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .leader .name { font-family: var(--display); font-size: 1.4rem; margin-top: 0.15rem; } .leader.pastor .name { font-size: 1.7rem; } /* ============================================================ PHOTO GALLERY (stub) ============================================================ */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .photo-slot { aspect-ratio: 4 / 3; border-radius: 10px; display: grid; place-items: center; text-align: center; padding: 1rem; background: repeating-linear-gradient(45deg, rgba(154,143,125,0.10) 0 14px, transparent 14px 28px), var(--parchment-deep); border: 1px dashed var(--line-strong); color: var(--ink-soft); font-size: 0.9rem; } /* ---- Clickable thumbnails ---- */ .gallery figure.plate { margin: 0; cursor: zoom-in; transition: transform 0.15s ease, box-shadow 0.15s ease; } .gallery figure.plate:hover, .gallery figure.plate:focus-within { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(43,37,30,0.8); } .gallery figure.plate img { aspect-ratio: 4 / 3; object-fit: cover; /* square-crops the thumbnail for a tidy grid */ width: 100%; height: auto; } /* The thumbnail button wrapper keeps things keyboard-accessible */ .gallery .thumb-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; text-align: left; } /* ============================================================ LIGHTBOX MODAL ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(28, 23, 18, 0.92); padding: clamp(1rem, 4vw, 3rem); opacity: 0; transition: opacity 0.2s ease; } .lightbox.open { display: flex; opacity: 1; } .lightbox-figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .lightbox-figure img { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: 4px; background: #FFFDF8; padding: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7); } .lightbox-figure figcaption { color: #E7DCC8; font-family: var(--display); font-style: italic; font-size: 1.05rem; text-align: center; max-width: 46rem; } .lightbox-counter { color: var(--gold-soft); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; } /* Controls */ .lb-btn { position: absolute; background: rgba(251, 247, 238, 0.10); border: 1px solid rgba(251, 247, 238, 0.30); color: #F6ECDD; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background-color 0.15s ease, transform 0.12s ease; } .lb-btn:hover { background: rgba(251, 247, 238, 0.22); } .lb-btn svg { width: 24px; height: 24px; } .lb-close { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); } .lb-prev { left: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); } .lb-next { right: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); } .lb-prev:hover { transform: translateY(-50%) scale(1.06); } .lb-next:hover { transform: translateY(-50%) scale(1.06); } .lb-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } /* When only one image is present, hide the cycling arrows */ .lightbox[data-single="true"] .lb-prev, .lightbox[data-single="true"] .lb-next { display: none; } @media (max-width: 600px) { .lb-prev { left: 0.4rem; } .lb-next { right: 0.4rem; } .lb-btn { width: 44px; height: 44px; } .lightbox-figure img { max-height: 70vh; } } @media (prefers-reduced-motion: reduce) { .lightbox, .gallery figure.plate, .lb-btn { transition: none; } } .note-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; padding: 1.5rem 1.75rem; margin: 2rem 0; } .note-card p { max-width: none; } /* ============================================================ CONTACT ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } } .contact-list { list-style: none; display: grid; gap: 1.5rem; } .contact-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .contact-list .ci { width: 30px; height: 30px; color: var(--oxblood); margin-top: 0.2rem; } .contact-list .k { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .contact-list .v { font-family: var(--display); font-size: 1.3rem; } .contact-list .v a { text-decoration: none; } .contact-list .v a:hover { text-decoration: underline; } .social-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; } .social-btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 600; padding: 0.7rem 1.1rem; border-radius: 8px; border: 1.5px solid var(--line-strong); color: var(--ink); transition: background-color 0.15s ease, transform 0.12s ease; } .social-btn:hover { background: rgba(116,48,41,0.07); transform: translateY(-2px); color: var(--oxblood); } .social-btn svg { width: 20px; height: 20px; } /* ============================================================ NEWS / ANNOUNCEMENTS ============================================================ */ .news { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.5rem, 3.5vw, 2.5rem); } .news-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 1.25rem; } .news-head h3 { font-size: 1.6rem; } .news .asof { font-size: 0.9rem; color: var(--ink-soft); } .news ul { list-style: none; display: grid; gap: 0.85rem; } .news li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); } .news li:last-child { border-bottom: none; padding-bottom: 0; } .news li::before { content: "✦"; color: var(--gold); } .news li p { max-width: none; margin: 0; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--ink); color: #D9CFBE; margin-top: 2rem; } .footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; } @media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; } } .site-footer h4 { font-family: var(--display); color: #F4ECDD; font-size: 1.25rem; margin-bottom: 0.6rem; } .site-footer a { color: #E7DCC8; } .site-footer p, .site-footer li { color: #C9BEAB; max-width: none; } .footer-links { list-style: none; display: grid; gap: 0.45rem; } .footer-brand { display: flex; gap: 0.85rem; align-items: flex-start; } @media (max-width: 760px) { .footer-brand { justify-content: center; } } .footer-brand .mark { width: 36px; height: 44px; flex: none; } .footer-bottom { border-top: 1px solid rgba(217,207,190,0.2); padding: 1.25rem 0; font-size: 0.85rem; color: #A99C86; text-align: center; } /* ============================================================ ENTRANCE ANIMATION — one orchestrated, gentle reveal ============================================================ */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(14px); animation: rise 0.7s cubic-bezier(0.2,0.65,0.3,1) forwards; } .reveal.d1 { animation-delay: 0.08s; } .reveal.d2 { animation-delay: 0.18s; } .reveal.d3 { animation-delay: 0.30s; } .reveal.d4 { animation-delay: 0.42s; } @keyframes rise { to { opacity: 1; transform: translateY(0); } } }