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>Home</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/" /> 36 <meta property="og:type" content="product" /> 37 <meta property="og:title" content="Home" /> 38 <meta property="og:description" content=" 39 40 41 42Looking for operational support you can rely on? maddatu keeps your business moving. 43 44 45By Chantelle Venter 6+ Years Supporting Established Businesses | ..." /> 46 <meta name="description" content=" 47 48 49 50Looking for operational support you can rely on? maddatu keeps your business moving. 51 52 53By Chantelle Venter 6+ Years Supporting Established Businesses | ..." /> 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_14178" 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 "> 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 1465 <div id="mv_welcome_area" class="block w-full bg-gray-800 text-white content-center shadow-lg " style="background-color:#FFFFFF; color:#0F3D32;"> 1466 <div class="flex flex-wrap w-full max-w-screen-xl mx-auto pb-4 lg:pl-6 lg:pr-6"> 1467 1468 1469 <div class="flex-none p-4 w-full text-center lg:text-left lg:w-1/2 lg:pl-10 "> 1470 <h1 class="text-3xl font-bold mt-2"> 1471 </h1> 1472 1473 <img class="inline-block rounded-lg shadow-lg mt-4 lg:hidden" src="https://s3.membervaultcdn.com/websitefae/MV - WF - Icons and photos (11).png?v=1750350962" alt="" loading="lazy"> 1474 1475 <div class="mt-4 text-center lg:text-left mv_content "> 1476 <h1 dir="ltr"></h1> 1477<p></p> 1478<p></p> 1479<p></p> 1480<h1 dir="ltr">Strategic Systems Architecture for the Established Practice</h1> 1481<p></p> 1482<p dir="ltr">We provide the structural design and digital infrastructure needed to maintain operational calm while you scale your clinical impact.</p> 1483 <div class="float-left w-full lg:-ml-2"> 1484 1485 <a href="https://calendar.app.google/UFEv9YV7N4UbRnBWA" target="_BLANK" class="mv_secondary_button mv_custom_second_button mr-2 ml-2 mb-4" style="color: #F51679 ; background-color: #FFFFFF; border-color: #F51679;"> 1486 Book a Call With Chantelle </a> 1487 </div> 1488 1489 1490 </div> 1491 </div> 1492 1493 <div class="flex-none w-1/2 mt-4 p-4 pr-10 hidden lg:inline-block"> 1494 <img class="rounded-lg shadow-lg" src="https://s3.membervaultcdn.com/websitefae/MV - WF - Icons and photos (11).png?v=1750350962" loading="lazy" alt=""> 1495 </div> 1496 </div> 1497 </div> <!-- End Welcome --> 1498 1499<style> 1500 /* 1501 MADDATU HOMEPAGE CONTENT STYLES 1502 Page-content CSS only. 1503 1504 IMPORTANT: 1505 - Existing Maddatu HTML classes are preserved. 1506 - MemberVault header and footer are intentionally NOT styled here. 1507 - No global html/body/header/footer rules are used so MemberVault's site chrome remains unchanged. 1508 - Quicksand is used only inside #main-content. 1509 - Colour choices prioritise WCAG 2.2 AA and AAA where practical.
1510*/ 1511 1512@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap'); 1513 1514#main-content { 1515 --color-primary: #0f3d32; 1516 --color-primary-dark: #07241E; 1517 --color-accent: #f51679; 1518 --color-accent-accessible: #f51679; 1519 --color-bg-cream: #faf7f4; 1520 --color-bg-white: #FFFFFF; 1521 --color-text-dark: #333333; 1522 --color-text-light: #faf7f4; 1523 --color-border: #9E9E9E; 1524 --color-border-light: #E5E5EE; 1525 --color-focus-dark: #07241E; 1526 --color-focus-light: #FFFFFF; 1527 --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 1528 1529 font-family: var(--font-primary); 1530 font-size: 100%; 1531 line-height: 1.625; 1532 color: var(--color-text-dark); 1533 background: var(--color-bg-white); 1534 margin: 0 !important; 1535 padding: 0 !important; 1536} 1537 1538#main-content, 1539#main-content *, 1540#main-content *::before, 1541#main-content *::after { 1542 box-sizing: border-box; 1543} 1544 1545#main-content img { 1546 max-width: 100%; 1547} 1548 1549#main-content .image-placeholder { 1550 display: flex; 1551 align-items: center; 1552 justify-content: center; 1553 width: 100%; 1554 min-height: 180px; 1555 padding: 20px; 1556 background-color: var(--color-bg-cream); 1557 color: var(--color-primary); 1558 border: 2px solid var(--color-accent); 1559 font-size: 1rem; 1560 font-weight: 700; 1561 text-align: center; 1562} 1563 1564#main-content a { 1565 color: var(--color-accent-accessible); 1566} 1567 1568#main-content :focus-visible, 1569.skip-link:focus-visible { 1570 outline: 3px solid var(--color-focus-light); 1571 outline-offset: 4px; 1572 box-shadow: 0 0 0 6px var(--color-focus-dark); 1573} 1574 1575.skip-link { 1576 position: absolute; 1577 left: -9999px; 1578 top: 8px; 1579 z-index: 10000; 1580 width: auto; 1581 height: auto; 1582 padding: 12px 24px; 1583 background: var(--color-accent-accessible); 1584 color: #FFFFFF !important; 1585 border-radius: 6px; 1586 font-family: var(--font-primary); 1587 font-size: 1rem; 1588 font-weight: 700; 1589 text-decoration: none; 1590} 1591 1592.skip-link:focus-visible { 1593 left: 8px; 1594 top: 8px; 1595 outline-color: #FFFFFF; 1596 box-shadow: 0 0 0 6px var(--color-primary-dark); 1597} 1598 1599/* Layout */ 1600#main-content .container { 1601 width: 100%; 1602 max-width: 1200px; 1603 margin: 0 auto; 1604 padding: 0 24px; 1605} 1606 1607#main-content .section-padding { 1608 padding: 90px 0; 1609} 1610 1611#main-content .bg-cream { 1612 background-color: var(--color-bg-cream); 1613} 1614 1615#main-content .bg-white { 1616 background-color: var(--color-bg-white); 1617} 1618 1619#main-content .text-center { 1620 text-align: center; 1621} 1622 1623#main-content .max-width-800 { 1624 max-width: 800px; 1625 margin-right: auto; 1626 margin-left: auto; 1627} 1628 1629/* Typography */ 1630#main-content h1, 1631#main-content h2, 1632#main-content h3, 1633#main-content h4 { 1634 font-family: var(--font-primary); 1635 color: var(--color-primary); 1636 line-height: 1.2; 1637 margin-top: 0; 1638} 1639 1640#main-content h1 { 1641 font-size: 3rem; 1642 letter-spacing: -0.02em; 1643 margin-bottom: 24px; 1644 font-weight: 700; 1645} 1646 1647#main-content h2 { 1648 font-size: 2.25rem; 1649 margin-bottom: 24px; 1650 font-weight: 700; 1651} 1652 1653#main-content h1, 1654#main-content h3 { 1655 color: var(--color-primary); 1656} 1657 1658#main-content h2, 1659#main-content h4 { 1660 color: var(--color-accent); 1661} 1662 1663#main-content h3 { 1664 font-size: 1.625rem; 1665 margin-bottom: 16px; 1666 font-weight: 600; 1667} 1668 1669#main-content h4 { 1670 font-size: 1.25rem; 1671 margin-bottom: 12px; 1672 font-weight: 600; 1673} 1674 1675#main-content p { 1676 margin-top: 0; 1677 margin-bottom: 24px; 1678} 1679 1680#main-content em { 1681 font-style: italic; 1682} 1683 1684#main-content p.lead { 1685 font-size: 1.25rem; 1686 font-weight: 500; 1687 line-height: 1.6; 1688} 1689 1690/* Buttons */ 1691#main-content .btn { 1692 display: inline-flex; 1693 align-items: center; 1694 justify-content: center; 1695 min-height: 48px; 1696 font-family: var(--font-primary); 1697 font-size: 1rem; 1698 line-height: 1.2; 1699 font-weight: 700; 1700 text-decoration: none; 1701 padding: 14px 28px; 1702 border-radius: 6px; 1703 border: 2px solid transparent; 1704 cursor: pointer; 1705 transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; 1706} 1707 1708#main-content .btn-primary { 1709 background-color: var(--color-accent-accessible); 1710 color: #FFFFFF !important; 1711 border-color: var(--color-accent-accessible); 1712 box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15); 1713} 1714 1715#main-content .btn-primary:hover { 1716 background-color: var(--color-primary-dark); 1717 color: #FFFFFF !important; 1718 border-color: var(--color-primary-dark); 1719} 1720 1721#main-content .btn-secondary { 1722 background-color: var(--color-primary); 1723 color: #FFFFFF !important; 1724 border-color: var(--color-primary); 1725 box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15); 1726} 1727 1728#main-content .btn-secondary:hover { 1729 background-color: var(--color-primary-dark); 1730 color: #FFFFFF !important; 1731 border-color: var(--color-primary-dark); 1732} 1733 1734#main-content .btn-outline { 1735 background-color: #FFFFFF; 1736 color: var(--color-accent-accessible) !important; 1737 border-color: var(--color-accent-accessible); 1738} 1739 1740#main-content .btn-outline:hover { 1741 background-color: var(--color-accent-accessible); 1742 color: #FFFFFF !important; 1743 border-color: var(--color-accent-accessible); 1744} 1745 1746#main-content .btn-full { 1747 width: 100%; 1748} 1749 1750/* Hero */ 1751#main-content .hero-section { 1752 background-color: var(--color-primary-dark); 1753 color: #FFFFFF; 1754 padding: 80px 0; 1755 overflow: hidden; 1756 margin-top: 0 !important; 1757} 1758 1759#main-content .hero-section h1 { 1760 color: #ffffff; 1761} 1762 1763#main-content .hero-grid { 1764 display: grid; 1765 grid-template-columns: 1.2fr 0.8fr; 1766 gap: 60px; 1767 align-items: center; 1768} 1769 1770#main-content .hero-text-block { 1771 text-align: left; 1772} 1773 1774#main-content .byline-block { 1775 display: flex; 1776 align-items: center; 1777 gap: 16px; 1778 margin-bottom: 24px; 1779 background-color: rgba(250, 247, 244, 0.06); 1780 padding: 12px 18px; 1781 border-radius: 8px; 1782 border: 1px solid rgba(250, 247, 244, 0.45); 1783} 1784 1785#main-content .byline-portrait-container { 1786 width: 50px; 1787 height: 50px; 1788 border-radius: 50%; 1789 overflow: hidden; 1790 border: 2px solid var(--color-accent); 1791 flex-shrink: 0; 1792} 1793 1794#main-content .byline-portrait { 1795 display: block; 1796 width: 100%; 1797 height: 100%; 1798 min-height: 0; 1799 padding: 0; 1800 border: 0; 1801 border-radius: 50%; 1802 object-fit: cover; 1803} 1804 1805#main-content .byline-text { 1806 display: flex; 1807 flex-direction: column; 1808 font-size: 0.95rem; 1809} 1810 1811#main-content .byline-author, 1812#main-content .byline-desc { 1813 color: #FFFFFF; 1814} 1815 1816#main-content .byline-link { 1817 color: #FFB3CB !important; 1818 text-decoration: underline; 1819 text-decoration-thickness: 0.12em; 1820 text-underline-offset: 0.15em; 1821 font-weight: 700; 1822} 1823 1824#main-content .byline-link:hover {
1825 color: #FFFFFF !important; 1826} 1827 1828#main-content .hero-subheadline { 1829 font-size: 1.4rem; 1830 font-weight: 700; 1831 color: #FFB3CB; 1832 margin-bottom: 24px; 1833 line-height: 1.55; 1834} 1835 1836#main-content .answer-block { 1837 background-color: rgba(250, 247, 244, 0.08); 1838 border-left: 4px solid var(--color-accent); 1839 padding: 16px 20px; 1840 border-radius: 0 8px 8px 0; 1841 margin-bottom: 30px; 1842} 1843 1844#main-content .answer-block p { 1845 margin: 0; 1846 font-size: 1.05rem; 1847 line-height: 1.6; 1848 color: #FFFFFF; 1849} 1850 1851#main-content .hero-image-block { 1852 display: flex; 1853 justify-content: center; 1854 align-items: center; 1855} 1856 1857#main-content .hero-large-img { 1858 display: block; 1859 width: 100%; 1860 max-width: 420px; 1861 height: auto; 1862 border-radius: 12px; 1863 border: 4px solid var(--color-accent); 1864 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); 1865} 1866 1867/* Problem */ 1868#main-content .problem-grid { 1869 display: grid; 1870 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 1871 gap: 20px; 1872 margin: 40px 0; 1873} 1874 1875#main-content .problem-card { 1876 background-color: var(--color-bg-white); 1877 border-left: 4px solid var(--color-accent); 1878 border-radius: 4px; 1879 padding: 24px; 1880 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); 1881 display: flex; 1882 align-items: flex-start; 1883 gap: 16px; 1884 text-align: left; 1885} 1886 1887#main-content .problem-bullet { 1888 color: var(--color-accent-accessible); 1889 font-size: 1.15rem; 1890 flex-shrink: 0; 1891 font-weight: 700; 1892} 1893 1894#main-content .problem-text { 1895 margin: 0; 1896 font-weight: 500; 1897 font-size: 1.05rem; 1898} 1899 1900#main-content .problem-outro { 1901 background-color: rgba(15, 61, 50, 0.04); 1902 border: 1px dashed var(--color-primary); 1903 border-radius: 8px; 1904 padding: 30px; 1905 max-width: 700px; 1906 margin: 40px auto 0 auto; 1907} 1908 1909#main-content .problem-outro p { 1910 font-size: 1.15rem; 1911 font-weight: 600; 1912 color: var(--color-primary-dark); 1913 margin-bottom: 20px; 1914} 1915 1916/* Services */ 1917#main-content .services-subheading { 1918 text-align: center; 1919 margin-top: 50px; 1920 margin-bottom: 35px; 1921} 1922 1923#main-content .services-grid { 1924 display: grid; 1925 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 1926 gap: 24px; 1927 margin-bottom: 40px; 1928} 1929 1930#main-content .service-card { 1931 background-color: var(--color-bg-cream); 1932 border: 1px solid var(--color-border); 1933 border-radius: 8px; 1934 padding: 30px; 1935 display: flex; 1936 flex-direction: column; 1937 transition: transform 0.2s ease, box-shadow 0.2s ease; 1938} 1939 1940#main-content .service-card:hover { 1941 transform: translateY(-4px); 1942 box-shadow: 0 8px 16px rgba(15, 61, 50, 0.08); 1943} 1944 1945#main-content .service-image-container { 1946 width: 100%; 1947 height: auto; 1948 border-radius: 6px; 1949 overflow: hidden; 1950 border: 1px solid var(--color-border); 1951 margin-bottom: 20px; 1952} 1953 1954#main-content .service-card-img { 1955 width: 100%; 1956 height: auto; 1957 display: block; 1958} 1959 1960#main-content .service-title-row { 1961 display: flex; 1962 align-items: center; 1963 gap: 12px; 1964 margin-bottom: 12px; 1965} 1966 1967#main-content .service-card-icon { 1968 font-size: 1.4rem; 1969 color: var(--color-primary); 1970} 1971 1972#main-content .service-card h4 { 1973 margin: 0; 1974 font-size: 1.25rem; 1975} 1976 1977#main-content .service-card p { 1978 margin: 0; 1979 font-size: 1rem; 1980 line-height: 1.6; 1981} 1982 1983#main-content .services-notice { 1984 text-align: center; 1985 font-style: italic; 1986 font-size: 1rem; 1987 color: var(--color-text-dark); 1988 max-width: 750px; 1989 margin: 40px auto 0 auto; 1990} 1991 1992/* Pricing */ 1993#main-content .work-grid { 1994 display: grid; 1995 grid-template-columns: 1fr 1fr; 1996 gap: 32px; 1997 margin-top: 50px; 1998 align-items: stretch; 1999} 2000 2001#main-content .work-card { 2002 background-color: var(--color-bg-white); 2003 border: 1px solid var(--color-border); 2004 border-radius: 12px; 2005 padding: 40px; 2006 display: flex; 2007 flex-direction: column; 2008 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 2009} 2010 2011#main-content .work-card-banner { 2012 width: 100%; 2013 border-radius: 8px; 2014 overflow: hidden; 2015 border: 1px solid var(--color-border); 2016 margin-bottom: 24px; 2017} 2018 2019#main-content .work-card-banner-img { 2020 width: 100%; 2021 height: auto; 2022 display: block; 2023} 2024 2025#main-content .work-card h3 { 2026 font-size: 1.85rem; 2027 border-bottom: 2px solid var(--color-border); 2028 padding-bottom: 15px; 2029 margin-bottom: 20px; 2030} 2031 2032#main-content .work-card-desc { 2033 font-size: 1.05rem; 2034 margin-bottom: 30px; 2035} 2036 2037#main-content .pricing-tiers-list { 2038 list-style: none; 2039 padding: 0; 2040 margin: 0 0 30px 0; 2041} 2042 2043#main-content .pricing-tier-item { 2044 background-color: var(--color-bg-cream); 2045 border: 1px solid var(--color-border); 2046 border-radius: 8px; 2047 padding: 20px; 2048 margin-bottom: 16px; 2049} 2050 2051#main-content .pricing-tier-header { 2052 display: flex; 2053 justify-content: space-between; 2054 align-items: baseline; 2055 flex-wrap: wrap; 2056 gap: 8px; 2057 margin-bottom: 6px; 2058} 2059 2060#main-content .pricing-tier-name { 2061 font-weight: 700; 2062 font-size: 1.15rem; 2063 color: var(--color-primary-dark); 2064} 2065 2066#main-content .pricing-tier-hours { 2067 font-size: 0.9rem; 2068 font-weight: 700; 2069 background-color: var(--color-primary); 2070 color: #FFFFFF; 2071 padding: 4px 10px; 2072 border-radius: 4px; 2073} 2074 2075#main-content .pricing-tier-cost { 2076 font-weight: 700; 2077 font-size: 1.3rem; 2078 color: var(--color-text-dark); 2079} 2080 2081#main-content .pricing-tier-sub { 2082 font-size: 0.95rem; 2083 color: #404740; 2084 font-weight: 400; 2085} 2086 2087#main-content .pricing-tier-desc { 2088 margin: 8px 0 0 0; 2089 font-size: 1rem; 2090 line-height: 1.5; 2091} 2092 2093#main-content .projects-list-title { 2094 color: var(--color-primary-dark); 2095 margin-bottom: 15px; 2096} 2097 2098#main-content .projects-list { 2099 list-style: none; 2100 padding: 0; 2101 margin: 0 0 30px 0; 2102} 2103 2104#main-content .projects-list li { 2105 padding: 10px 0; 2106 border-bottom: 1px solid var(--color-border-light); 2107 display: flex; 2108 align-items: center; 2109 gap: 12px; 2110 font-size: 1rem; 2111} 2112 2113#main-content .projects-list li:last-child { 2114 border-bottom: none; 2115} 2116 2117#main-content .project-list-bullet { 2118 color: var(--color-accent-accessible); 2119 font-weight: 700; 2120} 2121 2122#main-content .project-minimum-tier { 2123 margin-top: auto; 2124 margin-bottom: 30px; 2125} 2126 2127#main-content .work-card .btn { 2128 margin-top: auto; 2129} 2130 2131/* Why / comparison table */ 2132#main-content .why-grid { 2133 display: grid; 2134 grid-template-columns: 1fr 1fr; 2135 gap: 24px; 2136 margin-top: 40px; 2137 margin-bottom: 60px; 2138} 2139 2140#main-content .why-item { 2141 background-color: var(--color-bg-cream); 2142 border: 1px solid var(--color-border); 2143 border-radius: 8px; 2144 padding: 24px; 2145 display: flex; 2146 align-items: flex-start; 2147 gap: 16px; 2148} 2149 2150#main-content .why-icon { 2151 background-color: var(--color-accent); 2152 color: #FFFFFF; 2153 width: 32px; 2154 height: 32px; 2155 border-radius: 50%; 2156 display: flex; 2157 align-items: center; 2158 justify-content: center; 2159 flex-shrink: 0; 2160 font-size: 0.9rem; 2161} 2162 2163#main-content .why-item p { 2164 margin: 0; 2165 font-size: 1.05rem; 2166 line-height: 1.5; 2167} 2168 2169#main-content .table-container { 2170 width: 100%; 2171 margin-bottom: 0; 2172 border: 1px solid var(--color-border); 2173 border-radius: 8px; 2174 overflow: hidden; 2175} 2176 2177#main-content .table-title { 2178 background-color: var(--color-primary-dark); 2179 color: #FFFFFF; 2180 margin: 0; 2181 padding: 20px 24px; 2182 font-size: 1.35rem; 2183 text-align: left; 2184} 2185 2186#main-content .comparison-table-wrapper { 2187 width: 100%; 2188 overflow-x: auto; 2189} 2190 2191#main-content .comparison-table { 2192 width: 100%; 2193 border-collapse: separate; 2194 border-spacing: 0; 2195 text-align: left; 2196 background-color: var(--color-bg-white); 2197 min-width: 600px; 2198} 2199 2200#main-content .comparison-table th, 2201#main-content .comparison-table td { 2202 padding: 16px 24px; 2203 border-bottom: 1px solid var(--color-border-light); 2204 font-size: 1rem; 2205 vertical-align: top; 2206} 2207 2208#main-content .comparison-table thead th { 2209 background-color: var(--color-primary); 2210 color: #FFFFFF; 2211 font-weight: 700; 2212} 2213 2214#main-content .comparison-table tbody th { 2215 font-weight: 600; 2216 color: var(--color-primary-dark); 2217} 2218 2219#main-content .comparison-table .highlight-column { 2220 background-color: rgba(245, 22, 121, 0.06); 2221 font-weight: 600; 2222 color: var(--color-primary-dark); 2223 border-left: 3px solid var(--color-accent); 2224 border-right: 3px solid var(--color-accent); 2225} 2226 2227#main-content .comparison-table thead .highlight-column { 2228 border-top: 3px solid var(--color-accent); 2229} 2230 2231#main-content .comparison-table tbody tr:last-child .highlight-column { 2232 border-bottom: 3px solid var(--color-accent); 2233} 2234 2235/* Testimonials */ 2236#main-content .proof-block-container { 2237 border-top: 2px solid var(--color-border-light); 2238 padding-top: 30px; 2239} 2240 2241#main-content .proof-title { 2242 text-align: center; 2243 font-size: 1.65rem; 2244 margin-bottom: 30px; 2245} 2246 2247#main-content .testimonials-grid { 2248 display: grid; 2249 grid-template-columns: 1fr 1fr; 2250 gap: 32px; 2251} 2252 2253#main-content .testimonial-card { 2254 background-color: var(--color-bg-cream);
2255 border-top: 4px solid var(--color-primary); 2256 border-radius: 6px; 2257 padding: 35px; 2258 margin: 0; 2259 display: flex; 2260 flex-direction: column; 2261} 2262 2263#main-content .testimonial-card > img, 2264#main-content .testimonial-placeholder-img { 2265 display: block; 2266 width: 84px; 2267 height: 84px; 2268 min-width: 84px; 2269 min-height: 84px; 2270 padding: 0; 2271 border-radius: 50%; 2272 object-fit: cover; 2273 margin: 0 auto 20px auto; 2274 border: 2px solid var(--color-accent); 2275} 2276 2277#main-content .testimonial-quote { 2278 font-style: italic; 2279 font-size: 1.05rem; 2280 line-height: 1.65; 2281 margin-bottom: 20px; 2282} 2283 2284#main-content .testimonial-author { 2285 font-weight: 700; 2286 font-size: 1rem; 2287 color: var(--color-primary-dark); 2288 margin-top: auto; 2289 font-style: normal; 2290} 2291 2292/* FAQ */ 2293#main-content .faq-list { 2294 max-width: 800px; 2295 margin: 40px auto 0 auto; 2296} 2297 2298#main-content .faq-item { 2299 background-color: var(--color-bg-white); 2300 border: 1px solid var(--color-border); 2301 border-radius: 6px; 2302 margin-bottom: 16px; 2303 overflow: hidden; 2304 transition: border-color 0.2s ease; 2305} 2306 2307#main-content .faq-item[open] { 2308 border-color: var(--color-primary); 2309} 2310 2311#main-content .faq-item summary { 2312 padding: 20px 24px; 2313 font-weight: 600; 2314 font-size: 1.1rem; 2315 color: var(--color-primary-dark); 2316 cursor: pointer; 2317 list-style: none; 2318 display: flex; 2319 justify-content: space-between; 2320 align-items: center; 2321 user-select: none; 2322} 2323 2324#main-content .faq-item summary::-webkit-details-marker { 2325 display: none; 2326} 2327 2328#main-content .faq-item summary::after { 2329 content: "+"; 2330 font-size: 1.5rem; 2331 font-weight: 700; 2332 color: var(--color-primary); 2333 transition: transform 0.2s ease; 2334} 2335 2336#main-content .faq-item[open] summary::after { 2337 content: "−"; 2338 transform: rotate(180deg); 2339} 2340 2341#main-content .faq-content { 2342 padding: 0 24px 20px 24px; 2343 border-top: 1px solid var(--color-border-light); 2344} 2345 2346#main-content .faq-content p { 2347 margin: 0; 2348 font-size: 1rem; 2349 line-height: 1.6; 2350} 2351 2352/* Contact */ 2353#main-content .contact-grid { 2354 display: grid; 2355 grid-template-columns: 4fr 5fr; 2356 gap: 50px; 2357 margin-bottom: 50px; 2358} 2359 2360#main-content .contact-info { 2361 text-align: left; 2362} 2363 2364#main-content .contact-guide-box { 2365 background-color: var(--color-bg-cream); 2366 border: 1px solid var(--color-border); 2367 border-radius: 8px; 2368 padding: 30px; 2369 margin-top: 25px; 2370} 2371 2372#main-content .contact-guide-box h4 { 2373 margin-top: 0; 2374 font-size: 1.2rem; 2375 color: var(--color-primary-dark); 2376} 2377 2378#main-content .contact-checklist { 2379 list-style: none; 2380 padding: 0; 2381 margin: 0 0 20px 0; 2382} 2383 2384#main-content .contact-checklist li { 2385 position: relative; 2386 padding-left: 28px; 2387 margin-bottom: 12px; 2388 font-weight: 500; 2389 font-size: 1rem; 2390} 2391 2392#main-content .contact-checklist li::before { 2393 content: "✔"; 2394 position: absolute; 2395 left: 0; 2396 top: 0; 2397 color: var(--color-accent-accessible); 2398 font-weight: 700; 2399} 2400 2401#main-content .contact-note { 2402 margin: 0; 2403 font-size: 1rem; 2404} 2405 2406#main-content .contact-form-container { 2407 background-color: var(--color-bg-cream); 2408 border: 1px solid var(--color-border); 2409 border-radius: 8px; 2410 padding: 40px; 2411 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); 2412} 2413 2414#main-content .contact-form { 2415 width: 100%; 2416} 2417 2418#main-content .form-row { 2419 display: grid; 2420 grid-template-columns: 1fr 1fr; 2421 gap: 20px; 2422} 2423 2424#main-content .form-group { 2425 margin-bottom: 24px; 2426 text-align: left; 2427} 2428 2429#main-content .form-group label { 2430 display: block; 2431 font-weight: 600; 2432 font-size: 1rem; 2433 margin-bottom: 8px; 2434 color: var(--color-primary-dark); 2435} 2436 2437#main-content .form-group input[type="text"], 2438#main-content .form-group input[type="email"], 2439#main-content .form-group textarea { 2440 width: 100%; 2441 padding: 12px 16px; 2442 border: 2px solid var(--color-border); 2443 border-radius: 4px; 2444 font-family: var(--font-primary); 2445 font-size: 1rem; 2446 line-height: 1.5; 2447 color: var(--color-text-dark); 2448 background-color: var(--color-bg-white); 2449 transition: border-color 0.2s ease, box-shadow 0.2s ease; 2450} 2451 2452#main-content .form-group input[type="text"]:focus, 2453#main-content .form-group input[type="email"]:focus, 2454#main-content .form-group textarea:focus { 2455 border-color: var(--color-primary-dark); 2456 box-shadow: 0 0 0 3px rgba(7, 36, 30, 0.18); 2457 outline: 3px solid transparent; 2458} 2459 2460#main-content .form-group input::placeholder, 2461#main-content .form-group textarea::placeholder { 2462 color: #4A4A4A; 2463 opacity: 1; 2464} 2465 2466#main-content .form-group textarea { 2467 resize: vertical; 2468 min-height: 150px; 2469} 2470 2471/* Motion */ 2472@media (prefers-reduced-motion: reduce) { 2473 #main-content *, 2474 #main-content *::before, 2475 #main-content *::after, 2476 .skip-link { 2477 animation-delay: -1ms !important; 2478 animation-duration: 1ms !important; 2479 animation-iteration-count: 1 !important; 2480 transition-duration: 0s !important; 2481 scroll-behavior: auto !important; 2482 } 2483} 2484 2485/* Responsive */ 2486@media (max-width: 900px) { 2487 #main-content .hero-grid { 2488 grid-template-columns: 1fr; 2489 text-align: center; 2490 gap: 40px; 2491 } 2492 2493 #main-content .hero-text-block { 2494 text-align: center; 2495 } 2496 2497 #main-content .byline-block { 2498 justify-content: center; 2499 text-align: left; 2500 } 2501 2502 #main-content .hero-image-block { 2503 order: -1; 2504 } 2505 2506 #main-content .hero-large-img { 2507 max-width: 320px; 2508 } 2509
2510 #main-content .work-grid, 2511 #main-content .contact-grid { 2512 grid-template-columns: 1fr; 2513 } 2514 2515 #main-content .contact-grid { 2516 gap: 40px; 2517 } 2518} 2519 2520@media (max-width: 768px) { 2521 #main-content h1 { 2522 font-size: 2.25rem; 2523 } 2524 2525 #main-content h2 { 2526 font-size: 1.875rem; 2527 } 2528 2529 #main-content h3 { 2530 font-size: 1.4rem; 2531 } 2532 2533 #main-content p.lead { 2534 font-size: 1.15rem; 2535 } 2536 2537 #main-content .why-grid, 2538 #main-content .testimonials-grid { 2539 grid-template-columns: 1fr; 2540 } 2541} 2542 2543@media (max-width: 600px) { 2544 #main-content .container { 2545 padding: 0 20px; 2546 } 2547 2548 #main-content .section-padding { 2549 padding: 70px 0; 2550 } 2551 2552 #main-content .form-row { 2553 grid-template-columns: 1fr; 2554 } 2555 2556 #main-content .contact-form-container { 2557 padding: 28px 20px; 2558 } 2559 2560 #main-content .work-card { 2561 padding: 28px 20px; 2562 } 2563 2564 #main-content .hero-large-img { 2565 max-width: 280px; 2566 } 2567} 2568 2569/* Placeholder sizing */ 2570#main-content .byline-portrait { 2571 display: block; 2572 width: 50px; 2573 height: 50px; 2574 min-height: 0; 2575 padding: 0; 2576 border: 0; 2577 border-radius: 50%; 2578 object-fit: cover; 2579} 2580 2581#main-content .hero-large-img { 2582 display: block; 2583 width: 100%; 2584 max-width: 420px; 2585 height: auto; 2586 border-radius: 12px; 2587} 2588 2589#main-content .work-card-banner-img { 2590 width: 100%; 2591 height: auto; 2592 display: block; 2593} 2594 2595#main-content .testimonial-placeholder-img { 2596 width: 84px; 2597 height: 84px; 2598 min-width: 84px; 2599 min-height: 84px; 2600 padding: 0; 2601 border-radius: 50%; 2602 margin: 0 auto 20px auto; 2603 font-size: 0.8rem; 2604} 2605 2606/* MemberVault paste cleanup */ 2607.mv-block > p:empty, 2608.mv-block > div:empty { 2609 display: none !important; 2610 height: 0 !important; 2611 min-height: 0 !important; 2612 margin: 0 !important; 2613 padding: 0 !important; 2614 border: 0 !important; 2615} 2616 2617#main-content { 2618 margin-top: 0 !important; 2619 margin-bottom: 0 !important; 2620 padding-top: 0 !important; 2621}</style> 2622 2623<div class="border-b mv_breadcrumbs hidden hidden"> 2624 <div class="max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10"> 2625 <a href="/"> 2626 <i class="fas fa-home"></i> 2627 </a> 2628 <i class="fas fa-caret-right ml-2 mr-2"></i> 2629 <a class="font-semibold" href="/pages/view/14178"> 2630 Home </a> 2631 </div> 2632 2633</div> 2634 2635<div class="flex flex-wrap max-w-screen-xl mx-auto lg:flex-nowrap lg:pl-6 lg:pr-6"> 2636 2637 2638 <div class="w-full flex-auto"> 2639 2640 <div class="pl-4 pr-4 mv_content lg:pl-2 lg:pr-2"> 2641 <div class="w-full relative mv-block" style="color: #0F3D32; "><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"> 2642<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2643<section aria-label="Introduction" class="hero-section"> 2644<div class="container hero-grid"> 2645<div class="hero-text-block"> 2646<h1>Looking for operational support you can rely on? <strong><em>maddatu</em></strong> keeps your business moving.</h1> 2647<div class="byline-block"> 2648<div class="byline-portrait-container"><img src="https://s3.membervaultcdn.com/websitefae/6a97b91ddd3bc_Chantelle.png?v=1788328222" width="1000" height="1000" alt="Chantelle Venter" class="byline-portrait"></div> 2649<div class="byline-text"><span class="byline-author">By <strong>Chantelle Venter</strong></span> <span class="byline-desc"> 6+ Years Supporting Established Businesses | <a class="byline-link" href="https://www.maddatu.com/about"> Read my story → </a> </span></div> 2650</div> 2651<p class="hero-subheadline">Your business needs more than another pair of hands. You need someone you can trust to take care of the operational work that keeps everything moving.</p> 2652<div class="answer-block"> 2653<p><strong><em>maddatu</em></strong> provides practical, dependable operational support for established small businesses. We handle the digital content, administration and day-to-day tasks that are easy to put off but need to get done, allowing you to focus fully on scaling your clinical or business impact.</p> 2654</div> 2655<div class="hero-cta"><a class="btn btn-outline" href="#contact"> Let's talk about what you need </a></div> 2656</div> 2657<div class="hero-image-block"><img src="https://s3.membervaultcdn.com/websitefae/MV%20-%20WF%20-%20Icons%20and%20photos%20(1).png?v=1750260127" title="Chantelle" alt="Chantelle Venter" class="hero-large-img"></div> 2658</div> 2659</section> 2660</div></body></html> 2661</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"> 2662<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2663<section aria-labelledby="problem-heading" class="section-padding bg-cream"> 2664<div class="container text-center"> 2665<h2 id="problem-heading">What is currently waiting on your plate that you shouldn't have to manage?</h2> 2666<p class="lead">You have a business to run. You shouldn't have to manage every detail. There is always something waiting:</p> 2667<div class="problem-grid"> 2668<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2669<p class="problem-text">An email sequence that needs setting up</p> 2670</div> 2671<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2672<p class="problem-text">A form that needs creating</p> 2673</div> 2674<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2675<p class="problem-text">A podcast episode that needs editing and publishing</p> 2676</div> 2677<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2678<p class="problem-text">A new client who needs onboarding</p> 2679</div> 2680<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2681<p class="problem-text">Content that needs uploading</p> 2682</div> 2683<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2684<p class="problem-text">A report that needs compiling</p> 2685</div> 2686<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2687<p class="problem-text">A list of small tasks that keeps growing</p> 2688</div> 2689<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2690<p class="problem-text">A website update</p> 2691</div> 2692<div class="problem-card"><span aria-hidden="true" class="problem-bullet">✔</span> 2693<p class="problem-text">A course that needs publishing</p> 2694</div> 2695</div> 2696<div class="problem-outro"> 2697<p>None of these jobs are necessarily difficult. The problem is that they still take time, attention and follow-through.</p> 2698<a class="btn btn-secondary" href="#contact">
2698 That is where I come in </a></div> 2699</div> 2700</section> 2701</div></body></html> 2702</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"> 2703<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2704<section class="section-padding bg-white" aria-labelledby="solution-heading"> 2705<div class="container"> 2706<div class="text-center max-width-800"> 2707<h2 id="solution-heading">How can one trusted partner handle the work that keeps your business moving?</h2> 2708<p class="lead">You do not need to work out which specialist to hire for every small job. You can bring the work to me, and I will take care of the practical execution using the tools and processes already in your business.</p> 2709</div> 2710<h3 class="services-subheading">What specific operational tasks can <strong><em>maddatu</em></strong> take off your plate?</h3> 2711<div class="services-grid"><!-- Card 1 --> 2712<div class="service-card"> 2713<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Email%20campaigns%20and%20sequence%20administration.png?v=1788326557" width="1280" height="486" alt="Email campaigns and sequence administration" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div> 2714<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">✉</span> 2715<h4>Email campaigns and sequence administration</h4> 2716</div> 2717<p>Formatting supplied email copy, building newsletter templates, and setting up and testing pre-written automated marketing sequences.</p> 2718</div> 2719<!-- Card 2 --> 2720<div class="service-card"> 2721<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Forms,%20quizzes%20and%20client-facing%20content.png?v=1788326663" width="1280" height="486" alt="Forms, quizzes and client-facing content" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div> 2722<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">📝</span> 2723<h4>Forms, quizzes and client-facing content</h4> 2724</div> 2725<p>Creating functional contact, intake, or evaluation forms, setting up client quizzes, and configuring automated confirmation emails using built-in platform features.</p> 2726</div> 2727<!-- Card 3 --> 2728<div class="service-card"> 2729<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Podcast%20and%20content%20publishing.png?v=1788326678" width="1280" height="486" alt="Podcast and content publishing" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div> 2730<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">🎙</span> 2731<h4>Podcast and content publishing</h4> 2732</div> 2733<p>Cleaning raw recordings, generating audiograms/graphics, drafting show notes from agreed templates, and publishing episodes to hosting platforms.</p> 2734</div> 2735<!-- Card 4 --> 2736<div class="service-card"> 2737<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Event%20and%20summit%20administration.png?v=1788326691" width="1280" height="486" alt="Event and summit administration" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div> 2738<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">📅</span> 2739<h4>Event and summit administration</h4> 2740</div> 2741<p>Creating event speaker submission forms, collecting and organizing bios/assets, generating event graphics, and publishing schedules.</p> 2742</div> 2743<!-- Card 5 --> 2744<div class="service-card"> 2745<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Client%20onboarding%20administration.png?v=1788326704" width="1280" height="486" alt="Client onboarding administration" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important;
2745 object-fit: fill !important;"></div> 2746<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">👥</span> 2747<h4>Client onboarding administration</h4> 2748</div> 2749<p>Distributing contracts via signing platforms, issuing initial onboarding invoices, configuring user platform access, and coordinating cohort logistics.</p> 2750</div> 2751<!-- Card 6 --> 2752<div class="service-card"> 2753<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Data,%20document%20and%20content%20administration.png?v=1788326716" width="1280" height="486" alt="Data, document and content administration" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div> 2754<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">📊</span> 2755<h4>Data, document and content administration</h4> 2756</div> 2757<p>Organizing digital folders, formatting documents, exporting/importing contact data, and executing clean manual platform-to-platform copy migrations.</p> 2758</div> 2759<!-- Card 7 --> 2760<div class="service-card"> 2761<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/General%20operational%20tasks%20that%20need%20reliable%20follow-through.png?v=1788326732" width="1280" height="486" alt="General operational tasks requiring reliable follow-through" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div> 2762<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">⚙</span> 2763<h4>General operational tasks that need reliable follow-through</h4> 2764</div> 2765<p>A broad variety of routine tasks that require continuous attention, practical follow-through, and reliable execution without micromanagement.</p> 2766</div> 2767<!-- Card 8 --> 2768<div class="service-card"> 2769<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Course%20and%20digital%20content%20publishing.png?v=1788326749" width="1280" height="486" alt="Course and digital content publishing" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div> 2770<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">🎓</span> 2771<h4>Course and digital content publishing</h4> 2772</div> 2773<p>Formatting online lessons, uploading and organizing supplied modules, formatting lessons, and adding workbook assets, graphics, and checklists.</p> 2774</div> 2775<!-- Card 9 --> 2776<div class="service-card"> 2777<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Website%20content%20and%20routine%20maintenance.png?v=1788326762" width="1280" height="486" alt="Website content and routine maintenance" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div> 2778<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">💻</span> 2779<h4>Website content and routine maintenance</h4> 2780</div> 2781<p>Updating text copy, publishing new images or products, publishing media, performing plugin updates, and carrying out routine platform health checks.</p> 2782</div> 2783</div> 2784<p class="services-notice">These are examples, not a rigid menu. Your needs will change from month to month. Your support should be able to change with them.</p> 2785</div> 2786</section> 2787</div></body></html> 2788</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"> 2789<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2790<section aria-labelledby="pricing-heading" class="section-padding bg-cream"> 2791<div class="container"> 2792<div class="text-center max-width-800"> 2793<h2 id="pricing-heading">How can you collaborate with <strong><em>maddatu</em></strong> to support your growth?</h2> 2794<p class="lead">Whether you require predictable ongoing support or have a specific outcome to achieve, we have a structure to supp
2794ort you.</p> 2795</div> 2796<div class="work-grid"> 2797<div class="work-card"> 2798<div class="work-card-banner"><img src="https://s3.membervaultcdn.com/websitefae/Ongoing%20Support.png?v=1788327196" alt="Ongoing support" class="work-card-banner-img" style="width: 100%; height: auto !important; min-height: 0 !important; object-fit: contain; display: block;"></div> 2799<h3>Ongoing Support</h3> 2800<p class="work-card-desc">Reserve my time each month for the operational work your business needs. You can send tasks as they arise, and I keep track of the available capacity.</p> 2801<ul class="pricing-tiers-list"> 2802<li class="pricing-tier-item"> 2803<div class="pricing-tier-header"><span class="pricing-tier-name">Foundation</span> <span class="pricing-tier-hours">Up to 10 hours/month</span></div> 2804<div class="pricing-tier-cost">R6,500 <span class="pricing-tier-sub"> / $500 / £400 per month </span></div> 2805<p class="pricing-tier-desc">For established businesses with a lighter but recurring flow of operational work.</p> 2806</li> 2807<li class="pricing-tier-item"> 2808<div class="pricing-tier-header"><span class="pricing-tier-name">Core</span> <span class="pricing-tier-hours">Up to 20 hours/month</span></div> 2809<div class="pricing-tier-cost">R12,000 <span class="pricing-tier-sub"> / $950 / £750 per month </span></div> 2810<p class="pricing-tier-desc">For businesses that regularly need varied support across content, administration and publishing.</p> 2811</li> 2812<li class="pricing-tier-item"> 2813<div class="pricing-tier-header"><span class="pricing-tier-name">Partner</span> <span class="pricing-tier-hours">Up to 30 hours/month</span></div> 2814<div class="pricing-tier-cost">R17,000 <span class="pricing-tier-sub"> / $1,350 / £1,050 per month </span></div> 2815<p class="pricing-tier-desc">For businesses where I am a regular part of the operational workflow and you need more consistent capacity.</p> 2816</li> 2817</ul> 2818<a class="btn btn-primary btn-full" href="https://www.maddatu.com/ongoing-support">Explore ongoing support</a></div> 2819<div class="work-card"> 2820<div class="work-card-banner"><img src="https://s3.membervaultcdn.com/websitefae/Projects.png?v=1788327208" alt="Projects" class="work-card-banner-img" style="width: 100%; height: auto !important; min-height: 0 !important; object-fit: contain; display: block;"></div> 2821<h3>Projects</h3> 2822<p class="work-card-desc">Have a defined piece of work that needs to be completed? I can scope it, quote it and take it through to completion.</p> 2823<h4 class="projects-list-title">Project Families Handled:</h4> 2824<ul class="projects-list"> 2825<li><span aria-hidden="true" class="project-list-bullet">✔</span> Course & Digital Content Publishing</li> 2826<li><span aria-hidden="true" class="project-list-bullet">✔</span> Email Campaign & Sequence Production</li> 2827<li><span aria-hidden="true" class="project-list-bullet">✔</span> Podcast Production & Publishing Support</li> 2828<li><span aria-hidden="true" class="project-list-bullet">✔</span> Event & Summit Administration</li> 2829<li><span aria-hidden="true" class="project-list-bullet">✔</span> Client Onboarding Administration</li> 2830<li><span aria-hidden="true" class="project-list-bullet">✔</span> Website Content Projects & Migrations</li> 2831<li><span aria-hidden="true" class="project-list-bullet">✔</span> Data, Document & Migration Administration</li> 2832</ul> 2833<div class="pricing-tier-item project-minimum-tier"><span class="pricing-tier-name">Project Pricing Starting From:</span> 2834<div class="pricing-tier-cost" style="margin: 10px 0 0 0;">R4,500 <span class="pricing-tier-sub"> / $400 / £325 </span></div> 2835<p class="pricing-tier-desc" style="margin-top: 5px;">Based on agreed scope and deliverables. I use internal time estimates to protect the project margin, but you are not required to manage the work by the hour.</p> 2836</div> 2837<a class="btn btn-secondary btn-full" href="https://www.maddatu.com/projects">Explore projects</a></div> 2838</div> 2839</div> 2840</section> 2841</div></body></html> 2842</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"> 2843<?xml encoding="utf-8" ?><html><body><div id="main-content">
2844<section aria-labelledby="why-heading" class="section-padding bg-white"> 2845<div class="container"> 2846<div class="text-center max-width-800"> 2847<h2 id="why-heading">Why do established service businesses choose <strong><em>maddatu</em></strong>?</h2> 2848<p class="lead">You deserve operational support that understands small business dynamics, maintains continuity, and handles technical tasks without micromanagement.</p> 2849</div> 2850<div class="why-grid"> 2851<div class="why-item"><span aria-hidden="true" class="why-icon">✔</span> 2852<p><strong>You get continuity</strong> rather than a different person for every single task.</p> 2853</div> 2854<div class="why-item"><span aria-hidden="true" class="why-icon">✔</span> 2855<p><strong>You do not have to explain</strong> your business from scratch every time.</p> 2856</div> 2857<div class="why-item"><span aria-hidden="true" class="why-icon">✔</span> 2858<p><strong>I can work across the tools</strong> you already use in your business.</p> 2859</div> 2860<div class="why-item"><span aria-hidden="true" class="why-icon">✔</span> 2861<p><strong>I follow your processes</strong> and keep track of what needs to happen next.</p> 2862</div> 2863<div class="why-item"><span aria-hidden="true" class="why-icon">✔</span> 2864<p><strong>When something is unclear</strong>, I ask the right question and work out the next practical step.</p> 2865</div> 2866<div class="why-item"><span aria-hidden="true" class="why-icon">✔</span> 2867<p><strong>You get someone who cares</strong> about getting the work finished, not simply ticking off a task list.</p> 2868</div> 2869</div> 2870<div class="table-container"> 2871<h3 class="table-title">Comparing Your Support Alternatives</h3> 2872<table class="comparison-table"> 2873<thead> 2874<tr> 2875<th scope="col">Feature / Operational Focus</th> 2876<th scope="col">Low-Cost General VA</th> 2877<th scope="col">Rigid Digital Agency</th> 2878<th class="highlight-column" scope="col"><strong><em>maddatu</em></strong> Support</th> 2879</tr> 2880</thead> 2881<tbody> 2882<tr> 2883<th scope="row">Task Independence & Ownership</th> 2884<td>Requires step-by-step supervision</td> 2885<td>Limited to highly structured scope</td> 2886<td class="highlight-column">Takes full responsibility and follow-through</td> 2887</tr> 2888<tr> 2889<th scope="row">Continuity & Business Familiarity</th> 2890<td>High turnover, frequent restarts</td> 2891<td>Different account managers month-to-month</td> 2892<td class="highlight-column">Single trusted contact who understands your systems</td> 2893</tr> 2894<tr> 2895<th scope="row">Platform Adaptability</th> 2896<td>May struggle with multiple platforms</td> 2897<td>Forces you onto their preferred tools</td> 2898<td class="highlight-column">Works across the systems you already use</td> 2899</tr> 2900<tr> 2901<th scope="row">Commercial Transparency</th> 2902<td>Commoditized hourly rates</td> 2903<td>Opaque premium packages</td> 2904<td class="highlight-column">Prepaid monthly capacity or clear fixed project fees</td> 2905</tr> 2906</tbody> 2907</table> 2908</div> 2909</div> 2910</section> 2911</div></body></html> 2912</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"> 2913<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2914<section class="section-padding bg-white" aria-labelledby="proof-heading"> 2915<div class="container"> 2916<div class="proof-block-container"> 2917<h3 class="proof-title" id="proof-heading">Verified Proof From Our Clients</h3> 2918<div class="testimonials-grid"> 2919<blockquote class="testimonial-card"><img src="https://s3.membervaultcdn.com/websitefae/6a97b8932a57c_Ashley.png?v=1788328084" width="1000" height="1000" alt="Ashley Costello" class="testimonial-placeholder-img"> 2920<p class="testimonial-quote">"I have been working with Chantelle since April 2023, and every day she amazes me with her abilities. We initially met because of my MemberVault account, but since then, she has done so much for my business... I just started using a new system to help with client documentation, appointments, and invoices, and Chantelle went away and came back and taught me to use it. She also set up all templates, etc., cannot recommend her enough."</p> 2921<cite class="testimonial-author">— Ashley Costello, Established Client</cite></blockquote> 2922<blockquote class="testimonial-card"><img src="https://s3.membervaultcdn.com/websitefae/6a97b8a2ac92a_Jewel.png?v=1788328099" width="1000" height="1000" alt="Jewel Veitch" class="testimonial-placeholder-img"> 2923<p class="testimonial-quote">"My experience working with <strong><em>maddatu</em></strong> was out of this world! I am not a tech person, and Chantelle made this process easy and fun. Words I would NEVER have used to describe it in the past. Chantelle exceeded my expectations with her guidance and knowledge. Collaboration has been super easy and stress-free! I would HIGHLY recommend you consider working with her, you will not be disappointed!"</p> 2924<cite class="testimonial-author">— Jewel Veitch, Established Client</cite></blockquote> 2925</div> 2926</div> 2927</div> 2928</section> 2929</div></body></html> 2930</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"> 2931<?xml encoding="utf-8" ?><html><body><div id="main-content"> 2932<section aria-labelledby="faq-heading" class="section-padding bg-cream"> 2933<div class="container"> 2934<div class="text-center max-width-800"> 2935<h2 id="faq-heading">Frequently Asked Questions</h2> 2936<p class="lead">Clear, direct answers about working together, support structures, and platform details.</p> 2937</div> 2938<div class="faq-list"><details class="faq-item"> 2939<summary>Do I need to know exactly what I need before contacting you?</summary> 2940<div class="faq-content"> 2941<p>No. Tell me what you are trying to get done. We can work out whether it is best handled as ongoing support or a project.</p> 2942</div> 2943</details>
2943<details class="faq-item"> 2944<summary>Do you only work on websites?</summary> 2945<div class="faq-content"> 2946<p>No. Websites are one part of the work. I also support course publishing, email campaigns, content production, events, onboarding, administration, data and other operational tasks.</p> 2947</div> 2948</details><details class="faq-item"> 2949<summary>Do you only work with one platform?</summary> 2950<div class="faq-content"> 2951<p>No. I work with the tools that are already part of your business where practical.</p> 2952</div> 2953</details><details class="faq-item"> 2954<summary>Can I give you different types of tasks each month?</summary> 2955<div class="faq-content"> 2956<p>Yes. That is one of the main reasons ongoing support is structured around reserved capacity rather than a rigid list of tasks.</p> 2957</div> 2958</details><details class="faq-item"> 2959<summary>What happens if I use all my monthly support time?</summary> 2960<div class="faq-content"> 2961<p>I will let you know when you are approaching your limit. We can defer additional work, schedule it into the next period, or quote extra work separately.</p> 2962</div> 2963</details><details class="faq-item"> 2964<summary>Do unused hours roll over?</summary> 2965<div class="faq-content"> 2966<p>The default approach is that monthly capacity is for the current support period. A small rollover allowance can be agreed where appropriate, but unlimited accumulation is not part of the model.</p> 2967</div> 2968</details><details class="faq-item"> 2969<summary>Can I start with a project and move into ongoing support?</summary> 2970<div class="faq-content"> 2971<p>Yes. A project is often a useful way for us to work together before deciding whether ongoing support makes sense.</p> 2972</div> 2973</details><details class="faq-item"> 2974<summary>Do you offer website development?</summary> 2975<div class="faq-content"> 2976<p>My focus is on website content administration and routine maintenance rather than software development or custom coding.</p> 2977</div> 2978</details><details class="faq-item"> 2979<summary>Can you work with my existing processes?</summary> 2980<div class="faq-content"> 2981<p>Yes. In most cases I work within the systems and processes you already have rather than requiring you to rebuild everything.</p> 2982</div> 2983</details><details class="faq-item"> 2984<summary>Will you tell me if you think something could work better?</summary> 2985<div class="faq-content"> 2986<p>Yes. I will follow your instructions, but if I see a practical improvement worth considering, I will raise it with you. You remain responsible for the final business decision.</p> 2987</div> 2988</details><details class="faq-item"> 2989<summary>How do projects get priced?</summary> 2990<div class="faq-content"> 2991<p>Projects are priced according to the agreed scope and deliverables. I use internal time estimates to calculate the fee and protect the project margin.</p> 2992</div> 2993</details><details class="faq-item"> 2994<summary>Who is ongoing support best for?</summary> 2995<div class="faq-content"> 2996<p>It works best for established businesses with a recurring flow of operational work and a need for a reliable person who already understands their business.</p> 2997</div> 2998</details></div> 2999</div> 3000</section> 3001</div></body></html> 3002</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"> 3003<?xml encoding="utf-8" ?><html><body><div id="main-content"> 3004<section aria-labelledby="contact-heading" class="section-padding bg-white" id="contact"> 3005<div class="container"> 3006<div class="contact-grid"> 3007<div class="contact-info"> 3008<h2 id="contact-heading">Tell me what needs to get done.</h2> 3009<p>You do not need to know exactly what service you need before you contact me. Tell me what is currently taking up your time, what keeps getting pushed down the list, or what you need help getting finished.</p> 3010<div class="contact-guide-box"> 3011<h4>A few useful details to think about:</h4> 3012<ul class="contact-checklist"> 3013<li>What do you need done?</li> 3014<li>What platform or tools are involved, if you know them?</li> 3015<li>Is this a one-off project or something that happens regularly?</li> 3016<li>When would you ideally like it completed?</li> 3017</ul> 3018<p class="contact-note"><em>If you are not sure, that is fine. Start with the problem and we can work from there.</em></p> 3019</div> 3020</div> 3021<div class="contact-form-container"> 3022<div id="mlb2-38308907" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-38308907"> 3023<div class="ml-form-align-center"> 3024<div class="ml-form-embedWrapper embedForm"> 3025<div class="ml-form-embedBody ml-form-embedBodyDefault row-form"><form class="ml-block-form contact-form" action="https://assets.mailerlite.com/jsonp/107223/forms/181644614206227590/subscribe" data-code="" method="post"> 3026<div class="form-row"> 3027<div class="form-group"><label for="contact-first-name"> First Name </label> <input id="contact-first-name" type="text" name="fields[name]" autocomplete="given-name" required=""></div> 3028<div class="form-group"><label for="contact-last-name"> Last Name </label> <input id="contact-last-name" type="text" name="fields[last_name]" autocomplete="family-name" required=""></div> 3029</div> 3030<div class="form-group"><label for="contact-email"> Email Address </label> <input id="contact-email" type="email" name="fields[email]" autocomplete="email" required=""></div> 3031<div class="form-group"><label for="contact-message"> Tell me what is currently sitting on your plate and where you need support </label> <textarea id="contact-message" name="fields[tell_us_what_is_currently_happening_in_your_practice_and_where_you_need_support]" rows="7" required=""></textarea></div> 3032</form></div> 3033</div> 3034</div> 3035</div> 3036</div> 3037</div> 3038</div> 3039</section> 3040</div></body></html> 3041</div></div> </div> 3042 3043 3044 3045 </div> 3046 3047 3048</div> 3049</div> 3050<footer id="mv_footer" class="mv_footer border-t pb-10 text-sm "> 3051 3052 <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 "> 3053 3054 <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"> 3055 <h3 class="font-semibold mb-1">About</h3> 3056 <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. 3057 3058Website Fae Pty Ltd trading as Maddatu</p> 3059 </div> 3060 3061 <div class="relative w-full lg:w-1/3 flex-none p-4 text-center border-b lg:border-b-0"> 3062 <div class="inline-block text-center lg:text-left relative"> 3063 <h3 class="font-semibold mb-1">Links</h3> 3064 <div class="w-full "> 3065 <a class="mb-1" href="https://maddatu.com/terms" target="_BLANK"> 3066 Terms and Conditions </a><br> 3067 <a class="mb-1" href="https://maddatu.com/privacy" target="_BLANK"> 3068 Privacy Policy </a><br> 3069 <a class="mb-1" href="https://maddatu.com/disclaimer" target="_BLANK"> 3070 Disclaimer </a><br> 3071 <a class="mb-1" href="https://maddatu.com/accessibility-statement" target="_BLANK"> 3072 Accessibility Statement </a><br> 3073 </div>
3074 </div> 3075 </div> 3076 3077 3078 3079 <div class="w-full lg:w-1/3 flex-none p-4 text-center "> 3080 <div class="inline-block text-center lg:text-left"> 3081 <h3 class="font-semibold mb-1">Social</h3> 3082 <div class="w-full"> 3083 3084 <a class="mb-1 flex" href="https://facebook.com/maddatu.sa" target="_BLANK"> 3085 <i class="fab fa-facebook-square inline-block my-auto mr-1"></i> Facebook 3086 </a> 3087 <a class="mb-1 flex" href="https://instagram.com/maddatu.sa" target="_BLANK"> 3088 <i class="fab fa-instagram inline-block my-auto mr-1"></i> Instagram 3089 </a> 3090 3091 3092 3093 3094 3095 3096 </div> 3097 </div> 3098 </div> 3099 3100 3101 </div> 3102 3103 <div class="w-full max-w-screen-xl p-4 mx-auto text-xs font-light"> 3104 <div class="w-full flex flex-wrap pt-2"> 3105 <div class="flex-none w-full text-center mt-2 lg:w-1/2 lg:text-left"> 3106 © 2026 - maddatu </div> 3107 <div class="flex-none flex w-full pt-2 lg:w-1/2 lg:flex-row-reverse"> 3108 <a href="https://membervault.co" class="flex-none mx-auto lg:mx-px flex hidden" target="_BLANK"> 3109 <img class="my-auto w-6 h-6 mr-2 mv_footer_logo" src="/fe/images/fav/favicon-32x32.png" loading="lazy"> 3110 <span class="my-auto">Powered By MemberVault</span> 3111 </a> 3112 </div> 3113 </div> 3114 </div> 3115 3116</footer> 3117 3118 3119 3120 3121 3122<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%"> 3123 3124 <a href="javascript:toggleMainNav()" class="mv_close_button mt-2 mr-2"> 3125 <i class="fas fa-times"></i> 3126 </a> 3127 3128 <div class="w-full p-4 border-b"> 3129 3130 <form class="mv_search_container" method="get" action="/products"> 3131 <a href="javascript:toggleTextSizeMobile()" class="mv_text_button mr-2"> 3132 <i class="fas fa-text-height"></i> 3133 </a> 3134 3135 <i class="fas fa-search mr-1"></i> 3136 <input name="search" class="mv_search_box rounded pl-2 text-gray-800 w-32 opacity-50" type="text" placeholder="Search..." value=""> 3137 <input type="submit" value="search" class="hidden mv_search_button rounded bg-gray-800 text-white opacity-50 pl-1 pr-1"> 3138 </form> 3139 3140 3141 3142 </div> 3143 3144 <div class="flex text-center mt-4"> 3145 <div class="flex-none w-full pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold"> 3146 Menu 3147 </div> 3148 </div> 3149 3150 <ul class="w-full font-semibold"> 3151 <li class="w-full border-b"> 3152 <a href="/home" class="flex p-4"> 3153 <span class="flex-none w-11/12 my-auto"> 3154 Home </span> 3155 <span class="flex-none w-1/12 my-auto text-right"> 3156 <i class="fas fa-angle-right"></i> 3157 </span> 3158 </a> 3159 </li> 3160 <li class="w-full border-b"> 3161 <a href="/about" class="flex p-4"> 3162 <span class="flex-none w-11/12 my-auto"> 3163 About </span> 3164 <span class="flex-none w-1/12 my-auto text-right"> 3165 <i class="fas fa-angle-right"></i> 3166 </span> 3167 </a> 3168 </li> 3169 <li class="w-full border-b"> 3170 <a href="/services" class="flex p-4"> 3171 <span class="flex-none w-11/12 my-auto"> 3172 Services </span> 3173 <span class="flex-none w-1/12 my-auto text-right"> 3174 <i class="fas fa-angle-right"></i> 3175 </span> 3176 </a> 3177 </li> 3178 <li class="w-full border-b"> 3179 <a href="/contact" class="flex p-4"> 3180 <span class="flex-none w-11/12 my-auto"> 3181 Contact </span> 3182 <span class="flex-none w-1/12 my-auto text-right"> 3183 <i class="fas fa-angle-right"></i> 3184 </span> 3185 </a> 3186 </li> 3187 <li class="w-full border-b"> 3188 <a href="/blog" class="flex p-4"> 3189 <span class="flex-none w-11/12 my-auto"> 3190 Blog </span> 3191 <span class="flex-none w-1/12 my-auto text-right"> 3192 <i class="fas fa-angle-right"></i> 3193 </span> 3194 </a> 3195 </li> 3196 </ul> 3197 3198 <div class="flex text-center"> 3199 <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')"> 3200 My Services </a> 3201 <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')"> 3202 Available Services </a> 3203 </div> 3204 3205
3206 <ul id="mv_main_nav_available_content" class="w-full font-semibold "> 3207 <li class="w-full border-b"> 3208 <a href="/products/courses/view/1193365" class="flex p-4"> 3209 <span class="flex-none w-11/12 my-auto"> 3210 maddatu Ongoing Support </span> 3211 <span class="flex-none w-1/12 my-auto text-right"> 3212 <i class="fas fa-angle-right"></i> 3213 </span> 3214 </a> 3215 </li> 3216 </ul> 3217 3218 <ul id="mv_main_nav_my_content" class="w-full font-semibold hidden"> 3219 <li class="w-full border-b"> 3220 <a href="/login/?goto=/" class="flex p-4"> 3221 Sign In to see your services </a> 3222 </li> 3223 </ul> 3224 3225 3226 3227</div> 3228 3229 3230 3231 3232<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%"> 3233 <a href="javascript:toggleLogin()" class="mv_close_button"> 3234 <i class="fas fa-times"></i> 3235 </a> 3236 3237 <div class="w-full bg-gray-200 p-4 text-center"> 3238 <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md"> 3239 <i class="fas fa-sign-in-alt text-white text-lg"></i> 3240 </div> 3241 3242 <div class="w-full mt-2 font-semibold"> 3243 Sign In </div> 3244 </div> 3245 3246 <div id="login_before" class="w-full p-4 pb-0 text-sm"> 3247 3248 <h3 class="w-full font-semibold">Sign In Details</h3> 3249 3250 <div class="flex flex-wrap mt-2"> 3251 <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=""> 3252 </div> 3253 <div class="flex flex-wrap mt-2"> 3254 <input class="flex-none w-full border p-2 rounded" type="password" id="loginform_password" name="email" placeholder="Password" autocomplete="off" value=""> 3255 </div> 3256 3257 <div class="w-full relative text-red-700 font-bold hidden" id="loginform_error"> 3258 </div> 3259 3260 <div class="w-full relative"> 3261 <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"> 3262 Sign In </a> 3263 </div> 3264 3265 </div> 3266 3267 <div class="w-full flex p-4 pt-0 text-sm italic mt-4"> 3268 <div class="flex-none w-1/2"> 3269 </div> 3270 <div class="flex-none w-1/2 text-right"> 3271 <a class="" href="javascript:void(0)" onclick="toggleLoginForgot()">forgot password?</a> 3272 </div> 3273 </div> 3274 3275 <div id="login_forgot" class="w-full p-4 pb-0 text-sm hidden"> 3276 3277 <h3 class="w-full font-semibold">Forgot Password?</h3> 3278 <p class="font-light">Enter your email address and we will send you a link to reset your password.</p> 3279 3280 <div class="flex flex-wrap mt-2"> 3281 <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=""> 3282 </div> 3283 3284 <div class="w-full relative text-red-700 font-bold hidden" id="loginforgot_error"> 3285 </div> 3286 3287 <div class="w-full relative"> 3288 <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"> 3289 Reset Password 3290 </a> 3291 </div> 3292 3293 </div> 3294 3295 <div class="loading"></div> 3296</div> 3297 3298 3299<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%"> 3300 <a href="javascript:toggleForgot()" class="mv_close_button"> 3301 <i class="fas fa-times"></i> 3302 </a> 3303 3304 <div class="w-full bg-gray-200 p-4 text-center"> 3305 <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md"> 3306 <i class="fas fa-question text-white text-lg"></i> 3307 </div> 3308 3309 <div class="w-full mt-2 font-semibold"> 3310 Forgot Password 3311 </div> 3312 </div> 3313 3314 <div id="reset_before" class="w-full p-4 pb-0 text-sm hidden"> 3315 3316 <h3 class="w-full font-semibold">Create New Password for </h3> 3317 3318 <div class="flex flex-wrap mt-2"> 3319 <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password" name="password" placeholder="Password" autocomplete="off" value=""> 3320 </div> 3321 <div class="flex flex-wrap mt-2"> 3322 <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password2" name="password2" placeholder="Re-Type Password" autocomplete="off" value=""> 3323 </div> 3324 3325 <div class="w-full relative"> 3326 <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"> 3327 Reset Password 3328 </a> 3329 </div> 3330 </div> 3331 3332 <div class="w-full p-4 relative text-red-700 font-bold hidden" id="reset_error"></div> 3333 3334 3335 <div class="loading"></div> 3336</div> 3337
3338<script> 3339 function submitLoginForm() { 3340 var email = $('#loginform_email').val(); 3341 var password = $('#loginform_password').val(); 3342 3343 $('.loading').show(); 3344 $.ajax({ 3345 method: "POST", 3346 url: '/login/ajax_login', 3347 data: { 3348 username: email, 3349 password: password, 3350 goto: '/products' 3351 } 3352 }) 3353 .done(function(msg) { 3354 var response = JSON.parse(msg); 3355 3356 if (response.goto) { 3357 window.location = response.goto; 3358 } else { 3359 $('.loading').hide(); 3360 $('#loginform_error').show().html(response.message); 3361 } 3362 }); 3363 } 3364 3365 function toggleLoginForgot() { 3366 if ($('#login_forgot').css('display') == 'none') { 3367 $('#login_forgot').show(); 3368 $('#login_before').addClass('opacity-25'); 3369 } else { 3370 $('#login_forgot').hide(); 3371 $('#login_before').removeClass('opacity-25'); 3372 } 3373 } 3374 3375 function submitLoginForgot() { 3376 var email = $('#loginforgot_email').val(); 3377 3378 $('.loading').show(); 3379 $.ajax({ 3380 method: "POST", 3381 url: '/login/ajax_forgot', 3382 data: { 3383 username: email, 3384 } 3385 }) 3386 .done(function(msg) { 3387 var response = JSON.parse(msg); 3388 3389 $('.loading').hide(); 3390 if (response.status == 'success') { 3391 $('#loginforgot_error').removeClass('text-red-700').addClass('text-green-700'); 3392 $('#login_forgot_button').hide(); 3393 } 3394 $('#loginforgot_error').show().html(response.message); 3395 }); 3396 3397 } 3398 3399 function submitResetForm() { 3400 var password = $('#resetform_password').val(); 3401 var password2 = $('#resetform_password2').val(); 3402 3403 if (password != password2) { 3404 $('#reset_error').show().html('Passwords Don\'t Match!'); 3405 return false; 3406 } 3407 if (password == '') { 3408 $('#reset_error').show().html('Password can\'t be blank!'); 3409 return false; 3410 } 3411 3412 $('.loading').show(); 3413 3414 $.ajax({ 3415 method: "POST", 3416 url: '/login/ajax_do_reset', 3417 data: { 3418 user: '', 3419 password: password, 3420 hash: '' 3421 } 3422 }) 3423 .done(function(msg) { 3424 var response = JSON.parse(msg); 3425 3426 $('.loading').hide(); 3427 3428 $('#reset_before').hide(); 3429 if (response.status == 'success') { 3430 $('#reset_error').removeClass('text-red-700').addClass('text-green-700'); 3431 } 3432 $('#reset_error').show().html(response.message); 3433 }); 3434 } 3435 3436 $(".js_clean_email").keyup(function() { 3437 $(this).val(cleanEmail($(this).val())); 3438 }); 3439</script>
3439 3440 3441 3442 3443 3444<div id="mv_cover" class="hidden fixed left-0 top-0 w-full h-full bg-black opacity-75 z-10"> </div> 3445
3446<script src="/fe/js/app.js?ver=2.43"></script>
vendor: 1 bytes, line 3446
3446
3447<script src="/fe/js/sweetalert2.all.min.js?ver=2.43"></script>
vendor: 1 bytes, line 3447
3447
3448<script> 3449 // global variables 3450 const confetti = document.getElementById('confetti'); 3451 const confettiCtx = confetti.getContext('2d'); 3452 let container, confettiElements = []; 3453 3454 // helper 3455 rand = (min, max) => Math.random() * (max - min) + min; 3456 3457 // params to play with 3458 const confettiParams = { 3459 // number of confetti per "explosion" 3460 number: 200, 3461 // min and max size for each rectangle 3462 size: { 3463 x: [5, 20], 3464 y: [10, 18] 3465 }, 3466 // power of explosion 3467 initSpeed: 50, 3468 // defines how fast particles go down after blast-off 3469 gravity: 0.65, 3470 // how wide is explosion 3471 drag: 0.08, 3472 // how slow particles are falling 3473 terminalVelocity: 20, 3474 // how fast particles are rotating around themselves 3475 flipSpeed: 0.017, 3476 }; 3477 const colors = [{ 3478 front: '#FFFFFF', 3479 back: '#FFFFFF' 3480 }, 3481 { 3482 front: '#0F3D32', 3483 back: '#0F3D32' 3484 }, 3485 { 3486 front: '#FFFFFF', 3487 back: '#FFFFFF' 3488 }, 3489 { 3490 front: '#0F3D32', 3491 back: '#0F3D32' 3492 }, 3493 { 3494 front: '#F51679', 3495 back: '#F51679' 3496 }, 3497 { 3498 front: '#FFFFFF', 3499 back: '#FFFFFF' 3500 }, 3501 ]; 3502 3503 // ----------------------------------------------------------- 3504 3505 setupCanvas(); 3506 /* 3507 addConfetti({ 3508 clientX: container.w * 0.5, 3509 clientY: container.h * 0.5 3510 }); 3511 */ 3512 updateConfetti(); 3513 3514 //window.addEventListener('click', addConfetti); 3515 window.addEventListener('resize', () => { 3516 setupCanvas(); 3517 hideConfetti(); 3518 }); 3519 3520 // ----------------------------------------------------------- 3521 3522 // Confetti constructor 3523 function Conf() { 3524 this.randomModifier = rand(-1, 1); 3525 this.colorPair = colors[Math.floor(rand(0, colors.length))]; 3526 this.dimensions = { 3527 x: rand(confettiParams.size.x[0], confettiParams.size.x[1]), 3528 y: rand(confettiParams.size.y[0], confettiParams.size.y[1]), 3529 }; 3530 this.position = { 3531 x: clickPosition[0], 3532 y: clickPosition[1] 3533 }; 3534 this.rotation = rand(0, 2 * Math.PI); 3535 this.scale = { 3536 x: 1, 3537 y: 1 3538 }; 3539 this.velocity = { 3540 x: rand(-confettiParams.initSpeed, confettiParams.initSpeed) * 0.4, 3541 y: rand(-confettiParams.initSpeed, confettiParams.initSpeed) 3542 }; 3543 this.flipSpeed = rand(0.2, 1.5) * confettiParams.flipSpeed; 3544 3545 if (this.position.y <= container.h) { 3546 this.velocity.y = -Math.abs(this.velocity.y); 3547 } 3548 3549 this.terminalVelocity = rand(1, 1.5) * confettiParams.terminalVelocity; 3550 3551 this.update = function() { 3552 this.velocity.x *= 0.98; 3553 this.position.x += this.velocity.x; 3554 3555 this.velocity.y += (this.randomModifier * confettiParams.drag); 3556 this.velocity.y += confettiParams.gravity; 3557 this.velocity.y = Math.min(this.velocity.y, this.terminalVelocity); 3558 this.position.y += this.velocity.y; 3559 3560 this.scale.y = Math.cos((this.position.y + this.randomModifier) * this.flipSpeed); 3561 this.color = this.scale.y > 0 ? this.colorPair.front : this.colorPair.back; 3562 } 3563 } 3564 3565 function updateConfetti() { 3566 confettiCtx.clearRect(0, 0, container.w, container.h); 3567 3568 confettiElements.forEach((c) => { 3569 c.update(); 3570 confettiCtx.translate(c.position.x, c.position.y); 3571 confettiCtx.rotate(c.rotation); 3572 const width = (c.dimensions.x * c.scale.x); 3573 const height = (c.dimensions.y * c.scale.y); 3574 confettiCtx.fillStyle = c.color; 3575 confettiCtx.fillRect(-0.5 * width, -0.5 * height, width, height); 3576 confettiCtx.setTransform(1, 0, 0, 1, 0, 0) 3577 }); 3578 3579 confettiElements.forEach((c, idx) => { 3580 if (c.position.y > container.h || 3581 c.position.x < -0.5 * container.x || 3582 c.position.x > 1.5 * container.x) { 3583 confettiElements.splice(idx, 1) 3584 } 3585 }); 3586 window.requestAnimationFrame(updateConfetti); 3587 } 3588 3589 function setupCanvas() { 3590 container = { 3591 w: window.innerWidth, 3592 h: window.innerHeight 3593 }; 3594 confetti.width = container.w; 3595 confetti.height = container.h; 3596 3597 //console.log(container); 3598 } 3599 3600 function addConfetti(e) { 3601 //var centerX = window.innerWidth / 2; 3602 //var centerY = window.innerHeight / 2; 3603 3604 var centerX = window.innerWidth; 3605 var centerY = window.innerHeight; 3606 3607 //clickPosition = [ e.clientX, e.clientY ]; 3608 clickPosition = [centerX, centerY]; 3609 for (let i = 0; i < confettiParams.number; i++) { 3610 confettiElements.push(new Conf()) 3611 } 3612 } 3613 3614 function hideConfetti() { 3615 confettiElements = []; 3616 window.cancelAnimationFrame(updateConfetti) 3617 } 3618</script>
3618 3619 3620 3621</body> 3622 3623</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.