https://motherandmaiden.com/

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta name="description" content="Mother and Maiden is a home for hand-picked tarot decks, crystals, and ritual tools. Coming soon." />
7
8    <meta property="og:type" content="website" />
9    <meta property="og:title" content="Mother and Maiden | Coming Soon" />
10    <meta property="og:description" content="A home for hand-picked tarot decks, crystals, and ritual tools. Where magic takes form." />
11    <meta property="og:url" content="https://motherandmaiden.com/" />
12    <meta property="og:image" content="https://motherandmaiden.com/og-image.png" />
13    <meta property="og:image:width" content="1200" />
14    <meta property="og:image:height" content="630" />
15    <meta name="twitter:card" content="summary_large_image" />
16    <meta name="twitter:title" content="Mother and Maiden | Coming Soon" />
17    <meta name="twitter:description" content="A home for hand-picked tarot decks, crystals, and ritual tools. Where magic takes form." />
18    <meta name="twitter:image" content="https://motherandmaiden.com/og-image.png" />
19
20    <link rel="preconnect" href="https://fonts.googleapis.com">
21    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Manrope:[email protected]&display=swap" rel="stylesheet">
23
24    <title>Coming Soon | Mother and Maiden</title>
25    <link rel="stylesheet" href="styles.css" />
26    

26<script defer src="https://tracking.borders.website/script.js" data-website-id="37684b24-9cef-412c-819b-eede0669a490"></script>

26
27  </head>
28  <body>
29    <main>
30      <img
31        src="logo-dark.svg"
32        alt="Mother and Maiden logo"
33        class="logo"
34      />
35
36      <p class="eyebrow">Coming Soon</p>
37      <h1>Where magic takes form.</h1>
38
39      <div class="intro">
40        <p>
41          Mother and Maiden is a home for tarot and oracle decks, crystals, and ritual
42          tools &mdash; hand-picked, one by one, for the curious, the seasoned, and
43          everyone in between. Tools for ritual, reflection, and self-connection.
44          No gatekeeping, no pressure, just good things chosen with care.
45        </p>
46      </div>
47
48      <hr class="divider" />
49
50      <h2>What&rsquo;s coming</h2>
51
52      <div class="offerings">
53        <div class="offering-card">
54          <h3>Tarot &amp; Oracle Decks</h3>
55          <p>Chosen for their artistry as much as their accuracy &mdash; never picked in bulk.</p>
56        </div>
57        <div class="offering-card">
58          <h3>Crystals</h3>
59          <p>Stones sourced with care, each one considered on its own before it earns a place on the shelf.</p>
60        </div>
61        <div class="offering-card">
62          <h3>Ritual Tools</h3>
63          <p>Candles, incense, and the small objects that turn a quiet moment into a practice.</p>
64        </div>
65      </div>
66
67      <hr class="divider" />
68
69      <section id="contact-section">
70        <h2>Get in touch</h2>
71        <p class="form-note">
72          Questions, requests, or just want to say hello before we open our doors &mdash;
73          we&rsquo;d love to hear from you.
74        </p>
75
76        <form id="staticform-form">
77          <div class="hp-field" aria-hidden="true">
78            <label for="website">Website</label>
79            <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
80          </div>
81
82          <div class="field">
83            <label for="name">Name</label>
84            <input type="text" id="name" name="name" autocomplete="name" required>
85            <p data-sf-error="name"></p>
86          </div>
87
88          <div class="field">
89            <label for="email">Email</label>
90            <input type="email" id="email" name="email" autocomplete="email" required>
91            <p data-sf-error="email"></p>
92          </div>
93
94          <div class="field">
95            <label for="interest">What are you interested in? <span class="optional">(optional)</span></label>
96            <select id="interest" name="interest">
97              <option value="">Select an option</option>
98              <option value="Tarot &amp; oracle decks">Tarot &amp; oracle decks</option>
99              <option value="Crystals">Crystals</option>
100              <option value="Ritual tools">Ritual tools</option>
101              <option value="Just saying hello">Just saying hello</option>
102            </select>
103            <p data-sf-error="interest"></p>
104          </div>
105
106          <div class="field">
107            <label for="message">Message</label>
108            <textarea id="message" name="message" required placeholder="Tell us what's on your mind &mdash; a question, a request, or just a hello."></textarea>
109            <p data-sf-error="message"></p>
110          </div>
111
112          <p data-sf-general-error></p>
113
114          <button type="submit">Send Message</button>
115        </form>
116      </section>
117
118      <div id="contact-success" hidden>
119        <svg class="success-icon" viewBox="0 0 24 24" aria-hidden="true">
120          <circle cx="12" cy="12" r="10"/>
121          <path d="M8 12l3 3 5-5"/>
122        </svg>
123        <p>Message sent &mdash; thank you for reaching out.</p>
124        <p><a href="#" id="contact-retry">Send another?</a></p>
125      </div>
126
127      <footer>
128        <p>Mother and Maiden &mdash; Where magic takes form.</p>
129        <p>&copy; 2026 Mother and Maiden. All rights reserved.</p>
130        <p class="credit">Made with <i alt="love" style="color:red">❤️</i> by <a class="cs-link" href="https://borders.website/?utm_source=motherandmaiden.com&amp;utm_medium=referral&amp;utm_campaign=footer_landing_page">Borders Websites</a></p>
131      </footer>
132    </main>
133
134    

134<script src="https://staticform.app/scripts/staticform.js" defer></script>

134
135    

135<script>
136      document.addEventListener('DOMContentLoaded', function () {
137        const form = document.getElementById('staticform-form');
138        const btn = form.querySelector('button[type="submit"]');
139        const section = document.getElementById('contact-section');
140        const success = document.getElementById('contact-success');
141        const retry = document.getElementById('contact-retry');
142
143        StaticForm.attach(form, {
144          endpoint: 'https://api.staticform.app/api/v1/forms/019f7a74-bdd5-795d-a896-d26a998df163',
145          success: { type: 'button' },
146          loading: { buttonText: 'Sending…' },
147        });
148
149        let wasSending = false;
150        const observer = new MutationObserver(function () {
151          if (btn.disabled) {
152            wasSending = true;
153          } else if (wasSending) {
154            section.hidden = true;
155            success.hidden = false;
156            observer.disconnect();
157          }
158        });
159        observer.observe(btn, { attributes: true, attributeFilter: ['disabled'] });
160
161        retry.addEventListener('click', function (e) {
162          e.preventDefault();
163          form.reset();
164          success.hidden = true;
165          section.hidden = false;
166          wasSending = false;
167          observer.observe(btn, { attributes: true, attributeFilter: ['disabled'] });
168        });
169      });
170    </script>

170
171  </body>
172</html>