/* Visual upgrade, 24 September 2026. Unlayered and linked after the base sheets. Presentation only: no markup, route, state or motion contract changes. Every selector carries an `html` prefix so it also outranks the route feature sheets that are appended to after this file. 1. One measure. Topbar, banner, page and footer share a 1240px column, the one the homepage was already authored to. 2. One corner family. Controls 4px, panels 6px, taken from the home desk, replacing the 14-26px pillows on the account pages. 3. Brass that reads as metal: a lit top edge and a pressed state on the primary action, not a flat yellow block. 4. Tabular figures anywhere a price or count sits in a column. */ html { --pvu-measure: 1240px; --pvu-gutter: max(20px, calc((100% - var(--pvu-measure)) / 2)); --pvu-line: rgba(243, 236, 214, .085); --pvu-line-strong: rgba(243, 236, 214, .15); --pvu-panel: #10110e; --pvu-panel-lift: #151612; --pvu-brass: #d9b55c; --pvu-brass-lit: #e9ca7a; --pvu-brass-deep: #b28d3a; --pvu-ink: #16130a; --pvu-text-quiet: #9d9b92; --pvu-r-control: 4px; --pvu-r-panel: 6px; } @media (max-width: 720px) { html { --pvu-gutter: 16px; } } html ::selection { background: rgba(217, 181, 92, .32); color: #fffaf0; } html { scrollbar-color: #34332c #080808; } /* Vault lighting: one faint warm lamp above the fold, fixed so it never bands while scrolling. Kept under 5% so the pages stay matte black. */ html body { background: radial-gradient(90rem 38rem at 62% -12rem, rgba(217, 181, 92, .055), transparent 70%) fixed, #080808; } /* Tabular figures for prices, counts and odds. */ html .price, html .pack-meta, html .pv-entry-tier b, html .pv-showcase-copy b, html .practice-tier strong, html .practice-session-stat, html .practice-dex-trigger b, html .pv-express__label strong, html .practice-progress-summary small, html .pv-provider-hit__copy p { font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- 1. Measure */ @media (min-width: 1081px) { html .shell .topbar { padding-inline: max(28px, calc((100% - var(--pvu-measure)) / 2 - 12px)); } } html .topbar { border-bottom: 1px solid var(--pvu-line); backdrop-filter: saturate(1.1) blur(10px); } /* Catalogue and ledger pages: one column, one left edge. */ html .shell.shell--catalogue .content, html .shell.shell--ledger .content { padding-inline: var(--pvu-gutter); } html .shell.shell--catalogue .content > .page, html .shell.shell--ledger .content > .page { width: 100%; max-width: none; margin-inline: 0; } /* The test/devnet notice: a quiet printed strip, not a slab of olive. */ html .shell .content > .provider-commerce-banner { border: 1px solid rgba(217, 181, 92, .16); border-radius: var(--pvu-r-control); background: linear-gradient(180deg, rgba(217, 181, 92, .06), rgba(217, 181, 92, .025)); color: #cfc8a8; letter-spacing: .01em; } html .shell.shell--landing .content > .provider-commerce-banner { border-width: 0 0 1px; border-radius: 0; } /* Page heads: one scale, one rhythm. */ html .shell .page-head h1, html .shell .progress-head h1 { font-size: clamp(40px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; } html .shell .page-head .eyebrow { margin-bottom: 14px; } html .shell .page-head .page-sub, html .shell .progress-head p { max-width: 68ch; margin-top: 12px; color: var(--pvu-text-quiet); font-size: 15.5px; line-height: 1.55; } html .shell .page-head { padding-top: 28px; margin-bottom: 28px; } html .shell .progress-head { padding-top: 0; } /* ----------------------------------------------------- 2. Panels and cards */ html .shell .gate-panel, html .shell .progress-guest { border-radius: var(--pvu-r-panel); border: 1px solid var(--pvu-line-strong); background: linear-gradient(180deg, rgba(255, 248, 226, .028), transparent 46%), var(--pvu-panel); box-shadow: inset 0 1px 0 rgba(255, 248, 226, .05); } html .shell .gate-panel { padding: 26px 28px; } html .shell .gate-panel--compact { max-width: 860px; } html .shell .gate-panel h2 { font-size: 28px; letter-spacing: -.025em; } html .shell .progress-guest { padding: 32px 32px 30px; } html .shell .progress-guest h2 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -.03em; margin-bottom: 10px; } html .shell .progress-guest p { max-width: 58ch; color: var(--pvu-text-quiet); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; } /* Catalogue pack cards: the art is the event; the card is its mount. */ html .shell .pack-catalog-grid { gap: 16px; } html .shell .pack-card { border-radius: var(--pvu-r-panel); border-color: var(--pvu-line); background: radial-gradient(22rem 16rem at 22% 50%, rgba(255, 248, 226, .035), transparent 70%), var(--pvu-panel); box-shadow: inset 0 1px 0 rgba(255, 248, 226, .04); transition: border-color .18s ease, background-color .18s ease; } html .shell .pack-card:hover, html .shell .pack-card:focus-visible { border-color: rgba(217, 181, 92, .38); } html .shell .pack-card .pack-art img { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)) drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); } html .shell .pack-card .pack-series { color: var(--pvu-text-quiet); font-size: 12px; letter-spacing: .02em; } html .shell .pack-card h2 { letter-spacing: -.02em; } html .shell .pack-showroom > p:last-child { margin-top: 18px; color: var(--pvu-text-quiet); font-size: 13.5px; } /* ------------------------------------------------------------- 3. Controls */ html .shell .gold-button, html .modal .gold-button { border-radius: var(--pvu-r-control); border: 1px solid var(--pvu-brass-deep); background: linear-gradient(180deg, var(--pvu-brass-lit), var(--pvu-brass) 48%, #cfa94f); color: var(--pvu-ink); box-shadow: inset 0 1px 0 rgba(255, 246, 214, .45), 0 1px 0 rgba(0, 0, 0, .6); transition: filter .15s ease, transform .08s ease; } html .shell .gold-button:hover:not(:disabled), html .modal .gold-button:hover:not(:disabled) { filter: brightness(1.06); } html .shell .gold-button:active:not(:disabled), html .modal .gold-button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(60, 44, 10, .35); } html .shell .outline-button { border-radius: var(--pvu-r-control); border-color: var(--pvu-line-strong); background: rgba(255, 248, 226, .025); letter-spacing: 0; transition: border-color .15s ease, background-color .15s ease; } html .shell .outline-button:hover { border-color: rgba(217, 181, 92, .45); background: rgba(217, 181, 92, .05); } html .shell .pv-entry-primary { background: linear-gradient(180deg, var(--pvu-brass-lit), var(--pvu-brass) 50%, #cfa94f); border-color: var(--pvu-brass-deep); box-shadow: inset 0 1px 0 rgba(255, 246, 214, .45), 0 1px 0 rgba(0, 0, 0, .6); } html .shell .pv-entry-primary:active { transform: translateY(1px); } /* Keyboard focus: a brass ring everywhere, offset so it never sits on art. */ html .shell :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--pvu-brass-lit); outline-offset: 2px; } /* -------------------------------------------------------------- Free rips */ /* Desktop only: the phone and landscape rip layouts are tuned separately and stay untouched. The room joins the site column, and both rails start at the stage's top edge instead of floating mid-height. */ @media (min-width: 1081px) { html .shell.shell--rip-simulator .content { padding-inline: var(--pvu-gutter); } html .shell--rip-simulator .practice-rip-page { max-width: none; } html .shell--rip-simulator .practice-toolbar, html .shell--rip-simulator .practice-grail-rush, html .shell--rip-simulator .practice-collection-picker, html .shell--rip-simulator .practice-layout { max-width: none; } html .shell--rip-simulator .practice-room[data-phase="ready"] .practice-tier-rail, html .shell--rip-simulator .practice-room[data-phase="ready"] .practice-progress-rail { align-content: start; } } html .shell--rip-simulator .practice-grail-rush { border-radius: var(--pvu-r-panel); box-shadow: inset 0 0 0 1px rgba(224, 189, 97, .14), inset 0 1px 0 rgba(255, 238, 190, .06); } html .shell--rip-simulator .practice-arena { border-radius: var(--pvu-r-panel); } html .shell--rip-simulator .practice-tier { border-radius: var(--pvu-r-control); } html .shell--rip-simulator .practice-progress-summary { border-radius: var(--pvu-r-panel); border: 1px solid var(--pvu-line); } html .shell--rip-simulator .practice-progress-rail > .practice-progress-actions > button, html .shell--rip-simulator .practice-toolbar-actions > :is(a, button) { border-radius: var(--pvu-r-control); } /* ------------------------------------------------------------------ Topbar */ html .topbar .nav-link { transition: color .15s ease; } html .topbar .nav-link:hover { color: #efeadb; } /* ------------------------------------------------------------------ Footer */ html .site-footer { border-top: 1px solid var(--pvu-line); background: linear-gradient(180deg, #0b0a08, #080808 60%); padding-inline: var(--pvu-gutter); } html .site-footer .site-footer-inner, html .site-footer .site-footer-legal { max-width: none; margin-inline: 0; } html .site-footer .site-footer-col h4 { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: #c9ae68; margin-bottom: 14px; } html .site-footer .site-footer-col a { color: #b9b7ae; transition: color .15s ease; } html .site-footer .site-footer-col a:hover { color: #f3efe2; } html .site-footer .site-footer-legal { border-top-color: var(--pvu-line); color: #7f7d75; } @media (prefers-reduced-motion: reduce) { html .shell .gold-button, html .shell .pack-card, html .shell .outline-button { transition: none; } }