Skip to content
/* ==========================================================================
SERMONS4CHILDREN: v8.2 PHASE 2 DESIGN ENHANCEMENT & POLISH SYSTEM
- UNIFIED "SAME BRAND β DIFFERENT ROOM" ARCHITECTURE ACROSS SITE:
* 1. Homepage (Frozen 3-Card Hero, Discovery Bar, 3D Products, Magazine Blog)
* 2. Single Post & Single Sermon / Lesson Pages (920px Reading Card, Scripture Blockquotes)
* 3. WooCommerce Shop, Product Archives & Single Product Pages (Un-cropped Graphics, Free Pills, Tabs)
* 4. Category & Taxonomy Archives (Navy Hero Banners, 3-Col Cards, Centered Pill Pagination)
* 5. Search Results Page (Scan-friendly 3-Col Cards, Search Query Banner)
* 6. Static Pages (About, Support/Donate, Privacy Policy β Contained Card, Trust Metrics)
* 7. 404 Recovery Hub (Child-friendly Branded Hide-and-Seek Design)
- ZERO WRITES TO DATABASE, CONTENT, PRODUCTS, SEO, TAXONOMY, OR URLS
- 100% PURE PRESENTATION LAYER (CSS)
========================================================================== */
/* --------------------------------------------------------------------------
1. DESIGN TOKENS & SYSTEM VARIABLES
-------------------------------------------------------------------------- */
:root {
--s4c-navy-dark: #061724;
--s4c-navy: #0b253a;
--s4c-navy-light: #163e5e;
--s4c-blue-primary: #0284c7;
--s4c-blue-deep: #0369a1;
--s4c-sky: #38bdf8;
--s4c-sky-light: #e0f2fe;
--s4c-gold: #fbbf24;
--s4c-gold-dark: #f59e0b;
--s4c-orange: #f97316;
--s4c-orange-deep: #ea580c;
--s4c-pink: #ec4899;
--s4c-rose: #f43f5e;
--s4c-green: #10b981;
--s4c-green-dark: #059669;
--s4c-green-light: #ecfdf5;
--s4c-purple: #8b5cf6;
--s4c-bg: #f8fafc;
--s4c-card-bg: #ffffff;
--s4c-border: #e2e8f0;
--s4c-text-main: #0f172a;
--s4c-text-muted: #64748b;
--s4c-radius-pill: 9999px;
--s4c-radius-card: 26px;
--s4c-radius-inner: 18px;
--s4c-shadow-card: 0 10px 25px -5px rgba(11, 37, 58, 0.08), 0 8px 10px -6px rgba(11, 37, 58, 0.04);
--s4c-shadow-hover: 0 20px 38px -10px rgba(11, 37, 58, 0.16), 0 10px 18px -6px rgba(11, 37, 58, 0.08);
--s4c-shadow-glow-gold: 0 8px 24px rgba(245, 158, 11, 0.45);
--s4c-shadow-glow-blue: 0 8px 24px rgba(2, 132, 199, 0.45);
}
/* --------------------------------------------------------------------------
2. GLOBAL RESETS & THEME OVERRIDES
-------------------------------------------------------------------------- */
/* When custom .s4c-main-header is present, hide Kadence default header wrappers */
body:has(.s4c-main-header) #masthead.site-header,
body:has(.s4c-main-header) .site-top-header-wrap,
body:has(.s4c-main-header) .site-main-header-wrap,
body:has(.s4c-main-header) .site-bottom-header-wrap,
body:has(.s4c-main-header) #mobile-header,
.woocommerce-store-notice,
.s4c-fancy-header,
.woocommerce-products-header__title,
.wp-block-woocommerce-product-categories,
.kadence-shop-top-row,
.woocommerce-result-count,
.woocommerce-ordering,
.kadence-woo-toggle,
.s4c-cat-discovery-section {
display: none !important;
}
/* S4C Phase 2C-D Targeted WooCommerce Products Header Display Fix */
#primary header.woocommerce-products-header {
display: block !important;
}
.woocommerce-products-header__title {
display: none !important;
}
/* Native Kadence Header Translation (Active when custom block is not injected) */
/* ββ S4C Phase 2C-E: Kadence Header Restyling to match prototype ββ */
.site-top-header-wrap {
padding: 0 24px !important;
}
.header-html-inner {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding: 6px 0 !important;
}
.sermon-pill {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
color: #ffffff !important;
padding: 5px 16px !important;
border-radius: 9999px !important;
font-size: 11.5px !important;
font-weight: 900 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
box-shadow: 0 2px 10px rgba(249, 115, 22, 0.5) !important;
white-space: nowrap !important;
line-height: 1.4 !important;
}
.sermon-pill br {
display: none !important;
}
.pill-number {
font-weight: 900 !important;
font-size: 12.5px !important;
}
.pill-text {
font-weight: 700 !important;
opacity: 0.95 !important;
}
.search-toggle-open {
background: #ffffff !important;
border: 2px solid transparent !important;
border-radius: 9999px !important;
padding: 10px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #0f172a !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16) !important;
transition: all 0.25s ease !important;
min-height: 48px !important;
}
.search-toggle-open:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
border-color: #fbbf24 !important;
}
.search-toggle-label {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #64748b !important;
}
.search-toggle-icon svg {
width: 18px !important;
height: 18px !important;
color: #0284c7 !important;
}
.site-bottom-header-wrap {
display: none !important;
}
#masthead.site-header {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
box-shadow: 0 6px 24px rgba(2, 132, 199, 0.3) !important;
position: sticky !important;
top: 0 !important;
z-index: 99999 !important;
}
.site-top-header-wrap {
background: #061724 !important;
border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}
.site-branding img.custom-logo {
height: 95px !important;
max-height: 95px !important;
width: auto !important;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35)) !important;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.site-branding img.custom-logo:hover {
transform: scale(1.08) rotate(-2.5deg) !important;
}
.main-navigation .primary-menu-container > ul > li > a {
color: #ffffff !important;
font-weight: 800 !important;
font-size: 14px !important;
border-radius: var(--s4c-radius-pill) !important;
padding: 8px 14px !important;
transition: all 0.2s ease !important;
}
.main-navigation .primary-menu-container > ul > li > a:hover {
background: rgba(255, 255, 255, 0.22) !important;
}
.site-bottom-header-wrap {
background: #ffffff !important;
border-bottom: 2.5px solid #e2e8f0 !important;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
}
body {
background-color: #f0f7fd !important;
background-image: radial-gradient(#dbeafe 1.5px, transparent 1.5px), radial-gradient(#e0e7ff 1.5px, #f0f7fd 1.5px) !important;
background-size: 36px 36px !important;
background-position: 0 0, 18px 18px !important;
color: var(--s4c-text-main) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Fredoka", "Nunito", Helvetica, Arial, sans-serif !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--s4c-blue-primary);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--s4c-blue-deep);
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 3px solid var(--s4c-gold) !important;
outline-offset: 3px !important;
}
/* --------------------------------------------------------------------------
3. UNIVERSAL SITE-WIDE HEADER & TOPBAR
-------------------------------------------------------------------------- */
.s4c-topbar {
background: #061724;
color: #ffffff;
padding: 10px 28px;
font-size: 13.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}
.s4c-topbar-badge {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
color: #ffffff;
padding: 5px 16px;
border-radius: var(--s4c-radius-pill);
font-size: 11.5px;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 2px 10px rgba(249, 115, 22, 0.5);
display: inline-flex;
align-items: center;
gap: 6px;
}
.s4c-topbar-links {
display: flex;
align-items: center;
gap: 22px;
}
.s4c-topbar-link {
color: rgba(255, 255, 255, 0.9);
text-decoration: none !important;
font-size: 13.5px;
font-weight: 700;
transition: all 0.2s ease;
}
.s4c-topbar-link:hover {
color: var(--s4c-gold);
}
.s4c-main-header {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
padding: 18px 28px !important;
box-shadow: 0 6px 24px rgba(2, 132, 199, 0.3);
position: sticky;
top: 0;
z-index: 99999;
}
.s4c-header-container {
max-width: 1360px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.s4c-brand-logo {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none !important;
flex-shrink: 0;
}
.s4c-brand-logo img {
height: 105px !important;
max-height: 105px !important;
width: auto !important;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s4c-brand-logo:hover img {
transform: scale(1.08) rotate(-2.5deg);
}
.s4c-search-wrapper {
flex: 1 1 320px;
max-width: 460px;
min-width: 220px;
position: relative;
}
.s4c-search-input {
width: 100%;
box-sizing: border-box;
background: #ffffff;
border: 3px solid transparent;
border-radius: var(--s4c-radius-pill);
padding: 13px 58px 13px 22px;
font-size: 14.5px;
font-weight: 600;
color: #0f172a;
outline: none;
min-height: 52px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
transition: all 0.25s ease;
}
.s4c-search-input::placeholder {
color: #94a3b8;
font-weight: 500;
}
.s4c-search-input:focus {
border-color: var(--s4c-gold);
box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.4);
}
.s4c-search-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #0b253a;
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: 900;
box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45);
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s4c-search-btn:hover {
transform: translateY(-50%) scale(1.12);
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);
}
.s4c-header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.s4c-header-link {
color: #ffffff;
text-decoration: none !important;
font-size: 14px;
font-weight: 800;
padding: 9px 14px;
border-radius: var(--s4c-radius-pill);
transition: all 0.2s ease;
white-space: nowrap;
}
.s4c-header-link:hover {
background: rgba(255, 255, 255, 0.22);
}
.s4c-btn-free-bundle {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #0b253a !important;
font-weight: 950 !important;
font-size: 14px !important;
padding: 11px 22px !important;
border-radius: var(--s4c-radius-pill) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
box-shadow: var(--s4c-shadow-glow-gold) !important;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
border: 2px solid #ffffff !important;
white-space: nowrap;
letter-spacing: 0.02em;
}
.s4c-btn-free-bundle:hover {
transform: translateY(-3px) scale(1.05) !important;
background: #ffffff !important;
color: #0284c7 !important;
box-shadow: 0 12px 28px rgba(251, 191, 36, 0.6) !important;
}
/* --------------------------------------------------------------------------
4. SITE-WIDE SUBNAV CATEGORY STRIP (8 VERIFIED TAXONOMY LINKS)
-------------------------------------------------------------------------- */
.s4c-subnav-bar {
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 20px;
box-shadow: 0 4px 18px rgba(11, 37, 58, 0.06);
padding: 8px 20px;
position: relative;
z-index: 1000;
margin: 16px auto 28px auto;
max-width: 1360px;
}
.s4c-subnav-container {
max-width: 1360px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px 10px;
overflow: visible;
}
.s4c-subnav-item {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 48px;
padding: 12px 14px;
box-sizing: border-box;
font-size: 12.5px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #0b253a;
text-decoration: none !important;
white-space: nowrap;
border-bottom: 3px solid transparent;
border-radius: 8px;
transition: all 0.2s ease;
}
.s4c-subnav-item:hover,
.s4c-subnav-item.active {
color: #0284c7;
border-bottom-color: #0284c7;
background: #f0f7fd;
}
.s4c-subnav-item.highlight-bundle {
color: #ea580c;
font-weight: 950;
background: #fff7ed;
border-radius: var(--s4c-radius-pill);
min-height: 48px;
padding: 10px 18px;
box-sizing: border-box;
border: 1.5px solid #fed7aa;
}
.s4c-subnav-item.highlight-bundle:hover {
background: #ea580c;
color: #ffffff !important;
border-color: #ea580c;
}
/* --------------------------------------------------------------------------
5. HOMEPAGE: FROZEN 3-CARD HERO + DISCOVERY + SHORTCUT
-------------------------------------------------------------------------- */
.s4c-hero-section {
max-width: 1360px;
margin: 32px auto 24px auto;
padding: 0 24px;
}
.s4c-seasonal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
margin-bottom: 32px;
}
.s4c-feat-card {
position: relative;
border-radius: 26px;
padding: 34px 30px;
color: #ffffff !important;
overflow: hidden;
box-shadow: 0 14px 32px -6px rgba(11, 37, 58, 0.18), 0 8px 12px -4px rgba(11, 37, 58, 0.08);
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 260px;
text-decoration: none !important;
}
.s4c-feat-card::after {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 140px;
height: 140px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
pointer-events: none;
}
.s4c-feat-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 26px 48px -8px rgba(11, 37, 58, 0.3);
}
.s4c-feat-christmas {
background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
border: 3px solid rgba(255, 255, 255, 0.35);
}
.s4c-feat-grandparents {
background: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
border: 3px solid rgba(255, 255, 255, 0.35);
}
.s4c-feat-fall {
background: linear-gradient(135deg, #15803d 0%, #166534 100%);
border: 3px solid rgba(255, 255, 255, 0.35);
}
.s4c-feat-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(8px);
padding: 6px 16px;
border-radius: var(--s4c-radius-pill);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #ffffff !important;
width: fit-content;
margin-bottom: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.s4c-feat-title {
font-size: 24px;
font-weight: 950;
line-height: 1.22;
margin: 0 0 12px 0;
color: #ffffff !important;
letter-spacing: -0.01em;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.s4c-feat-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.95) !important;
margin-bottom: 24px;
line-height: 1.5;
}
.s4c-feat-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
color: #0b253a !important;
font-weight: 900;
font-size: 13.5px;
padding: 11px 24px;
border-radius: var(--s4c-radius-pill);
width: fit-content;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
transition: all 0.2s ease;
letter-spacing: 0.02em;
}
.s4c-feat-card:hover .s4c-feat-btn {
background: #fbbf24;
color: #0b253a !important;
transform: translateX(4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.s4c-quick-discovery-bar {
background: #ffffff;
border-radius: 20px;
padding: 16px 24px;
border: 2px solid #e2e8f0;
box-shadow: 0 4px 16px rgba(11, 37, 58, 0.04);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
}
.s4c-discovery-label {
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #0b253a;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.s4c-discovery-pills {
display: flex;
align-items: center;
gap: 10px;
overflow-x: auto;
scrollbar-width: none;
}
.s4c-discovery-pills::-webkit-scrollbar {
display: none;
}
.s4c-disc-pill {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
box-sizing: border-box;
border-radius: var(--s4c-radius-pill);
font-size: 13px;
font-weight: 850;
color: #0b253a;
background: #f1f5f9;
border: 1.5px solid #e2e8f0;
text-decoration: none !important;
white-space: nowrap;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s4c-disc-pill:hover {
background: #0284c7;
color: #ffffff !important;
border-color: #0284c7;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}
.s4c-sunday-shortcut-banner {
background: linear-gradient(135deg, #0b253a 0%, #163e5e 100%);
border-radius: 22px;
padding: 24px 34px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
box-shadow: 0 10px 30px -5px rgba(11, 37, 58, 0.2);
border: 2px solid rgba(255, 255, 255, 0.1);
margin-bottom: 36px;
}
.s4c-shortcut-content h3 {
font-size: 21px;
font-weight: 950;
color: #ffffff !important;
margin: 0 0 6px 0;
letter-spacing: -0.01em;
}
.s4c-shortcut-content p {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
margin: 0;
max-width: 680px;
line-height: 1.5;
}
.s4c-shortcut-btn {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #0b253a !important;
font-weight: 950 !important;
font-size: 14px !important;
padding: 12px 24px !important;
border-radius: var(--s4c-radius-pill) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4) !important;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.s4c-shortcut-btn:hover {
transform: translateY(-3px) scale(1.05) !important;
background: #ffffff !important;
color: #0284c7 !important;
box-shadow: 0 10px 24px rgba(255, 255, 255, 0.5) !important;
}
.s4c-trust-stat-bar {
background: #ffffff;
border-radius: 22px;
padding: 22px 32px;
box-shadow: 0 10px 25px -5px rgba(11, 37, 58, 0.06);
border: 2px solid #e0e7ff;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.s4c-stat-unit {
display: flex;
align-items: center;
gap: 14px;
}
.s4c-stat-icon-circle {
width: 52px;
height: 52px;
border-radius: 16px;
background: #e0f2fe;
color: #0284c7;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}
.s4c-stat-unit:nth-child(2) .s4c-stat-icon-circle {
background: #fef3c7;
color: #d97706;
}
.s4c-stat-unit:nth-child(3) .s4c-stat-icon-circle {
background: #ecfdf5;
color: #059669;
}
.s4c-stat-unit:nth-child(4) .s4c-stat-icon-circle {
background: #fce7f3;
color: #db2777;
}
.s4c-stat-info strong {
display: block;
font-size: 16px;
font-weight: 900;
color: #0b253a;
line-height: 1.25;
}
.s4c-stat-info span {
font-size: 12.5px;
color: #64748b;
font-weight: 600;
}
.s4c-section-header-wrap {
max-width: 1360px;
margin: 40px auto 26px auto;
padding: 0 24px;
text-align: center;
}
.s4c-badge-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e0f2fe;
color: #0369a1;
padding: 6px 18px;
border-radius: var(--s4c-radius-pill);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 12px;
}
.s4c-badge-pill.orange {
background: #ffedd5;
color: #c2410c;
}
.s4c-section-title {
font-size: 32px;
font-weight: 950;
text-transform: uppercase;
letter-spacing: 0.01em;
color: #0b253a;
margin: 0 0 10px 0;
}
.s4c-section-title span {
color: #0284c7;
}
.s4c-section-subtitle {
font-size: 15.5px;
color: #64748b;
max-width: 740px;
margin: 0 auto;
line-height: 1.5;
}
/* --------------------------------------------------------------------------
6. WOOCOMMERCE PRODUCT ARCHIVES & TANGIBLE CARDS
-------------------------------------------------------------------------- */
.products.product-archive,
.woocommerce ul.products,
.grid-cols {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px !important;
padding: 10px 0 30px 0 !important;
max-width: 1360px !important;
margin: 0 auto !important;
list-style: none !important;
}
.woocommerce ul.products li.product,
.products .entry.loop-entry,
article.entry.loop-entry {
background: #ffffff !important;
border-radius: 22px !important;
border: 2.5px solid #e2e8f0 !important;
box-shadow: 0 10px 25px -4px rgba(11, 37, 58, 0.08) !important;
overflow: hidden !important;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
position: relative !important;
}
.woocommerce ul.products li.product:hover,
.products .entry.loop-entry:hover,
article.entry.loop-entry:hover {
transform: translateY(-9px) scale(1.02) !important;
box-shadow: 0 22px 40px -8px rgba(11, 37, 58, 0.2) !important;
border-color: #0284c7 !important;
}
.woocommerce ul.products li.product .onsale,
.products .entry.loop-entry .onsale {
position: absolute !important;
top: 14px !important;
left: 14px !important;
right: auto !important;
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #ffffff !important;
font-weight: 950 !important;
font-size: 11.5px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 6px 16px !important;
border-radius: var(--s4c-radius-pill) !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45) !important;
z-index: 10 !important;
border: 1.5px solid #ffffff !important;
min-height: unset !important;
line-height: 1 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-image-link,
.woocommerce ul.products li.product .kadence-thumbnail-ratio,
.products .entry.loop-entry .post-thumbnail,
.products .entry.loop-entry .product-thumbnail-wrap {
border-radius: 19px 19px 0 0 !important;
overflow: hidden !important;
background: #ffffff !important;
position: relative;
display: flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: 1 / 1 !important;
width: 100% !important;
}
.woocommerce ul.products li.product img,
.products .entry.loop-entry img {
border-radius: 19px 19px 0 0 !important;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
display: block !important;
background: #ffffff !important;
}
.woocommerce ul.products li.product:hover img,
.products .entry.loop-entry:hover img {
transform: scale(1.05) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.products .entry.loop-entry .entry-title,
.woocommerce-LoopProduct-link-title {
font-size: 18.5px !important;
font-weight: 950 !important;
color: #0b253a !important;
padding: 18px 22px 8px 22px !important;
line-height: 1.35 !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
display: block !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.products .entry.loop-entry:hover .entry-title {
color: #0284c7 !important;
}
.woocommerce ul.products li.product .price,
.products .entry.loop-entry .price {
font-size: 14px !important;
font-weight: 950 !important;
color: #059669 !important;
background: #ecfdf5 !important;
border: 1.5px solid #a7f3d0 !important;
padding: 5px 16px !important;
border-radius: var(--s4c-radius-pill) !important;
width: fit-content !important;
margin: 0 22px 16px 22px !important;
display: inline-block !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.products .entry.loop-entry .button {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
color: #ffffff !important;
font-weight: 950 !important;
font-size: 13.5px !important;
border-radius: var(--s4c-radius-pill) !important;
padding: 13px 22px !important;
margin: auto 20px 20px 20px !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35) !important;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #0b253a !important;
transform: translateY(-3px) scale(1.03) !important;
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.5) !important;
}
/* --------------------------------------------------------------------------
7. SINGLE PRODUCT EXPERIENCE (2-COLUMN BOX & TABS)
-------------------------------------------------------------------------- */
.single-product .product.type-product {
max-width: 1200px !important;
margin: 36px auto 50px auto !important;
background: #ffffff !important;
border-radius: 28px !important;
border: 2.5px solid #e2e8f0 !important;
padding: 40px !important;
box-shadow: var(--s4c-shadow-card) !important;
display: grid !important;
grid-template-columns: 1fr 1.2fr !important;
gap: 40px !important;
}
.single-product .woocommerce-product-gallery {
width: 100% !important;
margin: 0 !important;
border-radius: 22px !important;
overflow: hidden !important;
border: 2px solid #e2e8f0 !important;
background: #ffffff !important;
}
.single-product .woocommerce-product-gallery img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
border-radius: 20px !important;
}
.single-product .summary.entry-summary {
width: 100% !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.single-product .product_title {
font-size: 32px !important;
font-weight: 950 !important;
color: #0b253a !important;
line-height: 1.25 !important;
margin: 0 0 16px 0 !important;
letter-spacing: -0.01em !important;
}
.single-product .price {
font-size: 22px !important;
font-weight: 950 !important;
color: #059669 !important;
background: #ecfdf5 !important;
border: 2px solid #a7f3d0 !important;
padding: 6px 20px !important;
border-radius: var(--s4c-radius-pill) !important;
width: fit-content !important;
margin-bottom: 20px !important;
display: inline-block !important;
}
.single-product .woocommerce-product-details__short-description {
font-size: 16px !important;
color: #475569 !important;
line-height: 1.65 !important;
margin-bottom: 24px !important;
}
.single-product .cart .single_add_to_cart_button,
.single-product .cart .button {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #0b253a !important;
font-weight: 950 !important;
font-size: 16px !important;
padding: 16px 36px !important;
border-radius: var(--s4c-radius-pill) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
box-shadow: var(--s4c-shadow-glow-gold) !important;
border: 2px solid #ffffff !important;
cursor: pointer !important;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.single-product .cart .single_add_to_cart_button:hover {
transform: translateY(-3px) scale(1.04) !important;
background: #ffffff !important;
color: #0284c7 !important;
box-shadow: 0 12px 28px rgba(251, 191, 36, 0.6) !important;
}
.single-product .product_meta {
margin-top: 24px !important;
padding-top: 18px !important;
border-top: 1.5px solid #e2e8f0 !important;
font-size: 13.5px !important;
color: #64748b !important;
}
.single-product .woocommerce-tabs {
max-width: 1200px !important;
margin: 30px auto !important;
background: #ffffff !important;
border-radius: 24px !important;
border: 2.5px solid #e2e8f0 !important;
padding: 36px !important;
box-shadow: var(--s4c-shadow-card) !important;
}
.single-product .woocommerce-tabs ul.tabs {
display: flex !important;
gap: 12px !important;
border-bottom: 2px solid #e2e8f0 !important;
padding: 0 0 12px 0 !important;
margin: 0 0 24px 0 !important;
list-style: none !important;
}
.single-product .woocommerce-tabs ul.tabs li a {
font-weight: 900 !important;
font-size: 15px !important;
color: #0b253a !important;
padding: 8px 20px !important;
border-radius: var(--s4c-radius-pill) !important;
background: #f1f5f9 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
background: #0284c7 !important;
color: #ffffff !important;
}
/* ==========================================================================
S4C PHASE 2C-F: BLOG & CATEGORY ARCHIVE ENHANCEMENTS
- Hero Banner: Deep Navy with high-contrast, crisp white title
- Card Boxes: 22px radius, flex column, consistent height & hover lift
- Image Framing: 1:1 framed container with #f8fafc canvas & uncropped graphics
- Free Pill: Vibrant emerald gradient badge with white border
- Content Wrap: Generous padding, bold readable title
- CTA Button: Pinned full-width pill button (Blue -> Orange hover)
========================================================================== */
/* 1. Category & Archive Hero Banner */
.entry-hero,
.post-archive-hero-section,
.archive .page-header,
.blog .page-header,
.search .page-header {
background: linear-gradient(135deg, #061724 0%, #0b253a 100%) !important;
padding: 48px 24px !important;
border-radius: 0 0 28px 28px !important;
text-align: center !important;
color: #ffffff !important;
margin-bottom: 36px !important;
border-bottom: 3px solid rgba(2, 132, 199, 0.35) !important;
box-shadow: 0 10px 30px rgba(6, 23, 36, 0.22) !important;
}
.entry-hero .page-title,
.entry-hero .archive-title,
.archive .page-title,
.blog .page-title,
.search .page-title {
font-size: 34px !important;
font-weight: 950 !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin: 0 !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
/* 2. Grid & Card Container */
#archive-container.grid-cols {
gap: 28px !important;
}
.archive article.entry,
.blog article.entry,
article.type-post {
background: #ffffff !important;
border-radius: 22px !important;
border: 2px solid #e2e8f0 !important;
box-shadow: 0 8px 24px -4px rgba(11, 37, 58, 0.08), 0 4px 10px -2px rgba(11, 37, 58, 0.04) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
height: 100% !important;
padding: 0 !important;
position: relative !important;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.archive article.entry:hover,
.blog article.entry:hover,
article.type-post:hover {
transform: translateY(-8px) scale(1.01) !important;
box-shadow: 0 22px 42px -8px rgba(11, 37, 58, 0.18) !important;
border-color: #0284c7 !important;
}
/* 3. Featured Image Frame (Framed Showcase Canvas) */
article.type-post .post-thumbnail {
display: flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: 1 / 1 !important;
width: 100% !important;
background: #f8fafc !important;
border-radius: 20px 20px 0 0 !important;
overflow: hidden !important;
border-bottom: 1.5px solid #f1f5f9 !important;
position: relative !important;
padding: 16px !important;
box-sizing: border-box !important;
}
article.type-post .post-thumbnail-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
article.type-post .post-thumbnail img,
article.type-post img.wp-post-image {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(11, 37, 58, 0.06) !important;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
article.type-post:hover .post-thumbnail img {
transform: scale(1.04) !important;
}
/* 4. Signature Green 'FREE!' Badge */
article.type-post::before {
content: 'FREE!' !important;
position: absolute !important;
top: 16px !important;
left: 16px !important;
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #ffffff !important;
font-weight: 950 !important;
font-size: 11.5px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 5px 14px !important;
border-radius: 9999px !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
border: 2px solid #ffffff !important;
z-index: 10 !important;
line-height: 1 !important;
}
/* 5. Card Content & Title Typography */
article.type-post .entry-content-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
flex: 1 !important;
padding: 22px 24px 24px 24px !important;
box-sizing: border-box !important;
}
article.type-post .entry-header {
margin: 0 0 18px 0 !important;
padding: 0 !important;
border: none !important;
}
article.type-post .entry-title {
font-size: 18px !important;
font-weight: 850 !important;
line-height: 1.35 !important;
color: #0b253a !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
}
article.type-post .entry-title a {
color: #0b253a !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
article.type-post:hover .entry-title a {
color: #0284c7 !important;
}
/* 6. Pinned High-Conversion Pill CTA Button */
article.type-post .entry-footer {
margin-top: auto !important;
padding: 0 !important;
border: none !important;
}
article.type-post .entry-actions,
article.type-post .more-link-wrap {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
article.type-post .post-more-link,
article.type-post a[class*='read-more'],
article.type-post .more-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
box-sizing: border-box !important;
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
color: #ffffff !important;
font-weight: 900 !important;
font-size: 12.5px !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
padding: 12px 20px !important;
border-radius: 9999px !important;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
article.type-post .post-more-link:hover,
article.type-post a[class*='read-more']:hover,
article.type-post .more-link:hover {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
}
article.type-post .post-more-link svg,
article.type-post .kadence-arrow-right-alt-svg {
fill: #ffffff !important;
width: 16px !important;
height: 16px !important;
margin-left: 4px !important;
transition: transform 0.2s ease !important;
}
article.type-post:hover .post-more-link svg {
transform: translateX(3px) !important;
}
/* --------------------------------------------------------------------------
8. BLOG ARCHIVES & CATEGORY ARCHIVES (/blog/, /category/*)
-------------------------------------------------------------------------- */
.archive .page-header,
.blog .page-header,
.search .page-header {
background: linear-gradient(135deg, #0b253a 0%, #163e5e 100%) !important;
padding: 44px 24px !important;
border-radius: 0 0 32px 32px !important;
text-align: center !important;
color: #ffffff !important;
margin-bottom: 40px !important;
box-shadow: 0 10px 30px rgba(11, 37, 58, 0.15) !important;
}
.archive .page-title,
.blog .page-title,
.search .page-title {
font-size: 36px !important;
font-weight: 950 !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
margin: 0 0 10px 0 !important;
}
.archive .archive-description,
.blog .archive-description {
font-size: 16px !important;
color: rgba(255, 255, 255, 0.9) !important;
max-width: 740px !important;
margin: 0 auto !important;
line-height: 1.6 !important;
}
.blog .site-main .content-container,
.archive:not(.woocommerce) .site-main .content-container {
max-width: 1360px !important;
margin: 0 auto 50px auto !important;
padding: 0 24px !important;
}
.blog article.entry,
.archive:not(.woocommerce) article.entry {
background: #ffffff !important;
border-radius: 22px !important;
border: 2.5px solid #e2e8f0 !important;
box-shadow: var(--s4c-shadow-card) !important;
overflow: hidden !important;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
margin-bottom: 30px !important;
}
.blog article.entry:hover,
.archive:not(.woocommerce) article.entry:hover {
transform: translateY(-8px) !important;
box-shadow: var(--s4c-shadow-hover) !important;
border-color: #0284c7 !important;
}
/* --------------------------------------------------------------------------
9. SINGLE SERMON / POST EXPERIENCE (920px READING CARD)
-------------------------------------------------------------------------- */
.single-post #primary,
.single:not(.single-product) #primary {
max-width: 920px !important;
margin: 36px auto 60px auto !important;
padding: 0 24px !important;
}
.single-post article.entry,
.single:not(.single-product) article.entry {
background: #ffffff !important;
border-radius: 28px !important;
border: 2.5px solid #e2e8f0 !important;
box-shadow: var(--s4c-shadow-card) !important;
padding: 44px 50px !important;
overflow: hidden !important;
}
.single-post .entry-header,
.single:not(.single-product) .entry-header {
margin-bottom: 28px !important;
padding-bottom: 24px !important;
border-bottom: 2px solid #e2e8f0 !important;
}
.single-post .entry-title,
.single:not(.single-product) .entry-title {
font-size: 34px !important;
font-weight: 950 !important;
color: #0b253a !important;
line-height: 1.25 !important;
margin: 12px 0 16px 0 !important;
letter-spacing: -0.01em !important;
}
.single-post .entry-meta,
.single:not(.single-product) .entry-meta {
display: flex !important;
align-items: center !important;
gap: 16px !important;
font-size: 13.5px !important;
color: #64748b !important;
font-weight: 700 !important;
}
.single-post .entry-content,
.single:not(.single-product) .entry-content {
font-size: 18px !important;
line-height: 1.75 !important;
color: #1e293b !important;
}
.single-post .entry-content h2,
.single:not(.single-product) .entry-content h2 {
font-size: 26px !important;
font-weight: 950 !important;
color: #0b253a !important;
margin: 36px 0 16px 0 !important;
letter-spacing: -0.01em !important;
}
.single-post .entry-content h3,
.single:not(.single-product) .entry-content h3 {
font-size: 21px !important;
font-weight: 900 !important;
color: #0284c7 !important;
margin: 28px 0 12px 0 !important;
}
.single-post .entry-content blockquote,
.single:not(.single-product) .entry-content blockquote {
background: #f0f7fd !important;
border-left: 5px solid #0284c7 !important;
border-radius: 0 18px 18px 0 !important;
padding: 20px 26px !important;
margin: 28px 0 !important;
font-size: 18.5px !important;
font-style: italic !important;
color: #0b253a !important;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
}
.single-post .entry-content img,
.single:not(.single-product) .entry-content img {
border-radius: 18px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
margin: 24px 0 !important;
max-width: 100% !important;
height: auto !important;
}
/* --------------------------------------------------------------------------
10. STATIC CONTENT PAGES (ABOUT, DONATE / SUPPORT, PRIVACY POLICY)
-------------------------------------------------------------------------- */
.page:not(.woocommerce-page):not(.home) #primary {
max-width: 960px !important;
margin: 36px auto 60px auto !important;
padding: 0 24px !important;
}
.page:not(.woocommerce-page):not(.home) article.page {
background: #ffffff !important;
border-radius: 28px !important;
border: 2.5px solid #e2e8f0 !important;
box-shadow: var(--s4c-shadow-card) !important;
padding: 44px 50px !important;
}
.page:not(.woocommerce-page):not(.home) .entry-title {
font-size: 34px !important;
font-weight: 950 !important;
color: #0b253a !important;
margin: 0 0 24px 0 !important;
text-align: center !important;
}
.page:not(.woocommerce-page):not(.home) .entry-content {
font-size: 17.5px !important;
line-height: 1.7 !important;
color: #334155 !important;
}
/* --------------------------------------------------------------------------
11. SEARCH RESULTS PAGE
-------------------------------------------------------------------------- */
.search-results .site-main {
max-width: 1360px !important;
margin: 30px auto 60px auto !important;
padding: 0 24px !important;
}
/* --------------------------------------------------------------------------
12. 404 ERROR PAGE (PLAYFUL HIDE-AND-SEEK BRANDS)
-------------------------------------------------------------------------- */
.error404 #primary {
max-width: 780px !important;
margin: 50px auto 70px auto !important;
text-align: center !important;
background: #ffffff !important;
border-radius: 30px !important;
border: 2.5px solid #e2e8f0 !important;
padding: 50px 36px !important;
box-shadow: var(--s4c-shadow-card) !important;
}
.error404 .page-title {
font-size: 38px !important;
font-weight: 950 !important;
color: #0b253a !important;
margin: 0 0 16px 0 !important;
}
.error404 .page-content p {
font-size: 17px !important;
color: #64748b !important;
max-width: 580px !important;
margin: 0 auto 30px auto !important;
line-height: 1.6 !important;
}
/* --------------------------------------------------------------------------
13. GLOBAL PAGINATION (CENTERED PILLS, ZERO BULLETS)
-------------------------------------------------------------------------- */
.woocommerce-pagination,
.navigation.pagination {
margin: 24px auto 40px auto !important;
text-align: center !important;
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.woocommerce-pagination ul.page-numbers,
.navigation.pagination .nav-links {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 auto !important;
border: none !important;
}
.woocommerce-pagination ul.page-numbers li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: inline-block !important;
}
.woocommerce-pagination .page-numbers,
.navigation.pagination .page-numbers {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
padding: 0 16px !important;
border-radius: var(--s4c-radius-pill) !important;
background: #ffffff !important;
border: 2px solid #e2e8f0 !important;
color: #0b253a !important;
font-weight: 850 !important;
font-size: 14px !important;
text-decoration: none !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.woocommerce-pagination .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
background: #0284c7 !important;
color: #ffffff !important;
border-color: #0284c7 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}
.woocommerce-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
color: #ffffff !important;
border-color: #0284c7 !important;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}
.woocommerce-pagination .page-numbers.dots,
.navigation.pagination .page-numbers.dots {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #94a3b8 !important;
}
.s4c-view-all-lessons-wrap {
text-align: center;
margin: 20px auto 50px auto;
max-width: 1360px;
padding: 0 24px;
}
.s4c-btn-view-all {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
color: #ffffff !important;
font-weight: 950 !important;
font-size: 16px !important;
padding: 16px 36px !important;
border-radius: var(--s4c-radius-pill) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35) !important;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
border: 2px solid #ffffff !important;
}
.s4c-btn-view-all:hover {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #0b253a !important;
transform: translateY(-3px) scale(1.04) !important;
box-shadow: 0 12px 30px rgba(245, 158, 11, 0.5) !important;
}
/* --------------------------------------------------------------------------
14. EDITORIAL MAGAZINE BLOG LAYOUT
-------------------------------------------------------------------------- */
.s4c-blog-showcase-section {
max-width: 1360px;
margin: 20px auto 40px auto;
padding: 0 24px;
}
.s4c-blog-lead-story {
background: #ffffff;
border-radius: 26px;
border: 2.5px solid #e2e8f0;
box-shadow: 0 14px 32px -6px rgba(11, 37, 58, 0.08);
overflow: hidden;
display: grid;
grid-template-columns: 1.1fr 1fr;
text-decoration: none !important;
margin-bottom: 32px;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s4c-blog-lead-story:hover {
transform: translateY(-6px);
border-color: #0284c7;
box-shadow: 0 24px 44px -8px rgba(2, 132, 199, 0.2);
}
.s4c-lead-thumb {
width: 100%;
height: 100%;
min-height: 320px;
overflow: hidden;
background: #f8fafc;
}
.s4c-lead-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.s4c-blog-lead-story:hover .s4c-lead-thumb img {
transform: scale(1.06);
}
.s4c-lead-body {
padding: 36px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.s4c-lead-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e0f2fe;
color: #0369a1;
font-size: 11.5px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 14px;
border-radius: var(--s4c-radius-pill);
margin-bottom: 14px;
width: fit-content;
}
.s4c-lead-title {
font-size: 26px;
font-weight: 950;
color: #0b253a;
line-height: 1.3;
margin: 0 0 14px 0;
transition: color 0.2s ease;
}
.s4c-blog-lead-story:hover .s4c-lead-title {
color: #0284c7;
}
.s4c-lead-excerpt {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin: 0 0 24px 0;
}
.s4c-lead-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0284c7;
color: #ffffff !important;
font-weight: 900;
font-size: 14px;
padding: 12px 24px;
border-radius: var(--s4c-radius-pill);
width: fit-content;
transition: background 0.2s ease;
}
.s4c-blog-lead-story:hover .s4c-lead-btn {
background: #0369a1;
}
.s4c-blog-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.s4c-blog-card {
background: #ffffff;
border-radius: 20px;
border: 2px solid #e2e8f0;
box-shadow: var(--s4c-shadow-card);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s4c-blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--s4c-shadow-hover);
border-color: #0284c7;
}
.s4c-blog-thumb-wrap {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid #e2e8f0;
}
.s4c-blog-thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.s4c-blog-card:hover .s4c-blog-thumb-wrap img {
transform: scale(1.08);
}
.s4c-blog-body {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.s4c-blog-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.s4c-blog-category {
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #0284c7;
background: #e0f2fe;
padding: 3px 10px;
border-radius: var(--s4c-radius-pill);
}
.s4c-blog-date {
font-size: 12px;
color: #94a3b8;
font-weight: 600;
}
.s4c-blog-title {
font-size: 16.5px;
font-weight: 900;
color: #0b253a;
line-height: 1.35;
margin: 0 0 10px 0;
transition: color 0.2s ease;
}
.s4c-blog-card:hover .s4c-blog-title {
color: #0284c7;
}
.s4c-blog-excerpt {
font-size: 13.5px;
color: #64748b;
line-height: 1.5;
margin: 0 0 16px 0;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.s4c-blog-read-btn {
display: inline-flex;
align-items: center;
gap: 6px;
color: #0284c7;
font-weight: 900;
font-size: 13px;
margin-top: auto;
transition: transform 0.2s ease;
}
.s4c-blog-card:hover .s4c-blog-read-btn {
transform: translateX(4px);
color: #0369a1;
}
/* --------------------------------------------------------------------------
15. SITE-WIDE FOOTER
-------------------------------------------------------------------------- */
.site-footer {
background: #061724 !important;
color: #94a3b8 !important;
padding: 30px 0 !important;
border-top: 3px solid #0284c7 !important;
text-align: center !important;
}
.site-footer a {
color: #e2e8f0 !important;
text-decoration: none !important;
font-weight: 600 !important;
}
.site-footer a:hover {
color: #fbbf24 !important;
}
/* --------------------------------------------------------------------------
16. RESPONSIVE BREAKPOINTS (MULTI-DEVICE VERIFIED)
-------------------------------------------------------------------------- */
@media (max-width: 1200px) {
.s4c-header-container {
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.s4c-search-wrapper {
order: 3;
flex: 1 1 100%;
max-width: 100%;
}
.s4c-header-actions {
order: 2;
}
.single-product .product.type-product {
grid-template-columns: 1fr;
padding: 30px;
}
}
@media (max-width: 1024px) {
.s4c-seasonal-grid {
grid-template-columns: repeat(2, 1fr);
}
.s4c-blog-lead-story {
grid-template-columns: 1fr;
}
.s4c-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
.s4c-trust-stat-bar {
grid-template-columns: repeat(2, 1fr);
}
.products.product-archive,
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.s4c-header-container {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.s4c-brand-logo {
justify-content: center;
}
.s4c-brand-logo img {
height: 85px !important;
}
.s4c-header-actions {
justify-content: center;
flex-wrap: wrap;
}
.s4c-search-wrapper {
max-width: 100%;
}
.s4c-subnav-container {
justify-content: flex-start;
overflow-x: auto;
}
.s4c-seasonal-grid {
grid-template-columns: 1fr;
}
.s4c-quick-discovery-bar {
flex-direction: column;
align-items: flex-start;
}
.s4c-sunday-shortcut-banner {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.s4c-shortcut-btn {
justify-content: center;
}
.s4c-blog-grid {
grid-template-columns: 1fr;
}
.s4c-trust-stat-bar {
grid-template-columns: 1fr;
padding: 18px;
}
.products.product-archive,
.woocommerce ul.products {
grid-template-columns: 1fr !important;
}
.s4c-topbar {
flex-direction: column;
gap: 8px;
text-align: center;
}
.single-post article.entry,
.page:not(.woocommerce-page):not(.home) article.page {
padding: 24px 18px !important;
border-radius: 20px !important;
}
.single-post .entry-title,
.single-product .product_title {
font-size: 24px !important;
}
}
@media (max-width: 820px) {
.s4c-seasonal-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.s4c-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.s4c-blog-grid {
grid-template-columns: 1fr;
}
.products.product-archive,
.woocommerce ul.products {
grid-template-columns: 1fr !important;
}
.s4c-section-title {
font-size: 24px;
}
}
@media (max-width: 480px) {
.s4c-feat-card {
padding: 24px 18px;
min-height: 220px;
}
.s4c-feat-title {
font-size: 20px;
}
.s4c-btn-free-bundle {
font-size: 12.5px !important;
padding: 9px 16px !important;
}
.s4c-header-link {
font-size: 13px;
padding: 7px 10px;
}
.s4c-lead-body {
padding: 24px 18px;
}
.s4c-lead-title {
font-size: 21px;
}
.single-product .woocommerce-tabs {
padding: 20px 16px !important;
}
.single-product .woocommerce-tabs ul.tabs {
flex-wrap: wrap;
gap: 8px;
}
.single-post article.entry,
.page:not(.woocommerce-page):not(.home) article.page {
padding: 20px 14px !important;
}
}
@media (max-width: 360px) {
.s4c-brand-logo img {
height: 70px !important;
}
.s4c-search-input {
font-size: 13px;
padding: 12px 52px 12px 16px;
min-height: 48px;
}
.s4c-search-btn {
width: 44px;
height: 44px;
right: 2px;
}
.s4c-feat-card {
padding: 20px 14px;
}
.s4c-feat-title {
font-size: 18px;
}
.s4c-section-title {
font-size: 21px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Dismiss
π₯οΈ Complete Classroom Media Hub
Teaching with a TV, iPad, or Projector?
Turn this lesson into an instant, full-screen classroom presentation with a 5-minute countdown clock, HD slides, game timer, and craft guide. No USB drives, no downloads, and 100% free!
π₯οΈ Launch Classroom TV Mode →
β±οΈ 5-Min Countdown: Settle kids into their seats before story time.
πΌοΈ 1080p HD Slides: Big Idea & Numbers 14:9 Memory Verse graphics.
π¨ Craft & Game Screen: Visual assembly steps & 60-sec game timer.
βΉ
βΊ
β¨ Welcome to Children’s Church • Numbers 14:9 β¨
Two Brave Spies: Joshua & Caleb
Find your seats • Class begins soon!
05:00
Countdown to Worship & Story Time
βΆ Start Timer
βΈ Pause
5 Min
3 Min
CORE BIG IDEA
Faith sees through God’s eyes! When 10 spies saw terrifying giants, Joshua and Caleb saw God’s promises and had courage to obey.
π‘ Big Idea:
Faith sees through God’s eyes! When 10 spies saw terrifying giants, Joshua and Caleb saw God’s promises and had courage to obey.
TARGET MEMORY VERSE
“Do not rebel against the LORD. And do not be afraid of the people of the land… the LORD is with us!” (Numbers 14:9)
π Scripture of the Day:
Numbers 14:9 • Recite aloud together!
πββοΈ Active Classroom Game
Grasshopper or Giant Jump
Curl small like grasshoppers on fears, but leap tall like giant faith champions shouting ‘GOD IS WITH US!’ Beat the 60-second timer!
βΆ Start Game Clock
βΈ Pause
Reset 60s
2 Min
π¨ Hands-On Craft Time
Wearable ‘Faith Glasses’ & Spy Badges
β Step-by-Step Instructions:
1. Cut out the Faith Glasses front frames and ear temples. 2. Glue temple tabs behind frames to wear them! 3. Cut out the 4 Official Spy Badges. 4. Pin or tape to your shirt to see with eyes of faith!
π« One-Room Sunday School Guide
Mixed-Age & Sensory Anchors
π§Έ Younger Kids (Ages 4β7):
Give tactile helpers physical roles. Keep attention anchored with movement and sound effects during story time.
β‘ Older Kids (Ages 8β11):
Assign leadership: have them read Numbers 14:9 from their own Bibles and partner up to help younger kids with crafts.
π View 1-Page Teacher Prompter for Full Timing →
π See You Next Sunday!
Parent Dismissal & Car Ride Home
π¬ Ask Your Child on the Drive Home:
“Where in your life do you need to stop feeling like a timid grasshopper and remember that God is with you?”
Are you searching for a powerful and engaging way to teach the story of Joshua, Caleb, and the twelve spies? It can be a challenge to explain big concepts like faith over fear to young hearts. How do you make a story about giants, grapes, and forty years in the desert relevant to a child’s life today?
You’ve come to the right place!
This complete Joshua and Caleb lesson for kids is packed with everything you need for a memorable Sunday School class, children’s church service, or at-home Bible study. We’ve included a simple object lesson, fun games, and easy crafts to bring the message to life. Let’s dive in!
The Story: Two Brave Spies vs. Ten Scared Ones
The Bible story, found in Numbers 13 and 14, is a powerful tale of perspective. God had promised His people a beautiful new home, the Promised Land. To see what it was like, Moses sent twelve spies to explore it.
When they returned, they all agreed the land was amazing! But ten of the spies were terrified. They said, “The people there are huge! They are giants, and we felt as small as grasshoppers. We can’t possibly win.”
But two spies, Joshua and Caleb , saw things differently. They didn’t focus on the giants; they focused on God. They stood up and said, “Do not be afraid… the Lord is with us.” (Numbers 14:9). They believed God would keep His promise.
Because the people chose to listen to fear instead of faith, they had to wander in the desert for forty years. But God remembered the faithfulness of Joshua and Caleb and promised they would one day enter that good land.
The Main Point: Choosing Faith When Others Choose Fear
The core lesson for our kids is simple but profound:
π¬ FREE WEEKLY LESSON DISPATCH
Prep Next Sunday in Under 5 Minutes
Join 2,800+ Sunday School teachers & directors. Get next week’s full sermon outline, object lesson script, and printable craft pack delivered to your inbox every week ahead of Sunday. 100% Free.
Giants may look big, but our God is bigger . Joshua and Caleb saw the exact same challenges as the other ten spies, but they had a different focus.
This lesson teaches children that:
Faith means trusting God , not the opinion of the crowd.
Courage comes from remembering God’s power , not focusing on our weakness.
God always keeps His promises , even if it takes a long time.
Creating free, in-depth resources like this is our passion at Sermons4Children. If you find this lesson helpful, would you consider a small donation to help us create more for families and churches everywhere? [Donate Now to Support Our Ministry]
Quick & Powerful Object Lesson: “The Heavy Backpack”
This 5-minute object lesson is perfect for grabbing kids’ attention and illustrating the difference between carrying our worries alone versus giving them to God.
Supplies:
A large, heavy backpack (filled with books)
A small, light backpack
A small Bible
How it Works:
Show the Heavy Backpack: Hold up the big, heavy backpack. Ask for a volunteer to try and carry it. Explain, “This heavy backpack is like our fears, worries, and problems. When we see ‘giants’ in our lives, our problems can feel this heavy.”
Show the Light Backpack: Now, hold up the small, light backpack. It’s easy to carry! Explain that this is what our problems feel like when we trust God with them.
The Big Reveal: Pull the small Bible out of the light backpack. Say, “This is why this bag is so light! When we put God and His promises first, He helps make our problems feel lighter.”
This simple illustration makes the abstract idea of “giving your fears to God” tangible and easy for kids to understand.
Fun & Easy Crafts to Bring the Lesson Home
Reinforce the message with these simple crafts that kids can make and take home as a reminder of what they learned.
1. Faith Glasses Craft π
Supplies: Cardboard glasses template, clear plastic wrap (or cellophane), markers.
Instructions: Have kids decorate the lenses of their “Faith Glasses” with words like “Trust,” “Believe,” “God is Bigger,” and “God is Able.” When they look through them, it’s a reminder to see their challenges through the eyes of faith, just like Joshua and Caleb did.
2. “Faith Spy” Badge β
Supplies: Cardstock circles, safety pins or tape, markers.
Instructions: Let kids design their own special agent badges that read, “Faith Spy: I See God’s Promises.” They can wear them proudly as a reminder to be on the lookout for God’s goodness and power.
Love these creative ideas? Your support helps our team develop more free crafts and lessons for kids. Donate today to help us continue our work !
Get Them Moving! 4 Awesome Joshua and Caleb Games
Channel that kid energy with these fun games that connect directly to the Bible story.
Spy Relay: Divide kids into teams. They must race to sneak into the “Promised Land” (the other side of the room), grab a piece of fruit (a toy block or ball), and return without being tagged by a “Giant” (a leader). It teaches courage and focus!
Giant or Grasshopper: The leader calls out a challenging scenario like, “You have a big test tomorrow” or “You have to move to a new school.” If the kids choose to respond with faith, they jump up tall like a GIANT. If they choose fear, they crouch down low like a GRASSHOPPER.
Promised Land Treasure Hunt: Hide paper “treasures” (like fruit cutouts) around the room. Place a few large paper “giant footprints” as obstacles. If a player steps on a footprint, they are frozen until a teammate tags them free. This shows how faith helps us move forward even when there are obstacles.
Pass the Promise: Have kids sit in a circle. Pass a soft ball around. When a child catches the ball, they share one of God’s promises (e.g., “He is always with me,” “He gives me strength”). This reinforces the source of Joshua and Caleb’s courage.
Get the Complete Sermon & Lesson Plan (Free PDF)
We’ve taken all these ideasβthe sermon, object lesson, Q&A, games, and craftsβand put them into one beautifully designed, easy-to-use PDF lesson plan. It’s perfect for printing and using this Sunday!
[Click Here to Download Your Free “Two Brave Spies” Lesson Plan!]
Every download, every lesson shared, and every child reached is made possible by generous supporters like you. Help us continue to provide these resources to churches and families around the world. Support Sermons4Children.com with your gift today.
We pray this Joshua and Caleb lesson for kids blesses you and the children you minister to. May we all learn to have the courage to see with eyes of faith, not fear, and trust that our God is bigger than any giant we may face.
π Parent Connection Bridge
The “Car Ride Home” Parent Cue
Send this question via your church text/Flocknote or hand parents a printed slip as they pick up their children:
Ask on the Drive Home:
“Where in your life do you need to stop feeling like a timid grasshopper and remember that God is with you?”
Scripture Memory: "Do not rebel against the LORD. And do not be afraid of the people of the land... the LORD is with us!" (Numbers 14:9)
Post navigation