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
Video Game Quest Children’s Ministry Resources
The Ultimate “Desert Duel: Level Up with the Word!” Sunday School Lesson & Children’s Sermon
Video Game Quest: Defeating Temptation & Leveling Up in Faith
⏳ Teachers: Save 5+ Hours of Prep This Week!
Let’s face it: as children’s pastors, Sunday School teachers, and parents, your weeks are packed. Planning a unique, high-quality, and spiritually deep lesson from scratch is time-consuming. From researching the Scriptures, selecting a relevant modern parable, designing a craft template, buying supplies, writing a drama skit, and preparing media presentation slides, you can easily spend over 5 hours in preparation!
We created this complete curriculum packet to give you your week back. Get our print-ready 16-page lesson guide below and have your entire service ready in under 5 minutes!
📬 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.
Teacher’s Overview & Lesson Focus
🍎 Teacher’s Guide: This video-game-themed lesson teaches children that God’s Word is their ultimate ‘power-up’ against temptation. Just as gamers use shields, armor, and cheat codes to defeat tough bosses, Christian kids can use memorized scripture as their ultimate defense. Through an interactive gamer parable, a hands-on controller object lesson, and an epic 3-part video game skit, students will learn to level up their faith.
🎮 Imagine you’re playing the hardest video game level ever. The boss has a massive health bar, fireballs are raining down, and you have zero health potions left. What’s the one thing you need? A POWER-UP!
🌵 In Matthew chapter 4, Jesus faced the ultimate boss battle. He was in the dry, hot desert for 40 days and 40 nights without eating anything. He was hungry, tired, and in a tough spot. And right then, the enemy—the devil—showed up with three sneaky temptations.
📖 But Jesus didn’t give up or take a cheat code. He used the ultimate weapon: the Sword of the Spirit, which is the Word of God! Let’s see how Jesus beat every single level!
Drawing from the scripture passage of Matthew 4:1-11 (Jesus Beats the Desert Test) , this lesson provides a clear, biblically-grounded foundation of trust and understanding for children of all ages.
“I have hidden your word in my heart that I might not sin against you.” – Psalm 119:11
Modern Parable: Level 1: The Glitch & The Cheat Code
🕹️ Hazel Hensley and Ember Bellamy sat in front of the screen, eyes wide. It was the annual School Game Design Contest, and they had been working all week to build a 2D platformer called ‘Quest for Truth.’ But with only 24 hours left before the deadline, their main player character kept falling through a glitch in the floor of Level 3!
😬 Liam, a rival classmate, walked by holding a USB drive. ‘Hey, girls! Struggling with that glitch? I found a leaked cheat-code script online. You just copy-paste this line of code, and it skips all the levels straight to the victory screen. Nobody at school will ever know you didn’t code it yourself!’ Ember looked tempted. She was exhausted, and taking the shortcut meant they could stop stressing and win.
💡 But Hazel remembered what her Sunday school teacher said last week: ‘Real power doesn’t come from shortcuts and cheats; it comes from standing on God’s truth.’ She turned to Ember. ‘If we cheat, we didn’t really win the quest. God wants us to be honest, even when the level is hard.’ Ember smiled and nodded. ‘You’re right. Let’s fix the code properly.’
🏆 Together, they spent the next two hours debugging. When they finally fixed the glitch, their game ran smoother than ever! Not only did they win 2nd place, but they felt a huge rush of joy knowing they cleared the stage with 100% honesty. God’s truth was their ultimate power-up!
Interactive Sunday School Object Lesson: 🎮 The Master Controller & The Armor of God
Children learn best when they can see, hear, and feel a concept. This “Desert Duel: Level Up with the Word!” children’s sermon features a powerful, memorable object lesson using simple household items to demonstrate the core spiritual truth: Just like a controller directs your player in a game, God’s Word directs your heart and shields you from bad choices. .
🥚 Object Lesson Outline
Core Point: Just like a controller directs your player in a game, God’s Word directs your heart and shields you from bad choices.
Supplies Needed:
A video game controller (or a cardboard cut-out controller)
Index cards shaped like ‘Power-Up Star’ badges with Bible verses written on them
A backpack or school bag
Step-by-Step Guide:
Hold up the video game controller. ‘When you play a game, who is in control of the character?’ (The player holding the controller!). ‘When we face temptation at school—like wanting to lie, cheat, or be mean—temptation tries to grab the controller of our hearts and make us press the wrong buttons.’ Show the ‘Power-Up Star’ verse cards (Psalm 119:11). ‘When we memorize God’s Word and store it in our hearts, it acts like an invincible shield button! Whenever temptation attacks, we press the ‘Word Button’ in our mind, and God gives us the power to win the battle!’
Bible Story & Sermon Study: ⚡ Leveling Up: Winning the Desert Duel
🎮 Imagine you’re playing the hardest video game level ever. The boss has a massive health bar, fireballs are raining down, and you have zero health potions left. What’s the one thing you need? A POWER-UP!
🌵 In Matthew chapter 4, Jesus faced the ultimate boss battle. He was in the dry, hot desert for 40 days and 40 nights without eating anything. He was hungry, tired, and in a tough spot. And right then, the enemy—the devil—showed up with three sneaky temptations.
📖 But Jesus didn’t give up or take a cheat code. He used the ultimate weapon: the Sword of the Spirit, which is the Word of God! Let’s see how Jesus beat every single level!
📖 Scripture Reading: Matthew 4:1-11 (Jesus Beats the Desert Test)
“I have hidden your word in my heart that I might not sin against you.” (Psalm 119:11)
🔴 LEVEL 1: THE APPETITE TEST! The devil came to Jesus and said, ‘If you’re God’s Son, turn these rocks into hot, fresh bread!’ Jesus was starving, but He didn’t fall for it. He struck back with God’s Word: ‘It is written: Man shall not live on bread alone, but on every word that comes from the mouth of God!’ Boom! Level 1 CLEARED!
🟡 LEVEL 2: THE RECKLESSNESS TEST! Next, the devil took Jesus to the top of the highest temple tower. ‘Jump off!’ the devil dared Him. ‘The angels will catch you!’ But Jesus knew God’s Word shouldn’t be used for foolish show-off stunts. He replied: ‘It is also written: Do not put the Lord your God to the test!’ Level 2 CLEARED!
🟢 LEVEL 3: THE SHORTCUT TEST! Finally, the devil showed Jesus all the glittering kingdoms of the world and offered to give them to Him without the cross. ‘Just bow down and worship me!’ Satan lied. Jesus shut it down completely: ‘Away from me, Satan! For it is written: Worship the Lord your God, and serve Him ONLY!’ With a final blast of truth, the devil fled, and angels came to care for Jesus. VICTORY!
🖐️ Sensory Engagement Element: Have all kids make a ‘Level Up!’ sound effect together (e.g. ‘Bling-Bling-Bling!’). Every time you say ‘Word of God’ during the sermon, kids stand up, hold an imaginary glowing sword, and shout ‘LEVEL UP!’
Apologetics & Core Truths: Lessons For Us
Jesus showed us that when temptation comes, we don’t fight with fists—we fight with God’s Word! Our memory verse, Psalm 119:11, says: ‘I have hidden your word in my heart that I might not sin against you.’ Hiding God’s word in your heart means memorizing it so that when a ‘Desert Duel’ happens—at school, on the playground, or online—you can immediately deploy the right verse like a super-powered shield!
Today’s Big Idea Presentation Slide
Children’s Ministry Drama Skit: Level Up! The Ultimate Gamer’s Quest
Reinforce the message with a live drama skit! Our curriculum pack includes an easy-to-stage script designed for the characters: Alex (A passionate video game fan), Maya (Alex’s clever classmate), Glitch (An energetic in-game guide character wearing a neon helmet). It brings the theme of “Video Game Quest: Defeating Temptation & Leveling Up in Faith” to life through humor, relatable dialogue, and engaging storytelling.
🎭 Skit Blueprint & Script Excerpt
Characters:
Alex (A passionate video game fan)
Maya (Alex’s clever classmate)
Glitch (An energetic in-game guide character wearing a neon helmet)
[SCENE START: Alex and Maya are sitting in a gaming chairs holding controllers. Glitch stands center stage wearing futuristic goggles.]
Alex: (Mashing buttons furiously) Oh man, Maya! Level 4 is completely impossible! The Shadow Boss keeps throwing fireballs every five seconds!
Maya: (Looking at her screen) Alex, look at your health bar! You keep trying to run straight into the boss without any armor!
Glitch: (Stepping forward with robot moves) BZZZT! Warning! Player One needs a Power-Up! Welcome to the Realm of Truth, Gamers!
Alex: (Jumps up) Woah! Who invited the high-tech mascot into my living room?!
Glitch: I am Glitch, your System Guide! I appear whenever players try to win the game of life without reading the User Manual!
Maya: User Manual? You mean the Holy Bible?
Glitch: AFFIRMATIVE! In the game of life, temptations are like tricky obstacles designed to trip up your character.
Alex: But Glitch, what if I just use a cheat code? I found a website that says if I type ‘SKIP-DUTY-123’ I can win without working!
Glitch: ERROR! ERROR! Cheat codes corrupt your save file! Taking a shortcut might seem easy, but it leaves your character weak when the real boss appears!
Maya: Exactly, Alex! Remember what happened when Jesus was tempted in the wilderness?
Alex: Oh yeah! Satan told Him to turn rocks into bread, right? Because Jesus was super hungry.
Glitch: CORRECT! And did Jesus use a cheat code? NEGATIVE! Jesus opened His inventory and pulled out the ultimate item: Deuteronomy 8:3!
Maya: He said, ‘Man shall not live by bread alone, but by every word that comes from the mouth of God.’
Glitch: DING DING DING! Critical hit! 1000 points to Maya!
Alex: So Jesus used a Bible verse as a defensive shield?
Glitch: Not just a shield—a Legendary Power-Up! Psalm 119:11 says: ‘I have hidden your word in my heart that I might not sin against you.’
Maya: So when we memorize scripture, it’s like saving high-level equipment right into our player stats!
Alex: Woah… so next time I’m tempted to copy someone’s homework or lose my temper, I don’t just react?
Glitch: NEGATIVE! You activate the ‘Scripture Defense’! You speak the truth, dodge the trap, and gain XP in faith!
Maya: Let’s test it out right now! Alex, what verse do you use against the ‘Cheating Trap’?
Alex: (Standing tall) ‘Proverbs 10:9 – Whoever walks in integrity walks securely!’
Glitch: POWER-UP ACTIVATED! Shield strength +100!
Maya: And what verse do you use when you feel like giving up?
Alex: ‘Philippians 4:13 – I can do all things through Christ who gives me strength!’
Glitch: SUPER MOVE UNLOCKED! Boss defeated! YOU WIN!
Alex: (Cheering) Yes! No more cheap shortcuts for me. I’m storing God’s Word in my heart so I can Level Up every day!
Maya: High five! Now let me show you how to beat Level 4 fair and square!
Glitch: SYSTEM STATUS: OPTIMAL! Game on, champions of faith! [SCENE END]
Today’s Bible Verse Presentation Slide
Themed Sunday School Games & Craft Template
Keep the momentum going with active learning games and a themed craft that kids can take home to show their families!
🎯 Active Games
🎮 Pixel Power-Up Tag
One student is designated as ‘Temptation’ (wearing a red bib). Other students are ‘Gamers’. When tagged, a Gamer must freeze. To be unfrozen, another player must run up, tap their shoulder, and recite Psalm 119:11: ‘I have hidden your word in my heart!’ This grants an instant ‘Respawn Power-Up’ and frees the player.
⚡ Boss Battle Relay Course
Set up an obstacle course with 3 ‘Boss Stations’ representing 3 school temptations (Cheating, Lying, Disobedience). At each station, players must stop, find the correct Scripture Card from a bin, read it aloud to the judge, and perform 5 jumping jacks to ‘defeat the boss’ before continuing to the finish line!
🛡️ Inventory Chest Memory Challenge
Place 10 game-themed item props in a chest (controller, shield, golden key, Bible, pixel sword, etc.). Let students look for 15 seconds. Cover the chest. Have teams list as many items as they can remember. Connect this to how we store ‘spiritual inventory’ (verses) in our heart chest!
🎨 Themed Craft: 🛡️ My Scripture Shield
Supplies Needed:
Cardboard or sturdy paper plates
Popsicle sticks or strips of cardboard (for handles)
Markers, crayons, colored pencils
Stickers, glitter, craft foam shapes (optional for decoration)
Glue or tape
Printed copies of Psalm 119:11
Instructions:
Provide each child with a cardboard shield shape (pre-cut from a box or use a sturdy paper plate).
Have them glue or tape a popsicle stick to the back as a handle.
Instruct them to decorate the front of their shield, making it look strong and colorful.
Guide them to write or glue a copy of Psalm 119:11 onto the front of their shield.
Encourage them to add drawings of things that tempt them, and then draw ‘blocking’ or ‘deflecting’ lines from their scripture verse, showing how the Word protects them. Remind them that this shield is a visual reminder that God’s Word protects their hearts from sin!
Printable Coloring Sheet included in the free download
Download the Full, Print-Ready 16-Page Packet!
Avoid layout bugs, margin cutoff errors, or missing pages. Our complete lesson curriculum pack is formatted precisely as an exact 16-page PDF booklet , ready to be printed and distributed to your team.
🛒 SPECIAL VIDEO GAME QUEST PROMOTION: $0.00 (On Sale from $10.00)
Closing Application & Classroom Prayers
This week as you head into school, remember you are not a helpless player. You have the Holy Spirit inside you, the Armor of God, and the invincible Word of God. Memorize your verse, hit your daily prayer checkpoints, and LEVEL UP in your faith!
🙏 Closing Classroom Prayer
Lord Jesus, thank You for showing us how to win the battle against temptation. Help us store Your Word in our hearts like a superpower so we can stand strong every single day. Amen!
💖 Invitation to Salvation (Simple Prayer for Kids)
Dear God, I know I’ve made mistakes and sinned. Thank You for sending Jesus to die for me and rise again. I ask You to forgive me and be the Lord of my life. Help me follow You forever. Amen!
Subscribe to Sermons4Children on Substack
Get free Sunday School materials, craft templates, and parenting resources sent directly to your inbox weekly.
Subscribe Now
Post navigation