@@ -3882,4 +3882,216 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
38823882 padding-left : clamp (6px , 2vw , 18px );
38833883 }
38843884 .tk-hero__inner { gap : 40px ; }
3885+ }
3886+
3887+ /* ============================================================
3888+ Polish Pass — 精致打磨
3889+ 统一缓动、细节质感、无障碍、分隔线韵律
3890+ ============================================================ */
3891+
3892+ /* ---------- 统一精致缓动曲线 ---------- */
3893+ .tk-btn ,
3894+ .tk-signal ,
3895+ .tk-signal__go ,
3896+ .tk-register__row ,
3897+ .tk-register__num ,
3898+ .tk-metric ,
3899+ .tk-link ,
3900+ .tk-chip {
3901+ transition-timing-function : cubic-bezier (0.4 , 0 , 0.2 , 1 );
3902+ }
3903+
3904+ /* ---------- 分隔线精致化:两端渐隐 ---------- */
3905+ .tk-hero__scan {
3906+ background : linear-gradient (90deg ,
3907+ transparent 0% ,
3908+ rgba (200 , 167 , 91 , 0.1 ) 8% ,
3909+ var (--gold ) 40% ,
3910+ var (--gold-bright ) 50% ,
3911+ var (--gold ) 60% ,
3912+ rgba (200 , 167 , 91 , 0.1 ) 92% ,
3913+ transparent 100% );
3914+ }
3915+
3916+ /* 遥测面板顶部分隔线:两端渐隐 */
3917+ .tk-hero__telemetry {
3918+ border-top : 1px solid var (--gold-line );
3919+ border-image : linear-gradient (90deg ,
3920+ transparent 0% ,
3921+ var (--gold-line ) 15% ,
3922+ var (--gold-line ) 85% ,
3923+ transparent 100% ) 1 ;
3924+ }
3925+
3926+ /* ---------- 刻度标尺:主次刻度韵律 ---------- */
3927+ .tk-hero__ruler {
3928+ background-image :
3929+ repeating-linear-gradient (
3930+ to bottom,
3931+ transparent 0 ,
3932+ transparent 115px ,
3933+ var (--gold-border ) 115px ,
3934+ var (--gold-border ) 117px
3935+ ),
3936+ repeating-linear-gradient (
3937+ to bottom,
3938+ transparent 0 ,
3939+ transparent 23px ,
3940+ var (--gold-line ) 23px ,
3941+ var (--gold-line ) 24px
3942+ );
3943+ }
3944+
3945+ /* ---------- focus-visible 无障碍:金色外发光 ---------- */
3946+ .tk-btn : focus-visible ,
3947+ .tk-signal : focus-visible ,
3948+ .tk-link : focus-visible {
3949+ outline : none;
3950+ box-shadow : 0 0 0 3px var (--gold-glow );
3951+ border-color : var (--gold-bright );
3952+ }
3953+ .tk-signal : focus-visible { padding-left : 34px ; }
3954+
3955+ /* ---------- HUD 读数精致化 ---------- */
3956+ .tk-hud {
3957+ gap : 4px ;
3958+ padding : 6px 0 6px 16px ;
3959+ border-left : 1px solid var (--gold-line );
3960+ border-image : linear-gradient (180deg ,
3961+ transparent 0% ,
3962+ var (--gold-line ) 30% ,
3963+ var (--gold-line ) 70% ,
3964+ transparent 100% ) 1 ;
3965+ }
3966+ .tk-hud__row {
3967+ display : grid;
3968+ grid-template-columns : 44px auto;
3969+ gap : 12px ;
3970+ align-items : baseline;
3971+ }
3972+ .tk-hud__label {
3973+ position : relative;
3974+ padding-left : 12px ;
3975+ font-weight : 500 ;
3976+ }
3977+ .tk-hud__label ::before {
3978+ content : "" ;
3979+ position : absolute;
3980+ left : 0 ; top : 50% ;
3981+ width : 5px ; height : 1px ;
3982+ background : var (--gold-line );
3983+ }
3984+ .tk-hud__val {
3985+ font-weight : 600 ;
3986+ font-variant-numeric : tabular-nums;
3987+ }
3988+ .tk-hud__val--ok {
3989+ position : relative;
3990+ padding-left : 12px ;
3991+ }
3992+ .tk-hud__val--ok ::before {
3993+ content : "" ;
3994+ position : absolute;
3995+ left : 0 ; top : 50% ;
3996+ transform : translateY (-50% );
3997+ width : 6px ; height : 6px ;
3998+ border-radius : 50% ;
3999+ background : var (--success );
4000+ box-shadow : 0 0 6px var (--success-glow );
4001+ animation : tk-blink 2s ease-in-out infinite;
4002+ }
4003+
4004+ /* ---------- 登记表 hover 细节升级 ---------- */
4005+ .tk-register__row {
4006+ transition : background 0.35s cubic-bezier (0.4 , 0 , 0.2 , 1 ),
4007+ transform 0.35s cubic-bezier (0.4 , 0 , 0.2 , 1 );
4008+ }
4009+ .tk-register__row : hover {
4010+ transform : translateX (4px );
4011+ }
4012+ .tk-register__row ::before {
4013+ background : linear-gradient (180deg , var (--gold-bright ) 0% , var (--gold ) 50% , transparent 100% );
4014+ box-shadow : 0 0 8px var (--gold-glow );
4015+ }
4016+ .tk-register__name {
4017+ transition : color 0.35s cubic-bezier (0.4 , 0 , 0.2 , 1 ),
4018+ transform 0.35s cubic-bezier (0.4 , 0 , 0.2 , 1 );
4019+ }
4020+ .tk-register__row : hover .tk-register__name {
4021+ color : var (--gold-light );
4022+ }
4023+
4024+ /* ---------- 信号条 hover 更丝滑 ---------- */
4025+ .tk-signal {
4026+ transition : all 0.35s cubic-bezier (0.4 , 0 , 0.2 , 1 );
4027+ }
4028+ .tk-signal ::before {
4029+ transition : width 0.5s cubic-bezier (0.4 , 0 , 0.2 , 1 );
4030+ }
4031+ .tk-signal : hover {
4032+ padding-left : 40px ;
4033+ }
4034+ .tk-signal__go {
4035+ transition : transform 0.35s cubic-bezier (0.4 , 0 , 0.2 , 1 ),
4036+ color 0.35s cubic-bezier (0.4 , 0 , 0.2 , 1 );
4037+ }
4038+ .tk-signal : hover .tk-signal__go {
4039+ transform : translateX (8px );
4040+ color : var (--gold-bright );
4041+ text-shadow : 0 0 10px var (--gold-glow );
4042+ }
4043+
4044+ /* ---------- CTA 按钮精致化 ---------- */
4045+ .tk-btn {
4046+ transition : transform 0.3s cubic-bezier (0.34 , 1.56 , 0.64 , 1 ),
4047+ background 0.3s cubic-bezier (0.4 , 0 , 0.2 , 1 ),
4048+ border-color 0.3s cubic-bezier (0.4 , 0 , 0.2 , 1 ),
4049+ box-shadow 0.3s cubic-bezier (0.4 , 0 , 0.2 , 1 );
4050+ }
4051+ .tk-btn--primary {
4052+ box-shadow : 0 4px 18px -8px var (--gold-glow );
4053+ }
4054+ .tk-btn--primary : hover {
4055+ box-shadow : 0 12px 32px -10px var (--gold-glow );
4056+ }
4057+ .tk-btn--primary : active {
4058+ transform : translateY (-1px ) scale (0.98 );
4059+ }
4060+
4061+ /* ---------- 标题脉冲更柔和 ---------- */
4062+ @keyframes tk-pulse-accent {
4063+ 0% , 100% {
4064+ opacity : 1 ;
4065+ text-shadow : 0 0 20px var (--gold-glow ), 0 0 48px var (--gold-glow );
4066+ }
4067+ 50% {
4068+ opacity : 0.75 ;
4069+ text-shadow : 0 0 10px var (--gold-glow ), 0 0 24px var (--gold-glow );
4070+ }
4071+ }
4072+
4073+ /* ---------- reduced-motion 完整降级 ---------- */
4074+ @media (prefers-reduced-motion : reduce) {
4075+ .tk-btn ,
4076+ .tk-signal ,
4077+ .tk-register__row ,
4078+ .tk-register__num ,
4079+ .tk-register__name ,
4080+ .tk-metric ,
4081+ .tk-link ,
4082+ .tk-signal__go {
4083+ transition : none !important ;
4084+ }
4085+ .tk-register__row : hover { transform : none !important ; }
4086+ .tk-signal : hover { padding-left : 24px !important ; }
4087+ .tk-signal : hover .tk-signal__go { transform : none !important ; text-shadow : none !important ; }
4088+ .tk-hud__val--ok ::before { animation : none !important ; }
4089+ .tk-btn--primary { box-shadow : none !important ; }
4090+ }
4091+
4092+ /* ---------- 移动端打磨 ---------- */
4093+ @media (max-width : 768px ) {
4094+ .tk-hud { display : none; }
4095+ .tk-hero__ruler { display : none; }
4096+ .tk-signal : hover { padding-left : 24px ; }
38854097}
0 commit comments