/* ─────────────────────────────────────────────────────────────────
* /css/birth-chart-v2.css — Free Birth Chart page (Phase 7, brand v2)
* Ported from /_mockups/birthchart-loader-2026-05-13/full-page-b-cosmic-observatory.html
* Design: "The Cosmic Observatory" — dark cosmic hero + parchment body
* Date: 2026-05-14
* ───────────────────────────────────────────────────────────────── */
:root {
--parchment: #F0DFC8;
--parchment-light: #FAF1E1;
--parchment-dark: #E8D2B5;
--vellum: #F6ECD2;
--vellum-warm: #FDF5E3;
--ink: #2D1F38;
--ink-soft: rgba(45, 31, 56, 0.78);
--burgundy: #6B1F2C;
--burgundy-deep: #4A1620;
--burgundy-hover: #8C2F3F;
--aubergine: #3A1F38;
--aubergine-deep: #2A1428;
--night: #0B1530;
--night-deep: #060C20;
--night-mid: #131E3F;
--gold: #B89150;
--gold-bright: #D4AC68;
--gold-deep: #8E6E3A;
--gold-pale: #E5C68A;
--gold-shimmer: #F0D89A;
--cream: #EDE4C8;
--rose-amber: #F0AF8F;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--parchment);
color: var(--ink);
font-family: 'EB Garamond', Georgia, serif;
/* DO NOT set font-size on html or body here. Setting font-size on html
bumps every rem-based size site-wide, including the shared top-nav,
which made the nav render ~15% larger on this page only. The brand's
base rem-anchor is 16px (browser default) — keep it. */
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.4; pointer-events: none; z-index: 1; mix-blend-mode: multiply;
}
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 10;
}
.container-narrow {
max-width: 920px;
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 10;
}
/* ─── HERO — Dark Cosmic ───────────────────────────────── */
.hero-cosmic {
position: relative;
background:
radial-gradient(ellipse at 50% 30%, var(--night-mid) 0%, var(--night) 50%, var(--night-deep) 100%);
padding: 0.75rem 0 2rem;
overflow: hidden;
border-bottom: 2px solid var(--gold);
box-shadow: 0 0 60px rgba(212, 172, 104, 0.1);
}
.starfield-hero {
position: absolute; inset: 0; pointer-events: none;
}
.star {
position: absolute;
background: #FFF;
border-radius: 50%;
opacity: 0;
}
.star.tier-1 { width: 1.2px; height: 1.2px; }
.star.tier-2 { width: 1.8px; height: 1.8px; background: #FFF8E8; }
.star.tier-3 { width: 2.8px; height: 2.8px; background: #FFF8E8; box-shadow: 0 0 6px rgba(255, 230, 180, 0.7); }
@keyframes twinkle {
0%, 100% { opacity: 0.25; }
50% { opacity: 1; }
}
/* nebula clouds — only the bottom-right one remains for warmth */
.neb-2 {
position: absolute;
bottom: -20%; right: -10%;
width: 50%; height: 60%;
background: radial-gradient(circle, rgba(107, 31, 44, 0.18), transparent 60%);
pointer-events: none;
mix-blend-mode: screen;
}
/* horizon glow at bottom */
.hero-cosmic::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 30%;
background: linear-gradient(180deg, transparent, rgba(212, 172, 104, 0.08));
pointer-events: none;
}
/* Glyph font stack — matches production for proper zodiac rendering */
.glyph-text {
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', 'Arial Unicode MS', sans-serif !important;
}
svg text[data-glyph] {
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', 'Arial Unicode MS', sans-serif;
}
/* container holding the hero copy, so the back link can hang off it like /horoscopes/ */
.hero-content-wrap {
position: relative;
max-width: 920px;
margin: 0 auto;
padding: 1.3rem 2rem 1.5rem; /* same 0.5rem gap above dept eyebrow as production /tarot/ */
text-align: center;
}
/* Back link — matches .page-hero-back from yes-no-tarot.css byte-for-byte but light variant.
Top sits 0.5rem above the wrap's padding-top (= where ASTROLOGY eyebrow starts).
Production uses 2rem wrap-pad + 1.5rem back-link-top (0.5rem gap).
We use 1.3rem wrap-pad + 0.8rem back-link-top (same 0.5rem gap, tighter overall). */
.back-link {
position: absolute;
top: 0.8rem;
left: -130px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.18em;
color: var(--gold-pale);
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid var(--gold-pale);
transition: color 0.2s, border-color 0.2s, left 0.2s;
z-index: 3;
white-space: nowrap;
text-shadow: 0 0 8px rgba(212, 172, 104, 0.3);
}
.back-link:hover { color: var(--gold-shimmer); border-color: var(--gold-shimmer); }
.back-link::before { content: "←"; font-style: italic; }
@media (max-width: 1280px) { .back-link { left: -80px; } }
@media (max-width: 1180px) { .back-link { left: -40px; } }
@media (max-width: 1100px) { .back-link { left: 0; } }
@media (max-width: 640px) {
.back-link { position: static; display: inline-flex; margin: 0 auto 1.5rem; }
}
/* Department tag — matches .page-hero-dept byte-for-byte (EB Garamond small-caps) */
.dept-eyebrow-cosmic {
text-align: center;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.15rem;
letter-spacing: 0.36em;
color: var(--gold-pale);
margin: 0 0 0.85rem;
text-shadow: 0 0 10px rgba(212, 172, 104, 0.4);
position: relative; z-index: 5;
}
/* Rule — matches .page-hero-rule with gradient hairlines + ✦ middle (italic Garamond) */
.hero-rule-cosmic {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1rem auto 1.25rem;
color: var(--gold-bright);
position: relative; z-index: 5;
}
.hero-rule-cosmic::before, .hero-rule-cosmic::after {
content: "";
flex: 0 1 70px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-bright) 50%, transparent);
box-shadow: 0 0 6px rgba(212, 172, 104, 0.4);
}
.hero-rule-mark {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.1rem;
line-height: 1;
color: var(--gold-bright);
text-shadow: 0 0 10px rgba(212, 172, 104, 0.6);
}
.hero-cosmic h1 {
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2.8rem, 6vw, 4.8rem);
color: var(--cream);
line-height: 1.05;
margin-bottom: 0.8rem;
text-shadow: 0 0 24px rgba(212, 172, 104, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
position: relative; z-index: 5;
}
.hero-cosmic h1 em {
font-family: 'Italianno', cursive;
color: var(--gold-shimmer);
font-style: normal;
font-weight: 400;
font-size: 1.5em;
vertical-align: -0.05em;
text-shadow: 0 0 20px rgba(212, 172, 104, 0.7);
}
.hero-script-cosmic {
text-align: center;
font-family: 'Italianno', cursive;
font-size: clamp(2rem, 3.6vw, 2.8rem);
color: var(--gold-shimmer);
-webkit-text-stroke: 0.3px var(--gold-bright);
line-height: 1;
margin-bottom: 1.5rem;
text-shadow: 0 0 18px rgba(212, 172, 104, 0.5);
position: relative; z-index: 5;
}
.hero-fleuron-cosmic {
text-align: center;
color: var(--gold-bright);
font-size: 1.4rem;
margin: 1.2rem auto;
text-shadow: 0 0 12px rgba(212, 172, 104, 0.6);
position: relative; z-index: 5;
}
.hero-deck-cosmic {
text-align: center;
max-width: 640px;
margin: 0 auto;
font-size: 1.18rem;
font-style: italic;
color: var(--cream);
line-height: 1.65;
position: relative; z-index: 5;
}
.hero-deck-cosmic strong {
color: var(--gold-shimmer);
font-weight: 600;
}
/* hero band — cosmic medallions */
.hero-band-cosmic {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 2.5rem;
margin-top: 1.8rem;
max-width: 920px;
margin-left: auto;
margin-right: auto;
position: relative; z-index: 5;
}
.medallion-cosmic {
width: 130px; height: 130px;
position: relative;
}
.medallion-cosmic::before {
content: '';
position: absolute; inset: 0;
border: 1.5px solid var(--gold-bright);
border-radius: 50%;
background: radial-gradient(circle, var(--night-mid), var(--night-deep));
box-shadow:
0 0 30px rgba(212, 172, 104, 0.3),
inset 0 0 20px rgba(212, 172, 104, 0.15);
animation: medallionHalo 4.5s ease-in-out infinite;
}
@keyframes medallionHalo {
0%, 100% { box-shadow: 0 0 30px rgba(212, 172, 104, 0.3), inset 0 0 20px rgba(212, 172, 104, 0.15); }
50% { box-shadow: 0 0 48px rgba(212, 172, 104, 0.55), inset 0 0 28px rgba(212, 172, 104, 0.25); }
}
.medallion-cosmic svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
/* ─── LEFT MEDALLION: Sun + orbiting planets ─── */
.med-sun-orb {
transform-origin: 50px 50px;
animation: sunPulse 3s ease-in-out infinite;
}
@keyframes sunPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(240, 216, 154, 0.7)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 14px rgba(240, 216, 154, 1)); }
}
.med-sun-rays {
transform-origin: 50px 50px;
animation: sunRotate 24s linear infinite, sunRayPulse 3s ease-in-out infinite;
}
@keyframes sunRotate { to { transform: rotate(360deg); } }
@keyframes sunRayPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.med-orbit-line {
fill: none;
stroke: rgba(212, 172, 104, 0.18);
stroke-width: 0.4;
}
.med-orbiter {
transform-origin: 50px 50px;
}
/* All planets orbit counter-clockwise — the real direction planets move
when viewed from above the ecliptic North pole. Different speeds give
the visual variety (closer planets faster, outer planets slower, matching
Kepler's third law). */
.med-orbiter-1 { animation: orbitSpin 7s linear infinite reverse; } /* fast inner */
.med-orbiter-2 { animation: orbitSpin 11s linear infinite reverse; } /* mid-inner */
.med-orbiter-3 { animation: orbitSpin 17s linear infinite reverse; } /* mid-outer */
.med-orbiter-4 { animation: orbitSpin 25s linear infinite reverse; } /* slow outer */
@keyframes orbitSpin { to { transform: rotate(360deg); } }
/* ─── RIGHT MEDALLION: moon + twinkling stars ─── */
.med-moon {
animation: moonGlow 5s ease-in-out infinite;
transform-origin: center;
}
@keyframes moonGlow {
0%, 100% { filter: drop-shadow(0 0 6px rgba(240, 216, 154, 0.5)); }
50% { filter: drop-shadow(0 0 14px rgba(240, 216, 154, 0.95)); }
}
.med-star {
transform-origin: center;
animation: medStarTwinkle 2.5s ease-in-out infinite;
}
.med-star.s1 { animation-delay: 0s; animation-duration: 2.4s; }
.med-star.s2 { animation-delay: 0.4s; animation-duration: 3.1s; }
.med-star.s3 { animation-delay: 0.8s; animation-duration: 2.7s; }
.med-star.s4 { animation-delay: 1.2s; animation-duration: 3.5s; }
.med-star.s5 { animation-delay: 0.2s; animation-duration: 2.9s; }
.med-star.s6 { animation-delay: 1.6s; animation-duration: 3.3s; }
.med-star.s7 { animation-delay: 0.6s; animation-duration: 2.2s; }
.med-star.s8 { animation-delay: 1.0s; animation-duration: 4.0s; }
.med-star.s9 { animation-delay: 1.4s; animation-duration: 2.6s; }
.med-star.s10 { animation-delay: 0.5s; animation-duration: 3.2s; }
@keyframes medStarTwinkle {
0%, 100% { opacity: 0.25; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.med-sun-orb, .med-sun-rays, .med-orbiter, .med-moon, .med-star,
.medallion-cosmic::before { animation: none !important; }
}
/* ─── BODY (parchment) STARTS HERE ────────────────────── */
.form-section {
margin-top: 0;
padding: 2.4rem 0 4rem;
position: relative;
}
/* Form eyebrow — matches /tarot/ "Free Tarot Readings" but BIG */
.form-eyebrow {
text-align: center;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 0.18em;
color: var(--burgundy);
margin-bottom: 0.9rem;
line-height: 1.05;
}
.form-title {
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
color: var(--ink-soft);
line-height: 1.2;
margin-bottom: 2rem;
}
.form-frame {
max-width: 720px;
margin: 0 auto;
background:
radial-gradient(ellipse at 50% 0%, var(--vellum-warm) 0%, var(--parchment-light) 60%, var(--parchment-dark) 100%);
border: 1px solid rgba(184, 145, 80, 0.5);
box-shadow:
0 20px 60px rgba(74, 22, 32, 0.2),
inset 0 0 0 8px var(--vellum-warm),
inset 0 0 0 9px rgba(184, 145, 80, 0.5);
padding: 2.4rem 2.5rem 3rem;
position: relative;
border-radius: 4px;
}
.form-corner {
position: absolute;
width: 32px; height: 32px;
pointer-events: none;
opacity: 0.7;
}
.form-corner.tl { top: 16px; left: 16px; }
.form-corner.tr { top: 16px; right: 16px; transform: scaleX(-1); }
.form-corner.bl { bottom: 16px; left: 16px; transform: scaleY(-1); }
.form-corner.br { bottom: 16px; right: 16px; transform: scale(-1); }
.form-row { margin-bottom: 1.4rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-3 { display: grid; grid-template-columns: 1.1fr 0.9fr 1.1fr; gap: 0.6rem; }
.form-row-time { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; }
@media (max-width: 580px) {
.form-row-2 { grid-template-columns: 1fr; }
}
.form-label {
display: block;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.07rem;
letter-spacing: 0.18em;
color: var(--burgundy);
margin-bottom: 0.5rem;
}
.form-input, .form-select {
width: 100%;
padding: 0.9rem 1rem;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(142, 110, 58, 0.45);
border-radius: 3px;
font-family: 'EB Garamond', serif;
font-size: 1.19rem;
font-weight: 500;
color: var(--ink);
transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.form-input::placeholder { color: rgba(45, 31, 56, 0.45); font-style: italic; }
.form-input:focus, .form-select:focus {
outline: none;
border-color: var(--gold-bright);
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 0 3px rgba(212, 172, 104, 0.2);
}
.form-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 10px;
padding-right: 2.4rem;
text-align-last: left;
}
.form-hint {
font-size: 1.07rem;
font-style: italic;
font-weight: 600;
color: #4A1620;
margin-top: 0.5rem;
}
.checkbox-row {
display: flex;
align-items: flex-start;
gap: 0.7rem;
margin-top: 0.75rem;
font-size: 1.15rem;
color: #2D1F38;
flex-wrap: wrap;
}
.checkbox-row input {
width: 18px; height: 18px;
accent-color: var(--burgundy);
margin-top: 3px;
flex-shrink: 0;
}
.checkbox-row label {
font-style: italic;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
padding-top: 1px;
}
.checkbox-inline-hint {
flex: 1 1 320px;
min-width: 260px;
font-size: 1.04rem;
font-style: italic;
font-weight: 600;
color: #4A1620;
line-height: 1.45;
padding-left: 0.6rem;
border-left: 2px solid rgba(184, 145, 80, 0.4);
}
@media (max-width: 580px) {
.checkbox-inline-hint {
flex-basis: 100%;
padding-left: 0;
border-left: none;
margin-top: 0.4rem;
}
}
.form-divider {
display: flex;
align-items: center;
gap: 1rem;
margin: 2.4rem 0 1.6rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
font-size: 1.41rem;
letter-spacing: 0.36em;
color: var(--burgundy-deep);
/* small-caps + 0.36em letter-spacing drifts text right by one tracking unit
at the end; compensate so "— Current Location —" sits true-centered */
padding-left: 0.36em;
}
.form-divider::before, .form-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold));
}
.form-divider::after { background: linear-gradient(90deg, var(--gold), transparent); }
.form-submit-wrap { text-align: center; margin-top: 2.4rem; }
.form-submit {
background: linear-gradient(180deg, var(--gold-pale), var(--gold-bright) 50%, var(--gold-deep));
color: var(--burgundy-deep);
font-family: 'Cinzel', serif;
font-weight: 800;
font-size: 1.04rem;
letter-spacing: 0.32em;
text-transform: uppercase;
padding: 1.2rem 3rem;
border: 1.5px solid var(--gold-deep);
border-radius: 999px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(74, 22, 32, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
}
.form-submit:hover { transform: translateY(-2px); }
.form-fineprint {
margin-top: 1.2rem;
text-align: center;
font-size: 1.10rem;
font-style: italic;
font-weight: 500;
color: var(--burgundy);
line-height: 1.5;
}
.form-fineprint a {
color: var(--burgundy-deep);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(74, 22, 32, 0.5);
}
/* ─── ANIMATION (Cosmic — dark full-bleed) ─────────────── */
.animation-section-cosmic {
margin-top: 2rem;
padding: 0;
position: relative;
background: var(--night-deep);
border-top: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}
@media (max-width: 720px) {
}
.animation-cosmic-frame {
max-width: 100%;
margin: 0;
aspect-ratio: 16/8;
max-height: 620px;
min-height: 520px;
background:
radial-gradient(ellipse at 50% 35%, var(--night-mid) 0%, var(--night) 50%, var(--night-deep) 100%);
border-top: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
box-shadow:
inset 0 0 80px rgba(212, 172, 104, 0.1),
0 0 40px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.8rem 2rem 1.4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.starfield-anim {
position: absolute; inset: 0; pointer-events: none;
}
.anim-eyebrow-cosmic {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.42em;
color: var(--gold-pale);
text-transform: uppercase;
margin-bottom: 0.5rem;
text-shadow: 0 0 8px rgba(212, 172, 104, 0.4);
position: relative; z-index: 5;
}
.anim-script-cosmic {
font-family: 'Italianno', cursive;
font-size: clamp(2.6rem, 5vw, 3.8rem);
color: var(--gold-shimmer);
-webkit-text-stroke: 0.3px var(--gold-bright);
line-height: 1;
margin-bottom: 1.5rem;
text-shadow: 0 0 20px rgba(212, 172, 104, 0.6);
position: relative; z-index: 5;
}
.anim-script-cosmic::after {
content: '...';
color: var(--gold-shimmer);
animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
0% { opacity: 0.2; }
50% { opacity: 1; }
}
.anim-mini-wheel-cosmic {
width: 240px; height: 240px;
margin: 1rem auto;
position: relative; z-index: 5;
filter: drop-shadow(0 0 24px rgba(212, 172, 104, 0.3));
}
.anim-mini-wheel-cosmic svg {
width: 100%; height: 100%;
animation: slowRotate 30s linear infinite;
}
@keyframes slowRotate { to { transform: rotate(360deg); } }
.anim-note-cosmic {
margin-top: 1.4rem;
font-style: italic;
color: rgba(237, 228, 200, 0.7);
font-size: 0.95rem;
position: relative; z-index: 5;
}
.anim-link-cosmic {
display: inline-block;
margin-top: 1.2rem;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.32em;
color: var(--gold-pale);
text-transform: uppercase;
text-decoration: underline;
text-decoration-color: rgba(212, 172, 104, 0.4);
text-underline-offset: 4px;
position: relative; z-index: 5;
}
.anim-link-cosmic:hover { color: var(--gold-shimmer); }
/* ─── RESULTS REVEAL (parchment again) ─────────────────── */
.results-section {
padding: 2.4rem 0 0.5rem;
position: relative;
}
.results-eyebrow {
text-align: center;
font-family: 'Italianno', cursive;
font-weight: 400;
font-size: clamp(2rem, 4vw, 3rem);
color: var(--gold-deep);
-webkit-text-stroke: 0.3px var(--gold-deep);
line-height: 0.85;
margin-bottom: -0.15rem;
}
.results-title {
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
color: var(--burgundy);
line-height: 1;
margin-top: 0;
margin-bottom: 0.6rem;
}
.results-title em {
font-family: 'Italianno', cursive;
color: var(--gold-deep);
font-style: normal;
font-weight: 400;
font-size: 1.5em;
-webkit-text-stroke: 0.3px var(--gold-deep);
}
.results-meta {
text-align: center;
margin-top: 0.8rem;
color: var(--ink);
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.22rem;
line-height: 1.5;
}
.results-meta span { color: var(--burgundy); font-weight: 700; }
.chart-wheel-wrap {
margin: 1.4rem auto 0;
max-width: 820px;
position: relative;
}
.chart-wheel-svg {
width: 100%;
aspect-ratio: 1/1;
filter: drop-shadow(0 20px 50px rgba(15, 59, 59, 0.4));
}
/* Variant C chart styling (matches /api/birth_chart.php embedded styles) */
.chart-wheel-svg .vc-outer-ring { fill: #0f3b3b; }
.chart-wheel-svg .vc-bowl { fill: #f6ecd2; }
.chart-wheel-svg .vc-ring-line { stroke: #ecc75f; stroke-width: 0.6; fill: none; opacity: 0.45; }
.chart-wheel-svg .vc-house-line { stroke: #ecc75f; stroke-width: 0.5; opacity: 0.3; stroke-dasharray: 3 3; }
.chart-wheel-svg .vc-house-num {
font-family: 'Cinzel', serif;
font-weight: 600;
fill: #ecc75f;
opacity: 0.85;
}
.chart-wheel-svg .vc-sign-glyph {
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif;
font-weight: bold;
}
.chart-wheel-svg .vc-sign-glyph.fire { fill: #f3b94e; }
.chart-wheel-svg .vc-sign-glyph.earth { fill: #b58d3a; }
.chart-wheel-svg .vc-sign-glyph.air { fill: #e6d699; }
.chart-wheel-svg .vc-sign-glyph.water { fill: #c5b270; }
.chart-wheel-svg .vc-cusp-deg {
font-family: 'Marcellus', serif;
font-size: 11px;
fill: #f0e3c4;
}
.chart-wheel-svg .vc-cusp-min {
font-family: 'Marcellus', serif;
font-size: 8px;
fill: #d6c4a0;
opacity: 0.85;
}
.chart-wheel-svg .vc-angle {
font-family: 'Italianno', cursive;
fill: #ecc75f;
font-weight: bold;
}
.chart-wheel-svg .vc-planet {
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif;
font-weight: bold;
font-size: 19px;
}
/* per-planet colors (matches production chart) */
.chart-wheel-svg .vc-planet.sun { fill: #D78A4D; }
.chart-wheel-svg .vc-planet.moon { fill: #8FBFC8; }
.chart-wheel-svg .vc-planet.mercury { fill: #95B36F; }
.chart-wheel-svg .vc-planet.venus { fill: #95B36F; }
.chart-wheel-svg .vc-planet.mars { fill: #A8C2DC; }
.chart-wheel-svg .vc-planet.jupiter { fill: #E8B547; }
.chart-wheel-svg .vc-planet.saturn { fill: #95B36F; }
.chart-wheel-svg .vc-planet.uranus { fill: #8FBFC8; }
.chart-wheel-svg .vc-planet.neptune { fill: #9B7DC4; }
.chart-wheel-svg .vc-planet.pluto { fill: #9B7DC4; }
.chart-wheel-svg .vc-planet.chiron { fill: #D9968F; }
.chart-wheel-svg .vc-planet.node { fill: #ecc75f; }
.chart-wheel-svg .vc-planet-info {
font-family: 'Marcellus', serif;
font-size: 9px;
fill: #4a3a2a;
}
.chart-wheel-svg .vc-planet-sign {
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif;
font-size: 10px;
fill: #6B1F2C;
font-weight: bold;
}
.chart-wheel-svg .vc-retro {
font-family: 'Marcellus', serif;
font-size: 7px;
fill: #6B1F2C;
font-style: italic;
}
/* aspect lines — colored per aspect type */
.chart-wheel-svg .vc-aspect { stroke-width: 1.2; fill: none; opacity: 0.85; }
.chart-wheel-svg .vc-aspect.conjunction { stroke: #6B1F2C; stroke-width: 1.5; }
.chart-wheel-svg .vc-aspect.opposition { stroke: #4A1620; }
.chart-wheel-svg .vc-aspect.trine { stroke: #4F8FBF; }
.chart-wheel-svg .vc-aspect.square { stroke: #B85542; }
.chart-wheel-svg .vc-aspect.sextile { stroke: #4FB8A8; }
.chart-wheel-svg .vc-aspect.quincunx { stroke: #9B7DC4; stroke-dasharray: 3 2; }
.trio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
margin: 3.5rem auto 0;
max-width: 920px;
}
@media (max-width: 720px) { .trio { grid-template-columns: 1fr; } }
.trio-card {
background: linear-gradient(180deg, var(--vellum-warm), var(--parchment));
border: 1px solid rgba(184, 145, 80, 0.5);
box-shadow:
0 8px 24px rgba(74, 22, 32, 0.12),
inset 0 0 0 4px var(--vellum-warm),
inset 0 0 0 5px rgba(184, 145, 80, 0.4);
padding: 1.8rem 1.4rem;
text-align: center;
border-radius: 4px;
position: relative;
}
.trio-glyph { font-family: 'Marcellus', serif; font-size: 3.4rem; color: var(--burgundy); line-height: 1; margin-bottom: 0.4rem; }
.trio-label { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.36em; color: var(--gold-deep); text-transform: uppercase; margin-bottom: 0.4rem; }
.trio-sign { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.7rem; color: var(--burgundy); line-height: 1.1; margin-bottom: 0.3rem; }
.trio-deg { font-family: 'Marcellus', serif; font-size: 0.95rem; color: var(--ink-soft); }
.reading {
max-width: 760px;
margin: 4rem auto 0;
position: relative;
padding: 0 1rem;
}
.reading-eyebrow {
text-align: center;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
letter-spacing: 0.18em;
color: var(--burgundy);
line-height: 1.05;
margin-bottom: 0.7rem;
}
.reading-script {
text-align: center;
font-family: 'Italianno', cursive;
font-size: clamp(2rem, 3.6vw, 2.8rem);
color: var(--gold-deep);
-webkit-text-stroke: 0.3px var(--gold-deep);
line-height: 1;
margin-bottom: 2.2rem;
}
.reading p {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.18rem;
line-height: 1.72;
color: rgba(45, 31, 56, 0.92);
margin: 0 0 1.4rem;
text-align: left;
letter-spacing: 0.005em;
}
.reading p strong {
color: var(--burgundy);
font-weight: 700;
font-style: italic;
}
.reading p.reading-closer {
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.08rem;
line-height: 1.55;
color: var(--burgundy);
margin: 2.4rem auto 0;
padding-top: 1.6rem;
border-top: 1px solid rgba(184, 145, 80, 0.4);
max-width: 580px;
}
.reading p.reading-closer strong {
font-style: italic;
font-weight: 700;
color: var(--burgundy-deep);
}
.reading-sub {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700;
font-size: clamp(1.5rem, 2.8vw, 2rem);
letter-spacing: 0.01em;
color: var(--burgundy);
margin-top: 2.4rem;
margin-bottom: 0.8rem;
border-top: 1px solid rgba(184, 145, 80, 0.4);
padding-top: 1.6rem;
text-align: center;
line-height: 1.15;
}
.reading-sub em {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 900;
color: var(--gold-deep);
font-size: 1.08em;
margin-left: 0.1em;
letter-spacing: 0.01em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* ─── INLINE UPSELL CALLOUTS (Phase 13)
Injected by birth-chart-v2.js between reading sections:
- .reading-upsell-soft sits after Rising → Birth Chart Blueprint (quiet)
- .reading-upsell-bold sits after Mars → Membership trial (loud)
─────────────────────────────────────────────────────── */
.reading-upsell {
/* base — every inline callout */
display: block;
box-sizing: border-box;
}
/* SOFT — subtle gold-bordered single line */
.reading-upsell-soft {
margin: 2.6rem auto 2.2rem;
max-width: 620px;
padding: 1.2rem 1.6rem;
background:
linear-gradient(90deg, transparent, rgba(212, 172, 104, 0.08), transparent);
border-top: 1px solid rgba(184, 145, 80, 0.45);
border-bottom: 1px solid rgba(184, 145, 80, 0.45);
text-align: center;
}
.reading-upsell-soft p {
margin: 0;
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.06rem;
line-height: 1.55;
color: var(--ink);
}
.reading-upsell-soft .reading-upsell-link {
display: inline-block;
margin-top: 0.45rem;
color: var(--burgundy);
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700;
font-size: 1.04rem;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
transition: color 0.25s, background-size 0.25s;
}
.reading-upsell-soft .reading-upsell-link:hover {
color: var(--gold-deep);
background-size: 100% 2px;
}
/* BOLD — full panel with CTA button, aubergine + gold-foil */
.reading-upsell-bold {
position: relative;
margin: 1.4rem auto 2rem; /* was 3.2rem top — pulled tight under Mars paragraph */
max-width: 720px;
padding: 2.4rem 2.4rem 2.2rem;
background:
radial-gradient(ellipse at 50% 0%, rgba(212, 172, 104, 0.25), transparent 65%),
linear-gradient(180deg, var(--aubergine, #3A1F38) 0%, var(--aubergine-deep, #2A1428) 100%);
border: 1px solid var(--gold, #B89150);
border-radius: 4px;
box-shadow:
inset 0 0 0 5px var(--aubergine-deep, #2A1428),
inset 0 0 0 6px rgba(212, 172, 104, 0.45),
0 14px 36px rgba(42, 20, 40, 0.42);
color: var(--cream, #EDE4C8);
text-align: center;
overflow: hidden;
}
.reading-upsell-bold::before {
/* faint starfield over the panel */
content: '';
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.45;
background-image:
radial-gradient(circle at 12% 22%, rgba(240, 216, 154, 0.6) 0.5px, transparent 1.5px),
radial-gradient(circle at 86% 14%, rgba(240, 216, 154, 0.5) 0.5px, transparent 1.5px),
radial-gradient(circle at 50% 88%, rgba(240, 216, 154, 0.55) 0.5px, transparent 1.5px),
radial-gradient(circle at 92% 72%, rgba(240, 216, 154, 0.6) 0.5px, transparent 1.5px),
radial-gradient(circle at 8% 76%, rgba(240, 216, 154, 0.4) 0.5px, transparent 1.5px);
}
.reading-upsell-bold > * { position: relative; z-index: 1; }
.reading-upsell-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 0.85rem;
letter-spacing: 0.36em;
color: var(--gold-shimmer, #F0D89A);
margin-bottom: 0.7rem;
}
.reading-upsell-title {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: clamp(1.45rem, 2.6vw, 1.85rem);
letter-spacing: 0.02em;
color: var(--cream, #EDE4C8);
margin: 0 0 0.7rem;
line-height: 1.18;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.reading-upsell-title em {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
color: var(--gold-bright, #D4AC68);
letter-spacing: 0;
}
/* Specificity bump: .reading p { color: dark-ink } (line 858) has 0,1,1
and was winning over .reading-upsell-deck (0,1,0). Scoping to the
parent .reading-upsell-bold gives us 0,2,0 — beats .reading p. */
.reading-upsell-bold .reading-upsell-deck {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.1rem;
line-height: 1.6;
color: var(--cream, #EDE4C8);
margin: 0 auto 1.4rem;
max-width: 560px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.reading-upsell-bold .reading-upsell-deck em {
color: var(--gold-bright, #D4AC68);
font-weight: 600;
font-style: italic;
}
.reading-upsell-bold .reading-upsell-deck strong {
color: var(--gold-shimmer, #F0D89A);
font-weight: 700;
font-style: normal;
}
.reading-upsell-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
background: linear-gradient(180deg, var(--gold-pale, #E5C68A), var(--gold-bright, #D4AC68) 50%, var(--gold-deep, #8E6E3A));
color: var(--burgundy-deep, #4A1620);
font-family: 'Cinzel', serif;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.28em;
text-transform: uppercase;
padding: 0.95rem 2rem;
border: 1.5px solid var(--gold-deep, #8E6E3A);
border-radius: 999px;
text-decoration: none;
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
}
.reading-upsell-cta::after {
content: '⟶';
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 1.15em;
margin-left: 0.15em;
letter-spacing: 0;
}
.reading-upsell-cta:hover {
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Specificity bump (same reason as .reading-upsell-bold .reading-upsell-deck) */
.reading-upsell-bold .reading-upsell-micro {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 0.92rem;
color: rgba(237, 228, 200, 0.78);
margin: 0.9rem 0 0;
text-align: center;
}
@media (max-width: 720px) {
.reading-upsell-soft { padding: 1rem 1.2rem; margin: 2rem auto 1.8rem; }
.reading-upsell-bold { padding: 1.8rem 1.2rem 1.6rem; margin: 2.4rem auto 2rem; }
.reading-upsell-cta { padding: 0.85rem 1.4rem; font-size: 0.85rem; letter-spacing: 0.22em; }
}
/* ─── TABLES ──────────────────────────────────────────── */
.tables-section { padding: 0.5rem 0 4rem; }
.tables-eyebrow {
text-align: center;
font-family: 'Italianno', cursive;
font-size: 2.4rem;
color: var(--gold-deep);
margin-bottom: 0.4rem;
-webkit-text-stroke: 0.3px var(--gold-deep);
}
.tables-title {
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(1.8rem, 3.4vw, 2.4rem);
color: var(--burgundy);
margin: 0 0 2rem;
}
.tables-title em {
font-family: 'Italianno', cursive;
color: var(--gold-deep);
font-style: normal;
font-weight: 400;
font-size: 1.5em;
-webkit-text-stroke: 0.3px var(--gold-deep);
}
.tables-grid { display: grid; grid-template-columns: 1fr; gap: 1.8rem; }
@media (min-width: 880px) { .tables-grid.two-col { grid-template-columns: 1fr 1fr; } }
.data-table-wrap {
background: linear-gradient(180deg, var(--vellum-warm), var(--parchment));
border: 1px solid rgba(184, 145, 80, 0.5);
box-shadow:
0 6px 22px rgba(74, 22, 32, 0.12),
inset 0 0 0 5px var(--vellum-warm),
inset 0 0 0 6px rgba(184, 145, 80, 0.4);
padding: 1.6rem 1.4rem;
border-radius: 4px;
}
.data-table-title {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 900;
font-size: 1.18rem;
letter-spacing: 0.22em;
color: var(--burgundy);
text-align: center;
margin-bottom: 1.2rem;
padding-bottom: 0.7rem;
border-bottom: 1px solid rgba(184, 145, 80, 0.4);
}
.data-table-title::before, .data-table-title::after {
content: '✦'; margin: 0 0.6em; color: var(--gold-bright); font-size: 0.85em; vertical-align: 0.1em;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.data-table th {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.66rem;
letter-spacing: 0.24em;
color: var(--gold-deep);
text-transform: uppercase;
text-align: left;
padding: 0.5rem 0.5rem;
border-bottom: 1px solid rgba(184, 145, 80, 0.4);
}
.data-table td {
padding: 0.55rem 0.5rem;
border-bottom: 1px solid rgba(184, 145, 80, 0.15);
font-family: 'EB Garamond', serif;
color: var(--ink);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .glyph { font-family: 'Marcellus', serif; color: var(--burgundy); font-size: 1.1rem; width: 28px; }
.data-table .sign { font-style: italic; color: var(--burgundy); font-weight: 600; }
.data-table .deg { font-family: 'Marcellus', serif; color: var(--ink-soft); }
.data-table .retro { color: var(--burgundy); font-weight: 600; }
.data-table .elem-fire { color: #C56A2A; }
.data-table .elem-earth { color: #6B7F4F; }
.data-table .elem-air { color: #7090A8; }
.data-table .elem-water { color: #5E8290; }
.data-table tbody tr:hover { background: rgba(184, 145, 80, 0.07); }
/* ─── UPSELLS (with dark BCB premium card) ────────────── */
.upsell-section {
padding: 1.5rem 0 1.5rem;
background: transparent;
position: relative;
border-top: none;
border-bottom: none;
}
.upsell-eyebrow {
text-align: center;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.84rem;
letter-spacing: 0.5em;
color: var(--gold-deep);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.upsell-title {
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
color: var(--burgundy);
line-height: 1.05;
margin-bottom: 0.4rem;
}
.upsell-title em {
font-family: 'Italianno', cursive;
color: var(--gold-deep);
font-style: normal;
font-weight: 400;
font-size: 1.5em;
-webkit-text-stroke: 0.3px var(--gold-deep);
}
.upsell-deck {
text-align: center;
max-width: 660px;
margin: 0.6rem auto 3rem;
font-size: 1.18rem;
font-style: italic;
font-weight: 600;
color: var(--burgundy);
line-height: 1.6;
}
.upsell-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 980px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 760px) { .upsell-grid { grid-template-columns: 1fr; } }
.upsell-card {
position: relative;
padding: 2.8rem 2rem 2.5rem;
margin-top: 18px;
border-radius: 4px;
text-align: center;
transition: transform 0.4s, box-shadow 0.4s;
overflow: visible;
display: flex;
flex-direction: column;
}
.upsell-card:hover { transform: translateY(-4px); }
/* BCB Card — DARK AUBERGINE PREMIUM */
.upsell-card.bcb-dark {
background:
radial-gradient(ellipse at 50% 20%, var(--night-mid), var(--night)),
var(--night-deep);
border: 1.5px solid var(--gold-bright);
box-shadow:
0 18px 50px rgba(0, 0, 0, 0.45),
0 0 30px rgba(212, 172, 104, 0.15),
inset 0 0 0 7px var(--night),
inset 0 0 0 8px var(--gold-bright),
inset 0 0 60px rgba(212, 172, 104, 0.08);
color: var(--cream);
}
.upsell-card.bcb-dark::before {
content: '✦ MOST POPULAR ✦';
position: absolute;
top: -18px; left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
color: var(--burgundy-deep);
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 0.92rem;
letter-spacing: 0.32em;
padding: 0.6rem 2rem;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
border: 1.5px solid var(--gold-deep);
z-index: 5;
white-space: nowrap;
min-width: 280px;
text-align: center;
}
/* stars dotted in dark card */
/* JS-injected twinkling starfield inside the BCB-dark card. Sits between
the card's gradient background and its content. */
.upsell-card.bcb-dark { isolation: isolate; } /* create stacking context */
.bcb-card-starfield {
position: absolute;
inset: 8px;
border-radius: 4px;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
/* Fallback static stars (in case JS hasn't run yet) — drawn as a
background-image on the starfield wrapper, so they always show even
before seedField() injects animated stars. */
.bcb-card-starfield {
background-image:
radial-gradient(1px 1px at 18% 22%, rgba(255, 248, 232, 0.75), transparent 60%),
radial-gradient(1.5px 1.5px at 72% 18%, rgba(255, 248, 232, 0.9), transparent 60%),
radial-gradient(1px 1px at 88% 38%, rgba(255, 248, 232, 0.7), transparent 60%),
radial-gradient(1.4px 1.4px at 32% 48%, rgba(255, 248, 232, 0.85), transparent 60%),
radial-gradient(1px 1px at 62% 60%, rgba(255, 248, 232, 0.75), transparent 60%),
radial-gradient(1.6px 1.6px at 85% 72%, rgba(255, 248, 232, 0.95), transparent 60%),
radial-gradient(1px 1px at 15% 80%, rgba(255, 248, 232, 0.7), transparent 60%),
radial-gradient(1.2px 1.2px at 48% 88%, rgba(255, 248, 232, 0.85), transparent 60%),
radial-gradient(1px 1px at 78% 92%, rgba(255, 248, 232, 0.7), transparent 60%),
radial-gradient(1px 1px at 8% 50%, rgba(255, 248, 232, 0.7), transparent 60%);
}
/* Card content sits above the starfield */
.upsell-card.bcb-dark > *:not(.bcb-card-starfield) {
position: relative;
z-index: 2;
}
/* Disable the old ::after fallback entirely — replaced by .bcb-card-starfield */
.upsell-card.bcb-dark::after { content: none !important; display: none !important; }
/* (was: .upsell-card.bcb-dark > * { z-index: 1 } — REMOVED, was conflicting with
the z-index: 2 rule above for non-starfield children, putting stars at the
same level as content so they got hidden) */
.upsell-card.bcb-dark .upsell-icon svg circle,
.upsell-card.bcb-dark .upsell-icon svg line { stroke: var(--gold-bright); }
.upsell-card.bcb-dark .upsell-icon svg text { fill: var(--gold-pale); }
.upsell-card.bcb-dark .upsell-card-eyebrow {
color: var(--gold-pale);
text-shadow: 0 0 8px rgba(212, 172, 104, 0.4);
}
.upsell-card.bcb-dark .upsell-card-title { color: var(--cream); text-shadow: 0 0 18px rgba(212, 172, 104, 0.3); }
.upsell-card.bcb-dark .upsell-card-price { color: var(--gold-shimmer); text-shadow: 0 0 12px rgba(212, 172, 104, 0.5); -webkit-text-stroke-color: var(--gold-bright); }
.upsell-card.bcb-dark .upsell-card-deck { color: rgba(237, 228, 200, 0.82); }
.upsell-card.bcb-dark ul { color: rgba(237, 228, 200, 0.92); }
.upsell-card.bcb-dark ul li::before { color: var(--gold-bright); }
.upsell-card.bcb-dark .upsell-cta {
background: linear-gradient(180deg, var(--gold-pale), var(--gold-bright) 50%, var(--gold-deep));
color: var(--burgundy-deep);
border: 1.5px solid var(--gold-deep);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Membership Card — CREAM */
.upsell-card.member {
background:
radial-gradient(ellipse at 50% 0%, rgba(217, 150, 143, 0.18), transparent 60%),
linear-gradient(180deg, var(--parchment-light), var(--parchment-dark));
border: 1.5px solid rgba(184, 145, 80, 0.55);
box-shadow:
0 18px 40px rgba(74, 22, 32, 0.18),
inset 0 0 0 7px var(--parchment-light),
inset 0 0 0 8px rgba(184, 145, 80, 0.4);
}
.upsell-icon { width: 60px; height: 60px; margin: 0 auto 1.2rem; }
.upsell-icon svg { width: 100%; height: 100%; }
.upsell-medallion {
width: 96px; height: 96px;
margin: 0 auto 1.2rem;
position: relative;
z-index: 2;
}
.upsell-card-eyebrow {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.4em;
color: var(--gold-deep);
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.upsell-card-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.85rem;
color: var(--burgundy);
line-height: 1.1;
margin-bottom: 0.5rem;
}
.upsell-card-price {
font-family: 'Italianno', cursive;
font-size: 2rem;
color: var(--gold-deep);
line-height: 1;
margin-bottom: 0.4rem;
-webkit-text-stroke: 0.3px var(--gold-deep);
}
.upsell-card-price .upsell-price-dot {
font-family: 'EB Garamond', serif;
font-size: 0.45em;
color: var(--gold);
vertical-align: 0.5em;
margin: 0 0.15em;
-webkit-text-stroke: 0;
}
.upsell-card-deck {
font-size: 1.06rem;
line-height: 1.6;
color: #2D1F38;
font-weight: 500;
margin-bottom: 1.5rem;
font-style: italic;
}
/* Keep BCB-dark deck readable on the dark card */
.upsell-card.bcb-dark .upsell-card-deck { color: rgba(237, 228, 200, 0.92); font-weight: 500; }
.upsell-card ul {
list-style: none;
text-align: left;
margin: 0 auto 1.8rem;
margin-top: auto;
font-size: 0.96rem;
line-height: 1.7;
color: var(--ink);
display: inline-block;
}
.upsell-card .upsell-cta {
margin-top: auto;
align-self: center;
}
.upsell-card ul li {
padding-left: 1.4rem;
position: relative;
}
.upsell-card ul li::before {
content: '✦';
position: absolute;
left: 0;
color: var(--gold-bright);
}
.upsell-cta {
display: inline-block;
padding: 1rem 2rem;
font-family: 'Cinzel', serif;
font-weight: 800;
font-size: 0.84rem;
letter-spacing: 0.34em;
text-transform: uppercase;
text-decoration: none;
border-radius: 999px;
transition: transform 0.3s, box-shadow 0.3s;
}
.upsell-card.member .upsell-cta {
background: var(--burgundy);
color: var(--gold-pale);
border: 1.5px solid var(--burgundy-deep);
box-shadow: 0 6px 18px rgba(74, 22, 32, 0.28);
}
.upsell-cta:hover { transform: translateY(-2px); }
/* ─── FAQ — matches /tarot/cards/page-of-cups/ pattern ─── */
.faq-section { padding: 5rem 0 4rem; position: relative; }
.faq-title {
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2.2rem, 4.4vw, 3rem);
color: var(--burgundy);
margin: 0 0 0.4rem;
line-height: 1.1;
}
.faq-title em {
font-style: italic;
font-weight: 600;
background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-bright) 50%, var(--gold-deep) 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* centered hairline rule with gold ✦ */
.faq-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 0.8rem auto 2.4rem;
max-width: 360px;
}
.faq-rule::before, .faq-rule::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.faq-rule span {
color: var(--gold-bright);
font-size: 1rem;
}
.faq-items {
max-width: 760px;
margin: 0 auto;
}
.faq-item {
background: linear-gradient(180deg, var(--vellum-warm), var(--parchment-light));
border: 1px solid rgba(184, 145, 80, 0.45);
border-radius: 4px;
margin-bottom: 1rem;
overflow: hidden;
transition: box-shadow 0.3s, border-color 0.3s;
box-shadow: 0 4px 14px rgba(74, 22, 32, 0.06);
}
.faq-item[open] {
box-shadow: 0 12px 30px rgba(74, 22, 32, 0.14);
border-color: rgba(184, 145, 80, 0.7);
}
/* Brand pattern: summary has padding-right for the absolute-positioned .faq-icon */
.faq-item summary {
position: relative;
padding: 1.4rem 4rem 1.4rem 1.6rem;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.22rem;
color: var(--burgundy);
cursor: pointer;
list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
/* Moon icon — matches /numerology/personality-number/ FAQ byte-for-byte */
.faq-icon {
position: absolute;
right: 0.85rem;
top: 50%;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--gold);
background: var(--vellum-warm);
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease, border-color 0.3s ease;
pointer-events: none;
}
.faq-icon svg {
width: 18px;
height: 18px;
display: block;
fill: var(--burgundy);
transition: fill 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-item[open] .faq-icon {
background: var(--burgundy);
border-color: var(--burgundy);
transform: translateY(-50%) rotate(180deg);
}
.faq-item[open] .faq-icon svg { fill: var(--gold-shimmer); }
.faq-item summary:hover { color: var(--burgundy-deep); }
.faq-item summary:hover .faq-icon { background: var(--parchment-light); }
.faq-body {
padding: 0 1.6rem 1.5rem;
color: var(--ink);
line-height: 1.75;
font-size: 1.1rem;
font-family: 'EB Garamond', serif;
font-weight: 500;
}
.faq-body strong { color: var(--burgundy); font-weight: 700; font-style: italic; }
/* ─── Colophon ──────────────────────────────────────── */
.colophon {
text-align: center;
padding: 3.5rem 1.5rem 5rem;
border-top: 1px solid rgba(184, 145, 80, 0.3);
margin-top: 2rem;
}
.colophon-script {
font-family: 'Italianno', cursive;
font-size: 2.2rem;
color: var(--burgundy);
margin-bottom: 0.4rem;
-webkit-text-stroke: 0.3px var(--burgundy);
}
.colophon-mark {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.74rem;
letter-spacing: 0.42em;
color: var(--gold-deep);
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════
LOADER OVERLAY — Two-stage cosmic observatory animation
Renders full-bleed when JS adds .is-animating to body
═══════════════════════════════════════════════════════════════ */
body.is-bc-animating { overflow: hidden; }
#bcLoader { display: none; }
body.is-bc-animating #bcLoader {
display: block;
position: fixed; inset: 0;
z-index: 9000;
max-height: none !important;
aspect-ratio: auto !important;
}
/* ─── The dark loader stage ───────────────────────────────── */
#bcLoader {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
max-height: 720px;
background:
radial-gradient(ellipse at 50% 35%, var(--night-mid) 0%, var(--night) 40%, var(--night-deep) 100%);
border: 1.5px solid rgba(184, 145, 80, 0.4);
box-shadow:
inset 0 0 80px rgba(212, 172, 104, 0.08),
0 24px 60px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(184, 145, 80, 0.2);
overflow: hidden;
border-radius: 4px;
}
/* the starfield */
.starfield {
position: absolute;
inset: 0;
pointer-events: none;
}
.star {
position: absolute;
background: #FFF;
border-radius: 50%;
opacity: 0;
}
.star.tier-1 { width: 1.2px; height: 1.2px; }
.star.tier-2 { width: 1.8px; height: 1.8px; background: #FFF8E8; }
.star.tier-3 { width: 2.8px; height: 2.8px; background: #FFF8E8; box-shadow: 0 0 6px rgba(255, 230, 180, 0.7); }
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
/* nebula clouds for depth */
.nebula {
position: absolute;
pointer-events: none;
mix-blend-mode: screen;
}
.nebula-1 {
top: -10%; left: -10%; width: 60%; height: 60%;
background: radial-gradient(circle, rgba(184, 145, 80, 0.18), transparent 60%);
animation: nebulaFloat 18s ease-in-out infinite;
}
.nebula-2 {
bottom: -10%; right: -10%; width: 60%; height: 60%;
background: radial-gradient(circle, rgba(107, 31, 44, 0.22), transparent 60%);
animation: nebulaFloat 22s ease-in-out infinite reverse;
}
.nebula-3 {
top: 30%; right: 20%; width: 40%; height: 40%;
background: radial-gradient(circle, rgba(58, 31, 56, 0.4), transparent 60%);
animation: nebulaFloat 26s ease-in-out infinite;
}
@keyframes nebulaFloat {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
50% { transform: translate(20px, -10px) scale(1.1); opacity: 1; }
}
/* stage layers */
.stage-layer {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 1.2s ease;
}
.stage-layer.active { opacity: 1; }
/* ─── STAGE 1: Astrolabe Materialization ──────────────────── */
.wheel-stage { padding: 1.5rem; z-index: 5; }
.wheel-svg {
width: min(560px, 70vw);
height: auto;
aspect-ratio: 1/1;
filter: drop-shadow(0 0 30px rgba(212, 172, 104, 0.3));
}
.wheel-status {
margin-top: 1.5rem;
text-align: center;
}
.wheel-status-eyebrow {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.74rem;
letter-spacing: 0.42em;
color: var(--gold-pale);
text-transform: uppercase;
margin-bottom: 0.4rem;
text-shadow: 0 0 8px rgba(212, 172, 104, 0.5);
}
.wheel-status-text {
font-family: 'Italianno', cursive;
font-size: 2.6rem;
color: var(--gold-shimmer);
line-height: 1;
text-shadow:
0 0 16px rgba(212, 172, 104, 0.6),
0 0 30px rgba(212, 172, 104, 0.3);
-webkit-text-stroke: 0.3px var(--gold-bright);
}
.wheel-status-text::after {
content: '';
display: inline-block;
width: 0.8em; text-align: left;
animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
/* Wheel SVG draws itself */
.wheel-svg .ambient-ring {
transform-origin: center;
animation: ambientGlow 3s ease-in-out 2s infinite;
}
@keyframes ambientGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}
.wheel-svg .outer-ring {
stroke-dasharray: 1700;
stroke-dashoffset: 1700;
animation: drawStroke 1.6s ease-out 0.3s forwards;
transform-origin: center;
}
.wheel-svg .inner-ring {
stroke-dasharray: 1400;
stroke-dashoffset: 1400;
animation: drawStroke 1.4s ease-out 0.6s forwards;
}
.wheel-svg .innermost-ring {
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: drawStroke 1.2s ease-out 0.9s forwards;
}
@keyframes drawStroke {
to { stroke-dashoffset: 0; }
}
.wheel-svg .house-line {
stroke-dasharray: 240;
stroke-dashoffset: 240;
animation: drawStroke 0.6s ease-out forwards;
}
.wheel-svg .house-line:nth-child(1) { animation-delay: 1.0s; }
.wheel-svg .house-line:nth-child(2) { animation-delay: 1.08s; }
.wheel-svg .house-line:nth-child(3) { animation-delay: 1.16s; }
.wheel-svg .house-line:nth-child(4) { animation-delay: 1.24s; }
.wheel-svg .house-line:nth-child(5) { animation-delay: 1.32s; }
.wheel-svg .house-line:nth-child(6) { animation-delay: 1.40s; }
.wheel-svg .house-line:nth-child(7) { animation-delay: 1.48s; }
.wheel-svg .house-line:nth-child(8) { animation-delay: 1.56s; }
.wheel-svg .house-line:nth-child(9) { animation-delay: 1.64s; }
.wheel-svg .house-line:nth-child(10) { animation-delay: 1.72s; }
.wheel-svg .house-line:nth-child(11) { animation-delay: 1.80s; }
.wheel-svg .house-line:nth-child(12) { animation-delay: 1.88s; }
.wheel-svg .sign-glyph {
opacity: 0;
transform-origin: center;
animation: starBirth 1s ease-out forwards;
}
@keyframes starBirth {
0% { opacity: 0; transform: scale(0.2); filter: brightness(3) blur(2px); }
60% { opacity: 1; transform: scale(1.3); filter: brightness(2.5) blur(0.5px); }
100% { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}
.wheel-svg .sign-glyph:nth-child(1) { animation-delay: 0.5s; }
.wheel-svg .sign-glyph:nth-child(2) { animation-delay: 0.6s; }
.wheel-svg .sign-glyph:nth-child(3) { animation-delay: 0.7s; }
.wheel-svg .sign-glyph:nth-child(4) { animation-delay: 0.8s; }
.wheel-svg .sign-glyph:nth-child(5) { animation-delay: 0.9s; }
.wheel-svg .sign-glyph:nth-child(6) { animation-delay: 1.0s; }
.wheel-svg .sign-glyph:nth-child(7) { animation-delay: 1.1s; }
.wheel-svg .sign-glyph:nth-child(8) { animation-delay: 1.2s; }
.wheel-svg .sign-glyph:nth-child(9) { animation-delay: 1.3s; }
.wheel-svg .sign-glyph:nth-child(10) { animation-delay: 1.4s; }
.wheel-svg .sign-glyph:nth-child(11) { animation-delay: 1.5s; }
.wheel-svg .sign-glyph:nth-child(12) { animation-delay: 1.6s; }
/* Planets orbit in from outside the frame */
.wheel-svg .planet {
opacity: 0;
animation: planetOrbitIn 1.4s cubic-bezier(0.34, 0.5, 0.4, 1) forwards;
}
@keyframes planetOrbitIn {
0% { opacity: 0; transform: scale(0.2) translate(var(--orbit-from-x, 80px), var(--orbit-from-y, -120px)); filter: brightness(2.5) blur(3px); }
60% { opacity: 1; transform: scale(1.4); filter: brightness(2) blur(1px); }
100% { opacity: 1; transform: scale(1) translate(0, 0); filter: brightness(1) blur(0); }
}
.wheel-svg .planet:nth-of-type(1) { animation-delay: 1.9s; --orbit-from-x: -120px; --orbit-from-y: -150px; }
.wheel-svg .planet:nth-of-type(2) { animation-delay: 2.0s; --orbit-from-x: 150px; --orbit-from-y: -120px; }
.wheel-svg .planet:nth-of-type(3) { animation-delay: 2.1s; --orbit-from-x: 180px; --orbit-from-y: 80px; }
.wheel-svg .planet:nth-of-type(4) { animation-delay: 2.2s; --orbit-from-x: 100px; --orbit-from-y: -180px; }
.wheel-svg .planet:nth-of-type(5) { animation-delay: 2.3s; --orbit-from-x: 80px; --orbit-from-y: 180px; }
.wheel-svg .planet:nth-of-type(6) { animation-delay: 2.4s; --orbit-from-x: -180px; --orbit-from-y: 100px; }
.wheel-svg .planet:nth-of-type(7) { animation-delay: 2.5s; --orbit-from-x: -200px; --orbit-from-y: -80px; }
.wheel-svg .planet:nth-of-type(8) { animation-delay: 2.6s; --orbit-from-x: -160px; --orbit-from-y: 120px; }
.wheel-svg .planet:nth-of-type(9) { animation-delay: 2.7s; --orbit-from-x: 120px; --orbit-from-y: 200px; }
.wheel-svg .planet:nth-of-type(10) { animation-delay: 2.8s; --orbit-from-x: 200px; --orbit-from-y: -60px; }
.wheel-svg .planet-halo {
transform-origin: center;
animation: haloPulse 3s ease-in-out infinite;
animation-delay: 3s;
opacity: 0;
}
@keyframes haloPulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.2); }
}
/* Aspect lines crystallize like lightning */
.wheel-svg .aspect-line {
stroke-dasharray: 400;
stroke-dashoffset: 400;
opacity: 0;
animation: lightningStrike 0.5s ease-out forwards;
}
@keyframes lightningStrike {
0% { stroke-dashoffset: 400; opacity: 0; filter: brightness(3); }
30% { opacity: 1; filter: brightness(2.5); }
100% { stroke-dashoffset: 0; opacity: 0.75; filter: brightness(1); }
}
.wheel-svg .aspect-line:nth-of-type(1) { animation-delay: 3.0s; }
.wheel-svg .aspect-line:nth-of-type(2) { animation-delay: 3.1s; }
.wheel-svg .aspect-line:nth-of-type(3) { animation-delay: 3.2s; }
.wheel-svg .aspect-line:nth-of-type(4) { animation-delay: 3.3s; }
.wheel-svg .aspect-line:nth-of-type(5) { animation-delay: 3.4s; }
.wheel-svg .aspect-line:nth-of-type(6) { animation-delay: 3.5s; }
.wheel-svg .aspect-line:nth-of-type(7) { animation-delay: 3.6s; }
.wheel-svg .aspect-line:nth-of-type(8) { animation-delay: 3.7s; }
.wheel-svg .center-orb {
opacity: 0;
transform-origin: center;
animation: orbBirth 1.5s ease-out 3.6s forwards, centerPulse 2.5s ease-in-out 5s infinite;
}
@keyframes orbBirth {
0% { opacity: 0; transform: scale(0.1); filter: brightness(4); }
60% { opacity: 1; transform: scale(1.4); filter: brightness(2.5); }
100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes centerPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* meteor streaks for ambient drama */
.meteor {
position: absolute;
width: 2px;
height: 80px;
background: linear-gradient(180deg, transparent, var(--gold-bright), transparent);
transform: rotate(-30deg);
opacity: 0;
pointer-events: none;
}
.meteor.m1 { top: 8%; right: 12%; animation: meteorStreak 8s linear infinite; animation-delay: 2s; }
.meteor.m2 { top: 15%; left: 25%; animation: meteorStreak 11s linear infinite; animation-delay: 5s; }
.meteor.m3 { top: 30%; left: 60%; animation: meteorStreak 9s linear infinite; animation-delay: 7s; }
@keyframes meteorStreak {
0% { opacity: 0; transform: translate(0, 0) rotate(-30deg); }
5% { opacity: 1; }
20% { opacity: 0; transform: translate(-150px, 250px) rotate(-30deg); }
100% { opacity: 0; transform: translate(-150px, 250px) rotate(-30deg); }
}
/* ─── STAGE 2: Starlit Codex ──────────────────────────────── */
.codex-stage { z-index: 5; }
.telescope-frame {
position: relative;
width: min(680px, 85%);
aspect-ratio: 4/3;
}
/* the starlit parchment scroll */
.scroll-page {
position: absolute;
inset: 8%;
background:
radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.6), transparent 60%),
radial-gradient(ellipse at 50% 50%, var(--parchment-light), var(--parchment) 80%);
border: 1px solid rgba(184, 145, 80, 0.6);
box-shadow:
0 0 60px rgba(240, 216, 154, 0.4),
0 0 0 1px rgba(184, 145, 80, 0.3),
inset 0 0 30px rgba(184, 145, 80, 0.12),
0 20px 50px rgba(0, 0, 0, 0.6);
overflow: hidden;
}
/* page edges glow gold */
.scroll-page::before {
content: '';
position: absolute;
inset: 0;
border: 8px solid transparent;
background: linear-gradient(135deg, rgba(212, 172, 104, 0.15), transparent 30%, transparent 70%, rgba(212, 172, 104, 0.15)) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* gold ink dripping from above onto page */
.ink-stream {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 60px;
background: linear-gradient(180deg, transparent, var(--gold-bright), var(--gold-deep));
border-radius: 50%;
filter: blur(1.5px);
opacity: 0;
animation: inkDrip 2.5s ease-in 0.6s infinite;
}
@keyframes inkDrip {
0% { opacity: 0; transform: translateX(-50%) translateY(-50px); height: 20px; }
20% { opacity: 1; }
70% { opacity: 1; height: 80px; }
100% { opacity: 0; transform: translateX(-50%) translateY(40px); height: 0; }
}
.scroll-content {
position: absolute;
inset: 50px 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.4rem;
}
.scroll-eyebrow {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.74rem;
letter-spacing: 0.5em;
color: var(--gold-deep);
text-transform: uppercase;
opacity: 0;
animation: fadeUp 1.2s ease-out 0.6s forwards;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
.scroll-script {
font-family: 'Italianno', cursive;
font-size: clamp(2.6rem, 5vw, 3.8rem);
color: var(--burgundy);
line-height: 1.05;
text-align: center;
-webkit-text-stroke: 0.35px var(--burgundy);
text-shadow: 0 0 18px rgba(212, 172, 104, 0.3);
opacity: 0;
animation: scriptWrite 2s ease-out 1.1s forwards;
}
@keyframes scriptWrite {
0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(3px); }
100% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); }
}
.scroll-script .ornament {
font-family: 'Cinzel Decorative', serif;
font-weight: 900;
color: var(--gold-bright);
font-size: 0.55em;
margin: 0 0.3em;
vertical-align: 0.15em;
text-shadow: 0 0 10px rgba(212, 172, 104, 0.6);
}
/* selene's signature */
.scroll-sig {
font-family: 'Italianno', cursive;
font-size: 1.8rem;
color: var(--gold-deep);
margin-top: 0.4rem;
opacity: 0;
animation: fadeUp 1.4s ease-out 3s forwards;
}
.scroll-sig::before {
content: '— ';
color: var(--gold);
}
/* hand-drawn constellation in the corner of scroll */
.scroll-constellation {
position: absolute;
bottom: 14%;
right: 10%;
width: 110px;
height: 110px;
opacity: 0;
animation: fadeUp 1.4s ease-out 2.4s forwards;
}
.scroll-constellation svg { width: 100%; height: 100%; }
.scroll-constellation .star-dot {
fill: var(--burgundy);
animation: starTwinkle 3s ease-in-out infinite;
}
.scroll-constellation .star-dot:nth-child(2) { animation-delay: 0.5s; }
.scroll-constellation .star-dot:nth-child(3) { animation-delay: 1.0s; }
.scroll-constellation .star-dot:nth-child(4) { animation-delay: 1.5s; }
.scroll-constellation .star-dot:nth-child(5) { animation-delay: 2.0s; }
@keyframes starTwinkle {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Floating golden cosmic glyphs around the parchment */
.floating-glyph {
position: absolute;
font-family: 'Cinzel Decorative', serif;
color: var(--gold-bright);
text-shadow: 0 0 12px rgba(212, 172, 104, 0.8);
pointer-events: none;
opacity: 0;
}
.fg-1 { top: 10%; left: 6%; font-size: 1.6rem; animation: glyphFloat 5s ease-in-out 1.5s infinite; }
.fg-2 { top: 15%; right: 8%; font-size: 1.4rem; animation: glyphFloat 5.5s ease-in-out 2s infinite; }
.fg-3 { bottom: 14%; left: 8%; font-size: 1.5rem; animation: glyphFloat 4.8s ease-in-out 1.8s infinite; }
.fg-4 { bottom: 18%; right: 14%; font-size: 1.3rem; animation: glyphFloat 5.2s ease-in-out 2.4s infinite; }
.fg-5 { top: 50%; left: 4%; font-size: 1.2rem; animation: glyphFloat 6s ease-in-out 1.6s infinite; }
.fg-6 { top: 60%; right: 4%; font-size: 1.4rem; animation: glyphFloat 4.5s ease-in-out 2.2s infinite; }
@keyframes glyphFloat {
0%, 100% { opacity: 0; transform: translateY(0) rotate(0deg); }
20% { opacity: 0.9; transform: translateY(-6px) rotate(8deg); }
50% { opacity: 0.6; transform: translateY(-12px) rotate(-4deg); }
80% { opacity: 0.8; transform: translateY(-4px) rotate(12deg); }
}
/* Direction caption */
.stage-indicator {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.6rem;
z-index: 30;
}
.stage-dot {
width: 30px;
height: 4px;
border-radius: 2px;
background: rgba(184, 145, 80, 0.25);
transition: background 0.6s;
}
.stage-dot.active {
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
box-shadow: 0 0 12px rgba(212, 172, 104, 0.6);
}
@media (max-width: 720px) {
#bcLoader { aspect-ratio: 3/4; }
.scroll-constellation { width: 70px; height: 70px; }
}
/* ═══════════════════════════════════════════════════════════════
AUTOCOMPLETE — birth city + current city dropdown
═══════════════════════════════════════════════════════════════ */
.form-suggest-wrap {
position: relative;
}
.bc-suggest {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 50;
margin-top: 4px;
background: var(--vellum-warm);
border: 1px solid rgba(142, 110, 58, 0.55);
border-radius: 3px;
box-shadow:
0 12px 28px rgba(74, 22, 32, 0.22),
inset 0 0 0 4px var(--vellum-warm),
inset 0 0 0 5px rgba(184, 145, 80, 0.35);
max-height: 280px;
overflow-y: auto;
}
.bc-suggest.is-open {
display: block;
}
.bc-suggest-item {
padding: 0.65rem 1rem;
font-family: 'EB Garamond', serif;
font-size: 1.04rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
border-bottom: 1px solid rgba(184, 145, 80, 0.18);
transition: background 0.15s, color 0.15s;
user-select: none;
}
.bc-suggest-item:last-child {
border-bottom: none;
}
.bc-suggest-item:hover,
.bc-suggest-item.is-active {
background: rgba(107, 31, 44, 0.92);
color: var(--gold-pale);
}
.bc-suggest-empty,
.bc-suggest-loading {
padding: 0.85rem 1rem;
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 0.96rem;
color: rgba(45, 31, 56, 0.7);
text-align: center;
}
/* ═══════════════════════════════════════════════════════════════
EXISTING-EMAIL SOFT-STOP BANNER + INLINE FORM ERROR
═══════════════════════════════════════════════════════════════ */
.bc-existing-account {
max-width: 720px;
margin: 0 auto 1.5rem;
padding: 1.6rem 2rem;
background: linear-gradient(180deg, var(--vellum-warm), var(--parchment));
border: 1.5px solid var(--gold);
border-radius: 4px;
text-align: center;
box-shadow: 0 12px 30px rgba(74, 22, 32, 0.18);
animation: bcSoftStopIn 0.5s ease-out;
}
.bc-existing-account.is-visible { display: block !important; }
@keyframes bcSoftStopIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.bc-existing-eyebrow {
font-family: 'Italianno', cursive;
font-size: clamp(2.8rem, 5vw, 4rem);
color: var(--gold-deep);
line-height: 0.95;
margin-bottom: 0.6rem;
-webkit-text-stroke: 0.4px var(--gold-deep);
}
.bc-existing-msg {
font-family: 'EB Garamond', serif;
font-size: 1.18rem;
color: var(--burgundy);
font-weight: 500;
line-height: 1.55;
}
.bc-existing-email {
font-weight: 700;
font-style: italic;
color: var(--burgundy-deep);
}
/* Inline error below form */
.bc-form-error {
display: none;
margin: 1rem 0 0;
padding: 0.9rem 1.2rem;
background: rgba(107, 31, 44, 0.08);
border: 1px solid rgba(107, 31, 44, 0.35);
border-radius: 3px;
color: var(--burgundy-deep);
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1rem;
text-align: center;
}
.bc-form-error.is-visible {
display: block;
animation: bcSoftStopIn 0.3s ease-out;
}
/* ═══════════════════════════════════════════════════════════════
LOADER FIXES — zodiac glyph font stack + planet trails
═══════════════════════════════════════════════════════════════ */
/* Force the proper font on every text inside the loader so we never
get purple-square box fallbacks. Also covers planets, signs, ornaments. */
#bcLoader svg text {
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2',
'DejaVu Sans', 'Arial Unicode MS', sans-serif !important;
}
/* Floating ornament glyphs in stage 2 too */
#bcLoader .floating-glyph,
#bcLoader .ornament {
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2',
'DejaVu Sans', 'Arial Unicode MS', sans-serif !important;
}
/* Remove the gold aspect lines connecting planets — Michael wants them gone */
#bcLoader .aspect-line { display: none !important; }
/* Reimagine the planet animation:
Each planet starts at a unique random offset (closer to center / scattered)
and SLOWLY drifts to its natal position at different speeds, leaving a
subtle motion trail. Each gets its own duration so they move out of sync. */
#bcLoader .planet {
animation: bcPlanetDrift 4.5s cubic-bezier(0.16, 0.5, 0.3, 1) forwards;
opacity: 0;
filter: drop-shadow(0 0 6px rgba(212, 172, 104, 0.4));
}
@keyframes bcPlanetDrift {
0% { opacity: 0; transform: scale(0.3) translate(var(--bc-from-x, 0px), var(--bc-from-y, 0px));
filter: drop-shadow(0 0 14px rgba(212, 172, 104, 0.85)) blur(2px); }
25% { opacity: 0.85; filter: drop-shadow(0 0 12px rgba(212, 172, 104, 0.75)) blur(1.5px); }
60% { opacity: 1; filter: drop-shadow(0 0 8px rgba(212, 172, 104, 0.55)) blur(0.5px); }
100% { opacity: 1; transform: scale(1) translate(0, 0); filter: drop-shadow(0 0 4px rgba(212, 172, 104, 0.4)) blur(0); }
}
#bcLoader .planet:nth-of-type(1) { animation-duration: 4.6s; animation-delay: 1.7s; --bc-from-x: -10px; --bc-from-y: 5px; }
#bcLoader .planet:nth-of-type(2) { animation-duration: 3.9s; animation-delay: 1.95s; --bc-from-x: 8px; --bc-from-y: -8px; }
#bcLoader .planet:nth-of-type(3) { animation-duration: 5.1s; animation-delay: 2.0s; --bc-from-x: -14px; --bc-from-y: -6px; }
#bcLoader .planet:nth-of-type(4) { animation-duration: 4.2s; animation-delay: 2.1s; --bc-from-x: 6px; --bc-from-y: 12px; }
#bcLoader .planet:nth-of-type(5) { animation-duration: 4.8s; animation-delay: 2.25s; --bc-from-x: -8px; --bc-from-y: -14px; }
#bcLoader .planet:nth-of-type(6) { animation-duration: 3.7s; animation-delay: 2.4s; --bc-from-x: 12px; --bc-from-y: 8px; }
#bcLoader .planet:nth-of-type(7) { animation-duration: 5.3s; animation-delay: 2.5s; --bc-from-x: -6px; --bc-from-y: 10px; }
#bcLoader .planet:nth-of-type(8) { animation-duration: 4.4s; animation-delay: 2.65s; --bc-from-x: 14px; --bc-from-y: -10px; }
#bcLoader .planet:nth-of-type(9) { animation-duration: 4.9s; animation-delay: 2.8s; --bc-from-x: -12px; --bc-from-y: 6px; }
#bcLoader .planet:nth-of-type(10) { animation-duration: 3.5s; animation-delay: 2.95s; --bc-from-x: 9px; --bc-from-y: -12px; }
/* ═══════════════════════════════════════════════════════════════
UPSELL EDIT-NOTE — soft footnote between deck + upsell cards
"Need to update your birth info? Email us."
═══════════════════════════════════════════════════════════════ */
.upsell-edit-note {
max-width: 720px;
margin: 3rem auto 0;
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.04rem;
line-height: 1.6;
color: rgba(45, 31, 56, 0.8);
padding: 1.2rem 1.6rem;
border-top: 1px solid rgba(184, 145, 80, 0.4);
border-bottom: 1px solid rgba(184, 145, 80, 0.4);
}
.upsell-edit-note em {
font-style: italic;
font-weight: 700;
color: var(--burgundy);
}
.upsell-edit-note a {
color: var(--burgundy);
font-weight: 600;
font-style: italic;
text-decoration: underline;
text-decoration-color: rgba(107, 31, 44, 0.4);
text-underline-offset: 3px;
transition: color 0.2s, text-decoration-color 0.2s;
}
.upsell-edit-note a:hover {
color: var(--burgundy-deep);
text-decoration-color: var(--burgundy-deep);
}
/* ═══════════════════════════════════════════════════════════════
FIELD VALIDATION — red border on missing required fields
Applied to .form-input / .form-select after a failed submit so the
user can see every field they missed at once. Removed on input/change.
═══════════════════════════════════════════════════════════════ */
.form-input.is-invalid,
.form-select.is-invalid {
border-color: #B0273C !important;
background: rgba(176, 39, 60, 0.06) !important;
box-shadow: 0 0 0 3px rgba(176, 39, 60, 0.18) !important;
}
/* ═══════════════════════════════════════════════════════════════
CITY INPUT — "must click a suggestion" warning state
When the user types but hasn't selected an autocomplete suggestion,
the input gets a warning border + an explicit message below it.
Goes away the moment they click a suggestion.
═══════════════════════════════════════════════════════════════ */
.form-input[data-needs-pick="1"] {
border-color: #C56A2A;
background: rgba(232, 149, 72, 0.08);
box-shadow: 0 0 0 3px rgba(232, 149, 72, 0.15);
}
/* ═══════════════════════════════════════════════════════════════
MOBILE FORM READABILITY — birth date + birth time selects
At <720px the .form-row-3 (M/D/Y) and .form-row-time (H/M/AMPM)
put 3 selects across a narrow viewport. The desktop chevron padding
(2.4rem) + 1.19rem font cause long month names ("September", "November")
to truncate and the prefilled value to look faint. Tighten the padding,
sharpen the text color, and force iOS Safari to respect our color
via -webkit-text-fill-color.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.form-section .form-input,
.form-section .form-select {
font-size: 1.05rem;
font-weight: 600;
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink);
background: rgba(255, 255, 255, 0.85);
padding: 0.75rem 0.7rem;
}
/* Selects need extra right room for the chevron — but less than desktop */
.form-section .form-select {
padding-right: 1.8rem;
background-position: right 0.6rem center;
}
/* The 3-column rows are the tightest — kill the gap a touch to give selects more room */
.form-section .form-row-3,
.form-section .form-row-time { gap: 0.4rem; }
}
.bc-city-warning {
display: none;
margin-top: 0.5rem;
padding: 0.55rem 0.85rem;
background: rgba(232, 149, 72, 0.12);
border-left: 3px solid #C56A2A;
border-radius: 2px;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.45;
color: #6B3F1A;
animation: bcWarnIn 0.25s ease-out;
}
.bc-city-warning.is-visible { display: block; }
.bc-city-warning::before {
content: '↑ ';
color: #C56A2A;
font-weight: 700;
font-style: normal;
margin-right: 0.2em;
}
@keyframes bcWarnIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════════════════
MOBILE RESPONSIVE FIXES
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* Hero band — two medallions on a centered top row, text on row 2 spanning both columns */
.hero-band-cosmic {
display: grid !important;
grid-template-columns: 110px 110px !important;
grid-template-rows: auto auto !important;
column-gap: 1.4rem !important;
row-gap: 1.4rem !important;
justify-content: center !important;
align-items: center;
margin-top: 2.2rem !important;
}
.hero-band-cosmic .medallion-cosmic {
width: 110px !important;
height: 110px !important;
grid-row: 1;
}
.hero-band-cosmic .medallion-cosmic:first-of-type { grid-column: 1; justify-self: end; }
.hero-band-cosmic .medallion-cosmic:last-of-type { grid-column: 2; justify-self: start; }
.hero-band-cosmic .hero-deck-cosmic {
grid-row: 2;
grid-column: 1 / 3;
max-width: 100%;
padding: 0 0.5rem;
text-align: center;
font-size: 1rem !important;
line-height: 1.6 !important;
}
/* Tables — let them scroll horizontally if they overflow */
.data-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table {
font-size: 0.9rem;
}
/* Result section padding tighten on mobile */
.results-section { padding-top: 3rem; }
/* Chart wheel — full width with pinch-zoom */
.chart-wheel-wrap {
max-width: 100%;
overflow: visible;
}
.chart-wheel-svg {
width: 100%;
height: auto;
}
}
/* ═══════════════════════════════════════════════════════════════
Membership card moon — twinkling burgundy stars
═══════════════════════════════════════════════════════════════ */
.member-moon-star {
transform-origin: center;
transform-box: fill-box;
animation: memberMoonTwinkle 2.6s ease-in-out infinite;
}
.member-moon-star.ms1 { animation-delay: 0s; animation-duration: 2.4s; }
.member-moon-star.ms2 { animation-delay: 0.6s; animation-duration: 3.1s; }
.member-moon-star.ms3 { animation-delay: 1.1s; animation-duration: 2.7s; }
.member-moon-star.ms4 { animation-delay: 1.7s; animation-duration: 3.5s; }
@keyframes memberMoonTwinkle {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.member-moon-star { animation: none !important; opacity: 0.85; }
}
/* ═══════════════════════════════════════════════════════════════
SIZE BUMP — upsell + tables + FAQ sections (12.5% larger)
Per Michael's call after we reverted the global html font-size that
was bloating the top-nav. These three sections felt right at the
bigger size — bump them back without touching anything outside.
═══════════════════════════════════════════════════════════════ */
/* ─── Upsell section ─── */
.upsell-section .upsell-title { font-size: clamp(2.5rem, 5vw, 3.8rem); }
.upsell-section .upsell-title em { font-size: 1.5em; }
.upsell-section .upsell-deck { font-size: 1.33rem; line-height: 1.6; }
.upsell-section .upsell-card-eyebrow { font-size: 0.81rem; letter-spacing: 0.42em; }
.upsell-section .upsell-card-title { font-size: 2.08rem; }
.upsell-section .upsell-card-price { font-size: 2.25rem; }
.upsell-section .upsell-card-price .upsell-price-dot { font-size: 0.45em; }
.upsell-section .upsell-card-deck { font-size: 1.19rem; line-height: 1.6; }
.upsell-section .upsell-card ul { font-size: 1.08rem; line-height: 1.7; }
.upsell-section .upsell-card ul li { padding-left: 1.4rem; }
.upsell-section .upsell-cta { font-size: 0.95rem; padding: 1.12rem 2.25rem; }
.upsell-section .upsell-card.bcb-dark::before {
font-size: 1.04rem;
padding: 0.68rem 2.25rem;
min-width: 315px;
}
.upsell-section .upsell-edit-note { font-size: 1.17rem; padding: 1.35rem 1.8rem; }
/* ─── Tables section ─── */
.tables-section .tables-title { font-size: clamp(2rem, 3.8vw, 2.7rem); }
.tables-section .tables-title em { font-size: 1.5em; }
.tables-section .data-table-title { font-size: 1.33rem; letter-spacing: 0.24em; }
.tables-section .data-table { font-size: 1.15rem; }
.tables-section .data-table thead th { font-size: 0.82rem; letter-spacing: 0.24em; padding: 0.65rem 0.55rem; }
.tables-section .data-table tbody td { font-size: 1.15rem; padding: 0.7rem 0.6rem; line-height: 1.5; }
.tables-section .data-table tbody td.glyph { font-size: 1.4rem; }
.tables-section .data-table tbody td.deg { font-size: 1.08rem; }
.tables-section .data-table tbody td.sign { font-size: 1.15rem; }
/* ─── FAQ section ─── */
.faq-section .faq-title { font-size: clamp(2.5rem, 5vw, 3.4rem); }
.faq-section .faq-item summary { font-size: 1.37rem; padding: 1.58rem 4rem 1.58rem 1.8rem; }
.faq-section .faq-body { font-size: 1.24rem; line-height: 1.75; padding: 0 1.8rem 1.7rem; }
.faq-section .faq-icon { width: 36px; height: 36px; }
.faq-section .faq-icon svg { width: 20px; height: 20px; }
/* ═══════════════════════════════════════════════════════════════════════
/create-account/ — Phase 8 scoped styles
Short hero + product banner (cosmic aubergine for BCB, cream for others)
+ recipient cards (Mine / Someone else)
+ magic-link "Welcome back" soft-stop panel
All scoped under body.ca-page so they don't leak to /birthchart/.
═══════════════════════════════════════════════════════════════════════ */
body.ca-page {
background: var(--parchment);
background-image:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(184, 145, 80, 0.08), transparent 70%),
url("data:image/svg+xml;utf8,");
background-attachment: fixed;
}
.ca-page .ca-wrap {
max-width: 760px;
margin: 0 auto;
padding: 2.6rem 1.4rem 5rem;
position: relative;
}
@media (max-width: 720px) {
.ca-page .ca-wrap { padding: 1.8rem 1rem 4rem; }
}
/* ─── Short hero — matches /tarot/'s page-hero byte-for-byte ─── */
.ca-page .page-hero {
text-align: center;
position: relative;
padding: 0 0 2rem;
}
.ca-page .page-hero-back {
position: absolute;
top: 1.5rem;
left: -130px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.18em;
color: var(--burgundy);
text-decoration: none;
border-bottom: 1px solid rgba(107, 31, 44, 0.35);
padding-bottom: 2px;
transition: color 0.25s, border-color 0.25s, transform 0.25s;
white-space: nowrap;
}
.ca-page .page-hero-back::before { content: '←'; font-style: italic; font-size: 1.05em; }
.ca-page .page-hero-back:hover {
color: var(--burgundy-mid, #8B2840);
border-color: var(--rose-soft, #D9968F);
transform: translateX(-3px);
}
@media (max-width: 1280px) { .ca-page .page-hero-back { left: -80px; } }
@media (max-width: 1180px) { .ca-page .page-hero-back { left: -40px; } }
@media (max-width: 1100px) { .ca-page .page-hero-back { left: 0; } }
@media (max-width: 640px) {
.ca-page .page-hero-back { position: static; display: inline-flex; margin: 0 auto 1.5rem; }
.ca-page .page-hero { padding-top: 0.5rem; }
}
.ca-page .page-hero-dept {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.15rem;
letter-spacing: 0.36em;
color: var(--gold-deep);
margin: 0 0 0.85rem;
padding-left: 0.36em;
}
.ca-page .page-hero-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 1.4rem;
margin: 0 auto 1.6rem;
max-width: 380px;
}
.ca-page .page-hero-rule::before,
.ca-page .page-hero-rule::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ca-page .page-hero-rule-mark {
font-family: 'Cinzel Decorative', serif;
font-weight: 700;
font-size: 1.1rem;
color: var(--gold-bright);
text-shadow: 0 0 12px rgba(212, 172, 104, 0.4);
line-height: 1;
font-style: italic;
}
.ca-page .page-hero h1 {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2.6rem, 5.6vw, 4.2rem);
color: var(--burgundy);
line-height: 1.05;
margin: 0 0 0.4rem;
letter-spacing: -0.01em;
}
.ca-page .page-hero h1 em {
font-family: 'Italianno', cursive;
color: var(--gold-deep);
font-style: normal;
font-weight: 400;
font-size: 1.5em;
vertical-align: -0.05em;
-webkit-text-stroke: 0.3px var(--gold-deep);
text-shadow: 0 0 18px rgba(212, 172, 104, 0.35);
}
.ca-page .page-hero-script {
font-family: 'Italianno', cursive;
font-size: clamp(1.8rem, 3vw, 2.4rem);
color: var(--gold-deep);
-webkit-text-stroke: 0.3px var(--gold-deep);
line-height: 1;
margin: 0.4rem 0 1rem;
}
.ca-page .page-hero-fleuron {
font-family: 'Cinzel Decorative', serif;
font-size: 1.4rem;
color: var(--gold);
margin: 0.6rem 0 1.1rem;
line-height: 1;
opacity: 0.85;
}
.ca-page .page-hero-deck {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.18rem;
color: var(--ink-soft, #4A3B52);
max-width: 540px;
margin: 0 auto;
line-height: 1.55;
}
.ca-page .page-hero-deck strong {
color: var(--burgundy);
font-weight: 600;
font-style: normal;
}
/* ─── Membership trial pill above H1 (only on ?intent=membership) ─── */
.ca-page .ca-membership-pill {
display: inline-block;
margin-bottom: 0.9rem;
padding: 0.42rem 1.1rem;
background: linear-gradient(180deg, rgba(212, 172, 104, 0.18), rgba(212, 172, 104, 0.08));
border: 1px solid var(--gold);
border-radius: 999px;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--burgundy);
}
/* ─── Product banner ─── */
.ca-page .product-banner {
position: relative;
margin: 0 auto 2.6rem;
padding: 1.7rem 1.8rem 1.6rem;
border-radius: 6px;
isolation: isolate;
}
/* Cream vellum variant — for PA, MF, ND */
.ca-page .product-banner.banner-vellum {
background: linear-gradient(180deg, var(--vellum) 0%, var(--parchment-warm, #F4E7C7) 100%);
border: 1px solid rgba(184, 145, 80, 0.45);
box-shadow:
0 18px 50px rgba(74, 22, 32, 0.10),
0 2px 6px rgba(74, 22, 32, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.5),
inset 0 0 0 8px rgba(184, 145, 80, 0.18);
}
/* Cosmic aubergine variant — premium signal for BCB */
.ca-page .product-banner.banner-cosmic {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 172, 104, 0.18), transparent 70%),
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(90, 45, 82, 0.25), transparent 60%),
linear-gradient(140deg, var(--aubergine, #3A1F38) 0%, var(--aubergine-deep, #2A1428) 60%, var(--plum, #5A2D52) 100%);
border: 1px solid var(--gold);
box-shadow:
0 24px 70px rgba(11, 21, 48, 0.55),
0 4px 12px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px rgba(240, 216, 154, 0.25),
0 0 0 1px rgba(212, 172, 104, 0.35);
color: var(--cream);
}
.ca-page .product-banner.banner-cosmic::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-image:
radial-gradient(1.5px 1.5px at 12% 22%, rgba(240, 216, 154, 0.9), transparent 50%),
radial-gradient(1px 1px at 28% 64%, rgba(240, 216, 154, 0.6), transparent 50%),
radial-gradient(1.5px 1.5px at 68% 18%, rgba(240, 216, 154, 0.85), transparent 50%),
radial-gradient(1px 1px at 85% 72%, rgba(240, 216, 154, 0.6), transparent 50%),
radial-gradient(1px 1px at 45% 38%, rgba(240, 216, 154, 0.4), transparent 50%),
radial-gradient(1.5px 1.5px at 92% 36%, rgba(240, 216, 154, 0.75), transparent 50%),
radial-gradient(1px 1px at 8% 78%, rgba(240, 216, 154, 0.5), transparent 50%),
radial-gradient(1px 1px at 55% 88%, rgba(240, 216, 154, 0.55), transparent 50%);
pointer-events: none;
opacity: 0.7;
z-index: -1;
}
.ca-page .banner-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.2rem;
}
.ca-page .banner-medallion {
width: 64px;
height: 64px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ca-page .banner-title-wrap {
display: flex;
flex-direction: column;
gap: 0.18rem;
min-width: 0;
}
.ca-page .banner-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: 0.36em;
color: var(--gold-deep);
padding-left: 0.36em;
}
.ca-page .banner-cosmic .banner-eyebrow { color: var(--gold-shimmer); }
.ca-page .banner-eyebrow-mark {
color: var(--gold-bright);
margin-right: 0.5em;
font-family: 'Cinzel Decorative', serif;
}
.ca-page .banner-cosmic .banner-eyebrow-mark { color: var(--gold-shimmer); }
.ca-page .banner-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(1.5rem, 2.4vw, 1.9rem);
color: var(--burgundy);
line-height: 1.15;
margin: 0;
}
.ca-page .banner-cosmic .banner-title { color: var(--cream); }
.ca-page .banner-title em {
font-family: 'Italianno', cursive;
color: var(--gold-deep);
font-style: normal;
font-weight: 400;
font-size: 1.4em;
-webkit-text-stroke: 0.3px var(--gold-deep);
}
.ca-page .banner-cosmic .banner-title em {
color: var(--gold-shimmer);
-webkit-text-stroke: 0.3px var(--gold-shimmer);
text-shadow: 0 0 16px rgba(240, 216, 154, 0.4);
}
.ca-page .banner-price {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 1.4rem;
letter-spacing: 0.04em;
color: var(--burgundy);
white-space: nowrap;
text-align: right;
}
.ca-page .banner-cosmic .banner-price { color: var(--gold-shimmer); }
.ca-page .banner-price-cents {
font-size: 0.7em;
vertical-align: 0.4em;
margin-left: 0.05em;
opacity: 0.85;
letter-spacing: 0.02em;
}
.ca-page .banner-note {
margin: 1.2rem 0 0;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.22rem;
line-height: 1.55;
color: var(--ink-soft, #4A3B52);
text-align: center;
padding: 0 0.4rem;
}
.ca-page .banner-cosmic .banner-note { color: var(--cream); }
.ca-page .banner-picker {
margin-top: 1.3rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(184, 145, 80, 0.3);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
}
.ca-page .banner-cosmic .banner-picker { border-top-color: rgba(240, 216, 154, 0.25); }
.ca-page .banner-picker-label {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.18rem;
letter-spacing: 0.22em;
color: var(--burgundy);
}
.ca-page .banner-picker-select {
width: 100%;
max-width: 360px;
padding: 0.85rem 2.6rem 0.85rem 1.1rem;
background-color: rgba(255, 255, 255, 0.65);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 10px;
border: 1px solid rgba(142, 110, 58, 0.5);
border-radius: 3px;
font-family: 'EB Garamond', serif;
font-size: 1.08rem;
font-weight: 500;
color: var(--ink);
text-align: center;
text-align-last: center;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.ca-page .banner-picker-select:focus,
.ca-page .banner-picker-select:hover {
border-color: var(--gold-bright);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 0 3px rgba(212, 172, 104, 0.2);
outline: none;
}
/* ─── BCB recipient cards ─── */
.ca-page .recipient-block {
margin-top: 1.3rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(240, 216, 154, 0.25);
}
.ca-page .recipient-label {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.18rem;
letter-spacing: 0.22em;
color: var(--gold-shimmer);
text-align: center;
display: block;
margin-bottom: 1rem;
}
.ca-page .recipient-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 480px) {
.ca-page .recipient-grid { grid-template-columns: 1fr; }
}
.ca-page .recipient-card {
position: relative;
padding: 1.3rem 1rem 1.1rem;
background: linear-gradient(180deg, var(--vellum) 0%, var(--parchment-warm, #F4E7C7) 100%);
border: 1.5px solid var(--gold);
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1.1), box-shadow 0.3s, background 0.3s, border-color 0.3s;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
text-align: center;
box-shadow:
0 4px 14px rgba(11, 21, 48, 0.35),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
isolation: isolate;
}
.ca-page .recipient-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ca-page .recipient-card::before,
.ca-page .recipient-card::after {
content: '\2726';
position: absolute;
font-family: 'Cinzel Decorative', serif;
font-size: 0.7rem;
color: var(--gold-deep);
opacity: 0.55;
pointer-events: none;
}
.ca-page .recipient-card::before { top: 0.45rem; left: 0.55rem; }
.ca-page .recipient-card::after { top: 0.45rem; right: 0.55rem; }
.ca-page .recipient-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(11, 21, 48, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
border-color: var(--gold-bright);
}
.ca-page .recipient-card.is-selected,
.ca-page .recipient-card:has(input:checked) {
background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-deep) 100%);
border-color: var(--gold-bright);
box-shadow: 0 10px 26px rgba(11, 21, 48, 0.55), inset 0 0 0 1px rgba(240, 216, 154, 0.4), inset 0 0 18px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
}
.ca-page .recipient-card.is-selected .recipient-card-icon,
.ca-page .recipient-card:has(input:checked) .recipient-card-icon { color: var(--gold-shimmer); }
.ca-page .recipient-card.is-selected .recipient-card-title,
.ca-page .recipient-card:has(input:checked) .recipient-card-title { color: var(--cream); }
.ca-page .recipient-card.is-selected .recipient-card-sub,
.ca-page .recipient-card:has(input:checked) .recipient-card-sub { color: rgba(237, 228, 200, 0.75); }
.ca-page .recipient-card.is-selected::before,
.ca-page .recipient-card.is-selected::after,
.ca-page .recipient-card:has(input:checked)::before,
.ca-page .recipient-card:has(input:checked)::after { color: var(--gold-shimmer); opacity: 1; }
.ca-page .recipient-card-icon {
width: 56px;
height: 56px;
color: var(--gold-deep);
transition: color 0.3s, transform 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.ca-page .recipient-card:hover .recipient-card-icon { transform: scale(1.05); }
.ca-page .recipient-card-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.16rem;
color: var(--burgundy);
line-height: 1.1;
margin: 0;
}
.ca-page .recipient-card-sub {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.22em;
color: var(--gold-deep);
margin: 0;
}
.ca-page .recipient-fineprint {
margin: 1.1rem 0 0;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.16rem;
color: var(--cream);
text-align: center;
line-height: 1.5;
}
/* ─── Form panel — parchment card around the shared form ─── */
.ca-page .form-panel {
margin: 0 auto;
padding: 2.4rem 2rem 2rem;
background: linear-gradient(180deg, var(--vellum) 0%, var(--parchment) 60%, var(--parchment-warm, #F4E7C7) 100%);
border: 1px solid rgba(184, 145, 80, 0.4);
border-radius: 4px;
box-shadow:
0 18px 50px rgba(74, 22, 32, 0.10),
0 2px 6px rgba(74, 22, 32, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
position: relative;
}
.ca-page .form-panel::before,
.ca-page .form-panel::after {
content: '';
position: absolute;
width: 22px; height: 22px;
border: 1.5px solid var(--gold-deep);
opacity: 0.55;
pointer-events: none;
}
.ca-page .form-panel::before { top: 9px; left: 9px; border-right: none; border-bottom: none; }
.ca-page .form-panel::after { bottom: 9px; right: 9px; border-left: none; border-top: none; }
/* Hide the form's own corner SVGs when wrapped in .form-panel (panel already has corners) */
.ca-page .form-panel .form-corner { display: none; }
.ca-page .form-panel .form-eyebrow {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: 0.32em;
color: var(--burgundy);
text-align: center;
margin-bottom: 0.4rem;
padding-left: 0.32em;
}
.ca-page .form-panel .form-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(1.7rem, 2.6vw, 2.1rem);
color: var(--burgundy-deep);
text-align: center;
margin: 0 0 1.8rem;
line-height: 1.15;
}
/* ─── Welcome-back magic-link soft-stop panel ─── */
.ca-page .welcome-panel {
margin: 0 auto;
max-width: 580px;
padding: 3rem 2.2rem 2.6rem;
background: linear-gradient(180deg, var(--vellum) 0%, var(--parchment) 100%);
border: 1px solid rgba(184, 145, 80, 0.45);
border-radius: 4px;
box-shadow:
0 28px 70px rgba(74, 22, 32, 0.18),
0 4px 10px rgba(74, 22, 32, 0.10),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
position: relative;
text-align: center;
}
.ca-page .welcome-panel::before,
.ca-page .welcome-panel::after {
content: '';
position: absolute;
width: 24px; height: 24px;
border: 1.5px solid var(--gold-deep);
opacity: 0.55;
}
.ca-page .welcome-panel::before { top: 9px; left: 9px; border-right: none; border-bottom: none; }
.ca-page .welcome-panel::after { bottom: 9px; right: 9px; border-left: none; border-top: none; }
.ca-page .welcome-icon {
width: 84px;
height: 84px;
margin: 0 auto 1.2rem;
color: var(--gold-deep);
}
.ca-page .welcome-eyebrow {
font-family: 'Italianno', cursive;
font-size: clamp(2.4rem, 4vw, 3.4rem);
color: var(--gold-deep);
-webkit-text-stroke: 0.3px var(--gold-deep);
line-height: 0.95;
margin: 0 0 0.3rem;
}
.ca-page .welcome-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2rem, 3.4vw, 2.8rem);
color: var(--burgundy-deep);
line-height: 1.1;
margin: 0 0 1.4rem;
}
.ca-page .welcome-body {
font-family: 'EB Garamond', serif;
font-size: 1.2rem;
font-style: italic;
color: var(--ink-soft, #4A3B52);
line-height: 1.55;
margin-bottom: 1.4rem;
}
.ca-page .welcome-body strong {
font-style: normal;
color: var(--burgundy);
font-weight: 600;
}
.ca-page .welcome-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1.4rem 0;
}
.ca-page .welcome-rule::before,
.ca-page .welcome-rule::after {
content: '';
flex: 1;
max-width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ca-page .welcome-rule-mark {
font-family: 'Cinzel Decorative', serif;
font-size: 1rem;
color: var(--gold-bright);
}
.ca-page .welcome-fineprint {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.02rem;
color: var(--burgundy);
}
.ca-page .welcome-fineprint a {
color: var(--burgundy-deep);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(74, 22, 32, 0.5);
}