/* ========================================================================== Metalista redesign | R.A.S Group Palette: plaster wall, graphite, steel, brass ========================================================================== */ :root { --rmr-wall: #ebe7e0; --rmr-paper: #f7f5f1; --rmr-white: #ffffff; --rmr-ink: #17191c; --rmr-graphite: #1d2023; --rmr-steel: #62666b; --rmr-mute: #8a9299; --rmr-line: #ddd8cf; --rmr-brass: #a07a3a; --rmr-brass-dark: #83612a; --rmr-brass-light: #d9bc85; --rmr-ok: #2f7a4d; --rmr-err: #a4322a; --rmr-display: "Assistant", "Arial Hebrew", Arial, sans-serif; --rmr-body: "Assistant", "Arial Hebrew", Arial, sans-serif; --rmr-wrap: 1320px; --rmr-gut: clamp(18px, 4vw, 40px); --rmr-sec: clamp(56px, 8vw, 104px); --rmr-header-h: 76px; --rmr-shadow-hang: 0 1px 0 rgba(26, 29, 32, .05), 0 14px 24px -10px rgba(26, 29, 32, .28), 10px 24px 40px -18px rgba(26, 29, 32, .22); } /* ---------- base ---------- */ body.rmr-on { margin: 0; background: var(--rmr-paper); color: var(--rmr-ink); font-family: var(--rmr-body); font-size: 16px; line-height: 1.6; direction: rtl; text-align: right; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.rmr-on.rmr-lock { overflow: hidden; } :where(.rmr-root) *, :where(.rmr-root) *::before, :where(.rmr-root) *::after { box-sizing: border-box; } :where(.rmr-root) img { max-width: 100%; height: auto; display: block; } :where(.rmr-root) a { color: inherit; text-decoration: none; } :where(.rmr-root) button { font-family: inherit; } :where(.rmr-root) :is(h1, h2, h3, h4) { margin: 0; color: inherit; letter-spacing: 0; text-transform: none; } :where(.rmr-root) p { margin: 0 0 1em; } :where(.rmr-root) p:last-child { margin-bottom: 0; } .rmr-root :focus-visible { outline: 2px solid var(--rmr-brass); outline-offset: 3px; } .rmr-root [hidden] { display: none !important; } .rmr-wrap { width: 100%; max-width: var(--rmr-wrap); margin-inline: auto; padding-inline: var(--rmr-gut); } .rmr-sr, .rmr-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rmr-skip { position: absolute; top: -100px; right: 12px; z-index: 1000; background: var(--rmr-ink); color: #fff; padding: 10px 16px; } .rmr-skip:focus { top: 12px; } .rmr-ico { width: 22px; height: 22px; flex: none; } /* ---------- type ---------- */ .rmr-h1 { font-family: var(--rmr-display); font-weight: 400; font-size: clamp(2.5rem, 5.2vw, 4.4rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; } .rmr-h1--page { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 12px; } .rmr-h2 { font-family: var(--rmr-display); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.1; text-wrap: balance; } .rmr-lead { color: var(--rmr-steel); font-size: 1.05rem; max-width: 58ch; margin-top: 10px; } .rmr-link { font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; } .rmr-link:hover { color: var(--rmr-brass); } /* ---------- buttons ---------- */ .rmr-btn, body.rmr-on .rmr-buy .single_add_to_cart_button, body.rmr-on .rmr-root .button, body.rmr-on .rmr-root button.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: 2px; font-family: var(--rmr-body); font-size: 1rem; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; text-decoration: none; } .rmr-btn .rmr-ico { width: 20px; height: 20px; } .rmr-btn--ink, body.rmr-on .rmr-root .button, body.rmr-on .rmr-root button.button { background: var(--rmr-ink); color: #fff; } .rmr-btn--ink:hover, body.rmr-on .rmr-root .button:hover { background: var(--rmr-brass-dark); color: #fff; } .rmr-btn--brass, body.rmr-on .rmr-buy .single_add_to_cart_button, body.rmr-on .rmr-root .checkout-button, body.rmr-on .rmr-root #place_order { background: var(--rmr-brass); color: #fff; } .rmr-btn--brass:hover, body.rmr-on .rmr-buy .single_add_to_cart_button:hover, body.rmr-on .rmr-root .checkout-button:hover, body.rmr-on .rmr-root #place_order:hover { background: var(--rmr-brass-dark); color: #fff; } .rmr-btn--line { background: transparent; color: var(--rmr-ink); border-color: var(--rmr-ink); } .rmr-btn--line:hover { background: var(--rmr-ink); color: #fff; } .rmr-btn--light { background: #fff; color: var(--rmr-ink); } .rmr-btn--light:hover { background: var(--rmr-wall); } .rmr-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .rmr-btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); } .rmr-btn--block { width: 100%; } .rmr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* ---------- preview bar ---------- */ .rmr-previewbar { position: relative; z-index: 60; background: #fff4d6; color: #5c4712; font-family: var(--rmr-body); font-size: 14px; padding: 8px var(--rmr-gut); text-align: center; direction: rtl; } .rmr-previewbar a { color: #5c4712; font-weight: 600; text-decoration: underline; margin-inline-start: 12px; } /* ---------- announcement ---------- */ .rmr-announce { background: var(--rmr-ink); color: #e9ebec; font-size: 13.5px; } .rmr-announce__row { display: flex; justify-content: center; gap: 36px; min-height: 36px; align-items: center; } .rmr-announce__row span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--rmr-brass); margin-inline-end: 36px; vertical-align: middle; position: relative; top: -2px; } @media (max-width: 760px) { .rmr-announce__row span:not(:first-child) { display: none; } } /* ---------- header ---------- */ .rmr-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 241, .96); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; } body.admin-bar .rmr-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .rmr-header { top: 0; } } .rmr-header.is-scrolled { border-bottom-color: var(--rmr-line); } .rmr-header__row { display: flex; align-items: center; gap: 28px; min-height: var(--rmr-header-h); } .rmr-logo { display: flex; align-items: center; flex: none; } .rmr-logo img { max-height: 46px; width: auto; } .rmr-logo__word { font-family: var(--rmr-display); font-size: 2rem; line-height: 1; } .rmr-nav { flex: 1; } .rmr-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; } .rmr-nav > ul > li > a { display: inline-flex; align-items: center; min-height: var(--rmr-header-h); padding: 0 14px; font-weight: 500; font-size: 15.5px; position: relative; } .rmr-nav > ul > li > a::after { content: ""; position: absolute; right: 14px; left: 14px; bottom: 22px; height: 1px; background: var(--rmr-brass); transform: scaleX(0); transition: transform .2s; } .rmr-nav > ul > li:hover > a::after, .rmr-nav > ul > li:focus-within > a::after { transform: scaleX(1); } .rmr-mega { position: absolute; right: 0; left: 0; top: 100%; background: var(--rmr-paper); border-top: 1px solid var(--rmr-line); border-bottom: 1px solid var(--rmr-line); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; box-shadow: 0 24px 40px -24px rgba(26, 29, 32, .25); } .rmr-nav__has:hover .rmr-mega, .rmr-nav__has:focus-within .rmr-mega { opacity: 1; visibility: visible; transform: none; } .rmr-mega__inner { max-width: var(--rmr-wrap); margin: 0 auto; padding: 28px var(--rmr-gut) 32px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; align-items: start; } .rmr-mega__item { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; font-weight: 500; } .rmr-mega__img { aspect-ratio: 1; background: var(--rmr-wall); overflow: hidden; } .rmr-mega__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .rmr-mega__item:hover .rmr-mega__img img { transform: scale(1.04); } .rmr-mega__all { align-self: center; justify-self: start; font-weight: 600; border-bottom: 1px solid currentColor; } .rmr-header__tools { display: flex; gap: 4px; margin-inline-start: auto; } .rmr-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; border-radius: 50%; color: var(--rmr-ink); cursor: pointer; position: relative; padding: 0; } .rmr-iconbtn:hover { background: var(--rmr-wall); } .rmr-cart-count { position: absolute; top: 4px; left: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rmr-brass); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; } .rmr-cart-count[data-count="0"] { display: none; } .rmr-only-mobile { display: none; } .rmr-search { border-top: 1px solid var(--rmr-line); background: var(--rmr-paper); } .rmr-search__form { display: flex; align-items: center; gap: 12px; min-height: 72px; } .rmr-search__form input[type="search"] { flex: 1; border: 0; background: transparent; font: inherit; font-size: 1.15rem; padding: 12px 0; outline: none; color: var(--rmr-ink); } @media (max-width: 1020px) { .rmr-nav, .rmr-hide-mobile { display: none; } .rmr-only-mobile { display: inline-flex; } .rmr-header__row { gap: 8px; --rmr-header-h: 64px; } .rmr-logo { margin-inline: auto; } .rmr-header__tools { margin-inline-start: 0; } .rmr-logo img { max-height: 38px; } } /* ---------- drawers ---------- */ .rmr-scrim { position: fixed; inset: 0; background: rgba(20, 22, 25, .45); z-index: 90; } .rmr-drawer { position: fixed; top: 0; bottom: 0; z-index: 100; width: min(420px, 92vw); background: var(--rmr-paper); display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0, 0, 0, .18); animation: rmrIn .22s ease-out; } .rmr-drawer--start { right: 0; } .rmr-drawer--end { left: 0; animation-name: rmrInEnd; } @keyframes rmrIn { from { transform: translateX(100%); } to { transform: none; } } @keyframes rmrInEnd { from { transform: translateX(-100%); } to { transform: none; } } .rmr-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--rmr-line); } .rmr-drawer__title { font-family: var(--rmr-display); font-size: 1.6rem; } .rmr-drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px 24px; } .rmr-mnav { border-bottom: 1px solid var(--rmr-line); } .rmr-mnav summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 1.15rem; font-weight: 500; cursor: pointer; } .rmr-mnav summary::-webkit-details-marker { display: none; } .rmr-mnav[open] summary .rmr-ico { transform: rotate(180deg); } .rmr-mnav a { display: block; padding: 9px 0; color: var(--rmr-steel); } .rmr-mnav .rmr-mnav__all { color: var(--rmr-ink); font-weight: 600; } .rmr-mnav a:last-child { margin-bottom: 14px; } .rmr-mlinks a { display: block; padding: 16px 0; border-bottom: 1px solid var(--rmr-line); font-size: 1.05rem; } .rmr-mphone { display: flex; gap: 10px; align-items: center; margin-top: 24px; font-weight: 600; } /* mini cart */ .rmr-minicart .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .rmr-minicart .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 4px 14px; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--rmr-line); font-size: 14.5px; } .rmr-minicart .woocommerce-mini-cart-item a:not(.remove) { display: contents; font-weight: 500; } .rmr-minicart .woocommerce-mini-cart-item img { grid-row: span 3; width: 76px; height: 76px; object-fit: cover; background: var(--rmr-wall); margin: 0 !important; float: none !important; } .rmr-minicart .woocommerce-mini-cart-item .remove { position: absolute; left: 0; top: 14px; width: 24px; height: 24px; line-height: 22px; text-align: center; border-radius: 50%; color: var(--rmr-mute) !important; font-size: 18px; } .rmr-minicart .woocommerce-mini-cart-item .remove:hover { background: var(--rmr-wall); color: var(--rmr-ink) !important; } .rmr-minicart .variation { margin: 0; font-size: 13px; color: var(--rmr-steel); display: grid; grid-template-columns: auto 1fr; gap: 0 6px; } .rmr-minicart .variation dt, .rmr-minicart .variation dd { margin: 0; float: none; } .rmr-minicart .variation dd p { margin: 0; } .rmr-minicart .quantity { color: var(--rmr-steel); font-size: 13.5px; } .rmr-minicart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 18px 0; font-size: 1.05rem; margin: 0; } .rmr-minicart .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; } .rmr-minicart .woocommerce-mini-cart__buttons .button { width: 100%; } .rmr-minicart .woocommerce-mini-cart__buttons .checkout { background: var(--rmr-brass) !important; } .rmr-minicart .woocommerce-mini-cart__empty-message { padding: 40px 0; text-align: center; color: var(--rmr-steel); } /* ---------- hero (home) ---------- */ .rmr-hero { background: var(--rmr-wall); overflow: hidden; } .rmr-hero__grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(32px, 5vw, 80px); min-height: min(78vh, 720px); padding-block: clamp(40px, 6vw, 72px); } .rmr-hero__lead { font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--rmr-steel); max-width: 48ch; margin-top: 22px; } .rmr-hero__facts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 8px; font-size: 15px; color: var(--rmr-steel); } .rmr-hero__facts li { display: flex; gap: 10px; align-items: center; } .rmr-hero__facts .rmr-ico { width: 18px; height: 18px; color: var(--rmr-brass); } .rmr-hero__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; } /* Gallery wall: pieces hung on the plaster, casting a standoff shadow */ .rmr-wall { position: relative; aspect-ratio: 1 / 0.92; } .rmr-wall__piece { position: absolute; display: block; background: #fff; box-shadow: var(--rmr-shadow-hang); transition: transform .35s ease, box-shadow .35s ease; } .rmr-wall__piece img { width: 100%; height: 100%; object-fit: cover; } .rmr-wall__piece:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(26, 29, 32, .05), 0 22px 30px -12px rgba(26, 29, 32, .32), 14px 32px 50px -20px rgba(26, 29, 32, .26); } .rmr-wall--3 .rmr-wall__piece--1 { top: 4%; right: 0; width: 56%; aspect-ratio: 1; } .rmr-wall--3 .rmr-wall__piece--2 { top: 0; left: 4%; width: 36%; aspect-ratio: 4 / 5; } .rmr-wall--3 .rmr-wall__piece--3 { bottom: 0; left: 12%; width: 40%; aspect-ratio: 1; } .rmr-wall--2 .rmr-wall__piece--1 { top: 0; right: 0; width: 58%; aspect-ratio: 1; } .rmr-wall--2 .rmr-wall__piece--2 { bottom: 0; left: 0; width: 46%; aspect-ratio: 1; } .rmr-wall--1 .rmr-wall__piece--1 { inset: 6% 10%; } @media (max-width: 900px) { .rmr-hero__grid { grid-template-columns: 1fr; min-height: 0; } .rmr-hero__media { order: -1; } .rmr-wall { aspect-ratio: 1 / .8; } } /* ---------- USP strip ---------- */ .rmr-usp { background: var(--rmr-paper); border-bottom: 1px solid var(--rmr-line); } .rmr-usp__row { display: grid; grid-template-columns: repeat(4, 1fr); } .rmr-usp__item { display: flex; gap: 14px; align-items: center; padding: 26px 20px; } .rmr-usp__item + .rmr-usp__item { border-inline-start: 1px solid var(--rmr-line); } .rmr-usp__item .rmr-ico { width: 30px; height: 30px; color: var(--rmr-brass); } .rmr-usp__item strong { display: block; font-weight: 600; font-size: 15px; } .rmr-usp__item span { display: block; color: var(--rmr-steel); font-size: 13.5px; } @media (max-width: 900px) { .rmr-usp__row { grid-template-columns: 1fr 1fr; } .rmr-usp__item { padding: 18px 8px; } .rmr-usp__item:nth-child(3) { border-inline-start: 0; } .rmr-usp__item:nth-child(n+3) { border-top: 1px solid var(--rmr-line); } } /* ---------- sections ---------- */ .rmr-section { padding-block: var(--rmr-sec); } .rmr-section--paper { background: var(--rmr-white); } .rmr-section--graphite { background: var(--rmr-graphite); color: #f1f2f2; } .rmr-section--graphite .rmr-lead { color: #aab1b7; } .rmr-section--graphite .rmr-card { color: #f1f2f2; } .rmr-section--graphite .rmr-card__media { background: #2d3237; } .rmr-section--graphite .rmr-card__price { color: #d8dcdf; } .rmr-head { margin-bottom: clamp(26px, 3.5vw, 44px); } .rmr-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .rmr-section .rmr-h2 + .rmr-cats { margin-top: 32px; } /* ---------- two worlds ---------- */ .rmr-worlds { padding-block: var(--rmr-sec) 0; } .rmr-worlds__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); } .rmr-world { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--rmr-graphite); color: #fff; } .rmr-world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .rmr-world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 20, 22, .78) 0%, rgba(18, 20, 22, .15) 55%, rgba(18, 20, 22, 0) 100%); } .rmr-world:hover img { transform: scale(1.03); } .rmr-world__text { position: absolute; z-index: 1; right: 0; left: 0; bottom: 0; padding: clamp(22px, 3vw, 40px); display: grid; gap: 6px; } .rmr-world__h { font-family: var(--rmr-display); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; } .rmr-world__p { color: #d5d9dc; max-width: 36ch; } .rmr-world__cta { margin-top: 10px; font-weight: 600; justify-self: start; border-bottom: 1px solid rgba(255, 255, 255, .7); padding-bottom: 2px; } @media (max-width: 760px) { .rmr-worlds__grid { grid-template-columns: 1fr; } .rmr-world { aspect-ratio: 16 / 11; } } /* ---------- category tiles ---------- */ .rmr-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .rmr-cats--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .rmr-cat { display: grid; gap: 4px; } .rmr-cat__img { display: block; aspect-ratio: 1; overflow: hidden; background: var(--rmr-wall); margin-bottom: 10px; } .rmr-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .rmr-cat:hover .rmr-cat__img img { transform: scale(1.04); } .rmr-cat__name { font-weight: 600; font-size: 15.5px; } .rmr-cat__count { color: var(--rmr-steel); font-size: 13.5px; } @media (max-width: 600px) { .rmr-cats { grid-template-columns: repeat(2, 1fr); } } /* ---------- product grid & card ---------- */ .rmr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3vw, 44px) clamp(12px, 1.8vw, 24px); } .rmr-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1020px) { .rmr-grid, .rmr-grid--4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .rmr-grid, .rmr-grid--4 { grid-template-columns: repeat(2, 1fr); } } .rmr-card { display: flex; flex-direction: column; min-width: 0; } .rmr-card.is-hidden { display: none; } .rmr-card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--rmr-wall); } .rmr-card__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .6s ease; } .rmr-card__img--alt { position: absolute; inset: 0; opacity: 0; } @media (hover: hover) { .rmr-card:hover .rmr-card__img--alt { opacity: 1; } .rmr-card:hover .rmr-card__img:only-of-type, .rmr-card:hover .rmr-card__media > .rmr-card__img:first-child:nth-last-child(1) { transform: scale(1.03); } } .rmr-badge { position: absolute; top: 12px; right: 12px; background: var(--rmr-brass); color: #fff; font-size: 12.5px; font-weight: 600; padding: 4px 10px; } .rmr-badge--muted { background: var(--rmr-steel); } .rmr-card__body { padding-top: 14px; display: grid; gap: 4px; } .rmr-card__title { font-family: var(--rmr-body); font-size: 15px; font-weight: 500; line-height: 1.45; } .rmr-card__title a:hover { color: var(--rmr-brass); } .rmr-card__price { font-size: 15px; color: var(--rmr-steel); } .rmr-card__price .rmr-price-amount, .rmr-card__price .amount { color: var(--rmr-ink); font-weight: 600; } .rmr-section--graphite .rmr-card__price .amount, .rmr-section--graphite .rmr-card__price .rmr-price-amount { color: #fff; } .rmr-card__price del { opacity: .6; font-weight: 400; } .rmr-card__price ins { text-decoration: none; } .rmr-price-from { font-size: .9em; } /* ---------- chips ---------- */ .rmr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .rmr-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rmr-line); background: #fff; color: var(--rmr-ink); font-size: 14.5px; font-weight: 500; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } .rmr-chip:hover { border-color: var(--rmr-ink); } .rmr-chip.is-active { background: var(--rmr-ink); border-color: var(--rmr-ink); color: #fff; } .rmr-chips--links { margin: 24px 0 0; } .rmr-more { display: flex; justify-content: center; margin-top: 44px; } /* ---------- custom band ---------- */ .rmr-custom { background: var(--rmr-wall); padding-block: var(--rmr-sec); } .rmr-custom__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .rmr-custom__grid:has(> :only-child) { grid-template-columns: 1fr; text-align: center; } .rmr-custom__grid:has(> :only-child) .rmr-lead { margin-inline: auto; } .rmr-custom__grid:has(> :only-child) .rmr-actions { justify-content: center; } .rmr-custom__media img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: var(--rmr-shadow-hang); } @media (max-width: 800px) { .rmr-custom__grid { grid-template-columns: 1fr; } } /* ---------- materials & swatches ---------- */ .rmr-materials { padding-block: var(--rmr-sec); background: var(--rmr-paper); } .rmr-materials__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); } .rmr-material h3 { font-family: var(--rmr-display); font-weight: 400; font-size: 1.7rem; margin: 18px 0 6px; } .rmr-material p { color: var(--rmr-steel); font-size: 15px; } @media (max-width: 900px) { .rmr-materials__row { grid-template-columns: 1fr 1fr; } } .rmr-swatch { aspect-ratio: 3 / 2; width: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .rmr-swatch--steel { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, rgba(0, 0, 0, .035) 1px 2px, transparent 2px 4px), linear-gradient(115deg, #a9b0b5 0%, #e8ebed 28%, #b7bec3 46%, #f5f6f7 62%, #9fa7ad 100%); } .rmr-swatch--brass { background: repeating-linear-gradient(90deg, rgba(255, 245, 210, .18) 0 1px, rgba(60, 40, 0, .05) 1px 2px, transparent 2px 4px), linear-gradient(115deg, #8a6a2c 0%, #d7b56e 30%, #a9843e 48%, #ecd08f 64%, #7f6026 100%); } .rmr-swatch--rust { background: radial-gradient(circle at 18% 30%, rgba(40, 18, 6, .45) 0 8%, transparent 20%), radial-gradient(circle at 70% 64%, rgba(196, 104, 48, .55) 0 10%, transparent 26%), radial-gradient(circle at 44% 82%, rgba(60, 26, 10, .4) 0 6%, transparent 18%), radial-gradient(circle at 86% 18%, rgba(170, 86, 38, .5) 0 7%, transparent 20%), linear-gradient(135deg, #6b3519 0%, #9a4f24 45%, #5a2c15 100%); } .rmr-swatch--powder { background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px) 0 0 / 5px 5px, linear-gradient(160deg, #2d3236 0%, #1c1f22 100%); } /* ---------- steps ---------- */ .rmr-steps { padding-block: var(--rmr-sec); background: var(--rmr-white); border-top: 1px solid var(--rmr-line); } .rmr-steps__list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); counter-reset: s; } .rmr-steps__list li { counter-increment: s; border-top: 1px solid var(--rmr-ink); padding-top: 22px; } .rmr-steps__list li::before { content: counter(s); display: block; font-family: var(--rmr-display); font-size: 3rem; line-height: 1; color: var(--rmr-brass); margin-bottom: 14px; } .rmr-steps__list h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; } .rmr-steps__list p { color: var(--rmr-steel); } @media (max-width: 800px) { .rmr-steps__list { grid-template-columns: 1fr; } } /* ---------- hanging options ---------- */ .rmr-hang { padding-block: var(--rmr-sec); background: var(--rmr-wall); } .rmr-hang__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); } .rmr-hang__item h3 { font-size: 1.1rem; font-weight: 600; margin: 22px 0 6px; } .rmr-hang__item p { color: var(--rmr-steel); } .rmr-hang__fig { position: relative; aspect-ratio: 16 / 10; background: #e2e5e4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); display: grid; place-items: center; } .rmr-hang__fig i { display: block; width: 46%; aspect-ratio: 1.6; background: var(--rmr-ink); position: relative; } .rmr-hang__fig--screw i { box-shadow: 0 2px 3px rgba(0, 0, 0, .25); } .rmr-hang__fig--screw i::before, .rmr-hang__fig--screw i::after { content: ""; position: absolute; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #c7cccf; } .rmr-hang__fig--screw i::before { right: 10px; } .rmr-hang__fig--screw i::after { left: 10px; } .rmr-hang__fig--offset i { transform: translate(-6px, -8px); box-shadow: 12px 16px 16px rgba(0, 0, 0, .22); } .rmr-hang__fig--tape i { box-shadow: 0 1px 1px rgba(0, 0, 0, .2); } .rmr-hang__fig--tape i::before { content: ""; position: absolute; inset: 30% 20%; border: 1px dashed rgba(255, 255, 255, .5); } @media (max-width: 800px) { .rmr-hang__row { grid-template-columns: 1fr; } } /* ---------- compare (furniture) ---------- */ .rmr-compare { padding-block: var(--rmr-sec); background: var(--rmr-wall); } .rmr-compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); } .rmr-compare__card { background: var(--rmr-paper); padding: clamp(20px, 3vw, 36px); } .rmr-compare__card .rmr-swatch { aspect-ratio: 5 / 2; } .rmr-compare__card h3 { font-family: var(--rmr-display); font-weight: 400; font-size: 1.9rem; margin: 22px 0 12px; } .rmr-compare__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rmr-compare__card li { display: flex; gap: 10px; align-items: flex-start; color: var(--rmr-steel); } .rmr-compare__card .rmr-ico { width: 18px; height: 18px; color: var(--rmr-brass); margin-top: 3px; } @media (max-width: 760px) { .rmr-compare__grid { grid-template-columns: 1fr; } } /* ---------- FAQ / accordions ---------- */ .rmr-faq { padding-block: var(--rmr-sec); background: var(--rmr-paper); } .rmr-faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: start; } @media (max-width: 860px) { .rmr-faq__grid { grid-template-columns: 1fr; } } .rmr-acc { border-bottom: 1px solid var(--rmr-line); } .rmr-acc:first-child { border-top: 1px solid var(--rmr-line); } .rmr-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 500; font-size: 1.05rem; } .rmr-acc summary::-webkit-details-marker { display: none; } .rmr-acc summary .rmr-ico { width: 20px; height: 20px; transition: transform .2s; color: var(--rmr-steel); } .rmr-acc[open] summary .rmr-ico { transform: rotate(180deg); } .rmr-acc__body { padding: 0 0 22px; color: var(--rmr-steel); } /* ---------- contact ---------- */ .rmr-contact { background: var(--rmr-graphite); color: #f1f2f2; padding-block: var(--rmr-sec); } .rmr-contact .rmr-lead { color: #aab1b7; } .rmr-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; } .rmr-contact__direct { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } @media (max-width: 860px) { .rmr-contact__grid { grid-template-columns: 1fr; } } .rmr-form { display: grid; gap: 14px; } .rmr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .rmr-form__row { grid-template-columns: 1fr; } } .rmr-field { display: grid; gap: 6px; font-size: 14px; color: #c9ced2; } .rmr-field em { font-style: normal; color: #8e969c; } .rmr-field input, .rmr-field textarea { width: 100%; font: inherit; font-size: 16px; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px; padding: 13px 14px; transition: border-color .15s; } .rmr-field input:focus, .rmr-field textarea:focus { border-color: var(--rmr-brass); outline: none; } .rmr-form__msg { padding: 12px 14px; background: rgba(164, 50, 42, .2); color: #ffd7d3; margin: 0; } .rmr-form__msg--ok { background: rgba(47, 122, 77, .25); color: #d6f5e1; } /* ---------- landing heroes ---------- */ .rmr-lhero { padding-block: clamp(36px, 5vw, 64px); } .rmr-lhero--light { background: var(--rmr-wall); } .rmr-lhero--dark { background: var(--rmr-graphite); color: #f2f3f3; } .rmr-lhero--dark .rmr-hero__lead { color: #b6bdc2; } .rmr-lhero--dark .rmr-crumbs, .rmr-lhero--dark .rmr-crumbs a { color: #9aa2a8; } .rmr-lhero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .rmr-lhero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; } .rmr-onwall img { box-shadow: var(--rmr-shadow-hang); aspect-ratio: 1; width: 78%; margin-inline: auto; } .rmr-lhero__note { margin-top: 22px; color: var(--rmr-steel); font-size: 14.5px; } .rmr-lhero__note .amount { color: var(--rmr-ink); font-weight: 600; } @media (max-width: 860px) { .rmr-lhero__grid { grid-template-columns: 1fr; } .rmr-lhero__media { order: -1; } .rmr-onwall img { width: 70%; } } /* ---------- breadcrumbs ---------- */ .rmr-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--rmr-steel); margin-bottom: 18px; } .rmr-crumbs a:hover { color: var(--rmr-ink); text-decoration: underline; } /* ---------- archive ---------- */ .rmr-archive-head { background: var(--rmr-wall); padding-block: clamp(32px, 4vw, 52px); } .rmr-archive-desc { color: var(--rmr-steel); max-width: 70ch; } .rmr-archive-desc p { margin: 0 0 .6em; } .rmr-archive { padding-top: clamp(28px, 3vw, 40px); } .rmr-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; } .rmr-toolbar__count { color: var(--rmr-steel); margin: 0; } .rmr-toolbar .woocommerce-ordering { margin: 0; float: none; } .rmr-toolbar select, body.rmr-on .rmr-root select { font: inherit; font-size: 15px; color: var(--rmr-ink); background-color: #fff; border: 1px solid var(--rmr-line); border-radius: 2px; min-height: 44px; padding: 0 14px 0 36px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1d20' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; background-size: 16px; } .rmr-pagination { margin-top: 56px; } .rmr-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; } .rmr-pagination a, .rmr-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--rmr-line); } .rmr-pagination .current { background: var(--rmr-ink); color: #fff; border-color: var(--rmr-ink); } .rmr-pagination a:hover { border-color: var(--rmr-ink); } .rmr-empty { text-align: center; padding: 60px 0; } .rmr-empty .rmr-actions { justify-content: center; } /* ---------- single product ---------- */ .rmr-product { padding-block: 24px clamp(48px, 6vw, 80px); background: var(--rmr-paper); } .rmr-crumbs--product { margin-bottom: 22px; } .rmr-pgrid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; } @media (max-width: 900px) { .rmr-pgrid { grid-template-columns: 1fr; } } .rmr-gallery { position: sticky; top: calc(var(--rmr-header-h) + 20px); display: grid; grid-template-columns: 84px 1fr; gap: 14px; } .rmr-gallery__main { grid-column: 2; grid-row: 1; margin: 0; } .rmr-gallery__stage { position: relative; background: var(--rmr-wall); aspect-ratio: 1; overflow: hidden; } .rmr-gallery__zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; } .rmr-gallery__img { width: 100% !important; height: 100% !important; object-fit: cover; } .rmr-gallery__zoomicon { position: absolute; bottom: 14px; left: 14px; width: 42px; height: 42px; display: grid; place-items: center; background: rgba(255, 255, 255, .9); border-radius: 50%; } .rmr-gallery__thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow-y: auto; scrollbar-width: none; } .rmr-gallery__thumb { padding: 0; border: 1px solid transparent; background: var(--rmr-wall); cursor: pointer; aspect-ratio: 1; flex: none; } .rmr-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .rmr-gallery__thumb.is-active { border-color: var(--rmr-ink); } .rmr-gallery:not(:has(.rmr-gallery__thumbs)) { grid-template-columns: 1fr; } .rmr-gallery:not(:has(.rmr-gallery__thumbs)) .rmr-gallery__main { grid-column: 1; } @media (max-width: 900px) { .rmr-gallery { position: static; grid-template-columns: 1fr; margin-inline: calc(var(--rmr-gut) * -1); } .rmr-gallery__main { grid-column: 1; } .rmr-gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; padding-inline: var(--rmr-gut); max-height: none; } .rmr-gallery__thumb { width: 68px; } } .rmr-ptitle { font-family: var(--rmr-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.08; text-wrap: balance; } .rmr-rating { display: inline-flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--rmr-steel); } .rmr-stars { --r: 5; width: 90px; height: 16px; background: linear-gradient(90deg, var(--rmr-line) calc(100% - var(--r) / 5 * 100%), var(--rmr-brass) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 16'%3E%3Cg%3E%3Cpath id='s' d='M8 1l2.1 4.4 4.8.7-3.5 3.4.8 4.8L8 12l-4.3 2.3.8-4.8L1 6.1l4.8-.7z'/%3E%3Cuse href='%23s' x='18'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='54'/%3E%3Cuse href='%23s' x='72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 16'%3E%3Cg%3E%3Cpath id='s' d='M8 1l2.1 4.4 4.8.7-3.5 3.4.8 4.8L8 12l-4.3 2.3.8-4.8L1 6.1l4.8-.7z'/%3E%3Cuse href='%23s' x='18'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='54'/%3E%3Cuse href='%23s' x='72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } .rmr-pprice { margin-top: 16px; font-size: 1.5rem; font-weight: 500; } .rmr-pprice .rmr-price-from { font-size: 1rem; color: var(--rmr-steel); font-weight: 400; } .rmr-pprice del { color: var(--rmr-mute); font-size: .8em; margin-inline-end: 8px; } .rmr-pprice ins { text-decoration: none; } .rmr-short { margin-top: 16px; color: var(--rmr-steel); font-size: 15.5px; max-width: 60ch; } .rmr-short p { margin: 0 0 .7em; } /* buy box */ .rmr-buy { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rmr-line); } .rmr-buy form.cart { margin: 0 !important; } .rmr-buy table.variations, .rmr-buy table.variations tbody, .rmr-buy table.variations tr, .rmr-buy table.variations th, .rmr-buy table.variations td { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; text-align: right; } .rmr-buy table.variations { margin-bottom: 8px; } .rmr-buy table.variations tr { margin-bottom: 20px; } .rmr-buy table.variations th.label, .rmr-buy table.variations td.label { margin-bottom: 10px; } .rmr-buy table.variations label { font-weight: 600; font-size: 15px; } .rmr-buy .rmr-chosen { font-weight: 400; color: var(--rmr-steel); margin-inline-start: 0; } .rmr-buy table.variations select { width: 100%; max-width: 100%; } .rmr-buy .reset_variations { display: inline-block; margin-top: 10px; font-size: 13.5px; color: var(--rmr-steel); text-decoration: underline; } .rmr-buy .rmr-select-hidden { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; } .rmr-opts { display: flex; flex-wrap: wrap; gap: 8px; } .rmr-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 16px; border: 1px solid var(--rmr-line); background: #fff; color: var(--rmr-ink); border-radius: 2px; font-size: 14.5px; font-weight: 500; cursor: pointer; text-align: right; line-height: 1.3; transition: border-color .15s, box-shadow .15s; } .rmr-opt:hover { border-color: var(--rmr-steel); } .rmr-opt[aria-pressed="true"] { border-color: var(--rmr-ink); box-shadow: inset 0 0 0 1px var(--rmr-ink); } .rmr-opt[disabled] { opacity: .38; cursor: not-allowed; text-decoration: line-through; } .rmr-opt__dot { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); background: #ccc; } .rmr-opt__dot--white { background: #f7f7f5; } .rmr-opt__dot--black { background: #1d2023; } .rmr-opt__dot--gold { background: linear-gradient(135deg, #b99650, #e4c98c 50%, #a8843f); } .rmr-opt__dot--silver { background: linear-gradient(135deg, #a9b0b5, #eef0f1 50%, #9aa2a8); } .rmr-opt__dot--brass { background: linear-gradient(135deg, #8a6a2c, #ecd08f 50%, #7f6026); } .rmr-opt__dot--rust { background: radial-gradient(circle at 30% 30%, #b8612c, #6b3519); } .rmr-opt__dot--custom { background: conic-gradient(#d94b3b, #e5b73b, #4bb36a, #3b8bd9, #9a4bd9, #d94b3b); } .rmr-buy .single_variation_wrap { margin-top: 6px; } .rmr-buy .woocommerce-variation-price { font-size: 1.35rem; font-weight: 600; margin: 4px 0 14px; } .rmr-buy .woocommerce-variation-price .price { color: var(--rmr-ink); } .rmr-buy .woocommerce-variation-availability { font-size: 14px; color: var(--rmr-ok); margin-bottom: 10px; } .rmr-buy .woocommerce-variation-add-to-cart, .rmr-buy form.cart:not(.variations_form) { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; } .rmr-buy .quantity { display: flex; align-items: stretch; border: 1px solid var(--rmr-line); background: #fff; margin: 0 !important; float: none !important; } .rmr-buy .quantity .qty { width: 54px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 16px; -moz-appearance: textfield; } .rmr-buy .quantity .qty::-webkit-outer-spin-button, .rmr-buy .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rmr-qbtn { width: 40px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--rmr-ink); } .rmr-qbtn:hover { background: var(--rmr-wall); } body.rmr-on .rmr-buy .single_add_to_cart_button { flex: 1; min-height: 56px; font-size: 1.05rem; float: none !important; } body.rmr-on .rmr-buy .single_add_to_cart_button.disabled, body.rmr-on .rmr-buy .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; } .rmr-buy .stock { font-size: 14px; } .rmr-buy .stock.out-of-stock { color: var(--rmr-err); } /* Product add-ons plugins compatibility */ .rmr-buy .wc-pao-addon, .rmr-buy .wapf-field-container, .rmr-buy .thwepo-extra-options, .rmr-buy .yith-wapo-block { margin-bottom: 16px; } .rmr-buy .wc-pao-addon-name, .rmr-buy .wapf-field-label label { font-weight: 600; font-size: 15px; } .rmr-buy input[type="text"], .rmr-buy input[type="number"]:not(.qty), .rmr-buy textarea { width: 100%; font: inherit; border: 1px solid var(--rmr-line); border-radius: 2px; padding: 11px 12px; background: #fff; } .rmr-assure { list-style: none; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rmr-line); display: grid; gap: 12px; } .rmr-assure li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; } .rmr-assure .rmr-ico { color: var(--rmr-brass); width: 22px; height: 22px; } .rmr-help { display: grid; gap: 10px; margin-top: 22px; } .rmr-help__item { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--rmr-wall); font-size: 14.5px; line-height: 1.45; transition: background-color .15s; } .rmr-help__item:hover { background: #e2e5e4; } .rmr-help__item strong { display: block; font-weight: 600; } .rmr-help__item .rmr-ico { width: 24px; height: 24px; } .rmr-accs { margin-top: 30px; } .rmr-prose { color: var(--rmr-steel); line-height: 1.75; } .rmr-prose img { margin: 1em 0; } .rmr-prose a { text-decoration: underline; } .rmr-video { position: relative; aspect-ratio: 16 / 9; margin-top: 12px; } .rmr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .rmr-acc__body table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; } .rmr-acc__body table.woocommerce-product-attributes th, .rmr-acc__body table.woocommerce-product-attributes td { text-align: right; padding: 8px 0; border-bottom: 1px solid var(--rmr-line); font-weight: 400; } .rmr-acc__body table.woocommerce-product-attributes th { color: var(--rmr-ink); width: 40%; } .rmr-acc__body table.woocommerce-product-attributes p { margin: 0; } /* reviews */ .rmr-reviews .commentlist { list-style: none; padding: 0; margin: 0; } .rmr-reviews .comment_container { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rmr-line); } .rmr-reviews .avatar { width: 40px; height: 40px; border-radius: 50%; } .rmr-reviews .star-rating { display: none; } .rmr-reviews input[type="text"], .rmr-reviews input[type="email"], .rmr-reviews textarea { width: 100%; border: 1px solid var(--rmr-line); padding: 10px; font: inherit; } /* sticky mobile ATC */ .rmr-sticky { position: fixed; right: 0; left: 0; bottom: 0; z-index: 40; display: flex; gap: 12px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 250, 249, .97); border-top: 1px solid var(--rmr-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(110%); transition: transform .25s ease; } .rmr-sticky.is-on { transform: none; } .rmr-sticky__info { flex: 1; min-width: 0; display: grid; } .rmr-sticky__title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rmr-sticky__price { font-weight: 600; font-size: 15px; } .rmr-sticky .rmr-btn { min-height: 48px; padding: 0 20px; } @media (min-width: 901px) { .rmr-sticky { display: none !important; } } /* ---------- lightbox & fab ---------- */ .rmr-lightbox { position: fixed; inset: 0; z-index: 200; display: none !important; background: rgba(245, 246, 246, .98); display: grid; place-items: center; padding: 20px; } .rmr-lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; } .rmr-lightbox__close { position: absolute; top: 16px; left: 16px; background: #fff; } .rmr-fab { position: fixed; bottom: 22px; left: 22px; z-index: 45; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); } .rmr-fab .rmr-ico { width: 30px; height: 30px; } body.rmr-view-single-product .rmr-fab { bottom: 86px; } @media (min-width: 901px) { body.rmr-view-single-product .rmr-fab { bottom: 22px; } } /* ---------- footer ---------- */ .rmr-footer { background: var(--rmr-ink); color: #c5cbcf; padding-top: clamp(52px, 7vw, 88px); font-size: 15px; } .rmr-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; } .rmr-footer__logo { font-family: var(--rmr-display); font-size: 2.3rem; color: #fff; line-height: 1; display: inline-block; margin-bottom: 14px; } .rmr-footer__brand p { max-width: 38ch; margin-bottom: 22px; } .rmr-footer__h { font-family: var(--rmr-body); font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 16px; } .rmr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .rmr-footer a:hover { color: #fff; } .rmr-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: #8f979d; } .rmr-footer__bottomrow { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-block: 20px; } .rmr-credit a { color: #d9bf87; font-weight: 500; } .rmr-credit a:hover { color: #fff; text-decoration: underline; } @media (max-width: 900px) { .rmr-footer__grid { grid-template-columns: 1fr 1fr; } .rmr-footer__brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .rmr-footer__grid { grid-template-columns: 1fr; } .rmr-footer__bottomrow { flex-direction: column; } } /* ---------- generic pages / Woo flow ---------- */ .rmr-page { padding-block: clamp(36px, 5vw, 64px) var(--rmr-sec); } .rmr-page__content.rmr-prose { max-width: 820px; } .rmr-page--wc .rmr-page__content { max-width: none; color: var(--rmr-ink); } .rmr-searchlist { padding: 0; list-style: none; display: grid; gap: 10px; } .rmr-searchlist a { text-decoration: underline; } body.rmr-on .rmr-root .woocommerce-message, body.rmr-on .rmr-root .woocommerce-info, body.rmr-on .rmr-root .woocommerce-error { list-style: none; margin: 0 0 24px; padding: 16px 18px; border: 0; border-inline-start: 3px solid var(--rmr-ok); background: #eef5f0; color: var(--rmr-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; } body.rmr-on .rmr-root .woocommerce-info { border-color: var(--rmr-steel); background: var(--rmr-wall); } body.rmr-on .rmr-root .woocommerce-error { border-color: var(--rmr-err); background: #f8ecea; display: block; } body.rmr-on .rmr-root .woocommerce-message::before, body.rmr-on .rmr-root .woocommerce-info::before, body.rmr-on .rmr-root .woocommerce-error::before { display: none; } body.rmr-on .rmr-root .woocommerce-message .button { min-height: 40px; padding: 0 18px; order: 2; } body.rmr-on .rmr-page--wc input.input-text, body.rmr-on .rmr-page--wc textarea, body.rmr-on .rmr-page--wc input[type="email"], body.rmr-on .rmr-page--wc input[type="tel"], body.rmr-on .rmr-page--wc input[type="text"], body.rmr-on .rmr-page--wc input[type="password"] { width: 100%; font: inherit; font-size: 16px; border: 1px solid var(--rmr-line); border-radius: 2px; padding: 12px 14px; background: #fff; color: var(--rmr-ink); } body.rmr-on .rmr-page--wc input:focus, body.rmr-on .rmr-page--wc textarea:focus { border-color: var(--rmr-ink); outline: none; } body.rmr-on .rmr-page--wc table.shop_table { width: 100%; border-collapse: collapse; border: 0; } body.rmr-on .rmr-page--wc table.shop_table th, body.rmr-on .rmr-page--wc table.shop_table td { padding: 14px 10px; border: 0; border-bottom: 1px solid var(--rmr-line); text-align: right; vertical-align: middle; background: none; } body.rmr-on .rmr-page--wc table.shop_table img { width: 72px; height: 72px; object-fit: cover; background: var(--rmr-wall); } body.rmr-on .rmr-page--wc .cart_totals h2, body.rmr-on .rmr-page--wc #order_review_heading, body.rmr-on .rmr-page--wc .woocommerce-billing-fields h3 { font-family: var(--rmr-display); font-weight: 400; font-size: 1.8rem; margin-bottom: 14px; } body.rmr-on .rmr-page--wc .cart-collaterals { margin-top: 40px; } body.rmr-on .rmr-page--wc .checkout-button, body.rmr-on .rmr-page--wc #place_order { width: 100%; min-height: 58px; font-size: 1.08rem; } body.rmr-on .rmr-page--wc #payment { background: var(--rmr-wall); border-radius: 0; padding: 6px; } body.rmr-on .rmr-page--wc .form-row { margin: 0 0 14px; } body.rmr-on .rmr-page--wc .form-row label { font-size: 14px; font-weight: 500; margin-bottom: 6px; display: block; } /* ---------- motion ---------- */ @media (prefers-reduced-motion: reduce) { .rmr-root *, .rmr-root *::before, .rmr-root *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto !important; } } html:has(body.rmr-on) { scroll-behavior: smooth; scroll-padding-top: 100px; } /* ---------- neutralise WooCommerce default single product layout ---------- */ body.rmr-on .rmr-product div.images.rmr-gallery, body.rmr-on .rmr-product div.summary.rmr-summary { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; } body.rmr-on .rmr-product .rmr-summary .rmr-ptitle { font-family: var(--rmr-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.08; margin: 0; padding: 0; clear: none; } body.rmr-on .rmr-product .rmr-pprice { color: var(--rmr-ink); } body.rmr-on .rmr-product div.images img { width: 100%; } body.rmr-on .rmr-product .rmr-gallery__thumb img { height: 100%; } body.rmr-on .rmr-product::before, body.rmr-on .rmr-product::after { display: none; } body.rmr-on .rmr-buy .quantity { flex: none !important; width: auto !important; } body.rmr-on .rmr-buy .single_add_to_cart_button { flex: 1 1 180px !important; width: auto !important; } @media (max-width: 600px) { .rmr-lhero .rmr-actions .rmr-btn, .rmr-hero .rmr-actions .rmr-btn { flex: 1 1 100%; } } /* ========================================================================== Hero slider (v1.1) ========================================================================== */ .rmr-slider { position: relative; background: var(--rmr-wall); overflow: hidden; } .rmr-slider__track { display: grid; } .rmr-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; } .rmr-slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .rmr-slide__grid { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(28px, 5vw, 80px); min-height: min(76vh, 680px); padding-block: clamp(40px, 5vw, 64px) clamp(84px, 8vw, 100px); } .rmr-slide__kicker { display: inline-block; font-size: 14px; font-weight: 500; color: var(--rmr-brass-dark); border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-bottom: 18px !important; } .rmr-slide__title { font-size: clamp(2.3rem, 4.6vw, 4rem); } .rmr-slide__price { margin-top: 18px !important; font-size: 1.25rem; } .rmr-slide__price .amount, .rmr-slide__price .rmr-price-amount { font-weight: 600; } .rmr-slide__price .rmr-price-from { color: var(--rmr-steel); font-size: 1rem; } .rmr-slide__media { display: block; position: relative; justify-self: center; width: min(100%, 560px); } .rmr-slide__media img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; box-shadow: var(--rmr-shadow-hang); transform: translateY(12px) scale(.985); transition: transform 1s cubic-bezier(.2, .7, .2, 1); } .rmr-slide.is-active .rmr-slide__media img { transform: none; } .rmr-slide.is-active .rmr-slide__text > * { animation: rmrRise .7s cubic-bezier(.2, .7, .2, 1) both; } .rmr-slide.is-active .rmr-slide__text > *:nth-child(2) { animation-delay: .06s; } .rmr-slide.is-active .rmr-slide__text > *:nth-child(3) { animation-delay: .12s; } .rmr-slide.is-active .rmr-slide__text > *:nth-child(n+4) { animation-delay: .18s; } @keyframes rmrRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rmr-slide--banner { position: relative; min-height: min(78vh, 700px); color: #fff; } .rmr-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rmr-slide--banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(18, 20, 22, .72) 0%, rgba(18, 20, 22, .35) 45%, rgba(18, 20, 22, 0) 75%); } .rmr-slide__bannertext { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: min(78vh, 700px); padding-block: 60px 100px; } .rmr-slide__bannertext > * { max-width: 560px; } .rmr-slide--banner .rmr-hero__lead { color: #e3e6e8; } .rmr-slider__nav { position: absolute; z-index: 3; right: 0; left: 0; bottom: clamp(22px, 3vw, 34px); display: flex; justify-content: space-between; align-items: center; pointer-events: none; } .rmr-slider__nav > * { pointer-events: auto; } .rmr-slider__dots { display: flex; gap: 6px; } .rmr-slider__dot { width: 44px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; align-items: center; } .rmr-slider__dot span { display: block; height: 2px; background: rgba(26, 29, 32, .22); position: relative; overflow: hidden; } .rmr-slider__dot span::after { content: ""; position: absolute; inset: 0; background: var(--rmr-ink); transform: scaleX(0); transform-origin: right; } .rmr-slider__dot.is-active span::after { transform: scaleX(1); transition: transform var(--rmr-slide-ms, 6500ms) linear; } .rmr-slider.is-paused .rmr-slider__dot.is-active span::after { transition: none; } .rmr-slider__arrows { display: flex; gap: 8px; } .rmr-slider__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(26, 29, 32, .2); background: rgba(255, 255, 255, .75); color: var(--rmr-ink); display: grid; place-items: center; cursor: pointer; } .rmr-slider__arrow:hover { background: #fff; border-color: var(--rmr-ink); } .rmr-slider__arrow .rmr-ico { width: 20px; height: 20px; transform: scaleX(-1); } .rmr-slider__arrow--next .rmr-ico { transform: none; } .rmr-slider__arrow[data-rmr-pause] .rmr-ico { transform: none; width: 16px; } .rmr-slider__arrow[aria-pressed="true"] { background: var(--rmr-ink); color: #fff; } .rmr-slider:has(.rmr-slide--banner.is-active) .rmr-slider__dot span { background: rgba(255, 255, 255, .35); } .rmr-slider:has(.rmr-slide--banner.is-active) .rmr-slider__dot span::after { background: #fff; } @media (max-width: 900px) { .rmr-slide__grid { grid-template-columns: 1fr; min-height: 0; padding-top: 20px; gap: 22px; } .rmr-slide__media { order: -1; width: min(82%, 420px); } .rmr-slide__text { text-align: center; } .rmr-slide__text .rmr-hero__lead { margin-inline: auto; } .rmr-slide__text .rmr-actions { justify-content: center; } .rmr-slider__nav { justify-content: center; } .rmr-slider__arrows { display: none; } .rmr-slide--banner, .rmr-slide__bannertext { min-height: 560px; } .rmr-slide--banner::after { background: linear-gradient(to top, rgba(18, 20, 22, .8), rgba(18, 20, 22, .1) 70%); } .rmr-slide__bannertext { justify-content: flex-end; } } /* category SEO text below the grid */ .rmr-seo { background: var(--rmr-paper); padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rmr-line); } .rmr-seo__text { max-width: 820px; } .rmr-seo__text h2, .rmr-seo__text h3 { font-family: var(--rmr-display); font-weight: 400; color: var(--rmr-ink); font-size: 1.6rem; margin: 1.2em 0 .4em; } .rmr-archive-desc { margin: 4px 0 0; } .rmr-prose ul, .rmr-prose ol { padding-inline-start: 1.2em; } @media (max-width: 700px) { .rmr-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--rmr-gut) * -1); padding-inline: var(--rmr-gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rmr-chips::-webkit-scrollbar { display: none; } .rmr-chip { flex: none; } } .rmr-lightbox.is-open { display: grid !important; } /* Leftovers of the old theme that lose their hiding styles once the theme CSS is removed */ body.rmr-on .pswp:not(.pswp--open), body.rmr-on #preloader, body.rmr-on .preloader, body.rmr-on .page-preloader, body.rmr-on .wd-preloader, body.rmr-on .loader-wrapper, body.rmr-on #loader-wrapper, body.rmr-on .ast-preloader, body.rmr-on .wd-close-side, body.rmr-on .close-side-widget, body.rmr-on .body-overlay, body.rmr-on .site-overlay, body.rmr-on .mobile-nav:not(.wd-opened), body.rmr-on .cart-widget-side:not(.wd-opened), body.rmr-on .woocommerce-product-gallery__trigger { display: none !important; } /* ========================================================================== v1.2 | Gallery-grade presentation ========================================================================== */ /* --- hardening against old site colors / fonts --- */ body.rmr-on .rmr-root .rmr-nav a, body.rmr-on .rmr-root .rmr-mega a, body.rmr-on .rmr-root .rmr-card__title a, body.rmr-on .rmr-root .rmr-cat, body.rmr-on .rmr-root .rmr-crumbs a, body.rmr-on .rmr-root .rmr-mnav a, body.rmr-on .rmr-root .rmr-mlinks a, body.rmr-on .rmr-root .rmr-tile { color: inherit; } body.rmr-on .rmr-root .rmr-link { color: var(--rmr-ink); } body.rmr-on .rmr-root .rmr-section--graphite .rmr-link, body.rmr-on .rmr-root .rmr-lhero--dark .rmr-link { color: #fff; } body.rmr-on .rmr-root .rmr-footer a { color: #c9ccd0; } body.rmr-on .rmr-root .rmr-footer a:hover { color: #fff; } body.rmr-on .rmr-root .rmr-footer .rmr-credit a { color: var(--rmr-brass-light); } body.rmr-on .rmr-root .rmr-h1, body.rmr-on .rmr-root .rmr-h2, body.rmr-on .rmr-root .rmr-ptitle, body.rmr-on .rmr-root .rmr-tile__name, body.rmr-on .rmr-root .rmr-footer__logo, body.rmr-on .rmr-root .rmr-material h3, body.rmr-on .rmr-root .rmr-compare__card h3 { font-family: var(--rmr-display); font-weight: 400; letter-spacing: -.005em; } body.rmr-on .rmr-root .rmr-section--graphite .rmr-h2, body.rmr-on .rmr-root .rmr-contact .rmr-h2, body.rmr-on .rmr-root .rmr-lhero--dark .rmr-h1 { color: #fff; } body.rmr-on .rmr-root .rmr-iconbtn, body.rmr-on .rmr-root .rmr-slider__dot, body.rmr-on .rmr-root .rmr-gallery__thumb, body.rmr-on .rmr-root .rmr-qbtn, body.rmr-on .rmr-root .rmr-swatchbtn, body.rmr-on .rmr-root .rmr-studio__design { box-shadow: none; text-transform: none; letter-spacing: 0; min-height: 0; } body.rmr-on .rmr-root .rmr-iconbtn { border: 0; background: transparent; color: var(--rmr-ink); padding: 0; width: 44px; height: 44px; border-radius: 50%; } body.rmr-on .rmr-root .rmr-iconbtn:hover { background: var(--rmr-wall); } body.rmr-on .rmr-root .rmr-slider__dot { border: 0; background: transparent; padding: 0; width: 44px; height: 28px; border-radius: 0; } body.rmr-on .rmr-root .rmr-slider__arrow { border: 1px solid rgba(23, 25, 28, .18); background: rgba(255, 255, 255, .7); color: var(--rmr-ink); border-radius: 50%; width: 46px; height: 46px; padding: 0; } body.rmr-on .rmr-root .rmr-form .rmr-btn--brass { background: var(--rmr-brass); color: #fff; border: 0; } body.rmr-on .rmr-root .rmr-form .rmr-btn--brass:hover { background: var(--rmr-brass-light); color: var(--rmr-ink); } /* --- plaster wall --- */ .rmr-plaster { background-color: var(--wall, #ebe7e0); background-image: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: auto, 220px 220px; transition: background-color .5s ease; } /* --- mounted sign image --- */ .rmr-mount { display: block; width: 100%; height: 100%; object-fit: contain; filter: url(#rmr-f-black); transition: transform .45s cubic-bezier(.2, .7, .2, 1); } .rmr-mount--white { filter: url(#rmr-f-white); } .rmr-mount--gold { filter: url(#rmr-f-gold); } .rmr-mount--silver { filter: url(#rmr-f-silver); } /* sign product cards */ .rmr-card--sign .rmr-card__media { background-color: var(--wall); } .rmr-card--sign .rmr-mount { padding: 13%; } @media (hover: hover) { .rmr-card--sign:hover .rmr-mount { transform: translateY(-5px) scale(1.02); } } .rmr-card__title { font-weight: 500; } .rmr-card__price { font-size: 14.5px; } /* --- hero slides --- */ .rmr-slider { background: var(--rmr-paper); } .rmr-slide__wall { position: relative; display: block; justify-self: stretch; aspect-ratio: 5 / 4; overflow: hidden; } .rmr-slide__wall .rmr-mount { position: absolute; inset: 11% 14% 13%; width: auto; height: auto; max-width: 72%; max-height: 76%; margin: auto; transform: translateY(14px); } .rmr-slide.is-active .rmr-slide__wall .rmr-mount { transform: none; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); } .rmr-slide__wall::after { content: ""; position: absolute; right: 0; left: 0; bottom: 0; height: 12%; background: linear-gradient(to top, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0)); } .rmr-slide--photo .rmr-slide__media { width: 100%; justify-self: stretch; } .rmr-slide--photo .rmr-slide__media img { aspect-ratio: 5 / 4; background: none; } .rmr-slide__kicker { color: var(--rmr-brass-dark); } .rmr-lhero__media.rmr-slide__wall { aspect-ratio: 1; } .rmr-lhero__photo { width: 100%; height: 100%; object-fit: cover; } /* --- category mosaic --- */ .rmr-mosaic-sec { background: var(--rmr-paper); } .rmr-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(210px, 21vw); gap: clamp(10px, 1.4vw, 18px); } .rmr-mosaic > :first-child { grid-column: span 2; grid-row: span 2; } .rmr-mosaic--4 > :first-child, .rmr-mosaic--6 > :first-child { grid-row: span 1; } .rmr-mosaic--3 { grid-template-columns: 1.4fr 1fr; } .rmr-mosaic--3 > :first-child { grid-column: span 1; } .rmr-mosaic--2 { grid-template-columns: 1fr 1fr; } .rmr-mosaic--2 > :first-child { grid-column: span 1; grid-row: span 1; } .rmr-tile { position: relative; display: block; overflow: hidden; color: var(--rmr-ink); max-height: 620px; } .rmr-tile__wall { position: absolute; inset: 0; background-color: var(--wall); } .rmr-tile__wall .rmr-mount { position: absolute; inset: 12% 18% 30%; width: auto; height: auto; max-width: 64%; max-height: 58%; margin: auto; } .rmr-mosaic > :first-child .rmr-tile__wall .rmr-mount { inset: 10% 20% 26%; max-height: 64%; } .rmr-tile__photo { width: 100%; height: 100%; object-fit: cover; } .rmr-tile:hover .rmr-mount { transform: translateY(-6px) scale(1.03); } .rmr-tile__text { position: absolute; right: 0; left: 64px; bottom: 0; padding: clamp(16px, 2vw, 26px); display: grid; gap: 2px; } .rmr-tile__name { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.1; } .rmr-mosaic > :first-child .rmr-tile__name { font-size: clamp(1.8rem, 3vw, 2.8rem); } .rmr-tile__meta { font-size: 13.5px; color: rgba(23, 25, 28, .66); } .rmr-tile__meta .amount { font-weight: 600; color: var(--rmr-ink); } .rmr-tile__go { position: absolute; left: clamp(14px, 2vw, 24px); bottom: clamp(16px, 2vw, 26px); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(23, 25, 28, .25); display: grid; place-items: center; transition: background-color .25s, color .25s, border-color .25s; } .rmr-tile__go .rmr-ico { width: 18px; height: 18px; } .rmr-tile:hover .rmr-tile__go { background: var(--rmr-ink); color: #fff; border-color: var(--rmr-ink); } .rmr-tile--dark { color: #f3f1ec; } .rmr-tile--dark .rmr-tile__meta, .rmr-tile--dark .rmr-tile__meta .amount { color: rgba(255, 255, 255, .78); } .rmr-tile--dark .rmr-tile__go { border-color: rgba(255, 255, 255, .35); } .rmr-tile--dark:hover .rmr-tile__go { background: #fff; color: var(--rmr-ink); } @media (max-width: 900px) { .rmr-mosaic, .rmr-mosaic--3 { grid-template-columns: 1fr 1fr; grid-auto-rows: 58vw; } .rmr-mosaic > :first-child { grid-column: span 2; grid-row: span 1; } .rmr-tile__text { left: 52px; } } /* --- custom band: gallery wall --- */ .rmr-custom { background: var(--rmr-paper); } .rmr-custom__points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; } .rmr-custom__points li { display: flex; gap: 10px; align-items: center; color: var(--rmr-steel); } .rmr-custom__points .rmr-ico { width: 20px; height: 20px; color: var(--rmr-brass); } .rmr-gallerywall { position: relative; aspect-ratio: 6 / 5; overflow: hidden; --wall: #d8d1c5; } .rmr-gallerywall__piece { position: absolute; display: block; } .rmr-gallerywall__piece .rmr-mount:hover { transform: translateY(-5px); } .rmr-gallerywall--3 .rmr-gallerywall__piece--1 { top: 6%; right: 6%; width: 52%; height: 52%; } .rmr-gallerywall--3 .rmr-gallerywall__piece--2 { top: 12%; left: 5%; width: 40%; height: 40%; } .rmr-gallerywall--3 .rmr-gallerywall__piece--3 { bottom: 4%; left: 26%; width: 44%; height: 42%; } .rmr-gallerywall--2 .rmr-gallerywall__piece--1 { top: 14%; right: 8%; width: 46%; height: 50%; } .rmr-gallerywall--2 .rmr-gallerywall__piece--2 { bottom: 14%; left: 10%; width: 38%; height: 42%; } .rmr-gallerywall__lamp { position: absolute; top: -30%; right: 20%; width: 60%; height: 70%; background: radial-gradient(closest-side, rgba(255, 244, 222, .55), rgba(255, 244, 222, 0)); pointer-events: none; } /* --- studio --- */ .rmr-studio { background: var(--rmr-graphite); color: #f1efea; padding-block: var(--rmr-sec); } .rmr-studio .rmr-lead { color: #aeb1b4; } .rmr-studio__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .rmr-studio__set { border: 0; padding: 0; margin: 28px 0 0; } .rmr-studio__set legend { font-size: 14px; font-weight: 600; margin-bottom: 12px; padding: 0; color: #fff; } .rmr-studio__set legend span { font-weight: 400; color: var(--rmr-brass-light); margin-inline-start: 6px; } .rmr-studio__designs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } body.rmr-on .rmr-root .rmr-studio__design { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; aspect-ratio: 1; border-radius: 0; } .rmr-studio__design > span { display: block; width: 100%; height: 100%; } .rmr-studio__design .rmr-mount { padding: 14%; } body.rmr-on .rmr-root .rmr-studio__design.is-active { border-color: var(--rmr-brass-light); outline: 1px solid var(--rmr-brass-light); } .rmr-studio__swatches { display: flex; flex-wrap: wrap; gap: 10px; } body.rmr-on .rmr-root .rmr-swatchbtn { width: 44px; height: 44px; padding: 3px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: transparent; cursor: pointer; } body.rmr-on .rmr-root .rmr-swatchbtn.is-active { border-color: var(--rmr-brass-light); box-shadow: 0 0 0 1px var(--rmr-brass-light); } .rmr-swatchbtn__chip { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); } .rmr-swatchbtn__chip--black { background: #1c1d1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } .rmr-swatchbtn__chip--white { background: #f4f3ef; } .rmr-swatchbtn__chip--gold { background: linear-gradient(135deg, #9b7a43, #e2c68e 50%, #a88649); } .rmr-swatchbtn__chip--silver { background: linear-gradient(135deg, #8f979c, #eef0f1 50%, #9aa2a8); } .rmr-studio__stage { display: grid; gap: 14px; } .rmr-studio__wall { position: relative; aspect-ratio: 5 / 4; overflow: hidden; } .rmr-studio__wall .rmr-mount { position: absolute; inset: 12% 18% 20%; width: auto; height: auto; max-width: 64%; max-height: 66%; margin: auto; } .rmr-studio__wall .rmr-mount.is-swap { opacity: 0; transform: translateY(8px); } .rmr-studio__wall .rmr-mount { transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); } .rmr-studio__light { position: absolute; top: -35%; right: 15%; width: 70%; height: 80%; background: radial-gradient(closest-side, rgba(255, 246, 228, .5), rgba(255, 246, 228, 0)); pointer-events: none; } .rmr-studio__floor { position: absolute; right: 0; left: 0; bottom: 0; height: 9%; background: linear-gradient(to bottom, #6f6254, #5b4f43); box-shadow: 0 -1px 0 rgba(0, 0, 0, .15), 0 -12px 24px rgba(0, 0, 0, .12); } .rmr-studio__caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .rmr-studio__caption strong { display: block; font-weight: 500; } .rmr-studio__caption span { color: var(--rmr-brass-light); font-size: 14.5px; } .rmr-studio .rmr-btn--ink { background: #fff; color: var(--rmr-ink); } .rmr-studio .rmr-btn--ink:hover { background: var(--rmr-brass-light); color: var(--rmr-ink); } @media (max-width: 900px) { .rmr-studio__grid { grid-template-columns: 1fr; } .rmr-studio__stage { order: -1; } .rmr-studio__designs { grid-template-columns: repeat(5, 1fr); } } /* --- product: wall preview --- */ .rmr-gallery .rmr-preview { grid-column: 2; grid-row: 2; } .rmr-gallery:not(:has(.rmr-gallery__thumbs)) .rmr-preview { grid-column: 1; } .rmr-preview { border: 1px solid var(--rmr-line); background: #fff; } .rmr-preview__wall { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .rmr-preview__wall .rmr-mount { position: absolute; inset: 12% 25%; width: auto; height: auto; max-width: 50%; max-height: 76%; margin: auto; } .rmr-preview__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; } .rmr-preview__label { font-size: 14px; font-weight: 600; } .rmr-preview__label em { font-style: normal; font-weight: 400; color: var(--rmr-brass-dark); margin-inline-start: 6px; } body.rmr-on .rmr-root .rmr-swatchbtn--sm { width: 30px; height: 30px; padding: 2px; border-color: var(--rmr-line); } body.rmr-on .rmr-root .rmr-swatchbtn--sm.is-active { border-color: var(--rmr-ink); box-shadow: 0 0 0 1px var(--rmr-ink); } @media (max-width: 900px) { .rmr-gallery .rmr-preview { grid-column: 1; grid-row: 3; margin-inline: var(--rmr-gut); } } /* --- furniture band, darker and warmer --- */ .rmr-section--graphite { background: #1b1d20; } .rmr-section--graphite .rmr-card__title { color: #f1efea; } .rmr-section--graphite .rmr-card__price, .rmr-section--graphite .rmr-card__price .amount, .rmr-section--graphite .rmr-card__price .rmr-price-amount { color: var(--rmr-brass-light); } .rmr-section--graphite .rmr-price-from { color: #9ea2a6; } .rmr-contact { background: #1b1d20; } .rmr-footer { background: #121416; } .rmr-footer__bottom { border-top-color: rgba(255, 255, 255, .08); } .rmr-world__wall { position: absolute; inset: 0; } .rmr-world__wall .rmr-mount { position: absolute; inset: 10% 26% 38%; width: auto; height: auto; max-width: 48%; max-height: 52%; margin: auto; } .rmr-world--signs::after { background: linear-gradient(to top, rgba(18, 20, 22, .72) 0%, rgba(18, 20, 22, .1) 42%, rgba(18, 20, 22, 0) 60%); } .rmr-mosaic > :not(:first-child) .rmr-tile__wall .rmr-mount { inset: 8% 22% 44%; max-height: 46%; max-width: 56%; } .rmr-slide__wall::before { content: ""; position: absolute; top: -40%; right: 10%; width: 80%; height: 90%; background: radial-gradient(closest-side, rgba(255, 246, 228, .55), rgba(255, 246, 228, 0)); pointer-events: none; } .rmr-slide__wall .rmr-mount { inset: 8% 12% 12%; max-width: 76%; max-height: 80%; } body.rmr-on .rmr-root .rmr-tile--dark { color: #f3f1ec; } @media (max-width: 900px) { .rmr-slide__wall { order: -1; aspect-ratio: 4 / 3; } } /* ========================================================================== v1.3 | Typography, stable buy box ========================================================================== */ body.rmr-on { font-size: 17px; line-height: 1.65; letter-spacing: .005em; font-feature-settings: "kern" 1; } body.rmr-on .rmr-root .rmr-h1, body.rmr-on .rmr-root .rmr-slide__title { font-family: var(--rmr-display); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; } body.rmr-on .rmr-root .rmr-h2 { font-family: var(--rmr-display); font-weight: 400; line-height: 1.15; letter-spacing: -.005em; } body.rmr-on .rmr-root .rmr-ptitle { font-family: var(--rmr-display); font-weight: 400; line-height: 1.15; } body.rmr-on .rmr-root .rmr-world__h, body.rmr-on .rmr-root .rmr-tile__name, body.rmr-on .rmr-root .rmr-drawer__title, body.rmr-on .rmr-root .rmr-logo__word, body.rmr-on .rmr-root .rmr-footer__logo, body.rmr-on .rmr-root .rmr-steps__list li::before { font-family: var(--rmr-display); font-weight: 400; } body.rmr-on .rmr-root .rmr-hero__lead, body.rmr-on .rmr-root .rmr-lead { font-weight: 400; font-size: 1.08rem; line-height: 1.7; } body.rmr-on .rmr-root .rmr-nav > ul > li > a { font-weight: 500; font-size: 16px; letter-spacing: .01em; } body.rmr-on .rmr-root .rmr-card__title { font-family: var(--rmr-body); font-size: 16px; font-weight: 500; line-height: 1.4; } body.rmr-on .rmr-root .rmr-card__price { font-size: 15px; } body.rmr-on .rmr-root .rmr-btn, body.rmr-on .rmr-root .button { font-family: var(--rmr-body); font-weight: 600; font-size: 16px; letter-spacing: .01em; } body.rmr-on .rmr-root .rmr-pprice { font-family: var(--rmr-body); font-weight: 600; font-size: 1.6rem; } body.rmr-on .rmr-root .rmr-slide__kicker, body.rmr-on .rmr-root .rmr-crumbs { font-size: 14px; letter-spacing: .01em; } body.rmr-on .rmr-root .rmr-acc summary { font-weight: 600; } body.rmr-on .rmr-root input, body.rmr-on .rmr-root select, body.rmr-on .rmr-root textarea { font-family: var(--rmr-body); } /* Buttons never jump when hovered, focused or pressed (old theme/builder effects) */ body.rmr-on .rmr-root button, body.rmr-on .rmr-root .rmr-btn, body.rmr-on .rmr-root .button, body.rmr-on .rmr-root .rmr-opt, body.rmr-on .rmr-root button:hover, body.rmr-on .rmr-root button:focus, body.rmr-on .rmr-root button:active, body.rmr-on .rmr-root .rmr-btn:hover, body.rmr-on .rmr-root .rmr-btn:focus, body.rmr-on .rmr-root .rmr-btn:active, body.rmr-on .rmr-root .button:hover, body.rmr-on .rmr-root .button:focus, body.rmr-on .rmr-root .button:active, body.rmr-on .rmr-root .rmr-opt:hover, body.rmr-on .rmr-root .rmr-opt:focus, body.rmr-on .rmr-root .rmr-opt:active { transform: none !important; top: auto !important; bottom: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; translate: none !important; } body.rmr-on .rmr-root .rmr-opt { margin: 0 !important; vertical-align: top; } /* Stable buy box: the variation price shows at the top, no sliding panel that pushes the button */ body.rmr-on .rmr-buy .single_variation_wrap .single_variation { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; } body.rmr-on .rmr-buy .woocommerce-variation-price, body.rmr-on .rmr-buy .woocommerce-variation-description:empty { display: none !important; } body.rmr-on .rmr-buy .woocommerce-variation-availability { margin: 0 0 10px; } body.rmr-on .rmr-buy .woocommerce-variation-availability:empty { display: none; } body.rmr-on .rmr-buy .reset_variations { visibility: visible !important; display: inline-block; min-height: 20px; } body.rmr-on .rmr-buy .reset_variations[style*="hidden"] { opacity: 0; pointer-events: none; } /* Category mosaic with 4 tiles: equal row */ .rmr-mosaic--4 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(260px, 24vw); } .rmr-mosaic--4 > :first-child { grid-column: span 1; grid-row: span 1; } .rmr-mosaic--4 > :first-child .rmr-tile__name { font-size: clamp(1.35rem, 2vw, 1.9rem); } .rmr-mosaic--4 > * .rmr-tile__wall .rmr-mount { inset: 8% 22% 44%; max-height: 46%; max-width: 56%; } @media (max-width: 900px) { .rmr-mosaic--4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 58vw; } } body.rmr-on .rmr-root .rmr-buy .wc-no-matching-variations { margin: 0 0 12px; padding: 10px 14px; font-size: 14px; border-inline-start-width: 2px; display: block; } /* ========================================================================== v1.4 | One typeface across the site (Assistant) + refined hover colors ========================================================================== */ body.rmr-on, body.rmr-on .rmr-root, body.rmr-on .rmr-root * { font-family: "Assistant", "Arial Hebrew", Arial, sans-serif; } body.rmr-on .rmr-root .rmr-h1, body.rmr-on .rmr-root .rmr-slide__title { font-weight: 300; letter-spacing: -.02em; line-height: 1.08; } body.rmr-on .rmr-root .rmr-h2, body.rmr-on .rmr-root .rmr-ptitle { font-weight: 300; letter-spacing: -.015em; line-height: 1.12; } body.rmr-on .rmr-root .rmr-world__h, body.rmr-on .rmr-root .rmr-tile__name, body.rmr-on .rmr-root .rmr-drawer__title, body.rmr-on .rmr-root .rmr-material h3, body.rmr-on .rmr-root .rmr-compare__card h3 { font-weight: 300; letter-spacing: -.015em; } body.rmr-on .rmr-root .rmr-logo__word, body.rmr-on .rmr-root .rmr-footer__logo { font-weight: 300; letter-spacing: -.01em; } body.rmr-on .rmr-root .rmr-steps__list li::before { font-weight: 200; } body.rmr-on .rmr-root .rmr-pprice { font-weight: 600; } body.rmr-on .rmr-root .rmr-btn, body.rmr-on .rmr-root .button { font-weight: 600; } /* Hover colors: no inherited theme colors, only ink, brass and white */ body.rmr-on .rmr-root a:hover { color: inherit; } body.rmr-on .rmr-root .rmr-world, body.rmr-on .rmr-root .rmr-world:hover, body.rmr-on .rmr-root .rmr-world:focus { color: #fff; } body.rmr-on .rmr-root .rmr-world:hover .rmr-world__h { color: #fff; } body.rmr-on .rmr-root .rmr-world:hover .rmr-world__cta { color: var(--rmr-brass-light); border-bottom-color: var(--rmr-brass-light); } body.rmr-on .rmr-root .rmr-world__cta { transition: color .2s, border-color .2s; } body.rmr-on .rmr-root .rmr-nav > ul > li > a:hover, body.rmr-on .rmr-root .rmr-mega__item:hover { color: var(--rmr-brass-dark); } body.rmr-on .rmr-root .rmr-mega__all:hover, body.rmr-on .rmr-root .rmr-link:hover, body.rmr-on .rmr-root .rmr-crumbs a:hover { color: var(--rmr-brass-dark); } body.rmr-on .rmr-root .rmr-card__title a:hover { color: var(--rmr-brass-dark); } body.rmr-on .rmr-root .rmr-section--graphite .rmr-card__title a:hover, body.rmr-on .rmr-root .rmr-section--graphite .rmr-link:hover { color: var(--rmr-brass-light); } body.rmr-on .rmr-root .rmr-footer a:hover { color: #fff; } body.rmr-on .rmr-root .rmr-footer .rmr-credit a:hover { color: #fff; } body.rmr-on .rmr-root .rmr-cat:hover .rmr-cat__name, body.rmr-on .rmr-root .rmr-mnav a:hover, body.rmr-on .rmr-root .rmr-mlinks a:hover { color: var(--rmr-brass-dark); } body.rmr-on .rmr-root .rmr-help__item:hover { color: var(--rmr-ink); } body.rmr-on .rmr-root .rmr-btn--ink:hover, body.rmr-on .rmr-root .button:hover { color: #fff; } body.rmr-on .rmr-root .rmr-btn--line:hover { color: #fff; } body.rmr-on .rmr-root .rmr-btn--light:hover, body.rmr-on .rmr-root .rmr-studio .rmr-btn--ink:hover { color: var(--rmr-ink); } body.rmr-on .rmr-root .rmr-btn--ghost-light:hover { color: #fff; } body.rmr-on .rmr-root .rmr-tile:hover { color: inherit; } body.rmr-on .rmr-root .rmr-tile--dark:hover { color: #f3f1ec; } /* ========================================================================== v1.4.1 | Footer colors locked (old site link styles use !important) ========================================================================== */ body.rmr-on .rmr-footer, body.rmr-on .rmr-footer p, body.rmr-on .rmr-footer span { color: #aeb2b6 !important; } body.rmr-on .rmr-footer a, body.rmr-on .rmr-footer a:visited { color: #d4d6d9 !important; text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; transition: color .2s ease; } body.rmr-on .rmr-footer a:hover, body.rmr-on .rmr-footer a:focus { color: var(--rmr-brass-light) !important; text-decoration: none !important; } body.rmr-on .rmr-footer .rmr-footer__logo, body.rmr-on .rmr-footer .rmr-footer__logo:visited { color: #fff !important; font-weight: 300 !important; font-size: 2.3rem; text-decoration: none !important; } body.rmr-on .rmr-footer .rmr-footer__h { color: #fff !important; font-family: "Assistant", Arial, sans-serif !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: .02em; } body.rmr-on .rmr-footer .rmr-footer__bottom, body.rmr-on .rmr-footer .rmr-footer__bottom span { color: #7d8287 !important; } body.rmr-on .rmr-footer .rmr-credit a, body.rmr-on .rmr-footer .rmr-credit a:visited { color: var(--rmr-brass-light) !important; font-weight: 500; } body.rmr-on .rmr-footer .rmr-credit a:hover { color: #fff !important; } body.rmr-on .rmr-footer .rmr-btn--ghost-light, body.rmr-on .rmr-footer .rmr-btn--ghost-light:visited { color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; } body.rmr-on .rmr-footer .rmr-btn--ghost-light:hover { border-color: var(--rmr-brass-light) !important; color: var(--rmr-brass-light) !important; } /* ========================================================================== v1.4.2 | Product gallery: thumbnails always visible, arrows, counter ========================================================================== */ body.rmr-on .rmr-product .rmr-gallery__thumbs { display: flex !important; visibility: visible !important; opacity: 1 !important; } body.rmr-on .rmr-product .rmr-gallery__thumb { display: block !important; width: 100%; height: auto; aspect-ratio: 1; padding: 0 !important; border: 1px solid transparent !important; background: var(--rmr-wall) !important; border-radius: 0 !important; overflow: hidden; opacity: .72; transition: opacity .2s, border-color .2s; } body.rmr-on .rmr-product .rmr-gallery__thumb:hover { opacity: 1; } body.rmr-on .rmr-product .rmr-gallery__thumb.is-active { opacity: 1; border-color: var(--rmr-ink) !important; } body.rmr-on .rmr-product .rmr-gallery__thumb img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 1 !important; visibility: visible !important; max-width: none !important; } .rmr-gallery__stage { position: relative; } body.rmr-on .rmr-root .rmr-gallery__nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px !important; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--rmr-ink); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); opacity: 0; transition: opacity .2s; } body.rmr-on .rmr-root .rmr-gallery__nav:hover { background: #fff; } .rmr-gallery__nav .rmr-ico { width: 20px; height: 20px; } .rmr-gallery__nav--prev { right: 14px; } .rmr-gallery__nav--prev .rmr-ico { transform: scaleX(-1); } .rmr-gallery__nav--next { left: 14px; } .rmr-gallery__stage:hover .rmr-gallery__nav, .rmr-gallery__nav:focus-visible { opacity: 1; } @media (hover: none) { body.rmr-on .rmr-root .rmr-gallery__nav { opacity: 1; } } .rmr-gallery__count { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(23, 25, 28, .72); color: #fff; font-size: 13px; padding: 3px 10px; border-radius: 999px; direction: ltr; } .rmr-gallery__zoomicon { z-index: 2; } @media (max-width: 900px) { body.rmr-on .rmr-product .rmr-gallery__thumbs { padding-top: 2px; padding-bottom: 4px; } body.rmr-on .rmr-product .rmr-gallery__thumb { width: 72px !important; flex: 0 0 72px; } } /* ========================================================================== v1.4.3 | Product buy box locked against old styles, footer logo ========================================================================== */ /* option buttons */ body.rmr-on .rmr-root .rmr-buy .rmr-opt, body.rmr-on .rmr-root .rmr-buy .rmr-opt:visited { background: #fff !important; color: var(--rmr-ink) !important; border: 1px solid var(--rmr-line) !important; border-radius: 2px !important; box-shadow: none !important; font-family: "Assistant", Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; padding: 8px 16px !important; min-height: 46px !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; width: auto !important; } body.rmr-on .rmr-root .rmr-buy .rmr-opt:hover { border-color: var(--rmr-steel) !important; color: var(--rmr-ink) !important; background: #fff !important; } body.rmr-on .rmr-root .rmr-buy .rmr-opt[aria-pressed="true"] { border-color: var(--rmr-ink) !important; box-shadow: inset 0 0 0 1px var(--rmr-ink) !important; background: #fff !important; color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-buy .rmr-opt[disabled] { opacity: .38 !important; } body.rmr-on .rmr-root .rmr-buy .rmr-opt span { color: inherit !important; } body.rmr-on .rmr-root .rmr-buy table.variations label, body.rmr-on .rmr-root .rmr-buy table.variations th { color: var(--rmr-ink) !important; font-family: "Assistant", Arial, sans-serif !important; } body.rmr-on .rmr-root .rmr-buy .reset_variations { color: var(--rmr-steel) !important; } /* add to cart row: quantity + button on one line */ body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart, body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 10px !important; } body.rmr-on .rmr-root .rmr-buy .quantity { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; height: 56px !important; align-items: stretch !important; border: 1px solid var(--rmr-line) !important; background: #fff !important; border-radius: 2px !important; margin: 0 !important; padding: 0 !important; order: 0; } body.rmr-on .rmr-root .rmr-buy .quantity .qty { width: 52px !important; height: 100% !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center !important; font-size: 16px !important; color: var(--rmr-ink) !important; padding: 0 !important; margin: 0 !important; -moz-appearance: textfield; } body.rmr-on .rmr-root .rmr-buy .rmr-qbtn { width: 42px !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--rmr-ink) !important; font-size: 20px !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } body.rmr-on .rmr-root .rmr-buy .rmr-qbtn:hover { background: var(--rmr-wall) !important; } body.rmr-on .rmr-root .rmr-buy .single_add_to_cart_button { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; order: 1; background: var(--rmr-ink) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; font-family: "Assistant", Arial, sans-serif !important; font-size: 17px !important; font-weight: 600 !important; } body.rmr-on .rmr-root .rmr-buy .single_add_to_cart_button:hover { background: var(--rmr-brass-dark) !important; color: #fff !important; } body.rmr-on .rmr-root .rmr-buy .single_add_to_cart_button.disabled, body.rmr-on .rmr-root .rmr-buy .single_add_to_cart_button:disabled { opacity: .5 !important; } body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button):not(input[type="hidden"]):not(.rmr-keep) { flex-basis: 100%; } /* links on the product page */ body.rmr-on .rmr-root .rmr-product a:not(.rmr-btn):not(.button), body.rmr-on .rmr-root .rmr-crumbs a { color: inherit !important; } body.rmr-on .rmr-root .rmr-product .rmr-help__item { color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-product .rmr-acc__body a { color: var(--rmr-brass-dark) !important; text-decoration: underline !important; } /* footer logo, shown in white on the dark footer */ .rmr-footer__logo { display: inline-block; } .rmr-footer__logoimg { display: block; max-height: 64px; width: auto; max-width: 220px; filter: grayscale(1) invert(1) contrast(1.6); mix-blend-mode: screen; } body.rmr-on .rmr-footer a { border: 0 !important; outline-offset: 4px; } body.rmr-on .rmr-footer .rmr-footer__logo { background: none !important; padding: 0 !important; } /* ========================================================================== v1.4.5 | Add to cart row rebuilt, options always visible ========================================================================== */ body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart, body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) { display: block !important; } body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart > :not(.rmr-atc-row):not(input[type="hidden"]), body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) > :not(.rmr-atc-row):not(input[type="hidden"]) { position: static !important; display: block; margin: 0 0 12px !important; font-size: 15px; color: var(--rmr-ink); } body.rmr-on .rmr-root .rmr-buy .rmr-atc-row { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 10px; margin: 6px 0 0 !important; } body.rmr-on .rmr-root .rmr-buy .rmr-atc-row .quantity { position: static !important; order: 0; } body.rmr-on .rmr-root .rmr-buy .rmr-atc-row .single_add_to_cart_button { position: static !important; order: 1; } /* not yet chosen: still reads as the main action */ body.rmr-on .rmr-root .rmr-buy .single_add_to_cart_button.disabled, body.rmr-on .rmr-root .rmr-buy .single_add_to_cart_button:disabled, body.rmr-on .rmr-root .rmr-buy .single_add_to_cart_button.wc-variation-selection-needed { opacity: 1 !important; background: var(--rmr-ink) !important; color: #fff !important; cursor: pointer; } /* our option buttons are never hidden by other plugins */ body.rmr-on .rmr-root .rmr-buy .rmr-opts { display: flex !important; flex-wrap: wrap; gap: 8px; visibility: visible !important; opacity: 1 !important; margin-bottom: 4px; } /* ========================================================================== v1.4.6 | Button colors locked in every state (old site uses !important) ========================================================================== */ body.rmr-on .rmr-root a.rmr-btn, body.rmr-on .rmr-root button.rmr-btn { text-decoration: none !important; border-radius: 2px !important; transition: background-color .2s, color .2s, border-color .2s !important; } body.rmr-on .rmr-root .rmr-btn--ink, body.rmr-on .rmr-root .rmr-btn--ink:visited { background: var(--rmr-ink) !important; color: #fff !important; border: 1px solid var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-btn--ink:hover, body.rmr-on .rmr-root .rmr-btn--ink:focus-visible { background: var(--rmr-brass-dark) !important; border-color: var(--rmr-brass-dark) !important; color: #fff !important; } body.rmr-on .rmr-root .rmr-btn--line, body.rmr-on .rmr-root .rmr-btn--line:visited { background: transparent !important; color: var(--rmr-ink) !important; border: 1px solid var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-btn--line:hover, body.rmr-on .rmr-root .rmr-btn--line:focus-visible { background: var(--rmr-ink) !important; color: #fff !important; border-color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-btn--brass, body.rmr-on .rmr-root .rmr-btn--brass:visited { background: var(--rmr-brass) !important; color: #fff !important; border: 1px solid var(--rmr-brass) !important; } body.rmr-on .rmr-root .rmr-btn--brass:hover, body.rmr-on .rmr-root .rmr-btn--brass:focus-visible { background: var(--rmr-brass-dark) !important; border-color: var(--rmr-brass-dark) !important; color: #fff !important; } body.rmr-on .rmr-root .rmr-btn--light, body.rmr-on .rmr-root .rmr-btn--light:visited { background: #fff !important; color: var(--rmr-ink) !important; border: 1px solid #fff !important; } body.rmr-on .rmr-root .rmr-btn--light:hover, body.rmr-on .rmr-root .rmr-btn--light:focus-visible { background: var(--rmr-brass-light) !important; border-color: var(--rmr-brass-light) !important; color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-btn--ghost-light, body.rmr-on .rmr-root .rmr-btn--ghost-light:visited { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .4) !important; } body.rmr-on .rmr-root .rmr-btn--ghost-light:hover, body.rmr-on .rmr-root .rmr-btn--ghost-light:focus-visible { border-color: var(--rmr-brass-light) !important; color: var(--rmr-brass-light) !important; background: transparent !important; } body.rmr-on .rmr-root .rmr-link, body.rmr-on .rmr-root .rmr-link:visited { color: var(--rmr-ink) !important; border-bottom: 1px solid currentColor !important; text-decoration: none !important; } body.rmr-on .rmr-root .rmr-link:hover { color: var(--rmr-brass-dark) !important; } body.rmr-on .rmr-root .rmr-section--graphite .rmr-link, body.rmr-on .rmr-root .rmr-section--graphite .rmr-link:visited { color: #fff !important; } body.rmr-on .rmr-root .rmr-section--graphite .rmr-link:hover { color: var(--rmr-brass-light) !important; } body.rmr-on .rmr-root .rmr-custom__points li { color: var(--rmr-steel) !important; } /* v1.4.7: plugin items mirrored by our buttons stay hidden, our buttons always shown */ body.rmr-on .rmr-root .rmr-buy table.variations td.value > .rmr-opts, body.rmr-on .rmr-root .rmr-buy table.variations td > .rmr-opts { display: flex !important; } /* ========================================================================== v1.4.8 | Swatch plugins are hidden only in rows where our buttons exist. If our buttons cannot be built, the plugin's own colors stay visible. ========================================================================== */ body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts td > :not(.rmr-opts):not(.reset_variations):not(select):not(.reset_variations_alert), body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts .variable-items-wrapper, body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts .woo-variation-items-wrapper, body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts .tawcvs-swatches, body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts .cfvsw-swatches-container, body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts .wd-swatches-product, body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts .th-var-swatches, body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts .woo-selected-variation-item-name, body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts .cfvsw-selected-label { display: none !important; } body.rmr-on .rmr-root .rmr-buy table.variations tr.rmr-has-opts td > select { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; } /* rows where the plugin keeps control: give its swatches room */ body.rmr-on .rmr-root .rmr-buy table.variations tr:not(.rmr-has-opts) td.value { display: block; } /* add to cart row: quantity + button on one line, anything else a plugin adds goes above */ body.rmr-on .rmr-root .rmr-buy .rmr-atc-row { flex-wrap: wrap !important; row-gap: 12px; } body.rmr-on .rmr-root .rmr-buy .rmr-atc-row > :not(.quantity):not(.single_add_to_cart_button):not(input[type="hidden"]) { order: -1 !important; flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; position: static !important; } body.rmr-on .rmr-root .rmr-buy .rmr-atc-row .quantity { flex: 0 0 auto !important; } body.rmr-on .rmr-root .rmr-buy .rmr-atc-row .single_add_to_cart_button { flex: 1 1 0 !important; min-width: 0 !important; } /* ========================================================================== v1.5 | Own variation buttons; WooCommerce table and swatch plugins hidden ========================================================================== */ body.rmr-on .rmr-root .rmr-buy--own table.variations { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; } body.rmr-on .rmr-root .rmr-buy--own .reset_variations { display: none !important; } .rmr-vopts { display: grid; gap: 20px; margin-bottom: 22px; } .rmr-vlabel { font-weight: 600; font-size: 15px; margin-bottom: 10px; color: var(--rmr-ink); } .rmr-vlabel .rmr-chosen { font-weight: 400; color: var(--rmr-steel); } body.rmr-on .rmr-root .rmr-vopts .rmr-opts { display: flex !important; flex-wrap: wrap; gap: 8px; } body.rmr-on .rmr-root .rmr-vopts .rmr-opt, body.rmr-on .rmr-root .rmr-vopts .rmr-opt:visited { display: inline-flex !important; align-items: center; gap: 8px; background: #fff !important; color: var(--rmr-ink) !important; border: 1px solid var(--rmr-line) !important; border-radius: 2px !important; box-shadow: none !important; padding: 8px 16px !important; min-height: 46px !important; font-family: "Assistant", Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.3 !important; cursor: pointer; transform: none !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; } body.rmr-on .rmr-root .rmr-vopts .rmr-opt:hover { border-color: var(--rmr-steel) !important; } body.rmr-on .rmr-root .rmr-vopts .rmr-opt[aria-pressed="true"] { border-color: var(--rmr-ink) !important; box-shadow: inset 0 0 0 1px var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-vopts .rmr-opt[disabled] { opacity: .38 !important; cursor: not-allowed; text-decoration: line-through; } body.rmr-on .rmr-root .rmr-vopts .rmr-opt span { color: inherit !important; } body.rmr-on .rmr-root .rmr-vreset { justify-self: start; background: none !important; border: 0 !important; padding: 0 !important; color: var(--rmr-steel) !important; text-decoration: underline !important; font-size: 14px !important; cursor: pointer; min-height: 0 !important; } /* Add to cart area without depending on JavaScript: quantity + button in one row, notes above */ body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart, body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 10px !important; } body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart > *, body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) > * { order: 0 !important; flex: 0 0 100% !important; width: 100% !important; float: none !important; position: static !important; margin: 0 !important; } body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart > .rmr-atc-row, body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) > .rmr-atc-row { order: 2 !important; } body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart > .quantity, body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) > .quantity { order: 2 !important; flex: 0 0 auto !important; width: auto !important; } body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart > .single_add_to_cart_button, body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) > .single_add_to_cart_button { order: 3 !important; flex: 1 1 0 !important; width: auto !important; } body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart > input[type="hidden"] { display: none !important; } /* ========================================================================== v1.6 | Cart drawer redesign + buy now ========================================================================== */ body.admin-bar .rmr-drawer { top: 32px; } @media (max-width: 782px) { body.admin-bar .rmr-drawer { top: 46px; } } .rmr-cartdrawer { width: min(440px, 94vw); background: var(--rmr-paper); } .rmr-cartdrawer .rmr-drawer__head { padding: 18px 22px; } body.rmr-on .rmr-root .rmr-cartdrawer .rmr-drawer__title { font-size: 1.5rem; font-weight: 300; display: flex; align-items: center; gap: 10px; } .rmr-cart-count--inline { position: static !important; display: inline-block; min-width: 24px; height: 24px; line-height: 24px; border-radius: 12px; font-size: 13px; } .rmr-cartdrawer .rmr-drawer__body { display: flex; flex-direction: column; padding: 0 22px; } .rmr-cartdrawer .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1; min-height: 100%; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart { flex: 1; margin: 0 !important; padding: 0 !important; list-style: none; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item { position: relative; display: grid !important; grid-template-columns: 84px 1fr; gap: 2px 16px; align-items: start; padding: 20px 0 20px 34px !important; margin: 0 !important; border-bottom: 1px solid var(--rmr-line); font-size: 14.5px; line-height: 1.45; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item > a:not(.remove) { display: contents !important; color: var(--rmr-ink) !important; font-weight: 600 !important; font-size: 15.5px; text-decoration: none !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item img { grid-column: 1; grid-row: 1 / span 4; width: 84px !important; height: 84px !important; object-fit: cover; background: var(--rmr-wall); border-radius: 0 !important; margin: 0 !important; float: none !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item dl.variation { grid-column: 2; display: grid !important; grid-template-columns: auto 1fr; gap: 2px 6px; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; font-size: 13.5px; color: var(--rmr-steel); } body.rmr-on .rmr-root .rmr-minicart dl.variation dt, body.rmr-on .rmr-root .rmr-minicart dl.variation dd { margin: 0 !important; padding: 0 !important; float: none !important; font-weight: 400 !important; color: var(--rmr-steel) !important; } body.rmr-on .rmr-root .rmr-minicart dl.variation dt { color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-minicart dl.variation dd p { margin: 0 !important; display: inline; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item .quantity { grid-column: 2; margin-top: 8px; font-size: 14px; color: var(--rmr-steel) !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item .quantity .amount { color: var(--rmr-ink); font-weight: 600; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item a.remove { position: absolute !important; left: 0; top: 20px; width: 26px !important; height: 26px !important; line-height: 24px !important; display: grid !important; place-items: center; border: 1px solid var(--rmr-line) !important; border-radius: 50% !important; color: var(--rmr-steel) !important; background: #fff !important; font-size: 17px !important; text-decoration: none !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item a.remove:hover { border-color: var(--rmr-ink) !important; color: var(--rmr-ink) !important; background: #fff !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__total { display: flex !important; justify-content: space-between; align-items: baseline; margin: 0 !important; padding: 20px 0 14px !important; border: 0 !important; border-top: 1px solid var(--rmr-line) !important; font-size: 16px; color: var(--rmr-ink); background: none !important; margin-top: auto !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__total strong { font-weight: 500; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__total .amount { font-size: 1.35rem; font-weight: 600; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__buttons { display: grid !important; grid-template-columns: 1fr; gap: 10px; margin: 0 0 18px !important; padding: 0 !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__buttons .button { width: 100% !important; margin: 0 !important; min-height: 54px !important; display: flex !important; align-items: center; justify-content: center; border-radius: 2px !important; font-size: 16px !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: none !important; background: transparent !important; color: var(--rmr-ink) !important; border: 1px solid var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__buttons .button:hover { background: var(--rmr-ink) !important; color: #fff !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__buttons .button.checkout { order: -1; background: var(--rmr-ink) !important; color: #fff !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--rmr-brass-dark) !important; border-color: var(--rmr-brass-dark) !important; } body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart__empty-message { margin: auto 0 !important; padding: 60px 0; text-align: center; color: var(--rmr-steel); } .rmr-cartdrawer__trust { display: flex; justify-content: center; gap: 22px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rmr-line); font-size: 13px; color: var(--rmr-steel); background: #fff; } .rmr-cartdrawer__trust span { display: inline-flex; align-items: center; gap: 6px; } .rmr-cartdrawer__trust .rmr-ico { width: 17px; height: 17px; color: var(--rmr-brass); } /* buy now */ body.rmr-on .rmr-root .rmr-buy .rmr-buynow { display: flex !important; width: 100% !important; flex: 0 0 100% !important; order: 4 !important; min-height: 56px !important; margin: 10px 0 0 !important; font-size: 17px !important; } body.rmr-on .rmr-root .rmr-buy .rmr-buynow[disabled] { opacity: .75 !important; cursor: wait; } /* notices on the product page, inside the layout */ .rmr-notices:empty { display: none; } .rmr-notices { padding-top: 16px; } body.rmr-on .rmr-root .rmr-notices .woocommerce-message, body.rmr-on .rmr-root .rmr-notices .woocommerce-error, body.rmr-on .rmr-root .rmr-notices .woocommerce-info { margin: 0 !important; } body.rmr-on .rmr-root .rmr-notices .woocommerce-message .button { background: var(--rmr-ink) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; } /* variation lines in the drawer: "label: value" per line */ body.rmr-on .rmr-root .rmr-minicart .woocommerce-mini-cart-item dl.variation { display: block !important; } body.rmr-on .rmr-root .rmr-minicart dl.variation dt { display: inline !important; } body.rmr-on .rmr-root .rmr-minicart dl.variation dd { display: inline !important; margin-inline-start: 4px !important; } body.rmr-on .rmr-root .rmr-minicart dl.variation dd::after { content: "\A"; white-space: pre; } body.rmr-on .rmr-root .rmr-cartdrawer .rmr-drawer__head .rmr-iconbtn:focus { outline: none; } /* empty notice boxes never render */ body.rmr-on .woocommerce-message:empty, body.rmr-on .woocommerce-notices-wrapper:empty { display: none !important; } /* ========================================================================== v1.7 | Own mini cart, uniform checkout colors, buy now overlay ========================================================================== */ .rmr-mc { display: flex; flex-direction: column; min-height: 100%; } .rmr-mc__list { list-style: none; margin: 0 !important; padding: 0 !important; flex: 1; } .rmr-mc__item { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 20px 0 20px 30px; border-bottom: 1px solid var(--rmr-line); } .rmr-mc__thumb { display: block; width: 88px; height: 88px; background: var(--rmr-wall); overflow: hidden; } body.rmr-on .rmr-root .rmr-mc__img { width: 88px !important; height: 88px !important; object-fit: cover; margin: 0 !important; border-radius: 0 !important; } .rmr-mc__info { min-width: 0; display: grid; gap: 6px; align-content: start; } body.rmr-on .rmr-root .rmr-mc__name, body.rmr-on .rmr-root .rmr-mc__name:visited { color: var(--rmr-ink) !important; font-weight: 600; font-size: 15.5px; line-height: 1.35; text-decoration: none !important; } body.rmr-on .rmr-root .rmr-mc__name:hover { color: var(--rmr-brass-dark) !important; } body.rmr-on .rmr-root .rmr-mc dl.variation { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 13.5px; line-height: 1.55; color: var(--rmr-steel); display: block !important; } body.rmr-on .rmr-root .rmr-mc dl.variation dt { display: inline !important; float: none !important; margin: 0 !important; font-weight: 500 !important; color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-mc dl.variation dd { display: inline !important; float: none !important; margin: 0 0 0 0 !important; margin-inline-start: 4px !important; padding: 0 !important; color: var(--rmr-steel) !important; } body.rmr-on .rmr-root .rmr-mc dl.variation dd::after { content: "\A"; white-space: pre; } body.rmr-on .rmr-root .rmr-mc dl.variation dd p { display: inline !important; margin: 0 !important; } .rmr-mc__line { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-size: 14px; color: var(--rmr-steel); } .rmr-mc__price, .rmr-mc__price .amount { color: var(--rmr-ink); font-weight: 600; } body.rmr-on .rmr-root .rmr-mc__remove, body.rmr-on .rmr-root .rmr-mc__remove:visited { position: absolute; left: 0; top: 20px; width: 28px; height: 28px; display: grid !important; place-items: center; border-radius: 50% !important; border: 1px solid var(--rmr-line) !important; background: #fff !important; color: var(--rmr-steel) !important; text-decoration: none !important; font-size: 0 !important; } .rmr-mc__remove .rmr-ico { width: 14px; height: 14px; } body.rmr-on .rmr-root .rmr-mc__remove:hover { border-color: var(--rmr-ink) !important; color: var(--rmr-ink) !important; } .rmr-mc__foot { position: sticky; bottom: 0; background: var(--rmr-paper); padding: 18px 0 20px; border-top: 1px solid var(--rmr-line); margin-top: auto; display: grid; gap: 10px; } .rmr-mc__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; color: var(--rmr-ink); } .rmr-mc__total strong, .rmr-mc__total .amount { font-size: 1.35rem; font-weight: 600; } .rmr-mc__note { margin: 0 !important; font-size: 13px; color: var(--rmr-steel); } body.rmr-on .rmr-root .rmr-mc__checkout, body.rmr-on .rmr-root .rmr-mc__cart { width: 100%; min-height: 54px !important; } .rmr-mc__empty { margin: auto 0; padding: 60px 0; text-align: center; display: grid; gap: 16px; justify-items: center; color: var(--rmr-steel); } .rmr-mc .blockUI.blockOverlay { background: rgba(247, 245, 241, .7) !important; } /* uniform colors on cart, checkout and account pages */ body.rmr-on .rmr-page--wc h1, body.rmr-on .rmr-page--wc h2, body.rmr-on .rmr-page--wc h3, body.rmr-on .rmr-page--wc h4 { color: var(--rmr-ink) !important; font-family: "Assistant", Arial, sans-serif !important; font-weight: 300 !important; letter-spacing: -.01em; } body.rmr-on .rmr-page--wc h3 { font-size: 1.7rem !important; margin: 0 0 18px !important; } body.rmr-on .rmr-page--wc a:not(.button):not(.rmr-btn) { color: var(--rmr-ink) !important; } body.rmr-on .rmr-page--wc a:not(.button):not(.rmr-btn):hover { color: var(--rmr-brass-dark) !important; } body.rmr-on .rmr-page--wc label, body.rmr-on .rmr-page--wc th, body.rmr-on .rmr-page--wc td, body.rmr-on .rmr-page--wc p, body.rmr-on .rmr-page--wc span:not(.amount) { color: inherit; } body.rmr-on .rmr-page--wc .required { color: var(--rmr-brass-dark) !important; } body.rmr-on .rmr-root input[type="radio"], body.rmr-on .rmr-root input[type="checkbox"] { accent-color: var(--rmr-ink); } /* any colored box a checkout plugin adds becomes a calm, on brand card */ body.rmr-on .rmr-page--wc .woocommerce-billing-fields > *:not(h3):not(.woocommerce-billing-fields__field-wrapper), body.rmr-on .rmr-page--wc .woocommerce-billing-fields__field-wrapper > div:not(.form-row), body.rmr-on .rmr-page--wc form.checkout > div:not(.col2-set):not(#order_review):not(.woocommerce-NoticeGroup):not([class*="col"]) { background: var(--rmr-wall) !important; color: var(--rmr-ink) !important; border: 1px solid var(--rmr-line) !important; border-radius: 2px !important; box-shadow: none !important; } body.rmr-on .rmr-page--wc .woocommerce-billing-fields > *:not(h3):not(.woocommerce-billing-fields__field-wrapper) *, body.rmr-on .rmr-page--wc .woocommerce-billing-fields__field-wrapper > div:not(.form-row) * { color: var(--rmr-ink) !important; } body.rmr-on .rmr-page--wc .form-row { background: transparent !important; } body.rmr-on .rmr-page--wc #order_review, body.rmr-on .rmr-page--wc .cart_totals { background: #fff; border: 1px solid var(--rmr-line); padding: clamp(16px, 2.4vw, 28px); } body.rmr-on .rmr-page--wc #payment, body.rmr-on .rmr-page--wc #payment .payment_box { background: var(--rmr-wall) !important; color: var(--rmr-ink) !important; border-radius: 0 !important; } body.rmr-on .rmr-page--wc #payment .payment_box::before { border-bottom-color: var(--rmr-wall) !important; } body.rmr-on .rmr-page--wc #place_order, body.rmr-on .rmr-page--wc .checkout-button, body.rmr-on .rmr-page--wc button.button, body.rmr-on .rmr-page--wc a.button, body.rmr-on .rmr-page--wc input.button { background: var(--rmr-ink) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; font-family: "Assistant", Arial, sans-serif !important; font-weight: 600 !important; box-shadow: none !important; } body.rmr-on .rmr-page--wc #place_order:hover, body.rmr-on .rmr-page--wc .checkout-button:hover, body.rmr-on .rmr-page--wc button.button:hover, body.rmr-on .rmr-page--wc a.button:hover { background: var(--rmr-brass-dark) !important; } body.rmr-on .rmr-page--wc .woocommerce-info, body.rmr-on .rmr-page--wc .woocommerce-message { background: var(--rmr-wall) !important; color: var(--rmr-ink) !important; border-color: var(--rmr-brass) !important; } body.rmr-on .rmr-page--wc .woocommerce-info a, body.rmr-on .rmr-page--wc .woocommerce-message a:not(.button) { color: var(--rmr-brass-dark) !important; text-decoration: underline !important; } body.rmr-on .rmr-page--wc select, body.rmr-on .rmr-page--wc .select2-container .select2-selection { border: 1px solid var(--rmr-line) !important; border-radius: 2px !important; min-height: 46px; } /* buy now overlay */ .rmr-going { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(247, 245, 241, .92); font-family: "Assistant", Arial, sans-serif; font-size: 18px; color: var(--rmr-ink); } .rmr-going__spin { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--rmr-line); border-top-color: var(--rmr-ink); animation: rmrSpin .8s linear infinite; } @keyframes rmrSpin { to { transform: rotate(360deg); } } /* header links locked (old sites force link colors with !important) */ body.rmr-on .rmr-root .rmr-header a, body.rmr-on .rmr-root .rmr-header a:visited, body.rmr-on .rmr-root .rmr-drawer a:not(.rmr-btn):not(.rmr-mc__remove) { color: var(--rmr-ink) !important; text-decoration: none !important; } body.rmr-on .rmr-root .rmr-header .rmr-nav > ul > li > a:hover, body.rmr-on .rmr-root .rmr-header .rmr-mega a:hover, body.rmr-on .rmr-root .rmr-drawer a:not(.rmr-btn):not(.rmr-mc__remove):hover { color: var(--rmr-brass-dark) !important; } body.rmr-on .rmr-root .rmr-announce, body.rmr-on .rmr-root .rmr-announce span { color: #e9ebec !important; } /* v1.7.1: checkout text readable even when a plugin forces white with an ID selector */ body.rmr-on #rmr-main .rmr-page--wc form.checkout label, body.rmr-on #rmr-main .rmr-page--wc form.checkout legend, body.rmr-on #rmr-main .rmr-page--wc form.checkout h3, body.rmr-on #rmr-main .rmr-page--wc form.checkout p:not(.woocommerce-info):not(.woocommerce-message), body.rmr-on #rmr-main .rmr-page--wc form.checkout strong, body.rmr-on #rmr-main .rmr-page--wc form.checkout span:not(.amount):not(.woocommerce-Price-currencySymbol):not(.select2-selection__arrow), body.rmr-on #rmr-main .rmr-page--wc form.checkout .form-row, body.rmr-on #rmr-main .rmr-page--wc form.checkout .optional { color: var(--rmr-ink) !important; } body.rmr-on #rmr-main .rmr-page--wc form.checkout .optional { color: var(--rmr-steel) !important; } body.rmr-on #rmr-main .rmr-page--wc form.checkout .button, body.rmr-on #rmr-main .rmr-page--wc form.checkout #place_order, body.rmr-on #rmr-main .rmr-page--wc form.checkout .button *, body.rmr-on #rmr-main .rmr-page--wc form.checkout #place_order * { color: #fff !important; } body.rmr-on #rmr-main .rmr-page--wc form.checkout input::placeholder, body.rmr-on #rmr-main .rmr-page--wc form.checkout textarea::placeholder { color: var(--rmr-mute) !important; opacity: 1; } /* v1.7.2: login/register panels the old theme prints after the footer stay hidden (the real login on the account page lives inside .rmr-root and is not affected) */ body.rmr-on > :not(.rmr-root):not(.elementor-popup-modal):not(#wpadminbar):not(script):not(style):has(.woocommerce-form-login, form.login, #loginform, .woocommerce-form-register, form.register), body.rmr-on > form.woocommerce-form-login, body.rmr-on > form.login, body.rmr-on > form.register, body.rmr-on > #loginform { display: none !important; } /* v1.8: privacy consent in the dark contact form + R.A.S accessibility button next to the WhatsApp button */ .rmr-contact .rac-consent { color: #c9ced2; } .rmr-contact .rac-consent a { color: #fff !important; } .rmr-fab { bottom: calc(22px + var(--rac-cc-h, 0px)); transition: bottom .25s ease; } /* v1.8.1: legal links in the footer bottom row; WhatsApp button above the accessibility button (both bottom left) */ .rmr-footer__bottomrow { align-items: center; } .rmr-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; } body.rmr-on .rmr-footer .rmr-legal a { color: #aeb2b6 !important; text-decoration: underline !important; text-underline-offset: 3px; } body.rmr-on .rmr-footer .rmr-legal a:hover { color: var(--rmr-brass-light) !important; } body:has(.rac-a11y--left) .rmr-fab { bottom: calc(22px + 56px + 14px + var(--rac-cc-h, 0px)); } body.rmr-view-single-product:has(.rac-a11y--left) .rmr-fab { bottom: calc(86px + 56px + 14px + var(--rac-cc-h, 0px)); } @media (min-width: 901px) { body.rmr-view-single-product:has(.rac-a11y--left) .rmr-fab { bottom: calc(22px + 56px + 14px + var(--rac-cc-h, 0px)); } } body:has(.rmr-fab) .rac-a11y--left .rac-a11y__btn { left: 22px; } /* ========================================================================== v1.9 | Contact redesign, WhatsApp buttons ========================================================================== */ .rmr-contact { background: #1b1d20; } .rmr-contact__grid { grid-template-columns: .95fr 1.05fr; align-items: start; } body.rmr-on .rmr-root .rmr-contact__title { color: #fff; } .rmr-contact--page { background: var(--rmr-paper); padding-top: 12px; } body.rmr-on .rmr-root .rmr-contact--page .rmr-contact__title { color: var(--rmr-ink); font-size: clamp(2.3rem, 4.4vw, 3.6rem); } .rmr-contact--page .rmr-lead { color: var(--rmr-steel); } .rmr-contact__ways { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; max-width: 460px; } body.rmr-on .rmr-root .rmr-way { display: grid !important; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px; background: rgba(255, 255, 255, .04); color: #fff !important; text-decoration: none !important; transition: border-color .2s, background-color .2s; } body.rmr-on .rmr-root .rmr-way:hover { border-color: var(--rmr-brass-light); background: rgba(255, 255, 255, .07); color: #fff !important; } .rmr-way__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--rmr-brass-light); } .rmr-way--wa .rmr-way__icon { background: #25d366; color: #fff; } .rmr-way__icon .rmr-ico { width: 22px; height: 22px; } .rmr-way__text { display: grid; line-height: 1.35; } .rmr-way__text strong { font-weight: 600; font-size: 16px; } .rmr-way__text span { color: #aeb2b6; font-size: 15px; text-align: right; } .rmr-way__go .rmr-ico { width: 18px; height: 18px; opacity: .6; } .rmr-contact__note { display: flex; align-items: center; gap: 8px; margin-top: 18px !important; color: #aeb2b6; font-size: 14.5px; } .rmr-contact__note .rmr-ico { width: 18px; height: 18px; color: var(--rmr-brass-light); } /* light variant (contact page) */ body.rmr-on .rmr-root .rmr-contact--page .rmr-way { border-color: var(--rmr-line); background: #fff; color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-contact--page .rmr-way:hover { border-color: var(--rmr-ink); color: var(--rmr-ink) !important; } .rmr-contact--page .rmr-way__icon { background: var(--rmr-wall); color: var(--rmr-brass-dark); } .rmr-contact--page .rmr-way--wa .rmr-way__icon { background: #25d366; color: #fff; } .rmr-contact--page .rmr-way__text span, .rmr-contact--page .rmr-contact__note { color: var(--rmr-steel); } /* form card */ .rmr-form--card { background: #fff; color: var(--rmr-ink); padding: clamp(22px, 3vw, 36px); border-radius: 6px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .55); display: grid; gap: 16px; } .rmr-contact--page .rmr-form--card { border: 1px solid var(--rmr-line); box-shadow: 0 20px 50px -34px rgba(0, 0, 0, .35); } .rmr-form__title { margin: 0 !important; font-size: 1.3rem; font-weight: 600; color: var(--rmr-ink); } .rmr-form--card .rmr-field { color: var(--rmr-ink); font-size: 14.5px; font-weight: 600; } .rmr-form--card .rmr-field em { color: var(--rmr-mute); font-weight: 400; } body.rmr-on .rmr-root .rmr-form--card .rmr-field input, body.rmr-on .rmr-root .rmr-form--card .rmr-field textarea { background: var(--rmr-paper) !important; color: var(--rmr-ink) !important; border: 1px solid var(--rmr-line) !important; border-radius: 4px !important; padding: 14px 14px !important; font-size: 16px !important; font-weight: 400; } body.rmr-on .rmr-root .rmr-form--card .rmr-field input:focus, body.rmr-on .rmr-root .rmr-form--card .rmr-field textarea:focus { border-color: var(--rmr-ink) !important; background: #fff !important; outline: none; box-shadow: 0 0 0 3px rgba(23, 25, 28, .08) !important; } .rmr-form--card .rmr-field input::placeholder, .rmr-form--card .rmr-field textarea::placeholder { color: #a3a6a9; } body.rmr-on .rmr-root .rmr-form--card .rac-consent, body.rmr-on .rmr-root .rmr-form--card .rac-consent span { color: var(--rmr-steel) !important; margin: 0 !important; } body.rmr-on .rmr-root .rmr-form--card .rac-consent a { color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-form--card .rac-consent abbr.required { color: #a4322a !important; } body.rmr-on .rmr-root .rmr-form--card .rmr-btn--brass { min-height: 56px; font-size: 17px !important; border-radius: 4px !important; } .rmr-form--card .rmr-form__msg { background: #f8ecea; color: #7a241d; border-radius: 4px; } .rmr-form--card .rmr-form__msg--ok { background: #eaf5ee; color: #1f5a37; } @media (max-width: 860px) { .rmr-contact__grid { grid-template-columns: 1fr; } .rmr-contact__ways { max-width: none; } } .rmr-contactpage { background: var(--rmr-paper); padding-top: clamp(24px, 3vw, 40px); } .rmr-contactpage + .rmr-usp { border-top: 1px solid var(--rmr-line); } /* WhatsApp on product cards */ body.rmr-on .rmr-root .rmr-card__wa { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; min-height: 40px; padding: 0 14px; border: 1px solid #25d366; border-radius: 4px; color: #128c4a !important; background: #fff; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: background-color .2s, color .2s; } body.rmr-on .rmr-root .rmr-card__wa:hover { background: #25d366; color: #fff !important; } .rmr-card__wa .rmr-ico { width: 18px; height: 18px; } .rmr-card__body { align-content: start; } .rmr-section--graphite .rmr-card__wa { background: transparent; } body.rmr-on .rmr-root .rmr-section--graphite .rmr-card__wa { color: #6ee7a0 !important; } body.rmr-on .rmr-root .rmr-section--graphite .rmr-card__wa:hover { color: #fff !important; } /* WhatsApp on the product page */ body.rmr-on .rmr-root .rmr-wa-btn { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 10px; background: #25d366; color: #fff !important; border-radius: 2px; font-size: 17px; font-weight: 600; text-decoration: none !important; transition: background-color .2s; } body.rmr-on .rmr-root .rmr-wa-btn:hover { background: #1ebe5b; color: #fff !important; } .rmr-wa-btn .rmr-ico { width: 22px; height: 22px; } /* floating WhatsApp: bottom right (accessibility button stays bottom left) */ body.rmr-on .rmr-fab, body:has(.rac-a11y--left) .rmr-fab { left: auto !important; right: 22px !important; bottom: calc(22px + var(--rac-cc-h, 0px)) !important; z-index: 99980; } body.rmr-view-single-product:has(.rmr-sticky.is-on) .rmr-fab { bottom: calc(86px + var(--rac-cc-h, 0px)) !important; } body:has(.rmr-fab) .rac-a11y--left .rac-a11y__btn { left: 22px; } body.rmr-on .rmr-fab:hover { transform: scale(1.06); } .rmr-fab { transition: transform .15s ease, bottom .25s ease; } body.rmr-on .rmr-root .rmr-buy form.cart > .rmr-buynow, body.rmr-on .rmr-root .rmr-buy form.cart:not(.variations_form) > .rmr-buynow, body.rmr-on .rmr-root .rmr-buy .woocommerce-variation-add-to-cart > .rmr-buynow { order: 5 !important; } /* v1.10: best sellers tabs, furniture chips, per category rows */ .rmr-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .rmr-tabs .rmr-chip { margin: 0; } .rmr-chips--dark .rmr-chip { background: transparent; border-color: rgba(255, 255, 255, .25); color: #f1efea; } body.rmr-on .rmr-root .rmr-chips--dark .rmr-chip { color: #f1efea !important; } body.rmr-on .rmr-root .rmr-chips--dark .rmr-chip:hover { border-color: var(--rmr-brass-light); color: var(--rmr-brass-light) !important; } .rmr-chips--dark { margin: -8px 0 30px; } .rmr-chip span { opacity: .6; margin-inline-start: 4px; font-size: .9em; } .rmr-catrow { padding-block: clamp(40px, 5vw, 64px); } .rmr-catrow .rmr-lead { margin-top: 4px; font-size: .95rem; } .rmr-more:empty { display: none; } @media (max-width: 700px) { .rmr-head--row:has(.rmr-tabs) { flex-direction: column; align-items: flex-start; } } body.rmr-on .rmr-root .rmr-card__title a { text-decoration: none !important; } body.rmr-on .rmr-root .rmr-chips--dark .rmr-chip { background: transparent !important; border: 1px solid rgba(255, 255, 255, .28) !important; text-decoration: none !important; } body.rmr-on .rmr-root .rmr-tabs .rmr-chip { text-decoration: none !important; } /* ========================================================================== v1.11 | Purchase first: card buy link, text on the sign, compact mobile hero ========================================================================== */ body.rmr-on .rmr-root .rmr-card__buy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; width: 100%; min-height: 42px; padding: 8px 14px; border: 1px solid var(--rmr-ink); border-radius: 2px; background: var(--rmr-ink); color: #fff !important; font-size: 14.5px; font-weight: 600; text-decoration: none !important; transition: background .15s ease, color .15s ease; } body.rmr-on .rmr-root .rmr-card__buy:hover { background: var(--rmr-brass); border-color: var(--rmr-brass); color: #fff !important; } .rmr-card__buy .rmr-ico { width: 14px; height: 14px; } body.rmr-on .rmr-root .rmr-section--graphite .rmr-card__buy { background: transparent; border-color: rgba(255, 255, 255, .5); } body.rmr-on .rmr-root .rmr-section--graphite .rmr-card__buy:hover { background: #fff; border-color: #fff; color: var(--rmr-ink) !important; } body.rmr-on .rmr-root .rmr-card__wa { margin-top: 8px; } /* Text on the sign */ body.rmr-on .rmr-root .rmr-buy .rmr-ptext { order: 0 !important; flex: 0 0 100% !important; width: 100% !important; margin: 0 0 4px !important; padding: 14px 16px; background: #fff; border: 1px solid var(--rmr-line, #e4e2dc); border-radius: 2px; } body.rmr-on .rmr-root .rmr-ptext__label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--rmr-ink); } body.rmr-on .rmr-root .rmr-ptext__req { color: var(--rmr-brass); } body.rmr-on .rmr-root .rmr-ptext__input { display: block; width: 100% !important; min-height: 50px; padding: 10px 14px; border: 1.5px solid #cfcac0 !important; border-radius: 2px !important; background: #fff !important; color: var(--rmr-ink) !important; font: inherit !important; font-size: 17px !important; box-shadow: none !important; } body.rmr-on .rmr-root .rmr-ptext__input:focus { outline: none; border-color: var(--rmr-ink) !important; box-shadow: 0 0 0 3px rgba(23, 25, 28, .08) !important; } body.rmr-on .rmr-root .rmr-ptext__hint { margin: 8px 0 0; font-size: 13px; color: var(--rmr-steel); } body.rmr-on .rmr-root .rmr-ptext.is-error { border-color: #c0392b; } body.rmr-on .rmr-root .rmr-ptext.is-error .rmr-ptext__input { border-color: #c0392b !important; } body.rmr-on .rmr-root .rmr-ptext__error { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #c0392b; } /* Landing hero on phones: the offer first, the picture small under it */ @media (max-width: 900px) { .rmr-lhero { padding-block: 22px 26px; } .rmr-lhero__grid { gap: 18px; } .rmr-lhero__media { order: 2; } .rmr-lhero__media.rmr-slide__wall, .rmr-lhero__media { aspect-ratio: 16 / 7; max-height: 190px; overflow: hidden; border-radius: 2px; } .rmr-lhero__media img, .rmr-lhero__photo { width: 100%; height: 100%; object-fit: cover; } .rmr-lhero .rmr-h1 { font-size: clamp(26px, 7.5vw, 34px); margin-bottom: 8px; } .rmr-lhero .rmr-hero__lead { font-size: 15.5px; margin-bottom: 14px; } .rmr-lhero__note { margin-top: 12px; } } /* v1.11.2 | remove from the checkout */ body.rmr-on .rmr-root .rmr-co-remove, body.rmr-on .woocommerce-checkout-review-order-table .rmr-co-remove { display: inline-block; margin-inline-start: 8px; font-size: 13px; color: #9a4b3a !important; text-decoration: underline !important; font-weight: 500; white-space: nowrap; } body.rmr-on .woocommerce-checkout-review-order-table .rmr-co-remove:hover { color: #c0392b !important; } /* v1.11.7: mosaic tiles on mobile, sign up top, text full width, arrow in the corner */ @media (max-width: 900px) { body.rmr-on .rmr-root .rmr-mosaic .rmr-tile__text { left: 0; padding: 10px 12px 12px; } body.rmr-on .rmr-root .rmr-mosaic .rmr-tile__name { font-size: 1.08rem; line-height: 1.15; } .rmr-mosaic .rmr-tile__meta { font-size: 12px; line-height: 1.35; } .rmr-mosaic .rmr-tile__go { top: 10px; bottom: auto; left: 10px; width: 32px; height: 32px; } .rmr-mosaic .rmr-tile__go .rmr-ico { width: 15px; height: 15px; } .rmr-mosaic > * .rmr-tile__wall .rmr-mount, .rmr-mosaic > :not(:first-child) .rmr-tile__wall .rmr-mount, .rmr-mosaic--4 > * .rmr-tile__wall .rmr-mount, .rmr-mosaic--4 > :first-child .rmr-tile__wall .rmr-mount { inset: 7% 20% 42%; max-height: 50%; max-width: 60%; } .rmr-mosaic:not(.rmr-mosaic--4) > :first-child .rmr-tile__wall .rmr-mount { inset: 8% 24% 36%; max-height: 56%; } } /* ========================================================================== v1.12.0 | Rabbis collection (דיוקנאות צדיקים), launch popup, richer product pages ========================================================================== */ :root { --rmr-night: #15171b; --rmr-night-2: #1d2025; --rmr-gold: #d9bc85; --rmr-gold-2: #b8955a; --rmr-serif: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif; } /* --- shared faith type and ornaments --- */ body.rmr-on .rmr-root .rmr-faith-h1, body.rmr-on .rmr-root .rmr-faith-h2, body.rmr-on .rmr-root .rmr-pop__h, body.rmr-on .rmr-root .rmr-rcard__name, body.rmr-on .rmr-root .rmr-rband__name, body.rmr-on .rmr-root .rmr-faith-quote blockquote p, body.rmr-on .rmr-root .rmr-faith-pillar h3, body.rmr-on .rmr-root .rmr-faith-steps h3 { font-family: var(--rmr-serif) !important; font-weight: 500; letter-spacing: 0; } .rmr-faith-h1 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); line-height: 1.12; font-weight: 500; text-wrap: balance; margin: 14px 0 18px !important; } .rmr-faith-h2 { font-size: clamp(1.85rem, 3vw, 2.6rem); line-height: 1.15; text-wrap: balance; } .rmr-faith-kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--rmr-gold); font-size: 13.5px; font-weight: 600; letter-spacing: .08em; } .rmr-faith-kicker i { display: block; width: 28px; height: 1px; background: currentColor; opacity: .7; } .rmr-faith-orn { position: relative; display: block; width: 132px; height: 12px; margin: 0 auto 18px; background: linear-gradient(to left, transparent, var(--rmr-gold-2) 30%, var(--rmr-gold-2) 42%, transparent 46%, transparent 54%, var(--rmr-gold-2) 58%, var(--rmr-gold-2) 70%, transparent) center / 100% 1px no-repeat; } .rmr-faith-orn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border: 1px solid var(--rmr-gold-2); transform: translate(-50%, -50%) rotate(45deg); } .rmr-faith-orn--light { --rmr-gold-2: var(--rmr-gold); } .rmr-faith-head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); } .rmr-faith-head .rmr-lead { margin-inline: auto; } .rmr-faith-price { margin-top: 18px !important; color: #c9c4b9; font-size: 15px; } .rmr-faith-price strong { color: #fff; font-size: 1.25rem; font-weight: 600; } .rmr-faith-price strong .amount { color: inherit; } .rmr-faith-price del { color: #8f8a80; margin-inline-start: 4px; } .rmr-faith-price span { margin-inline: 8px; opacity: .5; } /* new tag */ .rmr-newtag { display: inline-block; vertical-align: middle; margin-inline-start: 8px; padding: 3px 7px 2px; border-radius: 2px; background: var(--rmr-brass); color: #fff; font-family: var(--rmr-body); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; } body.rmr-on .rmr-root .rmr-tile__name .rmr-newtag { font-size: 12px; transform: translateY(-3px); } .rmr-chip .rmr-newtag { margin-inline-start: 6px; padding: 2px 6px; font-size: 10.5px; } /* --- hero --- */ .rmr-faith-hero { background: radial-gradient(70% 90% at 78% 12%, rgba(217, 188, 133, .16), rgba(217, 188, 133, 0) 62%), var(--rmr-night); color: #f3efe6; padding-block: clamp(36px, 5vw, 72px); } .rmr-faith-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; } body.rmr-on .rmr-root .rmr-faith-hero .rmr-faith-h1 { color: #fff !important; } .rmr-faith-lead { color: #c9c4b9; font-size: 1.12rem; line-height: 1.7; max-width: 52ch; } .rmr-faith-hero .rmr-crumbs, body.rmr-on .rmr-root .rmr-faith-hero .rmr-crumbs a { color: #8f949a; } .rmr-faith-hero .rmr-crumbs { margin-bottom: 22px; } .rmr-faith-hero .rmr-actions { margin-top: 26px; } .rmr-faith-wall { position: relative; aspect-ratio: 5 / 4; overflow: hidden; --wall: #d8d1c5; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); } .rmr-faith-wall__lamp { position: absolute; top: -34%; left: 18%; width: 64%; height: 76%; background: radial-gradient(closest-side, rgba(255, 240, 210, .6), rgba(255, 240, 210, 0)); pointer-events: none; z-index: 1; } .rmr-faith-wall__piece { position: absolute; display: block; z-index: 2; } .rmr-faith-wall__piece .rmr-mount { transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .rmr-faith-wall__piece:hover .rmr-mount { transform: translateY(-5px); } .rmr-faith-wall--3 .rmr-faith-wall__piece--1 { top: 9%; left: 33%; width: 34%; height: 64%; } .rmr-faith-wall--3 .rmr-faith-wall__piece--2 { top: 21%; right: 6%; width: 24%; height: 46%; } .rmr-faith-wall--3 .rmr-faith-wall__piece--3 { top: 21%; left: 6%; width: 24%; height: 46%; } .rmr-faith-wall--2 .rmr-faith-wall__piece--1 { top: 12%; right: 12%; width: 34%; height: 60%; } .rmr-faith-wall--2 .rmr-faith-wall__piece--2 { top: 18%; left: 12%; width: 30%; height: 52%; } .rmr-faith-wall--1 .rmr-faith-wall__piece--1 { top: 10%; left: 28%; width: 44%; height: 70%; } .rmr-faith-wall::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(to top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); } @media (max-width: 900px) { .rmr-faith-hero__grid { grid-template-columns: 1fr; } .rmr-faith-wall { order: -1; aspect-ratio: 4 / 3; } .rmr-faith-hero .rmr-actions .rmr-btn { flex: 1 1 100%; } } /* --- trust strip --- */ .rmr-faith-trust { background: var(--rmr-night-2); color: #e9e4d9; border-top: 1px solid rgba(217, 188, 133, .18); } .rmr-faith-trust__row { display: grid; grid-template-columns: repeat(4, 1fr); } .rmr-faith-trust__row > div { display: flex; align-items: center; gap: 12px; padding: 20px 18px; border-inline-start: 1px solid rgba(255, 255, 255, .07); } .rmr-faith-trust__row > div:first-child { border-inline-start: 0; } .rmr-faith-trust .rmr-ico { color: var(--rmr-gold); width: 26px; height: 26px; } .rmr-faith-trust span { display: grid; font-size: 13.5px; color: #a9a59c; line-height: 1.4; } .rmr-faith-trust strong { color: #fff; font-weight: 600; font-size: 15px; } @media (max-width: 900px) { .rmr-faith-trust__row { grid-template-columns: 1fr 1fr; } .rmr-faith-trust__row > div { padding: 14px 10px; border: 0; } } /* --- collection grid --- */ .rmr-faith-coll { background: var(--rmr-paper); } .rmr-rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); } .rmr-rcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rmr-line); transition: box-shadow .3s, transform .3s; } .rmr-rcard:hover { box-shadow: 0 22px 40px -26px rgba(23, 25, 28, .45); transform: translateY(-2px); } .rmr-rcard__media { position: relative; display: block; aspect-ratio: 4 / 5; --wall: #e4ded3; overflow: hidden; } .rmr-rcard__media .rmr-mount { position: absolute; inset: 9% 12% 11%; width: auto; height: auto; max-width: 76%; max-height: 80%; margin: auto; } .rmr-rcard:hover .rmr-mount { transform: translateY(-5px) scale(1.02); } .rmr-rcard__tag { position: absolute; top: 12px; right: 12px; background: var(--rmr-night); color: var(--rmr-gold); font-size: 12px; font-weight: 600; padding: 5px 9px; } .rmr-rcard__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 16px 18px; flex: 1; } .rmr-rcard__name { font-size: 1.32rem; line-height: 1.25; } body.rmr-on .rmr-root .rmr-rcard__name a { color: var(--rmr-ink) !important; } .rmr-rcard__sub { color: var(--rmr-steel); font-size: 14px; margin: 0 !important; } .rmr-rcard__price { margin: 8px 0 12px; font-size: 15.5px; } .rmr-rcard__price del { color: var(--rmr-mute); margin-inline-start: 6px; } .rmr-rcard__price ins { text-decoration: none; font-weight: 600; } .rmr-rcard__btn { margin-top: auto; width: 100%; min-height: 46px !important; } @media (max-width: 1000px) { .rmr-rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .rmr-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rmr-rcard__body { padding: 12px 10px 12px; } .rmr-rcard__name { font-size: 1.08rem; } .rmr-rcard__sub { font-size: 12.5px; } .rmr-rcard__btn { min-height: 42px !important; padding: 0 10px !important; } } /* --- quote band --- */ .rmr-faith-quote { background: radial-gradient(60% 100% at 50% 0%, rgba(217, 188, 133, .13), rgba(217, 188, 133, 0) 70%), var(--rmr-night); color: #e9e4d9; padding-block: clamp(56px, 8vw, 104px); text-align: center; } .rmr-faith-quote__inner { max-width: 820px; } .rmr-faith-quote blockquote { margin: 0 0 22px; padding: 0; border: 0; } body.rmr-on .rmr-root .rmr-faith-quote blockquote p { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.2; color: var(--rmr-gold) !important; margin: 0 0 12px; font-style: normal; } .rmr-faith-quote cite { font-style: normal; font-size: 13.5px; letter-spacing: .06em; color: #8f949a; } .rmr-faith-quote__text { font-size: 1.1rem; line-height: 1.8; color: #c9c4b9; max-width: 60ch; margin-inline: auto !important; } .rmr-faith-quote--slim { padding-block: clamp(44px, 6vw, 72px); } body.rmr-on .rmr-root .rmr-faith-quote--slim blockquote p { font-size: clamp(1.7rem, 3.2vw, 2.5rem); } /* --- pillars + occasions --- */ .rmr-faith-pillars { background: var(--rmr-white); } .rmr-faith-pillars__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 44px); } .rmr-faith-pillar { text-align: center; padding: 8px 6px; } .rmr-faith-pillar__n { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border: 1px solid var(--rmr-gold-2); border-radius: 50%; color: var(--rmr-brass-dark); font-family: var(--rmr-serif); font-size: 1.6rem; line-height: 1; } .rmr-faith-pillar h3 { font-size: 1.35rem; margin-bottom: 8px !important; } .rmr-faith-pillar p { color: var(--rmr-steel); max-width: 34ch; margin-inline: auto !important; } .rmr-faith-occ { margin-top: clamp(36px, 5vw, 60px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--rmr-line); text-align: center; } .rmr-faith-occ__h { font-family: var(--rmr-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 16px !important; } .rmr-faith-occ ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .rmr-faith-occ li { border: 1px solid #d9c9a6; background: #fbf8f2; color: var(--rmr-ink); padding: 9px 16px; font-size: 14.5px; } @media (max-width: 800px) { .rmr-faith-pillars__row { grid-template-columns: 1fr; gap: 28px; } } /* --- craft steps --- */ .rmr-faith-craft { background: var(--rmr-night-2); color: #e9e4d9; padding-block: var(--rmr-sec); } body.rmr-on .rmr-root .rmr-faith-craft .rmr-faith-h2 { color: #fff !important; } .rmr-faith-craft .rmr-lead { color: #a9a59c; } .rmr-faith-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.6vw, 36px); counter-reset: fs; } .rmr-faith-steps li { counter-increment: fs; border-top: 1px solid rgba(217, 188, 133, .45); padding-top: 22px; } .rmr-faith-steps li::before { content: counter(fs); display: block; font-family: var(--rmr-serif); font-size: 2.6rem; line-height: 1; color: var(--rmr-gold); margin-bottom: 14px; } body.rmr-on .rmr-root .rmr-faith-steps h3 { font-size: 1.25rem; color: #fff !important; margin-bottom: 6px !important; } .rmr-faith-steps p { color: #a9a59c; } @media (max-width: 900px) { .rmr-faith-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .rmr-faith-steps { grid-template-columns: 1fr; } } /* --- where to hang --- */ .rmr-faith-hangs { background: var(--rmr-wall); } .rmr-faith-hangs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; } .rmr-faith-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rmr-faith-places li { display: flex; align-items: center; gap: 12px; background: #fff; padding: 15px 18px; font-size: 1.02rem; border: 1px solid var(--rmr-line); } .rmr-faith-places .rmr-ico { color: var(--rmr-brass); width: 20px; height: 20px; } @media (max-width: 800px) { .rmr-faith-hangs__grid { grid-template-columns: 1fr; } } /* --- custom CTA --- */ .rmr-faith-cta { background: var(--rmr-night); color: #e9e4d9; padding-block: clamp(44px, 6vw, 76px); border-top: 1px solid rgba(217, 188, 133, .22); } .rmr-faith-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } body.rmr-on .rmr-root .rmr-faith-cta .rmr-faith-h2 { color: #fff !important; margin-bottom: 8px !important; } .rmr-faith-cta p { color: #a9a59c; max-width: 58ch; } @media (max-width: 700px) { .rmr-faith-cta .rmr-actions .rmr-btn { flex: 1 1 100%; } } /* --- launch band (home, signs page) --- */ .rmr-rband { background: radial-gradient(60% 120% at 85% 0%, rgba(217, 188, 133, .14), rgba(217, 188, 133, 0) 65%), var(--rmr-night); color: #e9e4d9; padding-block: clamp(48px, 7vw, 92px); } .rmr-rband__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(26px, 4vw, 64px); align-items: center; } body.rmr-on .rmr-root .rmr-rband .rmr-faith-h2 { color: #fff !important; margin: 14px 0 12px !important; } .rmr-rband__text p { color: #c9c4b9; } .rmr-rband__text .rmr-btn { margin-top: 22px; } .rmr-rband__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .rmr-rband__item { display: block; } .rmr-rband__wall { position: relative; display: block; aspect-ratio: 4 / 5; --wall: #e4ded3; overflow: hidden; } .rmr-rband__wall .rmr-mount { position: absolute; inset: 10% 12% 12%; width: auto; height: auto; max-width: 76%; max-height: 78%; margin: auto; } .rmr-rband__item:hover .rmr-mount { transform: translateY(-5px); } body.rmr-on .rmr-root .rmr-rband__name { display: block; margin-top: 10px; text-align: center; color: #f3efe6 !important; font-size: 1.06rem; line-height: 1.3; } @media (max-width: 900px) { .rmr-rband__grid { grid-template-columns: 1fr; } .rmr-rband__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(var(--rmr-gut) * -1); padding-inline: var(--rmr-gut); scrollbar-width: none; } .rmr-rband__list::-webkit-scrollbar { display: none; } .rmr-rband__item { flex: 0 0 42%; scroll-snap-align: start; } .rmr-rband__text .rmr-btn { width: 100%; } } /* --- launch popup --- */ .rmr-pop { position: fixed; inset: 0; z-index: 100050; display: grid; place-items: center; padding: 16px; } /* 1.12.3: while hidden or closing, the popup must never catch clicks (it was blocking the whole page). */ .rmr-pop[hidden], body .rmr-pop[hidden] { display: none !important; pointer-events: none !important; } .rmr-pop:not(.is-open) { pointer-events: none; } .rmr-pop__scrim { position: absolute; inset: 0; background: rgba(10, 11, 13, .62); opacity: 0; transition: opacity .3s; } .rmr-pop__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); width: min(880px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--rmr-night); color: #e9e4d9; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .35s, transform .45s cubic-bezier(.2, .7, .2, 1); } .rmr-pop.is-open .rmr-pop__scrim { opacity: 1; } .rmr-pop.is-open .rmr-pop__box { opacity: 1; transform: none; } body.rmr-on .rmr-root .rmr-pop__x { position: absolute; top: 10px; left: 10px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(21, 23, 27, .55); color: #fff; cursor: pointer; padding: 0; } .rmr-pop__x:hover { background: rgba(21, 23, 27, .85); } .rmr-pop__x .rmr-ico { width: 20px; height: 20px; } .rmr-pop__media { position: relative; min-height: 360px; --wall: #d8d1c5; overflow: hidden; } .rmr-pop__glow { position: absolute; top: -30%; left: 14%; width: 72%; height: 70%; background: radial-gradient(closest-side, rgba(255, 240, 210, .6), rgba(255, 240, 210, 0)); z-index: 1; } .rmr-pop__piece { position: absolute; display: block; z-index: 2; } .rmr-pop__piece--1 { top: 14%; left: 30%; width: 40%; height: 62%; } .rmr-pop__piece--2 { top: 26%; right: 4%; width: 26%; height: 42%; } .rmr-pop__piece--3 { top: 26%; left: 4%; width: 26%; height: 42%; } .rmr-pop__text { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; } body.rmr-on .rmr-root .rmr-pop__h { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.18; color: #fff !important; margin: 14px 0 12px !important; } .rmr-pop__p { color: #c9c4b9; font-size: 1.02rem; line-height: 1.7; } .rmr-pop__price { margin: 6px 0 0 !important; color: #c9c4b9; } .rmr-pop__price strong { color: #fff; font-size: 1.35rem; font-weight: 600; margin-inline: 4px; } .rmr-pop__price del { color: #8f8a80; } .rmr-pop__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; } body.rmr-on .rmr-root .rmr-pop__later { border: 0; background: none; padding: 6px 2px; color: #a9a59c; font-size: 14.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 0; box-shadow: none; } .rmr-pop__later:hover { color: #fff; } body.rmr-pop-lock { overflow: hidden; } @media (max-width: 700px) { .rmr-pop { place-items: end center; padding: 0; } .rmr-pop__box { grid-template-columns: 1fr; max-height: 92vh; transform: translateY(40px); } .rmr-pop__media { min-height: 0; height: 200px; } .rmr-pop__piece--1 { top: 10%; height: 78%; left: 34%; width: 32%; } .rmr-pop__piece--2, .rmr-pop__piece--3 { top: 22%; height: 58%; width: 24%; } .rmr-pop__piece--2 { right: 6%; } .rmr-pop__piece--3 { left: 6%; } .rmr-pop__text { padding: 22px 20px 26px; } .rmr-pop__actions .rmr-btn { flex: 1 1 100%; } .rmr-pop__actions { gap: 8px; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .rmr-pop__box, .rmr-pop__scrim { transition: none; } } /* --- product page: richer summary --- */ .rmr-pkicker { margin: 0 0 10px !important; font-size: 13.5px; font-weight: 600; letter-spacing: .03em; color: var(--rmr-steel); } body.rmr-on .rmr-root .rmr-pkicker a { color: var(--rmr-brass-dark) !important; } .rmr-pkicker--faith a { font-family: var(--rmr-serif); font-size: 15px; } .rmr-pspecs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .rmr-pspecs li { border: 1px solid var(--rmr-line); background: #fff; padding: 5px 11px; font-size: 13.5px; color: var(--rmr-ink); } .rmr-pricebox { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; } .rmr-pricebox .rmr-pprice { margin: 0 !important; } .rmr-save { display: inline-flex; align-items: center; gap: 4px; background: #f3ead8; color: var(--rmr-brass-dark); font-size: 13.5px; font-weight: 600; padding: 6px 10px; } .rmr-save .amount { color: inherit; } .rmr-pricenote { margin: 8px 0 0 !important; font-size: 13.5px; color: var(--rmr-steel); } .rmr-highlights { list-style: none; margin: 18px 0 4px; padding: 16px 0 0; border-top: 1px solid var(--rmr-line); display: grid; gap: 9px; } .rmr-highlights li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; } .rmr-highlights .rmr-ico { color: var(--rmr-brass); width: 19px; height: 19px; margin-top: 2px; } .rmr-pnote { margin: 14px 0 0 !important; padding: 12px 14px; background: #f4efe4; border-inline-start: 2px solid var(--rmr-brass); font-size: 14.5px; line-height: 1.6; color: var(--rmr-ink); } .rmr-view-single-product .rmr-product .rmr-faith-h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); } /* why metalista */ .rmr-why { background: var(--rmr-white); padding-block: clamp(48px, 6vw, 84px); border-top: 1px solid var(--rmr-line); } .rmr-why .rmr-h2 { margin-bottom: clamp(24px, 3vw, 40px); } .rmr-why__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.6vw, 36px); } .rmr-why__item .rmr-ico { width: 30px; height: 30px; color: var(--rmr-brass); margin-bottom: 12px; } .rmr-why__item h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 6px !important; } .rmr-why__item p { color: var(--rmr-steel); font-size: 15px; } @media (max-width: 900px) { .rmr-why__row { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .rmr-why__row { grid-template-columns: 1fr; } .rmr-why__item { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; } .rmr-why__item .rmr-ico { grid-row: span 2; margin: 2px 0 0; } } /* 1.12.2: living room photo behind the rabbis hero, signs on the wall above the sofa */ .rmr-faith-wall--room { aspect-ratio: 1168 / 880; background: #e9e4dc; } .rmr-faith-wall--room .rmr-faith-wall__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .rmr-faith-wall--room::after { display: none; } .rmr-faith-wall--room .rmr-faith-wall__piece .rmr-mount { width: 100%; height: 100%; object-fit: contain; } .rmr-faith-wall--room.rmr-faith-wall--3 .rmr-faith-wall__piece--1 { top: 10%; left: 38%; width: 26%; height: 40%; } .rmr-faith-wall--room.rmr-faith-wall--3 .rmr-faith-wall__piece--2 { top: 19%; left: 67%; width: 18%; height: 28%; } .rmr-faith-wall--room.rmr-faith-wall--3 .rmr-faith-wall__piece--3 { top: 19%; left: 17%; width: 18%; height: 28%; } .rmr-faith-wall--room.rmr-faith-wall--2 .rmr-faith-wall__piece--1 { top: 9%; left: 30%; width: 26%; height: 40%; } .rmr-faith-wall--room.rmr-faith-wall--2 .rmr-faith-wall__piece--2 { top: 15%; left: 60%; width: 20%; height: 30%; } .rmr-faith-wall--room.rmr-faith-wall--1 .rmr-faith-wall__piece--1 { top: 8%; left: 37%; width: 28%; height: 42%; } @media (max-width: 900px) { .rmr-faith-wall--room { aspect-ratio: 1168 / 880; } } /* ========================================================================== v1.13.0 | Visualizer on every sign, payment badges, delivery estimate ========================================================================== */ .rmr-viz { background: var(--rmr-white); padding-block: clamp(44px, 6vw, 80px); border-top: 1px solid var(--rmr-line); } .rmr-viz__head { margin-bottom: clamp(18px, 2.4vw, 28px); } .rmr-viz__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; } .rmr-viz__stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #e9e4dc; } .rmr-viz__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; } .rmr-viz__stage.is-swapping .rmr-viz__bg { opacity: .35; } /* The sign is centered on its point and fits its box, so it never drifts off center. */ .rmr-viz__sign { position: absolute; left: var(--cx); top: var(--cy); width: var(--w); height: var(--h); transform: translate(-50%, -50%) scale(var(--s, 1)); display: flex; align-items: center; justify-content: center; transition: left .45s, top .45s, width .45s, height .45s, transform .45s; pointer-events: none; } .rmr-viz__sign .rmr-mount { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; padding: 0; } .rmr-viz__tag { position: absolute; top: 12px; right: 12px; background: rgba(23, 25, 28, .72); color: #fff; font-size: 12px; padding: 4px 9px; } .rmr-viz__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.rmr-on .rmr-root .rmr-viz__opt { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: #fff; border: 1px solid var(--rmr-line); border-radius: 2px; cursor: pointer; text-align: right; font: 500 14.5px/1.3 var(--rmr-body); color: var(--rmr-ink); min-height: 0; box-shadow: none; } body.rmr-on .rmr-root .rmr-viz__opt[aria-pressed="true"] { border: 2px solid var(--rmr-ink); padding: 7px; } .rmr-viz__thumb { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; } @media (max-width: 900px) { .rmr-viz__grid { grid-template-columns: 1fr; } .rmr-viz__pick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } body.rmr-on .rmr-root .rmr-viz__opt { font-size: 12px; padding: 5px; gap: 5px; } body.rmr-on .rmr-root .rmr-viz__opt[aria-pressed="true"] { padding: 4px; } } /* payment badges: fixed size everywhere, so an SVG can never stretch to the screen width */ .rmr-pricenote--cards { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .rmr-pricenote--cards > .rmr-ico { width: 18px; height: 18px; color: var(--rmr-ok); } .rmr-cards { display: inline-flex; gap: 5px; flex-wrap: wrap; } .rmr-cards__c { display: inline-block; flex: none; width: 38px !important; height: 24px !important; border: 1px solid var(--rmr-line); border-radius: 4px; overflow: hidden; background: #fff; } .rmr-cards__c svg { display: block; width: 100% !important; height: 100% !important; max-width: 38px; max-height: 24px; } /* delivery estimate */ .rmr-eta { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 13px 15px; background: #eef6f0; border: 1px solid #cfe6d6; } .rmr-eta > .rmr-ico { color: var(--rmr-ok); width: 24px; height: 24px; margin-top: 1px; } .rmr-eta strong { display: block; font-weight: 600; font-size: 15px; } .rmr-eta strong span { color: var(--rmr-ok); } .rmr-eta small { display: block; color: var(--rmr-steel); font-size: 13.5px; margin-top: 2px; } /* no white background photo: show the photo itself as a framed print, no mount effect */ .rmr-viz--photo .rmr-viz__sign .rmr-mount { filter: drop-shadow(-6px 10px 12px rgba(0, 0, 0, .35)) !important; }