|
|
@@ -1,1309 +0,0 @@
|
|
|
-// m-a stands for: monthly annual
|
|
|
-@plans-m-a-switch-height: 34px;
|
|
|
-@plans-m-a-switch-padding: 2px;
|
|
|
-@plans-highlighted-text-height-desktop: 32px;
|
|
|
-@plans-highlighted-text-height-mobile: 41px;
|
|
|
-@plans-learn-more-link-color: hsl(206, 100%, 52%);
|
|
|
-@plans-table-border-radius: var(--border-radius-medium-new);
|
|
|
-@plans-table-td-mobile-min-height: 34px;
|
|
|
-@highlighted-border: var(--border-width-base) solid var(--green-50);
|
|
|
-@table-border-size: 2px;
|
|
|
-@table-border: @table-border-size solid var(--neutral-10);
|
|
|
-@plans-table-sticky-header-size: 60px;
|
|
|
-
|
|
|
-.plans-page {
|
|
|
- p {
|
|
|
- color: @neutral-70;
|
|
|
- margin-bottom: @line-height-computed;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-header {
|
|
|
- h1,
|
|
|
- h2 {
|
|
|
- color: @neutral-70;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .group-customize-subscription-modal {
|
|
|
- .modal-footer {
|
|
|
- .btn-lg {
|
|
|
- margin-bottom: var(--spacing-05);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-inline-link {
|
|
|
- font-weight: normal;
|
|
|
- // TODO: add to .website-redesign
|
|
|
- // copied .inline-green-link style
|
|
|
- color: var(--green-50);
|
|
|
- text-decoration: underline;
|
|
|
- // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
|
|
|
- // this will force underline to not skip the descender
|
|
|
- text-decoration-skip-ink: none;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: var(--green-60);
|
|
|
- }
|
|
|
-
|
|
|
- // for accessibility with keyboard navigation
|
|
|
- &:focus {
|
|
|
- outline: 2px solid var(--green-50);
|
|
|
- outline-offset: 1px;
|
|
|
- }
|
|
|
- }
|
|
|
- .circle {
|
|
|
- font-size: var(--font-size-05);
|
|
|
- line-height: var(--line-height-04);
|
|
|
- padding: 46px 18px;
|
|
|
- margin: 0 auto @line-height-computed;
|
|
|
- width: 120px;
|
|
|
- height: 120px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: var(--green-50);
|
|
|
- color: white;
|
|
|
- white-space: nowrap;
|
|
|
-
|
|
|
- .group-price {
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .group-price-per-user {
|
|
|
- font-size: var(--font-size-02);
|
|
|
- line-height: var(--line-height-02);
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .circle-lg {
|
|
|
- height: 180px;
|
|
|
- padding: 70px 8px;
|
|
|
- width: 180px;
|
|
|
- }
|
|
|
-
|
|
|
- .group-plan-option {
|
|
|
- display: block;
|
|
|
- margin-bottom: var(--spacing-04);
|
|
|
- }
|
|
|
-
|
|
|
- label span {
|
|
|
- font-size: var(--font-size-03);
|
|
|
- line-height: var(--line-height-03);
|
|
|
- font-weight: 400;
|
|
|
- padding-left: var(
|
|
|
- --spacing-04
|
|
|
- ); // TODO: move to standard input styling for checkbox and radio
|
|
|
- }
|
|
|
-
|
|
|
- input[type='checkbox'],
|
|
|
- input[type='radio'] {
|
|
|
- // TODO: move to standard input styling for checkbox
|
|
|
- accent-color: var(--green-50);
|
|
|
- }
|
|
|
-
|
|
|
- input[type='checkbox'] {
|
|
|
- // TODO: move to standard input styling for checkbox
|
|
|
-
|
|
|
- height: 16px;
|
|
|
- width: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group {
|
|
|
- margin-bottom: var(--spacing-06); // TODO: move to main .form-group CSS
|
|
|
- }
|
|
|
-
|
|
|
- .group-plan-educational-discount {
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .educational-discount-section {
|
|
|
- margin-top: var(--spacing-06);
|
|
|
- }
|
|
|
-
|
|
|
- .group-modal-features {
|
|
|
- font-size: var(--font-size-02);
|
|
|
- line-height: var(--line-height-02);
|
|
|
-
|
|
|
- ul {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- ul,
|
|
|
- .list-item-pro-features-header {
|
|
|
- margin-top: var(--spacing-06);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-top-switch ul {
|
|
|
- background-color: var(--neutral-10);
|
|
|
- display: inline-flex;
|
|
|
- justify-content: center;
|
|
|
- margin: var(--spacing-09) auto 0 auto;
|
|
|
- border-radius: var(--border-radius-full-new);
|
|
|
- padding: var(--spacing-01);
|
|
|
-
|
|
|
- li {
|
|
|
- display: flex;
|
|
|
- margin-right: var(--spacing-02);
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- button {
|
|
|
- background-color: var(--neutral-10);
|
|
|
- color: var(--neutral-70);
|
|
|
- border-radius: var(--border-radius-full-new);
|
|
|
- font-size: var(--font-size-03);
|
|
|
- font-weight: 600;
|
|
|
- line-height: var(--line-height-03);
|
|
|
- padding: 0 var(--spacing-04);
|
|
|
-
|
|
|
- // remove bootstrap default
|
|
|
- &.btn:active {
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- // same background as btn-secondary hover
|
|
|
- background-color: var(--neutral-20);
|
|
|
- color: var(--neutral-70);
|
|
|
- }
|
|
|
-
|
|
|
- &:focus {
|
|
|
- outline: 0;
|
|
|
- }
|
|
|
- &:focus-visible {
|
|
|
- outline: 0;
|
|
|
- .box-shadow-button-input();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- button {
|
|
|
- cursor: pointer;
|
|
|
- background-color: var(--neutral-70);
|
|
|
- border-color: var(--neutral-70);
|
|
|
- color: var(--white);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- border-radius: var(--border-radius-base-new);
|
|
|
-
|
|
|
- li {
|
|
|
- button {
|
|
|
- font-size: var(--font-size-01);
|
|
|
- line-height: var(--line-height-01);
|
|
|
- text-wrap: auto;
|
|
|
- padding: var(--spacing-02) var(--spacing-04);
|
|
|
- border-radius: var(--border-radius-base-new);
|
|
|
- }
|
|
|
-
|
|
|
- &.plans-switch-group {
|
|
|
- // force newline for the second span
|
|
|
- span:first-child::after {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- span:last-child {
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- a.btn.plans-v2-btn-header-light,
|
|
|
- button.plans-v2-btn-header-light {
|
|
|
- font-family: @font-family-sans-serif;
|
|
|
- }
|
|
|
-
|
|
|
- .monthly-annual-switch {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: relative;
|
|
|
- margin-top: var(--spacing-10);
|
|
|
-
|
|
|
- .underline {
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
-
|
|
|
- &.disabled {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- margin-top: var(--spacing-08);
|
|
|
- }
|
|
|
-
|
|
|
- label {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- width: 60px;
|
|
|
- height: @plans-m-a-switch-height;
|
|
|
- margin: 0 var(--spacing-05);
|
|
|
-
|
|
|
- input {
|
|
|
- opacity: 0;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- }
|
|
|
-
|
|
|
- input + span {
|
|
|
- background-color: var(--green-50);
|
|
|
- }
|
|
|
-
|
|
|
- input:checked + span {
|
|
|
- background-color: var(--neutral-70);
|
|
|
- }
|
|
|
-
|
|
|
- input:checked + span::before {
|
|
|
- transform: translateX(26px);
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- position: absolute;
|
|
|
- cursor: pointer;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- transition: 0.4s;
|
|
|
- border-radius: @plans-m-a-switch-height;
|
|
|
-
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- height: @plans-m-a-switch-height - @plans-m-a-switch-padding -
|
|
|
- @plans-m-a-switch-padding;
|
|
|
- width: @plans-m-a-switch-height - @plans-m-a-switch-padding -
|
|
|
- @plans-m-a-switch-padding;
|
|
|
- left: @plans-m-a-switch-padding;
|
|
|
- bottom: @plans-m-a-switch-padding;
|
|
|
- background-color: @white;
|
|
|
- transition: 0.4s;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .monthly-annual-switch-text {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .tooltip {
|
|
|
- opacity: 1;
|
|
|
- position: absolute;
|
|
|
- color: @white;
|
|
|
- width: auto;
|
|
|
- border-radius: var(--border-radius-base-new);
|
|
|
- margin-right: var(--spacing-05);
|
|
|
- right: 100%;
|
|
|
- top: 0;
|
|
|
- z-index: 0;
|
|
|
- font-weight: 600;
|
|
|
-
|
|
|
- &.tooltip.in.left {
|
|
|
- .tooltip-inner {
|
|
|
- background-color: var(--green-50);
|
|
|
- }
|
|
|
-
|
|
|
- .tooltip-arrow {
|
|
|
- border-left-color: var(--green-50);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- right: -31%;
|
|
|
- top: unset;
|
|
|
-
|
|
|
- &.tooltip.in.bottom {
|
|
|
- .tooltip-inner {
|
|
|
- background-color: var(--green-50);
|
|
|
- }
|
|
|
-
|
|
|
- .tooltip-arrow {
|
|
|
- border-left-color: unset;
|
|
|
- border-bottom-color: var(--green-50);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //- class toggled by JS
|
|
|
- &.plans-v2-m-a-tooltip-monthly-selected {
|
|
|
- right: -119%;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: @font-size-extra-small;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .page-header.top-page-header {
|
|
|
- // remove page-header border & margin on mobile
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- border-bottom: none;
|
|
|
- margin-bottom: 0;
|
|
|
- padding-bottom: 0;
|
|
|
-
|
|
|
- h1 {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-comments-icon {
|
|
|
- i {
|
|
|
- font-size: 64px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-container {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-license-picker-form {
|
|
|
- margin-top: var(--spacing-08);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- font-size: var(--font-size-03);
|
|
|
- line-height: var(--line-height-03);
|
|
|
-
|
|
|
- .plans-license-picker-select-container {
|
|
|
- span {
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- select {
|
|
|
- background-color: @white;
|
|
|
- border: 1px solid var(--neutral-60);
|
|
|
- border-radius: var(--border-radius-base-new);
|
|
|
- height: 31px;
|
|
|
- margin-left: var(--spacing-04);
|
|
|
- padding: 5.5px var(--spacing-04);
|
|
|
- font-size: var(--font-size-02);
|
|
|
- line-height: var(--line-height-02);
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- margin: 0 15px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- i {
|
|
|
- margin-left: var(--spacing-04);
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //- element is selected by shared JS with default variant
|
|
|
- .plans-v2-license-picker-educational-discount {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: var(--spacing-06);
|
|
|
-
|
|
|
- &.total-licenses-not-eligible-for-discount {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- label {
|
|
|
- margin-bottom: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-weight: normal;
|
|
|
-
|
|
|
- &.disabled span {
|
|
|
- color: var(--neutral-40);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox {
|
|
|
- margin-top: 0;
|
|
|
- margin-right: var(--spacing-04);
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- margin-right: 25px;
|
|
|
- // scale the checkbox to around 30px width and height
|
|
|
- transform: scale(2.307);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span.plans-v2-license-picker-educational-discount-learn-more-container {
|
|
|
- display: none;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- margin-left: 5px;
|
|
|
- display: inline;
|
|
|
- // this white-space is important to ensure the "learn more" text won't get separated by a newline
|
|
|
- white-space: nowrap;
|
|
|
-
|
|
|
- span.plans-v2-license-picker-educational-discount-learn-more-text {
|
|
|
- color: @plans-learn-more-link-color;
|
|
|
- }
|
|
|
-
|
|
|
- .tooltip {
|
|
|
- // force white-space to have initial value since the `white-space: nowrap` rule
|
|
|
- // on .plans-v2-license-picker-educational-discount-learn-more-container selector (the current code block) above
|
|
|
- // will also affect every child inside of it, including the generated tooltip
|
|
|
- white-space: initial;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- font-size: var(--font-size-02);
|
|
|
- margin-top: var(--spacing-06);
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-individual,
|
|
|
- .plans-table-student {
|
|
|
- margin-top: 40px + @plans-highlighted-text-height-desktop;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- margin-top: 60px + @plans-highlighted-text-height-desktop;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-student {
|
|
|
- @media (max-width: @screen-md-max) {
|
|
|
- tr:first-of-type {
|
|
|
- th:last-of-type {
|
|
|
- // Last column is only a UI placeholder for desktop view.
|
|
|
- // We need to hide it for mobile to have the full table fully visible on mobile
|
|
|
- // without any empty horizontal space.
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-group {
|
|
|
- margin-top: 40px + @plans-highlighted-text-height-desktop;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- margin-top: 40px + @plans-highlighted-text-height-mobile;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table {
|
|
|
- background-color: white;
|
|
|
- margin-bottom: 15px;
|
|
|
- table-layout: fixed;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .plans-table-th-content,
|
|
|
- .plans-table-price,
|
|
|
- .plans-table-comments-icon {
|
|
|
- color: var(--neutral-90);
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-short-feature-list ul {
|
|
|
- color: var(--neutral-70);
|
|
|
- font-size: var(--font-size-02);
|
|
|
- line-height: var(--line-height-02);
|
|
|
- hyphens: auto;
|
|
|
- padding-left: 15px;
|
|
|
- text-align: left;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- // Table BORDER and PADDING
|
|
|
- // Cannot add border to td, th directly due to highlighted column border.
|
|
|
- // The outer div handles the border (see exception below for highlighted column).
|
|
|
- // The inner div handles the padding.
|
|
|
- // The 2 layers of divs make the highlighted column border appears
|
|
|
- // as a solid vertical line across the table.
|
|
|
- // The highlighted column's border handling is an exception. The inner div (div > div)
|
|
|
- // of the highlighted column handles the horizontal border (gray) so that it appears as
|
|
|
- // behind the vertical border (green).
|
|
|
- // On mobile, there is no vertical border for the highighted column
|
|
|
- td > div,
|
|
|
- th > div {
|
|
|
- // border
|
|
|
- border-left: @table-border;
|
|
|
- border-top: @table-border;
|
|
|
- border-right: @table-border;
|
|
|
- border-bottom: 0;
|
|
|
- // border adjustments
|
|
|
- &.plans-table-cell-cta-desktop,
|
|
|
- &.plans-table-cell-cta-mobile,
|
|
|
- &.plans-table-cell-short-feature-list,
|
|
|
- &.plans-table-cell-price,
|
|
|
- &.plans-table-cell-divider {
|
|
|
- border-top: 0;
|
|
|
- }
|
|
|
- &.plans-table-cell-divider {
|
|
|
- border-bottom: 0;
|
|
|
- }
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- border: 0;
|
|
|
- &.plans-table-th {
|
|
|
- border-top: @table-border;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // padding
|
|
|
- > div {
|
|
|
- padding: var(--spacing-05) var(--spacing-08);
|
|
|
- @media (max-width: @screen-sm-max) {
|
|
|
- padding: var(--spacing-05);
|
|
|
- }
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- padding: var(--spacing-03);
|
|
|
- }
|
|
|
- }
|
|
|
- // padding adjustments
|
|
|
- &.plans-table-th > div {
|
|
|
- padding-top: var(--spacing-06);
|
|
|
- padding-bottom: var(--spacing-04);
|
|
|
- }
|
|
|
- &.plans-table-cell-price > div {
|
|
|
- padding-top: 0;
|
|
|
- padding-bottom: var(--spacing-06);
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- padding-top: var(--spacing-05);
|
|
|
- }
|
|
|
- }
|
|
|
- &.plans-table-cell-short-feature-list > div {
|
|
|
- padding-top: 0;
|
|
|
- padding-bottom: 0;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- padding-bottom: var(--spacing-06);
|
|
|
- }
|
|
|
- }
|
|
|
- &.plans-table-cell-cta-desktop > div {
|
|
|
- padding-top: var(--spacing-08);
|
|
|
- }
|
|
|
- &.plans-table-cell-cta-mobile > div {
|
|
|
- padding-top: 0;
|
|
|
- padding-bottom: var(--spacing-06);
|
|
|
- }
|
|
|
- &.plans-table-feature-name > div {
|
|
|
- padding-left: var(--spacing-05);
|
|
|
- }
|
|
|
- &.plans-table-cell-divider > div {
|
|
|
- padding: var(--spacing-05) var(--spacing-08);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // border adjustments for highlighted column
|
|
|
- // remove left border for all col after highlighted column
|
|
|
- .plans-table-green-highlighted ~ td > div,
|
|
|
- .plans-table-green-highlighted ~ th > div {
|
|
|
- border-left: 0;
|
|
|
- }
|
|
|
- // remove right border for all col before highlighted column
|
|
|
- td:has(~ .plans-table-green-highlighted) > div,
|
|
|
- th:has(~ .plans-table-green-highlighted) > div {
|
|
|
- border-right: 0;
|
|
|
- }
|
|
|
- // highlighted column border
|
|
|
- th.plans-table-green-highlighted > div,
|
|
|
- td.plans-table-green-highlighted > div {
|
|
|
- border-left: @highlighted-border;
|
|
|
- border-right: @highlighted-border;
|
|
|
- // remove top gray border so that there is
|
|
|
- // no shared corner with left/right green border
|
|
|
- // and then apply the gray top border to the inner div, .plans-table-cell-content
|
|
|
- border-top: 0;
|
|
|
-
|
|
|
- &.plans-table-th {
|
|
|
- border-top: @table-border-size solid var(--green-50);
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-cell-content {
|
|
|
- border-top: @table-border;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- // column is not highlighted on mobile
|
|
|
- border: 0;
|
|
|
- .plans-table-cell-content {
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- tr.plans-table-divider {
|
|
|
- // highlighted divider will only show if the highlighted column is on the last visible column
|
|
|
- .plans-table-last-col-highlighted > div {
|
|
|
- border-right: @highlighted-border;
|
|
|
- }
|
|
|
- }
|
|
|
- // add border for last row
|
|
|
- tr:last-child {
|
|
|
- td > div,
|
|
|
- th > div {
|
|
|
- border-bottom: @table-border;
|
|
|
- }
|
|
|
- td.plans-table-green-highlighted > div {
|
|
|
- border-bottom: @highlighted-border;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- // column is not highlighted on mobile, so
|
|
|
- // match non-highlighted column border on mobile
|
|
|
- border-bottom: @table-border;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // remove borders
|
|
|
- tr.plans-table-divider + tr {
|
|
|
- td > div,
|
|
|
- th > div {
|
|
|
- border-top: 0;
|
|
|
- }
|
|
|
- .plans-table-green-highlighted {
|
|
|
- .plans-table-cell-content {
|
|
|
- border-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- tr.plans-table-cols-2 {
|
|
|
- th:last-child {
|
|
|
- div {
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // border radius
|
|
|
-
|
|
|
- tr {
|
|
|
- th {
|
|
|
- &:nth-child(2):not(.plans-table-green-highlighted) .plans-table-th {
|
|
|
- border-top-left-radius: @plans-table-border-radius;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- border-top-left-radius: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // top right border radius on desktop only
|
|
|
- &:first-of-type {
|
|
|
- th:last-child > .plans-table-th {
|
|
|
- border-top-right-radius: @plans-table-border-radius;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- border-top-right-radius: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // bottom right border radius on desktop only
|
|
|
- &:last-child {
|
|
|
- td:last-child {
|
|
|
- .plans-table-cell {
|
|
|
- border-bottom-right-radius: @plans-table-border-radius;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- border-bottom-right-radius: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- th {
|
|
|
- .plans-table-feature-name {
|
|
|
- @media (min-width: @screen-sm-min) {
|
|
|
- border-bottom-left-radius: @plans-table-border-radius;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // top left border radius on first feature row
|
|
|
- .plans-table-first-feature-header > .plans-table-feature-name {
|
|
|
- border-top-left-radius: @plans-table-border-radius;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- border-top-left-radius: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // We want these `div` inside `th` and `td` to have a 100% height so
|
|
|
- // that their borders are all the full height of their row.
|
|
|
- //
|
|
|
- // To make both of them have 100% height of their respective `td` and `th`,
|
|
|
- // we need to have the `table` has an explicit `height` rule.
|
|
|
- // The value can be arbitrary, since it will be ignored by the browser
|
|
|
- //
|
|
|
- // See https://stackoverflow.com/a/56913789 for more details
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- th[scope='row'] {
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- tr {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- th[scope='col'],
|
|
|
- td {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- th[scope='col'] {
|
|
|
- font-family: 'Noto Sans', sans-serif;
|
|
|
- font-size: var(--font-size-05);
|
|
|
- font-weight: 600;
|
|
|
- line-height: var(--line-height-04);
|
|
|
- vertical-align: top;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- td {
|
|
|
- vertical-align: middle;
|
|
|
- @media (min-width: @screen-sm-min) {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- tr {
|
|
|
- &:first-child th {
|
|
|
- // keep the position here, otherwise messes up border on safari
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- tr.plans-table-divider {
|
|
|
- background-color: var(--neutral-10);
|
|
|
-
|
|
|
- .plans-table-cell-divider-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- // direct child selector to NOT affect the generated tooltip
|
|
|
- td > div {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .plans-table-divider-label {
|
|
|
- margin-bottom: 0;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-divider-learn-more-container {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- padding-top: 0;
|
|
|
- padding-right: 0;
|
|
|
- padding-left: 0;
|
|
|
- background-color: var(--neutral-20);
|
|
|
- border: 0;
|
|
|
-
|
|
|
- .plans-table-cell-divider-content {
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- // direct child selector to NOT affect the generated tooltip
|
|
|
- th > div,
|
|
|
- td > div {
|
|
|
- background-color: var(--neutral-20);
|
|
|
- border: 0;
|
|
|
- i {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-divider-learn-more-container {
|
|
|
- display: inline;
|
|
|
- // this white-space is important to ensure the "learn more" text won't get separated by a newline
|
|
|
- white-space: nowrap;
|
|
|
-
|
|
|
- span.plans-table-divider-learn-more-text {
|
|
|
- color: @plans-learn-more-link-color;
|
|
|
- }
|
|
|
-
|
|
|
- // force white-space to have initial value since the `white-space: nowrap` rule
|
|
|
- // on .plans-table-divider-learn-more-container selector (the current code block) above
|
|
|
- // will also affect every child inside of it, including the generated tooltip
|
|
|
- .tooltip {
|
|
|
- white-space: initial;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-last-col-highlighted > div {
|
|
|
- border-right: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .fa-check {
|
|
|
- color: @green;
|
|
|
- }
|
|
|
-
|
|
|
- @media (min-width: @screen-sm-min) {
|
|
|
- // highlight rows on hover
|
|
|
- .plans-table-feature-row:hover {
|
|
|
- .plans-table-feature-name,
|
|
|
- .plans-table-cell {
|
|
|
- background-color: @table-hover-bg;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-sm-max) {
|
|
|
- font-size: @font-size-small;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- tr {
|
|
|
- display: flex;
|
|
|
- // for mobile, we need to show the feature name (the first column) as its own row
|
|
|
- // the flex-flow will make the whole tr overflow to a next row if
|
|
|
- // total td width combined is bigger than viewport width
|
|
|
- // so, one tr can have multiple "visible" row depending on the total width.
|
|
|
- flex-flow: row wrap;
|
|
|
- justify-content: space-around;
|
|
|
- }
|
|
|
-
|
|
|
- td,
|
|
|
- th {
|
|
|
- align-self: stretch;
|
|
|
- }
|
|
|
-
|
|
|
- // The forced width below (plans-table-cols-n) is to ensure the table columns have an equal width
|
|
|
- // because on mobile, the first column (empty cell on first `tr` and feature name on the rest of `tr`) will be shown as its own row
|
|
|
- // and the rest of the `tr` will incorporate a full width of the viewport
|
|
|
- tr.plans-table-cols-4:not(.plans-table-divider) {
|
|
|
- td,
|
|
|
- th:not(:first-of-type) {
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- tr.plans-table-cols-3:not(.plans-table-divider) {
|
|
|
- td,
|
|
|
- th:not(:first-of-type) {
|
|
|
- width: calc(100% / 3);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- tr.plans-table-cols-2:not(.plans-table-divider) {
|
|
|
- td,
|
|
|
- th:not(:first-of-type) {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- th[scope='col'] {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- // hide the first cell (which has no content)
|
|
|
- tr:first-child,
|
|
|
- .plans-table-price-row,
|
|
|
- .plans-table-cta-mobile,
|
|
|
- .plans-table-short-feature-list {
|
|
|
- th:first-child,
|
|
|
- td:first-child {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // for mobile, we need to show the feature name (the first td) as its own row
|
|
|
- // the width: 100vw rule will enhance the flex-flow on the tr by ensuring the feature name (first column of each feature row)
|
|
|
- // will have the full width of viewport,
|
|
|
- // and making the first td appear like the it is in its own row (although it's technically still on the same tr as the other tds)
|
|
|
- th[scope='row'] {
|
|
|
- width: 100vw;
|
|
|
-
|
|
|
- span.plans-table-feature-name {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- span {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // plans-table-cell class only appears for the inner `div` of a `td`
|
|
|
- // that doesn't contain divider or feature name
|
|
|
- // (i.e it contains either check mark icon or a dash)
|
|
|
- .plans-table-cell {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .plans-table-cell-content {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- .plans-table-cell-content {
|
|
|
- min-height: @plans-table-td-mobile-min-height;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-th {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .plans-table-th-content {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-btn-buy-container-desktop,
|
|
|
- .plans-table-btn-buy-container-mobile {
|
|
|
- gap: var(--spacing-04);
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-btn-buy-container-desktop {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-btn-buy-container-mobile {
|
|
|
- display: none;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .btn {
|
|
|
- .btn-xs;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .visible-desktop,
|
|
|
- .visible-mobile-and-tablet {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- @media (min-width: (@screen-lg-min)) {
|
|
|
- .visible-desktop {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
- @media (max-width: @screen-md-max) {
|
|
|
- .visible-mobile-and-tablet {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // this class should only appear on the group table
|
|
|
- .plans-group-total-price {
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-price-row {
|
|
|
- .match-non-discounted-price-alignment,
|
|
|
- s {
|
|
|
- display: block;
|
|
|
- font-weight: 600;
|
|
|
- font-size: var(--font-size-02);
|
|
|
- line-height: var(--line-height-02);
|
|
|
- color: var(--neutral-60);
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-price-container {
|
|
|
- p.plans-table-price-period-label {
|
|
|
- margin: 0;
|
|
|
- font-size: var(--font-size-02);
|
|
|
- line-height: var(--line-height-02);
|
|
|
- color: @ol-blue-gray-3;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
-
|
|
|
- p.plans-table-price {
|
|
|
- margin: 0;
|
|
|
-
|
|
|
- span {
|
|
|
- font-weight: 600;
|
|
|
- font-size: var(--font-size-07);
|
|
|
- line-height: var(--line-height-06);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-feature-name-content {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- i.plans-table-feature-question-icon {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- span.plans-table-feature-learn-more-container {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- display: inline-block;
|
|
|
- text-align: left;
|
|
|
- width: 100%;
|
|
|
- background-color: @ol-blue-gray-0;
|
|
|
- min-height: @plans-table-td-mobile-min-height;
|
|
|
-
|
|
|
- i.plans-table-feature-question-icon {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- span.plans-table-feature-learn-more-container {
|
|
|
- margin-left: 5px;
|
|
|
- display: inline;
|
|
|
- // this white-space is important to ensure the "learn more" text won't get separated by a newline
|
|
|
- white-space: nowrap;
|
|
|
-
|
|
|
- span.plans-table-feature-learn-more-text {
|
|
|
- color: @plans-learn-more-link-color;
|
|
|
- }
|
|
|
-
|
|
|
- .tooltip {
|
|
|
- // force white-space to have initial value since the `white-space: nowrap` rule
|
|
|
- // on .plans-table-feature-learn-more-container selector (the current code block) above
|
|
|
- // will also affect every child inside of it, including the generated tooltip
|
|
|
- white-space: initial;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- p.plans-table-green-highlighted-text {
|
|
|
- border: 2px solid var(--green-50);
|
|
|
- position: absolute;
|
|
|
- top: -1 * @plans-highlighted-text-height-desktop;
|
|
|
- left: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: var(--font-size-03);
|
|
|
- line-height: var(--line-height-02);
|
|
|
- font-weight: 600;
|
|
|
- background-color: var(--green-50);
|
|
|
- border-radius: var(--border-radius-large-new) var(--border-radius-large-new)
|
|
|
- 0 0;
|
|
|
- color: @white;
|
|
|
- height: @plans-highlighted-text-height-desktop;
|
|
|
- margin: 0;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- @media (max-width: @screen-sm-max) {
|
|
|
- top: -1 * @plans-highlighted-text-height-mobile;
|
|
|
- height: @plans-highlighted-text-height-mobile;
|
|
|
- font-size: var(--font-size-01);
|
|
|
- line-height: var(--line-height-01);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-th-content {
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- height: @plans-table-sticky-header-size!important;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- .plans-table-sticky-header-container {
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- // `height: 60%` is just an arbitrary percentage
|
|
|
- // since we need to cover the whole plans_v2_table
|
|
|
- // but not too much so it vertically overflows the page
|
|
|
- // and it's not trivial to calculate the precise table height
|
|
|
- height: 60%;
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-sticky-header-without-switch {
|
|
|
- margin-bottom: -107px;
|
|
|
- margin-top: @plans-highlighted-text-height-mobile + 40px +
|
|
|
- @table-border-size;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-sticky-header-with-switch {
|
|
|
- margin-bottom: -140px;
|
|
|
- margin-top: @plans-table-sticky-header-size + 34px;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-sticky-header {
|
|
|
- display: none;
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: @z-index-plans-page-table-header-mobile;
|
|
|
- height: @plans-table-sticky-header-size;
|
|
|
- border-bottom: @table-border;
|
|
|
-
|
|
|
- // separate sticky class because we want to remove the class (to visually remove the sticky header)
|
|
|
- // with javascript whenever the table is not visible anymore
|
|
|
- &.sticky {
|
|
|
- position: sticky;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-sticky-header-item {
|
|
|
- background-color: @white;
|
|
|
- flex: 1 1 0px;
|
|
|
-
|
|
|
- span {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 0 var(--spacing-01);
|
|
|
- color: var(--neutral-90);
|
|
|
- font-size: var(--font-size-03);
|
|
|
- font-weight: 600;
|
|
|
- text-align: center;
|
|
|
- line-height: var(--line-height-02);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-sticky-header-item-green-highlighted span {
|
|
|
- color: var(--green-50);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-v2-faq {
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- // need for specificity to override default a color
|
|
|
- p > a {
|
|
|
- color: @ol-blue;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: @ol-dark-blue;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plans-v2-university-info-light {
|
|
|
- padding: @padding-lg @padding-xxl;
|
|
|
- background-color: var(--white);
|
|
|
- border-radius: 20px;
|
|
|
- max-width: @screen-sm-max; // 991px
|
|
|
- margin: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: var(--spacing-07); // 20px
|
|
|
-
|
|
|
- @media (max-width: @screen-sm-max) {
|
|
|
- flex-direction: column;
|
|
|
- align-items: start;
|
|
|
- }
|
|
|
-
|
|
|
- h3.plans-v2-university-info-header-light {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- p.plans-v2-university-info-text-light {
|
|
|
- margin: 0;
|
|
|
- margin-top: @margin-sm;
|
|
|
- }
|
|
|
-
|
|
|
- a.plans-v2-btn-university-info {
|
|
|
- margin-top: @margin-md;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-sm-max) {
|
|
|
- h3.plans-v2-university-info-header-light {
|
|
|
- margin: 0 0 @margin-md 0;
|
|
|
- }
|
|
|
-
|
|
|
- p.plans-v2-university-info-text-light {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- padding: @padding-lg;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- padding-top: calc(var(--spacing-16) + var(--header-height));
|
|
|
-
|
|
|
- h1 {
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: var(--spacing-08);
|
|
|
- }
|
|
|
- .plans-v2-top-switch {
|
|
|
- margin-top: var(--spacing-09);
|
|
|
- }
|
|
|
-
|
|
|
- .plans-page-quote-row {
|
|
|
- margin: var(--spacing-13) 0;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-payment-methods {
|
|
|
- margin-top: var(--spacing-08);
|
|
|
- margin-bottom: var(--spacing-09);
|
|
|
- p {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- .plans-payment-methods-icons {
|
|
|
- display: flex;
|
|
|
- gap: var(--spacing-04);
|
|
|
- justify-content: center;
|
|
|
- margin-top: var(--spacing-05);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.plans-page-interstitial {
|
|
|
- padding-bottom: var(--spacing-09);
|
|
|
- h1 {
|
|
|
- margin-bottom: var(--spacing-13);
|
|
|
- }
|
|
|
- .monthly-annual-switch {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .plans-table-btn-buy-container-mobile {
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- .btn {
|
|
|
- // interstitial page is a 4 column layout and CTA text cannot fit without adjustments
|
|
|
- font-size: 11px;
|
|
|
- text-wrap: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.plans-page
|
|
|
- .plans-table-price-row
|
|
|
- .plans-table-price-container
|
|
|
- .plans-table-price
|
|
|
- span {
|
|
|
- @media (max-width: @screen-xs-max) {
|
|
|
- font-size: var(--font-size-05);
|
|
|
- line-height: var(--line-height-05);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
M Fahru