blob: ecb7bbabe237edcc85c07a599b23e1462d38e2e4 [file] [log] [blame]
@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;}
}