/* LHARI Site — the one stylesheet (2026-09 rebuild). Values from the "LHARI 桌面端改版" design (design/lhari.css). Sections: tokens · base · type & controls · header · panels · overlays · card · shop · product · reviews · home · lines · content · help & legal · woo pages · footer · motion · responsive · island (phones & touch tablets) */ /* ============================================================== fonts */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400 500; font-display: swap; src: url(../fonts/cormorant-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400 500; font-display: swap; src: url(../fonts/cormorant-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/cormorant-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/cormorant-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Serif Tibetan'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-serif-tibetan-tibetan.woff2) format('woff2'); unicode-range: U+0F00-0FFF, U+200C-200D, U+25CC, U+3008-300B; } /* The Tibetan words the site uses (26 characters, 24 KB instead of 159 KB; regenerate with tools/build-tibetan-subset.sh after adding new Tibetan text — any other character still gets the full font above). */ @font-face { font-family: 'Noto Serif Tibetan'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-serif-tibetan-used.woff2) format('woff2'); unicode-range: U+0F0B,U+0F41,U+0F42,U+0F44,U+0F46,U+0F51,U+0F53,U+0F54,U+0F55,U+0F56,U+0F58,U+0F5A,U+0F60,U+0F61,U+0F62,U+0F63,U+0F64,U+0F66,U+0F72,U+0F74,U+0F7A,U+0F7C,U+0FA1,U+0FB1,U+0FB2,U+0FB7; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* (Served from lhari.net since 2026-10-01 instead of Google Fonts: no render-blocking request to another server, no * extra connections, and the text no longer re-flows when a slow font arrives. SIL Open Font License.) */ /* ============================================================== tokens */ /* Georgia scaled to Cormorant Garamond's width (measured 2026-09-30: upright 88.8%, italic 79.2%), so headlines keep * their line breaks when the web font arrives (and Arial for Manrope) and the page does not jump (was CLS 0.07 on phones). */ @font-face { font-family: 'LHARI Serif Fallback'; src: local('Georgia'), local('Georgia Regular'); font-style: normal; size-adjust: 87.9%; } @font-face { font-family: 'LHARI Serif Fallback'; src: local('Georgia Italic'), local('Georgia-Italic'); font-style: italic; size-adjust: 78%; } /* re-measured 2026-10-01 on the site's headings: upright 86.9–88.7%, italic 77.5–78.7% */ @font-face { font-family: 'LHARI Sans Fallback'; src: local('Arial'), local('ArialMT'), local('Arial MT'), local('Helvetica'); size-adjust: 103.5%; } /* Manrope is ~3.5% wider than Arial in running text */ :root { --ink: #1A1814; --ink-2: #2A2722; --ink-3: #3D3830; --mute: #5E574D; --ash: #6B6358; --bg: #F5F0E8; --ivory: #FBF7EE; --parch: #ECE3D1; --paper: #E6DBC4; --gold: #8E6F3D; --gold-t: #7A5E30; --gold-l: #C9AE7C; --night: #171512; --night-2: #211E1A; --rule: rgba(26, 24, 20, .12); --rule-2: rgba(26, 24, 20, .2); --silk: cubic-bezier(.2, .6, .2, 1); --spring: cubic-bezier(.34, 1.3, .64, 1); --out: cubic-bezier(.16, 1, .3, 1); --serif: 'Cormorant Garamond', 'LHARI Serif Fallback', Georgia, serif; --sans: Manrope, 'LHARI Sans Fallback', system-ui, -apple-system, sans-serif; --bo: 'Noto Serif Tibetan', 'Kailasa', 'Microsoft Himalaya', serif; --gut: clamp(20px, 4.45vw, 64px); --hdr: 110px; --bar: 76px; --ann: 34px; --top: var(--bar); /* where sticky things sit while the header shows */ } /* ============================================================== base */ html { scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; } body.lx { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } :where(body.lx) *, :where(body.lx) *::before, :where(body.lx) *::after { box-sizing: border-box; } :where(body.lx) a { color: inherit; text-decoration: none; } :where(body.lx) img { max-width: 100%; } :where(body.lx) button { font: inherit; color: inherit; } body.lx :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* Text fields show they are active with their own line or border; the ring (keyboard only) stays for buttons and links. * Browsers count every tap into a field as focus-visible, which drew a gold box around the search line and the * other fields (owner, 2026-10-01: remove). */ body.lx :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus-visible { outline: none; } .lx-faq-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); } body.lx [hidden] { display: none !important; } body.lx .lx-main { display: block; padding-top: var(--hdr); min-height: 60vh; } body.lx.lx-t-home .lx-main, body.lx.lx-t-line .lx-main, body.lx.lx-t-404 .lx-main { padding-top: 0; } .lx-wrap { width: 100%; max-width: 1640px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); } .screen-reader-text, .skip-link { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } html { scrollbar-gutter: stable; } .lx-skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--ivory) !important; font-size: 13px; transition: top .2s; } .lx-skip:focus { top: 12px; } .lx-bo, [lang="bo"] { font-family: var(--bo); letter-spacing: 0; } .lx-center { display: flex; justify-content: center; } .lx-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; } .lx-narrow { max-width: 520px; } .lx-light { color: #E9E0CC !important; } .lx-gold { color: var(--gold-l) !important; } /* ============================================================== type & controls */ .lx-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); line-height: 1.4; } .lx-k { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .lx-h-xxl { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 8.2vw, 118px); line-height: .95; letter-spacing: -.012em; margin: 0; } .lx-h-xl { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 6.7vw, 96px); line-height: .98; letter-spacing: -.012em; margin: 0; } .lx-h-l { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.45vw, 64px); line-height: 1.02; letter-spacing: -.01em; margin: 0; } .lx-h-m { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.05vw, 44px); line-height: 1.06; margin: 0; } .lx-h-xl em, .lx-h-l em, .lx-h-m em, .lx-hero-h .lx-it { font-style: italic; } .lx-lead { font-size: 18px; line-height: 1.7; color: var(--ink-3); margin: 0; } .lx-body { font-size: 16px; line-height: 1.75; color: var(--ink-3); margin: 0; } .lx-small { font-size: 14px; line-height: 1.6; color: var(--mute); margin: 0; } .lx-count { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--ash); vertical-align: top; white-space: nowrap; } .lx-crumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ash); margin-bottom: 18px; } .lx-crumb a:hover { color: var(--ink); } .lx-crumb [aria-current] { color: var(--ink); } .lx-btn { height: 54px; padding: 0 30px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background-color .24s var(--silk), color .24s var(--silk), transform .24s var(--silk), box-shadow .24s var(--silk); } .lx-btn:active { transform: scale(.97); } .lx-btn .lx-i { transition: transform .4s var(--silk); } .lx-btn:hover .lx-i { transform: translateX(4px); } .lx-btn-d { background: var(--ink); color: var(--ivory) !important; } .lx-btn-d:hover { background: #34302A; box-shadow: 0 10px 24px -12px rgba(26, 24, 20, .6); } .lx-btn-l { background: var(--ivory); color: var(--ink) !important; } .lx-btn-l:hover { background: #fff; } .lx-btn-o { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); } .lx-btn-o:hover { box-shadow: inset 0 0 0 1px var(--ink); } .lx-btn-glass { background: rgba(251, 247, 238, .14); color: var(--ivory) !important; box-shadow: inset 0 0 0 1px rgba(251, 247, 238, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lx-btn-glass:hover { background: rgba(251, 247, 238, .24); } .lx-full { width: 100%; } .lx-lnk { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding-bottom: 6px; cursor: pointer; } .lx-lnk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--silk); } .lx-lnk:hover::after { transform: scaleX(.35); } .lx-lnk .lx-i { transition: transform .4s var(--silk); } .lx-lnk:hover .lx-i { transform: translateX(5px); } .lx-tl { font-size: 13px; color: var(--ash); text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(26, 24, 20, .25) !important; background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s; } .lx-tl:hover { color: var(--ink); } .lx-ib { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; transition: background-color .24s var(--silk); padding: 0; } .lx-ib:hover { background: rgba(26, 24, 20, .06); } .lx-chip { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background-color .24s var(--silk), color .24s var(--silk), box-shadow .24s var(--silk); } .lx-chip:hover { box-shadow: inset 0 0 0 1px var(--ink); } .lx-chip.is-on { background: var(--ink); color: var(--ivory); box-shadow: none; } .lx-chip > span:not([data-line-name]):not([data-sort-name]) { font-weight: 500; opacity: .55; } .lx-field { height: 50px; width: 100%; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule-2); font-family: var(--sans); font-size: 15px; color: var(--ink); outline: none; transition: box-shadow .2s; } .lx-field:focus { box-shadow: inset 0 0 0 1.5px var(--ink); } .lx-label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); } .lx-err { margin: 0; font-size: 13px; color: #8A2E1E; } .lx-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--mute); cursor: pointer; } .lx-agree input { margin-top: 2px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; } .lx-pm { position: relative; width: 14px; height: 14px; flex: none; } .lx-pm::before, .lx-pm::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: currentColor; transition: transform .45s var(--spring); } .lx-pm::after { transform: rotate(90deg); } [open] > summary .lx-pm::after, .is-on > .lx-mk-row .lx-pm::after { transform: rotate(0); } .lx-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; margin-bottom: 44px; } .lx-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 16, 13, 0) 35%, rgba(18, 16, 13, .8) 100%); pointer-events: none; } .lx-i { flex: none; display: block; } /* ============================================================== header */ .lx-hdr { position: fixed; left: 0; right: 0; top: 0; z-index: 60; transition: transform .55s var(--silk); color: var(--ink); } .admin-bar .lx-hdr { top: 32px; } .lx-hdr.is-hid { transform: translateY(-120%); } .lx-ann { height: var(--ann); overflow: hidden; background: var(--ink); color: #E9E0CC; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 var(--gut); font-size: 12px; letter-spacing: .06em; white-space: nowrap; transition: height .45s var(--silk), opacity .3s; } .lx-ann-dot { color: var(--gold); } .lx-hdr.is-cmp .lx-ann { height: 0; opacity: 0; } .lx-bar { position: relative; height: var(--bar); padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; background: rgba(245, 240, 232, .92); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--rule); transition: background-color .45s var(--silk), color .45s var(--silk), border-color .45s, height .45s var(--silk); } .lx-hdr.is-cmp .lx-bar { height: 68px; } .lx-hdr.is-top:not(.is-open) .lx-bar { background: transparent; color: var(--ivory); border-color: rgba(251, 247, 238, .18); -webkit-backdrop-filter: none; backdrop-filter: none; } .lx-hdr.is-top:not(.is-open) .lx-ann { background: rgba(23, 21, 18, .35); } .lx-hdr.is-top:not(.is-open) .lx-ib:hover, .lx-hdr.is-top:not(.is-open) .lx-bagbtn:hover { background: rgba(251, 247, 238, .14); } .lx-nav { display: flex; gap: clamp(18px, 2.1vw, 30px); align-items: center; } .lx-nl { position: relative; height: var(--bar); display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: height .45s var(--silk); } .lx-hdr.is-cmp .lx-nl { height: 68px; } .lx-nl::after { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--silk); } .lx-nl[data-menu]::after { right: 18px; } .lx-nl:hover::after, .lx-nl.is-on::after, .lx-nl[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; } .lx-nl .lx-i { transition: transform .35s var(--silk); } .lx-nl[aria-expanded="true"] .lx-i { transform: rotate(180deg); } .lx-logo { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: .36em; padding-left: .36em; line-height: 1; } .lx-tools { display: flex; gap: 4px; justify-content: flex-end; align-items: center; } .lx-bagbtn { height: 44px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: transparent; display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .12em; transition: background-color .24s; } .lx-bagbtn:hover { background: rgba(26, 24, 20, .06); } .lx-cnt { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--ivory); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; } .lx-hdr.is-top:not(.is-open) .lx-cnt { background: var(--ivory); color: var(--ink); } .lx-acct { position: relative; } /* ============================================================== panels (mega menus, search) */ .lx-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); color: var(--ink); clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--silk); box-shadow: 0 30px 60px -30px rgba(26, 24, 20, .35); max-height: calc(100vh - 110px); overflow: auto; } .lx-panel.is-open { clip-path: inset(0 0 -80px 0); } .lx-panel-in { max-width: 1640px; margin: 0 auto; padding: 44px var(--gut) 56px; } .lx-mi { opacity: 0; transform: translateY(12px); transition: opacity .35s var(--silk), transform .55s var(--silk); transition-delay: var(--d, 0s); } .lx-panel.is-open .lx-mi { opacity: 1; transform: none; } .lx-mm-shop { display: grid; grid-template-columns: 240px 260px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.9vw, 56px); } .lx-mm-shop > .lx-mi:nth-child(1) { --d: .05s; } .lx-mm-shop > .lx-mi:nth-child(2) { --d: .1s; } .lx-mm-shop > .lx-mi:nth-child(3) { --d: .15s; } .lx-mm-shop > .lx-mi:nth-child(4) { --d: .2s; } .lx-mm-shop .lx-eyebrow { margin-bottom: 14px; } .lx-mm-shop > div { display: flex; flex-direction: column; } .lx-ml { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 15px; color: var(--ink-3); transition: color .2s, padding .35s var(--silk); } .lx-ml:hover { color: var(--ink); padding-left: 6px; } .lx-ml > span { font-size: 12px; color: var(--ash); } .lx-ml > .lx-bo { font-size: 13px; color: var(--gold); } .lx-tile { position: relative; display: block; overflow: hidden; background: var(--ink-2); color: var(--ivory); border-radius: 16px; height: 300px; } .lx-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--silk); } .lx-tile:hover img { transform: scale(1.05); } .lx-tile-t { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .lx-tile-t .lx-k { color: #E3D7BD; } .lx-tile-n { font-family: var(--serif); font-size: 28px; line-height: 1.05; } .lx-mm-col { display: flex; flex-direction: column; gap: 26px; padding-top: 40px; padding-bottom: 48px; } .lx-mm-head { display: flex; justify-content: space-between; align-items: flex-end; } .lx-mm-lines { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .lx-mm-lines .lx-tile { height: 260px; border-radius: 14px; } .lx-mm-lines .lx-tile-t { left: 18px; right: 18px; bottom: 18px; font-size: 12px; } .lx-mm-lines .lx-bo { font-size: 14px; color: #E3D7BD; } .lx-mm-lines .lx-tile-n { font-size: 25px; } .lx-search { display: flex; flex-direction: column; gap: 26px; padding-top: 36px; padding-bottom: 48px; } .lx-search-row { display: flex; gap: 20px; align-items: center; } .lx-sfield { flex: 1; min-width: 0; height: 64px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font-family: var(--serif); font-size: clamp(28px, 2.8vw, 40px); color: var(--ink); outline: none; padding: 0; -webkit-appearance: none; appearance: none; } .lx-sfield::placeholder { color: #9A907F; } .lx-sfield::-webkit-search-cancel-button { display: none; } .lx-chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .lx-chips .lx-k { color: var(--ash); margin-right: 6px; } .lx-sresults { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 16px; } .lx-sr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; } .lx-sr-img { display: block; width: 96px; height: 120px; border-radius: 12px; overflow: hidden; background: var(--ink-2); } .lx-sr-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-sr-t { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .lx-sr-t .lx-k { color: var(--ash); letter-spacing: .16em; } .lx-sr-n { font-family: var(--serif); font-size: 20px; line-height: 1.1; transition: color .25s; } .lx-sr-n:hover { color: var(--gold-t); } .lx-sr-note { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-radius: 16px; background: var(--parch); font-size: 14px; color: var(--ink-3); } .lx-veil { position: fixed; inset: 0; z-index: 55; background: rgba(23, 21, 18, .32); opacity: 0; transition: opacity .45s var(--silk); } .lx-veil.is-on { opacity: 1; } /* account popover */ .lx-pop { position: absolute; top: calc(100% + 10px); right: -120px; width: 360px; padding: 28px; background: var(--ivory); border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(26, 24, 20, .45), 0 0 0 1px var(--rule); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .3s var(--silk), transform .45s var(--spring); color: var(--ink); z-index: 3; } .lx-pop.is-open { opacity: 1; transform: none; } .lx-pop > div, .lx-pop { display: flex; flex-direction: column; gap: 16px; } .lx-pop[hidden] { display: none; } .lx-pop-t { font-family: var(--serif); font-size: 32px; line-height: 1; } .lx-pop-links { display: flex; flex-direction: column; border-top: 1px solid var(--rule); } .lx-pop-links a, .lx-pop-links button { padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; font-size: 15px; cursor: pointer; } .lx-pop-links a:hover, .lx-pop-links button:hover { color: var(--gold-t); } .lx-pop-foot { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--rule); } .lx-code { letter-spacing: .4em; text-align: center; font-size: 18px; } .lx-center.lx-tl, .lx-tl.lx-center { align-self: center; } .lx-ts:empty { display: none; } /* ============================================================== overlays: toast, quick view, drawer, chat */ .lx-toast { position: fixed; right: var(--gut); top: 92px; z-index: 80; width: 340px; padding: 14px; border-radius: 20px; background: var(--night); color: var(--ivory); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .35s var(--silk), transform .55s var(--spring); } .lx-toast.is-on { opacity: 1; transform: none; } .lx-toast img { width: 56px; height: 70px; border-radius: 10px; object-fit: cover; display: block; background: var(--night-2); } .lx-toast-k { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-l); } .lx-toast-n { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.15; margin: 4px 0 6px; } .lx-toast-row { display: flex; gap: 16px; align-items: center; font-size: 12px; color: #BDB29D; } .lx-toast-row button { border: 0; background: none; padding: 0; color: var(--ivory); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .lx-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(23, 21, 18, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .5s var(--silk); } .lx-scrim.is-on { opacity: 1; } .lx-modal { position: fixed; left: 50%; top: 50%; z-index: 95; width: min(1080px, calc(100vw - 2 * var(--gut))); height: min(660px, calc(100vh - 80px)); border-radius: 28px; overflow: hidden; background: var(--bg); display: grid; grid-template-columns: 55.5% minmax(0, 1fr); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, calc(-50% + 24px)) scale(.97); transition: opacity .4s var(--silk), transform .6s var(--spring); } .lx-modal.is-on { opacity: 1; transform: translate(-50%, -50%); } .lx-q-media { position: relative; background: var(--ink-2); overflow: hidden; } .lx-q-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--silk), transform 1.2s var(--silk); } .lx-q-img.is-on { opacity: 1; transform: none; } .lx-q-thumbs { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 10px; } .lx-q-thumb { width: 64px; height: 80px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; opacity: .55; box-shadow: 0 0 0 1px rgba(251, 247, 238, .5); transition: opacity .25s, box-shadow .25s; background: var(--ink-2); } .lx-q-thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--ivory); } .lx-q-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-q-t { position: relative; padding: 56px 56px 48px; display: flex; flex-direction: column; gap: 18px; overflow: auto; } .lx-q-x { position: absolute; right: 20px; top: 20px; } .lx-q-line { display: flex; gap: 12px; align-items: baseline; } .lx-q-line .lx-bo { font-size: 15px; color: var(--gold-t); } .lx-q-n { font-family: var(--serif); font-size: clamp(34px, 3.2vw, 46px); line-height: 1.02; } .lx-q-p { font-size: 20px; font-weight: 500; } .lx-q-p small, .lx-card-p small { font-size: 11px; color: var(--ash); letter-spacing: .06em; } .lx-q-tag { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-3); } .lx-q-dl { margin: 4px 0 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); row-gap: 10px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 14px; } .lx-q-dl dt { color: var(--ash); } .lx-q-dl dd { margin: 0; } .lx-q-buy { display: flex; gap: 10px; margin-top: auto; } .lx-q-buy .lx-btn { flex: 1; } .lx-wish-lg { width: 54px !important; height: 54px !important; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, .25) !important; background: transparent !important; opacity: 1 !important; transform: none !important; position: static !important; flex: none; } .lx-drawer { position: fixed; right: 0; top: 0; bottom: 0; z-index: 96; width: min(460px, 100vw); background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .6s var(--silk); box-shadow: -30px 0 60px -30px rgba(26, 24, 20, .45); } .lx-drawer.is-on { transform: none; } .lx-dr-head { padding: 20px 36px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); } .lx-tabs { position: relative; display: flex; gap: 28px; } .lx-tab { position: relative; height: 64px; border: 0; background: none; padding: 0; font-family: var(--serif); font-size: 28px; color: #8A8073; cursor: pointer; transition: color .25s; } .lx-tab.is-on { color: var(--ink); } .lx-tab sup { font-family: var(--sans); font-size: 12px; font-weight: 700; margin-left: 4px; } .lx-tabline { position: absolute; bottom: -1px; left: 0; height: 2px; width: 60px; background: var(--ink); transition: left .5s var(--spring), width .5s var(--spring); } .lx-dr-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } .lx-dr-ship { padding: 22px 36px 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-3); } .lx-prog { height: 3px; border-radius: 3px; background: rgba(26, 24, 20, .1); overflow: hidden; } .lx-prog i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 3px; transition: width .8s var(--silk); } .lx-dr-list { flex: 1; overflow-y: auto; padding: 8px 36px; overscroll-behavior: contain; } .lx-li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); } .lx-li.is-new { animation: lxLi .55s var(--silk) both; } .lx-li.is-busy { opacity: .55; } @keyframes lxLi { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .lx-li-img { display: block; width: 84px; height: 105px; border-radius: 10px; overflow: hidden; background: var(--ink-2); } .lx-li-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-li-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .lx-li-t .lx-k { color: var(--ash); letter-spacing: .16em; } .lx-li-n { font-family: var(--serif); font-size: 20px; line-height: 1.12; } .lx-li-row { display: flex; gap: 16px; align-items: center; margin-top: 6px; } .lx-li-p { font-size: 15px; font-weight: 600; } .lx-step { height: 36px; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); } .lx-step button { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0; } .lx-step button:hover:not(:disabled) { background: rgba(26, 24, 20, .06); } .lx-step button:disabled { opacity: .3; cursor: default; } .lx-step span { min-width: 22px; text-align: center; font-size: 14px; font-weight: 600; } .lx-dr-foot { padding: 22px 36px 28px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; background: var(--ivory); } .lx-dr-sub { display: flex; justify-content: space-between; align-items: baseline; } .lx-dr-sub b { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; } .lx-dr-sub span { font-family: var(--serif); font-size: 30px; } .lx-dr-sub small { font-family: var(--sans); font-size: 12px; color: var(--ash); } .lx-dr-links { display: flex; justify-content: space-between; gap: 12px; } .lx-dr-empty { padding: 90px 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .lx-dr-empty b { font-family: var(--serif); font-weight: 400; font-size: 32px; } .lx-dr-err { margin: 0 36px 12px; padding: 12px 16px; border-radius: 12px; background: #F3DED6; color: #6E2A1B; font-size: 13px; } /* Studio chat ball: a ball → hover pill → click blooms into the studio card. */ /* concierge (concierge.php): 「● Chat」 in the header, its popover (resting → talking), the product question row, * the hand-over sheet to Tawk, the fly-home ghost, reply notes, the nudge */ .lx-ask-wrap { position: relative; } .lx-ask { position: relative; height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: transparent; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: inherit; transition: background-color .24s var(--silk); } .lx-ask:hover, .lx-ask.is-on { background: rgba(26, 24, 20, .06); } .lx-hdr.is-top:not(.is-open) .lx-ask:hover, .lx-hdr.is-top:not(.is-open) .lx-ask.is-on { background: rgba(251, 247, 238, .14); } .lx-ask-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--ivory); font-size: 10px; font-weight: 700; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; animation: lxBadge .5s var(--spring) both; } @keyframes lxBadge { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .lx-ask-dot { width: 6px; height: 6px; border-radius: 50%; background: #A89B85; flex: none; } .lx-ask-dot.is-online { background: #4F7A5A; animation: lxAskLive 3.2s ease-in-out infinite; } .lx-hdr.is-top:not(.is-open) .lx-ask > .lx-ask-dot.is-online, .lx-ask-st .lx-ask-dot.is-online, .lx-nudge .lx-ask-dot.is-online, .lx-btn .lx-ask-dot.is-online, .lx-reply .lx-ask-dot.is-online { background: #8FC39A; } @keyframes lxAskLive { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .lx-ask.is-ping > .lx-ask-dot { animation: lxAskPing 1.2s var(--out); } @keyframes lxAskPing { 0% { transform: scale(2.2); box-shadow: 0 0 0 0 rgba(79, 122, 90, .55); } 100% { transform: none; box-shadow: 0 0 0 14px rgba(79, 122, 90, 0); } } /* popover: resting */ .lx-pop.lx-ask-pop { right: -196px; width: 380px; padding: 0; gap: 0; overflow: hidden; max-height: calc(100vh - 120px); transform-origin: top center; } .lx-ask-pop > div { gap: 0; } .lx-ask-pop > * { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--silk), transform .55s var(--out); } .lx-ask-pop.is-open > * { opacity: 1; transform: none; } .lx-ask-pop.is-open > :nth-child(2) { transition-delay: .05s; } .lx-ask-pop.is-open > :nth-child(3) { transition-delay: .09s; } .lx-ask-pop.is-open > :nth-child(4) { transition-delay: .13s; } .lx-ask-media { position: relative; height: 128px; flex: none; background: var(--night); overflow: hidden; transition: height .55s var(--out); } .lx-ask-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lx-ask-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 16, 13, .08) 25%, rgba(18, 16, 13, .72)); transition: background-color .5s; } .lx-ask-st { position: absolute; left: 24px; bottom: 14px; display: flex; align-items: center; gap: 9px; font-size: 12px; color: #F2EADA; letter-spacing: .03em; } .lx-ib.lx-ask-x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; color: var(--ivory); background: rgba(23, 21, 18, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: top .55s var(--out), background-color .2s; } .lx-ib.lx-ask-x:hover { background: rgba(23, 21, 18, .55); } .lx-ask-head { flex: none; padding: 20px 26px 0; transition: padding .55s var(--out); } .lx-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--out), opacity .3s var(--silk); } .lx-fold > * { min-height: 0; overflow: hidden; } .lx-ask-intro { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; } .lx-ask-pop .lx-pop-t { font-size: 30px; line-height: 1.04; } .lx-ask-pop .lx-pop-t em { font-style: italic; } .lx-ask-ctx { align-self: flex-start; max-width: 100%; height: 30px; padding: 0 12px 0 5px; border-radius: 999px; background: var(--parch); display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); } .lx-ask-ctx[hidden] { display: none; } .lx-ask-ctx img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; } .lx-ask-ctx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lx-btn.lx-ask-live { height: 50px; gap: 10px; transition: height .55s var(--out), background-color .25s var(--silk); } .lx-btn.lx-ask-live .lx-i { margin-left: auto; } .lx-btn.lx-ask-live > span:nth-child(2) { margin-left: 2px; } .lx-btn.lx-ask-live { justify-content: flex-start; padding: 0 22px; } .lx-ask-note { display: block; padding-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ash); } .lx-ask-pop .lx-ask-thread { display: none; } .lx-ask-dock { flex: none; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 16px 26px 18px; border-top: 1px solid var(--rule); background: var(--ivory); } .lx-ask-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); } .lx-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; } .lx-chip.lx-chip-s { height: 32px; padding: 0 13px; font-size: 12.5px; flex: none; transition: box-shadow .2s, opacity .3s, background-color .2s; } .lx-chip.lx-chip-s:active { transform: scale(.96); } .lx-chip.is-asked { opacity: .5; } [aria-busy="true"] .lx-chip { pointer-events: none; } .lx-chip.lx-chip-own { box-shadow: none; padding: 0 6px; color: var(--ash); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(26, 24, 20, .3); } .lx-chip.lx-chip-own:hover { color: var(--ink); } .lx-ask-form { display: flex; gap: 8px; align-items: center; } .lx-ask-form[hidden] { display: none; } .lx-ask-form .lx-field { flex: 1; min-width: 0; height: 44px; font-size: 14px; } .lx-ib.lx-ask-send { flex: none; background: var(--ink); color: var(--ivory); transition: background-color .2s, transform .2s; } .lx-ib.lx-ask-send:hover { background: var(--ink-2); } .lx-ib.lx-ask-send:active { transform: scale(.92); } .lx-ask-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ash); } /* popover: talking (after the first question) */ .lx-pop.lx-ask-pop.is-talking { height: min(600px, calc(100vh - 120px)); } .is-talking .lx-ask-media { height: 58px; } .is-talking .lx-ask-shade { background-color: rgba(18, 16, 13, .35); } .is-talking .lx-ib.lx-ask-x { top: 12px; } .is-talking .lx-ask-head { padding-top: 14px; } .is-talking .lx-fold { grid-template-rows: 0fr; opacity: 0; } .is-talking .lx-btn.lx-ask-live { height: 42px; } .lx-ask-pop.is-talking .lx-ask-thread { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 26px 14px; scrollbar-width: thin; } .is-talking .lx-ask-dock { margin-top: 0; padding-top: 12px; } .lx-ask-pop.is-talking .lx-ask-thread { -webkit-mask-image: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 8px), transparent); mask-image: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 8px), transparent); } .is-talking .lx-ask-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -26px; padding: 0 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 36px), transparent); } .is-talking .lx-ask-chips::-webkit-scrollbar { display: none; } /* messages (popover and product row) */ .lx-ask-thread { display: flex; flex-direction: column; gap: 8px; } .lx-ask-thread:empty { display: none !important; } .lx-q-row { display: flex; animation: lxQIn .5s var(--out) both; } .lx-q-row.is-me { justify-content: flex-end; } .lx-q-b { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; } .lx-q-me { background: var(--ink); color: var(--ivory); border-bottom-right-radius: 5px; transform-origin: right bottom; } .lx-q-them { background: var(--parch); color: var(--ink-3); border-bottom-left-radius: 5px; transform-origin: left bottom; } .is-answer .lx-q-them { animation: lxQGrow .55s var(--out) both; } .lx-q-by { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); } .lx-q-them .lx-tl { color: var(--ink); } .lx-q-more { display: block; margin-top: 7px; padding: 0; border: 0; background: none; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(26, 24, 20, .3); cursor: pointer; } .lx-q-more:hover { text-decoration-color: var(--ink); } .lx-q-more.is-strong { display: inline-flex; align-items: center; height: 34px; margin-top: 10px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--ivory); text-decoration: none; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; } .lx-q-dots { display: inline-flex; gap: 4px; padding: 14px; } .lx-q-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ash); animation: lxQDot 1.2s infinite; } .lx-q-dots i:nth-child(2) { animation-delay: .2s; } .lx-q-dots i:nth-child(3) { animation-delay: .4s; } @keyframes lxQIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes lxQGrow { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } } @keyframes lxQDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } /* product question row */ .lx-qa { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule-2); } .lx-qa + .lx-accs { margin-top: 2px; } .lx-qa-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; } .lx-qa-t { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .lx-qa-st { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ash); } .lx-qa .lx-q-b { max-width: min(460px, 92%); } .lx-qa-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 20px; font-size: 13px; color: var(--ash); } .lx-qa-person { height: 38px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--ink); display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background-color .25s var(--silk), color .25s var(--silk); } .lx-qa-person:hover { background: var(--ink); color: var(--ivory); } .lx-qa-person:hover .lx-ask-dot.is-online { background: #8FC39A; } .lx-qa-mail a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(26, 24, 20, .3); } .lx-care-ask { margin-top: 10px; } [data-chat-open].is-wait { cursor: progress; } .lx-btn.is-wait .lx-i { animation: lxNudgeX 1s var(--silk) infinite; } @keyframes lxNudgeX { 50% { transform: translateX(4px); } } /* hand-over sheet: grows from the card to where Tawk's window opens, then steps aside */ .lx-live { position: fixed; z-index: 1000010; border-radius: 22px; background: var(--bg); color: var(--ink); overflow: hidden; transform-origin: 0 0; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55), 0 0 0 1px var(--rule); font-family: var(--sans); transition: opacity .38s var(--silk), transform .38s var(--silk); } .lx-live.is-out { opacity: 0; transform: scale(.985); pointer-events: none; } .lx-live-in { height: 100%; display: flex; flex-direction: column; opacity: 0; transition: opacity .35s var(--silk); } .lx-live.is-in .lx-live-in { opacity: 1; } .lx-live-media { position: relative; height: 120px; flex: none; background: var(--night); overflow: hidden; } .lx-live-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: lxKb 14s var(--silk) both; } .lx-live-body { flex: 1; min-height: 0; padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 14px; } .lx-live-t { font-family: var(--serif); font-size: 30px; line-height: 1.08; } .lx-live-t em { font-style: italic; } .lx-live-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mute); } .lx-live-q { padding: 12px 14px; border-radius: 14px; background: var(--parch); } .lx-live-q span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); } .lx-live-q p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); } .lx-live-bar { position: relative; display: block; margin-top: auto; height: 2px; border-radius: 2px; background: var(--rule); overflow: hidden; } .lx-live-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; background: var(--ink); animation: lxLiveBar 1.3s var(--silk) infinite; } @keyframes lxLiveBar { from { transform: translateX(-100%); } to { transform: translateX(260%); } } .lx-live [data-live-mail] { margin-top: auto; } .lx-ib.lx-live-x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; color: var(--ivory); background: rgba(23, 21, 18, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lx-live.is-pill { left: 50%; right: auto; top: auto; bottom: calc(108px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 32px)); height: auto; border-radius: 22px; background: var(--night); color: var(--ivory); transform: translateX(-50%); transform-origin: 50% 100%; } .lx-live.is-pill.is-out { transform: translateX(-50%) translateY(12px); } .is-pill .lx-live-media, .is-pill .lx-live-p, .is-pill .lx-live-q { display: none; } .is-pill .lx-live-body { padding: 16px 56px 16px 22px; gap: 10px; } .is-pill .lx-live-t { font-family: var(--sans); font-size: 14px; font-weight: 600; } .is-pill .lx-live-t em { font-style: normal; } .is-pill .lx-live-bar { background: rgba(251, 247, 238, .16); } .is-pill .lx-live-bar i { background: var(--ivory); } .is-pill.is-fail .lx-live-p { display: block; color: #BDB29D; font-size: 13px; } .is-pill .lx-ib.lx-live-x { top: 50%; margin-top: -17px; background: rgba(251, 247, 238, .1); } .lx-live-ghost { position: fixed; z-index: 1000010; background: var(--night); pointer-events: none; transform-origin: 50% 50%; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5); } /* a reply while the chat window is closed */ .lx-reply { position: fixed; right: var(--gut); top: calc(var(--top, 76px) + 16px); z-index: 1000010; width: 340px; padding: 14px 52px 14px 18px; border-radius: 18px; background: var(--night); color: var(--ivory); display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--silk), transform .5s var(--spring); font-family: var(--sans); } .lx-reply.is-on { opacity: 1; transform: none; } .lx-reply .lx-ask-dot { width: 8px; height: 8px; } .lx-reply-t b { display: block; font-size: 14px; font-weight: 600; } .lx-reply-t small { display: block; margin-top: 1px; font-size: 12px; color: #BDB29D; } .lx-reply .lx-ib { position: absolute; right: 8px; top: 50%; margin-top: -18px; width: 36px; height: 36px; color: #BDB29D; } .lx-reply .lx-ib:hover { background: rgba(251, 247, 238, .08); color: var(--ivory); } @media (max-width: 767px), (max-width: 1366px) and (min-height: 600px) and (hover: none) and (pointer: coarse) { .lx-reply { left: 50%; right: auto; top: auto; bottom: calc(108px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 32px)); transform: translate(-50%, 12px); } .lx-reply.is-on { transform: translate(-50%, 0); } } .lx-nudge .lx-toast-k { gap: 8px; } .lx-nudge .lx-toast-row button.is-quiet { color: #8E8474; text-decoration: none; } .lx-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #8E8474; box-shadow: 0 0 0 3px rgba(142, 132, 116, .2); flex: none; } .lx-chat-dot.is-online { background: #6FA27B; box-shadow: 0 0 0 3px rgba(111, 162, 123, .22); } /* Tawk's own bubble stays hidden on wide screens; LHARI's launcher opens its window. */ @media (min-width: 768px) and (hover: hover), (min-width: 1367px) { body.lx #min-widget, body.lx #message-preview { display: none !important; } } /* ============================================================== card */ .lx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px clamp(16px, 2.3vw, 36px); } .lx-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .lx-card-media { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #26231F; } .lx-card-link { position: absolute; inset: 0; display: block; } .lx-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .lx-card-main { transition: transform 1.1s var(--silk), opacity .6s var(--silk); } .lx-card-alt { opacity: 0; transform: scale(1.04); transition: opacity .7s var(--silk), transform 1.1s var(--silk); } .lx-card:hover .lx-card-alt, .lx-card:focus-within .lx-card-alt { opacity: 1; transform: none; } .lx-card:hover .lx-card-main { transform: scale(1.03); } .lx-wish { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(245, 240, 232, .94); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .3s var(--silk), transform .45s var(--spring), background-color .2s; padding: 0; z-index: 2; } .lx-card:hover .lx-wish, .lx-card:focus-within .lx-wish, .lx-wish[aria-pressed="true"] { opacity: 1; transform: none; } .lx-wish[aria-pressed="true"] svg { fill: currentColor; } .lx-wish.is-pop svg { animation: lxHeart .6s var(--spring); } @keyframes lxHeart { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .lx-card-acts { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; opacity: 0; transform: translateY(14px); transition: opacity .35s var(--silk), transform .5s var(--silk); z-index: 2; } .lx-card:hover .lx-card-acts, .lx-card:focus-within .lx-card-acts { opacity: 1; transform: none; } .lx-qb { height: 44px; border: 0; border-radius: 999px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .24s, transform .2s; white-space: nowrap; padding: 0 10px; } .lx-qb:active { transform: scale(.96); } .lx-qb-l { background: rgba(245, 240, 232, .94); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lx-qb-l:hover { background: #fff; } .lx-qb-d { background: var(--ink); color: var(--ivory) !important; } .lx-qb-d:hover { background: #34302A; } .lx-qb.is-busy, .lx-btn.is-busy { pointer-events: none; } .lx-card-info { display: flex; flex-direction: column; gap: 6px; flex: 1; } .lx-card-k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); } .lx-card-n { font-family: var(--serif); font-size: 24px; line-height: 1.12; font-weight: 500; transition: color .25s; } .lx-card:hover .lx-card-n { color: var(--gold-t); } .lx-card-p { font-size: 15px; font-weight: 500; margin-top: auto; } /* prices line up when a name wraps */ .lx-oos { color: #8A2E1E !important; } /* Sold out (2026-11-06): the piece keeps its place; its photo goes quiet and a small tag sits on it. */ .lx-sold { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 7px 11px 6px; border-radius: 999px; background: rgba(245, 240, 232, .94); color: var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1; pointer-events: none; } .lx-card.is-out .lx-card-main, .lx-card.is-out .lx-card-alt { filter: saturate(.45); opacity: .7; } .lx-card.is-out .lx-card-p { color: var(--ash); } .lx-buy-sold { display: flex; flex-direction: column; gap: 12px; } .lx-sold-btn { width: 100%; height: 54px; border: 0; border-radius: 999px; background: #D9D2C6; color: #6B6358; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: not-allowed; } .lx-sold-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mute); } .lx-sold-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .lx-spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: lxSpin .7s linear infinite; } @keyframes lxSpin { to { transform: rotate(360deg); } } @media (hover: none) { .lx-card-acts, .lx-wish { opacity: 1; transform: none; } .lx-zoomhint { display: none; } } /* ============================================================== shop */ .lx-shop-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px 80px; align-items: end; padding-top: 60px; padding-bottom: 40px; } .lx-shop-head .lx-body { padding-bottom: 12px; } .lx-fbar { position: sticky; top: var(--top); z-index: 20; transition: top .55s var(--silk); } .lx-fbar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 76px; } .lx-fbar::before { content: ''; position: absolute; inset: 0 var(--gut); background: rgba(245, 240, 232, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); z-index: -1; } .lx-types { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; } .lx-types::-webkit-scrollbar { display: none; } .lx-fbar-r { display: flex; gap: 10px; align-items: center; flex: none; } .lx-menu { position: relative; } .lx-menu-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; padding: 8px; border-radius: 16px; background: var(--ivory); box-shadow: 0 24px 50px -20px rgba(26, 24, 20, .45), 0 0 0 1px var(--rule); z-index: 5; display: flex; flex-direction: column; animation: lxPop .4s var(--spring); } @keyframes lxPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .lx-menu-pop a { height: 42px; border-radius: 10px; padding: 0 14px; font-size: 14px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; gap: 16px; white-space: nowrap; } .lx-menu-pop a:hover, .lx-menu-pop a.is-on { background: rgba(26, 24, 20, .06); color: var(--ink); } .lx-menu-pop a span { font-size: 12px; color: #8A8073; } .lx-shop-body { padding-top: 48px; padding-bottom: 120px; min-height: 700px; } .lx-spot { grid-column: 1 / -1; order: 1; border-radius: 20px; overflow: hidden; background: var(--night); color: var(--ivory); } .lx-grid > .lx-card.is-late { order: 2; } /* Card C (owner chose 2026-10-28, desktop only): square photo on a light mat, small radius, wider grid air. Phones keep the app layer's cards. */ @media (min-width: 768px) { .lx-grid { gap: 52px 28px; } .lx-card-media { aspect-ratio: 1 / 1; border-radius: 4px; background: #E9E2D6; padding: 16px; } .lx-card-link { inset: 16px; overflow: hidden; border-radius: 2px; background: #0C0B0A; } .lx-card-n { font-size: 21px; } .lx-wish { right: 24px; top: 24px; } .lx-sold { left: 26px; top: 26px; } .lx-card-acts { left: 24px; right: 24px; bottom: 24px; } } /* Line banner 1.2.10 (owner, 2026-10-28): 260 px, line photo | name, line, count + price | the line's covers. The name is the link and stretches over the whole banner; each cover is its own link above it. */ .lx-spot-v { position: relative; height: 260px; display: grid; grid-template-columns: 34% minmax(0, 1fr) auto; align-items: center; } .lx-spot-v[hidden] { display: none; } .lx-spot-img { position: relative; overflow: hidden; align-self: stretch; } .lx-spot-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--silk); } .lx-spot-v:hover .lx-spot-img img { transform: scale(1.04); } .lx-spot-t { padding: 0 clamp(24px, 3.4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; } .lx-spot-k { font-size: 18px; line-height: 1; color: var(--gold-l); } .lx-spot-n { font-family: var(--serif); font-size: clamp(36px, 3.1vw, 48px); line-height: 1; color: inherit; text-decoration: none; } .lx-spot-n::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .lx-spot-n:focus-visible { outline: none; } .lx-spot-n:focus-visible::after { outline: 2px solid var(--gold-l); outline-offset: -4px; } .lx-spot-s { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; color: #D6CCB7; } .lx-spot-m { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #A79D8C; font-variant-numeric: tabular-nums; } .lx-spot .lx-lnk { margin-top: 6px; } .lx-spot-pcs { display: flex; gap: 12px; padding-right: clamp(24px, 3.4vw, 56px); } .lx-spot-pc { position: relative; z-index: 2; display: block; width: clamp(84px, 7.4vw, 116px); aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #0C0B0A; box-shadow: 0 0 0 1px rgba(246, 241, 232, .08); transition: transform .5s var(--silk), box-shadow .3s; } .lx-spot-pc img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-spot-pc:hover, .lx-spot-pc:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(246, 241, 232, .35), 0 14px 26px -14px rgba(0, 0, 0, .8); outline: none; } .lx-spot-pc-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lx-empty { min-height: 460px; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); background: var(--parch); animation: lxFin .8s var(--silk) both; } .lx-empty > img { width: 100%; height: 100%; object-fit: cover; } .lx-empty-t { padding: 56px clamp(28px, 5.5vw, 80px); display: flex; flex-direction: column; justify-content: center; gap: 20px; } .lx-inline-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 480px; } .lx-inline-form .lx-field { flex: 1 1 220px; } .lx-inline-form .lx-agree { flex-basis: 100%; } .lx-ft-msg { flex-basis: 100%; margin: 0; font-size: 14px; } .lx-grid.is-anim > .lx-card:not([hidden]) { animation: lxCin .7s var(--silk) both; animation-delay: calc(var(--i, 0) * 60ms); } @keyframes lxCin { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes lxFin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .lx-shop-head .lx-h-xl.is-swap { animation: lxFin .7s var(--silk) both; } /* ============================================================== product */ .lx-pdp { padding-bottom: 40px; } .lx-pdp-top { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-top: 40px; padding-bottom: 100px; align-items: start; } .lx-gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; position: sticky; top: calc(var(--top) + 20px); transition: top .55s var(--silk); } .lx-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 800px; overflow: auto; scrollbar-width: none; } .lx-thumbs::-webkit-scrollbar { display: none; } .lx-thumb { width: 76px; aspect-ratio: 4 / 5; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; opacity: .5; box-shadow: 0 0 0 1px var(--rule); transition: opacity .25s, box-shadow .25s; background: var(--ink-2); flex: none; } .lx-thumb:hover { opacity: .8; } .lx-thumb.is-on { opacity: 1; box-shadow: 0 0 0 1.5px var(--ink); } .lx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-stage { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #0C0B0A; cursor: zoom-in; } /* the black cloth's own colour: a photo shown whole never sits on a grey band */ .lx-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--silk), transform .5s var(--silk); transform-origin: var(--zx, 50%) var(--zy, 50%); } .lx-shot.is-on { opacity: 1; } .lx-shot.lx-shot-fit { object-fit: contain; } /* photos after the cover are 4:5 like the stage; any that is not is shown whole, never cut (2026-10-28) */ .lx-stage.is-zoom .lx-shot.is-on { transform: scale(1.9); } .lx-stage.is-film { cursor: default; } .lx-stage.is-film .lx-zoomhint { opacity: 0; } .lx-thumb-film { position: relative; } .lx-thumb-play { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(12, 11, 10, .55); } .lx-thumb-play::after { content: ''; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #F6F1E7; } .lx-arrow { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 999px; background: rgba(245, 240, 232, .9); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .3s, transform .3s var(--silk); z-index: 2; padding: 0; } .lx-arrow-l { left: 16px; } .lx-arrow-r { right: 16px; } .lx-stage:hover .lx-arrow, .lx-arrow:focus-visible { opacity: 1; } .lx-stage.is-zoom .lx-arrow { opacity: 0; } .lx-counter { position: absolute; left: 18px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(23, 21, 18, .55); color: var(--ivory); font-size: 12px; letter-spacing: .08em; z-index: 2; } .lx-zoomhint { position: absolute; right: 18px; bottom: 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251, 247, 238, .8); z-index: 2; transition: opacity .3s; } .lx-stage.is-zoom .lx-zoomhint, .lx-stage.is-zoom .lx-counter { opacity: 0; } .lx-buy { position: sticky; top: calc(var(--top) + 20px); display: flex; flex-direction: column; gap: 18px; transition: top .55s var(--silk); } .lx-buy .lx-crumb { margin-bottom: 4px; } .lx-buy-line { display: flex; gap: 12px; align-items: baseline; } .lx-buy-line .lx-bo { font-size: 15px; letter-spacing: 0; } .lx-buy-name { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.2vw, 64px); line-height: 1; margin: 0; letter-spacing: -.01em; } .lx-buy-price { margin: 0; font-size: 22px; font-weight: 500; } .lx-buy-price small { font-size: 12px; color: var(--ash); letter-spacing: .08em; } .lx-buy-short p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink-3); } .lx-stock { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #3F5B45; } .lx-stock i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .lx-stock.is-out { color: #8A2E1E; } .lx-buy-row { display: flex; gap: 10px; align-items: flex-start; } .lx-buy-form { flex: 1; min-width: 0; } .lx-buy-form .stock { display: none; } /* WooCommerce's own stock line: the column already shows In stock / Sold out */ .lx-buy-form form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .lx-buy-form .quantity { display: inline-flex; align-items: center; height: 54px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); padding: 0 4px; } .lx-buy-form .quantity .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .lx-buy-form .quantity input.qty { width: 44px; height: 46px; border: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 600; -moz-appearance: textfield; appearance: textfield; font-family: var(--sans); color: var(--ink); } .lx-buy-form .quantity input::-webkit-outer-spin-button, .lx-buy-form .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lx-qbtn { width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .lx-qbtn:hover:not(:disabled) { background: rgba(26, 24, 20, .06); } .lx-qbtn:disabled { opacity: .3; cursor: default; } .lx-buy-form .single_add_to_cart_button { flex: 1; min-width: 200px; height: 54px; padding: 0 28px; border: 0 !important; border-radius: 999px !important; background: var(--ink) !important; color: var(--ivory) !important; font-family: var(--sans) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background-color .35s var(--silk), transform .2s, box-shadow .24s; } .lx-buy-form .single_add_to_cart_button:hover { background: #34302A !important; box-shadow: 0 10px 24px -12px rgba(26, 24, 20, .6); } .lx-buy-form .single_add_to_cart_button:active { transform: scale(.98); } .lx-buy-form .single_add_to_cart_button.is-added { background: #3F5B45 !important; } .lx-buy-form .single_add_to_cart_button.is-busy { pointer-events: none; } .lx-buy-form > form.cart > *:not(.quantity):not(.single_add_to_cart_button):not(input) { flex-basis: 100%; } /* Pieces made in sizes (2026-10-28): WooCommerce's variations form, its select replaced by size buttons (lhari-site.js sizePicker). */ .lx-buy-form form.variations_form .single_variation_wrap { flex-basis: 100%; } .lx-buy-form form.variations_form .variations_button { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .lx-buy-form form.variations_form .variations_button .lx-wish-lg { order: 3; } /* pieces in wrist sizes: heart in the add-to-bag row (product.php prints it there) */ .lx-buy-form form.variations_form .single_variation:empty, .lx-buy-form form.variations_form .woocommerce-variation-price, .lx-buy-form form.variations_form .reset_variations_alert { display: none; } .lx-buy-form form.variations_form .single_variation { font-size: 13px; color: var(--mute); } .lx-buy-form form.variations_form .single_variation p { margin: 0 0 4px; } .lx-buy-form form.has-lx-size table.variations, .lx-buy-form form.has-lx-size .reset_variations { display: none !important; } .lx-buy-form .single_add_to_cart_button.disabled { opacity: 1 !important; cursor: pointer !important; } /* the click says what is missing instead */ .lx-size { display: grid; gap: 12px; margin: 2px 0 6px; } .lx-size-h { display: flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .lx-size-v { font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 13px; color: var(--mute); } .lx-size-row { display: flex; flex-wrap: wrap; gap: 8px; } .lx-size-b { min-width: 72px; height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: box-shadow .24s var(--silk), background-color .24s var(--silk), color .24s var(--silk), transform .2s; } .lx-size-b:hover { box-shadow: inset 0 0 0 1px var(--ink); } .lx-size-b:active { transform: scale(.97); } .lx-size-b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .lx-size-b.is-on { background: var(--ink); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--ink); } .lx-size-b[aria-disabled="true"] { color: var(--ash); text-decoration: line-through; text-decoration-thickness: 1px; box-shadow: inset 0 0 0 1px var(--rule); cursor: not-allowed; } .lx-size-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lx-size-err { margin: 0; padding: 10px 14px; border-radius: 12px; background: #F3DED6; color: #6E2A1B; font-size: 13px; } .lx-size.is-need .lx-size-row { animation: lx-size-nudge .42s var(--silk); } @keyframes lx-size-nudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .lx-size.is-need .lx-size-row { animation: none; } } .lx-buy-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--mute); } .lx-buy-trust span::before { content: '·'; margin-right: 8px; color: var(--gold); } .lx-accs { border-top: 1px solid var(--rule-2); margin-top: 6px; } .lx-acc { border-bottom: 1px solid var(--rule-2); } .lx-acc > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 14px; font-weight: 600; letter-spacing: .06em; } .lx-acc > summary::-webkit-details-marker { display: none; } .lx-acc-body { padding: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--ink-3); overflow: hidden; } .lx-acc-body p { margin: 0 0 10px; } .lx-acc-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(26, 24, 20, .3); } .lx-acc-body dl { margin: 0; display: grid; gap: 12px; } .lx-acc-body dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; } .lx-acc-body dt { color: var(--ash); font-size: 13px; letter-spacing: .06em; } .lx-acc-body dd { margin: 0; } .lx-acc-body img { display: block; width: 100%; height: auto; border-radius: 12px; } .lx-acc-body figure { margin: 12px 0; } .lx-acc-body figcaption { font-size: 13px; color: var(--ash); margin-top: 8px; } .lx-acc-body .norbu-packaging-details__content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; } .lx-acc-body .norbu-packaging-details__primary { margin: 0; } .lx-acc-body .norbu-packaging-details__note { display: flex; flex-direction: column; gap: 12px; } .lx-acc-body .norbu-packaging-details__note img { aspect-ratio: 1; object-fit: cover; } .lx-card-note { margin-top: 14px !important; padding: 14px 16px; border-radius: 12px; background: var(--parch); color: var(--ink-3); } .lx-meta { margin: 0; font-size: 12px; color: var(--ash); letter-spacing: .04em; } .lx-meta a:hover { color: var(--ink); } .lx-story { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(32px, 7vw, 110px); padding-top: 110px; padding-bottom: 110px; border-top: 1px solid var(--rule); align-items: start; } .lx-story-img { position: sticky; top: calc(var(--top) + 30px); border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-2); transition: top .55s var(--silk); } .lx-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-story-copy { font-size: 18px; line-height: 1.75; color: var(--ink-3); } .lx-story-copy > h2:first-child { display: none; } .lx-story-copy .norbu-product-kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-t); margin: 0 0 18px; } .lx-story-copy h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.04; color: var(--ink); margin: 0 0 24px; } .lx-story-copy p { margin: 0 0 18px; } .lx-story-copy .norbu-product-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0; } .lx-story-copy .norbu-product-panels article { padding: 22px; border-radius: 16px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); font-size: 15px; line-height: 1.6; } .lx-story-copy .norbu-product-panels article span, .lx-story-copy .norbu-product-ritual span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t); margin-bottom: 10px; } .lx-story-copy .norbu-product-panels article p { margin: 0; } .lx-story-copy .norbu-product-ritual { padding: 26px 28px; border-radius: 16px; background: var(--night); color: #E9E0CC; } .lx-story-copy .norbu-product-ritual p { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.35; font-style: italic; } .lx-story-copy h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink); margin: 34px 0 12px; } .lx-story-copy ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; font-size: 16px; } .lx-story-copy li { position: relative; padding-left: 18px; } .lx-story-copy li::before { content: ''; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--gold); } .lx-story-copy .tinv-wraper { display: none !important; } .lx-attrs { margin: 36px 0 0; border-top: 1px solid var(--rule-2); } .lx-attrs > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; } .lx-attrs dt { color: var(--ash); } .lx-attrs dd { margin: 0; } .lx-attrs a { text-decoration: underline; text-underline-offset: 3px; } .lx-related { padding-top: 60px; padding-bottom: 120px; } .lx-mini { position: fixed; left: 0; right: 0; top: 0; z-index: 58; background: rgba(245, 240, 232, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--rule); transform: translateY(-110%); transition: transform .55s var(--silk); } .lx-mini.is-on { transform: translateY(var(--mini-y, 68px)); } .lx-mini-in { height: 72px; display: flex; align-items: center; gap: 20px; } .lx-mini img { width: 44px; height: 55px; border-radius: 8px; object-fit: cover; } .lx-mini-n { font-family: var(--serif); font-size: 24px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lx-mini-p { font-size: 16px; font-weight: 600; } .lx-mini .lx-btn { height: 46px; } /* ============================================================== reviews (reviews.php) */ /* Stars: one masked shape each, filled to --f (0–1) from the left. */ .lx-stars { display: inline-flex; gap: 2px; vertical-align: middle; line-height: 0; } .lx-stars i { position: relative; width: var(--sz, 14px); height: var(--sz, 14px); background: rgba(26, 24, 20, .16); -webkit-mask: var(--lx-star) center / contain no-repeat; mask: var(--lx-star) center / contain no-repeat; } .lx-stars i::before { content: ''; position: absolute; inset: 0; width: calc(var(--f, 0) * 100%); background: var(--gold); } :root { --lx-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.7 5.9 6.4.7-4.8 4.4 1.3 6.4L12 17l-5.6 3.2 1.3-6.4-4.8-4.4 6.4-.7z'/%3E%3C/svg%3E"); } /* Under the price, only once a piece has reviews: stars, average, count; scrolls to the section. */ .lx-buy-rate { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: -8px; font-size: 13px; font-weight: 600; color: var(--ink); } .lx-buy-rate-n { font-weight: 400; color: var(--ash); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(26, 24, 20, .25); transition: color .2s; } .lx-buy-rate:hover .lx-buy-rate-n { color: var(--ink); } .lx-rvw { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 7vw, 110px); padding-top: 100px; padding-bottom: 100px; border-top: 1px solid var(--rule); align-items: start; scroll-margin-top: 90px; } .lx-rvw.is-empty { display: block; padding-top: 64px; padding-bottom: 64px; } /* No reviews yet: one quiet line and the way in, nothing that reads as "0". */ .lx-rvw-empty { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr) minmax(0, 340px); gap: 20px clamp(32px, 5vw, 80px); align-items: baseline; } .lx-rvw-quiet { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: var(--ink-3); } .lx-rvw-empty-t { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .lx-rvw-first { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); } .lx-rvw-first .lx-i { transition: transform .4s var(--silk); } .lx-rvw-first:hover .lx-i { transform: translateX(4px); } /* With reviews: the summary stays beside the list while it scrolls. */ .lx-rvw-sum { position: sticky; top: calc(var(--top) + 30px); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; transition: top .55s var(--silk); } .lx-rvw-avg { display: flex; align-items: center; gap: 18px; } .lx-rvw-big { font-family: var(--serif); font-size: 84px; line-height: .9; letter-spacing: -.02em; } .lx-rvw-of { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ash); } .lx-rvw-dist { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; } .lx-rvw-dist li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 28px; gap: 12px; align-items: center; font-size: 12px; color: var(--ash); } .lx-rvw-n { text-align: right; } .lx-rvw-bar { height: 3px; border-radius: 3px; background: var(--rule); overflow: hidden; } .lx-rvw-bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--w)); } .lx-rvw.is-armed .lx-rvw-bar i { transform: scaleX(0); transition: transform 1.1s var(--out); } .lx-rvw.is-armed .lx-rvw-dist li:nth-child(2) i { transition-delay: .07s; } .lx-rvw.is-armed .lx-rvw-dist li:nth-child(3) i { transition-delay: .14s; } .lx-rvw.is-armed .lx-rvw-dist li:nth-child(4) i { transition-delay: .21s; } .lx-rvw.is-armed .lx-rvw-dist li:nth-child(5) i { transition-delay: .28s; } .lx-rvw.is-armed.is-in .lx-rvw-bar i { transform: scaleX(var(--w)); } .lx-rvw-sum.is-ping .lx-rvw-big { animation: lxRvPing .9s var(--spring); } @keyframes lxRvPing { 40% { transform: scale(1.08); color: var(--gold-t); } } .lx-rvw-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 18px; margin-bottom: 8px; } .lx-rvw-strip::-webkit-scrollbar { display: none; } .lx-rvw-shot, .lx-rv-ph button { position: relative; flex: none; width: 92px; height: 92px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--parch); box-shadow: 0 0 0 1px var(--rule); transition: transform .45s var(--spring), box-shadow .3s var(--silk); } .lx-rvw-shot:hover, .lx-rv-ph button:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -14px rgba(26, 24, 20, .55); } .lx-rvw-shot img, .lx-rv-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-rvw-shot span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(23, 21, 18, .5); color: var(--ivory); font-size: 15px; font-weight: 600; } .lx-rvw-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); } .lx-rv { padding: 28px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; } .lx-rv-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--ash); letter-spacing: .04em; } .lx-rv-t { font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 68ch; } .lx-rv-t p { margin: 0 0 10px; } .lx-rv-t p:last-child { margin: 0; } .lx-rv-ph { display: flex; flex-wrap: wrap; gap: 8px; } .lx-rv-ph button { width: 76px; height: 76px; border-radius: 10px; } .lx-rv-by { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; } .lx-rv-by b { font-weight: 600; } .lx-rv-reply { margin-left: 2px; padding: 14px 18px; border-left: 2px solid var(--gold-l); background: rgba(236, 227, 209, .45); border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.65; color: var(--ink-3); max-width: 64ch; } .lx-rv-reply .lx-k { display: block; margin-bottom: 6px; color: var(--gold-t); font-size: 10px; } .lx-rv-reply p { margin: 0 0 8px; } .lx-rv-reply p:last-child { margin: 0; } .lx-rv-ver { display: inline-flex; align-items: center; gap: 5px; color: #3F5B45; font-size: 12px; letter-spacing: .04em; } /* Cards rise in one after another as the list scrolls in (the script arms this; without it they simply show). */ .lx-rvw.is-armed .lx-rv:not(.is-in) { opacity: 0; transform: translateY(18px); } .lx-rvw.is-armed .lx-rv { transition: opacity .7s var(--silk), transform .9s var(--out); transition-delay: calc(var(--i, 0) * 80ms); } .lx-rvw-all { margin-top: 28px; } /* Write sheet: a card in the middle on computers, a sheet from the bottom on phones. */ .lx-rvs-scrim { position: fixed; inset: 0; z-index: 96; background: rgba(23, 21, 18, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s var(--silk); } .lx-rvs-scrim.is-on { opacity: 1; } .lx-rvs { position: fixed; left: 50%; top: 50%; z-index: 97; width: min(580px, calc(100vw - 2 * var(--gut))); max-height: min(820px, calc(100vh - 60px)); display: flex; flex-direction: column; border-radius: 28px; background: var(--bg); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); overflow: hidden; opacity: 0; transform: translate(-50%, calc(-50% + 28px)) scale(.97); transition: opacity .4s var(--silk), transform .6s var(--spring); } .lx-rvs.is-on { opacity: 1; transform: translate(-50%, -50%); } .lx-rvs-grip { display: none; } .lx-rvs-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 22px; border-bottom: 1px solid var(--rule); } .lx-rvs-head img { width: 44px; height: 55px; border-radius: 8px; object-fit: cover; background: var(--parch); } .lx-rvs-head > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lx-rvs-head .lx-k { color: var(--gold-t); font-size: 10px; } .lx-rvs-name { font-family: var(--serif); font-size: 22px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lx-rvs-body { position: relative; overflow: auto; overscroll-behavior: contain; padding: 30px 32px 32px; } .lx-rvs-step { display: flex; flex-direction: column; gap: 18px; } .lx-rvs-step.is-enter { animation: lxRvsIn .5s var(--out) both; } @keyframes lxRvsIn { from { opacity: 0; transform: translateY(10px); } } .lx-rvs-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.08; } .lx-rvs-dots { display: flex; gap: 8px; justify-content: center; padding: 40px 0; } .lx-rvs-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: lxRvsDot 1.1s var(--silk) infinite; } .lx-rvs-dots i:nth-child(2) { animation-delay: .15s; } .lx-rvs-dots i:nth-child(3) { animation-delay: .3s; } @keyframes lxRvsDot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } } .lx-rvs-form { gap: 26px; } .lx-rvs-rate { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .lx-rvs-rate legend { padding: 0; margin: 0 auto 12px; color: var(--ash); } .lx-rvs-stars { display: flex; gap: 6px; } .lx-rvs-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .lx-rvs-stars label { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; } .lx-rvs-stars svg { width: 38px; height: 38px; fill: transparent; stroke: var(--ink-3); stroke-width: 1.1; stroke-linejoin: round; transition: fill .28s var(--silk), stroke .28s var(--silk), transform .35s var(--spring); transition-delay: calc(var(--i) * 45ms); } .lx-rvs-stars input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 0; } /* Chosen: every star up to the choice fills in a sweep from the left; hovering previews another choice. */ .lx-rvs-stars:has(input:nth-of-type(1):checked) label:nth-of-type(-n+1) svg, .lx-rvs-stars:has(input:nth-of-type(2):checked) label:nth-of-type(-n+2) svg, .lx-rvs-stars:has(input:nth-of-type(3):checked) label:nth-of-type(-n+3) svg, .lx-rvs-stars:has(input:nth-of-type(4):checked) label:nth-of-type(-n+4) svg, .lx-rvs-stars:has(input:nth-of-type(5):checked) label:nth-of-type(-n+5) svg { fill: var(--gold); stroke: var(--gold); } @media (hover: hover) { .lx-rvs-stars:hover label svg { fill: transparent; stroke: var(--ink-3); } .lx-rvs-stars:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1) svg, .lx-rvs-stars:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2) svg, .lx-rvs-stars:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3) svg, .lx-rvs-stars:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4) svg, .lx-rvs-stars:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) svg { fill: var(--gold-l); stroke: var(--gold); } .lx-rvs-stars label:hover svg { transform: scale(1.12); } } .lx-rvs-word { min-height: 26px; font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--ink-3); } .lx-rvs-field { position: relative; display: flex; flex-direction: column; gap: 10px; } .lx-rvs-field .lx-k { color: var(--ash); } .lx-rvs-field .lx-k small { font-size: 10px; letter-spacing: .12em; font-weight: 600; text-transform: none; } .lx-rvs-field textarea, .lx-rvs-field input[type="text"] { width: 100%; border: 0; border-radius: 16px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule-2); padding: 16px 18px; font: 16px/1.6 var(--sans); color: var(--ink); resize: vertical; min-height: 54px; transition: box-shadow .25s var(--silk); } .lx-rvs-field textarea { min-height: 132px; } .lx-rvs-field textarea:focus, .lx-rvs-field input[type="text"]:focus { box-shadow: inset 0 0 0 1.5px var(--ink); outline: none; } .lx-rvs-field.is-bad textarea, .lx-rvs-rate.is-bad .lx-rvs-word { box-shadow: inset 0 0 0 1.5px #8A2E1E; color: #8A2E1E; } .lx-rvs-rate.is-bad .lx-rvs-word { box-shadow: none; } .lx-rvs-count { position: absolute; right: 16px; bottom: 12px; font-size: 12px; color: var(--ash); pointer-events: none; } .lx-rvs-photos { display: flex; flex-wrap: wrap; gap: 10px; } .lx-rvs-add, .lx-rvs-ph { position: relative; width: 84px; height: 84px; border-radius: 14px; flex: none; } .lx-rvs-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border: 1.5px dashed var(--rule-2); color: var(--ash); font-size: 11px; text-align: center; transition: border-color .25s, color .25s, background-color .25s; } .lx-rvs-add:hover, .lx-rvs-add:focus-within { border-color: var(--ink); color: var(--ink); } .lx-rvs-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; } .lx-rvs-add svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .4s var(--spring); } .lx-rvs-add:hover svg { transform: rotate(90deg); } .lx-rvs-ph { overflow: hidden; background: var(--parch); box-shadow: 0 0 0 1px var(--rule); animation: lxRvsPh .55s var(--spring) both; } @keyframes lxRvsPh { from { opacity: 0; transform: scale(.7); } } .lx-rvs-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-rvs-ph.is-busy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(251, 247, 238, .55) 50%, transparent 70%) var(--parch); background-size: 220% 100%; animation: lxRvsShim 1.1s linear infinite; } @keyframes lxRvsShim { from { background-position: 120% 0; } to { background-position: -120% 0; } } .lx-rvs-ph.is-out { animation: lxRvsPhOut .3s var(--silk) forwards; } @keyframes lxRvsPhOut { to { opacity: 0; transform: scale(.6); } } .lx-rvs-ph button { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; border: 0; padding: 0; border-radius: 50%; background: rgba(23, 21, 18, .7); color: var(--ivory); display: flex; align-items: center; justify-content: center; cursor: pointer; } .lx-rvs-ph button .lx-i { width: 13px; height: 13px; } .lx-rvs-drop { font-size: 12px; } body.lx .lx-rvs-name:focus, body.lx .lx-rvs-name:focus-visible { outline: none; } /* focus parks on the title for screen readers; WebKit drew the gold ring when the sheet opened from a link */ @media (hover: none) { .lx-rvs-drop-k { display: none; } } .lx-rvs-form.is-drag { outline: 1.5px dashed var(--gold); outline-offset: 12px; border-radius: 18px; } .lx-rvs-err { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(138, 46, 30, .08); color: #8A2E1E; font-size: 14px; } .lx-rvs-send { position: relative; overflow: hidden; width: 100%; isolation: isolate; } .lx-rvs-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(251, 247, 238, .16); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .25s linear; z-index: -1; } .lx-rvs-send.is-busy { pointer-events: none; } .lx-rvs-send:active { transform: scale(.985); } .lx-rvs-fine { text-align: center; font-size: 12px; margin-top: -10px; } .lx-rvs-form.is-shake { animation: lxRvsShake .42s var(--silk); } @keyframes lxRvsShake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } } /* Thank you: the ring draws, the inner ring fades in, the star settles last (the confirmation seal's language). */ .lx-rvs-thanks { align-items: center; text-align: center; padding: 12px 0 4px; } .lx-rvs-thanks .lx-row { justify-content: center; } .lx-rvs-seal { width: 96px; height: 96px; } .lx-rvs-ring, .lx-rvs-ring2 { fill: none; stroke: var(--gold); } .lx-rvs-ring { stroke-width: 1.4; stroke-dasharray: 277; stroke-dashoffset: 277; transform: rotate(-90deg); transform-origin: center; animation: lxRvsDraw 1s var(--out) .1s forwards; } .lx-rvs-ring2 { stroke-width: .8; opacity: 0; animation: lxRvsFade .6s var(--silk) .6s forwards; } .lx-rvs-mark { fill: var(--gold); transform-origin: 48px 46px; transform: scale(0) rotate(-30deg); animation: lxRvsMark .7s var(--spring) .8s forwards; } @keyframes lxRvsDraw { to { stroke-dashoffset: 0; } } @keyframes lxRvsFade { to { opacity: .55; } } @keyframes lxRvsMark { to { transform: none; } } /* Photo viewer */ .lx-rvl { position: fixed; inset: 0; z-index: 99; background: rgba(23, 21, 18, .94); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s var(--silk); } .lx-rvl.is-on { opacity: 1; } .lx-rvl-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: calc(100vw - 160px); } .lx-rvl-fig img { display: block; max-width: 100%; border-radius: 14px; object-fit: cover; background: var(--night-2); } .lx-rvl-fig figcaption { display: flex; align-items: center; gap: 12px; color: #BDB29D; font-size: 13px; } .lx-rvl-fig figcaption b { color: var(--ivory); font-weight: 600; } .lx-rvl-fig .lx-stars i { background: rgba(251, 247, 238, .2); } .lx-rvl-fig .lx-stars i::before { background: var(--gold-l); } .lx-rvl .lx-ib { position: absolute; color: var(--ivory); } .lx-rvl .lx-ib:hover { background: rgba(251, 247, 238, .12); } .lx-rvl-x { right: 20px; top: 20px; } .lx-rvl-nav { top: 50%; margin-top: -22px; } .lx-rvl-prev { left: 20px; } .lx-rvl-next { right: 20px; } .lx-rvl.is-one .lx-rvl-nav { display: none; } @media (max-width: 1100px) { .lx-rvw { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 72px; padding-bottom: 72px; } .lx-rvw-sum { position: static; } .lx-rvw-empty { grid-template-columns: minmax(0, 1fr); } } /* Phones and touch tablets: the sheet rises from the bottom above the island; drag the grip down to close. */ @media (max-width: 767px), (max-width: 1366px) and (min-height: 600px) and (hover: none) and (pointer: coarse) { .lx-rvw { padding-top: 56px; padding-bottom: 56px; } .lx-rvw.is-empty { padding-top: 44px; padding-bottom: 44px; } .lx-rvw-big { font-size: 64px; } .lx-rvw-shot { width: 84px; height: 84px; } .lx-rv-t { font-size: 16px; } .lx-rvs-scrim { z-index: 10040; } .lx-rvs { z-index: 10041; left: 0; right: 0; top: auto; bottom: var(--kb, 0px); width: 100%; max-width: 640px; margin: 0 auto; max-height: calc(100dvh - 40px - var(--kb, 0px)); border-radius: 26px 26px 0 0; transform: translateY(100%); opacity: 1; transition: transform .55s var(--out); padding-bottom: env(safe-area-inset-bottom, 0px); } .lx-rvs.is-on { transform: translateY(var(--drag, 0px)); } .lx-rvs.is-dragging { transition: none; } .lx-rvs-grip { display: block; position: absolute; left: 50%; top: 0; width: 120px; height: 26px; margin-left: -60px; z-index: 2; touch-action: none; } .lx-rvs-grip::before { content: ''; position: absolute; left: 50%; top: 9px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--rule-2); } .lx-rvs-head { padding-top: 26px; } .lx-rvs-body { padding: 24px 20px 28px; } .lx-rvs-h { font-size: 28px; } .lx-rvs-stars label { width: 52px; height: 52px; } .lx-rvl { z-index: 10050; } .lx-rvl-fig { max-width: 100vw; padding: 0 12px; } .lx-rvl-fig img { border-radius: 10px; } .lx-rvl-nav { top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); margin: 0; } } @media (prefers-reduced-motion: reduce) { .lx-rvw.is-armed .lx-rv:not(.is-in) { opacity: 1; transform: none; } .lx-rvw.is-armed .lx-rvw-bar i { transform: scaleX(var(--w)); } .lx-rvs-ring { stroke-dashoffset: 0; } .lx-rvs-ring2 { opacity: .55; } .lx-rvs-mark { transform: none; } } /* ============================================================== home */ .lx-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: #1A1814; color: var(--ivory); } /* Scroll effects (video drifts down, text fades up) follow --hp = scrollY / viewport height, set by the script * from the real scroll position. Not a CSS scroll timeline: Chromium can leave those out of step with the page * after back/forward or restore (text gone and video shifted while at the top, reported 2026-09-30). */ .lx-hero-media { position: absolute; inset: 0; transform: translate3d(0, calc(var(--hp, 0) * 24%), 0); } /* Poster and film are the same frame at the same crop (both centred cover), so the fade-in doesn't move the picture. */ .lx-hero-media img, .lx-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lx-hero-media video { opacity: 0; transition: opacity 1.2s var(--silk); } .lx-hero-media.is-playing video { opacity: 1; } .lx-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 16, 13, .62) 0%, rgba(18, 16, 13, .22) 55%, rgba(18, 16, 13, .1) 100%), linear-gradient(180deg, rgba(18, 16, 13, .45) 0%, rgba(18, 16, 13, 0) 28%, rgba(18, 16, 13, 0) 60%, rgba(18, 16, 13, .5) 100%); } .lx-hero-t { position: absolute; left: 0; right: 0; bottom: clamp(80px, 12vh, 130px); display: flex; flex-direction: column; gap: 24px; opacity: calc(1 - var(--hp, 0) * 1.25); transform: translate3d(0, calc(min(var(--hp, 0) * 1.25, 1) * -90px), 0); } .lx-hero-h { font-family: var(--serif); font-weight: 400; font-size: clamp(50px, 6.4vw, 104px); line-height: .98; letter-spacing: -.015em; margin: 0; max-width: 1000px; } .lx-hero-p { margin: 0; font-size: 18px; line-height: 1.6; color: #E9E0CC; max-width: 520px; } .lx-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } .lx-hero-card { position: absolute; right: var(--gut); bottom: clamp(80px, 12vh, 130px); width: 330px; padding: 12px; border-radius: 20px; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; background: rgba(251, 247, 238, .12); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(251, 247, 238, .28); transition: background-color .3s, transform .5s var(--silk); } .lx-hero-card:hover { background: rgba(251, 247, 238, .2); transform: translateY(-3px); } .lx-hero-card img { width: 88px; height: 110px; border-radius: 12px; object-fit: cover; } .lx-hero-card > span { display: flex; flex-direction: column; gap: 4px; } .lx-hero-card .lx-k { color: #E3D7BD; font-size: 10px; } .lx-hero-card-n { font-family: var(--serif); font-size: 26px; line-height: 1; } .lx-hero-card-s { font-family: var(--serif); font-style: italic; font-size: 15px; color: #E9E0CC; } .lx-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(251, 247, 238, .7); padding-bottom: 34px; } .lx-scroll::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 26px; background: linear-gradient(rgba(251, 247, 238, .7), transparent); animation: lxDrip 2.2s var(--silk) infinite; } @keyframes lxDrip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } .lx-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 0; padding-bottom: 0; } .lx-trust-i { display: flex; flex-direction: column; gap: 6px; padding: 34px 28px 34px 0; border-bottom: 1px solid var(--rule); } .lx-trust-i + .lx-trust-i { padding-left: 28px; border-left: 1px solid var(--rule); } .lx-trust-h { font-family: var(--serif); font-size: 22px; line-height: 1.15; } .lx-featured { padding-top: 120px; padding-bottom: 60px; } .lx-featured .lx-center { margin-top: 64px; } .lx-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(26, 24, 20, .06); } .lx-seg button { position: relative; z-index: 1; height: 40px; padding: 0 20px; border: 0; background: none; border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; transition: color .3s; white-space: nowrap; } .lx-seg button.is-on { color: var(--ivory); } .lx-seg-pill { position: absolute; top: 4px; left: 4px; height: 40px; width: 0; border-radius: 999px; background: var(--ink); transition: left .5s var(--spring), width .5s var(--spring); } .lx-cardtile { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-2); color: var(--ivory); align-self: start; } .lx-cardtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--silk); } .lx-cardtile:hover img { transform: scale(1.04); } .lx-cardtile-t { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; } .lx-cardtile-t .lx-k { color: var(--gold-l); } .lx-cardtile-n { font-family: var(--serif); font-size: 30px; line-height: 1.05; } .lx-cardtile .lx-lnk { align-self: flex-start; margin-top: 6px; } .lx-heritage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; padding-top: 100px; padding-bottom: 130px; } .lx-heritage-img { position: relative; aspect-ratio: 5 / 6; } .lx-heritage-img > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; } .lx-heritage-sm { position: absolute; right: -8%; bottom: -10%; width: 42%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(26, 24, 20, .6); border: 6px solid var(--bg); } .lx-heritage-t { display: flex; flex-direction: column; gap: 24px; max-width: 560px; } .lx-heritage-t .lx-lnk { align-self: flex-start; margin-top: 8px; } .lx-lines { padding-top: 60px; padding-bottom: 120px; } .lx-acc6 { display: flex; gap: 12px; height: 640px; } .lx-ln { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--ink-2); color: var(--ivory); transition: flex-grow .9s var(--silk); } .lx-ln.is-on { flex-grow: 5; } .lx-ln img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--silk), filter .8s; } .lx-ln.is-on img { transform: scale(1); } .lx-ln:not(.is-on) img { filter: saturate(.6) brightness(.8); } .lx-ln-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 16, 13, .1) 30%, rgba(18, 16, 13, .78) 100%); } .lx-ln-col { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 28px 0; transition: opacity .35s var(--silk); } .lx-ln.is-on .lx-ln-col { opacity: 0; } .lx-ln-no { font-size: 12px; font-weight: 700; letter-spacing: .2em; } .lx-ln-vt { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-size: 30px; white-space: nowrap; } .lx-ln-col .lx-bo { font-size: 16px; color: #E3D7BD; writing-mode: vertical-rl; } .lx-ln-exp { position: absolute; left: 40px; right: 40px; bottom: 40px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(20px); transition: opacity .3s var(--silk), transform .6s var(--silk); } .lx-ln.is-on .lx-ln-exp { opacity: 1; transform: none; transition-delay: .3s; } .lx-ln-exp .lx-k { color: #E3D7BD; } .lx-ln-n { font-family: var(--serif); font-size: clamp(40px, 4vw, 60px); line-height: 1; } .lx-ln-tag { font-family: var(--serif); font-style: italic; font-size: 22px; color: #F2EADA; } .lx-ln-exp .lx-lnk { align-self: flex-start; margin-top: 8px; } .lx-quote { padding-top: 120px; padding-bottom: 140px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; } .lx-quote-t { margin: 0; max-width: 1100px; font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5vw, 76px); line-height: 1.12; color: var(--ink); } .lx-making { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); padding-top: 60px; padding-bottom: 140px; align-items: center; } .lx-making-img { position: relative; aspect-ratio: 5 / 6; border-radius: 18px; overflow: hidden; background: var(--ink-2); } .lx-mk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .9s var(--silk), transform 1.6s var(--silk); } .lx-mk-img.is-on { opacity: 1; transform: none; } .lx-making-t { display: flex; flex-direction: column; gap: 22px; } .lx-making-t .lx-h-l { margin-bottom: 20px; } .lx-mk { position: relative; border-top: 1px solid var(--rule-2); } .lx-mk-row { width: 100%; border: 0; background: none; padding: 22px 0; cursor: pointer; display: flex; align-items: center; gap: 20px; text-align: left; color: var(--ink); } .lx-mk-no { font-family: var(--serif); font-size: 18px; color: var(--gold-t); } .lx-mk-t { flex: 1; font-family: var(--serif); font-size: clamp(30px, 2.6vw, 38px); line-height: 1.1; color: #8A8073; transition: color .35s; } .lx-mk.is-on .lx-mk-t, .lx-mk-row:hover .lx-mk-t { color: var(--ink); } .lx-mk-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--silk); } .lx-mk-body > div { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .lx-mk.is-on .lx-mk-body { grid-template-rows: 1fr; } .lx-mk.is-on .lx-mk-body > div { padding-bottom: 26px; } .lx-mk-bar { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--silk); } .lx-mk.is-on .lx-mk-bar { transform: scaleX(1); } .lx-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); padding-top: 120px; padding-bottom: 140px; border-top: 1px solid var(--rule); align-items: center; } .lx-studio-t { display: flex; flex-direction: column; gap: 26px; } .lx-steps, .lx-rsteps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 0; counter-reset: s; } .lx-steps li, .lx-rsteps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding: 18px 0; border-top: 1px solid var(--rule); } .lx-steps li > span:first-child, .lx-rsteps li > span:first-child { grid-row: span 2; font-family: var(--serif); font-size: 26px; color: var(--gold-t); line-height: 1; } .lx-steps b, .lx-rsteps b { font-weight: 600; font-size: 16px; } .lx-collage { position: relative; height: clamp(420px, 42vw, 620px); } .lx-collage figure { position: absolute; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(26, 24, 20, .55); transition: transform .8s var(--silk); background: var(--ink-2); } .lx-collage img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-collage figcaption { position: absolute; left: 16px; bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ivory); text-shadow: 0 2px 12px rgba(0, 0, 0, .4); } .lx-col-a { left: 0; top: 0; width: 56%; height: 78%; transform: rotate(-3deg); } .lx-col-b { right: 0; bottom: 0; width: 52%; height: 70%; transform: rotate(3.5deg); } .lx-collage:hover .lx-col-a, .lx-collage:hover .lx-col-b { transform: rotate(0); } .lx-pack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--night); color: var(--ivory); } .lx-pack-img { position: relative; overflow: hidden; min-height: 620px; } .lx-pack-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lx-pack-t { padding: clamp(60px, 8vw, 120px) var(--gut) clamp(60px, 8vw, 120px) clamp(40px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: 26px; max-width: 700px; } .lx-sign { margin-top: 10px; padding: 26px 28px; border-radius: 18px; background: rgba(251, 247, 238, .06); box-shadow: inset 0 0 0 1px rgba(251, 247, 238, .12); } .lx-sign-k { display: block; font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--gold-l); margin-bottom: 8px; } .lx-sign p { margin: 0; font-size: 16px; line-height: 1.7; color: #E9E0CC; } .lx-talk { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; padding-top: 130px; padding-bottom: 140px; } .lx-talk-img { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--ink-2); } .lx-talk-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--silk); } .lx-talk:hover .lx-talk-img img { transform: scale(1.03); } .lx-talk-t { display: flex; flex-direction: column; gap: 24px; max-width: 560px; } .lx-talk-btn { gap: 14px; } /* ============================================================== lines & collections */ .lx-line-hero { position: relative; height: max(620px, 91vh); overflow: hidden; background: #1A1814; color: var(--ivory); } .lx-lh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.1s var(--silk), transform 2.4s var(--silk); } .lx-lh.is-on { opacity: 1; transform: none; } .lx-line-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 16, 13, .72) 0%, rgba(18, 16, 13, .25) 55%, rgba(18, 16, 13, 0) 100%), linear-gradient(180deg, rgba(18, 16, 13, .5) 0%, rgba(18, 16, 13, 0) 30%); } .lx-line-t { position: absolute; left: 0; right: 0; bottom: 96px; display: flex; flex-direction: column; gap: 18px; } .lx-line-t > * { max-width: 800px; } .lx-line-t.is-swap > * { animation: lxRise .9s var(--out) both; } .lx-line-t.is-swap > *:nth-child(2) { animation-delay: .07s; } .lx-line-t.is-swap > *:nth-child(3) { animation-delay: .14s; } .lx-line-t.is-swap > *:nth-child(4) { animation-delay: .21s; } .lx-line-t.is-swap > *:nth-child(5) { animation-delay: .28s; } @keyframes lxRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } .lx-line-t .lx-eyebrow { letter-spacing: .26em; color: #E3D7BD; } .lx-line-bo { font-family: var(--bo); font-size: 30px; color: #E3D7BD; } .lx-line-tag { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 32px); color: #F2EADA; } .lx-line-intro { font-size: 17px; color: #E9E0CC; } .lx-line-tabs { position: sticky; top: var(--top); z-index: 20; background: rgba(245, 240, 232, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); transition: top .55s var(--silk); } .lx-line-tabs-in { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .lx-ltab { height: 84px; padding: 0 0 0 4px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; color: #8A8073; transition: color .3s; min-width: 0; } .lx-ltab:hover { color: var(--ink-3); } .lx-ltab.is-on { color: var(--ink); } .lx-ltab-k { font-size: 11px; font-weight: 700; letter-spacing: .2em; } .lx-ltab-k .lx-bo { font-size: 12px; margin-left: 6px; } .lx-ltab-n { font-family: var(--serif); font-size: 24px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .lx-ltab-line { position: absolute; bottom: -1px; left: var(--gut); height: 2px; width: 0; background: var(--ink); transition: left .6s var(--spring), width .6s var(--spring); } .lx-line-pieces { padding-top: 96px; padding-bottom: 120px; } .lx-soon { min-height: 320px; border-radius: 20px; background: var(--parch); padding: 56px clamp(28px, 5.5vw, 80px); display: flex; flex-direction: column; justify-content: center; gap: 18px; animation: lxFin .8s var(--silk) both; } .lx-line-story { background: var(--parch); padding: 120px 0 140px; } .lx-line-story-in { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(40px, 7.6vw, 110px); align-items: start; } .lx-line-first { position: sticky; top: calc(var(--top) + 100px); display: flex; flex-direction: column; gap: 22px; transition: top .55s var(--silk); } .lx-line-first-t { margin: 0; font-family: var(--serif); font-size: clamp(32px, 3.05vw, 44px); line-height: 1.12; } .lx-line-body { display: flex; flex-direction: column; gap: 26px; max-width: 620px; padding-top: 44px; } .lx-line-body .lx-lead { font-size: 20px; } .lx-line-last { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--gold-t); } .lx-line-story.is-swap .lx-line-first-t, .lx-line-story.is-swap .lx-line-body > * { animation: lxRise .9s var(--out) both; } .lx-nextl { display: block; background: var(--parch); border-top: 1px solid var(--rule-2); transition: background-color .4s; } .lx-nextl:hover { background: #E3D8C2; } .lx-nextl-in { height: 260px; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .lx-nextl-in > span { display: flex; flex-direction: column; gap: 12px; } .lx-nextl-n { font-family: var(--serif); font-size: clamp(48px, 5.6vw, 80px); line-height: 1; } .lx-nextl-n .lx-bo { font-size: 26px; color: var(--gold-t); } .lx-nextl .lx-i { transition: transform .5s var(--silk); stroke-width: .9; } .lx-nextl:hover .lx-i { transform: translateX(10px); } .lx-cols-head { padding-top: 70px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 22px; } .lx-cols-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 140px; } .lx-colcard { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-2); color: var(--ivory); } .lx-colcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--silk); } .lx-colcard:hover .lx-colcard-img img { transform: scale(1.05); } .lx-colcard-t { position: absolute; left: 30px; right: 30px; bottom: 30px; display: flex; flex-direction: column; gap: 8px; } .lx-colcard-t .lx-k { color: #E3D7BD; } .lx-colcard-n { font-family: var(--serif); font-size: clamp(36px, 3.2vw, 48px); line-height: 1; } .lx-colcard-s { font-family: var(--serif); font-style: italic; font-size: 20px; color: #F2EADA; } /* ============================================================== content pages */ .lx-content .lx-main, body.lx-t-content .lx-main { padding-top: var(--hdr); } .lx-ch-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 47%); min-height: calc(100vh - var(--hdr)); max-height: 820px; } .lx-wrap-l { padding-left: var(--gut); padding-right: clamp(32px, 5.5vw, 80px); } .lx-ch-hero-t { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding-top: 40px; padding-bottom: 60px; } .lx-ch-hero-t .lx-lead { max-width: 520px; } .lx-ch-hero-img { position: relative; overflow: hidden; background: var(--ink-2); } .lx-ch-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lx-sibs { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 26px; } .lx-sib { position: relative; padding-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); transition: color .2s; } .lx-sib.is-on, .lx-sib:hover { color: var(--ink); } .lx-sib.is-on { box-shadow: inset 0 -1px 0 var(--ink); } .lx-chapters { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5.5vw, 80px); padding-top: 120px; padding-bottom: 40px; align-items: start; } .lx-toc { position: sticky; top: calc(var(--top) + 60px); display: flex; flex-direction: column; transition: top .55s var(--silk); } .lx-toc .lx-eyebrow { margin-bottom: 14px; } .lx-toc-a { display: flex; gap: 16px; align-items: center; padding: 12px 0; color: #8A8073; font-size: 14px; transition: color .3s; } .lx-toc-a i { display: block; width: 18px; height: 1px; background: currentColor; transition: width .5s var(--silk); flex: none; } .lx-toc-a:hover { color: var(--ink-3); } .lx-toc-a.is-on { color: var(--ink); } .lx-toc-a.is-on i { width: 44px; } .lx-ch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 4.8vw, 70px); align-items: start; padding-bottom: 120px; scroll-margin-top: 120px; } .lx-ch-t { display: flex; flex-direction: column; gap: 22px; padding-top: 20px; } .lx-ch-no { font-family: var(--serif); font-size: 22px; color: var(--gold-t); } .lx-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .lx-notes li { padding: 16px; border-radius: 14px; background: var(--parch); font-size: 14px; line-height: 1.45; color: var(--ink-3); transition: transform .5s var(--silk), background-color .3s; } .lx-notes li:hover { transform: translateY(-3px); background: var(--ivory); } .lx-ch-img { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--ink-2); } .lx-ch-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-mats { display: flex; flex-direction: column; gap: 22px; padding-bottom: 120px; scroll-margin-top: 120px; } .lx-mat-g { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; padding: 30px 0; border-top: 1px solid var(--rule-2); } .lx-mat-h { margin: 0; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 30px; } .lx-mat-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; } .lx-mat-list dt { font-family: var(--serif); font-size: 24px; line-height: 1.1; margin-bottom: 6px; } .lx-mat-list dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mute); } .lx-cardnote { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 50px; align-items: center; padding: 40px; margin-bottom: 120px; border-radius: 24px; background: var(--night); color: var(--ivory); scroll-margin-top: 120px; } .lx-cardnote .lx-lead { color: #E9E0CC; margin-top: 18px; } .lx-cardnote .lx-eyebrow { color: var(--gold-l); margin-bottom: 14px; } .lx-cardnote-img { border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 4; } .lx-cardnote-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-keep { padding-top: 40px; padding-bottom: 140px; display: flex; flex-direction: column; gap: 40px; } .lx-keep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .lx-rd { display: flex; flex-direction: column; gap: 16px; } .lx-rd-img { display: block; aspect-ratio: 16 / 12; border-radius: 16px; overflow: hidden; background: var(--ink-2); } .lx-rd-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--silk); } .lx-rd:hover .lx-rd-img img { transform: scale(1.05); } .lx-rd-n { font-family: var(--serif); font-size: 30px; line-height: 1.1; } /* ============================================================== help, legal, 404 */ .lx-help-head { padding-top: 70px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 22px; } .lx-help-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5.5vw, 80px); padding-bottom: 140px; align-items: start; } .lx-help-nav { position: sticky; top: calc(var(--top) + 40px); display: flex; flex-direction: column; gap: 40px; transition: top .55s var(--silk); } .lx-help-nav nav { display: flex; flex-direction: column; border-top: 1px solid var(--rule-2); } .lx-hn { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 26px; color: #8A8073; transition: color .3s, padding .35s var(--silk); } .lx-hn span { font-family: var(--sans); font-size: 12px; color: var(--ash); } .lx-hn:hover { color: var(--ink-3); padding-left: 6px; } .lx-hn.is-on { color: var(--ink); } .lx-help-chat { padding: 24px; border-radius: 18px; background: var(--parch); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .lx-help-chat .lx-btn { margin-top: 8px; height: 46px; } .lx-help-panel { min-width: 0; display: flex; flex-direction: column; gap: 26px; } .lx-help-panel.is-swap > * { animation: lxFin .6s var(--silk) both; } .lx-help-panel.is-leave { opacity: .3; transition: opacity .2s; } .lx-faq-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; } .lx-faq-search { display: flex; align-items: center; gap: 10px; height: 50px; width: min(360px, 100%); padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ash); } .lx-faq-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-family: var(--sans); font-size: 15px; color: var(--ink); } .lx-faq { border-top: 1px solid var(--rule-2); } .lx-faq-i > summary { gap: 18px; font-size: 18px; font-weight: 500; letter-spacing: 0; padding: 24px 0; } .lx-faq-no { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--gold-t); width: 28px; flex: none; } .lx-faq-q { flex: 1; font-family: var(--serif); font-size: 24px; line-height: 1.2; } .lx-faq-i .lx-acc-body { padding-left: 46px; font-size: 16px; } .lx-faq-none { margin: 24px 0; color: var(--mute); } .lx-faq-none a { text-decoration: underline; } .lx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .lx-fact { padding: 24px; border-radius: 18px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); display: flex; flex-direction: column; gap: 8px; } .lx-fact b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; } .lx-pol { padding: 26px 0; border-top: 1px solid var(--rule); } .lx-pol h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 28px; } .lx-pol p { margin: 0 0 12px; color: var(--ink-3); font-size: 16px; line-height: 1.7; } .lx-pol .lx-notes, .lx-acc-body .lx-notes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .lx-rsteps li { grid-template-columns: 48px minmax(0, 1fr); } .lx-mails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .lx-mail { padding: 28px; border-radius: 18px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .lx-mail-a { font-family: var(--serif); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; transition: color .25s; } .lx-mail-a:hover { color: var(--gold-t); } .lx-mail .lx-chip { margin-top: 6px; } .lx-read { max-width: 780px; margin: 0 auto; padding: 70px var(--gut) 140px; display: flex; flex-direction: column; gap: 20px; } .lx-read h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 28px 0 0; } .lx-read p, .lx-read li { font-size: 17px; line-height: 1.75; color: var(--ink-3); margin: 0; } .lx-read ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .lx-read a { text-decoration: underline; text-underline-offset: 3px; } .lx-404-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; color: var(--ivory); background: var(--ink-2); overflow: hidden; } .lx-404-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lx-404-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 16, 13, .7), rgba(18, 16, 13, .15)); } .lx-404-t { position: relative; z-index: 1; padding-bottom: 110px; display: flex; flex-direction: column; gap: 22px; } .lx-404-t > * { max-width: 760px; } /* ============================================================== WooCommerce pages (cart, checkout, account) and About */ .lx-wc-head { padding-top: 56px; padding-bottom: 28px; } .lx-wc-body { padding-bottom: 120px; overflow-x: clip; } body.lx .lx-wc-body a { color: inherit; } body.lx .lx-wc-body .wc-block-components-product-name, body.lx .lx-wc-body .wc-block-cart-item__product a { font-family: var(--serif); font-size: 22px; text-decoration: none; } body.lx .lx-wc-body .wc-block-components-button:not(.is-link), body.lx .lx-wc-body .wc-block-cart__submit-button, body.lx .lx-wc-body .wc-block-components-checkout-place-order-button { border-radius: 999px !important; background: var(--ink) !important; color: var(--ivory) !important; font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; font-size: 12px !important; min-height: 54px; border: 0 !important; } body.lx .lx-wc-body .wc-block-components-button:not(.is-link):hover { background: #34302A !important; } /* The empty bag's "New in store" grid (WooCommerce block): the same ink button (the link colour rule above had left * ink text on WordPress's dark button), and square images so one odd-sized photo does not break the row. */ body.lx .lx-wc-body .wc-block-grid__product .wp-block-button__link { border: 0; border-radius: 999px; background: var(--ink); color: var(--ivory); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 12px 22px; } body.lx .lx-wc-body .wc-block-grid__product .wp-block-button__link:hover { background: #34302A; } body.lx .lx-wc-body .wc-block-grid__product-link, body.lx .lx-wc-body .wc-block-grid__product-image { display: block; width: 100%; } body.lx .lx-wc-body .wc-block-grid__product-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } body.lx .lx-wc-body .wc-block-grid__products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; margin: 0; } body.lx .lx-wc-body .wc-block-grid__product { flex: none; max-width: none; width: auto; margin: 0; padding: 0; border: 0; } @media (max-width: 1099px) { body.lx .lx-wc-body .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { body.lx .lx-wc-body .wc-block-grid__products { grid-template-columns: minmax(0, 1fr); } } body.lx .lx-wc-body .wc-block-components-title, body.lx .lx-wc-body .wc-block-components-checkout-step__title, body.lx .lx-wc-body h2 { font-family: var(--serif) !important; font-weight: 400 !important; } body.lx .lx-wc-body .wc-block-components-text-input input, body.lx .lx-wc-body .wc-block-components-combobox input, body.lx .lx-wc-body select, body.lx .lx-wc-body .wc-block-components-textarea { border-radius: 12px !important; border-color: var(--rule-2) !important; background: #fff !important; font-family: var(--sans) !important; } body.lx .lx-wc-body .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description { display: none; } body.lx .lx-wc-body .wc-block-components-sidebar { background: var(--ivory); border-radius: 20px; padding: 24px !important; box-shadow: inset 0 0 0 1px var(--rule); } /* WooCommerce's small-screen layout zeroes it */ @media (max-width: 767px) { body.lx .lx-wc-body .wc-block-components-sidebar { padding: 8px 18px 20px !important; } } body.lx .lx-wc-body .wc-block-components-product-name { overflow-wrap: normal; word-break: normal; hyphens: manual; } body.lx .lx-wc-body .wc-block-components-order-summary .wc-block-components-product-name { font-size: 18px; line-height: 1.25; } /* Tablet widths: WooCommerce keeps two columns and squeezes the summary to ~260px; stack them instead. */ @media (min-width: 768px) and (max-width: 1099px) { body.lx .lx-wc-body .wc-block-components-sidebar-layout { flex-direction: column; } body.lx .lx-wc-body .wc-block-components-sidebar-layout > .wc-block-components-main, body.lx .lx-wc-body .wc-block-components-sidebar-layout > .wc-block-components-sidebar { width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.lx .lx-wc-body .wc-block-components-sidebar-layout > .wc-block-components-main { padding-right: 0 !important; } body.lx .lx-wc-body .wc-block-components-sidebar-layout > .wc-block-components-sidebar { margin-top: 32px !important; } body.woocommerce-checkout.lx .lx-wc-body .wc-block-components-sidebar-layout > .wc-block-components-sidebar { order: -1; margin: 0 0 32px !important; } } /* The checkout summary block draws its own square frame inside our card: one frame is enough. */ body.lx .lx-wc-body .wp-block-woocommerce-checkout-order-summary-block { border: 0 !important; border-radius: 0; } body.lx .lx-wc-body .wp-block-woocommerce-checkout-order-summary-block :is(.wc-block-components-checkout-order-summary__title, .wc-block-components-totals-wrapper, .wc-block-components-order-summary, .wc-block-components-totals-item, .wc-block-components-panel__button, .wc-block-components-totals-footer-item, .wc-block-components-totals-coupon) { padding-left: 0 !important; padding-right: 0 !important; } body.lx .lx-wc-body .wc-block-components-checkout-order-summary__title-text { margin-left: 0 !important; margin-right: 0 !important; } body.lx .lx-wc-body .wc-block-components-product-name { color: var(--ink) !important; } body.lx .lx-wc-body .wc-block-cart-items__header, body.lx .lx-wc-body .wc-block-components-panel__button { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; } body.lx .lx-wc-body .wc-block-components-panel__button { min-height: 44px; display: flex; align-items: center; } /* "Add coupons": a finger-sized row (was 17 px) */ body.lx .lx-wc-body .wc-block-components-checkbox__input:checked { background: var(--ink) !important; border-color: var(--ink) !important; } body.lx .lx-wc-body .woocommerce-info, body.lx .lx-wc-body .woocommerce-message, body.lx .lx-wc-body .wc-block-components-notice-banner { border-radius: 14px; } body.lx .lx-page-body { min-height: 40vh; } body.lx .wc-block-cart__empty-cart__title { font-family: var(--serif); font-weight: 400; font-size: 34px; } body.lx .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; } body.lx .lx-wc-body .wp-block-separator { display: none; } body.lx .lx-wc-body .wp-block-heading { font-family: var(--serif); font-weight: 400; font-size: 32px; text-align: left; } body.lx .lx-wc-body .wc-block-grid__product-title { font-family: var(--serif); font-size: 20px; } body.lx.lx-t-page:not(.woocommerce-page) .lx-main { padding-top: var(--hdr); } /* ============================================================== commerce: bag, checkout, confirmation, pay (commerce.php) */ /* --- focused header while paying */ body.lx.lx-focus { --hdr: var(--bar); } body.lx.lx-focus .lx-main { padding-top: var(--bar); } .lx-hdr-focus .lx-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .lx-fc-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; margin-left: -10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background-color .24s var(--silk); } .lx-fc-back .lx-i { transition: transform .4s var(--silk); } .lx-fc-back:hover { background: rgba(26, 24, 20, .06); } .lx-fc-back:hover .lx-i { transform: translateX(-3px); } .lx-fc-secure { justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--mute); } .lx-fc-secure .lx-i { width: 16px; height: 16px; color: var(--gold); } .lx-ft-slim { padding-top: 0; } .lx-ft-slim .lx-ft-base { border-top: 0; } .lx-ft-slim .lx-ft-legal { flex-wrap: wrap; gap: 8px 22px; } /* --- step line: Bag → Details & payment → Confirmation */ .lx-wc-head.has-steps { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 48px; } .lx-csteps { display: flex; align-items: center; margin: 0 0 8px; padding: 0; list-style: none; } .lx-cstep { display: flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); white-space: nowrap; } .lx-cstep > a, .lx-cstep > span:not(.lx-cstep-dot) { display: inline-flex; align-items: center; gap: 10px; } .lx-cstep > a { transition: color .2s; } .lx-cstep > a:hover { color: var(--ink); } .lx-cstep + .lx-cstep::before { content: ''; width: clamp(24px, 4vw, 64px); height: 1px; margin: 0 14px; background: var(--rule-2); transform-origin: left; } .lx-cstep.is-done + .lx-cstep::before { background: var(--ink); animation: lxStepFill .9s var(--out) .15s both; } @keyframes lxStepFill { from { transform: scaleX(0); } } .lx-cstep-dot { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 11px; letter-spacing: 0; margin-right: 10px; } .lx-cstep > a .lx-cstep-dot, .lx-cstep > span:not(.lx-cstep-dot) .lx-cstep-dot { margin-right: 0; } .lx-cstep.is-done { color: var(--ink-3); } .lx-cstep.is-done .lx-cstep-dot { background: var(--gold); color: var(--ivory); box-shadow: none; } .lx-cstep.is-now { color: var(--ink); } .lx-cstep.is-now .lx-cstep-dot { background: var(--ink); color: var(--ivory); box-shadow: none; } .lx-cstep.is-now .lx-cstep-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(26, 24, 20, .22); animation: lxRing 2.4s var(--silk) infinite; } @keyframes lxRing { 0% { transform: scale(.8); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } } /* --- shared block look (bag + checkout) */ body.lx .lx-wc-buy .wc-block-components-main { padding-right: clamp(24px, 4vw, 72px) !important; } body.lx .lx-wc-buy .wc-block-components-sidebar { position: sticky; top: calc(var(--top) + 24px); align-self: flex-start; padding: 30px 30px 26px !important; border-radius: 24px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule), 0 30px 60px -44px rgba(26, 24, 20, .35); transition: top .55s var(--silk); } body.lx .lx-wc-buy .wc-block-components-sidebar-layout { align-items: flex-start; } body.lx .lx-wc-buy .wc-block-components-totals-item { font-size: 14px; color: var(--ink-3); } body.lx .lx-wc-buy .wc-block-components-totals-footer-item { padding-top: 18px !important; } body.lx .lx-wc-buy .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-family: var(--serif); font-size: 24px; color: var(--ink); } body.lx .lx-wc-buy .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--ink); } body.lx .lx-wc-buy .wc-block-components-totals-wrapper { border-color: var(--rule) !important; } body.lx .lx-wc-buy .wc-block-components-totals-coupon__form { gap: 10px; } body.lx .lx-wc-buy .wc-block-components-totals-coupon__button { min-height: 50px !important; padding: 0 22px !important; } /* The bag has no email yet, and WELCOME20 only works for the address it was sent to: say where it goes. */ body.lx.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__content::after { content: "Welcome code? Enter it at checkout, with the email address it was sent to."; display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--mute); } body.lx .lx-wc-buy .wc-block-components-panel__button { font-weight: 700; color: var(--ink-3); } body.lx .lx-wc-buy .wc-block-components-panel__button:hover { color: var(--ink); } body.lx .lx-wc-buy .wc-block-components-button:not(.is-link) { transition: background-color .24s var(--silk), transform .24s var(--silk), box-shadow .24s var(--silk); } body.lx .lx-wc-buy .wc-block-components-button:not(.is-link):active { transform: scale(.985); } body.lx .lx-wc-buy .wc-block-components-button:not(.is-link):hover { box-shadow: 0 12px 26px -14px rgba(26, 24, 20, .7); } /* Notices: quiet cards, not WooCommerce's coloured bars. */ body.lx .lx-wc .wc-block-components-notice-banner { align-items: flex-start; gap: 12px; padding: 14px 18px; border: 0; border-radius: 14px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-3); font-size: 14px; animation: lxNote .5s var(--out) both; } body.lx .lx-wc .wc-block-components-notice-banner.is-error { background: #FBF1EC; box-shadow: inset 0 0 0 1px rgba(138, 46, 30, .25); color: #6E2618; } body.lx .lx-wc .wc-block-components-notice-banner.is-success { background: #F1F3EA; box-shadow: inset 0 0 0 1px rgba(80, 96, 50, .25); } body.lx .lx-wc .wc-block-components-notice-banner > svg { flex: none; width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: transparent !important; fill: currentColor; } @keyframes lxNote { from { opacity: 0; transform: translateY(-6px); } } /* Express buttons: a quiet placeholder holds their place while Stripe and PayPal load (the script marks * .is-xp-ready when they have drawn, or gives up after 12 s), so nothing below jumps when they appear. */ body.lx .lx-wc-buy .wc-block-components-express-payment { position: relative; margin: 0 0 8px; border: 0; } body.lx .lx-wc-buy .wc-block-components-express-payment__title-container { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } body.lx .lx-wc-buy .wc-block-components-express-payment__title-container::before, body.lx .lx-wc-buy .wc-block-components-express-payment__title-container::after { content: ''; flex: 1; height: 1px; background: var(--rule); } body.lx .lx-wc-buy .wc-block-components-express-payment__title { position: static !important; transform: none !important; padding: 0 !important; background: none !important; font-family: var(--sans) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); } body.lx .lx-wc-buy .wc-block-components-express-payment__content { padding: 0 !important; border: 0 !important; box-shadow: none !important; } body.lx .lx-wc-buy .wc-block-components-express-payment__event-buttons { gap: 10px; } body.lx .lx-wc-buy .wc-block-components-express-payment__event-buttons > li { margin: 0 !important; } body.lx .lx-wc-buy .wc-block-components-express-payment-continue-rule { margin: 22px 0 6px; font-size: 12px; letter-spacing: .06em; color: var(--ash); text-transform: none; } body.lx .lx-wc-buy .wc-block-components-express-payment-continue-rule::before, body.lx .lx-wc-buy .wc-block-components-express-payment-continue-rule::after { border-color: var(--rule) !important; } .lx-xp-wait { position: relative; min-height: 48px; } .lx-xp-wait::after, .lx-xp-skel { content: ''; position: absolute; inset: 0; min-height: 48px; border-radius: 10px; background: linear-gradient(100deg, rgba(26, 24, 20, .05) 30%, rgba(26, 24, 20, .1) 50%, rgba(26, 24, 20, .05) 70%) 0 0 / 300% 100%; animation: lxShim 1.6s linear infinite; pointer-events: none; transition: opacity .4s var(--silk); } .lx-xp-wait.is-xp-ready::after { opacity: 0; animation: none; } .lx-xp-wait.is-xp-ready { min-height: 0; } @keyframes lxShim { from { background-position: 100% 0; } to { background-position: -50% 0; } } .lx-xp-in { animation: lxXpIn .6s var(--out) both; } @keyframes lxXpIn { from { opacity: 0; transform: translateY(6px); } } /* Product page: the placeholder sits where Stripe's element will appear. */ .lx-xp-skel { position: relative; display: block; height: 48px; margin-top: 12px; } /* PayPal's product-page button and Pay Later note, under the express buttons. */ .lx-buy-form #ppc-button-ppcp-gateway, .lx-buy-form .ppcp-messages, .lx-buy-form [id^="ppcp-messages"] { margin-top: 10px; } .lx-buy-form #ppc-button-ppcp-gateway:empty { display: none; } /* Pieces made in sizes: PayPal stays folded away until a size is chosen (before that it showed as a grey, disabled * button under its own loading bar). Collapsed rather than display:none, so PayPal's frame still renders. */ .lx-buy-form .ppc-button-wrapper { transition: max-height .35s ease, opacity .3s ease; max-height: 200px; } .lx-buy-form:has(.single_add_to_cart_button.wc-variation-selection-needed) .ppc-button-wrapper { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .lx-buy-form .ppc-button-wrapper { transition: none; } } .lx-xp-skel.is-gone { opacity: 0; height: 0; min-height: 0; margin: 0; transition: opacity .3s, height .35s var(--silk), margin .35s var(--silk); } /* Trust notes under the summary. */ .lx-buytrust { display: block !important; width: 100%; flex: 0 0 100%; margin-top: 18px; padding: 22px 4px 0; border-top: 1px solid var(--rule); } .lx-main > .lx-buytrust { display: none !important; } /* until the script places it in the sidebar (it used to show at the foot of the page first, then jump) */ .lx-buytrust ul { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; } .lx-buytrust li::before, .lx-buytrust li::after { display: none !important; } .lx-buytrust li { margin: 0; padding: 0; border: 0; align-items: start; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; font-size: 13px; line-height: 1.55; color: var(--mute); } .lx-buytrust li b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--ink); } .lx-bt-i { color: var(--gold); display: inline-flex; } .lx-bt-help { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--mute); } .lx-buytrust.is-in li { animation: lxFin .7s var(--silk) both; } .lx-buytrust.is-in li:nth-child(2) { animation-delay: .08s; } .lx-buytrust.is-in li:nth-child(3) { animation-delay: .16s; } /* Free-shipping line at the top of the summary. */ .lx-free { display: block; width: 100%; flex: 0 0 100%; margin: 0 0 22px; padding: 14px 16px 16px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); font-size: 13px; color: var(--ink-3); } .lx-free p { margin: 0 0 10px; display: flex; gap: 8px; align-items: center; } .lx-free.is-met p { color: var(--ink); font-weight: 600; } .lx-free.is-met .lx-i { color: var(--gold); } .lx-free .lx-prog { height: 4px; } .lx-free.is-met .lx-prog i { background: var(--ink); } /* --- bag page */ body.lx .lx-wc-buy .wc-block-cart { padding-top: 12px; } body.lx .lx-wc-buy .wc-block-cart-items { border: 0; } body.lx .lx-wc-buy .wc-block-cart-items__header { display: none; } body.lx .lx-wc-buy .wc-block-cart-items__row { display: grid !important; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 0 28px; padding: 28px 0 !important; border-top: 1px solid var(--rule); animation: lxFin .7s var(--silk) both; } body.lx .lx-wc-buy .wc-block-cart-items__row:last-child { border-bottom: 1px solid var(--rule); } body.lx .lx-wc-buy .wc-block-cart-items__row:nth-child(2) { animation-delay: .06s; } body.lx .lx-wc-buy .wc-block-cart-items__row:nth-child(3) { animation-delay: .12s; } body.lx .lx-wc-buy .wc-block-cart-items__row > td { display: block; padding: 0 !important; border: 0 !important; } body.lx .lx-wc-buy .wc-block-cart-item__image { width: 132px; } body.lx .lx-wc-buy .wc-block-cart-item__image a { display: block; overflow: hidden; border-radius: 16px; background: var(--parch); } body.lx .lx-wc-buy .wc-block-cart-item__image img { display: block; width: 100% !important; height: auto !important; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--silk); } body.lx .lx-wc-buy .wc-block-cart-item__image a:hover img { transform: scale(1.05); } body.lx .lx-wc-buy .wc-block-cart-item__wrap { display: flex; flex-direction: column; gap: 8px; } body.lx .lx-wc-buy .wc-block-cart-item__product .wc-block-components-product-name { font-size: 26px; line-height: 1.15; } body.lx .lx-wc-buy .wc-block-cart-item__prices { font-size: 14px; color: var(--mute); } body.lx .lx-wc-buy .wc-block-cart-item__product .wc-block-components-product-metadata__description { display: none; } body.lx .lx-wc-buy .wc-block-cart-item__quantity { display: flex; align-items: center; gap: 16px; margin-top: 10px; } body.lx .lx-wc-buy .wc-block-components-quantity-selector { width: 124px; height: 44px; border: 0 !important; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); overflow: hidden; } body.lx .lx-wc-buy .wc-block-components-quantity-selector::after { display: none; } body.lx .lx-wc-buy .wc-block-components-quantity-selector__input { font-family: var(--sans); font-size: 15px; font-weight: 600; background: transparent !important; box-shadow: none !important; } body.lx .lx-wc-buy .wc-block-components-quantity-selector__button { min-width: 40px; font-size: 18px; color: var(--ink); opacity: 1; transition: background-color .2s; } body.lx .lx-wc-buy .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: rgba(26, 24, 20, .06); } body.lx .lx-wc-buy .wc-block-components-quantity-selector__button:disabled { opacity: .3; } body.lx .lx-wc-buy .wc-block-cart-item__remove-link { visibility: visible !important; opacity: 1 !important; border: 0 !important; background: none; cursor: pointer; display: inline-flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 12px !important; border-radius: 999px; font-size: 12px !important; font-weight: 600; letter-spacing: .08em; color: var(--ash) !important; text-decoration: none !important; transition: background-color .2s, color .2s; } body.lx .lx-wc-buy .wc-block-cart-item__remove-link:hover { background: rgba(26, 24, 20, .06); color: var(--ink) !important; } body.lx .lx-wc-buy .wc-block-cart-item__remove-link svg { width: 16px; height: 16px; fill: currentColor; } body.lx .lx-wc-buy .wc-block-cart-item__remove-link::after { content: 'Remove'; } body.lx .lx-wc-buy .wc-block-cart-item__total { text-align: right; } body.lx .lx-wc-buy .wc-block-cart-item__total .wc-block-components-product-price, body.lx .lx-wc-buy .wc-block-cart-item__total .wc-block-formatted-money-amount { font-family: var(--serif); font-size: 22px !important; font-weight: 400; color: var(--ink); } body.lx .lx-wc-buy .wc-block-cart-item__total .wc-block-components-sale-badge { font-family: var(--sans); } body.lx .lx-wc-buy .wc-block-cart__totals-title { display: block; margin: 0 0 18px !important; padding: 0 !important; font-family: var(--serif) !important; font-size: 28px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink); } body.lx .lx-wc-buy .wc-block-cart__submit { margin: 18px 0 0; } body.lx .lx-wc-buy .wc-block-cart__submit-button { min-height: 58px !important; } body.lx .lx-wc-buy .wc-block-cart__submit-button .wc-block-components-button__text::after { content: '→'; display: inline-block; margin-left: 12px; transition: transform .4s var(--silk); } body.lx .lx-wc-buy .wc-block-cart__submit-button:hover .wc-block-components-button__text::after { transform: translateX(4px); } body.lx .lx-wc-buy .wc-block-cart__payment-options { margin-top: 4px; } /* Phones: WooCommerce pins a second "checkout" button to the bottom; make it a glass bar that clears the content. */ body.lx .wc-block-cart__submit-container--sticky { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; background: rgba(245, 240, 232, .88) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-top: 1px solid var(--rule); box-shadow: 0 -12px 30px -24px rgba(26, 24, 20, .5) !important; } body.lx .wc-block-cart__submit-container--sticky::before { display: none !important; } body.woocommerce-cart.lx .lx-wc-buy { padding-bottom: 96px; } /* Bag items drawn by the script (lx-bl): WooCommerce's own list stays in the page but out of sight. */ body.lx .lx-wc-buy.lx-bl-on .wc-block-cart-items { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .lx-bl { border-top: 1px solid var(--rule); } .lx-bl-item { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 0 28px; padding: 28px 0; border-bottom: 1px solid var(--rule); overflow: hidden; animation: lxFin .6s var(--silk) both; animation-delay: calc(var(--i, 0) * 60ms); transition: height .4s var(--silk), padding .4s var(--silk), opacity .3s ease; } .lx-bl-item.is-gone { opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; } .lx-bl-img { display: block; overflow: hidden; border-radius: 16px; background: var(--parch); aspect-ratio: 4 / 5; } .lx-bl-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--silk); } .lx-bl-img:hover img { transform: scale(1.05); } .lx-bl-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .lx-bl-name { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--ink); } .lx-bl-name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .lx-bl-meta { font-size: 12.5px; line-height: 1.5; color: var(--mute); } .lx-bl-unit { font-size: 14px; color: var(--mute); } .lx-bl-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .lx-bl-step { display: inline-flex; align-items: center; height: 46px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); background: #fff; } .lx-bl-step button { width: 46px; height: 46px; border: 0; border-radius: 999px; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .2s, opacity .2s; } .lx-bl-step button:hover:not(:disabled) { background: rgba(26, 24, 20, .06); } .lx-bl-step button:disabled { opacity: .28; cursor: default; } .lx-bl-q { min-width: 28px; text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .lx-bl-rm { height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ash); cursor: pointer; transition: background-color .2s, color .2s; } .lx-bl-rm:hover { background: rgba(26, 24, 20, .06); color: var(--ink); } .lx-bl-total { font-family: var(--serif); font-size: 22px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } .lx-bl-item.is-sync .lx-bl-total { opacity: .55; transition: opacity .3s; } .lx-bl-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; padding: 12px 16px; border-radius: 14px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; color: var(--ink-3); animation: lxNote .4s var(--out) both; transition: opacity .35s ease, transform .35s ease; } .lx-bl-undo.is-out { opacity: 0; transform: translateY(-6px); } .lx-bl-undo .lx-tl { font-size: 13px; font-weight: 600; color: var(--ink); } @media (max-width: 767px) { .lx-bl-item { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; padding: 20px 0; } .lx-bl-total { display: none; } .lx-bl-name { font-size: 21px; } .lx-bl-row { margin-top: 6px; } } @media (prefers-reduced-motion: reduce) { .lx-bl-item { animation: none; transition: none; } } /* Empty bag */ body.lx .lx-empty-bag { max-width: 620px; margin: 24px auto 0; padding: 56px 24px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } .lx-eb-mark { width: 84px; height: 84px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); color: var(--gold); animation: lxFloat 5s ease-in-out infinite; } @keyframes lxFloat { 50% { transform: translateY(-6px); } } .lx-empty-bag .lx-lead { max-width: 440px; } .lx-empty-bag .lx-row { margin-top: 8px; } .lx-eb-more { padding-top: 56px; border-top: 1px solid var(--rule); } .lx-eb-more .lx-sec-head { margin-bottom: 36px; } /* --- checkout */ body.lx .lx-wc-buy .wc-block-checkout { padding-top: 12px; } body.lx .lx-wc-buy .wc-block-components-checkout-step { position: relative; margin: 0 0 8px !important; padding: 0 0 30px 56px !important; counter-increment: lxco; } body.lx .lx-wc-buy .wc-block-checkout__main { counter-reset: lxco; } body.lx .lx-wc-buy .wc-block-components-checkout-step::before { content: attr(data-lx-n); position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--gold-t); box-shadow: inset 0 0 0 1px var(--rule-2); transition: background-color .4s var(--silk), color .4s var(--silk), box-shadow .4s; } body.lx .lx-wc-buy .wc-block-components-checkout-step::after { content: ''; position: absolute; left: 18px; top: 46px; bottom: 6px; width: 1px; background: var(--rule); } body.lx .lx-wc-buy .wc-block-components-checkout-step:last-of-type::after { display: none; } body.lx .lx-wc-buy .wc-block-components-checkout-step.is-lx-plain::before, body.lx .lx-wc-buy .wc-block-components-checkout-step.is-lx-plain::after { display: none; } body.lx .lx-wc-buy .wc-block-components-checkout-step.is-lx-plain { padding-bottom: 12px !important; } body.lx .lx-wc-buy .wc-block-components-checkout-step.is-lx-done::before { content: '✓'; background: var(--ink); color: var(--ivory); box-shadow: none; font-size: 13px; } body.lx .lx-wc-buy .wc-block-components-checkout-step__heading { margin: 4px 0 18px !important; } body.lx .lx-wc-buy .wc-block-components-checkout-step__title { font-size: 28px !important; line-height: 1.15; color: var(--ink); } body.lx .lx-wc-buy .wc-block-components-checkout-step__description { font-size: 14px; color: var(--mute); } body.lx .lx-wc-buy .wc-block-components-checkout-step__container::after { display: none !important; } /* WooCommerce's own step rail */ body.lx .lx-wc-buy .wc-block-components-checkout-step::before { z-index: 1; } /* Fields: taller, softer, the label floats inside. */ body.lx .lx-wc-buy .wc-block-components-text-input input, body.lx .lx-wc-buy .wc-block-components-combobox .components-combobox-control input.components-combobox-control__input, body.lx .lx-wc-buy .wc-blocks-components-select__select, body.lx .lx-wc-buy .wc-block-components-textarea { min-height: 56px; border-radius: 14px !important; border: 1px solid var(--rule-2) !important; background: #fff !important; font-size: 15px !important; color: var(--ink) !important; box-shadow: none !important; transition: border-color .2s, box-shadow .2s; } body.lx .lx-wc-buy .wc-block-components-text-input input:focus, body.lx .lx-wc-buy .wc-blocks-components-select__select:focus, body.lx .lx-wc-buy .wc-block-components-textarea:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 3px rgba(26, 24, 20, .08) !important; } body.lx .lx-wc-buy .wc-blocks-components-select__container { border-radius: 14px; background: #fff; } body.lx .lx-wc-buy .wc-block-components-text-input label, body.lx .lx-wc-buy .wc-blocks-components-select__label { color: var(--ash) !important; } body.lx .lx-wc-buy .has-error input, body.lx .lx-wc-buy .has-error select { border-color: #A24A36 !important; background: #FFFCFA !important; } body.lx .lx-wc-buy .has-error label { color: #8A2E1E !important; } body.lx .lx-wc-buy .wc-block-components-validation-error { font-size: 12.5px; color: #8A2E1E; animation: lxNote .35s var(--out) both; } body.lx .lx-wc-buy .wc-block-components-validation-error svg { fill: #A24A36; } body.lx .lx-wc-buy .has-error.lx-shake { animation: lxShake .42s var(--silk); } @keyframes lxShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } body.lx .lx-wc-buy .wc-block-components-address-form__address_2-toggle { font-size: 13px; color: var(--mute); } body.lx .lx-wc-buy .wc-block-checkout__guest-checkout-notice, body.lx .lx-wc-buy .wc-block-checkout__login-prompt { font-size: 13px; color: var(--mute); } /* Shipping and payment choices: cards with a soft selected state. */ body.lx .lx-wc-buy .wc-block-components-radio-control--highlight-checked { border-radius: 16px; } body.lx .lx-wc-buy .wc-block-components-radio-control--highlight-checked::after, body.lx .lx-wc-buy .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted, body.lx .lx-wc-buy .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 1.5px var(--ink) !important; border-radius: 16px; } body.lx .lx-wc-buy .wc-block-components-radio-control-accordion-option, body.lx .lx-wc-buy .wc-block-components-radio-control__option { border-radius: 16px; } body.lx .lx-wc-buy .wc-block-components-radio-control__option { padding-top: 18px !important; padding-bottom: 18px !important; } body.lx .lx-wc-buy .wc-block-components-radio-control__input { border-color: var(--rule-2) !important; } body.lx .lx-wc-buy .wc-block-components-radio-control__input:checked { border-color: var(--ink) !important; } body.lx .lx-wc-buy .wc-block-components-radio-control__input:checked::before { background: var(--ink) !important; } body.lx .lx-wc-buy .wc-block-components-radio-control__label { font-size: 15px; font-weight: 600; color: var(--ink); } body.lx .lx-wc-buy .wc-block-components-radio-control-accordion-content { padding-bottom: 18px; } body.lx .lx-wc-buy .wc-block-checkout__payment-method .wc-block-components-radio-control { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule-2); background: #fff; } body.lx .lx-wc-buy .wc-block-checkout__payment-method .wc-block-components-radio-control::after { border-radius: 16px; } body.lx .lx-wc-buy .wc-block-checkout__shipping-option .wc-block-components-radio-control__option { background: #fff; box-shadow: inset 0 0 0 1px var(--rule-2); } body.lx .lx-wc-buy .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__secondary-label { font-family: var(--serif); font-size: 18px; font-weight: 400; } /* The terms line and the pay button. */ body.lx .lx-wc-buy .wc-block-checkout__terms { margin: 8px 0 18px !important; font-size: 13px; color: var(--mute); } body.lx .lx-wc-buy .wc-block-checkout__terms a { text-decoration: underline; text-underline-offset: 3px; } body.lx .lx-wc-buy .wc-block-checkout__actions { padding-left: 56px; } body.lx .lx-wc-buy .wc-block-checkout__actions_row { gap: 18px; } body.lx .lx-wc-buy .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button { font-size: 13px; color: var(--mute); } body.lx .lx-wc-buy .wc-block-components-checkout-place-order-button { min-height: 60px !important; width: 100%; flex: 1; } body.lx .lx-wc-buy .wc-block-components-checkout-place-order-button .wc-block-components-button__text { display: inline-flex; align-items: center; justify-content: center; } body.lx .lx-wc-buy .wc-block-components-checkout-place-order-button .wc-block-components-button__text::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 12px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; } /* Summary on the checkout: the pieces with a count badge on the photo. */ body.lx .lx-wc-buy .wc-block-components-checkout-order-summary__title { margin-bottom: 8px; } body.lx .lx-wc-buy .wc-block-components-checkout-order-summary__title-text { font-family: var(--serif) !important; font-size: 28px !important; font-weight: 400 !important; } body.lx .lx-wc-buy .wc-block-components-order-summary-item { padding: 14px 0 !important; gap: 16px; } body.lx .lx-wc-buy .wc-block-components-order-summary-item__image { width: 64px !important; } body.lx .lx-wc-buy .wc-block-components-order-summary-item__image img { width: 64px !important; height: 80px; object-fit: cover; border-radius: 12px; background: var(--parch); } body.lx .lx-wc-buy .wc-block-components-order-summary-item__quantity { min-width: 22px; height: 22px; border: 0 !important; background: var(--ink) !important; color: var(--ivory) !important; box-shadow: 0 0 0 2px var(--ivory) !important; font-size: 11px; font-weight: 700; } body.lx .lx-wc-buy .wc-block-components-order-summary-item__individual-prices { display: none; } body.lx .lx-wc-buy .wc-block-components-order-summary-item__total-price { font-family: var(--serif); font-size: 18px; font-weight: 400; } /* Phones: the summary folds shut at the top; keep it a tidy bar. */ body.lx .lx-wc-buy .wc-block-components-checkout-order-summary__title[aria-expanded] { cursor: pointer; margin: 0; padding: 4px 0 !important; } body.lx .lx-wc-buy .checkout-order-summary-block-fill-wrapper:empty { display: none; } /* --- confirmation */ .lx-ty { padding: 56px 0 120px; } .lx-ty-top { padding-bottom: 64px; } .lx-ty-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 760px; } .lx-ty-h { font-size: clamp(46px, 5.6vw, 84px); } .lx-ty-h em { font-style: italic; } .lx-ty-hero .lx-lead { max-width: 600px; } .lx-ty-mail { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 10px 18px 10px 14px; border-radius: 999px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; color: var(--mute); } .lx-ty-mail .lx-i { color: var(--gold); } .lx-ty-mail b { color: var(--ink); font-weight: 600; } .lx-ty-hero .lx-row { margin-top: 10px; } .lx-ty-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 48px clamp(40px, 6vw, 110px); align-items: start; } .lx-ty-side { position: sticky; top: calc(var(--top) + 24px); transition: top .55s var(--silk); } .lx-ty-next { padding: 40px 0 44px; border-top: 1px solid var(--rule); } .lx-ty-next .lx-h-m { margin-bottom: 32px; } .lx-ty-extra:empty { display: none; } .lx-ty-extra { margin-bottom: 36px; font-size: 15px; color: var(--ink-3); } .lx-ty-extra h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; } .lx-ty-help { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; padding: 28px 28px 30px; border-radius: 22px; background: var(--parch); } .lx-ty-help-t { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 24px; } .lx-ty-help .lx-row { margin-top: 14px; gap: 14px 28px; } .lx-ty-help .lx-lnk { background: none; border: 0; padding: 0 0 6px; color: var(--ink); } .lx-ty.is-failed .lx-seal { color: #A24A36; } /* The seal: ring draws, inner ring fades in, the mark draws last. */ .lx-seal { display: inline-flex; width: 80px; height: 80px; color: var(--gold); } .lx-seal svg { width: 100%; height: 100%; overflow: visible; } .lx-seal-r { stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 40px 40px; animation: lxDraw 1.1s var(--out) .1s forwards; } .lx-seal-r2 { stroke-width: 1; opacity: 0; stroke-dasharray: 2 4; animation: lxSealIn 1s var(--silk) .6s forwards, lxSpin 40s linear 1.6s infinite; transform-origin: 40px 40px; } .lx-seal-m { stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lxDraw .6s var(--out) .8s forwards; } .lx-seal.is-ok .lx-seal-m { color: var(--ink); } @keyframes lxDraw { to { stroke-dashoffset: 0; } } @keyframes lxSealIn { to { opacity: .45; } } @keyframes lxSpin { to { transform: rotate(360deg); } } /* What happens next: a vertical line through four stations; the current one breathes. */ .lx-tl-list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } .lx-tl-list::before { content: ''; position: absolute; left: 13px; right: 12%; top: 13px; height: 1px; background: var(--rule-2); } .lx-tl-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 12px; animation: lxFin .8s var(--silk) both; animation-delay: calc(.9s + var(--i) * .12s); } .lx-tl-dot { position: relative; z-index: 1; width: 27px; height: 27px; margin-bottom: 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ivory); } .lx-tl-step.is-done .lx-tl-dot { background: var(--gold); box-shadow: none; } .lx-tl-step.is-now .lx-tl-dot { background: var(--ink); box-shadow: none; } .lx-tl-step.is-now .lx-tl-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(26, 24, 20, .25); animation: lxRing 2.4s var(--silk) infinite; } .lx-tl-t { font-family: var(--serif); font-size: 21px; line-height: 1.2; color: var(--ink); } .lx-tl-step:not(.is-done):not(.is-now) .lx-tl-t { color: var(--mute); } /* The order card (confirmation, pay-for-order; the account's order page later). */ .lx-oc { padding: 30px 30px 28px; border-radius: 24px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule), 0 30px 60px -44px rgba(26, 24, 20, .35); animation: lxFin .9s var(--silk) .3s both; } .lx-oc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); } .lx-oc-t { font-family: var(--serif); font-size: 26px; } .lx-oc-items { margin: 0; padding: 4px 0; list-style: none; } .lx-oc-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; } .lx-oc-item + .lx-oc-item { border-top: 1px solid var(--rule); } .lx-oc-media { position: relative; display: block; width: 64px; } .lx-oc-img { display: block; width: 64px; height: 80px; object-fit: cover; border-radius: 12px; background: var(--parch); } .lx-oc-qty { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ivory); box-shadow: 0 0 0 2px var(--ivory); font-size: 11px; font-weight: 700; } .lx-oc-name { display: flex; flex-direction: column; gap: 4px; font-family: var(--serif); font-size: 19px; line-height: 1.2; } .lx-oc-name a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .lx-oc-name small { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--mute); } .lx-oc-price { font-family: var(--serif); font-size: 18px; white-space: nowrap; } .lx-oc-totals { margin: 0; padding: 14px 0 4px; border-top: 1px solid var(--rule); } .lx-oc-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 14px; color: var(--ink-3); } .lx-oc-row dt, .lx-oc-row dd { margin: 0; } .lx-oc-row dd { text-align: right; } .lx-oc-row dd small, .lx-oc-row .shipped_via { display: block; font-size: 12px; color: var(--ash); } .lx-oc-row.is-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--rule); align-items: baseline; } .lx-oc-row.is-total dt { font-family: var(--serif); font-size: 22px; color: var(--ink); } .lx-oc-row.is-total dd { font-family: var(--serif); font-size: 28px; color: var(--ink); } .lx-oc-row.is-pay { font-size: 13px; color: var(--ash); } .lx-oc-note { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--bg); } .lx-oc-note .lx-k { color: var(--gold-t); } .lx-oc-note p { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; } .lx-oc-addr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); } .lx-oc-addr .lx-k { display: block; margin-bottom: 8px; color: var(--ash); font-size: 10.5px; } .lx-oc-addr address { font-style: normal; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); overflow-wrap: anywhere; } /* --- pay for order */ .lx-pay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 48px clamp(40px, 6vw, 110px); align-items: start; padding-top: 56px; padding-bottom: 120px; } .lx-pay-main { display: flex; flex-direction: column; gap: 18px; } .lx-pay-main .lx-h-l em { font-style: italic; } .lx-pay-form { margin-top: 18px; } body.lx .lx-pay #payment { background: none; border-radius: 0; } body.lx .lx-pay ul.payment_methods { margin: 0 0 24px; padding: 0; border: 0; list-style: none; display: grid; gap: 12px; } body.lx .lx-pay li.wc_payment_method { margin: 0; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule-2); transition: box-shadow .25s var(--silk); } body.lx .lx-pay li.wc_payment_method:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--ink); } body.lx .lx-pay li.wc_payment_method > label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; } body.lx .lx-pay li.wc_payment_method > input { accent-color: var(--ink); margin-right: 10px; } body.lx .lx-pay li.wc_payment_method img { max-height: 22px; } body.lx .lx-pay .payment_box { margin-top: 14px; padding: 16px; border-radius: 12px; background: var(--bg) !important; color: var(--ink-3); font-size: 14px; } body.lx .lx-pay .payment_box::before { display: none; } body.lx .lx-pay .woocommerce-terms-and-conditions-wrapper, body.lx .lx-pay .woocommerce-privacy-policy-text { margin: 0 0 16px; font-size: 13px; color: var(--mute); } body.lx .lx-pay #payment #place_order { width: 100%; height: 60px; float: none; margin: 0; border: 0; border-radius: 999px; background: var(--ink) !important; color: var(--ivory) !important; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } body.lx .lx-pay #payment #place_order:hover { background: #34302A !important; } body.lx .lx-pay #payment div.payment_box::before { display: none; } body.lx .lx-pay #payment div.form-row { padding: 0; } body.lx .lx-pay #payment #place_order::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; } .lx-pay-note { display: flex; gap: 10px; align-items: center; } .lx-pay-note .lx-i { width: 16px; height: 16px; color: var(--gold); } .lx-pay-side { position: sticky; top: calc(var(--top) + 24px); } @media (max-width: 1099px) { .lx-ty-grid, .lx-pay { grid-template-columns: minmax(0, 1fr); } .lx-ty-side, .lx-pay-side { position: static; } .lx-pay-side { order: -1; } body.lx .lx-wc-buy .wc-block-components-main { padding-right: 0 !important; } body.lx .lx-wc-buy .wc-block-components-sidebar { position: static; } } @media (max-width: 767px) { .lx-wc-head.has-steps { flex-direction: column; align-items: flex-start; } .lx-cstep:not(.is-now) > a > span:last-child, .lx-cstep:not(.is-now) > span:last-child { display: none; } .lx-cstep + .lx-cstep::before { width: 22px; margin: 0 8px; } body.lx .lx-wc-buy .wc-block-components-sidebar { padding: 22px 20px !important; border-radius: 20px; } body.lx .lx-wc-buy .wc-block-cart-items__row { grid-template-columns: 96px minmax(0, 1fr) !important; column-gap: 18px !important; padding: 22px 0 !important; } body.lx .lx-wc-buy .wc-block-cart-item__image { width: 96px; grid-row: span 2; } body.lx .lx-wc-buy .wc-block-cart-item__total { display: none !important; } body.lx .lx-wc-buy .wc-block-cart-item__product .wc-block-components-product-name { font-size: 21px; } body.lx .lx-wc-buy .wc-block-components-checkout-step { padding-left: 0 !important; } body.lx .lx-wc-buy .wc-block-components-checkout-step::before { position: static; display: inline-flex; margin-bottom: 10px; width: 30px; height: 30px; } body.lx .lx-wc-buy .wc-block-components-checkout-step::after { display: none; } body.lx .lx-wc-buy .wc-block-components-checkout-step__title { font-size: 25px !important; } body.lx .lx-wc-buy .wc-block-checkout__actions { padding-left: 0; } .lx-ty { padding-top: 24px; } .lx-ty-top { padding-bottom: 40px; } .lx-seal { width: 64px; height: 64px; } .lx-tl-list { grid-template-columns: minmax(0, 1fr); gap: 22px; } .lx-tl-list::before { left: 13px; right: auto; top: 13px; bottom: 13px; width: 1px; height: auto; } .lx-tl-step { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 2px 16px; padding: 0; } .lx-tl-dot { grid-row: span 2; margin: 0; } .lx-oc { padding: 22px 20px; border-radius: 20px; } .lx-oc-addr { grid-template-columns: minmax(0, 1fr); } .lx-ty-help { padding: 22px 20px; } .lx-pay { padding-top: 24px; } .lx-empty-bag { padding-top: 24px; } } @media (prefers-reduced-motion: reduce) { .lx-seal-r, .lx-seal-m { stroke-dashoffset: 0; } .lx-seal-r2 { opacity: .45; } } /* ============================================================== account (account.php) */ div.lx-acc { padding-top: 56px; padding-bottom: 120px; } /* the account page wrapper only — details.lx-acc accordions (product, FAQ) share the name */ .lx-acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding-bottom: 44px; } .lx-acc-hello { display: flex; flex-direction: column; gap: 12px; } .lx-acc-head .lx-h-l em { font-style: italic; } .lx-acc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 110px); align-items: start; padding-top: 36px; border-top: 1px solid var(--rule); } .lx-acc-nav { position: sticky; top: calc(var(--top) + 32px); display: flex; flex-direction: column; gap: 2px; transition: top .55s var(--silk); } .lx-acc-nl { position: relative; display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mute); transition: background-color .24s var(--silk), color .24s var(--silk); } .lx-acc-nl:hover { color: var(--ink); background: rgba(26, 24, 20, .05); } body.lx .lx-acc .lx-acc-nl.is-on { color: var(--ivory); background: var(--ink); } .lx-acc-nl.is-out { margin-top: 18px; color: var(--ash); font-weight: 500; } .lx-acc-main { min-width: 0; transition: opacity .22s ease, transform .22s ease; } .lx-acc-main.is-leave { opacity: .25; transform: translateY(4px); pointer-events: none; } .lx-acc-main.is-enter { animation: lxFin .5s var(--silk) both; } .lx-acc-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 26px; } .lx-acc-lede { margin: -12px 0 26px; max-width: 520px; } .lx-acc-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); transition: color .2s; } .lx-acc-back:hover { color: var(--ink); } .lx-acc-back .lx-i { transition: transform .4s var(--silk); } .lx-acc-back:hover .lx-i { transform: translateX(-3px); } .lx-acc-acts { margin: -6px 0 30px; } .lx-acc-pages { display: flex; gap: 12px; margin-top: 28px; } /* Status chip */ .lx-st { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; } .lx-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .lx-st.is-ok::before { background: #6F8A4E; box-shadow: 0 0 0 3px rgba(111, 138, 78, .18); animation: lxDot 2.4s var(--silk) infinite; } .lx-st.is-wait::before { background: var(--gold); } .lx-st.is-done::before { background: var(--ink); } .lx-st.is-off { color: var(--ash); } .lx-st.is-off::before { background: #A24A36; } @keyframes lxDot { 50% { box-shadow: 0 0 0 6px rgba(111, 138, 78, 0); } } /* Orders */ .lx-ords { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .lx-ord { position: relative; animation: lxFin .7s var(--silk) both; animation-delay: calc(var(--i) * 60ms); } .lx-ord-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 20px; gap: 22px; align-items: center; padding: 18px 22px 18px 18px; border-radius: 20px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .35s var(--silk), transform .35s var(--silk), background-color .35s; } .lx-ord-link:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--rule-2), 0 22px 44px -32px rgba(26, 24, 20, .45); transform: translateY(-2px); } .lx-ord-pics { display: flex; } .lx-ord-pics img, .lx-ord-ph { display: block; width: 52px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--parch); box-shadow: 0 0 0 3px var(--ivory); transition: transform .45s var(--silk); } .lx-ord-link:hover .lx-ord-pics img { box-shadow: 0 0 0 3px #fff; } .lx-ord-pics img + img { margin-left: -22px; } .lx-ord-link:hover .lx-ord-pics img + img { transform: translateX(10px); } .lx-ord-link:hover .lx-ord-pics img + img + img { transform: translateX(20px); } .lx-ord-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lx-ord-no { font-family: var(--serif); font-size: 22px; line-height: 1.2; } .lx-ord-total { font-family: var(--serif); font-size: 20px; white-space: nowrap; } .lx-ord-go { color: var(--ash); transition: transform .4s var(--silk), color .2s; } .lx-ord-link:hover .lx-ord-go { transform: translateX(4px); color: var(--ink); } .lx-ord-pay { position: absolute; right: 64px; bottom: -8px; transform: translateY(100%); } .lx-ord:has(.lx-ord-pay) { margin-bottom: 30px; } .lx-acc-empty { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 24px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); } .lx-acc-empty-t { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(28px, 4vw, 56px); } .lx-acc-empty-t em { font-style: italic; } .lx-acc-empty-m { position: relative; min-height: 300px; background: var(--parch); } .lx-acc-empty-m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* One order */ .lx-acc-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 36px clamp(32px, 4vw, 72px); align-items: start; } .lx-acc-order-grid > .lx-oc { position: sticky; top: calc(var(--top) + 24px); } .lx-acc-tl { padding: 26px 26px 28px; border-radius: 22px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); margin-bottom: 20px; } .lx-acc-tl .lx-tl-list { grid-template-columns: minmax(0, 1fr); gap: 20px; } .lx-acc-tl .lx-tl-list::before { left: 13px; right: auto; top: 13px; bottom: 13px; width: 1px; height: auto; } .lx-acc-tl .lx-tl-step { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 2px 16px; padding: 0; animation-delay: calc(.2s + var(--i) * .1s); } .lx-acc-tl .lx-tl-dot { grid-row: span 2; margin: 0; background: var(--ivory); } .lx-acc-tl .lx-tl-step.is-done .lx-tl-dot { background: var(--gold); } .lx-acc-tl .lx-tl-step.is-now .lx-tl-dot { background: var(--ink); } .lx-acc-notes { margin-bottom: 20px; padding: 22px 26px; border-radius: 22px; background: var(--parch); } .lx-acc-notes .lx-k { color: var(--gold-t); } .lx-acc-notes ol { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; } .lx-acc-notes li { display: grid; gap: 4px; } .lx-acc-notes time { font-size: 12px; color: var(--ash); } .lx-acc-notes li p { margin: 0; font-size: 15px; color: var(--ink-3); } .lx-acc-rv { margin-bottom: 20px; padding: 22px 26px; border-radius: 22px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); } .lx-acc-rv .lx-k { color: var(--gold-t); } .lx-acc-rv ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; } .lx-acc-rv li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; } .lx-acc-rv img { width: 48px; height: 60px; border-radius: 8px; object-fit: cover; display: block; } .lx-acc-rv-n { font-family: var(--serif); font-size: 20px; line-height: 1.15; } .lx-acc-rv-go { height: 42px; padding: 0 20px; font-size: 11px; } .lx-acc-rv-st { font-size: 13px; color: var(--ash); display: inline-flex; align-items: center; gap: 6px; } .lx-acc-rv-st.is-live { color: #3F5B45; } @media (max-width: 560px) { .lx-acc-rv li { grid-template-columns: 48px minmax(0, 1fr); } .lx-acc-rv-go, .lx-acc-rv-st { grid-column: 2; justify-self: start; } } .lx-acc-help { margin-top: 8px; } .lx-acc-help .lx-tl { font-size: inherit; } /* Addresses */ .lx-addr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lx-addr { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 26px; border-radius: 22px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); animation: lxFin .7s var(--silk) both; } .lx-addr + .lx-addr { animation-delay: .08s; } .lx-addr .lx-k { color: var(--ash); } .lx-addr address { font-style: normal; font-size: 15px; line-height: 1.7; color: var(--ink-3); } .lx-addr .lx-lnk { margin-top: auto; } /* WooCommerce's own account forms (edit address, details) in the LHARI look. */ body.lx .lx-acc .woocommerce-address-fields__field-wrapper, body.lx .lx-acc .woocommerce-EditAccountForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; max-width: 760px; } body.lx .lx-acc .woocommerce-EditAccountForm > *, body.lx .lx-acc .form-row-wide { grid-column: 1 / -1; } body.lx .lx-acc .woocommerce-EditAccountForm > .form-row-first { grid-column: 1; } body.lx .lx-acc .woocommerce-EditAccountForm > .form-row-last { grid-column: 2; } body.lx .lx-acc .form-row { display: flex; flex-direction: column; gap: 7px; float: none; width: auto; margin: 0 0 14px; padding: 0; } body.lx .lx-acc .form-row label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); line-height: 1.4; } body.lx .lx-acc .form-row .required { color: var(--gold-t); text-decoration: none; border: 0; } body.lx .lx-acc .form-row .optional { text-transform: none; letter-spacing: 0; font-weight: 500; } body.lx .lx-acc .input-text, body.lx .lx-acc .form-row select, body.lx .lx-acc .select2-container .select2-selection--single { width: 100%; height: 54px; padding: 0 18px; border: 1px solid var(--rule-2); border-radius: 14px; background: #fff; box-shadow: none; font-family: var(--sans); font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; } body.lx .lx-acc .input-text:focus, body.lx .lx-acc .form-row select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26, 24, 20, .08); } body.lx .lx-acc .select2-container .select2-selection--single { display: flex; align-items: center; padding: 0 14px; } body.lx .lx-acc .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--ink); } body.lx .lx-acc .select2-container .select2-selection__arrow { top: 14px; right: 12px; } body.lx .lx-acc .form-row em, body.lx .lx-acc #account_display_name_description { font-size: 12.5px; font-style: normal; color: var(--ash); } body.lx .lx-acc .woocommerce-EditAccountForm fieldset, body.lx .lx-acc .woocommerce-EditAccountForm > .clear { display: none; } /* passwordless: no password to change */ body.lx .lx-acc .woocommerce-address-fields > h2, body.lx .lx-acc form > h2, body.lx .lx-acc form > h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 22px; } body.lx .lx-acc .woocommerce-address-fields .button, body.lx .lx-acc .woocommerce-EditAccountForm .button { height: 54px; margin-top: 10px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--ink); color: var(--ivory); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background-color .24s var(--silk), box-shadow .24s var(--silk), transform .24s var(--silk); } body.lx .lx-acc .woocommerce-address-fields .button:hover, body.lx .lx-acc .woocommerce-EditAccountForm .button:hover { background: #34302A; box-shadow: 0 10px 24px -12px rgba(26, 24, 20, .6); } body.lx .lx-acc .woocommerce-address-fields .button:active, body.lx .lx-acc .woocommerce-EditAccountForm .button:active { transform: scale(.97); } body.lx .lx-acc .woocommerce-address-fields > p:last-child { grid-column: 1 / -1; } /* Notices WooCommerce prints on the account pages ("Address changed successfully." and errors). */ body.lx .lx-wc :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { margin: 0 0 24px; padding: 14px 18px 14px 44px; border: 0; border-radius: 14px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-3); font-size: 14px; list-style: none; position: relative; animation: lxNote .5s var(--out) both; } body.lx .lx-wc :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { position: absolute; left: 16px; top: 14px; color: var(--gold); } body.lx .lx-wc .woocommerce-error { background: #FBF1EC; box-shadow: inset 0 0 0 1px rgba(138, 46, 30, .25); color: #6E2618; } body.lx .lx-wc :is(.woocommerce-message, .woocommerce-info) .button { float: right; border: 0; background: none; padding: 0; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); } /* Signing in (the passwordless plugin's screens), in the site's light palette. */ body.lx .lx-wc-acct .lhari-auth { min-height: 0; margin: 40px auto 120px; padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(32px, 4vw, 52px); width: min(100% - 2 * var(--gut), 620px); border-radius: 28px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule), 0 40px 80px -60px rgba(26, 24, 20, .45); font-family: var(--sans); color: var(--ink); animation: lxFin .8s var(--silk) both; } body.lx .lx-wc-acct .lhari-auth__brand { min-height: 0; margin-bottom: 28px; } body.lx .lx-wc-acct .lhari-auth__brand > span, body.lx .lx-wc-acct .lhari-auth__brand img { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: .36em; padding-left: .36em; height: auto; } body.lx .lx-wc-acct .lhari-auth__stage { width: 100%; } body.lx .lx-wc-acct .lhari-auth__panel { text-align: center; } body.lx .lx-wc-acct .lhari-auth__panel h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 52px); letter-spacing: -.01em; line-height: 1.05; } body.lx .lx-wc-acct .lhari-auth__panel > p { margin: 12px auto 28px; max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--mute); } body.lx .lx-wc-acct .lhari-auth__turnstile { margin: 22px auto 12px; display: flex; justify-content: center; } body.lx .lx-wc-acct .lhari-email-form .lhari-auth__turnstile { margin: 12px 0 0; justify-content: flex-start; } /* in the email form now (interaction-only: empty unless a click is needed) */ body.lx .lx-wc-acct .lhari-auth__status { font-size: 13px; color: var(--ash); } body.lx .lx-wc-acct .lhari-auth__status:not(.is-error)::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 1.5px solid var(--gold); border-right-color: transparent; vertical-align: -1px; animation: lxSpin .9s linear infinite; } body.lx .lx-wc-acct .lhari-email-form { text-align: left; } body.lx .lx-wc-acct .lhari-email-form label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); } body.lx .lx-wc-acct .lhari-email-form__field { padding: 5px 5px 5px 22px; border: 1px solid var(--rule-2); border-radius: 999px; background: #fff; } body.lx .lx-wc-acct .lhari-email-form__field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26, 24, 20, .08); } body.lx .lx-wc-acct .lhari-email-form__field input { height: 46px; font-family: var(--sans); font-size: 16px; } body.lx .lx-wc-acct .lhari-email-form__field button { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); font-size: 20px; } body.lx .lx-wc-acct .lhari-email-form__field button:hover { background: #34302A; } body.lx .lx-wc-acct .lhari-auth__terms { margin-top: 28px !important; font-size: 13px !important; } body.lx .lx-wc-acct .lhari-otp__destination { justify-content: center; margin: 12px 0 26px; font-size: 15px; color: var(--mute); } body.lx .lx-wc-acct .lhari-otp__destination button { color: var(--gold-t); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* The six code slots keep the plugin's own size, caret and digit animation (the owner likes them); only colours are ours. */ body.lx .lx-wc-acct .lhari-otp__slot { border-color: var(--rule-2); background: #fff; } body.lx .lx-wc-acct .lhari-otp__slot.is-filled { border-color: var(--gold-l); } body.lx .lx-wc-acct .lhari-otp__slot.is-active { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26, 24, 20, .08); } body.lx .lx-wc-acct .lhari-otp__slot.is-active::after { background: var(--ink); } body.lx .lx-wc-acct .lhari-otp__digit { color: var(--ink); } body.lx.woocommerce-account .lx-wc-acct .lhari-auth .lhari-otp__verify { min-height: 54px; border-radius: 999px !important; border: 0 !important; font-family: var(--sans); font-size: 12px !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } body.lx .lx-wc-acct .lhari-otp__resend { margin: 16px auto 0; display: flex; gap: 6px; border: 0; background: none; font-size: 13px; color: var(--ash); cursor: pointer; } /* The prayer-flag film: poster first, the clip plays only while seen (lhari-site.js). */ .lx-film { position: relative; margin: 0; overflow: hidden; background: #1c2230; } .lx-film video { display: block; width: 100%; height: 100%; object-fit: cover; } .lx-film::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); border-radius: inherit; pointer-events: none; } .lx-acc-film { flex: none; width: 260px; aspect-ratio: 16 / 9; border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(26, 24, 20, .6); --d: .2s; } /* Signing in: the film beside the plugin's steps. */ body.lx .lx-auth { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; width: min(100% - 2 * var(--gut), 1080px); margin: 40px auto 120px; } body.lx .lx-auth-film { border-radius: 28px; min-height: 560px; animation: lxFin .9s var(--silk) both; } body.lx .lx-auth-film video { object-position: 24% 50%; } /* the landscape clip in a tall panel: keep the stupa in view */ body.lx .lx-auth .lx-wc-acct .lhari-auth, body.lx .lx-wc-acct .lx-auth .lhari-auth { width: 100%; margin: 0; display: flex; flex-direction: column; justify-content: center; } /* WooCommerce's plain sign-in form (shown when an order page asks the owner to sign in). */ body.lx .lx-wc .woocommerce-form-login { max-width: 520px; margin: 0 0 40px; padding: 28px; border: 0; border-radius: 22px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); } body.lx .lx-wc .woocommerce-form-login .form-row { display: flex; flex-direction: column; gap: 6px; float: none; width: auto; margin: 0 0 14px; } body.lx .lx-wc .woocommerce-form-login .input-text { height: 52px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 14px; background: #fff; } body.lx .lx-wc .woocommerce-form-login .button { height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ink); color: var(--ivory); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } @media (max-width: 1099px) { .lx-acc-order-grid { grid-template-columns: minmax(0, 1fr); } .lx-acc-order-grid > .lx-oc { position: static; } } @media (max-width: 899px) { .lx-acc-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 0; border-top: 0; } .lx-acc-nav { position: static; flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 6px; scrollbar-width: none; } .lx-acc-nav::-webkit-scrollbar { display: none; } .lx-acc-nl { flex: none; height: 40px; box-shadow: inset 0 0 0 1px var(--rule-2); } .lx-acc-nl.is-on { box-shadow: none; } .lx-acc-nl.is-out { margin: 0; } } @media (max-width: 767px) { div.lx-acc { padding-top: 24px; } .lx-acc-head { padding-bottom: 24px; } .lx-ord-link { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'pics main total' 'pics st go'; gap: 6px 16px; padding: 14px 16px 14px 14px; } .lx-ord-pics { grid-area: pics; } .lx-ord-main { grid-area: main; } .lx-ord-total { grid-area: total; text-align: right; } .lx-ord-link .lx-st { grid-area: st; justify-self: start; } .lx-ord-go { grid-area: go; justify-self: end; } .lx-ord-no { font-size: 20px; } .lx-ord-pay { position: static; transform: none; display: inline-flex; width: max-content; margin: 10px 0 0 14px; } .lx-ord:has(.lx-ord-pay) { margin-bottom: 0; } .lx-acc-head { align-items: flex-start; } .lx-acc-film { width: 132px; border-radius: 14px; } body.lx .lx-auth { grid-template-columns: minmax(0, 1fr); margin-top: 12px; gap: 14px; } body.lx .lx-auth-film { width: 100%; min-height: 0; height: auto; aspect-ratio: 16 / 9; border-radius: 24px; } /* width: a grid item with an aspect-ratio is not stretched */ body.lx .lx-auth-film video { object-position: center; } .lx-addr-cards { grid-template-columns: minmax(0, 1fr); } body.lx .lx-acc .woocommerce-address-fields__field-wrapper, body.lx .lx-acc .woocommerce-EditAccountForm { grid-template-columns: minmax(0, 1fr); } body.lx .lx-acc .woocommerce-EditAccountForm > .form-row-first, body.lx .lx-acc .woocommerce-EditAccountForm > .form-row-last { grid-column: 1; } body.lx .lx-wc-acct .lhari-auth { margin-top: 16px; border-radius: 24px; } .lx-acc-tl, .lx-acc-notes { padding: 20px; } } /* Island (phones, touch tablets): the island floats at the bottom; leave room under the last field. */ @media (max-width: 767px), (max-width: 1366px) and (min-height: 600px) and (hover: none) and (pointer: coarse) { div.lx-acc { padding-bottom: 150px; } } /* ============================================================== browse: search with no result, welcome offer, unsubscribe */ .lx-noresult { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; padding: 24px 0 40px; animation: lxFin .7s var(--silk) both; } .lx-noresult .lx-h-l em { font-style: italic; } .lx-noresult-mark { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--rule); color: var(--gold); } .lx-noresult-try { display: flex; flex-wrap: wrap; gap: 8px; } .lx-noresult .lx-row { margin-top: 10px; } .lx-offer-scrim { position: fixed; inset: 0; z-index: 10030; /* above the island (10008-10020) */ background: rgba(20, 18, 15, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s var(--silk); } .lx-offer-scrim.is-on { opacity: 1; } .lx-offer { position: fixed; z-index: 10031; left: 50%; top: 50%; width: min(880px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 28px; background: var(--ivory); box-shadow: 0 50px 100px -40px rgba(20, 18, 15, .55); opacity: 0; transform: translate(-50%, -46%) scale(.97); transition: opacity .5s var(--silk), transform .7s var(--out); } .lx-offer.is-on { opacity: 1; transform: translate(-50%, -50%); } .lx-offer-media { position: relative; min-height: 420px; overflow: hidden; background: var(--night); } .lx-offer-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--out); } .lx-offer.is-on .lx-offer-media img { transform: none; } .lx-offer-mark { position: absolute; left: 28px; bottom: 22px; font-family: var(--serif); font-size: 84px; line-height: 1; color: var(--ivory); text-shadow: 0 10px 30px rgba(0, 0, 0, .3); } .lx-offer-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: clamp(32px, 4vw, 56px); } .lx-offer-body > * { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--silk), transform .6s var(--silk); } .lx-offer.is-on .lx-offer-body > * { opacity: 1; transform: none; } .lx-offer.is-on .lx-offer-body > :nth-child(2) { transition-delay: .08s; } .lx-offer.is-on .lx-offer-body > :nth-child(3) { transition-delay: .14s; } .lx-offer.is-on .lx-offer-body > :nth-child(4) { transition-delay: .2s; } .lx-offer.is-on .lx-offer-body > :nth-child(n+5) { transition-delay: .26s; } .lx-offer-x { position: absolute; top: 14px; right: 14px; } .lx-offer .lx-h-m em { font-style: italic; } .lx-offer-form { display: flex; flex-direction: column; gap: 12px; width: 100%; } .lx-offer-row { display: flex; gap: 8px; } .lx-offer-row .lx-field { flex: 1; min-width: 0; height: 54px; } .lx-offer-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lx-offer-fine { font-size: 12.5px; } .lx-offer .lx-seal { width: 64px; height: 64px; } .lx-offer.is-sent .lx-offer-body > * { animation: lxFin .6s var(--silk) both; } .lx-ft-unsub { padding: 0 0 22px; } .lx-ft-unsub summary { display: inline-block; cursor: pointer; list-style: none; font-size: 12px; } .lx-ft-unsub summary::-webkit-details-marker { display: none; } .lx-ft-unsub[open] summary { color: var(--ivory); } .lx-ft-unsub form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin-top: 14px; animation: lxNote .4s var(--out) both; } @media (max-width: 767px) { .lx-offer { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92vh; grid-template-columns: minmax(0, 1fr); border-radius: 26px 26px 0 0; transform: translateY(100%); transition: transform .6s var(--out), opacity .3s; } .lx-offer.is-on { transform: none; } .lx-offer-media { min-height: 150px; } .lx-offer-mark { font-size: 56px; left: 20px; bottom: 14px; } .lx-offer-body { padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); } .lx-offer-row { flex-direction: column; } .lx-offer-row .lx-field { flex: none; } .lx-offer-x { background: rgba(251, 247, 238, .85); } .lx-offer-media + .lx-offer-body .lx-offer-x { position: absolute; top: -160px; } } @media (prefers-reduced-motion: reduce) { .lx-offer-body > * { opacity: 1; transform: none; } } /* ============================================================== Custom Studio inside the site shell (custom-studio.php draws the body) */ body.lx.lhari-custom-page .lhari-custom-header, body.lx.lhari-custom-page .lhari-custom-footer { display: none !important; } body.lx.lhari-custom-page .lhari-custom-shell { padding-top: var(--hdr); } body.lx.lhari-custom-page .lx-custom-veil ~ .lhari-custom-shell { padding-top: 0; } /* the veil banner already sits under the header */ @media (max-width: 767px), (max-width: 1366px) and (min-height: 600px) and (hover: none) and (pointer: coarse) { body.lx.lhari-custom-page .lhari-custom-shell { padding-top: 64px; } } /* ============================================================== footer */ .lx-ft { background: var(--night); color: var(--ivory); padding: 88px var(--gut) 0; font-family: var(--sans); } .lx-ft > * { max-width: 1512px; margin-left: auto; margin-right: auto; } .lx-ft-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px 80px; align-items: end; padding-bottom: 64px; border-bottom: 1px solid rgba(251, 247, 238, .12); } .lx-ft-lead { display: flex; flex-direction: column; gap: 14px; } .lx-ft-h { font-family: var(--serif); font-size: clamp(40px, 4.2vw, 60px); line-height: 1; } .lx-ft-sub { font-size: 15px; color: #BDB29D; } .lx-ft-form { display: flex; flex-direction: column; gap: 14px; } .lx-ft-row { display: flex; gap: 10px; } .lx-ft-field { flex: 1; min-width: 0; height: 54px; padding: 0 22px; border: 0; border-radius: 999px; background: rgba(251, 247, 238, .06); box-shadow: inset 0 0 0 1px rgba(251, 247, 238, .22); color: var(--ivory); font-family: var(--sans); font-size: 15px; outline: none; } .lx-ft-field:focus { box-shadow: inset 0 0 0 1.5px var(--ivory); } .lx-ft-field::placeholder { color: #8E8474; } .lx-ft-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #BDB29D; cursor: pointer; } .lx-ft-agree input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold-l); flex: none; } .lx-ft-agree a { text-decoration: underline; text-underline-offset: 3px; } .lx-ft .lx-ft-msg { color: #E9E0CC; font-family: var(--serif); font-style: italic; font-size: 22px; } .lx-ft-msg.is-err { color: #E6A48F !important; font-family: var(--sans) !important; font-style: normal !important; font-size: 14px !important; } .lx-ft-cols { display: grid; grid-template-columns: 320px repeat(4, minmax(0, 1fr)); gap: 40px; padding: 56px 0 64px; } .lx-ft-cols nav, .lx-ft-brand { display: flex; flex-direction: column; gap: 12px; } .lx-ft-brand { font-size: 14px; line-height: 1.7; color: #BDB29D; gap: 16px; } .lx-ft-logo { font-family: var(--serif); font-size: 26px; letter-spacing: .36em; color: var(--ivory); } .lx-ft-k { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 6px; } .lx-ft-link { font-size: 14px; color: #BDB29D; transition: color .2s; } .lx-ft-link:hover { color: var(--ivory); } .lx-ft-base { min-height: 72px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 16px 0; font-size: 12px; color: #8E8474; border-top: 1px solid rgba(251, 247, 238, .1); } .lx-ft-legal { display: flex; gap: 22px; } .lx-ft-legal .lx-ft-link { font-size: 12px; } /* ============================================================== motion */ .lx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .lx-w > span { display: inline-block; transform: translateY(110%); animation: lxRiseW 1.15s var(--out) forwards; animation-delay: var(--d, 0s); } @keyframes lxRiseW { to { transform: none; } } .lx-fade { opacity: 0; transform: translateY(16px); animation: lxFin 1s var(--silk) forwards; animation-delay: var(--d, 0s); } .lx-kb { animation: lxKb 22s var(--silk) both; } @keyframes lxKb { from { transform: scale(1.14); } to { transform: scale(1); } } html.lx-sda-reset :is(.lx-rv, .lx-rv-img, .lx-px, .lx-px-s, .lx-wd) { animation: none !important; } /* see LX pageshow */ @supports (animation-timeline: view()) { .lx-rv { animation: lxRv linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } @keyframes lxRv { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } } .lx-rv-img { animation: lxRvImg linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } @keyframes lxRvImg { from { clip-path: inset(14% 8% 14% 8% round 18px); transform: scale(1.08); } to { clip-path: inset(0 0 0 0 round 18px); transform: none; } } .lx-px { animation: lxPx linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @keyframes lxPx { from { transform: translateY(70px); } to { transform: translateY(-70px); } } .lx-px-s { animation: lxPxs linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @keyframes lxPxs { from { transform: translateY(-30px) scale(1.1); } to { transform: translateY(30px) scale(1.1); } } .lx-wd { animation: lxWd linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; } @keyframes lxWd { from { opacity: .14; } to { opacity: 1; } } } @media (prefers-reduced-motion: reduce) { body.lx *, body.lx *::before, body.lx *::after { animation: none !important; transition: none !important; } .lx-w > span { transform: none; } .lx-fade { opacity: 1; transform: none; } } /* View transitions between pages (Chrome, Safari 18.2+): a soft crossfade; header and bag stay put. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: .28s var(--silk) both lxVtOut; } ::view-transition-new(root) { animation: .42s var(--silk) both lxVtIn; } @keyframes lxVtOut { to { opacity: 0; } } @keyframes lxVtIn { from { opacity: 0; transform: translateY(10px); } } .lx-hdr { view-transition-name: lx-hdr; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ============================================================== responsive */ @media (max-width: 1320px) { .lx-mm-shop { grid-template-columns: 200px 230px minmax(0, 1fr) minmax(0, 1fr); } .lx-nav { gap: 20px; } .lx-nl { letter-spacing: .12em; } .lx-logo { font-size: 25px; letter-spacing: .3em; padding-left: .3em; } .lx-sibs { gap: 12px 20px; } .lx-sib { letter-spacing: .13em; } } @media (max-width: 1180px) { .lx-hero-card { display: none; } } @media (max-width: 1080px) { .lx-nav .lx-nl:nth-child(n+4) { display: none; } } @media (max-width: 1100px) { .lx-grid, .lx-sresults { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lx-mm-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lx-mm-shop { grid-template-columns: 1fr 1fr; } .lx-mm-shop .lx-tile { height: 220px; } .lx-shop-head, .lx-story, .lx-heritage, .lx-making, .lx-studio, .lx-talk, .lx-line-story-in, .lx-cardnote { grid-template-columns: minmax(0, 1fr); } .lx-story-img, .lx-line-first { position: static; } .lx-heritage-sm { right: 4%; bottom: -6%; } .lx-pdp-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lx-gallery { grid-template-columns: minmax(0, 1fr); } .lx-thumbs { flex-direction: row; order: 2; max-height: none; overflow-x: auto; } .lx-thumb { width: 64px; } .lx-acc6 { height: 520px; } .lx-ch { grid-template-columns: minmax(0, 1fr); } .lx-chapters, .lx-help-body { grid-template-columns: 200px minmax(0, 1fr); } .lx-pack { grid-template-columns: 1fr; } .lx-pack-img { min-height: 420px; } .lx-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-ft-brand { grid-column: 1 / -1; } .lx-ft-top { grid-template-columns: minmax(0, 1fr); } .lx-spot-v { grid-template-columns: 30% minmax(0, 1fr) auto; } .lx-spot-pc:nth-child(4) { display: none; } .lx-notes { grid-template-columns: minmax(0, 1fr); } .lx-mat-g { grid-template-columns: minmax(0, 1fr); gap: 16px; } .lx-line-tabs-in { grid-template-columns: repeat(6, minmax(140px, 1fr)); overflow-x: auto; scrollbar-width: none; } } @media (max-width: 900px) { .lx-pdp-top { grid-template-columns: minmax(0, 1fr); } .lx-gallery, .lx-buy { position: static; } .lx-ch-hero { grid-template-columns: minmax(0, 1fr); max-height: none; } .lx-ch-hero-img { min-height: 60vw; } .lx-chapters, .lx-help-body { grid-template-columns: minmax(0, 1fr); } .lx-toc { display: none; } .lx-help-nav { position: static; } .lx-help-nav nav { flex-direction: row; overflow-x: auto; gap: 18px; border: 0; } .lx-hn { border: 0; font-size: 22px; white-space: nowrap; padding: 6px 0; } .lx-help-chat { display: none; } .lx-facts, .lx-mails, .lx-keep-grid, .lx-cols-grid { grid-template-columns: minmax(0, 1fr); } .lx-acc6 { flex-direction: column; height: auto; } .lx-ln { min-height: 90px; flex: none; transition: min-height .9s var(--silk); } .lx-ln.is-on { min-height: 460px; } .lx-ln-col { flex-direction: row; padding: 0 22px; } .lx-ln-vt { writing-mode: horizontal-tb; transform: none; font-size: 26px; } .lx-ln-col .lx-bo { writing-mode: horizontal-tb; } .lx-ln-exp { left: 22px; right: 22px; bottom: 22px; } .lx-empty { grid-template-columns: minmax(0, 1fr); } .lx-empty > img { max-height: 280px; } } @media (max-width: 767px) { :root { --hdr: 0px; } .lx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; } .lx-card-n { font-size: 19px; } .lx-card-k { font-size: 10px; letter-spacing: .12em; } .lx-story-copy ul { grid-template-columns: 1fr; } .lx-card-acts { grid-template-columns: minmax(0, 1fr); left: 8px; right: 8px; bottom: 8px; } .lx-card-acts .lx-qb-l { display: none; } .lx-trust { grid-template-columns: 1fr 1fr; } .lx-trust-i, .lx-trust-i + .lx-trust-i { padding: 22px 14px 22px 0; border-left: 0; } .lx-heritage-sm { right: 4%; } .lx-buy-form form.variations_form .variations_button .lx-wish-lg { order: 1; margin-left: auto; } /* phones: quantity + heart, then the full-width button, as for a simple piece */ .lx-buy-form form.variations_form .variations_button .single_add_to_cart_button { order: 2; flex-basis: 100%; } .lx-spot { border-radius: 18px; } .lx-spot-v { height: auto; grid-template-columns: 1fr; align-items: stretch; } .lx-spot-img { height: 168px; } .lx-spot-t { padding: 22px 20px 0; gap: 8px; } .lx-spot-n { font-size: 36px; } .lx-spot-s { font-size: 17px; } .lx-spot .lx-lnk { display: none; } .lx-spot-pcs { padding: 18px 20px 22px; gap: 8px; } .lx-spot-pc, .lx-spot-pc:nth-child(4) { display: block; flex: 1 1 0; width: auto; border-radius: 8px; } .lx-story-copy .norbu-product-panels { grid-template-columns: 1fr; } .lx-ft-cols { grid-template-columns: 1fr 1fr; } .lx-ft-row { flex-direction: column; } .lx-ft-row > .lx-ft-field { flex: none; } /* in a column, flex: 1 collapsed the field to a line */ .lx-attrs > div, .lx-acc-body dl > div { grid-template-columns: 120px minmax(0, 1fr); } .lx-collage { height: 360px; } .lx-fbar-in { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; } .lx-mat-list { grid-template-columns: 1fr; } .lx-hero-t { bottom: 110px; } .lx-cardnote { padding: 22px; } } /* ============================================================== island (phones & touch tablets) */ /* The island owns the header, bag and chat there; the page content and footer are LHARI Site's. */ @media (max-width: 767px), (max-width: 1366px) and (min-height: 600px) and (hover: none) and (pointer: coarse) { .lx-hdr, .lx-veil, .lx-toast, .lx-drawer, .lx-modal, .lx-scrim, .lx-mini, .lx-skip { display: none !important; } /* Phones: the card surface stays clear; tap the card to open the piece. */ .lx-card-acts, .lx-card .lx-wish { display: none !important; } body.lx .lx-main { padding-top: 0; } body.lx.lx-t-shop .lx-main, body.lx.lx-t-content .lx-main, body.lx.lx-t-help .lx-main, body.lx.lx-t-collections .lx-main, body.lx.lx-t-page .lx-main, body.lx.lx-t-legal .lx-main, body.lx.lx-t-product .lx-main { padding-top: 24px; } :root { --top: 0px; } .lx-fbar { top: 0; } .lx-line-tabs { position: static; } .lx-ft { padding-bottom: 20px; } } /* Bracelets category: questions under the grid (seo.php). */ .lx-cat-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 28px 80px; align-items: start; padding-top: 72px; padding-bottom: 120px; border-top: 1px solid var(--rule-2); } .lx-cat-faq[hidden] { display: none; } .lx-shop-body:has(+ .lx-cat-faq:not([hidden])) { padding-bottom: 72px; } .lx-cat-faq-list .lx-acc:first-child { border-top: 1px solid var(--rule-2); } @media (max-width: 1100px) { .lx-cat-faq { grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 96px; } } /* ============================================================== About (Visual Polish founder story) * The story page brought its own type (Arial + Source Serif, a bold sans headline); here it takes the site's faces, * so it reads as part of LHARI (audit 2026-11-05). Layout and colours stay the story's own. */ body.lx .lhari-founder-about { --lhari-about-serif: var(--serif); --lhari-about-sans: var(--sans); } body.lx .lhari-founder-about .lhari-founder-hero h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; } /* ============================================================== phone home (owner, 2026-11-08) * A first screen with the piece in it, and a page about two thirds as long. Phones only; desktop and tablets unchanged. */ .lx-spm, .lx-mk-ph { display: none; } .lx-mk-list { display: contents; } @media (min-width: 768px) { .lx-featured [data-set-grid="all"] > :nth-child(n+5) { display: none; } } @media (max-width: 767px) { body.lx .lx-main.lx-home { display: flex; flex-direction: column; } .lx-home > section { width: 100%; } .lx-home > .lx-hero { order: -2; } .lx-home > .lx-featured { order: -1; } /* hero: still mountain behind, one line of words, the pieces on glass */ .lx-hero-spm { --spm-b: calc(98px + env(safe-area-inset-bottom, 0px)); --spm-h: 176px; min-height: 600px; } .lx-hero-spm .lx-hero-media { transform: none; } .lx-hero-spm .lx-hero-shade { background: linear-gradient(180deg, rgba(18, 16, 13, .34) 0%, rgba(18, 16, 13, 0) 15%, rgba(18, 16, 13, 0) 30%, rgba(18, 16, 13, .58) 54%, rgba(18, 16, 13, .86) 100%); } .lx-hero-spm .lx-hero-t { bottom: calc(var(--spm-b) + var(--spm-h) + 22px); gap: 12px; } .lx-hero-spm .lx-hero-h { font-size: clamp(33px, 9.5vw, 40px); line-height: 1.03; } .lx-hero-spm .lx-hero-p, .lx-hero-spm .lx-hero-create, .lx-hero-spm .lx-scroll { display: none; } .lx-hero-spm .lx-eyebrow { font-size: 10px; } .lx-hero-spm .lx-hero-cta { flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 4px; } .lx-hero-spm .lx-hero-rd { display: none; } .lx-hero-spm .lx-hero-cta .lx-btn { height: 48px; padding-left: 24px; padding-right: 24px; font-size: 11px; } .lx-hero-spm .lx-hero-cta .lx-hero-story { padding: 0 8px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .lx-spm { display: block; position: absolute; left: 0; right: 0; bottom: var(--spm-b); z-index: 2; } .lx-spm-rail { display: flex; gap: 10px; padding: 0 var(--gut); scroll-padding: 0 var(--gut); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lx-spm-rail::-webkit-scrollbar { display: none; } .lx-spm-c { position: relative; flex: 0 0 calc(100% - 22px); height: var(--spm-h); box-sizing: border-box; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 15px; align-items: center; padding: 10px; border-radius: 20px; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; color: #FBF7EE; background: rgba(30, 26, 22, .42); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(251, 247, 238, .26); } .lx-spm-c:active { background: rgba(30, 26, 22, .55); } .lx-spm-ph { position: relative; display: block; width: 124px; height: 156px; border-radius: 13px; overflow: hidden; background: #0C0B0A; } .lx-spm-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s var(--silk), transform 6s linear; } .lx-spm-ph img.b { opacity: 0; } .lx-spm-c.is-on .lx-spm-ph img.a { transform: scale(1.07); } .lx-spm-c.is-alt .lx-spm-ph img.b { opacity: 1; } .lx-spm-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .lx-spm .lx-k { color: #E3D7BD; font-size: 10px; } .lx-spm-n { font-family: var(--serif); font-size: 25px; line-height: 1.02; } .lx-spm-s { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.22; color: #E9E0CC; } .lx-spm-go { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .88; margin-top: 3px; } .lx-spm-dots { position: absolute; left: 0; right: 0; bottom: -10px; display: flex; justify-content: center; gap: 6px; } .lx-spm-dots i { width: 16px; height: 2px; border-radius: 2px; background: rgba(251, 247, 238, .3); transition: background-color .4s; } .lx-spm-dots i.on { background: #FBF7EE; } /* the rest: closer together, thumb rails instead of accordions */ .lx-home .lx-sec-head { margin-bottom: 24px; } .lx-featured { padding-top: 44px; padding-bottom: 8px; } .lx-featured .lx-center { margin-top: 32px; } .lx-home .lx-trust { padding-top: 26px; } .lx-home .lx-trust-i, .lx-home .lx-trust-i + .lx-trust-i { padding: 15px 14px 15px 0; } .lx-home .lx-trust-h { font-size: 19px; } .lx-heritage { padding-top: 50px; padding-bottom: 54px; gap: 34px; } .lx-heritage-img { aspect-ratio: 5 / 4; } .lx-heritage-sm { width: 30%; bottom: -8%; } .lx-heritage-t { gap: 16px; } .lx-lines { padding-top: 18px; padding-bottom: 28px; } .lx-home .lx-acc6 { flex-direction: row; height: auto; max-width: none; gap: 10px; padding-left: var(--gut); padding-right: var(--gut); scroll-padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lx-home .lx-acc6::-webkit-scrollbar { display: none; } .lx-home .lx-ln-kno { display: none; } /* the rail runs in the owner's order, so 01-06 would read out of sequence */ .lx-home .lx-ln, .lx-home .lx-ln.is-on { order: var(--ph, 0); flex: 0 0 78%; min-height: 0; height: min(112vw, 460px); scroll-snap-align: start; } .lx-home .lx-ln img { transform: none; filter: none; } .lx-home .lx-ln-col { display: none; } .lx-home .lx-ln-exp { opacity: 1; transform: none; left: 20px; right: 20px; bottom: 20px; gap: 8px; } .lx-home .lx-ln-n { font-size: 36px; } .lx-home .lx-ln-tag { font-size: 18px; } .lx-quote { padding-top: 46px; padding-bottom: 46px; gap: 18px; } .lx-making { display: block; padding-top: 34px; padding-bottom: 40px; } .lx-making-img { display: none; } .lx-making-t { display: block; } .lx-making-t .lx-h-l { margin: 14px 0 24px; } .lx-mk-list { display: flex; gap: 10px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scroll-padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lx-mk-list::-webkit-scrollbar { display: none; } .lx-mk { flex: 0 0 78%; border: 0; scroll-snap-align: start; } .lx-mk-ph { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 16px; background: var(--ink-2); } .lx-mk-row { padding: 16px 0 8px; pointer-events: none; gap: 10px; } .lx-mk-t, .lx-mk.is-on .lx-mk-t { font-size: 26px; color: var(--ink); } .lx-mk .lx-pm, .lx-mk-bar { display: none; } .lx-mk .lx-mk-body { grid-template-rows: 1fr; } .lx-mk .lx-mk-body > div { padding-bottom: 0; gap: 12px; } .lx-studio { padding-top: 50px; padding-bottom: 54px; gap: 30px; } .lx-studio-t { gap: 16px; } .lx-steps .lx-small { display: none; } .lx-steps li { padding-top: 10px; padding-bottom: 10px; } .lx-collage { height: 310px; } .lx-collage figcaption { font-size: 18px; left: 12px; bottom: 10px; } .lx-pack-img { min-height: 250px; } .lx-pack-t { padding: 40px var(--gut) 46px; gap: 16px; } .lx-sign { margin-top: 2px; padding: 20px 22px; } .lx-sign-k { font-size: 26px; } .lx-talk { padding-top: 46px; padding-bottom: 46px; gap: 26px; } .lx-talk-img { aspect-ratio: 16 / 10; } .lx-talk-t { gap: 16px; } /* product page: the name comes into the first screen; the breadcrumb stays in the page data for search */ body.lx-t-product .lx-crumb { display: none; } } @media (max-width: 767px) and (max-height: 640px) { .lx-hero-spm .lx-eyebrow { display: none; } .lx-hero-spm .lx-hero-h { font-size: 31px; } }