/*

  boxes.css

  a css framework for making landing pages
  for people who don't like thinking about css

  guiding ideas:
  - landing pages should be simple to make
  - you shouldn't have to think -- just write/design
  - the page should adapt to different screen sizes automatically

  rules
  - aspect ratios of boxes always maintained
  - fewer classes the better
  - fewer concepts the better (i.e. no container/row if possible)

  features
  - differently sized boxes with as few classes as possible
  - navigation row with mobile menu
  - change the background color or text color of boxes and still look good

*/

/* GENERAL CSS RESET */

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  line-height: 1.44;
  font-size: 18px;
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #111827;
}

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
}

img,
picture,
video {
  display: block;
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*

  BUTTON RESET

*/

button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  cursor: pointer;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*

  MAIN

*/

/* VARIABLES */
:root {
  --desktop-box-width: 50vw;
  --desktop-box-height: 40vw;
  --desktop-box-max-width: 600px;
  --desktop-box-max-height: 480px;
}

/* COLORS */

.white {
  color: #fff;
}

.black {
  color: #111827;
}

.green {
  color: #00965a;
}

.blue {
  color: #007dfa;
}

.yellow {
  color: #e67700;
}

.background-green {
  background-color: #00d07d;
}

.background-blue {
  background-color: #0f97fc;
}

.background-yellow {
  background-color: #FBBF24;
}

/* TEXT UTILITIES */

.text-center {
  text-align: center;
}

.weight-100, .text-thin {
  font-weight: 100;
}
.weight-200, .text-extra-light, .text-ultra-light {
  font-weight: 200;
}
.weight-300, .text-light {
  font-weight: 300;
}
.weight-400, .text-normal, .text-book, .text-regular {
  font-weight: 400;
}
.weight-500, .text-medium {
  font-weight: 500;
}
.weight-600, .text-semi-bold, .text-demi-bold {
  font-weight: 600;
}
.weight-700, .text-bold {
  font-weight: 700;
}
.weight-800, .text-extra-bold, .text-ultra-bold {
  font-weight: 800;
}
.weight-900, .text-black, .text-heavy {
  font-weight: 900;
}

/* ALIGNMENT */

.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 
  SPACING

  todo: decide whether to keep these or not
*/

/* technique from: https://every-layout.dev/layouts/stack/ */
section *:not(section) + *:not(section) {
  margin-top: 1rem;
}

/* 
  we don't just default to giving all non-media boxes padding because
  we can have nested boxes and we don't want the parent box to have padding
  in that case
*/
.content {
  padding: 1.6rem 2rem; /* 4:5 ratio, same as boxes */
}

/* TYPOGRAPHY */

.h1 {
  font-size: 60px;
  line-height: 1.1;
}

.h2 {
  font-size: 48px;
  line-height: 1.15;
}

.h3 {
  font-size: 36px;
  line-height: 1.2;
}

.h4 {
  font-size: 30px;
  line-height: 1.25;
}

.h5 {
  font-size: 24px;
  line-height: 1.3;
}

.h6 {
  font-size: 21px;
  line-height: 1.4;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: -.1em;
}

/* FORMS */

/* default button style */
.button {
  overflow: visible;
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-block;
  white-space: nowrap;
  margin-right: 11px;
  padding: 17px 2rem 19px;
  cursor: pointer;
  font-weight: bold;
}

:not(section.background-yellow) .button:not(.secondary) {
  color: #fff;
  background: #ed3488;
  background: linear-gradient(12deg, #ed3488 85%, #f37ab1 100%);
  border-radius: 9999px;
  box-shadow: 1px 2px 3px rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.20);
}

.button:not(.secondary):hover {
  filter: brightness(102%) saturate(104%);
}

/* purple button */
section.background-yellow .button:not(.secondary) {
  color: #fff;
  background: #7c19e6;
  background: linear-gradient(12deg, #7c19e6 85%, #a45eee 100%);
}

section.background-yellow .button:not(.secondary):hover {
  filter: brightness(105%) saturate(107%);
}

/* orange button */
section.background-blue .button:not(.secondary) {
  color: #fff;
  background: #f07602;
  background: linear-gradient(12deg, #f07602 85%, #fdaa5b 100%);
}

section.background-blue .button:not(.secondary):hover {
  filter: brightness(102%) saturate(104%);
}

/* blue button */
section.background-green .button:not(.secondary) {
  color: #fff;
  background: #4429d4;
  background: linear-gradient(12deg, #4429d4 85%, #745fde 100%);
}

section.background-green .button:not(.secondary):hover {
  filter: brightness(105%) saturate(107%);
}

/* secondary button */
.button.secondary {
  color: #273345;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.4);
  border-radius: 9999px;
  background: rgba(255,255,255,.16);
  box-shadow: 1px 2px 3px rgba(0,0,0,.08);
  text-shadow: none;
}

section:not(.background-yellow):not(.background-green):not(.background-blue) .button.secondary {
  box-shadow: 1px 1px 4px rgba(0,0,0,.16);
}

.button.secondary:hover {
  color: #111827;
  background: rgba(255,255,255,.25);
}

section:not(.background-yellow):not(.background-green):not(.background-blue) .button.secondary:hover {
  color: #111827;
  background: #F9FAFB;
}


/* text & email inputs */
input:not([type]), input[type="text"], input[type="email"] {
  display: block;
  width: 100%;
  padding: 14px 16px 15px;
  border: 1px solid rgba(20, 20, 20, .75);
  border-radius: 3px;
}

/* floating label technique from: https://csslayout.io/floating-label/ */
.floating-label-container {
  position: relative;
}

.floating-label-container input:not([type]):not(:placeholder-shown), .floating-label-container input[type="text"]:not(:placeholder-shown), .floating-label-container input[type="email"]:not(:placeholder-shown) {
  padding: 22px 16px 7px;
}

.floating-label-container input:not([type]):not(:placeholder-shown) + label, .floating-label-container input[type="text"]:not(:placeholder-shown) + label, .floating-label-container input[type="email"]:not(:placeholder-shown) + label {
  pointer-events: none;
  opacity: .75;
  transform: translate(0, -50%);
  font-size: 14px;
}

.floating-label-container input:not([type]):not(:placeholder-shown) + label::after, .floating-label-container input[type="text"]:not(:placeholder-shown) + label::after, .floating-label-container input[type="email"]:not(:placeholder-shown) + label::after {
  content: ":";
}

.floating-label-container label {
  position: absolute;
  left: 17px;
  top: 0;
  opacity: 0;
  transition: transform 200ms;
}

/* 

  breakpoint:

  mobile and default styles 

*/

/* 

  top-level boxes 

  aspect ratio = 5 width : 4 height

*/

body > section, body > section > section {
  overflow: hidden;
  /* need to use % instead of vw because scrollbars in MS Edge take up width but aren't included in vw */
  width: 100%;
  /* tablet viewport: let the boxes expand a little and not leave so much whitespace */
  max-width: calc(var(--desktop-box-max-width) * 1.25);
  margin-left: auto;
  margin-right: auto;
}

/* 
  media boxes always maintain their aspect ratios 
  other boxes don't maintain this aspect ratio on mobile
  and can expand/contract their height based on their content
*/
.media {
  position: relative;
  padding: 0;
}

body > .media, body > section > .media {
  height: calc(var(--desktop-box-height) * 2);
  max-height: calc(var(--desktop-box-max-height) * 1.25);
}

.media img, .media svg, .media video, .media iframe, .media object, .media embed, .media picture, .media canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 

  breakpoint:

  tablet and desktop devices 

*/
@media (min-width: 600px) {

  /* 
    on tablet, non-media boxes still maintain their width to height aspect ratio 
    but they lose this defined height on mobile, where the content of the box is 
    allowed to determine the height of the box
  */

  body > section:not(.content) {
    height: calc(var(--desktop-box-height) * 2);
    max-height: calc(var(--desktop-box-max-height) * 1.25);
  }

  /* 
    
    second-level boxes 

    aspect ratio = 5 width : 4 height

    types:
    - tall
    - wide

  */

  body > section > section, body > section > .media {
    float: left;
    width: 50%;
    height: 50%;
  }

  body > section > .tall, body > section > .tall.media {
    height: 100%;
  }

  body > section > .wide, body > section > .wide.media {
    width: 100%;
  }

}

/* 

  breakpoint:

  small desktop devices (1100px - 1199.9999px)

  difficult spot because it's the only place where a boxes with text in them
  shrink AND can't expand vertically (like they can on mobile)

*/

@media (min-width: 1100px) and (max-width: 1199.999px) {

  body {
    font-size: 18px;
  }

  .h1 {
    font-size: 54px;
    line-height: 1.1;
  }

  .h2 {
    font-size: 42px;
    line-height: 1.15;
  }

  .h3 {
    font-size: 32px;
    line-height: 1.2;
  }

  .h4 {
    font-size: 26px;
    line-height: 1.25;
  }

  .h5 {
    font-size: 21px;
    line-height: 1.3;
  }

  .h6 {
    font-size: 18px;
    line-height: 1.4;
  }

}

/* 

  breakpoint:

  desktop devices 

*/
@media (min-width: 1100px) {

  /* 
    cute hack that lets us use the body as a container to center 
    everything inside it 
  */
  body {
    padding-left: calc(50vw - 600px);
    padding-right: calc(50vw - 600px);
  }

  /* 

    top-level boxes 

    aspect ratio = 5 width : 4 height

  */

  body > section, body > section.media {
    float: left;
    /* need to use % instead of vw because scrollbars in MS Edge take up width but aren't included in vw */
    width: 50%;
    max-width: var(--desktop-box-max-width);
    height: var(--desktop-box-height);
    max-height: var(--desktop-box-max-height);
  }

  .desktop-align-items-center {
    display:flex;
    align-items:center;
  }

}