/* /best + /c/, round 2 (24.09.2026). Built from the approved mockups (gistil_best_redesign.html / gistil_channel_redesign.html), every rule scoped under .blog-body .bx so nothing leaks into the rest of the site. */ .blog-body .bx{ --bg:#07080A;--bg2:#0B0D11;--panel:#0F1116;--panel2:#14171C;--edge:#22262C;--edge2:#30353D; --ink:#F2EEE6;--body:#CFCAC0;--sub:#A7ADB5; --au:#E8CB6E;--au-b:#DFBC55;--au-d:#8A6D1C;--ag:#CDD3DC;--cu:#D9956A; --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --serif:'Source Serif 4',Georgia,'Times New Roman',serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --ramp:linear-gradient(180deg,#fff0b8 0%,#f0dc8c 10%,#dcc05a 30%,#c9a227 62%,#a8841e 86%,#8a6d1c 100%); --ease:cubic-bezier(.2,.7,.2,1); } /* ? */ .blog-body .bx .q{position:relative;display:inline-flex;vertical-align:middle} .blog-body .bx .q>button{width:24px;height:24px;border-radius:50%;border:1px solid var(--edge2);font:700 13px/1 var(--display);color:var(--sub);display:grid;place-items:center;flex:none;transition:border-color .15s,color .15s,background .15s} .blog-body .bx .q>button:hover,.blog-body .bx .q.open>button{border-color:var(--au-b);color:var(--au);background:rgba(201,162,39,.08)} .blog-body .bx .tip{display:none;position:absolute;z-index:40;top:32px;left:-10px;width:320px;background:var(--panel2);border:1px solid var(--edge2);border-radius:12px;padding:14px 16px;box-shadow:0 20px 44px rgba(0,0,0,.6);font:400 15px/1.5 var(--display);color:var(--body);text-align:left;letter-spacing:0;text-transform:none} .blog-body .bx .tip b{color:var(--ink)} .blog-body .bx .q.open .tip{display:block} .blog-body .bx .q.r .tip{left:auto;right:-10px} .blog-body .bx .lg{display:grid;gap:8px;margin:10px 0 0} .blog-body .bx .lg__i{display:flex;gap:10px;align-items:center} @container (max-width:700px){.blog-body .bx .q{position:static}.blog-body .bx .tip,.blog-body .bx .q.r .tip{left:0;right:0;width:auto}} /* metal swatches */ .blog-body .bx .mt{--c:var(--au)}.blog-body .bx .mt--ag{--c:var(--ag)}.blog-body .bx .mt--cu{--c:var(--cu)} .blog-body .bx .dot{width:12px;height:12px;border-radius:50%;flex:none;display:inline-block;background-size:cover;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 1px rgba(0,0,0,.4)} /* INGOT — brushed metal slab with engraved number (textures from /pricing) */ .blog-body .bx .ingot{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--w,120px);height:calc(var(--w,120px)*.62);border-radius:10px;background-size:cover;background-position:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.25),0 14px 30px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.6)} .blog-body .bx .ingot::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 30%,transparent 60%,rgba(255,255,255,.12) 75%,transparent 90%);pointer-events:none} .blog-body .bx .ingot::after{content:"";position:absolute;inset:7%;border-radius:6px;box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.3);pointer-events:none} .blog-body .bx .ingot b{position:relative;z-index:1;font:800 calc(var(--w,120px)*.33)/1 var(--display);letter-spacing:-.02em;color:#1c1603;text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.25)} .blog-body .bx .ingot--ag b{color:#15181d} .blog-body .bx .ingot--cu b{color:#fff3e8;text-shadow:0 1px 0 rgba(0,0,0,.5)} .blog-body .bx .ingot--sm{--w:64px;border-radius:7px}.blog-body .bx .ingot--sm::after{inset:8%;border-radius:4px} .blog-body .bx .ingot--xs{--w:46px;border-radius:6px}.blog-body .bx .ingot--xs::after{display:none} /* COIN — channel mark: monogram in a brushed-metal ring */ .blog-body .bx .coin{--s:52px;flex:none;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;background-size:300% 300%;background-position:center;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px rgba(0,0,0,.5)} .blog-body .bx .coin::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1d2026,#0c0e11);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.25)} .blog-body .bx .coin span{position:relative;font:800 calc(var(--s)*.3)/1 var(--display);color:var(--c,var(--au));letter-spacing:.02em} .blog-body .bx .coin--sm{--s:30px}.blog-body .bx .coin--lg{--s:88px} /* VALUE MAP — same grammar as the extension: height = value, gold = metal, filler = matte */ .blog-body .bx .vmap{position:relative} .blog-body .bx .vmap__bars{display:flex;align-items:flex-end;gap:2px;height:var(--h,56px)} .blog-body .bx .vmap__bars i{display:block;border-radius:3px 3px 0 0;min-height:4px;transition:filter .15s} .blog-body .bx .vmap__bars .vk-gold{background:var(--ramp);box-shadow:inset 0 1px 0 rgba(255,244,190,.8),0 0 10px rgba(255,215,122,.22)} .blog-body .bx .vmap__bars .vk-water{background:linear-gradient(180deg,rgba(170,176,188,.55),rgba(120,126,138,.35))} .blog-body .bx .vmap__bars .vk-sponsor{background:repeating-linear-gradient(135deg,rgba(150,145,135,.5) 0 3px,rgba(90,88,84,.45) 3px 6px)} .blog-body .bx .vmap__jump{position:absolute;top:-4px;bottom:0;width:2px;background:var(--au);box-shadow:0 0 8px rgba(232,203,110,.7)} .blog-body .bx .vmap__jump::before{content:"";position:absolute;top:-2px;left:-4px;border:5px solid transparent;border-top-color:var(--au)} .blog-body .bx .vmap__axis{display:flex;justify-content:space-between;margin:8px 0 0;font:500 13px/1 var(--mono);color:var(--sub)} .blog-body .bx .vmap__axis b{color:var(--au);font-weight:600} /* buttons: rest / hover / press */ .blog-body .bx .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:12px;font:700 16px/1 var(--display);border:1.5px solid var(--au-b);color:var(--au);background:rgba(201,162,39,.06);transition:background .15s var(--ease),box-shadow .15s var(--ease),transform .08s} .blog-body .bx .btn:hover{background:rgba(201,162,39,.14);box-shadow:0 0 0 4px rgba(201,162,39,.12)} .blog-body .bx .btn:active{transform:translateY(2px);background:rgba(201,162,39,.2)} .blog-body .bx .btn--ghost{border-color:var(--edge2);color:var(--ink);background:transparent} .blog-body .bx .btn--ghost:hover{border-color:var(--sub);background:rgba(255,255,255,.04);box-shadow:none} .blog-body .bx .btn--sm{height:40px;padding:0 16px;font-size:15px;border-radius:10px} .blog-body .bx .gold{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:58px;padding:0 30px;border-radius:14px;font:800 18px/1 var(--display);color:#1a1405;background:linear-gradient(180deg,#f3dd8b 0%,#dfbc55 45%,#c9a227 100%);box-shadow:inset 0 1px 0 rgba(255,250,220,.85),inset 0 -2px 0 rgba(110,80,10,.45),0 12px 30px rgba(201,162,39,.25);transition:filter .15s,box-shadow .15s,transform .08s} .blog-body .bx .gold:hover{filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,250,220,.85),inset 0 -2px 0 rgba(110,80,10,.45),0 0 0 5px rgba(223,188,85,.2),0 14px 34px rgba(201,162,39,.32)} .blog-body .bx .gold:active{transform:translateY(2px);filter:brightness(.94);box-shadow:inset 0 2px 4px rgba(90,60,5,.45),0 6px 16px rgba(201,162,39,.2)} /* cards: rest / hover / press */ .blog-body .bx .lift{transition:transform .18s var(--ease),border-color .18s,background .18s,box-shadow .18s} .blog-body .bx .lift:hover{transform:translateY(-3px);border-color:#3a404a;background:var(--panel2);box-shadow:0 18px 40px rgba(0,0,0,.45)} .blog-body .bx .lift:hover .vmap__bars i{filter:brightness(1.12)} .blog-body .bx .lift:active{transform:translateY(-1px) scale(.995)} /* type */ .blog-body .bx h1,.blog-body .bx h2,.blog-body .bx h3{margin:0;color:var(--ink)} .blog-body .bx .bh2{font:800 clamp(24px,2.3cqi,32px)/1.12 var(--display);letter-spacing:-.02em} .blog-body .bx .beyebrow{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.2 var(--display);color:var(--au)} .blog-body .bx .beyebrow i{width:26px;height:1px;background:var(--au-d)} .blog-body .bx .blede{font:400 clamp(17px,1.45cqi,20px)/1.55 var(--serif);color:var(--body);max-width:60ch} .blog-body .bx .sub{font:500 15px/1.4 var(--display);color:var(--sub)} .blog-body .bx .bsec{padding:clamp(40px,5cqi,72px) 0 0} .blog-body .bx .sech{display:flex;align-items:center;gap:12px;margin:0 0 22px} .blog-body .bx .sech .aside{margin-left:auto} /* chips */ .blog-body .bx .chips{display:flex;gap:8px;flex-wrap:wrap} .blog-body .bx .bchip{flex:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--edge2);border-radius:999px;padding:10px 16px;font:600 15px/1 var(--display);color:var(--body);white-space:nowrap;transition:border-color .15s,color .15s,background .15s,transform .08s} .blog-body .bx .bchip:hover{border-color:var(--sub);color:var(--ink)} .blog-body .bx .bchip:active{transform:translateY(1px)} .blog-body .bx .bchip[aria-pressed=true]{border-color:var(--au-b);color:var(--au);background:rgba(201,162,39,.09)} @container (max-width:700px){.blog-body .bx .chips{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(var(--pad)*-1);padding-right:var(--pad);scrollbar-width:none}.blog-body .bx .chips::-webkit-scrollbar{display:none}} /* extension block */ .blog-body .bx .ext{position:relative;overflow:hidden;margin:clamp(48px,6cqi,88px) 0 0;border:1px solid var(--edge2);border-radius:20px;background:var(--panel);display:grid;grid-template-columns:1fr 1fr;min-height:360px} .blog-body .bx .ext__txt{padding:44px;position:relative;z-index:1} .blog-body .bx .ext__pic{background-size:cover;background-position:center;position:relative} .blog-body .bx .ext__pic::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel),transparent 40%)} .blog-body .bx .ext h2{font:800 clamp(26px,2.8cqi,40px)/1.08 var(--display);letter-spacing:-.02em;max-width:18ch} .blog-body .bx .steps{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:12px} .blog-body .bx .steps li{display:flex;gap:14px;align-items:center;font:500 17px/1.35 var(--display);color:var(--body)} .blog-body .bx .steps li i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--edge2);display:grid;place-items:center;font:700 14px/1 var(--display);font-style:normal;color:var(--au)} .blog-body .bx .ext__sub{margin:14px 0 0;font:500 15px/1.4 var(--display);color:var(--sub)} @container (max-width:900px){.blog-body .bx .ext{grid-template-columns:1fr}.blog-body .bx .ext__pic{height:180px;order:-1}.blog-body .bx .ext__pic::before{background:linear-gradient(0deg,var(--panel),transparent 60%)}.blog-body .bx .ext__txt{padding:24px}} .blog-body .bx .sticky{display:none} @container (max-width:700px){ .blog-body .bx .sticky{display:flex;position:sticky;bottom:0;z-index:50;padding:12px var(--pad) 14px;background:linear-gradient(180deg,transparent,var(--bg) 40%);transition:opacity .2s,transform .2s} .blog-body .bx .sticky.off{opacity:0;transform:translateY(20px);pointer-events:none} .blog-body .bx .sticky .gold{width:100%;height:54px;font-size:17px} .blog-body .bx .ext .gold{display:none} } .blog-body .bx .hidden{display:none!important} /* hero: one answer — what to watch today */ .blog-body .bx .hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:0;margin:18px 0 0;border:1px solid var(--edge);border-radius:24px;overflow:hidden;background:var(--panel);min-height:520px} .blog-body .bx .hero__txt{padding:48px 48px 44px;display:flex;flex-direction:column;gap:18px;min-width:0} .blog-body .bx .hero__t{font:800 clamp(30px,3.6cqi,52px)/1.06 var(--display);letter-spacing:-.025em;max-width:20ch} .blog-body .bx .hero__t a{transition:color .15s}.blog-body .bx .hero__t a:hover{color:var(--au)} .blog-body .bx .hero__who{display:flex;align-items:center;gap:16px;margin:0;font:500 16px/1 var(--display);color:var(--sub)} .blog-body .bx .bwho{display:inline-flex;align-items:center;gap:10px;color:var(--body);font:600 16px/1.2 var(--display);transition:color .15s} .blog-body .bx .bwho:hover{color:var(--ink)} .blog-body .bx .hero .blede{margin:0} .blog-body .bx .hero__map{margin:6px 0 4px;max-width:640px} .blog-body .bx .hero__go{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px} .blog-body .bx .hero__pic{position:relative;background-size:cover;background-position:30% center;min-height:300px} .blog-body .bx .hero__pic::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel) 0%,rgba(15,17,22,.35) 35%,transparent 70%),linear-gradient(0deg,rgba(7,8,10,.7),transparent 45%)} .blog-body .bx .hero__medal{position:absolute;right:36px;bottom:34px;display:flex;flex-direction:column;align-items:flex-end;gap:12px} .blog-body .bx .hero__medal .ingot{--w:170px} .blog-body .bx .hero__word{font:800 24px/1 var(--display);color:var(--c);text-shadow:0 2px 12px rgba(0,0,0,.8)} @container (max-width:900px){ .blog-body .bx .hero{grid-template-columns:1fr;border-radius:18px;min-height:0} .blog-body .bx .hero__pic{order:-1;min-height:190px;background-position:center 60%} .blog-body .bx .hero__pic::before{background:linear-gradient(0deg,var(--panel) 0%,transparent 60%)} .blog-body .bx .hero__medal{right:18px;bottom:14px;flex-direction:row;align-items:center} .blog-body .bx .hero__medal .ingot{--w:108px}.blog-body .bx .hero__word{font-size:19px} .blog-body .bx .hero__txt{padding:6px 20px 24px;gap:14px} .blog-body .bx .hero__go .btn{display:none} } /* top cards */ .blog-body .bx .tgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @container (max-width:1100px){.blog-body .bx .tgrid{grid-template-columns:1fr 1fr}} @container (max-width:700px){.blog-body .bx .tgrid{grid-template-columns:1fr;gap:12px}} .blog-body .bx .btc{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:20px} .blog-body .bx .tc__top{display:flex;align-items:center;justify-content:space-between} .blog-body .bx .tc__n{font:300 34px/1 var(--display);color:#858B94;letter-spacing:-.02em} .blog-body .bx .tc__t{font:700 19px/1.3 var(--display);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .blog-body .bx .tc__t a{transition:color .15s}.blog-body .bx .tc__t a:hover{color:var(--au)} .blog-body .bx .tc__who{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font:500 15px/1 var(--display);color:var(--sub)} .blog-body .bx .tc__who .bwho{font-size:15px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blog-body .bx .tc__go{margin-top:auto} /* shelves */ .blog-body .bx #topics .chips{margin:0 0 20px} .blog-body .bx .bshelves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px} @container (max-width:900px){.blog-body .bx .bshelves{grid-template-columns:minmax(0,1fr)}} .blog-body .bx .sh{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px} .blog-body .bx .sh__h{display:flex;align-items:baseline;gap:12px} .blog-body .bx .sh__h h3{font:800 23px/1.15 var(--display);letter-spacing:-.015em} .blog-body .bx .sh__all{margin-left:auto;font:600 15px/1 var(--display);color:var(--sub);white-space:nowrap;transition:color .15s} .blog-body .bx .sh__all:hover{color:var(--au)} .blog-body .bx .alloy{display:flex;gap:3px;height:16px;border-radius:5px;overflow:hidden} .blog-body .bx .alloy i{display:block;background-size:cover;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.35)} .blog-body .bx .sh__k{display:flex;align-items:center;gap:8px;margin:0;font:500 16px/1.3 var(--display);color:var(--body)} .blog-body .bx .sh__k b{color:var(--au);font-weight:700} .blog-body .bx .sh__best{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--edge);border-radius:12px;background:var(--bg2);transition:border-color .15s,background .15s,transform .08s} .blog-body .bx .sh__best:hover{border-color:var(--au-d);background:#10131a} .blog-body .bx .sh__best:active{transform:translateY(1px)} .blog-body .bx .sh__best .sh__txt{flex:1;min-width:0} .blog-body .bx .sh__best b{display:block;font:700 16.5px/1.3 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blog-body .bx .sh__best small{display:block;margin-top:4px;font:500 14px/1.3 var(--display);color:var(--sub)} .blog-body .bx .sh__best em{font:600 14px/1 var(--mono);font-style:normal;color:var(--au);white-space:nowrap} .blog-body .bx .sh__more{list-style:none;margin:0;padding:0;display:grid;gap:2px} .blog-body .bx .sh__more a{display:flex;align-items:center;gap:12px;padding:8px 4px;border-radius:8px;font:500 16px/1.3 var(--display);color:var(--body);transition:background .15s,color .15s} .blog-body .bx .sh__more a:hover{background:rgba(255,255,255,.03);color:var(--ink)} .blog-body .bx .sh__more .sh__txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blog-body .bx .sh__more em{font:600 13.5px/1 var(--mono);font-style:normal;color:var(--sub)} .blog-body .bx .sh__ch{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:12px;border-top:1px solid var(--edge)} .blog-body .bx .sh__ch .bwho{font-size:15px} /* channel coins */ .blog-body .bx .coins{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} @container (max-width:1100px){.blog-body .bx .coins{grid-template-columns:repeat(3,1fr)}} @container (max-width:700px){.blog-body .bx .coins{display:flex;overflow-x:auto;margin-right:calc(var(--pad)*-1);padding-right:var(--pad);scrollbar-width:none}.blog-body .bx .coins::-webkit-scrollbar{display:none}.blog-body .bx .coins>a{flex:0 0 160px}} .blog-body .bx .cc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:24px 14px 20px} .blog-body .bx .cc b{font:700 16.5px/1.25 var(--display)} .blog-body .bx .cc span{font:500 14px/1.3 var(--display);color:var(--sub)} .blog-body .bx .chero{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:44px;align-items:stretch;padding:28px 0 0} .blog-body .bx .chero__id{display:flex;align-items:center;gap:20px} .blog-body .bx .chero h1{font:800 clamp(38px,4.8cqi,68px)/1 var(--display);letter-spacing:-.03em} .blog-body .bx .chero__sub{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 0;font:500 16px/1 var(--display);color:var(--sub)} .blog-body .bx .chero__sub a{color:var(--body);transition:color .15s}.blog-body .bx .chero__sub a:hover{color:var(--au)} .blog-body .bx .verdict{display:flex;align-items:center;gap:28px;margin:40px 0 0} .blog-body .bx .verdict .ingot{--w:190px} .blog-body .bx .verdict__w{margin:0;font:800 clamp(32px,3.4cqi,48px)/1 var(--display);letter-spacing:-.02em;color:var(--c)} .blog-body .bx .verdict__l{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;font:400 clamp(17px,1.4cqi,20px)/1.5 var(--serif);color:var(--body);max-width:40ch} .blog-body .bx .verdict__l b{color:var(--ink);font-family:var(--display)} .blog-body .bx .chero .kern{min-height:360px} @container (max-width:900px){ .blog-body .bx .chero{grid-template-columns:1fr;gap:22px;padding-top:14px} .blog-body .bx .chero .kern{min-height:220px} .blog-body .bx .verdict{gap:16px;margin-top:26px}.blog-body .bx .verdict .ingot{--w:118px} .blog-body .bx .coin--lg{--s:64px}.blog-body .bx .chero__id{gap:14px} } .blog-body .bx .feat{margin:40px 0 0;border:1px solid var(--edge2);border-radius:24px;padding:34px 38px;background:radial-gradient(90% 120% at 100% 0%,rgba(201,162,39,.09),transparent 60%),var(--panel)} .blog-body .bx .feat__row{display:flex;gap:40px;align-items:center;margin-top:16px} .blog-body .bx .feat__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px} .blog-body .bx .feat__t{font:800 clamp(24px,2.6cqi,36px)/1.12 var(--display);letter-spacing:-.02em;max-width:26ch} .blog-body .bx .feat__t a{transition:color .15s}.blog-body .bx .feat__t a:hover{color:var(--au)} .blog-body .bx .feat__go{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .blog-body .bx .feat__ingot{--w:150px} @container (max-width:900px){.blog-body .bx .feat{padding:22px 18px;border-radius:18px}.blog-body .bx .feat__row{flex-direction:column-reverse;align-items:flex-start;gap:16px}.blog-body .bx .feat__ingot{--w:96px}} .blog-body .bx .prof{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} @container (max-width:900px){.blog-body .bx .prof{grid-template-columns:minmax(0,1fr)}} .blog-body .bx .pc{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:22px} .blog-body .bx .pc__k{display:flex;align-items:center;gap:8px;margin:0;font:600 16px/1.3 var(--display);color:var(--body)} .blog-body .bx .pc__v{margin:14px 0 0;font:800 44px/1 var(--display);letter-spacing:-.02em} .blog-body .bx .pc__v small{font:600 20px/1 var(--display);color:var(--sub);margin-left:2px} .blog-body .bx .alloy--lg{height:34px;border-radius:8px;margin:18px 0 0} .blog-body .bx .pc__legend{display:flex;gap:22px;margin:14px 0 0;font:700 17px/1 var(--display)} .blog-body .bx .pc__legend span{display:inline-flex;align-items:center;gap:8px} .blog-body .bx .coins--4{grid-template-columns:repeat(4,1fr)} .blog-body .bx .bfaq{display:grid;gap:10px;max-width:820px} .blog-body .bx .bfaq details{background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:0 20px;transition:border-color .15s} .blog-body .bx .bfaq details:hover{border-color:var(--edge2)} .blog-body .bx .bfaq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:18px 0;font:700 18px/1.35 var(--display)} .blog-body .bx .bfaq summary::-webkit-details-marker{display:none} .blog-body .bx .bfaq summary::after{content:"+";margin-left:auto;font:500 24px/1 var(--display);color:var(--sub);transition:transform .15s} .blog-body .bx .bfaq details[open] summary::after{transform:rotate(45deg)} .blog-body .bx .bfaq p{margin:0 0 18px;font:400 17px/1.6 var(--serif);color:var(--body);max-width:62ch} .blog-body .bx .back{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 0} .blog-body .bx .disc2{margin:22px 0 0;font:400 15px/1.55 var(--display);color:var(--sub);max-width:70ch} /* ---- integration (24.09.2026) ---- */ .blog-body .bx{container-type:inline-size;--pad:clamp(20px,4.5cqi,72px);background:radial-gradient(1200px 600px at 80% -10%,rgba(201,162,39,.07),transparent 60%),var(--bg);color:var(--ink);font-family:var(--display);padding-bottom:40px} .blog-body .bx .wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)} .blog-body .bx a{color:inherit;text-decoration:none} .blog-body .bx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} .blog-body .bx .crumbs{padding-top:18px} .blog-body .bx .crumbs ol{margin-bottom:10px} @media (prefers-reduced-motion:reduce){.blog-body .bx *{transition:none!important;animation:none!important}} /* REAL GOLD (owner, 24.09.2026: "gold must be gold, not mustard"). The brushed texture of /pricing at its own scale (420px, the streaks stay visible), lit with a warm wash — the same way the plan nameplates are lit. */ .blog-body .bx .tx-gold{background-color:#d2a62a;background-image:linear-gradient(180deg,rgba(255,243,180,.46) 0%,rgba(255,214,92,.20) 48%,rgba(150,100,0,.10) 100%),url(../img/metal/gold.webp);background-size:auto,420px auto;background-position:center} .blog-body .bx .tx-silver{background-color:#a9b1bb;background-image:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.18) 50%,rgba(0,0,0,.06) 100%),url(../img/metal/silver.webp);background-size:auto,420px auto;background-position:center} .blog-body .bx .tx-copper{background-color:#b86a3c;background-image:linear-gradient(180deg,rgba(255,206,160,.30) 0%,rgba(255,170,110,.10) 50%,rgba(60,20,0,.10) 100%),url(../img/metal/copper.webp);background-size:auto,420px auto;background-position:center} .blog-body .bx .coin.tx-gold,.blog-body .bx .coin.tx-silver,.blog-body .bx .coin.tx-copper{background-size:auto,240px auto} /* the small metal mark (replaces the stretched dot): its number on its metal */ .blog-body .bx .mtag{flex:none;display:inline-grid;place-items:center;min-width:40px;height:26px;padding:0 8px;border-radius:6px;font:800 14px/1 var(--display);letter-spacing:-.01em;color:#1c1603;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.45);white-space:nowrap} .blog-body .bx .mtag--ag{color:#15181d} .blog-body .bx .mtag--cu{color:#fff6ee;text-shadow:0 1px 0 rgba(0,0,0,.55)} .blog-body .bx .lg__i{font:400 15px/1.3 var(--display)} .blog-body .bx .tip__p{display:block;margin:10px 0 0} .blog-body .bx .tip a{color:var(--au);text-decoration:underline} /* the gold-share ring: the arc is the share, the number sits inside */ .blog-body .bx .ring{position:relative;width:118px;height:118px;display:grid;place-items:center;flex:none} .blog-body .bx .ring__svg{position:absolute;inset:0;width:100%;height:100%} .blog-body .bx .ring__track{fill:none;stroke:#22262C;stroke-width:8} .blog-body .bx .ring__arc{fill:none;stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(240,200,90,.35))} .blog-body .bx .ring__n{position:relative;font:800 34px/1 var(--display);letter-spacing:-.03em;color:#F6DE8A} .blog-body .bx .ring__n small{font:700 17px/1 var(--display);margin-left:1px;color:var(--au)} .blog-body .bx .cc__who{display:flex;align-items:center;gap:8px;max-width:100%} .blog-body .bx .cc__who b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 16.5px/1.25 var(--display)} .blog-body .bx .cc__cap{font:500 14px/1.3 var(--display);color:var(--sub)} @container (max-width:700px){.blog-body .bx .ring{width:96px;height:96px}.blog-body .bx .ring__n{font-size:28px}} /* page head */ .blog-body .bx .bhead{padding:4px 0 0} .blog-body .bx .bhead h1{margin:0;font:800 clamp(30px,3.2cqi,44px)/1.08 var(--display);letter-spacing:-.025em;color:var(--ink);max-width:none} .blog-body .bx .bhead__sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;font:400 clamp(17px,1.4cqi,19px)/1.5 var(--serif);color:var(--body)} /* photographs instead of background images */ .blog-body .bx .hero__pic img,.blog-body .bx .ext__pic img,.blog-body .bx .kslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .blog-body .bx .hero__pic img{object-position:30% center} .blog-body .bx .hero__pic::before,.blog-body .bx .ext__pic::before{z-index:1} .blog-body .bx .hero__medal{z-index:2} .blog-body .bx .hero__txt{position:relative} .blog-body .bx .ext__pic{min-height:260px} .blog-body .bx .kslot{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--edge);min-height:360px;background:var(--panel)} .blog-body .bx .kslot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,10,.15),rgba(7,8,10,.55))} @container (max-width:900px){.blog-body .bx .kslot{min-height:200px}} .blog-body .bx .tc__who .bwho{display:inline-flex;min-width:0} .blog-body .bx .tc__who .bwho .bwho__n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blog-body .bx .tc__dur{flex:none} .blog-body .bx .sh__h h3 a{transition:color .15s}.blog-body .bx .sh__h h3 a:hover{color:var(--au)} .blog-body .bx .sh__ch .bwho .bwho__n{white-space:nowrap} .blog-body .bx .chip--sm{padding:8px 14px;font-size:15px} .blog-body .bx .chip--static{cursor:default}.blog-body .bx .chip--static:hover{border-color:var(--edge2);color:var(--body)} .blog-body .bx .chero__sub{align-items:center} .blog-body .bx .chero .beyebrow{margin:0 0 8px} .blog-body .bx .verdict__l{display:flex} .blog-body .bx .verdict__l b{color:var(--ink)} .blog-body .bx .feat .beyebrow{margin:0} .blog-body .bx .empty{color:var(--body)} .blog-body .bx .ingot[class*=tx-],.blog-body .bx .alloy i[class*=tx-],.blog-body .bx .mtag[class*=tx-]{background-size:auto,420px auto;background-position:center} .blog-body .bx .coin[class*=tx-]{background-size:auto,240px auto;background-position:center} /* the fixed site header sits over the page top (same offset the blog heads use) */ .blog-body .bx{padding:calc(var(--nav-h, 64px) + 18px) 0 40px;margin:0;max-width:none;display:block} .blog-body .bx .ingot,.blog-body .bx .mtag,.blog-body .bx .coin{flex:none} .blog-body .bx .sh,.blog-body .bx .btc,.blog-body .bx .cc{min-width:0} .blog-body .bx .tgrid{grid-template-columns:repeat(3,minmax(0,1fr))} @container (max-width:1100px){.blog-body .bx .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @container (max-width:700px){.blog-body .bx .tgrid{grid-template-columns:minmax(0,1fr)}} .blog-body .bx .beyebrow{text-transform:none;letter-spacing:0;margin:0} .blog-body .bx .bwho{min-width:0} .blog-body .bx .pc{min-width:0} .blog-body .bx .pc__legend{flex-wrap:wrap;gap:12px 20px} .blog-body .bx .prof{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .blog-body .bx .sh__more{grid-template-columns:minmax(0,1fr)} .blog-body .bx .sh__more li{min-width:0} .blog-body .bx .cc .ring__n{font:800 34px/1 var(--display);letter-spacing:-.03em;color:#F6DE8A} .blog-body .bx .cc .ring__n small{font:700 17px/1 var(--display);color:var(--au)} @container (max-width:700px){.blog-body .bx .cc .ring__n{font-size:28px}} @container (max-width:700px){.blog-body .bx .sticky .gold{white-space:nowrap;font-size:16px;padding:0 16px}} /* Kern (24.09.2026): square art, centred crop in both slots */ .blog-body .bx .kslot img{object-position:center 45%} .blog-body .bx .kslot::after{background:linear-gradient(180deg,transparent 60%,rgba(7,8,10,.35))} .blog-body .bx .ext__pic--kern img{object-position:center 40%} .blog-body .bx .ext__pic--kern::before{background:linear-gradient(90deg,var(--panel),transparent 28%)} @container (max-width:900px){.blog-body .bx .kslot{min-height:300px}.blog-body .bx .ext__pic--kern{height:280px}.blog-body .bx .ext__pic--kern::before{background:linear-gradient(0deg,var(--panel),transparent 35%)}} /* GOLD, SECOND PASS (owner, 24.09.2026: "gold must be gold"). Measured against the /pricing plate: the metal was bright enough but low in saturation, which is what reads as mustard/olive. A warmer, more saturated wash with a specular top edge; the value-map ramp gets the same warm curve. */ .blog-body .bx{--ramp:linear-gradient(180deg,#fff4c8 0%,#f9dd84 12%,#f0c24a 36%,#dca22a 66%,#b98116 88%,#94640c 100%)} .blog-body .bx .tx-gold{background-color:#e0ad2e;background-image:linear-gradient(180deg,rgba(255,250,220,.55) 0%,rgba(255,226,120,.42) 14%,rgba(250,196,60,.42) 50%,rgba(214,146,20,.40) 86%,rgba(150,92,0,.45) 100%),url(../img/metal/gold.webp)} .blog-body .bx .ingot.tx-gold,.blog-body .bx .alloy i.tx-gold,.blog-body .bx .mtag.tx-gold{background-size:auto,420px auto} .blog-body .bx .coin.tx-gold{background-size:auto,240px auto} .blog-body .bx .gold{background:linear-gradient(180deg,#fbe39a 0%,#f0c653 42%,#dca22a 100%)} /* ========================================================================== GOLD, FULL REDESIGN (owner, 24.09.2026: "the gold is not golden"). The brushed webp from /pricing is an olive-yellow photo; on small pieces it averages to mustard whatever is laid over it. Gold here is now DRAWN: a warm yellow-to-amber body with a bright top and a deep bottom (depth), a diagonal specular sheen, and a faint vertical brushing — the same material on every gold piece (ingots, metal tags, alloy bars, coins, the value map, the ring, the button). Silver and copper keep their textures untouched. ========================================================================== */ .blog-body .bx{ --au:#F4C24E;--au-b:#EDB23A;--au-d:#A8700F; --g-body:linear-gradient(180deg,#fff6cf 0%,#ffe58f 10%,#f9cd4c 30%,#eeb42c 52%,#d9951a 74%,#b8720c 90%,#94560a 100%); --g-sheen:linear-gradient(112deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.55) 40%,rgba(255,250,225,.18) 47%,rgba(255,255,255,0) 56%); --g-brush:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(120,70,0,.06) 1px 2px,rgba(255,255,255,0) 2px 4px); --ramp:linear-gradient(180deg,#fff6cf 0%,#ffe07e 12%,#f7c440 34%,#eaa926 58%,#cf8a14 82%,#a86608 100%); } .blog-body .bx .tx-gold, .blog-body .bx .ingot.tx-gold,.blog-body .bx .alloy i.tx-gold,.blog-body .bx .mtag.tx-gold,.blog-body .bx .coin.tx-gold{ background-color:#eeb42c;background-image:var(--g-sheen),var(--g-brush),var(--g-body); background-size:100% 100%,auto,100% 100%;background-position:center} .blog-body .bx .ingot.tx-gold{box-shadow:inset 0 2px 0 rgba(255,251,225,.9),inset 0 -3px 0 rgba(110,60,0,.55),inset 0 0 0 1px rgba(150,90,0,.55),0 14px 30px rgba(0,0,0,.55),0 0 26px rgba(245,180,40,.18)} .blog-body .bx .ingot--au b{color:#3b2200;text-shadow:0 1px 0 rgba(255,244,200,.7),0 -1px 0 rgba(120,70,0,.35)} .blog-body .bx .mtag--au{color:#3b2200;text-shadow:0 1px 0 rgba(255,244,200,.6)} .blog-body .bx .alloy i.tx-gold{box-shadow:inset 0 1px 0 rgba(255,250,220,.85),inset 0 -1px 0 rgba(120,70,0,.45)} .blog-body .bx .vmap__bars .vk-gold{box-shadow:inset 0 1px 0 rgba(255,248,210,.9),0 0 10px rgba(245,185,50,.25)} .blog-body .bx .gold{color:#2b1800;background-image:var(--g-sheen),var(--g-body);background-color:#eeb42c; box-shadow:inset 0 1px 0 rgba(255,251,225,.95),inset 0 -2px 0 rgba(120,66,0,.5),0 12px 30px rgba(238,170,40,.28)} .blog-body .bx .gold:hover{filter:brightness(1.06) saturate(1.05);box-shadow:inset 0 1px 0 rgba(255,251,225,.95),inset 0 -2px 0 rgba(120,66,0,.5),0 0 0 5px rgba(240,180,50,.22),0 14px 34px rgba(238,170,40,.36)} .blog-body .bx .cc .ring__n,.blog-body .bx .ring__n{color:#FFD970} .blog-body .bx .ring__arc{filter:drop-shadow(0 0 7px rgba(245,180,40,.4))} .blog-body .bx .hero__pic img{object-position:center} @container (max-width:900px){.blog-body .bx .hero__pic img{object-position:center 55%}} /* ========================================================================== ONE GOLD WITH THE EXTENSION (owner, 24.09.2026: "the gold here does not match our gold on the charts"). The material below is COPIED from the extension's content.css (the value map the owner likes): noise tiles, horizontal light, the lemon-to-warm ramp, bevels, halo, glow. The site's value-map bars use it 1:1 under the extension's own class names, and every other gold piece (ingots, tags, alloy bars, coins, ring, button) is struck from the same recipe so all gold on the site is one metal. ========================================================================== */ .blog-body .bx { --mxa-emb: url("data:image/svg+xml;utf8,"); --mxa-fine: url("data:image/svg+xml;utf8,"); --mxg-emb: url("data:image/svg+xml;utf8,"); --mxg-fine: url("data:image/svg+xml;utf8,"); --mxc-emb: url("data:image/svg+xml;utf8,"); --mxc-fine: url("data:image/svg+xml;utf8,"); /* активный металл — по умолчанию GOLD (data-metal ставит content.js) */ --m-fine: var(--mxa-fine); --m-emb: var(--mxa-emb); --m-horiz: linear-gradient(90deg, rgba(122,64,0,.40) 0%, rgba(255,232,128,.20) 7%, rgba(255,255,255,0) 30%, rgba(255,255,214,.45) 50%, rgba(255,255,255,0) 65%, rgba(90,50,0,.52) 80%, rgba(236,196,118,.22) 96%); /* Рампа подогнана под НОВЫЙ эталон владельца (кроп 116×111, 2026-08-02): блик шире и холоднее (15–50% почти белый лимон hue 57–61, sat .32–.48), светло до ~65% высоты, амбра СЖАТА в нижние ~30% (на кромке оранжевее — так в эталоне). Стопы недоэкспонированы нарочно: рендер проходит через soft-light белого центра + brightness(≈1.19) — замеры сведены по отрендеренному столбику, не по значениям стопов. */ /* ПРОБА 0.7.16 (по слову владельца): низ БЕЗ тёмной коричневой полосы — рампа заканчивается тёплым золотом. Вернуть амбру: класс .gx-gold-amber на #gistil-panel (см. блок ниже). Верхний блик и зерно не тронуты. */ --m-ramp: linear-gradient(180deg, #b8a26e 0%, #ccbd70 5%, #ccc55c 12%, #d7d98d 28%, #d6d581 45%, #d1c869 58%, #bfaf4d 65%, #c5ab44 71%, #c3ab42 82%, #c4ae44 93%, #cdb853 100%); --m-ramp-sm: linear-gradient(180deg, #d1c079 0%, #f0e690 12%, #e0cf6c 22%, #c7af4c 40%, #ba9e3b 60%, #bd9f36 78%, #c1a43a 92%, #c6aa44 100%); --m-bevel-hi: rgba(255,244,190,.85); --m-bevel-lo: rgba(96,64,8,.55); --m-bevel-hi-w: rgba(255,244,190,.7); --m-bevel-lo-w: rgba(96,64,8,.45); --m-glow: rgba(255,215,110,.38); --m-peak-line: rgba(255,236,170,.9); --m-peak-dot: #ffd77a; --m-num: linear-gradient(180deg, #fff3d2 15%, #ffd77a 55%, #dfa421 100%); /* ОРЕОЛ (одобрен владельцем 2026-08-02: «пусть все, пик определяется высотой»). Сила золота — по замеру эталона: +39 люм на 3px от кромки, спад к ~40px (в масштабе наших столбиков это blur 12px на большой карте / 5px в мини). Серебро и медь светятся ЗАМЕТНО слабее — «так себе» и «не стоит» не сияют. */ --m-halo: 0 0 12px rgba(255,215,122,.42); --m-halo-mini: 0 0 5px rgba(255,213,116,.38); --m-halo-mini-peak: 0 0 7px rgba(255,213,116,.5); /* время пика — ВСЕГДА золото (самый ценный момент), при любом металле */ --m-peaktime: linear-gradient(180deg, #fff3d2 15%, #ffd77a 55%, #dfa421 100%); --m-peaktime-glow: rgba(255,199,84,.35); } .blog-body .bx{ --nz-grad:linear-gradient(180deg,rgba(188,195,205,.34),rgba(188,195,205,.12)); --nz-grad-ad:repeating-linear-gradient(135deg,rgba(176,183,193,.36) 0 3px,rgba(104,111,121,.32) 3px 6px); --p-vm-seam:rgba(0,0,0,.62); --au:#ffd77a;--au-b:#f0c860;--au-d:#9a7a2c; --ramp:var(--m-ramp); /* one gold material for every non-bar piece */ --gold-mat:linear-gradient(to top, rgba(255,240,190,.62) 0%, rgba(255,240,190,.30) 26%, transparent 52%), var(--m-fine), var(--m-emb), var(--m-horiz), var(--m-ramp); } /* value map — the extension's bar, verbatim */ .blog-body .bx .vmap__bars{gap:4px;align-items:flex-end} .blog-body .bx .vmap__bars .vm-bar{position:relative;display:block;border-radius:3px 3px 0 0;min-height:5px;filter:brightness(calc(.58 + var(--v,.5) * .66));transition:filter .12s;box-shadow:none} .blog-body .bx .vmap__bars .vm-bar + .vm-bar::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:2px;border-radius:1px;background:var(--p-vm-seam);pointer-events:none} .blog-body .bx .vmap__bars .vm-bar.k-water{background:var(--nz-grad)} .blog-body .bx .vmap__bars .vm-bar.k-sponsor{background:var(--nz-grad-ad)} .blog-body .bx .vmap__bars .vm-bar.k-gold{background-image:var(--m-ramp-sm);box-shadow:inset 0 1px 0 var(--m-bevel-hi-w),inset 0 -1px 0 var(--m-bevel-lo-w),var(--m-halo)} .blog-body .bx .vmap__bars .vm-bar.k-gold.m-lg{ background-image:linear-gradient(to top, rgba(255,240,190,.62) 0%, rgba(255,240,190,.30) 26%, transparent 52%), var(--m-fine), var(--m-emb), var(--m-horiz), var(--m-ramp); background-blend-mode:screen, soft-light, overlay, soft-light, normal; background-size:100% 100%, 96px 96px, 96px 96px, 100% 100%, 100% 100%; background-repeat:repeat; background-position:0 0, calc(var(--i, 0) * -13px) calc(var(--i, 0) * -5px), calc(var(--i, 0) * -17px) calc(var(--i, 0) * -7px), 0 0, 0 0; box-shadow:inset 0 1px 0 var(--m-bevel-hi), inset 0 -1px 0 var(--m-bevel-lo), var(--m-halo)} .blog-body .bx .vmap__bars .vm-bar.k-gold.m-lg.glow{box-shadow:inset 0 1px 0 var(--m-bevel-hi), inset 0 -1px 0 var(--m-bevel-lo), var(--m-halo), 0 0 18px var(--m-glow)} .blog-body .bx .lift:hover .vmap__bars .vm-bar{filter:brightness(calc(.64 + var(--v,.5) * .70))} .blog-body .bx .vmap__jump{background:var(--m-peak-dot);box-shadow:0 0 8px var(--m-glow)} .blog-body .bx .vmap__jump::before{border-top-color:var(--m-peak-dot)} /* every other gold piece: the same material */ .blog-body .bx .tx-gold, .blog-body .bx .ingot.tx-gold,.blog-body .bx .alloy i.tx-gold,.blog-body .bx .mtag.tx-gold,.blog-body .bx .coin.tx-gold{ background-color:#c9b04c;background-image:var(--gold-mat); background-blend-mode:screen, soft-light, overlay, soft-light, normal; background-size:100% 100%, 96px 96px, 96px 96px, 100% 100%, 100% 100%;background-repeat:repeat;background-position:0 0} .blog-body .bx .ingot.tx-gold{box-shadow:inset 0 1px 0 var(--m-bevel-hi), inset 0 -2px 0 var(--m-bevel-lo), inset 0 0 0 1px rgba(96,64,8,.35), 0 14px 30px rgba(0,0,0,.55), var(--m-halo)} .blog-body .bx .ingot--au b,.blog-body .bx .mtag--au{color:#2b1c00;text-shadow:0 1px 0 rgba(255,244,190,.6)} .blog-body .bx .alloy i.tx-gold,.blog-body .bx .mtag.tx-gold{box-shadow:inset 0 1px 0 var(--m-bevel-hi-w), inset 0 -1px 0 var(--m-bevel-lo-w)} .blog-body .bx .gold{color:#2b1c00;background-color:#c9b04c;background-image:var(--gold-mat); background-blend-mode:screen, soft-light, overlay, soft-light, normal;background-size:100% 100%, 96px 96px, 96px 96px, 100% 100%, 100% 100%; box-shadow:inset 0 1px 0 var(--m-bevel-hi), inset 0 -2px 0 var(--m-bevel-lo), 0 12px 30px rgba(255,215,110,.22)} .blog-body .bx .gold:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 var(--m-bevel-hi), inset 0 -2px 0 var(--m-bevel-lo), 0 0 0 5px rgba(255,215,110,.2), 0 14px 34px rgba(255,215,110,.3)} .blog-body .bx .ring__n,.blog-body .bx .cc .ring__n{color:#ffd77a} .blog-body .bx .ring__arc{filter:drop-shadow(0 0 7px rgba(255,215,122,.42))} /* ========================================================================== 24.09.2026, owner: (1) «Дивитися» in the style of the extension's «Програти корисне»; (2) the ingot in the material of the plan plate shown after a subscription (.paid__name — the /pricing metal, lit by a wash), but its own object: a cast slab with thickness, an engraved inner frame and the number struck into it; (3) value-map bars in the VIDEO's metal, as in the extension's panel. ========================================================================== */ /* (3) the extension's silver and copper recipes, verbatim, switched by data-metal */ .blog-body .bx .vmap[data-metal="silver"] { --m-fine: var(--mxg-fine); --m-emb: var(--mxg-emb); --m-horiz: linear-gradient(90deg, rgba(60,64,80,.35) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 72%, rgba(52,56,70,.4) 93%); --m-ramp: linear-gradient(180deg, #8b8b91 0%, #e4e5e9 5%, #f3f5f7 12%, #f6f9f8 20%, #eceef2 30%, #c9ccd4 40%, #a6a8b5 50%, #969ba5 60%, #91949e 70%, #9fa2ac 80%, #a6a9b3 90%, #62626b 100%); --m-ramp-sm: linear-gradient(180deg, #dcdde2 0%, #f4f6f7 22%, #c9ccd4 50%, #92959f 74%, #a6a9b3 100%); --m-bevel-hi: rgba(255,255,255,.92); --m-bevel-lo: rgba(38,40,50,.6); --m-bevel-hi-w: rgba(255,255,255,.8); --m-bevel-lo-w: rgba(38,40,50,.5); --m-glow: rgba(215,228,255,.4); --m-peak-line: rgba(240,246,255,.92); --m-peak-dot: #eef2f8; --m-num: linear-gradient(180deg, #f8fafb 15%, #c9ccd4 55%, #8f95a1 100%); --m-halo: 0 0 8px rgba(210,224,245,.20); --m-halo-mini: 0 0 4px rgba(210,224,245,.18); --m-halo-mini-peak: 0 0 6px rgba(210,224,245,.24); } .blog-body .bx .vmap[data-metal="copper"] { --m-fine: var(--mxc-fine); --m-emb: var(--mxc-emb); --m-horiz: linear-gradient(90deg, rgba(50,22,8,.4) 0%, rgba(255,190,150,0) 22%, rgba(255,205,170,.08) 50%, rgba(255,205,170,0) 70%, rgba(45,20,8,.42) 94%); --m-ramp: linear-gradient(180deg, #6b4227 0%, #d2997c 5%, #cb8f6d 12%, #a26749 20%, #ac7153 30%, #935a3b 40%, #8c5639 50%, #8c573e 60%, #7e4b31 70%, #79442d 80%, #ad785c 90%, #836049 100%); --m-ramp-sm: linear-gradient(180deg, #c08a68 0%, #a76b4a 26%, #8c5639 54%, #7c4830 84%, #a1735a 100%); --m-bevel-hi: rgba(240,182,142,.7); --m-bevel-lo: rgba(38,18,8,.6); --m-bevel-hi-w: rgba(240,182,142,.55); --m-bevel-lo-w: rgba(38,18,8,.5); --m-glow: rgba(226,140,92,.3); --m-peak-line: rgba(240,190,150,.85); --m-peak-dot: #d99a72; --m-num: linear-gradient(180deg, #eab894 15%, #c08556 55%, #8c5639 100%); --m-halo: 0 0 7px rgba(226,140,92,.16); --m-halo-mini: 0 0 4px rgba(226,140,92,.14); --m-halo-mini-peak: 0 0 5px rgba(226,140,92,.20); } /* (1) the watch button = .gx-cut, verbatim material and states */ .blog-body .bx .wbtn{ --cut-ink:#2e1a05; position:relative;display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:8px 24px 8px 10px;border:0;border-radius:999px;cursor:pointer; overflow:hidden;isolation:isolate;font:700 17px/1.15 var(--display);letter-spacing:-.008em;color:var(--cut-ink);-webkit-tap-highlight-color:transparent; background: linear-gradient(115deg, rgba(255,244,205,0) 18%, rgba(255,244,205,.30) 38%, rgba(255,244,205,.36) 46%, rgba(255,244,205,0) 68%), linear-gradient(180deg, #e0ad38 0%, #cb9224 55%, #b8801c 100%); box-shadow:inset 0 1px 0 rgba(255,240,200,.75), inset 0 -1px 0 rgba(90,55,0,.55), inset 0 0 0 1px rgba(110,70,0,.36), 0 10px 24px -8px rgba(0,0,0,.65), 0 0 22px rgba(224,173,56,.20); transition:transform .14s ease, filter .14s ease, box-shadow .18s ease} .blog-body .bx .wbtn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background:url("data:image/svg+xml;utf8,"), linear-gradient(180deg, rgba(255,240,200,.34) 0%, rgba(255,240,200,0) 22%, rgba(60,30,0,0) 70%, rgba(60,30,0,.26) 100%); background-blend-mode:soft-light, normal} .blog-body .bx .wbtn:hover{filter:brightness(1.05);transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,240,200,.9), inset 0 -1px 0 rgba(90,55,0,.55), inset 0 0 0 1px rgba(110,70,0,.36), 0 12px 26px -8px rgba(0,0,0,.7), 0 0 32px rgba(235,185,70,.38)} .blog-body .bx .wbtn:active{filter:brightness(.94);transform:translateY(1px); box-shadow:inset 0 3px 7px rgba(90,55,0,.48), inset 0 -1px 0 rgba(255,240,200,.55), inset 0 0 0 1px rgba(110,70,0,.4)} .blog-body .bx .wbtn:focus-visible{outline:2px solid #ffd77a;outline-offset:3px} .blog-body .bx .wbtn__ic{display:flex;align-items:center;justify-content:center;flex:none;position:relative;z-index:1;width:36px;height:36px;border-radius:50%; background:radial-gradient(circle at 50% 35%, #e5b445, #b47c1c 84%); box-shadow:inset 0 2px 4px rgba(90,55,0,.42), inset 0 -1px 0 rgba(255,236,190,.55), 0 1px 0 rgba(255,236,190,.45)} .blog-body .bx .wbtn__ic svg{width:13px;height:13px;display:block;fill:var(--cut-ink);margin-left:2px} .blog-body .bx .wbtn__lb{position:relative;z-index:1;white-space:nowrap;text-shadow:0 1px 0 rgba(255,236,190,.42)} @media (prefers-reduced-motion:reduce){.blog-body .bx .wbtn,.blog-body .bx .wbtn:hover,.blog-body .bx .wbtn:active{transition:none;transform:none}} /* (2) THE INGOT — plate material (/pricing metal under a light wash, stamped dark ink), cast as a slab: a darker lip under it gives it thickness, an engraved inner frame and the number struck in. The plate is flat and says a plan's NAME; the ingot is thick and says a SCORE. */ .blog-body .bx .ingot{--pl-mid:#C9A227;--pl-base:#7A5F16;--pl-ink:#171002;--pl-tex:url(../img/metal/gold.webp);--pl-lift:.34;--pl-lift2:.22;--pl-lip:#6b4f10} .blog-body .bx .ingot--ag{--pl-mid:#9AA3AE;--pl-base:#4E5661;--pl-ink:#0A0C0F;--pl-tex:url(../img/metal/silver.webp);--pl-lip:#3f4650} .blog-body .bx .ingot--cu{--pl-mid:#B5683A;--pl-base:#6E3F22;--pl-ink:#160A03;--pl-tex:url(../img/metal/copper.webp);--pl-lift:.46;--pl-lift2:.34;--pl-lip:#4f2c16} .blog-body .bx .ingot,.blog-body .bx .ingot.tx-gold,.blog-body .bx .ingot.tx-silver,.blog-body .bx .ingot.tx-copper{ border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,var(--pl-lift)), rgba(255,255,255,var(--pl-lift2)) 55%, rgba(255,255,255,calc(var(--pl-lift2) - .04))), var(--pl-tex) center / 420px auto, var(--pl-mid); background-blend-mode:normal; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.45), 0 4px 0 var(--pl-lip), 0 5px 0 rgba(0,0,0,.55), 0 16px 28px -8px rgba(0,0,0,.7), 0 10px 30px -14px color-mix(in srgb, var(--pl-base) 90%, transparent)} .blog-body .bx .ingot::before{background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 34%,transparent 62%,rgba(255,255,255,.10) 76%,transparent 90%)} .blog-body .bx .ingot::after{inset:9%;border-radius:6px;border:1px solid rgba(0,0,0,.22);box-shadow:inset 0 1px 1px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.35)} .blog-body .bx .ingot b,.blog-body .bx .ingot--au b,.blog-body .bx .ingot--ag b,.blog-body .bx .ingot--cu b{color:var(--pl-ink);text-shadow:0 1px 0 rgba(255,255,255,.34), 0 -1px 0 rgba(0,0,0,.28)} .blog-body .bx .ingot--sm{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.45), 0 3px 0 var(--pl-lip), 0 4px 0 rgba(0,0,0,.5), 0 10px 18px -8px rgba(0,0,0,.7)} .blog-body .bx .ingot--xs{box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.4), 0 2px 0 var(--pl-lip), 0 3px 0 rgba(0,0,0,.45)}