app/assets/stylesheets/modules/pricing_table.scss
.pricing-table {
max-width: calc(100% + 80px) !important;
text-align: center;
border-spacing: 40px 0;
margin: 0 -40px;
border-collapse: collapse;
tr:nth-child(1) td:nth-child(2) {
color: #82C451;
font-size: 20px;
height: 30px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 20px 0;
}
tr:nth-child(n + 2) td:nth-child(2) {
background-color: #E4F1D9;
}
tr:nth-child(2) {
td {
padding-top: 20px;
font-size: 26px;
font-weight: 300;
letter-spacing: 2px;
padding-bottom: 20px;
text-transform: uppercase;
}
div {
height: 8.5px;
width: 85%;
text-align: center;
margin: 20px auto;
}
td:nth-child(1) div {
background-color: #FFB305;
}
td:nth-child(2) div {
background-color: #82C451;
}
td:nth-child(3) div {
background-color: #3782BA;
}
td:nth-child(4) div {
background-color: #FF5656;
}
}
tr:nth-child(3) {
h1 {
font-size: 40px;
font-weight: 100 !important;
margin-bottom: 0px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 40px;
font-weight: 500 !important;
margin-top: 0px;
font-style: italic;
color: $gray-darker;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
font-size: 24px;
font-weight: 100;
margin-bottom: 0px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h4 {
font-size: 24px;
font-weight: 400 !important;
margin: 0px 0px 40px 0px;
font-style: italic;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
display: inline-block;
width: 238px;
height: 63px;
text-decoration: none;
border-radius: 5px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.15) inset;
color: #ffffff;
line-height: 61px;
font-size: 24px;
margin-bottom: 20px;
}
td:nth-child(1) a {
background: #FFB305;
}
td:nth-child(1) a:hover {
background-color: darken(#FFB305, 3%);
}
td:nth-child(2) a {
background: #82C451;
}
td:nth-child(2) a:hover {
background-color: darken(#82C451, 3%);
}
td:nth-child(3) a {
background: #3782BA;
}
td:nth-child(3) a:hover {
background-color: darken(#3782BA, 3%);
}
td:nth-child(4) a {
background: #FF5656;
}
td:nth-child(4) a:hover {
background-color: darken(#FF5656, 3%);
}
}
}