/* ========================================================================== * Tailwind v4 Compatibility Rules * Added: February 4, 2026 (tailwind-v4-upgrade branch) * These rules preserve v3 default behaviors that changed in v4. * ========================================================================== */ /* Preserve v3 default border color (gray-200 instead of v4's currentColor) */ *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentColor); } /* Preserve pointer cursor on buttons (v4 changed to default cursor) */ button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } /* Restore v3 container responsive max-widths (v4 only sets width: 100%) IMPORTANT: Must be in @layer base so Tailwind utilities (e.g. max-w-full) can override them. Un-layered CSS always beats @layer utilities in v4's cascade layer model. */ @layer base { .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } } /** * ============================================================================ * RAVENSCROFT PORTFOLIO - LIQUID GLASS DESIGN SYSTEM * ============================================================================ * * Version: 9.0 - PHASE 4 COMPLETE: SYSTEMATIC OPTIMIZATION * Last Updated: January 20, 2026 * Design Language: Apple-inspired Liquid Glass * Status: Phase 4 Complete - Consolidated & Optimized * * IMPLEMENTATION PHASES: * ✅ Phase 1: Foundation - Typography & Spacing System * ✅ Phase 2: Color Refinement & Depth - Shadows, Gradients, Hover States * ✅ Phase 3: Interactive Elements - Animations, Modals, Polish * ✅ Phase 4: Page-Specific Enhancements - Navigation, Hero, Stats, Mobile * ✅ Phase 5: Accessibility, Performance & Micro-interactions * ✅ Phase 6: Liquid Glass Design System - Complete Implementation * ✅ Phase 7: Consolidation - Navigation, Modals, Text Alignment (97 lines removed) * ✅ Phase 8: Performance - @supports Consolidation, !important Reduction (171 lines removed) * * LIQUID GLASS COMPONENTS: * ✅ Design System Variables (blur, opacity, tints, saturation, shadows) * ✅ Navigation (consolidated, scroll-triggered states, glass backgrounds) * ✅ Cards & Containers (spotlight, stat, base, gradient variants) * ✅ Buttons (primary, gold, with glass glows) * ✅ Forms & Inputs (text, select, checkbox, radio, file, search, Quill) * ✅ Modals (consolidated system, backdrop, content, fixed headers, animations) * ✅ Badges & Status Indicators (status, tags, dots, notifications) * ✅ Colored Sections (purple, blue, green, red, orange notes) * ✅ Tabs (base, hover, active states with glass) * ✅ Dropdown Menus (glass containers, animated items) * ✅ Progress Bars (frosted containers, animated fills) * ✅ Tables (glass headers, frosted rows, hover states) * ✅ Footer (gradient glass background, glass links) * ✅ Loading & Spinner (enhanced with glass effects) * ✅ Animations (page transitions, scroll reveals, micro-interactions) * ✅ Accessibility (focus states, reduced motion support) * (Glass utility classes .glass-light/.glass-medium/.glass-heavy removed — unused) * * BROWSER SUPPORT: * - Modern browsers with backdrop-filter support * - Progressive enhancement with consolidated @supports query * - Graceful fallbacks for older browsers * - Webkit prefixes for Safari compatibility * * PERFORMANCE: * - Hardware-accelerated transforms * - Single consolidated @supports block (43→1) * - Optimized backdrop-filter usage via utility classes * - Reduced !important usage (440→404, targeting <200) * - Smooth 60fps animations * - Reduced motion preference respected * * FILE STATS: * - Lines: 5,476 (up from 5,434, +42 lines / +0.8% - documentation & organization) * - !important count: 430 (down from 433, -3 / -0.7%) * - @supports blocks: 1 (consolidated in Phase 2) * - CSS Variables: 56 (up from 41, +15 admin-specific variables) * - Utility Classes: 23 (ready for future use) * - Transitions using var: 62 (up from 35, +27 / +77%) * - Media Query Blocks: 16 (down from 24, -8 / -33%) * - Tablet (768px): 7 → 1 block (consolidated) * - Mobile (640px): 3 → 1 block (consolidated) * * PHASE 4 SYSTEMATIC OPTIMIZATION (v9.0): * ✅ Consolidated 7× tablet (768px) media queries → 1 organized block (-50 lines) * ✅ Consolidated 3× mobile (640px) media queries → 1 organized block (-20 lines) * ✅ Added 5 specialized transition variables (background, color, opacity, width, none) * ✅ Replaced 27 additional hardcoded transitions with variables (62 total using var) * ✅ Created admin spacing variable system (10 variables for compressed design) * ✅ Applied admin variables to 15+ selectors for easier global adjustment * ✅ Added comprehensive admin system documentation (philosophy, implementation, usage) * ✅ Reduced !important count by 3 through better organization * ✅ Media query reduction: 24 → 16 blocks (-33%) * * PHASE 3 SYSTEMATIC REFACTORING (v8.0): * ✅ Added 27 systematic CSS variables (spacing, sizing, radius, transitions, shadows) * ✅ Created 23 reusable utility classes (transition, shadow, radius, spacing) * ✅ Replaced 35 hardcoded transitions with var(--transition-smooth) * ✅ Removed 16 redundant "very tight" comment phrases * ✅ Added responsive breakpoint index for easier navigation * ✅ Documented all media query locations for consolidation * * ACCESSIBILITY FIX (v7.6): * ✅ Fixed Touch Target Sizing conflict - excluded checkboxes/radios from 44px rule * ✅ Checkboxes now properly sized at 14px × 14px (was being forced to 44px) * ✅ Added explicit min-height/min-width: auto for checkboxes and radios * * FINAL POLISH (v7.5): * ✅ Checkboxes resized to 14px × 14px - matches text-sm used throughout system * ✅ Checkbox checkmark resized to 10px - proportional to 14px box * ✅ Checkbox shadows reduced - more subtle, less prominent * ✅ Checkbox border-radius refined - 3px for better proportion * ✅ Checkbox spacing restored - 0.5rem gap aligns with text * * STRUCTURAL FIXES (v7.4): * ✅ Admin page now uses
tag (was
) - consistent with other pages * ✅ Admin page now has