/* input(3918,5): run-time error CSS1060: Expected closing curly-brace, found '@keyframes' input(3922,1): run-time error CSS1019: Unexpected token, found '}' input(8731,22): run-time error CSS1030: Expected identifier, found '4\/3' input(8731,22): run-time error CSS1033: Expected closing bracket, found '4\/3' input(8731,26): run-time error CSS1031: Expected selector, found ']' input(8731,26): run-time error CSS1025: Expected comma or open brace, found ']' */ /* ============================================ BCFC Card Animations Hover lift, image scale, and stagger effects ============================================ */ /* Card base hover effect */ .bcfc-card, .bcfc-number-card, .stat-item, article[class*="card"] { transition: all 0.3s ease; } @media (prefers-reduced-motion: reduce) { .bcfc-card, .bcfc-number-card, .stat-item, article[class*="card"] { transition: none; } /* Suppress hover transforms */ .bcfc-card:hover, .bcfc-number-card:hover, .stat-item:hover, article[class*="card"]:hover { transform: none; box-shadow: none; } .bcfc-card:hover img, .bcfc-number-card:hover img, .stat-item:hover img, article[class*="card"]:hover img { transform: none; } .bcfc-home__why-grid .bcfc-number-card:hover { transform: none; box-shadow: none; } .bcfc-home__why-grid .bcfc-number-card:hover .bcfc-number-card__number { transform: none; } a.bcfc-home__action:hover { transform: none; box-shadow: none; } .bcfc-pill-nav__link:hover, .bcfc-pill-nav a:hover { transform: none; } .bcfc-guideline-card:hover, [class*="guideline-card"]:hover { transform: none; box-shadow: none; } } /* Hover lift effect on cards */ .bcfc-card:hover, .bcfc-number-card:hover, .stat-item:hover, article[class*="card"]:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(14, 44, 92, 0.08); } /* Image scale inside cards on hover */ .bcfc-card img, .bcfc-number-card img, .stat-item img, article[class*="card"] img { transition: transform 0.3s ease; } .bcfc-card:hover img, .bcfc-number-card:hover img, .stat-item:hover img, article[class*="card"]:hover img { transform: scale(1.03); } /* Number cards in home page why section */ .bcfc-home__why-grid .bcfc-number-card { transition: all 0.3s ease; } .bcfc-home__why-grid .bcfc-number-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(14, 44, 92, 0.08); } .bcfc-home__why-grid .bcfc-number-card:hover .bcfc-number-card__number { transform: scale(1.05); } .bcfc-home__why-grid .bcfc-number-card__number { transition: transform 0.3s ease; } /* Stats section card stagger */ .bcfc-stats-section .stat-item { transition: all 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } /* CTA buttons with hover lift */ a.bcfc-home__action:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } /* Pill nav links hover */ .bcfc-pill-nav__link:hover, .bcfc-pill-nav a:hover { transform: translateY(-1px); } /* Guideline cards */ .bcfc-guideline-card, [class*="guideline-card"] { transition: all 0.3s ease; } .bcfc-guideline-card:hover, [class*="guideline-card"]:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(14, 44, 92, 0.08); } /* ============================================ CARD GRID ENTRANCE — staggered scroll reveals Applied to children of card grids that have .io-animate on each item. ============================================ */ /* Default: stagger delay for items without explicit --io-delay */ .ir-bento-item.io-animated, .ir-link-card.io-animated, .report-card.io-animated, .ar-report-card.io-animated, .announcement-card.io-animated { --io-delay: 0ms; } /* Stagger up to 8 items */ .ir-bento-item.io-animated:nth-child(1), .ir-link-card.io-animated:nth-child(1), .report-card.io-animated:nth-child(1), .ar-report-card.io-animated:nth-child(1), .announcement-card.io-animated:nth-child(1) { --io-delay: 0ms; } .ir-bento-item.io-animated:nth-child(2), .ir-link-card.io-animated:nth-child(2), .report-card.io-animated:nth-child(2), .ar-report-card.io-animated:nth-child(2), .announcement-card.io-animated:nth-child(2) { --io-delay: 60ms; } .ir-bento-item.io-animated:nth-child(3), .ir-link-card.io-animated:nth-child(3), .report-card.io-animated:nth-child(3), .ar-report-card.io-animated:nth-child(3), .announcement-card.io-animated:nth-child(3) { --io-delay: 120ms; } .ir-bento-item.io-animated:nth-child(4), .ir-link-card.io-animated:nth-child(4), .report-card.io-animated:nth-child(4), .ar-report-card.io-animated:nth-child(4), .announcement-card.io-animated:nth-child(4) { --io-delay: 180ms; } .ir-bento-item.io-animated:nth-child(5), .ir-link-card.io-animated:nth-child(5), .report-card.io-animated:nth-child(5), .ar-report-card.io-animated:nth-child(5), .announcement-card.io-animated:nth-child(5) { --io-delay: 240ms; } .ir-bento-item.io-animated:nth-child(6), .ir-link-card.io-animated:nth-child(6), .report-card.io-animated:nth-child(6), .ar-report-card.io-animated:nth-child(6), .announcement-card.io-animated:nth-child(6) { --io-delay: 300ms; } .ir-bento-item.io-animated:nth-child(7), .ir-link-card.io-animated:nth-child(7), .report-card.io-animated:nth-child(7), .ar-report-card.io-animated:nth-child(7), .announcement-card.io-animated:nth-child(7) { --io-delay: 360ms; } .ir-bento-item.io-animated:nth-child(8), .ir-link-card.io-animated:nth-child(8), .report-card.io-animated:nth-child(8), .ar-report-card.io-animated:nth-child(8), .announcement-card.io-animated:nth-child(8) { --io-delay: 420ms; } /* ============================================ CARD ICON MICRO-INTERACTIONS SVG icons scale + rotate slightly on parent hover ============================================ */ .ir-link-card:hover .ir-link-card__icon svg, .ir-bento-item:hover .ir-bento-card__icon svg, .ir-bento-item:hover .ir-bento-wide__icon svg, .ir-governance-item:hover .ir-governance-item__icon svg { transform: scale(1.15); color: var(--bcfc-dark-ink, var(--color-secondary)); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; } .ir-link-card__icon svg, .ir-bento-card__icon svg, .ir-bento-wide__icon svg, .ir-governance-item__icon svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; } /* ============================================ CARD IMAGE ZOOM REVEAL ON HOVER Image inside card zooms subtly from center ============================================ */ .report-card:hover .report-card__thumbnail, .ar-report-card:hover .ar-report-card-image img, .announcement-card:hover .announcement-card__image img { transform: scale(1.06); } .report-card__thumbnail, .ar-report-card-image img, .announcement-card__image img { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ============================================ REPORT CARD — button arrow slide right on hover ============================================ */ .report-card:hover .report-card__btn-icon, .ir-bento-item:hover .ir-bento-card__action svg, .ir-bento-wide:hover .ir-bento-wide__action svg { transform: translateX(3px); } .report-card__btn-icon, .ir-bento-card__action svg, .ir-bento-wide__action svg { transition: transform 0.2s ease; } /* ============================================ BENTO ITEM — full card lift + border accent ============================================ */ .ir-bento-item.io-animated { animation: io-fadeInUp 0.5s ease forwards; opacity: 0; } .ir-bento-item:hover { border-color: rgba(0, 59, 114, 0.25); box-shadow: 0 12px 32px rgba(0, 59, 114, 0.1); } /* ============================================ IR LINK CARD — press effect on click ============================================ */ .ir-link-card:active { transform: translateY(-1px) scale(0.99); transition: transform 0.1s ease; } /* ============================================ BOARD CHARTER BANNER — gradient pulse on hover ============================================ */ .board-charter-banner:hover .board-charter-banner__gradient { opacity: 0.2; transition: opacity 0.4s ease; } .board-charter-banner__gradient { opacity: 0.1; transition: opacity 0.4s ease; } .board-charter-banner:hover .board-charter-banner__link { transform: scale(1.03); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); } .board-charter-banner__link { transition: transform 0.2s ease, box-shadow 0.2s ease; } /* ============================================ YEAR PILL FILTER — subtle bounce on activation ============================================ */ @keyframes pill-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } /* ============================================ VIEW TOGGLE — active indicator slides ============================================ */ .view-toggle__btn--active { position: relative; overflow: hidden; } .view-toggle__btn--active::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); border-radius: inherit; animation: toggle-pulse 1.5s ease-in-out infinite; } @keyframes toggle-pulse { 0%, 100% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } /* ============================================ ANNOUNCEMENT CARD — slide-in arrow on hover ============================================ */ .announcement-card:hover .announcement-card__btn { gap: 10px; } .announcement-card__btn { gap: 6px; transition: gap 0.2s ease; } /* ============================================ AR REPORT CARD — full card lift + image zoom ============================================ */ .ar-report-card-link:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 59, 114, 0.12); } .ar-report-card-link { transition: transform 0.3s ease, box-shadow 0.3s ease; } .ar-report-card-link:hover .ar-report-card-image img { transform: scale(1.05); } .ar-report-card-image img { transition: transform 0.4s ease; } .ar-report-card-link:hover .ar-report-card-cta { gap: 10px; } .ar-report-card-cta { gap: 6px; transition: gap 0.2s ease; } /* ============================================ GOVERNANCE LINK CARD — icon slides right ============================================ */ .ir-governance-item:hover .ir-governance-item__title { color: var(--bcfc-dark-ink, var(--color-secondary)); transition: color 0.2s ease; } .ir-governance-item__title { transition: color 0.2s ease; text-transform: capitalize; } /* ============================================ IR ACCORDION — content fade + slide on open ============================================ */ .ir-accordion-body { animation: accordion-open 0.35s ease forwards; } @keyframes accordion-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ REDUCED MOTION — suppress all transitions/animations ============================================ */ @media (prefers-reduced-motion: reduce) { .ir-bento-item.io-animated, .ir-link-card.io-animated, .report-card.io-animated, .ar-report-card.io-animated, .announcement-card.io-animated { animation: none; opacity: 1; } .view-toggle__btn--active::after { animation: none; } .board-charter-banner__gradient, .board-charter-banner__link { transition: none; } .ir-link-card:active { transform: none; transition: none; } } /* ============================================ Scroll-triggered animations (replaces animate.css) Triggered by bcfc-intersection.js when .io-animate elements enter the viewport. Uses --io-delay CSS var so per-element delay works. ============================================ */ .io-animated { animation-duration: 1s; animation-fill-mode: both; animation-delay: var(--io-delay, 0ms); } /* Pre-animation state so elements start hidden instead of flashing visible -> invisible -> visible when the scroll observer triggers. */ .io-animate:not(.io-animated) { opacity: 0; } @media (prefers-reduced-motion: reduce) { .io-animate:not(.io-animated) { opacity: 1; } } /* The intersection script adds these local classes. Keep their animation names here instead of relying on the asynchronously loaded animate.css CDN stylesheet, which is not guaranteed to be available when a page is painted. */ /* io-fadeIn — A PURE OPACITY FADE, WITH NO TRANSFORM, and it was missing. 100 elements across 64 views are marked `io-animate fadeIn`, i.e. their author asked for a fade and nothing else. There was no io-fadeIn class and no 'fadeIn' entry in bcfc-intersection.ts's animationMap, so every one of them fell through to the default io-fadeInUp and ran a 1s fade PLUS a 40px upward slide. On a tall band that is the visible judder reported as flickering on /en/islamic-finance/islamic-services/murabaha-financing/ — measured: .bcfc-app-band sat at near-zero opacity while already fully in view, then fade-slid in. */ .io-animated.io-fadeIn { animation-name: io-fadeIn; } .io-animated.io-fadeInUp { animation-name: io-fadeInUp; } .io-animated.io-fadeInDown { animation-name: io-fadeInDown; } .io-animated.io-fadeInLeft { animation-name: io-fadeInLeft; } .io-animated.io-fadeInRight { animation-name: io-fadeInRight; } .io-animated.io-slideInLeft { animation-name: io-slideInLeft; } .io-animated.io-slideInRight { animation-name: io-slideInRight; } .io-animated.io-zoomIn { animation-name: io-zoomIn; } .io-animated.io-flipInX { animation-name: io-flipInX; } .io-animated.io-bounceIn { animation-name: io-bounceIn; } @keyframes io-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes io-fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes io-fadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes io-fadeInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes io-fadeInRight { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes io-slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes io-slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes io-zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } to { transform: scale3d(1, 1, 1); } } @keyframes io-flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes io-bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: ease-out; } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } /* ============================================ Odometer.js rolling digit counter BCFC brand colours and Almarai font ============================================ */ .why-new-card-number.odometer, .why-new-card-number.odometer.odometer-auto-theme, .why-new-card-number.odometer.odometer-theme-default { display: inline-block; vertical-align: middle; position: relative; font-family: 'Almarai', sans-serif; font-weight: 700; color: var(--bcfc-dark-ink-brand, var(--bcfc-primary)); } /* Rolling up animation */ /* Rolling down animation */ .why-new-card-number.odometer, .why-new-card-number.odometer.odometer-auto-theme, .why-new-card-number.odometer.odometer-theme-default { line-height: 1.1em; } .why-new-card-number.odometer .odometer-value, .why-new-card-number.odometer.odometer-auto-theme .odometer-value, .why-new-card-number.odometer.odometer-theme-default .odometer-value { text-align: center; } /* Reduced-motion: skip animation, show final value immediately */ /* Fallback value — visible only when JS is unavailable */ .why-new-card-number .odometer-value { display: none; } /* ============================================ SCROLL PROGRESS BAR JS sets --scroll-progress custom property on documentElement. CSS uses it to drive width. Progressive enhancement: hidden by default, revealed when JS sets the variable. ============================================ */ .bcfc-scroll-progress { position: fixed; top: 0; inset-inline-start: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--bcfc-blue-light), var(--bcfc-green)); z-index: var(--bcfc-z-emergency, 9999); pointer-events: none; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; transition: transform 0.1s ease-out; } /* Arabic fills from the right, so the gradient and the grow origin both mirror. */ [dir="rtl"] .bcfc-scroll-progress { background: linear-gradient(to left, var(--bcfc-blue-light), var(--bcfc-green)); transform-origin: right; } /* The Islamic section uses green only. */ .is-islamic .bcfc-scroll-progress { background: linear-gradient(to right, var(--bcfc-green-dark), var(--bcfc-green)); } [dir="rtl"] .is-islamic .bcfc-scroll-progress { background: linear-gradient(to left, var(--bcfc-green-dark), var(--bcfc-green)); } @media (prefers-reduced-motion: reduce) { .bcfc-scroll-progress { transition: none; } } @media print { .bcfc-scroll-progress { display: none; } } /* ============================================ SCROLL-TO-TOP BUTTON Scroll-driven: button is invisible until page scrolls >300px. Uses animation-timeline: scroll() where supported (Chrome 115+). Falls back to .bcfc-scrolltop-js class added by JS for Safari. ============================================ */ /* Default: button hidden at top of page. animation: none prevents .io-animated (added by IntersectionObserver at page load) from overriding the scroll-driven animation below. */ #bcfc-scroll-to-top { opacity: 0; pointer-events: none; animation: none !important; } /* Scroll-driven visibility — modern browsers */ @supports (animation-timeline: scroll()) { #bcfc-scroll-to-top { animation: scrolltop-visibility linear both; animation-timeline: scroll(root block); animation-range: 0px 300px; } @keyframes scrolltop-visibility { from { opacity: 0; pointer-events: none; } to { opacity: 1; pointer-events: auto; } } } /* JS-assisted fallback for browsers without scroll-driven animation (Safari) */ .bcfc-scrolltop-js #bcfc-scroll-to-top { transition: opacity 0.3s ease; } .bcfc-scrolltop-js #bcfc-scroll-to-top.is-visible { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { #bcfc-scroll-to-top { animation: none !important; opacity: 1; pointer-events: auto; } } /* ============================================ HOME PAGE GRID STAGGER DELAYS CSS nth-child stagger for io-animated items inside common home page grids. Replaces JS setting --io-delay inline style. ============================================ */ /* Stats cards grid */ /* Why section number cards */ .bcfc-home__why-grid .bcfc-number-card.io-animated { --io-delay: 0ms; } .bcfc-home__why-grid .bcfc-number-card.io-animated:nth-child(1) { --io-delay: 0ms; } .bcfc-home__why-grid .bcfc-number-card.io-animated:nth-child(2) { --io-delay: 80ms; } .bcfc-home__why-grid .bcfc-number-card.io-animated:nth-child(3) { --io-delay: 160ms; } .bcfc-home__why-grid .bcfc-number-card.io-animated:nth-child(4) { --io-delay: 240ms; } .bcfc-home__why-grid .bcfc-number-card.io-animated:nth-child(5) { --io-delay: 320ms; } .bcfc-home__why-grid .bcfc-number-card.io-animated:nth-child(6) { --io-delay: 400ms; } /* Card carousel slides */ .bcfc-card-carousel .swiper-slide.io-animated { --io-delay: 0ms; } .bcfc-card-carousel .swiper-slide.io-animated:nth-child(1) { --io-delay: 0ms; } .bcfc-card-carousel .swiper-slide.io-animated:nth-child(2) { --io-delay: 80ms; } .bcfc-card-carousel .swiper-slide.io-animated:nth-child(3) { --io-delay: 160ms; } .bcfc-card-carousel .swiper-slide.io-animated:nth-child(4) { --io-delay: 240ms; } .bcfc-card-carousel .swiper-slide.io-animated:nth-child(5) { --io-delay: 320ms; } .bcfc-card-carousel .swiper-slide.io-animated:nth-child(6) { --io-delay: 400ms; } .bcfc-card-carousel .swiper-slide.io-animated:nth-child(7) { --io-delay: 480ms; } .bcfc-card-carousel .swiper-slide.io-animated:nth-child(8) { --io-delay: 560ms; } /* Services / finance / news section cards */ .bcfc-home__services .bcfc-card.io-animated { --io-delay: 0ms; } .bcfc-home__services .bcfc-card.io-animated:nth-child(1) { --io-delay: 0ms; } .bcfc-home__services .bcfc-card.io-animated:nth-child(2) { --io-delay: 70ms; } .bcfc-home__services .bcfc-card.io-animated:nth-child(3) { --io-delay: 140ms; } .bcfc-home__services .bcfc-card.io-animated:nth-child(4) { --io-delay: 210ms; } .bcfc-home__services .bcfc-card.io-animated:nth-child(5) { --io-delay: 280ms; } .bcfc-home__services .bcfc-card.io-animated:nth-child(6) { --io-delay: 350ms; } .bcfc-home__finance .bcfc-card.io-animated { --io-delay: 0ms; } .bcfc-home__finance .bcfc-card.io-animated:nth-child(1) { --io-delay: 0ms; } .bcfc-home__finance .bcfc-card.io-animated:nth-child(2) { --io-delay: 70ms; } .bcfc-home__finance .bcfc-card.io-animated:nth-child(3) { --io-delay: 140ms; } .bcfc-home__finance .bcfc-card.io-animated:nth-child(4) { --io-delay: 210ms; } .bcfc-home__news .bcfc-card.io-animated { --io-delay: 0ms; } .bcfc-home__news .bcfc-card.io-animated:nth-child(1) { --io-delay: 0ms; } .bcfc-home__news .bcfc-card.io-animated:nth-child(2) { --io-delay: 70ms; } .bcfc-home__news .bcfc-card.io-animated:nth-child(3) { --io-delay: 140ms; } .bcfc-home__news .bcfc-card.io-animated:nth-child(4) { --io-delay: 210ms; } /* App download section */ /* ============================================ ISLAMIC LANDING & PRODUCT CARD GRIDS Per-card reveal stagger (source islamic-main IntersectionObserver i*90ms). Scoped to the Islamic service/product/board/uses card grids so their cards cascade instead of revealing together. ============================================ */ .bcfc-islamic-landing__card.io-animated, .bcfc-islamic-product__card.io-animated, .bcfc-islamic-landing__member.io-animated, .bcfc-islamic-product__use.io-animated { --io-delay: 0ms; } .bcfc-islamic-landing__card.io-animated:nth-child(1), .bcfc-islamic-product__card.io-animated:nth-child(1), .bcfc-islamic-landing__member.io-animated:nth-child(1), .bcfc-islamic-product__use.io-animated:nth-child(1) { --io-delay: 0ms; } .bcfc-islamic-landing__card.io-animated:nth-child(2), .bcfc-islamic-product__card.io-animated:nth-child(2), .bcfc-islamic-landing__member.io-animated:nth-child(2), .bcfc-islamic-product__use.io-animated:nth-child(2) { --io-delay: 90ms; } .bcfc-islamic-landing__card.io-animated:nth-child(3), .bcfc-islamic-product__card.io-animated:nth-child(3), .bcfc-islamic-landing__member.io-animated:nth-child(3), .bcfc-islamic-product__use.io-animated:nth-child(3) { --io-delay: 180ms; } .bcfc-islamic-landing__card.io-animated:nth-child(4), .bcfc-islamic-product__card.io-animated:nth-child(4), .bcfc-islamic-landing__member.io-animated:nth-child(4), .bcfc-islamic-product__use.io-animated:nth-child(4) { --io-delay: 270ms; } .bcfc-islamic-landing__card.io-animated:nth-child(5), .bcfc-islamic-product__card.io-animated:nth-child(5), .bcfc-islamic-landing__member.io-animated:nth-child(5), .bcfc-islamic-product__use.io-animated:nth-child(5) { --io-delay: 360ms; } .bcfc-islamic-landing__card.io-animated:nth-child(6), .bcfc-islamic-product__card.io-animated:nth-child(6), .bcfc-islamic-landing__member.io-animated:nth-child(6), .bcfc-islamic-product__use.io-animated:nth-child(6) { --io-delay: 450ms; } .bcfc-islamic-landing__card.io-animated:nth-child(7), .bcfc-islamic-product__card.io-animated:nth-child(7), .bcfc-islamic-landing__member.io-animated:nth-child(7), .bcfc-islamic-product__use.io-animated:nth-child(7) { --io-delay: 540ms; } .bcfc-islamic-landing__card.io-animated:nth-child(8), .bcfc-islamic-product__card.io-animated:nth-child(8), .bcfc-islamic-landing__member.io-animated:nth-child(8), .bcfc-islamic-product__use.io-animated:nth-child(8) { --io-delay: 630ms; } /* ============================================ Parallax Area Styles For sections that need background parallax effect ============================================ */ .parallax-area { position: relative; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .parallax-overlay { position: absolute; top: 0; inset-inline: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); pointer-events: none; } .parallax-content { position: relative; z-index: 1; } /* Mobile fallback - disable fixed attachment on touch devices */ @media (hover: none) and (pointer: coarse) { .parallax-area { background-attachment: scroll; } } /* Reduced motion - disable parallax */ @media (prefers-reduced-motion: reduce) { .parallax-area { background-attachment: scroll; } } /** * BCFC Custom Swiper Styles * Custom pagination, progress bar, navigation arrows, and slide effects */ /* ============================================ Custom Navigation Arrows ============================================ */ .bcfc-swiper__navigation { display: flex; align-items: center; justify-content: center; gap: 1rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; } .bcfc-swiper__nav-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid rgba(0, 74, 152, 0.3); border-radius: 50%; background: var(--bcfc-surface-raised, rgba(255, 255, 255, 0.9)); color: var(--bcfc-ink-link, #004a97); cursor: pointer; transition: all 0.3s ease; padding: 0; } .bcfc-swiper__nav-btn:hover { background: #004a97; border-color: #004a97; color: #fff; transform: scale(1.05); } .bcfc-swiper__nav-btn:active { transform: scale(0.95); } .bcfc-swiper__nav-btn:disabled { opacity: 0.5; cursor: not-allowed; } .bcfc-swiper__nav-btn--prev { margin-right: 0.5rem; } .bcfc-swiper__nav-btn--next { margin-left: 0.5rem; } .bcfc-home-hero-slider .bcfc-swiper__navigation { display: none !important; } .bcfc-home-hero-slider .bcfc-swiper__autoplay-progress, .bcfc-home-hero-slider .bcfc-swiper__slide-count { display: none !important; } .bcfc-home-hero-slider:not(.bcfc-home-hero-slider--dedicated-nav) .bcfc-swiper__navigation { inset: 50% 0 auto 0; left: 0; width: 100%; transform: translateY(-50%); justify-content: space-between; padding-inline: 0; pointer-events: none; } .bcfc-home-hero-slider .bcfc-swiper__nav-btn { pointer-events: auto; border-color: transparent; background: transparent; color: #fff; box-shadow: none; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); } .bcfc-home-hero-slider .bcfc-swiper__nav-btn:hover { background: transparent; border-color: transparent; color: #fff; opacity: .78; } /* RTL Support */ /* ============================================ Custom Pagination Styles ============================================ */ .bcfc-swiper__pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 1rem 0; } .bcfc-swiper__pagination .swiper-pagination-bullet { width: 12px; height: 12px; background: rgba(0, 74, 152, 0.3); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; opacity: 1; } .bcfc-swiper__pagination .swiper-pagination-bullet:hover { background: rgba(0, 74, 152, 0.6); transform: scale(1.2); } .bcfc-swiper__pagination .swiper-pagination-bullet-active { background: #004a97; width: 32px; border-radius: 6px; transform: scale(1.1); } /* Hero Slider Pagination Override */ .bcfc-home-hero-slider__pagination { bottom: 24px !important; z-index: 10; } .bcfc-home-hero-slider__pagination .swiper-pagination-bullet { width: auto; height: auto; background: transparent; opacity: 1; border: none; } .bcfc-home-hero-slider__pagination .swiper-pagination-bullet::after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--bcfc-surface-scrim, rgba(255, 255, 255, 0.5)); transition: all 0.5s ease; } .bcfc-home-hero-slider__pagination .swiper-pagination-bullet:hover::after { background: var(--bcfc-surface-scrim, rgba(255, 255, 255, 0.8)); } .bcfc-home-hero-slider__pagination .swiper-pagination-bullet-active { transform: scaleX(1.58); } .bcfc-home-hero-slider__pagination .swiper-pagination-bullet-active::after { width: 28px; height: 12px; border-radius: 6px; background: var(--bcfc-surface-raised, #fff); } /* ============================================ Autoplay Progress Bar ============================================ */ .bcfc-swiper__autoplay-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0, 0, 0, 0.1); z-index: 20; overflow: hidden; } .bcfc-swiper__autoplay-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #004a97 0%, #007bff 100%); transition: transform 0.1s linear; transform: scaleX(0); transform-origin: left center; } /* Hero Slider Progress Bar */ .bcfc-home-hero-slider .bcfc-swiper__autoplay-progress { height: 6px; background: rgba(255, 255, 255, 0.2); } .bcfc-home-hero-slider .bcfc-swiper__autoplay-progress-bar { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%); } /* ============================================ Slide Count Indicator ============================================ */ .bcfc-swiper__slide-count { position: absolute; bottom: 60px; right: 24px; display: flex; align-items: center; gap: 4px; font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.3); padding: 6px 12px; border-radius: 20px; backdrop-filter: blur(4px); z-index: 10; } .bcfc-swiper__slide-count-current { font-size: 1.125rem; font-weight: 700; } .bcfc-swiper__slide-count-total { font-size: 0.9375rem; opacity: 0.7; } /* ============================================ Slide Shadow Effects ============================================ */ .bcfc-card-carousel .swiper-slide { /* Never let the flex engine shrink a slide below the width Swiper sets inline from slidesPerView — otherwise slides squish to share the wrapper instead of overflowing/swiping (e.g. 6 slides crammed into one screen width on mobile). */ flex-shrink: 0; /* overflow-x:hidden + overflow-y:visible computes to overflow-y:auto, which clipped the top of cards lifted on hover — slides must not clip */ overflow: visible; /* Match the card's 22px radius so the hover box-shadow follows the card's rounded corners instead of the slide's square box (white corner wedges) */ border-radius: 22px; transition: box-shadow 0.3s ease, transform 0.3s ease; } /* Hover shadow lives on the card, not the slide: the card is what lifts on hover (article[class*="card"]:hover in bcfc-animations.css), so a slide-level shadow lags behind the moving card and leaves a bright unshadowed strip at its bottom */ .bcfc-card-carousel .swiper-slide .bcfc-content-card { border-radius: 22px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .bcfc-card-carousel .swiper-slide:hover .bcfc-content-card { box-shadow: 0 8px 24px rgba(14, 44, 92, 0.08); } .bcfc-card-carousel .swiper-slide-active { transform: translateY(-4px); } /* ============================================ Home hero slider: plain Swiper "slide" effect (was a hand-rolled !important-opacity crossfade that fought Swiper's own effect + the reveal choreography in home-hero-carousel.ts — removed; Swiper now owns the transition entirely via transform on .swiper-wrapper) ============================================ */ .bcfc-home-hero-slider__swiper { overflow: hidden; } /* ============================================ Fade Effect for New Hero Banner (bcfc-hero-banner) ============================================ */ .bcfc-hero-banner__swiper { overflow: hidden; } .bcfc-hero-banner__swiper .swiper-slide { opacity: 0 !important; transition: opacity 0.9s ease !important; visibility: hidden; } .bcfc-hero-banner__swiper .swiper-slide.swiper-slide-active { opacity: 1 !important; z-index: 2; visibility: visible; } .bcfc-hero-banner__swiper .swiper-slide-prev, .bcfc-hero-banner__swiper .swiper-slide-next { opacity: 0 !important; visibility: hidden; } /* Fade transition for banner content */ .bcfc-hero-banner__content { transition: opacity 0.6s ease, transform 0.6s ease; } .bcfc-hero-banner__swiper .swiper-slide:not(.swiper-slide-active) .bcfc-hero-banner__content { opacity: 0; transform: translateY(20px); } .bcfc-hero-banner__swiper .swiper-slide-active .bcfc-hero-banner__content { opacity: 1; transform: translateY(0); } /* ============================================ Slide Content Animation ============================================ */ @keyframes slideContentIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .slide-content-animate { animation: slideContentIn 0.6s ease forwards; } .bcfc-home-hero-slider__swiper .swiper-slide-active .bcfc-hero__content > *:nth-child(1) { animation-delay: 0.1s; } .bcfc-home-hero-slider__swiper .swiper-slide-active .bcfc-hero__content > *:nth-child(2) { animation-delay: 0.2s; } .bcfc-home-hero-slider__swiper .swiper-slide-active .bcfc-hero__content > *:nth-child(3) { animation-delay: 0.3s; } .bcfc-home-hero-slider__swiper .swiper-slide-active .bcfc-hero__content > *:nth-child(4) { animation-delay: 0.4s; } .bcfc-home-hero-slider__swiper .swiper-slide-active .bcfc-hero__content > *:nth-child(5) { animation-delay: 0.5s; } /* ============================================ Parallax Image Effect ============================================ */ .bcfc-home-hero-slider__image, .bcfc-home-hero-slider__video { transition: transform 0.3s ease-out; will-change: transform; } /* ============================================ Dynamic Dot Count Indicator ============================================ */ /* ============================================ Card Carousel Enhancements ============================================ */ .bcfc-card-carousel { position: relative; /* Headroom inside the swiper's overflow:hidden clip box so cards lifted on hover (translateY(-4px)) keep their top edge; margin compensates layout */ padding-top: 8px; margin-top: -8px; } .bcfc-card-carousel .bcfc-swiper__autoplay-progress { bottom: 0; height: 3px; } .bcfc-card-carousel:hover .bcfc-swiper__autoplay-progress-bar { animation-play-state: paused; } /* ============================================ Responsive Adjustments ============================================ */ @media (max-width: 768px) { .bcfc-swiper__nav-btn { width: 40px; height: 40px; } .bcfc-swiper__slide-count { bottom: 50px; right: 16px; font-size: 0.8125rem; padding: 4px 10px; } .bcfc-swiper__slide-count-current { font-size: 1rem; } .bcfc-home-hero-slider__pagination { bottom: 16px !important; } .bcfc-swiper__autoplay-progress { height: 3px; } /* Smaller pagination dots on mobile */ .bcfc-swiper__pagination .swiper-pagination-bullet { width: 8px; height: 8px; } .bcfc-swiper__pagination .swiper-pagination-bullet-active { width: 20px; } .bcfc-home-hero-slider__pagination .swiper-pagination-bullet::after { width: 8px; height: 8px; } .bcfc-home-hero-slider__pagination .swiper-pagination-bullet-active { width: 22px; } .bcfc-home-hero-slider__pagination .swiper-pagination-bullet-active::after { width: 16px; height: 8px; } .bcfc-swiper__pagination { gap: 6px; } } @media (min-width: 1200px) { .bcfc-swiper__navigation { gap: 1.5rem; } .bcfc-swiper__nav-btn { width: 56px; height: 56px; } } /* ============================================ Touch/Focus States ============================================ */ .bcfc-swiper__nav-btn:focus-visible { outline: 2px solid #004a97; outline-offset: 2px; } .bcfc-card-carousel__nav-btn:focus-visible { outline: 2px solid #004a97; outline-offset: 2px; } .bcfc-card-carousel:focus-within { outline: 2px solid rgba(0, 74, 152, 0.3); outline-offset: 4px; } /* Swiper adds these lock classes (via watchOverflow) once every slide already fits in the visible area at the current breakpoint — nothing left to scroll to, so hide the arrows/dots instead of showing controls that do nothing. */ .bcfc-swiper__nav-btn.swiper-button-lock, .bcfc-card-carousel__nav-btn.swiper-button-lock { display: none !important; } .bcfc-swiper__pagination.swiper-pagination-lock, .bcfc-card-carousel__pagination.swiper-pagination-lock { display: none !important; } /* ============================================ Print Styles ============================================ */ @media print { .bcfc-swiper__navigation, .bcfc-swiper__pagination, .bcfc-swiper__autoplay-progress, .bcfc-swiper__slide-count { display: none !important; } } /* ============================================================ Minimal line-style pagination — applies to ALL carousels. Converts every Swiper pagination dot into a thin line while keeping each carousel's own colour (themes set only the background/::after colour, which we leave untouched). High-specificity + !important so it wins over every per-page theme override without editing each one individually. ============================================================ */ .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet { /* TAP TARGET (2026-10-14): the visible line stays 18x4, but the BUTTON is a 40x40 hit area. The line is the content box — 18px inline / 11px block padding is transparent hit area, and background-clip keeps a theme's `background:` fill (card carousel) inside the line. A theme that paints on ::after instead (hero, promo) is matched by the ::after inset below. Measured on beta before: 18x4 (49 targets on the home page). */ box-sizing: border-box !important; width: 40px !important; height: 40px !important; padding: 18px 11px !important; background-clip: content-box !important; min-width: 0 !important; /* Without this, the global mobile touch-target rule (bcfc-responsive-fixes.css `[role="button"] { min-height: 44px }`) stretches every bullet to 44px since this rule never set min-height to override it. */ min-height: 0 !important; margin: 0 !important; /* Square: a radius would round off the hit area's corners too (hit-testing follows it). The visible line's 2px radius is on ::after; a theme that fills the button itself gets square ends. */ border-radius: 0 !important; transform: none !important; vertical-align: middle !important; opacity: 1 !important; } .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 52px !important; } /* UW-385: the interactive states keep the line-only paint. Any theme rule that sets the `background` SHORTHAND on :hover / :focus / :active (important or not) resets background-clip to border-box and fills the whole 40x40 hit area; the base rule above only ties it on specificity (0,3,0) and loses on source order. One extra class here (0,4,0) wins for every carousel, present and future, so a theme can recolour a hovered dot but can never grow it into a square. */ .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet:hover, .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet:focus, .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet:active { background-clip: content-box !important; } /* A row of 8+ bullets cannot hold 40px each on a 390px phone (12 x 40 = 480px), so a long row keeps the 40px height and narrows the inline padding: 26px pitch, 8px between the lines. */ .swiper-pagination-bullets:has(> .swiper-pagination-bullet:nth-child(8)) .swiper-pagination-bullet.swiper-pagination-bullet { width: 26px !important; padding-inline: 4px !important; } .swiper-pagination-bullets:has(> .swiper-pagination-bullet:nth-child(8)) .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 38px !important; } /* Carousels that paint the visible dot on a ::after pseudo: stretch it to fill the whole line (colour stays from the theme). */ .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet::after { position: absolute !important; inset: 18px 11px !important; width: auto !important; height: auto !important; border-radius: 2px !important; transform: none !important; } .swiper-pagination-bullets:has(> .swiper-pagination-bullet:nth-child(8)) .swiper-pagination-bullet.swiper-pagination-bullet::after { inset-inline: 4px !important; } /* The padding above IS the spacing now, so a row's own gap would double it and wrap a 7-bullet row on a phone; and the hero's row is absolutely positioned at left:50%, so its shrink-to-fit width is half the hero and must not wrap either. */ .swiper-pagination-bullets.swiper-pagination-horizontal { gap: 0 !important; white-space: nowrap; } /** * BCFC Responsive Fixes * Comprehensive mobile responsiveness patches */ /* ============================================ 1. GLOBAL MOBILE FIXES ============================================ */ /* Prevent horizontal overflow on all pages. ------------------------------------------------------------------------------ `overflow-x: hidden` HERE IS WHAT BREAKS EVERY `position: sticky` ON THE SITE. A non-visible overflow on makes it a scroll container, so a sticky descendant sticks to — which never scrolls — instead of to the viewport, and it simply scrolls away. Measured in real Chromium at 1280x800 with this exact ancestor chain: at scrollY 1500 a `sticky; top:104px` bar sat at top:-800 with `hidden`, and at top:104 (correctly pinned) with `clip`. `overflow-x: clip` clips exactly the same way and still suppresses the horizontal scrollbar, but it does NOT create a scroll container, so sticky keeps working. The only thing it gives up is programmatic/user horizontal scrolling of the element, which is precisely what this rule exists to forbid. Kept behind @supports rather than swapped outright: `overflow: clip` is Safari 16+, so on Safari 15 and older the declaration would be dropped and the page would gain the horizontal scrollbar this rule prevents. Old Safari therefore keeps `hidden` — no sticky, but no regression either — and every current browser gets `clip`. This is a global change on purpose; scoping it per page meant every template that wants a sticky bar had to re-discover the same trap. ------------------------------------------------------------------------------ */ html, body { overflow-x: hidden; max-width: 100vw; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } } /* Prevent iOS zoom on form focus */ @media (width < 768px) { input, select, textarea { font-size: 1rem !important; } } /* Touch targets minimum 44px — every standalone control EXCEPT decorative indicators, which are exempted by convention below. Why the exemption exists: a carousel dot is a real