1<!DOCTYPE html> 2<html data-wf-page="685993b84dfb0c8223ab8730" data-wf-site="685993b84dfb0c8223ab8731" lang="en"> 3<head> 4 <!-- TEMPORARILY DISABLED: Termly CMP resource-blocker (revert by removing this comment line and the matching END marker below) --> 5 <!-- 6
6<script src="https://app.termly.io/resource-blocker/86fda7d3-620c-4f15-ae52-783a81f6278c"></script>
6 7 --> 8 <!-- END TEMPORARILY DISABLED --> 9 10 <!-- Google Tag Manager --> 11
11<script>
vendor: 335 bytes, lines 11-15
11(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 12 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 13 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 14 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 15 })(window,document,'script','dataLayer','
15GTM-5HPGQ6BV
vendor: 3 bytes, line 15
15');
15</script>
15 16 <!-- End Google Tag Manager --> 17 18 <!-- Loud Echo Tracing --> 19
19<script type="text/javascript" src="https://cs.loudecho.ai/tracing/0135257900050009?traffic=web&gdpr_consent={gdpr_consent}&coppa={coppa}" async></script>
19 20 21 <meta charset="utf-8"> 22 <title>LoudEcho - Publishers</title> 23 <meta name="viewport" content="width=device-width, initial-scale=1"> 24 <link href="css/normalize.css" rel="stylesheet" type="text/css"> 25 <link href="css/webflow.css" rel="stylesheet" type="text/css"> 26 <link href="css/teza-site-7c043be9c4a9ef118dd2e4c06aee9.webflow.css" rel="stylesheet" type="text/css"> 27 <link href="https://fonts.googleapis.com" rel="preconnect"> 28 <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"> 29
29<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
29 30
30<script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Droid Serif:400,400italic,700,700italic","Taviraj:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic","EB Garamond:regular,500,600,700,800,italic,500italic,600italic,700italic,800italic","Pixelify Sans:regular,500,600,700","Space Grotesk:300,regular,500,600,700","Space Mono:regular,italic,700,700italic","Instrument Sans:regular,500,600,700,italic,500italic,600italic,700italic","Instrument Serif:regular,italic","DM Sans:100,200,300,regular,500,600,700,800,900"] }});</script>
30 31
31<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
31 32 <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon"> 33 <link href="images/webclip.png" rel="apple-touch-icon"> 34 <style> 35 .section.page { 36 font-family: 'Instrument Serif', serif !important; 37 min-height: calc(100vh - 120px); /* Account for navbar height */ 38 margin-bottom: 0; 39 } 40 .section.page p, .section.page li, .section.page td, .section.page th { 41 font-family: 'Instrument Serif', serif !important; 42 line-height: 1.6; 43 } 44 .section.page h1, .section.page h2, .section.page h3 { 45 font-family: 'Instrument Serif', serif !important; 46 } 47 48 /* Responsive design */ 49 @media screen and (max-width: 768px) { 50 .section.page { 51 max-width: 95%; 52 margin: 40px auto 20px auto; 53 padding: 20px 16px; 54 min-height: calc(100vh - 100px); 55 } 56 .section.page h1 { 57 font-size: 2.5em !important; 58 line-height: 1.2 !important; 59 } 60 .section.page h2 { 61 font-size: 1.5em; 62 } 63 .section.page h3 { 64 font-size: 1.2em; 65 } 66 .section.page p { 67 font-size: 1.2em !important; 68 line-height: 1.5 !important; 69 } 70 } 71 72 @media screen and (max-width: 480px) { 73 .section.page { 74 max-width: 98%; 75 margin: 30px auto 15px auto; 76 padding: 15px 12px; 77 min-height: calc(100vh - 80px); 78 } 79 .section.page h1 { 80 font-size: 1.8em !important; 81 line-height: 1.2 !important; 82 } 83 .section.page h2 { 84 font-size: 1.3em; 85 } 86 .section.page h3 { 87 font-size: 1.1em; 88 } 89 .section.page p { 90 font-size: 1.1em !important; 91 line-height: 1.4 !important; 92 } 93 } 94 95 /* Ensure page ends where content ends */ 96 body { 97 margin: 0; 98 padding: 0; 99 min-height: 100vh; 100 } 101 102 /* Remove any default margins/padding */ 103 .section.page { 104 margin-bottom: 0; 105 padding-bottom: 40px; 106 } 107 108 /* Stepper circles: white fill, darkest purple text */ 109 .feature-navigation-serial { 110 background-color: #fff !important; 111 border: 1px solid #ffffff1a !important; 112 color: #7c3aed !important; 113 } 114 115 /* Default desktop hero text display */ 116 .desktop-hero { 117 display: block !important; 118 } 119 120 .mobile-hero { 121 display: none !important; 122 } 123 124 /* Mobile hero text display */ 125 @media screen and (max-width: 480px) { 126 .desktop-hero { 127 display: none !important; 128 } 129 130 .mobile-hero { 131 display: block !important; 132 } 133 134 /* Mobile hero subtitle smaller */ 135 .body.dm { 136 font-size: 1rem !important; 137 line-height: 1.5 !important; 138 } 139 } 140 141 /* Loading spinner animation */ 142 @keyframes spin { 143 0% { transform: rotate(0deg); } 144 100% { transform: rotate(360deg); } 145 } 146 147 /* Pop out animation */ 148 @keyframes popOut { 149 0% { 150 transform: scale(1) translateY(0); 151 box-shadow: 0 4px 20px rgba(0,0,0,0.1); 152 } 153 100% { 154 transform: scale(1.15) translateY(-20px); 155 box-shadow: 0 30px 60px rgba(0,0,0,0.4); 156 } 157 } 158 159 /* Pop back in animation */ 160 @keyframes popIn { 161 0% { 162 transform: scale(1.15) translateY(-20px); 163 box-shadow: 0 30px 60px rgba(0,0,0,0.4); 164 } 165 100% { 166 transform: scale(1) translateY(0); 167 box-shadow: 0 4px 20px rgba(0,0,0,0.1); 168 } 169 } 170 171 /* Confetti animation */ 172 @keyframes confettiFall { 173 0% { 174 transform: translateY(0) translateX(0) rotate(0deg) scale(1); 175 opacity: 1; 176 } 177 100% { 178 transform: translateY(150px) translateX(var(--drift, 0px)) rotate(720deg) scale(0.5); 179 opacity: 0; 180 } 181 } 182 183 .confetti-piece { 184 position: absolute; 185 pointer-events: none; 186 } 187 188 #ad-container { 189 transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease; 190 } 191 192 #ad-container.popped-out { 193 transform: scale(1.15) translateY(-20px); 194 box-shadow: 0 30px 60px rgba(0,0,0,0.4); 195 z-index: 100; 196 } 197 198 #ad-container.popped-in { 199 transform: scale(1) translateY(0); 200 box-shadow: 0 4px 20px rgba(0,0,0,0.1); 201 } 202 203 /* Mobile menu styles */ 204 .mobile-nav { 205 display: none; 206 } 207 208 #mobile-menu-toggle { 209 display: none; 210 } 211 212 @media screen and (max-width: 1100px) { 213 .desktop-nav { 214 display: none !important; 215 } 216 217 .mobile-nav { 218 display: flex !important; 219 align-items: center; 220 } 221 222 #mobile-menu-toggle { 223 display: flex !important; 224 visibility: visible !important; 225 opacity: 1 !important; 226 } 227 } 228 229 @media screen and (min-width: 1101px) { 230 .desktop-nav { 231 display: flex !important; 232 } 233 234 .mobile-nav { 235 display: none !important; 236 } 237 238 #mobile-menu-toggle { 239 display: none !important; 240 } 241 242 #mobile-menu { 243 display: none !important; 244 } 245 } 246 247 /* Mobile menu positioning */ 248 #mobile-menu { 249 display: none; 250 position: fixed; 251 top: 60px; 252 left: 0; 253 right: 0; 254 background: #fff; 255 box-shadow: 0 4px 12px rgba(0,0,0,0.1); 256 z-index: 1000; 257 padding: 20px; 258 transform: translateY(-100%); 259 opacity: 0; 260 transition: transform 0.3s ease, opacity 0.3s ease; 261 max-height: calc(100vh - 60px); 262 overflow-y: auto; 263 } 264 265 /* Mobile menu open state */ 266 #mobile-menu.menu-open { 267 display: block !important; 268 transform: translateY(0) !important; 269 opacity: 1 !important; 270 } 271 272 /* Hamburger icon animation */ 273 #mobile-menu-toggle.menu-open .menu-line:nth-child(1) { 274 transform: rotate(45deg) translate(6px, 6px); 275 } 276 277 #mobile-menu-toggle.menu-open .menu-line:nth-child(2) { 278 opacity: 0; 279 } 280 281 #mobile-menu-toggle.menu-open .menu-line:nth-child(3) { 282 transform: rotate(-45deg) translate(6px, -6px); 283 } 284 285 /* Article content - mobile news page responsive styles */ 286 #article-content, 287 .article-content-grid { 288 transition: all 0.3s ease; 289 } 290 291 /* Tablet breakpoint - stack vertically */ 292 @media screen and (max-width: 991px) { 293 #article-content, 294 .article-content-grid { 295 display: flex !important; 296 flex-direction: column !important; 297 grid-template-columns: none !important; 298 gap: 24px !important; 299 } 300 301 .article-headline { 302 font-size: 36px !important; 303 line-height: 1.15 !important; 304 } 305 306 .article-ad-sidebar { 307 width: 100% !important; 308 max-width: 320px !important; 309 margin: 0 auto !important; 310 } 311 } 312 313 /* Mobile breakpoint - true mobile news layout */ 314 @media screen and (max-width: 768px) { 315 /* Website mockup container */ 316 .website-mockup { 317 margin: 40px 16px !important; 318 max-width: calc(100% - 32px) !important; 319 } 320 321 /* Browser chrome - smaller padding */ 322 .browser-chrome {
323 padding: 10px 12px !important; 324 } 325 326 /* Content area - tighter padding */ 327 .browser-content { 328 padding: 20px 16px !important; 329 min-height: 400px !important; 330 } 331 332 /* News header - mobile style */ 333 .news-header { 334 margin-bottom: 16px !important; 335 padding-bottom: 12px !important; 336 flex-wrap: wrap !important; 337 } 338 339 .news-title { 340 font-size: 20px !important; 341 } 342 343 #article-content, 344 .article-content-grid { 345 display: flex !important; 346 flex-direction: column-reverse !important; 347 grid-template-columns: none !important; 348 gap: 20px !important; 349 } 350 351 /* Ad goes above article on mobile (using column-reverse makes ad appear first visually) */ 352 .article-ad-sidebar { 353 width: 100% !important; 354 max-width: 100% !important; 355 margin-bottom: 8px !important; 356 display: flex !important; 357 flex-direction: column !important; 358 align-items: center !important; 359 } 360 361 /* Ad images - mobile centered format */ 362 .article-ad-sidebar img { 363 max-width: 300px !important; 364 width: 100% !important; 365 margin: 0 auto !important; 366 display: block !important; 367 } 368 369 /* Loader component on mobile */ 370 #loader-component { 371 justify-content: center !important; 372 width: 100% !important; 373 } 374 375 /* Article title - mobile news headline style */ 376 .article-headline { 377 font-size: 28px !important; 378 line-height: 1.2 !important; 379 margin-bottom: 16px !important; 380 font-weight: 400 !important; 381 } 382 383 /* Placeholder text lines - tighter spacing */ 384 .article-placeholder-text { 385 margin-top: 16px !important; 386 } 387 388 .placeholder-line { 389 height: 10px !important; 390 margin-bottom: 8px !important; 391 } 392 393 .placeholder-line.paragraph-break { 394 margin-bottom: 16px !important; 395 } 396 } 397 398 /* Extra small mobile - ultra compact mobile news app style */ 399 @media screen and (max-width: 480px) { 400 /* Even tighter browser mockup */ 401 .website-mockup { 402 margin: 20px 8px !important; 403 max-width: calc(100% - 16px) !important; 404 } 405 406 .browser-chrome { 407 padding: 8px 10px !important; 408 border-radius: 8px 8px 0 0 !important; 409 } 410 411 /* Browser dots - smaller */ 412 .browser-dot { 413 width: 8px !important; 414 height: 8px !important; 415 } 416 417 .browser-dot > div { 418 border-radius: 50% !important; 419 } 420 421 /* URL bar - compact for small screens */ 422 .url-bar { 423 padding: 2px 12px !important; 424 height: 26px !important; 425 } 426 427 .url-text { 428 font-size: 11px !important; 429 white-space: nowrap; 430 overflow: hidden; 431 text-overflow: ellipsis; 432 max-width: 150px; 433 display: inline-block; 434 } 435 436 .url-bar svg { 437 width: 12px !important; 438 height: 12px !important; 439 } 440 441 /* Content area */ 442 .browser-content { 443 padding: 16px 12px !important; 444 border-radius: 0 0 8px 8px !important; 445 min-height: 350px !important; 446 } 447 448 /* News header - compact */ 449 .news-title { 450 font-size: 16px !important; 451 } 452 453 #article-content, 454 .article-content-grid { 455 gap: 16px !important; 456 } 457 458 /* Mobile ad - responsive banner style like real mobile news */ 459 .article-ad-sidebar img { 460 max-width: 100% !important; 461 border-radius: 6px !important; 462 } 463 464 /* Headline - proper mobile news app size */ 465 .article-headline { 466 font-size: 22px !important; 467 line-height: 1.25 !important; 468 letter-spacing: -0.01em !important; 469 margin-bottom: 12px !important; 470 } 471 472 /* Placeholder lines - mobile article paragraph style */ 473 .placeholder-line { 474 height: 8px !important; 475 margin-bottom: 6px !important; 476 border-radius: 4px !important; 477 } 478 479 .placeholder-line.paragraph-break { 480 margin-bottom: 14px !important; 481 } 482 } 483 484 /* Ultra small screens (iPhone SE, older devices) */ 485 @media screen and (max-width: 375px) { 486 .website-mockup { 487 margin: 16px 4px !important; 488 max-width: calc(100% - 8px) !important; 489 } 490 491 .browser-content { 492 padding: 12px 10px !important; 493 } 494 495 .article-headline { 496 font-size: 20px !important; 497 line-height: 1.2 !important; 498 } 499 500 .news-title { 501 font-size: 14px !important; 502 } 503 } 504 505 /* Toggle button responsive - prevent logo cutoff on mobile */ 506 @media screen and (max-width: 480px) { 507 #ad-toggle-container > div { 508 flex-wrap: wrap !important; 509 justify-content: center !important; 510 gap: 4px !important; 511 } 512 513 #toggle-before, 514 #toggle-after { 515 padding: 8px 12px !important; 516 font-size: 12px !important; 517 gap: 4px !important; 518 } 519 520 #toggle-before img, 521 #toggle-after img { 522 height: 12px !important; 523 } 524 } 525 526 @media screen and (max-width: 360px) { 527 #toggle-before, 528 #toggle-after { 529 padding: 6px 10px !important; 530 font-size: 11px !important; 531 } 532 533 #toggle-before img, 534 #toggle-after img { 535 height: 10px !important; 536 } 537 } 538 539 /* Force body to allow full-width elements */ 540 html, body { 541 overflow-x: clip !important; 542 max-width: 100vw !important; 543 } 544 545 /* Footer styling */ 546 .section-footer { 547 width: 100vw !important; 548 margin-left: calc(-50vw + 50%); 549 box-sizing: border-box; 550 overflow: hidden; 551 position: relative; 552 padding-top: 40px !important; 553 } 554 555 /* Ensure footer content is properly contained */ 556 .footer-content { 557 max-width: 100%; 558 margin: 0 auto; 559 padding: 40px 20px 20px 20px; 560 display: flex; 561 flex-direction: column; 562 justify-content: flex-start !important; 563 position: relative; 564 min-height: 800px; 565 row-gap: clamp(18px, 3vw, 36px) !important; 566 } 567 568 /* Footer CTA + spacing */ 569 .bottom, .bottom-2 { 570 position: relative; 571 z-index: 2; 572 } 573 574 .content-style-8 .heading-6 { 575 position: relative; 576 z-index: 1; 577 } 578 579 .content-style-8 .heading-6 img { 580 display: block; 581 position: relative; 582 z-index: 1; 583 } 584 585 .content-style-8 { 586 position: relative; 587 row-gap: clamp(14px, 2vw, 24px) !important; 588 } 589 590 .content-style-8 .heading-5 { 591 row-gap: clamp(10px, 1.5vw, 18px) !important; 592 } 593 594 .content-style-8 .form-block-2._3 { 595 margin: 0 !important; 596 } 597 598 .content-style-8 .form-block-2._3 .button-alternative.smalll.position.new { 599 float: none !important; 600 position: static !important; 601 top: auto !important; 602 right: auto !important; 603 margin: 0 !important; 604 } 605 606 .content-style-8 .bottom-2 { 607 margin-top: 0 !important; 608 } 609 610 @media screen and (min-width: 768px) { 611 .content-style-8 .form-block-2._3 { 612 margin: 16px 0 0; 613 } 614 615 .content-style-8 .form-block-2._3 .button-alternative.smalll.position.new { 616 float: none; 617 top: 0; 618 right: auto; 619 } 620 621 .footer-content > .bottom { 622 position: relative; 623 top: auto; 624 left: auto; 625 right: auto; 626 margin-top: 20px; 627 z-index: 3; 628 } 629 } 630 631 .button-alternative.new { 632 position: relative; 633 z-index: 2; 634 } 635 636 .footer-content>.bottom .text-23 { 637 color: #fff !important; 638 font-size: 16px !important; 639 font-weight: 700 !important; 640 line-height: 1.2 !important; 641 } 642 643 /* Footer background image only */ 644 .footer-content { 645 background-image: url("images/footer-retro-cityscape.png") !important; 646 background-repeat: no-repeat !important; 647 background-position: center bottom !important; 648 background-size: cover !important; 649 } 650 651 /* Footer logo block */ 652 .footer-logo-svg { 653 display: block !important; 654 width: 100%; 655 object-fit: contain; 656 object-position: center center; 657 margin-top: 0; 658 margin-bottom: 0; 659 padding-bottom: 0; 660 } 661 662 .footer-logo-desktop { 663 margin-top: auto !important; 664 } 665 666 /* Footer mobile stacked logo */ 667 .footer-logo-mobile { 668 display: none !important; 669 } 670 671 @media screen and (max-width: 767px) { 672 .footer-logo-desktop { 673 display: none !important; 674 } 675 676 .footer-logo-mobile { 677 display: block !important; 678 width: calc(100% - 40px) !important; 679 max-width: none !important; 680 max-height: none !important; 681 height: auto !important; 682 margin: 0 20px !important; 683 padding: 0 !important; 684 box-sizing: border-box !important; 685 transform: scale(2.8) !important; 686 transform-origin: center center !important; 687 margin-top: 120px !important; 688 margin-bottom: 100px !important; 689 } 690 691 .footer-content { 692 overflow: hidden !important; 693 padding-bottom: 60px !important; 694 } 695 } 696 697 @media screen and (max-width: 400px) { 698 .footer-logo-mobile { 699 transform: scale(2.2) !important; 700 margin-top: 90px !important; 701 margin-bottom: 80px !important; 702 } 703 } 704 705 .heading-8 { 706 position: absolute !important; 707 bottom: 20px; 708 left: 0; 709 right: 0; 710 display: flex !important; 711 justify-content: center; 712 align-items: flex-end; 713 width: 100%; 714 overflow: hidden; 715 margin: 0; 716 padding: 0; 717 z-index: 1; 718 font-size: 0 !important; 719 -webkit-text-fill-color: transparent !important; 720 background-image: none !important; 721 -webkit-background-clip: unset !important; 722 background-clip: unset !important; 723 } 724 725 /* Responsive sizing - scales continuously from desktop */ 726 .footer-logo-svg {
727 max-height: min(26.8vw, 515px) !important; 728 } 729 730 .heading-8 { 731 height: calc(min(26.8vw, 515px) + 38px); 732 } 733 734 .footer-content { 735 min-height: calc(min(26.8vw, 515px) + 210px); 736 } 737 738 /* Mobile specific styles */ 739 @media screen and (max-width: 767px) { 740 .footer-content { 741 padding: 30px 16px 36px 16px; 742 row-gap: 16px !important; 743 } 744 745 .content-style-8 { 746 position: static !important; 747 row-gap: 14px !important; 748 } 749 750 .content-style-8 .heading-5 { 751 row-gap: 10px !important; 752 } 753 754 .content-style-8 .bottom-2 .text-24 { 755 color: #fff !important; 756 font-size: 16px !important; 757 font-weight: 700 !important; 758 line-height: 1.2 !important; 759 } 760 761 .content-style-8 .bottom-2 { 762 position: absolute !important; 763 left: 16px; 764 right: 16px; 765 bottom: 16px; 766 width: auto !important; 767 margin-top: 0 !important; 768 } 769 770 .bottom, .bottom-2 { 771 margin-top: 1px !important; 772 } 773 774 .button-alternative.new { 775 margin-top: 0px !important; 776 } 777 778 .text-23[href*="youtube"] { 779 pointer-events: auto !important; 780 cursor: pointer !important; 781 -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important; 782 touch-action: manipulation !important; 783 } 784 } 785 786 /* Publisher hero styles - soft purple-white text on gradient */ 787 #publisher-hero .heading-top, 788 #publisher-hero .body.dm { 789 color: #faf7ff !important; 790 } 791 792 /* Publisher hero button - soft white bg, purple text */ 793 #publisher-hero .button-alternative { 794 background: #faf7ff !important; 795 color: #7c3aed !important; 796 border-color: #faf7ff !important; 797 } 798 799 #publisher-hero .button-alternative:hover { 800 background: #f0ebfa !important; 801 } 802 803 /* Navbar hero mode - white text and logo */ 804 .navbar.hero-mode { 805 background: transparent !important; 806 backdrop-filter: none !important; 807 -webkit-backdrop-filter: none !important; 808 } 809 810 .navbar.hero-mode .block-navbar { 811 background: transparent !important; 812 } 813 814 .navbar.hero-mode .navbar-glass-effect, 815 .navbar.hero-mode .navbar-glass-shine { 816 opacity: 0 !important; 817 } 818 819 .navbar.hero-mode .link-2 { 820 color: #faf7ff !important; 821 } 822 823 .navbar.hero-mode .nav-divider { 824 background: rgba(250,247,255,0.3) !important; 825 } 826 827 .navbar.hero-mode .logo { 828 filter: brightness(0) invert(1) sepia(0.1) saturate(0.5); 829 } 830 831 .navbar.hero-mode .button-alternative { 832 background: #faf7ff !important; 833 color: #7c3aed !important; 834 border-color: #faf7ff !important; 835 } 836 837 .navbar.hero-mode .menu-line { 838 background: #faf7ff !important; 839 } 840 841 /* Smooth transition for navbar color changes */ 842 .navbar .link-2, 843 .navbar .logo, 844 .navbar .button-alternative, 845 .navbar .menu-line, 846 .navbar .nav-divider { 847 transition: all 0.3s ease; 848 } 849 850 /* How it works section - dark text for light background */ 851 #how-it-works .miniheading.light { 852 border-color: #141414; 853 } 854 #how-it-works .mini-header.light { 855 color: #141414; 856 } 857 #how-it-works .feature-navigation-serial { 858 color: #141414 !important; 859 background-color: #fff !important; 860 border: 1.5px solid #141414 !important; 861 } 862 #how-it-works .feature-navigation-title { 863 color: rgba(20, 20, 20, 0.5); 864 } 865 #how-it-works .feature-navigation-title.w--current { 866 color: #141414; 867 } 868 #how-it-works .core-feature-title { 869 color: #141414; 870 } 871 #how-it-works .core-feature-details { 872 color: #141414; 873 } 874 #how-it-works .core-feature-navigation-line { 875 background-color: rgba(20, 20, 20, 0.15); 876 } 877 #how-it-works .core-feature-inner-wrap.border { 878 border-bottom: none; 879 } 880 881 /* Publisher hero subtitle wider */ 882 #publisher-hero .block-top { 883 max-width: 1260px; 884 } 885 886 </style> 887</head> 888<body class="body-5"> 889 <!-- Google Tag Manager (noscript) -->
vendor: 70 bytes, lines 889-890
889 890 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
890GTM-5HPGQ6BV
vendor: 87 bytes, lines 890-892
890" 891 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 892
892<!-- End Google Tag Manager (noscript) --> 893 <div data-w-id="729e5c8a-9ee6-25ff-6b5d-7f9e60f0e8f4" data-animation="default" data-collapse="all" data-duration="1000" data-easing="ease-in-out-quint" data-easing2="ease-in-out-quint" role="banner" class="navbar w-nav"> 894 <div data-w-id="729e5c8a-9ee6-25ff-6b5d-7f9e60f0e8f5" class="block-navbar"> 895 <div class="nav"> 896 <a href="index.html" class="brand w-nav-brand"><div style="height: 16px;"></div><img src="images/loudecho-logo-1.png" loading="lazy" alt="" class="logo"></a> 897 </div> 898 <div class="nav desktop-nav"> 899 <div class="button-wrapper-3 _2"> 900 <a href="index.html#what-we-do" class="link-2 nav-scroll-link">What we do</a> 901 <a href="index.html#how-it-works" class="link-2 nav-scroll-link">How it works</a> 902 <a href="index.html#safety" class="link-2 nav-scroll-link">Safety</a> 903 <a href="index.html#faq-section" class="link-2 nav-scroll-link">FAQ's</a> 904 <span class="nav-divider" style="width:1px;height:16px;background:rgba(0,0,0,0.2);margin:0 -10px;"></span> 905 <a href="publisher.html" class="link-2">I'm a publisher</a> 906 <span class="nav-divider" style="width:1px;height:16px;background:rgba(0,0,0,0.2);margin:0 -10px;"></span> 907 <a href="https://www.notion.so/sepana/LoudEcho-Careers-2cdbd939416a810b9665c26a95c89356" target="_blank" class="link-2">Careers</a> 908 </div> 909 <div class="button-wrapper-3"> 910 <a href="#" class="button-alternative smalll w-button hs-cta-trigger-button hs-cta-trigger-button-204798812515">Get early access</a> 911 </div> 912 </div> 913 <!-- Mobile menu button --> 914 <div class="nav mobile-nav"> 915 <button id="mobile-menu-toggle" class="mobile-menu-toggle" aria-label="Toggle menu" style="background:none;border:none;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:40px;height:40px;"> 916 <span class="menu-line" style="width:24px;height:2.5px;background:#000;display:block;transition:all 0.3s ease;border-radius:2px;"></span> 917 <span class="menu-line" style="width:24px;height:2.5px;background:#000;display:block;transition:all 0.3s ease;border-radius:2px;"></span> 918 <span class="menu-line" style="width:24px;height:2.5px;background:#000;display:block;transition:all 0.3s ease;border-radius:2px;"></span> 919 </button> 920 </div> 921 </div> 922 <!-- Mobile dropdown menu --> 923 <div id="mobile-menu" class="mobile-menu"> 924 <div style="display:flex;flex-direction:column;gap:16px;"> 925 <a href="index.html" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">Home</a> 926 <a href="index.html#how-it-works" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">How it works</a> 927 <a href="index.html#safety" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">Safety</a> 928 <a href="index.html#faq-section" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">FAQ's</a> 929 <a href="publisher.html" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">I'm a publisher</a> 930 <a href="https://www.notion.so/sepana/LoudEcho-Careers-2cdbd939416a810b9665c26a95c89356" target="_blank" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">Careers</a> 931 <div style="margin-top:8px;width:fit-content;"> 932 <a href="#" class="button-alternative smalll w-button mobile-menu-link hs-cta-trigger-button hs-cta-trigger-button-204798812515" style="width:auto;">Request Access</a> 933 </div> 934 </div> 935 </div> 936 <div class="navbar-glass-effect"></div> 937 <div class="navbar-glass-shine"></div> 938 <div class="navbar-glass-filter w-embed"> 939 <svg style="display: none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 940 <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterunits="objectBoundingBox"> 941 <feturbulence type="fractalNoise" basefrequency="0.015 0.015" numoctaves="1" seed="5" result="turbulence"> 942 <!-- Seeds: 14, 17, --> 943 <fecomponenttransfer in="turbulence" result="mapped"> 944 <fefuncr type="gamma" amplitude="1" exponent="10" offset="0.5"> 945 <fefuncg type="gamma" amplitude="0" exponent="1" offset="0"> 946 <fefuncb type="gamma" amplitude="0" exponent="1" offset="0.5"> 947 </fefuncb></fefuncg></fefuncr></fecomponenttransfer> 948 <fegaussianblur in="turbulence" stddeviation="3" result="softMap"> 949 <fespecularlighting in="softMap" surfacescale="5" specularconstant="1" specularexponent="100" lighting-color="white" result="specLight"> 950 <fepointlight x="-200" y="-200" z="300"> 951 </fepointlight></fespecularlighting> 952 <fecomposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage"> 953 <fedisplacementmap in="SourceGraphic" in2="softMap" scale="60" xchannelselector="R" ychannelselector="G"> 954 </fedisplacementmap></fecomposite></fegaussianblur></feturbulence></filter> 955 </svg></div> 956 </div> 957 <div class="section-top" id="publisher-hero" style="background:linear-gradient(180deg, rgba(124, 58, 237, 1) 0%, rgba(216, 180, 254, 1) 45%, rgba(213, 202, 227, 1) 90%, rgba(254, 252, 245, 1) 100%);"> 958 <div class="block-top"> 959 <h1 data-w-id="dca1dfe7-4c1e-71f2-bf06-4741814af925" style="opacity:0;-webkit-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="heading-top">
960 <span class="desktop-hero">Fresh Ads. Higher CPMs. Real Results.</span> 961 <span class="mobile-hero">Fresh Ads. Higher CPMs. Real Results.</span> 962 </h1> 963 <h1 data-w-id="6df8f0bd-6335-b863-17a0-a2a5acf76203" style="opacity:0;-webkit-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="body dm" style="max-width:1260px;width:100%;">Audiences are tired of seeing the same stale banners everywhere. LoudEcho fixes that. Every impression gets a fresh, brand-safe creative built in millisecondsâso your readers stay engaged and your CPMs climb.</h1> 964 <div class="form-block-2"> 965 <div style="height: 60px;"></div> 966 <a href="#" class="button-alternative smalll position new w-button hs-cta-trigger-button hs-cta-trigger-button-204798812515">Get early access</a> 967 </div> 968 </div> 969 970 <!-- Website mockup section from Figma --> 971 <div class="website-mockup" style="margin:12px auto;max-width:1100px;box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.15);border-radius:12px;"> 972 <div class="browser-chrome" style="position:relative;background:#0c0c0c;border-radius:12px 12px 0 0;padding:16px 20px;display:flex;align-items:center;gap:12px;"> 973 <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.1);border-radius:12px 12px 0 0;pointer-events:none;"></div> 974 <div class="browser-dots" style="position:relative;display:flex;gap:8px;"> 975 <div class="browser-dot" style="position:relative;width:12px;height:12px;border-radius:50%;background:#0c0c0c;"><div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.16);border-radius:50%;"></div></div> 976 <div class="browser-dot" style="position:relative;width:12px;height:12px;border-radius:50%;background:#0c0c0c;"><div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.16);border-radius:50%;"></div></div> 977 <div class="browser-dot" style="position:relative;width:12px;height:12px;border-radius:50%;background:#0c0c0c;"><div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.16);border-radius:50%;"></div></div> 978 </div> 979 <div class="url-bar-container" style="position:relative;flex:1;max-width:810px;margin:0 auto;"> 980 </div> 981 </div> 982 983 <div class="browser-content" style="background-color:rgba(255, 255, 255, 1);border:1px solid #e5e5e5;border-top:none;border-radius:0 0 12px 12px;padding:40px;min-height:600px;"> 984 <!-- News website header --> 985 <div class="news-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #202124;"> 986 <div style="display:flex;align-items:center;gap:20px;"> 987 <h2 class="news-title" style="font-family:'Playfair Display',serif;font-size:32px;font-weight:700;margin:0;color:#000;">The NEWS<span style="font-size:16px;vertical-align:super;">*</span></h2> 988 989 </div> 990 </div> 991 992 <div id="article-content" class="article-content-grid" style="display:grid;grid-template-columns:1fr 320px;gap:40px;"> 993 <!-- Article content --> 994 <div class="article-main"> 995 <h1 class="article-headline" style="color:#141414;font-family:'Instrument Serif',serif;font-size:52.579px;font-style:normal;font-weight:400;line-height:normal;margin:0 0 20px 0;">NASA Prepares for 3I/Atlas 2026 Exit From Solar System</h1> 996 997 <!-- Placeholder text lines --> 998 <div class="article-placeholder-text" style="margin-top:30px;"> 999 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:100%;"></div> 1000 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:95%;"></div> 1001 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:98%;"></div> 1002 <div class="placeholder-line paragraph-break" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:20px;width:60%;"></div> 1003 1004 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:90%;"></div> 1005 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:100%;"></div> 1006 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:92%;"></div> 1007 <div class="placeholder-line paragraph-break" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:20px;width:88%;"></div> 1008 1009 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:55%;"></div> 1010 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:50%;"></div> 1011 1012 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:100%;"></div> 1013 <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:96%;"></div> 1014 </div> 1015 </div> 1016 1017 <!-- Ad sidebar --> 1018 <div class="article-ad-sidebar" style="position:relative;"> 1019 <!-- Ad container with overlay --> 1020 <div id="ad-container" style="position:relative;border-radius:8px;overflow:visible;"> 1021 <!-- Dog Blue Ad (before) --> 1022 <img id="dog-blue-ad" src="images/Dog Blue Ad.jpg" loading="lazy" alt="Dog Blue Ad" style="width:100%;height:auto;display:block;border-radius:8px;transition:opacity 0.6s ease-in-out;"> 1023 <!-- Dog Space Ad (after - fades in) --> 1024 <img id="dog-space-ad" src="images/Dog Space Ad.png" loading="lazy" alt="Dog Space Ad" style="position:absolute;top:0;left:0;width:100%;height:auto;display:block;opacity:0;border-radius:8px;transition:opacity 0.6s ease-in-out;"> 1025 1026 <!-- Loading overlay (hidden initially) - darker for better contrast --> 1027 <div id="loading-overlay" style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity 0.5s ease-in-out;border-radius:8px;"> 1028 <div id="spinner-container" style="position:relative;"> 1029 <div id="loading-spinner" class="loading-spinner" style="width:48px;height:48px;border:4px solid rgba(255,255,255,0.2);border-top:4px solid #fff;border-radius:50%;animation:spin 0.8s linear infinite;transition:opacity 0.4s ease-in-out, transform 0.4s ease-in-out;"></div> 1030 </div> 1031 </div> 1032 1033 <!-- Confetti container --> 1034 <div id="confetti-container" style="position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:visible;border-radius:8px;"></div> 1035 </div> 1036 1037 <!-- Toggle button (hidden initially) - without/with LoudEcho --> 1038 <div id="ad-toggle-container" style="visibility:hidden;margin-top:12px;opacity:0;transition:opacity 0.5s ease-in-out;text-align:center;"> 1039 <div style="display:inline-flex;background:#f1f2f9;border-radius:50px;padding:3px;gap:2px;"> 1040 <button id="toggle-before" style="padding:10px 16px;border:none;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease;background:transparent;color:#666;display:flex;align-items:center;gap:6px;">
1041 <span>without</span> 1042 <img src="images/loudecho-logo-1.png" alt="LoudEcho" style="height:16px;width:auto;opacity:0.6;transition:all 0.3s ease;"> 1043 </button> 1044 <button id="toggle-after" style="padding:10px 16px;border:none;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease;background:#7c3aed;color:#fff;display:flex;align-items:center;gap:6px;"> 1045 <span>with</span> 1046 <img src="images/loudecho-logo-1.png" alt="LoudEcho" style="height:16px;width:auto;filter:brightness(0) invert(1);transition:all 0.3s ease;"> 1047 </button> 1048 </div> 1049 </div> 1050 </div> 1051 </div> 1052 </div> 1053 </div> 1054 1055 </div> 1056 1057 <!-- How it works section copied from main site --> 1058 <section class="section-5 core-features-v2" id="how-it-works" style="background-color:rgba(254, 252, 245, 1);padding-bottom:40px;"> 1059 <div class="miniheading light"> 1060 <div class="mini-header light">Why partner with us</div> 1061 </div> 1062 <div class="container-8"> 1063 <div class="core-features-v2-flex-wrap"> 1064 <div class="core-features-v2-left-wrap"> 1065 <div class="core-feature-navigations-wrap"> 1066 <div class="core-feature-navigation-line"></div> 1067 <div class="single-core-feature-navigation"> 1068 <div class="feature-navigation-serial">01</div> 1069 <a href="#Step1" class="feature-navigation-title">Exclusive New Budgets</a> 1070 </div> 1071 <div class="single-core-feature-navigation"> 1072 <div class="feature-navigation-serial">02</div> 1073 <a href="#Step2" class="feature-navigation-title">Goodbye Ad Fatigue</a> 1074 </div> 1075 <div class="single-core-feature-navigation"> 1076 <div class="feature-navigation-serial">03</div> 1077 <a href="#Step3" class="feature-navigation-title">Adaptive Brand Safety</a> 1078 </div> 1079 <div class="single-core-feature-navigation"> 1080 <div class="feature-navigation-serial">04</div> 1081 <a href="#Step4" class="feature-navigation-title">Boost Direct Sales</a> 1082 </div> 1083 <div class="single-core-feature-navigation"> 1084 <div class="feature-navigation-serial">05</div> 1085 <a href="#Step5" class="feature-navigation-title">Integrate Your Way</a> 1086 </div> 1087 </div> 1088 </div> 1089 <div class="core-features-v2-right-wrap"> 1090 <div id="Step1" class="single-core-feature-wrap"> 1091 <div class="core-feature-inner-wrap border"> 1092 <div class="core-feature-content-wrap"> 1093 <div class="core-feature-details-wrap"> 1094 <h3 class="core-feature-title">Exclusive New Budgets</h3> 1095 <p class="core-feature-details">LoudEcho partners with next-gen buyers seeking smarter impressions. Delivering 100% new, proprietary ad budgets unavailable on other DSPs, exchanges, or monetization platforms.</p> 1096 </div> 1097 <div class="core-feature-img-wrap"> 1098 <img alt="Budget Chart" src="images/Budgets%20Chart.png" loading="lazy" class="core-feature-image-2" style="width:100%;height:auto;"> 1099 </div> 1100 </div> 1101 </div> 1102 </div> 1103 <div id="Step2" class="single-core-feature-wrap"> 1104 <div class="core-feature-inner-wrap border"> 1105 <div class="core-feature-content-wrap"> 1106 <div class="core-feature-details-wrap"> 1107 <h3 class="core-feature-title">Goodbye Ad Fatigue</h3> 1108 <p class="core-feature-details">Dynamic, personalized and freshly created ads adapt to context and sentimentâslashing banner blindness and driving higher yields for your inventory.</p> 1109 </div> 1110 </div> 1111 </div> 1112 </div> 1113 <div id="Step3" class="single-core-feature-wrap"> 1114 <div class="core-feature-inner-wrap border"> 1115 <div class="core-feature-content-wrap"> 1116 <div class="core-feature-details-wrap"> 1117 <h3 class="core-feature-title">Adaptive Brand Safety</h3> 1118 <p class="core-feature-details">LoudEcho reads full-page meaning to eliminate brand safety false positives and unlock impressions others wrongly blockâso you keep more supply and revenue.</p> 1119 </div> 1120 <div class="core-feature-img-wrap"> 1121 <img loading="lazy" src="images/allowlist.png" alt="Brand Safety Allowlist" class="ipad-shape"> 1122 </div> 1123 </div> 1124 </div> 1125 </div> 1126 <div id="Step4" class="single-core-feature-wrap"> 1127 <div class="core-feature-inner-wrap"> 1128 <div class="core-feature-content-wrap _1"> 1129 <div class="core-feature-details-wrap"> 1130 <h3 class="core-feature-title">Boost Direct Sales</h3> 1131 <p class="core-feature-details">Apply LoudEcho's tech to your own direct campaignsâunlocking up to 3X performance gains and new premium packages for your sales team.</p> 1132 </div> 1133 <div class="core-feature-img-wrap _1"> 1134 <img loading="lazy" src="images/sales_graph.png" alt="" class="ipad-shape"> 1135 </div> 1136 </div> 1137 </div> 1138 </div> 1139 <div id="Step5" class="single-core-feature-wrap"> 1140 <div class="core-feature-inner-wrap"> 1141 <div class="core-feature-content-wrap _1"> 1142 <div class="core-feature-details-wrap"> 1143 <h3 class="core-feature-title">Integrate Your Way</h3> 1144 <p class="core-feature-details">Seamless setup via Prebid adapter (JS or server-side, no Ads.txt required) or full OpenRTB connectionâso you can plug in without reworking your stack.</p> 1145 </div> 1146 <div class="core-feature-img-wrap _1"> 1147 <img src="images/Prebid.png" loading="lazy" alt="Prebid Integration" class="ipad-shape" style="max-width:60%;height:auto;"> 1148 </div> 1149 </div> 1150 </div> 1151 </div> 1152 </div> 1153 </div> 1154 </div> 1155 </section> 1156 1157 <!-- FAQ Section --> 1158 <div id="faq-section" style="padding:40px 40px 100px 40px;"> 1159 <div style="max-width:1100px;margin:0 auto;"> 1160 <!-- FAQ Badge and Title --> 1161 <div style="text-align:center;margin-bottom:60px;"> 1162 <div class="miniheading" style="display:inline-block;margin-bottom:20px;"> 1163 <div class="mini-header">FAQ</div> 1164 </div> 1165 <h2 style="font-family:'Instrument Serif',serif;font-size:64px;font-weight:400;color:#222;margin:0;line-height:1.2;">Any Questions?</h2> 1166 </div> 1167 1168 <!-- FAQ Items Single Column Container --> 1169 <div id="faq-container" style="display:flex;flex-direction:column;gap:16px;max-width:800px;margin:0 auto;"></div> 1170 </div> 1171 </div> 1172 1173
1173<script> 1174 // FAQ Data 1175 const faqQuestions = [ 1176 { 1177 question: 'Is LoudEcho a DSP, Ad Server, DCO, or a creative suite?', 1178 answer: 'LoudEcho is an all-in-one AI ad platform. It functions as a full blown DSP for programmatic buying, an AI-native dynamic creative engine that generates a unique ad per impression from scratch, and a creative intelligence suite that enforces brand guardrails. It also serves as an ad-serving layer, rendering and delivering final creatives while integrating with your existing verification stack.' 1179 }, 1180 { 1181 question: 'How does LoudEcho prevent AI "hallucinations" and brand damage?', 1182 answer: 'LoudEcho prevents AI "hallucinations" by generating ads only within strict brand and compliance guardrails, and only on pages that pass contextual suitability checks. Every ad is re-validated before serving for tone, safety, sensitivity, and risky claims, then blocked or auto-revised if needed. Nothing serves unless all checks pass, and each impression is logged with an allow/block reason.' 1183 }, 1184 { 1185 question: 'How does LoudEcho ensure brand safety?', 1186 answer: 'We use page-level context analysis and proprietary risk classifiers to filter for violence, hate speech, and sensitive topics. LoudEcho evaluates the specific context of every impression and applies multi-layer safety filters before a creative is ever generated.' 1187 }, 1188 { 1189 question: 'Can LoudEcho operate as a fully managed service?', 1190 answer: 'Yes. We offer fully managed execution, handling everything from strategy and guardrail setup to trafficking and optimization. We also support hybrid models where our team manages day-to-day operations while you retain final approval control.' 1191 }, 1192 { 1193 question: 'What creative formats are supported?', 1194 answer: 'LoudEcho currently focuses on IAB-standard display units and text ads for the open web. Support for additional channels and formats is scheduled for release in 2026.' 1195 }, 1196 { 1197 question: 'Does LoudEcho support languages beyond English?', 1198 answer: 'Generation is currently English-only. Multilingual support for major European languages is in development and will include the same rigorous brand-voice and compliance validation per market.' 1199 } 1200 ]; 1201 1202 let openIndex = null; 1203 1204 function renderFAQ() { 1205 const container = document.getElementById('faq-container'); 1206 1207 container.innerHTML = faqQuestions.map((item, index) => ` 1208 <div style="background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e5e5;"> 1209 <div class="faq-item" data-index="${index}" style="padding:20px 24px;cursor:pointer;"> 1210 <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;"> 1211 <h3 style="font-family:'DM Sans',sans-serif;font-size:17px;font-weight:600;color:#222;margin:0;flex:1;">${item.question}</h3> 1212 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(${index === openIndex ? '180deg' : '0deg'});flex-shrink:0;"> 1213 <path d="M6 9L12 15L18 9" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 1214 </svg> 1215 </div> 1216 <div style="max-height:${index === openIndex ? '500px' : '0'};overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);opacity:${index === openIndex ? '1' : '0'};margin-top:${index === openIndex ? '12px' : '0'};"> 1217 <p style="font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;color:#666;margin:0;">${item.answer}</p> 1218 </div> 1219 </div> 1220 </div> 1221 `).join(''); 1222 1223 // Add click handlers 1224 container.querySelectorAll('.faq-item').forEach((item) => { 1225 item.addEventListener('click', (e) => { 1226 const index = parseInt(e.currentTarget.getAttribute('data-index')); 1227 openIndex = (openIndex === index) ? null : index; 1228 renderFAQ(); 1229 }); 1230 }); 1231 } 1232 1233 // Initial render 1234 renderFAQ(); 1235 </script>
1235 1236 1237 <div class="section-footer"> 1238 <div class="footer-content"> 1239 <div class="content-style-8"> 1240 <div class="heading-5"> 1241 <div class="heading-6"> 1242 <div class="heading-7"></div> 1243 <!-- <img src="images/Heading.svg" loading="lazy" alt=""> --> 1244 <!-- <img src="images/footer-retro-cityscape.png" loading="lazy" alt="Retro futuristic footer art"> --> 1245 </div> 1246 <div class="form-block-2 _3"> 1247 <a href="#" class="button-alternative smalll position new w-button hs-cta-trigger-button hs-cta-trigger-button-204798812515">Get early access</a> 1248 </div> 1249 </div> 1250 <div class="bottom-2"> 1251 <div class="socials-4"> 1252 <a href="/cdn-cgi/l/email-protection#432a2d252c032f2c362726202b2c6d222a" class="social-7"><img src="images/IconSolidmail_1.svg" loading="lazy" width="16.33333396911621" height="16.33333396911621" alt="Email" class="iconsolidmail-3"></a> 1253 <a href="https://www.linkedin.com/company/loudecho/" target="_blank" rel="noopener noreferrer" class="social-8"><img src="images/Path-2520_1.svg" loading="lazy" width="13.197080612182617" height="13.066666603088379" alt="LinkedIn" class="path-2523"></a> 1254 <a href="https://x.com/LoudEcho_ai" target="_blank" rel="noopener noreferrer" class="social-8"><img src="images/Vector_1.svg" loading="lazy" width="14.460444450378418" height="13.066666603088379" alt="X/Twitter" class="path-2523"></a> 1255 </div> 1256 <div class="frame-2147207715"> 1257 <div class="text-24">© 2026 LoudEcho</div> 1258 <a href="privacy.html" class="text-24">Privacy Policy</a> 1259 <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="text-24">Media Kit</a> 1260 </div> 1261 </div> 1262 </div> 1263 <img src="images/LoudEcho FooterTxt.svg" alt="LoudEcho" class="footer-logo-svg footer-logo-desktop"> 1264 <img src="images/loud echo footer STACK.svg" alt="LoudEcho" class="footer-logo-svg footer-logo-mobile"> 1265 <div class="bottom"> 1266 <div class="text-23">© 2026 LoudEcho</div> 1267 <a href="terms.html" target="_blank" rel="noopener noreferrer" class="text-23">Terms</a> 1268 <a href="privacy.html" target="_blank" rel="noopener noreferrer" class="text-23">Privacy Policy</a> 1269 <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener noreferrer" class="text-23">Media Kit</a> 1270 <div class="socials-3"> 1271 <a href="/cdn-cgi/l/email-protection#6e070008012e02011b0a0b0d0601400f07" target="_blank" rel="noopener noreferrer" class="social-5"> 1272 <img src="images/IconSolidmail.svg" loading="lazy" width="16.33333396911621" height="16.33333396911621" alt="Email Icon" class="iconsolidmail-2"> 1273 </a> 1274 <a class="social-6" href="https://www.linkedin.com/company/loudecho/" target="_blank" rel="noopener noreferrer"><img src="images/Path-2520.svg" loading="lazy" width="13.197080612182617" height="13.066666603088379" alt="" class="path-2522"> 1275 </a> 1276 <a class="social-6" href="https://x.com/LoudEcho_ai" target="_blank" rel="noopener noreferrer"><img src="images/Vector.svg" loading="lazy" width="14.460444450378418" height="13.066666603088379" alt="" class="path-2522" ></a> 1277 </div> 1278 1279 </div> 1280 </div> 1281 </div>
vendor: 111 bytes, lines 1281-1282
1281 1282 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1282<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=685993b84dfb0c8223ab8731" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1282 1283
1283<script src="js/webflow.js" type="text/javascript"></script>
1283 1284
1284<script> 1285 // Navbar scroll animation - hide on scroll down, show on scroll up 1286 document.addEventListener('DOMContentLoaded', function() { 1287 // Wait a bit for Webflow to initialize 1288 setTimeout(function() { 1289 let lastScrollTop = 0; 1290 const navbar = document.querySelector('.navbar'); 1291 let ticking = false; 1292 let isScrolling = false; 1293 1294 if (!navbar) return; 1295 1296 function updateNavbar() { 1297 const scrollTop = window.pageYOffset || document.documentElement.scrollTop; 1298 1299 if (scrollTop > lastScrollTop && scrollTop > 100) { 1300 // Scrolling down - hide navbar 1301 if (!navbar.classList.contains('navbar-hidden')) { 1302 navbar.classList.add('navbar-hidden'); 1303 navbar.style.transform = 'translateY(-100%)'; 1304 navbar.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'; 1305 } 1306 } else { 1307 // Scrolling up - show navbar 1308 if (navbar.classList.contains('navbar-hidden')) { 1309 navbar.classList.remove('navbar-hidden'); 1310 navbar.style.transform = 'translateY(0)'; 1311 navbar.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'; 1312 } 1313 } 1314 1315 lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; 1316 ticking = false; 1317 } 1318 1319 function requestTick() { 1320 if (!ticking) { 1321 window.requestAnimationFrame(updateNavbar); 1322 ticking = true; 1323 } 1324 } 1325 1326 window.addEventListener('scroll', requestTick, { passive: true }); 1327 1328 // Ensure navbar has proper positioning 1329 if (window.getComputedStyle(navbar).position !== 'fixed') { 1330 navbar.style.position = 'fixed'; 1331 navbar.style.top = '0'; 1332 navbar.style.left = '0'; 1333 navbar.style.right = '0'; 1334 navbar.style.width = '100%'; 1335 navbar.style.zIndex = '500'; 1336 } 1337 }, 100); 1338 }); 1339 1340 // Navbar hero mode - white text when hero is in view 1341 document.addEventListener('DOMContentLoaded', function() { 1342 const navbar = document.querySelector('.navbar'); 1343 const heroSection = document.getElementById('publisher-hero'); 1344 1345 if (!navbar || !heroSection) return; 1346 1347 // Add hero-mode class initially since we start at top 1348 navbar.classList.add('hero-mode'); 1349 1350 function checkHeroVisibility() { 1351 const heroRect = heroSection.getBoundingClientRect(); 1352 const heroBottom = heroRect.bottom; 1353 1354 // If hero bottom is above the navbar (roughly 80px height), remove hero-mode 1355 if (heroBottom <= 80) { 1356 navbar.classList.remove('hero-mode'); 1357 } else { 1358 navbar.classList.add('hero-mode'); 1359 } 1360 } 1361 1362 window.addEventListener('scroll', checkHeroVisibility, { passive: true }); 1363 checkHeroVisibility(); // Initial check 1364 }); 1365 1366 // Mobile menu toggle 1367 document.addEventListener('DOMContentLoaded', function() { 1368 const menuToggle = document.getElementById('mobile-menu-toggle'); 1369 const mobileMenu = document.getElementById('mobile-menu'); 1370 1371 if (menuToggle && mobileMenu) { 1372 menuToggle.addEventListener('click', function() { 1373 const isOpen = mobileMenu.classList.contains('menu-open'); 1374 1375 if (isOpen) { 1376 mobileMenu.classList.remove('menu-open'); 1377 menuToggle.classList.remove('menu-open'); 1378 } else { 1379 mobileMenu.classList.add('menu-open'); 1380 menuToggle.classList.add('menu-open'); 1381 } 1382 }); 1383 1384 // Close menu when clicking on a link 1385 const menuLinks = mobileMenu.querySelectorAll('.mobile-menu-link'); 1386 menuLinks.forEach(function(link) { 1387 link.addEventListener('click', function() { 1388 mobileMenu.classList.remove('menu-open'); 1389 menuToggle.classList.remove('menu-open'); 1390 }); 1391 }); 1392 1393 // Close menu when clicking outside 1394 document.addEventListener('click', function(event) { 1395 if (!menuToggle.contains(event.target) && !mobileMenu.contains(event.target)) { 1396 mobileMenu.classList.remove('menu-open'); 1397 menuToggle.classList.remove('menu-open'); 1398 } 1399 }); 1400 } 1401 }); 1402 1403 // Ad loading animation sequence - Cinematic version 1404 document.addEventListener('DOMContentLoaded', function() { 1405 const adContainer = document.getElementById('ad-container'); 1406 const dogBlueAd = document.getElementById('dog-blue-ad'); 1407 const dogSpaceAd = document.getElementById('dog-space-ad'); 1408 const loadingOverlay = document.getElementById('loading-overlay'); 1409 const loadingSpinner = document.getElementById('loading-spinner'); 1410 const confettiContainer = document.getElementById('confetti-container'); 1411 const toggleContainer = document.getElementById('ad-toggle-container'); 1412 const toggleBefore = document.getElementById('toggle-before'); 1413 const toggleAfter = document.getElementById('toggle-after'); 1414 1415 if (!dogBlueAd || !dogSpaceAd || !loadingOverlay || !loadingSpinner || !adContainer) return; 1416 1417 let showingAfter = true; 1418 1419 // Confetti burst function 1420 function createConfetti() { 1421 const colors = ['#7c3aed', '#a78bfa', '#c4b5fd', '#fbbf24', '#34d399', '#60a5fa', '#f472b6']; 1422 const shapes = ['square', 'circle']; 1423 1424 for (let i = 0; i < 50; i++) { 1425 const confetti = document.createElement('div'); 1426 confetti.className = 'confetti-piece'; 1427 const color = colors[Math.floor(Math.random() * colors.length)]; 1428 const shape = shapes[Math.floor(Math.random() * shapes.length)]; 1429 const size = Math.random() * 8 + 6; 1430 const startX = Math.random() * 100; 1431 const startY = Math.random() * 100; 1432 const rotation = Math.random() * 360;
1433 const delay = Math.random() * 0.3; 1434 const duration = Math.random() * 1 + 1; 1435 const drift = (Math.random() - 0.5) * 100; 1436 1437 confetti.style.cssText = ` 1438 position: absolute; 1439 width: ${size}px; 1440 height: ${size}px; 1441 background: ${color}; 1442 left: ${startX}%; 1443 top: ${startY}%; 1444 border-radius: ${shape === 'circle' ? '50%' : '2px'}; 1445 transform: rotate(${rotation}deg); 1446 animation: confettiFall ${duration}s ease-out ${delay}s forwards; 1447 --drift: ${drift}px; 1448 `; 1449 1450 confettiContainer.appendChild(confetti); 1451 1452 // Clean up after animation 1453 setTimeout(() => confetti.remove(), (duration + delay) * 1000 + 100); 1454 } 1455 } 1456 1457 // Step 1: Wait, then pop out the ad 1458 setTimeout(function() { 1459 adContainer.classList.add('popped-out'); 1460 1461 // Step 2: Show dark overlay with spinner 1462 setTimeout(function() { 1463 loadingOverlay.style.opacity = '1'; 1464 1465 // Step 3: After loading, hide spinner and show new ad with confetti 1466 setTimeout(function() { 1467 // Fade out spinner 1468 loadingSpinner.style.opacity = '0'; 1469 loadingSpinner.style.transform = 'scale(0)'; 1470 1471 setTimeout(function() { 1472 // Switch to space ad 1473 dogBlueAd.style.opacity = '0'; 1474 dogSpaceAd.style.opacity = '1'; 1475 1476 // Hide overlay 1477 loadingOverlay.style.opacity = '0'; 1478 1479 // Burst confetti! 1480 setTimeout(function() { 1481 createConfetti(); 1482 1483 // Step 4: Pop back in after confetti starts 1484 setTimeout(function() { 1485 adContainer.classList.remove('popped-out'); 1486 adContainer.classList.add('popped-in'); 1487 1488 // Show toggle button 1489 setTimeout(function() { 1490 toggleContainer.style.visibility = 'visible'; 1491 toggleContainer.style.opacity = '1'; 1492 }, 400); 1493 }, 600); 1494 }, 200); 1495 }, 300); 1496 }, 2500); 1497 }, 400); 1498 }, 800); 1499 1500 // Toggle button functionality - without/with LoudEcho 1501 if (toggleBefore && toggleAfter) { 1502 const beforeLogo = toggleBefore.querySelector('img'); 1503 const afterLogo = toggleAfter.querySelector('img'); 1504 1505 toggleBefore.addEventListener('click', function() { 1506 if (showingAfter) { 1507 showingAfter = false; 1508 dogBlueAd.style.opacity = '1'; 1509 dogSpaceAd.style.opacity = '0'; 1510 // Active state for "without" button 1511 toggleBefore.style.background = '#7c3aed'; 1512 toggleBefore.style.color = '#fff'; 1513 if (beforeLogo) { 1514 beforeLogo.style.filter = 'brightness(0) invert(1)'; 1515 beforeLogo.style.opacity = '1'; 1516 } 1517 // Inactive state for "with" button 1518 toggleAfter.style.background = 'transparent'; 1519 toggleAfter.style.color = '#666'; 1520 if (afterLogo) { 1521 afterLogo.style.filter = 'none'; 1522 afterLogo.style.opacity = '0.6'; 1523 } 1524 } 1525 }); 1526 1527 toggleAfter.addEventListener('click', function() { 1528 if (!showingAfter) { 1529 showingAfter = true; 1530 dogBlueAd.style.opacity = '0'; 1531 dogSpaceAd.style.opacity = '1'; 1532 // Active state for "with" button 1533 toggleAfter.style.background = '#7c3aed'; 1534 toggleAfter.style.color = '#fff'; 1535 if (afterLogo) { 1536 afterLogo.style.filter = 'brightness(0) invert(1)'; 1537 afterLogo.style.opacity = '1'; 1538 } 1539 // Inactive state for "without" button 1540 toggleBefore.style.background = 'transparent'; 1541 toggleBefore.style.color = '#666'; 1542 if (beforeLogo) { 1543 beforeLogo.style.filter = 'none'; 1544 beforeLogo.style.opacity = '0.6'; 1545 } 1546 } 1547 }); 1548 } 1549 }); 1550 </script>
1550 1551 1552<!-- GTM Tracking Events -->
1553<script> 1554// Initialize dataLayer 1555window.dataLayer = window.dataLayer || []; 1556 1557// Form Submissions & CTA Tracking 1558document.addEventListener("DOMContentLoaded", function() { 1559 // Form Submissions 1560 document.querySelectorAll('.w-form form').forEach(form => { 1561 form.addEventListener('submit', function(e) { 1562 e.preventDefault(); 1563 1564 // Track submission 1565 window.dataLayer.push({ 1566 'event': 'form_submit', 1567 'formLocation': this.closest('.section-top') ? 'hero' : 'footer' 1568 }); 1569 1570 // Submit to HubSpot 1571 fetch(this.action, { 1572 method: this.method, 1573 body: new FormData(this) 1574 }).then(response => { 1575 if (response.ok) { 1576 window.dataLayer.push({'event': 'generate_lead'}); 1577 this.reset(); 1578 } 1579 }); 1580 }); 1581 }); 1582 1583 // CTA Button Clicks - track HubSpot popup triggers 1584 document.querySelectorAll('.hs-cta-trigger-button').forEach(btn => { 1585 btn.addEventListener('click', function() { 1586 window.dataLayer.push({ 1587 'event': 'cta_click', 1588 'ctaLocation': this.closest('.section-top') ? 'hero' : 'footer' 1589 }); 1590 }); 1591 }); 1592}); 1593</script>
1593 1594<!-- Start of HubSpot Embed Code -->
1595<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/49122828.js"></script>
1595 1596<!-- End of HubSpot Embed Code -->
1597<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"6874e980772a44d8aa23cb697400e655","r":1,"spa":2}' crossorigin="anonymous"></script>
1597 1598</body> 1599</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.