{"id":2120,"date":"2026-07-17T01:20:08","date_gmt":"2026-07-16T22:20:08","guid":{"rendered":"https:\/\/onecaratjewelry.com\/eg\/?page_id=2120"},"modified":"2026-07-17T01:43:31","modified_gmt":"2026-07-16T22:43:31","slug":"the-one-circle","status":"publish","type":"page","link":"https:\/\/onecaratjewelry.com\/eg\/the-one-circle\/","title":{"rendered":"The One Circle"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2120\" class=\"elementor elementor-2120\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"e-con-top elementor-element elementor-element-dd8015a e-con-full e-flex e-con e-parent\" data-id=\"dd8015a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71a4373 elementor-widget elementor-widget-html\" data-id=\"71a4373\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  The One Circle \u2014 signup page + multi-step form\r\n  Drop this whole block into a WordPress \"Custom HTML\" block,\r\n  or into a page template file. Fully self-contained: no\r\n  external JS libraries required.\r\n============================================================= -->\r\n\r\n<section class=\"oc\" id=\"oc-app\">\r\n\r\n  <!-- Shared hero banner -->\r\n  <div class=\"oc-hero\">\r\n    <div class=\"oc-hero__crop\">\r\n      <img decoding=\"async\" class=\"oc-hero__img\" src=\"https:\/\/storage.tally.so\/4f700c43-7009-48ef-8269-38eccb0435f9\/Final-P.png\" alt=\"\" \/>\r\n      <div class=\"oc-hero__fade\"><\/div>\r\n    <\/div>\r\n    <div class=\"oc-logo\">\r\n      <img decoding=\"async\" src=\"https:\/\/storage.tally.so\/7a3f1879-7197-47a9-97ce-5bed597b2fef\/DISPLAY_One_Carat_Logo_Finals-05.png\" alt=\"One Carat\" \/>\r\n    <\/div>\r\n  <\/div>\r\n\r\n\r\n  <div class=\"oc-body\">\r\n\r\n    <!-- ============ VIEW 0: LANDING ============ -->\r\n    <div class=\"oc-view is-active\" data-view=\"landing\">\r\n      <h1 class=\"oc-title\">The One Circle<\/h1>\r\n      <p class=\"oc-lead\">Welcome to One Circle<\/p>\r\n\r\n      <p class=\"oc-text\">More than a community, a circle united by everyday expression and modern diamonds.<\/p>\r\n      <p class=\"oc-text\">Become part of a circle that enjoys exclusive access, styling inspiration, community events, and member-only experiences from One Carat.<\/p>\r\n\r\n      <button type=\"button\" class=\"oc-btn oc-btn--primary\" data-goto=\"step1\">\r\n        Join the Circle\r\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <!-- ============ VIEW 1: ABOUT YOU ============ -->\r\n    <form class=\"oc-view\" data-view=\"step1\" novalidate>\r\n      <button type=\"button\" class=\"oc-back\" data-goto=\"landing\">\r\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M19 12H5M11 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n        Back\r\n      <\/button>\r\n\r\n      <p class=\"oc-eyebrow\">About You<\/p>\r\n      <h2 class=\"oc-h2\">Let's Get to Know You!<\/h2>\r\n      <p class=\"oc-text\">Tell us a little about yourself so we can create experiences and recommendations that feel personal to you.<\/p>\r\n\r\n      <div class=\"oc-field\">\r\n        <label for=\"oc-name\">Full Name <span class=\"oc-req\">*<\/span><\/label>\r\n        <input type=\"text\" id=\"oc-name\" name=\"full_name\" required autocomplete=\"name\" \/>\r\n      <\/div>\r\n\r\n      <div class=\"oc-field\">\r\n        <label for=\"oc-mobile\">Mobile Number <span class=\"oc-req\">*<\/span><\/label>\r\n        <input type=\"tel\" id=\"oc-mobile\" name=\"mobile\" required autocomplete=\"tel\" \/>\r\n      <\/div>\r\n\r\n      <div class=\"oc-field\">\r\n        <label for=\"oc-email\">Email Address <span class=\"oc-req\">*<\/span><\/label>\r\n        <input type=\"email\" id=\"oc-email\" name=\"email\" required autocomplete=\"email\" \/>\r\n      <\/div>\r\n\r\n      <div class=\"oc-field\">\r\n        <label for=\"oc-birthday\">Birthday <span class=\"oc-req\">*<\/span><\/label>\r\n        <input type=\"date\" id=\"oc-birthday\" name=\"birthday\" required \/>\r\n      <\/div>\r\n\r\n      <div class=\"oc-field\">\r\n        <label for=\"oc-city\">City <span class=\"oc-req\">*<\/span><\/label>\r\n        <p class=\"oc-hint\">Share your area or city to help us tailor experiences near you.<\/p>\r\n        <input type=\"text\" id=\"oc-city\" name=\"city\" required autocomplete=\"address-level2\" \/>\r\n      <\/div>\r\n\r\n      <p class=\"oc-error\" data-error=\"step1\" hidden>Please fill in all required fields.<\/p>\r\n\r\n      <button type=\"button\" class=\"oc-btn oc-btn--primary\" data-next=\"step1\" data-goto=\"step2\">\r\n        Next\r\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n      <\/button>\r\n    <\/form>\r\n\r\n    <!-- ============ VIEW 2: PREFERENCES ============ -->\r\n    <form class=\"oc-view\" data-view=\"step2\" novalidate>\r\n      <button type=\"button\" class=\"oc-back\" data-goto=\"step1\">\r\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M19 12H5M11 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n        Back\r\n      <\/button>\r\n\r\n      <h2 class=\"oc-h2\">Tell us a little about you<\/h2>\r\n      <p class=\"oc-text\">Help us tailor your One Circle experience.<\/p>\r\n\r\n      <!-- Single select: shop for -->\r\n      <fieldset class=\"oc-group\" data-required data-group=\"shop_for\">\r\n        <legend>Who do you usually shop for? <span class=\"oc-req\">*<\/span><\/legend>\r\n        <div class=\"oc-choices oc-choices--lettered\">\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"A\" data-value=\"Myself\">Myself<\/button>\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"B\" data-value=\"Gifts\">Gifts<\/button>\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"C\" data-value=\"Both for sure\">Both for sure<\/button>\r\n        <\/div>\r\n      <\/fieldset>\r\n\r\n      <!-- Multi select: brings you to jewelry -->\r\n      <fieldset class=\"oc-group\" data-required data-group=\"brings_to_jewelry\" data-multi>\r\n        <legend>What usually brings you to Jewelry? <span class=\"oc-req\">*<\/span><\/legend>\r\n        <div class=\"oc-choices oc-choices--checks\">\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"My Everyday Collection\">My Everyday Collection<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"A Meaningful Gift\">A Meaningful Gift<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"Celebrating a milestone\">Celebrating a milestone<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"A Milestone Worth Celebrating\">A Milestone Worth Celebrating<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"My Bridal Journey\">My Bridal Journey<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"Celebrating Love\">Celebrating Love<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"Just Exploring\">Just Exploring<\/button>\r\n        <\/div>\r\n      <\/fieldset>\r\n\r\n      <!-- Single select: time for yourself -->\r\n      <fieldset class=\"oc-group\" data-required data-group=\"time_for_yourself\">\r\n        <legend>When do you prefer to make time for yourself? <span class=\"oc-req\">*<\/span><\/legend>\r\n        <div class=\"oc-choices oc-choices--lettered\">\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"A\" data-value=\"Evenings\">Evenings<\/button>\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"B\" data-value=\"Weekends\">Weekends<\/button>\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"C\" data-value=\"Weekdays\">Weekdays<\/button>\r\n        <\/div>\r\n      <\/fieldset>\r\n\r\n      <!-- Single select: see more of -->\r\n      <fieldset class=\"oc-group\" data-required data-group=\"see_more_of\">\r\n        <legend>What would you love to see more of? <span class=\"oc-req\">*<\/span><\/legend>\r\n        <div class=\"oc-choices oc-choices--lettered\">\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"A\" data-value=\"The New Edit\">The New Edit<\/button>\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"B\" data-value=\"Ways to Wear\">Ways to Wear<\/button>\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"C\" data-value=\"Circle Exclusives\">Circle Exclusives<\/button>\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"D\" data-value=\"Behind the Diamond\">Behind the Diamond<\/button>\r\n          <button type=\"button\" class=\"oc-choice\" data-letter=\"E\" data-value=\"Bespoke Journeys\">Bespoke Journeys<\/button>\r\n        <\/div>\r\n      <\/fieldset>\r\n\r\n      <!-- Multi select: discovering next piece -->\r\n      <fieldset class=\"oc-group\" data-required data-group=\"discover_next_piece\" data-multi>\r\n        <legend>How do you love discovering your next piece? <span class=\"oc-req\">*<\/span><\/legend>\r\n        <div class=\"oc-choices oc-choices--checks\">\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"Browsing in person\">Browsing in person<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"Try at Home\">Try at Home<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"Online\">Online<\/button>\r\n          <button type=\"button\" class=\"oc-choice oc-choice--check\" data-value=\"Other\">Other<\/button>\r\n        <\/div>\r\n      <\/fieldset>\r\n\r\n      <p class=\"oc-error\" data-error=\"step2\" hidden>Please answer all required questions.<\/p>\r\n\r\n      <button type=\"button\" class=\"oc-btn oc-btn--primary\" id=\"oc-submit\">\r\n        <span class=\"oc-submit-label\">Submit<\/span>\r\n        <svg class=\"oc-submit-icon\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n        <svg class=\"oc-spinner\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" hidden><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-dasharray=\"42\" stroke-linecap=\"round\"\/><\/svg>\r\n      <\/button>\r\n    <\/form>\r\n\r\n    <!-- ============ VIEW 3: SUCCESS ============ -->\r\n    <div class=\"oc-view\" data-view=\"success\">\r\n      <div class=\"oc-check\" aria-hidden=\"true\">\r\n        <svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\"><path d=\"M5 13l4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n      <\/div>\r\n      <h2 class=\"oc-h2\">You're in the Circle<\/h2>\r\n      <p class=\"oc-text\">Thank you for joining. We'll be in touch with styling inspiration, member-only events, and early access \u2014 tailored just for you.<\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  #oc-app, #oc-app * { box-sizing: border-box; }\r\n\r\n  #oc-app {\r\n    --oc-bg: #ffffff;\r\n    --oc-ink: #17161a;\r\n    --oc-muted: #6b6a70;\r\n    --oc-line: #e4e1da;\r\n    --oc-line-soft: #eeece7;\r\n    --oc-accent: #14131a;\r\n    --oc-accent-ink: #ffffff;\r\n    --oc-selected: #17161a;\r\n    --oc-radius: 10px;\r\n    --oc-radius-lg: 16px;\r\n    --oc-max: 620px;\r\n\r\n    font-family: \"Manrope\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, sans-serif;\r\n    color: var(--oc-ink);\r\n    background: var(--oc-bg);;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  \/* ---------- Hero ---------- *\/\r\n  .oc-hero {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 25vh;\r\n    min-height: 200px;\r\n    background: #0c0a08;\r\n    \/* no overflow:hidden on THIS element \u2014 it would clip the logo\r\n       circle that intentionally overlaps the bottom edge *\/\r\n  }\r\n  \/* Everything that must stay boxed to the hero's own size lives in\r\n     this inner wrapper instead, so the banner can never spill over\r\n     the 25vh box even if a theme stylesheet forces img height:auto. *\/\r\n  .oc-hero__crop {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n  }\r\n  .oc-hero__img {\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n    max-width: none !important;\r\n    object-fit: cover !important;\r\n    object-position: center 68.7657%;\r\n    display: block;\r\n  }\r\n  .oc-hero__fade {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.05) 100%);\r\n  }\r\n  .oc-logo {\r\n    position: absolute;\r\n    left: clamp(20px, 6vw, 64px);\r\n    bottom: -34px;\r\n    width: 68px;\r\n    height: 68px;\r\n    border-radius: 50%;\r\n    background: #201f24;\r\n    border: 3px solid var(--oc-bg);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: 0 6px 18px rgba(0,0,0,.18);\r\n    overflow: hidden;\r\n  }\r\n  .oc-logo img {\r\n    height: 100% !important;\r\n    object-fit: contain;\r\n    transform: scale(2);\r\n  }\r\n\r\n  \/* ---------- Body \/ layout ---------- *\/\r\n  .oc-body {\r\n    position: relative;\r\n    padding: 56px clamp(20px, 6vw, 64px) 64px;\r\n  }\r\n\r\n  .oc-view {\r\n    display: none;\r\n    max-width: var(--oc-max);\r\n    animation: oc-in .38s ease both;\r\n  }\r\n  .oc-view.is-active { display: block; }\r\n\r\n  @keyframes oc-in {\r\n    from { opacity: 0; transform: translateY(8px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .oc-view { animation: none; }\r\n  }\r\n\r\n  .oc-back {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    background: none;\r\n    border: none;\r\n    color: var(--oc-muted);\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    padding: 0 0 28px;\r\n    margin: 0;\r\n  }\r\n  .oc-back:hover { color: var(--oc-ink); }\r\n\r\n  .oc-eyebrow {\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: .04em;\r\n    color: var(--oc-muted);\r\n    margin: 0 0 10px;\r\n  }\r\n\r\n  .oc-title {\r\n    font-family: \"Fraunces\", Georgia, serif;\r\n    font-weight: 600;\r\n    font-size: clamp(32px, 5.4vw, 44px);\r\n    line-height: 1.08;\r\n    margin: 0 0 18px;\r\n    letter-spacing: -.01em;\r\n  }\r\n\r\n  .oc-h2 {\r\n    font-family: \"Fraunces\", Georgia, serif;\r\n    font-weight: 600;\r\n    font-size: clamp(22px, 3.4vw, 28px);\r\n    line-height: 1.2;\r\n    margin: 0 0 12px;\r\n  }\r\n\r\n  .oc-lead {\r\n    font-weight: 700;\r\n    font-size: 15px;\r\n    margin: 0 0 18px;\r\n  }\r\n\r\n  .oc-text {\r\n    color: var(--oc-ink);\r\n    font-size: 15.5px;\r\n    line-height: 1.65;\r\n    margin: 0 0 16px;\r\n    max-width: 54ch;\r\n  }\r\n\r\n  .oc-hint {\r\n    font-style: italic;\r\n    color: var(--oc-muted);\r\n    font-size: 13px;\r\n    margin: 0 0 8px;\r\n  }\r\n\r\n  \/* ---------- Buttons ---------- *\/\r\n  .oc-btn {\r\n    appearance: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-family: inherit;\r\n    font-size: 14.5px;\r\n    font-weight: 700;\r\n    padding: 13px 22px;\r\n    border-radius: 9px;\r\n    transition: transform .15s ease, opacity .15s ease, background .15s ease;\r\n  }\r\n  .oc-btn--primary {\r\n    background: var(--oc-accent);\r\n    color: var(--oc-accent-ink);\r\n    margin-top: 8px;\r\n  }\r\n  .oc-btn--primary:hover { transform: translateY(-1px); opacity: .92; }\r\n  .oc-btn--primary:active { transform: translateY(0); }\r\n  .oc-btn--primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }\r\n  .oc-btn--primary svg { flex: none; }\r\n\r\n  .oc-spinner {\r\n    animation: oc-spin .7s linear infinite;\r\n  }\r\n  @keyframes oc-spin { to { transform: rotate(360deg); } }\r\n\r\n  \/* ---------- Fields ---------- *\/\r\n  .oc-field { margin-bottom: 20px; }\r\n  .oc-field label {\r\n    display: block;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    margin-bottom: 8px;\r\n  }\r\n  .oc-req { color: #b3392f; }\r\n\r\n  .oc-field input {\r\n    width: 100%;\r\n    font: inherit;\r\n    font-size: 15px;\r\n    padding: 12px 14px;\r\n    border: 1.5px solid var(--oc-line);\r\n    border-radius: var(--oc-radius);\r\n    background: #fff;\r\n    color: var(--oc-ink);\r\n    transition: border-color .15s ease, box-shadow .15s ease;\r\n  }\r\n  .oc-field input:focus {\r\n    outline: none;\r\n    border-color: var(--oc-ink);\r\n    box-shadow: 0 0 0 3px rgba(23,22,26,.08);\r\n  }\r\n  .oc-field input:invalid:not(:placeholder-shown) { }\r\n\r\n  .oc-error {\r\n    color: #b3392f;\r\n    font-size: 13.5px;\r\n    font-weight: 600;\r\n    margin: -6px 0 14px;\r\n  }\r\n\r\n  \/* ---------- Choice groups ---------- *\/\r\n  .oc-group {\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0 0 30px;\r\n  }\r\n  .oc-group legend {\r\n    font-weight: 700;\r\n    font-size: 15px;\r\n    margin: 0 0 12px;\r\n    padding: 0;\r\n  }\r\n\r\n  .oc-choices { display: flex; flex-wrap: wrap; gap: 10px; }\r\n\r\n  .oc-choice {\r\n    appearance: none;\r\n    cursor: pointer;\r\n    font: inherit;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    color: var(--oc-ink);\r\n    background: #fff;\r\n    border: 1.5px solid var(--oc-line);\r\n    border-radius: 9px;\r\n    padding: 11px 16px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    transition: border-color .15s ease, background .15s ease, color .15s ease;\r\n  }\r\n  .oc-choice:hover { border-color: #b9b6ae; }\r\n\r\n  .oc-choices--lettered .oc-choice::before {\r\n    content: attr(data-letter);\r\n    width: 20px;\r\n    height: 20px;\r\n    flex: none;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    color: #fff;\r\n    background: #201f24;\r\n    border-radius: 5px;\r\n  }\r\n\r\n  .oc-choices--checks .oc-choice::before {\r\n    content: \"\";\r\n    width: 17px;\r\n    height: 17px;\r\n    flex: none;\r\n    border-radius: 4px;\r\n    border: 1.5px solid var(--oc-line);\r\n    background: #fff;\r\n    transition: background .15s ease, border-color .15s ease;\r\n  }\r\n  .oc-choice--check.is-selected::before {\r\n    background: var(--oc-selected);\r\n    border-color: var(--oc-selected);\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\r\n    background-size: 65%;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n  }\r\n\r\n  .oc-choice.is-selected {\r\n    border-color: var(--oc-selected);\r\n    background: #17161a;\r\n    color: #fff;\r\n  }\r\n  .oc-choices--lettered .oc-choice.is-selected::before {\r\n    background: #fff;\r\n    color: #17161a;\r\n  }\r\n\r\n  \/* ---------- Success ---------- *\/\r\n  .oc-check {\r\n    width: 54px;\r\n    height: 54px;\r\n    border-radius: 50%;\r\n    background: #17161a;\r\n    color: #fff;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  \/* ---------- Responsive ---------- *\/\r\n  @media (max-width: 480px) {\r\n    .oc-body { padding: 40px 18px 48px; }\r\n    .oc-choices { gap: 8px; }\r\n    .oc-choice { padding: 10px 13px; font-size: 13.5px; }\r\n    .oc-logo { width: 58px; height: 58px; bottom: -29px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  var root = document.getElementById('oc-app');\r\n  if (!root) return;\r\n\r\n  \/\/ \u26a0\ufe0f Your Google Apps Script Web App URL\r\n  var ENDPOINT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbzj3tGsusez-uIh3QMjUPTjwZmU-_kEoBArT6R-CxZNeKXflZVBswJNG32tFEV50mEeuQ\/exec\";\r\n\r\n  var views = root.querySelectorAll('.oc-view');\r\n  var state = {}; \/\/ collected answers\r\n\r\n  function showView(name) {\r\n    views.forEach(function (v) {\r\n      v.classList.toggle('is-active', v.getAttribute('data-view') === name);\r\n    });\r\n    root.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n  }\r\n\r\n  \/\/ Simple nav buttons (landing -> step1, back buttons)\r\n  root.querySelectorAll('[data-goto]').forEach(function (btn) {\r\n    btn.addEventListener('click', function () {\r\n      var target = btn.getAttribute('data-goto');\r\n\r\n      \/\/ If this is the \"Next\" button on step 1, validate first\r\n      if (btn.hasAttribute('data-next')) {\r\n        if (!validateStep1()) return;\r\n      }\r\n      showView(target);\r\n    });\r\n  });\r\n\r\n  \/\/ ---------- Step 1 fields ----------\r\n  var step1Form = root.querySelector('[data-view=\"step1\"]');\r\n  function validateStep1() {\r\n    var required = step1Form.querySelectorAll('input[required]');\r\n    var ok = true;\r\n    required.forEach(function (input) {\r\n      if (!input.value.trim()) ok = false;\r\n    });\r\n    var err = step1Form.querySelector('[data-error=\"step1\"]');\r\n    err.hidden = ok;\r\n    if (ok) {\r\n      required.forEach(function (input) {\r\n        state[input.name] = input.value.trim();\r\n      });\r\n    }\r\n    return ok;\r\n  }\r\n\r\n  \/\/ ---------- Step 2 choice groups ----------\r\n  var groups = root.querySelectorAll('.oc-group');\r\n  groups.forEach(function (group) {\r\n    var key = group.getAttribute('data-group');\r\n    var isMulti = group.hasAttribute('data-multi');\r\n    state[key] = isMulti ? [] : '';\r\n\r\n    group.querySelectorAll('.oc-choice').forEach(function (choice) {\r\n      choice.addEventListener('click', function () {\r\n        var value = choice.getAttribute('data-value');\r\n\r\n        if (isMulti) {\r\n          var idx = state[key].indexOf(value);\r\n          if (idx > -1) {\r\n            state[key].splice(idx, 1);\r\n            choice.classList.remove('is-selected');\r\n          } else {\r\n            state[key].push(value);\r\n            choice.classList.add('is-selected');\r\n          }\r\n        } else {\r\n          state[key] = value;\r\n          group.querySelectorAll('.oc-choice').forEach(function (c) {\r\n            c.classList.remove('is-selected');\r\n          });\r\n          choice.classList.add('is-selected');\r\n        }\r\n      });\r\n    });\r\n  });\r\n\r\n  function validateStep2() {\r\n    var ok = true;\r\n    groups.forEach(function (group) {\r\n      var key = group.getAttribute('data-group');\r\n      var isMulti = group.hasAttribute('data-multi');\r\n      var filled = isMulti ? state[key].length > 0 : !!state[key];\r\n      if (!filled) ok = false;\r\n    });\r\n    var err = root.querySelector('[data-error=\"step2\"]');\r\n    err.hidden = ok;\r\n    return ok;\r\n  }\r\n\r\n  \/\/ ---------- Submit ----------\r\n  var submitBtn = document.getElementById('oc-submit');\r\n  submitBtn.addEventListener('click', function () {\r\n    if (!validateStep2()) return;\r\n\r\n    var label = submitBtn.querySelector('.oc-submit-label');\r\n    var icon = submitBtn.querySelector('.oc-submit-icon');\r\n    var spinner = submitBtn.querySelector('.oc-spinner');\r\n    submitBtn.disabled = true;\r\n    label.textContent = 'Submitting\u2026';\r\n    icon.hidden = true;\r\n    spinner.hidden = false;\r\n\r\n    var payload = {\r\n      full_name: state.full_name || '',\r\n      mobile: state.mobile || '',\r\n      email: state.email || '',\r\n      birthday: state.birthday || '',\r\n      city: state.city || '',\r\n      shop_for: state.shop_for || '',\r\n      brings_to_jewelry: (state.brings_to_jewelry || []).join(', '),\r\n      time_for_yourself: state.time_for_yourself || '',\r\n      see_more_of: state.see_more_of || '',\r\n      discover_next_piece: (state.discover_next_piece || []).join(', ')\r\n    };\r\n\r\n    \/\/ Apps Script doesn't return CORS headers we can read from another\r\n    \/\/ origin, so we fire the request with no-cors. It still executes\r\n    \/\/ server-side (row append + emails) \u2014 we just can't read the response.\r\n    fetch(ENDPOINT_URL, {\r\n      method: 'POST',\r\n      mode: 'no-cors',\r\n      headers: { 'Content-Type': 'text\/plain' },\r\n      body: JSON.stringify(payload)\r\n    })\r\n      .then(function () { showView('success'); })\r\n      .catch(function () { showView('success'); }) \/\/ still show success; see note below\r\n      .finally(function () {\r\n        submitBtn.disabled = false;\r\n        label.textContent = 'Submit';\r\n        icon.hidden = false;\r\n        spinner.hidden = true;\r\n      });\r\n  });\r\n})();\r\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>The One Circle Welcome to One Circle More than a community, a circle united by everyday expression and modern diamonds. Become part of a circle that enjoys exclusive access, styling inspiration, community events, and member-only experiences from One Carat. Join the Circle Back About You Let&#8217;s Get to Know You! Tell us a little about [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2120","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/onecaratjewelry.com\/eg\/wp-json\/wp\/v2\/pages\/2120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onecaratjewelry.com\/eg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onecaratjewelry.com\/eg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onecaratjewelry.com\/eg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onecaratjewelry.com\/eg\/wp-json\/wp\/v2\/comments?post=2120"}],"version-history":[{"count":10,"href":"https:\/\/onecaratjewelry.com\/eg\/wp-json\/wp\/v2\/pages\/2120\/revisions"}],"predecessor-version":[{"id":2132,"href":"https:\/\/onecaratjewelry.com\/eg\/wp-json\/wp\/v2\/pages\/2120\/revisions\/2132"}],"wp:attachment":[{"href":"https:\/\/onecaratjewelry.com\/eg\/wp-json\/wp\/v2\/media?parent=2120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}