1 2<!DOCTYPE html> 3<html lang="en"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <meta name="referrer" content="origin"> 10 11 <title>Making courses accessible for all, incl. those with disabilities</title> 12 13 <!--
13<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=2.43"></script>
13--> 14
14<script src="/fe/js/jquery-3.6.0.min.js?ver=2.43"></script>
14 15
15<script src="https://js.stripe.com/v3/"></script>
15 16 17
17<script src="/fe/js/vue.min.js?ver=2.43"></script>
17 18 19
19<script src="/fe/js/axios.min.js?ver=2.43"></script>
19 20 21
21<script src="/fe/js/[email protected]_dist_min_dropzone.min.js?ver=2.43"></script>
21 22 <link href="/fe/css/[email protected]_dist_min_dropzone.min.css?ver=2.43" rel="stylesheet"> 23 24 <link rel="stylesheet" href="/fe/css/tailwind.css?ver=2.43"> 25 26 <link rel="shortcut icon" type="image/png" sizes="32x32" href="https://membervault.s3-us-west-2.amazonaws.com/websitefae/favicon-32x32.png"> 27 <link rel="apple-touch-icon" sizes="32x32" href="https://membervault.s3-us-west-2.amazonaws.com/websitefae/favicon-32x32.png"> 28 29 <!-- font awesome icons --> 30 <link href="/fe/font-awesome/css/fontawesome.css" rel="stylesheet" /> 31 <link href="/fe/font-awesome/css/brands.css" rel="stylesheet" /> 32 <link href="/fe/font-awesome/css/solid.css" rel="stylesheet" /> 33 34 35 <meta property="og:url" content="https://www.maddatu.com/blog" /> 36 <meta property="og:type" content="product" /> 37 <meta property="og:title" content="Making courses accessible for all, incl. those with disabilities" /> 38 <meta property="og:description" content="Transform your online course platform with Website Fae. We specialize in making Membervault accessible for all learners, including those with disabilities. Learn more and improve your course platform today!" /> 39 <meta name="description" content="Transform your online course platform with Website Fae. We specialize in making Membervault accessible for all learners, including those with disabilities. Learn more and improve your course platform today!" /> 40 <meta property="og:image" content="https://s3.membervaultcdn.com/websitefae/6a96e7249cfe1_maddatu white.png?v=1788274469" /> 41 <meta property="fb:app_id" content="1565181327351981" /> 42 43 44 <!--------------- GOOGLE FONTS --------------------> 45 <link rel="preconnect" href="https://fonts.gstatic.com"> 46 47 <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet"> 48 <style> 49 body { 50 font-family: 'Quicksand', sans-serif; 51 } 52 </style> 53 <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet"> 54 <style> 55 h1, 56 h2, 57 h3, 58 h4, 59 h5, 60 h6 { 61 font-family: 'Quicksand', sans-serif; 62 } 63 </style> 64 65 66 <style> 67 .mv_custom_button, 68 .mv_content a.mv_custom_button { 69 background-color: #F51679; 70 border-color: #F51679; 71 color: #FFFFFF; 72 } 73 74 .mv_custom_second_button, 75 .mv_content a.mv_custom_second_button { 76 color: #F51679; 77 border-color: #F51679; 78 } 79 80 .mv_custom_text { 81 color: #F51679; 82 } 83 84 .mv_custom_border { 85 border-color: #F51679; 86 } 87 88 .mv_custom_bg { 89 background-color: #F51679; 90 color: #FFFFFF; 91 } 92 93 .mv_content a { 94 color: #F51679; 95 } 96 97 .pagination .paginate_button.active { 98 background-color: #F51679; 99 border-color: #F51679; 100 color: #FFFFFF; 101 } 102 </style> 103 104 <style> 105 /*MODULE/PRODUCT TEXT FONT AND COLOUR*/ 106/* Force text-green-600 to use your brand green */ 107.text-green-600 { 108 color: #003f2e !important; 109} 110 111/* Force bg-green-600 to use your brand green */ 112.bg-green-600 { 113 background-color: #003f2e !important; 114} 115 116/* Optional: override hover/focus if used */ 117.hover\:text-green-600:hover { 118 color: #003f2e !important; 119} 120.hover\:bg-green-600:hover { 121 background-color: #003f2e !important; 122} 123h2.text-lg.font-semibold { 124 color: #003f2e !important; 125 font-family: 'Rosario', sans-serif !important; 126 font-weight: 700 !important; /* Makes it bold */ 127} 128/*END OF MODULE/PRODUCT TEXT FONT AND COLOUR*/ 129 130/*PINK CUSTOM BUTTON*/ 131a.mv_custom_button.mv_pink_button { 132 background-color: #f51679; 133 color: #FFFFFF; 134 border-radius: 10px; 135 padding: 10px 20px; 136 display: inline-block; 137 font-size: 20px; 138 box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.65); 139} 140 141/*2 COLUMNS*/ 142/* Row Layout (no automatic centering) */ 143.row { 144 display: flex; 145 flex-wrap: wrap; /* Allow wrapping on smaller screens */ 146 justify-content: flex-start; /* Set to 'flex-start' for left alignment, 'center' or 'space-between' can be used if you want other alignments */ 147} 148/* Column Styling */ 149.column { 150 flex: 1 1 45%; /* Adjust column size */ 151 padding: 10px; 152 display: flex; 153 flex-direction: column; /* Stack icon and text vertically */ 154 justify-content: center;
155 align-items: center; /* Can adjust if you want different positioning */ 156} 157 158/* For mobile screens */ 159@media screen and (max-width: 600px) { 160 .row { 161 flex-direction: column; /* Stack columns vertically */ 162 } 163 .column { 164 width: 100%; /* Ensure columns take full width on mobile */ 165 } 166} 167 168/* CUSTOM FONTS */ 169h2 { font-family: 'Emilys Candy', cursive; color: #f51679; } 170h3, h4, h5, h6 { font-family: 'Rosario', sans-serif; } 171 172/* WELCOME AREA */ 173#mv_welcome_area { 174 background: #003f2e !important; 175 color: #ffffff !important; 176} 177 178#mv_welcome_area img.shadow-lg { 179 box-shadow: none; 180 float: right; 181 margin-left: 20px; 182 margin-bottom: 20px; 183} 184 185/* 186 MADDATU HOMEPAGE CONTENT STYLES 187 Page-content CSS only. 188 189 IMPORTANT: 190 - Existing Maddatu HTML classes are preserved. 191 - MemberVault header and footer are intentionally NOT styled here. 192 - No global html/body/header/footer rules are used so MemberVault's site chrome remains unchanged. 193 - Quicksand is used only inside #main-content. 194 - Colour choices prioritise WCAG 2.2 AA and AAA where practical. 195*/ 196 197@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap'); 198 199#main-content { 200 --color-primary: #0f3d32; 201 --color-primary-dark: #07241E; 202 --color-accent: #f51679; 203 --color-accent-accessible: #f51679; 204 --color-bg-cream: #faf7f4; 205 --color-bg-white: #FFFFFF; 206 --color-text-dark: #333333; 207 --color-text-light: #faf7f4; 208 --color-border: #9E9E9E; 209 --color-border-light: #E5E5EE; 210 --color-focus-dark: #07241E; 211 --color-focus-light: #FFFFFF; 212 --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 213 214 font-family: var(--font-primary); 215 font-size: 100%; 216 line-height: 1.625; 217 color: var(--color-text-dark); 218 background: var(--color-bg-white); 219 margin: 0 !important; 220 padding: 0 !important; 221} 222 223#main-content, 224#main-content *, 225#main-content *::before, 226#main-content *::after { 227 box-sizing: border-box; 228} 229 230#main-content img { 231 max-width: 100%; 232} 233 234#main-content .image-placeholder { 235 display: flex; 236 align-items: center; 237 justify-content: center; 238 width: 100%; 239 min-height: 180px; 240 padding: 20px; 241 background-color: var(--color-bg-cream); 242 color: var(--color-primary); 243 border: 2px solid var(--color-accent); 244 font-size: 1rem; 245 font-weight: 700; 246 text-align: center; 247} 248 249#main-content a { 250 color: var(--color-accent-accessible); 251} 252 253/* Keyboard focus. No global focus reset so MemberVault remains unaffected. */ 254#main-content :focus-visible, 255.skip-link:focus-visible { 256 outline: 3px solid var(--color-focus-light); 257 outline-offset: 4px; 258 box-shadow: 0 0 0 6px var(--color-focus-dark); 259} 260 261/* Skip link */ 262.skip-link { 263 position: absolute; 264 left: -9999px; 265 top: 8px; 266 z-index: 10000; 267 width: auto; 268 height: auto; 269 padding: 12px 24px; 270 background: var(--color-accent-accessible); 271 color: #FFFFFF !important; 272 border-radius: 6px; 273 font-family: var(--font-primary); 274 font-size: 1rem; 275 font-weight: 700; 276 text-decoration: none; 277} 278 279.skip-link:focus-visible { 280 left: 8px; 281 top: 8px; 282 outline-color: #FFFFFF; 283 box-shadow: 0 0 0 6px var(--color-primary-dark); 284} 285 286/* Layout */ 287#main-content .container { 288 width: 100%; 289 max-width: 1200px; 290 margin: 0 auto; 291 padding: 0 24px; 292} 293 294#main-content .section-padding { 295 padding: 90px 0; 296} 297 298#main-content .bg-cream { 299 background-color: var(--color-bg-cream); 300} 301 302#main-content .bg-white { 303 background-color: var(--color-bg-white); 304} 305 306#main-content .text-center { 307 text-align: center; 308} 309 310#main-content .max-width-800 { 311 max-width: 800px; 312 margin-right: auto; 313 margin-left: auto; 314} 315 316/* Typography */ 317#main-content h1, 318#main-content h2, 319#main-content h3, 320#main-content h4 { 321 font-family: var(--font-primary); 322 color: var(--color-primary); 323 line-height: 1.2; 324 margin-top: 0; 325} 326 327#main-content h1 { 328 font-size: 3rem; 329 letter-spacing: -0.02em; 330 margin-bottom: 24px; 331 font-weight: 700; 332} 333 334#main-content h2 { 335 font-size: 2.25rem; 336 margin-bottom: 24px; 337 font-weight: 700; 338} 339 340#main-content h1, 341#main-content h3 { 342 color: var(--color-primary); 343} 344 345#main-content h2, 346#main-content h4 { 347 color: var(--color-accent); 348} 349 350#main-content h3 { 351 font-size: 1.625rem; 352 margin-bottom: 16px; 353 font-weight: 600; 354} 355 356#main-content h4 { 357 font-size: 1.25rem; 358 margin-bottom: 12px; 359 font-weight: 600; 360} 361 362#main-content p { 363 margin-top: 0; 364 margin-bottom: 24px; 365} 366 367#main-content em { 368 font-style: italic; 369} 370 371#main-content p.lead { 372 font-size: 1.25rem; 373 font-weight: 500; 374 line-height: 1.6; 375} 376 377/* Buttons: three existing classes remain three distinct styles. */ 378#main-content .btn { 379 display: inline-flex; 380 align-items: center; 381 justify-content: center; 382 min-height: 48px; 383 font-family: var(--font-primary); 384 font-size: 1rem; 385 line-height: 1.2; 386 font-weight: 700; 387 text-decoration: none; 388 padding: 14px 28px; 389 border-radius: 6px; 390 border: 2px solid transparent; 391 cursor: pointer; 392 transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; 393} 394 395/* Pink filled */ 396#main-content .btn-primary { 397 background-color: var(--color-accent-accessible); 398 color: #FFFFFF !important; 399 border-color: var(--color-accent-accessible); 400 box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15); 401} 402 403#main-content .btn-primary:hover { 404 background-color: var(--color-primary-dark); 405 color: #FFFFFF !important; 406 border-color: var(--color-primary-dark); 407} 408 409/* Green filled */ 410#main-content .btn-secondary { 411 background-color: var(--color-primary); 412 color: #FFFFFF !important; 413 border-color: var(--color-primary); 414 box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15); 415} 416 417#main-content .btn-secondary:hover { 418 background-color: var(--color-primary-dark); 419 color: #FFFFFF !important; 420 border-color: var(--color-primary-dark); 421} 422 423/* Pink outline */ 424#main-content .btn-outline { 425 background-color: #FFFFFF; 426 color: var(--color-accent-accessible) !important; 427 border-color: var(--color-accent-accessible); 428} 429 430#main-content .btn-outline:hover { 431 background-color: var(--color-accent-accessible); 432 color: #FFFFFF !important; 433 border-color: var(--color-accent-accessible); 434} 435 436#main-content .btn-full { 437 width: 100%; 438} 439 440/* Hero */ 441#main-content .hero-section { 442 background-color: var(--color-primary-dark); 443 color: #FFFFFF; 444 padding: 80px 0; 445 overflow: hidden; 446 margin-top: 0 !important; 447} 448 449#main-content .hero-section h1 { 450 color: #ffffff; 451} 452 453#main-content .hero-grid { 454 display: grid; 455 grid-template-columns: 1.2fr 0.8fr; 456 gap: 60px; 457 align-items: center; 458} 459 460#main-content .hero-text-block { 461 text-align: left; 462} 463 464#main-content .byline-block { 465 display: flex; 466 align-items: center; 467 gap: 16px; 468 margin-bottom: 24px; 469 background-color: rgba(250, 247, 244, 0.06); 470 padding: 12px 18px; 471 border-radius: 8px; 472 border: 1px solid rgba(250, 247, 244, 0.45); 473} 474 475#main-content .byline-portrait-container { 476 width: 50px; 477 height: 50px; 478 border-radius: 50%; 479 overflow: hidden; 480 border: 2px solid var(--color-accent); 481 flex-shrink: 0; 482} 483 484#main-content .byline-portrait { 485 width: 100%; 486 height: 100%; 487 object-fit: cover; 488} 489 490#main-content .byline-text { 491 display: flex; 492 flex-direction: column; 493 font-size: 0.95rem; 494} 495 496#main-content .byline-author { 497 color: #FFFFFF; 498} 499 500#main-content .byline-desc { 501 color: #FFFFFF; 502} 503 504#main-content .byline-link { 505 color: #FFB3CB !important; 506 text-decoration: underline; 507 text-decoration-thickness: 0.12em; 508 text-underline-offset: 0.15em; 509 font-weight: 700; 510} 511 512#main-content .byline-link:hover {
513 color: #FFFFFF !important; 514} 515 516#main-content .hero-subheadline { 517 font-size: 1.4rem; 518 font-weight: 700; 519 color: #FFB3CB; 520 margin-bottom: 24px; 521 line-height: 1.55; 522} 523 524#main-content .answer-block { 525 background-color: rgba(250, 247, 244, 0.08); 526 border-left: 4px solid var(--color-accent); 527 padding: 16px 20px; 528 border-radius: 0 8px 8px 0; 529 margin-bottom: 30px; 530} 531 532#main-content .answer-block p { 533 margin: 0; 534 font-size: 1.05rem; 535 line-height: 1.6; 536 color: #FFFFFF; 537} 538 539#main-content .hero-image-block { 540 display: flex; 541 justify-content: center; 542 align-items: center; 543} 544 545#main-content .hero-large-img { 546 width: 100%; 547 max-width: 340px; 548 height: auto; 549 border-radius: 12px; 550 border: 4px solid var(--color-accent); 551 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); 552} 553 554/* Problem */ 555#main-content .problem-grid { 556 display: grid; 557 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 558 gap: 20px; 559 margin: 40px 0; 560} 561 562#main-content .problem-card { 563 background-color: var(--color-bg-white); 564 border-left: 4px solid var(--color-accent); 565 border-radius: 4px; 566 padding: 24px; 567 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); 568 display: flex; 569 align-items: flex-start; 570 gap: 16px; 571 text-align: left; 572} 573 574#main-content .problem-bullet { 575 color: var(--color-accent-accessible); 576 font-size: 1.15rem; 577 flex-shrink: 0; 578 font-weight: 700; 579} 580 581#main-content .problem-text { 582 margin: 0; 583 font-weight: 500; 584 font-size: 1.05rem; 585} 586 587#main-content .problem-outro { 588 background-color: rgba(15, 61, 50, 0.04); 589 border: 1px dashed var(--color-primary); 590 border-radius: 8px; 591 padding: 30px; 592 max-width: 700px; 593 margin: 40px auto 0 auto; 594} 595 596#main-content .problem-outro p { 597 font-size: 1.15rem; 598 font-weight: 600; 599 color: var(--color-primary-dark); 600 margin-bottom: 20px; 601} 602 603/* Services */ 604#main-content .services-subheading { 605 text-align: center; 606 margin-top: 50px; 607 margin-bottom: 35px; 608} 609 610#main-content .services-grid { 611 display: grid; 612 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 613 gap: 24px; 614 margin-bottom: 40px; 615} 616 617#main-content .service-card { 618 background-color: var(--color-bg-cream); 619 border: 1px solid var(--color-border); 620 border-radius: 8px; 621 padding: 30px; 622 display: flex; 623 flex-direction: column; 624 transition: transform 0.2s ease, box-shadow 0.2s ease; 625} 626 627#main-content .service-card:hover { 628 transform: translateY(-4px); 629 box-shadow: 0 8px 16px rgba(15, 61, 50, 0.08); 630} 631 632#main-content .service-image-container { 633 width: 100%; 634 height: auto; 635 border-radius: 6px; 636 overflow: hidden; 637 border: 1px solid var(--color-border); 638 margin-bottom: 20px; 639} 640 641#main-content .service-card-img { 642 width: 100%; 643 height: auto; 644 display: block; 645} 646 647#main-content .service-title-row { 648 display: flex; 649 align-items: center; 650 gap: 12px; 651 margin-bottom: 12px; 652} 653 654#main-content .service-card-icon { 655 font-size: 1.4rem; 656 color: var(--color-primary); 657} 658 659#main-content .service-card h4 { 660 margin: 0; 661 font-size: 1.25rem; 662} 663 664#main-content .service-card p { 665 margin: 0; 666 font-size: 1rem; 667 line-height: 1.6; 668} 669 670#main-content .services-notice { 671 text-align: center; 672 font-style: italic; 673 font-size: 1rem; 674 color: var(--color-text-dark); 675 max-width: 750px; 676 margin: 40px auto 0 auto; 677} 678 679/* Pricing */ 680#main-content .work-grid { 681 display: grid; 682 grid-template-columns: 1fr 1fr; 683 gap: 32px; 684 margin-top: 50px; 685 align-items: stretch; 686} 687 688#main-content .work-card { 689 background-color: var(--color-bg-white); 690 border: 1px solid var(--color-border); 691 border-radius: 12px; 692 padding: 40px; 693 display: flex; 694 flex-direction: column; 695 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 696} 697 698#main-content .work-card-banner { 699 width: 100%; 700 border-radius: 8px; 701 overflow: hidden; 702 border: 1px solid var(--color-border); 703 margin-bottom: 24px; 704} 705 706#main-content .work-card-banner-img { 707 width: 100%; 708 height: auto; 709 display: block; 710} 711 712#main-content .work-card h3 { 713 font-size: 1.85rem; 714 border-bottom: 2px solid var(--color-border); 715 padding-bottom: 15px; 716 margin-bottom: 20px; 717} 718 719#main-content .work-card-desc { 720 font-size: 1.05rem; 721 margin-bottom: 30px; 722} 723 724#main-content .pricing-tiers-list { 725 list-style: none; 726 padding: 0; 727 margin: 0 0 30px 0; 728} 729 730#main-content .pricing-tier-item { 731 background-color: var(--color-bg-cream); 732 border: 1px solid var(--color-border); 733 border-radius: 8px; 734 padding: 20px; 735 margin-bottom: 16px; 736} 737 738#main-content .pricing-tier-header { 739 display: flex; 740 justify-content: space-between; 741 align-items: baseline; 742 flex-wrap: wrap; 743 gap: 8px; 744 margin-bottom: 6px; 745} 746 747#main-content .pricing-tier-name { 748 font-weight: 700; 749 font-size: 1.15rem; 750 color: var(--color-primary-dark); 751} 752 753#main-content .pricing-tier-hours { 754 font-size: 0.9rem; 755 font-weight: 700; 756 background-color: var(--color-primary); 757 color: #FFFFFF; 758 padding: 4px 10px; 759 border-radius: 4px; 760} 761 762#main-content .pricing-tier-cost { 763 font-weight: 700; 764 font-size: 1.3rem; 765 color: var(--color-text-dark); 766} 767 768#main-content .pricing-tier-sub { 769 font-size: 0.95rem; 770 color: #404740; 771 font-weight: 400; 772} 773 774#main-content .pricing-tier-desc { 775 margin: 8px 0 0 0; 776 font-size: 1rem; 777 line-height: 1.5; 778} 779 780#main-content .projects-list-title { 781 color: var(--color-primary-dark); 782 margin-bottom: 15px; 783} 784 785#main-content .projects-list { 786 list-style: none; 787 padding: 0; 788 margin: 0 0 30px 0; 789} 790 791#main-content .projects-list li { 792 padding: 10px 0; 793 border-bottom: 1px solid var(--color-border-light); 794 display: flex; 795 align-items: center; 796 gap: 12px; 797 font-size: 1rem; 798} 799 800#main-content .projects-list li:last-child { 801 border-bottom: none; 802} 803 804#main-content .project-list-bullet { 805 color: var(--color-accent-accessible); 806 font-weight: 700; 807} 808 809#main-content .project-minimum-tier { 810 margin-top: auto; 811 margin-bottom: 30px; 812} 813 814#main-content .work-card .btn { 815 margin-top: auto; 816} 817 818/* Why / comparison table */ 819#main-content .why-grid { 820 display: grid; 821 grid-template-columns: 1fr 1fr; 822 gap: 24px; 823 margin-top: 40px; 824 margin-bottom: 60px; 825} 826 827#main-content .why-item { 828 background-color: var(--color-bg-cream); 829 border: 1px solid var(--color-border); 830 border-radius: 8px; 831 padding: 24px; 832 display: flex; 833 align-items: flex-start; 834 gap: 16px; 835} 836 837#main-content .why-icon { 838 background-color: var(--color-accent); 839 color: #FFFFFF; 840 width: 32px; 841 height: 32px; 842 border-radius: 50%; 843 display: flex; 844 align-items: center; 845 justify-content: center; 846 flex-shrink: 0; 847 font-size: 0.9rem; 848} 849 850#main-content .why-item p { 851 margin: 0; 852 font-size: 1.05rem; 853 line-height: 1.5; 854} 855 856#main-content .table-container { 857 width: 100%; 858 margin-bottom: 70px; 859 border: 1px solid var(--color-border); 860 border-radius: 8px; 861 overflow: hidden; 862} 863 864#main-content .table-title { 865 background-color: var(--color-primary-dark); 866 color: #FFFFFF; 867 margin: 0; 868 padding: 20px 24px; 869 font-size: 1.35rem; 870 text-align: left; 871} 872 873#main-content .comparison-table-wrapper { 874 width: 100%; 875 overflow-x: auto; 876} 877 878#main-content .comparison-table { 879 width: 100%; 880 border-collapse: separate; 881 border-spacing: 0; 882 text-align: left; 883 background-color: var(--color-bg-white); 884 min-width: 600px; 885} 886 887#main-content .comparison-table th, 888#main-content .comparison-table td { 889 padding: 16px 24px; 890 border-bottom: 1px solid var(--color-border-light); 891 font-size: 1rem; 892 vertical-align: top; 893} 894 895#main-content .comparison-table thead th { 896 background-color: var(--color-primary); 897 color: #FFFFFF; 898 font-weight: 700; 899} 900 901#main-content .comparison-table tbody th { 902 font-weight: 600; 903 color: var(--color-primary-dark); 904} 905 906#main-content .comparison-table .highlight-column { 907 background-color: rgba(245, 22, 121, 0.06); 908 font-weight: 600; 909 color: var(--color-primary-dark); 910 border-left: 3px solid var(--color-accent); 911 border-right: 3px solid var(--color-accent); 912} 913 914#main-content .comparison-table thead .highlight-column { 915 border-top: 3px solid var(--color-accent); 916} 917 918#main-content .comparison-table tbody tr:last-child .highlight-column { 919 border-bottom: 3px solid var(--color-accent); 920} 921 922/* Testimonials */ 923#main-content .proof-block-container { 924 border-top: 2px solid var(--color-border-light); 925 padding-top: 50px; 926} 927 928#main-content .proof-title { 929 text-align: center; 930 font-size: 1.65rem; 931 margin-bottom: 40px; 932} 933 934#main-content .testimonials-grid { 935 display: grid; 936 grid-template-columns: 1fr 1fr; 937 gap: 32px; 938} 939 940#main-content .testimonial-card { 941 background-color: var(--color-bg-cream);
942 border-top: 4px solid var(--color-primary); 943 border-radius: 6px; 944 padding: 35px; 945 margin: 0; 946 display: flex; 947 flex-direction: column; 948} 949 950#main-content .testimonial-card > img, 951#main-content .testimonial-placeholder-img { 952 width: 84px; 953 height: 84px; 954 border-radius: 50%; 955 object-fit: cover; 956 margin: 0 auto 20px auto; 957 border: 2px solid var(--color-accent); 958} 959 960#main-content .testimonial-quote { 961 font-style: italic; 962 font-size: 1.05rem; 963 line-height: 1.65; 964 margin-bottom: 20px; 965} 966 967 968#main-content .testimonial-author { 969 font-weight: 700; 970 font-size: 1rem; 971 color: var(--color-primary-dark); 972 margin-top: auto; 973 font-style: normal; 974} 975 976/* FAQ */ 977#main-content .faq-list { 978 max-width: 800px; 979 margin: 40px auto 0 auto; 980} 981 982#main-content .faq-item { 983 background-color: var(--color-bg-white); 984 border: 1px solid var(--color-border); 985 border-radius: 6px; 986 margin-bottom: 16px; 987 overflow: hidden; 988 transition: border-color 0.2s ease; 989} 990 991#main-content .faq-item[open] { 992 border-color: var(--color-primary); 993} 994 995#main-content .faq-item summary { 996 padding: 20px 24px; 997 font-weight: 600; 998 font-size: 1.1rem; 999 color: var(--color-primary-dark); 1000 cursor: pointer; 1001 list-style: none; 1002 display: flex; 1003 justify-content: space-between; 1004 align-items: center; 1005 user-select: none; 1006} 1007 1008#main-content .faq-item summary::-webkit-details-marker { 1009 display: none; 1010} 1011 1012#main-content .faq-item summary::after { 1013 content: "+"; 1014 font-size: 1.5rem; 1015 font-weight: 700; 1016 color: var(--color-primary); 1017 transition: transform 0.2s ease; 1018} 1019 1020#main-content .faq-item[open] summary::after { 1021 content: "−"; 1022 transform: rotate(180deg); 1023} 1024 1025#main-content .faq-content { 1026 padding: 0 24px 20px 24px; 1027 border-top: 1px solid var(--color-border-light); 1028} 1029 1030#main-content .faq-content p { 1031 margin: 0; 1032 font-size: 1rem; 1033 line-height: 1.6; 1034} 1035 1036/* Contact */ 1037#main-content .contact-grid { 1038 display: grid; 1039 grid-template-columns: 4fr 5fr; 1040 gap: 50px; 1041 margin-bottom: 50px; 1042} 1043 1044#main-content .contact-info { 1045 text-align: left; 1046} 1047 1048#main-content .contact-guide-box { 1049 background-color: var(--color-bg-cream); 1050 border: 1px solid var(--color-border); 1051 border-radius: 8px; 1052 padding: 30px; 1053 margin-top: 25px; 1054} 1055 1056#main-content .contact-guide-box h4 { 1057 margin-top: 0; 1058 font-size: 1.2rem; 1059 color: var(--color-primary-dark); 1060} 1061 1062#main-content .contact-checklist { 1063 list-style: none; 1064 padding: 0; 1065 margin: 0 0 20px 0; 1066} 1067 1068#main-content .contact-checklist li { 1069 position: relative; 1070 padding-left: 28px; 1071 margin-bottom: 12px; 1072 font-weight: 500; 1073 font-size: 1rem; 1074} 1075 1076#main-content .contact-checklist li::before { 1077 content: "✔"; 1078 position: absolute; 1079 left: 0; 1080 top: 0; 1081 color: var(--color-accent-accessible); 1082 font-weight: 700; 1083} 1084 1085#main-content .contact-note { 1086 margin: 0; 1087 font-size: 1rem; 1088} 1089 1090#main-content .contact-form-container { 1091 background-color: var(--color-bg-cream); 1092 border: 1px solid var(--color-border); 1093 border-radius: 8px; 1094 padding: 40px; 1095 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 1096} 1097 1098#main-content .contact-form { 1099 width: 100%; 1100} 1101 1102#main-content .form-row { 1103 display: grid; 1104 grid-template-columns: 1fr 1fr; 1105 gap: 20px; 1106} 1107 1108#main-content .form-group { 1109 margin-bottom: 24px; 1110 text-align: left; 1111} 1112 1113#main-content .form-group label { 1114 display: block; 1115 font-weight: 600; 1116 font-size: 1rem; 1117 margin-bottom: 8px; 1118 color: var(--color-primary-dark); 1119} 1120 1121#main-content .form-group input[type="text"], 1122#main-content .form-group input[type="email"], 1123#main-content .form-group textarea { 1124 width: 100%; 1125 padding: 12px 16px; 1126 border: 2px solid var(--color-border); 1127 border-radius: 4px; 1128 font-family: var(--font-primary); 1129 font-size: 1rem; 1130 line-height: 1.5; 1131 color: var(--color-text-dark); 1132 background-color: var(--color-bg-white); 1133 transition: border-color 0.2s ease, box-shadow 0.2s ease; 1134} 1135 1136#main-content .form-group input[type="text"]:focus, 1137#main-content .form-group input[type="email"]:focus, 1138#main-content .form-group textarea:focus { 1139 border-color: var(--color-primary-dark); 1140 box-shadow: 0 0 0 3px rgba(7, 36, 30, 0.18); 1141 outline: 3px solid transparent; 1142} 1143 1144#main-content .form-group input::placeholder, 1145#main-content .form-group textarea::placeholder { 1146 color: #4A4A4A; 1147 opacity: 1; 1148} 1149 1150#main-content .form-group textarea { 1151 resize: vertical; 1152 min-height: 150px; 1153} 1154 1155 1156/* Motion */ 1157@media (prefers-reduced-motion: reduce) { 1158 #main-content *, 1159 #main-content *::before, 1160 #main-content *::after, 1161 .skip-link { 1162 animation-delay: -1ms !important; 1163 animation-duration: 1ms !important; 1164 animation-iteration-count: 1 !important; 1165 transition-duration: 0s !important; 1166 scroll-behavior: auto !important; 1167 } 1168} 1169 1170/* Responsive */ 1171@media (max-width: 900px) { 1172 #main-content .hero-grid { 1173 grid-template-columns: 1fr; 1174 text-align: center; 1175 gap: 40px; 1176 } 1177 1178 #main-content .hero-text-block { 1179 text-align: center; 1180 } 1181 1182 #main-content .byline-block { 1183 justify-content: center; 1184 text-align: left; 1185 } 1186 1187 #main-content .hero-image-block { 1188 order: -1; 1189 } 1190 1191 #main-content .hero-large-img { 1192 max-width: 260px; 1193 } 1194
1195 #main-content .work-grid, 1196 #main-content .contact-grid { 1197 grid-template-columns: 1fr; 1198 } 1199 1200 #main-content .contact-grid { 1201 gap: 40px; 1202 } 1203} 1204 1205@media (max-width: 768px) { 1206 #main-content h1 { font-size: 2.25rem; } 1207 #main-content h2 { font-size: 1.875rem; } 1208 #main-content h3 { font-size: 1.4rem; } 1209 #main-content p.lead { font-size: 1.15rem; } 1210 1211 #main-content .why-grid, 1212 #main-content .testimonials-grid { 1213 grid-template-columns: 1fr; 1214 } 1215} 1216 1217@media (max-width: 600px) { 1218 #main-content .container { 1219 padding: 0 20px; 1220 } 1221 1222 #main-content .section-padding { 1223 padding: 70px 0; 1224 } 1225 1226 #main-content .form-row { 1227 grid-template-columns: 1fr; 1228 } 1229 1230 #main-content .contact-form-container { 1231 padding: 28px 20px; 1232 } 1233 1234 #main-content .work-card { 1235 padding: 28px 20px; 1236 } 1237} 1238 1239 1240/* Placeholder sizing */ 1241#main-content .byline-portrait { 1242 width: 50px; 1243 height: 50px; 1244 min-height: 50px; 1245 padding: 6px; 1246 border-radius: 50%; 1247 font-size: 0.7rem; 1248} 1249 1250#main-content .hero-large-img { 1251 width: 100%; 1252 max-width: 340px; 1253 min-height: 340px; 1254 border-radius: 12px; 1255 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); 1256} 1257 1258#main-content .service-card-img { 1259 min-height: 180px; 1260} 1261 1262#main-content .work-card-banner-img { 1263 min-height: 180px; 1264} 1265 1266#main-content .testimonial-placeholder-img { 1267 width: 84px; 1268 height: 84px; 1269 min-height: 84px; 1270 padding: 8px; 1271 border-radius: 50%; 1272 margin: 0 auto 20px auto; 1273 font-size: 0.8rem; 1274} 1275 1276 1277/* MemberVault paste cleanup */ 1278.mv-block > p:empty, 1279.mv-block > div:empty { 1280 display: none !important; 1281 height: 0 !important; 1282 min-height: 0 !important; 1283 margin: 0 !important; 1284 padding: 0 !important; 1285 border: 0 !important; 1286} 1287 1288#main-content { 1289 margin-top: 0 !important; 1290 margin-bottom: 0 !important; 1291 padding-top: 0 !important; 1292} 1293 1294/* Remove the 50px MemberVault content gap above the hero */ 1295.mv-block > #main-content:first-child { 1296 margin-top: -50px !important; 1297} 1298 1299html{ font-size: 100%} </style> 1300 1301
1301<script> 1302 var g_bAnnouncementStatus = false;var g_bProductUniform = true; </script>
1302 1303 1304
1304<script> 1305 var js_first_name = 'User'; 1306 var js_last_name = 'User'; 1307 var js_email = 'Email'; 1308 </script>
1308 1309 1310 <!-- COPY CODE TO CLIPBOARD -->
1311<script> 1312function copyCode() { 1313 var codeElement = document.getElementById('myCode'); 1314 var textArea = document.createElement('textarea'); 1315 textArea.value = codeElement.textContent; 1316 document.body.appendChild(textArea); 1317 textArea.select(); 1318 document.execCommand('copy'); 1319 document.body.removeChild(textArea); 1320 1321 alert('Code copied to clipboard!'); 1322} 1323</script>
1323 1324<!-- END - COPY CODE TO CLIPBOARD --> 1325 1326<!-- MAILERLITE UNIVERSAL -->
1327<script> 1328 (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[]) 1329 .push(arguments);},l=d.createElement(e),l.async=1,l.src=u, 1330 n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);}) 1331 (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml'); 1332 ml('account', '107223'); 1333</script>
1333 1334<!-- END MAILERLITE UNIVERSAL --> 1335 1336<!-- HIDE WELCOME AREA ON ALL PAGES EXPECT SERVICES -->
1337<script> 1338document.addEventListener("DOMContentLoaded", function () { 1339 const welcomeArea = document.getElementById("mv_welcome_area"); 1340 1341 if (!window.location.pathname.includes("/products")) { 1342 if (welcomeArea) { 1343 welcomeArea.style.display = "none"; 1344 } 1345 } 1346}); 1347</script>
1347 1348<!-- END - HIDE WELCOME AREA ON ALL PAGES EXPECT SERVICES --> 1349</head> 1350 1351<body class="bg-gray-100 text-gray-800 mv_not_logged_in " style="background-color:#FFFFFF; color:#0F3D32;"> 1352 <canvas id="confetti"></canvas> 1353 <div class="w-full overflow-x-hidden"> 1354 1355 <header class="w-full fixed bg-gray-800 text-white content-center tracking-wider shadow-xl z-20 max-h-full " style="background-color:#FFFFFF; color:#0F3D32;"> 1356 1357 1358 <div class="relative flex w-full h-20 max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10"> 1359 1360 <a href="/" class="flex-initial flex h-full mv_logo"> 1361 <img class="max-h-full my-auto" src="https://s3.membervaultcdn.com/websitefae/maddatu white.png?v=1788254145" alt="maddatu - Support You Can Rely On"/> </a> 1362 1363 <div class="flex-auto hidden lg:flex ml-4 text-center"> 1364 <ul class="w-full inline-block my-auto text-center"> 1365 <li class="inline-block ml-4 mr-4 hover:border-b "> 1366 <a href="/home" > 1367 Home </a> 1368 </li> 1369 <li class="inline-block ml-4 mr-4 hover:border-b "> 1370 <a href="/about" > 1371 About </a> 1372 </li> 1373 <li class="inline-block ml-4 mr-4 hover:border-b "> 1374 <a href="/services" > 1375 Services </a> 1376 </li> 1377 <li class="inline-block ml-4 mr-4 hover:border-b "> 1378 <a href="/contact" > 1379 Contact </a> 1380 </li> 1381 <li class="inline-block ml-4 mr-4 hover:border-b border-b"> 1382 <a href="/blog" > 1383 Blog </a> 1384 </li> 1385 </ul> 1386 </div> 1387 1388 <div class="relative flex-auto lg:flex-initial my-auto mv_user_nav flex flex-row-reverse flex-nowrap"> 1389 <a class="my-auto ml-4" href="javascript:toggleMainNav()"> 1390 <i class="fas fa-grip-lines"></i> 1391 </a> 1392 <a href="javascript:toggleLogin()" class="text-sm flex my-auto"> 1393 Sign In <i class="fas fa-angle-right hidden lg:flex ml-2 my-auto"></i> 1394 </a> 1395 1396 1397 1398 </div> 1399 1400 <div id="mv_user_nav" class="hidden absolute right-0 top-0 rounded-lg bg-white shadow-lg p-4 pt-2 pb-2 w-80 text-left text-gray-800 mr-4 lg:mr-10" style="top: calc(100% - 16px)"> 1401 <span class="text-sm font-light">(error)</span> 1402 <hr> 1403 <a class="inline-block pb-2 pt-2 w-full" href="/products/profile">Profile</a> 1404 1405 <a class="inline-block pb-2 pt-2 w-full font-bold" href="/logout">Logout</a> 1406 1407 <hr class="inline-block w-full"> 1408 1409 Notifications 1410 <ul class="mv_notifications mt-2"> 1411 <li class="italic text-right" style="list-style: none;"><a class="underline" href="/products/notifications">see all notifications</a></li> 1412 </ul> 1413 1414 1415 1416 </div> 1417 1418 <div id="mv_text_nav" class="hidden absolute right-0 top-0 rounded-lg bg-white shadow-lg p-4 pt-2 pb-2 w-44 text-left text-gray-800 mr-4 lg:mr-10" style="top: calc(100% - 16px)"> 1419 <a class="inline-block pb-2 pt-2 w-full" href="javascript:changeTextSize(100)">
1420 <span class="mv_text_nav_dot" id="mv_text_nav_dot_100"> 1421 <i class="far fa-dot-circle"></i> 1422 </span> 1423 Text Size 1424 </a> 1425 <a class="inline-block pb-2 pt-2 w-full" style="font-size: 115%" href="javascript:changeTextSize(115)"> 1426 <span class="mv_text_nav_dot" id="mv_text_nav_dot_115"> 1427 <i class="far fa-circle"></i> 1428 </span> 1429 Text Size 1430 </a> 1431 <a class="inline-block pb-2 pt-2 w-full" style="font-size: 130%" href="javascript:changeTextSize(130)"> 1432 <span class="mv_text_nav_dot" id="mv_text_nav_dot_130"> 1433 <i class="far fa-circle"></i> 1434 </span> 1435 Text Size 1436 </a> 1437 <a class="inline-block pb-2 pt-2 w-full" style="font-size: 145%" href="javascript:changeTextSize(145)"> 1438 <span class="mv_text_nav_dot" id="mv_text_nav_dot_145"> 1439 <i class="far fa-circle"></i> 1440 </span> 1441 Text Size 1442 </a> 1443 </div> 1444 1445 </div> 1446 </header> 1447 <div id="mv_welcome_area_padding" class="h-20 bg-gray-800 " style="background-color:#FFFFFF;"></div> 1448 1449 <div class="border-b mv_breadcrumbs"> 1450 <div class="max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10"> 1451 <a href="/"> 1452 <i class="fas fa-home"></i> 1453 </a> 1454 <i class="fas fa-caret-right ml-2 mr-2"></i> 1455 <a class="font-semibold" href="/blog"> 1456 Blog </a> 1457 </div> 1458 1459</div> 1460 1461<div class="flex flex-wrap max-w-screen-xl mx-auto lg:flex-nowrap lg:pl-6 lg:pr-6"> 1462 1463 <div class="w-full flex-auto lg:w-auto lg:p-4 lg:pr-10 overflow-hidden"> 1464 1465 <div class="p-4 text-sm lg:hidden"> 1466 <form method="get" action="" class="flex gap-x-4 gap-y-2 flex-wrap md:flex-nowrap"> 1467 <div class="flex-auto"> 1468 <input class="w-full border p-2 rounded-lg text-gray-900" type="text" id="search" name="search" placeholder="search" autocomplete="off" value=""> 1469 </div> 1470 <button type="submit" class="flex-auto btn mv_custom_button mv_primary_button">Search</button> 1471 1472 </form> 1473 </div> 1474 1475 1476 1477 <div class="w-full flex-auto overflow-hidden"> 1478 1479 <div class="p-4 lg:pl-2 lg:pr-2"> 1480 1481 <div class="rounded-lg shadow-lg overflow-hidden bg-white mb-6 text-gray-800 flex flex-col mv_blog_item mv_blog_4155"> 1482 <div class="content flex-auto flex flex-col"> 1483 <a href="/jewel"> 1484 <img class="w-full" src="https://s3.membervaultcdn.com/websitefae/WF---MV---Blog.png?v=1706775209" alt="" loading="lazy"> 1485 </a> 1486 <div class="w-full p-4 pb-0 flex-auto"> 1487 <h2 class="text-lg font-semibold mv_custom_text"> 1488 <a class="text-lg font-semibold" href="/jewel">Jewel's MemberVault Transformation</a> 1489 </h2> 1490 <div class="mt-4 mb-4 mv_content"> 1491 <p> 1492 Crafting a Digital Wonderland 1493 1494We're thrilled to take you behind the scenes of something special – the makeover of Jewel's MemberVault website. With a wave of our magic wand and a lot of collaboration, creativity, and a sprinkle of tech know-how. </p> 1495 </div> 1496 </div> 1497 </div> 1498 </div> 1499 <div class="rounded-lg shadow-lg overflow-hidden bg-white mb-6 text-gray-800 flex flex-col mv_blog_item mv_blog_4156"> 1500 <div class="content flex-auto flex flex-col"> 1501 <a href="/mariam"> 1502 <img class="w-full" src="https://s3.membervaultcdn.com/websitefae/WF---MV---Blog--1-.png?v=1706776094" alt="" loading="lazy"> 1503 </a> 1504 <div class="w-full p-4 pb-0 flex-auto"> 1505 <h2 class="text-lg font-semibold mv_custom_text"> 1506 <a class="text-lg font-semibold" href="/mariam">Mariam's MemberVault</a> 1507 </h2> 1508 <div class="mt-4 mb-4 mv_content"> 1509 <p> 1510 Even before MemberVault (MV) started to roll out some of its newest features, Mariam wanted to have her MV account looking and functioning more like a website than just a normal course platform. </p> 1511 </div> 1512 </div> 1513 </div> 1514 </div> 1515 1516 1517 1518 </div> 1519 </div> 1520 1521 </div> 1522 1523 1524 <div class="w-full lg:flex-none lg:inline-block lg:w-1/3 p-4"> 1525 <hr class="lg:hidden"> 1526 1527 <div class="hidden lg:block"> 1528 <h2 class="text-xl font-bold pt-4 pb-4"> 1529 Search 1530 </h2> 1531 <form method="get" action="/posts/" class="flex gap-x-4 gap-y-2 flex-wrap md:flex-nowrap"> 1532 <div class="flex-auto"> 1533 <input class="w-full border p-2 rounded-lg text-gray-900" type="text" id="search" name="search" placeholder="search" autocomplete="off" value=""> 1534 </div> 1535 <button type="submit" class="flex-auto btn mv_custom_button mv_primary_button">Search</button> 1536 1537 </form> 1538 1539 <hr class="mb-6 mt-6"> 1540 </div> 1541 1542 <a target="_BLANK" href="https://appt.link/website-fae/coffee-chat"> 1543 <img class="rounded-lg mb-4" src="https://s3.membervaultcdn.com/websitefae/Chantelle-Venter--1-.png?v=1674545918" alt="" /> 1544 <h2 class="text-xl font-bold pb-2">Grab a coffee with me and lets discuss your course</h2> 1545 </a> 1546 <div class="mv_content"> 1547 <p>Transform your online course platform with Website Fae. We specialize in making MemberVault accessible for all learners, including those with disabilities. Learn more and improve your course platform today!</p> </div> 1548 1549 1550 1551 </a> 1552</div> 1553 1554</div> 1555</div> 1556<footer id="mv_footer" class="mv_footer border-t pb-10 text-sm "> 1557 1558 <div class="flex flex-wrap w-full max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10 font-light border-b justify-end "> 1559 1560 <div class="w-full lg:w-1/3 flex-none p-4 pr-10 text-center lg:text-left border-b lg:border-b-0"> 1561 <h3 class="font-semibold mb-1">About</h3> 1562 <p>Maddatu provides practical, dependable operational support for established small businesses, handling the digital content, administration and day-to-day tasks that need to get done so you can focus fully on scaling your clinical or business impact. 1563 1564Website Fae Pty Ltd trading as Maddatu</p> 1565 </div> 1566 1567 <div class="relative w-full lg:w-1/3 flex-none p-4 text-center border-b lg:border-b-0"> 1568 <div class="inline-block text-center lg:text-left relative"> 1569 <h3 class="font-semibold mb-1">Links</h3> 1570 <div class="w-full "> 1571 <a class="mb-1" href="https://maddatu.com/terms" target="_BLANK"> 1572 Terms and Conditions </a><br> 1573 <a class="mb-1" href="https://maddatu.com/privacy" target="_BLANK"> 1574 Privacy Policy </a><br> 1575 <a class="mb-1" href="https://maddatu.com/disclaimer" target="_BLANK"> 1576 Disclaimer </a><br> 1577 <a class="mb-1" href="https://maddatu.com/accessibility-statement" target="_BLANK"> 1578 Accessibility Statement </a><br> 1579 </div>
1580 </div> 1581 </div> 1582 1583 1584 1585 <div class="w-full lg:w-1/3 flex-none p-4 text-center "> 1586 <div class="inline-block text-center lg:text-left"> 1587 <h3 class="font-semibold mb-1">Social</h3> 1588 <div class="w-full"> 1589 1590 <a class="mb-1 flex" href="https://facebook.com/maddatu.sa" target="_BLANK"> 1591 <i class="fab fa-facebook-square inline-block my-auto mr-1"></i> Facebook 1592 </a> 1593 <a class="mb-1 flex" href="https://instagram.com/maddatu.sa" target="_BLANK"> 1594 <i class="fab fa-instagram inline-block my-auto mr-1"></i> Instagram 1595 </a> 1596 1597 1598 1599 1600 1601 1602 </div> 1603 </div> 1604 </div> 1605 1606 1607 </div> 1608 1609 <div class="w-full max-w-screen-xl p-4 mx-auto text-xs font-light"> 1610 <div class="w-full flex flex-wrap pt-2"> 1611 <div class="flex-none w-full text-center mt-2 lg:w-1/2 lg:text-left"> 1612 © 2026 - maddatu </div> 1613 <div class="flex-none flex w-full pt-2 lg:w-1/2 lg:flex-row-reverse"> 1614 <a href="https://membervault.co" class="flex-none mx-auto lg:mx-px flex hidden" target="_BLANK"> 1615 <img class="my-auto w-6 h-6 mr-2 mv_footer_logo" src="/fe/images/fav/favicon-32x32.png" loading="lazy"> 1616 <span class="my-auto">Powered By MemberVault</span> 1617 </a> 1618 </div> 1619 </div> 1620 </div> 1621 1622</footer> 1623 1624 1625 1626 1627 1628<div id="mv_main_nav" class="fixed bg-white text-gray-800 top-0 left-0 h-full shadow-2xl w-5/6 md:w-4/6 lg:w-2/6 overflow-scroll z-20" style="left:-100%"> 1629 1630 <a href="javascript:toggleMainNav()" class="mv_close_button mt-2 mr-2"> 1631 <i class="fas fa-times"></i> 1632 </a> 1633 1634 <div class="w-full p-4 border-b"> 1635 1636 <form class="mv_search_container" method="get" action="/products"> 1637 <a href="javascript:toggleTextSizeMobile()" class="mv_text_button mr-2"> 1638 <i class="fas fa-text-height"></i> 1639 </a> 1640 1641 <i class="fas fa-search mr-1"></i> 1642 <input name="search" class="mv_search_box rounded pl-2 text-gray-800 w-32 opacity-50" type="text" placeholder="Search..." value=""> 1643 <input type="submit" value="search" class="hidden mv_search_button rounded bg-gray-800 text-white opacity-50 pl-1 pr-1"> 1644 </form> 1645 1646 1647 1648 </div> 1649 1650 <div class="flex text-center mt-4"> 1651 <div class="flex-none w-full pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold"> 1652 Menu 1653 </div> 1654 </div> 1655 1656 <ul class="w-full font-semibold"> 1657 <li class="w-full border-b"> 1658 <a href="/home" class="flex p-4"> 1659 <span class="flex-none w-11/12 my-auto"> 1660 Home </span> 1661 <span class="flex-none w-1/12 my-auto text-right"> 1662 <i class="fas fa-angle-right"></i> 1663 </span> 1664 </a> 1665 </li> 1666 <li class="w-full border-b"> 1667 <a href="/about" class="flex p-4"> 1668 <span class="flex-none w-11/12 my-auto"> 1669 About </span> 1670 <span class="flex-none w-1/12 my-auto text-right"> 1671 <i class="fas fa-angle-right"></i> 1672 </span> 1673 </a> 1674 </li> 1675 <li class="w-full border-b"> 1676 <a href="/services" class="flex p-4"> 1677 <span class="flex-none w-11/12 my-auto"> 1678 Services </span> 1679 <span class="flex-none w-1/12 my-auto text-right"> 1680 <i class="fas fa-angle-right"></i> 1681 </span> 1682 </a> 1683 </li> 1684 <li class="w-full border-b"> 1685 <a href="/contact" class="flex p-4"> 1686 <span class="flex-none w-11/12 my-auto"> 1687 Contact </span> 1688 <span class="flex-none w-1/12 my-auto text-right"> 1689 <i class="fas fa-angle-right"></i> 1690 </span> 1691 </a> 1692 </li> 1693 <li class="w-full border-b"> 1694 <a href="/blog" class="flex p-4"> 1695 <span class="flex-none w-11/12 my-auto"> 1696 Blog </span> 1697 <span class="flex-none w-1/12 my-auto text-right"> 1698 <i class="fas fa-angle-right"></i> 1699 </span> 1700 </a> 1701 </li> 1702 </ul> 1703 1704 <div class="flex text-center"> 1705 <a id="mv_main_nav_my_link" class="flex-none w-1/2 pt-4 pb-4 border-b border-b" href="javascript:void(0)" onclick="switchMainNav('my')"> 1706 My Services </a> 1707 <a id="mv_main_nav_available_link" class="flex-none w-1/2 pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold" href="javascript:void(0)" onclick="switchMainNav('available')"> 1708 Available Services </a> 1709 </div> 1710 1711
1712 <ul id="mv_main_nav_available_content" class="w-full font-semibold "> 1713 <li class="w-full border-b"> 1714 <a href="/products/courses/view/1193365" class="flex p-4"> 1715 <span class="flex-none w-11/12 my-auto"> 1716 maddatu Ongoing Support </span> 1717 <span class="flex-none w-1/12 my-auto text-right"> 1718 <i class="fas fa-angle-right"></i> 1719 </span> 1720 </a> 1721 </li> 1722 </ul> 1723 1724 <ul id="mv_main_nav_my_content" class="w-full font-semibold hidden"> 1725 <li class="w-full border-b"> 1726 <a href="/login/?goto=/blog" class="flex p-4"> 1727 Sign In to see your services </a> 1728 </li> 1729 </ul> 1730 1731 1732 1733</div> 1734 1735 1736 1737 1738<div id="mv_login" class="fixed right-0 top-0 w-full h-full bg-white text-gray-800 shadow-lg z-20 lg:w-2/6 overflow-scroll" style="right:-100%"> 1739 <a href="javascript:toggleLogin()" class="mv_close_button"> 1740 <i class="fas fa-times"></i> 1741 </a> 1742 1743 <div class="w-full bg-gray-200 p-4 text-center"> 1744 <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md"> 1745 <i class="fas fa-sign-in-alt text-white text-lg"></i> 1746 </div> 1747 1748 <div class="w-full mt-2 font-semibold"> 1749 Sign In </div> 1750 </div> 1751 1752 <div id="login_before" class="w-full p-4 pb-0 text-sm"> 1753 1754 <h3 class="w-full font-semibold">Sign In Details</h3> 1755 1756 <div class="flex flex-wrap mt-2"> 1757 <input class="flex-none w-full border js_clean_email p-2 rounded" type="text" id="loginform_email" name="email" placeholder="Email" autocomplete="off" value=""> 1758 </div> 1759 <div class="flex flex-wrap mt-2"> 1760 <input class="flex-none w-full border p-2 rounded" type="password" id="loginform_password" name="email" placeholder="Password" autocomplete="off" value=""> 1761 </div> 1762 1763 <div class="w-full relative text-red-700 font-bold hidden" id="loginform_error"> 1764 </div> 1765 1766 <div class="w-full relative"> 1767 <a href="javascript:void(0)" onclick="submitLoginForm()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4"> 1768 Sign In </a> 1769 </div> 1770 1771 </div> 1772 1773 <div class="w-full flex p-4 pt-0 text-sm italic mt-4"> 1774 <div class="flex-none w-1/2"> 1775 </div> 1776 <div class="flex-none w-1/2 text-right"> 1777 <a class="" href="javascript:void(0)" onclick="toggleLoginForgot()">forgot password?</a> 1778 </div> 1779 </div> 1780 1781 <div id="login_forgot" class="w-full p-4 pb-0 text-sm hidden"> 1782 1783 <h3 class="w-full font-semibold">Forgot Password?</h3> 1784 <p class="font-light">Enter your email address and we will send you a link to reset your password.</p> 1785 1786 <div class="flex flex-wrap mt-2"> 1787 <input class="flex-none w-full border js_clean_email p-2 rounded" type="text" id="loginforgot_email" name="email" placeholder="Email" autocomplete="off" value=""> 1788 </div> 1789 1790 <div class="w-full relative text-red-700 font-bold hidden" id="loginforgot_error"> 1791 </div> 1792 1793 <div class="w-full relative"> 1794 <a href="javascript:void(0)" id="login_forgot_button" onclick="submitLoginForgot()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4"> 1795 Reset Password 1796 </a> 1797 </div> 1798 1799 </div> 1800 1801 <div class="loading"></div> 1802</div> 1803 1804 1805<div id="mv_reset" class="fixed right-0 top-0 w-full h-full bg-white text-gray-800 shadow-lg z-20 lg:w-2/6 overflow-scroll" style="right:-100%"> 1806 <a href="javascript:toggleForgot()" class="mv_close_button"> 1807 <i class="fas fa-times"></i> 1808 </a> 1809 1810 <div class="w-full bg-gray-200 p-4 text-center"> 1811 <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md"> 1812 <i class="fas fa-question text-white text-lg"></i> 1813 </div> 1814 1815 <div class="w-full mt-2 font-semibold"> 1816 Forgot Password 1817 </div> 1818 </div> 1819 1820 <div id="reset_before" class="w-full p-4 pb-0 text-sm hidden"> 1821 1822 <h3 class="w-full font-semibold">Create New Password for </h3> 1823 1824 <div class="flex flex-wrap mt-2"> 1825 <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password" name="password" placeholder="Password" autocomplete="off" value=""> 1826 </div> 1827 <div class="flex flex-wrap mt-2"> 1828 <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password2" name="password2" placeholder="Re-Type Password" autocomplete="off" value=""> 1829 </div> 1830 1831 <div class="w-full relative"> 1832 <a href="javascript:void(0)" onclick="submitResetForm()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4"> 1833 Reset Password 1834 </a> 1835 </div> 1836 </div> 1837 1838 <div class="w-full p-4 relative text-red-700 font-bold hidden" id="reset_error"></div> 1839 1840 1841 <div class="loading"></div> 1842</div> 1843
1844<script> 1845 function submitLoginForm() { 1846 var email = $('#loginform_email').val(); 1847 var password = $('#loginform_password').val(); 1848 1849 $('.loading').show(); 1850 $.ajax({ 1851 method: "POST", 1852 url: '/login/ajax_login', 1853 data: { 1854 username: email, 1855 password: password, 1856 goto: '/blog' 1857 } 1858 }) 1859 .done(function(msg) { 1860 var response = JSON.parse(msg); 1861 1862 if (response.goto) { 1863 window.location = response.goto; 1864 } else { 1865 $('.loading').hide(); 1866 $('#loginform_error').show().html(response.message); 1867 } 1868 }); 1869 } 1870 1871 function toggleLoginForgot() { 1872 if ($('#login_forgot').css('display') == 'none') { 1873 $('#login_forgot').show(); 1874 $('#login_before').addClass('opacity-25'); 1875 } else { 1876 $('#login_forgot').hide(); 1877 $('#login_before').removeClass('opacity-25'); 1878 } 1879 } 1880 1881 function submitLoginForgot() { 1882 var email = $('#loginforgot_email').val(); 1883 1884 $('.loading').show(); 1885 $.ajax({ 1886 method: "POST", 1887 url: '/login/ajax_forgot', 1888 data: { 1889 username: email, 1890 } 1891 }) 1892 .done(function(msg) { 1893 var response = JSON.parse(msg); 1894 1895 $('.loading').hide(); 1896 if (response.status == 'success') { 1897 $('#loginforgot_error').removeClass('text-red-700').addClass('text-green-700'); 1898 $('#login_forgot_button').hide(); 1899 } 1900 $('#loginforgot_error').show().html(response.message); 1901 }); 1902 1903 } 1904 1905 function submitResetForm() { 1906 var password = $('#resetform_password').val(); 1907 var password2 = $('#resetform_password2').val(); 1908 1909 if (password != password2) { 1910 $('#reset_error').show().html('Passwords Don\'t Match!'); 1911 return false; 1912 } 1913 if (password == '') { 1914 $('#reset_error').show().html('Password can\'t be blank!'); 1915 return false; 1916 } 1917 1918 $('.loading').show(); 1919 1920 $.ajax({ 1921 method: "POST", 1922 url: '/login/ajax_do_reset', 1923 data: { 1924 user: '', 1925 password: password, 1926 hash: '' 1927 } 1928 }) 1929 .done(function(msg) { 1930 var response = JSON.parse(msg); 1931 1932 $('.loading').hide(); 1933 1934 $('#reset_before').hide(); 1935 if (response.status == 'success') { 1936 $('#reset_error').removeClass('text-red-700').addClass('text-green-700'); 1937 } 1938 $('#reset_error').show().html(response.message); 1939 }); 1940 } 1941 1942 $(".js_clean_email").keyup(function() { 1943 $(this).val(cleanEmail($(this).val())); 1944 }); 1945</script>
1945 1946 1947 1948 1949 1950<div id="mv_cover" class="hidden fixed left-0 top-0 w-full h-full bg-black opacity-75 z-10"> </div> 1951
1952<script src="/fe/js/app.js?ver=2.43"></script>
vendor: 1 bytes, line 1952
1952
1953<script src="/fe/js/sweetalert2.all.min.js?ver=2.43"></script>
vendor: 1 bytes, line 1953
1953
1954<script> 1955 // global variables 1956 const confetti = document.getElementById('confetti'); 1957 const confettiCtx = confetti.getContext('2d'); 1958 let container, confettiElements = []; 1959 1960 // helper 1961 rand = (min, max) => Math.random() * (max - min) + min; 1962 1963 // params to play with 1964 const confettiParams = { 1965 // number of confetti per "explosion" 1966 number: 200, 1967 // min and max size for each rectangle 1968 size: { 1969 x: [5, 20], 1970 y: [10, 18] 1971 }, 1972 // power of explosion 1973 initSpeed: 50, 1974 // defines how fast particles go down after blast-off 1975 gravity: 0.65, 1976 // how wide is explosion 1977 drag: 0.08, 1978 // how slow particles are falling 1979 terminalVelocity: 20, 1980 // how fast particles are rotating around themselves 1981 flipSpeed: 0.017, 1982 }; 1983 const colors = [{ 1984 front: '#FFFFFF', 1985 back: '#FFFFFF' 1986 }, 1987 { 1988 front: '#0F3D32', 1989 back: '#0F3D32' 1990 }, 1991 { 1992 front: '#FFFFFF', 1993 back: '#FFFFFF' 1994 }, 1995 { 1996 front: '#0F3D32', 1997 back: '#0F3D32' 1998 }, 1999 { 2000 front: '#F51679', 2001 back: '#F51679' 2002 }, 2003 { 2004 front: '#FFFFFF', 2005 back: '#FFFFFF' 2006 }, 2007 ]; 2008 2009 // ----------------------------------------------------------- 2010 2011 setupCanvas(); 2012 /* 2013 addConfetti({ 2014 clientX: container.w * 0.5, 2015 clientY: container.h * 0.5 2016 }); 2017 */ 2018 updateConfetti(); 2019 2020 //window.addEventListener('click', addConfetti); 2021 window.addEventListener('resize', () => { 2022 setupCanvas(); 2023 hideConfetti(); 2024 }); 2025 2026 // ----------------------------------------------------------- 2027 2028 // Confetti constructor 2029 function Conf() { 2030 this.randomModifier = rand(-1, 1); 2031 this.colorPair = colors[Math.floor(rand(0, colors.length))]; 2032 this.dimensions = { 2033 x: rand(confettiParams.size.x[0], confettiParams.size.x[1]), 2034 y: rand(confettiParams.size.y[0], confettiParams.size.y[1]), 2035 }; 2036 this.position = { 2037 x: clickPosition[0], 2038 y: clickPosition[1] 2039 }; 2040 this.rotation = rand(0, 2 * Math.PI); 2041 this.scale = { 2042 x: 1, 2043 y: 1 2044 }; 2045 this.velocity = { 2046 x: rand(-confettiParams.initSpeed, confettiParams.initSpeed) * 0.4, 2047 y: rand(-confettiParams.initSpeed, confettiParams.initSpeed) 2048 }; 2049 this.flipSpeed = rand(0.2, 1.5) * confettiParams.flipSpeed; 2050 2051 if (this.position.y <= container.h) { 2052 this.velocity.y = -Math.abs(this.velocity.y); 2053 } 2054 2055 this.terminalVelocity = rand(1, 1.5) * confettiParams.terminalVelocity; 2056 2057 this.update = function() { 2058 this.velocity.x *= 0.98; 2059 this.position.x += this.velocity.x; 2060 2061 this.velocity.y += (this.randomModifier * confettiParams.drag); 2062 this.velocity.y += confettiParams.gravity; 2063 this.velocity.y = Math.min(this.velocity.y, this.terminalVelocity); 2064 this.position.y += this.velocity.y; 2065 2066 this.scale.y = Math.cos((this.position.y + this.randomModifier) * this.flipSpeed); 2067 this.color = this.scale.y > 0 ? this.colorPair.front : this.colorPair.back; 2068 } 2069 } 2070 2071 function updateConfetti() { 2072 confettiCtx.clearRect(0, 0, container.w, container.h); 2073 2074 confettiElements.forEach((c) => { 2075 c.update(); 2076 confettiCtx.translate(c.position.x, c.position.y); 2077 confettiCtx.rotate(c.rotation); 2078 const width = (c.dimensions.x * c.scale.x); 2079 const height = (c.dimensions.y * c.scale.y); 2080 confettiCtx.fillStyle = c.color; 2081 confettiCtx.fillRect(-0.5 * width, -0.5 * height, width, height); 2082 confettiCtx.setTransform(1, 0, 0, 1, 0, 0) 2083 }); 2084 2085 confettiElements.forEach((c, idx) => { 2086 if (c.position.y > container.h || 2087 c.position.x < -0.5 * container.x || 2088 c.position.x > 1.5 * container.x) { 2089 confettiElements.splice(idx, 1) 2090 } 2091 }); 2092 window.requestAnimationFrame(updateConfetti); 2093 } 2094 2095 function setupCanvas() { 2096 container = { 2097 w: window.innerWidth, 2098 h: window.innerHeight 2099 }; 2100 confetti.width = container.w; 2101 confetti.height = container.h; 2102 2103 //console.log(container); 2104 } 2105 2106 function addConfetti(e) { 2107 //var centerX = window.innerWidth / 2; 2108 //var centerY = window.innerHeight / 2; 2109 2110 var centerX = window.innerWidth; 2111 var centerY = window.innerHeight; 2112 2113 //clickPosition = [ e.clientX, e.clientY ]; 2114 clickPosition = [centerX, centerY]; 2115 for (let i = 0; i < confettiParams.number; i++) { 2116 confettiElements.push(new Conf()) 2117 } 2118 } 2119 2120 function hideConfetti() { 2121 confettiElements = []; 2122 window.cancelAnimationFrame(updateConfetti) 2123 } 2124</script>
2124 2125 2126 2127</body> 2128 2129</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.