diff --git a/acf/group_our_work_images.json b/acf/group_our_work_images.json new file mode 100644 index 0000000..008e875 --- /dev/null +++ b/acf/group_our_work_images.json @@ -0,0 +1,80 @@ +{ + "key": "group_our_work_images", + "title": "Our Work", + "fields": [ + { + "key": "field_our_work_left_image", + "label": "Left Image", + "name": "left_image", + "aria-label": "", + "type": "image", + "instructions": "Tall image displayed on the left side of the Our Work 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_our_work_bottom_image", + "label": "Bottom Image", + "name": "bottom_image", + "aria-label": "", + "type": "image", + "instructions": "Wide image displayed below the text and overlapping the bottom border.", + "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" + } + ], + "location": [ + [ + { + "param": "block", + "operator": "==", + "value": "acf\/our-work" + } + ] + ], + "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": 1781452800 +} diff --git a/styles/base/typography.css b/styles/base/typography.css index f6a0b41..c5b3bb5 100644 --- a/styles/base/typography.css +++ b/styles/base/typography.css @@ -93,6 +93,11 @@ body { h2, .h2 { font-size: var(--h2); line-height: 1.3; + + em { + font-style: normal; + color: var(--color-secondary); + } } h3, .h3 { diff --git a/views/blocks/our-work/block.json b/views/blocks/our-work/block.json new file mode 100644 index 0000000..970cc0a --- /dev/null +++ b/views/blocks/our-work/block.json @@ -0,0 +1,28 @@ +{ + "name": "acf/our-work", + "title": "Our Work", + "description": "Homepage Our Work block.", + "style": [ + "file:./our-work.css" + ], + "category": "vdi-block", + "icon": "groups", + "keywords": [ + "Our Work" + ], + "acf": { + "blockVersion": 3, + "autoInlineEditing": true, + "mode": "preview", + "renderTemplate": "our-work.php" + }, + "supports": { + "align": true, + "anchor": true, + "color": true, + "html": false, + "jsx": true, + "mode": true, + "multiple": false + } +} diff --git a/views/blocks/our-work/our-work-vector.svg b/views/blocks/our-work/our-work-vector.svg new file mode 100644 index 0000000..3f40522 --- /dev/null +++ b/views/blocks/our-work/our-work-vector.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/views/blocks/our-work/our-work.css b/views/blocks/our-work/our-work.css new file mode 100644 index 0000000..cc4211f --- /dev/null +++ b/views/blocks/our-work/our-work.css @@ -0,0 +1,225 @@ +/* Our Work block styles */ + +.our-work { + background: + linear-gradient( + 90deg, + var(--color-cwc-blue-01) 0%, + var(--color-cwc-blue-02) 52%, + var(--color-cwc-blue-02) 100% + ); + border-bottom: 16px solid var(--color-secondary); + color: var(--color-white); + margin-bottom: clamp(4rem, 7vw, 5.5rem); + overflow: visible; + padding: clamp(4rem, 6vw, 5.75rem) 0 0; + position: relative; +} + +.our-work:not(.has-bottom-image) { + margin-bottom: 0; + padding-bottom: clamp(4rem, 6vw, 5.75rem); +} + +.our-work__vector { + inset: 0; + overflow: hidden; + pointer-events: none; + position: absolute; + z-index: 0; +} + +.our-work__vector img { + display: block; + height: 100%; + object-fit: cover; + width: 100%; +} + +.our-work__inner { + display: grid; + gap: clamp(2rem, 4vw, 4rem); + grid-template-areas: + "left content" + "left bottom"; + grid-template-columns: minmax(18rem, 410px) minmax(0, 1fr); + position: relative; + z-index: 1; +} + +.our-work:not(.has-left-image) .our-work__inner { + grid-template-areas: + "content" + "bottom"; + grid-template-columns: minmax(0, 1fr); +} + +.our-work__content { + grid-area: content; + max-width: 46.75rem; +} + +.our-work:not(.has-left-image) .our-work__content { + margin-inline: auto; + text-align: center; +} + +.our-work__content .acf-innerblocks-container { + display: flex; + flex-direction: column; + gap: 1.75rem; +} + +.our-work__content h1, +.our-work__content h2, +.our-work__content h3, +.our-work__content h4, +.our-work__content h5, +.our-work__content h6 { + color: var(--color-white); + font-family: var(--font-quincy); + font-size: var(--text-54px); + line-height: 1; + margin: 0; +} + +.our-work__content h1 em, +.our-work__content h2 em, +.our-work__content h3 em, +.our-work__content h4 em, +.our-work__content h5 em, +.our-work__content h6 em { + color: var(--color-secondary); + font-style: normal; +} + +.our-work__content p { + color: var(--color-white); + font-size: var(--text-20px); + line-height: 1.35; + margin: 0; +} + +.our-work__content .wp-block-acf-buttons { + margin: 0; +} + +.our-work__content .wp-block-acf-buttons > div { + gap: 2rem; +} + +.our-work:not(.has-left-image) .our-work__content .wp-block-acf-buttons > div { + justify-content: center; +} + +.our-work__content .button[data-button-variant="outline"] { + --button-color: var(--color-white); +} + +.our-work__media { + margin: 0; +} + +.our-work__media--left { + align-self: start; + grid-area: left; + margin-top: clamp(4rem, 8vw, 6.75rem); +} + +.our-work__media--bottom { + grid-area: bottom; + margin-bottom: clamp(-5rem, -6vw, -3.5rem); + max-width: 830px; +} + +.our-work:not(.has-left-image) .our-work__media--bottom { + margin-inline: auto; +} + +.our-work__image { + border-radius: 0.75rem; + display: block; + height: 100%; + object-fit: cover; + width: 100%; +} + +.our-work__media--left .our-work__image { + aspect-ratio: 410 / 484; +} + +.our-work__media--bottom .our-work__image { + aspect-ratio: 830 / 484; +} + +@media (max-width: 1024px) { + .our-work { + padding-top: 4rem; + } + + .our-work__inner, + .our-work:not(.has-left-image) .our-work__inner { + grid-template-areas: + "content" + "left" + "bottom"; + grid-template-columns: minmax(0, 1fr); + } + + .our-work__content { + margin-inline: auto; + max-width: 46.75rem; + text-align: center; + } + + .our-work__content .wp-block-acf-buttons > div { + justify-content: center; + } + + .our-work__media--left { + margin: 0 auto; + max-width: 410px; + width: 100%; + } + + .our-work__media--bottom { + margin-inline: auto; + width: 100%; + } +} + +@media (max-width: 640px) { + .our-work { + margin-bottom: 3.5rem; + padding-top: 3rem; + } + + .our-work__inner { + gap: 2rem; + } + + .our-work__content { + text-align: left; + } + + .our-work__content .acf-innerblocks-container { + gap: 1.25rem; + } + + .our-work__content h1, + .our-work__content h2, + .our-work__content h3, + .our-work__content h4, + .our-work__content h5, + .our-work__content h6 { + font-size: var(--text-40px); + } + + .our-work__content .wp-block-acf-buttons > div { + justify-content: flex-start; + } + + .our-work__media--bottom { + margin-bottom: -3rem; + } +} diff --git a/views/blocks/our-work/our-work.php b/views/blocks/our-work/our-work.php new file mode 100644 index 0000000..fe5812f --- /dev/null +++ b/views/blocks/our-work/our-work.php @@ -0,0 +1,91 @@ + + +
> + + +
+ +
+ 'our-work__image', + 'loading' => 'lazy', + ) + ); + } elseif ( ! empty( $left_image['url'] ) ) { + ?> + <?php echo esc_attr( $left_image['alt'] ?? '' ); ?> + +
+ + +
+ +
+ + +
+ 'our-work__image', + 'loading' => 'lazy', + ) + ); + } elseif ( ! empty( $bottom_image['url'] ) ) { + ?> + <?php echo esc_attr( $bottom_image['alt'] ?? '' ); ?> + +
+ +
+