@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2")} /* SUNY website: shared styles Royal blue (--blue) for the trust bar, buttons and highlights; one shade deeper (--blue-dark) for the header and the call to action. */ :root{ --navy:#0B2136; --ink-2:#2A4C6B; --ink-3:#446A89; --blue:#1450B4; --blue-dark:#0E3F93; --cyan:#34B1E2; /* royal blue, one shade deeper, glow accent */ --bg:#FBFDFF; --bg-alt:#E7F1F8; --ice:#DBEBF5; --line:#C3D9EC; --wrap:1200px; --pad:24px; --radius:12px; --glow:0 0 24px rgba(52,177,226,.35); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6;color:var(--navy);background:var(--bg)} img{max-width:100%;height:auto;display:block} a{color:var(--blue)} a:hover{color:var(--blue-dark)} h1,h2,h3,p{margin:0} :focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} .wrap{width:100%;max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)} .skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:100} .skip:focus{left:8px;top:8px} /* ---------- buttons ---------- */ .btn{display:inline-block;padding:16px 32px;border-radius:999px;border:1.5px solid transparent;font-size:17px;font-weight:700;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;transition:background .15s,box-shadow .15s,color .15s} .btn--primary{background:var(--blue);color:#fff} .btn--primary:hover{background:var(--blue-dark);color:#fff;box-shadow:var(--glow)} .btn--ghost{background:#fff;border-color:var(--blue);color:var(--blue)} .btn--ghost:hover{background:var(--blue);color:#fff} .btn--light{background:#fff;color:var(--blue-dark);padding:20px 40px;font-size:18px} .btn--light:hover{background:var(--cyan);color:var(--navy)} .btn--sm{padding:12px 24px;font-size:15px} /* ---------- header (deep royal blue) ---------- */ .site-header{position:sticky;top:0;z-index:50;background:var(--blue-dark);box-shadow:0 1px 0 rgba(255,255,255,.08)} .site-header__in{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:24px} .site-logo img{height:40px;width:auto} .site-nav{display:flex;align-items:center;gap:40px} .site-nav a:not(.btn){padding:26px 0 22px;border-bottom:3px solid transparent;font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:#fff} .site-nav a:not(.btn):hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)} .site-nav a[aria-current="page"]{border-bottom-color:var(--cyan);font-weight:700} .site-nav .btn{background:#fff;color:var(--blue-dark)} .site-nav .btn:hover{background:var(--cyan);color:var(--navy);box-shadow:none} .nav-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:10px;background:transparent;cursor:pointer} .nav-toggle span{display:block;width:20px;height:2px;margin:4px auto;background:#fff} @media (max-width:900px){ .nav-toggle{display:block} .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 20px;background:var(--blue-dark);box-shadow:0 12px 24px rgba(11,33,54,.25)} .site-nav.is-open{display:flex} .site-nav a:not(.btn){padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16)} .site-nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.16);color:var(--cyan)} .site-nav .btn{margin-top:16px} } /* ---------- hero (home) and page banners ---------- Banner art is bright, subject on the right, clear space on the left. Text sits left in navy; a white fade keeps it readable when the image crops. */ .hero,.banner{position:relative;background-color:var(--bg-alt);display:flex;align-items:center;background-color:var(--bg-alt);background-position:right center;background-size:cover;background-repeat:no-repeat} .hero{min-height:clamp(340px,30vw,470px)} .banner{min-height:clamp(240px,24vw,360px)} .hero::before,.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,253,255,.96) 0%,rgba(251,253,255,.88) 38%,rgba(251,253,255,0) 62%)} .hero__in,.banner__in{position:relative;padding-top:48px;padding-bottom:48px} .hero__text,.banner__text{display:flex;flex-direction:column;gap:20px;max-width:min(520px,42vw)} .hero__text{gap:16px;max-width:min(560px,40vw)} .hero__in{z-index:5;padding-top:40px;padding-bottom:40px} .eyebrow{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)} .hero h1{font-size:clamp(25px,2.25vw,33px);line-height:1.2;font-weight:700;letter-spacing:-.015em} .banner h1{font-size:clamp(26px,2.6vw,36px);line-height:1.2;font-weight:700;letter-spacing:-.015em} .rule{width:72px;height:4px;background:var(--blue)} .hero p,.banner p{font-size:clamp(16px,1.2vw,17px);color:var(--ink-2);max-width:440px} .hero .hsearch{max-width:min(440px,38vw)} .hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:4px} @media (max-width:760px){ .hero,.banner{background-position:72% center} .hero::before,.banner::before{background:linear-gradient(90deg,rgba(251,253,255,.95) 0%,rgba(251,253,255,.84) 60%,rgba(251,253,255,.45) 100%)} .hero__text,.banner__text{max-width:none} .hero .hsearch{max-width:none} .hero__actions .btn{flex:1 1 auto} } /* ---------- trust bar (royal blue) ---------- */ .trust{background:var(--blue);color:#fff} .trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:22px;padding-bottom:22px} .trust__item{padding:0 28px;border-left:1px solid rgba(255,255,255,.28)} .trust__item:first-child{padding-left:0;border-left:0} .trust__num{font-size:clamp(22px,2vw,30px);line-height:1;font-weight:700;color:#fff} .trust__label{margin-top:4px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ice)} @media (max-width:760px){ .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0} .trust__item{padding:0 20px} .trust__item:nth-child(odd){padding-left:0;border-left:0} } /* ---------- sections ---------- */ .section{padding:88px 0} .section--alt{background:var(--bg-alt)} .section__head{display:flex;flex-direction:column;gap:12px;max-width:720px;margin-bottom:48px} .section__head h2{font-size:clamp(24px,2.3vw,31px);line-height:1.25;font-weight:700;letter-spacing:-.015em} .section__head p{color:var(--ink-2)} @media (max-width:760px){.section{padding:64px 0}.section__head{margin-bottom:32px}} .grid{display:grid;gap:24px} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid--6{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px} @media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:520px){.grid--4{grid-template-columns:1fr}.grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}} /* image + title + keywords card */ .card{display:flex;flex-direction:column;gap:16px;color:inherit;text-decoration:none} .card__media{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--bg-alt)} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s} a.card:hover .card__media img{transform:scale(1.03)} .card__media--wide{aspect-ratio:7/5} .card h3{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .card p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2)} a.card:hover h3{color:var(--blue)} /* missing-image placeholder: replace with the real COS image */ .todo-img{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:16px;border:1.5px dashed #86ABCB;border-radius:10px;background:var(--bg-alt);font-size:14px;font-weight:500;text-align:center;color:var(--ink-3)} /* category tiles */ .tile{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);font-size:17px;font-weight:700;color:var(--navy);text-decoration:none;transition:border-color .15s,box-shadow .15s} .tile:hover{border-color:var(--cyan);box-shadow:var(--glow);color:var(--blue)} .tile svg{width:56px;height:56px;stroke:var(--blue);fill:none} /* ---------- call to action ---------- */ .cta{background:var(--blue-dark);color:#fff} .cta__in{display:flex;align-items:center;justify-content:space-between;gap:48px;padding-top:80px;padding-bottom:80px} .cta h2{font-size:clamp(24px,2.3vw,31px);line-height:1.2;font-weight:700} .cta p{margin-top:12px;font-size:18px;color:var(--ice);max-width:640px} @media (max-width:760px){.cta__in{flex-direction:column;align-items:flex-start;gap:28px;padding-top:56px;padding-bottom:56px}} /* ---------- footer ---------- */ .site-footer{background:var(--navy);color:var(--ice);font-size:15px} .site-footer__grid{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:48px;padding-top:64px;padding-bottom:48px} .site-footer__grid--3{grid-template-columns:1.3fr minmax(0,.8fr) minmax(0,1.4fr)} .site-footer img{height:40px;width:auto;margin-bottom:18px} .site-footer h2{margin-bottom:14px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)} .site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .site-footer a{color:var(--ice);text-decoration:none} .site-footer a:hover{color:#fff;text-decoration:underline} .site-footer__about{color:#B4D7EF} .site-footer__legal{padding-top:22px;padding-bottom:22px;border-top:1px solid var(--ink-2);font-size:13px;color:#86ABCB} @media (max-width:900px){.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}} @media (max-width:520px){.site-footer__grid{grid-template-columns:1fr}} /* ---------- category tiles with product photo (home) ---------- */ .grid--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px} @media (max-width:1000px){.grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:520px){.grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}} .cat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--navy);text-decoration:none;transition:border-color .15s,box-shadow .15s} .cat:hover{border-color:var(--cyan);box-shadow:var(--glow);color:var(--blue)} .cat__media{aspect-ratio:1/1;background:#fff;padding:10px} .cat__media img{width:100%;height:100%;object-fit:contain;transition:transform .3s} .cat:hover .cat__media img{transform:scale(1.04)} .cat__body{padding:14px 16px 18px;border-top:1px solid var(--ice);background:var(--bg)} .cat__name{font-size:18px;font-weight:700;line-height:1.2} .cat__count{margin-top:4px;font-size:14px;color:var(--ink-3)} /* ---------- product page ---------- */ .catalog{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start} .filters{position:sticky;top:100px;display:flex;flex-direction:column;gap:32px} .filters h2{margin-bottom:8px;padding:0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .filters ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .filter-btn{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:11px 14px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:16px;font-weight:500;text-align:left;color:var(--navy);cursor:pointer} .filter-btn:hover{background:var(--bg-alt)} .filter-btn[aria-pressed="true"]{background:var(--blue);color:#fff;font-weight:700} .filter-btn span{font-size:13px;opacity:.75} .field{display:flex;flex-direction:column;gap:6px;padding:0 14px} .field label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .field input,.field select{width:100%;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:16px;color:var(--navy)} .catalog__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;color:var(--ink-2)} .catalog__bar small{font-size:14px;color:var(--ink-3)} .products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .product{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;font:inherit;text-align:left;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s} .product:hover{border-color:var(--cyan);box-shadow:var(--glow)} .product__media{aspect-ratio:1/1;padding:12px;background:#fff} .product__media img{width:100%;height:100%;object-fit:contain} .product__body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;border-top:1px solid var(--ice);background:var(--bg)} .product__cat{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)} .product__model{font-size:20px;font-weight:700} .product__meta{font-size:14px;color:var(--ink-3)} .products__empty{grid-column:1/-1;padding:48px 24px;border:1.5px dashed #86ABCB;border-radius:var(--radius);text-align:center;color:var(--ink-2)} .more{display:flex;justify-content:center;margin-top:40px} @media (max-width:1100px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:820px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.products{gap:14px}.product__model{font-size:17px}.catalog__bar small{display:none}} /* product detail dialog */ .sheet{width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:16px;color:var(--navy);box-shadow:0 24px 64px rgba(11,33,54,.35)} .sheet::backdrop{background:rgba(11,33,54,.55)} .sheet__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} .sheet__media{display:flex;align-items:center;justify-content:center;padding:24px;background:#fff} .sheet__media img{width:100%;max-width:420px;height:auto} .sheet__body{display:flex;flex-direction:column;gap:16px;padding:32px;background:var(--bg)} .sheet__body h2{font-size:32px;line-height:1.1;font-weight:700} .sheet table{width:100%;border-collapse:collapse;font-size:15px} .sheet th,.sheet td{padding:9px 0;border-top:1px solid var(--ice);text-align:left;vertical-align:top} .sheet th{width:42%;font-weight:500;color:var(--ink-3)} .sheet td{font-weight:600} .sheet__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px} .sheet__close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:22px;line-height:1;color:var(--navy);cursor:pointer} .sheet__note{font-size:13px;color:var(--ink-3)} @media (max-width:760px){.sheet__in{grid-template-columns:1fr}.sheet__media img{max-width:240px}.sheet__body{padding:24px}} /* ---------- carousels (home: by type, by size) ---------- */ .carousel + .carousel{margin-top:44px} .carousel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px} .carousel__head h3{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)} .carousel__nav{display:flex;gap:8px} .carousel__btn{width:40px;height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:24px;line-height:1;color:var(--navy);cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s} .carousel__btn:hover{border-color:var(--cyan);color:var(--blue);box-shadow:var(--glow)} .carousel.is-static .carousel__nav{visibility:hidden} .carousel__head--bare{justify-content:flex-end;margin-top:-72px;margin-bottom:32px;min-height:40px} .carousel.is-static .carousel__head--bare{display:none} .carousel__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 12px;margin:-4px -2px 0} .carousel__track::-webkit-scrollbar{display:none} .pick{flex:0 0 184px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;padding:14px 12px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-align:center;text-decoration:none;color:var(--navy);transition:border-color .15s,box-shadow .15s} .pick:hover{border-color:var(--cyan);box-shadow:var(--glow);color:var(--blue)} .pick__media{width:132px;height:132px;margin-bottom:10px} .pick__media img{width:100%;height:100%;object-fit:contain} .pick__name{font-size:17px;font-weight:700;line-height:1.2} .pick__sub{margin-top:4px;font-size:13px;color:var(--ink-3)} @media (max-width:520px){.pick{flex-basis:150px}.pick__media{width:108px;height:108px}} /* carousel of large cards (Why SUNY, Design by Application): four across on desktop, scrolls when there are more */ .carousel--cards .carousel__track{gap:24px} .carousel--cards .carousel__track > .card{flex:0 0 calc((100% - 72px)/4);scroll-snap-align:start} @media (max-width:1000px){.carousel--cards .carousel__track > .card{flex-basis:calc((100% - 24px)/2)}} @media (max-width:520px){.carousel--cards .carousel__track > .card{flex-basis:80%}} @media (max-width:760px){.carousel__head--bare{margin-top:-16px;margin-bottom:16px}} /* three large photo cards per view (Design by Application): with four or more items it scrolls and auto-advances */ .carousel--three .carousel__track > .card{flex-basis:calc((100% - 48px)/3)} .carousel--three .card__media--wide{aspect-ratio:3/2} @media (max-width:1000px){.carousel--three .carousel__track > .card{flex-basis:calc((100% - 24px)/2)}} @media (max-width:520px){.carousel--three .carousel__track > .card{flex-basis:80%}} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* medium widths: the banner art sits closer to the text, so the white fade reaches further */ @media (min-width:761px) and (max-width:1250px){ .hero::before,.banner::before{background:linear-gradient(90deg,rgba(251,253,255,.96) 0%,rgba(251,253,255,.93) 52%,rgba(251,253,255,0) 80%)} .hero__text{max-width:min(500px,50vw)} .hero .hsearch{max-width:none} } /* ---------- hero search ---------- */ .hsearch{display:flex;align-items:center;height:52px;background:#fff;border:1.5px solid var(--line);border-radius:999px;box-shadow:0 6px 20px rgba(11,33,54,.08);transition:border-color .15s,box-shadow .15s} .hsearch:focus-within{border-color:var(--cyan);box-shadow:var(--glow)} .hsearch input{flex:1;min-width:0;height:100%;padding:0 8px 0 22px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:16px;color:var(--navy);outline:0} .hsearch input::placeholder{color:var(--ink-3)} .hsearch button{display:flex;align-items:center;justify-content:center;flex:0 0 44px;height:44px;margin-right:3px;border:0;border-radius:999px;background:var(--blue);color:#fff;cursor:pointer} .hsearch button:hover{background:var(--blue-dark)} /* ---------- size and type tags on product photos ---------- */ .tags{display:flex;flex-wrap:wrap;gap:6px} .tags--inline{position:static;margin-bottom:10px;max-width:none} .tag{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.03em;color:var(--ink-2)} .tag--size{background:var(--blue);border-color:var(--blue);color:#fff} @media (max-width:520px){.tag{padding:2px 7px;font-size:11px}.tags{gap:4px}} /* ---------- contact page ---------- */ .contact{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:start} @media (max-width:1000px){.contact{grid-template-columns:1fr;gap:48px}} .inquiry{padding:32px;background:#fff;border:1px solid var(--line);border-radius:16px} @media (max-width:520px){.inquiry{padding:20px}} .tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;margin-bottom:28px;background:var(--bg-alt);border-radius:999px} .tab{padding:13px 12px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:16px;font-weight:700;color:var(--ink-2);cursor:pointer} .tab[aria-selected="true"]{background:var(--blue);color:#fff} #inquiry-form,#panel-project,#panel-sample{display:flex;flex-direction:column;gap:18px} #panel-project[hidden],#panel-sample[hidden],#inquiry-form[hidden]{display:none} .fset{margin:0;padding:0;border:0;min-width:0} .fset legend,.ffield label{display:block;margin-bottom:8px;padding:0;font-size:14px;font-weight:700;color:var(--ink-2)} .fset legend small,.ffield label small{font-weight:500;color:var(--ink-3)} .ffield abbr{color:var(--blue);text-decoration:none} .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:520px){.frow{grid-template-columns:1fr}} .ffield input,.ffield select,.ffield textarea,.picker input{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:16px;color:var(--navy)} .ffield textarea{resize:vertical} .ffield input:focus,.ffield select:focus,.ffield textarea:focus,.picker input:focus{outline:0;border-color:var(--cyan);box-shadow:var(--glow)} .choices{display:flex;flex-wrap:wrap;gap:8px} .choice input{position:absolute;opacity:0} .choice span{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;color:var(--navy);cursor:pointer} .choice input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff} .choice input:focus-visible + span{outline:3px solid var(--cyan);outline-offset:2px} .picker{display:flex;gap:8px} .picker .btn{flex:0 0 auto} .fhint{font-size:14px;color:var(--ink-3)} .ferror{padding:12px 14px;border-radius:8px;background:#FDECEC;color:#8A1C1C;font-size:15px;font-weight:600} .chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .chip{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)} .chip img{width:36px;height:36px;object-fit:contain} .chip span{flex:1} .chip strong{display:block;line-height:1.2} .chip small{font-size:13px;color:var(--ink-3)} .chip button{width:32px;height:32px;border:0;border-radius:999px;background:transparent;font-size:20px;color:var(--ink-3);cursor:pointer} .chip button:hover{background:var(--bg-alt);color:var(--navy)} .fdone{display:flex;flex-direction:column;gap:14px} .fdone[hidden],#inquiry-form[hidden],.tabs[hidden]{display:none} .fdone h2{font-size:26px;font-weight:700} .fdone pre{margin:0;padding:16px;border-radius:10px;background:var(--bg-alt);font:inherit;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} .cinfo h2{font-size:24px;line-height:1.2;font-weight:700;margin-bottom:12px} .cinfo dl{margin:0} .cinfo dt{margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .cinfo dd{margin:4px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:17px} .cinfo__facts{display:flex;flex-direction:column;gap:14px;margin-top:28px;padding:22px;border-radius:12px;background:var(--bg-alt)} .cinfo__facts strong{display:block;font-weight:700} .cinfo__facts span{font-size:14px;color:var(--ink-2)} /* ---------- talk to us ---------- */ .talk{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px} .talk__label{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .talk__btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:15px;font-weight:600;color:var(--navy);text-decoration:none;transition:border-color .15s,color .15s,box-shadow .15s} .talk__btn:hover{border-color:var(--cyan);color:var(--blue);box-shadow:var(--glow)} .talk__btn svg{flex:0 0 auto;color:var(--blue)} .talk--stack{flex-direction:column;align-items:stretch;gap:8px;margin-top:28px} .talk--stack .talk__label{margin-bottom:4px} .talk--stack .talk__btn{justify-content:flex-start} @media (max-width:520px){.talk__btn span{font-size:14px}} /* ---------- OEM page ---------- */ .section--dark{background:var(--navy);color:#fff} .section--dark h2{color:#fff} .section--dark p{color:#B4D7EF} .eyebrow--light{color:var(--cyan)} .oem-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:64px;align-items:center} .oem-intro .section__head{margin-bottom:0;gap:18px} .oem-intro__img{border-radius:var(--radius)} @media (max-width:900px){.oem-intro{grid-template-columns:1fr;gap:32px}.oem-intro__img{order:-1}} .promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:22px;border-top:1px solid var(--line)} .promises strong{display:block;font-size:18px;font-weight:700} .promises span{font-size:14px;color:var(--ink-3)} @media (max-width:620px){.promises{grid-template-columns:1fr;gap:14px}} .specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .spec{padding:20px;background:var(--bg)} .spec__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .spec h3{font-size:17px;font-weight:700} .spec__head span{font-size:14px;font-weight:700;color:var(--blue)} .spec p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)} @media (max-width:900px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.specs{grid-template-columns:1fr}} .qts{margin-top:24px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)} .qts__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px} .qts__head h3{font-size:19px;font-weight:700} .qts__head span{font-size:14px;color:var(--ink-3)} .qts__row{display:flex;gap:16px;padding:10px 0;border-top:1px solid var(--ice)} .qts__row strong{flex:0 0 96px;font-weight:700;color:var(--blue)} .materials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px} @media (max-width:760px){.materials{grid-template-columns:1fr;gap:32px}} .mcol__title{padding-bottom:12px;border-bottom:2px solid var(--navy);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .mrow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)} .mrow strong{font-size:18px;font-weight:700} .mrow span{font-size:15px;line-height:1.6;color:var(--ink-2)} @media (max-width:520px){.mrow{grid-template-columns:1fr;gap:4px}} .testing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center} .testing h2{margin:12px 0 14px;font-size:clamp(28px,2.8vw,38px);line-height:1.15;font-weight:700} .testing img{border-radius:var(--radius);background:var(--bg)} @media (max-width:900px){.testing{grid-template-columns:1fr;gap:32px}} .tests{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .tests li{padding:8px 14px;border:1px solid var(--ink-2);border-radius:999px;font-size:14px;font-weight:600;color:#fff} .stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} .stage{padding:22px;background:var(--bg-alt);border-radius:var(--radius);border-top:3px solid var(--line)} .stage:last-child{border-top-color:var(--blue)} .stage__tag{font-size:22px;font-weight:500;color:var(--blue)} .stage h3{margin-top:6px;font-size:17px;font-weight:700} .stage p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)} @media (max-width:900px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.stages{grid-template-columns:1fr}} .terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .term{padding-top:18px;border-top:2px solid var(--navy)} .term h3{font-size:18px;font-weight:700} .term p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-2)} @media (max-width:900px){.terms{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.terms{grid-template-columns:1fr}} .qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:48px} .qa h3{font-size:19px;font-weight:700} .qa p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--ink-2)} @media (max-width:760px){.qa{grid-template-columns:1fr;gap:28px}} .oem-more{margin-top:28px} /* ---------- About page ---------- */ .about-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .about-intro .section__head{margin-bottom:0;gap:18px;max-width:none} .about-intro__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--bg-alt)} @media (max-width:900px){.about-intro{grid-template-columns:1fr;gap:32px}.about-intro__img{order:-1;aspect-ratio:16/9}} .card__kw{margin-top:8px;font-size:15px;font-weight:600;color:var(--blue)} .card__kw + p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--ink-2)} .banner:not([style]){background:var(--bg-alt)} /* ---------- factory photos (About) ---------- */ .facility{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .facility__item{margin:0} .facility__item--wide{grid-column:1 / -1} .facility img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);background:var(--bg-alt)} .facility__item--wide img{aspect-ratio:21/9} .facility figcaption{margin-top:10px;font-size:14px;color:var(--ink-3)} @media (max-width:760px){.facility{grid-template-columns:1fr;gap:20px}.facility__item--wide img{aspect-ratio:16/9}} /* ISO certificate panel */ .cert{margin-top:4px} .cert__in{display:flex;align-items:center;gap:20px;padding:24px 28px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius)} .cert__seal{flex:0 0 56px;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:#fff;color:var(--blue)} .cert__text{flex:1} .cert__text h3{font-size:20px;font-weight:700} .cert__text p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--ink-2)} .cert .btn{flex:0 0 auto} @media (max-width:620px){.cert__in{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}} /* WeChat panel (Contact) */ .wechat{display:flex;align-items:center;gap:20px;margin-top:28px;padding:20px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius)} .wechat__qr{flex:0 0 120px;width:120px;height:120px;background:#fff;border-radius:8px;overflow:hidden} .wechat__qr img{width:100%;height:100%;object-fit:contain} .wechat h3{font-size:18px;font-weight:700} .wechat p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)} @media (max-width:520px){.wechat{flex-direction:column;align-items:flex-start}} /* ---------- language switch ---------- */ .lang{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.35);border-radius:999px} .lang-btn{padding:6px 12px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:14px;font-weight:700;color:#fff;cursor:pointer;line-height:1.2} .lang-btn[aria-current="true"]{background:#fff;color:var(--blue-dark)} @media (max-width:900px){.lang{align-self:flex-start;margin-top:14px;border-color:rgba(255,255,255,.45)}} /* Chinese needs a font with CJK coverage and a little more line height */ html.lang-zh body{font-family:"Inter","Microsoft YaHei","PingFang SC","Hiragino Sans GB",SimHei,Arial,sans-serif;line-height:1.75} html.lang-zh h1,html.lang-zh h2,html.lang-zh h3,html.lang-zh .trust__num,html.lang-zh .hero h1,html.lang-zh .banner h1{letter-spacing:.01em;line-height:1.3} html.lang-zh .hero h1,html.lang-zh .banner h1{font-size:clamp(24px,2.3vw,32px);letter-spacing:0} html.lang-zh .eyebrow,html.lang-zh .card h3,html.lang-zh .site-nav a:not(.btn),html.lang-zh .trust__label{letter-spacing:.02em} /* a product photo that has not been uploaded yet shows a tidy placeholder instead of a broken icon */ .product__media img,.pick__media img{background:var(--bg-alt)} .facility--two{grid-template-columns:repeat(2,minmax(0,1fr))} .facility--two .facility__item img{aspect-ratio:4/3} @media (max-width:760px){.facility--two{grid-template-columns:1fr}} .section--tight{padding-top:56px;padding-bottom:56px} .cert{margin:0} /* ---------- legal pages ---------- */ .legal{max-width:760px} .legal__date{font-size:14px;color:var(--ink-3)} .legal h2{margin-top:36px;font-size:21px;font-weight:700} .legal p{margin-top:12px;color:var(--ink-2)} .site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px} .site-footer__links{display:flex;gap:20px} .site-footer__links a{color:#86ABCB;text-decoration:none} .site-footer__links a:hover{color:#fff;text-decoration:underline} /* ---------- cookie notice ---------- */ .cookie{position:fixed;left:16px;right:16px;bottom:50%;transform:translateY(50%);z-index:90;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:760px;margin:0 auto;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(11,33,54,.18)} .cookie p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;flex:1 1 320px} .cookie__btns{display:flex;gap:10px;flex:0 0 auto} @media (max-width:520px){.cookie{padding:14px 16px}.cookie__btns{width:100%}.cookie__btns .btn{flex:1}} /* About: the four advantage cards read as one block of text, same size as the rest of the site */ .card__kw{font-size:14px} /* A banner whose artwork is drawn smaller: the image is fitted to the banner height instead of filling it, so nothing is cropped and the subject is not blown up. Add the class banner--fit to any