diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css index e8ecd4f3..ba00167f 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.css +++ b/src/containers/AuthenticationPage/AuthenticationPage.css @@ -32,20 +32,10 @@ } } -.tabs { - width: 200px; -} - -.tabH2 { - /* Text works as main Heading (H1), but text style is dropped to H2 */ - @media (--viewportMedium) { - @apply --marketplaceH2FontStyles; - } -} +.tabs {} .tab { - /* Text works as main Heading (H1), but text style is dropped to H2 */ - composes: tabH2; + @apply --marketplaceModalTitle; margin-top: 0; margin-bottom: 0; } diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css index 18c44cc3..e9d2f498 100644 --- a/src/marketplaceFonts.css +++ b/src/marketplaceFonts.css @@ -175,7 +175,7 @@ margin-bottom: 8.5px; @media (--viewportMedium) { - line-height: 16px; + line-height: 18px; /* margin-top + n * line-height + margin-bottom => x * 8px */ margin-top: 10.5px; margin-bottom: 13.5px; @@ -198,4 +198,18 @@ line-height: 24px; letter-spacing: -0.2px; } + + /* This font is specific to Modal's (Lightbox) titles */ + --marketplaceModalTitle: { + font-family: "sofiapro", Helvetica, Arial, sans-serif; + font-weight: var(--fontWeightSemiBold); + font-size: 30px; + line-height: 36px; + letter-spacing: -0.5px; + + @media (--viewportMedium) { + line-height: 40px; + letter-spacing: -0.9px; + } + } }