/* #region GLASSMORPHISM OVERRIDES FOR SAFARI/iOS ================================================================= */ /* * This file contains glassmorphism overrides for Safari and iOS devices * that cannot properly render the liquid glass SVG backdrop-filter effects. * These styles only apply when the .use-glassmorphism class is present on */ /* #region BASE GLASSMORPHISM VARIABLES ================================================================= */ .use-glassmorphism { /* Glassmorphism-specific design tokens */ --glassmorphism-bg: rgba(255, 255, 255, 0.1); --glassmorphism-bg-hover: rgba(255, 255, 255, 0.15); --glassmorphism-border: rgba(255, 255, 255, 0.2); --glassmorphism-border-hover: rgba(255, 255, 255, 0.3); --glassmorphism-backdrop: blur(12px) saturate(1.1); --glassmorphism-backdrop-hover: blur(16px) saturate(1.2); --glassmorphism-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); --glassmorphism-shadow-hover: 0 12px 40px rgba(31, 38, 135, 0.45); } /* #endregion */ /* #region HEADER GLASSMORPHISM OVERRIDES ================================================================= */ .use-glassmorphism .header { /* Override liquid glass with glassmorphism */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; /* Remove liquid glass filter */ filter: none !important; } .use-glassmorphism .header::before { /* Disable liquid glass inner glow */ display: none !important; } .use-glassmorphism .header:hover { backdrop-filter: var(--glassmorphism-backdrop-hover) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop-hover) !important; background: var(--glassmorphism-bg-hover) !important; border-color: var(--glassmorphism-border-hover) !important; box-shadow: var(--glassmorphism-shadow-hover) !important; } /* #endregion */ /* #region CARD GLASSMORPHISM OVERRIDES ================================================================= */ .use-glassmorphism .card, .use-glassmorphism .card-medium, .use-glassmorphism .card-tall { /* Override liquid glass with glassmorphism */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; /* Remove liquid glass filter */ filter: none !important; } .use-glassmorphism .card::before, .use-glassmorphism .card-medium::before, .use-glassmorphism .card-tall::before { /* Disable liquid glass inner glow */ display: none !important; } .use-glassmorphism .card:hover, .use-glassmorphism .card-medium:hover, .use-glassmorphism .card-tall:hover { backdrop-filter: var(--glassmorphism-backdrop-hover) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop-hover) !important; background: var(--glassmorphism-bg-hover) !important; border-color: var(--glassmorphism-border-hover) !important; box-shadow: var(--glassmorphism-shadow-hover) !important; } /* #endregion */ /* #region MOBILE NAVIGATION GLASSMORPHISM OVERRIDES ================================================================= */ .use-glassmorphism .mobile-nav-menu { /* Override liquid glass with glassmorphism */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; /* Remove liquid glass filter */ filter: none !important; } .use-glassmorphism .mobile-nav-menu::before { /* Disable liquid glass inner glow */ display: none !important; } .use-glassmorphism .mobile-nav-link { /* Override liquid glass with glassmorphism */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; /* Remove liquid glass filter */ filter: none !important; } .use-glassmorphism .mobile-nav-link::before { /* Disable liquid glass inner glow */ display: none !important; } .use-glassmorphism .mobile-nav-link:hover { backdrop-filter: var(--glassmorphism-backdrop-hover) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop-hover) !important; background: var(--glassmorphism-bg-hover) !important; border-color: var(--glassmorphism-border-hover) !important; box-shadow: var(--glassmorphism-shadow-hover) !important; } /* #endregion */ /* #region BUTTON GLASSMORPHISM OVERRIDES ================================================================= */ .use-glassmorphism .btn { /* Override liquid glass with glassmorphism */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; /* Remove liquid glass filter */ filter: none !important; } .use-glassmorphism .btn::before { /* Disable liquid glass inner glow */ display: none !important; } .use-glassmorphism .btn:hover { backdrop-filter: var(--glassmorphism-backdrop-hover) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop-hover) !important; background: var(--glassmorphism-bg-hover) !important; border-color: var(--glassmorphism-border-hover) !important; box-shadow: var(--glassmorphism-shadow-hover) !important; } /* Special handling for submit buttons */ .use-glassmorphism .btn-submit, .use-glassmorphism .btn-submit-active { /* Maintain button functionality with glassmorphism */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; filter: none !important; } .use-glassmorphism .btn-submit:hover, .use-glassmorphism .btn-submit-active:hover { backdrop-filter: var(--glassmorphism-backdrop-hover) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop-hover) !important; background: var(--glassmorphism-bg-hover) !important; border-color: var(--glassmorphism-border-hover) !important; box-shadow: var(--glassmorphism-shadow-hover) !important; } /* Full width buttons */ .use-glassmorphism .btn-full { /* Inherit glassmorphism from .btn */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; filter: none !important; } /* Cancel buttons */ .use-glassmorphism .cancel-button { /* Simple glassmorphism for cancel buttons */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; } .use-glassmorphism .cancel-button:hover { backdrop-filter: var(--glassmorphism-backdrop-hover) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop-hover) !important; background: var(--glassmorphism-bg-hover) !important; border-color: var(--glassmorphism-border-hover) !important; box-shadow: var(--glassmorphism-shadow-hover) !important; } /* #endregion */ /* #region JOB MODAL GLASSMORPHISM OVERRIDES ================================================================= */ .use-glassmorphism .job-modal-content { /* Override liquid glass with glassmorphism */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; /* Remove liquid glass filter */ filter: none !important; } .use-glassmorphism .job-modal-content::before { /* Disable liquid glass inner glow */ display: none !important; } /* #endregion */ /* #region FOOTER GLASSMORPHISM OVERRIDES ================================================================= */ .use-glassmorphism .footer { /* Override liquid glass with glassmorphism */ backdrop-filter: var(--glassmorphism-backdrop) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop) !important; background: var(--glassmorphism-bg) !important; border: 1px solid var(--glassmorphism-border) !important; box-shadow: var(--glassmorphism-shadow) !important; /* Remove liquid glass filter */ filter: none !important; } .use-glassmorphism .footer::before { /* Disable liquid glass inner glow */ display: none !important; } .use-glassmorphism .footer:hover { backdrop-filter: var(--glassmorphism-backdrop-hover) !important; -webkit-backdrop-filter: var(--glassmorphism-backdrop-hover) !important; background: var(--glassmorphism-bg-hover) !important; border-color: var(--glassmorphism-border-hover) !important; box-shadow: var(--glassmorphism-shadow-hover) !important; } /* #endregion */ /* #region INTERACTIVE STATES AND ACCESSIBILITY ================================================================= */ /* Ensure focus states work with glassmorphism */ .use-glassmorphism .btn:focus, .use-glassmorphism .mobile-nav-link:focus, .use-glassmorphism .nav-link:focus { outline: 2px solid rgba(94, 4, 237, 0.6); outline-offset: 2px; } /* Ensure active states work with glassmorphism */ .use-glassmorphism .btn:active, .use-glassmorphism .mobile-nav-link:active { transform: translateY(1px); box-shadow: var(--glassmorphism-shadow) !important; } /* Ensure disabled states work with glassmorphism */ .use-glassmorphism .btn:disabled { opacity: 0.6; cursor: not-allowed; backdrop-filter: blur(8px) saturate(0.8) !important; -webkit-backdrop-filter: blur(8px) saturate(0.8) !important; } /* #endregion */ /* #region MOBILE SPECIFIC GLASSMORPHISM ADJUSTMENTS ================================================================= */ @media (max-width: 768px) { .use-glassmorphism .header { /* Slightly reduced blur for mobile performance */ backdrop-filter: blur(10px) saturate(1.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.1) !important; } .use-glassmorphism .card, .use-glassmorphism .card-medium, .use-glassmorphism .card-tall { /* Slightly reduced blur for mobile performance */ backdrop-filter: blur(10px) saturate(1.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.1) !important; } } /* #endregion */ /* #region DEBUG STYLES (DEVELOPMENT ONLY) ================================================================= */ /* Debug indicator - remove in production */ .use-glassmorphism::before { content: "Glassmorphism Mode"; position: fixed; top: 10px; right: 10px; background: rgba(255, 0, 0, 0.8); color: white; padding: 4px 8px; font-size: 12px; border-radius: 4px; z-index: 10000; pointer-events: none; display: none; /* Set to block for debugging */ } /* #endregion */