:root { --habito-black: #050505; --habito-surface: #111111; --habito-paper: #f3f3ef; --habito-ink: #141414; --habito-white: #f3f3ef; --habito-muted: #999992; --habito-gold: #c7a76a; --habito-line: rgba(243, 243, 239, 0.17); --habito-shell: min(1280px, calc(100% - 40px)); } body.habito-inner-body { margin: 0; background: var(--habito-black); color: var(--habito-white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; } /* WooCommerce adds its state classes to , so its main wrapper is a * sibling state rather than a descendant of .habito-inner-body. Keep the * storefront on the same paper surface as the rest of the editorial pages. */ body.habito-inner-body.woocommerce, body.habito-inner-body.woocommerce-page { width: 100%; max-width: none; margin: 0; padding: 0; background: var(--habito-paper); color: var(--habito-ink); } body.habito-inner-body.woocommerce > main, body.habito-inner-body.woocommerce-page > main { width: var(--habito-shell); max-width: none; margin-inline: auto; padding-block: clamp(70px, 9vw, 130px); } body.habito-inner-body.woocommerce #primary, body.habito-inner-body.woocommerce-page #primary, body.habito-inner-body.woocommerce #content, body.habito-inner-body.woocommerce-page #content { width: 100%; max-width: none; background: var(--habito-paper); color: var(--habito-ink); } .habito-inner-body *, .habito-inner-body *::before, .habito-inner-body *::after { box-sizing: border-box; } .habito-inner-body a { color: inherit; } .habito-shell { width: var(--habito-shell); margin-inline: auto; } .habito-site-header { position: sticky; z-index: 50; top: 0; color: var(--habito-white); background: var(--habito-black); border-bottom: 1px solid var(--habito-line); } .admin-bar .habito-site-header { top: 32px; } .habito-site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; } .habito-site-wordmark { display: inline-flex; align-items: center; min-width: 118px; text-decoration: none; } .habito-site-wordmark img { display: block; width: auto; max-width: 136px; height: 32px; object-fit: contain; } .habito-site-navigation { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 38px); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .habito-site-navigation > a:not(.habito-site-button) { color: rgba(243, 243, 239, 0.74); text-decoration: none; transition: color 180ms ease; } .habito-site-navigation > a:not(.habito-site-button):hover, .habito-site-navigation > a:not(.habito-site-button):focus-visible { color: var(--habito-white); } .habito-site-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 20px; color: var(--habito-black) !important; background: var(--habito-white); border: 1px solid transparent; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1; text-decoration: none; text-transform: uppercase; transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; } .habito-site-button:hover, .habito-site-button:focus-visible { color: var(--habito-black) !important; background: var(--habito-gold); transform: translateY(-2px); } .habito-site-button--gold { background: var(--habito-gold); } .habito-site-menu-toggle { display: none; width: 44px; height: 44px; padding: 11px 8px; color: var(--habito-white); background: transparent; border: 1px solid var(--habito-line); cursor: pointer; } .habito-site-menu-toggle span:not(.screen-reader-text) { display: block; width: 100%; height: 1px; margin: 5px 0; background: currentColor; } .habito-page-main { min-height: 60vh; background: var(--habito-black); } .habito-page-hero { padding-block: clamp(90px, 13vw, 180px) clamp(70px, 9vw, 120px); background: var(--habito-surface); border-bottom: 1px solid var(--habito-line); } .habito-page-kicker, .habito-location-detail__index { margin: 0 0 24px; color: var(--habito-gold); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; line-height: 1.4; text-transform: uppercase; } .habito-page-hero h1 { max-width: 950px; margin: 0; color: var(--habito-white); font-size: clamp(3rem, 8.5vw, 8rem); font-weight: 650; letter-spacing: -0.07em; line-height: 0.92; } .habito-page-hero__lead { max-width: 520px; margin: 28px 0 0; color: var(--habito-muted); font-size: clamp(1.05rem, 1.7vw, 1.35rem); } .habito-page-content { padding-block: clamp(70px, 10vw, 150px); color: var(--habito-ink); background: var(--habito-paper); } .habito-page-content__article { max-width: 920px; margin-inline: auto; font-size: 1.02rem; } .habito-page-content__article h2, .habito-page-content__article h3, .habito-page-content__article h4 { color: var(--habito-ink); letter-spacing: -0.04em; line-height: 1.1; } .habito-page-content__article h2 { margin-top: 0; font-size: clamp(2rem, 4vw, 3.6rem); } .habito-page-content__article h3 { margin-top: 2.5em; font-size: clamp(1.35rem, 2.5vw, 2rem); } .habito-page-content__article p, .habito-page-content__article li { color: #4f4f49; } .habito-page-content__article p { margin-block: 0 1.15em; } .habito-page-content__article ul, .habito-page-content__article ol { margin-block: 0 1.25em; padding-left: 1.4em; } .habito-page-content__article a { color: #866b37; text-decoration-thickness: 1px; text-underline-offset: 3px; } .habito-page-content__article > *:first-child { margin-top: 0; } .habito-location-directory { padding-block: clamp(80px, 11vw, 170px); background: var(--habito-black); } .habito-location-directory__intro { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 40px; align-items: end; padding-bottom: 44px; border-bottom: 1px solid var(--habito-line); } .habito-location-directory__intro h2 { max-width: 780px; margin: 0; color: var(--habito-white); font-size: clamp(2.4rem, 5vw, 5.3rem); font-weight: 650; letter-spacing: -0.06em; line-height: 0.95; } .habito-location-directory__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 28px; } .habito-location-detail { display: flex; flex-direction: column; min-width: 0; background: var(--habito-surface); border: 1px solid var(--habito-line); } .habito-location-detail__media { aspect-ratio: 0.88; overflow: hidden; background: #181816; } .habito-location-detail__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .habito-location-detail__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 26px 24px 28px; } .habito-location-detail__index { margin-bottom: 13px; font-size: 0.61rem; } .habito-location-detail h2 { margin: 0 0 16px; color: var(--habito-white); font-size: clamp(1.55rem, 2.5vw, 2.3rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.98; } .habito-location-detail__body > p:not(.habito-location-detail__index) { margin: 0; color: var(--habito-muted); font-size: 0.93rem; } .habito-location-detail__phone { margin-top: 10px; color: var(--habito-white); font-size: 0.88rem; text-decoration: none; } .habito-location-detail__actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: auto; padding-top: 30px; } .habito-site-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--habito-white); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.11em; text-decoration: none; text-transform: uppercase; } .habito-site-text-link span { color: var(--habito-gold); font-size: 1rem; } .habito-site-footer { padding-block: 72px 26px; color: var(--habito-white); background: var(--habito-black); } .habito-site-footer__top, .habito-site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .habito-site-footer__top { padding-bottom: 34px; border-bottom: 1px solid var(--habito-line); } .habito-site-footer__brand-lockup { display: flex; align-items: flex-end; gap: 20px; min-width: 0; } .habito-site-footer__brand { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 42px; } .habito-site-footer__brand img { display: block; width: clamp(124px, 10vw, 160px); height: auto; max-height: 46px; object-fit: contain; } .habito-site-footer__brand > span { color: var(--habito-white); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.07em; line-height: 0.9; } .habito-site-footer__brand-meta { display: flex; flex-direction: column; gap: 4px; padding-bottom: 2px; color: var(--habito-muted); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.35; text-transform: uppercase; } .habito-site-footer__brand-meta span:first-child { color: var(--habito-gold); } .habito-site-footer__prompt { display: flex; flex-direction: column; gap: 4px; margin: 0 auto 0 clamp(10px, 3vw, 54px); color: var(--habito-muted); font-size: 0.82rem; line-height: 1.25; } .habito-site-footer__prompt strong { color: var(--habito-white); font-size: 1rem; font-weight: 500; } .habito-site-footer__top > .habito-site-button { flex: 0 0 auto; } .habito-site-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding-block: 46px; } .habito-site-footer__grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .habito-site-footer__label { margin-bottom: 7px; color: var(--habito-gold); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; } .habito-site-footer__grid a, .habito-site-footer__muted { color: var(--habito-muted); font-size: 0.88rem; text-decoration: none; } .habito-site-footer__grid a:hover, .habito-site-footer__grid a:focus-visible { color: var(--habito-white); } .habito-site-footer__bottom { padding-top: 22px; border-top: 1px solid var(--habito-line); color: var(--habito-muted); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; } .habito-inner-body .woocommerce { width: var(--habito-shell); max-width: none; margin-inline: auto; padding-block: clamp(70px, 9vw, 130px); color: var(--habito-ink); } .habito-inner-body .woocommerce .woocommerce-breadcrumb, .habito-inner-body.woocommerce .woocommerce-breadcrumb { margin: 0 0 28px; color: #77776e; font-size: 0.78rem; } .habito-inner-body .woocommerce h1, .habito-inner-body .woocommerce h2, .habito-inner-body .woocommerce h3, .habito-inner-body.woocommerce h1, .habito-inner-body.woocommerce h2, .habito-inner-body.woocommerce h3 { color: var(--habito-ink); letter-spacing: -0.06em; } .habito-inner-body .woocommerce h1, .habito-inner-body.woocommerce h1 { margin-bottom: 36px; font-size: clamp(3rem, 7vw, 7rem); line-height: 0.92; } .habito-inner-body .woocommerce ul.products, .habito-inner-body.woocommerce ul.products { gap: 18px; } .habito-inner-body .woocommerce ul.products li.product, .habito-inner-body.woocommerce ul.products li.product { display: flex; flex-direction: column; float: none; width: auto; margin: 0; padding: 0 0 22px; background: #fff; border: 1px solid #dfdfd8; } .habito-inner-body .woocommerce ul.products li.product a img, .habito-inner-body.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 0.88; margin: 0 0 18px; object-fit: contain; background: #ecece8; } .habito-inner-body .woocommerce ul.products li.product .woocommerce-loop-product__title, .habito-inner-body .woocommerce ul.products li.product .price, .habito-inner-body .woocommerce ul.products li.product .button, .habito-inner-body.woocommerce ul.products li.product .woocommerce-loop-product__title, .habito-inner-body.woocommerce ul.products li.product .price, .habito-inner-body.woocommerce ul.products li.product .button { margin-inline: 20px; } .habito-inner-body .woocommerce ul.products li.product .woocommerce-loop-product__title, .habito-inner-body.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; color: var(--habito-ink); font-size: 1.08rem; } .habito-inner-body .woocommerce ul.products li.product .price, .habito-inner-body.woocommerce ul.products li.product .price { color: #6d6d65; } .habito-inner-body .woocommerce ul.products li.product .button, .habito-inner-body .woocommerce a.button, .habito-inner-body .woocommerce button.button, .habito-inner-body .woocommerce input.button, .habito-inner-body.woocommerce ul.products li.product .button, .habito-inner-body.woocommerce a.button, .habito-inner-body.woocommerce button.button, .habito-inner-body.woocommerce input.button { width: fit-content; margin-top: 18px; color: var(--habito-black); background: var(--habito-gold); border: 0; border-radius: 0; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .habito-inner-body .woocommerce a.button:hover, .habito-inner-body .woocommerce button.button:hover, .habito-inner-body .woocommerce input.button:hover, .habito-inner-body.woocommerce a.button:hover, .habito-inner-body.woocommerce button.button:hover, .habito-inner-body.woocommerce input.button:hover { color: var(--habito-black); background: #e1c486; } .habito-inner-body .woocommerce form .form-row input.input-text, .habito-inner-body .woocommerce form .form-row textarea, .habito-inner-body .woocommerce form .form-row select, .habito-inner-body .woocommerce form .form-row .select2-container .select2-selection, .habito-inner-body.woocommerce form .form-row input.input-text, .habito-inner-body.woocommerce form .form-row textarea, .habito-inner-body.woocommerce form .form-row select, .habito-inner-body.woocommerce form .form-row .select2-container .select2-selection { min-height: 48px; padding: 12px 14px; border: 1px solid #c9c9c1; border-radius: 0; background: #fff; } .habito-inner-body .woocommerce-info, .habito-inner-body .woocommerce-message, .habito-inner-body .woocommerce-error, .habito-inner-body.woocommerce-info, .habito-inner-body.woocommerce-message, .habito-inner-body.woocommerce-error { border-top-color: var(--habito-gold); } /* Astra hides the gallery trigger with text-indent. WordPress replaces the * trigger glyph with an emoji image, which otherwise inherits that indent * and creates a giant off-canvas element on narrow screens. */ body.habito-inner-body.woocommerce .woocommerce-product-gallery__trigger span, body.habito-inner-body.woocommerce-page .woocommerce-product-gallery__trigger span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; text-indent: 0; } body.habito-inner-body.woocommerce .woocommerce-product-gallery__trigger, body.habito-inner-body.woocommerce-page .woocommerce-product-gallery__trigger { text-indent: 0 !important; font-size: 0; } body.habito-inner-body.woocommerce .woocommerce-product-gallery__trigger img.emoji, body.habito-inner-body.woocommerce-page .woocommerce-product-gallery__trigger img.emoji { display: block; width: 20px !important; height: 20px !important; margin: 0 !important; text-indent: 0; } @media (max-width: 900px) { .habito-site-navigation { gap: 18px; } .habito-location-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .admin-bar .habito-site-header { top: 46px; } .habito-site-header__inner { min-height: 68px; } .habito-site-menu-toggle { display: block; } .habito-site-navigation { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 16px 20px 22px; background: var(--habito-black); border-bottom: 1px solid var(--habito-line); } .habito-site-navigation.is-open { display: flex; } .habito-site-navigation > a:not(.habito-site-button) { padding: 14px 0; border-bottom: 1px solid var(--habito-line); } .habito-site-navigation .habito-site-button { width: fit-content; margin-top: 16px; } .habito-page-hero { padding-block: 86px 72px; } .habito-page-hero h1 { font-size: clamp(3rem, 16vw, 5.2rem); } .habito-location-directory__intro { display: block; } .habito-location-directory__intro h2 { margin-top: 30px; } .habito-location-directory__grid { display: flex; flex-direction: column; } .habito-location-detail__media { aspect-ratio: 1.08; } .habito-site-footer__top, .habito-site-footer__bottom { align-items: flex-start; flex-direction: column; } .habito-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 22px; } .habito-site-footer__grid > div:last-child { grid-column: 1 / -1; } .habito-site-footer__brand-lockup { gap: 14px; } .habito-site-footer__prompt { margin: 0; } .habito-site-footer__brand img { width: 136px; } body.habito-inner-body.woocommerce > main, body.habito-inner-body.woocommerce-page > main, .habito-inner-body .woocommerce { width: min(100% - 40px, 1280px); padding-block: 60px 90px; } .habito-inner-body .woocommerce ul.products, .habito-inner-body.woocommerce ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } body.habito-inner-body.woocommerce ul.products li.product .button, body.habito-inner-body.woocommerce-page ul.products li.product .button { width: calc(100% - 40px); justify-content: center; white-space: nowrap; font-size: 0.62rem; letter-spacing: 0.05em; padding-inline: 8px; } } @media (max-width: 480px) { .habito-shell { width: min(100% - 32px, 1280px); } .habito-inner-body .woocommerce ul.products, .habito-inner-body.woocommerce ul.products { grid-template-columns: 1fr; } }