diff --git a/acf/group_6826f4a2b0001.json b/acf/group_6826f4a2b0001.json
new file mode 100644
index 0000000..9aed81d
--- /dev/null
+++ b/acf/group_6826f4a2b0001.json
@@ -0,0 +1,92 @@
+{
+ "key": "group_6826f4a2b0001",
+ "title": "Contact Block",
+ "fields": [
+ {
+ "key": "field_6826f4a2b0002",
+ "label": "Background Image",
+ "name": "background_image",
+ "aria-label": "",
+ "type": "image",
+ "instructions": "Aerial or landscape photo displayed on the right side of the block.",
+ "required": 0,
+ "conditional_logic": 0,
+ "wrapper": {
+ "width": "",
+ "class": "",
+ "id": ""
+ },
+ "return_format": "array",
+ "library": "all",
+ "min_width": "",
+ "min_height": "",
+ "min_size": "",
+ "max_width": "",
+ "max_height": "",
+ "max_size": "",
+ "mime_types": "",
+ "allow_in_bindings": 0,
+ "preview_size": "medium"
+ },
+ {
+ "key": "field_6826f4a2b0004",
+ "label": "Text",
+ "name": "text",
+ "aria-label": "",
+ "type": "wysiwyg",
+ "instructions": "Body text displayed on the left side of the block. Use bold for emphasis.",
+ "required": 0,
+ "conditional_logic": 0,
+ "wrapper": {
+ "width": "",
+ "class": "",
+ "id": ""
+ },
+ "default_value": "",
+ "tabs": "all",
+ "toolbar": "basic",
+ "media_upload": 0,
+ "delay": 0,
+ "allow_in_bindings": 0
+ },
+ {
+ "key": "field_6826f4a2b0005",
+ "label": "Button Link",
+ "name": "button_link",
+ "aria-label": "",
+ "type": "link",
+ "instructions": "CTA button displayed below the text.",
+ "required": 0,
+ "conditional_logic": 0,
+ "wrapper": {
+ "width": "",
+ "class": "",
+ "id": ""
+ },
+ "return_format": "array",
+ "allow_in_bindings": 0
+ }
+ ],
+ "location": [
+ [
+ {
+ "param": "block",
+ "operator": "==",
+ "value": "acf\/contact-block"
+ }
+ ]
+ ],
+ "menu_order": 0,
+ "position": "normal",
+ "style": "default",
+ "label_placement": "top",
+ "instruction_placement": "label",
+ "hide_on_screen": "",
+ "active": true,
+ "description": "",
+ "show_in_rest": 0,
+ "display_title": "",
+ "allow_ai_access": false,
+ "ai_description": "",
+ "modified": 1779134672
+}
diff --git a/styles/base/colors.css b/styles/base/colors.css
index 196f51f..ef6c388 100644
--- a/styles/base/colors.css
+++ b/styles/base/colors.css
@@ -23,7 +23,7 @@
--color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
- --color-secondary: oklch(0.56 0.0176 257.23);
+ --color-secondary: var(--color-cwc-orange-01);
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
diff --git a/styles/base/typography.css b/styles/base/typography.css
index 05cc531..f257dad 100644
--- a/styles/base/typography.css
+++ b/styles/base/typography.css
@@ -50,24 +50,29 @@
--text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
--text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem);
--text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem);
+ --text-24px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5rem);
--text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem);
+ --text-28px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.75rem);
--text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
+ --text-32px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2rem);
--text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem);
--text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem);
- --text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem);
+ --text-40px: clamp(2.25rem, calc(1.2692rem + 1.0256vw), 2.5rem);
--text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem);
--text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem);
--text-55px: clamp(1.75rem, calc(1.3712rem + 1.4615vw), 3.4375rem);
+ --text-60px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 3.75rem);
+ --text-64px: clamp(3rem, calc(1.3702rem + 2.2436vw), 4rem);
--text-65px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 4.0625rem);
--text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem);
--text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem);
- --h1: calc(var(--text-base) * 2.25);
- --h2: calc(var(--text-base) * 1.75);
- --h3: calc(var(--text-base) * 1.5);
- --h4: calc(var(--text-base) * 1.25);
- --h5: calc(var(--text-base) * 1.125);
- --h6: calc(var(--text-base) * 1.05);
+ --h1: var(--text-64px);
+ --h2: var(--text-40px);
+ --h3: var(--text-32px);
+ --h4: var(--text-28px);
+ --h5: var(--text-24px);
+ --h6: var(--text-22px);
}
body {
@@ -164,7 +169,7 @@ pre code {
}
code {
- @apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
+ @apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
}
hr {
diff --git a/styles/blocks/buttons.css b/styles/blocks/buttons.css
index 09f4264..8aac407 100644
--- a/styles/blocks/buttons.css
+++ b/styles/blocks/buttons.css
@@ -1,104 +1,106 @@
/* Button styles */
-@theme {
- /* Configuration */
+@theme static {
+ /* Configuration */
- /**
- * Button component settings
- *
- * The variables below are used to define the button styles.
- * Most of these variables come from the main theme configuration.
- * The following variables are not defined, but have fallback values
- * in their respective locations and can be added if needed:
- *
- * --button-font-weight (fallback is 600/semibold)
- * --button-font-size (fallback is 1rem)
- * --button-outline-width (fallback is --button-border-width)
- * --button-outline-style (fallback is --button-border-style)
- * --button-outline-color (fallback is --button-border-color)
- */
+ /**
+ * Button component settings
+ *
+ * The variables below are used to define the button styles.
+ * Most of these variables come from the main theme configuration.
+ * The following variables are not defined, but have fallback values
+ * in their respective locations and can be added if needed:
+ *
+ * --button-font-weight (fallback is 600/semibold)
+ * --button-font-size (fallback is 1rem)
+ * --button-outline-width (fallback is --button-border-width)
+ * --button-outline-style (fallback is --button-border-style)
+ * --button-outline-color (fallback is --button-border-color)
+ */
- --button-bg: var(--color-primary);
- --button-color: var(--color-white);
- --button-hover-bg: var(--color-info);
- --button-hover-border-color: var(--color-info);
- --button-hover-color: var(--color-white);
- --button-border-width: 3px;
- --button-border-style: solid;
- --button-border-color: var(--button-bg);
- --button-radius: 0.5rem;
+ --button-bg: var(--color-primary);
+ --button-color: var(--color-white);
+ --button-hover-bg: var(--color-info);
+ --button-hover-border-color: var(--color-info);
+ --button-hover-color: var(--color-white);
+ --button-border-width: 3px;
+ --button-border-style: solid;
+ --button-border-color: var(--button-bg);
+ --button-radius: 1.25rem 0.25rem;
}
.btn, .button, .acf-block-preview .button {
- @apply px-8 py-2 min-w-0;
+ @apply px-8 py-2 min-w-0;
- background: var(--button-bg);
- color: var(--button-color);
- cursor: pointer;
- display: inline-block;
- transition: background 200ms, border-color 200ms, color 200ms;
+ background: var(--button-bg);
+ color: var(--button-color);
+ cursor: pointer;
+ display: inline-block;
+ transition: background 200ms, border-color 200ms, color 200ms;
- border-width: var(--button-border-width);
- border-style: var(--button-border-style);
- border-color: var(--button-border-color);
- border-radius: var(--button-radius);
+ border-width: var(--button-border-width);
+ border-style: var(--button-border-style);
+ border-color: var(--button-border-color);
+ border-radius: var(--button-radius);
- text-decoration: none;
- font-weight: var(--button-font-weight, 600);
- font-size: var(--button-font-size, 1rem);
- line-height: 1.1;
+ padding: .5rem 2rem;
- &[data-button-variant="outline"] {
- background: transparent;
- &:hover { background: transparent; }
+ text-decoration: none;
+ font-weight: var(--button-font-weight, 600);
+ font-size: var(--button-font-size, 1rem);
+ line-height: 1.1;
- --button-color: var(--button-outline-color, var(--button-bg));
- --button-hover-border-color: var(--button-hover-bg);
- --button-hover-color: var(--button-hover-bg);
- }
+ &[data-button-variant="outline"] {
+ background: transparent;
+ &:hover { background: transparent; }
+
+ /* --button-color: var(--button-border-color, var(--button-bg)); */
+ --button-hover-border-color: var(--button-hover-bg);
+ --button-hover-color: var(--button-hover-bg);
+ }
}
/* Hover/focus/active */
.btn:hover, .button:hover, .acf-block-preview .button:hover {
- background: var(--button-hover-bg);
- border-color: var(--button-hover-border-color);
- color: var(--button-hover-color);
+ background: var(--button-hover-bg);
+ border-color: var(--button-hover-border-color);
+ color: var(--button-hover-color);
}
.btn:focus, .button:focus {
- outline-width: var(--button-outline-width, var(--button-border-width));
- outline-style: var(--button-outline-style, var(--button-border-style));
- outline-color: var(--button-outline-color, var(--button-border-color));
- outline-offset: calc(var(--button-border-width) * 2);
+ outline-width: var(--button-outline-width, var(--button-border-width));
+ outline-style: var(--button-outline-style, var(--button-border-style));
+ outline-color: var(--button-outline-color, var(--button-border-color));
+ outline-offset: calc(var(--button-border-width) * 2);
}
.btn:active, .button:active { transform: scale(99%); }
/* Back To Top Button */
#backToTopBtn {
- display:none;
- position:fixed;
- bottom:2rem;
- right:2rem;
- z-index:1000;
- padding:0.75em 1.5em;
- font-size:1.1rem;
- border-radius:2em;
- background:var(--color-primary,#3857BC);
- color:#fff;
- border:none;
- box-shadow:0 2px 8px rgba(0,0,0,0.15);
- cursor:pointer;
- transition:opacity 0.2s;
+ background: var(--color-primary);
+ border: none;
+ border-radius: 2em;
+ bottom: 2rem;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+ color: #fff;
+ cursor: pointer;
+ display: none;
+ font-size: 1.1rem;
+ padding: 0.75em 1.5em;
+ position: fixed;
+ right: 2rem;
+ transition: opacity 0.2s;
+ z-index: 1000;
}
/**
- * Variants
- *
- * The following styles are used to define button variants.
- * These styles are applied to the button element using the
- * `data-button-*` attributes.
- */
+ * Variants
+ *
+ * The following styles are used to define button variants.
+ * These styles are applied to the button element using the
+ * `data-button-*` attributes.
+ */
/* Sizes */
.btn[data-button-size="small"], .button[data-button-size="small"] { @apply px-4 py-0.5; }
@@ -115,62 +117,63 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
/**
* Colors
*
- * We don't need to speicifcally target "primary" buttons
+ * We don't need to specifically target "primary" buttons
* as the button styling defaults to "primary".
* However, you can, if necessary, by adding a style block
* like the ones below and changing the color values.
*/
.btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
- --button-bg: var(--color-secondary);
- --button-color: var(--color-white);
- --button-border-color: var(--color-secondary);
- --button-outline-color: oklch(0.48 0.0136 252.2);
- --button-hover-bg: var(--color-dark);
- --button-hover-border-color: var(--color-dark);
- --button-hover-color: var(--color-white);
+ --button-bg: var(--color-secondary);
+ --button-color: var(--color-white);
+ --button-border-color: var(--color-secondary);
+ --button-outline-color: oklch(0.48 0.0136 252.2);
+ --button-hover-bg: var(--color-dark);
+ --button-hover-border-color: var(--color-dark);
+ --button-hover-color: var(--color-white);
}
.btn[data-button-color="light"], .button[data-button-color="light"] {
- --button-bg: var(--color-white);
- --button-color: var(--color-dark);
- --button-border-color: var(--color-white);
- --button-hover-bg: var(--color-dark);
- --button-hover-border-color: var(--color-dark);
- --button-hover-color: var(--color-white);
+ --button-bg: var(--color-white);
+ --button-color: var(--color-dark);
+ --button-border-color: var(--color-white);
+ --button-hover-bg: var(--color-dark);
+ --button-hover-border-color: var(--color-dark);
+ --button-hover-color: var(--color-white);
}
.btn[data-button-color="white"], .button[data-button-color="white"] {
- --button-bg: var(--color-white);
- --button-color: var(--color-black);
- --button-border-color: var(--color-white);
- --button-hover-bg: var(--color-secondary-200);
- --button-hover-border-color: var(--color-secondary-200);
- --button-hover-color: var(--color-black);
+ --button-bg: var(--color-white);
+ --button-color: var(--color-black);
+ --button-border-color: var(--color-white);
+ --button-hover-bg: var(--color-secondary-200);
+ --button-hover-border-color: var(--color-secondary-200);
+ --button-hover-color: var(--color-black);
}
.btn[data-button-color="black"], .button[data-button-color="black"] {
- --button-bg: var(--color-black);
- --button-color: var(--color-white);
- --button-border-color: var(--color-black);
- --button-hover-bg: var(--color-secondary);
- --button-hover-border-color: var(--color-secondary);
- --button-hover-color: var(--color-dark);
+ --button-bg: var(--color-black);
+ --button-color: var(--color-white);
+ --button-border-color: var(--color-black);
+ --button-hover-bg: var(--color-secondary);
+ --button-hover-border-color: var(--color-secondary);
+ --button-hover-color: var(--color-dark);
}
.back-to-top {
- background: var(--color-primary, #3857BC);
- color: #fff;
- border: none;
- border-radius: 2em;
- padding: 0.75em 1.5em;
- font-size: 1.1rem;
- box-shadow: 0 2px 8px rgba(0,0,0,0.15);
- cursor: pointer;
- transition: opacity 0.2s, background 0.2s;
- opacity: 0.85;
+ background: var(--color-primary, #3857BC);
+ border: none;
+ border-radius: 2em;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+ color: #fff;
+ cursor: pointer;
+ font-size: 1.1rem;
+ opacity: 0.85;
+ padding: 0.75em 1.5em;
+ transition: opacity 0.2s, background 0.2s;
}
+
.back-to-top:hover, .back-to-top:focus {
- background: var(--color-info, #233a7a);
- opacity: 1;
- outline: 2px solid var(--color-info, #233a7a);
+ background: var(--color-info, #233a7a);
+ opacity: 1;
+ outline: 2px solid var(--color-info, #233a7a);
}
diff --git a/views/blocks/contact-block/block.json b/views/blocks/contact-block/block.json
new file mode 100644
index 0000000..61907b1
--- /dev/null
+++ b/views/blocks/contact-block/block.json
@@ -0,0 +1,28 @@
+{
+ "name": "acf/contact-block",
+ "title": "Contact Block",
+ "description": "A full-width CTA banner with a background photo, decorative linework overlay, body text, and a link button.",
+ "style": [
+ "file:./contact-block.css"
+ ],
+ "category": "vdi-block",
+ "icon": "block-default",
+ "keywords": [
+ "Contact Block"
+ ],
+ "acf": {
+ "blockVersion": 3,
+ "autoInlineEditing": true,
+ "mode": "preview",
+ "renderTemplate": "contact-block.php"
+ },
+ "supports": {
+ "align": true,
+ "anchor": true,
+ "color": true,
+ "html": false,
+ "jsx": false,
+ "mode": true,
+ "multiple": false
+ }
+}
diff --git a/views/blocks/contact-block/contact-block.css b/views/blocks/contact-block/contact-block.css
new file mode 100644
index 0000000..03b0d5c
--- /dev/null
+++ b/views/blocks/contact-block/contact-block.css
@@ -0,0 +1,37 @@
+/* Contact Block styles */
+
+.contact-block {
+ background-color: var(--color-navy, #0d1f35);
+ border-bottom: 1rem solid var(--color-orange, #F26B53);
+ max-width: 80.5rem;
+ overflow: hidden;
+ position: relative;
+
+ em { color: var(--color-secondary); font-style: normal; }
+
+ .contact-block__media {
+ inset-block: 0;
+ inset-inline-end: 0;
+ mask-image: linear-gradient(to right, transparent 0%, black 30%);
+ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
+ position: absolute;
+ }
+
+ .contact-block__bg-image {
+ display: block;
+ height: 100%;
+ width: 100%;
+ }
+
+ .contact-block__linework {
+ bottom: 0;
+ height: calc(100% - 1rem);
+ position: absolute;
+ right: 0;
+ width: auto;
+ }
+
+ .contact-block__content {
+
+ }
+}
diff --git a/views/blocks/contact-block/contact-block.php b/views/blocks/contact-block/contact-block.php
new file mode 100644
index 0000000..f5aa60c
--- /dev/null
+++ b/views/blocks/contact-block/contact-block.php
@@ -0,0 +1,56 @@
+
+
+>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/views/blocks/contact-block/linework.php b/views/blocks/contact-block/linework.php
new file mode 100644
index 0000000..cc79a0b
--- /dev/null
+++ b/views/blocks/contact-block/linework.php
@@ -0,0 +1,3 @@
+