/* =============================================================================
EZ HOROSCOPE - MONTHLY HOROSCOPE BLOCK
MYSTICAL THEME - Inspired by Soul Spot aesthetic
=============================================================================
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.
ENHANCED: Includes contrast fixes for light/cream website backgrounds
and improved mobile responsiveness
TABLE OF CONTENTS:
------------------
1. CSS Custom Properties (Variables)
1.1 Colors (enhanced contrast)
1.2 Typography
1.3 Spacing
1.4 Borders & Shadows
1.5 Transitions
2. Main Container
2.1 Article Wrapper
2.2 Header Section
2.3 Title & Subtitle
3. Theme Section
3.1 Theme Wrapper
3.2 Theme Content
4. Key Dates Section
4.1 Section Wrapper
4.2 Section Title
4.3 Dates List
4.4 Date Items
5. Focus Areas Section
5.1 Section Wrapper
5.2 Focus Cards
5.3 Focus Titles
5.4 Focus Content
5.5 Focus Area Variants (Love, Career, Health, Spiritual)
6. Sacred Practices Section
6.1 Section Wrapper
6.2 Subsections (Rituals, Journaling, Intentions)
6.3 Practice Lists
7. Mantra Section
7.1 Section Wrapper
7.2 Mantra Blockquote
7.3 Closing Message
8. RTL (Right-to-Left) Support
9. Responsive Design
10. Print Styles
11. Dark Mode Support (opt-in only via .dark-mode class)
============================================================================= */
/* =============================================================================
1. CSS CUSTOM PROPERTIES (VARIABLES)
=============================================================================
MYSTICAL THEME: Dusty blue-purples, lavenders, deep navy, gold accents
============================================================================= */
.ez-monthly-horoscope {
/* -------------------------------------------------------------------------
1.1 COLORS - MYSTICAL PALETTE
------------------------------------------------------------------------- */
/* Primary - Deep mystical purple-blue */
--ezmh-color-primary: #5D6B8A;
/* Secondary - Warm gold accent (candle/crystal warmth) */
--ezmh-color-secondary: #C9A962;
/* Tertiary - Soft lavender */
--ezmh-color-tertiary: #9BA4C4;
/* Quaternary - Deep cosmic purple */
--ezmh-color-quaternary: #7B6B8A;
/* Background colors - Enhanced opacity for light/cream backgrounds */
--ezmh-bg-primary: transparent;
--ezmh-bg-secondary: rgba(255, 255, 255, 0.85);
--ezmh-bg-accent: rgba(255, 255, 255, 0.9);
--ezmh-bg-mystical: rgba(255, 255, 255, 0.9);
--ezmh-bg-card: rgba(255, 255, 255, 0.95);
/* Text colors - Enhanced contrast for light/cream backgrounds */
--ezmh-text-primary: #1a1f2e;
--ezmh-text-secondary: #2d3448;
--ezmh-text-muted: #4a5568;
--ezmh-text-accent: #3d4a66;
--ezmh-text-light: #FFFFFF;
/* Focus area accent colors */
--ezmh-focus-love-bg: rgba(201, 169, 98, 0.08);
--ezmh-focus-love-border: #C9A962;
--ezmh-focus-love-accent: #8B7355;
--ezmh-focus-career-bg: rgba(93, 107, 138, 0.08);
--ezmh-focus-career-border: #5D6B8A;
--ezmh-focus-career-accent: #4A5578;
--ezmh-focus-health-bg: rgba(107, 142, 107, 0.08);
--ezmh-focus-health-border: #6B8E6B;
--ezmh-focus-health-accent: #4A6B4A;
--ezmh-focus-spiritual-bg: rgba(123, 107, 138, 0.08);
--ezmh-focus-spiritual-border: #7B6B8A;
--ezmh-focus-spiritual-accent: #5D4A6B;
/* Key dates styling */
--ezmh-date-bg: rgba(201, 169, 98, 0.1);
--ezmh-date-text: #8B7355;
--ezmh-date-border: #C9A962;
/* Mantra & special sections */
--ezmh-mantra-bg: rgba(255, 255, 255, 0.95);
--ezmh-mantra-border: #C9A962;
--ezmh-mantra-text: #1a1f2e;
--ezmh-theme-bg: rgba(255, 255, 255, 0.9);
--ezmh-theme-border: #7B8AAD;
--ezmh-theme-text: #2d3448;
/* -------------------------------------------------------------------------
1.2 TYPOGRAPHY
------------------------------------------------------------------------- */
/* Font families - elegant, spiritual feel */
--ezmh-font-family-base: inherit;
--ezmh-font-family-heading: inherit;
--ezmh-font-family-accent: "Cormorant Garamond", Georgia, "Times New Roman", serif;
/* Font sizes */
--ezmh-font-size-xs: 0.75rem;
--ezmh-font-size-sm: 0.875rem;
--ezmh-font-size-base: 1rem;
--ezmh-font-size-lg: 1.125rem;
--ezmh-font-size-xl: 1.25rem;
--ezmh-font-size-2xl: 1.5rem;
--ezmh-font-size-3xl: 1.875rem;
--ezmh-font-size-4xl: 2.25rem;
/* Font weights */
--ezmh-font-weight-light: 300;
--ezmh-font-weight-normal: 400;
--ezmh-font-weight-medium: 500;
--ezmh-font-weight-semibold: 600;
--ezmh-font-weight-bold: 700;
/* Line heights */
--ezmh-line-height-tight: 1.25;
--ezmh-line-height-normal: 1.5;
--ezmh-line-height-relaxed: 1.65;
--ezmh-line-height-loose: 1.85;
/* Letter spacing */
--ezmh-letter-spacing-tight: -0.025em;
--ezmh-letter-spacing-normal: 0;
--ezmh-letter-spacing-wide: 0.05em;
--ezmh-letter-spacing-wider: 0.1em;
--ezmh-letter-spacing-widest: 0.15em;
/* -------------------------------------------------------------------------
1.3 SPACING
------------------------------------------------------------------------- */
--ezmh-spacing-xs: 0.25rem;
--ezmh-spacing-sm: 0.5rem;
--ezmh-spacing-md: 1rem;
--ezmh-spacing-lg: 1.5rem;
--ezmh-spacing-xl: 2rem;
--ezmh-spacing-2xl: 3rem;
--ezmh-spacing-3xl: 4rem;
/* Section spacing */
--ezmh-section-gap: var(--ezmh-spacing-2xl);
--ezmh-paragraph-gap: var(--ezmh-spacing-md);
/* -------------------------------------------------------------------------
1.4 BORDERS & SHADOWS
------------------------------------------------------------------------- */
/* Border radius */
--ezmh-radius-sm: 4px;
--ezmh-radius-md: 8px;
--ezmh-radius-lg: 12px;
--ezmh-radius-xl: 16px;
--ezmh-radius-2xl: 24px;
--ezmh-radius-full: 9999px;
/* Border widths */
--ezmh-border-width-thin: 1px;
--ezmh-border-width-medium: 2px;
--ezmh-border-width-thick: 3px;
/* Box shadows - soft, dreamy */
--ezmh-shadow-sm: 0 1px 3px rgba(93, 107, 138, 0.08);
--ezmh-shadow-md: 0 4px 12px rgba(93, 107, 138, 0.12);
--ezmh-shadow-lg: 0 8px 24px rgba(93, 107, 138, 0.15);
--ezmh-shadow-xl: 0 16px 48px rgba(93, 107, 138, 0.2);
--ezmh-shadow-glow: 0 0 20px rgba(201, 169, 98, 0.3);
/* -------------------------------------------------------------------------
1.5 TRANSITIONS
------------------------------------------------------------------------- */
--ezmh-transition-fast: 150ms ease;
--ezmh-transition-normal: 250ms ease;
--ezmh-transition-slow: 400ms ease;
--ezmh-transition-dreamy: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* =============================================================================
2. MAIN CONTAINER
============================================================================= */
/* -----------------------------------------------------------------------------
2.1 ARTICLE WRAPPER
----------------------------------------------------------------------------- */
.ez-monthly-horoscope {
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-base);
line-height: var(--ezmh-line-height-relaxed);
color: var(--ezmh-text-primary);
background: var(--ezmh-bg-primary);
}
/* -----------------------------------------------------------------------------
2.2 HEADER SECTION
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-header {
text-align: center;
margin-bottom: var(--ezmh-spacing-2xl);
padding-bottom: var(--ezmh-spacing-xl);
border-bottom: var(--ezmh-border-width-thin) solid rgba(155, 164, 196, 0.3);
position: relative;
}
/* Decorative element below header */
.ez-monthly-horoscope .ez-monthly-header::after {
content: "✦ ✦ ✦";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 var(--ezmh-spacing-md);
color: var(--ezmh-color-secondary);
font-size: var(--ezmh-font-size-sm);
letter-spacing: var(--ezmh-letter-spacing-wider);
}
/* -----------------------------------------------------------------------------
2.3 TITLE & SUBTITLE
----------------------------------------------------------------------------- */
.ez-monthly-horoscope h1.ez-monthly-title {
font-family: var(--ezmh-font-family-accent);
font-size: var(--ezmh-font-size-3xl);
font-weight: var(--ezmh-font-weight-light);
font-style: italic;
line-height: var(--ezmh-line-height-tight);
letter-spacing: var(--ezmh-letter-spacing-normal);
color: var(--ezmh-text-accent);
margin: 0 0 var(--ezmh-spacing-sm) 0;
}
.ez-monthly-horoscope p.ez-monthly-subtitle {
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-xs);
font-weight: var(--ezmh-font-weight-medium);
color: var(--ezmh-text-muted);
text-transform: uppercase;
letter-spacing: var(--ezmh-letter-spacing-widest);
margin: 0;
}
/* =============================================================================
3. THEME SECTION
============================================================================= */
/* -----------------------------------------------------------------------------
3.1 THEME WRAPPER
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-theme {
margin-bottom: var(--ezmh-section-gap);
}
/* -----------------------------------------------------------------------------
3.2 THEME CONTENT - Mystical accent box (like horoscope-intro)
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-theme-content {
font-family: var(--ezmh-font-family-accent);
font-size: var(--ezmh-font-size-lg);
font-style: italic;
line-height: var(--ezmh-line-height-loose);
color: var(--ezmh-theme-text);
padding: var(--ezmh-spacing-lg) var(--ezmh-spacing-xl);
background: var(--ezmh-bg-mystical);
border-radius: var(--ezmh-radius-lg);
border-left: var(--ezmh-border-width-thick) solid var(--ezmh-color-secondary);
position: relative;
}
/* Subtle golden glow effect */
.ez-monthly-horoscope .ez-monthly-theme-content::before {
content: "";
position: absolute;
left: -2px;
top: 20%;
height: 60%;
width: 4px;
background: var(--ezmh-color-secondary);
filter: blur(8px);
opacity: 0.5;
}
.ez-monthly-horoscope .ez-monthly-theme-content p {
margin: 0 0 var(--ezmh-paragraph-gap) 0;
}
.ez-monthly-horoscope .ez-monthly-theme-content p:last-child {
margin-bottom: 0;
}
/* =============================================================================
4. KEY DATES SECTION
============================================================================= */
/* -----------------------------------------------------------------------------
4.1 SECTION WRAPPER
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-key-dates {
margin-bottom: var(--ezmh-section-gap);
}
/* -----------------------------------------------------------------------------
4.2 SECTION TITLE (shared across sections)
----------------------------------------------------------------------------- */
.ez-monthly-horoscope h2.ez-monthly-section-title {
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-lg);
font-weight: var(--ezmh-font-weight-medium);
text-transform: uppercase;
letter-spacing: var(--ezmh-letter-spacing-wider);
line-height: var(--ezmh-line-height-tight);
color: var(--ezmh-color-primary);
margin: var(--ezmh-spacing-2xl) 0 var(--ezmh-spacing-md) 0;
padding-bottom: var(--ezmh-spacing-sm);
border-bottom: var(--ezmh-border-width-thin) solid var(--ezmh-color-tertiary);
}
/* Decorative dot before section title */
.ez-monthly-horoscope h2.ez-monthly-section-title::before {
content: "✦";
margin-right: var(--ezmh-spacing-sm);
color: var(--ezmh-color-secondary);
font-size: var(--ezmh-font-size-sm);
}
/* First section title spacing */
.ez-monthly-horoscope .ez-monthly-theme + .ez-monthly-key-dates h2.ez-monthly-section-title,
.ez-monthly-horoscope h2.ez-monthly-section-title:first-of-type {
margin-top: var(--ezmh-spacing-lg);
}
/* -----------------------------------------------------------------------------
4.3 DATES LIST
----------------------------------------------------------------------------- */
.ez-monthly-horoscope ul.ez-monthly-dates-list {
list-style: none !important;
list-style-type: none !important;
margin: var(--ezmh-spacing-md) 0 var(--ezmh-spacing-xl) 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ezmh-spacing-sm);
}
.ez-monthly-horoscope ul.ez-monthly-dates-list li {
list-style: none !important;
list-style-type: none !important;
}
/* -----------------------------------------------------------------------------
4.4 DATE ITEMS
----------------------------------------------------------------------------- */
.ez-monthly-horoscope li.ez-monthly-date-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--ezmh-spacing-md);
padding: var(--ezmh-spacing-md) var(--ezmh-spacing-lg);
background: var(--ezmh-bg-card);
border-radius: var(--ezmh-radius-md);
border-left: var(--ezmh-border-width-thick) solid var(--ezmh-date-border);
transition: all var(--ezmh-transition-normal);
}
.ez-monthly-horoscope li.ez-monthly-date-item:hover {
box-shadow: var(--ezmh-shadow-sm);
transform: translateX(4px);
}
.ez-monthly-horoscope span.ez-monthly-date {
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-sm);
font-weight: var(--ezmh-font-weight-bold);
color: var(--ezmh-date-text);
background: var(--ezmh-date-bg);
padding: var(--ezmh-spacing-xs) var(--ezmh-spacing-sm);
border-radius: var(--ezmh-radius-sm);
white-space: nowrap;
min-width: 100px;
text-align: center;
}
.ez-monthly-horoscope span.ez-monthly-date-description {
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-base);
line-height: var(--ezmh-line-height-relaxed);
color: var(--ezmh-text-primary);
flex: 1;
}
/* =============================================================================
5. FOCUS AREAS SECTION
============================================================================= */
/* -----------------------------------------------------------------------------
5.1 SECTION WRAPPER
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-focus-areas {
margin-bottom: var(--ezmh-section-gap);
}
/* -----------------------------------------------------------------------------
5.2 FOCUS CARDS
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-focus {
margin-bottom: var(--ezmh-spacing-xl);
padding: var(--ezmh-spacing-lg) var(--ezmh-spacing-xl);
background: var(--ezmh-bg-card);
border-radius: var(--ezmh-radius-lg);
border-left: var(--ezmh-border-width-thick) solid var(--ezmh-color-tertiary);
transition: all var(--ezmh-transition-normal);
}
.ez-monthly-horoscope .ez-monthly-focus:last-child {
margin-bottom: 0;
}
.ez-monthly-horoscope .ez-monthly-focus:hover {
box-shadow: var(--ezmh-shadow-sm);
}
/* -----------------------------------------------------------------------------
5.3 FOCUS TITLES
----------------------------------------------------------------------------- */
.ez-monthly-horoscope h3.ez-monthly-focus-title {
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-base);
font-weight: var(--ezmh-font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--ezmh-letter-spacing-wide);
line-height: var(--ezmh-line-height-tight);
color: var(--ezmh-color-primary);
margin: 0 0 var(--ezmh-spacing-md) 0;
padding-bottom: var(--ezmh-spacing-sm);
border-bottom: var(--ezmh-border-width-thin) solid rgba(155, 164, 196, 0.2);
}
/* -----------------------------------------------------------------------------
5.4 FOCUS CONTENT
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-focus-content {
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-base);
line-height: var(--ezmh-line-height-relaxed);
color: var(--ezmh-text-primary);
}
.ez-monthly-horoscope .ez-monthly-focus-content p {
margin: 0 0 var(--ezmh-paragraph-gap) 0;
}
.ez-monthly-horoscope .ez-monthly-focus-content p:last-child {
margin-bottom: 0;
}
/* -----------------------------------------------------------------------------
5.5 FOCUS AREA VARIANTS
----------------------------------------------------------------------------- */
/* Love & Relationships - Warm gold */
.ez-monthly-horoscope .ez-monthly-focus-love {
background: var(--ezmh-focus-love-bg);
border-left-color: var(--ezmh-focus-love-border);
}
.ez-monthly-horoscope .ez-monthly-focus-love h3.ez-monthly-focus-title {
color: var(--ezmh-focus-love-accent);
}
/* Career & Finances - Deep blue */
.ez-monthly-horoscope .ez-monthly-focus-career {
background: var(--ezmh-focus-career-bg);
border-left-color: var(--ezmh-focus-career-border);
}
.ez-monthly-horoscope .ez-monthly-focus-career h3.ez-monthly-focus-title {
color: var(--ezmh-focus-career-accent);
}
/* Health & Wellbeing - Earthy green */
.ez-monthly-horoscope .ez-monthly-focus-health {
background: var(--ezmh-focus-health-bg);
border-left-color: var(--ezmh-focus-health-border);
}
.ez-monthly-horoscope .ez-monthly-focus-health h3.ez-monthly-focus-title {
color: var(--ezmh-focus-health-accent);
}
/* Spiritual Growth - Mystical purple */
.ez-monthly-horoscope .ez-monthly-focus-spiritual {
background: var(--ezmh-focus-spiritual-bg);
border-left-color: var(--ezmh-focus-spiritual-border);
}
.ez-monthly-horoscope .ez-monthly-focus-spiritual h3.ez-monthly-focus-title {
color: var(--ezmh-focus-spiritual-accent);
}
/* =============================================================================
6. SACRED PRACTICES SECTION
============================================================================= */
/* -----------------------------------------------------------------------------
6.1 SECTION WRAPPER
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-practices {
margin-bottom: var(--ezmh-section-gap);
padding: var(--ezmh-spacing-xl);
background: var(--ezmh-bg-mystical);
border-radius: var(--ezmh-radius-lg);
border: var(--ezmh-border-width-thin) solid rgba(155, 164, 196, 0.3);
}
/* -----------------------------------------------------------------------------
6.2 SUBSECTIONS
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-rituals,
.ez-monthly-horoscope .ez-monthly-journaling,
.ez-monthly-horoscope .ez-monthly-intentions {
margin-bottom: var(--ezmh-spacing-xl);
}
.ez-monthly-horoscope .ez-monthly-rituals:last-child,
.ez-monthly-horoscope .ez-monthly-journaling:last-child,
.ez-monthly-horoscope .ez-monthly-intentions:last-child {
margin-bottom: 0;
}
.ez-monthly-horoscope h3.ez-monthly-subsection-title {
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-sm);
font-weight: var(--ezmh-font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--ezmh-letter-spacing-wide);
color: var(--ezmh-color-primary);
margin: 0 0 var(--ezmh-spacing-md) 0;
}
/* Decorative moon before subsection titles */
.ez-monthly-horoscope h3.ez-monthly-subsection-title::before {
content: "☽";
margin-right: var(--ezmh-spacing-sm);
color: var(--ezmh-color-secondary);
}
/* -----------------------------------------------------------------------------
6.3 PRACTICE LISTS
----------------------------------------------------------------------------- */
.ez-monthly-horoscope ul.ez-monthly-rituals-list,
.ez-monthly-horoscope ul.ez-monthly-journaling-list,
.ez-monthly-horoscope ul.ez-monthly-intentions-list {
list-style: none !important;
list-style-type: none !important;
margin: 0;
padding: 0;
}
.ez-monthly-horoscope ul.ez-monthly-rituals-list li,
.ez-monthly-horoscope ul.ez-monthly-journaling-list li,
.ez-monthly-horoscope ul.ez-monthly-intentions-list li {
list-style: none !important;
list-style-type: none !important;
}
.ez-monthly-horoscope li.ez-monthly-ritual-item,
.ez-monthly-horoscope li.ez-monthly-journaling-item,
.ez-monthly-horoscope li.ez-monthly-intention-item {
position: relative;
padding-left: var(--ezmh-spacing-2xl);
margin-bottom: var(--ezmh-spacing-md);
font-family: var(--ezmh-font-family-base);
font-size: var(--ezmh-font-size-base);
line-height: var(--ezmh-line-height-relaxed);
color: var(--ezmh-text-primary);
list-style: none !important;
list-style-type: none !important;
}
.ez-monthly-horoscope li.ez-monthly-ritual-item:last-child,
.ez-monthly-horoscope li.ez-monthly-journaling-item:last-child,
.ez-monthly-horoscope li.ez-monthly-intention-item:last-child {
margin-bottom: 0;
}
/* Custom bullet - moon for rituals */
.ez-monthly-horoscope li.ez-monthly-ritual-item::before {
content: "☽";
position: absolute;
left: 0;
top: 0;
color: var(--ezmh-color-secondary);
font-size: var(--ezmh-font-size-lg);
}
/* Custom bullet - star for journaling */
.ez-monthly-horoscope li.ez-monthly-journaling-item::before {
content: "✦";
position: absolute;
left: 0;
top: 2px;
color: var(--ezmh-color-tertiary);
font-size: var(--ezmh-font-size-sm);
}
/* Custom bullet - sparkle for intentions */
.ez-monthly-horoscope li.ez-monthly-intention-item::before {
content: "✧";
position: absolute;
left: 0;
top: 2px;
color: var(--ezmh-color-quaternary);
font-size: var(--ezmh-font-size-base);
}
/* =============================================================================
7. MANTRA SECTION
============================================================================= */
/* -----------------------------------------------------------------------------
7.1 SECTION WRAPPER
----------------------------------------------------------------------------- */
.ez-monthly-horoscope .ez-monthly-mantra {
margin-bottom: var(--ezmh-spacing-lg);
}
/* Mantra section title - light color for dark gradient backgrounds */
.ez-monthly-horoscope .ez-monthly-mantra h2.ez-monthly-section-title {
color: var(--ezmh-text-light);
border-bottom-color: rgba(255, 255, 255, 0.3);
}
.ez-monthly-horoscope .ez-monthly-mantra h2.ez-monthly-section-title::before,
.ez-monthly-horoscope .ez-monthly-mantra h2.ez-monthly-section-title::after {
color: var(--ezmh-color-secondary);
}
/* -----------------------------------------------------------------------------
7.2 MANTRA BLOCKQUOTE - Elegant bordered card (like affirmation)
----------------------------------------------------------------------------- */
.ez-monthly-horoscope blockquote.ez-monthly-mantra-text {
font-family: var(--ezmh-font-family-accent);
font-size: var(--ezmh-font-size-lg);
font-weight: var(--ezmh-font-weight-normal);
line-height: var(--ezmh-line-height-relaxed);
text-align: center;
color: var(--ezmh-mantra-text);
margin: var(--ezmh-spacing-2xl) 0 var(--ezmh-spacing-lg) 0;
padding: var(--ezmh-spacing-xl) var(--ezmh-spacing-2xl);
background: var(--ezmh-mantra-bg);
border-radius: var(--ezmh-radius-xl);
border: var(--ezmh-border-width-medium) solid var(--ezmh-mantra-border);
box-shadow: var(--ezmh-shadow-md), var(--ezmh-shadow-glow);
position: relative;
}
/* Top decorative element */
.ez-monthly-horoscope blockquote.ez-monthly-mantra-text::before {
content: "☆";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 var(--ezmh-spacing-sm);
color: var(--ezmh-color-secondary);
font-size: var(--ezmh-font-size-xl);
}
/* -----------------------------------------------------------------------------
7.3 CLOSING MESSAGE
----------------------------------------------------------------------------- */
.ez-monthly-horoscope p.ez-monthly-closing {
font-family: var(--ezmh-font-family-accent);
font-size: var(--ezmh-font-size-xl);
font-weight: var(--ezmh-font-weight-medium);
font-style: italic;
text-align: center;
color: var(--ezmh-color-secondary);
margin: var(--ezmh-spacing-lg) 0 0 0;
letter-spacing: var(--ezmh-letter-spacing-wide);
}
/* =============================================================================
8. RTL (RIGHT-TO-LEFT) SUPPORT
============================================================================= */
/* Block-level RTL */
.ez-monthly-horoscope[dir="rtl"] {
text-align: right;
}
/* LTR default */
.ez-monthly-horoscope[dir="ltr"] {
text-align: left;
}
/* RTL theme content border flip */
.ez-monthly-horoscope[dir="rtl"] .ez-monthly-theme-content {
border-left: none;
border-right: var(--ezmh-border-width-thick) solid var(--ezmh-color-secondary);
}
.ez-monthly-horoscope[dir="rtl"] .ez-monthly-theme-content::before {
left: auto;
right: -2px;
}
/* RTL date items */
.ez-monthly-horoscope[dir="rtl"] li.ez-monthly-date-item {
border-left: none;
border-right: var(--ezmh-border-width-thick) solid var(--ezmh-date-border);
}
.ez-monthly-horoscope[dir="rtl"] li.ez-monthly-date-item:hover {
transform: translateX(-4px);
}
/* RTL focus cards */
.ez-monthly-horoscope[dir="rtl"] .ez-monthly-focus {
border-left: none;
border-right: var(--ezmh-border-width-thick) solid var(--ezmh-color-tertiary);
}
.ez-monthly-horoscope[dir="rtl"] .ez-monthly-focus-love {
border-right-color: var(--ezmh-focus-love-border);
}
.ez-monthly-horoscope[dir="rtl"] .ez-monthly-focus-career {
border-right-color: var(--ezmh-focus-career-border);
}
.ez-monthly-horoscope[dir="rtl"] .ez-monthly-focus-health {
border-right-color: var(--ezmh-focus-health-border);
}
.ez-monthly-horoscope[dir="rtl"] .ez-monthly-focus-spiritual {
border-right-color: var(--ezmh-focus-spiritual-border);
}
/* RTL section title decoration */
.ez-monthly-horoscope[dir="rtl"] h2.ez-monthly-section-title::before {
margin-right: 0;
margin-left: var(--ezmh-spacing-sm);
}
/* RTL subsection title decoration */
.ez-monthly-horoscope[dir="rtl"] h3.ez-monthly-subsection-title::before {
margin-right: 0;
margin-left: var(--ezmh-spacing-sm);
}
/* RTL list padding */
.ez-monthly-horoscope[dir="rtl"] li.ez-monthly-ritual-item,
.ez-monthly-horoscope[dir="rtl"] li.ez-monthly-journaling-item,
.ez-monthly-horoscope[dir="rtl"] li.ez-monthly-intention-item {
padding-left: 0;
padding-right: var(--ezmh-spacing-2xl);
}
.ez-monthly-horoscope[dir="rtl"] li.ez-monthly-ritual-item::before,
.ez-monthly-horoscope[dir="rtl"] li.ez-monthly-journaling-item::before,
.ez-monthly-horoscope[dir="rtl"] li.ez-monthly-intention-item::before {
left: auto;
right: 0;
}
/* =============================================================================
9. RESPONSIVE DESIGN
============================================================================= */
/* Tablet and below */
@media (max-width: 768px) {
.ez-monthly-horoscope {
--ezmh-font-size-3xl: 1.5rem;
--ezmh-font-size-2xl: 1.25rem;
--ezmh-font-size-xl: 1.125rem;
--ezmh-spacing-2xl: 2rem;
--ezmh-spacing-xl: 1.5rem;
}
.ez-monthly-horoscope li.ez-monthly-date-item {
flex-direction: column;
gap: var(--ezmh-spacing-sm);
}
.ez-monthly-horoscope span.ez-monthly-date {
min-width: unset;
align-self: flex-start;
}
.ez-monthly-horoscope .ez-monthly-focus {
padding: var(--ezmh-spacing-lg);
}
.ez-monthly-horoscope .ez-monthly-practices {
padding: var(--ezmh-spacing-lg);
}
.ez-monthly-horoscope blockquote.ez-monthly-mantra-text {
padding: var(--ezmh-spacing-lg);
background: rgba(255, 255, 255, 0.95);
}
}
/* Mobile */
@media (max-width: 480px) {
.ez-monthly-horoscope {
--ezmh-font-size-3xl: 1.375rem;
--ezmh-font-size-lg: 1rem;
--ezmh-spacing-lg: 1rem;
--ezmh-spacing-md: 0.75rem;
}
.ez-monthly-horoscope h2.ez-monthly-section-title {
font-size: var(--ezmh-font-size-base);
}
.ez-monthly-horoscope h3.ez-monthly-focus-title {
font-size: var(--ezmh-font-size-sm);
}
.ez-monthly-horoscope blockquote.ez-monthly-mantra-text::before {
display: none;
}
.ez-monthly-horoscope .ez-monthly-header::after {
display: none;
}
}
/* =============================================================================
10. PRINT STYLES
============================================================================= */
@media print {
.ez-monthly-horoscope {
font-size: 11pt;
line-height: 1.5;
color: #000;
background: #fff;
}
.ez-monthly-horoscope h1.ez-monthly-title {
font-size: 18pt;
color: #000;
font-style: normal;
}
.ez-monthly-horoscope h2.ez-monthly-section-title {
font-size: 12pt;
color: #000;
border-bottom-color: #000;
}
.ez-monthly-horoscope h2.ez-monthly-section-title::before {
content: none;
}
.ez-monthly-horoscope h3.ez-monthly-focus-title,
.ez-monthly-horoscope h3.ez-monthly-subsection-title {
font-size: 11pt;
color: #000;
}
.ez-monthly-horoscope h3.ez-monthly-subsection-title::before {
content: none;
}
.ez-monthly-horoscope .ez-monthly-theme-content,
.ez-monthly-horoscope .ez-monthly-focus,
.ez-monthly-horoscope li.ez-monthly-date-item,
.ez-monthly-horoscope .ez-monthly-practices,
.ez-monthly-horoscope blockquote.ez-monthly-mantra-text {
background: none;
border-color: #000;
box-shadow: none;
}
.ez-monthly-horoscope .ez-monthly-theme-content::before,
.ez-monthly-horoscope blockquote.ez-monthly-mantra-text::before,
.ez-monthly-horoscope .ez-monthly-header::after {
display: none;
}
.ez-monthly-horoscope span.ez-monthly-date {
background: none;
border: 1px solid #000;
color: #000;
}
.ez-monthly-horoscope blockquote.ez-monthly-mantra-text {
border: 2px solid #000;
}
.ez-monthly-horoscope p.ez-monthly-closing {
color: #000;
}
}
/* =============================================================================
11. DARK MODE SUPPORT (OPT-IN ONLY)
=============================================================================
Dark mode is NOT automatic. Add .dark-mode class to enable.
============================================================================= */
/* Manual dark mode class - add .dark-mode to body or block to enable */
.dark-mode .ez-monthly-horoscope,
.ez-monthly-horoscope.dark-mode {
--ezmh-color-primary: #8B9BB4;
--ezmh-color-secondary: #D4BC7A;
--ezmh-color-tertiary: #6B7A99;
--ezmh-color-quaternary: #9B8BAA;
--ezmh-bg-primary: transparent;
--ezmh-bg-secondary: rgba(139, 155, 180, 0.1);
--ezmh-bg-accent: rgba(212, 188, 122, 0.1);
--ezmh-bg-mystical: linear-gradient(135deg, rgba(107, 122, 153, 0.1) 0%, rgba(139, 155, 180, 0.08) 100%);
--ezmh-bg-card: rgba(45, 49, 66, 0.6);
--ezmh-text-primary: #E8EAF0;
--ezmh-text-secondary: #B8BCC8;
--ezmh-text-muted: rgba(232, 234, 240, 0.5);
--ezmh-text-accent: #9BA4C4;
--ezmh-focus-love-bg: rgba(212, 188, 122, 0.15);
--ezmh-focus-love-accent: #D4BC7A;
--ezmh-focus-career-bg: rgba(139, 155, 180, 0.15);
--ezmh-focus-career-accent: #8B9BB4;
--ezmh-focus-health-bg: rgba(139, 180, 139, 0.15);
--ezmh-focus-health-accent: #8BB48B;
--ezmh-focus-spiritual-bg: rgba(155, 139, 170, 0.15);
--ezmh-focus-spiritual-accent: #9B8BAA;
--ezmh-date-bg: rgba(212, 188, 122, 0.2);
--ezmh-date-text: #D4BC7A;
--ezmh-theme-bg: rgba(107, 122, 153, 0.15);
--ezmh-theme-text: #B8BCC8;
--ezmh-mantra-bg: linear-gradient(135deg, rgba(212, 188, 122, 0.1) 0%, rgba(107, 122, 153, 0.15) 100%);
--ezmh-mantra-text: #E8EAF0;
--ezmh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--ezmh-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--ezmh-shadow-glow: 0 0 20px rgba(212, 188, 122, 0.2);
}
/* Mantra star on dark backgrounds */
.dark-mode .ez-monthly-horoscope blockquote.ez-monthly-mantra-text::before,
.ez-monthly-horoscope.dark-mode blockquote.ez-monthly-mantra-text::before {
background: #1a1a2e;
}
/* Header decoration on dark backgrounds */
.dark-mode .ez-monthly-horoscope .ez-monthly-header::after,
.ez-monthly-horoscope.dark-mode .ez-monthly-header::after {
background: #1a1a2e;
}
/* =============================================================================
END OF MONTHLY HOROSCOPE MYSTICAL THEME STYLESHEET
COLOR REFERENCE:
----------------
Primary (dusty blue-purple): #5D6B8A
Secondary (warm gold): #C9A962
Tertiary (soft lavender): #9BA4C4
Quaternary (cosmic purple): #7B6B8A
FOCUS AREA COLORS:
------------------
Love: Gold tones (#C9A962, #8B7355)
Career: Deep blue (#5D6B8A, #4A5578)
Health: Earthy green (#6B8E6B, #4A6B4A)
Spiritual: Mystical purple (#7B6B8A, #5D4A6B)
TEXT COLORS (Enhanced Contrast):
--------------------------------
Primary text: #1a1f2e
Secondary text: #2d3448
Muted text: #4a5568
Accent text: #3d4a66
Light text: #FFFFFF
GOOGLE FONT SUGGESTION:
-----------------------
For the full mystical effect, add this to your theme:
<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">
Then ensure --ezmh-font-family-accent uses "Cormorant Garamond"
============================================================================= */
