{"id":41,"date":"2026-05-21T18:19:25","date_gmt":"2026-05-21T18:19:25","guid":{"rendered":"https:\/\/mrhome-furniture.com\/?page_id=41"},"modified":"2026-05-21T19:57:21","modified_gmt":"2026-05-21T19:57:21","slug":"header","status":"publish","type":"page","link":"https:\/\/mrhome-furniture.com\/","title":{"rendered":"Header"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n MR. HOME - Coming Soon<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;700;900&family=Cormorant+Garamond:ital,wght@0,300;1,300&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --olive: #6B7A52;\r\n --gold: #E1C427;\r\n --cream: #E9E6E4;\r\n --silver: #C6CAC7;\r\n --dark: #1a1a18;\r\n --white: #FFFFFF;\r\n --ease: cubic-bezier(0.22, 1, 0.36, 1);\r\n }\r\n\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html, body {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n font-family: 'Montserrat', sans-serif;\r\n background: var(--dark);\r\n }\r\n\r\n \/* \u2500\u2500 PORTAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n #portal {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 9999;\r\n background: var(--olive);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 24px;\r\n transition: opacity 1.1s var(--ease), transform 1.2s var(--ease);\r\n }\r\n #portal.hide {\r\n opacity: 0;\r\n transform: scale(1.07);\r\n pointer-events: none;\r\n }\r\n .portal-brand {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n width: 100%;\r\n max-width: 360px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);\r\n }\r\n .portal-brand.show { opacity: 1; transform: translateY(0); }\r\n .portal-name {\r\n font-size: clamp(2.5rem, 12vw, 5rem);\r\n font-weight: 900;\r\n color: var(--cream);\r\n letter-spacing: 3px;\r\n line-height: 1;\r\n }\r\n .portal-sub-row {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n margin-top: 6px;\r\n gap: 12px;\r\n }\r\n .portal-sub-text {\r\n font-size: clamp(0.6rem, 2.5vw, 0.9rem);\r\n font-weight: 700;\r\n letter-spacing: 5px;\r\n color: var(--gold);\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n }\r\n .portal-line {\r\n flex: 1;\r\n height: 3px;\r\n background: var(--gold);\r\n border-radius: 2px;\r\n }\r\n .portal-tagline {\r\n margin-top: 12px;\r\n font-size: clamp(0.6rem, 2.5vw, 0.8rem);\r\n letter-spacing: 3px;\r\n color: var(--silver);\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* \u2500\u2500 PAGE SHELL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .page {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Background *\/\r\n .bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n }\r\n .bg img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: blur(5px) brightness(0.5);\r\n transform: scale(1.06);\r\n animation: pan 35s ease-in-out infinite alternate;\r\n }\r\n @keyframes pan {\r\n from { transform: scale(1.06) translate(0,0); }\r\n to { transform: scale(1.13) translate(-1%,-1%); }\r\n }\r\n .bg::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to top,\r\n rgba(20,20,18,0.97) 0%,\r\n rgba(20,20,18,0.55) 45%,\r\n rgba(20,20,18,0.2) 100%);\r\n }\r\n\r\n \/* \u2500\u2500 TOP BAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .top-bar {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 3;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: clamp(16px, 3vh, 32px) clamp(20px, 5vw, 60px);\r\n opacity: 0;\r\n transition: opacity 1s var(--ease) 0.9s;\r\n }\r\n .top-bar.show { opacity: 1; }\r\n\r\n \/* Corner logo *\/\r\n .corner-logo { display: flex; flex-direction: column; align-items: flex-start; }\r\n .corner-name {\r\n font-size: clamp(1rem, 3.5vw, 1.6rem);\r\n font-weight: 900;\r\n letter-spacing: 2px;\r\n color: var(--white);\r\n line-height: 1;\r\n }\r\n .corner-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-top: 3px;\r\n }\r\n .corner-sub {\r\n font-size: clamp(0.45rem, 1.5vw, 0.6rem);\r\n font-weight: 700;\r\n letter-spacing: 4px;\r\n color: var(--gold);\r\n text-transform: uppercase;\r\n }\r\n .corner-bar {\r\n width: clamp(30px, 6vw, 70px);\r\n height: 2px;\r\n background: var(--gold);\r\n }\r\n\r\n \/* Status pill *\/\r\n .status-pill {\r\n display: flex;\r\n align-items: center;\r\n gap: 7px;\r\n }\r\n .s-dot {\r\n width: 6px; height: 6px;\r\n border-radius: 50%;\r\n background: var(--gold);\r\n animation: blink 2s ease-in-out infinite;\r\n }\r\n @keyframes blink {\r\n 0%,100% { opacity: 1; }\r\n 50% { opacity: 0.25; }\r\n }\r\n .s-text {\r\n font-size: clamp(0.5rem, 1.8vw, 0.7rem);\r\n letter-spacing: 3px;\r\n color: var(--silver);\r\n text-transform: uppercase;\r\n font-weight: 500;\r\n }\r\n\r\n \/* \u2500\u2500 MAIN CONTENT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .content {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 2;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: clamp(90px, 12vh, 140px) clamp(16px, 5vw, 60px) clamp(60px, 8vh, 100px);\r\n gap: 0;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 1.3s var(--ease) 0.5s, transform 1.3s var(--ease) 0.5s;\r\n }\r\n .content.show { opacity: 1; transform: translateY(0); }\r\n\r\n .kicker {\r\n font-size: clamp(0.55rem, 2vw, 0.8rem);\r\n letter-spacing: 5px;\r\n color: var(--gold);\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n margin-bottom: clamp(8px, 1.5vh, 18px);\r\n }\r\n\r\n .excl {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-style: italic;\r\n font-weight: 300;\r\n font-size: clamp(3rem, 10vw, 8rem);\r\n color: var(--olive);\r\n line-height: 0.85;\r\n margin-bottom: clamp(4px, 1vh, 12px);\r\n text-shadow: 0 4px 24px rgba(107,122,82,0.5);\r\n animation: ppulse 3s ease-in-out infinite alternate;\r\n }\r\n @keyframes ppulse {\r\n from { opacity: 0.8; transform: scale(1); }\r\n to { opacity: 1; transform: scale(1.04); }\r\n }\r\n\r\n .for-text {\r\n font-size: clamp(4.5rem, 16vw, 11rem);\r\n font-weight: 900;\r\n color: var(--white);\r\n line-height: 0.85;\r\n letter-spacing: -2px;\r\n text-shadow: 0 6px 50px rgba(0,0,0,0.7);\r\n margin-bottom: clamp(6px, 1.2vh, 16px);\r\n }\r\n\r\n .sub-text {\r\n font-size: clamp(0.6rem, 2.2vw, 1.1rem);\r\n font-weight: 700;\r\n letter-spacing: clamp(3px, 1.5vw, 9px);\r\n color: rgba(255,255,255,0.7);\r\n text-transform: uppercase;\r\n margin-bottom: clamp(20px, 4vh, 50px);\r\n }\r\n\r\n \/* \u2500\u2500 COUNTDOWN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .timer-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: clamp(10px, 2vh, 18px);\r\n width: 100%;\r\n }\r\n\r\n .timer-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0;\r\n width: 100%;\r\n max-width: 700px;\r\n }\r\n\r\n .t-unit {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n flex: 1;\r\n min-width: 0;\r\n position: relative;\r\n padding: 0 clamp(10px, 2.5vw, 36px);\r\n }\r\n .t-unit:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n right: 0;\r\n top: 15%;\r\n height: 60%;\r\n width: 1px;\r\n background: linear-gradient(to bottom, transparent, rgba(225,196,39,0.5), transparent);\r\n }\r\n\r\n .t-num {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: clamp(2rem, 4.5vw, 5rem);\r\n font-weight: 300;\r\n color: var(--white);\r\n line-height: 1;\r\n letter-spacing: 2px;\r\n font-variant-numeric: tabular-nums;\r\n font-style: normal;\r\n white-space: nowrap;\r\n }\r\n .t-lbl {\r\n font-size: clamp(0.5rem, 1vw, 0.65rem);\r\n letter-spacing: 3px;\r\n color: var(--silver);\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n margin-top: 8px;\r\n font-style: normal;\r\n }\r\n\r\n .cs-wrap { text-align: center; }\r\n .cs-main {\r\n font-family: 'Montserrat', sans-serif;\r\n font-style: normal;\r\n font-weight: 300;\r\n font-size: clamp(1.2rem, 3vw, 2.2rem);\r\n color: var(--gold);\r\n letter-spacing: 8px;\r\n line-height: 1;\r\n text-transform: uppercase;\r\n text-shadow: 0 0 24px rgba(225,196,39,0.4);\r\n }\r\n .cs-sub {\r\n font-size: clamp(0.45rem, 1.5vw, 0.65rem);\r\n letter-spacing: 4px;\r\n color: rgba(255,255,255,0.3);\r\n text-transform: uppercase;\r\n margin-top: 6px;\r\n }\r\n\r\n \/* Bottom gold rule *\/\r\n .bottom-rule {\r\n position: absolute;\r\n bottom: clamp(16px, 3vh, 36px);\r\n left: clamp(20px, 5vw, 60px);\r\n right: clamp(20px, 5vw, 60px);\r\n height: 1px;\r\n background: linear-gradient(to right, var(--gold), rgba(255,255,255,0.06) 70%, transparent);\r\n opacity: 0;\r\n transition: opacity 1s var(--ease) 1.4s;\r\n z-index: 3;\r\n }\r\n .bottom-rule.show { opacity: 1; }\r\n\r\n \/* \u2500\u2500 VERY SMALL SCREENS (< 380px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n @media (max-width: 380px) {\r\n .for-text { font-size: 18vw; letter-spacing: -1px; }\r\n .t-num { font-size: 8vw; }\r\n .excl { font-size: 12vw; }\r\n }\r\n\r\n \/* \u2500\u2500 SHORT SCREENS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n @media (max-height: 600px) {\r\n .excl { display: none; }\r\n .for-text { font-size: clamp(3rem, 16vw, 8rem); margin-bottom: 4px; }\r\n .sub-text { margin-bottom: 14px; }\r\n .content { gap: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Portal -->\r\n <div id=\"portal\">\r\n <div class=\"portal-brand\" id=\"portalBrand\">\r\n <span class=\"portal-name\">MR.HOME<\/span>\r\n <div class=\"portal-sub-row\">\r\n <span class=\"portal-sub-text\">FURNITURE<\/span>\r\n <div class=\"portal-line\"><\/div>\r\n <\/div>\r\n <div class=\"portal-tagline\">Redefining the art of living<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Page -->\r\n <div class=\"page\">\r\n\r\n <div class=\"bg\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=1600&q=80\"\r\n alt=\"MR. HOME\" onerror=\"this.style.display='none'\">\r\n <\/div>\r\n\r\n <!-- Top bar: logo + status -->\r\n <div class=\"top-bar\" id=\"topBar\">\r\n <div class=\"corner-logo\">\r\n <span class=\"corner-name\">MR.HOME<\/span>\r\n <div class=\"corner-row\">\r\n <span class=\"corner-sub\">FURNITURE<\/span>\r\n <div class=\"corner-bar\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"status-pill\">\r\n <div class=\"s-dot\"><\/div>\r\n <span class=\"s-text\">Launching soon<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Bottom gold rule -->\r\n <div class=\"bottom-rule\" id=\"bottomRule\"><\/div>\r\n\r\n <!-- Main content -->\r\n <div class=\"content\" id=\"mainContent\">\r\n\r\n <div class=\"kicker\">MR.HOME  \u00b7  BUT DIFFERENT<\/div>\r\n\r\n <span class=\"excl\">!<\/span>\r\n\r\n <span class=\"for-text\">FOR<\/span>\r\n\r\n <p class=\"sub-text\">EVERYONE. FOR EVERY HOME<\/p>\r\n\r\n <div class=\"timer-wrap\">\r\n <div class=\"timer-row\">\r\n <div class=\"t-unit\">\r\n <span class=\"t-num\" id=\"days\">30<\/span>\r\n <span class=\"t-lbl\">Days<\/span>\r\n <\/div>\r\n <div class=\"t-unit\">\r\n <span class=\"t-num\" id=\"hours\">12<\/span>\r\n <span class=\"t-lbl\">Hours<\/span>\r\n <\/div>\r\n <div class=\"t-unit\">\r\n <span class=\"t-num\" id=\"minutes\">45<\/span>\r\n <span class=\"t-lbl\">Mins<\/span>\r\n <\/div>\r\n <div class=\"t-unit\">\r\n <span class=\"t-num\" id=\"seconds\">08<\/span>\r\n <span class=\"t-lbl\">Secs<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cs-wrap\">\r\n <div class=\"cs-main\">Coming Soon<\/div>\r\n <div class=\"cs-sub\">A new era of home furnishing<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Portal entrance\r\n window.addEventListener('load', () => {\r\n setTimeout(() => document.getElementById('portalBrand').classList.add('show'), 200);\r\n setTimeout(() => {\r\n document.getElementById('portal').classList.add('hide');\r\n document.getElementById('mainContent').classList.add('show');\r\n document.getElementById('topBar').classList.add('show');\r\n document.getElementById('bottomRule').classList.add('show');\r\n }, 1600);\r\n });\r\n\r\n \/\/ Countdown\r\n const target = new Date();\r\n target.setDate(target.getDate() + 30);\r\n const pad = n => n < 10 ? '0' + n : '' + n;\r\n\r\n function tick() {\r\n const diff = target - Date.now();\r\n if (diff <= 0) {\r\n ['days','hours','minutes','seconds'].forEach(id => document.getElementById(id).textContent = '00');\r\n return;\r\n }\r\n document.getElementById('days').textContent = pad(Math.floor(diff \/ 86400000));\r\n document.getElementById('hours').textContent = pad(Math.floor(diff % 86400000 \/ 3600000));\r\n document.getElementById('minutes').textContent = pad(Math.floor(diff % 3600000 \/ 60000));\r\n document.getElementById('seconds').textContent = pad(Math.floor(diff % 60000 \/ 1000));\r\n }\r\n tick();\r\n setInterval(tick, 1000);\r\n\r\n \/\/ Page transition\r\n document.addEventListener('click', e => {\r\n const a = e.target.closest('a[href]');\r\n if (!a) return;\r\n const href = a.getAttribute('href');\r\n if (a.target === '_blank' || href.startsWith('#')) return;\r\n if (!href.includes(':\/\/') || href.startsWith(location.origin)) {\r\n e.preventDefault();\r\n const p = document.getElementById('portal');\r\n p.style.transition = 'opacity 0.9s ease';\r\n p.classList.remove('hide');\r\n setTimeout(() => location.href = href, 950);\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MR. HOME – Coming Soon MR.HOME FURNITURE Redefining the art of living MR.HOME FURNITURE Launching soon MR.HOME  \u00b7  BUT DIFFERENT […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","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":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-41","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrhome-furniture.com\/index.php?rest_route=\/wp\/v2\/pages\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrhome-furniture.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrhome-furniture.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrhome-furniture.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrhome-furniture.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=41"}],"version-history":[{"count":66,"href":"https:\/\/mrhome-furniture.com\/index.php?rest_route=\/wp\/v2\/pages\/41\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/mrhome-furniture.com\/index.php?rest_route=\/wp\/v2\/pages\/41\/revisions\/116"}],"wp:attachment":[{"href":"https:\/\/mrhome-furniture.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}