/* Fonts the widget depends on. Imported here because landing page bundles render inside the theme and cannot add tags to the page . */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@500;600;700&display=swap'); /* ============================================================ La-Z-Boy landing widget ------------------------------------------------------------ Every rule is scoped under .lazboy-landing so this stylesheet can be dropped into any host page without altering its styles. No bare element selectors (html/body/h2/a/img/...) are used. ============================================================ */ .lazboy-landing { /* All design tokens are namespaced and scoped to the widget */ --lazboy-navy: #003a5d; /* sampled from the wave baked into the section images */ --lazboy-ink: #2b2b2b; --lazboy-muted: #555; --lazboy-white: #fff; --lazboy-shop-gray: #888; --lazboy-serif: "Playfair Display", Georgia, "Times New Roman", serif; --lazboy-sans: "Lato", "Helvetica Neue", Arial, sans-serif; font-family: var(--lazboy-sans); font-weight: 400; font-size: 1.0625rem; /* 17px base body copy */ line-height: 1.7; color: var(--lazboy-ink); background: var(--lazboy-white); text-align: left; } /* Flush the footer against the iClean section — only on this landing page */ body:has(.lazboy-landing) #landing-page-wrapper { padding-bottom: 0; margin-bottom: 0; } body:has(.lazboy-landing) { margin: 0; } /* Local box-sizing reset — scoped, never touches the host */ .lazboy-landing, .lazboy-landing *, .lazboy-landing *::before, .lazboy-landing *::after { box-sizing: border-box; } .lazboy-landing img { display: block; max-width: 100%; } .lazboy-landing a { text-decoration: none; color: inherit; } /* ============================================================ Hero ============================================================ */ .lazboy-hero { position: relative; overflow: hidden; } .lazboy-hero__bg { display: block; width: 100%; } .lazboy-hero__bg img { width: 100%; height: auto; max-height: 600px; object-fit: cover; object-position: center; } /* Darkening gradient rising from the bottom for logo legibility */ .lazboy-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0) 55%); } .lazboy-hero__brand { position: absolute; bottom: 7%; left: 5%; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .lazboy-hero__logo { width: clamp(120px, 14vw, 200px); height: auto; } .lazboy-hero__tagline { color: var(--lazboy-white); text-transform: uppercase; letter-spacing: 0.28em; font-size: clamp(0.55rem, 1.1vw, 0.8rem); font-weight: 400; } /* ============================================================ Shop section ============================================================ */ .lazboy-shop { max-width: 900px; margin: 0 auto; padding: 4rem 1.5rem 4.5rem; text-align: center; } .lazboy-shop__title { font-family: var(--lazboy-serif); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 3rem; color: var(--lazboy-ink); } .lazboy-shop__grid { display: flex; justify-content: center; align-items: flex-start; gap: 6rem; } .lazboy-shop-item { flex: 1 1 0; max-width: 240px; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; color: var(--lazboy-muted); transition: transform 0.2s ease, opacity 0.2s ease; } .lazboy-shop-item:hover { transform: translateY(-4px); opacity: 0.85; } .lazboy-shop-item__media { display: flex; align-items: center; justify-content: center; height: 90px; } .lazboy-shop-item__media img { max-height: 90px; width: auto; } /* "Shop All" circle-arrow */ .lazboy-shop-item__media--all { width: 64px; height: 64px; border: 1.5px solid var(--lazboy-shop-gray); border-radius: 50%; color: var(--lazboy-shop-gray); } .lazboy-shop-item__media--all svg { width: 26px; height: 26px; } .lazboy-shop-item__label { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--lazboy-muted); } /* ============================================================ Split sections (One and Only / Custom Made / iClean) ============================================================ */ .lazboy-split { display: flex; align-items: stretch; } .lazboy-split__media, .lazboy-split__text { flex: 1 1 50%; min-width: 0; } .lazboy-split__media { position: relative; } .lazboy-split__media picture, .lazboy-split__media img { width: 100%; height: 100%; } .lazboy-split__media img { object-fit: cover; } .lazboy-split__text { display: flex; align-items: center; } .lazboy-split__text--navy { background: var(--lazboy-navy); color: var(--lazboy-white); } .lazboy-split__inner { max-width: 700px; padding: clamp(2rem, 4vw, 4rem); } .lazboy-split__heading { font-family: var(--lazboy-serif); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 1.4rem; text-wrap: balance; } /* Keep the brand name from breaking at its hyphens */ .lazboy-split--one-and-only .lazboy-split__heading { white-space: nowrap; } .lazboy-split__copy { font-weight: 400; font-size: 1.0625rem; line-height: 1.8; margin: 0 0 1rem; } .lazboy-split__copy:last-child { margin-bottom: 0; } .lazboy-split--custom-made { max-height: 600px; } .lazboy-split--custom-made .lazboy-split__inner { margin-left: 4rem; } .lazboy-split--custom-made .lazboy-split__heading { color: var(--lazboy-ink); } .lazboy-split--custom-made .lazboy-split__copy { color: var(--lazboy-muted); } /* ============================================================ iClean panel ============================================================ */ .lazboy-split--iclean .lazboy-split__inner { max-width: 700px; text-align: center; margin: 0 auto; } .lazboy-iclean__logo { width: clamp(140px, 18vw, 220px); height: auto; margin: 0 auto 1.5rem; } .lazboy-iclean__tagline { font-weight: 400; font-size: 1.0625rem; max-width: 480px; margin: 0 auto 2.5rem; } .lazboy-iclean__features { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 3rem; } .lazboy-iclean__feature { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; font-size: 0.95rem; letter-spacing: 0.03em; } .lazboy-iclean__feature img { width: 72px; height: 72px; object-fit: contain; } /* ============================================================ Mobile ============================================================ */ @media (max-width: 768px) { .lazboy-shop { padding: 2.5rem 1.25rem 3rem; } .lazboy-shop__title { margin-bottom: 2rem; } .lazboy-shop__grid { display: grid; grid-template-colcenter; gap: 2rem 1rem; } .lazboy-shop-item { max-width: none; } /* Stack split sections; navy text panel sits ABOVE the wave-top image */ .lazboy-split { flex-direction: column; } .lazboy-split__media, .lazboy-split__text { flex: 1 1 auto; width: 100%; } /* One & Only and iClean images carry the wave on their TOP edge, so the navy panel must render first (above the image). */ .lazboy-split--one-and-only .lazboy-split__text, .lazboy-split--iclean .lazboy-split__text { order: 1; } .lazboy-split--one-and-only .lazboy-split__media, .lazboy-split--iclean .lazboy-split__media { order: 2; } .lazboy-split__inner { max-width: 100%; padding: 2.25rem 1.5rem; } .lazboy-split--custom-made { max-height: unset; } .lazboy-split--custom-made .lazboy-split__inner { margin-left: 0; } /* iClean features become a 2x2 grid on mobile */ .lazboy-iclean__features { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; max-width: 320px; margin: 0 auto; } }