Update sponsor card styling

Author: carlospolop

theme/index.hbs

@@ -33,6 +33,9 @@
 
         <!-- Fonts -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
         {{#if copy_fonts}}
         <link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
         {{/if}}
@@ -330,15 +333,35 @@
                             <div class="topsponsor-bsa" aria-hidden="true">
                                 <div id="bsa-zone_1773736844679-9_123456"></div>
                             </div>
+                            <a class="topsponsor ht-sponsor-card ht-sponsor-card--horizontal" href="" target="_blank" rel="noopener noreferrer">
+                                <span class="ht-sponsor-grid" aria-hidden="true"></span>
+                                <span class="ht-sponsor-scan" aria-hidden="true"></span>
+                                <span class="ht-sponsor-corners" aria-hidden="true"></span>
+                                <span class="ht-sponsor-kicker">Sponsored</span>
+                                <span class="ht-sponsor-media">
+                                    <img src="" alt="" srcset="">
+                                </span>
+                                <span class="ht-sponsor-copy">
+                                    <span class="topsponsor-title ht-sponsor-title"></span>
+                                    <span class="topsponsor-description ht-sponsor-description"></span>
+                                </span>
+                                <span class="topsponsor-cta ht-sponsor-cta"></span>
+                            </a>
                             {{{ content }}}
                             <div class="bottomsponsor-wrapper">
-                                <a class="bottomsponsor" href="" target="_blank" rel="noopener noreferrer">
-                                    <img src="" alt="" srcset="">
-                                    <div class="bottomsponsor-title">
-                                    </div>
-                                    <div class="bottomsponsor-description">
-                                    </div>
-                                    <div class="bottomsponsor-cta"></div>
+                                <a class="bottomsponsor ht-sponsor-card ht-sponsor-card--horizontal" href="" target="_blank" rel="noopener noreferrer">
+                                    <span class="ht-sponsor-grid" aria-hidden="true"></span>
+                                    <span class="ht-sponsor-scan" aria-hidden="true"></span>
+                                    <span class="ht-sponsor-corners" aria-hidden="true"></span>
+                                    <span class="ht-sponsor-kicker">Sponsored</span>
+                                    <span class="ht-sponsor-media">
+                                        <img src="" alt="" srcset="">
+                                    </span>
+                                    <span class="ht-sponsor-copy">
+                                        <span class="bottomsponsor-title ht-sponsor-title"></span>
+                                        <span class="bottomsponsor-description ht-sponsor-description"></span>
+                                    </span>
+                                    <span class="bottomsponsor-cta ht-sponsor-cta"></span>
                                 </a>
                                 <div class="bottomsponsor-bsa" aria-hidden="true">
                                     <div id="bsa-zone_1773736987437-6_123456"></div>
@@ -393,13 +416,19 @@
                         </button>
                         <div id="sidetoc-wrapper" class="sidetoc-wrapper">
                             <nav class="pagetoc"></nav>
-                            <a class="sidesponsor" href="" target="_blank" rel="noopener noreferrer">
-                                <img src="" alt="" srcset="">
-                                <div class="sponsor-title">
-                                </div>
-                                <div class="sponsor-description">
-                                </div>
-                                <div class="sponsor-cta"></div>
+                            <a class="sidesponsor ht-sponsor-card ht-sponsor-card--vertical" href="" target="_blank" rel="noopener noreferrer">
+                                <span class="ht-sponsor-grid" aria-hidden="true"></span>
+                                <span class="ht-sponsor-scan" aria-hidden="true"></span>
+                                <span class="ht-sponsor-corners" aria-hidden="true"></span>
+                                <span class="ht-sponsor-kicker">Sponsored</span>
+                                <span class="ht-sponsor-media">
+                                    <img src="" alt="" srcset="">
+                                </span>
+                                <span class="ht-sponsor-copy">
+                                    <span class="sponsor-title ht-sponsor-title"></span>
+                                    <span class="sponsor-description ht-sponsor-description"></span>
+                                </span>
+                                <span class="sponsor-cta ht-sponsor-cta"></span>
                             </a>
                             <div class="sidesponsor-bsa" aria-hidden="true">
                                 <div id="bsa-zone_1773737041447-5_123456"></div>