styles.css

/*
  The Rules of Acquisition @ ferengi.bible
  Stylesheet
  Copyright (C) 2024 Joey Parrish
  Licensed under CC0 1.0 (see LICENSE)
*/

/* Basic colors, assuming light mode. */
body {
  background: white;
  color: black;
  font-family: 'Roboto', serif;
  font-weight: 400;
  font-style: normal;
}
* {
  color: black;
  border-color: black;
}

/* Everything below is based on the root font size.  Make that scale with the
 * viewport. */
html {
  font-size: calc(min(3vw,3vh));
}

/* Font for Ferengi glyphs. */
@font-face {
  font-family: 'Ferengi';
  src: url('Ferengi.woff2') format('woff2');
  font-display: block;
}
.ferengi {
  font-family: 'Ferengi';
}

/* Font for arrows. */
@font-face {
  font-family: 'OpenArrow';
  src: url('OpenArrow-Regular.woff2') format('woff2'),
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2190-21ff;
}

/* Always hidden. */
.hidden {
  display: none;
}

/* Every page is hidden by default. */
.page {
  display: none;
}

/* The upsell dialog is hidden by default. */
.upsell {
  display: none;
}

/* A page whose input is checked is shown. */
input:checked + .page {
  display: flex;
}

/* A premium page whose input is checked has the upsell shown. */
input:checked + .page.premium ~ .upsell {
  display: flex;
}

/* Blur the rule in a "premium" page, and make the text unselectable. */
.page.premium .rule {
  filter: blur(0.1em) url(#distort);
  pointer-events: none;
  user-select: none;
}

/* Margin around the body */
body {
  margin: 1rem;
}

/* A smaller container for the main content. */
#container {
  position: relative; /* container for absolute-positioned children */
  max-width: 30rem;
  margin: auto;
}

/* Each page of the book, including the cover. */
.page {
  position: relative; /* container for absolute-positioned children */

  flex-direction: column;
  justify-content: center;
  text-align: center;

  border: 0.1rem solid;
  padding: 2rem;
  height: 24rem;
}

.number {
  font-size: 4rem;
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
}

.rule {
  font-size: 2rem;
  max-height: 6em;
}

/* Navigation links. */
.nav-left, .nav-right, .nav-cover {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;

  background: none;
  border: 0.1rem solid;
  border-radius: 0.5em;
  cursor: pointer;

  box-sizing: border-box;
  z-index: 2;

  /* The unicode symbols I'm using for these end up misaligned in Roboto.
   * They look fine in Arial, but Android doesn't have that.
   * Rather than load a web font for Arial or something like it, use a very
   * small font that only contains arrow glyphs. */
  font-family: 'OpenArrow';
  /* With a consitent font for these symbols, now I can make some small
   * alignment adjustments and know that it will always be correct. */
  font-size: 1.3rem;
  line-height: 1.3rem;
  padding: 0.2rem 0.8rem;
  padding-top: 0.45rem;
}

.nav-left {
  left: 0.5rem;
  bottom: 1em;
}

.nav-right {
  right: 0.5rem;
  bottom: 1em;
}

.nav-cover {
  left: 0.5rem;
  top: 0.5rem;
}

/* The upsell overlay for "premium" rules (that don't actually exist). */
.upsell {
  position: absolute;
  bottom: 1rem;
  /* Not wall-to-wall, to ensure nav buttons are exposed: */
  left: 1rem;
  right: 1rem;

  /* Padding around the text, so the background scrim covers some of the rule
   * beneath */
  padding: 1rem;
  padding-top: 6rem;
  padding-bottom: 3rem;

  font-size: 1.5rem;

  flex-direction: column;
  justify-content: end;
  background: linear-gradient(
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.8) 25%,
      rgba(255, 255, 255, 1));

  text-align: center;
  z-index: 1;
}

/* Cover material. */
#p0 {
  justify-content: start;
}

.title {
  font-size: 3rem;
  filter: drop-shadow(0 0 1rem white);
}

.title.ferengi {
  /* Put this text in the background, behind the English title. */
  position: absolute;
  opacity: 40%;
  font-size: 2.5rem;
  line-height: 140%;
  top: 0rem;
  left: 2rem;
  right: 2rem;
  pointer-events: none;
}

.author {
  font-size: 1.5rem;
  margin-top: 1rem;
}

.publisher {
  margin-top: 1rem;
  font-size: 0.7rem;
}

.promo {
  position: absolute;
  right: 1rem;
  bottom: 2rem;
  width: 10rem;
  font-style: italic;
  font-size: 1.5rem;
  padding: 2rem;
}

.starburst {
  position: absolute;

  /* Combined with preserveAspectRatio="none", this stretches the SVG. */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;

  /* Keep it under the promo text. */
  z-index: -1;

  fill: #bbb;
}


/* Sponsor dialog. */
#sponsorDialog {
  /* Hidden by default. */
  display: none;
  /* Covering the page. */
  background: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  border: 0.1rem solid;
  z-index: 3;
  /* Same font size as the upsell dialog. */
  font-size: 1.5rem;
}
#sponsorDialog.shown {
  display: unset;
}
#sponsorDialog div {
  margin-top: 1rem;
}
#sponsorDialog div:first-child {
  margin-top: 2rem;
}
#sponsorDialog #sponsorClose {
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin-top: 0;
}

/* Color tweaks for dark mode. */
@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
  * {
    color: white;
    border-color: white;
  }
  .title {
    filter: drop-shadow(0 0 1rem black);
  }
  .starburst {
    /* This should look fine in both light and dark mode. */
    fill: #888;
  }
  .upsell {
    background: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.8) 25%,
        rgba(0, 0, 0, 1));
  }
  #sponsorDialog {
    background: black;
  }
}