/* aha · 画框 / 装裱组件层 ———————————————————————————————————— 纯 CSS,包住任意 。与 museum 暖纸墙同源(--mat/--wall)。 结构:
尺寸用 % / clamp,自动从瀑布缩略图(~200px)缩放到详情大图(~900px)。 单一事实源 = frames.html;改样式只动本文件。 */ .aha-frame{ position:relative; display:block; --mold: clamp(6px, 2.2%, 18px); /* 框线(molding)宽 */ --matw: clamp(7px, 3.4%, 32px); /* 卡纸(passe-partout)宽 */ --matc: #f3eee2; /* 卡纸色 */ --fillet: rgba(150,110,50,.45); /* 卡纸内嵌金线 */ background: linear-gradient(135deg,#a87b4e,#7d5733); /* 框面(默认胡桃木) */ padding: var(--mold); box-shadow: 0 1px 0 rgba(255,238,205,.40) inset, /* 框上沿受光 */ 0 -2px 2px rgba(0,0,0,.30) inset, /* 框下沿阴影 */ 0 18px 34px -16px rgba(35,25,10,.55); /* 挂墙落影 */ transition: transform .22s ease, box-shadow .22s ease; } .aha-frame .aha-mat{ position:relative; background:var(--matc); padding:var(--matw); box-shadow: 0 0 0 1px rgba(0,0,0,.05), inset 0 2px 7px rgba(40,30,15,.20); /* 卡纸窗口凹陷 */ } .aha-frame .aha-mat:before{ /* 卡纸内嵌细线(fillet) */ content:""; position:absolute; inset:calc(var(--matw) - 4px); border:1px solid var(--fillet); pointer-events:none; z-index:1; } .aha-frame img{ display:block; width:100%; height:auto; background:#cfc6b4; } .aha-frame.lift:hover{ transform:translateY(-5px); box-shadow: 0 1px 0 rgba(255,238,205,.40) inset, 0 -2px 2px rgba(0,0,0,.30) inset, 0 26px 46px -18px rgba(35,25,10,.62); } /* ——— 素木暖框 · 默认,大多数油画 ——— */ .aha-frame.f-wood{ background:linear-gradient(135deg,#a87b4e,#7d5733); } /* ——— 金箔古典 · 古典 / 巴洛克 / 文艺复兴 · 带雕花 ——— */ .aha-frame.f-gilt{ --mold: clamp(9px, 3.4%, 30px); --matc:#efe7d4; --fillet:rgba(150,110,40,.7); /* 框面:斜向描金 + 细密"芦苇纹"(reeded molding)直纹理 */ background: repeating-linear-gradient(135deg, rgba(255,244,205,.16) 0 1.5px, rgba(90,58,12,.16) 1.5px 3px), linear-gradient(135deg,#efd385 0%,#cf9f4c 40%,#9a6c2c 72%,#7a521f 100%); box-shadow: 0 2px 1px rgba(255,248,214,.65) inset, /* 外缘高光棱 */ 0 -2px 3px rgba(70,44,8,.55) inset, 0 20px 44px -16px rgba(40,28,6,.62); } /* 内圈雕花脊:一道凸起的描金联珠/卵锚线(egg-and-dart 暗示) */ .aha-frame.f-gilt:after{ content:""; position:absolute; inset:calc(var(--mold) - 4px); border:2px solid transparent; pointer-events:none; z-index:2; background: repeating-linear-gradient(90deg, rgba(120,84,20,.55) 0 2px, rgba(255,238,190,.7) 2px 4px, rgba(120,84,20,.55) 4px 6px) border-box; -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); box-shadow:0 1px 1px rgba(255,245,205,.5), inset 0 0 0 1px rgba(80,52,12,.4); border-radius:1px; } .aha-frame.f-gilt .aha-mat{ box-shadow:0 0 0 1px rgba(120,90,30,.3), inset 0 2px 9px rgba(60,40,10,.24); } .aha-frame.f-gilt .aha-mat:before{ border-width:1.5px; box-shadow:0 0 0 1px rgba(255,240,200,.35); } /* 卡纸内描金线更亮 */ /* ——— 黑漆细框 · 现代 / 摄影感,细框宽卡纸 ——— */ .aha-frame.f-noir{ --mold: clamp(4px, 1.4%, 10px); --matw: clamp(10px,4.8%,44px); --matc:#f6f3ec; --fillet:rgba(0,0,0,.16); background:#1c1a17; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 16px 32px -16px rgba(20,15,5,.55); } /* ——— 白卡宽边 · 纸本 / 版画 / 素描 / 浅色 ——— */ .aha-frame.f-mat{ --mold: clamp(3px, 1%, 8px); --matw: clamp(13px,7%,62px); --matc:#fbf8f1; --fillet:rgba(0,0,0,.12); background:linear-gradient(135deg,#efe9dc,#ddd5c4); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 1px rgba(0,0,0,.12) inset, 0 16px 30px -16px rgba(40,30,15,.4); } /* ——— 素白馆藏 · 暖纸薄边,干净中性(原沙龙墙白框,通用) ——— */ .aha-frame.f-white{ --mold: clamp(5px, 2%, 12px); --matw: clamp(5px, 2.4%, 18px); --matc:#f4f1ea; --fillet:rgba(40,30,15,.13); background:#f4f1ea; box-shadow: 0 0 0 1px rgba(40,30,15,.10), 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 30px -14px rgba(40,30,15,.5); } .aha-frame.f-white .aha-mat{ box-shadow:none; } /* ——— 冷银 · 蓝绿冷调作品 ——— */ .aha-frame.f-silver{ --matc:#eef0f1; --fillet:rgba(90,100,110,.5); background:linear-gradient(135deg,#d3d6da,#9aa0a6 50%,#6f767d); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 -2px 2px rgba(40,45,50,.4) inset, 0 18px 34px -16px rgba(30,35,40,.5); } .aha-frame.f-silver .aha-mat{ box-shadow:0 0 0 1px rgba(90,100,110,.18), inset 0 2px 7px rgba(40,50,60,.16); } /* ——— 卷轴朱漆 · 东方水墨 / 写意 / 留白 ——— */ .aha-frame.f-scroll{ --mold: clamp(5px, 1.8%, 14px); --matw: clamp(11px,5.2%,42px); --matc:#efe6d2; --fillet:rgba(120,50,30,.45); background:linear-gradient(135deg,#8f3f33,#6e2c22); box-shadow: 0 1px 0 rgba(255,210,190,.25) inset, 0 -2px 2px rgba(0,0,0,.4) inset, 0 18px 34px -16px rgba(45,15,8,.55); } .aha-frame.f-scroll .aha-mat{ background:linear-gradient(180deg,#f1e8d6,#e6dbc2); } /* 丝绢底 */ /* ——— 亚克力浮裱 · face-mounted acrylic,高光泽透明板,离墙悬浮 ——— */ .aha-frame.f-float{ background:transparent; padding:0; /* 离墙落影(偏冷,玻璃感):近实接触影 + 远软漫影 */ box-shadow: 0 6px 10px -6px rgba(18,26,38,.40), 0 28px 54px -22px rgba(18,26,38,.50); } .aha-frame.f-float .aha-mat{ position:relative; background:transparent; padding:0; box-shadow:none; } .aha-frame.f-float img{ display:block; /* 亚克力板:面封后颜色更透亮 */ filter:saturate(1.07) contrast(1.04); /* 透明板的切边与厚度:顶沿亮切边 + 底沿暗边 + 板底厚度硬影 + 侧下漫影 + 细描边 */ box-shadow: 0 0 0 1px rgba(18,28,42,.16), 0 2px 1px rgba(255,255,255,.6) inset, /* 顶沿切边受光(透明棱) */ 0 -2px 1px rgba(12,18,28,.26) inset, /* 底沿切边阴影 */ 0 5px 3px -1px rgba(14,20,32,.34), /* 板底厚度硬影 */ 3px 7px 10px -3px rgba(14,20,32,.22); /* 侧下漫影 */ } /* 玻璃镜面:斜向扫光高光(亚克力的反光) */ .aha-frame.f-float .aha-mat:before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border:0; background:linear-gradient(125deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.12) 13%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.05) 80%, rgba(255,255,255,.20) 100%); mix-blend-mode:screen; } /* 顶部一道更亮的反光条,强化玻璃光泽 */ .aha-frame.f-float .aha-mat:after{ content:""; position:absolute; left:0; right:0; top:0; height:40%; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); } .aha-frame.f-float.lift:hover{ transform:translateY(-6px); box-shadow: 0 10px 14px -8px rgba(18,26,38,.40), 0 44px 68px -26px rgba(18,26,38,.56); }