/* ============================================================ Hangtech — theme system Four palettes, switched with data-theme on . The hero/orbit stage stays dark in every theme because the rendered product frames have a dark graphite backdrop baked in. ============================================================ */ /* 1. SIGNAL — light technical (recommended default) */ :root, :root[data-theme="signal"]{ --bg:#F4F6F8; --bg2:#FFFFFF; --surface:#FFFFFF; --ink:#14181C; --ink-2:#5A636B; --accent:#0E8C84; --accent-2:#0B736C; --on-accent:#FFFFFF; --line:rgba(20,24,28,.13); --stage:#161619; --shadow:0 1px 2px rgba(16,24,32,.06),0 8px 24px rgba(16,24,32,.06); --hi:#5FD6CD; } /* 2. GRAPHITE — dark instrument (the version he approved) */ :root[data-theme="graphite"]{ --bg:#15181B; --bg2:#1B1F23; --surface:#1B1F23; --ink:#D9D6CF; --ink-2:#9AA0A6; --accent:#2CB8AE; --accent-2:#3ED2C7; --on-accent:#0E1A19; --line:rgba(217,214,207,.12); --stage:#161619; --shadow:none; --hi:#5FD6CD; } /* 3. BLUEPRINT — engineering white + navy */ :root[data-theme="blueprint"]{ --bg:#EDF1F5; --bg2:#FFFFFF; --surface:#FFFFFF; --ink:#0F2233; --ink-2:#55697C; --accent:#1E5FA8; --accent-2:#164C88; --on-accent:#FFFFFF; --line:rgba(15,34,51,.14); --stage:#101A24; --shadow:0 1px 2px rgba(15,34,51,.07),0 8px 24px rgba(15,34,51,.07); --hi:#7FB4EE; } /* 4. FOUNDRY — warm dark + safety amber */ :root[data-theme="foundry"]{ --bg:#141312; --bg2:#1C1A18; --surface:#1C1A18; --ink:#E8E3DC; --ink-2:#A09890; --accent:#E0872A; --accent-2:#F09B3E; --on-accent:#1A1207; --line:rgba(232,227,220,.13); --stage:#17150F; --shadow:none; --hi:#F0A94E; } :root{ --wrap:1180px; --fs:clamp(16px,1.05vw,18px); --r:10px; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs)/1.55 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s} img{display:block;max-width:100%} a{color:inherit} h1,h2,h3{font-weight:500;letter-spacing:-.015em;line-height:1.12;margin:0 0 .6em} h1{font-size:clamp(2.2rem,5.2vw,4.4rem)} h2{font-size:clamp(1.7rem,3.2vw,2.7rem)} h3{font-size:1.15rem} p{margin:0 0 1em} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)} .wrap.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start} @media (max-width:820px){.wrap.two{grid-template-columns:1fr}} .btn{display:inline-block;padding:.85em 1.5em;border-radius:6px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:500;border:1px solid var(--accent);transition:background .15s,border-color .15s} .btn:hover{background:var(--accent-2);border-color:var(--accent-2)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .eyebrow{color:var(--accent);font-weight:500;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 1em} /* header */ .top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;padding:14px clamp(20px,4vw,48px);background:var(--bg);border-bottom:1px solid var(--line)} .top.solid{position:fixed;inset:0 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line)} .top.over{position:fixed;inset:0 0 auto 0;border-bottom-color:transparent;background:linear-gradient(rgba(10,10,12,.75),rgba(10,10,12,0));color:#EDEDEA} .brand img{height:34px;width:auto} .top.over .brand img{filter:brightness(0) invert(1)} .nav{display:flex;gap:26px;margin-left:auto;font-size:.95rem} .nav a{text-decoration:none;color:var(--ink-2)} .nav a:hover,.nav a[aria-current]{color:var(--ink)} .nav .nav-cta{color:var(--accent)} .top.over .nav a{color:#C3C6C9} .top.over .nav a:hover{color:#fff} .top.over .nav .nav-cta{color:var(--hi)} .nav-phone{text-decoration:none;font-size:.95rem;color:var(--ink-2)} .top.over .nav-phone{color:#C3C6C9} @media (max-width:820px){.nav{display:none}.nav-phone{margin-left:auto}} /* scroll sequences */ .hero,.orbit{position:relative;background:var(--stage);color:#EDEDEA} .hero{height:420vh} .orbit{height:260vh} .hero-pin,.orbit-pin{position:sticky;top:0;height:100vh;overflow:hidden} .seq{position:absolute;inset:0;width:100%;height:100%;display:block;background:#161619} .seq-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none} .no-seq .seq{display:none}.no-seq .seq-fallback{display:block} .hero-copy{position:absolute;left:clamp(20px,6vw,96px);top:50%;transform:translateY(-50%);max-width:34rem;z-index:2;will-change:opacity,transform} .model{color:var(--hi);font-weight:500;margin:0 0 1em;font-size:.95rem} .lede{color:#B9BCBF;font-size:1.1rem;max-width:32rem} .hero-actions{display:flex;gap:12px;margin-top:1.6rem;flex-wrap:wrap} .hero .btn.ghost,.orbit .btn.ghost{color:#EDEDEA;border-color:rgba(237,237,234,.3)} .hero .btn.ghost:hover,.orbit .btn.ghost:hover{border-color:var(--hi);color:var(--hi)} .scroll-hint{position:absolute;top:calc(100% + 8vh);font-size:.85rem;color:#B9BCBF} .scroll-hint::after{content:"";display:block;width:1px;height:38px;background:#B9BCBF;margin:8px 0 0 2px;animation:drip 1.8s infinite} @keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @media (prefers-reduced-motion:reduce){.scroll-hint::after{animation:none}} .part-notes{list-style:none;margin:0;padding:0;position:absolute;left:clamp(20px,6vw,96px);top:0;bottom:0;width:min(26rem,34vw);z-index:2;pointer-events:none} .part-notes li{position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(-12px);opacity:0;border-left:2px solid var(--hi);padding:.2rem 0 .2rem 1.1rem;transition:opacity .35s,transform .35s} .part-notes li.on{opacity:1;transform:translateY(-50%) translateX(0)} .part-notes strong{display:block;font-weight:500;font-size:1.25rem} .part-notes span{color:#B9BCBF;font-size:.98rem} @media (max-width:820px){ .hero{height:320vh} .hero-copy{left:20px;right:20px;top:auto;bottom:6vh;transform:none;max-width:none} .hero-copy h1{font-size:2rem} .lede{font-size:.98rem} .scroll-hint{display:none} .part-notes{right:20px;left:20px;width:auto;top:auto;bottom:8vh} .part-notes li{left:0;top:auto;bottom:0;transform:translateY(12px)} .part-notes li.on{transform:translateY(0)} } .orbit-copy{position:absolute;left:clamp(20px,6vw,96px);bottom:12vh;max-width:36rem;z-index:2} .orbit-copy p{color:#B9BCBF} /* live demo */ .live{padding:clamp(80px,12vh,160px) 0;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .live-head{max-width:46rem;margin-bottom:56px} .live-head p{color:var(--ink-2);font-size:1.05rem} .demo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,7fr);align-items:center} @media (max-width:820px){.demo{grid-template-columns:1fr;gap:24px}.wire{width:2px !important;height:60px !important}} .oled{justify-self:center} .oled-screen{width:min(320px,80vw);aspect-ratio:1.75;background:#04080A;border-radius:10px;border:10px solid #2A2E33;box-shadow:inset 0 0 40px rgba(62,232,224,.07),0 0 0 2px #1a1d21;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:"IBM Plex Mono",monospace;color:#3EE8E0;text-shadow:0 0 12px rgba(62,232,224,.6)} .oled-main{font-size:3.2rem;line-height:1;letter-spacing:.04em} .oled-sub{margin-top:.6rem;font-size:1rem;letter-spacing:.06em} .oled-sub em{font-style:normal;margin-left:1.6em} .oled-cap{text-align:center;color:var(--ink-2);font-size:.9rem;margin-top:.9rem} .bus{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--ink-2);font-size:.85rem} .wire{position:relative;display:block;width:100%;height:2px;background:var(--line);overflow:hidden} .wire i{position:absolute;top:-2px;left:-20px;width:14px;height:6px;border-radius:3px;background:var(--accent);animation:pkt 1.8s linear infinite} .wire i:nth-child(2){animation-delay:.6s}.wire i:nth-child(3){animation-delay:1.2s} @keyframes pkt{to{left:100%}} @media (prefers-reduced-motion:reduce){.wire i{display:none}} .scada{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .scada-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:color-mix(in srgb,var(--ink) 6%,var(--surface));border-bottom:1px solid var(--line);font-size:.85rem;color:var(--ink-2)} .dot{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent)} .scada-title{margin-left:10px} .scada-body{padding:20px 22px;display:grid;gap:18px} .readout{display:grid;grid-template-columns:8rem 1fr;gap:6px 14px;align-items:baseline} .readout .k,.relay .k{color:var(--ink-2);font-size:.9rem} .readout .v,.relay .v{font-size:1.25rem} .readout .v b,.relay .v b{font-weight:500;font-family:"IBM Plex Mono",monospace} .meter{grid-column:1/-1;position:relative;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,transparent)} .meter i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--accent);width:36%;transition:width .3s} .meter i.cut{background:none;width:2px;border-radius:0;top:-4px;bottom:-4px;left:80%;border-left:2px dashed #C8332B} .relay{display:grid;grid-template-columns:8rem 1fr 6rem 1fr;gap:6px 14px;align-items:baseline;padding-top:8px;border-top:1px solid var(--line)} .relay .state{font-size:1rem;padding:.2em .7em;border-radius:4px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);justify-self:start} .relay .state.trip{background:rgba(200,51,43,.18);color:#C8332B} @media (max-width:520px){.relay{grid-template-columns:8rem 1fr}} .cutoff{padding-top:8px;border-top:1px solid var(--line)} .cutoff label{display:block;font-size:.95rem;margin-bottom:8px} .cutoff label b{font-weight:500;font-family:"IBM Plex Mono",monospace} .cutoff input{width:100%;accent-color:#C8332B} .cut-note{color:var(--ink-2);font-size:.85rem;margin:8px 0 0} .usp{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 40px} .usp li{border-top:1px solid var(--line);padding-top:16px;color:var(--ink-2)} .usp strong{display:block;color:var(--ink);font-weight:500;margin-bottom:.3em} /* product cards */ .range{padding:clamp(80px,12vh,160px) 0} .range-lede{color:var(--ink-2);max-width:40rem;margin-bottom:48px} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px} .card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;box-shadow:var(--shadow);transition:transform .18s,border-color .18s} .card:hover{transform:translateY(-3px);border-color:var(--accent)} .card-img{aspect-ratio:1.1;background:#fff;display:grid;place-items:center;padding:6%} .card-img img{max-height:100%;width:auto} .card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1} .card-body h3{margin:0} .card-body>p{color:var(--ink-2);font-size:.95rem;margin:0} .card-tags{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .card-tags li{font-size:.78rem;color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:.2em .7em} .card-price{font-family:"IBM Plex Mono",monospace;font-size:1.15rem;font-weight:500;color:var(--ink);margin:6px 0 0 !important} .card-price span{font-family:"IBM Plex Sans",sans-serif;font-size:.8rem;font-weight:400;color:var(--ink-2)} .pd-price{font-family:"IBM Plex Mono",monospace;font-size:1.7rem;font-weight:500;margin:0 0 18px} .pd-price span{font-family:"IBM Plex Sans",sans-serif;font-size:.85rem;font-weight:400;color:var(--ink-2);display:block;margin-top:2px} .card-more{margin-top:auto;padding-top:14px;color:var(--accent);font-size:.92rem} .sw{width:12px;height:12px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:6px} .sw.green{background:#1F9C94}.sw.blue{background:#2B6CB0}.sw.red{background:#C8332B} /* comparison table */ .range-table{display:grid;border-top:1px solid var(--line);font-size:.98rem;margin-top:64px} .rt-row{display:grid;grid-template-columns:11rem repeat(3,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)} .rt-row [role=rowheader]{color:var(--ink-2)} .rt-head [role=columnheader]{font-weight:500;font-size:1.05rem;display:flex;align-items:center;gap:4px} @media (max-width:820px){ .rt-row{grid-template-columns:1fr;gap:6px} .rt-row [role=rowheader]{font-size:.85rem} .rt-head{display:none} .rt-row>span:nth-child(2)::before{content:"HT-P05-T100 · ";color:var(--ink-2)} .rt-row>span:nth-child(3)::before{content:"HT-P05 · ";color:var(--ink-2)} .rt-row>span:nth-child(4)::before{content:"HT-T100 · ";color:var(--ink-2)} } /* specs / apps / enquiry */ .specs{padding:clamp(80px,12vh,160px) 0;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .spec-note{color:var(--ink-2);margin-bottom:28px} .spec-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px} .spec-list div{display:grid;padding:14px 0;border-bottom:1px solid var(--line)} .spec-list dt{color:var(--ink-2);font-size:.9rem} .spec-list dd{margin:2px 0 0} @media (max-width:600px){.spec-list{grid-template-columns:1fr}} .apps{padding:clamp(80px,12vh,160px) 0} .app-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 40px;font-size:1.1rem} .app-list li{padding:14px 0;border-bottom:1px solid var(--line)} .enquire{padding:clamp(80px,12vh,160px) 0;background:var(--bg2);border-top:1px solid var(--line)} .enquire p{color:var(--ink-2)} address{font-style:normal;display:grid;gap:8px;margin-top:28px} address a{text-decoration:none;font-size:1.2rem} address span{color:var(--ink-2);font-size:.95rem;max-width:26rem} .q{display:grid;gap:16px} .q label{display:grid;gap:6px;font-size:.9rem;color:var(--ink-2)} .q input,.q select,.q textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.75em .9em} .q input:focus,.q select:focus,.q textarea:focus{border-color:var(--accent)} .q button{justify-self:start;cursor:pointer;font:inherit} .q-note{color:var(--ink-2);font-size:.85rem;margin:0} .foot{padding:40px 0 60px;color:var(--ink-2);font-size:.9rem;background:var(--bg);border-top:1px solid var(--line)} .foot a{color:var(--ink-2);margin-right:18px} .foot p{margin:0 0 .6em} .wa{position:fixed;right:22px;bottom:22px;z-index:20;width:54px;height:54px;border-radius:50%;background:#25D366;color:#062B12;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4)} /* ============ PRODUCT PAGES ============ */ .crumb{padding:20px 0 0;font-size:.88rem;color:var(--ink-2)} .crumb a{text-decoration:none} .crumb a:hover{color:var(--accent)} .pd{padding:24px 0 clamp(50px,7vh,90px)} .pd-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start} @media (max-width:900px){.pd-top{grid-template-columns:1fr}} .gal{position:sticky;top:90px} @media (max-width:900px){.gal{position:static}} .gal-main{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:1;display:grid;place-items:center;padding:3%} .gal-main img{max-height:100%;width:auto} .gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px} .gal-thumbs button{padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;cursor:pointer;aspect-ratio:1} .gal-thumbs button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)} .gal-thumbs img{width:100%;height:100%;object-fit:contain;padding:8%} .pd-head h1{font-size:clamp(1.9rem,3.6vw,2.9rem)} .pd-sub{color:var(--ink-2);font-size:1.05rem} .keyfacts{list-style:none;margin:26px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .keyfacts li{background:var(--surface);padding:16px 18px} .keyfacts b{display:block;font-weight:500;font-size:1.1rem;font-family:"IBM Plex Mono",monospace} .keyfacts span{color:var(--ink-2);font-size:.85rem} .pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px} .pd-claim{border-left:2px solid var(--accent);padding:2px 0 2px 16px;color:var(--ink-2);margin:0 0 24px} .pd-sec{padding:clamp(48px,7vh,90px) 0;border-top:1px solid var(--line)} .pd-sec.alt{background:var(--bg2)} .pd-sec h2{font-size:clamp(1.4rem,2.4vw,2rem)} .pd-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start} @media (max-width:820px){.pd-grid{grid-template-columns:1fr}} .pd-grid>div>p{color:var(--ink-2)} .tbl{width:100%;border-collapse:collapse;font-size:.97rem} .tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top} .tbl th{color:var(--ink-2);font-weight:400;width:15rem} .tbl thead th{color:var(--ink);font-weight:500;width:auto;background:color-mix(in srgb,var(--ink) 5%,transparent)} @media (max-width:600px){.tbl th{width:9rem}} .feat{list-style:none;margin:0;padding:0;display:grid;gap:22px} .feat li{border-top:1px solid var(--line);padding-top:16px} .feat strong{display:block;font-weight:500;margin-bottom:.3em} .feat span{color:var(--ink-2)} .note{color:var(--ink-2);font-size:.9rem;border:1px dashed var(--line);border-radius:8px;padding:14px 16px;margin-top:20px} .rel{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media (max-width:600px){.rel{grid-template-columns:1fr}} .saaya-credit{font-size:12.5px;opacity:.7;white-space:nowrap} .saaya-credit:hover{opacity:1}