{"id":7,"date":"2026-10-19T15:29:03","date_gmt":"2026-10-19T15:29:03","guid":{"rendered":"https:\/\/liaphocoffee.com\/?page_id=7"},"modified":"2026-10-19T15:43:06","modified_gmt":"2026-10-19T15:43:06","slug":"home","status":"publish","type":"page","link":"https:\/\/liaphocoffee.com\/","title":{"rendered":"home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7a878f e-flex e-con-boxed e-con e-parent\" data-id=\"a7a878f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4860f64 elementor-widget elementor-widget-html\" data-id=\"4860f64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  LIAPHO \u2014 Coming Soon \u00b7 Elementor HTML widget snippet (generated by tools\/make-elementor.py)\r\n  Asset base: https:\/\/liapho-temp.vercel.app\/\r\n  Paste everything into ONE Elementor \"HTML\" widget. See README.md \u2192 Elementor.\r\n-->\r\n<style>\r\n\/* ==========================================================================\r\n   Liapho \u2014 Coming Soon\r\n   The homepage hero of the Liapho theme, extracted as a standalone page.\r\n   Every rule is scoped under #liapho-cs so the same file can live inside an\r\n   Elementor HTML widget without touching (or being touched by) the host theme.\r\n   ========================================================================== *\/\r\n\r\n\/* Fonts (self-hosted, OFL): the Liapho Coming Soon pair -------------------- *\/\r\n@font-face {\r\n\tfont-family: \"Gloock\";\r\n\tsrc: url(https:\/\/liapho-temp.vercel.app\/assets\/fonts\/gloock-latin-400-normal.woff2) format(\"woff2\");\r\n\tfont-weight: 400;\r\n\tfont-display: swap;\r\n}\r\n@font-face {\r\n\tfont-family: \"Hanken Grotesk\";\r\n\tsrc: url(https:\/\/liapho-temp.vercel.app\/assets\/fonts\/hanken-grotesk-latin-400-normal.woff2) format(\"woff2\");\r\n\tfont-weight: 400;\r\n\tfont-display: swap;\r\n}\r\n@font-face {\r\n\tfont-family: \"Hanken Grotesk\";\r\n\tsrc: url(https:\/\/liapho-temp.vercel.app\/assets\/fonts\/hanken-grotesk-latin-500-normal.woff2) format(\"woff2\");\r\n\tfont-weight: 500;\r\n\tfont-display: swap;\r\n}\r\n\r\n\/* Tokens (identical to the theme) ------------------------------------------ *\/\r\n#liapho-cs {\r\n\t--roast: #1c120c;\r\n\t--roast-2: #2a1b12;\r\n\t--ink: #231f20;\r\n\t--cream: #f2e9de;\r\n\t--foam: #fbf7f1;\r\n\t--gold: #d4aa62;\r\n\t--gold-soft: #e6c48a;\r\n\r\n\t--font-display: \"Gloock\", \"Bodoni 72\", Didot, Georgia, serif;\r\n\t--font-body: \"Hanken Grotesk\", \"Helvetica Neue\", Arial, sans-serif;\r\n\r\n\t--fs-hero: clamp(2.5rem, 1.1rem + 5vw, 6.4rem);\r\n\t--fs-lede: clamp(1.06rem, 0.98rem + 0.3vw, 1.28rem);\r\n\t--fs-small: 0.875rem;\r\n\r\n\t--gutter: clamp(16px, 4.2vw, 64px);\r\n\t--max: 1440px;\r\n\t--header-h: 76px;\r\n\r\n\t--ease-out: cubic-bezier(0.16, 1, 0.3, 1);\r\n\t--ease-io: cubic-bezier(0.7, 0, 0.2, 1);\r\n\t--logo-steam: var(--gold);\r\n\r\n\tposition: relative;\r\n\tdirection: ltr;\r\n\toverflow: hidden;\r\n\tbackground: var(--roast);\r\n\tcolor: var(--ink);\r\n\tfont-family: var(--font-body);\r\n\tfont-size: 1.0625rem;\r\n\tline-height: 1.5;\r\n\tfont-feature-settings: \"kern\", \"liga\";\r\n\t-webkit-font-smoothing: antialiased;\r\n\ttext-rendering: optimizeLegibility;\r\n\ttext-align: start;\r\n}\r\n\r\n\/* Local reset: keeps host-theme styles (e.g. inside Elementor) out. *\/\r\n#liapho-cs *,\r\n#liapho-cs *::before,\r\n#liapho-cs *::after { box-sizing: border-box; }\r\n#liapho-cs img,\r\n#liapho-cs svg,\r\n#liapho-cs video,\r\n#liapho-cs picture { display: block; max-width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }\r\n#liapho-cs img { height: auto; }\r\n#liapho-cs a { color: inherit; text-decoration: none; }\r\n#liapho-cs h1,\r\n#liapho-cs p { margin: 0; padding: 0; letter-spacing: 0; text-transform: none; }\r\n#liapho-cs main,\r\n#liapho-cs header,\r\n#liapho-cs picture { margin: 0; padding: 0; border: 0; max-width: none; float: none; }\r\n#liapho-cs bdi { unicode-bidi: isolate; }\r\n#liapho-cs :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }\r\n\r\n\/* Header: brand mark only ---------------------------------------------------- *\/\r\n#liapho-cs .lcs-site-header {\r\n\tposition: absolute;\r\n\tinset: 0 0 auto;\r\n\tz-index: 60;\r\n\theight: var(--header-h);\r\n\tcolor: var(--ink);\r\n}\r\n#liapho-cs .lcs-site-header__inner {\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-end;\r\n\tpadding-block-start: clamp(16px, 2vw, 28px);\r\n\theight: 100%;\r\n\tmargin-inline: var(--gutter); \/* same right edge as the copy block *\/\r\n}\r\n#liapho-cs .lcs-brand { display: block; flex: none; color: inherit; }\r\n#liapho-cs .lcs-brand img { width: clamp(112px, 9.5vw, 156px); height: auto; }\r\n\r\n\/* Word-mask reveal (letters inside a Persian word are never split). --------- *\/\r\n#liapho-cs .lcs-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.12em; margin-block: -0.12em; }\r\n#liapho-cs .lcs-w > span { display: inline-block; will-change: transform; }\r\n\r\n\/* Buttons ------------------------------------------------------------------ *\/\r\n#liapho-cs .lcs-btn {\r\n\tposition: relative;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tgap: 0.6em;\r\n\tmin-height: 52px;\r\n\tpadding: 0 1.7em;\r\n\tborder: 1px solid transparent;\r\n\tborder-radius: 999px;\r\n\tfont-family: var(--font-body);\r\n\tfont-size: 15px;\r\n\tfont-weight: 500;\r\n\tletter-spacing: 0.01em;\r\n\tline-height: 1;\r\n\twhite-space: nowrap;\r\n\tcursor: pointer;\r\n\toverflow: hidden;\r\n\tisolation: isolate;\r\n\ttransition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);\r\n}\r\n#liapho-cs .lcs-btn::after {\r\n\t\/* Light sweep across the pill on hover. *\/\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tinset: 0;\r\n\tz-index: -1;\r\n\tbackground: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);\r\n\ttransform: translateX(110%);\r\n\ttransition: transform 0.9s var(--ease-out);\r\n}\r\n#liapho-cs .lcs-btn:hover::after { transform: translateX(-110%); }\r\n#liapho-cs .lcs-btn:active { transform: scale(0.98); }\r\n#liapho-cs .lcs-icon { width: 1.25em; height: 1.25em; flex: none; }\r\n\r\n\/* Intro curtain (first visit) ------------------------------------------------ *\/\r\n#liapho-cs .lcs-intro { display: none; }\r\n#liapho-cs.lcs-motion-ok .lcs-intro {\r\n\tposition: fixed;\r\n\tinset: 0;\r\n\tz-index: 120;\r\n\tdisplay: grid;\r\n\tplace-items: center;\r\n\tbackground: var(--cream);\r\n\tcolor: var(--ink);\r\n\tanimation: lcs-intro-failsafe 0.01s 5s forwards;\r\n}\r\n#liapho-cs .lcs-intro__logo { width: min(46vw, 300px); height: auto; }\r\n@keyframes lcs-intro-failsafe { to { visibility: hidden; opacity: 0; } }\r\n\r\n\/* Hero (as in the theme) ----------------------------------------------------- *\/\r\n#liapho-cs .lcs-hero { position: relative; background: var(--roast); color: var(--ink); }\r\n#liapho-cs .lcs-hero__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }\r\n\r\n#liapho-cs .lcs-hero__plate {\r\n\tposition: absolute;\r\n\tinset: 0;\r\n\toverflow: hidden;\r\n\tbackground: #8a5a2e;\r\n}\r\n#liapho-cs .lcs-hero__media { position: absolute; inset: 0; will-change: transform; }\r\n#liapho-cs .lcs-hero__media .lcs-pic,\r\n#liapho-cs .lcs-hero__media img,\r\n#liapho-cs .lcs-hero__media video {\r\n\tposition: absolute;\r\n\tinset: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tmax-width: none;\r\n\tobject-fit: cover;\r\n\tobject-position: 30% 50%;\r\n}\r\n#liapho-cs .lcs-plate-video { opacity: 0; transition: opacity 1.2s var(--ease-out); }\r\n#liapho-cs .lcs-plate-video.lcs-is-playing { opacity: 1; }\r\n#liapho-cs .lcs-hero__shade {\r\n\tposition: absolute;\r\n\tinset: 0;\r\n\tpointer-events: none;\r\n\t\/* A warm veil behind the headline keeps espresso-ink type above 4.5:1 on the gold plate. *\/\r\n\tbackground:\r\n\t\tradial-gradient(60% 70% at 82% 46%, rgba(246, 226, 190, 0.55), rgba(246, 226, 190, 0) 70%),\r\n\t\tlinear-gradient(to top, rgba(28, 18, 12, 0.35), rgba(28, 18, 12, 0) 26%);\r\n}\r\n\r\n#liapho-cs .lcs-hero__depth { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }\r\n#liapho-cs .lcs-depth { position: absolute; left: var(--x); top: var(--y); width: var(--s); will-change: transform; }\r\n#liapho-cs .lcs-depth img { width: 100%; rotate: var(--r); }\r\n#liapho-cs .lcs-depth--near img { filter: blur(8px); }\r\n#liapho-cs .lcs-depth--mid img { filter: blur(1.5px); }\r\n#liapho-cs .lcs-depth--far img { filter: blur(0.6px) brightness(0.92); opacity: 0.92; }\r\n\r\n#liapho-cs .lcs-hero__content {\r\n\tposition: absolute;\r\n\tinset-block-start: 0;\r\n\tright: var(--gutter);\r\n\tz-index: 3;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: center;\r\n\tgap: 1.6rem;\r\n\theight: 100%;\r\n\t\/* Hugs its text from the right gutter, so the copy keeps the zone the original hero used. *\/\r\n\twidth: max-content;\r\n\tmax-width: min(44vw, 660px);\r\n\tpadding-block-start: var(--header-h);\r\n}\r\n#liapho-cs .lcs-hero__title {\r\n\tfont-family: var(--font-display);\r\n\tfont-size: clamp(52px, 7.6vw, 132px);\r\n\tfont-weight: 400;\r\n\tline-height: 0.96;\r\n\tletter-spacing: -0.022em;\r\n\tcolor: var(--roast);\r\n\tfont-feature-settings: \"kern\", \"liga\";\r\n}\r\n#liapho-cs .lcs-line { display: block; }\r\n#liapho-cs .lcs-hero__title .lcs-w { padding-block: 0.2em; margin-block: -0.2em; }\r\n#liapho-cs .lcs-hero__text { font-size: clamp(17px, 1.35vw, 20px); font-weight: 400; line-height: 1.5; color: #3a2618; max-width: 34ch; text-wrap: pretty; }\r\n#liapho-cs .lcs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 0.4rem; }\r\n#liapho-cs .lcs-hero .lcs-btn--gold { background: var(--roast); color: var(--cream); }\r\n#liapho-cs .lcs-hero .lcs-btn--gold:hover { background: var(--roast-2); }\r\n\r\n\/* Portrait screens: the 9:16 plate, headline in the open top area. *\/\r\n@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {\r\n\t#liapho-cs { --header-h: 68px; }\r\n\t#liapho-cs .lcs-brand img { width: 104px; }\r\n\t#liapho-cs .lcs-hero__content {\r\n\t\tjustify-content: flex-start;\r\n\t\twidth: auto;\r\n\t\tmax-width: none;\r\n\t\theight: auto;\r\n\t\tleft: var(--gutter);\r\n\t\tpadding-block-start: calc(var(--header-h) + 3svh);\r\n\t\tgap: 1rem;\r\n\t}\r\n\t#liapho-cs .lcs-hero__title { font-size: clamp(44px, 11vw, 96px); }\r\n\t#liapho-cs .lcs-hero__shade {\r\n\t\tbackground:\r\n\t\t\tradial-gradient(90% 46% at 60% 14%, rgba(246, 226, 190, 0.55), rgba(246, 226, 190, 0) 72%),\r\n\t\t\tlinear-gradient(to top, rgba(28, 18, 12, 0.4), rgba(28, 18, 12, 0) 24%);\r\n\t}\r\n\t#liapho-cs .lcs-hero__media img,\r\n\t#liapho-cs .lcs-hero__media video { object-position: 50% 50%; }\r\n\t#liapho-cs .lcs-depth { width: calc(var(--s) * 2.4); }\r\n\t#liapho-cs .lcs-depth--far,\r\n\t#liapho-cs .lcs-depth--landscape { display: none; }\r\n\t#liapho-cs .lcs-hero__text { font-size: 17px; max-width: 34ch; }\r\n\t#liapho-cs .lcs-hero__actions { margin-block-start: 0.2rem; }\r\n}\r\n@media (max-width: 767px) {\r\n\t#liapho-cs .lcs-hero__title { font-size: clamp(44px, 15.4vw, 72px); line-height: 0.98; }\r\n}\r\n\r\n\/* Short portrait phones: tighter copy block so it stays above the glass. *\/\r\n@media (max-width: 767px) and (max-height: 740px) and (orientation: portrait) {\r\n\t#liapho-cs .lcs-hero__content { padding-block-start: calc(var(--header-h) + 1svh); gap: 0.7rem; }\r\n\t#liapho-cs .lcs-hero__title { font-size: clamp(40px, 13.6vw, 60px); }\r\n\t#liapho-cs .lcs-hero__text { font-size: 16px; }\r\n\t#liapho-cs .lcs-btn { min-height: 46px; }\r\n\t#liapho-cs .lcs-hero__shade {\r\n\t\tbackground:\r\n\t\t\tradial-gradient(110% 62% at 60% 18%, rgba(246, 226, 190, 0.6), rgba(246, 226, 190, 0) 74%),\r\n\t\t\tlinear-gradient(to top, rgba(28, 18, 12, 0.4), rgba(28, 18, 12, 0) 24%);\r\n\t}\r\n}\r\n\r\n\/* Landscape phones: fit the whole composition in the short viewport. *\/\r\n@media (orientation: landscape) and (max-height: 560px) {\r\n\t#liapho-cs { --header-h: 58px; }\r\n\t#liapho-cs .lcs-brand img { width: 96px; }\r\n\t#liapho-cs .lcs-hero__stage { min-height: 320px; }\r\n\t#liapho-cs .lcs-hero__content { gap: 0.55rem; max-width: min(50vw, 520px); }\r\n\t#liapho-cs .lcs-hero__title { font-size: clamp(34px, 12vh, 60px); }\r\n\t#liapho-cs .lcs-hero__text { font-size: 15px; }\r\n\t#liapho-cs .lcs-btn { min-height: 44px; }\r\n\t#liapho-cs .lcs-depth--landscape { display: none; }\r\n}\r\n\r\n\/* Motion states ---------------------------------------------------------------- *\/\r\n\/* Hidden only while motion is on; a CSS failsafe shows them even if GSAP never loads. *\/\r\n#liapho-cs.lcs-motion-ok [data-lcs-fade] { opacity: 0; animation: lcs-show 0.01s 6s forwards; }\r\n#liapho-cs.lcs-gsap-failed [data-lcs-fade] { opacity: 1; animation: none; }\r\n@keyframes lcs-show { to { opacity: 1; visibility: visible; } }\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\t#liapho-cs *,\r\n\t#liapho-cs *::before,\r\n\t#liapho-cs *::after {\r\n\t\tanimation-duration: 0.01ms !important;\r\n\t\tanimation-iteration-count: 1 !important;\r\n\t\ttransition-duration: 0.01ms !important;\r\n\t}\r\n\t#liapho-cs .lcs-plate-video { display: none; }\r\n}\r\n\r\n\/* Elementor overlay mode: covers the viewport regardless of the host layout. *\/\r\n#liapho-cs.lcs--overlay {\r\n\tposition: fixed;\r\n\tinset: 0;\r\n\tz-index: 99990;\r\n\toverflow-x: hidden;\r\n\toverflow-y: auto;\r\n}\r\n\r\n\/* Elementor: lock page scroll behind the overlay; keep it editable inside the editor. *\/\r\nhtml:has(#liapho-cs.lcs--overlay) { overflow: hidden; }\r\n.elementor-editor-active #liapho-cs.lcs--overlay { position: relative; inset: auto; z-index: auto; height: 100vh; }\r\n<\/style>\r\n<div id=\"liapho-cs\" class=\"lcs lcs--overlay\" lang=\"en\" dir=\"ltr\" data-base=\"https:\/\/liapho-temp.vercel.app\/\" data-gsap=\"https:\/\/liapho-temp.vercel.app\/assets\/js\/gsap.min.js\">\r\n\t<script>(function(r){r.classList.add(window.matchMedia('(prefers-reduced-motion: reduce)').matches?'lcs-motion-reduce':'lcs-motion-ok')})(document.getElementById('liapho-cs'));<\/script>\r\n\r\n\t<div class=\"lcs-intro\" data-lcs-intro aria-hidden=\"true\"><img fetchpriority=\"high\" class=\"lcs-intro__logo\" src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/liapho-logo.webp\" alt=\"\" width=\"686\" height=\"328\" decoding=\"async\"><\/div>\r\n\r\n\t<header class=\"lcs-site-header\">\r\n\t\t<div class=\"lcs-site-header__inner\">\r\n\t\t\t<a class=\"lcs-brand\" href=\"\/\"><img fetchpriority=\"high\" src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/liapho-logo.webp\" alt=\"Liapho Coffee\" width=\"686\" height=\"328\" decoding=\"async\" fetchpriority=\"high\"><\/a>\r\n\t\t<\/div>\r\n\t<\/header>\r\n\r\n\t<main class=\"lcs-hero\" data-lcs-hero aria-labelledby=\"hero-title\">\r\n\t\t<div class=\"lcs-hero__stage\">\r\n\t\t\t<div class=\"lcs-hero__plate\">\r\n\t\t\t\t<div class=\"lcs-hero__media\" data-lcs-media>\r\n\t\t\t\t\t<picture class=\"lcs-pic lcs-hero__poster\">\r\n\t\t\t\t\t\t<source type=\"image\/avif\" media=\"(max-width: 1023px) and (orientation: portrait)\" srcset=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-mobile-1080.avif 1080w, https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-mobile-720.avif 720w\" sizes=\"100vw\">\r\n\t\t\t\t\t\t<source type=\"image\/webp\" media=\"(max-width: 1023px) and (orientation: portrait)\" srcset=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-mobile-1080.webp 1080w, https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-mobile-720.webp 720w\" sizes=\"100vw\">\r\n\t\t\t\t\t\t<source type=\"image\/avif\" srcset=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-2400.avif 2400w, https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-1600.avif 1600w, https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-1024.avif 1024w\" sizes=\"100vw\">\r\n\t\t\t\t\t\t<img fetchpriority=\"high\" src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-1600.webp\" srcset=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-2400.webp 2400w, https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-1600.webp 1600w, https:\/\/liapho-temp.vercel.app\/assets\/images\/hero-1024.webp 1024w\" sizes=\"100vw\" width=\"2688\" height=\"1520\" alt=\"A glass of latte in a swirl of milk and coffee, floating above a stone pedestal\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\">\r\n\t\t\t\t\t<\/picture>\r\n\t\t\t\t\t<video class=\"lcs-plate-video lcs-hero__video\" muted playsinline loop preload=\"none\" disablepictureinpicture aria-hidden=\"true\" tabindex=\"-1\" data-lcs-video='{\"sm\":[\"assets\/videos\/hero-mobile-1280.webm\",\"assets\/videos\/hero-mobile-1280.mp4\"],\"md\":[\"assets\/videos\/hero-720.webm\",\"assets\/videos\/hero-720.mp4\"],\"lg\":[\"assets\/videos\/hero-1080.webm\",\"assets\/videos\/hero-1080.mp4\"]}'><\/video>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"lcs-hero__shade\" aria-hidden=\"true\"><\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div class=\"lcs-hero__depth\" aria-hidden=\"true\">\r\n\t\t\t\t\t<span class=\"lcs-depth lcs-depth--far\" data-lcs-depth=\"far\" style=\"--x:57%;--y:13%;--s:2.4vw;--r:-18deg\"><img src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/cutouts\/bean-3.webp\" alt=\"\" width=\"356\" height=\"360\" decoding=\"async\"><\/span>\r\n\t\t\t\t\t<span class=\"lcs-depth lcs-depth--far\" data-lcs-depth=\"far\" style=\"--x:55%;--y:90%;--s:2.1vw;--r:24deg\"><img src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/cutouts\/bean-6.webp\" alt=\"\" width=\"360\" height=\"262\" decoding=\"async\"><\/span>\r\n\t\t\t\t\t<span class=\"lcs-depth lcs-depth--far\" data-lcs-depth=\"far\" style=\"--x:69%;--y:84%;--s:1.9vw;--r:-40deg\"><img loading=\"lazy\" src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/cutouts\/bean-4.webp\" alt=\"\" width=\"360\" height=\"336\" decoding=\"async\"><\/span>\r\n\t\t\t\t\t<span class=\"lcs-depth lcs-depth--mid\" data-lcs-depth=\"mid\" style=\"--x:49%;--y:71%;--s:3.6vw;--r:32deg\"><img loading=\"lazy\" src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/cutouts\/bean-1.webp\" alt=\"\" width=\"285\" height=\"360\" decoding=\"async\"><\/span>\r\n\t\t\t\t\t<span class=\"lcs-depth lcs-depth--mid lcs-depth--landscape\" data-lcs-depth=\"mid\" style=\"--x:96%;--y:22%;--s:3.2vw;--r:-12deg\"><img loading=\"lazy\" src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/cutouts\/bean-2.webp\" alt=\"\" width=\"198\" height=\"360\" decoding=\"async\"><\/span>\r\n\t\t\t\t\t<span class=\"lcs-depth lcs-depth--near lcs-depth--landscape\" data-lcs-depth=\"near\" style=\"--x:79%;--y:-6%;--s:10vw;--r:18deg\"><img loading=\"lazy\" src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/cutouts\/bean-5.webp\" alt=\"\" width=\"360\" height=\"335\" decoding=\"async\"><\/span>\r\n\t\t\t\t\t<span class=\"lcs-depth lcs-depth--near\" data-lcs-depth=\"near\" style=\"--x:35%;--y:86%;--s:12.5vw;--r:-26deg\"><img loading=\"lazy\" src=\"https:\/\/liapho-temp.vercel.app\/assets\/images\/cutouts\/bean-7.webp\" alt=\"\" width=\"331\" height=\"360\" decoding=\"async\"><\/span>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div class=\"lcs-hero__content\">\r\n\t\t\t\t<h1 id=\"hero-title\" class=\"lcs-hero__title\"><span class=\"lcs-line\">Something<\/span> <span class=\"lcs-line\">Is Brewing.<\/span><\/h1>\r\n\t\t\t\t<p class=\"lcs-hero__text\" data-lcs-fade>A new coffee experience is on its way.<\/p>\r\n\t\t\t\t<div class=\"lcs-hero__actions\" data-lcs-fade>\r\n\t\t\t\t\t<a class=\"lcs-btn lcs-btn--gold\" href=\"https:\/\/www.instagram.com\/liaphocoffee\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Follow Our Journey on Instagram (opens in a new tab)\">\r\n\t\t\t\t\t\t<svg class=\"lcs-icon\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\".6\" fill=\"currentColor\"\/><\/svg>\r\n\t\t\t\t\t\tFollow Our Journey\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/main>\r\n<\/div>\r\n<script>\r\n\/**\r\n * Liapho \u2014 Coming Soon.\r\n * The hero motion from the Liapho theme (intro curtain, entrance, video plate,\r\n * pointer parallax), without the scroll-driven parts of the full homepage.\r\n * Progressive: with no JS, reduced motion or Save-Data the page is complete and static.\r\n *\/\r\n(() => {\r\n\t'use strict';\r\n\r\n\tconst root = document.getElementById('liapho-cs');\r\n\tif (!root || root.dataset.ready) return;\r\n\troot.dataset.ready = '1';\r\n\r\n\tconst $ = (s, c = root) => c.querySelector(s);\r\n\tconst $$ = (s, c = root) => Array.from(c.querySelectorAll(s));\r\n\tconst reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\tconst finePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\n\tconst saveData = !!(navigator.connection && navigator.connection.saveData);\r\n\tconst base = root.dataset.base || '';\r\n\r\n\t\/* ---------------- Video plate: size-appropriate source, after the poster ---------------- *\/\r\n\tconst pickSources = (sources) => {\r\n\t\tconst w = window.innerWidth;\r\n\t\tconst portrait = window.innerHeight > w;\r\n\t\tif (sources.sm && w < 1024 && portrait) return sources.sm;\r\n\t\tif (sources.md && (w < 1440 || !sources.lg)) return sources.md;\r\n\t\treturn sources.lg || sources.md || sources.sm;\r\n\t};\r\n\tconst video = $('video[data-lcs-video]');\r\n\tif (video && !reduce && !saveData) {\r\n\t\tconst start = () => {\r\n\t\t\tlet sources;\r\n\t\t\ttry { sources = JSON.parse(video.dataset.lcsVideo); } catch (e) { return; }\r\n\t\t\tconst [webm, mp4] = pickSources(sources) || [];\r\n\t\t\tif (!mp4) return;\r\n\t\t\tvideo.insertAdjacentHTML('beforeend', `<source src=\"${base + webm}\" type=\"video\/webm\"><source src=\"${base + mp4}\" type=\"video\/mp4\">`);\r\n\t\t\tvideo.addEventListener('playing', () => video.classList.add('lcs-is-playing'), { once: true });\r\n\t\t\tvideo.load();\r\n\t\t\tconst p = video.play();\r\n\t\t\tif (p && p.catch) p.catch(() => {});\r\n\t\t};\r\n\t\t\/\/ Start after the poster (LCP) has loaded, so it wins the bandwidth race.\r\n\t\tif (document.readyState === 'complete') start();\r\n\t\telse window.addEventListener('load', start, { once: true });\r\n\t\tdocument.addEventListener('visibilitychange', () => {\r\n\t\t\tif (!video.currentSrc) return;\r\n\t\t\tif (document.hidden) video.pause();\r\n\t\t\telse { const p = video.play(); if (p && p.catch) p.catch(() => {}); }\r\n\t\t});\r\n\t}\r\n\r\n\t\/* ---------------- Motion ---------------- *\/\r\n\tconst intro = $('[data-lcs-intro]');\r\n\tconst fail = () => {\r\n\t\troot.classList.add('lcs-gsap-failed');\r\n\t\tif (intro) intro.remove();\r\n\t};\r\n\tif (reduce) { if (intro) intro.remove(); return; }\r\n\r\n\tconst run = () => {\r\n\t\tconst { gsap } = window;\r\n\t\tgsap.defaults({ ease: 'expo.out', duration: 1.1 });\r\n\r\n\t\tconst splitWords = (el) => {\r\n\t\t\tel.setAttribute('aria-label', el.textContent.trim());\r\n\t\t\tconst walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);\r\n\t\t\tconst nodes = [];\r\n\t\t\twhile (walker.nextNode()) nodes.push(walker.currentNode);\r\n\t\t\tnodes.forEach((node) => {\r\n\t\t\t\tconst frag = document.createDocumentFragment();\r\n\t\t\t\tnode.textContent.split(\/(\\s+)\/).forEach((part) => {\r\n\t\t\t\t\tif (!part) return;\r\n\t\t\t\t\tif (\/^\\s+$\/.test(part)) { frag.appendChild(document.createTextNode(part)); return; }\r\n\t\t\t\t\tconst outer = document.createElement('span');\r\n\t\t\t\t\touter.className = 'lcs-w';\r\n\t\t\t\t\touter.setAttribute('aria-hidden', 'true');\r\n\t\t\t\t\tconst inner = document.createElement('span');\r\n\t\t\t\t\tinner.textContent = part;\r\n\t\t\t\t\touter.appendChild(inner);\r\n\t\t\t\t\tfrag.appendChild(outer);\r\n\t\t\t\t});\r\n\t\t\t\tnode.replaceWith(frag);\r\n\t\t\t});\r\n\t\t\treturn $$('.lcs-w > span', el);\r\n\t\t};\r\n\r\n\t\tconst hero = $('[data-lcs-hero]');\r\n\t\tconst header = $('.lcs-site-header');\r\n\t\tconst media = $('[data-lcs-media]', hero);\r\n\t\tconst titleWords = splitWords($('.lcs-hero__title', hero));\r\n\t\tconst fades = $$('[data-lcs-fade]', hero);\r\n\t\tconst depth = $$('.lcs-depth', hero);\r\n\r\n\t\t\/\/ Fade targets are owned by GSAP from here; drop the CSS failsafe.\r\n\t\tfades.forEach((el) => { el.style.animation = 'none'; });\r\n\r\n\t\tconst enter = gsap.timeline({ paused: true });\r\n\t\tenter\r\n\t\t\t.fromTo(media, { scale: 1.14 }, { scale: 1, duration: 2.6, ease: 'expo.out' }, 0)\r\n\t\t\t.fromTo(titleWords, { yPercent: 115 }, { yPercent: 0, duration: 1.3, stagger: 0.07 }, 0.25)\r\n\t\t\t.fromTo(fades, { autoAlpha: 0, y: 24 }, { autoAlpha: 1, y: 0, duration: 1.1, stagger: 0.12 }, 0.75)\r\n\t\t\t.fromTo(depth, { autoAlpha: 0, scale: 0.7 }, { autoAlpha: 1, scale: 1, duration: 2, stagger: 0.06 }, 0.2)\r\n\t\t\t.fromTo(header, { yPercent: -100 }, { yPercent: 0, duration: 1.2, clearProps: 'transform' }, 0.6);\r\n\r\n\t\tlet seen = false;\r\n\t\ttry { seen = sessionStorage.getItem('liapho-intro') === '1'; } catch (e) { \/* storage blocked *\/ }\r\n\t\tif (intro && !seen) {\r\n\t\t\tconst logo = $('img', intro);\r\n\t\t\tgsap.timeline({ onComplete: () => intro.remove() })\r\n\t\t\t\t.fromTo(logo, { autoAlpha: 0, y: 14 }, { autoAlpha: 1, y: 0, duration: 1.4 })\r\n\t\t\t\t.to(intro, { clipPath: 'inset(0% 0% 100% 0% round 0% 0% 50% 50%)', duration: 1.2, ease: 'expo.inOut' }, 1.5)\r\n\t\t\t\t.add(() => enter.play(), 1.85);\r\n\t\t\ttry { sessionStorage.setItem('liapho-intro', '1'); } catch (e) { \/* storage blocked *\/ }\r\n\t\t} else {\r\n\t\t\tif (intro) intro.remove();\r\n\t\t\tenter.play();\r\n\t\t}\r\n\r\n\t\t\/* Pointer parallax on the cut-out layers and the plate. *\/\r\n\t\tif (finePointer) {\r\n\t\t\tconst layers = depth.map((el) => {\r\n\t\t\t\tconst img = $('img', el);\r\n\t\t\t\tconst k = { near: 36, mid: 16, far: 7 }[el.dataset.lcsDepth] || 8;\r\n\t\t\t\treturn { k, x: gsap.quickTo(img, 'x', { duration: 1.4, ease: 'power3.out' }), y: gsap.quickTo(img, 'y', { duration: 1.4, ease: 'power3.out' }) };\r\n\t\t\t});\r\n\t\t\tconst mx = gsap.quickTo(media, 'x', { duration: 1.8, ease: 'power3.out' });\r\n\t\t\thero.addEventListener('pointermove', (e) => {\r\n\t\t\t\tconst nx = (e.clientX \/ window.innerWidth) * 2 - 1;\r\n\t\t\t\tconst ny = (e.clientY \/ window.innerHeight) * 2 - 1;\r\n\t\t\t\tlayers.forEach((l) => { l.x(nx * l.k); l.y(ny * l.k); });\r\n\t\t\t\tmx(nx * -10);\r\n\t\t\t});\r\n\t\t}\r\n\t};\r\n\r\n\tconst safeRun = () => {\r\n\t\ttry { run(); } catch (e) { fail(); }\r\n\t};\r\n\tif (window.gsap) {\r\n\t\tsafeRun();\r\n\t} else if (root.dataset.gsap) {\r\n\t\t\/\/ Elementor snippet: load the bundled GSAP on demand.\r\n\t\tconst s = document.createElement('script');\r\n\t\ts.src = root.dataset.gsap;\r\n\t\ts.onload = () => (window.gsap ? safeRun() : fail());\r\n\t\ts.onerror = fail;\r\n\t\tdocument.head.appendChild(s);\r\n\t} else {\r\n\t\tfail();\r\n\t}\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\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>Something Is Brewing. A new coffee experience is on its way. Follow Our Journey<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/liaphocoffee.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liaphocoffee.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/liaphocoffee.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/liaphocoffee.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/liaphocoffee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":7,"href":"https:\/\/liaphocoffee.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/liaphocoffee.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/liaphocoffee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}