Review/rewrite markup and CSS

[jessevondoom]

The Lodge CSS and markup needs a deep inspection at least, but likely a rewrite. It works mostly fine right now, but it can likely be done with less markup/rules and a better semantic flow. Tighter type styles for the overlay are needed, we should add some standardized buttons for a few situations, and ultimately this sets the stage for any changes from the checkout flow UX work.

A lot of this will get broken out into multiple tickets but as an overview:

• Core overlay markup and CSS
  • A 100% x 100% overlay background that will scroll on overflow. (We disable overflow on the body and capture it when the overlay is open, returning it as the overlay is closing. This keeps scroll positions constant and gives the ability to show longer content like a checkout receipt in a nicely scrolling overlay.)
  • A close button in the upper right corner, some animation effects on hover, not present in modal mode
  • A content/presentation space, semi floated center/center with the ability to grow vertically as needed
  • Add markup and styles for hidden-by-default OK/Cancel buttons for modal, close button for messaging
  • Remove as many wrappers and non-semantic elements as possible from markup
• Type/input styles
  • Opinionated base font and type styles (can be overridden, but only with !important so it doesn't happen accidentally)
  • Styles for h2/h3/labels/buttons/inputs
• Review markup and styles for checkout, input modules
  • Get all the canned experiences up to the same standard as the overlay itself