giving form atomic started

index.html

@@ -13,8 +13,6 @@
             margin: 0;
             padding: 0;
             border: 0;
-
-            border-radius: 4px;
         }
         .block > *
         {
@@ -30,29 +28,45 @@
         }
         .col--empty, input:checked + .col--empty-active
         {
-            border-radius:4px;
+            box-sizing: border-box;
             border:1px solid #f1f1ee;
         }
         .col--warm, input:checked + .col--warm-active
         {
+            box-sizing: border-box;
             border:1px solid #f1f1ee;
             background:#F8F8F6;
         }
         .col--cool, input:checked + .col--cool-active
         {
+            box-sizing: border-box;
             border: 1px solid #ccd7de;
             background:#e6ebee;
         }
         .col--gray, input:checked + .col--gray-active
         {
+            box-sizing: border-box;
             border: 1px solid #E1DFDF;
             background:#F8F8F6;
         }
+        .col--drab
+        {
+            border:1px solid #DBDCD4;
+            background: #F1F1EE;
+        }
         .col--green, input:checked + .col--green-active
         {
-            border: 1px solid #5E7D65;
+            border:none;
             background:#5E7D65;
         }
+        .col--inset
+        {
+            box-sizing: border-box;
+            appearance: none;
+            padding:0 30px;
+            border: 1px solid #DBDCD4;
+            box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
+        }
     </style>
 
     <!-- form controls -->
@@ -161,7 +175,7 @@
             top: 5px;
         }
 
-
+        /*
         input[type='text'], input[type='number'], input[type='email'], select
         {
             position:relative;
@@ -181,14 +195,10 @@
         }
         select
         {
-            line-height:44px;
             padding-right:50px;
             background:url();
         }
-        button
+        */
-        {
-            line-height: 44px;
-        }
     </style>
 
     <!-- progress bar -->
@@ -333,7 +343,7 @@
         .txt--size-copy{ font-size:16px; line-height:24px; }
         .txt--size-h2{ font-size:24px; line-height:28px; }
         .txt--size-h1{ font-size:32px; line-height:48px; }
-
+        
         .txt--green-darken-01{ color: #4B6451; }
         .txt--col-white{ color:#ffffff; }
 
@@ -344,19 +354,24 @@
 
         .txt--uppercase{ text-transform: uppercase; }
         .txt--center{ text-align:center; }
+        .txt--tall{ line-height: 44px; }
 
         .gap--lg { margin:72px 0 0 0; }
         .gap--md { margin:47px 0 0 0; }
         .gap--sm { margin:24px 0 0 0; }
         .gap--xs { margin:12px 0 0 0; }
-
         .gap--md-right { margin-right:42px; }
         .gap--sm-right { margin-right:20px; }
+        
+        .pad--md { padding-left: 16px; padding-right: 16px; }
 
         .dsp--block{ display:block; }
-        .dsp--inline-block{ display:block; }
+        .dsp--inline-block{ display:inline-block; vertical-align: top; }
         .dsp--wide{ width:100%; }
-
+        .dsp--round{ border-radius:4px; }
+        .dsp--round-left{ border-top-left-radius:4px; border-bottom-left-radius:4px; }
+        .dsp--round-right{ border-top-right-radius:4px; border-bottom-right-radius:4px; }
+        .dsp--emboss{ border-left:1px solid rgba(0, 0, 0, 0.5);}
     </style>
 
     <!-- atomic coloration -->
@@ -382,8 +397,9 @@
     <div class="txt--size-h2 txt--wgt-black gap--sm">Payment Information</div>
     <div style="display:flex;">
 
-        <input id="check-1" type="radio" name="slot-1" value="option-1"/>
+        
         <div class="block col--empty col--warm-active gap--sm gap--md-right">
+            <input id="check-1" type="radio" name="slot-1" value="option-1"/>
             <label class="block__hit-area" for="check-1">
                 <span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br>
                 <img class="col--empty gap--xs gap--sm-right" src="icon-pay-visa.svg"/>
@@ -446,18 +462,30 @@
     </div>
 
     <div class="txt--size-h2 txt--wgt-black gap--lg">Listening Information</div>
-    <label class="txt--size-copy txt--wgt-bold gap--sm dsp--block">I primarily listen to Truth For Life with Alistair Begg on: </label>
+    <label for="channel" class="txt--size-copy txt--wgt-bold gap--sm dsp--block">I primarily listen to Truth For Life with Alistair Begg on: </label>
-    <select class="dsp--block dsp--wide gap--xs">
+    <select id="channel" class="dsp--block dsp--round dsp--wide col--inset txt--tall txt--wgt-bold txt--size-copy">
         <option>Please select option &hellip;</option>
     </select>
 
-    <button style="line-height:44px;" class="dsp--wide gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white">Continue Checkout</button>
+    <button class="dsp--wide dsp--round gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white txt--tall">Continue Checkout</button>
 
     <p class="txt--size-copy txt--wgt-bold">
-        Truth For Life needs the contact information you provide to contact you about promotions & services. You may unsubscribe from these communications at anytime. For info on how to unsubscribe and our privacy practices, visit Privacy Policy.
+        Truth For Life needs the contact information you provide to contact you about promotions & services. You may unsubscribe from these communications at anytime. For info on how to unsubscribe and our privacy practices, visit <a href="">Privacy Policy</a>.
     </p>
 
-    <!------------------------------>
+
+
+    <div style="display:flex;">
+        <label  class="col--drab   dsp--inline-block dsp--round-left  pad--md  txt--size-small txt--tall txt--wgt-black               ">$</label>
+        <input  class="col--inset  dsp--inline-block                  pad--md  txt--size-small txt--tall txt--wgt-normal              " type="number"/>
+        <button class="col--green                                     pad--md  txt--size-small txt--tall txt--wgt-black txt--col-white">$20 </button>
+        <button class="col--green  dsp--emboss                        pad--md  txt--size-small txt--tall txt--wgt-black txt--col-white">$30 </button>
+        <button class="col--green  dsp--emboss                        pad--md  txt--size-small txt--tall txt--wgt-black txt--col-white">$50 </button>
+        <button class="col--green  dsp--emboss dsp--round-right       pad--md  txt--size-small txt--tall txt--wgt-black txt--col-white">$100</button>
+    </div>
+
+
+    <hr>
 
     <div class="giving">
         <label for="amount">$</label>