@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

body { background: #e5f2f1 url('assets/underwater-background.png') center / cover fixed; font-family: 'Noto Sans TC', sans-serif; }
html[lang="en"] body { background: #e5f2f1 url('assets/underwater-background.png') center / cover fixed; }
html[lang="en"] .company-introduction { max-width: 700px; margin: 0; padding: 36px 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.8; letter-spacing: .01em; }
html[lang="zh-Hant"] h1, html[lang="zh-Hant"] h2, html[lang="zh-Hant"] h3, html[lang="zh-Hant"] .products-title, html[lang="zh-Hant"] .product-name { font-family: 'Noto Serif TC', serif; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] .products-title, html[lang="en"] .product-name { font-family: 'Playfair Display', serif; }
@media(max-width:700px) { html[lang="en"] .company-introduction { padding: 26px 0; font-size: 17px; } }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(239, 251, 250, .78); }
.site-header, .page-footer { background: rgba(242, 248, 247, .82); backdrop-filter: blur(8px); }
.products-main, .placeholder-main, .contact-page { background: rgba(242, 248, 247, .72); }

/* Give the Chinese product landing and placeholder pages the same clean-water
   visual atmosphere as the rest of the site without compromising legibility. */
html[lang="zh-Hant"] .products-main,
html[lang="zh-Hant"] .placeholder-main {
  background:
    linear-gradient(rgba(239, 251, 250, .78), rgba(239, 251, 250, .78)),
    url('assets/underwater-background.png') center / cover fixed;
}
.contact { background: rgba(198, 223, 216, .90); }

/* Create a continuous hover area between trigger and dropdown links. */
.product-nav { padding-bottom: 12px; margin-bottom: -12px; }
.product-menu { top: calc(100% - 12px); }
.product-nav.menu-open .product-menu { display: block; }

/* Shared header logo. */
.site-header .brand { display: block; width: 205px; height: 64px; background: url('assets/alpha-watertec-logo.png') left center / contain no-repeat; }
.site-header .brand span { display: none; }
@media(max-width:700px) { .site-header .brand { width: 150px; height: 48px; } }