/* SINOVIA GLOBAL LIMITED — site styles (small custom layer on top of Tailwind) */ :root { --brand-900: #071a33; --brand-800: #0a2540; --brand-700: #123a63; --accent-500: #0a84ff; --accent-400: #38a3ff; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; } /* Hero background */ .hero-bg { background: radial-gradient(900px 420px at 12% 8%, rgba(10, 132, 255, .28), transparent 60%), radial-gradient(700px 380px at 88% 90%, rgba(56, 163, 255, .20), transparent 62%), linear-gradient(160deg, #071a33 0%, #0a2540 55%, #123a63 100%); } .grid-lines { background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; } /* Product / category media placeholder — swap the
for an when you have photos */ .media { background: linear-gradient(145deg, #0a2540 0%, #123a63 60%, #1c5185 100%); position: relative; overflow: hidden; /* Fixed 3:2 box so photos are not lost to an aggressive centre crop. Set here (not only via the Tailwind class) so it holds regardless of CDN behaviour. */ aspect-ratio: 3 / 2; } .media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(320px 180px at 70% 15%, rgba(56, 163, 255, .35), transparent 70%); } .media > svg { position: relative; z-index: 1; } /* When a real photo is present it covers the vector fallback. If the file is missing the removes itself and the SVG shows through — no broken-image icon. */ .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; } /* Wide hero photo layer — sits under the gradient so text stays readable. Absent file = plain gradient hero, still fine. */ .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; } .hero-photo-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7, 26, 51, .94) 0%, rgba(7, 26, 51, .78) 45%, rgba(10, 37, 64, .55) 100%); } /* Card hover */ .card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(10, 37, 64, .45); } /* Contact form */ .field { width: 100%; border: 1px solid #d8dee9; border-radius: .6rem; padding: .7rem .85rem; font-size: .95rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .field:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(10, 132, 255, .15); } /* Reveal on scroll. Scoped under .js (added by an inline script in ) so that if JavaScript is disabled or main.js fails to load, the content renders plainly instead of being stuck at opacity:0. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }