Add data attributes and fix stickynote position on NP campaign page (#14884)

bedrock/firefox/templates/firefox/nothing-personal/index.html

@@ -146,16 +146,16 @@
             <h4><span aria-hidden="true">[</span>Somewhat Frequently Asked Questions<span aria-hidden="true">]</span></h4>
 
             <h5>Are you even any good?</h5>
-            <p>Calm down. And yes. <a href="{{ url('firefox.features.fast') }}" target="_blank">We’re so fast</a> you won’t even notice the difference.</p>
+            <p>Calm down. And yes. <a href="{{ url('firefox.features.fast') }}" target="_blank" data-link-text="We’re so fast">We’re so fast</a> you won’t even notice the difference.</p>
 
             <h5 aria-label="What makes you so special?">What makes you soooo special?</h5>
-            <p><abbr title="No big deal">NBD</abbr>, but people dump their other browsers <a href="{{ url('firefox.features.index') }}" target="_blank">for our features</a> (like <a href="{{ url('firefox.features.picture-in-picture') }}" target="_blank">popping out videos</a> and a <a href="{{ url('firefox.features.pdf-editor') }}" target="_blank">built-in PDF editor</a>).</p>
+            <p><abbr title="No big deal">NBD</abbr>, but people dump their other browsers <a href="{{ url('firefox.features.index') }}" target="_blank" data-link-text="For our features">for our features</a> (like <a href="{{ url('firefox.features.picture-in-picture') }}" target="_blank" data-link-text="Popping out videos">popping out videos</a> and a <a href="{{ url('firefox.features.pdf-editor') }}" target="_blank" data-link-text="Built-in PDF editor">built-in PDF editor</a>).</p>
 
             <h5>What does any of this have to do <br> with me?</h5>
-            <p>Hey, you can customize Firefox to be all about you with <a href="{{ url('firefox.features.add-ons') }}" target="_blank">add-ons</a> and <a href="{{ url('firefox.features.customize') }}" target="_blank">themes</a>. Happy?</p>
+            <p>Hey, you can customize Firefox to be all about you with <a href="{{ url('firefox.features.add-ons') }}" target="_blank" data-link-text="Add-ons">add-ons</a> and <a href="{{ url('firefox.features.customize') }}" target="_blank" data-link-text="Themes">themes</a>. Happy?</p>
 
             <h5>Ok, what’s the privacy-catch?</h5>
-            <p><a href="{{ url('firefox.privacy.index') }}" target="_blank">We don’t keep track of where you go</a> because 1. Yawn, and 2. We really don’t need it.</p>
+            <p><a href="{{ url('firefox.privacy.index') }}" target="_blank" data-link-text="We don’t keep track of where you go">We don’t keep track of where you go</a> because 1. Yawn, and 2. We really don’t need it.</p>
           </div>
 
           <div class="c-sticky-note c-attached-sticky">

media/css/firefox/nothing-personal/_sticky-note.scss

@@ -7,7 +7,7 @@
     background-image: url('/media/img/firefox/nothing-personal/sticky-note-bg.svg');
     background-repeat: no-repeat;
     background-size: contain;
-    width: 220px;
+    width: 200px;
     height: 220px;
     margin: 0 auto;
     padding: $spacing-xl;
@@ -52,6 +52,7 @@
             display: block;
             position: absolute;
             bottom: -80px;
+            right: 0;
             margin-right: -150px;
             opacity: 1;
 

media/css/firefox/nothing-personal/styles.scss

@@ -61,7 +61,9 @@ $mq-tad-smaller-sm: 455px;
                 padding: $spacing-sm;
                 text-decoration: none;
                 cursor: default;
+            }
 
+            a {
                 &:hover,
                 &:active,
                 &:focus {