/* ---------- self-hosted webfonts ---------- */ /* Served from this origin so the page paints on networks that cannot reach Google, and so no visitor IP is handed to a third party. */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/schibsted-grotesk-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/schibsted-grotesk-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/schibsted-grotesk-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/schibsted-grotesk-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/schibsted-grotesk-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/schibsted-grotesk-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/schibsted-grotesk-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/schibsted-grotesk-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ Baby gear OEM/ODM — design system Tokens, layout primitives and components. ============================================================ */ :root{ /* Near-black furniture, neutral grey surfaces, one red used sparingly. Colour area is deliberately tiny so the product photography leads. */ /* Blue, white and grey - the convention in this category. Red is reserved for the compliance warnings so they cannot be mistaken for decoration. */ /* Warm coral on cream. Baby gear is a warm category; the reference sites in it are warm, not corporate blue. Warnings use a deeper burnt red so they stay distinguishable from the brand colour. */ /* Neutral industrial ground, one accent. The values are the ones named in the brief; the token names date from two earlier palettes and are left alone because renaming them would rewrite 823 lines for no visual change. */ --bone:#F5F4F0; --white:#FFFFFF; --off:#FAFAF8; --ink:#171717; --ink2:#616161; --ink3:#8C8C88; --pine:#C24A46; --pine2:#A83E3A; --pine-deep:#8E312E; --pine-tint:#FBF2F1; --pine-on:#F0DAD8; --pine-on2:#E2AFAC; --pine-line:#D07B77; --accent:#C24A46; --accent-soft:#E2AFAC; --clay:#8E2A1C; --clay-text:#8E2A1C; --clay-soft:#D9A49D; --line:#DFDFDC; --line2:#ECECE8; --fill:#EDECE7; --dark:#171918; --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --r:2px; --wrap:1360px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bone);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:var(--pine);text-decoration:none} a:hover{color:var(--accent)} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.025em;line-height:1.12} h1{font-size:clamp(30px,3.4vw,46px);letter-spacing:-0.028em;line-height:1.08} h2{font-size:clamp(24px,2.3vw,32px)} h3{font-size:clamp(19px,1.6vw,25px);letter-spacing:-0.02em;line-height:1.25} p{margin:0} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ---------- layout ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px} .band{padding:80px 0} .band-sm{padding:56px 0} .b-white{background:var(--white);border-bottom:1px solid var(--line)} .b-bone{background:var(--bone);border-bottom:1px solid var(--line)} .b-dark{background:var(--pine);color:var(--white)} .b-ink{background:var(--dark);color:#F2F2EF} .b-ink h2,.b-ink h3{color:#fff} .b-dark h1,.b-dark h2,.b-dark h3{color:var(--white)} .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} .row{display:flex;gap:20px} .between{display:flex;align-items:flex-end;justify-content:space-between;gap:40px} .center{display:flex;align-items:center;justify-content:space-between;gap:40px} .stack{display:flex;flex-direction:column} .mt8{margin-top:8px}.mt16{margin-top:16px}.mt20{margin-top:20px} /* mt14 / mt24 / mt32 appear in the markup -- the footer link lists, the trust line under the product buttons, the compliance page -- but were never in the scale, so those elements sat flush against what precedes them. */ .mt14{margin-top:14px}.mt24{margin-top:24px}.mt32{margin-top:32px} .mt28{margin-top:28px}.mt40{margin-top:40px}.mt56{margin-top:56px} /* ---------- type helpers ---------- */ .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--accent)} .b-dark .eyebrow{color:var(--accent-soft)} .lead{font-size:17px;line-height:1.6;color:var(--ink2)} .b-dark .lead{color:var(--pine-on)} .sub{font-size:15px;line-height:1.65;color:var(--ink2)} .b-dark .sub{color:var(--pine-on)} .small{font-size:13px;line-height:1.55;color:var(--ink2)} .micro{font-size:12.5px;color:var(--ink3);line-height:1.6} .mono{font-family:var(--mono)} .spec{font-family:var(--mono);font-size:14px} .stat{font-family:var(--mono);font-size:22px;font-weight:500;line-height:1.1} .fill-note{color:var(--ink3)} /* ---------- buttons ---------- */ /* Buttons share the mono voice the rest of the technical furniture uses - cert lines, model numbers, spec figures - rather than a rounded web default. */ /* Pills in sentence case. The uppercase monospace read as industrial tooling, which is the wrong register for a pram. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; height:52px;padding:0 28px;border-radius:4px;font-family:var(--sans); font-size:15px;font-weight:600;letter-spacing:0;text-transform:none; border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:background .15s,color .15s,border-color .15s} .btn-sm{height:44px;padding:0 24px;font-size:14px} .btn-pri{background:var(--pine);color:#fff} .btn-pri:hover{background:var(--pine2);color:#fff} .btn-out{background:transparent;color:var(--pine);border-color:var(--pine)} .btn-out:hover{background:var(--pine-tint);color:var(--pine)} .btn-white{background:#fff;color:var(--pine)} .btn-white:hover{background:var(--pine-tint);color:var(--pine)} .btn-block{width:100%} .arrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600} /* ---------- header ---------- */ .util{background:var(--pine);color:var(--pine-on);font-size:12px} .util .wrap{display:flex;align-items:center;justify-content:space-between; min-height:38px;gap:24px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px} .util .mono{font-size:11px;letter-spacing:.1em;color:#A8C4B6} .util a{color:#A8C4B6} .util a:hover{color:#fff} .langs{display:flex;align-items:center;gap:18px} .langs a[aria-current]{color:#fff;font-weight:600} .langs a:not([aria-current]){color:#6E8C80} .nav{background:var(--white);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:50} .nav .wrap{display:flex;align-items:center;justify-content:space-between; min-height:78px;gap:32px} .brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:700; letter-spacing:-.035em;color:var(--ink);line-height:1} /* the colour split gives the wordmark structure and ties it to the mark */ .brand .wm i{font-style:normal;color:var(--pine)} .brand span.mark{width:30px;height:30px;background:url(img/logo-mark.c327804b.svg) center/contain no-repeat;border-radius:0} .navlinks{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500} .navlinks a[aria-current="page"]{color:var(--accent);font-weight:600} .navcta{display:flex;align-items:center;gap:14px} .textlink{font-size:14px;font-weight:600;color:var(--ink); border-bottom:1px solid #C9C4BA;padding-bottom:2px} .navtoggle{display:none} /* ---------- cards / shots ---------- */ .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r)} .card-bone{background:var(--bone);border:1px solid var(--line);border-radius:var(--r)} .pad{padding:24px} .pad-lg{padding:40px} .shot{background:var(--fill);border-radius:var(--r);overflow:hidden} .shot img{width:100%;height:100%;object-fit:cover} .ratio-4x3{aspect-ratio:4/3} .ratio-3x2{aspect-ratio:3/2} .ratio-1x1{aspect-ratio:1/1} .ratio-5x4{aspect-ratio:5/4} .tag{display:inline-block;font-family:var(--mono);font-size:11px; padding:6px 11px;background:var(--pine-tint);color:var(--pine);border-radius:var(--r)} .tags{display:flex;flex-wrap:wrap;gap:8px} .certline{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent)} /* ---------- lists ---------- */ .ticks{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none} .ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5} .linklist{display:flex;flex-direction:column;gap:9px;font-size:13.5px;margin:0;padding:0;list-style:none} /* ---------- key/value rows ---------- */ .kv{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden} .kv .r{display:grid;grid-template-columns:230px 1fr;border-bottom:1px solid var(--line2)} .kv .r:last-child{border-bottom:none} .kv .k{padding:13px 20px;font-size:14px;color:var(--ink2);background:var(--off)} .kv .v{padding:13px 20px;font-family:var(--mono);font-size:14px} .rows{display:flex;flex-direction:column} .rows .r{display:flex;justify-content:space-between;align-items:baseline; gap:16px;padding:13px 0;border-bottom:1px solid var(--pine-line)} .rows .r:last-child{border-bottom:none} .rows .n{font-size:15px;font-weight:600} .rows .m{font-family:var(--mono);font-size:12px;color:#A8C4B6} /* ---------- comparison table ---------- */ .cmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)} .cmp .hd,.cmp .rw{display:grid;grid-template-columns:260px repeat(2,minmax(0,1fr))} /* The standards table header was a solid coral bar on the one page the brief asks to give less weight, not more. */ .cmp .hd{background:var(--fill);color:var(--ink);border-bottom:1px solid var(--ink)} .cmp .hd div{padding:16px 22px;font-family:var(--mono);font-size:11px; letter-spacing:.12em;color:var(--pine-on2)} .cmp .hd div+div{border-left:1px solid var(--pine-line)} .cmp .rw{border-bottom:1px solid var(--line)} .cmp .rw:last-child{border-bottom:none} .cmp .rw:nth-child(even){background:var(--off)} .cmp .rw>div{padding:20px 22px} .cmp .rw>div+div{border-left:1px solid var(--line)} .cmp .t{font-size:15px;font-weight:600} .cmp .std{font-family:var(--mono);font-size:14px} .cmp .d{font-size:13px;color:var(--ink2);margin-top:5px;line-height:1.5} /* ---------- process ---------- */ .steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)); border-top:2px solid var(--pine)} .steps .s{padding:24px 18px 0 18px;border-left:1px solid var(--line)} .steps .s:first-child{border-left:none;padding-left:0} .steps .s:last-child{padding-right:0} .steps .num{font-family:var(--mono);font-size:11px;color:var(--accent)} .steps .h{font-size:15px;font-weight:600;margin-top:10px} .steps .d{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.5} .steps .t{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-top:12px} /* ---------- faq ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{padding:20px 0;font-size:16px;font-weight:600;cursor:pointer; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);font-size:20px; color:var(--clay);font-weight:400;flex-shrink:0} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 0 20px 0;font-size:14px;line-height:1.65;color:var(--ink2);max-width:760px} /* ---------- forms ---------- */ .field{display:block} .field label{font-size:12px;color:var(--ink2);display:block;margin-bottom:5px} .field input,.field select,.field textarea{ width:100%;border:1px solid #C9C4BA;border-radius:var(--r); padding:0 12px;height:44px;font-size:14px;font-family:inherit; background:#fff;color:var(--ink)} .field textarea{height:auto;padding:11px 12px;resize:vertical;line-height:1.5} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--pine);box-shadow:0 0 0 2px rgba(20,52,44,.12)} /* ---------- notice ---------- */ .notice{display:flex;align-items:flex-start;gap:12px;padding:18px 22px; background:var(--pine-tint);border-radius:var(--r);font-size:14px;color:var(--pine)} .notice svg{flex-shrink:0;margin-top:2px} .notice-w{background:var(--white);border:1px solid var(--line);color:var(--ink)} /* ---------- footer ---------- */ .foot{background:var(--ink);color:#fff;padding:56px 0 28px} .foot a{color:#D6D7D6} .foot a:hover{color:#fff} .foot .cols{display:flex;gap:60px} .foot .about{width:300px;flex-shrink:0} /* sized by however many columns the page's footer actually has: the home page keeps four, the rest dropped to three when Resources came off the site */ .foot .fgrid{flex-grow:1;display:grid;grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);gap:30px} .foot .ft{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#6E706F} .foot .txt{font-size:13px;color:#9A9C9B;line-height:1.7} .foot .bar{margin-top:44px;padding-top:22px;border-top:1px solid #2C2F30; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .foot .bar,.foot .bar a{font-size:12.5px;color:#6E706F} /* ---------- breadcrumb ---------- */ .crumb{background:var(--white);font-size:13px;color:var(--ink3)} .crumb .wrap{display:flex;align-items:center;gap:8px;min-height:52px;flex-wrap:wrap} .crumb a{color:var(--ink3)} .crumb [aria-current]{color:var(--ink)} /* ---------- mobile action bar ---------- */ .mobar{display:none} /* ============================================================ Responsive ============================================================ */ @media (max-width:1100px){ .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .steps{grid-template-columns:repeat(2,minmax(0,1fr));border-top:none} .steps .s{border-left:none;border-top:2px solid var(--pine);padding:20px 0 0 0} .cmp .hd,.cmp .rw{grid-template-columns:1fr} .cmp .hd div+div,.cmp .rw>div+div{border-left:none;border-top:1px solid var(--pine-line)} .cmp .rw>div+div{border-top:1px solid var(--line)} .foot .cols{flex-direction:column;gap:40px} .foot .about{width:auto} } @media (max-width:860px){ .wrap{padding:0 18px} .band{padding:44px 0} .band-sm{padding:34px 0} .g2,.g3,.g4,.g5{grid-template-columns:1fr} .row,.between,.center{flex-direction:column;align-items:stretch;gap:20px} .navlinks{display:none} .navtoggle{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r); background:#fff;cursor:pointer} /* three rules drawn in CSS - the icon set is gone and nothing replaces it */ .navtoggle::before{content:"";width:18px;height:2px;background:var(--ink); box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)} .nav .wrap{min-height:62px} .navcta .textlink{display:none} .util .mono{display:none} .kv .r{grid-template-columns:1fr} .kv .k{background:var(--off);padding-bottom:4px} .kv .v{padding-top:4px} .foot .fgrid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))} body{padding-bottom:78px} .mobar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60; gap:10px;padding:12px 14px;background:#fff;border-top:1px solid var(--line); box-shadow:0 -2px 12px rgba(20,52,44,.08)} .mobar .btn{height:48px;flex:1;font-size:14.5px} .mobar .ico{flex:0 0 48px;width:48px;padding:0;border:1px solid #C9C4BA;background:#fff} } /* ---------- marks ---------- */ /* A small clay square instead of the stock checkmark glyph, and a typographic arrow instead of a drawn one. Fewer borrowed shapes, less template. */ .tk{flex-shrink:0;width:7px;height:7px;margin-top:7px;background:var(--accent);display:block} .b-dark .tk,.pad-lg .tk{background:var(--accent-soft)} .ar{display:inline-block;font-style:normal;line-height:1} .ar::before{content:"\2192"} .ticks li{gap:12px} /* ---------- specification table ---------- */ /* A buyer comparing twelve models wants them on one screen, not in twelve padded cards. Rules instead of boxes; the thumbnail still does the selling. */ .spec-tbl{width:100%;border-collapse:collapse;font-size:14px} .spec-tbl thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;white-space:nowrap; text-transform:uppercase;color:var(--ink3);text-align:left;font-weight:600; padding:0 14px 10px 0;border-bottom:1px solid var(--ink)} .spec-tbl td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line2);vertical-align:top} .spec-tbl tr:hover td{background:var(--off)} .spec-tbl .mdl{font-family:var(--mono);font-weight:600;font-size:13px;white-space:nowrap} .spec-tbl .mdl a{color:var(--ink);border-bottom:1px solid var(--line)} .spec-tbl .mdl a:hover{color:var(--accent);border-color:var(--accent)} .spec-tbl .ttl{font-weight:600;margin-top:3px} .spec-tbl .ft{color:var(--ink2);font-size:13px;line-height:1.5;margin-top:5px;max-width:42ch} .spec-tbl .num{font-family:var(--mono);font-size:12.5px;white-space:nowrap;color:var(--ink2)} .spec-tbl .std{font-family:var(--mono);font-size:11px;letter-spacing:.06em;white-space:nowrap} .spec-tbl .warn{color:var(--clay-text);font-size:12px;line-height:1.45;margin-top:5px;max-width:30ch} @media (max-width:900px){ .spec-tbl thead{display:none} .spec-tbl td{display:block;border:none;padding:2px 0} .spec-tbl tr{display:grid;grid-template-columns:96px 1fr;gap:0 16px; padding:18px 0;border-bottom:1px solid var(--line2)} .spec-tbl .th{grid-row:span 4} } /* ---------- catalogue thumbnails and the full view ---------- */ .spec-tbl .th{width:184px;padding-right:22px} .spec-tbl .th img{width:220px;height:220px;object-fit:cover;background:var(--fill);display:block} .zoom{padding:0;border:1px solid var(--line);background:none;cursor:zoom-in;display:block; position:relative;line-height:0} .zoom:hover{border-color:var(--ink)} .zoom::after{content:"\002B";position:absolute;right:0;bottom:0;width:22px;height:22px; font:600 14px/22px var(--mono);text-align:center;color:#fff;background:var(--ink);opacity:0; transition:opacity .12s} .zoom:hover::after,.zoom:focus-visible::after{opacity:1} #lb{position:fixed;inset:0;z-index:90;display:none;place-items:center; background:rgba(20,20,20,.92);padding:28px} #lb[open]{display:grid} #lb img{max-width:min(860px,92vw);max-height:78vh;background:var(--bone); border:1px solid #2B2B2B} #lb .cap{margin-top:16px;text-align:center;color:#EDEDEB;font-size:14px} #lb .cap b{font-family:var(--mono);font-size:13px;letter-spacing:.06em} #lb .cap span{display:block;color:#8F8F8D;font-size:12.5px;margin-top:5px} #lb .cap i{font-style:normal;color:#6E6E6C} #lb img{cursor:pointer} #lb button{position:absolute;top:18px;right:20px;width:40px;height:40px;border:1px solid #3A3A3A; background:none;color:#EDEDEB;font-size:20px;line-height:1;cursor:pointer} #lb button:hover{background:#2B2B2B} @media (max-width:900px){.spec-tbl .th img{width:150px;height:150px}} /* ---------- products menu ---------- */ /* Two levels: product categories, and the types within a category beside them. Hover and keyboard both open it -- :focus-within means tabbing through the nav works without JS. */ .hasmenu{position:relative} /* The menu hangs 14px below the link and that gap belongs to neither, so moving the pointer down leaves .hasmenu before it reaches .menu and the menu shuts 12px short. This bridges it. It sits on .hasmenu, not .menu, because .menu is display:none while the pointer is crossing. NOTE: this block is regenerated by scratchpad/build_nav.py -- these two rules must stay in that script's CSS_NEW or they get wiped on the next run. */ .hasmenu::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px} /* Clicking a nav item reloads with the cursor still over the nav, so :hover fires at once and the menu covers the new page's heading. Ignore hover until the visitor moves the pointer; keyboard focus is unaffected. */ .nohover .hasmenu:hover .menu{display:none} .nohover .hasmenu:focus-within .menu{display:block} .hasmenu>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg)} .menu{position:absolute;left:-18px;top:100%;margin-top:14px;z-index:60; background:#fff;border:1px solid var(--line);box-shadow:0 12px 28px rgba(16,58,107,.10); padding:8px 0;display:none;min-width:246px} .hasmenu:hover .menu,.hasmenu:focus-within .menu{display:block} .menu ul{list-style:none;margin:0;padding:0} .menu .cat{position:relative} .menu .cat>a{display:flex;align-items:center;justify-content:space-between;gap:18px; padding:9px 20px;font-size:14px;color:var(--ink);line-height:1.35;white-space:nowrap} .menu .cat>a:hover,.menu .cat:focus-within>a{background:var(--fill);color:var(--accent)} .menu .cat.has>a::after{content:"";width:5px;height:5px;flex:0 0 auto;opacity:.5; border-right:1.5px solid currentColor;border-top:1.5px solid currentColor; transform:rotate(45deg)} .menu .sub{position:absolute;left:100%;top:-9px;display:none;min-width:210px; background:#fff;border:1px solid var(--line);border-radius:4px;padding:8px 0; box-shadow:0 12px 28px rgba(16,58,107,.10)} /* .open is set by the nav script. Hover alone cannot hold this flyout: moving from "Strollers" to an item lower down in it crosses the "Infant carriers" row, which drops :hover on Strollers and closes the flyout before the pointer arrives -- the items below the first were unreachable. The script keeps it open for a moment while the pointer is in transit. */ .menu .cat:hover>.sub,.menu .cat:focus-within>.sub,.menu .cat.open>.sub{display:block} /* the sub level is product types now, not part numbers, so it reads in the body face rather than the mono one the codes used */ .menu .sub a{display:block;padding:8px 20px;font-size:13.5px;color:var(--ink); white-space:nowrap} .menu .sub a:hover{background:var(--fill);color:var(--accent)} .menu a:hover{color:var(--accent)} .menu .all{display:block;margin-top:6px;padding:12px 20px 4px;font-size:13px; font-weight:600;font-family:var(--sans);border-top:1px solid var(--line2)} @media (max-width:900px){.menu{display:none!important}} /* ---------- warm shell ---------- */ /* The utility strip carries the brand colour and the nav sits on the cream fill, the way the reference sites in this category do. */ .util{background:var(--pine);color:#FFFFFF;font-size:12px} .util a{color:#F6DCD7} .util a:hover,.util a[aria-current="true"]{color:#FFFFFF} .nav{background:var(--fill);border-bottom:1px solid var(--line)} .btn-out{border-width:1.5px} .zoom{border-radius:6px;overflow:hidden} .spec-tbl .th img{border-radius:6px} .card,.card-bone{border-radius:4px;overflow:hidden} .shot{border-radius:8px} .menu{border-radius:4px} /* ---------- full-bleed hero ---------- */ /* The copy column keeps the page gutter; the media column runs off the right edge of the viewport instead of sitting in a bordered box. */ .hero{padding:0;overflow:hidden} .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center;gap:56px; padding-left:max(40px,calc((100% - var(--wrap)) / 2 + 40px));padding-right:0} .hero-copy{padding:78px 0} .hero-media{align-self:stretch;display:flex} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:left center; display:block;border-radius:0} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:0;padding-left:0} .hero-copy{padding:56px 24px 40px} .hero-media img{border-radius:0;height:auto;object-fit:contain} } /* ---------- narrow screens ---------- */ /* At 390px the brand, the quote pill and the menu button together measured 439px against a 390px viewport, so every page scrolled sideways and the right-hand side of all the copy was cut off. The fixed action bar at the bottom already carries the call to action, so the one in the header goes. */ @media (max-width:600px){ .wrap{padding:0 20px} .navcta .btn{display:none} .hero-copy{padding:48px 20px 36px} .mobar .btn{flex:1;font-size:14px;padding:0 16px} h1{font-size:clamp(26px,7vw,34px)} } /* nothing should ever be able to push the page wider than the screen */ html,body{max-width:100%;overflow-x:hidden} /* ---------- supplier bar ---------- */ /* The hero led with a promise and buried what we actually are. This band sits directly under it so "manufacturer" and the hard figures are read before anything else on the page. */ .hero-copy .eyebrow{font-size:12.5px;letter-spacing:.12em} .supbar-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:52px;align-items:center} .supbar-id p:not(.eyebrow){font-size:14px;line-height:1.6;color:var(--pine-on)} .supbar-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .supbar-facts>div{padding:0 26px;border-left:1px solid var(--pine-line)} .supbar-facts>div:first-child{padding-left:0;border-left:none} .supbar-facts>div:last-child{padding-right:0} .supbar-facts .stat{font-size:23px;color:#FFFFFF} .supbar-facts p:not(.stat){font-size:12.5px;line-height:1.5;color:var(--pine-on)} @media (max-width:1000px){ .supbar-grid{grid-template-columns:1fr;gap:34px} .supbar-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px} .supbar-facts>div:nth-child(3){padding-left:0;border-left:none} } @media (max-width:560px){ .supbar-facts{grid-template-columns:1fr;row-gap:22px} .supbar-facts>div{padding:0;border-left:none} } /* ---------- WhatsApp ---------- */ /* Brand green, not the site palette: the whole value of this button is that it is recognised before it is read. */ .btn-wa{background:#25D366;color:#0A2A17;border-color:#25D366} .btn-wa:hover{background:#1FBE5A;border-color:#1FBE5A;color:#0A2A17} .wa-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--r); background:#E9FBF0;border:1px solid #9FE3BC;color:var(--ink)} .wa-card:hover{background:#DEF7E8;color:var(--ink)} .wa-card .wa-ico{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#25D366; color:#0A2A17;display:flex;align-items:center;justify-content:center} .wa-card .wa-ico svg{width:24px;height:24px} .foot .wa-link{display:inline-flex;align-items:center;gap:8px} .foot .wa-link svg{width:16px;height:16px} /* .mobar .ico paints a white icon button; the WhatsApp one has to stay green, and it needs the same two-class specificity to say so. */ .mobar .btn-wa{background:#25D366;border-color:#25D366;color:#0A2A17} .mobar .btn-wa svg{width:22px;height:22px} /* ---------- WhatsApp, second pass ---------- */ /* A square icon button, for the header where there is no room for a label. */ .btn-ico{width:44px;padding:0;flex:0 0 44px} .btn-ico.btn-sm{width:40px;flex:0 0 40px} .wa-qr{flex:0 0 132px;width:132px;padding:8px;background:#fff;border-radius:8px; border:1px solid #9FE3BC} .wa-qr img{display:block;width:100%;height:auto} .wa-card .wa-copy{flex:1 1 auto;min-width:0} @media (max-width:760px){ /* tapping is the obvious move on a phone, and nobody scans their own screen */ .wa-qr{display:none} } /* ---------- WhatsApp qualifier ---------- */ .wa-modal{position:fixed;inset:0;z-index:95;background:rgba(30,26,25,.55); display:flex;align-items:center;justify-content:center;padding:20px} .wa-modal[hidden]{display:none} .wa-box{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 40px); overflow:auto;background:var(--white);border-radius:var(--r);padding:30px 30px 26px; box-shadow:0 20px 60px rgba(30,26,25,.28)} .wa-box h3{font-size:21px} .wa-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:none; background:transparent;font-size:24px;line-height:1;color:var(--ink3);cursor:pointer; border-radius:50%} .wa-x:hover{background:var(--fill);color:var(--ink)} .wa-grp{margin-top:22px} .wa-q{font-size:14px;font-weight:600;color:var(--ink)} .wa-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .wa-chip{font-family:var(--sans);font-size:13.5px;line-height:1;padding:10px 15px; border-radius:4px;border:1px solid var(--line);background:var(--white); color:var(--ink2);cursor:pointer;transition:border-color .12s,background .12s,color .12s} .wa-chip:hover{border-color:var(--pine-line);color:var(--ink)} .wa-chip.on{background:var(--pine-tint);border-color:var(--pine);color:var(--pine-deep); font-weight:600} .wa-model{margin-top:8px;font-family:var(--mono);font-size:14px;color:var(--ink);display:inline-block;padding:9px 15px;border-radius:4px;background:var(--pine-tint);border:1px solid var(--pine-on)} .wa-go{margin-top:26px} @media (max-width:560px){ .wa-box{padding:26px 20px 22px} .wa-chip{font-size:13px;padding:9px 13px} } /* ---------- footer identity ---------- */ /* The white variant exists because `background:#fff` inline killed the shorthand that carried the mark. Reverse the artwork instead of painting over it. */ .foot .brand span.mark{background:url(img/logo-mark-white.4cecf602.svg) center/contain no-repeat} .foot .brand .wm i{font-style:normal;color:var(--accent-soft)} /* ---------- specification lines ---------- */ /* Carton, loading quantity and standard are what a buyer scans a card for. */ .card .mono,.spec-tbl .mono{letter-spacing:.01em} .certline{font-size:11px;letter-spacing:.09em} /* ---------- process steps ---------- */ /* Seven across left every caption in a four-line column. Four then three. */ .steps{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:30px} .steps .s{padding:22px 22px 0 22px} .steps .s:nth-child(4n+1){padding-left:0;border-left:none} .steps .s:first-child{padding-left:0;border-left:none} .steps .s:nth-child(4n){padding-right:0} .steps .d{font-size:13.5px} .steps .t{font-size:11.5px;color:var(--ink2)} @media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} .steps .s:nth-child(odd){padding-left:0;border-left:none} .steps .s:nth-child(4n+1){border-left:none} } @media (max-width:560px){ .steps{grid-template-columns:1fr} .steps .s{padding-left:0;border-left:none} } /* ---------- depth ---------- */ /* Two stops each: a tight contact shadow that anchors the edge, and a wide soft one that gives the object its weight. One stop always looks like a filter. */ :root{ --sh-1:0 1px 2px rgba(30,26,25,.05), 0 2px 6px rgba(30,26,25,.04); --sh-2:0 2px 4px rgba(30,26,25,.05), 0 8px 18px rgba(30,26,25,.07); --sh-3:0 4px 10px rgba(30,26,25,.06), 0 16px 36px rgba(30,26,25,.10); --sh-4:0 10px 20px rgba(30,26,25,.08), 0 30px 64px rgba(30,26,25,.16); } /* No shadow on a card. A supplier's catalogue is printed, not floating - the border is the edge. Shadow survives only where something is genuinely above the page: the dropdown and the chat dialog, both declared elsewhere. */ .card,.card-bone{box-shadow:none;transition:border-color .15s ease} a.card:hover,a.card-bone:hover{border-color:var(--pine-line)} .shot{box-shadow:none} .spec-tbl{box-shadow:none;border:1px solid var(--line);border-radius:4px; overflow:hidden;background:var(--white)} .zoom{transition:border-color .15s ease} .zoom:hover{border-color:var(--pine-line)} /* ---------- hero ---------- */ /* Was a four-layer "stage": a radial glow, a perspective floor, a soft contact shadow and a cut-out that tilted with the pointer. It is the most generated- looking thing the site had. A flat photograph on a flat ground instead. */ .hero-stage{position:relative;overflow:hidden;background:var(--fill)} /* Sized by height, never by width: the cut-out is tall and narrow, so a width rule makes it overflow the stage on any short viewport. Centred with margin rather than a translate, because depth.js owns `transform` and the two would fight over it. */ /* `.hero-media img` already sets width/height 100% and object-fit:cover at a higher specificity than a single class, which is why the cut-out was blown up and cropped. Match it. */ .hero-stage img.stage-product{position:absolute;left:0;right:0;bottom:5.5%; margin-inline:auto;height:88%;width:auto;max-width:92%;object-fit:contain; display:block;transform-origin:50% 92%} @media (max-width:860px){ .hero-stage{min-height:430px} .hero-stage img.stage-product{height:84%} } @media (prefers-reduced-motion:reduce){ .card,.card-bone,.zoom{transition:none} a.card:hover,a.card-bone:hover{transform:none} } /* ---------- spacing scale ---------- */ /* A 4px grid, after Carbon. The scale existed only as a pile of one-off pixel values before; naming it is what stops the next section being padded to whatever looked right that afternoon. */ :root{ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:80px; } /* ---------- figures ---------- */ /* Stripe sets tabular figures wherever numbers are compared. A catalogue of carton sizes and container quantities is that case: digits must sit in the same column down twelve rows. The mono face is fixed-width already, but the declaration keeps the table honest if it ever falls back to a system sans. */ .mono,.spec,.stat,.spec-tbl,.certline,.loadplan-figs .v,.supbar-facts .stat{ font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* The plant photographs are the only evidence on the site that the factory is real, and at four-up they were 320px wide - too small to show racking, stock or a floor. Two-up doubles them. */ .plant-grid{gap:var(--s5)} @media (max-width:700px){.plant-grid{grid-template-columns:1fr}} /* ---------- de-AI review additions ---------- */ /* A four-row specification block inside a model tile. Not decoration: frame, wheels, carton and loading are the four things a buyer compares across models, and they were spread over three separate lines before. */ .mini{margin:0;border-top:1px solid var(--line2)} .mini>div{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px; padding:6px 0;border-bottom:1px solid var(--line2)} .mini dt{font-size:11.5px;color:var(--ink3)} .mini dd{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink2)} /* ---------- resources: in preparation ---------- */ /* These were cards linking to guides that do not exist. They keep their place on the page - the subjects are real and a buyer can ask for any of them - but they no longer pretend to be clickable. */ .is-soon{position:relative;background:var(--off);border-style:dashed} .is-soon h3{color:var(--ink2)} .is-soon::after{content:"In preparation";position:absolute;right:16px;top:14px; font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink3)} .is-soon .mono{display:none} /* A button that reads as a text link: the filter reset runs script, so it is a button, but it should not look like a form control sitting in a sidebar. */ .linkish{font:inherit;font-size:12.5px;color:var(--accent);background:none;border:0; padding:0;cursor:pointer;border-bottom:1px solid currentColor} .linkish:hover{color:var(--pine2)} /* ---------- product page: tooling flag ---------- */ /* The four customisation options were a four-card grid, which is the shape this review exists to remove — and the page carried a second one below it. As a table they also gain the column a buyer is really asking about. */ .tool{display:inline-block;margin-left:14px;font-family:var(--sans);font-size:11px; font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:2px;white-space:nowrap} .tool.no{background:var(--pine-tint);color:var(--pine-deep)} .tool.yes{background:var(--fill);color:var(--ink2)} @media (max-width:700px){ .tool{display:block;margin:8px 0 0;width:max-content} } /* Square studio shots in a 3:2 tile were being cropped through the canopy and the wheels. */ .shot.ratio-3x2 img{object-fit:contain;padding:10px} .plain{list-style:none;margin:0;padding:0} .plain li{padding:2px 0} .plain li+li{border-top:1px solid var(--line2);margin-top:4px;padding-top:6px} /* ---------- Web Interface Guidelines ---------- */ /* Source: github.com/vercel-labs/web-interface-guidelines */ /* Keyboard users were tabbing through the whole nav on every page. */ .skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px; background:var(--ink);color:#fff;font-size:14px;border-radius:0 0 4px 0} .skip:focus{left:0} /* Tells the browser to render scrollbars and native controls for a light page. */ :root{color-scheme:light} /* Stops a one- or two-word widow on the last line of a heading. */ h1,h2,h3{text-wrap:balance} .lead,.sub{text-wrap:pretty} /* Removes the 300ms double-tap delay on touch. */ a,button,summary,label,input,select,textarea{touch-action:manipulation} /* The page used to scroll behind the chat dialog once it hit its own end. */ .wa-modal{overscroll-behavior:contain} /* The fixed action bar sat under the home indicator on a notched phone. */ @media (max-width:860px){ .mobar{padding-bottom:calc(12px + env(safe-area-inset-bottom))} body{padding-bottom:calc(78px + env(safe-area-inset-bottom))} } /* ---------- container loading ---------- */ /* Replaces a draggable 3D container that cost 600KB to say what these four numbers say. Four figures on a rule, no card, no canvas. */ .loadinfo{margin-top:48px;padding-top:28px;border-top:1px solid var(--ink)} .loadinfo h3{font-size:17px;margin:0 0 20px} .loadinfo dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0} .loadinfo dl>div{padding-right:28px;border-right:1px solid var(--line)} .loadinfo dl>div:last-child{border-right:0;padding-right:0} .loadinfo dt{font-size:12.5px;color:var(--ink3);margin-bottom:6px} .loadinfo dd{margin:0;font-family:var(--mono);font-size:17px;color:var(--ink)} .loadinfo .micro{margin-top:20px} @media (max-width:700px){ .loadinfo dl{grid-template-columns:1fr 1fr;row-gap:20px} .loadinfo dl>div:nth-child(2n){border-right:0;padding-right:0} } /* ============================================================ Round two — homepage sections Each shape is different on purpose. The sharpest note in the brief was that a page where every section is "title + subtitle + three cards" reads as generated, so density and layout are variables here, not constants. ============================================================ */ /* ---------- hero ---------- */ /* 43 / 57. The product is the larger half and carries no card, no shadow and no gradient behind it — just the off-white ground the shot sits on. */ .hero2{border-bottom:1px solid var(--line)} .hero2-in{max-width:1440px;margin:0 auto;display:grid; grid-template-columns:minmax(0,43fr) minmax(0,57fr);align-items:center} .hero2-copy{padding:104px 56px 104px 40px;max-width:640px;justify-self:end} .hero2 h1{font-size:clamp(34px,4vw,58px);line-height:1.05;letter-spacing:-.03em} .hero2 .lead{max-width:56ch} .hero2-cta{display:flex;gap:12px;flex-wrap:wrap} .hero2-media{margin:0;background:var(--bone);align-self:stretch; display:flex;align-items:center;justify-content:center;min-height:540px} .hero2-media img{width:100%;height:100%;object-fit:cover;object-position:center} /* Inline trust line, not five cards. */ .trustline{font-size:13.5px;color:var(--ink2);display:flex;flex-wrap:wrap; align-items:center;gap:0 14px} .trustline span{width:1px;height:12px;background:var(--line);display:inline-block} /* ---------- proof strip ---------- */ .proof{background:var(--bone);border-bottom:1px solid var(--line);padding:22px 0} .proof p{margin:0;font-size:14px;color:var(--ink2);display:flex;flex-wrap:wrap; align-items:center;gap:0 16px} .proof b{color:var(--ink);font-weight:600} .proof span{width:1px;height:12px;background:var(--line);display:inline-block} /* ---------- categories: one large, four small ---------- */ .catgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto;gap:32px 24px} .cat2{display:block} .cat2.is-feature{grid-column:span 2;grid-row:span 2} .cat2 figure{margin:0 0 16px;background:var(--bone);aspect-ratio:1/1;overflow:hidden} .cat2.is-feature figure{aspect-ratio:auto;height:calc(100% - 96px);min-height:340px} .cat2 img{width:100%;height:100%;object-fit:contain;padding:18px; transition:transform .4s cubic-bezier(.2,.7,.3,1)} .cat2:hover img{transform:scale(1.02)} .cat2 h3{font-size:18px;margin:0 0 4px} .cat2.is-feature h3{font-size:24px} .cat2 .more{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600; color:var(--accent)} /* ---------- featured models: photographs, not cards ---------- */ .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px} .pitem{display:block} .pitem figure{margin:0 0 18px;background:var(--white);aspect-ratio:1/1; overflow:hidden;border:1px solid var(--line)} .pitem img{width:100%;height:100%;object-fit:contain;padding:22px; transition:transform .4s cubic-bezier(.2,.7,.3,1)} .pitem:hover img{transform:scale(1.03)} .pmodel{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink3); margin:0 0 4px} .pitem h3{font-size:18px;margin:0 0 16px} .pfacts{margin:0;border-top:1px solid var(--line)} .pfacts>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px; padding:7px 0;border-bottom:1px solid var(--line2)} .pfacts dt{font-size:12px;color:var(--ink3)} .pfacts dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--ink2)} .pitem .more{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600; color:var(--accent)} /* ---------- manufacturing: full-bleed photograph beside figures ---------- */ .mfg2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;border-bottom:1px solid var(--line)} .mfg2-shot{margin:0;overflow:hidden;background:var(--bone);min-height:520px} .mfg2-shot img{width:100%;height:100%;object-fit:cover} .mfg2-copy{padding:104px 40px 104px 64px;max-width:640px;align-self:center} .bigfigs{display:flex;flex-wrap:wrap;gap:0;margin:0} .bigfigs>div{padding-right:40px;margin-right:40px;border-right:1px solid var(--line)} .bigfigs>div:last-child{border-right:0;margin-right:0;padding-right:0} .bigfigs dd{margin:0;font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.1} .bigfigs dt{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--ink3);margin-top:6px} /* ---------- two-column split, three payloads ---------- */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:72px; align-items:start} .split-l{max-width:440px} /* Definition rows, not a card wall. */ .custom,.markets{margin:0;border-top:1px solid var(--ink)} .custom>div,.markets>div{display:grid;grid-template-columns:150px minmax(0,1fr); gap:24px;padding:16px 0;border-bottom:1px solid var(--line)} .custom dt,.markets dt{font-size:14.5px;font-weight:600} .custom dd,.markets dd{margin:0;font-size:14.5px;color:var(--ink2)} .flag{display:inline-block;margin-left:12px;font-size:11px;font-weight:600; letter-spacing:.03em;padding:2px 7px;border-radius:2px;white-space:nowrap; background:var(--pine-tint);color:var(--pine-deep)} .flag.is-t{background:var(--fill);color:var(--ink2)} /* ---------- process: a track, not seven cards ---------- */ .track{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)} .track li{padding:20px 20px 0 0;position:relative} .track li::before{content:"";position:absolute;top:-1px;left:0;width:24px;height:2px; background:var(--accent)} .track .n{font-family:var(--mono);font-size:11px;color:var(--ink3)} .track h3{font-size:15px;margin:8px 0 5px} .track p{margin:0;font-size:13px;line-height:1.5;color:var(--ink2)} .track .when{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px; color:var(--ink3)} /* ---------- factory: four photographs edge to edge ---------- */ .facstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px; background:var(--line)} .facstrip figure{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3; background:var(--bone)} .facstrip img{width:100%;height:100%;object-fit:cover} .facstrip figcaption{position:absolute;inset:auto 0 0 0;padding:26px 16px 12px; font-size:12px;font-weight:500;color:#fff; background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0))} /* ---------- FAQ ---------- */ .faq2{border-top:1px solid var(--ink)} .faq2 details{border-bottom:1px solid var(--line)} .faq2 summary{list-style:none;cursor:pointer;padding:18px 0;font-size:16.5px; font-weight:500;display:flex;justify-content:space-between;gap:24px} .faq2 summary::-webkit-details-marker{display:none} .faq2 summary::after{content:"+";color:var(--ink3);font-weight:400;font-size:19px;line-height:1} .faq2 details[open] summary::after{content:"\2013"} .faq2 details[open] summary{color:var(--accent)} .faq2 details p{padding:0 0 20px;max-width:72ch} /* ---------- RFQ ---------- */ .rfq2{background:#fff;padding:32px;border-radius:4px} .rfq2 .field span{color:var(--ink2)} /* .rfq2 is a white card sitting inside a .b-ink band, so the .b-ink text colours below would paint pale text onto white -- the WhatsApp link was #fff on #fff, contrast 1.00, i.e. invisible. Everything inside the card reads against white. */ .b-ink .rfq2 .micro{color:var(--ink2)} .b-ink .rfq2 .textlink{color:var(--ink);border-bottom-color:var(--line)} .b-ink .rfq2 .textlink:hover{color:var(--accent)} .f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .b-ink .sub,.b-ink .micro{color:#BFBFBA} .b-ink .eyebrow{color:var(--accent-soft)} .b-ink .textlink{color:#fff;border-bottom-color:rgba(255,255,255,.4)} /* ---------- rhythm: bands are not all one height ---------- */ .band{padding:104px 0} .bg-soft{background:var(--bone);border-top:1px solid var(--line); border-bottom:1px solid var(--line)} @media (max-width:1100px){ .hero2-in{grid-template-columns:1fr} .hero2-copy{padding:64px 32px;max-width:none;justify-self:stretch} .hero2-media{min-height:380px} .mfg2{grid-template-columns:1fr} .mfg2-shot{min-height:340px} .mfg2-copy{padding:64px 32px;max-width:none} .split{grid-template-columns:1fr;gap:40px} .split-l{max-width:none} .track{grid-template-columns:repeat(4,minmax(0,1fr))} .track li{padding-bottom:24px} .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .cat2.is-feature{grid-column:span 2;grid-row:auto} .cat2.is-feature figure{height:auto;aspect-ratio:16/9} .band{padding:80px 0} } @media (max-width:860px){ .facstrip{grid-template-columns:1fr 1fr} } @media (max-width:620px){ .hero2 h1{font-size:clamp(30px,8vw,40px)} .hero2-copy,.mfg2-copy{padding:48px 20px} .pgrid,.catgrid{grid-template-columns:1fr;gap:36px} .cat2.is-feature{grid-column:auto} .track{grid-template-columns:1fr 1fr} .f2{grid-template-columns:1fr} .bigfigs>div{padding-right:0;margin-right:0;border-right:0;width:100%; padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)} .bigfigs>div:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .band{padding:64px 0} .rfq2{padding:22px} .custom>div,.markets>div{grid-template-columns:1fr;gap:6px} } /* ---------- round two: corrections found on review ---------- */ /* The tiles are anchors, so every category and model name inherited the link colour and the page read as if all of it were clickable. The accent belongs on the call to action inside the tile, not on the heading. */ .cat2 h3,.pitem h3,.cat2 .small,.pitem .pmodel{color:var(--ink)} .cat2 .small{color:var(--ink2)} .cat2:hover h3,.pitem:hover h3{color:var(--accent)} /* A bordered white box around a product photograph is a card by another name. The photograph's own white ground against the soft grey band is the edge. */ /* The figure's ground has to match the ground the product was composited onto (#F5F4F0), or the contain-padding shows as a white frame around a grey photograph — which is the card this was meant to remove, drawn in reverse. */ .pitem figure{border:0;background:var(--bone)} /* The three figures wrapped onto two lines and left a divider hanging. */ .bigfigs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start; align-items:start;gap:0} .bigfigs>div{padding-right:36px;margin-right:36px} .bigfigs dd{font-size:clamp(22px,2vw,30px);white-space:nowrap} /* The headline ran to four lines in a column that was narrower than it needed to be. */ .hero2-copy{max-width:700px} .hero2 h1{max-width:13ch} @media (min-width:1200px){.hero2 h1{max-width:none}} /* ---------- product detail: procurement summary ---------- */ /* Six rows a buyer reads before anything else. Not six cards. */ .psum{margin:28px 0 0;border-top:1px solid var(--ink)} .psum>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px; padding:11px 0;border-bottom:1px solid var(--line2)} .psum dt{font-size:13px;color:var(--ink3)} .psum dd{margin:0;font-family:var(--mono);font-size:13.5px;color:var(--ink)} /* ---------- specifications: two columns, rules, no cards ---------- */ .spectable{margin:0;border-top:1px solid var(--ink)} .spectable>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px; padding:13px 0;border-bottom:1px solid var(--line2)} .spectable dt{font-size:14px;color:var(--ink2)} .spectable dd{margin:0;font-family:var(--mono);font-size:14px;color:var(--ink)} /* ---------- product features: two plain columns ---------- */ .features{list-style:none;margin:0;padding:0;columns:2;column-gap:48px} .features li{padding:8px 0;border-bottom:1px solid var(--line2);font-size:14.5px; break-inside:avoid} @media (max-width:700px){.features{columns:1}} /* ---------- a model with no photograph yet ---------- */ /* Type, not a grey box. A placeholder image tells a buyer the catalogue is unfinished; a sentence tells them to ask. */ .nophoto{display:flex;align-items:center;justify-content:center;text-align:center; background:var(--bone);border:1px dashed var(--line);border-radius:4px; padding:40px 28px;min-height:280px} .nophoto p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink2);max-width:28ch} .spec-tbl .th .nocode{display:flex;align-items:center;justify-content:center; width:220px;height:220px;background:var(--bone);border:1px dashed var(--line); border-radius:4px;font-family:var(--mono);font-size:13px;color:var(--ink3)} @media (max-width:900px){.spec-tbl .th .nocode{width:150px;height:150px}} /* ---------- hero and strip refinements ---------- */ /* The headline ran to four lines at 1440 because the copy column is 43% of the page. Slightly tighter tracking and a wider column bring it to three without shrinking the type. */ @media (min-width:1200px){ .hero2-copy{max-width:760px;padding-right:72px} .hero2 h1{font-size:clamp(40px,3.6vw,54px);letter-spacing:-.032em} } /* "Worldwide export" was dropping onto a line of its own. */ .trustline{max-width:none;row-gap:6px} /* The proof strip alternated ink and grey word by word, which read as stripes rather than as a sentence. One colour, with the figures carrying the weight. */ .proof p{color:var(--ink2)} .proof b{color:var(--ink);font-weight:600} .proof>.wrap>p{gap:0 18px} /* ---------- compliance: information, not a banner ---------- */ /* Was a solid coral panel — the heaviest thing on a product page, for the section the brief says to de-emphasise. */ .compl{margin:20px 0 0;border-top:1px solid var(--ink)} .compl>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px; padding:12px 0;border-bottom:1px solid var(--line2)} .compl dt{font-size:14px;color:var(--ink)} .compl dd{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink3); text-align:right;white-space:nowrap} /* only a qualified status is coloured, and only in the warning red that is reserved for exactly this */ .compl dd.q{color:var(--clay-text)} /* The specification table read as a stack of cards because every label sat on a grey fill. Labels are type; the rule is the structure. */ .kv{border:0;border-top:1px solid var(--ink);border-radius:0;background:transparent} .kv .r{grid-template-columns:200px minmax(0,1fr);border-bottom:1px solid var(--line2)} .kv .k{background:transparent;padding:13px 20px 13px 0;color:var(--ink2)} .kv .v{padding:13px 0} /* ---------- catalogue grid ---------- */ /* A spreadsheet is not a catalogue and a shop is not a catalogue either. Large photograph, model, type, two facts a buyer compares on, one link. No price: this is a trade site. */ .catbar{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line); padding-bottom:20px} .catbar button{font:inherit;font-size:14px;padding:8px 15px;border-radius:4px; border:1px solid var(--line);background:transparent;color:var(--ink2);cursor:pointer; transition:border-color .14s,color .14s,background .14s} .catbar button:hover{border-color:var(--ink3);color:var(--ink)} .catbar button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 32px} .mcard{display:block} .mcard figure{margin:0 0 18px;background:var(--bone);aspect-ratio:1/1;overflow:hidden; display:flex;align-items:center;justify-content:center} .mcard img{width:100%;height:100%;object-fit:contain;padding:24px; transition:transform .4s cubic-bezier(.2,.7,.3,1)} .mcard:hover img{transform:scale(1.03)} .mcard .none{font-family:var(--mono);font-size:13px;color:var(--ink3);text-align:center; padding:0 24px;line-height:1.6} .mcard .code{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink3)} .mcard h3{font-size:17px;margin:4px 0 14px;color:var(--ink)} .mcard:hover h3{color:var(--accent)} .mcard dl{margin:0;border-top:1px solid var(--line)} .mcard dl>div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:7px 0; border-bottom:1px solid var(--line2)} .mcard dt{font-size:12px;color:var(--ink3)} .mcard dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--ink2)} .mcard .more{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600; color:var(--accent)} .mcount{font-size:13px;color:var(--ink3);margin:24px 0 32px} @media (max-width:1000px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.mgrid{grid-template-columns:1fr;gap:40px}} /* ---------- factory: stations without a photograph ---------- */ .stations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px} .station figure{margin:0 0 16px;aspect-ratio:3/2;overflow:hidden;background:var(--bone)} .station img{width:100%;height:100%;object-fit:cover} .station h3{font-size:16px;margin:0 0 6px} .stations-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px; border-top:1px solid var(--line);padding-top:28px;margin-top:48px} .stations-text h3{font-size:16px;margin:0 0 6px} @media (max-width:860px){ .stations,.stations-text{grid-template-columns:1fr} } /* A section that is only separated by a rule, for where a coral band used to be. */ /* The model name is the first heading under the page h1, so it is an h2; it should not inherit the h2 display size. */ /* The model name is the first heading under the page h1, so it is an h2 — but it should not inherit the h2 display size, and it must not inherit the link colour from the anchor that wraps the whole tile. */ .mcard .mname{font-size:17px;line-height:1.3;letter-spacing:-.01em; margin:4px 0 14px;color:var(--ink);font-weight:600} .mcard:hover .mname{color:var(--accent)} /* A section separated by a rule, where a coral band used to be. */ .band.rule{border-top:1px solid var(--line)} /* The in-page navigation moved from a dark ground to a light one; its links were still written for white text. */ .linklist-ink a{color:var(--ink2)} .linklist-ink a:hover{color:var(--accent)} /* ---------- test report ---------- */ /* The one row on a product page that used to say "to confirm" and now carries a laboratory, a number and a date. It gets a little more weight than the rows around it because it is the only one a buyer can independently verify. */ .report{margin:24px 0 0;padding:18px 20px;background:var(--bone); border-left:2px solid var(--accent);border-radius:0 4px 4px 0} .report p{margin:0} .report .lab{font-size:14px;font-weight:600;color:var(--ink)} .report .meta{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:6px; line-height:1.7} .report a{color:var(--accent);font-weight:600;border-bottom:1px solid currentColor} .report .note{font-size:12px;color:var(--ink3);margin-top:10px;line-height:1.55} /* ---------- header document shelf ---------- */ /* Two PDF routes sit together: the catalogue and the test reports. Below 900px the bar has no room and both are reachable from the pages themselves. */ @media (max-width:900px){ .navcta .textlink{display:none} } /* the report row in the procurement summary carries the only link in that table */ .psum dd a{color:var(--accent);border-bottom:1px solid currentColor;font-weight:600} .psum dd a:hover{color:var(--pine2)} /* ---------- test report: the document itself ---------- */ /* A typed summary of a report is not evidence — anyone can type one. The laboratory's letterhead, accreditation marks, signature and verification QR code are. The rendered first page is the link. */ .rdoc{margin-top:24px} .rdoc a{display:block;border:1px solid var(--line);background:var(--white); transition:border-color .15s ease} .rdoc a:hover{border-color:var(--accent)} .rdoc img{width:100%;height:auto;display:block} .rdoc .cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:12px 14px;border-top:1px solid var(--line2);font-size:13px;color:var(--ink2)} .rdoc .cap b{color:var(--ink);font-weight:600} .rdoc .cap span{font-family:var(--mono);font-size:11.5px;color:var(--accent); white-space:nowrap} .rdoc .note{font-size:12px;color:var(--ink3);line-height:1.55;margin-top:10px} /* the compliance page shows all of them together */ .rwall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .rwall figure{margin:0} .rwall a{display:block;border:1px solid var(--line);background:var(--white); transition:border-color .15s ease} .rwall a:hover{border-color:var(--accent)} .rwall img{width:100%;height:auto;display:block} .rwall figcaption{padding:10px 12px;border-top:1px solid var(--line2);font-size:12.5px} .rwall figcaption b{display:block;color:var(--ink)} .rwall figcaption span{color:var(--ink3);font-family:var(--mono);font-size:11px} @media (max-width:900px){.rwall{grid-template-columns:1fr 1fr}} @media (max-width:560px){.rwall{grid-template-columns:1fr}} /* ---------- buyer's guide article ---------- */ /* A reading column, not a grid of cards. One measure, left aligned, with the tables allowed to run wider than the prose because they are data. */ .gwrap{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:64px; align-items:start;justify-content:space-between} .guide{max-width:720px;min-width:0} .guide h2{font-size:25px;line-height:1.25;letter-spacing:-.012em;color:var(--ink); margin:48px 0 0;padding-top:22px;border-top:1px solid var(--line)} .guide h2:first-child{margin-top:0;padding-top:0;border-top:none} .guide h3{font-size:17px;line-height:1.35;color:var(--ink);margin:30px 0 0} .guide p{margin:15px 0 0;font-size:16.5px;line-height:1.72;color:var(--ink2)} .guide p.first{font-size:18.5px;line-height:1.6;color:var(--ink)} .guide p.cap{font-size:13px;line-height:1.6;color:var(--ink3);margin-top:12px} .guide strong{color:var(--ink);font-weight:600} .guide em{font-style:italic} .guide ul{margin:15px 0 0;padding:0 0 0 18px;list-style:none} .guide ul li{position:relative;margin-top:10px;font-size:16.5px;line-height:1.72;color:var(--ink2)} .guide ul li::before{content:"";position:absolute;left:-18px;top:11px;width:6px;height:1px; background:var(--ink3)} .guide a{color:var(--accent);border-bottom:1px solid rgba(194,74,70,.35)} .guide a:hover{border-bottom-color:currentColor} .nb{white-space:nowrap} .gtab{width:100%;border-collapse:collapse;margin-top:24px;font-size:14px} .gtab th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink);font-weight:500; border-bottom:1px solid var(--ink);padding:0 14px 9px 0;vertical-align:bottom} .gtab td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line2);color:var(--ink2); vertical-align:top;line-height:1.55} .gtab tr td:first-child{color:var(--ink);font-weight:600} .gtab th:last-child,.gtab td:last-child{padding-right:0} .gtab .num{font-family:var(--mono);font-size:12.5px;white-space:nowrap;text-align:right} .gtab th.num{text-align:right} .gnote{margin-top:26px;padding:17px 22px;background:var(--bone); border-left:2px solid var(--accent)} .gnote p{margin:0;font-size:15px;line-height:1.66} .gnote p+p{margin-top:8px} .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase; color:var(--ink3)} .crumb a{color:var(--ink2)} .crumb a:hover{color:var(--accent)} .gmeta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink3); margin-top:26px;padding-top:14px;border-top:1px solid var(--line2)} /* the article rail: the other guides, as a plain list */ .grail{position:sticky;top:96px;font-size:13.5px} .grail p.h{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--ink3);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)} .grail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .grail a{color:var(--ink);line-height:1.45;display:block} .grail a:hover{color:var(--accent)} @media (max-width:1040px){ .gwrap{grid-template-columns:1fr;gap:48px} .grail{position:static;border-top:1px solid var(--line);padding-top:28px} .grail ul{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px} } @media (max-width:620px){ .guide h2{font-size:22px} .guide p,.guide ul li{font-size:16px} .gtab{font-size:13px} .gtab td,.gtab th{padding-right:10px} .grail ul{grid-template-columns:1fr} } /* a resources card that leads somewhere */ a.card.is-live{display:block;transition:border-color .15s ease,background .15s ease} a.card.is-live:hover{border-color:var(--accent)} a.card.is-live h3{color:var(--ink)} /* scoped to main: the footer uses .linklist too, on a dark ground */ main .linklist a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px} main .linklist a:hover{color:var(--accent);border-bottom-color:currentColor} main .linklist .soon{font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink3);margin-left:8px;white-space:nowrap} /* ---------- language switcher ---------- */ /* A plain select, because it is a list of eight and the header has no room for eight links. It is a real