From 2ea37a54a64a3f00b7540e65365f3bf9c7f7e74c Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Mon, 4 Dec 2023 14:34:28 -0600 Subject: [PATCH] portico: Update plans tab on other pages. This adds the new tabs from /plans to: * /for/business * /self-hosting And it isolates legacy styles to preserve the tabs on /for/education Fixes: #28013 --- templates/corporate/for/business.html | 9 +- templates/corporate/for/education.html | 2 +- templates/corporate/legacy_pricing_model.html | 173 ----- templates/corporate/pricing_model.html | 2 +- templates/corporate/self-hosting.html | 71 +- web/styles/portico/hello.css | 620 ----------------- web/styles/portico/landing_page.css | 98 +-- web/styles/portico/pricing_plans.css | 638 ++++++++++++++++++ web/webpack.assets.json | 6 +- 9 files changed, 702 insertions(+), 917 deletions(-) delete mode 100644 templates/corporate/legacy_pricing_model.html create mode 100644 web/styles/portico/pricing_plans.css diff --git a/templates/corporate/for/business.html b/templates/corporate/for/business.html index dfc34ca76e..88c7611f62 100644 --- a/templates/corporate/for/business.html +++ b/templates/corporate/for/business.html @@ -566,10 +566,11 @@ - -
- {% include "corporate/legacy_pricing_model.html" %} -
+ +
+ {% include "corporate/pricing_model.html" %} +
+ {% endblock %} diff --git a/templates/corporate/for/education.html b/templates/corporate/for/education.html index 2cd3497c2e..f199fbc6c0 100644 --- a/templates/corporate/for/education.html +++ b/templates/corporate/for/education.html @@ -252,7 +252,7 @@

Zulip Cloud for Education plans

-
+
diff --git a/templates/corporate/legacy_pricing_model.html b/templates/corporate/legacy_pricing_model.html deleted file mode 100644 index 75ac8c0eb7..0000000000 --- a/templates/corporate/legacy_pricing_model.html +++ /dev/null @@ -1,173 +0,0 @@ -
-
-

Get started today.

- -
-
-
- Zulip Cloud -
- -
-
-

Free

-
- Best for light use. -
-
- -
-
-
- {% if not realm or realm.plan_type == realm.PLAN_TYPE_SELF_HOSTED %} -
- Free cloud service -
- - Create organization - - {% elif realm.plan_type == realm.PLAN_TYPE_LIMITED or sponsorship_pending %} -
- - Current plan - - {% endif %} -
-
-
- -
-
-

Standard

-
- Your team's collaboration hub. -
-
-
    -
  • Unlimited search history
    • -
  • File storage up to 10 GB per user
    • -
  • Message retention policies
    • -
  • Brand Zulip with your logo
    • -
  • Priority commercial support
    • -
  • Funds the Zulip open source project
    • -
-
-
-
-
-
6.67
-
- per user per month -
- with annual billing discount -
- $8/month billed monthly -
-
- {% if not realm %} - - {% if free_trial_days %} - Start {{ free_trial_days }} day free trial - {% else %} - Upgrade to Standard - {% endif %} - - {% elif realm.plan_type in [realm.PLAN_TYPE_STANDARD, realm.PLAN_TYPE_STANDARD_FREE] %} - - {% if realm_on_free_trial %} - Current plan (free trial) - {% else %} - Current plan - {% endif %} - - {% elif sponsorship_pending %} - - Sponsorship pending - - {% else %} - - {% if free_trial_days %} - Start {{ free_trial_days }} day free trial - {% else %} - Upgrade to Standard - {% endif %} - - {% endif %} -
-
-
-
- -
-
- Self-host Zulip -
- -
-
-

Free

-
- Retain full control over your data. -
-
- -
-
-
-
- Zulip is 100% free and open - source, with no proprietary version.
-
- - Self-host Zulip - -
-
-
- -
-
-

Enterprise

-
- For mission-critical installations. -
-
-
    -
  • All Free features included
    • -
  • Professional support with SLAs
    • -
  • High availability
    • -
  • Incident collaboration
    • -
  • Advanced compliance
    • -
  • Funds the Zulip open source project
    • -
-
-
-
-
- Affordable pricing depends on support required. -
- - Contact sales - -
-
-
-
-
-
-
diff --git a/templates/corporate/pricing_model.html b/templates/corporate/pricing_model.html index 015c6d16c9..55830dca7e 100644 --- a/templates/corporate/pricing_model.html +++ b/templates/corporate/pricing_model.html @@ -1,4 +1,4 @@ -
+

Zulip plans and pricing

diff --git a/templates/corporate/self-hosting.html b/templates/corporate/self-hosting.html index 4463c2bdf5..2a43cb47d7 100644 --- a/templates/corporate/self-hosting.html +++ b/templates/corporate/self-hosting.html @@ -271,77 +271,10 @@
- -
-
-

Self-hosting plans

-
-
-
-
-
-

Free

-
- Retain full control over your data. -
-
- -
-
-
-
- Zulip is 100% free and open - source, with no proprietary version.
-
- - Install a Zulip server - -
-
-
- -
-
-

Enterprise

-
- For mission-critical installations. -
-
-
    -
  • All self service features included
    • -
  • Professional support with SLAs
    • -
  • High availability
    • -
  • Incident collaboration
    • -
  • Advanced compliance
    • -
  • Funds the Zulip open source project
    • -
