/* ========================================================== 晶片驅動－全台半導體資源共享平台 共用樣式（設計系統）site.css ---------------------------------------------------------- 01 Tokens 02 Base / a11y 03 Buttons / chips 04 Header 05 Decorations 06 Home sections 07 Inner pages 08 Components 09 Footer 10 Motion 11 Responsive 12 Print ========================================================== */ /* ---------- 01 Tokens（改這裡即可整站換色） ---------- */ :root{ color-scheme:dark; --bg:#000; --surface:#1b1b1b; /* 後台卡片色 */ --surface-2:#121212; --border:rgba(192,192,192,.16); --field:rgba(255,255,255,.1); /* 後台半透明輸入框 */ --field-border:#707070; /* 表單框線 ≥3:1（WCAG 1.4.11） */ --line:rgba(192,192,192,.12); --primary:#0b6fd2; /* 白字底色：白字 5.0:1 */ --primary-hover:#0a5cb3; /* 白字 6.3:1 */ --blue:#219bff; /* 後台主色：光暈、框線、焦點環（黑底 7.2:1） */ --link:#7cc4ff; /* 連結、強調字（黑底 11:1） */ --link-hover:#b8e0ff; --accent:#7cc4ff; --accent-2:#9fd3ff; --lavender:#e0aaff; /* 少量點綴（黑底 11:1） */ --navy:#062d4c; --tile:radial-gradient(120% 120% at 30% 20%,#105a95 0%,#062d4c 55%,#041a2c 100%); --text:#fff; --text-2:#c4c4c4; /* 黑底 12:1；#1b1b1b 上 9.6:1 */ --text-3:#a3a3a3; /* 黑底 8.4:1；#1b1b1b 上 6.8:1 */ --gutter:clamp(16px,4vw,40px); --container:1240px; --header-h:76px; --font:"Montserrat","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif; --ease:cubic-bezier(.2,.7,.2,1); --radius:15px; } /* ---------- 02 Base / accessibility ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px;overflow-x:clip} body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip} svg{display:block} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} h1,h2,h3,h4{font-weight:700;letter-spacing:.01em} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)} .svg-defs{position:absolute;width:0;height:0;overflow:hidden} main{position:relative;display:block} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* 跳到主要內容 */ .skip-link{position:absolute;top:-100px;left:16px;z-index:200;padding:12px 20px;background:var(--accent);color:#000;font-weight:700;border-radius:0 0 6px 6px;transition:top .2s} .skip-link:focus{top:0} /* 導盲磚 ::: */ .ak{display:inline-block;min-width:24px;color:var(--text-3);font-size:13px;font-weight:700;letter-spacing:.1em;line-height:1;text-decoration:none} .ak:hover,.ak:focus-visible{color:var(--accent)} .ak--main{position:absolute;left:var(--gutter);top:10px;z-index:3} /* ---------- 03 Buttons / pills / chips ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-weight:600;line-height:1;border-radius:.5rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .25s,transform .2s var(--ease)} .btn svg{width:18px;height:18px;flex:none} .btn--primary{background:var(--primary);color:#fff;box-shadow:0 .75rem 1.75rem -.5rem rgba(23,23,23,.4)} .btn--primary:hover{background:var(--primary-hover);box-shadow:0 10px 30px -8px rgba(33,155,255,.75);transform:translateY(-1px)} .btn--white{background:#fff;color:#000} .btn--white:hover{background:var(--accent-2)} .btn--ghost{border:1px solid var(--field-border);background:rgba(255,255,255,.06);color:#fff} .btn--ghost:hover{border-color:var(--link);color:var(--link)} .btn--lg{height:56px;padding:0 36px;font-size:16px;border-radius:.9375rem} .btn--md{height:48px;padding:0 28px;font-size:15px;border-radius:.75rem} .btn--sm{height:40px;padding:0 20px;font-size:14px} .btn--xs{height:34px;padding:0 14px;font-size:13.5px;border-radius:.5rem} .btn--block{width:100%} .link-u{font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;transition:color .2s} .link-u:hover{color:var(--link-hover)} .link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-weight:600;font-size:15px} .link-arrow svg{width:18px;height:18px;transition:transform .3s var(--ease)} .link-arrow:hover svg{transform:translateX(4px)} .badge-row{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:500} .pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:rgba(33,155,255,.16);border:1px solid rgba(33,155,255,.45);color:var(--accent-2);font-size:13px;font-weight:600} .tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#dad9d9;font-size:12.5px;font-weight:600;white-space:nowrap} .tag--y{background:rgba(224,170,255,.13);color:var(--lavender)} .tag--solid{background:rgba(4,26,44,.88);border:1px solid rgba(33,155,255,.5);color:var(--accent-2)} .tag svg{width:13px;height:13px} .ext-icon{display:inline-block;width:.9em;height:.9em;margin-left:4px;vertical-align:-.08em} .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .eyebrow::before{content:"";width:22px;height:2px;background:currentColor} .h2{font-size:clamp(30px,3.8vw,50px);line-height:1.25} .h3{font-size:clamp(22px,2.2vw,28px);line-height:1.35} .lead{color:var(--text-2);font-size:16.5px;line-height:1.85} .section{position:relative;padding:140px 0} .section--tight{padding:88px 0} .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:48px} .sec-head .h2{margin-top:14px} .sec-head .lead{max-width:460px} /* ---------- 04 Header ---------- */ .site-header{position:sticky;top:-41px;z-index:60} .topbar{height:41px;background:#000;border-bottom:1px solid var(--line);font-size:13px;color:var(--text-2)} .topbar__inner{display:flex;align-items:center;gap:20px;height:100%} .topbar__org{margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar__links{display:flex;align-items:center;gap:20px} .topbar__links>a{transition:color .2s} .topbar__links>a:hover{color:#fff} .lang{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px} .lang>*{display:inline-grid;place-items:center;height:24px;min-width:40px;padding:0 8px;border-radius:999px;font-size:12.5px;font-weight:600} .lang [aria-current]{background:#fff;color:#000} .lang a:hover{color:var(--link)} .hsearch{position:relative;display:flex;align-items:center} .hsearch input{width:200px;height:30px;padding:0 34px 0 12px;border:1px solid var(--field-border);border-radius:8px;background:var(--field);color:#fff;font:inherit;font-size:13px;transition:width .35s var(--ease),border-color .2s} .hsearch input::placeholder{color:var(--text-3)} .hsearch input:focus{width:260px;border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(33,155,255,.45)} .hsearch button{position:absolute;right:4px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--text-2)} .hsearch button:hover{color:#fff} .hsearch svg{width:15px;height:15px} .nav{position:relative;background:#000;border-bottom:1px solid var(--line);transition:background-color .3s,box-shadow .3s} .site-header.is-scrolled .nav{background:rgba(0,0,0,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 30px -18px rgba(33,155,255,.55)} .nav__inner{display:flex;align-items:center;gap:40px;height:var(--header-h)} .logo{display:inline-flex;align-items:center;gap:16px;flex:none;line-height:1.3} .logo__img{display:block;height:46px;width:auto} .logo__divider{width:1px;height:32px;background:rgba(255,255,255,.35)} .logo__name{color:#fff;font-size:15px;font-weight:600;letter-spacing:.06em;white-space:nowrap} html[lang="en"] .nav .logo__name{white-space:normal;width:210px;font-size:14px;letter-spacing:.02em;line-height:1.35} .logo--footer{flex-direction:column;align-items:flex-start;gap:14px} .logo--footer .logo__img{height:64px} .logo--footer .logo__name{color:var(--text-2);font-size:14px} .nav__links{margin-inline:auto} .nav__links>ul{display:flex;gap:6px;font-size:15px;font-weight:500} .nav__links li{position:relative} .nav__links>ul>li>a{position:relative;display:inline-flex;align-items:center;gap:6px;height:var(--header-h);padding:0 16px;transition:color .2s} .nav__links>ul>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .3s var(--ease)} .nav__links>ul>li>a:hover,.nav__links>ul>li>a.is-active,.nav__links li:focus-within>a{color:var(--link)} .nav__links>ul>li>a.is-active::after,.nav__links>ul>li:hover>a::after{transform:scaleX(1)} .nav__caret{width:12px;height:12px;transition:transform .3s var(--ease)} .has-sub:hover .nav__caret,.has-sub:focus-within .nav__caret{transform:rotate(180deg)} .sub{position:absolute;top:100%;left:0;min-width:220px;padding:10px;background:rgba(27,27,27,.98);border:1px solid var(--border);border-radius:15px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(33,155,255,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s} .has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none} .has-sub.is-closed .sub{opacity:0;visibility:hidden} .sub a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;font-size:14.5px;color:var(--text-2);transition:background-color .2s,color .2s} .sub a::after{content:"→";opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s var(--ease)} .sub a:hover,.sub a:focus-visible{background:rgba(33,155,255,.16);color:#fff} .sub a:hover::after,.sub a:focus-visible::after{opacity:1;transform:none} .nav__cta{border-radius:.5rem} .nav__toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto} .nav__toggle span{display:block;width:20px;height:2px;border-radius:1px;background:#fff;transition:transform .3s var(--ease),opacity .2s} .site-header.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .site-header.is-open .nav__toggle span:nth-child(2){opacity:0} .site-header.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 64px);overflow:auto;background:#000;border-bottom:1px solid var(--line);padding:16px var(--gutter) 28px} .site-header.is-open .mobile-menu{display:block;animation:dropIn .35s var(--ease)} .mobile-menu__name{margin-bottom:14px;color:var(--text-2);font-size:13px;font-weight:600;letter-spacing:.06em} .mobile-menu .msearch{display:flex;gap:8px;margin-bottom:12px} .mobile-menu .msearch input{flex:1;min-width:0} .mobile-menu__group{border-bottom:1px solid rgba(255,255,255,.1)} .mobile-menu__group>a{display:block;padding:14px 0 8px;font-size:16px;font-weight:600} .mobile-menu__group ul{display:flex;flex-wrap:wrap;gap:4px 18px;padding-bottom:14px} .mobile-menu__group li a{display:inline-block;padding:6px 0;font-size:14.5px;color:var(--text-2)} .mobile-menu__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px} @keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* ---------- 05 Decorations ---------- */ .circuits{position:absolute;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent)} .circuits--wide{top:0;left:50%;width:1440px;height:640px;transform:translateX(-50%)} .circuits--band{top:0;left:50%;width:1440px;height:340px;transform:translateX(-50%)} .circuits--m{display:none} .circuits .trace{fill:none;stroke:#2e4256;stroke-width:2} .circuits .pulse{fill:none;stroke:#7cc4ff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:12 108;animation:pulse var(--dur,4.5s) linear var(--delay,0s) infinite} .circuits circle{fill:#000;stroke:#6f8aa3;stroke-width:2.5} @keyframes pulse{from{stroke-dashoffset:120}to{stroke-dashoffset:0}} .grain{position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen} .glow-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px);animation:orb 14s ease-in-out infinite alternate} @keyframes orb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-24px,0) scale(1.12)}} .floaty{animation:float 6s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes blink{0%,100%{opacity:.25}50%{opacity:1}} [data-parallax]{will-change:transform;transition:transform .2s linear} .art-rise rect{animation:rise 3.8s ease-in-out infinite} .art-rise rect:nth-child(2){animation-delay:-1.4s} .art-rise rect:nth-child(3){animation-delay:-2.3s} .art-rise rect:nth-child(4){animation-delay:-3.1s} .art-beam{animation:glowPulse 1.6s ease-in-out infinite} /* ---------- 06 Home sections ---------- */ /* Hero carousel (A5) */ .hero{position:relative;overflow:hidden;padding:72px 0 150px} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(34% 42% at 30% 34%,rgba(16,120,215,.30),transparent 70%), radial-gradient(38% 34% at 66% 62%,rgba(40,190,230,.20),transparent 72%)} .carousel{position:relative} .carousel__viewport{display:grid} .slide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:48px;min-height:460px} .slide+.slide{margin-top:64px} .slide__text .badge-row{margin-bottom:22px} .slide__title{font-size:clamp(30px,3.9vw,52px);line-height:1.22} .slide__text p{max-width:560px;margin-top:22px;color:var(--text-2);font-size:17px} .slide__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:36px} .slide__art{position:relative;display:grid;place-items:center} .slide__art svg{width:min(540px,112%);height:auto;margin-inline:-6%} .slide__art::after{content:"";position:absolute;left:12%;right:12%;bottom:2%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(33,155,255,.5),transparent);z-index:-1} .js .carousel.is-enhanced .slide{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s} .js .carousel.is-enhanced .slide.is-active{opacity:1;visibility:visible} .js .carousel.is-enhanced .slide .slide__text>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .carousel.is-enhanced .slide.is-active .slide__text>*{opacity:1;transform:none} .js .carousel.is-enhanced .slide.is-active .slide__text>:nth-child(2){transition-delay:.08s} .js .carousel.is-enhanced .slide.is-active .slide__text>:nth-child(3){transition-delay:.16s} .js .carousel.is-enhanced .slide.is-active .slide__text>:nth-child(4){transition-delay:.24s} .js .carousel.is-enhanced .slide .slide__art{opacity:0;transform:translateX(40px) scale(.96);transition:opacity .9s var(--ease),transform 1s var(--ease)} .js .carousel.is-enhanced .slide.is-active .slide__art{opacity:1;transform:none} .carousel__controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:40px} .cbtn{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--field-border);border-radius:50%;transition:border-color .2s,background-color .2s,color .2s} .cbtn:hover{border-color:#fff;background:#fff;color:#000} .cbtn svg{width:18px;height:18px} .cbtn--toggle{width:auto;padding:0 18px 0 14px;gap:8px;display:inline-flex;align-items:center;border-radius:999px;font-size:14px;font-weight:600} .carousel__dots{display:flex;gap:8px} .cdot{display:flex;align-items:center;width:64px;height:44px} .cdot span{position:relative;display:block;width:100%;height:3px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.22)} .cdot i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left} .cdot.is-done i{transform:scaleX(1);background:rgba(255,255,255,.55)} .cdot[aria-current="true"] i{animation:fill var(--slide-dur,7s) linear forwards} .carousel.is-paused .cdot[aria-current="true"] i{animation-play-state:paused} .carousel__count{margin-left:6px;color:var(--text-2);font-size:14px;font-variant-numeric:tabular-nums} .carousel__count b{color:#fff} @keyframes fill{to{transform:scaleX(1)}} /* Quick search (A6/A7) */ .qsearch{position:relative;z-index:5;margin-top:-90px} .qsearch__panel{position:relative;padding:32px 36px 28px;background:linear-gradient(180deg,rgba(27,27,27,.97),rgba(18,18,18,.98));border:1px solid var(--border);border-radius:15px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(33,155,255,.15) inset;overflow:hidden} .qsearch__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--accent),transparent);animation:scan 6s linear infinite;background-size:200% 100%} @keyframes scan{from{background-position:200% 0}to{background-position:-200% 0}} .qsearch__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:20px} .qsearch__head h2{font-size:22px} .qsearch__head p{color:var(--text-2);font-size:14px} .qsearch__form{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:14px;align-items:end} .qsearch__hot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px;font-size:13.5px;color:var(--text-2)} .qsearch__hot a{padding:4px 12px;border:1px solid var(--line);border-radius:999px;color:var(--text-2);transition:border-color .2s,color .2s,background-color .2s} .qsearch__hot a:hover{border-color:var(--link);color:#fff;background:rgba(33,155,255,.15)} /* Forms */ .field{display:flex;flex-direction:column;gap:8px;min-width:0} .field>label,.field>.field__label,fieldset>legend{font-size:13.5px;font-weight:600;color:var(--text-2)} .input,.select{width:100%;height:48px;padding:0 14px;border:1px solid var(--field-border);border-radius:8px;background:var(--field);color:#fff;font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s} .input::placeholder{color:var(--text-3)} .input:hover,.select:hover{border-color:#8a8a8a} .input:focus,.select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(33,155,255,.45)} .select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c2cc' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px} .input--icon{padding-left:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c2cc' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;background-size:18px} fieldset{border:0;min-width:0} .checks{display:grid;gap:4px;margin-top:8px} .check{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 8px;border-radius:4px;font-size:15px;cursor:pointer;transition:background-color .2s} .check:hover{background:rgba(255,255,255,.05)} .check input{width:18px;height:18px;accent-color:var(--primary);flex:none} .check .count{margin-left:auto;color:var(--text-3);font-size:13px;font-variant-numeric:tabular-nums} /* Category cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:16px 16px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .3s,transform .4s var(--ease),box-shadow .4s} .card:hover,.card:focus-within{border-color:rgba(33,155,255,.75);transform:translateY(-6px);box-shadow:0 24px 60px -24px rgba(33,155,255,.6)} .card__media{position:relative;width:100%;aspect-ratio:280/170;overflow:hidden;border-radius:10px;background:var(--tile)} .card__media svg{width:100%;height:100%} .card__count{position:absolute;top:10px;right:10px} .card h3{margin:22px 0 10px;font-size:22px;line-height:1.4} .card h3 a::after{content:"";position:absolute;inset:0} .card p{flex:1;color:var(--text-2);font-size:15px;line-height:1.8} .card .card__more{margin-top:20px} /* Sweep-light on image tiles */ .sweep{position:relative;overflow:hidden} .sweep::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg) translateX(0);opacity:0;pointer-events:none} .card:hover .sweep::after,.rcard:hover .sweep::after,.card:focus-within .sweep::after,.rcard:focus-within .sweep::after{animation:sweep 1s var(--ease)} @keyframes sweep{0%{opacity:0;transform:skewX(-18deg) translateX(0)}20%{opacity:1}100%{opacity:0;transform:skewX(-18deg) translateX(420%)}} /* About (cube) */ .exp{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px} .exp__text{padding-left:clamp(0px,3vw,40px)} .exp__text .lead{max-width:440px;margin:24px 0 32px} .exp__list{display:grid;gap:14px;margin-bottom:36px} .exp__list li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);font-size:15px} .exp__list li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;background:var(--accent);transform:rotate(45deg)} .exp__visual{position:relative;display:grid;place-items:center;height:480px} .cube{position:relative;z-index:1;width:min(420px,92%)} .cube__core{animation:float 6s ease-in-out infinite} .cube__streak{animation:blink 3.2s ease-in-out infinite} .floor{position:absolute;left:-30%;right:-30%;top:66%;height:260px;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:46px 46px;background-position:center top;transform:perspective(520px) rotateX(64deg);transform-origin:center top;-webkit-mask-image:radial-gradient(ellipse 50% 70% at 50% 20%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 50% 70% at 50% 20%,#000 30%,transparent 75%)} .floor--move{animation:floorMove 8s linear infinite} @keyframes floorMove{to{background-position:center 46px}} /* Flow / steps (pyramid) */ .flow{display:grid;grid-template-columns:minmax(0,5fr) 1px minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center} .flow__visual{display:flex;justify-content:center} .pyramid{width:min(360px,100%);-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)} .pyr{animation:float 5s ease-in-out infinite} .pyr__streaks rect{animation:rise 3.8s ease-in-out infinite} .pyr__streaks rect:nth-child(2){animation-delay:-1.2s} .pyr__streaks rect:nth-child(3){animation-delay:-2.1s} .pyr__streaks rect:nth-child(4){animation-delay:-3s} .pyr__hole{animation:glowPulse 3s ease-in-out infinite} @keyframes rise{0%{transform:translateY(24px);opacity:0}35%{opacity:1}100%{transform:translateY(-36px);opacity:0}} @keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}} .flow__divider{align-self:stretch;background:linear-gradient(transparent,rgba(255,255,255,.22) 20%,rgba(255,255,255,.22) 80%,transparent)} .steps__meta{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:500;color:var(--text-2)} .steps__label{font-size:14px;font-weight:500;color:var(--text-2)} .steps__num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#000;font-size:12px;font-weight:700} .steps__name{color:#fff} .steps__list{margin-top:22px} .steps__item+.steps__item{margin-top:40px} .steps__item .lead{max-width:470px;margin-top:22px} .steps__item .step-k{display:inline-block;margin-bottom:10px;color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.1em} .js .steps.is-enhanced .steps__list{min-height:300px} .js .steps.is-enhanced .steps__item{display:none;margin:0} .js .steps.is-enhanced .steps__item.is-active{display:block;animation:stepIn .6s var(--ease)} .js .steps.is-enhanced .step-k{display:none} @keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .steps__peek{display:block;height:1.9em;margin-top:22px;overflow:hidden;text-align:left;font-size:clamp(28px,3.2vw,42px);font-weight:700;line-height:1.25;color:rgba(255,255,255,.6);-webkit-mask-image:linear-gradient(#000 25%,transparent 95%);mask-image:linear-gradient(#000 25%,transparent 95%);transition:color .2s} .steps__peek:hover{color:#fff} .steps__ctrl{display:flex;align-items:center;gap:14px;margin-top:20px} .steps__bars{display:flex;gap:8px} .steps__bar{display:flex;align-items:center;width:56px;height:44px} .steps__bar span{position:relative;display:block;width:100%;height:3px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.2)} .steps__bar i{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left} .steps__bar.is-done i{transform:scaleX(1)} .steps__bar[aria-current="step"] i{animation:fill 6s linear forwards} .steps.is-paused .steps__bar[aria-current="step"] i{animation-play-state:paused} /* Network (Taiwan map) */ .net__head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px} .net__head .lead{justify-self:end;max-width:460px;font-size:15.5px} .map{position:relative;height:620px;margin-top:48px} .map__stage{position:absolute;inset:0} .map__disc{position:absolute;left:50%;bottom:20px;width:min(1000px,120%);aspect-ratio:3.4/1;transform:translateX(-50%);border:1px solid rgba(33,155,255,.28);border-radius:50%;background:radial-gradient(closest-side,rgba(16,90,149,.38),rgba(6,45,76,.18) 62%,transparent)} .map__disc::after{content:"";position:absolute;inset:22% 24%;border:1px solid rgba(33,155,255,.35);border-radius:50%} .map__disc::before{content:"";position:absolute;inset:22% 24%;border-radius:50%;border:1px solid rgba(124,196,255,.45);animation:ripple 4.5s ease-out infinite} @keyframes ripple{0%{transform:scale(.6);opacity:0}25%{opacity:1}100%{transform:scale(1.9);opacity:0}} .map__island{position:absolute;top:0;left:50%;height:100%;aspect-ratio:400/540;transform:translateX(-50%)} .map__island svg{width:100%;height:100%;overflow:visible} .hub-ring{fill:none;stroke:#4dafff;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite} .pin-ring{fill:none;stroke:#219bff;stroke-width:1.2;stroke-opacity:.7} @keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(4);opacity:0}} .geo{position:absolute;width:0;height:0} .tip{position:absolute;left:0;bottom:16px;transform:translateX(-50%);padding:12px 20px 10px;border-radius:12px;background:#fff;color:#000;text-align:center;white-space:nowrap;box-shadow:0 18px 40px -10px rgba(0,0,0,.7)} .tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:14px;height:14px;border-radius:2px;background:#fff;transform:translateX(-50%) rotate(45deg)} .tip strong{display:block;font-size:30px;line-height:1.15;font-weight:700} .tip>span{font-size:12px;color:#444} .map__tag{position:absolute;top:0;left:0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);white-space:nowrap;transform:translateY(-50%)} .map__tag::before{content:"";flex:none;width:30px;height:1px;background:rgba(255,255,255,.35)} .map__tag b{color:#fff;font-weight:600} .map__tag--l{flex-direction:row-reverse;transform:translate(-100%,-50%)} .map__stats{position:absolute;top:50%;display:grid;gap:40px;transform:translateY(-50%)} .map__stats--l{left:0} .map__stats--r{right:0;text-align:right} .stat strong{display:block;font-size:40px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums} .stat>span{font-size:14px;color:var(--text-2)} .note{color:var(--text-3);font-size:13px} /* Units ticker (marquee) */ .ticker{position:relative;display:flex;align-items:center;gap:16px;margin-top:56px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .ticker__label{flex:none;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.08em} .ticker__viewport{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ticker__track{display:flex;width:max-content;gap:12px} .ticker__track li{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:14.5px;white-space:nowrap} .ticker__track li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--link)} .ticker__track li span{color:var(--text-2);font-size:12.5px} .js .ticker.is-enhanced .ticker__track{animation:marquee 40s linear infinite} .ticker.is-paused .ticker__track,.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused!important} .ticker:not(.is-enhanced) .ticker__track{flex-wrap:wrap;width:auto} @keyframes marquee{to{transform:translateX(calc(-50% - 6px))}} .ticker .cbtn{flex:none;width:40px;height:40px} /* CTA */ .cta{position:relative;overflow:hidden;padding:150px 0 160px;text-align:center} .cta::before{content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(30% 40% at 46% 40%,rgba(16,120,215,.26),transparent 70%), radial-gradient(34% 34% at 56% 70%,rgba(40,190,230,.18),transparent 72%)} .cta .circuits--wide{top:50%;transform:translate(-50%,-50%)} .cta__content{position:relative} .cta h2{margin:22px auto 20px} .cta p{max-width:560px;margin:0 auto 40px;color:var(--text-2)} .cta__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 40px} /* Home news */ .news{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.15fr);gap:clamp(32px,5vw,72px)} .news__divider{background:var(--line)} .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13.5px;color:var(--text-2)} .meta i{width:1px;height:16px;background:rgba(255,255,255,.4)} .news__feature h3{margin:18px 0 22px;font-size:clamp(28px,3.2vw,42px);line-height:1.3} .news__feature h3 a:hover{color:var(--link)} .news__feature p{max-width:460px;color:var(--text-2);font-size:15.5px;line-height:1.85} .news__feature .link-arrow{margin-top:24px} .news__list{border-bottom:1px solid var(--line)} .news__list li+li{border-top:1px solid var(--line)} .news__item{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:26px 0} .news__list li:first-child .news__item{padding-top:0} .news__item h3{margin-top:12px;font-size:20px;line-height:1.5;font-weight:600;transition:color .2s} .news__arrow{flex:none;width:22px;height:22px;color:var(--text-3);transition:transform .3s var(--ease),color .2s} .news__item:hover h3{color:var(--link)} .news__item:hover .news__arrow{color:var(--link);transform:translate(3px,-3px)} /* ---------- 07 Inner pages ---------- */ /* Page header band */ .phero{position:relative;overflow:hidden;padding:72px 0 64px;border-bottom:1px solid var(--line);isolation:isolate} .phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(40% 80% at 18% 20%,rgba(16,120,215,.30),transparent 70%), radial-gradient(30% 70% at 82% 90%,rgba(40,190,230,.16),transparent 72%)} .phero .glow-orb{z-index:-1} .phero__inner{position:relative} .phero__title{margin-top:22px;font-size:clamp(32px,4.2vw,54px);line-height:1.2} .phero__lead{max-width:640px;margin-top:16px;color:var(--text-2);font-size:16.5px} .phero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px} .phero__art{position:absolute;right:max(var(--gutter),calc(50% - 600px));top:50%;width:260px;transform:translateY(-50%);pointer-events:none} .phero__art svg{width:100%;height:auto} .phero--center{text-align:center} .phero--center .phero__lead{margin-inline:auto} .phero--center .breadcrumb ol{justify-content:center} .breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:13.5px;color:var(--text-2)} .breadcrumb li{display:inline-flex;align-items:center} .breadcrumb li+li::before{content:"";width:6px;height:6px;margin:0 12px;border-top:1.5px solid var(--text-3);border-right:1.5px solid var(--text-3);transform:rotate(45deg)} .breadcrumb a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35);transition:color .2s} .breadcrumb a:hover{color:var(--link)} .breadcrumb [aria-current]{color:#fff} .page-body{padding:56px 0 120px} .layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start} .layout--aside-r{grid-template-columns:minmax(0,1fr) 340px} /* Filters (resources) */ .filters{position:sticky;top:96px;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .filters>summary{display:none} .filters__body{display:grid;gap:22px} .filters h2{font-size:17px} .filters__actions{display:flex;gap:10px} .filters__actions .btn{flex:1} .toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-bottom:18px;border-bottom:1px solid var(--line)} .toolbar__count{font-size:15px;color:var(--text-2)} .toolbar__count strong{display:inline-block;min-width:1.4em;color:#fff;font-size:22px;font-variant-numeric:tabular-nums;text-align:center} .is-bump{display:inline-block;animation:bump .45s var(--ease)} @keyframes bump{0%{transform:translateY(0)}30%{transform:translateY(-8px);color:var(--accent)}100%{transform:none}} .toolbar__sort{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)} .toolbar__sort .select{width:auto;height:40px;font-size:14px} .chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:0;padding:14px 0 0} .chips:empty{display:none} .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 12px;border:1px solid rgba(33,155,255,.45);border-radius:999px;background:rgba(33,155,255,.14);color:#fff;font-size:13.5px;animation:chipIn .35s var(--ease)} .chip button{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--accent)} .chip button:hover{background:var(--accent);color:#000} .chip button svg{width:12px;height:12px} .chip.is-leaving{animation:chipOut .25s var(--ease) forwards} .chips__clear{font-size:13.5px;color:var(--link);text-decoration:underline;text-underline-offset:4px} @keyframes chipIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}} @keyframes chipOut{to{opacity:0;transform:scale(.7)}} .rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px} .rgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))} /* Resource card */ .rcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:15px;transition:border-color .3s,box-shadow .4s,transform .4s var(--ease);transform-style:preserve-3d} .rcard:hover,.rcard:focus-within{border-color:rgba(33,155,255,.8);box-shadow:0 28px 60px -26px rgba(33,155,255,.7)} .rcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(124,196,255,.14),transparent 60%);opacity:0;transition:opacity .3s} .rcard:hover::before{opacity:1} .rcard__media{position:relative;aspect-ratio:280/170;margin:10px 10px 0;border-radius:10px;overflow:hidden;background:var(--tile)} .rcard__media svg{width:100%;height:100%} .rcard__cat{position:absolute;left:10px;top:10px} .rcard__body{flex:1;padding:16px 18px 0} .rcard__title{font-size:18px;line-height:1.45} .rcard__title a::after{content:"";position:absolute;inset:0;z-index:1} .rcard__title a:hover{color:var(--link)} .rcard__en{margin-top:2px;color:var(--text-3);font-size:12.5px} .rcard__desc{margin-top:10px;color:var(--text-2);font-size:14px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rcard__meta{display:grid;gap:4px;margin-top:12px;font-size:13.5px} .rcard__meta div{display:flex;gap:8px} .rcard__meta dt{flex:none;color:var(--text-3)} .rcard__meta dd{color:var(--text-2)} .rcard__foot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 18px;border-top:1px solid var(--line);color:var(--text-3);font-size:12.5px} .rcard__foot span{display:inline-flex;align-items:center;gap:6px} .rcard__foot svg{width:14px;height:14px} .rcard.is-in{animation:cardIn .5s var(--ease) both;animation-delay:var(--i,0s)} @keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* Skeleton */ .skeleton{display:flex;flex-direction:column;gap:12px;padding:10px 10px 20px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .skeleton i{display:block;height:14px;border-radius:3px;background:linear-gradient(90deg,#062d4c 0%,#105a95 40%,#062d4c 80%);background-size:200% 100%;animation:shimmer 1.1s linear infinite} .skeleton i:first-child{height:auto;aspect-ratio:280/170;border-radius:10px} .skeleton i:nth-child(2){width:70%;margin:6px 8px 0} .skeleton i:nth-child(3){width:90%;margin:0 8px} .skeleton i:nth-child(4){width:50%;margin:0 8px} @keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}} .empty{display:grid;justify-items:center;gap:14px;padding:64px 20px;text-align:center;border:1px dashed var(--border);border-radius:15px;margin-top:24px} .empty svg{width:72px;height:72px;color:var(--link)} .empty h2,.empty h3{font-size:20px} .empty p{color:var(--text-2);max-width:420px} /* Pagination */ .pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:40px} .pager>a,.pager>button,.pager>span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:.5rem;font-size:14.5px;font-variant-numeric:tabular-nums;transition:border-color .2s,background-color .2s,color .2s} .pager a:hover,.pager button:hover{border-color:var(--link);color:var(--link)} .pager [aria-current="page"]{background:var(--primary);border-color:var(--primary);color:#fff} .pager .pager__gap{border:0;min-width:24px;color:var(--text-3)} .pager [aria-disabled="true"],.pager button:disabled{opacity:.45;pointer-events:none} .pager svg{width:16px;height:16px} /* Tabs */ .tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line)} .tabs button,.tabs a{position:relative;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px;color:var(--text-2);font-size:15px;font-weight:600;transition:color .2s} .tabs button::after,.tabs a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--accent);transform:scaleX(0);transition:transform .35s var(--ease)} .tabs button:hover,.tabs a:hover{color:#fff} .tabs [aria-pressed="true"],.tabs [aria-current="true"],.tabs [aria-selected="true"]{color:#fff} .tabs [aria-pressed="true"]::after,.tabs [aria-current="true"]::after,.tabs [aria-selected="true"]::after{transform:scaleX(1)} .tabs .num{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;font-variant-numeric:tabular-nums} .tabs [aria-pressed="true"] .num{background:var(--accent);color:#000} /* News list */ .nlist{margin-top:8px} .nitem{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:28px;align-items:center;padding:26px 8px;border-bottom:1px solid var(--line);transition:background-color .3s} .nitem:hover{background:linear-gradient(90deg,rgba(33,155,255,.12),transparent 70%)} .nitem__date{display:grid;justify-items:center;padding:10px 0;border:1px solid var(--border);border-radius:12px;background:var(--surface);line-height:1.2} .nitem__date b{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums} .nitem__date span{color:var(--text-2);font-size:12.5px} .nitem__tags{display:flex;flex-wrap:wrap;gap:8px} .nitem h3{margin-top:10px;font-size:19px;line-height:1.5} .nitem h3 a::after{content:"";position:absolute;inset:0} .nitem h3 a:hover{color:var(--link)} .nitem p{margin-top:6px;color:var(--text-2);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .nitem .news__arrow{width:24px;height:24px} .nitem:hover .news__arrow{color:var(--link);transform:translate(3px,-3px)} .nitem--pin{background:linear-gradient(90deg,rgba(124,196,255,.06),transparent 60%)} .nitem--pin .nitem__date{border-color:rgba(124,196,255,.5)} /* Article */ .reading-bar{position:fixed;top:0;left:0;right:0;z-index:80;height:3px;background:linear-gradient(90deg,var(--blue),var(--accent));transform:scaleX(0);transform-origin:left} .article{max-width:780px} .prose{color:#e6e6e6;font-size:17px;line-height:1.95} .prose>*+*{margin-top:1.2em} .prose h2{margin-top:2.2em;padding-left:16px;border-left:4px solid var(--accent);font-size:26px;line-height:1.4} .prose h3{margin-top:1.8em;font-size:21px;line-height:1.45;color:#fff} .prose a{color:var(--link);text-decoration:underline;text-underline-offset:4px} .prose a:hover{color:#fff} .prose strong{color:#fff} .prose ul,.prose ol{padding-left:1.4em} .prose ul{list-style:none} .prose ul li{position:relative} .prose ul li::before{content:"";position:absolute;left:-1.1em;top:.8em;width:7px;height:7px;background:var(--link);transform:rotate(45deg)} .prose ol{list-style:decimal} .prose ol li::marker{color:var(--accent);font-weight:700} .prose li+li{margin-top:.4em} .prose blockquote{padding:20px 24px;border-left:3px solid var(--blue);background:var(--surface-2);border-radius:0 6px 6px 0;color:var(--text-2);font-size:16px} .prose figure{margin-top:2em;margin-bottom:2em} .prose figure .fig-media{border:1px solid var(--border);border-radius:15px;overflow:hidden;background:var(--tile)} .prose figure svg{width:100%;max-width:440px;height:auto;margin-inline:auto} .prose figcaption{margin-top:12px;color:var(--text-2);font-size:14px;text-align:center} .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:15px} .table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6} .table caption{padding:14px 18px;text-align:left;font-weight:700;color:#fff;border-bottom:1px solid var(--border);background:var(--surface-2)} .table th,.table td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .table tr:last-child>*{border-bottom:0} .table thead th{background:var(--surface-2);color:#fff;font-size:14px} .table tbody th{width:32%;color:var(--text-2);font-weight:600;background:rgba(255,255,255,.02)} .table tbody tr{transition:background-color .2s} .table tbody tr:hover{background:rgba(33,155,255,.08)} .box{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .box+.box{margin-top:20px} .box h2{font-size:18px;margin-bottom:14px} .attach li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)} .attach li:first-child{border-top:0;padding-top:0} .ftype{flex:none;display:grid;place-items:center;width:44px;height:52px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.04em;position:relative} .ftype::before{content:"";position:absolute;top:-1px;right:-1px;width:12px;height:12px;background:linear-gradient(225deg,#000 50%,var(--border) 50%)} .ftype--pdf{color:#ff9f9f}.ftype--odt{color:#8fd3ff}.ftype--docx{color:#9fb8ff}.ftype--xlsx{color:#9be3b0}.ftype--ods{color:#c8f08a} .attach a{font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3)} .attach a:hover{color:var(--link)} .attach small{display:block;color:var(--text-2);font-size:13px} .links li{padding:10px 0;border-top:1px solid var(--line)} .links li:first-child{border-top:0;padding-top:0} .links a{color:var(--link);text-decoration:underline;text-underline-offset:4px} .links a:hover{color:#fff} .article-tools{display:flex;flex-wrap:wrap;gap:10px} .prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px} .prevnext a{display:block;padding:20px 22px;border:1px solid var(--border);border-radius:15px;background:var(--surface);transition:border-color .3s,transform .3s var(--ease)} .prevnext a:hover{border-color:var(--link);transform:translateY(-3px)} .prevnext small{display:block;color:var(--text-3);font-size:13px} .prevnext span{display:block;margin-top:4px;font-weight:600} .prevnext a:last-child{text-align:right} .aside-sticky{position:sticky;top:96px} /* Resource detail */ .gallery__main{position:relative;border:1px solid var(--border);border-radius:15px;overflow:hidden;background:var(--tile)} .gallery__item{margin:0} .gallery__item svg{width:100%;max-height:440px;height:auto} .gallery__item figcaption{padding:12px 16px;border-top:1px solid var(--line);color:var(--text-2);font-size:14px} .js .gallery.is-enhanced .gallery__item:not(.is-active){display:none} .js .gallery.is-enhanced .gallery__item.is-active svg{animation:fadeZoom .6s var(--ease)} @keyframes fadeZoom{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}} .gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px} .gallery__thumbs button{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--tile);transition:border-color .2s,opacity .2s;opacity:.7} .gallery__thumbs button:hover{opacity:1} .gallery__thumbs [aria-pressed="true"]{border-color:var(--blue);opacity:1;box-shadow:0 0 0 1px var(--blue)} .gallery__thumbs svg{width:100%;height:auto} .detail h2.sec-title{display:flex;align-items:center;gap:12px;margin:48px 0 18px;font-size:24px} .detail h2.sec-title::before{content:"";width:10px;height:10px;background:var(--accent);transform:rotate(45deg)} .contact dl{display:grid;gap:12px;font-size:15px} .contact dl div{display:grid;grid-template-columns:80px 1fr;gap:8px} .contact dt{color:var(--text-2)} .contact dd a{color:var(--link);text-decoration:underline;text-underline-offset:4px;word-break:break-all} .contact .btn{margin-top:20px} .unit-card{display:flex;gap:14px;align-items:center} .unit-card__logo{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#0b6fd2,#062d4c);font-weight:700;font-size:15px} .unit-card b{display:block} .unit-card a{color:var(--link);font-size:14px;text-decoration:underline;text-underline-offset:4px} .statline{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--text-2);font-size:14px} .statline span{display:inline-flex;align-items:center;gap:6px} .statline svg{width:16px;height:16px;color:var(--link)} .callout{display:flex;gap:12px;padding:14px 16px;margin-top:16px;border:1px solid rgba(33,155,255,.35);border-radius:12px;background:rgba(33,155,255,.08);color:var(--text-2);font-size:13.5px;line-height:1.7} .callout svg{flex:none;width:18px;height:18px;color:var(--accent);margin-top:2px} /* Blocks (page.html) */ .block{position:relative;padding:88px 0;border-top:1px solid var(--line)} .block:first-of-type{border-top:0} .block-tag{position:absolute;top:20px;left:var(--gutter);display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px dashed rgba(124,196,255,.5);border-radius:4px;color:var(--link);font-family:ui-monospace,Consolas,monospace;font-size:12px} .mt{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .mt--rev .mt__media{order:-1} .mt__media{position:relative;border:1px solid var(--border);border-radius:15px;overflow:hidden;background:var(--tile)} .mt__media svg{width:100%;height:auto} .mt .lead{margin-top:20px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stats .stat{padding:28px 24px;border:1px solid var(--border);border-radius:15px;background:var(--surface);position:relative;overflow:hidden} .stats .stat::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--blue),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .3s} .stats .stat.is-visible::after,.stats.is-visible .stat::after{transform:scaleX(1)} .timeline{position:relative;display:grid;gap:28px;padding-left:36px} .timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--blue),var(--accent))} .timeline li{position:relative} .timeline li::before{content:"";position:absolute;left:-33px;top:6px;width:14px;height:14px;border-radius:50%;background:#000;border:2px solid var(--accent);box-shadow:0 0 0 4px rgba(124,196,255,.15)} .timeline time{color:var(--accent);font-weight:700;font-size:14px} .timeline h3{font-size:19px;margin-top:2px} .timeline p{color:var(--text-2);font-size:15px;margin-top:4px} .faq{display:grid;gap:12px} .faq details{border:1px solid var(--border);border-radius:15px;background:var(--surface);transition:border-color .3s} .faq details[open]{border-color:rgba(33,155,255,.7)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;font-size:16.5px;cursor:pointer;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--link);border-bottom:2px solid var(--link);transform:rotate(45deg);transition:transform .3s var(--ease)} .faq details[open] summary::after{transform:rotate(-135deg)} .faq .faq__a{padding:0 22px 20px;color:var(--text-2)} .faq details[open] .faq__a{animation:stepIn .4s var(--ease)} .unit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .unit-grid li{padding:22px;border:1px solid var(--border);border-radius:15px;background:var(--surface);transition:border-color .3s,transform .3s var(--ease)} .unit-grid li:hover{border-color:var(--link);transform:translateY(-4px)} .unit-grid b{display:block;font-size:16px} .unit-grid span{color:var(--text-2);font-size:13.5px} /* Search page */ .bigsearch{display:flex;gap:12px;max-width:760px;margin:28px auto 0} .bigsearch .input{height:60px;font-size:18px} .bigsearch .btn{height:60px} .typing{display:block;min-height:1.6em;margin-top:14px;color:var(--text-2);font-size:15px} .typing__caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--accent);animation:caret 1s steps(1) 4} @keyframes caret{50%{opacity:0}} .results-summary{margin:28px 0 8px;color:var(--text-2)} .results-summary strong{color:#fff} .rgroup{margin-top:40px} .rgroup>h2{display:flex;align-items:center;gap:12px;font-size:22px;margin-bottom:8px} .rgroup>h2 .num{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:13px} .result{position:relative;padding:22px 0;border-bottom:1px solid var(--line)} .result h3{font-size:19px;line-height:1.5} .result h3 a{color:var(--link);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(124,196,255,.35)} .result h3 a:hover{color:#fff} .result p{margin-top:6px;color:var(--text-2);font-size:15px} .result .meta{margin-top:8px} .result__url{color:var(--text-3);font-size:13px} mark{background:var(--accent);color:#000;padding:0 2px;border-radius:2px} .rgroup__none{padding:20px 0;color:var(--text-2)} /* Sitemap */ .kbd-table td:first-child{white-space:nowrap} kbd{display:inline-block;min-width:28px;padding:2px 8px;border:1px solid var(--field-border);border-bottom-width:3px;border-radius:4px;background:var(--surface-2);font-family:inherit;font-size:13px;font-weight:700;text-align:center} .tree{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px} .tree>li{padding:22px 24px;border:1px solid var(--border);border-radius:15px;background:var(--surface)} .tree>li>a{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700} .tree>li>a::before{content:"";width:10px;height:10px;background:var(--accent);transform:rotate(45deg)} .tree ul{margin-top:12px;padding-left:12px;border-left:1px solid var(--border)} .tree ul li{position:relative;padding:5px 0 5px 16px} .tree ul li::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--border)} .tree a{transition:color .2s} .tree ul a{color:var(--text-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.25)} .tree a:hover{color:var(--link)} .ak-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ak-demo div{padding:22px;border:1px solid var(--border);border-radius:15px;background:var(--surface)} .ak-demo b{display:block;font-size:22px;letter-spacing:.1em;color:var(--accent)} /* Error page */ .err{position:relative;overflow:hidden;min-height:62vh;display:grid;place-items:center;padding:80px 0;text-align:center} .err__code{font-size:clamp(96px,16vw,200px);line-height:1;font-weight:700;letter-spacing:.04em;background:linear-gradient(180deg,#fff 15%,var(--link) 55%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent} .err h1{margin-top:12px;font-size:clamp(24px,3vw,34px)} .err p{margin-top:12px;color:var(--text-2)} .err__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px} /* Back to top with progress ring */ .to-top{position:fixed;right:24px;bottom:24px;z-index:70;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(27,27,27,.94);border:1px solid var(--border);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s var(--ease),visibility .3s,border-color .2s} .to-top.is-shown{opacity:1;visibility:visible;transform:none} .to-top:hover{border-color:var(--link)} .to-top svg{grid-area:1/1} .to-top .ring{width:52px;height:52px;transform:rotate(-90deg)} .to-top .ring circle{fill:none;stroke-width:2.5} .to-top .ring .track{stroke:rgba(255,255,255,.12)} .to-top .ring .prog{stroke:var(--accent);stroke-linecap:round} .to-top .arrow{width:18px;height:18px} /* ---------- 09 Footer ---------- */ .footer{position:relative;padding-bottom:32px;background:linear-gradient(180deg,transparent,rgba(33,155,255,.06))} .footer .ak{position:absolute;top:12px;left:var(--gutter)} .footer__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:40px;padding:64px 0 48px;border-top:1px solid var(--line)} .footer address{margin-top:22px;font-style:normal;color:var(--text-2);line-height:1.95;font-size:14.5px} .footer address a{color:var(--link);text-decoration:underline;text-underline-offset:3px} .footer h2{margin-bottom:16px;font-size:15px;font-weight:600} .footer ul li+li{margin-top:10px} .footer ul a{font-size:14.5px;color:var(--text-2);transition:color .2s} .footer ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px} .footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)} .footer__bottom dl{display:flex;flex-wrap:wrap;gap:6px 24px} .footer__bottom dl div{display:flex;gap:6px} .footer__bottom dd{color:#fff;font-variant-numeric:tabular-nums} /* ---------- 10 Motion: reveal / stagger / tilt ---------- */ .js .reveal{opacity:0;translate:0 28px;transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s)} .js .reveal.is-visible{opacity:1;translate:none} .js [data-stagger]>*{opacity:0;translate:0 24px;transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:calc(var(--i,0) * 80ms)} .js [data-stagger].is-visible>*{opacity:1;translate:none} [data-tilt]{transition:transform .5s var(--ease),border-color .3s,box-shadow .4s} /* ---------- 11 Responsive ---------- */ @media (max-width:1480px){ html[lang="en"] .nav .logo__divider,html[lang="en"] .nav .logo__name{display:none} } html[lang="en"] .nav__links>ul>li>a{white-space:nowrap;padding:0 11px} @media (max-width:1180px){ .nav__inner{gap:20px} .nav__links>ul>li>a{padding:0 12px} .hsearch input{width:150px} .nav .logo__divider,.nav .logo__name{display:none} .hsearch input:focus{width:190px} .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .qsearch__form{grid-template-columns:1fr 1fr 1fr} .qsearch__form .field--q{grid-column:1/-1} .qsearch__form .btn{grid-column:1/-1} .phero__art{display:none} } @media (max-width:1000px){ :root{--header-h:64px} .topbar__org,.topbar .hsearch{display:none} .nav__links,.nav__cta{display:none} .nav__toggle{display:flex} .layout,.layout--aside-r{grid-template-columns:1fr} .filters{position:static;padding:0;background:none;border:0} .filters>summary{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 18px;border:1px solid var(--field-border);border-radius:6px;font-weight:600;cursor:pointer;list-style:none} .filters>summary::-webkit-details-marker{display:none} .filters[open]>summary{border-radius:6px 6px 0 0} .filters__body{padding:20px;border:1px solid var(--border);border-top:0;border-radius:0 0 6px 6px;background:var(--surface)} .aside-sticky{position:static} .stats,.unit-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .circuits--wide,.circuits--band{display:none} .circuits--m{display:block;left:50%;width:min(100%,480px);transform:translateX(-50%)} .circuits--m-top{top:0} .circuits--m-bottom{bottom:0} .hero{padding:72px 0 130px} .slide{grid-template-columns:1fr;gap:28px;min-height:0;text-align:left} .slide__art{order:-1} .slide__art svg{width:min(320px,80%);margin-inline:auto} .cta{padding:120px 0 130px} .cards{grid-template-columns:1fr;max-width:520px;margin-inline:auto} .section{padding:96px 0} .exp,.flow,.net__head,.news,.mt{grid-template-columns:1fr} .mt--rev .mt__media{order:0} .exp__text{padding-left:0} .exp__visual{height:400px} .flow__divider,.news__divider{display:none} .flow__visual{order:2} .pyramid{width:min(300px,82%)} .js .steps.is-enhanced .steps__list{min-height:0} .net__head{gap:20px} .net__head .lead{justify-self:start} .map{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;height:auto} .map__stage{position:relative;grid-column:1/-1;height:520px;margin-top:40px} .map__stats{position:static;gap:28px;transform:none} .map__stats--r{text-align:left} .footer__top{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1/-1} .rgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))} .ak-demo{grid-template-columns:1fr} } @media (max-width:640px){ .topbar__links{gap:12px;margin-left:auto} .topbar__inner{gap:12px} .logo__img{height:36px} .slide__title{font-size:32px} .slide__text p{font-size:15.5px} .btn--lg{height:52px;padding:0 26px} .card h3{font-size:20px} .exp__visual{height:340px} .map__stage{height:440px} .map__tag{display:none} .stat strong{font-size:32px} .news__item h3{font-size:18px} .qsearch__panel{padding:24px 18px} .qsearch__form{grid-template-columns:1fr} .rgrid,.rgrid--3{grid-template-columns:1fr} .nitem{grid-template-columns:68px minmax(0,1fr);gap:16px;padding:20px 0} .nitem .news__arrow{display:none} .nitem__date b{font-size:22px} .prevnext{grid-template-columns:1fr} .prevnext a:last-child{text-align:left} .bigsearch{flex-direction:column} .stats,.unit-grid{grid-template-columns:1fr 1fr;gap:12px} .stats .stat{padding:20px 16px} .footer__top{grid-template-columns:1fr} .cdot{width:40px} .carousel__count{display:none} .to-top{right:16px;bottom:16px} .ticker{flex-wrap:wrap} .ticker__label{width:100%} .tabs{flex-wrap:nowrap;overflow-x:auto} .tabs button,.tabs a{flex:none;padding:0 14px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important} .circuits .pulse,.sweep::after,.qsearch__panel::before,.map__disc::before{display:none} .js .reveal,.js [data-stagger]>*{opacity:1;translate:none} [data-parallax]{transform:none!important} .ticker__track{animation:none!important} .ticker .ticker__track{flex-wrap:wrap;width:auto} .typing__caret{display:none} } /* ---------- 13 Page transitions (PJAX router) ---------- */ @view-transition{navigation:auto} .site-header{view-transition-name:site-header} .to-top{view-transition-name:to-top} .nav__links{position:relative} .nav__ink{position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--blue);border-radius:1px;opacity:0;pointer-events:none;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s;view-transition-name:nav-ink} .has-ink>ul>li>a.is-active::after,.has-ink>ul>li:hover>a.is-active::after{transform:scaleX(0)} ::view-transition-old(root){animation:vtOut .26s cubic-bezier(.4,0,1,1) both} ::view-transition-new(root){animation:vtIn .55s cubic-bezier(.2,.7,.2,1) .06s both} ::view-transition-group(site-header),::view-transition-old(site-header),::view-transition-new(site-header){animation-duration:.25s} ::view-transition-group(nav-ink){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.7,.2,1)} @keyframes vtOut{to{opacity:0;transform:translateY(-28px)}} @keyframes vtIn{from{opacity:0;transform:translateY(36px)}} main.is-leaving{opacity:0;transform:translateY(-20px);transition:opacity .2s ease-in,transform .2s ease-in} main.is-entering{animation:vtIn .55s var(--ease) both} .route-progress{position:fixed;top:0;left:0;right:0;z-index:300;height:3px;background:linear-gradient(90deg,var(--blue),var(--link),var(--accent));box-shadow:0 0 12px rgba(124,196,255,.7);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none;view-transition-name:route-progress} .route-progress.is-loading{opacity:1;animation:progLoad 3s cubic-bezier(.1,.6,.2,1) forwards} .route-progress.is-done{opacity:0;transform:scaleX(1);transition:transform .2s ease-out,opacity .35s .2s} @keyframes progLoad{from{transform:scaleX(0)}to{transform:scaleX(.85)}} html.js body{animation:pageIn .45s ease-out backwards} html.is-leaving-page body{opacity:0;transition:opacity .18s ease-in} @keyframes pageIn{from{opacity:0}} [tabindex="-1"]:focus:not(:focus-visible){outline:none} .cta__hours{display:inline-block;margin-top:10px;color:var(--text-2);font-size:14.5px} @media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} html.js body,main.is-entering{animation:none} .route-progress{display:none} } /* ---------- 14 Content images, article cover ---------- */ .article__cover{margin:0 0 36px} .article__cover .fig-media,.prose figure .fig-media{border:1px solid var(--border);border-radius:15px;overflow:hidden;background:var(--tile)} .article__cover svg{width:100%;max-width:360px;height:auto;margin-inline:auto} .fig-media img,.gallery__item img,.mt__media img{display:block;width:100%;height:auto} .gallery__item img{max-height:520px;object-fit:contain;background:#041a2c} .gallery__thumbs img{width:100%;aspect-ratio:280/170;object-fit:cover} .slide__art img.slide__img{width:min(480px,100%);aspect-ratio:480/420;object-fit:cover;border-radius:15px;border:1px solid var(--border)} .article__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px} .detail__summary{margin-bottom:28px} .prose .pv-group>*+*{margin-top:1.2em} /* ---------- 15 Preview mode (?preview=1) ---------- */ @property --pv-a{syntax:'';inherits:false;initial-value:0deg} .pv-ribbon{position:fixed;top:0;left:0;right:0;z-index:400;display:flex;align-items:center;justify-content:center;height:26px;background:linear-gradient(90deg,#0b6fd2,#0a5cb3);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.08em;box-shadow:0 2px 12px rgba(0,0,0,.5)} html.is-preview body{padding-top:26px} html.is-preview .site-header{top:-15px} html.is-preview .route-progress{display:none} html.is-preview [data-preview]{cursor:pointer} .pv-layer{position:absolute;top:0;left:0;width:0;height:0;z-index:350;pointer-events:none} .pv-box{position:absolute;top:0;left:0;border-radius:8px;pointer-events:none} .pv-box--hover{border:1.5px dashed rgba(124,196,255,.9);background:rgba(33,155,255,.05)} .pv-box--focus{box-shadow:0 0 0 6px rgba(33,155,255,.18),0 0 36px rgba(124,196,255,.25);animation:pvPulse 1.8s ease-in-out infinite} .pv-box--focus::before{content:"";position:absolute;inset:0;padding:2.5px;border-radius:inherit;background:conic-gradient(from var(--pv-a),#219bff,#9fd3ff,#e0aaff,#219bff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:pvSpin 2.4s linear infinite} .pv-box--flag{border:2px solid #ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.18)} .pv-tag{position:absolute;left:-1px;top:-22px;padding:1px 8px;border-radius:6px 6px 6px 0;background:rgba(124,196,255,.95);color:#000;font:600 11.5px/19px ui-monospace,Consolas,monospace;white-space:nowrap} .pv-box--focus .pv-tag{top:-26px;padding:2px 10px;background:linear-gradient(90deg,#67bafe,#0790ff);color:#000;font-family:var(--font);font-size:12.5px;animation:pvFloat 2.2s ease-in-out infinite} .pv-bubble{position:absolute;right:-2px;top:-10px;max-width:300px;padding:8px 12px;border-radius:8px 8px 0 8px;background:#ff6b6b;color:#fff;font-size:13px;line-height:1.55;white-space:normal;transform:translateY(-100%);box-shadow:0 10px 24px -8px rgba(0,0,0,.7)} .pv-flash{animation:pvFlash .6s ease-out} @keyframes pvSpin{to{--pv-a:360deg}} @keyframes pvPulse{0%,100%{box-shadow:0 0 0 4px rgba(33,155,255,.2),0 0 24px rgba(124,196,255,.18)}50%{box-shadow:0 0 0 9px rgba(33,155,255,.08),0 0 40px rgba(124,196,255,.32)}} @keyframes pvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes pvFlash{from{opacity:.2}to{opacity:1}} @media (prefers-reduced-motion:reduce){ .pv-box--focus,.pv-box--focus::before,.pv-box--focus .pv-tag,.pv-flash{animation:none!important} } /* ---------- 16 Stat notes（數字說明句） ---------- */ .stat-note{max-width:760px;color:var(--text-2);font-size:15px;line-height:1.85} .stat-note strong{color:#fff;font-weight:700;font-variant-numeric:tabular-nums;background:linear-gradient(transparent 62%,rgba(33,155,255,.35) 62%);padding:0 1px} .stat-note--center{margin:28px auto 0;text-align:center} .stat-note--sm{margin-top:2px;font-size:13.5px;line-height:1.7} .phero--center .stat-note{margin-inline:auto} @media (max-width:640px){.stat-note{font-size:14.5px}.stat-note--center{text-align:left}} /* ---------- 17 Information architecture (machines, platforms, status, links, contact) ---------- */ /* Header: two-line site name, utility links, mega-menu */ .logo__name{font-size:14px;line-height:1.35;letter-spacing:.04em} html[lang="en"] .nav .logo__name{width:230px;font-size:12.5px} .topbar__links{gap:18px} .topbar__links>a{white-space:nowrap} .nav__links>ul{gap:2px} .nav__links>ul>li>a{padding:0 14px} .nav__links>ul>li.has-mega{position:static} .mega{position:absolute;top:100%;right:0;width:min(740px,calc(100vw - 48px));padding:16px;background:rgba(27,27,27,.98);border:1px solid var(--border);border-radius:15px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(33,155,255,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s;z-index:5} .has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none} .has-sub.is-closed .mega{opacity:0;visibility:hidden} .mega__head{margin:0 0 10px 8px;color:var(--text-3);font-size:12.5px;font-weight:600;letter-spacing:.06em} .mega__zones{position:relative;width:310px;min-height:336px} .mega__zlink{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:10px;color:var(--text-2);font-size:14.5px;font-weight:600;line-height:1.45;transition:background-color .2s,color .2s} .mega__count{flex:none;display:grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;color:var(--text-2)} .mega__plats{position:absolute;top:0;left:calc(100% + 14px);width:370px;padding-left:16px;border-left:1px solid var(--line);display:none} .mega__plats a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:8px;color:var(--text-2);font-size:14.5px;transition:background-color .2s,color .2s} .mega__plats a::after{content:"→";opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s var(--ease)} .mega__plats a:hover,.mega__plats a:focus-visible{background:rgba(33,155,255,.16);color:#fff} .mega__plats a:hover::after,.mega__plats a:focus-visible::after{opacity:1;transform:none} .mega__zone:hover>.mega__plats,.mega__zone:focus-within>.mega__plats, .mega__zones:not(:hover):not(:focus-within)>.mega__zone:first-child>.mega__plats{display:block;animation:dropIn .25s var(--ease)} .mega__zone:hover>.mega__zlink,.mega__zone:focus-within>.mega__zlink, .mega__zones:not(:hover):not(:focus-within)>.mega__zone:first-child>.mega__zlink{background:rgba(33,155,255,.16);color:#fff} /* Mobile accordion */ .macc>li{border-bottom:1px solid rgba(255,255,255,.1)} .macc>li>a,.macc summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:6px 0;font-size:16px;font-weight:600;cursor:pointer;list-style:none} .macc summary::-webkit-details-marker{display:none} .macc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--link);border-bottom:2px solid var(--link);transform:rotate(45deg);transition:transform .3s var(--ease)} .macc details[open]>summary::after{transform:rotate(-135deg)} .macc details ul{padding:0 0 12px 14px;border-left:1px solid var(--line);margin-left:4px} .macc details li a{display:block;padding:9px 0;color:var(--text-2);font-size:14.5px} .macc details details summary{min-height:44px;font-size:15px;font-weight:600;color:#fff} .mobile-menu__foot{flex-wrap:wrap;justify-content:flex-start;gap:12px 22px;font-size:14.5px} /* Status chips */ .status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap} .status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .status--ok{background:rgba(61,220,151,.14);color:#3ddc97} .status--busy{background:rgba(33,155,255,.16);color:#7cc4ff} .status--warn{background:rgba(255,200,87,.13);color:#ffc857} .status--off{background:rgba(255,255,255,.08);color:#c4c4c4} .tag--code{background:rgba(33,155,255,.16);color:var(--accent-2);font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em} .mono{font-family:ui-monospace,Consolas,monospace;font-size:13.5px;color:var(--accent-2);white-space:nowrap} /* Home: quick search, zones, news, links, guidance */ .qsearch__form{grid-template-columns:1fr 1fr 1fr 1.4fr auto} .zgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .zcard{position:relative;display:flex;flex-direction:column;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:15px;transition:border-color .3s,box-shadow .4s,transform .4s var(--ease)} .zcard:hover,.zcard:focus-within{border-color:rgba(33,155,255,.7);box-shadow:0 24px 60px -26px rgba(33,155,255,.6)} .zcard__head{display:flex;align-items:flex-start;gap:12px} .zcard__no{flex:none;display:grid;place-items:center;min-width:44px;height:28px;padding:0 8px;border-radius:999px;background:rgba(33,155,255,.16);color:var(--accent-2);font-size:12.5px;font-weight:700} .zcard h3{font-size:18px;line-height:1.45} .zcard__list{flex:1;margin-top:14px;border-top:1px solid var(--line)} .zcard__list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--text-2);font-size:14.5px;transition:color .2s,padding .25s var(--ease)} .zcard__list a svg{width:14px;height:14px;flex:none;color:var(--link)} .zcard__list a:hover{color:#fff;padding-left:6px} .zcard__foot{margin-top:14px;color:var(--text-3);font-size:13.5px} .zcard__foot strong{color:#fff} .zgrid__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:28px} .hnews{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px} .hnews__feature,.hnews__item{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:15px;overflow:hidden;transition:border-color .3s,box-shadow .4s,transform .4s var(--ease)} .hnews__feature:hover,.hnews__item:hover,.hnews__feature:focus-within,.hnews__item:focus-within{border-color:rgba(33,155,255,.7);box-shadow:0 24px 60px -26px rgba(33,155,255,.55)} .hnews__media{display:grid;place-items:center;aspect-ratio:16/9;background:var(--tile)} .hnews__media svg{width:58%;height:auto} .hnews__body{padding:22px 24px 24px} .hnews__body h3{margin-top:12px;font-size:21px;line-height:1.5} .hnews__body h3 a::after{content:"";position:absolute;inset:0} .hnews__body h3 a:hover{color:var(--link)} .hnews__body p{margin-top:8px;color:var(--text-2);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .hnews__side{display:grid;gap:24px} .hnews__item{flex-direction:row} .hnews__item .hnews__media{flex:0 0 38%;aspect-ratio:auto} .hnews__item .hnews__media svg{width:78%} .hnews__item .hnews__body h3{font-size:17px} .lcar__ctrl{display:flex;gap:10px} .lcar__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px) / 3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 8px} .lcar__track::-webkit-scrollbar{display:none} .lcard{scroll-snap-align:start} .lcard a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;height:100%;padding:28px;border:1px solid rgba(33,155,255,.35);border-radius:15px;background:var(--tile);transition:border-color .3s,box-shadow .4s,transform .4s var(--ease)} .lcard a:hover,.lcard a:focus-visible{border-color:var(--blue);box-shadow:0 24px 60px -24px rgba(33,155,255,.7);transform:translateY(-4px)} .lcard__icon{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:rgba(33,155,255,.18);color:var(--accent-2)} .lcard__icon svg{width:36px;height:36px} .lcard__name{font-size:19px;font-weight:700;line-height:1.45} .lcard__go{display:inline-flex;align-items:center;gap:4px;margin-top:auto;color:var(--link);font-size:14px;font-weight:600} .sec-head--center{justify-content:center;text-align:center;margin-bottom:24px} .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .gcard{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;min-height:104px;padding:20px 24px;border-radius:15px;background:#f3f7fb;color:#0d2338} .gcard__mark{grid-row:1/3;width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#0790ff,#0b4f8f)} .gcard__name{font-size:19px;font-weight:700;letter-spacing:.06em} .gcard__sub{color:#3a4b5c;font-size:12.5px;font-weight:600;letter-spacing:.02em} /* 機台查詢 */ .msearch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px} .msearch__box{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .msearch__title{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:18px} .msearch__title::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--blue)} .mform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .mform--simple{grid-template-columns:1fr} .mform--simple .btn{justify-self:start} .mform__actions{grid-column:1/-1;display:flex;gap:10px} .mresult{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;margin-top:24px;align-items:start} .mmap{position:sticky;top:96px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .cmap{position:relative;height:540px;margin:4px 0 12px} .cmap .map__disc{bottom:0;width:120%} .cpin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:0;white-space:nowrap;transform:translate(-9px,-50%);z-index:2} .cpin--l{flex-direction:row-reverse;transform:translate(calc(-100% + 9px),-50%)} .cpin__dot{flex:none;width:18px;height:18px;border-radius:50%;background:#062d4c;border:2px solid var(--blue);box-shadow:0 0 0 4px rgba(33,155,255,.2);transition:background-color .2s,box-shadow .3s} .cpin__label{padding:4px 10px;border-radius:999px;background:rgba(13,13,13,.9);border:1px solid var(--border);color:#fff;font-size:13px;font-weight:600;transition:background-color .2s,border-color .2s} .cpin__label b{color:var(--accent-2);font-variant-numeric:tabular-nums} .cpin:hover .cpin__label,.cpin.is-selected .cpin__label{background:var(--primary);border-color:var(--primary)} .cpin:hover .cpin__label b,.cpin.is-selected .cpin__label b{color:#fff} .cpin.is-selected .cpin__dot{background:var(--blue);box-shadow:0 0 0 7px rgba(33,155,255,.35)} .mlist{min-width:0} .mlist__title{font-size:20px} .mlist__more{display:flex;justify-content:center;margin-top:20px} .mlist__more[hidden]{display:none} .eqlist{display:grid;gap:14px;margin-top:18px} .eqcard{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px 18px 12px 12px;background:var(--surface);border:1px solid var(--border);border-radius:15px;transition:border-color .3s,box-shadow .4s,transform .3s var(--ease)} .eqcard:hover,.eqcard:focus-within{border-color:rgba(33,155,255,.7);box-shadow:0 20px 50px -26px rgba(33,155,255,.6);transform:translateY(-2px)} .eqcard.is-in{animation:cardIn .5s var(--ease) both;animation-delay:var(--i,0s)} .eqcard__media{aspect-ratio:280/170;border-radius:10px;overflow:hidden;background:var(--tile)} .eqcard__media svg{width:100%;height:100%} .eqcard__title{font-size:17px;line-height:1.45} .eqcard__title a::after{content:"";position:absolute;inset:0;z-index:1} .eqcard__title a:hover{color:var(--link)} .eqcard__code{margin-top:4px;color:var(--text-2);font-size:13.5px} .eqcard__code b{font-family:ui-monospace,Consolas,monospace;color:var(--accent-2)} .eqcard__meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;color:var(--text-3);font-size:13px} .eqcard__side{display:grid;justify-items:end;gap:8px;text-align:right} .eqcard__views{color:var(--text-3);font-size:12.5px} .eqcard__more{display:inline-flex;align-items:center;gap:2px;color:var(--link);font-size:13.5px;font-weight:600} .eqcard__more svg{width:14px;height:14px} .eqlist--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .eqlist--grid .eqcard{grid-template-columns:1fr;padding:12px 12px 18px} .eqlist--grid .eqcard__side{justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;align-items:center} .skeleton--row{flex-direction:row;align-items:center;padding:12px} .skeleton--row i:first-child{flex:0 0 150px} .skeleton--row i{flex:1;margin:0!important} /* Resource detail: platforms */ .plat-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .plat-links li{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px} .plat-links a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:4px} .plat-links small{color:var(--text-3);font-size:12.5px} .code-link{color:var(--link);font-family:ui-monospace,Consolas,monospace;text-decoration:underline;text-underline-offset:3px} /* Platforms overview */ .pzone+.pzone{margin-top:56px} .pzone__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:20px} .pzone__no{display:grid;place-items:center;min-width:52px;height:30px;padding:0 10px;border-radius:999px;background:rgba(33,155,255,.16);color:var(--accent-2);font-size:13px;font-weight:700} .pzone__count{margin-left:auto;color:var(--text-3);font-size:13.5px} .pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .pcard{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:15px;transition:border-color .3s,box-shadow .4s,transform .4s var(--ease)} .pcard:hover,.pcard:focus-visible{border-color:rgba(33,155,255,.7);box-shadow:0 24px 60px -26px rgba(33,155,255,.6)} .pcard__no{color:var(--blue);font-size:12.5px;font-weight:700} .pcard__name{font-size:17px;font-weight:700;line-height:1.45} .pcard__en{color:var(--text-3);font-size:12.5px} .pcard__meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;color:var(--link);font-size:13.5px;font-weight:600} .pcard__meta svg{width:16px;height:16px} /* Platform template */ .pf-head__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 48px;align-items:start;margin-bottom:28px} .pf-process .h3{margin-top:12px} .pf-links{display:grid;gap:6px;margin-top:14px;font-size:14.5px} .pf-links li{display:flex;gap:12px;align-items:baseline} .pf-links span{color:var(--text-3);min-width:64px} .pf-links a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:4px} .pf-links small{margin-left:4px;color:var(--text-3);font-weight:500} .pf-intro{padding:18px 20px;border-left:3px solid var(--blue);background:var(--surface-2);border-radius:0 12px 12px 0;color:var(--text-2);font-size:15px} .pflow{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .flow__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:14px} .flow__title{font-size:16px} .flow__hint{color:var(--text-3);font-size:13px} .flow__nav{display:flex;gap:8px;margin-left:auto} .flow__nav .cbtn:disabled{opacity:.35;cursor:default} .flow__track{display:grid;grid-auto-flow:column;grid-auto-columns:220px;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px;cursor:grab;counter-reset:none} .flow__track::-webkit-scrollbar{display:none} .flow__track.is-grab{cursor:grabbing;scroll-snap-type:none;user-select:none} .flow__step{position:relative;scroll-snap-align:start;padding:18px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px} .flow__step:not(:last-child)::after{content:"";position:absolute;top:30px;right:-17px;width:18px;height:2px;background:linear-gradient(90deg,var(--blue),transparent)} .flow__no{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:999px;background:var(--blue);color:#000;font-size:12.5px;font-weight:700} .flow__step h3{margin-top:10px;font-size:16px} .flow__step p{margin-top:6px;color:var(--text-2);font-size:14px;line-height:1.7} .flow__progress{position:relative;height:4px;margin-top:14px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden} .flow__progress i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:2px;background:linear-gradient(90deg,#67bafe,#0790ff)} .pf-mods{margin-top:64px} .pf-mods .h2{margin-top:12px} .pf-mods .lead{max-width:900px;margin-top:12px} .pf-mods .stat-note{margin-top:10px} .mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px} .mod{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:15px;transition:border-color .3s} .mod:hover{border-color:rgba(33,155,255,.55)} .mod__no{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#000;font-weight:700;font-size:14px} .mod__title{margin-top:12px;font-size:21px} .mod__desc{margin-top:8px;color:var(--text-2);font-size:14.5px} .mod__feat{margin-top:12px;color:var(--text-2);font-size:13.5px;line-height:1.75} .mod__feat b{display:block;margin-bottom:2px;color:var(--accent-2);font-size:12.5px} .mod__groups{display:grid;gap:10px;align-content:start} .mgroup{padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px} .mgroup h4{margin-bottom:8px;font-size:13.5px;color:var(--accent-2)} .mgroup--tsri{border-color:rgba(33,155,255,.4)} .mgroup__chips{display:flex;flex-wrap:wrap;gap:6px} .eqchip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:13px} .eqchip b{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--accent-2)} a.eqchip{background:rgba(33,155,255,.16);border:1px solid rgba(33,155,255,.45);text-decoration:none} a.eqchip:hover{background:var(--primary);border-color:var(--primary)} a.eqchip:hover b{color:#fff} .mgroup__list{display:grid;gap:4px;font-size:14px;color:#fff} .mgroup__list li{position:relative;padding-left:14px} .mgroup__list li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--link)} .mgroup__note{margin-top:8px;color:var(--text-3);font-size:12.5px;line-height:1.6} .pf-missing{margin-top:12px} /* TSRI status */ .slegend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0} .slegend li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .slegend b{justify-self:end;font-size:26px;font-variant-numeric:tabular-nums} .slegend li>span:last-child{grid-column:1/-1;color:var(--text-3);font-size:13px} .stools{display:grid;gap:16px;margin-bottom:12px} .stools__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px;max-width:760px} .st-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:10px 0} .st-updated{color:var(--text-3);font-size:13.5px} .status-table th[scope="row"]{width:auto;background:none;color:#fff;font-weight:600} .status-table th[scope="row"] a{color:var(--link);text-decoration:underline;text-underline-offset:4px} .status-table td{white-space:nowrap} /* Link (學研串接) */ .unit-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .leq{display:grid;gap:8px} .leq li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px} .leq a{color:#fff;font-weight:600} .leq a b{margin-right:8px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--accent-2)} .leq a:hover{color:var(--link)} .leq li>span:not(.status){color:var(--text-3);font-size:13px} .howto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .howto li{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .howto__no{display:inline-grid;place-items:center;min-width:36px;height:26px;border-radius:999px;background:var(--blue);color:#000;font-size:12.5px;font-weight:700} .howto h3{margin-top:10px;font-size:17px} .howto p{margin-top:6px;color:var(--text-2);font-size:14.5px} /* Contact */ .cgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px} .cmain__org{margin-top:4px;color:var(--text-2)} .cmain__list{display:grid;gap:12px;margin:20px 0} .cmain__list div{display:grid;grid-template-columns:90px 1fr;gap:10px} .cmain__list dt{color:var(--text-3)} .cmain__list a{color:var(--link);text-decoration:underline;text-underline-offset:4px} .cmap-card{display:flex;flex-direction:column;gap:14px;align-items:flex-start} .cmap-card__art{position:relative;width:100%;aspect-ratio:280/170;border-radius:12px;overflow:hidden;background:var(--tile)} .cmap-card__art svg{width:100%;height:100%;opacity:.55} .cmap-card__pin{position:absolute;left:52%;top:42%;width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--blue);transform:rotate(-45deg);box-shadow:0 0 0 8px rgba(33,155,255,.25)} .cmap-card p{color:var(--text-2)} .ugrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .ucard{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:15px} .ucard__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .ucard__head b{font-size:16.5px} .ucard__en{color:var(--text-3);font-size:12.5px} .ucard dl{display:grid;gap:4px;margin:6px 0 10px;font-size:14px} .ucard dl div{display:flex;gap:10px} .ucard dt{color:var(--text-3)} /* Sitemap tree */ .ak-demo--4{grid-template-columns:repeat(4,1fr)} .ak-demo b{font-size:19px;letter-spacing:.04em;color:var(--accent-2)} .ak-demo__t{font-size:17px;margin-top:8px} .ak-demo p{color:var(--text-2);font-size:14.5px} .tree--map{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;align-items:start} .tree--map .tree__group--tall{grid-row:span 3} .tree--map.is-masonry{grid-auto-rows:8px;row-gap:0;grid-auto-flow:row dense} .tree--map.is-masonry>li{margin-bottom:20px;grid-row:auto} @media (min-width:1001px){ .tree--map.is-masonry>li:nth-child(1),.tree--map.is-masonry>li:nth-child(4){grid-column:1} .tree--map.is-masonry>li:nth-child(2){grid-column:2} .tree--map.is-masonry>li:nth-child(3),.tree--map.is-masonry>li:nth-child(5),.tree--map.is-masonry>li:nth-child(6){grid-column:3} } .tree--map>li>a::before{display:none} .tree .no{display:inline-grid;place-items:center;min-width:42px;height:22px;margin-right:10px;padding:0 6px;border-radius:999px;background:rgba(33,155,255,.16);color:var(--accent-2);font-size:11.5px;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums} .tree__top{font-size:18px;font-weight:700} .tree ul ul{margin-top:4px} /* Footer */ .footer__top{grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.8fr)} .footer__info{display:grid;gap:6px;margin-top:20px;font-size:14.5px} .footer__info div{display:flex;gap:10px} .footer__info dt{flex:none;color:var(--text-3)} .footer__info dd{color:var(--text-2)} .footer__info a{color:var(--link);text-decoration:underline;text-underline-offset:3px} .footer__badge{display:flex;align-items:flex-start;justify-content:flex-end} .a11y-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:150px;height:96px;border:1.5px dashed rgba(124,196,255,.5);border-radius:12px;color:var(--accent-2);font-size:13px;font-weight:600} .a11y-slot svg{width:28px;height:28px} .footer__bottom{align-items:center} .footer__views{flex:1 1 420px;color:var(--text-2);font-size:13px} .footer__views strong{color:#fff} @media (max-width:1180px){ .zgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))} .mods{grid-template-columns:1fr} .footer__top{grid-template-columns:1fr 1fr 1fr} .footer__brand{grid-column:1/-1} .qsearch__form{grid-template-columns:1fr 1fr 1fr} } @media (max-width:1000px){ .msearch,.mresult,.cgrid{grid-template-columns:1fr} .mmap{position:static} .hnews{grid-template-columns:1fr} .slegend{grid-template-columns:repeat(2,1fr)} .ugrid,.guide-grid{grid-template-columns:repeat(2,1fr)} .ak-demo--4{grid-template-columns:repeat(2,1fr)} .tree--map{grid-template-columns:repeat(2,minmax(0,1fr))} .lcar__track{grid-auto-columns:calc((100% - 20px) / 2)} .eqlist--grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .zgrid,.pgrid,.ugrid,.guide-grid,.slegend,.howto,.unit-grid--2,.plat-links,.ak-demo--4,.tree--map,.eqlist--grid{grid-template-columns:1fr} .tree--map .tree__group--tall{grid-row:auto} .mform,.qsearch__form{grid-template-columns:1fr} .cmap{height:440px} .eqcard{grid-template-columns:96px minmax(0,1fr);padding:10px} .eqcard__side{grid-column:1/-1;grid-auto-flow:column;justify-content:start;justify-items:start;align-items:center;text-align:left} .hnews__item{flex-direction:column} .hnews__item .hnews__media{flex:none;aspect-ratio:16/9} .lcar__track{grid-auto-columns:86%} .mod{grid-template-columns:1fr} .pf-head__grid{grid-template-columns:1fr} .stools__row{grid-template-columns:1fr} .leq li{grid-template-columns:1fr auto} .leq li>span:not(.status){display:none} .footer__top{grid-template-columns:1fr} .footer__badge{justify-content:flex-start} .cpin__label{font-size:12px;padding:3px 8px} } @media (prefers-reduced-motion:reduce){ .mega__plats{animation:none!important} } /* ---------- 12 Print ---------- */ @media print{ :root{color-scheme:light} body{background:#fff;color:#000;font-size:12pt} .site-header{position:static} .topbar,.nav__links,.nav__cta,.nav__toggle,.mobile-menu,.nav .logo__divider,.nav .logo__name,.footer__top nav,.skip-link,.ak,.to-top,.reading-bar,.circuits,.glow-orb,.grain,.phero__art,.article-tools,.prevnext,.no-print,.gallery__thumbs,.btn{display:none!important} .phero{padding:0 0 12pt;border:0} .phero::before{display:none} .phero__title,.prose,.prose strong,.prose h3,.table caption,.table thead th{color:#000} .phero__lead,.breadcrumb ol,.meta,.prose figcaption,.table tbody th,.statline{color:#333} .layout,.layout--aside-r{grid-template-columns:1fr} .box,.table-wrap,.gallery__main{background:#fff;border-color:#999} .table th,.table td{border-color:#ccc} .prose a,.contact dd a{color:#000} .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt} .logo__img{content:url(../img/logo.svg)} .nav{background:none!important;border:0;box-shadow:none!important} .footer{background:none;color:#000} .footer__bottom,.footer address{color:#333} .js .reveal,.js [data-stagger]>*{opacity:1;translate:none} } /* ---------- 圖片版位統一比例（與後台上傳裁切規格一致） ---------- 文章封面、內文圖 16:9 ／ 設備圖片 280:170 ／ 區塊圖片 4:3 ／ 首頁輪播 8:7 */ .article__cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px} .fig-media img{aspect-ratio:16/9;object-fit:cover} .gallery__item img{aspect-ratio:280/170;max-height:none;object-fit:cover} .mt__media img{aspect-ratio:4/3;object-fit:cover} .slide__art img.slide__img{aspect-ratio:8/7}