/* =============================================================================
EZ HOROSCOPE - TAROT 3-CARD SPREAD BLOCK
MYSTICAL THEME - Inspired by ImmortalEmbrace.com
=============================================================================
A dreamy, spiritual color scheme featuring dusty blue-purples, soft lavenders,
deep navy tones, and warm gold accents. Perfect for tarot, astrology, and
spiritual wellness websites.
TABLE OF CONTENTS:
------------------
1. CSS Custom Properties (Variables)
2. Block Container
3. Loading State
4. Header Area
5. Deck & Cards
6. Selected Card Slots
7. Reading Container
8. Reading Content (API Output)
9. Animations (Themed)
10. RTL (Right-to-Left) Support
11. Responsive Design
12. Print Styles
============================================================================= */
/* =============================================================================
1. CSS CUSTOM PROPERTIES (VARIABLES)
============================================================================= */
.ez-tarot-spread {
/* -------------------------------------------------------------------------
COLORS - MYSTICAL PALETTE
------------------------------------------------------------------------- */
/* Primary - Deep mystical purple-blue */
--ezhp-color-primary: #5D6B8A;
/* Secondary - Warm gold accent */
--ezhp-color-secondary: #C9A962;
/* Tertiary - Soft lavender */
--ezhp-color-tertiary: #9BA4C4;
/* Quaternary - Deep navy */
--ezhp-color-quaternary: #2D3142;
/* Background colors */
--ezhp-bg-primary: transparent;
--ezhp-bg-secondary: rgba(93, 107, 138, 0.04);
--ezhp-bg-accent: rgba(201, 169, 98, 0.06);
--ezhp-bg-mystical: linear-gradient(135deg, rgba(93, 107, 138, 0.03) 0%, rgba(155, 164, 196, 0.05) 100%);
--ezhp-bg-section: rgba(255, 255, 255, 0.4);
--ezhp-bg-slot: rgba(255, 255, 255, 0.6);
/* Text colors */
--ezhp-text-primary: #2D3142;
--ezhp-text-secondary: #4F5D75;
--ezhp-text-muted: rgba(45, 49, 66, 0.6);
--ezhp-text-accent: #5D6B8A;
--ezhp-text-light: #FFFFFF;
/* Button colors */
--ezhp-button-text: var(--ezhp-color-primary);
--ezhp-button-border: var(--ezhp-color-primary);
--ezhp-button-hover-bg: var(--ezhp-color-primary);
--ezhp-button-hover-text: var(--ezhp-text-light);
/* Glow colors (for animations) */
--ezhp-glow-gold: rgba(201, 169, 98, 0.8);
--ezhp-glow-gold-intense: rgba(201, 169, 98, 1);
--ezhp-glow-lavender: rgba(155, 164, 196, 0.6);
/* -------------------------------------------------------------------------
TYPOGRAPHY
------------------------------------------------------------------------- */
--ezhp-font-family-base: inherit;
--ezhp-font-family-accent: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--ezhp-font-size-xs: 0.75rem;
--ezhp-font-size-sm: 0.875rem;
--ezhp-font-size-base: 1rem;
--ezhp-font-size-lg: 1.125rem;
--ezhp-font-size-xl: 1.25rem;
--ezhp-font-size-2xl: 1.5rem;
--ezhp-font-size-3xl: 1.75rem;
--ezhp-font-size-4xl: 2rem;
--ezhp-font-weight-light: 300;
--ezhp-font-weight-normal: 400;
--ezhp-font-weight-medium: 500;
--ezhp-font-weight-semibold: 600;
--ezhp-font-weight-bold: 700;
--ezhp-line-height-tight: 1.2;
--ezhp-line-height-normal: 1.5;
--ezhp-line-height-relaxed: 1.65;
--ezhp-line-height-loose: 1.85;
--ezhp-letter-spacing-wide: 0.025em;
--ezhp-letter-spacing-wider: 0.05em;
--ezhp-letter-spacing-widest: 0.1em;
/* -------------------------------------------------------------------------
SPACING
------------------------------------------------------------------------- */
--ezhp-spacing-xs: 0.25rem;
--ezhp-spacing-sm: 0.5rem;
--ezhp-spacing-md: 1rem;
--ezhp-spacing-lg: 1.5rem;
--ezhp-spacing-xl: 2rem;
--ezhp-spacing-2xl: 3rem;
/* -------------------------------------------------------------------------
BORDERS & SHADOWS
------------------------------------------------------------------------- */
--ezhp-radius-sm: 4px;
--ezhp-radius-md: 8px;
--ezhp-radius-lg: 12px;
--ezhp-radius-xl: 16px;
--ezhp-border-width-thin: 1px;
--ezhp-border-width-medium: 2px;
--ezhp-border-width-thick: 3px;
--ezhp-shadow-sm: 0 1px 3px rgba(93, 107, 138, 0.06);
--ezhp-shadow-md: 0 4px 12px rgba(93, 107, 138, 0.08);
--ezhp-shadow-lg: 0 8px 24px rgba(93, 107, 138, 0.12);
--ezhp-shadow-glow: 0 0 20px rgba(201, 169, 98, 0.3);
--ezhp-shadow-card: 0 4px 15px rgba(45, 49, 66, 0.15);
/* -------------------------------------------------------------------------
TRANSITIONS
------------------------------------------------------------------------- */
--ezhp-transition-fast: 150ms ease;
--ezhp-transition-normal: 250ms ease;
--ezhp-transition-slow: 400ms ease;
}
/* =============================================================================
2. BLOCK CONTAINER
============================================================================= */
.ez-tarot-spread {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-base);
line-height: var(--ezhp-line-height-relaxed);
color: var(--ezhp-text-primary);
background: var(--ezhp-bg-primary);
}
.ez-tarot-spread .container {
max-width: 1200px;
margin: 0 auto;
padding: var(--ezhp-spacing-lg);
}
/* =============================================================================
3. LOADING STATE
============================================================================= */
.ez-tarot-spread .tarot-loader {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
background: var(--ezhp-bg-mystical);
border-radius: var(--ezhp-radius-lg);
}
/* Mystical gold spinner */
.ez-tarot-spread .tarot-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(201, 169, 98, 0.2) !important;
border-top-color: var(--ezhp-color-secondary) !important;
border-radius: 50%;
animation: ezhp-tarot-spin 1s linear infinite;
box-shadow: 0 0 20px rgba(201, 169, 98, 0.3);
}
@keyframes ezhp-tarot-spin {
to { transform: rotate(360deg); }
}
/* =============================================================================
4. HEADER AREA
============================================================================= */
.ez-tarot-spread .header-area {
text-align: center;
margin-bottom: var(--ezhp-spacing-xl);
padding: var(--ezhp-spacing-lg);
background: var(--ezhp-bg-mystical) !important;
border-radius: var(--ezhp-radius-lg);
border: 1px solid rgba(155, 164, 196, 0.2);
}
/* Main title */
.ez-tarot-spread .header-area h1,
.ez-tarot-spread #selectHeader {
font-family: var(--ezhp-font-family-accent) !important;
font-size: var(--ezhp-font-size-3xl) !important;
font-weight: var(--ezhp-font-weight-light) !important;
font-style: italic !important;
color: var(--ezhp-color-primary) !important;
margin: 0 0 var(--ezhp-spacing-md) 0 !important;
letter-spacing: var(--ezhp-letter-spacing-wide);
}
/* Decorative stars around title */
.ez-tarot-spread #selectHeader::before {
content: "✦ ";
color: var(--ezhp-color-secondary);
font-style: normal;
}
.ez-tarot-spread #selectHeader::after {
content: " ✦";
color: var(--ezhp-color-secondary);
font-style: normal;
}
/* Instructions text */
.ez-tarot-spread #selectInstructions {
font-family: var(--ezhp-font-family-base) !important;
font-size: var(--ezhp-font-size-base) !important;
color: var(--ezhp-text-muted) !important;
margin: var(--ezhp-spacing-md) 0 0 0 !important;
font-style: italic;
}
/* Shuffle button - inherits theme styling */
/* =============================================================================
5. DECK & CARDS
============================================================================= */
.ez-tarot-spread #deckArea {
position: relative;
margin: var(--ezhp-spacing-xl) 0;
padding: var(--ezhp-spacing-xl) var(--ezhp-spacing-lg);
background: linear-gradient(180deg,
rgba(103, 80, 150, 0.25) 0%,
rgba(103, 80, 150, 0.40) 30%,
rgba(103, 80, 150, 0.45) 70%,
rgba(103, 80, 150, 0.30) 100%);
border-radius: var(--ezhp-radius-xl);
border: 1px solid rgba(103, 80, 150, 0.35);
box-shadow: inset 0 2px 20px rgba(103, 80, 150, 0.25);
}
.ez-tarot-spread .deck-container {
position: relative;
width: 100%;
height: 320px;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: visible;
pointer-events: none;
}
/* Individual card styling */
.ez-tarot-spread .card {
width: 130px;
height: 230px;
position: absolute;
pointer-events: auto;
transform-origin: center bottom;
transition: transform 0.6s ease;
border-radius: var(--ezhp-radius-md);
box-shadow: var(--ezhp-shadow-card);
}
.ez-tarot-spread .card:hover {
box-shadow: 0 0 20px var(--ezhp-glow-gold);
}
.ez-tarot-spread .card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: var(--ezhp-radius-md);
overflow: hidden;
}
.ez-tarot-spread .card-back {
transform: rotateY(0deg);
}
.ez-tarot-spread .card-front {
transform: rotateY(180deg);
}
.ez-tarot-spread .card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--ezhp-radius-md);
}
/* =============================================================================
6. SELECTED CARD SLOTS
============================================================================= */
.ez-tarot-spread .selected-cards {
display: flex;
gap: var(--ezhp-spacing-lg);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--ezhp-spacing-xl);
}
.ez-tarot-spread .selected-slot {
background: var(--ezhp-bg-slot) !important;
border: var(--ezhp-border-width-medium) solid var(--ezhp-color-tertiary) !important;
border-radius: var(--ezhp-radius-lg) !important;
padding: var(--ezhp-spacing-md) !important;
width: 265px !important;
min-width: 265px !important;
max-width: 265px !important;
text-align: center;
box-shadow: var(--ezhp-shadow-sm);
transition: all var(--ezhp-transition-normal);
}
.ez-tarot-spread .selected-slot:hover {
border-color: var(--ezhp-color-secondary) !important;
box-shadow: var(--ezhp-shadow-glow);
}
/* Position labels (Past / Present / Future) */
.ez-tarot-spread .position-label {
font-family: var(--ezhp-font-family-accent) !important;
font-size: var(--ezhp-font-size-lg) !important;
font-weight: var(--ezhp-font-weight-semibold) !important;
font-style: italic !important;
color: var(--ezhp-color-primary) !important;
margin-bottom: var(--ezhp-spacing-sm) !important;
text-transform: uppercase;
letter-spacing: var(--ezhp-letter-spacing-wider);
}
/* Placeholder text */
.ez-tarot-spread .selected-slot > div:not(.position-label) {
color: var(--ezhp-text-muted);
font-style: italic;
}
/* Card name in slot */
.ez-tarot-spread .selected-slot h3 {
font-family: var(--ezhp-font-family-accent) !important;
font-size: var(--ezhp-font-size-xl) !important;
font-weight: var(--ezhp-font-weight-normal) !important;
font-style: italic !important;
color: var(--ezhp-color-secondary) !important;
margin: var(--ezhp-spacing-sm) 0 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
}
/* Card image in slot */
.ez-tarot-spread .selected-slot img {
width: 100%;
max-width: 200px;
height: auto;
margin: 0 auto;
border-radius: var(--ezhp-radius-md);
box-shadow: var(--ezhp-shadow-md);
}
/* =============================================================================
7. READING CONTAINER
============================================================================= */
.ez-tarot-spread .reading-container,
.ez-tarot-spread #tarotReading {
margin-top: var(--ezhp-spacing-2xl);
padding: var(--ezhp-spacing-xl);
background: var(--ezhp-bg-mystical);
border-radius: var(--ezhp-radius-xl);
border: 1px solid rgba(155, 164, 196, 0.2);
}
.ez-tarot-spread .reading-container.hidden,
.ez-tarot-spread #tarotReading.hidden {
display: none;
}
/* =============================================================================
8. READING CONTENT (API OUTPUT)
============================================================================= */
/* Card section headings (h2) */
.ez-tarot-spread .reading-container h2,
.ez-tarot-spread #tarotReading h2 {
font-family: var(--ezhp-font-family-accent) !important;
font-size: var(--ezhp-font-size-2xl) !important;
font-weight: var(--ezhp-font-weight-light) !important;
font-style: italic !important;
line-height: var(--ezhp-line-height-tight) !important;
color: var(--ezhp-color-primary) !important;
background: transparent !important;
margin: var(--ezhp-spacing-xl) 0 var(--ezhp-spacing-md) 0 !important;
padding-bottom: var(--ezhp-spacing-sm) !important;
border-bottom: 1px solid rgba(155, 164, 196, 0.3) !important;
}
/* First h2 no top margin */
.ez-tarot-spread .reading-container h2:first-child,
.ez-tarot-spread #tarotReading h2:first-child {
margin-top: 0 !important;
}
/* Decorative element before card headings */
.ez-tarot-spread .reading-container h2::before,
.ez-tarot-spread #tarotReading h2::before {
content: "✧ ";
color: var(--ezhp-color-secondary);
font-style: normal;
}
/* Colored spans in headings (from API) */
.ez-tarot-spread .reading-container h2 span[style*="color"],
.ez-tarot-spread #tarotReading h2 span[style*="color"] {
color: var(--ezhp-color-secondary) !important;
}
/* Paragraphs */
.ez-tarot-spread .reading-container p,
.ez-tarot-spread #tarotReading p {
font-family: var(--ezhp-font-family-base) !important;
font-size: var(--ezhp-font-size-base) !important;
line-height: var(--ezhp-line-height-loose) !important;
color: var(--ezhp-text-secondary) !important;
background: transparent !important;
margin: 0 0 var(--ezhp-spacing-md) 0 !important;
}
/* Strong/bold text */
.ez-tarot-spread .reading-container strong,
.ez-tarot-spread .reading-container b,
.ez-tarot-spread #tarotReading strong,
.ez-tarot-spread #tarotReading b {
font-weight: var(--ezhp-font-weight-semibold) !important;
color: var(--ezhp-text-primary) !important;
}
/* Practical Step / Action Step labels */
.ez-tarot-spread .reading-container b:first-child,
.ez-tarot-spread #tarotReading b:first-child {
color: var(--ezhp-color-secondary) !important;
}
/* Emphasis/italic text */
.ez-tarot-spread .reading-container em,
.ez-tarot-spread .reading-container i,
.ez-tarot-spread #tarotReading em,
.ez-tarot-spread #tarotReading i {
font-style: italic !important;
color: var(--ezhp-color-primary) !important;
}
/* Affirmation styling */
.ez-tarot-spread .reading-container span[style*="color:#845EC2"],
.ez-tarot-spread #tarotReading span[style*="color:#845EC2"] {
color: var(--ezhp-color-primary) !important;
font-style: italic;
}
/* Lists */
.ez-tarot-spread .reading-container ul,
.ez-tarot-spread #tarotReading ul {
margin: var(--ezhp-spacing-md) 0 var(--ezhp-spacing-lg) 0 !important;
padding-left: var(--ezhp-spacing-lg) !important;
list-style: none !important;
}
.ez-tarot-spread .reading-container li,
.ez-tarot-spread #tarotReading li {
font-family: var(--ezhp-font-family-base) !important;
font-size: var(--ezhp-font-size-base) !important;
line-height: var(--ezhp-line-height-relaxed) !important;
color: var(--ezhp-text-secondary) !important;
margin-bottom: var(--ezhp-spacing-sm) !important;
padding-left: var(--ezhp-spacing-sm) !important;
position: relative;
}
/* Custom list bullet using star */
.ez-tarot-spread .reading-container li::before,
.ez-tarot-spread #tarotReading li::before {
content: "✧";
position: absolute;
left: calc(-1 * var(--ezhp-spacing-md));
color: var(--ezhp-color-tertiary);
font-size: var(--ezhp-font-size-sm);
}
/* Connecting Journey section (special styling) */
.ez-tarot-spread .reading-container h2:contains("Connecting"),
.ez-tarot-spread .reading-container h2:contains("Weaving"),
.ez-tarot-spread #tarotReading h2:contains("Connecting"),
.ez-tarot-spread #tarotReading h2:contains("Weaving") {
margin-top: var(--ezhp-spacing-2xl) !important;
padding-top: var(--ezhp-spacing-lg) !important;
border-top: 1px solid rgba(155, 164, 196, 0.3) !important;
}
/* =============================================================================
9. ANIMATIONS (THEMED)
============================================================================= */
/* Card click feedback - gold glow */
.ez-tarot-spread .ez-card-click-feedback {
animation: ezhp-tarot-click 0.42s ease-out forwards;
}
@keyframes ezhp-tarot-click {
0% {
transform: translate3d(0, 0, 0) var(--tarot-base-transform) scale(1);
box-shadow: 0 0 0 rgba(201, 169, 98, 0);
filter: brightness(1);
}
30% {
transform: translate3d(0, -30px, 0) var(--tarot-base-transform) scale(1.22);
box-shadow: 0 0 45px 18px var(--ezhp-glow-gold);
filter: brightness(1.4);
}
55% {
transform: translate3d(0, -48px, 0) var(--tarot-base-transform) scale(1.28);
box-shadow: 0 0 60px 24px var(--ezhp-glow-gold-intense);
filter: brightness(1.7);
}
100% {
transform: translate3d(0, -22px, 0) var(--tarot-base-transform) scale(1.12);
box-shadow: 0 0 18px 6px rgba(201, 169, 98, 0.5);
filter: brightness(1.2);
}
}
/* Slot glow when card lands */
.ez-tarot-spread .selected-slot.slot-glow {
animation: ezhp-slot-glow 0.8s ease-out forwards;
}
@keyframes ezhp-slot-glow {
0% {
box-shadow: 0 0 0 rgba(201, 169, 98, 0);
filter: brightness(1);
}
30% {
box-shadow: 0 0 40px 15px var(--ezhp-glow-gold);
filter: brightness(1.3);
}
100% {
box-shadow: var(--ezhp-shadow-sm);
filter: brightness(1);
}
}
/* Vortex shuffle animation - gold themed */
.ez-tarot-spread .deck-container.shuffling {
perspective: 1000px;
}
.ez-tarot-spread .card.vortex-shuffle {
animation: ezhp-vortex-shuffle 2.5s ease-in-out forwards;
animation-delay: var(--card-delay, 0ms);
}
@keyframes ezhp-vortex-shuffle {
0% {
transform: translate(0, 0) rotate(0deg) scale(0.8);
opacity: 0;
filter: brightness(1);
box-shadow: 0 0 0 rgba(201, 169, 98, 0);
}
8% {
transform: translate(0, 0) rotate(0deg) scale(0.9);
opacity: 1;
filter: brightness(1);
box-shadow: 0 0 5px rgba(201, 169, 98, 0.3);
}
20% {
transform:
rotate(var(--card-angle))
translateX(var(--orbit-radius))
rotate(calc(-1 * var(--card-angle)))
scale(0.85);
opacity: 1;
filter: brightness(1.3);
box-shadow: 0 0 25px 8px var(--ezhp-glow-gold);
}
40% {
transform:
rotate(calc(var(--card-angle) + 120deg))
translateX(var(--orbit-radius))
rotate(calc(-1 * (var(--card-angle) + 120deg)))
scale(0.85);
opacity: 1;
filter: brightness(1.5);
box-shadow: 0 0 35px 12px var(--ezhp-glow-gold);
}
60% {
transform:
rotate(calc(var(--card-angle) + 280deg))
translateX(calc(var(--orbit-radius) * 1.1))
rotate(calc(-1 * (var(--card-angle) + 280deg)))
scale(0.9);
opacity: 1;
filter: brightness(1.6);
box-shadow: 0 0 45px 15px var(--ezhp-glow-gold-intense);
}
80% {
transform:
translate(calc(var(--final-x) * 0.7), calc(var(--final-y) * 0.7))
rotate(calc(var(--final-rotation) * 0.8))
scale(0.95);
opacity: 1;
filter: brightness(1.2);
box-shadow: 0 0 20px 6px rgba(201, 169, 98, 0.5);
}
100% {
transform:
translate(var(--final-x), var(--final-y))
rotate(var(--final-rotation))
scale(1);
opacity: 1;
filter: brightness(1);
box-shadow: 0 0 0 rgba(201, 169, 98, 0);
}
}
/* Vortex glow trail */
.ez-tarot-spread .deck-container.shuffling::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(201, 169, 98, 0.15) 0%, transparent 70%);
animation: ezhp-vortex-glow 2.5s ease-in-out forwards;
pointer-events: none;
}
@keyframes ezhp-vortex-glow {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.5);
}
20% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
60% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.2);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.5);
}
}
/* =============================================================================
10. RTL (RIGHT-TO-LEFT) SUPPORT
============================================================================= */
.ez-tarot-spread[dir="rtl"] {
direction: rtl;
text-align: right;
}
/* Header decorations flip */
.ez-tarot-spread[dir="rtl"] #selectHeader::before {
content: " ✦";
}
.ez-tarot-spread[dir="rtl"] #selectHeader::after {
content: "✦ ";
}
/* Reading headings decoration flip */
.ez-tarot-spread[dir="rtl"] .reading-container h2::before,
.ez-tarot-spread[dir="rtl"] #tarotReading h2::before {
content: " ✧";
}
/* Lists RTL */
.ez-tarot-spread[dir="rtl"] .reading-container ul,
.ez-tarot-spread[dir="rtl"] #tarotReading ul {
padding-left: 0 !important;
padding-right: var(--ezhp-spacing-lg) !important;
}
.ez-tarot-spread[dir="rtl"] .reading-container li,
.ez-tarot-spread[dir="rtl"] #tarotReading li {
padding-left: 0 !important;
padding-right: var(--ezhp-spacing-sm) !important;
}
.ez-tarot-spread[dir="rtl"] .reading-container li::before,
.ez-tarot-spread[dir="rtl"] #tarotReading li::before {
left: auto;
right: calc(-1 * var(--ezhp-spacing-md));
}
/* Selected cards remain centered */
.ez-tarot-spread[dir="rtl"] .selected-cards {
justify-content: center;
}
/* =============================================================================
11. RESPONSIVE DESIGN
============================================================================= */
@media (max-width: 768px) {
.ez-tarot-spread {
--ezhp-font-size-2xl: 1.375rem;
--ezhp-font-size-3xl: 1.5rem;
--ezhp-spacing-lg: 1.25rem;
--ezhp-spacing-xl: 1.5rem;
}
.ez-tarot-spread .header-area {
padding: var(--ezhp-spacing-md);
}
.ez-tarot-spread .reading-container,
.ez-tarot-spread #tarotReading {
padding: var(--ezhp-spacing-lg);
}
}
@media (max-width: 600px) {
.ez-tarot-spread {
--ezhp-font-size-lg: 1rem;
--ezhp-font-size-xl: 1.125rem;
--ezhp-font-size-2xl: 1.25rem;
--ezhp-font-size-3xl: 1.375rem;
--ezhp-spacing-md: 0.75rem;
--ezhp-spacing-lg: 1rem;
}
.ez-tarot-spread .card {
width: 85px;
height: 150px;
}
.ez-tarot-spread .deck-container {
height: 240px;
}
.ez-tarot-spread .selected-cards {
flex-direction: column !important;
align-items: center !important;
gap: var(--ezhp-spacing-sm) !important;
}
.ez-tarot-spread .selected-slot {
width: 95% !important;
max-width: 360px !important;
min-width: unset !important;
}
/* Smaller vortex on mobile */
.ez-tarot-spread .card.vortex-shuffle {
--orbit-radius: 100px;
}
.ez-tarot-spread .deck-container.shuffling::after {
width: 200px;
height: 200px;
}
/* Title decorations hidden on mobile */
.ez-tarot-spread #selectHeader::before,
.ez-tarot-spread #selectHeader::after {
display: none;
}
}
/* =============================================================================
12. PRINT STYLES
============================================================================= */
@media print {
.ez-tarot-spread {
font-size: 10pt;
color: #000 !important;
background: #fff !important;
}
.ez-tarot-spread .tarot-loader,
.ez-tarot-spread .header-area,
.ez-tarot-spread #deckArea,
.ez-tarot-spread .deck-container {
display: none !important;
}
.ez-tarot-spread .selected-cards {
margin-top: 0 !important;
transform: none !important;
}
.ez-tarot-spread .selected-slot {
background: none !important;
border: 1px solid #000 !important;
box-shadow: none !important;
page-break-inside: avoid;
}
.ez-tarot-spread .position-label {
color: #000 !important;
}
.ez-tarot-spread .reading-container,
.ez-tarot-spread #tarotReading {
background: none !important;
border: none !important;
padding: 1rem !important;
}
.ez-tarot-spread .reading-container h2,
.ez-tarot-spread #tarotReading h2 {
font-size: 14pt !important;
color: #000 !important;
font-style: normal !important;
border-bottom-color: #000 !important;
}
.ez-tarot-spread .reading-container h2::before,
.ez-tarot-spread #tarotReading h2::before {
content: none;
}
.ez-tarot-spread .reading-container p,
.ez-tarot-spread .reading-container li,
.ez-tarot-spread #tarotReading p,
.ez-tarot-spread #tarotReading li {
color: #000 !important;
}
.ez-tarot-spread .reading-container strong,
.ez-tarot-spread .reading-container b,
.ez-tarot-spread #tarotReading strong,
.ez-tarot-spread #tarotReading b {
color: #000 !important;
}
.ez-tarot-spread .reading-container em,
.ez-tarot-spread .reading-container i,
.ez-tarot-spread #tarotReading em,
.ez-tarot-spread #tarotReading i {
color: #333 !important;
}
.ez-tarot-spread .reading-container li::before,
.ez-tarot-spread #tarotReading li::before {
color: #666;
}
}
/* =============================================================================
13. EDITOR STYLES
============================================================================= */
.ez-tarot-block-editor {
border: 2px solid var(--ezhp-color-tertiary, #9BA4C4) !important;
padding: var(--ezhp-spacing-lg, 1.5rem);
border-radius: var(--ezhp-radius-lg, 12px);
background: linear-gradient(135deg, rgba(93, 107, 138, 0.03) 0%, rgba(155, 164, 196, 0.05) 100%) !important;
}
.ez-tarot-block-editor .tarot-editor-placeholder {
text-align: center;
padding: var(--ezhp-spacing-xl, 2rem);
}
.ez-tarot-block-editor .tarot-editor-placeholder h2 {
font-family: var(--ezhp-font-family-accent, Georgia, serif);
font-style: italic;
color: var(--ezhp-color-primary, #5D6B8A);
margin-bottom: var(--ezhp-spacing-md, 1rem);
}
.ez-tarot-block-editor .tarot-editor-placeholder p {
color: var(--ezhp-text-muted, rgba(45, 49, 66, 0.6));
}
/* =============================================================================
END OF TAROT 3-CARD SPREAD MYSTICAL THEME STYLESHEET
COLOR REFERENCE:
----------------
Primary (dusty blue-purple): #5D6B8A
Secondary (warm gold): #C9A962
Tertiary (soft lavender): #9BA4C4
Quaternary (deep navy): #2D3142
GOOGLE FONT SUGGESTION:
-----------------------
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet">
============================================================================= */
