162 lines
16 KiB
CSS
162 lines
16 KiB
CSS
/* home.css — 产线平台主页（匿名门户，index.ui 未登录分支）后现代风格样式。
|
||
明暗双主题：默认亮色（纸上先锋），html[data-theme="dark"] 暗色（霓虹暗夜）。
|
||
全部选择器以 .pl- 前缀 / --pl- 变量限定，不影响工作台页面。
|
||
注入方式：header.tmpl cssfiles() 自动收集（需注册 any 权限，见 scripts/load_path.py）。
|
||
注意：bricks 行内样式优先级高，覆盖行内值的规则一律带 !important。 */
|
||
|
||
/* ===== 主题变量 ===== */
|
||
html{
|
||
--pl-bg:#f4f3ef; --pl-bg2:#eae9e3; --pl-ink:#0a0a0f; --pl-ink-soft:rgba(10,10,15,.62);
|
||
--pl-ink-faint:rgba(10,10,15,.42); --pl-line:rgba(10,10,15,.12); --pl-line-soft:rgba(10,10,15,.07);
|
||
--pl-glass:rgba(255,255,255,.62); --pl-glass-br:rgba(10,10,15,.10);
|
||
--pl-cy:#0891b2; --pl-vi:#7c3aed; --pl-mg:#c026d3; --pl-ye:#ca8a04;
|
||
--pl-cy-soft:rgba(8,145,178,.75); --pl-hi:#f4f5fb;
|
||
--pl-header-bg:rgba(244,243,239,.72); --pl-orb-op:.20; --pl-noise-op:.05;
|
||
--pl-marquee-bg:#0a0a0f; --pl-marquee-ink:#f4f3ef;
|
||
--pl-btn-ink:#f8fafc; --pl-shadow:0 24px 60px -18px rgba(10,10,15,.25);
|
||
}
|
||
html[data-theme="dark"]{
|
||
--pl-bg:#05060a; --pl-bg2:#0a0c14; --pl-ink:#e7e9f3; --pl-ink-soft:rgba(231,233,243,.62);
|
||
--pl-ink-faint:rgba(231,233,243,.40); --pl-line:rgba(255,255,255,.14); --pl-line-soft:rgba(255,255,255,.07);
|
||
--pl-glass:rgba(255,255,255,.035); --pl-glass-br:rgba(255,255,255,.09);
|
||
--pl-cy:#22d3ee; --pl-vi:#a78bfa; --pl-mg:#d946ef; --pl-ye:#facc15;
|
||
--pl-cy-soft:rgba(103,232,249,.85); --pl-hi:#f4f5fb;
|
||
--pl-header-bg:rgba(5,6,10,.55); --pl-orb-op:.30; --pl-noise-op:.05;
|
||
--pl-marquee-bg:rgba(255,255,255,.02); --pl-marquee-ink:rgba(231,233,243,.75);
|
||
--pl-btn-ink:#05060a; --pl-shadow:0 24px 60px -18px rgba(34,211,238,.30);
|
||
}
|
||
|
||
/* ===== 页面基调 ===== */
|
||
.pl-page{background:var(--pl-bg)!important;color:var(--pl-ink)!important;font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif!important}
|
||
.pl-rel{position:relative}
|
||
.pl-scroll::-webkit-scrollbar{width:8px}
|
||
.pl-scroll::-webkit-scrollbar-track{background:transparent}
|
||
.pl-scroll::-webkit-scrollbar-thumb{background:var(--pl-line);border-radius:8px}
|
||
.pl-scroll::-webkit-scrollbar-thumb:hover{background:var(--pl-cy-soft)}
|
||
/* flex 列容器子项默认 flex-shrink:1 会把内容压缩而不是溢出滚动（hero 被压扁的根因） */
|
||
.pl-scroll > *{flex-shrink:0!important}
|
||
|
||
/* ===== 顶部 header（sticky 吸顶） ===== */
|
||
.pl-header{position:sticky!important;top:0!important;background:var(--pl-header-bg)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--pl-line-soft)!important;z-index:50;flex-shrink:0}
|
||
.pl-logo{font-size:20px!important;font-weight:900!important;letter-spacing:.02em;color:var(--pl-ink)!important;text-align:left!important;cursor:pointer}
|
||
.pl-logo-sub{font-size:10px!important;letter-spacing:.42em;color:var(--pl-cy-soft)!important;text-transform:uppercase;text-align:left!important}
|
||
.pl-nav{font-size:13px!important;color:var(--pl-ink-soft)!important;letter-spacing:.06em;cursor:pointer;transition:color .2s}
|
||
.pl-nav:hover{color:var(--pl-cy)!important}
|
||
|
||
/* ===== 按钮 ===== */
|
||
.pl-btn{background:linear-gradient(92deg,var(--pl-cy),var(--pl-vi) 55%,var(--pl-mg))!important;border:none!important;border-radius:999px!important;padding:11px 26px!important;color:var(--pl-btn-ink)!important;font-size:14px!important;font-weight:800!important;letter-spacing:.04em;cursor:pointer!important;transition:transform .2s,box-shadow .2s;box-shadow:0 0 24px -8px var(--pl-cy)}
|
||
.pl-btn:hover{transform:translateY(-2px);box-shadow:0 0 34px -6px var(--pl-mg)}
|
||
.pl-btn div{color:inherit!important;font-weight:inherit!important}
|
||
.pl-btn-ghost{background:var(--pl-glass)!important;border:1px solid var(--pl-line)!important;border-radius:999px!important;padding:11px 26px!important;color:var(--pl-ink)!important;font-size:14px!important;font-weight:600!important;letter-spacing:.04em;cursor:pointer!important;backdrop-filter:blur(8px);transition:border-color .2s,transform .2s,box-shadow .2s}
|
||
.pl-btn-ghost:hover{border-color:var(--pl-cy-soft)!important;transform:translateY(-2px);box-shadow:0 0 22px -8px var(--pl-cy)}
|
||
.pl-btn-ghost div{color:inherit!important}
|
||
.pl-btn-sm{padding:7px 18px!important;font-size:12.5px!important}
|
||
|
||
/* ===== Hero ===== */
|
||
.pl-hero{position:relative!important;overflow:hidden!important;background:var(--pl-bg)!important;padding:clamp(56px,9vw,120px) clamp(20px,6vw,90px) clamp(48px,7vw,90px)!important}
|
||
.pl-hero-deco{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;pointer-events:none!important;z-index:0}
|
||
.pl-grid{position:absolute!important;top:0;bottom:0;left:0;right:0;background-image:linear-gradient(var(--pl-line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--pl-line-soft) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 35%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 90% 70% at 50% 35%,#000 35%,transparent 100%)}
|
||
.pl-noise{position:absolute!important;top:0;bottom:0;left:0;right:0;opacity:var(--pl-noise-op);mix-blend-mode:overlay;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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
|
||
.pl-orb{position:absolute!important;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:var(--pl-orb-op)}
|
||
.pl-orb-1{width:480px;height:480px;background:var(--pl-cy);top:-150px;left:-110px;animation:pl-drift1 19s ease-in-out infinite alternate}
|
||
.pl-orb-2{width:430px;height:430px;background:var(--pl-mg);top:4%;right:-130px;animation:pl-drift2 24s ease-in-out infinite alternate}
|
||
.pl-orb-3{width:320px;height:320px;background:var(--pl-ye);bottom:-130px;left:34%;opacity:calc(var(--pl-orb-op) * .45);animation:pl-drift1 28s ease-in-out infinite alternate-reverse}
|
||
@keyframes pl-drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,50px) scale(1.14)}}
|
||
@keyframes pl-drift2{from{transform:translate(0,0) scale(1.06)}to{transform:translate(-80px,60px) scale(.92)}}
|
||
.pl-hero-content{position:relative;z-index:1}
|
||
|
||
.pl-badge{border:1px solid var(--pl-cy-soft)!important;border-radius:999px!important;padding:6px 16px!important;color:var(--pl-cy)!important;font-size:11.5px!important;letter-spacing:.26em!important;text-transform:uppercase;background:var(--pl-glass)!important}
|
||
.pl-h1{font-size:clamp(2.6rem,7.4vw,5.4rem)!important;font-weight:900!important;line-height:1.06!important;letter-spacing:-.02em;text-align:left!important;color:var(--pl-ink)!important}
|
||
.pl-stroke{color:transparent!important;-webkit-text-stroke:1.4px var(--pl-ink-faint)}
|
||
.pl-grad{background:linear-gradient(92deg,var(--pl-cy),var(--pl-vi),var(--pl-mg),var(--pl-ye),var(--pl-cy));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:pl-hue 9s linear infinite}
|
||
@keyframes pl-hue{to{background-position:300% 0}}
|
||
.pl-sub{font-size:clamp(14px,1.6vw,17px)!important;color:var(--pl-ink-soft)!important;line-height:1.8!important;text-align:left!important;max-width:640px}
|
||
.pl-stat-n{font-size:30px!important;font-weight:900!important;color:var(--pl-ink)!important;text-align:left!important;font-variant-numeric:tabular-nums}
|
||
.pl-stat-t{font-size:12px!important;color:var(--pl-ink-faint)!important;letter-spacing:.12em;text-align:left!important}
|
||
|
||
/* 入场动画（stagger） */
|
||
.pl-rise{animation:pl-rise .9s cubic-bezier(.2,.7,.2,1) both}
|
||
.pl-d1{animation-delay:.05s}.pl-d2{animation-delay:.15s}.pl-d3{animation-delay:.28s}.pl-d4{animation-delay:.42s}.pl-d5{animation-delay:.56s}
|
||
@keyframes pl-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
|
||
|
||
/* ===== 跑马灯带 ===== */
|
||
.pl-marquee{overflow:hidden!important;white-space:nowrap!important;border-top:1px solid var(--pl-line-soft)!important;border-bottom:1px solid var(--pl-line-soft)!important;background:var(--pl-marquee-bg)!important;padding:14px 0!important}
|
||
.pl-mq-track{display:flex!important;flex-wrap:nowrap!important;width:max-content!important;animation:pl-mq 36s linear infinite;will-change:transform}
|
||
.pl-mq-track:hover{animation-play-state:paused}
|
||
.pl-mq-item{font-size:14px!important;font-weight:700!important;letter-spacing:.14em;color:var(--pl-marquee-ink)!important;text-align:left!important;white-space:nowrap!important;padding:0 18px!important}
|
||
.pl-mq-item::after{content:"✦";margin-left:36px;color:var(--pl-cy);opacity:.9}
|
||
@keyframes pl-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
|
||
|
||
/* ===== 区块 ===== */
|
||
.pl-sec{position:relative!important;padding:84px clamp(20px,6vw,90px)!important;background:var(--pl-bg)!important}
|
||
.pl-kicker{font-size:11.5px!important;letter-spacing:.34em!important;color:var(--pl-cy)!important;text-transform:uppercase;text-align:left!important;font-family:ui-monospace,"SF Mono",Consolas,monospace}
|
||
.pl-h2{font-size:clamp(1.9rem,4.2vw,3rem)!important;font-weight:900!important;letter-spacing:-.01em;color:var(--pl-ink)!important;text-align:left!important;line-height:1.15!important}
|
||
.pl-sec-sub{font-size:15px!important;color:var(--pl-ink-soft)!important;text-align:left!important;line-height:1.7!important;max-width:620px}
|
||
|
||
/* ===== Bento 玻璃卡片 ===== */
|
||
.pl-card{position:relative!important;overflow:hidden!important;background:var(--pl-glass)!important;border:1px solid var(--pl-glass-br)!important;border-radius:22px!important;padding:26px!important;min-height:190px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s,box-shadow .28s}
|
||
.pl-card::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:radial-gradient(420px 160px at 20% 0%,color-mix(in srgb,var(--pl-cy) 14%,transparent),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
|
||
.pl-card:hover{transform:translateY(-6px);border-color:var(--pl-cy-soft)!important;box-shadow:var(--pl-shadow)}
|
||
.pl-card:hover::before{opacity:1}
|
||
.pl-card-icon{font-size:30px!important;text-align:left!important;filter:saturate(1.25)}
|
||
.pl-card-t{font-size:17.5px!important;font-weight:800!important;color:var(--pl-ink)!important;text-align:left!important;letter-spacing:.01em}
|
||
.pl-card-d{font-size:13px!important;color:var(--pl-ink-soft)!important;text-align:left!important;line-height:1.75!important}
|
||
.pl-card-tag{align-self:flex-start;border:1px solid var(--pl-glass-br)!important;border-radius:999px!important;padding:3px 12px!important;font-size:10.5px!important;letter-spacing:.18em!important;color:var(--pl-mg)!important;text-transform:uppercase;font-family:ui-monospace,"SF Mono",Consolas,monospace}
|
||
.pl-card-lg{background:linear-gradient(135deg,color-mix(in srgb,var(--pl-cy) 9%,var(--pl-glass)),color-mix(in srgb,var(--pl-mg) 8%,var(--pl-glass)) 55%,color-mix(in srgb,var(--pl-ye) 5%,var(--pl-glass)))!important;border:1px solid color-mix(in srgb,var(--pl-vi) 32%,transparent)!important}
|
||
.pl-card-lg .pl-card-t{font-size:22px!important}
|
||
|
||
/* ===== 产线行 ===== */
|
||
.pl-step{position:relative!important;background:var(--pl-glass)!important;border:1px solid var(--pl-glass-br)!important;border-radius:20px!important;padding:24px 26px!important;transition:border-color .25s,transform .25s;backdrop-filter:blur(10px)}
|
||
.pl-step:hover{border-color:color-mix(in srgb,var(--pl-ye) 45%,transparent)!important;transform:translateY(-3px)}
|
||
.pl-step-n{font-size:42px!important;font-weight:900!important;color:transparent!important;-webkit-text-stroke:1.2px var(--pl-ink-faint);text-align:left!important;line-height:1!important;font-variant-numeric:tabular-nums;font-family:ui-monospace,"SF Mono",Consolas,monospace}
|
||
.pl-step-t{font-size:16.5px!important;font-weight:800!important;color:var(--pl-ink)!important;text-align:left!important}
|
||
.pl-step-d{font-size:12.5px!important;color:var(--pl-ink-soft)!important;text-align:left!important;line-height:1.7!important}
|
||
.pl-tag{align-self:center;border-radius:999px!important;padding:4px 14px!important;font-size:11px!important;letter-spacing:.14em!important;white-space:nowrap!important;text-align:center!important}
|
||
.pl-tag-live{background:color-mix(in srgb,#22c55e 16%,transparent)!important;border:1px solid rgba(34,197,94,.45)!important;color:#16a34a!important}
|
||
html[data-theme="dark"] .pl-tag-live{color:#4ade80!important}
|
||
.pl-tag-soon{background:var(--pl-glass)!important;border:1px solid var(--pl-line)!important;color:var(--pl-ink-faint)!important}
|
||
|
||
/* ===== CTA / Footer ===== */
|
||
.pl-cta{position:relative!important;overflow:hidden!important;margin:0 clamp(20px,6vw,90px) 84px!important;border-radius:28px!important;background:linear-gradient(120deg,color-mix(in srgb,var(--pl-cy) 13%,var(--pl-bg)),color-mix(in srgb,var(--pl-vi) 13%,var(--pl-bg)) 50%,color-mix(in srgb,var(--pl-mg) 13%,var(--pl-bg)))!important;border:1px solid color-mix(in srgb,var(--pl-vi) 30%,transparent)!important;padding:64px 40px!important}
|
||
.pl-cta-t{font-size:clamp(1.8rem,4vw,2.8rem)!important;font-weight:900!important;color:var(--pl-ink)!important;letter-spacing:-.01em;text-align:center!important}
|
||
.pl-cta-d{font-size:15px!important;color:var(--pl-ink-soft)!important;text-align:center!important}
|
||
.pl-footer{border-top:1px solid var(--pl-line-soft)!important;padding:26px clamp(20px,6vw,90px)!important;background:var(--pl-bg2)!important}
|
||
.pl-footer-t{font-size:12px!important;color:var(--pl-ink-faint)!important;letter-spacing:.08em;text-align:left!important}
|
||
|
||
/* ===== 响应式 ===== */
|
||
/* 窄桌面/平板横屏（761-900px，2026-09-17 实测 780 窗口）：header 预算紧，
|
||
logo 与登录按钮曾各折两行。缩 logo 字号+按钮禁折行即够（实测余量 ~35px）。 */
|
||
@media (min-width:761px) and (max-width:900px){
|
||
.pl-header{padding:0 16px!important;gap:10px!important}
|
||
.pl-logo{font-size:17px!important;white-space:nowrap!important}
|
||
.pl-logo-sub{font-size:9px!important}
|
||
.pl-btn-sm{white-space:nowrap!important}
|
||
}
|
||
@media (max-width:760px){
|
||
.pl-sec{padding:56px 20px!important}
|
||
.pl-cta{margin:0 16px 56px!important;padding:44px 22px!important}
|
||
.pl-card{min-height:0;padding:20px!important}
|
||
.pl-orb{filter:blur(70px)}
|
||
.pl-step{padding:18px!important}
|
||
/* header 手机两行（2026-09-17 实测 390px）：行1=logo+登录，行2=三锚点+主题+语言。
|
||
单行预算不够（jp 登录文案最宽），且 bricks Text 是 flex 容器 min-width:auto 不缩
|
||
→ logo 文字曾溢出叠到主题按钮上。两行后预算充足，ellipsis 仅作极端字体兜底。
|
||
.pl-logo-box 为生成器加的 logo VBox class；语言切换=header 第 7 个子（urlwidget）。 */
|
||
.pl-header{flex-wrap:wrap!important;padding:8px 12px!important;gap:6px!important}
|
||
.pl-header > *{flex-shrink:0!important}
|
||
.pl-header > .filler{display:none!important}
|
||
.pl-logo-box{order:1;flex:1 1 auto;min-width:0!important}
|
||
.pl-logo-box > *{min-width:0!important;max-width:100%!important}
|
||
.pl-btn-sm{order:2;white-space:nowrap!important;padding:7px 14px!important;font-size:12px!important}
|
||
/* 行2 预算实测：en 导航 12px 时 200px+主题60+语言80+gap32=372>366 折第三行；
|
||
11px 导航(184)+gap24=348 ≤ 366，留 18px 余量 */
|
||
.pl-nav{order:3;font-size:11px!important}
|
||
.theme-icon-btn{order:4;margin-left:auto}
|
||
.pl-header > *:nth-child(7){order:5}
|
||
.pl-logo{font-size:15px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
|
||
.pl-logo-sub{font-size:9px!important}
|
||
/* footer 竖排：版权行 381px+左padding 曾顶出 404px 造成 .pl-scroll 横向滚动 */
|
||
.pl-footer{flex-direction:column!important;align-items:flex-start!important;gap:6px!important;padding:20px 16px!important}
|
||
.pl-footer-t{width:100%!important;word-break:break-word!important}
|
||
}
|