| @charset "utf-8"; |
| |
| @import "normalize", |
| "bootstrap"; |
| |
| |
| |
| // SETUP - COLORS |
| $green: #49a348; |
| $orange: #E45635; // annoucement bg |
| $dark-space: #282e44; // |
| $deep-purple: #292E4B; // content bg |
| $purple: #525C86; // links |
| $yellow: #FDB940; // links |
| $charcoal: #292C2F; // header bg, footer bg |
| $gray80: #58595B; // text dark, heading |
| $gray50: #939598; // text med, paragraph, |
| $gray20: #D1D3D4; // footer link |
| $gray15: #dcddde; |
| $gray5: #F1F2F2; // light gray bg |
| |
| |
| |
| |
| // SETUP - MIXINS |
| @mixin transform($val) { |
| -webkit-transform: $val; |
| -moz-transform: $val; |
| -ms-transform: $val; |
| -o-transform: $val; |
| transform: $val; |
| } |
| |
| @mixin transition($val) { |
| -webkit-transition: $val; |
| -moz-transition: $val; |
| -ms-transition: $val; |
| -o-transition: $val; |
| transition: $val; |
| } |
| |
| @mixin box-shadow($val) { |
| -webkit-box-shadow: $val; |
| -moz-box-shadow: $val; |
| box-shadow: $val; |
| } |
| |
| @mixin opacity($val) { |
| opacity: $val; |
| $opacity-ie: $val * 100; |
| filter: alpha(opacity=$opacity-ie); //IE8 |
| } |
| |
| @mixin placeholdercolor($val) { |
| &:placeholder-shown {color: $val;}; |
| &::-webkit-input-placeholder {color: $val;} |
| &:-moz-placeholder {color: $val;} |
| &::-moz-placeholder {color: $val;} |
| &:-ms-input-placeholder {color: $val;} |
| &::-ms-input-placeholder {color: $val;} |
| } |
| |
| |
| |
| // COMPONENT - GENERAL |
| body {font-family: 'Roboto', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} |
| |
| h1, h2, h3, h4, h5, h6 {color: $gray80; font-weight: inherit;} |
| |
| p {margin: 15px 0 0;} |
| |
| br {content: ""; display: block; margin: 0;} |
| |
| blockquote .reference {display: block; margin-top: 40px; font-size: 66%; @include opacity(0.5);} |
| |
| a:hover {@include transition(all 0.3s linear);} |
| a.larger {font-size: 20px; |
| @media (min-width: 768px) {font-size: 32px;} |
| } |
| |
| .separator {height: 40px; |
| @media (min-width: 768px) {height: 80px;} |
| } |
| |
| .content {padding-top: 60px; padding-bottom: 60px; |
| a {border-bottom: 1px dashed $gray20;} |
| @media (min-width: 768px) {padding-top: 80px; padding-bottom: 80px;} |
| } |
| |
| .no-margin {margin: 0 !important;} |
| |
| |
| // COMPONENT - TEXT COLORS |
| .text-purple {color: $purple;} |
| .text-yellow {color: $yellow;} |
| .text-light {color: $gray50;} |
| .text-dark {color: $gray80;} |
| |
| .monospace {font-family: monospace;} |
| |
| |
| |
| // COMPONENT - GENERAL - HR |
| hr {margin: 0; |
| &.gray {border-top: 10px solid rgba(0,0,0,0.11);} |
| } |
| |
| |
| |
| // COMPONENT - GENERAL INSET BOX-SHADOW |
| .inset-box-shadow-top {@include box-shadow(inset 0 10px 0 0 rgba(0,0,0,0.15));} |
| .inset-box-shadow-bottom {@include box-shadow(inset 0 -10px 0 0 rgba(0,0,0,0.15));} |
| |
| |
| |
| // COMPONENT - GENERAL - BACKGROUND COLORS |
| .bg-deep-purple, .bg-purple, .bg-gray5, .bg-dark-space {padding: 60px 0; @extend .inset-box-shadow-top; |
| .content {padding-top: 0; padding-bottom: 0;} |
| @media (min-width: 768px) {padding: 80px 0;} |
| } |
| .bg-deep-purple, .bg-purple, .bg-orange, .bg-dark-space {color: #fff; |
| h1, h2, h3, h4, h5, h6 {color: inherit;} |
| a {color: $yellow; |
| &:hover {color: darken($yellow,15%);} |
| } |
| } |
| |
| .bg-orange {background-color: $orange;} |
| .bg-deep-purple {background-color: $deep-purple;} |
| .bg-purple {background-color: $purple;} |
| .bg-gray5 {background-color: $gray5;} |
| .bg-dark-space {background-color: $dark-space;} |
| |
| |
| |
| // COMPONENT - BUTTONS |
| .btn-outline-dark, .btn-green, .btn-gray80, .btn-yellow {display: inline-block; color: #fff !important; height: 50px; line-height: 50px; text-align: center; border-radius: 5px; |
| &:hover {color: #fff !important;} |
| } |
| .btn-outline-dark {padding: 0; width: 190px; font-size: 16px; border: 1px solid $purple; |
| &:hover {border: 1px solid lighten($purple,15%); background-color: lignten($dark-space,25%);} |
| span {color: $yellow;} |
| @media (min-width: 768px) {width: 230px; font-size: 18px;} |
| } |
| .btn-green, .btn-gray80, .btn-yellow {margin-top: 20px; font-size: 20px; border: none !important; width: 200px; |
| @media (min-width: 768px) {width: 260px;} |
| } |
| .btn-green {background-color: $green; |
| &:hover {background-color: darken($green,10%);} |
| } |
| .btn-gray80 {background-color: $gray80; |
| &:hover {background-color: darken($gray80,10%);} |
| } |
| .btn-yellow {background-color: $yellow; min-width: 250px; |
| &:hover {background-color: darken($yellow,10%);} |
| } |
| |
| |
| |
| |
| // COMPONENT - JUMBOTRON |
| .jumbotron {background-color: $purple; @extend .inset-box-shadow-top; |
| h1, h2, h3, h4, h5, h6, p {color: #fff; |
| &:last-child {margin-bottom: 0;} |
| } |
| a {color: $yellow; |
| &:hover {color: darken($yellow,15%);} |
| } |
| @media (min-width: 1025px) { |
| .container {position: relative; top: 50%; @include transform(translateY(-50%)); max-height: 100%;} |
| } |
| } |
| |
| |
| |
| // COMPONENT - TABS |
| ul.tabs {list-style: none; margin: 0 -25px; padding: 0; |
| li[class^="col"] div {padding: 40px 20px; border-width: 10px 1px 1px; border-color: $gray20; border-style: solid;} |
| li.active div {border-color: $purple; border-bottom-color: #FFF; position: relative; z-index: 10;} |
| } |
| ul.tabs+.tab-content {margin-top: -1px; padding-top: 40px; border-top: 1px solid $purple; position: relative; z-index:0; |
| @media (min-width: 768px) {padding-top: 60px;} |
| } |
| |
| |
| // COMPONENT - MARKETO FORM |
| /* |
| .mktoForm {font-family: inherit !important; width: 100% !important; |
| .mktoAsterix, .mktoOffset, .mktoGutter {display: none !important;} |
| .mktoFormCol, .mktoFieldWrap {width: 100%; margin-bottom: 8px;} |
| .mktoField {text-indent: 15px; width: 100% !important; height: 54px; border: 1px solid $gray15; border-radius: 4px; background-color: lighten($gray15,4%); color: $gray80; font-size: 18px !important; text-indent: 15px; |
| @include placeholdercolor($gray80); |
| &:focus {outline: none; border: 1px solid $purple; background-color: #f1f2f2;} |
| } |
| textarea.mktoField {padding: 15px 15px 15px 0 !important; min-height: 180px;} |
| .mktoButtonWrap {margin: 0 !important;} |
| .mktoButtonWrap .mktoButton {margin-top: 4px; padding: 0; width: 200px; background-image: none !important; font-size: 18px !important; border: none; @extend .btn-green;} |
| @media (min-width: 768px) { |
| .mktoField {height: 64px; font-size: 20px !important;} |
| .mktoButtonWrap.mktoSimple .mktoButton {font-size: 20px !important;} |
| } |
| } |
| */ |
| |
| |
| |
| // LAYOUT - GENERAL |
| .logo {display: block; width: 166px; height: auto; |
| @media (min-width: 768px) {width: 225px;} |
| } |
| |
| |
| // LAYOUT - HEADER |
| header {position: relative; height: 105px; background-color: $charcoal; |
| a.logo, nav {display: inline-block; line-height: 105px;} |
| |
| a {color: #fff; |
| &:visited {color: #fff;} |
| &:hover {color: #ccc;} |
| &:active {color: #ccc;} |
| &:focus {color: #ccc;} |
| &.logo {float: left;} |
| } |
| |
| a.btn-yellow {width: auto; min-width: initial; padding-left: 15px; padding-right: 15px; height: 40px; line-height: 40px; font-size: inherit;} |
| |
| nav {float: right;} |
| |
| nav.menu-mobile { |
| ul {margin: 0; padding: 0; list-style: none; color: #fff; font-size: 16px; line-height: 30px;} |
| |
| a.mobile-menu-toggle {color: $purple; font-size: 35px;} |
| ul.mobile-menu-items {list-style: none; padding-top: 15px; padding-bottom: 15px; width: 100%; background-color: darken($purple,5%); position: absolute; top: 95px; left: 0; z-index: 99999; @include box-shadow(0 10px 0 0 rgba(0,0,0,0.06)); |
| li {text-indent: 30px; |
| a {display: block; font-size: inherit; line-height: 3; cursor: pointer;} |
| &:hover {background-color: darken($purple,15%);}; |
| } |
| |
| @media (min-width: 768px) {top: 115px;} |
| } |
| @media (min-width: 1050px) {display: none;} |
| } |
| |
| nav.menu-desktop {display: none; font-size: 18px; |
| ul {margin: 0; padding: 0; list-style: none; |
| li {display: inline-block; padding-right: 20px; |
| iframe {margin-bottom: -4px;} |
| &:last-child {padding-right: 0;} |
| } |
| } |
| |
| @media (min-width: 1050px) {display: block;} |
| } |
| |
| @media (min-width: 768px) {height: 105px; |
| a.logo, nav {line-height: 105px;} |
| } |
| } |
| |
| |
| |
| // LAYOUT - FOOTER |
| footer {padding: 80px 0 0; background-color: $charcoal; color: $gray50; font-size: 16px; @include box-shadow(inset 0 10px 0 0 rgba(0,0,0,0.5)); |
| ul {margin: 0; padding: 0; list-style: none;} |
| |
| .tagline, .sitemap, .mailing-list, .copyright {margin-bottom: 40px;} |
| |
| .sitemap { |
| ul {float: left; width: 50%;} |
| ul:not(:last-of-type) {margin-bottom: 30px;} |
| li:first-child a {color: $gray50;} |
| a {color: #fff; |
| &:hover {color: $gray20;} |
| } |
| &:before, &:after {content:""; display: block; clear: both;} |
| } |
| |
| .mailing-list { |
| p>span {color: #fff; display: block;} |
| } |
| |
| .mktoForm {font-family: inherit !important; width: 100% !important; max-width: 360px; |
| .mktoAsterix, .mktoOffset, .mktoGutter, .mktoLabel {display: none;} |
| .mktoFormCol, .mktoFieldWrap {width: 100%; margin-top: 8px;} |
| .mktoField {text-indent: 15px; width: 100% !important; height: 44px; border: 1px solid #3b3b3b; border-radius: 4px; background-color: #3b3b3b; color: #fff; font-size: 18px; text-indent: 15px; |
| &:focus {outline: none; border: 1px solid #3f3f3f; background-color: #3f3f3f;} |
| } |
| textarea.mktoField {padding: 15px 15px 15px 0; min-height: 180px;} |
| .mktoButtonWrap {margin: 0 !important;} |
| .mktoButtonWrap.mktoSimple .mktoButton {margin-top: 0; padding: 0 !important; width: 200px; background-image: none; font-size: 18px; @extend .btn-yellow; min-width: 175px; height: 44px; line-height: 44px;} |
| @media (min-width: 768px) { |
| .mktoField {font-size: 20px;} |
| .mktoButtonWrap.mktoSimple .mktoButton {font-size: 20px;} |
| } |
| } |
| |
| @media (min-width: 768px) {font-size: 18px; |
| .sitemap ul {width: 33.33%;} |
| } |
| @media (min-width: 1024px) { |
| .sitemap ul {width: auto; margin-bottom: 0 !important; margin-right: 50px;} |
| } |
| } |
| |
| |
| |
| // LAYOUT FOOTER - TWITTER SHARE |
| .twitter-share {margin: 0 auto 40px; padding: 0 30px; max-width: 1200px; |
| h6 {margin-top: 0;} |
| .fa-twitter {color: #55ACEE; font-size: 33px;} |
| a {color: #55ACEE;} |
| @media (min-width: 768px) {padding: 0 50px;} |
| } |
| |
| |
| |
| // PAGE - HOME |
| body.index { |
| .jumbotron {padding-bottom: 0;} |
| |
| .get-started { |
| @media (max-width: 1023px) { |
| div[class^="col"]:not(:last-child) {margin-bottom: 40px;} |
| } |
| div.row { margin-top: 60px; } |
| } |
| .start-working div.row{ |
| margin-top: 60px; |
| } |
| .annoucement {@extend .bg-orange; padding: 30px 0; |
| p {margin: 0;} |
| a {border-bottom: 1px dashed $yellow;} |
| @media (min-width: 768px) { |
| h3 {font-size: 28px;} |
| } |
| @media (min-width: 1024px) { |
| img.pull-right {display: inline-block;} |
| } |
| } |
| |
| .whats-new { |
| img {margin-bottom: 20px;} |
| @media (max-width: 1023px) { |
| div[class^="col"]:not(:last-child) {margin-bottom: 40px;} |
| } |
| } |
| |
| .chefile { |
| table {width: 100%;} |
| img {margin-right: 30px; width: 194px;} |
| @media (max-width: 530px) { |
| td {display: block;} |
| h2 {margin-top: 20px;} |
| img {width: 100px;} |
| } |
| } |
| |
| .contributors { |
| ul {margin-left: -15px; margin-right: -15px; padding: 0; list-style: none;} |
| ul:before, ul:after {content:""; display: block; clear: both;} |
| li {display: block; padding: 15px; width: 50%; float: left; |
| @media (min-width: 768px) {width: 25%;} |
| @media (min-width: 992px) {width: 20%;} |
| } |
| } |
| |
| .bg-hero {height: 160px; background: url(../images/hero-enterprise@2x.jpg) no-repeat center; background-size: cover; |
| @media (min-width: 768px) {height: 310px;} |
| } |
| |
| .feedback { |
| h2>a {border: none;} |
| ul {margin: 0 -15px; padding: 0; list-style: none;} |
| li {padding: 15px;} |
| li, span {display: block;} |
| span {color: #5fa8dc;} |
| @media (min-width: 768px) {font-size: 25px; |
| ul:before, ul:after {content:""; display: block; clear: both;} |
| li {float: left; width: 50%; padding-top: 25px; padding-bottom: 25px;} |
| } |
| @media (min-width:768px) and (max-width: 1023px) { |
| li:nth-child(even) {clear: right;} |
| li:nth-child(odd) {clear: left;} |
| } |
| @media (min-width: 1024px) { |
| li {width: 33.333%;} |
| li:nth-child(3n+0) {clear: right;} |
| li:nth-child(3n-2) {clear: left;} |
| } |
| } |
| |
| div[class^="col"] { |
| div.border.media {padding: 15px 15px; border: 1px solid $gray20; border-radius: 5px; |
| .media-left { |
| padding-right: 15px; |
| img { |
| max-width: 50px; |
| } |
| } |
| .media-body { |
| vertical-align: middle; |
| } |
| h4 {margin: 0;} |
| p {margin-top: 5px; font-size: 85%;} |
| |
| |
| } |
| } |
| .start-working a[class^="btn"] { font-size: 85%; } |
| |
| } |
| |
| |
| |
| // PAGE - TECHNOLOGY |
| body.technology { |
| .jumbotron {padding-bottom: 0;} |
| |
| .features {@extend .bg-gray5; |
| h2 {margin-bottom: 30px; |
| &.text-light {margin-bottom: 0;} |
| } |
| h3, p {margin: 0;} |
| img {margin-bottom: 20px;} |
| a.btn-yellow {margin-top: 0;} |
| |
| @media (max-width: 768px) { |
| div[class^="col"] {margin-bottom: 40px;} |
| } |
| @media (min-width: 768px) { |
| .row:not(:last-child) {margin-bottom: 80px;} |
| img {margin-bottom: 30px;} |
| } |
| } |
| |
| .tech {@extend .bg-deep-purple; @extend .inset-box-shadow-top; |
| img {margin-top: 20px; margin-bottom: 20px;} |
| h3 {margin-top: 40px;} |
| ul {margin: 30px 0; padding-left: 15px;} |
| .row:not(:last-of-type) {margin-bottom: 30px;} |
| @media (min-width: 768px) {padding-top: 90px; padding-bottom: 90px; |
| h3 {margin-top: 80px;} |
| .row:not(:last-of-type) {margin-bottom: 60px;} |
| } |
| @media (min-width: 1024px) { |
| .clearfix {display: none;} |
| } |
| } |
| |
| .video {@extend .bg-purple; @extend .inset-box-shadow-top; color: #fff; |
| h3 {margin: 15px 0 0;} |
| a {color: inherit; border: none; |
| &:hover {color: inherit; @include opacity(0.5); |
| img {@include opacity(0.75);} |
| } |
| } |
| p {margin: 0;} |
| ul {list-style: none; |
| a {color: $yellow; border-bottom: 1px dashed #fff;} |
| } |
| @media (max-width: 1024px) { |
| div[class^="col"] {margin-top: 40px;} |
| h3.col-sm-12 {margin: 60px 0 5px} |
| ul {margin-bottom: 0;} |
| } |
| @media (min-width: 1024px) {padding-top: 100px; padding-bottom: 100px; |
| .row {margin-top: 40px;} |
| h3.col-sm-12 {margin: 30px 0 15px} |
| } |
| } |
| } |
| |
| |
| |
| // PAGE - FEATURES |
| body.features { |
| .content { |
| .quick-links {margin-bottom: 40px; |
| ul {margin-bottom: 0; list-style: none;} |
| a {padding-bottom: 2px;} |
| } |
| .row {margin-bottom: 30px; |
| &:last-child {margin-bottom: 0;} |
| } |
| |
| @media (max-width: 768px) { |
| div[class^="col"] {margin-top: 20px;} |
| } |
| @media (min-width: 768px) { |
| .row {margin-bottom: 80px;} |
| img {margin-top: 65px;} |
| } |
| } |
| } |
| |
| |
| // PAGE - COMMUNITY |
| body.community { |
| .jumbotron {padding-bottom: 0; |
| a:hover img {@include opacity(0.75);} |
| } |
| .comm-highlights { |
| h2 {margin-bottom: 0;} |
| img {display: block; margin-bottom: 20px; width: auto; height: 120px;} |
| a {display: inline-block; margin-top: 20px;} |
| } |
| .photo-gallery {@extend .bg-deep-purple; @extend .inset-box-shadow-top; |
| h2 + .row {margin-top: -30px;} |
| div[class^="col"] {margin-top: 50px;} |
| a:hover img {@include opacity(0.75);} |
| } |
| .content { |
| ul {margin: 15px 0 0; padding: 0; list-style: none; font-size: 24px;} |
| @media (min-width: 768px) { |
| ul {font-size: 37px;} |
| } |
| } |
| } |
| |
| |
| |
| // PAGE - DOWNLOAD |
| body.download { |
| .content { |
| ul {margin: 20px 0 0; padding: 0; list-style: none; font-size: 20px; |
| h4 {margin: 0;} |
| } |
| |
| @media (min-width: 768px) { |
| ul {margin: 30px 0 0;font-size: 24px;} |
| } |
| } |
| } |
| |
| |
| |
| // PAGE - GETTING STARTED CLOUD & DOWNLOAD |
| body.getting-started-cloud, body.getting-started-download { |
| ul.tabs li:first-child.active div {border-color: $yellow; border-bottom-color: #fff;} |
| ul.tabs+.tab-content {border: none !important; padding-top: 0;} |
| #tab1, #tab2 {padding-top: 40px; |
| @media (min-width: 768px) {padding-top: 60px;} |
| } |
| #tab1.active {border-top: 1px solid $yellow;} |
| #tab2.active {border-top: 1px solid $purple;} |
| |
| #tab1 { |
| div[class^="col"] {margin-bottom: 50px; |
| div.border.media {padding: 15px 15px 0; border: 1px solid $gray20; border-radius: 5px; |
| .media-left {padding-right: 15px;} |
| h4 {margin: 0;} |
| p {margin-top: 5px;} |
| } |
| } |
| a[class^="btn"] {display: block; margin-left: -15px; margin-right: -15px; width: auto; border-radius: 0 0 5px 5px; white-space: nowrap; overflow: hidden;} |
| } |
| } |
| |
| |
| |
| // PAGE - GETTING STARTED |
| body.getting-started { |
| .options { |
| img {height: 110px; width: auto; margin-bottom: 20px;} |
| } |
| .bg-hero {height: 160px; background: url(../images/hero-enterprise@2x.jpg) no-repeat center; background-size: cover; |
| @media (min-width: 768px) {height: 310px;} |
| } |
| @media (max-width: 1023px) { |
| .options {padding-bottom: 40px;} |
| .options a.btn-yellow {margin-bottom: 40px;} |
| } |
| } |
| |
| |
| |
| // PAGE - GETTING STARTED / CLOUD |
| body.getting-started-cloud { |
| div[class^="col"] {margin-bottom: 50px; |
| div.border.media {padding: 15px 15px 0; border: 1px solid $gray20; border-radius: 5px; |
| .media-left {padding-right: 15px;} |
| h4 {margin: 0;} |
| p {margin-top: 5px;} |
| } |
| } |
| .content a[class^="btn"] {display: block; margin-left: -15px; margin-right: -15px; width: auto; border-radius: 0 0 5px 5px; white-space: nowrap; overflow: hidden;} |
| } |
| |
| |
| // PAGE - GETTING STARTED / DOWNLOAD |
| body.getting-started-download { |
| |
| } |
| |
| |
| // PAGE - ECLIPSECON 2016 |
| body.eclipsecon2016 { |
| .jumbotron {background-image: url(../images/hero-home-bg@2x.png); background-position: center center; background-size: cover; |
| img {display: block; margin: 20px 0 30px; width: 430px; height: auto; max-width: 100%;} |
| a {border-bottom: 1px dashed #D1D3D4;} |
| } |
| .content { |
| h2 {margin-bottom: 20px;} |
| } |
| .meet-experts { |
| div[class^="col"] {text-align: center; |
| img {display: inline-block; max-width: 280px; margin-bottom: 20px;} |
| h3 {margin-bottom: 0;} |
| p {margin-top: 5px;} |
| } |
| @media (max-width: 768px) { |
| div[class^="col"] {margin-bottom: 40px; |
| &:last-child {margin-bottom: 0;} |
| } |
| } |
| } |
| .keynote {background-image: url(../images/eclipsecon-hero-keynote@2x.jpg); background-position: center; background-size: cover; |
| h2, p {color: #fff;} |
| h3, a {color: $yellow;} |
| @media (max-width: 768px) { |
| .content { |
| div[class^="col"] {margin-top: 40px;} |
| } |
| } |
| @media (min-width: 768px) { |
| .content{padding-top: 100px; padding-bottom: 100px; |
| .row {margin-bottom: 60px; |
| &:last-child {margin-bottom: 0;} |
| } |
| } |
| } |
| } |
| .cloud {@extend .bg-gray5; |
| h3 {margin-top: 40px;} |
| ul {list-style: none; padding-left: 0;} |
| } |
| .join-us { |
| a {margin-top: 20px; font-size: 24px;} |
| |
| @media (min-width: 768px) { |
| a {font-size: 38px;} |
| } |
| } |
| } |
| |
| |
| |
| // PAGE - EXTEND |
| body.extend { |
| .options img {height: 115px; width: auto; margin-bottom: 20px;} |
| |
| @media (max-width: 767px) { |
| .options div[class^="col"] {margin-bottom: 40px;} |
| .options .row:last-child div[class^="col"]:last-child {margin-bottom: 0;} |
| } |
| @media (min-width: 768px) { |
| .options .row:not(:last-child) {margin-bottom: 80px;} |
| } |
| } |
| |
| |
| |
| // PAGE - EXTEND-CHILD |
| body.extend-child { |
| .jumbotron {padding-bottom: 0;} |
| |
| .features { |
| img {margin-bottom: 20px;} |
| |
| @media (max-width: 767px) { |
| div[class^="col"] {margin-bottom: 40px;} |
| .row:last-child div[class^="col"]:last-child {margin-bottom: 0;} |
| } |
| @media (min-width: 768px) { |
| .row:not(:last-child) {margin-bottom: 80px;} |
| } |
| } |
| |
| .tech {@extend .bg-deep-purple; @extend .inset-box-shadow-top; |
| img {margin-top: 20px; margin-bottom: 20px;} |
| h3 {margin-top: 40px;} |
| ul {margin: 30px 0; padding-left: 15px;} |
| .row:not(:last-of-type) {margin-bottom: 30px;} |
| @media (min-width: 768px) {padding-top: 90px; padding-bottom: 90px; |
| h3 {margin-top: 80px;} |
| .row:not(:last-of-type) {margin-bottom: 60px;} |
| } |
| @media (min-width: 1024px) { |
| .clearfix {display: none;} |
| } |
| } |
| |
| .video {@extend .bg-purple; @extend .inset-box-shadow-top; color: #fff; |
| h3 {margin: 15px 0 0;} |
| a {color: inherit; border: none; |
| &:hover {color: inherit; @include opacity(0.5); |
| img {@include opacity(0.75);} |
| } |
| } |
| p {margin: 0;} |
| ul {list-style: none; |
| a {color: $yellow; border-bottom: 1px dashed #fff;} |
| } |
| @media (max-width: 1024px) { |
| div[class^="col"] {margin-top: 40px;} |
| h3.col-sm-12 {margin: 60px 0 5px} |
| ul {margin-bottom: 0;} |
| } |
| @media (min-width: 1024px) {padding-top: 100px; padding-bottom: 100px; |
| .row {margin-top: 40px;} |
| h3.col-sm-12 {margin: 30px 0 15px} |
| } |
| } |
| |
| } |
| |
| |
| // PAGE - MEDIA & EVENTS |
| body.media_events { |
| table.wrapper {margin-bottom: 20px; width: 100%;} |
| tr.item { |
| td {padding-bottom: 50px; vertical-align: top;} |
| img {margin-right: 30px; width: 237px; height: auto;} |
| h3 {} |
| p.loc {color: $purple;} |
| p.desc {} |
| &:before, &:after {content:""; display: block; clear: both;} |
| |
| @media (max-width: 580px) { |
| td {display: block;} |
| td:first-child {padding-bottom: 20px;} |
| } |
| @media (min-width: 1024px) { |
| img {margin-right: 50px;} |
| } |
| } |
| table.wrapper:last-of-type {margin-bottom: 0; |
| tr:last-child td:last-child {padding-bottom: 0;} |
| } |
| } |
| |
| // PAGE - SHARE STORY |
| body.share-story { |
| .jumbotron {background: url(../images/hero-share.jpg) center no-repeat; background-size: cover;} |
| } |
