diff --git a/website/company.html b/website/company.html new file mode 100644 index 00000000000..1f72e1281a7 --- /dev/null +++ b/website/company.html @@ -0,0 +1,53 @@ +{% set prefetch_items = [ + ('/docs/en/', 'document') +] %} + +{% extends "templates/base.html" %} + +{% block extra_meta %} + +{% endblock %} + +{% block content %} + +{% include "templates/global/nav.html" %} + +{% include "templates/company/hero.html" %} +{% include "templates/company/overview.html" %} +{% include "templates/company/leadership.html" %} +{% include "templates/company/team.html" %} +{% include "templates/company/press.html" %} +{% include "templates/company/contact.html" %} +{% include "templates/company/newsletter.html" %} + +{% endblock %} diff --git a/website/css/bootstrap.css b/website/css/bootstrap.css index 265c3014822..52a8a1b27a6 100644 --- a/website/css/bootstrap.css +++ b/website/css/bootstrap.css @@ -44,9 +44,14 @@ --white: #fff; --black: #212529; --blue: #257af4; + --light-blue: #e3f1fe; --yellow: #ffcc00; + --light-yellow: #fffaf0; --orange: #ff8c00; + --light-orange: #ffe4b5; --red: #ff3939; + --light-red: #ffe4e1; + --medium: #d6dbdf; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; @@ -2043,6 +2048,26 @@ pre code { background-color: #aacbfb; } +.table-light-blue, +.table-light-blue > th, +.table-light-blue > td { + background-color: #f7fbff; +} +.table-light-blue th, +.table-light-blue td, +.table-light-blue thead th, +.table-light-blue tbody + tbody { + border-color: #f0f8fe; +} + +.table-hover .table-light-blue:hover { + background-color: #deeeff; +} +.table-hover .table-light-blue:hover > td, +.table-hover .table-light-blue:hover > th { + background-color: #deeeff; +} + .table-yellow, .table-yellow > th, .table-yellow > td { @@ -2063,6 +2088,26 @@ pre code { background-color: #ffec9f; } +.table-light-yellow, +.table-light-yellow > th, +.table-light-yellow > td { + background-color: #fffefb; +} +.table-light-yellow th, +.table-light-yellow td, +.table-light-yellow thead th, +.table-light-yellow tbody + tbody { + border-color: #fffcf7; +} + +.table-hover .table-light-yellow:hover { + background-color: #fff8e2; +} +.table-hover .table-light-yellow:hover > td, +.table-hover .table-light-yellow:hover > th { + background-color: #fff8e2; +} + .table-orange, .table-orange > th, .table-orange > td { @@ -2083,6 +2128,26 @@ pre code { background-color: #ffd49f; } +.table-light-orange, +.table-light-orange > th, +.table-light-orange > td { + background-color: #fff7ea; +} +.table-light-orange th, +.table-light-orange td, +.table-light-orange thead th, +.table-light-orange tbody + tbody { + border-color: #fff1d9; +} + +.table-hover .table-light-orange:hover { + background-color: #ffedd1; +} +.table-hover .table-light-orange:hover > td, +.table-hover .table-light-orange:hover > th { + background-color: #ffedd1; +} + .table-red, .table-red > th, .table-red > td { @@ -2103,6 +2168,46 @@ pre code { background-color: #ffafaf; } +.table-light-red, +.table-light-red > th, +.table-light-red > td { + background-color: #fff7f7; +} +.table-light-red th, +.table-light-red td, +.table-light-red thead th, +.table-light-red tbody + tbody { + border-color: #fff1ef; +} + +.table-hover .table-light-red:hover { + background-color: #ffdede; +} +.table-hover .table-light-red:hover > td, +.table-hover .table-light-red:hover > th { + background-color: #ffdede; +} + +.table-medium, +.table-medium > th, +.table-medium > td { + background-color: #f4f5f6; +} +.table-medium th, +.table-medium td, +.table-medium thead th, +.table-medium tbody + tbody { + border-color: #eaecee; +} + +.table-hover .table-medium:hover { + background-color: #e6e8eb; +} +.table-hover .table-medium:hover > td, +.table-hover .table-medium:hover > th { + background-color: #e6e8eb; +} + .table-active, .table-active > th, .table-active > td { @@ -3113,6 +3218,36 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0 rgba(70, 142, 246, 0.5); } +.btn-light-blue { + color: #495057; + background-color: #e3f1fe; + border-color: #e3f1fe; +} +.btn-light-blue:hover { + color: #495057; + background-color: #bedffd; + border-color: #b2d8fc; +} +.btn-light-blue:focus, .btn-light-blue.focus { + color: #495057; + background-color: #bedffd; + border-color: #b2d8fc; + box-shadow: 0 0 0 0 rgba(204, 217, 229, 0.5); +} +.btn-light-blue.disabled, .btn-light-blue:disabled { + color: #495057; + background-color: #e3f1fe; + border-color: #e3f1fe; +} +.btn-light-blue:not(:disabled):not(.disabled):active, .btn-light-blue:not(:disabled):not(.disabled).active, .show > .btn-light-blue.dropdown-toggle { + color: #495057; + background-color: #b2d8fc; + border-color: #a5d2fc; +} +.btn-light-blue:not(:disabled):not(.disabled):active:focus, .btn-light-blue:not(:disabled):not(.disabled).active:focus, .show > .btn-light-blue.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(204, 217, 229, 0.5); +} + .btn-yellow { color: #495057; background-color: #ffcc00; @@ -3143,6 +3278,36 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0 rgba(228, 185, 13, 0.5); } +.btn-light-yellow { + color: #495057; + background-color: #fffaf0; + border-color: #fffaf0; +} +.btn-light-yellow:hover { + color: #495057; + background-color: #ffedca; + border-color: #ffe9bd; +} +.btn-light-yellow:focus, .btn-light-yellow.focus { + color: #495057; + background-color: #ffedca; + border-color: #ffe9bd; + box-shadow: 0 0 0 0 rgba(228, 225, 217, 0.5); +} +.btn-light-yellow.disabled, .btn-light-yellow:disabled { + color: #495057; + background-color: #fffaf0; + border-color: #fffaf0; +} +.btn-light-yellow:not(:disabled):not(.disabled):active, .btn-light-yellow:not(:disabled):not(.disabled).active, .show > .btn-light-yellow.dropdown-toggle { + color: #495057; + background-color: #ffe9bd; + border-color: #ffe5b0; +} +.btn-light-yellow:not(:disabled):not(.disabled):active:focus, .btn-light-yellow:not(:disabled):not(.disabled).active:focus, .show > .btn-light-yellow.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(228, 225, 217, 0.5); +} + .btn-orange { color: #495057; background-color: #ff8c00; @@ -3173,6 +3338,36 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0 rgba(228, 131, 13, 0.5); } +.btn-light-orange { + color: #495057; + background-color: #ffe4b5; + border-color: #ffe4b5; +} +.btn-light-orange:hover { + color: #495057; + background-color: #ffd68f; + border-color: #ffd182; +} +.btn-light-orange:focus, .btn-light-orange.focus { + color: #495057; + background-color: #ffd68f; + border-color: #ffd182; + box-shadow: 0 0 0 0 rgba(228, 206, 167, 0.5); +} +.btn-light-orange.disabled, .btn-light-orange:disabled { + color: #495057; + background-color: #ffe4b5; + border-color: #ffe4b5; +} +.btn-light-orange:not(:disabled):not(.disabled):active, .btn-light-orange:not(:disabled):not(.disabled).active, .show > .btn-light-orange.dropdown-toggle { + color: #495057; + background-color: #ffd182; + border-color: #ffcd75; +} +.btn-light-orange:not(:disabled):not(.disabled):active:focus, .btn-light-orange:not(:disabled):not(.disabled).active:focus, .show > .btn-light-orange.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(228, 206, 167, 0.5); +} + .btn-red { color: #fff; background-color: #ff3939; @@ -3203,6 +3398,66 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0 rgba(255, 87, 87, 0.5); } +.btn-light-red { + color: #495057; + background-color: #ffe4e1; + border-color: #ffe4e1; +} +.btn-light-red:hover { + color: #495057; + background-color: #ffc2bb; + border-color: #ffb6ae; +} +.btn-light-red:focus, .btn-light-red.focus { + color: #495057; + background-color: #ffc2bb; + border-color: #ffb6ae; + box-shadow: 0 0 0 0 rgba(228, 206, 204, 0.5); +} +.btn-light-red.disabled, .btn-light-red:disabled { + color: #495057; + background-color: #ffe4e1; + border-color: #ffe4e1; +} +.btn-light-red:not(:disabled):not(.disabled):active, .btn-light-red:not(:disabled):not(.disabled).active, .show > .btn-light-red.dropdown-toggle { + color: #495057; + background-color: #ffb6ae; + border-color: #ffaba1; +} +.btn-light-red:not(:disabled):not(.disabled):active:focus, .btn-light-red:not(:disabled):not(.disabled).active:focus, .show > .btn-light-red.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(228, 206, 204, 0.5); +} + +.btn-medium { + color: #495057; + background-color: #d6dbdf; + border-color: #d6dbdf; +} +.btn-medium:hover { + color: #495057; + background-color: #c1c8ce; + border-color: #b9c2c9; +} +.btn-medium:focus, .btn-medium.focus { + color: #495057; + background-color: #c1c8ce; + border-color: #b9c2c9; + box-shadow: 0 0 0 0 rgba(193, 198, 203, 0.5); +} +.btn-medium.disabled, .btn-medium:disabled { + color: #495057; + background-color: #d6dbdf; + border-color: #d6dbdf; +} +.btn-medium:not(:disabled):not(.disabled):active, .btn-medium:not(:disabled):not(.disabled).active, .show > .btn-medium.dropdown-toggle { + color: #495057; + background-color: #b9c2c9; + border-color: #b2bcc3; +} +.btn-medium:not(:disabled):not(.disabled):active:focus, .btn-medium:not(:disabled):not(.disabled).active:focus, .show > .btn-medium.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(193, 198, 203, 0.5); +} + .btn-outline-primary { color: #ffcc00; border-color: #ffcc00; @@ -3578,6 +3833,31 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0 rgba(37, 122, 244, 0.5); } +.btn-outline-light-blue { + color: #e3f1fe; + border-color: #e3f1fe; +} +.btn-outline-light-blue:hover { + color: #495057; + background-color: #e3f1fe; + border-color: #e3f1fe; +} +.btn-outline-light-blue:focus, .btn-outline-light-blue.focus { + box-shadow: 0 0 0 0 rgba(227, 241, 254, 0.5); +} +.btn-outline-light-blue.disabled, .btn-outline-light-blue:disabled { + color: #e3f1fe; + background-color: transparent; +} +.btn-outline-light-blue:not(:disabled):not(.disabled):active, .btn-outline-light-blue:not(:disabled):not(.disabled).active, .show > .btn-outline-light-blue.dropdown-toggle { + color: #495057; + background-color: #e3f1fe; + border-color: #e3f1fe; +} +.btn-outline-light-blue:not(:disabled):not(.disabled):active:focus, .btn-outline-light-blue:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light-blue.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(227, 241, 254, 0.5); +} + .btn-outline-yellow { color: #ffcc00; border-color: #ffcc00; @@ -3603,6 +3883,31 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.5); } +.btn-outline-light-yellow { + color: #fffaf0; + border-color: #fffaf0; +} +.btn-outline-light-yellow:hover { + color: #495057; + background-color: #fffaf0; + border-color: #fffaf0; +} +.btn-outline-light-yellow:focus, .btn-outline-light-yellow.focus { + box-shadow: 0 0 0 0 rgba(255, 250, 240, 0.5); +} +.btn-outline-light-yellow.disabled, .btn-outline-light-yellow:disabled { + color: #fffaf0; + background-color: transparent; +} +.btn-outline-light-yellow:not(:disabled):not(.disabled):active, .btn-outline-light-yellow:not(:disabled):not(.disabled).active, .show > .btn-outline-light-yellow.dropdown-toggle { + color: #495057; + background-color: #fffaf0; + border-color: #fffaf0; +} +.btn-outline-light-yellow:not(:disabled):not(.disabled):active:focus, .btn-outline-light-yellow:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light-yellow.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(255, 250, 240, 0.5); +} + .btn-outline-orange { color: #ff8c00; border-color: #ff8c00; @@ -3628,6 +3933,31 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.5); } +.btn-outline-light-orange { + color: #ffe4b5; + border-color: #ffe4b5; +} +.btn-outline-light-orange:hover { + color: #495057; + background-color: #ffe4b5; + border-color: #ffe4b5; +} +.btn-outline-light-orange:focus, .btn-outline-light-orange.focus { + box-shadow: 0 0 0 0 rgba(255, 228, 181, 0.5); +} +.btn-outline-light-orange.disabled, .btn-outline-light-orange:disabled { + color: #ffe4b5; + background-color: transparent; +} +.btn-outline-light-orange:not(:disabled):not(.disabled):active, .btn-outline-light-orange:not(:disabled):not(.disabled).active, .show > .btn-outline-light-orange.dropdown-toggle { + color: #495057; + background-color: #ffe4b5; + border-color: #ffe4b5; +} +.btn-outline-light-orange:not(:disabled):not(.disabled):active:focus, .btn-outline-light-orange:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light-orange.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(255, 228, 181, 0.5); +} + .btn-outline-red { color: #ff3939; border-color: #ff3939; @@ -3653,6 +3983,56 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0 rgba(255, 57, 57, 0.5); } +.btn-outline-light-red { + color: #ffe4e1; + border-color: #ffe4e1; +} +.btn-outline-light-red:hover { + color: #495057; + background-color: #ffe4e1; + border-color: #ffe4e1; +} +.btn-outline-light-red:focus, .btn-outline-light-red.focus { + box-shadow: 0 0 0 0 rgba(255, 228, 225, 0.5); +} +.btn-outline-light-red.disabled, .btn-outline-light-red:disabled { + color: #ffe4e1; + background-color: transparent; +} +.btn-outline-light-red:not(:disabled):not(.disabled):active, .btn-outline-light-red:not(:disabled):not(.disabled).active, .show > .btn-outline-light-red.dropdown-toggle { + color: #495057; + background-color: #ffe4e1; + border-color: #ffe4e1; +} +.btn-outline-light-red:not(:disabled):not(.disabled):active:focus, .btn-outline-light-red:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light-red.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(255, 228, 225, 0.5); +} + +.btn-outline-medium { + color: #d6dbdf; + border-color: #d6dbdf; +} +.btn-outline-medium:hover { + color: #495057; + background-color: #d6dbdf; + border-color: #d6dbdf; +} +.btn-outline-medium:focus, .btn-outline-medium.focus { + box-shadow: 0 0 0 0 rgba(214, 219, 223, 0.5); +} +.btn-outline-medium.disabled, .btn-outline-medium:disabled { + color: #d6dbdf; + background-color: transparent; +} +.btn-outline-medium:not(:disabled):not(.disabled):active, .btn-outline-medium:not(:disabled):not(.disabled).active, .show > .btn-outline-medium.dropdown-toggle { + color: #495057; + background-color: #d6dbdf; + border-color: #d6dbdf; +} +.btn-outline-medium:not(:disabled):not(.disabled):active:focus, .btn-outline-medium:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-medium.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(214, 219, 223, 0.5); +} + .btn-link { font-weight: 400; color: #ff8c00; @@ -5633,6 +6013,19 @@ a.badge-blue:focus, a.badge-blue.focus { box-shadow: 0 0 0 0.2rem rgba(37, 122, 244, 0.5); } +.badge-light-blue { + color: #495057; + background-color: #e3f1fe; +} +a.badge-light-blue:hover, a.badge-light-blue:focus { + color: #495057; + background-color: #b2d8fc; +} +a.badge-light-blue:focus, a.badge-light-blue.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(227, 241, 254, 0.5); +} + .badge-yellow { color: #495057; background-color: #ffcc00; @@ -5646,6 +6039,19 @@ a.badge-yellow:focus, a.badge-yellow.focus { box-shadow: 0 0 0 0.2rem rgba(255, 204, 0, 0.5); } +.badge-light-yellow { + color: #495057; + background-color: #fffaf0; +} +a.badge-light-yellow:hover, a.badge-light-yellow:focus { + color: #495057; + background-color: #ffe9bd; +} +a.badge-light-yellow:focus, a.badge-light-yellow.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(255, 250, 240, 0.5); +} + .badge-orange { color: #495057; background-color: #ff8c00; @@ -5659,6 +6065,19 @@ a.badge-orange:focus, a.badge-orange.focus { box-shadow: 0 0 0 0.2rem rgba(255, 140, 0, 0.5); } +.badge-light-orange { + color: #495057; + background-color: #ffe4b5; +} +a.badge-light-orange:hover, a.badge-light-orange:focus { + color: #495057; + background-color: #ffd182; +} +a.badge-light-orange:focus, a.badge-light-orange.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(255, 228, 181, 0.5); +} + .badge-red { color: #fff; background-color: #ff3939; @@ -5672,6 +6091,32 @@ a.badge-red:focus, a.badge-red.focus { box-shadow: 0 0 0 0.2rem rgba(255, 57, 57, 0.5); } +.badge-light-red { + color: #495057; + background-color: #ffe4e1; +} +a.badge-light-red:hover, a.badge-light-red:focus { + color: #495057; + background-color: #ffb6ae; +} +a.badge-light-red:focus, a.badge-light-red.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(255, 228, 225, 0.5); +} + +.badge-medium { + color: #495057; + background-color: #d6dbdf; +} +a.badge-medium:hover, a.badge-medium:focus { + color: #495057; + background-color: #b9c2c9; +} +a.badge-medium:focus, a.badge-medium.focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(214, 219, 223, 0.5); +} + .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; @@ -5897,6 +6342,18 @@ a.badge-red:focus, a.badge-red.focus { color: #193a6a; } +.alert-light-blue { + color: #868f98; + background-color: #f9fcff; + border-color: #f7fbff; +} +.alert-light-blue hr { + border-top-color: #deeeff; +} +.alert-light-blue .alert-link { + color: #6c767f; +} + .alert-yellow { color: #947c14; background-color: #fff5cc; @@ -5909,6 +6366,18 @@ a.badge-red:focus, a.badge-red.focus { color: #67560e; } +.alert-light-yellow { + color: #949490; + background-color: #fffefc; + border-color: #fffefb; +} +.alert-light-yellow hr { + border-top-color: #fff8e2; +} +.alert-light-yellow .alert-link { + color: #7b7b76; +} + .alert-orange { color: #945b14; background-color: #ffe8cc; @@ -5921,6 +6390,18 @@ a.badge-red:focus, a.badge-red.focus { color: #673f0e; } +.alert-light-orange { + color: #948872; + background-color: floralwhite; + border-color: #fff7ea; +} +.alert-light-orange hr { + border-top-color: #ffedd1; +} +.alert-light-orange .alert-link { + color: #786e5b; +} + .alert-red { color: #942f31; background-color: #ffd7d7; @@ -5933,6 +6414,30 @@ a.badge-red:focus, a.badge-red.focus { color: #6d2324; } +.alert-light-red { + color: #948889; + background-color: #fffaf9; + border-color: #fff7f7; +} +.alert-light-red hr { + border-top-color: #ffdede; +} +.alert-light-red .alert-link { + color: #7b6e6f; +} + +.alert-medium { + color: #7f8488; + background-color: #f7f8f9; + border-color: #f4f5f6; +} +.alert-medium hr { + border-top-color: #e6e8eb; +} +.alert-medium .alert-link { + color: #666a6e; +} + @-webkit-keyframes progress-bar-stripes { from { background-position: 1rem 0; @@ -6399,6 +6904,20 @@ a.badge-red:focus, a.badge-red.focus { border-color: #235193; } +.list-group-item-light-blue { + color: #868f98; + background-color: #f7fbff; +} +.list-group-item-light-blue.list-group-item-action:hover, .list-group-item-light-blue.list-group-item-action:focus { + color: #868f98; + background-color: #deeeff; +} +.list-group-item-light-blue.list-group-item-action.active { + color: #fff; + background-color: #868f98; + border-color: #868f98; +} + .list-group-item-yellow { color: #947c14; background-color: #fff1b8; @@ -6413,6 +6932,20 @@ a.badge-red:focus, a.badge-red.focus { border-color: #947c14; } +.list-group-item-light-yellow { + color: #949490; + background-color: #fffefb; +} +.list-group-item-light-yellow.list-group-item-action:hover, .list-group-item-light-yellow.list-group-item-action:focus { + color: #949490; + background-color: #fff8e2; +} +.list-group-item-light-yellow.list-group-item-action.active { + color: #fff; + background-color: #949490; + border-color: #949490; +} + .list-group-item-orange { color: #945b14; background-color: #ffdfb8; @@ -6427,6 +6960,20 @@ a.badge-red:focus, a.badge-red.focus { border-color: #945b14; } +.list-group-item-light-orange { + color: #948872; + background-color: #fff7ea; +} +.list-group-item-light-orange.list-group-item-action:hover, .list-group-item-light-orange.list-group-item-action:focus { + color: #948872; + background-color: #ffedd1; +} +.list-group-item-light-orange.list-group-item-action.active { + color: #fff; + background-color: #948872; + border-color: #948872; +} + .list-group-item-red { color: #942f31; background-color: #ffc8c8; @@ -6441,6 +6988,34 @@ a.badge-red:focus, a.badge-red.focus { border-color: #942f31; } +.list-group-item-light-red { + color: #948889; + background-color: #fff7f7; +} +.list-group-item-light-red.list-group-item-action:hover, .list-group-item-light-red.list-group-item-action:focus { + color: #948889; + background-color: #ffdede; +} +.list-group-item-light-red.list-group-item-action.active { + color: #fff; + background-color: #948889; + border-color: #948889; +} + +.list-group-item-medium { + color: #7f8488; + background-color: #f4f5f6; +} +.list-group-item-medium.list-group-item-action:hover, .list-group-item-medium.list-group-item-action:focus { + color: #7f8488; + background-color: #e6e8eb; +} +.list-group-item-medium.list-group-item-action.active { + color: #fff; + background-color: #7f8488; + border-color: #7f8488; +} + .close { float: right; font-size: 1.5rem; @@ -7364,6 +7939,16 @@ button.bg-blue:focus { background-color: #0b60db !important; } +.bg-light-blue { + background-color: #e3f1fe !important; +} + +a.bg-light-blue:hover, a.bg-light-blue:focus, +button.bg-light-blue:hover, +button.bg-light-blue:focus { + background-color: #b2d8fc !important; +} + .bg-yellow { background-color: #ffcc00 !important; } @@ -7374,6 +7959,16 @@ button.bg-yellow:focus { background-color: #cca300 !important; } +.bg-light-yellow { + background-color: #fffaf0 !important; +} + +a.bg-light-yellow:hover, a.bg-light-yellow:focus, +button.bg-light-yellow:hover, +button.bg-light-yellow:focus { + background-color: #ffe9bd !important; +} + .bg-orange { background-color: #ff8c00 !important; } @@ -7384,6 +7979,16 @@ button.bg-orange:focus { background-color: #cc7000 !important; } +.bg-light-orange { + background-color: #ffe4b5 !important; +} + +a.bg-light-orange:hover, a.bg-light-orange:focus, +button.bg-light-orange:hover, +button.bg-light-orange:focus { + background-color: #ffd182 !important; +} + .bg-red { background-color: #ff3939 !important; } @@ -7394,6 +7999,26 @@ button.bg-red:focus { background-color: #ff0606 !important; } +.bg-light-red { + background-color: #ffe4e1 !important; +} + +a.bg-light-red:hover, a.bg-light-red:focus, +button.bg-light-red:hover, +button.bg-light-red:focus { + background-color: #ffb6ae !important; +} + +.bg-medium { + background-color: #d6dbdf !important; +} + +a.bg-medium:hover, a.bg-medium:focus, +button.bg-medium:hover, +button.bg-medium:focus { + background-color: #b9c2c9 !important; +} + .bg-white { background-color: #fff !important; } @@ -7502,18 +8127,38 @@ button.bg-red:focus { border-color: #257af4 !important; } +.border-light-blue { + border-color: #e3f1fe !important; +} + .border-yellow { border-color: #ffcc00 !important; } +.border-light-yellow { + border-color: #fffaf0 !important; +} + .border-orange { border-color: #ff8c00 !important; } +.border-light-orange { + border-color: #ffe4b5 !important; +} + .border-red { border-color: #ff3939 !important; } +.border-light-red { + border-color: #ffe4e1 !important; +} + +.border-medium { + border-color: #d6dbdf !important; +} + .border-white { border-color: #fff !important; } @@ -13673,6 +14318,14 @@ a.text-blue:hover, a.text-blue:focus { color: #0a56c3 !important; } +.text-light-blue { + color: #e3f1fe !important; +} + +a.text-light-blue:hover, a.text-light-blue:focus { + color: #99ccfb !important; +} + .text-yellow { color: #ffcc00 !important; } @@ -13681,6 +14334,14 @@ a.text-yellow:hover, a.text-yellow:focus { color: #b38f00 !important; } +.text-light-yellow { + color: #fffaf0 !important; +} + +a.text-light-yellow:hover, a.text-light-yellow:focus { + color: #ffe1a4 !important; +} + .text-orange { color: #ff8c00 !important; } @@ -13689,6 +14350,14 @@ a.text-orange:hover, a.text-orange:focus { color: #b36200 !important; } +.text-light-orange { + color: #ffe4b5 !important; +} + +a.text-light-orange:hover, a.text-light-orange:focus { + color: #ffc869 !important; +} + .text-red { color: #ff3939 !important; } @@ -13697,6 +14366,22 @@ a.text-red:hover, a.text-red:focus { color: #ec0000 !important; } +.text-light-red { + color: #ffe4e1 !important; +} + +a.text-light-red:hover, a.text-light-red:focus { + color: #ff9f95 !important; +} + +.text-medium { + color: #d6dbdf !important; +} + +a.text-medium:hover, a.text-medium:focus { + color: #abb5bd !important; +} + .text-body { color: #212529 !important; } diff --git a/website/css/main.css b/website/css/main.css index 32a9ebb262c..a71c07c5153 100644 --- a/website/css/main.css +++ b/website/css/main.css @@ -71,9 +71,14 @@ .card { box-shadow: 0 8px 20px rgba(108, 117, 125, 0.2); overflow: hidden; + position: relative; transition: box-shadow 0.2s, transform 0.2s; width: 100%; } +.card-body { + position: relative; + z-index: 10; +} .card.is-large .card-body { padding: 40px; @@ -83,6 +88,34 @@ border-color: #ffcc00; } +.card.has-dark-border { + border-color: #6c757d; +} + +.card.has-pattern:before, +.card.has-pattern:after { + background-repeat: no-repeat; + background-size: auto 100%; + bottom: 0; + content: ""; + display: block; + position: absolute; + top: 0; + width: 72px; +} + +.card.has-pattern:before { + background-image: url(../images/backgrounds/bg-card-pattern-blue-1.png); + background-position: left top; + left: 0; +} + +.card.has-pattern:after { + background-image: url(../images/backgrounds/bg-card-pattern-blue-2.png); + background-position: right top; + right: 0; +} + a.card:active, a.card:hover, .card.has-hover:active, @@ -163,7 +196,7 @@ a.card:hover:after, left: calc(-100% - 40px); } .case-study-card:before { - background: no-repeat url(../images/backgrounds/bg-card-pattern.png); + background: no-repeat url(../images/backgrounds/bg-card-pattern-red.png); background-position: right center; background-size: contain; content: ""; @@ -267,8 +300,25 @@ a.card:hover:after, background-repeat: no-repeat; background-position: center; background-size: cover; + overflow: hidden; position: relative; } +.hero-bg { + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: block; + height: 100%; + left: 50%; + position: absolute; + top: 0; + transform: translateX(-50%); + z-index: 1; +} +.hero > .container { + position: relative; + z-index: 2; +} .hero.has-offset { margin-bottom: -160px; @@ -283,6 +333,18 @@ hr { width: 100%; } +hr.is-large { + height: 8px; +} + +hr.is-medium { + background: #d6dbdf; +} + +hr.is-dark { + background: #495057; +} + hr.is-yellow { background: linear-gradient(90deg, #ff8c00 0, #ff8c00 8px, #ffcc00 16px, rgba(255, 204, 0, 0) 100%); -webkit-clip-path: polygon(8px 100%, 0 100%, 0 0, 8px 0, 8px 100%, 16px 100%, 16px 0, 100% 0, 100% 100%); @@ -291,6 +353,7 @@ hr.is-yellow { } .icon { + display: block; height: 80px; margin-bottom: 24px; } @@ -362,6 +425,36 @@ hr.is-yellow { flex-wrap: wrap; } +.photo-frame { + background: #fff; + border: 6px solid #257af4; + border-radius: 100%; + box-shadow: 0 8px 20px rgba(108, 117, 125, 0.2); + margin-bottom: 24px; + max-width: 160px; + overflow: hidden; + position: relative; + width: 100%; +} +.photo-frame:before { + content: ""; + display: block; + padding-bottom: 100%; + width: 100%; +} +.photo-frame img { + display: block; + height: 100%; + left: 0; + -o-object-fit: contain; + object-fit: contain; + -o-object-position: center; + object-position: center; + position: absolute; + top: 0; + width: 100%; +} + .pullquote { position: relative; width: 70%; @@ -464,6 +557,21 @@ hr.is-yellow { -webkit-mask-image: url("/images/icons/icon-linkedin-gray.svg"); mask-image: url("/images/icons/icon-linkedin-gray.svg"); } +.social-icons-linkedin-alt { + -webkit-mask-image: url("/images/icons/icon-linkedin-alt-gray.svg"); + mask-image: url("/images/icons/icon-linkedin-alt-gray.svg"); +} + +.social-icons.size-small > a { + height: 20px; + width: 20px; +} +.social-icons.size-small > a:active, .social-icons.size-small > a:hover { + background: #212529; +} +.social-icons.size-small > a + a { + margin-left: 16px; +} .tabs { position: relative; @@ -575,11 +683,15 @@ ul.has-separators li:not(:last-child) { background-image: linear-gradient(58deg, #FF6443 3%, #FE561D 24%, #E32F0D 93%); } +.bg-gradient-light-orange { + background-image: linear-gradient(90deg, rgba(255, 203, 128, 0) 0%, #FFCB80 100%); +} + .bg-offset-right { - bottom: 40px; + bottom: 0; left: 96px; position: absolute; - top: 40px; + top: 0; width: 100vw; } @@ -620,6 +732,10 @@ ul.has-separators li:not(:last-child) { font-weight: 700; } +.text-decoration-underline { + text-decoration: underline; +} + .text-upper { text-transform: uppercase; } \ No newline at end of file diff --git a/website/images/backgrounds/bg-card-pattern-blue-1.png b/website/images/backgrounds/bg-card-pattern-blue-1.png new file mode 100644 index 00000000000..b15958adcb1 Binary files /dev/null and b/website/images/backgrounds/bg-card-pattern-blue-1.png differ diff --git a/website/images/backgrounds/bg-card-pattern-blue-2.png b/website/images/backgrounds/bg-card-pattern-blue-2.png new file mode 100644 index 00000000000..a0bf1a9f752 Binary files /dev/null and b/website/images/backgrounds/bg-card-pattern-blue-2.png differ diff --git a/website/images/backgrounds/bg-card-pattern.png b/website/images/backgrounds/bg-card-pattern-red.png similarity index 100% rename from website/images/backgrounds/bg-card-pattern.png rename to website/images/backgrounds/bg-card-pattern-red.png diff --git a/website/images/backgrounds/bg-hero-company.png b/website/images/backgrounds/bg-hero-company.png new file mode 100644 index 00000000000..4e46ce40d63 Binary files /dev/null and b/website/images/backgrounds/bg-hero-company.png differ diff --git a/website/images/icons/icon-linkedin-alt-gray.svg b/website/images/icons/icon-linkedin-alt-gray.svg new file mode 100644 index 00000000000..e286486ab9b --- /dev/null +++ b/website/images/icons/icon-linkedin-alt-gray.svg @@ -0,0 +1,13 @@ + + \ No newline at end of file diff --git a/website/images/logos/logo-benchmark-capital.png b/website/images/logos/logo-benchmark-capital.png new file mode 100644 index 00000000000..38bbce23e0e Binary files /dev/null and b/website/images/logos/logo-benchmark-capital.png differ diff --git a/website/images/logos/logo-index-ventures.png b/website/images/logos/logo-index-ventures.png new file mode 100644 index 00000000000..5bf804bc8b7 Binary files /dev/null and b/website/images/logos/logo-index-ventures.png differ diff --git a/website/images/photos/photo-aaron-katz.jpg b/website/images/photos/photo-aaron-katz.jpg new file mode 100644 index 00000000000..0bbd61112ff Binary files /dev/null and b/website/images/photos/photo-aaron-katz.jpg differ diff --git a/website/images/photos/photo-alexey-milovidov.jpg b/website/images/photos/photo-alexey-milovidov.jpg new file mode 100644 index 00000000000..12c9ba082f4 Binary files /dev/null and b/website/images/photos/photo-alexey-milovidov.jpg differ diff --git a/website/images/photos/photo-arno-van-driel.jpg b/website/images/photos/photo-arno-van-driel.jpg new file mode 100644 index 00000000000..70e97a58d46 Binary files /dev/null and b/website/images/photos/photo-arno-van-driel.jpg differ diff --git a/website/images/photos/photo-dorota-szeremeta.jpg b/website/images/photos/photo-dorota-szeremeta.jpg new file mode 100644 index 00000000000..d5847fa310b Binary files /dev/null and b/website/images/photos/photo-dorota-szeremeta.jpg differ diff --git a/website/images/photos/photo-ivan-blinkov.jpg b/website/images/photos/photo-ivan-blinkov.jpg new file mode 100644 index 00000000000..0546f3107e4 Binary files /dev/null and b/website/images/photos/photo-ivan-blinkov.jpg differ diff --git a/website/images/photos/photo-jason-chan.jpg b/website/images/photos/photo-jason-chan.jpg new file mode 100644 index 00000000000..34cc4b84ba2 Binary files /dev/null and b/website/images/photos/photo-jason-chan.jpg differ diff --git a/website/images/photos/photo-mike-hayes.jpg b/website/images/photos/photo-mike-hayes.jpg new file mode 100644 index 00000000000..1015a6053a8 Binary files /dev/null and b/website/images/photos/photo-mike-hayes.jpg differ diff --git a/website/images/photos/photo-thom-oconner.jpg b/website/images/photos/photo-thom-oconner.jpg new file mode 100644 index 00000000000..fc0b37afaf1 Binary files /dev/null and b/website/images/photos/photo-thom-oconner.jpg differ diff --git a/website/images/photos/photo-yury-izrailevsky.jpg b/website/images/photos/photo-yury-izrailevsky.jpg new file mode 100644 index 00000000000..79e2f2665d4 Binary files /dev/null and b/website/images/photos/photo-yury-izrailevsky.jpg differ diff --git a/website/images/placeholder-contact-form.png b/website/images/placeholder-contact-form.png new file mode 100644 index 00000000000..297d10e3a89 Binary files /dev/null and b/website/images/placeholder-contact-form.png differ diff --git a/website/images/placeholder-newsletter-form.png b/website/images/placeholder-newsletter-form.png new file mode 100644 index 00000000000..dc487941782 Binary files /dev/null and b/website/images/placeholder-newsletter-form.png differ diff --git a/website/src/scss/_variables.scss b/website/src/scss/_variables.scss index e4ea5e57da1..60badfc764a 100644 --- a/website/src/scss/_variables.scss +++ b/website/src/scss/_variables.scss @@ -55,11 +55,16 @@ $theme-colors: ( "black": $black, "blue": $color-primary-accent-blue, + "light-blue": $color-primary-accent-light-blue, "yellow": $color-primary-accent-yellow, + "light-yellow": $color-primary-accent-light-yellow, "orange": $color-secondary-accent-orange, + "light-orange": $color-secondary-accent-light-orange, "red": $color-secondary-accent-red, + "light-red": $color-secondary-accent-light-red, "light": $gray-100, + "medium": $gray-500, "dark": $gray-900 ); diff --git a/website/src/scss/components/_card.scss b/website/src/scss/components/_card.scss index d841ea9f511..8691234872b 100644 --- a/website/src/scss/components/_card.scss +++ b/website/src/scss/components/_card.scss @@ -1,8 +1,14 @@ .card { box-shadow: $box-shadow; overflow: hidden; + position: relative; transition: box-shadow 0.2s, transform 0.2s; width: 100%; + + &-body { + position: relative; + z-index: 10; + } } .card.is-large .card-body { @@ -13,6 +19,34 @@ border-color: $color-brand-primary; } +.card.has-dark-border { + border-color: $gray-700; +} + +.card.has-pattern:before, +.card.has-pattern:after { + background-repeat: no-repeat; + background-size: auto 100%; + bottom: 0; + content: ''; + display: block; + position: absolute; + top: 0; + width: 72px; +} + +.card.has-pattern:before { + background-image: url(#{'../images/backgrounds/bg-card-pattern-blue-1.png'}); + background-position: left top; + left: 0; +} + +.card.has-pattern:after { + background-image: url(#{'../images/backgrounds/bg-card-pattern-blue-2.png'}); + background-position: right top; + right: 0; +} + a.card:active, a.card:hover, .card.has-hover:active, diff --git a/website/src/scss/components/_case-study-card.scss b/website/src/scss/components/_case-study-card.scss index 659de4fa127..06054e02e9e 100644 --- a/website/src/scss/components/_case-study-card.scss +++ b/website/src/scss/components/_case-study-card.scss @@ -58,7 +58,7 @@ } &:before { - background: no-repeat url(#{'../images/backgrounds/bg-card-pattern.png'}); + background: no-repeat url(#{'../images/backgrounds/bg-card-pattern-red.png'}); background-position: right center; background-size: contain; content: ''; diff --git a/website/src/scss/components/_hero.scss b/website/src/scss/components/_hero.scss index 28c9d1c6be1..374f9fc9458 100644 --- a/website/src/scss/components/_hero.scss +++ b/website/src/scss/components/_hero.scss @@ -2,7 +2,26 @@ background-repeat: no-repeat; background-position: center; background-size: cover; + overflow: hidden; position: relative; + + &-bg { + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: block; + height: 100%; + left: 50%; + position: absolute; + top: 0; + transform: translateX(-50%); + z-index: 1; + } + + > .container { + position: relative; + z-index: 2; + } } .hero.has-offset { diff --git a/website/src/scss/components/_hr.scss b/website/src/scss/components/_hr.scss index 51516fcb288..9c482c8cd7e 100644 --- a/website/src/scss/components/_hr.scss +++ b/website/src/scss/components/_hr.scss @@ -6,6 +6,18 @@ hr { width: 100%; } +hr.is-large { + height: 8px; +} + +hr.is-medium { + background: $gray-500; +} + +hr.is-dark { + background: $gray-900; +} + hr.is-yellow { background: linear-gradient(90deg, $color-secondary-accent-orange 0, $color-secondary-accent-orange 8px, $color-primary-accent-yellow 16px, rgba($color-primary-accent-yellow, 0) 100%); clip-path: polygon( diff --git a/website/src/scss/components/_icon.scss b/website/src/scss/components/_icon.scss index 7c2b08f9e28..aa54b3f98eb 100644 --- a/website/src/scss/components/_icon.scss +++ b/website/src/scss/components/_icon.scss @@ -1,4 +1,5 @@ .icon { + display: block; height: 80px; margin-bottom: $spacer * 3; } diff --git a/website/src/scss/components/_photo-frame.scss b/website/src/scss/components/_photo-frame.scss new file mode 100644 index 00000000000..3275a54b294 --- /dev/null +++ b/website/src/scss/components/_photo-frame.scss @@ -0,0 +1,29 @@ +.photo-frame { + background: $white; + border: 6px solid $color-primary-accent-blue; + border-radius: 100%; + box-shadow: $box-shadow; + margin-bottom: $spacer * 3; + max-width: 160px; + overflow: hidden; + position: relative; + width: 100%; + + &:before { + content: ''; + display: block; + padding-bottom: 100%; + width: 100%; + } + + img { + display: block; + height: 100%; + left: 0; + object-fit: contain; + object-position: center; + position: absolute; + top: 0; + width: 100%; + } +} diff --git a/website/src/scss/components/_social-icons.scss b/website/src/scss/components/_social-icons.scss index 34d330a1856..9b55d5d1469 100644 --- a/website/src/scss/components/_social-icons.scss +++ b/website/src/scss/components/_social-icons.scss @@ -35,4 +35,24 @@ &-linkedin { mask-image: url('/images/icons/icon-linkedin-gray.svg'); } + + &-linkedin-alt { + mask-image: url('/images/icons/icon-linkedin-alt-gray.svg'); + } +} + +.social-icons.size-small { + > a { + height: 20px; + width: 20px; + + &:active, + &:hover { + background: $black; + } + } + + > a + a { + margin-left: $spacer * 2; + } } diff --git a/website/src/scss/utilities/_bg.scss b/website/src/scss/utilities/_bg.scss index 63766102fee..a2c9dbd0882 100644 --- a/website/src/scss/utilities/_bg.scss +++ b/website/src/scss/utilities/_bg.scss @@ -2,10 +2,14 @@ background-image: linear-gradient(58deg, #FF6443 3%, #FE561D 24%, #E32F0D 93%); } +.bg-gradient-light-orange { + background-image: linear-gradient(90deg, rgba(#FFCB80, 0) 0%, #FFCB80 100%); +} + .bg-offset-right { - bottom: 40px; + bottom: 0; left: 96px; position: absolute; - top: 40px; + top: 0; width: 100vw; } diff --git a/website/src/scss/utilities/_text.scss b/website/src/scss/utilities/_text.scss index 862c6dcacc1..bca5f3bef7c 100644 --- a/website/src/scss/utilities/_text.scss +++ b/website/src/scss/utilities/_text.scss @@ -1,3 +1,7 @@ +.text-decoration-underline { + text-decoration: underline; +} + .text-upper { text-transform: uppercase; } diff --git a/website/templates/company/contact.html b/website/templates/company/contact.html new file mode 100644 index 00000000000..ef8e00a4124 --- /dev/null +++ b/website/templates/company/contact.html @@ -0,0 +1,19 @@ +
+ {{ _('If you have any more thoughts or questions, feel free to contact the ClickHouse team directly at') }} + feedback@clickhouse.com +
+ ++ {{ _('Co-Founder & President, Product & Engineering') }} +
+ + ++ {{ _('Co-Founder & CEO') }} +
+ + ++ {{ _('Co-Founder & CTO') }} +
+ + ++ Creators of the online analytical processing (OLAP) database management system ClickHouse have announced their decision to officially incorporate as a company. The creator of ClickHouse, Alexey Milovidov (CTO), will be joined by co-founders and seasoned enterprise software executives, Yury Izrailevsky (President, Product and Technology) and Aaron Katz (CEO), along with nearly $50M in Series A funding by Index Ventures and Benchmark. +
+ ++ ClickHouse is an open-source, column-oriented OLAP database management system that allows users to generate analytical reports using SQL queries in real-time. Its technology works 100-1,000x faster than traditional database management systems, and processes hundreds of millions to over a billion rows and tens of gigabytes of data per server per second. With a widespread user base around the globe, the technology has received praise for its reliability, ease of use, and fault tolerance. +
+ ++ {{ _('9/20/21') }} +
++ {{ _('New financing will allow the open source success to build a world-class, commercial-grade cloud solution that’s secure, compliant, and convenient for any customer to use.') }} +
+ {{ _('Read More') }} + ++ {{ _('VP, Product') }} +
+ + ++ {{ _('Adviser, Security, Privacy & Compliance') }} +
+ + ++ {{ _('VP, Sales') }} +
+ + ++ {{ _('VP, Support & Services') }} +
+ + ++ {{ _('VP, Operations') }} +
+ + ++ {{ _('VP, EMEA') }} +
+ + ++ {{ _('We are primarily looking for Support Engineers and Software Engineers at this time! For more information, contact us at') }} + careers@clickhouse.com +
+ +