/* Kustomer brand tokens - added by theming pass 2026-07-14 */ /* Note: CSS custom properties (--name: value) are stripped by this panel's backend sanitizer, so brand colors are applied directly below instead. */ /* Keep body copy on-brand even on pages without a font picker */ body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; } /* Safe, additive: tint generic content links with the brand accent (Periwinkle) */ a { color: #778cf8; } /* New Admin Onboarding page refresh, pass 2 (2026-07-27) -- see decisions.md. Replaces the first pass: that pass's font-family rules never actually rendered (verified via computed style) because WorkRamp forces Inter on all headings via a 9-clause :not() chain selector that is ALSO !important, beating our same-specificity !important rule in the cascade tie. Fix: repeat the class selector to raise specificity past that rule (harmless -- still matches exactly the same elements). Also fixes the nav logo (dark-ink PNG, invisible on the dark banner -- inverted to white) and moves the banner off an unrelated dark teal onto a navy-to-periwinkle gradient in the same family as the existing #778cf8 accent. Uses only the officially documented AL_Custom_* hook classes from help.workramp.com/en/articles/6645543. Applies academy-wide (these hooks render on every Banner/Card surface, not just this one page). User-approved 2026-07-27 after a client-side (non-live) before/after preview. */ .AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading { font-family: 'Fraunces', Georgia, serif !important; font-weight: 600 !important; } .AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle { font-family: 'Fraunces', Georgia, serif !important; color: #262f56 !important; } .AL_Custom_SingleCard { border-radius: 14px !important; overflow: hidden; border: 1px solid rgba(74, 91, 176, 0.12); box-shadow: 0 1px 2px rgba(38,47,86,.05), 0 10px 24px rgba(38,47,86,.07) !important; transition: transform 0.15s ease, box-shadow 0.15s ease; } .AL_Custom_SingleCard:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(38,47,86,.10), 0 18px 32px rgba(38,47,86,.12) !important; } /* Card images, pass 3 (2026-07-27). Pass 2 forced a periwinkle gradient plus a dot texture onto every .AL_Custom_CardImage to hide WorkRamp's off-brand default cover art (a green PNG with a book icon). That was the right call while no course had real cover art -- but it is a `background` shorthand, so it also blanked the background-image of any card that DOES have one. The moment real thumbnails were uploaded for the 12 v0 courses they were invisible: the rule won the cascade over WorkRamp's own per-card class (single hashed class, same specificity, ours later in source order). Now that the covers are real, the tint is a background-COLOR only, which sits harmlessly behind the image instead of replacing it. Cards with no cover fall back to WorkRamp's default art. */ .AL_Custom_CardImage { background-color: #eef0fe; position: relative; overflow: hidden; } /* Section phase badges (2026-07-29) -- see decisions.md. Each of the 5 New Admin Onboarding sections renders as a plain, undifferentiated H2 by default; there is no native per-section color/icon control in WorkRamp's Custom Page editor (Title/Description/Add Content only). Sections DO render as positionally-stable sibling
s under .academy-content (confirmed live), so nth-of-type targets them without depending on WorkRamp's volatile styled-components hash classes. Client-side preview approved before this went live. Purely additive: delete this block to revert with zero effect on section content/admin fields. */ .academy-content > div:nth-of-type(1) h2::before, .academy-content > div:nth-of-type(2) h2::before, .academy-content > div:nth-of-type(3) h2::before, .academy-content > div:nth-of-type(4) h2::before, .academy-content > div:nth-of-type(5) h2::before { display: block; width: fit-content; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; } .academy-content > div:nth-of-type(1) h2::before { content: "OPTIONAL"; background: #ecedf1; color: #5c6370; } .academy-content > div:nth-of-type(2) h2::before { content: "PHASE 1 OF 4"; background: #e3e8fd; color: #35419e; } .academy-content > div:nth-of-type(3) h2::before { content: "PHASE 2 OF 4"; background: #e3e8fd; color: #35419e; } .academy-content > div:nth-of-type(4) h2::before { content: "PHASE 3 OF 4"; background: #e3e8fd; color: #35419e; } .academy-content > div:nth-of-type(5) h2::before { content: "PHASE 4 OF 4"; background: #e3e8fd; color: #35419e; } /* ========================================================================== Kustomer University — interim hub palette pass (2026-08-06) Design source: Chloe Curran / Kustomer design team, Slack group DM 2026-08-06. Assets + provenance: 02-Areas/enablement/brand-assets/ku-interim-2026-08-06/ Spec + contrast results: 02-Areas/enablement/ku-interim-design-2026-08-06.md NOT APPLIED LIVE. This is a reviewable artifact. Destination when approved: WorkRamp admin -> Academy Theming Editor -> Custom Code -> Custom CSS Rules. --------------------------------------------------------------------------- WHAT THIS DOES Inverts the Academy hero from dark to light. Today the banner is a navy-to-periwinkle gradient carrying white heading text and white nav chrome. Chloe's pass makes it a pale cream-to-yellow gradient carrying near-black text, moves CTA buttons from periwinkle to sunray yellow, and swaps the periwinkle-tinted bands for warm light grey. --------------------------------------------------------------------------- THIS BLOCK REPLACES RULES THAT ARE LIVE TODAY The Custom CSS Rules field already carries the 2026-07-27 pass 2/2b/3 dark-banner CSS. Appending this block alone WILL win the cascade (equal specificity + equal !important resolves by source order, and this comes last), but it leaves contradictory dead rules in a field whose contents are hard-won. Prefer deleting the superseded rules listed in the design doc's "Rules to remove" section, then appending this. Sections 3 and 4 below are NOT optional polish. They are the rules that keep the header legible once the hero goes light. Shipping section 1 without them makes the logo, the nav links, and the Login button effectively invisible (measured at 1.00:1 to 1.33:1). See the design doc. --------------------------------------------------------------------------- WORKRAMP FIELD CONSTRAINTS OBSERVED HERE (all previously root-caused; see decisions.md 2026-07-27 pass-2 entry) - No CSS custom properties. `:root{--x:...}` is silently stripped by the field's backend sanitizer. Every value below is a literal hex. - No `@import`. Also silently stripped. No web-font loading here. - No `inset:` shorthand. Silently blanked. Use explicit top/right/bottom/left. - Colour rules need a plain class + `!important`; that is proven sufficient today (the live banner heading is white via exactly that shape). `font-family` is the one property that needs the 12x-repeated-class specificity trick, because WorkRamp forces Inter on headings through a 9-clause `:not()` chain that is itself `!important`. This block changes no font-family, so the trick is not needed. - The field autosaves on blur (Tab). There is no Save button wired to it. - Never trust the "Saved" toast. Reload and read the value back. All AL_Custom_* hooks used below were confirmed present in the live public DOM on 2026-08-06, not just taken from WorkRamp's documentation. ========================================================================== */ /* -------------------------------------------------------------------------- 1. HERO — dark to light Spec: "Hero section: use the provided gradient image." Hook: .AL_Custom_NavBg is WorkRamp's documented class for the banner div (it sits on `.academy-banner`). Confirmed live on both the Index:Paths homepage and the New Admin Onboarding Custom Page; today it computes to linear-gradient(135deg, #1B2246 0%, #303D78 55%, #4A5BB0 100%). Two ways to land the gradient, in preference order: (a) PREFERRED — upload `hero-gradient.png` to Theme Editor -> Header -> Background Image, which is a native slot, and delete the background-image line below (keep background-color as the fallback behind it). Exact fidelity, no CSS approximation. (b) The rule below reproduces the asset in pure CSS. Stops were sampled from the real PNG rather than eyeballed: the gradient is essentially vertical (its horizontal axis barely moves), with a slight warm lean to the right, hence 172deg rather than a flat 180deg. Sampled centre-column values: 0% #FFFFFB, 25% #FEFCE2, 50% #FEFACA, 75% #FDF8B1, 100% #FDF699; true corner extremes #FFFFFF and #FBF793. -------------------------------------------------------------------------- */ .AL_Custom_NavBg { background-color: #FEFACA !important; background-image: linear-gradient( 172deg, #FFFFFF 0%, #FEFCE2 25%, #FEFACA 50%, #FDF8B1 75%, #FCF697 100% ) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* -------------------------------------------------------------------------- 2. HERO TYPE — white to ink Spec: "hero heading type #292929." .AL_Custom_BannerMainHeading is the

; today rgb(255,255,255). .AL_Custom_BannerSubHead is the

; today rgba(255,255,255,0.82). The subhead keeps the same 0.82 alpha relationship, now over ink, so the hierarchy between heading and subhead survives the inversion. -------------------------------------------------------------------------- */ .AL_Custom_BannerMainHeading { color: #292929 !important; } .AL_Custom_BannerSubHead { color: rgba(41, 41, 41, 0.82) !important; } /* -------------------------------------------------------------------------- 3. NAV LOGO — undo the dark-banner inversion Not in Chloe's written spec; required by it. The Kustomer logo is a dark-ink PNG. The 2026-07-27 pass inverted it to white (`filter: brightness(0) invert(1)`, opacity 0.92) so it would read on the navy banner. Over cream that same filter renders it white-on-white. Restoring the source artwork is the whole fix. -------------------------------------------------------------------------- */ .AL_Custom_NavLogo img { filter: none !important; opacity: 1 !important; } /* -------------------------------------------------------------------------- 4. NAV LINKS AND LOGIN BUTTON — undo the dark-banner inversion Not in Chloe's written spec; required by it. Pass 3 forced these to white at 85% opacity for the dark banner (live values: .AL_Custom_NavCustomLink rgba(255,255,255,0.85); .AL_Custom_NavLoginButton white text with a rgba(255,255,255,0.45) border). Over the cream hero those measure 1.06:1 and 1.33:1 — below the 1:1 floor of legibility, not merely below AA. Ink restores them to 13.68:1. The child `a` is targeted too because the hook class sits on the

  • wrapper, and colour does not inherit past the anchor's own colour. -------------------------------------------------------------------------- */ .AL_Custom_NavCustomLink, .AL_Custom_NavCustomLink > a { color: #292929 !important; opacity: 1 !important; } .AL_Custom_NavLoginButton { color: #292929 !important; border-color: rgba(41, 41, 41, 0.45) !important; } /* -------------------------------------------------------------------------- 5. CTA BUTTON — periwinkle to sunray Spec: "CTA button: #FBEC2A; CTA button type: #292929." .AL_Custom_PCSummaryCta is the primary filled CTA — the "Start" button on every Path and Certification overview page. Confirmed live: a