/* OPCTOOLS industrial corporate design. Shared shell, typography and page components. */ *,*::before,*::after{box-sizing:border-box} :root{ --char: #FFFFFF; --char-2: #F3F7FA; --char-3: #E8F0F6; --ember: #1565A8; --glow: #0F4C7E; --kiln: #DCEAF3; --ash: #0B2545; /* CTA —— 橙色强调，只挂询价按钮（.btn-ember）。--ember 是眉标/筛选/分页的蓝，两者不可混用。 Q1 裁决：常态深蓝字 + 橙底，hover 底色加深并反白。 */ --cta: #F28C28; --cta-hover: #C96A12; --cta-ink: #0B2545; /* 深色底：hero / closing 用 --deep，页脚用 --deep-2（比 --deep 再深一档）。 */ --deep: #0B2545; --deep-2: #071B33; --hair: rgba(11,37,69,.13); --hair-2: rgba(11,37,69,.07); /* flat equivalent of --hair-2 over --char, for places that must not stack */ --hair-line: #E3EBF0; --muted: #526579; --ink: #30475B; --sans: "Bahnschrift","DIN Alternate","Aptos","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; --mono: ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace; --pad: clamp(1.25rem,4vw,3.5rem); --ease: cubic-bezier(.22,.61,.36,1); --nav-h: clamp(62px,7vw,76px); } /* Native form controls follow the light corporate palette. */ html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light} body{ margin:0; background:var(--char); color:var(--ash); font-family:var(--sans); font-size:clamp(.95rem,.32vw + .88rem,1.02rem); line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block; max-width:100%} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} h1,h2,h3,h4{margin:0; font-weight:400} p{margin:0} .wrap{max-width:1360px; margin:0 auto; padding-inline:var(--pad)} /* ---------- type: wide, light capitals ---------- */ .caps{ font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ember); font-weight:500; } .lede{max-width:58ch; color:var(--muted); font-size:clamp(1rem,.3vw + .94rem,1.08rem); letter-spacing:-.005em} .h-sec{ font-size:clamp(1.6rem,3.4vw,2.9rem); letter-spacing:.01em; line-height:1.18; } .section{padding-block:clamp(4rem,5.5vw,5.5rem)} .section--tight{padding-top:0} :focus-visible{outline:2px solid var(--glow); outline-offset:3px} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.7rem; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; border:1px solid var(--hair); transition:all .4s var(--ease); } .btn:hover{border-color:rgba(11,37,69,.42); background:rgba(11,37,69,.05)} .btn-ember{ background:linear-gradient(120deg, #F5A03C, #F28C28); border-color:transparent; color:var(--cta-ink); box-shadow:0 14px 34px -16px rgba(242,140,40,.55); } .btn-ember:hover{background:linear-gradient(120deg,#D9781B,#C96A12); color:#FFFFFF; box-shadow:0 20px 42px -16px rgba(201,106,18,.65)} .btn-sm{padding:.62rem 1.15rem; font-size:.78rem} .btn-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.2rem} /* ---------- text link ---------- */ .tlink{ display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(11,37,69,.55); border-bottom:1px solid var(--hair); padding-bottom:.35rem; transition:color .3s var(--ease), border-color .3s var(--ease); } .tlink:hover{color:var(--glow); border-bottom-color:rgba(21,101,168,.55)} /* ============================================================ NAV ============================================================ */ .nav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--hair-2); } .nav-in{display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem); height:var(--nav-h)} .brand{display:flex; align-items:baseline; gap:.65rem; margin-right:auto} .brand b{font-size:1.12rem; font-weight:600; letter-spacing:.02em} .brand i{font-style:normal; font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(11,37,69,.42)} /* The links stretch to the full height of the bar so the active marker can land on the bar's own hairline rather than float under the word. Note the missing align-items on .nav-links: leaving it at the default stretch is what lets each link fill the bar, and the link centres its own text instead. */ .nav-links{align-self:stretch; display:flex; gap:clamp(.9rem,2.2vw,2rem); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase} .nav-links a{display:flex; align-items:center; position:relative; color:var(--muted); padding-block:.5rem; transition:color .3s var(--ease)} .nav-links a:hover{color:var(--ash)} /* Which section you are in. The rule for this already existed but the builder compared it against an item's label instead of its URL, so no page on the site ever carried the attribute and nothing was ever marked. On its own the colour swap is too quiet to be useful — hover lands on exactly the same value — so the active item also draws a 1px ember rule, the same weight as every other divider on the site. */ .nav-links a[aria-current="page"]{color:var(--ash)} .nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ember)} .nav-cta{display:flex; align-items:center; gap:.6rem} .nav-cta .btn{padding:.62rem 1.15rem; font-size:.78rem} .nav-cta .btn[aria-current="page"]{border-color:var(--ember); color:var(--ash)} .nav-burger{display:none; width:40px; height:40px; border:1px solid var(--hair); align-items:center; justify-content:center} .nav-burger i{display:block; width:14px; height:1px; background:var(--ash); position:relative} .nav-burger i::before,.nav-burger i::after{content:""; position:absolute; left:0; width:14px; height:1px; background:var(--ash); transition:transform .3s var(--ease)} .nav-burger i::before{top:-5px} .nav-burger i::after{top:5px} .nav[data-open="true"] .nav-burger i{background:transparent} .nav[data-open="true"] .nav-burger i::before{transform:translateY(5px) rotate(45deg)} .nav[data-open="true"] .nav-burger i::after{transform:translateY(-5px) rotate(-45deg)} .nav-drawer{display:none; border-bottom:1px solid var(--hair); background:var(--char-2)} .nav[data-open="true"] .nav-drawer{display:block} .nav-drawer ul{list-style:none; margin:0; padding:.4rem var(--pad) 1rem} .nav-drawer li+li{border-top:1px solid var(--hair-2)} .nav-drawer a{display:block; padding:.95rem 0; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase} /* Same marker, but a bottom rule would double up with the li's own border-top, so the drawer states it in colour instead — and keeps it a distinct one. */ .nav-drawer a[aria-current="page"]{color:var(--glow)} /* ============================================================ HERO — an object in front of the furnace (home) ============================================================ */ .hero{position:relative; overflow:hidden} /* the furnace door, sitting behind everything */ .hero::before{ content:""; position:absolute; right:-6%; top:6%; width:min(70vw,900px); aspect-ratio:1; background:radial-gradient(circle at 50% 50%, rgba(21,101,168,.24) 0%, rgba(15,76,126,.16) 26%, rgba(15,76,126,.06) 46%, transparent 68%); pointer-events:none; } .hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg, transparent, rgba(15,76,126,.5), transparent); } .hero-in{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:center; padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem); } .hero-copy>*{animation:ember-rise .95s var(--ease) both} @keyframes ember-rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}} .hero-copy>*:nth-child(1){animation-delay:.05s} .hero-copy>*:nth-child(2){animation-delay:.14s} .hero-copy>*:nth-child(3){animation-delay:.22s} .hero-copy>*:nth-child(4){animation-delay:.3s} .hero h1{ font-size:clamp(2.1rem,4.9vw,4.3rem); font-weight:300; line-height:1.12; letter-spacing:.005em; margin-block:1rem 1.5rem; } .hero h1 em{ font-style:normal; background:linear-gradient(100deg, #4FA3D1, #1565A8 62%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-acts{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.2rem} .hero-art{position:relative; aspect-ratio:1/1; display:grid; place-items:center; padding:6%} /* the glow sits between object and room */ .hero-art::before{ content:""; position:absolute; inset:8%; background:radial-gradient(circle at 50% 52%, rgba(21,101,168,.22), rgba(15,76,126,.08) 42%, transparent 68%); filter:blur(14px); } /* Absolutely positioned on purpose. In flow, the image's `height:100%` and the container's `aspect-ratio` depend on each other; once the art sits alone in a single-column grid (<=880px) nothing else sets the row height, and the browser resolves the cycle by falling back to the file's intrinsic 480x680 — which then overflows the column and prints straight over the headline. Taking the image out of flow makes the box purely geometric. */ .hero-art img{ position:absolute; z-index:2; left:6%; top:6%; width:88%; height:88%; object-fit:contain; filter: drop-shadow(0 0 1.4px rgba(21,101,168,.5)) drop-shadow(0 22px 40px rgba(0,0,0,.75)); animation:ember-rise 1.1s var(--ease) both .16s; } .hero-stamp{ position:absolute; z-index:3; left:0; bottom:2%; font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(11,37,69,.4); } /* ============================================================ PAGE HEAD — interior pages ============================================================ */ .page-head{ position:relative; overflow:hidden; border-bottom:1px solid var(--hair); padding-block:clamp(2.4rem,5vw,4.2rem) clamp(2.2rem,4.4vw,3.4rem); } .page-head::before{ content:""; position:absolute; right:-12%; top:-46%; width:min(62vw,760px); aspect-ratio:1; background:radial-gradient(circle, rgba(15,76,126,.15), transparent 66%); pointer-events:none; } .page-head .wrap{position:relative} .page-head h1{ font-size:clamp(1.9rem,4.4vw,3.4rem); font-weight:300; line-height:1.14; letter-spacing:.005em; margin-top:1rem; max-width:26ch; } .page-head .lede{margin-top:1.3rem} .page-head--split .wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.6rem,4vw,3.4rem); align-items:end; } .crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(11,37,69,.38); margin-bottom:1.5rem; } .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--ash)} .crumbs .sep{opacity:.4} /* ============================================================ SECTION HEADER ============================================================ */ .sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.5rem; margin-bottom:clamp(1.8rem,3.4vw,3rem)} .sec-head .t{flex:1 1 22rem} .sec-head .lede{margin-top:1rem} /* ============================================================ SPECIMEN GRID (catalogue) ============================================================ */ .filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.6rem,3vw,2.4rem)} .filters button{ padding:.6rem 1.15rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; border:1px solid var(--hair); color:var(--muted); transition:all .35s var(--ease); } .filters button:hover{color:var(--ash); border-color:rgba(11,37,69,.4)} .filters button[aria-pressed="true"]{background:var(--ember); border-color:var(--ember); color:#FFFFFF} /* The tile mesh separates tiles with a 1px hairline. It used to be drawn as a wash behind the grid with a 1px gap letting it through, which only reads correctly while every cell is occupied: a ragged last row — four tiles in a three-column grid — exposed the wash as one large pale rectangle beside the final tile. The separators are therefore drawn on the cells themselves — any direct child of the grid, whether a product .card or a .topic — as a 1px ring, and the grid keeps the room tone behind it, so an unoccupied cell simply disappears. The ring is opaque on purpose. Two semi-transparent rings meet in the same 1px gap, and alpha would composite them into a line twice as bright as the others; --hair-line is the flat colour that --hair-2 resolves to over --char, so a ring over a ring lands on exactly the same pixel value. */ .grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--char)} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid > *{box-shadow:0 0 0 1px var(--hair-line)} .card{ position:relative; background:var(--char); display:flex; flex-direction:column; transition:background .45s var(--ease); } .card:hover{background:var(--char-2)} .card-art{position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden} /* each tile carries its own small furnace */ .card-art::before{ content:""; position:absolute; inset:16%; background:radial-gradient(circle at 50% 56%, rgba(21,101,168,.2), rgba(15,76,126,.06) 44%, transparent 68%); opacity:.55; transition:opacity .5s var(--ease); } .card:hover .card-art::before{opacity:1} .card-art img{ position:relative; z-index:2; width:66%; transition:transform .55s var(--ease); filter:drop-shadow(0 0 1.2px rgba(21,101,168,.4)) drop-shadow(0 14px 24px rgba(0,0,0,.7)); } .card:hover .card-art img{transform:translateY(-6px)} /* A handful of lines cannot become cut-outs: they are clear glass on a studio sweep, or sealed goods photographed on white. Those are rendered as specimen plates instead — the sweep is flat-fielded to one ash tone, so the plate is a deliberate element rather than a leftover backdrop. */ .card--plate .card-art img{ width:72%; border-radius:3px; filter:drop-shadow(0 14px 26px rgba(0,0,0,.62)); } .card--plate .card-art::before{opacity:.28} .card--plate:hover .card-art::before{opacity:.5} .card--plate:hover .card-art img{transform:translateY(-4px)} /* Lines we know are in the range but have not photographed yet. Rather than borrow a neighbour's picture and hope nobody looks, the tile shows an empty drawing frame — which is what a catalogue page actually looks like the week before the samples come back. */ .card--plot .card-art::before{display:none} .plot{ position:relative; z-index:2; width:64%; aspect-ratio:1/1; display:grid; place-items:center; text-align:center; padding:1rem; border:1px dashed rgba(11,37,69,.22); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.7; color:rgba(11,37,69,.34); transition:border-color .45s var(--ease), color .45s var(--ease); } .card--plot:hover .plot{border-color:rgba(21,101,168,.45); color:var(--glow)} /* the full-width stage frame reads a touch smaller so it does not compete with the panel it sits in */ .pd-art--plot .plot{width:56%} .card-body{padding:1.15rem 1.35rem 1.45rem; border-top:1px solid var(--hair-2); display:flex; flex-direction:column; gap:.5rem; flex:1} .card-cat{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ember)} .card h3{font-size:.98rem; letter-spacing:.005em; line-height:1.4} .card .spec{font-size:.78rem; letter-spacing:.06em; color:rgba(11,37,69,.42); margin-top:auto; padding-top:.7rem} .cat-foot{margin-top:clamp(1.8rem,3.4vw,2.6rem)} /* ============================================================ CREDENTIALS / FACTS ============================================================ */ .creds{border-block:1px solid var(--hair)} .creds-in{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))} .cred{padding:clamp(1.5rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem); border-left:1px solid var(--hair-2)} .cred:first-child{border-left:0} .cred dt{font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(11,37,69,.42); margin-bottom:.8rem} .cred dd{margin:0; font-size:clamp(1rem,1.4vw,1.25rem); font-weight:400; letter-spacing:.01em} .cred dd small{display:block; font-size:.74rem; color:var(--muted); margin-top:.35rem; letter-spacing:0} .facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--hair)} .fact{padding:clamp(1.3rem,2.6vw,2rem) clamp(1rem,2vw,1.5rem); border-right:1px solid var(--hair-2)} .fact:last-child{border-right:0} .fact b{display:block; font-size:clamp(1.45rem,2.8vw,2.1rem); font-weight:300; letter-spacing:.005em; color:var(--glow)} .fact span{display:block; margin-top:.5rem; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(11,37,69,.42)} /* ============================================================ EDITORIAL ROWS — article + guide indexes ============================================================ */ .rows{border-top:1px solid var(--hair)} .row{ display:grid; grid-template-columns:8.5rem minmax(0,1fr) auto; gap:clamp(.5rem,2vw,2.6rem); align-items:start; padding:clamp(1.5rem,3vw,2.4rem) clamp(.6rem,1.6vw,1.2rem); border-bottom:1px solid var(--hair-2); transition:background .4s var(--ease); } .row:hover{background:var(--char-2)} .row .meta{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(11,37,69,.42); padding-top:.35rem} .row .meta b{display:block; color:var(--ember); font-weight:500; margin-bottom:.45rem} .row h3{font-size:clamp(1.05rem,1.7vw,1.32rem); letter-spacing:.005em; line-height:1.3; margin-bottom:.65rem} .row p{color:var(--muted); font-size:.9rem; max-width:64ch} .row .go{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(11,37,69,.38); white-space:nowrap; padding-top:.4rem; transition:color .35s var(--ease)} .row:hover .go{color:var(--glow)} .rows--plain .row{grid-template-columns:minmax(0,1fr) auto} /* ============================================================ PROSE — long-form body copy ============================================================ */ .prose{max-width:70ch} .prose>*+*{margin-top:1.35rem} .prose h2{ font-size:clamp(1.35rem,2.5vw,1.9rem); line-height:1.24; letter-spacing:.01em; margin-top:clamp(2.6rem,4.4vw,3.6rem); } .prose h2:first-child{margin-top:0} .prose h3{font-size:clamp(1.06rem,1.6vw,1.24rem); font-weight:500; letter-spacing:.01em; margin-top:2.1rem} .prose p{color:var(--ink)} .prose ul,.prose ol{margin-top:1.2rem; padding-left:1.3rem; color:var(--ink)} .prose li+li{margin-top:.5rem} .prose li::marker{color:var(--ember)} .prose a{color:var(--glow); border-bottom:1px solid rgba(21,101,168,.35); transition:border-color .3s var(--ease)} .prose a:hover{border-bottom-color:var(--glow)} .prose strong{font-weight:600} .prose em{color:var(--glow); font-style:normal} .prose hr{border:0; border-top:1px solid var(--hair); margin-top:2.8rem} .prose blockquote{ margin-top:2.1rem; padding:1.15rem 0 1.15rem clamp(1rem,2.4vw,1.7rem); border-left:2px solid var(--ember); font-size:clamp(1.02rem,1.5vw,1.16rem); line-height:1.55; color:var(--ash); } .prose blockquote cite{display:block; margin-top:.9rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(11,37,69,.42); font-style:normal} .prose figure{margin-top:2.4rem} .prose figure img{border:1px solid var(--hair); background:var(--char-2); width:100%} .prose figcaption{margin-top:.85rem; font-size:.72rem; letter-spacing:.06em; color:rgba(11,37,69,.45)} .prose code{font-family:var(--mono); font-size:.86em; background:var(--char-2); border:1px solid var(--hair-2); padding:.12rem .4rem} .prose .figure--plate img{background:var(--char-2)} /* two-column body with sticky aside */ .doc{display:grid; grid-template-columns:minmax(0,1fr) 15.5rem; gap:clamp(2rem,5vw,4.5rem); align-items:start} .toc{position:sticky; top:calc(var(--nav-h) + 1.6rem)} .toc h4{font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(11,37,69,.42); font-weight:400; margin-bottom:1rem} .toc ol{list-style:none; margin:0; padding:0; display:grid; gap:.1rem} .toc a{ display:block; padding:.55rem .85rem; font-size:.82rem; line-height:1.4; color:var(--muted); border-left:1px solid var(--hair); transition:color .3s var(--ease), border-color .3s var(--ease); } .toc a:hover{color:var(--ash)} .toc a[aria-current="true"]{color:var(--ash); border-left-color:var(--ember)} /* article byline */ .byline{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.4rem; padding-block:1.4rem; border-block:1px solid var(--hair); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,37,69,.45); } .byline b{color:var(--ember); font-weight:500} /* ============================================================ TABLES ============================================================ */ .spec-table{width:100%; border-collapse:collapse; font-size:.87rem} .spec-table caption{ text-align:left; padding-bottom:.95rem; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(11,37,69,.42); } .spec-table th,.spec-table td{padding:.85rem 1rem; border-bottom:1px solid var(--hair-2); text-align:left; vertical-align:top} .spec-table th{font-weight:400; letter-spacing:.06em; color:rgba(11,37,69,.5)} /* Only a row-header key column is held on one line. Applying `nowrap` and a 36% width to *every* th sets a min-content width that a three- or four-column comparison table cannot honour at 390px — and because body has overflow-x:hidden, the page silently slides sideways instead of scrolling. Column headers are allowed to wrap; the key column is not. */ .spec-table tbody th{white-space:nowrap; width:36%} .spec-table td{color:var(--ink)} .spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0} .spec-table--box{border:1px solid var(--hair)} .spec-table--box th:first-child,.spec-table--box td:first-child{padding-left:1.3rem} .spec-table--box th:last-child,.spec-table--box td:last-child{padding-right:1.3rem} /* A table wider than the column it sits in scrolls itself rather than pushing the whole document. Kept thin and low-contrast so it reads as a hint, not a control. */ .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(11,37,69,.25) transparent} .table-wrap::-webkit-scrollbar{height:6px} .table-wrap::-webkit-scrollbar-thumb{background:rgba(11,37,69,.22)} .table-wrap::-webkit-scrollbar-track{background:transparent} /* ============================================================ CALLOUTS ============================================================ */ .note{ border:1px solid var(--hair); border-left:2px solid var(--ember); background:linear-gradient(120deg, rgba(15,76,126,.07), transparent 62%); padding:clamp(1.15rem,2.4vw,1.6rem) clamp(1.15rem,2.4vw,1.7rem); } .note h4{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--glow); font-weight:500; margin-bottom:.6rem} .note p{color:var(--ink); font-size:.9rem} .note>*+*{margin-top:.7rem} /* ============================================================ TIMELINE ============================================================ */ .timeline{list-style:none; margin:0; padding:0; position:relative} .timeline::before{ content:""; position:absolute; left:0; top:.7rem; bottom:.7rem; width:1px; background:linear-gradient(180deg, transparent, var(--hair) 10%, var(--hair) 90%, transparent); } .timeline li{position:relative; padding:0 0 clamp(1.7rem,3vw,2.5rem) clamp(1.5rem,3vw,2.3rem)} .timeline li:last-child{padding-bottom:0} .timeline li::before{ content:""; position:absolute; left:-3px; top:.55rem; width:7px; height:7px; border-radius:50%; background:var(--ember); } .timeline .yr{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember)} .timeline h3{font-size:1rem; margin:.45rem 0 .5rem} .timeline p{color:var(--muted); font-size:.88rem; max-width:62ch} /* ============================================================ FORMS ============================================================ */ .form{display:grid; gap:1.15rem} .form .duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.15rem} .field{display:grid; gap:.55rem} .field label,.field .field-label{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(11,37,69,.5)} .field input,.field select,.field textarea{ width:100%; padding:.92rem 1.05rem; font:inherit; font-size:.9rem; color:var(--ash); background:var(--char-2); border:1px solid var(--hair); border-radius:0; transition:border-color .3s var(--ease), background .3s var(--ease); } .field input::placeholder,.field textarea::placeholder{color:rgba(11,37,69,.28)} .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:rgba(21,101,168,.5); background:#fff; } .field textarea{min-height:9.5rem; resize:vertical} .field select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,rgba(11,37,69,.5) 50%),linear-gradient(135deg,rgba(11,37,69,.5) 50%,transparent 50%); background-position:calc(100% - 1.4rem) 50%, calc(100% - 1rem) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } .field select option{background:var(--char-2)} .field .hint{font-size:.72rem; color:rgba(11,37,69,.4); letter-spacing:.02em} .form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:.6rem} .form-status{ display:none; border:1px solid rgba(21,101,168,.4); background:linear-gradient(120deg, rgba(21,101,168,.1), transparent 60%); padding:1rem 1.15rem; font-size:.86rem; color:var(--ash); } .form-status[data-shown="true"]{display:block} /* ============================================================ INFO BLOCKS (contact) ============================================================ */ .info{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--hair)} .info>div{padding:clamp(1.4rem,2.8vw,2.1rem) clamp(1.1rem,2.2vw,1.6rem); border-right:1px solid var(--hair-2)} .info>div:last-child{border-right:0} .info h4{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(11,37,69,.42); font-weight:400; margin-bottom:.95rem} .info p,.info a{font-size:.9rem; color:var(--ink)} .info a{color:var(--glow)} .info a:hover{border-bottom:1px solid var(--glow)} .info dl{margin:0; display:grid; gap:.55rem; font-size:.88rem} .info dt{color:rgba(11,37,69,.45); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase} .info dd{margin:0; color:var(--ink)} /* ============================================================ FAQ ============================================================ */ .faq{border-top:1px solid var(--hair)} .faq details{border-bottom:1px solid var(--hair-2)} .faq summary{ list-style:none; cursor:pointer; padding:1.2rem .3rem; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; font-size:.98rem; letter-spacing:.005em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; color:var(--ember); font-size:1.05rem; line-height:1; transition:transform .3s var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq .a{padding:0 .3rem 1.5rem; color:var(--muted); font-size:.9rem; max-width:70ch} .faq .a>*+*{margin-top:.8rem} /* ============================================================ PRODUCT DETAIL ============================================================ */ .pd{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start} .pd-art{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; border:1px solid var(--hair); background: radial-gradient(circle at 50% 56%, rgba(21,101,168,.18), rgba(15,76,126,.05) 44%, transparent 70%), linear-gradient(180deg, var(--char-2), var(--char)); } .pd-art img{ position:relative; z-index:2; width:72%; filter:drop-shadow(0 0 1.4px rgba(21,101,168,.4)) drop-shadow(0 20px 34px rgba(0,0,0,.72)); } .pd-art--plate img{width:88%; border-radius:3px} .thumbs{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem} .thumbs button{ width:76px; aspect-ratio:1/1; display:grid; place-items:center; border:1px solid var(--hair); background:var(--char-2); transition:border-color .3s var(--ease), background .3s var(--ease); } .thumbs button img{width:72%} .thumbs button:hover{border-color:rgba(11,37,69,.4)} .thumbs button[aria-pressed="true"]{border-color:var(--ember); background:#E8F0F6} /* A plate thumbnail is a framed photograph, not a cut-out, so it fills more of its square before it reads as the same weight as its neighbours. */ .thumbs button.plate img{width:92%} .thumbs-note{margin-top:.9rem; font-size:.74rem; color:rgba(11,37,69,.45); max-width:52ch} /* The panel used to open with the product name again, once the page head had already set it as the h1 inside the same screen. It opens on the one line that actually distinguishes the part instead — the fittings and capacity — and that line is dropped from the table below so it is stated once. */ .pd-lead{margin-top:.85rem; font-size:clamp(1.02rem,2vw,1.3rem); font-weight:300; line-height:1.35; letter-spacing:.015em; color:var(--ash)} .pd-spec{margin-top:1.6rem; list-style:none; padding:0; display:grid; gap:.05rem} .pd-spec li{display:flex; justify-content:space-between; gap:1.4rem; padding:.72rem 0; border-bottom:1px solid var(--hair-2); font-size:.88rem} .pd-spec li span:first-child{color:rgba(11,37,69,.45); letter-spacing:.06em} .pd-spec li span:last-child{text-align:right; color:var(--ink)} .chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.4rem} .chips span{ padding:.42rem .8rem; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--hair); color:var(--muted); } /* ============================================================ RAIL — category navigation beside an index ============================================================ */ .rail{list-style:none; margin:0; padding:0; display:grid; gap:.05rem} .rail a{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.78rem .9rem; border-left:1px solid var(--hair); font-size:.86rem; color:var(--muted); transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .rail a:hover{color:var(--ash); background:var(--char-2)} .rail a[aria-current="true"]{color:var(--ash); border-left-color:var(--ember); background:var(--char-2)} .rail .c{font-size:.78rem; color:rgba(11,37,69,.35)} /* ============================================================ PAGINATION ============================================================ */ .pager{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:clamp(2rem,4vw,3rem)} .pager a,.pager span{ min-width:2.7rem; padding:.65rem .9rem; text-align:center; border:1px solid var(--hair); font-size:.78rem; letter-spacing:.14em; color:var(--muted); transition:all .3s var(--ease); } .pager a:hover{color:var(--ash); border-color:rgba(11,37,69,.4)} .pager [aria-current="page"]{background:var(--ember); border-color:var(--ember); color:#FFFFFF} /* ============================================================ LAYOUT HELPERS ============================================================ */ .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start} .split--rail{grid-template-columns:14rem minmax(0,1fr); gap:clamp(1.8rem,4vw,3.4rem)} .stack-2{display:grid; gap:clamp(1.6rem,3vw,2.6rem)} .stack-3{display:grid; gap:clamp(2.4rem,5vw,4rem)} /* ============================================================ MATERIAL (home) ============================================================ */ .mat-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(2.5rem,5vw,5rem); align-items:center} .mat-art{ position:relative; aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden; background: radial-gradient(circle at 50% 76%, rgba(21,101,168,.2), rgba(15,76,126,.07) 38%, transparent 64%), linear-gradient(180deg, var(--char-2), var(--char)); border:1px solid var(--hair); } .mat-art .kiln-line{ position:absolute; left:0; right:0; bottom:26%; height:1px; background:linear-gradient(90deg, transparent, rgba(21,101,168,.55), transparent); } .mat-art .kiln-line::after{ content:"≈ 1 200 °C"; position:absolute; right:1.2rem; top:-1.6rem; font-size:.58rem; letter-spacing:.2em; color:var(--glow); opacity:.75; } .mat-art img{ position:relative; z-index:2; width:64%; filter:drop-shadow(0 0 1.4px rgba(21,101,168,.45)) drop-shadow(0 20px 32px rgba(0,0,0,.7)); } .mat-list{list-style:none; margin:2rem 0 0; padding:0} .mat-list li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.1rem; padding:1.2rem 0; border-top:1px solid var(--hair-2)} .mat-list li:last-child{border-bottom:1px solid var(--hair-2)} .mat-list .n{font-size:.78rem; letter-spacing:.2em; color:var(--ember); padding-top:.3rem} .mat-list h3{font-size:1rem; letter-spacing:.01em; margin-bottom:.35rem} .mat-list p{color:var(--muted); font-size:.9rem} /* ============================================================ PROCESS ============================================================ */ .process{ border:1px solid var(--hair); background:linear-gradient(160deg, rgba(15,76,126,.06), transparent 52%); } .process-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:2.5rem; align-items:end; padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1.3rem,3vw,2.4rem); border-bottom:1px solid var(--hair); } .steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr))} .step{padding:clamp(1.5rem,3vw,2.2rem) clamp(1.1rem,2vw,1.6rem) clamp(1.9rem,3.6vw,2.6rem); border-right:1px solid var(--hair)} .step:last-child{border-right:0} .step .idx{font-size:.78rem; letter-spacing:.22em; color:var(--ember); display:block; margin-bottom:1.2rem} .step h3{font-size:1rem; margin-bottom:.55rem} .step p{color:var(--muted); font-size:.87rem} /* ============================================================ POSTS (home knowledge teasers) ============================================================ */ .posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--hair)} .post{ padding:clamp(1.5rem,2.8vw,2.2rem) clamp(1.2rem,2.2vw,1.7rem) clamp(1.8rem,3.2vw,2.4rem); border-right:1px solid var(--hair); display:flex; flex-direction:column; transition:background .4s var(--ease); } .post:last-child{border-right:0} .post:hover{background:linear-gradient(180deg, rgba(15,76,126,.07), transparent)} .post .k{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ember); margin-bottom:1.3rem} .post h3{font-size:1.08rem; letter-spacing:.005em; margin-bottom:.8rem} .post p{color:var(--muted); font-size:.89rem; flex:1} .post .rd{margin-top:1.7rem; padding-top:.9rem; border-top:1px solid var(--hair-2); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(11,37,69,.5)} .post:hover .rd{color:var(--glow)} /* ============================================================ MARKET (home) ============================================================ */ .market-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(2rem,4vw,4rem); align-items:center} .market select{ width:100%; margin-top:1.5rem; padding:1rem 1.15rem; font:inherit; font-size:.86rem; letter-spacing:.06em; color:var(--ash); background:var(--char-2); border:1px solid var(--hair); appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,rgba(11,37,69,.5) 50%),linear-gradient(135deg,rgba(11,37,69,.5) 50%,transparent 50%); background-position:calc(100% - 1.4rem) 50%, calc(100% - 1rem) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } .market select option{background:var(--char-2)} .market-note{margin-top:1rem; font-size:.82rem; color:rgba(11,37,69,.42); letter-spacing:.02em} .market-art{ aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 58%, rgba(21,101,168,.2), rgba(15,76,126,.06) 42%, transparent 66%), var(--char-2); border:1px solid var(--hair); } .market-art img{width:52%; filter:drop-shadow(0 0 1.4px rgba(21,101,168,.45)) drop-shadow(0 18px 28px rgba(0,0,0,.7))} /* ============================================================ CLOSING BAND ============================================================ */ .close{ position:relative; border-top:1px solid var(--hair); padding-block:clamp(4rem,8vw,6.5rem); text-align:center; overflow:hidden; } .close::before{ content:""; position:absolute; left:50%; top:30%; width:min(80vw,760px); aspect-ratio:1; transform:translateX(-50%); background:radial-gradient(circle, rgba(15,76,126,.16), transparent 66%); pointer-events:none; } .close>*{position:relative} .close h2{font-size:clamp(1.8rem,4.4vw,3.6rem); font-weight:300; max-width:22ch; margin:0 auto 1.4rem; letter-spacing:.01em} .close .lede{margin:0 auto} .close-acts{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2.5rem} /* ============================================================ FOOTER ============================================================ */ footer{border-top:1px solid var(--hair); padding-block:clamp(2.5rem,4.5vw,3.5rem)} .foot-in{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:2.4rem; padding-bottom:2.4rem; border-bottom:1px solid var(--hair-2)} .foot-in h4{font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(11,37,69,.42); font-weight:400; margin-bottom:1rem} .foot-in ul{list-style:none; margin:0; padding:0; display:grid; gap:.58rem} .foot-in a{font-size:.88rem; color:var(--muted); transition:color .3s var(--ease)} .foot-in a:hover{color:var(--ash)} .foot-note{font-size:.88rem; color:var(--muted); max-width:26rem; margin-top:.9rem} .foot-base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.4rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(11,37,69,.38)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1120px){ .nav-links{display:none} .nav-burger{display:flex} .nav-cta .btn:not(.btn-ember){display:none} .creds-in{grid-template-columns:repeat(2,minmax(0,1fr))} .cred:nth-child(odd){border-left:0} .cred:nth-child(-n+2){border-bottom:1px solid var(--hair-2)} .grid,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} .posts{grid-template-columns:minmax(0,1fr)} .post{border-right:0; border-bottom:1px solid var(--hair)} .post:last-child{border-bottom:0} .steps{grid-template-columns:repeat(2,minmax(0,1fr))} .step:nth-child(2n){border-right:0} .step:nth-child(-n+2){border-bottom:1px solid var(--hair)} .foot-in{grid-template-columns:minmax(0,1fr) 1fr} .facts{grid-template-columns:repeat(2,minmax(0,1fr))} .fact:nth-child(2n){border-right:0} .fact:nth-child(-n+2){border-bottom:1px solid var(--hair-2)} .split,.split--rail{grid-template-columns:minmax(0,1fr)} .doc{grid-template-columns:minmax(0,1fr)} .toc{position:static; padding-bottom:2rem; border-bottom:1px solid var(--hair)} .toc ol{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:880px){ .hero-in{grid-template-columns:minmax(0,1fr); padding-block:1.5rem 2.5rem} .hero-art{order:-1; aspect-ratio:1/.82; max-height:50vh} .hero-stamp{display:none} .mat-in{grid-template-columns:minmax(0,1fr); gap:2.5rem} .mat-art{aspect-ratio:1/1} .process-head{grid-template-columns:minmax(0,1fr); gap:1.4rem} .market-in{grid-template-columns:minmax(0,1fr); gap:2.5rem} .market-art{order:2} .pd{grid-template-columns:minmax(0,1fr); gap:2.4rem} .page-head--split .wrap{grid-template-columns:minmax(0,1fr); align-items:start} .info{grid-template-columns:minmax(0,1fr)} .info>div{border-right:0; border-bottom:1px solid var(--hair-2)} .info>div:last-child{border-bottom:0} .row{grid-template-columns:minmax(0,1fr)} .row .meta{padding-top:0; display:flex; gap:.9rem; align-items:baseline} .row .meta b{margin-bottom:0} .row .go{padding-top:0} .grid--2{grid-template-columns:minmax(0,1fr)} } @media (max-width:640px){ .brand i{display:none} .grid,.grid--4{grid-template-columns:minmax(0,1fr)} .steps{grid-template-columns:minmax(0,1fr)} .step{border-right:0; border-bottom:1px solid var(--hair)} .step:last-child{border-bottom:0} .creds-in{grid-template-columns:minmax(0,1fr)} .cred{border-left:0; border-bottom:1px solid var(--hair-2)} .facts{grid-template-columns:minmax(0,1fr)} .fact{border-right:0; border-bottom:1px solid var(--hair-2)} .fact:last-child{border-bottom:0} .foot-in{grid-template-columns:minmax(0,1fr); gap:1.8rem} .filters button{flex:1 1 auto} .form .duo{grid-template-columns:minmax(0,1fr)} .toc ol{grid-template-columns:minmax(0,1fr)} .btn-row .btn,.close-acts .btn{flex:1 1 auto; justify-content:center} } /* ============================================================ ANCHOR OFFSET ============================================================ The nav is sticky, so a plain #anchor parks its target underneath the bar. Every id on the site gets the same offset, which keeps editorial links, the rail and the tables of contents honest. */ [id]{scroll-margin-top:calc(var(--nav-h) + 1.4rem)} /* ============================================================ TOPIC — knowledge centre entry cards ============================================================ Sits inside a .grid, so it owns the surface the hairline gaps would otherwise show through. */ .topic{ background:var(--char); padding:clamp(1.6rem,3vw,2.4rem) clamp(1.3rem,2.4vw,1.9rem) clamp(1.9rem,3.4vw,2.6rem); display:flex; flex-direction:column; transition:background .45s var(--ease); } .topic:hover{background:var(--char-2)} .topic h3{font-size:clamp(1.1rem,1.8vw,1.4rem); letter-spacing:.005em; line-height:1.28; margin:1.2rem 0 .8rem} .topic p{color:var(--muted); font-size:.89rem; flex:1} .topic .n{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ember); } .topic .rd{ margin-top:1.7rem; padding-top:.9rem; border-top:1px solid var(--hair-2); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(11,37,69,.5); } .topic:hover .rd{color:var(--glow)} /* ============================================================ RAIL — sticky category navigation beside an index ============================================================ */ .rail-wrap{position:sticky; top:calc(var(--nav-h) + 1.6rem)} .rail-wrap h4{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(11,37,69,.42); font-weight:400; margin-bottom:1rem; } /* ============================================================ FORMS — additions used by the inquiry form ============================================================ */ /* The native file control paints its own button AND its own wording from the browser's interface locale — not from the document's lang — so this English-only page rendered "选择文件 / 未选择任何文件" on a Chinese-locale browser. Styling ::file-selector-button cannot fix the wording, only the box. The control is therefore replaced: the real input is clipped to nothing but stays focusable and label-activatable, a styled