/* =============================================================================
EZ HOROSCOPE - CHINESE 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 date picker visibility
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 & Form
2.1 Main Block Wrapper
2.2 Form Layout
2.3 Date Input (mobile-optimized)
2.4 Submit Button
2.5 Result Container
3. Hero Section
3.1 Hero Wrapper
3.2 Hero Content
3.3 Hero Overlay (Background Mode)
3.4 Inline Image (Inline Mode)
4. Horoscope Content
4.1 Main Section Wrapper
4.2 Title (h2)
4.3 Date Display
4.4 Intro Paragraph
4.5 Subtitles (h3)
4.6 Detail Paragraphs
4.7 Poetic Detail Styling
5. Lists
5.1 Tips List (ul)
5.2 Steps List (ol)
5.3 List Items
6. Highlighted Elements (Lucky Info)
6.1 Lucky Colors
6.2 Lucky Directions
6.3 Lucky Numbers
7. Special Sections
7.1 Wisdom Quote
7.2 Affirmation
8. RTL (Right-to-Left) Support
9. Responsive Design (mobile contrast fixes included)
10. Editor-Specific Styles
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
============================================================================= */
.chinese-horoscope-block,
.chinese-horoscope {
/* -------------------------------------------------------------------------
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;
/* Background colors - Enhanced opacity for light/cream backgrounds */
--ezhp-bg-primary: transparent;
--ezhp-bg-secondary: rgba(255, 255, 255, 0.85);
--ezhp-bg-accent: rgba(255, 255, 255, 0.9);
--ezhp-bg-mystical: rgba(255, 255, 255, 0.9);
/* 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;
/* Lucky element highlight colors - mystical themed */
--ezhp-lucky-colors-bg: rgba(201, 169, 98, 0.15);
--ezhp-lucky-colors-text: #8B7355;
--ezhp-lucky-colors-border: #C9A962;
--ezhp-lucky-directions-bg: rgba(93, 107, 138, 0.12);
--ezhp-lucky-directions-text: #5D6B8A;
--ezhp-lucky-directions-border: #7B8AAD;
--ezhp-lucky-numbers-bg: rgba(155, 164, 196, 0.2);
--ezhp-lucky-numbers-text: #4A5578;
--ezhp-lucky-numbers-border: #9BA4C4;
/* Wisdom & Affirmation - enhanced contrast */
--ezhp-wisdom-bg: rgba(255, 255, 255, 0.9);
--ezhp-wisdom-border: #7B8AAD;
--ezhp-wisdom-text: #2d3448;
--ezhp-affirmation-bg: rgba(255, 255, 255, 0.95);
--ezhp-affirmation-border: #C9A962;
--ezhp-affirmation-text: #1a1f2e;
/* Form colors - Enhanced for mobile visibility */
--ezhp-input-bg: #FFFFFF;
--ezhp-input-border: #9BA4C4;
--ezhp-input-text: #1a1f2e;
--ezhp-input-focus-border: #5D6B8A;
--ezhp-input-focus-shadow: rgba(93, 107, 138, 0.25);
/* Button - outlined style like Soul Spot */
--ezhp-button-bg: transparent;
--ezhp-button-text: #5D6B8A;
--ezhp-button-border: #5D6B8A;
--ezhp-button-hover-bg: #5D6B8A;
--ezhp-button-hover-text: #FFFFFF;
--ezhp-button-hover-border: #5D6B8A;
/* Alternative solid button */
--ezhp-button-solid-bg: #5D6B8A;
--ezhp-button-solid-text: #FFFFFF;
--ezhp-button-solid-hover-bg: #4A5578;
/* -------------------------------------------------------------------------
1.2 TYPOGRAPHY
------------------------------------------------------------------------- */
/* Font families - elegant, spiritual feel */
--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;
/* 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.25;
--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.05em;
--ezhp-letter-spacing-wider: 0.1em;
--ezhp-letter-spacing-widest: 0.15em;
/* -------------------------------------------------------------------------
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;
/* Section spacing */
--ezhp-section-gap: var(--ezhp-spacing-xl);
--ezhp-paragraph-gap: var(--ezhp-spacing-md);
/* -------------------------------------------------------------------------
1.4 BORDERS & SHADOWS
------------------------------------------------------------------------- */
/* Border radius */
--ezhp-radius-sm: 4px;
--ezhp-radius-md: 8px;
--ezhp-radius-lg: 12px;
--ezhp-radius-xl: 16px;
--ezhp-radius-full: 9999px;
/* Border widths */
--ezhp-border-width-thin: 1px;
--ezhp-border-width-medium: 2px;
--ezhp-border-width-thick: 3px;
/* Box shadows - soft, dreamy */
--ezhp-shadow-sm: 0 1px 3px rgba(93, 107, 138, 0.08);
--ezhp-shadow-md: 0 4px 12px rgba(93, 107, 138, 0.12);
--ezhp-shadow-lg: 0 8px 24px rgba(93, 107, 138, 0.15);
--ezhp-shadow-xl: 0 16px 48px rgba(93, 107, 138, 0.2);
--ezhp-shadow-glow: 0 0 20px rgba(201, 169, 98, 0.3);
/* -------------------------------------------------------------------------
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 & FORM
============================================================================= */
/* -----------------------------------------------------------------------------
2.1 MAIN BLOCK WRAPPER
----------------------------------------------------------------------------- */
.chinese-horoscope-block {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-base);
line-height: var(--ezhp-line-height-normal);
color: var(--ezhp-text-primary);
background: var(--ezhp-bg-primary);
}
/* -----------------------------------------------------------------------------
2.2 FORM LAYOUT
----------------------------------------------------------------------------- */
.chinese-horoscope-block .ezhp-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ezhp-spacing-md);
margin-bottom: var(--ezhp-spacing-xl);
padding: var(--ezhp-spacing-lg);
background: var(--ezhp-bg-mystical);
border-radius: var(--ezhp-radius-lg);
border: var(--ezhp-border-width-thin) solid rgba(155, 164, 196, 0.3);
}
/* Form label */
.chinese-horoscope-block .ezhp-form label {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-base);
font-weight: var(--ezhp-font-weight-medium);
color: var(--ezhp-text-secondary);
letter-spacing: var(--ezhp-letter-spacing-wide);
}
/* -----------------------------------------------------------------------------
2.3 DATE INPUT - Simple styling like numerology block
----------------------------------------------------------------------------- */
.chinese-horoscope-block .ezhp-form input[type="date"],
.chinese-horoscope-block .ezhp-date-input {
padding: var(--ezhp-spacing-sm) var(--ezhp-spacing-md);
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-base);
color: var(--ezhp-input-text);
background: var(--ezhp-input-bg);
border: var(--ezhp-border-width-medium) solid var(--ezhp-input-border);
border-radius: var(--ezhp-radius-md);
min-width: 180px;
transition: border-color var(--ezhp-transition-normal),
box-shadow var(--ezhp-transition-normal);
}
.chinese-horoscope-block .ezhp-form input[type="date"]:focus,
.chinese-horoscope-block .ezhp-date-input:focus {
outline: none;
border-color: var(--ezhp-color-secondary);
box-shadow: 0 0 0 3px var(--ezhp-input-focus-shadow);
}
.chinese-horoscope-block .ezhp-form input[type="date"]:hover,
.chinese-horoscope-block .ezhp-date-input:hover {
border-color: var(--ezhp-color-primary);
}
/* -----------------------------------------------------------------------------
2.4 SUBMIT BUTTON - Outlined Style (Soul Spot inspired)
----------------------------------------------------------------------------- */
.chinese-horoscope-block .ezhp-form button.ezhp-fetch-button,
.chinese-horoscope-block .ezhp-form .wp-element-button {
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);
color: var(--ezhp-button-text);
background: var(--ezhp-button-bg);
border: var(--ezhp-border-width-medium) solid var(--ezhp-button-border);
border-radius: var(--ezhp-radius-sm);
padding: var(--ezhp-spacing-sm) var(--ezhp-spacing-xl);
cursor: pointer;
transition: all var(--ezhp-transition-normal);
}
.chinese-horoscope-block .ezhp-form button.ezhp-fetch-button:hover,
.chinese-horoscope-block .ezhp-form .wp-element-button:hover {
background: var(--ezhp-button-hover-bg);
color: var(--ezhp-button-hover-text);
border-color: var(--ezhp-button-hover-border);
}
.chinese-horoscope-block .ezhp-form button.ezhp-fetch-button:active,
.chinese-horoscope-block .ezhp-form .wp-element-button:active {
transform: translateY(1px);
}
.chinese-horoscope-block .ezhp-form button.ezhp-fetch-button:focus,
.chinese-horoscope-block .ezhp-form .wp-element-button:focus {
outline: none;
box-shadow: 0 0 0 4px var(--ezhp-input-focus-shadow);
}
/* -----------------------------------------------------------------------------
2.5 RESULT CONTAINER
----------------------------------------------------------------------------- */
.chinese-horoscope-block .chinese-horoscope-result {
margin-top: var(--ezhp-spacing-lg);
}
/* Loading state */
.chinese-horoscope-block .chinese-horoscope-result > div:only-child {
padding: var(--ezhp-spacing-xl);
text-align: center;
color: var(--ezhp-text-muted);
font-style: italic;
font-family: var(--ezhp-font-family-accent);
}
/* =============================================================================
3. HERO SECTION
============================================================================= */
/* -----------------------------------------------------------------------------
3.1 HERO WRAPPER
----------------------------------------------------------------------------- */
.chinese-horoscope .ez-hero,
.chinese-horoscope-block .ez-hero {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
margin-bottom: var(--ezhp-spacing-2xl);
border-radius: var(--ezhp-radius-xl);
}
/* -----------------------------------------------------------------------------
3.2 HERO CONTENT
----------------------------------------------------------------------------- */
.chinese-horoscope .ez-hero-content,
.chinese-horoscope-block .ez-hero-content {
position: relative;
z-index: 10;
padding: var(--ezhp-spacing-xl);
}
.chinese-horoscope .ez-hero-text,
.chinese-horoscope-block .ez-hero-text {
/* Clearfix for floated inline images */
}
.chinese-horoscope .ez-hero-text::after,
.chinese-horoscope-block .ez-hero-text::after {
content: "";
display: block;
clear: both;
}
/* -----------------------------------------------------------------------------
3.3 HERO OVERLAY (Background Mode) - Mystical blue-purple tint
----------------------------------------------------------------------------- */
.chinese-horoscope .ez-hero-overlay,
.chinese-horoscope-block .ez-hero-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
/* Text readability over hero images */
.chinese-horoscope .ez-hero[style*="background-image"] .ez-hero-content,
.chinese-horoscope-block .ez-hero[style*="background-image"] .ez-hero-content {
text-shadow: 0 2px 8px rgba(45, 49, 66, 0.4);
}
/* Hero text when over dark background */
.chinese-horoscope .ez-hero[style*="background-image"] .horoscope-title,
.chinese-horoscope .ez-hero[style*="background-image"] .horoscope-date,
.chinese-horoscope .ez-hero[style*="background-image"] .horoscope-intro {
color: var(--ezhp-text-light);
}
/* -----------------------------------------------------------------------------
3.4 INLINE IMAGE (Inline Mode)
----------------------------------------------------------------------------- */
.chinese-horoscope .ez-daily-inline-image,
.chinese-horoscope-block .ez-daily-inline-image {
position: relative;
}
.chinese-horoscope .ez-daily-inline-image img,
.chinese-horoscope-block .ez-daily-inline-image img {
display: block;
width: 100%;
height: auto;
border-radius: var(--ezhp-radius-lg);
box-shadow: var(--ezhp-shadow-lg);
}
/* =============================================================================
4. HOROSCOPE CONTENT
============================================================================= */
/* -----------------------------------------------------------------------------
4.1 MAIN SECTION WRAPPER
----------------------------------------------------------------------------- */
.chinese-horoscope,
section.chinese-horoscope {
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);
}
/* -----------------------------------------------------------------------------
4.2 TITLE (h2) - Elegant, dreamy headline
----------------------------------------------------------------------------- */
.chinese-horoscope h2.horoscope-title {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-3xl);
font-weight: var(--ezhp-font-weight-light);
font-style: italic;
line-height: var(--ezhp-line-height-tight);
letter-spacing: var(--ezhp-letter-spacing-normal);
color: var(--ezhp-text-accent);
margin: 0 0 var(--ezhp-spacing-sm) 0;
}
/* -----------------------------------------------------------------------------
4.3 DATE DISPLAY
----------------------------------------------------------------------------- */
.chinese-horoscope p.horoscope-date {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-xs);
font-weight: var(--ezhp-font-weight-medium);
color: var(--ezhp-text-muted);
text-transform: uppercase;
letter-spacing: var(--ezhp-letter-spacing-widest);
margin: 0 0 var(--ezhp-spacing-lg) 0;
}
/* -----------------------------------------------------------------------------
4.4 INTRO PARAGRAPH - Mystical accent box
----------------------------------------------------------------------------- */
.chinese-horoscope p.horoscope-intro {
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);
margin: 0 0 var(--ezhp-spacing-2xl) 0;
padding: var(--ezhp-spacing-lg) var(--ezhp-spacing-xl);
background: var(--ezhp-bg-mystical);
border-radius: var(--ezhp-radius-lg);
border-left: var(--ezhp-border-width-thick) solid var(--ezhp-color-secondary);
position: relative;
}
/* Subtle golden glow effect */
.chinese-horoscope p.horoscope-intro::before {
content: "";
position: absolute;
left: -2px;
top: 20%;
height: 60%;
width: 4px;
background: var(--ezhp-color-secondary);
filter: blur(8px);
opacity: 0.5;
}
/* -----------------------------------------------------------------------------
4.5 SUBTITLES (h3) - Clean, mystical headers
----------------------------------------------------------------------------- */
.chinese-horoscope h3.horoscope-subtitle {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-lg);
font-weight: var(--ezhp-font-weight-medium);
text-transform: uppercase;
letter-spacing: var(--ezhp-letter-spacing-wider);
line-height: var(--ezhp-line-height-tight);
color: var(--ezhp-color-primary);
margin: var(--ezhp-spacing-2xl) 0 var(--ezhp-spacing-md) 0;
padding-bottom: var(--ezhp-spacing-sm);
border-bottom: var(--ezhp-border-width-thin) solid var(--ezhp-color-tertiary);
}
/* Decorative dot before subtitle */
.chinese-horoscope h3.horoscope-subtitle::before {
content: "✦";
margin-right: var(--ezhp-spacing-sm);
color: var(--ezhp-color-secondary);
font-size: var(--ezhp-font-size-sm);
}
/* First subtitle spacing */
.chinese-horoscope .ez-hero + h3.horoscope-subtitle,
.chinese-horoscope h3.horoscope-subtitle:first-of-type {
margin-top: var(--ezhp-spacing-lg);
}
/* -----------------------------------------------------------------------------
4.6 DETAIL PARAGRAPHS
----------------------------------------------------------------------------- */
.chinese-horoscope p.horoscope-detail {
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);
margin: 0 0 var(--ezhp-spacing-md) 0;
}
/* -----------------------------------------------------------------------------
4.7 POETIC DETAIL STYLING
----------------------------------------------------------------------------- */
.chinese-horoscope p.poetic-detail {
font-family: var(--ezhp-font-family-accent);
line-height: var(--ezhp-line-height-loose);
color: var(--ezhp-text-secondary);
}
/* =============================================================================
5. LISTS
============================================================================= */
/* -----------------------------------------------------------------------------
5.1 TIPS LIST (ul) - Mystical bullets
----------------------------------------------------------------------------- */
.chinese-horoscope ul.horoscope-tips {
list-style-type: none;
margin: var(--ezhp-spacing-md) 0 var(--ezhp-spacing-xl) 0;
padding: 0;
}
.chinese-horoscope ul.horoscope-tips li {
position: relative;
padding-left: var(--ezhp-spacing-2xl);
margin-bottom: var(--ezhp-spacing-md);
line-height: var(--ezhp-line-height-relaxed);
}
/* Moon phase bullet */
.chinese-horoscope ul.horoscope-tips li::before {
content: "☽";
position: absolute;
left: 0;
top: 0;
color: var(--ezhp-color-secondary);
font-size: var(--ezhp-font-size-lg);
}
/* -----------------------------------------------------------------------------
5.2 STEPS LIST (ol) - Elegant numbered circles
----------------------------------------------------------------------------- */
.chinese-horoscope ol.horoscope-steps {
list-style-type: none;
counter-reset: horoscope-step;
margin: var(--ezhp-spacing-md) 0 var(--ezhp-spacing-xl) 0;
padding: 0;
}
.chinese-horoscope ol.horoscope-steps li {
position: relative;
counter-increment: horoscope-step;
padding-left: var(--ezhp-spacing-2xl);
margin-bottom: var(--ezhp-spacing-lg);
line-height: var(--ezhp-line-height-relaxed);
}
/* Numbered indicator - outlined style */
.chinese-horoscope ol.horoscope-steps li::before {
content: counter(horoscope-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);
}
/* -----------------------------------------------------------------------------
5.3 LIST ITEMS (General)
----------------------------------------------------------------------------- */
.chinese-horoscope li {
font-family: var(--ezhp-font-family-base);
font-size: var(--ezhp-font-size-base);
color: var(--ezhp-text-primary);
}
/* =============================================================================
6. HIGHLIGHTED ELEMENTS (LUCKY INFO)
============================================================================= */
/* -----------------------------------------------------------------------------
6.1 LUCKY COLORS - Gold/amber tones
----------------------------------------------------------------------------- */
.chinese-horoscope .lucky-colors {
display: inline;
padding: var(--ezhp-spacing-xs) var(--ezhp-spacing-sm);
background: var(--ezhp-lucky-colors-bg);
color: var(--ezhp-lucky-colors-text);
border-radius: var(--ezhp-radius-sm);
font-weight: var(--ezhp-font-weight-medium);
border-bottom: var(--ezhp-border-width-medium) solid var(--ezhp-lucky-colors-border);
}
/* -----------------------------------------------------------------------------
6.2 LUCKY DIRECTIONS - Soft blue-purple
----------------------------------------------------------------------------- */
.chinese-horoscope .lucky-directions {
display: inline;
padding: var(--ezhp-spacing-xs) var(--ezhp-spacing-sm);
background: var(--ezhp-lucky-directions-bg);
color: var(--ezhp-lucky-directions-text);
border-radius: var(--ezhp-radius-sm);
font-weight: var(--ezhp-font-weight-medium);
border-bottom: var(--ezhp-border-width-medium) solid var(--ezhp-lucky-directions-border);
}
/* -----------------------------------------------------------------------------
6.3 LUCKY NUMBERS - Lavender accent
----------------------------------------------------------------------------- */
.chinese-horoscope .lucky-numbers {
display: inline;
padding: var(--ezhp-spacing-xs) var(--ezhp-spacing-sm);
background: var(--ezhp-lucky-numbers-bg);
color: var(--ezhp-lucky-numbers-text);
border-radius: var(--ezhp-radius-sm);
font-weight: var(--ezhp-font-weight-bold);
font-family: var(--ezhp-font-family-accent);
letter-spacing: var(--ezhp-letter-spacing-wide);
border-bottom: var(--ezhp-border-width-medium) solid var(--ezhp-lucky-numbers-border);
}
/* =============================================================================
7. SPECIAL SECTIONS
============================================================================= */
/* -----------------------------------------------------------------------------
7.1 WISDOM QUOTE - Mystical card style
----------------------------------------------------------------------------- */
.chinese-horoscope p.horoscope-wisdom {
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-wisdom-text);
margin: var(--ezhp-spacing-2xl) 0;
padding: var(--ezhp-spacing-xl);
background: var(--ezhp-wisdom-bg);
border-radius: var(--ezhp-radius-lg);
border: var(--ezhp-border-width-thin) solid rgba(155, 164, 196, 0.3);
position: relative;
text-align: center;
}
/* Decorative star accents */
.chinese-horoscope p.horoscope-wisdom::before,
.chinese-horoscope p.horoscope-wisdom::after {
position: absolute;
color: var(--ezhp-color-secondary);
opacity: 0.6;
font-size: var(--ezhp-font-size-xl);
}
.chinese-horoscope p.horoscope-wisdom::before {
content: "✧";
top: var(--ezhp-spacing-md);
left: var(--ezhp-spacing-md);
}
.chinese-horoscope p.horoscope-wisdom::after {
content: "✧";
bottom: var(--ezhp-spacing-md);
right: var(--ezhp-spacing-md);
}
/* -----------------------------------------------------------------------------
7.2 AFFIRMATION - Elegant bordered card
----------------------------------------------------------------------------- */
.chinese-horoscope p.horoscope-affirmation {
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-lg);
font-weight: var(--ezhp-font-weight-normal);
line-height: var(--ezhp-line-height-relaxed);
text-align: center;
color: var(--ezhp-affirmation-text);
margin: var(--ezhp-spacing-2xl) 0 var(--ezhp-spacing-lg) 0;
padding: var(--ezhp-spacing-xl) var(--ezhp-spacing-2xl);
background: var(--ezhp-affirmation-bg);
border-radius: var(--ezhp-radius-xl);
border: var(--ezhp-border-width-medium) solid var(--ezhp-affirmation-border);
box-shadow: var(--ezhp-shadow-md), var(--ezhp-shadow-glow);
position: relative;
}
/* Top decorative element */
.chinese-horoscope p.horoscope-affirmation::before {
content: "☆";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 var(--ezhp-spacing-sm);
color: var(--ezhp-color-secondary);
font-size: var(--ezhp-font-size-xl);
}
/* =============================================================================
8. RTL (RIGHT-TO-LEFT) SUPPORT
============================================================================= */
/* Block-level RTL */
.chinese-horoscope-block[dir="rtl"],
.chinese-horoscope[dir="rtl"] {
text-align: right;
}
/* LTR default */
.chinese-horoscope-block[dir="ltr"],
.chinese-horoscope[dir="ltr"] {
text-align: left;
}
/* RTL intro border flip */
.chinese-horoscope[dir="rtl"] p.horoscope-intro {
border-left: none;
border-right: var(--ezhp-border-width-thick) solid var(--ezhp-color-secondary);
}
.chinese-horoscope[dir="rtl"] p.horoscope-intro::before {
left: auto;
right: -2px;
}
/* RTL subtitle decoration */
.chinese-horoscope[dir="rtl"] h3.horoscope-subtitle::before {
margin-right: 0;
margin-left: var(--ezhp-spacing-sm);
}
/* RTL list padding */
.chinese-horoscope[dir="rtl"] ul.horoscope-tips li,
.chinese-horoscope[dir="rtl"] ol.horoscope-steps li {
padding-left: 0;
padding-right: var(--ezhp-spacing-2xl);
}
.chinese-horoscope[dir="rtl"] ul.horoscope-tips li::before,
.chinese-horoscope[dir="rtl"] ol.horoscope-steps li::before {
left: auto;
right: 0;
}
/* RTL wisdom decorations */
.chinese-horoscope[dir="rtl"] p.horoscope-wisdom::before {
left: auto;
right: var(--ezhp-spacing-md);
}
.chinese-horoscope[dir="rtl"] p.horoscope-wisdom::after {
right: auto;
left: var(--ezhp-spacing-md);
}
/* RTL float adjustments for inline images */
.chinese-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;
}
.chinese-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;
}
/* =============================================================================
9. RESPONSIVE DESIGN
============================================================================= */
/* Tablet and below */
@media (max-width: 768px) {
.chinese-horoscope-block,
.chinese-horoscope {
--ezhp-font-size-3xl: 1.5rem;
--ezhp-font-size-2xl: 1.25rem;
--ezhp-font-size-xl: 1.125rem;
--ezhp-spacing-2xl: 2rem;
--ezhp-spacing-xl: 1.5rem;
}
.chinese-horoscope-block .ezhp-form {
flex-direction: column;
align-items: stretch;
background: rgba(255, 255, 255, 0.95);
}
/* DATE INPUT - Mobile - simple styling */
.chinese-horoscope-block .ezhp-form input[type="date"],
.chinese-horoscope-block .ezhp-date-input {
width: 100%;
min-width: unset;
}
.chinese-horoscope-block .ezhp-form button {
width: 100%;
min-height: 48px;
}
/* Inline images go full width on mobile */
.chinese-horoscope .ez-daily-inline-image,
.chinese-horoscope-block .ez-daily-inline-image {
max-width: 100% !important;
float: none !important;
margin: 0 0 var(--ezhp-spacing-md) 0 !important;
}
.chinese-horoscope p.horoscope-affirmation {
padding: var(--ezhp-spacing-lg);
background: rgba(255, 255, 255, 0.95);
}
/* Remove any left border artifacts */
.chinese-horoscope-block .ezhp-form,
.chinese-horoscope-block .chinese-horoscope-result,
.chinese-horoscope section,
.chinese-horoscope [class*="section"] {
border-left: none !important;
}
}
/* Mobile */
@media (max-width: 480px) {
.chinese-horoscope-block,
.chinese-horoscope {
--ezhp-font-size-3xl: 1.375rem;
--ezhp-font-size-lg: 1rem;
--ezhp-spacing-lg: 1rem;
--ezhp-spacing-md: 0.75rem;
}
.chinese-horoscope h3.horoscope-subtitle {
font-size: var(--ezhp-font-size-base);
}
.chinese-horoscope p.horoscope-wisdom::before,
.chinese-horoscope p.horoscope-wisdom::after {
display: none;
}
/* Form elements full width */
.chinese-horoscope-block .ezhp-form {
flex-direction: column;
align-items: stretch;
}
.chinese-horoscope-block .ezhp-form input[type="date"],
.chinese-horoscope-block .ezhp-form button {
width: 100%;
}
}
/* =============================================================================
10. EDITOR-SPECIFIC STYLES
============================================================================= */
.chinese-horoscope-editor-ui {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ezhp-spacing-md);
padding: var(--ezhp-spacing-md);
background: linear-gradient(135deg, #f0f2f5 0%, #e8eaf0 100%);
border-radius: var(--ezhp-radius-md);
margin-bottom: var(--ezhp-spacing-md);
}
.chinese-horoscope-result-editor {
border: 1px dashed var(--ezhp-color-tertiary);
border-radius: var(--ezhp-radius-md);
min-height: 200px;
}
/* =============================================================================
11. PRINT STYLES
============================================================================= */
@media print {
.chinese-horoscope-block .ezhp-form {
display: none;
}
.chinese-horoscope,
.chinese-horoscope-block {
font-size: 11pt;
line-height: 1.5;
color: #000;
background: #fff;
}
.chinese-horoscope h2.horoscope-title {
font-size: 18pt;
color: #000;
font-style: normal;
}
.chinese-horoscope h3.horoscope-subtitle {
font-size: 12pt;
color: #000;
border-bottom-color: #000;
}
.chinese-horoscope h3.horoscope-subtitle::before {
content: none;
}
.chinese-horoscope .lucky-colors,
.chinese-horoscope .lucky-directions,
.chinese-horoscope .lucky-numbers {
background: none;
border: 1px solid #000;
color: #000;
}
.chinese-horoscope p.horoscope-wisdom,
.chinese-horoscope p.horoscope-affirmation,
.chinese-horoscope p.horoscope-intro {
background: none;
border-color: #000;
}
.chinese-horoscope p.horoscope-wisdom::before,
.chinese-horoscope p.horoscope-wisdom::after,
.chinese-horoscope p.horoscope-affirmation::before {
display: none;
}
.chinese-horoscope .ez-hero {
background-image: none !important;
}
.chinese-horoscope .ez-hero-overlay {
display: none;
}
}
/* =============================================================================
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 .chinese-horoscope-block,
.dark-mode .chinese-horoscope,
.chinese-horoscope-block.dark-mode,
.chinese-horoscope.dark-mode {
--ezhp-color-primary: #8B9BB4;
--ezhp-color-secondary: #D4BC7A;
--ezhp-color-tertiary: #6B7A99;
--ezhp-bg-primary: transparent;
--ezhp-bg-secondary: rgba(139, 155, 180, 0.1);
--ezhp-bg-accent: rgba(212, 188, 122, 0.1);
--ezhp-bg-mystical: linear-gradient(135deg, rgba(107, 122, 153, 0.1) 0%, rgba(139, 155, 180, 0.08) 100%);
--ezhp-text-primary: #E8EAF0;
--ezhp-text-secondary: #B8BCC8;
--ezhp-text-muted: rgba(232, 234, 240, 0.5);
--ezhp-text-accent: #9BA4C4;
--ezhp-lucky-colors-bg: rgba(212, 188, 122, 0.2);
--ezhp-lucky-colors-text: #D4BC7A;
--ezhp-lucky-directions-bg: rgba(139, 155, 180, 0.2);
--ezhp-lucky-directions-text: #8B9BB4;
--ezhp-lucky-numbers-bg: rgba(155, 164, 196, 0.2);
--ezhp-lucky-numbers-text: #9BA4C4;
--ezhp-wisdom-bg: rgba(107, 122, 153, 0.15);
--ezhp-wisdom-text: #B8BCC8;
--ezhp-affirmation-bg: linear-gradient(135deg, rgba(212, 188, 122, 0.1) 0%, rgba(107, 122, 153, 0.15) 100%);
--ezhp-affirmation-text: #E8EAF0;
--ezhp-input-bg: rgba(45, 49, 66, 0.8);
--ezhp-input-border: #6B7A99;
--ezhp-input-text: #E8EAF0;
--ezhp-button-text: #9BA4C4;
--ezhp-button-border: #6B7A99;
--ezhp-button-hover-bg: #6B7A99;
--ezhp-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-glow: 0 0 20px rgba(212, 188, 122, 0.2);
}
/* Affirmation star on dark backgrounds */
.dark-mode .chinese-horoscope p.horoscope-affirmation::before,
.chinese-horoscope.dark-mode p.horoscope-affirmation::before {
background: #1a1a2e;
}
/* =============================================================================
END OF MYSTICAL THEME STYLESHEET
COLOR REFERENCE:
----------------
Primary (dusty blue-purple): #5D6B8A
Secondary (warm gold): #C9A962
Tertiary (soft lavender): #9BA4C4
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 --ezhp-font-family-accent uses "Cormorant Garamond"
============================================================================= */
