/* * 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; } /* 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; } } /* Hide scrollbar for horizontal scroll strips */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; }