How this site was made

The recipe, in full

Concept: heritage-classical

Cornerstone Church is the third site in a showcase series, and it deliberately runs the opposite direction from its siblings (one luminous-pastel, one dark ember/urban). The brief was sacred-traditional meets modern craft: the feeling of a 150-year-old stone parish given a world-class design refresh. Every decision flows from that — a stone-and-forest palette, classical serif typography with small-caps detailing, illuminated-manuscript touches (drop caps, roman-numeral counters, diamond ornament rules), and arches as the recurring layout motif. Motion is slow and liturgical: nothing bounces, everything settles.

Palette

Deep forest green does the structural work, warm stone carries the reading surfaces, and aged gold is the only metal in the room. Stained-glass jewel tones appear only as light — soft blurred pools drifting across dark sections — never as fills on UI.

Typography

• Cormorant Garamond (400/500/600) — display headings. High-contrast classical serif; sizes are fluid via clamp(), up to ~5.6rem for the home hero.
• EB Garamond (400/500 + italic) — body text and all small-caps detailing. Kickers, nav links, buttons, and labels use genuine font-variant: small-caps with 0.22–0.32em letterspacing instead of a sans — that single choice does most of the "heritage" work.
• Illuminated touches — CSS ::first-letter drop caps with a gold offset shadow; counter(n, upper-roman) for beliefs and visit steps; a diamond-and-rule ornament built from pseudo-element gradients.

Imagery — art direction

Nine photographs were generated with the Higgsfield MCP (nano_banana_pro, 1k resolution), then compressed to JPG with ffmpeg (-q:v 4, all under ~360 KB). Each image was made from a carefully art-directed brief specifying the lighting, lens character, palette, composition and mood — warm volumetric light, forest-green and stone tones, no readable text, no real-world identity — and iterated until every frame carried the same quiet, reverent atmosphere as the rest of the site. The full prompt library is proprietary; it's available to clients on request.

Signature techniques

1 · Arch-mask image reveals

Every photograph sits inside an arch. Two shapes: a rounded Romanesque arch (border-radius: 999px 999px 0 0) and a pointed Gothic arch (a clip-path: polygon(...) tracing two true circle arcs with a 35-point polygon, computed with a few lines of Python so the point reads sharp with no faceting). Rounded arches carry a thin offset gold keyline (.arch-wrap::after, inset −12px); pointed arches instead get a 1px gold edge from stacked drop-shadow() filters, which hug the clip shape exactly. The reveal itself is a stone-colored veil that lifts upward while the image settles out of a slow 1.14→1.02 zoom:

tl.to(veil, { yPercent: -101, duration: 1.7, ease: "power3.inOut" }, 0);
tl.to(img,  { scale: 1.02,   duration: 2.6, ease: "power2.out"  }, 0.1);

Slow durations and once: true keep the pacing liturgical — a reveal, not an effect.

2 · Jewel-light gradient drift

Dark sections carry a .jewel-field: four absolutely-positioned radial-gradient discs (emerald, sapphire, ruby, amber) blurred 70px, at 18–24% opacity, in mix-blend-mode: screen. GSAP wanders each one on a 16–31s sine.inOut yoyo loop — the effect reads as sunlight moving through stained glass across a stone floor. Because it's blend-mode light on a near-black green, it never harms text contrast.

3 · The quiet layer

Three details carry more than their size suggests: a pure-CSS grain texture on dark bands (two offset radial-gradient dot fields); scroll-triggered fade-ups capped at 28px of travel with 1.4s durations; and gentle parallax (hero background drifts 12% on scrub). Everything respects prefers-reduced-motion — the JS bails out entirely and the CSS reveals default to visible. A no-js class guard means the site is fully readable with JavaScript off.

Multi-page structure

This is a real multi-page site, not a single scroller — three pages plus this guide:

cornerstone-church/
├── index.html          ← home: hero, welcome, times, ministries, events, CTA
├── about/index.html    ← history timeline, beliefs, ministries, leadership
├── visit/index.html    ← what to expect, times detail, directions, kids, contact form
├── guide/index.html    ← this page
└── assets/             ← one shared style.css + main.js + 9 JPGs

• Shared shell: nav and footer are identical blocks per page; the current page gets aria-current="page", which the CSS styles as gold with an underline.
• Relative paths: subpages reference ../assets/... and ../index.html; the root references assets/... directly. No absolute paths anywhere, so the folder deploys to any host or subdirectory unchanged.
• Subpage heroes reuse the home hero component at .short height (72svh) so every page opens with the same dark-stone breath before the parchment body.

Deploying to Netlify

1. The folder is already a complete static site — no build step, no config.
2. Drag-and-drop: zip cornerstone-church/ and drop it at app.netlify.com/drop. Done.
3. CLI: npx netlify-cli deploy --dir=cornerstone-church --prod from the parent folder.
4. Because every internal link points at index.html files with relative paths, clean URLs (/about/, /visit/) work automatically.

Back to the site