mirror of https://github.com/zulip/zulip.git
4061 lines
79 KiB
CSS
4061 lines
79 KiB
CSS
:root {
|
|
--padded-content-padding: 50px;
|
|
}
|
|
|
|
html {
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: hsl(0deg 0% 100%) !important;
|
|
color: hsl(0deg 0% 27%);
|
|
line-height: normal;
|
|
|
|
max-width: 100vw;
|
|
}
|
|
|
|
/* -- generic styles -- */
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 10px 0;
|
|
|
|
font-weight: 300;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
p {
|
|
margin: 10px 0;
|
|
font-weight: normal;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
ul {
|
|
font-weight: normal;
|
|
}
|
|
|
|
a {
|
|
position: relative;
|
|
cursor: pointer;
|
|
color: hsl(170deg 47% 33%);
|
|
|
|
&:hover,
|
|
&:visited {
|
|
color: hsl(170deg 47% 33%);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.arrow {
|
|
&::after {
|
|
content: " ";
|
|
display: inline-block;
|
|
position: relative;
|
|
height: 17px;
|
|
width: 17px;
|
|
top: 3px;
|
|
background-image: url("../../images/landing-page/arrow.png");
|
|
background-size: 100%;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
&.silver {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
span a:hover,
|
|
p a:hover,
|
|
ul a:hover,
|
|
ol a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.flex {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.float {
|
|
&.left {
|
|
float: left;
|
|
}
|
|
|
|
&.right {
|
|
float: right;
|
|
}
|
|
|
|
&.clear {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.small {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.box-shadow {
|
|
box-shadow: 0 0 80px hsl(0deg 0% 0% / 12%);
|
|
}
|
|
|
|
.grey {
|
|
color: hsl(0deg 0% 60%);
|
|
}
|
|
|
|
.dark-grey {
|
|
color: hsl(0deg 0% 40%);
|
|
}
|
|
|
|
.bold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.padded-content {
|
|
padding: var(--padded-content-padding);
|
|
}
|
|
|
|
.clear-float {
|
|
clear: both;
|
|
}
|
|
|
|
*::selection {
|
|
background-color: hsl(31deg 84% 60% / 30%);
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
/* -- component styling -- */
|
|
.button,
|
|
button {
|
|
padding: 5px 12px;
|
|
|
|
font-family: inherit;
|
|
font-size: 0.7em;
|
|
background-color: hsl(0deg 0% 100%);
|
|
color: hsl(0deg 0% 27%);
|
|
|
|
line-height: 20px;
|
|
border-radius: 4px;
|
|
border: 1px solid hsl(0deg 0% 80%);
|
|
outline: none;
|
|
|
|
&:active {
|
|
background-color: hsl(0deg 0% 98%);
|
|
border-color: hsl(0deg 0% 73%);
|
|
}
|
|
|
|
&.green {
|
|
color: hsl(0deg 0% 100%);
|
|
background-color: hsl(170deg 47% 53%);
|
|
border-color: hsl(169deg 45% 43%);
|
|
|
|
&:hover {
|
|
background-color: hsl(170deg 47% 58%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsl(170deg 47% 48%);
|
|
}
|
|
}
|
|
|
|
&.black-current-value {
|
|
color: hsl(0deg 0% 20%);
|
|
background-color: transparent;
|
|
border-color: hsl(0deg 0% 53%);
|
|
}
|
|
}
|
|
|
|
.silver {
|
|
color: hsl(0deg 0% 100%) !important;
|
|
opacity: 0.8;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.bold {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
/* -- main panel styling -- */
|
|
.main {
|
|
width: calc(100% - 200px - 20px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* -- modify portico.css -- */
|
|
.app-main {
|
|
max-width: none;
|
|
min-width: 0;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.header {
|
|
display: none;
|
|
}
|
|
|
|
/* -- features page css -- */
|
|
.portico-landing {
|
|
position: relative;
|
|
|
|
padding-top: 120px;
|
|
|
|
z-index: 1;
|
|
|
|
&.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.why-page,
|
|
&.case-studies-page {
|
|
/* Move top padding to inner-content for better scroll positions on URL fragments. */
|
|
.padded-content {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.inner-content {
|
|
padding-top: var(--padded-content-padding);
|
|
}
|
|
}
|
|
|
|
:target {
|
|
/* Keep elements targeted by URL fragments visible below the
|
|
floating top menu; coordinate the value here with the menu's height. */
|
|
scroll-margin-top: 60px;
|
|
}
|
|
}
|
|
|
|
.portico-landing.features-app {
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
padding-top: 0;
|
|
|
|
z-index: 2;
|
|
|
|
.gradients {
|
|
z-index: -1;
|
|
}
|
|
|
|
& section {
|
|
max-width: 1440px;
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-flow: row wrap;
|
|
justify-content: space-around;
|
|
margin: 40px auto;
|
|
padding: 0 30px;
|
|
color: hsl(219deg 21% 21%);
|
|
|
|
&.hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
height: 400px;
|
|
padding: 100px 100px 50px;
|
|
|
|
margin: 0;
|
|
|
|
max-width: none;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
background-color: hsl(0deg 0% 0% / 10%);
|
|
|
|
.copy {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
& h1 {
|
|
margin: 0;
|
|
font-size: 3.7em;
|
|
}
|
|
|
|
& h2 {
|
|
font-size: 1.8em;
|
|
margin: 30px auto 0;
|
|
|
|
max-width: 600px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.image {
|
|
height: 400px;
|
|
width: 40%;
|
|
background-color: hsl(0deg 0% 0% / 5%);
|
|
}
|
|
}
|
|
|
|
&.keyboard-shortcuts {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
max-width: none;
|
|
padding: 50px;
|
|
/* this should only be a thing if the section above is not white */
|
|
margin-top: 0;
|
|
background-color: hsl(219deg 21% 21%);
|
|
color: hsl(219deg 76% 93%);
|
|
|
|
& img {
|
|
&.overflow-wave {
|
|
width: 685px;
|
|
right: 0;
|
|
top: -168px;
|
|
position: absolute;
|
|
}
|
|
|
|
&.image {
|
|
width: 600px;
|
|
margin-left: 100px;
|
|
}
|
|
}
|
|
|
|
& h3 {
|
|
font-size: 3em;
|
|
}
|
|
|
|
.feature-block {
|
|
width: 50%;
|
|
}
|
|
|
|
& p {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
& a.cta {
|
|
font-size: 1em;
|
|
color: hsl(170deg 52% 70%);
|
|
}
|
|
}
|
|
|
|
&.messages {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
margin: 50px auto;
|
|
padding: 0 50px;
|
|
|
|
.image {
|
|
width: calc(100% - 500px - 100px);
|
|
margin: 50px 0 50px 50px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.features {
|
|
max-width: 500px;
|
|
|
|
& h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.feature-block {
|
|
display: block;
|
|
margin: 30px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.notifications {
|
|
position: relative;
|
|
|
|
padding: 50px 100px;
|
|
max-width: calc(1000px);
|
|
|
|
background-color: hsl(0deg 0% 100%);
|
|
border-radius: 10px;
|
|
|
|
box-shadow: 10px 20px 80px hsl(0deg 0% 0% / 15%);
|
|
margin: 100px auto 150px;
|
|
text-align: center;
|
|
|
|
.envelope {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
max-height: 40vw;
|
|
}
|
|
|
|
& h2 {
|
|
position: relative;
|
|
|
|
margin-bottom: 120px;
|
|
top: 0;
|
|
}
|
|
|
|
.feature-list {
|
|
position: relative;
|
|
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
|
|
margin: 35px 0 0 20px;
|
|
|
|
z-index: 1;
|
|
|
|
& h3 {
|
|
position: relative;
|
|
|
|
margin: 15px 0 15px 50px;
|
|
|
|
font-size: 1.2em;
|
|
font-weight: 400;
|
|
|
|
color: hsl(0deg 0% 53%);
|
|
|
|
&::before {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
|
|
left: -35px;
|
|
top: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
border-radius: 4px;
|
|
|
|
background-image: url("../../images/checkbox-green.svg");
|
|
background-size: 100% auto;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-block {
|
|
width: 400px;
|
|
height: 280px;
|
|
|
|
background: linear-gradient(
|
|
135deg,
|
|
hsl(0deg 0% 0% / 5%),
|
|
hsl(0deg 0% 0% / 20%)
|
|
);
|
|
border-radius: 4px;
|
|
|
|
background-image: url("../../images/landing-page/features/notifications.jpg");
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.feature-block {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
& h2 {
|
|
font-size: 2.5em;
|
|
text-align: center;
|
|
margin: 0 10px;
|
|
line-height: 1.6;
|
|
flex: 1 0 100%;
|
|
}
|
|
|
|
> .feature-block {
|
|
padding: 10px 20px;
|
|
flex: 1 1 320px;
|
|
color: inherit;
|
|
}
|
|
|
|
& a {
|
|
&.feature-block {
|
|
&:hover {
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 75%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cta {
|
|
&::after {
|
|
content: "\2192";
|
|
|
|
margin-left: 5px;
|
|
transform: scaleX(2);
|
|
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
&:hover {
|
|
&::after {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feature-block {
|
|
& h3 {
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
& p {
|
|
margin: 0;
|
|
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* -- hello page -- */
|
|
.portico-landing.hello {
|
|
background-color: transparent;
|
|
color: hsl(219deg 23% 33%);
|
|
|
|
.hero-buttons {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
.portico-landing.hello .hero {
|
|
position: relative;
|
|
padding: 60px 50px 30px;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
overflow: hidden;
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
text-align: center;
|
|
|
|
& p {
|
|
font-weight: 400;
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
& header {
|
|
width: 850px;
|
|
display: inline-block;
|
|
text-align: left;
|
|
|
|
& h1 {
|
|
font-size: 3em;
|
|
font-weight: 400;
|
|
|
|
text-shadow: 0 0 20px hsl(0deg 0% 100% / 20%);
|
|
}
|
|
|
|
& p {
|
|
margin: 30px 0;
|
|
|
|
font-size: 1.5em;
|
|
font-weight: 300;
|
|
line-height: 1.4;
|
|
text-shadow:
|
|
0 0 5px hsl(164deg 74% 15% / 30%),
|
|
0 0 20px hsl(0deg 0% 100% / 20%);
|
|
}
|
|
|
|
& a {
|
|
display: block;
|
|
margin: 20px auto 0;
|
|
text-align: center;
|
|
}
|
|
|
|
& button {
|
|
margin-top: 0;
|
|
padding: 12px 20px;
|
|
|
|
background-color: hsl(0deg 0% 100%);
|
|
border: 2px solid hsl(0deg 0% 100%);
|
|
|
|
font-size: 1.2em;
|
|
font-weight: 400;
|
|
color: hsl(148deg 23% 51%);
|
|
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 100% / 20%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 3px 20px hsl(0deg 0% 100% / 50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.portico-landing.hello .gradients .gradient {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1100px;
|
|
|
|
&.dark-blue {
|
|
background: linear-gradient(
|
|
10deg,
|
|
hsl(196deg 58% 14% / 0%) 50%,
|
|
hsl(196deg 58% 14% / 70%)
|
|
);
|
|
}
|
|
|
|
&.green {
|
|
background: linear-gradient(
|
|
-25deg,
|
|
hsl(156deg 47% 47% / 0%) 40%,
|
|
hsl(156deg 47% 47%)
|
|
);
|
|
}
|
|
|
|
&.blue {
|
|
background: linear-gradient(
|
|
25deg,
|
|
hsl(196deg 38% 51% / 0%) 40%,
|
|
hsl(196deg 38% 51%)
|
|
);
|
|
}
|
|
|
|
&.sunburst {
|
|
background: linear-gradient(
|
|
5deg,
|
|
hsl(49deg 71% 68% / 0%) 20%,
|
|
hsl(49deg 71% 68%)
|
|
);
|
|
}
|
|
|
|
&.white-fade {
|
|
background: linear-gradient(
|
|
0deg,
|
|
hsl(0deg 0% 98%) 0%,
|
|
hsl(0deg 0% 98% / 0%) 40%
|
|
);
|
|
}
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
/* -- compare css -- */
|
|
.compare,
|
|
.compare-education {
|
|
background: linear-gradient(
|
|
198deg,
|
|
hsl(170deg 34% 47%),
|
|
hsl(146deg 31% 60%)
|
|
);
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.gradients .gradient.white-fade {
|
|
background: none;
|
|
}
|
|
|
|
.text-header .text-content h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.padded-content {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
position: relative; /* To place the content on top of gradients. */
|
|
z-index: 2;
|
|
}
|
|
|
|
& table {
|
|
min-width: 550px;
|
|
padding: 33px;
|
|
border: 20px solid transparent;
|
|
width: 100%;
|
|
text-align: left;
|
|
border-collapse: collapse;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 100% / 80%);
|
|
|
|
& thead th {
|
|
&:last-of-type {
|
|
width: 120px;
|
|
}
|
|
|
|
&.uniform {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
& td:not(:first-of-type),
|
|
th:not(:first-of-type) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
& thead {
|
|
border-bottom: 3px solid hsl(0deg 0% 0% / 10%);
|
|
|
|
& th {
|
|
font-weight: 600;
|
|
padding: 15px 0;
|
|
font-size: 18px;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
&.normal {
|
|
font-weight: normal;
|
|
color: inherit;
|
|
}
|
|
|
|
&:nth-of-type(1) {
|
|
width: 28%;
|
|
background-color: hsl(222deg 24% 31%);
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
width: 18%;
|
|
background-color: hsl(187deg 94% 20%);
|
|
}
|
|
|
|
&:nth-of-type(3),
|
|
&:nth-of-type(4),
|
|
&:nth-of-type(5),
|
|
&:nth-of-type(6) {
|
|
width: 18%;
|
|
background-color: hsl(162deg 67% 25%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.gradients {
|
|
position: static;
|
|
}
|
|
|
|
& tbody tr {
|
|
border-bottom: 1px solid hsl(360deg 0% 100% / 3%);
|
|
|
|
& td {
|
|
padding: 10px 0;
|
|
|
|
&:nth-of-type(1) {
|
|
background-color: hsl(222deg 20% 40%);
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
background-color: hsl(186.9deg 90.3% 28.4%);
|
|
}
|
|
|
|
&:nth-of-type(3),
|
|
&:nth-of-type(4),
|
|
&:nth-of-type(5),
|
|
&:nth-of-type(6) {
|
|
background-color: hsl(162deg 44% 38%);
|
|
}
|
|
|
|
&.no {
|
|
text-align: center;
|
|
}
|
|
|
|
&.yes::before {
|
|
content: " ";
|
|
display: inline-block;
|
|
|
|
width: 27px;
|
|
height: 27px;
|
|
background-image: url("../../images/landing-page/checkmark.png");
|
|
background-size: 100% auto;
|
|
}
|
|
|
|
&.no::before {
|
|
content: "\d7";
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
top: 3px;
|
|
|
|
font-size: 2.5rem;
|
|
font-weight: 400;
|
|
line-height: 0.9;
|
|
|
|
opacity: 0.4;
|
|
}
|
|
|
|
& a {
|
|
font-size: 0.9rem;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
& p {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.terms {
|
|
margin-top: 30px;
|
|
font-weight: 400;
|
|
font-size: 0.7em;
|
|
|
|
line-height: 1.2;
|
|
|
|
color: hsl(0deg 24% 23%);
|
|
|
|
& a {
|
|
color: hsl(170deg 47% 73%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.compare-education {
|
|
color: hsl(0deg 0% 0%);
|
|
background: none;
|
|
|
|
& table {
|
|
min-width: 650px;
|
|
|
|
.number {
|
|
font-weight: 700;
|
|
|
|
&.one {
|
|
color: hsl(0deg 0% 100% / 40%);
|
|
}
|
|
}
|
|
|
|
& td:first-of-type {
|
|
padding: 10px 10px 10px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* -- faq css -- */
|
|
.faqs {
|
|
position: relative;
|
|
background-color: hsl(0deg 0% 98%);
|
|
|
|
.padded-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
& header {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
|
|
& h1 span {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.faq {
|
|
margin: 50px auto;
|
|
max-width: 700px;
|
|
font-size: 1.2em;
|
|
color: hsl(223deg 6% 25%);
|
|
|
|
.question {
|
|
font-weight: 600;
|
|
color: hsl(222deg 20% 40%);
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.answer {
|
|
margin: 20px 0 0;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
/* the last faq in the box shouldn't have an extra 50px of margin. */
|
|
.faq-box div:last-of-type {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.faq-header-link {
|
|
color: hsl(0deg 0% 0%);
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.screen {
|
|
.line {
|
|
width: 100%;
|
|
height: 6px;
|
|
margin: 8px 0;
|
|
|
|
background-color: hsl(0deg 0% 93%);
|
|
border-radius: 3px;
|
|
|
|
&.small {
|
|
width: 60%;
|
|
}
|
|
|
|
&.micro {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
width: 15%;
|
|
}
|
|
|
|
&.nano {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
width: 10%;
|
|
}
|
|
|
|
&.med {
|
|
width: 80%;
|
|
}
|
|
|
|
&.red {
|
|
background-color: hsl(350deg 42% 77%);
|
|
}
|
|
|
|
&.blue {
|
|
background-color: hsl(193deg 42% 77%);
|
|
}
|
|
|
|
&.green {
|
|
background-color: hsl(119deg 42% 77%);
|
|
}
|
|
|
|
&.orange {
|
|
background-color: hsl(30deg 42% 77%);
|
|
}
|
|
}
|
|
|
|
.top {
|
|
.avatar {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: hsl(0deg 0% 73%);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.top-line {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
width: 50px;
|
|
margin-top: 0;
|
|
|
|
background-color: hsl(0deg 0% 73%);
|
|
}
|
|
}
|
|
|
|
.navbar {
|
|
background-color: hsl(170deg 48% 54%);
|
|
padding: 10px;
|
|
}
|
|
|
|
.center-page {
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
.message-feed {
|
|
height: calc(100% - 20px);
|
|
margin-top: 20px;
|
|
|
|
transition: all 0.1s ease;
|
|
}
|
|
}
|
|
|
|
.message-feed {
|
|
.message .content {
|
|
margin-left: 24px;
|
|
position: relative;
|
|
top: -15px;
|
|
}
|
|
|
|
.stream {
|
|
padding: 3px 5px 0;
|
|
margin: 0 5px;
|
|
|
|
background-color: hsl(0deg 0% 100%);
|
|
border-radius: 4px;
|
|
|
|
box-shadow: 0 0 15px hsl(0deg 0% 0% / 1%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.portico-landing.hello .screen {
|
|
position: relative;
|
|
margin: -300px auto 0;
|
|
|
|
width: 600px;
|
|
height: 350px;
|
|
|
|
padding: 10px 30px;
|
|
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 50px hsl(0deg 0% 0% / 20%);
|
|
|
|
background-color: hsl(0deg 0% 27%);
|
|
|
|
z-index: 1;
|
|
|
|
&::before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: calc(50% - 5px);
|
|
left: 20px;
|
|
|
|
width: 10px;
|
|
height: 10px;
|
|
|
|
border-radius: 5px;
|
|
background-color: hsl(0deg 0% 13%);
|
|
}
|
|
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: calc(50% - 12.5px);
|
|
right: 8px;
|
|
|
|
width: 25px;
|
|
height: 25px;
|
|
|
|
border-radius: 13px;
|
|
background-color: hsl(0deg 0% 73%);
|
|
}
|
|
|
|
.main-page {
|
|
display: inline-block;
|
|
|
|
height: calc(100% - 30px);
|
|
width: calc(100% - 30px);
|
|
margin: 10px;
|
|
|
|
border: 5px solid hsl(0deg 0% 13%);
|
|
border-radius: 4px;
|
|
|
|
background-color: hsl(0deg 0% 98%);
|
|
}
|
|
}
|
|
|
|
.portico-landing.hello .features {
|
|
padding: 50px 0 100px;
|
|
|
|
background-color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.portico-landing.hello .open-source {
|
|
text-align: center;
|
|
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
background-color: hsl(217deg 22% 93%);
|
|
|
|
.flex {
|
|
min-height: 0;
|
|
padding: 50px 0;
|
|
}
|
|
|
|
& img {
|
|
margin: 0 2%;
|
|
width: 28%;
|
|
max-width: 500px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.il-block {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 50%;
|
|
max-width: 700px;
|
|
text-align: left;
|
|
}
|
|
|
|
& h2 {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.carousel.carousel-fade .carousel-inner {
|
|
.item {
|
|
display: block;
|
|
opacity: 0;
|
|
height: 0;
|
|
transition: opacity 0.4s ease;
|
|
visibility: hidden;
|
|
|
|
&.active {
|
|
opacity: 1;
|
|
height: auto;
|
|
visibility: visible;
|
|
|
|
&.left,
|
|
&.right {
|
|
left: 0;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
&.next.left,
|
|
&.prev.right {
|
|
opacity: 1;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.item-inner {
|
|
position: relative;
|
|
}
|
|
|
|
.next.left .item-inner,
|
|
.prev.right .item-inner {
|
|
padding: 30px 20px;
|
|
}
|
|
}
|
|
|
|
.portico-landing .tour {
|
|
color: hsl(0deg 0% 0%);
|
|
width: 1200px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tour .carousel-inner .item-container {
|
|
width: 80%;
|
|
height: 520px;
|
|
margin: 20px auto;
|
|
padding: 30px 20px;
|
|
background: linear-gradient(
|
|
hsl(220deg 20% 97% / 40%),
|
|
hsl(220deg 20% 97% / 90%)
|
|
);
|
|
border-radius: 12px;
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 0% / 2%);
|
|
position: relative;
|
|
}
|
|
|
|
.tour .carousel-inner .start-button {
|
|
padding: 11px 25px;
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 100%);
|
|
background: linear-gradient(
|
|
145deg,
|
|
hsl(191deg 56% 55%),
|
|
hsl(169deg 65% 42%)
|
|
);
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
|
|
border: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -100px;
|
|
top: 50%;
|
|
margin-top: -25px;
|
|
width: 200px;
|
|
height: 50px;
|
|
z-index: 10;
|
|
|
|
&:hover {
|
|
background-color: hsl(169deg 65% 42%);
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 0% / 30%);
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .start-image {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border: 1px solid hsl(0deg 0% 87%);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.tour .carousel-inner .tour-item-header {
|
|
margin: 0 0 30px 54px;
|
|
max-width: 700px;
|
|
font-size: 1.3em;
|
|
text-align: left;
|
|
}
|
|
|
|
.tour .carousel-inner .tour-item-header-top-push {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.tour .carousel-inner .tour-item-header-centered {
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.tour .carousel-inner .zulip-slack-comparison {
|
|
display: flex;
|
|
text-align: left;
|
|
width: 850px;
|
|
max-width: 100%;
|
|
margin: 20px auto 0;
|
|
position: relative;
|
|
|
|
.comparison-zulip {
|
|
width: 500px;
|
|
}
|
|
|
|
.comparison-slack {
|
|
width: 300px;
|
|
}
|
|
|
|
& img {
|
|
max-width: 100%;
|
|
|
|
&.zulip-streams-selected {
|
|
width: 320px;
|
|
border: 0;
|
|
}
|
|
|
|
&.slack-streams-selected {
|
|
width: 200px;
|
|
}
|
|
|
|
&.zulip-unreads-arrows {
|
|
width: 406px;
|
|
border: 0;
|
|
}
|
|
|
|
&.slack-stream-unreads {
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.caption {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner img {
|
|
border: 1px solid hsl(210deg 8% 95%);
|
|
|
|
&.centered-image {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&.zulip-streams {
|
|
width: 200px;
|
|
}
|
|
|
|
&.slack-streams {
|
|
width: 200px;
|
|
}
|
|
|
|
&.zulip-topic {
|
|
margin: -10px 0 0 50px;
|
|
width: 800px;
|
|
}
|
|
|
|
&.slack-overwhelming {
|
|
border: none;
|
|
width: 750px;
|
|
margin: -30px 0 0 50px;
|
|
}
|
|
|
|
&.zulip-easy {
|
|
border: none;
|
|
width: 700px;
|
|
margin-left: 50px;
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .mobile-hide,
|
|
.tour .carousel-inner img.mobile-hide,
|
|
.tour .carousel-inner img.centered-image.mobile-hide {
|
|
display: block;
|
|
}
|
|
|
|
.tour .carousel-inner .mobile-show,
|
|
.tour .carousel-inner img.mobile-show,
|
|
.tour .carousel-inner img.centered-image.mobile-show {
|
|
display: none;
|
|
}
|
|
|
|
.tour .carousel-inner .comparison-slack img {
|
|
margin: 0;
|
|
}
|
|
|
|
.tour .carousel-inner .other-resources {
|
|
text-align: left;
|
|
margin: 30px auto;
|
|
max-width: 600px;
|
|
|
|
.other-resources-section {
|
|
display: inline-block;
|
|
width: 48%;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
|
|
& img {
|
|
border: 0;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .call-to-action {
|
|
display: inline-block;
|
|
margin: 40px auto;
|
|
padding: 11px 25px;
|
|
|
|
font-size: 1.2rem;
|
|
line-height: 20px;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
background: linear-gradient(
|
|
145deg,
|
|
hsl(191deg 56% 55%),
|
|
hsl(169deg 65% 42%)
|
|
);
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
|
|
border-radius: 4px;
|
|
|
|
&:hover {
|
|
background-color: hsl(169deg 65% 42%);
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 0% / 30%);
|
|
}
|
|
}
|
|
|
|
.tour .carousel-control {
|
|
background: 0;
|
|
border: 0;
|
|
color: hsl(223deg 13% 52%);
|
|
font-size: 2em;
|
|
top: 50%;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
border-radius: 0;
|
|
|
|
&:hover {
|
|
color: hsl(220deg 23% 33%);
|
|
}
|
|
|
|
&.right {
|
|
right: 40px;
|
|
}
|
|
|
|
&.left {
|
|
left: 40px;
|
|
}
|
|
}
|
|
|
|
.carousel-indicators {
|
|
margin: 20px 0 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-left: 0;
|
|
list-style: none;
|
|
position: relative;
|
|
top: auto;
|
|
right: auto;
|
|
|
|
& li {
|
|
position: relative;
|
|
flex: 0 1 auto;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 10px;
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
text-indent: -999px;
|
|
cursor: pointer;
|
|
background-color: hsl(222deg 12% 66%);
|
|
transition: background 0.1s ease;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 0;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 10px;
|
|
content: "";
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 0;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 10px;
|
|
content: "";
|
|
}
|
|
|
|
&.active {
|
|
background-color: hsl(220deg 23% 33%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.portico-landing .testimonials {
|
|
color: hsl(0deg 0% 100%);
|
|
background-color: hsl(168deg 43% 24%);
|
|
}
|
|
|
|
.portico-landing .testimonials .text-header .text-content {
|
|
float: left;
|
|
}
|
|
|
|
.portico-landing .testimonials .quote-container {
|
|
width: 98%;
|
|
margin: 30px auto 20px;
|
|
padding-left: 2%;
|
|
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.portico-landing .testimonials .carousel {
|
|
min-height: 250px;
|
|
}
|
|
|
|
.portico-landing .testimonials .carousel-quotes {
|
|
width: 60%;
|
|
margin: auto;
|
|
}
|
|
|
|
.portico-landing .testimonials .carousel-inner {
|
|
width: 100%;
|
|
left: -2%;
|
|
}
|
|
|
|
.portico-landing .testimonials .fa-chevron-left,
|
|
.portico-landing .testimonials .fa-chevron-right {
|
|
color: hsl(0deg 0% 100%);
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
font-size: 36px;
|
|
top: 40%;
|
|
}
|
|
|
|
.portico-landing .testimonials .fa-chevron-right {
|
|
right: 10%;
|
|
}
|
|
|
|
.portico-landing .testimonials .fa-chevron-left {
|
|
left: 10%;
|
|
}
|
|
|
|
.portico-landing .testimonials .fa-chevron-left:hover,
|
|
.portico-landing .testimonials .fa-chevron-right:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.portico-landing .testimonials blockquote::before {
|
|
content: "“";
|
|
margin-left: -10px;
|
|
margin-right: -3px;
|
|
}
|
|
|
|
.portico-landing .testimonials blockquote::after {
|
|
content: "”";
|
|
}
|
|
|
|
.portico-landing .testimonials blockquote + cite {
|
|
display: block;
|
|
margin-top: 5px;
|
|
margin-bottom: 30px;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
opacity: 0.7;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.portico-landing .testimonials blockquote {
|
|
padding: 0;
|
|
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
text-align: left;
|
|
border: none;
|
|
margin: 0 0 20px;
|
|
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.portico-landing .testimonials hr {
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
border: none;
|
|
border-bottom: 1px solid hsl(0deg 0% 100% / 20%);
|
|
}
|
|
|
|
.portico-landing .testimonials .company-container {
|
|
width: 60%;
|
|
margin: 30px auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-container header h2 {
|
|
font-weight: 400;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-container header .arrow {
|
|
margin-top: 12px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company {
|
|
display: inline-block;
|
|
margin: 10px 20px;
|
|
|
|
height: 60px;
|
|
width: calc(25% - 44px);
|
|
|
|
background-color: hsl(0deg 0% 67%);
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* -- company logos -- */
|
|
.portico-landing .testimonials .company-box .company.akamai {
|
|
background-image: url("../../images/landing-page/logos/akamai.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.doctorondemand {
|
|
background-image: url("../../images/landing-page/logos/doctorondemand.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.layershift {
|
|
background-image: url("../../images/landing-page/logos/layershift.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.recurse {
|
|
background-image: url("../../images/landing-page/logos/recurse.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.panjiva {
|
|
background-image: url("../../images/landing-page/logos/panjiva.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.cmt {
|
|
background-image: url("../../images/landing-page/logos/cambridge-mobile-telematics.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.levelup {
|
|
background-image: url("../../images/landing-page/logos/levelup.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.mariadb {
|
|
background-image: url("../../images/landing-page/logos/mariadb.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.wikimedia-outreach {
|
|
background-image: url("../../images/landing-page/logos/wikimedia-outreach.png");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company.mixxx {
|
|
background-image: url("../../images/landing-page/logos/mixxx.png");
|
|
background-color: transparent;
|
|
height: 45px;
|
|
}
|
|
|
|
.portico-landing.hello .apps {
|
|
position: relative;
|
|
padding: 200px 80px 100px;
|
|
margin-top: -50px;
|
|
|
|
background: linear-gradient(
|
|
145deg,
|
|
hsl(191deg 56% 55%),
|
|
hsl(169deg 65% 42%)
|
|
);
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.portico-landing.hello .apps .triangle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 150px 100vw 0 0;
|
|
border-color: hsl(0deg 0% 98%) transparent transparent transparent;
|
|
}
|
|
|
|
.portico-landing.hello .apps .arrow {
|
|
color: hsl(0deg 0% 100%);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.portico-landing.hello .apps .arrow::before {
|
|
background-color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.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: 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: 0 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;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.portico-landing.hello .apps .left-side .platform-icons .group i:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.portico-landing.hello .apps .arrow::after {
|
|
filter: brightness(4) saturate(0);
|
|
}
|
|
|
|
.portico-landing.hello .integrations {
|
|
padding: 80px;
|
|
}
|
|
|
|
.portico-landing.hello .integrations .content {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.portico-landing.hello .integrations .integration-icons {
|
|
width: 100%;
|
|
margin: 20px 0;
|
|
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(219deg 23% 33%);
|
|
border-radius: 5px;
|
|
border: 1px solid hsl(206deg 44% 93%);
|
|
}
|
|
|
|
.portico-landing.hello .integrations .integration-icons .group:hover {
|
|
border: 1px solid hsl(170deg 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: 50px 100px 0;
|
|
|
|
@media (width <= 768px) {
|
|
padding: 50px 10px 0;
|
|
}
|
|
margin-top: 0;
|
|
}
|
|
|
|
.portico-landing.hello .call-to-action-bottom .styled-button {
|
|
display: table;
|
|
margin: 20px auto 0;
|
|
padding: 10px 20px;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.portico-landing.hello .call-to-action-bottom h1 {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.portico-landing.hello .call-to-action-bottom .zulip-octopus {
|
|
margin: 15px auto 50px;
|
|
width: 32px;
|
|
height: 30px;
|
|
background-image: url("../../images/landing-page/zulip-octopus.png");
|
|
background-size: cover;
|
|
|
|
filter: invert(0.9);
|
|
}
|
|
|
|
/* -- apps page -- */
|
|
.portico-landing.apps {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.portico-landing.apps .main,
|
|
.portico-landing.features-app .main {
|
|
background-color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.portico-landing.apps .hero {
|
|
position: relative;
|
|
|
|
padding: 100px 50px 50px;
|
|
background: linear-gradient(
|
|
35deg,
|
|
hsl(197deg 100% 16%),
|
|
hsl(166deg 45% 49%)
|
|
);
|
|
height: 600px;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portico-landing.apps .hero .inner-content {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.portico-landing.apps .hero h1 {
|
|
font-size: 3em;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.portico-landing.apps .hero #waves {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background-image: url("../../images/landing-page/apps/waves.svg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info,
|
|
.portico-landing.apps .hero .image {
|
|
position: relative;
|
|
|
|
width: 50%;
|
|
float: left;
|
|
height: 100%;
|
|
|
|
z-index: 1;
|
|
}
|
|
|
|
.portico-landing.apps .hero .image img {
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info .cta {
|
|
text-shadow: 0 0 60px hsl(0deg 0% 0% / 30%);
|
|
max-width: 600px;
|
|
}
|
|
|
|
.portico-landing.apps .hero .image img.app-screenshot-mobile {
|
|
height: 85%;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info .flex,
|
|
.portico-landing.apps .hero .image .flex {
|
|
height: 500px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info .flex {
|
|
width: 90%;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info .button {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps {
|
|
background-color: hsl(0deg 0% 100%);
|
|
padding: 50px 50px 120px;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps h2 {
|
|
width: 600px;
|
|
margin: 0 auto;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps {
|
|
display: inline-block;
|
|
margin: 50px 0 0;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon {
|
|
vertical-align: top;
|
|
|
|
width: 50px;
|
|
padding: 18px 30px;
|
|
border-radius: 70px;
|
|
|
|
/* Reset color since we don't want default link styling. */
|
|
color: hsl(0deg 0% 27%);
|
|
|
|
font-size: 3em;
|
|
text-align: center;
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon:hover {
|
|
background: linear-gradient(-45deg, hsl(0deg 0% 83%), hsl(0deg 0% 98%));
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
|
|
font-size: 4em;
|
|
padding: 14px 30px;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon.fa-terminal {
|
|
padding: 12px 30px;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone::after {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon::after {
|
|
content: attr(data-label);
|
|
display: block;
|
|
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
font-family: "Source Sans 3 VF", sans-serif;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.download-from-google-play-store img {
|
|
height: 42px;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.download-from-apple-app-store img {
|
|
height: 42px;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
/* -- /for/open-source/ -- */
|
|
.portico-landing.why-page {
|
|
padding-top: 0;
|
|
color: hsl(223deg 6% 25%);
|
|
}
|
|
|
|
.portico-landing.why-page .main {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.portico-landing.why-page .hero {
|
|
padding: 200px 50px 100px;
|
|
|
|
@media (width < 900px) {
|
|
padding: 200px 0 100px;
|
|
}
|
|
|
|
&.empty-hero {
|
|
padding: 50px 50px 70px;
|
|
}
|
|
|
|
background-color: hsl(153deg 32% 55%);
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.portico-landing.why-page .hero.small-hero {
|
|
padding: 120px 50px 30px;
|
|
}
|
|
|
|
.portico-landing.why-page .hero h1 {
|
|
position: relative;
|
|
margin: 0 0 20px;
|
|
|
|
font-size: 3.5em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.portico-landing.why-page .hero p {
|
|
width: 70%;
|
|
margin: 0 auto;
|
|
|
|
font-size: 1.3em;
|
|
text-align: center;
|
|
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.portico-landing.why-page .markdown {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.portico-landing.why-page .main blockquote {
|
|
background-color: hsl(0deg 0% 100%);
|
|
border-left: 5px solid hsl(168deg 24% 51%);
|
|
padding: 20px 30px;
|
|
margin: 20px 0;
|
|
font-size: 1.05em;
|
|
|
|
& p {
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
color: hsl(220deg 23% 33%);
|
|
}
|
|
|
|
& p:last-child {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.portico-landing.why-page .main img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
|
|
.portico-landing.why-page .main .slack-image {
|
|
width: 500px;
|
|
}
|
|
|
|
.portico-landing.why-page .main .zulip-topics-image {
|
|
width: 300px;
|
|
}
|
|
|
|
.portico-landing.why-page .main .zulip-reply-later-image {
|
|
width: 600px;
|
|
}
|
|
|
|
.portico-landing.why-page .photo-description {
|
|
position: relative;
|
|
top: 10px; /* Place in padding gap below photo */
|
|
height: 0;
|
|
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
line-height: 100%;
|
|
color: hsl(0deg 0% 53%);
|
|
}
|
|
|
|
.portico-landing.why-page .team h2 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.portico-landing.why-page .bg-events {
|
|
position: relative;
|
|
|
|
background-image: url("../../images/landing-page/events/for-events.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.portico-landing.why-page .bg-education {
|
|
position: relative;
|
|
|
|
background-image: url("../../images/landing-page/education/for-education-cover.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.portico-landing.why-page .bg-companies {
|
|
position: relative;
|
|
|
|
background-image: url("../../images/landing-page/education/companies-laptop.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
|
|
.bg-dimmer {
|
|
background-color: hsl(224deg 52% 12% / 75%);
|
|
}
|
|
}
|
|
|
|
.portico-landing.why-page .bg-pycon {
|
|
position: relative;
|
|
|
|
background-image: url("../../images/landing-page/pycon.jpg");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.portico-landing.why-page .bg-pycon.drone {
|
|
background-image: url("../../images/landing-page/pycon-drone.jpg");
|
|
}
|
|
|
|
.portico-landing.why-page .bg-pycon.mit {
|
|
background-image: url("../../images/landing-page/mit-lobby-7.jpg");
|
|
}
|
|
|
|
.portico-landing.why-page .bg-pycon.security {
|
|
background-image: url("../../images/landing-page/security.jpg");
|
|
}
|
|
|
|
.portico-landing.why-page .bg-pycon.why-zulip {
|
|
background-image: url("../../images/landing-page/why-zulip/why-zulip-threads.jpg");
|
|
}
|
|
|
|
.portico-landing.why-page .bg-dimmer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
background-color: hsl(224deg 52% 12% / 70%);
|
|
|
|
z-index: 0;
|
|
}
|
|
|
|
.portico-landing.why-page .bg-pycon .content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* -- hello page styling -- */
|
|
.portico-landing.hello .apps .screen {
|
|
display: inline-block;
|
|
margin: 0 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.portico-landing.hello .apps .screen.ios {
|
|
width: 200px;
|
|
height: 350px;
|
|
padding: 30px 0;
|
|
border-radius: 20px;
|
|
|
|
transform: translateY(50px);
|
|
|
|
background-color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.portico-landing.hello .apps .screen.android {
|
|
width: 200px;
|
|
height: 370px;
|
|
padding: 10px 0 30px;
|
|
border-radius: 20px;
|
|
|
|
transform: translateY(-110px);
|
|
|
|
background: linear-gradient(
|
|
90deg,
|
|
hsl(0deg 0% 27%) 0%,
|
|
hsl(0deg 0% 33%) 8%,
|
|
hsl(0deg 0% 33%) 92%,
|
|
hsl(0deg 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(0deg 0% 80%);
|
|
}
|
|
|
|
.portico-landing.hello .apps .screen.ios::after {
|
|
top: auto;
|
|
bottom: 7px;
|
|
left: calc(50% - 12.5px);
|
|
background-color: hsl(0deg 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);
|
|
|
|
border-radius: 8px;
|
|
background-color: hsl(0deg 0% 13%);
|
|
width: 35px;
|
|
height: 20px;
|
|
}
|
|
|
|
.portico-landing.hello .apps .screen.ios .main-page {
|
|
border-color: hsl(0deg 0% 87%);
|
|
}
|
|
|
|
.portico-landing.hello .apps .screen.android .main-page {
|
|
border-color: hsl(0deg 0% 13%);
|
|
}
|
|
|
|
/* -- gradients -- */
|
|
.gradients {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.gradients .gradient {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1100px;
|
|
}
|
|
|
|
.gradients .gradient.dark-blue {
|
|
background: linear-gradient(
|
|
10deg,
|
|
hsl(196deg 58% 14% / 0%) 50%,
|
|
hsl(196deg 58% 14% / 70%)
|
|
);
|
|
}
|
|
|
|
.gradients .gradient.green {
|
|
background: linear-gradient(
|
|
-25deg,
|
|
hsl(156deg 47% 47% / 0%) 40%,
|
|
hsl(156deg 47% 47%)
|
|
);
|
|
}
|
|
|
|
.gradients .gradient.blue {
|
|
background: linear-gradient(
|
|
25deg,
|
|
hsl(196deg 38% 51% / 0%) 40%,
|
|
hsl(196deg 38% 51%)
|
|
);
|
|
}
|
|
|
|
.gradients .gradient.sunburst {
|
|
background: linear-gradient(
|
|
5deg,
|
|
hsl(49deg 71% 68% / 0%) 20%,
|
|
hsl(49deg 71% 68%)
|
|
);
|
|
}
|
|
|
|
.gradients .gradient.white-fade {
|
|
background: linear-gradient(
|
|
0deg,
|
|
hsl(0deg 0% 100%) 0%,
|
|
hsl(0deg 0% 98% / 0%) 40%
|
|
);
|
|
}
|
|
|
|
/* -- pricing css -- */
|
|
.portico-landing.plans .main {
|
|
width: 100%;
|
|
}
|
|
|
|
.portico-landing.plans .main .padded-content > h1 {
|
|
text-align: center;
|
|
font-size: 2.5em;
|
|
margin: 0;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.portico-landing.plans .main .padded-content > h2 {
|
|
text-align: center;
|
|
|
|
font-size: 1.5em;
|
|
|
|
margin-bottom: 50px;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.pricing-model .pricing-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.pricing-model .pricing-container .block {
|
|
display: inline-block;
|
|
margin: 40px 20px 20px;
|
|
}
|
|
|
|
.pricing-model .pricing-container .block .plan-title {
|
|
padding: 10px;
|
|
margin-bottom: 3px;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
font-size: 2em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.pricing-model .pricing-container .price-box {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
margin: 0;
|
|
width: 300px;
|
|
height: 500px;
|
|
|
|
box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
|
|
|
|
text-align: left;
|
|
background-color: hsl(0deg 0% 100%);
|
|
|
|
transition-property: all;
|
|
transition-duration: 0.3s;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
.pricing-model .pricing-container .text-content {
|
|
margin: 18px;
|
|
}
|
|
|
|
.pricing-model .padded-content .text-header .text-content h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pricing-model .pricing-container .text-content h2 {
|
|
font-size: 1.5em;
|
|
font-weight: 400;
|
|
margin-bottom: 0;
|
|
|
|
text-align: left;
|
|
}
|
|
|
|
.pricing-model .pricing-container hr {
|
|
border: none;
|
|
border-bottom: 2px solid hsl(170deg 47% 53%);
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.pricing-model .pricing-container .text-content .description {
|
|
font-size: 0.9em;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 53%);
|
|
}
|
|
|
|
.pricing-model .pricing-container ul.feature-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.pricing-model .pricing-container ul.feature-list li {
|
|
position: relative;
|
|
padding: 10px 0 10px 25px;
|
|
|
|
font-size: 0.9em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.pricing-model .pricing-container ul.feature-list li::before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 0;
|
|
width: 20px;
|
|
height: 18px;
|
|
|
|
background-image: url("../../images/checkbox-green.svg");
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
filter: invert(0.3);
|
|
}
|
|
|
|
.pricing-model .pricing-container .bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 150px;
|
|
|
|
background-color: hsl(0deg 0% 93%);
|
|
}
|
|
|
|
.pricing-model .pricing-container .text-content .price::before {
|
|
content: "$";
|
|
position: relative;
|
|
vertical-align: top;
|
|
top: 7px;
|
|
left: -3px;
|
|
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
color: hsl(0deg 0% 53%);
|
|
}
|
|
|
|
.pricing-model .pricing-container .text-content .price {
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
|
|
font-size: 3.5em;
|
|
font-weight: 600;
|
|
line-height: 0.8;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.pricing-model .pricing-container .bottom .details {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-left: 8px;
|
|
margin-top: 4px;
|
|
|
|
font-size: 0.9em;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 53%);
|
|
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pricing-model .pricing-container .bottom .button {
|
|
margin-top: 24px;
|
|
display: block;
|
|
text-align: center;
|
|
|
|
font-size: 0.9em;
|
|
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.pricing-model .pricing-container .price-box:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.pricing-model .pricing-container .price-box:focus .button {
|
|
box-shadow: 0 0 25px hsl(169deg 48% 60%);
|
|
animation: box-shadow-pulse 2s infinite;
|
|
}
|
|
|
|
.pricing-model .pricing-container .text-content .standard-price-box {
|
|
display: flex;
|
|
height: 55px;
|
|
|
|
.pricing-period {
|
|
color: hsl(0deg 0% 27%);
|
|
}
|
|
}
|
|
|
|
.pricing-model .pricing-container .text-content .price .price-cents {
|
|
font-size: 0.4em;
|
|
vertical-align: top;
|
|
position: relative;
|
|
top: 6px;
|
|
}
|
|
|
|
.plans_faq_questions {
|
|
background: transparent;
|
|
padding: 20px 0;
|
|
margin: auto;
|
|
|
|
&.plans_top_faq {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 53%);
|
|
padding-top: 0;
|
|
|
|
& p {
|
|
padding: 10px;
|
|
}
|
|
|
|
& p:first-child {
|
|
margin-top: -20px;
|
|
}
|
|
|
|
& p:last-child {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
& p {
|
|
width: 80%;
|
|
margin: auto;
|
|
text-align: center;
|
|
|
|
@media (width <= 1100px) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-content .pricing-details {
|
|
padding: 15px 0;
|
|
height: 25px;
|
|
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 53%);
|
|
font-style: italic;
|
|
text-align: center;
|
|
|
|
&.multi-line {
|
|
padding: 5px 0 25px;
|
|
}
|
|
}
|
|
|
|
.portico-landing.jobs h2 {
|
|
line-height: 1.4;
|
|
margin: 20px 0 5px;
|
|
}
|
|
|
|
.portico-landing.jobs h3 {
|
|
line-height: 1.4;
|
|
margin: 20px 0 7px;
|
|
}
|
|
|
|
.portico-landing.jobs .how-we-work {
|
|
padding-top: 25px;
|
|
}
|
|
|
|
.portico-landing.jobs .what-were-building {
|
|
background-color: hsl(217deg 22% 93%);
|
|
}
|
|
|
|
@keyframes box-shadow-pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 hsl(170deg 47% 60%);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 25px hsl(170deg 47% 60% / 80%);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 0 hsl(170deg 47% 60%);
|
|
}
|
|
}
|
|
|
|
/* -- media queries -- */
|
|
@media (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 (width <= 1390px) {
|
|
.portico-landing.plans
|
|
.pricing-container
|
|
.block:not(:first-child)
|
|
.responsive-title {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
@media (width <= 1376px) {
|
|
.portico-landing.plans .price-box {
|
|
margin: 20px;
|
|
}
|
|
}
|
|
|
|
@media (width >= 1296px), (687px <= width <= 985px) {
|
|
/* while there are nine, show only two rows of four. */
|
|
.portico-landing .testimonials .company-box > div:last-of-type {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (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;
|
|
}
|
|
|
|
.portico-landing.hello .apps .left-side .content {
|
|
margin: 0 auto 50px;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company {
|
|
width: calc(33% - 44px);
|
|
}
|
|
}
|
|
|
|
@media (width <= 1100px) {
|
|
.tour .carousel-inner img {
|
|
&.zulip-topic,
|
|
&.slack-overwhelming,
|
|
&.zulip-easy {
|
|
width: 85%;
|
|
left: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .tour-item-header {
|
|
margin: 0 0 30px;
|
|
}
|
|
|
|
.tour .carousel-control {
|
|
&.right {
|
|
right: 20px;
|
|
}
|
|
|
|
&.left {
|
|
left: 20px;
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .zulip-slack-comparison {
|
|
width: 650px;
|
|
max-width: 100%;
|
|
|
|
.comparison-zulip {
|
|
width: 450px;
|
|
}
|
|
|
|
.comparison-slack {
|
|
width: 200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 1024px) {
|
|
.portico-landing.hello .gradients .gradient {
|
|
height: 1400px;
|
|
}
|
|
|
|
.portico-landing {
|
|
padding-top: 170px;
|
|
}
|
|
|
|
.portico-landing.features-app {
|
|
& section {
|
|
&.messages {
|
|
display: block;
|
|
text-align: center;
|
|
|
|
> * {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.portico-landing.plans .compare .padded-content {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
@media (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 .testimonials .carousel-quotes {
|
|
width: 100%;
|
|
}
|
|
|
|
.portico-landing .testimonials .fa-chevron-right {
|
|
right: -40px;
|
|
}
|
|
|
|
.portico-landing .testimonials .fa-chevron-left {
|
|
left: -40px;
|
|
}
|
|
|
|
.screen .message-feed .message .content {
|
|
top: -12px;
|
|
}
|
|
|
|
.portico-landing.hello .apps,
|
|
.portico-landing.hello .integrations {
|
|
padding: 200px 50px 80px;
|
|
}
|
|
|
|
.portico-landing.hello .apps .left-side .content {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.portico-landing.hello .integrations {
|
|
width: 100%;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.portico-landing.hello .integrations .content {
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.portico-landing .testimonials hr,
|
|
.portico-landing .testimonials .company-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.portico-landing .testimonials .company-box .company {
|
|
width: calc(25% - 44px);
|
|
}
|
|
|
|
.tour .carousel-inner img {
|
|
&.slack-overwhelming,
|
|
&.zulip-easy {
|
|
width: 80%;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.portico-landing.hello .hero {
|
|
& header {
|
|
width: calc(100% - 50px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 906px) {
|
|
.portico-landing.features-app {
|
|
& section {
|
|
&.notifications {
|
|
padding: 50px 10px;
|
|
|
|
.image-block {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.portico-landing .testimonials .quote-container {
|
|
width: 96%;
|
|
padding-left: 4%;
|
|
}
|
|
|
|
.portico-landing .testimonials .carousel-inner {
|
|
left: -4%;
|
|
}
|
|
}
|
|
|
|
@media (width <= 830px) {
|
|
.portico-landing.hello .apps .left-side .platform-icons .group {
|
|
margin: 50px 30px;
|
|
display: block;
|
|
}
|
|
|
|
.portico-landing.hello .tour .carousel-inner .item-container {
|
|
width: 85%;
|
|
}
|
|
|
|
.tour .carousel-control {
|
|
font-size: 1.2em;
|
|
|
|
&.right {
|
|
right: -10px;
|
|
}
|
|
|
|
&.left {
|
|
left: -10px;
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .zulip-slack-comparison {
|
|
width: 100%;
|
|
|
|
.comparison-zulip {
|
|
width: 65%;
|
|
}
|
|
|
|
.comparison-slack {
|
|
width: 35%;
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .tour-item-header {
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
|
|
@media (width <= 768px) {
|
|
.portico-landing.hello .open-source {
|
|
.flex {
|
|
display: block;
|
|
}
|
|
|
|
& img {
|
|
display: block;
|
|
width: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.il-block {
|
|
width: 75%;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
width: auto;
|
|
}
|
|
|
|
.portico-landing.why-page .main {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.portico-landing.why-page .hero {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.portico-landing.why-page .hero p {
|
|
font-size: 2em;
|
|
width: 100%;
|
|
}
|
|
|
|
.portico-landing.why-page .padded-content {
|
|
padding: 50px 20px;
|
|
}
|
|
|
|
.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.features-app {
|
|
& section {
|
|
padding: 0 20px;
|
|
|
|
&.hero {
|
|
padding: 50px;
|
|
|
|
& h1 {
|
|
font-size: 3em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.billing-upgrade-page {
|
|
.nav-tabs,
|
|
.tab-content {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 1024px) {
|
|
.portico-landing {
|
|
padding-top: 120px;
|
|
}
|
|
|
|
.portico-landing.apps .hero {
|
|
height: 350px;
|
|
}
|
|
|
|
.portico-landing.apps .hero h1 {
|
|
font-size: 1.9em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info .flex,
|
|
.portico-landing.apps .hero .image .flex {
|
|
height: 200px;
|
|
min-height: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps {
|
|
padding: 50px 5px 120px;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps h2 {
|
|
font-size: 1.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon {
|
|
padding: 0 14px;
|
|
width: 30px;
|
|
padding-top: 8px;
|
|
padding-bottom: 0;
|
|
font-size: 2.3em;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon.fa-mobile-phone {
|
|
padding: 7px 10px 5px;
|
|
width: 35px;
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon.fa-windows {
|
|
font-size: 2em;
|
|
padding: 10px 13px 2px !important;
|
|
}
|
|
|
|
.portico-landing.apps .other-apps .apps .icon::after {
|
|
content: "";
|
|
}
|
|
|
|
.portico-landing.apps .hero .image {
|
|
display: none;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info {
|
|
width: 100%;
|
|
}
|
|
|
|
.main {
|
|
width: calc(100% - 50px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.portico-landing.hello .hero {
|
|
padding-bottom: 100px;
|
|
|
|
.waves {
|
|
height: 450px;
|
|
}
|
|
|
|
& header {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.portico-header .content > ul::before {
|
|
content: "Zulip";
|
|
display: block;
|
|
margin-top: 25px;
|
|
padding-top: 5px;
|
|
margin-left: 10px;
|
|
|
|
width: 100px;
|
|
height: 40px;
|
|
|
|
font-size: 1.5rem;
|
|
line-height: 30px;
|
|
text-align: right;
|
|
color: hsl(0deg 0% 27%);
|
|
|
|
background-size: 40px auto;
|
|
background-image: url("../../images/zulip-logo.svg");
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.portico-header .dropdown ul {
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 42px 0 0;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.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 .testimonials .company-box .company {
|
|
margin: 10px;
|
|
width: calc(33% - 24px);
|
|
}
|
|
|
|
.tour .carousel-control {
|
|
font-size: 1.1em;
|
|
|
|
.right {
|
|
right: -30px;
|
|
}
|
|
|
|
.left {
|
|
left: -30px;
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .zulip-slack-comparison img {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.portico-landing.hello .tour .carousel-inner .item-container {
|
|
height: 450px;
|
|
}
|
|
|
|
.tour .carousel-inner .call-to-action {
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
|
|
@media (width <= 640px) {
|
|
.portico-landing.hello .integrations .integration-icons .group {
|
|
margin: 10px 16px 0;
|
|
}
|
|
|
|
.portico-landing.features-app {
|
|
& section {
|
|
&.keyboard-shortcuts {
|
|
& img {
|
|
&.overflow-wave {
|
|
top: -100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 550px) {
|
|
.portico-landing.features-app {
|
|
& section {
|
|
&.hero {
|
|
padding: 50px 20px 20px;
|
|
}
|
|
|
|
&.messages {
|
|
padding: 0 20px;
|
|
|
|
& h2 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.features {
|
|
.feature-block {
|
|
margin: 20px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.portico-landing .tour {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.portico-landing.hello .tour .carousel-inner .item-container {
|
|
height: 400px;
|
|
}
|
|
|
|
.tour .carousel-control {
|
|
top: 100%;
|
|
}
|
|
|
|
.tour .carousel-inner .zulip-slack-comparison {
|
|
.comparison-zulip {
|
|
width: 60%;
|
|
}
|
|
|
|
.comparison-slack {
|
|
width: 38%;
|
|
}
|
|
|
|
.caption {
|
|
font-size: 90%;
|
|
}
|
|
|
|
& img {
|
|
max-width: 100%;
|
|
|
|
&.zulip-streams {
|
|
max-width: 140px;
|
|
}
|
|
|
|
&.zulip-streams-selected {
|
|
max-width: 95%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tour .carousel-inner .tour-explanation {
|
|
opacity: 0.8;
|
|
font-size: 90%;
|
|
text-align: left;
|
|
}
|
|
|
|
.billing-upgrade-page {
|
|
.payment-schedule {
|
|
.box {
|
|
width: 100px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 450px) {
|
|
.portico-landing.plans .price-box {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
min-height: 500px;
|
|
height: auto;
|
|
max-width: 300px;
|
|
width: auto;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.pricing-model .pricing-container .text-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.pricing-model .pricing-container .bottom {
|
|
position: static;
|
|
height: auto;
|
|
}
|
|
|
|
.portico-landing.hello .hero {
|
|
padding: 60px 5px 40px;
|
|
}
|
|
|
|
.portico-landing.hello header {
|
|
padding: 0 45px;
|
|
}
|
|
|
|
.portico-landing.hello .integrations .content header {
|
|
padding: 0;
|
|
}
|
|
|
|
.portico-landing.hello .integrations .integration-icons .group {
|
|
margin: 4px 2px;
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
}
|
|
|
|
.portico-landing.plans .compare .padded-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.portico-landing.plans .pricing-container .block {
|
|
margin: 0;
|
|
}
|
|
|
|
.tour .carousel-inner .mobile-hide,
|
|
.tour .carousel-inner img.mobile-hide,
|
|
.tour .carousel-inner img.centered-image.mobile-hide {
|
|
display: none;
|
|
}
|
|
|
|
.tour .carousel-inner .mobile-show,
|
|
.tour .carousel-inner img.mobile-show,
|
|
.tour .carousel-inner img.centered-image.mobile-show {
|
|
display: block;
|
|
}
|
|
|
|
.main .padded-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* the gradients leave the bottom of the text and the button white so we
|
|
want to have the gradients stay darker for longer.
|
|
*/
|
|
.gradients .gradient.green {
|
|
background: linear-gradient(
|
|
-25deg,
|
|
hsl(156deg 47% 47% / 0%) 10%,
|
|
hsl(156deg 47% 47%) 80%
|
|
);
|
|
}
|
|
|
|
.gradients .gradient.blue {
|
|
background: linear-gradient(
|
|
25deg,
|
|
hsl(196deg 38% 51% / 0%) 10%,
|
|
hsl(196deg 38% 51%) 80%
|
|
);
|
|
}
|
|
|
|
.gradients .gradient.sunburst {
|
|
background: linear-gradient(
|
|
5deg,
|
|
hsl(49deg 71% 68% / 0%) 20%,
|
|
hsl(49deg 71% 68%) 80%
|
|
);
|
|
}
|
|
|
|
.features-app .gradients .gradient {
|
|
height: 700px;
|
|
}
|
|
}
|
|
|
|
@media (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-categories-dropdown {
|
|
width: 323px;
|
|
}
|
|
|
|
.portico-landing.features-app {
|
|
& section {
|
|
&.keyboard-shortcuts {
|
|
& img {
|
|
&.overflow-wave {
|
|
top: -92px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 360px) {
|
|
.portico-landing.features-app {
|
|
& section {
|
|
.keyboard-shortcuts {
|
|
& img {
|
|
&.overflow-wave {
|
|
top: -88px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* For iPhone 5/SE device */
|
|
@media (width <= 320px) {
|
|
.portico-landing.features-app {
|
|
& section {
|
|
.keyboard-shortcuts {
|
|
& img {
|
|
&.overflow-wave {
|
|
top: -78px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 313px) {
|
|
.portico-landing .testimonials .quote-container {
|
|
width: 93%;
|
|
padding-left: 7%;
|
|
}
|
|
|
|
.portico-landing .testimonials .carousel-inner {
|
|
left: -7%;
|
|
}
|
|
}
|
|
|
|
#download-from-microsoft-store,
|
|
#download-android-apk,
|
|
#download-mac-arm64 {
|
|
display: inline-block;
|
|
color: hsl(0deg 0% 100%);
|
|
font-size: 13px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.feature-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 50px 4vw 10px;
|
|
|
|
.feature-half {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.md-hide {
|
|
display: none;
|
|
}
|
|
|
|
.md-display {
|
|
display: block;
|
|
}
|
|
|
|
@media (width <= 768px) {
|
|
.feature-text {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.twitter-tweet {
|
|
margin: 30px auto !important;
|
|
}
|
|
}
|
|
|
|
@media (width >= 768px) {
|
|
display: grid;
|
|
grid-column-gap: 5%;
|
|
grid-template-columns: 43% auto;
|
|
max-width: 1300px;
|
|
align-items: center;
|
|
justify-items: center;
|
|
margin: auto;
|
|
|
|
.alternate-grid& {
|
|
grid-template-columns: auto 43%;
|
|
}
|
|
|
|
.feature-half {
|
|
display: block;
|
|
}
|
|
|
|
.md-display {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.feature-text {
|
|
& h1 {
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
& ul {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
}
|
|
|
|
& ul li {
|
|
margin-bottom: 15px;
|
|
|
|
&::before {
|
|
float: left;
|
|
background-repeat: no-repeat;
|
|
content: "";
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 5px;
|
|
margin-top: 4px;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z"/></svg>');
|
|
}
|
|
|
|
.list-content {
|
|
margin-left: 22px;
|
|
line-height: 1.6;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feature-image {
|
|
& img,
|
|
div.quote {
|
|
width: 400px;
|
|
}
|
|
|
|
@media (width < 1024px) {
|
|
& div.quote {
|
|
width: 300px;
|
|
}
|
|
}
|
|
|
|
@media (width < 768px) {
|
|
& div.quote {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feature-icon {
|
|
& img,
|
|
div.quote {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
.topics-image {
|
|
border: solid 2px hsl(0deg 0% 60%);
|
|
}
|
|
}
|
|
|
|
.twitter-tweet {
|
|
margin: auto;
|
|
}
|
|
|
|
.discounts-section {
|
|
text-align: center;
|
|
|
|
& header {
|
|
& b {
|
|
font-weight: 600;
|
|
color: hsl(169deg 45% 43%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.register-buttons {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
margin: 20px;
|
|
}
|
|
|
|
/* Common button styles */
|
|
.register-now,
|
|
.register-now:visited {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
font-size: 15px;
|
|
margin: 10px 20px;
|
|
float: left;
|
|
width: 200px;
|
|
border: 2px solid;
|
|
border-radius: 4px;
|
|
background: none;
|
|
color: hsl(169deg 45% 43%);
|
|
vertical-align: middle;
|
|
position: relative;
|
|
z-index: 1;
|
|
backface-visibility: hidden;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
transition:
|
|
border-color 0.3s,
|
|
background-color 0.3s;
|
|
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
|
font-weight: 700;
|
|
padding: 15px 5px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
& p {
|
|
font-weight: 600;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: hsl(169deg 45% 43%);
|
|
background-color: hsl(170deg 47% 53%);
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
.quote {
|
|
background: hsl(218deg 46% 43%);
|
|
padding: 1em;
|
|
border-radius: 1em;
|
|
font-weight: 400;
|
|
margin: 40px 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
& a {
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
&.case-study-link {
|
|
margin-left: 20px;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.author,
|
|
blockquote {
|
|
color: hsl(0deg 0% 100%);
|
|
margin: 5px 20px 20px;
|
|
}
|
|
|
|
& blockquote {
|
|
font-size: 18px;
|
|
padding: 0 0 0 15px;
|
|
border-left: 5px solid hsl(0deg 0% 93%);
|
|
}
|
|
|
|
& blockquote::before {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
content: "";
|
|
}
|
|
|
|
& cite {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.intro_quote {
|
|
& blockquote {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
color: hsl(223deg 6% 25%);
|
|
border-left: 6px solid hsl(218deg 46% 43%);
|
|
position: relative;
|
|
background: hsl(0deg 0% 93%);
|
|
padding: 20px;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.author {
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
|
|
.case-study-page,
|
|
.solutions-page {
|
|
.bottom-register-buttons.extra_margin_before_footer {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.hero-text {
|
|
position: relative;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
margin: 40px auto;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.hero {
|
|
& a {
|
|
color: hsl(170deg 76% 64%);
|
|
}
|
|
}
|
|
|
|
.hero-buttons {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
|
|
& a {
|
|
color: hsl(170deg 47% 33%);
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
margin: 10px;
|
|
|
|
&:hover {
|
|
color: hsl(0deg 0% 100%);
|
|
background-color: hsl(170deg 47% 33%);
|
|
border-color: hsl(170deg 47% 33%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.feature-end {
|
|
@media (width >= 768px) {
|
|
margin: 10px;
|
|
}
|
|
|
|
& h1 {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
& ul {
|
|
margin: auto;
|
|
max-width: 800px;
|
|
padding: 30px;
|
|
}
|
|
|
|
& p {
|
|
margin: auto;
|
|
max-width: 800px;
|
|
padding: 30px;
|
|
}
|
|
}
|
|
|
|
.price-asterisk {
|
|
text-align: center;
|
|
margin-top: 0 !important;
|
|
padding-top: 0 !important;
|
|
font-size: 15px;
|
|
opacity: 0.8;
|
|
max-width: 560px !important;
|
|
}
|
|
}
|
|
|
|
.bottom-register-buttons {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
|
|
& h1 {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.hero-buttons {
|
|
margin: 20px;
|
|
}
|
|
}
|
|
|
|
.solutions-page .pricing-model {
|
|
.padded-content {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.pricing-container {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.price-box {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
|
|
.for-education.pricing-model {
|
|
.pricing-details {
|
|
color: inherit;
|
|
font-style: inherit;
|
|
}
|
|
|
|
.price-box {
|
|
height: 625px;
|
|
|
|
.bottom {
|
|
height: 275px;
|
|
|
|
.standard-register-button {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.free-text {
|
|
margin-top: 90px;
|
|
|
|
.pricing-details {
|
|
font-size: 34px;
|
|
}
|
|
|
|
& a {
|
|
margin-top: 76px;
|
|
}
|
|
}
|
|
|
|
.standard-price-box {
|
|
flex-flow: row wrap;
|
|
height: 90px;
|
|
font-size: 15px;
|
|
|
|
&:first-child {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
& p {
|
|
padding: 0;
|
|
margin: 0 0 -10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: hsl(169deg 46% 33%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.portico-landing.why-page.case-study-page {
|
|
.bg-dimmer {
|
|
background-color: hsl(224deg 52% 12% / 86%);
|
|
}
|
|
}
|
|
|
|
.feature-intro {
|
|
max-width: 800px;
|
|
margin: 50px auto 0;
|
|
padding: 0 4vw;
|
|
|
|
& h1 {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.for-companies {
|
|
.feature-end {
|
|
margin-top: 50px;
|
|
|
|
.description {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
& p {
|
|
padding: 10px;
|
|
}
|
|
|
|
.intro_quote {
|
|
margin: 20px auto 0;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.pricing-model {
|
|
@media (width >= 768px) {
|
|
.price-box {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
|
|
.padded-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.plan-title {
|
|
color: hsl(0deg 0% 0%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mirror-image {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.why-zulip {
|
|
.discounts-section {
|
|
margin: 30px;
|
|
|
|
& h1 {
|
|
font-weight: 700 !important;
|
|
font-size: 26px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.portico-landing.why-page .hero.why-zulip {
|
|
padding-bottom: 120px;
|
|
|
|
.bg-dimmer {
|
|
background-color: hsl(224deg 52% 12% / 85%);
|
|
}
|
|
|
|
.padded-content {
|
|
padding-top: 0;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
@media (width <= 768px) {
|
|
.register-buttons {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.discounts-section .register-buttons a {
|
|
color: hsl(169deg 71% 64%);
|
|
|
|
&:hover {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.why-zulip,
|
|
.hello {
|
|
.register-buttons {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
margin-top: 30px;
|
|
|
|
& a {
|
|
min-height: 40px;
|
|
padding: 7px 0;
|
|
}
|
|
}
|
|
|
|
@media (width <= 768px) {
|
|
.register-buttons {
|
|
& a {
|
|
margin: 10px calc(5vw - 10px);
|
|
width: clamp(130px, 40vw, 200px);
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.self-hosting-page {
|
|
& p {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.hero-buttons {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.alternative-features {
|
|
.feature-container {
|
|
padding: 30px;
|
|
|
|
&:nth-child(even) {
|
|
background: hsl(171deg 49% 39% / 21%);
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
.feature-icon img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.triangle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 150px 100vw 0 0;
|
|
border-color: hsl(0deg 0% 100%) transparent transparent transparent;
|
|
}
|
|
|
|
.quote {
|
|
position: relative;
|
|
margin: 0;
|
|
margin-top: 50px;
|
|
padding: 50px;
|
|
padding-top: 200px;
|
|
border-radius: 0;
|
|
background: linear-gradient(
|
|
145deg,
|
|
hsl(191deg 56% 55%),
|
|
hsl(169deg 65% 42%)
|
|
);
|
|
|
|
& blockquote {
|
|
max-width: 700px;
|
|
margin: auto;
|
|
font-size: 24px;
|
|
|
|
.author {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feature-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin: 0;
|
|
background: hsl(171deg 49% 39% / 21%);
|
|
padding: 50px 0;
|
|
|
|
.feature-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-width: 1000px;
|
|
margin: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
|
|
.feature-box {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
width: 40vw;
|
|
height: 350px;
|
|
box-shadow:
|
|
0 1px 1px 0 hsl(193deg 100% 7.1% / 30%),
|
|
1px 1px 1px 0 hsl(193deg 100% 7.1% / 15%),
|
|
-1px 1px 1px 0 hsl(193deg 100% 7.1% / 15%);
|
|
|
|
background: hsl(0deg 0% 100%);
|
|
text-align: left;
|
|
margin: 10px 0;
|
|
padding: 50px 30px 0;
|
|
border-top: 5px solid hsl(171deg 49% 39%);
|
|
|
|
@media (width < 1000px) {
|
|
height: 400px;
|
|
}
|
|
|
|
& h1 {
|
|
font-weight: 600;
|
|
font-size: clamp(24px, 2.5vw, 32px);
|
|
}
|
|
|
|
.feature-icon {
|
|
align-self: center;
|
|
|
|
& img {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width < 768px) {
|
|
flex-direction: column;
|
|
|
|
.feature-box {
|
|
width: 75vw !important;
|
|
height: calc(600px - 35vw);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.for-education.pricing-model .pricing-container .price-box {
|
|
height: 525px;
|
|
|
|
.bottom {
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
.feature-end {
|
|
margin: 0;
|
|
|
|
.feature-pricing {
|
|
padding: 50px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
hsl(191deg 56% 55%),
|
|
hsl(169deg 65% 42%)
|
|
);
|
|
|
|
@media (width <= 540px) {
|
|
padding: 50px 0;
|
|
|
|
.price-box {
|
|
padding-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
& h1 {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.try-zulip-now-page {
|
|
.bottom-register-buttons {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.try-now-button {
|
|
padding: 11px 25px;
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 100%);
|
|
background: linear-gradient(
|
|
145deg,
|
|
hsl(191deg 56% 55%),
|
|
hsl(169deg 65% 42%)
|
|
);
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
|
|
border: 0;
|
|
width: 200px;
|
|
height: 50px;
|
|
outline: none;
|
|
border-radius: 4px;
|
|
|
|
&:visited {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: hsl(169deg 65% 42%);
|
|
box-shadow: 0 3px 10px hsl(0deg 0% 0% / 30%);
|
|
}
|
|
}
|
|
}
|