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 @@ +