/* ========================================================= Big Tire Logistics — supplemental styles (Tailwind Play CDN handles utility classes; this file only holds things Tailwind's runtime can't: keyframes, gradient mesh backgrounds, scroll-reveal base state, scrollbar.) ========================================================= */ html { scroll-padding-top: 6.5rem; } body { overflow-x: hidden; } /* ---- Scroll reveal base state (JS adds .is-visible) ---- Progressive enhancement: content is fully visible by default so it never disappears if JavaScript fails or is blocked. The hidden "waiting to animate" state only applies once html.js confirms JS is running (set by an inline script at the top of ). ---- */ html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } .reveal-delay-4 { transition-delay: .32s; } .reveal-delay-5 { transition-delay: .4s; } .reveal-delay-6 { transition-delay: .48s; } /* ---- Sticky header shrink state ---- */ #nav-inner.is-scrolled { padding-top: 0.5rem; padding-bottom: 0.5rem; box-shadow: 0 8px 30px rgba(0,0,0,0.45); } /* ---- Gradient mesh background blobs ---- */ .mesh-blob { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: 0.55; pointer-events: none; } /* ---- Grid / noise texture overlay for hero ---- */ .grid-overlay { background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 50% 0%, #000 40%, transparent 100%); } /* ---- Marquee for trust bar ---- */ .marquee-track { animation: marquee 28s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---- Gradient text ---- */ .text-gradient { background: linear-gradient(90deg, #ffd98a 0%, #f59e0b 45%, #ffbe4d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Custom scrollbar (webkit) ---- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0a0a0f; } ::-webkit-scrollbar-thumb { background: #23232f; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #36486e; } /* ---- FAQ accordion ---- */ .faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-item.is-open .faq-panel { max-height: 500px; } .faq-item.is-open .faq-chevron { transform: rotate(45deg); } .faq-chevron { transition: transform 0.25s ease; } /* ---- Utility: card hover lift ---- */ .hover-lift { transition: transform 0.35s cubic-bezier(.16,1,.3,1), border-color 0.35s ease, box-shadow 0.35s ease; } .hover-lift:hover { transform: translateY(-6px); border-color: rgba(245,158,11,0.4); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5); } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-visible, .hover-lift, .marquee-track { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } }