redbadger/website-honestly

View on GitHub
site/components/policy/style.css

Summary

Maintainability
Test Coverage
@value badgerRed, badgerBlack, badgerRedOnWhite, badgerRedOnBlack from "../../css/_colors.css";
@value mediumScreen, largeScreen from "../../css/_sizes.css";

.mb0 {
  margin-bottom: 0;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.simpleHeading {
  font-size: 16px;
  line-height: 1.2;
  font-family: 'ProximaNova-Bold', sans-serif;
}

.largeSimpleHeading {
  composes: serif from '../../css/typography/_fonts.css';
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.effectiveDate {
  composes: serif from '../../css/typography/_fonts.css';
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 30px;
}

.container {
  padding: 30px 20px 60px;
}

.container a {
  color: badgerBlack;
  border-bottom: 1px solid badgerRedOnWhite;
  text-decoration: none;
  word-break: break-all;
}

.container a:hover,
.container a:focus {
  color: badgerRedOnWhite;
  border-bottom: 1px solid badgerRedOnBlack;
}

.policyText p b {
  font-family: 'ProximaNova-Bold', sans-serif;
}

.policyList {
  composes: lightSerif from '../../css/typography/_fonts.css';
  list-style: disc;
  padding-left: 17px;
  font-size: 16px;
  line-height: 1.5;
}

@media mediumScreen {
  .container {
    margin: 0 auto;
    max-width: 690px;
  }

  .container a {
    word-break: normal;
  }

  .number {
    top: -9px;
  }

  .statementNumber {
    top: 0;
  }
}