/* ==========================================================================
   BetterClean Laundry — signage stylesheet
   You should not need to edit this file. Edit content.js instead.

   Design space is 3072 x 1728 "design pixels" (16:9).
   1rem = 10 design pixels. The root font-size is set by script so the
   whole sign scales to fill any screen exactly.
   ========================================================================== */

@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cabin-latin-700-normal.woff2') format('woff2'),
       url('fonts/cabin-latin-700-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cabin';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cabin-latin-700-italic.woff2') format('woff2'),
       url('fonts/cabin-latin-700-italic.woff') format('woff');
}

:root {
  --green-dark:    #076C39;
  --green-mid:     #099247;
  --green-lite:    #41AD49;
  --heading-left:  #199853;
  --heading-right: #099247;
  --ink-left:      #231F20;
  --ink-right:     #000000;

  /* Fallback if script hasn't run yet: scale off viewport width. */
  font-size: calc(100vw / 307.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  font-family: 'Cabin', 'Gill Sans Nova', 'Gill Sans', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- stage -- */

.stage {
  position: relative;
  width: 307.2rem;
  height: 172.8rem;
  overflow: hidden;
  background: #DDE4EC;
}

.stage .bubbles {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: url('bubbles.jpg') center center no-repeat;
  background-size: 100% 100%;
}

.stage .chrome {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
}

/* ---------------------------------------------------------- left panel -- */

.panel-left {
  position: absolute;
  left: 11.2rem;
  top: 0;
  width: 118rem;
  height: 100%;
  color: var(--ink-left);
}

.panel-left .title {
  position: absolute;
  top: 40.4rem;
  left: 0;
  font-size: 9rem;
  line-height: 1.15;
  color: var(--heading-left);
  white-space: nowrap;
}

.prices {
  position: absolute;
  top: 53.8rem;
  left: 0;
  width: 100%;
  font-size: 8.1rem;
  line-height: 1;
}

.prices .row {
  display: flex;
  align-items: center;
  height: 19.415rem;
}

.prices .name { width: 42.2rem; flex: none; }
.prices .size { width: 40.2rem; flex: none; }
.prices .cost { flex: 1; }

/* Divider between the two halves */
.divider {
  position: absolute;
  left: 131.3rem;
  top: 32rem;
  width: 0.3rem;
  height: 123.4rem;
  background: var(--green-dark);
}

/* --------------------------------------------------------- right panel -- */

.panel-right {
  position: absolute;
  left: 136.9rem;
  top: 0;
  width: 164.5rem;
  height: 100%;
  color: var(--ink-right);
  text-align: center;
}

.panel-right .title {
  position: absolute;
  top: 40.4rem;
  left: 0;
  width: 100%;
  font-size: 9rem;
  line-height: 1.15;
  color: var(--heading-right);
}

/* The body box. An inner wrapper holds the content so its natural
   height can be measured; the sign script then sets a base font-size
   on .body to scale everything to fit. All block sizes below are in
   `em`, so they scale together. */
.panel-right .body {
  position: absolute;
  top: 48rem;
  left: 0;
  width: 100%;
  height: 91rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 6.6rem;
  line-height: 1.2;
}

/* Slides with a small italic sub-heading start from the top, so the
   sub-heading sits tight under the green title. */
.panel-right .body.has-sub {
  top: 51rem;
  height: 92rem;
  justify-content: flex-start;
}

.panel-right .fit {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* No dead space at the very top or bottom of the block */
.panel-right .fit > *:first-child { margin-top: 0; }
.panel-right .fit > *:last-child  { margin-bottom: 0; }

.blk-p {
  font-size: 1em;
  line-height: 1.2;
  margin: 0.60em 0;
}

.blk-big {
  font-size: 1.303em;
  line-height: 1.22;
  margin: 0.256em 0;
}

.blk-sub {
  font-size: 0.682em;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 0.756em;
}

.blk-note {
  font-size: 0.85em;
  font-style: italic;
  line-height: 1.2;
  margin-top: 0.653em;
}

.blk-rule {
  height: 0.3rem;
  background: var(--green-dark);
  width: 64%;
  margin: 0.636em auto;
  flex: none;
}

.blk-bullets {
  text-align: left;
  font-size: 0.803em;
  line-height: 1.16;
}

.blk-bullets li {
  list-style: none;
  position: relative;
  padding-left: 0.7em;
  margin: 0 0 1.434em 0;
}

.blk-bullets li:last-child { margin-bottom: 0; }

.blk-bullets li:before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
}

/* -------------------------------------------------------------- footer -- */

.hours {
  position: absolute;
  left: 32.1rem;
  top: 161.4rem;
  font-size: 7.3rem;
  font-style: italic;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.brand {
  position: absolute;
  right: 12.1rem;
  bottom: 6.4rem;
  width: 54.2rem;
  height: auto;
  display: block;
}