Minor improvements for moments pages

[slightlyoffbeat]

Description

A UX designer has requested some minor improvements to the moments pages that recently went live.

The first moments page will have traffic on Dec 10, so we have some time.

This is a lower priority, but would be nice to have.

Requested Changes

highest priority is:

• Smaller headline to fit the page better and allow for more room for CTA on smaller screens
  • h1 - lower font size to title-md-size

More subtle suggestions:

• Closer connection between the CTA and the time estimate
  • Change .update-firefox margin-bottom to 10px
• More differentiation between time estimate and privacy link
  • Privacy link - lower font-size to 11px
  • Time estimate - Add parentheses around the copy

Figma File

[ITSMEPRIYANSHUUCHAT]

Hi @slightlyoffbeat , I’d love to work on this good first bug. Could you please assign it to me? Also the Figma File is unavailable at the moment, can you please look into that too.

[slightlyoffbeat]

@ITSMEPRIYANSHUUCHAT I assigned it to you and updated the Figma file so that you can view it. Thank you for volunteering!

[ITSMEPRIYANSHUUCHAT]

Just another question, to make sure we are on the same page, the modifications are required for page 20,21,22,23 and 24. Am i right? As all of them are having similar issue.

[ITSMEPRIYANSHUUCHAT]

Some more things that I stumbled upon:
according to : https://github.com/mozilla/bedrock/blob/main/media/css/protocol/protocol-mozilla-2024.scss

--title-md-size: 2.5rem; (The current Font-size)
--title-sm-size: 2rem;

I would suggest that we rather use inline styling( if some custom size is required) or use {--title-2xs-size} instead.
(Figma_File) For reference at different font-sizes

Personally, I would go for 1.75rem, as it is the middle ground between too small to too big, please give your inputs for next steps.

[slightlyoffbeat]

@ITSMEPRIYANSHUUCHAT that is correct. It is for page 20, 21, 22, 23, and 24.

For your second question, i'm going to tag some Mozilla websites team members to see if they can advise @craigcook @alexgibson @stephaniehobson

[alexgibson]

@ITSMEPRIYANSHUUCHAT if we can try and stick to one of our standard heading sizes as defined in our design system, that would be preferable thanks. --title-xs-size: 1.75rem; seems like a reasonable choice to me.