/* nsm-tokens.css - single source of truth for brand tokens + accessibility/consistency layer. Loaded globally, last. */ :root{ --nsm-cream:#f3ecd9;--nsm-cream-light:#faf6ec;--nsm-white:#ffffff; --nsm-navy:#24383f;--nsm-navy-deep:#19272c;--nsm-muted:#5a6e75; --nsm-terra:#db673e; /* brand orange: decorative, borders, on-dark only */ --nsm-fill:#b3502c; /* button / filled surface (white text 5.1:1) */ --nsm-fill-hover:#a84421; /* single hover shade */ --nsm-accent-text:#a84421; /* small orange text on light (5.0:1 on cream) */ --nsm-accent-on-dark:#e87a52; /* orange text on navy (5.4:1) */ --nsm-placeholder:#66767d; --nsm-line:rgba(36,56,63,.14); --nsm-radius-btn:12px;--nsm-radius-card:16px;--nsm-tap:48px; } ::placeholder{color:var(--nsm-placeholder)!important;opacity:1} :focus-visible{outline:3px solid var(--nsm-navy);outline-offset:2px} .elementor-button,a.nsm-btn,.wwa-btn,.wpforms-form button[type=submit],.nsm-eform .elementor-button{border-radius:var(--nsm-radius-btn)!important;min-height:var(--nsm-tap);} /* --- shared header/footer + strips (Elementor-set colours) --- */ .elementor-element-5ad19f7 .elementor-heading-title,.elementor-location-header .elementor-site-title-orange{color:var(--nsm-accent-text)!important} .elementor-nav-menu--dropdown .elementor-item-active,.elementor-nav-menu .elementor-sub-item.elementor-item-active{background-color:var(--nsm-fill)!important;color:#fff!important} /* --- orange text on dark surfaces uses the on-dark shade --- */ .nsm-programs .metric-num{color:var(--nsm-accent-on-dark)!important} /* --- one button shape + 48px targets for custom buttons --- */ .btn.nd-give,.nd-give{border-radius:var(--nsm-radius-btn)!important;min-height:var(--nsm-tap)} .amount-btn{border-radius:var(--nsm-radius-btn)!important;min-height:var(--nsm-tap)} /* --- text on filled orange is white (5.1:1), muted grey-blue darkened for small text --- */ .nsm-sp-chip--terra,.nsm-sp-give,.nsm-sp-give .give-btn-modal,.nsm-sp-give button[type=submit]{color:#fff!important} .hero-subtitle,.section-sub{color:#4d626a!important} /* --- filter chips reach 44px tap height --- */ .e-filter-item,.nsm-spchip{min-height:44px;display:inline-flex;align-items:center} /* --- footer social icons: 48px targets on dark --- */ .nsm-footer-social .elementor-social-icons-wrapper{display:flex;gap:12px;flex-wrap:wrap} .nsm-footer-social .elementor-social-icon{width:48px;height:48px;background:rgba(255,255,255,.10)!important;color:#fff!important;display:inline-flex;align-items:center;justify-content:center;font-size:20px;transition:background .2s} .nsm-footer-social .elementor-social-icon:hover{background:var(--nsm-fill)!important} .nsm-footer-social .elementor-social-icon i{color:#fff!important} .nsm-footer-social .elementor-social-icon svg{fill:#fff!important;width:20px;height:20px} /* --- touch targets --- */ #ast-scroll-top.ast-scroll-top-icon{width:48px;height:48px;min-width:48px;padding:0;border-radius:var(--nsm-radius-btn)} #ast-scroll-top .ast-icon{display:flex;align-items:center;justify-content:center;height:100%} #ast-scroll-top:focus-visible{outline:3px solid #fff;outline-offset:-6px} .nsm-donate .freq-btn{min-height:44px;padding:8px 18px} .elementor-image-carousel-wrapper .swiper-pagination-bullet{width:12px;height:12px;margin:0 9px!important;position:relative;opacity:.55} .elementor-image-carousel-wrapper .swiper-pagination-bullet-active{opacity:1} .elementor-image-carousel-wrapper .swiper-pagination-bullet::after{content:'';position:absolute;inset:-12px} /* --- reduced motion: calm animation for people who ask for it --- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } .nsm-footer-social{text-align:left!important}.nsm-footer-social .elementor-social-icons-wrapper{justify-content:flex-start!important} /* --- one section-header pattern on Who We Are (eyebrow + title), matching Home/Programs/Help/Contact --- */ .nsm-wwa .tag{font-family:'Encode Sans SC','Encode Sans',sans-serif;font-size:.74rem;letter-spacing:.18em;gap:.6rem} .nsm-wwa .tag::before{content:"";width:26px;height:2px;background:var(--nsm-fill);display:inline-block} .nsm-wwa .section-title{font-family:'Encode Sans Expanded','Encode Sans',sans-serif;font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.01em} /* --- secondary (ghost) button role: outline, quiet next to the one primary --- */ .nsm-btn--ghost .elementor-button{background:transparent!important;color:var(--nsm-accent-text)!important;border:2px solid var(--nsm-fill)!important;box-shadow:none!important} .nsm-btn--ghost .elementor-button:hover{background:var(--nsm-fill)!important;color:#fff!important;transform:none} .nsm-band--teal .nsm-btn--ghost .elementor-button,.nsm-band--hero .nsm-btn--ghost .elementor-button,.nsm-band--toc .nsm-btn--ghost .elementor-button{color:#fff!important;border-color:#fff!important} .nsm-band--teal .nsm-btn--ghost .elementor-button:hover,.nsm-band--hero .nsm-btn--ghost .elementor-button:hover,.nsm-band--toc .nsm-btn--ghost .elementor-button:hover{background:#fff!important;color:var(--nsm-navy)!important} .nsm-band--terra .nsm-btn--ghost .elementor-button,.nsm-band--cta .nsm-btn--ghost .elementor-button,.nsm-band--strip .nsm-btn--ghost .elementor-button{color:#fff!important;border-color:#fff!important} /* ===== RESPONSIVE LAYER (2026-09-25): fluid type + 4/8 spacing scale, tap targets, small-text floors ===== */ :root{ --nsm-text-xs:clamp(.75rem,.72rem + .15vw,.8125rem); --nsm-text-sm:clamp(.875rem,.85rem + .15vw,.9375rem); --nsm-text-base:clamp(1rem,.96rem + .2vw,1.0625rem); --nsm-text-lg:clamp(1.125rem,1.05rem + .35vw,1.3125rem); --nsm-text-xl:clamp(1.25rem,1.1rem + .7vw,1.625rem); --nsm-text-2xl:clamp(1.5rem,1.2rem + 1.4vw,2.25rem); --nsm-text-3xl:clamp(1.875rem,1.4rem + 2.2vw,3rem); --nsm-text-4xl:clamp(2.25rem,1.5rem + 3.5vw,4rem); --nsm-space-1:.25rem;--nsm-space-2:.5rem;--nsm-space-3:.75rem;--nsm-space-4:1rem; --nsm-space-6:1.5rem;--nsm-space-8:2rem; --nsm-space-section:clamp(3rem,2rem + 4vw,6rem); --nsm-gutter:clamp(1rem,.6rem + 1.6vw,2rem); --nsm-measure:68ch; } html{-webkit-text-size-adjust:100%} body{overflow-x:clip} img,video,iframe{max-width:100%} .elementor-widget-text-editor p,.elementor-widget-container>p{max-width:var(--nsm-measure)} /* small labels never drop below 12px; secondary text never below 13px */ .meta-label,.program-target-pill{font-size:max(12px,.75rem)!important} .meta-value,.highlight-item span{font-size:max(13px,.8125rem)} /* hero CTA rows: buttons keep natural width and wrap instead of squashing */ .hero-cta-group{flex-wrap:wrap} .hero-cta-group .elementor-widget-button{width:auto!important;flex:0 1 auto} /* carousel arrows: 44px hit area */ .elementor-swiper-button{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center} @media (max-width:767px){ .hero-cta-group{flex-direction:column;align-items:stretch} .hero-cta-group .elementor-widget-button,.hero-cta-group .elementor-button{width:100%!important;justify-content:center} } .metric-label .elementor-heading-title,.stream-tag .elementor-heading-title,.meta-label,.program-target-pill{font-size:max(12px,.75rem)!important} /* small-text floor: labels, tags, pills, captions never under 12px */ .channel-label .elementor-heading-title,.section-subtitle.faq-container .elementor-heading-title,.pillar-tag .elementor-heading-title,.stat-label .elementor-heading-title,.target-group .elementor-heading-title,.nsm-spfilterlabel .elementor-heading-title,.nsm-sploc .elementor-heading-title,.nsm-spwait .elementor-heading-title,.lbl,.pill,.scripture-card .elementor-heading-title,.step-tag .elementor-heading-title,.tag .elementor-heading-title,.freq-btn,.form-secure-notice,.amount-label span,.amount-cur{font-size:max(12px,.75rem)!important} .nsm-sploc,.nsm-spwait{font-size:max(12px,.75rem)!important} /* form controls: 44px+ tall, 16px text (stops iOS zoom-on-focus) */ .elementor-field-textual,.custom-amount-input,.input-field,.search-field,.elementor-field-group select,.elementor-field-group textarea{min-height:var(--nsm-tap);font-size:max(16px,1rem)} .elementor-field-type-acceptance label,.elementor-field-option label,.elementor-field-subgroup label{min-height:44px;display:inline-flex;align-items:center;gap:.5rem;padding-block:.25rem} .search-submit,.ast-search-submit,.searchform .search-submit{min-width:44px;min-height:44px} .elementor-form .elementor-field-group .elementor-field-textual,.elementor-form .elementor-field-group .elementor-field-textual.elementor-size-sm{min-height:var(--nsm-tap)!important;font-size:max(16px,1rem)!important} .nsm-badge .elementor-heading-title{font-size:max(12px,.75rem)!important} /* ===== Programs filter tabs: style the real Elementor button, not the inert wrapper div (2026-09-26) ===== */ .nsm-programs .filter-tab{background:none!important;padding:0!important;box-shadow:none!important;border-radius:999px} .nsm-programs .filter-tab.active{background:none!important;box-shadow:none!important} .nsm-programs .filter-tab .elementor-button{ background:transparent!important; color:var(--nsm-navy)!important; border:none!important; box-shadow:none!important; border-radius:999px!important; padding:12px 20px!important; font-weight:700; white-space:nowrap; } .nsm-programs .filter-tab .elementor-button:hover{background:rgba(36,56,63,.07)!important} .nsm-programs .filter-tab.active .elementor-button{ background:var(--nsm-navy)!important; color:#fff!important; box-shadow:none!important; } .nsm-programs .filter-tabs-container{flex-wrap:nowrap} @media (max-width:767px){ .nsm-programs .filter-tabs-container{ display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; max-width:100%!important; width:100%!important; justify-content:flex-start!important; scrollbar-width:none; } .nsm-programs .filter-tabs-container::-webkit-scrollbar{display:none} .nsm-programs .filter-tab{flex:0 0 auto} .nsm-programs .filter-tab .elementor-button{padding:10px 16px!important;font-size:.85rem} } /* ===== Programs card images: crop to the fixed-height box instead of spilling to natural aspect ratio (2026-09-26) ===== */ .nsm-programs .card-image-box{position:relative;overflow:hidden} .nsm-programs .card-image-box .elementor-widget-image, .nsm-programs .card-image-box .elementor-widget-container{ position:static!important; width:100%; height:100%; margin:0; } .nsm-programs .card-image-box img{ position:absolute!important; inset:0; top:0;left:0;right:0;bottom:0; width:100%!important; height:100%!important; aspect-ratio:auto!important; object-fit:cover; object-position:center; margin:0!important; } /* ===== Programs page: spacing before Stream B header (2026-09-25) ===== */ .nsm-programs .stream-group + .stream-group{ margin-top: 72px!important; } @media (max-width:767px){ .nsm-programs .stream-group + .stream-group{ margin-top: 48px!important; } } /* ===== Our Next Step tour: enlarge master-plan hotspot touch targets to 44x44 without moving the visual marker (2026-09-25) ===== */ .nsm-hs{ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } /* ===== How to Help: "Give to a programme" filter tabs — style the real Elementor button, not the inert wrapper (2026-09-25) ===== */ .program-tab-btn{ background: none!important; border: none!important; padding: 0!important; box-shadow: none!important; border-radius: 50px; } .program-tab-btn .elementor-button{ background: var(--bg-cream,#f3ecd9)!important; color: var(--dark-slate,#24383f)!important; border: 1px solid var(--border-color,#e0d5b8)!important; border-radius: 50px!important; padding: 10px 20px!important; font-family: 'Encode Sans', sans-serif; font-weight: 700; font-size: 0.88rem; transition: var(--transition,.18s); box-shadow: none!important; } .program-tab-btn:hover .elementor-button{ border-color: var(--primary-orange,#b3502c)!important; color: var(--nsm-accent-text,#a84421)!important; } .program-tab-btn.active .elementor-button{ background: var(--nsm-fill,#b3502c)!important; color: #ffffff!important; border-color: var(--primary-orange,#b3502c)!important; box-shadow: 0 4px 12px rgba(219,103,62,.25)!important; } /* ===== How to Help: "Sponsor a Child" CTA — the .btn-outline-orange wrapper drew its own bordered box around the already-correctly-styled inner Elementor button, creating a broken nested double box. Neutralize the wrapper so only the clean button (already matching the site's standard solid-orange CTA style used by Donate / Give to the Centre) shows (2026-09-25) ===== */ .btn-outline-orange{ background: none!important; border: none!important; padding: 0!important; border-radius: 0!important; } /* ===== Contact page: topic-pill grid + label display fix (2026-09-25) ===== Root cause: .ef-topic and .elementor-field-subgroup are the SAME element in Elementor's actual markup, so the old .ef-topic .elementor-field-subgroup{} selector never matched (descendant combinator between two classes on one node can't match), and Elementor core's higher-specificity .elementor-field-type-radio ... label{display:inline} rule was winning over our intended flex layout, collapsing each label's padding into non-reserved paint (the mobile pill overlap). Fixed by targeting the actual element and using !important to beat Elementor core's specificity. */ .nsm-eform .ef-topic{ display:grid!important; grid-template-columns:repeat(3,1fr); gap:12px; } @media (max-width:767px){ .nsm-eform .ef-topic{ grid-template-columns:repeat(2,1fr); } } .nsm-eform .ef-topic .elementor-field-option label{ display:flex!important; align-items:center; justify-content:center; text-align:center; min-height:46px; padding:10px 12px!important; background:var(--bg-cream-light,#faf6ec)!important; border:1.5px solid var(--border-subtle,#e0d5b8)!important; border-radius:12px; font-weight:600; font-size:.86rem; color:var(--slate-navy,#24383f); cursor:pointer; transition:.15s; line-height:1.2; } .nsm-eform .ef-topic .elementor-field-option label:hover{ border-color:var(--terracotta,#db673e)!important; } .nsm-eform .ef-topic input[type=radio]:checked + label{ background:var(--nsm-fill,#b3502c)!important; color:#fff!important; border-color:var(--terracotta,#db673e)!important; } .nsm-eform .ef-topic input[type=radio]:focus-visible + label{ box-shadow:0 0 0 3px rgba(219,103,62,.18); } /* ===== Sponsor a Child header button: keep outline/ghost style despite the global .elementor-button unification rule (2026-09-25) ===== */ .elementor-46 .elementor-element-9c3d1e2 .elementor-button, .elementor-46 .elementor-element-5f8b2a1 .elementor-button{ background:transparent!important; color:var(--nsm-fill,#b3502c)!important; border:2px solid var(--nsm-fill,#b3502c)!important; box-shadow:none!important; } .elementor-46 .elementor-element-9c3d1e2 .elementor-button:hover, .elementor-46 .elementor-element-5f8b2a1 .elementor-button:hover{ background:var(--nsm-fill,#b3502c)!important; color:#fff!important; } /* ===== Menu audit CSS polish (2026-09-25): focus ring, dropdown shadow, mobile logo ===== */ /* 1. Stronger, guaranteed-visible keyboard focus ring on nav links/dropdown toggles/hamburger. The theme's plain a:focus{outline:dotted thin} rule (main.min.css) is more specific than the site-wide :focus-visible token rule, so it was winning and showing a faint dotted outline. */ .elementor-nav-menu a:focus-visible, .elementor-nav-menu .menu-link:focus-visible, .elementor-nav-menu .elementor-sub-item:focus-visible, .dropdown-menu-toggle:focus-visible, .elementor-menu-toggle:focus-visible{ outline:3px solid var(--nsm-navy,#24383f)!important; outline-offset:2px!important; border-radius:4px; } /* 2. Dropdown panels had no shadow/border, so they blended into the page instead of reading as a floating menu. */ .sub-menu.elementor-nav-menu--dropdown{ box-shadow:0 12px 28px rgba(36,56,63,.18),0 2px 8px rgba(36,56,63,.10)!important; border:1px solid var(--border-subtle,#e0d5b8)!important; } /* 3. Mobile header logo: "NextSteps Ministries" wraps to two lines in the narrow mobile logo slot next to the hamburger icon. Keep the two-line wrap (it breaks cleanly between the two words) but tighten it and vertically center it against the hamburger so it reads as a deliberate lockup instead of loose, top-heavy text. */ .elementor-element-e5f323b{ align-items:center!important; } .elementor-element-f3c52a9 .elementor-heading-title{ font-size:16px!important; line-height:1.15!important; } /* ===== Mobile menu: full-screen overlay + scroll lock (2026-09-25) ===== Previously the open mobile menu was an in-flow, transparent-background block that pushed the page content down (instead of overlaying it) and left cream-colored nav text sitting directly on the cream header background -- nearly unreadable -- with no scroll lock behind it. Fixed with CSS only: Elementor already toggles an `elementor-active` class on the hamburger button, and the dropdown