/* HabitFlower site styles. Loosely modeled on typestyle.app: a light,
   friendly single page with the app running in an iPhone frame on the
   left and the copy on the right. */

:root {
  --gold: #d9a32a;
  --deep-gold: #9c7210;
  --pill-gold: #a5770d;
  --bg: #f2f2f7;
  --text: #333;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
}

a {
  color: var(--deep-gold);
  text-decoration: underline;
}

a:hover {
  color: var(--gold);
}

h1,
h2 {
  line-height: 1.2;
}

ul {
  padding-left: 1.05em;
}

li {
  margin-bottom: 0.3em;
}

/* Layout: phone column + content column. */

#site-content {
  display: flex;
  gap: 3em;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5em 15px 2em;
}

main {
  flex: 1;
  min-width: 0;
}

#site-header {
  padding-bottom: 0.3em;
}

#site-icon-link {
  display: inline-block;
  line-height: 0;
  margin-bottom: 0.6em;
}

#site-title {
  margin: 0;
  padding: 0;
}

#site-title a {
  color: inherit;
  text-decoration: none;
}

#site-icon {
  width: 68px;
  height: 68px;
  /* The iOS squircle, approximately. */
  border-radius: 22%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  #site-icon {
    border-color: rgba(255, 255, 255, 0.15);
  }
}

#app-store-badge {
  height: 50px;
  width: auto;
}

#site-footer p {
  display: inline-block;
  padding: 0.2em 1em;
  font-size: 0.7em;
  font-weight: 600;
  color: white;
  background-color: var(--pill-gold);
  border-radius: 2em;
}

#site-footer a {
  color: white;
}

/* The iPhone 17 Pro frame around the demo video. The video already
   carries the Dynamic Island, so the frame only needs the body, the
   screen's rounded clip, and the side buttons. */

.iphone-frame {
  position: relative;
  width: 280px;
  padding: 10px;
  background: #050505;
  border: 2px solid #48484c;
  border-radius: 52px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}

/* Power button. */
.iphone-frame::before {
  content: "";
  position: absolute;
  right: -5px;
  top: 27%;
  width: 3px;
  height: 12%;
  background: #48484c;
  border-radius: 0 2px 2px 0;
}

/* Action button and the volume pair. */
.iphone-frame::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 20%;
  width: 3px;
  height: 24%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(
    #48484c 0 16%,
    transparent 16% 30%,
    #48484c 30% 62%,
    transparent 62% 76%,
    #48484c 76% 100%
  );
}

.iphone-screen {
  overflow: hidden;
  border-radius: 40px;
  background: #000;
}

.iphone-screen video {
  display: block;
  width: 100%;
  height: auto;
}

/* The phone shows beside the text on wide screens and inline with the
   copy on narrow ones. */

#iphone-video-desktop {
  display: none;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 2em;
  padding-top: 1em;
}

#iphone-video-mobile {
  display: flex;
  justify-content: center;
  margin: 1.5em 0;
}

#iphone-video-mobile .iphone-frame {
  max-width: 100%;
}

@media (min-width: 640px) {
  #iphone-video-desktop {
    display: block;
  }

  #iphone-video-mobile {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2c2c2e;
    --text: #eee;
    --deep-gold: #e0b04a;
  }

  .iphone-frame {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  }
}