diff --git a/assets/css/animations.css b/assets/css/animations.css
index 920b401..91e5940 100644
--- a/assets/css/animations.css
+++ b/assets/css/animations.css
@@ -1009,6 +1009,46 @@
color: var(--ls-button-arrow-compact-colour-active);
}
+/* CTA fill buttons on fixed-dark cards: pin text/icon colour to the on-dark
+ tokens so the fill button's rest and hover states stay readable regardless
+ of the site's light/dark style variation. The background is also pinned to
+ a dark surface token — text--on-dark against the default brand/cta fill
+ colour fails WCAG contrast (~1.2:1) once the fill fully reveals on hover. */
+.ls-cta-band__button .wp-block-button__link,
+.ls-cta-inline__button .wp-block-button__link,
+.ls-cta-reassurance__button .wp-block-button__link {
+ color: var(--wp--custom--color--text--on-dark);
+ --ls-button-fill-background: var(--wp--custom--color--surface--on-dark-card);
+ --ls-button-fill-icon-colour: var(--wp--custom--color--text--on-dark);
+ --ls-button-fill-hover-text: var(--wp--custom--color--text--on-dark);
+}
+
+/* CTA band: the secondary link's arrow colours aren't part of the group's
+ saved block attributes, so they're defined here instead of as an inline
+ style on the wrapper (which would be dropped on save). */
+.ls-cta-band__actions {
+ --ls-link-arrow-colour: var(--wp--custom--color--text--on-dark);
+ --ls-link-arrow-hover-colour: var(--wp--custom--color--text--brand);
+}
+
+/* CTA strip: the arrow sits next to the glass button rather than nested in
+ its rich text, so it needs its own hover contract tied to the shared
+ wrapper. */
+.ls-cta-strip__cta-wrap {
+ position: relative;
+ display: inline-flex;
+}
+
+.ls-cta-strip__button-arrow {
+ transition: transform var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--emphasised), color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard);
+}
+
+.ls-cta-strip__cta-wrap:hover .ls-cta-strip__button-arrow,
+.ls-cta-strip__cta-wrap:focus-within .ls-cta-strip__button-arrow {
+ color: var(--wp--custom--color--text--brand);
+ transform: translateX(0.25em);
+}
+
@media (prefers-reduced-motion: reduce) {
.wp-block-button.is-style-glass-button .wp-block-button__link,
.wp-block-button.is-style-button-arrow-compact .wp-block-button__link,
@@ -1027,4 +1067,11 @@
:is(.is-style-card-solutions, .is-style-card-solutions-accent):focus-within .wp-block-button.is-style-button-arrow-compact .wp-block-button__link::after {
transform: none;
}
+ .ls-cta-strip__button-arrow {
+ transition: none;
+ }
+ .ls-cta-strip__cta-wrap:hover .ls-cta-strip__button-arrow,
+ .ls-cta-strip__cta-wrap:focus-within .ls-cta-strip__button-arrow {
+ transform: none;
+ }
}
diff --git a/assets/icons/arrow-right.svg b/assets/icons/arrow-right.svg
new file mode 100644
index 0000000..0afaf5d
--- /dev/null
+++ b/assets/icons/arrow-right.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/chat.svg b/assets/icons/chat.svg
new file mode 100644
index 0000000..99a8020
--- /dev/null
+++ b/assets/icons/chat.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/check.svg b/assets/icons/check.svg
new file mode 100644
index 0000000..63acbf0
--- /dev/null
+++ b/assets/icons/check.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/phone.svg b/assets/icons/phone.svg
new file mode 100644
index 0000000..6d1ebe5
--- /dev/null
+++ b/assets/icons/phone.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/star.svg b/assets/icons/star.svg
new file mode 100644
index 0000000..e544193
--- /dev/null
+++ b/assets/icons/star.svg
@@ -0,0 +1 @@
+
diff --git a/patterns/cta/cta-consultation-band.php b/patterns/cta/cta-consultation-band.php
new file mode 100644
index 0000000..6a6da61
--- /dev/null
+++ b/patterns/cta/cta-consultation-band.php
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+