From 8044e540faf8ea5287752512f2e5cee3efb2de7f Mon Sep 17 00:00:00 2001 From: AEMY Studio Date: Fri, 6 Feb 2026 18:21:02 +0000 Subject: [PATCH] Add 4 blocks Automated migration updates generated by Experience Modernization Agent. Changed files (5): - blocks/carousel/carousel.css - blocks/columns/columns.css - blocks/header/header.css - blocks/teaser/teaser.css - styles/styles.css --- blocks/carousel/carousel.css | 14 +++++++------- blocks/columns/columns.css | 10 +++++----- blocks/header/header.css | 14 +++++++------- blocks/teaser/teaser.css | 14 +++++++------- styles/styles.css | 32 ++++++++++++++++---------------- 5 files changed, 42 insertions(+), 42 deletions(-) diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index dfc239a..6459772 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -897,14 +897,14 @@ main div.carousel-wrapper:has(.carousel.wide) { } } -/* Hero CTA Button - Inverted (white on dark) */ +/* Hero CTA Button - Red on dark hero */ .carousel.hero .carousel-slide-content a.button, .carousel.hero .carousel-slide-content strong a { display: inline-block; padding: 12px 28px; - background-color: rgb(255 255 255 / 95%); - color: var(--color-border-dark); - border: 2px solid rgb(255 255 255 / 95%); + background-color: #d32f2f; + color: rgb(255 255 255 / 95%); + border: 2px solid #d32f2f; border-radius: var(--button-border-radius); font-size: 14px; font-weight: 600; @@ -914,9 +914,9 @@ main div.carousel-wrapper:has(.carousel.wide) { .carousel.hero .carousel-slide-content a.button:hover, .carousel.hero .carousel-slide-content strong a:hover { - background-color: hsl(0deg 0% 74.1% / 96.25%); - border-color: hsl(0deg 0% 74.1% / 96.25%); - color: #000; + background-color: #b71c1c; + border-color: #b71c1c; + color: #fff; text-decoration: none; } diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 6773639..cf3a777 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -98,16 +98,16 @@ margin-top: var(--spacing-m); } -/* Inverted buttons: white text on black background */ +/* Inverted buttons: red background */ .columns.media .columns-content-col a.button:any-link { - background-color: rgb(0 0 0 / 95%); + background-color: #d32f2f; color: rgb(255 255 255 / 95%); - border-color: rgb(0 0 0 / 95%); + border-color: #d32f2f; } .columns.media .columns-content-col a.button:hover { - background-color: #000; - border-color: #000; + background-color: #b71c1c; + border-color: #b71c1c; color: #fff; text-decoration: none; } diff --git a/blocks/header/header.css b/blocks/header/header.css index b4fe866..6b6e95e 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -389,7 +389,7 @@ header .nav-tools li { margin: 0; } -/* Contact Sales button - black pill, 16px tall, 12px font */ +/* Contact Sales button - red pill, 16px tall, 12px font */ header .nav-tools a, header .nav-tools a:any-link { display: inline-flex; @@ -397,7 +397,7 @@ header .nav-tools a:any-link { justify-content: center; height: 32px; padding: 0 16px; - background-color: rgb(0 0 0 / 95%); + background-color: #d32f2f; color: var(--text-color-inverse); border-radius: 16px; font-size: 12px; @@ -408,7 +408,7 @@ header .nav-tools a:any-link { header .nav-tools a:hover, header .nav-tools a:any-link:hover { - background-color: rgb(0 0 0 / 70%); + background-color: #b71c1c; color: var(--text-color-inverse); text-decoration: none; } @@ -527,7 +527,7 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after { justify-content: center; height: 32px; padding: 0 16px; - background-color: rgb(0 0 0 / 95%); + background-color: #d32f2f; color: var(--text-color-inverse); border-radius: 16px; font-size: 12px; @@ -537,7 +537,7 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after { } header nav .nav-primary-tools .contact-sales-mobile a:hover { - background-color: rgb(0 0 0 / 80%); + background-color: #b71c1c; color: var(--text-color-inverse); } @@ -1005,7 +1005,7 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after { justify-content: center; height: 32px; padding: 0 16px; - background-color: rgb(0 0 0 / 95%); + background-color: #d32f2f; color: var(--text-color-inverse); border-radius: 16px; font-size: 12px; @@ -1015,7 +1015,7 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after { } header nav .nav-primary-tools .contact-sales-mobile a:hover { - background-color: rgb(0 0 0 / 80%); + background-color: #b71c1c; color: var(--text-color-inverse); } diff --git a/blocks/teaser/teaser.css b/blocks/teaser/teaser.css index ffc5b05..85d6ed8 100644 --- a/blocks/teaser/teaser.css +++ b/blocks/teaser/teaser.css @@ -173,14 +173,14 @@ main div.teaser-wrapper:has(.teaser.hero) { margin-top: var(--spacing-l); } -/* CTA Button - Inverted (white on dark) */ +/* CTA Button - Red on dark hero */ .teaser.hero .teaser-cta-container a.button, .teaser.hero .teaser-cta-container > a:first-child { display: inline-block; padding: 12px 28px; - background-color: rgb(255 255 255 / 95%); - color: var(--color-border-dark); - border: 2px solid rgb(255 255 255 / 95%); + background-color: #d32f2f; + color: rgb(255 255 255 / 95%); + border: 2px solid #d32f2f; border-radius: var(--button-border-radius); font-size: 14px; font-weight: 600; @@ -190,9 +190,9 @@ main div.teaser-wrapper:has(.teaser.hero) { .teaser.hero .teaser-cta-container a.button:hover, .teaser.hero .teaser-cta-container > a:first-child:hover { - background-color: hsl(0deg 0% 74.1% / 96.25%); - border-color: hsl(0deg 0% 74.1% / 96.25%); - color: #000; + background-color: #b71c1c; + border-color: #b71c1c; + color: #fff; text-decoration: none; } diff --git a/styles/styles.css b/styles/styles.css index edbe97f..752c782 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -87,17 +87,17 @@ --button-font-weight: 500; --button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - /* Button Primary - Matching Motorola Solutions */ - --button-primary-bg: rgb(0 0 0 / 95%); + /* Button Primary */ + --button-primary-bg: #d32f2f; --button-primary-color: rgb(255 255 255 / 95%); - --button-primary-bg-hover: #000; + --button-primary-bg-hover: #b71c1c; --button-primary-border: 1px solid transparent; /* Button Secondary */ --button-secondary-bg: transparent; - --button-secondary-color: rgb(0 0 0 / 95%); - --button-secondary-border: 1px solid rgb(0 0 0 / 40%); - --button-secondary-bg-hover: rgb(0 0 0 / 5%); + --button-secondary-color: #d32f2f; + --button-secondary-border: 1px solid #d32f2f; + --button-secondary-bg-hover: rgb(211 47 47 / 8%); /* ===== LAYOUT ===== */ --nav-height: 64px; @@ -372,13 +372,13 @@ button.secondary:hover { /* Button on dark backgrounds */ .section.dark a.button:any-link, .section.dark button { - background-color: var(--background-color); - color: var(--text-color); + background-color: #d32f2f; + color: rgb(255 255 255 / 95%); } .section.dark a.button:hover, .section.dark button:hover { - background-color: var(--light-color); + background-color: #b71c1c; } .section.dark a.button.secondary, @@ -388,15 +388,15 @@ button.secondary:hover { color: var(--text-color-inverse); } -/* Button Inverted - White button for dark backgrounds */ +/* Button Inverted - for dark backgrounds */ a.button.inverted, button.inverted, .button-inverted { display: inline-block; padding: 12px 28px; - background-color: rgb(255 255 255 / 95%); - color: #1a1a1a; - border: 2px solid rgb(255 255 255 / 95%); + background-color: #d32f2f; + color: rgb(255 255 255 / 95%); + border: 2px solid #d32f2f; border-radius: var(--button-border-radius); font-size: var(--body-font-size-s); font-weight: 600; @@ -407,9 +407,9 @@ button.inverted, a.button.inverted:hover, button.inverted:hover, .button-inverted:hover { - background-color: hsl(0deg 0% 74.1% / 96.25%); - border-color: hsl(0deg 0% 74.1% / 96.25%); - color: #000; + background-color: #b71c1c; + border-color: #b71c1c; + color: #fff; text-decoration: none; }