64898b2c79
Some checks failed
Code scanning / CodeQL (push) Failing after 15s
Zulip production suite / Ubuntu 22.04 production build (push) Failing after 26s
Zulip production suite / Debian 12 production install with custom db name and user (push) Has been skipped
Zulip production suite / Ubuntu 22.04 production install and PostgreSQL upgrade with pgroonga (push) Has been skipped
Zulip production suite / Ubuntu 24.04 production install (push) Has been skipped
Zulip production suite / Ubuntu 26.04 production install (push) Has been skipped
Zulip production suite / Debian 13 production install (push) Has been skipped
Zulip production suite / 7.0 Version Upgrade (push) Has been skipped
Zulip production suite / 8.0 Version Upgrade (push) Has been skipped
Zulip production suite / 6.0 Version Upgrade (push) Has been skipped
Zulip production suite / 10.0 Version Upgrade (push) Has been skipped
Zulip production suite / 9.0 Version Upgrade (push) Has been skipped
Zulip production suite / 12.0 Version Upgrade (push) Has been skipped
Zulip production suite / 11.0 Version Upgrade (push) Has been skipped
GitHub Actions Security Analysis with zizmor / zizmor (push) Failing after 3s
Zulip CI / Debian 12 (Python 3.11, backend + documentation) (push) Failing after 26s
Zulip CI / Ubuntu 22.04 (Python 3.10, backend + frontend) (push) Failing after 3s
Zulip CI / Ubuntu 24.04 (Python 3.12, backend) (push) Failing after 25s
Zulip CI / Ubuntu 26.04 (Python 3.14, backend) (push) Failing after 25s
Zulip CI / Debian 13 (Python 3.13, backend) (push) Failing after 28s
Zulip production suite / Required jobs (push) Has been cancelled
Zulip CI / Required jobs (push) Has been cancelled
API Documentation Update Check / check-feature-level-updated (push) Has been cancelled
API Documentation Update Check / notify-if-api-docs-changed (push) Has been cancelled
3547 lines
68 KiB
CSS
3547 lines
68 KiB
CSS
/*
|
|
This file began its life as the combination of:
|
|
- legacy_portico.css
|
|
- legacy_landing_page.css
|
|
Some styles will be edited in place; others
|
|
are destined to be drastically rewritten or
|
|
removed entirely. There is a lot of dead code
|
|
in this file.
|
|
*/
|
|
|
|
/* BEGIN legacy_portico.css */
|
|
|
|
:root {
|
|
--color-background-modal: hsl(0deg 0% 98%);
|
|
/*
|
|
It is fine if footer is longer than that
|
|
since we are only trying to avoid overlap.
|
|
*/
|
|
--height-footer: 495px;
|
|
--padded-content-padding: 50px;
|
|
}
|
|
|
|
[data-tippy-root] .tippy-box .tippy-content {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
body {
|
|
font-family: "Source Sans 3 VF", sans-serif;
|
|
height: 100%;
|
|
font-weight: 300;
|
|
font-size: 17px;
|
|
margin: 0;
|
|
line-height: normal;
|
|
max-width: 100vw;
|
|
|
|
background-color: var(--color-background-marketing-page);
|
|
color: var(--color-text-marketing-page);
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.noscroll {
|
|
overflow: hidden;
|
|
position: fixed;
|
|
}
|
|
|
|
.digest-address-link {
|
|
margin-top: 10px;
|
|
color: hsl(0deg 0% 60%);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.normal {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.navbar {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.navbar.footer .nav {
|
|
> li {
|
|
line-height: 56px;
|
|
|
|
> a {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.push {
|
|
height: 56px;
|
|
}
|
|
|
|
/* The API tabbed content tends to have a lot of code blocks,
|
|
which look nicer against a different background */
|
|
.api-center .tabbed-section {
|
|
.blocks {
|
|
background-color: hsl(0deg 0% 98%);
|
|
}
|
|
|
|
& ul.nav {
|
|
& li.active {
|
|
background-color: hsl(0deg 0% 98%);
|
|
border-bottom: 1px solid hsl(0deg 0% 98%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.digest-container {
|
|
padding-top: 100px;
|
|
}
|
|
|
|
.digest-email-container {
|
|
display: block;
|
|
margin: 0 auto !important;
|
|
max-width: 700px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.digest-email-html {
|
|
padding: 20px;
|
|
background-color: hsl(0deg 0% 100%);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.app.help {
|
|
display: inline-flex;
|
|
|
|
box-shadow: 0 -20px 50px hsl(0deg 0% 0% / 4%);
|
|
|
|
color: hsl(0deg 0% 27%);
|
|
|
|
.hamburger {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.help-center ol,
|
|
.portico-landing.integrations ol {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.title {
|
|
font-family: Helvetica, sans-serif;
|
|
font-size: 100px;
|
|
font-weight: bold;
|
|
margin-top: 50px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.digest-page-title {
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.lead {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pitch {
|
|
width: 600px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.help-inline {
|
|
font-weight: 400;
|
|
font-size: 0.9rem;
|
|
|
|
&.text-error {
|
|
color: hsl(1.1deg 44.7% 50.4%);
|
|
}
|
|
}
|
|
|
|
a.title {
|
|
color: hsl(0deg 0% 0%);
|
|
|
|
&:hover {
|
|
color: hsl(0deg 0% 50%);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.fakecontrol {
|
|
padding-top: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
img.screenshot {
|
|
/* This makes it so screenshots are still shown
|
|
even if they are larger than their span. */
|
|
max-width: 100%;
|
|
}
|
|
|
|
#pw_strength {
|
|
/* Same width as a Bootstrap default text <input> with padding */
|
|
width: 220px;
|
|
height: 8px;
|
|
}
|
|
|
|
#registration #pw_strength {
|
|
width: 325px;
|
|
margin: 7px auto 0;
|
|
}
|
|
|
|
.def::before {
|
|
content: " - ";
|
|
}
|
|
|
|
.platform-icon {
|
|
width: 33%;
|
|
}
|
|
|
|
label.text-error {
|
|
display: inline;
|
|
|
|
padding-left: 5px;
|
|
}
|
|
|
|
input.text-error {
|
|
border-color: hsl(0deg 100% 50%);
|
|
outline-color: hsl(0deg 100% 50%);
|
|
}
|
|
|
|
.portico-container {
|
|
position: relative;
|
|
/* To adjust for flexible footer height we do 2 things:
|
|
- Make the `portico-container` expand to full page height.
|
|
- Fill the empty space with `portico-wrap`. */
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.portico-wrap {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.if-zulip-electron {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* detect if the platform is `ZulipDesktop` and if so, hide this tag! */
|
|
.portico-container[data-platform="ZulipElectron"] .if-zulip-electron {
|
|
display: block;
|
|
}
|
|
|
|
.app {
|
|
width: 100%;
|
|
z-index: 99;
|
|
}
|
|
|
|
.table.table-striped {
|
|
background-color: hsl(0deg 0% 100%);
|
|
box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
|
|
|
|
border-collapse: collapse;
|
|
margin-bottom: 20px;
|
|
|
|
thead tr:first-child th {
|
|
border-top: 0;
|
|
}
|
|
|
|
& th,
|
|
td {
|
|
padding: 8px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
border-top: 1px solid hsl(0deg 0% 87%);
|
|
}
|
|
|
|
tbody > tr:nth-child(odd) > td {
|
|
background-color: hsl(0deg 0% 98%);
|
|
}
|
|
}
|
|
|
|
.team-profiles {
|
|
/* Compensate for gutter width */
|
|
margin: -10px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.team {
|
|
.profile {
|
|
.profile-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.profile-role {
|
|
opacity: 0.5;
|
|
text-transform: uppercase;
|
|
font-size: 0.8em;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.bdfl {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
.profile-picture {
|
|
flex: 0 auto;
|
|
width: 200px;
|
|
margin: 10px;
|
|
|
|
> img {
|
|
height: auto;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
.profile-information {
|
|
flex: 1;
|
|
/* Wrap when screen is small to prevent very short line */
|
|
min-width: 300px;
|
|
font-size: 1.4em;
|
|
margin: 10px 10px 0;
|
|
}
|
|
|
|
.profile-description {
|
|
margin-top: 5px;
|
|
font-weight: 400;
|
|
font-size: 0.8em;
|
|
opacity: 0.8;
|
|
|
|
& p {
|
|
/* Avoid double-applying the 1.2em font-size here */
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
& input {
|
|
display: none;
|
|
|
|
&:checked + label {
|
|
border: 1px solid hsl(0deg 0% 93%);
|
|
border-top: 2px solid var(--color-prominent-border);
|
|
border-bottom-color: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
& label {
|
|
font-size: initial;
|
|
display: inline-block;
|
|
padding: 10px;
|
|
border: 1px solid transparent;
|
|
margin: 0 0 -1px;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contributors-list {
|
|
margin-left: -40px;
|
|
width: calc(100% + 80px);
|
|
}
|
|
|
|
.contributors {
|
|
display: none;
|
|
|
|
.person {
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
border: 1px solid hsl(0deg 0% 93%);
|
|
border-radius: 4px;
|
|
transition: border-color 0.3s ease;
|
|
|
|
& a {
|
|
color: inherit;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: hsl(0deg 0% 73%);
|
|
}
|
|
|
|
.avatar {
|
|
width: 60px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.info {
|
|
width: 50%;
|
|
text-align: left;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Activated .contributors */
|
|
input#total:checked ~ #tab-total,
|
|
input#server:checked ~ #tab-server,
|
|
input#desktop:checked ~ #tab-desktop,
|
|
input#mobile:checked ~ #tab-mobile,
|
|
input#api-clients:checked ~ #tab-api-clients,
|
|
input#devtools:checked ~ #tab-devtools,
|
|
input#terminal:checked ~ #tab-terminal {
|
|
display: block;
|
|
|
|
.contributors-grid {
|
|
padding-top: 5px;
|
|
display: grid;
|
|
gap: 5px;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
}
|
|
}
|
|
|
|
.avatar_img {
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 80%;
|
|
max-height: 80%;
|
|
border-radius: 20%;
|
|
}
|
|
|
|
.tab-loading,
|
|
.last-updated {
|
|
color: hsl(0deg 0% 67%);
|
|
font-size: 0.9em !important;
|
|
padding-top: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.history .sponsors {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
.sponsor-picture img {
|
|
height: 170px;
|
|
margin: 0 20px;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.register-form {
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.register-button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.login-form {
|
|
margin: auto;
|
|
/* plus input padding. */
|
|
width: calc(300px - -28px);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.login-form,
|
|
.register-form {
|
|
.controls {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.login-social {
|
|
max-width: 100%;
|
|
min-width: 300px;
|
|
margin: auto;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.hello-main {
|
|
max-width: none;
|
|
min-width: 0;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.top-links {
|
|
text-align: right;
|
|
|
|
& a {
|
|
display: inline-block;
|
|
color: hsl(0deg 0% 100%);
|
|
padding: 2px 7px 1px 8px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
transition: 0.2s ease-in;
|
|
transition-property: background-color, color;
|
|
border-radius: 4px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: hsl(0deg 0% 100%);
|
|
color: hsl(170deg 50% 40%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.centered-button {
|
|
text-align: center;
|
|
}
|
|
|
|
.input-group {
|
|
.progress {
|
|
margin: 0;
|
|
margin-top: 5px;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* --- new settings styling --- */
|
|
& input[type="radio"],
|
|
input[type="checkbox"] {
|
|
margin: 0 10px 0 0;
|
|
}
|
|
|
|
& input[type="radio"] {
|
|
position: relative;
|
|
top: 8px;
|
|
}
|
|
|
|
& label {
|
|
margin: 0;
|
|
padding: 5px 0;
|
|
|
|
&.inline-block {
|
|
/* eyeballing off-centered aesth. */
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
|
|
&.radio {
|
|
margin-left: 25px;
|
|
}
|
|
|
|
&.grid {
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid hsl(0deg 0% 87%);
|
|
|
|
& label.inline-block {
|
|
width: 200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.center-container {
|
|
min-height: calc(100vh - 94px);
|
|
min-height: 700px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
#registration-email {
|
|
margin-bottom: 18px;
|
|
|
|
& label {
|
|
float: left;
|
|
width: 100%;
|
|
display: block;
|
|
margin-left: 2px;
|
|
margin-bottom: 0;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.controls {
|
|
padding-top: 25px;
|
|
margin: 2px;
|
|
}
|
|
}
|
|
|
|
.center-block {
|
|
text-align: left;
|
|
display: inline-block;
|
|
|
|
.pitch {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.controls {
|
|
margin: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
#send_confirm input[type="text"] {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.button {
|
|
margin-top: 20px;
|
|
padding: 5px 10px;
|
|
border-radius: 2px;
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
#config_error_page {
|
|
.pitch {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.white-box {
|
|
max-width: 600px;
|
|
}
|
|
}
|
|
|
|
.error_page {
|
|
min-height: calc(100vh - var(--height-footer));
|
|
padding: 20px 10px 50px;
|
|
height: 100%;
|
|
background-color: hsl(163deg 42% 85%);
|
|
font-family: "Source Sans 3 VF", sans-serif;
|
|
}
|
|
|
|
.error_page img {
|
|
display: block;
|
|
clear: right;
|
|
margin: 0 auto;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
}
|
|
|
|
.error_page .errorbox {
|
|
margin: auto;
|
|
border: 2px solid hsl(163deg 43% 46%);
|
|
max-width: 500px;
|
|
background-color: hsl(0deg 0% 100%);
|
|
box-shadow: 0 0 4px hsl(163deg 43% 46%);
|
|
font-size: 18px;
|
|
|
|
&.config-error {
|
|
max-width: 750px;
|
|
}
|
|
}
|
|
|
|
.error_page p {
|
|
color: hsl(0deg 0% 20%);
|
|
}
|
|
|
|
.error_page .errorcontent {
|
|
text-align: left;
|
|
padding: 40px 40px 30px;
|
|
}
|
|
|
|
.error_page .lead {
|
|
color: hsl(163deg 49% 44%);
|
|
font-size: 35px;
|
|
margin-bottom: 20px;
|
|
line-height: normal;
|
|
}
|
|
|
|
.hourglass-img {
|
|
width: initial !important;
|
|
margin-bottom: 25px !important;
|
|
}
|
|
|
|
#skip-navigation {
|
|
background-color: hsl(170deg 47% 33%);
|
|
color: hsl(0deg 0% 100%);
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
left: 330px;
|
|
outline: none;
|
|
padding: 5px 12px;
|
|
position: absolute;
|
|
top: -1000px;
|
|
z-index: 100;
|
|
}
|
|
|
|
#skip-navigation:focus-visible {
|
|
text-underline-offset: 2px;
|
|
top: 25px;
|
|
}
|
|
|
|
@media (width <= 800px) {
|
|
.app.help {
|
|
.markdown {
|
|
width: 100vw;
|
|
margin-left: 0;
|
|
|
|
.content {
|
|
max-width: none;
|
|
margin-left: 50px;
|
|
}
|
|
}
|
|
|
|
.hamburger {
|
|
display: block;
|
|
position: fixed;
|
|
top: 70px;
|
|
right: calc(100% - 40px);
|
|
fill: hsl(0deg 0% 100%);
|
|
z-index: 2;
|
|
transition: 0.3s ease;
|
|
transition-property:
|
|
right, top; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 59px;
|
|
right: calc(100% - 50px);
|
|
width: 100%;
|
|
min-width: unset;
|
|
height: calc(100vh - 59px);
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
transform: translateX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.sidebar.show {
|
|
pointer-events: initial;
|
|
transform: translateX(calc(100% - 50px));
|
|
overflow: auto;
|
|
|
|
.content {
|
|
visibility: visible;
|
|
}
|
|
|
|
+ .hamburger {
|
|
right: 12px;
|
|
}
|
|
|
|
~ .markdown {
|
|
filter: brightness(0.7);
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-main {
|
|
min-width: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.help .sidebar {
|
|
.content:not(.show) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:not(.show) a.highlighted {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
#skip-navigation {
|
|
left: 80px;
|
|
}
|
|
|
|
#skip-navigation:focus-visible {
|
|
top: 30px;
|
|
}
|
|
}
|
|
|
|
@media (width <= 767px) {
|
|
body {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.input-large {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
min-height: 30px !important;
|
|
margin: 0 !important;
|
|
padding: 4px 6px !important;
|
|
line-height: 20px !important;
|
|
box-sizing: border-box !important;
|
|
margin-top: 10px !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.line-break-desktop {
|
|
display: none;
|
|
}
|
|
|
|
.contributors-list {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (width <= 558px) {
|
|
.team {
|
|
.bdfl {
|
|
.profile-name,
|
|
.profile-role {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-links .find-accounts-link {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width <= 500px) {
|
|
.app.help {
|
|
.sidebar {
|
|
top: 39px;
|
|
height: calc(100vh - 39px);
|
|
}
|
|
|
|
.hamburger {
|
|
top: 50px;
|
|
}
|
|
}
|
|
|
|
.help .markdown {
|
|
height: calc(100vh - 39px);
|
|
}
|
|
|
|
.error_page .lead {
|
|
font-size: 1.5em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.brand.logo .light {
|
|
display: none;
|
|
}
|
|
|
|
.center-container {
|
|
display: block;
|
|
}
|
|
|
|
#skip-navigation {
|
|
left: 60px;
|
|
}
|
|
|
|
#skip-navigation:focus-visible {
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
.emoji {
|
|
height: 25px;
|
|
width: 25px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
label.label-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.inline-block {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
.documentation-footer {
|
|
font-size: 0.85rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.portico-page.error {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.portico-page.error .portico-page-container {
|
|
padding: 0;
|
|
}
|
|
|
|
#third-party-apps {
|
|
margin-top: 20px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.api-argument {
|
|
.api-argument-name {
|
|
font-family: "Source Code Pro", monospace;
|
|
|
|
.api-argument-hover-link i.fa {
|
|
opacity: 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
&:hover .api-argument-hover-link i.fa {
|
|
opacity: 1;
|
|
color: hsl(0deg 0% 0%);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.api-field-type {
|
|
text-transform: lowercase;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.api-argument-example-label {
|
|
font-style: italic;
|
|
}
|
|
|
|
.api-argument-required {
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
color: hsl(14deg 75% 60%);
|
|
}
|
|
|
|
.api-argument-optional {
|
|
text-transform: uppercase;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: hsl(0deg 0% 47%);
|
|
}
|
|
|
|
.api-argument-deprecated {
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
color: hsl(0deg 50% 60%);
|
|
}
|
|
}
|
|
|
|
.api-field-type {
|
|
color: hsl(176deg 46.4% 41%);
|
|
}
|
|
|
|
.api-event-header {
|
|
.api-event-name {
|
|
color: hsl(14deg 75% 60%);
|
|
font-size: 1.1rem;
|
|
|
|
.api-event-op {
|
|
color: hsl(14deg 60% 60%);
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.api-events-table {
|
|
column-count: 3;
|
|
column-gap: 10px;
|
|
margin: 15px 0 0 10px;
|
|
|
|
.api-event-type,
|
|
.api-event-link {
|
|
line-height: 100%;
|
|
font-weight: 600;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.api-event-ops {
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
|
|
@media (width <= 1000px) {
|
|
.api-events-table {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
@media (width <= 500px) {
|
|
.api-events-table {
|
|
column-count: 1;
|
|
}
|
|
}
|
|
|
|
.desktop-redirect-box {
|
|
text-align: center;
|
|
|
|
.copy-token-info {
|
|
font-weight: normal;
|
|
}
|
|
|
|
#desktop-data {
|
|
padding: 13px 12px 12px;
|
|
font-family: "Source Code Pro", monospace;
|
|
}
|
|
}
|
|
|
|
.desktop-redirect-image {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.text-image-in-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.text-image-in-row-image {
|
|
width: 300px;
|
|
height: auto;
|
|
}
|
|
|
|
.text-image-in-row-text {
|
|
align-content: center;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.windborne-alaska-image {
|
|
width: 255px;
|
|
}
|
|
|
|
@media (width <= 700px) {
|
|
flex-wrap: wrap;
|
|
|
|
.text-image-in-row-image {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.text-image-in-row-text {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.markdown-image-caption {
|
|
opacity: 0.8;
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
|
|
.markdown-image-with-caption {
|
|
margin: 0;
|
|
}
|
|
|
|
/* BEGIN legacy_landing_page.css */
|
|
|
|
/* -- 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;
|
|
/* Unordered lists relied on this bit of Bootstrap
|
|
reset, so we re-introduce it here to avoid
|
|
indenting vanilla and other bulleted lists. */
|
|
padding-left: 0;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
/* -- component styling -- */
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* This is the button component used in `pricing_plans.css`. */
|
|
.button {
|
|
display: block;
|
|
font-family: var(--font-ss3);
|
|
font-weight: 550;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
letter-spacing: 0.06ch;
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
/* Position relatively for discount tab */
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* This matches the upgrade-button style from
|
|
pricing_plans.css.
|
|
TODO: Create variables for all of these colors.
|
|
TODO: Better name `register-buttons` and related classes. */
|
|
.hero-buttons .button,
|
|
.register-buttons .button,
|
|
.feature-pricing .button {
|
|
color: hsl(0deg 0% 100%);
|
|
background-color: hsl(219deg 62% 54%);
|
|
/* Legacy margin value. */
|
|
margin: 10px;
|
|
font-weight: 500 !important;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: hsl(0deg 0% 100%);
|
|
background-color: hsl(219deg 62% 50%);
|
|
}
|
|
}
|
|
|
|
/* Buttons in the hero area appear lighter than their
|
|
content-area counterparts (e.g., the .register-buttons),
|
|
so we tune them a bit darker to appear uniform.
|
|
TODO: As above, create variables for these colors. */
|
|
.hero-buttons .button {
|
|
background-color: hsl(219deg 56% 41%);
|
|
|
|
&:hover {
|
|
background-color: hsl(219deg 56% 37%);
|
|
}
|
|
}
|
|
|
|
.desktop-download-link.button {
|
|
color: hsl(219deg 62% 54%);
|
|
background-color: hsl(0deg 0% 100%);
|
|
/* Legacy margin value. */
|
|
margin: 10px;
|
|
font-weight: 500 !important;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: hsl(219deg 62% 50%);
|
|
background-color: var(--color-background-box);
|
|
}
|
|
}
|
|
|
|
/* -- main panel styling -- */
|
|
.main {
|
|
width: calc(100% - 200px - 20px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* -- modify legacy_portico.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;
|
|
}
|
|
|
|
a:not(.button) {
|
|
color: var(--color-link);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-link-underline);
|
|
/* 2px at 17px/1em draws the underline in a pleasing way
|
|
with descenders like `g`. This value translates well
|
|
for hero-area links, too. */
|
|
text-underline-offset: 0.1176em;
|
|
/* TODO: Adjust this in the portico markdown.css file,
|
|
and strike this line once all the marketing pages
|
|
reflect updated brand colors. */
|
|
font-weight: inherit !important;
|
|
|
|
&:hover {
|
|
color: var(--color-link-hover);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-link-underline-hover);
|
|
}
|
|
}
|
|
|
|
/* Avoid subtle underline artifacts on the icons
|
|
for different platform options on /apps/. */
|
|
a.app-option {
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
/* These are the same link styles as used in pricing_plans.css
|
|
on the .h1-subheader's links. */
|
|
.hero a:not(.button),
|
|
.quote:has(.triangle) a,
|
|
.hero-fine-print a {
|
|
color: var(--color-text-hero);
|
|
text-decoration: underline;
|
|
text-decoration-color: hsl(0deg 0% 100% / 50%);
|
|
transition: text-decoration 0.4s ease-out;
|
|
|
|
&:hover {
|
|
text-decoration-color: hsl(0deg 0% 100%);
|
|
text-decoration-thickness: 2px;
|
|
color: inherit;
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: border-color 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-color: 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: 200px 50px 120px;
|
|
background: var(--color-background-solid-hero);
|
|
|
|
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;
|
|
}
|
|
|
|
.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: background 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;
|
|
}
|
|
|
|
.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: var(--color-background-solid-hero);
|
|
color: var(--color-text-hero);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* We use simple markdown syntax for blockquotes on those marketing
|
|
pages (chiefly case studies), and we style them to look identical
|
|
to the intro quotes. */
|
|
.markdown > blockquote,
|
|
.intro_quote blockquote {
|
|
background-color: var(--color-background-box);
|
|
border-left: 5px solid var(--color-prominent-border);
|
|
padding: 20px 30px;
|
|
margin: 20px 0;
|
|
font-size: 1.05em;
|
|
font-weight: 400;
|
|
|
|
& p {
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
& p:last-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.author {
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
|
|
.portico-landing.why-page .main img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
|
|
.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-pycon.partners {
|
|
background-image: url("../../../static/images/landing-page/hands.jpg");
|
|
}
|
|
|
|
.portico-landing.why-page .bg-pycon.clouds {
|
|
background-image: url("../../images/landing-page/clouds.jpg");
|
|
}
|
|
|
|
.portico-landing.why-page .bg-pycon.programmer {
|
|
background-image: url("../../../static/images/landing-page/engineers/programmer.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 var(--color-prominent-border);
|
|
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;
|
|
|
|
/* TODO: Adjust checkbox-green.svg so we're not tuning colors like this. */
|
|
filter: grayscale(1) 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#for-education-free-price-box {
|
|
.bottom {
|
|
height: 240px;
|
|
|
|
.text-content {
|
|
margin-top: 52px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 h1 {
|
|
font-size: 1.9em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.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-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-intel {
|
|
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-intel {
|
|
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;
|
|
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,
|
|
.message-screenshot {
|
|
& img,
|
|
div.quote {
|
|
width: 400px;
|
|
}
|
|
|
|
@media (width < 1024px) {
|
|
& div.quote {
|
|
width: 300px;
|
|
}
|
|
}
|
|
|
|
@media (width < 768px) {
|
|
& div.quote {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-screenshot {
|
|
position: relative;
|
|
|
|
img {
|
|
display: block;
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
hsl(0deg 0% 0%) 75%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* message-starred is used when the message screenshot captured using
|
|
the script "generate-user-message-screenshot" contains starred message.
|
|
This is done to reduce the fading effect on the image caused by
|
|
".message-screenshot" class so that the star is visible. */
|
|
.message-starred {
|
|
img {
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
hsl(0deg 0% 0%) 95%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
.feature-icon {
|
|
& img,
|
|
div.quote {
|
|
width: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
margin: 10px 20px;
|
|
width: 200px;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.quote {
|
|
background: var(--color-background-box);
|
|
padding: 1em;
|
|
border-radius: 1em;
|
|
font-weight: 400;
|
|
margin: 40px 5px;
|
|
|
|
&:has(.triangle) {
|
|
background: var(--color-background-solid-hero);
|
|
|
|
blockquote {
|
|
background: unset;
|
|
color: var(--color-text-hero);
|
|
padding-left: 10px;
|
|
border-left: 5px solid var(--color-text-hero);
|
|
}
|
|
}
|
|
|
|
.case-study-link {
|
|
/* Keep on own line, and make box-model control possible. */
|
|
display: block;
|
|
padding-top: 20px;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.quote-with-attribution {
|
|
padding: 0 0 0 15px;
|
|
border-left: 5px solid var(--color-prominent-border);
|
|
|
|
.author,
|
|
blockquote {
|
|
margin: 0;
|
|
padding: 5px 20px 20px 10px;
|
|
}
|
|
|
|
.author {
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
& blockquote {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
}
|
|
|
|
& cite {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.quote-in-feature-text blockquote {
|
|
background: transparent;
|
|
padding: 10px 20px;
|
|
margin: 20px 0;
|
|
/* TODO: Make border widths uniform; I think most are 5px. */
|
|
border-left: 6px solid var(--color-prominent-border);
|
|
}
|
|
|
|
.why-page,
|
|
.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-buttons {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.call-to-action-subhead {
|
|
text-align: center;
|
|
}
|
|
|
|
.solutions-page .education-feature-end {
|
|
margin: 0;
|
|
background-color: var(--color-background-solid-hero);
|
|
color: var(--color-text-hero);
|
|
|
|
h1 {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 48px 0 24px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.solutions-page .for-education-pricing-model {
|
|
color: var(--color-text-marketing-page);
|
|
|
|
.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%);
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.self-hosting-page,
|
|
.why-page {
|
|
.hero-buttons {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
.partners-page,
|
|
.self-hosting-page {
|
|
& p {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.alternative-features {
|
|
.feature-container {
|
|
padding: 30px;
|
|
|
|
&:nth-child(even) {
|
|
background: var(--color-background-box);
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
.feature-icon img {
|
|
/* Once Bootstrap is removed, we'll need to keep these
|
|
images displaying as blocks, so that control over
|
|
their height and width remains possible. */
|
|
display: block;
|
|
width: 100%;
|
|
/* This is roughly the visual value of the features
|
|
SVGs in use, prior to their having proper height
|
|
and width attributes. Given their placement in
|
|
the layout, we're generally more concerned about
|
|
keeping their height sensible, rather than their
|
|
width, though the 100% width value maintains the
|
|
correct aspect ratio. */
|
|
max-height: 300px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.quote {
|
|
position: relative;
|
|
margin: 0;
|
|
margin-top: 50px;
|
|
padding: 50px;
|
|
padding-top: 200px;
|
|
border-radius: 0;
|
|
|
|
& 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: var(--color-background-box);
|
|
padding: 50px 0;
|
|
|
|
/* TODO: simplify this markup for better use of grid here. */
|
|
.feature-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
gap: 20px;
|
|
|
|
/* TODO: Define grid areas, etc. to be able to lay out
|
|
intro quotes to the grid as well. */
|
|
&:has(.intro_quote) {
|
|
display: block;
|
|
}
|
|
|
|
.feature-box {
|
|
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%);
|
|
/* TODO: Eliminate this margin and use `gap` with
|
|
a fuller grid in the area. */
|
|
margin: 10px 0;
|
|
padding: 30px;
|
|
border-top: 5px solid var(--color-prominent-border);
|
|
|
|
& h1 {
|
|
font-weight: 600;
|
|
font-size: clamp(24px, 2.5vw, 32px);
|
|
}
|
|
|
|
.feature-icon img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 100px;
|
|
}
|
|
|
|
.feature-text {
|
|
ul {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
ul li {
|
|
line-height: 1.3;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width < 768px) {
|
|
max-width: 90%;
|
|
/* Drop to a single column. */
|
|
grid-template-columns: minmax(0, 1fr);
|
|
/* Drop gap to 0px; margins handle spacing currently.
|
|
TODO: Replace use of margins with gap with a fuller
|
|
grid definition. */
|
|
gap: 0;
|
|
|
|
.feature-box {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* TODO: Specify this height at the grid level
|
|
once there's a more robust grid in the area. */
|
|
.partners-page .feature-grid .feature-row {
|
|
min-height: 200px;
|
|
|
|
.feature-box {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.apps .apps-page-link {
|
|
text-decoration: underline;
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.zulip-cloud-page .hero-description {
|
|
font-size: 1.3em !important;
|
|
|
|
@media (width <= 768px) {
|
|
font-size: 2em !important;
|
|
}
|
|
}
|
|
|
|
.zulip-cloud-page .man-mobile-image {
|
|
width: auto;
|
|
height: 300px;
|
|
}
|
|
|
|
#engineers-love-zulip-page .grey-border {
|
|
border: 1px solid hsl(0deg 0% 80%);
|
|
}
|
|
|
|
#engineers-love-zulip-page .intro_quote blockquote {
|
|
max-width: 750px;
|
|
}
|