carets

_scss/helpers/variables.scss

@@ -3,6 +3,7 @@ $white:      #ffffff;
 $black:      #000000;
 $dark-gray:  #242424;
 $light-gray:  #D9D9D9;
+$lighter-gray:  #EEE;
 
 // Brand colors
 $gold:       #FFDF3F;

_scss/pages/home.scss

@@ -4,7 +4,7 @@
 body {
   background-color: $gold;
   background-image: url("/assets/images/btr-texture.png");
-  background-size: 100%;
+  background-size: 170px;
   min-height: 100vh;
 }
 
@@ -131,47 +131,66 @@ a:active {
     input[type='checkbox'] {
       display:none;
     }
+    .outlink {
+      display: block;
+      cursor: pointer;
+      transition: all 0.5s ease-out;
+    }
+    .outlink::after {
+      content: url("/assets/images/btr-carrot.svg");
+      display: inline-block;
+      vertical-align: middle;
+      transform: rotate(90deg);
+    }    
     .lbl-toggle {
       display: block;
       cursor: pointer;
       transition: all 0.5s ease-out;
     }
-    .lbl-toggle::before {
-      content: ' ';
+    .lbl-toggle::after {
+      content: url("/assets/images/btr-carrot.svg");
       display: inline-block;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left: 5px solid currentColor;
       vertical-align: middle;
-      margin-right: .7rem;
-      transform: translateY(-2px);
-      transition: transform .5s ease-out;
-    }    
+      transform: rotate(180deg);
+      transition: transform .25s ease-out;
+    } 
     .content-expander {
-      border-bottom-color: $light-gray;
+      border-bottom-color: $lighter-gray;
       border-bottom-style: solid;
-      border-bottom-width: 1px;
+      border-bottom-width: 2px;
       padding: 10px;
       width: 100%;
       text-align: left;
       font-weight: 600;
       font-size: 14px;
+      span {
+        // Take up space so ::after is on the right
+        display: inline-block;
+        width: 94%;
+      }
     }
     .toggle:checked + .lbl-toggle + .content-expanded {
       max-height: 100vh;
       overflow: visible;
+      display: inherit;
     }
-    .toggle:checked + .lbl-toggle::before {
-      transform: rotate(90deg) translateX(-3px);
+    .toggle:checked + .lbl-toggle::after {
+      transform: rotate(360deg) translate(0, -2px);
     }
     .content-expanded {
       max-height: 0px;
+      display: none;
       overflow: hidden;
       transition: max-height .5s ease-in-out;
       width: 100%;
+      padding-bottom: 20px;
+      margin-bottom: 40px;
       margin-top: 20px;
       text-align: left;
       font-size: 13px;
+      border-bottom-color: $lighter-gray;
+      border-bottom-style: solid;
+      border-bottom-width: 2px;
     }
     .content-img {
       img {

index.html

@@ -25,8 +25,9 @@ layout: default
         </div>
       </a>
       <input id="apps-expander" class="toggle" type="checkbox">
-      <label for="apps-expander" class="lbl-toggle content-expander">{% t apps_expander_text %}</label>
-
+      <label for="apps-expander" class="lbl-toggle content-expander">
+        <span>{% t apps_expander_text %}</span>
+      </label>
       <div class="content-expanded">
         <p class="mb-2">{% t apps_expanded_text %}</p>
         <div class="content-img">
@@ -46,7 +47,9 @@ layout: default
           <img src="/assets/images/btr-convene.png" alt="{% t page_logo_alt %}" />
         </div>
       </div>
-      <a href="/chat/"><div class="content-expander">{% t chat_secondary_cta %}</div></a>
+      <a href="/chat/"><div class="outlink content-expander">
+        <span>{% t chat_secondary_cta %}</span>
+      </a>
     </div>
     {% endif %}
   </div>