From 7e27a5764100784b967cfe4ab8ebe6825befdfee Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Sat, 28 Feb 2026 13:19:34 -0500 Subject: [PATCH 1/4] mayura.css and related fixes --- blocks/banner/banner.css | 6 +- blocks/cards-icon/_cards-icon.json | 2 +- blocks/cards-icon/cards-icon.css | 76 +++---------- blocks/cards-icon/cards-icon.js | 2 +- blocks/cards/cards.css | 4 + blocks/footer/footer.css | 4 + component-definition.json | 2 +- component-models.json | 158 +++++++++++++++++++++++----- models/_multi-section.json | 27 +++-- models/_section.json | 141 ++++--------------------- models/partials/_bg-fit.json | 4 + models/partials/_section-style.json | 36 ------- models/partials/_sizes.json | 4 + models/partials/_widths.json | 28 +++++ styles/styles.css | 23 ++-- templates/mayura/mayura.css | 82 ++------------- 16 files changed, 248 insertions(+), 351 deletions(-) delete mode 100644 models/partials/_section-style.json create mode 100644 models/partials/_widths.json diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index cec007b..785db41 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -85,7 +85,7 @@ } .banner-heading { - max-width: 500px; + max-width: 60%; padding-top: 0; margin-top: var(--spacing-l); } @@ -140,13 +140,13 @@ flex-direction: column; position: relative; max-width: 1100px; - padding-left: 92px; justify-content: center; + min-height: 400px; } .banner-heading { - max-width: 500px; margin-top: 0; + padding: var(--spacing-s) var(--spacing-xxl); } .banner-heading h2 { diff --git a/blocks/cards-icon/_cards-icon.json b/blocks/cards-icon/_cards-icon.json index d0d020d..1dfb6b9 100644 --- a/blocks/cards-icon/_cards-icon.json +++ b/blocks/cards-icon/_cards-icon.json @@ -8,7 +8,7 @@ "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { - "name": "cards-icon", + "name": "Cards Icon", "model": "cards-icon", "filter": "cards-icon" } diff --git a/blocks/cards-icon/cards-icon.css b/blocks/cards-icon/cards-icon.css index 1e12447..98e2af0 100644 --- a/blocks/cards-icon/cards-icon.css +++ b/blocks/cards-icon/cards-icon.css @@ -8,8 +8,7 @@ ================================================================= */ .cards-icon .cards-icon-grid { - margin: 0; - padding: 0; + padding: var(--spacing-xs) 0; } .cards-icon .cards-icon-card-link { @@ -19,13 +18,11 @@ .cards-icon .cards-icon-image { line-height: 0; - flex-shrink: 0; - height: 70px; } .cards-icon .cards-icon-image img { object-fit: contain; - border-radius: 0; + aspect-ratio: 1/1; } .cards-icon .cards-icon-body h3 { @@ -86,12 +83,13 @@ min-width: 0; } -.cards-icon.image-left a h3 { +.cards-icon.image-left .cards-icon-card-link { color: var(--color-purple-800); text-decoration: none; } -.dark-scheme .cards-icon.image-left a.cards-icon-link { +.dark-scheme .cards-icon.image-left .cards-icon-card-link, +.dark-scheme .cards-icon.image-top .cards-icon-card-link { color: var(--color-white); } @@ -101,16 +99,13 @@ ================================================================= */ .cards-icon.image-top { - margin: var(--spacing-s) 0; min-height: 175px; } .cards-icon.image-top .cards-icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 16px; - padding: 0; - margin-bottom: var(--spacing-m); + gap: var(--spacing-xxs) 16px; } .cards-icon.image-top .cards-icon-card { @@ -123,8 +118,7 @@ border: 1px var(--text-color) solid; border-radius: 12px; width: 100%; - gap: 10px; - min-height: 140px; + min-height: 146px; justify-content: flex-start; position: relative; box-sizing: border-box; @@ -135,13 +129,6 @@ display: flex; justify-content: center; align-items: center; - margin-bottom: 4px; -} - -.cards-icon.image-top .cards-icon-image img { - width: 64px; - height: 64px; - object-fit: contain; } .cards-icon.image-top .cards-icon-body { @@ -182,7 +169,7 @@ flex-direction: row; align-items: center; height: 90px; - padding: 0 16px; + padding: 0 20px; margin-bottom: var(--spacing-s); background: var(--color-white); border-radius: 12px; @@ -196,19 +183,11 @@ .cards-icon.image-left-arrow .cards-icon-image { flex-shrink: 0; - width: 70px; display: flex; align-items: center; justify-content: center; } -.cards-icon.image-left-arrow .cards-icon-image img { - width: 100%; - height: 100%; - object-fit: contain; - border-radius: 4px; -} - .cards-icon.image-left-arrow .cards-icon-body { flex: 1; margin: 0; @@ -258,10 +237,6 @@ transform: translateY(-2px); } -/* ================================================================= - TABLET (600px+) - ================================================================= */ - @media (width >= 600px) { .cards-icon.image-left .cards-icon-card { flex-direction: row; @@ -270,26 +245,15 @@ } /* Important Documents: tighter grid, constrained width */ - .cards-icon.image-top .cards-icon-grid { - gap: var(--spacing-xs) var(--spacing-s); - max-width: 80%; - margin-left: auto; - margin-right: auto; - } .cards-icon.image-top .cards-icon-card { padding: 20px var(--spacing-xs); gap: 6px; } - .cards-icon.image-top .cards-icon-image { - margin-bottom: 3px; - } - - .cards-icon.image-top .cards-icon-image img { - width: 56px; - height: 56px; - } + .cards-icon.image-top .cards-icon-grid { + gap: var(--spacing-xxs) var(--spacing-s); +} /* Related Search: 2-column grid */ .cards-icon.image-left-arrow .cards-icon-grid { @@ -300,11 +264,6 @@ .cards-icon.image-left-arrow .cards-icon-card { margin-bottom: 0; } - - .cards-icon.image-left-arrow .cards-icon-image { - width: 80px; - height: 70px; - } } @media (width >= 900px) { @@ -321,21 +280,13 @@ .cards-icon.image-top .cards-icon-grid { grid-template-columns: repeat(4, 175px); grid-auto-rows: 175px; - max-width: 900px; - justify-content: space-between; - margin-left: auto; - margin-right: auto; + justify-content: space-evenly; } .cards-icon.image-top .cards-icon-card { width: 175px; height: 175px; - padding: var(--spacing-s) 26px; - } - - .cards-icon.image-top .cards-icon-image img { - width: 64px; - height: 64px; + padding: var(--spacing-s); } .cards-icon.image-top .cards-icon-body { @@ -356,6 +307,5 @@ grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; - margin: 0 auto; } } diff --git a/blocks/cards-icon/cards-icon.js b/blocks/cards-icon/cards-icon.js index 308f03f..c0a658f 100644 --- a/blocks/cards-icon/cards-icon.js +++ b/blocks/cards-icon/cards-icon.js @@ -44,7 +44,7 @@ export default function decorate(block) { } }); outer.querySelectorAll('picture > img').forEach((img) => { - const optimizedPic = createOptimizedPicture(img.src, img.alt, false, [{ width: '400' }]); + const optimizedPic = createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]); moveInstrumentation(img, optimizedPic.querySelector('img')); img.closest('picture').replaceWith(optimizedPic); }); diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 3025805..00eb337 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -2008,4 +2008,8 @@ justify-content: center; } + .explore-other-cards .swiper-slide .cards-card-body h3 { + font-size: var(--heading-font-size-xs); + color: var(--color-gray-200); + } } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 0844fa5..6b6162a 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -543,6 +543,10 @@ footer .footer>div .section>div { } @media (width >= 768px) { + .footer > div > div { + padding: 0 36px; + } + .footer>div>div:nth-child(2)>div>ul>li:nth-child(2) { text-align: center; } diff --git a/component-definition.json b/component-definition.json index e6a494c..caaf60d 100644 --- a/component-definition.json +++ b/component-definition.json @@ -206,7 +206,7 @@ "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { - "name": "cards-icon", + "name": "Cards Icon", "model": "cards-icon", "filter": "cards-icon" } diff --git a/component-models.json b/component-models.json index 63b9544..c2daa34 100644 --- a/component-models.json +++ b/component-models.json @@ -358,27 +358,31 @@ }, { "name": "XXL", - "value": "size-xxl" + "value": "xxl" }, { "name": "XL", - "value": "size-xl" + "value": "xl" }, { "name": "L", - "value": "size-l" + "value": "l" }, { "name": "M", - "value": "size-m" + "value": "m" }, { "name": "S", - "value": "size-s" + "value": "s" }, { "name": "XS", - "value": "size-xs" + "value": "xs" + }, + { + "name": "XXS", + "value": "xxs" } ] }, @@ -441,10 +445,37 @@ "collapsible": true, "fields": [ { - "component": "text", + "component": "select", "name": "grid", - "label": "Grid layout (enter # of columns, 2-6)", - "valueType": "string" + "label": "Grid layout - # of columns (for device widths > 600px)", + "valueType": "string", + "description": "hint: 3 = 3 blocks, each 33% wide side-by-side", + "options": [ + { + "name": "1", + "value": "1" + }, + { + "name": "2", + "value": "2" + }, + { + "name": "3", + "value": "3" + }, + { + "name": "4", + "value": "4" + }, + { + "name": "5", + "value": "5" + }, + { + "name": "6", + "value": "6" + } + ] }, { "component": "select", @@ -458,47 +489,63 @@ }, { "name": "XXL", - "value": "size-xxl" + "value": "xxl" }, { "name": "XL", - "value": "size-xl" + "value": "xl" }, { "name": "L", - "value": "size-l" + "value": "l" }, { "name": "M", - "value": "size-m" + "value": "m" }, { "name": "S", - "value": "size-s" + "value": "s" }, { "name": "XS", - "value": "size-xs" + "value": "xs" + }, + { + "name": "XXS", + "value": "xxs" } ] }, { "component": "select", "name": "containerwidth", - "label": "Inner div width", + "label": "Inner section container max-width (unrelated to grid layout)", "valueType": "string", - "description": "unrelated to grid layout", + "description": "hint: 6 = default (full content width), 3 = half of that, etc.", "options": [ { - "name": "33%", + "name": "1", + "value": "1" + }, + { + "name": "2", "value": "2" }, { - "name": "66%", + "name": "3", + "value": "3" + }, + { + "name": "4", "value": "4" }, { - "name": "100%", + "name": "5", + "value": "5" + }, + { + "name": "6", "value": "6" } ] @@ -552,6 +599,10 @@ { "name": "none", "value": "none" + }, + { + "name": "fill (default)", + "value": "fill" } ] }, @@ -672,6 +723,10 @@ { "name": "none", "value": "none" + }, + { + "name": "fill (default)", + "value": "fill" } ] }, @@ -774,10 +829,37 @@ "collapsible": true, "fields": [ { - "component": "text", + "component": "select", "name": "grid", - "label": "Grid layout (enter # of columns, 2-6)", - "valueType": "string" + "label": "Grid layout - # of columns (for device widths > 600px)", + "valueType": "string", + "description": "hint: 3 = 3 blocks, each 33% wide side-by-side", + "options": [ + { + "name": "1", + "value": "1" + }, + { + "name": "2", + "value": "2" + }, + { + "name": "3", + "value": "3" + }, + { + "name": "4", + "value": "4" + }, + { + "name": "5", + "value": "5" + }, + { + "name": "6", + "value": "6" + } + ] }, { "component": "select", @@ -812,26 +894,42 @@ { "name": "XS", "value": "xs" + }, + { + "name": "XXS", + "value": "xxs" } ] }, { "component": "select", "name": "containerwidth", - "label": "Inner div width", + "label": "Inner section container max-width (unrelated to grid layout)", "valueType": "string", - "description": "unrelated to grid layout", + "description": "hint: 6 = default (full content width), 3 = half of that, etc.", "options": [ { - "name": "33%", + "name": "1", + "value": "1" + }, + { + "name": "2", "value": "2" }, { - "name": "66%", + "name": "3", + "value": "3" + }, + { + "name": "4", "value": "4" }, { - "name": "100%", + "name": "5", + "value": "5" + }, + { + "name": "6", "value": "6" } ] @@ -885,6 +983,10 @@ { "name": "none", "value": "none" + }, + { + "name": "fill (default)", + "value": "fill" } ] }, diff --git a/models/_multi-section.json b/models/_multi-section.json index 47b9ac2..76c930b 100644 --- a/models/_multi-section.json +++ b/models/_multi-section.json @@ -85,10 +85,16 @@ "collapsible": true, "fields": [ { - "component": "text", + "component": "select", "name": "grid", - "label": "Grid layout (enter # of columns, 2-6)", - "valueType": "string" + "label": "Grid layout - # of columns (for device widths > 600px)", + "valueType": "string", + "description": "hint: 3 = 3 blocks, each 33% wide side-by-side", + "options": [ + { + "...": "./partials/_widths.json#/options" + } + ] }, { "component": "select", @@ -104,21 +110,12 @@ { "component": "select", "name": "containerwidth", - "label": "Inner div width", + "label": "Inner section container max-width (unrelated to grid layout)", "valueType": "string", - "description": "unrelated to grid layout", + "description": "hint: 6 = default (full content width), 3 = half of that, etc.", "options": [ { - "name": "33%", - "value": "2" - }, - { - "name": "66%", - "value": "4" - }, - { - "name": "100%", - "value": "6" + "...": "./partials/_widths.json#/options" } ] } diff --git a/models/_section.json b/models/_section.json index 1047ae9..c32dd1b 100644 --- a/models/_section.json +++ b/models/_section.json @@ -82,32 +82,7 @@ "valueType": "string", "options": [ { - "name": "Default", - "value": "" - }, - { - "name": "XXL", - "value": "size-xxl" - }, - { - "name": "XL", - "value": "size-xl" - }, - { - "name": "L", - "value": "size-l" - }, - { - "name": "M", - "value": "size-m" - }, - { - "name": "S", - "value": "size-s" - }, - { - "name": "XS", - "value": "size-xs" + "...": "./partials/_sizes.json#/options" } ] }, @@ -170,10 +145,16 @@ "collapsible": true, "fields": [ { - "component": "text", + "component": "select", "name": "grid", - "label": "Grid layout (enter # of columns, 2-6)", - "valueType": "string" + "label": "Grid layout - # of columns (for device widths > 600px)", + "valueType": "string", + "description": "hint: 3 = 3 blocks, each 33% wide side-by-side", + "options": [ + { + "...": "./partials/_widths.json#/options" + } + ] }, { "component": "select", @@ -182,53 +163,19 @@ "valueType": "string", "options": [ { - "name": "Default", - "value": "" - }, - { - "name": "XXL", - "value": "size-xxl" - }, - { - "name": "XL", - "value": "size-xl" - }, - { - "name": "L", - "value": "size-l" - }, - { - "name": "M", - "value": "size-m" - }, - { - "name": "S", - "value": "size-s" - }, - { - "name": "XS", - "value": "size-xs" + "...": "./partials/_sizes.json#/options" } ] }, { "component": "select", "name": "containerwidth", - "label": "Inner div width", + "label": "Inner section container max-width (unrelated to grid layout)", "valueType": "string", - "description": "unrelated to grid layout", + "description": "hint: 6 = default (full content width), 3 = half of that, etc.", "options": [ { - "name": "33%", - "value": "2" - }, - { - "name": "66%", - "value": "4" - }, - { - "name": "100%", - "value": "6" + "...": "./partials/_widths.json#/options" } ] } @@ -271,16 +218,7 @@ "value": "cover", "options": [ { - "name": "cover", - "value": "cover" - }, - { - "name": "contain", - "value": "contain" - }, - { - "name": "none", - "value": "none" + "...": "./partials/_bg-fit.json#/options" } ] }, @@ -292,24 +230,7 @@ "value": "center", "options": [ { - "name": "center", - "value": "center" - }, - { - "name": "top left", - "value": "top left" - }, - { - "name": "top right", - "value": "top right" - }, - { - "name": "bottom left", - "value": "bottom left" - }, - { - "name": "bottom right", - "value": "bottom right" + "...": "./partials/_bg-position.json#/options" } ] }, @@ -391,16 +312,7 @@ "value": "cover", "options": [ { - "name": "cover", - "value": "cover" - }, - { - "name": "contain", - "value": "contain" - }, - { - "name": "none", - "value": "none" + "...": "./partials/_bg-fit.json#/options" } ] }, @@ -412,24 +324,7 @@ "value": "center", "options": [ { - "name": "center", - "value": "center" - }, - { - "name": "top left", - "value": "top left" - }, - { - "name": "top right", - "value": "top right" - }, - { - "name": "bottom left", - "value": "bottom left" - }, - { - "name": "bottom right", - "value": "bottom right" + "...": "./partials/_bg-position.json#/options" } ] } diff --git a/models/partials/_bg-fit.json b/models/partials/_bg-fit.json index a74e915..8dcd5c9 100644 --- a/models/partials/_bg-fit.json +++ b/models/partials/_bg-fit.json @@ -11,6 +11,10 @@ { "name": "none", "value": "none" + }, + { + "name": "fill (default)", + "value": "fill" } ] } \ No newline at end of file diff --git a/models/partials/_section-style.json b/models/partials/_section-style.json deleted file mode 100644 index a3cdf46..0000000 --- a/models/partials/_section-style.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "options": [ - { - "name": "Center", - "value": "center" - }, - { - "name": "Light scheme", - "value": "light-scheme" - }, - { - "name": "Dark scheme", - "value": "dark-scheme" - }, - { - "name": "Hide in mobile", - "value": "hide-mobile" - }, - { - "name": "Hide in desktop", - "value": "hide-desktop" - }, - { - "name": "Entrance Animation", - "value": "entrance-animation" - }, - { - "name": "(Tabs) Blue with White Text", - "value": "blue-white-text" - }, - { - "name": "(Tabs) Silver with Blue Text", - "value": "silver-blue-text" - } - ] -} \ No newline at end of file diff --git a/models/partials/_sizes.json b/models/partials/_sizes.json index cb848e5..40aa6f8 100644 --- a/models/partials/_sizes.json +++ b/models/partials/_sizes.json @@ -27,6 +27,10 @@ { "name": "XS", "value": "xs" + }, + { + "name": "XXS", + "value": "xxs" } ] } \ No newline at end of file diff --git a/models/partials/_widths.json b/models/partials/_widths.json new file mode 100644 index 0000000..7a250ac --- /dev/null +++ b/models/partials/_widths.json @@ -0,0 +1,28 @@ +{ + "options": [ + { + "name": "1", + "value": "1" + }, + { + "name": "2", + "value": "2" + }, + { + "name": "3", + "value": "3" + }, + { + "name": "4", + "value": "4" + }, + { + "name": "5", + "value": "5" + }, + { + "name": "6", + "value": "6" + } + ] +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 008caf5..cbee88d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -30,7 +30,7 @@ --color-blue-800: #2d3679; --color-blue-900: #182659; --color-purple-400: #563b80; - --color-purple-800: #293871; + --color-purple-800: #293871; /* mayura */ --color-white: #fff; --color-white-100: #f5f5f5; --color-white-200: #eee; /* #e9e9e9 */ @@ -210,7 +210,7 @@ h3 { } h4 { - font-size: var(--heading-font-size-m); + font-size: var(--heading-font-size-s); } h5 { @@ -498,7 +498,6 @@ main>.section:first-of-type { margin-top: 0; } -/* stylelint-disable-next-line no-descending-specificity */ .section { --top-bottom-spacing: 0; --section-container-width: var(--grid-container-width); @@ -600,14 +599,26 @@ main>.section:first-of-type { margin: 0 auto; } + &.container-1 { + --section-container-width: calc(var(--grid-column-width) * 2); + } + &.container-2 { --section-container-width: calc(var(--grid-column-width) * 4); } + &.container-3 { + --section-container-width: calc(var(--grid-column-width) * 6); + } + &.container-4 { --section-container-width: calc(var(--grid-column-width) * 8); } + &.container-5 { + --section-container-width: calc(var(--grid-column-width) * 10); + } + &.container-6 { --section-container-width: var(--grid-container-width); } @@ -681,7 +692,6 @@ header:has(nav[aria-expanded="true"]) #grnt-app-mob { .has-bg-images { position: relative; - /* stylelint-disable-next-line no-descending-specificity */ > div { position: relative; } @@ -831,7 +841,7 @@ The height and width are set to 200 assuming the decorations won't be larger. */ .section.has-decorations::after { content: ''; position: absolute; - bottom: -80px; + bottom: -30px; right: 0; width: 200px; height: 200px; @@ -839,7 +849,6 @@ The height and width are set to 200 assuming the decorations won't be larger. */ background-size: contain; background-repeat: no-repeat; background-position: bottom right; - z-index: 1; pointer-events: none; } @@ -932,7 +941,7 @@ The height and width are set to 200 assuming the decorations won't be larger. */ } main>.section>div { - padding: 0 32px; + padding: 0 var(--spacing-m); } main .breadcrumbs { diff --git a/templates/mayura/mayura.css b/templates/mayura/mayura.css index 071b843..99697b2 100644 --- a/templates/mayura/mayura.css +++ b/templates/mayura/mayura.css @@ -4,6 +4,7 @@ --btn-tertiary-border: var(--color-transparent); --btn-tertiary-text: var(--text-color); } + /* * Scrollbar with custom handle (mayura template only). * Uses native Swiper scrollbar; handle image via scrollbar-handle.svg. @@ -34,7 +35,7 @@ top: 50%; transform: translateY(-50%); height: 2px; - background: rgba(120 110 100 / 50%); + background: rgb(120 110 100 / 50%); border-radius: 2px; pointer-events: none; } @@ -56,7 +57,7 @@ height: 10px; flex-shrink: 0; background: url('/icons/scrollbar-handle.svg') center / contain no-repeat; - filter: brightness(0.4) drop-shadow(0 1px 2px rgba(0 0 0 / 20%)); + filter: brightness(0.4) drop-shadow(0 1px 2px rgb(0 0 0 / 20%)); } .mayura .cards .swiper-pagination-handle:active { @@ -67,7 +68,7 @@ /* Dark scheme - track line */ .mayura .dark-scheme .cards .swiper-scrollbar::before { - background: rgba(255 255 255 / 30%); + background: rgb(255 255 255 / 30%); } /* Dark scheme - unset filter on handle */ @@ -81,7 +82,8 @@ } .mayura .cards-container h2, -.mayura .tabs-container h2 { +.mayura .tabs-container h2, +.mayura .cards-icon-container h2 { text-align: center; font-style: normal; font-weight: 700; @@ -89,7 +91,7 @@ background: var(--gradient-red); background-clip: text; -webkit-background-clip: text; - -webkit-text-fill-color: rgba(0 0 0 / 0%); + -webkit-text-fill-color: rgb(0 0 0 / 0%); } .mayura .columns-container h2 { @@ -101,14 +103,14 @@ background: var(--gradient-silver); background-clip: text; -webkit-background-clip: text; - -webkit-text-fill-color: rgba(0 0 0 / 0%); + -webkit-text-fill-color: rgb(0 0 0 / 0%); } .mayura .banner-container .banner-heading h2 { background: #fbf8f2; background-clip: text; -webkit-background-clip: text; - -webkit-text-fill-color: rgba(0 0 0 / 0%); + -webkit-text-fill-color: rgb(0 0 0 / 0%); text-align: left; font-size: var(--heading-font-size-xl); } @@ -118,41 +120,6 @@ padding-top: 20px; } -.mayura .cards.related-search .benefit-cards .cards-card-body h3 a:hover { -color: var(--dark-red-color); -} - -.mayura .section[data-id="get-in-touch"] h3 { - font-size: var(--heading-font-size-s); -} - -.mayura .section[data-id="get-in-touch"] .cards.related-search { - .grid-cards { - grid-template-columns: repeat(3, 1fr) !important; - gap: 4px; - } - -.benefit-cards { - background-color: transparent; - box-shadow: none; - - &::after { - display: none; - } - - h3 { - font-weight: 700; - color: #293871; - } -} -} - -.mayura .cards.important-documents .important-documents-card { - background: var(--gradient-earn-rewards); - box-shadow: none; - border: 1px var(--text-color) solid; -} - .mayura .accordion .accordion-cta.button{ background: var(--gradient-pewter); color: var(--color-white); @@ -167,43 +134,12 @@ color: var(--dark-red-color); line-height: 1.5; } -.mayura .sticky-cta.block { - background: rgba(239 239 239 / 60%) -} - -.mayura .sticky-cta-subtitle-content { - color: rgb(26 26 26); - padding-top: 10px; - font-size: var(--body-font-size-s); -} - -.mayura .sticky-cta-container .sticky-cta-content .button, .mayura .cta-sticky-container .cta-sticky.block .button { background: var(--gradient-pewter); border: none; } -@media (width >= 768px) { - .mayura .sticky-cta-container { - display: none; - } -} - @media (width <= 900px) { - .mayura .section[data-id="get-in-touch"] .cards.related-search .benefit-cards { - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - padding-right:0; - height: unset; - margin-top: var(--spacing-s); - - .cards-card-body { - padding-right: 0; - } - } - .mayura .cards-container h2, .mayura .tabs-container h2 { text-align: center; From c1f0816b97150e6aa2689e61a201a6f05c09a39f Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Sat, 28 Feb 2026 13:51:39 -0500 Subject: [PATCH 2/4] add icon height for cls --- scripts/aem.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/scripts/aem.js b/scripts/aem.js index 4b2f0be..669c284 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -496,6 +496,7 @@ function decorateButtons(element) { * @param {string} [alt] alt text to be added to icon */ function decorateIcon(span, prefix = '', alt = '') { + if (span.hasChildNodes()) return; // already decorated const iconName = Array.from(span.classList) .find((c) => c.startsWith('icon-')) .substring(5); @@ -504,6 +505,8 @@ function decorateIcon(span, prefix = '', alt = '') { img.src = `${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`; img.alt = alt ? `${alt} ${iconName}` : iconName; img.loading = 'lazy'; + img.width = 24; + img.height = 24; span.append(img); } From 8868f45e18caaed82432a5572a826321e9cce384 Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Sat, 28 Feb 2026 14:32:03 -0500 Subject: [PATCH 3/4] conic silver gradient color --- styles/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/styles.css b/styles/styles.css index cbee88d..4f0778e 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -59,6 +59,7 @@ --gradient-black: linear-gradient(to bottom, transparent 0%, black 100%); --gradient-pewter: linear-gradient(270deg, #332B28 0%, #514A44 21.11%, #8B837D 50.14%, #625A50 71.74%, var(--color-pewter) 90.18%, #433C32 100%); --gradient-silver: linear-gradient(208deg, #C8C6C6 0%, #F1F0F0 53.5%, #C8C6C6 100%); + --gradient-conic-silver: conic-gradient(from 0deg at 50% 50%, rgb(157 157 157 / 100%) 1%, rgb(255 255 255 / 100%) 10%, rgb(157 157 157 / 100%) 35%, rgb(255 255 255 / 100%) 53%, rgb(206 206 206 / 100%) 71%, rgb(255 255 255 / 100%) 80%, rgb(157 157 157 / 100%) 100%); --gradient-metal-blue: linear-gradient(308deg, #110140 4.16%, #1E2A8E 44.91%, #010740 88.8%); --gradient-metal-silver: linear-gradient(138deg, #999 -15.44%, #EFEFEF 0.15%, #CACACA 18.04%, #EFEFEF 37.09%, #CACACA 58.44%, #999 76.91%, #EFEFEF 87.3%); --modal-backdrop-gradient: linear-gradient(to bottom, rgb(200 198 198 / 70%) 0, rgb(200 198 198 / 95%) 1px, #C8C6C6 250px, #F1F0F0 50%, #C8C6C6 100%); From 35cb901edf6afca92d3e1fc0f184a2a43fb53aed Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Sat, 28 Feb 2026 14:47:28 -0500 Subject: [PATCH 4/4] fix new conic gradient --- styles/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index 4f0778e..f4f396d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -59,7 +59,7 @@ --gradient-black: linear-gradient(to bottom, transparent 0%, black 100%); --gradient-pewter: linear-gradient(270deg, #332B28 0%, #514A44 21.11%, #8B837D 50.14%, #625A50 71.74%, var(--color-pewter) 90.18%, #433C32 100%); --gradient-silver: linear-gradient(208deg, #C8C6C6 0%, #F1F0F0 53.5%, #C8C6C6 100%); - --gradient-conic-silver: conic-gradient(from 0deg at 50% 50%, rgb(157 157 157 / 100%) 1%, rgb(255 255 255 / 100%) 10%, rgb(157 157 157 / 100%) 35%, rgb(255 255 255 / 100%) 53%, rgb(206 206 206 / 100%) 71%, rgb(255 255 255 / 100%) 80%, rgb(157 157 157 / 100%) 100%); + --gradient-conic-silver: conic-gradient(from 0deg at 50% 50%, rgb(194 194 194 / 100%) 0%, rgb(181 181 181 / 100%) 7%, rgb(238 238 238 / 100%) 14%, rgb(157 157 157 / 100%) 35%, rgb(255 255 255 / 100%) 58%, rgb(206 206 206 / 100%) 63%, rgb(235 234 234 / 100%) 80%, rgb(194 194 194 / 100%) 99%); --gradient-metal-blue: linear-gradient(308deg, #110140 4.16%, #1E2A8E 44.91%, #010740 88.8%); --gradient-metal-silver: linear-gradient(138deg, #999 -15.44%, #EFEFEF 0.15%, #CACACA 18.04%, #EFEFEF 37.09%, #CACACA 58.44%, #999 76.91%, #EFEFEF 87.3%); --modal-backdrop-gradient: linear-gradient(to bottom, rgb(200 198 198 / 70%) 0, rgb(200 198 198 / 95%) 1px, #C8C6C6 250px, #F1F0F0 50%, #C8C6C6 100%);