/* ============================================================ UQESH Surface — foundation stylesheet (FLUID / rem-based) Design tokens + base + shared header/footer. Strategy: the 1440px design is the baseline (root = 16px @ 1440); the root font-size scales with the viewport (clamp + vw), and all sizes are in rem, so the whole layout scales proportionally to fill large screens (1920 / 2560 / 4K) without distorting the design. Skin switches on [data-site="materials|engineering"] (set on ). ============================================================ */ /* ---------- Fluid root: 16px @1440, scales up, capped for 4K ---------- */ html{ font-size: clamp(16px, calc(100vw / 90), 28px); } /* ---------- Tokens (shared) ---------- */ :root{ --brand:#4F6B3A; --on-brand:#FFFFFF; --radius-card:0.875rem; --radius-pill:999px; --font-display:"Archivo", system-ui, sans-serif; --font-body:"Inter", system-ui, sans-serif; --wrap-max:90rem; /* 1440 baseline; scales with root */ --wrap-pad:3rem; /* 48 @1440 */ } /* Materials — light */ [data-site="materials"]{ --bg:#FBFAF6; --surface:#FFFFFF; --surface-alt:#F1EFE8; --text-primary:#232925; --text-secondary:#5C6660; --line:#E4E0D4; --brand-accent:#4F6B3A; --header-bg:#FFFFFF; --footer-bg:#FFFFFF; --footer-line:rgba(0,0,0,.08); --menu-color:var(--text-primary); --header-menu-bg:#FFFFFF; } /* Engineering — dark */ [data-site="engineering"]{ --bg:#1B2432; --surface:#232E3E; --surface-alt:#2A374A; --text-primary:#F2F5FA; --text-secondary:#9FB0C2; --line:#33455A; --brand:#005FA8; --brand-accent:#EE7629; --header-bg:transparent; --footer-bg:#151E2A; --footer-line:rgba(255,255,255,.08); --menu-color:#E8ECF2; --header-menu-bg:#1B2432; } /* ---------- Base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--text-primary); font-family:var(--font-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:800; line-height:1.15; color:var(--text-primary); margin:0 0 .5em; } a{ color:inherit; text-decoration:none; } img,svg{ max-width:100%; height:auto; display:block; } ul{ margin:0; padding:0; } .wrap{ width:100%; max-width:var(--wrap-max); margin-inline:auto; padding-inline:var(--wrap-pad); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:0.8125rem; letter-spacing:.03em; padding:0.75rem 1.375rem; border-radius:0.375rem; cursor:pointer; border:0; white-space:nowrap; transition:filter .15s ease, background .15s ease, color .15s ease; } .btn-brand{ background:var(--brand); color:var(--on-brand); } .btn-brand:hover{ filter:brightness(1.07); } /* ---------- Header ---------- */ .site-header{ background:var(--header-bg); border-bottom:1px solid var(--line); } .site-header .nav{ display:flex; align-items:center; justify-content:space-between; padding-block:1.375rem; gap:1.5rem; } .brand{ display:inline-flex; flex-direction:column; gap:0.0625rem; line-height:1; } .brand .wordmark{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:.03em; color:var(--text-primary); } .brand .wordmark-sub{ font-family:var(--font-display); font-weight:600; font-size:0.594rem; letter-spacing:.2em; color:var(--text-secondary); } .brand-logo{ height:1.875rem; width:auto; } .menu{ display:flex; align-items:center; gap:1.75rem; } .menu-list{ display:flex; align-items:center; gap:1.75rem; list-style:none; } .menu-list a{ font-family:var(--font-display); font-weight:600; font-size:0.781rem; letter-spacing:.05em; color:var(--menu-color); transition:color .15s ease; } .menu-list a:hover{ color:var(--brand-accent); } /* ---------- Mobile nav toggle (hamburger) — hidden on desktop ---------- */ .nav-toggle{ display:none; flex:none; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; margin:-0.5rem -0.5rem -0.5rem 0; padding:0; background:transparent; border:0; cursor:pointer; color:var(--menu-color); -webkit-tap-highlight-color:transparent; } .nav-toggle-box{ display:block; position:relative; width:1.375rem; height:1rem; } .nav-toggle-bar{ position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease; } .nav-toggle-bar:nth-child(1){ top:0; } .nav-toggle-bar:nth-child(2){ top:calc(50% - 1px); } .nav-toggle-bar:nth-child(3){ top:calc(100% - 2px); } .site-header.nav-open .nav-toggle-bar:nth-child(1){ top:calc(50% - 1px); transform:rotate(45deg); } .site-header.nav-open .nav-toggle-bar:nth-child(2){ opacity:0; } .site-header.nav-open .nav-toggle-bar:nth-child(3){ top:calc(50% - 1px); transform:rotate(-45deg); } /* ---------- Footer ---------- */ .site-footer{ background:var(--footer-bg); } [data-site="materials"] .site-footer{ border-top:1px solid var(--line); } .footer-top{ display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; padding-top:3.5rem; padding-bottom:1.875rem; } .footer-brand{ max-width:18.75rem; display:flex; flex-direction:column; align-items:flex-start; gap:0.75rem; } .footer-brand .brand-logo{ height:1.625rem; } .footer-tagline{ color:var(--text-secondary); font-size:0.8125rem; margin:0; line-height:1.5; } .footer-socials{ display:flex; gap:0.5625rem; margin-top:0.25rem; } .footer-socials .soc{ width:2rem; height:2rem; border-radius:0.375rem; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:color .15s ease, border-color .15s ease; } .footer-socials .soc:hover{ color:var(--brand-accent); border-color:var(--brand-accent); } .footer-socials .soc svg{ width:1rem; height:1rem; } .footer-cols{ display:flex; gap:3.375rem; flex-wrap:wrap; } .footer-col h4{ font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.08em; margin:0 0 0.75rem; color:var(--text-primary); } .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.6875rem; } .footer-col li{ color:var(--text-secondary); font-size:0.781rem; } .footer-col h4 a{ color:inherit; transition:color .15s ease; } .footer-col h4 a:hover, .footer-col li a:hover{ color:var(--brand-accent); } .footer-bar{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:1.125rem; padding-bottom:1.625rem; border-top:1px solid var(--footer-line); color:var(--text-secondary); font-size:0.75rem; } /* ---------- Responsive (tablet / mobile) ---------- */ @media (max-width:900px){ html{ font-size:15px; } :root{ --wrap-pad:1.5rem; } .site-header{ position:relative; z-index:40; } .nav-toggle{ display:inline-flex; } /* Nav collapses into a full-width dropdown panel below the header bar */ .menu{ display:none; position:absolute; top:100%; left:0; right:0; z-index:100; flex-direction:column; align-items:stretch; gap:0; background:var(--header-menu-bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0.25rem var(--wrap-pad) 1.375rem; box-shadow:0 14px 28px rgba(0,0,0,.16); } .site-header.nav-open .menu{ display:flex; } .menu-list{ display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; } .menu-list li{ width:100%; border-bottom:1px solid var(--line); } .menu-list li:last-child{ border-bottom:0; } .menu-list a{ display:block; padding:0.9rem 0.125rem; font-size:0.95rem; } .menu .btn-brand{ margin-top:1.125rem; width:100%; padding-block:0.9rem; font-size:0.875rem; } .footer-top{ flex-direction:column; gap:2rem; } } @media (max-width:480px){ html{ font-size:14px; } } /* ---------- Contact Form 7 adaptor（让 CF7 输出复用主题表单布局） ---------- CF7 把表单包在 .wpcf7 > form.wpcf7-form，每个字段又包一层 span.wpcf7-form-control-wrap。 这里把外两层设为 display:contents（不产生盒子），使 .mh-form/.mct-form/.quote-form/.q-form 的原有列布局与 .*-row 行布局直接命中字段的 span 包裹层；span 作为有效布局子项， 其内部 input/select/textarea 沿用主题里已有的 width:100% 自动填满，做到与静态版逐像素一致。 */ .mh-form .wpcf7, .mct-form .wpcf7, .quote-form .wpcf7, .q-form .wpcf7{ display:contents; } .mh-form .wpcf7-form, .mct-form .wpcf7-form, .quote-form .wpcf7-form, .q-form .wpcf7-form{ display:contents; } /* 字段包裹层：保留为真实盒子（不 display:contents），让 .*-row > * 的 flex:1 命中它 */ .mh-form .wpcf7-form-control-wrap, .mct-form .wpcf7-form-control-wrap, .quote-form .wpcf7-form-control-wrap, .q-form .wpcf7-form-control-wrap{ display:block; width:100%; min-width:0; } /* 工程站首页报价表单：公司 : 项目类型 ≈ 1:2（等价于原 .qf-row-2 > select{flex:2}） */ .quote-form .qf-row-2 > .wpcf7-form-control-wrap:has(select){ flex:2 1 0; } /* CF7 的提交按钮是 ，会被上面表单里通用的 “.X-form input{width:100%;background:#fff}” 命中而变成整宽白底。这里用 [type=submit] 提高优先级(0,2,1 > 0,1,1)，恢复主题按钮外观； 宽度/对齐/min-width 仍由各表单自身的提交类(.q-submit/.mh-form-submit/.mct-submit/.qf-submit)决定。 */ .mh-form input[type="submit"], .mct-form input[type="submit"], .quote-form input[type="submit"], .q-form input[type="submit"]{ width:auto; background:var(--brand); color:var(--on-brand); border:0; border-radius:.375rem; padding:.75rem 1.375rem; font-family:var(--font-display); font-weight:700; font-size:.8125rem; letter-spacing:.03em; cursor:pointer; } .mh-form input[type="submit"]:hover, .mct-form input[type="submit"]:hover, .quote-form input[type="submit"]:hover, .q-form input[type="submit"]:hover{ filter:brightness(1.07); } /* 提交时的转圈图标不占布局位 */ .mh-form .wpcf7-spinner, .mct-form .wpcf7-spinner, .quote-form .wpcf7-spinner, .q-form .wpcf7-spinner{ position:absolute; } /* 校验 / 反馈信息 */ .wpcf7-response-output{ margin:.75rem 0 0 !important; border-radius:.375rem; font-size:.8125rem; } .wpcf7-not-valid-tip{ font-size:.75rem; margin-top:.25rem; } /* ============================================================ Motion & interaction polish (VER 0.5.0) - smooth anchor scrolling - eased colour transitions on links / buttons - "frame stays, image zooms" hover on card imagery (.uq-zoom-layer, injected by the uqesh-fx inline script) - section entrance reveal (html.uq-anim set by JS; no-JS stays visible) ============================================================ */ html{ scroll-behavior:smooth; } a{ transition:color .18s ease, border-color .18s ease, background-color .18s ease; } .btn{ transition:filter .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .uq-zoomable{ overflow:hidden; position:relative; z-index:0; } .uq-zoom-layer{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform; } .uq-zoomable:hover .uq-zoom-layer, a:hover .uq-zoomable .uq-zoom-layer{ transform:scale(1.06); } html.uq-anim main > section, html.uq-anim main > article > section{ opacity:0; transform:translateY(14px); transition:opacity .6s ease-out, transform .6s ease-out; } html.uq-anim main > section.uq-in, html.uq-anim main > article > section.uq-in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .uq-zoom-layer{ transition:none; } .btn:hover{ transform:none; } html.uq-anim main > section, html.uq-anim main > article > section{ opacity:1; transform:none; transition:none; } }