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>About</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/about" /> 36 <meta property="og:type" content="product" /> 37 <meta property="og:title" content="About" /> 38 <meta property="og:description" content=" 39 40 41 42Looking for an operational partner who gets the work done? I help business owners execute their ideas. 43 44 45By Chantelle Venter Founder & Operational ..." /> 46 <meta name="description" content=" 47 48 49 50Looking for an operational partner who gets the work done? I help business owners execute their ideas. 51 52 53By Chantelle Venter Founder & Operational ..." /> 54 <meta property="og:image" content="https://s3.membervaultcdn.com/websitefae/6a96e7249cfe1_maddatu white.png?v=1788274469" /> 55 <meta property="fb:app_id" content="1565181327351981" /> 56 57 58 <!--------------- GOOGLE FONTS --------------------> 59 <link rel="preconnect" href="https://fonts.gstatic.com"> 60 61 <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet"> 62 <style> 63 body { 64 font-family: 'Quicksand', sans-serif; 65 } 66 </style> 67 <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet"> 68 <style> 69 h1, 70 h2, 71 h3, 72 h4, 73 h5, 74 h6 { 75 font-family: 'Quicksand', sans-serif; 76 } 77 </style> 78 79 80 <style> 81 .mv_custom_button, 82 .mv_content a.mv_custom_button { 83 background-color: #F51679; 84 border-color: #F51679; 85 color: #FFFFFF; 86 } 87 88 .mv_custom_second_button, 89 .mv_content a.mv_custom_second_button { 90 color: #F51679; 91 border-color: #F51679; 92 } 93 94 .mv_custom_text { 95 color: #F51679; 96 } 97 98 .mv_custom_border { 99 border-color: #F51679; 100 } 101 102 .mv_custom_bg { 103 background-color: #F51679; 104 color: #FFFFFF; 105 } 106 107 .mv_content a { 108 color: #F51679; 109 } 110 111 .pagination .paginate_button.active { 112 background-color: #F51679; 113 border-color: #F51679; 114 color: #FFFFFF; 115 } 116 </style> 117 118 <style> 119 /*MODULE/PRODUCT TEXT FONT AND COLOUR*/ 120/* Force text-green-600 to use your brand green */ 121.text-green-600 { 122 color: #003f2e !important; 123} 124 125/* Force bg-green-600 to use your brand green */ 126.bg-green-600 { 127 background-color: #003f2e !important; 128} 129 130/* Optional: override hover/focus if used */ 131.hover\:text-green-600:hover { 132 color: #003f2e !important; 133} 134.hover\:bg-green-600:hover { 135 background-color: #003f2e !important; 136} 137h2.text-lg.font-semibold { 138 color: #003f2e !important; 139 font-family: 'Rosario', sans-serif !important; 140 font-weight: 700 !important; /* Makes it bold */ 141} 142/*END OF MODULE/PRODUCT TEXT FONT AND COLOUR*/ 143 144/*PINK CUSTOM BUTTON*/ 145a.mv_custom_button.mv_pink_button { 146 background-color: #f51679; 147 color: #FFFFFF; 148 border-radius: 10px; 149 padding: 10px 20px; 150 display: inline-block; 151 font-size: 20px; 152 box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.65); 153} 154 155/*2 COLUMNS*/ 156/* Row Layout (no automatic centering) */ 157.row { 158 display: flex; 159 flex-wrap: wrap; /* Allow wrapping on smaller screens */ 160 justify-content: flex-start; /* Set to 'flex-start' for left alignment, 'center' or 'space-between' can be used if you want other alignments */ 161} 162/* Column Styling */ 163.column { 164 flex: 1 1 45%; /* Adjust column size */ 165 padding: 10px; 166 display: flex; 167 flex-direction: column; /* Stack icon and text vertically */ 168 justify-content: center;
169 align-items: center; /* Can adjust if you want different positioning */ 170} 171 172/* For mobile screens */ 173@media screen and (max-width: 600px) { 174 .row { 175 flex-direction: column; /* Stack columns vertically */ 176 } 177 .column { 178 width: 100%; /* Ensure columns take full width on mobile */ 179 } 180} 181 182/* CUSTOM FONTS */ 183h2 { font-family: 'Emilys Candy', cursive; color: #f51679; } 184h3, h4, h5, h6 { font-family: 'Rosario', sans-serif; } 185 186/* WELCOME AREA */ 187#mv_welcome_area { 188 background: #003f2e !important; 189 color: #ffffff !important; 190} 191 192#mv_welcome_area img.shadow-lg { 193 box-shadow: none; 194 float: right; 195 margin-left: 20px; 196 margin-bottom: 20px; 197} 198 199/* 200 MADDATU HOMEPAGE CONTENT STYLES 201 Page-content CSS only. 202 203 IMPORTANT: 204 - Existing Maddatu HTML classes are preserved. 205 - MemberVault header and footer are intentionally NOT styled here. 206 - No global html/body/header/footer rules are used so MemberVault's site chrome remains unchanged. 207 - Quicksand is used only inside #main-content. 208 - Colour choices prioritise WCAG 2.2 AA and AAA where practical. 209*/ 210 211@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap'); 212 213#main-content { 214 --color-primary: #0f3d32; 215 --color-primary-dark: #07241E; 216 --color-accent: #f51679; 217 --color-accent-accessible: #f51679; 218 --color-bg-cream: #faf7f4; 219 --color-bg-white: #FFFFFF; 220 --color-text-dark: #333333; 221 --color-text-light: #faf7f4; 222 --color-border: #9E9E9E; 223 --color-border-light: #E5E5EE; 224 --color-focus-dark: #07241E; 225 --color-focus-light: #FFFFFF; 226 --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 227 228 font-family: var(--font-primary); 229 font-size: 100%; 230 line-height: 1.625; 231 color: var(--color-text-dark); 232 background: var(--color-bg-white); 233 margin: 0 !important; 234 padding: 0 !important; 235} 236 237#main-content, 238#main-content *, 239#main-content *::before, 240#main-content *::after { 241 box-sizing: border-box; 242} 243 244#main-content img { 245 max-width: 100%; 246} 247 248#main-content .image-placeholder { 249 display: flex; 250 align-items: center; 251 justify-content: center; 252 width: 100%; 253 min-height: 180px; 254 padding: 20px; 255 background-color: var(--color-bg-cream); 256 color: var(--color-primary); 257 border: 2px solid var(--color-accent); 258 font-size: 1rem; 259 font-weight: 700; 260 text-align: center; 261} 262 263#main-content a { 264 color: var(--color-accent-accessible); 265} 266 267/* Keyboard focus. No global focus reset so MemberVault remains unaffected. */ 268#main-content :focus-visible, 269.skip-link:focus-visible { 270 outline: 3px solid var(--color-focus-light); 271 outline-offset: 4px; 272 box-shadow: 0 0 0 6px var(--color-focus-dark); 273} 274 275/* Skip link */ 276.skip-link { 277 position: absolute; 278 left: -9999px; 279 top: 8px; 280 z-index: 10000; 281 width: auto; 282 height: auto; 283 padding: 12px 24px; 284 background: var(--color-accent-accessible); 285 color: #FFFFFF !important; 286 border-radius: 6px; 287 font-family: var(--font-primary); 288 font-size: 1rem; 289 font-weight: 700; 290 text-decoration: none; 291} 292 293.skip-link:focus-visible { 294 left: 8px; 295 top: 8px; 296 outline-color: #FFFFFF; 297 box-shadow: 0 0 0 6px var(--color-primary-dark); 298} 299 300/* Layout */ 301#main-content .container { 302 width: 100%; 303 max-width: 1200px; 304 margin: 0 auto; 305 padding: 0 24px; 306} 307 308#main-content .section-padding { 309 padding: 90px 0; 310} 311 312#main-content .bg-cream { 313 background-color: var(--color-bg-cream); 314} 315 316#main-content .bg-white { 317 background-color: var(--color-bg-white); 318} 319 320#main-content .text-center { 321 text-align: center; 322} 323 324#main-content .max-width-800 { 325 max-width: 800px; 326 margin-right: auto; 327 margin-left: auto; 328} 329 330/* Typography */ 331#main-content h1, 332#main-content h2, 333#main-content h3, 334#main-content h4 { 335 font-family: var(--font-primary); 336 color: var(--color-primary); 337 line-height: 1.2; 338 margin-top: 0; 339} 340 341#main-content h1 { 342 font-size: 3rem; 343 letter-spacing: -0.02em; 344 margin-bottom: 24px; 345 font-weight: 700; 346} 347 348#main-content h2 { 349 font-size: 2.25rem; 350 margin-bottom: 24px; 351 font-weight: 700; 352} 353 354#main-content h1, 355#main-content h3 { 356 color: var(--color-primary); 357} 358 359#main-content h2, 360#main-content h4 { 361 color: var(--color-accent); 362} 363 364#main-content h3 { 365 font-size: 1.625rem; 366 margin-bottom: 16px; 367 font-weight: 600; 368} 369 370#main-content h4 { 371 font-size: 1.25rem; 372 margin-bottom: 12px; 373 font-weight: 600; 374} 375 376#main-content p { 377 margin-top: 0; 378 margin-bottom: 24px; 379} 380 381#main-content em { 382 font-style: italic; 383} 384 385#main-content p.lead { 386 font-size: 1.25rem; 387 font-weight: 500; 388 line-height: 1.6; 389} 390 391/* Buttons: three existing classes remain three distinct styles. */ 392#main-content .btn { 393 display: inline-flex; 394 align-items: center; 395 justify-content: center; 396 min-height: 48px; 397 font-family: var(--font-primary); 398 font-size: 1rem; 399 line-height: 1.2; 400 font-weight: 700; 401 text-decoration: none; 402 padding: 14px 28px; 403 border-radius: 6px; 404 border: 2px solid transparent; 405 cursor: pointer; 406 transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; 407} 408 409/* Pink filled */ 410#main-content .btn-primary { 411 background-color: var(--color-accent-accessible); 412 color: #FFFFFF !important; 413 border-color: var(--color-accent-accessible); 414 box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15); 415} 416 417#main-content .btn-primary:hover { 418 background-color: var(--color-primary-dark); 419 color: #FFFFFF !important; 420 border-color: var(--color-primary-dark); 421} 422 423/* Green filled */ 424#main-content .btn-secondary { 425 background-color: var(--color-primary); 426 color: #FFFFFF !important; 427 border-color: var(--color-primary); 428 box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15); 429} 430 431#main-content .btn-secondary:hover { 432 background-color: var(--color-primary-dark); 433 color: #FFFFFF !important; 434 border-color: var(--color-primary-dark); 435} 436 437/* Pink outline */ 438#main-content .btn-outline { 439 background-color: #FFFFFF; 440 color: var(--color-accent-accessible) !important; 441 border-color: var(--color-accent-accessible); 442} 443 444#main-content .btn-outline:hover { 445 background-color: var(--color-accent-accessible); 446 color: #FFFFFF !important; 447 border-color: var(--color-accent-accessible); 448} 449 450#main-content .btn-full { 451 width: 100%; 452} 453 454/* Hero */ 455#main-content .hero-section { 456 background-color: var(--color-primary-dark); 457 color: #FFFFFF; 458 padding: 80px 0; 459 overflow: hidden; 460 margin-top: 0 !important; 461} 462 463#main-content .hero-section h1 { 464 color: #ffffff; 465} 466 467#main-content .hero-grid { 468 display: grid; 469 grid-template-columns: 1.2fr 0.8fr; 470 gap: 60px; 471 align-items: center; 472} 473 474#main-content .hero-text-block { 475 text-align: left; 476} 477 478#main-content .byline-block { 479 display: flex; 480 align-items: center; 481 gap: 16px; 482 margin-bottom: 24px; 483 background-color: rgba(250, 247, 244, 0.06); 484 padding: 12px 18px; 485 border-radius: 8px; 486 border: 1px solid rgba(250, 247, 244, 0.45); 487} 488 489#main-content .byline-portrait-container { 490 width: 50px; 491 height: 50px; 492 border-radius: 50%; 493 overflow: hidden; 494 border: 2px solid var(--color-accent); 495 flex-shrink: 0; 496} 497 498#main-content .byline-portrait { 499 width: 100%; 500 height: 100%; 501 object-fit: cover; 502} 503 504#main-content .byline-text { 505 display: flex; 506 flex-direction: column; 507 font-size: 0.95rem; 508} 509 510#main-content .byline-author { 511 color: #FFFFFF; 512} 513 514#main-content .byline-desc { 515 color: #FFFFFF; 516} 517 518#main-content .byline-link { 519 color: #FFB3CB !important; 520 text-decoration: underline; 521 text-decoration-thickness: 0.12em; 522 text-underline-offset: 0.15em; 523 font-weight: 700; 524} 525 526#main-content .byline-link:hover {
527 color: #FFFFFF !important; 528} 529 530#main-content .hero-subheadline { 531 font-size: 1.4rem; 532 font-weight: 700; 533 color: #FFB3CB; 534 margin-bottom: 24px; 535 line-height: 1.55; 536} 537 538#main-content .answer-block { 539 background-color: rgba(250, 247, 244, 0.08); 540 border-left: 4px solid var(--color-accent); 541 padding: 16px 20px; 542 border-radius: 0 8px 8px 0; 543 margin-bottom: 30px; 544} 545 546#main-content .answer-block p { 547 margin: 0; 548 font-size: 1.05rem; 549 line-height: 1.6; 550 color: #FFFFFF; 551} 552 553#main-content .hero-image-block { 554 display: flex; 555 justify-content: center; 556 align-items: center; 557} 558 559#main-content .hero-large-img { 560 width: 100%; 561 max-width: 340px; 562 height: auto; 563 border-radius: 12px; 564 border: 4px solid var(--color-accent); 565 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); 566} 567 568/* Problem */ 569#main-content .problem-grid { 570 display: grid; 571 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 572 gap: 20px; 573 margin: 40px 0; 574} 575 576#main-content .problem-card { 577 background-color: var(--color-bg-white); 578 border-left: 4px solid var(--color-accent); 579 border-radius: 4px; 580 padding: 24px; 581 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); 582 display: flex; 583 align-items: flex-start; 584 gap: 16px; 585 text-align: left; 586} 587 588#main-content .problem-bullet { 589 color: var(--color-accent-accessible); 590 font-size: 1.15rem; 591 flex-shrink: 0; 592 font-weight: 700; 593} 594 595#main-content .problem-text { 596 margin: 0; 597 font-weight: 500; 598 font-size: 1.05rem; 599} 600 601#main-content .problem-outro { 602 background-color: rgba(15, 61, 50, 0.04); 603 border: 1px dashed var(--color-primary); 604 border-radius: 8px; 605 padding: 30px; 606 max-width: 700px; 607 margin: 40px auto 0 auto; 608} 609 610#main-content .problem-outro p { 611 font-size: 1.15rem; 612 font-weight: 600; 613 color: var(--color-primary-dark); 614 margin-bottom: 20px; 615} 616 617/* Services */ 618#main-content .services-subheading { 619 text-align: center; 620 margin-top: 50px; 621 margin-bottom: 35px; 622} 623 624#main-content .services-grid { 625 display: grid; 626 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 627 gap: 24px; 628 margin-bottom: 40px; 629} 630 631#main-content .service-card { 632 background-color: var(--color-bg-cream); 633 border: 1px solid var(--color-border); 634 border-radius: 8px; 635 padding: 30px; 636 display: flex; 637 flex-direction: column; 638 transition: transform 0.2s ease, box-shadow 0.2s ease; 639} 640 641#main-content .service-card:hover { 642 transform: translateY(-4px); 643 box-shadow: 0 8px 16px rgba(15, 61, 50, 0.08); 644} 645 646#main-content .service-image-container { 647 width: 100%; 648 height: auto; 649 border-radius: 6px; 650 overflow: hidden; 651 border: 1px solid var(--color-border); 652 margin-bottom: 20px; 653} 654 655#main-content .service-card-img { 656 width: 100%; 657 height: auto; 658 display: block; 659} 660 661#main-content .service-title-row { 662 display: flex; 663 align-items: center; 664 gap: 12px; 665 margin-bottom: 12px; 666} 667 668#main-content .service-card-icon { 669 font-size: 1.4rem; 670 color: var(--color-primary); 671} 672 673#main-content .service-card h4 { 674 margin: 0; 675 font-size: 1.25rem; 676} 677 678#main-content .service-card p { 679 margin: 0; 680 font-size: 1rem; 681 line-height: 1.6; 682} 683 684#main-content .services-notice { 685 text-align: center; 686 font-style: italic; 687 font-size: 1rem; 688 color: var(--color-text-dark); 689 max-width: 750px; 690 margin: 40px auto 0 auto; 691} 692 693/* Pricing */ 694#main-content .work-grid { 695 display: grid; 696 grid-template-columns: 1fr 1fr; 697 gap: 32px; 698 margin-top: 50px; 699 align-items: stretch; 700} 701 702#main-content .work-card { 703 background-color: var(--color-bg-white); 704 border: 1px solid var(--color-border); 705 border-radius: 12px; 706 padding: 40px; 707 display: flex; 708 flex-direction: column; 709 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 710} 711 712#main-content .work-card-banner { 713 width: 100%; 714 border-radius: 8px; 715 overflow: hidden; 716 border: 1px solid var(--color-border); 717 margin-bottom: 24px; 718} 719 720#main-content .work-card-banner-img { 721 width: 100%; 722 height: auto; 723 display: block; 724} 725 726#main-content .work-card h3 { 727 font-size: 1.85rem; 728 border-bottom: 2px solid var(--color-border); 729 padding-bottom: 15px; 730 margin-bottom: 20px; 731} 732 733#main-content .work-card-desc { 734 font-size: 1.05rem; 735 margin-bottom: 30px; 736} 737 738#main-content .pricing-tiers-list { 739 list-style: none; 740 padding: 0; 741 margin: 0 0 30px 0; 742} 743 744#main-content .pricing-tier-item { 745 background-color: var(--color-bg-cream); 746 border: 1px solid var(--color-border); 747 border-radius: 8px; 748 padding: 20px; 749 margin-bottom: 16px; 750} 751 752#main-content .pricing-tier-header { 753 display: flex; 754 justify-content: space-between; 755 align-items: baseline; 756 flex-wrap: wrap; 757 gap: 8px; 758 margin-bottom: 6px; 759} 760 761#main-content .pricing-tier-name { 762 font-weight: 700; 763 font-size: 1.15rem; 764 color: var(--color-primary-dark); 765} 766 767#main-content .pricing-tier-hours { 768 font-size: 0.9rem; 769 font-weight: 700; 770 background-color: var(--color-primary); 771 color: #FFFFFF; 772 padding: 4px 10px; 773 border-radius: 4px; 774} 775 776#main-content .pricing-tier-cost { 777 font-weight: 700; 778 font-size: 1.3rem; 779 color: var(--color-text-dark); 780} 781 782#main-content .pricing-tier-sub { 783 font-size: 0.95rem; 784 color: #404740; 785 font-weight: 400; 786} 787 788#main-content .pricing-tier-desc { 789 margin: 8px 0 0 0; 790 font-size: 1rem; 791 line-height: 1.5; 792} 793 794#main-content .projects-list-title { 795 color: var(--color-primary-dark); 796 margin-bottom: 15px; 797} 798 799#main-content .projects-list { 800 list-style: none; 801 padding: 0; 802 margin: 0 0 30px 0; 803} 804 805#main-content .projects-list li { 806 padding: 10px 0; 807 border-bottom: 1px solid var(--color-border-light); 808 display: flex; 809 align-items: center; 810 gap: 12px; 811 font-size: 1rem; 812} 813 814#main-content .projects-list li:last-child { 815 border-bottom: none; 816} 817 818#main-content .project-list-bullet { 819 color: var(--color-accent-accessible); 820 font-weight: 700; 821} 822 823#main-content .project-minimum-tier { 824 margin-top: auto; 825 margin-bottom: 30px; 826} 827 828#main-content .work-card .btn { 829 margin-top: auto; 830} 831 832/* Why / comparison table */ 833#main-content .why-grid { 834 display: grid; 835 grid-template-columns: 1fr 1fr; 836 gap: 24px; 837 margin-top: 40px; 838 margin-bottom: 60px; 839} 840 841#main-content .why-item { 842 background-color: var(--color-bg-cream); 843 border: 1px solid var(--color-border); 844 border-radius: 8px; 845 padding: 24px; 846 display: flex; 847 align-items: flex-start; 848 gap: 16px; 849} 850 851#main-content .why-icon { 852 background-color: var(--color-accent); 853 color: #FFFFFF; 854 width: 32px; 855 height: 32px; 856 border-radius: 50%; 857 display: flex; 858 align-items: center; 859 justify-content: center; 860 flex-shrink: 0; 861 font-size: 0.9rem; 862} 863 864#main-content .why-item p { 865 margin: 0; 866 font-size: 1.05rem; 867 line-height: 1.5; 868} 869 870#main-content .table-container { 871 width: 100%; 872 margin-bottom: 70px; 873 border: 1px solid var(--color-border); 874 border-radius: 8px; 875 overflow: hidden; 876} 877 878#main-content .table-title { 879 background-color: var(--color-primary-dark); 880 color: #FFFFFF; 881 margin: 0; 882 padding: 20px 24px; 883 font-size: 1.35rem; 884 text-align: left; 885} 886 887#main-content .comparison-table-wrapper { 888 width: 100%; 889 overflow-x: auto; 890} 891 892#main-content .comparison-table { 893 width: 100%; 894 border-collapse: separate; 895 border-spacing: 0; 896 text-align: left; 897 background-color: var(--color-bg-white); 898 min-width: 600px; 899} 900 901#main-content .comparison-table th, 902#main-content .comparison-table td { 903 padding: 16px 24px; 904 border-bottom: 1px solid var(--color-border-light); 905 font-size: 1rem; 906 vertical-align: top; 907} 908 909#main-content .comparison-table thead th { 910 background-color: var(--color-primary); 911 color: #FFFFFF; 912 font-weight: 700; 913} 914 915#main-content .comparison-table tbody th { 916 font-weight: 600; 917 color: var(--color-primary-dark); 918} 919 920#main-content .comparison-table .highlight-column { 921 background-color: rgba(245, 22, 121, 0.06); 922 font-weight: 600; 923 color: var(--color-primary-dark); 924 border-left: 3px solid var(--color-accent); 925 border-right: 3px solid var(--color-accent); 926} 927 928#main-content .comparison-table thead .highlight-column { 929 border-top: 3px solid var(--color-accent); 930} 931 932#main-content .comparison-table tbody tr:last-child .highlight-column { 933 border-bottom: 3px solid var(--color-accent); 934} 935 936/* Testimonials */ 937#main-content .proof-block-container { 938 border-top: 2px solid var(--color-border-light); 939 padding-top: 50px; 940} 941 942#main-content .proof-title { 943 text-align: center; 944 font-size: 1.65rem; 945 margin-bottom: 40px; 946} 947 948#main-content .testimonials-grid { 949 display: grid; 950 grid-template-columns: 1fr 1fr; 951 gap: 32px; 952} 953 954#main-content .testimonial-card { 955 background-color: var(--color-bg-cream);
956 border-top: 4px solid var(--color-primary); 957 border-radius: 6px; 958 padding: 35px; 959 margin: 0; 960 display: flex; 961 flex-direction: column; 962} 963 964#main-content .testimonial-card > img, 965#main-content .testimonial-placeholder-img { 966 width: 84px; 967 height: 84px; 968 border-radius: 50%; 969 object-fit: cover; 970 margin: 0 auto 20px auto; 971 border: 2px solid var(--color-accent); 972} 973 974#main-content .testimonial-quote { 975 font-style: italic; 976 font-size: 1.05rem; 977 line-height: 1.65; 978 margin-bottom: 20px; 979} 980 981 982#main-content .testimonial-author { 983 font-weight: 700; 984 font-size: 1rem; 985 color: var(--color-primary-dark); 986 margin-top: auto; 987 font-style: normal; 988} 989 990/* FAQ */ 991#main-content .faq-list { 992 max-width: 800px; 993 margin: 40px auto 0 auto; 994} 995 996#main-content .faq-item { 997 background-color: var(--color-bg-white); 998 border: 1px solid var(--color-border); 999 border-radius: 6px; 1000 margin-bottom: 16px; 1001 overflow: hidden; 1002 transition: border-color 0.2s ease; 1003} 1004 1005#main-content .faq-item[open] { 1006 border-color: var(--color-primary); 1007} 1008 1009#main-content .faq-item summary { 1010 padding: 20px 24px; 1011 font-weight: 600; 1012 font-size: 1.1rem; 1013 color: var(--color-primary-dark); 1014 cursor: pointer; 1015 list-style: none; 1016 display: flex; 1017 justify-content: space-between; 1018 align-items: center; 1019 user-select: none; 1020} 1021 1022#main-content .faq-item summary::-webkit-details-marker { 1023 display: none; 1024} 1025 1026#main-content .faq-item summary::after { 1027 content: "+"; 1028 font-size: 1.5rem; 1029 font-weight: 700; 1030 color: var(--color-primary); 1031 transition: transform 0.2s ease; 1032} 1033 1034#main-content .faq-item[open] summary::after { 1035 content: "−"; 1036 transform: rotate(180deg); 1037} 1038 1039#main-content .faq-content { 1040 padding: 0 24px 20px 24px; 1041 border-top: 1px solid var(--color-border-light); 1042} 1043 1044#main-content .faq-content p { 1045 margin: 0; 1046 font-size: 1rem; 1047 line-height: 1.6; 1048} 1049 1050/* Contact */ 1051#main-content .contact-grid { 1052 display: grid; 1053 grid-template-columns: 4fr 5fr; 1054 gap: 50px; 1055 margin-bottom: 50px; 1056} 1057 1058#main-content .contact-info { 1059 text-align: left; 1060} 1061 1062#main-content .contact-guide-box { 1063 background-color: var(--color-bg-cream); 1064 border: 1px solid var(--color-border); 1065 border-radius: 8px; 1066 padding: 30px; 1067 margin-top: 25px; 1068} 1069 1070#main-content .contact-guide-box h4 { 1071 margin-top: 0; 1072 font-size: 1.2rem; 1073 color: var(--color-primary-dark); 1074} 1075 1076#main-content .contact-checklist { 1077 list-style: none; 1078 padding: 0; 1079 margin: 0 0 20px 0; 1080} 1081 1082#main-content .contact-checklist li { 1083 position: relative; 1084 padding-left: 28px; 1085 margin-bottom: 12px; 1086 font-weight: 500; 1087 font-size: 1rem; 1088} 1089 1090#main-content .contact-checklist li::before { 1091 content: "✔"; 1092 position: absolute; 1093 left: 0; 1094 top: 0; 1095 color: var(--color-accent-accessible); 1096 font-weight: 700; 1097} 1098 1099#main-content .contact-note { 1100 margin: 0; 1101 font-size: 1rem; 1102} 1103 1104#main-content .contact-form-container { 1105 background-color: var(--color-bg-cream); 1106 border: 1px solid var(--color-border); 1107 border-radius: 8px; 1108 padding: 40px; 1109 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 1110} 1111 1112#main-content .contact-form { 1113 width: 100%; 1114} 1115 1116#main-content .form-row { 1117 display: grid; 1118 grid-template-columns: 1fr 1fr; 1119 gap: 20px; 1120} 1121 1122#main-content .form-group { 1123 margin-bottom: 24px; 1124 text-align: left; 1125} 1126 1127#main-content .form-group label { 1128 display: block; 1129 font-weight: 600; 1130 font-size: 1rem; 1131 margin-bottom: 8px; 1132 color: var(--color-primary-dark); 1133} 1134 1135#main-content .form-group input[type="text"], 1136#main-content .form-group input[type="email"], 1137#main-content .form-group textarea { 1138 width: 100%; 1139 padding: 12px 16px; 1140 border: 2px solid var(--color-border); 1141 border-radius: 4px; 1142 font-family: var(--font-primary); 1143 font-size: 1rem; 1144 line-height: 1.5; 1145 color: var(--color-text-dark); 1146 background-color: var(--color-bg-white); 1147 transition: border-color 0.2s ease, box-shadow 0.2s ease; 1148} 1149 1150#main-content .form-group input[type="text"]:focus, 1151#main-content .form-group input[type="email"]:focus, 1152#main-content .form-group textarea:focus { 1153 border-color: var(--color-primary-dark); 1154 box-shadow: 0 0 0 3px rgba(7, 36, 30, 0.18); 1155 outline: 3px solid transparent; 1156} 1157 1158#main-content .form-group input::placeholder, 1159#main-content .form-group textarea::placeholder { 1160 color: #4A4A4A; 1161 opacity: 1; 1162} 1163 1164#main-content .form-group textarea { 1165 resize: vertical; 1166 min-height: 150px; 1167} 1168 1169 1170/* Motion */ 1171@media (prefers-reduced-motion: reduce) { 1172 #main-content *, 1173 #main-content *::before, 1174 #main-content *::after, 1175 .skip-link { 1176 animation-delay: -1ms !important; 1177 animation-duration: 1ms !important; 1178 animation-iteration-count: 1 !important; 1179 transition-duration: 0s !important; 1180 scroll-behavior: auto !important; 1181 } 1182} 1183 1184/* Responsive */ 1185@media (max-width: 900px) { 1186 #main-content .hero-grid { 1187 grid-template-columns: 1fr; 1188 text-align: center; 1189 gap: 40px; 1190 } 1191 1192 #main-content .hero-text-block { 1193 text-align: center; 1194 } 1195 1196 #main-content .byline-block { 1197 justify-content: center; 1198 text-align: left; 1199 } 1200 1201 #main-content .hero-image-block { 1202 order: -1; 1203 } 1204 1205 #main-content .hero-large-img { 1206 max-width: 260px; 1207 } 1208
1209 #main-content .work-grid, 1210 #main-content .contact-grid { 1211 grid-template-columns: 1fr; 1212 } 1213 1214 #main-content .contact-grid { 1215 gap: 40px; 1216 } 1217} 1218 1219@media (max-width: 768px) { 1220 #main-content h1 { font-size: 2.25rem; } 1221 #main-content h2 { font-size: 1.875rem; } 1222 #main-content h3 { font-size: 1.4rem; } 1223 #main-content p.lead { font-size: 1.15rem; } 1224 1225 #main-content .why-grid, 1226 #main-content .testimonials-grid { 1227 grid-template-columns: 1fr; 1228 } 1229} 1230 1231@media (max-width: 600px) { 1232 #main-content .container { 1233 padding: 0 20px; 1234 } 1235 1236 #main-content .section-padding { 1237 padding: 70px 0; 1238 } 1239 1240 #main-content .form-row { 1241 grid-template-columns: 1fr; 1242 } 1243 1244 #main-content .contact-form-container { 1245 padding: 28px 20px; 1246 } 1247 1248 #main-content .work-card { 1249 padding: 28px 20px; 1250 } 1251} 1252 1253 1254/* Placeholder sizing */ 1255#main-content .byline-portrait { 1256 width: 50px; 1257 height: 50px; 1258 min-height: 50px; 1259 padding: 6px; 1260 border-radius: 50%; 1261 font-size: 0.7rem; 1262} 1263 1264#main-content .hero-large-img { 1265 width: 100%; 1266 max-width: 340px; 1267 min-height: 340px; 1268 border-radius: 12px; 1269 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); 1270} 1271 1272#main-content .service-card-img { 1273 min-height: 180px; 1274} 1275 1276#main-content .work-card-banner-img { 1277 min-height: 180px; 1278} 1279 1280#main-content .testimonial-placeholder-img { 1281 width: 84px; 1282 height: 84px; 1283 min-height: 84px; 1284 padding: 8px; 1285 border-radius: 50%; 1286 margin: 0 auto 20px auto; 1287 font-size: 0.8rem; 1288} 1289 1290 1291/* MemberVault paste cleanup */ 1292.mv-block > p:empty, 1293.mv-block > div:empty { 1294 display: none !important; 1295 height: 0 !important; 1296 min-height: 0 !important; 1297 margin: 0 !important; 1298 padding: 0 !important; 1299 border: 0 !important; 1300} 1301 1302#main-content { 1303 margin-top: 0 !important; 1304 margin-bottom: 0 !important; 1305 padding-top: 0 !important; 1306} 1307 1308/* Remove the 50px MemberVault content gap above the hero */ 1309.mv-block > #main-content:first-child { 1310 margin-top: -50px !important; 1311} 1312 1313html{ font-size: 100%} </style> 1314 1315
1315<script> 1316 var g_bAnnouncementStatus = false;var g_bProductUniform = true; </script>
1316 1317 1318
1318<script> 1319 var js_first_name = 'User'; 1320 var js_last_name = 'User'; 1321 var js_email = 'Email'; 1322 </script>
1322 1323 1324 <!-- COPY CODE TO CLIPBOARD -->
1325<script> 1326function copyCode() { 1327 var codeElement = document.getElementById('myCode'); 1328 var textArea = document.createElement('textarea'); 1329 textArea.value = codeElement.textContent; 1330 document.body.appendChild(textArea); 1331 textArea.select(); 1332 document.execCommand('copy'); 1333 document.body.removeChild(textArea); 1334 1335 alert('Code copied to clipboard!'); 1336} 1337</script>
1337 1338<!-- END - COPY CODE TO CLIPBOARD --> 1339 1340<!-- MAILERLITE UNIVERSAL -->
1341<script> 1342 (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[]) 1343 .push(arguments);},l=d.createElement(e),l.async=1,l.src=u, 1344 n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);}) 1345 (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml'); 1346 ml('account', '107223'); 1347</script>
1347 1348<!-- END MAILERLITE UNIVERSAL --> 1349 1350<!-- HIDE WELCOME AREA ON ALL PAGES EXPECT SERVICES -->
1351<script> 1352document.addEventListener("DOMContentLoaded", function () { 1353 const welcomeArea = document.getElementById("mv_welcome_area"); 1354 1355 if (!window.location.pathname.includes("/products")) { 1356 if (welcomeArea) { 1357 welcomeArea.style.display = "none"; 1358 } 1359 } 1360}); 1361</script>
1361 1362<!-- END - HIDE WELCOME AREA ON ALL PAGES EXPECT SERVICES --> 1363</head> 1364 1365<body class="bg-gray-100 text-gray-800 mv_not_logged_in mv_page_page mv_page_page_14179" style="background-color:#FFFFFF; color:#0F3D32;"> 1366 <canvas id="confetti"></canvas> 1367 <div class="w-full overflow-x-hidden"> 1368 1369 <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;"> 1370 1371 1372 <div class="relative flex w-full h-20 max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10"> 1373 1374 <a href="/" class="flex-initial flex h-full mv_logo"> 1375 <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> 1376 1377 <div class="flex-auto hidden lg:flex ml-4 text-center"> 1378 <ul class="w-full inline-block my-auto text-center"> 1379 <li class="inline-block ml-4 mr-4 hover:border-b "> 1380 <a href="/home" > 1381 Home </a> 1382 </li> 1383 <li class="inline-block ml-4 mr-4 hover:border-b border-b"> 1384 <a href="/about" > 1385 About </a> 1386 </li> 1387 <li class="inline-block ml-4 mr-4 hover:border-b "> 1388 <a href="/services" > 1389 Services </a> 1390 </li> 1391 <li class="inline-block ml-4 mr-4 hover:border-b "> 1392 <a href="/contact" > 1393 Contact </a> 1394 </li> 1395 <li class="inline-block ml-4 mr-4 hover:border-b "> 1396 <a href="/blog" > 1397 Blog </a> 1398 </li> 1399 </ul> 1400 </div> 1401 1402 <div class="relative flex-auto lg:flex-initial my-auto mv_user_nav flex flex-row-reverse flex-nowrap"> 1403 <a class="my-auto ml-4" href="javascript:toggleMainNav()"> 1404 <i class="fas fa-grip-lines"></i> 1405 </a> 1406 <a href="javascript:toggleLogin()" class="text-sm flex my-auto"> 1407 Sign In <i class="fas fa-angle-right hidden lg:flex ml-2 my-auto"></i> 1408 </a> 1409 1410 1411 1412 </div> 1413 1414 <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)"> 1415 <span class="text-sm font-light">(error)</span> 1416 <hr> 1417 <a class="inline-block pb-2 pt-2 w-full" href="/products/profile">Profile</a> 1418 1419 <a class="inline-block pb-2 pt-2 w-full font-bold" href="/logout">Logout</a> 1420 1421 <hr class="inline-block w-full"> 1422 1423 Notifications 1424 <ul class="mv_notifications mt-2"> 1425 <li class="italic text-right" style="list-style: none;"><a class="underline" href="/products/notifications">see all notifications</a></li> 1426 </ul> 1427 1428 1429 1430 </div> 1431 1432 <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)"> 1433 <a class="inline-block pb-2 pt-2 w-full" href="javascript:changeTextSize(100)">
1434 <span class="mv_text_nav_dot" id="mv_text_nav_dot_100"> 1435 <i class="far fa-dot-circle"></i> 1436 </span> 1437 Text Size 1438 </a> 1439 <a class="inline-block pb-2 pt-2 w-full" style="font-size: 115%" href="javascript:changeTextSize(115)"> 1440 <span class="mv_text_nav_dot" id="mv_text_nav_dot_115"> 1441 <i class="far fa-circle"></i> 1442 </span> 1443 Text Size 1444 </a> 1445 <a class="inline-block pb-2 pt-2 w-full" style="font-size: 130%" href="javascript:changeTextSize(130)"> 1446 <span class="mv_text_nav_dot" id="mv_text_nav_dot_130"> 1447 <i class="far fa-circle"></i> 1448 </span> 1449 Text Size 1450 </a> 1451 <a class="inline-block pb-2 pt-2 w-full" style="font-size: 145%" href="javascript:changeTextSize(145)"> 1452 <span class="mv_text_nav_dot" id="mv_text_nav_dot_145"> 1453 <i class="far fa-circle"></i> 1454 </span> 1455 Text Size 1456 </a> 1457 </div> 1458 1459 </div> 1460 </header> 1461 <div id="mv_welcome_area_padding" class="h-20 bg-gray-800 " style="background-color:#FFFFFF;"></div> 1462 1463 1464<style> 1465 /* 1466 MADDATU HOMEPAGE CONTENT STYLES 1467 Page-content CSS only. 1468 1469 IMPORTANT: 1470 - Existing Maddatu HTML classes are preserved. 1471 - MemberVault header and footer are intentionally NOT styled here. 1472 - No global html/body/header/footer rules are used so MemberVault's site chrome remains unchanged. 1473 - Quicksand is used only inside #main-content. 1474 - Colour choices prioritise WCAG 2.2 AA and AAA where practical. 1475*/ 1476 1477@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap'); 1478 1479#main-content { 1480 --color-primary: #0f3d32; 1481 --color-primary-dark: #07241E; 1482 --color-accent: #f51679; 1483 --color-accent-accessible: #f51679; 1484 --color-bg-cream: #faf7f4; 1485 --color-bg-white: #FFFFFF; 1486 --color-text-dark: #333333; 1487 --color-text-light: #faf7f4; 1488 --color-border: #9E9E9E; 1489 --color-border-light: #E5E5EE; 1490 --color-focus-dark: #07241E; 1491 --color-focus-light: #FFFFFF; 1492 --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 1493 1494 font-family: var(--font-primary); 1495 font-size: 100%; 1496 line-height: 1.625; 1497 color: var(--color-text-dark); 1498 background: var(--color-bg-white); 1499 margin: 0 !important; 1500 padding: 0 !important; 1501} 1502 1503#main-content, 1504#main-content *, 1505#main-content *::before, 1506#main-content *::after { 1507 box-sizing: border-box; 1508} 1509 1510#main-content img { 1511 max-width: 100%; 1512} 1513 1514#main-content .image-placeholder { 1515 display: flex; 1516 align-items: center; 1517 justify-content: center; 1518 width: 100%; 1519 min-height: 180px; 1520 padding: 20px; 1521 background-color: var(--color-bg-cream); 1522 color: var(--color-primary); 1523 border: 2px solid var(--color-accent); 1524 font-size: 1rem; 1525 font-weight: 700; 1526 text-align: center; 1527} 1528 1529#main-content a { 1530 color: var(--color-accent-accessible); 1531} 1532 1533#main-content :focus-visible, 1534.skip-link:focus-visible { 1535 outline: 3px solid var(--color-focus-light); 1536 outline-offset: 4px; 1537 box-shadow: 0 0 0 6px var(--color-focus-dark); 1538} 1539 1540.skip-link { 1541 position: absolute; 1542 left: -9999px; 1543 top: 8px; 1544 z-index: 10000; 1545 width: auto; 1546 height: auto; 1547 padding: 12px 24px; 1548 background: var(--color-accent-accessible); 1549 color: #FFFFFF !important; 1550 border-radius: 6px; 1551 font-family: var(--font-primary); 1552 font-size: 1rem; 1553 font-weight: 700; 1554 text-decoration: none; 1555} 1556 1557.skip-link:focus-visible { 1558 left: 8px; 1559 top: 8px; 1560 outline-color: #FFFFFF; 1561 box-shadow: 0 0 0 6px var(--color-primary-dark); 1562} 1563 1564/* Layout */ 1565#main-content .container { 1566 width: 100%; 1567 max-width: 1200px; 1568 margin: 0 auto; 1569 padding: 0 24px; 1570} 1571 1572#main-content .section-padding { 1573 padding: 90px 0; 1574} 1575 1576#main-content .bg-cream { 1577 background-color: var(--color-bg-cream); 1578} 1579 1580#main-content .bg-white { 1581 background-color: var(--color-bg-white); 1582} 1583 1584#main-content .text-center { 1585 text-align: center; 1586} 1587 1588#main-content .max-width-800 { 1589 max-width: 800px; 1590 margin-right: auto; 1591 margin-left: auto; 1592} 1593 1594/* Typography */ 1595#main-content h1, 1596#main-content h2, 1597#main-content h3, 1598#main-content h4 { 1599 font-family: var(--font-primary); 1600 color: var(--color-primary); 1601 line-height: 1.2; 1602 margin-top: 0; 1603} 1604 1605#main-content h1 { 1606 font-size: 3rem; 1607 letter-spacing: -0.02em; 1608 margin-bottom: 24px; 1609 font-weight: 700; 1610} 1611 1612#main-content h2 { 1613 font-size: 2.25rem; 1614 margin-bottom: 24px; 1615 font-weight: 700; 1616} 1617 1618#main-content h1, 1619#main-content h3 { 1620 color: var(--color-primary); 1621} 1622 1623#main-content h2, 1624#main-content h4 { 1625 color: var(--color-accent); 1626} 1627 1628#main-content h3 { 1629 font-size: 1.625rem; 1630 margin-bottom: 16px; 1631 font-weight: 600; 1632} 1633 1634#main-content h4 { 1635 font-size: 1.25rem; 1636 margin-bottom: 12px; 1637 font-weight: 600; 1638} 1639 1640#main-content p { 1641 margin-top: 0; 1642 margin-bottom: 24px; 1643} 1644 1645#main-content em { 1646 font-style: italic; 1647} 1648 1649#main-content p.lead { 1650 font-size: 1.25rem; 1651 font-weight: 500; 1652 line-height: 1.6; 1653} 1654 1655/* Buttons */ 1656#main-content .btn { 1657 display: inline-flex; 1658 align-items: center; 1659 justify-content: center; 1660 min-height: 48px; 1661 font-family: var(--font-primary); 1662 font-size: 1rem; 1663 line-height: 1.2; 1664 font-weight: 700; 1665 text-decoration: none; 1666 padding: 14px 28px; 1667 border-radius: 6px; 1668 border: 2px solid transparent; 1669 cursor: pointer; 1670 transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; 1671} 1672 1673#main-content .btn-primary { 1674 background-color: var(--color-accent-accessible); 1675 color: #FFFFFF !important; 1676 border-color: var(--color-accent-accessible); 1677 box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15); 1678} 1679 1680#main-content .btn-primary:hover { 1681 background-color: var(--color-primary-dark); 1682 color: #FFFFFF !important; 1683 border-color: var(--color-primary-dark); 1684} 1685 1686#main-content .btn-secondary { 1687 background-color: var(--color-primary); 1688 color: #FFFFFF !important; 1689 border-color: var(--color-primary); 1690 box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15); 1691} 1692 1693#main-content .btn-secondary:hover { 1694 background-color: var(--color-primary-dark); 1695 color: #FFFFFF !important; 1696 border-color: var(--color-primary-dark); 1697} 1698 1699#main-content .btn-outline { 1700 background-color: #FFFFFF; 1701 color: var(--color-accent-accessible) !important; 1702 border-color: var(--color-accent-accessible); 1703} 1704 1705#main-content .btn-outline:hover { 1706 background-color: var(--color-accent-accessible); 1707 color: #FFFFFF !important; 1708 border-color: var(--color-accent-accessible); 1709} 1710 1711#main-content .btn-full { 1712 width: 100%; 1713} 1714 1715/* Hero */ 1716#main-content .hero-section { 1717 background-color: var(--color-primary-dark); 1718 color: #FFFFFF; 1719 padding: 80px 0; 1720 overflow: hidden; 1721 margin-top: 0 !important; 1722} 1723 1724#main-content .hero-section h1 { 1725 color: #ffffff; 1726} 1727 1728#main-content .hero-grid { 1729 display: grid; 1730 grid-template-columns: 1.2fr 0.8fr; 1731 gap: 60px; 1732 align-items: center; 1733} 1734 1735#main-content .hero-text-block { 1736 text-align: left; 1737} 1738 1739#main-content .byline-block { 1740 display: flex; 1741 align-items: center; 1742 gap: 16px; 1743 margin-bottom: 24px; 1744 background-color: rgba(250, 247, 244, 0.06); 1745 padding: 12px 18px; 1746 border-radius: 8px; 1747 border: 1px solid rgba(250, 247, 244, 0.45); 1748} 1749 1750#main-content .byline-portrait-container { 1751 width: 50px; 1752 height: 50px; 1753 border-radius: 50%; 1754 overflow: hidden; 1755 border: 2px solid var(--color-accent); 1756 flex-shrink: 0; 1757} 1758 1759#main-content .byline-portrait { 1760 display: block; 1761 width: 100%; 1762 height: 100%; 1763 min-height: 0; 1764 padding: 0; 1765 border: 0; 1766 border-radius: 50%; 1767 object-fit: cover; 1768} 1769 1770#main-content .byline-text { 1771 display: flex; 1772 flex-direction: column; 1773 font-size: 0.95rem; 1774} 1775 1776#main-content .byline-author, 1777#main-content .byline-desc { 1778 color: #FFFFFF; 1779} 1780 1781#main-content .byline-link { 1782 color: #FFB3CB !important; 1783 text-decoration: underline; 1784 text-decoration-thickness: 0.12em; 1785 text-underline-offset: 0.15em; 1786 font-weight: 700; 1787} 1788 1789#main-content .byline-link:hover {
1790 color: #FFFFFF !important; 1791} 1792 1793#main-content .hero-subheadline { 1794 font-size: 1.4rem; 1795 font-weight: 700; 1796 color: #FFB3CB; 1797 margin-bottom: 24px; 1798 line-height: 1.55; 1799} 1800 1801#main-content .answer-block { 1802 background-color: rgba(250, 247, 244, 0.08); 1803 border-left: 4px solid var(--color-accent); 1804 padding: 16px 20px; 1805 border-radius: 0 8px 8px 0; 1806 margin-bottom: 30px; 1807} 1808 1809#main-content .answer-block p { 1810 margin: 0; 1811 font-size: 1.05rem; 1812 line-height: 1.6; 1813 color: #FFFFFF; 1814} 1815 1816#main-content .hero-image-block { 1817 display: flex; 1818 justify-content: center; 1819 align-items: center; 1820} 1821 1822#main-content .hero-large-img { 1823 display: block; 1824 width: 100%; 1825 max-width: 420px; 1826 height: auto; 1827 border-radius: 12px; 1828 border: 4px solid var(--color-accent); 1829 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); 1830} 1831 1832/* Problem */ 1833#main-content .problem-grid { 1834 display: grid; 1835 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 1836 gap: 20px; 1837 margin: 40px 0; 1838} 1839 1840#main-content .problem-card { 1841 background-color: var(--color-bg-white); 1842 border-left: 4px solid var(--color-accent); 1843 border-radius: 4px; 1844 padding: 24px; 1845 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); 1846 display: flex; 1847 align-items: flex-start; 1848 gap: 16px; 1849 text-align: left; 1850} 1851 1852#main-content .problem-bullet { 1853 color: var(--color-accent-accessible); 1854 font-size: 1.15rem; 1855 flex-shrink: 0; 1856 font-weight: 700; 1857} 1858 1859#main-content .problem-text { 1860 margin: 0; 1861 font-weight: 500; 1862 font-size: 1.05rem; 1863} 1864 1865#main-content .problem-outro { 1866 background-color: rgba(15, 61, 50, 0.04); 1867 border: 1px dashed var(--color-primary); 1868 border-radius: 8px; 1869 padding: 30px; 1870 max-width: 700px; 1871 margin: 40px auto 0 auto; 1872} 1873 1874#main-content .problem-outro p { 1875 font-size: 1.15rem; 1876 font-weight: 600; 1877 color: var(--color-primary-dark); 1878 margin-bottom: 20px; 1879} 1880 1881/* Services */ 1882#main-content .services-subheading { 1883 text-align: center; 1884 margin-top: 50px; 1885 margin-bottom: 35px; 1886} 1887 1888#main-content .services-grid { 1889 display: grid; 1890 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 1891 gap: 24px; 1892 margin-bottom: 40px; 1893} 1894 1895#main-content .service-card { 1896 background-color: var(--color-bg-cream); 1897 border: 1px solid var(--color-border); 1898 border-radius: 8px; 1899 padding: 30px; 1900 display: flex; 1901 flex-direction: column; 1902 transition: transform 0.2s ease, box-shadow 0.2s ease; 1903} 1904 1905#main-content .service-card:hover { 1906 transform: translateY(-4px); 1907 box-shadow: 0 8px 16px rgba(15, 61, 50, 0.08); 1908} 1909 1910#main-content .service-image-container { 1911 width: 100%; 1912 height: auto; 1913 border-radius: 6px; 1914 overflow: hidden; 1915 border: 1px solid var(--color-border); 1916 margin-bottom: 20px; 1917} 1918 1919#main-content .service-card-img { 1920 width: 100%; 1921 height: auto; 1922 display: block; 1923} 1924 1925#main-content .service-title-row { 1926 display: flex; 1927 align-items: center; 1928 gap: 12px; 1929 margin-bottom: 12px; 1930} 1931 1932#main-content .service-card-icon { 1933 font-size: 1.4rem; 1934 color: var(--color-primary); 1935} 1936 1937#main-content .service-card h4 { 1938 margin: 0; 1939 font-size: 1.25rem; 1940} 1941 1942#main-content .service-card p { 1943 margin: 0; 1944 font-size: 1rem; 1945 line-height: 1.6; 1946} 1947 1948#main-content .services-notice { 1949 text-align: center; 1950 font-style: italic; 1951 font-size: 1rem; 1952 color: var(--color-text-dark); 1953 max-width: 750px; 1954 margin: 40px auto 0 auto; 1955} 1956 1957/* Pricing */ 1958#main-content .work-grid { 1959 display: grid; 1960 grid-template-columns: 1fr 1fr; 1961 gap: 32px; 1962 margin-top: 50px; 1963 align-items: stretch; 1964} 1965 1966#main-content .work-card { 1967 background-color: var(--color-bg-white); 1968 border: 1px solid var(--color-border); 1969 border-radius: 12px; 1970 padding: 40px; 1971 display: flex; 1972 flex-direction: column; 1973 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 1974} 1975 1976#main-content .work-card-banner { 1977 width: 100%; 1978 border-radius: 8px; 1979 overflow: hidden; 1980 border: 1px solid var(--color-border); 1981 margin-bottom: 24px; 1982} 1983 1984#main-content .work-card-banner-img { 1985 width: 100%; 1986 height: auto; 1987 display: block; 1988} 1989 1990#main-content .work-card h3 { 1991 font-size: 1.85rem; 1992 border-bottom: 2px solid var(--color-border); 1993 padding-bottom: 15px; 1994 margin-bottom: 20px; 1995} 1996 1997#main-content .work-card-desc { 1998 font-size: 1.05rem; 1999 margin-bottom: 30px; 2000} 2001 2002#main-content .pricing-tiers-list { 2003 list-style: none; 2004 padding: 0; 2005 margin: 0 0 30px 0; 2006} 2007 2008#main-content .pricing-tier-item { 2009 background-color: var(--color-bg-cream); 2010 border: 1px solid var(--color-border); 2011 border-radius: 8px; 2012 padding: 20px; 2013 margin-bottom: 16px; 2014} 2015 2016#main-content .pricing-tier-header { 2017 display: flex; 2018 justify-content: space-between; 2019 align-items: baseline; 2020 flex-wrap: wrap; 2021 gap: 8px; 2022 margin-bottom: 6px; 2023} 2024 2025#main-content .pricing-tier-name { 2026 font-weight: 700; 2027 font-size: 1.15rem; 2028 color: var(--color-primary-dark); 2029} 2030 2031#main-content .pricing-tier-hours { 2032 font-size: 0.9rem; 2033 font-weight: 700; 2034 background-color: var(--color-primary); 2035 color: #FFFFFF; 2036 padding: 4px 10px; 2037 border-radius: 4px; 2038} 2039 2040#main-content .pricing-tier-cost { 2041 font-weight: 700; 2042 font-size: 1.3rem; 2043 color: var(--color-text-dark); 2044} 2045 2046#main-content .pricing-tier-sub { 2047 font-size: 0.95rem; 2048 color: #404740; 2049 font-weight: 400; 2050} 2051 2052#main-content .pricing-tier-desc { 2053 margin: 8px 0 0 0; 2054 font-size: 1rem; 2055 line-height: 1.5; 2056} 2057 2058#main-content .projects-list-title { 2059 color: var(--color-primary-dark); 2060 margin-bottom: 15px; 2061} 2062 2063#main-content .projects-list { 2064 list-style: none; 2065 padding: 0; 2066 margin: 0 0 30px 0; 2067} 2068 2069#main-content .projects-list li { 2070 padding: 10px 0; 2071 border-bottom: 1px solid var(--color-border-light); 2072 display: flex; 2073 align-items: center; 2074 gap: 12px; 2075 font-size: 1rem; 2076} 2077 2078#main-content .projects-list li:last-child { 2079 border-bottom: none; 2080} 2081 2082#main-content .project-list-bullet { 2083 color: var(--color-accent-accessible); 2084 font-weight: 700; 2085} 2086 2087#main-content .project-minimum-tier { 2088 margin-top: auto; 2089 margin-bottom: 30px; 2090} 2091 2092#main-content .work-card .btn { 2093 margin-top: auto; 2094} 2095 2096/* Why / comparison table */ 2097#main-content .why-grid { 2098 display: grid; 2099 grid-template-columns: 1fr 1fr; 2100 gap: 24px; 2101 margin-top: 40px; 2102 margin-bottom: 60px; 2103} 2104 2105#main-content .why-item { 2106 background-color: var(--color-bg-cream); 2107 border: 1px solid var(--color-border); 2108 border-radius: 8px; 2109 padding: 24px; 2110 display: flex; 2111 align-items: flex-start; 2112 gap: 16px; 2113} 2114 2115#main-content .why-icon { 2116 background-color: var(--color-accent); 2117 color: #FFFFFF; 2118 width: 32px; 2119 height: 32px; 2120 border-radius: 50%; 2121 display: flex; 2122 align-items: center; 2123 justify-content: center; 2124 flex-shrink: 0; 2125 font-size: 0.9rem; 2126} 2127 2128#main-content .why-item p { 2129 margin: 0; 2130 font-size: 1.05rem; 2131 line-height: 1.5; 2132} 2133 2134#main-content .table-container { 2135 width: 100%; 2136 margin-bottom: 0; 2137 border: 1px solid var(--color-border); 2138 border-radius: 8px; 2139 overflow: hidden; 2140} 2141 2142#main-content .table-title { 2143 background-color: var(--color-primary-dark); 2144 color: #FFFFFF; 2145 margin: 0; 2146 padding: 20px 24px; 2147 font-size: 1.35rem; 2148 text-align: left; 2149} 2150 2151#main-content .comparison-table-wrapper { 2152 width: 100%; 2153 overflow-x: auto; 2154} 2155 2156#main-content .comparison-table { 2157 width: 100%; 2158 border-collapse: separate; 2159 border-spacing: 0; 2160 text-align: left; 2161 background-color: var(--color-bg-white); 2162 min-width: 600px; 2163} 2164 2165#main-content .comparison-table th, 2166#main-content .comparison-table td { 2167 padding: 16px 24px; 2168 border-bottom: 1px solid var(--color-border-light); 2169 font-size: 1rem; 2170 vertical-align: top; 2171} 2172 2173#main-content .comparison-table thead th { 2174 background-color: var(--color-primary); 2175 color: #FFFFFF; 2176 font-weight: 700; 2177} 2178 2179#main-content .comparison-table tbody th { 2180 font-weight: 600; 2181 color: var(--color-primary-dark); 2182} 2183 2184#main-content .comparison-table .highlight-column { 2185 background-color: rgba(245, 22, 121, 0.06); 2186 font-weight: 600; 2187 color: var(--color-primary-dark); 2188 border-left: 3px solid var(--color-accent); 2189 border-right: 3px solid var(--color-accent); 2190} 2191 2192#main-content .comparison-table thead .highlight-column { 2193 border-top: 3px solid var(--color-accent); 2194} 2195 2196#main-content .comparison-table tbody tr:last-child .highlight-column { 2197 border-bottom: 3px solid var(--color-accent); 2198} 2199 2200/* Testimonials */ 2201#main-content .proof-block-container { 2202 border-top: 2px solid var(--color-border-light); 2203 padding-top: 30px; 2204} 2205 2206#main-content .proof-title { 2207 text-align: center; 2208 font-size: 1.65rem; 2209 margin-bottom: 30px; 2210} 2211 2212#main-content .testimonials-grid { 2213 display: grid; 2214 grid-template-columns: 1fr 1fr; 2215 gap: 32px; 2216} 2217 2218#main-content .testimonial-card { 2219 background-color: var(--color-bg-cream);
2220 border-top: 4px solid var(--color-primary); 2221 border-radius: 6px; 2222 padding: 35px; 2223 margin: 0; 2224 display: flex; 2225 flex-direction: column; 2226} 2227 2228#main-content .testimonial-card > img, 2229#main-content .testimonial-placeholder-img { 2230 display: block; 2231 width: 84px; 2232 height: 84px; 2233 min-width: 84px; 2234 min-height: 84px; 2235 padding: 0; 2236 border-radius: 50%; 2237 object-fit: cover; 2238 margin: 0 auto 20px auto; 2239 border: 2px solid var(--color-accent); 2240} 2241 2242#main-content .testimonial-quote { 2243 font-style: italic; 2244 font-size: 1.05rem; 2245 line-height: 1.65; 2246 margin-bottom: 20px; 2247} 2248 2249#main-content .testimonial-author { 2250 font-weight: 700; 2251 font-size: 1rem; 2252 color: var(--color-primary-dark); 2253 margin-top: auto; 2254 font-style: normal; 2255} 2256 2257/* FAQ */ 2258#main-content .faq-list { 2259 max-width: 800px; 2260 margin: 40px auto 0 auto; 2261} 2262 2263#main-content .faq-item { 2264 background-color: var(--color-bg-white); 2265 border: 1px solid var(--color-border); 2266 border-radius: 6px; 2267 margin-bottom: 16px; 2268 overflow: hidden; 2269 transition: border-color 0.2s ease; 2270} 2271 2272#main-content .faq-item[open] { 2273 border-color: var(--color-primary); 2274} 2275 2276#main-content .faq-item summary { 2277 padding: 20px 24px; 2278 font-weight: 600; 2279 font-size: 1.1rem; 2280 color: var(--color-primary-dark); 2281 cursor: pointer; 2282 list-style: none; 2283 display: flex; 2284 justify-content: space-between; 2285 align-items: center; 2286 user-select: none; 2287} 2288 2289#main-content .faq-item summary::-webkit-details-marker { 2290 display: none; 2291} 2292 2293#main-content .faq-item summary::after { 2294 content: "+"; 2295 font-size: 1.5rem; 2296 font-weight: 700; 2297 color: var(--color-primary); 2298 transition: transform 0.2s ease; 2299} 2300 2301#main-content .faq-item[open] summary::after { 2302 content: "−"; 2303 transform: rotate(180deg); 2304} 2305 2306#main-content .faq-content { 2307 padding: 0 24px 20px 24px; 2308 border-top: 1px solid var(--color-border-light); 2309} 2310 2311#main-content .faq-content p { 2312 margin: 0; 2313 font-size: 1rem; 2314 line-height: 1.6; 2315} 2316 2317/* Contact */ 2318#main-content .contact-grid { 2319 display: grid; 2320 grid-template-columns: 4fr 5fr; 2321 gap: 50px; 2322 margin-bottom: 50px; 2323} 2324 2325#main-content .contact-info { 2326 text-align: left; 2327} 2328 2329#main-content .contact-guide-box { 2330 background-color: var(--color-bg-cream); 2331 border: 1px solid var(--color-border); 2332 border-radius: 8px; 2333 padding: 30px; 2334 margin-top: 25px; 2335} 2336 2337#main-content .contact-guide-box h4 { 2338 margin-top: 0; 2339 font-size: 1.2rem; 2340 color: var(--color-primary-dark); 2341} 2342 2343#main-content .contact-checklist { 2344 list-style: none; 2345 padding: 0; 2346 margin: 0 0 20px 0; 2347} 2348 2349#main-content .contact-checklist li { 2350 position: relative; 2351 padding-left: 28px; 2352 margin-bottom: 12px; 2353 font-weight: 500; 2354 font-size: 1rem; 2355} 2356 2357#main-content .contact-checklist li::before { 2358 content: "✔"; 2359 position: absolute; 2360 left: 0; 2361 top: 0; 2362 color: var(--color-accent-accessible); 2363 font-weight: 700; 2364} 2365 2366#main-content .contact-note { 2367 margin: 0; 2368 font-size: 1rem; 2369} 2370 2371#main-content .contact-form-container { 2372 background-color: var(--color-bg-cream); 2373 border: 1px solid var(--color-border); 2374 border-radius: 8px; 2375 padding: 40px; 2376 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 2377} 2378 2379#main-content .contact-form { 2380 width: 100%; 2381} 2382 2383#main-content .form-row { 2384 display: grid; 2385 grid-template-columns: 1fr 1fr; 2386 gap: 20px; 2387} 2388 2389#main-content .form-group { 2390 margin-bottom: 24px; 2391 text-align: left; 2392} 2393 2394#main-content .form-group label { 2395 display: block; 2396 font-weight: 600; 2397 font-size: 1rem; 2398 margin-bottom: 8px; 2399 color: var(--color-primary-dark); 2400} 2401 2402#main-content .form-group input[type="text"], 2403#main-content .form-group input[type="email"], 2404#main-content .form-group textarea { 2405 width: 100%; 2406 padding: 12px 16px; 2407 border: 2px solid var(--color-border); 2408 border-radius: 4px; 2409 font-family: var(--font-primary); 2410 font-size: 1rem; 2411 line-height: 1.5; 2412 color: var(--color-text-dark); 2413 background-color: var(--color-bg-white); 2414 transition: border-color 0.2s ease, box-shadow 0.2s ease; 2415} 2416 2417#main-content .form-group input[type="text"]:focus, 2418#main-content .form-group input[type="email"]:focus, 2419#main-content .form-group textarea:focus { 2420 border-color: var(--color-primary-dark); 2421 box-shadow: 0 0 0 3px rgba(7, 36, 30, 0.18); 2422 outline: 3px solid transparent; 2423} 2424 2425#main-content .form-group input::placeholder, 2426#main-content .form-group textarea::placeholder { 2427 color: #4A4A4A; 2428 opacity: 1; 2429} 2430 2431#main-content .form-group textarea { 2432 resize: vertical; 2433 min-height: 150px; 2434} 2435 2436/* Motion */ 2437@media (prefers-reduced-motion: reduce) { 2438 #main-content *, 2439 #main-content *::before, 2440 #main-content *::after, 2441 .skip-link { 2442 animation-delay: -1ms !important; 2443 animation-duration: 1ms !important; 2444 animation-iteration-count: 1 !important; 2445 transition-duration: 0s !important; 2446 scroll-behavior: auto !important; 2447 } 2448} 2449 2450/* Responsive */ 2451@media (max-width: 900px) { 2452 #main-content .hero-grid { 2453 grid-template-columns: 1fr; 2454 text-align: center; 2455 gap: 40px; 2456 } 2457 2458 #main-content .hero-text-block { 2459 text-align: center; 2460 } 2461 2462 #main-content .byline-block { 2463 justify-content: center; 2464 text-align: left; 2465 } 2466 2467 #main-content .hero-image-block { 2468 order: -1; 2469 } 2470 2471 #main-content .hero-large-img { 2472 max-width: 320px; 2473 } 2474
2475 #main-content .work-grid, 2476 #main-content .contact-grid { 2477 grid-template-columns: 1fr; 2478 } 2479 2480 #main-content .contact-grid { 2481 gap: 40px; 2482 } 2483} 2484 2485@media (max-width: 768px) { 2486 #main-content h1 { 2487 font-size: 2.25rem; 2488 } 2489 2490 #main-content h2 { 2491 font-size: 1.875rem; 2492 } 2493 2494 #main-content h3 { 2495 font-size: 1.4rem; 2496 } 2497 2498 #main-content p.lead { 2499 font-size: 1.15rem; 2500 } 2501 2502 #main-content .why-grid, 2503 #main-content .testimonials-grid { 2504 grid-template-columns: 1fr; 2505 } 2506} 2507 2508@media (max-width: 600px) { 2509 #main-content .container { 2510 padding: 0 20px; 2511 } 2512 2513 #main-content .section-padding { 2514 padding: 70px 0; 2515 } 2516 2517 #main-content .form-row { 2518 grid-template-columns: 1fr; 2519 } 2520 2521 #main-content .contact-form-container { 2522 padding: 28px 20px; 2523 } 2524 2525 #main-content .work-card { 2526 padding: 28px 20px; 2527 } 2528 2529 #main-content .hero-large-img { 2530 max-width: 280px; 2531 } 2532} 2533 2534/* Placeholder sizing */ 2535#main-content .byline-portrait { 2536 display: block; 2537 width: 50px; 2538 height: 50px; 2539 min-height: 0; 2540 padding: 0; 2541 border: 0; 2542 border-radius: 50%; 2543 object-fit: cover; 2544} 2545 2546#main-content .hero-large-img { 2547 display: block; 2548 width: 100%; 2549 max-width: 420px; 2550 height: auto; 2551 border-radius: 12px; 2552} 2553 2554#main-content .work-card-banner-img { 2555 width: 100%; 2556 height: auto; 2557 display: block; 2558} 2559 2560#main-content .testimonial-placeholder-img { 2561 width: 84px; 2562 height: 84px; 2563 min-width: 84px; 2564 min-height: 84px; 2565 padding: 0; 2566 border-radius: 50%; 2567 margin: 0 auto 20px auto; 2568 font-size: 0.8rem; 2569} 2570 2571/* MemberVault paste cleanup */ 2572.mv-block > p:empty, 2573.mv-block > div:empty { 2574 display: none !important; 2575 height: 0 !important; 2576 min-height: 0 !important; 2577 margin: 0 !important; 2578 padding: 0 !important; 2579 border: 0 !important; 2580} 2581 2582#main-content { 2583 margin-top: 0 !important; 2584 margin-bottom: 0 !important; 2585 padding-top: 0 !important; 2586} 2587 2588#main-content .why-icon { 2589 background-color: var(--color-primary); 2590 color: #FFFFFF; 2591}</style> 2592 2593<div class="border-b mv_breadcrumbs hidden"> 2594 <div class="max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10"> 2595 <a href="/"> 2596 <i class="fas fa-home"></i> 2597 </a> 2598 <i class="fas fa-caret-right ml-2 mr-2"></i> 2599 <a class="font-semibold" href="/pages/view/14179"> 2600 About </a> 2601 </div> 2602 2603</div> 2604 2605<div class="flex flex-wrap max-w-screen-xl mx-auto lg:flex-nowrap lg:pl-6 lg:pr-6"> 2606 2607 2608 <div class="w-full flex-auto"> 2609 2610 <div class="pl-4 pr-4 mv_content lg:pl-2 lg:pr-2"> 2611 <div class="w-full relative mv-block" style=""><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> 2612<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2613<section class="hero-section" aria-label="Introduction"> 2614<div class="container hero-grid"> 2615<div class="hero-text-block"> 2616<h1>Looking for an operational partner who gets the work done? I help business owners execute their ideas.</h1> 2617<div class="byline-block"> 2618<div class="byline-portrait-container"><img src="https://s3.membervaultcdn.com/websitefae/6a9802fb2b653_Chantelle.png?v=1788347132" alt="Chantelle Venter" class="byline-portrait"></div> 2619<div class="byline-text"><span class="byline-author">By <strong>Chantelle Venter</strong></span> <span class="byline-desc">Founder & Operational Systems Partner | <a href="https://www.maddatu.com/services" class="byline-link">View services →</a></span></div> 2620</div> 2621<p class="hero-subheading">I am Chantelle, the person behind <strong><em>maddatu</em></strong>. I take care of the practical work that keeps your business moving.</p> 2622<div class="answer-block"> 2623<p><strong><em>maddatu</em></strong> provides practical operational support for established small businesses. I handle the digital content, administration and day-to-day tasks that sit between your ideas and finished results—including website updates, course publishing, email campaigns, onboarding, and routine maintenance using your existing tools.</p> 2624</div> 2625<div class="hero-cta"><a href="https://www.maddatu.com/contact" class="btn btn-outline">Work with me</a></div> 2626</div> 2627<div class="hero-image-block"><img src="https://s3.membervaultcdn.com/websitefae/6a9802e18e778_MV%20-%20WF%20-%20Icons%20and%20photos%20(13).png?v=1788347106" alt="Chantelle Venter" class="hero-large-img"></div> 2628</div> 2629</section> 2630</div></body></html> 2631</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> 2632<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2633<section class="section-padding bg-cream" aria-labelledby="problem-heading"> 2634<div class="container text-center"> 2635<h2 id="problem-heading">Why do established business owners struggle to finish the jobs between an idea and a result?</h2> 2636<p class="lead">The difficulty isn't that these tasks are too complex. The problem is that they still take time, attention and follow-through that busy business owners simply do not have.</p> 2637<div class="problem-grid"> 2638<div class="problem-card"><span class="problem-bullet" aria-hidden="true">✔</span> 2639<p class="problem-text">Preparing and configuring email sequences</p> 2640</div> 2641<div class="problem-card"><span class="problem-bullet" aria-hidden="true">✔</span> 2642<p class="problem-text">Organising online events and speaker assets</p> 2643</div> 2644<div class="problem-card"><span class="problem-bullet" aria-hidden="true">✔</span> 2645<p class="problem-text">Onboarding a new client cohort</p> 2646</div> 2647<div class="problem-card"><span class="problem-bullet" aria-hidden="true">✔</span> 2648<p class="problem-text">Taking care of a list of tasks that keeps growing</p> 2649</div> 2650<div class="problem-card"><span class="problem-bullet" aria-hidden="true">✔</span> 2651<p class="problem-text">Publishing and formatting online courses</p> 2652</div> 2653<div class="problem-card"><span class="problem-bullet" aria-hidden="true">✔</span> 2654<p class="problem-text">Updating website copy and text</p> 2655</div> 2656</div> 2657<div class="problem-outro"> 2658<p>The common thread is not one particular platform or service. It is making sure the work gets done properly and on time.</p> 2659<a href="https://www.maddatu.com/contact" class="btn btn-secondary">That is where I come in</a></div> 2660</div> 2661</section> 2662</div></body></html> 2663</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> 2664<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2665<section class="section-padding bg-white" aria-labelledby="solution-
2665heading"> 2666<div class="container text-center max-width-800"> 2667<h2 id="solution-heading">How can we bridge the gap between your ideas and finished results?</h2> 2668<p class="lead">I work within your existing business, understand how you currently operate, and take responsibility for the practical work you hand over to me.</p> 2669<div class="why-grid" style="margin-bottom: 0;"> 2670<div class="why-item"> 2671<div class="why-icon" aria-hidden="true">1</div> 2672<p style="text-align: left;"><strong>I work best when things are varied.</strong> I am comfortable moving between different types of work and learning the tools a client already uses.</p> 2673</div> 2674<div class="why-item"> 2675<div class="why-icon" aria-hidden="true">2</div> 2676<p style="text-align: left;"><strong>I do not expect every business to work the same way.</strong> I do not believe you need to rebuild your entire setup just to get support.</p> 2677</div> 2678</div> 2679</div> 2680</section> 2681</div></body></html> 2682</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> 2683<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2684<section class="section-padding bg-cream" aria-labelledby="comparison-heading"> 2685<div class="container"> 2686<div class="text-center max-width-800"> 2687<h2 id="comparison-heading">How does <strong><em>maddatu</em></strong> operational support differ from a general virtual assistant?</h2> 2688<p class="lead">Many business owners hire a virtual assistant, but find themselves spending more time managing the person than getting tasks done. Here is the distinction:</p> 2689</div> 2690<div class="table-container"> 2691<h3 class="table-title">Our Working Relationship & Delivery Boundaries</h3> 2692<table class="comparison-table" aria-label="Comparison between General Virtual Assistant and maddatu Operational Partner"> 2693<thead> 2694<tr> 2695<th scope="col">Operational Dimension</th> 2696<th scope="col">General Virtual Assistant</th> 2697<th scope="col" class="highlight-column"><strong><em>maddatu</em></strong> Operational Partner</th> 2698</tr> 2699</thead> 2700<tbody> 2701<tr> 2702<th scope="row">Task Complexity & Variety</th> 2703<td>Focused on highly repetitive, single-platform admin tasks.</td> 2704<td class="highlight-column">Capable of moving between websites, courses, email campaigns, onboarding, and admin.</td> 2705</tr> 2706<tr> 2707<th scope="row">Supervision & Direction</th> 2708<td>Requires detailed, step-by-step instructions and constant checks.</td> 2709<td class="highlight-column">Works independently from high-level goals without needing constant supervision.</td> 2710</tr> 2711<tr> 2712<th scope="row">System Requirements</th> 2713<td>Often expects pre-packaged, rigid processes to follow.</td> 2714<td class="highlight-column">Respects and works within your existing business systems and tools without forcing a rebuild.</td> 2715</tr> 2716<tr> 2717<th scope="row">Core Philosophy</th> 2718<td>Ticking off a checklist of administrative minutes.</td> 2719<td class="highlight-column">Cares about getting the work finished properly and on time.</td> 2720</tr> 2721</tbody> 2722</table> 2723</div> 2724<div class="problem-outro" style="background-color: var(--color-bg-white);"> 2725<p><strong>A note about how I work:</strong> I am not a general inbox assistant waiting for a list of repetitive tasks. I work alongside established business owners who need someone capable of handling varied operational work without needing constant supervision.</p> 2726</div> 2727</div> 2728</section> 2729</div></body></html> 2730</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> 2731<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2732<section class="section-padding bg-white" aria-labelledby="expectations-heading"> 2733<div class="container"> 2734<div class="text-center max-width-800"> 2735<h2 id="expectations-heading">What can you expect when partnering with <strong><em>maddatu</em></strong>?</h2> 2736<p class="lead">I establish predictable structures, clear communication lines, and calm follow-through in all client relationships.</p> 2737</div> 2738<div class="why-grid"> 2739<div class="why-item"> 2740<div class="why-icon" aria-hidden="true">✔</div> 2741<div> 2742<h4 style="margin: 0 0 4px 0;">Clear communication</h4> 2743<p>You will always remain informed about task statuses, capacity limits, and inputs needed from you.</p> 2744</div> 2745</div> 2746<div class="why-item"> 2747<div class="why-icon" aria-hidden="true">✔</div> 2748<div> 2749<h4 style="margin: 0 0 4px 0;">Reliable follow-through</h4> 2750<p>No loose ends. Once a task is in my queue, it is carried through to completion without you having to chase me.</p> 2751</div> 2752</div> 2753<div class="why-item"> 2754<div class="why-icon" aria-hidden="true">✔</div> 2755<div> 2756<h4 style="margin: 0 0 4px 0;">Practical problem solving</h4> 2757<p>I focus on finding the cleanest, most practical path to move from an idea to a polished result.</p> 2758</div> 2759</div> 2760<div class="why-item"> 2761<div class="why-icon" aria-hidden="true">✔</div> 2762<div> 2763<h4 style="margin: 0 0 4px 0;">Attention to detail</h4> 2764<p>Meticulous review of text copies, links, automated email configurations, and platform settings before publishing.</p> 2765</div> 2766</div> 2767<div class="why-item"> 2768<div class="why-icon" aria-hidden="true">✔</div> 2769<div> 2770<h4 style="margin: 0 0 4px 0;">Respect for the way you already work</h4> 2771<p>I operate within your current systems, adapting to your workflows rather than requiring you to rebuild everything.</p> 2772</div> 2773</div> 2774<div class="why-item"> 2775<div class="why-icon" aria-hidden="true">✔</div> 2776<div> 2777<h4 style="margin: 0 0 4px 0;">A willingness to suggest a better approach</h4> 2778<p>I follow your instructions, but if I see a practical improvement that will genuinely help your business, I will raise it for discussion.</p> 2779</div> 2780</div> 2781</div> 2782</div> 2783</section> 2784</div></body></html> 2785</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> 2786<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2787<section class="section-padding bg-cream" aria-labelledby="faq-heading"> 2788<div class="container"> 2789<div class="text-center max-width-800"> 2790<h2 id="faq-heading">Frequently Asked Questions about our Operational Support</h2> 2791<p class="lead">Direct, plain-English answers to clarify how we work behind the scenes.</p> 2792</div> 2793<div class="faq-list"><details class="faq-item"> 2794<summary>Do I need to rebuild my systems to work with you?</summary> 2795<div class="faq-content"> 2796<p>
2796No. I do not believe you need to rebuild your entire setup just to get support. I work within the systems and processes you already have in your business where practical, learning the tools you already use.</p> 2797</div> 2798</details><details class="faq-item"> 2799<summary>What is the common thread of your work?</summary> 2800<div class="faq-content"> 2801<p>The common thread is not one particular platform or service. It is making sure the work gets done properly, on time, and with reliable follow-through.</p> 2802</div> 2803</details><details class="faq-item"> 2804<summary>Do you work as a general virtual assistant?</summary> 2805<div class="faq-content"> 2806<p>No. I am not a general inbox assistant waiting for a list of repetitive tasks. I work alongside established small business owners who need someone highly capable of handling varied operational tasks, content publishing, and platform administration without needing constant supervision.</p> 2807</div> 2808</details><details class="faq-item"> 2809<summary>What types of tasks can you move between?</summary> 2810<div class="faq-content"> 2811<p>I work across website updates, course publishing, email sequence configurations, onboarding administration, document organization, forms, events, and other administrative tasks that sit between your ideas and final results.</p> 2812</div> 2813</details></div> 2814</div> 2815</section> 2816</div></body></html> 2817</div></div> </div> 2818 2819 2820 2821 </div> 2822 2823 2824</div> 2825</div> 2826<footer id="mv_footer" class="mv_footer border-t pb-10 text-sm "> 2827 2828 <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 "> 2829 2830 <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"> 2831 <h3 class="font-semibold mb-1">About</h3> 2832 <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. 2833 2834Website Fae Pty Ltd trading as Maddatu</p> 2835 </div> 2836 2837 <div class="relative w-full lg:w-1/3 flex-none p-4 text-center border-b lg:border-b-0"> 2838 <div class="inline-block text-center lg:text-left relative"> 2839 <h3 class="font-semibold mb-1">Links</h3> 2840 <div class="w-full "> 2841 <a class="mb-1" href="https://maddatu.com/terms" target="_BLANK"> 2842 Terms and Conditions </a><br> 2843 <a class="mb-1" href="https://maddatu.com/privacy" target="_BLANK"> 2844 Privacy Policy </a><br> 2845 <a class="mb-1" href="https://maddatu.com/disclaimer" target="_BLANK"> 2846 Disclaimer </a><br> 2847 <a class="mb-1" href="https://maddatu.com/accessibility-statement" target="_BLANK"> 2848 Accessibility Statement </a><br> 2849 </div> 2850 </div> 2851 </div> 2852 2853 2854 2855 <div class="w-full lg:w-1/3 flex-none p-4 text-center "> 2856 <div class="inline-block text-center lg:text-left"> 2857 <h3 class="font-semibold mb-1">Social</h3> 2858 <div class="w-full"> 2859 2860 <a class="mb-1 flex" href="https://facebook.com/maddatu.sa" target="_BLANK"> 2861 <i class="fab fa-facebook-square inline-block my-auto mr-1"></i> Facebook 2862 </a> 2863 <a class="mb-1 flex" href="https://instagram.com/maddatu.sa" target="_BLANK"> 2864 <i class="fab fa-instagram inline-block my-auto mr-1"></i> Instagram 2865 </a> 2866 2867 2868 2869 2870 2871 2872 </div> 2873 </div> 2874 </div> 2875 2876 2877 </div> 2878 2879 <div class="w-full max-w-screen-xl p-4 mx-auto text-xs font-light"> 2880 <div class="w-full flex flex-wrap pt-2"> 2881 <div class="flex-none w-full text-center mt-2 lg:w-1/2 lg:text-left"> 2882 © 2026 - maddatu </div> 2883 <div class="flex-none flex w-full pt-2 lg:w-1/2 lg:flex-row-reverse"> 2884 <a href="https://membervault.co" class="flex-none mx-auto lg:mx-px flex hidden" target="_BLANK"> 2885 <img class="my-auto w-6 h-6 mr-2 mv_footer_logo" src="/fe/images/fav/favicon-32x32.png" loading="lazy"> 2886 <span class="my-auto">Powered By MemberVault</span> 2887 </a> 2888 </div> 2889 </div> 2890 </div> 2891 2892</footer> 2893 2894 2895 2896 2897 2898<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%"> 2899 2900 <a href="javascript:toggleMainNav()" class="mv_close_button mt-2 mr-2"> 2901 <i class="fas fa-times"></i> 2902 </a> 2903 2904 <div class="w-full p-4 border-b"> 2905 2906 <form class="mv_search_container" method="get" action="/products"> 2907 <a href="javascript:toggleTextSizeMobile()" class="mv_text_button mr-2"> 2908 <i class="fas fa-text-height"></i> 2909 </a> 2910 2911 <i class="fas fa-search mr-1"></i> 2912 <input name="search" class="mv_search_box rounded pl-2 text-gray-800 w-32 opacity-50" type="text" placeholder="Search..." value=""> 2913 <input type="submit" value="search" class="hidden mv_search_button rounded bg-gray-800 text-white opacity-50 pl-1 pr-1"> 2914 </form> 2915 2916 2917 2918 </div> 2919 2920 <div class="flex text-center mt-4"> 2921 <div class="flex-none w-full pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold"> 2922 Menu 2923 </div> 2924 </div> 2925 2926 <ul class="w-full font-semibold"> 2927 <li class="w-full border-b"> 2928 <a href="/home" class="flex p-4"> 2929 <span class="flex-none w-11/12 my-auto"> 2930 Home </span> 2931 <span class="flex-none w-1/12 my-auto text-right"> 2932 <i class="fas fa-angle-right"></i> 2933 </span> 2934 </a> 2935 </li> 2936 <li class="w-full border-b"> 2937 <a href="/about" class="flex p-4"> 2938 <span class="flex-none w-11/12 my-auto"> 2939 About </span> 2940 <span class="flex-none w-1/12 my-auto text-right"> 2941 <i class="fas fa-angle-right"></i> 2942 </span> 2943 </a> 2944 </li> 2945 <li class="w-full border-b"> 2946 <a href="/services" class="flex p-4"> 2947 <span class="flex-none w-11/12 my-auto"> 2948 Services </span> 2949 <span class="flex-none w-1/12 my-auto text-right"> 2950 <i class="fas fa-angle-right"></i> 2951 </span> 2952 </a> 2953 </li> 2954 <li class="w-full border-b"> 2955 <a href="/contact" class="flex p-4"> 2956 <span class="flex-none w-11/12 my-auto"> 2957 Contact </span> 2958 <span class="flex-none w-1/12 my-auto text-right"> 2959 <i class="fas fa-angle-right"></i> 2960 </span> 2961 </a> 2962 </li> 2963 <li class="w-full border-b"> 2964 <a href="/blog" class="flex p-4"> 2965 <span class="flex-none w-11/12 my-auto"> 2966 Blog </span> 2967 <span class="flex-none w-1/12 my-auto text-right"> 2968 <i class="fas fa-angle-right"></i> 2969 </span> 2970 </a> 2971 </li> 2972 </ul> 2973 2974 <div class="flex text-center"> 2975 <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')"> 2976 My Services </a> 2977 <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')"> 2978 Available Services </a> 2979 </div> 2980 2981
2982 <ul id="mv_main_nav_available_content" class="w-full font-semibold "> 2983 <li class="w-full border-b"> 2984 <a href="/products/courses/view/1193365" class="flex p-4"> 2985 <span class="flex-none w-11/12 my-auto"> 2986 maddatu Ongoing Support </span> 2987 <span class="flex-none w-1/12 my-auto text-right"> 2988 <i class="fas fa-angle-right"></i> 2989 </span> 2990 </a> 2991 </li> 2992 </ul> 2993 2994 <ul id="mv_main_nav_my_content" class="w-full font-semibold hidden"> 2995 <li class="w-full border-b"> 2996 <a href="/login/?goto=/about" class="flex p-4"> 2997 Sign In to see your services </a> 2998 </li> 2999 </ul> 3000 3001 3002 3003</div> 3004 3005 3006 3007 3008<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%"> 3009 <a href="javascript:toggleLogin()" class="mv_close_button"> 3010 <i class="fas fa-times"></i> 3011 </a> 3012 3013 <div class="w-full bg-gray-200 p-4 text-center"> 3014 <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md"> 3015 <i class="fas fa-sign-in-alt text-white text-lg"></i> 3016 </div> 3017 3018 <div class="w-full mt-2 font-semibold"> 3019 Sign In </div> 3020 </div> 3021 3022 <div id="login_before" class="w-full p-4 pb-0 text-sm"> 3023 3024 <h3 class="w-full font-semibold">Sign In Details</h3> 3025 3026 <div class="flex flex-wrap mt-2"> 3027 <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=""> 3028 </div> 3029 <div class="flex flex-wrap mt-2"> 3030 <input class="flex-none w-full border p-2 rounded" type="password" id="loginform_password" name="email" placeholder="Password" autocomplete="off" value=""> 3031 </div> 3032 3033 <div class="w-full relative text-red-700 font-bold hidden" id="loginform_error"> 3034 </div> 3035 3036 <div class="w-full relative"> 3037 <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"> 3038 Sign In </a> 3039 </div> 3040 3041 </div> 3042 3043 <div class="w-full flex p-4 pt-0 text-sm italic mt-4"> 3044 <div class="flex-none w-1/2"> 3045 </div> 3046 <div class="flex-none w-1/2 text-right"> 3047 <a class="" href="javascript:void(0)" onclick="toggleLoginForgot()">forgot password?</a> 3048 </div> 3049 </div> 3050 3051 <div id="login_forgot" class="w-full p-4 pb-0 text-sm hidden"> 3052 3053 <h3 class="w-full font-semibold">Forgot Password?</h3> 3054 <p class="font-light">Enter your email address and we will send you a link to reset your password.</p> 3055 3056 <div class="flex flex-wrap mt-2"> 3057 <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=""> 3058 </div> 3059 3060 <div class="w-full relative text-red-700 font-bold hidden" id="loginforgot_error"> 3061 </div> 3062 3063 <div class="w-full relative"> 3064 <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"> 3065 Reset Password 3066 </a> 3067 </div> 3068 3069 </div> 3070 3071 <div class="loading"></div> 3072</div> 3073 3074 3075<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%"> 3076 <a href="javascript:toggleForgot()" class="mv_close_button"> 3077 <i class="fas fa-times"></i> 3078 </a> 3079 3080 <div class="w-full bg-gray-200 p-4 text-center"> 3081 <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md"> 3082 <i class="fas fa-question text-white text-lg"></i> 3083 </div> 3084 3085 <div class="w-full mt-2 font-semibold"> 3086 Forgot Password 3087 </div> 3088 </div> 3089 3090 <div id="reset_before" class="w-full p-4 pb-0 text-sm hidden"> 3091 3092 <h3 class="w-full font-semibold">Create New Password for </h3> 3093 3094 <div class="flex flex-wrap mt-2"> 3095 <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password" name="password" placeholder="Password" autocomplete="off" value=""> 3096 </div> 3097 <div class="flex flex-wrap mt-2"> 3098 <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password2" name="password2" placeholder="Re-Type Password" autocomplete="off" value=""> 3099 </div> 3100 3101 <div class="w-full relative"> 3102 <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"> 3103 Reset Password 3104 </a> 3105 </div> 3106 </div> 3107 3108 <div class="w-full p-4 relative text-red-700 font-bold hidden" id="reset_error"></div> 3109 3110 3111 <div class="loading"></div> 3112</div> 3113
3114<script> 3115 function submitLoginForm() { 3116 var email = $('#loginform_email').val(); 3117 var password = $('#loginform_password').val(); 3118 3119 $('.loading').show(); 3120 $.ajax({ 3121 method: "POST", 3122 url: '/login/ajax_login', 3123 data: { 3124 username: email, 3125 password: password, 3126 goto: '/about' 3127 } 3128 }) 3129 .done(function(msg) { 3130 var response = JSON.parse(msg); 3131 3132 if (response.goto) { 3133 window.location = response.goto; 3134 } else { 3135 $('.loading').hide(); 3136 $('#loginform_error').show().html(response.message); 3137 } 3138 }); 3139 } 3140 3141 function toggleLoginForgot() { 3142 if ($('#login_forgot').css('display') == 'none') { 3143 $('#login_forgot').show(); 3144 $('#login_before').addClass('opacity-25'); 3145 } else { 3146 $('#login_forgot').hide(); 3147 $('#login_before').removeClass('opacity-25'); 3148 } 3149 } 3150 3151 function submitLoginForgot() { 3152 var email = $('#loginforgot_email').val(); 3153 3154 $('.loading').show(); 3155 $.ajax({ 3156 method: "POST", 3157 url: '/login/ajax_forgot', 3158 data: { 3159 username: email, 3160 } 3161 }) 3162 .done(function(msg) { 3163 var response = JSON.parse(msg); 3164 3165 $('.loading').hide(); 3166 if (response.status == 'success') { 3167 $('#loginforgot_error').removeClass('text-red-700').addClass('text-green-700'); 3168 $('#login_forgot_button').hide(); 3169 } 3170 $('#loginforgot_error').show().html(response.message); 3171 }); 3172 3173 } 3174 3175 function submitResetForm() { 3176 var password = $('#resetform_password').val(); 3177 var password2 = $('#resetform_password2').val(); 3178 3179 if (password != password2) { 3180 $('#reset_error').show().html('Passwords Don\'t Match!'); 3181 return false; 3182 } 3183 if (password == '') { 3184 $('#reset_error').show().html('Password can\'t be blank!'); 3185 return false; 3186 } 3187 3188 $('.loading').show(); 3189 3190 $.ajax({ 3191 method: "POST", 3192 url: '/login/ajax_do_reset', 3193 data: { 3194 user: '', 3195 password: password, 3196 hash: '' 3197 } 3198 }) 3199 .done(function(msg) { 3200 var response = JSON.parse(msg); 3201 3202 $('.loading').hide(); 3203 3204 $('#reset_before').hide(); 3205 if (response.status == 'success') { 3206 $('#reset_error').removeClass('text-red-700').addClass('text-green-700'); 3207 } 3208 $('#reset_error').show().html(response.message); 3209 }); 3210 } 3211 3212 $(".js_clean_email").keyup(function() { 3213 $(this).val(cleanEmail($(this).val())); 3214 }); 3215</script>
3215 3216 3217 3218 3219 3220<div id="mv_cover" class="hidden fixed left-0 top-0 w-full h-full bg-black opacity-75 z-10"> </div> 3221
3222<script src="/fe/js/app.js?ver=2.43"></script>
vendor: 1 bytes, line 3222
3222
3223<script src="/fe/js/sweetalert2.all.min.js?ver=2.43"></script>
vendor: 1 bytes, line 3223
3223
3224<script> 3225 // global variables 3226 const confetti = document.getElementById('confetti'); 3227 const confettiCtx = confetti.getContext('2d'); 3228 let container, confettiElements = []; 3229 3230 // helper 3231 rand = (min, max) => Math.random() * (max - min) + min; 3232 3233 // params to play with 3234 const confettiParams = { 3235 // number of confetti per "explosion" 3236 number: 200, 3237 // min and max size for each rectangle 3238 size: { 3239 x: [5, 20], 3240 y: [10, 18] 3241 }, 3242 // power of explosion 3243 initSpeed: 50, 3244 // defines how fast particles go down after blast-off 3245 gravity: 0.65, 3246 // how wide is explosion 3247 drag: 0.08, 3248 // how slow particles are falling 3249 terminalVelocity: 20, 3250 // how fast particles are rotating around themselves 3251 flipSpeed: 0.017, 3252 }; 3253 const colors = [{ 3254 front: '#FFFFFF', 3255 back: '#FFFFFF' 3256 }, 3257 { 3258 front: '#0F3D32', 3259 back: '#0F3D32' 3260 }, 3261 { 3262 front: '#FFFFFF', 3263 back: '#FFFFFF' 3264 }, 3265 { 3266 front: '#0F3D32', 3267 back: '#0F3D32' 3268 }, 3269 { 3270 front: '#F51679', 3271 back: '#F51679' 3272 }, 3273 { 3274 front: '#FFFFFF', 3275 back: '#FFFFFF' 3276 }, 3277 ]; 3278 3279 // ----------------------------------------------------------- 3280 3281 setupCanvas(); 3282 /* 3283 addConfetti({ 3284 clientX: container.w * 0.5, 3285 clientY: container.h * 0.5 3286 }); 3287 */ 3288 updateConfetti(); 3289 3290 //window.addEventListener('click', addConfetti); 3291 window.addEventListener('resize', () => { 3292 setupCanvas(); 3293 hideConfetti(); 3294 }); 3295 3296 // ----------------------------------------------------------- 3297 3298 // Confetti constructor 3299 function Conf() { 3300 this.randomModifier = rand(-1, 1); 3301 this.colorPair = colors[Math.floor(rand(0, colors.length))]; 3302 this.dimensions = { 3303 x: rand(confettiParams.size.x[0], confettiParams.size.x[1]), 3304 y: rand(confettiParams.size.y[0], confettiParams.size.y[1]), 3305 }; 3306 this.position = { 3307 x: clickPosition[0], 3308 y: clickPosition[1] 3309 }; 3310 this.rotation = rand(0, 2 * Math.PI); 3311 this.scale = { 3312 x: 1, 3313 y: 1 3314 }; 3315 this.velocity = { 3316 x: rand(-confettiParams.initSpeed, confettiParams.initSpeed) * 0.4, 3317 y: rand(-confettiParams.initSpeed, confettiParams.initSpeed) 3318 }; 3319 this.flipSpeed = rand(0.2, 1.5) * confettiParams.flipSpeed; 3320 3321 if (this.position.y <= container.h) { 3322 this.velocity.y = -Math.abs(this.velocity.y); 3323 } 3324 3325 this.terminalVelocity = rand(1, 1.5) * confettiParams.terminalVelocity; 3326 3327 this.update = function() { 3328 this.velocity.x *= 0.98; 3329 this.position.x += this.velocity.x; 3330 3331 this.velocity.y += (this.randomModifier * confettiParams.drag); 3332 this.velocity.y += confettiParams.gravity; 3333 this.velocity.y = Math.min(this.velocity.y, this.terminalVelocity); 3334 this.position.y += this.velocity.y; 3335 3336 this.scale.y = Math.cos((this.position.y + this.randomModifier) * this.flipSpeed); 3337 this.color = this.scale.y > 0 ? this.colorPair.front : this.colorPair.back; 3338 } 3339 } 3340 3341 function updateConfetti() { 3342 confettiCtx.clearRect(0, 0, container.w, container.h); 3343 3344 confettiElements.forEach((c) => { 3345 c.update(); 3346 confettiCtx.translate(c.position.x, c.position.y); 3347 confettiCtx.rotate(c.rotation); 3348 const width = (c.dimensions.x * c.scale.x); 3349 const height = (c.dimensions.y * c.scale.y); 3350 confettiCtx.fillStyle = c.color; 3351 confettiCtx.fillRect(-0.5 * width, -0.5 * height, width, height); 3352 confettiCtx.setTransform(1, 0, 0, 1, 0, 0) 3353 }); 3354 3355 confettiElements.forEach((c, idx) => { 3356 if (c.position.y > container.h || 3357 c.position.x < -0.5 * container.x || 3358 c.position.x > 1.5 * container.x) { 3359 confettiElements.splice(idx, 1) 3360 } 3361 }); 3362 window.requestAnimationFrame(updateConfetti); 3363 } 3364 3365 function setupCanvas() { 3366 container = { 3367 w: window.innerWidth, 3368 h: window.innerHeight 3369 }; 3370 confetti.width = container.w; 3371 confetti.height = container.h; 3372 3373 //console.log(container); 3374 } 3375 3376 function addConfetti(e) { 3377 //var centerX = window.innerWidth / 2; 3378 //var centerY = window.innerHeight / 2; 3379 3380 var centerX = window.innerWidth; 3381 var centerY = window.innerHeight; 3382 3383 //clickPosition = [ e.clientX, e.clientY ]; 3384 clickPosition = [centerX, centerY]; 3385 for (let i = 0; i < confettiParams.number; i++) { 3386 confettiElements.push(new Conf()) 3387 } 3388 } 3389 3390 function hideConfetti() { 3391 confettiElements = []; 3392 window.cancelAnimationFrame(updateConfetti) 3393 } 3394</script>
3394 3395 3396 3397</body> 3398 3399</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.