diff --git a/styles/components/site-footer.css b/styles/components/site-footer.css index f5aae3f..ab85b3a 100644 --- a/styles/components/site-footer.css +++ b/styles/components/site-footer.css @@ -19,3 +19,35 @@ a { @apply text-white hover:text-primary-500 underline underline-offset-2; } } } + +@media (max-width: 767px) { + .site-footer { + padding-block: 2.25rem 1.25rem; + } + + .site-footer > .container { + gap: 1.5rem 1rem; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + padding-inline: 1rem; + } + + .site-footer .site-footer__logo { + max-width: 6rem; + } + + .site-footer .widget li { + font-size: var(--text-14px); + line-height: 1.1; + margin-bottom: 0.4rem; + } + + .site-footer .widget h4 { + font-size: var(--text-16px); + margin-bottom: 0.5rem; + } + + .site-footer .text-right { + align-items: flex-start; + text-align: left; + } +} diff --git a/styles/components/site-header.css b/styles/components/site-header.css index c7befd6..b496375 100644 --- a/styles/components/site-header.css +++ b/styles/components/site-header.css @@ -28,3 +28,70 @@ #globalSearch { @apply text-14px text-light; } } } + +@media (max-width: 767px) { + .site-header { + overflow: hidden; + width: 100%; + } + + .site-header .nav-aux__container { + display: none; + } + + .site-header .header__nav-main { + display: grid; + gap: 0.75rem; + grid-template-columns: minmax(0, 1fr) auto !important; + min-height: 4.375rem; + padding: 0.85rem 1rem !important; + padding-left: 1rem !important; + padding-right: 1rem !important; + width: 100%; + } + + .site-header__logo { + height: 2.25rem; + margin-left: 1rem; + min-width: 0; + overflow: hidden; + width: 7.25rem; + } + + .site-header__logo img { + height: 2.25rem; + max-width: none; + width: auto; + } + + .site-header .nav-main { + align-items: center; + display: flex; + justify-content: flex-end; + min-width: 0; + } + + .site-header .nav-main__toggle { + align-items: center; + background: var(--color-secondary); + border-radius: 0.375rem; + display: inline-flex; + height: 2.25rem; + justify-content: center; + margin-right: 1rem; + padding: 0.45rem; + width: 2.25rem; + } + + .site-header .nav-main__toggle svg { + height: 1.15rem; + width: 1.15rem; + } + + .site-header .nav-main__toggle svg, + .site-header .nav-main__toggle path, + .site-header .nav-main__toggle line { + fill: var(--color-white); + stroke: var(--color-white); + } +} diff --git a/views/blocks/contact-block/contact-block.css b/views/blocks/contact-block/contact-block.css index 80a21ad..495bacf 100644 --- a/views/blocks/contact-block/contact-block.css +++ b/views/blocks/contact-block/contact-block.css @@ -42,3 +42,49 @@ z-index: 30; } } + +@media (max-width: 767px) { + .contact-block { + border-bottom-width: 0.75rem; + border-radius: 0.75rem 0.75rem 0 0; + } + + .contact-block .contact-block__media { + inset: 0; + mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.45) 100%); + -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.45) 100%); + } + + .contact-block .contact-block__bg-image { + object-fit: cover; + } + + .contact-block .contact-block__linework { + bottom: 0.75rem; + height: auto; + max-width: 112%; + right: -32%; + width: 22rem; + } + + .contact-block .contact-block__content { + min-height: 18.5rem; + padding: 2.25rem 1.5rem 2.75rem !important; + } + + .contact-block .contact-block__text { + font-size: clamp(1.9rem, 8.7vw, 2.45rem); + line-height: 1.02; + max-width: 16rem !important; + } + + .contact-block.home-contact { + bottom: auto; + left: 50%; + margin: 2.5rem auto -3.75rem; + max-width: none; + position: relative; + transform: translateX(-50%); + width: min(calc(100vw - 2rem), 22.5rem); + } +} diff --git a/views/blocks/homepage-hero/homepage-hero.css b/views/blocks/homepage-hero/homepage-hero.css index 90c8fc2..4e3e152 100644 --- a/views/blocks/homepage-hero/homepage-hero.css +++ b/views/blocks/homepage-hero/homepage-hero.css @@ -50,3 +50,65 @@ } } } + +@media (max-width: 767px) { + .homepage-hero { + --hgtHero: 20.75rem; + + min-height: var(--hgtHero); + } + + .homepage-hero .content-wrapper { + padding-inline: 1rem; + } + + .homepage-hero .content-wrapper > div { + max-width: 20rem; + padding-top: 2.25rem; + text-align: left; + } + + .homepage-hero .intro h1 { + font-size: clamp(1.8rem, 8vw, 2.2rem); + letter-spacing: 0; + line-height: 0.98; + margin-bottom: 0.75rem; + } + + .homepage-hero .intro h1 strong { + font-size: inherit; + line-height: inherit; + } + + .homepage-hero .intro p { + font-size: var(--text-14px); + line-height: 1.3; + margin: 0; + max-width: 16rem; + } + + .homepage-hero .reset { + gap: 0.7rem; + justify-content: flex-start; + margin-top: 1rem; + } + + .homepage-hero .button { + font-size: var(--text-14px); + min-height: 2.25rem; + min-width: 6.35rem; + padding: 0.5rem 0.8rem; + } + + .homepage-hero .heroVector .vector { + bottom: 0.15rem; + left: 50%; + transform: translateX(-50%); + width: 170%; + } + + .homepage-hero .heroMedia img, + .homepage-hero .heroMedia video { + object-position: center top; + } +} diff --git a/views/blocks/our-work/our-work.css b/views/blocks/our-work/our-work.css index 74642f1..8095eb4 100644 --- a/views/blocks/our-work/our-work.css +++ b/views/blocks/our-work/our-work.css @@ -190,20 +190,21 @@ @media (max-width: 640px) { .our-work { - margin-bottom: 3.5rem; - padding-top: 3rem; + margin-bottom: 2rem; + padding-top: 3.25rem; } .our-work__inner { - gap: 2rem; + gap: 1.4rem; } .our-work__content { + max-width: 20rem; text-align: left; } .our-work__content .acf-innerblocks-container { - gap: 1.25rem; + gap: 1rem; } .our-work__content h1, @@ -212,14 +213,43 @@ .our-work__content h4, .our-work__content h5, .our-work__content h6 { - font-size: var(--text-40px); + font-size: clamp(2rem, 9vw, 2.45rem); + } + + .our-work__content p { + font-size: var(--text-14px); + line-height: 1.35; } .our-work__content .wp-block-acf-buttons > div { + gap: 0.75rem; justify-content: flex-start; } + .our-work__content .button { + font-size: var(--text-14px); + min-height: 2.25rem; + min-width: 6.35rem; + padding: 0.5rem 0.8rem; + } + + .our-work__media--left { + justify-self: start; + margin: 0 0 -3.25rem; + max-width: 9.5rem; + position: relative; + z-index: 2; + } + .our-work__media--bottom { - margin-bottom: -3rem; + justify-self: end; + margin-bottom: -2.35rem; + max-width: 20.5rem; + width: calc(100% - 2.25rem); + } + + .our-work:not(.has-left-image) .our-work__media--bottom { + justify-self: center; + width: 100%; } } diff --git a/views/blocks/recent-posts/recent-posts.css b/views/blocks/recent-posts/recent-posts.css index 4a8c483..66d7940 100644 --- a/views/blocks/recent-posts/recent-posts.css +++ b/views/blocks/recent-posts/recent-posts.css @@ -233,35 +233,92 @@ @media (max-width: 640px) { .recent-posts { - padding-top: clamp(15.5rem, 64vw, 17rem); + padding: 6.25rem 0 3.25rem; } .recent-posts__background { - height: clamp(45rem, 192vw, 49rem); + height: 30rem; } .recent-posts__vector { - min-height: clamp(45rem, 192vw, 49rem); + min-height: 30rem; + object-position: center top; } .recent-posts__header { - margin-bottom: 2rem; - text-align: left; + gap: 1rem; + margin-bottom: 1.75rem; + text-align: center; } .recent-posts__heading { - font-size: var(--text-54px); + font-size: var(--text-40px); + } + + .recent-posts__intro { + font-size: var(--text-14px); + line-height: 1.35; + max-width: 20rem; } .recent-posts__grid { - grid-template-columns: minmax(0, 397px); + grid-template-columns: minmax(0, 18.25rem); + margin-inline: auto; + max-width: 18.25rem; } .recent-posts__grid::before { - top: min(250px, calc(100cqw * 250 / 397)); + height: 0.75rem; + top: min(184px, calc(100cqw * 250 / 397)); + } + + .recent-posts__card:nth-child(n + 2) { + display: none; + } + + .recent-posts__image-link { + border-radius: 0.5rem 0.5rem 0 0; } .recent-posts__body { - padding: 1.5rem; + padding: 1.25rem; + } + + .recent-posts__title { + font-size: var(--text-24px); + margin-bottom: 1rem; + } + + .recent-posts__excerpt, + .recent-posts__read-more { + font-size: var(--text-14px); + } + + .recent-posts__read-more { + padding-top: 1.75rem; + text-decoration-thickness: 3px; + } + + .recent-posts__footer { + align-items: center; + flex-direction: column; + gap: 1.25rem; + margin-top: 1.4rem; + } + + .recent-posts__footer::before { + background: + radial-gradient(circle, var(--color-cwc-blue-01) 0 0.2rem, transparent 0.22rem) left center / 0.75rem 0.5rem repeat-x; + content: ""; + display: block; + height: 0.5rem; + width: 2.25rem; + } + + .recent-posts__blog-link.button { + font-size: var(--text-14px); + min-height: 2.25rem; + min-width: 8.5rem; + padding: 0.5rem 0.85rem; } } diff --git a/views/blocks/recent-posts/recent-posts.php b/views/blocks/recent-posts/recent-posts.php index c1d761d..39c0a61 100644 --- a/views/blocks/recent-posts/recent-posts.php +++ b/views/blocks/recent-posts/recent-posts.php @@ -108,7 +108,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
- +