/* =============================================================================
EZ HOROSCOPE - ZODIAC COMPATIBILITY 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. Lists
7. Inline Hero Image
8. Loading & Progress States
9. RTL (Right-to-Left) Support
10. Responsive Design
11. Print Styles
============================================================================= */
/* =============================================================================
1. CSS CUSTOM PROPERTIES (VARIABLES)
============================================================================= */
.ezhp-compatibility-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));
/* -------------------------------------------------------------------------
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
============================================================================= */
.ezhp-compatibility-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
============================================================================= */
.ezhp-compatibility-block .ezhp-form {
margin: var(--ezhp-spacing-lg) 0 !important;
padding: var(--ezhp-spacing-lg) !important;
display: flex !important;
flex-wrap: wrap !important;
gap: var(--ezhp-spacing-md) !important;
align-items: center !important;
background: var(--ezhp-bg-mystical) !important;
border-radius: var(--ezhp-radius-lg) !important;
border: 1px solid rgba(155, 164, 196, 0.2) !important;
}
/* Form labels */
.ezhp-compatibility-block .ezhp-form label,
.ezhp-compatibility-block .ezhp-label-your,
.ezhp-compatibility-block .ezhp-label-their {
font-family: var(--ezhp-font-family-accent) !important;
font-size: var(--ezhp-font-size-base) !important;
font-weight: var(--ezhp-font-weight-light) !important;
font-style: italic !important;
color: var(--ezhp-color-primary) !important;
}
/* Decorative element before labels */
.ezhp-compatibility-block .ezhp-label-your::before,
.ezhp-compatibility-block .ezhp-label-their::before {
content: "✦ ";
color: var(--ezhp-color-secondary);
font-style: normal;
}
/* Select dropdowns */
.ezhp-compatibility-block select,
.ezhp-compatibility-block .ezhp-your-sign,
.ezhp-compatibility-block .ezhp-their-sign {
padding: var(--ezhp-spacing-sm) var(--ezhp-spacing-md) !important;
font-family: var(--ezhp-font-family-base) !important;
font-size: var(--ezhp-font-size-base) !important;
color: var(--ezhp-input-text) !important;
background: var(--ezhp-input-bg) !important;
border: 2px solid var(--ezhp-input-border) !important;
border-radius: var(--ezhp-radius-md) !important;
cursor: pointer;
transition: border-color var(--ezhp-transition-fast),
box-shadow var(--ezhp-transition-fast);
}
.ezhp-compatibility-block select:hover {
border-color: var(--ezhp-color-primary) !important;
}
.ezhp-compatibility-block select:focus {
outline: none !important;
border-color: var(--ezhp-color-secondary) !important;
box-shadow: 0 0 0 3px var(--ezhp-input-focus-shadow) !important;
}
/* Submit button - outlined mystical style */
.ezhp-compatibility-block .ezhp-fetch-button,
.ezhp-compatibility-block .wp-element-button,
.ezhp-compatibility-block .ezhp-button-compat {
padding: var(--ezhp-spacing-sm) var(--ezhp-spacing-lg) !important;
font-family: var(--ezhp-font-family-base) !important;
font-size: var(--ezhp-font-size-sm) !important;
font-weight: var(--ezhp-font-weight-medium) !important;
text-transform: uppercase !important;
letter-spacing: var(--ezhp-letter-spacing-wider) !important;
color: var(--ezhp-button-text) !important;
background: transparent !important;
border: 2px solid var(--ezhp-button-border) !important;
border-radius: var(--ezhp-radius-sm) !important;
cursor: pointer;
transition: all var(--ezhp-transition-normal) !important;
}
.ezhp-compatibility-block .ezhp-fetch-button:hover,
.ezhp-compatibility-block .wp-element-button:hover,
.ezhp-compatibility-block .ezhp-button-compat:hover {
background: var(--ezhp-button-hover-bg) !important;
color: var(--ezhp-button-hover-text) !important;
transform: translateY(-2px);
box-shadow: var(--ezhp-shadow-md);
opacity: 1 !important;
}
.ezhp-compatibility-block .ezhp-fetch-button:focus,
.ezhp-compatibility-block .wp-element-button:focus {
outline: none !important;
box-shadow: 0 0 0 3px var(--ezhp-input-focus-shadow) !important;
}
/* =============================================================================
4. RESULT CONTAINER
============================================================================= */
.ezhp-compatibility-block .ezhp-compatibility-result {
margin-top: var(--ezhp-spacing-lg) !important;
}
/* =============================================================================
5. REPORT SECTIONS
=============================================================================
Note: Uses !important to override base theme's inherit declarations
============================================================================= */
/* Individual sections - the API returns div.section elements */
.ezhp-compatibility-block .section,
.ezhp-compatibility-block .ezhp-compatibility-result .section,
.ezhp-compatibility-block .ezhp-compatibility-result > div.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;
}
.ezhp-compatibility-block .section:last-child,
.ezhp-compatibility-block .ezhp-compatibility-result .section:last-child {
margin-bottom: 0 !important;
}
/* Section headings (h2) with emoji icons */
.ezhp-compatibility-block h2,
.ezhp-compatibility-block .section h2,
.ezhp-compatibility-block .ezhp-compatibility-result 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;
}
/* H3 subheadings if present */
.ezhp-compatibility-block h3,
.ezhp-compatibility-block .section h3 {
font-family: var(--ezhp-font-family-accent) !important;
font-size: var(--ezhp-font-size-xl) !important;
font-weight: var(--ezhp-font-weight-normal) !important;
font-style: italic !important;
color: var(--ezhp-color-primary) !important;
background: transparent !important;
margin: var(--ezhp-spacing-md) 0 var(--ezhp-spacing-sm) 0 !important;
}
/* Paragraphs */
.ezhp-compatibility-block p,
.ezhp-compatibility-block .section p,
.ezhp-compatibility-block .ezhp-compatibility-result 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;
}
.ezhp-compatibility-block p:last-child,
.ezhp-compatibility-block .section p:last-child {
margin-bottom: 0 !important;
}
/* Strong/bold text (like compatibility percentage) */
.ezhp-compatibility-block strong,
.ezhp-compatibility-block .section strong {
font-weight: var(--ezhp-font-weight-semibold) !important;
color: var(--ezhp-text-primary) !important;
}
/* Compatibility percentage highlight */
.ezhp-compatibility-block .section p:first-of-type strong {
font-size: var(--ezhp-font-size-lg) !important;
color: var(--ezhp-color-secondary) !important;
}
/* Emphasis/italic text */
.ezhp-compatibility-block em,
.ezhp-compatibility-block .section em {
font-style: italic !important;
color: var(--ezhp-color-primary) !important;
}
/* =============================================================================
6. LISTS
============================================================================= */
.ezhp-compatibility-block ul,
.ezhp-compatibility-block .section ul,
.ezhp-compatibility-block .ezhp-compatibility-result ul {
margin: var(--ezhp-spacing-md) 0 !important;
padding-left: var(--ezhp-spacing-lg) !important;
list-style: none !important;
}
.ezhp-compatibility-block li,
.ezhp-compatibility-block .section li {
font-family: var(--ezhp-font-family-base) !important;
font-size: var(--ezhp-font-size-base) !important;
line-height: var(--ezhp-line-height-relaxed) !important;
color: var(--ezhp-text-secondary) !important;
margin-bottom: var(--ezhp-spacing-sm) !important;
padding-left: var(--ezhp-spacing-sm) !important;
position: relative;
}
/* Custom list bullet using star */
.ezhp-compatibility-block li::before {
content: "✧";
position: absolute;
left: calc(-1 * var(--ezhp-spacing-md));
color: var(--ezhp-color-tertiary);
font-size: var(--ezhp-font-size-sm);
}
.ezhp-compatibility-block li:last-child {
margin-bottom: 0 !important;
}
/* =============================================================================
7. INLINE HERO IMAGE
============================================================================= */
.ezhp-compatibility-block .ez-inline-hero-img {
border-radius: var(--ezhp-radius-lg) !important;
box-shadow: var(--ezhp-shadow-md) !important;
transition: box-shadow var(--ezhp-transition-normal);
}
.ezhp-compatibility-block .ez-inline-hero-img:hover {
box-shadow: var(--ezhp-shadow-lg) !important;
}
/* Wrap left */
.ezhp-compatibility-block .ez-inline-hero-img.ez-wrap-left {
float: left !important;
margin: 0 var(--ezhp-spacing-lg) var(--ezhp-spacing-lg) 0 !important;
}
/* Wrap right */
.ezhp-compatibility-block .ez-inline-hero-img.ez-wrap-right {
float: right !important;
margin: 0 0 var(--ezhp-spacing-lg) var(--ezhp-spacing-lg) !important;
}
/* Clear floats */
.ezhp-compatibility-block .ezhp-compatibility-result::after {
content: "";
display: block;
clear: both;
}
/* =============================================================================
8. LOADING & PROGRESS STATES
============================================================================= */
/* Progress bar container */
.ezhp-compatibility-block .ezhp-progress-container {
width: 100%;
height: 6px;
background: var(--ezhp-progress-track) !important;
overflow: hidden;
border-radius: var(--ezhp-radius-sm);
margin: var(--ezhp-spacing-md) 0;
position: relative;
}
/* Progress bar fill */
.ezhp-compatibility-block .ezhp-progress-bar {
position: absolute;
height: 100%;
width: 30%;
background: var(--ezhp-progress-fill) !important;
border-radius: var(--ezhp-radius-sm);
animation: ezhp-compat-slide 1.5s ease-in-out infinite;
}
@keyframes ezhp-compat-slide {
0% { left: -30%; }
100% { left: 100%; }
}
/* Loading text */
.ezhp-compatibility-block .ezhp-compatibility-result > div:not(.section) {
text-align: center;
padding: var(--ezhp-spacing-md);
color: var(--ezhp-text-muted);
font-family: var(--ezhp-font-family-accent);
font-style: italic;
}
/* =============================================================================
9. RTL (RIGHT-TO-LEFT) SUPPORT
============================================================================= */
/* Base RTL wrapper */
.ezhp-compatibility-block[dir="rtl"] {
text-align: right;
direction: rtl;
}
/* Form layout for RTL */
.ezhp-compatibility-block[dir="rtl"] .ezhp-form {
flex-direction: row-reverse !important;
}
/* Label decoration flip */
.ezhp-compatibility-block[dir="rtl"] .ezhp-label-your::before,
.ezhp-compatibility-block[dir="rtl"] .ezhp-label-their::before {
content: " ✦";
}
.ezhp-compatibility-block[dir="rtl"] .ezhp-label-your::after,
.ezhp-compatibility-block[dir="rtl"] .ezhp-label-their::after {
content: none;
}
/* Section border flip */
.ezhp-compatibility-block[dir="rtl"] .section {
border-left: none !important;
border-right: 3px solid var(--ezhp-color-tertiary) !important;
}
/* Headings RTL */
.ezhp-compatibility-block[dir="rtl"] h2,
.ezhp-compatibility-block[dir="rtl"] h3 {
text-align: right !important;
}
/* Paragraphs RTL */
.ezhp-compatibility-block[dir="rtl"] p {
text-align: right !important;
}
/* Lists RTL */
.ezhp-compatibility-block[dir="rtl"] ul {
padding-left: 0 !important;
padding-right: var(--ezhp-spacing-lg) !important;
}
.ezhp-compatibility-block[dir="rtl"] li {
padding-left: 0 !important;
padding-right: var(--ezhp-spacing-sm) !important;
}
.ezhp-compatibility-block[dir="rtl"] li::before {
left: auto;
right: calc(-1 * var(--ezhp-spacing-md));
}
/* Inline hero image float reversal for RTL */
.ezhp-compatibility-block[dir="rtl"] .ez-inline-hero-img.ez-wrap-left {
float: right !important;
margin: 0 0 var(--ezhp-spacing-lg) var(--ezhp-spacing-lg) !important;
}
.ezhp-compatibility-block[dir="rtl"] .ez-inline-hero-img.ez-wrap-right {
float: left !important;
margin: 0 var(--ezhp-spacing-lg) var(--ezhp-spacing-lg) 0 !important;
}
/* Progress bar RTL animation */
.ezhp-compatibility-block[dir="rtl"] .ezhp-progress-bar {
animation: ezhp-compat-slide-rtl 1.5s ease-in-out infinite;
}
@keyframes ezhp-compat-slide-rtl {
0% { right: -30%; left: auto; }
100% { right: 100%; left: auto; }
}
/* =============================================================================
10. RESPONSIVE DESIGN
============================================================================= */
@media (max-width: 768px) {
.ezhp-compatibility-block {
--ezhp-font-size-2xl: 1.375rem;
--ezhp-font-size-3xl: 1.5rem;
--ezhp-spacing-lg: 1.25rem;
--ezhp-spacing-xl: 1.5rem;
}
.ezhp-compatibility-block .ezhp-form {
padding: var(--ezhp-spacing-md) !important;
}
.ezhp-compatibility-block .section {
padding: var(--ezhp-spacing-md) !important;
}
.ezhp-compatibility-block .ez-inline-hero-img {
max-width: 50% !important;
}
}
@media (max-width: 480px) {
.ezhp-compatibility-block {
--ezhp-font-size-lg: 1rem;
--ezhp-font-size-xl: 1.125rem;
--ezhp-font-size-2xl: 1.25rem;
--ezhp-spacing-md: 0.75rem;
--ezhp-spacing-lg: 1rem;
}
.ezhp-compatibility-block .ezhp-form {
flex-direction: column !important;
align-items: stretch !important;
}
.ezhp-compatibility-block select,
.ezhp-compatibility-block .ezhp-fetch-button {
width: 100% !important;
}
.ezhp-compatibility-block .ez-inline-hero-img {
float: none !important;
display: block !important;
margin: 0 auto var(--ezhp-spacing-md) auto !important;
max-width: 80% !important;
}
.ezhp-compatibility-block .ez-inline-hero-img.ez-wrap-left,
.ezhp-compatibility-block .ez-inline-hero-img.ez-wrap-right {
float: none !important;
margin: 0 auto var(--ezhp-spacing-md) auto !important;
}
/* RTL mobile - stack form vertically */
.ezhp-compatibility-block[dir="rtl"] .ezhp-form {
flex-direction: column !important;
align-items: stretch !important;
}
}
/* =============================================================================
11. PRINT STYLES
============================================================================= */
@media print {
.ezhp-compatibility-block {
font-size: 10pt;
color: #000 !important;
background: #fff !important;
}
.ezhp-compatibility-block .ezhp-form {
display: none !important;
}
.ezhp-compatibility-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;
}
.ezhp-compatibility-block h2 {
font-size: 14pt !important;
color: #000 !important;
font-style: normal !important;
border-bottom-color: #000 !important;
}
.ezhp-compatibility-block p,
.ezhp-compatibility-block li {
color: #000 !important;
}
.ezhp-compatibility-block strong {
color: #000 !important;
}
.ezhp-compatibility-block em {
color: #333 !important;
}
.ezhp-compatibility-block li::before {
color: #666;
}
.ezhp-compatibility-block .ezhp-progress-container {
display: none !important;
}
.ezhp-compatibility-block .ez-inline-hero-img {
box-shadow: none !important;
border: 1px solid #ccc;
}
}
/* =============================================================================
END OF ZODIAC COMPATIBILITY 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">
============================================================================= */
