@charset "UTF-8";
@font-face {
font-family: "sm-sans";
src: url("fonts/BrownStd-Regular.eot");
src: url("fonts/BrownStd-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/BrownStd-Regular.woff") format("woff"), url("fonts/BrownStd-Regular.woff2") format("woff2"), url("fonts/BrownStd-Regular.ttf") format("truetype"), url("fonts/BrownStd-Regular.svg#BrownStd-Regular") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/*
iPhone 17 and iPhone 17 Pro: 390 × 890 points.
This viewport represents a logical resolution for web content.
The hardware resolution is 2622 x 1206 pixels, with a pixel density of 460 ppi.
iPhone Air: 405 × 920 points.
This new model replaces the Plus series.
The hardware resolution is 2736 x 1260 pixels, also at 460 ppi.
iPhone 17 Pro Max: 430 × 980 points.
The hardware resolution is 2868 x 1320 pixels, with a pixel density of 460 ppi.
*/
.sm-h1, h1 {
font-family: "sm-sans", sans-serif;
font-size: 28px;
line-height: 1.17;
letter-spacing: -0.03em;
font-weight: 400;
text-transform: none;
}
@media (min-width: 768px) {
.sm-h1, h1 {
font-family: "sm-sans", sans-serif;
font-size: 35px;
line-height: 1.15;
letter-spacing: -0.03em;
font-weight: 400;
text-transform: none;
}
}
.sm-h2, section.shop-unavailable-message h2, section.single-product .text-column h2, h2 {
font-family: "sm-sans", sans-serif;
font-size: 22px;
line-height: 1.23;
letter-spacing: -0.03em;
font-weight: 400;
text-transform: none;
}
@media (min-width: 768px) {
.sm-h2, section.shop-unavailable-message h2, section.single-product .text-column h2, h2 {
font-family: "sm-sans", sans-serif;
font-size: 28px;
line-height: 1.22;
letter-spacing: -0.03em;
font-weight: 400;
text-transform: none;
}
}
.sm-body-p, p {
font-family: "sm-sans", sans-serif;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0em;
font-weight: 400;
text-transform: none;
}
@media (min-width: 768px) {
.sm-body-p, p {
font-family: "sm-sans", sans-serif;
font-size: 14px;
line-height: 1.42;
letter-spacing: 0em;
font-weight: 400;
text-transform: none;
}
}
.sm-body, section.shop-unavailable-message p, section.single-product .text-column .description, section.single-product .text-column .tear_sheet a, section.single-product .text-column .dimensions, section.single-product .text-column .price .formatted-price, body {
font-family: "sm-sans", sans-serif;
font-size: 13px;
line-height: 1.38;
letter-spacing: 0em;
font-weight: 400;
text-transform: none;
}
@media (min-width: 768px) {
.sm-body, section.shop-unavailable-message p, section.single-product .text-column .description, section.single-product .text-column .tear_sheet a, section.single-product .text-column .dimensions, section.single-product .text-column .price .formatted-price, body {
font-family: "sm-sans", sans-serif;
font-size: 13px;
line-height: 1.23;
letter-spacing: 0em;
font-weight: 400;
text-transform: none;
}
}
.sm-body-small, footer.site-footer .footer-content .footer-section p, footer.site-footer .footer-content .footer-section a, .gform_wrapper h2.gform_submission_error, .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type=email], .gform_wrapper .gform_footer .gform_button, .gform_wrapper .gfield_error h2, .gform_wrapper .gfield_error .validation_message, .small {
font-family: "sm-sans", sans-serif;
font-size: 12px;
line-height: 1.33;
letter-spacing: 0em;
font-weight: 400;
text-transform: none;
}
@media (min-width: 768px) {
.sm-body-small, footer.site-footer .footer-content .footer-section p, footer.site-footer .footer-content .footer-section a, .gform_wrapper h2.gform_submission_error, .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type=email], .gform_wrapper .gform_footer .gform_button, .gform_wrapper .gfield_error h2, .gform_wrapper .gfield_error .validation_message, .small {
font-family: "sm-sans", sans-serif;
font-size: 12px;
line-height: 1.17;
letter-spacing: 0em;
font-weight: 400;
text-transform: none;
}
}
.sm-eyebrow, .eyebrow-bold, .eyebrow, .sm-inquire-button {
font-family: "sm-sans", sans-serif;
font-size: 12px;
line-height: 1.33;
letter-spacing: 0.05em;
font-weight: 400;
text-transform: uppercase;
}
@media (min-width: 768px) {
.sm-eyebrow, .eyebrow-bold, .eyebrow, .sm-inquire-button {
font-family: "sm-sans", sans-serif;
font-size: 12px;
line-height: 1.17;
letter-spacing: 0.05em;
font-weight: 400;
text-transform: uppercase;
}
}
.sm-inquire-button {
letter-spacing: 0.05em;
display: inline-block;
text-decoration: none;
color: #7f7f7f;
}
.sm-inquire-button:hover {
color: #000000;
}
.sm-inquire-button::after {
content: "";
display: inline-block;
width: 17px;
height: 8px;
margin-left: 0.5em;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
transition: background-image 0.2s ease;
}
.sm-inquire-button::after {
background-image: url('data:image/svg+xml;utf8,');
}
.sm-inquire-button:hover::after {
background-image: url('data:image/svg+xml;utf8,');
}
@media (min-width: 768px) {
.sm-inquire-button::after {
width: 22px;
height: 12px;
}
.sm-inquire-button::after {
background-image: url('data:image/svg+xml;utf8,');
}
.sm-inquire-button:hover::after {
background-image: url('data:image/svg+xml;utf8,');
}
}
.eyebrow-bold {
font-weight: 700;
}
blockquote {
font-style: normal;
margin-left: 0px;
margin-right: 0px;
}
.gform-button-arrow::after {
content: "";
display: inline-block;
width: 17px;
height: 8px;
margin-left: 0px;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
transition: background-image 0.2s ease;
}
.gform-button-arrow::after {
background-image: url('data:image/svg+xml;utf8,');
}
.gform-button-arrow:hover::after {
background-image: url('data:image/svg+xml;utf8,');
}
@media (min-width: 768px) {
.gform-button-arrow::after {
width: 22px;
height: 12px;
}
.gform-button-arrow::after {
background-image: url('data:image/svg+xml;utf8,');
}
.gform-button-arrow:hover::after {
background-image: url('data:image/svg+xml;utf8,');
}
}
.gform_wrapper {
margin-top: 10px;
}
.gform_wrapper h2.gform_submission_error {
color: darkred;
font-size: 12px;
margin: 5px 0;
font-weight: normal;
}
.gform_wrapper .gform_body .gform_fields .gfield {
margin: 0;
padding: 0;
width: 175px;
}
.gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
display: none;
}
.gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type=email] {
width: 100%;
padding: 8px 0;
border: none;
border-bottom: 1px solid black;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}
.gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type=email]:focus {
outline: none;
border-bottom-color: #333;
}
.gform_wrapper .gform_footer {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: bottom;
margin-left: 0px;
}
.gform_wrapper .gform_footer .gform_button {
padding: 0px 2px;
background: white;
color: black;
border: 0px;
cursor: pointer;
font-size: 1.25em;
}
.gform_wrapper form {
display: flex;
align-items: flex-start;
gap: 10px;
}
.gform_wrapper .gfield_error h2 {
color: darkred;
font-size: 12px;
margin: 5px 0 0 0;
font-weight: normal;
}
.gform_wrapper .gfield_error .validation_message {
color: darkred;
font-size: 12px;
margin-top: 5px;
}
.mcgrath-video-intro {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.block-editor-block-list__layout .mcgrath-video-intro, .editor-styles-wrapper .mcgrath-video-intro {
width: 100%;
height: 50vh;
}
.mcgrath-video-intro .video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mcgrath-video-intro .video-container .intro-video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.mcgrath-video-intro .video-container .intro-video.intro-video-landscape {
display: block;
}
@media (orientation: portrait), (max-aspect-ratio: 9/16) {
.mcgrath-video-intro .video-container .intro-video.intro-video-landscape {
display: none;
}
}
.mcgrath-video-intro .video-container .intro-video.intro-video-portrait {
display: none;
}
@media (orientation: portrait), (max-aspect-ratio: 9/16) {
.mcgrath-video-intro .video-container .intro-video.intro-video-portrait {
display: block;
}
}
.mcgrath-video-intro .video-container .video-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.mcgrath-video-intro .content-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.mcgrath-video-intro .content-overlay svg.wordmark {
color: white;
width: 100%;
padding: 20px;
box-sizing: border-box;
max-width: 340px;
}
@media screen and (min-width: 430px) {
.mcgrath-video-intro .content-overlay svg.wordmark {
max-width: 600px;
padding: 40px;
}
}
section.page-content > section.section-image-links.single-full-width-images:first-child {
margin-top: -62px !important;
}
section.section-image-links {
margin: 30px 0px;
/*
EXAMPLE
*/
}
@media (min-width: 768px) {
section.section-image-links {
max-width: 1360px;
margin: 40px auto;
}
}
section.section-image-links .image-links-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
@media (min-width: 768px) {
section.section-image-links .image-links-grid {
gap: 40px;
}
}
section.section-image-links.single-images {
margin: 30px auto;
}
@media (min-width: 768px) {
section.section-image-links.single-images {
margin: 40px auto;
}
}
section.section-image-links.single-full-width-images {
width: 100vw;
max-width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
margin-top: 30px;
margin-bottom: 30px;
}
@media (min-width: 768px) {
section.section-image-links.single-full-width-images {
margin-top: 40px;
margin-bottom: 40px;
}
}
section.section-image-links.single-full-width-images .image-link {
aspect-ratio: 2/3;
min-height: 0;
overflow: hidden;
}
@media (min-width: 768px) {
section.section-image-links.single-full-width-images .image-link {
aspect-ratio: 3/2;
}
}
section.section-image-links.single-full-width-images .image-link img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
section.section-image-links.single-full-width-images .image-link img.mobile-image {
display: block;
}
@media (min-width: 768px) {
section.section-image-links.single-full-width-images .image-link img.mobile-image {
display: none;
}
}
section.section-image-links.single-full-width-images .image-link img.desktop-image {
display: none;
}
@media (min-width: 768px) {
section.section-image-links.single-full-width-images .image-link img.desktop-image {
display: block;
}
}
section.section-image-links.single-half-width-images {
margin: 30px auto;
}
@media (min-width: 768px) {
section.section-image-links.single-half-width-images {
margin: 40px auto;
}
section.section-image-links.single-half-width-images .image-links-grid {
grid-template-columns: 1fr 1fr;
}
}
section.section-image-links.image-pairs, section.section-image-links.image-pairs-uncropped {
margin: 30px 30px;
}
@media (min-width: 768px) {
section.section-image-links.image-pairs, section.section-image-links.image-pairs-uncropped {
margin: 40px auto;
}
section.section-image-links.image-pairs .image-links-grid, section.section-image-links.image-pairs-uncropped .image-links-grid {
grid-template-columns: 1fr 1fr;
}
section.section-image-links.image-pairs .image-links-grid.number-of-items-1, section.section-image-links.image-pairs-uncropped .image-links-grid.number-of-items-1 {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
}
section.section-image-links.image-pairs .image-link {
aspect-ratio: 3/4;
min-height: 0;
overflow: hidden;
}
section.section-image-links.image-pairs .image-link img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
section.section-image-links .image-link {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
text-decoration: none;
overflow: hidden;
background-color: #000000;
}
section.section-image-links .image-link img {
width: 100%;
height: auto;
display: block;
vertical-align: bottom;
flex-shrink: 0;
}
section.section-image-links .image-link .image-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: white;
padding: 10px;
}
@media (min-width: 768px) {
section.section-image-links .image-link .image-title {
padding: 20px;
}
}
section.section-image-links .image-link .block-editor-message {
padding: 20px;
background: #f0f0f0;
border: 2px dashed #ccc;
text-align: center;
color: #666;
}
.mcgrath-text-and-image {
max-width: 1360px;
display: grid;
gap: 2rem;
margin: 2rem auto;
grid-template-columns: 1fr;
grid-template-areas: "text" "image";
}
.mcgrath-text-and-image.mobile-image-above-text {
grid-template-areas: "image" "text";
}
.mcgrath-text-and-image.mobile-full-image-above-text {
grid-template-areas: "image" "text";
}
.mcgrath-text-and-image.mobile-full-image-above-text .image-content {
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
.mcgrath-text-and-image.mobile-text-above-image {
grid-template-areas: "text" "image";
}
.mcgrath-text-and-image .text-content {
grid-area: text;
}
.mcgrath-text-and-image .image-content {
grid-area: image;
}
.mcgrath-text-and-image .image-content img {
width: 100%;
height: auto;
display: block;
}
.mcgrath-text-and-image .image-content .image-placeholder {
width: 100%;
aspect-ratio: 3/4;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.mcgrath-text-and-image {
grid-template-columns: 1fr 1fr;
align-items: start;
grid-template-areas: "text image";
}
.mcgrath-text-and-image.mobile-full-image-above-text .image-content {
width: auto;
margin-left: 0;
margin-right: 0;
}
.mcgrath-text-and-image.text-right {
grid-template-areas: "image text";
}
.mcgrath-text-and-image.mobile-image-above-text, .mcgrath-text-and-image.mobile-full-image-above-text, .mcgrath-text-and-image.mobile-text-above-image {
grid-template-areas: "text image";
}
.mcgrath-text-and-image.mobile-image-above-text.text-right, .mcgrath-text-and-image.mobile-full-image-above-text.text-right, .mcgrath-text-and-image.mobile-text-above-image.text-right {
grid-template-areas: "image text";
}
}
.mcgrath-text-and-image .text-content h1, .mcgrath-text-and-image .text-content h2, .mcgrath-text-and-image .text-content h3, .mcgrath-text-and-image .text-content h4, .mcgrath-text-and-image .text-content h5, .mcgrath-text-and-image .text-content h6 {
margin-top: 0;
}
.mcgrath-text-and-image .text-content p:last-child {
margin-bottom: 0;
}
section.page-content > section.mcgrath-text-and-image:first-child.mobile-full-image-above-text {
margin-top: -62px !important;
}
@media (min-width: 768px) {
section.page-content > section.mcgrath-text-and-image:first-child.mobile-full-image-above-text {
margin-top: 2rem !important;
}
}
.mcgrath-press {
margin: 0px -20px 0px -20px;
}
@media (min-width: 768px) {
.mcgrath-press {
margin: 0vh -40px 0px -40px;
}
}
.mcgrath-press > div .press-container {
position: relative;
}
@media (hover: hover) and (pointer: fine) {
.mcgrath-press > div .press-container .press-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
z-index: 10;
opacity: 0;
}
.mcgrath-press > div .press-container .press-arrow:hover {
opacity: 1;
}
.mcgrath-press > div .press-container .press-arrow svg {
opacity: 0.5;
color: #000000;
width: 24px;
height: 24px;
}
.mcgrath-press > div .press-container .press-arrow svg:hover {
opacity: 1;
}
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
.mcgrath-press > div .press-container .press-arrow svg {
width: 32px;
height: 32px;
}
}
@media (hover: hover) and (pointer: fine) {
.mcgrath-press > div .press-container .press-arrow.press-arrow-left {
left: 20px;
}
.mcgrath-press > div .press-container .press-arrow.press-arrow-left svg {
transform: rotate(180deg);
}
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
.mcgrath-press > div .press-container .press-arrow.press-arrow-left {
left: 40px;
}
}
@media (hover: hover) and (pointer: fine) {
.mcgrath-press > div .press-container .press-arrow.press-arrow-right {
right: 20px;
}
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
.mcgrath-press > div .press-container .press-arrow.press-arrow-right {
right: 40px;
}
}
@media (hover: hover) and (pointer: fine) {
.mcgrath-press > div .press-container:hover .press-arrow {
opacity: 1;
}
}
@media (hover: none), (pointer: coarse) {
.mcgrath-press > div .press-container .press-arrow {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
.mcgrath-press > div .press-items {
display: grid;
grid-auto-flow: column;
grid-auto-columns: min-content;
gap: 50px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mcgrath-press > div .press-items.no-dot-nav {
margin-bottom: 80px;
}
.mcgrath-press > div .press-items::-webkit-scrollbar {
display: none;
}
@media (hover: hover) {
.mcgrath-press > div .press-items.grab-scroll {
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.mcgrath-press > div .press-items.grab-scroll:active, .mcgrath-press > div .press-items.grab-scroll.active {
cursor: grabbing;
}
}
@media (min-width: 768px) {
.mcgrath-press > div .press-items {
gap: 16.665vw;
}
}
.mcgrath-press > div .press-item {
display: flex;
flex-direction: column;
gap: 1rem;
width: 70vw;
flex-shrink: 0;
padding-bottom: 100px;
padding-top: 100px;
}
@media screen and (min-width: 768px) {
.mcgrath-press > div .press-item {
padding-bottom: 10vh;
padding-top: 10vh;
}
}
.mcgrath-press > div .press-item:first-child {
margin-left: 20px;
}
.mcgrath-press > div .press-item:last-child {
margin-right: 50vw;
}
@media (min-width: 768px) {
.mcgrath-press > div .press-item {
width: 33.33vw;
}
.mcgrath-press > div .press-item:first-child {
margin-left: 33.33vw;
}
.mcgrath-press > div .press-item:last-child {
margin-right: 33.33vw;
}
}
.mcgrath-press > div .press-item .press-image {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%;
overflow: hidden;
opacity: 0.5;
transition: opacity 0.3s ease;
}
.mcgrath-press > div .press-item .press-image.in-view {
opacity: 1;
}
.mcgrath-press > div .press-item .press-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.mcgrath-press > div .press-item .press-link a {
display: inline-block;
color: inherit;
text-decoration: none;
font-weight: bold;
}
.mcgrath-press > div .press-item .press-link a::after {
content: "";
display: inline-block;
width: 17px;
height: 8px;
margin-left: 0.5em;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
transition: background-image 0.2s ease;
}
.mcgrath-press > div .press-item .press-link a::after {
background-image: url('data:image/svg+xml;utf8,');
}
.mcgrath-press > div .press-item .press-link a:hover::after {
background-image: url('data:image/svg+xml;utf8,');
}
@media (min-width: 768px) {
.mcgrath-press > div .press-item .press-link a::after {
width: 22px;
height: 12px;
}
.mcgrath-press > div .press-item .press-link a::after {
background-image: url('data:image/svg+xml;utf8,');
}
.mcgrath-press > div .press-item .press-link a:hover::after {
background-image: url('data:image/svg+xml;utf8,');
}
}
.mcgrath-press > div .press-dot-nav {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 80px;
padding: 0 20px;
}
@media (min-width: 768px) {
.mcgrath-press > div .press-dot-nav {
margin-top: 80px;
gap: 16px;
padding: 0 40px;
margin-bottom: 100px;
}
}
.mcgrath-press > div .press-dot-nav .press-dot {
width: 7px;
height: 7px;
background-color: #7f7f7f;
text-decoration: none;
display: block;
}
.mcgrath-press > div .press-dot-nav .press-dot:hover {
background-color: #000000;
}
.mcgrath-press > div .press-dot-nav .press-dot.active {
background-color: #000000;
}
.mcgrath-press > div .press-placeholder {
padding: 2rem;
text-align: center;
background-color: #f5f5f5;
color: #666;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
width: 100%;
}
.top-navigation-bar {
position: relative;
transition: height 0.3s ease;
}
.top-navigation-bar .background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition: background-color 0.3s ease, -webkit-backdrop-filter 1s ease;
transition: backdrop-filter 1s ease, background-color 0.3s ease;
transition: backdrop-filter 1s ease, background-color 0.3s ease, -webkit-backdrop-filter 1s ease;
}
@supports not ((-webkit-backdrop-filter: blur(0px)) or (backdrop-filter: blur(0px))) {
.top-navigation-bar .background {
background-color: rgb(255, 255, 255);
}
}
.top-navigation-bar.blur-on-scroll-on:hover .background {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
transition: background-color 0.2s ease, -webkit-backdrop-filter 0.2s ease;
transition: backdrop-filter 0.2s ease, background-color 0.2s ease;
transition: backdrop-filter 0.2s ease, background-color 0.2s ease, -webkit-backdrop-filter 0.2s ease;
}
@supports not ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))) {
.top-navigation-bar.blur-on-scroll-on:hover .background {
background-color: rgba(255, 255, 255, 0.95);
}
}
.top-navigation-bar.expanded {
height: 100vh;
}
.top-navigation-bar.expanded .background {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background-color 1s ease, -webkit-backdrop-filter 0.7s ease;
transition: backdrop-filter 0.7s ease, background-color 1s ease;
transition: backdrop-filter 0.7s ease, background-color 1s ease, -webkit-backdrop-filter 0.7s ease;
}
.top-navigation-bar.expanded .foreground {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.top-navigation-bar:not(.line-on-scroll-on) .foreground .top {
border-bottom: 1px solid rgb(0, 0, 0);
}
.top-navigation-bar.line-on-scroll-on .foreground .top {
border-bottom: 1px solid rgba(0, 0, 0, 0);
}
.top-navigation-bar .foreground {
position: relative;
z-index: 2;
}
.top-navigation-bar .foreground .top {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 20px;
}
@media (min-width: 768px) {
.top-navigation-bar .foreground .top {
padding: 1rem 40px;
}
}
.top-navigation-bar .foreground .top .logo {
display: none;
transition: opacity 0.5s ease;
opacity: 0;
}
@media (min-width: 240px) {
.top-navigation-bar .foreground .top .logo {
display: flex;
}
}
.top-navigation-bar .foreground .top .logo > a > svg {
width: 0px;
height: auto;
}
.top-navigation-bar .foreground .top .logo > a > svg .wordmark-text {
fill: #000000;
}
@media (min-width: 240px) {
.top-navigation-bar .foreground .top .logo > a > svg {
width: calc(100% - 20px);
}
}
@media (min-width: 330px) {
.top-navigation-bar .foreground .top .logo > a > svg {
width: 236px;
}
}
.top-navigation-bar .foreground .top .logo.visible {
opacity: 1;
}
.top-navigation-bar .foreground .top .menu-button {
cursor: pointer;
padding: 8px 0px;
}
.top-navigation-bar .foreground .top .menu-button .menu-icon {
width: 24px;
height: 12px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.top-navigation-bar .foreground .top .menu-button .menu-icon span {
display: block;
width: 100%;
height: 2px;
background-color: #000000;
transition: all 0.3s ease;
transform-origin: center;
}
.top-navigation-bar .foreground .top .menu-button .menu-icon:hover span {
background-color: #333333;
}
.top-navigation-bar .foreground .top .menu-button.active .menu-icon span:first-child {
transform: translateY(5px) rotate(45deg);
}
.top-navigation-bar .foreground .top .menu-button.active .menu-icon span:last-child {
transform: translateY(-5px) rotate(-45deg);
}
.top-navigation-bar .foreground .bottom {
display: none;
flex: 1;
overflow-y: auto;
overflow: auto;
}
.top-navigation-bar .foreground .bottom.show {
display: block;
}
.top-navigation-bar .foreground .bottom .navigation-columns {
position: relative;
height: 100%;
}
.top-navigation-bar .foreground .bottom .navigation-columns .main-navigation {
width: 100%;
}
.top-navigation-bar .foreground .bottom .navigation-columns .image-preview-area {
position: absolute;
left: 160px;
top: 20px;
width: calc(100% - 240px);
max-width: 400px;
display: none;
}
@media (min-width: 390px) {
.top-navigation-bar .foreground .bottom .navigation-columns .image-preview-area {
display: block;
}
}
@media (min-width: 768px) {
.top-navigation-bar .foreground .bottom .navigation-columns .image-preview-area {
left: 200px;
top: 40px;
width: calc(100% - 280px);
}
}
.top-navigation-bar .foreground .bottom .navigation-columns .image-preview-area .image-preview {
width: 100%;
aspect-ratio: 3/2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
opacity: 0;
transition: opacity 0.3s ease;
}
.top-navigation-bar .foreground .bottom .navigation-columns .image-preview-area .image-preview.active {
opacity: 1;
}
.top-navigation-bar .foreground .bottom nav.main-navigation {
margin-top: 20px;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu {
margin: 0;
padding: 20px;
list-style: none;
font-weight: 600;
}
@media (min-width: 768px) {
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu {
padding: 40px;
}
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li {
margin-bottom: 30px;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li:last-child {
margin-bottom: 0;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li a,
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li span {
color: inherit;
text-decoration: none;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li.submenu-parent-li > span {
cursor: pointer;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li.submenu-parent-li > span::after {
content: "+";
transition: transform 0.3s ease;
display: inline-block;
margin-left: auto;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li.submenu-parent-li > span.active::after {
transform: rotate(45deg);
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li.submenu-parent-li > ul.submenu {
max-width: 160px;
list-style: none;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease, margin 0.4s ease;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li.submenu-parent-li > ul.submenu.show {
height: auto;
opacity: 1;
visibility: visible;
margin: 20px 0px;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li.submenu-parent-li > ul.submenu li {
margin-bottom: 2em;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li.submenu-parent-li > ul.submenu li:last-child {
margin-bottom: 0;
}
.top-navigation-bar .foreground .bottom nav.main-navigation ul.menu > li.submenu-parent-li > ul.submenu li a {
color: inherit;
text-decoration: none;
}
.top-navigation-bar.scrolled-down:not(.expanded).blur-on-scroll-on .background {
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
background-color: rgba(255, 255, 255, 0.33);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.top-navigation-bar.scrolled-down:not(.expanded).blur-on-scroll-on .background {
background-color: rgba(255, 255, 255, 0.5);
}
}
.top-navigation-bar.scrolled-down:not(.expanded).white-on-scroll-on .background {
background-color: rgb(255, 255, 255);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.top-navigation-bar.scrolled-down:not(.expanded).line-on-scroll-on .foreground .top {
border-bottom: 1px solid rgb(0, 0, 0);
}
.top-navigation-bar.expanded.line-on-scroll-on .foreground .top, .top-navigation-bar.scrolled-down.expanded.line-on-scroll-on .foreground .top {
border-bottom: 1px solid rgb(0, 0, 0);
}
.top-navigation-bar.shorter .foreground .top .menu-button .menu-icon {
height: 10px;
}
.top-navigation-bar.shorter .foreground .top .menu-button.active .menu-icon span:first-child {
transform: translateY(4px) rotate(45deg);
}
.top-navigation-bar.shorter .foreground .top .menu-button.active .menu-icon span:last-child {
transform: translateY(-4px) rotate(-45deg);
}
body.nav-expanded {
overflow: hidden;
height: 100vh;
}
html.nav-expanded {
overflow: hidden;
}
body {
padding-top: 80px;
}
div.navigation-spacer {
height: 62px;
}
.shorter + div.navigation-spacer,
body.shorter div.navigation-spacer {
height: 60px;
}
@media screen and (max-width: 782px) {
#wpadminbar {
position: fixed !important;
top: 0 !important;
}
.admin-bar body {
margin-top: 46px !important;
}
.admin-bar header {
top: 46px !important;
}
}
@media screen and (min-width: 783px) {
.admin-bar header {
top: 32px !important;
}
}
body.type-scaled {
font-size: calc(1rem * var(--type-scale, 1));
}
footer.site-footer {
border-top: 1px solid black;
padding: 20px;
}
@media (min-width: 768px) {
footer.site-footer {
padding: 40px;
}
}
footer.site-footer .footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
footer.site-footer .footer-grid {
grid-template-columns: 1fr auto;
gap: 40px;
align-items: start;
}
}
footer.site-footer .footer-content {
cursor: default;
}
footer.site-footer .footer-content .footer-section {
margin-bottom: 30px;
}
footer.site-footer .footer-content .footer-section:last-child {
margin-bottom: 0;
}
footer.site-footer .footer-content .footer-section .footer-section-title {
font-size: 1em;
font-weight: bold;
margin: 0 0 10px 0;
}
footer.site-footer .footer-content .footer-section p, footer.site-footer .footer-content .footer-section a {
margin: 0 0 5px 0;
color: black;
text-decoration: none;
}
footer.site-footer .footer-content .footer-section a:hover {
text-decoration: underline;
}
footer.site-footer .footer-logo {
margin-top: 80px;
justify-self: end;
}
@media (min-width: 768px) {
footer.site-footer .footer-logo {
margin-top: 0;
}
}
footer.site-footer .footer-logo svg, footer.site-footer .footer-logo img {
width: 100%;
max-width: 93px;
height: auto;
display: block;
}
@media (min-width: 768px) {
footer.site-footer .footer-logo svg, footer.site-footer .footer-logo img {
width: 100%;
max-width: 128px;
}
}
.projects-navigation {
text-align: center;
padding-left: 20px;
padding-right: 20px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
}
.projects-navigation > div.projects-navigation-title {
margin-bottom: 20px;
font-weight: bold;
}
.projects-navigation > div.projects-navigation-links a {
white-space: nowrap;
}
@media (max-width: 300px) {
.projects-navigation > div.projects-navigation-links a {
white-space: normal;
}
}
.projects-navigation > div.projects-navigation-links a:hover {
text-decoration: underline;
}
section.shop-unavailable-message {
max-width: 1360px;
margin: 60px 0px;
color: white;
background-color: #000000;
padding: 2em 2em;
box-sizing: border-box;
}
@media (min-width: 768px) {
section.shop-unavailable-message {
margin: 120px auto;
}
}
section.shop-unavailable-message h2 {
margin-bottom: 20px;
}
section.products {
max-width: 1360px;
margin: 60px 0px;
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: baseline;
}
@media (min-width: 768px) {
section.products {
margin: 120px auto;
}
}
@media (min-width: 768px) {
section.products {
gap: 70px;
}
}
section.products.crop_images_to_3x4 {
display: grid;
grid-template-columns: repeat(1, 1fr);
align-items: start;
}
@media (min-width: 600px) {
section.products.crop_images_to_3x4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
section.products.crop_images_to_3x4 {
grid-template-columns: repeat(3, 1fr);
}
}
section.products a.product-link {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 600px) {
section.products a.product-link {
width: calc(50% - 10px);
}
}
@media (min-width: 768px) {
section.products a.product-link {
width: calc(33.333% - 46.67px);
}
}
section.products a.product-link img {
width: 100%;
height: auto;
display: block;
}
section.products a.product-link p.eyebrow {
margin-top: 10px;
text-transform: inherit;
}
@media (min-width: 768px) {
section.products a.product-link p.eyebrow {
margin-top: 15px;
}
}
section.products a.product-link p.eyebrow .product-link-tags {
display: block;
margin-bottom: 0.5em;
}
section.products a.product-link p.eyebrow .product-link-tags .on-hold,
section.products a.product-link p.eyebrow .product-link-tags .on-sale {
text-transform: uppercase;
font-weight: bold;
}
section.products.crop_images_to_3x4 a.product-link {
width: auto;
}
section.products.crop_images_to_3x4 a.product-link img {
aspect-ratio: 3/4;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
section.single-product {
max-width: 1360px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 60px;
}
@media (min-width: 768px) {
section.single-product {
grid-template-columns: 1fr 1fr;
gap: 80px;
}
}
section.single-product .text-column {
display: flex;
flex-direction: column;
gap: 20px;
order: 1;
padding-bottom: 20px;
}
@media (min-width: 768px) {
section.single-product .text-column {
position: sticky;
top: 40px;
align-self: start;
order: 2;
}
}
section.single-product .text-column .mobile-first-image {
display: block;
margin-left: -20px;
margin-right: -20px;
margin-bottom: 20px;
}
@media (min-width: 768px) {
section.single-product .text-column .mobile-first-image {
display: none;
margin-left: 0;
margin-right: 0;
}
}
section.single-product .text-column .mobile-first-image img {
width: 100%;
height: auto;
display: block;
}
section.single-product .text-column h2 {
margin: 0;
}
section.single-product .text-column .description p {
margin: 0 0 1em 0;
}
section.single-product .text-column .description p:last-child {
margin-bottom: 0;
}
section.single-product .text-column .tear_sheet a {
color: #000000;
}
section.single-product .text-column .tear_sheet a:hover {
opacity: 0.7;
}
section.single-product .text-column .dimensions .dimension-width-depth-height .dimension:nth-child(n+2)::before {
content: " × ";
}
section.single-product .text-column .price .formatted-price {
display: block;
}
section.single-product .text-column .price .formatted-price .original-price {
text-decoration: line-through;
}
section.single-product .text-column .price .formatted-price .sale-price {
font-weight: 600;
}
section.single-product .images-column {
order: 2;
margin-left: -20px;
margin-right: -20px;
}
@media (min-width: 768px) {
section.single-product .images-column {
order: 1;
margin-left: 0;
margin-right: 0;
}
}
section.single-product .images-column .images {
display: flex;
flex-direction: column;
gap: 0;
}
@media (min-width: 768px) {
section.single-product .images-column .images {
gap: 20px;
}
}
section.single-product .images-column .images img {
width: 100%;
height: auto;
display: block;
}
section.single-product .images-column .images img.first-image {
display: none;
}
@media (min-width: 768px) {
section.single-product .images-column .images img.first-image {
display: block;
}
}
@media (min-width: 768px) {
section.single-product .clear {
display: none;
}
}
@media print {
section.single-product .text-column .tear_sheet {
display: none;
}
section.single-product .images-column .images img {
width: 50%;
margin: 0 auto 20px auto;
-moz-column-break-inside: avoid;
break-inside: avoid;
}
}
body.type-scaled {
font-size: calc(1rem * var(--type-scale, 1)) !important;
}
body.type-scaled * {
font-size: inherit !important;
}
body {
padding: 0px;
margin: 0px;
font-family: "sm-sans", sans-serif;
font-weight: normal;
}
body a {
color: inherit;
text-decoration: none;
}
section.page-content {
margin: 0px 20px;
}
@media (min-width: 768px) {
section.page-content {
margin: 0px 40px;
}
}
section.page-content > section.mcgrath-video-intro {
margin-left: -20px;
margin-right: -20px;
}
@media (min-width: 768px) {
section.page-content > section.mcgrath-video-intro {
margin-left: -40px;
margin-right: -40px;
}
}
