/* ============================================================ Steel Trust — custom styles (on top of Tailwind Play CDN) Only things Tailwind utilities can't do cleanly live here. ============================================================ */ :root { --accent: #f7a20a; --steel-900: #121926; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; } /* Barlow Condensed display headings: tighter, industrial */ .font-display { letter-spacing: 0.01em; line-height: 0.98; } /* ---- Reveal-on-scroll (tiny AOS replacement, no dependency) ---- Only hide when JS is active (.js on ); without JS everything stays visible — so no-JS phones and search crawlers always see the content. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } } /* ---- Brushed-steel / hero overlays ---- */ .steel-texture { background-image: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 40%), repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px); } .hero-grid { background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; } .accent-underline { position: relative; } .accent-underline::after { content: ""; position: absolute; left: 0; bottom: -.35rem; width: 3.5rem; height: 4px; background: var(--accent); border-radius: 2px; } .accent-underline.center::after { left: 50%; transform: translateX(-50%); } /* ---- Product / gallery image zoom ---- */ .zoom-img { overflow: hidden; } .zoom-img img { transition: transform .6s cubic-bezier(.2,.7,.2,1); } .zoom-img:hover img { transform: scale(1.08); } /* ---- Sticky nav shadow on scroll ---- */ .nav-scrolled { box-shadow: 0 6px 24px -12px rgba(0,0,0,.5); backdrop-filter: saturate(140%) blur(8px); } /* ---- FAQ accordion ---- */ .faq-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .faq-item[open-state="on"] .faq-body { max-height: 320px; } .faq-item[open-state="on"] .faq-icon { transform: rotate(45deg); } .faq-icon { transition: transform .3s ease; } /* ---- Floating WhatsApp button pulse ---- */ .wa-float { box-shadow: 0 8px 24px -6px rgba(37,211,102,.6); } .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #25D366; opacity: .55; z-index: -1; animation: wa-pulse 2.2s infinite; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: .5 } 70% { transform: scale(1.5); opacity: 0 } 100% { opacity: 0 } } /* ---- Lightbox ---- */ .lightbox { transition: opacity .25s ease; } .lightbox img { max-height: 86vh; max-width: 92vw; } /* Enquire chips (full catalogue range) */ .enquire-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 9999px; font-size: .82rem; font-weight: 500; cursor: pointer; color: #ccd6e5; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: all .2s ease; } .enquire-chip::before { content: "💬"; font-size: .8rem; } .enquire-chip:hover { background: var(--accent); color: #0d1219; border-color: var(--accent); } /* Marquee for the trust strip */ .marquee { display: flex; gap: 3rem; width: max-content; animation: marquee 26s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee-mask:hover .marquee { animation-play-state: paused; }