Cta

Fields
PHP
SCSS
JavaScript
Pages
JSON
Notes

There are no ACF fields assigned to this component.

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-cta {
	overflow: hidden;
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(80);

	.add-offset-right {

		@include bp($md) {
			padding-right: 8.333333333333334%;
		}

		&.has-border-right {
			&:first-of-type {
				position: relative;
				padding-bottom: 2.5rem;
				margin-bottom: 2.5rem;

				@include bp($lg) {
					padding-bottom: 0;
					margin-bottom: 0;
				}

				&:after {
					content: '';
					display: block;
					height: 1px;
					width: 90%;
					background: $white;
					position: absolute;
					bottom: 0;
					margin: 0 auto;

					@include bp($md) {
						width: 100%;
						margin: 0;
						left: 0;
					}

					@include bp($lg) {
						height: 100%;
						width: 1px;
						right: 0;
						left: auto;
						top: 0;
					}
				}
			}
		}

	}

	@include bp($md) {
		padding-top: rem-calc(160);
		padding-bottom: rem-calc(160);
	}

	&--has-background-image {
		&:after {
			content: '';
			background: linear-gradient(270deg, rgba(2, 33, 46, 0) 24.75%, #02212E 100%);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
		.block-cta__content {
			position: relative;
			z-index: 1;
		}
		h2, h3, p {
			--text-color: var(--white);
		}
	}

	&--short {
		padding-top: rem-calc(32);
		padding-bottom: rem-calc(32);

		@include bp($md) {
			padding-top: rem-calc(60);
			padding-bottom: rem-calc(60);
		}
	}

	.container {
		position: relative;
		z-index: 5;
	}

	&__content {
		text-align: center;

		:last-child {
			margin-bottom: 0;
		}

		.dd-wordpress-error-msg {
			color: #c02b0a;
			background: #fff9f9;
			border: 1.5px solid #c02b0a;
			border-radius: 5px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, .11), 0 0 4px rgba(18, 25, 97, .041);
			margin-bottom: 8px;
			margin-top: 8px;
			padding: 12px;
			position: relative;
			width: 100%;
		}

		// Dot Digital Form Styles
		.dotdigital-signup-form {
			margin-top: 2rem;
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-end;
			justify-content: center;

			@include bp($md) {
				flex-wrap: nowrap;
				justify-content: stretch;
			}

			.ddg-form-group {
				text-align: left;
				position: relative;
				width: 100%;
				margin-bottom: 0;
				margin-right: rem-calc(16);

				// Alternative approach - target the hidden input container
				&:has(input[type="hidden"][name="lists[]"]) {
					display: none !important;
				}

				@include bp($md) {
					width: auto;
					flex: 1;
				}

				label {
					font-size: 12px;
					text-transform: uppercase;
					font-weight: 600;
					color: var(--text-color);
					margin-bottom: 4px;
					display: block;
				}

				input[type="email"] {
					width: 100%;
					height: rem-calc(56);
					color: var(--text-color);
					padding: 0 rem-calc(16);
					border: 1px solid var(--text-color);
					background: transparent;
					margin-bottom: 0;
				}
			}

			.dotdigital-form-submit {
				flex-shrink: 0;
				margin-top: 1rem;
				padding: 0;
				position: relative;
				align-self: flex-end;

				@include bp($md) {
					margin-top: 0;
				}

				button[type="submit"] {
					height: rem-calc(56);
					margin-bottom: 0;
					padding: 0 rem-calc(32);
					border: none;
					color: var(--primary);
					background-color: var(--white);
					@include ts(background-color, color);
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					min-width: rem-calc(120);

					&:hover {
						color: var(--white);
						background-color: $primary-purple;
					}
				}
			}

			.dd-wordpress-success-msg {
				background: #16B685;
				font-size: 14px;
				padding: 1rem;
				color: $white;
				margin-top: 1rem;
			}
		}
	}

	&__form {
		margin-top: rem-calc(48);

		// Existing Gravity Forms styles
		.gform_confirmation_wrapper .gform_confirmation_message {
			color: var(--text-color);
			font-weight: bold;
		}

		.gform_wrapper,
		.gform_wrapper.gravity-theme {
			.gform_ajax_spinner {
				position: absolute;
				right: 0;
				transform: translateX(calc(100% + 1rem));
			}

			form {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: flex-start;
				justify-content: center;
				gap: rem-calc(16);

				@include bp($md) {
					flex-wrap: nowrap;
					justify-content: stretch;
				}
			}

			div.gform_validation_errors {
				margin-bottom: rem-calc(40);
			}

			.gfield_description.gfield_validation_message {
				color: #c02b0a;

				background: #fff9f9;
				border: 1.5px solid #c02b0a;
				border-radius: 5px;
				box-shadow: 0 1px 4px rgba(0, 0, 0, .11), 0 0 4px rgba(18, 25, 97, .041);
				margin-bottom: 8px;
				margin-top: 8px;
				padding: 12px;
				position: relative;
				width: 100%;
			}

			.gfield_error label {
				color: var(--text-color);
			}

			.gform_body {
				width: 100%;
			}

			.gfield {
				text-align: left;
				position: relative;

				input {
					color: var(--text-color);
				}
			}

			.gfield_label {
				color: var(--text-color);

				position: absolute;
				top: 0;
				left: 0;
				transform: translateY(calc(-100% - 8px));

				margin-bottom: 0;
			}

			.gfield_required {
				display: none;
			}

			.gform_footer {
				flex-shrink: 0;
				margin-top: 0;
				padding: 0;
				position: relative;

				input[type=submit].gform_button {
					height: rem-calc(56);
					margin-bottom: 0;

					border: none;
					color: var(--primary);
					background-color: var(--white);
					@include ts(background-color, color);

					&:hover {
						color: var(--white);
						background-color: $primary-purple;
					}
				}
			}
		}
	}

	&__bg {
		position: absolute;
		top: 50%;
		pointer-events: none;
		display: block;
		z-index: 0;
		height: 100%;
	}

	&__bg-left {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		transform: translateX(100%);
		opacity: 0;
		transition: none;

		.is-active & {
			animation: heroSvgFadeInReverse 2s cubic-bezier(0.25, 0.1, 0.05, 1) forwards;
			animation-delay: 0.3s;
		}
	}

	// &__bg-middle {
	// 	left: 75%;
	// 	transform: translateY(-50%);

	// 	@include bp($sm) {
	// 		left: 55%;
	// 	}

	// 	@include bp($md) {
	// 		left: 25%;
	// 	}

	// 	@include bp($lg) {
	// 		left: 55%;
	// 	}
	// }

	&__bg-right {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		transform: translateX(-100%);
		opacity: 0;
		transition: none;

		.is-active & {
			animation: heroSvgFadeIn 2s cubic-bezier(0.25, 0.1, 0.05, 1) forwards;
			animation-delay: 1s;
		}
	}

	@keyframes heroSvgFadeIn {
		0% {
			opacity: 0;
			transform: translateX(100%);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes heroSvgFadeInReverse {
		0% {
			opacity: 0;
			transform: translateX(-100%);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}
}

class BlockCTA {
    constructor() {
        this.blocks = document.querySelectorAll('.block-cta');
        this.init();
    }

    init() {
        if (!this.blocks.length) {
            return;
        }

        this.observer = new IntersectionObserver(
            (entries) => this.handleIntersection(entries),
            {
                threshold: 0.1,
                rootMargin: '0px'
            }
        );

        this.blocks.forEach(block => {
            this.observer.observe(block);
        });
    }

    handleIntersection(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const ctaBlock = entry.target;
                ctaBlock.classList.add('is-active');
                this.observer.unobserve(ctaBlock);
            }
        });
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new BlockCTA();
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/cta",
    "title": "CTA",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "edit",
        "renderTemplate": "block-cta.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - CTA",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/cta/block-cta.css"],
	"viewScript": ["cta"]
}

This component is not currently used on any pages.

There are no readme files with this component.