/* ========================================================================= LeerHaus — design system Two-tier tokens: 1. PRIMITIVES — the raw LeerHaus palette. Colour values live ONLY here. 2. SEMANTIC — the roles the UI actually paints with (surface, text, border, button…). Every component and every Fluent Cart override references these, never a raw colour. Because the whole UI is painted through the semantic layer, a theme (e.g. dark mode) is just a redefinition of those ~15 semantic tokens — no component CSS changes. See the commented dark-mode block below. ========================================================================= */ :root { /* ---- 1. Primitives (raw palette — values live only here) ------------- */ --lh-paper: #F4F0E7; --lh-ink: #1A1613; --lh-ink-soft: #4C463D; --lh-muted: #6E685E; --lh-faint: #A69E8E; --lh-faint-2: #B4AC9B; --lh-line: #DCD6C8; --lh-line-soft: #E4DECF; --lh-line-firm: #C9C2B1; --lh-cream: #EFEADF; --lh-cream-soft: #FBF9F4; --lh-white: #FFFFFF; --lh-oxblood: #6B3132; --lh-gold: #A67C33; /* antique gold — selection accent */ --lh-plinth-a: #FBF9F4; --lh-plinth-b: #EBE5D8; --lh-shadow-rgb: 26, 22, 19; /* ---- 2. Semantic tokens (roles — dark mode redefines these) ---------- */ /* Surfaces */ --lh-bg: var(--lh-paper); /* page / drawer background */ --lh-surface: var(--lh-white); /* raised card (checkout summary) */ --lh-surface-sunken: var(--lh-cream-soft); /* inset panel (coupon, order-bump) */ --lh-surface-muted: var(--lh-cream); /* muted band (footer) */ --lh-input-bg: var(--lh-white); /* Text */ --lh-text: var(--lh-ink); --lh-text-soft: var(--lh-ink-soft); --lh-text-muted: var(--lh-muted); --lh-text-faint: var(--lh-faint); --lh-text-faint-2: var(--lh-faint-2); /* Borders */ --lh-border: var(--lh-line); --lh-border-soft: var(--lh-line-soft); --lh-border-strong: var(--lh-line-firm); /* Interactive */ --lh-accent: var(--lh-oxblood); --lh-on-accent: var(--lh-paper); --lh-btn-bg: var(--lh-ink); --lh-btn-text: var(--lh-paper); /* Effects */ --lh-plinth: linear-gradient(176deg, var(--lh-plinth-a) 0%, var(--lh-plinth-b) 100%); --lh-shadow: rgba(var(--lh-shadow-rgb), 0.20); --lh-shadow-strong: rgba(var(--lh-shadow-rgb), 0.22); --lh-header-bg: rgba(244, 240, 231, 0.88); --lh-overlay: rgba(var(--lh-shadow-rgb), 0.45); /* ---- Type & layout --------------------------------------------------- */ --lh-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --lh-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --lh-container: 1240px; --lh-gutter: 48px; } /* ------------------------------------------------------------------------- Dark mode — a redefinition of the semantic tokens only. No component or Fluent Cart override changes, because everything paints through the tokens. Applied via [data-theme] on , set before first paint by the inline no-flash script in functions.php, then toggled by assets/theme-toggle.js. ------------------------------------------------------------------------- */ [data-theme="dark"] { --lh-bg: #17130F; /* warm near-black */ --lh-surface: #221D17; /* raised card */ --lh-surface-sunken: #1E1A14; /* inset panel */ --lh-surface-muted: #201B15; /* muted band (footer) */ --lh-input-bg: #221D17; --lh-text: #F1ECE1; --lh-text-soft: #D8D0C2; --lh-text-muted: #A79E8E; --lh-text-faint: #7C7565; --lh-text-faint-2: #6C6555; --lh-border: #37312A; --lh-border-soft: #2E2921; --lh-border-strong: #453E33; --lh-accent: #B06B6C; /* lightened oxblood, legible on dark */ --lh-gold: #C7A55B; /* lifted gold, legible on dark */ /* --lh-on-accent stays light (var(--lh-paper)) — accent is dark in both modes */ --lh-btn-bg: #F1ECE1; /* light slab pops on dark */ --lh-btn-text: #17130F; --lh-plinth-a: #2A241C; --lh-plinth-b: #1C1810; --lh-shadow-rgb: 0, 0, 0; --lh-header-bg: rgba(23, 19, 15, 0.88); } /* Cover the html element too, so overscroll / gaps don't flash paper. */ html { background: var(--lh-bg); } /* ---- base -------------------------------------------------------------- */ body.leerhaus, body { background: var(--lh-bg); color: var(--lh-text); font-family: var(--lh-sans); font-size: 16px; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--lh-accent); color: var(--lh-on-accent); } a { color: inherit; text-decoration: none; } /* Accessibility — skip link + keyboard focus. Skip link sits off-screen until focused, then drops into view. */ .lh-skip { position: fixed; top: 10px; left: 10px; z-index: 9999; transform: translateY(-160%); padding: 12px 20px; background: var(--lh-accent); color: var(--lh-on-accent); font-family: var(--lh-sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; transition: transform .2s ease; } .lh-skip:focus { transform: translateY(0); outline: none; } /* Visible ring for keyboard users only — never on mouse click. */ :focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 3px; border-radius: 1px; } [data-theme="dark"] :focus-visible { outline-color: var(--lh-accent); } @keyframes lhFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .lh-fade { animation: lhFade .6s ease both; } /* ---- layout ------------------------------------------------------------ */ .lh-container { max-width: var(--lh-container); margin-inline: auto; padding-inline: var(--lh-gutter); } .lh-narrow { max-width: 720px; margin-inline: auto; padding-inline: var(--lh-gutter); } /* ---- type ------------------------------------------------------------- */ .lh-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--lh-text-faint); font-weight: 500; } .lh-serif { font-family: var(--lh-serif); font-weight: 500; } .lh-display { font-family: var(--lh-serif); font-weight: 500; font-size: clamp(46px, 7vw, 94px); line-height: 1.02; letter-spacing: -0.012em; color: var(--lh-text); } .lh-heading { font-family: var(--lh-serif); font-weight: 500; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.01em; color: var(--lh-text); } /* ---- buttons ---------------------------------------------------------- */ .lh-btn { display: inline-block; background: var(--lh-btn-bg); color: var(--lh-btn-text); border: none; padding: 15px 32px; font-family: var(--lh-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background .3s; } .lh-btn:hover { background: var(--lh-accent); color: var(--lh-on-accent); } .lh-btn--ghost { background: transparent; color: var(--lh-text); border: 1px solid var(--lh-border-strong); transition: border-color .3s; } .lh-btn--ghost:hover { background: transparent; border-color: var(--lh-text); } .lh-link { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--lh-text); text-decoration: none !important; /* the border-bottom is the underline — kill the stray content-link underline stacking on it */ border-bottom: 1px solid var(--lh-border-strong); padding-bottom: 4px; transition: color .25s, border-color .25s; cursor: pointer; } .lh-link:hover { color: var(--lh-accent); border-color: var(--lh-accent); } /* ---- header ----------------------------------------------------------- */ /* Template parts render inside a wrapping
. That box would confine the sticky header to its own height, so we make the wrapper generate no box — the header then sticks to .wp-site-blocks. */ .wp-block-template-part { display: contents; } .lh-header { border-bottom: 1px solid var(--lh-border); position: sticky; top: 0; z-index: 30; background: var(--lh-header-bg); backdrop-filter: blur(10px); } .lh-header__inner { max-width: var(--lh-container); margin-inline: auto; padding: 20px var(--lh-gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .lh-nav { display: flex; gap: 30px; align-items: center; } .lh-nav--end { justify-content: flex-end; } .lh-nav--list { list-style: none; margin: 0; padding: 0; } .lh-nav--list li { margin: 0; } .lh-nav a, .lh-nav span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--lh-text-muted); transition: color .25s; cursor: pointer; } .lh-nav a.is-current, .lh-nav a:hover, .lh-nav span:hover { color: var(--lh-text); } .lh-nav a:hover, .lh-nav span:hover { color: var(--lh-accent); } .lh-wordmark { font-family: var(--lh-serif); font-weight: 500; font-size: 25px; letter-spacing: 0.36em; text-indent: 0.36em; color: var(--lh-text); line-height: 1; text-align: center; } .lh-wordmark__sub { font-size: 8px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--lh-text-faint); margin-top: 4px; font-weight: 500; text-align: center; } /* Theme toggle — shows the icon of the mode you'd switch TO. */ .lh-theme-toggle { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--lh-text-muted); display: inline-flex; align-items: center; line-height: 0; transition: color .25s; } .lh-theme-toggle:hover { color: var(--lh-accent); } .lh-theme-toggle svg { width: 19px; height: 19px; } .lh-theme-toggle .lh-theme-toggle__moon { display: block; } .lh-theme-toggle .lh-theme-toggle__sun { display: none; } [data-theme="dark"] .lh-theme-toggle .lh-theme-toggle__moon { display: none; } [data-theme="dark"] .lh-theme-toggle .lh-theme-toggle__sun { display: block; } /* The in-menu toggle only appears inside the mobile menu (see 820px block). */ .lh-menu-toggle { display: none; } /* ---- product cards / gallery ------------------------------------------ */ .lh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; } /* Curated grid for landing/gift pages. It sits inside the constrained page body (~720px), so break it out to the container width with a viewport-centred technique that doesn't depend on the theme's alignfull handling. */ .lh-grid--curated { width: min(100vw - 2 * var(--lh-gutter), var(--lh-container)); margin: 24px auto 0; position: relative; left: 50%; transform: translateX(-50%); box-sizing: border-box; } .lh-grid--catalogue { row-gap: 84px; } .lh-card { display: block; color: inherit; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .lh-card:hover { transform: translateY(-5px); } /* On the Collection archive the cards render inside .entry-content; stop the generic prose-link styling (accent + underline) bleeding into the card text. */ .entry-content a.lh-card, .entry-content a.lh-card:hover { color: inherit; text-decoration: none; } .lh-plinth { position: relative; aspect-ratio: 4 / 5; background: var(--lh-plinth); overflow: hidden; } /* Real featured image fills the plinth (covers the empty-plinth placeholder). */ .lh-plinth__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .lh-plinth__no { z-index: 1; } .lh-plinth::after { /* the cast shadow of an object that is not there */ content: ""; position: absolute; left: 50%; bottom: 15%; width: 46%; height: 7%; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--lh-shadow), transparent 70%); filter: blur(3px); } /* A real photo carries its own shadow — drop the placeholder cast shadow so it doesn't overlay the image. */ .lh-plinth:has(.lh-plinth__img)::after { content: none; } /* Sold-out badge — small overlay pill in the plinth's top-right; the image is gently dimmed to read as unavailable. Inverted ink/paper for both themes. */ .lh-plinth__soldout { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--lh-text); color: var(--lh-bg); font-family: var(--lh-sans); font-size: 10px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 10px 6px; } .lh-plinth--sold .lh-plinth__img { opacity: 0.72; } /* Fulfilment tag(s) — physical / digital, plus a subscription tag where it applies — bottom-left of the plinth, so the delivery type is clear at a glance. Theme-aware so it reads on the plinth in light and dark. */ .lh-plinth__type { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; gap: 6px; } .lh-plinth__tag { font-family: var(--lh-sans); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; line-height: 1; padding: 5px 8px; background: var(--lh-bg); color: var(--lh-text-muted); border: 1px solid var(--lh-border); } .lh-plinth__tag--sub { color: var(--lh-accent); border-color: var(--lh-accent); } /* Same tag on the single-product gallery image, a touch more inset. */ .lh-gallery__type { left: 20px; bottom: 20px; } .lh-plinth__no { position: absolute; top: 16px; left: 16px; font-size: 10px; letter-spacing: 0.22em; color: var(--lh-text-faint-2); font-weight: 500; } .lh-plinth__note { position: absolute; bottom: 22px; right: 22px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lh-text-faint-2); font-weight: 500; } .lh-card__meta { margin-top: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .lh-card__name { font-family: var(--lh-serif); font-size: 24px; font-weight: 500; line-height: 1.12; } .lh-card__medium { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lh-text-faint); margin-top: 7px; font-weight: 500; } .lh-card__price { font-size: 14px; font-weight: 500; white-space: nowrap; } .lh-card__line { font-size: 13.5px; line-height: 1.6; color: var(--lh-text-muted); margin-top: 12px; max-width: 34ch; } /* ---- product page ----------------------------------------------------- */ .lh-product { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 76px; align-items: start; } .lh-product__price { font-size: 26px; font-weight: 500; margin: 22px 0 0; } .lh-product__blurb { font-size: 15.5px; line-height: 1.78; color: var(--lh-text-soft); margin: 28px 0 0; max-width: 46ch; } .lh-bump { display: flex; gap: 15px; align-items: flex-start; border: 1px solid var(--lh-border); padding: 18px 20px; cursor: pointer; margin: 34px 0 0; background: var(--lh-surface-sunken); } .lh-bump input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--lh-accent); cursor: pointer; } .lh-bump__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } .lh-qty { display: flex; align-items: center; border: 1px solid var(--lh-border-strong); } .lh-qty button { width: 44px; min-height: 50px; background: transparent; border: none; font-size: 18px; color: var(--lh-text); cursor: pointer; font-family: var(--lh-sans); } .lh-qty span { width: 40px; text-align: center; font-size: 14px; font-weight: 500; } .lh-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; } .lh-details summary::-webkit-details-marker { display: none; } .lh-details { border-top: 1px solid var(--lh-border-soft); padding: 16px 0; } .lh-details p { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--lh-text-muted); } .lh-plus { font-size: 15px; color: var(--lh-text-faint); transition: transform .3s; } .lh-details[open] .lh-plus { transform: rotate(45deg); } /* Space above the accordions. Scoped to .single-fluent-products so it beats WordPress's post-content layout rule (which zeroes child margins). */ .single-fluent-products .lh-product__details { margin-top: 68px; } .lh-product__details .lh-details:last-child { border-bottom: 1px solid var(--lh-border-soft); } /* ---- manifesto / provenance bands ------------------------------------- */ .lh-band { padding: 118px 0; border-top: 1px solid var(--lh-border); border-bottom: 1px solid var(--lh-border); text-align: center; } .lh-band__quote { font-family: var(--lh-serif); font-weight: 500; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.14; letter-spacing: -0.008em; max-width: 20ch; margin-inline: auto; } /* ---- homepage sections (authored with core blocks) -------------------- Layout lives in these classes rather than editor-strippable inline styles, so the sections stay editable in the Site Editor. Rendering is unchanged. */ .lh-hero { max-width: var(--lh-container); margin-inline: auto; padding: 72px var(--lh-gutter) 100px; text-align: center; box-sizing: border-box; } .lh-hero .lh-eyebrow { letter-spacing: 0.32em; } .lh-hero__title { margin: 26px auto 0 !important; max-width: none; } .lh-hero__lede { margin: 30px auto 0 !important; max-width: none; } .lh-cta-row { justify-content: center; gap: 16px; margin-top: 42px !important; flex-wrap: wrap; } .lh-section { max-width: var(--lh-container); margin-inline: auto; padding: 20px var(--lh-gutter) 30px; box-sizing: border-box; } .lh-section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 52px; } /* On mobile the eyebrow/title and the "view all" link stack rather than cramp side-by-side (homepage featured + single-product related). */ @media (max-width: 700px) { .lh-section__head { flex-direction: column; align-items: flex-start; gap: 18px; } } .lh-section__eyebrow { letter-spacing: 0.22em; margin-bottom: 12px; } .lh-section__title { font-family: var(--lh-serif); font-weight: 500; font-size: 34px; color: var(--lh-text); } /* "From the collection" related grid at the foot of the single product page. */ /* No divider between the accordions and the related block — just breathing room. WP's flow layout zeroes margin-block on .lh-related, so use padding for the gap. */ .lh-related { padding-top: 76px; } /* Curated cross-sells use the same three-up browse grid as the collection. On the rare occasion only two in-stock partners remain, they left-align in the grid, which is fine. */ /* The single-product extra details (long description, accordions, related) sit in the full alignwide column; cap them to the content width so they line up with the product summary (image + buy) above. */ .single-fluent-products .entry-content > .wp-block-paragraph, .single-fluent-products .lh-product__details, .single-fluent-products .lh-related { max-width: var(--lh-container); margin-inline: auto; padding-inline: var(--lh-gutter); box-sizing: border-box; } /* Breathing room between the long-description paragraphs. WP's post-content layout forces margin-block:0 on every child; this four-class scope beats it. */ .single-fluent-products .entry-content > .wp-block-paragraph + .wp-block-paragraph { margin-top: 1.4em; } /* Account (page-id-8) — FluentCart's two-pane customer dashboard needs the wide site column. The default post-content caps at contentSize (720px), leaving the portal cramped in the left third; widen it to the site content measure so it lines up with the hero and section blocks. */ .page-id-8 .entry-content.wp-block-post-content { max-width: calc(var(--lh-container) - 2 * var(--lh-gutter)); } .lh-band { margin-top: 64px; } .lh-band .lh-eyebrow { margin-bottom: 26px; } .lh-band__lede { font-size: 15px; max-width: 46ch; margin: 28px auto 0 !important; } .lh-provenance { max-width: 720px; margin-inline: auto; padding: 112px var(--lh-gutter) 132px; text-align: center; box-sizing: border-box; } .lh-provenance .lh-eyebrow { margin-bottom: 22px; } .lh-provenance__title { font-family: var(--lh-serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.18; margin: 0; color: var(--lh-text); } .lh-provenance__lede { font-size: 15px; margin: 24px auto 34px !important; max-width: 52ch; } /* The Prospectus — a public, deadpan manifesto page. Reads like a gallery's offering document: centred masthead, then numbered articles set on a single reading column with hairline rules. */ /* Built with native blocks (wp:group/heading/paragraph/separator/button). WP's flow-layout blockGap reset (`.wp-container-N.wp-container-N > * { margin-block:0 }`, specificity 0,2,0, injected after the theme CSS) zeroes child margins, so the intentional vertical rhythm below is pinned with !important. */ .lh-prospectus { max-width: 760px; margin-inline: auto; } .lh-prospectus__head { text-align: center; padding-bottom: 20px; } .lh-prospectus__eyebrow { font-family: var(--lh-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--lh-text-faint); } .lh-prospectus__title { font-family: var(--lh-serif); font-weight: 500; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04; letter-spacing: -0.01em; margin: 20px 0 0 !important; text-wrap: balance; color: var(--lh-text); } .lh-prospectus__deck { font-style: italic; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--lh-accent); max-width: 40ch; margin: 26px auto 0 !important; } .lh-prospectus__rule { border: 0; width: 46px; max-width: 46px; height: 1px; background: var(--lh-gold); margin: 34px auto 0 !important; opacity: 0.9; } .lh-article { display: grid; grid-template-columns: 52px 1fr; gap: 8px 26px; align-items: start; border-top: 1px solid var(--lh-border); padding: 34px 0; } .lh-article__num { font-family: var(--lh-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--lh-gold-deep, #8A6626); padding-top: 5px; } .lh-article__body h3 { font-family: var(--lh-serif); font-weight: 500; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.15; margin: 0 0 12px !important; color: var(--lh-text); } .lh-article__body p { font-size: 16.5px; line-height: 1.68; color: var(--lh-text-soft); margin: 0; } .lh-article__body .lh-article__cta { margin-top: 22px !important; } .lh-prospectus__close { border-top: 1px solid var(--lh-border-strong); padding-top: 40px; text-align: center; } .lh-prospectus__close p { font-style: italic; font-size: 19px; line-height: 1.5; color: var(--lh-accent); margin: 0 auto; max-width: 44ch; } .lh-prospectus__sig { font-family: var(--lh-sans); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lh-text-faint); margin-top: 18px !important; } @media (max-width: 560px) { .lh-article { grid-template-columns: 1fr; gap: 4px; } .lh-article__num { padding-top: 0; } } /* Core wp:button styled as the LeerHaus ink slab / ghost. The .lh-btn/.lh-btn--ghost base rules (written for plain ) also match the core button *wrapper*, doubling its padding/border — neutralise the wrapper so only the inner link carries the styling. */ .wp-block-button.lh-btn, .wp-block-button.lh-btn--ghost { background: transparent; padding: 0; border: 0; } .wp-block-button.lh-btn > .wp-block-button__link, .wp-block-button.lh-btn--ghost > .wp-block-button__link { border-radius: 0; padding: 15px 32px; font-family: var(--lh-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; text-decoration: none; transition: background .3s, border-color .3s, color .3s; } .wp-block-button.lh-btn > .wp-block-button__link { background: var(--lh-btn-bg); color: var(--lh-btn-text); border: 0; } .wp-block-button.lh-btn > .wp-block-button__link:hover { background: var(--lh-accent); color: var(--lh-on-accent); } .wp-block-button.lh-btn--ghost > .wp-block-button__link { background: transparent; color: var(--lh-text); border: 1px solid var(--lh-border-strong); } .wp-block-button.lh-btn--ghost > .wp-block-button__link:hover { background: transparent; border-color: var(--lh-text); } /* ---- footer ----------------------------------------------------------- */ .lh-footer { border-top: 1px solid var(--lh-border); background: var(--lh-surface-muted); margin-top: auto; } /* Four columns: brand, The Collection, The Haus, Correspondence (newsletter). */ .lh-footer__cols { max-width: var(--lh-container); margin-inline: auto; padding: 82px var(--lh-gutter) 44px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 48px; } .lh-footer h4 { font-family: var(--lh-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lh-text); font-weight: 600; margin: 0 0 18px; } .lh-footer a { font-size: 13px; color: var(--lh-text-muted); transition: color .25s; } .lh-footer a:hover { color: var(--lh-accent); } /* Footer newsletter ([leerhaus_newsletter] -> FluentCRM). */ .lh-footer__form-note { margin: 0 0 16px; } .lh-subscribe__row { display: flex; border: 1px solid var(--lh-border-strong); background: var(--lh-bg); } .lh-subscribe__email { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 14px; font-family: var(--lh-sans); font-size: 13px; color: var(--lh-text); outline: none; } .lh-subscribe__email::placeholder { color: var(--lh-text-faint); } .lh-subscribe__btn { flex: none; border: 0; cursor: pointer; background: var(--lh-btn-bg); color: var(--lh-btn-text); padding: 0 18px; font-family: var(--lh-sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; transition: background .3s; } .lh-subscribe__btn:hover:not(:disabled) { background: var(--lh-accent); color: var(--lh-on-accent); } .lh-subscribe__btn:disabled { opacity: 0.6; cursor: default; } .lh-subscribe__msg:not(:empty) { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--lh-text-muted); } /* Footer authored with core blocks: wordmark, blurb, legal line, link Lists. */ /* text-indent:0 so the wordmark's left edge lines up with the blurb and the other footer columns; padding-bottom adds breathing room above the blurb. */ .lh-footer__wordmark { text-align: left; font-size: 24px; letter-spacing: 0.3em; text-indent: 0; padding-bottom: 6px; } /* Two-class scope (.lh-footer ancestor) so these beat WP's flow-layout container rule (.wp-container-… > * { margin-block: 0 }) injected after the theme stylesheet, which otherwise zeroes the footer paragraph margins. */ .lh-footer .lh-footer__blurb { margin: 28px 0 0; max-width: 32ch; } .lh-footer .lh-footer__legal { margin-top: 30px; letter-spacing: 0.14em; } .lh-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .lh-footer__links li { margin: 0; } .lh-footer__form-note { margin: 0 0 16px; } .lh-footer__bar { border-top: 1px solid var(--lh-border); } .lh-footer__bar-inner { box-sizing: border-box; max-width: var(--lh-container); margin-inline: auto; padding: 24px var(--lh-gutter) 8px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.06em; color: var(--lh-text-faint); } .lh-footer__bar-legal { box-sizing: border-box; max-width: var(--lh-container); margin-inline: auto; padding: 0 var(--lh-gutter) 24px; font-size: 10px; letter-spacing: 0.05em; color: var(--lh-text-faint); opacity: 0.85; } /* Agency credit — sits opposite the copyright in the footer bar. */ .lh-footer__credit { color: var(--lh-text-faint); } .lh-footer__credit a { font-size: inherit; color: var(--lh-text-muted); border-bottom: 1px solid var(--lh-border-strong); padding-bottom: 1px; transition: color .25s, border-color .25s; } .lh-footer__credit a:hover { color: var(--lh-accent); border-color: var(--lh-accent); } /* ---- responsive ------------------------------------------------------- */ @media (max-width: 900px) { :root { --lh-gutter: 28px; } .lh-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .lh-product { grid-template-columns: 1fr; gap: 40px; } .lh-footer__cols { grid-template-columns: 1fr 1fr; } .lh-nav { gap: 22px; } } /* ---- mobile menu (hamburger + full-screen deadpan menu) --------------- */ .lh-burger { display: none; } .lh-mobile-menu { display: none; } @media (max-width: 820px) { .lh-header__inner { position: relative; } .lh-nav--list, .lh-nav__enquiries, .lh-nav__account, .lh-theme-toggle--header { display: none !important; } /* Burger is absolute-left and the List is hidden, so pin the wordmark to the centre column and the cluster to the right column. */ .lh-header__inner > a { grid-column: 2; justify-self: center; } .lh-header__inner > .lh-nav--end { grid-column: 3; } .lh-wordmark { font-size: 18px; letter-spacing: 0.26em; text-indent: 0.26em; } .lh-wordmark__sub { display: none; } .lh-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; position: absolute; left: var(--lh-gutter); top: 50%; transform: translateY(-50%); width: 22px; height: 16px; background: none; border: 0; padding: 0; cursor: pointer; z-index: 41; } .lh-burger span { display: block; height: 1.5px; width: 100%; background: var(--lh-text); transition: transform .3s, opacity .3s; } html.lh-menu-open .lh-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } html.lh-menu-open .lh-burger span:nth-child(2) { opacity: 0; } html.lh-menu-open .lh-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .lh-mobile-menu { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--lh-bg); padding: 104px var(--lh-gutter) 40px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s, transform .3s; z-index: 20; /* below the sticky header (z-30) so the burger stays clickable */ overflow-y: auto; } html.lh-menu-open .lh-mobile-menu { opacity: 1; transform: none; pointer-events: auto; } .lh-mobile-menu a { font-family: var(--lh-serif); font-size: clamp(28px, 8vw, 40px); font-weight: 500; color: var(--lh-text); padding: 16px 0; border-bottom: 1px solid var(--lh-border-soft); transition: color .25s; } .lh-mobile-menu a:hover { color: var(--lh-accent); } /* Theme toggle, relocated into the mobile menu as a row. */ .lh-menu-toggle { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--lh-text); font-family: var(--lh-serif); font-size: clamp(28px, 8vw, 40px); font-weight: 500; transition: color .25s; } .lh-menu-toggle:hover { color: var(--lh-accent); } .lh-menu-toggle svg { width: 26px !important; height: 26px !important; } .lh-menu-toggle__label { line-height: 1; } html.lh-menu-open, html.lh-menu-open body { overflow: hidden; } /* Match the shorter mobile site header (60px, no wordmark subtitle). Extra specificity so it beats the desktop 84px rule that appears later. */ .fct-cart-drawer .fct-cart-drawer-header { height: 60px !important; } } @media (max-width: 560px) { .lh-grid { grid-template-columns: 1fr; } .lh-footer__cols { grid-template-columns: 1fr; } /* FC's checkout wrapper adds a 20px inner padding on top of the 28px page gutter, doubling to ~48px each side on phones. Drop the inner padding so the inputs sit in one clean gutter. */ .page-id-11 .fct-checkout { padding-inline: 0 !important; } } /* ========================================================================= Fluent Cart skin — all overrides paint through the semantic tokens above. ========================================================================= */ .fluent-cart, .fct-storefront, [class*="fluent-cart"], [class*="fct-"] { font-family: var(--lh-sans); color: var(--lh-text); } /* Prices */ [class*="fct-"] .fct-price, [class*="fluent-cart"] .price, .fct-product-price { font-weight: 500; color: var(--lh-text); } /* Primary actions — add to cart / checkout / place order */ .fct-btn, .fct-add-to-cart, .fluent-cart-add-to-cart button, button.fct-checkout-btn, .fct-place-order { background: var(--lh-btn-bg); color: var(--lh-btn-text); border: none; border-radius: 0; padding: 15px 32px; font-family: var(--lh-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; transition: background .3s; } .fct-btn:hover, .fct-add-to-cart:hover, .fct-place-order:hover { background: var(--lh-accent); color: var(--lh-on-accent); } /* Inputs across cart / checkout */ [class*="fct-"] input[type="text"], [class*="fct-"] input[type="email"], [class*="fct-"] input[type="number"], [class*="fct-"] select, [class*="fct-"] textarea { border: 1px solid var(--lh-border-strong); border-radius: 0; background: var(--lh-input-bg); font-family: var(--lh-sans); color: var(--lh-text); padding: 12px 14px; } /* Cards / panels in cart & checkout */ [class*="fct-"] .fct-card, [class*="fct-"] .fct-panel { border: 1px solid var(--lh-border); border-radius: 0; background: var(--lh-surface-sunken); } /* Order-bump + cross-sell surfaces reuse the bespoke look */ .fct-order-bump, .fct-cross-sell-item { border: 1px solid var(--lh-border); background: var(--lh-surface-sunken); border-radius: 0; } /* ------------------------------------------------------------------------- Header mini-cart → deadpan "Basket (n)" text. ------------------------------------------------------------------------- */ .lh-basket { display: inline-flex; align-items: center; cursor: pointer; line-height: 0; } .lh-basket .lh-basket-count { cursor: pointer; } .lh-basket .wp-block-shortcode { margin: 0; display: inline-flex; } .lh-basket .fct-mini-cart, .lh-basket .fct-mini-cart-wrap { display: inline-flex; align-items: center; gap: 0; } .lh-basket .fct-mini-cart-button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; font-family: var(--lh-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--lh-text-muted); transition: color .25s; } .lh-basket .fct-mini-cart-button:hover { color: var(--lh-accent); } /* Hide FC's cart icon + running total; keep the label + count only. */ .lh-basket .fct-mini-cart-icon-img, .lh-basket .fct-mini-cart-button svg, .lh-basket .fct-mini-cart-amount { display: none !important; } .lh-basket .fct-mini-cart-wrap::before { content: ""; display: block; width: 21px; height: 21px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Hide FC's own badge — the count is driven live by cart-count.js into .lh-basket-count so it updates from an empty cart without a reload. */ .lh-basket .fct-mini-cart-badge { display: none !important; } .lh-basket-count { font: inherit; color: inherit; letter-spacing: inherit; font-size: 12px; line-height: 1; } .lh-basket-count:not(:empty) { margin-left: 0.4em; } .lh-basket:hover .lh-basket-count { color: var(--lh-accent); } /* Account link → icon (header, desktop + mobile). */ .lh-nav__account { display: inline-flex; align-items: center; } .lh-nav__account svg { width: 20px; height: 20px; display: block; } /* FC nests the single-product image in "thumb"/zoom containers of assorted fixed heights, leaving an empty box under the 4:5 wrapper. Neutralise those containers and absolutely fill the wrapper with the image, so the photo always occupies the full 4:5 frame. */ .single-fluent-products .fct-product-gallery-thumb, .single-fluent-products .fct-product-gallery-thumb > * { position: static !important; height: auto !important; aspect-ratio: auto !important; } .single-fluent-products .fct-product-gallery-wrapper .fct-product-gallery-thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } /* ------------------------------------------------------------------------- Single product — buy section skin (real fct- classes from the storefront). ------------------------------------------------------------------------- */ /* The "photographed as absent" plinth for the imageless gallery. */ .fct-product-gallery-wrapper, .fct-product-gallery-thumb { background: var(--lh-plinth); border-radius: 0; } .fct-product-gallery-wrapper { position: relative; aspect-ratio: 4 / 5; overflow: hidden; } /* Title + short description. */ .fct-single-product .fct-product-title, .fct-product-card-title { font-family: var(--lh-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--lh-text); } .fct-product-card-excerpt { font-size: 15.5px; line-height: 1.78; color: var(--lh-text-soft); } /* Price. */ .fct-product-item-price, .fct-item-price, .fct-product-card-prices { font-family: var(--lh-sans); font-weight: 500; color: var(--lh-text); } .fct-single-product .fct-product-item-price, .fct-single-product .fct-item-price { font-size: 26px; } /* Quantity stepper — compact bordered control (no full-width box, no label). */ .fct-product-quantity-container { border: 0 !important; padding: 0 !important; background: transparent !important; display: flex; align-items: center; } .fct-product-quantity-container .quantity-title { display: none !important; } /* Match the cart-drawer stepper (the source of truth): transparent, squared, hairline border — not FC's grey rounded pill. */ .fct-product-quantity { display: inline-flex; align-items: center; background: var(--lh-input-bg) !important; border: 1px solid var(--lh-border-strong) !important; border-radius: 0 !important; height: 38px !important; padding: 0 !important; overflow: hidden; } .fct-quantity-input { border: 0 !important; background: var(--lh-input-bg) !important; font-family: var(--lh-sans); color: var(--lh-text); text-align: center; box-shadow: none !important; width: 44px !important; height: 36px !important; font-size: 14px !important; } .fct-quantity-increase-button, .fct-quantity-decrease-button { background: transparent !important; border: 0 !important; color: var(--lh-text) !important; font-family: var(--lh-sans); font-size: 14px !important; width: 34px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; cursor: pointer; } /* Add-to-cart / buy buttons — deadpan ink slab, accent on hover. */ .fct-product-buttons-wrap { gap: 14px; } [data-fluent-cart-add-to-cart-button], [data-fluent-cart-direct-checkout-button], .fct-product-buttons-wrap button, .fct-product-buttons-wrap a.fct-btn { background: var(--lh-btn-bg) !important; color: var(--lh-btn-text) !important; border: 0; border-radius: 0; padding: 16px 28px; font-family: var(--lh-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background .3s; } /* Keep the label legible on hover — FC otherwise darkens it, losing it on accent. */ [data-fluent-cart-add-to-cart-button]:hover, .fct-product-buttons-wrap button:hover { background: var(--lh-accent) !important; color: var(--lh-on-accent) !important; } /* Secondary/direct-checkout reads as the ghost variant (text-coloured throughout). */ [data-fluent-cart-direct-checkout-button] { background: transparent !important; color: var(--lh-text) !important; border: 1px solid var(--lh-border-strong) !important; } [data-fluent-cart-direct-checkout-button]:hover { background: transparent !important; border-color: var(--lh-text) !important; color: var(--lh-text) !important; } /* ------------------------------------------------------------------------- Single product page — scoped to the CPT single (body.single-fluent-products). ------------------------------------------------------------------------- */ /* Gallery → the "photographed as absent" plinth. */ .single-fluent-products .fct-product-gallery-wrapper { position: relative; aspect-ratio: 4 / 5; background: var(--lh-plinth); overflow: hidden; } /* Hide FC's generic placeholder image + thumbnail controls (products ship no photos). */ .single-fluent-products .fct-product-gallery-thumb img[src*="placeholder"], .single-fluent-products .fct-gallery-thumb-controls { display: none !important; } /* Cast shadow of an object that is not there. */ .single-fluent-products .fct-product-gallery-wrapper::before { content: ""; position: absolute; left: 50%; bottom: 15%; width: 44%; height: 7%; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--lh-shadow-strong), transparent 70%); filter: blur(4px); z-index: 1; } /* A real photo carries its own shadow — drop the placeholder cast shadow. */ .single-fluent-products .fct-product-gallery-wrapper:has(img:not([src*="placeholder"]))::before { content: none; } /* Every LeerHaus product is a single simple variant — hide the selector. */ .single-fluent-products .fct-product-variants { display: none !important; } /* Variation swatches (Edition / Size / Quantity) — squared and on-brand, with a gold outline on the chosen option instead of FC's rounded grey pill. */ .fct-attribute-label { font-family: var(--lh-sans) !important; font-size: 11px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--lh-text-faint) !important; font-weight: 500 !important; } .fct-swatch-item.fct-swatch-label { border-radius: 0 !important; border: 1px solid var(--lh-border-strong) !important; background: var(--lh-input-bg) !important; color: var(--lh-text-soft) !important; font-family: var(--lh-sans) !important; font-size: 12.5px !important; letter-spacing: 0.04em !important; box-shadow: none !important; transition: border-color .2s, color .2s, box-shadow .2s, background .2s; } .fct-swatch-item.fct-swatch-label:hover { border-color: var(--lh-gold) !important; color: var(--lh-text) !important; } .fct-swatch-item.fct-swatch-label.selected { border-color: var(--lh-gold) !important; box-shadow: inset 0 0 0 1px var(--lh-gold) !important; /* doubles the stroke → crisp 2px gold */ color: var(--lh-ink) !important; background: var(--lh-plinth-a) !important; } [data-theme="dark"] .fct-swatch-item.fct-swatch-label.selected { color: var(--lh-text) !important; } /* FC prints the price twice (price-range block + buy-section). Keep the one under the title; drop the buy-section duplicate. */ .single-fluent-products .fct-product-item-price { display: none !important; } /* "What arrives" — factual deliverable line rendered under the price. Understated so it clarifies without deflating the deadpan copy above it. */ .lh-arrives { margin: 20px 0 0; max-width: 48ch; font-size: 13.5px; line-height: 1.6; color: var(--lh-text-muted); } .lh-arrives__label { display: block; margin-bottom: 4px; font-family: var(--lh-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lh-text-faint); } /* The product content sits in an alignwide group with no horizontal padding, so it bleeds to the viewport edges on narrower desktops (clipping the buy buttons). Give it the site gutter; it stays centred at 1240 on wide screens. */ .single-fluent-products .wp-block-group.alignwide { padding-inline: var(--lh-gutter); box-sizing: border-box; } /* Title → display serif. */ .single-fluent-products .wp-block-post-title { font-family: var(--lh-serif); font-weight: 500; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.03; letter-spacing: -0.01em; margin: 0 0 6px; } /* Right-column rhythm. */ .single-fluent-products .fct-product-card-excerpt { margin: 20px 0 0; max-width: 46ch; } .single-fluent-products .fct_buy_section { margin-top: 26px; } .single-fluent-products .fct-product-quantity-container { margin-top: 22px; } .single-fluent-products .fct-product-buttons-wrap { margin-top: 22px; } /* Back-in-stock notify form (replaces the buy controls on sold-out products). */ .lh-notify { margin-top: 26px; } .lh-notify__note { font-size: 13.5px; line-height: 1.6; color: var(--lh-text-muted); margin: 0 0 14px; max-width: 42ch; } .lh-notify__row { display: flex; border: 1px solid var(--lh-border-strong); background: var(--lh-input-bg); } .lh-notify__email { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 15px; font-family: var(--lh-sans); font-size: 14px; color: var(--lh-text); outline: none; } .lh-notify__email::placeholder { color: var(--lh-text-faint); } .lh-notify__btn { flex: none; border: 0; border-radius: 0; cursor: pointer; background: var(--lh-btn-bg); color: var(--lh-btn-text); padding: 0 22px; font-family: var(--lh-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; transition: background .3s; } .lh-notify__btn:hover:not(:disabled) { background: var(--lh-accent); color: var(--lh-on-accent); } .lh-notify__btn:disabled { opacity: 0.6; cursor: default; } .lh-notify__msg:not(:empty) { margin: 12px 0 0; font-size: 13px; color: var(--lh-text-muted); } /* ------------------------------------------------------------------------- Shop / catalogue cards — the same "photographed as absent" plinth and ink buttons. LeerHaus ships no product photography by design. ------------------------------------------------------------------------- */ .fct-product-card-image-wrap { position: relative; background: var(--lh-plinth); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0; } /* FC ships the shop card image at 1:1 via a two-class selector that out-ranks the rule above; match its specificity + !important so the Collection cards share the 4:5 of the homepage plinths and the single-product gallery. */ .fct-product-card .fct-product-card-image-wrap { aspect-ratio: 4 / 5 !important; } /* The placeholder graphic IS the img (class is on the ). Hide it; the plinth shows through. A real product image, if ever set, fills the plinth. */ img.fct-product-card-image[src*="placeholder"] { display: none !important; } img.fct-product-card-image { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .fct-product-card-image-wrap::after { content: ""; position: absolute; left: 50%; bottom: 15%; width: 46%; height: 7%; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--lh-shadow), transparent 70%); filter: blur(3px); } /* Real product images carry their own shadow — drop the placeholder cast shadow so it doesn't overlay the photo. */ .fct-product-card-image-wrap:has(img.fct-product-card-image)::after { content: none; } .fct-product-view-button { background: var(--lh-btn-bg) !important; color: var(--lh-btn-text) !important; border: 0 !important; border-radius: 0 !important; font-family: var(--lh-sans) !important; font-size: 11px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; font-weight: 500 !important; transition: background .3s; } .fct-product-view-button:hover { background: var(--lh-accent) !important; color: var(--lh-on-accent) !important; } /* ------------------------------------------------------------------------- Cart drawer (sidebar) — LeerHaus skin. ------------------------------------------------------------------------- */ .fct-cart-drawer { background: var(--lh-bg) !important; } .fct-cart-drawer-overlay { background: var(--lh-overlay) !important; } .fct-cart-drawer-header, .fct-cart-drawer-footer { border-color: var(--lh-border) !important; } .fct-cart-drawer-header { font-family: var(--lh-serif); color: var(--lh-text); height: 84px !important; /* match the site header height */ box-sizing: border-box !important; } /* Close (X) — FC ships a ~16px icon-only button, an unreliable tap target (easy to miss, especially on touch). Enlarge the hit area to ~42px while keeping the icon its original size and near the header's right edge. */ .fct-cart-drawer-close-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin-right: -9px !important; color: var(--lh-text-muted) !important; cursor: pointer; transition: color .25s; } .fct-cart-drawer-close-button:hover { color: var(--lh-accent) !important; } .fct-cart-drawer-close-button svg { width: 16px !important; height: 16px !important; } /* Line items. */ .fct-cart-item { border-color: var(--lh-border-soft) !important; } .fct-cart-item-title { font-family: var(--lh-serif) !important; font-weight: 500 !important; color: var(--lh-text) !important; } .fct-cart-item-price, .fct-cart-item-total { font-family: var(--lh-sans); font-weight: 500; color: var(--lh-text); } .fct-cart-item-variant { color: var(--lh-text-faint); } /* Item thumbnail → just the 60px square image. The row is a flex box that stretches children to the taller text column, and FC's own rules leave the a few px taller than the 60px image, which exposed a strip of the plinth gradient below it. Pin the box (and its link) to the image height and hide the overflow so only the image shows. */ .fct-cart-item-image { position: relative; align-self: flex-start !important; height: 60px !important; background: var(--lh-plinth); border-radius: 0; overflow: hidden; line-height: 0; /* kill the inline-image baseline gap below the thumbnail */ } .fct-cart-item-image a { display: block; height: 60px !important; line-height: 0; } .fct-cart-item-image img { display: block; height: 60px !important; width: 60px; object-fit: cover; } .fct-cart-item-image img[src*="placeholder"] { display: none !important; } /* Quantity stepper — bordered group, flat ink buttons. */ .fct-cart-item-quantity { border: 1px solid var(--lh-border-strong); border-radius: 0; } .fct-cart-item-quantity .qty-btn { background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--lh-text) !important; } /* Remove control. */ .fct-cart-item-remove, .fct-cart-item-delete-button { background: transparent !important; border: 1px solid var(--lh-border) !important; border-radius: 0 !important; color: var(--lh-text-muted) !important; transition: color .25s, border-color .25s; } .fct-cart-item-remove:hover, .fct-cart-item-delete-button:hover { color: var(--lh-accent) !important; border-color: var(--lh-accent) !important; } /* Footer total + checkout. */ .fct-cart-drawer-footer, .fct-cart-drawer-footer-actions { background: var(--lh-bg) !important; } a.checkout-button, .fct-cart-drawer-footer .checkout-button { background: var(--lh-btn-bg) !important; color: var(--lh-btn-text) !important; border: 0 !important; border-radius: 0 !important; font-family: var(--lh-sans) !important; font-size: 11px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; font-weight: 500 !important; transition: background .3s; } a.checkout-button:hover, .fct-cart-drawer-footer .checkout-button:hover { background: var(--lh-accent) !important; color: var(--lh-on-accent) !important; } /* ------------------------------------------------------------------------- Collection (page-id-7) + Checkout (page-id-11) — use the full content width instead of the default 720px prose column. ------------------------------------------------------------------------- */ /* Match the header/footer content edge: they sit in a 1240 box with 48px gutters (content = 1240 - 2*48 = 1144), so cap the body content to the same inner width instead of the full 1240, and they align at every viewport. */ .page-id-7 .is-layout-constrained > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .page-id-11 .is-layout-constrained > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) { max-width: calc(var(--lh-container) - 2 * var(--lh-gutter)) !important; } /* Fluent Cart's top-level storefront wrappers ship as box-sizing:content-box with 20px horizontal padding (checkout also carries a -40px right margin), so they render ~40px wider than their container and bleed off the right edge. Forcing border-box makes them respect the content gutter symmetrically. */ .fct-checkout, .fct-products-wrapper { box-sizing: border-box !important; margin-right: 0 !important; } /* Checkout inputs — uniform white fields. */ .page-id-11 .fct-checkout input:not([type="checkbox"]):not([type="radio"]), .page-id-11 .fct-checkout select, .page-id-11 .fct-checkout textarea, .page-id-11 .fct-input:not(.fct-input-checkbox):not(.fct-input-radio) { background: var(--lh-input-bg) !important; border: 1px solid var(--lh-border-strong) !important; border-radius: 0 !important; color: var(--lh-text) !important; } /* Checkboxes / radios — LeerHaus accent tick + checked fill. */ .page-id-11 .fct-checkout input[type="checkbox"], .page-id-11 .fct-checkout input[type="radio"] { accent-color: var(--lh-accent); } .page-id-11 .fct-checkout input[type="checkbox"]:checked, .page-id-11 .fct-checkout input[type="radio"]:checked { background-color: var(--lh-accent) !important; border-color: var(--lh-accent) !important; } /* Shipping options — FC renders them in a rounded, grey-blue box. Match the squared input style (border-strong, no radius) and divide the rows. */ .page-id-11 .fct_shipping_methods_list { border: 1px solid var(--lh-border-strong) !important; border-radius: 0 !important; background: var(--lh-input-bg) !important; overflow: hidden; } .page-id-11 .fct_shipping_methods_item + .fct_shipping_methods_item { border-top: 1px solid var(--lh-border-strong) !important; } /* FC also draws a border-bottom on each row's / and beats our non-!important skin. Force our ink tokens, dark mode only, so light mode is left exactly as-is. (The .fct_tax_summary_box breakdown keeps its own light card — it stays readable — and is deliberately left alone.) ------------------------------------------------------------------------- */ /* Cart drawer */ [data-theme="dark"] .fct-cart-drawer .title, [data-theme="dark"] .fct-cart-item-title, [data-theme="dark"] .fct-cart-item-title a, [data-theme="dark"] .fct-cart-item-title span, [data-theme="dark"] .fct-cart-item-total, [data-theme="dark"] .fct-cart-item-total span, [data-theme="dark"] .fct-cart-item-price, [data-theme="dark"] .fct-cart-item-summary { color: var(--lh-text) !important; } [data-theme="dark"] .fct-cart-item-variant { color: var(--lh-text-muted) !important; } /* Quantity stepper — FC leaves the container + number input white; make them transparent so only our border shows, with light digits. */ [data-theme="dark"] .fct-cart-item-quantity, [data-theme="dark"] .fct-cart-item-quantity .qty-value, [data-theme="dark"] input.qty-value { background: transparent !important; color: var(--lh-text) !important; border-color: var(--lh-border-strong) !important; } /* Checkout — order summary rows, line-item totals, generic value spans */ [data-theme="dark"] .fct_summary_value, [data-theme="dark"] .fct_summary_box .value, [data-theme="dark"] .fct_summary_toggle_total, [data-theme="dark"] .fct_summary_items_total .fct_summary_label, [data-theme="dark"] .fct_summary_items_total .fct_summary_value, [data-theme="dark"] .fct_line_item_total, [data-theme="dark"] .fct_line_item_title, [data-theme="dark"] .fct_line_item_title a { color: var(--lh-text) !important; } [data-theme="dark"] .fct_summary_label, [data-theme="dark"] .fct_item_variant_title { color: var(--lh-text-muted) !important; } /* Checkout — shipping method rows (labels + prices) */ [data-theme="dark"] .fct_shipping_methods_item, [data-theme="dark"] .fct_shipping_methods_item * { color: var(--lh-text) !important; } /* Checkout — payment method labels ("Card" / "PayPal") are hardcoded navy by FC and vanish on the dark ground. Recolour only the method's own