/* ========================================================================== GABRIELIA ADS — Components: buttons / cards / mosaic / marquee / cta ========================================================================== */ /* ---------- 按钮 ---------- */ .btn{ --bh:52px; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px; height:var(--bh);padding:0 clamp(20px,2vw,30px); border:1px solid var(--line-2);border-radius:var(--r); font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap; overflow:hidden;isolation:isolate;cursor:pointer; transition:color .4s var(--ease),border-color .4s var(--ease),transform .3s var(--ease); } .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold); transform:translateY(101%);transition:transform .5s var(--ease)} .btn:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-2px)} .btn:hover::before{transform:translateY(0)} .btn:active{transform:translateY(0)} .btn svg{width:15px;height:15px;flex:none;transition:transform .4s var(--ease)} .btn:hover svg{transform:translateX(3px)} .btn--solid{background:var(--bone);border-color:var(--bone);color:var(--ink)} .btn--solid:hover{color:var(--ink)} .btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink)} .btn--gold::before{background:var(--bone)} .btn--gold:hover{color:var(--ink);border-color:var(--bone)} .btn--ghost{background:transparent} .btn--sm{--bh:42px;padding:0 18px;font-size:12.5px} .btn--lg{--bh:60px;padding:0 clamp(26px,2.6vw,40px);font-size:14.5px} .btn--block{width:100%} .theme--light .btn:hover{color:var(--bone)} .theme--light .btn--solid{background:var(--ink);border-color:var(--ink);color:var(--bone)} .theme--light .btn--gold:hover{color:var(--ink)} /* 文字链接带箭头 */ .tlink{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600; padding-bottom:3px;border-bottom:1px solid var(--line-2);transition:border-color .4s var(--ease),color .4s var(--ease)} .tlink svg{width:14px;height:14px;transition:transform .4s var(--ease)} .tlink:hover{border-color:var(--gold);color:var(--gold)} .tlink:hover svg{transform:translateX(4px)} /* ---------- 标签 / 药丸 ---------- */ .tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line-2); border-radius:99px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--bone-2);white-space:nowrap} html[lang="zh"] .tag{letter-spacing:.02em;text-transform:none;font-size:12px} .tag--gold{border-color:rgba(201,162,74,.4);color:var(--gold-lt);background:var(--gold-dim)} .tag--signal{border-color:rgba(226,69,47,.36);color:#F08B7A} .taglist{display:flex;flex-wrap:wrap;gap:8px} /* ---------- 服务卡 ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)} .svc{position:relative;display:flex;flex-direction:column;border:1px solid var(--line); background:var(--ink-3);overflow:hidden;transition:border-color .5s var(--ease),transform .5s var(--ease)} .svc:hover{border-color:rgba(201,162,74,.45);transform:translateY(-4px)} .svc__media{position:relative;aspect-ratio:var(--svc-ratio,4/5);overflow:hidden;background:var(--ink-4)} .svc__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08) brightness(.86); transition:transform 1.1s var(--ease),filter .6s var(--ease)} .svc:hover .svc__media img{transform:scale(1.06);filter:saturate(.95) contrast(1.05) brightness(.95)} .svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.18) 0%,rgba(11,11,12,.62) 62%,var(--ink-3) 100%)} .svc__idx{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--f-mono);font-size:11px; letter-spacing:.14em;color:var(--gold);background:rgba(11,11,12,.6);backdrop-filter:blur(6px); padding:4px 9px;border:1px solid rgba(201,162,74,.28)} .svc__body{padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;flex:1} .svc__tag{margin:0 0 9px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} html[lang="zh"] .svc__tag{letter-spacing:.04em;text-transform:none;font-size:11.5px} .svc__body h3{margin-bottom:11px} .svc__body p{font-size:14.5px;color:var(--bone-2);line-height:1.62} .svc__out{margin-top:auto;padding-top:clamp(16px,1.8vw,22px)} .svc__out dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-bottom:9px} html[lang="zh"] .svc__out dt{letter-spacing:.04em;text-transform:none;font-size:11.5px} .svc__out dd{font-size:13px;color:var(--bone-2);line-height:1.5;display:flex;gap:8px} .svc__out dd::before{content:"";width:4px;height:4px;background:var(--gold);flex:none;margin-top:.6em;border-radius:1px} .svc__out li+li{margin-top:7px} /* ---------- 案例卡 ---------- */ .case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)} .case{position:relative;display:block;border:1px solid var(--line);background:var(--ink-3);overflow:hidden; transition:border-color .5s var(--ease)} .case:hover{border-color:rgba(201,162,74,.45)} .case__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--ink-4)} .case__media img{width:100%;height:100%;object-fit:cover; filter:saturate(.7) contrast(1.1) brightness(.8);transition:transform 1.1s var(--ease),filter .6s var(--ease)} .case:hover .case__media img{transform:scale(1.05);filter:saturate(.92) contrast(1.06) brightness(.9)} .case__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,11,12,.9) 100%)} .case__loc{position:absolute;top:14px;left:14px;z-index:2} .case__body{padding:clamp(18px,2vw,26px)} .case__body h3{margin-bottom:9px} .case__body p{font-size:14px;color:var(--bone-2);line-height:1.6} .case__meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px} .case__meta div{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .case__meta b{display:block;font-family:var(--f-display);font-size:15px;font-weight:700;letter-spacing:-.01em; color:var(--gold-lt);text-transform:none;margin-top:5px} html[lang="zh"] .case__meta div{letter-spacing:.02em;text-transform:none;font-size:11.5px} .case__art{aspect-ratio:16/11;display:grid;place-items:center;background: radial-gradient(120% 100% at 20% 0%,rgba(201,162,74,.16),transparent 60%),var(--ink-4); border-bottom:1px solid var(--line);position:relative;overflow:hidden} .case__art span{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .case__art::after{content:"";position:absolute;inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:40px 40px;opacity:.5} .case__art--soon span{color:var(--gold)} /* ---------- 媒体网络条目 ---------- */ .net-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)} .net{position:relative;border:1px solid var(--line);background:var(--ink-3);overflow:hidden; transition:border-color .5s var(--ease),transform .5s var(--ease)} .net:hover{border-color:rgba(201,162,74,.45);transform:translateY(-4px)} .net__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-4)} .net__media img{width:100%;height:100%;object-fit:cover; filter:saturate(.98) contrast(1.02) brightness(1);transition:transform 1.1s var(--ease),filter .6s var(--ease)} .net:hover .net__media img{transform:scale(1.055);filter:saturate(1.04) contrast(1.03) brightness(1.06)} .net__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0) 45%,rgba(11,11,12,.42))} .net__n{position:absolute;left:0;bottom:0;z-index:2;padding:12px 16px;font-family:var(--f-mono);font-size:11px; letter-spacing:.18em;color:var(--gold);background:rgba(11,11,12,.72);backdrop-filter:blur(8px);border-top:1px solid rgba(201,162,74,.3);border-right:1px solid rgba(201,162,74,.3)} .net__body{padding:clamp(18px,2vw,26px)} .net__body h3{margin-bottom:8px} .net__body>p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px} /* ---------- 拼贴 ---------- */ .mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:clamp(8px,1vw,14px)} .mosaic>*{position:relative;overflow:hidden;background:var(--ink-4)} .mosaic img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0; filter:saturate(.7) contrast(1.1) brightness(.82);transition:transform 1.2s var(--ease),filter .6s var(--ease)} .mosaic>*:hover img{transform:scale(1.07);filter:saturate(1) contrast(1.04) brightness(.95)} .mosaic::after{content:"";position:absolute;inset:0;pointer-events:none} .m-a{grid-column:span 2;grid-row:span 2;aspect-ratio:1} .m-b,.m-c,.m-d,.m-e{aspect-ratio:1} .m-f{grid-column:span 2;aspect-ratio:2/1} @media(max-width:900px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.m-a{grid-column:span 2;grid-row:span 1}} /* ---------- 跑马灯 ---------- */ .marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--ink); padding-block:clamp(16px,2vw,26px);position:relative} .marquee__track{display:flex;width:max-content;animation:marq 42s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marquee__row{display:flex;align-items:center;flex:none} .marquee__i{display:inline-flex;align-items:center;gap:clamp(20px,2.4vw,40px);padding-inline:clamp(20px,2.4vw,40px); font-size:clamp(1.1rem,2.1vw,1.9rem);font-weight:700;letter-spacing:-.02em;white-space:nowrap;color:var(--bone-2)} .marquee__i::after{content:"";width:7px;height:7px;background:var(--gold);flex:none;transform:rotate(45deg)} .marquee--rev .marquee__track{animation-direction:reverse} /* ---------- 引语 ---------- */ .pq{position:relative;padding-left:clamp(20px,2.4vw,40px);border-left:2px solid var(--gold)} /* 引言整段走衬线。字号比原来的 sans 版本放大约 22% —— Cormorant 的 x-height 小，不放大会比周边 sans 显得"轻"。 */ .pq p{ font-family:var(--f-serif); font-size:clamp(1.4rem,2.7vw,2.42rem); font-weight:400;font-variation-settings:normal; line-height:1.24;letter-spacing:.004em;max-width:32ch; } .pq p em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--gold)} /* 模板 blk_quote 实际输出的是 （不是