/* * Package Center design tokens + base styles. * Loaded by TikLynx UI for V2 admin pages and by UI.Mobile for the wallet/scanner. * On org-themed surfaces (storefront, Website Builder block), the same components * inherit from the org's WebsiteTheme variables instead of the pc-* tokens below. */ :root { /* V2 dark palette (admin + wallet surfaces) */ --pc-bg: #07110E; --pc-border: #154D39; --pc-panel-a: #103425; --pc-panel-b: #0C2119; --pc-inset: #071A13; --pc-stroke: #235A44; --pc-text: #F5FFF9; --pc-text-muted: #9DB4AA; --pc-green: #14D884; --pc-green-tint: #14D88422; --pc-blue: #64B5FF; --pc-blue-tint: #64B5FF22; --pc-gold: #F4C35E; --pc-gold-tint: #F4C35E22; --pc-red: #FF6D6D; --pc-red-tint: #FF6D6D22; --pc-btn-text-dark: #001B10; /* Type scale (Inter throughout, line-height 1.22) */ --pc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --pc-line: 1.22; } /* * Org-themed surface marker. Apply to a root element on the storefront * (e.g. ) and the same component CSS will * pull from --theme-* tokens supplied by WebsiteTheme. */ .pc-org-themed { --pc-bg: var(--theme-page-bg, #ffffff); --pc-border: var(--theme-border, #e5e7eb); --pc-panel-a: var(--theme-surface-elevated, #f9fafb); --pc-panel-b: var(--theme-surface, #ffffff); --pc-inset: var(--theme-surface-inset, #f3f4f6); --pc-stroke: var(--theme-border, #e5e7eb); --pc-text: var(--theme-text, #111827); --pc-text-muted: var(--theme-text-muted, #6b7280); --pc-green: var(--theme-primary, #14D884); --pc-green-tint: color-mix(in srgb, var(--theme-primary, #14D884) 13%, transparent); --pc-btn-text-dark: var(--theme-on-primary, #001B10); } /* Base shell — full-bleed dark canvas for admin V2 routes. */ .pc-canvas { background: var(--pc-bg); color: var(--pc-text); font-family: var(--pc-font); line-height: var(--pc-line); min-height: 100%; } /* Page-level container used by PcShell. Pixel-for-pixel V2 frame box at 1440. */ .pc-frame { background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 18px; } /* Bare variant — drop the card chrome so the surface reads as a plain page layout (keeps the flex/gap stacking). Used by list/index surfaces. */ .pc-frame--bare { background: transparent; border: 0; border-radius: 0; padding: 0; } /* Headline + sub used at top of every V2 frame. */ .pc-h1 { font-size: 28px; font-weight: 850; color: var(--pc-text); line-height: var(--pc-line); margin: 0; } .pc-sub { font-size: 14px; font-weight: 500; color: var(--pc-text-muted); line-height: var(--pc-line); margin: 0; } /* * Responsive breakpoint utility used by template chooser, axis-card row, and * other "N across" layouts. Per Q11 lock: 5-across >=1440, 4 at 1100-1440, * 3 at 900-1100, 2 at 700-900, 1 <700. Implemented via grid + media queries. */ .pc-row-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1439px) { .pc-row-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1099px) { .pc-row-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 899px) { .pc-row-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 699px) { .pc-row-5 { grid-template-columns: 1fr; } }