{"id":368,"date":"2026-04-07T17:52:30","date_gmt":"2026-04-07T17:52:30","guid":{"rendered":"https:\/\/gregg.client-demo-websites.com\/?page_id=368"},"modified":"2026-04-07T20:05:50","modified_gmt":"2026-04-07T20:05:50","slug":"landing-page","status":"publish","type":"page","link":"https:\/\/gregg.client-demo-websites.com\/","title":{"rendered":"Landing Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"368\" class=\"elementor elementor-368\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-37096b6 elementor-section-full_width elementor-section-height-min-height elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-section-height-default elementor-section-items-middle\" data-id=\"37096b6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-49bf9fd\" data-id=\"49bf9fd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bb45b9c landing-menu elementor-widget elementor-widget-eael-image-accordion\" data-id=\"bb45b9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"eael-image-accordion.default\">\n\t\t\t\t\t    <div class=\"eael-img-accordion accordion-direction-horizontal eael-img-accordion-horizontal-align-center eael-img-accordion-vertical-align-center\" id=\"eael-img-accordion-bb45b9c\" data-img-accordion-id=\"bb45b9c\" data-img-accordion-type=\"on-hover\">\n                    \n            <div class=\"eael-image-accordion-hover eael-image-accordion-item\" style=\"background-image: url(https:\/\/gregg.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/3.jpg);\"  tabindex=\"0\">\n                <div class=\"overlay\">\n                                        <div class=\"overlay-inner \">\n                        <h2 class=\"img-accordion-title\">The Wechuge<\/h2>                    <\/div>\n                <\/div>\n            <\/div>\n                    \n            <div class=\"eael-image-accordion-hover eael-image-accordion-item\" style=\"background-image: url(https:\/\/gregg.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/ghost-mmo-artwork-island.webp);\"  tabindex=\"0\">\n                <div class=\"overlay\">\n                                        <div class=\"overlay-inner \">\n                        <h2 class=\"img-accordion-title\">Ghosts of a Former World<\/h2>                    <\/div>\n                <\/div>\n            <\/div>\n                    \n            <div class=\"eael-image-accordion-hover eael-image-accordion-item\" style=\"background-image: url(https:\/\/gregg.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/angels-of-mons.jpg);\"  tabindex=\"0\">\n                <div class=\"overlay\">\n                                        <div class=\"overlay-inner \">\n                        <h2 class=\"img-accordion-title\">Beneath the Angels of Mons<\/h2>                    <\/div>\n                <\/div>\n            <\/div>\n                    \n            <div class=\"eael-image-accordion-hover eael-image-accordion-item\" style=\"background-image: url(https:\/\/gregg.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/gb.jpg);\"  tabindex=\"0\">\n                <div class=\"overlay\">\n                                        <div class=\"overlay-inner \">\n                        <h2 class=\"img-accordion-title\">Gregg Bartley<\/h2>                    <\/div>\n                <\/div>\n            <\/div>\n                <\/div>\n        <style typr=\"text\/css\">\n                    #eael-img-accordion-bb45b9c .eael-image-accordion-hover:hover {\n                        flex: 3 1 0% !important;\n                    }\n                    #eael-img-accordion-bb45b9c .eael-image-accordion-hover:hover:hover .overlay-inner * {\n                        opacity: 1;\n                        visibility: visible;\n                        transform: none;\n                        transition: all .3s .3s;\n                    }\n                <\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-27058e0 elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"27058e0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1d49b16\" data-id=\"1d49b16\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6fe8f6b elementor-widget elementor-widget-html\" data-id=\"6fe8f6b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"shattered-wrapper\">\r\n  <div class=\"frame-overlay\"><\/div> \r\n  \r\n  <div class=\"gallery-container\">\r\n    <div class=\"gallery-strip active\" style=\"--bg-img: url('https:\/\/gregg.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/3.jpg');\">\r\n      <div class=\"strip-content\"><\/div>\r\n      <div class=\"text-group\"><h2><a href=\"https:\/\/gregg.client-demo-websites.com\/index.php\/books\/\">The Wechuge<\/a><\/h2><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gallery-strip\" style=\"--bg-img: url('https:\/\/gregg.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/ghost-mmo-artwork-island.webp');\">\r\n      <div class=\"strip-content\"><\/div>\r\n      <div class=\"text-group\"><h2><a href=\"https:\/\/gregg.client-demo-websites.com\/index.php\/books\/\">Ghosts of a Former World<\/a><\/h2><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gallery-strip\" style=\"--bg-img: url('https:\/\/gregg.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/angels-of-mons.jpg');\">\r\n      <div class=\"strip-content\"><\/div>\r\n      <div class=\"text-group\"><h2><a href=\"https:\/\/gregg.client-demo-websites.com\/index.php\/books\/\">Beneath the Angels of Mons<\/a><\/h2><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gallery-strip\" style=\"--bg-img: url('https:\/\/gregg.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/gb.jpg');\">\r\n      <div class=\"strip-content\"><\/div>\r\n      <div class=\"text-group\"><h2><a href=\"https:\/\/gregg.client-demo-websites.com\/\">Gregg Bartley<\/a><\/h2><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<svg style=\"position: absolute; width: 0; height: 0;\" aria-hidden=\"true\">\r\n  <filter id=\"shatter-effect\">\r\n    <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.04\" numOctaves=\"4\" result=\"noise\" \/>\r\n    <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale=\"20\" \/>\r\n  <\/filter>\r\n<\/svg>\r\n\r\n<style>\r\n:root {\r\n  --frame-color: #000;\r\n  --transition-speed: 0.7s;\r\n  --skew-amount: -12deg;\r\n  --unskew-amount: 12deg;\r\n}\r\n\r\n.shattered-wrapper {\r\n  position: relative;\r\n  background: #000;\r\n  padding: 20px;\r\n  overflow: hidden; \r\n  height: 100vh;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* THE FIX: This creates the shattered border WITHOUT touching the images *\/\r\n.frame-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 10;\r\n  pointer-events: none; \/* Allows clicks to pass through to images *\/\r\n  border: 30px solid #000; \/* Adjust this for border thickness *\/\r\n  filter: url(#shatter-effect);\r\n  box-sizing: border-box;\r\n}\r\n\r\n.gallery-container {\r\n  display: flex;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: #000;\r\n  overflow: hidden;\r\n}\r\n\r\n.gallery-strip {\r\n  position: relative;\r\n  flex: 1;\r\n  overflow: hidden;\r\n  transform: skewX(var(--skew-amount));\r\n  transition: flex var(--transition-speed) cubic-bezier(0.25, 1, 0.3, 1);\r\n  border-right: 14px solid #000;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* Tuck the edges *\/\r\n.gallery-strip:first-child { margin-left: -15%; padding-left: 15%; }\r\n.gallery-strip:last-child { margin-right: -15%; padding-right: 15%; border-right: none; }\r\n\r\n.gallery-strip.active,\r\n.gallery-strip:hover {\r\n  flex: 5;\r\n  z-index: 5;\r\n}\r\n\r\n.strip-content {\r\n  position: absolute;\r\n  top: 0;\r\n  left: -55%; \/* Pushed significantly LEFT *\/\r\n  width: 190%; \r\n  height: 100%;\r\n  background-image: var(--bg-img);\r\n  background-size: cover;\r\n  background-position: center;\r\n  image-rendering: -webkit-optimize-contrast;\r\n  \r\n  \/* Un-skew and scale for sharpness *\/\r\n  transform: skewX(var(--unskew-amount)) scale(1.3);\r\n  transition: transform var(--transition-speed) ease;\r\n}\r\n\r\n.text-group {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%) skewX(var(--unskew-amount));\r\n  color: #fff;\r\n  z-index: 20; \/* Above the frame-overlay *\/\r\n  opacity: 0;\r\n  text-align: center;\r\n  width: 100%;\r\n  transition: opacity 0.4s ease;\r\n}\r\n\r\n.gallery-strip.active .text-group,\r\n.gallery-strip:hover .text-group {\r\n  opacity: 1;\r\n}\r\n\r\n.text-group h2 {\r\n  font-size: 3rem;\r\n  text-transform: uppercase;\r\n  text-shadow: 0 0 15px rgba(0,0,0,0.9);\r\n  color: #FFF;\r\n}\r\n\r\n.text-group a {\r\n  font-family: \"ShackletonTest\", Sans-serif;\r\n    font-size: 56px;\r\n    text-transform: uppercase;\r\n    color: #fff;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .frame-overlay { border-width: 15px; }\r\n  .gallery-container { flex-direction: column; }\r\n  .gallery-strip { transform: skewX(0); margin: 0 !important; padding: 0 !important; border-bottom: 4px solid #000; }\r\n  .strip-content { transform: skewX(0) scale(1); left: 0; width: 100%; }\r\n  .text-group { transform: translate(-50%, -50%) skewX(0); }\r\n}\r\n\r\n\r\n\/* --- Fix: Shift Last Image Content significantly to the LEFT --- *\/\r\n.gallery-strip:last-child .strip-content {\r\n    \/* 1. Base position from previous code was likely around -30% to -50% *\/\r\n    \/* 2. Set this to a heavily negative number to shift left. *\/\r\n    \/* Adjust this number (e.g., -80%, -100%) until the author is visible *\/\r\n    left: -120%; \r\n    \r\n    \/* 3. Increase width to ensure no white edges show with the heavy shift *\/\r\n    width: 220%; \r\n    \r\n    \/* 4. Keeps the main focal point (the author) anchored to the right *\/\r\n    background-position: right center; \r\n\r\n    \/* 5. Bump scale up slightly just to be safe with the extreme angles *\/\r\n    transform: skewX(var(--unskew-amount)) scale(1.4);\r\n}\r\n\r\n\r\n\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  const strips = document.querySelectorAll('.gallery-strip');\r\n  strips.forEach(strip => {\r\n    strip.addEventListener('mouseenter', () => {\r\n      strips.forEach(s => s.classList.remove('active'));\r\n    });\r\n    strip.addEventListener('click', () => {\r\n      strips.forEach(s => s.classList.remove('active'));\r\n      strip.classList.add('active');\r\n    });\r\n  });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Wechuge Ghosts of a Former World Beneath the Angels of Mons Gregg Bartley The Wechuge Ghosts of a Former World Beneath the Angels of Mons Gregg Bartley<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-368","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gregg.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gregg.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gregg.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gregg.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gregg.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/comments?post=368"}],"version-history":[{"count":109,"href":"https:\/\/gregg.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/368\/revisions"}],"predecessor-version":[{"id":513,"href":"https:\/\/gregg.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/368\/revisions\/513"}],"wp:attachment":[{"href":"https:\/\/gregg.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/media?parent=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}