/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* Hide Turbo progress bar */ .turbo-progress-bar { display: none; } /* ============================================================================= * View Transitions (JNL-74) * ============================================================================= * Slide animations for page navigation, with opt-out for tab bar links. * * The data-view-transition attribute on controls whether animations run: * - "slide" (default): Apply slide animations * - "none": Disable animations (used for tab bar navigation) * * Links with data-turbo-view-transition="false" set data-view-transition="none" * via view_transitions_controller.js, making tab bar navigation instant. */ /* Forward navigation (default) - slide left */ html[data-turbo-visit-direction="forward"]::view-transition-old(root), html:not([data-turbo-visit-direction])::view-transition-old(root) { animation: slide-out 0.3s ease-out; } html[data-turbo-visit-direction="forward"]::view-transition-new(root), html:not([data-turbo-visit-direction])::view-transition-new(root) { animation: slide-in 0.3s ease-out; } /* Backward navigation - slide right */ html[data-turbo-visit-direction="back"]::view-transition-old(root) { animation: slide-out-backward 0.3s ease-out; } html[data-turbo-visit-direction="back"]::view-transition-new(root) { animation: slide-in-backward 0.3s ease-out; } /* Disable all view transition animations when data-view-transition="none" * This is set by view_transitions_controller.js when clicking links with * data-turbo-view-transition="false" (e.g., bottom nav tab bar) */ html[data-view-transition="none"]::view-transition-old(root), html[data-view-transition="none"]::view-transition-new(root) { animation: none !important; } @keyframes slide-out { to { transform: translateX(-100%); } } @keyframes slide-in { from { transform: translateX(100%); } } @keyframes slide-out-backward { to { transform: translateX(100%); } } @keyframes slide-in-backward { from { transform: translateX(-100%); } } /* ============================================================================= * Turbo Frame View Transitions (JNL-58) * ============================================================================= * View transition animations for turbo frame content updates. * Uses the View Transitions API (document.startViewTransition) for smooth * animations when navigating within the mood chart. * * Transition types (set via data-frame-transition on ): * - "slide-left": Content slides left (going forward in time) * - "slide-right": Content slides right (going back in time) * - "fade": Content fades out/in (switching W/M/6M tabs) */ /* Slide Left: Old content exits left, new content enters from right */ html[data-frame-transition="slide-left"]::view-transition-old(root) { animation: frame-slide-out-left 0.25s ease-out; } html[data-frame-transition="slide-left"]::view-transition-new(root) { animation: frame-slide-in-from-right 0.25s ease-out; } /* Slide Right: Old content exits right, new content enters from left */ html[data-frame-transition="slide-right"]::view-transition-old(root) { animation: frame-slide-out-right 0.25s ease-out; } html[data-frame-transition="slide-right"]::view-transition-new(root) { animation: frame-slide-in-from-left 0.25s ease-out; } /* Fade: Cross-fade for tab switches (iOS Health app style) */ html[data-frame-transition="fade"]::view-transition-old(root) { animation: frame-fade-out 0.2s ease-out; } html[data-frame-transition="fade"]::view-transition-new(root) { animation: frame-fade-in 0.2s ease-out; } /* Slide animations */ @keyframes frame-slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-30%); opacity: 0; } } @keyframes frame-slide-in-from-right { from { transform: translateX(30%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes frame-slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(30%); opacity: 0; } } @keyframes frame-slide-in-from-left { from { transform: translateX(-30%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Fade animations */ @keyframes frame-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes frame-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================================================= * iOS Safe Area Utilities (JNL-74) * ============================================================================= * Custom utility classes for iOS safe area insets. * Used by the bottom navigation dock to avoid the iOS home indicator. * * Requires viewport-fit=cover in the meta viewport tag: * */ /* Top padding for iOS safe area (dynamic island/notch) * Uses max() to ensure at least 16px (1rem) padding, plus any safe area inset. * Falls back to 16px for browsers that don't support env(). */ .pt-safe { padding-top: max(env(safe-area-inset-top, 0px), 1rem); } /* Bottom padding for iOS safe area (home indicator) * Falls back to 8px for browsers that don't support env() */ .pb-safe { padding-bottom: env(safe-area-inset-bottom, 8px); } /* ============================================================================= * JNL-145: Edge-to-Edge Safe Area Extension * ============================================================================= * For screens that need a background color extending into the iOS safe areas * (status bar, home indicator), use negative margins to pull the element into * the safe area, then add padding to keep content properly positioned. * * This approach is more reliable than setting background on html/body because: * - WKWebView may render safe areas differently than expected * - Stacking contexts can prevent background inheritance * - This works regardless of parent element backgrounds * * Usage: Add these classes to the container that has the background color. * The container will extend into safe areas while content stays properly inset. */ /* Extend element into top safe area with internal padding compensation */ .extend-into-safe-top { margin-top: calc(-1 * max(env(safe-area-inset-top, 0px), 1rem)); padding-top: max(env(safe-area-inset-top, 0px), 1rem); } /* Extend element into bottom safe area with internal padding compensation */ .extend-into-safe-bottom { margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); } /* ============================================================================= * Watermark Utilities (JNL-96) * ============================================================================= * Background watermark for zodiac symbol (horoscope mode) or mascot. * Purely decorative, positioned bottom-right of content area above nav bar. * * Display rules: * - Horoscope mode ON: User's zodiac emoji * - Horoscope mode OFF: Mascot placeholder (📔 until real mascot designed) * - Unauthenticated or ineligible: No watermark * * Styling: * - clamp() size for small/large screens (keeps watermark reasonable on tablets) * - 7% opacity with purple-500 tint for mystical feel * - Fixed position with safe-area aware offsets * - z-index 0 with content stacked above (avoid negative z-index issues) */ .watermark { position: fixed; bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); /* Above bottom nav + safe area */ right: max(1rem, env(safe-area-inset-right, 0px)); font-size: clamp(160px, 35vw, 320px); line-height: 1; opacity: 0.07; /* 7% - middle of 5-8% range */ color: rgb(139, 92, 246); /* purple-500 for indigo/mystical tint */ pointer-events: none; /* Don't interfere with taps */ z-index: 0; /* Content stacked above via z-index */ user-select: none; /* Cannot be selected */ } /* ============================================================================= * Notification Recovery Card Glow Animation (JNL-125) * ============================================================================= * One-shot glow animation for the notification recovery card. * Draws attention on first render without being annoying on subsequent views. * Uses oklch for DaisyUI theme compatibility with --color-primary. */ @keyframes glow-once { 0% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } 50% { box-shadow: 0 0 16px oklch(var(--color-primary) / 0.3); } 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } } .animate-glow-once { animation: glow-once 1.5s ease-in-out 1; } /* ============================================================================= * JNL-145: Hide Bottom Nav on Mood Entry Pages * ============================================================================= * The bottom_nav has data-turbo-permanent which keeps it in the DOM across * Turbo navigations. On mood entry pages (which have mood-entry-page class * on the body), we hide it to allow edge-to-edge mood background colors. * This rule is in application.css (not just native.css) to ensure it applies. */ .mood-entry-page #bottom-nav { display: none !important; } /* ============================================================================= * JNL-145: Mood Entry Page Full Viewport Coverage * ============================================================================= * On iOS with viewport-fit=cover, the html/body elements with h-full (100%) * may not extend into the safe areas. The WKWebView's default background * can show through in those areas, creating a translucent bar effect. * * These rules ensure html and body fill the entire viewport (including safe * areas) on mood entry pages, so the mood background color extends edge-to-edge. * Uses min-height: 100dvh (dynamic viewport height) which includes safe areas. */ html:has(body.mood-entry-page), body.mood-entry-page { min-height: 100dvh; min-height: -webkit-fill-available; /* Safari fallback */ } /* ============================================================================= * RTL Support - Directional Icon Flip (JNL-92) * ============================================================================= * Flips icons horizontally in RTL languages (e.g., Arabic) so directional * icons like back arrows point in the correct direction. * * Apply the .dir-flip class to SVG icons that should mirror in RTL: * - Back arrows (pointing left in LTR, right in RTL) * - Forward arrows / chevrons indicating navigation direction * * Do NOT apply to non-directional icons like checkmarks, close icons, etc. */ [dir="rtl"] .dir-flip { transform: scaleX(-1); }