1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="utf-8"/> 5<meta content="width=device-width, initial-scale=1.0" name="viewport"/> 6<title>NARBE Foundation - One and Two Button Games and Tools</title> 7<link rel="icon" type="image/png" href="images/branding/favicon.png"/> 8<link href="https://fonts.googleapis.com" rel="preconnect"/> 9<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/> 10<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/> 11<link rel="stylesheet" href="styles.css" /> 12<link rel="stylesheet" href="accessibility.css" /> 13<!-- OpenDyslexic Font for Accessibility --> 14<link href="https://fonts.cdnfonts.com/css/opendyslexic" rel="stylesheet"/> 15<!-- Google tag (gtag.js) -->
vendor: 65 bytes, lines 15-16
15 16<script async src="https://www.googletagmanager.com/gtag/js?id=
16G-BXR0H5SN9F
vendor: 13 bytes, line 16
16"></script>
17<script> 18
vendor: 136 bytes, lines 18-21
18window.dataLayer = window.dataLayer || []; 19 function gtag(){dataLayer.push(arguments);} 20 gtag('js', new Date()); 21 gtag('config', '
21G-BXR0H5SN9F
vendor: 5 bytes, line 21
21');
22</script>
22 23<!-- MailerLite Universal -->
24<script> 25 (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[]) 26 .push(arguments);},l=d.createElement(e),l.async=1,l.src=u, 27 n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);}) 28 (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml'); 29 ml('account', '1901217'); 30</script>
30 31<!-- End MailerLite Universal --> 32<!-- Givebutter Widget Script -->
33<script async src="https://widgets.givebutter.com/latest.umd.cjs?acct=JlNZTQzhAyoKDVPC&p=other"></script>
33 34<style> 35 :root { --header-h: 96px; } 36 * { margin: 0; padding: 0; box-sizing: border-box; } 37 html { scroll-behavior: smooth; } 38 body { 39 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 40 line-height: 1.6; 41 color: #1a1a1a; 42 background: #ffffff; 43 padding-top: var(--header-h); 44 } 45 section { scroll-margin-top: var(--header-h); } 46 .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } 47 48 /* Skip Link */ 49 .skip-link { 50 position: absolute; 51 top: -100px; 52 left: 0; 53 background: #000; 54 color: white; 55 padding: 8px; 56 z-index: 10001; 57 transition: top 0.3s; 58 } 59 .skip-link:focus { 60 top: 0; 61 } 62 63 /* Header */ 64 header { 65 position: fixed; 66 top: 0; 67 left: 0; 68 right: 0; 69 background: rgba(255, 255, 255, 0.95); 70 backdrop-filter: blur(10px); 71 border-bottom: 1px solid rgba(0,0,0,0.1); 72 z-index: 1000; 73 transition: all 0.3s ease; 74 } 75 76 nav { 77 display: flex; 78 justify-content: space-between; 79 align-items: center; 80 padding: 15px 0 0 0; 81 position: relative; 82 } 83 84 .logo { 85 font-size: 1.5rem; 86 font-weight: 700; 87 color: #6366f1; 88 display: flex;
89 align-items: center; 90 } 91 92 .logo img { 93 height: 80px; 94 width: auto; 95 max-width: 320px; 96 display: block; 97 } 98 99 .site-title { 100 display: none; 101 font-weight: 700; 102 color: #6366f1; 103 letter-spacing: 0.2px; 104 } 105 106 .nav-links { 107 display: flex; 108 list-style: none; 109 gap: 2rem; 110 } 111 112 .nav-links a { 113 text-decoration: none; 114 color: #333; 115 font-weight: 500; 116 } 117 118 .nav-links a:hover { 119 color: #6366f1; 120 } 121 122 .mobile-menu-btn { 123 display: none; 124 flex-direction: column; 125 cursor: pointer; 126 padding: 5px; 127 background: none; 128 border: none; 129 } 130 131 .mobile-menu-btn span { 132 width: 25px; 133 height: 3px; 134 background: #333; 135 margin: 3px 0; 136 transition: 0.3s; 137 border-radius: 2px; 138 } 139 140 header .donate-btn { 141 margin-top: 0; 142 margin-bottom: 0; 143 } 144 145 /* Mobile / tablet styles */ 146 @media (max-width: 992px) { 147 :root { --header-h: 84px; } 148 149 nav { 150 position: relative; 151 display: grid; 152 grid-template-columns: 1fr auto 1fr; 153 align-items: center; 154 gap: 0.9rem; 155 } 156 157 .logo { 158 justify-self: start; 159 grid-column: 1; 160 } 161 162 .site-title { 163 display: block; 164 grid-column: 2; 165 justify-self: center; 166 font-size: 1.125rem; 167 } 168 169 header .donate-btn { 170 display: none; 171 } 172 173 .mobile-menu-btn { 174 justify-self: end; 175 display: flex; 176 grid-column: 3; 177 } 178 179 .nav-links { 180 display: none; 181 position: absolute; 182 top: 100%; 183 right: 0; 184 left: auto; 185 min-width: 220px; 186 background: rgba(255, 255, 255, 0.98); 187 backdrop-filter: blur(10px); 188 flex-direction: column; 189 gap: 0; 190 box-shadow: 0 4px 20px rgba(0,0,0,0.1); 191 border-radius: 12px; 192 padding: 0.5rem 0; 193 transform: translateY(-10px); 194 opacity: 0; 195 visibility: hidden; 196 transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; 197 z-index: 999; 198 } 199 200 .nav-links.active { 201 display: flex; 202 transform: translateY(0); 203 opacity: 1; 204 visibility: visible; 205 } 206 207 .nav-links li { 208 padding: 0; 209 border-bottom: 1px solid rgba(0,0,0,0.06); 210 } 211 212 .nav-links li:last-child { 213 border-bottom: none; 214 } 215 216 .nav-links a { 217 display: block; 218 width: 100%; 219 padding: 0.8rem 1rem; 220 font-size: 1rem; 221 } 222 223 .logo img { 224 height: 70px; 225 max-width: 260px; 226 } 227 228 nav { 229 padding: 12px 0; 230 } 231 232 } 233 234 /* Buttons */ 235 .donate-btn { 236 background: linear-gradient(135deg, #6366f1, #8b5cf6); 237 color: white; 238 padding: 0.75rem 1.5rem; 239 border-radius: 50px; 240 text-decoration: none; 241 font-weight: 600; 242 transition: all 0.3s ease; 243 display: inline-block; 244 } 245 246 .donate-btn:hover { 247 box-shadow: 0 10px 25px rgba(99,102,241,0.45); 248 transform: translateY(-2px); 249 } 250 251 .cta-btn { 252 display: inline-block; 253 padding: 1rem 2rem; 254 border-radius: 50px; 255 text-decoration: none; 256 font-weight: 700; 257 font-size: 1.1rem; 258 transition: all 0.3s ease; 259 margin: 0.5rem; 260 } 261 262 .cta-primary { 263 background: #fff; 264 color: #6366f1; 265 box-shadow: 0 4px 15px rgba(0,0,0,0.1); 266 } 267 268 .cta-primary:hover { 269 transform: translateY(-2px); 270 box-shadow: 0 8px 25px rgba(0,0,0,0.2); 271 } 272 273 .cta-secondary { 274 background: rgba(255,255,255,0.2); 275 color: #fff; 276 border: 2px solid rgba(255,255,255,0.5); 277 } 278 279 .cta-secondary:hover { 280 background: rgba(255,255,255,0.3); 281 transform: translateY(-2px); 282 } 283 284 /* Hero */ 285 .hero { 286 padding: 90px 0 56px; 287 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 288 color: white; 289 text-align: center; 290 position: relative; 291 overflow: hidden; 292 } 293 294 .hero h1 { 295 font-size: clamp(2.4rem, 3.5vw + 1rem, 3.5rem); 296 font-weight: 800; 297 margin-bottom: 1rem; 298 } 299 300 .hero-subtitle { 301 font-size: 1.125rem; 302 margin-bottom: 2rem; 303 opacity: 0.95; 304 max-width: 800px; 305 margin-left: auto; 306 margin-right: auto; 307 } 308 309 /* Sections */ 310 .section-padding { padding: 56px 0; } 311 312 .section-header { 313 text-align: center; 314 margin-bottom: 3rem; 315 } 316 317 .section-title { 318 font-size: clamp(2rem, 1.5vw + 1rem, 2.5rem); 319 font-weight: 700; 320 color: #1e293b; 321 margin-bottom: 1rem; 322 } 323 324 .section-subtitle { 325 font-size: 1.05rem; 326 color: #64748b; 327 max-width: 800px; 328 margin: 0 auto; 329 line-height: 1.7; 330 } 331 332 /* Story (dark blue background) */ 333 .story-dark { 334 padding: 56px 0; 335 background: #1e293b; 336 color: white; 337 text-align: center; 338 } 339 340 .story-content { 341 display: grid; 342 grid-template-columns: 1fr 1fr; 343 gap: 4rem;
344 align-items: center; 345 text-align: left; 346 } 347 348 .story-text p { 349 font-size: 1.05rem; 350 color: rgba(255,255,255,0.9); 351 margin-bottom: 1rem; 352 line-height: 1.7; 353 } 354 355 .story-image img { 356 max-width: 100%; 357 height: auto; 358 border-radius: 15px; 359 } 360 361 /* Initiatives */ 362 .initiatives { 363 padding: 56px 0; 364 background: #ffffff; 365 } 366 367 .initiatives-grid { 368 display: grid; 369 grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); 370 gap: 2rem; 371 margin-top: 3rem; 372 } 373 374 .initiative-card { 375 background: white; 376 padding: 2rem; 377 border-radius: 15px; 378 box-shadow: 0 4px 6px rgba(0,0,0,0.05); 379 transition: transform 0.3s ease; 380 } 381 382 .initiative-card .card-logo { 383 height: 48px; 384 width: auto; 385 max-width: 160px; 386 display: block; 387 margin-bottom: 1rem; 388 object-fit: contain; 389 } 390 391 .initiative-card:hover { 392 transform: translateY(-5px); 393 box-shadow: 0 10px 15px rgba(0,0,0,0.1); 394 } 395 396 .initiative-card h3 { 397 color: #1e293b; 398 margin-bottom: 1rem; 399 font-size: 1.25rem; 400 } 401 402 .initiative-card p { 403 color: #64748b; 404 margin-bottom: 1.5rem; 405 } 406 407 .card-link { 408 color: #6366f1; 409 text-decoration: none; 410 font-weight: 600; 411 display: inline-flex;
412 align-items: center; 413 gap: 0.5rem; 414 } 415 416 .card-link:hover { 417 text-decoration: underline; 418 } 419 420 /* Support Section */ 421 .support-section { 422 padding: 56px 0 10px; 423 background: #fff; 424 } 425 426 .support-content { 427 max-width: 1200px; 428 margin: 0 auto; 429 display: grid; 430 grid-template-columns: 1fr 1fr; 431 gap: 4rem; 432 align-items: start; 433 text-align: left; 434 } 435 436 /* .support-text { align-self: center; } Removed to fix alignment */ 437 438 .support-text .section-title { 439 text-align: left; 440 } 441 442 .support-list { 443 list-style: none; 444 padding: 0; 445 margin: 2rem 0; 446 text-align: left; 447 } 448 449 .givebutter-embed { 450 display: flex; 451 justify-content: center; 452 width: 100%; 453 margin-top: 5rem; 454 } 455 456 @media (max-width: 900px) { 457 .support-content { 458 grid-template-columns: 1fr; 459 text-align: center; 460 gap: 2rem; 461 } 462 463 .givebutter-embed { 464 margin-top: 0; 465 } 466 467 .support-text .section-title { 468 text-align: center; 469 } 470 471 .support-list { 472 display: inline-block; 473 text-align: left; 474 margin: 2rem auto; 475 } 476 } 477
478 .support-list li { 479 margin-bottom: 0.75rem; 480 padding-left: 1.5rem; 481 position: relative; 482 color: #475569; 483 } 484 485 .support-list li::before { 486 content: "â¢"; 487 color: #6366f1; 488 font-weight: bold; 489 position: absolute; 490 left: 0; 491 } 492 493 .newsletter-section { 494 padding: 56px 0; 495 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 496 text-align: center; 497 } 498 499 .transparency-note { 500 font-size: 0.9rem; 501 color: #94a3b8; 502 margin: 2rem 0; 503 } 504 505 /* Contact section */ 506 .contact { 507 padding: 10px 0 20px; 508 background: #f1f5f9; 509 text-align: center; 510 } 511 512 .contact-info { 513 display: grid; 514 grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); 515 gap: 2rem; 516 margin: 3rem 0 0; 517 } 518 519 .contact-card { 520 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 521 color: white; 522 padding: 2rem; 523 border-radius: 15px; 524 box-shadow: 0 5px 20px rgba(0,0,0,0.08); 525 } 526 527 .contact-card h4 { 528 color: white; 529 margin-bottom: 1rem; 530 font-size: 1.2rem; 531 } 532 533 .contact-card p, .contact-card a { 534 color: rgba(255,255,255,0.9); 535 text-decoration: none; 536 } 537 538 @keyframes bounce-glow { 539 0%, 100% { transform: translateY(0); box-shadow: 0 5px 20px rgba(0,0,0,0.08); } 540 50% { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(99, 102, 241, 0.6); } 541 } 542 543 .contact-card.clickable { 544 animation: bounce-glow 3s infinite ease-in-out; 545 cursor: pointer; 546 position: relative; 547 overflow: hidden; 548 } 549 550 .contact-card.clickable::after { 551 content: ''; 552 position: absolute; 553 top: 0; left: 0; right: 0; bottom: 0; 554 border-radius: 15px; 555 box-shadow: inset 0 0 20px rgba(255,255,255,0.3); 556 pointer-events: none; 557 } 558 559 /* RSS Feed Section */ 560 .rss-feed-section { 561 padding: 56px 0; 562 background: #f8fafc; 563 } 564 565 .rss-grid { 566 display: grid; 567 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 568 gap: 2rem; 569 margin-top: 2rem; 570 } 571 572 .rss-card { 573 background: white; 574 border-radius: 12px; 575 overflow: hidden; 576 box-shadow: 0 4px 6px rgba(0,0,0,0.05); 577 transition: transform 0.3s ease, box-shadow 0.3s ease; 578 display: flex; 579 flex-direction: column; 580 height: 100%; 581 text-decoration: none; 582 color: inherit; 583 } 584 585 .rss-card:hover { 586 transform: translateY(-5px); 587 box-shadow: 0 10px 20px rgba(0,0,0,0.1); 588 } 589 590 .rss-image { 591 height: 200px; 592 background-size: cover; 593 background-position: center; 594 background-color: #e2e8f0; 595 } 596 597 .rss-content { 598 padding: 1.5rem; 599 flex-grow: 1; 600 display: flex; 601 flex-direction: column; 602 } 603 604 .rss-date { 605 font-size: 0.85rem; 606 color: #64748b; 607 margin-bottom: 0.5rem; 608 } 609 610 .rss-title { 611 font-size: 1.25rem; 612 font-weight: 700; 613 margin-bottom: 0.75rem; 614 color: #1e293b; 615 line-height: 1.4; 616 } 617 618 .rss-description { 619 font-size: 0.95rem; 620 color: #475569; 621 line-height: 1.6; 622 display: -webkit-box; 623 -webkit-line-clamp: 3; 624 line-clamp: 3; 625 -webkit-box-orient: vertical; 626 overflow: hidden; 627 } 628 629 /* Footer */ 630 footer { 631 background: #1e293b; 632 color: white; 633 text-align: center; 634 padding: 2rem 0; 635 } 636 637 .footer-social-links { 638 display: flex; 639 justify-content: center; 640 gap: 1.5rem; 641 margin-bottom: 1.5rem; 642 } 643 644 .footer-social-link { 645 display: inline-flex;
646 align-items: center; 647 justify-content: center; 648 width: 40px; 649 height: 40px; 650 background: rgba(255, 255, 255, 0.1); 651 border-radius: 50%; 652 color: white; 653 transition: all 0.3s ease; 654 } 655 656 .footer-social-link:hover { 657 background: rgba(255, 255, 255, 0.2); 658 transform: translateY(-2px); 659 } 660 661 .footer-social-link svg { 662 width: 20px; 663 height: 20px; 664 fill: currentColor; 665 } 666 667 @media (max-width: 900px) { 668 .story-content { 669 display: flex; 670 flex-direction: column; 671 gap: 2rem; 672 } 673 .story-image { order: 0; } 674 } 675 676 /* Mobile Donate Footer */ 677 .mobile-donate-footer { 678 display: none; 679 } 680 681 .footer-hidden .mobile-donate-footer { 682 opacity: 0; 683 pointer-events: none; 684 } 685 686 @media (max-width: 992px) { 687 /* Fixed mobile donate footer */ 688 .mobile-donate-footer { 689 display: flex; 690 position: fixed; 691 left: 0; 692 right: 0; 693 bottom: 0; 694 z-index: 1002; 695 justify-content: center; 696 background: rgba(241,245,249,0.96); 697 backdrop-filter: blur(10px); 698 border-top: 1px solid rgba(0,0,0,0.12); 699 padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); 700 transition: opacity 0.2s ease; 701 } 702 703 .mobile-donate-footer .container { 704 width: 100%; 705 display: flex; 706 justify-content: center; 707 } 708 709 .mobile-donate-footer .donate-btn { 710 margin: 0; 711 padding: 0.68rem 1.2rem; 712 font-size: 1rem; 713 } 714 715 body { 716 padding-bottom: calc(86px + env(safe-area-inset-bottom)); 717 } 718 } 719</style> 720 <style type="text/css">@import url("https://assets.mlcdn.com/fonts.css?version=1766132");</style> 721 <style type="text/css"> 722 /* LOADER */ 723 .ml-form-embedSubmitLoad { 724 display: inline-block; 725 width: 20px; 726 height: 20px; 727 } 728 729 .g-recaptcha { 730 transform: scale(1); 731 -webkit-transform: scale(1); 732 transform-origin: 0 0; 733 -webkit-transform-origin: 0 0; 734 } 735 736 .sr-only { 737 position: absolute; 738 width: 1px; 739 height: 1px; 740 padding: 0; 741 margin: -1px; 742 overflow: hidden; 743 clip: rect(0,0,0,0); 744 border: 0; 745 } 746 747 .ml-form-embedSubmitLoad:after { 748 content: " "; 749 display: block; 750 width: 11px; 751 height: 11px; 752 margin: 1px; 753 border-radius: 50%; 754 border: 4px solid #fff; 755 border-color: #ffffff #ffffff #ffffff transparent; 756 animation: ml-form-embedSubmitLoad 1.2s linear infinite; 757 } 758 @keyframes ml-form-embedSubmitLoad { 759 0% { 760 transform: rotate(0deg); 761 } 762 100% { 763 transform: rotate(360deg); 764 } 765 } 766 #mlb2-35030211.ml-form-embedContainer { 767 box-sizing: border-box; 768 display: table; 769 margin: 0 auto; 770 position: static; 771 width: 100% !important; 772 } 773 #mlb2-35030211.ml-form-embedContainer h4, 774 #mlb2-35030211.ml-form-embedContainer p, 775 #mlb2-35030211.ml-form-embedContainer span, 776 #mlb2-35030211.ml-form-embedContainer button { 777 text-transform: none !important; 778 letter-spacing: normal !important; 779 } 780 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper { 781 background-color: #ffffff; 782 border: none !important; 783 border-radius: 15px; 784 box-shadow: 0 10px 30px rgba(0,0,0,0.1); 785 box-sizing: border-box; 786 display: inline-block !important; 787 margin: 0; 788 padding: 0; 789 position: relative; 790 } 791 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper.embedPopup, 792 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 400px; } 793 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 400px; width: 100%; } 794 #mlb2-35030211.ml-form-embedContainer .ml-form-align-left { text-align: left; } 795 #mlb2-35030211.ml-form-embedContainer .ml-form-align-center { text-align: center; } 796 #mlb2-35030211.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; } 797 #mlb2-35030211.ml-form-embedContainer .ml-form-align-right { text-align: right; } 798 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img { 799 border-top-left-radius: 4px; 800 border-top-right-radius: 4px; 801 height: auto; 802 margin: 0 auto !important; 803 max-width: 100%; 804 width: undefinedpx; 805 } 806 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody, 807 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { 808 padding: 20px 20px 0 20px; 809 } 810 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal { 811 padding-bottom: 0; 812 } 813 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent, 814 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent { 815 text-align: left; 816 margin: 0 0 20px 0; 817 } 818 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4, 819 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 { 820 color: #1e293b; 821 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 822 font-size: 1.5rem; 823 font-weight: 700; 824 margin: 0 0 0.5rem 0; 825 text-align: center; 826 word-break: break-word; 827 } 828 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p, 829 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p { 830 color: #64748b; 831 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 832 font-size: 1rem; 833 font-weight: 400; 834 line-height: 1.6; 835 margin: 0 0 1.5rem 0; 836 text-align: center; 837 } 838 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul, 839 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol, 840 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul, 841 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol { 842 color: #64748b; 843 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 844 font-size: 14px; 845 } 846 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol, 847 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol { 848 list-style-type: lower-alpha; 849 } 850 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol ol, 851 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol ol { 852 list-style-type: lower-roman; 853 } 854 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a, 855 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a { 856 color: #000000; 857 text-decoration: underline; 858 } 859 860 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group { 861 text-align: left!important; 862 } 863 864 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label { 865 margin-bottom: 5px; 866 color: #333333; 867 font-size: 14px; 868 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 869 font-weight: bold; font-style: normal; text-decoration: none;; 870 display: inline-block; 871 line-height: 20px; 872 } 873 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child, 874 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child { 875 margin: 0; 876 } 877 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form { 878 margin: 0; 879 width: 100%; 880 } 881 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent, 882 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { 883 margin: 0 0 20px 0; 884 width: 100%; 885 } 886 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { 887 float: left; 888 } 889 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm { 890 margin: 0; 891 padding: 0 0 20px 0; 892 width: 100%; 893 height: auto; 894 float: left; 895 } 896 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow { 897 margin: 0 0 10px 0; 898 width: 100%; 899 } 900 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item { 901 margin: 0; 902 } 903 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal { 904 margin: 0; 905 } 906 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input { 907 background-color: #ffffff !important; 908 color: #1e293b !important; 909 border-color: #e2e8f0; 910 border-radius: 8px !important; 911 border-style: solid !important; 912 border-width: 1px !important; 913 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 914 font-size: 1rem !important; 915 height: auto; 916 line-height: 1.5 !important; 917 margin-bottom: 0; 918 margin-top: 0;
919 margin-left: 0; 920 margin-right: 0; 921 padding: 0.75rem 1rem !important; 922 width: 100% !important; 923 box-sizing: border-box !important; 924 max-width: 100% !important; 925 transition: border-color 0.3s ease; 926 } 927 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus { 928 border-color: #6366f1 !important; 929 outline: none; 930 } 931 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder, 932 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-webkit-input-placeholder { color: #333333; } 933 934 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder, 935 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-moz-placeholder { color: #333333; } 936 937 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder, 938 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-ms-input-placeholder { color: #333333; } 939 940 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder, 941 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-moz-placeholder { color: #333333; } 942 943 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea { 944 background-color: #ffffff !important; 945 color: #333333 !important; 946 border-color: #cccccc; 947 border-radius: 8px !important; 948 border-style: solid !important; 949 border-width: 1px !important; 950 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 951 font-size: 14px !important; 952 height: auto; 953 line-height: 21px !important; 954 margin-bottom: 0; 955 margin-top: 0; 956 padding: 10px 10px !important; 957 width: 100% !important; 958 box-sizing: border-box !important; 959 max-width: 100% !important; 960 } 961 962 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before { 963 border-color: #cccccc!important; 964 background-color: #ffffff!important; 965 } 966 967 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.custom-control-input[type="checkbox"]{ 968 box-sizing: border-box; 969 padding: 0; 970 position: absolute; 971 z-index: -1; 972 opacity: 0; 973 margin-top: 5px; 974 margin-left: -1.5rem; 975 overflow: visible; 976 } 977 978 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before { 979 border-radius: 4px!important; 980 } 981 982 983 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::after { 984 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); 985 } 986 987 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after { 988 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); 989 } 990 991 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::before { 992 border-color: #6366f1!important; 993 background-color: #6366f1!important; 994 } 995 996 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::after { 997 top: 2px; 998 box-sizing: border-box; 999 } 1000 1001 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { 1002 top: 0px!important; 1003 box-sizing: border-box!important; 1004 } 1005 1006 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { 1007 top: 0px!important; 1008 box-sizing: border-box!important; 1009 } 1010 1011 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after { 1012 top: 0px!important; 1013 box-sizing: border-box!important; 1014 position: absolute; 1015 left: -1.5rem; 1016 display: block; 1017 width: 1rem; 1018 height: 1rem; 1019 content: ""; 1020 } 1021 1022 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before { 1023 top: 0px!important; 1024 box-sizing: border-box!important; 1025 } 1026 1027 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::before { 1028 position: absolute; 1029 top: 4px; 1030 left: -1.5rem; 1031 display: block; 1032 width: 16px; 1033 height: 16px; 1034 pointer-events: none; 1035 content: ""; 1036 background-color: #ffffff; 1037 border: #adb5bd solid 1px; 1038 border-radius: 50%; 1039 } 1040 1041 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::after { 1042 position: absolute; 1043 top: 2px!important; 1044 left: -1.5rem; 1045 display: block; 1046 width: 1rem; 1047 height: 1rem; 1048 content: ""; 1049 } 1050 1051 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before { 1052 position: absolute; 1053 top: 4px; 1054 left: -1.5rem; 1055 display: block; 1056 width: 16px; 1057 height: 16px; 1058 pointer-events: none; 1059 content: ""; 1060 background-color: #ffffff; 1061 border: #adb5bd solid 1px; 1062 border-radius: 50%; 1063 } 1064 1065 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after { 1066 position: absolute; 1067 top: 0px!important; 1068 left: -1.5rem; 1069 display: block; 1070 width: 1rem; 1071 height: 1rem; 1072 content: ""; 1073 } 1074 1075 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { 1076 position: absolute; 1077 top: 0px!important; 1078 left: -1.5rem; 1079 display: block; 1080 width: 1rem; 1081 height: 1rem; 1082 content: ""; 1083 } 1084 1085 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-radio .custom-control-label::after { 1086 background: no-repeat 50%/50% 50%; 1087 } 1088 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-checkbox .custom-control-label::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { 1089 background: no-repeat 50%/50% 50%; 1090 } 1091 1092 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-control, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-control { 1093 position: relative; 1094 display: block; 1095 min-height: 1.5rem; 1096 padding-left: 1.5rem; 1097 } 1098 1099 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input { 1100 position: absolute; 1101 z-index: -1; 1102 opacity: 0; 1103 box-sizing: border-box; 1104 padding: 0; 1105 } 1106 1107 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label { 1108 color: #000000; 1109 font-size: 12px!important; 1110 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1111 line-height: 22px; 1112 margin-bottom: 0; 1113 position: relative; 1114 vertical-align: top; 1115 font-style: normal; 1116 font-weight: 700; 1117 } 1118 1119 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select, #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-select { 1120 background-color: #ffffff !important; 1121 color: #333333 !important; 1122 border-color: #cccccc; 1123 border-radius: 4px !important; 1124 border-style: solid !important; 1125
1125 border-width: 1px !important; 1126 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1127 font-size: 14px !important; 1128 line-height: 20px !important; 1129 margin-bottom: 0; 1130 margin-top: 0; 1131 padding: 10px 28px 10px 12px !important; 1132 width: 100% !important; 1133 box-sizing: border-box !important; 1134 max-width: 100% !important; 1135 height: auto; 1136 display: inline-block; 1137 vertical-align: middle; 1138 background: url('https://assets.mlcdn.com/ml/images/default/dropdown.svg') no-repeat right .75rem center/8px 10px; 1139 -webkit-appearance: none; 1140 -moz-appearance: none; 1141 appearance: none; 1142 } 1143 1144 1145 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow { 1146 height: auto; 1147 width: 100%; 1148 float: left; 1149 } 1150 .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 70%; float: left; } 1151 .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: 30%; float: left; } 1152 .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal.labelsOn { padding-top: 25px; } 1153 .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; padding-right: 10px; } 1154 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input { 1155 background-color: #ffffff; 1156 color: #333333; 1157 border-color: #cccccc; 1158 border-radius: 4px; 1159 border-style: solid; 1160 border-width: 1px; 1161 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1162 font-size: 14px; 1163 line-height: 20px; 1164 margin-bottom: 0; 1165 margin-top: 0; 1166 padding: 10px 10px; 1167 width: 100%; 1168 box-sizing: border-box; 1169 overflow-y: initial; 1170 } 1171 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button { 1172 background-color: #691fff !important; 1173 border-color: #691fff; 1174 border-style: solid; 1175 border-width: 1px; 1176 border-radius: 4px; 1177 box-shadow: none; 1178 color: #ffffff !important; 1179 cursor: pointer; 1180 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1181 font-size: 14px !important; 1182 font-weight: 700; 1183 line-height: 20px; 1184 margin: 0 !important; 1185 padding: 10px !important; 1186 width: 100%; 1187 height: auto; 1188 } 1189 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover { 1190 background-color: #ac63ff !important; 1191 border-color: #ac63ff !important; 1192 } 1193 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] { 1194 box-sizing: border-box; 1195 padding: 0; 1196 position: absolute; 1197 z-index: -1; 1198 opacity: 0; 1199 margin-top: 5px; 1200 margin-left: -1.5rem; 1201 overflow: visible; 1202 } 1203 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description { 1204 color: #000000; 1205 display: block; 1206 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1207 font-size: 12px; 1208 text-align: left; 1209 margin-bottom: 0; 1210 position: relative; 1211 } 1212 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label { 1213 font-weight: normal; 1214 margin: 0; 1215 padding: 0; 1216 position: relative; 1217 display: block; 1218 min-height: 24px; 1219 padding-left: 24px; 1220 1221 } 1222 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a { 1223 color: #000000; 1224 text-decoration: underline; 1225 } 1226 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p { 1227 color: #000000 !important; 1228 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; 1229 font-size: 12px !important; 1230 font-weight: normal !important; 1231 line-height: 18px !important; 1232 padding: 0 !important; 1233 margin: 0 5px 0 0 !important; 1234 } 1235 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child { 1236 margin: 0; 1237 } 1238 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { 1239 margin: 0 0 20px 0; 1240 float: left; 1241 width: 100%; 1242 } 1243 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button { 1244 background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; 1245 border: none !important; 1246 border-radius: 50px !important; 1247 box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; 1248 color: #ffffff !important; 1249 cursor: pointer; 1250 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; 1251 font-size: 1rem !important; 1252 font-weight: 600 !important; 1253 line-height: 1.5 !important; 1254 height: auto; 1255 padding: 0.75rem 1.5rem !important; 1256 width: 100% !important; 1257 box-sizing: border-box !important; 1258 transition: all 0.3s ease !important; 1259 } 1260 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading { 1261 display: none; 1262 } 1263 .ml-subscribe-close { 1264 width: 30px; 1265 height: 30px; 1266 background: url('https://assets.mlcdn.com/ml/images/default/modal_
1266close.png') no-repeat; 1267 background-size: 30px; 1268 cursor: pointer; 1269 margin-top: -10px; 1270 margin-right: -10px; 1271 position: absolute; 1272 top: 0; 1273 right: 0; 1274 } 1275 .ml-error input, .ml-error textarea, .ml-error select { 1276 border-color: red!important; 1277 } 1278 1279 .ml-error .custom-checkbox-radio-list { 1280 border: 1px solid red !important; 1281 border-radius: 4px; 1282 padding: 10px; 1283 } 1284 1285 .ml-error .label-description, 1286 .ml-error .label-description p, 1287 .ml-error .label-description p a, 1288 .ml-error label:first-child { 1289 color: #ff0000 !important; 1290 } 1291 1292 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p, 1293 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter { 1294 color: #ff0000 !important; 1295 } 1296 @media only screen and (max-width: 400px){ 1297 1298 .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; } 1299 .ml-form-formContent.horozintalForm { float: left!important; } 1300 .ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; } 1301 .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; } 1302 .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; } 1303 .ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; } 1304 .ml-form-formContent.horozintalForm .ml-button-horizontal.labelsOn { padding-top: 0px!important; } 1305 1306 } 1307 </style> 1308 <style type="text/css"> 1309 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions { text-align: left; float: left; width: 100%; } 1310 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent { 1311 margin: 0 0 15px 0; 1312 text-align: left; 1313 } 1314 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.horizontal { 1315 margin: 0 0 15px 0; 1316 } 1317 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent h4 { 1318 color: #000000; 1319 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1320 font-size: 12px; 1321 font-weight: 700; 1322 line-height: 18px; 1323 margin: 0 0 10px 0; 1324 word-break: break-word; 1325 } 1326 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent p { 1327 color: #000000; 1328 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1329 font-size: 12px; 1330 line-height: 18px; 1331 margin: 0 0 10px 0; 1332 } 1333 1334 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p { 1335 color: #000000; 1336 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1337 font-size: 12px; 1338 line-height: 22px; 1339 margin: 0 0 10px 0; 1340 } 1341 1342 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p a { 1343 color: #6366f1; 1344 } 1345 1346 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p:last-child { 1347 margin: 0; 1348 } 1349 1350 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptions { 1351 margin: 0; 1352 padding: 0; 1353 } 1354 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox { 1355 margin: 0 0 10px 0; 1356 } 1357 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox:last-child { 1358 margin: 0; 1359 } 1360 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox label { 1361 font-weight: normal; 1362 margin: 0; 1363 padding: 0; 1364 position: relative; 1365 display: block; 1366 min-height: 24px; 1367 padding-left: 24px; 1368 } 1369 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description { 1370 color: #000000; 1371 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1372 font-size: 12px; 1373 line-height: 18px; 1374 text-align: left; 1375 margin-bottom: 0; 1376 position: relative; 1377 font-style: normal; 1378 font-weight: 700; 1379 } 1380 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .description { 1381 color: #000000; 1382 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1383 font-size: 12px; 1384 font-style: italic; 1385 font-weight: 400; 1386 line-height: 18px; 1387 margin: 5px 0 0 0; 1388 } 1389 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR { 1390 padding-bottom: 20px; 1391 } 1392 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR p { 1393 color: #000000; 1394 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 1395 font-size: 10px; 1396 line-height: 14px; 1397 margin: 0; 1398 padding: 0; 1399 } 1400 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR p a { 1401 color: #000000; 1402 text-decoration: underline; 1403 1404 } 1405 @media (max-width: 768px) { 1406 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent p { 1407 font-size: 12px !important; 1408 line-height: 18px !important; 1409 } 1410 #mlb2-35030211.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR p { 1411 font-size: 10px !important; 1412 line-height: 14px !important; 1413 } 1414 } 1415 </style> 1416</head> 1417<body> 1418 <a href="#main" class="skip-link">Skip to main content</a> 1419 1420 <header> 1421 <nav class="container"> 1422 <div class="logo"> 1423 <a aria-label="Home" href="index.html"> 1424 <img alt="NARBE Foundation Logo" src="https://raw.githubusercontent.com/narbefoundation/images/refs/heads/main/purple%20more%20space.png"/> 1425 </a> 1426 </div> 1427 <div class="site-title">NARBE Foundation</div> 1428 <ul class="nav-links" id="nav-links" role="navigation" aria-label="Main navigation"> 1429 <li><a href="index.html" aria-current="page">Home</a></li> 1430 <li><a href="#founder">Founder</a></li> 1431 <li><a href="#projects">Projects</a></li> 1432 <li><a href="#news">News</a></li> 1433 <li><a href="resources.html">Resources</a></li> 1434 <li><a href="#contact">Contact</a></li> 1435 </ul> 1436 <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="nav-links">
1437 <span aria-hidden="true"></span> 1438 <span aria-hidden="true"></span> 1439 <span aria-hidden="true"></span> 1440 </button> 1441 <a class="donate-btn" href="#support">Donate</a> 1442 </nav> 1443 </header> 1444 1445 <main id="main"> 1446 <section class="hero"> 1447 <div class="container"> 1448 <h1>Our Mission</h1> 1449 <p class="hero-subtitle">NARBE Foundation invests in projects that prove people with complex needs deserve autonomy, connection, and choice. We support the builders and share what works.</p> 1450 1451 <div style="margin-top: 1rem;"> 1452 <a href="#projects" class="cta-btn cta-primary">See Our Projects</a> 1453 <a href="#support" class="cta-btn cta-secondary">Support Our Work</a> 1454 </div> 1455 </div> 1456 </section> 1457 1458 <section class="story-dark" id="founder"> 1459 <div class="container"> 1460 <div class="story-content"> 1461 <div class="story-text"> 1462 <h2 class="section-title" style="color:#fff;">Founders' Story</h2> 1463 <p>We are Ari, Nancy, and Ben â a family, and a team. Ben lives with an ultra-rare condition called TUBB4A-related leukodystrophy. As his condition progressed, he became nonspeaking and quadriplegic, leaving him with very limited options for interaction.</p> 1464 <p>When we searched for tools to help Ben, most focused only on basic communication. Ben wanted more â to play games, browse the internet, watch his favorite shows, and truly connect with the world. So, we built our own custom two-button system that Ben controls with his head.</p> 1465 <p>Our focus is now on sharing these games and tools, optimized specifically for one and two button users, so others can find the same joy and connection.</p> 1466 </div> 1467 <div class="story-image"> 1468 <img alt="NARBE Foundation Family" src="https://raw.githubusercontent.com/narbefoundation/images/main/website-family.png"> 1469 </div> 1470 </div> 1471 </div> 1472 </section> 1473 1474 <section class="initiatives" id="projects"> 1475 <div class="container"> 1476 <div class="section-header"> 1477 <h2 class="section-title">Our Projects</h2> 1478 <p class="section-subtitle">NARBE Foundation supports independent projects that advance switch access. Here's what we're backing right now.</p> 1479 </div> 1480 <div class="initiatives-grid"> 1481 <div class="initiative-card"> 1482 <img class="card-logo" src="images/branding/beamin-benny.png" alt="Benny's Hub logo" /> 1483 <h3>Benny's Hub</h3> 1484 <p>The project that started it all. Built specifically for Ben â nonspeaking, quadriplegic, with two-button access â and released for anyone to use. Available as a free web app, and the Electron App is available on GitHub.</p> 1485 <a href="https://narbehouse.github.io/bennyshub" target="_blank" rel="noopener" class="card-link">Explore Benny's Hub →</a> 1486 </div> 1487 <div class="initiative-card"> 1488 <img class="card-logo" src="images/logos/switchedgames_emblem_v5.svg" alt="SwitchedGames logo" /> 1489 <h3>SwitchedGames</h3> 1490 <p>A growing library of free one and two switch games, built by NARBE House and a community of volunteers. Play free in your browser and explore games designed for one and two switch access.</p> 1491 <a href="https://switchedgames.org" target="_blank" rel="noopener" class="card-link">Explore SwitchedGames →</a> 1492 </div> 1493 <div class="initiative-card"> 1494 <svg class="card-logo" viewBox="0 0 64 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> 1495 <circle cx="16" cy="16" r="14" fill="#ef4444"/> 1496 <circle cx="16" cy="16" r="14" fill="none" stroke="#b91c1c" stroke-width="2"/> 1497 <ellipse cx="11" cy="10" rx="5" ry="3" fill="#ffffff" opacity="0.35"/> 1498 <circle cx="48" cy="16" r="14" fill="#3b82f6"/> 1499 <circle cx="48" cy="16" r="14" fill="none" stroke="#1d4ed8" stroke-width="2"/> 1500 <ellipse cx="43" cy="10" rx="5" ry="3" fill="#ffffff" op
1500acity="0.35"/> 1501 </svg> 1502 <h3>Adaptive Switch Kit Program</h3> 1503 <p>Free 2-button switch kits for recreational use, funded entirely by our community and partners. Apply online â first come, first served, while supplies last.</p> 1504 <a href="switchkit.html" class="card-link">Explore the Adaptive Switch Kit Program →</a> 1505 </div> 1506 <div class="initiative-card"> 1507 <h3>More Coming Soon</h3> 1508 <p>We're always looking for new ways to support this community â through grants, partnerships, and new projects. Check back as we grow.</p> 1509 <a href="#news" class="card-link">Get Updates →</a> 1510 </div> 1511 </div> 1512 </div> 1513 </section> 1514 1515 <section class="rss-feed-section" id="news"> 1516 <div class="container"> 1517 <div class="section-header"> 1518 <h2 class="section-title">Latest Updates</h2> 1519 <p class="section-subtitle">News and announcements from the NARBE Foundation.</p> 1520 </div> 1521 <div class="rss-grid" id="rss-feed-container"> 1522 <!-- RSS items will be loaded here --> 1523 <div style="grid-column: 1/-1; text-align: center; padding: 2rem; color: #64748b;"> 1524 Loading updates... 1525 </div> 1526 </div> 1527 1528 <div style="text-align: center; margin-top: 3rem;"> 1529 <a href="https://narbefoundation.blogspot.com/" target="_blank" rel="noopener" class="donate-btn">View All News</a> 1530 </div> 1531 </div> 1532 </section> 1533 1534 <section class="newsletter-section" id="newsletter"> 1535 <div class="container"> 1536 <div id="mlb2-32971103" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-32971103"> 1537 <div class="ml-form-align-center "> 1538 <div class="ml-form-embedWrapper embedForm"> 1539 1540 1541 1542 1543 <div class="ml-form-embedBody ml-form-embedBodyDefault row-form"> 1544 1545 <div class="ml-form-embedContent"> 1546 1547 <h4>Sign Up for Updates</h4> 1548 <p style="background-color: transparent;">Get the latest news direct to your email.</p> 1549 1550 </div> 1551 1552 <form class="ml-block-form" action="https://assets.mailerlite.com/jsonp/1901217/forms/170242737816208431/subscribe" data-code="" method="post" target="_blank"> 1553 <div class="ml-form-formContent"> 1554 1555 1556 1557 <div class="ml-form-fieldRow ml-last-item"> 1558 <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required"> 1559 1560 1561 1562 1563 <!-- input --> 1564 <input aria-label="email" aria-required="true" type="email" class="form-control" data-inputmask="" name="fields[email]" placeholder="Enter your email" autocomplete="email"> 1565 <!-- /input --> 1566 1567 <!-- textarea --> 1568 1569 <!-- /textarea --> 1570 1571 <!-- select --> 1572 1573 <!-- /select --> 1574 1575 <!-- checkboxes --> 1576 1577 <!-- /checkboxes --> 1578 1579 <!-- radio --> 1580 1581 <!-- /radio --> 1582 1583 <!-- countries --> 1584 1585 <!-- /countries --> 1586 1587 1588 1589 1590 1591 </div> 1592 </div> 1593 1594 </div> 1595 1596 1597 1598 <!-- reCAPTCHA (form has reCAPTCHA + double opt-in enabled in MailerLite) --> 1599 <div class="ml-form-recaptcha ml-validate-required"> 1600 <style type="text/css"> 1601 #mlb2-32971103 .ml-form-recaptcha { 1602 display: flex; 1603 justify-content: center; 1604 margin: 0 0 16px; 1605 } 1606 #mlb2-32971103 .ml-form-recaptcha.ml-error iframe { 1607 border: solid 1px #ff0000; 1608 } 1609 @media screen and (max-width: 480px) { 1610 #mlb2-32971103 .g-recaptcha { 1611 transform: scale(0.85); 1612 -webkit-transform: scale(0.85); 1613 transform-origin: center top; 1614 -webkit-transform-origin: center top; 1615 } 1616 } 1617 </style>
vendor: 111 bytes, lines 1617-1619
1617 1618 <script src="https://www.google.com/recaptcha/api.js" async defer></script> 1619
1619<div class="g-recaptcha" data-sitekey="6Lf1KHQUAAAAAFNKEX1hdSWCS3mRMv4FlFaNslaD"></div> 1620 </div> 1621 1622 <input type="hidden" name="ml-submit" value="1"> 1623 1624 <div class="ml-form-embedSubmit"> 1625 1626 <button type="submit" class="primary">Subscribe</button> 1627 1628 <button disabled="disabled" style="display: none;" type="button" class="loading"> 1629 <div class="ml-form-embedSubmitLoad"></div> 1630 <span class="sr-only">Loading...</span> 1631 </button> 1632 </div> 1633 1634 <!-- Privacy policy --> 1635 <div class="ml-form-embedPermissions"> 1636 <div class="ml-form-embedPermissionsContent default privacy-policy"> 1637 <p style="background-color: transparent;">You can unsubscribe anytime. </p> 1638 </div> 1639 </div> 1640 <!-- /Privacy policy --> 1641 1642 1643 <input type="hidden" name="anticsrf" value="true"> 1644 </form> 1645 </div> 1646 1647 <div class="ml-form-successBody row-success" style="display: none"> 1648 1649 <div class="ml-form-successContent"> 1650 1651 <h4>Thank you!</h4> 1652 1653 <p>Almost done! Check your email and click the confirmation link to finish subscribing. Don’t see it within a few minutes? Check your spam or promotions folder.</p> 1654 1655 1656 </div> 1657 1658 </div> 1659 </div> 1660 </div> 1661 </div> 1662 1663 1664 1665 1666 1667
1667<script> 1668 function ml_webform_success_32971103() { 1669 var $ = ml_jQuery || jQuery; 1670 $('.ml-subscribe-form-32971103 .row-success').show(); 1671 $('.ml-subscribe-form-32971103 .row-form').hide(); 1672 } 1673 </script>
1673 1674 1675 1676
1676<script src="https://groot.mailerlite.com/js/w/webforms.min.js?v176e10baa5e7ed80d35ae235be3d5024" type="text/javascript"></script>
1676 1677
1677<script> 1678 fetch("https://assets.mailerlite.com/jsonp/1901217/forms/170242737816208431/takel") 1679 </script>
1679 1680 </div> 1681 </section> 1682 1683 <section class="support-section" id="support"> 1684 <div class="container"> 1685 <div class="support-content"> 1686 <div class="support-text"> 1687 <h2 class="section-title">Support Us</h2> 1688 1689 <ul class="support-list" style="margin: 1rem 0;"> 1690 <li>Develop open-source games and tools for people with complex accessibility needs</li> 1691 <li>Maintain free libraries of switch-accessible games and software</li> 1692 <li>Design and distribute low-cost DIY hardware solutions</li> 1693 <li>Fund grants and partnerships with builders and organizations</li> 1694 <li>Cover hosting, infrastructure, and essential software</li> 1695 <li>Sustain this work long-term so these tools stay free and available</li> 1696 </ul> 1697 1698 <p class="transparency-note">The NARBE Foundation is a registered nonprofit. Donations fund the infrastructure that keeps our projects and community free.</p> 1699 <p style="margin-top: 1rem;"><a href="https://givebutter.com/donate-narbe" target="_blank" rel="noopener" style="color: #6366f1; font-weight: 600;">Givebutter Campaign</a></p> 1700 </div> 1701 1702 <div class="givebutter-embed"> 1703 <givebutter-widget id="j2VzQj"></givebutter-widget> 1704 <noscript> 1705 <div class="fallback-message"> 1706 JavaScript is required to use the embedded donation form. 1707 Please donate here: 1708 <a href="https://givebutter.com/donate-narbe">https://givebutter.com/donate-narbe</a> 1709 </div> 1710 </noscript> 1711 </div> 1712 </div> 1713 </div> 1714 </section> 1715 1716 <section class="contact" id="contact"> 1717 <div class="container"> 1718 <div class="section-header"> 1719 <h2 class="section-title">Get In Touch</h2> 1720 <p class="section-subtitle">We'd love to hear from you.</p> 1721 </div> 1722 <div class="contact-info"> 1723 <div class="contact-card"> 1724 <h4>Email</h4> 1725 <p><a href="mailto:[email protected]" style="color:rgba(255,255,255,0.9); text-decoration:none;">[email protected]</a></p> 1726 </div> 1727 <a class="contact-card clickable" href="https://forms.gle/au6DDP1FExDm5DRd6" rel="noopener noreferrer" style="text-decoration: none; color: inherit;" target="_blank"> 1728 <h4>Need Help?</h4> 1729 <p>Complete our intake form to get started</p> 1730 </a> 1731 <div class="contact-card"> 1732 <h4>Mail and Packages</h4> 1733 <p>NARBE Foundation<br/>5775 Post Rd #149<br/>East Greenwich, RI 02818</p> 1734 </div> 1735 </div> 1736 <p style="margin-top: 2rem; color: #64748b;">To apply for a kit, visit our <a href="switchkit.html" style="color: #6366f1; font-weight: 600;">Adaptive Switch Kit Program page</a>.</p> 1737 </div> 1738 </section> 1739 </main> 1740 1741 <footer> 1742 <div class="container"> 1743 <div class="footer-social-links"> 1744 <a class="footer-social-link" href="https://www.facebook.com/narbefoundation" target="_blank" rel="noopener noreferrer" aria-label="Facebook"> 1745 <svg class="facebook-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1746 <path d="M22.675 0h-21.35c-0.733 0-1.325 0.592-1.325 1.325v21.351c0 0.733 0.592 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.894-4.788 4.659-4.788 1.325 0 2.463 0.099 2.795 0.143v3.24l-1.918 0.001c-1.504 0-1.794 0.715-1.794 1.763v2.312h3.587l-0.467 3.622h-3.12v9.294h6.116c0.733 0 1.325-0.591 1.325-1.324v-21.351c0-0.733-0.592-1.325-1.325-1.325z"/> 1747 </svg> 1748 </a> 1749 <a class="footer-social-link" href="https://www.youtube.com/@narbefoundation" target="_blank" rel="noopener noreferrer" aria-label="YouTube"> 1750 <svg class="youtube-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1751 <path d="M23.498 6.186c-0.273-1.031-1.081-1.84-2.112-2.112-1.863-0.504-9.326-0.504-9.326-0.504s-7.463 0-9.326 0.504c-1.031 0.273-1.84 1.081-2.112 2.112-0.504 1.863-0.504 5.754-0.504 5.754s0 3.891 0.504 5.754c0.273 1.031 1.081 1.84 2.112 2.112 1.863 0.504 9.326 0.504 9.326 0.504s7.463 0 9.326-0.504c1.031-0.273 1.84-1.081 2.112-2.112 0.504-1.863 0.504-5.754 0.504-5.754s0-3.891-0.504-5.754zM9.545 15.568v-7.136l6.545 3.568-6.545 3.568z"/> 1752 </svg> 1753 </a> 1754 <a class="footer-social-link" href="https://www.instagram.com/narbefoundation" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
1755 <svg class="instagram-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1756 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path> 1757 </svg> 1758 </a> 1759 <a class="footer-social-link" href="https://discord.gg/b82emKJhTC" target="_blank" rel="noopener noreferrer" aria-label="Discord"> 1760 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1761 <path d="M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2496a18.4034 18.4034 0 0 0-5.4868 0 20.149 20.149 0 0 0-.6172-1.2496.077.077 0 0 0-.0785-.0376 19.7238 19.7238 0 0 0-4.8852 1.5151.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1569 2.419zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419z"/> 1762 </svg> 1763 </a> 1764 </div> 1765 <p>© 2026 NARBE Foundation. Helping others unlock the world, one switch at a time.</p> 1766 <div class="footer-legal"> 1767 <p>501(c)(3) Nonprofit Organization</p> 1768 <p>EIN: 39-3343898</p> 1769 <p>All donations are tax-deductible to the fullest extent allowed by law.</p> 1770 </div> 1771 </div> 1772 </footer> 1773 1774<div class="mobile-donate-footer"> 1775 <div class="container"> 1776 <a class="donate-btn" href="#support">Donate</a> 1777 </div> 1778</div> 1779 1780
1780<script> 1781 // Sync header height to CSS variable 1782 function syncHeaderHeightVar() { 1783 const header = document.querySelector('header'); 1784 if (!header) return; 1785 const h = Math.ceil(header.getBoundingClientRect().height); 1786 document.documentElement.style.setProperty('--header-h', h + 'px'); 1787 } 1788 window.addEventListener('resize', () => { 1789 clearTimeout(window.__hdrT); 1790 window.__hdrT = setTimeout(syncHeaderHeightVar, 100); 1791 }); 1792 document.addEventListener('DOMContentLoaded', () => { 1793 syncHeaderHeightVar(); 1794 window.setTimeout(syncHeaderHeightVar, 200); 1795 window.addEventListener('load', syncHeaderHeightVar); 1796 }); 1797 1798 // Mobile menu toggle 1799 document.addEventListener('DOMContentLoaded', () => { 1800 const mobileMenuBtn = document.getElementById('mobileMenuBtn'); 1801 const navLinks = document.querySelector('.nav-links'); 1802 1803 if (mobileMenuBtn && navLinks) { 1804 mobileMenuBtn.addEventListener('click', () => { 1805 navLinks.classList.toggle('active'); 1806 mobileMenuBtn.classList.toggle('active'); 1807 const isExpanded = navLinks.classList.contains('active'); 1808 mobileMenuBtn.setAttribute('aria-expanded', isExpanded); 1809 const spans = mobileMenuBtn.querySelectorAll('span'); 1810 if (isExpanded) { 1811 spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)'; 1812 spans[1].style.opacity = '0'; 1813 spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)'; 1814 } else { 1815 spans[0].style.transform = 'none'; 1816 spans[1].style.opacity = '1'; 1817 spans[2].style.transform = 'none'; 1818 } 1819 }); 1820 1821 navLinks.addEventListener('click', (e) => { 1822 if (e.target.tagName === 'A') { 1823 navLinks.classList.remove('active'); 1824 mobileMenuBtn.classList.remove('active'); 1825 mobileMenuBtn.setAttribute('aria-expanded', 'false'); 1826 const spans = mobileMenuBtn.querySelectorAll('span'); 1827 spans[0].style.transform = 'none'; 1828 spans[1].style.opacity = '1'; 1829 spans[2].style.transform = 'none'; 1830 } 1831 }); 1832 1833 document.addEventListener('click', (e) => { 1834 if (!mobileMenuBtn.contains(e.target) && !navLinks.contains(e.target)) { 1835 navLinks.classList.remove('active'); 1836 mobileMenuBtn.classList.remove('active'); 1837 mobileMenuBtn.setAttribute('aria-expanded', 'false'); 1838 const spans = mobileMenuBtn.querySelectorAll('span'); 1839 spans[0].style.transform = 'none'; 1840 spans[1].style.opacity = '1'; 1841 spans[2].style.transform = 'none'; 1842 } 1843 }); 1844 } 1845 }); 1846 1847 // RSS Feed Loader 1848 document.addEventListener('DOMContentLoaded', () => { 1849 // Use Blogger's native JSON feed (more reliable than rss2json)
1850 const BLOGGER_JSON_URL = 'https://narbefoundation.blogspot.com/feeds/posts/default?alt=json&max-results=3'; 1851 const container = document.getElementById('rss-feed-container'); 1852 1853 if (!container) return; 1854 1855 // The feed renders after the browser has already jumped to a #link, so sections 1856 // below it (like #newsletter) get pushed down. Re-jump once the feed is in, 1857 // unless the visitor has already started scrolling on their own. 1858 let userScrolled = false; 1859 ['wheel', 'touchmove', 'keydown'].forEach(ev => 1860 window.addEventListener(ev, () => { userScrolled = true; }, { once: true, passive: true })); 1861 function restoreHashTarget() { 1862 if (userScrolled || !location.hash) return; 1863 const target = document.getElementById(location.hash.slice(1)); 1864 if (target) target.scrollIntoView({ behavior: 'instant', block: 'start' }); 1865 } 1866 1867 // Helper function to upgrade Blogger/Google image URLs to high resolution 1868 function getHighResImage(url) { 1869 if (!url) return null; 1870 // Remove any size restrictions from Blogger/Google URLs 1871 // Patterns: /s72-c/, /s320/, /w465-h620/, =s72-c, =s320, =w400-h300-c, etc. 1872 let highRes = url 1873 .replace(/\/s\d+(-[a-z])?(-c)?\//gi, '/s1600/') 1874 .replace(/\/w\d+(-h\d+)?(-[a-z])?(-c)?\//gi, '/s1600/') 1875 .replace(/=s\d+(-[a-z])?(-c)?$/gi, '=s1600') 1876 .replace(/=w\d+(-h\d+)?(-[a-z])?(-c)?$/gi, '=s1600') 1877 .replace(/-rw$/, ''); 1878 return highRes; 1879 } 1880 1881 // Use JSONP for Blogger feed (bypasses CORS) 1882 const script = document.createElement('script'); 1883 window.bloggerCallback = function(data) { 1884 try { 1885 if (data.feed && data.feed.entry && data.feed.entry.length > 0) { 1886 container.innerHTML = ''; // Clear loading message 1887 1888 data.feed.entry.forEach(entry => { 1889 let imageUrl = 'images/branding/favicon.png'; // Default fallback 1890 1891 // Priority 1: Extract image from content (best quality source) 1892 const content = entry.content ? entry.content.$t : ''; 1893 const imgMatch = content.match(/<img[^>]+src=["']([^"']+)["']/i); 1894 1895 if (imgMatch && imgMatch[1]) { 1896 imageUrl = getHighResImage(imgMatch[1]); 1897 } else if (entry.media$thumbnail && entry.media$thumbnail.url) { 1898 // Priority 2: media:thumbnail (upgrade from 72px) 1899 imageUrl = getHighResImage(entry.media$thumbnail.url); 1900 } 1901 1902 // Get the post link 1903 let postLink = '#'; 1904 if (entry.link) { 1905 const altLink = entry.link.find(l => l.rel === 'alternate'); 1906 if (altLink) postLink = altLink.href; 1907 } 1908
1909 // Clean up description (remove HTML tags) 1910 const cleanDesc = content.replace(/<[^>]*>?/gm, '').substring(0, 150) + '...'; 1911 1912 // Format date 1913 const date = new Date(entry.published.$t).toLocaleDateString('en-US', { 1914 year: 'numeric', 1915 month: 'long', 1916 day: 'numeric' 1917 }); 1918 1919 const card = document.createElement('a'); 1920 card.className = 'rss-card'; 1921 card.href = postLink; 1922 card.target = '_blank'; 1923 card.rel = 'noopener'; 1924 1925 card.innerHTML = ` 1926 <div class="rss-image" style="background-image: url('${imageUrl}')"></div> 1927 <div class="rss-content"> 1928 <div class="rss-date">${date}</div> 1929 <h3 class="rss-title">${entry.title.$t}</h3> 1930 <p class="rss-description">${cleanDesc}</p> 1931 </div> 1932 `; 1933 1934 container.appendChild(card); 1935 }); 1936 } else { 1937 container.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 2rem;">No updates found.</div>'; 1938 } 1939 } catch (e) { 1940 console.error('Error processing Blogger feed:', e); 1941 container.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 2rem; color: #ef4444;">Unable to load updates at this time.</div>'; 1942 } 1943 restoreHashTarget(); 1944 }; 1945
1946 script.src = BLOGGER_JSON_URL + '&callback=bloggerCallback'; 1947 script.onerror = function() { 1948 console.error('Error loading Blogger feed'); 1949 container.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 2rem; color: #ef4444;">Unable to load updates at this time.</div>'; 1950 restoreHashTarget(); 1951 }; 1952 document.body.appendChild(script); 1953 }); 1954 </script>
1954 1955 1956 <!-- Accessibility Widget --> 1957
1957<script src="accessibility.js"></script>
1957 1958 1959 <!-- Collapsible privacy & legal footer (shared across all pages) --> 1960
1960<script src="footer-legal.js" defer></script>
1960 1961</body> 1962</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.