/* Panda's Box brand kit, applied over the base page styles. * * From the brand guidelines: Londrina Solid for display/headings, * Montserrat for body. Palette is the approved set — coral #fc7059 * primary, with light coral, yellow, amber, light blue, blue and red. * * Loaded LAST in so it wins over each page's inline styles without * needing every page rewritten. * * One deliberate departure: the guidelines have no green, but this is a * status tool where green-means-buyable is the strongest convention there * is. Green is used ONLY for state, never as a brand surface, and matches * the green already used across the returns portal. */ @import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300;400&family=Montserrat:wght@400;500;600;700;800&display=swap'); :root { --coral: #fc7059; /* primary */ --coral-lite: #f9b1a5; --yellow: #fed032; --amber: #ffa800; --blue-lite: #bcdbf0; --blue: #2f91d4; --bad: #ca2c2c; /* brand red */ --warn: #b26a00; --good: #2e7d32; /* state only — see note above */ --ink: #1a1a1a; --muted: #5c5c5c; --line: #f0e4ce; --cream: #fef6e4; } body { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; } /* Display face for the brand name, page titles and section headings. Londrina Solid runs small and tight, so sizes are nudged up and the letter-spacing opened slightly for legibility on screen. */ header h1, .pbx-logo, .font-display, h1, h2 { font-family: 'Londrina Solid', 'Montserrat', system-ui, sans-serif; font-weight: 400; letter-spacing: .02em; } header h1, .pbx-logo { font-size: 24px; line-height: 1.1; } h2 { font-size: 20px; } /* Numbers stay in Montserrat — a display face makes figures harder to compare at a glance, which is the entire job of the metric cards. */ .card .value, .value, .metric, td, th, input, button, .num { font-family: 'Montserrat', system-ui, sans-serif; } header { background: var(--coral); } .pill.good, .state-healthy { background: #e8f5e9; color: var(--good); } .pill.bad, .state-dead_listing { background: #fdeceb; color: var(--bad); } .pill.warn { background: #fff3d6; color: var(--warn); } .pill.info { background: var(--blue-lite); color: #14506f; } a { color: var(--bad); } header a, header nav a { color: #fff; }