/* =============================================================================
EZ HOROSCOPE - NUMEROLOGY 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.
TABLE OF CONTENTS:
------------------
1. CSS Custom Properties (Variables)
2. Block Container
3. Form Styles
4. Result Container
5. Report Sections
6. Hero Elements
7. Loading & Progress States
8. RTL (Right-to-Left) Support
9. Responsive Design
10. Print Styles
============================================================================= */
/* =============================================================================
1. CSS CUSTOM PROPERTIES (VARIABLES)
============================================================================= */
.numerology-block {
/* -------------------------------------------------------------------------
COLORS - MYSTICAL PALETTE
------------------------------------------------------------------------- */
/* Primary - Deep mystical purple-blue */
--ezhp-color-primary: #5D6B8A;
/* Secondary - Warm gold accent */
--ezhp-color-secondary: #C9A962;
/* Tertiary - Soft lavender */
--ezhp-color-tertiary: #9BA4C4;
/* Quaternary - Deep navy */
--ezhp-color-quaternary: #2D3142;
/* Background colors */
--ezhp-bg-primary: transparent;
--ezhp-bg-secondary: rgba(93, 107, 138, 0.04);
--ezhp-bg-accent: rgba(201, 169, 98, 0.06);
--ezhp-bg-mystical: linear-gradient(135deg, rgba(93, 107, 138, 0.03) 0%, rgba(155, 164, 196, 0.05) 100%);
--ezhp-bg-section: rgba(255, 255, 255, 0.4);
/* Text colors */
--ezhp-text-primary: #2D3142;
--ezhp-text-secondary: #4F5D75;
--ezhp-text-muted: rgba(45, 49, 66, 0.6);
--ezhp-text-accent: #5D6B8A;
--ezhp-text-light: #FFFFFF;
/* Input/Form colors */
--ezhp-input-bg: rgba(255, 255, 255, 0.8);
--ezhp-input-border: var(--ezhp-color-tertiary);
--ezhp-input-text: var(--ezhp-text-primary);
--ezhp-input-focus-shadow: rgba(93, 107, 138, 0.25);
/* Button colors */
--ezhp-button-text: var(--ezhp-color-primary);
--ezhp-button-border: var(--ezhp-color-primary);
--ezhp-button-hover-bg: var(--ezhp-color-primary);
--ezhp-button-hover-text: var(--ezhp-text-light);
/* Progress bar colors */
--ezhp-progress-track: rgba(155, 164, 196, 0.2);
--ezhp-progress-fill: linear-gradient(90deg, var(--ezhp-color-tertiary), var(--ezhp-color-secondary));
/* Section highlight colors */
--ezhp-highlight-positive: rgba(123, 158, 135, 0.1);
--ezhp-highlight-warning: rgba(201, 169, 98, 0.1);
/* -------------------------------------------------------------------------
TYPOGRAPHY
------------------------------------------------------------------------- */
--ezhp-font-family-base: inherit;
--ezhp-font-family-accent: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--ezhp-font-size-xs: 0.75rem;
--ezhp-font-size-sm: 0.875rem;
--ezhp-font-size-base: 1rem;
--ezhp-font-size-lg: 1.125rem;
--ezhp-font-size-xl: 1.25rem;
--ezhp-font-size-2xl: 1.5rem;
--ezhp-font-size-3xl: 1.75rem;
--ezhp-font-weight-light: 300;
--ezhp-font-weight-normal: 400;
--ezhp-font-weight-medium: 500;
--ezhp-font-weight-semibold: 600;
--ezhp-font-weight-bold: 700;
--ezhp-line-height-tight: 1.2;
--ezhp-line-height-normal: 1.5;
--ezhp-line-height-relaxed: 1.65;
--ezhp-line-height-loose: 1.85;
--ezhp-letter-spacing-wide: 0.025em;
--ezhp-letter-spacing-wider: 0.05em;
--ezhp-letter-spacing-widest: 0.1em;
/* -------------------------------------------------------------------------
SPACING
------------------------------------------------------------------------- */
--ezhp-spacing-xs: 0.25rem;
--ezhp-spacing-sm: 0.5rem;
--ezhp-spacing-md: 1rem;
--ezhp-spacing-lg: 1.5rem;
--ezhp-spacing-xl: 2rem;
--ezhp-spacing-2xl: 3rem;
/* -------------------------------------------------------------------------
BORDERS & SHADOWS
------------------------------------------------------------------------- */
--ezhp-radius-sm: 4px;
--ezhp-radius-md: 8px;
--ezhp-radius-lg: 12px;
--ezhp-radius-xl: 16px;
--ezhp-border-width-thin: 1px;
--ezhp-border-width-medium: 2px;
--ezhp-shadow-sm: 0 1px 3px rgba(93, 107, 138, 0.06);
--ezhp-shadow-md: 0 4px 12px rgba(93, 107, 138, 0.08);
--ezhp-shadow-lg: 0 8px 24px rgba(93, 107, 138, 0.1);
--ezhp-shadow-glow: 0 0 20px rgba(201, 169, 98, 0.2);
/* -------------------------------------------------------------------------
TRANSITIONS
------------------------------------------------------------------------- */
--ezhp-transition-fast: 150ms ease;
--ezhp-transition-normal: 250ms ease;
--ezhp-transition-slow: 400ms ease;
}
/* =============================================================================
2. BLOCK CONTAINER
============================================================================= */
.numerology-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);
}
/* =============================================================================
3. FORM STYLES
============================================================================= */
.numerology-block .ezhp-form {
margin: var(--ezhp-spacing-lg) 0;
padding: var(--ezhp-spacing-lg);
display: flex;
flex-wrap: wrap;
gap: var(--ezhp-spacing-md);
align-items: center;
background: var(--ezhp-bg-mystical);
border-radius: var(--ezhp-radius-lg);
border: var(--ezhp-border-width-thin) solid rgba(155, 164, 196, 0.2);
}
/* Form label */
.numerology-block .ezhp-form label {
width: 100%;
font-family: var(--ezhp-font-family-accent);
font-size: var(--ezhp-font-size-lg);
font-weight: var(--ezhp-font-weight-light);
font-style: italic;
color: var(--ezhp-color-primary);
margin-bottom: var(--ezhp-spacing-xs);
}
/* Decorative element before label */
.numerology-block .ezhp-form label::before {
content: "✦ ";
color: var(--ezhp-color-secondary);
font-style: normal;
}
/* Text input */
.numerology-block .ezhp-form input[type="text"] {
flex: 1;
min-width: 180px;
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);
transition: border-color var(--ezhp-transition-fast),
box-shadow var(--ezhp-transition-fast);
}
/* Date input */
.numerology-block .ezhp-form input[type="date"] {
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);
transition: border-color var(--ezhp-transition-fast),
box-shadow var(--ezhp-transition-fast);
}
/* Input focus states */
.numerology-block .ezhp-form input[type="text"]:focus,
.numerology-block .ezhp-form input[type="date"]:focus {
outline: none;
border-color: var(--ezhp-color-secondary);
box-shadow: 0 0 0 3px var(--ezhp-input-focus-shadow);
}
/* Input hover */
.numerology-block .ezhp-form input[type="text"]:hover,
.numerology-block .ezhp-form input[type="date"]:hover {
border-color: var(--ezhp-color-primary);
}
/* Submit button - outlined mystical style */
.numerology-block .ezhp-form button.ezhp-fetch-button,
.numerology-block .ezhp-form .wp-element-button {
padding: var(--ezhp-spacing-sm) var(--ezhp-spacing-lg);
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: transparent;
border: var(--ezhp-border-width-medium) solid var(--ezhp-button-border);
border-radius: var(--ezhp-radius-sm);
cursor: pointer;
transition: all var(--ezhp-transition-normal);
}
.numerology-block .ezhp-form button:hover,
.numerology-block .ezhp-form .wp-element-button:hover {
background: var(--ezhp-button-hover-bg);
color: var(--ezhp-button-hover-text);
transform: translateY(-2px);
box-shadow: var(--ezhp-shadow-md);
}
.numerology-block .ezhp-form button:focus,
.numerology-block .ezhp-form .wp-element-button:focus {
outline: none;
box-shadow: 0 0 0 3px var(--ezhp-input-focus-shadow);
}
/* =============================================================================
4. RESULT CONTAINER
============================================================================= */
.numerology-block .numerology-result {
margin-top: var(--ezhp-spacing-lg);
}
/* =============================================================================
5. REPORT SECTIONS
=============================================================================
Note: Uses !important to override base theme's inherit declarations
============================================================================= */
/* Main report wrapper */
.numerology-block .numerology-report,
.numerology-block .numerology-result .numerology-report {
color: var(--ezhp-text-secondary) !important;
}
/* Individual sections - the API returns div.section elements */
.numerology-block .numerology-report .section,
.numerology-block .numerology-report div.section,
.numerology-block .numerology-result .section {
margin-bottom: var(--ezhp-spacing-xl) !important;
padding: var(--ezhp-spacing-lg) !important;
background: var(--ezhp-bg-section) !important;
border-radius: var(--ezhp-radius-lg) !important;
border-left: 3px solid var(--ezhp-color-tertiary) !important;
box-shadow: var(--ezhp-shadow-sm) !important;
}
.numerology-block .numerology-report .section:last-child,
.numerology-block .numerology-report div.section:last-child,
.numerology-block .numerology-result .section:last-child {
margin-bottom: 0 !important;
}
/* Section headings (h2) */
.numerology-block .numerology-report h2,
.numerology-block .numerology-result h2,
.numerology-block .section h2 {
font-family: var(--ezhp-font-family-accent) !important;
font-size: var(--ezhp-font-size-2xl) !important;
font-weight: var(--ezhp-font-weight-light) !important;
font-style: italic !important;
line-height: var(--ezhp-line-height-tight) !important;
color: var(--ezhp-color-primary) !important;
background: transparent !important;
margin: 0 0 var(--ezhp-spacing-md) 0 !important;
padding-bottom: var(--ezhp-spacing-sm) !important;
border-bottom: 1px solid rgba(155, 164, 196, 0.3) !important;
}
/* Numerology title (report header) */
.numerology-block .numerology-title,
.numerology-block h2.numerology-title {
font-family: var(--ezhp-font-family-accent) !important;
font-size: var(--ezhp-font-size-3xl) !important;
font-weight: var(--ezhp-font-weight-light) !important;
font-style: italic !important;
line-height: var(--ezhp-line-height-tight) !important;
color: var(--ezhp-color-primary) !important;
background: transparent !important;
margin: 0 0 var(--ezhp-spacing-lg) 0 !important;
text-align: center !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* Decorative stars around title */
.numerology-block .numerology-title::before,
.numerology-block h2.numerology-title::before {
content: "✦ ";
color: var(--ezhp-color-secondary);
font-style: normal;
}
.numerology-block .numerology-title::after,
.numerology-block h2.numerology-title::after {
content: " ✦";
color: var(--ezhp-color-secondary);
font-style: normal;
}
/* Paragraphs */
.numerology-block .numerology-report p,
.numerology-block .numerology-result p,
.numerology-block .section p {
font-family: var(--ezhp-font-family-base) !important;
font-size: var(--ezhp-font-size-base) !important;
line-height: var(--ezhp-line-height-loose) !important;
color: var(--ezhp-text-secondary) !important;
background: transparent !important;
margin: 0 0 var(--ezhp-spacing-md) 0 !important;
}
.numerology-block .numerology-report p:last-child,
.numerology-block .section p:last-child {
margin-bottom: 0 !important;
}
/* Strong/bold text */
.numerology-block .numerology-report strong,
.numerology-block .section strong {
font-weight: var(--ezhp-font-weight-semibold) !important;
color: var(--ezhp-text-primary) !important;
}
/* Emphasis/italic text */
.numerology-block .numerology-report em,
.numerology-block .section em {
font-style: italic !important;
color: var(--ezhp-color-primary) !important;
}
/* Practical step paragraphs - has strong at start */
.numerology-block .section p strong:first-child {
display: inline-block;
margin-bottom: var(--ezhp-spacing-xs);
color: var(--ezhp-color-secondary) !important;
}
/* Life area headings with emojis (💖 💼 💰 🎭 ⚕️) */
.numerology-block .section p > strong:first-child {
font-size: var(--ezhp-font-size-lg);
}
/* Practical Step boxes */
.numerology-block .section p:has(> strong:first-child:contains("Practical Step")),
.numerology-block .section p:last-of-type:has(strong:first-child) {
padding: var(--ezhp-spacing-md) !important;
background: var(--ezhp-bg-accent) !important;
border-radius: var(--ezhp-radius-md) !important;
border-left: 3px solid var(--ezhp-color-secondary) !important;
margin-top: var(--ezhp-spacing-md) !important;
}
/* =============================================================================
6. HERO ELEMENTS
============================================================================= */
.numerology-block .ez-hero {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
margin-bottom: var(--ezhp-spacing-lg);
border-radius: var(--ezhp-radius-lg);
}
.numerology-block .ez-hero-content {
position: relative;
z-index: 10;
padding: 0;
}
.numerology-block .ez-hero-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
/* Inline hero image */
.numerology-block .ez-daily-inline-image {
position: relative;
}
.numerology-block .ez-daily-inline-image img {
display: block;
height: auto;
border-radius: var(--ezhp-radius-lg);
max-width: 100%;
box-shadow: var(--ezhp-shadow-md);
}
/* Clear floats */
.numerology-block .ez-hero-text::after {
content: "";
display: block;
clear: both;
}
/* Background hero mode text */
.numerology-block .ez-hero[style*="background-image"] .ez-hero-content {
padding: var(--ezhp-spacing-xl);
text-shadow: 0 2px 8px rgba(45, 49, 66, 0.5);
}
.numerology-block .ez-hero[style*="background-image"] .numerology-title {
color: var(--ezhp-text-light);
}
/* =============================================================================
7. LOADING & PROGRESS STATES
============================================================================= */
/* Progress bar container */
.numerology-block .ezhp-progress-container {
width: 100%;
height: 6px;
background: var(--ezhp-progress-track);
overflow: hidden;
border-radius: var(--ezhp-radius-sm);
margin: var(--ezhp-spacing-md) 0;
position: relative;
}
/* Progress bar fill */
.numerology-block .ezhp-progress-bar {
position: absolute;
height: 100%;
width: 30%;
background: var(--ezhp-progress-fill);
border-radius: var(--ezhp-radius-sm);
animation: ezhp-numerology-slide 1.5s ease-in-out infinite;
}
@keyframes ezhp-numerology-slide {
0% { left: -30%; }
100% { left: 100%; }
}
/* Loading text */
.numerology-block .numerology-result > div:not(.ezhp-progress-container):not(.section):not(.numerology-report):not(.ez-hero) {
text-align: center;
padding: var(--ezhp-spacing-md);
color: var(--ezhp-text-muted);
font-family: var(--ezhp-font-family-accent);
font-style: italic;
}
/* =============================================================================
8. RTL (RIGHT-TO-LEFT) SUPPORT
============================================================================= */
/* Base RTL wrapper */
.numerology-block[dir="rtl"],
.numerology-block.is-rtl {
text-align: right;
direction: rtl;
}
/* Form layout for RTL */
.numerology-block[dir="rtl"] .ezhp-form,
.numerology-block.is-rtl .ezhp-form {
flex-direction: row-reverse;
}
/* Label decoration flip */
.numerology-block[dir="rtl"] .ezhp-form label::before,
.numerology-block.is-rtl .ezhp-form label::before {
content: " ✦";
}
.numerology-block[dir="rtl"] .ezhp-form label::after,
.numerology-block.is-rtl .ezhp-form label::after {
content: none;
}
/* Input text alignment for RTL */
.numerology-block[dir="rtl"] .ezhp-form input[type="text"],
.numerology-block.is-rtl .ezhp-form input[type="text"] {
text-align: right;
}
/* Date input direction (keep LTR for numbers but align right) */
.numerology-block[dir="rtl"] .ezhp-form input[type="date"],
.numerology-block.is-rtl .ezhp-form input[type="date"] {
direction: ltr;
text-align: right;
}
/* Labels for RTL */
.numerology-block[dir="rtl"] label,
.numerology-block.is-rtl label {
text-align: right;
width: 100%;
}
/* Hero section RTL */
.numerology-block[dir="rtl"] .ez-hero,
.numerology-block.is-rtl .ez-hero {
text-align: right;
}
.numerology-block[dir="rtl"] .ez-hero-text,
.numerology-block.is-rtl .ez-hero-text {
text-align: right;
}
/* Numerology result RTL */
.numerology-block[dir="rtl"] .numerology-result,
.numerology-block.is-rtl .numerology-result {
text-align: right;
}
/* Section border flip */
.numerology-block[dir="rtl"] .numerology-report .section,
.numerology-block[dir="rtl"] .section,
.numerology-block.is-rtl .numerology-report .section,
.numerology-block.is-rtl .section {
border-left: none !important;
border-right: 3px solid var(--ezhp-color-tertiary) !important;
}
/* Practical step border flip */
.numerology-block[dir="rtl"] .section p:last-of-type:has(strong:first-child),
.numerology-block.is-rtl .section p:last-of-type:has(strong:first-child) {
border-left: none !important;
border-right: 3px solid var(--ezhp-color-secondary) !important;
}
/* Title decorations */
.numerology-block[dir="rtl"] .numerology-title::before,
.numerology-block.is-rtl .numerology-title::before {
content: " ✦";
}
.numerology-block[dir="rtl"] .numerology-title::after,
.numerology-block.is-rtl .numerology-title::after {
content: "✦ ";
}
/* Titles and headings RTL */
.numerology-block[dir="rtl"] h2,
.numerology-block[dir="rtl"] h3,
.numerology-block.is-rtl h2,
.numerology-block.is-rtl h3 {
text-align: right !important;
}
/* Paragraphs RTL */
.numerology-block[dir="rtl"] p,
.numerology-block.is-rtl p {
text-align: right !important;
}
/* Progress bar animation for RTL (slide from right to left) */
.numerology-block[dir="rtl"] .ezhp-progress-bar,
.numerology-block.is-rtl .ezhp-progress-bar {
animation: ezhp-numerology-slide-rtl 1.5s ease-in-out infinite;
}
@keyframes ezhp-numerology-slide-rtl {
0% { right: -30%; left: auto; }
100% { right: 100%; left: auto; }
}
/* Lists for RTL */
.numerology-block[dir="rtl"] ul,
.numerology-block[dir="rtl"] ol,
.numerology-block.is-rtl ul,
.numerology-block.is-rtl ol {
padding-right: var(--ezhp-spacing-lg);
padding-left: 0;
}
.numerology-block[dir="rtl"] li,
.numerology-block.is-rtl li {
text-align: right;
}
/* =============================================================================
9. RESPONSIVE DESIGN
============================================================================= */
@media (max-width: 768px) {
.numerology-block {
--ezhp-font-size-2xl: 1.375rem;
--ezhp-font-size-3xl: 1.5rem;
--ezhp-spacing-lg: 1.25rem;
--ezhp-spacing-xl: 1.5rem;
}
.numerology-block .ezhp-form {
padding: var(--ezhp-spacing-md);
}
.numerology-block .ezhp-form input[type="text"] {
min-width: 100%;
}
.numerology-block .numerology-report .section,
.numerology-block .section {
padding: var(--ezhp-spacing-md) !important;
}
}
@media (max-width: 480px) {
.numerology-block {
--ezhp-font-size-lg: 1rem;
--ezhp-font-size-xl: 1.125rem;
--ezhp-font-size-2xl: 1.25rem;
--ezhp-font-size-3xl: 1.375rem;
--ezhp-spacing-md: 0.75rem;
--ezhp-spacing-lg: 1rem;
}
.numerology-block .ezhp-form {
flex-direction: column;
align-items: stretch;
}
.numerology-block .ezhp-form input[type="text"],
.numerology-block .ezhp-form input[type="date"],
.numerology-block .ezhp-form button {
width: 100%;
}
.numerology-block .numerology-title::before,
.numerology-block .numerology-title::after {
display: none;
}
/* RTL mobile - stack form vertically */
.numerology-block[dir="rtl"] .ezhp-form,
.numerology-block.is-rtl .ezhp-form {
flex-direction: column;
align-items: stretch;
}
}
/* =============================================================================
10. PRINT STYLES
============================================================================= */
@media print {
.numerology-block {
font-size: 10pt;
color: #000 !important;
background: #fff !important;
}
.numerology-block .ezhp-form {
display: none;
}
.numerology-block .numerology-report .section,
.numerology-block .section {
background: none !important;
box-shadow: none !important;
border: none !important;
border-left: 2px solid #000 !important;
page-break-inside: avoid;
padding: 1rem !important;
}
.numerology-block .numerology-report h2,
.numerology-block .section h2 {
font-size: 14pt !important;
color: #000 !important;
font-style: normal !important;
border-bottom-color: #000 !important;
}
.numerology-block .numerology-title,
.numerology-block h2.numerology-title {
font-size: 16pt !important;
color: #000 !important;
font-style: normal !important;
}
.numerology-block .numerology-title::before,
.numerology-block .numerology-title::after {
content: none;
}
.numerology-block .numerology-report p,
.numerology-block .section p {
color: #000 !important;
background: none !important;
}
.numerology-block .numerology-report strong,
.numerology-block .section strong {
color: #000 !important;
}
.numerology-block .numerology-report em,
.numerology-block .section em {
color: #333 !important;
}
.numerology-block .ezhp-progress-container {
display: none;
}
.numerology-block .ez-hero[style*="background-image"] {
background-image: none !important;
}
.numerology-block .ez-hero-overlay {
display: none;
}
.numerology-block .section p:last-of-type:has(strong:first-child) {
background: none !important;
border-left: 2px solid #666 !important;
padding-left: 1rem !important;
}
}
/* =============================================================================
END OF NUMEROLOGY BLOCK MYSTICAL THEME STYLESHEET
COLOR REFERENCE:
----------------
Primary (dusty blue-purple): #5D6B8A
Secondary (warm gold): #C9A962
Tertiary (soft lavender): #9BA4C4
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">
============================================================================= */
