/* =========================================================== Taylor Muller · B2B site demo Design tokens / base / components =========================================================== */ :root{ --ink:#0e0f11; --ink-2:#191b1e; --ink-3:#2a2d31; --paper:#ffffff; --paper-2:#f7f6f4; --paper-3:#efece7; --line:#e4e1db; --line-2:#d3cfc8; --muted:#6c7176; --muted-2:#8d9297; --gold:#a8843f; --gold-2:#c9a96a; --ok:#2f7d4f; --r:2px; --shadow:0 18px 48px rgba(14,15,17,.10); --maxw:1200px; --pad:clamp(16px,4vw,32px); /* Fonts: the sans-serif stack used by most B2B / manufacturing sites — Inter first, then system fonts. Headings share the same family (no serif headings); hierarchy comes from size, weight and letter-spacing. Inter is only requested when 'load' is chosen in the admin Fonts panel, so a blocked Google Fonts request can never change the typeface. */ --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --font-head:var(--font-sans); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-sans); font-size:16px;line-height:1.7;letter-spacing:.01em; overflow-x:hidden; /* Safety net: nothing should overflow the viewport */ } img,picture,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:600;line-height:1.22;letter-spacing:-.005em} p{margin:0} ul{margin:0;padding:0;list-style:none} button,input,select,textarea{font:inherit;color:inherit} /* ---------- layout ---------- */ .wrap{width:min(var(--maxw),100% - (var(--pad) * 2));margin-inline:auto} .section{padding:clamp(48px,7vw,104px) 0} .section--tight{padding:clamp(36px,5vw,64px) 0} .section--paper{background:var(--paper-2)} .section--ink{background:var(--ink);color:#f2f0ed} .section--ink h2,.section--ink .eyebrow{color:#fff} .rule{height:1px;background:var(--line);border:0;margin:0} /* ---------- demo bar ---------- */ .demo-bar{ background:var(--ink);color:var(--gold-2); font-size:12.5px;letter-spacing:.06em;text-align:center; padding:8px 16px;position:relative;z-index:60; } /* ---------- header ---------- */ .site-head{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff} /* Used when the sticky-header switch is off */ .site-head--static{position:static} /* =========================================================== Home hero: the header floats over the carousel On load the hero starts at the very top of the page and the header is transparent (with a gradient so the links stay readable); once you scroll past the hero the solid header fades in. Front page only, and only when the hero is the first section. =========================================================== */ .tm-hero-top .site-head{ position:fixed;top:0;left:0;right:0; background:transparent; transition:background-color .3s ease; } /* Backdrop gradient while floating (::before lives in the header's own layer, so it never covers the links). It extends 46px below the header, so the gradient fades out past the bottom edge instead of ending on a hard line. */ .tm-hero-top .site-head::before{ content:"";position:absolute;inset:0 0 -46px;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(8,9,11,.74) 0%,rgba(8,9,11,.52) 52%,rgba(8,9,11,.20) 78%,rgba(8,9,11,0) 100%); transition:opacity .3s ease; } /* Hide the top bar while floating, so the hero really starts at the very top (JS moves the bar inside the header first, so showing/hiding it never shifts the page). */ .tm-hero-top .site-head .topbar{display:none} .tm-hero-top.is-scrolled .site-head{background:var(--ink)} .tm-hero-top.is-scrolled .site-head::before{opacity:0} .tm-hero-top.is-scrolled .site-head .topbar{display:block} /* Photos are often bright (light dials, skin, light clothing) — a soft shadow keeps the header text readable. */ .tm-hero-top:not(.is-scrolled) .site-head .nav a, .tm-hero-top:not(.is-scrolled) .site-head .head-tool, .tm-hero-top:not(.is-scrolled) .site-head .head-lang, .tm-hero-top:not(.is-scrolled) .site-head .head-lang-wrap a{ text-shadow:0 1px 12px rgba(0,0,0,.55); } /* The WP admin bar would cover a fixed header, so make room for it. */ .admin-bar.tm-hero-top .site-head{top:32px} @media screen and (max-width:782px){ .admin-bar.tm-hero-top .site-head{top:46px} } .site-head__in{display:flex;align-items:center;gap:clamp(12px,3vw,40px);min-height:78px} .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto} /* Always size logos with max-width + max-height — never a fixed width. A fixed width plus a smaller max-height squashes the image (aspect ratio lost). */ .brand img{max-width:150px;width:auto;height:auto} .brand__link{display:inline-flex;align-items:center;color:inherit} /* If the logo image fails to load (e.g. a flaky image CDN), JS adds .is-broken to the link: the is hidden and the text wordmark underneath takes its place, so visitors never see a broken-image icon. */ .brand__fallback{display:none;align-items:center;gap:10px} .brand__fallback .brand__mark{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border:1px solid currentColor;border-radius:50%; font-size:15px;line-height:1;opacity:.9; } .brand__fallback .brand__name{font-size:17px;letter-spacing:.14em;text-transform:uppercase} .brand__link.is-broken .brand__img{display:none} .brand__link.is-broken .brand__fallback{display:inline-flex} /* Same fallback for the WordPress "Site Identity" logo (.custom-logo-link) */ .custom-logo-link .brand__fallback{display:none;align-items:center;gap:10px;color:inherit} .custom-logo-link.is-broken img{display:none} .custom-logo-link.is-broken .brand__fallback{display:inline-flex} .brand span{font-family:var(--font-head);font-size:19px;letter-spacing:.16em;text-transform:uppercase} .nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);margin-left:auto} .nav a{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:#d9d7d3;padding:6px 0;border-bottom:1px solid transparent;transition:.2s} .nav a:hover,.nav a[aria-current]{color:#fff;border-color:var(--gold)} .head-cta{display:flex;align-items:center;gap:10px;margin-left:6px} .head-toggle{display:none;background:none;border:1px solid #3a3d42;color:#fff;width:42px;height:38px;border-radius:var(--r);cursor:pointer} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 26px;border:1px solid var(--ink);border-radius:var(--r); font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500; background:var(--ink);color:#fff;cursor:pointer;transition:.22s;white-space:nowrap; } .btn:hover{background:#000} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .btn--gold{background:var(--gold);border-color:var(--gold);color:#fff} .btn--gold:hover{background:#96753a} .btn--light{background:#fff;border-color:#fff;color:var(--ink)} .btn--light:hover{background:var(--gold);border-color:var(--gold);color:#fff} .btn--outline-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff} .btn--outline-light:hover{background:#fff;color:var(--ink);border-color:#fff} .btn--sm{padding:11px 18px;font-size:12.5px} .btn--block{width:100%} /* ---------- typography helpers ---------- */ .eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:500} .h-lead{font-size:clamp(15.5px,1.6vw,18px);color:var(--muted);max-width:62ch} .section--ink .h-lead{color:#b9b6b1} .h2{font-size:clamp(26px,3.4vw,42px)} .h3{font-size:clamp(19px,2vw,23px)} .muted{color:var(--muted)} .small{font-size:13.5px} .center{text-align:center} .center .h-lead{margin-inline:auto} /* ---------- hero ---------- */ .hero{background:var(--ink);color:#fff;position:relative;overflow:hidden} .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;min-height:min(78vh,720px)} .hero__copy{padding:clamp(38px,6vw,84px) clamp(24px,4vw,64px)} .hero__copy h1{font-size:clamp(31px,4.6vw,58px)} .hero__copy h1 em{font-style:normal;color:var(--gold-2)} .hero__copy .h-lead{color:#c3c0bb;margin-top:20px;max-width:52ch} .hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .hero__media{position:relative;min-height:280px;background:#000} .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .hero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#2a2d31;border-top:1px solid #2a2d31} .hero__stats div{background:var(--ink);padding:20px clamp(10px,2vw,24px)} .hero__stats b{display:block;font-family:var(--font-head);font-size:clamp(20px,2.4vw,30px);color:#fff} .hero__stats span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8f8c87} /* ---------- trust ---------- */ .trust{background:var(--paper-2);border-bottom:1px solid var(--line)} .trust__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:22px 0} .trust__t{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .badges{display:flex;flex-wrap:wrap;gap:10px} .badge{border:1px solid var(--line-2);background:#fff;padding:8px 14px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-radius:var(--r)} /* ---------- cards ---------- */ .grid{display:grid;gap:clamp(16px,2.2vw,28px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .card{border:1px solid var(--line);background:#fff;padding:clamp(22px,2.6vw,32px);border-radius:var(--r);transition:.25s} .card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)} .card__no{font-family:var(--font-head);font-size:15px;color:var(--gold);letter-spacing:.1em} .card h3{margin:12px 0 10px} .card p{color:var(--muted);font-size:15px} .card ul{margin-top:14px;display:grid;gap:8px} .card li{font-size:14px;color:var(--ink-3);padding-left:18px;position:relative} .card li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)} /* ---------- product card ---------- */ .pcard{border:1px solid var(--line);background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.25s} .pcard:hover{box-shadow:var(--shadow);border-color:var(--line-2)} .pcard__img{background:var(--paper-2);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden} .pcard__img img{width:100%;height:100%;object-fit:cover;transition:.4s} .pcard:hover .pcard__img img{transform:scale(1.03)} .pcard__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .pcard__model{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .pcard__name{font-size:15.5px;line-height:1.4;font-weight:500} .pcard__spec{display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:11.5px;color:var(--muted);border:1px solid var(--line);padding:3px 8px;border-radius:100px} .pcard__act{display:flex;gap:8px;margin-top:auto;padding-top:12px} .pcard__act .btn{flex:1;padding:11px 8px;font-size:12px} /* ---------- filter bar ---------- */ .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:26px 0} .tags{display:flex;flex-wrap:wrap;gap:8px} .tag{font-size:13px;border:1px solid var(--line-2);background:#fff;padding:8px 16px;border-radius:100px;color:var(--ink-3)} .tag[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff} /* ---------- split media ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center} .split__media{background:var(--paper-2);border-radius:var(--r);overflow:hidden} .split__media img{width:100%;object-fit:cover} /* ---------- stats table ---------- */ .tbl{width:100%;border-collapse:collapse;font-size:15px} .tbl th,.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .tbl th{font-weight:500;color:var(--muted);width:34%;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase} .tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0} .tbl--ink th,.tbl--ink td{border-color:#2c2f34} .tbl--ink th{color:#8f8c87} .tbl-box{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff} .tbl-box--ink{border-color:#2c2f34;background:var(--ink-2)} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line)} .step{padding:26px 20px 26px 0;border-right:1px solid var(--line)} .step:last-child{border-right:0} .step b{display:block;font-family:var(--font-head);font-size:26px;color:var(--gold)} .step h4{margin:10px 0 6px;font-size:16px} .step p{font-size:13.5px;color:var(--muted)} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative; font-family:var(--font-head);font-size:clamp(16px,1.7vw,19px); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--gold)} .faq details[open] summary::after{content:"–"} .faq .faq__a{padding:0 0 22px;color:var(--muted);font-size:15px;max-width:80ch} /* ---------- form ---------- */ .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .field{display:flex;flex-direction:column;gap:6px} .field--full{grid-column:1/-1} .field label{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .field input,.field select,.field textarea{ border:1px solid var(--line-2);background:#fff;border-radius:var(--r); padding:13px 14px;font-size:15px;width:100%; } .field textarea{min-height:120px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px} .checks{display:flex;flex-wrap:wrap;gap:14px} .checks label{display:flex;align-items:center;gap:8px;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink-3)} /* ---------- product detail ---------- */ .pd{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:start} .gallery__main{background:var(--paper-2);border-radius:var(--r);overflow:hidden;aspect-ratio:1/1} .gallery__main img{width:100%;height:100%;object-fit:cover} .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px} .thumbs label{border:1px solid var(--line);background:var(--paper-2);cursor:pointer;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1} .thumbs label img{width:100%;height:100%;object-fit:cover} .gallery{position:relative} .gallery input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} /* Pure-CSS gallery: radio inputs, no JS */ .gallery .slide{display:none} .gallery #g1:checked ~ .gallery__main .slide--1, .gallery #g2:checked ~ .gallery__main .slide--2, .gallery #g3:checked ~ .gallery__main .slide--3, .gallery #g4:checked ~ .gallery__main .slide--4, .gallery #g5:checked ~ .gallery__main .slide--5{display:block} .gallery #g1:checked ~ .thumbs label[for="g1"], .gallery #g2:checked ~ .thumbs label[for="g2"], .gallery #g3:checked ~ .thumbs label[for="g3"], .gallery #g4:checked ~ .thumbs label[for="g4"], .gallery #g5:checked ~ .thumbs label[for="g5"]{border-color:var(--ink)} .pd__title{font-size:clamp(25px,3vw,38px)} .pd__model{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .pd__desc{color:var(--muted);margin-top:14px;font-size:15.5px} .pd__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .pd__meta{margin-top:22px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px} .spec-quick{margin-top:26px} /* ---------- breadcrumb ---------- */ .crumb{font-size:13px;color:var(--muted-2);padding:18px 0} .crumb a:hover{color:var(--ink)} .crumb span{margin:0 8px} /* ---------- CTA band ---------- */ .cta{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px)} /* ---------- footer ---------- */ .site-foot{background:var(--ink);color:#cfccc7;padding:clamp(40px,5vw,72px) 0 26px;font-size:14.5px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(20px,3vw,44px)} .site-foot h4{color:#fff;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px} .site-foot a:hover{color:#fff} .foot-links{display:grid;gap:10px} /* Footer logo: cap width and height only and let the browser keep the aspect ratio (before v1.0.6 this was width:180px + max-height:58px, which squashed it). */ .foot-brand img{width:auto;height:auto;max-width:180px;max-height:84px;margin-bottom:18px} .foot-bottom{border-top:1px solid #2a2d31;margin-top:clamp(28px,4vw,48px);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13px;color:#8b8883} /* Small links at the right of the footer bottom (privacy policy / terms…) — links or plain text */ .foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px} /* Rows in the footer contact column that have no link (address, hours) */ .foot-links span{color:#8b8883} /* ---------- contact strip ---------- */ .contact-strip{display:flex;flex-wrap:wrap;gap:18px 36px;align-items:center;justify-content:space-between;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:20px clamp(18px,3vw,28px)} .contact-strip b{font-family:var(--font-head);font-size:17px;display:block;color:var(--ink)} .contact-strip span{font-size:13.5px;color:var(--muted)} /* ---------- mobile sticky CTA ---------- */ .mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(14,15,17,.97);border-top:1px solid #2a2d31;padding:10px 12px;gap:10px} .mobar .btn{flex:1} /* ---------- responsive ---------- */ @media (max-width:1024px){ .g-4{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr);border-top:0} .step{border-right:0;border-top:1px solid var(--line);padding:22px 18px 22px 0} .foot-grid{grid-template-columns:1fr 1fr} .hero__stats{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .nav{display:none} .head-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto} .hero__grid{grid-template-columns:1fr} .hero__media{min-height:340px;order:-1} .split,.pd,.cta{grid-template-columns:1fr} .g-3{grid-template-columns:repeat(2,1fr)} .gallery__main{aspect-ratio:1/1} } @media (max-width:640px){ :root{--pad:16px} body{font-size:15.5px} .g-2,.g-3,.g-4{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:28px} .thumbs{grid-template-columns:repeat(4,1fr)} .brand img{max-width:126px;width:auto;height:auto} .mobar{display:flex} body{padding-bottom:70px} .tbl th{width:42%;font-size:12.5px} .tbl th,.tbl td{padding:12px 12px} .hero__copy{padding:30px 0 34px} .pd__cta .btn{width:100%} } /* =========================================================== Home v2: top bar / centred-logo header / category tiles (added 2026-10-12: centred logo, homepage rhythm follows the existing site) =========================================================== */ /* Top bar — replaces the old site's Order Tracking / My Account */ .topbar{background:#0b0c0e;border-bottom:1px solid #23262a;color:#a9a6a1;font-size:13px} .topbar__in{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:10px 0} .topbar a{display:inline-flex;align-items:center;gap:7px;color:inherit;letter-spacing:.02em} .topbar a:hover{color:#fff} .topbar__links{display:flex;flex-wrap:wrap;gap:8px 22px} /* Centred-logo header: left nav / centre logo / right tools */ .site-head--center .site-head__in--center{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:clamp(12px,3vw,32px);min-height:var(--tm-head-h,86px); } .site-head__in--center .nav{margin:0;justify-self:start;gap:clamp(12px,1.8vw,26px)} .site-head__in--center .brand--center{justify-self:center} .site-head__in--center .brand--center img{width:auto;height:auto;max-width:clamp(140px,15vw,200px);max-height:var(--tm-logo-h,58px)} .site-head__in--center .head-tools{ justify-self:end;display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);margin:0; } .site-head__in--center .head-toggle{display:none} .head-tool{background:none;border:0;color:#d9d7d3;padding:6px;cursor:pointer;display:inline-flex;align-items:center} .head-tool:hover{color:#fff} /* Language slot: no box, same weight as the search icon (globe + code), in keeping with the nav */ .head-lang{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;letter-spacing:.12em;color:#b6b3ae} .head-lang .ico{opacity:.8} .head-tool:hover .ico,.head-lang:hover .ico{opacity:1} .head-lang-wrap ul{display:flex;gap:14px;list-style:none;margin:0;padding:0;align-items:center} .head-lang-wrap a{font-size:12.5px;letter-spacing:.12em;color:#b6b3ae} .head-lang-wrap a:hover,.head-lang-wrap .current-lang a{color:#fff} /* Hero highlights (three short labels) */ .hero__points{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:22px;border-top:1px solid #2c2f34} .hero__points li{font-size:13.5px;color:#b9b6b1;padding-left:18px;position:relative} .hero__points li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)} /* Category tiles (three big images, like the old homepage) */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)} .tile{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:#f3f1ee;aspect-ratio:4/3} /* Product photos keep their own aspect ratio: nothing is cropped or squeezed (square studio shots sit on the light tile background with even margins). */ .tile img{width:100%;height:100%;object-fit:contain;transition:transform .6s ease} .tile:hover img{transform:scale(1.045)} .tile__in{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff} .tile__in b{display:block;font-family:var(--font-head);font-weight:500;font-size:clamp(17px,1.7vw,21px);line-height:1.3} .tile__in span{font-size:12.5px;color:#c9c6c1;letter-spacing:.04em} @media (max-width:900px){ .site-head--center .site-head__in--center{grid-template-columns:auto 1fr auto;min-height:70px;gap:10px} .site-head__in--center .nav--left{display:none} .site-head__in--center .head-toggle{display:inline-flex;align-items:center;justify-content:center;grid-column:1;grid-row:1;justify-self:start} .site-head__in--center .brand--center{grid-column:2;grid-row:1;justify-self:center} .site-head__in--center .head-tools{grid-column:3;grid-row:1;justify-self:end} .site-head__in--center .head-cta{display:none} .tiles{grid-template-columns:1fr} /* 4:3 rather than the old 16:10: square studio photos keep more of their size now that the image is contained instead of cropped. */ .tile{aspect-ratio:4/3} } @media (max-width:640px){ .topbar{font-size:12.5px} .topbar__in{padding:9px 0;gap:6px 16px} .topbar__links a:nth-child(2){display:none} .head-tools .head-lang{display:none} } /* =========================================================== Home v3: full-bleed hero carousel =========================================================== */ .hero-carousel{position:relative;background:#0b0c0e;color:#fff;overflow:hidden} .hero-carousel__track{position:relative;height:clamp(460px,88vh,940px)} .hero-carousel__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none} .hero-carousel__slide.is-active{opacity:1;pointer-events:auto;z-index:1} .hero-carousel__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center} .hero-carousel__slide::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.80) 34%,rgba(8,9,11,.34) 62%,rgba(8,9,11,.18) 100%); } .hero-carousel__in{position:absolute;inset:0;z-index:2;display:flex;align-items:center} /* Copy block sits inside .wrap, so it starts on the same left line as the header nav instead of being centred on the page (680px is the reading width). */ .hero-carousel__copy{max-width:680px} /* One

per page: only the first slide is an h1, the rest are h2 (same look). All slides sit in the DOM, so three h1s would be a real SEO smell. */ .hero-carousel__title{font-size:clamp(28px,4.4vw,56px);margin:0} .hero-carousel__title em{font-style:normal;color:var(--gold-2)} .hero-carousel .h-lead{color:#d6d3ce;margin-top:18px;max-width:56ch} .hero-carousel .eyebrow{margin-bottom:14px} .hero-carousel .hero__actions{margin-top:28px} .hero-carousel__arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:46px;height:46px;display:grid;place-items:center;cursor:pointer; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:50%;transition:.2s; } .hero-carousel__arrow:hover{background:#fff;color:#111;border-color:#fff} .hero-carousel__arrow--prev{left:clamp(10px,2vw,28px)} .hero-carousel__arrow--next{right:clamp(10px,2vw,28px)} .hero-carousel__dots{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;gap:10px;justify-content:center} .hero-carousel__dot{width:34px;height:3px;border:0;padding:0;background:rgba(255,255,255,.34);cursor:pointer} .hero-carousel__dot.is-active{background:var(--gold)} .hero__stats{background:#0b0c0e;color:#fff} .stats-note{background:var(--paper-2);border-bottom:1px solid var(--line);color:var(--muted);font-size:12.5px;text-align:center;padding:9px 16px} .stats-note b{color:var(--ink-3);font-weight:500} @media (max-width:900px){ /* Shorter hero on phones: a 16:9 photo inside a tall box can only be shown by cropping hard (at 640px tall we saw just 39% of the photo width — it looked zoomed in). Dropping the height to ~500px brings that back to about half the photo. */ .hero-carousel__track{height:min(66vh,500px)} .hero-carousel__slide img{object-position:78% center} .hero-carousel__slide::after{background:linear-gradient(180deg,rgba(8,9,11,.42) 0%,rgba(8,9,11,.72) 46%,rgba(8,9,11,.95) 100%)} .hero-carousel__in{align-items:flex-end;padding-bottom:58px} .hero-carousel__arrow{width:38px;height:38px} } @media (max-width:640px){ .hero-carousel__track{height:min(58vh,430px)} .hero-carousel__copy{max-width:100%} .hero-carousel .h-lead{font-size:14.5px} .hero-carousel__dots{bottom:14px} .stats-note{font-size:12px;text-align:left} } /* =========================================================== WordPress additions: drawer menu / search / back to top / entry typography =========================================================== */ /* Drawer menu */ .mobile-nav{display:none;background:#0b0c0e;border-top:1px solid #23262a;padding:14px 0 22px;max-height:calc(100vh - 84px);overflow:auto} .nav-open .mobile-nav{display:block} /* No-JS fallback: ticking the toggle also opens it (:has is supported by every modern browser) */ .site-head:has(#tm-nav-toggle:checked) .mobile-nav{display:block} .nav-toggle-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .head-toggle{cursor:pointer;user-select:none} .mobile-nav__list{display:grid;gap:2px} .mobile-nav__list a{display:block;padding:13px 0;border-bottom:1px solid #1e2126;color:#e7e5e1;font-size:15px;letter-spacing:.04em} .mobile-nav__list a:hover{color:#fff} .mobile-nav__list .sub-menu{padding-left:16px} .mobile-nav__list .sub-menu a{font-size:13.5px;color:#a9a6a1;border-bottom:0} .mobile-nav__foot{margin-top:20px;display:grid;gap:12px} .mobile-nav__mail{font-size:13.5px;color:#a9a6a1;word-break:break-all} /* Header search */ .head-search{background:#0b0c0e;border-top:1px solid #23262a;padding:16px 0 20px} .search-form{display:flex;gap:10px;flex-wrap:wrap} .search-form input[type="search"]{flex:1 1 240px;min-width:0;border:1px solid #34383d;background:#141619;color:#fff;padding:13px 14px;border-radius:2px;font-size:15px} .search-form input[type="search"]::placeholder{color:#7d7a76} .search-form input[type="search"]:focus{outline:2px solid var(--gold);outline-offset:1px} .wrap > .search-form{margin-top:8px} /* Back to top */ .to-top{ position:fixed;right:18px;bottom:88px;z-index:65;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;cursor:pointer; background:rgba(14,15,17,.9);color:#fff;border:1px solid #34383d; opacity:0;visibility:hidden;transition:.25s; } .to-top.is-visible{opacity:1;visibility:visible} .to-top:hover{background:var(--gold);border-color:var(--gold)} /* Entry typography (pages / posts) */ .entry-content{font-size:16.5px;line-height:1.85;color:#2b3138} .entry-content > * + *{margin-top:18px} .entry-content h2{font-size:clamp(22px,2.6vw,30px);margin-top:44px} .entry-content h3{font-size:clamp(18px,2vw,22px);margin-top:32px} .entry-content ul,.entry-content ol{padding-left:22px} .entry-content ul li{list-style:disc;margin:8px 0} .entry-content ol li{list-style:decimal;margin:8px 0} .entry-content a{text-decoration:underline;text-underline-offset:3px} .entry-content img{border-radius:2px} .entry-content blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 18px;color:var(--muted);font-style:italic} .entry-content table{width:100%;border-collapse:collapse} .entry-content th,.entry-content td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left} /* Pagination */ .pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px} .pagination .page-numbers{ min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line-2);border-radius:2px;font-size:14px;color:var(--ink-3);padding:0 12px; } .pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--ink);border-color:var(--ink);color:#fff} /* Inquiry button, added state */ .btn.is-added{background:var(--ok);border-color:var(--ok);color:#fff} @media (max-width:900px){ .to-top{bottom:82px;right:12px;width:40px;height:40px} } /* Desktop: the drawer menu must not appear */ @media (min-width:901px){ .mobile-nav{display:none!important} .head-toggle{display:none!important} } /* =========================================================== WooCommerce fallback: keep the shop archive and single product pages in the theme's layout (the theme's own card is .pcard; these rules cover the plugin's default templates) =========================================================== */ .woocommerce ul.products{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px);margin:28px 0 0;padding:0;list-style:none; } .woocommerce ul.products::before,.woocommerce ul.products::after{display:none} .woocommerce ul.products li.product{margin:0;width:auto!important;float:none!important;text-align:left} .woocommerce ul.products li.product a img{width:100%;height:auto;margin:0 0 12px} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15.5px;line-height:1.4;padding:0 0 8px} .woocommerce ul.products li.product .price{color:var(--muted);font-size:15px} .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart{ margin-top:10px;padding:11px 16px;border:1px solid var(--ink);border-radius:2px; background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; } .woocommerce ul.products li.product .button:hover{background:#000;color:#fff} .woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{margin:0 0 18px;color:var(--muted);font-size:14px} .woocommerce .woocommerce-ordering select{border:1px solid var(--line-2);padding:9px 12px;border-radius:2px} .woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;justify-content:center;margin-top:34px} .woocommerce nav.woocommerce-pagination ul li{border:0} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{ min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line-2);border-radius:2px;color:var(--ink-3); } .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);border-color:var(--ink);color:#fff} /* =========================================================== Product detail page (B2B) — template-parts/product/main.php Same design system as the homepage and the catalog. =========================================================== */ .tm-pd__crumb{padding:18px 0 0} .tm-pd__top{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px); align-items:start;padding:clamp(18px,2.6vw,34px) 0 clamp(32px,4vw,60px); } /* 栅格子项默认 min-width:auto，内容（比如一张 4000px 的主图）会把列撑破 —— 这一条是安全网 */ .tm-pd__top > *{min-width:0} /* WooCommerce 自带图库放进我们的栏里（缩略图/灯箱/滑动都由它负责） */ .tm-pd__media .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0;position:relative} /* 主图尺寸约束：没有这一条，4000px 的原图会按原尺寸铺开、把整页撑破 */ .tm-pd__media .woocommerce-product-gallery img{width:100%;height:auto;display:block} .tm-pd__media .woocommerce-product-gallery__wrapper, .tm-pd__media .woocommerce-product-gallery__image{max-width:100%} /* ---------- 主题自己的图库（不依赖 WooCommerce 的 slider 脚本） ---------- */ .tm-pd__gallery{position:relative} .tm-pd__stage{position:relative} .tm-pd__slide{display:none;margin:0} .tm-pd__slide.is-active{display:block} .tm-pd__img{width:100%;height:auto;display:block;background:var(--paper-2)} .tm-pd__zoom{ position:absolute;right:12px;top:12px;z-index:3;width:38px;height:38px; display:grid;place-items:center;cursor:pointer;border:1px solid var(--line-2); background:rgba(255,255,255,.94);color:var(--ink);border-radius:50%; box-shadow:0 2px 10px rgba(14,15,17,.14);transition:background .18s ease,color .18s ease; } .tm-pd__zoom:hover{background:var(--ink);color:#fff} /* 缩略图条：只露出 4–5 张，其余靠两端按钮翻（宽度由 JS 写进 --tm-thumb-w） */ .tm-pd__thumbs{position:relative;margin-top:10px} .tm-pd__strip{ display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:thin; } .tm-pd__strip::-webkit-scrollbar{height:6px} .tm-pd__strip::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px} .tm-pd__thumb{ flex:0 0 auto;width:var(--tm-thumb-w,86px);padding:0;cursor:pointer;scroll-snap-align:start; border:1px solid var(--line);background:#fff;border-radius:2px;overflow:hidden;transition:border-color .18s ease; } .tm-pd__thumb img{width:100%;height:auto;display:block} .tm-pd__thumb:hover{border-color:var(--ink-3)} .tm-pd__thumb.is-active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset} /* 放大：主题自带的极简灯箱（不依赖任何插件） */ .tm-pd__zoombox{ position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px; background:rgba(10,11,12,.93); } .tm-pd__zoombox[hidden]{display:none} .tm-pd__zoombox img{max-width:92vw;max-height:86vh;width:auto;height:auto;display:block} .tm-pd__zoomclose{ position:absolute;right:18px;top:16px;width:42px;height:42px;border-radius:50%; border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer; } .tm-pd__zoomclose:hover{background:#fff;color:#111} .tm-pd__zoomnav{ position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer; } .tm-pd__zoomnav:hover{background:#fff;color:#111} .tm-pd__zoomnav--prev{left:18px} .tm-pd__zoomnav--next{right:18px} /* Thumbnails: one single row that scrolls sideways (like a carousel) instead of wrapping into rows that push the layout down. Few images → they simply sit there. */ .tm-pd__media .flex-control-thumbs{ display:flex!important;flex-wrap:nowrap!important;gap:8px;margin-top:10px; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;scroll-padding-left:0; padding-bottom:4px;scrollbar-width:thin; } .tm-pd__media .flex-control-thumbs li{ flex:0 0 auto!important;width:var(--tm-thumb-w,86px)!important;margin:0!important; list-style:none;float:none!important;scroll-snap-align:start; } .tm-pd__media .flex-control-thumbs img{border:1px solid var(--line);border-radius:2px} .tm-pd__media .flex-control-thumbs img.flex-active{border-color:var(--gold)} /* 滚动条做细一点，别抢视线 */ .tm-pd__media .flex-control-thumbs::-webkit-scrollbar{height:6px} .tm-pd__media .flex-control-thumbs::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px} .tm-pd__media .flex-control-thumbs::-webkit-scrollbar-track{background:transparent} /* 桌面端可以按住拖动（见 assets/js/main.js） */ .tm-pd__media .flex-control-thumbs.is-draggable{cursor:grab} .tm-pd__media .flex-control-thumbs.is-dragging{cursor:grabbing;scroll-snap-type:none} /* 缩略图容器 + 两端轮播箭头（默认显示 4–5 张，其余用箭头翻） */ .tm-pd__thumbs{position:relative;margin-top:10px} .tm-pd__thumbs .flex-control-thumbs{margin-top:0} /* 大图上的左右按钮：切上一张 / 下一张 */ .tm-pd__mainnav{ position:absolute;top:50%;transform:translateY(-50%);z-index:6; width:42px;height:42px;display:grid;place-items:center;cursor:pointer; border:1px solid var(--line-2);background:rgba(255,255,255,.94);color:var(--ink);border-radius:50%; box-shadow:0 2px 12px rgba(14,15,17,.16);transition:background .18s ease,color .18s ease,border-color .18s ease; } .tm-pd__mainnav:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .tm-pd__mainnav--prev{left:12px} .tm-pd__mainnav--next{right:12px} /* 主题自己接管箭头，隐藏 WooCommerce 自带那对，避免出现两组 */ .tm-pd__media .flex-direction-nav{display:none!important} .tm-pd__tnav{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:34px;height:34px;display:none;place-items:center;cursor:pointer; border:1px solid var(--line-2);background:#fff;color:var(--ink);border-radius:50%; box-shadow:0 2px 10px rgba(14,15,17,.14);transition:background .18s ease,color .18s ease,border-color .18s ease; } .tm-pd__thumbs.has-nav .tm-pd__tnav{display:grid} .tm-pd__tnav:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .tm-pd__tnav[disabled]{opacity:.3;pointer-events:none} .tm-pd__tnav--prev{left:-6px} .tm-pd__tnav--next{right:-6px} @media (max-width:640px){ .tm-pd__tnav{width:30px;height:30px} .tm-pd__tnav--prev{left:0} .tm-pd__tnav--next{right:0} .tm-pd__mainnav{width:36px;height:36px} .tm-pd__mainnav--prev{left:6px} .tm-pd__mainnav--next{right:6px} } .tm-pd__model{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 10px} .tm-pd__title{font-size:clamp(24px,3vw,38px);margin:0 0 14px} .tm-pd__lead{color:var(--ink-3);font-size:16.5px} .tm-pd__lead p{margin:0 0 12px} .tm-pd__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:26px} .tm-pd__act .btn{min-width:186px} .tm-pd__spec{ display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer; font:inherit;font-size:14px;color:var(--ink-3);border-bottom:1px solid var(--line-2);padding:6px 0; } .tm-pd__spec:hover{color:var(--ink);border-color:var(--ink)} .tm-pd__cart{margin-top:22px} .tm-pd__cart .single_add_to_cart_button{ background:var(--gold);border-color:var(--gold);color:#fff;border-radius:2px; padding:14px 26px;letter-spacing:.08em;text-transform:uppercase;font-size:13px; } .tm-pd__cart .quantity .qty{border:1px solid var(--line-2);padding:12px;border-radius:2px} .tm-pd__contact{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .tm-pd__contact a{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)} .tm-pd__contact a:hover{color:var(--ink)} .tm-pd__block{padding:clamp(38px,5vw,72px) 0;border-top:1px solid var(--line)} .tm-pd__block--paper{background:var(--paper-2)} .tm-pd__tbl th{width:34%} .tm-pd__custom{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 34px;margin-top:26px} .tm-pd__custom li{border-left:2px solid var(--gold);padding-left:16px} .tm-pd__custom b{display:block;font-weight:600} .tm-pd__custom span{color:var(--muted);font-size:14.5px} .tm-pd__desc{max-width:900px} .tm-pd__cta-in{text-align:center;display:grid;justify-items:center;gap:16px} .tm-pd__cta .h-lead{color:#c3c0bb;max-width:62ch} @media (max-width:900px){ .tm-pd__top{grid-template-columns:1fr} .tm-pd__custom{grid-template-columns:1fr} .tm-pd__act .btn{width:100%;justify-content:center} } /* Print / "save as PDF": keep only the model info and the spec table */ @media print{ #wpadminbar,.site-head,.topbar,.site-foot,.mobar,.to-top,.tm-inq-float,.tm-inq-panel, .tm-pd__crumb,.tm-pd__act,.tm-pd__cart,.tm-pd__contact,.tm-pd__custom,.tm-pd__cta, .tm-pd__block--paper,.tm-pd__block:last-of-type{display:none!important} .tm-pd__top{display:block;padding:0 0 18px} .tm-pd__media{max-width:300px;margin-bottom:18px} .tm-pd__block{border:0;padding:0;page-break-inside:avoid} body{font-size:12pt} } .woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{border-bottom:1px solid var(--line);padding:12px 14px} .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 20px;display:flex;gap:22px;border-bottom:1px solid var(--line)} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;margin:0;padding:0} .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:12px 0;font-size:14px;letter-spacing:.06em;text-transform:uppercase} /* Notices (out of stock etc.) — keep them calm */ .woocommerce-info,.woocommerce-message,.woocommerce-error{ border-top:0;background:var(--paper-2);color:var(--ink-3);border-left:3px solid var(--gold);padding:16px 20px;font-size:14.5px; } @media (max-width:900px){ .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))} .single-product div.product{grid-template-columns:1fr} } @media (max-width:640px){ .woocommerce ul.products{grid-template-columns:1fr} } /* =========================================================== v1.0.3 fix: vertical nav menu / logo size wp_nav_menu outputs a