Change text color to white. Replace the background color #6AA2DC (because it doesn't passes accesiibility) for #2E308E

@jonatan-lledo-netcentric Let's make sure we cover all the different colors from the brand guidelines : https://expertise.netcentric.biz/cognizant-netcentric-brand-guidelines#home

The following functionalities have been tested on this ticket:

• Enable colours settings on components background (ex: Social media cards) -> Working as expected
• Enable colours settings on (Cards) components for titles, subtitles and body text to white when background colours are medium or dark -> Working as expected
• Darkening Filter -> When the background used in this component is a photo, the 110% brightness makes the texts unreadable and the images do not look good. In addition, this component is often used on the website with different colours, so the change in brightness affects them differently depending on the colour used. When hovering over the component, it looks even worse.

Please find attached some of the pages where the affected component is used and you can see the behaviour, on the left side the page in production and on the right side how it looks with the new changes in the branch.

• https://www.netcentric.biz/. -> https://285-new-css-styling-option-on-cards--cn-website--netcentric.hlx.page/
• https://www.netcentric.biz/our-industries/automotive. -> https://285-new-css-styling-option-on-cards--cn-website--netcentric.hlx.page/our-industries/automotive.
• https://www.netcentric.biz/careers/netcentric-academy. -> https://285-new-css-styling-option-on-cards--cn-website--netcentric.hlx.page/careers/netcentric-academy
• https://www.netcentric.biz/our-industries. -> https://285-new-css-styling-option-on-cards--cn-website--netcentric.hlx.page/our-industries
• https://www.netcentric.biz/how-we-work. -> https://285-new-css-styling-option-on-cards--cn-website--netcentric.hlx.page/how-we-work

When the behaviour of the brightness filter component is decided, all functionalities will be reviewed again.

As we have discussed on the slack channel, by applying the same component on photos and colours it will work on colours but on photos it will look too bright and the text will not be legible, we should apply one solution for colours (which is the new brightness that is being developed) and create a new flavour for images, so they look correctly

Please use those colors in the banners @sonaldhekale

This ticket is only looking at:

• Grey Background Filter on Images
• Banner light blue, purple text
  Here are the target style : https://www.figma.com/file/OeE1zEoK84ckQpsAVMP6Ps/Modifications-(Copy)?node-id=1039-13365&t=SFt1G1cAZXXrIRKW-0

Another ticket will be created to change the cards from images to a specific background black that need to be created.

Before:https://main--cn-website--netcentric.hlx.page/how-we-work/communities
After: https://285-accessblity-banner-text--cn-website--netcentric.hlx.page/how-we-work/communities

Tested the light blue Banner on:
https://main--cn-website--netcentric.hlx.page/how-we-work/communities
https://main--cn-website--netcentric.hlx.page/what-we-do/experience-operations
https://285-new-css-styling-option-on-cards--cn-website--netcentric.hlx.page/how-we-work/virtual-squads
BG colour found is #92bbe6 √
remaining on the ticket

• Solid background cards
• Image background cards

The following tickets were created for the cards
#321
#323