diff --git a/styles/blocks/index.css b/styles/blocks/index.css index f0bc2f3..5939ec3 100644 --- a/styles/blocks/index.css +++ b/styles/blocks/index.css @@ -4,3 +4,4 @@ @import './core.css'; @import './misc.css'; @import './page-hero.css'; +@import './contact-info.css'; diff --git a/views/blocks/contact-info/contact-info.css b/views/blocks/contact-info/contact-info.css index e69de29..603a453 100644 --- a/views/blocks/contact-info/contact-info.css +++ b/views/blocks/contact-info/contact-info.css @@ -0,0 +1,108 @@ +/* Contact Info block styles */ + +.contact-info { + background: var(--color-white); + padding-block: clamp(3rem, 6vw, 4rem); + position: relative; +} + +.contact-info__grid { + display: grid; + gap: 2rem; + grid-template-columns: 1fr; + position: relative; +} + +.contact-info__details { + max-width: 36rem; + padding-inline: clamp(1.5rem, 5vw, 3rem); +} + +.contact-info__heading { + color: var(--color-cwc-blue-01); + font-family: var(--font-quincy, 'Quincy', serif); + font-size: clamp(2.5rem, 6vw, 4.5rem); + font-weight: 400; + line-height: 1.05; + margin: 0 0 1.5rem; +} + +.contact-info__items { + display: flex; + flex-direction: column; + gap: 0.75rem; + list-style: none; + margin: 0 0 2.5rem; + padding: 0; +} + +.contact-info__item { + align-items: flex-start; + color: var(--color-dark); + display: flex; + font-size: 1rem; + gap: 0.75rem; + line-height: 1.5; +} + +.contact-info__icon { + align-items: center; + color: var(--color-cwc-blue-03); + display: inline-flex; + flex-shrink: 0; + height: 1.5rem; + justify-content: center; + width: 1.5rem; +} + +.contact-info__icon img { + display: block; + height: 100%; + width: 100%; +} + +.contact-info__value { + color: inherit; + text-decoration: none; +} + +a.contact-info__value:hover { + color: var(--color-secondary); +} + +.contact-info__map { + background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white); + border-radius: 0.5rem; + min-height: 24rem; + position: relative; +} + +@media (min-width: 1024px) { + .contact-info__grid { + grid-template-columns: 1fr 1fr; + } + + .contact-info__details { + padding-inline: clamp(1.5rem, 5vw, 3rem) 0; + } + + .contact-info__map { + align-self: stretch; + border-radius: 0; + margin-right: calc(50% - 50vw); + margin-left: 0; + min-height: 32rem; + width: calc(50vw - 0px); + } +} + +@media (max-width: 767px) { + .contact-info { + padding-block: 2rem; + } + + .contact-info__map { + margin-inline: clamp(1.5rem, 5vw, 3rem); + min-height: 18rem; + } +}