/* ========================================================================== 星阮之芸 · 袁德华艺术网站 THE LIGHT OF ALL THINGS — The Art of Yuan Dehua 全站样式 / Global stylesheet ========================================================================== */ /* ---------- 1. 变量与基础 ---------- */ :root{ --ink:#07080f; /* 墨底 */ --ink-2:#0d1020; --ink-3:#141833; --gold:#c9a227; --gold-2:#e8c46a; --gold-3:#f4e3b0; --cinnabar:#b8342a; /* 朱砂 */ --jade:#2f7d6f; /* 翠绿：主视觉「袁德华 · YUAN DEHUA」专用。翠绿比墨绿亮得多，压在深蓝暗紫背景上对比度 7.1:1，不存在看不清的问题，所以这里可以直接取传统「翠」色本身，不用像墨绿那样为了可读性提亮。 */ --emerald:#3eb370; --paper:#f6f2e8; /* 宣纸 */ --text:#e9e6de; --text-dim:#a9a49a; --line:rgba(233,230,222,.14); --maxw:1280px; --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,"STSong",Georgia,serif; --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --shadow:0 18px 50px rgba(0,0,0,.55); --r:14px; } *{box-sizing:border-box} /* text-size-adjust:100% —— iPhone 竖屏转横屏时 Safari 会自作主张放大正文字号，把已经排好的版面撑变形。100% = 不许它动，字号由我们的媒体查询说了算。 */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ margin:0; background:var(--ink); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body::before{ /* 旧的纯 CSS 星尘底纹已被 #cosmos 宇宙背景取代（见第 1.5 节） */ content:none; } /* ---------- 1.5 宇宙背景（固定多层，做出景深与电影感）---------- 由 app.js 的 mountCosmos() 注入到最前面，8 个页面自动生效。由远及近：油画原图（缓慢推轨）→ 视差星点+流星 canvas → 光束 → 调色暗角 → 胶片颗粒 → 开场黑幕。 ★ 两个旋钮，调背景就改这两个数，别的都不用动： --bg-dim 油画的亮度/可见度（0=纯墨底看不见画，1=原图全亮） --bg-veil 压在画上的暗纱（越大文字越清楚、画面越沉；越小画面越亮、文字越吃力）两者是一对：把 dim 调高了觉得字看不清，就把 veil 也调高一点找平衡。 2026-07-26 用户要求再提亮一档：dim .62→.74、veil .34→.30、油画 brightness .86→.94。这是可读性还撑得住的上限附近，再往上正文就要开始吃力了。 */ :root{ --bg-dim:.74; --bg-veil:.30; } #cosmos{ position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; background:var(--ink); } /* 远景容器：只负责视差位移（transform 由 app.js 写），故意向外溢出留出位移余量，免得画面移动时露出边缘空白。 */ .cosmos-far{position:absolute;inset:-7% -5%;will-change:transform} /* 真正贴图的一层。transform 归 CSS 的推轨动画，opacity 归开场淡入，两条动画各管各的属性，互不打架——所以不能把它们合成一条。 */ .cosmos-shot{ position:absolute;inset:0; background:url(../img/bg/cosmos-sm.jpg) center center/cover no-repeat; /* 往深蓝暗紫压：降饱和收住橙红、色相微偏蓝紫、留住亮度靠 --bg-veil 去压 */ filter:saturate(.92) hue-rotate(-8deg) brightness(.94) contrast(1.04); opacity:var(--bg-dim); animation:cosmos-push 72s ease-in-out infinite alternate, cosmos-fade 2600ms ease-out both; will-change:transform,opacity; } @media(min-width:820px){ .cosmos-shot{ background-image:url(../img/bg/cosmos.jpg); } } /* 缓慢推轨（Ken Burns）：72 秒一个来回，慢到不会分散注意力，但画面始终"活着" */ @keyframes cosmos-push{ from{ transform:scale(1.04) translate3d(-.8%,.6%,0) } to { transform:scale(1.13) translate3d(.9%,-.9%,0) } } @keyframes cosmos-fade{ from{opacity:0} to{opacity:var(--bg-dim)} } /* 中景：星点画布（含流星），各景深以不同速度视差移动 */ .cosmos-stars{position:absolute;inset:0;width:100%;height:100%} /* 九道极淡的光束缓慢扫过，像放映机的光柱。角度/宽度/速度/延迟/浓度全部错开——九道一模一样的斜杠会像百叶窗，不像光。单道浓度只有原来一道时的三分之一左右，九道偶尔重叠也不会糊成一片白。 */ .cosmos-beam{ position:absolute;top:-45%;height:190%; background:linear-gradient(90deg,transparent, rgba(150,175,255,.05) 40%,rgba(198,170,255,.085) 52%, rgba(150,175,255,.04) 62%,transparent); mix-blend-mode:screen; animation:cosmos-beam var(--bt) linear infinite; animation-delay:var(--bd); } @keyframes cosmos-beam{ 0% { transform:translate3d(0,0,0) rotate(var(--ba)); opacity:0 } 14% { opacity:var(--bo) } 86% { opacity:var(--bo) } 100%{ transform:translate3d(var(--bx),0,0) rotate(var(--ba)); opacity:0 } } /* 九道各自的参数：--ba 角度 / --bo 浓度 / --bt 周期 / --bd 起始延迟 / --bx 行程 ⚠ 必须写成 .cosmos-beams > .cosmos-beam:nth-child(N)：光束前面还有远景层和画布，直接对 #cosmos 用 nth-child 会从 1 数到远景层，九道全都对不上号。 */ .cosmos-beams{position:absolute;inset:0;overflow:hidden} .cosmos-beams>.cosmos-beam:nth-child(1){left:-70%;width:46%;--ba:13deg; --bo:.62;--bt:34s;--bd:0s; --bx:420%} .cosmos-beams>.cosmos-beam:nth-child(2){left:-80%;width:28%;--ba:9deg; --bo:.40;--bt:47s;--bd:-6s; --bx:560%} .cosmos-beams>.cosmos-beam:nth-child(3){left:-60%;width:62%;--ba:18deg; --bo:.30;--bt:58s;--bd:-19s; --bx:330%} .cosmos-beams>.cosmos-beam:nth-child(4){left:-90%;width:22%;--ba:6deg; --bo:.52;--bt:29s;--bd:-11s; --bx:640%} .cosmos-beams>.cosmos-beam:nth-child(5){left:-55%;width:38%;--ba:22deg; --bo:.34;--bt:41s;--bd:-25s; --bx:390%} .cosmos-beams>.cosmos-beam:nth-child(6){left:-75%;width:52%;--ba:-8deg; --bo:.28;--bt:63s;--bd:-3s; --bx:360%} .cosmos-beams>.cosmos-beam:nth-child(7){left:-85%;width:18%;--ba:15deg; --bo:.58;--bt:26s;--bd:-16s; --bx:700%} .cosmos-beams>.cosmos-beam:nth-child(8){left:-65%;width:44%;--ba:-4deg; --bo:.36;--bt:52s;--bd:-31s; --bx:400%} .cosmos-beams>.cosmos-beam:nth-child(9){left:-95%;width:32%;--ba:11deg; --bo:.44;--bt:38s;--bd:-8s; --bx:520%} /* 近景：调色 + 暗角，保证正文可读。三段暗纱的浓度都跟着 --bg-veil 走 */ .cosmos-grade{ position:absolute;inset:0; background: radial-gradient(120% 88% at 50% -8%, rgba(72,44,140,.34), transparent 62%), radial-gradient(96% 76% at 6% 104%, rgba(16,24,84,.40), transparent 64%), linear-gradient(180deg, rgba(7,8,15,calc(var(--bg-veil) * 1.45)) 0%, rgba(7,8,15,calc(var(--bg-veil) * .80)) 34%, rgba(7,8,15,calc(var(--bg-veil) * 1.60)) 100%); box-shadow:inset 0 0 260px 90px rgba(7,8,15,.66); } /* 胶片颗粒：只靠 transform 跳位，不重绘噪声图，开销极小 */ .cosmos-grain{ position:absolute;inset:-140px;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E"); animation:cosmos-grain 1s steps(5) infinite; } @keyframes cosmos-grain{ 0% {transform:translate3d(0,0,0)} 20% {transform:translate3d(-7px,5px,0)} 40% {transform:translate3d(6px,-6px,0)} 60% {transform:translate3d(-5px,-4px,0)} 80% {transform:translate3d(7px,6px,0)} 100%{transform:translate3d(0,0,0)} } /* 开场：整块黑幕淡出，做出"起片"的那一下 */ .cosmos-open{ position:absolute;inset:0;background:var(--ink); animation:cosmos-open 2400ms cubic-bezier(.2,.68,.24,1) both; } @keyframes cosmos-open{ 0%{opacity:1} 70%{opacity:.16} 100%{opacity:0} } /* 系统开了"减弱动效"：留住画面和景深，砍掉所有会动的东西 */ @media(prefers-reduced-motion:reduce){ .cosmos-far{transition:none!important} .cosmos-shot{animation:none;transform:scale(1.07);opacity:var(--bg-dim)} .cosmos-beam,.cosmos-beams,.cosmos-grain,.cosmos-open{display:none} } img{max-width:100%;display:block} a{color:var(--gold-2);text-decoration:none;transition:.25s} a:hover{color:var(--gold-3)} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.3;margin:0 0 .6em} p{margin:0 0 1.1em} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1} .narrow{max-width:860px} .center{text-align:center} .dim{color:var(--text-dim)} .gold{color:var(--gold-2)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- 2. 顶部导航 ---------- */ .topbar{ position:sticky;top:0;z-index:60; background:rgba(7,8,15,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .topbar-in{max-width:var(--maxw);margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:22px} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand-mark{ width:42px;height:42px;border-radius:50%;flex-shrink:0; background: radial-gradient(circle at 50% 50%,var(--gold-3) 0 12%,var(--cinnabar) 12% 26%,#2a2f6b 26% 44%,var(--gold) 44% 52%,#0a0c18 52% 100%); box-shadow:0 0 0 1px rgba(232,196,106,.5),0 0 22px rgba(201,162,39,.35); } .brand-txt{display:flex;flex-direction:column;line-height:1.25} .brand-cn{font-family:var(--serif);font-size:19px;letter-spacing:.16em;color:var(--gold-3)} .brand-en{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim)} .nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} .nav a{ color:var(--text);font-size:14px;padding:9px 13px;border-radius:8px; white-space:nowrap;letter-spacing:.03em; } .nav a:hover{background:rgba(232,196,106,.1);color:var(--gold-3)} .nav a.on{color:var(--gold-2);background:rgba(232,196,106,.13)} .tools{display:flex;align-items:center;gap:8px;flex-shrink:0} .picker{position:relative} .picker-btn{ background:transparent;border:1px solid var(--line);color:var(--text); padding:8px 12px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer; display:flex;align-items:center;gap:7px;transition:.25s;white-space:nowrap; } .picker-btn:hover{border-color:var(--gold);color:var(--gold-2)} .picker-menu{ position:absolute;right:0;top:calc(100% + 8px);min-width:172px; background:#10132a;border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow);padding:6px;display:none;z-index:80; } .picker.open .picker-menu{display:block} .picker-menu button{ width:100%;text-align:left;background:transparent;border:0;color:var(--text); font:inherit;font-size:14px;padding:9px 12px;border-radius:8px;cursor:pointer; display:flex;justify-content:space-between;gap:10px; } .picker-menu button:hover{background:rgba(232,196,106,.12);color:var(--gold-3)} .picker-menu button[aria-checked="true"]{color:var(--gold-2)} .picker-menu button[aria-checked="true"]::after{content:"✓"} .cart-btn{position:relative} .cart-count{ position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px; background:var(--cinnabar);color:#fff;border-radius:10px;font-size:11px; line-height:19px;text-align:center;font-family:var(--sans); } .burger{display:none;background:transparent;border:1px solid var(--line);color:var(--text); border-radius:8px;padding:8px 11px;font-size:17px;cursor:pointer} /* 顶栏收成汉堡菜单的断点（2026-08-10 从 1080px 下移到 900px）： 1080px 太早了——1000px 左右的笔记本窗口很常见，在那里整条导航就被收进汉堡，访客得多点一下才能换页。用户反馈「首页没有完整的导航」就是这个断点造成的（其实所有页都一样，只是他对比那两次的窗口宽度不同）。 ★ 900px 是量出来的下限：七项导航约 486px + 品牌区 135px + 工具区 220px + 内边距与间隙 ≈ 880px。再往下压会挤爆，而 body 有 overflow-x:hidden，挤出去的按钮不是换行而是**直接点不到**（见第 14.3 节的老账）。 */ @media(max-width:855px){ .nav{order:3;width:100%;margin-left:0;display:none} .nav.open{display:flex;flex-direction:column;padding-bottom:8px} .burger{display:block} .tools{margin-left:auto} } /* ★ 856–1080px：导航要完整显示且**必须留在一行**。七项按原字号排不下， `.nav{flex-wrap:wrap}` 一换行就把顶栏从 68px 顶到 113px，顶栏高度随窗口忽高忽低（用户报过「顶栏高度要和其他页一致」）。这里收紧字号与内边距，省出约 70px。 */ @media(min-width:856px) and (max-width:1080px){ .nav{gap:2px} .nav a{padding:9px 9px;font-size:13.5px;letter-spacing:0} } /* ★ 856–955px：光收紧导航还不够，再把右侧语言/币种按钮的文字收掉、只留 🌐 和 ¥ （这套做法 ≤560px 时本来就在用，含义不丢），另把品牌中文缩一档。这样又省出约 100px，完整导航的下限从 960px 一路压到 856px—— 1000px 上下的笔记本窗口、乃至把窗口拖窄一些，都还能看到整条导航。 */ @media(min-width:856px) and (max-width:955px){ .brand{gap:9px} .brand-cn{font-size:16.5px;letter-spacing:.1em} .brand-en{display:none} .tools{gap:6px} .picker-btn{padding:9px 10px;gap:5px} .picker-btn .pk-txt{display:none} } /* ---------- 3. 通用区块 ---------- */ .sec{padding:96px 0;position:relative;z-index:1} .sec.tight{padding:64px 0} .sec-head{margin-bottom:52px} .sec-head.center{text-align:center} .eyebrow{ font-size:11.5px;letter-spacing:.36em;text-transform:uppercase; color:var(--gold);margin-bottom:16px;font-family:var(--sans); } .sec-title{font-size:clamp(26px,3.4vw,42px);margin:0 0 18px} .sec-sub{color:var(--text-dim);max-width:760px;font-size:16.5px} .sec-head.center .sec-sub{margin-left:auto;margin-right:auto} .rule{ width:64px;height:2px;margin:22px 0 0; background:linear-gradient(90deg,var(--gold),transparent); } .sec-head.center .rule{margin-left:auto;margin-right:auto; background:linear-gradient(90deg,transparent,var(--gold),transparent)} .btn{ display:inline-flex;align-items:center;gap:9px; padding:13px 26px;border-radius:999px;font-size:14.5px;letter-spacing:.05em; border:1px solid var(--gold);color:var(--gold-2);background:transparent; cursor:pointer;font-family:var(--sans);transition:.28s; } .btn:hover{background:var(--gold);color:#0b0b12;transform:translateY(-2px)} .btn-solid{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#0b0b12;border-color:transparent;font-weight:600} .btn-solid:hover{filter:brightness(1.1);color:#0b0b12} .btn-ghost{border-color:var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--gold);background:transparent;color:var(--gold-2)} .btn-sm{padding:9px 17px;font-size:13px} .btn-block{width:100%;justify-content:center} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none} .btn-row{display:flex;gap:14px;flex-wrap:wrap} .card{ background:linear-gradient(160deg,rgba(20,24,51,.92),rgba(10,12,26,.92)); border:1px solid var(--line);border-radius:var(--r);padding:30px; transition:.3s;height:100%; } .card:hover{border-color:rgba(232,196,106,.4);transform:translateY(-4px)} /* 2026-08-10 按用户要求收小：标题原 20px、正文跟着 body 走 16px/行高1.85，三张卡并排时字显得胀、行距也松。收成 17.5px 标题 + 15.5px 正文/行高 1.72，卡片高度随之下来一截，三列排在一起紧凑得多。 */ .card h3{font-size:17.5px;color:var(--gold-3)} .card p{font-size:15.5px;line-height:1.72} .card p:last-child{margin-bottom:0} .grid{display:grid;gap:24px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} /* 三列/四列栅格的降列断点（2026-08-10 下移）：原来两者都在 980px 降两列，而 980px 左右正是笔记本浏览器很常见的窗口宽度—— 用户在这个宽度下看到「首页艺术品收藏那三张图排成了两行」。 `.g3` 是三张一组的卡片（每格 ~257px 够用），断点下移到 860px； `.g4` 一排四个（多是数字统计那种小块），再窄就挤了，仍保持 980px。 */ @media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:860px){.g3{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}} /* ---------- 视频播放器（配套短片 / 专访 / 新闻报道共用） ---------- */ .film{margin:0} .film-player{ display:block;width:100%;aspect-ratio:16/9;background:#000; border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow); } /* 2026-08-03：原来写死 aspect-ratio:960/544（=1.765），是照配套短片的实际比例定的。新闻报道两条是 864×486 和 960×540（都是标准 16:9 = 1.778），压在 1.765 的框里会多出一道细黑边。改成 16/9 后三条都不差几个像素，object-fit:contain 兜住余量—— 宁可留极细的边，也不能裁掉画面（裁掉的往下是字幕条，那是报道的关键信息）。 */ .film-player{object-fit:contain} /* 新闻报道两条之间的间距。两条各自是完整的 figure（画面 + 标题 + 说明），挨太近会看成一条的附属，所以给足留白。 */ .news-item + .news-item{margin-top:56px} @media(max-width:640px){.news-item + .news-item{margin-top:38px}} .film-player:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px} .film-fallback{padding:26px;color:var(--text-dim);text-align:center} .film-cap{margin-top:22px} .film-cap h3{font-size:20px;color:var(--gold-3);margin:0 0 10px} .film-cap p{color:var(--text-dim);margin:0 0 8px} .film-meta{font-size:13px;letter-spacing:.06em;opacity:.75} /* 竖版预热片（2026-08-09）：9:16 的手机竖屏视频铺满横向配图位会高出一屏，收到 340px 并居中，配图位本身不再画边框（边框跟着窄条走会很怪）。 ★ aspect-ratio 写在