/* HEAVEN TCG · shared shell for the customer pages ------------------------------------------------------------------ account.php, confirm.php (verification), zelje.php and /p/ used to sit on a flat panel while the storefront had a card backdrop, a faint grid and the customer's own colour theme. This gives them the same room to stand in. hv-shell.js adds .hv-shell to and rebuilds the #hvBg / #hvBgVeil layers; the background presets themselves live in hv-bg.css, shared with the storefront so there is only ever one copy of them. ------------------------------------------------------------------ */ /* ---- 1 · the storefront's faint 40px grid ---- */ html.hv-shell body::before{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(var(--grid,rgba(232,163,77,.025)) 1px,transparent 1px), linear-gradient(90deg,var(--grid,rgba(232,163,77,.025)) 1px,transparent 1px); background-size:40px 40px} /* ---- 2 · keep the page itself above the backdrop ---- */ html.hv-shell body>.wrap, html.hv-shell body>header, html.hv-shell body>main, html.hv-shell body>footer{position:relative;z-index:1} /* ---- 3 · the panels settle in instead of snapping in ---- */ @keyframes hvShellRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} html.hv-shell .card, html.hv-shell .steps, html.hv-shell .wish{animation:hvShellRise .5s cubic-bezier(.22,.7,.3,1) both} html.hv-shell .card:nth-of-type(2){animation-delay:.07s} html.hv-shell .card:nth-of-type(3){animation-delay:.14s} html.hv-shell .card:nth-of-type(4){animation-delay:.21s} /* ---- 4 · the brand mark picks up the storefront glow ---- */ html.hv-shell .brand{text-shadow:0 0 26px var(--glow,rgba(232,163,77,.26))} /* ---- 5 · controls answer to the touch, like the shop cards do ---- */ html.hv-shell .btn, html.hv-shell .tabs button, html.hv-shell .pill{transition:transform .15s ease,background .15s,border-color .15s,color .15s,box-shadow .15s} html.hv-shell .btn:hover:not([disabled]), html.hv-shell .tabs button:hover{transform:translateY(-1px)} html.hv-shell .btn:active:not([disabled]), html.hv-shell .tabs button:active{transform:translateY(0)} html.hv-shell .tabs button.on{box-shadow:0 6px 18px rgba(0,0,0,.34)} /* ---- 6 · a focus ring people can actually see ---- */ html.hv-shell .btn:focus-visible, html.hv-shell .tabs button:focus-visible, html.hv-shell input:focus-visible, html.hv-shell select:focus-visible, html.hv-shell textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ---- 7 · an empty shelf should read as a shelf, not as a gap ---- */ html.hv-shell .empty{ border:1px dashed var(--border);border-radius:var(--radius,16px); background:rgba(0,0,0,.14);padding:32px 20px} /* ---- 8 · and none of the movement if the visitor asked for less ---- */ @media (prefers-reduced-motion:reduce){ html.hv-shell .card, html.hv-shell .steps, html.hv-shell .wish{animation:none} html.hv-shell .btn:hover:not([disabled]), html.hv-shell .tabs button:hover{transform:none} }