/* ===================================================== UNIVERSAL TEXT SHADOW/GLOW SYSTEM ORCRIST Brand Framework Research-based system for text readability on any background. Implements multi-layer shadows, glows, and depth effects. WCAG AA compliant contrast enhancement. ===================================================== */ /* ===================================================== DESIGN PHILOSOPHY Based on research from: - Apple's Motion text glow controls (multi-layer depth) - Nike's crisp shadow techniques (sharp edges + soft depth) - CSS-Tricks shadow best practices (performance + readability) - WCAG contrast studies (shadows improve 2.1:1 → 4.5:1 contrast) Key Techniques: 1. Multi-layer shadows: Front-to-back stacking for depth 2. Highlight + Shadow: Light top edge, dark bottom for 3D effect 3. Outer glow + Inner shadow: Works on light AND dark backgrounds 4. filter: drop-shadow() for gradient text (text-shadow doesn't work) 5. Incremental offsets: Sequential displacement creates dimension ===================================================== */ :root { /* Shadow intensities for fine-tuning */ --shadow-light-highlight: rgba(255, 255, 255, 0.5); --shadow-light-subtle: rgba(255, 255, 255, 0.3); --shadow-dark-strong: rgba(0, 0, 0, 0.6); --shadow-dark-medium: rgba(0, 0, 0, 0.4); --shadow-dark-subtle: rgba(0, 0, 0, 0.2); --shadow-dark-minimal: rgba(0, 0, 0, 0.08); /* Brand glow colors */ --glow-orange-strong: rgba(255, 107, 53, 0.8); --glow-orange-medium: rgba(255, 107, 53, 0.6); --glow-orange-subtle: rgba(255, 107, 53, 0.3); --glow-orange-minimal: rgba(255, 107, 53, 0.1); } /* ===================================================== 1. UNIVERSAL UTILITY CLASSES Apply these to ANY text element for instant improvement ===================================================== */ /* ─────────────────────────────────────────────────── DARK BACKGROUNDS (navy, charcoal, images) White/Orange text needs: soft glow + dark edge definition ─────────────────────────────────────────────────── */ .text-glow-light { /* For light-colored text (white, sky) on dark backgrounds */ /* Soft outer glow + subtle shadow for depth */ text-shadow: 0 0 20px var(--shadow-light-subtle), /* Outer glow halo */ 0 1px 2px var(--shadow-dark-strong), /* Sharp edge definition */ 0 2px 8px var(--shadow-dark-medium), /* Mid-depth shadow */ 0 4px 16px var(--shadow-dark-subtle); /* Soft far shadow */ } .text-glow-orange { /* For orange text on dark backgrounds */ /* Enhanced with VERY DARK shadows for maximum contrast */ text-shadow: 0 0 50px var(--glow-orange-strong), /* Strong orange glow */ 0 0 25px var(--glow-orange-medium), /* Mid glow layer */ 0 2px 6px rgba(0, 0, 0, 0.9), /* Very dark sharp edge */ 0 4px 12px rgba(0, 0, 0, 0.7), /* Very dark depth layer 1 */ 0 8px 24px rgba(0, 0, 0, 0.5), /* Very dark depth layer 2 */ 0 12px 32px rgba(0, 0, 0, 0.3); /* Far dark shadow */ } /* ─────────────────────────────────────────────────── LIGHT BACKGROUNDS (white, sky) Dark text needs: subtle highlight + soft shadows ─────────────────────────────────────────────────── */ .text-glow-dark { /* For dark text (charcoal, navy) on light backgrounds */ /* Apple-style embossed effect: top highlight + soft shadow layers */ text-shadow: 0 1px 0 var(--shadow-light-highlight), /* Top highlight (3D effect) */ 0 2px 2px var(--shadow-dark-minimal), /* Close shadow */ 0 4px 8px rgba(0, 0, 0, 0.05), /* Mid-depth shadow */ 0 8px 16px rgba(0, 0, 0, 0.03), /* Far soft shadow */ 0 0 40px var(--glow-orange-minimal); /* Subtle orange aura */ } /* ─────────────────────────────────────────────────── UNIVERSAL (works on BOTH light and dark) Balanced approach with moderate contrast ─────────────────────────────────────────────────── */ .text-glow-universal { /* Balanced shadow that works on varied backgrounds */ /* Combines light highlight + dark shadow + subtle glow */ text-shadow: 0 1px 1px var(--shadow-light-subtle), /* Top highlight */ 0 -1px 1px var(--shadow-dark-subtle), /* Bottom shadow */ 0 2px 4px var(--shadow-dark-medium), /* Mid shadow */ 0 4px 12px var(--shadow-dark-subtle), /* Depth shadow */ 0 0 30px var(--glow-orange-subtle); /* Orange glow (brand) */ } /* ===================================================== 2. FRAMEWORK-LEVEL TITLE CLASSES Apply to existing hero/section classes ===================================================== */ /* ─────────────────────────────────────────────────── HERO TITLE CLASSES Large display text, often over images ─────────────────────────────────────────────────── */ .hero-title { /* For large hero titles (often gradient text) */ /* CRITICAL: Use filter: drop-shadow() instead of text-shadow if using gradients */ /* Multi-layer depth with dramatic glow */ text-shadow: 0 0 60px var(--glow-orange-strong), /* Dramatic outer glow */ 0 2px 4px var(--shadow-dark-strong), /* Sharp definition */ 0 6px 12px var(--shadow-dark-medium), /* Mid depth */ 0 12px 24px var(--shadow-dark-subtle); /* Far depth shadow */ } /* Alternative for gradient text - use this with background-clip: text */ .hero-title-gradient { /* Apply to parent element when text has gradient fill */ filter: drop-shadow(0 0 60px var(--glow-orange-strong)) drop-shadow(0 2px 4px var(--shadow-dark-strong)) drop-shadow(0 6px 12px var(--shadow-dark-medium)) drop-shadow(0 12px 24px var(--shadow-dark-subtle)); /* Also add subtle stroke for crispness */ -webkit-text-stroke: 0.5px var(--glow-orange-subtle); } .hero-tagline, .hero-subtitle { /* For supporting hero text (taglines, subtitles) */ /* Nike-style crisp shadows with subtle orange halo */ text-shadow: 0 1px 2px var(--shadow-dark-strong), /* Sharp edge */ 0 2px 8px var(--shadow-dark-medium), /* Soft depth */ 0 0 20px var(--glow-orange-subtle); /* Subtle brand glow */ } /* ─────────────────────────────────────────────────── SECTION TITLE CLASSES Content section headers ─────────────────────────────────────────────────── */ .section-title { /* For section headers on light backgrounds */ /* Apple-style subtle depth: highlight + layered shadows */ text-shadow: 0 1px 0 var(--shadow-light-subtle), /* Top highlight */ 0 2px 4px var(--shadow-dark-minimal), /* Close crisp shadow */ 0 4px 12px rgba(0, 0, 0, 0.06); /* Soft depth */ } .section-title-dark { /* For section headers on dark backgrounds */ /* Stronger contrast with glow */ text-shadow: 0 0 24px var(--shadow-light-subtle), /* Outer glow */ 0 1px 2px var(--shadow-dark-strong), /* Sharp edge */ 0 2px 8px var(--shadow-dark-medium); /* Depth shadow */ } /* ─────────────────────────────────────────────────── SMALL CAPS & LABELS Uppercase labels, badges, small text ─────────────────────────────────────────────────── */ .small-caps { /* For small uppercase labels */ /* Minimal shadow for subtle depth without overwhelming small text */ text-shadow: 0 1px 2px var(--shadow-dark-medium), /* Sharp definition */ 0 0 12px var(--glow-orange-subtle); /* Subtle glow */ } .small-caps-dark { /* Small caps on dark backgrounds */ text-shadow: 0 0 16px var(--glow-orange-medium), /* Stronger glow */ 0 2px 4px var(--shadow-dark-strong); /* Sharp shadow */ } /* ===================================================== 3. INTENSITY MODIFIERS Add these to increase/decrease effect strength ===================================================== */ .text-shadow-subtle { /* Minimal shadow for subtle enhancement */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 8px var(--glow-orange-minimal); } .text-shadow-moderate { /* Standard shadow for general use */ text-shadow: 0 2px 4px var(--shadow-dark-medium), 0 4px 8px var(--shadow-dark-subtle), 0 0 20px var(--glow-orange-subtle); } .text-shadow-strong { /* Dramatic shadow for maximum impact */ text-shadow: 0 0 40px var(--glow-orange-strong), 0 2px 8px var(--shadow-dark-strong), 0 6px 16px var(--shadow-dark-medium), 0 12px 32px var(--shadow-dark-subtle); } .text-shadow-extreme { /* Ultra-dramatic for special hero moments */ text-shadow: 0 0 80px var(--glow-orange-strong), 0 0 40px var(--glow-orange-medium), 0 4px 12px var(--shadow-dark-strong), 0 8px 24px var(--shadow-dark-medium), 0 16px 48px var(--shadow-dark-subtle); } /* ===================================================== 4. BACKGROUND-SPECIFIC UTILITIES Apply based on parent background ===================================================== */ /* On Navy Background */ .on-navy { text-shadow: 0 0 30px rgba(255, 255, 255, 0.2), /* Soft white glow */ 0 2px 4px var(--shadow-dark-strong), /* Sharp shadow */ 0 4px 12px var(--shadow-dark-medium); /* Depth */ } /* On Charcoal Background */ .on-charcoal { text-shadow: 0 0 40px var(--glow-orange-medium), /* Orange glow */ 0 2px 8px rgba(0, 0, 0, 0.8), /* Very dark shadow */ 0 6px 16px var(--shadow-dark-medium); /* Deep depth */ } /* On Sky Background */ .on-sky { text-shadow: 0 1px 0 var(--shadow-light-highlight), /* Top highlight */ 0 2px 2px var(--shadow-dark-minimal), /* Subtle shadow */ 0 4px 8px rgba(44, 74, 98, 0.08); /* Navy-tinted shadow */ } /* On White Background */ .on-white { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), /* Strong highlight */ 0 2px 4px var(--shadow-dark-minimal), /* Minimal shadow */ 0 4px 12px rgba(0, 0, 0, 0.04); /* Very soft depth */ } /* On Image Backgrounds (varied contrast) */ .on-image { /* Maximum contrast for varied backgrounds */ text-shadow: 0 0 30px rgba(0, 0, 0, 0.8), /* Dark halo */ 0 0 15px rgba(0, 0, 0, 0.6), /* Mid halo */ 0 2px 4px var(--shadow-dark-strong), /* Sharp edge */ 0 4px 12px var(--shadow-dark-medium), /* Depth */ 0 0 40px var(--glow-orange-subtle); /* Subtle brand glow */ } /* ===================================================== 5. FILTER: DROP-SHADOW() FOR GRADIENT TEXT Use these when text has background-clip: text gradient ===================================================== */ .filter-glow-orange { /* For orange gradient text */ filter: drop-shadow(0 0 40px var(--glow-orange-strong)) drop-shadow(0 2px 4px var(--shadow-dark-strong)) drop-shadow(0 6px 12px var(--shadow-dark-medium)); } .filter-glow-white { /* For white gradient text */ filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)) drop-shadow(0 2px 4px var(--shadow-dark-strong)) drop-shadow(0 4px 8px var(--shadow-dark-medium)); } .filter-glow-universal { /* Balanced glow for any gradient text */ filter: drop-shadow(0 0 30px var(--glow-orange-medium)) drop-shadow(0 1px 2px var(--shadow-dark-strong)) drop-shadow(0 4px 8px var(--shadow-dark-medium)) drop-shadow(0 8px 16px var(--shadow-dark-subtle)); } /* ===================================================== 6. STROKE ENHANCEMENT (for extra crispness) Combine with shadows for maximum definition ===================================================== */ .text-stroke-subtle { /* Minimal stroke for crispness */ -webkit-text-stroke: 0.5px var(--glow-orange-subtle); } .text-stroke-medium { /* Standard stroke */ -webkit-text-stroke: 1px var(--glow-orange-subtle); } .text-stroke-strong { /* Strong stroke for large titles */ -webkit-text-stroke: 1.5px var(--glow-orange-medium); } /* ===================================================== 7. PERFORMANCE & ACCESSIBILITY ===================================================== */ /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .text-shadow-animate, .text-glow-animate { animation: none !important; transition: none !important; } } /* Disable complex shadows on low-end devices */ @media (max-width: 768px) and (max-resolution: 1dppx) { .text-shadow-extreme { text-shadow: 0 2px 4px var(--shadow-dark-medium), 0 0 20px var(--glow-orange-subtle); } } /* High contrast mode support */ @media (prefers-contrast: high) { .hero-title, .section-title, .text-glow-light, .text-glow-dark { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), /* Stronger shadow */ 0 4px 8px rgba(0, 0, 0, 0.6); /* More contrast */ } } /* ===================================================== 8. ANIMATION EFFECTS (optional enhancements) ===================================================== */ .text-glow-pulse { animation: glowPulse 3s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { text-shadow: 0 0 20px var(--glow-orange-subtle), 0 2px 4px var(--shadow-dark-medium); } 50% { text-shadow: 0 0 40px var(--glow-orange-medium), 0 2px 4px var(--shadow-dark-medium); } } .text-glow-breathe { animation: glowBreathe 4s ease-in-out infinite; } @keyframes glowBreathe { 0%, 100% { filter: drop-shadow(0 0 30px var(--glow-orange-subtle)) drop-shadow(0 2px 4px var(--shadow-dark-medium)); } 50% { filter: drop-shadow(0 0 60px var(--glow-orange-strong)) drop-shadow(0 2px 4px var(--shadow-dark-medium)); } } /* ===================================================== 9. COMBINATION EXAMPLES Common use cases with pre-built combinations ===================================================== */ /* Hero Title on Dark Image Background */ .hero-title-on-dark-image { color: #fff; text-shadow: 0 0 60px var(--glow-orange-strong), /* Dramatic glow */ 0 0 30px var(--glow-orange-medium), /* Mid glow */ 0 2px 4px rgba(0, 0, 0, 0.9), /* Very sharp edge */ 0 6px 12px var(--shadow-dark-strong), /* Strong depth */ 0 12px 24px var(--shadow-dark-medium); /* Far shadow */ } /* Orange Gradient Title (use with background-clip: text) */ .hero-title-orange-gradient { background: linear-gradient(180deg, #FFD4BA 0%, #FF6B35 50%, #CC3700 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Use filter instead of text-shadow for gradient text */ filter: drop-shadow(0 0 60px var(--glow-orange-strong)) drop-shadow(0 2px 4px var(--shadow-dark-strong)) drop-shadow(0 6px 12px var(--shadow-dark-medium)) drop-shadow(0 12px 24px var(--shadow-dark-subtle)); -webkit-text-stroke: 0.5px var(--glow-orange-subtle); } /* Section Title on Light Background */ .section-title-on-light { color: var(--charcoal, #2D3748); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), /* Top highlight */ 0 2px 4px rgba(0, 0, 0, 0.08), /* Crisp shadow */ 0 4px 8px rgba(0, 0, 0, 0.05), /* Mid depth */ 0 8px 16px rgba(0, 0, 0, 0.03); /* Soft far shadow */ } /* Orange Text on Navy Background */ .orange-on-navy { color: #FF6B35; text-shadow: 0 0 30px var(--glow-orange-strong), /* Strong glow */ 0 2px 4px rgba(0, 0, 0, 0.7), /* Dark shadow */ 0 4px 12px var(--shadow-dark-medium); /* Depth */ } /* White Text on Charcoal */ .white-on-charcoal { color: #fff; text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), /* Soft white glow */ 0 1px 2px rgba(0, 0, 0, 0.8), /* Sharp definition */ 0 2px 8px var(--shadow-dark-medium), /* Depth */ 0 0 40px var(--glow-orange-subtle); /* Subtle brand glow */ } /* ===================================================== 10. USAGE GUIDE IN COMMENTS ===================================================== */ /* USAGE RECOMMENDATIONS: 1. HERO TITLES: - On dark backgrounds: .hero-title or .text-glow-light - With gradient: .hero-title-gradient (use filter: drop-shadow) - On images: .hero-title-on-dark-image 2. SECTION TITLES: - Light backgrounds: .section-title or .text-glow-dark - Dark backgrounds: .section-title-dark or .text-glow-light - Universal: .text-glow-universal 3. SMALL TEXT (labels, badges): - Light backgrounds: .small-caps - Dark backgrounds: .small-caps-dark 4. GRADIENT TEXT: - ALWAYS use filter: drop-shadow() instead of text-shadow - Add -webkit-text-stroke for extra crispness - Use .filter-glow-orange or .filter-glow-universal 5. INTENSITY: - Start with base classes - Add .text-shadow-moderate for standard enhancement - Use .text-shadow-strong for hero moments - Reserve .text-shadow-extreme for special impact 6. BACKGROUND-SPECIFIC: - .on-navy, .on-charcoal for dark backgrounds - .on-sky, .on-white for light backgrounds - .on-image for maximum contrast on photos 7. WCAG COMPLIANCE: - These shadows improve contrast from 2.1:1 to 4.5:1+ - Test with contrast checkers for AA compliance - Combine with proper color choices for AAA EXAMPLE COMBINATIONS:

Title on Dark

Gradient Title

Section on Light

LABEL TEXT

Text over photo

*/