{"id":5,"date":"2026-09-11T09:01:03","date_gmt":"2026-09-11T09:01:03","guid":{"rendered":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/?page_id=5"},"modified":"2026-09-11T09:11:02","modified_gmt":"2026-09-11T09:11:02","slug":"home","status":"publish","type":"page","link":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nAn Invitation<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital@0;1&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --cocoa:#6E4A2E;\n --cocoa-soft:#8A6647;\n --gold:#B79A5B;\n --gold-deep:#9C8047;\n --sage:#9FAF90;\n --shadow:rgba(76,56,34,.30);\n --paper-1:#F3ECDC;\n --paper-2:#EBE1CD;\n --paper-3:#E3D8C0;\n --paper-4:#DBCFB4;\n }\n *{box-sizing:border-box;margin:0;padding:0;}\n html,body{height:100%;overflow:hidden;}\n body{\n background:radial-gradient(120% 90% at 50% 0%, #EFE8DA 0%, #E4DAC7 55%, #D9CDB6 100%);\n font-family:'EB Garamond',serif;color:var(--cocoa);\n display:grid;place-items:center;-webkit-font-smoothing:antialiased;\n }\n body::before{\n content:\"\";position:fixed;inset:0;pointer-events:none;opacity:.5;\n background-image:\n radial-gradient(circle at 12% 22%, rgba(183,154,91,.18) 0 2px, transparent 3px),\n radial-gradient(circle at 82% 14%, rgba(183,154,91,.14) 0 1.5px, transparent 3px),\n radial-gradient(circle at 68% 82%, rgba(183,154,91,.16) 0 2px, transparent 3px),\n radial-gradient(circle at 22% 78%, rgba(183,154,91,.12) 0 1.5px, transparent 3px);\n }\n\n .viewport{\n perspective:1600px;\n perspective-origin:50% 50%;\n width:min(94vw,360px);\n height:96vh;\n position:relative;cursor:pointer;\n display:flex;flex-direction:column;\n justify-content:center;align-items:center;\n padding-bottom:0;\n }\n\n \/* ===================== SCENE ===================== *\/\n .scene{\n --scene-height:min(88vh,680px);\n --envelope-height:min(58vw,224px);\n --card-height:min(78vh,560px);\n\n position:relative;\n width:min(88vw,360px);\n height:var(--scene-height);\n transform-style:preserve-3d;\n transform:rotateX(16deg);\n transition:transform 1.2s cubic-bezier(.4,0,.2,1);\n }\n .scene.open{ transform:rotateX(4deg); }\n\n \/* ===================== ENVELOPE ===================== *\/\n .envelope{\n position:absolute;\n left:0;\n bottom:0;\n width:100%;\n height:var(--envelope-height);\n transform-style:preserve-3d;\n z-index:10;\n }\n .back{\n position:absolute;inset:0;border-radius:8px;z-index:1;\n background:linear-gradient(160deg,var(--paper-2),var(--paper-3));\n box-shadow:inset 0 0 50px rgba(120,95,60,.14);\n }\n\n \/* ===================== CARD ===================== *\/\n .card{\n position:absolute;\n left:2%;\n width:96%;\n bottom:0;\n height:var(--card-height);\n max-height:var(--card-height);\n padding:32px 22px 28px;\n background:linear-gradient(#FCF9F2,#F5EEE0);\n border-radius:12px;\n border:1px solid rgba(183,154,91,.30);\n box-shadow:0 24px 44px -26px var(--shadow);\n text-align:center;overflow:hidden;\n transform-origin:bottom center;\n transform:translateY(0) scale(.42) rotateX(8deg);\n opacity:0;\n z-index:2;\n transition:none;\n will-change:transform,bottom,opacity;\n }\n .card::after{\n content:\"\";position:absolute;inset:10px;\n border:1px solid rgba(183,154,91,.35);\n border-radius:7px;pointer-events:none;\n }\n .scene.open .card{\n animation:cardRise 2.2s cubic-bezier(.18,.72,.22,1) forwards;\n animation-delay:.65s;\n }\n @keyframes cardRise{\n 0%{\n opacity:0;\n bottom:4px;\n transform:translateY(0) scale(.42) rotateX(8deg);\n z-index:2;\n }\n 12%{\n opacity:1;\n bottom:8px;\n transform:translateY(0) scale(.50) rotateX(7deg);\n z-index:2;\n }\n 30%{\n opacity:1;\n bottom:12px;\n transform:translateY(0) scale(.64) rotateX(5deg);\n z-index:2;\n }\n 48%{\n opacity:1;\n bottom:28px;\n transform:translateY(0) scale(.78) rotateX(3deg);\n z-index:20;\n }\n 68%{\n opacity:1;\n bottom:calc(var(--envelope-height) - 10px);\n transform:translateY(0) scale(.90) rotateX(1.5deg);\n z-index:20;\n }\n 84%{\n opacity:1;\n bottom:calc(var(--scene-height) - var(--card-height) - 8px);\n transform:translateY(0) scale(.97) rotateX(.5deg);\n z-index:20;\n }\n 100%{\n opacity:1;\n bottom:calc(var(--scene-height) - var(--card-height));\n transform:translateY(0) scale(1) rotateX(0deg);\n z-index:20;\n }\n }\n\n .botanical{position:absolute;pointer-events:none;opacity:.92;z-index:2;}\n .botanical.tr{top:-4px;right:-10px;width:96px;transform:rotate(6deg);}\n .botanical.bl{bottom:-6px;left:-12px;width:90px;transform:rotate(4deg);}\n\n .content{position:relative;z-index:3;opacity:0;transition:opacity .8s ease;}\n .scene.reveal .content{opacity:1;}\n .eyebrow{font-family:'Cormorant Garamond',serif;letter-spacing:.14em;\n font-size:.74rem;color:var(--cocoa-soft);line-height:1.5;margin-top:2px;}\n .names{font-family:'Cormorant Garamond',serif;color:var(--cocoa);line-height:.98;margin:10px 0 2px;}\n .names .n{display:block;font-weight:500;font-size:2.7rem;}\n .names .amp{display:block;font-style:italic;font-size:1.5rem;color:var(--gold-deep);margin:1px 0;}\n .invite{font-size:.9rem;line-height:1.5;margin:12px auto 14px;max-width:24ch;color:var(--cocoa-soft);}\n .rule{width:56px;height:1px;background:var(--gold);margin:0 auto 14px;opacity:.7;}\n .details{display:flex;justify-content:center;gap:16px;font-size:.85rem;color:var(--cocoa);}\n .details .col{flex:1;max-width:44%;}\n .details .lbl{font-family:'Cormorant Garamond',serif;font-size:.78rem;letter-spacing:.08em;\n color:var(--gold-deep);display:block;margin-bottom:3px;}\n .details .div{width:1px;background:rgba(183,154,91,.5);}\n .followup{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;color:var(--cocoa);margin-top:14px;}\n\n \/* ===================== POCKET FOLDS ===================== *\/\n .flap.left{position:absolute;inset:0;z-index:8;\n clip-path:polygon(0 0, 50% 50%, 0 100%);\n background:linear-gradient(90deg,var(--paper-3),var(--paper-2));}\n .flap.right{position:absolute;inset:0;z-index:8;\n clip-path:polygon(100% 0, 50% 50%, 100% 100%);\n background:linear-gradient(-90deg,var(--paper-3),var(--paper-2));}\n .flap.bottom{position:absolute;inset:0;z-index:9;\n clip-path:polygon(0 100%, 50% 50%, 100% 100%);\n background:linear-gradient(0deg,var(--paper-4),var(--paper-3));\n box-shadow:inset 0 -1px 3px rgba(120,95,60,.18);}\n\n \/* ===================== TOP FLAP ===================== *\/\n .flap.top{\n position:absolute;left:0;top:0;width:100%;height:52%;z-index:12;\n clip-path:polygon(0 0, 100% 0, 50% 100%);\n background:linear-gradient(180deg,var(--paper-1),var(--paper-3));\n transform-origin:50% 0%;transform:rotateX(0deg);\n transform-style:preserve-3d;backface-visibility:hidden;\n transition:transform 1.25s cubic-bezier(.62,.02,.3,1), z-index 0s linear .55s;\n box-shadow:0 6px 12px -6px rgba(120,95,60,.35);\n }\n .scene.open .flap.top{transform:rotateX(-178deg);z-index:1;}\n\n \/* ===================== POCKET SHADOW ===================== *\/\n .pocket-shadow{\n position:absolute;left:4%;top:2%;width:92%;height:30%;\n background:radial-gradient(80% 100% at 50% 0%, rgba(90,68,30,.16), transparent 70%);\n z-index:10;pointer-events:none;opacity:1;transition:opacity .7s ease;\n }\n .scene.open .pocket-shadow{opacity:0;}\n\n \/* ===================== SEAL ===================== *\/\n .seal{position:absolute;left:50%;top:50%;z-index:15;width:58px;height:58px;\n transform:translate(-50%,-50%) scale(1);\n transition:transform .5s ease,opacity .45s ease;}\n .seal svg{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(90,68,30,.4));}\n .scene.open .seal{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-16deg);}\n\n \/* ===================== PROMPT ===================== *\/\n .prompt{\n position:absolute;bottom:8vh;left:0;width:100%;text-align:center;\n font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;\n color:var(--cocoa);font-size:2rem;letter-spacing:.02em;\n z-index:30;transition:opacity .5s ease;\n }\n .viewport.open .prompt{opacity:0;pointer-events:none;}\n\n @media (max-width:600px){\n .viewport{\n width:100vw;\n height:100vh;\n padding:0 8px;\n }\n\n .scene{\n --scene-height:88vh;\n --envelope-height:clamp(185px,58vw,225px);\n --card-height:min(78vh,620px);\n width:min(94vw,390px);\n }\n\n .card{\n left:1%;\n width:98%;\n padding:clamp(28px,7vw,42px) clamp(18px,6vw,30px) 30px;\n border-radius:14px;\n overflow-y:auto;\n overscroll-behavior:contain;\n scrollbar-width:none;\n }\n\n .card::-webkit-scrollbar{display:none;}\n\n .names .n{font-size:clamp(2.35rem,11vw,4rem);}\n .names .amp{font-size:clamp(1.25rem,5vw,1.8rem);}\n .eyebrow{font-size:clamp(.62rem,2.6vw,.8rem);}\n .invite{font-size:clamp(.85rem,3.6vw,1.05rem);margin:14px auto 16px;}\n .details{gap:12px;font-size:clamp(.72rem,3.2vw,.92rem);}\n .details .lbl{font-size:clamp(.65rem,2.8vw,.8rem);}\n .followup{font-size:clamp(.95rem,4.5vw,1.2rem);margin-top:16px;}\n }\n @media (max-width:380px){\n .scene{\n --scene-height:89vh;\n --envelope-height:clamp(175px,60vw,205px);\n --card-height:min(79vh,560px);\n width:95vw;\n }\n\n .card{padding:24px 15px 24px;}\n .names .n{font-size:clamp(2.15rem,11vw,3.3rem);}\n .names .amp{font-size:1.15rem;}\n .invite{font-size:.82rem;}\n .details{font-size:.7rem;gap:7px;}\n .details .lbl{font-size:.63rem;}\n .followup{font-size:.9rem;}\n }\n\n @media (prefers-reduced-motion:reduce){\n .scene,.flap.top,.card,.seal,.content,.pocket-shadow{transition:none!important;animation:none!important;}\n .scene{transform:rotateX(4deg);}\n .flap.top{transform:rotateX(-178deg);z-index:1;}\n .card{\n bottom:calc(var(--scene-height) - var(--card-height));\n transform:translateY(0) scale(1);\n opacity:1;\n z-index:20;\n }\n .seal{opacity:0;} .content{opacity:1;} .pocket-shadow{opacity:0;} .prompt{display:none;}\n }\n<\/style>\n<\/head>\n<body>\n <div class=\"viewport\" id=\"viewport\">\n <div class=\"scene\" id=\"scene\">\n <div class=\"envelope\">\n\n <div class=\"back\"><\/div>\n\n <div class=\"flap left\"><\/div>\n <div class=\"flap right\"><\/div>\n <div class=\"flap bottom\"><\/div>\n <div class=\"pocket-shadow\"><\/div>\n <div class=\"flap top\"><\/div>\n\n <div class=\"seal\">\n <svg viewBox=\"0 0 62 62\">\n <defs><radialGradient id=\"wax\" cx=\"38%\" cy=\"34%\" r=\"70%\">\n <stop offset=\"0%\" stop-color=\"#CDB16B\"\/><stop offset=\"55%\" stop-color=\"#B79A5B\"\/>\n <stop offset=\"100%\" stop-color=\"#8F7439\"\/><\/radialGradient><\/defs>\n <path fill=\"url(#wax)\" d=\"M31 2c4 0 5 4 9 4s6-3 9 0 1 6 3 9 5 4 5 8-3 5-3 9 2 6 0 9-6 2-8 4-3 7-7 8-5-2-9-2-5 3-9 1-4-6-6-8-6-1-9-3-1-6-3-9-4-5-4-9 3-5 3-9-2-6 0-9 6-1 8-4 3-7 7-8 5 2 9 2 5-3 9-1z\"\/>\n <text x=\"31\" y=\"39\" text-anchor=\"middle\" font-family=\"'Cormorant Garamond',serif\"\n font-size=\"20\" font-weight=\"600\" fill=\"#6B551F\" opacity=\".85\">S&R<\/text>\n <\/svg>\n <\/div>\n\n <\/div>\n\n <div class=\"card\">\n <svg class=\"botanical tr\" viewBox=\"0 0 120 120\" fill=\"none\">\n <g stroke=\"#9FAF90\" stroke-width=\"2\" stroke-linecap=\"round\">\n <path d=\"M60 118 C60 80 70 50 96 26\"\/><path d=\"M60 100 C70 90 84 88 96 92\"\/>\n <path d=\"M62 82 C74 70 90 68 104 74\"\/><path d=\"M64 64 C78 54 92 56 106 60\"\/><\/g>\n <g fill=\"#C9B27E\"><ellipse cx=\"96\" cy=\"24\" rx=\"7\" ry=\"16\" transform=\"rotate(30 96 24)\"\/>\n <ellipse cx=\"108\" cy=\"34\" rx=\"6\" ry=\"14\" transform=\"rotate(45 108 34)\"\/><\/g>\n <g fill=\"#EDE4D2\" stroke=\"#D8CBAF\" stroke-width=\"1\">\n <circle cx=\"90\" cy=\"94\" r=\"9\"\/><circle cx=\"102\" cy=\"80\" r=\"8\"\/><circle cx=\"84\" cy=\"80\" r=\"7\"\/><\/g>\n <g fill=\"#B79A5B\"><circle cx=\"90\" cy=\"94\" r=\"2.4\"\/><circle cx=\"102\" cy=\"80\" r=\"2\"\/><circle cx=\"84\" cy=\"80\" r=\"1.8\"\/><\/g>\n <\/svg>\n <svg class=\"botanical bl\" viewBox=\"0 0 112 112\" fill=\"none\">\n <g stroke=\"#9FAF90\" stroke-width=\"2\" stroke-linecap=\"round\">\n <path d=\"M52 0 C52 40 42 66 14 92\"\/><path d=\"M50 20 C40 30 24 32 10 28\"\/>\n <path d=\"M48 40 C36 50 20 52 8 46\"\/><\/g>\n <g fill=\"#C9B27E\"><ellipse cx=\"14\" cy=\"94\" rx=\"7\" ry=\"16\" transform=\"rotate(-32 14 94)\"\/>\n <ellipse cx=\"4\" cy=\"82\" rx=\"6\" ry=\"13\" transform=\"rotate(-48 4 82)\"\/><\/g>\n <g fill=\"#EDE4D2\" stroke=\"#D8CBAF\" stroke-width=\"1\">\n <circle cx=\"22\" cy=\"24\" r=\"9\"\/><circle cx=\"12\" cy=\"40\" r=\"8\"\/><circle cx=\"30\" cy=\"40\" r=\"7\"\/><\/g>\n <g fill=\"#B79A5B\"><circle cx=\"22\" cy=\"24\" r=\"2.4\"\/><circle cx=\"12\" cy=\"40\" r=\"2\"\/><circle cx=\"30\" cy=\"40\" r=\"1.8\"\/><\/g>\n <\/svg>\n\n <div class=\"content\">\n <p class=\"eyebrow\">TOGETHER WITH THEIR FAMILIES<\/p>\n <h1 class=\"names\">\n <span class=\"n\">Samira<\/span><span class=\"amp\">&<\/span><span class=\"n\">Richard<\/span>\n <\/h1>\n <p class=\"invite\">invite you to celebrate their wedding<\/p>\n <div class=\"rule\"><\/div>\n <div class=\"details\">\n <div class=\"col\"><span class=\"lbl\">WHEN<\/span>Saturday<br>Feb 25th, 2026<br>9:00 in the morning<\/div>\n <div class=\"div\"><\/div>\n <div class=\"col\"><span class=\"lbl\">WHERE<\/span>123 Anywhere St.<br>Any City, ST<br>12345<\/div>\n <\/div>\n <p class=\"followup\">Reception to follow<\/p>\n <\/div>\n <\/div>\n\n\n <\/div>\n <p class=\"prompt\">tap to open<\/p>\n <\/div>\n\n<script>\n const scene = document.getElementById('scene');\n const viewport = document.getElementById('viewport');\n let opened = false;\n\n function openEnvelope(){\n if(opened) return;\n opened = true;\n scene.classList.add('open');\n viewport.classList.add('open');\n \/\/ reveal text after the card has physically emerged\n setTimeout(()=>scene.classList.add('reveal'), 2350);\n }\n\n viewport.addEventListener('click', openEnvelope);\n\n const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n if(reduced){\n scene.classList.add('open','reveal');\n viewport.classList.add('open');\n }\n<\/script>\n<\/body>\n<\/html>\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>An Invitation S&R TOGETHER WITH THEIR FAMILIES Samira&Richard invite you to celebrate their wedding WHENSaturdayFeb 25th, 20269:00 in the morning WHERE123 Anywhere St.Any City, ST12345 Reception to follow tap to open<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"on","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"off","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"off","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"off","ocean_display_footer_bottom":"off","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":14,"href":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/wp-json\/wp\/v2\/pages\/5\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/digital-invite.digital-hut.com\/weddemo7\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}