/* * VizPass site palette — the vpass colours, disciplined. * --------------------------------------------------------------------------- * Loaded AFTER app.css on the marketing site only, so it re-points the compiled * Tailwind brand classes without rebuilding Tailwind (which does not run on * this host). The application keeps its own look; only the site changes. * * Taken from vpass.beyondboxai.com by usage frequency, then cut down. That page * carries 114 distinct hex values across 16 corner radii, which is what makes * it read as busy — nothing is quite consistent with anything else. These are * the fourteen that were actually doing the work: * * ink #243244 used 64x — the identity colour, and the anchor here * deep #16243d used 9x — headers, the deepest ground * teal #0F6E56 — PRIMARY: the dark teal green (owner decision, * 2026-08-25; the logo was recoloured to match) * blue #2b8fd6 used 36x — secondary, links and quieter emphasis * green #12b76a used 15x — semantic only: present, inside, approved * amber #f6c453 used 4x — semantic only: waiting on somebody * red #d64545 used 2x — semantic only: overdue, blocked * * The rule that keeps it calm: blue, green and amber never decorate. If a * thing is green it means somebody is inside; if it is amber somebody is * waiting. Colour carries meaning or it is teal. * * Neutrals are the cool blue-greys from the same page, not true greys — that * tint is most of why the two sites feel related. */ :root { --vp-ink: #243244; --vp-deep: #16243d; --vp-teal: #0F6E56; /* dark teal green — the owner's primary */ --vp-teal-d: #0A5240; /* hover: deeper, so the press reads */ --vp-teal-x: #0f6e56; --vp-blue: #2b8fd6; --vp-green: #12b76a; --vp-amber: #f6c453; --vp-red: #d64545; --vp-n-50: #f4f8fc; --vp-n-100: #e7edf6; --vp-n-200: #dbe6f4; --vp-n-300: #c3d3e6; --vp-n-400: #9aa7b8; --vp-n-500: #6b7280; } /* ---- brand ramp: teal primary, anchored on the vpass navy ---------------- */ .site-shell .bg-brand, .site-shell .bg-brand-600 { background-color: var(--vp-teal) !important; } .site-shell .bg-brand-700 { background-color: var(--vp-teal-d) !important; } .site-shell .bg-brand-50 { background-color: #E9F4F0 !important; } .site-shell .bg-brand\/10 { background-color: rgba(15,110,86,.10) !important; } .site-shell .text-brand, .site-shell .text-brand-600 { color: var(--vp-teal) !important; } .site-shell .text-brand-700, .site-shell .text-brand-800 { color: var(--vp-teal-x) !important; } .site-shell .text-brand-300 { color: #6cc9c0 !important; } .site-shell .border-brand { border-color: var(--vp-teal) !important; } .site-shell .hover\:border-brand:hover { border-color: var(--vp-teal) !important; } /* ---- neutrals: cool blue-grey, not true grey ----------------------------- */ .site-shell .bg-graphite-50 { background-color: var(--vp-n-50) !important; } .site-shell .bg-graphite-100 { background-color: var(--vp-n-100) !important; } .site-shell .bg-graphite-200 { background-color: var(--vp-n-200) !important; } .site-shell .bg-graphite-800, .site-shell .bg-graphite-900 { background-color: var(--vp-ink) !important; } .site-shell .border-graphite-100 { border-color: var(--vp-n-100) !important; } .site-shell .border-graphite-200 { border-color: var(--vp-n-200) !important; } .site-shell .border-graphite-300 { border-color: var(--vp-n-300) !important; } .site-shell .text-graphite-300 { color: var(--vp-n-300) !important; } .site-shell .text-graphite-400 { color: var(--vp-n-400) !important; } .site-shell .text-graphite-500 { color: var(--vp-n-500) !important; } .site-shell .text-graphite-600 { color: #55627a !important; } .site-shell .text-graphite-700, .site-shell .text-graphite-800, .site-shell .text-graphite-900 { color: var(--vp-ink) !important; } /* ---- semantic: these three mean something, so they never decorate -------- */ .site-shell .text-emerald-400, .site-shell .text-emerald-600, .site-shell .text-emerald-700 { color: var(--vp-green) !important; } .site-shell .bg-emerald-50 { background-color: #e7f8ef !important; } .site-shell .bg-emerald-400, .site-shell .bg-emerald-600 { background-color: var(--vp-green) !important; } .site-shell .text-amber-600, .site-shell .text-amber-300 { color: #b98514 !important; } .site-shell .bg-amber-50 { background-color: #fdf6e4 !important; } .site-shell .bg-amber-500 { background-color: var(--vp-amber) !important; } .site-shell .text-red-600 { color: var(--vp-red) !important; } .site-shell .bg-red-50\/30, .site-shell .bg-red-50 { background-color: #fdf0f0 !important; } .site-shell .bg-red-100 { background-color: #f8dede !important; } .site-shell .text-red-600 { color: var(--vp-red) !important; } .site-shell .border-red-200 { border-color: #f0c9c9 !important; } /* ---- "Sound familiar?" : on the brand teal ------------------------------ These classes are used nowhere else on the site, so the overrides land on these three cards only. The dashed border stays — that is what reads as "provisional, not how it should be". */ .site-shell .border-red-200 { border-color: #9AD9D5 !important; } .site-shell .hover\:border-red-300:hover { border-color: var(--vp-teal) !important; } .site-shell .bg-red-50\/30 { background-color: #EFFBFA !important; } .site-shell .bg-red-100 { background-color: #D4F1EF !important; } .site-shell .text-red-600 { color: var(--vp-teal-x) !important; } /* ---- the hero and the dark bands ---------------------------------------- */ .site-shell .vp-hero { background: linear-gradient(135deg, #16243d 0%, #243244 42%, #17605c 74%, var(--vp-teal) 100%) !important; } /* The hero submit gets the same treatment as the inputs beside it: white, dark-teal text. On the dark hero a dark button is a button-shaped shadow — this rule once painted exactly that over the page's own white style, and the text disappeared into it. */ .site-shell .kb-hero-form button { background: #fff !important; color: var(--vp-teal) !important; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45) !important; } .site-shell .kb-hero-form button:hover { background: #F0FAF7 !important; }