{"id":8454,"date":"2026-10-01T12:19:54","date_gmt":"2026-10-01T09:19:54","guid":{"rendered":"https:\/\/personage.sa\/?page_id=8454"},"modified":"2026-10-01T12:39:56","modified_gmt":"2026-10-01T09:39:56","slug":"coming-soon","status":"publish","type":"page","link":"https:\/\/personage.sa\/ar\/coming-soon\/","title":{"rendered":"Coming Soon"},"content":{"rendered":"<style>\n\/* ==========================================================\n   PERSONAGE \u2014 WE'LL BE RIGHT BACK\n   FULLSCREEN TAKEOVER\n   ========================================================== *\/<\/p>\n<p>html,\nbody {\n  margin: 0 !important;\n  padding: 0 !important;<\/p>\n<p>  width: 100% !important;\n  height: 100% !important;<\/p>\n<p>  overflow: hidden !important;\n  overscroll-behavior: none !important;<\/p>\n<p>  background: #000 !important;\n}<\/p>\n<p>body.elementor-page {\n  overflow: hidden !important;\n}<\/p>\n<p>\/* ==========================================================\n   MAIN TAKEOVER\n   ========================================================== *\/<\/p>\n<p>.personage-coming {\n  position: fixed !important;<\/p>\n<p>  inset: 0 !important;<\/p>\n<p>  width: 100vw !important;<\/p>\n<p>  height: 100vh !important;\n  height: 100dvh !important;<\/p>\n<p>  min-height: 100dvh !important;\n  max-height: 100dvh !important;<\/p>\n<p>  z-index: 2147483647 !important;<\/p>\n<p>  margin: 0 !important;\n  padding: 0 !important;<\/p>\n<p>  overflow: hidden !important;<\/p>\n<p>  background: #000;\n  color: #fff;<\/p>\n<p>  isolation: isolate;<\/p>\n<p>  font-family:\n    var(--e-global-typography-text-font-family),\n    inherit;\n}<\/p>\n<p>\/* ==========================================================\n   FRAME\n   ========================================================== *\/<\/p>\n<p>.personage-coming__frame {\n  position: relative;\n  z-index: 2;<\/p>\n<p>  width: 100%;\n  height: 100%;<\/p>\n<p>  padding:\n    max(40px, env(safe-area-inset-top))\n    40px\n    max(40px, env(safe-area-inset-bottom));<\/p>\n<p>  display: grid;<\/p>\n<p>  grid-template-columns:\n    minmax(0, 1fr)\n    auto;<\/p>\n<p>  grid-template-rows:\n    auto\n    minmax(0, 1fr)\n    auto;<\/p>\n<p>  box-sizing: border-box;\n}<\/p>\n<p>\/* ==========================================================\n   PERSONAGE LOGO\n   ========================================================== *\/<\/p>\n<p>.personage-coming__logo {\n  grid-column: 1;\n  grid-row: 1;<\/p>\n<p>  align-self: start;\n  justify-self: start;<\/p>\n<p>  display: block;<\/p>\n<p>  width: 26px;\n  height: auto;<\/p>\n<p>  margin: 0;\n}<\/p>\n<p>.personage-coming__logo img {\n  display: block;<\/p>\n<p>  width: 100%;\n  height: auto;<\/p>\n<p>  object-fit: contain;\n}<\/p>\n<p>\/* ==========================================================\n   TOP RIGHT\n   ========================================================== *\/<\/p>\n<p>.personage-coming__location {\n  grid-column: 2;\n  grid-row: 1;<\/p>\n<p>  align-self: start;\n  justify-self: end;<\/p>\n<p>  margin: 0;<\/p>\n<p>  color: rgba(255,255,255,.65);<\/p>\n<p>  font-size: 9px;\n  font-weight: 500;<\/p>\n<p>  line-height: 1;<\/p>\n<p>  letter-spacing: .08em;<\/p>\n<p>  text-transform: uppercase;<\/p>\n<p>  white-space: nowrap;\n}<\/p>\n<p>\/* ==========================================================\n   CENTER\n   ========================================================== *\/<\/p>\n<p>.personage-coming__center {\n  grid-column: 1 \/ -1;\n  grid-row: 2;<\/p>\n<p>  align-self: center;\n  justify-self: stretch;<\/p>\n<p>  width: 100%;<\/p>\n<p>  text-align: left;\n}<\/p>\n<p>\/* ==========================================================\n   MAIN TITLE\n   ========================================================== *\/<\/p>\n<p>.personage-coming__title {\n  display: block;<\/p>\n<p>  width: 100%;<\/p>\n<p>  margin: 0 !important;\n  padding: 0 !important;<\/p>\n<p>  text-align: left !important;<\/p>\n<p>  font-family:\n    var(--e-global-typography-primary-font-family),\n    inherit;<\/p>\n<p>  \/*\n   Slightly smaller so both lines stay clean\n   and fit comfortably.\n  *\/\n  font-size: clamp(66px, 9.4vw, 178px);<\/p>\n<p>  font-weight: 500;<\/p>\n<p>  line-height: .86;<\/p>\n<p>  letter-spacing: -.072em;<\/p>\n<p>  text-transform: uppercase;<\/p>\n<p>  color: #fff;<\/p>\n<p>  overflow: visible !important;\n}<\/p>\n<p>.personage-coming__line {\n  display: block;<\/p>\n<p>  width: 100%;<\/p>\n<p>  margin: 0 !important;\n  padding: 0 !important;<\/p>\n<p>  text-align: left !important;<\/p>\n<p>  overflow: visible !important;<\/p>\n<p>  white-space: nowrap !important;\n}<\/p>\n<p>.personage-coming__line-inner {\n  display: block;<\/p>\n<p>  width: max-content;\n  max-width: 100%;<\/p>\n<p>  margin: 0 !important;\n  padding: 0 !important;<\/p>\n<p>  text-align: left !important;<\/p>\n<p>  white-space: nowrap !important;<\/p>\n<p>  opacity: 0;<\/p>\n<p>  transform: translateY(35px);<\/p>\n<p>  animation:\n    personageTitleReveal\n    1.15s\n    cubic-bezier(.16,1,.3,1)\n    forwards;\n}<\/p>\n<p>.personage-coming__line:nth-child(1)\n.personage-coming__line-inner {\n  animation-delay: .08s;\n}<\/p>\n<p>.personage-coming__line:nth-child(2)\n.personage-coming__line-inner {\n  animation-delay: .19s;\n}<\/p>\n<p>\/* ==========================================================\n   BOTTOM LEFT\n   ========================================================== *\/<\/p>\n<p>.personage-coming__bottom-left {\n  grid-column: 1;\n  grid-row: 3;<\/p>\n<p>  justify-self: start;\n  align-self: end;<\/p>\n<p>  min-width: 0;\n}<\/p>\n<p>.personage-coming__status {\n  display: flex;<\/p>\n<p>  align-items: center;<\/p>\n<p>  gap: 10px;<\/p>\n<p>  margin: 0;<\/p>\n<p>  color: #fff;<\/p>\n<p>  font-size: 9px;\n  font-weight: 500;<\/p>\n<p>  line-height: 1;<\/p>\n<p>  letter-spacing: .09em;<\/p>\n<p>  text-transform: uppercase;<\/p>\n<p>  white-space: nowrap;\n}<\/p>\n<p>\/* ==========================================================\n   RED PULSATING DOT\n   ========================================================== *\/<\/p>\n<p>.personage-coming__dot {\n  position: relative;<\/p>\n<p>  display: block;<\/p>\n<p>  width: 7px;\n  height: 7px;<\/p>\n<p>  flex: 0 0 7px;<\/p>\n<p>  border-radius: 50%;<\/p>\n<p>  background: #ff1f1f;<\/p>\n<p>  box-shadow:\n    0 0 8px rgba(255,31,31,.65);<\/p>\n<p>  animation:\n    personagePulse\n    1.6s\n    ease-in-out\n    infinite;\n}<\/p>\n<p>.personage-coming__dot::after {\n  content: \"\";<\/p>\n<p>  position: absolute;<\/p>\n<p>  top: 50%;\n  left: 50%;<\/p>\n<p>  width: 7px;\n  height: 7px;<\/p>\n<p>  border-radius: 50%;<\/p>\n<p>  border: 1px solid rgba(255,31,31,.7);<\/p>\n<p>  transform:\n    translate(-50%, -50%)\n    scale(1);<\/p>\n<p>  opacity: 1;<\/p>\n<p>  animation:\n    personagePulseRing\n    1.6s\n    ease-out\n    infinite;\n}<\/p>\n<p>\/* ==========================================================\n   BOTTOM RIGHT\n   ========================================================== *\/<\/p>\n<p>.personage-coming__bottom-right {\n  grid-column: 2;\n  grid-row: 3;<\/p>\n<p>  justify-self: end;\n  align-self: end;<\/p>\n<p>  text-align: right;<\/p>\n<p>  min-width: 0;\n}<\/p>\n<p>.personage-coming__copyright {\n  margin: 0;<\/p>\n<p>  color: rgba(255,255,255,.62);<\/p>\n<p>  font-size: 9px;\n  font-weight: 500;<\/p>\n<p>  line-height: 1;<\/p>\n<p>  letter-spacing: .07em;<\/p>\n<p>  text-transform: uppercase;<\/p>\n<p>  white-space: nowrap;\n}<\/p>\n<p>\/* ==========================================================\n   BOTTOM RULE\n   ========================================================== *\/<\/p>\n<p>.personage-coming__rule {\n  position: absolute;<\/p>\n<p>  left: 40px;\n  right: 40px;<\/p>\n<p>  bottom: 72px;<\/p>\n<p>  height: 1px;<\/p>\n<p>  background: rgba(255,255,255,.18);<\/p>\n<p>  transform: scaleX(0);<\/p>\n<p>  transform-origin: left center;<\/p>\n<p>  animation:\n    personageRule\n    1.3s\n    cubic-bezier(.16,1,.3,1)\n    .42s\n    forwards;\n}<\/p>\n<p>\/* ==========================================================\n   ANIMATIONS\n   ========================================================== *\/<\/p>\n<p>@keyframes personageTitleReveal {<\/p>\n<p>  from {\n    opacity: 0;\n    transform: translateY(35px);\n  }<\/p>\n<p>  to {\n    opacity: 1;\n    transform: translateY(0);\n  }<\/p>\n<p>}<\/p>\n<p>@keyframes personageRule {<\/p>\n<p>  from {\n    transform: scaleX(0);\n  }<\/p>\n<p>  to {\n    transform: scaleX(1);\n  }<\/p>\n<p>}<\/p>\n<p>@keyframes personagePulse {<\/p>\n<p>  0%,\n  100% {\n    opacity: .55;\n    transform: scale(.8);<\/p>\n<p>    box-shadow:\n      0 0 4px rgba(255,31,31,.3);\n  }<\/p>\n<p>  50% {\n    opacity: 1;\n    transform: scale(1);<\/p>\n<p>    box-shadow:\n      0 0 14px rgba(255,31,31,.95);\n  }<\/p>\n<p>}<\/p>\n<p>@keyframes personagePulseRing {<\/p>\n<p>  0% {\n    opacity: .85;<\/p>\n<p>    transform:\n      translate(-50%, -50%)\n      scale(1);\n  }<\/p>\n<p>  70%,\n  100% {\n    opacity: 0;<\/p>\n<p>    transform:\n      translate(-50%, -50%)\n      scale(2.8);\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   TABLET\n   ========================================================== *\/<\/p>\n<p>@media (max-width: 1024px) {<\/p>\n<p>  .personage-coming__frame {\n    padding:\n      max(32px, env(safe-area-inset-top))\n      32px\n      max(32px, env(safe-area-inset-bottom));\n  }<\/p>\n<p>  .personage-coming__logo {\n    width: 24px;\n  }<\/p>\n<p>  .personage-coming__rule {\n    left: 32px;\n    right: 32px;<\/p>\n<p>    bottom: 62px;\n  }<\/p>\n<p>  .personage-coming__title {\n    font-size: clamp(\n      58px,\n      11vw,\n      125px\n    );\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width: 767px) {<\/p>\n<p>  html,\n  body {\n    width: 100% !important;\n    height: 100% !important;<\/p>\n<p>    overflow: hidden !important;\n  }<\/p>\n<p>  .personage-coming {\n    position: fixed !important;<\/p>\n<p>    inset: 0 !important;<\/p>\n<p>    width: 100vw !important;<\/p>\n<p>    height: 100dvh !important;\n    min-height: 100dvh !important;\n    max-height: 100dvh !important;<\/p>\n<p>    overflow: hidden !important;\n  }<\/p>\n<p>  .personage-coming__frame {\n    width: 100%;\n    height: 100%;<\/p>\n<p>    min-height: 0;<\/p>\n<p>    padding:\n      max(28px, env(safe-area-inset-top))\n      28px\n      max(28px, env(safe-area-inset-bottom));<\/p>\n<p>    grid-template-columns:\n      minmax(0, 1fr)\n      auto;<\/p>\n<p>    grid-template-rows:\n      auto\n      minmax(0, 1fr)\n      auto;<\/p>\n<p>    overflow: hidden;\n  }<\/p>\n<p>  .personage-coming__logo {\n    width: 22px;\n  }<\/p>\n<p>  .personage-coming__location {\n    font-size: 7px;<\/p>\n<p>    letter-spacing: .06em;\n  }<\/p>\n<p>  .personage-coming__center {\n    align-self: center;<\/p>\n<p>    width: 100%;<\/p>\n<p>    transform: none;<\/p>\n<p>    padding: 8px 0;\n  }<\/p>\n<p>  .personage-coming__title {\n    width: 100%;<\/p>\n<p>    \/*\n     Reduced so RIGHT BACK fits comfortably\n     on one line on mobile.\n    *\/\n    font-size: clamp(\n      42px,\n      13.5vw,\n      70px\n    );<\/p>\n<p>    line-height: .9;<\/p>\n<p>    letter-spacing: -.06em;<\/p>\n<p>    text-align: left !important;\n  }<\/p>\n<p>  .personage-coming__line,\n  .personage-coming__line-inner {\n    padding-left: 0 !important;<\/p>\n<p>    text-align: left !important;<\/p>\n<p>    white-space: nowrap !important;\n  }<\/p>\n<p>  .personage-coming__status {\n    font-size: 7px;<\/p>\n<p>    letter-spacing: .055em;<\/p>\n<p>    gap: 8px;\n  }<\/p>\n<p>  .personage-coming__dot {\n    width: 6px;\n    height: 6px;<\/p>\n<p>    flex-basis: 6px;\n  }<\/p>\n<p>  .personage-coming__dot::after {\n    width: 6px;\n    height: 6px;\n  }<\/p>\n<p>  .personage-coming__copyright {\n    font-size: 6px;<\/p>\n<p>    letter-spacing: .02em;<\/p>\n<p>    white-space: nowrap;\n  }<\/p>\n<p>  .personage-coming__rule {\n    left: 28px;\n    right: 28px;<\/p>\n<p>    bottom:\n      calc(\n        max(28px, env(safe-area-inset-bottom))\n        + 30px\n      );\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width: 430px) {<\/p>\n<p>  .personage-coming__frame {\n    padding:\n      max(24px, env(safe-area-inset-top))\n      24px\n      max(24px, env(safe-area-inset-bottom));\n  }<\/p>\n<p>  .personage-coming__logo {\n    width: 20px;\n  }<\/p>\n<p>  .personage-coming__title {\n    font-size: 12.8vw;\n  }<\/p>\n<p>  .personage-coming__copyright {\n    font-size: 5.6px;<\/p>\n<p>    letter-spacing: 0;\n  }<\/p>\n<p>  .personage-coming__status {\n    font-size: 6.3px;\n  }<\/p>\n<p>  .personage-coming__rule {\n    left: 24px;\n    right: 24px;<\/p>\n<p>    bottom:\n      calc(\n        max(24px, env(safe-area-inset-bottom))\n        + 28px\n      );\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   VERY SMALL MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width: 360px) {<\/p>\n<p>  .personage-coming__frame {\n    padding-left: 20px;\n    padding-right: 20px;\n  }<\/p>\n<p>  .personage-coming__title {\n    font-size: 12.2vw;<\/p>\n<p>    letter-spacing: -.055em;\n  }<\/p>\n<p>  .personage-coming__copyright {\n    font-size: 5px;\n  }<\/p>\n<p>  .personage-coming__rule {\n    left: 20px;\n    right: 20px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   SHORT MOBILE SCREENS\n   ========================================================== *\/<\/p>\n<p>@media (max-height: 700px) and (max-width: 767px) {<\/p>\n<p>  .personage-coming__frame {\n    padding-top:\n      max(20px, env(safe-area-inset-top));<\/p>\n<p>    padding-bottom:\n      max(20px, env(safe-area-inset-bottom));\n  }<\/p>\n<p>  .personage-coming__title {\n    font-size: min(\n      12.5vw,\n      62px\n    );<\/p>\n<p>    line-height: .89;\n  }<\/p>\n<p>  .personage-coming__rule {\n    bottom:\n      calc(\n        max(20px, env(safe-area-inset-bottom))\n        + 26px\n      );\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   VERY SHORT SCREENS\n   ========================================================== *\/<\/p>\n<p>@media (max-height: 580px) {<\/p>\n<p>  .personage-coming__title {\n    font-size: min(\n      11vh,\n      76px\n    );\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion: reduce) {<\/p>\n<p>  .personage-coming *,\n  .personage-coming *::before,\n  .personage-coming *::after {\n    animation-duration: .01ms !important;\n    animation-iteration-count: 1 !important;\n    animation-delay: 0ms !important;\n  }<\/p>\n<p>}\n<\/style>\n<div class=\"personage-coming\">\n<div class=\"personage-coming__frame\">\n<p>    <!-- PERSONAGE LOGO --><\/p>\n<div class=\"personage-coming__logo\">\n<p>      <img decoding=\"async\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/06\/Personage-Icon-in-White.svg\"\n        alt=\"Personage\"\n      ><\/p><\/div>\n<p>    <!-- TOP RIGHT --><\/p>\n<div class=\"personage-coming__location\">\n      RIYADH, SAUDI ARABIA\n    <\/div>\n<p>    <!-- MAIN --><\/p>\n<p>    <main class=\"personage-coming__center\"><\/p>\n<h1 class=\"personage-coming__title\">\n<p>        <span class=\"personage-coming__line\"><\/p>\n<p>          <span class=\"personage-coming__line-inner\"><br \/>\n            WE&#8217;LL BE<br \/>\n          <\/span><\/p>\n<p>        <\/span><\/p>\n<p>        <span class=\"personage-coming__line\"><\/p>\n<p>          <span class=\"personage-coming__line-inner\"><br \/>\n            RIGHT BACK<br \/>\n          <\/span><\/p>\n<p>        <\/span><\/p>\n<\/h1>\n<p>    <\/main><\/p>\n<p>    <!-- BOTTOM LEFT --><\/p>\n<div class=\"personage-coming__bottom-left\">\n<div class=\"personage-coming__status\">\n<p>        <span class=\"personage-coming__dot\"><\/span><\/p>\n<p>        <span><br \/>\n          BACK SHORTLY<br \/>\n        <\/span><\/p><\/div>\n<\/p><\/div>\n<p>    <!-- BOTTOM RIGHT --><\/p>\n<div class=\"personage-coming__bottom-right\">\n<p class=\"personage-coming__copyright\">\n        \u00a9 2026 PERSONAGE \u00b7 POWERED BY MONARQ\n      <\/p>\n<\/p><\/div>\n<p>    <!-- DIVIDER --><\/p>\n<div class=\"personage-coming__rule\"><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n(function () {<\/p>\n<p>  const html = document.documentElement;\n  const body = document.body;<\/p>\n<p>  \/* ========================================================\n     LOCK WEBSITE\n     ======================================================== *\/<\/p>\n<p>  html.style.setProperty(\n    \"overflow\",\n    \"hidden\",\n    \"important\"\n  );<\/p>\n<p>  body.style.setProperty(\n    \"overflow\",\n    \"hidden\",\n    \"important\"\n  );<\/p>\n<p>  html.style.setProperty(\n    \"height\",\n    \"100%\",\n    \"important\"\n  );<\/p>\n<p>  body.style.setProperty(\n    \"height\",\n    \"100%\",\n    \"important\"\n  );<\/p>\n<p>  html.style.setProperty(\n    \"background\",\n    \"#000\",\n    \"important\"\n  );<\/p>\n<p>  body.style.setProperty(\n    \"background\",\n    \"#000\",\n    \"important\"\n  );<\/p>\n<p>  \/* ========================================================\n     PREVENT MOUSE \/ TRACKPAD SCROLL\n     ======================================================== *\/<\/p>\n<p>  window.addEventListener(\n    \"wheel\",\n    function (event) {<\/p>\n<p>      event.preventDefault();<\/p>\n<p>    },\n    {\n      passive: false\n    }\n  );<\/p>\n<p>  \/* ========================================================\n     PREVENT TOUCH SCROLL\n     ======================================================== *\/<\/p>\n<p>  window.addEventListener(\n    \"touchmove\",\n    function (event) {<\/p>\n<p>      event.preventDefault();<\/p>\n<p>    },\n    {\n      passive: false\n    }\n  );<\/p>\n<p>  \/* ========================================================\n     PREVENT KEYBOARD SCROLL\n     ======================================================== *\/<\/p>\n<p>  window.addEventListener(\n    \"keydown\",\n    function (event) {<\/p>\n<p>      const blockedKeys = [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"PageUp\",\n        \"PageDown\",\n        \"Home\",\n        \"End\",\n        \" \"\n      ];<\/p>\n<p>      if (\n        blockedKeys.includes(event.key)\n      ) {<\/p>\n<p>        event.preventDefault();<\/p>\n<p>      }<\/p>\n<p>    }\n  );<\/p>\n<p>})();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>RIYADH, SAUDI ARABIA WE&#8217;LL BE RIGHT BACK BACK SHORTLY \u00a9 2026 PERSONAGE \u00b7 POWERED BY MONARQ<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8454","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/8454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/comments?post=8454"}],"version-history":[{"count":11,"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/8454\/revisions"}],"predecessor-version":[{"id":8468,"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/8454\/revisions\/8468"}],"wp:attachment":[{"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/media?parent=8454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}