Embed

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>What We Do - Adrythm Widget</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    /* Page-level reset, nothing fancy */
    html, body {
      margin: 0;
      padding: 0;
      background: #020617; /* dark base behind the gradient */
    }
  </style>
</head>
<body>

<adrythm-what-we-do></adrythm-what-we-do>

<script>
class AdrythmWhatWeDo extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });

    shadow.innerHTML = `
      <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Mulish:wght@300;400;600&display=swap" rel="stylesheet">

      <style>
        /* sane box model */
        *, *::before, *::after { box-sizing: border-box; }

        /* hide internal scrollbars visuals and keep layout width sane */
        :host, .adrythm-section, .cards {
          -ms-overflow-style: none;
          scrollbar-width: none;
          max-width: 100%;
        }
        :host::-webkit-scrollbar,
        .adrythm-section::-webkit-scrollbar,
        .cards::-webkit-scrollbar {
          display: none;
          height: 0;
          width: 0;
        }

        :host {
          display: block;
          width: 100%;
          max-width: 100vw;
          font-family: 'Mulish', sans-serif;
          color: #fff;
          overflow-x: hidden; /* no horizontal scroll inside widget */
        }

        .adrythm-section {
          width: 100%;
          max-width: 100%;
          padding: 160px 0;
          position: relative;
          overflow-x: hidden;
          overflow-y: visible;
          background: linear-gradient(-45deg, #0f141e, #1e3a8a, #111827, #172554);
          background-size: 400% 400%;
          animation: gradientShift 18s ease infinite;
          scrollbar-gutter: stable;
        }

        @keyframes gradientShift {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
          100% { background-position: 0% 50%; }
        }

        .adrythm-section::before {
          content: "";
          position: absolute;
          inset: 0;
          background: url('https://www.transparenttextures.com/patterns/dark-mosaic.png');
          opacity: 0.05;
          pointer-events: none;
        }

        .section-inner {
          width: 100%;
          max-width: 1600px;
          margin: 0 auto;
          text-align: center;
          padding: 0 6vw;
          position: relative;
          z-index: 2;
          overflow: visible; /* cards can lift without clipping */
        }

        .typing {
          display: inline-block;
          border-right: 3px solid rgba(255,255,255,0.75);
          white-space: nowrap;
          overflow: hidden;
          font-family: 'Playfair Display', serif;
          font-size: clamp(2.4rem, 4vw, 3.2rem);
          margin-bottom: 28px;
          opacity: 0;
          line-height: 1.25;
          padding-bottom: 8px;
        }

        .lead {
          font-size: 1.25rem;
          color: rgba(255,255,255,0.9);
          line-height: 1.8;
          max-width: 950px;
          margin: 0 auto 100px;
          opacity: 0;
          transform: translateY(20px);
          filter: blur(8px);
          transition: all 1.2s ease;
          white-space: normal;
        }

        .lead.visible {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }

        .decode span {
          display: inline;
          opacity: 0;
          animation: decodeIn 0.6s forwards;
        }

        @keyframes decodeIn {
          0% { opacity: 0; filter: blur(6px); }
          50% { opacity: 0.6; filter: blur(2px); }
          100% { opacity: 1; filter: blur(0); }
        }

        .cards {
          display: flex;
          justify-content: center;
          align-items: stretch;
          gap: 40px;
          flex-wrap: nowrap;
          padding: 0 4vw;
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
          overflow-y: visible;
        }

        .card {
          flex: 1 1 33%;
          position: relative;
          background: rgba(255,255,255,0.06);
          border-radius: 18px;
          padding: 60px 40px;
          box-shadow: 0 12px 40px rgba(0,0,0,0.5);
          opacity: 0;
          transform: translateY(60px) scale(0.97);
          transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.3s ease;
          overflow: hidden;
          will-change: transform;
          z-index: 1;
        }

        .card.visible {
          opacity: 1;
          transform: translateY(0) scale(1);
        }

        .card:hover {
          transform: translateY(-8px) scale(1.03);
          z-index: 10;
          background: rgba(255,255,255,0.12);
          box-shadow: 0 20px 60px rgba(0,0,0,0.65);
        }

        .card::before {
          content: "";
          position: absolute;
          top: 0;
          left: -100%;
          width: 200%;
          height: 100%;
          background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
          transform: skewX(-20deg);
          opacity: 0;
          transition: all 0.8s ease;
          pointer-events: none;
        }

        .card:hover::before {
          left: 0%;
          opacity: 1;
        }

        .card h3 {
          font-family: 'Playfair Display', serif;
          font-size: 1.6rem;
          margin-bottom: 16px;
        }

        .card p {
          color: rgba(255,255,255,0.88);
          line-height: 1.7;
          font-size: 1.05rem;
        }

        @media (max-width: 1024px) {
          .cards {
            flex-wrap: wrap;
            gap: 30px;
          }
          .card {
            flex: 1 1 100%;
            padding: 40px 30px;
          }
        }

        @media (max-width: 600px) {
          .section-inner { padding: 0 20px; }
          .lead { font-size: 1.1rem; margin-bottom: 70px; }
          .cards { padding: 0; }
          .card { padding: 32px 24px; }
        }
      </style>

      <section class="adrythm-section">
        <div class="section-inner">
          <h2 class="typing" id="typing-header">What We Do</h2>
          <p class="lead decode" id="lead-text">
            We manage and scale campaigns across Google Ads, Meta (Facebook and Instagram), and Microsoft Ads. 
            Our work is built for performance, efficiency, and sustainable ROI.
          </p>

          <div class="cards">
            <div class="card">
              <h3>Google Ads</h3>
              <p>Full-funnel structures that combine automation and control. Every impression, click, and conversion is tracked and optimized.</p>
            </div>
            <div class="card">
              <h3>Meta Ads</h3>
              <p>Creative meets conversion. We build thumb-stopping ads and audience-driven strategies that keep performance scaling.</p>
            </div>
            <div class="card">
              <h3>Microsoft Ads</h3>
              <p>Capture high-intent audiences others miss. Extend reach and compound your growth with synchronized campaigns.</p>
            </div>
          </div>
        </div>
      </section>
    `;

    const typingEl = shadow.getElementById("typing-header");
    const lead = shadow.getElementById("lead-text");
    const cards = shadow.querySelectorAll(".card");
    const text = typingEl.textContent;
    typingEl.textContent = "";

    function typeText() {
      typingEl.style.opacity = "1";
      let i = 0;
      const cursorBlink = setInterval(() => {
        typingEl.style.borderColor =
          typingEl.style.borderColor === "transparent"
            ? "rgba(255,255,255,0.75)"
            : "transparent";
      }, 500);

      const interval = setInterval(() => {
        if (i < text.length) {
          typingEl.textContent = text.substring(0, i + 1);
          i++;
        } else {
          clearInterval(interval);
          setTimeout(() => {
            clearInterval(cursorBlink);
            typingEl.style.borderColor = "transparent";
          }, 800);
        }
      }, 70);
    }

    function decodeText() {
      const words = lead.textContent.split(" ");
      lead.textContent = "";
      words.forEach((word, i) => {
        const span = document.createElement("span");
        span.textContent = word + " ";
        span.style.animationDelay = (i * 0.07) + "s";
        lead.appendChild(span);
      });
      lead.classList.add("visible");
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !typingEl.dataset.typed) {
            typingEl.dataset.typed = "true";
            typeText();
            setTimeout(decodeText, 500);
            cards.forEach((card, i) =>
              setTimeout(() => card.classList.add("visible"), 700 + i * 250)
            );
          }
        });
      },
      { threshold: 0.4 }
    );

    observer.observe(shadow.querySelector(".adrythm-section"));
  }
}

// guard against double-definition blowing up the script
if (!customElements.get('adrythm-what-we-do')) {
  customElements.define("adrythm-what-we-do", AdrythmWhatWeDo);
}
</script>

</body>
</html>


AdRythm

We founded AdRythm after seeing far too many agencies take money without delivering real growth. Our mission is to prove that small and medium-sized businesses deserve partners who are obsessed with results, not billable hours. Every campaign and workflow we design is meant to generate tangible value and help local companies scale sustainably.

Our team combines deep, real-world expertise across marketing, finance, and technology. One partner brings a high-performance background in automotive marketing, where stakes are high and results are everything, applying those proven data-driven strategies to any industry. Another has nearly six years of experience managing large-scale ad budgets, with a track record of lowering acquisition costs while scaling spend efficiently. Our AI solutions lead brings over a decade of experience in workflow automation and predictive analytics, helping business owners make faster, smarter decisions. And anchoring the team is our finance and accounting expert, who ensures every marketing dollar is tied to measurable outcomes. Together, we offer a fully integrated, results-focused approach that empowers clients to invest in growth with clarity, precision, and confidence.