mirror of https://github.com/zulip/zulip.git
2910 lines
56 KiB
CSS
2910 lines
56 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* -- 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;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
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: 450px;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portico-landing.apps .hero .inner-content {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.portico-landing.apps .hero h1 {
|
|
text-align: center;
|
|
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 {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 50%;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info .cta {
|
|
text-shadow: 0 0 60px hsl(0deg 0% 0% / 30%);
|
|
text-align: center;
|
|
}
|
|
|
|
.portico-landing.apps .hero .info .flex {
|
|
height: 300px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .block {
|
|
display: inline-block;
|
|
margin: 40px 20px 20px;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .block .plan-title {
|
|
padding: 10px;
|
|
margin-bottom: 3px;
|
|
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
font-size: 2em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .text-content {
|
|
margin: 18px;
|
|
}
|
|
|
|
.for-education-pricing-model .padded-content .text-header .text-content h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .text-content h2 {
|
|
font-size: 1.5em;
|
|
font-weight: 400;
|
|
margin-bottom: 0;
|
|
|
|
text-align: left;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container hr {
|
|
border: none;
|
|
border-bottom: 2px solid hsl(170deg 47% 53%);
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .text-content .description {
|
|
font-size: 0.9em;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 53%);
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container ul.feature-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container ul.feature-list li {
|
|
position: relative;
|
|
padding: 10px 0 10px 25px;
|
|
|
|
font-size: 0.9em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.for-education-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);
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 150px;
|
|
|
|
background-color: hsl(0deg 0% 93%);
|
|
}
|
|
|
|
.for-education-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%);
|
|
}
|
|
|
|
.for-education-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;
|
|
}
|
|
|
|
.for-education-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;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .bottom .button {
|
|
margin-top: 24px;
|
|
display: block;
|
|
text-align: center;
|
|
|
|
font-size: 0.9em;
|
|
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .price-box:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .price-box:focus .button {
|
|
box-shadow: 0 0 25px hsl(169deg 48% 60%);
|
|
animation: box-shadow-pulse 2s infinite;
|
|
}
|
|
|
|
.for-education-pricing-model
|
|
.pricing-container
|
|
.text-content
|
|
.standard-price-box {
|
|
display: flex;
|
|
height: 55px;
|
|
|
|
.pricing-period {
|
|
color: hsl(0deg 0% 27%);
|
|
}
|
|
}
|
|
|
|
.for-education-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 .for-education-pricing-model .price-box {
|
|
margin: 20px;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@media (width <= 1024px) {
|
|
.portico-landing.hello .gradients .gradient {
|
|
height: 1400px;
|
|
}
|
|
|
|
.portico-landing {
|
|
padding-top: 170px;
|
|
}
|
|
|
|
.portico-landing.plans .compare .padded-content {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
@media (width <= 985px) {
|
|
.portico-landing.apps .main {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.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.hello .hero {
|
|
& header {
|
|
width: calc(100% - 50px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 830px) {
|
|
.portico-landing.hello .apps .left-side .platform-icons .group {
|
|
margin: 50px 30px;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@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,
|
|
.portico-landing.why-page .for-education-pricing-model .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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@media (width <= 640px) {
|
|
.portico-landing.hello .integrations .integration-icons .group {
|
|
margin: 10px 16px 0;
|
|
}
|
|
}
|
|
|
|
@media (width <= 550px) {
|
|
.billing-upgrade-page {
|
|
.payment-schedule {
|
|
.box {
|
|
width: 100px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 450px) {
|
|
.portico-landing.plans .for-education-pricing-model .price-box {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
min-height: 500px;
|
|
height: auto;
|
|
max-width: 300px;
|
|
width: auto;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.for-education-pricing-model .pricing-container .text-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.for-education-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;
|
|
}
|
|
|
|
.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%
|
|
);
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
#download-from-microsoft-store,
|
|
#download-android-apk,
|
|
#download-mac-arm64 {
|
|
display: block;
|
|
color: hsl(0deg 0% 100%);
|
|
font-size: 13px;
|
|
padding-left: 10px;
|
|
|
|
& a {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
#download-from-microsoft-store,
|
|
#download-mac-arm64 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.download-instructions {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media (width >= 768px) {
|
|
display: grid;
|
|
grid-column-gap: 5%;
|
|
grid-template-columns: 43% auto;
|
|
max-width: 1300px;
|
|
place-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%);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.quote-in-feature-text blockquote {
|
|
background: transparent;
|
|
padding: 10px 20px;
|
|
margin: 20px 0;
|
|
font-style: italic;
|
|
border-left: 6px solid hsl(168.1deg 49.15% 46.27%);
|
|
}
|
|
|
|
.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 .for-education-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 {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
margin: 0;
|
|
width: 300px;
|
|
height: 625px;
|
|
|
|
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;
|
|
|
|
.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;
|
|
}
|
|
|
|
.for-education-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%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.apps .apps-page-link {
|
|
text-decoration: underline;
|
|
color: hsl(0deg 0% 100%);
|
|
}
|