/* * 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. */ /* Disable tap highlight on interactive elements in bottom sheet menu */ #main-menu-sheet a, #main-menu-sheet button, [data-menu-target="hamburger"] { -webkit-tap-highlight-color: transparent; outline: none; } /* Smooth scroll for anchor links (e.g. sticky CTA → #unlock-cta) */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Reveal animation for results card sections - must be in CSS for Turbo Drive compatibility */ [data-reveal-target="section"] { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } [data-reveal-target="section"].revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal-target="section"] { opacity: 1; transform: none; transition: none; } [data-menu-target="sheet"], [data-menu-target="backdrop"] { transition: none !important; } } /* Gradient reveal for locked content (A/B variant replaces hard blur) */ .locked-gradient-reveal { -webkit-mask-image: linear-gradient(to bottom, black 25%, transparent 90%); mask-image: linear-gradient(to bottom, black 25%, transparent 90%); user-select: none; -webkit-user-select: none; pointer-events: none; } /* Locked redact — soft fade-to-transparent mask (cleaner than text-blur; no grain on iOS) */ .locked-redact { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 90%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 90%); opacity: 0.7; color: rgba(255,255,255,0.45); user-select: none; -webkit-user-select: none; pointer-events: none; } /* Inline variant for single-line redacted chips / names (keeps shape but hides letters) */ .locked-redact-inline { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.55) 0%, transparent 95%); mask-image: linear-gradient(to right, rgba(0,0,0,0.55) 0%, transparent 95%); opacity: 0.7; color: rgba(255,255,255,0.5); user-select: none; -webkit-user-select: none; pointer-events: none; } /* Global replacement for legacy inline `filter: blur(4px)` teasers on locked results. The extra [style*="user-select: none"] guard keeps this from matching modal overlays that use `backdrop-filter: blur(4px)` — those do not set user-select, while every teaser does. Result: consistent mask fadeout on locked content without regressing any dialog / bottom-sheet backdrop. */ [style*="filter: blur(4px)"][style*="user-select: none"] { filter: none !important; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 85%) !important; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 85%) !important; opacity: 0.75 !important; } /* Single-line inline blurs on short chips — fade left-to-right instead */ span[style*="filter: blur(4px)"][style*="user-select: none"], div[style*="filter: blur(4px)"][style*="user-select: none"]:not(p) { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.6) 0%, transparent 92%) !important; mask-image: linear-gradient(to right, rgba(0,0,0,0.6) 0%, transparent 92%) !important; } /* Blog article prose styles */ .prose-firstvibe h2 { font-size: 1.25rem; font-weight: 800; margin-top: 2.25rem; margin-bottom: 0.75rem; color: rgba(255,255,255,0.9); letter-spacing: -0.01em; } .prose-firstvibe h3 { font-size: 1.05rem; font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.5rem; color: rgba(255,255,255,0.8); } .prose-firstvibe p { font-size: 0.9375rem; line-height: 1.75; color: rgba(255,255,255,0.70); margin-bottom: 1.125rem; } .prose-firstvibe ul { list-style-type: disc; padding-left: 1.25rem; margin-bottom: 1rem; } .prose-firstvibe li { font-size: 0.9375rem; line-height: 1.65; color: rgba(255,255,255,0.70); margin-bottom: 0.5rem; } .prose-firstvibe strong { color: rgba(255,255,255,0.90); font-weight: 600; } /* Roast section — staggered reveal animation */ [data-roast-reveal-target="section"] { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } [data-roast-reveal-target="section"].roast-revealed { opacity: 1; transform: translateY(0); } /* Roast headline — gradient text for dramatic impact */ .roast-headline-text { background: linear-gradient(135deg, #ef4444 0%, #f97316 40%, #fbbf24 70%, #f97316 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: roast-headline-shimmer 3s ease-in-out infinite; } @keyframes roast-headline-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Roast card — animated fire glow on border */ .roast-card-glow { animation: roast-fire-glow 4s ease-in-out infinite; } @keyframes roast-fire-glow { 0%, 100% { box-shadow: 0 0 60px rgba(239,68,68,0.06), 0 24px 48px rgba(0,0,0,0.4), 0 0 20px rgba(239,68,68,0.03); } 50% { box-shadow: 0 0 80px rgba(239,68,68,0.12), 0 24px 48px rgba(0,0,0,0.4), 0 0 40px rgba(249,115,22,0.06); } } @media (prefers-reduced-motion: reduce) { [data-roast-reveal-target="section"] { opacity: 1; transform: none; transition: none; } .roast-headline-text { animation: none; background-position: 0% 50%; } .roast-card-glow { animation: none; } } /* Aura badge pulse animation in score ring */ .aura-badge-pulse { animation: aura-pulse 3s ease-in-out infinite; } @keyframes aura-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Aura orb glow animation in full aura section */ .aura-orb-glow { animation: aura-orb 4s ease-in-out infinite; } @keyframes aura-orb { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.2); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .aura-badge-pulse, .aura-orb-glow { animation: none; } } /* Hide scrollbar for horizontal scroll strips */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; }