:root{--paper:#f6f7f3;--ink:#172124;--muted:#687477;--line:#dce1db;--white:#fff;--blue:#294ce7;--lime:#d2f480;--radius:16px;--display:"Avenir Next","Trebuchet MS","PingFang SC",sans-serif;--body:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif} *{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #6c86ff;outline-offset:4px}button{color:inherit}svg{display:block}::selection{background:var(--lime)}.wrap{width:min(1280px,calc(100% - 80px));margin:auto}.preview{background:var(--ink);color:#ecf0e9;font-size:11px;letter-spacing:.08em}.preview .wrap{min-height:31px;display:flex;align-items:center;justify-content:space-between;gap:16px}.preview span:last-child{color:#bdc7c0}.header{position:sticky;top:0;z-index:10;background:rgba(246,247,243,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.nav{height:84px;display:flex;align-items:center;gap:42px}.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font-family:var(--display);font-size:26px;font-weight:750;letter-spacing:-1px}.brand svg{width:28px;height:31px}.brand small{font-size:10px;letter-spacing:1.6px;font-weight:600;margin-left:4px;padding-left:14px;border-left:1px solid #bdc6c0;color:var(--muted)}nav{display:flex;gap:32px;margin-left:auto;font-size:13px}nav a:hover{color:var(--blue)}.nav-actions{display:flex;align-items:center;gap:16px}.text-button{background:none;border:0;font-size:13px;padding:10px 0}.btn{display:inline-flex;gap:30px;justify-content:space-between;align-items:center;border:1px solid transparent;padding:15px 20px;border-radius:7px;font-size:13px;font-weight:600;line-height:1.4;background:var(--blue);color:white;transition:transform .18s,background .18s}.btn:hover{background:#193ccc;transform:translateY(-2px)}.btn.small{padding:11px 16px;gap:22px}.btn.outline{background:transparent;color:var(--ink);border-color:#bcc6bc}.btn.outline:hover{background:#e8ede6}.btn.light{background:var(--lime);color:var(--ink)}.btn.light:hover{background:#c4e875}.btn.arrow:after{content:'↗';font-size:20px;line-height:1}.hero{display:grid;grid-template-columns:1.02fr 1fr;min-height:610px;padding-top:56px;padding-bottom:56px;gap:60px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:650;color:var(--muted);display:flex;align-items:center;gap:10px}.dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--blue)}h1{font-family:var(--display);font-size:clamp(40px,4.4vw,67px);font-weight:650;letter-spacing:-3px;line-height:1.28;margin:28px 0 22px}.hero-copy p{max-width:430px;color:var(--muted);font-size:15px;line-height:1.9}.hero-copy .actions{display:flex;gap:13px;margin-top:32px}.hero-note{display:flex;align-items:center;gap:12px;margin-top:42px;font-size:11px;color:var(--muted)}.hero-note .rule{width:26px;height:1px;background:#87918b}.visual{background:#e9ede7;min-height:484px;border-radius:3px;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:29px 30px;isolation:isolate}.visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#d9e0d666 1px,transparent 1px),linear-gradient(90deg,#d9e0d666 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(180deg,black,transparent);z-index:-1}.visual-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:10px;font-weight:650;letter-spacing:1.5px}.signal{display:flex;gap:4px;align-items:flex-end}.signal i{width:3px;background:var(--ink);height:5px}.signal i:nth-child(2){height:8px}.signal i:nth-child(3){height:11px}.signal i:nth-child(4){height:14px}.globe{width:100%;height:340px;margin-top:7px}.visual-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.visual-bottom strong{font:600 25px/1.2 var(--display);letter-spacing:-.8px}.visual-bottom small{font-size:10px;line-height:1.7;color:var(--muted)}.float-label{position:absolute;padding:11px 14px;background:white;border:1px solid #d8e0d5;box-shadow:0 5px 20px #24302409;border-radius:6px;display:flex;align-items:center;gap:10px;font-size:11px}.float-label b{font-size:10px;letter-spacing:.03em}.label-a{top:125px;left:21px}.label-b{right:24px;top:282px}.label-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime);font-size:14px}.trustline{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;gap:40px}.trustline>div{display:flex;align-items:center;gap:17px}.trustline .num{font:500 11px var(--display);color:#929d93}.trustline strong{display:block;font-size:13px;margin-bottom:5px;font-weight:600}.trustline p{margin:0;font-size:11px;color:var(--muted)}.section{padding:82px 0}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}h2{font:650 34px/1.3 var(--display);letter-spacing:-1px;margin:11px 0 0}.section-heading p{font-size:13px;color:var(--muted);line-height:1.8;max-width:355px;margin:0}.toolbar{display:flex;justify-content:space-between;gap:20px;margin-bottom:26px;align-items:center}.tabs{display:flex;gap:5px;flex-wrap:wrap}.tab{background:transparent;border:0;padding:10px 17px;font-size:12px;border-radius:5px;color:var(--muted)}.tab[aria-pressed=true]{background:var(--ink);color:white}.tab:hover{background:#e3e8df}.tab[aria-pressed=true]:hover{background:var(--ink)}.search{display:flex;align-items:center;gap:10px;min-width:250px;border-bottom:1px solid #bbc5bb;padding:8px 2px;color:var(--muted)}.search input{background:none;border:0;font-size:12px;outline:0;width:100%;min-width:0}.search:focus-within{border-color:var(--blue)}.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.product{background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.product:hover{transform:translateY(-4px);box-shadow:0 12px 32px #2536220b}.product-art{height:216px;position:relative;display:flex;justify-content:center;align-items:center;background:#edf0eb;overflow:hidden}.product-art svg{width:85%;height:90%}.product-art.comm{background:#e8edf1}.product-art.smart{background:#eceaf0}.product-tag{position:absolute;top:17px;left:17px;font-size:9px;letter-spacing:1px;color:#4b5951}.art-note{position:absolute;bottom:10px;right:13px;font-size:9px;color:#7a857a}.product-body{padding:23px;display:flex;flex-direction:column;flex:1}.product-kind{color:var(--muted);font-size:9px;letter-spacing:1.5px;font-weight:600}.product h3{font:650 22px var(--display);letter-spacing:-.5px;margin:10px 0}.product p{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 23px;min-height:43px}.product-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;margin-top:auto}.product-footer>span{font-size:10px;color:var(--muted)}.product-footer button{font-size:12px;border:0;background:none;padding:4px 0;font-weight:600;display:flex;gap:17px;align-items:center}.product-footer button:hover{color:var(--blue)}.product-footer button span{font-size:20px}.catalog-note{font-size:11px;color:var(--muted);margin:18px 0 0;line-height:1.7}.empty{padding:45px;background:white;border:1px dashed var(--line);text-align:center;color:var(--muted);font-size:14px}.empty button{margin-top:16px}.workflow{background:var(--ink);color:#f1f5eb;border-radius:12px;padding:45px 48px;margin:0 auto 82px}.workflow .eyebrow{color:#b1beb2}.workflow .section-heading{margin-bottom:42px}.workflow h2{font-size:30px}.workflow .section-heading p{color:#afbbb2}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.step{border-top:1px solid #49554b;padding-top:22px}.step>span{font:500 12px var(--display);color:var(--lime)}.step h3{font-size:17px;font-weight:500;margin:21px 0 12px}.step p{font-size:12px;line-height:1.9;color:#afbbb2;margin:0}.inquiry{display:grid;grid-template-columns:.85fr 1.15fr;gap:86px;padding-bottom:86px;scroll-margin-top:110px}.inquiry-intro{padding-top:16px}.inquiry h2{font-size:41px;line-height:1.38;margin-top:21px}.inquiry-intro>p{font-size:14px;color:var(--muted);line-height:1.95;margin:24px 0;max-width:340px}.inquiry-points{list-style:none;padding:0;margin:34px 0;display:grid;gap:17px}.inquiry-points li{font-size:12px;display:flex;align-items:center;gap:11px}.check{background:#e2edd2;color:#466031;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px}.preview-note{font-size:11px;line-height:1.8;color:var(--muted);border-left:2px solid #c7d3be;padding-left:15px;max-width:325px}.inquiry-form{border:1px solid var(--line);background:white;padding:31px;border-radius:12px}.form-top{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:21px;margin-bottom:22px}.form-top strong{font-size:16px;font-weight:600}.form-top small{font-size:10px;color:var(--muted)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:19px 18px}.field{display:flex;flex-direction:column;gap:8px;min-width:0}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:500}.field label span{color:var(--muted);font-weight:400}.field input,.field select,.field textarea{border:1px solid #dbe0d7;border-radius:5px;background:#fcfdfa;padding:12px;min-height:43px;width:100%;font-size:12px;color:var(--ink);line-height:1.4}.field textarea{resize:vertical;min-height:83px}.field input::placeholder,.field textarea::placeholder{color:#a0aaa0}.form-bottom{display:flex;flex-direction:column;gap:12px;margin-top:24px}.form-bottom p{margin:0;color:var(--muted);font-size:10px;line-height:1.7}.form-actions{display:flex;gap:10px}.form-actions .btn:first-child{flex:1}.save-status{font-size:11px;color:#476b32;min-height:16px;line-height:1.5}.footer{border-top:1px solid var(--line);padding:34px 0 22px}.footer-main{display:flex;justify-content:space-between;gap:25px;align-items:center}.footer .brand{font-size:23px}.footer-copy{font-size:12px;color:var(--muted);line-height:1.7}.footer-links{display:flex;gap:22px;font-size:11px}.footer-bottom{border-top:1px solid var(--line);margin-top:31px;padding-top:20px;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:16px}.footer-bottom span:last-child{letter-spacing:1.4px}dialog{border:1px solid var(--line);border-radius:13px;max-width:620px;width:calc(100% - 36px);padding:32px;color:var(--ink);box-shadow:0 24px 90px #001b2733}dialog::backdrop{background:#14221d66;backdrop-filter:blur(3px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px}.dialog-top h2{font-size:24px;margin:0}.close{border:1px solid var(--line);background:#f7f9f3;border-radius:50%;width:32px;height:32px;font-size:19px;display:grid;place-items:center}.dialog-note{font-size:12px;color:var(--muted);line-height:1.8}.summary{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper);padding:20px;border-radius:7px;font:12px/1.9 var(--body);max-height:48vh;overflow:auto;margin:20px 0}.dialog-actions{display:flex;gap:10px}.portal-items{display:grid;gap:10px;margin:22px 0}.portal-item{border:1px solid var(--line);padding:16px;border-radius:7px;font-size:13px}.portal-item small{display:block;color:var(--muted);margin-top:6px;line-height:1.6}.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}[hidden]{display:none!important}.reveal{animation:arrive .65s ease both}.hero-copy{animation-delay:.08s}.visual{animation-delay:.18s}@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @media(min-width:1500px){.hero{min-height:660px}.visual{min-height:520px}.globe{height:370px}}@media(max-width:1050px){.wrap{width:calc(100% - 48px)}.nav{gap:22px}.brand small{display:none}nav{gap:20px}.hero{gap:28px}.hero h1{font-size:49px}.visual{padding:24px 20px}.inquiry{gap:42px}.label-a{left:12px}.label-b{right:10px}.product-body{padding:19px}.workflow{padding:36px}}@media(max-width:760px){html{scroll-padding-top:83px}.wrap{width:calc(100% - 36px)}.preview .wrap{font-size:9px;min-height:28px;gap:8px}.preview span:last-child{font-size:8px}.nav{height:70px;gap:14px}.brand{font-size:24px}.brand svg{width:23px}nav{display:none}.nav-actions{margin-left:auto;gap:14px}.nav-actions .btn{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;gap:31px;padding-top:37px;padding-bottom:34px;min-height:auto}.eyebrow{font-size:9px;letter-spacing:1.7px}.hero h1{font-size:45px;letter-spacing:-2px;margin:22px 0 18px}.hero-copy p{font-size:13px;max-width:90%}.hero-copy .actions{margin-top:25px}.hero-note{margin-top:23px;font-size:10px}.visual{min-height:369px;padding:20px}.globe{height:265px}.visual-bottom strong{font-size:22px}.visual-bottom small{font-size:9px}.label-a{top:100px}.label-b{top:208px}.float-label{padding:9px 10px;font-size:10px}.trustline{grid-template-columns:1fr;gap:20px;padding:23px 0}.trustline>div{gap:15px}.trustline strong{font-size:12px;margin-bottom:4px}.trustline p{font-size:10px}.section{padding:45px 0}.section-heading{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:23px}h2{font-size:29px}.section-heading p{font-size:12px}.toolbar{align-items:stretch;flex-direction:column;gap:13px}.tabs{gap:3px}.tab{font-size:11px;padding:9px 12px}.search{min-width:0;width:100%}.catalog{grid-template-columns:1fr;gap:18px}.product-art{height:212px}.product-body{padding:23px}.product p{min-height:0}.workflow{padding:28px 24px;margin-bottom:48px;border-radius:8px}.workflow h2{font-size:26px}.workflow .section-heading{margin-bottom:28px}.steps{grid-template-columns:1fr;gap:27px}.step{padding-top:17px}.step h3{margin:12px 0 8px;font-size:16px}.inquiry{grid-template-columns:1fr;gap:25px;padding-bottom:45px;scroll-margin-top:84px}.inquiry-intro{padding-top:0}.inquiry h2{font-size:35px;margin-top:16px}.inquiry-intro>p{margin:18px 0;font-size:13px;max-width:100%}.inquiry-points{margin:24px 0;gap:13px}.preview-note{max-width:none}.inquiry-form{padding:22px}.fields{gap:17px 13px}.form-top strong{font-size:15px}.footer{padding-top:25px}.footer-main{align-items:flex-start;flex-direction:column;gap:19px}.footer-bottom{font-size:9px;align-items:flex-start;flex-direction:column;gap:9px;margin-top:25px}.dialog-top h2{font-size:20px}dialog{padding:24px}.btn{font-size:12px;padding:13px 16px;gap:22px}.summary{padding:16px}}@media(max-width:380px){.hero h1{font-size:39px}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}.preview span:last-child{display:none}.inquiry-form{padding:18px}.form-actions{flex-wrap:wrap}.form-actions .btn{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{animation:none}.btn,.product{transition:none}} .brand-strip{border-top:1px solid var(--line);padding:25px 0 27px;display:flex;align-items:center;gap:36px}.brand-strip-label{font-size:10px;color:var(--muted);white-space:nowrap}.brand-strip>div{display:flex;gap:35px;justify-content:space-between;align-items:center;flex:1;flex-wrap:wrap}.brand-strip>div>span{font:650 18px var(--display);letter-spacing:-.5px;color:#56615b}.brand-strip>div>span:first-child{font-size:13px;letter-spacing:2px}.brand-strip>div>span:nth-child(3){font-family:Georgia,serif;font-weight:bold;letter-spacing:1px}.search-controls{display:flex;gap:18px;align-items:center}.search-controls select{font-size:11px;background:transparent;border:0;border-bottom:1px solid #bbc5bb;padding:10px 2px;max-width:145px}.catalog .product:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr}.catalog .product:last-child .product-art{height:235px}.catalog .product:last-child .product-body{padding:30px 36px}.catalog .product:last-child h3{font-size:29px}.catalog .product:last-child .product-footer{max-width:400px} @media(max-width:1050px){.brand-strip{align-items:flex-start;gap:20px}.brand-strip>div{gap:20px}.brand-strip>div>span{font-size:16px}.search{min-width:160px}.toolbar{align-items:flex-start}.tab{padding:10px 12px}.search-controls{gap:10px}} @media(max-width:760px){.brand-strip{flex-direction:column;gap:17px;padding:22px 0}.brand-strip>div{gap:19px 23px;justify-content:flex-start}.brand-strip>div>span{font-size:16px}.hero h1{font-size:42px;letter-spacing:-2px}.hero-note{font-size:8px;letter-spacing:.5px}.toolbar{align-items:stretch}.search-controls{gap:15px}.search-controls select{max-width:125px;width:125px}.search{min-width:0;flex:1}.catalog .product:last-child{display:flex;grid-column:auto}.catalog .product:last-child .product-art{height:212px}.catalog .product:last-child .product-body{padding:23px}.catalog .product:last-child h3{font-size:22px}}@media(max-width:380px){.hero h1{font-size:37px}} .languages{display:flex;align-items:center;gap:11px;font-size:10px;white-space:nowrap}.language-link{padding:7px 0;color:var(--muted)}.language-link[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--blue)}.nav{gap:25px}.nav-actions{gap:17px}nav{gap:22px}.markets{display:flex;gap:26px;align-items:center;border-top:1px solid var(--line);padding:18px 0 22px;font-size:12px}.markets>span{font-size:10px;color:var(--muted)}.markets i{font-style:normal;margin:0 13px;color:#aab5a9}.hero h1{font-size:clamp(40px,4.15vw,63px)}html[lang=en] .hero h1{font-size:clamp(43px,4.6vw,70px);letter-spacing:-2.6px;line-height:1.08}html[lang=ja] .hero h1{font-size:clamp(39px,3.7vw,55px);letter-spacing:-1.8px;line-height:1.38}html[lang=en] .hero-copy p,html[lang=ja] .hero-copy p{font-size:14px}html[lang=ja] h2{font-size:30px}html[lang=ja] .inquiry h2{font-size:37px}@media(max-width:1100px){.brand small{display:none}.nav{gap:18px}nav{gap:15px}.nav-actions{gap:12px}.nav-actions .btn{display:none}.search-controls select{width:125px}.tab{padding:10px}}@media(max-width:760px){.nav{gap:12px}.nav-actions{gap:14px}.brand{font-size:22px}.text-button{font-size:11px}.languages{gap:9px;font-size:9px}.markets{align-items:flex-start;flex-direction:column;gap:12px;font-size:11px}.markets>div{line-height:2}.markets i{margin:0 5px}.hero h1{font-size:42px}html[lang=en] .hero h1{font-size:47px}html[lang=ja] .hero h1{font-size:35px;letter-spacing:-1.8px}.visual-bottom small{max-width:150px}.visual-bottom strong{font-size:22px}html[lang=en] h2{font-size:31px}html[lang=ja] h2{font-size:27px}html[lang=ja] .inquiry h2{font-size:31px}.section-heading p{max-width:none}.form-top small{font-size:9px}.form-actions{flex-wrap:wrap}.form-actions .btn{justify-content:space-between}.form-actions .btn:first-child{min-width:160px}.toolbar .tabs{gap:0}.tab{font-size:10px;padding:9px 11px}.search-controls select{max-width:120px}.brand svg{width:20px}.brand{gap:7px}}@media(max-width:380px){.nav-actions{gap:10px}.nav-actions .text-button{font-size:10px}.brand{font-size:19px}.brand svg{width:19px}html[lang=en] .hero h1{font-size:43px}html[lang=ja] .hero h1{font-size:32px}.hero-copy .actions{gap:8px}.hero-copy .btn{font-size:11px;padding:12px 13px;gap:14px}} .starlink-section{padding:72px 0 76px;scroll-margin-top:95px}.starlink-section .section-heading{margin-bottom:32px}.starlink-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.starlink-product{border:1px solid #d2dccc;background:#fcfdf9;border-radius:9px;overflow:hidden;display:flex;flex-direction:column}.starlink-art{height:185px;background:#e5ebe0;position:relative;display:flex;align-items:center;justify-content:center}.starlink-art svg{width:100%;height:90%}.starlink-art small{position:absolute;bottom:8px;right:12px;font-size:8px;color:var(--muted)}.starlink-body{padding:23px 20px;flex:1;display:flex;flex-direction:column}.starlink-body>small{font-size:8px;font-weight:600;letter-spacing:.6px;min-height:12px;color:#637157}.starlink-body h3{font:650 23px var(--display);letter-spacing:-.6px;margin:13px 0}.starlink-body p{font-size:12px;line-height:1.85;color:var(--muted);margin:0 0 16px;min-height:88px}.spec-link{font-size:9px;color:#526247;margin-bottom:23px;text-decoration:underline;text-underline-offset:4px}.starlink-body .btn{margin-top:auto;width:100%;padding:12px 15px;gap:12px}.starlink-more{border-top:1px solid var(--line);margin-top:28px;padding-top:25px;display:grid;grid-template-columns:1.25fr 1fr;gap:50px}.starlink-more h3{font-size:15px;margin:0 0 10px;font-weight:600}.starlink-more p{font-size:11px;line-height:1.9;margin:0;color:var(--muted)}.extra-kits{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px}.extra-kits button{background:none;border:1px solid #c6d1be;border-radius:5px;font-size:10px;padding:10px}.extra-kits button:hover{background:#e7eddc}.source-note{font-size:9px;line-height:1.8;color:var(--muted);margin:22px 0 0}.more-catalog{border-top:1px solid var(--line)}.catalog .product:last-child{display:flex;grid-column:auto}.catalog .product:last-child .product-art{height:216px}.catalog .product:last-child .product-body{padding:23px}.catalog .product:last-child h3{font-size:22px}.catalog .product:last-child .product-footer{max-width:none}.product p{min-height:65px}.product-art{height:190px}.catalog .product:last-child .product-art{height:190px}.brand-strip>div>span:first-child{color:var(--ink);font-weight:750}.brand-strip>div{gap:25px}.hero h1{font-size:clamp(36px,3.65vw,55px)}html[lang=en] .hero h1{font-size:clamp(45px,4.7vw,71px)}html[lang=ja] .hero h1{font-size:clamp(37px,3.6vw,54px)}.nav{gap:20px}.nav nav{gap:18px}.visual-bottom small{max-width:190px}.hero-copy .btn{gap:20px}html[lang=ja] .workflow h2{font-size:26px}html[lang=ja] .step h3{font-size:15px;line-height:1.7}@media(max-width:1050px){.starlink-grid{grid-template-columns:repeat(2,1fr)}.starlink-body p{min-height:65px}.brand-strip>div{gap:19px}.nav nav{gap:13px}.hero-copy .actions{flex-wrap:wrap}}@media(max-width:760px){.starlink-section{padding:45px 0}.starlink-grid{grid-template-columns:1fr;gap:17px}.starlink-art{height:200px}.starlink-art svg{height:95%;width:80%}.starlink-body{padding:24px}.starlink-body p{min-height:0}.starlink-body .btn{width:auto}.starlink-more{grid-template-columns:1fr;gap:20px}.hero h1{font-size:36px;letter-spacing:-2px}html[lang=en] .hero h1{font-size:48px}html[lang=ja] .hero h1{font-size:37px}.product-art,.catalog .product:last-child .product-art{height:210px}.visual-bottom small{max-width:145px}.product p{min-height:0}.brand-strip>div{gap:18px}.starlink-body>small{font-size:9px}} @media(max-width:760px){.field input,.field select,.field textarea{font-size:16px}.field label{font-size:12px}} .field label span{margin-left:4px} /* Original manufacturer images, framed consistently without changing the assets. */ .starlink-art.official-photo{height:205px;background:#eef0ec;padding:10px 12px 25px;isolation:isolate} .starlink-art.official-photo .official-product-image{width:100%;height:100%;max-width:none;filter:drop-shadow(0 10px 7px #1721240b)} .starlink-art.official-photo .art-note{font-size:9px;bottom:11px;right:12px;left:12px;text-align:right;color:#687477} .starlink-art.comparison-photo{background:#111210;padding:0 0 28px} .starlink-art.comparison-photo .official-product-image{filter:none} .starlink-art.comparison-photo .art-note{color:#d4d9d1;text-align:center} @media(max-width:600px){.starlink-art.official-photo{height:230px}} /* ========================================================================== DELTA V - "Night" variant (inspired by dark, Apple-style distributor sites) Complete layer: use on top of the ORIGINAL base stylesheet only. No external resources. Comments are English because EN / JA pages are public. ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root{ color-scheme:dark; --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#8a8a90; --hair:rgba(255,255,255,.1); --hair-2:rgba(255,255,255,.2); --panel:radial-gradient(120% 90% at 100% 0,rgba(64,110,230,.1),transparent 46%),linear-gradient(145deg,#0c1017 0%,#080b11 100%); --spot:linear-gradient(180deg,#f1f2f5 0%,#e4e6eb 100%); --accent:#7aa7ff; --grad:linear-gradient(90deg,#5b8cff 0%,#a78bfa 50%,#ff9d6c 100%); --light:#f5f5f7; --r-xl:28px; --r-lg:20px; --r-md:14px; --stars:url("/assets/images/a4ee2f05042e5f77f1dba7c449a8b9cbd7cf7f0fad587749b7d1f4ba923d046b.svg"); /* legacy hooks used by the base stylesheet */ --paper:#000; --white:#11151d; --ink:#f5f5f7; --muted:#a1a1a6; --line:rgba(255,255,255,.1); --blue:#7aa7ff; --lime:#2b4d9c; --radius:20px; --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI Variable Display","Segoe UI",Roboto,Arial,sans-serif; --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI Variable Text","Segoe UI",Roboto,Arial,sans-serif; } html:lang(ja){ --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic Medium","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",Meiryo,sans-serif; --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic Medium","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",Meiryo,sans-serif; } html:lang(zh){ --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif; --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif; } /* 2. Base ------------------------------------------------------------------ */ html{background:#000} body{background:#000;color:var(--text);font-family:var(--body);text-rendering:optimizeLegibility;overflow-x:clip} ::selection{background:#2b4d9c;color:#fff} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #8fb4ff;outline-offset:3px} h1,h2,h3{font-weight:500;text-wrap:balance} .hero-copy p,.section-heading p,.starlink-body p,.product p,.step p,.inquiry-intro>p{text-wrap:pretty} html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3{font-feature-settings:"palt" 1;line-break:strict} .eyebrow{font-size:11px;letter-spacing:.2em;font-weight:500;color:var(--text-2)} .dot{width:6px;height:6px;background:var(--accent);box-shadow:0 0 12px 2px rgba(122,167,255,.7)} /* 3. Preview bar, header, buttons ------------------------------------------ */ .preview{background:#08090c;color:#8a8a90;border-bottom:1px solid var(--hair)} .preview span:last-child{color:#6e6e73} .header{background:rgba(0,0,0,.7);border-bottom:1px solid var(--hair);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)} .nav{height:68px} .brand{font-weight:600;letter-spacing:-.03em;color:#fff} .brand small{border-left-color:var(--hair-2);color:var(--text-3);letter-spacing:.16em} nav{font-size:13px} nav a{color:#d2d2d7} nav a:hover{color:#fff} .language-link{color:var(--text-3)} .language-link:hover{color:#fff} .language-link[aria-current=page]{color:#fff;border-bottom:2px solid var(--accent)} .text-button{color:#d2d2d7} .text-button:hover{color:#fff} .btn{background:#f5f5f7;border:1px solid #f5f5f7;color:#000;border-radius:999px;padding:13px 22px;font-weight:500;letter-spacing:0;gap:16px;transition:transform .18s,background .18s,border-color .18s,color .18s} .btn:hover{background:#fff;border-color:#fff;transform:translateY(-1px)} .btn.small{padding:9px 16px;gap:10px} .btn.outline{background:rgba(255,255,255,.04);color:#f5f5f7;border-color:var(--hair-2)} .btn.outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)} .btn.arrow:after{font-size:16px;transition:transform .18s} .btn.arrow:hover:after{transform:translate(2px,-2px)} /* 4. Hero: centred headline over the product, on a night sky ---------------- */ .hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;min-height:0;padding-top:88px;padding-bottom:0;isolation:isolate} .hero-scene:before{content:"";position:absolute;z-index:-2;top:-240px;bottom:-320px;left:50%;width:100vw;transform:translateX(-50%);background:radial-gradient(46% 30% at 50% 66%,rgba(64,110,230,.36) 0,rgba(26,46,110,.16) 48%,transparent 100%),radial-gradient(60% 26% at 50% 0,rgba(34,52,110,.3),transparent 100%);pointer-events:none} .hero-scene:after{content:"";position:absolute;z-index:-1;top:-240px;height:840px;left:50%;width:100vw;transform:translateX(-50%);background-image:var(--stars);background-size:800px 800px;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);opacity:.8;pointer-events:none} .hero-scene{position:relative;display:flex;flex-direction:column;align-items:center;width:100%} .hero-run{flex:none;align-self:stretch;height:var(--pin-x,0px)} .hero-copy{display:flex;flex-direction:column;align-items:center;max-width:1000px} .hero .eyebrow{justify-content:center} .hero h1{font-weight:500;font-size:clamp(46px,5.7vw,88px);line-height:1.06;letter-spacing:-.035em;margin:24px 0 24px} html:lang(ja) .hero h1{font-size:clamp(38px,4.7vw,70px);line-height:1.24;letter-spacing:-.02em} html:lang(zh) .hero h1{font-size:clamp(40px,4.9vw,74px);line-height:1.2;letter-spacing:-.02em} html:lang(en) .hero h1{font-size:clamp(46px,5.7vw,88px);line-height:1.06;letter-spacing:-.035em} .hero-title-model{white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .hero-copy p{max-width:660px;font-size:17px;line-height:1.75;color:var(--text-2)} html:lang(en) .hero-copy p,html:lang(ja) .hero-copy p{font-size:16px} .hero-copy .actions{justify-content:center;flex-wrap:wrap;margin-top:34px} .hero-note{justify-content:center;margin-top:28px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-3)} .hero-note .rule{display:none} .night-stage{position:relative;width:100%;max-width:1040px;margin:34px auto 0;padding:0 0 56px;display:flex;flex-direction:column;align-items:center} .night-hero-photo{display:block;width:min(720px,88%);height:auto;filter:drop-shadow(0 46px 44px rgba(0,0,0,.65))} .night-stage:after{content:"";position:absolute;left:8%;right:8%;bottom:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)} .night-stage .art-note{position:static;margin-top:44px;font-size:11px;letter-spacing:.06em;color:var(--text-3)} /* 5. Entry tiles, brand chips, markets, trust line -------------------------- */ .night-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px;margin-bottom:72px} .night-tile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:22px 22px 20px;border:1px solid var(--hair);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),radial-gradient(120% 90% at 50% 120%,rgba(60,104,220,.22),transparent 60%);color:var(--text);transition:border-color .2s,transform .2s,background .2s} .night-tile:hover{border-color:rgba(255,255,255,.34);transform:translateY(-3px)} .night-tile .nt-no{font:500 11px var(--mono);letter-spacing:.14em;color:var(--text-3)} .night-tile strong{margin-top:auto;font:500 21px/1.25 var(--display);letter-spacing:-.01em} .night-tile small{font-size:12px;line-height:1.5;color:var(--text-2);padding-right:28px} .night-tile i{position:absolute;right:20px;bottom:20px;font-style:normal;font-size:17px;color:var(--text-2);transition:transform .2s,color .2s} .night-tile:hover i{transform:translateX(4px);color:#fff} .night-tile:first-child{border-color:rgba(122,167,255,.45);background:linear-gradient(180deg,rgba(122,167,255,.14),rgba(255,255,255,.02)),radial-gradient(120% 90% at 50% 120%,rgba(60,104,220,.4),transparent 60%)} .night-tile:first-child .nt-no{color:var(--accent)} .brand-strip{flex-direction:column;align-items:center;gap:18px;border-top:0;padding:8px 0 30px} .brand-strip-label{font-size:15px;color:var(--text);white-space:normal} .brand-strip>div{flex:none;justify-content:center;gap:10px} .brand-strip>div>span:nth-child(n){padding:10px 18px;border:1px solid var(--hair);border-radius:12px;background:rgba(255,255,255,.045);font:500 12px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#d2d2d7} .brand-strip>div>span:first-child{color:#fff;border-color:rgba(122,167,255,.5)} .markets{flex-direction:column;align-items:center;gap:16px;border-top:0;padding:10px 0 44px;font-size:13px} .markets>span{font-size:15px;color:var(--text)} .markets>div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .markets .market-chip{padding:9px 18px;border:1px solid var(--hair);border-radius:999px;background:rgba(255,255,255,.045);color:#d2d2d7} .trustline{border:0;gap:14px;padding:0 0 12px} .trustline>div{padding:22px 22px;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--panel)} .trustline .num{font:500 11px var(--mono);color:var(--accent)} .trustline strong{font-size:14px;font-weight:500;color:var(--text)} .trustline p{font-size:12px;color:var(--text-2)} /* 6. Starlink: the flagship section ----------------------------------------- */ .starlink-section{position:relative;padding:120px 0 96px;isolation:isolate} .starlink-section:before{content:"";position:absolute;z-index:-1;top:0;height:900px;left:50%;width:100vw;transform:translateX(-50%);background-image:var(--stars),radial-gradient(60% 55% at 50% 30%,rgba(40,70,160,.3),transparent 70%);background-size:800px 800px,auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 55%,transparent 100%);pointer-events:none} .starlink-section .section-heading{flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:52px} .starlink-section .eyebrow{justify-content:center;color:var(--accent);letter-spacing:.34em} .starlink-section h2{font-size:clamp(34px,4.2vw,62px);line-height:1.12;letter-spacing:-.03em;margin:14px 0 0} html:lang(ja) .starlink-section h2,html:lang(zh) .starlink-section h2{font-size:clamp(30px,3.6vw,52px);line-height:1.3;letter-spacing:-.01em} .section-heading p{font-size:15px;line-height:1.8;color:var(--text-2);max-width:36em} .starlink-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px} .starlink-product{position:relative;display:grid;grid-template-columns:40% minmax(0,1fr);grid-column:8/13;border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--panel);overflow:hidden;transition:border-color .25s} .starlink-product:hover{border-color:rgba(255,255,255,.26)} .starlink-product:first-child{grid-column:1/8;grid-row:1/4;display:flex;flex-direction:column;border-color:rgba(122,167,255,.4)} .starlink-art,.starlink-art.official-photo{height:auto;min-height:190px;margin:8px 0 8px 8px;padding:0;border-radius:21px;background:var(--spot);isolation:isolate} .starlink-product:first-child .starlink-art{flex:1 1 auto;min-height:400px;margin:8px 8px 0} .starlink-art.official-photo .official-product-image{width:72%;height:auto;max-height:64%;filter:drop-shadow(0 14px 14px rgba(20,26,40,.14))} .starlink-product:first-child .starlink-art.official-photo .official-product-image{width:min(560px,70%);max-height:66%;filter:drop-shadow(0 22px 22px rgba(20,26,40,.16))} .starlink-art .model-mark{position:absolute;top:16px;left:18px;font:500 10.5px var(--mono);letter-spacing:.16em;color:#5a606c} .starlink-art.official-photo .art-note{left:18px;right:auto;bottom:13px;text-align:left;font-size:10.5px;letter-spacing:.04em;color:#7a808c} .featured-badge{position:absolute;top:12px;right:14px;padding:6px 12px;border-radius:999px;background:#12161f;color:#f5f5f7;font:500 11px/1.3 var(--body);letter-spacing:.06em} .starlink-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;gap:0 12px;padding:22px 22px} .starlink-body>small{grid-column:1/-1;min-height:0;font:500 10.5px/1.5 var(--body);letter-spacing:.12em;color:var(--text-3)} .starlink-body h3{grid-column:1/-1;font:500 23px/1.25 var(--display);letter-spacing:-.02em;margin:6px 0 8px;color:#fff} .starlink-body p{grid-column:1/-1;min-height:0;font-size:13px;line-height:1.75;color:var(--text-2);margin:0 0 16px} .spec-link{grid-column:1;justify-self:start;margin:0;font-size:12px;white-space:nowrap;color:var(--accent);text-decoration:none} .spec-link:hover{color:#fff;text-decoration:underline;text-underline-offset:4px} .starlink-body .btn{grid-column:2;width:auto;margin:0;padding:10px 16px;gap:10px;font-size:12.5px} .starlink-product:first-child .starlink-body{padding:28px 32px 30px} .starlink-product:first-child .starlink-body h3{font-size:38px;letter-spacing:-.03em;margin:8px 0 10px} .starlink-product:first-child .starlink-body p{font-size:15px;max-width:34em;margin-bottom:22px} .starlink-product:first-child .starlink-body .btn{padding:13px 22px;font-size:13.5px} .starlink-more{margin-top:16px;padding:26px 28px;border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--panel);grid-template-columns:1.15fr 1fr;gap:36px;align-items:center} .starlink-more h3{font-size:16px;font-weight:500;color:#fff} .starlink-more p{font-size:13px;line-height:1.8;color:var(--text-2)} .extra-kits{gap:10px} .extra-kits button{border:1px solid var(--hair-2);border-radius:999px;background:rgba(255,255,255,.04);font-size:12.5px;padding:11px 18px;color:#f5f5f7;transition:background .18s,border-color .18s,color .18s} .extra-kits button:hover{background:#f5f5f7;border-color:#f5f5f7;color:#000} .source-note{font-size:11px;line-height:1.8;color:var(--text-3);max-width:76em;margin-top:22px} /* 7. Catalogue: the same dark glass cards and light photo tiles as Starlink --- One flat, quiet tile behind every photograph: light enough that white-background pictures blend in, with no glow or vignette. */ .more-catalog{border-top:0;padding:110px 0 96px} .more-catalog .section-heading{flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:40px} .more-catalog .eyebrow{justify-content:center;color:var(--text-2);letter-spacing:.3em} .more-catalog h2{font-size:clamp(32px,3.8vw,56px);line-height:1.12;letter-spacing:-.03em;margin:14px 0 0} html:lang(ja) .more-catalog h2,html:lang(zh) .more-catalog h2{font-size:clamp(28px,3.3vw,48px);line-height:1.3;letter-spacing:-.01em} .toolbar{margin-bottom:28px} .tab{border:1px solid transparent;border-radius:999px;padding:9px 17px;font-size:13px;color:#d2d2d7;transition:background .2s ease,color .2s ease,border-color .2s ease} .tab:hover{background:rgba(255,255,255,.08);color:#fff} .tab[aria-pressed=true],.tab[aria-pressed=true]:hover{background:#f5f5f7;color:#000} .search-controls select{font-size:13px;color:#f5f5f7;background:transparent;border-bottom-color:var(--hair-2);border-radius:0} .search{border-bottom-color:var(--hair-2);color:var(--text-3)} .search input{font-size:13px;color:#f5f5f7} .search input::placeholder{color:var(--text-3)} .search:focus-within{border-color:#f5f5f7;box-shadow:0 1px 0 #f5f5f7} .catalog{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .product{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-xl);transition:transform .3s ease,border-color .2s ease,box-shadow .3s ease} .product:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26);box-shadow:0 28px 60px -34px rgba(0,0,0,.9)} .catalog .product:nth-child(n) .product-art{height:auto;aspect-ratio:4/3;margin:8px 8px 0;padding:0;border-radius:21px;background:var(--spot);isolation:isolate} .product-art .product-tag,.product-art.real-product .product-tag{top:15px;left:17px;right:17px;z-index:2;font-size:10.5px;letter-spacing:.1em;font-weight:500;color:#5a606c} .product-art .art-note,.product-art.real-product .art-note{left:17px;right:17px;bottom:13px;z-index:2;max-width:none;text-align:left;font-size:10.5px;line-height:1.4;letter-spacing:.02em;color:#7a808c} .product-art.real-product .catalog-product-photo{ display:block;position:absolute;top:18%;left:14%;width:72%;height:62%;max-width:none;max-height:none; object-fit:contain;object-position:var(--photo-pos,center); mix-blend-mode:var(--photo-blend,multiply); filter:var(--photo-shadow,none); transform:translateY(var(--photo-y,0%)) scale(var(--photo-scale,1)); } .real-product.product-kindle{--photo-scale:1.3} .real-product.product-pokemon,.real-product.product-onepiece{--photo-blend:normal;--photo-scale:1.08;--photo-shadow:drop-shadow(0 10px 12px rgba(20,26,40,.2))} .real-product.product-meta{--photo-blend:normal;--photo-scale:.96;--photo-shadow:drop-shadow(0 14px 14px rgba(20,26,40,.14))} .real-product.product-ps5{--photo-blend:normal;--photo-shadow:drop-shadow(0 14px 14px rgba(20,26,40,.14))} .real-product.product-nintendo{--photo-blend:normal;--photo-scale:1.18;--photo-y:-9%;--photo-shadow:drop-shadow(0 12px 12px rgba(20,26,40,.16))} .real-product.product-xbox{--photo-blend:normal;--photo-scale:1.04} .real-product.product-steam{--photo-blend:normal;--photo-scale:1.12;--photo-y:-4%} .product-art:not(.real-product) svg{width:64%;height:64%;filter:grayscale(1);opacity:.8} .catalog .product:nth-child(n) .product-body{padding:20px 24px 22px} .product-kind{font-size:10.5px;letter-spacing:.14em;font-weight:500;color:var(--text-3)} .catalog .product:nth-child(n) h3{font:500 22px/1.25 var(--display);letter-spacing:-.02em;margin:7px 0 8px;color:#fff} html:lang(ja) .catalog .product:nth-child(n) h3,html:lang(zh) .catalog .product:nth-child(n) h3{font-size:20px;letter-spacing:-.01em} .product p{font-size:13px;line-height:1.75;color:var(--text-2);margin:0 0 18px;min-height:0} .product-footer{border-top:1px solid var(--hair);padding-top:16px} .product-footer>span{font-size:11.5px;color:var(--text-3)} .product-footer button{border:1px solid var(--hair-2);border-radius:999px;background:rgba(255,255,255,.04);padding:9px 15px;font-size:12.5px;font-weight:500;gap:8px;color:#f5f5f7;transition:background .2s ease,border-color .2s ease,color .2s ease} .product-footer button:hover{background:#f5f5f7;border-color:#f5f5f7;color:#000} .product-footer button span{font-size:15px} .catalog-note{font-size:12px;line-height:1.8;color:var(--text-3);max-width:76em;margin-top:24px} .empty{background:var(--panel);border:1px dashed var(--hair-2);border-radius:var(--r-xl);color:var(--text-2)} @supports (grid-template-rows:subgrid){ .catalog{row-gap:0;margin-bottom:-16px} .catalog .product:nth-child(n){display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);grid-row:span 5;margin-bottom:16px} .catalog .product:nth-child(n) .product-body{grid-row:2/span 4;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)} .product-footer{align-self:end} } /* 8. Process, enquiry, footer, dialogs -------------------------------------- */ .workflow{margin-top:96px;margin-bottom:96px;padding:56px 56px 52px;border:1px solid var(--hair);border-radius:var(--r-xl);background:radial-gradient(60% 90% at 50% 0,rgba(60,104,220,.16),transparent 70%),var(--panel);color:var(--text)} .workflow .eyebrow{color:var(--text-3)} .workflow h2{font-size:clamp(26px,2.8vw,40px);letter-spacing:-.025em;line-height:1.2} html:lang(ja) .workflow h2,html:lang(zh) .workflow h2{font-size:clamp(24px,2.5vw,34px);line-height:1.4;letter-spacing:0} .workflow .section-heading p{color:var(--text-2)} .step{border-top:1px solid var(--hair-2)} .step>span{font:500 11.5px var(--mono);letter-spacing:.12em;color:var(--accent)} .step h3{font-weight:500;color:#fff} .step p{font-size:13px;color:var(--text-2)} .inquiry h2{font-weight:500;letter-spacing:-.03em} html:lang(ja) .inquiry h2,html:lang(zh) .inquiry h2{letter-spacing:-.01em} .inquiry-intro>p{color:var(--text-2)} .inquiry-points li{font-size:13px;color:#d2d2d7} .check{background:rgba(122,167,255,.16);color:#a9c4ff;font-size:10px} .preview-note{border-left-color:var(--hair-2);font-size:12px;color:var(--text-3)} .inquiry-form{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-xl);padding:34px} .form-top{border-bottom-color:var(--hair)} .form-top strong{font-weight:500;color:#fff} .form-top small{font-size:11px;color:var(--text-3)} .field label{font-size:12px;font-weight:500;color:#d2d2d7} .field label span{color:var(--text-3)} .field input,.field select,.field textarea{border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#07090c;color:#f5f5f7;transition:border-color .15s,background .15s} .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,255,255,.32)} .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:#8fb4ff;outline-offset:1px} .field input::placeholder,.field textarea::placeholder{color:#6e6e73} .form-bottom p{font-size:11px;color:var(--text-3)} .save-status{color:#7ee0a3} .footer{border-top:1px solid var(--hair);background:#000} .footer-copy{color:var(--text-3)} .footer-links{font-size:12px;color:#d2d2d7} .footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px} .footer-bottom{border-top-color:var(--hair);font-size:11px;color:var(--text-3)} dialog{background:#101319;color:var(--text);border:1px solid var(--hair-2);border-radius:24px;box-shadow:0 40px 120px -20px rgba(0,0,0,.9)} dialog::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .dialog-top h2{font-weight:500} .dialog-note{color:var(--text-2)} .close{border-color:var(--hair-2);background:rgba(255,255,255,.08);color:#fff} .summary{background:#07090c;border:1px solid var(--hair);border-radius:14px;color:#e8e8ed} .portal-item{border-color:var(--hair);border-radius:14px;background:rgba(255,255,255,.03)} .portal-item small{color:var(--text-2)} /* 9. Responsive ------------------------------------------------------------- */ @media(min-width:761px){ .field input,.field select,.field textarea{font-size:13.5px} } @media(max-width:1320px) and (min-width:1051px){ .starlink-product:not(:first-child) .starlink-body{grid-template-columns:minmax(0,1fr)} .starlink-product:not(:first-child) .starlink-body .spec-link{margin-bottom:12px} .starlink-product:not(:first-child) .starlink-body .btn{grid-column:1;justify-self:start} } @media(max-width:1050px){ .night-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .starlink-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .starlink-product{grid-column:auto;display:flex;flex-direction:column} .starlink-product:first-child{grid-column:1/-1;grid-row:auto} .starlink-art,.starlink-art.official-photo{aspect-ratio:16/10;min-height:0;margin:8px 8px 0} .starlink-product:first-child .starlink-art{aspect-ratio:16/8;min-height:0;flex:none} .starlink-body{grid-template-columns:minmax(0,1fr);align-content:start;flex:1;padding:20px} .starlink-body .spec-link{margin-bottom:14px} .starlink-body .btn{grid-column:1;justify-self:start} .starlink-product:first-child .starlink-body{grid-template-columns:minmax(0,1fr) auto} .starlink-product:first-child .starlink-body .spec-link{margin-bottom:0} .starlink-product:first-child .starlink-body .btn{grid-column:2} .more-catalog{padding:84px 0 72px} .workflow{padding:40px 36px} } @media(max-width:980px){ .catalog{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px} } @media(max-width:760px){ .nav{height:60px} .hero{padding-top:52px} .hero h1{font-size:44px;margin:20px 0 18px} html:lang(ja) .hero h1{font-size:36px;letter-spacing:-.02em} html:lang(zh) .hero h1{font-size:38px} html:lang(en) .hero h1{font-size:44px} .hero-copy p,html:lang(en) .hero-copy p,html:lang(ja) .hero-copy p{font-size:14.5px;max-width:100%} .hero-copy .actions{margin-top:26px;gap:10px} .hero .eyebrow{font-size:9.5px;letter-spacing:.14em;white-space:nowrap} .hero-note{font-size:10px;letter-spacing:.1em;margin-top:22px} .night-stage{margin-top:22px;padding-bottom:40px} .night-hero-photo{width:96%} .night-stage:after{bottom:22px} .night-stage .art-note{margin-top:34px;font-size:10.5px} .night-tiles{gap:10px;margin-bottom:48px} .night-tile{min-height:128px;padding:16px 16px 16px} .night-tile strong{font-size:17px} .night-tile small{font-size:11px;padding-right:20px} .night-tile i{right:14px;bottom:14px} .brand-strip{padding:4px 0 26px} .brand-strip>div{gap:8px} .brand-strip>div>span:nth-child(n){padding:8px 13px;font-size:11px} .markets{align-items:center;padding:6px 0 34px} .markets>div{line-height:1.4;gap:8px} .markets .market-chip{padding:8px 14px} .trustline{grid-template-columns:minmax(0,1fr);gap:10px;padding:0} .trustline>div{padding:18px} .starlink-section{padding:76px 0 60px} .starlink-section .section-heading{margin-bottom:32px;align-items:center} .starlink-grid{grid-template-columns:minmax(0,1fr);gap:14px} .starlink-product:first-child .starlink-art{aspect-ratio:16/10} .starlink-product:first-child .starlink-body{grid-template-columns:minmax(0,1fr);padding:22px 20px 24px} .starlink-product:first-child .starlink-body h3{font-size:30px} .starlink-product:first-child .starlink-body p{font-size:14px} .starlink-product:first-child .starlink-body .spec-link{margin-bottom:16px} .starlink-product:first-child .starlink-body .btn{grid-column:1;justify-self:stretch} .starlink-body .btn{justify-self:stretch;justify-content:space-between;padding:12px 18px} .starlink-more{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 20px} .more-catalog{padding:60px 0 52px} .more-catalog .section-heading{align-items:center;margin-bottom:26px} .section-heading p{font-size:13.5px} .tab{font-size:12.5px;padding:9px 13px} .search-controls{flex-wrap:wrap} .search-controls select{flex:1 1 150px;width:auto;max-width:none;font-size:16px} .search{flex:1 1 180px} .search input{font-size:16px} .workflow{margin-top:56px;margin-bottom:56px;padding:30px 22px;border-radius:22px} .inquiry-form{padding:22px 18px;border-radius:22px} .footer-bottom{font-size:10.5px} } @media(max-width:620px){ .catalog{grid-template-columns:minmax(0,1fr)} } @media(prefers-reduced-motion:reduce){ .btn,.btn.arrow:after,.product,.extra-kits button,.tab,.night-tile,.night-tile i,.starlink-product,.product-footer button{transition:none} .btn:hover,.product:hover,.night-tile:hover{transform:none} } /* 11. Orbit ----------------------------------------------------------------- The hero is three depths, like looking out of a spacecraft window: stars and glow (far), the product (middle), the planet's horizon (near). The planet is drawn live by claude-night-globe.js. The markets block becomes a section with the same planet seen whole. */ .hero{padding-top:clamp(36px,6.5vh,84px)} .hero h1{font-size:clamp(40px,min(5.4vw,9.4vh),86px);margin:18px 0 16px} html:lang(en) .hero h1{font-size:clamp(40px,min(5.4vw,9.4vh),86px)} html:lang(ja) .hero h1{font-size:clamp(34px,min(4.5vw,7.8vh),68px);line-height:1.2} html:lang(zh) .hero h1{font-size:clamp(36px,min(4.7vw,8vh),72px);line-height:1.18} .hero-copy p,html:lang(en) .hero-copy p,html:lang(ja) .hero-copy p{max-width:600px;font-size:15px;line-height:1.7} .hero-copy .actions{margin-top:22px} .hero-note{margin-top:18px;font-size:10.5px} .night-stage{position:static;z-index:auto;margin-top:clamp(10px,2.4vh,28px);padding-bottom:150px} .night-stage:before{content:"";position:absolute;z-index:1;left:50%;bottom:190px;width:min(1100px,96vw);height:560px;transform:translate(-50%,50%);background:radial-gradient(closest-side,rgba(255,176,120,.5) 0,rgba(255,140,90,.2) 22%,rgba(90,130,255,.2) 48%,transparent 74%);pointer-events:none} .night-stage:after{display:none} .night-hero-photo{position:relative;z-index:2;width:min(640px,80%,64vh)} .orbit-limb{position:absolute;z-index:3;left:50%;top:calc(100% - 450px - var(--pin-x,0px));width:100vw;height:1240px;overflow:hidden;transform:translateX(-50%);pointer-events:none} /* Points are only drawn where they can be seen: the upper two thirds. */ .orbit-limb .dv-g-dots,.orbit-limb .dv-g-fx{height:66%} /* The planet stays solid all the way down (it has to hide what it passes over); its light and its points sink into black instead. */ .orbit-limb:after{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 44%,#000 62%);pointer-events:none} .night-tiles{position:relative;z-index:4;margin-top:calc(-64px - var(--pin-x,0px))} .brand-strip{position:relative;z-index:4} .night-tile{background:linear-gradient(180deg,rgba(20,27,46,.9),rgba(8,11,20,.92))} .night-tile:first-child{background:linear-gradient(180deg,rgba(38,62,124,.9),rgba(10,14,28,.92))} /* The globe: CSS draws the body and its atmosphere, the script draws the land. */ .dv-g-body{position:absolute;left:var(--g-x,50%);top:var(--g-y,50%);width:var(--g-d,0px);height:var(--g-d,0px);translate:-50% -50%;border-radius:50%;font-size:calc(var(--g-d,0px)/41);pointer-events:none} .dv-g-body i{position:absolute;inset:0;border-radius:50%} .dv-g-base{background:radial-gradient(circle at 73% -13%,rgba(240,96,38,.96) 0,rgba(168,60,16,.62) 15%,rgba(60,24,4,.42) 29%,rgba(0,0,0,0) 45%),radial-gradient(circle at 25% 117%,#0d3bff 0,rgba(9,46,208,.86) 19%,rgba(4,25,124,.56) 39%,rgba(0,0,0,0) 60%),#000;box-shadow:.07em -.07em .16em #ffc590,.55em -.6em 1.3em rgba(255,128,70,.85),-.07em .07em .16em rgba(150,205,255,.9),-.6em .9em 3em rgba(5,72,222,.85)} .dv-g-rim{background:radial-gradient(circle closest-side,rgba(143,233,255,0) 95.6%,rgba(143,233,255,.95) 99.2%,rgba(143,233,255,.25) 100%);-webkit-mask-image:linear-gradient(45deg,#000 0,#000 30%,transparent 56%);mask-image:linear-gradient(45deg,#000 0,#000 30%,transparent 56%)} .dv-g-peach{background:radial-gradient(circle closest-side,rgba(255,214,184,0) 96.2%,rgba(255,214,184,.95) 99.2%,rgba(255,214,184,.25) 100%);-webkit-mask-image:linear-gradient(225deg,#000 0,#000 27%,transparent 52%);mask-image:linear-gradient(225deg,#000 0,#000 27%,transparent 52%)} /* seen from the horizon the light comes over the top edge: a blue atmosphere with a thin bright line */ [data-dv-globe=limb] .dv-g-base{background:radial-gradient(circle closest-side,#000 0,#000 79%,#051a66 88%,#1f55ee 96.4%,#77b6ff 99.2%,#d8ecff 100%);box-shadow:0 0 .14em #d8ecff,0 0 1.1em rgba(70,130,255,.8)} [data-dv-globe=limb] .dv-g-rim,[data-dv-globe=limb] .dv-g-peach{background:none;-webkit-mask-image:none;mask-image:none} .dv-g-dots,.dv-g-fx{position:absolute;inset:0;width:100%;height:100%;display:block} .dv-g-fx{touch-action:pan-y;cursor:grab} .dv-globe.is-dragging .dv-g-fx{cursor:grabbing} .dv-g-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none} .dv-g-labels span{position:absolute;padding:5px 8px;translate:-50% calc(-100% - 9px);border:1px solid rgba(255,255,255,.2);border-radius:6px;background:rgba(3,6,13,.88);color:#fff;font:600 10.5px/1 var(--body);letter-spacing:.06em;white-space:nowrap;opacity:0;transition:opacity .14s ease} .dv-g-labels span.is-visible{opacity:1} /* Markets: a full-height section with the globe large on the right, running off the edge */ .orbit-section{position:relative;overflow:hidden;isolation:isolate;min-height:min(100vh,940px);display:flex;align-items:center;margin-top:8px} .orbit-section:after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,#000 0,rgba(0,0,0,.86) 3%,transparent 12%,transparent 88%,rgba(0,0,0,.86) 97%,#000 100%);pointer-events:none} .orbit-inner{position:relative;z-index:4;pointer-events:none} .orbit-copy{width:min(500px,42vw);pointer-events:auto} .orbit-section .markets{align-items:flex-start;gap:22px;padding:0 0 34px} .orbit-section .markets>span{font:500 clamp(34px,4.4vw,68px)/1.04 var(--display);letter-spacing:-.04em;color:#fff;text-wrap:balance} html:lang(ja) .orbit-section .markets>span,html:lang(zh) .orbit-section .markets>span{font-size:clamp(30px,3.6vw,54px);line-height:1.24;letter-spacing:-.02em} html:lang(en) .orbit-section .markets>span{text-transform:lowercase} html:lang(en) .orbit-section .markets>span:first-letter{text-transform:uppercase} .orbit-section .markets>div{justify-content:flex-start} .orbit-section .trustline{grid-template-columns:minmax(0,1fr);gap:10px;padding:0} .orbit-section .trustline>div{padding:18px 20px} .orbit-globe{position:absolute;z-index:2;top:50%;right:clamp(-420px,-17vw,-250px);width:calc(min(1040px,96vh) + 300px);height:min(1040px,96vh);transform:translateY(-50%)} .orbit-globe .dv-globe{position:relative;display:block;width:100%;height:100%} @media(max-width:1050px){ .night-stage{padding-bottom:128px} .night-stage:before{bottom:166px} .orbit-limb{top:calc(100% - 426px);height:900px} .orbit-section{flex-direction:column;align-items:stretch;min-height:0} .orbit-inner{order:2;margin-top:-90px;padding-bottom:36px} .orbit-copy{width:auto} .orbit-globe{position:relative;order:1;top:auto;right:auto;left:50%;width:150vw;height:126vw;max-height:900px;transform:translateX(-50%)} .orbit-section .markets{align-items:center;text-align:center} .orbit-section .markets>div{justify-content:center} } @media(max-width:760px){ .hero{padding-top:34px} .hero h1,html:lang(en) .hero h1{font-size:clamp(34px,10.6vw,44px);margin:16px 0 14px} html:lang(ja) .hero h1{font-size:clamp(30px,9.2vw,38px)} html:lang(zh) .hero h1{font-size:clamp(31px,9.6vw,40px)} .hero-copy p,html:lang(en) .hero-copy p,html:lang(ja) .hero-copy p{font-size:14px} .night-stage{margin-top:14px;padding-bottom:104px} .night-hero-photo{width:92%} .night-stage:before{bottom:118px;height:380px} .orbit-limb{top:calc(100% - 318px);height:680px} .night-tiles{margin-top:-40px} .orbit-section .markets>span,html:lang(ja) .orbit-section .markets>span,html:lang(zh) .orbit-section .markets>span{font-size:28px} .orbit-inner{margin-top:-18px} } /* 12. Motion ----------------------------------------------------------------- Rebuilt from the reference site's source code rather than from how it looks: - entrance: a 20px rise with a fade, 1s ease, separated only by delay - hero: product and planet are tied directly to scroll position at different rates; the copy fades by scroll position as they rise (the reference pins a one-line title instead, which does not suit a text block this size) - sections: each one arrives once, as a single piece - depth: values are set from scroll position and eased towards each frame Nothing is triggered on a timer after the first second, nothing blurs, tilts or follows the pointer. Gated on html.js-motion, which is not set when the visitor asks for reduced motion. */ :root{--ease:cubic-bezier(.22,1,.36,1)} .reveal{animation:none} .header{transition:background .3s ease,border-color .3s ease} .header.is-scrolled{background:rgba(0,0,0,.86);border-bottom-color:rgba(255,255,255,.16)} /* 12a. Entrance */ @keyframes dvIn{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}} @keyframes dvFade{from{opacity:0}to{opacity:1}} .js-motion .orbit-limb{animation:dvFade 1.6s ease .1s both} .js-motion .night-stage:before{animation:dvFade 2s ease .4s both} .js-motion .hero .eyebrow{animation:dvIn 1s ease .2s both} .js-motion .hero h1{animation:dvIn 1s ease .35s both} .js-motion .hero-copy p{animation:dvIn 1s ease .5s both} .js-motion .hero-copy .actions{animation:dvIn 1s ease .62s both} .js-motion .hero-note{animation:dvIn 1s ease .72s both} .js-motion .night-hero-photo{animation:dvIn 1s ease .95s both} .js-motion .night-tile{animation:dvIn 1s ease 1.15s both} .js-motion .night-tile:nth-child(2){animation-delay:1.3s} .js-motion .night-tile:nth-child(3){animation-delay:1.45s} .js-motion .night-tile:nth-child(4){animation-delay:1.6s} /* 12b. Hero. Measured on the running reference page: the headline holds its place for about two thirds of a screen while the foreground rises 1.32 times as fast as the page and passes over it. Here the scene (copy and product) is held and the planet is the foreground: it rises in front of the product, then the copy, like a curtain. The script adds .is-pinned when the scene fits the window, sets --pin-x (the distance the rise needs), --stage and --front in px, and adds .is-gone once the scene is completely behind the planet. On narrow or short windows nothing is held and the planet simply moves with the page. */ .orbit-limb{transform:translateX(-50%) translate3d(0,calc(var(--stage,0px) + var(--front,0px)),0)} .hero-scene:after,.hero-scene .dv-twinkle{transform:translateX(-50%) translate3d(0,var(--mid,0px),0)} .js-motion .orbit-limb{will-change:transform} .js-motion .hero.is-pinned .hero-scene{position:sticky;top:calc(var(--head-h,62px) + 56px)} .js-motion .hero.is-pinned .hero-scene.is-gone{visibility:hidden} .js-motion .hero.is-pinned .orbit-limb .dv-g-base{pointer-events:auto} .hero-copy .art-note{position:static;margin:12px 0 0;font-size:11px;letter-spacing:.06em;color:var(--text-3)} @media(min-width:1051px){ .hero h1,html:lang(en) .hero h1{font-size:clamp(40px,min(5.7vw,9.4vh),88px);margin:20px 0 18px} html:lang(ja) .hero h1{font-size:clamp(34px,min(4.7vw,7.8vh),70px)} html:lang(zh) .hero h1{font-size:clamp(36px,min(4.9vw,8.2vh),74px)} .night-hero-photo{width:min(660px,80%,64vh)} } @media(min-width:1051px) and (max-height:980px){ .hero-note{display:none} } @media(min-width:1051px) and (max-height:860px){ .hero h1,html:lang(en) .hero h1{margin:14px 0 14px} .hero-copy .actions{margin-top:16px} .night-hero-photo{width:min(660px,80%,50vh)} } /* 12c. Sky: a second star layer that slowly fades in and out, and a satellite train */ @keyframes dvTwinkle{from{opacity:0}to{opacity:.85}} @keyframes dvTrain{0%{opacity:0;translate:-22vw 0}5%{opacity:.75}36%{opacity:.75}44%,100%{opacity:0;translate:122vw -35vw}} .dv-twinkle{position:absolute;z-index:-1;top:-240px;height:840px;left:50%;width:100vw;background-image:var(--stars);background-size:520px 520px;background-position:130px 60px;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);pointer-events:none;animation:dvTwinkle 6s ease-in-out infinite alternate;animation-play-state:paused} .starlink-section .dv-twinkle{top:0;height:900px;transform:translateX(-50%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 55%,transparent 100%)} .dv-train{position:absolute;z-index:-1;top:-20px;left:50%;width:100vw;height:520px;transform:translateX(-50%);overflow:hidden;pointer-events:none} .dv-train i{position:absolute;left:0;top:96%;width:168px;height:3px;background:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.5px) 0 0/14px 3px repeat-x;opacity:0;rotate:-14deg;animation:dvTrain 22s linear 4s infinite;animation-play-state:paused} .is-sky-live>.dv-twinkle,.is-sky-live>.dv-train i{animation-play-state:running} /* 12d. Arrival. Whole blocks rise 64px as one piece; cards inside a block rise 34px one after another, 80ms apart (the script sets the delay). Distances, durations and the curve are the reference's own. Once an element has arrived the script removes data-rise, so its ordinary hover styles apply again. */ .js-motion:not(.dv-ready) .brand-strip,.js-motion:not(.dv-ready) .orbit-section,.js-motion:not(.dv-ready) .starlink-section .section-heading,.js-motion:not(.dv-ready) .starlink-product,.js-motion:not(.dv-ready) .starlink-more,.js-motion:not(.dv-ready) .amazon-section .section-heading,.js-motion:not(.dv-ready) .lineup-head,.js-motion:not(.dv-ready) .model-card,.js-motion:not(.dv-ready) .more-catalog .section-heading,.js-motion:not(.dv-ready) .toolbar,.js-motion:not(.dv-ready) .catalog .product,.js-motion:not(.dv-ready) .workflow .section-heading,.js-motion:not(.dv-ready) .step,.js-motion:not(.dv-ready) .inquiry-intro,.js-motion:not(.dv-ready) .inquiry-form{opacity:0} .js-motion [data-rise]{opacity:0;transform:translate3d(0,64px,0) scale(.985);transition:opacity .85s ease,transform .95s var(--ease);will-change:opacity,transform} .js-motion [data-rise=s]{transform:translate3d(0,34px,0);transition:opacity .72s ease,transform .82s var(--ease)} .js-motion [data-rise].is-in{opacity:1;transform:none} /* 12e. Depth. Values are set from scroll position and eased towards each frame. Markets: copy and globe drift slightly apart. Flagship: the photo settles from slightly large. */ .js-motion .orbit-globe{transform:translateY(-50%) translate3d(0,var(--gy,0px),0)} .js-motion .orbit-copy{transform:translate3d(0,var(--cy,0px),0)} .js-motion .starlink-product:first-child .starlink-art .official-product-image{scale:var(--zoom,1);transition:none} /* 12f. Entry tiles: a gradient line that travels along the lower edge and closes into a border on hover */ @keyframes dvBorder{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .night-tile:before{content:"";position:absolute;inset:0;padding:0 0 1px;border-radius:inherit;background:linear-gradient(90deg,#5b8cff,#a78bfa,#ff9d6c,#a78bfa,#5b8cff) 0 50%/300% 300%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none} .night-tile:hover:before{padding:1.5px} .js-motion .night-tile:before{animation:dvBorder 6s ease infinite} @keyframes dvPulse{0%,100%{box-shadow:0 0 10px 1px rgba(122,167,255,.55)}50%{box-shadow:0 0 16px 4px rgba(122,167,255,.9)}} .js-motion .dot{animation:dvPulse 2.4s ease-in-out infinite} @media(max-width:1050px){ .js-motion .orbit-globe{transform:translateX(-50%) translate3d(0,var(--gy,0px),0)} } @media(max-width:760px){ .dv-train i{width:112px} } @media print{ .js-motion [data-rise],.js-motion .hero *,.js-motion .night-tile{opacity:1!important;transform:none!important;translate:none!important;animation:none!important} } /* 13. Company and contact --------------------------------------------------- */ .wa-icon{width:17px;height:17px;flex:none} .btn.wa-btn{gap:8px;border-color:rgba(37,211,102,.5);color:#f5f5f7} .btn.wa-btn:hover{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.85)} .btn.wa-btn .wa-icon{color:#3ddc7c} .contact-direct{margin:6px 0 30px} .contact-direct .btn{padding:13px 20px;gap:10px} .contact-direct .btn b{font-weight:500;color:var(--text-2);margin-left:6px;letter-spacing:.01em} .footer-company{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12px;line-height:1.6;color:#d2d2d7} .footer-company a{color:var(--text-2)} .footer-company a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px} @media(max-width:1100px){ .nav-actions .btn.wa-btn{display:inline-flex;padding:0;width:36px;height:36px;justify-content:center;border-radius:50%} .nav-actions .btn.wa-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} } @media(max-width:760px){ .contact-direct .btn{width:100%;justify-content:center;flex-wrap:wrap} .footer-company{flex-direction:column} } /* 14. Language menu ---------------------------------------------------------- */ .lang-menu{position:relative;font-size:12px} .lang-menu summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;padding:8px 12px 8px 10px;border:1px solid var(--hair);border-radius:999px;color:#d2d2d7;white-space:nowrap;transition:border-color .2s ease,color .2s ease} .lang-menu summary::-webkit-details-marker{display:none} .lang-menu summary:hover,.lang-menu[open] summary{color:#fff;border-color:var(--hair-2)} .globe-icon{width:15px;height:15px;flex:none} .lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:grid;gap:2px;min-width:156px;padding:6px;border:1px solid var(--hair-2);border-radius:14px;background:#101319;box-shadow:0 24px 60px -20px rgba(0,0,0,.9)} .lang-list .language-link{padding:9px 12px;border-bottom:0;border-radius:9px;font-size:13px;color:#d2d2d7} .lang-list .language-link:hover{background:rgba(255,255,255,.08);color:#fff} .lang-list .language-link[aria-current=page]{border-bottom:0;background:rgba(122,167,255,.16);color:#fff} @media(max-width:760px){ .lang-menu summary{padding:7px 10px 7px 8px} } /* 15. Longer languages ------------------------------------------------------- */ /* The side cards always stack link over button: Spanish and Portuguese labels do not fit on one line. */ @media(min-width:1051px){ .starlink-product:not(:first-child) .starlink-body{grid-template-columns:minmax(0,1fr)} .starlink-product:not(:first-child) .starlink-body .spec-link{margin-bottom:12px;white-space:normal} .starlink-product:not(:first-child) .starlink-body .btn{grid-column:1;justify-self:start} } /* 16. Interaction -------------------------------------------------------------- Taken from how the reference page behaves when it runs, not from how it looks: ribbons tied to scroll position, cards that answer the pointer with one curve, panels that open instead of appearing, a catalogue that rearranges instead of blinking, and in-page jumps that travel. All of it is off under reduced motion. */ /* 16a. Brand ribbons: two rows sliding in opposite directions with the scroll position (--x is set by the script) */ .brand-strip>.brand-rows{display:grid;gap:12px;flex:none;width:100%} .brand-row{display:flex;justify-content:center} .brand-track{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .brand-track span{padding:10px 18px;border:1px solid var(--hair);border-radius:12px;background:rgba(255,255,255,.045);font:500 12px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#d2d2d7;white-space:nowrap} .brand-track span.is-lead{color:#fff;border-color:rgba(122,167,255,.5)} .brand-track .is-echo,.brand-row.is-echo{display:none} .js-motion .brand-rows{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 8%,#000 24%,#000 76%,rgba(0,0,0,.3) 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 8%,#000 24%,#000 76%,rgba(0,0,0,.3) 92%,transparent 100%)} .js-motion .brand-row.is-echo{display:flex} .js-motion .brand-track{flex:none;flex-wrap:nowrap;width:max-content;transform:translate3d(var(--x,0px),0,0);will-change:transform} .js-motion .brand-track .is-echo{display:block} .js-motion .brand-row.is-echo .brand-track span{color:#a1a1aa} /* 16b. Pointer: cards lift, their photograph eases forward, buttons and arrows share the curve */ .btn{transition:transform .3s var(--ease),background-color .2s ease,border-color .2s ease,color .2s ease} .btn.arrow:after{transition:transform .3s var(--ease)} .starlink-product{transition:transform .45s var(--ease),border-color .25s ease,box-shadow .45s ease} .product{transition:transform .45s var(--ease),border-color .25s ease,box-shadow .45s ease} .night-tile{transition:transform .45s var(--ease),border-color .25s ease} .night-tile i{transition:transform .3s var(--ease),color .2s ease} .official-product-image,.catalog-product-photo{transition:scale .45s var(--ease)} @media(hover:hover){ .starlink-product:hover{transform:translateY(-4px);box-shadow:0 28px 60px -34px rgba(0,0,0,.9)} .starlink-product:hover .official-product-image,.product:hover .catalog-product-photo{scale:1.035} .brand-track span{transition:border-color .25s ease,color .25s ease,background-color .25s ease} .brand-track span:hover{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.08)} } /* 16c. Panels open and close instead of appearing: dialogs, their backdrop, the language list */ @keyframes dvPop{from{opacity:0;translate:0 -6px;scale:.98}to{opacity:1;translate:0 0;scale:1}} .js-motion .lang-menu[open] .lang-list{animation:dvPop .24s var(--ease) both;transform-origin:top right} @supports (transition-behavior:allow-discrete){ .js-motion dialog{opacity:0;translate:0 18px;scale:.97;transition:opacity .26s ease,translate .4s var(--ease),scale .4s var(--ease),overlay .4s allow-discrete,display .4s allow-discrete} .js-motion dialog[open]{opacity:1;translate:0 0;scale:1} .js-motion dialog::backdrop{opacity:0;transition:opacity .3s ease,overlay .3s allow-discrete,display .3s allow-discrete} .js-motion dialog[open]::backdrop{opacity:1} @starting-style{ .js-motion dialog[open]{opacity:0;translate:0 18px;scale:.97} .js-motion dialog[open]::backdrop{opacity:0} .js-motion .catalog .product:not([data-rise]){opacity:0;scale:.97} } .js-motion .catalog .product:not([data-rise]){transition:transform .45s var(--ease),opacity .35s ease,scale .45s var(--ease),border-color .25s ease,box-shadow .45s ease} } /* 16d. Catalogue filters: cards travel to their new place, leaving ones fade back, arriving ones come forward. The script names the cards and the blocks below them only while a change is running. */ html.dv-morph::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)} html.dv-morph::view-transition-old(root),html.dv-morph::view-transition-new(root){animation:none;mix-blend-mode:normal} @keyframes dvCardIn{from{opacity:0;scale:.94}} @keyframes dvCardOut{to{opacity:0;scale:.96}} html.dv-morph::view-transition-new(*):only-child{animation:dvCardIn .42s cubic-bezier(.22,1,.36,1) both} html.dv-morph::view-transition-old(*):only-child{animation:dvCardOut .2s ease both} /* Switching language cross-fades between the two pages where the browser supports it */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s} /* 16e. Jump targets take focus quietly after the page has travelled to them */ [data-dv-target]:focus{outline:none} @media(max-width:760px){ .brand-track{gap:8px} .brand-track span{padding:8px 13px;font-size:11px} } @media(prefers-reduced-motion:reduce){ .starlink-product,.product,.night-tile,.night-tile i,.official-product-image,.catalog-product-photo,.btn,.btn.arrow:after{transition:none} .starlink-product:hover,.starlink-product:hover .official-product-image,.product:hover .catalog-product-photo{transform:none;scale:none} ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} } /* 17. What's in the box -------------------------------------------------------- The hero picture is Starlink's own image of the Mini X kit: every item is the real thing, nothing is redrawn. The picture is full width with its edges melting into the page; the headline sits in its empty upper part and the introduction over its dark left side. Numbered pins mark the items and match the list underneath; pointing at either lights the other. Motion: the picture settles from slightly large, the pins arrive one after another, and while scrolling the picture keeps drifting a little slower than the page (--s). */ .boxshot{position:relative;display:flex;flex-direction:column;align-items:center;width:100%} .boxshot-stage{position:relative;z-index:0;left:50%;width:min(100vw,1760px);margin-left:calc(min(100vw,1760px)*-.5);align-self:flex-start;aspect-ratio:16/9;margin-top:calc(min(100vw,1760px)*-.165);overflow:hidden; -webkit-mask-image:radial-gradient(ellipse 62% 66% at 53% 60%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 62% 66% at 53% 60%,#000 52%,transparent 100%)} .boxshot-canvas{position:absolute;inset:0;transform:translate3d(0,calc(var(--s,0)*4%),0) scale(calc(1 + var(--s,0)*.05));transform-origin:53% 62%} .boxshot-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease} .boxshot-img.is-on{opacity:1} /* Four kits share the stage; only the chosen model's picture, pins, list and source line show. */ .boxshot-name{position:absolute;z-index:2;left:50%;bottom:9%;translate:-50% 0;padding:8px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(8,10,16,.72);font:500 13px/1 var(--display);letter-spacing:.02em;color:#fff;opacity:0;transition:opacity .4s ease;pointer-events:none} .boxshot-name.is-on{opacity:1} .boxshot-pins:not(.is-on),.boxshot-list:not(.is-on),.boxshot-facts:not(.is-on){display:none} .boxshot-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} .boxshot-head .boxshot-title{margin:0} .boxshot-tabs{display:flex;gap:6px;padding:4px;border:1px solid var(--hair);border-radius:999px;background:rgba(255,255,255,.04)} .boxshot-pins{position:absolute;inset:0;margin:0;padding:0;list-style:none} .boxshot-pins li{position:absolute;left:calc(var(--px)*1%);top:calc(var(--py)*1%);display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%; background:rgba(8,10,16,.72);border:1px solid rgba(122,167,255,.9);color:#fff;font:600 11px/1 var(--mono);box-shadow:0 0 0 0 rgba(122,167,255,.5);transition:background-color .25s ease,box-shadow .35s ease,scale .35s var(--ease)} .boxshot-pins li.is-hot{background:#5b8cff;box-shadow:0 0 0 7px rgba(122,167,255,.22);scale:1.18} .hero-copy{position:relative;z-index:2} .kit-intro{position:absolute;z-index:2;left:max(0px,calc(50% - 600px));top:calc(min(100vw,1760px)*.115);width:min(300px,22vw);text-align:left} .kit-intro p{margin:0;font-size:15.5px;line-height:1.7;color:var(--text-2);text-wrap:pretty} .kit-intro .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .boxshot-info{position:relative;z-index:2;width:100%;max-width:1040px;margin-top:calc(min(100vw,1760px)*-.05);text-align:left} .boxshot-title{font:500 22px/1.2 var(--display);letter-spacing:-.01em;color:#fff} .boxshot-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px;margin:0;padding:0;list-style:none} .boxshot-list li{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--hair);border-radius:12px;background:rgba(255,255,255,.035);font-size:14px;line-height:1.35;color:#e8e8ed;transition:border-color .25s ease,background-color .25s ease} .boxshot-list b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(122,167,255,.7);font:600 10.5px/1 var(--mono);color:#cfe0ff} .boxshot-list li.is-hot{border-color:rgba(122,167,255,.7);background:rgba(91,140,255,.12)} .boxshot-facts{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-3)} .boxshot-facts a{color:var(--accent);text-decoration:none} .boxshot-facts a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px} .night-tiles{margin-top:64px} .hero-note{display:none} @media(min-width:1051px){ .hero h1,html:lang(en) .hero h1{font-size:clamp(40px,min(5.2vw,8.8vh),80px)} html:lang(ja) .hero h1{font-size:clamp(34px,min(4.5vw,7.4vh),66px)} html:lang(zh) .hero h1{font-size:clamp(36px,min(4.7vw,7.8vh),70px)} } @keyframes dvShot{from{opacity:0;scale:1.07}to{opacity:1;scale:1}} @keyframes dvPin{from{opacity:0;scale:.4}to{opacity:1;scale:1}} .js-motion .boxshot-stage{animation:dvShot 1.5s var(--ease) .35s both} .js-motion .boxshot-pins li{animation:dvPin .5s var(--ease) both;animation-delay:calc(1.25s + var(--i)*90ms)} .js-motion .kit-intro p{animation:dvIn 1s ease .5s both} .js-motion .kit-intro .actions{animation:dvIn 1s ease .62s both} .js-motion .boxshot-canvas{will-change:transform} @media(max-width:1100px){ .kit-intro{position:static;order:-1;width:auto;max-width:660px;text-align:center;margin-bottom:8px} .kit-intro .actions{justify-content:center} .boxshot-stage{margin-top:calc(min(100vw,1760px)*-.06)} .boxshot-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ /* On a phone the picture is cropped to the items, which keep their true size relation. */ .boxshot-stage{aspect-ratio:1/1;margin-top:-4vw;-webkit-mask-image:radial-gradient(ellipse 72% 60% at 50% 56%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 72% 60% at 50% 56%,#000 55%,transparent 100%)} .boxshot-canvas{inset:auto;top:-8%;height:116%;aspect-ratio:16/9;left:50%;margin-left:calc(116%*16/9*-.53)} .boxshot-pins li{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:10px} .boxshot-info{margin-top:-6vw} .boxshot-list{grid-template-columns:minmax(0,1fr);gap:8px} .boxshot-list li{padding:10px 12px;font-size:13.5px} .night-tiles{margin-top:44px} } @media print{ .js-motion .boxshot-stage,.js-motion .boxshot-pins li,.js-motion .kit-intro *{opacity:1!important;animation:none!important;scale:none!important} } /* 17. Amazon: Echo and Kindle, model by model --------------------------------- The catalogue's glass cards and light photo tiles, five to a row, with the specification rows of neighbouring cards on shared lines. On narrower screens each line-up is a single row that scrolls sideways and snaps card by card. */ .amazon-section{padding:110px 0 0} .amazon-section .section-heading{flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:8px} .amazon-section .eyebrow{justify-content:center;color:var(--text-2);letter-spacing:.3em} .amazon-section h2{font-size:clamp(32px,3.8vw,56px);line-height:1.12;letter-spacing:-.03em;margin:14px 0 0} html:lang(ja) .amazon-section h2,html:lang(zh) .amazon-section h2{font-size:clamp(28px,3.3vw,48px);line-height:1.3;letter-spacing:-.01em} .lineup{margin-top:52px} .lineup-head{display:flex;align-items:baseline;gap:16px;padding:0 4px 18px;margin-bottom:18px;border-bottom:1px solid var(--hair)} .lineup-head h3{margin:0;font:500 28px/1.2 var(--display);letter-spacing:-.02em;color:#fff} .lineup-head p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2)} .lineup-head span{margin-left:auto;font:500 11px var(--mono);letter-spacing:.14em;color:var(--text-3);white-space:nowrap} .lineup-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:16px;row-gap:0} .model-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--panel);overflow:hidden;transition:transform .45s var(--ease),border-color .25s ease,box-shadow .45s ease} .model-art{position:relative;aspect-ratio:1/1;margin:8px 8px 0;border-radius:21px;background:var(--spot);isolation:isolate;overflow:hidden} .model-art .model-mark{position:absolute;z-index:2;top:15px;left:17px;right:17px;font:500 10.5px var(--mono);letter-spacing:.16em;color:#5a606c} .model-art .art-note{position:absolute;z-index:2;left:17px;right:17px;bottom:13px;max-width:none;text-align:left;font-size:10.5px;line-height:1.4;letter-spacing:.02em;color:#7a808c} .model-photo{display:block;position:absolute;top:19%;left:13%;width:74%;height:60%;max-width:none;object-fit:contain;mix-blend-mode:multiply;transform:scale(var(--photo-scale,1));transition:scale .45s var(--ease)} .model-kind{padding:18px 20px 0;font-size:10.5px;line-height:1.5;letter-spacing:.1em;font-weight:500;color:var(--text-3);text-transform:uppercase} .model-card h4{margin:0;padding:6px 20px 15px;font:500 21px/1.25 var(--display);letter-spacing:-.02em;color:#fff} .model-specs{display:grid;margin:0;padding:0 20px} .model-specs>div{min-width:0;padding:10px 0 11px;border-top:1px solid var(--hair)} .model-specs dt{font-size:10px;line-height:1.4;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase} .model-specs dd{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:#d2d2d7;text-wrap:pretty} html:lang(ja) .model-specs dd,html:lang(zh) .model-specs dd{word-break:keep-all;overflow-wrap:anywhere} .model-ask{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 20px 20px;padding:10px 16px;border:1px solid var(--hair-2);border-radius:999px;background:rgba(255,255,255,.04);font-size:12.5px;font-weight:500;color:#f5f5f7;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease} .model-ask:hover{background:#f5f5f7;border-color:#f5f5f7;color:#000} .model-ask span{font-size:15px;line-height:1} .amazon-more{margin-top:28px} @supports (grid-template-rows:subgrid){ .model-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 8} .model-specs{grid-template-rows:subgrid;grid-row:span 4} .model-ask{margin-top:14px;align-self:end} } @media(hover:hover){ .model-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26);box-shadow:0 28px 60px -34px rgba(0,0,0,.9)} .model-card:hover .model-photo{scale:1.035} } @media(max-width:1320px) and (min-width:1051px){ .lineup-grid{column-gap:12px} .model-kind{padding:16px 16px 0} .model-card h4{padding:6px 16px 13px;font-size:19px} .model-specs{padding:0 16px} .model-ask{margin-left:16px;margin-right:16px;margin-bottom:16px} } @media(max-width:1050px){ .amazon-section{padding-top:84px} .lineup{margin-top:40px} .lineup-grid{--gutter:24px;display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)} .lineup-grid::-webkit-scrollbar{display:none} .model-card{flex:0 0 min(272px,74vw);scroll-snap-align:start} @supports (grid-template-rows:subgrid){ .lineup-grid{display:grid;grid-template-columns:none;grid-template-rows:repeat(8,auto);grid-auto-flow:column;grid-auto-columns:min(272px,74vw);column-gap:14px} } } @media(max-width:760px){ .amazon-section{padding-top:68px} .lineup-head{flex-wrap:wrap;gap:4px 12px;padding-bottom:14px;margin-bottom:14px} .lineup-head h3{font-size:24px} .lineup-head p{order:3;flex-basis:100%;font-size:12.5px} .lineup-grid{--gutter:18px;gap:12px} .amazon-more{margin-top:22px} } @media(prefers-reduced-motion:reduce){ .model-card,.model-photo,.model-ask{transition:none} .model-card:hover{transform:none} .model-card:hover .model-photo{scale:none} } /* The header keeps to one line on small tablets: the Amazon link gives way first (the entry tile still leads there). */ @media(max-width:900px){ .header nav a[href="#amazon"]{display:none} } /* 17b. Catalogue without the two Amazon cards: seven cards fill the grid as 2 + 3 + 2. The half-row cards use a flatter photo tile so every row keeps the same height. */ .catalog{grid-template-columns:repeat(6,minmax(0,1fr))} .catalog .product:nth-child(n){grid-column:span 2} .catalog .product.is-wide:nth-child(n){grid-column:span 3} .catalog .product.is-wide:nth-child(n) .product-art{aspect-ratio:2/1} @media(max-width:980px){ .catalog{grid-template-columns:repeat(2,minmax(0,1fr))} .catalog .product:nth-child(n),.catalog .product.is-wide:nth-child(n){grid-column:auto} .catalog .product.is-wide:nth-child(n) .product-art{aspect-ratio:4/3} .catalog .product:last-child:nth-child(n){grid-column:1/-1} .catalog .product:last-child:nth-child(n) .product-art{aspect-ratio:2/1} } @media(max-width:620px){ .catalog{grid-template-columns:minmax(0,1fr)} .catalog .product:last-child:nth-child(n){grid-column:auto} .catalog .product:last-child:nth-child(n) .product-art{aspect-ratio:4/3} } /* 18. First screen, quiet version ---------------------------------------------- Only the product name, two buttons and the picture. The preview strip, the line above the headline and the paragraph are off this screen: the paragraph now sits under the picture as the lead-in to the kit list, and the numbered pins appear only once the visitor has scrolled to that list (the page script sets .is-listed). --shot is the width of the picture: it follows the window's width and height so the whole kit stays inside the first screen. */ .preview{display:none} .hero{padding-top:clamp(44px,9vh,112px)} .hero h1,html:lang(en) .hero h1,html:lang(ja) .hero h1,html:lang(zh) .hero h1{margin:0;font-size:clamp(44px,min(9.6vw,17vh),176px);line-height:1.04;letter-spacing:-.05em;font-weight:500} .hero-title-model{display:inline-block;padding:0 .05em .06em} .hero-copy .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,3.2vh,38px)} .boxshot{--shot:min(100vw,1760px,160vh)} /* The picture melts into the page on all four sides, so no edge of it can be seen on wide or tall windows. The kit sits a little right of the picture's middle, so the picture is shifted to put the kit under the headline. */ .boxshot-stage{width:var(--shot);margin-left:calc(var(--shot)*-.515);margin-top:calc(var(--shot)*-.15); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(180deg,transparent 0,#000 20%,#000 88%,transparent 100%),radial-gradient(ellipse 62% 66% at 53% 60%,#000 52%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(180deg,transparent 0,#000 20%,#000 88%,transparent 100%),radial-gradient(ellipse 62% 66% at 53% 60%,#000 52%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} .boxshot-pins{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s} .boxshot.is-listed .boxshot-pins{opacity:1;visibility:visible;transition:opacity .5s ease} .js-motion .boxshot-pins li{animation:none} .kit-intro{position:relative;z-index:2;left:auto;top:auto;order:0;width:auto;max-width:780px;margin:calc(var(--shot)*-.02) auto 0;text-align:center} .kit-intro p{margin:0;font-size:clamp(17px,1.45vw,21px);line-height:1.62;letter-spacing:-.005em;color:#c7c7cc;text-wrap:pretty} .js-motion .kit-intro p{animation:none} .boxshot-info{margin-top:56px} @media(max-width:1100px){ /* Tablets: the frame stays inside the window and the picture is enlarged within it, so the kit is about half the window wide without anything reaching past the edges. */ .boxshot{--shot:min(100vw,120vh)} .kit-intro{order:0;margin-bottom:0} .boxshot-stage{aspect-ratio:4/3;margin-left:calc(var(--shot)*-.5);margin-top:calc(var(--shot)*-.2)} .boxshot-canvas{inset:auto;top:-6%;height:112%;aspect-ratio:16/9;left:50%;margin-left:calc(84%*16/9*-.53)} } @media(max-width:760px){ .boxshot{--shot:100vw} .hero{padding-top:clamp(40px,9vh,84px)} .hero h1,html:lang(en) .hero h1,html:lang(ja) .hero h1,html:lang(zh) .hero h1{font-size:clamp(38px,12.2vw,64px)} .hero-copy .actions{flex-direction:column;align-items:center;gap:10px;margin-top:24px} /* Taller picture on a phone: the kit is larger and fills the rest of the first screen. */ .boxshot-stage{aspect-ratio:4/5;margin-left:-50vw;margin-top:-13vw;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 86%,transparent 100%),radial-gradient(ellipse 72% 60% at 50% 56%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 86%,transparent 100%),radial-gradient(ellipse 72% 60% at 50% 56%,#000 55%,transparent 100%)} .boxshot-canvas{top:-9%;height:108%;margin-left:calc(135%*16/9*-.53)} .kit-intro{margin-top:6vw} .kit-intro p{font-size:16px;line-height:1.65} .boxshot-info{margin-top:36px} } /* 19. Material ------------------------------------------------------------------ The black gets depth instead of being flat: a faintly blue base with two soft pools of light, and a fine film grain over the dark areas. Cards catch light on their top edge, headings fade from white to a cool silver, the main button carries a glow, and a slow light field (claude-night-aurora.js) sits behind the product name. */ :root{ --ink:#030409; --panel-base:linear-gradient(158deg,#10151f 0%,#0a0d15 44%,#06080d 100%); --panel-tint:radial-gradient(120% 78% at 100% 0,rgba(86,126,242,.14),transparent 54%); --edge:linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.07) 26%,rgba(255,255,255,.035) 68%,rgba(255,255,255,.1) 100%); --lift:inset 0 1px 0 rgba(255,255,255,.06),0 36px 72px -48px rgba(0,0,0,.95); --grain:url("/assets/images/7787087d29ad2874b12234a916e01358d55ec56191c42209b5a89d6704cb86d2.svg"); } html{background:var(--ink)} body{background:transparent} body:before{content:"";position:fixed;z-index:-2;inset:0;pointer-events:none; background:radial-gradient(62% 48% at 10% 4%,rgba(58,92,214,.12),transparent 72%),radial-gradient(52% 44% at 94% 98%,rgba(255,138,84,.05),transparent 72%),radial-gradient(70% 60% at 50% 110%,rgba(40,62,150,.11),transparent 70%)} /* The grain lies on the page itself, under the content: cards, text and pictures stay clean. */ body:after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background-image:var(--grain);background-size:200px 200px;opacity:.13} .footer{background:transparent} /* 19a. Glass: a lit top edge, a darker body, a soft shadow underneath */ .product,.model-card,.starlink-product,.starlink-more,.trustline>div,.inquiry-form{border-color:transparent;background:var(--panel-tint),var(--panel-base) padding-box,var(--edge) border-box;box-shadow:var(--lift)} .workflow{border-color:transparent;background:radial-gradient(60% 90% at 50% 0,rgba(72,114,236,.2),transparent 70%),var(--panel-base) padding-box,var(--edge) border-box;box-shadow:var(--lift)} .night-tile{box-shadow:var(--lift)} .starlink-art,.catalog .product:nth-child(n) .product-art,.model-art{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -22px 44px -30px rgba(24,34,66,.2)} .boxshot-list li{border-color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)) padding-box,var(--edge) border-box} .boxshot-list li.is-hot{border-color:rgba(122,167,255,.7)} .header{background:rgba(3,4,9,.62);-webkit-backdrop-filter:saturate(1.6) blur(22px);backdrop-filter:saturate(1.6) blur(22px)} .header.is-scrolled{background:rgba(3,4,9,.8)} /* 19b. Type: section headings run from white into a cool silver */ .starlink-section h2,.amazon-section h2,.more-catalog h2,.workflow h2,.inquiry h2{background:linear-gradient(180deg,#fff 18%,#aeb8cf 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.08em} .hero h1{filter:drop-shadow(0 0 44px rgba(104,134,255,.3))} .hero-title-model{background:linear-gradient(98deg,#5a8bff 0%,#8a8cff 30%,#c58bf2 54%,#ff9c70 80%,#ffc59a 100%);-webkit-background-clip:text;background-clip:text} /* 19c. Buttons */ .btn{background:linear-gradient(180deg,#fff 0%,#e4e8f2 100%);border-color:rgba(255,255,255,.92);box-shadow:inset 0 1px 0 #fff,0 16px 36px -16px rgba(120,158,255,.6),0 2px 6px rgba(0,0,0,.45)} .btn:hover{background:linear-gradient(180deg,#fff 0%,#f1f3f9 100%);border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 20px 46px -16px rgba(120,158,255,.8),0 2px 6px rgba(0,0,0,.45)} .btn.outline{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .btn.outline:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .btn.wa-btn{border-color:rgba(37,211,102,.5)} .btn.wa-btn:hover{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.85)} /* 19d. Sections open with a thin line of light and a glow falling from it */ .amazon-section,.more-catalog{position:relative;isolation:isolate} .amazon-section:before,.more-catalog:before{content:"";position:absolute;top:0;left:50%;width:min(1080px,84vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(158,186,255,.6) 50%,transparent);pointer-events:none} .amazon-section:after,.more-catalog:after{content:"";position:absolute;z-index:-1;top:0;left:50%;width:min(1080px,84vw);height:340px;transform:translateX(-50%);background:radial-gradient(50% 100% at 50% 0,rgba(74,114,236,.17),transparent 72%);pointer-events:none} /* 19e. First screen: the light field, and the picture arriving as if a lens found its focus */ .dv-aurora{position:absolute;z-index:-1;left:50%;top:-150px;width:100vw;height:min(78vh,760px);transform:translateX(-50%);opacity:0;pointer-events:none; filter:blur(34px) saturate(1.1);transition:opacity 2.2s ease .2s; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 100%)} .dv-aurora.is-lit{opacity:.3} @keyframes dvShot{from{opacity:0;scale:1.06;filter:blur(14px) brightness(.5)}to{opacity:1;scale:1;filter:blur(0) brightness(1)}} @media(max-width:760px){ .dv-aurora{top:-90px;height:64vh;filter:blur(24px) saturate(1.1)} .dv-aurora.is-lit{opacity:.4} } @media(prefers-reduced-motion:reduce){ .dv-aurora{transition:none} } @media print{ body:before,body:after,.dv-aurora{display:none} } /* 20. Readability and touch floor --------------------------------------------- Measured on the built pages against the UI UX Pro Max rule set (accessibility, touch, typography): no text under 12px, labels on the light photo tiles at 4.5:1 or better, and on phones every control at least 44px tall. Inline links grow their hit area with padding, which does not move the lines around them. */ .night small,.night dt,.night .model-mark,.night .model-kind,.night .product-tag,.night .product-kind,.night .art-note,.night .nt-no,.night .num,.night .eyebrow,.night .featured-badge,.night .source-note,.night .catalog-note,.night .preview-note,.night .brand-track span,.night .text-button,.night .boxshot-facts,.night .footer-copy,.night .footer-company,.night .hero-note{font-size:12px} .night .starlink-art.official-photo .art-note,.night .product-art.real-product .art-note,.night .product-art.real-product .product-tag,.night .product-art .product-tag,.night .lineup-head span,.night .product-footer span,.night .step>span,.night .form-bottom p,.night .footer-bottom span,.night .dv-g-labels span{font-size:12px} .night .starlink-art .model-mark,.night .starlink-art .art-note,.night .product-art .product-tag,.night .product-art .art-note,.night .model-art .model-kind,.night .model-art .art-note{color:#4b5160} @media(max-width:760px){ .night .tab,.night .lang-menu summary,.night .lang-list .language-link,.night .text-button,.night .extra-kits button,.night .product-footer button,.night .model-ask,.night .starlink-body .btn,.night #brand-filter,.night #search,.night #reset-filter,.night .inquiry-form button,.night dialog button{min-height:44px} .night .brand{display:inline-flex;align-items:center;min-height:44px} .night .btn.small.wa-btn{min-width:44px;min-height:44px} .night .lang-menu summary{min-width:44px} .night .tab{min-width:44px} .night .spec-link,.night .boxshot-facts a,.night .footer-links a,.night .footer-company a,.night .source-note a,.night .catalog-note a,.night .contact-direct a{padding-block:15px} } /* DELTA V - Day variant ("Claude" comparison version, 2026-10-14). A layer on top of claude-night.css: same markup, same pictures, same behaviour. Where the decisions come from - Taste skill, direction "The object, large", palette "Card pastels": a neutral paper ground, black ink, every tile its own flat colour, one reserved accent, no gradients, no shadows on things at rest, no hairlines, no letter-spaced capitals, body text 16px, nothing under 13px. - UI UX Pro Max: text contrast 4.5:1, focus ring 3:1, touch targets 44px, shared motion tokens, easing by purpose, no decorative loops, scroll effects on pictures only. 2026-10-14, second pass ("colour more unified; let the two skills check each other"): the four pastels and the magenta are gone. Taste's own blue single-accent palette (cool-grey-cobalt) is the one both skills accept; see section 16 and design-review/checks/two-skill-review.py. */ /* 0. Roles ------------------------------------------------------------------ */ html.day{ color-scheme:light; --d-bg:#f8fafc;--d-surface:#e8ecf1;--d-ink:#020617;--d-muted:#475569;--d-accent:#0369a1;--d-accent-ink:#fff;--d-accent-deep:#075985;--d-plate:#fff; --f-sky:var(--d-dark);--f-cyan:var(--d-surface);--f-amber:var(--d-surface);--f-lime:var(--d-surface); --d-dark:#0b0c0e;--d-dark-surface:#1a1c21;--d-dark-ink:#eef0f3;--d-dark-muted:#a9afba; --ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.76,0,.24,1);--ease-soft:cubic-bezier(.33,1,.68,1); --t-press:150ms;--t-hover:200ms;--t-ui:240ms;--t-reveal:700ms; --s-small:13px;--s-label:15px;--s-body:16px;--s-lead:22px;--s-head:clamp(38px,5vw,76px); /* the night tokens, pointed at the roles above so untouched rules follow */ --text:var(--d-ink);--text-2:var(--d-muted);--text-3:var(--d-muted);--muted:var(--d-muted);--paper:var(--d-bg);--white:var(--d-bg); --light:var(--d-ink);--hair:transparent;--hair-2:transparent;--line:transparent;--accent:var(--d-accent);--blue:var(--d-accent); --panel:var(--d-surface);--panel-base:var(--d-surface);--panel-tint:none;--spot:#fff;--edge:none;--grad:none;--lift:none; --mono:var(--body);--radius:0px;--r-md:0px;--r-lg:0px;--r-xl:0px;--photo-shadow:none; background:var(--d-bg); } html.day body{background:var(--d-bg);color:var(--d-ink);font-size:var(--s-body);line-height:1.55} html.day body:before,html.day body:after{display:none} html.day *,html.day *:before,html.day *:after{box-shadow:none!important;text-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html.day ::selection{background:var(--d-ink);color:var(--d-bg)} html.day :focus-visible{outline:2px solid var(--d-accent);outline-offset:3px} html.day .eyebrow,html.day .nt-no,html.day .num,html.day .model-mark,html.day .featured-badge,html.day .product-kind,html.day .brand>small,html.day .hero-note,html.day .check,html.day .dv-twinkle,html.day .dv-train,html.day .dv-aurora{display:none!important} /* 1. Type: five steps, one face, sentence case --------------------------------- */ html.day h1,html.day h2,html.day h3,html.day h4{color:inherit;background:none!important;-webkit-text-fill-color:currentColor;font-weight:500;filter:none} html.day .hero-title-model{background:none!important;-webkit-text-fill-color:currentColor;color:inherit} html.day h2{font-size:var(--s-head);line-height:1;letter-spacing:-.045em;text-wrap:balance;margin:0} html.day:lang(ja) h2,html.day:lang(zh) h2{font-size:clamp(30px,3.8vw,58px);line-height:1.18;letter-spacing:-.02em} html.day p{font-size:var(--s-body);line-height:1.6} html.day .starlink-body>small,html.day .model-kind,html.day dt,html.day .product-tag,html.day .lineup-head>span,html.day .brand-strip-label,html.day .step>span,html.day .brand-track span,html.day .dv-g-labels span,html.day .art-note,html.day .boxshot-list b,html.day .footer-bottom span,html.day .form-top small{font-family:var(--body);letter-spacing:0;text-transform:none} html.day .source-note,html.day .catalog-note,html.day .preview-note,html.day .form-bottom p,html.day .art-note,html.day .boxshot-facts,html.day .footer-bottom span,html.day .form-top small{font-size:var(--s-small)!important;line-height:1.55;color:var(--d-muted)} html.day a{text-underline-offset:.2em;text-decoration-thickness:.07em} /* 2. Header: a plain bar that takes the ink of the chapter beneath ---------------- */ html.day .header,html.day .header.is-scrolled{background:var(--d-bg);border-bottom:0;transition:background-color var(--t-ui) ease} html.day .header .brand,html.day .header nav a,html.day .header .text-button,html.day .header .lang-menu summary,html.day .header .lang-menu summary span{color:var(--d-ink);transition:color var(--t-ui) ease} html.day .header nav a{font-size:var(--s-label)} html.day .header .text-button{font-size:var(--s-label)!important} html.day .header .lang-menu summary{background:none;border:0;font-size:var(--s-label);min-height:44px} html.day .header .lang-menu summary span{font-size:var(--s-label)} html.day .header.on-dark{background:var(--d-dark)} html.day .header.on-dark .brand,html.day .header.on-dark nav a,html.day .header.on-dark .text-button,html.day .header.on-dark .lang-menu summary,html.day .header.on-dark .lang-menu summary span{color:var(--d-dark-ink)} html.day .header .btn.small{min-height:44px;padding:0 18px;font-size:var(--s-label)} html.day .header .btn.small span{font-size:var(--s-label)} html.day .header .btn.wa-btn{background:none!important;color:var(--d-ink)!important;padding:0 10px} html.day .header.on-dark .btn.wa-btn{color:var(--d-dark-ink)!important} html.day .header .btn.wa-btn .wa-icon{color:currentColor} html.day .header.on-dark .btn.small:not(.wa-btn){background:var(--d-bg)!important;color:var(--d-ink)!important} html.day .lang-list{background:var(--d-surface);border:0;border-radius:0;padding:6px} html.day .lang-list .language-link{color:var(--d-ink);font-size:var(--s-label);border-radius:0;min-height:44px} html.day .lang-list .language-link[aria-current=page]{background:var(--d-bg);color:var(--d-ink)} /* 3. Controls: one button shape (round), flat, one press response ----------------- */ html.day .btn{background:var(--d-ink)!important;border:0!important;color:var(--d-bg)!important;border-radius:999px;font-size:var(--s-label);min-height:48px;padding:0 24px;align-items:center;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease} html.day .btn span,html.day .btn b{font-size:inherit} html.day .btn:hover{transform:none} html.day .btn:active{transform:scale(.98)} html.day .btn.outline{background:var(--d-surface)!important;color:var(--d-ink)!important} html.day .btn.arrow:after{transition:transform var(--t-hover) var(--ease-out)} html.day .tabs{background:var(--d-surface);border:0;border-radius:999px;padding:4px} html.day .tab{border:0;color:var(--d-ink);font-size:var(--s-label);min-height:44px;padding:0 18px;transition:background-color var(--t-hover) ease,color var(--t-hover) ease} html.day .tab[aria-pressed=true],html.day .tab[aria-pressed=true]:hover{background:var(--d-ink);color:var(--d-bg)} html.day .extra-kits button,html.day .product-footer button,html.day .model-ask{background:var(--d-ink)!important;border:0!important;color:var(--d-bg)!important;border-radius:999px;font-size:var(--s-label);min-height:44px;padding:0 18px;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease} html.day .extra-kits button{background:var(--d-bg)!important;color:var(--d-ink)!important} html.day .extra-kits button:active,html.day .product-footer button:active,html.day .model-ask:active,html.day .tab:active{transform:scale(.98)} html.day .spec-link,html.day .source-note a,html.day .catalog-note a,html.day .footer-company a,html.day .footer-links a{color:var(--d-accent);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color var(--t-hover) ease} html.day .spec-link{font-size:var(--s-label)} @media(hover:hover) and (pointer:fine){ html.day .btn:hover{background:var(--d-accent-deep)!important} html.day .btn.outline:hover{background:#d5d9e0!important} html.day .header.on-dark .btn.small:not(.wa-btn):hover{background:#fff!important} html.day .tab:hover{background:#d5d9e0;color:var(--d-ink)} html.day .tab[aria-pressed=true]:hover{background:var(--d-ink);color:var(--d-bg)} html.day .extra-kits button:hover{background:#fff!important} html.day .product-footer button:hover,html.day .model-ask:hover{background:var(--d-accent-deep)!important} html.day .btn.arrow:hover:after{transform:translate(2px,-2px)} html.day .spec-link:hover,html.day .source-note a:hover,html.day .catalog-note a:hover,html.day .footer-company a:hover,html.day .footer-links a:hover,html.day .header nav a:hover{text-decoration:underline;text-decoration-color:currentColor} html.day .header nav a:hover{color:inherit} } /* 4. First screen: the photograph's own black is the field ------------------------ */ html.day .hero{color:var(--d-dark-ink);padding-bottom:clamp(64px,8vw,120px);--text:var(--d-dark-ink);--text-2:var(--d-dark-muted);--text-3:var(--d-dark-muted)} html.day .hero:before{content:"";position:absolute;z-index:-3;top:-160px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--d-dark)} html.day .hero-scene:before,html.day .hero-scene:after{display:none} html.day .hero .btn{background:var(--d-bg)!important;color:var(--d-ink)!important} html.day .hero .btn.outline{background:#24272e!important;color:var(--d-dark-ink)!important} html.day .kit-intro p{color:var(--d-dark-ink);font-size:clamp(18px,1.6vw,24px);line-height:1.5} html.day .boxshot-title{font-size:var(--s-lead);letter-spacing:-.02em} html.day .hero .tabs{background:var(--d-dark-surface)} html.day .hero .tab{color:var(--d-dark-ink)} html.day .hero .tab[aria-pressed=true],html.day .hero .tab[aria-pressed=true]:hover{background:var(--d-bg);color:var(--d-ink)} html.day .boxshot-list{gap:6px} html.day .boxshot-list li{background:var(--d-dark-surface)!important;border:0!important;border-radius:0;color:var(--d-dark-ink);font-size:var(--s-body);padding:14px 16px;transition:background-color var(--t-hover) ease} html.day .boxshot-list b{background:var(--d-bg);border:0;color:var(--d-ink);font-size:var(--s-small);font-weight:500;font-variant-numeric:tabular-nums;width:26px;height:26px} html.day .boxshot-list li.is-hot{background:#2a2d34!important} html.day .boxshot-pins li{background:var(--d-bg);border:0;color:var(--d-ink);font-family:var(--body);font-size:var(--s-small)} html.day .boxshot-pins li.is-hot{background:var(--d-accent);color:#fff} html.day .boxshot-facts{color:var(--d-dark-muted)} html.day .boxshot-facts a{color:var(--d-dark-ink);text-decoration:underline} html.day .boxshot-name{background:var(--d-bg);border:0;color:var(--d-ink);font-size:var(--s-small);letter-spacing:0} @media(hover:hover) and (pointer:fine){ html.day .hero .btn:hover{background:#fff!important} html.day .hero .btn.outline:hover{background:#33363e!important} html.day .hero .tab:hover{background:#2a2d34;color:var(--d-dark-ink)} html.day .hero .tab[aria-pressed=true]:hover{background:var(--d-bg);color:var(--d-ink)} } /* 5. Four families, four fields ------------------------------------------------ */ html.day .night-tiles{margin-top:0;padding-top:clamp(56px,7vw,112px);gap:8px;margin-bottom:clamp(64px,8vw,128px)} html.day .night-tile,html.day .night-tile:first-child{background:var(--f-sky);border:0;border-radius:0;min-height:clamp(170px,19vw,290px);padding:22px 24px 24px;color:var(--d-ink);transition:none} html.day .night-tile:nth-child(2){background:var(--f-cyan)} html.day .night-tile:nth-child(3){background:var(--f-amber)} html.day .night-tile:nth-child(4){background:var(--f-lime)} html.day .night-tile:before{display:none} html.day .night-tile:hover{transform:none} html.day .night-tile strong{font-size:clamp(24px,2.7vw,42px);line-height:1.02;letter-spacing:-.04em;color:var(--d-ink)} html.day .night-tile small{font-size:var(--s-label);line-height:1.4;color:var(--d-ink)} html.day .night-tile i{color:var(--d-ink);font-size:24px;right:22px;bottom:22px;transition:transform var(--t-hover) var(--ease-out)} @media(hover:hover) and (pointer:fine){html.day .night-tile:hover i{transform:translateX(4px);color:var(--d-ink)}} /* 6. Brand names at poster scale, moving with the scroll --------------------------- */ html.day .brand-strip{align-items:flex-start;gap:22px;padding:0 0 clamp(72px,9vw,144px)} html.day .brand-strip-label{font-size:var(--s-body);color:var(--d-muted)} html.day .brand-strip>.brand-rows{gap:4px;width:100vw;margin-left:calc(50% - 50vw)} html.day.js-motion .brand-rows{-webkit-mask-image:none;mask-image:none} html.day .brand-track{gap:clamp(22px,3vw,52px)} html.day .brand-track span,html.day .brand-track span.is-lead{background:none;border:0;border-radius:0;padding:0;font-size:clamp(34px,5vw,80px);font-weight:500;line-height:1.12;letter-spacing:-.045em;color:var(--d-ink);transition:none} html.day.js-motion .brand-row.is-echo .brand-track span{color:var(--d-muted)} html.day .brand-track span:hover{background:none;color:var(--d-ink)} /* 7. Markets: the second dark chapter ------------------------------------------ */ html.day .orbit-section{background:var(--d-dark);color:var(--d-dark-ink);--text:var(--d-dark-ink);--text-2:var(--d-dark-muted);--text-3:var(--d-dark-muted)} html.day .orbit-section .markets>span{color:var(--d-dark-ink);font-size:var(--s-head);line-height:1} html.day:lang(ja) .orbit-section .markets>span,html.day:lang(zh) .orbit-section .markets>span{font-size:clamp(30px,3.8vw,58px);line-height:1.18} html.day .markets .market-chip{background:var(--d-dark-surface);border:0;color:var(--d-dark-ink);font-size:var(--s-label);padding:10px 18px} html.day .trustline>div{background:var(--d-dark-surface);border:0;border-radius:0;padding:18px 20px} html.day .trustline strong{font-size:18px;color:var(--d-dark-ink)} html.day .trustline p{font-size:var(--s-label);color:var(--d-dark-muted)} html.day .dv-g-labels span{border:0;border-radius:0;background:var(--d-bg);color:var(--d-ink);font-size:var(--s-small)} /* 8. Sections on paper: left-aligned headings, flat cards, white photograph plates --- */ html.day .section-heading,html.day .starlink-section .section-heading,html.day .more-catalog .section-heading,html.day .amazon-section .section-heading{align-items:flex-start;text-align:left;gap:20px;margin-bottom:clamp(36px,4.4vw,64px)} html.day .section-heading p{font-size:var(--s-lead);line-height:1.4;letter-spacing:-.01em;color:var(--d-ink);max-width:30em} html.day .starlink-section,html.day .amazon-section,html.day #products{padding-top:clamp(88px,10vw,168px)} html.day .starlink-grid{gap:8px} html.day .starlink-product,html.day .starlink-product:first-child{background:var(--d-surface);border:0;border-radius:0;transition:none} html.day .starlink-product:first-child{background:var(--f-sky)} html.day .starlink-product:hover{transform:none} html.day .starlink-art,html.day .starlink-art.official-photo,html.day .model-art,html.day .catalog .product:nth-child(n) .product-art{background:#fff;border-radius:0} html.day .official-product-image,html.day .starlink-product:first-child .starlink-art.official-photo .official-product-image,html.day .starlink-art.official-photo .official-product-image,html.day .model-photo,html.day .catalog-product-photo{filter:none;transition:scale 700ms var(--ease-soft)} html.day .starlink-art .art-note,html.day .starlink-art.official-photo .art-note,html.day .product-art .art-note,html.day .product-art.real-product .art-note,html.day .model-art .art-note{color:var(--d-muted)!important;letter-spacing:0} html.day .starlink-body>small{display:block;font-size:var(--s-label);color:var(--d-ink)} html.day .starlink-body h3{letter-spacing:-.035em} html.day .starlink-product:first-child .starlink-body h3{font-size:clamp(34px,3.6vw,54px);line-height:1.02} html.day .starlink-product:not(:first-child) .starlink-body h3{font-size:var(--s-lead)} html.day .starlink-body p,html.day .starlink-product:first-child .starlink-body p{font-size:var(--s-body);color:var(--d-ink)} html.day .starlink-product .spec-link{color:var(--d-ink);text-decoration-color:currentColor} html.day .starlink-more{background:var(--d-surface);border:0;border-radius:0} html.day .starlink-more h3{font-size:var(--s-lead);letter-spacing:-.02em} html.day .starlink-more.amazon-more{background:var(--f-cyan)} html.day .lineup-head{border:0;align-items:baseline} html.day .lineup-head h3{font-size:clamp(30px,3.4vw,50px);letter-spacing:-.04em} html.day .lineup-head p{font-size:var(--s-body);color:var(--d-ink)} html.day .lineup-head>span{font-size:var(--s-label);color:var(--d-muted)} html.day .lineup-grid{gap:8px} html.day .model-card{background:var(--d-surface);border:0;border-radius:0;transition:none} html.day .model-card:hover{transform:none} html.day .model-kind{font-size:var(--s-label);color:var(--d-muted)} html.day .model-card h4{font-size:var(--s-lead);letter-spacing:-.02em} html.day .model-specs>div{border:0} html.day dt{font-size:var(--s-small)!important;color:var(--d-muted)} html.day dd{font-size:var(--s-label);color:var(--d-ink)} html.day .search-controls select,html.day .search-controls .search{background:var(--d-surface);border:0;border-radius:0;color:var(--d-ink);font-size:var(--s-body);min-height:48px} html.day .search-controls .search input{color:var(--d-ink);font-size:var(--s-body)} html.day .catalog{column-gap:8px} html.day .catalog .product{background:var(--d-surface);border:0;border-radius:0;margin-bottom:8px;transition:none} html.day .catalog .product:hover{transform:none} html.day .catalog .product[data-category=tcg] .product-art{background:var(--f-amber)} html.day .catalog .product[data-category=gaming] .product-art{background:var(--f-lime)} html.day .product-art .product-tag,html.day .product-art.real-product .product-tag{font-size:var(--s-label)!important;font-weight:400;color:var(--d-ink)} html.day .product-art .art-note,html.day .product-art.real-product .art-note{color:var(--d-ink)!important} html.day .product-body h3{font-size:var(--s-lead);letter-spacing:-.02em} html.day .product-body p{font-size:var(--s-body);color:var(--d-ink)} html.day .product-footer{border:0} html.day .product-footer span{font-size:var(--s-label)!important;color:var(--d-muted)} @media(hover:hover) and (pointer:fine){ html.day .starlink-product:hover .official-product-image,html.day .product:hover .catalog-product-photo,html.day .model-card:hover .model-photo{scale:1.03} } /* 9. How it works: the verb is the heading, on one flat field ------------------------ */ html.day .workflow{background:var(--f-amber);border:0;border-radius:0;color:var(--d-ink);--text:var(--d-ink);--text-2:var(--d-ink)} html.day .workflow .section-heading p,html.day .workflow p{color:var(--d-ink)} html.day .step{border:0} html.day .step>span{display:block;font-size:clamp(34px,4.4vw,68px);font-weight:500;line-height:1;letter-spacing:-.045em;color:var(--d-ink);margin-bottom:18px} html.day .step h3{font-size:var(--s-lead);letter-spacing:-.02em} html.day .step p{font-size:var(--s-body)} /* 10. Enquiry ------------------------------------------------------------------- */ html.day .inquiry-intro>p{font-size:var(--s-lead);line-height:1.4;color:var(--d-ink);max-width:24em} html.day .inquiry-points li{font-size:var(--s-body);color:var(--d-ink);display:flex;gap:12px;align-items:baseline} html.day .inquiry-points li:before{content:"";flex:none;width:8px;height:8px;background:var(--d-accent);translate:0 -1px} html.day .preview-note{border:0;background:var(--d-surface);padding:14px 16px} html.day .inquiry-form{background:var(--d-surface);border:0;border-radius:0} html.day .form-top{border:0} html.day .form-top strong{font-size:var(--s-lead);font-weight:500;letter-spacing:-.02em} html.day .field label{font-size:var(--s-label);color:var(--d-ink)} html.day .field label span{color:var(--d-muted)} html.day .field input,html.day .field select,html.day .field textarea{background:#fff;border:0;border-radius:0;color:var(--d-ink);font-size:var(--s-body);min-height:48px;transition:background-color var(--t-hover) ease} html.day .field input::placeholder,html.day .field textarea::placeholder{color:#6b7280} html.day .field input:focus-visible,html.day .field select:focus-visible,html.day .field textarea:focus-visible{outline:2px solid var(--d-accent);outline-offset:2px} html.day .inquiry-form .btn.outline{background:var(--d-bg)!important} /* 11. Footer: the name returns, large, on the dark field ------------------------- */ html.day .footer{background:var(--d-dark);border:0;color:var(--d-dark-ink);--text:var(--d-dark-ink);--text-2:var(--d-dark-muted);--text-3:var(--d-dark-muted)} html.day .footer a.brand{font-size:clamp(56px,13vw,210px);line-height:.9;letter-spacing:-.05em;color:var(--d-dark-ink)} html.day .footer a.brand svg{width:.72em;height:.72em} html.day .footer-copy{font-size:var(--s-lead)!important;line-height:1.35;color:var(--d-dark-ink);margin-top:28px} html.day .footer-company,html.day .footer-company span,html.day .footer-links{font-size:var(--s-label)!important;color:var(--d-dark-muted)} html.day .footer-company a,html.day .footer-links a{color:var(--d-dark-ink);font-size:var(--s-label)!important} html.day .footer-bottom{border:0} html.day .footer-bottom span{color:var(--d-dark-muted)} /* 12. Things that float keep a shadow: dialog and menus --------------------------- */ html.day dialog{background:var(--d-bg);color:var(--d-ink);border:0;border-radius:0;box-shadow:0 40px 90px -30px rgba(10,10,11,.45)!important} html.day dialog::backdrop{background:rgba(10,10,11,.55)} html.day .dialog-note{color:var(--d-muted)} html.day dialog .btn.outline{background:var(--d-surface)!important} /* 13. Motion ------------------------------------------------------------------- */ /* 13a. First screen, once: the headline rises from its baseline, the photograph opens like a shutter. */ html.day.js-motion .hero h1{animation:none;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em} html.day.js-motion .hero-title-model{animation:dLine 900ms var(--ease-out) 150ms both} html.day.js-motion .hero-copy .actions,html.day.js-motion .kit-intro .actions{animation:dRise var(--t-reveal) var(--ease-out) 360ms both} html.day.js-motion .boxshot-stage{animation:dShutter 1200ms var(--ease-soft) 240ms both} html.day.js-motion .boxshot-canvas{animation:dSettle 1600ms var(--ease-soft) 240ms both} html.day.js-motion .night-tile,html.day.js-motion .night-tile:before{animation:none} @keyframes dLine{from{transform:translateY(108%)}to{transform:none}} @keyframes dRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes dShutter{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} @keyframes dSettle{from{scale:1.06}to{scale:1}} /* 13b. Arrival: set by claude-day-motion.js; the hidden state exists only while the script runs. It moves with the separate translate and scale properties, never transform, so an element's own transform stays in place (the globe is centred with translateY(-50%); replacing it made it jump). */ html.day.js-motion [data-arrive]{opacity:0;transition:opacity 600ms var(--ease-out),translate var(--t-reveal) var(--ease-soft),scale var(--t-reveal) var(--ease-soft);transition-delay:calc(var(--i,0)*70ms);will-change:opacity,translate} html.day.js-motion [data-arrive=rise]{translate:0 12px} html.day.js-motion [data-arrive=row]{translate:0 8px;transition:opacity 450ms var(--ease-out),translate 550ms var(--ease-soft);transition-delay:calc(var(--i,0)*60ms)} html.day.js-motion [data-arrive=settle]{scale:.98;transition:opacity 700ms var(--ease-out),scale 1000ms var(--ease-soft)} html.day.js-motion [data-arrive].is-in{opacity:1;translate:none;scale:none} /* 13c. Kit switch: pictures cross-fade, the new rows follow one another. */ html.day .boxshot-img{transition:opacity 620ms var(--ease-soft)} html.day.js-motion .boxshot-list.is-fresh li{animation:dRow 460ms var(--ease-out) both} html.day.js-motion .boxshot-list.is-fresh li:nth-child(2){animation-delay:45ms} html.day.js-motion .boxshot-list.is-fresh li:nth-child(3){animation-delay:90ms} html.day.js-motion .boxshot-list.is-fresh li:nth-child(4){animation-delay:135ms} html.day.js-motion .boxshot-list.is-fresh li:nth-child(5){animation-delay:180ms} html.day.js-motion .boxshot-list.is-fresh li:nth-child(6){animation-delay:225ms} html.day.js-motion .boxshot-list.is-fresh li:nth-child(7){animation-delay:270ms} html.day.js-motion .boxshot-list.is-fresh li:nth-child(n+8){animation-delay:315ms} @keyframes dRow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* 13d. Menus open from where they were pressed; leaving is quicker than arriving. */ html.day.js-motion .lang-menu[open] .lang-list{transform-origin:top right;animation:dMenu var(--t-ui) var(--ease-out) both} @keyframes dMenu{from{opacity:0;transform:scale(.97) translateY(-6px)}to{opacity:1;transform:none}} html.day.js-motion dialog{translate:0 12px;scale:.98;transition:opacity 200ms ease,translate 220ms var(--ease-out),scale 220ms var(--ease-out),overlay 220ms allow-discrete,display 220ms allow-discrete} html.day.js-motion dialog[open]{translate:0 0;scale:1;transition:opacity 260ms ease,translate 340ms var(--ease-out),scale 340ms var(--ease-out),overlay 340ms allow-discrete,display 340ms allow-discrete} @starting-style{html.day.js-motion dialog[open]{opacity:0;translate:0 12px;scale:.98}} html.day.js-motion dialog::backdrop{transition:opacity 200ms ease,overlay 200ms allow-discrete,display 200ms allow-discrete} html.day.js-motion dialog[open]::backdrop{transition:opacity 280ms ease,overlay 280ms allow-discrete,display 280ms allow-discrete} /* 13e. Glows and fades from the night page have no place on flat fields. */ html.day .starlink-section:before,html.day .orbit-section:after,html.day .amazon-section:before,html.day .amazon-section:after,html.day .more-catalog:before,html.day .more-catalog:after{display:none} html.day .catalog .product:nth-child(n) h3,html.day .product-body h3,html.day .form-top strong,html.day .starlink-more h3,html.day .lineup-head h3,html.day .model-card h4,html.day .step h3{color:var(--d-ink)} /* 14. Phone -------------------------------------------------------------------- */ @media(max-width:760px){ html.day .header .text-button{white-space:nowrap} html.day .night-tiles{gap:6px} html.day .night-tile,html.day .night-tile:first-child{min-height:148px;padding:16px} html.day .night-tile i{right:16px;bottom:16px} html.day .section-heading p,html.day .inquiry-intro>p{font-size:18px} html.day .brand-track span{font-size:34px} html.day .footer a.brand{font-size:19vw} html.day .step>span{font-size:40px} html.day .boxshot-list li{font-size:15px} } /* 15. After the first inspector round ------------------------------------------- */ /* The first screen's black belongs to the section itself, edge to edge, so contrast is measured against it. */ html.day .hero:before{display:none} html.day .hero{background-color:var(--d-dark);border-image:conic-gradient(var(--d-dark) 0 0) fill 0//0 100vw} /* Labels above headings become the line under them; the brand list needs no label. */ html.day .brand-strip-label{display:none} html.day .starlink-body{display:flex!important;flex-direction:column;align-items:flex-start} html.day .starlink-body>h3{order:1;margin:0 0 6px} html.day .starlink-body>small{order:2;margin:0 0 14px} html.day .starlink-body>p{order:3} html.day .starlink-body>.spec-link{order:4;margin:0 0 18px} html.day .starlink-body>.btn{order:5} /* Four families, not four equal cards: Starlink leads, the arrow gives way to the name itself. */ html.day .night-tiles{grid-template-columns:2fr 1fr 1fr 1fr} html.day .night-tile i{display:none} html.day .night-tile strong{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.06em;text-underline-offset:.12em;transition:text-decoration-color var(--t-hover) ease} @media(hover:hover) and (pointer:fine){html.day .night-tile:hover strong{text-decoration-color:currentColor}} /* The globe drawn flat: one deep blue disc, the land in dots. */ html.day .dv-g-base{background:#17191e!important} html.day .dv-g-rim,html.day .dv-g-peach{display:none} /* Fewer sizes: small 13, label 15, body 16, lead 22, title, heading, display. */ html.day{--s-title:clamp(30px,3.4vw,52px)} html.day .night-tile strong,html.day .lineup-head h3,html.day .starlink-product:first-child .starlink-body h3,html.day .step>span{font-size:var(--s-title)} html.day .footer a.brand{font-size:clamp(44px,min(9.6vw,17vh),176px)} html.day .kit-intro p{font-size:var(--s-lead)} html.day .trustline strong{font-size:var(--s-body);font-weight:600} html.day p{max-width:60ch} /* The Amazon line-ups wrap instead of running off the edge. */ @media(max-width:1050px){ html.day .lineup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;gap:8px;overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none} html.day .model-card{flex:none;grid-row:auto;display:flex;flex-direction:column} } @media(max-width:600px){html.day .lineup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){ html.day .night-tiles{grid-template-columns:1fr 1fr} html.day .night-tile:first-child,html.day .night-tile:last-child{grid-column:1/-1} html.day .night-tile,html.day .night-tile:first-child{min-height:120px} } /* The image credit sits in the plate's far corner, away from the name. */ html.day .starlink-art .art-note,html.day .starlink-art.official-photo .art-note{top:14px;right:16px;bottom:auto;left:auto;text-align:right} /* Phone steps: small 13, label 15, body 16, lead 18, title 30, heading 38, display 48. */ @media(max-width:760px){ html.day{--s-lead:18px;--s-title:30px;--s-head:38px} html.day .brand-track span{font-size:38px} html.day .footer a.brand{font-size:48px} html.day .hero h1,html.day:lang(en) .hero h1,html.day:lang(ja) .hero h1,html.day:lang(zh) .hero h1{font-size:48px} } /* Japanese and Chinese: the notes are real sentences a buyer reads, so they are set as body text. */ html.day:lang(ja) :is(.source-note,.catalog-note,.preview-note,.form-bottom p),html.day:lang(zh) :is(.source-note,.catalog-note,.preview-note,.form-bottom p){font-size:var(--s-body)!important;line-height:1.7;color:var(--d-ink)} /* Spanish and Portuguese run longer: the two headings in narrow columns, and phone headings, go one step down (measured to stay within two lines). */ html.day:is(:lang(es),:lang(pt)) .orbit-section .markets>span{font-size:clamp(28px,3.05vw,44px);line-height:1.06} html.day:is(:lang(es),:lang(pt)) .inquiry-intro>h2{font-size:clamp(30px,3.6vw,56px)} @media(max-width:760px){ html.day:is(:lang(es),:lang(pt)) h2{font-size:30px} html.day:is(:lang(es),:lang(pt)) .orbit-section .markets>span{width:auto;font-size:28px;line-height:1.1} } /* Narrow phones: the bar keeps wordmark, language and WhatsApp; the client portal (not yet connected) waits for wider screens. */ @media(max-width:480px){html.day .header .text-button{display:none}} /* 16. One colour: cool grey, near-black, one calm blue ---------------------------------- Cobalt is the action (every button), the links, and one whole field (how it works); Starlink, the core business, is the one tile that carries it. Everything else is neutral. */ html.day .btn,html.day .product-footer button,html.day .model-ask{background:var(--d-accent)!important;color:var(--d-accent-ink)!important} html.day .btn.outline{background:var(--d-surface)!important;color:var(--d-ink)!important} html.day .extra-kits button{background:var(--d-plate)!important;color:var(--d-ink)!important} html.day .header.on-dark .btn.small:not(.wa-btn){background:var(--d-dark-ink)!important;color:var(--d-ink)!important} html.day .hero .btn{background:var(--d-dark-ink)!important;color:var(--d-ink)!important} html.day .hero .btn.outline{background:#24272e!important;color:var(--d-dark-ink)!important} @media(hover:hover) and (pointer:fine){ html.day .btn:hover,html.day .product-footer button:hover,html.day .model-ask:hover{background:var(--d-accent-deep)!important} html.day .btn.outline:hover{background:#d5d9e0!important} html.day .hero .btn:hover,html.day .header.on-dark .btn.small:not(.wa-btn):hover{background:#fff!important} html.day .hero .btn.outline:hover{background:#33363e!important} } html.day .night-tile:first-child,html.day .night-tile:first-child strong,html.day .night-tile:first-child small{color:var(--d-accent-ink)} html.day .starlink-product:first-child{background:var(--d-surface)} html.day .catalog .product[data-category] .product-art{background:var(--d-plate)} html.day .workflow{background:var(--d-surface);color:var(--d-ink);--text:var(--d-ink);--text-2:var(--d-ink)} html.day .workflow h2,html.day .workflow .section-heading p,html.day .workflow p,html.day .step>span,html.day .step h3{color:var(--d-ink)} html.day .hero :focus-visible,html.day .orbit-section :focus-visible,html.day .footer :focus-visible,html.day .night-tile:first-child:focus-visible,html.day .header.on-dark :focus-visible{outline-color:#fff} html.day .boxshot-pins li.is-hot{background:var(--d-accent);color:var(--d-accent-ink)} /* 17. Steadier ("需要沉稳一些", 2026-10-14) -------------------------------------- A calm mid blue, #4066bf ("沉稳并不意味着颜色这么深": neither the electric #1f2de6 nor the deep #062b8a, which he found too dark); square controls like the square cards; brand names at heading size rather than poster size; every move shorter in travel and slower to settle. */ html.day .btn,html.day .tab,html.day .tabs,html.day .extra-kits button,html.day .product-footer button,html.day .model-ask,html.day .markets .market-chip,html.day .boxshot-list b,html.day .boxshot-name{border-radius:0} html.day .brand-track span,html.day .brand-track span.is-lead{font-size:clamp(30px,3.6vw,56px);letter-spacing:-.035em} @media(max-width:760px){html.day .brand-track span{font-size:30px}} /* 18. UI UX Pro Max's whole-page system, reviewed by Taste (2026-10-14) -------------- UI UX Pro Max --design-system ("B2B electronics hardware wholesale professional trustworthy", variance 4, motion 3, density 5): pattern "Trust & Authority + Conversion", colour strategy "Navy/Grey corporate. Trust blue. Accent for CTA only", background #F8FAFC, card #FFFFFF, muted #E8ECF1, muted text #475569, text #020617, accent #0369A1; subtle reveals, 8-16px. Taste kept those colours and changed three things: no borders or shadows (its house rules), the dark chapters keep the photograph's own near-black rather than navy (colour taken from the subject), and the system faces stay because the proposed web fonts have no Japanese or Chinese. Reveal timing meets in the middle: Taste asks 500-900ms, UI UX Pro Max "standard" 400-600ms -> 600ms. So blue now marks only what you can do: buttons and text links. No blue fields. */ html.day .night-tile:first-child{background:var(--d-dark)} /* 19. Buttons with life (the user: "参考 CoolMIX，要有活力一些", 2026-10-14) ----------------- Read from the saved CoolMIX page (analysis only, nothing copied): round buttons, a clear blue (#2363cf) for the main action, white on dark, 600 weight; on hover the button rises 2px and a soft shadow appears, the arrow steps forward; pressed, it sinks back. The page itself stays calm. The shadow exists only while the pointer is on the button, so nothing carries a shadow at rest (Taste); hover 200ms, press 90ms, cursor and focus as UI UX Pro Max asks. */ html.day{--d-accent:#2363cf;--d-accent-deep:#1b52b3;--d-accent-tint:#e7effc} html.day .btn,html.day .tab,html.day .tabs,html.day .extra-kits button,html.day .product-footer button,html.day .model-ask,html.day .markets .market-chip{border-radius:999px} html.day .btn,html.day .product-footer button,html.day .model-ask,html.day .extra-kits button{font-weight:600;transition:translate var(--t-hover) var(--ease-out),scale var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease,box-shadow var(--t-hover) ease} @media(hover:hover) and (pointer:fine){ html.day .btn:hover,html.day .product-footer button:hover,html.day .model-ask:hover{translate:0 -2px;box-shadow:0 14px 26px -14px rgba(35,99,207,.75)!important} html.day .btn.outline:hover{background:var(--d-accent-tint)!important;color:var(--d-accent)!important;box-shadow:0 12px 24px -16px rgba(10,20,40,.35)!important} html.day .hero .btn:hover,html.day .header.on-dark .btn.small:not(.wa-btn):hover{box-shadow:0 16px 32px -12px rgba(0,0,0,.65)!important} html.day .hero .btn.outline:hover{background:rgba(35,99,207,.32)!important;color:#fff!important} html.day .extra-kits button:hover{background:var(--d-accent-tint)!important;color:var(--d-accent)!important;translate:0 -2px} html.day .header .btn.wa-btn:hover{translate:none;box-shadow:none!important;text-decoration:underline} html.day .btn.arrow:hover:after{transform:translate(3px,-3px)} } html.day .btn:active,html.day .product-footer button:active,html.day .model-ask:active,html.day .extra-kits button:active{translate:0 0;scale:.97;box-shadow:none!important;transition-duration:90ms} /* Hover brightens (like the reference) instead of darkening; the darker blue is kept for the press. */ @media(hover:hover) and (pointer:fine){html.day .btn:not(.outline):hover,html.day .product-footer button:hover,html.day .model-ask:hover{background:#2f72e6!important}html.day .hero .btn:not(.outline):hover,html.day .header.on-dark .btn.small:not(.wa-btn):hover{background:#fff!important}} html.day .btn:not(.outline):active,html.day .product-footer button:active,html.day .model-ask:active{background:var(--d-accent-deep)!important} html.day .hero .btn:not(.outline):active{background:#dfe5ee!important} /* 20. Every enquiry in one clashing colour (the user: "所有有关询价的地方尽量都撞色，和 CoolMIX 一样", 2026-10-14) Both skills point the same way. UI UX Pro Max colors.csv: "Logistics/Delivery: tracking blue + delivery orange #EA580C, text on it #000" and "trust blue + orange CTA contrast". Taste palettes.json: sky-field-navy "orange is for buttons ... orange against blue is the single clash on the page" (also white-navy-tab, graphite-safety-orange). So: orange marks every way to enquire (the enquiry buttons, Request a quote, the WhatsApp contact, the form's submit, the kit chips); blue stays for text links; other buttons go neutral. Black text on orange 5.7:1; white would fail. */ html.day{--d-cta:#ea580c;--d-cta-hover:#f97316;--d-cta-press:#d9520b;--d-cta-ink:#020617;--d-cta-text:#c2410c} html.day [data-inquire].btn,html.day .model-ask,html.day .product-footer button,html.day .header .btn.small.arrow,html.day .inquiry-form .btn.arrow,html.day .contact-direct .btn.wa-btn,html.day .header.on-dark .btn.small.arrow,html.day .hero [data-inquire].btn{background:var(--d-cta)!important;color:var(--d-cta-ink)!important} html.day .contact-direct .btn.wa-btn .wa-icon{color:var(--d-cta-ink)} html.day .btn:not([data-inquire]):not(.outline):not(.small):not(.inquiry-form .btn){background:var(--d-ink)!important;color:var(--d-bg)!important} html.day .hero .btn.outline{background:#24272e!important;color:var(--d-dark-ink)!important} html.day .extra-kits button{background:var(--d-plate)!important;color:var(--d-cta-text)!important} @media(hover:hover) and (pointer:fine){ html.day [data-inquire].btn:hover,html.day .model-ask:hover,html.day .product-footer button:hover,html.day .header .btn.small.arrow:hover,html.day .inquiry-form .btn.arrow:hover,html.day .contact-direct .btn.wa-btn:hover,html.day .hero [data-inquire].btn:hover{background:var(--d-cta-hover)!important;color:var(--d-cta-ink)!important;translate:0 -2px;box-shadow:0 14px 28px -12px rgba(234,88,12,.7)!important} html.day .extra-kits button:hover{background:var(--d-cta)!important;color:var(--d-cta-ink)!important;translate:0 -2px;box-shadow:0 12px 24px -14px rgba(234,88,12,.7)!important} html.day .hero .btn.outline:hover{background:#33363e!important;color:#fff!important;box-shadow:none!important} } html.day [data-inquire].btn:active,html.day .model-ask:active,html.day .product-footer button:active,html.day .header .btn.small.arrow:active,html.day .inquiry-form .btn.arrow:active,html.day .contact-direct .btn.wa-btn:active,html.day .extra-kits button:active{background:var(--d-cta-press)!important;color:var(--d-cta-ink)!important} html.day .inquiry-points li:before{background:var(--d-cta)} html.day .boxshot-pins li.is-hot{background:var(--d-cta);color:var(--d-cta-ink)} html.day .contact-direct .btn.wa-btn b{color:inherit} /* 21. The bar opens to the edges when the page moves (the user: "滑下去左右会拉开，升起来会左右滑", 2026-10-14) Measured on the saved CoolMIX page: on any scroll the body gets home-nav-scrolled; the bar's inner width goes from 1180px to the full window and its side padding from 8px to 28.8px over 0.32s cubic-bezier(.4,0,.2,1), so the logo slides out left and the button group out right; back at the top they slide in again. Same movement here, but made with translate (the motion layer moves transform-type properties only, never width or padding, so nothing re-lays out each frame). */ html.day{--ease-std:cubic-bezier(.4,0,.2,1)} @media(min-width:1100px){ html.day .header>.wrap{max-width:1180px} html.day .header .brand,html.day .header .nav-actions{transition:translate 320ms var(--ease-std),color var(--t-ui) ease} html.day .header.is-scrolled .brand{translate:calc(var(--spread,0px)*-1) 0} html.day .header.is-scrolled .nav-actions{translate:var(--spread,0px) 0} } @media(prefers-reduced-motion:reduce){html.day .header .brand,html.day .header .nav-actions{transition:none}} /* 22. Saying what the business is (2026-10-14: "让客户能收到我们…B2B Starlink 批发，包括亚马逊 Alexa 音响") One supporting line under the headline, and a plain wholesale FAQ that buyers, search engines and AI assistants can quote (it mirrors the FAQPage structured data in the head). */ html.day .hero-lead{margin:clamp(14px,2vh,22px) auto 0;max-width:44ch;font-size:var(--s-lead);line-height:1.4;letter-spacing:-.01em;color:var(--d-dark-muted);text-wrap:balance} html.day.js-motion .hero-lead{animation:dRise var(--t-reveal) var(--ease-out) 260ms both} html.day .faq{padding-top:clamp(88px,10vw,168px)} html.day .faq-list{display:grid;gap:8px} html.day .faq-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,48px);padding:clamp(20px,2.4vw,32px);background:var(--d-surface)} html.day .faq-item h3{margin:0;font-size:var(--s-lead);line-height:1.3;letter-spacing:-.02em;color:var(--d-ink)} html.day .faq-item p{margin:0;font-size:var(--s-body);line-height:1.6;color:var(--d-ink)} @media(max-width:760px){html.day .faq-item{grid-template-columns:minmax(0,1fr);gap:10px}}