/* ========================================================================= Veygo Brand 2026 — legacy compatibility layer Loads on pages that still render Gutenberg/ACF block content, i.e. anything that is not a brand26-native template. Its only job is to stop the old brand showing through: it remaps the legacy palette that is baked into the block markup as Tailwind utilities, and hands the type over to the 2026 faces. It does NOT restyle layout. The blocks keep their structure; they are on the list to be rebuilt properly later. Why overrides rather than a rebuild of the palette: the Tailwind build tooling is not in this checkout (no package.json / tailwind.config.js, only the committed dist/). The colours can only be corrected downstream. Load order matters. The Vite bundle is forced last in by vey_vite_print_style_last(), so these rules need !important to win. Every one is a colour or font swap, so the bluntness is contained. The old values, as actually built in dist/assets/app-*.css: #005465 deep-green, and text-charcoal (see the note below) #111111 bg-charcoal / border-charcoal #00DCCD turquoise #364344 body-primary #30C6E2 learner-primary ========================================================================= */ /* ------------------------------------------------------------------------- 1. Type The old body class carried `font-default` (Metropolis). .b26-body now sets Momo Trust Sans, but block markup applies `font-header` and `font-default` directly in places, so those need redirecting too. ---------------------------------------------------------------------- */ .b26-body .font-default, .b26-body .font-body { font-family: var(--b26-sans) !important; } .b26-body .font-header { font-family: var(--b26-display) !important; font-weight: 400 !important; } /* Legacy headings inside block content. Momo Trust Display has no bold, so leaving font-weight:700 on it triggers synthetic bolding, which looks muddy at large sizes. */ .b26-page--legacy h1, .b26-page--legacy h2, .b26-page--legacy h3, .b26-page--legacy h4 { font-family: var(--b26-display) !important; font-weight: 400 !important; letter-spacing: -0.01em; } /* ------------------------------------------------------------------------- 2. Deep green NOTE: `text-charcoal` is NOT charcoal. Tailwind emits #111111, but src/css/app.css:29 hand-overrides it to #005465 later in the same bundle, so all 26 uses render deep green. It therefore maps with text-deep-green, NOT with bg-charcoal / border-charcoal, which really are #111111. ---------------------------------------------------------------------- */ .b26-body .text-deep-green, .b26-body .text-charcoal { color: var(--b26-deep-green) !important; } .b26-body .bg-deep-green, .b26-body .bg-charcoal { background-color: var(--b26-deep-green) !important; } .b26-body .border-deep-green, .b26-body .border-charcoal { border-color: var(--b26-deep-green) !important; } .b26-body .outline-deep-green { outline-color: var(--b26-deep-green) !important; } .b26-body .fill-deep-green, .b26-body .fill-deep-green * { fill: var(--b26-deep-green) !important; } /* ------------------------------------------------------------------------- 3. Turquoise The biggest contrast risk in the rollout. Old turquoise #00DCCD is a mid tone that white text sat on legibly. Veygo Turquoise #75FBE5 is far lighter, so anything white on turquoise becomes unreadable. Both cases are forced back to Deep Green here rather than left to chance. ---------------------------------------------------------------------- */ .b26-body .bg-turquoise { background-color: var(--b26-turquoise) !important; color: var(--b26-deep-green) !important; } .b26-body .bg-turquoise .text-white, .b26-body .bg-turquoise .fill-white { color: var(--b26-deep-green) !important; } .b26-body .bg-turquoise .fill-white, .b26-body .bg-turquoise .fill-white * { fill: var(--b26-deep-green) !important; } /* * Turquoise as a FOREGROUND stays turquoise. * * An earlier version of this file downgraded `text-turquoise` to Deep Green on * the theory that turquoise fails contrast on white. That was wrong about the * actual usage: every occurrence is a light-on-dark accent — the outline CTA * on the image heroes (`border-turquoise text-turquoise`) and the rule-and- * label pattern in multi-col-list, both of which sit on dark. Downgrading them * made the hero's secondary button almost invisible. */ .b26-body .text-turquoise, .b26-body .hover\:text-turquoise:hover { color: var(--b26-turquoise) !important; } .b26-body .border-turquoise, .b26-body .hover\:border-turquoise:hover, .b26-body .focus\:border-turquoise:focus { border-color: var(--b26-turquoise) !important; } /* Filled state of those outline buttons: turquoise ground, Deep Green label. */ .b26-body .hover\:bg-turquoise:hover, .b26-body .focus\:bg-turquoise:focus { background-color: var(--b26-turquoise) !important; color: var(--b26-deep-green) !important; } .b26-body .fill-turquoise, .b26-body .fill-turquoise * { fill: var(--b26-turquoise) !important; } /* ------------------------------------------------------------------------- 4. Body text and the learner sub-palette ---------------------------------------------------------------------- */ .b26-body .text-body-primary { color: var(--b26-green-70) !important; } .b26-body .text-body-secondary { color: var(--b26-green-70) !important; } .b26-body .text-learner-primary { color: var(--b26-deep-green) !important; } .b26-body .bg-learner-primary, .b26-body .bg-learner-primary-10, .b26-body .bg-learner-primary-20 { background-color: var(--b26-mint-white) !important; } .b26-body .border-learner-primary-20, .b26-body .border-learner-primary-40 { border-color: var(--b26-green-12) !important; } .b26-body .text-learner-primary-40 { color: var(--b26-green-70) !important; } /* ------------------------------------------------------------------------- 5. Surfaces The old pages sat on white; the 2026 ground colour is Mint White. That is set on .b26-body and deliberately NOT repeated on .b26-page--legacy. Painting the ground colour on the
broke every hero on the legacy pages. The ACF hero blocks put their background image on a div with `z-[-1]`, and nothing between it and the root creates a stacking context, so the image paints in the negative-z layer. A background on an ancestor block is painted *after* that layer, so it covered every hero image and left only the gradient scrims and the `bg-[#005465]` fallback showing. That fallback is the one thing worth correcting here. Five live blocks hardcode `bg-[#005465]` (old deep-green) as the colour behind a hero image, so it shows through transparent artwork and while the image loads. The arbitrary Tailwind class is baked into the compiled bundle and the bundle is forced last in , so this needs !important to land. ---------------------------------------------------------------------- */ .b26-body .bg-\[\#005465\] { background-color: var(--b26-deep-green) !important; } /* ------------------------------------------------------------------------- 6. Buttons Legacy CTAs are pill-shaped already. This only corrects their colours and softens the hover, so they read as the same family as .b26-btn without restyling geometry. ---------------------------------------------------------------------- */ .b26-page--legacy a.bg-deep-green:hover, .b26-page--legacy button.bg-deep-green:hover { background-color: transparent !important; color: var(--b26-deep-green) !important; } /* ------------------------------------------------------------------------- 6b. Interactive states THE IMPORTANT SECTION. Everything above uses !important, because the Vite bundle is forced last in and a plain rule would lose. The side effect is that a base-state override also beats every hover: and focus: variant Tailwind generates, since those are ordinary declarations. That silently broke the hero CTA: `bg-turquoise … hover:bg-transparent hover:text-turquoise` kept its turquoise background on hover (blocked) while the text still turned turquoise (not blocked), so the label vanished into the button. So every interactive variant present in the markup is re-asserted here at the same weight. If a new base-state override is added above, its hover and focus partners belong here too. ---------------------------------------------------------------------- */ .b26-body .hover\:bg-transparent:hover, .b26-body .focus\:bg-transparent:focus { background-color: transparent !important; } .b26-body .hover\:bg-deep-green:hover, .b26-body .focus\:bg-deep-green:focus { background-color: var(--b26-deep-green) !important; } .b26-body .hover\:bg-white:hover, .b26-body .focus\:bg-white:focus { background-color: #fff !important; } .b26-body .hover\:text-deep-green:hover, .b26-body .focus\:text-deep-green:focus { color: var(--b26-deep-green) !important; } .b26-body .hover\:text-white:hover, .b26-body .focus\:text-white:focus { color: #fff !important; } .b26-body .hover\:border-deep-green:hover, .b26-body .focus\:border-deep-green:focus { border-color: var(--b26-deep-green) !important; } /* ------------------------------------------------------------------------- 7. Accents with no 2026 equivalent temporary-accent (#FF3992) and success-primary (#00CE82) are off-palette. Errors keep a red because it carries meaning. ---------------------------------------------------------------------- */ .b26-body .bg-temporary-accent { background-color: var(--b26-turquoise) !important; color: var(--b26-deep-green) !important; } .b26-body .text-temporary-accent { color: var(--b26-deep-green) !important; } .b26-body .bg-success-primary { background-color: var(--b26-turquoise) !important; color: var(--b26-deep-green) !important; }