/* ╔════════════════════════════════════════════════════════════╗
║ yes-no-tarot.css ║
║ Production CSS for /tarot/yes-no-tarot-reading/ ║
║ ║
║ Based on F iter 26 (mockups/palette-v2-skill-F.html). ║
║ This is the LOCKED brand template — same aesthetic ║
║ reused across all tools (numerology, horoscopes, etc.). ║
║ ║
║ Palette: aubergine + plum + gold + cream + burgundy. ║
║ Fonts: EB Garamond + Italianno + Cinzel Decorative. ║
║ ║
║ IMPORTANT: load this LAST in the page so it ║
║ overrides styles.css / numerology.css / horoscopes.css ║
║ which are loaded earlier. ║
╚════════════════════════════════════════════════════════════╝ */
:root {
--bg: #F0DFC8;
--vellum: #FAF1E1;
--paper-warm: #E8D2B5;
--paper-shadow: #DCC2A0;
--ink: #2D1F38;
--ink-2: #3D2D44;
--ink-mute: #6B5C68;
--ink-3: #8E7E89;
--burgundy: #6B1F2C;
--burgundy-2: #8C2F3F;
--burgundy-deep: #4A0F1A;
--aubergine: #3A1F38;
--aubergine-2: #2A1428;
--plum-mid: #5A2D52;
--type-on-dark: #F5E6D2;
--gold: #B89150;
--gold-bright: #D4AC68;
--gold-deep: #8E6E3A;
--gold-pale: #E5C68A;
--gold-shimmer: #F0D89A;
--rose: #B96B7A;
--rose-deep: #92505E;
--rose-soft: #D9968F;
--sage: #9DAB8C;
--rule: rgba(45, 31, 56, 0.14);
--rule-strong: rgba(45, 31, 56, 0.28);
--rule-gold: rgba(184, 145, 80, 0.45);
--rule-gold-2: rgba(184, 145, 80, 0.72);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: 'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif;
font-size: 18px;
line-height: 1.65;
font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-image:
radial-gradient(ellipse 70% 50% at 14% 8%, rgba(217, 150, 143, 0.08), transparent 65%),
radial-gradient(ellipse 55% 40% at 88% 22%, rgba(184, 145, 80, 0.10), transparent 55%),
radial-gradient(ellipse 70% 55% at 50% 110%, rgba(107, 31, 44, 0.06), transparent 60%);
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.85;
mix-blend-mode: multiply;
}
/* ═══════════ TYPE PRIMITIVES ═══════════ */
@keyframes shimmer {
0%, 100% { background-position: 0% center; }
50% { background-position: 100% center; }
}
.fleuron {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin: 0;
color: var(--gold);
}
.fleuron::before, .fleuron::after {
content: "";
flex: 0 1 90px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.fleuron-mark {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.4rem;
line-height: 1;
}
/* ═══════════ MASTHEAD ═══════════ */
.masthead {
position: relative;
z-index: 2;
padding: 1.5rem 2rem 1.25rem;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: baseline;
gap: 2rem;
border-bottom: 1px solid var(--rule-gold);
background: linear-gradient(180deg, var(--vellum) 0%, var(--bg) 100%);
}
.masthead::after {
content: "";
position: absolute;
left: 1rem; right: 1rem; bottom: 1px;
height: 1px;
background: var(--gold);
opacity: 0.4;
}
.masthead-l, .masthead-r {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
letter-spacing: 0.18em;
font-size: 0.95rem;
color: var(--ink-mute);
}
.masthead-r { text-align: right; }
.masthead-c {
font-family: 'Italianno', cursive;
font-size: 1.7rem;
color: var(--burgundy);
line-height: 1;
}
/* ═══════════ FRONTISPIECE HERO — iter 21 (Direction A) ═══════════ */
/* Centered ornate hero like opening page of a bound book.
Reusable template across all tools (Yes/No, Birth Chart, Numerology, etc.) */
.page-hero {
position: relative;
z-index: 2;
padding: 2rem 2rem 2.5rem; /* iter 22: less top padding now that back-link is absolute */
max-width: 920px;
margin: 0 auto;
text-align: center;
}
/* iter 23: Back link FAR LEFT, half-hangs off the left edge of the centered content */
.page-hero-back {
position: absolute;
top: 1.5rem;
left: -130px; /* hangs ~half its width off the left side */
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;
padding-bottom: 3px;
border-bottom: 1px solid var(--burgundy);
transition: color 0.2s, border-color 0.2s, left 0.2s;
z-index: 3;
white-space: nowrap;
}
.page-hero-back:hover { color: var(--rose-deep); border-color: var(--rose); }
.page-hero-back::before { content: "←"; font-style: italic; }
/* Responsive: as viewport narrows, pull the back link in toward the content edge */
@media (max-width: 1280px) {
.page-hero-back { left: -80px; }
}
@media (max-width: 1180px) {
.page-hero-back { left: -40px; }
}
@media (max-width: 1100px) {
.page-hero-back { left: 0; }
}
@media (max-width: 640px) {
.page-hero-back { position: static; display: inline-flex; margin: 0 auto 1.5rem; }
.page-hero { padding-top: 2rem; }
}
/* Department tag — "TAROT" / "NUMEROLOGY" / "ASTROLOGY" — small caps gold */
/* iter 26: bigger + bolder + tightened tracking for readability */
.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;
}
/* Decorative hairline + sparkle row above and below the tag */
.page-hero-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1rem auto 1.25rem;
color: var(--gold);
}
.page-hero-rule::before, .page-hero-rule::after {
content: "";
flex: 0 1 70px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.page-hero-rule-mark {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.1rem;
line-height: 1;
color: var(--gold);
}
.page-hero h1 {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2.8rem, 6.5vw, 5rem);
line-height: 0.98;
letter-spacing: -0.022em;
color: var(--ink);
margin: 0 0 0.4rem;
}
.page-hero h1 em {
color: var(--burgundy);
font-weight: 600;
}
.page-hero-script {
font-family: 'Italianno', cursive;
font-size: clamp(1.7rem, 3.5vw, 2.4rem);
color: var(--burgundy);
line-height: 1;
margin: 0 0 1.5rem;
-webkit-text-stroke: 0.4px var(--burgundy);
}
/* Fleuron divider */
.page-hero-fleuron {
margin: 1.25rem auto;
max-width: 280px;
}
.page-hero-subtitle {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.18rem;
line-height: 1.6;
color: var(--ink-2);
margin: 0 auto;
max-width: 580px;
}
/* Small circular illustration medallion below text */
.page-hero-medallion {
width: 88px;
height: 88px;
margin: 1.75rem auto 0.5rem;
border-radius: 50%;
background: var(--vellum);
border: 1px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 6px 18px rgba(58, 31, 56, 0.18);
}
.page-hero-medallion::before {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
border: 1px solid var(--rule-gold);
pointer-events: none;
}
.page-hero-medallion svg {
width: 64px;
height: 64px;
display: block;
z-index: 1;
}
/* ═══════════ SPREAD FRAME HEADING (H2 + intro INSIDE the dark frame) ═══════════ */
.spread-intro {
position: relative;
z-index: 1;
text-align: center;
margin: 0 auto 2rem; /* iter 19: more space below intro before cards */
max-width: 720px;
padding: 0 1rem;
}
.spread-intro h2 {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1;
letter-spacing: -0.018em;
color: var(--type-on-dark);
margin: 0 0 1rem;
}
.spread-intro h2 em {
color: var(--gold-bright);
font-weight: 600;
}
.spread-intro-p {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.12rem;
line-height: 1.6;
color: var(--gold-pale);
margin: 0 auto 1.25rem;
max-width: 580px;
}
.spread-intro-p em {
color: var(--gold-bright);
font-style: italic;
font-weight: 700;
}
/* ═══════════ THE SPREAD (input state) ═══════════ */
.spread-frame {
position: relative;
margin-top: 1rem;
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(184, 145, 80, 0.16), transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(185, 107, 122, 0.1), transparent 60%),
linear-gradient(180deg, #3A1F38 0%, #2A1428 100%);
color: var(--type-on-dark);
padding: 2.75rem 2rem 3rem; /* iter 18: tighter top — H2 lives inside now */
border-radius: 2px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(58, 31, 56, 0.4),
0 0 0 1px var(--gold);
}
.spread-frame::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.5;
}
.spread-frame::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid var(--rule-gold-2);
pointer-events: none;
}
/* iter 19: more breathing room above cards (was 2.5rem, now 5rem) */
.spread-fan {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 5rem 1rem 5rem; /* +2.5rem top — cards drop a touch */
perspective: 1200px;
margin-bottom: 0;
min-height: 280px;
}
/* Each card slot is the positioned outer element, inner button does the fly-in.
iter 11: tight overlap like Tarotoo — cards stack with only ~25px exposed each */
.fan-slot {
flex-shrink: 0;
margin: 0 -1.7rem; /* heavy negative margin = heavy overlap */
transform-origin: center bottom;
width: clamp(64px, 7.2vw, 92px);
aspect-ratio: 1024 / 1834;
}
/* iter 15: DEEPER smooth dome — ±42° rotation, peak -45px, edges +95px (140px span).
Same quadratic curve as iter 14 but ~2x deeper to match Tarotoo's screenshot proportions. */
.fan-slot[data-pos="0"] { transform: rotate(-42deg) translateY(95px); }
.fan-slot[data-pos="1"] { transform: rotate(-38deg) translateY(67px); }
.fan-slot[data-pos="2"] { transform: rotate(-34deg) translateY(43px); }
.fan-slot[data-pos="3"] { transform: rotate(-30deg) translateY(22px); }
.fan-slot[data-pos="4"] { transform: rotate(-26deg) translateY(4px); }
.fan-slot[data-pos="5"] { transform: rotate(-22deg) translateY(-12px); }
.fan-slot[data-pos="6"] { transform: rotate(-18deg) translateY(-25px); }
.fan-slot[data-pos="7"] { transform: rotate(-14deg) translateY(-34px); }
.fan-slot[data-pos="8"] { transform: rotate(-10deg) translateY(-40px); }
.fan-slot[data-pos="9"] { transform: rotate(-6deg) translateY(-44px); }
.fan-slot[data-pos="10"] { transform: rotate(-2deg) translateY(-45px); }
.fan-slot[data-pos="11"] { transform: rotate(2deg) translateY(-45px); }
.fan-slot[data-pos="12"] { transform: rotate(6deg) translateY(-44px); }
.fan-slot[data-pos="13"] { transform: rotate(10deg) translateY(-40px); }
.fan-slot[data-pos="14"] { transform: rotate(14deg) translateY(-34px); }
.fan-slot[data-pos="15"] { transform: rotate(18deg) translateY(-25px); }
.fan-slot[data-pos="16"] { transform: rotate(22deg) translateY(-12px); }
.fan-slot[data-pos="17"] { transform: rotate(26deg) translateY(4px); }
.fan-slot[data-pos="18"] { transform: rotate(30deg) translateY(22px); }
.fan-slot[data-pos="19"] { transform: rotate(34deg) translateY(43px); }
.fan-slot[data-pos="20"] { transform: rotate(38deg) translateY(67px); }
.fan-slot[data-pos="21"] { transform: rotate(42deg) translateY(95px); }
/* The card itself (inner) — clickable, hoverable, fly-in animated.
Hidden by default; animation only runs when the .spread-fan has .is-in-view */
.fan-card {
display: block;
width: 100%;
height: 100%;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
opacity: 0; /* hidden until in view */
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}
.spread-fan.is-in-view .fan-card {
animation: flyInCard 1.1s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
/* Reduced-motion fallback: just show them without flying */
@media (prefers-reduced-motion: reduce) {
.fan-card { opacity: 1 !important; animation: none !important; }
}
.fan-card img,
.fan-card .card-back {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.7), /* deeper drop for lift off bg */
0 0 0 1.5px var(--gold); /* iter 17: gold ring on plum cards */
display: block;
transition: filter 0.3s ease, box-shadow 0.3s ease;
}
/* iter 25: subtler hover — small lift + gentle glow, still clearly visible */
.fan-card:hover {
transform: translateY(-18px) scale(1.1);
z-index: 20;
transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1), filter 0.3s ease;
}
.fan-card:hover img,
.fan-card:hover .card-back {
filter: drop-shadow(0 6px 18px rgba(212, 172, 104, 0.7))
brightness(1.12);
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.5),
0 0 0 1.5px var(--gold-bright);
}
/* The slot itself also lifts so neighboring cards aren't visually overlapping the hovered one */
.fan-slot:has(.fan-card:hover) { z-index: 20; }
/* Fly-in animation: cards drop in from upper-left, settle into dome.
iter 24: removed transform at 100% so :hover rule can apply after animation completes.
(forwards fill mode locks animated properties; only setting transform at 0% lets the
element return to its base transform at end so hover can override.) */
@keyframes flyInCard {
0% {
opacity: 0;
transform: translate(-340px, -180px) rotate(-65deg) scale(0.55);
filter: blur(8px);
}
60% {
opacity: 1;
filter: blur(2px);
}
100% {
opacity: 1;
filter: blur(0);
/* transform deliberately omitted — returns to base, lets :hover transform apply */
}
}
/* Stagger delays — cards fly in one after another (45ms steps) */
.fan-slot:nth-child(1) .fan-card { animation-delay: 0.00s; }
.fan-slot:nth-child(2) .fan-card { animation-delay: 0.045s; }
.fan-slot:nth-child(3) .fan-card { animation-delay: 0.09s; }
.fan-slot:nth-child(4) .fan-card { animation-delay: 0.135s; }
.fan-slot:nth-child(5) .fan-card { animation-delay: 0.18s; }
.fan-slot:nth-child(6) .fan-card { animation-delay: 0.225s; }
.fan-slot:nth-child(7) .fan-card { animation-delay: 0.27s; }
.fan-slot:nth-child(8) .fan-card { animation-delay: 0.315s; }
.fan-slot:nth-child(9) .fan-card { animation-delay: 0.36s; }
.fan-slot:nth-child(10) .fan-card { animation-delay: 0.405s; }
.fan-slot:nth-child(11) .fan-card { animation-delay: 0.45s; }
.fan-slot:nth-child(12) .fan-card { animation-delay: 0.495s; }
.fan-slot:nth-child(13) .fan-card { animation-delay: 0.54s; }
.fan-slot:nth-child(14) .fan-card { animation-delay: 0.585s; }
.fan-slot:nth-child(15) .fan-card { animation-delay: 0.63s; }
.fan-slot:nth-child(16) .fan-card { animation-delay: 0.675s; }
.fan-slot:nth-child(17) .fan-card { animation-delay: 0.72s; }
.fan-slot:nth-child(18) .fan-card { animation-delay: 0.765s; }
.fan-slot:nth-child(19) .fan-card { animation-delay: 0.81s; }
.fan-slot:nth-child(20) .fan-card { animation-delay: 0.855s; }
.fan-slot:nth-child(21) .fan-card { animation-delay: 0.90s; }
.fan-slot:nth-child(22) .fan-card { animation-delay: 0.945s; }
/* Scattered star ornaments on the spread frame */
.spread-stars {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.spread-stars .star {
position: absolute;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 300;
color: var(--gold);
opacity: 0.7;
animation: twinkle 3s ease-in-out infinite;
}
.spread-stars .star-1 { top: 8%; left: 6%; font-size: 1.6rem; animation-delay: 0s; }
.spread-stars .star-2 { top: 16%; right: 9%; font-size: 1.2rem; animation-delay: 0.6s; opacity: 0.6; }
.spread-stars .star-3 { bottom: 22%; left: 12%; font-size: 1.4rem; animation-delay: 1.2s; opacity: 0.55; }
.spread-stars .star-4 { bottom: 14%; right: 14%; font-size: 1rem; animation-delay: 0.3s; opacity: 0.6; }
.spread-stars .star-5 { top: 38%; left: 4%; font-size: 0.8rem; animation-delay: 1.8s; opacity: 0.5; }
.spread-stars .star-6 { top: 46%; right: 5%; font-size: 0.9rem; animation-delay: 0.9s; opacity: 0.5; }
.fan-caption {
position: relative;
z-index: 1;
text-align: center;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.15rem;
color: var(--gold-pale);
margin: 0 auto 2rem;
max-width: 520px;
line-height: 1.5;
}
/* The question form */
.spread-form {
position: relative;
z-index: 1;
max-width: 620px;
margin: 0 auto;
}
.spread-eyebrow {
font-family: 'Italianno', cursive;
font-size: 2.4rem;
color: var(--gold-bright);
text-align: center;
line-height: 1;
margin: 0 0 0.4rem;
-webkit-text-stroke: 0.5px var(--gold-bright);
}
.spread-label {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.22em;
color: var(--gold-pale);
text-align: center;
margin: 0 0 1.5rem;
}
.spread-textarea-wrap { position: relative; }
.spread-textarea {
width: 100%;
display: block;
padding: 1.2rem 1.4rem;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.5;
background: rgba(245, 230, 210, 0.06);
color: var(--type-on-dark);
border: 1px solid var(--rule-gold-2);
border-radius: 0;
resize: vertical;
min-height: 90px;
transition: border-color 0.3s, background 0.3s;
}
.spread-textarea::placeholder {
color: rgba(245, 230, 210, 0.4);
font-style: italic;
}
.spread-textarea:focus {
outline: none;
border-color: var(--gold);
background: rgba(245, 230, 210, 0.1);
}
.spread-counter {
text-align: right;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.16em;
color: var(--type-mute, rgba(245, 230, 210, 0.55));
margin-top: 0.4rem;
}
/* Category chips ("bubbles") — iter 24 readability pass */
.spread-categories {
margin: 1.75rem 0 1.5rem;
text-align: center;
}
.spread-cat-label {
font-family: 'Italianno', cursive;
font-size: 2rem; /* keep larger */
color: var(--rose-soft); /* iter 25: back to rose-soft as user prefers */
line-height: 1;
margin: 0 0 1rem;
-webkit-text-stroke: 0.5px var(--rose-soft); /* keep fake-bold for readability */
}
.spread-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.spread-chip {
display: inline-flex;
align-items: center;
padding: 0.6rem 1.2rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1rem; /* was 0.95rem */
letter-spacing: 0.16em;
color: var(--gold-pale);
background: transparent;
border: 1px solid var(--rule-gold-2);
border-radius: 999px;
cursor: pointer;
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.spread-chip:hover {
background: rgba(184, 145, 80, 0.12);
color: var(--gold-shimmer);
}
.spread-chip.is-active {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
font-weight: 900; /* was 800 — max boldness */
font-size: 1.05rem; /* slightly larger when active */
letter-spacing: 0.2em;
box-shadow: 0 4px 14px rgba(184, 145, 80, 0.5);
}
/* Pull a Card button */
.spread-pull {
display: flex;
justify-content: center;
margin: 2rem 0 0;
}
.btn-pull {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1.1rem 2.4rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.2rem;
letter-spacing: 0.2em;
color: var(--ink);
background: linear-gradient(180deg, var(--gold-shimmer), var(--gold) 60%, var(--gold-deep));
background-size: 100% 200%;
border: 0;
border-radius: 0;
cursor: pointer;
text-decoration: none;
box-shadow:
0 12px 28px rgba(184, 145, 80, 0.4),
0 0 0 1px var(--gold);
transition: background-position 0.6s, letter-spacing 0.3s, transform 0.3s;
line-height: 1;
}
.btn-pull::after {
content: "✦";
font-style: italic;
font-size: 1.1em;
letter-spacing: 0;
}
.btn-pull:hover {
background-position: 100% 0;
letter-spacing: 0.24em;
transform: translateY(-2px);
}
/* ═══════════ ASK A DIFFERENT QUESTION (subtle reset) ═══════════ */
.ask-different {
text-align: center;
margin: 4rem auto 0;
padding-top: 2.5rem;
border-top: 1px solid var(--rule-gold);
max-width: 600px;
}
.ask-different-eyebrow {
font-family: 'Italianno', cursive;
font-size: 2.1rem; /* iter 26: a touch larger */
color: var(--burgundy);
line-height: 1;
margin: 0 0 0.85rem;
-webkit-text-stroke: 0.5px var(--burgundy);
}
.btn-different {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 1.85rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1.08rem;
letter-spacing: 0.2em;
color: var(--burgundy);
background: transparent;
border: 1.5px solid var(--burgundy);
cursor: pointer;
transition: background 0.3s, color 0.3s, letter-spacing 0.3s;
line-height: 1;
}
.btn-different::before {
content: "↺";
font-style: italic;
font-size: 1.15em;
letter-spacing: 0;
}
.btn-different:hover {
background: var(--burgundy);
color: var(--vellum);
letter-spacing: 0.24em;
}
/* ═══════════ HERO ═══════════ */
.hero {
position: relative;
z-index: 2;
text-align: center;
padding: 7rem 2rem 5rem;
max-width: 920px;
margin: 0 auto;
}
.hero-volute {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin: 0 0 2rem;
color: var(--gold);
opacity: 0;
animation: fadeUp 1.4s ease 0.2s forwards;
}
.hero-volute::before, .hero-volute::after {
content: "";
flex: 0 1 60px;
height: 1px;
background: var(--gold);
}
.hero-volute-mark {
font-family: 'Cinzel Decorative', serif;
font-size: 0.9rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 700;
}
.hero-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(3.2rem, 7.5vw, 6rem);
line-height: 0.96;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 1.25rem;
opacity: 0;
animation: fadeUp 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}
.hero-title em {
color: var(--burgundy);
font-weight: 600;
}
.hero-title .amp {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 400;
color: var(--rose-deep);
font-size: 1.15em;
margin: 0 0.05em;
}
.hero-script {
font-family: 'Italianno', cursive;
font-size: clamp(2rem, 4.5vw, 3rem);
color: var(--gold-deep);
margin: 0 0 1.75rem;
line-height: 1;
opacity: 0;
animation: fadeUp 1.4s ease 0.9s forwards;
}
.hero-deck {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.55;
max-width: 560px;
margin: 0 auto;
color: var(--ink-2);
opacity: 0;
animation: fadeUp 1.4s ease 1.2s forwards;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-fleuron {
margin: 3.5rem auto 0;
max-width: 320px;
opacity: 0;
animation: fadeUp 1.4s ease 1.5s forwards;
}
/* ═══════════ MAIN ═══════════ */
main {
position: relative;
z-index: 2;
padding: 0 2rem 7rem;
}
.container { max-width: 1100px; margin: 0 auto; }
/* ═══════════ SECTION HEADERS ═══════════ */
.s-head {
text-align: center;
margin: 6rem 0 3.5rem;
}
.s-head-numeral {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 3.4rem;
line-height: 1;
color: var(--rose-deep);
margin-bottom: 0.5rem;
}
.s-head-numeral .point {
color: var(--gold);
font-weight: 700;
}
.s-head-label {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.22em;
color: var(--ink);
}
.s-head-deck {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.15rem;
color: var(--ink-mute);
margin: 0.85rem auto 1rem;
max-width: 460px;
}
.s-head-fleuron {
margin: 1rem auto 0;
max-width: 280px;
}
/* ═══════════ THE REVEAL ═══════════ */
.reveal-frame {
position: relative;
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(184, 145, 80, 0.18), transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(185, 107, 122, 0.12), transparent 60%),
linear-gradient(180deg, #3A1F38 0%, #2A1428 100%);
color: var(--type-on-dark);
padding: 3rem;
border-radius: 2px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(58, 31, 56, 0.4),
0 0 0 1px var(--gold);
}
.reveal-frame::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,");
opacity: 0.5;
}
.reveal-frame::after {
content: "";
position: absolute;
inset: 14px;
border: 1px solid var(--rule-gold-2);
pointer-events: none;
}
.reveal-inner {
position: relative;
z-index: 1;
padding: 2rem 1.5rem;
display: grid;
grid-template-columns: 5fr 7fr;
gap: 3rem;
align-items: start;
}
@media (max-width: 880px) {
.reveal-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* ─── VITRINE — card now displays full image (FIX: no clipping) ─── */
.vitrine {
text-align: center;
}
.vitrine-card {
width: 100%;
max-width: 280px;
margin: 0 auto;
/* REMOVED: aspect-ratio. Card grows to fit image's natural height. */
position: relative;
display: flex;
flex-direction: column;
padding: 0.9rem;
background:
radial-gradient(ellipse 60% 40% at 50% 25%, rgba(212, 172, 104, 0.4), transparent 60%),
radial-gradient(ellipse 100% 70% at 50% 100%, rgba(107, 31, 44, 0.4), transparent 60%),
linear-gradient(170deg, #5A2D52 0%, #3A1F38 50%, #2A1428 100%);
border: 1px solid var(--gold);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.55),
0 0 0 4px rgba(184, 145, 80, 0.06),
0 0 0 5px var(--gold-deep),
0 0 0 9px rgba(184, 145, 80, 0.04),
inset 0 0 60px rgba(0, 0, 0, 0.4);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
animation: cardFloat 6s ease-in-out infinite;
}
@keyframes cardFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(-0.5deg); }
}
.vitrine-card:hover {
animation: none;
transform: translateY(-8px) rotate(-1deg);
}
.vitrine-card::before {
content: "";
position: absolute;
inset: 8px;
border: 1px solid rgba(184, 145, 80, 0.4);
pointer-events: none;
z-index: 2;
}
.vc-name {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.22em;
color: var(--gold-pale);
padding: 0.55rem 0;
position: relative;
z-index: 1;
text-align: center;
}
/* Top card name (THE MAGICIAN) — minor bump higher than bottom name */
.vc-name--lg {
font-size: 1.1rem;
letter-spacing: 0.24em;
padding: 0.65rem 0 0.55rem;
}
/* FIXED: image now displays at natural aspect, no clipping */
.vc-art-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 0.4rem;
position: relative;
z-index: 1;
}
.vc-art {
display: block;
width: 100%;
height: auto; /* preserve natural aspect ratio */
border: 1px solid rgba(184, 145, 80, 0.4);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.4),
inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.vitrine-script {
font-family: 'Italianno', cursive;
font-size: 2rem;
color: var(--rose-soft);
margin: 1.5rem 0 0.5rem;
line-height: 1;
}
.vitrine-attr {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.2em;
color: var(--gold-pale);
}
/* ─── SCENE — answer + reading ─── */
.scene { padding-top: 0.5rem; }
.scene-eyebrow {
font-family: 'Italianno', cursive;
font-weight: 400;
font-size: 2.3rem; /* iter 26: bigger */
line-height: 1;
color: var(--gold-pale);
margin: 0 0 0.6rem;
display: flex;
align-items: center;
gap: 0.85rem;
-webkit-text-stroke: 0.4px var(--gold-pale);
}
.scene-eyebrow::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--rule-gold-2), transparent);
}
.scene-answer {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(5.5rem, 13vw, 9rem);
line-height: 0.85;
letter-spacing: -0.04em;
margin: 0;
background: linear-gradient(180deg, var(--gold-shimmer), var(--gold) 60%, var(--gold-deep));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer 6s ease-in-out infinite;
text-shadow: 0 0 50px rgba(212, 172, 104, 0.3);
}
/* FIXED: comma scaled DOWN — was inheriting full size, now 0.55em */
.scene-answer .punct {
display: inline-block;
font-size: 0.55em;
font-weight: 500;
vertical-align: baseline;
margin-left: -0.05em;
background: linear-gradient(180deg, var(--rose-soft), var(--rose));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.scene-tail {
font-family: 'Italianno', cursive;
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
color: var(--rose-soft);
line-height: 1.05;
margin: 0.4rem 0 2rem;
display: block;
}
.scene-text {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.22rem;
line-height: 1.7;
color: var(--type-on-dark);
max-width: 560px;
}
.scene-text p { margin: 0 0 1.1rem; }
.scene-text em { color: var(--gold-pale); font-style: italic; }
/* Ambient audio toggle — discreet button, top-right of spread frame */
.yn-audio-toggle {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 5;
width: 38px;
height: 38px;
border: 1px solid var(--rule-gold-2, rgba(184, 145, 80, 0.45));
background: rgba(58, 31, 56, 0.5);
color: var(--gold-bright, #D4AC68);
font-size: 1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
font-family: inherit;
}
.yn-audio-toggle:hover {
background: rgba(184, 145, 80, 0.18);
border-color: var(--gold-bright, #D4AC68);
}
.yn-audio-toggle[aria-pressed="true"] {
background: rgba(212, 172, 104, 0.22);
color: var(--gold-bright, #D4AC68);
border-color: var(--gold-bright, #D4AC68);
}
/* iter 38: hero medallion stars twinkle — gentle staggered opacity + scale pulse */
.page-hero-medallion .hero-twinkle {
transform-box: fill-box;
transform-origin: center;
animation: heroTwinkle 3.4s ease-in-out infinite;
}
.page-hero-medallion .hero-twinkle-1 { animation-delay: 0s; animation-duration: 3.2s; }
.page-hero-medallion .hero-twinkle-2 { animation-delay: 0.6s; animation-duration: 4.1s; }
.page-hero-medallion .hero-twinkle-3 { animation-delay: 1.1s; animation-duration: 3.7s; }
.page-hero-medallion .hero-twinkle-4 { animation-delay: 1.7s; animation-duration: 2.9s; }
.page-hero-medallion .hero-twinkle-5 { animation-delay: 0.3s; animation-duration: 4.5s; }
.page-hero-medallion .hero-twinkle-6 { animation-delay: 2.1s; animation-duration: 3.3s; }
@keyframes heroTwinkle {
0%, 100% { opacity: 0.35; transform: scale(0.7); }
45% { opacity: 1; transform: scale(1.25); }
55% { opacity: 1; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
.page-hero-medallion .hero-twinkle { animation: none; opacity: 1; }
}
/* iter 38: chart-layered reading — fleuron divider + mirror layout (text LEFT, moon + sun/moon/rising trio RIGHT) */
.yn-astro-result {
margin: 3rem auto 0;
padding: 0;
border-top: 0;
}
.yn-astro-divider {
margin: 0 auto 2.5rem;
max-width: 760px;
}
/* wider gold lines than the hero fleuron */
.yn-astro-divider.fleuron::before,
.yn-astro-divider.fleuron::after {
flex: 0 1 200px;
}
.yn-astro-divider .fleuron-mark {
font-size: 1.7rem;
color: var(--gold-bright);
}
/* iter 38c: REVERSED of the top reveal grid (mirror layout).
Text goes LEFT (where tarot card was up top), moon + trio go RIGHT (where the answer reading was).
Reading text gets the wider 7fr column for prose; moon gets the narrower 5fr column on the right
and is centered within it so it doesn't touch the right wall. */
.yn-astro-result-grid {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 3rem;
padding: 0 1.5rem;
align-items: start;
}
@media (max-width: 880px) {
.yn-astro-result-grid { grid-template-columns: 1fr; gap: 2rem; padding: 0; }
.yn-astro-result-side { justify-self: center; }
}
.yn-astro-result-text {
min-width: 0;
/* Indent so the heading + reading begin at the same X as the tarot card up top
(the card is centered inside its 5fr column with ~52px inset). */
padding-left: 3rem;
}
@media (max-width: 880px) {
.yn-astro-result-text { padding-left: 0; }
}
.yn-astro-result-eyebrow {
font-family: 'Italianno', cursive;
font-size: 1.7rem;
color: var(--gold-bright);
line-height: 1;
margin: 0 0 0.3rem;
-webkit-text-stroke: 0.4px var(--gold-bright);
}
.yn-astro-result-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.85rem;
color: var(--gold-pale);
margin: 0 0 1rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
.yn-astro-result-body {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.22rem;
line-height: 1.7;
color: var(--type-on-dark);
max-width: 560px;
}
.yn-astro-result-body p { margin: 0 0 1.1rem; }
.yn-astro-result-body p:last-child { margin-bottom: 0; }
.yn-astro-result-body em { color: var(--gold-pale); font-style: italic; }
.yn-astro-result-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
width: 100%;
max-width: 240px;
justify-self: center;
}
.yn-astro-result-art {
width: 170px;
flex-shrink: 0;
}
.yn-astro-result-art svg {
width: 100%;
height: auto;
display: block;
}
/* Sun · Moon · Rising trio under the moon medallion */
.yn-natal-trio {
list-style: none;
margin: 0;
padding: 1rem 1.25rem;
border-top: 1px solid var(--rule-gold-2, rgba(184, 145, 80, 0.35));
border-bottom: 1px solid var(--rule-gold-2, rgba(184, 145, 80, 0.35));
width: 100%;
display: flex;
flex-direction: column;
gap: 0.45rem;
font-family: 'EB Garamond', serif;
}
.yn-natal-trio li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.yn-natal-trio .trio-label {
font-variant: small-caps;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.16em;
color: var(--gold-bright);
}
.yn-natal-trio .trio-sign {
font-style: italic;
font-weight: 600;
font-size: 1.15rem;
color: var(--gold-pale);
}
/* tiny twinkle on the celestial illustration too */
.yn-astro-result-art .tw {
transform-box: fill-box;
transform-origin: center;
animation: heroTwinkle 3.6s ease-in-out infinite;
}
.yn-astro-result-art .tw-1 { animation-delay: 0s; animation-duration: 3.4s; }
.yn-astro-result-art .tw-2 { animation-delay: 0.7s; animation-duration: 4.2s; }
.yn-astro-result-art .tw-3 { animation-delay: 1.3s; animation-duration: 3.1s; }
.yn-astro-result-art .tw-4 { animation-delay: 1.9s; animation-duration: 3.8s; }
.yn-astro-result-art .tw-5 { animation-delay: 0.4s; animation-duration: 4.5s; }
.yn-astro-result-art .tw-6 { animation-delay: 2.2s; animation-duration: 3.3s; }
.yn-astro-result-art .tw-7 { animation-delay: 1.0s; animation-duration: 4.0s; }
/* FIXED iter 3: drop cap right margin pushed further (1.4rem) for breathing room */
.scene-text > p:first-of-type::first-letter {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700;
font-size: 5.2rem;
float: left;
line-height: 0.85;
margin: 0.5rem 1.4rem 0.2rem 0; /* was 0.85rem — now 1.4rem right */
padding-bottom: 0.25rem;
color: var(--gold-bright);
text-shadow: 0 0 30px rgba(212, 172, 104, 0.4);
}
.scene-quote {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.6rem;
line-height: 1.3;
color: var(--gold-bright);
margin: 2rem 0;
padding: 1.5rem 1.5rem;
border-top: 1px solid var(--rule-gold-2);
border-bottom: 1px solid var(--rule-gold-2);
text-align: center;
position: relative;
letter-spacing: -0.005em;
}
.scene-quote::before {
content: "❝";
position: absolute;
top: -0.35em;
left: 50%;
transform: translateX(-50%);
background: var(--aubergine);
color: var(--gold-bright);
padding: 0 0.6rem;
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 2rem;
line-height: 1;
}
.reveal-foot {
position: relative;
z-index: 1;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule-gold-2);
display: flex;
justify-content: space-between;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.18em;
color: var(--gold-pale);
}
/* ═══════════ INSERT — sealed letter w/ celestial illustration ═══════════ */
.sealed-letter[hidden] { display: none !important; }
.sealed-letter {
margin: 2rem auto 0;
max-width: 760px;
position: relative;
background:
radial-gradient(ellipse 80% 50% at 30% 0%, rgba(184, 145, 80, 0.2), transparent 65%),
linear-gradient(180deg, var(--vellum) 0%, var(--bg) 100%);
border: 1px solid var(--rule-gold);
padding: 3.5rem 2.75rem;
display: grid;
grid-template-columns: 1fr auto;
gap: 2.5rem;
align-items: center;
box-shadow: 0 14px 40px rgba(58, 31, 56, 0.18);
z-index: 1; /* sit above the noise overlay inside .reveal-frame */
}
/* When the sealed-letter sits inside the dark reveal: tighter top margin,
stronger shadow against the dark, and a subtle gold halo for separation. */
.reveal-frame .sealed-letter {
margin-top: 1.25rem;
max-width: 680px;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.55),
0 0 0 1px var(--gold);
}
@media (max-width: 720px) {
.sealed-letter { grid-template-columns: 1fr; padding: 2.5rem 1.75rem; gap: 2rem; }
}
/* NEW iter 3: celestial illustration is larger + stars twinkle */
.celestial {
width: 190px; height: 190px; /* was 150 — bumped */
flex-shrink: 0;
position: relative;
}
@media (max-width: 720px) {
.celestial { margin: 0 auto; width: 160px; height: 160px; }
}
.celestial svg {
width: 100%;
height: 100%;
display: block;
}
/* Twinkle animation — opacity-only so origin is irrelevant */
@keyframes twinkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.celestial .tw, .jar-mark .tw, .note-celestial .tw {
animation: twinkle 2.6s ease-in-out infinite;
}
.celestial .tw-1, .jar-mark .tw-1, .note-celestial .tw-1 { animation-delay: 0s; animation-duration: 2.4s; }
.celestial .tw-2, .jar-mark .tw-2, .note-celestial .tw-2 { animation-delay: 0.7s; animation-duration: 3.2s; }
.celestial .tw-3, .jar-mark .tw-3, .note-celestial .tw-3 { animation-delay: 1.4s; animation-duration: 2.8s; }
.celestial .tw-4, .jar-mark .tw-4, .note-celestial .tw-4 { animation-delay: 0.3s; animation-duration: 3.6s; }
.celestial .tw-5, .note-celestial .tw-5 { animation-delay: 1.9s; animation-duration: 2.2s; }
.celestial .tw-6, .note-celestial .tw-6 { animation-delay: 0.5s; animation-duration: 3.0s; }
.celestial .tw-7 { animation-delay: 1.1s; animation-duration: 2.6s; }
/* FIXED: invitation eyebrow LARGER */
.letter-eyebrow {
font-family: 'Italianno', cursive;
font-weight: 400;
font-size: 2.2rem; /* was 1.8rem */
line-height: 1;
color: var(--burgundy);
margin: 0 0 0.6rem;
}
.letter-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2.1rem, 3.6vw, 2.9rem);
line-height: 1;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 0.4rem;
}
/* Italianno doesn't have a bold weight on Google Fonts — fake bold with stroke */
.letter-script {
font-family: 'Italianno', cursive;
font-size: 2.2rem;
color: var(--burgundy);
line-height: 1;
margin-bottom: 1.15rem;
-webkit-text-stroke: 0.6px var(--burgundy);
text-shadow: 0 0 1px rgba(107, 31, 44, 0.25);
}
.letter-deck {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.22rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 1.75rem;
max-width: 460px;
}
.letter-deck em {
color: var(--burgundy);
font-weight: 700;
font-style: italic;
}
.letter-actions {
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
/* ═══════════ BUTTONS — flex for true vertical centering ═══════════ */
.btn {
display: inline-flex; /* FIXED: was inline-block */
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 1.85rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.12rem;
letter-spacing: 0.18em;
text-transform: none;
text-decoration: none;
border: 0;
cursor: pointer;
position: relative;
transition: background 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease;
line-height: 1; /* keep predictable height */
}
.btn::after {
content: "⟶";
font-family: 'EB Garamond', serif;
font-style: italic;
letter-spacing: 0;
font-size: 1.05em;
display: inline-block;
transition: transform 0.3s ease;
}
.btn:hover::after { transform: translateX(4px); }
.btn-dark {
background: var(--ink);
color: var(--gold-shimmer);
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
}
.btn-dark:hover {
background: var(--aubergine);
letter-spacing: 0.22em;
}
.btn-light {
background: var(--gold);
color: var(--ink);
border-top: 1px solid var(--gold-bright);
border-bottom: 1px solid var(--gold-deep);
}
.btn-light:hover {
background: var(--gold-bright);
letter-spacing: 0.22em;
}
.btn-ghost {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.15rem;
color: var(--ink-mute);
text-decoration: underline;
text-decoration-color: var(--ink-3);
text-underline-offset: 4px;
}
.btn-ghost:hover { color: var(--burgundy); text-decoration-color: var(--rose); }
/* "See an example" — now a prominent secondary button with eye icon */
.btn-see {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 1rem 1.6rem;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.18em;
color: var(--burgundy);
background: transparent;
border: 1.5px solid var(--burgundy);
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease, border-color 0.3s ease;
line-height: 1;
}
.btn-see:hover {
background: var(--burgundy);
color: var(--vellum);
letter-spacing: 0.22em;
}
.btn-see-icon {
display: inline-flex;
align-items: center;
font-size: 1.2em;
line-height: 1;
}
/* ═══════════ EXAMPLE POPUP MODAL ═══════════ */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(42, 20, 40, 0.85);
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 2rem;
animation: backdropIn 0.3s ease;
}
.modal-backdrop.is-open { display: flex; }
@keyframes backdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal {
background: linear-gradient(180deg, var(--vellum) 0%, var(--bg) 100%);
max-width: 920px; /* wider for side-by-side */
width: 100%;
max-height: 88vh;
overflow-y: auto;
padding: 3rem 2.5rem 2.5rem;
position: relative;
border: 1px solid var(--gold);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
animation: modalIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
position: absolute;
top: 1rem; right: 1rem;
width: 38px; height: 38px;
background: transparent;
border: 1px solid var(--rule-gold);
color: var(--burgundy);
cursor: pointer;
font-family: 'EB Garamond', serif;
font-size: 1.5rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
z-index: 2;
}
.modal-close:hover { background: var(--burgundy); color: var(--vellum); }
.modal-eyebrow {
font-family: 'Italianno', cursive;
font-size: 1.9rem;
color: var(--burgundy);
line-height: 1;
margin: 0 0 0.4rem;
text-align: center;
-webkit-text-stroke: 0.5px var(--burgundy);
}
.modal-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 2.4rem;
line-height: 1;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 0.5rem;
text-align: center;
}
.modal-deck {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.1rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 auto 2rem;
max-width: 540px;
text-align: center;
}
/* The "context strip" — question + card name shown above the comparison */
.modal-context {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem 1.5rem;
margin: 0 0 2rem;
padding: 1rem 1.5rem;
background: var(--paper-warm);
border-top: 1px solid var(--rule-gold);
border-bottom: 1px solid var(--rule-gold);
}
/* iter 6: bumped sizes + switched to EB Garamond small caps 700 — readable */
.modal-context-label {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.18em;
color: var(--burgundy);
}
.modal-context-q {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.18rem;
color: var(--ink);
}
.modal-context-divider {
width: 1px; height: 24px;
background: var(--rule-gold-2);
}
.modal-context-card {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.16em;
color: var(--ink);
}
/* Side-by-side comparison */
.compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: stretch;
margin: 0 0 2rem;
}
@media (max-width: 720px) {
.compare { grid-template-columns: 1fr; gap: 1.5rem; }
}
.compare-col {
padding: 1.5rem 1.5rem 1.25rem;
position: relative;
}
.compare-col-1 {
background: rgba(245, 232, 221, 0.5);
border: 1px solid var(--rule);
}
.compare-col-2 {
background: var(--vellum);
border: 1px solid var(--rule-gold-2);
box-shadow: 0 0 0 1px var(--rule-gold) inset;
}
.compare-divider {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
position: relative;
}
@media (max-width: 720px) { .compare-divider { display: none; } }
.compare-divider::before {
content: "";
position: absolute;
inset: 0.5rem 50%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.compare-divider-mark {
background: var(--vellum);
color: var(--burgundy);
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700;
font-size: 0.95rem;
padding: 0.3rem 0.5rem;
z-index: 1;
}
/* iter 6: compare labels — EB Garamond small caps 700, readable */
.compare-label {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.18em;
color: var(--ink);
margin-bottom: 0.5rem;
}
.compare-col-2 .compare-label { color: var(--burgundy); }
/* Italianno script eyebrow — bigger + bolded with text-stroke */
.compare-eyebrow {
font-family: 'Italianno', cursive;
font-size: 2rem;
color: var(--ink-2);
line-height: 1;
margin-bottom: 1.1rem;
-webkit-text-stroke: 0.5px var(--ink-2);
}
.compare-col-2 .compare-eyebrow {
color: var(--burgundy);
-webkit-text-stroke: 0.6px var(--burgundy);
}
.compare-text {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.02rem;
line-height: 1.65;
color: var(--ink-2);
}
.compare-text p { margin: 0 0 0.85rem; }
.compare-text p:last-child { margin-bottom: 0; }
/* Burgundy highlights = chart-specific natal references */
.compare-text .natal {
background: linear-gradient(180deg, transparent 60%, rgba(185, 107, 122, 0.25) 60%);
font-weight: 700;
color: var(--burgundy);
padding: 0 0.15em;
}
.modal-foot {
text-align: center;
margin: 1.5rem auto 0;
max-width: 600px;
}
.modal-foot-line {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.15rem;
line-height: 1.5;
color: var(--ink);
margin: 0 0 1.5rem;
}
.modal-foot-line em {
color: var(--burgundy);
font-weight: 700;
}
/* ═══════════ TWIN OFFERINGS ═══════════ */
.jars {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 920px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 720px) { .jars { grid-template-columns: 1fr; } }
.jar {
position: relative;
text-decoration: none;
color: inherit;
border: 1px solid var(--rule-gold);
background: var(--vellum);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, background 0.4s;
display: flex;
flex-direction: column;
}
.jar:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(58, 31, 56, 0.18);
background: var(--paper-warm);
}
.jar > .jr-tl, .jar > .jr-tr, .jar > .jr-bl, .jar > .jr-br {
position: absolute;
width: 22px; height: 22px;
pointer-events: none;
content: "";
}
.jar > .jr-tl { top: 6px; left: 6px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.jar > .jr-tr { top: 6px; right: 6px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.jar > .jr-bl { bottom: 6px; left: 6px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.jar > .jr-br { bottom: 6px; right: 6px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.jar-inner {
padding: 2.5rem 2rem 2rem;
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
}
/* Offering illustration medallions — replaces the i./ii. numerals */
.jar-mark {
width: 96px; height: 96px;
margin: 0 auto 1.25rem;
position: relative;
}
.jar-mark svg {
width: 100%;
height: 100%;
display: block;
}
.jar-mark::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px solid var(--rule-gold);
pointer-events: none;
}
/* iter 6: jar eyebrow — EB Garamond small caps 700 burgundy (matches modal pattern) */
.jar-cls {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.18em;
color: var(--burgundy);
margin: 0 0 0.95rem;
text-align: center;
}
.jar-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 2.2rem;
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 0.3rem;
text-align: center;
}
.jar-deck {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.12rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 1.5rem;
text-align: center;
flex: 1;
}
.jar-price {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700;
font-size: 1.25rem;
color: var(--burgundy);
margin: 0 0 1.25rem;
text-align: center;
}
/* CHANGED: jar CTAs now have distinct backgrounds (no longer same as page bg) */
.jar-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: center;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 800;
font-size: 1.12rem;
letter-spacing: 0.18em;
padding: 1rem 0;
border-top: 1px solid var(--gold);
transition: background 0.3s, color 0.3s, letter-spacing 0.3s;
}
.jar-cta::after {
content: "⟶";
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.05em;
letter-spacing: 0;
transition: transform 0.3s ease;
}
/* Card 1 (primary) — burgundy */
.jar-1 .jar-cta {
background: var(--burgundy);
color: var(--gold-shimmer);
}
.jar-1:hover .jar-cta {
background: var(--burgundy-deep);
letter-spacing: 0.22em;
}
.jar-1:hover .jar-cta::after { transform: translateX(4px); }
/* Card 2 (secondary) — aubergine */
.jar-2 .jar-cta {
background: var(--aubergine);
color: var(--gold-pale);
}
.jar-2:hover .jar-cta {
background: var(--aubergine-2);
letter-spacing: 0.22em;
}
.jar-2:hover .jar-cta::after { transform: translateX(4px); }
/* ═══════════ NOTICE — apothecary's note ═══════════ */
.apothecary-note {
max-width: 580px;
margin: 1rem auto 0;
background: var(--vellum);
position: relative;
border: 1px solid var(--rule-gold);
}
.apothecary-note > .ap-tl, .apothecary-note > .ap-tr, .apothecary-note > .ap-bl, .apothecary-note > .ap-br {
position: absolute;
width: 22px; height: 22px;
pointer-events: none;
}
.apothecary-note > .ap-tl { top: 6px; left: 6px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.apothecary-note > .ap-tr { top: 6px; right: 6px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.apothecary-note > .ap-bl { bottom: 6px; left: 6px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.apothecary-note > .ap-br { bottom: 6px; right: 6px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
/* iter 8: notice celestial illustration — replaces wax stamp */
.note-celestial {
width: 130px;
height: 130px;
margin: 0 auto 0.5rem;
display: block;
}
.note-celestial svg { width: 100%; height: 100%; display: block; }
.note-body { padding: 2.5rem 2.5rem 2rem; text-align: center; }
/* HIERARCHY iter 8: "Three Drawn Today" is now the prominent TITLE,
"come back tomorrow" is the prominent script subtitle,
"Let the universe rest" demoted into the body as a lyrical line */
.note-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2.4rem, 4.4vw, 3.2rem);
line-height: 0.96;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0.5rem 0 0.5rem;
}
.note-script {
font-family: 'Italianno', cursive;
font-size: 2.6rem;
color: var(--burgundy);
margin: 0 0 1.25rem;
line-height: 1;
-webkit-text-stroke: 0.6px var(--burgundy);
}
.note-deck {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.22rem;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 1.75rem;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.note-deck em {
color: var(--burgundy);
font-style: italic;
font-weight: 700;
}
/* "In the meantime" — bumped much larger */
.note-also {
font-family: 'Italianno', cursive;
font-weight: 400;
font-size: 2.2rem; /* was 1.7rem */
line-height: 1;
color: var(--burgundy);
margin: 1.75rem 0 1rem;
padding-top: 1.75rem;
border-top: 1px solid var(--rule-gold);
-webkit-text-stroke: 0.5px var(--burgundy);
}
.note-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem 1.5rem;
margin: 0 0 1.5rem;
}
@media (max-width: 480px) { .note-list { grid-template-columns: 1fr; } }
.note-list a {
font-family: 'EB Garamond', serif;
font-weight: 600;
font-size: 1.18rem;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--rule);
padding: 0.5rem 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: color 0.2s, border-color 0.2s;
}
.note-list a::before { content: "❋"; color: var(--gold); font-size: 0.95rem; }
.note-list a:hover { color: var(--burgundy); border-color: var(--burgundy); }
.note-list a:hover::before { color: var(--burgundy); }
.note-foot {
display: flex;
justify-content: center;
padding: 1.5rem 2.5rem 2.5rem;
border-top: 1px solid var(--rule);
}
/* ═══════════ FAQ SECTION — iter 21 (image + accordion) ═══════════ */
.faq-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 3.5rem;
align-items: start;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 880px) {
.faq-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 540px; }
}
/* Image side */
.faq-image-wrap {
position: sticky;
top: 2rem;
}
.faq-image {
position: relative;
border: 1px solid var(--rule-gold);
background: var(--vellum);
padding: 0.85rem;
box-shadow: 0 14px 40px rgba(58, 31, 56, 0.22);
}
.faq-image img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--rule-gold);
}
.faq-image > .if-tl, .faq-image > .if-tr,
.faq-image > .if-bl, .faq-image > .if-br {
position: absolute;
width: 18px; height: 18px;
pointer-events: none;
content: "";
}
.faq-image > .if-tl { top: 5px; left: 5px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.faq-image > .if-tr { top: 5px; right: 5px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.faq-image > .if-bl { bottom: 5px; left: 5px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.faq-image > .if-br { bottom: 5px; right: 5px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.faq-image-caption {
text-align: center;
margin-top: 1.25rem;
font-family: 'Italianno', cursive;
font-size: 2.1rem; /* iter 22: larger */
color: var(--burgundy);
line-height: 1;
-webkit-text-stroke: 0.5px var(--burgundy); /* fake bold for Italianno */
}
/* Accordion side */
.faq-list { padding-top: 0.5rem; }
.faq-item {
border-bottom: 1px solid var(--rule-gold);
padding: 0;
margin: 0;
}
.faq-item:first-child {
border-top: 1px solid var(--rule-gold);
}
.faq-item[open] {
background: rgba(184, 145, 80, 0.04);
}
/* Summary (clickable question) — iter 22: bolder + moon icon */
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.4rem 3.6rem 1.4rem 0.5rem;
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 700; /* was 500 — bolder */
font-size: 1.35rem;
line-height: 1.3;
color: var(--ink);
position: relative;
transition: color 0.2s ease;
letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
/* Moon icon in a circular border — replaces +/- */
.faq-icon {
position: absolute;
right: 0.85rem;
top: 50%;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--gold);
background: var(--vellum);
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); }
.faq-item summary:hover .faq-icon { background: var(--paper-warm); }
/* Body content (the answer) */
.faq-body {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.3s ease,
padding 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-item[open] .faq-body {
max-height: 600px;
opacity: 1;
padding: 0 0.5rem 1.5rem;
}
.faq-body p {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1.12rem;
line-height: 1.65;
color: var(--ink-2);
margin: 0 0 0.85rem;
}
.faq-body p:last-child { margin-bottom: 0; }
/* ═══════════ COLOPHON ═══════════ */
.colophon {
margin-top: 6rem;
padding-top: 3rem;
border-top: 1px solid var(--rule);
text-align: center;
}
.colophon-mark {
font-family: 'Italianno', cursive;
font-size: 1.9rem;
color: var(--burgundy);
display: block;
line-height: 1;
margin-bottom: 0.85rem;
}
.colophon-line {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.22em;
color: var(--ink-mute);
}
.colophon-rule {
width: 1px;
height: 32px;
background: var(--gold);
margin: 1rem auto 0;
}
/* ════════════════════════════════════════════════════════════
PRODUCTION STATE MACHINE
The mockup F showed all states composed at once.
Production: only one state visible based on .spread-frame class.
════════════════════════════════════════════════════════════ */
.spread-frame .scene-input { display: block; }
.spread-frame .scene-breath { display: none; }
.spread-frame .scene-reveal { display: none; }
/* INPUT state: show fan + form */
.spread-frame.is-input .scene-input { display: block; }
.spread-frame.is-input .scene-breath { display: none; }
.spread-frame.is-input .scene-reveal { display: none; }
/* BREATH state: show loading dots */
.spread-frame.is-breath .scene-input { display: none; }
.spread-frame.is-breath .scene-breath {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 5rem 0 4rem;
}
.spread-frame.is-breath .scene-reveal { display: none; }
/* REVEALED state: show vitrine + reading + invitation */
.spread-frame.is-revealed .scene-input { display: none; }
.spread-frame.is-revealed .scene-breath { display: none; }
.spread-frame.is-revealed .scene-reveal { display: block; }
/* ── Breath state visuals ── */
.breath-dots {
display: flex;
gap: 0.6rem;
}
.breath-dots span {
width: 14px;
height: 14px;
background: var(--gold-bright);
border-radius: 50%;
animation: breathPulse 1.4s infinite ease-in-out;
}
.breath-dots span:nth-child(2) { animation-delay: 0.2s; }
.breath-dots span:nth-child(3) { animation-delay: 0.4s; }
.breath-label {
font-family: 'Italianno', cursive;
font-size: 2rem;
color: var(--gold-pale);
text-align: center;
margin: 0;
-webkit-text-stroke: 0.5px var(--gold-pale);
}
@keyframes breathPulse {
0%, 100% { opacity: 0.3; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
/* ── Astro modal form (signup partial inherits its own styles) ── */
.astro-form { margin: 0; }
.astro-form-foot {
display: flex;
justify-content: center;
margin: 1.5rem 0 0;
}
/* CRITICAL: must come BEFORE `.astro-loading { display: flex }` so the
[hidden] attribute properly hides the element. Otherwise the loading state
is visible on initial modal open instead of after submit. Same bug pattern
as .sealed-letter[hidden]. */
.astro-loading[hidden] { display: none !important; }
.astro-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 3rem 0;
}
/* iter 34: in cream modal context, swap loading label to readable burgundy */
.modal .astro-loading .breath-label {
color: var(--burgundy);
-webkit-text-stroke: 0.5px var(--burgundy);
}
.modal .astro-loading .breath-dots span {
background: var(--burgundy);
}
/* iter 34: tighter astro modal — reduce top/bottom padding, tighter title */
#ynAstroModal .modal {
padding: 2rem 2rem 1.75rem;
max-width: 720px;
}
#ynAstroModal .modal-title { font-size: 1.85rem; margin-bottom: 0.3rem; }
#ynAstroModal .modal-eyebrow { font-size: 2.2rem; margin-bottom: 0.2rem; }
#ynAstroModal .astro-form-foot { margin-top: 1.25rem; }
#ynAstroModal .astro-loading {
padding: 0.5rem 0 0;
gap: 0.25rem;
}
#ynAstroModal .astro-loading .breath-label { margin: 0; line-height: 1; }
#ynAstroModal .astro-loading .breath-dots span { width: 10px; height: 10px; }
/* ── yn-page wrapper container (production layout) ── */
.yn-page {
position: relative;
z-index: 1;
}
.yn-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem 5rem;
}
/* FAQ section breathing room above */
.faq-section { margin-top: 5rem; padding-top: 1rem; }
/* Reduced motion: skip the staggered fly-in entirely */
@media (prefers-reduced-motion: reduce) {
.fan-card { opacity: 1 !important; animation: none !important; }
.breath-dots span { animation: none; opacity: 0.7; }
}
/* ════════════════════════════════════════════════════════════
ITER 28: SIMPLIFIED FLOW
Cards stay visible + clickable. Form sits BELOW cards (no overlay).
No "Pull a Card" button — clicking ANY fan card is the action.
════════════════════════════════════════════════════════════ */
.scene-input { position: relative; }
.spread-fan { position: relative; z-index: 1; }
.fan-caption {
position: relative;
z-index: 1;
font-family: 'Italianno', cursive;
font-size: clamp(1.7rem, 3.4vw, 2.3rem);
font-style: normal;
color: var(--gold-bright);
text-align: center;
line-height: 1.15;
margin: 0.5rem auto 1.5rem;
-webkit-text-stroke: 0.4px var(--gold-bright);
max-width: 600px;
font-weight: 400;
}
/* Form sits below cards, no overlay/blur trickery */
.spread-form {
position: relative;
margin: 1.5rem auto 0;
max-width: 620px;
z-index: 5;
}
/* ── Fieldset reset (no white box, no native border) ── */
.spread-categories {
border: 0;
padding: 0;
margin: 1.5rem 0 1.5rem;
}
.spread-categories legend.spread-cat-label {
padding: 0;
display: block;
width: 100%;
text-align: center;
}
/* ── Hide native radio inputs (chip label provides the visual) ── */
.spread-chip input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
/* ── Offerings spacing: separate from the dark spread frame above ── */
.jars { margin-top: 4rem; }
/* ── Production colophon (before site footer) ── */
.yn-colophon {
margin: 5rem auto 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--rule-gold);
text-align: center;
max-width: 1100px;
padding-left: 2rem;
padding-right: 2rem;
}
.yn-colophon-mark {
font-family: 'Italianno', cursive;
font-size: 2rem;
color: var(--burgundy);
display: block;
line-height: 1;
-webkit-text-stroke: 0.5px var(--burgundy);
}
.yn-colophon-rule {
width: 1px;
height: 32px;
background: var(--gold);
margin: 1rem auto 0;
}
/* ════════════════════════════════════════════════════════════
ITER 29: Modal form styling + reveal animation + page-load
════════════════════════════════════════════════════════════ */
/* ── Astro modal: signup form fields styled for cream context (iter 34: compact 2-col) ── */
.modal-deck-tight { margin-bottom: 1.25rem; }
.modal .signup-form-fields {
margin-top: 0.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 1.25rem;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.modal .signup-form-fields .su-field {
display: block;
margin: 0;
position: relative;
min-width: 0;
}
.modal .signup-form-fields .su-label {
display: block;
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.98rem;
letter-spacing: 0.14em;
color: var(--burgundy);
margin-bottom: 0.3rem;
text-align: left;
}
.modal .signup-form-fields input[type="text"],
.modal .signup-form-fields input[type="email"],
.modal .signup-form-fields input[type="date"],
.modal .signup-form-fields select,
.modal .signup-form-fields textarea {
width: 100%;
height: 38px;
padding: 0 0.65rem;
font-family: 'EB Garamond', serif;
font-size: 0.98rem;
line-height: 38px;
color: var(--ink);
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--rule-gold);
border-radius: 0;
outline: none;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
vertical-align: middle;
}
.modal .signup-form-fields input:focus,
.modal .signup-form-fields select:focus {
border-color: var(--gold);
background: rgba(255, 255, 255, 0.95);
}
.modal .signup-form-fields .su-date,
.modal .signup-form-fields .su-time {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.modal .signup-form-fields .su-date legend,
.modal .signup-form-fields .su-time legend {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.98rem;
letter-spacing: 0.14em;
color: var(--burgundy);
margin: 0 0 0.3rem;
padding: 0;
text-align: left;
float: none;
display: block;
width: auto;
}
.modal .signup-form-fields .su-date select,
.modal .signup-form-fields .su-time select {
display: inline-block;
width: auto;
margin: 0 0.3rem 0 0;
height: 38px;
padding: 0 0.45rem;
font-size: 0.95rem;
font-family: 'EB Garamond', serif;
line-height: 38px;
vertical-align: middle;
}
/* iter 36e: roomier select widths so the dropdown arrow doesn't crowd the value */
.modal .signup-form-fields .su-date select:nth-of-type(1) { width: 108px; }
.modal .signup-form-fields .su-date select:nth-of-type(2) { width: 82px; }
.modal .signup-form-fields .su-date select:nth-of-type(3) { width: 96px; }
.modal .signup-form-fields .su-time select[name="birth_hour"] { width: 84px; }
.modal .signup-form-fields .su-time select[name="birth_minute"] { width: 84px; }
.modal .signup-form-fields .su-time select[name="birth_ampm"] { width: 102px; }
/* iter 36c: birth-time fieldset positions the "I don't know my time"
checkbox in the LEGEND row (top-right of the fieldset), not below selects */
.modal .signup-form-fields .su-time {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
}
.modal .signup-form-fields .su-unknown {
position: absolute;
top: -22px;
left: 7rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0;
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 0.85rem;
color: var(--ink-2);
white-space: nowrap;
line-height: 1;
z-index: 2;
}
.modal .signup-form-fields .su-unknown input[type="checkbox"] {
margin: 0;
accent-color: var(--burgundy);
}
.modal .signup-form-fields .su-unknown input[type="checkbox"] {
width: auto;
height: auto;
margin: 0;
}
/* iter 35: section break is full-width, with fineprint floated to right */
.modal .signup-form-fields .su-section-break {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.4rem 0 -0.2rem;
padding-top: 0.6rem;
}
.modal .signup-form-fields .su-section-break .su-label {
font-size: 1.25rem;
letter-spacing: 0.12em;
margin: 0;
flex: 0 0 auto;
}
.modal .signup-form-fields .su-section-break .su-fineprint {
margin: 0;
text-align: left;
flex: 0 1 auto;
font-size: 0.95rem;
color: var(--ink);
font-style: italic;
}
.modal .signup-form-fields .su-suggest-wrap { position: relative; }
.modal .signup-form-fields .su-suggest-box {
position: absolute;
left: 0; right: 0;
top: calc(100% + 4px);
background: var(--vellum);
border: 1px solid var(--gold);
z-index: 999;
display: none;
max-height: 240px;
overflow-y: auto;
}
.modal .signup-form-fields .su-suggest-box.is-open { display: block; }
.modal .signup-form-fields .su-suggest-item {
padding: 0.6rem 0.85rem;
cursor: pointer;
font-family: 'EB Garamond', serif;
font-size: 1rem;
color: var(--ink);
border-bottom: 1px solid var(--rule);
}
.modal .signup-form-fields .su-suggest-item:last-child { border-bottom: 0; }
.modal .signup-form-fields .su-suggest-item:hover {
background: var(--paper-warm);
color: var(--burgundy);
}
/* iter 36c: stale overrides removed — see earlier .su-section-break / .su-fineprint rules */
.modal .signup-form-fields .su-section-break {
border-top: 1px solid var(--rule);
}
.modal .signup-form-fields .su-fineprint {
font-family: 'EB Garamond', serif;
font-size: 0.85rem;
color: var(--ink-mute);
margin: 0;
}
/* ── Reveal scene fade-in animation when state transitions to revealed ── */
.spread-frame.is-revealed .scene-reveal {
animation: revealFadeIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes revealFadeIn {
0% {
opacity: 0;
transform: translateY(12px);
filter: blur(6px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
.spread-frame.is-breath .scene-breath {
animation: breathFadeIn 0.4s ease;
}
@keyframes breathFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Chosen card pulse animation — card scales up + glows + fades before submit */
.fan-card.is-chosen {
animation: chosenCardPulse 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important;
z-index: 30;
}
@keyframes chosenCardPulse {
0% {
transform: translateY(0) scale(1);
filter: drop-shadow(0 0 0 rgba(212, 172, 104, 0));
}
60% {
transform: translateY(-50px) scale(1.4);
filter: drop-shadow(0 0 30px rgba(212, 172, 104, 0.95)) brightness(1.4);
}
100% {
transform: translateY(-100px) scale(1.7);
opacity: 0;
filter: drop-shadow(0 0 60px rgba(212, 172, 104, 0.6)) brightness(1.5) blur(2px);
}
}
@media (prefers-reduced-motion: reduce) {
.fan-card.is-chosen { animation: none !important; opacity: 0; }
}
/* ════════════════════════════════════════════════════════════
ITER 30: Explore More section (Option C — replaces 8-card grid)
════════════════════════════════════════════════════════════ */
.explore-more {
margin: 6rem auto 4rem;
max-width: 1100px;
padding: 0 2rem;
}
.explore-head {
text-align: center;
margin-bottom: 2.5rem;
}
.explore-eyebrow {
font-family: 'Italianno', cursive;
font-size: 1.9rem;
color: var(--gold-deep);
line-height: 1;
margin: 0 0 0.5rem;
-webkit-text-stroke: 0.4px var(--gold-deep);
}
.explore-title {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 0.75rem;
}
.explore-title em {
color: var(--burgundy);
font-weight: 700;
}
.explore-deck {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 1.1rem;
line-height: 1.55;
color: var(--ink-mute);
margin: 0 auto;
max-width: 540px;
}
.explore-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
@media (max-width: 980px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .explore-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.explore-card {
background: var(--vellum);
border: 1px solid var(--rule-gold);
padding: 1.75rem 1.4rem 1.5rem;
text-decoration: none;
color: var(--ink);
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, background 0.3s;
text-align: center;
align-items: center;
}
.explore-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(58, 31, 56, 0.18);
background: var(--paper-warm);
}
.explore-card .ec-tl, .explore-card .ec-tr,
.explore-card .ec-bl, .explore-card .ec-br {
position: absolute;
width: 16px; height: 16px;
pointer-events: none;
}
.explore-card .ec-tl { top: 5px; left: 5px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.explore-card .ec-tr { top: 5px; right: 5px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.explore-card .ec-bl { bottom: 5px; left: 5px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.explore-card .ec-br { bottom: 5px; right: 5px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.explore-icon {
width: 64px;
height: 64px;
margin-bottom: 1rem;
}
.explore-icon svg { width: 100%; height: 100%; display: block; }
.explore-cls {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.22em;
color: var(--gold-deep);
margin-bottom: 0.4rem;
}
.explore-name {
font-family: 'EB Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 1.4rem;
line-height: 1.05;
letter-spacing: -0.012em;
color: var(--ink);
margin: 0 0 0.5rem;
}
.explore-desc {
font-family: 'EB Garamond', serif;
font-weight: 500;
font-size: 1rem;
line-height: 1.5;
color: var(--ink-2);
margin: 0 0 1rem;
flex: 1;
}
.explore-cta {
font-family: 'EB Garamond', serif;
font-variant: small-caps;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.2em;
color: var(--burgundy);
position: relative;
padding-bottom: 3px;
border-bottom: 1px solid var(--burgundy);
margin-top: auto;
}
.explore-cta::after { content: " →"; font-style: italic; }
.explore-card:hover .explore-cta { color: var(--rose-deep); border-bottom-color: var(--rose); }
/* ════════════════════════════════════════════════════════════
ITER 31: hero compact, smaller cards, chips on one row,
caption inside U, frame height stable, chosen card stays during breath
════════════════════════════════════════════════════════════ */
/* ── Hero bottom band: 2-col paragraph + medallion (compacts hero) ── */
.page-hero-band {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 2.5rem;
margin: 1.25rem auto 0;
max-width: 800px;
text-align: left;
}
.page-hero-band .page-hero-subtitle {
text-align: left;
margin: 0;
max-width: 540px;
}
.page-hero-band .page-hero-medallion {
width: 110px;
height: 110px;
margin: 0;
flex-shrink: 0;
}
.page-hero-band .page-hero-medallion svg { width: 80px; height: 80px; }
@media (max-width: 640px) {
.page-hero-band {
grid-template-columns: 1fr;
text-align: center;
gap: 1.5rem;
}
.page-hero-band .page-hero-subtitle {
text-align: center;
margin: 0 auto;
}
.page-hero-band .page-hero-medallion { margin: 0 auto; }
}
/* ── Smaller fan cards (~10% reduction from prev clamp(64px, 7.2vw, 92px)) ── */
.fan-slot {
width: clamp(56px, 6.4vw, 80px);
margin: 0 -1.5rem;
}
/* ── Chips on ONE row (was wrapping to 2 unnecessarily) ── */
.spread-chips {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
justify-content: center;
}
.spread-chip {
flex: 0 0 auto;
padding: 0.55rem 0.95rem;
font-size: 0.95rem;
letter-spacing: 0.14em;
}
.spread-chip.is-active {
font-size: 1rem;
letter-spacing: 0.16em;
}
.spread-form { max-width: 720px; }
@media (max-width: 720px) {
.spread-chips { flex-wrap: wrap; }
}
/* ── Caption sits INSIDE the U (negative margin pulls it up into the dome interior) ── */
.fan-caption {
margin-top: -1.5rem;
margin-bottom: 1rem;
position: relative;
z-index: 2;
font-size: clamp(1.5rem, 3vw, 2rem);
max-width: 480px;
}
/* ── Spread frame: stable min-height so it doesn't shrink between states ── */
.spread-frame {
min-height: 720px;
}
/* ── Chosen card stays VISIBLE & glowing during breath state, no fade-out ── */
@keyframes chosenCardPulse {
0% {
transform: translateY(0) scale(1);
filter: drop-shadow(0 0 0 rgba(212, 172, 104, 0));
}
100% {
transform: translateY(-90px) scale(1.55);
filter: drop-shadow(0 0 40px rgba(212, 172, 104, 0.95)) brightness(1.35);
}
}
.fan-card.is-chosen {
animation: chosenCardPulse 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important;
z-index: 30;
}
/* Continuous breathing glow while loading */
@keyframes chosenCardBreathe {
0%, 100% { filter: drop-shadow(0 0 30px rgba(212, 172, 104, 0.85)) brightness(1.3); }
50% { filter: drop-shadow(0 0 55px rgba(212, 172, 104, 1)) brightness(1.5); }
}
.spread-frame.is-breath .fan-card.is-chosen {
animation: chosenCardBreathe 1.6s ease-in-out infinite !important;
transform: translateY(-90px) scale(1.55);
}
/* During breath state, keep the fan visible (just dim non-chosen cards) — chosen is the focal element */
.spread-frame.is-breath .scene-input { display: block; }
.spread-frame.is-breath .scene-input .spread-form,
.spread-frame.is-breath .fan-caption { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.spread-frame.is-breath .fan-slot:not(:has(.is-chosen)) .fan-card {
opacity: 0.15;
filter: blur(2px);
transition: opacity 0.5s, filter 0.5s;
}
/* Breath dots positioned BELOW the chosen card */
.spread-frame.is-breath .scene-breath {
position: relative;
margin-top: -2rem;
z-index: 1;
}
/* ════════════════════════════════════════════════════════════
ITER 32: 3-col hero (moon left + paragraph center + tarot right)
+ rotating fan during breath state
════════════════════════════════════════════════════════════ */
/* ── Hero band: now 3-col symmetric (medallion · paragraph · medallion) ── */
.page-hero-band {
display: grid;
grid-template-columns: auto 1fr auto; /* moon | paragraph | tarot */
gap: 1.75rem;
align-items: center;
margin: 1.25rem auto 0;
max-width: 880px;
text-align: center;
}
.page-hero-band .page-hero-subtitle {
text-align: center;
margin: 0 auto;
max-width: 460px;
}
.page-hero-band .page-hero-medallion {
width: 100px;
height: 100px;
margin: 0;
flex-shrink: 0;
}
.page-hero-band .page-hero-medallion svg { width: 78px; height: 78px; }
@media (max-width: 720px) {
/* On small screens: stack vertically with both medallions visible */
.page-hero-band {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.page-hero-band .page-hero-medallion-left { display: none; } /* keep just the right one to save space */
}
/* ── Rotating fan during breath state ──
The whole fan slowly orbits while the chosen card sits at center.
Each card individually counter-rotates so they don't appear to flip upside-down. */
.spread-frame.is-breath .spread-fan {
animation: fanOrbit 9s linear infinite;
transform-origin: center 60%;
}
@keyframes fanOrbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spread-frame.is-breath .fan-card:not(.is-chosen) {
animation: cardCounter 9s linear infinite;
}
@keyframes cardCounter {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/* The chosen card needs to be POSITIONED ABSOLUTELY at frame center
so it doesn't rotate with the fan. */
.spread-frame { position: relative; }
.spread-frame.is-breath .fan-card.is-chosen {
position: absolute;
top: 50%;
left: 50%;
z-index: 50;
/* Override the chosenCardPulse end transform with absolute centering */
transform: translate(-50%, -50%) scale(1.55) !important;
width: clamp(70px, 8vw, 100px);
aspect-ratio: 1024 / 1834;
}
.spread-frame.is-breath .fan-card.is-chosen .card-back {
width: 100%;
height: 100%;
}
/* Reduced motion: disable fan rotation */
@media (prefers-reduced-motion: reduce) {
.spread-frame.is-breath .spread-fan,
.spread-frame.is-breath .fan-card:not(.is-chosen) {
animation: none !important;
}
}
/* ── Iter 33: tighter colophon spacing + dropped vertical rule ── */
.yn-colophon {
margin: 2rem auto 1.5rem; /* was 5rem auto 3rem */
padding-top: 2rem;
border-top: 1px solid var(--rule-gold);
}
.yn-colophon-rule { display: none; }