{"id":2823,"date":"2026-05-30T23:43:08","date_gmt":"2026-05-30T23:43:08","guid":{"rendered":"https:\/\/nadersaied.com\/?page_id=2823"},"modified":"2026-06-30T20:11:55","modified_gmt":"2026-06-30T20:11:55","slug":"morivie","status":"publish","type":"page","link":"https:\/\/nadersaied.com\/ar\/morivie\/","title":{"rendered":"MORIVIE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2823\" class=\"elementor elementor-2823\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d769f5 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"1d769f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b5b3d5 elementor-widget elementor-widget-html\" data-id=\"0b5b3d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- MORIVIE Case Study - Light Mobile Fixed Version | by Nader Saied -->\n<section class=\"ns-morivie-lite\" id=\"nsMorivieLite\">\n  <div class=\"ns-ml-soft-bg\"><\/div>\n\n  <div class=\"ns-ml-container\">\n    <header class=\"ns-ml-hero\">\n      <div class=\"ns-ml-hero-copy\">\n        <span class=\"ns-ml-kicker\">BRAND CASE STUDY<\/span>\n        <h1>MORIVIE<br><strong>Cosmetics Brand<\/strong><\/h1>\n        <p>\n          A clean beauty case study built for fast loading, clear mobile viewing, and premium presentation.\n          The page focuses on product visuals, campaign direction, packaging mood, and social media creative work.\n        <\/p>\n\n        <div class=\"ns-ml-tags\" aria-label=\"Project tags\">\n          <span>Brand Identity<\/span>\n          <span>Cosmetics<\/span>\n          <span>Product Visuals<\/span>\n          <span>Social Media<\/span>\n        <\/div>\n\n        <div class=\"ns-ml-actions\">\n          <a href=\"#morivieGalleryLite\" class=\"ns-ml-primary\">View Gallery<\/a>\n          <a href=\"https:\/\/nadersaied.com\/contact\/\" class=\"ns-ml-secondary\">Start Similar Project<\/a>\n        <\/div>\n      <\/div>\n\n      <button class=\"ns-ml-hero-image ns-ml-open-hero\" type=\"button\" aria-label=\"Open MORIVIE hero image\">\n        <img\n          src=\"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-May-31-2026-03_22_30-PM.png\"\n          alt=\"MORIVIE brand presentation\"\n          loading=\"eager\"\n          decoding=\"async\">\n        <span>Open Preview<\/span>\n      <\/button>\n    <\/header>\n\n    <section class=\"ns-ml-overview\" aria-label=\"Project overview\">\n      <article>\n        <span>01<\/span>\n        <h2>Soft Premium Direction<\/h2>\n        <p>Rose, cream, beauty lighting, clean product framing, and elegant campaign layouts.<\/p>\n      <\/article>\n\n      <article>\n        <span>02<\/span>\n        <h2>Campaign Ready<\/h2>\n        <p>Visuals prepared for product launches, skincare communication, and social media presentation.<\/p>\n      <\/article>\n\n      <article>\n        <span>03<\/span>\n        <h2>Fast Mobile Page<\/h2>\n        <p>The gallery loads in batches, with no heavy duplicated preview areas or unnecessary logo card.<\/p>\n      <\/article>\n    <\/section>\n\n    <section class=\"ns-ml-section-head\" id=\"morivieGalleryLite\">\n      <span>PROJECT GALLERY<\/span>\n      <h2>Selected MORIVIE Visuals<\/h2>\n      <p>Logo image removed from the gallery. Tap any design to open it, use arrows to browse, and close with the clear \u00d7 button.<\/p>\n    <\/section>\n\n    <div class=\"ns-ml-toolbar\" aria-label=\"Gallery controls\">\n      <div class=\"ns-ml-filters\" id=\"nsMlFilters\">\n        <button type=\"button\" class=\"active\" data-filter=\"all\">All<\/button>\n        <button type=\"button\" data-filter=\"brand\">Brand<\/button>\n        <button type=\"button\" data-filter=\"product\">Product<\/button>\n        <button type=\"button\" data-filter=\"campaign\">Campaigns<\/button>\n        <button type=\"button\" data-filter=\"social\">Social<\/button>\n      <\/div>\n\n      <label class=\"ns-ml-search\">\n        <span>Search<\/span>\n        <input type=\"search\" id=\"nsMlSearch\" placeholder=\"Search visuals...\">\n      <\/label>\n    <\/div>\n\n    <div class=\"ns-ml-gallery\" id=\"nsMlGallery\" aria-live=\"polite\"><\/div>\n\n    <div class=\"ns-ml-load-wrap\">\n      <button type=\"button\" class=\"ns-ml-load-more\" id=\"nsMlLoadMore\">Load More<\/button>\n    <\/div>\n\n    <section class=\"ns-ml-result\">\n      <div>\n        <span>RESULT<\/span>\n        <h2>A cleaner beauty brand experience.<\/h2>\n        <p>\n          The page now presents MORIVIE through a lighter, clearer structure that works better on mobile,\n          with faster gallery loading and easier browsing.\n        <\/p>\n      <\/div>\n\n      <a href=\"https:\/\/nadersaied.com\/contact\/\">Start a Project<\/a>\n    <\/section>\n  <\/div>\n<\/section>\n\n<div class=\"ns-ml-lightbox\" id=\"nsMlLightbox\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Image preview\">\n  <button type=\"button\" class=\"ns-ml-close\" id=\"nsMlClose\" aria-label=\"Close image preview\">\u00d7<\/button>\n\n  <button type=\"button\" class=\"ns-ml-nav ns-ml-prev\" id=\"nsMlPrev\" aria-label=\"Previous image\">\u2039<\/button>\n\n  <div class=\"ns-ml-lightbox-stage\">\n    <img decoding=\"async\" id=\"nsMlLightboxImg\" src=\"\" alt=\"\">\n    <div class=\"ns-ml-lightbox-caption\">\n      <strong id=\"nsMlLightboxTitle\">MORIVIE Visual<\/strong>\n      <span id=\"nsMlLightboxCounter\">01 \/ 01<\/span>\n    <\/div>\n  <\/div>\n\n  <button type=\"button\" class=\"ns-ml-nav ns-ml-next\" id=\"nsMlNext\" aria-label=\"Next image\">\u203a<\/button>\n<\/div>\n\n<style>\n.ns-morivie-lite,\n.ns-morivie-lite *,\n.ns-morivie-lite *::before,\n.ns-morivie-lite *::after,\n.ns-ml-lightbox,\n.ns-ml-lightbox *,\n.ns-ml-lightbox *::before,\n.ns-ml-lightbox *::after {\n  box-sizing: border-box;\n}\n\n.ns-morivie-lite {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  padding: 88px 5% 92px;\n  background:\n    radial-gradient(circle at 10% 10%, rgba(240, 170, 190, .38), transparent 30%),\n    radial-gradient(circle at 92% 22%, rgba(160, 218, 232, .34), transparent 28%),\n    linear-gradient(135deg, #fff8f6 0%, #fff 42%, #f4fbff 100%);\n  color: #2e1822;\n  font-family: Inter, Poppins, Arial, sans-serif;\n}\n\n.ns-ml-soft-bg {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n  background-image:\n    linear-gradient(rgba(128, 48, 77, .045) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(128, 48, 77, .045) 1px, transparent 1px);\n  background-size: 42px 42px;\n  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 82%);\n}\n\n.ns-ml-container {\n  position: relative;\n  z-index: 1;\n  width: min(1320px, 100%);\n  margin: 0 auto;\n}\n\n.ns-ml-hero {\n  display: grid;\n  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);\n  align-items: center;\n  gap: 46px;\n  margin-bottom: 34px;\n}\n\n.ns-ml-kicker,\n.ns-ml-section-head span,\n.ns-ml-result span {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 14px;\n  color: #b94f74;\n  font-size: 12px;\n  line-height: 1;\n  font-weight: 900;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n}\n\n.ns-ml-kicker::before {\n  content: \"\";\n  width: 42px;\n  height: 1px;\n  background: linear-gradient(90deg, #b94f74, #9bd6e7);\n}\n\n.ns-ml-hero h1 {\n  margin: 0 0 18px;\n  color: #2e1822;\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: clamp(48px, 7vw, 92px);\n  line-height: .95;\n  letter-spacing: -2.8px;\n}\n\n.ns-ml-hero h1 strong {\n  color: #b94f74;\n}\n\n.ns-ml-hero p,\n.ns-ml-section-head p,\n.ns-ml-overview p,\n.ns-ml-result p {\n  margin: 0;\n  color: rgba(46, 24, 34, .72);\n  font-size: 16px;\n  line-height: 1.78;\n}\n\n.ns-ml-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-top: 24px;\n}\n\n.ns-ml-tags span {\n  padding: 10px 13px;\n  border-radius: 999px;\n  background: rgba(255,255,255,.74);\n  border: 1px solid rgba(185,79,116,.16);\n  box-shadow: 0 10px 30px rgba(75, 32, 47, .06);\n  color: #80304d;\n  font-size: 11px;\n  font-weight: 850;\n  text-transform: uppercase;\n  letter-spacing: .6px;\n}\n\n.ns-ml-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 13px;\n  margin-top: 28px;\n}\n\n.ns-ml-primary,\n.ns-ml-secondary,\n.ns-ml-result a {\n  min-height: 54px;\n  padding: 0 24px;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  font-size: 14px;\n  font-weight: 900;\n  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;\n}\n\n.ns-ml-primary,\n.ns-ml-result a {\n  background: linear-gradient(135deg, #b94f74, #e89ab6);\n  color: #fff;\n  box-shadow: 0 18px 38px rgba(185, 79, 116, .24);\n}\n\n.ns-ml-secondary {\n  background: rgba(255,255,255,.76);\n  border: 1px solid rgba(185,79,116,.20);\n  color: #80304d;\n}\n\n.ns-ml-primary:hover,\n.ns-ml-secondary:hover,\n.ns-ml-result a:hover {\n  transform: translateY(-3px);\n}\n\n.ns-ml-hero-image {\n  position: relative;\n  min-height: 520px;\n  padding: 14px;\n  border: 1px solid rgba(185,79,116,.16);\n  border-radius: 34px;\n  background:\n    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.48)),\n    radial-gradient(circle at 20% 0%, rgba(232,154,182,.20), transparent 42%);\n  box-shadow: 0 28px 80px rgba(75, 32, 47, .16);\n  cursor: zoom-in;\n  overflow: hidden;\n}\n\n.ns-ml-hero-image img {\n  width: 100%;\n  height: 100%;\n  max-height: 560px;\n  object-fit: contain;\n  display: block;\n  border-radius: 24px;\n  background: #fff;\n}\n\n.ns-ml-hero-image span {\n  position: absolute;\n  left: 24px;\n  bottom: 24px;\n  padding: 9px 13px;\n  border-radius: 999px;\n  background: rgba(46,24,34,.72);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 900;\n  backdrop-filter: blur(10px);\n}\n\n.ns-ml-overview {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n  margin: 34px 0 78px;\n}\n\n.ns-ml-overview article,\n.ns-ml-gallery-card,\n.ns-ml-result,\n.ns-ml-toolbar {\n  border: 1px solid rgba(185,79,116,.14);\n  background: rgba(255,255,255,.72);\n  box-shadow: 0 20px 54px rgba(75, 32, 47, .08);\n  backdrop-filter: blur(16px);\n}\n\n.ns-ml-overview article {\n  min-height: 190px;\n  padding: 24px;\n  border-radius: 24px;\n}\n\n.ns-ml-overview span {\n  width: 42px;\n  height: 42px;\n  margin-bottom: 20px;\n  border-radius: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: #fff1f6;\n  color: #b94f74;\n  font-size: 13px;\n  font-weight: 950;\n}\n\n.ns-ml-overview h2 {\n  margin: 0 0 10px;\n  color: #2e1822;\n  font-size: 21px;\n  line-height: 1.2;\n  font-weight: 950;\n}\n\n.ns-ml-section-head {\n  max-width: 760px;\n  margin: 0 auto 24px;\n  text-align: center;\n}\n\n.ns-ml-section-head h2 {\n  margin: 0 0 14px;\n  color: #2e1822;\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: clamp(38px, 5.2vw, 68px);\n  line-height: 1;\n  letter-spacing: -1.8px;\n}\n\n.ns-ml-toolbar {\n  position: sticky;\n  top: 12px;\n  z-index: 20;\n  display: grid;\n  grid-template-columns: 1fr 260px;\n  gap: 12px;\n  align-items: center;\n  margin-bottom: 20px;\n  padding: 12px;\n  border-radius: 24px;\n}\n\n.ns-ml-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.ns-ml-filters button,\n.ns-ml-load-more {\n  border: 0;\n  border-radius: 999px;\n  background: rgba(128,48,77,.08);\n  color: #80304d;\n  min-height: 42px;\n  padding: 0 16px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 900;\n  cursor: pointer;\n  transition: .2s ease;\n}\n\n.ns-ml-filters button.active,\n.ns-ml-filters button:hover,\n.ns-ml-load-more:hover {\n  background: #b94f74;\n  color: #fff;\n}\n\n.ns-ml-search {\n  min-height: 44px;\n  padding: 0 14px;\n  border-radius: 999px;\n  border: 1px solid rgba(185,79,116,.16);\n  background: #fff;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.ns-ml-search span {\n  color: #b94f74;\n  font-size: 11px;\n  font-weight: 950;\n  letter-spacing: 1.2px;\n  text-transform: uppercase;\n}\n\n.ns-ml-search input {\n  width: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  color: #2e1822;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.ns-ml-gallery {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 18px;\n}\n\n.ns-ml-gallery-card {\n  display: flex;\n  flex-direction: column;\n  gap: 13px;\n  padding: 12px;\n  border-radius: 26px;\n  cursor: pointer;\n  text-align: left;\n  font-family: inherit;\n  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;\n}\n\n.ns-ml-gallery-card:hover {\n  transform: translateY(-5px);\n  border-color: rgba(185,79,116,.34);\n  box-shadow: 0 26px 64px rgba(75, 32, 47, .14);\n}\n\n.ns-ml-gallery-img {\n  aspect-ratio: 1 \/ 1;\n  border-radius: 20px;\n  background:\n    radial-gradient(circle at 50% 20%, rgba(232,154,182,.16), transparent 36%),\n    #fff;\n  border: 1px solid rgba(185,79,116,.12);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ns-ml-gallery-img img {\n  width: 96%;\n  height: 96%;\n  object-fit: contain;\n  display: block;\n  border-radius: 16px;\n}\n\n.ns-ml-gallery-info {\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  align-items: start;\n  padding: 0 4px 4px;\n}\n\n.ns-ml-gallery-info strong {\n  color: #2e1822;\n  font-size: 15px;\n  line-height: 1.25;\n  font-weight: 950;\n}\n\n.ns-ml-gallery-info span {\n  flex: 0 0 auto;\n  padding: 6px 9px;\n  border-radius: 999px;\n  background: #fff1f6;\n  color: #b94f74;\n  font-size: 10px;\n  font-weight: 900;\n  text-transform: uppercase;\n}\n\n.ns-ml-load-wrap {\n  display: flex;\n  justify-content: center;\n  margin: 26px 0 78px;\n}\n\n.ns-ml-load-more {\n  min-width: 180px;\n  background: #2e1822;\n  color: #fff;\n}\n\n.ns-ml-load-more[hidden] {\n  display: none;\n}\n\n.ns-ml-result {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding: 30px;\n  border-radius: 28px;\n}\n\n.ns-ml-result h2 {\n  margin: 0 0 10px;\n  color: #2e1822;\n  font-size: clamp(24px, 3vw, 38px);\n  line-height: 1.15;\n  font-weight: 950;\n}\n\n.ns-ml-result p {\n  max-width: 760px;\n}\n\n\/* Lightbox - high z-index and real text controls, no icon library needed *\/\n.ns-ml-lightbox {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  padding: 22px;\n  background: rgba(20, 10, 15, .92);\n  backdrop-filter: blur(18px);\n  -webkit-backdrop-filter: blur(18px);\n  display: none;\n  align-items: center;\n  justify-content: center;\n}\n\n.ns-ml-lightbox.active {\n  display: flex;\n}\n\n.ns-ml-lightbox-stage {\n  position: relative;\n  width: min(1120px, 92vw);\n  max-height: 92vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n}\n\n.ns-ml-lightbox-stage img {\n  max-width: 100%;\n  max-height: calc(92vh - 70px);\n  object-fit: contain;\n  display: block;\n  border-radius: 22px;\n  background: #fff;\n  box-shadow: 0 30px 100px rgba(0,0,0,.48);\n}\n\n.ns-ml-lightbox-caption {\n  width: min(720px, 100%);\n  min-height: 44px;\n  padding: 10px 14px;\n  border-radius: 999px;\n  background: rgba(255,255,255,.12);\n  border: 1px solid rgba(255,255,255,.16);\n  color: #fff;\n  display: flex;\n  justify-content: space-between;\n  gap: 14px;\n  align-items: center;\n  backdrop-filter: blur(10px);\n}\n\n.ns-ml-lightbox-caption strong {\n  font-size: 13px;\n  line-height: 1.2;\n}\n\n.ns-ml-lightbox-caption span {\n  color: #ffd6e4;\n  font-size: 12px;\n  font-weight: 900;\n  white-space: nowrap;\n}\n\n.ns-ml-close,\n.ns-ml-nav {\n  position: fixed;\n  z-index: 2147483001;\n  border: 1px solid rgba(255,255,255,.24);\n  background: rgba(255,255,255,.14);\n  color: #fff;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: Arial, sans-serif;\n  cursor: pointer;\n  backdrop-filter: blur(14px);\n  transition: transform .18s ease, background .18s ease;\n}\n\n.ns-ml-close {\n  top: max(16px, env(safe-area-inset-top));\n  right: max(16px, env(safe-area-inset-right));\n  width: 54px;\n  height: 54px;\n  border-radius: 50%;\n  font-size: 36px;\n  line-height: 1;\n}\n\n.ns-ml-nav {\n  top: 50%;\n  width: 54px;\n  height: 70px;\n  margin-top: -35px;\n  border-radius: 999px;\n  font-size: 46px;\n  line-height: 1;\n}\n\n.ns-ml-prev {\n  left: max(16px, env(safe-area-inset-left));\n}\n\n.ns-ml-next {\n  right: max(16px, env(safe-area-inset-right));\n}\n\n.ns-ml-close:hover,\n.ns-ml-nav:hover {\n  background: rgba(255,255,255,.25);\n  transform: scale(1.04);\n}\n\n@media (max-width: 1100px) {\n  .ns-ml-hero {\n    grid-template-columns: 1fr;\n  }\n\n  .ns-ml-hero-copy {\n    text-align: center;\n  }\n\n  .ns-ml-kicker,\n  .ns-ml-tags,\n  .ns-ml-actions {\n    justify-content: center;\n  }\n\n  .ns-ml-overview,\n  .ns-ml-gallery {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .ns-ml-toolbar {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 767px) {\n  .ns-morivie-lite {\n    padding: 68px 16px 70px;\n  }\n\n  .ns-ml-hero {\n    gap: 28px;\n    margin-bottom: 24px;\n  }\n\n  .ns-ml-hero h1 {\n    font-size: clamp(42px, 14vw, 58px);\n    letter-spacing: -1.8px;\n  }\n\n  .ns-ml-hero p,\n  .ns-ml-section-head p,\n  .ns-ml-overview p,\n  .ns-ml-result p {\n    font-size: 14px;\n    line-height: 1.75;\n  }\n\n  .ns-ml-actions {\n    display: grid;\n    grid-template-columns: 1fr;\n  }\n\n  .ns-ml-primary,\n  .ns-ml-secondary {\n    width: 100%;\n  }\n\n  .ns-ml-hero-image {\n    min-height: 0;\n    padding: 10px;\n    border-radius: 24px;\n  }\n\n  .ns-ml-hero-image img {\n    max-height: 380px;\n    border-radius: 18px;\n  }\n\n  .ns-ml-hero-image span {\n    left: 16px;\n    bottom: 16px;\n  }\n\n  .ns-ml-overview,\n  .ns-ml-gallery {\n    grid-template-columns: 1fr;\n  }\n\n  .ns-ml-overview {\n    gap: 12px;\n    margin-bottom: 56px;\n  }\n\n  .ns-ml-overview article {\n    min-height: 0;\n    padding: 20px;\n    border-radius: 20px;\n  }\n\n  .ns-ml-section-head {\n    margin-bottom: 18px;\n  }\n\n  .ns-ml-section-head h2 {\n    font-size: 36px;\n  }\n\n  .ns-ml-toolbar {\n    position: static;\n    padding: 10px;\n    border-radius: 20px;\n    margin-bottom: 16px;\n  }\n\n  .ns-ml-filters {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .ns-ml-filters button {\n    width: 100%;\n  }\n\n  .ns-ml-search {\n    border-radius: 16px;\n  }\n\n  .ns-ml-gallery {\n    gap: 14px;\n  }\n\n  .ns-ml-gallery-card {\n    border-radius: 22px;\n  }\n\n  .ns-ml-result {\n    flex-direction: column;\n    text-align: center;\n    padding: 24px 20px;\n  }\n\n  .ns-ml-result a {\n    width: 100%;\n  }\n\n  .ns-ml-lightbox {\n    padding: 12px;\n  }\n\n  .ns-ml-lightbox-stage {\n    width: 100%;\n    max-height: 90vh;\n  }\n\n  .ns-ml-lightbox-stage img {\n    max-height: calc(90vh - 78px);\n    border-radius: 16px;\n  }\n\n  .ns-ml-close {\n    width: 50px;\n    height: 50px;\n    font-size: 34px;\n    background: rgba(185,79,116,.94);\n    border-color: rgba(255,255,255,.38);\n  }\n\n  .ns-ml-nav {\n    top: auto;\n    bottom: max(14px, env(safe-area-inset-bottom));\n    width: 52px;\n    height: 52px;\n    margin-top: 0;\n    background: rgba(255,255,255,.18);\n    font-size: 38px;\n  }\n\n  .ns-ml-prev {\n    left: 16px;\n  }\n\n  .ns-ml-next {\n    right: 16px;\n  }\n\n  .ns-ml-lightbox-caption {\n    width: calc(100% - 120px);\n    min-height: 52px;\n    margin-bottom: 0;\n    border-radius: 16px;\n    flex-direction: column;\n    gap: 4px;\n    text-align: center;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ns-morivie-lite *,\n  .ns-ml-lightbox * {\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  const items = [\n  {\n    \"title\": \"MORIVIE Brand Presentation\",\n    \"type\": \"Brand Identity\",\n    \"filter\": \"brand\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-May-31-2026-03_22_30-PM.png\"\n  },\n  {\n    \"title\": \"Product Visual Direction\",\n    \"type\": \"Product Visuals\",\n    \"filter\": \"product\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-Jun-1-2026-02_50_27-AM.png\"\n  },\n  {\n    \"title\": \"Cosmetics Campaign Visual\",\n    \"type\": \"Campaign Design\",\n    \"filter\": \"campaign\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-Jun-1-2026-02_51_32-AM.png\"\n  },\n  {\n    \"title\": \"Beauty Product Scene\",\n    \"type\": \"Product Scene\",\n    \"filter\": \"product\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-Jun-1-2026-02_55_46-AM.png\"\n  },\n  {\n    \"title\": \"MORIVIE Social Visual\",\n    \"type\": \"Social Media\",\n    \"filter\": \"social\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-1-2026-03_09_21-AM.png\"\n  },\n  {\n    \"title\": \"MORIVIE Product Layout\",\n    \"type\": \"Product Layout\",\n    \"filter\": \"product\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-1-2026-03_15_03-AM.png\"\n  },\n  {\n    \"title\": \"MORIVIE Campaign Post\",\n    \"type\": \"Campaign Post\",\n    \"filter\": \"campaign\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/06\/Morive5.png\"\n  },\n  {\n    \"title\": \"MORIVIE Product Campaign\",\n    \"type\": \"Product Campaign\",\n    \"filter\": \"campaign\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/06\/Morive-22.png\"\n  },\n  {\n    \"title\": \"Sunscreen Product Visual\",\n    \"type\": \"Product Campaign\",\n    \"filter\": \"product\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-10-2026-02_06_57-AM-2.png\"\n  },\n  {\n    \"title\": \"Premium Social Campaign\",\n    \"type\": \"Social Campaign\",\n    \"filter\": \"social\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-15-2026-12_32_13-AM.png\"\n  },\n  {\n    \"title\": \"MORIVIE Social Media Visual\",\n    \"type\": \"Social Media\",\n    \"filter\": \"social\",\n    \"img\": \"https:\/\/nadersaied.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-18-2026-02_02_59-AM.png\"\n  }\n];\n\n  const root = document.getElementById(\"nsMorivieLite\");\n  if (!root) return;\n\n  const gallery = root.querySelector(\"#nsMlGallery\");\n  const filters = root.querySelectorAll(\"#nsMlFilters button\");\n  const search = root.querySelector(\"#nsMlSearch\");\n  const loadMore = root.querySelector(\"#nsMlLoadMore\");\n  const heroOpen = root.querySelector(\".ns-ml-open-hero\");\n\n  const lightbox = document.getElementById(\"nsMlLightbox\");\n  const lightboxImg = document.getElementById(\"nsMlLightboxImg\");\n  const lightboxTitle = document.getElementById(\"nsMlLightboxTitle\");\n  const lightboxCounter = document.getElementById(\"nsMlLightboxCounter\");\n  const closeBtn = document.getElementById(\"nsMlClose\");\n  const prevBtn = document.getElementById(\"nsMlPrev\");\n  const nextBtn = document.getElementById(\"nsMlNext\");\n\n  let activeFilter = \"all\";\n  let activeSearch = \"\";\n  let shownCount = window.matchMedia(\"(max-width: 767px)\").matches ? 6 : 9;\n  let currentVisible = [];\n  let currentIndex = 0;\n  let touchStartX = 0;\n\n  function normalise(text) {\n    return String(text || \"\").toLowerCase().trim();\n  }\n\n  function getFilteredItems() {\n    const query = normalise(activeSearch);\n\n    return items\n      .map(function (item, index) {\n        return Object.assign({ originalIndex: index }, item);\n      })\n      .filter(function (item) {\n        const filterMatch = activeFilter === \"all\" || item.filter === activeFilter;\n        if (!query) return filterMatch;\n\n        const haystack = normalise(item.title + \" \" + item.type + \" \" + item.filter);\n        return filterMatch && haystack.indexOf(query) !== -1;\n      });\n  }\n\n  function clearGallery() {\n    while (gallery.firstChild) gallery.removeChild(gallery.firstChild);\n  }\n\n  function createCard(item, visibleIndex) {\n    const card = document.createElement(\"button\");\n    card.type = \"button\";\n    card.className = \"ns-ml-gallery-card\";\n    card.setAttribute(\"aria-label\", \"Open \" + item.title);\n\n    const media = document.createElement(\"div\");\n    media.className = \"ns-ml-gallery-img\";\n\n    const img = document.createElement(\"img\");\n    img.src = item.img;\n    img.alt = item.title;\n    img.loading = visibleIndex < 2 ? \"eager\" : \"lazy\";\n    img.decoding = \"async\";\n\n    const info = document.createElement(\"div\");\n    info.className = \"ns-ml-gallery-info\";\n\n    const title = document.createElement(\"strong\");\n    title.textContent = item.title;\n\n    const type = document.createElement(\"span\");\n    type.textContent = item.type;\n\n    media.appendChild(img);\n    info.appendChild(title);\n    info.appendChild(type);\n    card.appendChild(media);\n    card.appendChild(info);\n\n    card.addEventListener(\"click\", function () {\n      openLightbox(visibleIndex);\n    });\n\n    return card;\n  }\n\n  function renderGallery(resetCount) {\n    if (resetCount) {\n      shownCount = window.matchMedia(\"(max-width: 767px)\").matches ? 6 : 9;\n    }\n\n    clearGallery();\n\n    currentVisible = getFilteredItems();\n    const visibleSlice = currentVisible.slice(0, shownCount);\n\n    if (!visibleSlice.length) {\n      const empty = document.createElement(\"p\");\n      empty.style.gridColumn = \"1 \/ -1\";\n      empty.style.textAlign = \"center\";\n      empty.style.padding = \"30px\";\n      empty.style.color = \"rgba(46,24,34,.68)\";\n      empty.textContent = \"No visuals found. Try another filter.\";\n      gallery.appendChild(empty);\n    } else {\n      visibleSlice.forEach(function (item, index) {\n        gallery.appendChild(createCard(item, index));\n      });\n    }\n\n    loadMore.hidden = shownCount >= currentVisible.length;\n  }\n\n  function setLightboxContent() {\n    const item = currentVisible[currentIndex];\n    if (!item || !lightboxImg) return;\n\n    lightboxImg.src = item.img;\n    lightboxImg.alt = item.title;\n    lightboxTitle.textContent = item.title;\n    lightboxCounter.textContent = String(currentIndex + 1).padStart(2, \"0\") + \" \/ \" + String(currentVisible.length).padStart(2, \"0\");\n  }\n\n  function openLightbox(index) {\n    currentVisible = getFilteredItems();\n\n    if (!currentVisible.length) return;\n\n    currentIndex = Math.max(0, Math.min(index || 0, currentVisible.length - 1));\n    setLightboxContent();\n\n    lightbox.classList.add(\"active\");\n    lightbox.setAttribute(\"aria-hidden\", \"false\");\n    document.documentElement.style.overflow = \"hidden\";\n    document.body.style.overflow = \"hidden\";\n  }\n\n  function closeLightbox() {\n    lightbox.classList.remove(\"active\");\n    lightbox.setAttribute(\"aria-hidden\", \"true\");\n    lightboxImg.src = \"\";\n    document.documentElement.style.overflow = \"\";\n    document.body.style.overflow = \"\";\n  }\n\n  function nextImage() {\n    if (!currentVisible.length) return;\n    currentIndex = currentIndex >= currentVisible.length - 1 ? 0 : currentIndex + 1;\n    setLightboxContent();\n  }\n\n  function prevImage() {\n    if (!currentVisible.length) return;\n    currentIndex = currentIndex <= 0 ? currentVisible.length - 1 : currentIndex - 1;\n    setLightboxContent();\n  }\n\n  filters.forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      activeFilter = button.getAttribute(\"data-filter\") || \"all\";\n      filters.forEach(function (btn) {\n        btn.classList.toggle(\"active\", btn === button);\n      });\n      renderGallery(true);\n    });\n  });\n\n  if (search) {\n    search.addEventListener(\"input\", function () {\n      activeSearch = search.value;\n      renderGallery(true);\n    });\n  }\n\n  if (loadMore) {\n    loadMore.addEventListener(\"click\", function () {\n      shownCount += window.matchMedia(\"(max-width: 767px)\").matches ? 4 : 6;\n      renderGallery(false);\n    });\n  }\n\n  if (heroOpen) {\n    heroOpen.addEventListener(\"click\", function () {\n      activeFilter = \"all\";\n      currentVisible = getFilteredItems();\n      openLightbox(0);\n    });\n  }\n\n  closeBtn.addEventListener(\"click\", closeLightbox);\n  nextBtn.addEventListener(\"click\", nextImage);\n  prevBtn.addEventListener(\"click\", prevImage);\n\n  lightbox.addEventListener(\"click\", function (event) {\n    if (event.target === lightbox) closeLightbox();\n  });\n\n  lightbox.addEventListener(\"touchstart\", function (event) {\n    touchStartX = event.changedTouches[0].clientX;\n  }, { passive: true });\n\n  lightbox.addEventListener(\"touchend\", function (event) {\n    const touchEndX = event.changedTouches[0].clientX;\n    const diff = touchEndX - touchStartX;\n\n    if (Math.abs(diff) > 50) {\n      if (diff < 0) nextImage();\n      else prevImage();\n    }\n  }, { passive: true });\n\n  document.addEventListener(\"keydown\", function (event) {\n    if (!lightbox.classList.contains(\"active\")) return;\n\n    if (event.key === \"Escape\") closeLightbox();\n    if (event.key === \"ArrowRight\") nextImage();\n    if (event.key === \"ArrowLeft\") prevImage();\n  });\n\n  renderGallery(false);\n})();\n<\/script>\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>BRAND CASE STUDY MORIVIECosmetics Brand A clean beauty case study built for fast loading, clear mobile viewing, and premium presentation. The page focuses on product visuals, campaign direction, packaging mood, and social media creative work. Brand Identity Cosmetics Product Visuals Social Media View Gallery Start Similar Project Open Preview 01 Soft Premium Direction Rose, cream, beauty lighting, clean product framing, and elegant campaign layouts. 02 Campaign Ready Visuals prepared for product launches, skincare communication, and social media presentation. 03 Fast Mobile Page The gallery loads in batches, with no heavy duplicated preview areas or unnecessary logo card. PROJECT GALLERY Selected MORIVIE Visuals Logo image removed from the gallery. Tap any design to open it, use arrows to browse, and close with the clear \u00d7 button. All Brand Product Campaigns Social Search Load More RESULT A cleaner beauty brand experience. The page now presents MORIVIE through a lighter, clearer structure that works better on mobile, with faster gallery loading and easier browsing. Start a Project \u00d7 \u2039 MORIVIE Visual 01 \/ 01 \u203a<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2823","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/pages\/2823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/comments?post=2823"}],"version-history":[{"count":68,"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/pages\/2823\/revisions"}],"predecessor-version":[{"id":3995,"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/pages\/2823\/revisions\/3995"}],"wp:attachment":[{"href":"https:\/\/nadersaied.com\/ar\/wp-json\/wp\/v2\/media?parent=2823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}