24–72
Short context for the number.
*/
.mag-stat {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 44px;
align-items: center;
margin: 64px -16px;
padding: 44px 48px;
background:
radial-gradient(ellipse 80% 80% at 0% 50%, rgba(232, 119, 26, .14), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(26, 48, 96, .4), transparent 55%),
linear-gradient(160deg, rgba(14, 27, 61, .45) 0%, rgba(8, 10, 22, .3) 100%);
border: 1px solid rgba(232, 119, 26, .16);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 20px 60px rgba(0, 0, 0, .3),
inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* Gold rail along the left edge */
.mag-stat::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--gold), transparent 85%);
pointer-events: none;
}
/* Soft glow blob behind the number */
.mag-stat::after {
content: "";
position: absolute;
top: -60px; left: -40px;
width: 260px;
height: 260px;
background: radial-gradient(circle, rgba(232, 119, 26, .2), transparent 65%);
filter: blur(36px);
pointer-events: none;
z-index: 0;
}
.mag-stat-num {
position: relative;
z-index: 1;
font-size: clamp(3.2rem, 6.5vw, 5rem);
font-weight: 800;
color: var(--gold);
line-height: 1;
letter-spacing: -0.045em;
white-space: nowrap;
text-shadow: 0 4px 32px rgba(232, 119, 26, .35);
}
.mag-stat-body {
position: relative;
z-index: 1;
font-size: 1.04rem;
line-height: 1.6;
color: var(--text);
max-width: 44ch;
}
@media (max-width: 720px) {
.mag-stat {
grid-template-columns: 1fr;
gap: 12px;
padding: 32px 28px 34px;
margin: 48px 0;
}
.mag-stat-num { font-size: 2.8rem; }
}
/* ── block: card draw (Major Arcana funnel) ───────────────────
The brand-native conversion mechanism. Nine face-down cards in a
fan, drawn from a shuffled Major Arcana pool. User picks one, 3D
flip reveals the card + a topic-specific interpretation, bridge
and product CTA follow. One per article. Article supplies the
22 interpretations via window.__blogDraw — everything else is
template.
*/
.mag-draw {
margin: 80px -40px;
padding: 56px 40px 48px;
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 119, 26, .1), transparent 55%),
linear-gradient(180deg, #0c1430 0%, #060b1e 100%);
border: 1px solid rgba(255, 255, 255, .05);
border-radius: 24px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 28px 80px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.mag-draw::before {
content: "";
position: absolute;
top: -80px; left: 50%; transform: translateX(-50%);
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(232, 119, 26, .08), transparent 60%);
filter: blur(60px);
pointer-events: none;
}
.mag-draw-eyebrow {
position: relative;
font-size: .62rem;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin-bottom: 12px;
}
.mag-draw-title {
position: relative;
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
font-weight: 700;
color: var(--heading);
margin: 0 0 10px;
letter-spacing: -0.02em;
line-height: 1.22;
max-width: 24ch;
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
.mag-draw-sub {
position: relative;
color: var(--text2);
font-size: 1rem;
line-height: 1.55;
margin: 0 auto 40px;
max-width: 48ch;
font-style: italic;
}
.mag-draw-stage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
/* ── single card that flips ──────────────────────────────────
One card, face-down. Click the button, card rotates 180° on Y
revealing the randomly drawn Major. Stays in place. The button
fades out, the interpretation fades in below. */
.mag-draw-flipper {
position: relative;
width: 200px;
height: 340px;
perspective: 1600px;
}
.mag-draw-flipper-inner {
position: absolute;
inset: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateY(0deg);
transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.mag-draw.is-drawn .mag-draw-flipper-inner {
transform: rotateY(180deg);
}
/* NOTE: we deliberately do NOT animate the .mag-draw-flipper parent
with a transform (e.g. scale). Adding a 2D transform to the parent
flattens the 3D context and the child rotateY collapses to 2D
identity, killing the flip. Keep the parent transform-free. */
.mag-draw-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 10px;
overflow: hidden;
background-color: #0a0a12;
box-shadow:
0 24px 60px rgba(0, 0, 0, .6),
0 0 0 1px rgba(232, 119, 26, .3),
0 0 60px rgba(232, 119, 26, .14);
}
.mag-draw-face-back {
background-image: url('/images-tarot-luxury/Back-Image.png');
background-size: cover;
background-position: center;
}
.mag-draw-face-front {
transform: rotateY(180deg);
}
.mag-draw-face-front img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mag-draw-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 40px;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
letter-spacing: .02em;
color: #fff;
background: var(--gold);
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 12px 40px rgba(232, 119, 26, .35);
transition: background .25s ease, transform .25s ease, box-shadow .25s ease, opacity .4s ease;
position: relative;
overflow: hidden;
}
.mag-draw-button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .2), transparent 70%);
transform: translateX(-100%);
transition: transform .6s ease;
}
.mag-draw-button:hover {
background: var(--gold-hot);
transform: translateY(-2px);
box-shadow: 0 18px 52px rgba(232, 119, 26, .48);
}
.mag-draw-button:hover::before { transform: translateX(100%); }
.mag-draw-button-icon {
display: inline-block;
font-size: 1.1rem;
line-height: 1;
}
.mag-draw.is-drawn .mag-draw-button {
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
position: absolute;
visibility: hidden;
}
/* ── reveal state — text that appears below the flipped card ── */
.mag-draw-reveal {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 56ch;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity .6s ease .6s, transform .6s ease .6s;
}
.mag-draw.is-drawn .mag-draw-reveal {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Upgraded result title: small gold eyebrow, then a display-weight
card name, italic tagline, gold divider, and the reading body.
Gives the reveal a proper editorial title hierarchy instead of
a caption-sized label under the image. */
.mag-draw-result-eyebrow {
font-size: .62rem;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin: 36px 0 14px;
}
.mag-draw-card-name {
font-size: clamp(1.9rem, 3.4vw, 2.5rem);
font-weight: 800;
color: var(--heading);
letter-spacing: -0.025em;
line-height: 1.08;
margin: 0 0 10px;
text-wrap: balance;
}
.mag-draw-card-tagline {
font-size: 1.02rem;
font-style: italic;
color: var(--text);
line-height: 1.45;
margin: 0 0 20px;
max-width: 36ch;
text-wrap: balance;
}
.mag-draw-card-divider {
width: 48px;
height: 2px;
background: linear-gradient(to right, var(--gold), var(--ember));
border-radius: 2px;
margin: 0 0 22px;
}
.mag-draw-card-body {
font-size: 1.04rem;
line-height: 1.65;
color: var(--heading);
margin: 0;
text-wrap: balance;
font-weight: 400;
max-width: 54ch;
}
.mag-draw-bridge {
margin: 32px auto 24px;
max-width: 52ch;
font-size: .92rem;
line-height: 1.6;
color: var(--text2);
font-style: italic;
}
.mag-draw-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: var(--gold);
color: #fff;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
font-size: .95rem;
letter-spacing: .01em;
box-shadow: 0 10px 36px rgba(232, 119, 26, .3);
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.mag-draw-cta:hover {
background: var(--gold-hot);
transform: translateY(-2px);
box-shadow: 0 16px 44px rgba(232, 119, 26, .4);
}
.mag-draw-reshuffle {
display: block;
margin: 18px auto 0;
background: none;
border: none;
color: var(--text3);
font-family: inherit;
font-size: .78rem;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .25s ease;
}
.mag-draw-reshuffle:hover { color: var(--text); }
@media (max-width: 720px) {
.mag-draw { margin: 60px 0; padding: 40px 20px 36px; }
.mag-draw-flipper { width: 160px; height: 272px; }
.mag-draw-button { padding: 16px 32px; font-size: .94rem; }
}
/* ── block: takeaway / key insight box (end-of-article) ────────
HTML: