main.styl

font-content = "Source Sans Pro"

color-border = #dadada
color-text-price = #cacaca

body
  background #fafafa
  font-family font-content
  margin 0
  padding 0

a
  text-decoration none

header
  background #262626
  padding 1rem
  margin 0
  display flex

header a
  color white

h1
  font-size 2rem
  font-weight 300
  margin 0
  flex-grow 1

input, button
  border 1px solid color-border
  padding 10px

.product-list
  display flex
  flex-wrap wrap
  margin 10px

  .product
    border 1px solid color-border
    margin-left 10px
    margin-top 10px
    background white

    .metadata
      border-bottom 1px solid color-border
      background #f2f2f2
      padding 15px

    .name
      color #7b7b7b
      text-transform uppercase
      font-size 14px

    .caption
      color #545454
      padding-top 5px

    .thumb
      width 350px
      height 350px
      padding 15px
      display flex

      img
        width 350px
        margin auto

    .price
      padding-right 10px
      padding-bottom 5px
      text-align right
      color color-text-price
      font-size 28px
      font-weight 600

.product-details
  padding 25px

h2
  font-size 28px
  font-weight 400
  margin 0
  color #727272

h3
  font-weight 400
  color #aaaaaa

.product-details
  .image
    max-width 600px

  label
    text-transform uppercase
    font-size 12px
    font-weight 600
    color #727272

  .purchase
    padding 25px 0


  input
    width 70px

  .configurations
    display flex
    flex-wrap wrap

  .configuration
    font-size 14px
    display flex
    border 1px solid color-border
    margin-bottom 5px
    margin-right 5px
    padding 5px

  .configuration:hover
    border 1px solid #aaaaaa

  .configuration.selected
    border 2px solid #727272

  .attributes
    border-right 1px solid color-border
    padding-right 25px
    min-width 250px

  .key
    text-transform uppercase
    font-weight 600

  .price
    font-size 18px
    font-weight 600
    color #727272
    padding 0 15px
    margin auto

.cart-icon
  display flex

  i
    font-size 36px
    color white

  .marker
    margin-left 5px
    background red
    border-radius 50%
    width 22px
    height 22px
    text-align center
    font-weight bold

.cart
  padding 15px

  .name
    text-transform uppercase
    color #7b7b7b
    font-size 14px

  .caption
    color #545454
    padding-top 5px

  .price
    padding 25px
    color color-text-price
    font-size 20px
    font-weight 600

  input
    width: 75px


.checkout
  padding 15px

  .form
    width: 500px
    margin: 25px 0

    tr
      td:first-child
        text-align right
        padding-right 10px
        width 1px

    input
      width 100%

  .card
    background white
    border 1px solid color-border
    padding 10px;