// Include the variables. @import “../../../partials/utility/variables/*”;
/* **** Front Page specific blocks and widgets **** */ /* **** Front Page specific blocks and widgets **** */ .main-nav-blocks { display: -webkit-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-justify-content: space-around; -ms-justify-content: justify; justify-content: space-around; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; height: auto; margin: 3.4rem auto 1em; section { cursor: pointer; padding: 0; margin: 0 1em 1em 1em; max-width: 256px; // forcing sections to be circles min-width: 256px; // but not allowing them to get too distorted width: 256px; height: 256px; border-radius: 50%; text-align: center; -webkit-flex: 1 1 0; -ms-flex: 1 1 0; flex: 1 1 0; /* background-color: #80c251; */ background-image: -webkit-linear-gradient(top, $color-masthead-bg-style 0, $color-masthead-bg-style 62px, #fff 62px, #fff 100%); background-image: -moz-linear-gradient(top, $color-masthead-bg-style 0, $color-masthead-bg-style 62px, #fff 62px, #fff 100%); background-image: -o-linear-gradient(top, $color-masthead-bg-style 0, $color-masthead-bg-style 62px, #fff 62px, #fff 100%); background-image: linear-gradient(top, $color-masthead-bg-style 0, $color-masthead-bg-style 62px, #fff 62px, #fff 100%); border: $color-card-border thin solid; background-repeat: no-repeat; } /* each navigation box has different contrast color */ section:nth-child(2) { background-image: -webkit-linear-gradient(top, $color-masthead-bg-pattern 0, $color-masthead-bg-pattern 62px, #fff 62px, #fff 100%); background-image: -moz-linear-gradient(top, $color-masthead-bg-pattern 0, $color-masthead-bg-pattern 62px, #fff 62px, #fff 100%); background-image: -o-linear-gradient(top, $color-masthead-bg-pattern 0, $color-masthead-bg-pattern 62px, #fff 62px, #fff 100%); background-image: linear-gradient(top, $color-masthead-bg-pattern 0, $color-masthead-bg-pattern 62px, #fff 62px, #fff 100%); } section:nth-child(3) { background-image: -webkit-linear-gradient(top, $color-masthead-bg-design 0, $color-masthead-bg-design 62px, #fff 62px, #fff 100%); background-image: -moz-linear-gradient(top, $color-masthead-bg-design 0, $color-masthead-bg-design 62px, #fff 62px, #fff 100%); background-image: -o-linear-gradient(top, $color-masthead-bg-design 0, $color-masthead-bg-design 62px, #fff 62px, #fff 100%); background-image: linear-gradient(top, $color-masthead-bg-design 0, $color-masthead-bg-design 62px, #fff 62px, #fff 100%); } /* each Navigation has contrast color, so that means also on hover */ section:hover { background-image: -webkit-linear-gradient(top, $color-masthead-bg-style 0, $color-masthead-bg-style 62px, #edf8fc 62px, #edf8fc 100%); background-image: -moz-linear-gradient(top, $color-masthead-bg-style 0, $color-masthead-bg-style 62px, #edf8fc 62px, #edf8fc 100%); background-image: -o-linear-gradient(top, $color-masthead-bg-style 0, $color-masthead-bg-style 62px, #edf8fc 62px, #edf8fc 100%); background-image: linear-gradient(top, $color-masthead-bg-style 0, $color-masthead-bg-style 62px, #edf8fc 62px, #edf8fc 100%); } section:nth-child(2):hover { background-image: -webkit-linear-gradient(top, $color-masthead-bg-pattern 0, $color-masthead-bg-pattern 62px, #edf8fc 62px, #edf8fc 100%); background-image: -moz-linear-gradient(top, $color-masthead-bg-pattern 0, $color-masthead-bg-pattern 62px, #edf8fc 62px, #edf8fc 100%); background-image: -o-linear-gradient(top, $color-masthead-bg-pattern 0, $color-masthead-bg-pattern 62px, #edf8fc 62px, #edf8fc 100%); background-image: linear-gradient(top, $color-masthead-bg-pattern 0, $color-masthead-bg-pattern 62px, #edf8fc 62px, #edf8fc 100%); } section:nth-child(3):hover { background-image: -webkit-linear-gradient(top, $color-masthead-bg-design 0, $color-masthead-bg-design 62px, #edf8fc 62px, #edf8fc 100%); background-image: -moz-linear-gradient(top, $color-masthead-bg-design 0, $color-masthead-bg-design 62px, #edf8fc 62px, #edf8fc 100%); background-image: -o-linear-gradient(top, $color-masthead-bg-design 0, $color-masthead-bg-design 62px, #edf8fc 62px, #edf8fc 100%); background-image: linear-gradient(top, $color-masthead-bg-design 0, $color-masthead-bg-design 62px, #edf8fc 62px, #edf8fc 100%); } section:active { border: $color-card-border thin solid; } section h2 { color: white; margin-bottom: 0.2em; font-size: 1.37em; margin-top: 1.4em; border: none; pointer-events: none; } section p { font-size: 0.93em; font-weight: normal; font-family: OpenSans-Regular, Helvetica, Arial, sans-serif; line-height: 1.2em; color: $medium-grey-10; min-height: 1.2em; // allows the icons below to align padding-top: 0.8em; pointer-events: none; } section a { font-size: inherit; font-weight: normal; color: inherit; } section img { margin: -0.9em auto 0 auto; padding: 0; width: 116px; height: 116px; display: block; pointer-events: none; } }
.hero-front h1 {
font-family: $font-light; font-size: 4.33em; font-weight: 100; line-height: 1em; color: $color-hero-title; letter-spacing: 0.02em; margin: 2.0em 0 0 0; border: none; transition: all 0.5s;
} .hero-front h3 {
font-family: $font-light; font-size: 1.8em; font-weight: 100; line-height: 1em; color: $color-hero-subtext; margin: 0 0 0 1em; padding-top: 0; text-align: right; border: none; text-decoration: none; max-width: 763px;;
} @media only screen
and (max-width: 920px) { .hero-front h3 { margin-left: 0; margin-right: 1em; text-align: right; } .hero-front h1 { letter-spacing: 0; }
} /* ******************* Media Queries ********************** */ @media only screen
and (max-width: 840px) { .main-nav-blocks { display: none; }
}
/* ******************** HERO area ********************** */ .hero-front h3 a:hover, a.inherit:hover {
color: $color-hover !important;
}
.front {
#main-content-wrapper h1 { display: none; } #main-content-wrapper article h1 { display: block; clear: all; } .l-region--pre-content, .l-region--post-content { display: -webkit-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-between; -ms-justify-content: justify; justify-content: space-between; margin-bottom: 4em; p { line-height: 1.3; // RGS Nov2015 Rob Requested to tighten-up paragraphs } } .block--views { max-width: 30%; min-width: 270px; padding: 0.5em; max-width: 31.5%; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; .view-content { display: block; width: 100%; .item-list ul { padding: 0; margin: 0.8em 0 0 0; } .item-list ul li { padding: 0 1.66rem 1.1em; margin-top: 1.3em; margin-bottom: 1.4em; border-bottom: #e8e8e8 solid thin; background-color: white; border: $color-card-border thin solid; cursor: pointer; } } h2.block-title { color: $color-link-active; font-size: 1.33em; margin: 0 0 0.8em 1.33em; padding: 0; border: none; font-family: $font-regular; } .views-field-title { display: block; font-family: $font-semibold; padding-top: 1em; } .views-field-title a { color: $color-block-title; font-size: 1.2em; border: none; font-family: $font-semibold; } .views-field-title a:hover { color: $color-hover; } .views-field-body { color: $color-block-text; font-family: $font-secondary-text; } .tile-category { font-size: 0.9em; font-family: $font-secondary-text; color: $color-text-disabled; } ul { margin: 0.4em; } li { list-style: none; padding: 0.4em 0.5em 1em; } .username { display: block; font-style: italic; //a { // color: inherit; //} a:hover { color: $color-hover; } } .views-more-link { font-size: 0.9em; font-style: italic; } } #block-views-news-block-whats-new .side-by-side, #block-views-pages-block-basic-pages .side-by-side { // code to move the summary text for these tiles to be image right paragraph left TEMPORARY p { display: inline-block; width: 50%; position: relative; top: 0; left: 49%; padding: 0 0 0 1%; } img { display: inline-block; max-width: 46%; position: relative; top: 0; left: -52%; vertical-align: top; padding: 1.38em 0 0.9em 0; } }
}
/* ******************* UX Team navigation for front and other footers ********************** */ block-block-8 { // This is the block for UX Team footer
margin-top: 4em;
} nav#ux-team-nav {
ul { font-size: 1.2em; font-family: $font-semibold; display: -webkit-flex; display: -ms-flexbox; display: flex; /* row column */ -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* wrap nowrap wrap-reversse */ -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; /* flex-start flex-end center space-between space-around (ms) justify*/ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; li { margin: auto; list-style: none; text-align: center; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-flex-grow: 6; -ms-flex-grow: 6; flex-grow: 6; img { width: 3rem; height: 3rem; margin-right: 0.9em; vertical-align: middle; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: rgba(0,0,0,0.25); } a { font-family: inherit; color: inherit; line-height: 2.6em; vertical-align: middle; width: auto; } &:first-child { text-align: left; -webkit-flex-grow: 4; -ms-flex-grow: 4; flex-grow: 4; } &:last-child { text-align: right; -webkit-flex-grow: 4; -ms-flex-grow: 4; flex-grow: 4; } } }
}