/* ========================================================================= Phone-only card sliders (Active Fundraising + In Media) ------------------------------------------------------------------------- Standalone override so the built /assets2 bundle stays untouched. Turns each section's ".section-grid" card grid into a horizontal scroll-snap carousel on phones (<=640px). Desktop/tablet keep the original multi-column grid. Specificity note: pages/index.css is injected lazily at runtime and appended to , so it wins on equal specificity. We out-rank its ".
.section-grid" (0,2,0) rules with either an id (#active-fundraising) or a doubled class (.in-media-section.in-media-section). ========================================================================= */ @media screen and (max-width: 640px) { /* --- Track: horizontal scroll-snap carousel --- */ #active-fundraising .section-grid, .in-media-section.in-media-section .section-grid { display: flex; grid-template-columns: none; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ /* Bleed to the screen edges so the next card peeks in. The var matches .container's own padding, so the negative margin cancels it and the padding re-insets the first/last card. */ margin-inline: calc(-1 * var(--container-padding-size)); padding-inline: var(--container-padding-size); scroll-padding-inline: var(--container-padding-size); } #active-fundraising .section-grid::-webkit-scrollbar, .in-media-section.in-media-section .section-grid::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* --- Slides --- */ #active-fundraising .fundraising-card, .in-media-section.in-media-section .news-card { flex: 0 0 85%; /* leaves ~15% peek of the next card */ scroll-snap-align: start; } /* --- Dot pagination (built by fund-slider.js). Mirrors the Reports slider's Swiper pagination exactly: 6px dots, translucent-orange idle, solid-orange active scaled 2x. --- */ .fund-slider-dots { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .75rem; /* = Swiper's margin:0 .375rem per bullet */ margin-top: 1.5rem; } .fund-slider-dots button { width: .375rem; height: .375rem; padding: 0; border: 0; border-radius: 50%; background: rgba(216, 125, 50, .5); cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform .2s ease, background .2s ease; } /* Active bullet: solid orange + scale(2), exactly like the Swiper original. */ .fund-slider-dots button.is-active { background: #d87d32; transform: scale(2); } } /* Dots are a phone-only affordance — never show them on tablet/desktop. */ @media screen and (min-width: 641px) { .fund-slider-dots { display: none; } }