notice_and_comment/static/regulations/css/scss/module/_nc-homepage-custom.scss
/*
Notice & Comment Homepage styles
==========================================================================
nc-homepage-custom.scss styles for landing page
*/
.nc-homepage-header {
height: auto;
position: relative;
.main-head {
@include sans-font-regular;
position: relative;
z-index: 1;
}
}
$section_padding: 100px;
.nc-homepage {
background-color: $white;
@include sans-font-regular;
// positioning hack to avoid 1px top white border
left: 0;
position: absolute;
right: 0;
.hero-background {
background-color: $aqua_blue;
background-image: url('../../regulations/img/homepage-hero.jpg');
background-position: top center;
background-repeat: no-repeat;
left: 0;
height: 394px;
position: absolute;
right: 0;
}
h1 {
@include sans-font-light;
font-size: 44px;
line-height: 48px;
margin-top: 0;
}
h2 {
@include sans-font-light;
font-size: 40px;
line-height: 45px;
}
.hero {
background-color: transparent;
border-bottom: none;
overflow: auto;
padding: 50px 0 0 0;
position: relative;
width: 100%;
}
.hero-content {
max-width: 820px;
margin: auto;
h2 {
@include sans-font-bold;
font-size: 34px;
margin: 35px 0 25px 0;
}
}
/*
Proposed Rule Box
================
*/
$proposed_rule_padding: 25px;
.proposed-rule {
background-color: $white;
border-left: 1px solid $regular_gray;
border-right: 1px solid $regular_gray;
border-top: 1px solid $regular_gray;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
padding: $proposed_rule_padding;
.comments-date {
border-bottom: 1px solid $aqua_blue_2;
font-size: 18px;
margin-bottom: 20px;
padding-bottom: 20px;
.due {
float: left;
}
.date {
font-size: 15px;
float: right;
.fa {
color: $uswds_dark_red;
padding-right: 5px;
}
}
}
.agency {
color: $dark_blue;
@include sans-font-bold;
display: inline-block;
line-height: 45px;
font-size: 40px;
vertical-align: top;
width: 100px;
}
.proposed-rule-title {
display: inline-block;
@include sans-font-light;
font-weight: 500;
font-size: 24px;
max-width: 600px;
vertical-align: top;
}
}
.read-proposed-rule {
background-color: $dark_blue;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
color: $light_gray;
font-size: 17px;
padding: 7px 7px 7px 125px;
.fa {
padding-left: 5px;
vertical-align: middle;
}
a {
color: $white;
display: block;
height: inherit;
width: inherit;
}
}
.read-closed-proposed-rule {
background-color: $light_gray;
color: $black;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
font-size: 17px;
padding: 10px $proposed_rule_padding;
strong {
float: left;
}
.fa {
padding-left: 5px;
vertical-align: middle;
}
a {
color: $blue;
text-align: right;
display: block;
}
}
/*
Call Out Comment after Hero
================
*/
.call-out {
background-color: $light_gray;
margin-top: 60px;
padding: 30px 0;
text-align: center;
}
.call-out-content {
@include sans-font-light;
font-size: 34px;
line-height: 38px;
margin: auto;
max-width: 620px;
strong {
font-weight: 500;
}
}
/*
General section styles
================
*/
section {
padding-bottom: $section_padding;
padding-top: $section_padding;
}
.read-and-write,
.about-this-tool {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
/*
Read and write with ease
================
*/
.read-and-write {
ul {
margin: 50px 0;
padding: 0;
li {
margin: 0 0 50px 0;
}
.image {
display: inline-block;
text-align: right;
width: 230px;
}
.content {
display: inline-block;
margin: 10px 0 0 30px;
max-width: 550px;
vertical-align: top;
}
h3 {
margin-bottom: 0;
}
p {
margin-top: 0.5em;
}
}
.other-ways {
@include sans-font-bold;
max-width: 650px;
.button {
align-items: center;
background-color: $light_gray;
cursor: pointer;
display: -webkit-flex;
display: flex;
padding: 10px 15px;
.button-title {
align-self: flex-start;
}
.button-icon {
margin-left: auto;
}
.button-close {
display: none;
}
}
.collapsible {
@include sans-font-regular;
margin: 25px 15px;
ul {
margin: 0;
}
li {
list-style-type: disc;
margin: 0 0 10px 30px;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
/*
Build a good comment
================
*/
.good-comment {
background-color: $light_gray;
h2 {
margin-bottom: 1.2em;
}
ul {
padding-left: 0;
margin-bottom: 50px;
}
li {
margin-bottom: 2em;
position: relative;
.triangle {
background-color: $orange;
margin-right: 40px;
position: absolute;
text-align: left;
top: 2px;
transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
&:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
&:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
&:before,
&:after {
background-color: inherit;
content: '';
position: absolute;
}
}
.triangle,
.triangle:before,
.triangle:after {
border-top-right-radius: 30%;
height: 1em;
width: 1em;
}
span {
display: inline-block;
margin-left: 60px;
}
}
.more-tips {
display: inline-block;
@include sans-font-bold;
vertical-align: top;
width: 170px;
}
.more-tips-links {
display: inline-block;
max-width: 450px;
vertical-align: top;
}
}
.good-comment-content {
margin: auto;
max-width: 670px;
}
/*
About this tool
================
*/
.about-this-tool {
h2 {
margin-bottom: 1.2em;
}
.about-this-tool-content {
display: -webkit-flex;
display: flex;
margin-top: 25px;
}
.about-this-tool-info {
padding-left: 40px;
}
.feedback {
background-color: $light_orange;
@include sans-font-bold;
padding: 15px 25px;
}
h4 {
text-transform: none;
margin-bottom: 5px;
}
p {
margin-top: 0;
}
}
/*
Footer partnership logos
================
*/
.footer {
border-top: 2px solid $blue;
display: -webkit-flex;
display: flex;
padding: 20px 13px;
span {
display: inline-block;
font-size: 0.8em;
line-height: 4.5em;
}
.logo {
display: inline-block;
margin: 8px 0 0 8px;
}
.privacy-footer {
margin-left: auto;
}
}
}