/* MJ Magic Rugs — storefront stylesheet (design pass, light linen + carved plate). Content-hashed by build.mjs into /assets/style..css and linked by every page. Fonts are self-hosted (OFL-1.1, licenses in /assets/fonts/). No CDN. */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jost-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-matched local fallbacks so the swap from the system font to the web font moves as little text as possible (CLS). Instrument Serif is a narrow face; Times-family fallbacks are pulled in to roughly the same advance width. */ @font-face { font-family: 'Instrument Serif Fallback'; font-style: normal; src: local('Times New Roman'), local('Liberation Serif'), local('Tinos'), local('Georgia'); size-adjust: 72.5%; ascent-override: 99%; descent-override: 31%; line-gap-override: 0%; } /* Italic is used for lowercase copy (hero quote, "magic", "rug"); measured Instrument Serif italic lowercase = 90% of Times italic width. */ @font-face { font-family: 'Instrument Serif Fallback'; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRoman-Italic'), local('Liberation Serif Italic'), local('LiberationSerif-Italic'), local('Tinos Italic'), local('Georgia Italic'); size-adjust: 90%; ascent-override: 99%; descent-override: 31%; line-gap-override: 0%; } @font-face { font-family: 'Jost Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 94%; ascent-override: 107%; descent-override: 38%; line-gap-override: 0%; } :root { /* Design tokens — light linen surface */ --ground: #F4EEE3; /* page background (warm linen) */ --paper: #FBF8F2; /* cards / chips */ --ink: #241A12; /* text, top bar, footer, primary button */ --muted: #6E5A44; /* small caps labels */ --body2: #4A3A2B; /* secondary body text */ --clay: #9A3A22; /* accent: italic "Magic", prices, hover fills, links */ --line: #D8CBB4; /* decorative hairlines ONLY */ --line-strong: #8C7A62; /* form inputs (accessibility) — not decoration */ --mat: #EFE6D6; /* form block, size tiles */ /* Carpet mat under every product photo: the plate tile at 300px over --ground at 0.55 (= 45% ground overlay) */ /* Photo mats are WINDOWS onto the one fixed floor (2026-09-26): same tile, same size, same 55% ground veil (= the floor's .45 opacity over --ground). Alignment to the floor: background-attachment: fixed by default (no-JS path); with JS (html.mjr-floor-js) each mat gets --top/--left page offsets and the tile is positioned from --sy on , which works on iOS and inside transformed (hovered) cards where fixed attachment falls back to scroll. */ --floor-tile: url('/assets/img/plate-dark-mirror.webp'); --floor-size: 840px 840px; --floor-veil: rgba(244,238,227,0.55); --carpet: linear-gradient(var(--floor-veil), var(--floor-veil)), var(--floor-tile); --radius-sheet: 20px; --radius-card: 16px; --radius-img: 12px; --radius-input: 10px; --frame: 0px; /* no mat any more (2026-09-26); kept as the reserve used by the window padding */ --frame-edge: #8C7A62; /* photo edge: walnut (--line-strong) */ --frame-edge-w: 4px; /* cards; 6px featured + vitrine, 3px Look-closer thumbnails; 3px / 4px under 640 */ --nav-h: 56px; /* stuck bar height: constant, and scroll-padding-top */ --nav-brand-slot: 190px; /* left slot reserved for the compact wordmark (>= 768) so nothing shifts when it fades in */ --brass: #C9A45C; /* hairline accents and footer labels on ink ONLY */ --clay-on-ink: #E08A6A; /* "Magic" in the footer */ /* Legacy aliases — inline style="" attributes in build.mjs markup reference these nine names; they resolve to the new palette so product/landing markup is untouched. Brass text roles resolve to clay (contrast ruling 2026-09-25). */ --mjr-espresso: var(--ground); --mjr-cream: var(--ink); --mjr-cream-muted: var(--muted); --mjr-brass: var(--clay); --mjr-brass-light: var(--clay); --mjr-brass-shade: var(--clay); --mjr-oxblood: var(--clay); --mjr-panel: var(--paper); --mjr-panel-ink: var(--ink); --border: var(--line); --shadow-sm: 0 1px 2px rgba(36,26,18,0.06), 0 12px 28px rgba(36,26,18,0.08); --shadow-lg: 0 2px 4px rgba(36,26,18,0.08), 0 24px 48px rgba(36,26,18,0.14); --serif: 'Instrument Serif', 'Instrument Serif Fallback', 'Times New Roman', serif; --sans: 'Jost', 'Jost Fallback', system-ui, sans-serif; --caps-ls: 0.24em; --ease-out-expo: cubic-bezier(.16,1,.3,1); --ease-curtain: cubic-bezier(.76,0,.24,1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Deliberately 'auto', not 'smooth' — see the note in the previous stylesheet: a global smooth scroll races explicit JS scrollIntoView() calls. */ html { scroll-behavior: auto; scroll-padding-top: var(--nav-h, 56px); } body { font-family: var(--sans); font-weight: 500; background: var(--ground); color: var(--ink); min-height: 100vh; overflow-x: clip; /* clip, not hidden: hidden would make body a scroll container and break position:sticky */ line-height: 1.55; -webkit-font-smoothing: antialiased; position: relative; } a { color: var(--clay); text-decoration: none; } ::selection { background: var(--clay); color: var(--paper); } em { font-style: italic; } /* CARVED PLATE — fixed full-page layer behind all content. Full-viewport images are not LCP candidates; the layer is decorative and pointer-inert. */ .mjr-textile-ground { background-color: var(--ground); } .mjr-plate { /* Fix 3 (2026-09-26): a real fixed element (was body::before), sized with lvh so the iOS toolbar collapse never resizes it mid-scroll; the sheet slides over a still floor. Positioned siblings (topbar, sheet, footer) paint above it in tree order; no z-index stacking contexts are introduced. */ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; /* plate-dark-mirror: 2508px 2x2-mirrored source (seam 0.0), shipped as an 840px tile, WebP q40, 142 KB */ background: url('/assets/img/plate-dark-mirror.webp') repeat 0 0; background-size: 840px 840px; /* The plate is the FLOOR (direction change 2026-09-25): seen richly in the margins around the paper sheet. Content never sits on it. */ opacity: 0.45; pointer-events: none; } /* ---------- MOTION ---------- Everything animated is visible in its FINAL state by default. The hidden / moving states only apply under html.mjr-anim (IntersectionObserver present, no reduced-motion preference) and html.mjr-intro (first load this session). Both classes are stamped by the inline script before first paint. */ @keyframes mjrSettle { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes mjrReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes mjrRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes mjrFrieze { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes mjrCurtain { from { transform: translateY(0); } to { transform: translateY(-101%); } } @keyframes mjrLineUp { from { transform: translateY(130%); } to { transform: translateY(0); } } @keyframes mjrFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes mjrMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } html.mjr-anim .mjr-anim-settle { animation: mjrSettle 0.7s ease both; } html.mjr-anim .mjr-anim-reveal { animation: mjrReveal 0.8s ease both; } html.mjr-anim .mjr-rise { opacity: 0; transform: translateY(30px); } html.mjr-anim .mjr-rise.mjr-in-view { animation: mjrRise 0.7s ease both; } html.mjr-anim .mjr-frieze-draw { animation: mjrFrieze 0.9s ease both; } /* Scroll reveals, CSS only. Elements already in view start past the range end, i.e. in their final state, so nothing above the fold is ever hidden. */ @supports (animation-timeline: view()) { html.mjr-anim .mjr-reveal { animation: mjrFadeUp linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; } } /* CARPET WIPE (template Main-v2 .wipe, 2026-09-26). A fixed carved-plate panel slides up over the page on an internal link click; the next page loads already covered (html.mjr-wiping, set by the 3-line head script from sessionStorage) and the panel keeps rising off the top. Cross-document view transitions are not used, so every browser gets the same carpet. Reduced motion: no panel. */ .mjr-wipe { position: fixed; inset: 0; z-index: 600; pointer-events: none; background-color: #E7DCC8; transform: translateY(100%); will-change: transform; visibility: hidden; /* at rest it is offscreen; hidden too so it can never show in an oversized capture */ } html.mjr-wipe-cover .mjr-wipe, html.mjr-wiping .mjr-wipe { visibility: visible; } .mjr-wipe::before, .mjr-curtain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('/assets/img/plate-dark-mirror.webp') repeat 0 0; background-size: 840px 840px; opacity: 0.45; } html.mjr-wipe-cover .mjr-wipe { animation: mjrWipeCover 0.55s var(--ease-curtain) both; } html.mjr-wiping .mjr-wipe { transform: translateY(0); animation: mjrWipeReveal 0.6s var(--ease-curtain) 0.05s both; } @keyframes mjrWipeCover { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes mjrWipeReveal { from { transform: translateY(0); } to { transform: translateY(-100%); } } @media (prefers-reduced-motion: reduce) { .mjr-wipe { display: none; } } /* ---------- SHARED UTILITY TYPE ---------- */ .mjr-caps { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; line-height: 1.4; } /* ---------- THE SHEET: one continuous paper surface per page ---------- */ .mjr-sheet { position: relative; max-width: min(1120px, calc(100% - 128px)); margin: 56px auto 0; background: var(--paper); /* >=1440: 1320px so the template's 158px hero fits with its indent (Doug ruling 2026-09-26). */ border-radius: var(--radius-sheet); box-shadow: 0 30px 60px -30px rgba(36,26,18,0.45); padding-bottom: 72px; } .mjr-sheet > .site-header { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; } @media (min-width: 1440px) { .mjr-sheet { max-width: min(1320px, calc(100% - 120px)); } } /* ---------- TOP BAR ---------- */ .mjr-topbar { position: relative; /* above .mjr-plate */ background: var(--ink); color: var(--ground); font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; } .mjr-topbar-inner { max-width: 1320px; margin: 0 auto; padding: 10px 32px; display: flex; justify-content: space-between; gap: 16px; line-height: 16px; } .mjr-topbar-inner span, .mjr-topbar a { white-space: nowrap; } .mjr-topbar a { color: var(--ground); white-space: nowrap; } .mjr-topbar a:hover { color: var(--brass); } /* ---------- HEADER: wordmark row ---------- */ .site-header { background: var(--paper); color: var(--ink); } .header-inner { max-width: 1320px; margin: 0 auto; padding: 22px 32px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } .mjr-wordmark { grid-column: 2; justify-self: center; background: none; border: none; padding: 0; cursor: pointer; display: block; width: 280px; height: 52px; line-height: 52px; text-align: center; font-family: var(--serif); font-weight: 400; font-size: 44px; color: var(--ink); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; } .mjr-wordmark em { font-style: italic; text-transform: none; color: var(--clay); } .mjr-header-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; } .mjr-search-btn, .mjr-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .mjr-search-btn:hover, .mjr-menu-btn:hover { background: var(--clay); border-color: var(--clay); color: var(--paper); } .mjr-menu-btn { display: none; } .mjr-menu-btn svg { display: block; } /* ---------- NAV: the sticky bar (direct child of the sheet) ---------- */ .mjr-nav-sentinel { height: 1px; margin-top: -1px; } .site-nav { position: sticky; top: 0; z-index: 190; display: flex; align-items: center; justify-content: center; height: var(--nav-h); padding: 0 24px 0 var(--nav-brand-slot, 24px); background: rgba(251,248,242,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); transition: box-shadow 0.25s ease; } html.mjr-stuck .site-nav { box-shadow: 0 8px 24px -16px rgba(36,26,18,0.35); } .mjr-nav-scroll { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; min-width: 0; } .nav-btn { position: relative; display: inline-block; padding: 4px 0; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); background: transparent; border: none; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .nav-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--clay); transform: scaleX(0); transform-origin: right center; transition: transform 0.5s var(--ease-out-expo); } .nav-btn:hover { color: var(--clay); } /* Template: the underline sweeps in from the left and leaves to the right (origin swaps on hover). */ .nav-btn:hover::after, .nav-btn.active::after { transform: scaleX(1); transform-origin: left center; } .nav-btn.active { color: var(--clay); } .nav-btn.nav-signature { color: var(--clay); } /* Compact wordmark: fades in at the left once the bar is stuck (opacity/transform only) */ .mjr-nav-brand { position: absolute; left: 24px; top: 50%; transform: translate(-8px, -50%); font-family: var(--serif); font-size: 22px; line-height: 1; text-transform: uppercase; color: var(--ink); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo); } .mjr-nav-brand em { font-style: italic; text-transform: none; color: var(--clay); } html.mjr-stuck .mjr-nav-brand { opacity: 1; transform: translate(0, -50%); pointer-events: auto; } .mjr-nav-tools { display: none; } .mjr-nav-call, .mjr-menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .mjr-nav-call:hover, .mjr-menu-btn:hover { background: var(--clay); border-color: var(--clay); color: var(--paper); } .mjr-nav-call svg, .mjr-menu-btn svg { display: block; } /* ---------- SEARCH ROW (homepage) ---------- */ /* Hidden until the header search circle opens it (template: no always-visible search bar). */ .search-bar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 24px; display: none; justify-content: center; } html.mjr-search-open .search-bar { display: flex; } .search-wrap { position: relative; } .search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: 0.6; pointer-events: none; color: var(--muted); } .search-wrap input { font-family: var(--sans); font-weight: 500; font-size: 13px; padding: 9px 16px 9px 38px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); width: 280px; outline: none; transition: border-color 0.2s, width 0.3s; } .search-wrap input::placeholder { color: var(--muted); } .search-wrap input:focus { outline: 2px solid var(--clay); outline-offset: 2px; width: 320px; } /* ---------- SIZE FILTER CHIPS (landing pages) ---------- */ .filter-bar { background: transparent; padding: 12px 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .filter-bar:empty { display: none; } .hidden { display: none !important; } .filter-label { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 500; color: var(--muted); margin-right: 6px; white-space: nowrap; } .pill { background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .pill:hover { border-color: var(--clay); color: var(--clay); } .pill.active { background: var(--ink); border-color: var(--ink); color: var(--ground); } /* ---------- HERO (homepage) ---------- */ .mjr-hero { position: relative; overflow: hidden; } .mjr-curtain { position: absolute; inset: 0; z-index: 6; pointer-events: none; background-color: #E7DCC8; /* same carpet as .mjr-wipe (tile via ::before) */ transform: translateY(-101%); } html.mjr-intro .mjr-curtain { animation: mjrCurtain 1.1s var(--ease-curtain) both; } .mjr-hero-inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 34px 32px 56px; } .mjr-caps-row b { font-weight: 500; color: var(--clay); } .mjr-caps-row span { white-space: nowrap; } .mjr-caps-row { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 16px 0 0; line-height: 16px; border-top: 1px solid var(--ink); font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; color: var(--muted); } .mjr-hero-title { margin: 48px 0 0; font-family: var(--serif); font-weight: 400; text-transform: uppercase; /* Template scale: 158px at 1440 (10.97vw), scaling with the viewport below. Line 2 + its indent must fit the hero inner at every width: the indent gives way first (see .mjr-line-indent), the size never does. */ line-height: 0.9; font-size: clamp(34px, 10.97vw, 158px); letter-spacing: -0.02em; color: var(--ink); } .mjr-hero-title em { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; color: var(--clay); } .mjr-hero-dash { font-size: 0.5em; vertical-align: 0.35em; } /* Fixed em heights: the mask box must not depend on font metrics, or the fallback-to-webfont swap shifts everything below the hero (CLS). */ /* Mask: template's .24em below for descenders; .22em above so the font's content box (taller than the .9 line box) stays inside the mask for the clip sweep. */ .mjr-line { display: block; overflow: hidden; white-space: nowrap; line-height: 0.9; height: 1.36em; padding: 0.22em 0 0.24em; margin: -0.22em 0 -0.24em; } /* Indent = 7.2vw capped at the template's 104px, reduced FIRST wherever line 2 would otherwise overrun the hero inner (measured 2026-09-26: line 2 is 7.30em wide = 80.1vw at 10.97vw type, so the slack is 19.9vw minus that band's sheet + hero-inner side margins, minus 5px safety). At >=1440 the 1320px sheet leaves 103px, so the cap there is 100px. */ .mjr-line-indent { padding-left: clamp(0px, min(7.2vw, calc(19.9vw - 197px)), 100px); } .mjr-line-inner { display: block; line-height: 0.9; height: 0.9em; } /* 1248-1439: the sheet is already at its 1120px cap (Doug: 1120 stays below 1440), so the hero inner is a fixed 1056px while 10.97vw keeps growing. The indent is already minimal here; the size is what gives way (measured max 141px). */ @media (min-width: 1248px) and (max-width: 1439px) { .mjr-hero-title { font-size: min(10.97vw, 141px); } .mjr-line-indent { padding-left: 24px; } } html.mjr-intro .mjr-line-inner { animation: mjrLineUp 1s var(--ease-out-expo) both; animation-delay: 0.85s; } html.mjr-intro .mjr-line:nth-child(2) .mjr-line-inner { animation-delay: 1.0s; } html.mjr-intro .mjr-hero-after { animation: mjrFadeUp 0.7s ease both; animation-delay: 1.45s; } html.mjr-intro .mjr-caps-row { animation: mjrFadeUp 0.7s ease both; animation-delay: 1.3s; } .mjr-hero-after { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: end; gap: 28px 48px; margin-top: 44px; } .mjr-hero-tagline { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.36vw, 34px); line-height: 1.15; color: var(--body2); max-width: 600px; text-wrap: balance; } .mjr-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } /* ---------- BUTTONS (pill, fill-from-bottom hover) ---------- */ .mjr-btn-solid, .mjr-btn-outline, .btn-inquire { position: relative; isolation: isolate; overflow: hidden; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 500; padding: 15px 30px; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 999px; line-height: 1; transition: color 0.45s ease, border-color 0.45s ease; } .mjr-btn-solid::before, .mjr-btn-outline::before, .btn-inquire::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--clay); /* Template: the fill rises from the bottom edge (.45s). Drawn as a bottom-up clip reveal rather than translateY(101%): visually identical for a solid fill, and the pseudo-element never extends the button's scrollable overflow (the clip sweep would read that as clipped text). */ clip-path: inset(100% 0 0 0); transition: clip-path 0.45s var(--ease-out-expo); } .mjr-btn-solid:hover::before, .mjr-btn-outline:hover::before, .btn-inquire:hover::before { clip-path: inset(0 0 0 0); } .mjr-btn-solid { background: var(--ink); color: var(--ground); border: 1px solid var(--ink); } .mjr-btn-solid:hover { color: var(--paper); border-color: var(--clay); } .mjr-btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .mjr-btn-outline:hover { color: var(--paper); border-color: var(--clay); } /* ---------- MARQUEE ---------- */ .mjr-marquee { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); overflow: hidden; padding: 18px 0; } .mjr-marquee-track { display: flex; width: max-content; will-change: transform; } html.mjr-anim .mjr-marquee-track { animation: mjrMarquee 38s linear infinite; } .mjr-marquee:hover .mjr-marquee-track, .mjr-marquee:focus-within .mjr-marquee-track { animation-play-state: paused; } .mjr-marquee-link { color: inherit; text-decoration: none; transition: color 0.3s ease; } .mjr-marquee-link:hover, .mjr-marquee-link:focus-visible { color: var(--clay); } .mjr-marquee-copy { display: flex; flex: none; align-items: center; white-space: nowrap; font-family: var(--serif); font-size: clamp(28px, 3.06vw, 44px); line-height: 1; height: 1em; color: var(--ink); text-transform: uppercase; letter-spacing: 0.01em; } .mjr-marquee-copy span { display: flex; align-items: center; height: 1em; } /* Inline SVG, not the ✦ glyph: a symbol font fallback would change the line box. */ .mjr-marquee-copy svg { flex: none; width: 0.5em; height: 0.5em; margin: 0 0.7em; fill: var(--clay); } /* ---------- NUMBERED SECTION HEADS ---------- */ .mjr-block { max-width: 1320px; margin: 0 auto; padding: 72px 32px 0; } /* flex-end, not baseline: baseline alignment makes the row height depend on font ascent, which shifts on the fallback-to-webfont swap. */ .mjr-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .mjr-no { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; line-height: 16px; color: var(--muted); white-space: nowrap; } .mjr-no b { font-weight: 500; color: var(--clay); } .mjr-block-title { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 5.28vw, 76px); line-height: 0.9; height: 1em; white-space: nowrap; color: var(--ink); } .mjr-block-title em { font-style: italic; text-transform: none; letter-spacing: -0.01em; color: var(--clay); } /* ---------- SHOP BY SIZE CARDS ---------- */ /* Template Main-v2 layout (>=1024): 12-col grid, heading + sentence in the left 4 cols, chips 4-up in the right 8. */ .mjr-size-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; } .mjr-size-head { grid-column: span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .mjr-size-title { height: auto; white-space: normal; } .mjr-prose { font-family: var(--serif); font-size: clamp(18px, 1.53vw, 22px); line-height: 1.35; color: var(--body2); max-width: 32em; } .mjr-size-grid { grid-column: span 8; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } /* Template Main-v2 chip: paper card, hairline border, 4px radius, 150px tall; the to-scale shape sits top-left, the label bottom-left. */ .mjr-size-card { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 150px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-decoration: none; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease, border-color 0.3s ease; } .mjr-size-card:hover { transform: translateY(-6px); box-shadow: 0 18px 30px -18px rgba(36,26,18,0.45); border-color: var(--clay); } .mjr-size-shape { display: block; flex: none; border: 1.5px solid var(--clay); transform-origin: top left; transition: background-color 0.4s ease, transform 0.5s var(--ease-out-expo); } .mjr-size-card:hover .mjr-size-shape { background-color: var(--clay); transform: scale(1.12); } .mjr-size-label { font-family: var(--serif); font-size: 40px; line-height: 1; height: 1em; color: var(--ink); } /* ---------- FEATURED (This week on the floor) ---------- */ .mjr-featured { max-width: 1320px; margin: 0 auto; padding: 72px 32px 0; } .mjr-featured-piece { margin-top: 30px; } .mjr-featured-eyebrow { display: none; } .mjr-featured-grid { display: grid; grid-template-columns: 7fr 4fr; gap: 40px; align-items: center; } .mjr-featured-photo-btn { position: relative; background: var(--paper); border: none; cursor: pointer; display: block; width: 100%; text-decoration: none; padding: 10px; border-radius: var(--radius-card); } .mjr-featured-photo { position: relative; background: var(--carpet); border-radius: var(--radius-img); aspect-ratio: 16 / 11; overflow: hidden; transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease; } .mjr-featured-photo-btn:hover .mjr-featured-photo { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(36,26,18,0.45); } .mjr-featured-photo-inner { position: absolute; inset: 0; padding: calc(14px + var(--frame) + var(--frame-edge-w) + 1px); display: flex; align-items: center; justify-content: center; transition: transform 1.2s var(--ease-out-expo); } .mjr-featured-photo-btn:hover .mjr-featured-photo-inner { transform: scale(1.04); } .mjr-featured-photo img { max-width: 84%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .mjr-featured-badge { position: absolute; right: 32px; bottom: 32px; width: 120px; height: 120px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ground); font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; opacity: 0; transform: scale(0.6); transition: opacity 0.4s ease, transform 0.6s var(--ease-out-expo); } .mjr-featured-photo-btn:hover .mjr-featured-badge { opacity: 1; transform: scale(1); } .mjr-ticked { position: relative; padding: 0 !important; } .mjr-tick { display: none; } .mjr-featured-cat { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; color: var(--muted); } .mjr-featured-name { margin: 16px 0 0; font-family: var(--serif); font-weight: 400; text-transform: uppercase; line-height: 0.88; font-size: clamp(34px, 5.83vw, 84px); letter-spacing: -0.01em; color: var(--ink); } .mjr-featured-name a { color: inherit; } .mjr-featured-name a:hover { color: var(--clay); } .mjr-featured-meta { margin-top: 14px; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--body2); } .mjr-featured-price { margin-top: 24px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--clay); } .mjr-featured-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; } /* ---------- COLLECTIONS ROWS ---------- */ /* Head: kicker left, caps link right (template); the rows themselves are the display type. */ .mjr-collections-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; } .mjr-caps-link { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; line-height: 16px; color: var(--clay); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .mjr-caps-link:hover { border-bottom-color: var(--clay); } .mjr-collections { list-style: none; margin: 0; padding: 0; } .mjr-collections li:last-child .mjr-collection-row { border-bottom: 1px solid var(--ink); } .mjr-collection-row { position: relative; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid var(--ink); color: var(--ink); text-decoration: none; } .mjr-collection-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } /* The wraps the name only (anchor text == category name); the whole row is clickable via a stretched ::after. */ .mjr-collection-name::after { content: ''; position: absolute; inset: 0; } .mjr-collection-name em { font-style: italic; text-transform: none; letter-spacing: -0.01em; color: var(--clay); } .mjr-collection-count { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; line-height: 16px; color: var(--muted); } .mjr-collection-num { font-family: var(--sans); font-weight: 500; letter-spacing: var(--caps-ls); font-size: 11px; color: var(--muted); } .mjr-collection-name { display: inline-block; font-family: var(--serif); font-weight: 400; text-transform: uppercase; line-height: 1; font-size: clamp(34px, 6.4vw, 92px); letter-spacing: -0.01em; color: inherit; text-decoration: none; transition: transform 0.6s var(--ease-out-expo), color 0.3s ease; } .mjr-collection-arrow { width: 64px; height: 64px; border-radius: 999px; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform 0.6s var(--ease-out-expo), background 0.3s ease, color 0.3s ease; } .mjr-collection-row:hover .mjr-collection-name { transform: translateX(28px); color: var(--clay); } .mjr-collection-row:hover .mjr-collection-arrow { transform: rotate(-45deg); background: var(--ink); color: var(--ground); } /* ---------- MERCHANDISED GRID SECTIONS ---------- */ .gallery-section { max-width: 1320px; margin: 0 auto; padding: 72px 32px 40px; } .mjr-section { margin-bottom: 68px; } .mjr-section:last-child { margin-bottom: 0; } .mjr-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-bottom: 14px; } .mjr-section-title { margin: 0; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1; height: 1em; color: var(--ink); white-space: nowrap; } .mjr-section-kicker { font-family: var(--sans); text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 10.5px; line-height: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; } .mjr-frieze-wrap { display: none; } .gallery-head { display: flex; align-items: baseline; margin-bottom: 30px; flex-wrap: wrap; gap: 8px; } .gallery-head h2 { font-family: var(--serif); font-size: 30px; font-weight: 400; text-transform: uppercase; color: var(--ink); } /* F2 — active-filter strip */ .mjr-filter-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 14px; } .mjr-filter-clear { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--clay); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; } .mjr-filter-clear:hover { color: var(--ink); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 32px; } /* ---------- CARD ---------- */ .rug-card { display: block; text-align: left; background: var(--paper); border: 0; border-radius: var(--radius-card); overflow: hidden; padding: 10px; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease; } .rug-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(36,26,18,0.45); } .card-img-frame { position: relative; background: var(--carpet); border-radius: var(--radius-img); aspect-ratio: 4 / 3; overflow: hidden; } .card-img-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(14px + var(--frame) + var(--frame-edge-w) + 1px); transition: transform 0.6s var(--ease-out-expo); } .rug-card:hover .card-img-inner { transform: scale(1.035); } /* PHOTO ON THE FLOOR (2026-09-26, Doug: lose the mat). No paper mat, no bevel, no contact line: the photo lies on the carpet window like a rug on a floor — a walnut edge and a shadow cast below only. --frame-edge / --frame-edge-w are the only knobs. */ .card-img, .mjr-vitrine-photo img, .mjr-featured-photo img, .mjr-weave-crop-inner { border: var(--frame-edge-w) solid var(--frame-edge); border-radius: 0; display: block; box-shadow: 0 14px 22px -14px rgba(36,26,18,0.45); transition: box-shadow 0.35s ease; } .rug-card:hover .card-img, .mjr-vitrine-photo:hover img, .mjr-featured-photo-btn:hover .mjr-featured-photo img, .mjr-weave-crop:hover .mjr-weave-crop-inner { box-shadow: 0 20px 30px -16px rgba(36,26,18,0.5); } .mjr-featured-photo-inner, .mjr-vitrine-photo-inner { --frame-edge-w: 6px; } .mjr-weave-crop { --frame-edge-w: 3px; } .card-img { max-width: 84%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .card-body { padding: 14px 2px 8px; } .card-id { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: var(--caps-ls); text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .card-name { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.1; } .card-name em, .mjr-featured-name em { font-style: italic; color: var(--clay); } .mjr-featured-name em { text-transform: none; letter-spacing: -0.01em; } .card-sub { margin-top: 4px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--body2); } .card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; } .card-price { font-family: var(--serif); font-size: 20px; color: var(--clay); } .card-price-contact { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-style: italic; } .btn-inquire { flex: none; font-size: 10px; padding: 9px 14px; background: transparent; color: var(--ink); border: 1px solid var(--line); white-space: nowrap; } .btn-inquire:hover { color: var(--paper); border-color: var(--clay); } /* ---------- PLACEHOLDER CARD (photo-pending) ---------- */ /* "Photo coming soon": flex column on the carpet mat, text on a paper panel. The mat grows with its content (aspect-ratio is a preferred size, min-height auto). */ .card-placeholder { position: relative; background: var(--carpet); border-radius: var(--radius-img); aspect-ratio: 4 / 3; min-height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(20px + var(--frame)); } .card-placeholder-label, .mjr-vitrine-placeholder-label { /* Paper pill (the template's "[This week's photo]" pill); ink on paper = 16.1:1 */ font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.2; color: var(--ink); text-align: center; background: var(--paper); padding: 10px 18px; border-radius: 999px; } /* ---- floor windows ---- */ .card-img-frame, .card-placeholder, .mjr-featured-photo, .mjr-vitrine-photo, .mjr-vitrine-placeholder, .mjr-weave-crop { background-color: var(--ground); background-image: linear-gradient(var(--floor-veil), var(--floor-veil)), var(--floor-tile); background-size: auto, var(--floor-size); background-repeat: repeat; background-attachment: fixed; background-position: 0 0; } html.mjr-floor-js .card-img-frame, html.mjr-floor-js .card-placeholder, html.mjr-floor-js .mjr-featured-photo, html.mjr-floor-js .mjr-vitrine-photo, html.mjr-floor-js .mjr-vitrine-placeholder, html.mjr-floor-js .mjr-weave-crop { background-attachment: scroll; background-position: 0 0, calc(0px - var(--left, 0px)) calc(var(--sy, 0px) - var(--top, 0px)); } /* Shared SVG defs (build.mjs markup) — retoned here rather than in the markup */ #brassGrad stop:nth-child(1) { stop-color: var(--brass); } #brassGrad stop:nth-child(2) { stop-color: var(--brass); } #brassGrad stop:nth-child(3) { stop-color: var(--brass); } #latticeP path { stroke: var(--line); } /* ---------- BREADCRUMB ---------- */ .mjr-breadcrumb { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 22px; } .mjr-breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; } .mjr-breadcrumb a:hover { color: var(--clay); } .mjr-breadcrumb-sep { color: var(--line); } .mjr-breadcrumb [aria-current="page"] { color: var(--ink); } /* ---------- LANDING PAGES ---------- */ .mjr-landing-section { max-width: 1320px; margin: 0 auto; padding: 40px 32px 28px; border-bottom: 1px solid var(--line); } .mjr-landing-section .mjr-hero-title { text-transform: uppercase; line-height: 1; } .mjr-landing-intro { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--body2); max-width: 720px; margin: 0 0 8px; } .mjr-landing-lowstock { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); margin: 10px 0 0; } .mjr-shopby { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 26px 0 0; } .mjr-shopby-label { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 500; color: var(--muted); margin-right: 4px; } .mjr-shopby a.pill { display: inline-block; } /* ---------- PRODUCT DETAIL VITRINE ---------- */ .mjr-detail-section { max-width: 1320px; margin: 0 auto; padding: 40px 32px 40px; } .mjr-back-link { background: none; border: none; padding: 0; margin: 0 0 40px; cursor: pointer; text-decoration: none; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11.5px; font-weight: 500; color: var(--clay); display: inline-block; transition: color 0.15s ease; } .mjr-back-link:hover { color: var(--ink); } .mjr-detail-grid-outer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 56px; align-items: start; } .mjr-vitrine { position: relative; padding: 10px; background: var(--paper); border-radius: var(--radius-card); } .mjr-vitrine-photo { position: relative; background: var(--carpet); border-radius: var(--radius-img); aspect-ratio: 1 / 1; overflow: hidden; } .mjr-vitrine-photo-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(14px + var(--frame) + var(--frame-edge-w) + 1px); transition: transform 0.6s var(--ease-out-expo); } .mjr-vitrine-photo:hover .mjr-vitrine-photo-inner { transform: scale(1.045); } .mjr-vitrine-photo img { max-width: 84%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .mjr-vitrine-placeholder { position: relative; background: var(--carpet); border-radius: var(--radius-img); aspect-ratio: 1 / 1; min-height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(20px + var(--frame)); } /* D5 weave close-up strip */ .mjr-weave-strip-wrap { padding: 0; margin-top: 18px; } .mjr-weave-label { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10.5px; font-weight: 500; color: var(--muted); margin: 6px 0 14px; } .mjr-weave-strip { display: flex; gap: 32px; } .mjr-weave-crop { flex: 1; aspect-ratio: 1 / 1; background: var(--carpet); border-radius: var(--radius-img); padding: calc(14px + var(--frame-edge-w)); transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease; } .mjr-weave-crop-inner { width: 100%; height: 100%; overflow: hidden; } .mjr-weave-crop:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(36,26,18,0.45); } .mjr-weave-crop img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(2.4); } /* ---------- LOOK CLOSER VIEWER (C) ---------- */ .mjr-view-link { display: block; color: inherit; text-decoration: none; cursor: zoom-in; } a.mjr-vitrine-photo:focus-visible, a.mjr-weave-crop:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } .mjr-viewer { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; color: var(--ground); overflow: hidden; } .mjr-viewer::backdrop { background: rgba(36,26,18,0.92); } .mjr-viewer[open] { display: block; } .mjr-viewer-stage { position: absolute; inset: 0; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: thin; } .mjr-viewer-stage.is-zoomed { display: block; cursor: grab; } .mjr-viewer-stage.is-zoomed:active { cursor: grabbing; } .mjr-viewer-stage img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; cursor: zoom-in; } .mjr-viewer-stage.is-zoomed img { cursor: zoom-out; } html.mjr-anim .mjr-viewer-stage img.is-in { animation: mjrFadeUp 0.25s ease both; } .mjr-viewer-close, .mjr-viewer-prev, .mjr-viewer-next { position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(244,238,227,0.35); background: rgba(36,26,18,0.6); color: var(--ground); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 26px; line-height: 1; } .mjr-viewer-close { top: 14px; right: 14px; } .mjr-viewer-prev { left: 14px; top: 50%; transform: translateY(-50%); } .mjr-viewer-next { right: 14px; top: 50%; transform: translateY(-50%); } .mjr-viewer-close:hover, .mjr-viewer-prev:hover, .mjr-viewer-next:hover { background: var(--clay); border-color: var(--clay); } .mjr-viewer-close:focus-visible, .mjr-viewer-prev:focus-visible, .mjr-viewer-next:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .mjr-viewer-count { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); font-family: var(--sans); font-size: 11px; letter-spacing: var(--caps-ls); text-transform: uppercase; color: var(--ground); background: rgba(36,26,18,0.6); padding: 8px 14px; border-radius: 999px; } /* ---------- PRODUCT INFO PANEL ---------- */ .mjr-info-panel { padding: 6px 0 0; } .mjr-form-card { margin-top: 40px; padding: 32px; background: var(--mat); border-radius: var(--radius-card); } .mjr-info-cat { font-family: var(--sans); text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; font-weight: 500; color: var(--clay); } .mjr-info-name { margin: 16px 0 0; font-family: var(--serif); font-weight: 400; text-transform: uppercase; line-height: 0.98; font-size: clamp(38px, 5vw, 60px); color: var(--ink); } .mjr-info-details { margin: 34px 0 32px; } .mjr-info-row { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid var(--line); } .mjr-info-row:last-of-type { border-bottom: 1px solid var(--line); } .mjr-info-row-label { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 500; color: var(--muted); } .mjr-info-row-value { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); } .mjr-info-price { font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1; color: var(--clay); } .mjr-info-note { margin: 34px 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--body2); max-width: 420px; } /* ---------- RELATED ---------- */ .mjr-related-section { max-width: 1320px; margin: 0 auto; padding: 56px 32px 96px; border-top: 1px solid var(--line); } .mjr-related-title { margin: 0 0 32px; padding: 0 0 18px; border-bottom: 1px solid var(--line); text-align: center; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: 30px; color: var(--ink); } .mjr-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 32px; } .mjr-related-grid .card-body { padding: 14px 2px 8px; } /* ---------- VISIT THE BOOTH (M2) / MEET MARIO (M4) — flags off, retoned for completeness ---------- */ .mjr-booth-section { max-width: 1320px; margin: 0 auto; padding: 40px 32px 20px; } .mjr-booth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; } .mjr-booth-kicker { font-family: var(--sans); text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; font-weight: 500; color: var(--clay); } .mjr-booth-title { margin: 14px 0 26px; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 4vw, 44px); color: var(--ink); } .mjr-booth-fact-label { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 7px; } .mjr-booth-fact-value { display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); } .mjr-booth-steps-kicker { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 22px; } .mjr-booth-step { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--line); } .mjr-booth-step:last-child { border-bottom: 1px solid var(--line); } .mjr-booth-step-num { flex: none; font-family: var(--serif); font-size: 26px; color: var(--clay); line-height: 1; } .mjr-booth-step-title { font-family: var(--serif); font-size: 21px; color: var(--ink); } .mjr-booth-step-body { margin-top: 4px; font-family: var(--sans); font-size: 14px; color: var(--body2); } .mjr-mario-section { max-width: 1320px; margin: 0 auto; padding: 70px 32px 96px; } .mjr-mario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 52px; align-items: center; } .mjr-mario-quote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.5; color: var(--body2); } .mjr-mario-rule { margin-top: 22px; height: 1px; width: 120px; background: var(--line); } .mjr-mario-byline { margin-top: 16px; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 500; color: var(--muted); } /* ---------- STATES ---------- */ .state-box { grid-column: 1/-1; text-align: center; padding: 5rem 2rem; } .spinner { width: 32px; height: 32px; border: 2px solid var(--line); border-top-color: var(--clay); border-radius: 50%; animation: spin 0.75s linear infinite; margin: 0 auto 1.25rem; } @keyframes spin { to { transform: rotate(360deg); } } .state-box h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; color: var(--ink); margin-bottom: 0.4rem; } .state-box p { font-size: 0.8rem; color: var(--muted); } /* ---------- MODAL (homepage quick-inquire) ---------- */ .overlay { display: none; position: fixed; inset: 0; background: rgba(36,26,18,0.55); z-index: 500; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(3px); } .overlay.open { display: flex; } .modal { background: var(--paper); color: var(--ink); border: 0; border-radius: var(--radius-card); max-width: 540px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; } .modal-close { position: absolute; top: 0.9rem; right: 1rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--ground); cursor: pointer; opacity: 0.8; transition: opacity 0.15s; z-index: 10; } .modal-close:hover { opacity: 1; } .modal-top { background: var(--ink); color: var(--ground); padding: 1.75rem 2rem 1.5rem; } .modal-eyebrow { font-family: var(--sans); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.4rem; } .modal-top h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1.1; } .modal-body { padding: 1.75rem 2rem 2rem; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; background: var(--ground); border: 1px solid var(--line); padding: 1.1rem 1.25rem; margin-bottom: 1.75rem; } .detail-item label { display: block; font-family: var(--sans); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.18rem; } .detail-item span { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); } .detail-price { grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 0.75rem; margin-top: 0.1rem; } .detail-price span { font-size: 1.6rem; color: var(--clay); } .form-section-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--ink); margin-bottom: 1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .form-group { margin-bottom: 0.85rem; } .form-group label { display: block; font-family: var(--sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; } .form-group input, .form-group textarea { width: 100%; font-family: var(--sans); font-size: 0.85rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-input); background: #fff; color: var(--ink); outline: none; } .form-group input:focus, .form-group textarea:focus { outline: 2px solid var(--clay); outline-offset: 2px; } .form-group textarea { resize: vertical; min-height: 80px; } .btn-submit { width: 100%; border-radius: 999px; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.95rem; background: var(--ink); color: var(--ground); border: none; cursor: pointer; margin-top: 0.4rem; transition: background 0.18s; } .btn-submit:hover { background: var(--clay); } .btn-submit:disabled { opacity: 0.45; cursor: not-allowed; } .success-box { text-align: center; padding: 2rem 1rem; display: none; } .success-box .icon { font-size: 2.25rem; margin-bottom: 0.85rem; color: var(--clay); } .success-box h3 { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; color: var(--ink); margin-bottom: 0.4rem; } .success-box p { font-size: 0.82rem; color: var(--body2); } /* ---------- FOOTER (ink) ---------- */ .site-footer { position: relative; background: var(--ink); color: var(--ground); padding: 72px 32px 0; margin-top: 64px; } .mjr-footer-giant-wrap { max-width: none; margin: 40px -32px 0; overflow: hidden; } .site-footer > * { position: relative; z-index: 1; max-width: 1320px; margin-left: auto; margin-right: auto; } .footer-brand { font-family: var(--serif); font-size: 34px; font-weight: 400; text-transform: uppercase; line-height: 1; margin-bottom: 14px; } .footer-brand em { font-style: italic; text-transform: none; color: var(--clay-on-ink); } .footer-tagline { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ground); opacity: 0.85; margin-bottom: 10px; max-width: 520px; } .site-footer p.footer-since { font-family: var(--sans); text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; font-weight: 500; color: var(--brass); margin-bottom: 40px; } .mjr-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 32px 0; border-top: 1px solid rgba(244,238,227,0.16); border-bottom: 1px solid rgba(244,238,227,0.16); } .mjr-footer-col-label { font-family: var(--sans); text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; font-weight: 500; color: var(--brass); margin-bottom: 12px; } .mjr-footer-col p { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ground); } .mjr-footer-col a { color: var(--ground); border-bottom: 1px solid rgba(244,238,227,0.3); transition: color 0.2s ease, border-color 0.2s ease; } .mjr-footer-col a:hover { color: var(--brass); border-color: var(--brass); } .mjr-footer-col .mjr-btn-solid { background: var(--ground); color: var(--ink); border-color: var(--ground); margin-top: 6px; } .mjr-footer-col .mjr-btn-solid:hover { color: var(--paper); border-color: var(--clay); } .site-footer p.footer-copy { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ground); opacity: 0.75; margin-top: 12px; } .site-footer p.footer-attribution { font-size: 12px; opacity: 0.6; margin-top: 4px; } .mjr-footer-browse { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(244,238,227,0.16); } .mjr-footer-browse-label { font-family: var(--sans); text-transform: uppercase; letter-spacing: var(--caps-ls); font-size: 11px; font-weight: 500; color: var(--brass); margin-bottom: 14px; } .mjr-footer-browse-links { display: flex; flex-wrap: wrap; gap: 10px 24px; } .mjr-footer-browse-links a { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ground); text-decoration: none; transition: color 0.15s ease; } .mjr-footer-browse-links a:hover { color: var(--brass); } .mjr-footer-giant { display: block; max-width: none; margin: 0; padding: 0; font-family: var(--serif); text-transform: uppercase; font-weight: 400; line-height: 0.78; font-size: clamp(120px, 18.2vw, 262px); white-space: nowrap; color: var(--ground); margin-left: -8px; letter-spacing: -0.02em; user-select: none; pointer-events: none; transform: translateY(0.12em); } .mjr-footer-giant em { font-style: italic; text-transform: none; color: var(--clay-on-ink); } /* ---------- RESPONSIVE ---------- */ /* Fix 1 (2026-09-26): the category nav stays ONE row at every width >= 1024 with all 8 links. Tightened gap + letter-spacing first (above); below 1440 the 1120 sheet needs 11px type; at 1024-1279 the 896 sheet cannot hold 8 links plus the 190px compact-wordmark slot at >= 10px, so there the slot goes and the stuck bar shows links only (the full wordmark is in the header just above). */ @media (max-width: 1439px) { .nav-btn { font-size: 11px; letter-spacing: 0.16em; } .mjr-nav-scroll { gap: 6px 12px; } } @media (max-width: 1279px) { :root { --nav-brand-slot: 24px; } .mjr-nav-brand { display: none; } .nav-btn { font-size: 10.5px; letter-spacing: 0.14em; } } @media (max-width: 1023px) { .mjr-sheet { max-width: calc(100% - 64px); margin-top: 40px; } .mjr-line-indent { padding-left: clamp(0px, min(7.2vw, calc(19.9vw - 133px)), 104px); } .mjr-size-head, .mjr-size-grid { grid-column: 1 / -1; } .mjr-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mjr-collection-name { font-size: 56px; } } @media (max-width: 767px) { .mjr-sheet { max-width: calc(100% - 32px); margin-top: 24px; } .mjr-line-indent { padding-left: clamp(0px, min(7.2vw, calc(19.9vw - 101px)), 104px); } .site-footer { margin-top: 16px; } :root { --nav-h: 60px; } :root { --nav-brand-slot: 12px; } .site-nav { justify-content: flex-start; gap: 8px; padding: 0 0 0 12px; } .mjr-nav-brand { display: none; } .mjr-nav-scroll { flex: 1 1 auto; min-width: 0; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 24px 8px 4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); } .mjr-nav-scroll::-webkit-scrollbar { display: none; } .nav-btn { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 10.5px; letter-spacing: 0.18em; } .nav-btn::after { display: none; } .nav-btn.active { border-color: var(--clay); color: var(--clay); } .mjr-nav-tools { display: flex; align-items: center; gap: 8px; flex: none; padding: 0 12px 0 4px; height: 100%; background: rgba(251,248,242,0.94); } .site-nav.is-open .mjr-nav-scroll { position: absolute; left: 0; right: 0; top: 100%; flex-wrap: wrap; overflow: visible; padding: 12px 16px 16px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px -16px rgba(36,26,18,0.35); -webkit-mask-image: none; mask-image: none; } } @media (max-width: 900px) { .mjr-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mjr-featured-grid { grid-template-columns: 1fr; gap: 28px; } .mjr-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mjr-hero-after { grid-template-columns: 1fr; } .mjr-hero-actions { justify-content: flex-start; } } @media (max-width: 640px) { .mjr-topbar-inner { padding: 8px 16px; font-size: 10px; letter-spacing: 0.18em; } .header-inner { padding: 18px 16px 12px; grid-template-columns: auto 1fr auto; } .mjr-wordmark { grid-column: 1; justify-self: start; font-size: 30px; width: 190px; height: 42px; line-height: 42px; text-align: left; } .mjr-header-tools { grid-column: 3; } .search-bar { padding: 10px 16px; } .search-wrap { width: 100%; } .search-wrap input { width: 100%; } .search-wrap input:focus { width: 100%; } .mjr-plate { background-size: 520px 520px; } :root { --floor-size: 520px 520px; } .card-placeholder-label, .mjr-vitrine-placeholder-label { font-size: 18px; } .mjr-hero-inner { padding: 22px 16px 40px; } /* Descender guard (9d): at 520px the g in Magic touched line 2's cap top, so this band alone runs .94. */ .mjr-hero-title, .mjr-line, .mjr-line-inner { line-height: 0.94; } .mjr-line { height: 1.40em; } .mjr-line-inner { height: 0.94em; } .mjr-hero-title { margin-top: 30px; } .mjr-line-indent { padding-left: clamp(0px, min(7.2vw, calc(19.9vw - 69px)), 104px); } .mjr-caps-row { font-size: 10px; letter-spacing: 0.18em; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; } .mjr-caps-row span:first-child { grid-column: 1 / -1; } .mjr-topbar-inner { flex-direction: column; gap: 2px; align-items: flex-start; } .mjr-block, .mjr-featured { padding: 52px 16px 0; } .mjr-form-card { padding: 20px 16px; } .mjr-landing-section { padding: 28px 16px 20px; } .mjr-weave-strip { gap: 16px; } .mjr-size-grid { gap: 12px; } .gallery-grid { gap: 20px 16px; } .mjr-collection-row { grid-template-columns: 40px 1fr 44px; gap: 14px; padding: 16px 0; } .mjr-collection-name { font-size: 30px; } .mjr-collection-arrow { width: 44px; height: 44px; } .mjr-collection-row:hover .mjr-collection-name { transform: translateX(12px); } .gallery-section { padding: 52px 16px 32px; } .gallery-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; } :root { --frame: 0px; --frame-edge-w: 3px; } .mjr-featured-photo-inner, .mjr-vitrine-photo-inner { --frame-edge-w: 4px; } .rug-card, .mjr-featured-photo-btn, .mjr-vitrine { padding: 8px; } .mjr-booth-grid, .mjr-mario-grid { gap: 36px; } .form-row { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr; } .modal-body { padding: 1.25rem; } .site-footer { padding: 52px 16px 0; margin-top: 52px; } .mjr-footer-cols { grid-template-columns: 1fr; gap: 24px; } .mjr-footer-giant-wrap { margin: 28px -16px 0; } } @media (max-width: 400px) { .gallery-grid { grid-template-columns: 1fr; } .mjr-size-grid { gap: 10px; } .mjr-size-card { height: 128px; padding: 14px 16px; } .mjr-size-label { font-size: 32px; } }