.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#4A4A4A;--e-global-color-accent:#61CE70;--e-global-color-4acb35e:#FFFBF0;--e-global-color-1b86e9d:#E3F2FD;--e-global-color-2e5f86f:#FFEBEE;--e-global-color-42ad6ae:#FFFEF8;--e-global-color-73c3325:#FFF5F5;--e-global-color-4efad53:#F5FFF5;--e-global-color-0db6560:#DC3545;--e-global-color-d931faa:#FFC107;--e-global-color-4eee153:#FAFAFA;--e-global-color-9154e80:#FFF5F5;--e-global-color-e620607:#F5FFF5;--e-global-typography-primary-font-family:"Arial";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Arial";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Arial";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Arial";--e-global-typography-accent-font-weight:700;background-color:var( --e-global-color-4eee153 );font-family:"Arial", Sans-serif;font-size:18px;font-weight:600;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 p{margin-block-end:0rem;}.elementor-kit-5 a{font-family:"Arial", Sans-serif;}.elementor-kit-5 h1{font-family:"Arial", Sans-serif;}.elementor-kit-5 h2{font-family:"Arial", Sans-serif;}.elementor-kit-5 h3{font-family:"Arial", Sans-serif;}.elementor-kit-5 h4{font-family:"Arial", Sans-serif;}.elementor-kit-5 h5{font-family:"Arial", Sans-serif;}.elementor-kit-5 h6{font-family:"Arial", Sans-serif;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-family:"Roboto", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:30px;--container-default-padding-right:30px;--container-default-padding-bottom:30px;--container-default-padding-left:30px;}}@media(max-width:767px){.elementor-kit-5{font-size:18px;line-height:1.6em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================
YOURHOMEODOCTOR.COM - PREMIUM CSS
Version 3.1 - SVG Icons Edition
Last Updated: January 2025
ΟΔΗΓΙΕΣ: Αντέγραψε όλον τον κώδικα στο:
Εμφάνιση > Προσαρμογή > Πρόσθετο CSS
CHANGELOG v3.1:
- Αντικατάσταση Emojis με SVG icons (Medical Grade)
- Τακτοποίηση και οργάνωση κώδικα
- Brand-colored icons με CSS mask technique
============================================ */
/* ============================================
TABLE OF CONTENTS
============================================
1. CSS Variables
2. Base & Resets
3. Article Container
4. Typography
5. Heading Icons (SVG) ← NEW
6. Cards - Base & Variants
7. Instant Answer & Conclusion Boxes
8. Grid Layout & Cards
9. FAQ Accordion
10. Patient Reviews Section
11. Case Study Module
12. Related Articles Sections
13. Comparison Tables
14. Indications & Modalities Grids
15. Timeline Cards
16. Case Study Card
17. Footer Styles
18. Elementor Table of Contents
19. Mobile Sticky Bar
20. Responsive Breakpoints
21. Print Styles
22. Review Badges (Footer)
23. Utility Classes & Fixes
============================================ */
/* ============================================
1. CSS VARIABLES
============================================ */
:root {
/* Colors - Primary Palette */
--primary: #6EC1E4;
--primary-dark: #3b82f6;
--primary-light: #e0f2fe;
/* Colors - Text */
--text: #4A4A4A;
--text-dark: #1e293b;
--text-secondary: #54595F;
--text-muted: #94a3b8;
/* Colors - Status */
--danger: #DC3545;
--danger-light: #FFF5F5;
--success: #4caf50;
--success-light: #ecfdf5;
--warning: #f59e0b;
--warning-light: #fffbeb;
/* Colors - Backgrounds & Borders */
--bg-light: #FAFAFA;
--bg-white: #FFFFFF;
--border-light: #E3F2FD;
--border-gray: #e5e7eb;
/* Shadows */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
--shadow-md: 0 4px 16px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
--shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
--shadow-primary: 0 8px 32px rgba(110, 193, 228, 0.25);
--shadow-hover: 0 12px 40px rgba(0,0,0,0.15);
/* Spacing Scale */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 350ms ease;
--transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Border Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Typography - System Font Stacks */
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
--font-serif: 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
}
/* ============================================
2. BASE & RESETS
============================================ */
html {
scroll-behavior: smooth;
}
/* Hide duplicate Astra H1 */
h1.entry-title {
display: none;
}
/* Images */
img {
height: auto;
max-width: 100%;
}
/* Accessibility */
*:focus-visible {
outline: 3px solid var(--primary-dark);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================
3. ARTICLE CONTAINER
============================================ */
.homeo-article {
font-family: var(--font-sans);
font-size: clamp(16px, 2.5vw, 18px);
line-height: 1.75;
color: var(--text);
background-color: var(--bg-white);
max-width: 900px;
margin: 0 auto;
padding: clamp(15px, 4vw, 40px);
}
.homeo-article section ~ section {
margin-top: clamp(35px, 6vw, 60px);
}
/* ============================================
4. TYPOGRAPHY
============================================ */
.homeo-article h1 {
font-family: var(--font-serif);
color: var(--text-dark);
font-size: clamp(1.75rem, 5vw, 2.5rem);
text-align: center;
margin-bottom: var(--space-xl);
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
}
.homeo-article h2 {
font-family: var(--font-serif);
color: var(--text-secondary);
font-size: clamp(1.4rem, 3.5vw, 2rem);
margin-top: 0;
margin-bottom: var(--space-xl);
font-weight: 600;
line-height: 1.3;
border-bottom: 2px solid var(--border-light);
padding-bottom: var(--space-md);
display: flex;
align-items: center;
letter-spacing: -0.01em;
}
.homeo-article h3 {
font-family: var(--font-serif);
color: var(--text-dark);
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
margin-top: var(--space-xl);
margin-bottom: var(--space-md);
font-weight: 600;
letter-spacing: -0.01em;
}
.homeo-article p {
margin: var(--space-md) 0;
}
.homeo-article ul {
margin: var(--space-lg) 0;
padding-left: var(--space-xl);
}
.homeo-article li {
margin-bottom: var(--space-md);
}
.homeo-article strong {
color: var(--text-dark);
font-weight: 600;
}
/* Links */
.homeo-article a {
color: var(--primary-dark);
text-decoration: none;
font-weight: 600;
transition: color var(--transition-fast);
position: relative;
}
.homeo-article a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: width var(--transition-base);
}
.homeo-article a:hover {
color: var(--primary);
}
.homeo-article a:hover::after {
width: 100%;
}
/* Center Italic - για quotes στο conclusion */
.homeo-article .center-italic {
text-align: center;
font-style: italic;
}
/* ============================================
SVG ICONS - CORRECTED v3.2
Style: Outlined/Stroke-based (Lucide-inspired)
ΟΔΗΓΙΕΣ: Αντικατέστησε την ενότητα
"5. HEADING ICONS (SVG)" στο CSS σου
============================================ */
/* --- Base Styles for All Heading Icons --- */
.homeo-article h2::before {
content: "";
display: inline-block;
width: 1.3em;
height: 1.3em;
margin-right: var(--space-md);
vertical-align: -0.15em;
flex-shrink: 0;
/* SVG Mask Technique */
background-color: var(--primary);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: background-color var(--transition-fast);
}
/* ============================================
DISEASE ARTICLE ICONS
============================================ */
/* #intro - Lightbulb (Outlined) */
#intro h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #definition - Book Open (Outlined) */
#definition h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #symptoms - Search/Magnifying Glass (Outlined) */
#symptoms h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #causes - Zap/Lightning (Outlined) ⚡ ΔΙΟΡΘΩΜΕΝΟ */
#causes h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #red-flags - Alert Triangle (Outlined) - DANGER COLOR */
#red-flags h2::before {
background-color: var(--danger);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #homeopathic - Leaf (Outlined) - SUCCESS COLOR */
#homeopathic h2::before {
background-color: var(--success);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #remedies - Pill (Outlined) */
#remedies h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #cases - Clipboard (Outlined) */
#cases h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #patient-reviews - Star (Outlined) ⭐ ΔΙΟΡΘΩΜΕΝΟ - GOLD COLOR */
#patient-reviews h2::before {
background-color: #F59E0B;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #process - Stethoscope (Simplified/Outlined) 🩺 ΔΙΟΡΘΩΜΕΝΟ */
#process h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #testimonials - Star (Outlined) - WARNING/GOLD COLOR */
#testimonials h2::before {
background-color: var(--warning);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #studies - FileText/Document (Outlined) */
#studies h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #lifestyle - Heart (Outlined) */
#lifestyle h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #combination - RefreshCw/Sync (Outlined) */
#combination h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #myths - HelpCircle/Question (Outlined) */
#myths h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #faq - MessageCircle/Chat (Outlined) */
#faq h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #conclusion - Bookmark (Outlined) */
#conclusion h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* ============================================
CASE STUDY ARTICLE ICONS
============================================ */
/* #first-contact - FileEdit (Outlined) */
#first-contact h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #assessment - Stethoscope (same as #process) */
#assessment h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #challenge - ClipboardList (Outlined) */
#challenge h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #patient-profile - User (Outlined) */
#patient-profile h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #approach - Microscope (Simplified/Outlined) 🔬 ΔΙΟΡΘΩΜΕΝΟ */
#approach h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #progress - TrendingUp (Outlined) - SUCCESS COLOR */
#progress h2::before {
background-color: var(--success);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #takeaway - Lightbulb (same as #intro) */
#takeaway h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #next-step - Phone (Outlined) */
#next-step h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* ============================================
REMEDY ARTICLE ICONS
============================================ */
/* #keynotes - Target (Outlined) */
#keynotes h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #constitutional-type - User (same as patient-profile) */
#constitutional-type h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #potencies - Flask (Outlined) */
#potencies h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #differentiation - Scale (Outlined) */
#differentiation h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #indications - Activity/Pulse (Outlined) */
#indications h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #modalities - Thermometer (Outlined) */
#modalities h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #case-study - Clipboard (same as #cases) */
#case-study h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* ============================================
HOVER EFFECTS
============================================ */
.homeo-article h2:hover::before {
background-color: var(--primary-dark);
}
#red-flags h2:hover::before {
background-color: #b91c1c;
}
#homeopathic h2:hover::before,
#progress h2:hover::before {
background-color: #16a34a;
}
#patient-reviews h2:hover::before,
#testimonials h2:hover::before {
background-color: #d97706;
}
/* ============================================
END - SVG ICONS CORRECTED v3.2
Style: Lucide-inspired Outlined
Total: 27 icons
============================================ */
/* ============================================
6. CARDS - Base & Variants
============================================ */
/* Base Info Card */
.info-card {
background: var(--bg-white);
padding: clamp(20px, 4vw, 30px);
margin: var(--space-xl) 0;
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary);
box-shadow: var(--shadow-md);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.info-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Card Variants */
.info-card.notice {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-color: var(--primary);
margin-top: 0;
}
.info-card.success {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-color: var(--success);
}
.info-card.warning {
background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
border-color: #EA580C;
}
.info-card.warning h4 {
color: #C2410C;
margin-top: 0;
}
.info-card.warning p {
color: #9A3412;
}
.info-card.highlight {
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border-color: #F59E0B;
}
.info-card.highlight h4 {
color: #92400E;
margin-top: 0;
}
.info-card.highlight li,
.info-card.highlight p {
color: #78350F;
}
/* Medical Disclaimer */
.medical-disclaimer {
background: var(--danger-light);
border-left: 5px solid var(--danger);
padding: clamp(20px, 4vw, 30px);
margin: var(--space-2xl) 0;
border-radius: var(--radius-md);
}
/* Red Flags Section */
.red-flags-section {
background: linear-gradient(135deg, #FFF5F5 0%, #FFEBEE 100%);
padding: clamp(20px, 4vw, 30px);
margin-top: var(--space-3xl);
margin-bottom: var(--space-2xl);
border-radius: var(--radius-lg);
border-left: 5px solid var(--danger);
box-shadow: var(--shadow-sm);
}
.red-flags-section h2 {
border: none;
color: var(--danger);
margin-top: 0;
}
.red-flags-section ul {
list-style-type: none;
padding-left: 0;
}
/* Safety Box */
.safety-box {
background: linear-gradient(135deg, #FFF5F5 0%, #FEE2E2 100%);
border: 1px solid #FECACA;
border-left: 4px solid var(--danger);
padding: var(--space-lg);
margin-top: var(--space-xl);
border-radius: var(--radius-md);
}
.safety-box h4 {
color: var(--danger);
margin-top: 0;
margin-bottom: var(--space-sm);
font-size: 1.1em;
}
.safety-box p {
margin-bottom: var(--space-sm);
color: #991B1B;
}
.safety-box ul {
margin: 0;
padding-left: var(--space-lg);
}
.safety-box li {
color: #991B1B;
margin-bottom: var(--space-xs);
}
/* ============================================
7. INSTANT ANSWER & CONCLUSION BOXES (REVISED)
============================================ */
.instant-answer-box,
.conclusion-section {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: clamp(25px, 5vw, 45px);
border-radius: var(--radius-xl);
margin: var(--space-2xl) 0;
box-shadow: var(--shadow-primary);
position: relative;
overflow: hidden;
}
.instant-answer-box::before,
.conclusion-section::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.6s ease;
}
.instant-answer-box:hover::before,
.conclusion-section:hover::before {
left: 100%;
}
.instant-answer-box h2,
.conclusion-section h2 {
color: white !important;
margin-top: 0;
border: none;
}
/* --- ΕΔΩ ΕΓΙΝΕ Η ΑΛΛΑΓΗ: SVG icons σε ΧΡΥΣΟ/ΚΙΤΡΙΝΟ --- */
.instant-answer-box h2::before,
.conclusion-section h2::before {
background-color: #FFD700 !important; /* Χρυσό χρώμα για αντίθεση */
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Προαιρετικό: δίνει λίγο βάθος */
}
.instant-answer-box ul,
.conclusion-section ul {
list-style: none;
padding-left: 0;
}
.instant-answer-box li,
.conclusion-section li {
font-size: 1.1em;
margin-bottom: var(--space-md);
}
.instant-answer-box strong,
.conclusion-section strong {
font-weight: 700;
color: #1f2937;
}
/* Success card inside conclusion */
.conclusion-section .info-card.success {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
color: white;
backdrop-filter: blur(4px);
}
.conclusion-section .info-card.success strong {
color: white;
}
/* Stats text in instant answer */
.stats-text {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid rgba(255,255,255,0.3);
font-size: 0.95em;
opacity: 0.9;
}
/* ============================================
8. GRID LAYOUT & CARDS
============================================ */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-xl);
margin-top: var(--space-xl);
}
/* Remedy & Lifestyle & Process Cards - UNIFIED */
.remedy-card,
.lifestyle-card,
.process-card {
background: var(--bg-white);
padding: clamp(20px, 4vw, 30px);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border-top: 4px solid var(--primary);
transition: all var(--transition-base);
}
.remedy-card:hover,
.lifestyle-card:hover,
.process-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.remedy-card h3,
.lifestyle-card h3,
.process-card h3 {
color: var(--text-secondary);
margin-top: 0;
}
/* ============================================
9. FAQ ACCORDION
============================================ */
.faq-item {
background: var(--bg-white);
padding: var(--space-lg);
margin-bottom: var(--space-md);
border-radius: var(--radius-md);
border-left: 4px solid var(--primary);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}
.faq-item:hover {
box-shadow: var(--shadow-md);
}
.faq-item summary {
cursor: pointer;
font-weight: 600;
font-size: 1.05em;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-dark);
transition: color var(--transition-fast);
}
.faq-item summary:hover {
color: var(--primary-dark);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '+';
font-size: 1.5em;
font-weight: 300;
color: var(--primary);
margin-left: var(--space-md);
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-light);
border-radius: var(--radius-full);
transition: all var(--transition-base);
}
.faq-item[open] summary::after {
content: '−';
background: var(--primary);
color: white;
transform: rotate(180deg);
}
.faq-item div {
padding-top: var(--space-md);
margin-top: var(--space-md);
border-top: 1px solid var(--border-gray);
animation: fadeIn var(--transition-base) ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
10. PATIENT REVIEWS SECTION
============================================ */
.reviews-section {
margin: var(--space-3xl) 0;
padding: clamp(25px, 5vw, 40px) clamp(20px, 4vw, 30px);
background: var(--bg-light);
border-radius: var(--radius-lg);
}
.reviews-section h2 {
text-align: center;
margin-bottom: var(--space-2xl);
border: none;
justify-content: center;
}
.review-card {
background: var(--bg-white);
padding: var(--space-lg);
margin-bottom: var(--space-lg);
border-radius: var(--radius-md);
border-left: 4px solid var(--success);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}
.review-card:last-of-type {
margin-bottom: 0;
}
.review-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-sm);
flex-wrap: wrap;
gap: var(--space-sm);
}
.review-author {
font-weight: 600;
color: var(--text-dark);
font-size: 1.1em;
}
.review-stars {
color: #fbbf24;
font-size: 1.2em;
letter-spacing: 2px;
}
.review-meta {
margin-bottom: var(--space-md);
font-size: 0.9em;
color: var(--text-muted);
}
.review-source {
display: inline-block;
}
.review-date {
margin-left: var(--space-sm);
}
.review-date::before {
content: "•";
margin-right: var(--space-sm);
}
.review-text {
color: var(--text);
line-height: 1.7;
font-style: italic;
font-family: var(--font-serif);
position: relative;
padding-left: var(--space-lg);
}
.review-text::before {
content: """;
position: absolute;
left: 0;
top: -5px;
font-size: 2em;
color: var(--success);
opacity: 0.5;
font-family: Georgia, serif;
line-height: 1;
}
.reviews-footer {
text-align: center;
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--border-gray);
}
.reviews-stats {
color: var(--text-muted);
margin-bottom: var(--space-lg);
font-size: 0.95em;
}
.reviews-link {
display: inline-block;
color: var(--success) !important;
text-decoration: none !important;
border: 2px solid var(--success);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-md);
font-weight: 600;
transition: all var(--transition-base);
}
.reviews-link:hover {
background: var(--success);
color: white !important;
}
.reviews-link::after {
content: " →";
transition: transform var(--transition-fast);
}
/* ============================================
11. CASE STUDY MODULE
============================================ */
/* Patient Profile Table */
.table-responsive-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--space-xl) 0;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.patient-profile-table {
width: 100%;
min-width: 450px;
border-collapse: collapse;
background: var(--bg-white);
border-radius: var(--radius-md);
overflow: hidden;
}
.patient-profile-table tr {
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
}
.patient-profile-table tr:hover {
background: var(--bg-light);
}
.patient-profile-table tr:last-child {
border-bottom: none;
}
.patient-profile-table td {
padding: var(--space-md) var(--space-lg);
vertical-align: top;
}
.patient-profile-table td:first-child {
font-weight: 600;
color: var(--text-secondary);
width: 30%;
background: var(--bg-light);
}
.patient-profile-table td:last-child {
color: var(--text);
}
/* Patient Quote */
.patient-quote {
font-family: var(--font-serif);
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-left: 4px solid var(--primary);
padding: clamp(20px, 4vw, 35px);
margin: var(--space-xl) 0;
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
font-style: italic;
font-size: clamp(1rem, 2.5vw, 1.15rem);
line-height: 1.7;
color: var(--text-dark);
position: relative;
box-shadow: var(--shadow-sm);
}
.patient-quote::before {
content: """;
font-size: clamp(3rem, 6vw, 4.5rem);
color: var(--primary);
opacity: 0.25;
position: absolute;
top: -10px;
left: 15px;
font-family: Georgia, serif;
line-height: 1;
}
.patient-quote p {
margin: 0;
position: relative;
z-index: 1;
}
/* Case Timeline */
.case-timeline {
position: relative;
padding-left: 35px;
margin: var(--space-xl) 0;
}
.case-timeline::before {
content: "";
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--primary), var(--success));
border-radius: 3px;
}
.timeline-phase {
position: relative;
margin-bottom: var(--space-xl);
padding-left: var(--space-xl);
}
.timeline-phase:last-child {
margin-bottom: 0;
}
.timeline-phase::before {
content: "";
position: absolute;
left: -31px;
top: 5px;
width: 16px;
height: 16px;
background: var(--bg-white);
border: 3px solid var(--primary);
border-radius: var(--radius-full);
transition: all var(--transition-base);
}
.timeline-phase:hover::before {
transform: scale(1.2);
box-shadow: 0 0 0 4px rgba(110, 193, 228, 0.2);
}
.timeline-phase.phase-complete::before {
background: var(--success);
border-color: var(--success);
}
.timeline-phase h3 {
color: var(--text-secondary);
font-size: 1.15em;
margin-top: 0;
margin-bottom: var(--space-sm);
}
.timeline-phase p {
margin: 0;
color: var(--text);
}
/* Case Highlight */
.case-highlight {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border: 1px solid #a7f3d0;
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius-md);
margin: var(--space-xl) 0;
}
.case-highlight strong {
color: #065f46;
}
/* Approach Categories */
.approach-category {
background: var(--bg-light);
padding: var(--space-lg);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
border-left: 3px solid var(--primary);
transition: all var(--transition-base);
}
.approach-category:hover {
box-shadow: var(--shadow-sm);
border-left-width: 5px;
}
.approach-category h4 {
color: var(--text-secondary);
font-size: 1.05em;
margin-top: 0;
margin-bottom: var(--space-sm);
font-weight: 600;
}
.approach-category ul {
margin: 0;
padding-left: var(--space-lg);
}
.approach-category li {
margin-bottom: var(--space-sm);
color: var(--text);
}
/* Principle Items */
.principle-item {
display: flex;
align-items: flex-start;
margin-bottom: var(--space-lg);
padding: var(--space-md);
background: var(--bg-light);
border-radius: var(--radius-sm);
transition: all var(--transition-base);
}
.principle-item:hover {
background: var(--bg-white);
box-shadow: var(--shadow-sm);
}
.principle-item:last-child {
margin-bottom: 0;
}
.principle-icon {
font-size: 1.5em;
margin-right: var(--space-md);
flex-shrink: 0;
}
.principle-content h4 {
color: var(--text-dark);
font-size: 1.05em;
margin: 0 0 var(--space-xs) 0;
font-weight: 600;
}
.principle-content p {
margin: 0;
color: var(--text);
font-size: 0.95em;
}
/* Case CTA Box */
.case-cta-box {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: clamp(25px, 5vw, 45px);
border-radius: var(--radius-xl);
margin: var(--space-2xl) 0;
text-align: center;
box-shadow: var(--shadow-primary);
position: relative;
overflow: hidden;
}
.case-cta-box::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
pointer-events: none;
}
.case-cta-box h2 {
color: white !important;
border: none !important;
margin-top: 0;
font-size: clamp(1.25rem, 3vw, 1.5rem);
position: relative;
}
.case-cta-box h2::before {
display: none;
}
.case-cta-box p {
font-size: 1.1em;
margin-bottom: var(--space-xl);
opacity: 0.95;
position: relative;
}
.case-cta-contact {
display: flex;
flex-direction: column;
gap: var(--space-md);
align-items: center;
position: relative;
}
.case-cta-contact a {
color: white !important;
font-size: 1.2em;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
background: rgba(255,255,255,0.15);
border-radius: var(--radius-full);
transition: all var(--transition-base);
}
.case-cta-contact a:hover {
background: rgba(255,255,255,0.25);
transform: scale(1.05);
}
/* Case Disclaimer */
.case-disclaimer {
background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
border: 1px solid #fde047;
padding: var(--space-lg);
border-radius: var(--radius-sm);
margin: var(--space-xl) 0;
font-size: 0.95em;
color: #854d0e;
}
.case-disclaimer strong {
color: #a16207;
}
/* ============================================
12. RELATED ARTICLES SECTIONS
============================================ */
/* Related Articles - BEM Style */
.related-articles {
margin-top: var(--space-3xl);
padding: clamp(20px, 4vw, 40px);
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary-dark);
}
.related-articles__title {
font-family: var(--font-serif);
color: var(--text-dark);
font-size: clamp(1.4rem, 3vw, 1.75rem);
margin-bottom: var(--space-lg);
font-weight: 600;
}
.related-articles__intro {
color: var(--text-secondary);
font-size: 1rem;
margin-bottom: var(--space-xl);
line-height: 1.6;
}
.related-articles__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-xl);
}
.related-card {
background: white;
border-radius: var(--radius-md);
padding: clamp(20px, 3vw, 28px);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
border-top: 4px solid;
}
.related-card--green { border-top-color: var(--success); }
.related-card--cyan { border-top-color: var(--primary); }
.related-card--yellow { border-top-color: var(--warning); }
.related-card__emoji {
font-size: 2.5rem;
margin-bottom: var(--space-md);
}
.related-card__title {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--text-dark);
margin-bottom: var(--space-sm);
font-weight: 600;
line-height: 1.3;
}
.related-card__title a {
color: inherit;
text-decoration: none;
}
.related-card__description {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: var(--space-md);
}
.related-card__link {
color: var(--primary-dark);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.related-card__link::after {
content: "→";
transition: transform var(--transition-fast);
}
.related-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
}
.related-card:hover .related-card__link::after {
transform: translateX(4px);
}
/* See Also Section */
.see-also-section {
margin: var(--space-3xl) 0;
padding: clamp(30px, 5vw, 50px) clamp(15px, 4vw, 30px);
background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
border-radius: var(--radius-lg);
}
.see-also-section h2 {
text-align: center;
margin-bottom: var(--space-2xl);
color: var(--text-dark);
font-size: clamp(1.5rem, 3.5vw, 2rem);
border: none;
padding-bottom: 0;
}
.see-also-section h2::before {
display: none;
}
.related-articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-xl);
max-width: 1200px;
margin: 0 auto;
}
.related-article-card {
background: white;
padding: clamp(20px, 3vw, 28px);
border-radius: var(--radius-md);
border: 1px solid var(--border-gray);
transition: all var(--transition-base);
text-align: center;
text-decoration: none !important;
color: inherit !important;
display: block;
cursor: pointer;
}
.related-article-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--success);
}
.article-emoji {
font-size: 2.5em;
display: block;
margin-bottom: var(--space-md);
}
.related-article-card h3 {
margin-bottom: var(--space-sm);
margin-top: 0;
font-size: 1.1em;
color: #059669;
transition: color var(--transition-fast);
}
.related-article-card:hover h3 {
color: #047857;
}
.related-article-card p {
color: var(--text-secondary);
line-height: 1.6;
font-size: 0.95em;
margin-bottom: var(--space-md);
}
.article-tag {
display: inline-block;
background: #dcfce7;
color: #166534;
padding: 6px 16px;
border-radius: var(--radius-full);
font-size: 0.85em;
font-weight: 500;
}
a.related-article-card:link,
a.related-article-card:visited,
a.related-article-card:hover,
a.related-article-card:active {
text-decoration: none !important;
}
/* ============================================
13. COMPARISON TABLES
============================================ */
.comparison-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--space-lg) 0;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-lg) 0;
background: var(--bg-white);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-md);
font-family: var(--font-sans);
}
.comparison-table thead {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.comparison-table th {
color: white;
padding: var(--space-md) var(--space-lg);
text-align: left;
font-weight: 600;
font-size: 0.95em;
vertical-align: middle;
}
.comparison-table th.th-danger {
background: var(--danger) !important;
border-left: 1px solid rgba(255,255,255,0.1);
}
.comparison-table th.th-success {
background: var(--success) !important;
border-left: 1px solid rgba(255,255,255,0.1);
}
.comparison-table th:first-child {
border-radius: var(--radius-md) 0 0 0;
}
.comparison-table th:last-child {
border-radius: 0 var(--radius-md) 0 0;
}
.comparison-table td {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-gray);
vertical-align: middle;
}
.comparison-table tr:last-child td {
border-bottom: none;
}
.comparison-table tr:hover {
background: var(--bg-light);
}
.comparison-table td:first-child {
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-light);
width: 25%;
}
/* Check/Cross Icons */
.icon-check {
color: var(--success);
font-weight: 900;
margin-right: 6px;
font-size: 1.2em;
}
.icon-cross {
color: var(--danger);
font-weight: 900;
margin-right: 6px;
font-size: 1.1em;
}
/* ============================================
14. INDICATIONS & MODALITIES GRIDS
============================================ */
.indications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.indication-card {
background: var(--bg-white);
padding: var(--space-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
border-top: 3px solid var(--primary);
transition: all var(--transition-base);
}
.indication-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.indication-card h4 {
color: var(--text-secondary);
margin-top: 0;
margin-bottom: var(--space-sm);
font-size: 1.05em;
}
.indication-card ul {
margin: 0;
padding-left: var(--space-lg);
}
.indication-card li {
margin-bottom: var(--space-xs);
font-size: 0.95em;
}
/* Modalities Grid */
.modalities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.modality-card {
padding: var(--space-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.modality-card h4 {
margin-top: 0;
margin-bottom: var(--space-md);
font-size: 1.1em;
}
.modality-card ul {
margin: 0;
padding-left: var(--space-lg);
}
.modality-card li {
margin-bottom: var(--space-sm);
}
.modality-card.worse {
background: linear-gradient(135deg, #FFF5F5 0%, #FEE2E2 100%);
border-left: 4px solid var(--danger);
}
.modality-card.worse h4 {
color: var(--danger);
}
.modality-card.better {
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
border-left: 4px solid var(--success);
}
.modality-card.better h4 {
color: #059669;
}
/* ============================================
15. TIMELINE CARDS
============================================ */
.timeline-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.timeline-card {
background: var(--bg-white);
padding: var(--space-lg);
border-radius: var(--radius-md);
border-left: 3px solid var(--primary);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.timeline-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.timeline-card strong {
display: block;
color: var(--primary-dark);
margin-bottom: var(--space-xs);
font-size: 1.05em;
}
.timeline-card p {
margin: 0;
color: var(--text-secondary);
font-size: 0.95em;
line-height: 1.5;
}
.timeline-card.phase-1 {
border-left-color: #F59E0B;
}
.timeline-card.phase-1 strong {
color: #D97706;
}
.timeline-card.phase-2 {
border-left-color: var(--primary);
}
.timeline-card.phase-3 {
border-left-color: var(--success);
}
.timeline-card.phase-3 strong {
color: #059669;
}
/* ============================================
16. CASE STUDY CARD
============================================ */
.case-study-card {
background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
border: 1px solid var(--border-light);
border-left: 4px solid var(--primary);
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.case-study-card h4 {
color: var(--primary-dark);
margin-top: 0;
margin-bottom: var(--space-lg);
font-size: 1.2em;
font-family: var(--font-serif);
}
.case-study-card p {
margin-bottom: var(--space-md);
}
.case-study-card ul {
margin: var(--space-md) 0 0 0;
padding-left: var(--space-lg);
}
.case-study-card li {
margin-bottom: var(--space-sm);
}
.case-study-card li em {
color: var(--text-secondary);
font-weight: 600;
}
/* ============================================
17. FOOTER STYLES
============================================ */
.ultimate-geo-footer {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
font-family: var(--font-sans);
color: #f1f5f9 !important;
line-height: 1.6;
padding: clamp(40px, 6vw, 70px) 0 20px;
border-top: 1px solid rgba(255,255,255,0.1);
overflow-x: hidden;
}
.footer-wrap-full {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 40px);
box-sizing: border-box;
}
.main-doctor-logo {
margin-bottom: var(--space-xl);
text-align: center;
}
.brand-logo {
height: clamp(60px, 8vw, 75px);
width: auto;
max-width: 100%;
transition: transform var(--transition-base);
}
.brand-logo:hover {
transform: scale(1.05);
}
.doctor-name-normal {
font-family: var(--font-serif);
color: #ffffff !important;
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
margin-bottom: var(--space-md);
text-align: center;
text-transform: none;
letter-spacing: -0.01em;
}
.doctor-titles {
color: #cbd5e1 !important;
font-size: clamp(14px, 2vw, 16px);
text-align: center;
margin-bottom: var(--space-xl);
}
.doctor-titles strong {
color: var(--primary) !important;
}
.ai-description,
.secondary-context,
.contact-details p {
color: #e2e8f0 !important;
font-size: clamp(14px, 2vw, 15px);
margin-bottom: var(--space-md);
}
.semantic-content {
text-align: center;
max-width: 1000px;
margin: 0 auto;
}
.semantic-content a {
color: var(--primary) !important;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid rgba(110, 193, 228, 0.3);
transition: all var(--transition-fast);
}
.semantic-content a:hover {
border-bottom-color: var(--primary);
}
.social-icons-footer {
display: flex;
justify-content: center;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.social-icons-footer a {
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition-bounce);
}
.social-icons-footer a:hover {
transform: translateY(-3px) scale(1.1);
}
.social-svg {
width: 32px !important;
height: 32px !important;
fill: #ffffff !important;
background: var(--primary);
border-radius: var(--radius-sm);
padding: 6px;
transition: all var(--transition-base);
}
.social-icons-footer a:hover .social-svg {
background: var(--primary-dark);
box-shadow: 0 4px 12px rgba(110, 193, 228, 0.4);
}
.footer-navigation-grid {
background: rgba(0,0,0,0.2);
padding: clamp(35px, 5vw, 55px) 0;
margin-top: var(--space-2xl);
}
.footer-navigation-grid .grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
}
.nav-column h4 {
color: #ffffff !important;
font-size: clamp(14px, 2vw, 16px);
font-weight: 700;
text-transform: uppercase;
margin-bottom: var(--space-lg);
border-left: 3px solid var(--primary);
padding-left: var(--space-sm);
letter-spacing: 0.05em;
}
.nav-column ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.nav-column li {
margin-bottom: var(--space-sm);
}
.nav-column a {
color: #cbd5e1 !important;
text-decoration: none;
font-size: 14px;
display: inline-block;
transition: all var(--transition-fast);
position: relative;
}
.nav-column a::before {
content: "";
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 4px solid var(--primary);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
opacity: 0;
transition: all var(--transition-fast);
}
.nav-column a:hover {
color: var(--primary) !important;
padding-left: var(--space-md);
}
.nav-column a:hover::before {
opacity: 1;
left: 0;
}
.hours-box {
background: rgba(255,255,255,0.05);
padding: var(--space-md);
border-radius: var(--radius-sm);
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: var(--space-lg);
backdrop-filter: blur(4px);
}
.hours-box p {
color: #e2e8f0 !important;
margin: var(--space-xs) 0;
font-size: 14px;
}
.useful-links-group a {
display: block;
color: #cbd5e1 !important;
text-decoration: none;
font-size: 14px;
margin-bottom: var(--space-sm);
transition: color var(--transition-fast);
}
.useful-links-group a:hover {
color: var(--primary) !important;
}
.useful-links-group a.highlight {
color: var(--primary) !important;
font-weight: 600;
}
.footer-trust-bar {
padding: clamp(35px, 5vw, 55px) 0 20px;
text-align: center;
}
.logo-grid {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(25px, 4vw, 45px);
flex-wrap: wrap;
margin-bottom: var(--space-xl);
}
.logo-container {
background: #fff;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
transition: transform var(--transition-base);
}
.logo-container:hover {
transform: scale(1.05);
}
.logo-container-transparent {
background: transparent;
padding: var(--space-sm) var(--space-md);
}
.trust-logo {
height: clamp(40px, 6vw, 55px);
width: auto;
}
.iach-white {
height: clamp(28px, 4vw, 38px);
filter: brightness(0) invert(1);
}
.contact-details {
margin-bottom: var(--space-xl);
}
.footer-link-highlight {
color: var(--primary) !important;
text-decoration: none;
transition: all var(--transition-fast);
}
.footer-link-highlight:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.medical-disclaimer-refined {
margin: var(--space-xl) auto;
max-width: 900px;
}
.disclaimer-inner {
background: rgba(0, 0, 0, 0.3);
border-left: 4px solid var(--primary);
padding: var(--space-lg);
border-radius: var(--radius-sm);
backdrop-filter: blur(4px);
}
.disclaimer-inner p {
color: #cbd5e1 !important;
font-size: 13px;
font-style: italic;
margin: 0;
}
.disclaimer-inner strong {
color: var(--primary) !important;
}
.disclaimer-icon {
margin-right: var(--space-sm);
}
.copyright-row {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: var(--space-lg);
color: #64748b;
font-size: 13px;
text-align: center;
}
.copyright-row a {
color: #64748b;
text-decoration: none;
margin: 0 var(--space-xs);
transition: color var(--transition-fast);
}
.copyright-row a:hover {
color: var(--primary);
}
/* ============================================
18. ELEMENTOR TABLE OF CONTENTS
============================================ */
.elementor-toc {
border: 1px solid var(--border-light) !important;
border-radius: var(--radius-md) !important;
background-color: var(--bg-light) !important;
padding: var(--space-lg) !important;
box-shadow: var(--shadow-sm) !important;
margin: var(--space-xl) 0 !important;
}
.elementor-toc__header {
border-bottom: 2px solid var(--primary) !important;
padding-bottom: var(--space-sm) !important;
margin-bottom: var(--space-md) !important;
}
.elementor-toc__header-title {
font-family: var(--font-serif) !important;
color: var(--text-dark) !important;
font-weight: 700 !important;
font-size: 1.1em !important;
}
.elementor-toc__list-wrapper {
padding: 0 !important;
}
.elementor-toc__list-item {
margin-bottom: var(--space-xs) !important;
}
.elementor-toc__list-item a {
color: var(--text) !important;
font-family: var(--font-sans) !important;
font-size: 0.95em !important;
text-decoration: none !important;
padding: var(--space-xs) var(--space-sm) !important;
border-radius: var(--radius-sm) !important;
display: block !important;
transition: all var(--transition-fast) !important;
}
.elementor-toc__list-item a:hover {
color: var(--primary-dark) !important;
background: var(--primary-light) !important;
}
.elementor-toc__list-item.elementor-item-active a {
color: var(--primary-dark) !important;
font-weight: 600 !important;
background: var(--primary-light) !important;
}
.elementor-toc__list-item-child a {
padding-left: var(--space-lg) !important;
font-size: 0.9em !important;
}
.elementor-toc__toggle-button {
color: var(--primary-dark) !important;
}
@media (min-width: 1024px) {
.elementor-toc.elementor-toc--sticky {
position: sticky !important;
top: 100px !important;
}
}
/* ============================================
19. MOBILE STICKY BAR
============================================ */
.mobile-sticky-bar {
display: none;
}
@media screen and (max-width: 921px) {
body {
padding-bottom: 85px !important;
}
.mobile-sticky-bar {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
z-index: 2147483647 !important;
background: #ffffff !important;
border-top: 1px solid #e2e8f0;
box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
padding: 10px;
padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
box-sizing: border-box;
}
}
/* Header Stability */
@media (min-width: 922px) {
.elementor-location-header {
min-height: 116px;
}
}
@media (max-width: 921px) {
.elementor-location-header {
min-height: 80px;
}
}
/* Button Animation */
@keyframes pulse-medical {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
.btn-book-animated {
animation: pulse-medical 3s infinite;
will-change: transform;
}
/* ============================================
20. RESPONSIVE BREAKPOINTS
============================================ */
/* Large Tablets & Small Desktops */
@media (max-width: 1024px) {
.footer-navigation-grid .grid-container {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2xl) var(--space-xl);
}
}
/* Tablets */
@media (max-width: 768px) {
.homeo-article {
padding: var(--space-md);
}
.homeo-article h2 {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
.homeo-article h2::before {
margin-right: 0;
margin-bottom: var(--space-xs);
}
.homeo-article section ~ section {
margin-top: var(--space-2xl);
}
.grid-container,
.related-articles__grid,
.related-articles-grid,
.indications-grid,
.modalities-grid,
.timeline-grid {
grid-template-columns: 1fr;
}
.instant-answer-box,
.conclusion-section {
border-radius: var(--radius-lg);
}
.patient-profile-table td:first-child {
width: 40%;
padding: var(--space-sm) var(--space-md);
}
.patient-profile-table td:last-child {
padding: var(--space-sm) var(--space-md);
}
.case-timeline {
padding-left: var(--space-xl);
}
.timeline-phase {
padding-left: var(--space-lg);
}
.timeline-phase::before {
left: -27px;
}
.principle-item {
flex-direction: column;
}
.principle-icon {
margin-bottom: var(--space-sm);
margin-right: 0;
}
.see-also-section {
margin: var(--space-2xl) 0;
}
.comparison-table {
font-size: 0.9em;
}
.comparison-table th,
.comparison-table td {
padding: var(--space-sm) var(--space-md);
}
.comparison-table td:first-child {
width: 30%;
}
.case-study-card,
.timeline-card {
padding: var(--space-lg);
}
/* Reviews responsive */
.review-header {
flex-direction: column;
align-items: flex-start;
}
.review-meta {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.review-date::before {
display: none;
}
.review-date {
margin-left: 0;
}
/* Footer Tablet */
.footer-navigation-grid .grid-container {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2xl);
}
}
/* Mobile */
@media (max-width: 576px) {
.comparison-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--space-lg) 0;
}
.comparison-table {
min-width: 500px;
}
.comparison-table th,
.comparison-table td {
padding: 10px 8px;
font-size: 0.9em;
}
.comparison-table td:first-child {
width: auto;
}
.timeline-card {
padding: var(--space-md);
}
.footer-navigation-grid .grid-container {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.nav-column h4 {
border-left: none;
padding-left: 0;
text-align: center;
color: var(--primary) !important;
margin-bottom: var(--space-md);
}
.nav-column ul {
text-align: center;
}
.nav-column a::before {
display: none;
}
.nav-column a:hover {
padding-left: 0;
}
.hours-box {
text-align: center;
}
.useful-links-group {
text-align: center;
}
.logo-grid {
gap: var(--space-lg);
}
.contact-details {
text-align: center;
}
.disclaimer-inner {
text-align: center;
border-left: none;
border-top: 4px solid var(--primary);
}
.case-cta-contact a {
font-size: 1em;
padding: var(--space-sm) var(--space-md);
}
.social-icons-footer {
gap: var(--space-md);
}
}
/* Small Mobile */
@media (max-width: 375px) {
.homeo-article {
padding: var(--space-sm);
}
.info-card,
.remedy-card,
.lifestyle-card,
.process-card,
.faq-item {
padding: var(--space-md);
}
.instant-answer-box,
.conclusion-section,
.case-cta-box {
padding: var(--space-lg);
}
.logo-grid {
flex-direction: column;
gap: var(--space-md);
}
}
/* ============================================
21. PRINT STYLES
============================================ */
@media print {
.case-cta-box,
.see-also-section,
.related-articles,
.elementor-toc,
.mobile-sticky-bar,
nav,
header,
footer,
.sidebar,
.comments,
.social-share,
.ultimate-geo-footer {
display: none !important;
}
.homeo-article {
max-width: 100%;
padding: 0;
font-size: 12pt;
line-height: 1.5;
color: black;
background: white;
}
.homeo-article h1,
.homeo-article h2,
.homeo-article h3 {
font-family: Georgia, serif;
color: black;
page-break-after: avoid;
}
.homeo-article h2 {
border-bottom-color: #ccc;
}
.homeo-article h2::before {
background-color: #333 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.homeo-article a::after {
display: none;
}
.homeo-article a {
color: black;
text-decoration: none;
}
.patient-profile-table,
.case-timeline,
.info-card,
.patient-quote,
.faq-item {
page-break-inside: avoid;
}
.info-card,
.patient-quote,
.case-highlight,
.faq-item {
box-shadow: none;
border: 1px solid #ccc;
}
.instant-answer-box,
.conclusion-section {
background: #f5f5f5 !important;
color: black !important;
box-shadow: none;
border: 1px solid #ccc;
}
.instant-answer-box::before,
.conclusion-section::before {
display: none;
}
.instant-answer-box h2,
.conclusion-section h2,
.instant-answer-box strong,
.conclusion-section strong {
color: black !important;
}
.case-timeline::before {
background: #ccc;
}
.timeline-phase::before {
border-color: #666;
}
.patient-profile-table {
box-shadow: none;
}
.patient-profile-table td:first-child {
background: #f5f5f5;
}
}
/* ============================================
22. REVIEW BADGES (Footer)
============================================ */
.reviews-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 25px 0;
}
.review-badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 12px 18px;
text-decoration: none;
transition: all 0.2s ease;
}
.review-badge:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.review-badge .badge-icon {
flex-shrink: 0;
}
.review-badge .da-logo {
border-radius: 4px;
aspect-ratio: 100 / 24;
height: auto;
}
.review-badge .badge-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.review-badge .rating-line {
display: flex;
align-items: center;
gap: 8px;
}
.review-badge .rating-number {
font-size: 1.3rem;
font-weight: 700;
color: #fff;
}
.review-badge .rating-max {
font-size: 0.85rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
}
.review-badge .stars {
color: #FBBC05;
font-size: 0.95rem;
letter-spacing: 1px;
}
.review-badge .da-stars {
color: #00BFA5;
}
.review-badge .review-count {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
}
.appointment-note {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
margin-top: 8px;
font-style: italic;
}
/* Review Badges Mobile */
@media (max-width: 768px) {
.reviews-badges {
flex-direction: column;
align-items: center;
}
.review-badge {
width: 100%;
max-width: 260px;
justify-content: center;
}
}
/* ============================================
23. UTILITY CLASSES & FIXES
============================================ */
/* Mobile popup spacing */
@media (max-width: 768px) {
.elementor-popup-modal .elementor-widget-form,
.elementor-popup-modal .yhd-popup-container {
padding-bottom: 100px !important;
}
}
/* Buttons & CTAs - no underline */
a[class*="cta"],
a[class*="btn"],
.reviews-link,
.related-article-card,
.case-cta-contact a {
text-decoration: none !important;
}
a[class*="cta"]::after,
a[class*="btn"]::after,
.reviews-link::after,
.related-article-card::after,
.case-cta-contact a::after {
display: none !important;
}
/* ============================================
ΠΡΟΣΘΗΚΕΣ CSS - για ouroloimokseis article
Πρόσθεσε στο τέλος του CSS σου
============================================ */
/* CTA Button - για inline call-to-action */
.cta-button {
display: inline-block;
background: var(--primary-dark);
color: white !important;
padding: var(--space-sm) var(--space-lg);
text-decoration: none !important;
border-radius: var(--radius-md);
font-weight: 600;
margin-top: var(--space-md);
transition: all var(--transition-base);
}
.cta-button:hover {
background: var(--primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.cta-button::after {
display: none !important;
}
/* Table Title - για τίτλους πάνω από πίνακες */
.table-title {
color: var(--text-dark);
margin-bottom: var(--space-lg);
font-size: 1.3em;
text-align: center;
font-family: var(--font-serif);
}
/* Info Card h4 - για subtitles μέσα σε cards */
.info-card h4 {
color: var(--text-secondary);
margin-top: 0;
margin-bottom: var(--space-md);
font-size: 1.1em;
}
.info-card.warning h4 {
color: #C2410C;
}
/* ============================================
ICONS ΓΙΑ ΤΟ ΑΡΘΡΟ: Ομοιοπαθητικό Φαρμακείο Σπιτιού
Προσθέστε αυτόν τον κώδικα στο: Εμφάνιση > Προσαρμογή > Πρόσθετο CSS
============================================ */
/* #why - Γιατί Χρειάζεστε (Question Mark / Help icon) */
#why h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #how-to-get - Πού θα Βρείτε (Location / Map Pin icon) */
#how-to-get h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #storage - Πώς να τα Αποθηκεύετε (Box / Archive icon) */
#storage h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #how-to-use - Πώς Λειτουργεί (Phone / Call icon) */
#how-to-use h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* ============================================
REMEDY ARTICLES - Additional Styles
YourHomeoDoctor.com
Version 1.0
ΟΔΗΓΙΕΣ: Προσθέστε αυτό στο τέλος του
κύριου CSS ή σε ξεχωριστό αρχείο
============================================ */
/* ============================================
1. ATTRIBUTION TEXT
Για το meta-text κάτω από την εισαγωγή
============================================ */
.homeo-article .meta-text {
font-size: 0.9rem;
color: var(--text-muted);
font-style: italic;
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--border-light);
}
/* ============================================
2. SOFT CLOSING SECTION
Για το κλείσιμο χωρίς box, μόνο κείμενο
============================================ */
.homeo-article #closing {
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-light);
color: var(--text-secondary);
font-style: italic;
}
.homeo-article #closing p {
margin-bottom: 0;
}
/* ============================================
3. CHARACTERISTICS SECTION
Για τα χαρακτηριστικά του φαρμάκου
============================================ */
.homeo-article #characteristics p {
margin-bottom: var(--space-md);
line-height: 1.7;
}
.homeo-article #characteristics p:last-child {
margin-bottom: 0;
}
.homeo-article #characteristics strong {
color: var(--text-dark);
}
/* ============================================
4. ESSENCE SECTION - QUOTE STYLING
Για το quote στο κεντρικό θέμα
============================================ */
.homeo-article #essence em {
display: block;
font-size: 1.1rem;
color: var(--text-dark);
padding: var(--space-md) var(--space-lg);
background: var(--bg-light);
border-left: 4px solid var(--primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin-top: var(--space-md);
}
/* ============================================
5. CONDITIONS SECTION
Για τη λίστα παθήσεων
============================================ */
.homeo-article #conditions ul {
margin: var(--space-md) 0;
}
.homeo-article #conditions li {
margin-bottom: var(--space-sm);
}
.homeo-article #conditions a {
font-weight: 500;
}
/* ============================================
6. MODALITIES SECTION
Για τις επιδεινώσεις/βελτιώσεις
============================================ */
.homeo-article #modalities p {
margin-bottom: var(--space-sm);
}
.homeo-article #modalities strong {
color: var(--text-dark);
min-width: 140px;
display: inline-block;
}
/* ============================================
7. MOBILE ADJUSTMENTS
============================================ */
@media (max-width: 768px) {
.homeo-article .meta-text {
font-size: 0.85rem;
}
.homeo-article #essence em {
font-size: 1rem;
padding: var(--space-sm) var(--space-md);
}
.homeo-article #modalities strong {
display: block;
margin-bottom: var(--space-xs);
}
}
/* ============================================
8. PRINT STYLES
============================================ */
@media print {
.homeo-article .meta-text {
color: #666;
}
.homeo-article #essence em {
border-left-color: #333;
background: #f5f5f5;
}
.homeo-article #closing {
border-top-color: #ccc;
}
}
/* ============================================
REMEDY ARTICLE ICONS
Προσθέστε αυτό μετά τα υπάρχοντα REMEDY ARTICLE ICONS
στην ενότητα "5. HEADING ICONS (SVG)"
============================================ */
/* #essence - Target (Κεντρικό θέμα/ουσία) */
#essence h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #characteristics - Eye (Παρατήρηση) */
#characteristics h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #conditions - Stethoscope (Ιατρικές ενδείξεις) */
#conditions h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #closing - Feather (Soft bridge) */
#closing h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #summary - List (Σύνοψη Ιδιοτήτων) */
#summary h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #generations - Users (Γενιές/Άνθρωποι) */
#generations h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* 1. Το Grid (Το πλέγμα που τις στοιχίζει) */
.related-articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 30px;
}
/* 2. Η Κάρτα (Το σώμα) */
.related-article-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px;
text-decoration: none !important;
transition: all 0.3s ease;
position: relative;
height: 100%; /* Για να έχουν όλες το ίδιο ύψος */
}
.related-article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
border-color: #046bd2;
}
/* 3. Το Emoji */
.article-emoji {
font-size: 2rem;
margin-bottom: 15px;
display: block;
}
/* 4. Τίτλος & Κείμενο */
.related-article-card h3 {
color: #1e293b;
font-size: 1.15rem;
margin: 0 0 10px 0;
font-weight: 700;
}
.related-article-card p {
color: #64748b;
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 20px;
flex-grow: 1; /* Σπρώχνει το tag στο κάτω μέρος */
}
/* 5. Το Tag (Το ταμπελάκι "Ουρολογικό" κτλ) */
.article-tag {
display: inline-block;
align-self: flex-start;
background: #f1f5f9;
color: #475569;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#adolescents h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.messaging-line {
margin-top: 5px;
}
.messaging-icon {
display: inline-flex;
vertical-align: middle;
margin-left: 6px;
}
.messaging-icon svg {
transition: opacity 0.3s ease;
}
.messaging-icon:hover svg {
opacity: 0.7;
}
.messaging-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 6px;
}
/* #sources - BookMarked (Πηγές/Βιβλιογραφία) */
#sources h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* ============================================
HUB: ΑΝΔΡΙΚΗ ΥΓΕΙΑ - SVG ICONS
Προσθήκη στο Πρόσθετο CSS
============================================ */
/* #prostatitida - Shield (Προστασία) */
#prostatitida h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #kyp - Activity/Pulse (Ουροδυναμική) */
#kyp h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #stytiki - Heart (Σεξουαλική υγεία) */
#stytiki h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #ypogonimotita - Baby (Γονιμότητα) */
#ypogonimotita h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #syntrofoi - Users (Ζευγάρι) */
#syntrofoi h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #case - Clipboard (Κλινικό Περιστατικό) */
#case h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Διόρθωση ορατότητας για το κείμενο "*Βάσει κλινικών..." μέσα στο μπλε κουτί */
.instant-answer-box .meta-text {
color: rgba(255, 255, 255, 0.9) !important; /* Σχεδόν λευκό για μέγιστη αντίθεση */
border-top-color: rgba(255, 255, 255, 0.3) !important; /* Διακριτική λευκή γραμμή */
font-size: 0.95rem; /* Ελαφρώς μεγαλύτερο για καλύτερη αναγνωσιμότητα */
margin-top: 15px;
padding-top: 10px;
}
/* Διασφάλιση ότι και τα στατιστικά (stats-text) φαίνονται καλά */
.instant-answer-box .stats-text {
color: #ffffff !important;
opacity: 1;
font-weight: 500;
}
/* ============================================
SVG ICONS — Άρθρο: Πώς Δρα η Ομοιοπαθητική
============================================ */
/* #research-overview - BarChart (Έρευνα) */
#research-overview h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #paradox - HelpCircle (Παράδοξο) */
#paradox h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #nanoparticles - Circles (Νανοσωματίδια) */
#nanoparticles h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #water-structures - Droplet (Δομές Νερού) */
#water-structures h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #complex-systems - Sun (Σύνθετα Συστήματα) */
#complex-systems h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #quantum-theory - Atom (Κβαντική) */
#quantum-theory h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #experimental-evidence - Flask (Εργαστήριο) */
#experimental-evidence h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #studies - BookmarkDown (Βιβλιογραφία) */
#studies h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #research-quality - AlertTriangle (Ποιότητα Έρευνας) */
#research-quality h2::before {
background-color: #EA580C;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* #myths - EyeOff (Μύθοι) */
#myths h2::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* ============================================
END OF CSS - Version 3.1 SVG Icons Edition
Total: ~2300 lines
============================================ *//* End custom CSS */