Implement new CSS styles

[angela-tran]

The new designs in Figma show that we'll need to update our CSS. Design has worked on making styles across Cal-ITP websites more consistent, so we have changes to fonts, font-sizes, colors, and spacing.

This ticket does not involve re-ordering or removing any content. It is solely focused on the styles, so you'll need to do a bit of mapping between the old and new designs.

Also note this ticket does not include the navbar or footer -- those are to be done in #93.

[segacy1]

Hello! I wanted to ask if we could also have calitp.org use the same favicon as mobimart and benefits. It's this little guy:

[thekaveman]

Keeping this on the backlog as we break out more specific CSS tickets.

[machikoyasuda]

CSS refactoring to do's:

• Must: Do all the link hovers/link styles
• Must: The white-on-color styling for Pills on Press and Resources page
• Nice to have: Use CSS utilities for as many margins/paddings as possible
• Nice to have: Convert all pixels to rems (as appropriate)
• Nice to have: Variable-ize as many constants as possible
• Nice to have: Convert rgb variables to just numbers
• Nice to have: Refactor out all CSS Grid

[segacy1]

Hey! Adding some additional information about link hover states.

Text Links
To avoid accessibility issues with a subtle hover color on the various background colors we work with, I'm proposing that all links take the behavior of the current highlighted links on the homepage. Basically, on hover it would go from a solid line to a dashed line like this:

Right now in Figma I've just been underlining the text with the default text formatting, which doesn't allow any changes. I remember from when we were updating buttons that the line weight looks different in figma vs. irl. Could we test the look by taking the current solid line/dashed line specs that are live and making it 1px bigger for me to see? I think what we have currently might be too thin.

Pills
I realize we don't currently have a hover state for pills on MobiMart either. I have three ideas that wouldn't change the actual text color/would work with our accessibility standards:

Please let me know if you have an opinion about this. I'd say we go with changing the outline opacity, since it's subtle and won't be confused with the active state which is expected to be a fill.

[thekaveman]

Text Links

Agree with this proposal! Let's use the dashed underline for all hover effects on all links.

Pills

I also agree that outline opacity seems like the best approach. The dashed outline feels a little strange/jarring.

[machikoyasuda]

Text Links

@segacy1 The red link uses this code: text-decoration-style: dashed;, while the green link uses: text-decoration-style: dotted;. Do you prefer Dashed or Dotted?

This is what `dashed`, `dotted`, and plain underline look like with `text-decoration-thickness` set to `2px`.

[machikoyasuda]

Text Links

Another question on text links: Are all text links bolded (font-weight 700) by default? Which ones are bold, and which ones are not?

[machikoyasuda]

Text Links

@segacy1

Need regular link and hover link styles for links on:

• Links on a Press Release: Currently regular links are calitp-primary-blue, font-weight 700 and underlined. No hover styles. Example: https://staging.calitp.org/press/cal-itp-benefits-launch
• Links on Press and Resources page: Currently regular links are calitp-primary-blue, font-weight 700 and NOT underlined. Current hover style is a color change (but that's just from our code default -- we need a style to put in here). Example: https://staging.calitp.org/press
• Links on the Footer: Currently the link style is white color, regular font weight and no underline. No hover effect specified.
• Links on the Nav: Currently the link style is black color, font-weight 700 and no underline. No hover effect specified.
• Header Link on a Press Release: This little Press page back link is currently styled with calitp-primary-blue, font-weight 700, no underline and no hover effect specified.

[segacy1]

@machikoyasuda let’s set the default of all links to be:

• bold
• underlined (2px thickness)

On hover:

• White links change from solid underline to dotted underline
• Regular (blue) links change from solid underline to dotted underline and use the same color treatment on hover as mobimart links (that dark blue).

Exceptions
Could we remove the underline in the following instances:
- Nav links: can we copy the exact nav treatment we use for mobimart?
- Little press page back link: can remove the underline here, but still have it darken on hover like the blue links on mobimart (same treatment as the table of content links in mobimart’s how-to guides, including that the text is H5 and not H4)

Footer links: I realize we don't have a hover state on mobimart's footer either! Like the top nav, let's remove the underline and make the hover state color gray-2

Press Release links look good and the links of Press and Resources should be underlined—I’ll update in Figma!

Also, for the pills, let's make the outline 70% opacity on hover.