/* ==========================================================================
Creative Church College — styles.css
--------------------------------------------------------------------------
Foundation stylesheet. Organized in sections:
1. Design tokens (:root)
2. Modern CSS reset
3. Base typography
4. Layout primitives (.container, sections, rhythm)
5. Buttons (.btn, .btn-primary, .btn-secondary)
6. Media placeholders (.media-ph + 5 variants)
7. Site header (sticky; overlay + scrolled states; responsive nav)
8. Site footer (navy, 3-col grid -> stacked)
9. Utilities
10. Home page (hero, scripture, why, quick-links, formation,
curriculum, leadership, testimonials carousel, partners, CTA)
Fonts are loaded in HTML via Google Fonts:
words are pre-split into .word-line > .word spans in markup
(cleanest for no-JS). Each line clips; words rise from translateY(110%)→0.
The plain words are real text in the DOM, so no-JS shows the full headline.
Interior heros get a lighter fade/short-rise treatment.
-------------------------------------------------------------------------- */
.word-line {
display: inline-block;
overflow: hidden;
vertical-align: top;
/* small bottom pad so descenders/italics aren't clipped by overflow:hidden */
padding-bottom: 0.12em;
margin-bottom: -0.12em;
}
.word-line .word { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
.js .hero-title .word {
transform: translateY(110%);
transition: transform 0.85s var(--ease-rise);
transition-delay: var(--word-delay, 0s);
}
/* Plays on LOAD (above the fold): .is-in is added by JS right after paint. */
.js .hero-title.is-in .word { transform: translateY(0); }
/* Interior page heros — lighter: a simple fade + short rise on the title. */
.js .about-hero__title,
.js .apply-hero__title,
.js .request-title {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s var(--ease-rise), transform 0.7s var(--ease-rise);
}
.js .about-hero__title.is-in,
.js .apply-hero__title.is-in,
.js .request-title.is-in { opacity: 1; transform: none; }
}
/* Ken Burns zoom on hero media — applied via .kenburns so it works on the
placeholder now and on a real dropped in later. Clipped by
.hero-shell { overflow:hidden }. Scale 1.08→1 on load, then a very slow
infinite drift. The element itself is the media box (already inset:0). */
@media (prefers-reduced-motion: no-preference) {
.js .kenburns {
transform: scale(1.08);
animation:
kenburns-in 1.6s var(--ease-rise) forwards,
kenburns-drift 26s ease-in-out 1.6s infinite alternate;
transform-origin: 60% 40%;
}
@keyframes kenburns-in {
from { transform: scale(1.08); }
to { transform: scale(1); }
}
@keyframes kenburns-drift {
from { transform: scale(1) translate(0, 0); }
to { transform: scale(1.06) translate(-1.5%, -1%); }
}
}
/* --------------------------------------------------------------------------
14.2 PREMIUM CARD HOVER — quicklink + partner cards
(a) bronze overlay slides up from below (::before, translateY(101%)→0)
(b) inner media zooms ~1.04
(c) text shifts to light over the overlay
(d) cursor spotlight follows --mx/--my (fine-pointer only; JS-driven)
Touch-safe: the overlay/text-light effects live in @media (hover:hover).
-------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
.quicklink,
.partner {
isolation: isolate;
overflow: hidden;
}
/* the rising tonal overlay */
.quicklink::before,
.partner::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(
16rem 16rem at var(--mx, 50%) var(--my, 0%),
rgba(201, 169, 95, 0.35),
transparent 60%),
linear-gradient(to top, var(--navy), rgba(25, 33, 43, 0.92));
transform: translateY(101%);
transition: transform 0.5s var(--ease-rise);
pointer-events: none;
}
.quicklink:hover::before,
.quicklink:focus-within::before,
.partner:hover::before,
.partner:focus-within::before { transform: translateY(0); }
/* lift the real content above the overlay */
.quicklink > *,
.partner > * { position: relative; z-index: 1; }
/* media zoom (quicklink media already transitions transform) */
.quicklink:hover .quicklink__media,
.quicklink:focus-within .quicklink__media { transform: translateY(-4px); }
/* text → light over the overlay */
.quicklink:hover .quicklink__label,
.quicklink:focus-within .quicklink__label { color: var(--offwhite); }
.quicklink:hover .quicklink__blurb,
.quicklink:focus-within .quicklink__blurb { color: rgba(240, 232, 228, 0.8); }
.quicklink:hover .quicklink__arrow,
.quicklink:focus-within .quicklink__arrow { color: var(--gold); transform: translateX(6px); }
.partner { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.partner:hover .partner__name,
.partner:focus-within .partner__name { color: var(--offwhite); }
.partner:hover .partner__desc,
.partner:focus-within .partner__desc { color: rgba(240, 232, 228, 0.82); }
.partner__name,
.partner__desc { transition: color var(--dur) var(--ease); }
}
/* CURRICULUM COURSE CELLS — SUBTLE only (no heavy overlay; it would fight the
seamless gridlines design). Gentle bronze/cream wash + number/title shift. */
.course { transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.course:not(.course--more):hover {
background: var(--cream);
background-image: radial-gradient(120% 140% at 0% 0%, rgba(156, 122, 75, 0.10), transparent 60%);
}
.course:not(.course--more) .course__num,
.course:not(.course--more) .course__title { transition: color var(--dur) var(--ease); }
.course:not(.course--more):hover .course__num { color: var(--gold); }
.course:not(.course--more):hover .course__title { color: var(--bronze); }
/* --------------------------------------------------------------------------
14.3 CTA FLOURISH — shared .btn-primary
A gold fill sweeps in from the left (::before) and a quick diagonal shine
pass (::after) crosses on hover. Text stays above both (z-index) and legible.
The hero "Apply Today" CTA optionally gets a slow, restrained periodic shine.
-------------------------------------------------------------------------- */
.btn-primary {
position: relative;
isolation: isolate;
overflow: hidden;
}
/* gold fill sweep — sits above the bronze bg, below the label */
.btn-primary::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, var(--gold), var(--clay));
transform: translateX(-101%);
transition: transform 0.45s var(--ease-rise);
}
.btn-primary:hover::before,
.btn-primary:focus-visible::before { transform: translateX(0); }
/* diagonal shine pass */
.btn-primary::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 45%;
height: 100%;
background: linear-gradient(
100deg,
transparent,
rgba(248, 244, 236, 0.5),
transparent);
transform: translateX(-260%) skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) {
.btn-primary:hover::after,
.btn-primary:focus-visible::after {
animation: btn-shine 0.85s var(--ease) forwards;
}
@keyframes btn-shine {
to { transform: translateX(360%) skewX(-18deg); }
}
/* restrained periodic shine on the hero primary CTA only */
.hero-actions .btn-primary::after {
animation: btn-shine-loop 6.5s var(--ease) 2s infinite;
}
.hero-actions .btn-primary:hover::after,
.hero-actions .btn-primary:focus-visible::after {
animation: btn-shine 0.85s var(--ease) forwards;
}
@keyframes btn-shine-loop {
0% { transform: translateX(-260%) skewX(-18deg); }
12%, 100% { transform: translateX(360%) skewX(-18deg); }
}
}
/* --------------------------------------------------------------------------
14.4 SCROLLFLOAT — word-by-word blur-in (used SPARINGLY)
initScrollFloat() splits a target's text into .sf-word spans with --i, then
an IntersectionObserver adds .is-in. No-JS / reduced-motion: full text shows
(the hidden state is gated by both `.js` and motion-allowed; reduced-motion
reveals immediately via JS too).
-------------------------------------------------------------------------- */
.sf-word { display: inline-block; will-change: transform, filter, opacity; }
@media (prefers-reduced-motion: no-preference) {
.js .scrollfloat .sf-word {
opacity: 0;
filter: blur(6px);
transform: translateY(0.5em);
transition:
opacity 0.65s var(--ease-rise),
filter 0.65s var(--ease-rise),
transform 0.65s var(--ease-rise);
transition-delay: calc(var(--i, 0) * 42ms);
}
.js .scrollfloat.is-in .sf-word {
opacity: 1;
filter: blur(0);
transform: none;
}
}
/* --------------------------------------------------------------------------
14.5 GLARE SWEEP — skewed light pass on hover (portraits + key images)
Pure CSS ::after on a .glare wrapper element. Used only on leadership
portraits and the About hero image, not everywhere.
-------------------------------------------------------------------------- */
.glare { position: relative; overflow: hidden; isolation: isolate; }
.glare::after {
content: "";
position: absolute;
top: -50%;
left: -75%;
z-index: 3;
width: 50%;
height: 200%;
background: linear-gradient(
100deg,
transparent,
rgba(248, 244, 236, 0.55),
transparent);
transform: translateX(0) skewX(-18deg);
pointer-events: none;
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
@media (prefers-reduced-motion: no-preference) {
.glare:hover::after,
.glare:focus-within::after {
animation: glare-sweep 0.85s var(--ease) forwards;
}
@keyframes glare-sweep {
0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
12% { opacity: 1; }
100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}
}
}
/* --------------------------------------------------------------------------
14.6 GRAIN + GRADIENT-MESH DRIFT behind the scripture band
A warm radial mesh layer + a faint SVG feTurbulence grain slowly drift,
low opacity, behind the scripture refs. Whisper-quiet so text stays crisp.
The scripture content sits above both via z-index.
-------------------------------------------------------------------------- */
.scripture-band { position: relative; isolation: isolate; overflow: hidden; }
.scripture-band > * { position: relative; z-index: 2; }
/* warm gradient mesh */
.scripture-band::before {
content: "";
position: absolute;
inset: -20%;
z-index: 0;
background:
radial-gradient(40% 80% at 18% 30%, rgba(201, 169, 95, 0.16), transparent 60%),
radial-gradient(45% 90% at 82% 70%, rgba(198, 140, 120, 0.13), transparent 62%),
radial-gradient(50% 70% at 50% 120%, rgba(85, 71, 157, 0.10), transparent 60%);
pointer-events: none;
}
/* faint feTurbulence grain (inline SVG data-URI; no external request) */
.scripture-band::after {
content: "";
position: absolute;
inset: -20%;
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 160px 160px;
opacity: 0.05;
mix-blend-mode: overlay;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.scripture-band::before { animation: mesh-drift 28s ease-in-out infinite alternate; }
.scripture-band::after { animation: grain-drift 28s ease-in-out infinite alternate; }
@keyframes mesh-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(2.5%, -2%) scale(1.08); }
}
@keyframes grain-drift {
from { transform: translate(0, 0); }
to { transform: translate(-3%, 2%); }
}
}
/* ============================================================================
15. PHOTOGRAPHY (real images)
A real