/** * Case Study chrome — shared elements rendered by the dispatcher. * * Includes: * - the global "Back to Our Work" fallback link * - dark-hero navbar overrides (when body has .jt-cs-dark-hero) * * Each layout's `brandColor` prop is piped through as the `--jt-cs-brand` * CSS variable on the link element so the hover accent matches the * case study's theme. */ /* ============== Dark-hero navbar overrides ============== * When the case study layout opts into `dark_hero` (set in the layout's * config.php OR returned as `darkHero: true` from build_props), the * dispatcher adds `jt-cs-dark-hero` to . While the navbar is at the * top of the page (before scroll past 50px) it has no background — meaning * default red logo + dark "Talk to Us" + dark hamburger lines render * invisibly against the dark hero. These rules flip those elements to white * for the at-top state. Once user scrolls and the navbar gets the * `.bg-white/95` opaque background (added by header.php's scroll handler), * the `:not(...)` selector matches no longer and the default red/dark * styling resumes against the white bg. */ body.jt-cs-dark-hero .jt-navbar:not(.bg-white\/95):not(.is-menu-open) .jt-navbar-logo--red { opacity: 0; } body.jt-cs-dark-hero .jt-navbar:not(.bg-white\/95):not(.is-menu-open) .jt-navbar-logo--white { opacity: 1; } body.jt-cs-dark-hero .jt-navbar:not(.bg-white\/95):not(.is-menu-open) #jt-talk-link { color: #ffffff; } body.jt-cs-dark-hero .jt-navbar:not(.bg-white\/95):not(.is-menu-open) #menu-line-1, body.jt-cs-dark-hero .jt-navbar:not(.bg-white\/95):not(.is-menu-open) #menu-line-2, body.jt-cs-dark-hero .jt-navbar:not(.bg-white\/95):not(.is-menu-open) #menu-line-3 { background-color: #ffffff !important; } /* The case-study dispatcher renders the back link as a direct child of
on layouts that don't supply their own JSX-rendered back link. We need
to be a positioning context so we can absolute-position the link as an overlay on the hero (rather than letting it sit in a white band above the page content — Tyler 2026-05-03). */ body.jt-case-study-2026 main { position: relative; } .jt-cs-back-to-work { /* Position: absolute overlay on the hero, top-left of
, below the fixed JT navbar (which is ~80px tall). Sits ON the hero rather than pushing it down. Each layout's hero already has top breathing room (padding/margin or imagery void at top-left) for this to land in. */ position: absolute; top: 6.5rem; left: 1.5rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; font-family: 'Inter', system-ui, sans-serif; font-size: 0.6875rem; /* 11px */ font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; /* Light-hero default: brand-tinted dark text on translucent white. Blends with the page's theme via --jt-cs-brand. */ color: color-mix(in srgb, var(--jt-cs-brand, #e31b23) 75%, #1a1a1a); background: rgba(255, 255, 255, 0.78); border: 1.5px solid color-mix(in srgb, var(--jt-cs-brand, #e31b23) 35%, transparent); border-radius: 9999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } .jt-cs-back-to-work:hover, .jt-cs-back-to-work:focus-visible { color: var(--jt-cs-brand, #e31b23); border-color: var(--jt-cs-brand, #e31b23); background: rgba(255, 255, 255, 0.95); } .jt-cs-back-to-work:focus-visible { outline: 2px solid var(--jt-cs-brand, #e31b23); outline-offset: 2px; } .jt-cs-back-to-work__icon { width: 0.9375rem; /* 15px */ height: 0.9375rem; flex-shrink: 0; transition: transform 0.2s ease; } .jt-cs-back-to-work:hover .jt-cs-back-to-work__icon, .jt-cs-back-to-work:focus-visible .jt-cs-back-to-work__icon { transform: translateX(-2px); } .jt-cs-back-to-work__label { white-space: nowrap; } /* Dark-hero variant — flips the button to white-on-dark so it reads against a dark hero background. Same `jt-cs-dark-hero` body class that drives the navbar override. */ body.jt-cs-dark-hero .jt-cs-back-to-work { color: rgba(255, 255, 255, 0.92); background: rgba(0, 0, 0, 0.32); border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } body.jt-cs-dark-hero .jt-cs-back-to-work:hover, body.jt-cs-dark-hero .jt-cs-back-to-work:focus-visible { color: #ffffff; background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.55); } @media (min-width: 768px) { .jt-cs-back-to-work { left: 3rem; top: 7rem; } }