:root{--orange:#E8591A;--orange2:#FF7A1A;--gold:#F6B73C;--cream:#FDFAF4;--beige:#F5EFE6;--navy:#0D1B2A;--blue:#1A4A7A;--green:#17683F;--ink:#1A2332;--muted:#667085;--line:rgba(13,27,42,.11);--display:'Playfair Display',Georgia,serif;--body:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',monospace} *{box-sizing:border-box}html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);overflow-x:hidden}a{text-decoration:none;color:inherit}img,svg,iframe{max-width:100%}.container{width:min(1240px,calc(100% - 40px));margin-inline:auto}.sticky-shell{position:sticky;top:0;z-index:999;background:var(--cream);box-shadow:0 5px 25px rgba(13,27,42,.08)}.top-runner{height:30px;background:linear-gradient(90deg,#c94312,var(--orange),#f27c22);color:#fff;overflow:hidden}.runner-track{display:flex;width:max-content;height:100%;align-items:center;animation:runner 38s linear infinite;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.runner-track span{white-space:nowrap;padding:0 26px;border-right:1px solid rgba(255,255,255,.35)}.top-runner:hover .runner-track{animation-play-state:paused}@keyframes runner{to{transform:translateX(-50%)}}.site-header{height:70px;width:min(1360px,calc(100% - 24px));margin:auto;display:flex;align-items:center;gap:16px;padding:8px 12px;background:rgba(253,250,244,.97);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:215px}.brand-logo-wrap{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:5px;background:#fff;border:2px solid rgba(232,89,26,.28);box-shadow:0 8px 22px rgba(13,27,42,.11)}.brand-logo-wrap img{width:100%;height:100%;object-fit:contain}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy b{font-family:var(--display);font-size:16px}.brand-copy small{font-size:8px;letter-spacing:.11em;margin-top:4px;color:var(--muted);white-space:nowrap}.nav-menu{display:flex;align-items:center;justify-content:flex-end;gap:1px;min-width:0;flex:1}.nav-link{font-size:11.3px;font-weight:700;color:#526071;padding:8px 7px;border-radius:8px;white-space:nowrap}.nav-link:hover,.nav-link.active{color:var(--orange);background:rgba(232,89,26,.08)}.nav-action{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;padding:9px 13px;font-size:11px;font-weight:800;margin-left:5px}.donate-action{background:var(--orange);color:#fff}.portal-login{background:var(--navy);color:#fff}.nav-toggle{display:none;border:0;background:transparent;padding:8px;margin-left:auto}.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);margin:5px}.mobile-only-link{display:none}.social-rail{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:8px}.social-rail a,.footer-social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px rgba(13,27,42,.16);transition:.25s}.social-rail a:hover,.footer-social a:hover{transform:translateY(-3px) scale(1.05)}.social-rail svg,.footer-social svg{width:21px;height:21px}.instagram{background:radial-gradient(circle at 30% 110%,#ffd36b,#f34b4b 42%,#c1269d 68%,#325ce8)}.facebook{background:#1877f2}.youtube{background:#ff0000}.linkedin{background:#0a66c2}.hero{width:min(1240px,calc(100% - 40px));margin:auto;padding:34px 0 28px;display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center;min-height:610px}.hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:10px}.hero-eyebrow:before{content:'';width:28px;height:2px;background:var(--orange)}.hero h1{font-family:var(--display);font-size:clamp(48px,5.7vw,78px);line-height:.96;letter-spacing:-.045em;margin:18px 0 20px;color:var(--navy)}.hero h1 em{color:var(--orange)}.hero-desc{font-size:17px;line-height:1.72;color:var(--muted);max-width:520px}.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin:28px 0 26px}.premium-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:800;transition:.25s;min-height:50px}.premium-btn.primary{background:linear-gradient(135deg,var(--orange2),#c94312);color:#fff;box-shadow:0 14px 30px rgba(232,89,26,.3)}.premium-btn.secondary{background:#fff;color:var(--navy);border:1px solid rgba(232,89,26,.22);box-shadow:0 12px 28px rgba(13,27,42,.09)}.premium-btn:hover{transform:translateY(-3px)}.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.trust-badge{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:14px;background:linear-gradient(145deg,#fff,#fff5e9);border:1px solid rgba(232,89,26,.16);box-shadow:0 10px 24px rgba(13,27,42,.07);font-size:11px;font-weight:800;opacity:0;transform:scale(.75) translateY(8px);animation:badgePop .55s cubic-bezier(.2,.9,.25,1.3) forwards}.trust-badge:nth-child(2){animation-delay:.18s}.trust-badge:nth-child(3){animation-delay:.36s}.trust-badge i{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-style:normal}@keyframes badgePop{to{opacity:1;transform:none}}.hero-media{position:relative;min-width:0}.hero-frame{position:relative;border-radius:32px;padding:12px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,245,230,.7));border:1px solid rgba(232,89,26,.17);box-shadow:0 28px 70px rgba(13,27,42,.16);overflow:hidden}.hero-slider{position:relative;aspect-ratio:1.03/1;overflow:hidden;border-radius:24px}.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .8s ease,transform 5s ease}.hero-slide.active{opacity:1;transform:scale(1)}.hero-dots{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:7px;z-index:3}.hero-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55)}.hero-dot.active{background:var(--orange);transform:scale(1.3)}.floating-stat{position:absolute;background:rgba(255,255,255,.94);border:1px solid rgba(232,89,26,.14);border-radius:18px;padding:15px 18px;box-shadow:0 18px 38px rgba(13,27,42,.14);z-index:4}.floating-stat b{display:block;font-family:var(--display);font-size:30px;color:var(--orange)}.floating-stat span{font-size:11px;font-weight:800}.fs-a{right:-20px;top:50px}.fs-b{left:-20px;bottom:54px}.section{padding:66px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange)}.section-title{font-family:var(--display);font-size:clamp(38px,4.5vw,60px);line-height:1;letter-spacing:-.035em;margin:8px 0;color:var(--navy)}.section-title em{color:var(--orange)}.section-sub{color:var(--muted);line-height:1.65;max-width:470px}.stats-section{background:linear-gradient(135deg,#091827,#102b47 55%,#14263a);padding:38px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat-card{position:relative;overflow:hidden;border-radius:24px;padding:26px 20px;text-align:center;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 45px rgba(0,0,0,.22);transform:perspective(700px) rotateX(3deg)}.stat-card:after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(246,183,60,.28),transparent 70%);right:-40px;top:-50px}.stat-icon{font-size:30px}.stat-number{display:block;font-family:var(--display);font-size:42px;color:#ff6c2b;margin-top:8px}.stat-label{color:rgba(255,255,255,.78);font-size:12px;font-weight:700}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}.about-image{border-radius:28px;box-shadow:0 24px 60px rgba(13,27,42,.15);border:10px solid #fff}.focus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}.focus-card{position:relative;display:flex;align-items:center;gap:13px;padding:16px;border-radius:18px;background:linear-gradient(145deg,#fff,#fff7ed);border:1px solid rgba(232,89,26,.14);box-shadow:0 12px 28px rgba(13,27,42,.07);transition:.28s}.focus-card:hover{transform:translateY(-5px) rotateX(3deg);box-shadow:0 18px 38px rgba(232,89,26,.14)}.focus-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,#fff2df,#ffd7ad);box-shadow:inset 0 1px 0 #fff,0 9px 20px rgba(232,89,26,.15)}.quote{padding:20px;border-left:3px solid var(--orange);background:#f5f0e9;border-radius:0 16px 16px 0;font-family:var(--display);font-style:italic}.carousel-wrap{position:relative}.carousel-viewport{overflow:hidden;padding:10px 2px 28px}.carousel-track{display:flex;gap:18px;will-change:transform}.carousel-card{flex:0 0 calc((100% - 54px)/4);min-width:0}.carousel-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:10px}.carousel-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(232,89,26,.22);background:#fff;color:var(--orange);font-size:20px;box-shadow:0 9px 20px rgba(13,27,42,.08);cursor:pointer}.carousel-dots{display:flex;gap:6px}.carousel-dots button{width:8px;height:8px;border:0;border-radius:50%;background:#d6cdc2}.carousel-dots button.active{background:var(--orange);transform:scale(1.35)}.programs-section{background:linear-gradient(180deg,#f7f1e8,#fffaf4)}.program-card{height:100%;padding:25px;border-radius:25px;background:linear-gradient(145deg,#fff,#fff7ee);border:1px solid rgba(232,89,26,.13);box-shadow:0 18px 42px rgba(13,27,42,.09);transition:.3s;position:relative;overflow:hidden}.program-card:hover{transform:translateY(-8px) rotateY(-2deg)}.program-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:31px;background:linear-gradient(145deg,#fff4dc,#ffd8ae);box-shadow:inset 0 2px 1px #fff,0 12px 22px rgba(232,89,26,.18)}.program-card h3{font-family:var(--display);font-size:23px;margin:18px 0 10px}.program-card p{font-size:14px;line-height:1.65;color:var(--muted)}.project-card{height:100%;border-radius:27px;overflow:hidden;background:#fff;border:1px solid rgba(232,89,26,.13);box-shadow:0 22px 50px rgba(13,27,42,.11);transition:.3s}.project-card:hover{transform:translateY(-8px) rotateY(2deg)}.project-card img{width:100%;height:245px;object-fit:cover}.project-body{padding:22px}.date-badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:#fff1e4;color:var(--orange);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.project-body h3{font-family:var(--display);font-size:23px;margin:12px 0 10px}.project-body p{color:var(--muted);font-size:14px;line-height:1.6}.text-link{display:inline-flex;margin-top:15px;color:var(--orange);font-weight:800}.campaign-section{background:linear-gradient(135deg,#f7f3e8,#fffaf4);border-block:1px solid rgba(13,27,42,.06)}.campaign-card{height:100%;border-radius:28px;background:#fff;border:1px solid rgba(13,27,42,.07);box-shadow:0 22px 50px rgba(13,27,42,.11);padding:14px;position:relative}.campaign-img{position:relative}.campaign-img img{width:100%;height:190px;object-fit:cover;border-radius:19px}.campaign-badge,.campaign-percent{position:absolute;top:10px;padding:8px 11px;border-radius:999px;color:#fff;font-size:10px;font-weight:900;z-index:2}.campaign-badge{left:10px;background:linear-gradient(135deg,#ff9b00,var(--orange))}.campaign-percent{right:10px;background:linear-gradient(135deg,#ff6747,#e44125)}.campaign-body{padding:18px 5px 7px}.campaign-body h3{font-size:19px;line-height:1.25;margin:0 0 16px;min-height:48px}.campaign-bar{height:6px;border-radius:99px;background:#f7d8d1;overflow:hidden}.campaign-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),#2d9e66);border-radius:99px}.campaign-nums{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0;color:#526071;font-size:12px}.campaign-raised{color:#333}.campaign-pct{color:var(--orange)}.campaign-btn{display:flex;justify-content:center;align-items:center;margin:18px auto 0;width:max-content;min-width:140px;padding:11px 20px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:900;box-shadow:0 12px 24px rgba(23,104,63,.23)}.campaign-live-meta{display:flex;justify-content:center;gap:12px;font-size:10px;color:var(--muted);margin-top:11px}.units-section{padding:42px 0;background:#fff}.unit-viewport{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.unit-track{display:flex;width:max-content;gap:12px;animation:unitRun 36s linear infinite}.unit-pill{padding:13px 18px;border-radius:999px;background:linear-gradient(145deg,#fff4e6,#fff);border:1px solid rgba(232,89,26,.15);box-shadow:0 9px 20px rgba(13,27,42,.06);font-weight:800;white-space:nowrap}@keyframes unitRun{to{transform:translateX(-50%)}}.members-section{background:#fff}.member-card{height:100%;text-align:center;padding:25px;border-radius:27px;background:linear-gradient(145deg,#fff,#fff5e8);border:1px solid rgba(232,89,26,.13);box-shadow:0 20px 42px rgba(13,27,42,.09)}.member-photo{width:110px;height:110px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--orange),var(--gold));color:#fff;font-family:var(--display);font-size:33px;border:7px solid #fff;box-shadow:0 16px 30px rgba(232,89,26,.22)}.member-card h3{font-family:var(--display);font-size:24px;margin:0}.role{display:inline-flex;margin:8px 0 12px;padding:6px 10px;border-radius:999px;background:#fff0e2;color:var(--orange);font-size:10px;font-weight:900}.member-card p{font-size:13px;color:var(--muted);line-height:1.55}.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.cta-card{padding:42px;border-radius:32px;color:#fff;min-height:360px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 28px 60px rgba(13,27,42,.15)}.cta-card.volunteer{background:linear-gradient(145deg,#0D1B2A,#1A4A7A)}.cta-card.donate{background:linear-gradient(145deg,#a52f0d,#f04f14)}.cta-card h2{font-family:var(--display);font-size:clamp(34px,4vw,52px);line-height:1.05}.cta-card p{color:rgba(255,255,255,.82);line-height:1.7}.cta-card .premium-btn{margin-top:24px;background:#fff;color:var(--navy)}.widget-section{padding-top:30px}.widget-shell{padding:24px;border-radius:24px;background:#fff;border:1px solid rgba(13,27,42,.09);box-shadow:0 20px 45px rgba(13,27,42,.08);overflow:hidden}.instagram-shell{padding:15px;max-height:410px}.gallery-card{height:100%;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 22px 50px rgba(13,27,42,.12);border:1px solid rgba(232,89,26,.12)}.gallery-card img{width:100%;height:330px;object-fit:cover;transition:.35s}.gallery-card:hover img{transform:scale(1.045)}.gallery-card figcaption{padding:17px}.gallery-card b{font-family:var(--display);font-size:20px}.gallery-card span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.footer{background:linear-gradient(135deg,#07111f,#0d2135);color:#fff;padding:64px 0 22px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:36px}.footer-brand{display:flex;align-items:center;gap:12px}.footer-logo-wrap{width:58px;height:58px;border-radius:50%;padding:6px;background:#fff;display:grid;place-items:center}.footer-logo-wrap img{width:100%;height:100%;object-fit:contain}.footer-brand b{display:block;font-family:var(--display);font-size:22px}.footer-brand span{font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.64)}.footer p{color:rgba(255,255,255,.7);line-height:1.65}.footer h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}.footer a{display:block;color:rgba(255,255,255,.78);font-size:13px;margin:9px 0}.footer a:hover{color:#fff}.footer-social{display:flex;gap:8px;margin-top:18px}.footer-social a{margin:0}.footer-bottom{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-top:22px;margin-top:35px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.58)}.policy-links{display:flex;gap:14px;flex-wrap:wrap}.wa-float{position:fixed;right:18px;bottom:18px;z-index:800;display:flex;align-items:center;gap:8px;padding:13px 17px;border-radius:999px;background:#15ad5b;color:#fff;font-weight:800;box-shadow:0 15px 35px rgba(21,173,91,.3)}.wa-float svg{width:22px}.view-all{text-align:center;margin-top:25px}.reveal{opacity:0;transform:translateY(22px);transition:.7s}.reveal.in{opacity:1;transform:none} @media(max-width:1180px){.nav-menu{display:none}.nav-toggle{display:block}.nav-menu.open{position:absolute;top:100px;left:12px;right:12px;display:flex;flex-direction:column;align-items:stretch;background:#fff;padding:14px;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 65px rgba(13,27,42,.18);max-height:calc(100vh - 120px);overflow:auto}.nav-menu.open a{width:100%;padding:12px}.mobile-only-link{display:block!important}.site-header{position:relative}.social-rail{display:none}.carousel-card{flex-basis:calc((100% - 18px)/2)}.footer-grid{grid-template-columns:1fr 1fr}.hero{gap:32px}} @media(max-width:780px){.container,.hero{width:min(100% - 24px,1240px)}.hero{grid-template-columns:1fr;padding:28px 0 36px;min-height:0}.hero h1{font-size:46px}.hero-media{order:2}.fs-a{right:6px}.fs-b{left:6px}.trust-row{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr}.focus-grid{grid-template-columns:1fr 1fr}.section-head{align-items:flex-start;flex-direction:column}.carousel-card{flex-basis:100%}.cta-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}.gallery-card img{height:360px}.top-runner{height:28px}.site-header{height:64px}.brand{min-width:0}.brand-copy b{font-size:14px}.brand-copy small{font-size:7px}.brand-logo-wrap{width:43px;height:43px}.nav-menu.open{top:92px}.wa-float{font-size:0;width:54px;height:54px;padding:0;justify-content:center}.instagram-shell{max-height:none}} @media(max-width:480px){.hero h1{font-size:40px}.stats-grid{grid-template-columns:1fr}.focus-grid{grid-template-columns:1fr}.hero-actions .premium-btn{width:100%}.floating-stat{padding:11px 13px}.floating-stat b{font-size:24px}.section{padding:50px 0}.cta-card{padding:30px 23px;min-height:auto}.gallery-card img{height:300px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}} /* FINAL HEADER, LOGO, ICON AND SLIDER FIXES - 2026-06-16 */ :root{--bkf-fixed-header-height:100px} html{scroll-padding-top:calc(var(--bkf-fixed-header-height) + 16px)} body{padding-top:var(--bkf-fixed-header-height)} .sticky-shell{ position:fixed!important; inset:0 0 auto 0!important; width:100%!important; z-index:10000!important; transform:translateZ(0); background:rgba(253,250,244,.98)!important; box-shadow:0 8px 30px rgba(13,27,42,.13)!important; } .site-header{position:relative!important} .nav-menu.open{top:100%!important;z-index:10020!important} /* Remove the coloured/white circle around the supplied logo. */ .brand-logo-wrap, .footer-logo-wrap{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; overflow:visible!important; } .brand-logo-wrap{width:52px!important;height:52px!important;border-radius:0!important} .footer-logo-wrap{width:66px!important;height:66px!important;border-radius:0!important} .brand-logo-wrap img, .footer-logo-wrap img{ width:100%!important; height:100%!important; object-fit:contain!important; display:block!important; filter:drop-shadow(0 7px 12px rgba(0,0,0,.16)); } /* Keep every social icon centered inside its own box. */ .social-rail{z-index:9000!important} .social-rail a, .footer-social a{ display:grid!important; place-items:center!important; width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; flex:0 0 42px!important; padding:0!important; margin:0!important; line-height:0!important; overflow:hidden!important; position:relative!important; } .social-rail svg, .footer-social svg{ display:block!important; width:21px!important; height:21px!important; min-width:21px!important; min-height:21px!important; margin:auto!important; overflow:visible!important; } .footer-social{align-items:center!important;flex-wrap:wrap!important} /* WhatsApp icon and label stay fully inside the pill. */ .wa-float{ overflow:hidden!important; isolation:isolate; min-height:54px!important; padding:9px 18px 9px 10px!important; gap:10px!important; line-height:1!important; } .wa-icon{ width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; display:grid!important; place-items:center!important; border-radius:50%!important; background:rgba(255,255,255,.16)!important; overflow:hidden!important; flex:0 0 36px!important; } .wa-icon svg{ display:block!important; width:23px!important; height:23px!important; min-width:23px!important; margin:0!important; } .wa-label{display:block;white-space:nowrap} /* Quicker, cleaner custom carousel response. */ .carousel-viewport{scroll-behavior:smooth} .carousel-track{transition:transform .35s ease} @media(max-width:780px){ :root{--bkf-fixed-header-height:92px} .brand-logo-wrap{width:44px!important;height:44px!important} .wa-float{width:56px!important;height:56px!important;min-height:56px!important;padding:0!important;border-radius:50%!important} .wa-icon{width:56px!important;height:56px!important;min-width:56px!important;background:transparent!important} .wa-label{display:none!important} } /* Full wordmark header logo: use the supplied high-res PNG, not duplicate text. */ .site-header .brand{ min-width:260px!important; width:260px!important; gap:0!important; flex:0 0 260px!important; } .site-header .brand-copy, .site-header .brand > span:not(.brand-logo-wrap){ display:none!important; } .site-header .brand-logo-wrap{ width:244px!important; height:76px!important; max-width:244px!important; max-height:76px!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding:0!important; overflow:visible!important; } .site-header .brand-logo-wrap img, .site-header .brand > img{ width:100%!important; height:100%!important; object-fit:contain!important; display:block!important; image-rendering:auto; filter:drop-shadow(0 6px 10px rgba(13,27,42,.1)); } .site-header{ min-height:86px!important; height:86px!important; } :root{--bkf-fixed-header-height:116px} @media(max-width:1180px){ .site-header .brand{ min-width:220px!important; width:220px!important; flex-basis:220px!important; } .site-header .brand-logo-wrap{ width:210px!important; height:66px!important; } } @media(max-width:780px){ :root{--bkf-fixed-header-height:104px} .site-header{ min-height:74px!important; height:74px!important; } .site-header .brand{ min-width:174px!important; width:174px!important; flex-basis:174px!important; } .site-header .brand-logo-wrap{ width:166px!important; height:58px!important; } } .member-photo{ overflow:hidden!important; } .member-photo img{ width:100%!important; height:100%!important; object-fit:cover!important; display:block!important; } /* Balanced BKF wordmark sizing - keeps logo crisp without dominating the header. */ .common-header .brand, .site-header .brand{ min-width:210px!important; width:210px!important; flex:0 0 210px!important; justify-content:flex-start!important; gap:0!important; } .common-header .brand-copy, .site-header .brand-copy, .common-header .brand > span:not(.brand-logo-wrap), .site-header .brand > span:not(.brand-logo-wrap){ display:none!important; } .common-header .brand-logo-wrap, .site-header .brand-logo-wrap{ width:196px!important; height:58px!important; max-width:196px!important; max-height:58px!important; display:grid!important; place-items:center!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding:0!important; overflow:visible!important; } .common-header .brand-logo-wrap img, .site-header .brand-logo-wrap img, .site-header .brand > img{ width:100%!important; height:100%!important; object-fit:contain!important; display:block!important; filter:drop-shadow(0 3px 7px rgba(13,27,42,.12))!important; } .common-header.site-header, .site-header{ min-height:72px!important; height:72px!important; align-items:center!important; } :root{--bkf-fixed-header-height:102px} @media(max-width:1180px){ .common-header .brand, .site-header .brand{ min-width:180px!important; width:180px!important; flex-basis:180px!important; } .common-header .brand-logo-wrap, .site-header .brand-logo-wrap{ width:170px!important; height:52px!important; } } @media(max-width:760px){ :root{--bkf-fixed-header-height:92px} .common-header.site-header, .site-header{ min-height:64px!important; height:64px!important; } .common-header .brand, .site-header .brand{ min-width:150px!important; width:150px!important; flex-basis:150px!important; } .common-header .brand-logo-wrap, .site-header .brand-logo-wrap{ width:142px!important; height:46px!important; } } /* Free owned Google review and Instagram replacements. */ .owned-review-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:18px!important; } .owned-review-card{ min-height:230px; display:flex; flex-direction:column; gap:13px; padding:24px; border-radius:22px; background:linear-gradient(145deg,#fff,#fff7ed); border:1px solid rgba(232,89,26,.14); box-shadow:0 16px 38px rgba(13,27,42,.08); } .owned-review-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .owned-review-top .stars,.stars{ color:#ffb703; letter-spacing:2px; font-weight:900; } .owned-review-top b{ padding:7px 10px; border-radius:999px; background:#eaf4ff; color:#0f4c81; font-size:12px; } .owned-review-card p{ margin:0; color:#334155; font-size:15px; line-height:1.65; } .owned-review-card h3{ margin:auto 0 0; color:var(--navy); font-size:20px; } .owned-review-card small{ color:var(--muted); line-height:1.5; } .bkf-instagram-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:14px!important; } .bkf-insta-card{ position:relative; min-height:250px; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 16px 36px rgba(13,27,42,.1); } .bkf-insta-card img{ width:100%; height:100%; min-height:250px; object-fit:cover; display:block; transition:transform .35s ease; } .bkf-insta-card span{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; min-height:38px; padding:9px 12px; border-radius:14px; background:rgba(13,27,42,.78); color:#fff; font-size:13px; font-weight:900; backdrop-filter:blur(10px); } .bkf-insta-card:hover img{ transform:scale(1.05); } @media(max-width:980px){ .owned-review-grid{grid-template-columns:1fr 1fr} .bkf-instagram-grid{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .owned-review-grid,.bkf-instagram-grid{grid-template-columns:1fr;padding:12px!important} .owned-review-card{padding:20px;min-height:auto} .bkf-insta-card,.bkf-insta-card img{min-height:230px} } /* Legacy screenshot popup styles retired; the invitation now uses live content. */ .sponsor-home-pop { left: 72px !important; right: auto !important; bottom: 92px; width: min(620px, calc(100vw - 108px)); aspect-ratio: 1610 / 977; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 28px !important; background: transparent !important; box-shadow: none !important; } .sponsor-home-pop-link { display: block !important; width: 100%; height: 100%; padding: 0 !important; overflow: hidden; border-radius: 28px; background: transparent !important; box-shadow: 0 22px 48px rgba(9, 29, 49, .28) !important; } .sponsor-home-pop-link > * { display: none !important; } .sponsor-home-pop-link::after { display: none !important; } .sponsor-home-pop-close { position: absolute !important; z-index: 2; top: 0 !important; right: 0 !important; width: 14% !important; height: 25% !important; min-width: 52px; min-height: 52px; margin: 0 !important; padding: 0 !important; opacity: 0; cursor: pointer; } @media(max-width:700px){ .sponsor-home-pop { left: 14px !important; bottom: 90px; width: calc(100vw - 28px); max-width: 440px; } .sponsor-home-pop-link { border-radius: 20px; } } /* Footer brand: show the supplied BKF logo only, without duplicate text. */ .footer-brand{align-items:center!important;gap:0!important} .footer-brand > div{display:none!important} .footer-logo-wrap{width:190px!important;height:72px!important;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important} .footer-logo-wrap img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;filter:drop-shadow(0 5px 10px rgba(0,0,0,.18))!important} @media(max-width:760px){.footer-logo-wrap{width:170px!important;height:64px!important}} /* Footer logo should read as a white mark on the dark footer. */ .footer .footer-logo-wrap img, .common-footer .footer-logo-wrap img{ filter:brightness(0) invert(1) drop-shadow(0 5px 10px rgba(0,0,0,.18))!important; } /* Final header logo fit: preserve PNG ratio and keep it inside the header line. */ .common-header.site-header, .site-header{ min-height:72px!important; height:72px!important; overflow:hidden!important; align-items:center!important; } .common-header .brand, .site-header .brand{ min-width:185px!important; width:185px!important; flex:0 0 185px!important; height:56px!important; display:flex!important; align-items:center!important; overflow:hidden!important; } .common-header .brand-logo-wrap, .site-header .brand-logo-wrap{ width:180px!important; height:56px!important; max-width:180px!important; max-height:56px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; overflow:hidden!important; } .common-header .brand-logo-wrap img, .site-header .brand-logo-wrap img, .site-header .brand > img{ width:auto!important; height:auto!important; max-width:180px!important; max-height:52px!important; object-fit:contain!important; display:block!important; filter:none!important; transform:none!important; } @media(max-width:760px){ .common-header.site-header, .site-header{min-height:64px!important;height:64px!important} .common-header .brand, .site-header .brand{min-width:150px!important;width:150px!important;flex-basis:150px!important;height:50px!important} .common-header .brand-logo-wrap, .site-header .brand-logo-wrap{width:146px!important;height:50px!important;max-width:146px!important;max-height:50px!important} .common-header .brand-logo-wrap img, .site-header .brand-logo-wrap img{max-width:146px!important;max-height:46px!important} } /* Footer logo correction: keep original logo colors, place it on a clean white background. */ .footer .footer-logo-wrap, .common-footer .footer-logo-wrap{ width:198px!important; height:78px!important; padding:8px!important; border-radius:10px!important; background:#fff!important; border:1px solid rgba(255,255,255,.85)!important; box-shadow:0 10px 24px rgba(0,0,0,.18)!important; overflow:hidden!important; } .footer .footer-logo-wrap img, .common-footer .footer-logo-wrap img{ width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; filter:none!important; } @media(max-width:760px){ .footer .footer-logo-wrap, .common-footer .footer-logo-wrap{width:176px!important;height:70px!important;padding:7px!important} } /* Auto-slide Google review cards from right to left. */ .owned-review-slider{ overflow:hidden!important; padding:18px!important; } .owned-review-track{ display:flex; width:max-content; gap:18px; animation:ownedReviewSlide 28s linear infinite; will-change:transform; } .owned-review-slider:hover .owned-review-track{ animation-play-state:paused; } .owned-review-track .owned-review-card{ flex:0 0 clamp(280px,30vw,350px); width:clamp(280px,30vw,350px); } @keyframes ownedReviewSlide{ from{transform:translateX(0)} to{transform:translateX(calc(-50% - 9px))} } @media(max-width:600px){ .owned-review-slider{padding:12px!important} .owned-review-track{gap:14px;animation-duration:24s} .owned-review-track .owned-review-card{flex-basis:82vw;width:82vw} } @media(prefers-reduced-motion:reduce){ .owned-review-track{animation:none} } /* Keep the review slider loop aligned with its current gap size. */ .owned-review-track{--review-shift-fix:9px;gap:18px} @keyframes ownedReviewSlide{ from{transform:translateX(0)} to{transform:translateX(calc(-50% - var(--review-shift-fix)))} } /* Home sponsor invitation: left-side education card, kept clear of the social rail. */ .sponsor-home-pop{left:72px;right:auto;bottom:102px;width:min(398px,calc(100vw - 92px));border:2px solid rgba(255,126,47,.52);border-radius:22px;background:linear-gradient(105deg,rgba(255,253,248,.98) 0%,rgba(255,244,232,.96) 100%);box-shadow:0 22px 48px rgba(9,29,49,.22),inset 0 1px 0 rgba(255,255,255,.92)} .sponsor-home-pop-link{grid-template-columns:58px minmax(0,1fr);gap:13px;padding:17px 18px 17px 20px} .sponsor-home-pop-link:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(115deg,transparent 55%,rgba(255,120,43,.14));pointer-events:none} .sponsor-home-pop-icon{width:58px;height:58px;border-radius:18px;font-size:22px} .sponsor-home-pop b{font-size:17px;line-height:1.1;color:#10243a}.sponsor-home-pop small{font-size:12px;line-height:1.4;margin-top:5px}.sponsor-home-pop-link>strong{grid-column:2;justify-self:start;margin-top:4px;padding:10px 15px;border-radius:999px;background:linear-gradient(135deg,#ff7a32,#e84c10);color:#fff;font-size:12px;box-shadow:0 9px 20px rgba(232,76,16,.24)} .sponsor-home-pop-close{z-index:2} @media(max-width:700px){.sponsor-home-pop{left:14px;bottom:92px;width:min(350px,calc(100vw - 28px))}.sponsor-home-pop-link{padding:14px}.sponsor-home-pop b{font-size:15px}} @media(max-width:600px){.owned-review-track{--review-shift-fix:7px;gap:14px}} /* Rounded inset header container to match inner pages. */ .sticky-shell .site-header.common-header, .sticky-shell .common-header.site-header{ width:min(1420px,calc(100% - 128px))!important; margin:12px auto 0!important; border-radius:22px!important; border:1px solid rgba(13,27,42,.08)!important; background:rgba(253,250,244,.97)!important; box-shadow:0 18px 45px rgba(13,27,42,.10)!important; overflow:visible!important; } .sticky-shell .site-header.common-header .brand, .sticky-shell .common-header.site-header .brand, .sticky-shell .site-header.common-header .brand-logo-wrap, .sticky-shell .common-header.site-header .brand-logo-wrap{ overflow:hidden!important; } :root{--bkf-fixed-header-height:114px} @media(max-width:1180px){ .sticky-shell .site-header.common-header, .sticky-shell .common-header.site-header{ width:calc(100% - 24px)!important; border-radius:18px!important; } } @media(max-width:760px){ :root{--bkf-fixed-header-height:104px} .sticky-shell .site-header.common-header, .sticky-shell .common-header.site-header{ width:calc(100% - 18px)!important; margin-top:8px!important; border-radius:16px!important; } } /* Match homepage WhatsApp floating button alignment with inner pages. */ .wa-float{ right:26px!important; bottom:26px!important; width:auto!important; height:58px!important; min-width:176px!important; min-height:58px!important; padding:0 18px!important; gap:10px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border-radius:999px!important; background:linear-gradient(135deg,#25D366,#128C7E)!important; color:#fff!important; font-size:16px!important; font-weight:950!important; line-height:1!important; letter-spacing:.01em!important; box-shadow:0 18px 50px rgba(18,140,126,.38),0 8px 22px rgba(15,23,42,.18)!important; border:2px solid rgba(255,255,255,.72)!important; text-decoration:none!important; overflow:hidden!important; } .wa-float .wa-icon{ width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; display:grid!important; place-items:center!important; border-radius:50%!important; background:rgba(255,255,255,.18)!important; border:1px solid rgba(255,255,255,.32)!important; line-height:0!important; color:#fff!important; } .wa-float .wa-icon svg{ width:22px!important; height:22px!important; display:block!important; margin:0!important; flex:0 0 auto!important; } .wa-float .wa-label{ display:block!important; white-space:nowrap!important; line-height:1!important; } @media(max-width:760px){ .wa-float{ right:12px!important; bottom:14px!important; min-width:150px!important; height:52px!important; min-height:52px!important; padding:0 14px!important; font-size:14px!important; border-radius:999px!important; } .wa-float .wa-icon{ width:30px!important; height:30px!important; min-width:30px!important; min-height:30px!important; background:rgba(255,255,255,.18)!important; } .wa-float .wa-icon svg{width:20px!important;height:20px!important} .wa-float .wa-label{display:block!important} } /* Final site-wide header logo containment: prevent logo from spilling outside the header. */ .site-header .brand, .common-header .brand, .sticky-shell .site-header.common-header .brand, .sticky-shell .common-header.site-header .brand{ min-width:164px!important; width:164px!important; flex:0 0 164px!important; height:52px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:0!important; overflow:hidden!important; } .site-header .brand-logo-wrap, .common-header .brand-logo-wrap, .sticky-shell .site-header.common-header .brand-logo-wrap, .sticky-shell .common-header.site-header .brand-logo-wrap{ width:156px!important; height:50px!important; max-width:156px!important; max-height:50px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; padding:0!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; overflow:hidden!important; } .site-header .brand-logo-wrap img, .common-header .brand-logo-wrap img, .site-header .brand > img, .common-header .brand > img{ width:auto!important; height:auto!important; max-width:156px!important; max-height:44px!important; object-fit:contain!important; object-position:left center!important; display:block!important; margin:0!important; filter:none!important; transform:none!important; } .site-header .brand-copy, .common-header .brand-copy, .site-header .brand > span:not(.brand-logo-wrap), .common-header .brand > span:not(.brand-logo-wrap){ display:none!important; } @media(max-width:760px){ .site-header .brand, .common-header .brand, .sticky-shell .site-header.common-header .brand, .sticky-shell .common-header.site-header .brand{ min-width:136px!important; width:136px!important; flex-basis:136px!important; height:46px!important; } .site-header .brand-logo-wrap, .common-header .brand-logo-wrap, .sticky-shell .site-header.common-header .brand-logo-wrap, .sticky-shell .common-header.site-header .brand-logo-wrap{ width:130px!important; height:44px!important; max-width:130px!important; max-height:44px!important; } .site-header .brand-logo-wrap img, .common-header .brand-logo-wrap img, .site-header .brand > img, .common-header .brand > img{ max-width:130px!important; max-height:38px!important; } } /* Enquiry rail button and form status */ .social-rail a.enquiry, .social-rail-link.enquiry { width: 54px !important; min-height: 52px !important; height: auto !important; padding: 8px 6px !important; border-radius: 16px !important; background: linear-gradient(135deg, #e8591a, #c94312) !important; color: #fff !important; text-align: center !important; font-size: 9px !important; font-weight: 900 !important; line-height: 1.05 !important; letter-spacing: .02em !important; text-transform: uppercase !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { display: block !important; max-width: 42px !important; } .enquiry-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .enquiry-status { min-height: 22px; margin: 12px 0 0; color: #526071; font-weight: 800; } .enquiry-status.success { color: #18794e; } .enquiry-status.error { color: #c94312; } .contact-form button[disabled] { cursor: wait; opacity: .72; } @media (max-width: 760px) { .social-rail a.enquiry, .social-rail-link.enquiry { width: 48px !important; min-height: 48px !important; font-size: 8px !important; } } /* Final header/logo containment: keep logo fully inside the rounded page header. */ .sticky-shell .site-header.common-header, .sticky-shell .common-header.site-header, .site-header.common-header { width: min(94vw, 1420px) !important; max-width: calc(100% - 32px) !important; margin: 14px auto 0 !important; padding: 12px 18px !important; min-height: 78px !important; height: 78px !important; border-radius: 22px !important; overflow: hidden !important; } .sticky-shell .site-header.common-header .brand, .sticky-shell .common-header.site-header .brand, .site-header.common-header .brand { min-width: 156px !important; width: 156px !important; flex: 0 0 156px !important; height: 54px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; overflow: hidden !important; } .sticky-shell .site-header.common-header .brand-logo-wrap, .sticky-shell .common-header.site-header .brand-logo-wrap, .site-header.common-header .brand-logo-wrap { width: 148px !important; height: 50px !important; max-width: 148px !important; max-height: 50px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .sticky-shell .site-header.common-header .brand-logo-wrap img, .sticky-shell .common-header.site-header .brand-logo-wrap img, .site-header.common-header .brand-logo-wrap img { width: 100% !important; height: 100% !important; max-width: 148px !important; max-height: 50px !important; object-fit: contain !important; object-position: left center !important; display: block !important; filter: drop-shadow(0 5px 9px rgba(13,27,42,.12)) !important; } .sticky-shell .site-header.common-header .brand-copy, .sticky-shell .common-header.site-header .brand-copy, .site-header.common-header .brand-copy, .site-header.common-header .brand > span:not(.brand-logo-wrap) { display: none !important; } @media (max-width: 760px) { .sticky-shell .site-header.common-header, .sticky-shell .common-header.site-header, .site-header.common-header { width: min(94vw, 1420px) !important; max-width: calc(100% - 20px) !important; margin-top: 10px !important; padding: 10px 12px !important; min-height: 68px !important; height: 68px !important; } .sticky-shell .site-header.common-header .brand, .sticky-shell .common-header.site-header .brand, .site-header.common-header .brand { min-width: 132px !important; width: 132px !important; flex-basis: 132px !important; height: 46px !important; } .sticky-shell .site-header.common-header .brand-logo-wrap, .sticky-shell .common-header.site-header .brand-logo-wrap, .site-header.common-header .brand-logo-wrap { width: 126px !important; height: 42px !important; } .sticky-shell .site-header.common-header .brand-logo-wrap img, .sticky-shell .common-header.site-header .brand-logo-wrap img, .site-header.common-header .brand-logo-wrap img { max-width: 126px !important; max-height: 42px !important; } } /* Final home WhatsApp icon alignment: match inner-page button. */ .wa-float { right: 22px !important; bottom: 22px !important; min-width: 184px !important; height: 62px !important; padding: 0 20px 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 999px !important; background: linear-gradient(135deg, #25D366, #128C7E) !important; color: #fff !important; border: 2px solid rgba(255,255,255,.72) !important; box-shadow: 0 18px 50px rgba(18,140,126,.38), 0 8px 22px rgba(15,23,42,.18) !important; text-decoration: none !important; } .wa-float .wa-icon { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.32) !important; color: #fff !important; line-height: 1 !important; } .wa-float .wa-svg, .wa-float .wa-icon svg { width: 22px !important; height: 22px !important; display: block !important; margin: 0 !important; } .wa-float .wa-label { line-height: 1 !important; white-space: nowrap !important; font-size: 16px !important; font-weight: 950 !important; } @media (max-width: 760px) { .wa-float { min-width: 150px !important; height: 52px !important; right: 12px !important; bottom: 14px !important; padding: 0 14px 0 10px !important; font-size: 14px !important; } .wa-float .wa-icon { flex-basis: 30px !important; width: 30px !important; height: 30px !important; } .wa-float .wa-svg, .wa-float .wa-icon svg { width: 20px !important; height: 20px !important; } .wa-float .wa-label { font-size: 14px !important; } } /* Final enquiry rail tab: vertical rectangle style. */ .social-rail a.enquiry, .social-rail-link.enquiry { width: 44px !important; height: 132px !important; min-height: 132px !important; padding: 0 !important; border-radius: 0 10px 10px 0 !important; background: linear-gradient(180deg, #e8591a, #c94312) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 16px 32px rgba(201,67,18,.28) !important; border: 1px solid rgba(255,255,255,.22) !important; border-left: 0 !important; transform: none !important; } .social-rail a.enquiry:hover, .social-rail-link.enquiry:hover { transform: translateX(3px) !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { display: block !important; max-width: none !important; width: 112px !important; white-space: nowrap !important; text-align: center !important; transform: rotate(-90deg) !important; transform-origin: center !important; font-size: 16px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } @media (max-width: 760px) { .social-rail a.enquiry, .social-rail-link.enquiry { width: 40px !important; height: 112px !important; min-height: 112px !important; border-radius: 0 9px 9px 0 !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { width: 98px !important; font-size: 14px !important; } } /* Final enquiry rail visibility and launch animation. */ .social-rail a.enquiry, .social-rail-link.enquiry { width: 46px !important; height: 156px !important; min-height: 156px !important; overflow: visible !important; border-radius: 0 10px 10px 0 !important; animation: enquiryTabPop 1.05s ease-in-out 3 .55s both !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { width: 132px !important; font-size: 14px !important; line-height: 1 !important; letter-spacing: .06em !important; } .social-rail a.enquiry:hover, .social-rail-link.enquiry:hover { animation-play-state: paused !important; transform: translateX(6px) !important; } @keyframes enquiryTabPop { 0%, 100% { transform: translateX(0); } 42% { transform: translateX(24px) scale(1.035); } 70% { transform: translateX(14px) scale(1.015); } } @media (max-width: 760px) { .social-rail a.enquiry, .social-rail-link.enquiry { width: 44px !important; height: 148px !important; min-height: 148px !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { width: 126px !important; font-size: 13px !important; } } @media (prefers-reduced-motion: reduce) { .social-rail a.enquiry, .social-rail-link.enquiry { animation: none !important; } } /* === BKF HOME SECTION SEPARATION START === Revert note: remove everything from this START line through the END line to undo the home-page section divider/background changes safely. */ main > section { position: relative; } main > section:not(.hero):not(.stats-section):not(.units-section) { border-top: 1px solid rgba(13, 27, 42, .075); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } main > section:not(.hero):not(.stats-section):not(.units-section)::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1180px, calc(100% - 48px)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(232,89,26,.22), rgba(13,27,42,.08), transparent); pointer-events: none; } main > section:nth-of-type(odd):not(.hero):not(.stats-section):not(.units-section) { background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,250,244,.82)); } main > section:nth-of-type(even):not(.hero):not(.stats-section):not(.units-section) { background: linear-gradient(180deg, rgba(247,241,232,.72), rgba(255,250,244,.94)); } .about-grid, main > section > .container { position: relative; z-index: 1; } .programs-section, .campaign-section, .members-section, .widget-section { border-top: 1px solid rgba(13, 27, 42, .075) !important; } .cta-grid { padding-top: 8px; } main > section + section { margin-top: 0; } @media (max-width: 760px) { main > section:not(.hero):not(.stats-section):not(.units-section)::before { width: calc(100% - 28px); } } /* === BKF HOME SECTION SEPARATION END === */ /* === BKF SPECIAL DAY CTA PHOTO START === Revert note: remove this block to restore the plain orange sponsor CTA. */ .cta-card.donate { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, rgba(166, 45, 12, .18), rgba(240, 79, 20, .08)), url('../images/cta/special-day-children-bg.png') center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -115px 105px rgba(75, 16, 4, .10), 0 30px 70px rgba(166, 45, 12, .22) !important; } .cta-card.donate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.25), transparent 28%), linear-gradient(90deg, rgba(68, 16, 5, .12), rgba(232, 89, 26, .02)); pointer-events: none; } .cta-card.donate .eyebrow, .cta-card.donate h2, .cta-card.donate p { text-shadow: 0 3px 18px rgba(45, 10, 3, .85), 0 1px 4px rgba(0,0,0,.48); } .cta-card.donate p { color: rgba(255,255,255,.94) !important; max-width: 560px; } .cta-card.donate .premium-btn { box-shadow: 0 16px 38px rgba(45, 13, 5, .24); } /* === BKF SPECIAL DAY CTA PHOTO END === */ /* === BKF VOLUNTEER CTA PHOTO START === Revert note: remove this block to restore the plain blue volunteer CTA. */ .cta-card.volunteer { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, rgba(9, 24, 39, .24), rgba(26, 74, 122, .12)), url('../images/cta/volunteer-children-bg.jpeg') center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -120px 110px rgba(5, 18, 32, .12), 0 30px 70px rgba(13, 27, 42, .24) !important; } .cta-card.volunteer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.20), transparent 28%), linear-gradient(90deg, rgba(4, 14, 25, .14), rgba(26, 74, 122, .02)); pointer-events: none; } .cta-card.volunteer .eyebrow, .cta-card.volunteer h2, .cta-card.volunteer p { text-shadow: 0 3px 18px rgba(3, 10, 18, .88), 0 1px 4px rgba(0,0,0,.52); } .cta-card.volunteer p { color: rgba(255,255,255,.94) !important; max-width: 560px; } .cta-card.volunteer .premium-btn { box-shadow: 0 16px 38px rgba(4, 14, 25, .24); } /* === BKF VOLUNTEER CTA PHOTO END === */ /* === BKF CTA PHOTO VISIBILITY OVERRIDE START === Revert note: remove this block to restore the previous tinted CTA photo style. */ .cta-card.volunteer, .cta-card.donate { position: relative !important; isolation: isolate !important; overflow: hidden !important; } .cta-card.volunteer { background: url('../images/cta/volunteer-children-bg.jpeg') center / cover no-repeat !important; } .cta-card.donate { background: url('../images/cta/special-day-children-bg.png') center / cover no-repeat !important; } .cta-card.volunteer::before, .cta-card.donate::before { display: none !important; } .cta-card.volunteer::after, .cta-card.donate::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .cta-card.volunteer::after { background: linear-gradient(90deg, rgba(5, 16, 28, .62) 0%, rgba(8, 24, 40, .32) 54%, rgba(8, 24, 40, .08) 100%), linear-gradient(0deg, rgba(5, 16, 28, .42) 0%, rgba(5, 16, 28, .05) 42%); } .cta-card.donate::after { background: linear-gradient(90deg, rgba(91, 22, 5, .48) 0%, rgba(196, 61, 18, .22) 54%, rgba(240, 79, 20, .06) 100%), linear-gradient(0deg, rgba(91, 22, 5, .30) 0%, rgba(91, 22, 5, .04) 42%); } .cta-card.volunteer > *, .cta-card.donate > * { position: relative !important; z-index: 1 !important; } .cta-card.volunteer .eyebrow, .cta-card.volunteer h2, .cta-card.volunteer p, .cta-card.donate .eyebrow, .cta-card.donate h2, .cta-card.donate p { text-shadow: 0 3px 20px rgba(0,0,0,.92), 0 1px 5px rgba(0,0,0,.65) !important; } /* === BKF CTA PHOTO VISIBILITY OVERRIDE END === */ /* === BKF MOBILE SOCIAL RAIL START === Revert note: remove this block to hide the social/enquiry rail on mobile again. */ @media (max-width: 1180px) { .social-rail { display: flex !important; position: fixed !important; left: 10px !important; top: 56% !important; transform: translateY(-50%) !important; z-index: 850 !important; flex-direction: column !important; gap: 8px !important; } .social-rail a:not(.enquiry) { width: 42px !important; height: 42px !important; border-radius: 12px !important; } .social-rail svg { width: 21px !important; height: 21px !important; } } /* Home-page Sponsor a Child teaser. It is deliberately separate from the social rail. */ .sponsor-home-pop { position: fixed; right: 24px; bottom: 102px; z-index: 1200; width: min(308px, calc(100vw - 52px)); border: 1px solid rgba(240, 90, 26, .26); border-radius: 18px; background: rgba(255, 252, 247, .96); box-shadow: 0 18px 45px rgba(9, 29, 49, .18), 0 7px 0 rgba(240, 90, 26, .16); backdrop-filter: blur(14px); transform: translateY(18px) scale(.96); opacity: 0; transition: opacity .3s ease, transform .3s ease; } .sponsor-home-pop.is-visible { opacity: 1; transform: translateY(0) scale(1); } .sponsor-home-pop-link { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; padding: 14px 17px; color: #0b2137; text-decoration: none; } .sponsor-home-pop-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #ff7a32, #e84c10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 7px 14px rgba(232, 76, 16, .22); } .sponsor-home-pop b, .sponsor-home-pop small { display: block; } .sponsor-home-pop b { font-size: 14px; } .sponsor-home-pop small { margin-top: 2px; color: #5f6f82; font-size: 11px; } .sponsor-home-pop-link > strong { color: #ef5a1a; font-size: 20px; transition: transform .2s ease; } .sponsor-home-pop-link:hover > strong { transform: translateX(4px); } .sponsor-home-pop-close { position: absolute; top: -9px; right: -8px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(9, 29, 49, .12); border-radius: 50%; color: #0b2137; background: #fff; box-shadow: 0 4px 11px rgba(9, 29, 49, .14); cursor: pointer; font-size: 19px; line-height: 1; } @media (max-width: 600px) { .sponsor-home-pop { right: 14px; bottom: 94px; width: min(280px, calc(100vw - 68px)); } } @media (prefers-reduced-motion: reduce) { .sponsor-home-pop, .sponsor-home-pop-link > strong { transition: none; } } @media (max-width: 760px) { .social-rail { left: 8px !important; top: 54% !important; gap: 7px !important; } .social-rail a:not(.enquiry) { width: 38px !important; height: 38px !important; border-radius: 11px !important; } .social-rail svg { width: 19px !important; height: 19px !important; } .social-rail a.enquiry, .social-rail-link.enquiry { width: 40px !important; height: 136px !important; min-height: 136px !important; border-radius: 0 9px 9px 0 !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { width: 116px !important; font-size: 12px !important; } } @media (max-width: 420px) { .social-rail { left: 6px !important; top: 55% !important; } .social-rail a:not(.enquiry) { width: 36px !important; height: 36px !important; } .social-rail a.enquiry, .social-rail-link.enquiry { width: 38px !important; height: 126px !important; min-height: 126px !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { width: 108px !important; font-size: 11px !important; } } /* === BKF MOBILE SOCIAL RAIL END === */ /* === BKF MOBILE HEADER REVAMP START === Revert note: remove this block and the .mobile-header-donate link to restore the older mobile header. */ .mobile-header-donate { display: none; } @media (max-width: 1180px) { .sticky-shell { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(253,250,244,.94)); } .sticky-shell .site-header.common-header, .sticky-shell .common-header.site-header, .site-header.common-header { position: relative !important; overflow: visible !important; display: flex !important; align-items: center !important; gap: 10px !important; min-height: 76px !important; height: 76px !important; padding: 10px 12px !important; border-radius: 24px !important; border: 1px solid rgba(232,89,26,.16) !important; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,246,235,.94)) !important; box-shadow: 0 18px 45px rgba(13,27,42,.12), inset 0 1px 0 rgba(255,255,255,.9) !important; } .sticky-shell .site-header.common-header::after, .sticky-shell .common-header.site-header::after, .site-header.common-header::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #e8591a, #f6b73c, #147c4c); opacity: .9; } .mobile-header-donate { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; min-width: 76px !important; height: 40px !important; padding: 0 14px !important; border-radius: 999px !important; background: linear-gradient(135deg, #ff6a1a, #d84111) !important; color: #fff !important; font-size: 12px !important; font-weight: 950 !important; text-decoration: none !important; box-shadow: 0 12px 26px rgba(232,89,26,.28) !important; white-space: nowrap !important; } .nav-toggle { display: inline-flex !important; width: 44px !important; height: 44px !important; margin-left: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 5px !important; border-radius: 14px !important; border: 1px solid rgba(13,27,42,.1) !important; background: #fff !important; box-shadow: 0 10px 22px rgba(13,27,42,.1) !important; cursor: pointer !important; } .nav-toggle span { width: 22px !important; height: 2px !important; margin: 0 !important; border-radius: 99px !important; background: #0d1b2a !important; transition: transform .22s ease, opacity .22s ease !important; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } .nav-menu.open { position: absolute !important; top: calc(100% + 12px) !important; left: 0 !important; right: 0 !important; z-index: 2147482000 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 14px !important; border-radius: 22px !important; border: 1px solid rgba(232,89,26,.16) !important; background: rgba(255,250,244,.98) !important; box-shadow: 0 24px 70px rgba(13,27,42,.20) !important; backdrop-filter: blur(14px) !important; max-height: min(70vh, 560px) !important; overflow: auto !important; } .nav-menu.open .nav-link, .nav-menu.open .nav-action, .nav-menu.open .mobile-only-link { width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 11px 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; background: #fff !important; color: #263648 !important; border: 1px solid rgba(232,89,26,.12) !important; box-shadow: 0 8px 18px rgba(13,27,42,.06) !important; font-size: 12px !important; font-weight: 850 !important; text-align: center !important; } .nav-menu.open .nav-link.active { color: #e8591a !important; background: #fff1e8 !important; } .nav-menu.open .donate-action { color: #fff !important; background: linear-gradient(135deg, #ff6a1a, #d84111) !important; } .nav-menu.open .portal-login { color: #fff !important; background: #0d1b2a !important; } } @media (max-width: 520px) { .sticky-shell .site-header.common-header, .sticky-shell .common-header.site-header, .site-header.common-header { min-height: 70px !important; height: 70px !important; padding: 9px 10px !important; border-radius: 20px !important; } .sticky-shell .site-header.common-header .brand, .sticky-shell .common-header.site-header .brand, .site-header.common-header .brand { min-width: 128px !important; width: 128px !important; flex-basis: 128px !important; } .sticky-shell .site-header.common-header .brand-logo-wrap, .sticky-shell .common-header.site-header .brand-logo-wrap, .site-header.common-header .brand-logo-wrap { width: 124px !important; height: 42px !important; } .mobile-header-donate { min-width: 68px !important; height: 38px !important; padding: 0 11px !important; font-size: 11px !important; } .nav-toggle { width: 40px !important; height: 40px !important; } .nav-menu.open { grid-template-columns: 1fr !important; left: -2px !important; right: -2px !important; padding: 12px !important; } } /* === BKF MOBILE HEADER REVAMP END === */ /* === BKF MOBILE MENU LINE DESIGN START === Revert note: remove this block to restore tile-style mobile menu links. */ @media (max-width: 1180px) { .nav-menu.open { grid-template-columns: 1fr !important; gap: 0 !important; padding: 12px 16px !important; border-radius: 24px !important; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,246,235,.95)) !important; border: 1px solid rgba(232,89,26,.18) !important; box-shadow: 0 28px 70px rgba(13,27,42,.22), inset 0 1px 0 rgba(255,255,255,.94) !important; backdrop-filter: blur(18px) !important; } .nav-menu.open .nav-link, .nav-menu.open .nav-action, .nav-menu.open .mobile-only-link { position: relative !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 13px 44px 13px 16px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; border-radius: 0 !important; background: transparent !important; color: #203044 !important; border: 0 !important; border-bottom: 1px solid rgba(232,89,26,.14) !important; box-shadow: none !important; font-size: 14px !important; font-weight: 900 !important; text-align: left !important; transform: translateZ(0) !important; transition: background .2s ease, transform .2s ease, color .2s ease !important; } .nav-menu.open .nav-link::after, .nav-menu.open .nav-action::after, .nav-menu.open .mobile-only-link::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #e8591a; background: linear-gradient(145deg, #fff, #fff1e6); box-shadow: 0 8px 16px rgba(13,27,42,.10), inset 0 1px 0 #fff; font-size: 22px; line-height: 1; } .nav-menu.open .nav-link:hover, .nav-menu.open .nav-action:hover, .nav-menu.open .mobile-only-link:hover, .nav-menu.open .nav-link.active { color: #e8591a !important; background: linear-gradient(90deg, rgba(232,89,26,.10), rgba(246,183,60,.06), transparent) !important; transform: translateX(4px) !important; } .nav-menu.open .nav-link:last-child, .nav-menu.open .nav-action:last-child, .nav-menu.open .mobile-only-link:last-child { border-bottom: 0 !important; } .nav-menu.open .donate-action { color: #fff !important; padding-left: 18px !important; margin: 10px 0 4px !important; border-radius: 16px !important; border-bottom: 0 !important; background: linear-gradient(135deg, #ff6a1a, #d84111) !important; box-shadow: 0 16px 28px rgba(232,89,26,.28), inset 0 1px 0 rgba(255,255,255,.24) !important; } .nav-menu.open .donate-action::after { color: #fff; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); } .nav-menu.open .portal-login { color: #fff !important; margin: 6px 0 4px !important; border-radius: 16px !important; border-bottom: 0 !important; background: linear-gradient(145deg, #0d1b2a, #173b5e) !important; box-shadow: 0 16px 28px rgba(13,27,42,.22), inset 0 1px 0 rgba(255,255,255,.12) !important; } .nav-menu.open .portal-login::after { color: #fff; background: rgba(255,255,255,.12); } } /* === BKF MOBILE MENU LINE DESIGN END === */ /* === BKF MOBILE DONATE CLEAN GLASS START === Revert note: remove this block to restore the default mobile Donate Now button. */ @media (max-width: 1180px) { .mobile-header-donate { position: relative !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.45) !important; background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 48%, rgba(255,255,255,0) 49%), linear-gradient(135deg, #ff6a1a, #e94b13) !important; color: #fff !important; text-shadow: 0 1px 1px rgba(89,21,3,.28) !important; box-shadow: 0 8px 18px rgba(232,89,26,.22), inset 0 1px 0 rgba(255,255,255,.44), inset 0 -2px 6px rgba(119,27,3,.10) !important; transform: none !important; backdrop-filter: blur(8px) saturate(1.08) !important; -webkit-backdrop-filter: blur(8px) saturate(1.08) !important; } .mobile-header-donate::before { content: ""; position: absolute; inset: 3px 9px auto 9px; height: 36%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06)); pointer-events: none; } .mobile-header-donate::after { display: none !important; } .mobile-header-donate:hover, .mobile-header-donate:active { transform: none !important; box-shadow: 0 8px 18px rgba(232,89,26,.22), inset 0 1px 0 rgba(255,255,255,.44), inset 0 -2px 6px rgba(119,27,3,.10) !important; } } /* === BKF MOBILE DONATE CLEAN GLASS END === */ /* === BKF MOBILE SINGLE ENQUIRY TAB START === Revert note: remove this block to show the enquiry item inside the social rail on mobile again. */ @media (max-width: 1180px) { .social-rail a.enquiry { display: none !important; } .mobile-enquiry-tab { display: flex !important; } } @media (min-width: 1181px) { .social-rail a.enquiry { display: flex !important; } } /* === BKF MOBILE SINGLE ENQUIRY TAB END === */ /* === BKF MOBILE RAIL ENQUIRY FINAL START === Revert note: remove this block to restore the previous standalone mobile enquiry tab behavior. */ .mobile-enquiry-tab { display: none !important; } @media (max-width: 1180px) { .social-rail { gap: 8px !important; } .social-rail a.enquiry, .social-rail-link.enquiry { display: flex !important; width: 42px !important; height: 138px !important; min-height: 138px !important; padding: 0 !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(255, 255, 255, .42) !important; border-radius: 0 12px 12px 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 34%), linear-gradient(180deg, #f26420 0%, #d94812 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset -5px 0 10px rgba(111, 32, 5, .18), 0 12px 24px rgba(201, 67, 18, .28) !important; color: #fff !important; opacity: 1 !important; overflow: hidden !important; pointer-events: auto !important; visibility: visible !important; animation: enquiryRailPop 1.05s ease-in-out 3 .65s both !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { display: block !important; width: 116px !important; max-width: none !important; color: #fff !important; font-size: 13px !important; font-weight: 950 !important; letter-spacing: .06em !important; line-height: 1 !important; text-align: center !important; text-transform: uppercase !important; transform: rotate(-90deg) !important; transform-origin: center !important; white-space: nowrap !important; } .social-rail a.enquiry:hover, .social-rail-link.enquiry:hover { animation-play-state: paused !important; transform: translateX(5px) !important; } } @media (max-width: 420px) { .social-rail a.enquiry, .social-rail-link.enquiry { width: 38px !important; height: 126px !important; min-height: 126px !important; } .social-rail a.enquiry span, .social-rail-link.enquiry span { width: 106px !important; font-size: 12px !important; } } @keyframes enquiryRailPop { 0%, 100% { transform: translateX(0); } 44% { transform: translateX(18px) scale(1.035); } } /* === BKF MOBILE RAIL ENQUIRY FINAL END === */ /* === BKF HOME HERO WIDE BACKGROUND START === Revert note: remove this block and move .hero-stats-bar back after the hero section in index.html to restore the previous split hero layout. */ .hero { position: relative !important; width: 100% !important; min-height: min(720px, calc(100vh - 30px)) !important; margin: 0 !important; padding: clamp(72px, 8vw, 118px) clamp(28px, 6vw, 78px) 136px !important; display: block !important; overflow: hidden !important; isolation: isolate !important; } .hero::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(253, 250, 244, .98) 0%, rgba(253, 250, 244, .9) 22%, rgba(253, 250, 244, .5) 48%, rgba(8, 23, 38, .34) 100%), linear-gradient(180deg, rgba(253, 250, 244, .88) 0%, rgba(253, 250, 244, .28) 44%, rgba(253, 250, 244, .1) 100%) !important; } .hero::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: radial-gradient(circle at 20% 42%, rgba(255, 255, 255, .56), transparent 38%) !important; } .hero > div:first-child { position: relative !important; z-index: 2 !important; width: min(455px, 100%) !important; max-width: 455px !important; } .hero h1 { font-size: clamp(48px, 5vw, 68px) !important; line-height: .93 !important; letter-spacing: -.035em !important; margin: 18px 0 18px !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important; } .hero-desc { max-width: 430px !important; font-size: 15px !important; line-height: 1.7 !important; color: #4f6073 !important; } .hero-actions { margin: 24px 0 22px !important; } .hero .premium-btn { min-height: 46px !important; padding: 12px 22px !important; } .hero .trust-row { width: min(520px, 100%) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } .hero .trust-badge { min-height: 42px !important; padding: 9px 11px !important; background: rgba(255, 255, 255, .86) !important; backdrop-filter: blur(12px) !important; } .hero-media { position: absolute !important; inset: 0 !important; z-index: 0 !important; min-width: 0 !important; pointer-events: auto !important; } .hero-frame { position: absolute !important; inset: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; z-index: 0 !important; } .hero-slider { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; z-index: 0 !important; } .hero-slide { filter: saturate(.96) contrast(.98) brightness(.82) !important; transform: scale(1.04) !important; pointer-events: none !important; } .hero-slide.active { transform: scale(1) !important; } .hero-feature-slide { object-position: center center !important; } .hero-dots { left: auto !important; right: 34% !important; bottom: 118px !important; transform: none !important; padding: 7px 9px !important; border-radius: 999px !important; background: rgba(13, 27, 42, .52) !important; backdrop-filter: blur(12px) !important; pointer-events: auto !important; z-index: 5 !important; } .hero-dot { width: 10px !important; height: 10px !important; background: rgba(255, 255, 255, .58) !important; } .hero-dot.active { background: var(--orange) !important; } .hero .floating-stat { display: none !important; } .hero .hero-stats-bar { position: absolute !important; left: 50% !important; bottom: 34px !important; z-index: 3 !important; width: min(840px, calc(100% - 180px)) !important; padding: 0 !important; transform: translateX(-50%) !important; background: transparent !important; } .hero .stats-grid { width: 100% !important; margin: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; padding: 16px 22px !important; border: 1px solid rgba(232, 89, 26, .16) !important; border-radius: 18px !important; background: rgba(255, 255, 255, .92) !important; box-shadow: 0 20px 48px rgba(13, 27, 42, .14) !important; backdrop-filter: blur(16px) !important; } .hero .stat-card { display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important; column-gap: 10px !important; align-items: center !important; justify-content: center !important; min-height: 54px !important; padding: 0 18px !important; border: 0 !important; border-right: 1px solid rgba(13, 27, 42, .12) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; overflow: visible !important; text-align: left !important; transform: none !important; } .hero .stat-card:last-child { border-right: 0 !important; } .hero .stat-card::after { display: none !important; } .hero .stat-icon { grid-row: 1 / 3 !important; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: linear-gradient(145deg, #fff4e4, #ffd7ad) !important; border: 1px solid rgba(232, 89, 26, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important; color: var(--navy) !important; font-size: 17px !important; } .hero .stat-number { display: block !important; margin: 0 !important; color: var(--orange) !important; font-size: 30px !important; line-height: .9 !important; } .hero .stat-label { color: #657186 !important; font-size: 10px !important; font-weight: 900 !important; line-height: 1.2 !important; } @media (max-width: 1180px) { .hero { min-height: 680px !important; padding: 78px 34px 150px !important; } .hero-dots { right: 28px !important; } .hero .hero-stats-bar { width: min(760px, calc(100% - 56px)) !important; } } @media (max-width: 780px) { .hero { min-height: auto !important; padding: 72px 20px 26px !important; } .hero::before { background: linear-gradient(180deg, rgba(253, 250, 244, .96) 0%, rgba(253, 250, 244, .86) 48%, rgba(253, 250, 244, .62) 100%), linear-gradient(90deg, rgba(253, 250, 244, .92), rgba(253, 250, 244, .4)) !important; } .hero > div:first-child { max-width: 100% !important; } .hero h1 { font-size: clamp(42px, 13vw, 58px) !important; } .hero .trust-row { grid-template-columns: 1fr !important; } .hero-dots { position: relative !important; right: auto !important; bottom: auto !important; width: max-content !important; margin: 28px auto 18px !important; z-index: 3 !important; } .hero .hero-stats-bar { position: relative !important; left: auto !important; bottom: auto !important; width: 100% !important; margin-top: 18px !important; transform: none !important; } .hero .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1px !important; padding: 12px !important; } .hero .stat-card { border-right: 0 !important; padding: 12px 10px !important; justify-content: flex-start !important; } } /* Certificate verification remains in Volunteer Hub/footer, not as a duplicate menu row. */ @media (max-width: 1180px) { .site-header.common-header .nav-menu.open > .mobile-only-link { display: none !important; } } /* Mobile hero impact cards: four balanced boxes with labels below figures. */ @media (max-width: 600px) { .hero .hero-stats-bar { width: 100% !important; margin-top: 22px !important; padding: 0 6px !important; } .hero .stats-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; padding: 10px !important; overflow: visible !important; border-radius: 24px !important; background: rgba(255,255,255,.82) !important; } .hero .stat-card { display: grid !important; grid-template-columns: 40px minmax(0,1fr) !important; grid-template-rows: auto auto !important; align-content: center !important; align-items: center !important; min-width: 0 !important; min-height: 112px !important; padding: 14px 10px !important; column-gap: 8px !important; row-gap: 4px !important; overflow: hidden !important; border: 1px solid rgba(232,89,26,.13) !important; border-radius: 17px !important; background: rgba(255,255,255,.94) !important; box-shadow: 0 10px 24px rgba(13,27,42,.08) !important; text-align: left !important; } .hero .stat-icon { grid-column: 1 !important; grid-row: 1 / 3 !important; width: 40px !important; height: 40px !important; font-size: 18px !important; } .hero .stat-number { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; font-size: clamp(25px,8vw,32px) !important; line-height: 1 !important; white-space: nowrap !important; } .hero .stat-label { display: block !important; grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; max-width: 100% !important; color: #59667a !important; font-size: 9px !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } } @media (max-width: 370px) { .hero .stats-grid {gap: 7px !important;padding: 8px !important} .hero .stat-card {grid-template-columns: 34px minmax(0,1fr) !important;padding: 12px 7px !important;column-gap: 6px !important} .hero .stat-icon {width: 34px !important;height: 34px !important;font-size: 16px !important} .hero .stat-number {font-size: 24px !important} .hero .stat-label {font-size: 8px !important} } @media (max-width: 480px) { .hero { padding-inline: 16px !important; } .hero .hero-actions .premium-btn { width: auto !important; flex: 1 1 145px !important; min-width: 0 !important; padding-inline: 14px !important; } .hero .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* === BKF HOME HERO WIDE BACKGROUND END === */ /* === BKF HERO PHOTO VISIBILITY BOOST START === Revert note: remove this block to return hero photos to the softer faded look. */ .hero::before { background: linear-gradient(90deg, rgba(253, 250, 244, .97) 0%, rgba(253, 250, 244, .84) 21%, rgba(253, 250, 244, .22) 45%, rgba(8, 23, 38, .16) 100%), linear-gradient(180deg, rgba(253, 250, 244, .42) 0%, rgba(253, 250, 244, .08) 42%, rgba(253, 250, 244, 0) 100%) !important; } .hero::after { background: radial-gradient(circle at 18% 42%, rgba(255, 255, 255, .34), transparent 34%) !important; } .hero-slide { filter: brightness(1.1) contrast(1.14) saturate(1.18) !important; } .hero-feature-slide { filter: brightness(1.16) contrast(1.18) saturate(1.22) !important; } @media (max-width: 780px) { .hero::before { background: linear-gradient(180deg, rgba(253, 250, 244, .9) 0%, rgba(253, 250, 244, .72) 42%, rgba(253, 250, 244, .32) 100%), linear-gradient(90deg, rgba(253, 250, 244, .9), rgba(253, 250, 244, .18)) !important; } .hero-slide, .hero-feature-slide { filter: brightness(1.08) contrast(1.12) saturate(1.16) !important; } } /* Final compact sizing for the editable food-sponsorship popup. */ .sponsor-home-pop { width: min(286px, calc(100vw - 24px)) !important; min-height: 126px !important; border-radius: 16px !important; } .sponsor-home-pop-link { grid-template-columns: 96px minmax(0, 1fr) !important; gap: 5px !important; min-height: 126px !important; padding: 0 9px 0 3px !important; border-radius: 14px !important; } .sponsor-home-pop-link::before { top: 21px; left: 7px; width: 83px; height: 83px; } .sponsor-home-pop-link::after { top: 16px; left: 7px; } .sponsor-home-pop-portrait { height: 124px !important; } .sponsor-home-pop-portrait img { left: -3px !important; bottom: -1px !important; width: 102px !important; height: 122px !important; } .sponsor-home-pop-copy { padding: 11px 20px 10px 0 !important; } .sponsor-home-pop-kicker { margin-bottom: 4px !important; font-size: 7px !important; line-height: 1.25 !important; letter-spacing: .45px !important; } .sponsor-home-pop-copy > b { font-size: 19px !important; line-height: .96 !important; } .sponsor-home-pop-copy > small { margin: 5px 0 7px !important; font-size: 9px !important; line-height: 1.28 !important; } .sponsor-home-pop-copy > strong { min-height: 28px !important; padding: 6px 10px !important; font-size: 9.5px !important; white-space: nowrap; } .sponsor-home-pop-close { top: 5px !important; right: 5px !important; width: 24px !important; min-width: 24px !important; height: 24px !important; font-size: 15px !important; } @media (max-width: 370px) { .sponsor-home-pop { width: min(270px, calc(100vw - 20px)) !important; } .sponsor-home-pop-link { grid-template-columns: 90px minmax(0, 1fr) !important; } .sponsor-home-pop-portrait img { width: 96px !important; } } /* === BKF HERO PHOTO VISIBILITY BOOST END === */ /* === BKF HOME ABOUT PREMIUM REDESIGN START === Revert note: remove this block and change the section class "section home-about-premium" back to "section" in index.html. */ .home-about-premium { position: relative !important; overflow: hidden !important; padding: clamp(70px, 8vw, 112px) 0 !important; background: radial-gradient(circle at 12% 28%, rgba(232, 89, 26, .12), transparent 22%), radial-gradient(circle at 82% 88%, rgba(13, 27, 42, .08), transparent 24%), linear-gradient(180deg, #fffaf4 0%, #f8f0e7 100%) !important; border-top: 1px solid rgba(232, 89, 26, .1) !important; border-bottom: 1px solid rgba(13, 27, 42, .08) !important; } .home-about-premium::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background-image: radial-gradient(rgba(232, 89, 26, .22) 1px, transparent 1px) !important; background-size: 26px 26px !important; opacity: .36 !important; } .home-about-premium::after { content: "♥ Compassion in action\A Every step creates lasting community impact." !important; position: absolute !important; left: max(26px, calc(50% - 545px)) !important; bottom: 76px !important; z-index: 3 !important; white-space: pre !important; width: 295px !important; padding: 17px 22px 17px 74px !important; border: 1px solid rgba(232, 89, 26, .14) !important; border-radius: 20px !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 22px 48px rgba(13, 27, 42, .14) !important; color: #647184 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.35 !important; } .home-about-premium .about-grid { width: min(1480px, calc(100% - 56px)) !important; display: grid !important; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important; gap: clamp(48px, 5vw, 84px) !important; align-items: center !important; isolation: isolate !important; } .home-about-premium .about-grid::before { content: "✦ FOUNDER'S VISION" !important; position: absolute !important; left: 285px !important; top: 66px !important; z-index: 4 !important; display: inline-flex !important; align-items: center !important; min-height: 42px !important; padding: 0 20px !important; border-radius: 999px !important; background: linear-gradient(135deg, #0d1b2a, #194f82) !important; color: #fff !important; box-shadow: 0 15px 28px rgba(13, 27, 42, .22) !important; font-family: var(--mono) !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .12em !important; } .home-about-premium .about-grid::after { display: none !important; } .home-about-premium .about-image { position: relative !important; z-index: 2 !important; width: min(540px, 100%) !important; justify-self: center !important; border: 12px solid rgba(255, 255, 255, .92) !important; border-radius: 26px !important; background: #fff !important; box-shadow: 22px 20px 0 rgba(13, 27, 42, .08), 36px 34px 0 rgba(232, 89, 26, .1), 0 34px 70px rgba(13, 27, 42, .2) !important; transform: perspective(900px) rotateY(-4deg) rotateZ(-1deg) !important; } .home-about-premium .founder-vision-slider { display: block !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; padding: 0 !important; } .home-about-premium .founder-vision-slider img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; opacity: 0; transform: scale(1.035); animation: founderVisionFade 9s infinite; } .home-about-premium .founder-vision-slider img:nth-child(1) { animation-delay: 0s !important; } .home-about-premium .founder-vision-slider img:nth-child(2) { animation-delay: 3s !important; } .home-about-premium .founder-vision-slider img:nth-child(3) { animation-delay: 6s !important; } @keyframes founderVisionFade { 0%, 30% { opacity: 1; transform: scale(1); } 36%, 100% { opacity: 0; transform: scale(1.035); } } @media (prefers-reduced-motion: reduce) { .home-about-premium .founder-vision-slider img { animation: none !important; opacity: 0 !important; transform: none !important; } .home-about-premium .founder-vision-slider img:first-child { opacity: 1 !important; } } .home-about-premium .about-grid > .reveal { position: relative !important; z-index: 2 !important; padding: clamp(36px, 4.5vw, 58px) !important; border: 1px solid rgba(232, 89, 26, .16) !important; border-left: 8px solid var(--orange) !important; border-radius: 28px !important; background: rgba(255, 255, 255, .88) !important; box-shadow: 0 34px 80px rgba(13, 27, 42, .12) !important; backdrop-filter: blur(18px) !important; } .home-about-premium .eyebrow { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important; color: var(--orange) !important; } .home-about-premium .eyebrow::before { content: "" !important; width: 26px !important; height: 2px !important; background: var(--orange) !important; } .home-about-premium .section-title { max-width: 760px !important; margin: 0 0 22px !important; font-size: clamp(42px, 4.2vw, 64px) !important; line-height: .98 !important; } .home-about-premium .section-sub { max-width: 810px !important; margin: 0 !important; color: #657186 !important; font-size: 16px !important; line-height: 1.75 !important; } .home-about-premium .section-sub::after { content: "Small steps. Lasting impact.\A Education, relief, wellbeing and opportunity-delivered with compassion." !important; display: block !important; margin-top: 26px !important; min-height: 70px !important; padding: 17px 22px 17px 78px !important; border-radius: 18px !important; background: radial-gradient(circle at 39px 50%, #ff7a22 0 18px, transparent 19px), linear-gradient(135deg, #0d1b2a, #194a79) !important; color: rgba(255, 255, 255, .74) !important; box-shadow: 0 18px 36px rgba(13, 27, 42, .14) !important; white-space: pre-line !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; } .home-about-premium .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin: 26px 0 !important; } .home-about-premium .focus-card { min-height: 86px !important; padding: 17px 48px 17px 18px !important; border-radius: 18px !important; background: rgba(255, 250, 244, .82) !important; border: 1px solid rgba(232, 89, 26, .18) !important; box-shadow: 0 12px 26px rgba(13, 27, 42, .06) !important; transform: translateZ(0) !important; } .home-about-premium .focus-card::after { content: "↗" !important; position: absolute !important; right: 18px !important; top: 24px !important; color: var(--orange) !important; font-size: 18px !important; font-weight: 900 !important; } .home-about-premium .focus-card:hover { transform: translateY(-5px) !important; background: #fff !important; box-shadow: 0 18px 36px rgba(232, 89, 26, .13) !important; } .home-about-premium .focus-icon { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; border-radius: 17px !important; } .home-about-premium .focus-card b { display: block !important; color: var(--navy) !important; font-size: 14px !important; } .home-about-premium .focus-card b::after { display: block !important; margin-top: 5px !important; color: #7a8493 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; } .home-about-premium .focus-card[href*="education"] b::after { content: "Learning, mentoring and confidence" !important; } .home-about-premium .focus-card[href*="hunger"] b::after { content: "Food and grocery support" !important; } .home-about-premium .focus-card[href*="health"] b::after { content: "Awareness, dignity and wellbeing" !important; } .home-about-premium .focus-card[href*="women"] b::after { content: "Skills, safety and self-reliance" !important; } .home-about-premium .focus-card[href*="environment"] b::after { content: "Greener and cleaner communities" !important; } .home-about-premium .focus-card[href*="animals"] b::after { content: "Care, feeding and awareness" !important; } .home-about-premium .quote { margin: 18px 0 0 !important; padding: 22px 28px !important; border-left: 0 !important; border-radius: 18px !important; background: linear-gradient(135deg, rgba(245, 240, 233, .92), rgba(255, 250, 244, .9)) !important; color: var(--navy) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important; } .home-about-premium .quote::before { content: "“" !important; color: var(--orange) !important; font-family: var(--display) !important; font-size: 42px !important; line-height: 0 !important; margin-right: 8px !important; vertical-align: -18px !important; } .home-about-premium .premium-btn.secondary { margin-top: 24px !important; border-color: rgba(232, 89, 26, .28) !important; box-shadow: 0 16px 34px rgba(232, 89, 26, .12) !important; } @media (max-width: 900px) { .home-about-premium .about-grid { grid-template-columns: 1fr !important; } .home-about-premium .about-grid::before { left: 50% !important; top: 38px !important; transform: translateX(-20%) !important; } .home-about-premium .about-grid::after, .home-about-premium::after { display: none !important; } .home-about-premium .about-image { width: min(500px, 92%) !important; } } @media (max-width: 760px) { .home-about-premium { padding: 58px 0 !important; } .home-about-premium .about-grid { width: min(100% - 28px, 1160px) !important; gap: 32px !important; } .home-about-premium .about-grid::before { position: relative !important; left: auto !important; top: auto !important; transform: none !important; justify-self: center !important; order: -2 !important; } .home-about-premium .about-image { order: -1 !important; border-width: 8px !important; transform: none !important; box-shadow: 0 22px 48px rgba(13, 27, 42, .16) !important; } .home-about-premium .about-grid > .reveal { padding: 28px 20px !important; border-left-width: 5px !important; border-radius: 22px !important; } .home-about-premium .focus-grid { grid-template-columns: 1fr !important; } .home-about-premium .section-title { font-size: clamp(36px, 11vw, 48px) !important; } } /* === BKF HOME ABOUT PREMIUM REDESIGN END === */ /* === BKF PROGRAMMES PREMIUM CAROUSEL START === Revert note: remove this block and restore the backed-up programmes section from bkf-website/backups/programmes-* to undo this redesign. */ .programs-section { position: relative !important; overflow: hidden !important; padding: clamp(70px, 7vw, 104px) 0 !important; background: radial-gradient(circle at 13% 18%, rgba(232, 89, 26, .12), transparent 23%), radial-gradient(circle at 86% 72%, rgba(246, 183, 60, .14), transparent 22%), linear-gradient(180deg, #fffaf4 0%, #f7efe6 54%, #fffaf4 100%) !important; border-top: 1px solid rgba(13, 27, 42, .07) !important; border-bottom: 1px solid rgba(13, 27, 42, .07) !important; } .programs-section::before, .programs-section::after { content: "" !important; position: absolute !important; pointer-events: none !important; border-radius: 999px !important; } .programs-section::before { width: 420px !important; height: 420px !important; left: -170px !important; top: 44px !important; border: 1px solid rgba(232, 89, 26, .12) !important; box-shadow: inset 0 0 0 54px rgba(232, 89, 26, .025) !important; } .programs-section::after { width: 360px !important; height: 360px !important; right: -150px !important; bottom: 58px !important; background: radial-gradient(circle, rgba(13, 27, 42, .1), transparent 68%) !important; } .programs-section > .container { position: relative !important; z-index: 1 !important; } .programs-head { align-items: flex-end !important; margin-bottom: 32px !important; } .programs-head .eyebrow { color: var(--orange) !important; font-weight: 800 !important; } .programs-head .section-title { margin-top: 10px !important; } .programs-sub { max-width: 470px !important; margin: 0 0 8px !important; color: #657186 !important; font-size: 16px !important; line-height: 1.7 !important; } .programs-carousel { position: relative !important; padding: 18px 0 0 !important; } .programs-section .carousel-viewport { padding: 10px 4px 34px !important; overflow-x: hidden !important; overflow-y: visible !important; touch-action: pan-y !important; } .programs-section .carousel-track { align-items: stretch !important; gap: 20px !important; } .programs-section .carousel-card { flex: 0 0 calc((100% - 60px) / 4) !important; height: auto !important; display: flex !important; } .program-card { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; min-height: 344px !important; height: 100% !important; padding: 26px !important; border-radius: 26px !important; border: 1px solid rgba(232, 89, 26, .18) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 250, 244, .9)), radial-gradient(circle at 88% 14%, rgba(246, 183, 60, .18), transparent 32%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 48px rgba(13, 27, 42, .1) !important; overflow: hidden !important; transform: translateZ(0) !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; } .program-card::before { content: "" !important; position: absolute !important; left: 22px !important; right: 22px !important; top: 0 !important; height: 4px !important; border-radius: 999px !important; background: linear-gradient(90deg, var(--orange), var(--gold)) !important; } .program-card::after { content: "" !important; position: absolute !important; width: 150px !important; height: 150px !important; right: -76px !important; top: -76px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(232, 89, 26, .16), transparent 68%) !important; opacity: .8 !important; } .program-card:hover { transform: translateY(-7px) !important; border-color: rgba(232, 89, 26, .34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 30px 64px rgba(13, 27, 42, .14), 0 0 0 1px rgba(246, 183, 60, .12) !important; } .program-card .program-icon, .program-card .program-category, .program-card h3, .program-card p, .program-card .program-footer { position: relative !important; z-index: 1 !important; } .program-card .program-icon { width: 66px !important; height: 66px !important; flex: 0 0 66px !important; display: grid !important; place-items: center !important; margin-bottom: 18px !important; border-radius: 22px !important; background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 226, 187, .95)), linear-gradient(135deg, #fff4dc, #ffd8ae) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .9), 0 14px 26px rgba(232, 89, 26, .18) !important; font-size: 32px !important; transition: transform .28s ease !important; } .program-card:hover .program-icon { transform: translateY(-3px) scale(1.04) !important; } .program-category { display: inline-flex !important; width: max-content !important; max-width: 100% !important; margin-bottom: 13px !important; padding: 7px 10px !important; border-radius: 999px !important; background: rgba(232, 89, 26, .08) !important; color: var(--orange) !important; font-family: var(--mono) !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .08em !important; line-height: 1 !important; text-transform: uppercase !important; } .program-card h3 { min-height: 58px !important; margin: 0 0 12px !important; color: var(--navy) !important; font-family: var(--display) !important; font-size: 25px !important; line-height: 1.12 !important; letter-spacing: -.015em !important; } .program-card p { min-height: 92px !important; margin: 0 !important; color: #657186 !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 14px !important; line-height: 1.62 !important; } .program-footer { display: inline-flex !important; align-items: center !important; width: max-content !important; margin-top: auto !important; padding-top: 20px !important; color: var(--orange) !important; font-size: 13px !important; font-weight: 900 !important; transition: transform .24s ease !important; } .program-card:hover .program-footer { transform: translateX(4px) !important; } .programs-section .carousel-controls { margin-top: 8px !important; gap: 14px !important; } .programs-section .carousel-btn { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .9) !important; border: 1px solid rgba(232, 89, 26, .25) !important; color: var(--orange) !important; box-shadow: 0 12px 26px rgba(13, 27, 42, .09) !important; } .programs-section .carousel-dots { align-items: center !important; } .programs-section .carousel-dots button { width: 9px !important; height: 9px !important; background: rgba(13, 27, 42, .18) !important; } .programs-section .carousel-dots button.active { width: 22px !important; border-radius: 999px !important; background: linear-gradient(90deg, var(--orange), var(--gold)) !important; transform: none !important; } .programs-view-all { margin-top: 28px !important; text-align: center !important; } .programs-view-all .premium-btn { min-width: 184px !important; background: linear-gradient(135deg, #ff7626, #d94310) !important; border: 1px solid rgba(255, 255, 255, .36) !important; color: #fff !important; box-shadow: 0 18px 34px rgba(232, 89, 26, .28) !important; } .programs-view-all .premium-btn span { transition: transform .24s ease !important; } .programs-view-all .premium-btn:hover span { transform: translateX(5px) !important; } @media (max-width: 1180px) { .programs-section .carousel-card { flex-basis: calc((100% - 20px) / 2) !important; } .programs-head { align-items: flex-start !important; flex-direction: column !important; } .programs-sub { max-width: 680px !important; } } @media (max-width: 640px) { .programs-section { padding: 58px 0 !important; } .programs-section .container { width: min(100% - 28px, 1240px) !important; } .programs-section .carousel-card { flex-basis: 100% !important; } .program-card { min-height: 330px !important; padding: 23px !important; } .program-card h3 { min-height: auto !important; font-size: 24px !important; } .program-card p { min-height: 88px !important; } .programs-section .carousel-controls { gap: 12px !important; } .programs-view-all .premium-btn { width: min(100%, 290px) !important; } } @media (max-width: 390px) { .program-card { min-height: 346px !important; padding: 21px !important; } .program-card .program-icon { width: 58px !important; height: 58px !important; flex-basis: 58px !important; font-size: 28px !important; } } @media (prefers-reduced-motion: reduce) { .program-card, .program-card .program-icon, .program-footer, .programs-view-all .premium-btn span { transition: none !important; } } /* === BKF PROGRAMMES PREMIUM CAROUSEL END === */ /* Locations menu: one compact trigger with a click/keyboard submenu. */ .nav-dropdown { position: relative; display: inline-flex; align-items: center; } .nav-dropdown-toggle { display: inline-flex; align-items: center; appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; } .nav-dropdown-toggle::after { content: ""; width: 7px; height: 7px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.18s ease; } .nav-dropdown.is-open .nav-dropdown-toggle::after { transform: translateY(2px) rotate(225deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 10040; display: grid; min-width: 190px; gap: 5px; padding: 9px; border: 1px solid rgba(232, 89, 26, 0.18); border-radius: 15px; background: rgba(255, 252, 247, 0.98); box-shadow: 0 22px 48px rgba(7, 26, 44, 0.17); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.is-open .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .nav-dropdown-menu a { display: block; padding: 10px 12px; border-radius: 10px; color: #25364b; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; } .nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { color: #e8591a; background: #fff0e7; } @media (max-width: 1180px) { .nav-menu.open .nav-dropdown { display: grid; width: 100%; gap: 7px; } .nav-menu.open .nav-dropdown-toggle { width: 100%; justify-content: flex-start; text-align: left; } .nav-menu.open .nav-dropdown-menu { position: static; display: none; min-width: 0; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; background: rgba(255, 247, 238, 0.86); } .nav-menu.open .nav-dropdown.is-open .nav-dropdown-menu { display: grid; } .nav-menu.open .nav-dropdown-menu a { width: auto; text-align: center; white-space: normal; } } @media (max-width: 560px) { .nav-menu.open .nav-dropdown-menu { grid-template-columns: 1fr; } } /* Final click-only Locations menu. The logo stays clipped by its own wrapper. */ .site-header.common-header { overflow: visible !important; } .common-header .nav-dropdown-toggle { font-family: "DM Sans", sans-serif !important; font-size: 11.3px !important; font-weight: 700 !important; line-height: normal !important; color: #526071 !important; padding: 8px 7px !important; border-radius: 8px !important; white-space: nowrap; } .common-header .nav-dropdown-toggle:hover, .common-header .nav-dropdown-toggle.active, .common-header .nav-dropdown.is-open .nav-dropdown-toggle { color: var(--orange) !important; background: rgba(232, 89, 26, 0.08) !important; } .nav-dropdown-toggle::after { display: none !important; content: none !important; } .nav-dropdown:not(.is-open) .nav-dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 8px) !important; } .nav-dropdown.is-open .nav-dropdown-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate(-50%, 0) !important; } @media (max-width: 1180px) { .common-header .nav-menu.open .nav-dropdown-toggle { padding: 12px !important; font-size: 14px !important; } .nav-menu.open .nav-dropdown:not(.is-open) .nav-dropdown-menu { display: none !important; } .nav-menu.open .nav-dropdown.is-open .nav-dropdown-menu { display: grid !important; transform: none !important; } } /* Mobile action dock: keeps every shortcut available without covering page content. */ @media (max-width: 1180px) { .social-rail.social-rail { display: flex !important; position: fixed !important; left: 8px !important; right: auto !important; top: auto !important; bottom: 72px !important; width: auto !important; height: auto !important; transform: none !important; flex-direction: row !important; align-items: center !important; gap: 5px !important; padding: 5px !important; border: 1px solid rgba(13, 27, 42, 0.1) !important; border-radius: 15px !important; background: rgba(253, 250, 244, 0.94) !important; box-shadow: 0 10px 28px rgba(13, 27, 42, 0.15) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 790 !important; } .social-rail.social-rail a:not(.enquiry) { display: grid !important; place-items: center !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; border-radius: 10px !important; } .social-rail.social-rail svg { width: 18px !important; height: 18px !important; } .social-rail.social-rail a.enquiry, .social-rail.social-rail .social-rail-link.enquiry { display: flex !important; align-items: center !important; justify-content: center !important; width: 92px !important; min-width: 92px !important; height: 34px !important; min-height: 34px !important; padding: 0 8px !important; border: 0 !important; border-radius: 10px !important; transform: none !important; overflow: hidden !important; animation: mobileEnquiryNudge 0.8s ease-in-out 3 0.65s both !important; } .social-rail.social-rail a.enquiry span, .social-rail.social-rail .social-rail-link.enquiry span { display: block !important; width: auto !important; max-width: none !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; white-space: nowrap !important; transform: none !important; } .mobile-enquiry-tab { display: none !important; } body:has(.nav-menu.open) .social-rail.social-rail { opacity: 0 !important; pointer-events: none !important; } .sponsor-home-pop:not([hidden]) { bottom: 126px; } } @media (max-width: 380px) { .social-rail.social-rail a:not(.enquiry) { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; } .social-rail.social-rail a.enquiry, .social-rail.social-rail .social-rail-link.enquiry { width: 84px !important; min-width: 84px !important; height: 32px !important; min-height: 32px !important; } } @keyframes mobileEnquiryNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .social-rail.social-rail a.enquiry, .social-rail.social-rail .social-rail-link.enquiry { animation: none !important; } } /* Live Sponsor a Child popup: editable content with a true cutout portrait. */ .sponsor-home-pop { position: fixed !important; left: 28px !important; right: auto !important; bottom: 36px !important; z-index: 1200 !important; width: min(340px, calc(100vw - 48px)) !important; min-height: 168px; aspect-ratio: auto !important; padding: 0 !important; overflow: visible !important; border: 2px solid #ff9d58 !important; border-radius: 18px !important; background: linear-gradient(118deg, #fffdf8 0%, #fff8ed 62%, #ffeedb 100%) !important; box-shadow: 0 0 0 8px rgba(10, 29, 47, .88), 0 18px 34px rgba(10, 29, 47, .28), 0 5px 0 rgba(218, 79, 20, .2), inset 0 1px 0 #fff !important; isolation: isolate; } .sponsor-home-pop::before, .sponsor-home-pop::after { position: absolute; z-index: -1; content: ""; pointer-events: none; } .sponsor-home-pop::before { inset: 5px; border: 1px solid rgba(239, 90, 26, .18); border-radius: 13px; } .sponsor-home-pop::after { right: 9px; bottom: 8px; width: 50px; height: 34px; opacity: .28; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(239, 90, 26, .28) 7px 8px), repeating-linear-gradient(0deg, transparent 0 7px, rgba(239, 90, 26, .22) 7px 8px); mask-image: linear-gradient(135deg, transparent 8%, #000 70%); } .sponsor-home-pop-link { position: relative; display: grid !important; grid-template-columns: 132px minmax(0, 1fr) !important; align-items: stretch !important; gap: 4px !important; width: 100% !important; min-height: 168px; height: auto !important; padding: 0 12px 0 5px !important; overflow: hidden !important; border-radius: 16px !important; color: #0b2137; background: transparent !important; box-shadow: none !important; text-decoration: none; } .sponsor-home-pop-link::before { position: absolute; top: 27px; left: 12px; width: 112px; height: 112px; border: 3px solid rgba(255, 112, 36, .78); border-radius: 52% 48% 46% 54% / 46% 55% 45% 54%; background: rgba(255, 237, 215, .72); box-shadow: 0 8px 18px rgba(224, 84, 20, .14), inset 0 0 0 3px rgba(255, 255, 255, .72); content: ""; transform: rotate(-5deg); } .sponsor-home-pop-link::after { display: block !important; position: absolute; top: 19px; left: 9px; width: 21px; height: 19px; border: 2px solid #ef5a1a; border-top: 0; border-left: 0; border-radius: 8px 4px 12px 4px; content: "" !important; transform: rotate(42deg); opacity: .85; } .sponsor-home-pop-link > .sponsor-home-pop-portrait, .sponsor-home-pop-link > .sponsor-home-pop-copy { display: block !important; } .sponsor-home-pop-portrait { position: relative; align-self: end; height: 166px; overflow: visible; } .sponsor-home-pop-portrait img { position: absolute; z-index: 1; left: -4px; bottom: -1px; display: block; width: 140px; max-width: none; height: 164px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 8px rgba(71, 38, 24, .16)); transition: transform .28s ease; } .sponsor-home-pop-copy { position: relative; z-index: 2; align-self: center; padding: 18px 16px 14px 0; } .sponsor-home-pop-kicker { display: flex !important; align-items: center; gap: 3px; margin: 0 0 5px; color: #e95618; font-family: var(--mono, "Courier New", monospace); font-size: 6.4px; font-weight: 800; line-height: 1; letter-spacing: .65px; text-transform: uppercase; } .sponsor-home-pop-kicker i { width: 3px; height: 3px; border-radius: 50%; background: #ef5a1a; } .sponsor-home-pop-copy > b { display: block !important; max-width: 170px; color: #0b2137 !important; font-family: var(--serif, Georgia, serif); font-size: 22px !important; font-weight: 800; line-height: .96 !important; letter-spacing: 0; } .sponsor-home-pop-copy > b em { display: block; color: #ef5a1a; font-style: normal; } .sponsor-home-pop-copy > small { display: block !important; max-width: 170px; margin: 6px 0 8px !important; color: #53677a !important; font-size: 8.5px !important; line-height: 1.3 !important; } .sponsor-home-pop-copy > strong { display: inline-flex !important; align-items: center; gap: 5px; min-height: 28px; margin: 0 !important; padding: 6px 10px !important; border-radius: 999px !important; color: #fff !important; background: linear-gradient(135deg, #ff7b25, #ed4d0e) !important; box-shadow: 0 6px 12px rgba(225, 73, 15, .24), inset 0 1px 0 rgba(255, 255, 255, .45) !important; font-size: 9px !important; line-height: 1 !important; transition: transform .2s ease, box-shadow .2s ease !important; } .sponsor-home-pop-copy > strong svg { width: 13px; height: 13px; overflow: visible; fill: currentColor; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .sponsor-home-pop-copy > strong span { font-size: 13px; transition: transform .2s ease; } .sponsor-home-pop-link:hover .sponsor-home-pop-portrait img { transform: translateY(-3px) scale(1.025); } .sponsor-home-pop-link:hover .sponsor-home-pop-copy > strong { transform: translateY(-2px) !important; box-shadow: 0 14px 25px rgba(225, 73, 15, .34), inset 0 1px 0 rgba(255, 255, 255, .45) !important; } .sponsor-home-pop-link:hover .sponsor-home-pop-copy > strong span { transform: translateX(3px); } .sponsor-home-pop-close { position: absolute !important; z-index: 5 !important; top: 6px !important; right: 6px !important; display: grid !important; width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; margin: 0 !important; padding: 0 !important; place-items: center; border: 1px solid rgba(9, 29, 49, .12) !important; border-radius: 50% !important; opacity: 1 !important; color: #0b2137 !important; background: rgba(255, 255, 255, .96) !important; box-shadow: 0 3px 9px rgba(9, 29, 49, .15) !important; cursor: pointer; font-size: 17px !important; line-height: 1 !important; } @media (max-width: 700px) { .sponsor-home-pop { left: 12px !important; bottom: 84px !important; width: min(340px, calc(100vw - 24px)) !important; min-height: 164px; border-radius: 18px !important; } .sponsor-home-pop-link { grid-template-columns: 39% minmax(0, 1fr) !important; min-height: 164px; padding: 0 10px 0 2px !important; border-radius: 16px !important; } .sponsor-home-pop-link::before { top: 27px; left: 10px; width: 108px; height: 108px; border-width: 3px; } .sponsor-home-pop-link::after { top: 19px; left: 7px; width: 20px; height: 18px; } .sponsor-home-pop-portrait { height: 162px; } .sponsor-home-pop-portrait img { left: -4px; width: 136px; height: 160px; } .sponsor-home-pop-copy { padding: 17px 16px 12px 0; } .sponsor-home-pop-kicker { gap: 3px; margin-bottom: 5px; font-size: 6px; letter-spacing: .55px; } .sponsor-home-pop-copy > b { font-size: 21px !important; line-height: .96 !important; } .sponsor-home-pop-copy > small { margin: 5px 0 7px !important; font-size: 8px !important; line-height: 1.25 !important; } .sponsor-home-pop-copy > strong { min-height: 27px; padding: 6px 9px !important; font-size: 8.5px !important; } .sponsor-home-pop-copy > strong svg { width: 12px; height: 12px; } .sponsor-home-pop-close { top: 6px !important; right: 6px !important; width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; font-size: 17px !important; } } @media (max-width: 370px) { .sponsor-home-pop-copy > b { font-size: 19px !important; } .sponsor-home-pop-copy > small { font-size: 7.5px !important; } .sponsor-home-pop-portrait img { left: -6px; width: 128px; } } @media (prefers-reduced-motion: reduce) { .sponsor-home-pop-portrait img, .sponsor-home-pop-copy > strong, .sponsor-home-pop-copy > strong span { transition: none !important; } } /* Compact glass treatment for the live Sponsor a Child popup. */ .sponsor-home-pop { width: min(304px, calc(100vw - 48px)) !important; min-height: 148px !important; border: 1px solid rgba(255, 255, 255, .94) !important; border-radius: 17px !important; background: linear-gradient(125deg, rgba(255, 255, 255, .9), rgba(255, 246, 233, .84) 62%, rgba(255, 232, 207, .8)) !important; box-shadow: 0 14px 32px rgba(22, 42, 60, .2), 0 4px 12px rgba(227, 86, 22, .14), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 139, 78, .4) !important; backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); animation: sponsorCardFloat 5.5s ease-in-out infinite; } .sponsor-home-pop::before { inset: 4px; border-color: rgba(255, 126, 59, .34); border-radius: 12px; } .sponsor-home-pop-link { grid-template-columns: 116px minmax(0, 1fr) !important; min-height: 148px !important; padding: 0 10px 0 4px !important; border-radius: 16px !important; } .sponsor-home-pop-link::before { top: 25px; left: 10px; width: 98px; height: 98px; } .sponsor-home-pop-portrait { height: 146px; } .sponsor-home-pop-portrait img { width: 123px; height: 144px; animation: sponsorPortraitDrift 4.6s ease-in-out infinite; } .sponsor-home-pop-copy { padding: 16px 14px 12px 0; } .sponsor-home-pop-copy > b { font-size: 20px !important; } .sponsor-home-pop-copy > small { margin: 5px 0 7px !important; font-size: 7.8px !important; } .sponsor-home-pop-copy > strong { min-height: 26px; padding: 5px 9px !important; font-size: 8.5px !important; } .sponsor-home-pop-close { width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; font-size: 16px !important; } @keyframes sponsorCardFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } } @keyframes sponsorPortraitDrift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg); } 50% { transform: translate3d(2px, -3px, 0) rotate(.35deg); } } @media (max-width: 700px) { .sponsor-home-pop { width: min(304px, calc(100vw - 24px)) !important; min-height: 148px !important; border-radius: 17px !important; } .sponsor-home-pop-link { grid-template-columns: 38% minmax(0, 1fr) !important; min-height: 148px !important; padding: 0 9px 0 2px !important; } .sponsor-home-pop-link::before { top: 25px; left: 9px; width: 98px; height: 98px; } .sponsor-home-pop-portrait { height: 146px; } .sponsor-home-pop-portrait img { width: 122px; height: 144px; } .sponsor-home-pop-copy { padding: 15px 14px 11px 0; } .sponsor-home-pop-copy > b { font-size: 19px !important; } .sponsor-home-pop-copy > small { font-size: 7.5px !important; } } @media (max-width: 370px) { .sponsor-home-pop-copy > b { font-size: 18px !important; } .sponsor-home-pop-copy > small { font-size: 7.2px !important; } .sponsor-home-pop-portrait img { left: -6px; width: 116px; } } @media (prefers-reduced-motion: reduce) { .sponsor-home-pop, .sponsor-home-pop-portrait img { animation: none !important; } } /* Volunteer Hub: compact glass menu in the common header. */ .site-header .volunteer-hub{position:relative;margin-left:5px}.site-header .volunteer-hub-toggle{gap:6px;border:0;cursor:pointer;color:#fff!important}.site-header .volunteer-hub-toggle::after{border-color:#fff}.site-header .volunteer-hub-menu{right:0;left:auto;min-width:274px;padding:10px;border:1px solid rgba(255,255,255,.62);border-radius:18px;background:rgba(255,255,255,.76);box-shadow:0 22px 50px rgba(13,27,42,.2),inset 0 1px rgba(255,255,255,.82);backdrop-filter:blur(18px);transform:translate(0,8px)}.site-header .volunteer-hub:hover .volunteer-hub-menu,.site-header .volunteer-hub:focus-within .volunteer-hub-menu,.site-header .volunteer-hub.is-open .volunteer-hub-menu{transform:translate(0,0)}.site-header .volunteer-hub-menu a{display:flex;align-items:center;gap:12px;min-height:43px;padding:10px 12px;border-radius:12px;color:#1d2d40;font-size:12px;font-weight:800;white-space:normal}.site-header .volunteer-hub-menu a+a{margin-top:3px}.site-header .volunteer-hub-menu a b{margin-left:auto;color:#e8591a;font-size:18px;line-height:1}.site-header .volunteer-hub-menu a:hover,.site-header .volunteer-hub-menu a:focus-visible{color:#c94312;background:linear-gradient(90deg,rgba(232,89,26,.12),rgba(246,183,60,.08))} @media(max-width:1180px){.nav-menu.open .volunteer-hub{display:grid;width:100%;margin:6px 0 0;gap:7px}.nav-menu.open .volunteer-hub-toggle{width:100%;min-height:48px;justify-content:flex-start;padding:0 18px;border-radius:16px}.nav-menu.open .volunteer-hub-toggle::after{position:static;right:auto;width:7px;height:7px;margin-left:auto;padding:0;border-radius:0;background:transparent;box-shadow:none;content:"";transform:translateY(-2px) rotate(45deg)}.nav-menu.open .volunteer-hub-menu{position:static;display:none;width:100%;min-width:0;opacity:1;visibility:visible;pointer-events:auto;transform:none;box-shadow:none}.nav-menu.open .volunteer-hub.is-open .volunteer-hub-menu{display:grid}.nav-menu.open .volunteer-hub-menu a{width:100%;min-height:46px;text-align:left}} /* Editorial redesign: the home foundation introduction reads as one story, not a collection of cards. */ .home-about-premium{position:relative;overflow:hidden;padding-block:96px;background:radial-gradient(circle at 8% 25%,rgba(255,184,119,.16),transparent 25%),linear-gradient(135deg,#fffdf9,#f8f3ec)}.home-about-premium .about-grid{position:relative;display:grid;grid-template-columns:minmax(290px,.82fr) minmax(0,1.18fr);gap:clamp(46px,7vw,108px);align-items:center}.about-story-visual{position:relative;min-height:540px;margin:0;padding:0 40px 42px 0}.about-story-main{display:block;width:100%;height:500px;object-fit:cover;border-radius:170px 170px 28px 28px;box-shadow:0 28px 58px rgba(12,31,49,.2)}.about-story-visual figcaption{position:absolute;left:24px;bottom:8px;display:grid;gap:3px;padding:15px 19px;border-radius:14px;background:#0d2740;color:#fff;box-shadow:0 14px 26px rgba(12,31,49,.2)}.about-story-visual figcaption span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#ffbb8b}.about-story-visual figcaption strong{font-family:var(--display);font-size:20px}.about-story-echo{position:absolute;right:0;bottom:52px;width:39%;aspect-ratio:1;overflow:hidden;border:6px solid #fff;border-radius:22px;box-shadow:0 18px 36px rgba(12,31,49,.19);transform:rotate(4deg)}.about-story-echo img{width:100%;height:100%;object-fit:cover}.about-story-copy{max-width:650px;padding:4px 0}.home-about-premium .section-title{margin:12px 0 16px;font-size:clamp(47px,5.3vw,76px);line-height:.91;letter-spacing:-.055em}.home-about-premium .section-sub{max-width:590px;font-size:16px;line-height:1.75}.about-impact-note{display:flex;align-items:center;gap:14px;margin:27px 0 20px;padding:14px 0;border-block:1px solid rgba(13,31,49,.13);color:#173650}.about-impact-note>span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#f15b21;color:#fff;font-size:16px}.about-impact-note p{margin:0;font-size:12px;font-weight:800;line-height:1.45}.home-about-premium .focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;border-top:1px solid rgba(13,31,49,.12)}.home-about-premium .focus-card{display:flex;align-items:center;gap:11px;min-height:64px;padding:11px 8px 11px 0;border:0;border-bottom:1px solid rgba(13,31,49,.12);border-radius:0;background:transparent;box-shadow:none;transition:color .2s ease,transform .2s ease}.home-about-premium .focus-card:nth-child(odd){margin-right:18px}.home-about-premium .focus-card:hover{background:transparent;box-shadow:none;transform:translateX(5px);color:#e95618}.home-about-premium .focus-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#fff0df;box-shadow:none;font-size:17px}.home-about-premium .focus-card b{display:block;font-size:12px;color:#132b42}.home-about-premium .focus-card small{display:block;margin-top:2px;color:#748396;font-size:9px;font-weight:600}.home-about-premium .quote{margin:24px 0 20px;padding:0;border:0;background:transparent;color:#173650;font-size:19px;line-height:1.25}.home-about-premium .premium-btn.secondary{min-height:44px;padding:11px 17px;font-size:12px}.home-about-premium .premium-btn.secondary:hover{background:#0d2740;color:#fff;border-color:#0d2740}@media(max-width:780px){.home-about-premium{padding-block:66px}.home-about-premium .about-grid{grid-template-columns:1fr;gap:42px}.about-story-visual{width:min(100%,500px);min-height:430px;padding-right:28px;margin:0 auto}.about-story-main{height:390px;border-radius:130px 130px 22px 22px}.about-story-echo{bottom:38px}.home-about-premium .section-title{font-size:clamp(44px,12vw,64px)}.home-about-premium .focus-grid{grid-template-columns:1fr}.home-about-premium .focus-card:nth-child(odd){margin-right:0}}@media(max-width:480px){.about-story-visual{min-height:370px;padding-right:18px}.about-story-main{height:330px}.about-story-echo{width:42%;bottom:35px}.about-story-visual figcaption{left:12px;padding:12px 14px}.home-about-premium .focus-card{min-height:59px}.home-about-premium .section-sub{font-size:15px}} /* Neutralise the previous card-heavy treatment before applying the editorial layout. */ .home-about-premium .about-grid::before{display:none!important}.home-about-premium .about-grid>.about-story-copy{padding:4px 0!important;border:0!important;border-left:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}.home-about-premium .section-sub::after{display:none!important}.home-about-premium .about-grid>.about-story-visual{border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;width:auto!important;justify-self:stretch!important}.home-about-premium .focus-grid{gap:0!important;margin:0!important}.home-about-premium .focus-card{min-height:64px!important;padding:11px 8px 11px 0!important;border:0!important;border-bottom:1px solid rgba(13,31,49,.12)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.home-about-premium .focus-card::after{display:none!important}.home-about-premium .focus-card b::after{display:none!important}.home-about-premium .focus-icon{width:34px!important;height:34px!important;border-radius:10px!important;background:#fff0df!important;box-shadow:none!important}.home-about-premium .quote{padding:0!important;border:0!important;background:transparent!important;border-radius:0!important}.home-about-premium .eyebrow{margin-bottom:0!important} /* Final glass / 3D navigation override. */ .sticky-shell{isolation:isolate;padding:9px 0 10px!important;background:linear-gradient(115deg,rgba(255,253,249,.91),rgba(243,248,250,.88))!important;border-bottom:1px solid rgba(13,27,42,.07);box-shadow:0 15px 38px rgba(13,27,42,.10)!important;backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)} .sticky-shell::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 12% -60%,rgba(255,185,139,.45),transparent 40%),radial-gradient(circle at 91% 20%,rgba(170,222,235,.25),transparent 29%);pointer-events:none} .sticky-shell .top-runner{position:absolute!important;top:0;left:0;width:100%!important;height:3px!important;margin:0!important;overflow:hidden;background:linear-gradient(90deg,#d9470d,#ff8b42 42%,#d9470d)!important;border:0!important}.sticky-shell .top-runner .runner-track{display:none!important} .sticky-shell .site-header.common-header,.sticky-shell .common-header.site-header{position:relative!important;width:min(1380px,calc(100% - 34px))!important;min-height:72px!important;height:72px!important;margin:0 auto!important;padding:8px 13px 8px 17px!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.78)!important;background:linear-gradient(120deg,rgba(255,255,255,.83),rgba(252,250,246,.69))!important;box-shadow:0 16px 32px rgba(13,27,42,.12),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(13,27,42,.035)!important;backdrop-filter:blur(22px) saturate(155%)!important;-webkit-backdrop-filter:blur(22px) saturate(155%)!important;transform:translateZ(0)} .sticky-shell .site-header.common-header::before,.sticky-shell .common-header.site-header::before{content:"";position:absolute;pointer-events:none;inset:1px;border-radius:21px;background:linear-gradient(112deg,rgba(255,255,255,.48),transparent 29%,transparent 72%,rgba(255,255,255,.35))} .sticky-shell .site-header.common-header .brand{position:relative;z-index:1}.sticky-shell .site-header.common-header .brand-logo-wrap{border-radius:0!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;transform:none!important;transition:transform .25s ease;overflow:visible!important}.sticky-shell .site-header.common-header .brand-logo-wrap img{visibility:visible!important;display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:none!important}.sticky-shell .site-header.common-header .brand:hover .brand-logo-wrap{transform:translateY(-2px)!important;box-shadow:none!important} .sticky-shell .site-header.common-header .nav-menu{position:relative;z-index:1;gap:3px!important}.sticky-shell .site-header.common-header .nav-link{position:relative;border:1px solid transparent!important;border-radius:11px!important;color:#4b5b6d!important;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease!important}.sticky-shell .site-header.common-header .nav-link:hover{color:#d94d15!important;background:rgba(255,255,255,.66)!important;border-color:rgba(232,89,26,.14)!important;box-shadow:0 7px 13px rgba(13,27,42,.07),inset 0 1px 0 rgba(255,255,255,.8)!important;transform:translateY(-1px)}.sticky-shell .site-header.common-header .nav-link.active{color:#e8591a!important;background:linear-gradient(135deg,#fff4ec,#ffeadc)!important;border-color:rgba(232,89,26,.14)!important;box-shadow:inset 0 1px 0 #fff,0 6px 12px rgba(232,89,26,.09)!important} .sticky-shell .site-header.common-header .nav-action{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 8px 15px rgba(13,27,42,.14),inset 0 1px 0 rgba(255,255,255,.26)!important;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important}.sticky-shell .site-header.common-header .nav-action::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.25),transparent 42%);pointer-events:none}.sticky-shell .site-header.common-header .nav-action:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 12px 20px rgba(13,27,42,.19),inset 0 1px 0 rgba(255,255,255,.3)!important} @media(max-width:1180px){.sticky-shell{padding:5px 0 6px!important}.sticky-shell .site-header.common-header,.sticky-shell .common-header.site-header{width:calc(100% - 20px)!important;height:64px!important;min-height:64px!important;border-radius:18px!important}.sticky-shell .site-header.common-header .nav-menu.open{top:calc(100% + 10px)!important;border-radius:18px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px)!important}} /* Restore the announcement ticker above the glass header. */ .sticky-shell{padding:0 0 10px!important} .sticky-shell .top-runner{position:relative!important;top:auto!important;left:auto!important;height:28px!important;margin:0 0 9px!important;border:0!important;background:linear-gradient(90deg,#c84212,#f26b27 48%,#c84212)!important;overflow:hidden!important} .sticky-shell .top-runner .runner-track{display:flex!important;align-items:center!important;height:28px!important;width:max-content!important;color:#fff!important;animation:runner 24s linear infinite!important} .sticky-shell .top-runner .runner-track span{display:inline-flex!important;align-items:center!important;height:28px!important;color:#fff!important;font-size:9px!important;font-weight:800!important;letter-spacing:.075em!important;text-transform:uppercase!important;white-space:nowrap!important;padding:0 30px!important} .sticky-shell .site-header.common-header,.sticky-shell .common-header.site-header{margin:0 auto!important} /* Force the announcement ticker to keep moving. */ @keyframes bkfTickerLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .sticky-shell .top-runner .runner-track{animation:bkfTickerLoop 28s linear infinite!important;animation-play-state:running!important;will-change:transform} .sticky-shell .top-runner:hover .runner-track{animation-play-state:running!important} /* Premium trust ribbon: shared announcement runner. */ .sticky-shell .top-runner{ position:relative!important; height:36px!important; margin:0 0 9px!important; background:linear-gradient(105deg,#081d31 0%,#103a58 31%,#e95519 58%,#ff7c30 74%,#0c2840 100%)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.22),0 7px 18px rgba(13,27,42,.12)!important; } .sticky-shell .top-runner::before, .sticky-shell .top-runner::after{content:"";position:absolute;z-index:1;top:0;bottom:0;width:70px;pointer-events:none} .sticky-shell .top-runner::before{left:0;background:linear-gradient(90deg,rgba(8,29,49,.72),transparent)} .sticky-shell .top-runner::after{right:0;background:linear-gradient(270deg,rgba(12,40,64,.72),transparent)} .sticky-shell .top-runner .runner-track{height:36px!important;align-items:center!important;padding:0 12px!important} .sticky-shell .top-runner .runner-track span{ position:relative; height:24px!important; margin:0 5px!important; padding:0 20px 0 29px!important; border:1px solid rgba(255,255,255,.22)!important; border-radius:999px!important; background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.055))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 8px rgba(0,0,0,.10)!important; font-family:var(--mono,monospace)!important; font-size:9px!important; font-weight:800!important; letter-spacing:.095em!important; text-shadow:0 1px 1px rgba(0,0,0,.22)!important; } .sticky-shell .top-runner .runner-track span::before{ content:"✦"; position:absolute; left:10px; top:50%; transform:translateY(-51%); color:#ffd39a; font-size:10px; text-shadow:0 0 8px rgba(255,211,154,.55); } .sticky-shell .top-runner .runner-track span:nth-child(2n)::before{content:"✓";color:#baf7d2;font-size:11px} .sticky-shell .top-runner .runner-track span:nth-child(3n)::before{content:"●";color:#fff0be;font-size:8px} @media(max-width:760px){ .sticky-shell .top-runner{height:33px!important;margin-bottom:7px!important} .sticky-shell .top-runner .runner-track{height:33px!important} .sticky-shell .top-runner .runner-track span{height:23px!important;font-size:8px!important;padding-right:17px!important} } /* ========================================================================== BKF UNIVERSAL GLASS + DEPTH SYSTEM — visual-only; does not alter content or JS ========================================================================== */ :root{--bkf-glass-card:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,250,244,.77));--bkf-glass-border:rgba(255,255,255,.84);--bkf-depth:0 18px 42px rgba(13,27,42,.11),0 3px 8px rgba(13,27,42,.05);--bkf-depth-hover:0 28px 54px rgba(13,27,42,.17),0 8px 17px rgba(232,89,26,.12)} main :is(.program-card,.project-card,.campaign-card,.impact-card,.info-card,.event-card,.service-card,.gallery-card,.member-card,.focus-card,.contact-card,.stat-card,.motion-box,.content-card,.feature-card,.team-card,.testimonial-card,.review-card){ position:relative;isolation:isolate;border:1px solid var(--bkf-glass-border)!important; background:var(--bkf-glass-card)!important; box-shadow:var(--bkf-depth)!important; backdrop-filter:blur(10px) saturate(116%);-webkit-backdrop-filter:blur(10px) saturate(116%); transition:transform .32s cubic-bezier(.2,.78,.25,1),box-shadow .32s ease,border-color .32s ease,filter .32s ease!important; } main :is(.program-card,.project-card,.campaign-card,.impact-card,.info-card,.event-card,.service-card,.gallery-card,.member-card,.focus-card,.contact-card,.stat-card,.motion-box,.content-card,.feature-card,.team-card,.testimonial-card,.review-card)::before{ content:"";position:absolute;z-index:-1;inset:1px;border-radius:inherit;pointer-events:none; background:linear-gradient(125deg,rgba(255,255,255,.56),transparent 26%,transparent 70%,rgba(255,193,145,.16)); } main :is(.program-card,.project-card,.campaign-card,.impact-card,.info-card,.event-card,.service-card,.gallery-card,.member-card,.focus-card,.contact-card,.stat-card,.motion-box,.content-card,.feature-card,.team-card,.testimonial-card,.review-card):hover{ z-index:3;border-color:rgba(232,89,26,.28)!important;box-shadow:var(--bkf-depth-hover)!important; transform:translateY(-7px) perspective(1000px) rotateX(1.4deg) rotateY(-.7deg)!important; filter:saturate(1.035); } main :is(.program-card,.project-card,.campaign-card,.impact-card,.info-card,.event-card,.service-card,.gallery-card,.member-card,.focus-card,.contact-card,.stat-card,.motion-box,.content-card,.feature-card,.team-card,.testimonial-card,.review-card):focus-within{ z-index:4;border-color:rgba(232,89,26,.46)!important;box-shadow:0 0 0 4px rgba(232,89,26,.10),var(--bkf-depth-hover)!important; } main :is(.campaign-card,.project-card,.gallery-card) img{transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .45s ease!important} main :is(.campaign-card,.project-card,.gallery-card):hover img{transform:scale(1.035);filter:saturate(1.06) contrast(1.015)} .widget-shell:not(.owned-review-slider){border:1px solid var(--bkf-glass-border)!important;background:linear-gradient(140deg,rgba(255,255,255,.82),rgba(246,250,252,.63))!important;box-shadow:0 20px 48px rgba(13,27,42,.09),inset 0 1px 0 rgba(255,255,255,.85)!important;backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%)} .page-hero,.hero-frame,.page-hero-copy{filter:drop-shadow(0 15px 28px rgba(13,27,42,.08))} @media(prefers-reduced-motion:reduce){ main :is(.program-card,.project-card,.campaign-card,.impact-card,.info-card,.event-card,.service-card,.gallery-card,.member-card,.focus-card,.contact-card,.stat-card,.motion-box,.content-card,.feature-card,.team-card,.testimonial-card,.review-card), main :is(.campaign-card,.project-card,.gallery-card) img{transition:none!important} main :is(.program-card,.project-card,.campaign-card,.impact-card,.info-card,.event-card,.service-card,.gallery-card,.member-card,.focus-card,.contact-card,.stat-card,.motion-box,.content-card,.feature-card,.team-card,.testimonial-card,.review-card):hover{transform:none!important} } @media(max-width:760px){ main :is(.program-card,.project-card,.campaign-card,.impact-card,.info-card,.event-card,.service-card,.gallery-card,.member-card,.focus-card,.contact-card,.stat-card,.motion-box,.content-card,.feature-card,.team-card,.testimonial-card,.review-card):hover{transform:translateY(-3px)!important} } /* Home story collage — glass-edged photo frame. */ .home-about-premium .about-story-visual{isolation:isolate;padding:14px 54px 56px 14px!important} .home-about-premium .about-story-visual::before{ content:"";position:absolute;z-index:-1;inset:0 38px 38px 0;border-radius:184px 184px 42px 42px; border:1px solid rgba(255,255,255,.84);background:linear-gradient(140deg,rgba(255,255,255,.77),rgba(255,236,218,.34)); box-shadow:0 28px 60px rgba(13,31,49,.13),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(232,89,26,.10); backdrop-filter:blur(13px) saturate(125%);-webkit-backdrop-filter:blur(13px) saturate(125%); } .home-about-premium .about-story-main{ position:relative;z-index:1;border:9px solid rgba(255,255,255,.72);outline:1px solid rgba(232,89,26,.18); box-shadow:0 25px 52px rgba(12,31,49,.22),inset 0 1px 0 rgba(255,255,255,.75)!important; } .home-about-premium .about-story-echo{ z-index:3;border:7px solid rgba(255,255,255,.79)!important;outline:1px solid rgba(232,89,26,.19); background:rgba(255,255,255,.17);box-shadow:0 21px 43px rgba(12,31,49,.23),inset 0 1px 0 rgba(255,255,255,.85)!important; backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%); } .home-about-premium .about-story-echo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.32),transparent 34%)} .home-about-premium .about-story-visual figcaption{ z-index:4;border:1px solid rgba(255,255,255,.25);background:linear-gradient(135deg,rgba(8,35,58,.94),rgba(17,63,92,.85))!important; box-shadow:0 17px 32px rgba(12,31,49,.24),inset 0 1px 0 rgba(255,255,255,.16)!important; backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%); } .home-about-premium .about-story-visual figcaption::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;border-top:1px solid rgba(255,255,255,.14)} @media(max-width:780px){.home-about-premium .about-story-visual{padding:10px 38px 48px 10px!important}.home-about-premium .about-story-visual::before{inset:0 25px 30px 0;border-radius:145px 145px 32px 32px}.home-about-premium .about-story-main{border-width:7px}} /* Changemakers carousel: consistent card height regardless of name/photo length. */ .members-section .carousel-track{align-items:stretch!important} .members-section .carousel-card.member-card{ min-height:378px!important;height:378px!important;display:flex!important;flex-direction:column!important; } .members-section .carousel-card.member-card .text-link{margin-top:auto!important;padding-top:16px!important} @media(max-width:780px){.members-section .carousel-card.member-card{min-height:360px!important;height:360px!important}} /* Instagram showcase — luminous glass card frame. */ .bkf-instagram-grid{padding:18px!important;border:1px solid rgba(255,255,255,.76)!important;background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,246,238,.30))!important;box-shadow:0 24px 54px rgba(13,27,42,.10),inset 0 1px 0 rgba(255,255,255,.82)!important;backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)} .bkf-insta-card{ z-index:0;border:1px solid rgba(255,255,255,.88)!important; background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(250,241,233,.75))!important; box-shadow:0 17px 35px rgba(13,27,42,.13),inset 0 1px 0 rgba(255,255,255,.86)!important; transition:transform .34s cubic-bezier(.2,.78,.25,1),box-shadow .34s ease,border-color .34s ease!important; } .bkf-insta-card::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.30),transparent 29%,transparent 70%,rgba(255,157,91,.12))} .bkf-insta-card::after{content:"";position:absolute;z-index:1;inset:8px;border:1px solid rgba(255,255,255,.34);border-radius:14px;pointer-events:none} .bkf-insta-card img{position:relative;z-index:0;filter:saturate(1.04) contrast(1.01)!important;transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .4s ease!important} .bkf-insta-card span{z-index:2;left:14px!important;right:14px!important;bottom:14px!important;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,rgba(10,32,52,.86),rgba(18,61,88,.70))!important;box-shadow:0 8px 19px rgba(4,19,32,.19),inset 0 1px 0 rgba(255,255,255,.15);backdrop-filter:blur(15px) saturate(135%);-webkit-backdrop-filter:blur(15px) saturate(135%)} .bkf-insta-card:hover{z-index:3;border-color:rgba(232,89,26,.34)!important;box-shadow:0 28px 52px rgba(13,27,42,.19),0 7px 18px rgba(232,89,26,.12)!important;transform:translateY(-7px) perspective(950px) rotateX(1.3deg) rotateY(-.6deg)!important} .bkf-insta-card:hover img{transform:scale(1.07)!important;filter:saturate(1.11) contrast(1.03)!important} @media(max-width:760px){.bkf-instagram-grid{padding:12px!important}.bkf-insta-card:hover{transform:translateY(-3px)!important}} /* Changemakers: keep role badges and actions centered in every card. */ .members-section .carousel-card.member-card{align-items:center!important;text-align:center!important} .members-section .carousel-card.member-card .role{align-self:center!important;width:auto!important;justify-content:center!important;text-align:center!important} .members-section .carousel-card.member-card p{width:100%;text-align:center!important} .members-section .carousel-card.member-card .text-link{align-self:center!important;text-align:center!important} /* Home story collage — alignment safeguard: retain the original collage geometry. */ .home-about-premium .about-story-visual{ width:min(100%,520px)!important;min-height:540px!important;margin:0 auto!important;padding:0 40px 42px 0!important; } .home-about-premium .about-story-visual::before{display:none!important} .home-about-premium .about-story-main{ width:100%!important;height:500px!important;border:0!important;outline:1px solid rgba(232,89,26,.18)!important; box-shadow:0 28px 58px rgba(12,31,49,.20),inset 0 1px 0 rgba(255,255,255,.72)!important; } .home-about-premium .about-story-echo{ right:0!important;bottom:52px!important;width:39%!important;border:6px solid #fff!important;outline:1px solid rgba(232,89,26,.18)!important; background:transparent!important;box-shadow:0 18px 36px rgba(12,31,49,.19)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } .home-about-premium .about-story-echo::after{display:none!important} .home-about-premium .about-story-visual figcaption{left:24px!important;bottom:8px!important} @media(max-width:780px){ .home-about-premium .about-story-visual{width:min(100%,500px)!important;min-height:430px!important;padding:0 28px 42px 0!important} .home-about-premium .about-story-main{height:390px!important;border:0!important} .home-about-premium .about-story-echo{bottom:38px!important} } @media(max-width:480px){ .home-about-premium .about-story-visual{min-height:370px!important;padding-right:18px!important} .home-about-premium .about-story-main{height:330px!important} } /* Home story collage — keep the decorative note below, never over the caption. */ .home-about-premium .about-story-visual{position:relative!important;z-index:5!important} .home-about-premium::after{bottom:20px!important;z-index:2!important} .home-about-premium .about-story-visual figcaption{z-index:7!important} .home-about-premium .about-story-echo{z-index:6!important} @media(max-width:780px){.home-about-premium::after{left:50%!important;bottom:18px!important;transform:translateX(-50%)!important;width:min(295px,calc(100% - 32px))!important}} /* Compact floating WhatsApp control. */ .wa-float{width:auto!important;min-width:0!important;height:44px!important;min-height:44px!important;padding:0 13px 0 8px!important;gap:7px!important;font-size:13px!important;border-radius:999px!important}.wa-float .wa-icon{flex:0 0 28px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}.wa-float .wa-svg,.wa-float .wa-icon svg{width:18px!important;height:18px!important}.wa-float .wa-label{display:block!important;font-size:13px!important;white-space:nowrap!important}@media(max-width:760px){.wa-float{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;padding:0!important;gap:0!important;border-radius:50%!important;justify-content:center!important}.wa-float .wa-icon{flex:0 0 48px!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;background:transparent!important}.wa-float .wa-svg,.wa-float .wa-icon svg{width:24px!important;height:24px!important}.wa-float .wa-label{display:none!important}} /* Smaller food-sponsorship popup on phones only. */ @media(max-width:700px){.sponsor-home-pop{left:12px!important;bottom:72px!important;width:min(280px,calc(100vw - 24px))!important;border-radius:17px!important}.sponsor-home-pop-link{grid-template-columns:86px minmax(0,1fr)!important;gap:2px!important;min-height:112px!important;padding:0 7px 0 2px!important}.sponsor-home-pop-portrait{height:110px!important}.sponsor-home-pop-portrait img{left:-2px!important;bottom:-1px!important;width:94px!important;height:108px!important}.sponsor-home-pop-copy{padding:9px 5px 8px 0!important}.sponsor-home-pop-kicker{margin-bottom:3px!important;font-size:5px!important;letter-spacing:.4px!important}.sponsor-home-pop-copy>b{font-size:17px!important}.sponsor-home-pop-copy>small{margin:4px 0 6px!important;font-size:7px!important}.sponsor-home-pop-copy>strong{padding:6px 8px!important;font-size:8px!important}.sponsor-home-pop-close{top:5px!important;right:5px!important;width:22px!important;height:22px!important;font-size:14px!important}} /* Mobile audit safety layer for the home, location and functional-page shell. */ @media (max-width: 760px) { html, body { max-width: 100%; overflow-x: clip; } main, main section, main .container, main [class*="-grid"], main [class*="-wrap"], main [class*="-shell"], main article, main form, main fieldset { min-width: 0; max-width: 100%; } main img, main video, main canvas, main iframe { max-width: 100%; height: auto; } main h1, main h2, main h3, main p, main li, main a, main label, main strong, main span { overflow-wrap: anywhere; } main input, main select, main textarea, main button { max-width: 100%; box-sizing: border-box; } main table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .nav-menu.open, .nav-menu.open .nav-dropdown, .nav-menu.open .nav-dropdown-menu, .nav-menu.open a, .nav-menu.open button { max-width: 100%; min-width: 0; } } /* Home-only mobile Donate action: match the shared public-page button. */ @media (max-width: 1180px) { .common-header:has(.nav-link.active[href="index.html"]) .mobile-header-donate { min-width: 0 !important; min-height: 38px !important; height: 38px !important; margin-left: auto !important; margin-right: 8px !important; padding: 0 15px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(145deg,#ff6d22,#e64a0b) !important; color: #fff !important; outline: 0 !important; box-shadow: 0 6px 14px rgba(201,67,18,.22),inset 0 1px 0 rgba(255,255,255,.28) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .common-header:has(.nav-link.active[href="index.html"]) .mobile-header-donate::before, .common-header:has(.nav-link.active[href="index.html"]) .mobile-header-donate::after { display: none !important; } .common-header:has(.nav-link.active[href="index.html"]) .mobile-header-donate:focus-visible { outline: 2px solid #18364f !important; outline-offset: 2px !important; } } @media (max-width: 430px) { .common-header:has(.nav-link.active[href="index.html"]) .mobile-header-donate { min-height: 36px !important; height: 36px !important; margin-right: 6px !important; padding-inline: 11px !important; font-size: 10px !important; } } /* Home hero final polish: clearer photography and consistent vector CTAs. */ .hero::before { background: linear-gradient(90deg, rgba(253, 250, 244, .95) 0%, rgba(253, 250, 244, .78) 21%, rgba(253, 250, 244, .15) 45%, rgba(8, 23, 38, .12) 100%), linear-gradient(180deg, rgba(253, 250, 244, .34) 0%, rgba(253, 250, 244, .05) 42%, transparent 100%) !important; } .hero::after { background: radial-gradient(circle at 18% 42%, rgba(255, 255, 255, .25), transparent 34%) !important; } .hero .hero-actions .hero-cta { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 52px !important; padding: 8px 18px 8px 9px !important; overflow: hidden; border: 1px solid rgba(255, 255, 255, .72) !important; border-radius: 17px !important; font-size: 14px; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 14px 30px rgba(13, 27, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .48) !important; } .hero .hero-actions .hero-cta--donate { background: linear-gradient(135deg, #ff7525 0%, #e54a0d 65%, #c83a0b 100%) !important; color: #fff !important; } .hero .hero-actions .hero-cta--volunteer { border-color: rgba(13, 45, 70, .13) !important; background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 253, .93)) !important; color: #10263a !important; } .hero .hero-btn-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255, 255, 255, .42); border-radius: 11px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); } .hero .hero-cta--volunteer .hero-btn-icon { border-color: rgba(13, 45, 70, .10); background: #edf4f8; color: #11334d; } .hero .hero-btn-icon svg { width: 18px; height: 18px; } .hero .hero-btn-arrow { width: 17px; height: 17px; transition: transform .2s ease; } .hero .hero-cta:hover .hero-btn-arrow, .hero .hero-cta:focus-visible .hero-btn-arrow { transform: translate(2px, -2px); } /* Native touch scrolling for every homepage card carousel. */ @media (max-width: 780px) { [data-carousel] .carousel-viewport { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; } [data-carousel] .carousel-viewport::-webkit-scrollbar {display:none} [data-carousel] .carousel-card {scroll-snap-align:start} } @media (max-width: 780px) { .hero::before { background: linear-gradient(180deg, rgba(253, 250, 244, .84) 0%, rgba(253, 250, 244, .62) 42%, rgba(253, 250, 244, .22) 100%), linear-gradient(90deg, rgba(253, 250, 244, .84), rgba(253, 250, 244, .12)) !important; } .hero .hero-actions .hero-cta { min-height: 54px !important; padding: 8px 13px 8px 8px !important; border-radius: 18px !important; font-size: 13px; line-height: 1.15; } } /* Final popup override kept last so older popup variants cannot enlarge it. */ .sponsor-home-pop { width: min(286px, calc(100vw - 24px)) !important; min-height: 126px !important; border-radius: 16px !important; } .sponsor-home-pop-link { grid-template-columns: 96px minmax(0, 1fr) !important; gap: 5px !important; min-height: 126px !important; padding: 0 9px 0 3px !important; border-radius: 14px !important; } .sponsor-home-pop-link::before {top:21px!important;left:7px!important;width:83px!important;height:83px!important} .sponsor-home-pop-link::after {top:16px!important;left:7px!important} .sponsor-home-pop-portrait {height:124px!important} .sponsor-home-pop-portrait img {left:-3px!important;bottom:-1px!important;width:102px!important;height:122px!important} .sponsor-home-pop-copy {padding:11px 20px 10px 0!important} .sponsor-home-pop-kicker {margin-bottom:4px!important;font-size:7px!important;line-height:1.25!important;letter-spacing:.45px!important} .sponsor-home-pop-copy>b {font-size:19px!important;line-height:.96!important} .sponsor-home-pop-copy>small {margin:5px 0 7px!important;font-size:9px!important;line-height:1.28!important} .sponsor-home-pop-copy>strong {min-height:28px!important;padding:6px 10px!important;font-size:9.5px!important;white-space:nowrap} .sponsor-home-pop-close {top:5px!important;right:5px!important;width:24px!important;min-width:24px!important;height:24px!important;font-size:15px!important} @media(max-width:370px){ .sponsor-home-pop{width:min(270px,calc(100vw - 20px))!important} .sponsor-home-pop-link{grid-template-columns:90px minmax(0,1fr)!important} .sponsor-home-pop-portrait img{width:96px!important} } /* Centre the homepage mobile-menu donation label and use consistent wording. */ @media (max-width: 1180px) { .site-header .nav-menu.open .donate-action { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; line-height: 1 !important; padding-right: 44px !important; padding-left: 44px !important; text-align: center !important; font-size: 0 !important; } .site-header .nav-menu.open .donate-action::before { content: "Donate Now"; position: absolute; inset: 0 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; line-height: 1; } } /* Shorter homepage impact cards on phones; retain the balanced 2x2 layout. */ @media (max-width: 600px) { .hero .hero-stats-bar { margin-top: 14px !important; padding: 0 5px !important; } .hero .stats-grid { gap: 8px !important; padding: 8px !important; border-radius: 20px !important; } .hero .stat-card { grid-template-columns: 34px minmax(0, 1fr) !important; column-gap: 7px !important; min-height: 78px !important; padding: 8px !important; border-radius: 14px !important; } .hero .stat-icon { width: 34px !important; height: 34px !important; font-size: 16px !important; border-radius: 10px !important; } .hero .stat-number { font-size: clamp(23px, 7vw, 28px) !important; line-height: .92 !important; } .hero .stat-label { margin-top: 2px !important; font-size: 8.5px !important; line-height: 1.15 !important; } } @media (max-width: 370px) { .hero .stat-card { grid-template-columns: 30px minmax(0, 1fr) !important; min-height: 72px !important; padding: 7px 6px !important; } .hero .stat-icon {width:30px!important;height:30px!important;font-size:14px!important} .hero .stat-number {font-size:22px!important} .hero .stat-label {font-size:7.5px!important} } /* Six homepage focus cards: balanced three-column, two-row mobile grid. */ @media (max-width: 600px) { .home-about-premium .focus-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin: 18px 0 !important; } .home-about-premium .focus-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; min-width: 0 !important; min-height: 112px !important; padding: 11px 6px 9px !important; border-radius: 14px !important; text-align: center !important; } .home-about-premium .focus-icon { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; border-radius: 10px !important; font-size: 16px !important; } .home-about-premium .focus-card > span:last-child { display: flex !important; min-width: 0 !important; flex-direction: column !important; align-items: center !important; } .home-about-premium .focus-card b { font-size: 10.5px !important; line-height: 1.15 !important; overflow-wrap: anywhere; } .home-about-premium .focus-card small { margin-top: 3px !important; font-size: 7.5px !important; line-height: 1.15 !important; overflow-wrap: anywhere; } } @media (max-width: 370px) { .home-about-premium .focus-grid {gap:6px!important} .home-about-premium .focus-card {min-height:108px!important;padding-inline:4px!important} .home-about-premium .focus-card b {font-size:9.5px!important} .home-about-premium .focus-card small {font-size:7px!important} } /* Homepage campaign cards do not expose internal supporter/source status labels. */ .campaign-section .campaign-card .campaign-live-meta { display: none !important; } /* Major Units heading with its supporting sentence in a compact right-side card. */ .units-section .section-head { align-items: center; } .units-section .section-head .section-sub { margin: 0; padding: 15px 18px; border: 1px solid rgba(232, 89, 26, .16); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,244,232,.84)); box-shadow: 0 12px 28px rgba(13,27,42,.08), inset 0 1px 0 #fff; color: #5f6d81; font-size: 13px; line-height: 1.45; } @media (max-width: 780px) { .units-section .section-head { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(150px, .78fr) !important; align-items: center !important; gap: 14px !important; } .units-section .section-head .section-title { font-size: 34px !important; } .units-section .section-head .section-sub { width: 100%; padding: 12px 13px; font-size: 11px; line-height: 1.35; } } @media (max-width: 390px) { .units-section .section-head { grid-template-columns: minmax(0, 1fr) 142px !important; gap: 9px !important; } .units-section .section-head .section-title {font-size:30px!important} .units-section .section-head .section-sub {padding:10px;font-size:10px} } /* Clearer homepage hero photography on phones without sacrificing text contrast. */ @media (max-width: 780px) { .hero::before { background: linear-gradient(180deg, rgba(253,250,244,.66) 0%, rgba(253,250,244,.43) 43%, rgba(253,250,244,.12) 100%), linear-gradient(90deg, rgba(253,250,244,.68) 0%, rgba(253,250,244,.36) 57%, rgba(253,250,244,.06) 100%) !important; } .hero::after { opacity: .35 !important; } }