/* ========================================================================== LUBETECH INTERNATIONAL — GLOBAL DESIGN SYSTEM "Industrial Luxury" Extends Tailwind CDN utilities. Fonts are loaded via in template.html ; this file consumes them as CSS variables. ========================================================================== */ :root { --lt-bg: #020617; /* Slate 950 — primary background */ --lt-surface: #0f172a; /* Slate 900 — elevated surfaces */ --lt-border: #334155; /* Slate 700 — structural borders */ --lt-accent: #3b82f6; /* Light Blue — hover / active UI */ --lt-accent-soft: rgba(59, 130, 246, 0.25); --lt-red: #ef4444; /* Primary CTA */ --lt-red-hover: #dc2626; /* Primary CTA hover */ --lt-text: #f8fafc; /* Slate 50 — primary reading */ --lt-text-secondary: #94a3b8; /* Slate 400 — secondary / data */ } /* -------------------------------------------------------------------- Base -------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background-color: var(--lt-bg); color: var(--lt-text); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .font-display { font-family: 'Syne', sans-serif; } /* -------------------------------------------------------------------- Custom scrollbar — thin, dark track, metallic blue thumb -------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--lt-bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); border-radius: 999px; border: 2px solid var(--lt-bg); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 100%); } * { scrollbar-width: thin; scrollbar-color: #3b82f6 var(--lt-bg); } /* -------------------------------------------------------------------- .glass-nav — sticky header treatment -------------------------------------------------------------------- */ .glass-nav { background-color: rgba(2, 6, 23, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--lt-border); } /* -------------------------------------------------------------------- .bento-box — modular content unit used across every interior page -------------------------------------------------------------------- */ .bento-box { background-color: var(--lt-surface); border: 1px solid var(--lt-border); padding: 2rem; border-radius: 2px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .bento-box:hover { transform: translateY(-4px); border-color: var(--lt-accent); box-shadow: 0 24px 48px -24px var(--lt-accent-soft); } /* -------------------------------------------------------------------- Navigation link — underline hover state -------------------------------------------------------------------- */ .nav-link { position: relative; color: var(--lt-text-secondary); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .nav-link:hover, .nav-link.is-active { color: var(--lt-text); border-bottom-color: var(--lt-accent); } /* -------------------------------------------------------------------- Primary CTA button -------------------------------------------------------------------- */ .btn-cta { background-color: var(--lt-red); color: #ffffff; transition: background-color 0.2s ease, transform 0.2s ease; } .btn-cta:hover { background-color: var(--lt-red-hover); transform: translateY(-1px); } /* -------------------------------------------------------------------- .spec-chip — minimalist pill tag for grades, standards, sizes -------------------------------------------------------------------- */ .spec-chip { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; font-size: 0.75rem; line-height: 1; font-weight: 500; background-color: #1e293b; /* Slate 800 */ color: #cbd5e1; /* Slate 300 */ border: 1px solid #475569; /* Slate 600 */ font-variant-numeric: tabular-nums; transition: border-color 0.2s ease, color 0.2s ease; } .spec-chip:hover { border-color: var(--lt-accent); color: var(--lt-text); } /* -------------------------------------------------------------------- Footer links -------------------------------------------------------------------- */ .footer-link { color: var(--lt-text-secondary); transition: color 0.2s ease; } .footer-link:hover { color: var(--lt-accent); } /* -------------------------------------------------------------------- Mobile nav drawer -------------------------------------------------------------------- */ #mobile-menu { transition: max-height 0.3s ease, opacity 0.3s ease; } /* -------------------------------------------------------------------- Accessibility floor -------------------------------------------------------------------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bento-box, .btn-cta, .nav-link, #mobile-menu { transition: none; } } /* -------------------------------------------------------------------- .form-field — RFQ / lead-capture form controls -------------------------------------------------------------------- */ .form-field { width: 100%; background-color: transparent; border: none; border-bottom: 1px solid var(--lt-border); color: var(--lt-text); padding: 0.75rem 0.125rem; font-family: 'Inter', sans-serif; font-size: 0.95rem; transition: border-color 0.2s ease; } .form-field::placeholder { color: #64748b; /* Slate 500 */ } .form-field:focus { outline: none; border-bottom-color: var(--lt-accent); } .form-field option { background-color: var(--lt-surface); color: var(--lt-text); } textarea.form-field { resize: vertical; min-height: 7rem; }