/* HEAVEN TCG · shop background pictures ------------------------------------------------------------------ Extracted from hv-ui.css on 2026-08-05. It used to live there, but the customer pages (account, verification, wishes, order, /p/) need the same backdrop as the storefront, and hv-ui.css also carries storefront-only header/toolbar rules that would rearrange those pages. Splitting it means one copy of the presets, shared by everyone. Loaded by: shop-3.js (storefront), the customer pages, and admin/bgui.js for the Command Deck thumbnails. Ids match the list in admin/bgui.js. ------------------------------------------------------------------ */ /* ============================================================ 2 · background pictures #hvBg holds the picture, #hvBgVeil dims it so the cards and the text on top stay readable. Both are set from the Command Deck. ============================================================ */ .hv-bgfill{background-position:50% 50%;background-size:cover;background-repeat:no-repeat} #hvBg,#hvBgVeil{position:fixed;inset:-30px;pointer-events:none;z-index:0} #hvBg{opacity:0;transition:opacity .6s ease,filter .3s ease} /* The veil washes the picture toward the page's own background colour rather than always toward near-black. On the dark themes that is the same result as before; on the light ones (Cream, Peach, Honey...) the old fixed #05060a darkened the backdrop while the theme kept its dark text, which left the logo and section headings all but invisible. --hv-veil stays available as an override. */ #hvBgVeil{background:var(--hv-veil,var(--bg,#05060a));opacity:0;transition:opacity .6s ease} html.hv-bgon #hvBg{opacity:1} /* Light themes keep dark text, and every picture preset is dark, so on those the backdrop drops to a hint - enough to feel like the shop, not enough to swallow the logo and the footer. hv-shell.js sets the class. */ html.hv-bgon.hv-lighttheme #hvBg{opacity:.30} /* the wrap already sits on z-index 1; the footer is the only stray */ html.hv-bgon footer{position:relative;z-index:1} @media (prefers-reduced-motion:reduce){#hvBg,#hvBgVeil{transition:none}} /* ---- the presets. Ids match the list in admin/bgui.js ---- */ .hv-bgfill[data-bg='foil']{background-image: linear-gradient(125deg,rgba(255,64,160,.30) 0%,rgba(255,176,64,.26) 15%,rgba(88,255,208,.22) 33%,rgba(96,168,255,.26) 52%,rgba(196,112,255,.26) 71%,rgba(255,64,160,.30) 88%,rgba(255,176,64,.24) 100%), repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,rgba(255,255,255,0) 2px 10px), radial-gradient(1100px 620px at 72% -12%,rgba(255,255,255,.12),rgba(0,0,0,0) 62%), linear-gradient(#07080b,#0d0e14)} .hv-bgfill[data-bg='gold']{background-image: radial-gradient(2.5px 2.5px at 12% 22%,rgba(255,214,140,.60),rgba(0,0,0,0) 60%), radial-gradient(2px 2px at 78% 16%,rgba(255,214,140,.45),rgba(0,0,0,0) 60%), radial-gradient(3px 3px at 34% 63%,rgba(255,224,168,.42),rgba(0,0,0,0) 60%), radial-gradient(2px 2px at 63% 82%,rgba(255,214,140,.40),rgba(0,0,0,0) 60%), radial-gradient(2.5px 2.5px at 88% 58%,rgba(255,224,168,.38),rgba(0,0,0,0) 60%), radial-gradient(900px 520px at 18% -6%,rgba(232,163,77,.22),rgba(0,0,0,0) 62%), radial-gradient(760px 480px at 92% 108%,rgba(198,124,52,.20),rgba(0,0,0,0) 62%), linear-gradient(#0d0a07,#191108)} .hv-bgfill[data-bg='stars']{background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'260'%20height%3D'260'%20viewBox%3D'0%200%20260%20260'%3E%0A%3Cg%20fill%3D'%23ffffff'%3E%0A%3Ccircle%20cx%3D'14'%20cy%3D'22'%20r%3D'1.5'%20opacity%3D'.85'%2F%3E%3Ccircle%20cx%3D'58'%20cy%3D'9'%20r%3D'1'%20opacity%3D'.55'%2F%3E%3Ccircle%20cx%3D'97'%20cy%3D'41'%20r%3D'1.7'%20opacity%3D'.9'%2F%3E%0A%3Ccircle%20cx%3D'140'%20cy%3D'17'%20r%3D'1'%20opacity%3D'.5'%2F%3E%3Ccircle%20cx%3D'186'%20cy%3D'34'%20r%3D'1.4'%20opacity%3D'.75'%2F%3E%3Ccircle%20cx%3D'230'%20cy%3D'12'%20r%3D'1'%20opacity%3D'.5'%2F%3E%0A%3Ccircle%20cx%3D'33'%20cy%3D'72'%20r%3D'1'%20opacity%3D'.5'%2F%3E%3Ccircle%20cx%3D'75'%20cy%3D'96'%20r%3D'1.6'%20opacity%3D'.85'%2F%3E%3Ccircle%20cx%3D'118'%20cy%3D'78'%20r%3D'1'%20opacity%3D'.45'%2F%3E%0A%3Ccircle%20cx%3D'163'%20cy%3D'104'%20r%3D'1.3'%20opacity%3D'.7'%2F%3E%3Ccircle%20cx%3D'209'%20cy%3D'84'%20r%3D'1'%20opacity%3D'.5'%2F%3E%3Ccircle%20cx%3D'247'%20cy%3D'108'%20r%3D'1.6'%20opacity%3D'.8'%2F%3E%0A%3Ccircle%20cx%3D'20'%20cy%3D'131'%20r%3D'1.4'%20opacity%3D'.75'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'158'%20r%3D'1'%20opacity%3D'.5'%2F%3E%3Ccircle%20cx%3D'104'%20cy%3D'137'%20r%3D'1'%20opacity%3D'.45'%2F%3E%0A%3Ccircle%20cx%3D'147'%20cy%3D'166'%20r%3D'1.8'%20opacity%3D'.9'%2F%3E%3Ccircle%20cx%3D'192'%20cy%3D'143'%20r%3D'1'%20opacity%3D'.5'%2F%3E%3Ccircle%20cx%3D'236'%20cy%3D'170'%20r%3D'1.2'%20opacity%3D'.65'%2F%3E%0A%3Ccircle%20cx%3D'11'%20cy%3D'198'%20r%3D'1'%20opacity%3D'.5'%2F%3E%3Ccircle%20cx%3D'49'%20cy%3D'224'%20r%3D'1.5'%20opacity%3D'.8'%2F%3E%3Ccircle%20cx%3D'89'%20cy%3D'204'%20r%3D'1'%20opacity%3D'.45'%2F%3E%0A%3Ccircle%20cx%3D'131'%20cy%3D'236'%20r%3D'1.1'%20opacity%3D'.6'%2F%3E%3Ccircle%20cx%3D'175'%20cy%3D'212'%20r%3D'1'%20opacity%3D'.5'%2F%3E%3Ccircle%20cx%3D'218'%20cy%3D'242'%20r%3D'1.6'%20opacity%3D'.85'%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20stroke%3D'%23ffffff'%20stroke-width%3D'.7'%20opacity%3D'.35'%3E%0A%3Cpath%20d%3D'M97%2033%20v16%20M89%2041%20h16'%2F%3E%3Cpath%20d%3D'M147%20158%20v16%20M139%20166%20h16'%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E"), radial-gradient(820px 620px at 78% 8%,rgba(96,124,255,.20),rgba(0,0,0,0) 62%), radial-gradient(720px 520px at 8% 92%,rgba(176,96,255,.18),rgba(0,0,0,0) 62%), linear-gradient(#04050b,#090b14); background-size:260px 260px,auto,auto,auto; background-repeat:repeat,no-repeat,no-repeat,no-repeat} .hv-bgfill[data-bg='cards']{background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'300'%20viewBox%3D'0%200%20240%20300'%3E%0A%3Cg%20fill%3D'none'%20stroke%3D'%23e8a34d'%20stroke-opacity%3D'.16'%20stroke-width%3D'2'%3E%0A%3Cg%20transform%3D'rotate(-9%2060%2070)'%3E%3Crect%20x%3D'24'%20y%3D'22'%20width%3D'72'%20height%3D'102'%20rx%3D'8'%2F%3E%3Crect%20x%3D'34'%20y%3D'32'%20width%3D'52'%20height%3D'82'%20rx%3D'5'%20stroke-opacity%3D'.10'%2F%3E%3C%2Fg%3E%0A%3Cg%20transform%3D'rotate(7%20176%2096)'%3E%3Crect%20x%3D'140'%20y%3D'48'%20width%3D'72'%20height%3D'102'%20rx%3D'8'%2F%3E%3Crect%20x%3D'150'%20y%3D'58'%20width%3D'52'%20height%3D'82'%20rx%3D'5'%20stroke-opacity%3D'.10'%2F%3E%3C%2Fg%3E%0A%3Cg%20transform%3D'rotate(14%2068%20226)'%3E%3Crect%20x%3D'32'%20y%3D'176'%20width%3D'72'%20height%3D'102'%20rx%3D'8'%2F%3E%3Crect%20x%3D'42'%20y%3D'186'%20width%3D'52'%20height%3D'82'%20rx%3D'5'%20stroke-opacity%3D'.10'%2F%3E%3C%2Fg%3E%0A%3Cg%20transform%3D'rotate(-5%20186%20246)'%3E%3Crect%20x%3D'150'%20y%3D'196'%20width%3D'72'%20height%3D'102'%20rx%3D'8'%2F%3E%3Crect%20x%3D'160'%20y%3D'206'%20width%3D'52'%20height%3D'82'%20rx%3D'5'%20stroke-opacity%3D'.10'%2F%3E%3C%2Fg%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E"), radial-gradient(1000px 600px at 70% -8%,rgba(232,163,77,.16),rgba(0,0,0,0) 60%), linear-gradient(#0a0806,#140f0a); background-size:240px 300px,auto,auto; background-repeat:repeat,no-repeat,no-repeat} .hv-bgfill[data-bg='hex']{background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'56'%20height%3D'97'%20viewBox%3D'0%200%2056%2097'%3E%0A%3Cg%20fill%3D'none'%20stroke%3D'%23e8a34d'%20stroke-opacity%3D'.13'%20stroke-width%3D'1.3'%3E%0A%3Cpath%20d%3D'M28%201%20L54%2016%20L54%2046%20L28%2061%20L2%2046%20L2%2016%20Z'%2F%3E%0A%3Cpath%20d%3D'M28%2049%20L54%2064%20L54%2094%20L28%20109%20L2%2094%20L2%2064%20Z'%2F%3E%0A%3Cpath%20d%3D'M0%20-15%20L26%200%20L26%2030%20L0%2045%20L-26%2030%20L-26%200%20Z'%2F%3E%0A%3Cpath%20d%3D'M56%20-15%20L82%200%20L82%2030%20L56%2045%20L30%2030%20L30%200%20Z'%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E"), radial-gradient(900px 560px at 24% 0%,rgba(232,163,77,.14),rgba(0,0,0,0) 62%), linear-gradient(#08090c,#101218); background-size:56px 97px,auto,auto; background-repeat:repeat,no-repeat,no-repeat} .hv-bgfill[data-bg='arena']{background-image: radial-gradient(620px 300px at 50% -6%,rgba(255,242,214,.20),rgba(0,0,0,0) 70%), repeating-linear-gradient(90deg,rgba(232,163,77,.07) 0 1px,rgba(0,0,0,0) 1px 68px), repeating-linear-gradient(0deg,rgba(232,163,77,.05) 0 1px,rgba(0,0,0,0) 1px 68px), radial-gradient(1000px 460px at 50% 116%,rgba(232,163,77,.20),rgba(0,0,0,0) 64%), linear-gradient(#07070a,#130e11)} .hv-bgfill[data-bg='paper']{background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'140'%20height%3D'140'%20viewBox%3D'0%200%20140%20140'%3E%0A%3Cg%20fill%3D'%237a5a34'%20fill-opacity%3D'.07'%3E%0A%3Ccircle%20cx%3D'12'%20cy%3D'18'%20r%3D'1.2'%2F%3E%3Ccircle%20cx%3D'53'%20cy%3D'7'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'96'%20cy%3D'27'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'131'%20cy%3D'12'%20r%3D'1'%2F%3E%0A%3Ccircle%20cx%3D'29'%20cy%3D'58'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'70'%20cy%3D'48'%20r%3D'1.2'%2F%3E%3Ccircle%20cx%3D'112'%20cy%3D'66'%20r%3D'1'%2F%3E%0A%3Ccircle%20cx%3D'9'%20cy%3D'94'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'47'%20cy%3D'108'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'88'%20cy%3D'92'%20r%3D'1.2'%2F%3E%3Ccircle%20cx%3D'126'%20cy%3D'113'%20r%3D'1'%2F%3E%0A%3Ccircle%20cx%3D'34'%20cy%3D'132'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'75'%20cy%3D'127'%20r%3D'1.1'%2F%3E%3Ccircle%20cx%3D'117'%20cy%3D'136'%20r%3D'1'%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20stroke%3D'%237a5a34'%20stroke-opacity%3D'.05'%20stroke-width%3D'1'%3E%0A%3Cpath%20d%3D'M0%2035%20h140'%20%2F%3E%3Cpath%20d%3D'M0%20105%20h140'%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E"), radial-gradient(900px 560px at 80% -8%,rgba(201,142,74,.16),rgba(0,0,0,0) 60%), linear-gradient(#f7f1e6,#efe3d0); background-size:140px 140px,auto,auto; background-repeat:repeat,no-repeat,no-repeat} /* ---- thumbnails, used by the Command Deck ---- */ .hv-bgthumb{display:block;width:100%;height:58px;border-radius:10px;border:1px solid rgba(255,255,255,.10)}