trae margin:1em 40px del navegador: sin este reset cada tile
quedaba 34px más bajo y 80px más angosto que su celda del grid. */
margin: 0;
position: relative; overflow: hidden; border-radius: 20px; display: flex; align-items: flex-end;
color: #fff; text-decoration: none; box-shadow: var(--shadow-sm);
}
.mtile--feature { grid-column: span 2; grid-row: span 2; }
.mtile--wide { grid-column: span 2; }
.mtile--small { grid-column: span 1; }
/* Mosaico para fuentes VERTICALES (Miramichi). La geometría compartida de
.mosaic asume fotos horizontales, y recorta estos cuadros de 2400px de alto
a una franja: el tile ancho mostraba sólo el 18% de su imagen. Filas más
altas y ninguna celda ancha dejan las caras dentro del encuadre.
kids.html y youth.html usan fotos horizontales y no se tocan. */
.mosaic--portrait { grid-auto-rows: 300px; }
.mosaic--portrait > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.mosaic--portrait > :nth-child(2) { grid-column: 3; grid-row: 1 / span 2; }
.mosaic--portrait > :nth-child(3) { grid-column: 4; grid-row: 1; }
.mosaic--portrait > :nth-child(4) { grid-column: 4; grid-row: 2; }
/* Las caras suelen caer en el tercio superior. */
.mosaic--portrait .mtile__img { object-position: center 28%; }
.mtile__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(150deg, var(--m1, #0a4b74), var(--m2, #0fa3a3)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mtile:hover .mtile__bg, .mtile:hover .mtile__img { transform: scale(1.06); }
.mtile__scrim {
position: absolute; inset: 0; z-index: 1;
/* Nada de velo en la mitad superior: sólo el degradado que el texto necesita. */
background: linear-gradient(180deg, rgba(0,45,74,0) 0%, rgba(0,45,74,0) 46%, rgba(0,45,74,.34) 70%, rgba(0,45,74,.82) 100%);
}
.mtile__body { position: relative; z-index: 2; padding: 22px 24px; width: 100%; }
.mtile__tag {
display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mtile h3 { color: #fff; font-size: 1.15rem; line-height: 1.2; margin: 0 0 .3em; }
.mtile--feature h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.mtile p { color: rgba(255,255,255,.86); font-size: .92rem; margin: 0; max-width: 42ch; }
.mtile__arrow { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: .9rem; }
.mtile__arrow svg { width: 16px; height: 16px; transition: transform .2s ease; }
.mtile:hover .mtile__arrow { color: var(--aqua); }
.mtile:hover .mtile__arrow svg { transform: translateX(4px); }
@media (max-width: 900px) {
.mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
.mtile--feature { grid-column: span 2; grid-row: span 1; }
.mtile--wide { grid-column: span 2; }
.mtile--small { grid-column: span 1; }
}
@media (max-width: 600px) {
.mosaic { grid-template-columns: 1fr; grid-auto-rows: 170px; }
.mtile--feature, .mtile--wide, .mtile--small { grid-column: span 1; grid-row: span 1; }
}
/* These two blocks MUST come after the generic .mosaic responsive rules
above: .mosaic--portrait and .mosaic are both plain single-class
selectors (equal specificity), so whichever is later in the file wins
at each breakpoint where both match — putting the generic rules first
is what lets these actually override them, instead of silently losing
to a smaller grid-auto-rows and cropping the tall side of every tile
away (this exact bug shipped once already: Miramichi's photos showed
almost none of the actual subject on phones because of it). */
@media (max-width: 900px) {
.mosaic--portrait { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
.mosaic--portrait > :nth-child(1) { grid-column: 1 / span 2; grid-row: auto; }
.mosaic--portrait > :nth-child(2),
.mosaic--portrait > :nth-child(3),
.mosaic--portrait > :nth-child(4) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
.mosaic--portrait { grid-template-columns: 1fr; grid-auto-rows: 300px; }
.mosaic--portrait > :nth-child(1) { grid-column: 1; }
/* Single-column tiles are much wider relative to their height than the
desktop grid, so more of each portrait photo shows here — but that also
means 28% crops straight through foreheads that sat safely in-frame at
the desktop crop ratio. Shift the visible window up. */
.mosaic--portrait .mtile__img { object-position: center 12%; }
}
/* =========================================================================
RE-TRIGGERING entrance animation ([data-reanim] sections).
Replays every time the section scrolls into view. Stagger via --i.
========================================================================= */
[data-reanim] .ranim {
opacity: 0; transform: translateY(30px);
transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
transition-delay: 0ms;
}
[data-reanim].in-view .ranim {
opacity: 1; transform: none;
transition-delay: calc(var(--i, 0) * 85ms);
}
@media (prefers-reduced-motion: reduce) {
[data-reanim] .ranim { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* =========================================================================
"I'M NEW" PAGE — bold, modern components (shared / reusable)
Dark tidal band, bold gradient hero, marquee strip, stat row, section
heading, beliefs accordion. Fixed tidal-blue values are used where a
surface must stay dark in BOTH light and dark themes (the :root vars
invert --navy to a light ink color in dark mode).
========================================================================= */
/* Dark tidal band — stays dark in both themes */
.section--dark {
background: linear-gradient(160deg, #0a2540 0%, #0d2f52 52%, #0e3b5e 100%);
color: #fff;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lead { color: rgba(255,255,255,.80); }
.section--dark .eyebrow { color: var(--aqua); }
/* White cards keep their dark heading text when placed on a dark band */
.section--dark .card h3 { color: var(--navy); }
/* Brand sub-logo used as a section heading (e.g. Tidal Kids) */
.section-logo { display: block; height: 52px; width: auto; margin-bottom: 16px; }
/* Bold intro hero (gradient, oversized headline) — used on I'm New */
.hero--bold {
background: linear-gradient(150deg, #041f38 0%, #0a2540 40%, #0e4d6e 100%);
padding: clamp(120px, 16vh, 190px) 0 0;
}
.hero--bold h1 { font-size: clamp(2.7rem, 7.4vw, 5.2rem); letter-spacing: -.035em; line-height: 1.02; margin-bottom: .35em; }
.hero--bold h1 .accent { color: var(--aqua); }
.hero--bold .lead { max-width: 54ch; font-size: 1.22rem; }
.hero--bold .times { margin-top: 26px; }
/* Darker tidal overlay when the bold hero uses a background photo */
.hero--bold .hero__scrim {
background:
linear-gradient(180deg, rgba(3,15,28,.90) 0%, rgba(5,22,38,.82) 45%, rgba(2,11,22,.96) 100%),
linear-gradient(125deg, rgba(15,163,163,.16) 0%, rgba(0,45,74,0) 60%);
}
/* Parallax background photo: drifts slower than the page on scroll (JS-driven),
fades in on load; the text rises in with a small stagger. Extra height gives
headroom so the drift never reveals the edges. */
.hero--parallax .hero__photo { height: 128%; top: -14%; will-change: transform; animation: heroFadeIn 1.1s ease both; }
.hero--parallax .hero__inner > * { animation: heroRise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero--parallax .hero__inner > *:nth-child(1) { animation-delay: .05s; }
.hero--parallax .hero__inner > *:nth-child(2) { animation-delay: .14s; }
.hero--parallax .hero__inner > *:nth-child(3) { animation-delay: .23s; }
.hero--parallax .hero__inner > *:nth-child(4) { animation-delay: .32s; }
.hero--parallax .hero__inner > *:nth-child(5) { animation-delay: .41s; }
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.hero--parallax .hero__photo,
.hero--parallax .hero__inner > * { animation: none !important; }
.hero--parallax .hero__photo { transform: none !important; }
}
/* Young Adults hero slideshow: three photos cross-fade on a 21s loop, each one
slowly zooming while it is on screen. Consecutive frames alternate zoom-in /
zoom-out so the movement never repeats in the same direction, and each has its
own transform-origin so the drift lands somewhere different every time.
Slides deliberately avoid the .hero__photo class: that one is driven by the
scroll-parallax in main.js, which sets transform and would cancel the zoom. */
/* ---- Reusable hero photo slideshow (Young Adults, Youth) -------------------
Photos cross-fade on a loop, each slowly zooming while on screen. Consecutive
frames alternate zoom-in / zoom-out and each gets its own transform-origin, so
the drift never repeats in the same direction or lands in the same place.
Slides are plain ![]()
children selected by :nth-child, and they deliberately
avoid the .hero__photo class: that one is driven by the scroll-parallax in
main.js, which writes transform and would cancel the zoom.
Scale never dips below 1, so the frame edges are never exposed mid-zoom. */
.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slides img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0;
will-change: opacity, transform; backface-visibility: hidden;
}
/* The stock bold-hero scrim sits at .90 opacity, which flattens the photos into
texture and hides the zoom. Lighter here; heroes without a slideshow keep theirs.
Checked against the white h1 and the .82-alpha lead for contrast. */
.hero--slides .hero__scrim {
background:
linear-gradient(180deg, rgba(3,15,28,.72) 0%, rgba(5,22,38,.60) 45%, rgba(2,11,22,.88) 100%),
linear-gradient(125deg, rgba(15,163,163,.14) 0%, rgba(0,45,74,0) 60%);
}
/* 2 photos — 7s each, 14s loop */
.hero-slides--2 img { animation: heroKen2In 14s linear infinite both; }
.hero-slides--2 img:nth-child(1) { animation-delay: 0s; transform-origin: 50% 45%; }
.hero-slides--2 img:nth-child(2) { animation-name: heroKen2Out; animation-delay: 7s; transform-origin: 36% 56%; }
@keyframes heroKen2In {
0% { opacity: 0; transform: scale(1.04); }
6% { opacity: 1; }
44% { opacity: 1; }
54% { opacity: 0; transform: scale(1.17); }
100% { opacity: 0; transform: scale(1.04); }
}
@keyframes heroKen2Out {
0% { opacity: 0; transform: scale(1.17); }
6% { opacity: 1; }
44% { opacity: 1; }
54% { opacity: 0; transform: scale(1.04); }
100% { opacity: 0; transform: scale(1.17); }
}
/* 3 photos — 7s each, 21s loop */
.hero-slides--3 img { animation: heroKen3In 21s linear infinite both; }
.hero-slides--3 img:nth-child(1) { animation-delay: 0s; transform-origin: 50% 45%; }
.hero-slides--3 img:nth-child(2) { animation-name: heroKen3Out; animation-delay: 7s; transform-origin: 32% 58%; }
.hero-slides--3 img:nth-child(3) { animation-delay: 14s; transform-origin: 68% 42%; }
@keyframes heroKen3In {
0% { opacity: 0; transform: scale(1.04); }
6% { opacity: 1; }
28% { opacity: 1; }
34% { opacity: 0; transform: scale(1.17); }
100% { opacity: 0; transform: scale(1.04); }
}
@keyframes heroKen3Out {
0% { opacity: 0; transform: scale(1.17); }
6% { opacity: 1; }
28% { opacity: 1; }
34% { opacity: 0; transform: scale(1.04); }
100% { opacity: 0; transform: scale(1.17); }
}
/* 4 photos — 6.5s each, 26s loop */
.hero-slides--4 img { animation: heroKen4In 26s linear infinite both; }
.hero-slides--4 img:nth-child(1) { animation-delay: 0s; transform-origin: 50% 45%; }
.hero-slides--4 img:nth-child(2) { animation-name: heroKen4Out; animation-delay: 6.5s; transform-origin: 30% 56%; }
.hero-slides--4 img:nth-child(3) { animation-delay: 13s; transform-origin: 70% 44%; }
.hero-slides--4 img:nth-child(4) { animation-name: heroKen4Out; animation-delay: 19.5s; transform-origin: 45% 62%; }
@keyframes heroKen4In {
0% { opacity: 0; transform: scale(1.04); }
6% { opacity: 1; }
21% { opacity: 1; }
28% { opacity: 0; transform: scale(1.16); }
100% { opacity: 0; transform: scale(1.04); }
}
@keyframes heroKen4Out {
0% { opacity: 0; transform: scale(1.16); }
6% { opacity: 1; }
21% { opacity: 1; }
28% { opacity: 0; transform: scale(1.04); }
100% { opacity: 0; transform: scale(1.16); }
}
/* 7 photos — 6.5s each, 45.5s loop. Same cadence as --4, scaled:
fade in by 3.4%, hold to 12%, out by 16% (7.28s visible, 0.78s cross-fade). */
.hero-slides--7 img { animation: heroKen7In 45.5s linear infinite both; }
.hero-slides--7 img:nth-child(1) { animation-delay: 0s; transform-origin: 50% 45%; }
.hero-slides--7 img:nth-child(2) { animation-name: heroKen7Out; animation-delay: 6.5s; transform-origin: 30% 56%; }
.hero-slides--7 img:nth-child(3) { animation-delay: 13s; transform-origin: 70% 44%; }
.hero-slides--7 img:nth-child(4) { animation-name: heroKen7Out; animation-delay: 19.5s; transform-origin: 45% 62%; }
.hero-slides--7 img:nth-child(5) { animation-delay: 26s; transform-origin: 62% 38%; }
.hero-slides--7 img:nth-child(6) { animation-name: heroKen7Out; animation-delay: 32.5s; transform-origin: 38% 50%; }
.hero-slides--7 img:nth-child(7) { animation-delay: 39s; transform-origin: 55% 58%; }
@keyframes heroKen7In {
0% { opacity: 0; transform: scale(1.04); }
3.4% { opacity: 1; }
12% { opacity: 1; }
16% { opacity: 0; transform: scale(1.16); }
100% { opacity: 0; transform: scale(1.04); }
}
@keyframes heroKen7Out {
0% { opacity: 0; transform: scale(1.16); }
3.4% { opacity: 1; }
12% { opacity: 1; }
16% { opacity: 0; transform: scale(1.04); }
100% { opacity: 0; transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
/* Hold the first frame, perfectly still */
.hero-slides img { animation: none !important; transform: none !important; opacity: 0; }
.hero-slides img:first-child { opacity: 1; }
}
/* Section heading row: title on the left, supporting lead on the right */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 46px; }
.sec-head > div { min-width: 0; }
.sec-head h2 { margin-bottom: 0; max-width: 20ch; }
.sec-head .lead { margin: 0; max-width: 40ch; }
/* Numbered "step" accent for cards (reuses .card / .card__meta) */
.card__num { font-family: var(--font-head); font-weight: 800; font-size: 1rem; letter-spacing: .02em;
color: var(--accent); margin-bottom: .7em; }
a.card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.card:hover { text-decoration: none; }
a.card p { color: var(--muted); }
.card__arrow { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.card__arrow svg { width: 17px; height: 17px; transition: transform .2s ease; }
a.card:hover .card__arrow { color: var(--accent); }
a.card:hover .card__arrow svg { transform: translateX(4px); }
/* Marquee strip (scrolling brand phrases) */
.marquee { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; overflow: hidden; padding: 16px 0; }
.marquee__track { display: flex; width: max-content; animation: marq 30s linear infinite; }
.marquee__group { display: flex; align-items: center; }
.marquee__group span {
font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; text-transform: uppercase;
letter-spacing: .02em; padding: 0 26px; display: inline-flex; align-items: center; gap: 26px; white-space: nowrap;
}
.marquee__group span::after { content: "\2726"; font-size: .8em; color: rgba(255,255,255,.7); }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
/* Stat row (used inside .section--dark) */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.7rem);
line-height: 1; color: #fff; letter-spacing: -.02em; }
.stat__num em { font-style: normal; color: var(--aqua); }
.stat__label { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700;
color: rgba(255,255,255,.62); margin-top: 12px; }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr; gap: 34px; } }
/* Beliefs accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
cursor: pointer; list-style: none; padding: 24px 0; gap: 20px;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-head); font-weight: 700; color: var(--navy);
font-size: clamp(1.15rem, 2.4vw, 1.6rem); letter-spacing: -.01em;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 1.7rem; line-height: 1; flex: none; }
.accordion details[open] summary::after { content: "\2013"; }
.accordion p { padding: 0 0 24px; color: var(--muted); max-width: 72ch; margin: 0; }
.accordion .job-meta {
font-family: var(--font-sans); font-weight: 600; font-size: .78rem; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
/* ---------- Forms (public site — Job Applications, etc.) ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea, .field select {
font: inherit; font-size: .95rem; padding: 12px 14px; border: 1.5px solid var(--line);
border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
width: 100%; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,163,163,.15);
}
.field textarea { resize: vertical; min-height: 100px; }
.field input[type="file"] { padding: 9px 14px; cursor: pointer; }
.field select { cursor: pointer; }
.form-status { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.form-status--error { color: #c0392b; }
/* Checkbox groups (e.g. the rental form's "Food required" / "Equipment
needed") — a row of labeled checkboxes, not a single field. */
.check-group { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.check-group label {
display: flex; align-items: center; gap: 8px;
font-size: .9rem; font-weight: 500; color: var(--ink); cursor: pointer;
}
.check-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
/* Photo support for the campus selector cards (bg holds an ![]()
) */
.campus-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.campus-card__body .btn { transition: background .2s ease, transform .2s ease; }
.campus-card:hover .btn { transform: translateX(3px); }
/* Team / Board member grid */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.member { text-align: left; }
/* #team shows only the staff-cover slider now — the grid + campus filter
bar stay in the DOM (hidden, not removed) because js/staff-cover.js reads
#team .team-grid .member at load to build the slider; deleting the
markup would leave it with no photos to show. The Board section below
keeps its own plain grid — this only hides #team's. */
#team .team-grid, #teamFilter { display: none; }
/* Image frame: holds the photo (or initials) + the blue overlay */
.member__frame {
position: relative; isolation: isolate; overflow: hidden;
aspect-ratio: 4 / 5; border-radius: var(--radius); box-shadow: var(--shadow-sm);
display: grid; place-items: center;
background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 24%, var(--bg-soft)), var(--bg-soft));
}
.member__photo {
width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
/* Full colour photos (no grayscale). No colour tint — ::after disabled. */
.member__frame--photo::after { content: none; }
/* Soft neutral dark gradient at the bottom for depth (subtler on hover) */
.member__frame--photo::before {
content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.44));
opacity: .85; transition: opacity .45s ease;
}
.member:hover .member__frame--photo::after { opacity: 0; }
.member:hover .member__frame--photo::before { opacity: .32; }
.member:hover .member__photo { filter: none; transform: scale(1.05); }
.member:hover .member__frame { box-shadow: var(--shadow-md); }
.member__initials { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.3rem);
letter-spacing: .02em; color: color-mix(in srgb, var(--accent) 60%, var(--muted)); }
.member h3 { margin: 16px 0 1px; font-size: 1.12rem; }
.member__role { color: var(--accent); font-weight: 600; font-size: .9rem; letter-spacing: .01em; }
.member p { color: var(--muted); font-size: .92rem; margin: .55em 0 0; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }
/* Campus filter bar (staff) */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 34px; }
.filter-btn {
font-family: var(--font-head); font-weight: 600; font-size: .92rem; line-height: 1;
padding: 10px 20px; border-radius: 999px; cursor: pointer;
background: transparent; color: var(--navy); border: 1.5px solid var(--line);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.is-active {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff; border-color: transparent; box-shadow: var(--shadow-sm);
}
.member.is-hidden { display: none; }
/* Chips (e.g. group types) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px;
background: var(--white); border: 1px solid var(--line); color: var(--navy);
font-weight: 600; font-size: .95rem;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.chip small { color: var(--muted); font-weight: 500; }
/* Callout card (highlighted note, e.g. Group Kickoff) */
.callout {
background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--accent);
border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow-sm);
}
.callout .card__meta { margin-bottom: .5em; }
.callout p { margin: 0; color: var(--muted); }
/* A callout that should stand out from a plain informational one next to it
(e.g. "Stay Connected" paired with "Check-In") — same gradient as
.cta-band, so it reads as the more actionable one of the pair. */
.callout--highlight {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border-left-color: transparent;
}
.callout--highlight .card__meta { color: #fff; }
.callout--highlight p { color: rgba(255,255,255,.92); }
/* Inline social icon links (for light backgrounds) */
.social-inline { display: flex; gap: 12px; margin-top: 16px; }
.social-inline a {
width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--line); color: var(--navy);
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.social-inline a:hover { background: var(--accent); border-color: transparent; color: #fff; transform: translateY(-2px); }
.social-inline svg { width: 20px; height: 20px; }
/* On a colored/gradient card (e.g. .callout--highlight), solid white circles
read far better than the default outline-only style, which all but
disappeared against a busy or dark background. */
.callout--highlight .social-inline a {
width: 46px; height: 46px; background: #fff; border-color: transparent; color: var(--accent);
box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.callout--highlight .social-inline a:hover { background: var(--navy); color: #fff; }
.callout--highlight .social-inline svg { width: 22px; height: 22px; }
/* Re-triggering entrance/exit — replays every time an element scrolls into view
(used for team/board cards). Stagger via --i. Toggled by JS (.is-in). */
.scroll-anim {
opacity: 0; transform: translateY(30px) scale(.97);
transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1);
transition-delay: calc(var(--i, 0) * 45ms);
}
.scroll-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.scroll-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Scripture pull-quote (bold dark card on a light section) */
.scripture {
position: relative; max-width: 900px; margin: 48px auto; overflow: hidden;
padding: clamp(40px, 6vw, 60px) clamp(28px, 5vw, 64px); text-align: center;
background: linear-gradient(150deg, #0a2540 0%, #0d2f52 52%, #0e4d6e 100%);
color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.scripture::before {
content: "\201C"; position: absolute; top: 6px; left: 26px;
font-family: Georgia, "Times New Roman", serif; font-size: 8rem; line-height: 1;
color: rgba(127,227,216,.26); pointer-events: none;
}
.scripture blockquote {
position: relative; margin: 0; font-family: var(--font-head); font-weight: 600;
font-size: clamp(1.3rem, 2.9vw, 1.95rem); line-height: 1.42; letter-spacing: -.01em; color: #fff;
}
.scripture figcaption { margin-top: 22px; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; color: var(--aqua); }
/* Simple readable prose column */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { color: var(--muted); font-size: 1.08rem; }
.prose p + p { margin-top: 1.1em; }
/* Editorial media + text split (e.g. Our Mission) */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: stretch; }
.split--rev { direction: rtl; }
.split--rev > * { direction: ltr; }
.split__media { width: 100%; height: 100%; min-height: 440px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
/* Retrato de pastor: las fotos del equipo son cuadradas (1000x1000) y el
.split estira la columna de la imagen al alto del texto, lo que recortaba
los costados. Con proporción propia se ve el cuadro completo. */
.split__media--portrait {
aspect-ratio: 1 / 1; height: auto; min-height: 0; align-self: center;
}
.split__text { align-self: center; }
.split__text h2 { margin-top: .12em; }
.split__text p { color: var(--muted); }
.split__text p + p { margin-top: 1.05em; }
.section--dark .split__text p { color: rgba(255,255,255,.80); }
/* For a long-form .split__text body (several paragraphs): flows the prose
into two columns instead of one tall stack. break-inside:avoid keeps each
whole rather than splitting mid-paragraph across the column break. */
.split__text-cols { column-count: 2; column-gap: 28px; }
.split__text-cols p { break-inside: avoid; }
/* Gives the text column more room than the default 1.05fr/1fr split, so the
two sub-columns above aren't too narrow to read comfortably. */
.split--text-wide { grid-template-columns: .75fr 1.25fr; }
/* 3-step process list (e.g. kids.html Parent-Child Dedication) — a sequence
reads faster as short scannable steps than as one more paragraph in the
wall of text above it. */
.dedication-steps__lead { color: rgba(255,255,255,.80); margin-top: 28px; }
.dedication-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px; }
.dedication-steps__item { display: flex; gap: 14px; align-items: flex-start; }
.dedication-steps__num {
flex: none; width: 34px; height: 34px; border-radius: 50%;
background: var(--aqua); color: #06202f; font-weight: 800; font-size: .95rem;
display: grid; place-items: center;
}
.dedication-steps__item h3 { margin: 0 0 4px; font-size: 1rem; color: #fff; }
.dedication-steps__item p { margin: 0; font-size: .86rem; color: rgba(255,255,255,.75); line-height: 1.5; }
@media (max-width: 860px) {
.dedication-steps { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 860px) {
.split { grid-template-columns: 1fr; gap: 28px; align-items: start; }
.split--rev { direction: ltr; }
/* :not() here matters — same specificity as .split__media--portrait, so
without it this was winning on source order alone and force-cropping
the square pastor portraits (shediac/miramichi) top and bottom via the
16:9 ratio meant for the regular (non-square) split photos. */
.split__media:not(.split__media--portrait) { min-height: 0; aspect-ratio: 16 / 9; }
.split__text-cols { column-count: 1; }
}
/* ============================================================
Staff coverflow — 3D perspective carousel (team.html)
============================================================ */
/* Bottom strip grew from 50px to 96px to fit the "Send a Message" button
under the caption — the clamp() grows by the same ~46px so the stage
itself doesn't shrink to make room. */
.staff-cover { position: relative; width: 100%; height: clamp(426px, 46vw, 586px); margin: 8px 0 56px; perspective: 1700px; overflow: hidden; }
.staff-cover__stage { position: absolute; left: 0; right: 0; top: 0; bottom: 96px; transform-style: preserve-3d; }
.staff-cover__item {
position: absolute; top: 50%; left: 50%; width: clamp(200px, 20vw, 300px); aspect-ratio: 3 / 4;
margin: 0; padding: 0; border: 0; background: #0a2540; border-radius: 20px; overflow: hidden; cursor: grab;
box-shadow: 0 24px 60px rgba(0,0,0,.34); will-change: transform, opacity;
transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .5s ease, box-shadow .4s ease;
}
.staff-cover__item img {
width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
filter: brightness(.62) saturate(.9); /* side cards dimmed */
transition: filter .45s ease;
user-select: none; -webkit-user-drag: none; -webkit-user-select: none;
}
.staff-cover__item.is-active img { filter: none; } /* centre in full colour */
.staff-cover__item.is-active { box-shadow: 0 32px 80px rgba(10,37,64,.45); }
/* Grab cursor while dragging */
.staff-cover.dragging, .staff-cover.dragging .staff-cover__item { cursor: grabbing; }
.staff-cover.dragging .staff-cover__item img { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.staff-cover__caption { position: absolute; left: 0; right: 0; bottom: 46px; text-align: center; margin: 0; }
.staff-cover__caption strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.1; }
.staff-cover__caption span { color: var(--accent); font-weight: 600; font-size: .9rem; }
.staff-cover__contact {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
padding: 8px 20px; font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--accent);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.staff-cover__contact:hover { background: var(--accent); color: #fff; border-color: transparent; }
.staff-cover__nav {
position: absolute; top: calc(50% - 46px); z-index: 200; width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--line); background: var(--bg); color: var(--navy); cursor: pointer;
display: grid; place-items: center; box-shadow: var(--shadow-sm);
transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.staff-cover__nav:hover { background: var(--accent); color: #fff; border-color: transparent; transform: translateY(-2px); }
.staff-cover__nav svg { width: 20px; height: 20px; }
.staff-cover__nav--prev { left: clamp(6px, 3vw, 36px); }
.staff-cover__nav--next { right: clamp(6px, 3vw, 36px); }
@media (max-width: 640px) {
.staff-cover__item { width: 48vw; }
.staff-cover__nav { width: 38px; height: 38px; }
}
/* ============================================================
"I'm New" page — full-height segments + parallax media
============================================================ */
body.imnew .hero { min-height: 70vh; }
body.imnew .wave { display: none; } /* remove the wave divider between segments */
/* Centered hero content on I'm New */
body.imnew .hero__inner { margin-inline: auto; text-align: center; align-items: center; }
body.imnew .hero .times, body.imnew .hero__actions { justify-content: center; }
body.imnew .section { min-height: 70vh; display: flex; align-items: center; }
body.imnew .section > .container { width: 100%; }
/* Mission & Vision: two glassmorphism cards that stack as you scroll */
/* ── Mission & Vision ──────────────────────────────────────────────────
Antes: dos tarjetas de glassmorphism con position:sticky que se
deslizaban una sobre otra. Medido en un laptop de 1400x900 (813px
útiles), la tarjeta pinneada de Mission se pasaba 19px del viewport y
la de Vision 75px, así que el párrafo de cierre de cada una quedaba
cortado mientras estaba fija. Y las fotos horizontales (1280x720)
iban en cajas verticales de 469x694: sólo se veía el 38% del cuadro.
Ahora fluyen en orden, sobre el degradado de marca, sin backdrop-filter
y con las fotos en una proporción que respeta el original. */
body.imnew .pin-stack {
position: relative;
background:
radial-gradient(62% 55% at 14% 16%, rgba(15,163,163,.24), transparent 64%),
radial-gradient(58% 52% at 90% 84%, rgba(95,207,223,.17), transparent 64%),
linear-gradient(168deg, #04182a 0%, #0a3355 56%, #0c4a6e 100%);
}
/* Sin pinning: las dos se leen completas y en orden. */
body.imnew .pin-stack #mission,
body.imnew .pin-stack #vision { position: static; z-index: auto; background: transparent; }
body.imnew .pin-stack .section {
min-height: 0; display: block;
padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(64px, 7vw, 104px);
}
/* Separador tenue entre las dos, en lugar de que una tape a la otra. */
body.imnew .pin-stack #vision { border-top: 1px solid rgba(255,255,255,.10); }
/* .mv-card es el mismo nodo que .split: ahora sólo maquetación, sin vidrio. */
body.imnew .mv-card {
padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
grid-template-columns: 1.15fr 1fr; align-items: center;
}
body.imnew .mv-card::before { content: none; }
/* La foto en su propia proporción, no estirada a la altura del texto. */
body.imnew .mv-card .split__media-wrap {
min-height: 0; aspect-ratio: 4 / 3; height: auto;
border-radius: 22px;
box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10);
}
body.imnew .mv-card h2, body.imnew .mv-card h3 { color: #fff; }
body.imnew .mv-card .eyebrow { color: var(--aqua); }
body.imnew .mv-card .split__text { max-width: 58ch; }
body.imnew .mv-card .split__text p { color: rgba(255,255,255,.84); }
/* Cita bíblica como componente, en vez de estilos inline. */
body.imnew .mv-quote {
margin: 0 0 .35em; padding: 0; border: 0;
font-family: var(--font-head); font-weight: 600; font-style: italic;
color: var(--aqua); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.45;
}
body.imnew .mv-ref {
margin: 0 0 1.5em; text-transform: uppercase; letter-spacing: .16em;
font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.6);
}
@media (max-width: 860px) {
body.imnew .mv-card { grid-template-columns: 1fr; }
}
/* Split photo wrapper — clips the scaled image so it can parallax within */
.split__media-wrap {
width: 100%; height: 100%; min-height: 440px; overflow: hidden;
border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.split__media-wrap .split__media {
width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block;
border-radius: 0; box-shadow: none; transform: scale(1.16); will-change: transform;
}
@media (max-width: 820px) {
/* The hero's content is centered in a min-height:100vh box, and with the
wave divider removed on this page (see above), the last button ended up
flush against the next section's edge — this guarantees breathing room
below it regardless of how tall the centered content stack gets. */
body.imnew .hero { padding-bottom: 56px; }
body.imnew .section { min-height: 0; } /* stacked content flows naturally on mobile */
body.imnew .pin-stack #mission,
body.imnew .pin-stack #vision { position: static; } /* no pinning on mobile */
body.imnew .pin-stack .section { min-height: 0; }
.split__media-wrap { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
.split__media-wrap .split__media { transform: none; }
}
/* ============================================================
"Next" page — full-height segments
============================================================ */
/* Unlike body.ministry's hero (which centers vertically, same as its
sections), this one never did — short content (no buttons, before they
were added) just sat under the top padding with all the leftover 100vh
dumped below it as dead space. Centering alone left the opposite problem:
.hero's own default padding-top (110px, meant to clear the sticky header
for non-centered layouts) doesn't shrink away once centered — it just
stacks on top of the centering, pushing content low enough to leave a
lopsided gap up top. body.ministry avoids this the same way: swap that
110px for a small even padding and take the header's height off the
centering box instead (--hdr), so the box being centered is exactly the
visible viewport under the header. */
body.nextpage { --hdr: 84px; }
body.nextpage .hero {
display: flex; align-items: center;
min-height: calc(70vh - var(--hdr));
min-height: calc(70svh - var(--hdr));
padding: 48px 0;
}
body.nextpage .wave { display: none; } /* remove the wave divider */
body.nextpage .hero__inner { margin-inline: auto; text-align: center; align-items: center; }
body.nextpage .hero__actions { justify-content: center; }
/* Sections size to their content (same staff review as the ministry pages) */
body.nextpage .section { min-height: 0; display: block; }
/* ── Fotos de la página I'm New ───────────────────────────────────────
Regla del bloque: NADA se recorta. Cada imagen va con height:auto en
su proporción original. El set mezcla 16:9 horizontales con 9:16
verticales, así que cualquier caja de proporción fija (bandas, tiles)
necesariamente recortaba a unas o a otras — que fue el problema del
intento anterior, donde las bandas mostraban entre 52% y 71%. */
.photo-feature { margin: 0; }
.photo-feature img {
display: block; width: 100%; height: auto;
border-radius: 20px; box-shadow: var(--shadow-md);
}
.photo-feature figcaption {
margin-top: 14px; font-size: .92rem; color: var(--muted);
}
.section--dark .photo-feature figcaption { color: rgba(255,255,255,.72); }
/* Muro tipo masonry con columnas CSS: cada foto conserva su alto
natural, así que horizontales y verticales conviven sin recorte. */
.photo-wall { columns: 3; column-gap: 16px; }
.photo-wall figure { break-inside: avoid; margin: 0 0 16px; }
.photo-wall img {
display: block; width: 100%; height: auto;
border-radius: 14px; box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) { .photo-wall { columns: 2; } }
@media (max-width: 560px) { .photo-wall { columns: 1; } .photo-feature img { border-radius: 14px; } }
/* Collapsed state: show only the first 8 photos until "Show more" is clicked
(js/main.js removes the modifier class and the button on click). */
.photo-wall--collapsible figure:nth-child(n+9) { display: none; }
.photo-wall-group__more { display: flex; justify-content: center; margin-top: 22px; }
/* Site search button styles live in site-chrome.css now (it's part of the
shared header, injected everywhere by js/site-chrome.js — including
watch/index.html, which doesn't load this file at all). */
.ss[hidden] { display: none; }
.ss { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: center; }
.ss__backdrop {
position: absolute; inset: 0; background: rgba(2,12,20,.72);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ss__panel {
position: relative; z-index: 1; width: min(680px, 94vw);
margin-top: min(12vh, 110px); align-self: flex-start;
background: #fff; border-radius: 18px; overflow: hidden;
box-shadow: 0 40px 90px rgba(0,0,0,.45);
display: flex; flex-direction: column; max-height: 74vh;
}
.ss__bar {
display: flex; align-items: center; gap: 12px;
padding: 16px 18px; border-bottom: 1px solid #e8eef2;
}
.ss__icon { width: 20px; height: 20px; flex: none; color: #5a6b78; }
.ss__input {
flex: 1; min-width: 0; border: 0; outline: 0; background: none;
font: inherit; font-size: 1.05rem; color: #0a2540;
}
.ss__input::placeholder { color: #9bacb8; }
.ss__close {
border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1;
color: #8a9aa6; padding: 0 4px;
}
.ss__close:hover { color: #0a2540; }
.ss__status { margin: 0; padding: 18px; color: #5a6b78; font-size: .94rem; }
.ss__results { overflow-y: auto; }
.ss__hit {
display: block; padding: 14px 18px; border-bottom: 1px solid #f1f5f7;
text-decoration: none; color: inherit;
}
.ss__hit:last-child { border-bottom: 0; }
.ss__hit:hover, .ss__hit.is-active { background: #f2f8fa; text-decoration: none; }
.ss__hit-page {
display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: #0fa3a3;
}
.ss__hit-title { display: block; font-weight: 650; color: #0a2540; margin-top: 3px; }
.ss__hit-text { display: block; font-size: .88rem; color: #5a6b78; margin-top: 4px; line-height: 1.45; }
.ss__hit mark { background: #d8f1f1; color: inherit; padding: 0 1px; border-radius: 2px; }
.ss__group {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin: 0; padding: 10px 18px; background: #f7fbfc;
border-top: 1px solid #eef3f6; border-bottom: 1px solid #eef3f6;
font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5a6b78;
}
.ss__results > .ss__group:first-child { border-top: 0; }
.ss__group-all { font-size: .7rem; font-weight: 700; color: #0fa3a3; text-decoration: none; letter-spacing: .06em; }
.ss__group-all:hover { text-decoration: underline; }
.ss__hint {
margin: 0; padding: 10px 18px; border-top: 1px solid #eef3f6;
font-size: .76rem; color: #8a9aa6;
}
.ss__hint kbd {
font: inherit; background: #f1f5f7; border: 1px solid #e0e8ed;
border-radius: 4px; padding: 1px 5px; margin: 0 1px;
}
/* Empty state — before anything's typed (or after clearing), the results
list is just blank. Only shows when there's no status message either
(a "No results for…" already covers the no-matches case). */
.ss__status[hidden] + .ss__results:empty::before {
content: "Start typing to search pages, sermons, and more.";
display: block; padding: 15vh 28px 24px; text-align: center;
color: #9bacb8; font-size: .95rem;
}
html.ss-open { overflow: hidden; }
@media (max-width: 860px) {
.ss__panel { margin-top: 0; width: 100vw; max-height: 100vh; border-radius: 0; height: 100%; }
/* Keyboard hints (Esc/↑↓/Enter) don't apply on touch — drop the row. */
.ss__hint { display: none; }
/* The "×" alone read as easy to miss full-screen — bigger target, visible
as a button rather than a stray character. */
.ss__close {
width: 40px; height: 40px; margin: -6px -6px -6px 0; border-radius: 50%;
background: #f1f5f7; font-size: 22px;
}
.ss__close:hover { background: #e5edf1; }
}
@media (prefers-color-scheme: dark) {
.ss__panel { background: #12283a; }
.ss__bar { border-bottom-color: #203645; }
.ss__input { color: #eaf3f9; }
.ss__hit { border-bottom-color: #1b3547; }
.ss__hit:hover, .ss__hit.is-active { background: #1b3547; }
.ss__hit-title { color: #eaf3f9; }
.ss__hit-text, .ss__status, .ss__hint { color: #9fb2c0; }
.ss__hit mark { background: #17575c; color: #eaf3f9; }
.ss__hint { border-top-color: #203645; }
.ss__group { background: #0f2231; border-color: #203645; color: #9fb2c0; }
.ss__hint kbd { background: #1b3547; border-color: #203645; }
.ss__status[hidden] + .ss__results:empty::before { color: #6f8494; }
}
@media (max-width: 860px) and (prefers-color-scheme: dark) {
.ss__close { background: #1b3547; }
.ss__close:hover { background: #23415a; }
}