{"id":4078,"date":"2026-08-02T11:49:44","date_gmt":"2026-08-02T08:49:44","guid":{"rendered":"https:\/\/marinaplatforms.com\/?page_id=4078"},"modified":"2026-08-02T11:49:44","modified_gmt":"2026-08-02T08:49:44","slug":"zarf","status":"publish","type":"page","link":"https:\/\/marinaplatforms.com\/ar\/zarf\/","title":{"rendered":"zarf"},"content":{"rendered":"<p>&nbsp;<\/p>\n<style>\n    :root {<br \/>\n      --bg-color: #f2efe9;<br \/>\n      --envelope-color: #eae5dc;<br \/>\n      --envelope-shadow: rgba(0, 0, 0, 0.15);<br \/>\n      --text-color: #4a151b;<br \/>\n    }<\/p>\n<p>    * {<br \/>\n      box-sizing: border-box;<br \/>\n      margin: 0;<br \/>\n      padding: 0;<br \/>\n    }<\/p>\n<p>    body {<br \/>\n      background-color: var(--bg-color);<br \/>\n      display: flex;<br \/>\n      justify-content: center;<br \/>\n      align-items: center;<br \/>\n      min-height: 100vh;<br \/>\n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;<br \/>\n      overflow: hidden;<br \/>\n    }<\/p>\n<p>    .envelope-wrapper {<br \/>\n      position: relative;<br \/>\n      width: 320px;<br \/>\n      height: 220px;<br \/>\n      background-color: var(--envelope-color);<br \/>\n      border-radius: 4px;<br \/>\n      box-shadow: 0 10px 25px var(--envelope-shadow);<br \/>\n      cursor: pointer;<br \/>\n    }<\/p>\n<p>    \/* \u063a\u0637\u0627\u0621 \u0627\u0644\u0638\u0631\u0641 \u0627\u0644\u0639\u0644\u0648\u064a *\/<br \/>\n    .flap {<br \/>\n      position: absolute;<br \/>\n      top: 0;<br \/>\n      left: 0;<br \/>\n      width: 0;<br \/>\n      height: 0;<br \/>\n      border-left: 160px solid transparent;<br \/>\n      border-right: 160px solid transparent;<br \/>\n      border-top: 130px solid #dfd9ce;<br \/>\n      transform-origin: top;<br \/>\n      transition: transform 0.6s ease-in-out;<br \/>\n      z-index: 3;<br \/>\n    }<\/p>\n<p>    \/* \u062c\u064a\u0628 \u0627\u0644\u0638\u0631\u0641 \u0627\u0644\u0623\u0645\u0627\u0645\u064a *\/<br \/>\n    .pocket {<br \/>\n      position: absolute;<br \/>\n      bottom: 0;<br \/>\n      left: 0;<br \/>\n      width: 0;<br \/>\n      height: 0;<br \/>\n      border-left: 160px solid #e3ded5;<br \/>\n      border-right: 160px solid #e3ded5;<br \/>\n      border-bottom: 110px solid #d8d2c6;<br \/>\n      border-top: 110px solid transparent;<br \/>\n      border-radius: 0 0 4px 4px;<br \/>\n      z-index: 3;<br \/>\n    }<\/p>\n<p>    \/* \u0643\u0627\u0631\u062a \u0627\u0644\u062f\u0639\u0648\u0629 \u0628\u062f\u0627\u062e\u0644 \u0627\u0644\u0638\u0631\u0641 *\/<br \/>\n    .card {<br \/>\n      position: absolute;<br \/>\n      bottom: 10px;<br \/>\n      left: 15px;<br \/>\n      width: 290px;<br \/>\n      height: 190px;<br \/>\n      background: #fff;<br \/>\n      border-radius: 6px;<br \/>\n      padding: 20px;<br \/>\n      text-align: center;<br \/>\n      box-shadow: 0 4px 10px rgba(0,0,0,0.05);<br \/>\n      transition: transform 0.6s ease-in-out 0.4s;<br \/>\n      z-index: 2;<br \/>\n      display: flex;<br \/>\n      flex-direction: column;<br \/>\n      justify-content: center;<br \/>\n      align-items: center;<br \/>\n    }<\/p>\n<p>    .card h2 {<br \/>\n      color: var(--text-color);<br \/>\n      font-size: 1.2rem;<br \/>\n      margin-bottom: 8px;<br \/>\n    }<\/p>\n<p>    .card p {<br \/>\n      color: #666;<br \/>\n      font-size: 0.9rem;<br \/>\n    }<\/p>\n<p>    \/* \u0627\u0644\u062e\u062a\u0645 \u0627\u0644\u0634\u0645\u0639\u064a *\/<br \/>\n    .seal {<br \/>\n      position: absolute;<br \/>\n      top: 100px;<br \/>\n      left: 50%;<br \/>\n      transform: translateX(-50%);<br \/>\n      width: 55px;<br \/>\n      height: 55px;<br \/>\n      background: #6b1d24;<br \/>\n      border-radius: 50%;<br \/>\n      color: #d4af37;<br \/>\n      display: flex;<br \/>\n      justify-content: center;<br \/>\n      align-items: center;<br \/>\n      font-weight: bold;<br \/>\n      font-size: 1.1rem;<br \/>\n      box-shadow: 0 4px 8px rgba(0,0,0,0.3);<br \/>\n      z-index: 4;<br \/>\n      transition: opacity 0.4s ease, transform 0.4s ease;<br \/>\n      border: 2px solid #54161c;<br \/>\n    }<\/p>\n<p>    \/* \u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0639\u0646\u062f \u0627\u0644\u0641\u062a\u062d *\/<br \/>\n    .envelope-wrapper.open .flap {<br \/>\n      transform: rotateX(180deg);<br \/>\n      z-index: 1;<br \/>\n    }<\/p>\n<p>    .envelope-wrapper.open .card {<br \/>\n      transform: translateY(-130px);<br \/>\n      z-index: 4;<br \/>\n    }<\/p>\n<p>    .envelope-wrapper.open .seal {<br \/>\n      opacity: 0;<br \/>\n      transform: translateX(-50%) scale(0.5);<br \/>\n      pointer-events: none;<br \/>\n    }<\/p>\n<p>    .instruction {<br \/>\n      position: absolute;<br \/>\n      bottom: 20px;<br \/>\n      color: #777;<br \/>\n      font-size: 0.85rem;<br \/>\n    }<br \/>\n  <\/style>\n<p>&nbsp;<\/p>\n<div id=\"envelope\" class=\"envelope-wrapper\">\n<div class=\"flap\"><\/div>\n<div class=\"pocket\"><\/div>\n<div class=\"seal\">SM<\/div>\n<p><!-- \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0643\u0627\u0631\u062a \u0627\u0644\u0630\u064a \u0633\u064a\u0638\u0647\u0631 --><\/p>\n<div class=\"card\">\n<h2>Forever Starts Today<\/h2>\n<p>27 . 8 . 2026<\/p>\n<p>&nbsp;<\/p>\n<p style=\"color: #4a151b; font-weight: bold;\">\u064a\u0633\u0639\u062f\u0646\u0627 \u062d\u0636\u0648\u0631\u0643\u0645 \u0644\u062a\u0643\u062a\u0645\u0644 \u0641\u0631\u062d\u062a\u0646\u0627 \u2728<\/p>\n<\/div>\n<\/div>\n<div class=\"instruction\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0638\u0631\u0641 \u0644\u0641\u062a\u062d\u0647<\/div>\n<p><script>\n    const envelope = document.getElementById('envelope');\n    envelope.addEventListener('click', () => {\n      envelope.classList.toggle('open');\n    });\n  <\/script><\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; SM Forever Starts Today 27 . 8 . 2026 &nbsp; \u064a\u0633\u0639\u062f\u0646\u0627 \u062d\u0636\u0648\u0631\u0643\u0645 \u0644\u062a\u0643\u062a\u0645\u0644 \u0641\u0631\u062d\u062a\u0646\u0627 \u2728 \u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0638\u0631\u0641 \u0644\u0641\u062a\u062d\u0647 &nbsp;<\/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-4078","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/pages\/4078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/comments?post=4078"}],"version-history":[{"count":2,"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/pages\/4078\/revisions"}],"predecessor-version":[{"id":4080,"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/pages\/4078\/revisions\/4080"}],"wp:attachment":[{"href":"https:\/\/marinaplatforms.com\/ar\/wp-json\/wp\/v2\/media?parent=4078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}