/* =============================================================================
EZ HOROSCOPE - DAILY HOROSCOPE 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.
ENHANCED: Includes contrast fixes for light/cream website backgrounds
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. Block Container
2.1 Main Block Wrapper
3. Hero Section
3.1 Hero Wrapper
3.2 Hero Overlay
3.3 Hero Content & Text
3.4 Hero Headings (h1, h3 date)
3.5 Hero Paragraphs
3.6 Inline Image Mode
4. Content Sections
4.1 Section Wrapper (.ez-enneagram-section)
4.2 Section Content (.ez-enneagram-content)
4.3 Section Headings (h2)
4.4 Section Text (.ez-enneagram-text)
4.5 Guidance Section
4.6 Advice Section
4.7 Conclusion Section
5. Celestial Influences Grid
5.1 Flexbox Section Wrapper (artifact fix included)
5.2 Section Heading
5.3 Flexbox Container (Grid)
5.4 Flexbox Items (Planet Cards)
5.5 Planet Card Backgrounds
5.6 Planet Card Content
5.7 Individual Planet Styling
6. Call-to-Action Components
6.1 CTA Wrapper
6.2 CTA Alignment
6.3 CTA Header
6.4 CTA Text
6.5 CTA Image
6.6 CTA Button
6.7 CTA Link
6.8 Built-in API CTA (.ez-cta)
7. Lists & Typography
7.1 Unordered Lists
7.2 Ordered Lists
7.3 Inline Emphasis
8. Podcast Section
9. RTL (Right-to-Left) Support
10. Responsive Design (mobile contrast fixes included)
11. Print Styles
12. 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-horoscope-block {
/* -------------------------------------------------------------------------
1.1 COLORS - MYSTICAL PALETTE
------------------------------------------------------------------------- */
/* Primary - Deep mystical purple-blue */
--ezhp-color-primary: #5D6B8A;
/* Secondary - Warm gold accent (candle/crystal warmth) */
--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.06);
--ezhp-bg-accent: rgba(201, 169, 98, 0.08);
--ezhp-bg-mystical: linear-gradient(135deg, rgba(93, 107, 138, 0.04) 0%, rgba(155, 164, 196, 0.06) 100%);
--ezhp-bg-card: rgba(255, 255, 255, 0.9);
--ezhp-bg-card-hover: rgba(255, 255, 255, 0.95);
/* Text colors - Enhanced contrast for light/cream backgrounds */
--ezhp-text-primary: #1a1f2e;
--ezhp-text-secondary: #2d3448;
--ezhp-text-muted: #4a5568;
--ezhp-text-accent: #3d4a66;
--ezhp-text-light: #FFFFFF;
--ezhp-text-gold: #8B7355;
/* Section colors - Enhanced opacity for light/cream backgrounds */
--ezhp-section-guidance-bg: rgba(255, 255, 255, 0.85);
--ezhp-section-advice-bg: rgba(255, 255, 255, 0.85);
--ezhp-section-conclusion-bg: rgba(255, 255, 255, 0.9);
/* Planet card colors */
--ezhp-planet-moon-accent: #9BA4C4;
--ezhp-planet-sun-accent: #E6B85C;
--ezhp-planet-mars-accent: #C75B5B;
--ezhp-planet-mercury-accent: #7B9E87;
--ezhp-planet-jupiter-accent: #8B7AAD;
--ezhp-planet-venus-accent: #D4A5A5;
--ezhp-planet-saturn-accent: #6B7A8A;
--ezhp-planet-neptune-accent: #5B8FAD;
--ezhp-planet-uranus-accent: #5BADC4;
--ezhp-planet-pluto-accent: #8A6B8A;
/* CTA colors */
--ezhp-cta-bg: rgba(93, 107, 138, 0.05);
--ezhp-cta-border: rgba(155, 164, 196, 0.3);
--ezhp-cta-button-bg: transparent;
--ezhp-cta-button-text: #5D6B8A;
--ezhp-cta-button-border: #5D6B8A;
--ezhp-cta-button-hover-bg: #5D6B8A;
--ezhp-cta-button-hover-text: #FFFFFF;
/* -------------------------------------------------------------------------
1.2 TYPOGRAPHY
------------------------------------------------------------------------- */
/* Font families */
--ezhp-font-family-base: inherit;
--ezhp-font-family-heading: inherit;
--ezhp-font-family-accent: "Cormorant Garamond", Georgia, "Times New Roman", serif;
/* Font sizes */
--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.875rem;
--ezhp-font-size-4xl: 2.25rem;
--ezhp-font-size-5xl: 3rem;
/* Font weights */
--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;
/* Line heights */
--ezhp-line-height-tight: 1.2;
--ezhp-line-height-snug: 1.375;
--ezhp-line-height-normal: 1.5;
--ezhp-line-height-relaxed: 1.65;
--ezhp-line-height-loose: 1.85;
/* Letter spacing */
--ezhp-letter-spacing-tight: -0.025em;
--ezhp-letter-spacing-normal: 0;
--ezhp-letter-spacing-wide: 0.025em;
--ezhp-letter-spacing-wider: 0.05em;
--ezhp-letter-spacing-widest: 0.1em;
/* -------------------------------------------------------------------------
1.3 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;
--ezhp-spacing-3xl: 4rem;
--ezhp-spacing-4xl: 6rem;
/* -------------------------------------------------------------------------
1.4 BORDERS & SHADOWS
------------------------------------------------------------------------- */
/* Border radius */
--ezhp-radius-sm: 4px;
--ezhp-radius-md: 8px;
--ezhp-radius-lg: 12px;
--ezhp-radius-xl: 16px;
--ezhp-radius-2xl: 24px;
--ezhp-radius-full: 9999px;
/* Border widths */
--ezhp-border-width-thin: 1px;
--ezhp-border-width-medium: 2px;
--ezhp-border-width-thick: 3px;
/* Box shadows */
--ezhp-shadow-sm: 0 1px 3px rgba(93, 107, 138, 0.08);
--ezhp-shadow-md: 0 4px 12px rgba(93, 107, 138, 0.1);
--ezhp-shadow-lg: 0 8px 24px rgba(93, 107, 138, 0.12);
--ezhp-shadow-xl: 0 16px 48px rgba(93, 107, 138, 0.15);
--ezhp-shadow-glow: 0 0 20px rgba(201, 169, 98, 0.25);
--ezhp-shadow-glow-blue: 0 0 20px rgba(93, 107, 138, 0.2);
/* -------------------------------------------------------------------------
1.5 TRANSITIONS
------------------------------------------------------------------------- */
--ezhp-transition-fast: 150ms ease;
--ezhp-transition-normal: 250ms ease;
--ezhp-transition-slow: 400ms ease;
--ezhp-transition-dreamy: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* =============================================================================
2. BLOCK CONTAINER
============================================================================= */
/* -----------------------------------------------------------------------------
2.1 MAIN BLOCK WRAPPER
----------------------------------------------------------------------------- */
.ez-horoscope-block {
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);
padding: var(--ezhp-spacing-md);
border-radius: var(--ezhp-radius-lg);
}
/* =============================================================================
3. HERO SECTION
============================================================================= */
/* -----------------------------------------------------------------------------
3.1 HERO WRAPPER
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-hero {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
z-index: 0;
isolation: isolate;
display: flex;
flex-direction: column;
border-radius: var(--ezhp-radius-xl);
margin-bottom: var(--ezhp-spacing-2xl);
}
/* -----------------------------------------------------------------------------
3.2 HERO OVERLAY
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
pointer-events: none;
transition: opacity var(--ezhp-transition-slow);
}
.ez-horoscope-block .ez-hero-overlay.light {
background-color: rgba(255, 255, 255, 0.75);
}
.ez-horoscope-block .ez-hero-overlay.dark {
background-color: rgba(45, 49, 66, 0.5);
}
/* -----------------------------------------------------------------------------
3.3 HERO CONTENT & TEXT
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-hero-content {
position: relative;
padding: var(--ezhp-spacing-xl);
z-index: 20;
}
.ez-horoscope-block .ez-hero-text {
display: block;
}
.ez-horoscope-block .ez-hero-text::after {
content: "";
display: block;
clear: both;
}
/* -----------------------------------------------------------------------------
3.4 HERO HEADINGS
----------------------------------------------------------------------------- */
/* Main title (h1) - "Leo Daily Horoscope" */
.ez-horoscope-block .ez-hero h1 {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-4xl);
font-weight: var(--ezhp-font-weight-light);
font-style: italic;
line-height: var(--ezhp-line-height-tight);
letter-spacing: var(--ezhp-letter-spacing-tight);
color: var(--ezhp-text-accent);
margin: 0 0 var(--ezhp-spacing-sm) 0;
}
/* Date heading (h3) - "December 29, 2025" */
.ez-horoscope-block .ez-hero h3 {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-xs);
font-weight: var(--ezhp-font-weight-medium);
text-transform: uppercase;
letter-spacing: var(--ezhp-letter-spacing-widest);
color: var(--ezhp-text-muted);
margin: 0 0 var(--ezhp-spacing-xl) 0;
}
/* When hero has background image, make text light */
.ez-horoscope-block .ez-hero[style*="background-image"] h1,
.ez-horoscope-block .ez-hero[style*="background-image"] h3 {
color: var(--ezhp-text-light);
text-shadow: 0 2px 8px rgba(45, 49, 66, 0.5);
}
/* -----------------------------------------------------------------------------
3.5 HERO PARAGRAPHS
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-hero-text > p {
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-secondary);
margin: 0 0 var(--ezhp-spacing-md) 0;
}
/* First paragraph - intro style */
.ez-horoscope-block .ez-hero-text > p:first-of-type {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-lg);
font-style: italic;
line-height: var(--ezhp-line-height-loose);
color: var(--ezhp-text-secondary);
}
/* Emphasized text within paragraphs */
.ez-horoscope-block .ez-hero-text strong {
font-weight: var(--ezhp-font-weight-semibold);
color: var(--ezhp-text-primary);
}
.ez-horoscope-block .ez-hero-text em {
font-style: italic;
color: var(--ezhp-color-primary);
}
/* When hero has background image */
.ez-horoscope-block .ez-hero[style*="background-image"] .ez-hero-text > p {
color: var(--ezhp-text-light);
text-shadow: 0 1px 4px rgba(45, 49, 66, 0.4);
}
/* -----------------------------------------------------------------------------
3.6 INLINE IMAGE MODE
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-daily-inline-image {
position: relative;
display: inline-block;
max-width: 100%;
}
.ez-horoscope-block .ez-daily-inline-image img {
width: 100%;
height: auto;
display: block;
border-radius: var(--ezhp-radius-lg);
box-shadow: var(--ezhp-shadow-lg);
}
.ez-horoscope-block .ez-daily-inline-image .ez-hero-overlay {
position: absolute;
inset: 0;
border-radius: var(--ezhp-radius-lg);
pointer-events: none;
}
.ez-horoscope-block .ez-hero.has-inline-image {
display: block;
}
/* =============================================================================
4. CONTENT SECTIONS
============================================================================= */
/* -----------------------------------------------------------------------------
4.1 SECTION WRAPPER (.ez-enneagram-section)
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-enneagram-section {
margin-bottom: var(--ezhp-spacing-2xl);
padding: var(--ezhp-spacing-xl) 0;
}
/* -----------------------------------------------------------------------------
4.2 SECTION CONTENT (.ez-enneagram-content)
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-enneagram-content {
max-width: 100%;
}
/* -----------------------------------------------------------------------------
4.3 SECTION HEADINGS (h2)
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-enneagram-section h2 {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-2xl);
font-weight: var(--ezhp-font-weight-normal);
font-style: italic;
line-height: var(--ezhp-line-height-tight);
color: var(--ezhp-color-primary);
margin: 0 0 var(--ezhp-spacing-lg) 0;
padding-bottom: var(--ezhp-spacing-sm);
border-bottom: var(--ezhp-border-width-thin) solid var(--ezhp-color-tertiary);
position: relative;
}
/* Decorative element */
.ez-horoscope-block .ez-enneagram-section h2::before {
content: "✦";
margin-right: var(--ezhp-spacing-sm);
color: var(--ezhp-color-secondary);
font-style: normal;
font-size: var(--ezhp-font-size-base);
}
/* -----------------------------------------------------------------------------
4.4 SECTION TEXT (.ez-enneagram-text)
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-enneagram-text {
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);
}
.ez-horoscope-block .ez-enneagram-text p {
margin: 0 0 var(--ezhp-spacing-md) 0;
}
.ez-horoscope-block .ez-enneagram-text strong {
font-weight: var(--ezhp-font-weight-semibold);
color: var(--ezhp-text-primary);
}
.ez-horoscope-block .ez-enneagram-text em {
font-style: italic;
color: var(--ezhp-color-primary);
}
/* -----------------------------------------------------------------------------
4.5 GUIDANCE SECTION (#guidance-section)
----------------------------------------------------------------------------- */
.ez-horoscope-block #guidance-section {
background: var(--ezhp-section-guidance-bg);
border-radius: var(--ezhp-radius-xl);
padding: var(--ezhp-spacing-xl);
}
.ez-horoscope-block #guidance-section h2::before {
content: "☽";
}
/* -----------------------------------------------------------------------------
4.6 ADVICE SECTION (#advice-section)
----------------------------------------------------------------------------- */
.ez-horoscope-block #advice-section {
background: var(--ezhp-section-advice-bg);
border-radius: var(--ezhp-radius-xl);
padding: var(--ezhp-spacing-xl);
}
.ez-horoscope-block #advice-section h2::before {
content: "✧";
}
/* Exercise box styling */
.ez-horoscope-block #advice-section p[id="goddard-advice"],
.ez-horoscope-block #advice-section p[data-elementid="p-goddard-advice"] {
background: var(--ezhp-bg-mystical);
border: var(--ezhp-border-width-thin) solid var(--ezhp-color-tertiary);
border-radius: var(--ezhp-radius-lg);
padding: var(--ezhp-spacing-lg);
margin: var(--ezhp-spacing-xl) 0;
}
/* -----------------------------------------------------------------------------
4.7 CONCLUSION SECTION (#conclusion-section)
----------------------------------------------------------------------------- */
.ez-horoscope-block #conclusion-section {
background: var(--ezhp-section-conclusion-bg);
border-radius: var(--ezhp-radius-xl);
padding: var(--ezhp-spacing-xl);
text-align: center;
border: var(--ezhp-border-width-medium) solid var(--ezhp-color-secondary);
box-shadow: var(--ezhp-shadow-glow);
}
.ez-horoscope-block #conclusion-section h2 {
border-bottom: none;
text-align: center;
}
.ez-horoscope-block #conclusion-section h2::before {
content: "☆";
}
.ez-horoscope-block #conclusion-section .ez-enneagram-text {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-lg);
font-style: italic;
line-height: var(--ezhp-line-height-loose);
color: var(--ezhp-text-secondary);
}
/* =============================================================================
5. CELESTIAL INFLUENCES GRID
============================================================================= */
/* -----------------------------------------------------------------------------
5.1 FLEXBOX SECTION WRAPPER
----------------------------------------------------------------------------- */
.ez-horoscope-block .eztype-flexbox-section {
margin: var(--ezhp-spacing-2xl) 0;
padding: var(--ezhp-spacing-xl) 0;
border-left: none;
}
/* Remove decorative bracket artifacts */
.ez-horoscope-block .eztype-flexbox-section::before,
.ez-horoscope-block .eztype-flexbox-section::after {
display: none;
}
/* -----------------------------------------------------------------------------
5.2 SECTION HEADING
----------------------------------------------------------------------------- */
.ez-horoscope-block .eztype-flexbox-heading {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-2xl);
font-weight: var(--ezhp-font-weight-normal);
font-style: italic;
text-align: center;
color: var(--ezhp-color-primary);
margin: 0 0 var(--ezhp-spacing-xl) 0;
position: relative;
}
/* Decorative lines around heading */
.ez-horoscope-block .eztype-flexbox-heading::before,
.ez-horoscope-block .eztype-flexbox-heading::after {
content: "—";
color: var(--ezhp-color-secondary);
margin: 0 var(--ezhp-spacing-md);
}
/* -----------------------------------------------------------------------------
5.3 FLEXBOX CONTAINER (GRID)
----------------------------------------------------------------------------- */
.ez-horoscope-block .eztype-flexbox-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--ezhp-spacing-lg);
}
/* -----------------------------------------------------------------------------
5.4 FLEXBOX ITEMS (PLANET CARDS)
----------------------------------------------------------------------------- */
.ez-horoscope-block .eztype-flexbox-item {
position: relative;
background: var(--ezhp-bg-card);
border-radius: var(--ezhp-radius-xl);
overflow: hidden;
box-shadow: var(--ezhp-shadow-md);
transition: transform var(--ezhp-transition-normal),
box-shadow var(--ezhp-transition-normal);
}
.ez-horoscope-block .eztype-flexbox-item:hover {
transform: translateY(-4px);
box-shadow: var(--ezhp-shadow-lg);
}
/* -----------------------------------------------------------------------------
5.5 PLANET CARD BACKGROUNDS
----------------------------------------------------------------------------- */
.ez-horoscope-block .eztype-flexbox-background {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.15;
transition: opacity var(--ezhp-transition-normal);
/* Override inline background images from API */
background-image: none !important;
}
/* Gradient overlay for backgrounds */
.ez-horoscope-block .eztype-flexbox-background::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, var(--ezhp-bg-card) 100%);
}
.ez-horoscope-block .eztype-flexbox-item:hover .eztype-flexbox-background {
opacity: 0.25;
}
/* -----------------------------------------------------------------------------
5.6 PLANET CARD CONTENT
----------------------------------------------------------------------------- */
.ez-horoscope-block .eztype-flexbox-content {
position: relative;
z-index: 10;
padding: var(--ezhp-spacing-lg);
}
.ez-horoscope-block .eztype-flexbox-content p {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-sm);
line-height: var(--ezhp-line-height-relaxed);
color: var(--ezhp-text-secondary);
margin: 0 0 var(--ezhp-spacing-sm) 0;
}
/* Planet heading (h5) */
.ez-horoscope-block .eztype-flexbox-content h5 {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-sm);
font-weight: var(--ezhp-font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--ezhp-letter-spacing-wider);
color: var(--ezhp-color-primary);
margin: 0 0 var(--ezhp-spacing-md) 0;
padding-bottom: var(--ezhp-spacing-sm);
border-bottom: var(--ezhp-border-width-medium) solid var(--ezhp-color-tertiary);
}
/* -----------------------------------------------------------------------------
5.7 INDIVIDUAL PLANET STYLING
----------------------------------------------------------------------------- */
/* Moon */
.ez-horoscope-block #moon-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-moon-accent);
}
.ez-horoscope-block #moon-item::before {
content: "☽";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-moon-accent);
opacity: 0.5;
z-index: 5;
}
/* Sun */
.ez-horoscope-block #sun-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-sun-accent);
}
.ez-horoscope-block #sun-item::before {
content: "☉";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-sun-accent);
opacity: 0.5;
z-index: 5;
}
/* Mars */
.ez-horoscope-block #mars-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-mars-accent);
}
.ez-horoscope-block #mars-item::before {
content: "♂";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-mars-accent);
opacity: 0.5;
z-index: 5;
}
/* Mercury */
.ez-horoscope-block #mercury-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-mercury-accent);
}
.ez-horoscope-block #mercury-item::before {
content: "☿";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-mercury-accent);
opacity: 0.5;
z-index: 5;
}
/* Jupiter */
.ez-horoscope-block #jupiter-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-jupiter-accent);
}
.ez-horoscope-block #jupiter-item::before {
content: "♃";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-jupiter-accent);
opacity: 0.5;
z-index: 5;
}
/* Venus */
.ez-horoscope-block #venus-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-venus-accent);
}
.ez-horoscope-block #venus-item::before {
content: "♀";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-venus-accent);
opacity: 0.5;
z-index: 5;
}
/* Saturn */
.ez-horoscope-block #saturn-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-saturn-accent);
}
.ez-horoscope-block #saturn-item::before {
content: "♄";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-saturn-accent);
opacity: 0.5;
z-index: 5;
}
/* Neptune */
.ez-horoscope-block #neptune-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-neptune-accent);
}
.ez-horoscope-block #neptune-item::before {
content: "♆";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-neptune-accent);
opacity: 0.5;
z-index: 5;
}
/* Uranus */
.ez-horoscope-block #uranus-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-uranus-accent);
}
.ez-horoscope-block #uranus-item::before {
content: "♅";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-uranus-accent);
opacity: 0.5;
z-index: 5;
}
/* Pluto */
.ez-horoscope-block #pluto-item .eztype-flexbox-content h5 {
border-bottom-color: var(--ezhp-planet-pluto-accent);
}
.ez-horoscope-block #pluto-item::before {
content: "♇";
position: absolute;
top: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
font-size: var(--ezhp-font-size-2xl);
color: var(--ezhp-planet-pluto-accent);
opacity: 0.5;
z-index: 5;
}
/* =============================================================================
6. CALL-TO-ACTION COMPONENTS
============================================================================= */
/* -----------------------------------------------------------------------------
6.1 CTA WRAPPER
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-daily-cta {
margin: var(--ezhp-spacing-xl) 0;
padding: var(--ezhp-spacing-xl);
background: var(--ezhp-cta-bg);
border: var(--ezhp-border-width-thin) solid var(--ezhp-cta-border);
border-radius: var(--ezhp-radius-xl);
}
/* -----------------------------------------------------------------------------
6.2 CTA ALIGNMENT
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-daily-cta-left {
text-align: left;
}
.ez-horoscope-block .ez-daily-cta-center {
text-align: center;
}
.ez-horoscope-block .ez-daily-cta-right {
text-align: right;
}
/* -----------------------------------------------------------------------------
6.3 CTA HEADER
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-daily-cta-header {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-xl);
font-weight: var(--ezhp-font-weight-normal);
font-style: italic;
color: var(--ezhp-color-primary);
margin: 0 0 var(--ezhp-spacing-md) 0;
}
/* -----------------------------------------------------------------------------
6.4 CTA TEXT
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-daily-cta-text {
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-secondary);
margin-bottom: var(--ezhp-spacing-md);
}
/* -----------------------------------------------------------------------------
6.5 CTA IMAGE
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-daily-cta-image {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto var(--ezhp-spacing-md) auto;
border-radius: var(--ezhp-radius-lg);
box-shadow: var(--ezhp-shadow-md);
}
.ez-horoscope-block .ez-daily-cta-left .ez-daily-cta-image {
margin-left: 0;
margin-right: auto;
}
.ez-horoscope-block .ez-daily-cta-right .ez-daily-cta-image {
margin-left: auto;
margin-right: 0;
}
.ez-horoscope-block .ez-daily-cta-image-link {
display: block;
margin-bottom: var(--ezhp-spacing-md);
}
.ez-horoscope-block .ez-daily-cta-image-link img {
transition: opacity var(--ezhp-transition-fast),
transform var(--ezhp-transition-normal);
}
.ez-horoscope-block .ez-daily-cta-image-link:hover img {
opacity: 0.9;
transform: scale(1.02);
}
/* -----------------------------------------------------------------------------
6.6 CTA BUTTON - Outlined style (Soul Spot inspired)
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-daily-cta-button {
display: inline-block;
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-sm);
font-weight: var(--ezhp-font-weight-medium);
text-transform: uppercase;
letter-spacing: var(--ezhp-letter-spacing-wider);
text-decoration: none;
color: var(--ezhp-cta-button-text);
background: var(--ezhp-cta-button-bg);
border: var(--ezhp-border-width-medium) solid var(--ezhp-cta-button-border);
border-radius: var(--ezhp-radius-sm);
padding: var(--ezhp-spacing-sm) var(--ezhp-spacing-xl);
transition: all var(--ezhp-transition-normal);
}
.ez-horoscope-block .ez-daily-cta-button:hover {
background: var(--ezhp-cta-button-hover-bg);
color: var(--ezhp-cta-button-hover-text);
transform: translateY(-2px);
box-shadow: var(--ezhp-shadow-md);
}
/* -----------------------------------------------------------------------------
6.7 CTA LINK
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-daily-cta-link {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-base);
font-weight: var(--ezhp-font-weight-medium);
color: var(--ezhp-color-primary);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--ezhp-transition-fast);
}
.ez-horoscope-block .ez-daily-cta-link:hover {
color: var(--ezhp-color-secondary);
text-decoration: none;
}
/* -----------------------------------------------------------------------------
6.8 BUILT-IN API CTA (.ez-cta)
----------------------------------------------------------------------------- */
.ez-horoscope-block .ez-cta {
margin: var(--ezhp-spacing-xl) 0;
padding: var(--ezhp-spacing-lg);
background: var(--ezhp-bg-mystical);
border: var(--ezhp-border-width-thin) solid var(--ezhp-color-tertiary);
border-radius: var(--ezhp-radius-lg);
text-align: center;
}
.ez-horoscope-block .ez-cta h3 {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-lg);
font-weight: var(--ezhp-font-weight-normal);
font-style: italic;
color: var(--ezhp-text-secondary);
margin: 0 0 var(--ezhp-spacing-md) 0;
text-transform: none;
letter-spacing: normal;
}
.ez-horoscope-block .ez-cta .btn,
.ez-horoscope-block .ez-cta .btn-primary {
display: inline-block;
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-sm);
font-weight: var(--ezhp-font-weight-medium);
text-transform: uppercase;
letter-spacing: var(--ezhp-letter-spacing-wider);
text-decoration: none;
color: var(--ezhp-cta-button-text);
background: var(--ezhp-cta-button-bg);
border: var(--ezhp-border-width-medium) solid var(--ezhp-cta-button-border);
border-radius: var(--ezhp-radius-sm);
padding: var(--ezhp-spacing-sm) var(--ezhp-spacing-xl);
transition: all var(--ezhp-transition-normal);
}
.ez-horoscope-block .ez-cta .btn:hover,
.ez-horoscope-block .ez-cta .btn-primary:hover {
background: var(--ezhp-cta-button-hover-bg);
color: var(--ezhp-cta-button-hover-text);
}
/* =============================================================================
7. LISTS & TYPOGRAPHY
============================================================================= */
/* -----------------------------------------------------------------------------
7.1 UNORDERED LISTS
----------------------------------------------------------------------------- */
.ez-horoscope-block ul {
list-style-type: none;
margin: var(--ezhp-spacing-md) 0;
padding: 0;
}
.ez-horoscope-block ul li {
position: relative;
padding-left: var(--ezhp-spacing-xl);
margin-bottom: var(--ezhp-spacing-sm);
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);
}
/* Custom bullet */
.ez-horoscope-block ul li::before {
content: "✦";
position: absolute;
left: 0;
top: 0;
color: var(--ezhp-color-secondary);
font-size: var(--ezhp-font-size-sm);
}
/* -----------------------------------------------------------------------------
7.2 ORDERED LISTS
----------------------------------------------------------------------------- */
.ez-horoscope-block ol {
list-style-type: none;
counter-reset: ezhp-step;
margin: var(--ezhp-spacing-md) 0;
padding: 0;
}
.ez-horoscope-block ol li {
position: relative;
counter-increment: ezhp-step;
padding-left: var(--ezhp-spacing-2xl);
margin-bottom: var(--ezhp-spacing-md);
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);
}
/* Numbered indicator */
.ez-horoscope-block ol li::before {
content: counter(ezhp-step);
position: absolute;
left: 0;
top: 2px;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--ezhp-color-primary);
font-size: var(--ezhp-font-size-sm);
font-weight: var(--ezhp-font-weight-semibold);
border: var(--ezhp-border-width-medium) solid var(--ezhp-color-tertiary);
border-radius: var(--ezhp-radius-full);
}
/* -----------------------------------------------------------------------------
7.3 INLINE EMPHASIS
----------------------------------------------------------------------------- */
.ez-horoscope-block strong {
font-weight: var(--ezhp-font-weight-semibold);
color: var(--ezhp-text-primary);
}
.ez-horoscope-block em {
font-style: italic;
color: var(--ezhp-color-primary);
}
/* =============================================================================
8. PODCAST SECTION
============================================================================= */
.ez-horoscope-block #podcast-section {
margin: var(--ezhp-spacing-2xl) 0;
}
.ez-horoscope-block .ez-podcast {
padding: var(--ezhp-spacing-lg);
background: var(--ezhp-bg-secondary);
border-radius: var(--ezhp-radius-lg);
}
/* =============================================================================
9. RTL (RIGHT-TO-LEFT) SUPPORT
============================================================================= */
/* Block-level RTL */
.ez-horoscope-block[dir="rtl"] {
text-align: right;
}
/* Heading decorations */
.ez-horoscope-block[dir="rtl"] .ez-enneagram-section h2::before {
margin-right: 0;
margin-left: var(--ezhp-spacing-sm);
}
/* List padding */
.ez-horoscope-block[dir="rtl"] ul li,
.ez-horoscope-block[dir="rtl"] ol li {
padding-left: 0;
padding-right: var(--ezhp-spacing-xl);
}
.ez-horoscope-block[dir="rtl"] ul li::before,
.ez-horoscope-block[dir="rtl"] ol li::before {
left: auto;
right: 0;
}
/* Planet icons */
.ez-horoscope-block[dir="rtl"] .eztype-flexbox-item::before {
right: auto;
left: var(--ezhp-spacing-md);
}
/* CTA alignment */
.ez-horoscope-block[dir="rtl"] .ez-daily-cta-left {
text-align: right;
}
.ez-horoscope-block[dir="rtl"] .ez-daily-cta-right {
text-align: left;
}
/* Inline image floats */
.ez-horoscope-block[dir="rtl"] .ez-daily-inline-image[style*="float:left"] {
float: right !important;
margin: 0 0 var(--ezhp-spacing-md) var(--ezhp-spacing-md) !important;
}
.ez-horoscope-block[dir="rtl"] .ez-daily-inline-image[style*="float:right"] {
float: left !important;
margin: 0 var(--ezhp-spacing-md) var(--ezhp-spacing-md) 0 !important;
}
/* =============================================================================
10. RESPONSIVE DESIGN
============================================================================= */
/* Tablet */
@media (max-width: 992px) {
.ez-horoscope-block {
--ezhp-font-size-4xl: 2rem;
--ezhp-font-size-3xl: 1.75rem;
--ezhp-font-size-2xl: 1.375rem;
}
.ez-horoscope-block .eztype-flexbox-container {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
/* Tablet portrait and below */
@media (max-width: 768px) {
.ez-horoscope-block {
--ezhp-font-size-4xl: 1.75rem;
--ezhp-font-size-3xl: 1.5rem;
--ezhp-font-size-2xl: 1.25rem;
--ezhp-spacing-2xl: 2rem;
--ezhp-spacing-xl: 1.5rem;
padding: var(--ezhp-spacing-sm);
}
.ez-horoscope-block .ez-hero-content {
padding: var(--ezhp-spacing-md);
}
.ez-horoscope-block .eztype-flexbox-container {
grid-template-columns: 1fr;
}
.ez-horoscope-block .eztype-flexbox-heading::before,
.ez-horoscope-block .eztype-flexbox-heading::after {
display: none;
}
/* Inline images go full width */
.ez-horoscope-block .ez-daily-inline-image {
max-width: 100% !important;
float: none !important;
margin: 0 0 var(--ezhp-spacing-md) 0 !important;
}
.ez-horoscope-block #guidance-section,
.ez-horoscope-block #advice-section,
.ez-horoscope-block #conclusion-section {
padding: var(--ezhp-spacing-md);
background: rgba(255, 255, 255, 0.95);
}
/* FIX: Remove left border artifacts on mobile - but NOT conclusion section */
.ez-horoscope-block .ez-enneagram-section:not(#conclusion-section),
.ez-horoscope-block .eztype-flexbox-section,
.ez-horoscope-block .eztype-flexbox-item,
.ez-horoscope-block .eztype-flexbox-container,
.ez-horoscope-block #guidance-section,
.ez-horoscope-block #advice-section {
border-left: none !important;
border-left-width: 0 !important;
}
/* PRESERVE the gold border on conclusion section */
.ez-horoscope-block #conclusion-section {
border: 2px solid var(--ezhp-color-secondary) !important;
}
/* Remove pseudo-elements that cause artifacts on mobile */
.ez-horoscope-block .ez-enneagram-section::before,
.ez-horoscope-block .ez-enneagram-section::after,
.ez-horoscope-block .eztype-flexbox-section::before,
.ez-horoscope-block .eztype-flexbox-section::after {
display: none !important;
}
/* Keep planet icons positioned correctly */
.ez-horoscope-block .eztype-flexbox-item::before {
left: auto !important;
right: 1rem !important;
border: none !important;
background: none !important;
width: auto !important;
height: auto !important;
}
/* Planet cards get subtle border all-around on mobile */
.ez-horoscope-block .eztype-flexbox-item {
border: 1px solid rgba(155, 164, 196, 0.2) !important;
}
}
/* Mobile */
@media (max-width: 480px) {
.ez-horoscope-block {
--ezhp-font-size-4xl: 1.5rem;
--ezhp-font-size-3xl: 1.375rem;
--ezhp-font-size-2xl: 1.125rem;
--ezhp-font-size-lg: 1rem;
--ezhp-spacing-lg: 1rem;
--ezhp-spacing-md: 0.75rem;
}
.ez-horoscope-block .ez-daily-cta {
padding: var(--ezhp-spacing-md);
}
.ez-horoscope-block .ez-daily-cta-button {
display: block;
width: 100%;
text-align: center;
}
.ez-horoscope-block .eztype-flexbox-item::before {
font-size: var(--ezhp-font-size-lg);
}
/* FIX: Ensure no left border artifacts on small mobile - except conclusion */
.ez-horoscope-block .ez-enneagram-section:not(#conclusion-section),
.ez-horoscope-block .eztype-flexbox-section,
.ez-horoscope-block .eztype-flexbox-item {
border-left: none !important;
border-left-width: 0 !important;
}
/* PRESERVE the gold border on conclusion section */
.ez-horoscope-block #conclusion-section {
border: 2px solid var(--ezhp-color-secondary) !important;
}
}
/* =============================================================================
11. PRINT STYLES
============================================================================= */
@media print {
.ez-horoscope-block {
font-size: 11pt;
line-height: 1.5;
color: #000;
background: #fff;
padding: 0;
}
.ez-horoscope-block .ez-hero {
background-image: none !important;
border-radius: 0;
}
.ez-horoscope-block .ez-hero-overlay {
display: none;
}
.ez-horoscope-block .ez-hero h1 {
font-size: 18pt;
color: #000;
font-style: normal;
}
.ez-horoscope-block .ez-enneagram-section h2 {
font-size: 14pt;
color: #000;
border-bottom-color: #000;
}
.ez-horoscope-block .ez-enneagram-section h2::before {
content: none;
}
.ez-horoscope-block #guidance-section,
.ez-horoscope-block #advice-section,
.ez-horoscope-block #conclusion-section {
background: none;
border: 1px solid #ccc;
box-shadow: none;
}
.ez-horoscope-block .eztype-flexbox-container {
display: block;
}
.ez-horoscope-block .eztype-flexbox-item {
background: none;
border: 1px solid #ccc;
margin-bottom: 1rem;
page-break-inside: avoid;
}
.ez-horoscope-block .eztype-flexbox-item::before {
display: none;
}
.ez-horoscope-block .eztype-flexbox-background {
display: none;
}
.ez-horoscope-block .ez-daily-cta,
.ez-horoscope-block .ez-cta {
background: none;
border: 1px dashed #999;
}
.ez-horoscope-block .ez-daily-cta-button,
.ez-horoscope-block .ez-cta .btn {
border: 1px solid #000;
background: none;
color: #000;
}
}
/* =============================================================================
12. 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-horoscope-block,
.ez-horoscope-block.dark-mode {
--ezhp-color-primary: #8B9BB4;
--ezhp-color-secondary: #D4BC7A;
--ezhp-color-tertiary: #6B7A99;
--ezhp-color-quaternary: #1A1B26;
--ezhp-bg-primary: transparent;
--ezhp-bg-secondary: rgba(139, 155, 180, 0.08);
--ezhp-bg-accent: rgba(212, 188, 122, 0.08);
--ezhp-bg-mystical: linear-gradient(135deg, rgba(107, 122, 153, 0.08) 0%, rgba(139, 155, 180, 0.06) 100%);
--ezhp-bg-card: rgba(45, 49, 66, 0.6);
--ezhp-bg-card-hover: rgba(45, 49, 66, 0.8);
--ezhp-text-primary: #E8EAF0;
--ezhp-text-secondary: #B8BCC8;
--ezhp-text-muted: rgba(232, 234, 240, 0.5);
--ezhp-text-accent: #9BA4C4;
--ezhp-section-guidance-bg: rgba(93, 107, 138, 0.1);
--ezhp-section-advice-bg: rgba(201, 169, 98, 0.08);
--ezhp-section-conclusion-bg: linear-gradient(135deg, rgba(93, 107, 138, 0.1) 0%, rgba(201, 169, 98, 0.08) 100%);
--ezhp-cta-bg: rgba(93, 107, 138, 0.1);
--ezhp-cta-border: rgba(107, 122, 153, 0.4);
--ezhp-cta-button-text: #9BA4C4;
--ezhp-cta-button-border: #6B7A99;
--ezhp-cta-button-hover-bg: #6B7A99;
--ezhp-cta-button-hover-text: #E8EAF0;
--ezhp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--ezhp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--ezhp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
--ezhp-shadow-glow: 0 0 20px rgba(212, 188, 122, 0.15);
}
/* =============================================================================
END OF DAILY HOROSCOPE MYSTICAL THEME STYLESHEET
COLOR REFERENCE:
----------------
Primary (dusty blue-purple): #5D6B8A
Secondary (warm gold): #C9A962
Tertiary (soft lavender): #9BA4C4
Quaternary (deep navy): #2D3142
TEXT COLORS (Enhanced Contrast):
--------------------------------
Primary text: #1a1f2e
Secondary text: #2d3448
Muted text: #4a5568
Accent text: #3d4a66
PLANET ACCENT COLORS:
---------------------
Moon: #9BA4C4 (lavender)
Sun: #E6B85C (gold)
Mars: #C75B5B (red)
Mercury: #7B9E87 (sage green)
Jupiter: #8B7AAD (purple)
Venus: #D4A5A5 (pink)
Saturn: #6B7A8A (slate)
Neptune: #5B8FAD (ocean blue)
Uranus: #5BADC4 (teal)
Pluto: #8A6B8A (mauve)
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">
============================================================================= */
