UI update

--Added status banner

bitcoinbonds.html

@@ -45,6 +45,14 @@
             <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
         </label>
     </header>
+    <section class="banner">
+        <p class="banner__text">
+            We are servicing current customers only. A new Blockchain-based version of Bitcoin Bonds will be available soon.
+        </p>
+        <button class="close-button" onclick="this.parentNode.remove()">
+            <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+        </button>
+    </section>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
             <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
@@ -89,10 +97,6 @@
                 Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher.
                 It offers full capital protection if Bitcoin prices fall below acquisition price.
             </p>
-            <h4 class="h4 margin-bottom-0-5r">Status</h4>
-            <p>
-                We are servicing current customers only. A new Blockchain-based version of Bitcoin Bonds will be available soon.
-            </p>
         </section>
         <div class="rooms__header">
             <h4 class="room__label">Rooms</h4>

bob'sfund.html

@@ -45,6 +45,14 @@
             <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
         </label>
     </header>
+    <section class="banner">
+        <p class="banner__text">
+            We are servicing current customers only. A new Blockchain-based version of Bob's Fund will be available soon.
+        </p>
+        <button class="close-button" onclick="this.parentNode.remove()">
+            <svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+        </button>
+    </section>
     <div id="outlet_switcher" class="grid gap-1-5 hide">
         <div class="flex align-center">
             <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"

css/main.css

@@ -417,6 +417,24 @@ ol[type="1"] {
   cursor: pointer;
 }
 
+.banner {
+  display: grid;
+  gap: 1rem;
+  padding: 0.2rem 1rem;
+  align-items: center;
+  background-color: #1E88E5;
+  grid-template-columns: 1fr auto;
+}
+.banner .close-icon {
+  fill: white;
+}
+
+.banner__text {
+  max-width: unset;
+  font-size: 0.9rem;
+  color: white;
+}
+
 #elevator_popup {
   position: absolute;
   width: 100%;
@@ -928,6 +946,7 @@ sm-carousel {
 }
 
 .intern-flo-id {
+  margin-top: 0.3rem;
   font-size: 0.75rem;
 }
 

css/main.scss

@@ -348,6 +348,23 @@ ol[type="1"]{
     cursor: pointer;
 }
 
+.banner{
+    display: grid;
+    gap: 1rem;
+    padding: 0.2rem 1rem;
+    align-items: center;
+    background-color: #1E88E5;
+    grid-template-columns: 1fr auto;
+    .close-icon{
+        fill: white;
+    }
+}
+.banner__text{
+    max-width: unset;
+    font-size: 0.9rem;
+    color: white;
+}
+
 #elevator_popup{
     position: absolute;
     width: 100%;
@@ -839,6 +856,7 @@ sm-carousel{
     font-size: 0.85rem;
 }
 .intern-flo-id{
+    margin-top: 0.3rem;
     font-size: 0.75rem;
 }
 .intern__project{

internshipblockchaincontract.html

@@ -148,7 +148,7 @@
         </div>
         <scroll-tab-panels id="ico_page_group">
             <section class="grid carousel-container">
-                <h3 class="h3 margin-bottom-1-5r">Interns</h3>
+                <h3 class="h3 margin-bottom-3r justify-self-center">Meet our interns</h3>
                 <section id="interns_container" class="masonry-layout"></section>
             </section>
             <section>