diff --git a/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss b/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss index 6f8589b0a..36b269d9b 100644 --- a/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss +++ b/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss @@ -3,17 +3,9 @@ background-color: var(--wp-admin-theme-color-darker-10); padding: 16px; width: 90%; - font-size: clamp(0.7rem, 1.2vw, 1.4em); + font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem); font-weight: 500; border-radius: 4px; border: none; outline: 1px solid transparent; - - @media (max-width: #{($break-medium)}) { - padding: 24px 32px; - } - - @media (min-width: 2600px) { - font-size: clamp(2.81rem, -0.48vw + 2.93rem, 1.78rem); - } -} \ No newline at end of file +} diff --git a/src/OnboardingSPA/components/CardHeader/stylesheet.scss b/src/OnboardingSPA/components/CardHeader/stylesheet.scss index 0a2b044b0..0ece43590 100644 --- a/src/OnboardingSPA/components/CardHeader/stylesheet.scss +++ b/src/OnboardingSPA/components/CardHeader/stylesheet.scss @@ -3,60 +3,27 @@ font-weight: 700; line-height: 1.25; text-align: center; - font-size: clamp(1.5rem, 1.82vw + 1.05rem, 2.5rem); - - @media (max-width: #{($break-medium)}) { - font-size: clamp(1rem, 3.5vw, 1.2rem); - margin: 10px; - } - - @media (min-width: 2600px) { - font-size: clamp(1rem, 2.44vw + 0.39rem, 6.25rem); - margin: 40px; - } + font-size: clamp(1rem, 0.81rem + 0.92vw, 3.125rem); } .nfd-step-card-subheading { margin: 5px; font-weight: 700; color: var(--wp-admin-theme-color); - font-size: clamp(1rem, 0.91vw + 0.77rem, 1.5rem); + font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem); text-align: center; line-height: 1; - - @media (min-width: #{ ($break-medium)}) { - padding-bottom: 30px; - } - - @media (min-width: 2600px) { - font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem); - margin: 80px; - } } .nfd-step-card-subheading-other { font-weight: 700; margin-top: 35px; color: var(--wp-admin-theme-color); - font-size: clamp(0.8rem, 2.5vw, 1.2rem); - @media (max-width: #{($break-medium)}) { - margin: 3px; - font-size: clamp(0.7rem, 2.2vw, 1.2rem); - } - - @media (min-width: 2600px) { - font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem); - margin: 80px; - } + font-size: clamp(1rem, 0.93rem + 0.32vw, 1.75rem); } .nfd-step-card-question { margin: 18px; - font-size: clamp(1rem, 2vw, 1.8rem); - - @media (min-width: 2600px) { - font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem); - font-weight: 700; - margin: 60px; - } + font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 2.5rem); + line-height: 1.2; } diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss index 0fc48734e..d27d2dcfc 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss @@ -12,7 +12,7 @@ color: var(--nfd-onboarding-black); background: var(--nfd-onboarding-base-gray); font-weight: 350; - font-size: clamp(0.8rem, 1.5vw, 1.2rem); + font-size: clamp(1rem, 0.92rem + 0.38vw, 1.875rem); line-height: 1.5; margin: 5px; white-space: nowrap; @@ -21,11 +21,6 @@ padding-right: 100px; } - @media (min-width: 3700px) { - font-size: clamp(3.7rem, -0.27vw + 3.5rem, 3rem); - margin: 25px; - font-weight: 360; - } } &-tabs input:checked + label { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index 27d72cf86..b90cd7c52 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -15,7 +15,7 @@ &-categories { margin-top: 3rem; margin-bottom: 1rem; - width: 50vw; + width: 40vw; text-align: center; } @@ -38,14 +38,13 @@ &-input { width: 30vw; - height: 5.5vh; font-size: 16px; font-weight: 300; margin: 0 1rem 1.5rem 1rem; padding: 8px 16px !important; &::placeholder { - font-size: 15px; + font-size: 16px; } @media (max-width: #{($break-medium - 1)}) {