-
-
-
-
- Affordable pricing depends on support required. -
- - Contact sales - -
-
-
-
-
-
-
+
+ {% include "corporate/pricing_model.html" %}
-
{% endblock %} diff --git a/web/styles/portico/hello.css b/web/styles/portico/hello.css index 3e3df22a8b..e7e1ea797f 100644 --- a/web/styles/portico/hello.css +++ b/web/styles/portico/hello.css @@ -1063,623 +1063,3 @@ ul { } } } - -.portico-pricing { - --color-background-box: hsla(210deg 44% 92%); - --color-background-box-muted: hsl(0deg 0% 100% / 50%); - --color-plan-tab-header: hsl(223deg 40% 30%); - --color-plan-tab-copy: hsl(223deg 40% 25% / 70%); - --color-box-header: hsl(223deg 43% 25%); - --color-box-copy: hsl(223deg 43% 25%); - --color-link: hsl(210deg 94% 42%); - --color-link-hover: hsl(210deg 100% 50%); - --color-link-underline: hsl(210deg 94% 42% / 30%); - --color-link-underline-hover: hsl(210deg 100% 50%); - --color-link-underline-alternate: hsl(210deg 94% 100% / 40%); - --color-link-underline-alternate-hover: hsla(210deg 94% 100% / 80%); - --icon-left-outward-tab-curve: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M0 16h16V0c0 8.837-7.163 16-16 16Z'/%3e%3c/svg%3e"); - --icon-right-outward-tab-curve: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M16 16H0V0c0 8.837 7.163 16 16 16Z'/%3e%3c/svg%3e"); - --icon-question-header-swoosh: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='33' height='56' fill='none' viewBox='0 0 33 56'%3e%3cpath fill='%23E2EBF4' d='M33 37 1 56C1 35-3.5 0 33 0 7.5 3 7.776 37 33 37Z'/%3e%3c/svg%3e"); - --icon-current-plan-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3e%3cg fill='%230F8544'%3e%3cpath d='M14.396 9.813a.914.914 0 1 0-1.293-1.293l-3.02 3.02-1.186-1.186a.914.914 0 1 0-1.294 1.293l1.834 1.833a.914.914 0 0 0 1.293 0l3.666-3.667Z'/%3e%3cpath fill-rule='evenodd' d='M11 .923a4.58 4.58 0 0 0-3.495 1.62 4.581 4.581 0 0 0-4.961 4.949 4.58 4.58 0 0 0 0 7.016 4.58 4.58 0 0 0 4.96 4.949 4.583 4.583 0 0 0 7.003-.001 4.582 4.582 0 0 0 4.95-4.96 4.583 4.583 0 0 0 0-6.991 4.58 4.58 0 0 0-4.962-4.962A4.581 4.581 0 0 0 11 .923ZM9.678 3.09a2.752 2.752 0 0 1 3.64.932.914.914 0 0 0 .972.4 2.752 2.752 0 0 1 3.289 3.288.914.914 0 0 0 .4.971 2.753 2.753 0 0 1 0 4.638.914.914 0 0 0-.4.97 2.752 2.752 0 0 1-3.283 3.29.914.914 0 0 0-.97.401 2.75 2.75 0 0 1-4.644 0 .914.914 0 0 0-.971-.401 2.752 2.752 0 0 1-3.29-3.283.914.914 0 0 0-.403-.97 2.753 2.753 0 0 1 0-4.652.914.914 0 0 0 .404-.97A2.752 2.752 0 0 1 7.71 4.42a.914.914 0 0 0 .97-.4c.25-.389.592-.709.997-.93Z' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); - - padding: 102px 0 58px; - background: linear-gradient( - 180deg, - hsl(209deg 40% 50) 0%, - hsl(210deg 48% 69%) 100% - ); - - @media (prefers-color-scheme: dark) { - background: linear-gradient( - 180deg, - hsl(209deg 63% 40%) 30%, - hsl(238deg 28% 50%) 100% - ); - } - - h1 { - font-weight: 500; - font-size: 58px; - line-height: 110%; - text-align: center; - margin: 10px; - } - - .h1-subheader { - font-family: var(--font-ops); - font-weight: 400; - font-size: 20px; - line-height: 145%; - text-align: center; - font-feature-settings: - "pnum" on, - "lnum" on; - color: hsl(0deg 0% 100%); - max-width: 560px; - padding: 0 10px; - margin: 0 auto; - - & a { - color: inherit; - text-decoration: none; - border-bottom: 1px solid hsl(0deg 0% 100% / 50%); - transition: border 0.4s ease-out; - - &:hover { - color: inherit; - border-bottom: 2px solid hsl(0deg 0% 100%); - transition: none; - } - } - } - - li { - list-style-type: none; - display: flex; - align-items: flex-start; - /* Prevent flexbox from collapsing - whitespace around links and other - inline elements. */ - gap: 0.3em; - - &::before { - content: ""; - height: 6px; - width: 6px; - border-radius: 16px; - /* 0.5333em, roughly 8px given the - 15px font-size on list items, will - keep the bullet vertically centered - with the first line of a list item - as the page's text scales. */ - margin: 0.5333em 4px 0 0; - /* Prevent "bullets" from being distorted - on a multiline bullet point. */ - flex: 0 0 auto; - background: currentcolor; - opacity: 0.3; - } - } - - a { - color: var(--color-link); - text-decoration: underline; - text-decoration-color: var(--color-link-underline); - text-underline-offset: 4px; - - &:hover { - color: var(--color-link-hover); - text-decoration-color: var(--color-link-underline-hover); - } - } - - .pricing-container { - display: grid; - grid-template: - ". . cloud-title self-hosted-title . . " auto - "pricing pricing pricing pricing pricing pricing" auto / 56px 1fr minmax( - 0, - 420px - ) - minmax(0, 420px) 1fr 56px; - column-gap: 2px; - margin: 50px auto 38px; - - @media screen and (width <= 700px) { - grid-template-columns: - 40px 1fr minmax(0, 420px) - minmax(0, 420px) 1fr 40px; - } - } - - .pricing-pane-scroll-container { - grid-area: pricing; - overflow-x: auto; - scrollbar-width: none; - } - - .cloud-plan-title { - grid-area: cloud-title; - } - - .cloud-plan-pricing { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - grid-template-rows: auto; - } - - .self-hosted-plan-title { - grid-area: self-hosted-title; - } - - .self-hosted-plan-pricing { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - grid-template-rows: auto; - } - - .pricing-tab { - cursor: pointer; - background: var(--color-background-box); - padding: 12px 12px 0; - border-radius: 16px 16px 0 0; - min-height: 40px; - - h2 { - color: var(--color-plan-tab-header); - font-family: var(--font-ops); - font-weight: 550; - font-size: 30px; - line-height: 32px; - margin: 0; - margin-bottom: 8px; - text-align: center; - } - - p { - color: var(--color-plan-tab-copy); - font-weight: 400; - font-size: 16px; - line-height: 125%; - margin: 0; - text-align: center; - padding-bottom: 14px; - - @media screen and (width <= 700px) { - display: none; - } - } - - /* Shared styles to handle tab curvature. */ - &::before { - display: none; - width: 16px; - height: 16px; - content: ""; - position: absolute; - bottom: 0; - left: -16px; - background-color: var(--color-background-box); - mask-position: center; - mask-repeat: no-repeat; - mask-image: var(--icon-left-outward-tab-curve); - } - - &::after { - display: none; - width: 16px; - height: 16px; - content: ""; - position: absolute; - bottom: 0; - right: -16px; - background-color: var(--color-background-box); - mask-position: center; - mask-repeat: no-repeat; - mask-image: var(--icon-right-outward-tab-curve); - } - } - - .pricing-pane { - padding: 20px; - border-radius: 16px; - color: var(--color-box-copy); - background: var(--color-background-box); - min-width: 850px; - margin: 0 16px; - - @media screen and (width <= 700px) { - margin: 0 8px; - } - - h2 { - font-weight: 550; - font-size: 28px; - line-height: 1; - padding-left: 14px; - margin: 8px 0 16px; - } - - ul { - font-family: var(--font-ops); - font-weight: 400; - font-size: 15px; - line-height: 21px; - } - - li { - margin-bottom: 10px; - } - - .price-box { - height: 100%; - display: flex; - flex-direction: column; - border-right: 1px dashed hsl(223deg 40% 25% / 20%); - - &:last-child { - border-right: 0; - } - - .text-content { - margin: 0 auto; - } - } - - .text-content { - padding: 0 16px; - } - - .bottom { - /* Push to the bottom of the price box. */ - margin-top: auto; - } - - .standard-price-box { - display: flex; - align-items: flex-start; - gap: 4px; - min-height: 56px; - margin-top: 24px; - - .price { - font-size: 38px; - line-height: 1; - letter-spacing: -1px; - } - - .currency-symbol { - opacity: 0.5; - } - - .details p { - margin: 2px 0 0; - line-height: 17px; - } - } - } - - .additional-pricing-information { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - grid-template-rows: auto; - column-gap: 32px; - max-width: 912px; - margin: 0 auto; - - @media screen and (width <= 810px) { - grid-template-columns: minmax(0, 456px); - justify-content: center; - row-gap: 32px; - } - - header { - position: relative; - padding: 0 16px 0 32px; - - &::before { - display: block; - content: ""; - width: 32px; - height: 56px; - position: absolute; - background-color: hsla(210deg 44% 92%); - top: 30px; - left: -0.5px; - mask-position: center; - mask-repeat: no-repeat; - mask-image: var(--icon-question-header-swoosh); - } - - h2 { - font-family: var(--font-ops); - font-weight: 500; - font-size: 30px; - line-height: 38px; - margin: 0; - } - - p { - font-weight: 400; - font-size: 16px; - margin: 0; - margin-bottom: 6px; - } - - a { - color: inherit; - text-decoration-color: var(--color-link-underline-alternate); - - &:hover { - text-decoration-color: var( - --color-link-underline-alternate-hover - ); - } - } - } - - .text-content { - color: var(--color-box-copy); - background: var(--color-background-box); - padding: 20px 32px; - border-radius: 16px; - } - - h3 { - margin: 0 0 6px; - font-weight: 500; - font-size: 22px; - line-height: 28px; - } - - ul { - margin-bottom: 12px; - } - - li { - font-size: 15px; - margin-bottom: 4px; - } - - p { - margin: 0; - } - - .sponsorship-button { - display: block; - font-weight: 550; - font-size: 15px; - line-height: 20px; - text-align: center; - padding: 8px 10px; - margin-bottom: 6px; - } - - .contact-note { - font-weight: 400; - font-size: 14px; - } - } - - @media screen and (width <= 500px) { - .additional-pricing-information { - margin: 0 8px; - - header { - padding-bottom: 29px; - } - - p { - display: none; - } - } - } - - .button { - display: block; - font-family: var(--font-ss3); - font-weight: 550; - font-size: 15px; - text-align: center; - text-decoration: none; - letter-spacing: 0.06ch; - padding: 8px 10px; - border-radius: 4px; - } - - .get-started-button { - color: hsl(0deg 0% 100%); - background-color: hsl(146deg 92% 26%); - - &:hover { - color: hsl(0deg 0% 100%); - background-color: hsl(146deg 92% 24%); - } - } - - .upgrade-button { - color: hsl(0deg 0% 100%); - background-color: hsl(219deg 62% 54%); - - &:hover { - color: hsl(0deg 0% 100%); - background-color: hsl(219deg 62% 50%); - } - } - - .current-plan-button { - display: flex; - align-items: center; - justify-content: center; - gap: 0.5ch; - color: hsl(147deg 57% 25%); - - &:hover { - color: hsl(147deg 57% 25%); - background-color: hsl(152deg 79% 24% / 14%); - } - - .current-plan-icon { - width: 22px; - height: 22px; - display: block; - background-color: currentcolor; - mask-position: center; - mask-repeat: no-repeat; - mask-image: var(--icon-current-plan-icon); - } - } - - .sponsorship-button { - color: hsl(147deg 57% 25%); - background-color: hsl(152deg 79% 24% / 10%); - - &:hover { - color: hsl(147deg 57% 25%); - background-color: hsla(146deg 92% 24% / 15%); - } - } - - &.showing-cloud { - .pricing-container { - max-width: 1100px; - } - - .self-hosted-scroll, - .self-hosted-plan-pricing, - .self-hosted-additional-pricing { - display: none; - } - - .cloud-plan-title { - position: relative; - - /* Show curvature on cloud tab. */ - &::before { - display: block; - } - - &::after { - display: block; - } - - p { - border-bottom: 1px dashed hsl(223deg 40% 25% / 20%); - margin: 0 10px; - } - - @media screen and (width <= 700px) { - h2 { - border-bottom: 1px dashed hsl(223deg 40% 25% / 20%); - height: 100%; - margin: 0 10px; - } - } - - @media screen and (width <= 500px) { - h2 { - margin: 0; - } - } - } - - .self-hosted-plan-title { - border-radius: 16px 16px 0 14px; - margin-bottom: 2px; - background-color: var(--color-background-box-muted); - } - } - - &.showing-self-hosted { - .pricing-container { - max-width: 960px; - } - - .cloud-scroll, - .cloud-plan-pricing, - .cloud-additional-pricing { - display: none; - } - - .cloud-plan-title { - border-radius: 16px 16px 14px 0; - margin-bottom: 2px; - background-color: var(--color-background-box-muted); - } - - .self-hosted-plan-title { - position: relative; - - /* Show curvature on self-hosted tab. */ - &::before { - display: block; - } - - &::after { - display: block; - } - - p { - border-bottom: 1px dashed hsl(223deg 40% 25% / 20%); - margin: 0 10px; - } - - @media screen and (width <= 700px) { - h2 { - border-bottom: 1px dashed hsl(223deg 40% 25% / 20%); - height: 100%; - margin: 0 10px; - } - } - - @media screen and (width <= 500px) { - h2 { - margin: 0; - } - } - } - - .price-box { - .text-content { - max-width: 332px; - } - - .bottom .text-content { - max-width: 268px; - } - } - } - - @media screen and (width <= 940px) { - h1 { - font-size: 40px; - } - - .h1-subheader { - font-size: 16px; - } - - .pricing-tab h2 { - font-size: 24px; - line-height: 26px; - margin-bottom: 0; - } - - .pricing-pane h2 { - font-size: 22px; - margin: 4px 0 12px; - } - } - - @media screen and (width <= 900px) { - .additional-pricing-information header h2 { - font-size: 24px; - } - } - - @media screen and (width <= 500px) { - .pricing-tab h2 { - font-size: 20px; - } - } -} diff --git a/web/styles/portico/landing_page.css b/web/styles/portico/landing_page.css index 08eedec1cb..d08a90c339 100644 --- a/web/styles/portico/landing_page.css +++ b/web/styles/portico/landing_page.css @@ -1809,16 +1809,16 @@ button { color: hsl(0deg 0% 100%); } -.pricing-model .pricing-container { +.for-education-pricing-model .pricing-container { text-align: center; } -.pricing-model .pricing-container .block { +.for-education-pricing-model .pricing-container .block { display: inline-block; margin: 40px 20px 20px; } -.pricing-model .pricing-container .block .plan-title { +.for-education-pricing-model .pricing-container .block .plan-title { padding: 10px; margin-bottom: 3px; @@ -1828,33 +1828,15 @@ button { font-weight: 300; } -.pricing-model .pricing-container .price-box { - position: relative; - display: inline-block; - vertical-align: bottom; - margin: 0; - width: 300px; - height: 500px; - - box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%); - - text-align: left; - background-color: hsl(0deg 0% 100%); - - transition-property: all; - transition-duration: 0.3s; - transition-timing-function: ease; -} - -.pricing-model .pricing-container .text-content { +.for-education-pricing-model .pricing-container .text-content { margin: 18px; } -.pricing-model .padded-content .text-header .text-content h1 { +.for-education-pricing-model .padded-content .text-header .text-content h1 { margin-top: 0; } -.pricing-model .pricing-container .text-content h2 { +.for-education-pricing-model .pricing-container .text-content h2 { font-size: 1.5em; font-weight: 400; margin-bottom: 0; @@ -1862,25 +1844,25 @@ button { text-align: left; } -.pricing-model .pricing-container hr { +.for-education-pricing-model .pricing-container hr { border: none; border-bottom: 2px solid hsl(170deg 47% 53%); margin: 15px 0; } -.pricing-model .pricing-container .text-content .description { +.for-education-pricing-model .pricing-container .text-content .description { font-size: 0.9em; font-weight: 400; color: hsl(0deg 0% 53%); } -.pricing-model .pricing-container ul.feature-list { +.for-education-pricing-model .pricing-container ul.feature-list { list-style: none; padding: 0; margin: 0; } -.pricing-model .pricing-container ul.feature-list li { +.for-education-pricing-model .pricing-container ul.feature-list li { position: relative; padding: 10px 0 10px 25px; @@ -1888,7 +1870,7 @@ button { font-weight: 400; } -.pricing-model .pricing-container ul.feature-list li::before { +.for-education-pricing-model .pricing-container ul.feature-list li::before { content: " "; position: absolute; top: 10px; @@ -1904,7 +1886,7 @@ button { filter: invert(0.3); } -.pricing-model .pricing-container .bottom { +.for-education-pricing-model .pricing-container .bottom { position: absolute; bottom: 0; width: 100%; @@ -1913,7 +1895,7 @@ button { background-color: hsl(0deg 0% 93%); } -.pricing-model .pricing-container .text-content .price::before { +.for-education-pricing-model .pricing-container .text-content .price::before { content: "$"; position: relative; vertical-align: top; @@ -1925,7 +1907,7 @@ button { color: hsl(0deg 0% 53%); } -.pricing-model .pricing-container .text-content .price { +.for-education-pricing-model .pricing-container .text-content .price { display: inline-block; margin-right: 2px; @@ -1935,7 +1917,7 @@ button { margin-top: 4px; } -.pricing-model .pricing-container .bottom .details { +.for-education-pricing-model .pricing-container .bottom .details { display: inline-block; vertical-align: top; margin-left: 8px; @@ -1949,7 +1931,7 @@ button { white-space: nowrap; } -.pricing-model .pricing-container .bottom .button { +.for-education-pricing-model .pricing-container .bottom .button { margin-top: 24px; display: block; text-align: center; @@ -1959,16 +1941,19 @@ button { transition: all 0.3s ease; } -.pricing-model .pricing-container .price-box:focus { +.for-education-pricing-model .pricing-container .price-box:focus { outline: none; } -.pricing-model .pricing-container .price-box:focus .button { +.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; } -.pricing-model .pricing-container .text-content .standard-price-box { +.for-education-pricing-model + .pricing-container + .text-content + .standard-price-box { display: flex; height: 55px; @@ -1977,7 +1962,11 @@ button { } } -.pricing-model .pricing-container .text-content .price .price-cents { +.for-education-pricing-model + .pricing-container + .text-content + .price + .price-cents { font-size: 0.4em; vertical-align: top; position: relative; @@ -2090,7 +2079,7 @@ button { } @media (width <= 1376px) { - .portico-landing.plans .price-box { + .portico-landing.plans .for-education-pricing-model .price-box { margin: 20px; } } @@ -2262,7 +2251,8 @@ button { width: 100%; } - .portico-landing.why-page .padded-content { + .portico-landing.why-page .padded-content, + .portico-landing.why-page .for-education-pricing-model .padded-content { padding: 50px 20px; } @@ -2478,7 +2468,7 @@ button { } @media (width <= 450px) { - .portico-landing.plans .price-box { + .portico-landing.plans .for-education-pricing-model .price-box { display: inline-flex; flex-direction: column; min-height: 500px; @@ -2488,11 +2478,11 @@ button { margin: 10px 0; } - .pricing-model .pricing-container .text-content { + .for-education-pricing-model .pricing-container .text-content { flex: 1; } - .pricing-model .pricing-container .bottom { + .for-education-pricing-model .pricing-container .bottom { position: static; height: auto; } @@ -2957,7 +2947,7 @@ button { } } -.solutions-page .pricing-model { +.solutions-page .for-education-pricing-model { .padded-content { padding-bottom: 10px; } @@ -2973,15 +2963,29 @@ button { } } -.for-education.pricing-model { +.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; @@ -3057,7 +3061,7 @@ button { max-width: 800px; } - .pricing-model { + .for-education-pricing-model { @media (width >= 768px) { .price-box { margin: 10px; @@ -3264,7 +3268,7 @@ button { } } - .for-education.pricing-model .pricing-container .price-box { + .for-education-pricing-model .pricing-container .price-box { height: 525px; .bottom { diff --git a/web/styles/portico/pricing_plans.css b/web/styles/portico/pricing_plans.css new file mode 100644 index 0000000000..76c6c30bdf --- /dev/null +++ b/web/styles/portico/pricing_plans.css @@ -0,0 +1,638 @@ +.portico-pricing { + --font-ss3: "Source Sans 3 VF", sans-serif; + --font-ops: "Open Sans Variable", sans-serif; + --color-background-box: hsla(210deg 44% 92%); + --color-background-box-muted: hsl(0deg 0% 100% / 50%); + --color-plan-tab-header: hsl(223deg 40% 30%); + --color-plan-tab-copy: hsl(223deg 40% 25% / 70%); + --color-box-header: hsl(223deg 43% 25%); + --color-box-copy: hsl(223deg 43% 25%); + --color-link: hsl(210deg 94% 42%); + --color-link-hover: hsl(210deg 100% 50%); + --color-link-underline: hsl(210deg 94% 42% / 30%); + --color-link-underline-hover: hsl(210deg 100% 50%); + --color-link-underline-alternate: hsl(210deg 94% 100% / 40%); + --color-link-underline-alternate-hover: hsla(210deg 94% 100% / 80%); + --icon-left-outward-tab-curve: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M0 16h16V0c0 8.837-7.163 16-16 16Z'/%3e%3c/svg%3e"); + --icon-right-outward-tab-curve: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M16 16H0V0c0 8.837 7.163 16 16 16Z'/%3e%3c/svg%3e"); + --icon-question-header-swoosh: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='33' height='56' fill='none' viewBox='0 0 33 56'%3e%3cpath fill='%23E2EBF4' d='M33 37 1 56C1 35-3.5 0 33 0 7.5 3 7.776 37 33 37Z'/%3e%3c/svg%3e"); + --icon-current-plan-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3e%3cg fill='%230F8544'%3e%3cpath d='M14.396 9.813a.914.914 0 1 0-1.293-1.293l-3.02 3.02-1.186-1.186a.914.914 0 1 0-1.294 1.293l1.834 1.833a.914.914 0 0 0 1.293 0l3.666-3.667Z'/%3e%3cpath fill-rule='evenodd' d='M11 .923a4.58 4.58 0 0 0-3.495 1.62 4.581 4.581 0 0 0-4.961 4.949 4.58 4.58 0 0 0 0 7.016 4.58 4.58 0 0 0 4.96 4.949 4.583 4.583 0 0 0 7.003-.001 4.582 4.582 0 0 0 4.95-4.96 4.583 4.583 0 0 0 0-6.991 4.58 4.58 0 0 0-4.962-4.962A4.581 4.581 0 0 0 11 .923ZM9.678 3.09a2.752 2.752 0 0 1 3.64.932.914.914 0 0 0 .972.4 2.752 2.752 0 0 1 3.289 3.288.914.914 0 0 0 .4.971 2.753 2.753 0 0 1 0 4.638.914.914 0 0 0-.4.97 2.752 2.752 0 0 1-3.283 3.29.914.914 0 0 0-.97.401 2.75 2.75 0 0 1-4.644 0 .914.914 0 0 0-.971-.401 2.752 2.752 0 0 1-3.29-3.283.914.914 0 0 0-.403-.97 2.753 2.753 0 0 1 0-4.652.914.914 0 0 0 .404-.97A2.752 2.752 0 0 1 7.71 4.42a.914.914 0 0 0 .97-.4c.25-.389.592-.709.997-.93Z' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); + + padding: 102px 0 58px; + background: linear-gradient( + 180deg, + hsl(209deg 40% 50) 0%, + hsl(210deg 48% 69%) 100% + ); + + @media (prefers-color-scheme: dark) { + background: linear-gradient( + 180deg, + hsl(209deg 63% 40%) 30%, + hsl(238deg 28% 50%) 100% + ); + } + + ul { + padding: 0; + margin: 0; + } + + h1 { + font-weight: 500; + font-size: 58px; + line-height: 110%; + text-align: center; + color: hsl(0deg 0% 100%); + margin: 10px; + } + + .h1-subheader { + font-family: var(--font-ops); + font-weight: 400; + font-size: 20px; + line-height: 145%; + text-align: center; + font-feature-settings: + "pnum" on, + "lnum" on; + color: hsl(0deg 0% 100%); + max-width: 560px; + padding: 0 10px; + margin: 0 auto; + + & a { + color: inherit; + text-decoration: none; + border-bottom: 1px solid hsl(0deg 0% 100% / 50%); + transition: border 0.4s ease-out; + + &:hover { + color: inherit; + border-bottom: 2px solid hsl(0deg 0% 100%); + transition: none; + } + } + } + + li { + list-style-type: none; + display: flex; + align-items: flex-start; + /* Prevent flexbox from collapsing + whitespace around links and other + inline elements. */ + gap: 0.3em; + + &::before { + content: ""; + height: 6px; + width: 6px; + border-radius: 16px; + /* 0.5333em, roughly 8px given the + 15px font-size on list items, will + keep the bullet vertically centered + with the first line of a list item + as the page's text scales. */ + margin: 0.5333em 4px 0 0; + /* Prevent "bullets" from being distorted + on a multiline bullet point. */ + flex: 0 0 auto; + background: currentcolor; + opacity: 0.3; + } + } + + a { + color: var(--color-link); + text-decoration: underline; + text-decoration-color: var(--color-link-underline); + text-underline-offset: 4px; + + &:hover { + color: var(--color-link-hover); + text-decoration-color: var(--color-link-underline-hover); + } + } + + /* Remove padding introduced in landing_page.css */ + .padded-content { + padding: 0; + } + + @media (width <= 768px) { + .pricing-model .padded-content { + padding: 0; + } + } + + .pricing-container { + display: grid; + grid-template: + ". . cloud-title self-hosted-title . . " auto + "pricing pricing pricing pricing pricing pricing" auto / 56px 1fr minmax( + 0, + 420px + ) + minmax(0, 420px) 1fr 56px; + column-gap: 2px; + margin: 50px auto 38px; + + @media screen and (width <= 700px) { + grid-template-columns: + 40px 1fr minmax(0, 420px) + minmax(0, 420px) 1fr 40px; + } + } + + .pricing-pane-scroll-container { + grid-area: pricing; + overflow-x: auto; + scrollbar-width: none; + } + + .cloud-plan-title { + grid-area: cloud-title; + } + + .cloud-plan-pricing { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + grid-template-rows: auto; + } + + .self-hosted-plan-title { + grid-area: self-hosted-title; + } + + .self-hosted-plan-pricing { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + grid-template-rows: auto; + } + + .pricing-tab { + cursor: pointer; + background: var(--color-background-box); + padding: 12px 12px 0; + border-radius: 16px 16px 0 0; + min-height: 40px; + + h2 { + color: var(--color-plan-tab-header); + font-family: var(--font-ops); + font-weight: 550; + font-size: 30px; + line-height: 32px; + margin: 0; + margin-bottom: 8px; + text-align: center; + } + + p { + color: var(--color-plan-tab-copy); + font-weight: 400; + font-size: 16px; + line-height: 125%; + margin: 0; + text-align: center; + padding-bottom: 14px; + + @media screen and (width <= 700px) { + display: none; + } + } + + /* Shared styles to handle tab curvature. */ + &::before { + display: none; + width: 16px; + height: 16px; + content: ""; + position: absolute; + bottom: 0; + left: -16px; + background-color: var(--color-background-box); + mask-position: center; + mask-repeat: no-repeat; + mask-image: var(--icon-left-outward-tab-curve); + } + + &::after { + display: none; + width: 16px; + height: 16px; + content: ""; + position: absolute; + bottom: 0; + right: -16px; + background-color: var(--color-background-box); + mask-position: center; + mask-repeat: no-repeat; + mask-image: var(--icon-right-outward-tab-curve); + } + } + + .pricing-pane { + padding: 20px; + border-radius: 16px; + color: var(--color-box-copy); + background: var(--color-background-box); + min-width: 850px; + margin: 0 16px; + + @media screen and (width <= 700px) { + margin: 0 8px; + } + + h2 { + font-weight: 550; + font-size: 28px; + line-height: 1; + padding-left: 14px; + margin: 8px 0 16px; + } + + ul { + font-family: var(--font-ops); + font-weight: 400; + font-size: 15px; + line-height: 21px; + } + + li { + margin-bottom: 10px; + } + + .price-box { + height: 100%; + display: flex; + flex-direction: column; + border-right: 1px dashed hsl(223deg 40% 25% / 20%); + + &:last-child { + border-right: 0; + } + + .text-content { + margin: 0 auto; + } + } + + .text-content { + padding: 0 16px; + } + + .bottom { + /* Push to the bottom of the price box. */ + margin-top: auto; + } + + .standard-price-box { + display: flex; + align-items: flex-start; + gap: 4px; + min-height: 56px; + margin-top: 24px; + + .price { + font-size: 38px; + line-height: 1; + letter-spacing: -1px; + } + + .currency-symbol { + opacity: 0.5; + } + + .details p { + margin: 2px 0 0; + line-height: 17px; + } + } + } + + .additional-pricing-information { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: auto; + column-gap: 32px; + max-width: 912px; + margin: 0 auto; + + @media screen and (width <= 810px) { + grid-template-columns: minmax(0, 456px); + justify-content: center; + row-gap: 32px; + } + + header { + position: relative; + padding: 0 16px 0 32px; + + &::before { + display: block; + content: ""; + width: 32px; + height: 56px; + position: absolute; + background-color: hsla(210deg 44% 92%); + top: 30px; + left: -0.5px; + mask-position: center; + mask-repeat: no-repeat; + mask-image: var(--icon-question-header-swoosh); + } + + h2 { + font-family: var(--font-ops); + font-weight: 500; + font-size: 30px; + line-height: 38px; + margin: 0; + } + + p { + font-weight: 400; + font-size: 16px; + margin: 0; + margin-bottom: 6px; + } + + a { + color: inherit; + text-decoration-color: var(--color-link-underline-alternate); + + &:hover { + text-decoration-color: var( + --color-link-underline-alternate-hover + ); + } + } + } + + .text-content { + color: var(--color-box-copy); + background: var(--color-background-box); + padding: 20px 32px; + border-radius: 16px; + } + + h3 { + margin: 0 0 6px; + font-weight: 500; + font-size: 22px; + line-height: 28px; + } + + ul { + margin-bottom: 12px; + } + + li { + font-size: 15px; + margin-bottom: 4px; + } + + p { + margin: 0; + } + + .sponsorship-button { + display: block; + font-weight: 550; + font-size: 15px; + line-height: 20px; + text-align: center; + padding: 8px 10px; + margin-bottom: 6px; + } + + .contact-note { + font-weight: 400; + font-size: 14px; + } + } + + @media screen and (width <= 500px) { + .additional-pricing-information { + margin: 0 8px; + + header { + padding-bottom: 29px; + } + + p { + display: none; + } + } + } + + .button { + display: block; + font-family: var(--font-ss3); + font-weight: 550; + font-size: 15px; + text-align: center; + text-decoration: none; + letter-spacing: 0.06ch; + padding: 8px 10px; + border-radius: 4px; + } + + .get-started-button { + color: hsl(0deg 0% 100%); + background-color: hsl(146deg 92% 26%); + + &:hover { + color: hsl(0deg 0% 100%); + background-color: hsl(146deg 92% 24%); + } + } + + .upgrade-button { + color: hsl(0deg 0% 100%); + background-color: hsl(219deg 62% 54%); + + &:hover { + color: hsl(0deg 0% 100%); + background-color: hsl(219deg 62% 50%); + } + } + + .current-plan-button { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5ch; + color: hsl(147deg 57% 25%); + + &:hover { + color: hsl(147deg 57% 25%); + background-color: hsl(152deg 79% 24% / 14%); + } + + .current-plan-icon { + width: 22px; + height: 22px; + display: block; + background-color: currentcolor; + mask-position: center; + mask-repeat: no-repeat; + mask-image: var(--icon-current-plan-icon); + } + } + + .sponsorship-button { + color: hsl(147deg 57% 25%); + background-color: hsl(152deg 79% 24% / 10%); + + &:hover { + color: hsl(147deg 57% 25%); + background-color: hsla(146deg 92% 24% / 15%); + } + } + + &.showing-cloud { + .pricing-container { + max-width: 1100px; + } + + .self-hosted-scroll, + .self-hosted-plan-pricing, + .self-hosted-additional-pricing { + display: none; + } + + .cloud-plan-title { + position: relative; + + /* Show curvature on cloud tab. */ + &::before { + display: block; + } + + &::after { + display: block; + } + + p { + border-bottom: 1px dashed hsl(223deg 40% 25% / 20%); + margin: 0 10px; + } + + @media screen and (width <= 700px) { + h2 { + border-bottom: 1px dashed hsl(223deg 40% 25% / 20%); + height: 100%; + margin: 0 10px; + } + } + + @media screen and (width <= 500px) { + h2 { + margin: 0; + } + } + } + + .self-hosted-plan-title { + border-radius: 16px 16px 0 14px; + margin-bottom: 2px; + background-color: var(--color-background-box-muted); + } + } + + &.showing-self-hosted { + .pricing-container { + max-width: 960px; + } + + .cloud-scroll, + .cloud-plan-pricing, + .cloud-additional-pricing { + display: none; + } + + .cloud-plan-title { + border-radius: 16px 16px 14px 0; + margin-bottom: 2px; + background-color: var(--color-background-box-muted); + } + + .self-hosted-plan-title { + position: relative; + + /* Show curvature on self-hosted tab. */ + &::before { + display: block; + } + + &::after { + display: block; + } + + p { + border-bottom: 1px dashed hsl(223deg 40% 25% / 20%); + margin: 0 10px; + } + + @media screen and (width <= 700px) { + h2 { + border-bottom: 1px dashed hsl(223deg 40% 25% / 20%); + height: 100%; + margin: 0 10px; + } + } + + @media screen and (width <= 500px) { + h2 { + margin: 0; + } + } + } + + .price-box { + .text-content { + max-width: 332px; + } + + .bottom .text-content { + max-width: 268px; + } + } + } + + @media screen and (width <= 940px) { + h1 { + font-size: 40px; + } + + .h1-subheader { + font-size: 16px; + } + + .pricing-tab h2 { + font-size: 24px; + line-height: 26px; + margin-bottom: 0; + } + + .pricing-pane h2 { + font-size: 22px; + margin: 4px 0 12px; + } + } + + @media screen and (width <= 900px) { + .additional-pricing-information header h2 { + font-size: 24px; + } + } + + @media screen and (width <= 500px) { + .pricing-tab h2 { + font-size: 20px; + } + } +} diff --git a/web/webpack.assets.json b/web/webpack.assets.json index 370ee76283..cafc6298a1 100644 --- a/web/webpack.assets.json +++ b/web/webpack.assets.json @@ -51,7 +51,8 @@ "landing-page": [ "./src/bundles/portico", "./src/portico/landing-page", - "./styles/portico/landing_page.css" + "./styles/portico/landing_page.css", + "./styles/portico/pricing_plans.css" ], "landing-page-hello": [ "./src/bundles/hello", @@ -69,7 +70,8 @@ "./src/portico/header", "./styles/portico/hello.css", "./styles/portico/navbar.css", - "./styles/portico/footer.css" + "./styles/portico/footer.css", + "./styles/portico/pricing_plans.css" ], "integrations": [ "./src/bundles/portico",