/* Glass-Note Tooltip Styles */ /* Apple-style translucent glass tooltips for French vocabulary */ :root { --tooltip-bg: rgba(255, 255, 255, 0.95); --tooltip-border: rgba(255, 255, 255, 0.6); --tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); --tooltip-glow: 0 0 20px rgba(10, 102, 255, 0.1); --tooltip-radius: 16px; --tooltip-nub-size: 12px; --tooltip-nub-height: 8px; --tooltip-max-width: 360px; /* Increased from 280px to prevent unnecessary wrapping */ --tooltip-padding: 24px; --tooltip-z-index: 1000; --transition-opening: 700ms; /* Smooth, premium feel */ --transition-closing: 450ms; /* Slightly faster close for responsiveness */ --easing-opening: cubic-bezier(0.4, 0, 0.2, 1); /* Match button premium easing */ --easing-closing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth closing */ } /* ============================================ NEW UNIFIED BLUR SYSTEM (DESKTOP + MOBILE) ============================================ */ /* Dimmed words (non-focused) – JS adds .bf-dimmed */ .french-word.bf-dimmed, .article-title .french-word.bf-dimmed, .secondary-title .french-word.bf-dimmed, .summary-text .french-word.bf-dimmed { filter: blur(0.8px) !important; opacity: 0.5 !important; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Ensure non-dimmed words are always clear, even if legacy :has() rules fire */ .article-title .french-word:not(.bf-dimmed), .secondary-title .french-word:not(.bf-dimmed), .summary-text .french-word:not(.bf-dimmed) { filter: none !important; opacity: 1 !important; } /* Optional hook for active word, mapping to existing colors if needed */ .french-word.bf-active { /* We intentionally do not set color here so existing .active rules apply. This class is mainly a semantic marker and can be styled later if desired. */ } /* Trigger styling for French vocabulary words */ .french-word { /* Underlines are disabled so tooltip triggers inherit the cleaner headline styling. Visual affordances are provided by the themed background/highlight rules in styles.css. */ text-decoration: none !important; cursor: pointer; color: inherit !important; /* Inherit color from parent to match surrounding text */ /* CRITICAL: Static positioning - no relative/absolute to prevent layout shifts */ position: static !important; /* CRITICAL: Inline-block with vertical-align to prevent text reflow */ display: inline-block !important; vertical-align: baseline !important; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; /* CRITICAL: box-sizing prevents layout shifts from border/padding changes */ box-sizing: border-box !important; -webkit-box-sizing: border-box !important; /* Enhanced visibility for clickable word groups - makes them pop */ /* Pill-shaped design matching search bar with glass morphism */ border: 1px solid rgba(15, 23, 42, 0.15) !important; /* Match search bar border style */ background: rgba(255, 255, 255, 0.7) !important; /* Glass morphism background matching search bar */ /* Backdrop blur removed for testing */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 20px !important; /* Pill-shaped matching search bar */ padding: 2px 8px !important; /* Tighter vertical padding for horizontal emphasis */ margin: 0 1px !important; /* Tighter grouping for visual cohesion */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* Inner highlight only - no outer shadows */ /* Match VocaMatch button typography */ font-size: 17px !important; /* Increased from 15px for better readability on desktop */ font-weight: 400 !important; /* Match summary text font-weight */ letter-spacing: normal !important; /* Match button letter-spacing */ line-height: normal !important; /* Match button line-height */ color: inherit !important; /* Inherit color from parent to match summary-text */ /* Premium smooth transitions - slower and more refined */ transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) !important; /* Enable native touch behaviors */ touch-action: manipulation; /* Prevent background from bleeding into adjacent lines when text wraps */ box-decoration-break: clone; -webkit-box-decoration-break: clone; /* Mobile polish - remove native tap highlights */ -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none; outline: none !important; -webkit-focus-ring-color: transparent; user-select: none !important; -webkit-user-select: none !important; /* CRITICAL: No transform, will-change, or contain - completely static */ transform: none !important; will-change: auto !important; /* Removed contain: paint as it can cause repaints */ /* CRITICAL: Lock all dimensions to prevent any size changes */ min-width: auto !important; max-width: none !important; min-height: auto !important; max-height: none !important; width: auto !important; height: auto !important; } /* Hide empty contextual word spans to prevent empty pill backgrounds */ .french-word:empty { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* Simplified titles: Remove pill styling, keep plain text appearance but maintain tooltip functionality */ /* CRITICAL: This must override ALL base .french-word styles to prevent white background */ .article-title .french-word { /* Remove all visual styling - make it look like plain text */ border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; /* CRITICAL: Remove inset box-shadow that creates white appearance */ box-shadow: none !important; -webkit-box-shadow: none !important; /* CRITICAL: Force slice to prevent box-decoration-break from creating white boxes */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; box-decoration-break: slice !important; /* Redundant but ensures override */ /* CRITICAL: Change to inline to prevent inline-block from creating boxes */ display: inline !important; vertical-align: baseline !important; /* Keep typography matching the title */ font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; /* Blue color by default - matches original title behavior */ color: var(--french-blue) !important; /* #2563eb - blue by default */ /* Keep cursor and functionality */ cursor: pointer; /* Transitions for premium focus effect (blur/color) - defined below */ /* Keep touch behavior */ touch-action: manipulation; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; /* CRITICAL: Remove any box-sizing that might affect rendering */ box-sizing: content-box !important; -webkit-box-sizing: content-box !important; } /* Prevent text selection highlighting on simplified title words */ .article-title .french-word::selection, .article-title .french-word::-moz-selection { background: transparent !important; color: inherit !important; } /* Remove hover/active/focus states for simplified title words - keep them looking like plain text */ /* CRITICAL: Higher specificity to prevent white flickering from base hover rules */ .article-title .french-word:hover, .article-title .french-word:active, .article-title .french-word.active, .article-title .french-word.is-pressing, .article-title .french-word:focus, .article-title .french-word:hover:not(.active), .article-title .french-word:active:not(.active) { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; transform: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; font-size: inherit !important; font-weight: inherit !important; outline: none !important; /* CRITICAL: Maintain slice to prevent boxes on hover */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; display: inline !important; /* Transitions for premium focus effect - defined in separate rule below */ } /* Keep cursor pointer for simplified title words */ .article-title .french-word:focus-visible { outline: none !important; } /* Premium focus effect: Blue highlight + blur siblings (simplified titles only) */ /* When a word is hovered/active, blur other words and highlight selected word */ .article-title:has(.french-word:hover) .french-word:not(:hover), .article-title:has(.french-word:active) .french-word:not(:active), .article-title:has(.french-word.active) .french-word:not(.active), .article-title:has(.french-word.is-pressing) .french-word:not(.is-pressing) { filter: blur(0.8px); opacity: 0.5; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Selected word: Black color on hover/tap (reversed from normal blue) - matches original title */ .article-title .french-word:hover, .article-title .french-word:active, .article-title .french-word.active, .article-title .french-word.is-pressing { color: rgba(0, 0, 0, 0.85) !important; /* Black on hover/tap - same as original title */ text-shadow: none !important; filter: none !important; /* No blur on selected word */ opacity: 1 !important; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth transition for all words when not selected */ .article-title .french-word { transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Hover and Focus states handled above in combined selector */ /* ============================================ ORIGINAL TITLE (SECONDARY TITLE) - Same plain text styling as simplified titles ============================================ */ /* Original titles: Remove pill styling, keep plain text appearance but maintain tooltip functionality */ /* CRITICAL: This must override ALL base .french-word styles to prevent white background */ .secondary-title .french-word { /* Remove all visual styling - make it look like plain text */ border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; /* CRITICAL: Remove inset box-shadow that creates white appearance */ box-shadow: none !important; -webkit-box-shadow: none !important; /* CRITICAL: Force slice to prevent box-decoration-break from creating white boxes */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; box-decoration-break: slice !important; /* Redundant but ensures override */ /* CRITICAL: Change to inline to prevent inline-block from creating boxes */ display: inline !important; vertical-align: baseline !important; /* Keep typography matching the title (inherits from .secondary-title) */ font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; /* Blue color by default - reverses to black on hover/tap */ color: var(--french-blue) !important; /* #2563eb - blue by default */ /* Keep cursor and functionality */ cursor: pointer; /* Transitions for premium focus effect (blur/color) - defined below */ /* Keep touch behavior */ touch-action: manipulation; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; /* CRITICAL: Remove any box-sizing that might affect rendering */ box-sizing: content-box !important; -webkit-box-sizing: content-box !important; } /* Prevent text selection highlighting on original title words */ .secondary-title .french-word::selection, .secondary-title .french-word::-moz-selection { background: transparent !important; color: inherit !important; } /* Remove hover/active/focus states for original title words - keep them looking like plain text */ /* CRITICAL: Higher specificity to prevent white flickering from base hover rules */ .secondary-title .french-word:hover, .secondary-title .french-word:active, .secondary-title .french-word.active, .secondary-title .french-word.is-pressing, .secondary-title .french-word:focus, .secondary-title .french-word:hover:not(.active), .secondary-title .french-word:active:not(.active) { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; transform: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; font-size: inherit !important; font-weight: inherit !important; outline: none !important; /* CRITICAL: Maintain slice to prevent boxes on hover */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; display: inline !important; /* Transitions for premium focus effect - defined in separate rule below */ } /* Keep cursor pointer for original title words */ .secondary-title .french-word:focus-visible { outline: none !important; } /* Premium focus effect: Blue highlight + blur siblings (original titles only) */ /* When a word is hovered/active, blur other words and highlight selected word */ .secondary-title:has(.french-word:hover) .french-word:not(:hover), .secondary-title:has(.french-word:active) .french-word:not(:active), .secondary-title:has(.french-word.active) .french-word:not(.active), .secondary-title:has(.french-word.is-pressing) .french-word:not(.is-pressing) { filter: blur(0.8px); opacity: 0.5; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Selected word: Black color on hover/tap (reversed from normal blue) */ .secondary-title .french-word:hover, .secondary-title .french-word:active, .secondary-title .french-word.active, .secondary-title .french-word.is-pressing { color: rgba(0, 0, 0, 0.85) !important; /* Black on hover/tap */ text-shadow: none !important; filter: none !important; /* No blur on selected word */ opacity: 1 !important; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth transition for all words when not selected */ .secondary-title .french-word { transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ MOBILE OVERRIDE FOR ORIGINAL TITLE COLORS ============================================ */ @media (max-width: 480px) { /* Base mobile state: original title words are blue by default */ .secondary-title .french-word, .secondary-title .french-word:hover, .secondary-title .french-word:active, .secondary-title .french-word.is-pressing { color: var(--french-blue) !important; } /* Active mobile state: when JS marks word as active, turn it black */ .secondary-title .french-word.bf-active, .secondary-title .french-word.active { color: rgba(0, 0, 0, 0.85) !important; } /* ============================================ MOBILE OVERRIDE FOR SIMPLIFIED TITLE COLORS (matches original title) ============================================ */ /* Base mobile state: simplified title words are blue by default */ .article-title .french-word, .article-title .french-word:hover, .article-title .french-word:active, .article-title .french-word.is-pressing { color: var(--french-blue) !important; } /* Active mobile state: when JS marks word as active, turn it black */ .article-title .french-word.bf-active, .article-title .french-word.active { color: rgba(0, 0, 0, 0.85) !important; } } /* ============================================ SUMMARY TEXT - Same interactive behavior as titles ============================================ */ /* Simplified summaries: Remove pill styling, keep plain text appearance but maintain tooltip functionality */ /* CRITICAL: This must override ALL base .french-word styles to prevent white background */ .summary-text .french-word { /* Remove all visual styling - make it look like plain text */ border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; /* CRITICAL: Remove inset box-shadow that creates white appearance */ box-shadow: none !important; -webkit-box-shadow: none !important; /* CRITICAL: Force slice to prevent box-decoration-break from creating white boxes */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; box-decoration-break: slice !important; /* Redundant but ensures override */ /* CRITICAL: Change to inline to prevent inline-block from creating boxes */ display: inline !important; vertical-align: baseline !important; /* Keep typography matching the summary */ font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; /* Keep cursor and functionality */ cursor: pointer; /* CRITICAL: Override base transition - only allow color transitions */ transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) !important; /* Keep touch behavior */ touch-action: manipulation; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; /* CRITICAL: Remove any box-sizing that might affect rendering */ box-sizing: content-box !important; -webkit-box-sizing: content-box !important; /* CRITICAL: Override base position and transform */ position: static !important; transform: none !important; will-change: auto !important; /* CRITICAL: Remove all base dimensions */ min-width: auto !important; max-width: none !important; min-height: auto !important; max-height: none !important; width: auto !important; height: auto !important; } /* Prevent text selection highlighting on summary words */ .summary-text .french-word::selection, .summary-text .french-word::-moz-selection { background: transparent !important; color: inherit !important; } /* Remove hover/active/focus states for summary words - keep them looking like plain text */ /* CRITICAL: Higher specificity to prevent white flickering from base hover rules */ .summary-text .french-word:hover, .summary-text .french-word:active, .summary-text .french-word.active, .summary-text .french-word.is-pressing, .summary-text .french-word:focus, .summary-text .french-word:hover:not(.active), .summary-text .french-word:active:not(.active) { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; transform: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; font-size: inherit !important; font-weight: inherit !important; outline: none !important; /* CRITICAL: Maintain slice to prevent boxes on hover */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; display: inline !important; /* Transitions for premium focus effect - defined in separate rule below */ } /* Keep cursor pointer for summary words */ .summary-text .french-word:focus-visible { outline: none !important; } /* Premium focus effect: Blue highlight + blur siblings (summaries only) */ /* When a word is hovered/active, blur other words and highlight selected word */ .summary-text:has(.french-word:hover) .french-word:not(:hover), .summary-text:has(.french-word:active) .french-word:not(:active), .summary-text:has(.french-word.active) .french-word:not(.active), .summary-text:has(.french-word.is-pressing) .french-word:not(.is-pressing) { filter: blur(0.8px); opacity: 0.5; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Selected word: Solid blue color (no glow) */ .summary-text .french-word:hover, .summary-text .french-word:active, .summary-text .french-word.active, .summary-text .french-word.is-pressing { color: var(--french-blue) !important; /* #2563eb - matches theme */ text-shadow: none !important; /* No glow - just solid blue */ filter: none !important; /* No blur on selected word */ opacity: 1 !important; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth transition for all words when not selected */ .summary-text .french-word { transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ SHOW ORIGINAL TITLE BUTTON - Blur when tooltips are open ============================================ */ /* Blur the button when any tooltip is open in the same article card */ .article-card:has(.french-word.active) .show-original-title-btn { filter: blur(0.8px); opacity: 0.5; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth transition for button when not blurred */ .show-original-title-btn { transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Match VocaMatch button interactive states */ /* Hover state - refined subtle lift effect (50% reduced) */ /* CRITICAL: Exclude simplified title AND summary words to prevent white flickering */ .french-word:hover:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.75) !important; /* Reduced from 0.8 to 0.75 */ border-color: rgba(15, 23, 42, 0.18) !important; /* Slightly more subtle */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 1.5px 5px rgba(0, 0, 0, 0.05), /* Reduced from 3px 10px */ 0 0.5px 1.5px rgba(0, 0, 0, 0.04), /* Reduced from 1px 3px */ inset 0 1px 0 rgba(255, 255, 255, 0.65) !important; transform: translateY(-0.25px) !important; /* Reduced from -0.5px for smoother feel */ } /* Active/pressed state - refined subtle press feedback (50% reduced) */ /* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */ .french-word:active:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.72) !important; /* Slightly reduced */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateY(0) scale(0.99) !important; /* Reduced from 0.98 for smoother feel */ box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.04), /* Reduced from 1px 4px */ 0 0.5px 1px rgba(0, 0, 0, 0.03), /* Reduced from 1px 2px */ inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } /* Active state (when tooltip is open) - refined subtle depth (50% reduced) */ /* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */ .french-word.active:not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.8) !important; /* Reduced from 0.85 to 0.8 */ border-color: rgba(15, 23, 42, 0.18) !important; /* Slightly more subtle */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), /* Reduced from 4px 12px */ 0 1px 2px rgba(0, 0, 0, 0.05), /* Reduced from 2px 4px */ inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; transform: translateY(-0.5px) !important; /* Reduced from -1px for smoother feel */ } /* Focus state - keep static to prevent layout shifts */ .french-word:focus { outline: none !important; outline-offset: 0 !important; } /* Legacy states - keep for compatibility but match base styling */ .french-word.is-pressing { /* Match base state */ background: rgba(255, 255, 255, 0.7) !important; transform: none !important; } /* Keyboard accessibility - subtle focus indicator */ .french-word:focus-visible { outline: 2px solid rgba(15, 23, 42, 0.3) !important; outline-offset: 2px !important; border-radius: 20px !important; } /* ============================================ AUDIO PLAYING STATE - Premium ripple animation Apple-style subtle, elegant audio feedback ============================================ */ /* Premium ripple animation - sound wave emanating outward */ @keyframes audio-ripple { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35), 0 0 0 0 rgba(37, 99, 235, 0.2), 0 0 0 0 rgba(37, 99, 235, 0.1); } 40% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 0 0 8px rgba(37, 99, 235, 0.1), 0 0 0 12px rgba(37, 99, 235, 0.05); } 100% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0), 0 0 0 16px rgba(37, 99, 235, 0), 0 0 0 24px rgba(37, 99, 235, 0); } } /* Subtle inner glow - breathing effect */ @keyframes audio-breathe { 0%, 100% { background: linear-gradient( 135deg, rgba(37, 99, 235, 0.06) 0%, rgba(59, 130, 246, 0.12) 50%, rgba(37, 99, 235, 0.06) 100% ); } 50% { background: linear-gradient( 135deg, rgba(37, 99, 235, 0.12) 0%, rgba(59, 130, 246, 0.18) 50%, rgba(37, 99, 235, 0.12) 100% ); } } /* Text highlight animation - elegant color shift */ @keyframes audio-text-highlight { 0% { color: var(--french-blue, #2563eb); text-shadow: 0 0 0 rgba(37, 99, 235, 0), 0 1px 2px rgba(0, 0, 0, 0.08); } 30% { color: #1d4ed8; text-shadow: 0 0 20px rgba(37, 99, 235, 0.4), 0 0 40px rgba(59, 130, 246, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); } 100% { color: var(--french-blue, #2563eb); text-shadow: 0 0 0 rgba(37, 99, 235, 0), 0 1px 2px rgba(0, 0, 0, 0.08); } } /* Audio playing state for simplified titles/summaries (transparent background) */ .article-title .french-word.audio-playing, .secondary-title .french-word.audio-playing, .summary-text .french-word.audio-playing { /* Elegant text animation */ animation: audio-text-highlight 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Ensure visibility - don't blur the active word */ filter: none !important; opacity: 1 !important; /* Prevent layout shift */ transform: none !important; /* Smooth transition for when animation ends */ transition: color 0.3s ease, text-shadow 0.3s ease !important; } /* Audio playing state for pill-style words (VocaMatch, Breakdown, etc.) */ .french-word.audio-playing:not(.article-title .french-word):not(.secondary-title .french-word):not(.summary-text .french-word) { /* Premium color */ color: #1d4ed8 !important; /* Layered animations: ripple + breathe */ animation: audio-ripple 0.9s cubic-bezier(0.4, 0, 0.2, 1), audio-breathe 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Base styling */ background: linear-gradient( 135deg, rgba(37, 99, 235, 0.08) 0%, rgba(59, 130, 246, 0.14) 50%, rgba(37, 99, 235, 0.08) 100% ) !important; border-color: rgba(37, 99, 235, 0.3) !important; /* Ensure visibility */ filter: none !important; opacity: 1 !important; /* GPU acceleration for smooth animation */ will-change: box-shadow, background; transform: translateZ(0); } /* Dark mode support for audio animation */ @media (prefers-color-scheme: dark) { .article-title .french-word.audio-playing, .secondary-title .french-word.audio-playing, .summary-text .french-word.audio-playing { animation: audio-text-highlight-dark 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; } } @keyframes audio-text-highlight-dark { 0% { color: #60a5fa; text-shadow: 0 0 0 rgba(96, 165, 250, 0), 0 1px 2px rgba(0, 0, 0, 0.3); } 30% { color: #93c5fd; text-shadow: 0 0 24px rgba(96, 165, 250, 0.5), 0 0 48px rgba(147, 197, 253, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3); } 100% { color: #60a5fa; text-shadow: 0 0 0 rgba(96, 165, 250, 0), 0 1px 2px rgba(0, 0, 0, 0.3); } } /* Reduced motion support - respect user preferences */ @media (prefers-reduced-motion: reduce) { .french-word.audio-playing, .article-title .french-word.audio-playing, .secondary-title .french-word.audio-playing, .summary-text .french-word.audio-playing { animation: none !important; /* Simple static highlight instead */ color: #1d4ed8 !important; text-shadow: 0 0 12px rgba(37, 99, 235, 0.3) !important; } } /* Main tooltip container */ .glass-note-tooltip { position: absolute; background: var(--tooltip-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--tooltip-border); border-radius: var(--tooltip-radius); box-shadow: var(--tooltip-shadow); padding: var(--tooltip-padding); max-width: var(--tooltip-max-width); min-width: 220px; z-index: var(--tooltip-z-index); opacity: 0; transform: scale(0.97) translateY(4px); /* More subtle starting position for smoother feel */ /* Smooth, premium closing animation */ transition: opacity var(--transition-closing) var(--easing-closing), transform var(--transition-closing) var(--easing-closing), box-shadow var(--transition-closing) var(--easing-closing); pointer-events: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", Ubuntu, Cantarell, sans-serif; } .glass-note-tooltip.visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; /* Smooth, premium opening animation - matches button hover feel */ transition: opacity var(--transition-opening) var(--easing-opening), transform var(--transition-opening) var(--easing-opening), box-shadow var(--transition-opening) var(--easing-opening); box-shadow: var(--tooltip-shadow), var(--tooltip-glow); } /* Tooltip content styles */ /* Desktop order: Translation → Cultural Note → Explanation */ .glass-note-tooltip .word-display { display: block; /* CRITICAL: Make block-level so margins work */ font-weight: 700; font-style: italic; /* Translation in italic */ font-size: 17px; color: #1a1a1c; margin-bottom: 16px; /* Space to cultural note */ line-height: 1.3; letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } /* ============================================ TOOLTIP AUDIO BUTTON (Mobile) "FR 🔊" button next to translation ============================================ */ /* Row container for translation + audio container */ .glass-note-tooltip .word-display-row { display: flex; align-items: center; justify-content: space-between; /* Push button to the right */ gap: 16px; margin-bottom: 16px; /* Same as word-display alone */ } .glass-note-tooltip .word-display-row .word-display { margin-bottom: 0; /* Remove margin when in row */ flex: 1 1 auto; /* Allow text to take available space */ } /* Container for audio button + "FR" text */ .glass-note-tooltip .tooltip-audio-container { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px; /* Add padding to prevent accidental tooltip close */ margin: -8px; /* Offset the padding so visual position stays same */ margin-right: -4px; /* Slight adjustment to align with edge */ } /* "FR" text label - small, after button */ .glass-note-tooltip .tooltip-audio-label { font-size: 11px; font-weight: 500; color: #9ca3af; /* Light gray, subtle */ letter-spacing: 0.02em; text-transform: uppercase; } /* Tooltip Audio Button - Elegant circular design with breathing animation */ /* Note: Using box-shadow animation instead of transform to avoid tooltip deformation */ @keyframes tooltipAudioBreathing { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } 50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } } @keyframes tooltipAudioPlaying { 0%, 100% { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15); } } .glass-note-tooltip .tooltip-audio-btn.match-word-audio-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; margin: 0; background: rgba(37, 99, 235, 0.08); border: 1.5px solid rgba(37, 99, 235, 0.3); border-radius: 50%; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* No breathing animation - causes layout issues on mobile */ } /* Button icons - blue filled */ .glass-note-tooltip .tooltip-audio-btn svg { width: 20px; height: 20px; pointer-events: none; margin-left: 3px; /* Visually center the play triangle */ } .glass-note-tooltip .tooltip-audio-btn svg polygon, .glass-note-tooltip .tooltip-audio-btn svg rect, .glass-note-tooltip .tooltip-audio-btn svg path { fill: #2563eb; } /* Hover state - desktop only */ @media (hover: hover) and (pointer: fine) { .glass-note-tooltip .tooltip-audio-btn:hover:not(:disabled):not(.playing):not(.loading) { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.35); animation: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .glass-note-tooltip .tooltip-audio-btn:hover:not(:disabled):not(.playing):not(.loading) svg polygon, .glass-note-tooltip .tooltip-audio-btn:hover:not(:disabled):not(.playing):not(.loading) svg path { fill: #1d4ed8; } } /* Active/pressed state - no transform, just color change */ .glass-note-tooltip .tooltip-audio-btn:active:not(:disabled) { background: rgba(37, 99, 235, 0.2); border-color: rgba(37, 99, 235, 0.5); } /* Playing state - simple color change, no animation to avoid layout issues */ .glass-note-tooltip .tooltip-audio-btn.playing { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.5); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .glass-note-tooltip .tooltip-audio-btn.playing svg polygon, .glass-note-tooltip .tooltip-audio-btn.playing svg path { fill: #1d4ed8; } /* Loading state */ .glass-note-tooltip .tooltip-audio-btn.loading { cursor: wait; pointer-events: none; opacity: 0.7; animation: none; } /* Error state */ .glass-note-tooltip .tooltip-audio-btn.error { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.25); animation: none; } .glass-note-tooltip .tooltip-audio-btn.error svg polygon, .glass-note-tooltip .tooltip-audio-btn.error svg path { fill: #dc2626; } /* Disabled state */ .glass-note-tooltip .tooltip-audio-btn:disabled { opacity: 0.35; cursor: not-allowed; animation: none; } .glass-note-tooltip .note { display: block; font-size: 15px; color: #3c3c43; /* Match explanation color for consistency */ line-height: 1.4; margin-top: 16px; /* Space from word-display (matches margin-bottom above) */ margin-bottom: 10px; /* Space to explanation */ font-style: italic; font-weight: 600; /* Increased to 600 for better visibility and attention */ letter-spacing: -0.003em; } .glass-note-tooltip .definition { display: block; font-size: 15px; color: #3c3c43; line-height: 1.45; margin-top: 10px; /* Space from cultural note */ margin-bottom: 0; /* Last element - no bottom margin */ font-weight: 400; font-style: italic; /* Match cultural note style */ letter-spacing: -0.005em; } /* ============================================ DESKTOP AUDIO BUTTON IN TOOLTIP Blue circular play button with breathing animation ============================================ */ .glass-note-tooltip .tooltip-audio-hint { display: flex; align-items: center; gap: 10px; } .glass-note-tooltip .tooltip-audio-hint span { font-size: 13px; color: #6b7280; font-weight: 500; letter-spacing: -0.01em; } .glass-note-tooltip .desktop-audio-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; margin: 0; background: rgba(37, 99, 235, 0.08); border: 1.5px solid rgba(37, 99, 235, 0.3); border-radius: 50%; cursor: default; pointer-events: none; flex-shrink: 0; animation: desktopAudioBreathe 2.5s ease-in-out infinite; } @keyframes desktopAudioBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } 50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12); } } .glass-note-tooltip .desktop-audio-btn svg { width: 18px; height: 18px; pointer-events: none; margin-left: 2px; } .glass-note-tooltip .desktop-audio-btn svg polygon, .glass-note-tooltip .desktop-audio-btn svg path { fill: #2563eb; } /* ============================================ DESKTOP TOOLTIP BOTTOM ROW Contains audio hint + save button side by side ============================================ */ .glass-note-tooltip .tooltip-bottom-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); } /* When bottom row is present, remove duplicate border/margin from audio hint */ .glass-note-tooltip .tooltip-bottom-row .tooltip-audio-hint { margin-top: 0; padding-top: 0; border-top: none; } /* ============================================ SAVE WORD BUTTON IN TOOLTIP Bookmark icon to save/unsave vocabulary words ============================================ */ .glass-note-tooltip .tooltip-save-word-btn { background: none; border: none; padding: 6px; cursor: pointer; color: #9ca3af; transition: all 0.15s ease; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .glass-note-tooltip .tooltip-save-word-btn:active { transform: scale(0.85); } .glass-note-tooltip .tooltip-save-word-btn.saved { color: #f59e0b; } .glass-note-tooltip .tooltip-save-word-btn.saved svg { fill: #f59e0b; } /* Brief pulse when limit reached */ .glass-note-tooltip .tooltip-save-word-btn.limit-reached { color: #ef4444; animation: saveWordLimitShake 0.3s ease; } @keyframes saveWordLimitShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* ============================================ ONE-TIME AUDIO EDUCATION HINT Floating tooltip shown on first hover Educates users about click-to-hear feature ============================================ */ .bf-audio-education-hint { background: white; border-radius: 12px; padding: 12px 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); max-width: 280px; opacity: 0; transform: translateX(-50%) translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #374151; line-height: 1.4; } .bf-audio-education-hint.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .bf-audio-education-hint svg { flex-shrink: 0; color: var(--french-blue, #2563eb); margin-top: 1px; } .bf-audio-education-hint strong { color: var(--french-blue, #2563eb); } /* Triangle nub pointing to trigger */ .glass-note-tooltip .nub { display: none; } .glass-note-tooltip .nub::before { display: none; } /* Nub positioning for different placements */ .glass-note-tooltip.placement-bottom .nub { top: -6px; left: 50%; transform: translateX(-50%); } .glass-note-tooltip.placement-top .nub { bottom: -6px; left: 50%; transform: translateX(-50%) rotate(180deg); } /* Mobile/tablet responsive design */ @media (max-width: 480px) { /* Hide desktop audio hints on mobile - mobile has its own audio button */ .glass-note-tooltip .tooltip-audio-hint, .bf-audio-education-hint { display: none !important; } /* Simplified titles on mobile: Keep plain text appearance */ .article-title .french-word { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; /* CRITICAL: Force slice to prevent white boxes on mobile */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; display: inline !important; transition: none !important; transform: none !important; box-sizing: content-box !important; -webkit-box-sizing: content-box !important; } /* Prevent text selection highlighting on mobile */ .article-title .french-word::selection, .article-title .french-word::-moz-selection { background: transparent !important; color: inherit !important; } .article-title .french-word:hover, .article-title .french-word:active, .article-title .french-word.active, .article-title .french-word.is-pressing, .article-title .french-word:focus, .article-title .french-word:hover:not(.active), .article-title .french-word:active:not(.active) { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; transform: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; font-size: inherit !important; font-weight: inherit !important; outline: none !important; /* CRITICAL: Maintain slice on mobile hover states */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; display: inline !important; /* Transitions for premium focus effect - defined in separate rule below */ } .article-title .french-word:focus-visible { outline: none !important; } /* Premium focus effect on mobile: Blue highlight + blur siblings */ /* MOBILE ONLY: JS-controlled blur via .is-blurred class (not CSS :has() which is unreliable on mobile) */ .article-title .french-word.is-blurred { filter: blur(0.8px) !important; opacity: 0.5 !important; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Selected word on mobile: Black color on tap (reversed from normal blue) - matches original title */ .article-title .french-word.active { color: rgba(0, 0, 0, 0.85) !important; /* Black on tap - same as original title */ text-shadow: none !important; filter: none !important; /* No blur on selected word */ opacity: 1 !important; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth transition for all words on mobile */ .article-title .french-word { color: var(--french-blue) !important; /* Blue by default - matches original title */ transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Original titles on mobile: Keep plain text appearance (same as simplified titles) */ .secondary-title .french-word { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; /* CRITICAL: Force slice to prevent white boxes on mobile */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; /* Blue color by default - reverses to black on hover/tap */ color: var(--french-blue) !important; /* #2563eb - blue by default */ display: inline !important; transition: none !important; transform: none !important; box-sizing: content-box !important; -webkit-box-sizing: content-box !important; } /* Prevent text selection highlighting on mobile */ .secondary-title .french-word::selection, .secondary-title .french-word::-moz-selection { background: transparent !important; color: inherit !important; } .secondary-title .french-word:hover, .secondary-title .french-word:active, .secondary-title .french-word.active, .secondary-title .french-word.is-pressing, .secondary-title .french-word:focus, .secondary-title .french-word:hover:not(.active), .secondary-title .french-word:active:not(.active) { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; transform: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; font-size: inherit !important; font-weight: inherit !important; outline: none !important; /* CRITICAL: Maintain slice on mobile hover states */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; display: inline !important; /* Transitions for premium focus effect - defined in separate rule below */ } .secondary-title .french-word:focus-visible { outline: none !important; } /* Premium focus effect on mobile: Blue highlight + blur siblings */ /* MOBILE ONLY: JS-controlled blur via .is-blurred class (not CSS :has() which is unreliable on mobile) */ .secondary-title .french-word.is-blurred { filter: blur(0.8px) !important; opacity: 0.5 !important; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Selected word on mobile: Black color on tap (reversed from normal blue) */ .secondary-title .french-word.active { color: rgba(0, 0, 0, 0.85) !important; /* Black on tap */ text-shadow: none !important; filter: none !important; /* No blur on selected word */ opacity: 1 !important; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth transition for all words on mobile */ .secondary-title .french-word { transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Simplified summaries on mobile: Keep plain text appearance (same as titles) */ .summary-text .french-word { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; /* CRITICAL: Force slice to prevent white boxes on mobile */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; display: inline !important; transition: none !important; transform: none !important; box-sizing: content-box !important; -webkit-box-sizing: content-box !important; } /* Prevent text selection highlighting on mobile summaries */ .summary-text .french-word::selection, .summary-text .french-word::-moz-selection { background: transparent !important; color: inherit !important; } .summary-text .french-word:hover, .summary-text .french-word:active, .summary-text .french-word.active, .summary-text .french-word.is-pressing, .summary-text .french-word:focus, .summary-text .french-word:hover:not(.active), .summary-text .french-word:active:not(.active) { border: none !important; border-width: 0 !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; transform: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; font-size: inherit !important; font-weight: inherit !important; outline: none !important; /* CRITICAL: Maintain slice on mobile hover states */ box-decoration-break: slice !important; -webkit-box-decoration-break: slice !important; display: inline !important; } .summary-text .french-word:focus-visible { outline: none !important; } /* Premium focus effect on mobile: Blue highlight + blur siblings */ /* MOBILE ONLY: JS-controlled blur via .is-blurred class (not CSS :has() which is unreliable on mobile) */ .summary-text .french-word.is-blurred { filter: blur(0.8px) !important; opacity: 0.5 !important; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Selected word on mobile: Solid blue color (no glow) */ .summary-text .french-word.active { color: var(--french-blue) !important; /* #2563eb - matches theme */ text-shadow: none !important; /* No glow - just solid blue */ filter: none !important; /* No blur on selected word */ opacity: 1 !important; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth transition for all summary words on mobile */ .summary-text .french-word { transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ SHOW ORIGINAL TITLE BUTTON - Mobile blur when tooltips are open ============================================ */ /* MOBILE ONLY: JS-controlled blur via .is-blurred class */ .show-original-title-btn.is-blurred { filter: blur(0.8px); opacity: 0.5; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Unified blur system - also supports .bf-dimmed class */ .show-original-title-btn.bf-dimmed { filter: blur(0.8px); opacity: 0.5; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Smooth transition for button when not blurred */ .show-original-title-btn { transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ NEW UNIFIED BLUR SYSTEM (DESKTOP + MOBILE) ============================================ */ /* Dimmed words (non-focused) – JS adds .bf-dimmed */ .french-word.bf-dimmed, .article-title .french-word.bf-dimmed, .secondary-title .french-word.bf-dimmed, .summary-text .french-word.bf-dimmed { filter: blur(0.8px) !important; opacity: 0.5 !important; transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Ensure non-dimmed words are always clear, even if legacy :has() rules fire */ .article-title .french-word:not(.bf-dimmed), .secondary-title .french-word:not(.bf-dimmed), .summary-text .french-word:not(.bf-dimmed) { filter: none !important; opacity: 1 !important; } /* Optional hook for active word, mapping to existing colors if needed */ .french-word.bf-active { /* We intentionally do not set color here so existing .active rules apply. This class is mainly a semantic marker and can be styled later if desired. */ } /* Match VocaMatch button mobile styling */ .french-word { padding: 2px 6px !important; /* Keep current height - perfect as requested */ margin: 0 1px !important; /* Tight grouping to prevent overflow */ border-radius: 20px !important; /* Pill-shaped matching buttons */ border-width: 1px !important; border: 1px solid rgba(15, 23, 42, 0.15) !important; background: rgba(255, 255, 255, 0.7) !important; /* Backdrop blur removed for testing */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* Inner highlight only - no outer shadows */ font-size: 14px !important; /* Match button mobile font-size */ font-weight: 400 !important; /* Match summary text font-weight */ letter-spacing: normal !important; line-height: normal !important; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Match button transitions */ position: static !important; vertical-align: baseline !important; /* Lock all dimensions */ min-width: auto !important; max-width: none !important; min-height: auto !important; max-height: none !important; width: auto !important; height: auto !important; } /* Match VocaMatch button mobile interactive states */ /* Hover state on mobile - refined subtle (50% reduced) */ /* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */ .french-word:hover:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.75) !important; /* Reduced from 0.8 */ border-color: rgba(15, 23, 42, 0.18) !important; /* Slightly more subtle */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 1.5px 5px rgba(0, 0, 0, 0.05), /* Reduced from 3px 10px */ 0 0.5px 1.5px rgba(0, 0, 0, 0.04), /* Reduced from 1px 3px */ inset 0 1px 0 rgba(255, 255, 255, 0.65) !important; transform: translateY(-0.25px) !important; /* Reduced from -0.5px */ } /* Active/pressed state on mobile - refined subtle (50% reduced) */ /* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */ .french-word:active:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.72) !important; /* Slightly reduced */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateY(0) scale(0.99) !important; /* Reduced from 0.98 */ box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.04), /* Reduced from 1px 4px */ 0 0.5px 1px rgba(0, 0, 0, 0.03), /* Reduced from 1px 2px */ inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } /* Active state (tooltip open) on mobile - refined subtle (50% reduced) */ /* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */ .french-word.active:not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.8) !important; /* Reduced from 0.85 */ border-color: rgba(15, 23, 42, 0.18) !important; /* Slightly more subtle */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), /* Reduced from 4px 12px */ 0 1px 2px rgba(0, 0, 0, 0.05), /* Reduced from 2px 4px */ inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; transform: translateY(-0.5px) !important; /* Reduced from -1px */ } /* Focus state on mobile */ .french-word:focus { outline: none !important; outline-offset: 0 !important; } /* Legacy state - keep for compatibility */ .french-word.is-pressing { background: rgba(255, 255, 255, 0.7) !important; transform: none !important; } /* Ensure all mobile states maintain padding/height */ .french-word:active, .french-word.is-pressing, .french-word.active, .french-word:hover, .french-word:focus { padding: 2px 6px !important; /* CRITICAL: Keep height perfect as requested */ margin: 0 1px !important; border-width: 1px !important; border-radius: 20px !important; box-sizing: border-box !important; font-size: 14px !important; /* Match button mobile font-size */ font-weight: 400 !important; /* Match summary text font-weight */ letter-spacing: normal !important; line-height: normal !important; outline: none !important; outline-offset: 0 !important; min-width: auto !important; max-width: none !important; min-height: auto !important; max-height: none !important; width: auto !important; height: auto !important; } .glass-note-tooltip { position: fixed; top: 0; left: 0; right: 0; max-width: none; height: auto; /* Content-based height - same as bottom tooltip */ border-radius: 0 0 24px 24px; backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); opacity: 1; /* Start fully opaque on mobile - no transparency during opening */ transform: translateY(-100%) scale(0.98); padding: 30px 24px 26px 24px; /* Top: 30px, Right: 24px, Bottom: 26px, Left: 24px */ /* Graceful mobile closing animation - opacity fades out on close */ transition: opacity var(--transition-closing) var(--easing-closing), transform var(--transition-closing) var(--easing-closing), box-shadow var(--transition-closing) var(--easing-closing); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7); } .glass-note-tooltip::before { border-radius: 0 0 24px 24px; } .glass-note-tooltip.visible { opacity: 1; /* Instantly opaque - no fade-in to prevent seeing content behind */ transform: translateY(0) scale(1); /* Mobile opening animation - transform only, no opacity transition */ transition: transform var(--transition-opening) var(--easing-opening), box-shadow var(--transition-opening) var(--easing-opening); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 0 24px rgba(10, 102, 255, 0.08); } .glass-note-tooltip .nub { display: none; } /* Top tooltip: Symmetric spacing - Explanation ↔ Cultural Note = Cultural Note ↔ Translation */ /* Top tooltip order: Explanation → Cultural Note → Translation */ .glass-note-tooltip .word-display { display: block; /* Ensure block-level on mobile too */ font-size: 20px; margin-bottom: 14px; margin-top: 26px; /* Gap from cultural note - matches explanation→note gap (symmetric) */ font-weight: 700; font-style: italic; /* Translation in italic */ } /* Mobile: Word display row with audio container */ .glass-note-tooltip .word-display-row { display: flex; align-items: center; justify-content: flex-start; /* Changed from space-between */ gap: 12px; margin-bottom: 14px; margin-top: 26px; } .glass-note-tooltip .word-display-row .word-display { margin-bottom: 0; margin-top: 0; flex: 0 1 auto; /* Don't stretch */ } /* Mobile audio container adjustments */ .glass-note-tooltip .tooltip-audio-container { flex-direction: row-reverse; /* Put "FR" label BEFORE button (left side) */ gap: 10px; /* More space between label and button */ padding: 12px; /* Extra tap area */ margin: -12px; /* Offset padding */ margin-left: -8px; /* Adjust for visual balance */ } .glass-note-tooltip .tooltip-audio-label { font-size: 12px; font-weight: 600; color: #6b7280; /* Slightly darker for better visibility */ } /* Mobile save word button - larger touch target */ .glass-note-tooltip .tooltip-save-word-btn { padding: 10px; margin: -10px; /* Offset padding for visual alignment */ margin-right: -4px; } .glass-note-tooltip .tooltip-save-word-btn svg { width: 22px; height: 22px; } /* Hide desktop bottom row on mobile (save button is in audio container) */ .glass-note-tooltip .tooltip-bottom-row { display: none !important; } /* Mobile-friendly breathing animation - subtle border/background pulse only */ @keyframes mobileTooltipAudioBreathing { 0%, 100% { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.25); } 50% { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.4); } } /* Mobile: Larger circular audio button with subtle breathing animation */ .glass-note-tooltip .tooltip-audio-btn.match-word-audio-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; background: rgba(37, 99, 235, 0.08); border: 1.5px solid rgba(37, 99, 235, 0.25); border-radius: 50%; box-shadow: none !important; /* Never add box-shadow - causes deformation */ animation: mobileTooltipAudioBreathing 2.5s ease-in-out infinite; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transform: none !important; /* Never transform the button */ } /* Active/tap state - just color change, no transform or shadow */ .glass-note-tooltip .tooltip-audio-btn.match-word-audio-btn:active { background: rgba(37, 99, 235, 0.25) !important; border-color: rgba(37, 99, 235, 0.5) !important; animation-play-state: paused; } /* Playing state on mobile - simple color, no shadow */ .glass-note-tooltip .tooltip-audio-btn.match-word-audio-btn.playing { background: rgba(37, 99, 235, 0.2); border-color: rgba(37, 99, 235, 0.5); box-shadow: none !important; animation: none; } /* Loading state on mobile */ .glass-note-tooltip .tooltip-audio-btn.match-word-audio-btn.loading { background: rgba(37, 99, 235, 0.12); animation: none; } /* Icon stays static - no scaling animation */ .glass-note-tooltip .tooltip-audio-btn svg { width: 20px; height: 20px; margin-left: 2px; animation: none !important; transform: none !important; } /* Button size increased by 25% (45px) - matches increased desktop size */ .glass-note-tooltip .definition { font-size: 16px; margin-top: 8px; margin-bottom: 26px; /* Gap to cultural note - matches note→translation gap (symmetric) */ line-height: 1.5; } .glass-note-tooltip .note { font-size: 16px; margin-top: 26px; /* Gap from explanation - matches explanation→note gap (symmetric) */ margin-bottom: 26px; /* Gap to translation - matches note→translation gap (symmetric) */ font-weight: 600; /* Increased to 600 for better visibility on mobile */ } /* Bottom tooltip: Symmetric spacing - Translation ↔ Cultural Note = Cultural Note ↔ Explanation */ /* Bottom tooltip order: Translation → Cultural Note → Explanation */ .glass-note-tooltip.from-simplified-title .word-display { margin-top: 8px !important; /* Match top tooltip's first element spacing (8px) */ margin-bottom: 26px; /* Gap to cultural note - matches note→explanation gap */ } /* Bottom tooltip: Word display row with audio button */ .glass-note-tooltip.from-simplified-title .word-display-row { margin-top: 8px !important; margin-bottom: 26px; justify-content: flex-start; /* Match top tooltip */ } .glass-note-tooltip.from-simplified-title .word-display-row .word-display { margin-top: 0 !important; margin-bottom: 0 !important; flex: 0 1 auto; /* Don't stretch */ } .glass-note-tooltip.from-simplified-title .note { margin-top: 26px; /* Gap from word-display - matches translation→note gap */ margin-bottom: 26px; /* Gap to explanation - matches translation→note gap (symmetric) */ } .glass-note-tooltip.from-simplified-title .definition { margin-top: 26px; /* Gap from note - matches translation→note gap (symmetric) */ margin-bottom: 14px !important; /* Match top tooltip's last element spacing (14px) */ } /* Simplified title tooltips open from bottom on mobile */ .glass-note-tooltip.from-simplified-title { top: auto !important; /* iOS Safari Dynamic Viewport Fix: - Use dvh (dynamic viewport height) for Safari's collapsing toolbar - Use env(safe-area-inset-bottom) for notch/home indicator - JS sets --ios-bottom-offset as additional safety margin - Fallback: 0 for browsers that don't support these */ bottom: 0; bottom: env(safe-area-inset-bottom, 0px); /* Use CSS custom property set by JavaScript for iOS Safari dynamic toolbar */ bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ios-bottom-offset, 0px)); left: 0; right: 0; max-width: none; width: 100%; /* Explicit width instead of left/right */ height: auto !important; /* Match top tooltip - content-based height */ min-height: auto !important; /* Prevent min-height from stretching */ /* Limit max-height to prevent overflow on small viewports */ max-height: 70vh; /* Fallback */ max-height: 70dvh; /* Dynamic viewport height - adjusts with Safari toolbar */ overflow-y: auto; /* Allow scroll if content exceeds max-height */ -webkit-overflow-scrolling: touch; border-radius: 24px 24px 0 0; opacity: 1; /* Start fully opaque on mobile - no transparency during opening */ transform: translateY(100%) scale(0.98); /* Padding with safe-area-inset for bottom */ padding-top: 30px; padding-right: 24px; padding-left: 24px; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); /* Graceful mobile closing animation - opacity fades out on close */ transition: opacity var(--transition-closing) var(--easing-closing), transform var(--transition-closing) var(--easing-closing), box-shadow var(--transition-closing) var(--easing-closing); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15), 0 -2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); /* CRITICAL: Prevent stretching - align to bottom but don't fill */ align-self: flex-end; /* If in flex container */ flex-shrink: 1; /* Allow shrinking */ flex-grow: 0; /* Don't grow to fill space */ /* GPU acceleration for smooth animations during Safari toolbar changes */ -webkit-transform: translateY(100%) scale(0.98) translateZ(0); will-change: transform, opacity; } .glass-note-tooltip.from-simplified-title::before { border-radius: 24px 24px 0 0; } .glass-note-tooltip.from-simplified-title.visible { opacity: 1; /* Instantly opaque - no fade-in to prevent seeing content behind */ transform: translateY(0) scale(1); -webkit-transform: translateY(0) scale(1) translateZ(0); /* Mobile opening animation - transform only, no opacity transition */ transition: transform var(--transition-opening) var(--easing-opening), box-shadow var(--transition-opening) var(--easing-opening); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15), 0 -2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 24px rgba(10, 102, 255, 0.08); } } /* Tablet-specific adjustments */ @media (min-width: 481px) and (max-width: 768px) { .glass-note-tooltip { max-width: 360px; /* Increased from 320px for better text flow */ padding: 22px; } .glass-note-tooltip .word-display { font-size: 17px; } .glass-note-tooltip .definition { font-size: 15px; } } /* High contrast mode support */ @media (prefers-contrast: high) { :root { --tooltip-bg: rgba(255, 255, 255, 0.95); --tooltip-border: rgba(0, 0, 0, 0.3); --tooltip-shadow: rgba(0, 0, 0, 0.3); } .glass-note-tooltip .word-display { color: #000000; } .glass-note-tooltip .definition { color: #1d1d1f; } .glass-note-tooltip .note { color: #424245; } } /* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .glass-note-tooltip { transition: opacity 100ms ease-out, transform 100ms ease-out; } .glass-note-tooltip.visible { transition: opacity 100ms ease-out, transform 100ms ease-out; transform: scale(1) translateY(0); } @media (max-width: 480px) { .glass-note-tooltip.visible { transition: opacity 100ms ease-out, transform 100ms ease-out; transform: translateY(0) scale(1); } } } /* Dark mode support */ @media (prefers-color-scheme: dark) { :root { --tooltip-bg: rgba(30, 30, 32, 0.82); --tooltip-border: rgba(255, 255, 255, 0.18); --tooltip-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0.5px 0 rgba(255, 255, 255, 0.12); --tooltip-glow: 0 0 24px rgba(10, 132, 255, 0.12); } .glass-note-tooltip .word-display { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .glass-note-tooltip .definition { color: #e5e5e7; } .glass-note-tooltip .note { color: #a1a1a6; } .glass-note-tooltip .nub { border-top-color: rgba(30, 30, 32, 0.82); } .glass-note-tooltip .nub::before { border-top-color: rgba(255, 255, 255, 0.15); } .glass-note-tooltip .tooltip-bottom-row { border-top-color: rgba(255, 255, 255, 0.08); } .glass-note-tooltip .tooltip-save-word-btn { color: rgba(255, 255, 255, 0.4); } .glass-note-tooltip .tooltip-save-word-btn:hover { color: rgba(255, 255, 255, 0.6); } .glass-note-tooltip .tooltip-save-word-btn.saved { color: #f59e0b; } .glass-note-tooltip .tooltip-audio-hint { border-top-color: rgba(255, 255, 255, 0.08); color: #9ca3af; } /* Desktop: active/hovered word should be light, not black */ .secondary-title .french-word:hover, .secondary-title .french-word:active, .secondary-title .french-word.active, .secondary-title .french-word.is-pressing { color: rgba(255, 255, 255, 0.9) !important; } .article-title .french-word:hover, .article-title .french-word:active, .article-title .french-word.active, .article-title .french-word.is-pressing { color: rgba(255, 255, 255, 0.9) !important; } /* Audio education hint - dark mode */ .bf-audio-education-hint { background: rgba(30, 30, 32, 0.9); color: #d1d5db; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); } /* Desktop paywall close button */ .desktop-paywall-close:hover { color: #d1d5db; background-color: rgba(255, 255, 255, 0.08); } /* Mobile paywall close button */ .mobile-paywall-close:hover { color: #d1d5db; background-color: rgba(255, 255, 255, 0.08); } } /* Dark mode + mobile: active word color should be light, not black */ @media (prefers-color-scheme: dark) and (max-width: 480px) { /* Base mobile state: simplified title words inherit white title color (overrides the light-mode mobile rule that forces --french-blue) */ .article-title .french-word, .article-title .french-word:hover, .article-title .french-word:active, .article-title .french-word.is-pressing { color: #ffffff !important; } /* Base mobile state: original title words match dark-mode secondary title (55% white) */ .secondary-title .french-word, .secondary-title .french-word:hover, .secondary-title .french-word:active, .secondary-title .french-word.is-pressing { color: rgba(255, 255, 255, 0.55) !important; } /* Mobile active word on simplified titles */ .article-title .french-word.active { color: rgba(255, 255, 255, 0.9) !important; } /* Mobile active word on original titles */ .secondary-title .french-word.active { color: rgba(255, 255, 255, 0.9) !important; } /* Mobile french-word pills - dark glass */ .french-word:hover:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 1.5px 5px rgba(0, 0, 0, 0.15), 0 0.5px 1.5px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .french-word:active:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.1), 0 0.5px 1px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } .french-word.active:not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .french-word.is-pressing { background: rgba(255, 255, 255, 0.1) !important; } /* Mobile tooltip dark mode - adjust shadows */ .glass-note-tooltip { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.1); } .glass-note-tooltip.visible { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 0 24px rgba(10, 132, 255, 0.12); } /* Mobile tooltip audio label */ .glass-note-tooltip .tooltip-audio-label { color: #9ca3af; } } /* Focus management */ .glass-note-tooltip:focus { outline: none; } /* ============================================ DESKTOP PAYWALL TOOLTIP - Unified tooltip paywall for all features Matches mobile slider paywall design but in tooltip format ============================================ */ /* Desktop paywall backdrop - blurs entire page with premium effect */ .desktop-paywall-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 9998; /* Below paywall tooltip (10000), above all content */ /* Premium blur effect - light to medium intensity */ backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); /* Subtle dark overlay for premium feel */ background: rgba(0, 0, 0, 0.15); /* Initial state - hidden */ opacity: 0; pointer-events: none; /* Premium closing animation - smooth and elegant */ transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1); /* Allow scrolling through backdrop */ overflow: auto; -webkit-overflow-scrolling: touch; } /* Visible state - premium opening animation */ .desktop-paywall-backdrop.visible { opacity: 1; pointer-events: auto; /* Premium opening animation - smooth and elegant */ transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1); } /* Ensure backdrop doesn't interfere with paywall tooltip */ .glass-note-tooltip.desktop-paywall-tooltip { z-index: 10000; /* Above backdrop */ min-width: 360px; max-width: 420px; padding: 24px; /* Match mobile slider paywall font */ font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Position fixed for proper layering, relative for absolute close button */ position: fixed; } /* Desktop paywall close button */ .desktop-paywall-close { position: absolute; top: 4px; right: 12px; background: none; border: none; font-size: 23px; /* 30% bigger: 18px × 1.3 = 23.4px ≈ 23px */ font-weight: 300; /* Keep same thickness */ color: #9ca3af; cursor: pointer; padding: 2px; line-height: 1; transition: color 0.2s ease, background-color 0.2s ease; z-index: 10; width: 29px; /* 30% bigger: 22px × 1.3 = 28.6px ≈ 29px */ height: 29px; /* 30% bigger: 22px × 1.3 = 28.6px ≈ 29px */ display: flex; align-items: center; justify-content: center; border-radius: 4px; } .desktop-paywall-close:hover { color: #4b5563; background-color: rgba(0, 0, 0, 0.04); } .desktop-paywall-close:active { transform: scale(0.95); } /* Desktop paywall content container */ .desktop-paywall-content { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; } /* Paywall message text - matches mobile exactly */ .desktop-paywall-content .paywall-message, .glass-note-tooltip.desktop-paywall-tooltip .desktop-paywall-content .paywall-message { font-size: 18px !important; font-weight: 500 !important; /* Medium weight */ color: #000000; /* Pure black - matches mobile */ text-align: center; line-height: 1.4; margin: 0; margin-top: 7px; letter-spacing: normal; /* Matches mobile */ } /* Pricing options container - two cards side by side */ .desktop-paywall-content .paywall-pricing-options { display: flex; gap: 12px; width: 100%; max-width: 100%; } /* Individual pricing card - matches mobile slider paywall */ .desktop-paywall-content .paywall-pricing-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 20px 12px 12px 12px; /* White card with subtle border - matches mobile */ background: #ffffff; border: 1.5px solid rgba(15, 23, 42, 0.08); border-radius: 16px; /* Subtle shadow like mobile */ box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.04); /* Interaction */ cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Reset button styles */ font-family: inherit; outline: none; /* Position relative for absolute badge positioning */ position: relative; overflow: visible; } /* Pricing card - Selected state - matches mobile */ .desktop-paywall-content .paywall-pricing-card.selected { border: 1.5px solid rgba(37, 99, 235, 0.5) !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2), 0 4px 16px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } /* Pricing card - Active state */ .desktop-paywall-content .paywall-pricing-card:not(.selected):active { transform: scale(0.98); } /* Price container - horizontal layout */ .desktop-paywall-content .paywall-pricing-price { display: flex; align-items: baseline; gap: 2px; line-height: 1; margin: 0; padding: 0; white-space: nowrap; } /* Euro symbol - small, muted */ .desktop-paywall-content .paywall-pricing-symbol { font-size: 1rem; font-weight: 500; color: #6b7280; align-self: flex-start; margin-top: 0.15rem; } /* Main price number - large, bold */ .desktop-paywall-content .paywall-pricing-amount { font-size: 2rem; font-weight: 700; color: #1a1a1a; letter-spacing: -0.02em; } /* "/ month" text */ .desktop-paywall-content .paywall-pricing-slash { font-size: 0.875rem; font-weight: 400; color: #6b7280; margin-left: 2px; } /* Period text container */ .desktop-paywall-content .paywall-pricing-period { font-size: 0.875rem; font-weight: 400; color: #6b7280; margin-top: 4px; } /* Blue savings badge - positioned at top-right corner */ .desktop-paywall-content .paywall-savings-badge { position: absolute; top: -8px; right: 8px; display: inline-block; padding: 4px 10px; background: var(--french-blue, #3b82f6); color: #ffffff; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; z-index: 1; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); } /* Upgrade button - matches mobile slider paywall */ .desktop-paywall-content .paywall-upgrade-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 14px 22px; margin-top: 4px; /* Typography */ font-size: 18px; font-weight: 650; letter-spacing: -0.01em; /* Blue background with white text - using !important to override any conflicting styles */ background: var(--french-blue, #3b82f6) !important; color: #ffffff !important; /* Border and shadows */ border: 1.5px solid rgba(37, 99, 235, 0.3); border-radius: 999px; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15), 0 4px 16px rgba(37, 99, 235, 0.12), 0 8px 32px rgba(37, 99, 235, 0.10), 0 16px 48px rgba(37, 99, 235, 0.08); /* Positioning and performance */ position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); backface-visibility: hidden; z-index: 1; /* Smooth transitions */ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, background 0.5s ease, color 0.5s ease; /* Interaction */ cursor: pointer; -webkit-tap-highlight-color: transparent; /* Reset */ font-family: inherit; outline: none; text-decoration: none; white-space: nowrap; } /* Text isolation - ensures text stays white above animation */ .desktop-paywall-content .paywall-upgrade-btn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; position: relative; z-index: 10 !important; mix-blend-mode: normal !important; text-shadow: none !important; background: transparent !important; isolation: isolate !important; } /* Hover state - removed, using default blue style */ .desktop-paywall-content .paywall-upgrade-btn:hover, .desktop-paywall-content .paywall-upgrade-btn:focus-visible { /* No change on hover - keep default blue style */ } .desktop-paywall-content .paywall-upgrade-btn:active { transform: translateY(0) scale(0.98); background: var(--french-blue-darker, #1d4ed8); } /* Dark mode support for desktop paywall tooltip */ @media (prefers-color-scheme: dark) { .desktop-paywall-content .paywall-message { color: #ffffff; } .desktop-paywall-content .paywall-pricing-card { background: #2a2a2e; border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } .desktop-paywall-content .paywall-pricing-card.selected { background: rgba(59, 130, 246, 0.1); border: 1.5px solid rgba(37, 99, 235, 0.5) !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2), 0 4px 16px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } .desktop-paywall-content .paywall-pricing-symbol { color: #9ca3af; } .desktop-paywall-content .paywall-pricing-amount { color: #f3f4f6; } .desktop-paywall-content .paywall-pricing-slash { color: #9ca3af; } .desktop-paywall-content .paywall-pricing-period { color: #9ca3af; } .desktop-paywall-content .paywall-savings-badge { background: var(--french-blue, #3b82f6); color: #ffffff; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4); } .desktop-paywall-content .paywall-upgrade-btn { background: var(--french-blue, #3b82f6) !important; color: #ffffff !important; border: 1.5px solid rgba(37, 99, 235, 0.3); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15), 0 4px 16px rgba(37, 99, 235, 0.12), 0 8px 32px rgba(37, 99, 235, 0.10), 0 16px 48px rgba(37, 99, 235, 0.08); } .desktop-paywall-content .paywall-upgrade-btn:hover, .desktop-paywall-content .paywall-upgrade-btn:focus-visible { /* No change on hover - keep default blue style */ } .desktop-paywall-content .paywall-upgrade-btn:active { transform: translateY(0) scale(0.98); background: var(--french-blue-darker, #1d4ed8); } .desktop-paywall-content .paywall-upgrade-btn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } } /* Only show desktop paywall tooltip on desktop (not mobile) */ @media (max-width: 480px) { .glass-note-tooltip.desktop-paywall-tooltip { display: none !important; } } /* ============================================ LEGACY PAYWALL TOOLTIP - Old simple design (kept for fallback) ============================================ */ /* Paywall tooltip container - same as regular tooltip but with blur overlay */ .glass-note-tooltip.paywall-tooltip { /* Keep all regular tooltip styling */ } /* Content wrapper for blur effect */ .glass-note-tooltip .tooltip-content-blur { position: relative; /* Premium blur - content barely visible, creates mystery/desire */ filter: blur(3px); -webkit-filter: blur(3px); opacity: 0.6; user-select: none; -webkit-user-select: none; pointer-events: none; } /* Paywall overlay on top of blurred content */ .glass-note-tooltip .tooltip-paywall-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; /* Premium frosted glass - clean, minimal */ background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border-radius: inherit; padding: 20px; z-index: 1; } /* Paywall message text - clean look */ .glass-note-tooltip .paywall-message { font-size: 15px; font-weight: 600; color: #1a1a1c; text-align: center; line-height: 1.4; margin: 0; letter-spacing: -0.01em; } /* Upgrade button - matches existing paywall modal button style */ .glass-note-tooltip .paywall-upgrade-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; background: #ffffff; color: #000000; font-size: 1rem; font-weight: 600; border: 1.25px solid var(--french-blue, #2563eb); border-radius: 999px; /* Pill shape - matches your existing button */ cursor: pointer; transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15), 0 4px 16px rgba(15, 23, 42, 0.12); text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; } .glass-note-tooltip .paywall-upgrade-btn:hover { transform: translateY(-2px) scale(1.005); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.15); } .glass-note-tooltip .paywall-upgrade-btn:active { transform: translateY(0); } /* Mobile responsive adjustments */ @media (max-width: 480px) { .glass-note-tooltip .tooltip-paywall-overlay { padding: 24px 20px; gap: 22px; } .glass-note-tooltip .paywall-message { font-size: 16px; font-weight: 700; } .glass-note-tooltip .paywall-upgrade-btn { padding: 14px 28px; font-size: 1rem; border-radius: 999px; /* Pill shape on mobile too */ } } /* Dark mode support for paywall tooltip */ @media (prefers-color-scheme: dark) { .glass-note-tooltip .tooltip-paywall-overlay { background: rgba(40, 40, 42, 0.7); } .glass-note-tooltip .paywall-message { color: #ffffff; } .glass-note-tooltip .paywall-upgrade-btn { background: #ffffff; color: #000000; } } /* Ensure tooltip doesn't interfere with page layout */ .glass-note-tooltip { box-sizing: border-box; } /* Animation for very tall tooltips on mobile */ @media (max-width: 480px) { .glass-note-tooltip.tall-content { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Ensure bottom tooltips also respect tall-content max-height */ .glass-note-tooltip.from-simplified-title.tall-content { max-height: 60vh !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } .glass-note-tooltip.tall-content::-webkit-scrollbar { width: 3px; } .glass-note-tooltip.tall-content::-webkit-scrollbar-track { background: transparent; } .glass-note-tooltip.tall-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 1.5px; } } /* ============================================ MOBILE SLIDER PAYWALL (All Features) Matches pricing page design exactly ============================================ */ .mobile-slider-paywall { position: fixed; /* iOS Safari Dynamic Viewport Fix: - Use dvh (dynamic viewport height) for Safari's collapsing toolbar - Use env(safe-area-inset-bottom) for notch/home indicator - JS sets --ios-bottom-offset as additional safety margin */ bottom: 0; bottom: env(safe-area-inset-bottom, 0px); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ios-bottom-offset, 0px)); left: 0; right: 0; width: 100%; z-index: 10001; /* Above paywall modal */ /* Clean white background like pricing cards */ background: #ffffff; /* Border and radius - bottom sheet style */ border-radius: 20px 20px 0 0; border: 1.5px solid rgba(15, 23, 42, 0.08); border-bottom: none; /* Shadow matching pricing cards */ box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.12), 0 -2px 8px rgba(15, 23, 42, 0.06); /* Fixed height for consistent appearance */ height: auto; min-height: auto; /* Limit max-height to prevent overflow on small viewports */ max-height: 80vh; /* Fallback */ max-height: 80dvh; /* Dynamic viewport height - adjusts with Safari toolbar */ overflow-y: auto; /* Allow scroll if content exceeds max-height */ -webkit-overflow-scrolling: touch; /* iOS Safari fix: Add safe-area-inset-bottom to bottom padding */ padding: 30px 20px calc(28px + env(safe-area-inset-bottom, 0px)) 20px; /* Content layout */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 30px; /* 30px gap between message and pricing cards */ /* Initial state - hidden below viewport */ opacity: 1; transform: translateY(100%) scale(0.98); pointer-events: none; /* Closing animation - same timing as tooltip */ transition: opacity var(--transition-closing, 450ms) var(--easing-closing, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--transition-closing, 450ms) var(--easing-closing, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--transition-closing, 450ms) var(--easing-closing, cubic-bezier(0.4, 0, 0.2, 1)); /* Match pricing page font */ font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* GPU acceleration for smooth animations during Safari toolbar changes */ -webkit-transform: translateY(100%) scale(0.98) translateZ(0); will-change: transform, opacity; } /* Mobile paywall close button */ .mobile-paywall-close { position: absolute; top: 4px; right: 12px; background: none; border: none; font-size: 23px; /* 30% bigger: 18px × 1.3 = 23.4px ≈ 23px */ font-weight: 300; /* Keep same thickness */ color: #9ca3af; cursor: pointer; padding: 2px; line-height: 1; transition: color 0.2s ease, background-color 0.2s ease; z-index: 10; width: 29px; /* 30% bigger: 22px × 1.3 = 28.6px ≈ 29px */ height: 29px; /* 30% bigger: 22px × 1.3 = 28.6px ≈ 29px */ display: flex; align-items: center; justify-content: center; border-radius: 4px; } .mobile-paywall-close:hover { color: #4b5563; background-color: rgba(0, 0, 0, 0.04); } .mobile-paywall-close:active { transform: scale(0.95); } /* Visible state */ .mobile-slider-paywall.visible { opacity: 1; transform: translateY(0) scale(1); -webkit-transform: translateY(0) scale(1) translateZ(0); pointer-events: auto; /* Opening animation - same timing as tooltip */ transition: transform var(--transition-opening, 700ms) var(--easing-opening, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--transition-opening, 700ms) var(--easing-opening, cubic-bezier(0.4, 0, 0.2, 1)); } /* Paywall message - casual, subtle (NOT uppercase) */ .mobile-slider-paywall .paywall-message { font-size: 18px !important; font-weight: 500 !important; /* Medium weight */ color: #000000; /* Black */ text-align: center; line-height: 1.4; margin: 0; margin-top: 7px; letter-spacing: normal; } /* ============================================ PRICING OPTIONS - Two cards side by side Matches pricing page card styling ============================================ */ .mobile-slider-paywall .paywall-pricing-options { display: flex; gap: 12px; width: 100%; max-width: 100%; } /* Individual pricing card - matches pricing page cards */ .mobile-slider-paywall .paywall-pricing-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; /* Removed gap - using margin-top on period text instead */ padding: 30px 12px 15px 12px; /* Top padding 30px for both cards, bottom 15px */ /* White card with subtle border - matches pricing cards */ background: #ffffff; border: 1.5px solid rgba(15, 23, 42, 0.08); border-radius: 16px; /* Subtle shadow like pricing cards */ box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.04); /* Interaction */ cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Reset button styles */ font-family: inherit; outline: none; /* Position relative for absolute badge positioning */ position: relative; overflow: visible; /* Allow badge to extend beyond card */ } /* Pricing card - Selected state - EXACT same glow as VocaMatch/QuizMe buttons */ .mobile-slider-paywall .paywall-pricing-card.selected { border: 1.5px solid rgba(37, 99, 235, 0.5) !important; /* Same as .bf-quiz-link.open */ box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2), 0 4px 16px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* EXACT same as buttons */ } /* Pricing card - Active state */ .mobile-slider-paywall .paywall-pricing-card:not(.selected):active { transform: scale(0.98); } /* Price container - horizontal layout like pricing page */ .mobile-slider-paywall .paywall-pricing-price { display: flex; align-items: baseline; gap: 2px; line-height: 1; margin: 0; /* No margin on any side */ padding: 0; /* No padding on any side */ } /* Euro symbol - small, muted, positioned at top like pricing page */ .mobile-slider-paywall .paywall-pricing-symbol { font-size: 1rem; font-weight: 500; color: #6b7280; /* Muted gray - matches pricing page */ align-self: flex-start; margin-top: 0.15rem; } /* Main price number - large, bold, dark */ .mobile-slider-paywall .paywall-pricing-amount { font-size: 2rem; font-weight: 700; color: #1a1a1a; /* --ink color */ letter-spacing: -0.02em; } /* "/ month" text - same subtle size as period text */ .mobile-slider-paywall .paywall-pricing-slash { font-size: 0.875rem; font-weight: 400; color: #6b7280; /* Muted gray - same as period */ margin-left: 2px; } /* Period text container - positioned at bottom of card */ .mobile-slider-paywall .paywall-pricing-period { font-size: 0.875rem; font-weight: 400; color: #6b7280; /* Muted gray */ margin-top: 0; /* Zero spacing between price and period text */ } /* Blue savings badge - positioned at top-right corner of card */ .mobile-slider-paywall .paywall-savings-badge { position: absolute; top: -8px; right: 8px; display: inline-block; padding: 4px 10px; background: var(--french-blue, #3b82f6); /* Blue background */ color: #ffffff; /* White text */ border-radius: 999px; /* Pill shape */ font-size: 0.6875rem; /* 11px - smaller for badge */ font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; z-index: 1; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); /* Blue shadow for depth */ } /* ============================================ UPGRADE BUTTON - EXACT same as desktop paywall modal button ============================================ */ .mobile-slider-paywall .paywall-upgrade-btn { /* Base button styles - matches .btn from landing page */ display: inline-flex; align-items: center; justify-content: center; width: auto; /* Fit to text, not full width */ padding: 14px 22px; /* Top/Bottom: 14px, Left/Right: 22px */ margin-top: 2px; /* Typography */ font-size: 18px; /* 1.125rem */ font-weight: 650; letter-spacing: -0.01em; /* Blue background with white text */ background: var(--french-blue, #3b82f6); color: #ffffff !important; /* Border and shadows - matches .btn-glass styling but adapted for blue */ border: 1.5px solid rgba(37, 99, 235, 0.3); /* Blue border with opacity */ border-radius: 999px; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15), 0 4px 16px rgba(37, 99, 235, 0.12), 0 8px 32px rgba(37, 99, 235, 0.10), 0 16px 48px rgba(37, 99, 235, 0.08); /* Positioning and performance - matches .btn-glass */ position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); backface-visibility: hidden; z-index: 1; /* Smooth transitions - matches .btn-glass */ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, background 0.5s ease, color 0.5s ease; /* Interaction */ cursor: pointer; -webkit-tap-highlight-color: transparent; /* Reset */ font-family: inherit; outline: none; text-decoration: none; white-space: nowrap; } /* Text isolation - ensures text stays white above animation */ .mobile-slider-paywall .paywall-upgrade-btn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; position: relative; z-index: 10 !important; mix-blend-mode: normal !important; text-shadow: none !important; background: transparent !important; isolation: isolate !important; } /* Hover state - matches .btn-glass:hover with blue theme */ .mobile-slider-paywall .paywall-upgrade-btn:hover, .mobile-slider-paywall .paywall-upgrade-btn:focus-visible { transform: translateY(-2px) scale(1.005); color: #ffffff !important; background: var(--french-blue-dark, #2563eb); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18), 0 8px 24px rgba(37, 99, 235, 0.15), 0 16px 40px rgba(37, 99, 235, 0.12), 0 24px 56px rgba(37, 99, 235, 0.10); border-color: rgba(37, 99, 235, 0.4); } .mobile-slider-paywall .paywall-upgrade-btn:active { transform: translateY(0) scale(0.98); background: var(--french-blue-darker, #1d4ed8); } /* Backdrop overlay for mobile slider paywall */ .mobile-slider-paywall-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 10000; /* Just below the slider */ background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity var(--transition-closing, 450ms) var(--easing-closing, cubic-bezier(0.4, 0, 0.2, 1)); } .mobile-slider-paywall-backdrop.visible { opacity: 1; pointer-events: auto; transition: opacity var(--transition-opening, 700ms) var(--easing-opening, cubic-bezier(0.4, 0, 0.2, 1)); } /* Dark mode support */ @media (prefers-color-scheme: dark) { .mobile-slider-paywall { background: #1e1e20; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4), 0 -2px 8px rgba(0, 0, 0, 0.3); } .mobile-slider-paywall .paywall-message { color: #ffffff; /* White for dark mode readability */ } .mobile-slider-paywall .paywall-pricing-card { background: #2a2a2e; border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } .mobile-slider-paywall .paywall-pricing-card.selected { background: rgba(59, 130, 246, 0.1); border: 1.5px solid rgba(37, 99, 235, 0.5) !important; /* Same as buttons */ box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2), 0 4px 16px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } .mobile-slider-paywall .paywall-pricing-symbol { color: #9ca3af; } .mobile-slider-paywall .paywall-pricing-amount { color: #f3f4f6; } .mobile-slider-paywall .paywall-pricing-period { color: #9ca3af; } .mobile-slider-paywall .paywall-savings-badge { background: var(--french-blue, #3b82f6); /* Blue background - same as light mode */ color: #ffffff; /* White text */ box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4); /* Slightly stronger shadow in dark mode */ } .mobile-slider-paywall .paywall-upgrade-btn { background: var(--french-blue, #3b82f6); color: #ffffff !important; border: 1.5px solid rgba(37, 99, 235, 0.3); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15), 0 4px 16px rgba(37, 99, 235, 0.12), 0 8px 32px rgba(37, 99, 235, 0.10), 0 16px 48px rgba(37, 99, 235, 0.08); } .mobile-slider-paywall .paywall-upgrade-btn:hover, .mobile-slider-paywall .paywall-upgrade-btn:focus-visible { transform: translateY(-2px) scale(1.005); background: var(--french-blue-dark, #2563eb); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18), 0 8px 24px rgba(37, 99, 235, 0.15), 0 16px 40px rgba(37, 99, 235, 0.12), 0 24px 56px rgba(37, 99, 235, 0.10); border-color: rgba(37, 99, 235, 0.4); } .mobile-slider-paywall .paywall-upgrade-btn:active { transform: translateY(0) scale(0.98); background: var(--french-blue-darker, #1d4ed8); } /* Text isolation for dark mode */ .mobile-slider-paywall .paywall-upgrade-btn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .mobile-slider-paywall-backdrop { background: rgba(0, 0, 0, 0.6); } } /* Only show on mobile */ @media (min-width: 481px) { .mobile-slider-paywall, .mobile-slider-paywall-backdrop { display: none !important; } }