{"id":833,"date":"2026-04-09T16:54:10","date_gmt":"2026-04-09T16:54:10","guid":{"rendered":"https:\/\/demowebdesign.live\/petricia\/?page_id=833"},"modified":"2026-04-16T17:49:38","modified_gmt":"2026-04-16T17:49:38","slug":"gallery-and-videos","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/petricia\/gallery-and-videos\/","title":{"rendered":"Gallery And Videos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"833\" class=\"elementor elementor-833\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-21b7a80 e-con-full e-flex e-con e-parent\" data-id=\"21b7a80\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9a8ae87 elementor-widget elementor-widget-html\" data-id=\"9a8ae87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\nbody { font-family: 'Inter', sans-serif; overflow-x: hidden; background: #06111c; }\r\n\r\n\/* HERO *\/\r\n.hero {\r\n  position: relative;\r\n  \/*min-height: 100vh;*\/\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  padding: 180px 48px;\r\n  text-align: center;\r\n}\r\n\r\n.hero-bg {\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(135deg,\r\n    #041c2c 0%, #0a2a4a 30%, #0d4f6e 55%, #0e6b7a 75%, #083040 100%\r\n  );\r\n  z-index: 0;\r\n}\r\n\r\n\/* Orbs *\/\r\n.orb {\r\n  position: absolute; border-radius: 50%;\r\n  animation: floatOrb 9s ease-in-out infinite; z-index: 1;\r\n}\r\n.orb-1 { width:520px; height:520px; background:#3ecfcf; opacity:0.10; top:-120px; left:-160px; }\r\n.orb-2 { width:300px; height:300px; background:#5ba8e0; opacity:0.09; bottom:-60px; left:30%; }\r\n.orb-3 { width:180px; height:180px; background:#c0392b; opacity:0.08; top:25%; right:42%; }\r\n\r\n@keyframes floatOrb {\r\n  0%,100% { transform: translateY(0) scale(1); }\r\n  50% { transform: translateY(-28px) scale(1.04); }\r\n}\r\n\r\n.hero-grid {\r\n  position: absolute; inset: 0;\r\n  background-image:\r\n    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);\r\n  background-size: 60px 60px;\r\n  z-index: 1;\r\n}\r\n\r\n\/* CENTER CONTENT *\/\r\n.hero-inner {\r\n  position: relative; z-index: 10;\r\n  max-width: 800px;\r\n}\r\n\r\n\/* TEXT *\/\r\n.badge {\r\n  display: inline-block;\r\n  background: rgba(62,207,207,0.13);\r\n  border: 1px solid rgba(62,207,207,0.32);\r\n  color: #7ee8e8;\r\n  font-size: 11px; font-weight: 600;\r\n  letter-spacing: 2px; text-transform: uppercase;\r\n  padding: 6px 18px; border-radius: 50px;\r\n  margin-bottom: 26px;\r\n  animation: fadeUp 1s ease 0.2s forwards;\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n}\r\n\r\n.hero-title {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: clamp(36px, 5vw, 64px);\r\n  font-weight: 900; line-height: 1.2; color: #fff;\r\n  margin-bottom: 20px;\r\n  animation: fadeUp 1s ease 0.4s forwards;\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n}\r\n\r\n.hero-title .accent-teal { color: #3ecfcf; }\r\n.hero-title .accent-red  { color: #e74c3c; }\r\n\r\n.hero-sub {\r\n  font-size: 16px;\r\n  color: rgba(190,220,230,0.8);\r\n  font-weight: 300;\r\n  line-height: 1.8;\r\n  margin-bottom: 36px;\r\n  animation: fadeUp 1s ease 0.6s forwards;\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n}\r\n\r\n\/* CTA *\/\r\n.cta-group {\r\n  display: flex;\r\n  gap: 14px;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  animation: fadeUp 1s ease 0.8s forwards;\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n}\r\n\r\n.btn {\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  padding: 13px 30px;\r\n  border-radius: 50px;\r\n  cursor: pointer;\r\n  border: none;\r\n  text-decoration: none;\r\n  transition: 0.3s;\r\n}\r\n\r\n.btn-primary {\r\n  background: #3ecfcf;\r\n  color: #041c2c;\r\n}\r\n.btn-primary:hover {\r\n  transform: scale(1.05);\r\n  box-shadow: 0 0 25px rgba(62,207,207,0.6);\r\n}\r\n\r\n.btn-secondary {\r\n  background: transparent;\r\n  color: #fff;\r\n  border: 1px solid rgba(255,255,255,0.4);\r\n}\r\n.btn-secondary:hover {\r\n  transform: scale(1.05);\r\n  border-color: #fff;\r\n}\r\n\r\n\/* Animation *\/\r\n@keyframes fadeUp {\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n<\/style>\r\n\r\n<section class=\"hero\">\r\n  <div class=\"hero-bg\"><\/div>\r\n  <div class=\"orb orb-1\"><\/div>\r\n  <div class=\"orb orb-2\"><\/div>\r\n  <div class=\"orb orb-3\"><\/div>\r\n  <div class=\"hero-grid\"><\/div>\r\n\r\n  <div class=\"hero-inner\">\r\n\r\n    <div class=\"badge\">Gallery & Video Moments<\/div>\r\n\r\n    <h1 class=\"hero-title\">\r\n      <span class=\"accent-red\">Moments <\/span> Captured Beyond<br\/>\r\n      The <span class=\"accent-teal\">Words<\/span>\r\n    <\/h1>\r\n\r\n    <p class=\"hero-sub\">\r\n      Explore a visual journey through Patricia Morgan\u2019s world \u2014 from behind-the-scenes\r\n      glimpses and book events to meaningful moments captured on camera. This collection\r\n      of photos and videos brings you closer to the experiences, emotions, and stories\r\n      that shape her work.\r\n      <br\/><br\/>\r\n      See the stories, feel the moments, and relive the journey.\r\n    <\/p>\r\n\r\n    <!--<div class=\"cta-group\">-->\r\n    <!--  <a href=\"#gallery\" class=\"btn btn-primary\">View Gallery<\/a>-->\r\n      <!--<a href=\"#contact\" class=\"btn btn-secondary\">Request an Event<\/a>-->\r\n    <!--<\/div>-->\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b0e62b8 e-flex e-con-boxed e-con e-parent\" data-id=\"b0e62b8\" 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-e2c9573 elementor-widget elementor-widget-video\" data-id=\"e2c9573\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/demowebdesign.live\/petricia\/wp-content\/uploads\/2026\/04\/Video.mov\" autoplay=\"\" loop=\"\" controls=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e119f0 e-flex e-con-boxed e-con e-parent\" data-id=\"3e119f0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc6ff57 elementor-widget elementor-widget-html\" data-id=\"dc6ff57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  .trailers-section {\r\n    background: #06111c;\r\n    padding: 120px 24px;\r\n    font-family: 'Inter', sans-serif;\r\n  }\r\n\r\n  .trailers-container {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .trailers-header {\r\n    text-align: center;\r\n    margin-bottom: 80px;\r\n  }\r\n\r\n  .trailers-header .section-label {\r\n    font-size: 12px;\r\n    letter-spacing: 5px;\r\n    text-transform: uppercase;\r\n    color: #3ecfcf;\r\n    margin-bottom: 16px;\r\n    display: block;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .trailers-header .section-title {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(36px, 5vw, 56px);\r\n    color: #fff;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .trailers-header .section-title span {\r\n    color: #3ecfcf;\r\n    font-style: italic;\r\n  }\r\n\r\n  .trailers-grid {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 40px;\r\n  }\r\n\r\n  \/* CINEMATIC TRAILER ITEM *\/\r\n  .trailer-item {\r\n    position: relative;\r\n    flex: 1 1 500px;\r\n    max-width: 580px;\r\n    aspect-ratio: 16 \/ 9;\r\n    border-radius: 24px;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    background: #000;\r\n    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n    border: 1.5px solid rgba(255,255,255,0.06);\r\n  }\r\n\r\n  .trailer-item:hover {\r\n    transform: translateY(-8px) scale(1.02);\r\n    box-shadow: 0 40px 90px rgba(0,0,0,0.9);\r\n    border-color: rgba(62, 207, 207, 0.5);\r\n    z-index: 10;\r\n  }\r\n\r\n  .trailer-item video {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* OVERLAY (Heading & Tag) *\/\r\n  .trailer-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(to top, rgba(4, 28, 44, 0.95) 0%, rgba(4, 28, 44, 0.2) 60%, transparent 100%);\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-end;\r\n    padding: 35px;\r\n    \/* SMOOTH HIDING EFFECT *\/\r\n    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s ease;\r\n    z-index: 4;\r\n  }\r\n\r\n  \/* HIDE WHEN PLAYING *\/\r\n  .trailer-item.is-playing .trailer-overlay {\r\n    opacity: 0;\r\n    transform: translateY(15px);\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* SHOW ON HOVER even if playing (Optional but professional) *\/\r\n  .trailer-item:hover .trailer-overlay {\r\n    opacity: 1 !important;\r\n    transform: translateY(0) !important;\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .v-tag {\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 3px;\r\n    color: #3ecfcf;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .v-title {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 26px;\r\n    font-weight: 700;\r\n    color: #fff;\r\n    margin-bottom: 8px;\r\n    line-height: 1.2;\r\n  }\r\n\r\n  .v-desc {\r\n    font-size: 14px;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    line-height: 1.6;\r\n    max-width: 90%;\r\n  }\r\n\r\n  \/* PLAY INDICATOR *\/\r\n  .play-indicator {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 80px;\r\n    height: 80px;\r\n    background: rgba(62, 207, 207, 0.95);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    opacity: 0;\r\n    transition: all 0.4s ease;\r\n    z-index: 5;\r\n    pointer-events: none;\r\n    box-shadow: 0 0 40px rgba(62, 207, 207, 0.4);\r\n  }\r\n\r\n  .play-indicator svg { width: 32px; height: 32px; fill: #041c2c; }\r\n\r\n  \/* Only show play button clearly when paused *\/\r\n  .trailer-item.is-paused .play-indicator {\r\n    opacity: 1;\r\n    background: #fff;\r\n    transform: translate(-50%, -50%) scale(1.1);\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .trailer-item { flex: 1 1 100%; max-width: 100%; }\r\n    .v-title { font-size: 22px; }\r\n    .trailer-overlay { opacity: 1 !important; transform: translateY(0) !important; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"trailers-section\">\r\n  <div class=\"trailers-container\">\r\n    <header class=\"trailers-header\">\r\n      <span class=\"section-label\">Cinematic Series<\/span>\r\n      <h2 class=\"section-title\">Visual <span>Book Trailers<\/span><\/h2>\r\n    <\/header>\r\n\r\n    <div class=\"trailers-grid\">\r\n      \r\n      <!-- Video 1 -->\r\n      \r\n      <div class=\"trailer-item is-playing\" onclick=\"handleVideoToggle(this)\">\r\n        <video muted loop playsinline autoplay>\r\n          <source src=\"https:\/\/demowebdesign.live\/petricia\/wp-content\/uploads\/2026\/04\/Patricia-Book-1-VBT-1.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <div class=\"play-indicator\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div>\r\n        <div class=\"trailer-overlay\">\r\n          <span class=\"v-tag\" style=\"color:#e74c3c\">Grief & Trust<\/span>\r\n          <h3 class=\"v-title\">When the Heart Shatters<\/h3>\r\n          <!--<p class=\"v-desc\">A cinematic reckoning with loss, breath, and the fragile road to healing after the storm.<\/p>-->\r\n        <\/div>\r\n      <\/div>\r\n      \r\n    \r\n      \r\n      <div class=\"trailer-item is-playing\" onclick=\"handleVideoToggle(this)\">\r\n        <video muted loop playsinline autoplay>\r\n          <source src=\"https:\/\/demowebdesign.live\/petricia\/wp-content\/uploads\/2026\/04\/Patricia-Morgan-Book-2-VBT.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <div class=\"play-indicator\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div>\r\n        <div class=\"trailer-overlay\">\r\n          <span class=\"v-tag\">Resilience<\/span>\r\n          <h3 class=\"v-title\">The Sky Is Green, The Ocean Is Blue<\/h3>\r\n          <!--<p class=\"v-desc\">Finding calm when life is out of control. A gentle guide for those learning to breathe again.<\/p>-->\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Video 3 -->\r\n      <div class=\"trailer-item is-playing\" onclick=\"handleVideoToggle(this)\">\r\n        <video muted loop playsinline autoplay>\r\n          <source src=\"https:\/\/demowebdesign.live\/petricia\/wp-content\/uploads\/2026\/04\/Patricia-Morgan-Book-3-VBT.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <div class=\"play-indicator\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div>\r\n        <div class=\"trailer-overlay\">\r\n          <span class=\"v-tag\" style=\"color:#5ba8e0\">Letting Go<\/span>\r\n          <h3 class=\"v-title\">Grace in the Skies<\/h3>\r\n          <!--<p class=\"v-desc\">A soaring meditation on surrender, grace, and the freedom found above the clouds.<\/p>-->\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  function handleVideoToggle(container) {\r\n    const video = container.querySelector('video');\r\n    const playBtn = container.querySelector('.play-indicator');\r\n    \r\n    if (video.paused) {\r\n      video.play();\r\n      container.classList.remove('is-paused');\r\n      container.classList.add('is-playing');\r\n      playBtn.innerHTML = '<svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>';\r\n    } else {\r\n      video.pause();\r\n      container.classList.add('is-paused');\r\n      container.classList.remove('is-playing');\r\n      playBtn.innerHTML = '<svg viewBox=\"0 0 24 24\"><path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\"\/><\/svg>';\r\n    }\r\n  }\r\n\r\n  \/\/ Automatic cleanup when video ends (if not looping)\r\n  document.querySelectorAll('video').forEach(video => {\r\n    video.addEventListener('ended', () => {\r\n      const container = video.closest('.trailer-item');\r\n      container.classList.remove('is-playing');\r\n      container.classList.add('is-paused');\r\n    });\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>Gallery &#038; Video Moments Moments Captured Beyond The Words Explore a visual journey through Patricia Morgan\u2019s world \u2014 from behind-the-scenes glimpses and book events to meaningful moments captured on camera. This collection of photos and videos brings you closer to the experiences, emotions, and stories that shape her work. See the stories, feel the moments, [&hellip;]<\/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":"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":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","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":"","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-833","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/petricia\/wp-json\/wp\/v2\/pages\/833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/petricia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/petricia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/petricia\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/petricia\/wp-json\/wp\/v2\/comments?post=833"}],"version-history":[{"count":19,"href":"https:\/\/demowebdesign.live\/petricia\/wp-json\/wp\/v2\/pages\/833\/revisions"}],"predecessor-version":[{"id":1121,"href":"https:\/\/demowebdesign.live\/petricia\/wp-json\/wp\/v2\/pages\/833\/revisions\/1121"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/petricia\/wp-json\/wp\/v2\/media?parent=833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}