/* * testimonies.css * Styles specific to the /testimonies page. * Depends on styles.css being loaded first for design tokens * (--ink, --cream, --cream-2, --gold, --gold-deep, --text-dark, --text-muted, --radius, .container, .btn, .eyebrow, etc.). * Load order in : styles.css, then testimonies.css. * * DESIGN CONCEPT — "Wall of Testimony" * Deliberately different from the /sermons and /trainings pattern * (featured card -> pill filters -> uniform row list / grid). * Testimonies are voices, not a media catalog, so the page reads as * an editorial quote-wall: a quiet underline tab-bar instead of pill * chips, and a true Pinterest-style masonry wall (powered by * Masonry.js, see testimonies.js) of full-text quote cards, each * sized to its own content height and packed left-to-right in * reading order, where a big serif quotation mark is the recurring * signature motif instead of icon badges. */ /* ========================================================= PAGE HERO (same pattern used on /visit, /sermons, /trainings — intentionally kept, this is the site's shared entry pattern) ========================================================= */ .page-hero { position: relative; height: 46vh; min-height: 340px; max-height: 460px; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink) var(--hero-img, none) center / cover no-repeat; } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 9, 7, 0.55) 0%, rgba(10, 9, 7, 0.35) 40%, rgba(10, 9, 7, 0.85) 100% ); } .page-hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: 44px; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; } .breadcrumb a { color: rgba(255, 255, 255, 0.6); transition: color 0.18s ease; } .breadcrumb a:hover { color: var(--gold); } .breadcrumb i { font-size: 0.6rem; opacity: 0.6; } .breadcrumb span { color: var(--gold); } .page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 600; max-width: 640px; } .page-hero p { margin-top: 14px; color: rgba(255, 255, 255, 0.82); font-size: 1rem; max-width: 520px; } /* ---- shared section heading ---- */ .section-head h2 { font-size: 2.1rem; font-weight: 600; margin: 10px 0 12px; } .section-head p { color: var(--text-muted); font-size: 0.96rem; } /* ---- testimonies list header: left-aligned copy + share button ---- */ .testimony-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; } .testimony-list-head-copy { max-width: 560px; } .testimony-list-head-copy .eyebrow { display: block; margin-bottom: 10px; } .testimony-list-head-copy h2 { font-size: 2.1rem; font-weight: 600; margin: 0 0 12px; } .testimony-list-head-copy p { color: var(--text-muted); font-size: 0.96rem; } .testimony-list-head .btn { flex: none; } /* ========================================================= WALL OF TESTIMONIES — underline tabs + masonry quote wall ========================================================= */ .testimony-list-section { padding: 100px 0; } /* ---- underline tab filters (not pill chips) ---- */ .testimony-tabs { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; border-bottom: 1px solid rgba(20, 18, 14, 0.14); margin-bottom: 48px; } .testimony-tab { appearance: none; background: none; border: none; cursor: pointer; padding: 0 0 16px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); position: relative; transition: color 0.18s ease; } .testimony-tab:hover { color: var(--text-dark); } .testimony-tab.is-active { color: var(--text-dark); } .testimony-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-deep); } /* ---- masonry wall ---- Laid out with Masonry.js (see testimonies.js) instead of CSS columns: CSS columns fill one column top-to-bottom before moving to the next, so card #2 can end up above card #1 visually. Masonry packs cards left-to-right in reading order and lets each one sink into the shortest column, sized purely by its own text content. */ .testimony-wall { position: relative; } .wall-card { display: block; width: 31.3%; margin-bottom: 22px; background: var(--cream); border: 1px solid rgba(20, 18, 14, 0.08); border-radius: var(--radius); padding: 30px 28px 26px; position: relative; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .wall-card:hover { border-color: rgba(217, 164, 65, 0.4); } .wall-mark { display: block; font-family: "Playfair Display", serif; font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--gold-deep); opacity: 0.55; margin-bottom: 2px; } .wall-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .wall-category { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-deep); } .wall-new { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #211a0c; background: var(--gold); padding: 2px 7px; border-radius: 999px; } .wall-card h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.35; margin-bottom: 10px; } .wall-text { color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; margin-bottom: 22px; } .wall-footer { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(20, 18, 14, 0.1); } .wall-person { display: flex; align-items: center; gap: 10px; min-width: 0; } .wall-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cream-2); color: var(--gold-deep); font-size: 0.8rem; } .wall-person-text { display: flex; flex-direction: column; min-width: 0; } .wall-name { font-size: 0.82rem; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wall-date { font-size: 0.72rem; color: var(--text-muted); } .testimony-list-empty { text-align: center; padding: 50px 20px; color: var(--text-muted); font-size: 0.9rem; border: 1px dashed rgba(20, 18, 14, 0.18); border-radius: var(--radius); } /* ========================================================= SHARE YOUR STORY CTA ========================================================= */ .testimony-cta { padding: 0 0 100px; } .testimony-cta-card { display: flex; align-items: center; gap: 28px; max-width: 980px; margin: 0 auto; background: var(--cream-2); border: 1px solid rgba(20, 18, 14, 0.08); border-radius: var(--radius); padding: 40px 44px; } .testimony-cta-icon { flex: none; width: 60px; height: 60px; border-radius: 50%; background: rgba(217, 164, 65, 0.14); border: 1px solid rgba(217, 164, 65, 0.3); display: flex; align-items: center; justify-content: center; color: var(--gold-deep); font-size: 1.55rem; } .testimony-cta-copy { flex: 1; min-width: 240px; } .testimony-cta-copy h2 { font-size: 1.6rem; font-weight: 600; margin: 6px 0 8px; } .testimony-cta-copy p { color: var(--text-muted); font-size: 0.92rem; max-width: 440px; } .testimony-cta-card .btn { flex: none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 980px) { .testimony-list-head { align-items: flex-start; } .wall-card { width: 47.5%; } } @media (max-width: 720px) { .page-hero { height: 40vh; min-height: 260px; max-height: 360px; } .page-hero-content { padding-bottom: 26px; } .breadcrumb { font-size: 0.66rem; gap: 6px; margin-bottom: 10px; } .page-hero h1 { font-size: clamp(1.5rem, 6.5vw, 2.1rem); max-width: 100%; } .page-hero p { margin-top: 10px; font-size: 0.85rem; max-width: 100%; } .testimony-list-section { padding: 64px 0; } .testimony-list-head-copy h2 { font-size: 1.5rem; } .testimony-list-head .btn { width: 100%; justify-content: center; } .testimony-tabs { gap: 22px; margin-bottom: 32px; } .wall-card { width: 100%; } .testimony-cta-card { flex-direction: column; align-items: flex-start; text-align: left; padding: 28px 22px; } .testimony-cta-copy h2 { font-size: 1.3rem; } .testimony-cta-card .btn { width: 100%; justify-content: center; } } @media (max-width: 400px) { .page-hero { height: 34vh; min-height: 220px; max-height: 300px; } .page-hero-content { padding-bottom: 18px; } .breadcrumb { font-size: 0.6rem; margin-bottom: 8px; } .page-hero h1 { font-size: clamp(1.3rem, 7vw, 1.6rem); } .page-hero p { font-size: 0.78rem; margin-top: 8px; } }