rattlesnakes-prototype/card-empress.html at main · bejarcode/rattlesnakes-prototype · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="The Empress — Swamp Hibiscus, Calendula, Turks Cap, Ginkgo & Holly. A botanical tarot painting on birch wood by Sarah Stewart. Venus, self-love, abundance, and the divine feminine.">
  <title>The Empress — Rattlesnakes & Rainbows</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css?v=7">
  <link rel="stylesheet" href="css/pages/product.css?v=7">
</head>
<body>

  <a class="skip-link" href="#main-content">Skip to main content</a>

  <nav class="site-nav" aria-label="Main navigation">
    <a href="index.html" class="site-nav-logo">Rattlesnakes & Rainbows</a>
    <div class="site-nav-links">
      <a href="shop.html" class="active">The Deck</a>
      <a href="murals.html">Murals</a>
      <a href="illustration.html">Illustration</a>
      <a href="about.html">About</a>
    </div>
    <button type="button" class="site-nav-cart" aria-label="Shopping cart">&#9901;</button>
    <button type="button" class="nav-hamburger" aria-label="Menu" aria-expanded="false" aria-controls="mobile-menu">
      <span></span><span></span><span></span>
    </button>
  </nav>

  <!-- Mobile menu overlay -->
  <nav class="mobile-menu" id="mobile-menu" aria-hidden="true" aria-label="Mobile navigation">
    <a href="shop.html">The Deck</a>
    <a href="murals.html">Murals</a>
    <a href="illustration.html">Illustration</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>

  <main id="main-content" class="product-page">
    <div class="detail-page">
      <!-- Top section: image + info -->
      <div class="detail-top">
        <div class="detail-image">
          <img src="assets/images/cards/empress.jpg" alt="The Empress — botanical tarot painting on birch wood by Sarah Stewart" loading="lazy">
        </div>
        <div class="detail-info">
          <a href="shop.html" class="detail-back">&larr; Back to The Deck</a>
          <p class="detail-hook">When it is time to trust in love without condition</p>
          <h1 class="detail-card-name">The Empress</h1>
          <p class="detail-plants">Swamp Hibiscus, Calendula, Turks Cap, Ginkgo & Holly</p>
          <p class="detail-meta">Card III | Venus | Earth | Painted September 2019</p>

          <div class="detail-affirmation">
            <p>I open up to and trust in Love. I give and receive in balance.</p>
          </div>

          <div class="detail-themes" aria-label="Key themes">
            <span class="detail-theme-tag">Venus</span>
            <span class="detail-theme-tag">Self-love</span>
            <span class="detail-theme-tag">Abundance</span>
            <span class="detail-theme-tag">Fertility</span>
            <span class="detail-theme-tag">Divine feminine</span>
            <span class="detail-theme-tag">Creativity</span>
            <span class="detail-theme-tag">Sensuality</span>
            <span class="detail-theme-tag">Intuition</span>
          </div>

          <div class="size-selector" role="group" aria-label="Print size" data-prices='{"8x10":"$34.00","11x14":"$58.00","18x24":"$95.00"}'>
            <button type="button" class="size-option" aria-pressed="false" data-size="8x10">8&times;10</button>
            <button type="button" class="size-option selected" aria-pressed="true" data-size="11x14">11&times;14</button>
            <button type="button" class="size-option" aria-pressed="false" data-size="18x24">18&times;24</button>
          </div>

          <p class="detail-price">$58.00</p>

          <div class="btn-row">
            <a class="btn btn-primary" href="#">Add to Cart</a>
          </div>
        </div>
      </div>

      <!-- The Meaning -->
      <div class="detail-content-section">
        <h2>The Meaning</h2>
        <p>The Empress is the mother of creation, the embodiment of Venus, the goddess of love. She represents the moment when you stop protecting your heart and allow yourself to receive. Not cautiously, not conditionally, but fully. The Empress does not earn love. She is love.</p>
        <p>In the Rainbow Botanical Tarot, the Empress channels five plant spirits that work together to open the heart, restore trust, and activate the creative life force that flows through every act of genuine love. When she appears, the invitation is to soften. To trust. To create from a place of overflow rather than scarcity.</p>
        <blockquote class="detail-core-message">
          When your heart is open and you are acting from a place of love — there is nothing to fear.
        </blockquote>
      </div>

      <!-- The Plant Medicine -->
      <div class="detail-content-section warm-bg">
        <h2>The Plant Medicine</h2>
        <p class="plant-intro">Five plants chosen for their ability to open the heart, restore trust, and activate the creative life force.</p>
        <ul class="plant-list">
          <li class="plant-item">
            <div class="plant-item-name">Swamp Hibiscus</div>
            <div class="plant-item-latin">Hibiscus coccineus</div>
            <div class="plant-item-desc">Activates root, heart, and sacral chakras. Frees sexual energy blockages and reconnects the body to its creative life force. The plant of embodied feminine power.</div>
          </li>
          <li class="plant-item">
            <div class="plant-item-name">Calendula</div>
            <div class="plant-item-latin">Calendula officinalis</div>
            <div class="plant-item-desc">Supports opening to love with confidence without losing oneself. The healer's flower, carrying warmth and receptive communication into every relationship.</div>
          </li>
          <li class="plant-item">
            <div class="plant-item-name">Turks Cap</div>
            <div class="plant-item-latin">Malvaviscus arboreus</div>
            <div class="plant-item-desc">A resilient native bloom that thrives in shade and sun alike. Carries the energy of adaptability and grace under all conditions.</div>
          </li>
          <li class="plant-item">
            <div class="plant-item-name">Ginkgo</div>
            <div class="plant-item-latin">Ginkgo biloba</div>
            <div class="plant-item-desc">Mental clarity and vital life force circulation. One of the oldest living tree species on Earth, carrying 200 million years of enduring wisdom.</div>
          </li>
          <li class="plant-item">
            <div class="plant-item-name">Holly</div>
            <div class="plant-item-latin">Ilex</div>
            <div class="plant-item-desc">Opens the heart, builds trust, dispels paranoia. The Bach flower remedy that transmutes suspicion and jealousy into generous, radiant love.</div>
          </li>
        </ul>
      </div>

      <!-- Related Cards -->
      <div class="detail-content-section">
        <h2>You Might Also Be Drawn To</h2>
        <p class="related-intro">If the Empress spoke to you, these cards carry medicine for the same opening.</p>
        <div class="related-cards">
          <div class="tarot-card">
            <a href="card-death.html">
              <div class="tarot-card-inner">
                <div class="tarot-card-image">
                  <img src="assets/images/cards/lovers.jpg" alt="The Lovers" loading="lazy">
                </div>
                <div class="tarot-card-info">
                  <div class="tarot-card-name">The Lovers</div>
                  <div class="tarot-card-plant">Jack in the Pulpit</div>
                  <div class="tarot-card-price">from $34.00</div>
                </div>
              </div>
            </a>
          </div>
          <div class="tarot-card">
            <a href="#">
              <div class="tarot-card-inner">
                <div class="tarot-card-image">
                  <img src="assets/images/cards/two-of-cups.jpg" alt="Two of Cups" loading="lazy">
                </div>
                <div class="tarot-card-info">
                  <div class="tarot-card-name">Two of Cups</div>
                  <div class="tarot-card-plant">Maize, Ladies Mantle & Wild Rose</div>
                  <div class="tarot-card-price">from $34.00</div>
                </div>
              </div>
            </a>
          </div>
          <div class="tarot-card">
            <a href="#">
              <div class="tarot-card-inner">
                <div class="tarot-card-image">
                  <img src="assets/images/cards/queen-of-cups.jpg" alt="Queen of Cups" loading="lazy">
                </div>
                <div class="tarot-card-info">
                  <div class="tarot-card-name">Queen of Cups</div>
                  <div class="tarot-card-plant">Mimosa</div>
                  <div class="tarot-card-price">from $34.00</div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>

      <!-- Email Signup -->
      <div class="detail-signup">
        <h2>Follow the Journey</h2>
        <p>New cards are still being painted. Be the first to see each one as it comes to life.</p>
        <form class="signup-form" action="#" method="post">
          <label for="card-email" class="visually-hidden">Email address</label>
          <input type="email" id="card-email" name="email" placeholder="Your email address" required autocomplete="email">
          <button type="submit">Subscribe</button>
        </form>
      </div>

      <!-- Trust badge -->
      <div class="detail-trust">
        Published in Taschen's Library of Esoterica: Plant Magic
      </div>
    </div>
  </main>

  <footer class="site-footer">
    <div class="footer-inner">
      <div class="footer-top">
        <div class="footer-brand">
          <div class="footer-logo">Rattlesnakes & Rainbows</div>
          <p>Botanical tarot paintings by Sarah Stewart. 78 cards. 78 plants. 78 portals to healing.</p>
        </div>
        <div class="footer-col">
          <div class="footer-col-title">Explore</div>
          <a href="shop.html">The Deck</a>
          <a href="murals.html">Murals</a>
          <a href="illustration.html">Illustration</a>
          <a href="about.html">About Sarah</a>
          <a href="contact.html">Contact</a>
        </div>
        <div class="footer-col">
          <div class="footer-col-title">Connect</div>
          <a href="#">Instagram</a>
          <a href="#">Patreon</a>
          <a href="#">Substack</a>
          <a href="#">Email</a>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="footer-copyright">&copy; 2026 Rattlesnakes and Rainbows. All rights reserved.</div>
        <div class="footer-social">
          <a href="#">IG</a>
          <a href="#">PA</a>
          <a href="#">SS</a>
        </div>
      </div>
    </div>
  </footer>

  <script src="js/main.js"></script>
  <script src="js/size-selector.js"></script>
</body>
</html>