285 new css styling option on cards

[jonatan-lledo-netcentric]

for the 1st and 2nd style issues, it can be check in index, and for the 3rd, Y add a draft for the purposes in
/drafts/jlledo/index-demo
/drafts/jlledo/rainbow-demo

Fix #285

Test URLs:

• Before: https://main--cn-website--netcentric.hlx.page/
• After: https://285-new-css-styling-option-on-cards--cn-website--netcentric.hlx.page/

[aem-code-sync]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-run PSI Checks

[aem-code-sync]

Page	Score	PSI Audit	Google
/

[aem-code-sync]

Page	Score	PSI Audit	Google
/

[pedrogbot]

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.

[pedrogbot]

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

[NCalexiaeche]

This ticket excludes the images, this block should be used only for background plain color, it should not be possible to be used with any images

[alexnerdrumhansen]

Colours don't seem to be matching the accessibility approved colours, https://projects.netcentric.biz/wiki/display/NCWEB/Accessibility+colour+recommendation
Should be: Midnight Blue (#48) / Dark Plum (#2E308E) / Dark Blue (#2F78C4)

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-run PSI Checks

[aem-code-sync]

Page	Scores	Audits	Google
/

[jonatan-lledo-netcentric]

@tomasznetcentric please, if you think this PR is ready, merge it for me. thanks

[tomasznetcentric]

@tomasznetcentric please, if you think this PR is ready, merge it for me. thanks

I checked the pr code wise. But yes maybe I miss some context here. Will setup a alignment for us.