Finish styling work

Author: AJ Griffiths

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.html

@@ -3,24 +3,22 @@
 
 <!-- Sticky block -->
 <div class="call-to-action__sticky">
-    <div class="call-to-action__stickyinner">
+    <div class="call-to-action__inner">
         {% if value.get_button_link_block.block_type == "modal_iframe" %}
-            <button class="call-to-action__button button" data-micromodal-trigger="iframe-embed-modal">
-                {{ value.sticky_text }}
+            <button class="call-to-action__stickybutton button" data-micromodal-trigger="iframe-embed-modal">
+                <span class="call-to-action__stickyheading">{{ value.sticky_text }}</span>
                 {% if value.sticky_subtext %}
-                    <br>
-                    {{ value.sticky_subtext }}
+                     <br><span class="call-to-action__stickysubtext">{{ value.sticky_subtext }}</span>
                 {% endif %}
             </button>
         {% else %}
             <a href="{{ value.get_button_link }}" class="call-to-action__button button">
-                {{ value.sticky_text }}
+                <span class="call-to-action__stickyheading">{{ value.sticky_text }}</span>
                 {% if value.get_button_link_block.block_type == "document_link" %}
                     ({{ value.get_button_file_size|filesizeformat }})
                 {% endif %}
                 {% if value.sticky_subtext %}
-                    <br>
-                    {{ value.sticky_subtext }}
+                     <br><span class="call-to-action__stickysubtext">{{ value.sticky_subtext }}</span>
                 {% endif %}
             </a>
         {% endif %}

tbx/static_src/sass/components/_call-to-action.scss

@@ -55,10 +55,22 @@
         padding: $spacer-mini;
     }
 
-    &__stickyinner {
-        display: flex;
-        align-items: flex-end;
-        justify-content: space-between;
-        gap: $spacer-mini;
+    &__stickybutton {
+        @include font-size('size-five');
+        color: var(--color--white);
+        border: 1px solid var(--color--white);
+        margin-top: 0;
+
+        &:focus {
+            @include focus-style($outline-color: var(--color--background));
+        }
+    }
+
+    &__stickyheading {
+        font-weight: $weight--semibold;
     }
+    &__stickysubtext {
+        font-weight: $weight--extralight;
+    }
+
 }