innhold/content/underskriftskampanje/medisinsk-cannabis-pa-resept/styles.css

/* PETITION */

article > h4 + h1 {margin-top:0}
article > h4 {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-weight: 600;
    color: oklch(from var(--color-grey) l c h / calc(l + 0.35));
}


main article .cover img {
    object-position: center 100%; /* adjustable focus point */
}

/* Button */
.button--petition {
  background-color: var(--color-green);
  color: white;
  outline: white;
  padding: 1rem 1.4rem;
}

/* CTA block */
.cta-block {
  margin-top: 0rem;
  > div {display: inline-block}
}
.cta-block__counter {
  margin-top: .8rem;
  font-size: 1rem;
  color: oklch(0.45 0.06 173.93);
  display: block;
  text-align: center;
}
.cta-block__count {
  font-weight: 700;
  color: var(--color-green)
}

/* Honeypot - hidden from users, visible to bots */
.hp-field { position: absolute; left: -5000px }

/* Messages */
.form-message {
  padding: 1rem;
  border-radius: .25rem;
  margin-top: 1.3em;
  p {margin-top:0}
  &.form-message--success {
    background-color: oklch(0.92 0.05 145);
    border: 1px solid oklch(0.85 0.08 145);
    color: oklch(0.35 0.08 145)
  }
  &.form-message--info {
    background-color: oklch(0.94 0.03 220);
    border: 1px solid oklch(0.88 0.05 220);
    color: oklch(0.4 0.06 220)
  }
  &.form-message--error {
    background-color: oklch(0.92 0.05 25);
    border: 1px solid oklch(0.85 0.08 25);
    color: oklch(0.4 0.12 25)
  }
}

.form-errors {
  background-color: oklch(0.92 0.05 25);
  border: 1px solid oklch(0.85 0.08 25);
  color: oklch(0.4 0.12 25);
  padding: 1rem;
  border-radius: .25rem;
  margin-top: 1.3em;
  ul { margin-top: .5rem; padding-left: 1.5rem }
}

/* Form */
form {
  margin-top: 1.3em;
  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    & > .form-group { flex: 1 1 min(100%, 20rem) }
  }
  .form-group {
    margin-top: 1.3em;
    label {
      display: block;
      font-weight: 600;
      margin-bottom: .3rem;
      .required { color: oklch(0.55 0.2 25) }
    }
    input[type="text"],
    input[type="email"],
    select {
      width: 100%;
      padding: .6rem;
      border: 1px solid oklch(0.8 0 0);
      border-radius: .25rem;
      font-family: inherit;
      font-size: 1rem;
      box-sizing: border-box;
      &:focus {
        outline: none;
        border-color: var(--color-green);
        box-shadow: 0 0 0 .15rem oklch(0.618 0.1176 173.93 / 0.25)
      }
    }
    small {
      display: block;
      margin-top: .3rem;
      color: oklch(0.55 0 0);
      font-size: .875rem
    }
  }
  fieldset {
    border: 1px solid oklch(0.85 0 0);
    border-radius: .25rem;
    padding: 1rem;
    margin-top: 1.3em;
    legend {
      font-weight: 600;
      padding: 0 .5rem
    }
    label {
      display: block;
      margin-top: .5rem;
      cursor: pointer;
      font-weight: normal;
      input[type="radio"] { margin-right: .5rem }
    }
  }
  .privacy-notice {
    background-color: oklch(0.96 0.01 220);
    border: 1px solid oklch(0.88 0.03 220);
    border-radius: .25rem;
    padding: .8rem 1rem;
    .privacy-intro {
      margin: 0;
      color: oklch(0.4 0.05 220);
      font-size: .875rem;
      a {
        color: oklch(0.4 0.1 220);
        font-weight: 600;
        text-decoration: underline;
        &:hover { color: oklch(0.3 0.12 220) }
      }
    }
  }
  .info-box {
    border: 1px solid;
    border-radius: .25rem;
    padding: 1rem;
    p { margin-top: 0; font-size: .9rem; line-height: 1.5 }
    a { font-weight: 600; text-decoration: underline }
    &.info-box--green {
      border-color: oklch(0.85 0.05 145);
      background-color: oklch(0.98 0.01 145);
      a { color: oklch(0.4 0.1 145); &:hover { color: oklch(0.3 0.12 145) } }
    }
    &.info-box--yellow {
      p {font-size: 0.8rem}
      border-color: oklch(0.85 0.1 85);
      background-color: oklch(0.96 0.04 85);
      a { color: oklch(0.45 0.1 85); &:hover { color: oklch(0.35 0.12 85) } }
    }
  }
  .consent-group {
    .consent-label {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      cursor: pointer;
      font-weight: normal;
      & + .consent-label { margin-top: .8rem }
      input[type="checkbox"] {
        margin-top: .2rem;
        cursor: pointer;
        width: 1.1rem;
        height: 1.1rem;
        flex-shrink: 0
      }
      span {
        flex: 1;
        font-size: .9rem;
        line-height: 1.5;
        a {
          color: oklch(0.4 0.1 145);
          font-weight: 600;
          text-decoration: underline;
          &:hover { color: oklch(0.3 0.12 145) }
        }
      }
      .required {
        color: oklch(0.55 0.2 25)
      }
    }
  }
}

/* Signatures list */
.petition-signatures {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid oklch(0.85 0 0);
  h2 { margin-top: 0 }
  .signature-order {
    color: oklch(0.55 0 0);
    font-size: .875rem;
    margin-top: .5rem
  }
  ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    li {
      display: flex;
      flex-wrap: wrap;
      gap: .25rem 1rem;
      padding: .5rem .6rem;
      border-bottom: 1px solid oklch(0.9 0.01 173.93);
      &:nth-child(odd) { background-color: white }
      &:nth-child(even) { background-color: oklch(0.96 0.005 173.93) }
      &:last-child { border-bottom: none }
    }
  }
  .signature-name {
    font-weight: 500;
    flex: 1 1 12rem
  }
  .signature-date {
    color: oklch(0.55 0 0);
    font-size: .875rem
  }
}

/* Warning box (thank you page) */
.warning-box {
  background-color: oklch(0.93 0.07 85);
  border: 1px solid oklch(0.85 0.15 85);
  border-radius: .25rem;
  padding: 1rem 1.5rem;
  margin-top: 1.5rem;
  h2 {
    color: oklch(0.5 0.1 85);
    margin-top: 0;
    font-size: 1.25rem
  }
}