/* AZZ Company Website — Tech Aurora Theme (Dark) Implements docs/website_style.md design tokens and component recipes. */ :root{ /* Layout */ --max-width:1120px; /* 更舒适阅读宽度 */ --spacing-section:6.5rem; /* 更充裕的节间距 */ /* Radii */ --radius-8:8px; --radius-12:16px; /* 更柔和的大圆角 */ /* Elevation（更细腻的阴影） */ --elev-1:0 1px 2px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12); --elev-2:0 4px 12px rgba(0,0,0,.16), 0 8px 32px rgba(0,0,0,.20); --elev-hover:0 8px 24px rgba(0,0,0,.20), 0 16px 48px rgba(0,0,0,.16); /* Design tokens (dark by default) */ --bg-base:#0A0B0F; --bg-surface:#12141B; --border:#FFFFFF18; /* 更克制的1px描边 */ --text-primary:#F5F7FA; --text-secondary:#A8B0C0; --brand:#3D5AFE; /* Indigo */ --accent:#8B5CF6; /* Purple */ --cyan:#06B6D4; /* 更温和的青 */ --success:#12B886; --warning:#F5A524; --danger:#E5484D; --info:#2BB0ED; } /* Typography scale */ :root{ --font-size-xs:0.8125rem; /* 13px */ --font-size-sm:0.9375rem; /* 15px */ --font-size-md:1.0625rem; /* 17px */ --font-size-lg:1.1875rem; /* 19px */ --font-size-xl:1.375rem; /* 22px */ --font-size-2xl:1.875rem; /* 30px */ --font-size-3xl:2.5rem; /* 40px */ --font-size-4xl:3.5rem; /* 56px */ } /* Base */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--text-primary); background:var(--bg-base); font-family:"Noto Sans SC", Inter, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Apple Color Emoji","Segoe UI Emoji"; font-size:17px; line-height:1.8; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:0.01em; font-variant-numeric: tabular-nums; } img{max-width:100%; height:auto; display:block} a{color:var(--text-primary); text-decoration:none} .container{max-width:var(--max-width); margin:0 auto; padding:0 32px} /* Accessibility */ *:focus-visible{ outline:2px solid var(--brand); box-shadow:0 0 0 3px rgba(61,90,254,.20) inset; outline-offset:2px; border-radius:var(--radius-8) } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important} } /* Header */ header{position:sticky; top:0; z-index:50; background:transparent; border-bottom:1px solid transparent; transition: background .24s ease, backdrop-filter .24s ease, border-color .24s ease} .nav-container{display:flex; align-items:center; justify-content:space-between; height:64px; transition:height .2s cubic-bezier(.2,.8,.2,1)} .logo{display:flex; align-items:center; gap:12px} .logo img{height:32px; width:auto} nav.nav-menu ul{list-style:none; display:flex; gap:16px; margin:0; padding:0} nav.nav-menu a{position:relative; display:inline-flex; align-items:center; min-height:40px; padding:10px 16px; border-radius:var(--radius-8); font-size:var(--font-size-sm); color:var(--text-secondary); transition: color .2s ease} nav.nav-menu a:hover, nav.nav-menu a:focus-visible{color:var(--text-primary)} nav.nav-menu a::after{content:""; position:absolute; bottom:6px; left:16px; right:16px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:center; transition:transform .24s cubic-bezier(.4,0,.2,1)} nav.nav-menu a:hover::after, nav.nav-menu a[aria-current="page"]::after{transform:scaleX(1)} header.is-scrolled{background:rgba(10,11,15,.6); backdrop-filter: blur(12px); border-bottom:1px solid #FFFFFF14} header.is-scrolled .nav-container{height:56px} .menu-toggle{display:none; border:1px solid var(--border); background:rgba(20,22,29,.45); backdrop-filter: blur(8px); color:var(--text-primary); border-radius:999px; padding:8px 12px; cursor:pointer} @media (max-width:640px){ nav.nav-menu{display:none; position:absolute; left:0; right:0; top:64px; background:rgba(20,22,29,.75); backdrop-filter: blur(8px); border-bottom:1px solid var(--border)} header.is-scrolled nav.nav-menu{top:56px} nav.nav-menu.show{display:block} nav.nav-menu ul{flex-direction:column; padding:12px} .menu-toggle{display:inline-flex; align-items:center; gap:8px} } /* Hero */ .hero{position:relative; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(47,91,234,.08), transparent), var(--bg-base); } .hero{ overflow:hidden } .hero .hero-content{padding: clamp(3rem, 8vw, 6rem) 0; text-align:center} .hero h1{font-size:clamp(32px, 4.0vw, 48px); line-height:1.2; margin:0 0 16px; text-wrap:balance} .hero p{color:var(--text-secondary); margin:0 auto 24px; max-width:760px} .cta-buttons{display:flex; flex-wrap:wrap; gap:16px; justify-content:center} .cta-primary, .cta-secondary{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 22px; border-radius:var(--radius-12); font-weight:600; letter-spacing:.2px; transition: all 200ms cubic-bezier(.4,0,.2,1)} /* Elegant solid CTA */ .cta-primary{ background: var(--brand); border:1px solid rgba(255,255,255,.12); color:#FFFFFF; box-shadow: 0 0 0 1px rgba(61,90,254,.4) inset, 0 4px 16px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.32); } .cta-primary:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(78,107,255,.5) inset, 0 8px 24px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.24); } .cta-primary{ position:relative; overflow:hidden } .cta-primary::after{ content:""; position:absolute; top:-20%; bottom:-20%; left:-30%; width:40%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); transform: translateX(-120%) skewX(-12deg); animation: shimmer 3.2s ease-in-out infinite; pointer-events:none; } /* Glass secondary CTA */ .cta-secondary{background: rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text-primary); backdrop-filter: blur(8px)} .cta-secondary:hover{background: rgba(255,255,255,.10); transform: translateY(-2px)} /* Sections */ section{padding: var(--spacing-section) 0} section h2{font-size:clamp(24px, 3.0vw, 36px); line-height:1.2; margin:0 0 20px; text-wrap:balance} .hero h1{ text-wrap: balance; } section .section-lead{color:var(--text-secondary); margin-top:-4px; margin-bottom:28px} /* Grids */ .grid{display:grid; gap:28px} /* semantic grids */ .product-grid{container-type:inline-size} .tech-grid{container-type:inline-size} /* mobile 1, tablet 2, desktop 3+ */ @media (min-width:641px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}} @media (min-width:1025px){.grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)}} /* Cards */ .card{ background: var(--bg-surface); background: radial-gradient(220px 120px at 100% 0%, rgba(61,90,254,.06), transparent 60%), var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-12); padding:28px; box-shadow: var(--elev-1); transition: box-shadow .2s, transform .2s, border-color .2s; } .card:hover{ box-shadow: var(--elev-hover); transform: translateY(-4px); border-color:#FFFFFF28 } .product-card h3,.tech-card h3,.case-card h3{margin:0 0 8px; font-size:1.125rem} .product-card p,.tech-card p,.case-card p{margin:0; color:var(--text-secondary)} /* Value list */ .value-list{list-style:none; padding:0; margin:0; display:grid; gap:10px} .value-list li{position:relative; padding-left:28px} .value-list li::before{content:""; position:absolute; left:0; top:.45em; width:18px; height:18px; border-radius:50%; background:var(--brand); mask: url('data:image/svg+xml;utf8,') center/16px 16px no-repeat;} .value-list b{font-weight:600} /* Form */ form{display:grid; gap:14px} .form-row{display:grid; gap:14px} @media (min-width:641px){.form-row{grid-template-columns:1fr 1fr}} label{font-weight:600} input, select, textarea{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-8); background:var(--bg-surface); color:var(--text-primary); font-size:var(--font-size-md)} input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(61,90,254,.12), 0 1px 2px rgba(0,0,0,.08); } textarea{min-height:120px; resize:vertical} .form-error{color:var(--danger); font-size:var(--font-size-sm)} .btn-submit{align-self:start} /* Footer */ footer{background:var(--bg-base); border-top:1px solid var(--border); color:var(--text-primary)} footer a{color:var(--text-secondary); transition:color .2s} footer a:hover{color:var(--text-primary)} .footer-inner{padding:48px 0; display:grid; gap:24px} .footer-meta{color:var(--text-secondary); font-size:var(--font-size-sm)} /* Utility */ .muted{color:var(--text-secondary)} .badge{display:inline-block; padding:6px 14px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text-primary); font-size:var(--font-size-xs); letter-spacing:.02em} /* Tech/Cases specific little bits */ .metrics{display:flex; flex-wrap:wrap; gap:10px} .metric{background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 12px; font-weight:600} /* Hide-only-for-visual users but keep for screen readers */ .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0} /* High contrast mode support */ @media (prefers-contrast: more){ nav.nav-menu a:hover, nav.nav-menu a:focus-visible{background:transparent} .cta-primary{outline:2px solid rgba(255,255,255,.18)} } /* Decorative grid + noise surface */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background: linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/24px 24px; opacity:.7; } body::after{ content:""; position:fixed; inset:-20%; pointer-events:none; z-index:-1; background: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.015) 50%, transparent 51%) repeat, radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.012) 50%, transparent 51%) repeat; background-size: 180px 180px, 220px 220px; mix-blend-mode: normal; opacity:.6; filter: blur(.2px); } /* Hero aurora + diagonal divider */ @keyframes aurora-drift { 0% { transform: translate3d(-3%, -2%, 0) scale(1); filter: blur(28px); } 50% { transform: translate3d( 3%, 1%, 0) scale(1.04); filter: blur(30px); } 100% { transform: translate3d(-2%, 3%, 0) scale(1); filter: blur(28px); } } .hero::before{ content:""; position:absolute; inset:-20% -10% 20% -10%; pointer-events:none; background: radial-gradient(600px 320px at 58% -10%, rgba(61,90,254,.18), rgba(139,92,246,.10) 55%, transparent 70%), radial-gradient(480px 240px at 22% -18%, rgba(12,178,241,.12), transparent 70%), radial-gradient(380px 180px at 82% 10%, rgba(139,92,246,.10), transparent 70%); animation: aurora-drift 16s ease-in-out infinite alternate; will-change: transform, filter; } .hero::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:120px; pointer-events:none; background: linear-gradient(180deg, rgba(10,11,15,0) 0%, rgba(10,11,15,.85) 70%, var(--bg-base) 100%); clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 100%); } /* CTA shimmer */ @keyframes shimmer { 0% { transform: translateX(-120%); opacity:0; } 20% { opacity:.35; } 60% { opacity:.0; } 100% { transform: translateX(120%); opacity:0; } } /* Scroll reveal (progressive enhancement) default: visible; when JS adds html.js, we hide until reveal */ @keyframes reveal-pop { 0%{ opacity:0; transform: translateY(10px) scale(.98) } 100%{ opacity:1; transform:none } } .reveal-once{ opacity:1; transform:none } html.js .reveal-once{ opacity:0; transform: translateY(10px) scale(.98) } .reveal-once.is-visible{ animation: reveal-pop .44s cubic-bezier(.2,.8,.2,1) forwards } @media (prefers-reduced-motion: reduce){ .hero::before, .cta-primary::after{ animation: none !important } .reveal-once, html.js .reveal-once{ opacity:1 !important; transform:none !important } }