{"id":2368,"date":"2026-09-01T08:43:19","date_gmt":"2026-09-01T12:43:19","guid":{"rendered":"https:\/\/yourlivelyhome.com\/?page_id=2368"},"modified":"2026-09-23T20:24:22","modified_gmt":"2026-09-24T00:24:22","slug":"new-homepage-preview-2","status":"publish","type":"page","link":"https:\/\/yourlivelyhome.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:wght@600;700&#038;display=swap\" rel=\"stylesheet\">\n<style>\n\/* ylh-home-theme v3: light mode is now a genuinely light theme across\n   every surface (page, header, cards, dropdown, sections, footer) --\n   not just the page canvas -- while dark mode is untouched, byte-for-\n   byte identical to what it already was. This replaces the previous\n   pass's --page-bg\/footer-branch special-casing (no longer needed: once\n   the shared tokens themselves are correctly light-in-light-mode,\n   dark-in-dark-mode, every rule that already reads var(--card)\/var(--ink)\n   etc. flips correctly on its own, sitewide, with zero per-rule changes). *\/\n:root{\n  --bg:#F5F0E6;--card:#FFFDF8;--ink:#332E27;--body:#5A5248;--muted:#8A8072;\n  --border:#E4DCC8;--header-bg:#F5F0E6;--about-bg:#FFFDF8;\n  --cat-bg:#F0E9D8;--btn-bg:#D96C3F;--btn-ink:#2A1B10;\n  --cta-bg:#F0E9D8;--shadow:0 12px 40px rgba(0,0,0,0.10);--band-bg:#EDE0C4;\n  --dot-color:rgba(217,108,63,0.08);\n}\nhtml.ylh-dark{\n  --bg:#1C1C1B;--card:#2A2A28;--ink:#F3E4CC;--body:#C4AF92;--muted:#8F7A61;\n  --border:#3E3E3B;--header-bg:#1C1C1B;--about-bg:#2A2A28;\n  --cat-bg:#242422;--btn-bg:#D96C3F;--btn-ink:#2A1B10;\n  --cta-bg:#242422;--shadow:0 12px 40px rgba(0,0,0,0.5);--band-bg:#141413;\n  --dot-color:rgba(217,108,63,0.10);\n}\nbody.home{background:var(--bg)!important;background-image:radial-gradient(circle,var(--dot-color) 1.4px,transparent 1.4px)!important;background-size:22px 22px!important;}\nbody.home .ast-primary-header-bar{background:var(--header-bg)!important;border-color:var(--border)!important;}\nbody.home .site-title,\nbody.home .site-title a,\nbody.home .ast-search-icon a svg{color:var(--ink)!important;fill:var(--ink)!important;}\n\/* Nav link color: the old selector (.main-header-bar-navigation>ul>li>a)\n   never matched the real DOM -- there's a <nav> and a wrapping <div>\n   between .main-header-bar-navigation and the real <ul> -- so top-level\n   nav links were silently stuck on Astra's own default, almost no\n   contrast at all. Real class, confirmed from the live page source, is\n   .menu-link -- shared by both top-level items and every dropdown item,\n   so one rule covers both, and correctly flips light\/dark with --ink. *\/\nbody.home .main-header-menu .menu-link{color:var(--ink)!important;font-weight:500;}\nbody.home .main-header-menu > .menu-item > .menu-link:hover,\nbody.home .main-header-menu > .menu-item.current-menu-item > .menu-link{color:#D96C3F!important;}\nbody.home .ast-header-navigation-arrow svg path,\nbody.home .menu-item .ast-icon svg path{fill:var(--ink)!important;}\n\/* Dropdown (\"Categories\") panel: Astra renders this as a real 3-column\n   CSS grid already (confirmed live, 9 items) -- just restyled from its\n   default plain white panel to match the site's card language. *\/\nbody.home .main-header-menu .sub-menu{\n  background:var(--card)!important;\n  border:1px solid var(--border)!important;\n  border-radius:18px!important;\n  box-shadow:var(--shadow)!important;\n  padding:12px!important;\n}\nbody.home .main-header-menu .sub-menu .menu-link{\n  color:var(--body)!important;\n  padding:11px 16px!important;\n  border-radius:10px!important;\n  font-weight:500;\n  transition:background .15s ease,color .15s ease;\n}\nbody.home .main-header-menu .sub-menu .menu-link:hover{\n  background:rgba(217,108,63,0.18);\n  color:var(--ink)!important;\n}\n\/* Astra auto-generates a per-menu-item ID-scoped rule with its own\n   !important padding (#menu-item-2372 > .sub-menu .menu-link) -- an ID\n   selector beats a class selector regardless of !important, so it needs\n   a matching ID override here too. Tied to this menu item's current real\n   id; if the Categories menu item is ever deleted and recreated, this\n   selector goes stale and dropdown padding just quietly reverts to\n   Astra's own smaller default -- a minor, easily-noticed regression, not\n   a breakage. *\/\nbody.home #menu-item-2372 > .sub-menu .menu-link{padding:11px 16px!important;}\n\/* Twitter -> X rebrand: Astra's own built-in social-icon set only ships\n   the old bird glyph with no Customizer option to swap it, and there's\n   no REST endpoint for that setting either (same gap as the footer\n   copyright text) -- replaced via a CSS mask instead of the inline SVG,\n   using the real X logo path, colored via --ink so it flips correctly for\n   both the header (always uses --ink) and the footer (light mode: dark\n   ink on a light footer; dark mode: cream ink on the dark footer).\n   Size was originally hardcoded to 26px here on the (wrong) assumption\n   that matched Astra's real icon everywhere -- it only matched the\n   header; Astra's own real footer social SVGs are a smaller 18px\n   (.ast-footer-social-1-wrap ...svg, confirmed live), which made the\n   masked X icon visibly bigger than the untouched Facebook icon\n   specifically in the footer. Size is now set separately per wrapper,\n   below, instead of fixed here. *\/\nbody.home .ast-twitter svg{display:none!important;}\nbody.home .ast-twitter .ahfb-svg-iconset{\n  display:inline-block;\n  background-color:var(--ink);\n  -webkit-mask-image:url(\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.901%201.153h3.68l-8.04%209.19L24%2022.846h-7.406l-5.8-7.584-6.638%207.584H.474l8.6-9.83L0%201.154h7.594l5.243%206.932ZM17.61%2020.644h2.039L6.486%203.24H4.298Z%22\/%3E%3C\/svg%3E\");\n  mask-image:url(\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.901%201.153h3.68l-8.04%209.19L24%2022.846h-7.406l-5.8-7.584-6.638%207.584H.474l8.6-9.83L0%201.154h7.594l5.243%206.932ZM17.61%2020.644h2.039L6.486%203.24H4.298Z%22\/%3E%3C\/svg%3E\");\n  -webkit-mask-size:contain;mask-size:contain;\n  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;\n  -webkit-mask-position:center;mask-position:center;\n}\nbody.home .ast-header-social-1-wrap .ast-twitter .ahfb-svg-iconset{width:26px;height:26px;}\nbody.home .ast-footer-social-1-wrap .ast-twitter .ahfb-svg-iconset{width:18px;height:18px;}\n\/* Facebook icon: same near-invisible pure-black default fill as Twitter\n   had -- no logo swap needed (Facebook hasn't rebranded), just recolored\n   via --ink so it also flips correctly for header and footer alike. *\/\nbody.home .ast-facebook svg path{fill:var(--ink)!important;}\n\/* Amazon header button: Astra's own outline-style button uses a fixed\n   Customizer global palette color (--ast-global-color-4, near-white)\n   for both text and border with a transparent background -- invisible\n   against a light-mode header. Solid brand-cyan fill instead (see\n   post_theme_v5.html for the full explanation; same fix, same reasoning,\n   duplicated here since the homepage loads this file's CSS, not the\n   post theme's or the archive widget's). *\/\nbody.home .ast-header-button-1 .ast-custom-button{\n  background:var(--ast-global-color-0)!important;\n  color:var(--btn-ink)!important;\n  border-color:var(--ast-global-color-0)!important;\n}\nbody.home .ast-header-button-1 .ast-custom-button:hover{\n  background:var(--ast-global-color-1)!important;\n  border-color:var(--ast-global-color-1)!important;\n}\n\/* Dark-mode-only logo: the real site-logo.png has dark charcoal-gray\n   continents on a transparent background (confirmed by pixel sampling),\n   so it goes low-contrast against a dark header\/footer. A separate\n   \"white earth\" variant (continents recolored to white, blue\n   house\/heart\/hand accents untouched) is swapped in via content:url()\n   only while html.ylh-dark is active. Light mode keeps the original\n   file, correctly readable against the light header now. Selector\n   matches by filename, covering all three places this logo appears\n   (header, mobile header, footer). *\/\nhtml.ylh-dark img[src*=\"site-logo.png\"]{content:url(\"https:\/\/yourlivelyhome.com\/wp-content\/uploads\/2026\/09\/site-logo-white-earth.png\")!important;}\nbody.home .site-footer,\nbody.home .site-primary-footer-wrap,\nbody.home .site-footer-below-section-1,\nbody.home .site-below-footer-wrap{background:var(--card)!important;color:var(--body)!important;}\nbody.home .footer-widget-area a,\nbody.home .ast-footer-copyright,\nbody.home .ast-footer-copyright a,\nbody.home .footer-bar-navigation a{color:var(--body)!important;}\n\/* \"A Fortis-Scientia Site\" is Astra's own global Footer Builder copyright\n   text (Customizer theme-mod, not page content) -- there is no REST\n   endpoint to edit that setting directly (checked: astra\/v1 only exposes\n   GET routes), so it's hidden here instead. Targets just the second <p>\n   and its preceding <hr> inside .ast-footer-copyright, leaving the real\n   \"Copyright (c) ... Your Lively Home\" line untouched. *\/\nbody.home .ast-footer-copyright hr,\nbody.home .ast-footer-copyright p:nth-of-type(2){display:none!important;}\n.ylh-root{font-family:'Roboto',sans-serif;color:var(--body);transition:background .2s ease,color .2s ease;}\n.ylh-root a{text-decoration:none;}\n.ylh-root h1,.ylh-root h2,.ylh-root h3,.ylh-root h4{font-family:'Fraunces',serif;font-weight:700;color:var(--ink);margin:0;}\n\/* Hero: a real photo with a fixed dark gradient scrim, same idea as the\n   post\/archive photo-hero bands elsewhere on the site -- always has a\n   dark backdrop by construction, so its hardcoded cream text is correct\n   in both modes and deliberately NOT tied to --ink\/--body. The h1 used a\n   literal pure #fff here while the p right below it already used the\n   warmer #FDEDD9 -- an inconsistency, not a deliberate second choice, so\n   the h1 now matches its own sibling instead of introducing a third\n   value; post_theme_v5.html's own equivalent hero title already uses\n   this same warm-cream approach (#F3E4CC there), so this also brings the\n   homepage in line with that established pattern. *\/\n\/* Bigger hero, take 2 -- see post_theme_v5.html's .entry-header for the\n   full story: tying height to viewport height (the first attempt,\n   min-height:max(460px,70vh)) made the container's aspect ratio more\n   extreme as the viewport narrowed, forcing cover to crop away much\n   more of the photo's width on mobile than intended -- confirmed to\n   read as \"zoomed in.\" aspect-ratio ties height to the hero's own width\n   instead, staying close to a normal landscape photo's own shape at any\n   screen size. width:100% is required, not decorative -- the same real\n   bug applies here: without it, aspect-ratio computes width from\n   min-height instead of height from width. Still the tallest hero on\n   the site by design (highest max-height), since it's the actual\n   homepage landing band. *\/\n.ylh-hero{position:relative;width:100%;aspect-ratio:16\/9;min-height:360px;max-height:900px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;background-image:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.48)),url('https:\/\/yourlivelyhome.com\/wp-content\/uploads\/2024\/06\/living-room-interior-design-furniture-1835923.jpg');background-position:center;background-size:cover;background-repeat:no-repeat;}\n.ylh-hero h1{color:#FDEDD9;font-size:58px;letter-spacing:-1px;margin:0;line-height:1.1;}\n.ylh-hero p{color:#FDEDD9;font-size:20px;margin:16px 0 28px;font-weight:400;}\n.ylh-btn-accent{display:inline-flex;align-items:center;gap:8px;background:#E0A939;color:#3A2307;border:none;border-radius:999px;padding:15px 30px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,0.28);}\n.ylh-btn-dark{display:inline-flex;align-items:center;gap:8px;background:var(--btn-bg);color:var(--btn-ink);border:none;border-radius:999px;padding:15px 30px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;}\n.ylh-section{max-width:1200px;margin:0 auto;padding:64px 20px;}\n\/* Uses background-color specifically (not the `background` shorthand):\n   the real markup also sets an inline background-image (three decorative\n   radial-gradient color splashes) on this same element, and inline style\n   always wins over an external stylesheet for the same property. Using\n   background-color here means the two coexist instead of the shorthand\n   silently discarding one of them (a real bug found and fixed earlier\n   this session -- --about-bg is a plain color in both modes for exactly\n   this reason, never a gradient function). *\/\n.ylh-section-bg{background-color:var(--about-bg);}\n.ylh-section-title{font-size:32px;font-weight:700;text-align:center;margin:0 0 8px;color:var(--ink);}\n.ylh-section-sub{text-align:center;color:var(--muted);margin-bottom:32px;font-size:16px;}\n.ylh-about{text-align:center;}\n.ylh-about .ylh-rule{width:50px;height:4px;background:#D96C3F;margin:0 auto 22px;border-radius:2px;}\n.ylh-about h3{font-size:30px;margin-bottom:18px;}\n.ylh-about p{max-width:800px;margin:0 auto;font-size:17px;line-height:1.75;font-weight:400;color:var(--body);}\n.ylh-about .ylh-btn-dark{margin-top:22px;}\n.ylh-cat-section{max-width:1200px;margin:0 auto;padding:72px 40px;box-sizing:border-box;background:var(--cat-bg);border-radius:44px;border:3px solid var(--border);}\n.ylh-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}\n.ylh-cat-card{display:block;text-decoration:none;background:var(--card);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;border:3px solid var(--accent-color,#D96C3F);}\n.ylh-cat-card::before{content:'';display:block;height:8px;background:var(--accent-color,#D96C3F);}\n.ylh-cat-card:hover{transform:translateY(-4px);}\n.ylh-cat-thumb{width:100%;aspect-ratio:4\/3;object-fit:cover;display:block;}\n.ylh-cat-label{padding:14px 12px;text-align:center;font-weight:700;font-size:15px;color:var(--ink);font-family:'Fraunces',serif;}\n.ylh-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}\n.ylh-post-card{display:block;text-decoration:none;color:inherit;background:var(--card);border-radius:26px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,0.18);border-top:6px solid var(--accent-color,#D96C3F);}\n.ylh-post-thumb{width:100%;height:230px;object-fit:cover;display:block;}\n.ylh-post-body{padding:26px;}\n.ylh-post-cat{display:inline-block;color:var(--btn-ink);padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;background:var(--accent-color,#D96C3F);}\n.ylh-post-title{font-family:'Fraunces',serif;font-size:20px;line-height:1.3;margin:14px 0 8px;color:var(--ink)!important;font-weight:700;}\n.ylh-post-excerpt{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 18px;}\n\/* Decoupled from --band-bg on purpose: this button previously used\n   var(--band-bg)+hardcoded white text, which only worked because\n   --band-bg used to always be a dark section-background color. Now that\n   --band-bg (and every other token) genuinely flips light\/dark with the\n   mode, a button still needs to read clearly either way -- reusing the\n   brand accent button colors (--btn-bg\/--btn-ink), which are the same\n   fixed orange\/dark-ink pair in both modes, matching the other buttons\n   already on this page (More About Us, Subscribe). *\/\n.ylh-read-more{display:inline-block;padding:10px 20px;background:var(--btn-bg);color:var(--btn-ink);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;}\n.ylh-note{text-align:center;font-size:18px;font-weight:700;color:var(--ink);max-width:800px;margin:0 auto 30px;font-family:'Fraunces',serif;}\n.ylh-cta{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--cta-bg);border-radius:36px;padding:48px;border:3px solid var(--border);}\n.ylh-cta>div{position:relative;z-index:1;}\n.ylh-cta h4{font-size:32px;margin:0 0 16px;}\n.ylh-cta hr{border:none;border-top:4px solid #6B8F5A;width:50px;margin:0 0 18px;}\n.ylh-cta p{font-size:16px;line-height:1.7;color:var(--body);}\n.ylh-cta img{width:100%;border-radius:22px;display:block;box-shadow:var(--shadow);border:4px solid var(--card);}\n.ylh-newsletter{max-width:420px;margin:0 auto;text-align:center;}\n\/* \"Subscribe to our newsletter!\" text and the privacy-policy link both\n   used to be hardcoded light colors (#FDEDD9 \/ #F0C67A \/ an inline\n   #B9E8FF on the link itself), correct only when the surrounding\n   \"Latest Posts\" band was permanently dark. Now that the band flips\n   light\/dark with the mode too, these need to flip with it -- switched\n   to --ink (text) and the fixed brand accent --btn-bg (link, same\n   orange used elsewhere so it still reads as a link in either mode). The\n   inline override on the actual privacy-policy <a> tag was removed from\n   the markup so this rule can take effect (an inline style otherwise\n   always wins over an external stylesheet rule). *\/\n.ylh-newsletter p{color:var(--ink);}\n.ylh-newsletter .tnp-email{border-radius:999px!important;border:2px solid var(--border)!important;padding:10px 16px;background:var(--card)!important;color:var(--ink)!important;}\n.ylh-newsletter .tnp-submit{background:#E0A939!important;color:#3A2307!important;border:none!important;border-radius:999px!important;padding:10px 20px;font-weight:700;cursor:pointer;}\n.ylh-newsletter a{color:var(--btn-bg);}\n#ylh-theme-toggle{position:fixed;bottom:24px;right:24px;z-index:999;width:52px;height:52px;border-radius:50%;border:2px solid var(--border);background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;}\n@media (max-width:900px){.ylh-post-grid{grid-template-columns:repeat(2,1fr);}.ylh-cta{grid-template-columns:1fr;}}\n@media (max-width:600px){.ylh-hero h1{font-size:38px;}.ylh-post-grid{grid-template-columns:1fr;}}\n<\/style>\n<div class=\"ylh-root\">\n\n<div class=\"ylh-hero alignfull\">\n  <h1>Your Lively Home<\/h1>\n  <p>Small projects that make a big difference<\/p>\n<\/div>\n\n<div class=\"ylh-section-bg alignfull\" style=\"position:relative;overflow:hidden;background-image:radial-gradient(circle at 8% 20%,#8B5A8C55 0%,transparent 32%),radial-gradient(circle at 92% 15%,#D96C3F4D 0%,transparent 30%),radial-gradient(circle at 85% 85%,#5B9A8B40 0%,transparent 30%);\">\n  <div class=\"ylh-section ylh-about\" style=\"position:relative;z-index:1;\">\n    <div class=\"ylh-rule\"><\/div>\n    <h3>A Little About Us<\/h3>\n    <p>Your Lively Home is dedicated to helping you turn ordinary rooms into spaces you actually love spending time in. We research, compare, and hand-pick the products that make the biggest difference \u2014 from clever storage solutions to small upgrades that instantly feel more polished. Every project here is DIY-friendly but never amateur, and we always keep an eye on your budget, because a lively home shouldn&#8217;t require a luxury price tag. If you&#8217;re looking for the next great way to improve your space, you&#8217;re in the right place.<\/p>\n    <a class=\"ylh-btn-dark\" href=\"https:\/\/yourlivelyhome.com\/index.php\/about\/\">More About Us<\/a>\n  <\/div>\n<\/div>\n\n<div class=\"ylh-cat-section\">\n  <h2 class=\"ylh-section-title\">By Category<\/h2>\n  <p class=\"ylh-section-sub\">Find the right guide for the room you&#8217;re working on.<\/p>\n  <div class=\"ylh-cat-grid\">\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#D96C3F\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/kitchen-dining\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/2343470\/pexels-photo-2343470.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Kitchen &amp; Dining\" loading=\"lazy\"><div class=\"ylh-cat-label\">Kitchen &amp; Dining<\/div><\/a>\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#8B5A8C\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/bedroom-bedding\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/33724900\/pexels-photo-33724900.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Bedroom &amp; Bedding\" loading=\"lazy\"><div class=\"ylh-cat-label\">Bedroom &amp; Bedding<\/div><\/a>\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#5B9A8B\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/bathroom\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/30580615\/pexels-photo-30580615.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Bathroom\" loading=\"lazy\"><div class=\"ylh-cat-label\">Bathroom<\/div><\/a>\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#D4A24C\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/laundry-room\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/8186483\/pexels-photo-8186483.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Laundry Room\" loading=\"lazy\"><div class=\"ylh-cat-label\">Laundry Room<\/div><\/a>\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#B85C7A\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/living-room-entertaining\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/4469171\/pexels-photo-4469171.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Living Room &amp; Entertaining\" loading=\"lazy\"><div class=\"ylh-cat-label\">Living Room &amp; Entertaining<\/div><\/a>\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#4A7A9B\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/home-organization-storage\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/8580763\/pexels-photo-8580763.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Home Organization &amp; Storage\" loading=\"lazy\"><div class=\"ylh-cat-label\">Home Organization &amp; Storage<\/div><\/a>\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#6B8F5A\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/outdoor-living-patio\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/27626176\/pexels-photo-27626176.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Outdoor Living &amp; Patio\" loading=\"lazy\"><div class=\"ylh-cat-label\">Outdoor Living &amp; Patio<\/div><\/a>\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#E0A939\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/cleaning-home-care\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/3177257\/pexels-photo-3177257.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Cleaning &amp; Home Care\" loading=\"lazy\"><div class=\"ylh-cat-label\">Cleaning &amp; Home Care<\/div><\/a>\n    <a class=\"ylh-cat-card\" style=\"--accent-color:#A85D3E\" href=\"https:\/\/yourlivelyhome.com\/index.php\/category\/home-office-workspace\/\"><img decoding=\"async\" class=\"ylh-cat-thumb\" src=\"https:\/\/images.pexels.com\/photos\/13617745\/pexels-photo-13617745.jpeg?auto=compress&#038;cs=tinysrgb&#038;h=650&#038;w=940\" alt=\"Home Office &amp; Workspace\" loading=\"lazy\"><div class=\"ylh-cat-label\">Home Office &amp; Workspace<\/div><\/a>\n  <\/div>\n<\/div>\n\n<div class=\"ylh-section-bg alignfull\" style=\"background:var(--band-bg);\">\n  <div class=\"ylh-section\">\n    <h2 class=\"ylh-section-title\">Latest Posts<\/h2>\n    <p class=\"ylh-section-sub\">Fresh ideas from around the house.<\/p>\n    <div class=\"ylh-post-grid\" id=\"ylh-post-grid\"><\/div>\n    <p class=\"ylh-note\" style=\"margin-top:40px;\">Our team is currently working on a variety of new projects and ideas and will be updating regularly!<\/p>\n    <div class=\"ylh-newsletter\">\n      <p>Subscribe to our newsletter!<\/p>\n      <div class=\"tnp tnp-subscription-minimal\">\n        <form action=\"https:\/\/yourlivelyhome.com\/wp-admin\/admin-ajax.php?action=tnp&#038;na=s\" method=\"post\" style=\"text-align:center\">\n          <input type=\"hidden\" name=\"nr\" value=\"minimal\">\n          <input type=\"hidden\" name=\"nlang\" value=\"\">\n          <input class=\"tnp-email\" type=\"email\" required name=\"ne\" value=\"\" placeholder=\"Email\">\n          <input class=\"tnp-submit\" type=\"submit\" value=\"Subscribe\">\n          <div class=\"tnp-field tnp-privacy-field\"><label><input type=\"checkbox\" name=\"ny\" required class=\"tnp-privacy\"> <a target=\"_blank\" href=\"http:\/\/yourlivelyhome.com\/wp-content\/uploads\/2023\/04\/Privacy-Policy.pdf\" >By continuing, you accept the privacy policy<\/a><\/label><\/div>\n        <\/form>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div class=\"ylh-section\">\n  <div class=\"ylh-cta\">\n    <div>\n      <hr>\n      <h4>Want to learn about more fun projects?<\/h4>\n      <p>Join us on the adventure of becoming the architect behind your homes beauty. Together we can find the perfect project to give your lively home more features and ambience.<\/p>\n    <\/div>\n    <div><img decoding=\"async\" src=\"https:\/\/yourlivelyhome.com\/wp-content\/uploads\/2024\/06\/gafec59b7fcbd4134f0232f84ffedca19320d97b2eb1a2ed40f2d3b395b213b41c745ddb59f64650e9d9985d1fa777937bd4657514d834ab6a7660e59d423e56e_1280-1080592-1024x682.jpg\" alt=\"Home improvement project\"><\/div>\n  <\/div>\n<\/div>\n\n<\/div>\n\n<button id=\"ylh-theme-toggle\" aria-label=\"Toggle dark mode\" title=\"Toggle dark mode\">\n  <svg id=\"ylh-icon-sun\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F2C94C\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"5\"\/><path d=\"M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4\"\/><\/svg>\n  <svg id=\"ylh-icon-moon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F5EFE9\" stroke-width=\"2\" style=\"display:none;\"><path d=\"M21 12.8A9 9 0 1111.2 3 7 7 0 0021 12.8z\"\/><\/svg>\n<\/button>\n<script>\n(function(){\n  function applyTheme(dark){\n    document.documentElement.classList.toggle('ylh-dark', dark);\n    var sun = document.getElementById('ylh-icon-sun'), moon = document.getElementById('ylh-icon-moon');\n    if (sun && moon) { sun.style.display = dark ? 'none' : 'block'; moon.style.display = dark ? 'block' : 'none'; }\n  }\n  var saved = null;\n  try { saved = localStorage.getItem('ylh-theme'); } catch (e) {}\n  var dark = saved === 'dark';\n  applyTheme(dark);\n  var btn = document.getElementById('ylh-theme-toggle');\n  if (btn) {\n    btn.addEventListener('click', function () {\n      dark = !dark;\n      applyTheme(dark);\n      try { localStorage.setItem('ylh-theme', dark ? 'dark' : 'light'); } catch (e) {}\n    });\n  }\n})();\n<\/script>\n<script>\n(function(){\n  \/\/ Latest Posts, live -- was a static, hand-authored grid of 5 <a> cards\n  \/\/ baked directly into this page's own content at whatever moment it was\n  \/\/ last built. Confirmed live this can silently drift from reality: one\n  \/\/ card's image URL had gone stale\/404 independent of the real post's own\n  \/\/ featured image, since nothing here was ever wired back to the actual\n  \/\/ posts -- editing a post never touched this page at all. Replaced with\n  \/\/ a real fetch against this site's own REST API on every page load, so\n  \/\/ the five most recent posts (and their real title\/excerpt\/category\/\n  \/\/ featured image) are always current with zero manual upkeep.\n  \/\/\n  \/\/ NOTE: WordPress's own content filter (wptexturize\/wp_kses) rewrites a\n  \/\/ literal double-ampersand sequence inside a <script> block in wp:html\n  \/\/ content into an HTML-entity-escaped form at render time -- confirmed\n  \/\/ live, this breaks the JS logical-AND operator outright (\"Invalid or\n  \/\/ unexpected token\"), while a single bare ampersand survives untouched.\n  \/\/ So: no logical-AND operator anywhere below, ever, including in these\n  \/\/ comments. Nested ifs \/ small safe-get helpers stand in for it instead.\n  var ACCENT_BY_CATEGORY = {\n    'Kitchen & Dining': '#D96C3F',\n    'Bedroom & Bedding': '#8B5A8C',\n    'Bathroom': '#5B9A8B',\n    'Laundry Room': '#D4A24C',\n    'Living Room & Entertaining': '#B85C7A',\n    'Home Organization & Storage': '#4A7A9B',\n    'Outdoor Living & Patio': '#6B8F5A',\n    'Cleaning & Home Care': '#E0A939',\n    'Home Office & Workspace': '#A85D3E'\n  };\n  var DEFAULT_ACCENT = '#D96C3F';\n\n  function stripHtml(html){\n    var tmp = document.createElement('div');\n    tmp.innerHTML = html;\n    return (tmp.textContent || tmp.innerText || '').replace(\/\\s+\/g, ' ').trim();\n  }\n\n  function escapeHtml(str){\n    return String(str).replace(\/[&<>\"']\/g, function(c){\n      return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#039;'}[c];\n    });\n  }\n\n  function firstCategoryTerm(embedded){\n    \/\/ Replaces a chained \"terms[i] is truthy, is non-empty, and its first\n    \/\/ entry is a category\" condition with nested ifs -- see the top-of-file\n    \/\/ note on why a chained logical-AND can't be used here.\n    var termGroups = embedded['wp:term'] || [];\n    for (var i = 0; i < termGroups.length; i++) {\n      var group = termGroups[i];\n      if (!group) continue;\n      if (!group.length) continue;\n      if (group[0].taxonomy === 'category') return group[0];\n    }\n    return null;\n  }\n\n  function featuredImageUrl(embedded){\n    \/\/ Replaces the old \"media exists, has a first entry, and it's not an\n    \/\/ error object\" plus a chain of \"sizes exists and sizes.X exists\"\n    \/\/ fallbacks with nested ifs -- same reason as firstCategoryTerm above.\n    var media = embedded['wp:featuredmedia'];\n    if (!media) return '';\n    var item = media[0];\n    if (!item) return '';\n    if (item.code) return ''; \/\/ REST embeds a {code:...} error object when there's no real featured image\n    var details = item.media_details;\n    var sizes = details ? details.sizes : null;\n    if (sizes) {\n      if (sizes.medium_large) return sizes.medium_large.source_url;\n      if (sizes.large) return sizes.large.source_url;\n    }\n    return item.source_url || '';\n  }\n\n  function buildCard(post){\n    var embedded = post._embedded || {};\n    var title = stripHtml(post.title ? post.title.rendered : '');\n    var excerpt = stripHtml(post.excerpt ? post.excerpt.rendered : '');\n    \/\/ WordPress's own default excerpt trims to ~55 words and appends a\n    \/\/ literal \"[&hellip;]\" marker -- strip that off since this card's own\n    \/\/ \"Read More\" button already carries that meaning.\n    excerpt = excerpt.replace(\/\\s*\\[?\u2026\\]?\\s*$\/, '\u2026');\n\n    var categoryName = 'Uncategorized';\n    var term = firstCategoryTerm(embedded);\n    if (term) {\n      \/\/ A real bug caught before shipping, not guessed: the REST API\n      \/\/ returns term names already HTML-entity-encoded (confirmed live,\n      \/\/ e.g. \"Outdoor Living &amp; Patio\") -- decoding through stripHtml\n      \/\/ here (same trick used for title\/excerpt) matters twice over:\n      \/\/ once so the displayed text reads \"&#038;\" not \"&amp;\" after this\n      \/\/ value gets escapeHtml()'d below, and once so this exact string\n      \/\/ is what actually gets used as the ACCENT_BY_CATEGORY lookup key\n      \/\/ -- an un-decoded \"&amp;\" would silently miss every map entry\n      \/\/ with a real \"&#038;\" in its name and fall through to the default\n      \/\/ accent color for most categories on this site.\n      categoryName = stripHtml(term.name);\n    }\n    var accent = ACCENT_BY_CATEGORY[categoryName] || DEFAULT_ACCENT;\n\n    var imgSrc = featuredImageUrl(embedded);\n    var imgHtml = imgSrc\n      ? '<img decoding=\"async\" class=\"ylh-post-thumb\" src=\"' + escapeHtml(imgSrc) + '\" alt=\"' + escapeHtml(title) + '\" loading=\"lazy\">'\n      : '';\n\n    return '<a class=\"ylh-post-card\" style=\"--accent-color:' + accent + '\" href=\"' + escapeHtml(post.link) + '\">'\n      + imgHtml\n      + '<div class=\"ylh-post-body\">'\n      + '<span class=\"ylh-post-cat\">' + escapeHtml(categoryName) + '<\/span>'\n      + '<h3 class=\"ylh-post-title\">' + escapeHtml(title) + '<\/h3>'\n      + '<p class=\"ylh-post-excerpt\">' + escapeHtml(excerpt) + '<\/p>'\n      + '<span class=\"ylh-read-more\">Read More<\/span>'\n      + '<\/div><\/a>';\n  }\n\n  function loadLatestPosts(){\n    var grid = document.getElementById('ylh-post-grid');\n    if (!grid) return;\n    \/\/ Bare _embed (not the newer selective _embed=wp:term,wp:featuredmedia\n    \/\/ syntax) deliberately -- it's the form guaranteed supported since\n    \/\/ WP 4.4, pulls in a little more than strictly needed (author info)\n    \/\/ but avoids depending on exact rel-name spelling being right.\n    fetch('\/wp-json\/wp\/v2\/posts?per_page=5&orderby=date&order=desc&_embed')\n      .then(function(res){ if (!res.ok) throw new Error('status ' + res.status); return res.json(); })\n      .then(function(posts){\n        if (!posts) return;\n        if (!posts.length) return; \/\/ leave any existing markup untouched on an empty\/failed response\n        grid.innerHTML = posts.map(buildCard).join('\\n');\n      })\n      .catch(function(err){\n        \/\/ Fail quietly, not silently-broken-looking: leave the grid exactly\n        \/\/ as the server sent it (empty, per the content change below) rather\n        \/\/ than show a half-built or error-state grid to a real visitor.\n        console.error('Latest Posts: could not load live posts', err);\n      });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', loadLatestPosts);\n  } else {\n    loadLatestPosts();\n  }\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Your Lively Home Small projects that make a big difference A Little About Us Your Lively Home is dedicated to helping you turn ordinary rooms into spaces you actually love spending time in. We research, compare, and hand-pick the products that make the biggest difference \u2014 from clever storage solutions to small upgrades that instantly [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"disabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2368","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yourlivelyhome.com\/index.php\/wp-json\/wp\/v2\/pages\/2368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yourlivelyhome.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yourlivelyhome.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yourlivelyhome.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/yourlivelyhome.com\/index.php\/wp-json\/wp\/v2\/comments?post=2368"}],"version-history":[{"count":40,"href":"https:\/\/yourlivelyhome.com\/index.php\/wp-json\/wp\/v2\/pages\/2368\/revisions"}],"predecessor-version":[{"id":2825,"href":"https:\/\/yourlivelyhome.com\/index.php\/wp-json\/wp\/v2\/pages\/2368\/revisions\/2825"}],"wp:attachment":[{"href":"https:\/\/yourlivelyhome.com\/index.php\/wp-json\/wp\/v2\/media?parent=2368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}