mirror of https://github.com/zulip/zulip.git
2420 lines
49 KiB
CSS
2420 lines
49 KiB
CSS
html {
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body {
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
margin: 0;
|
||
background-color: hsl(0, 0%, 91%);
|
||
color: hsl(0, 0%, 27%);
|
||
line-height: normal;
|
||
|
||
max-width: 100vw;
|
||
}
|
||
|
||
*::-moz-selection {
|
||
background-color: hsla(31, 84%, 60%, 0.3);
|
||
}
|
||
|
||
*::selection {
|
||
background-color: hsla(31, 84%, 60%, 0.3);
|
||
}
|
||
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
|
||
/* -- component styling -- */
|
||
button {
|
||
padding: 5px 12px;
|
||
|
||
font-family: inherit;
|
||
font-size: 0.7em;
|
||
background-color: #fff;
|
||
color: hsl(0, 0%, 27%);
|
||
|
||
border-radius: 4px;
|
||
border: 1px solid hsl(0, 0%, 80%);
|
||
outline: none;
|
||
}
|
||
|
||
button:active {
|
||
background-color: hsl(0, 0%, 98%);
|
||
border: 1px solid hsl(0, 0%, 73%);
|
||
}
|
||
|
||
button.green {
|
||
color: #fff;
|
||
background-color: hsl(170, 47%, 53%);
|
||
|
||
border: 1px solid hsl(169, 45%, 43%);
|
||
}
|
||
|
||
button.button.grey-transparent {
|
||
display: block;
|
||
margin: 0 auto;
|
||
padding: 8px 20px;
|
||
|
||
font-size: 1.1rem;
|
||
font-weight: 400;
|
||
|
||
color: #fff;
|
||
background-color: transparent;
|
||
border: 1px solid #fff;
|
||
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
button.button.grey-transparent:hover {
|
||
background-color: hsla(0, 0%, 100%, 0.2);
|
||
}
|
||
|
||
button.button.grey-transparent:active {
|
||
background-color: #fff;
|
||
color: hsl(0, 0%, 40%);
|
||
}
|
||
|
||
/* -- navbar styling -- */
|
||
|
||
nav {
|
||
position: relative;
|
||
|
||
background-color: hsl(169, 44%, 36%);
|
||
background: -webkit-linear-gradient(to bottom, black, hsl(170, 54%, 61%));
|
||
background: linear-gradient(-145deg, hsl(169, 41%, 31%), hsl(170, 54%, 61%));
|
||
padding: 50px 100px 130px 100px;
|
||
|
||
color: #fff;
|
||
}
|
||
|
||
nav .hamburger {
|
||
display: none;
|
||
fill: #fff;
|
||
cursor: pointer;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
nav .content {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
nav .stripes,
|
||
nav .faded,
|
||
nav .faded-light {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
nav .stripes,
|
||
nav .faded,
|
||
nav .faded-light {
|
||
pointer-events: none;
|
||
}
|
||
|
||
nav .stripes {
|
||
background: repeating-linear-gradient(
|
||
75deg,
|
||
hsla(0, 0%, 100%, 0.0) 0px,
|
||
hsla(0, 0%, 100%, 0.05) 200px
|
||
);
|
||
}
|
||
|
||
nav .faded {
|
||
background: -webkit-linear-gradient(top bottom, transparent , hsla(0, 0%, 0%, 0.1));
|
||
background: linear-gradient(0deg, transparent , hsla(0, 0%, 0%, 0.1));
|
||
}
|
||
|
||
nav .faded-light {
|
||
background: -webkit-linear-gradient(top top, transparent , hsla(170, 54%, 61%, 0.8));
|
||
background: linear-gradient(180deg, transparent , hsla(170, 54%, 61%, 0.8));
|
||
}
|
||
|
||
nav .logo {
|
||
top: 7px;
|
||
}
|
||
|
||
nav .logo span {
|
||
position: relative;
|
||
left: 5px;
|
||
top: 1px;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
vertical-align: top;
|
||
text-transform: uppercase;
|
||
font-size: 1.2rem;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
nav .brand-logo {
|
||
width: 25px;
|
||
}
|
||
|
||
nav ul {
|
||
float: right;
|
||
list-style-type: none;
|
||
font-weight: 500;
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
nav ul .exit {
|
||
display: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
nav ul li {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin: 10px;
|
||
|
||
color: #fff;
|
||
|
||
opacity: 0.7;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
nav li a,
|
||
nav li a:hover {
|
||
text-decoration: none;
|
||
color: #fff !important;
|
||
}
|
||
|
||
nav ul li.active,
|
||
nav ul li:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
nav ul li.active::after {
|
||
content: "v";
|
||
|
||
position: absolute;
|
||
bottom: -15px;
|
||
left: calc(50% - 4px);
|
||
|
||
font-weight: 100;
|
||
|
||
transform: scaleX(2) scaleY(0.5);
|
||
}
|
||
|
||
nav.dark-blue {
|
||
background: hsl(218, 23%, 16%);
|
||
}
|
||
|
||
/* -- main panel styling -- */
|
||
.portico-landing {
|
||
position: relative;
|
||
|
||
transition: all 0.5s ease;
|
||
margin-top: -80px;
|
||
-webkit-transform: translateY(120px);
|
||
transform: translateY(120px);
|
||
opacity: 0;
|
||
|
||
z-index: 1;
|
||
}
|
||
|
||
.portico-landing.show {
|
||
-webkit-transform: translateY(0px);
|
||
transform: translateY(0px);
|
||
opacity: 1;
|
||
}
|
||
|
||
.main {
|
||
width: calc(100% - 200px - 20px);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* -- generic styles -- */
|
||
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
margin: 10px 0px;
|
||
|
||
font-weight: 300;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
p {
|
||
margin: 10px 0px;
|
||
font-weight: normal;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
a,
|
||
a:hover,
|
||
a:visited {
|
||
color: hsl(170, 47%, 53%);
|
||
}
|
||
|
||
a.no-style:hover {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
a.arrow:after {
|
||
content: " ";
|
||
display: inline-block;
|
||
position: relative;
|
||
|
||
height: 17px;
|
||
width: 17px;
|
||
|
||
top: 3px;
|
||
|
||
background-image: url(/static/images/landing-page/arrow.png);
|
||
background-size: 100%;
|
||
|
||
margin-left: 5px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.8em;
|
||
}
|
||
|
||
a {
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:not(.no-style):before {
|
||
content: " ";
|
||
|
||
position: absolute;
|
||
bottom: -1px;
|
||
|
||
height: 1px;
|
||
width: 0%;
|
||
|
||
background-color: hsl(170, 47%, 53%);
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
a:not(.no-style):hover:before {
|
||
width: 100%;
|
||
}
|
||
|
||
.flex {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.float.left {
|
||
float: left;
|
||
}
|
||
|
||
.float.right {
|
||
float: right;
|
||
}
|
||
|
||
.float.clear {
|
||
clear: both;
|
||
}
|
||
|
||
.small {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.box-shadow {
|
||
box-shadow: 0px 0px 80px hsla(0, 0%, 0%, 0.12);
|
||
}
|
||
|
||
.grey {
|
||
color: hsl(0, 0%, 60%);
|
||
}
|
||
|
||
.dark-grey {
|
||
color: hsl(0, 0%, 40%);
|
||
}
|
||
|
||
.bold {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.padded-content {
|
||
padding: 50px;
|
||
}
|
||
|
||
.clear-float {
|
||
clear: both;
|
||
}
|
||
|
||
/* -- modify portico.css -- */
|
||
.app-main {
|
||
max-width: none;
|
||
min-width: 0;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.header,
|
||
.portico-os-announcement {
|
||
display: none;
|
||
}
|
||
|
||
/* -- features page css -- */
|
||
.features-app .main {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.features-app p {
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.feature-page-header {
|
||
padding-top: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.feature-block .flex {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
height: 110px;
|
||
}
|
||
|
||
.feature-block .icon-container {
|
||
width: 70px;
|
||
min-width: 70px;
|
||
text-align: center;
|
||
}
|
||
|
||
.feature-block i {
|
||
float: none;
|
||
}
|
||
|
||
.feature-block i:before {
|
||
background: -webkit-linear-gradient(65deg, hsl(169, 41%, 31%), hsl(170, 54%, 61%));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.feature-block .block h4 {
|
||
font-size: 1em;
|
||
font-weight: 400;
|
||
text-transform: uppercase;
|
||
color: hsl(0, 0%, 66%);
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.feature-block .block p {
|
||
font-size: 1rem;
|
||
margin-left: 15px;
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
/* -- hello page -- */
|
||
.portico-landing.hello {
|
||
background-color: #fff;
|
||
color: hsl(219, 23%, 33%);
|
||
}
|
||
|
||
.portico-landing.hello .hero {
|
||
position: relative;
|
||
padding: 100px 50px 320px 50px;
|
||
|
||
background-color: hsl(219, 21%, 19%);
|
||
color: hsl(220, 15%, 76%);
|
||
|
||
overflow: hidden;
|
||
}
|
||
|
||
.portico-landing.hello .hero .waves {
|
||
position: absolute;
|
||
|
||
width: 150vw;
|
||
height: 150vw;
|
||
|
||
top: 650px;
|
||
left: -25vw;
|
||
|
||
z-index: 0;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.portico-landing.hello .hero .waves .wave {
|
||
position: absolute;
|
||
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
background-color: white;
|
||
border-radius: 35%;
|
||
|
||
opacity: 0.3;
|
||
|
||
animation-name: waves;
|
||
animation-duration: 15s;
|
||
animation-iteration-count: infinite;
|
||
animation-timing-function: linear;
|
||
}
|
||
|
||
.portico-landing.hello .hero .waves .wave.dark-blue {
|
||
background-color: hsl(219, 39%, 13%);
|
||
}
|
||
|
||
.portico-landing.hello .hero .waves .wave.light-blue {
|
||
background-color: hsla(0, 67%, 57%, 0.9);
|
||
|
||
animation-duration: 18s;
|
||
|
||
}
|
||
|
||
.portico-landing.hello .hero .waves .wave.light-green {
|
||
background-color: hsla(187, 98%, 75%, 0.75);
|
||
|
||
animation-name: wavesBackward;
|
||
animation-duration: 21s;
|
||
}
|
||
|
||
@keyframes waves {
|
||
0% {
|
||
transform: rotate(0);
|
||
}
|
||
50% {
|
||
transform: rotate(180deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes wavesBackward {
|
||
0% {
|
||
transform: rotate(0);
|
||
}
|
||
50% {
|
||
transform: rotate(-180deg);
|
||
}
|
||
100% {
|
||
transform: rotate(-360deg);
|
||
}
|
||
}
|
||
|
||
.portico-landing.hello .hero .content {
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing.hello .hero header {
|
||
width: 700px;
|
||
display: inline-block;
|
||
text-align: left;
|
||
}
|
||
|
||
.portico-landing.hello .hero header h1 {
|
||
font-size: 3em;
|
||
}
|
||
|
||
.portico-landing.hello .hero header p {
|
||
margin: 30px 0px;
|
||
|
||
font-size: 1.2em;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.portico-landing.hello .hero header button {
|
||
padding: 8px 15px;
|
||
|
||
background-color: hsl(170, 47%, 54%);
|
||
border: none;
|
||
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
|
||
box-shadow: 0px 1px 2px hsla(0, 0%, 0%, 0.2);
|
||
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.portico-landing.hello .hero header button:hover {
|
||
background-color: hsl(170, 58%, 52%);
|
||
|
||
box-shadow: 0px 2px 5px hsla(0, 0%, 0%, 0.18);
|
||
}
|
||
|
||
.portico-landing.hello .hero header button:active {
|
||
background-color: hsl(170, 42%, 46%);
|
||
|
||
box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.18);
|
||
}
|
||
|
||
.portico-landing.hello .hero header .download-button {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.portico-landing.hello .hero header #see_all_apps {
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
|
||
font-weight: normal;
|
||
}
|
||
|
||
.portico-landing.hello .col-2 {
|
||
width: 60%;
|
||
margin-right: -4px;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.portico-landing.hello .col-3 {
|
||
width: 33.3%;
|
||
margin-right: -4px;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
|
||
.portico-landing.hello .col-4 {
|
||
width: 20%;
|
||
margin-right: -4px;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
/* -- compare css -- */
|
||
.compare {
|
||
background-color: hsl(163, 22%, 31%);
|
||
color: #fff;
|
||
}
|
||
|
||
.compare .text-header .text-content h1 {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.compare .padded-content {
|
||
width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.compare table {
|
||
width: 100%;
|
||
text-align: left;
|
||
border-collapse: collapse;
|
||
|
||
font-weight: 400;
|
||
|
||
color: hsla(0, 0%, 100%, 0.8);
|
||
}
|
||
|
||
.compare table thead th:last-of-type {
|
||
width: 120px;
|
||
}
|
||
|
||
.compare table thead th.uniform {
|
||
width: 20%;
|
||
}
|
||
|
||
.compare table td:not(:first-of-type),
|
||
.compare table th:not(:first-of-type) {
|
||
text-align: center;
|
||
}
|
||
|
||
.compare thead {
|
||
border-bottom: 5px solid hsla(0, 0%, 0%, 0.1);
|
||
}
|
||
|
||
.compare thead th {
|
||
font-weight: 600;
|
||
padding: 15px 0px;
|
||
|
||
color: #fff;
|
||
}
|
||
|
||
.compare thead th.normal {
|
||
font-weight: normal;
|
||
color: inherit;
|
||
}
|
||
|
||
.compare tbody tr {
|
||
border-bottom: 1px solid hsl(163, 22%, 28%);
|
||
}
|
||
|
||
.compare tbody tr td {
|
||
padding: 10px 0px;
|
||
}
|
||
|
||
.compare tbody tr td.no {
|
||
text-align: center;
|
||
}
|
||
|
||
.compare tbody tr td.yes::before {
|
||
content: " ";
|
||
display: inline-block;
|
||
|
||
width: 27px;
|
||
height: 27px;
|
||
background-image: url(/static/images/landing-page/checkmark.png);
|
||
background-size: 100% auto;
|
||
}
|
||
|
||
.compare tbody tr td.no::before {
|
||
content: "×";
|
||
|
||
position: relative;
|
||
display: inline-block;
|
||
|
||
top: 3px;
|
||
|
||
font-size: 2.5rem;
|
||
font-weight: 300;
|
||
line-height: 0.9;
|
||
}
|
||
|
||
.compare tbody tr td a {
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.compare p {
|
||
font-weight: 300;
|
||
}
|
||
|
||
.compare .terms {
|
||
margin-top: 30px;
|
||
font-weight: 400;
|
||
font-size: 0.7em;
|
||
|
||
line-height: 1.2;
|
||
|
||
color: hsla(0, 0%, 100%, 0.8);
|
||
}
|
||
|
||
.screen .line {
|
||
width: 100%;
|
||
height: 6px;
|
||
margin: 8px 0px;
|
||
|
||
background-color: hsl(0, 0%, 93%);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.screen .line.small {
|
||
width: 60%;
|
||
}
|
||
|
||
.screen .line.micro {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
width: 15%;
|
||
}
|
||
|
||
.screen .line.darker {
|
||
background-color: hsl(0, 0%, 73%);
|
||
}
|
||
|
||
.screen .line.nano {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
width: 10%;
|
||
}
|
||
|
||
.screen .line.med {
|
||
width: 80%;
|
||
}
|
||
|
||
.screen .col-4 .action-block {
|
||
margin: 20px;
|
||
}
|
||
|
||
.screen .col-4 .action-block .sub-block {
|
||
margin: 0px 10px;
|
||
}
|
||
|
||
.screen .line.red {
|
||
background-color: hsl(350, 42%, 77%);
|
||
}
|
||
|
||
.screen .line.blue {
|
||
background-color: hsl(193, 42%, 77%);
|
||
}
|
||
|
||
.screen .line.green {
|
||
background-color: hsl(119, 42%, 77%);
|
||
}
|
||
|
||
.screen .line.orange {
|
||
background-color: hsl(30, 42%, 77%);
|
||
}
|
||
|
||
.screen .top .avatar {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: hsl(0, 0%, 73%);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.screen .top .top-line {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
width: 50px;
|
||
margin-top: 0px;
|
||
|
||
background-color: hsl(0, 0%, 73%);
|
||
}
|
||
|
||
.screen .navbar {
|
||
background-color: hsl(170, 47%, 54%);
|
||
padding: 10px;
|
||
}
|
||
|
||
.screen .center-page {
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
overflow: hidden;
|
||
}
|
||
|
||
.screen .center-page .message-feed {
|
||
height: calc(100% - 20px);
|
||
margin-top: 20px;
|
||
|
||
transition: all 0.1s ease;
|
||
}
|
||
|
||
.screen .message-feed .message .content {
|
||
margin-left: 24px;
|
||
position: relative;
|
||
top: -15px;
|
||
}
|
||
|
||
.screen .message-feed .stream {
|
||
padding: 3px 5px 0px 5px;
|
||
margin: 0px 5px;
|
||
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
|
||
box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 0.01);
|
||
}
|
||
|
||
.portico-landing.hello .screen.hero-screen {
|
||
padding: 95px 170px;
|
||
height: 385px;
|
||
|
||
background-image: url(/static/images/landing-page/macbook-empty.png);
|
||
background-size: 100% auto;
|
||
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.portico-landing.hello .screen.hero-screen::before,
|
||
.portico-landing.hello .screen.hero-screen::after {
|
||
content: "";
|
||
display: none;
|
||
}
|
||
|
||
.portico-landing.hello .screen.hero-screen .main-page {
|
||
transform: translateY(-12px) translateX(3px);
|
||
-webkit-transform: translateY(-12px) translateX(3px);
|
||
-moz-transform: translateY(-12px) translateX(3px);
|
||
border: 5px solid hsl(0, 0%, 0%);
|
||
}
|
||
|
||
.portico-landing.hello .screen {
|
||
position: relative;
|
||
margin: -300px auto 0px auto;
|
||
|
||
width: 600px;
|
||
background-color: hsl(0, 0%, 98%);
|
||
height: 350px;
|
||
|
||
padding: 10px 30px 10px 30px;
|
||
|
||
border-radius: 12px;
|
||
box-shadow: 0px 0px 50px hsla(0, 0%, 0%, 0.2);
|
||
|
||
background-color: hsl(0, 0%, 27%);
|
||
|
||
z-index: 1;
|
||
}
|
||
|
||
.portico-landing.hello .screen::before {
|
||
content: " ";
|
||
position: absolute;
|
||
top: calc(50% - 5px);
|
||
left: 20px;
|
||
|
||
width: 10px;
|
||
height: 10px;
|
||
|
||
border-radius: 5px;
|
||
background-color: hsl(0, 0%, 13%);
|
||
}
|
||
|
||
.portico-landing.hello .screen::after {
|
||
content: " ";
|
||
position: absolute;
|
||
top: calc(50% - 12.5px);
|
||
right: 8px;
|
||
|
||
width: 25px;
|
||
height: 25px;
|
||
|
||
border-radius: 13px;
|
||
background-color: hsl(0, 0%, 73%);
|
||
}
|
||
|
||
.portico-landing.hello .screen .main-page {
|
||
display: inline-block;
|
||
|
||
height: calc(100% - 30px);
|
||
width: calc(100% - 30px);
|
||
margin: 10px;
|
||
|
||
border: 5px solid hsl(0, 0%, 13%);
|
||
border-radius: 4px;
|
||
|
||
background-color: hsl(0, 0%, 98%);
|
||
}
|
||
|
||
.portico-landing.hello .features {
|
||
padding: 50px 0px 100px 0px;
|
||
|
||
background-color: #fff;
|
||
}
|
||
|
||
.portico-landing.hello .features .col-3 {
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing.hello .features .col-3 .il-block {
|
||
display: inline-block;
|
||
width: 75%;
|
||
text-align: left;
|
||
}
|
||
|
||
.portico-landing.hello .features .col-3 h2 {
|
||
font-weight: normal;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials {
|
||
color: hsl(220, 15%, 76%);
|
||
background-color: hsl(219, 21%, 19%);
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .text-header .text-content {
|
||
float: left;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .text-header .action-content {
|
||
float: right;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .quote-container {
|
||
width: 60%;
|
||
margin: 30px auto 20px auto;
|
||
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials blockquote::before {
|
||
content: "“";
|
||
margin-left: -10px;
|
||
margin-right: -3px;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials blockquote::after {
|
||
content: "”";
|
||
margin-left: -3px;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials blockquote + cite {
|
||
display: block;
|
||
margin-top: 5px;
|
||
margin-bottom: 30px;
|
||
|
||
color: hsl(221, 8%, 51%);
|
||
font-weight: 400;
|
||
}
|
||
|
||
|
||
.portico-landing.hello .testimonials blockquote {
|
||
padding: 0px;
|
||
|
||
font-weight: 400;
|
||
line-height: 1.6;
|
||
text-align: left;
|
||
border: none;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials hr {
|
||
width: 60%;
|
||
margin: 0 auto;
|
||
border: none;
|
||
border-bottom: 1px solid hsl(0, 0%, 33%);
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-container {
|
||
width: 60%;
|
||
margin: 20px auto;
|
||
text-align: left;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-container header h2 {
|
||
font-weight: 400;
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-container header .arrow {
|
||
margin-top: 12px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company {
|
||
display: inline-block;
|
||
margin: 10px 20px;
|
||
|
||
height: 60px;
|
||
width: calc(20% - 44px);
|
||
|
||
background-color: hsl(0, 0%, 66%);
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
/* -- company logos -- */
|
||
.portico-landing.hello .testimonials .company-box .company.akamai {
|
||
background-image: url(/static/images/landing-page/logos/akamai.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company.doctorondemand {
|
||
background-image: url(/static/images/landing-page/logos/doctorondemand.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company.layershift {
|
||
background-image: url(/static/images/landing-page/logos/layershift.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company.recurse {
|
||
background-image: url(/static/images/landing-page/logos/recurse.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company.solano {
|
||
background-image: url(/static/images/landing-page/logos/solano.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company.veelo {
|
||
background-image: url(/static/images/landing-page/logos/veelo.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company.panjiva {
|
||
background-image: url(/static/images/landing-page/logos/panjiva.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company.cmt {
|
||
background-image: url(/static/images/landing-page/logos/cambridge-mobile-telematics.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company.levelup {
|
||
background-image: url(/static/images/landing-page/logos/levelup.png);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.portico-landing.hello .apps {
|
||
padding: 80px;
|
||
|
||
background: hsl(177, 52%, 55%);
|
||
background: -webkit-linear-gradient(145deg, hsl(169, 65%, 42%), hsl(191, 55%, 54%));
|
||
background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
|
||
|
||
color: #fff;
|
||
}
|
||
|
||
.portico-landing.hello .apps .arrow {
|
||
color: #fff;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.portico-landing.hello .apps .arrow::before {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side,
|
||
.portico-landing.hello .apps .right-side {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side {
|
||
width: calc(60% - 4px);
|
||
}
|
||
|
||
.portico-landing.hello .apps .right-side {
|
||
width: calc(40% - 4px);
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side .content {
|
||
width: 650px;
|
||
margin: 0 auto 50px auto;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side .platform-icons {
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side .platform-icons .group h2 {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side .platform-icons .group {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
margin: 0px 30px;
|
||
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side .platform-icons .group a {
|
||
color: inherit;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side .platform-icons .group i {
|
||
display: inline-block;
|
||
width: 80px;
|
||
|
||
font-size: 3.5em;
|
||
}
|
||
|
||
.portico-landing.hello .apps .arrow::after {
|
||
-webkit-filter: brightness(4) saturate(0);
|
||
-moz-filter: brightness(4) saturate(0);
|
||
filter: brightness(4) saturate(0);
|
||
}
|
||
|
||
.portico-landing.hello .integrations {
|
||
padding: 80px 80px 120px;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .content {
|
||
margin-left: 50px;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-icons {
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-icons .group {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
width: 155px;
|
||
height: 220px;
|
||
padding: 0 5px;
|
||
transition: all 0.3s ease;
|
||
margin: 10px 5px;
|
||
color: hsl(219, 23%, 33%);
|
||
border-radius: 5px;
|
||
border: 1px solid #fff;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-icons .group:hover {
|
||
border: 1px solid hsl(170, 47%, 53%);
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-logo {
|
||
margin-top: 20px;
|
||
width: 80px;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-name {
|
||
margin-top: 20px;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-description {
|
||
width: 120px;
|
||
margin: 0 auto 20px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.portico-landing.hello .call-to-action-bottom {
|
||
position: relative;
|
||
padding: 125px 100px 20px 100px;
|
||
margin-top: 0px;
|
||
|
||
background-color: hsl(218, 23%, 16%);
|
||
}
|
||
|
||
.portico-landing.hello .call-to-action-bottom button {
|
||
display: block;
|
||
margin: 20px auto 0 auto;
|
||
padding: 12px 25px 10px 25px;
|
||
|
||
font-size: 1.2rem;
|
||
color: hsl(220, 15%, 76%);
|
||
|
||
border: 1px solid hsl(220, 15%, 76%);
|
||
background: transparent;
|
||
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.portico-landing.hello .call-to-action-bottom button:hover {
|
||
border-color: #fff;
|
||
background: #fff;
|
||
color: hsl(219, 23%, 33%);
|
||
}
|
||
|
||
.portico-landing.hello .call-to-action-bottom h1 {
|
||
color: #fff;
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.portico-landing.hello .call-to-action-bottom .zulip-octopus {
|
||
margin: 130px auto 0 auto;
|
||
width: 30px;
|
||
height: 30px;
|
||
background-image: url(/static/images/landing-page/zulip-octopus.png);
|
||
background-size: cover;
|
||
}
|
||
|
||
.footer.hello {
|
||
display: block;
|
||
}
|
||
|
||
.footer.hello li a {
|
||
color: hsl(220, 15%, 76%);
|
||
}
|
||
|
||
.footer.hello li a:hover {
|
||
color: #fff;
|
||
}
|
||
|
||
/* -- apps page -- */
|
||
.portico-landing.apps .main,
|
||
.portico-landing.features-app .main {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.portico-landing.apps .main {
|
||
max-width: 1600px;
|
||
}
|
||
|
||
.portico-landing.apps .main .padded-content.headline {
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
.portico-landing.apps .main .headline h1 {
|
||
font-size: 2.5em;
|
||
}
|
||
|
||
.portico-landing.apps .main .headline h3 {
|
||
font-weight: 400;
|
||
font-size: 1.1em;
|
||
color: hsl(0, 0%, 66%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
margin: 0 -4px 0 0;
|
||
list-style: none;
|
||
font-weight: 500;
|
||
color: hsl(0, 0%, 66%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li {
|
||
position: relative;
|
||
padding: 20px 15px 20px 0px;
|
||
margin: 2px 0px;
|
||
width: 130px;
|
||
text-align: right;
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li:first-of-type {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li.active {
|
||
color: hsl(0, 0%, 27%);
|
||
font-weight: 600;
|
||
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
/* active arrow that slides in when a tab is .active on */
|
||
.portico-landing.apps .main ul.sidebar li::after {
|
||
content: ">";
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 21px;
|
||
opacity: 0;
|
||
transform: translateX(3px);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li.active::after {
|
||
transform: translateX(0px);
|
||
opacity: 1;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container {
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
height: 500px;
|
||
width: calc(100% - 155px);
|
||
background-color: hsl(0, 0%, 53%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
|
||
transition: all 0.3s ease;
|
||
z-index: 1;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box.show {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
z-index: 2;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box[data-name="android"] {
|
||
color: hsl(156, 56%, 95%);
|
||
|
||
background: -webkit-radial-gradient(top right, ellipse cover, hsl(128, 78%, 84%) 0%, hsl(191, 74%, 35%) 100%);
|
||
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(128, 78%, 84%) 0%, hsl(191, 74%, 35%) 100%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box[data-name="ios"] {
|
||
color: hsl(203, 48%, 95%);
|
||
|
||
background: -webkit-radial-gradient(top right, ellipse cover, hsl(36, 98%, 84%) 0%, hsl(197, 80%, 37%) 100%);
|
||
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(36, 98%, 84%) 0%, hsl(197, 80%, 37%) 100%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box[data-name="windows"] {
|
||
color: hsl(0, 0%, 93%);
|
||
|
||
background: -webkit-radial-gradient(top right, ellipse cover, hsl(212, 60%, 78%) 0%, hsl(216, 91%, 21%) 100%);
|
||
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(212, 60%, 78%) 0%, hsl(216, 91%, 21%) 100%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box[data-name="mac"] {
|
||
color: hsl(350, 92%, 95%);
|
||
|
||
background: -webkit-radial-gradient(top right, ellipse cover, hsl(44, 97%, 85%) 0%, hsl(340, 73%, 32%) 100%);
|
||
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(44, 97%, 85%) 0%, hsl(340, 73%, 32%) 100%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box[data-name="linux"] {
|
||
color: hsl(16, 93%, 95%);
|
||
|
||
background: -webkit-radial-gradient(top right, ellipse cover, hsl(16, 98%, 81%) 0%, hsl(6, 88%, 43%) 100%);
|
||
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(16, 98%, 81%) 0%, hsl(6, 88%, 43%) 100%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box[data-name="snipe"] {
|
||
color: hsl(350, 92%, 95%);
|
||
|
||
background: -webkit-radial-gradient(top right, ellipse cover, hsl(9, 97%, 87%) 0%, hsl(246, 82%, 30%) 100%);
|
||
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(9, 97%, 87%) 0%, hsl(246, 82%, 30%) 100%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box[data-name="plan9"] {
|
||
color: hsl(350, 92%, 95%);
|
||
|
||
background: -webkit-radial-gradient(top right, ellipse cover, hsl(9, 97%, 87%) 0%, hsl(356, 82%, 30%) 100%);
|
||
background: radial-gradient(ellipse farthest corner at 0px 0px, hsl(9, 97%, 87%) 0%, hsl(356, 82%, 30%) 100%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li[data-name="android"].active {
|
||
color: hsl(175, 74%, 35%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li[data-name="ios"].active {
|
||
color: hsl(196, 57%, 58%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li[data-name="windows"].active {
|
||
color: hsl(216, 70%, 39%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li[data-name="mac"].active {
|
||
color: hsl(340, 55%, 51%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li[data-name="linux"].active {
|
||
color: hsl(6, 88%, 43%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li[data-name="snipe"].active {
|
||
color: hsl(246, 82%, 30%);
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li[data-name="plan9"].active {
|
||
color: hsl(356, 82%, 30%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .platform.description {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 300px;
|
||
padding: 50px;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .platform.image {
|
||
float: right;
|
||
width: calc(49.5% - 40px);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.portico-landing.apps .details-box[data-name="mac"] .platform.image {
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-box .platform.image {
|
||
opacity: 0;
|
||
transform: scale(0.2);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-box.show .platform.image {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.portico-landing.apps .details-box[data-name="mac"] .platform.image img {
|
||
width: 450px;
|
||
}
|
||
|
||
.portico-landing.apps .details-box[data-name="windows"] .platform.image img {
|
||
width: 450px;
|
||
}
|
||
|
||
.portico-landing.apps .details-box[data-name="ios"] .platform.image img {
|
||
width: 175px;
|
||
}
|
||
|
||
.portico-landing.apps .details-box[data-name="android"] .platform.image img {
|
||
width: 240px;
|
||
}
|
||
|
||
.portico-landing.apps .details-box button.grey-transparent {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.portico-landing.apps .details-box[data-name="mac"] button.grey-transparent:active {
|
||
color: hsl(356, 58%, 47%);
|
||
}
|
||
|
||
.portico-landing.apps .details-box[data-name="ios"] button.grey-transparent:active {
|
||
color: hsl(205, 33%, 56%);
|
||
}
|
||
|
||
.portico-landing.apps .details-box[data-name="windows"] button.grey-transparent:active {
|
||
color: hsl(216, 50%, 35%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-box > .image {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: 35px 0px;
|
||
height: calc(100% - 70px);
|
||
background-color: hsla(0, 0%, 100%, 0.1);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container h1 {
|
||
margin: 20px 0px;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .platform {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
padding: 20px;
|
||
text-align: center;
|
||
width: 50%;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .platform h2 {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container pre {
|
||
display: inline-block;
|
||
max-width: 400px;
|
||
border: none;
|
||
padding: 15px;
|
||
box-shadow: 0px 0px 30px hsla(0, 0%, 100%, 0.3);
|
||
text-align: left;
|
||
background-color: hsl(16, 93%, 95%);
|
||
color: hsl(7, 32%, 57%);
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .instructions {
|
||
margin: 30px auto 0 auto;
|
||
text-align: left;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .instructions a {
|
||
color: #fff;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .instructions a:not(.no-style):before {
|
||
background-color: hsla(0, 0%, 100%, 0.5);
|
||
width: 50%;
|
||
left: 25%;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .instructions a:not(.no-style):hover:before {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
left: 0%;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .instructions img {
|
||
display: block;
|
||
margin: -32px auto 0px auto;
|
||
width: 195px;
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen {
|
||
display: inline-block;
|
||
margin: 0px 10px;
|
||
text-align: left;
|
||
}
|
||
|
||
|
||
.portico-landing.hello .apps .screen.ios {
|
||
width: 200px;
|
||
height: 350px;
|
||
padding: 30px 0px;
|
||
border-radius: 20px;
|
||
|
||
-webkit-transform: translateY(50px);
|
||
|
||
background-color: #fff;
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen.android {
|
||
width: 200px;
|
||
height: 370px;
|
||
padding: 10px 0px 30px 0px;
|
||
border-radius: 20px;
|
||
|
||
-webkit-transform: translateY(-50px);
|
||
|
||
background: linear-gradient(90deg, hsl(0, 0%, 27%) 0%, hsl(0, 0%, 33%) 8%, hsl(0, 0%, 33%) 92%, hsl(0, 0%, 27%) 100%);
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen .center-page {
|
||
height: calc(100% - 20px);
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen .center-page .message-feed {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen.ios::before {
|
||
top: 17px;
|
||
left: calc(50% - 20px);
|
||
|
||
width: 40px;
|
||
height: 5px;
|
||
background-color: hsl(0, 0%, 80%);
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen.ios::after {
|
||
top: auto;
|
||
bottom: 7px;
|
||
left: calc(50% - 12.5px);
|
||
background-color: hsl(0, 0%, 80%);
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen.android::before {
|
||
content: none;
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen.android::after {
|
||
top: auto;
|
||
bottom: 10px;
|
||
left: calc(50% - 17.5px);
|
||
background-color: hsl(0, 0%, 80%);
|
||
|
||
border-radius: 8px;
|
||
background-color: hsl(0, 0%, 13%);
|
||
width: 35px;
|
||
height: 20px;
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen.ios .main-page {
|
||
border-color: hsl(0, 0%, 86%);
|
||
}
|
||
|
||
.portico-landing.hello .apps .screen.android .main-page {
|
||
border-color: hsl(0, 0%, 13%);
|
||
}
|
||
|
||
/* -- integrations page css -- */
|
||
.portico-landing.integrations {
|
||
color: hsl(0, 0%, 27%);
|
||
font-weight: normal;
|
||
}
|
||
|
||
.portico-landing.integrations .main {
|
||
width: calc(100% - 100px);
|
||
margin: 0 auto;
|
||
|
||
background-color: #fff;
|
||
}
|
||
|
||
.portico-landing.integrations .padded-content {
|
||
padding: 50px 0;
|
||
}
|
||
|
||
.portico-landing.integrations .padded-content .inner-content {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.portico-landing.integrations .padded-content .inner-content.show {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.portico-landing.integrations ol li {
|
||
list-style: none;
|
||
}
|
||
|
||
.portico-landing.integrations ol > li > p {
|
||
max-width: calc(100% - 33px);
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.portico-landing code {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
max-width: 100%;
|
||
overflow: auto;
|
||
|
||
font-family: Monaco, Menlo, Consolas, "Courier New", Courier, monospace;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.portico-landing.integrations #integration-main-text {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.portico-landing.integrations .portico-page-heading {
|
||
font-size: 2.5em;
|
||
font-weight: 300;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing.integrations .portico-page-heading a {
|
||
color: inherit;
|
||
}
|
||
|
||
.portico-landing.integrations .portico-page-subheading {
|
||
font-weight: 400;
|
||
font-size: 1.1em;
|
||
color: #aaa;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
}
|
||
|
||
.portico-landing #integration-search {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.portico-landing.integrations .searchbar {
|
||
width: -moz-calc(100% - 40px);
|
||
width: -webkit-calc(100% - 40px);
|
||
width: -o-calc(100% - 40px);
|
||
width: calc(100% - 40px);
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 30px auto 0;
|
||
}
|
||
|
||
.portico-landing.integrations .searchbar .searchbar-reset {
|
||
position: relative;
|
||
}
|
||
|
||
.portico-landing.integrations .searchbar input {
|
||
-webkit-box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.03);
|
||
-moz-box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.03);
|
||
box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.03);
|
||
|
||
font-size: 1em;
|
||
font-family: inherit;
|
||
|
||
width: 500px;
|
||
height: 45px;
|
||
padding: 0px 20px 0px 50px;
|
||
border-radius: 40px;
|
||
border: 1px solid hsl(208, 46%, 93%);
|
||
display: block;
|
||
}
|
||
|
||
.portico-landing.integrations .searchbar input:focus {
|
||
border: 1px solid hsl(170, 47%, 53%);
|
||
}
|
||
|
||
.portico-landing.integrations .searchbar i.icon-vector-search {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 13px;
|
||
font-size: 19px;
|
||
color: hsl(170, 47%, 53%);
|
||
}
|
||
|
||
.portico-landing.integrations .catalog {
|
||
margin-top: 20px;
|
||
padding: 0 30px;
|
||
min-height: 1000px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-sidebar {
|
||
float: left;
|
||
width: 200px;
|
||
padding: 0 30px 0 50px;
|
||
margin: 0;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-sidebar.sticky {
|
||
position: sticky;
|
||
top: 40px;
|
||
margin: auto;
|
||
height: 426px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-sidebar h3 {
|
||
font-weight: 500;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-sidebar h4 {
|
||
font-weight: 400;
|
||
font-size: .95em;
|
||
padding: 6px 10px 3px;
|
||
margin: 3px 0;
|
||
border-radius: 5px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-sidebar h4.selected,
|
||
.portico-landing.integrations .integration-categories-sidebar h4:hover {
|
||
background-color: hsl(170, 65%, 85%);
|
||
color: hsl(170, 72%, 32%);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown {
|
||
cursor: pointer;
|
||
margin: 30px 0;
|
||
display: none;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenges {
|
||
overflow: hidden;
|
||
text-align: left;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
width: 153px;
|
||
height: 200px;
|
||
padding: 0 4px;
|
||
margin: 7px 5px;
|
||
border-radius: 5px;
|
||
border: 1px solid hsl(208, 46%, 93%);
|
||
color: #414e67;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge:hover {
|
||
border: 1px solid hsl(170, 47%, 53%);
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-logo {
|
||
margin: 34px auto 20px;
|
||
height: 60px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-name {
|
||
font-size: 1.2em;
|
||
font-weight: 400;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-name.with-secondary {
|
||
font-size: 1.1em;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-secondary-line-text {
|
||
margin: 0;
|
||
line-height: 10px;
|
||
font-size: .65em;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-category {
|
||
font-size: .85em;
|
||
margin-top: 5px;
|
||
font-weight: 400;
|
||
color: hsla(216, 23%, 13%, 0.5);
|
||
}
|
||
|
||
|
||
/* -- integration instructions -- */
|
||
|
||
.portico-landing.integrations .integration-instruction-block .integration-lozenge {
|
||
width: 125px;
|
||
height: 170px;
|
||
margin: 0 0 20px 0;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-instruction-block .integration-lozenge .integration-category {
|
||
display: none;
|
||
}
|
||
|
||
|
||
|
||
/* -- media queries -- */
|
||
@media (max-width: 1426px) {
|
||
.portico-landing.hello .integrations .integration-icons .hide-1 {
|
||
display: none;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-sidebar {
|
||
padding-left: 30px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge {
|
||
width: 135px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1368px) {
|
||
.portico-landing.apps .main .details-container {
|
||
height: auto;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box {
|
||
display: none;
|
||
position: static;
|
||
height: auto;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box h1 {
|
||
margin-top: 0px;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container .details-box.show {
|
||
display: block;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-box[data-name="linux"] .image {
|
||
display: block;
|
||
height: auto;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-box[data-name="linux"] .image .platform,
|
||
.portico-landing.apps .main .details-box[data-name="linux"] .instructions {
|
||
text-align: center;
|
||
width: calc(100% - 40px);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1340px) {
|
||
.features .feature-box.open-source .text-content {
|
||
display: block;
|
||
height: auto;
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.features .feature-box.open-source .contrib-graph {
|
||
width: 100%;
|
||
margin: 0;
|
||
height: calc(50vw * 0.5);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1295px) {
|
||
.portico-landing.hello .apps .right-side {
|
||
display: none;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side {
|
||
width: 100%;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .content {
|
||
max-width: 750px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-icons {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.feature-block .flex {
|
||
height: 130px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
nav {
|
||
padding-bottom: 110px;
|
||
padding-top: 30px;
|
||
}
|
||
|
||
nav .logo {
|
||
float: none;
|
||
display: block;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
nav ul {
|
||
display: block;
|
||
margin: 20px auto 0 auto;
|
||
float: none;
|
||
text-align: center;
|
||
}
|
||
|
||
.feature-block .flex {
|
||
height: 150px;
|
||
}
|
||
|
||
.features-app .main {
|
||
margin: 0px auto;
|
||
width: calc(100% - 40px);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 985px) {
|
||
.features .feature-box .text-content {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.features .feature-box .image {
|
||
float: none;
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.features .text-content .flex {
|
||
display: block;
|
||
}
|
||
|
||
.portico-landing.apps .main {
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.portico-landing.hello .screen.hero-screen {
|
||
width: 420px;
|
||
height: 282px;
|
||
padding: 65px 117px;
|
||
}
|
||
|
||
.portico-landing.hello .screen.hero-screen .main-page {
|
||
overflow: hidden;
|
||
transform: translateY(-12px) translateX(2px);
|
||
}
|
||
|
||
.screen.hero-screen .col-4 .action-block {
|
||
margin: 10px;
|
||
}
|
||
|
||
.screen.hero-screen .line {
|
||
height: 4px;
|
||
margin: 4px 0px;
|
||
}
|
||
|
||
.screen .message-feed .message .content {
|
||
top: -12px;
|
||
}
|
||
|
||
.portico-landing.hello .apps,
|
||
.portico-landing.hello .integrations {
|
||
padding: 80px 50px;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side .content {
|
||
width: 100%;
|
||
}
|
||
|
||
.portico-landing.hello .integrations {
|
||
width: 100%;
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .content {
|
||
padding: 0 50px;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .quote-container {
|
||
width: 100%;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials hr,
|
||
.portico-landing.hello .testimonials .company-container {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 906px) {
|
||
.portico-landing.integrations .integration-categories-sidebar {
|
||
display: none;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown {
|
||
display: block;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown h3,
|
||
.portico-landing.integrations .integration-categories-dropdown h4 {
|
||
font-weight: 400;
|
||
margin: 0 25px;
|
||
padding: 12px 20px;
|
||
border-bottom: 1px solid hsl(208, 46%, 93%);
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown .dropdown-toggle {
|
||
position: relative;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown i {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 36px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown .dropdown-list {
|
||
display: none;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown h3 {
|
||
border-top: 1px solid hsl(208, 46%, 93%);
|
||
border-left: 1px solid hsl(208, 46%, 93%);
|
||
border-right: 1px solid hsl(208, 46%, 93%);
|
||
font-size: 1em;
|
||
text-align: left;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown h4 {
|
||
border-left: 1px solid #E4EDF5;
|
||
border-right: 1px solid #E4EDF5;
|
||
transition: all 0.3s ease;
|
||
font-size: .9em;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-categories-dropdown h4.selected,
|
||
.portico-landing.integrations .integration-categories-dropdown h4:hover {
|
||
background-color: hsl(170, 65%, 85%);
|
||
color: hsl(170, 72%, 32%);
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenges {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 830px) {
|
||
.portico-landing.integrations .integration-lozenge {
|
||
width: 134px;
|
||
height: 180px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-logo {
|
||
margin: 34px auto 15px;
|
||
height: 45px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-name {
|
||
font-size: 1em;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-category {
|
||
font-size: .8em;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
nav,
|
||
.features {
|
||
padding-left: 50px;
|
||
padding-right: 50px;
|
||
}
|
||
|
||
.portico-landing.integrations .main,
|
||
.main {
|
||
width: calc(100% - 100px);
|
||
|
||
margin-left: 50px;
|
||
margin-right: 50px;
|
||
}
|
||
|
||
#integration-instruction-block .integration-lozenge {
|
||
display: none;
|
||
}
|
||
|
||
#integration-list-link {
|
||
top: -40px;
|
||
left: 35px;
|
||
}
|
||
|
||
.integration-instructions {
|
||
margin-left: 0px;
|
||
}
|
||
|
||
.feature-block .flex {
|
||
height: auto;
|
||
padding: 10px;
|
||
}
|
||
|
||
.portico-landing.integrations .portico-page-header {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.portico-landing.integrations .searchbar-reset {
|
||
width: 445px;
|
||
}
|
||
|
||
.portico-landing.integrations .searchbar input {
|
||
width: 375px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.platform.image {
|
||
display: none !important;
|
||
}
|
||
|
||
.platform.description {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.portico-landing.hello .hero header {
|
||
width: 600px;
|
||
}
|
||
|
||
.portico-landing.hello .apps .left-side .content {
|
||
width: auto;
|
||
}
|
||
|
||
.portico-landing.hello .screen.hero-screen {
|
||
width: 300px;
|
||
height: 201px;
|
||
padding: 43px 73px;
|
||
}
|
||
|
||
.portico-landing.hello .features .col-3 {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 666px) {
|
||
.portico-landing.integrations .main,
|
||
.main {
|
||
width: calc(100% - 50px);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.portico-landing.hello .hero header {
|
||
width: auto;
|
||
}
|
||
|
||
.portico-landing.hello .screen.hero-screen {
|
||
display: none;
|
||
}
|
||
|
||
.portico-landing.hello .hero {
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
.portico-landing.hello .hero .waves {
|
||
height: 450px;
|
||
}
|
||
|
||
nav ul {
|
||
margin-top: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
nav .content {
|
||
display: inline-block;
|
||
}
|
||
|
||
nav .hamburger {
|
||
display: inline-block;
|
||
float: right;
|
||
}
|
||
|
||
nav ul:before {
|
||
content: "Zulip";
|
||
display: block;
|
||
margin-top: 20px;
|
||
padding-top: 5px;
|
||
margin-left: 10px;
|
||
|
||
width: 100px;
|
||
height: 40px;
|
||
|
||
font-size: 1.5rem;
|
||
text-align: right;
|
||
color: hsl(0, 0%, 27%);
|
||
|
||
background-size: 40px auto;
|
||
background-image: url(/static/images/zulip-logo.svg);
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
nav ul {
|
||
position: fixed;
|
||
float: none;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100vh;
|
||
width: 300px;
|
||
padding-left: 30px;
|
||
|
||
background-color: #fff;
|
||
transform: translate(-350px, 0px);
|
||
|
||
|
||
box-shadow: 0px 0px 80px hsla(0, 0%, 0%, 0.12);
|
||
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
nav ul.show {
|
||
transform: translate(0px, 0px);
|
||
}
|
||
|
||
nav ul .exit {
|
||
display: block;
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 25px;
|
||
|
||
font-weight: 100;
|
||
font-size: 3em;
|
||
color: initial;
|
||
}
|
||
|
||
nav ul li:first-of-type {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
nav ul li {
|
||
display: block;
|
||
|
||
font-size: 1.5em;
|
||
font-weight: 300;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
nav ul li,
|
||
nav ul li a {
|
||
color: hsl(0, 0%, 27%) !important;
|
||
}
|
||
|
||
nav ul li.active:after {
|
||
content: ">";
|
||
transform: scale(1,1);
|
||
bottom: auto;
|
||
left: -25px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
nav ul li.active {
|
||
font-weight: 400;
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar {
|
||
display: block;
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.portico-landing.apps .main ul.sidebar li {
|
||
display: inline-block;
|
||
padding: 10px;
|
||
width: 80px;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.portico-landing.apps .main .details-container {
|
||
width: 100%;
|
||
}
|
||
|
||
.portico-landing.hello .testimonials .company-box .company {
|
||
margin: 10px;
|
||
width: calc(33% - 24px);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.portico-landing.hello .integrations .integration-icons .group {
|
||
margin: 10px 16px 0 16px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 550px) {
|
||
.portico-landing.integrations .searchbar-reset {
|
||
width: 100%;
|
||
}
|
||
|
||
.portico-landing.integrations .searchbar input {
|
||
width: -moz-calc(100% - 80px);
|
||
width: -webkit-calc(100% - 80px);
|
||
width: -o-calc(100% - 80px);
|
||
width: calc(100% - 80px);
|
||
}
|
||
}
|
||
|
||
@media (max-device-width: 450px) {
|
||
nav {
|
||
padding-bottom: 105px;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-icons .group {
|
||
margin: 0;
|
||
}
|
||
|
||
.main,
|
||
.portico-landing.integrations .main {
|
||
width: 100%;
|
||
}
|
||
|
||
.portico-landing.integrations .main .portico-page-header {
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.portico-landing.integrations .main .padded-content {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.main .padded-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.footer {
|
||
width: 100vw;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.portico-landing.hello .integrations .integration-icons .group {
|
||
width: 130px;
|
||
height: 215px;
|
||
}
|
||
|
||
.portico-landing.hello .integrations .integration-icons .integration-logo {
|
||
width: 60px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge {
|
||
width: 120px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 357px) {
|
||
.portico-landing.integrations .integration-lozenge {
|
||
width: 108px;
|
||
height: 160px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-logo {
|
||
margin: 28px auto 10px;
|
||
height: 45px;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-name {
|
||
font-size: .9em;
|
||
}
|
||
|
||
.portico-landing.integrations .integration-lozenge .integration-category {
|
||
font-size: .77em;
|
||
}
|
||
}
|