/*! fc-vt.css v1.3.0 · 2026-08-13 · fc-brands @fcv */ /* ============================================================ FC View-Transitions — SITE-WIDE base (fcbrands-api.netlify.app/fc-vt.css) Maintainer: TIDY. Link this in the GLOBAL (every page). What it does everywhere: • Opts the whole site into cross-document View Transitions. • Default page nav = a HARD CUT (no root animation). It was a soft cross-fade until 2026-08-12; on an Oxygen page whose first painted frame is the bare dark background, that faded onto an unpainted frame and read as a black flash on every navigation. Opt a route back in with html[data-fcvt="fade"]. See the ROOT block below. • Persistent chrome: put .fc-vt-back / .fc-vt-prev / .fc-vt-next / .fc-vt-keep-N on anything IDENTICAL across pages (header, logo, nav, footer, back link, prev/next). Each gets its own view-transition-name so it's pulled OUT of the page transition and stays continuous — no flash. • FIX B (v1.3.0, bottom of this file): the keep-slots now carry the z-order that makes them survivable, and adding .fc-vt-keep-1 to the full-viewport backdrop RE-ENABLES the site-wide soft cross-fade. Inert until that class exists. Read the block before adding the class. Artist pages ALSO load artist-swipe.css + artist-bg-vt.css, which override root/fcbg with the directional glitch-slide. Everywhere else is the hard cut above. (view-transition-names must be unique per page — one class per element; need more than 4 generic keep-slots? ask TIDY.) ============================================================ */ @view-transition { navigation: auto; } /* dark backdrop for any gap during a transition (transition-only pseudo — never set an opaque background on :root, it washes out wide-gamut/P3 displays). */ ::view-transition { background: #04060c; } /* ---- ROOT: NO-OP BY DEFAULT (the black-flash fix, 2026-08-12) ---- Was a .32s cross-fade on every page. @view-transition is global, so that ran on EVERY same-origin navigation, and a WordPress/Oxygen page whose first painted frame is just the dark body background meant the fade landed on an unpainted frame — read as "goes black, then loads". Neither the fade nor the backdrop above was new; removing the hero morph only stopped masking it on the one route that had it. A hard cut cannot dip, so this removes the flash everywhere in one line. Diagnosed by @newman, 👍 to ship; Sean confirmed on every page. THIS IS THE STOPGAP, NOT THE ANSWER. The real fix is chrome-persists (the 2026-08-09 decision, whose persist half was never actually wired): tag the shared backdrop / nav / footer with fc-vt-keep-* so they leave the root snapshot entirely, and a soft cross-fade becomes safe again because a full-viewport opaque layer is painted throughout. Until those classes exist on the template, a fade here has nothing guaranteed underneath it. Opt IN per route with html[data-fcvt="fade"]. Artist pages set data-fcvt next/prev and are driven by artist-swipe.css instead. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } html[data-fcvt="fade"]::view-transition-old(root) { animation: fcRootOut .32s both; } html[data-fcvt="fade"]::view-transition-new(root) { animation: fcRootIn .32s both; } @keyframes fcRootOut { to { opacity: 0; } } @keyframes fcRootIn { from { opacity: 0; } } /* ---- persistent elements (identical across pages -> no flash) ---- */ .fc-vt-back { view-transition-name: fckeep-back; } .fc-vt-prev { view-transition-name: fckeep-prev; } .fc-vt-next { view-transition-name: fckeep-next; } .fc-vt-keep-1 { view-transition-name: fckeep-1; } .fc-vt-keep-2 { view-transition-name: fckeep-2; } .fc-vt-keep-3 { view-transition-name: fckeep-3; } .fc-vt-keep-4 { view-transition-name: fckeep-4; } .fc-vt-keep-5 { view-transition-name: fckeep-5; } .fc-vt-keep-6 { view-transition-name: fckeep-6; } /* truly-static bits (header/logo/back): kill even the default cross-fade so they don't blink. prev/next are intentionally NOT here — their label changes, so a gentle cross-fade of just that element reads better than a hard cut. */ ::view-transition-old(fckeep-back), ::view-transition-new(fckeep-back), ::view-transition-old(fckeep-1), ::view-transition-new(fckeep-1), ::view-transition-old(fckeep-2), ::view-transition-new(fckeep-2), ::view-transition-old(fckeep-3), ::view-transition-new(fckeep-3), ::view-transition-old(fckeep-4), ::view-transition-new(fckeep-4), ::view-transition-old(fckeep-5), ::view-transition-new(fckeep-5), ::view-transition-old(fckeep-6), ::view-transition-new(fckeep-6) { animation: none; } /* ============================================================ FIX B — CHROME PERSISTS (2026-08-12, Tidy; @newman 👍) The real answer to the black flash. The hard cut above is a stopgap: it cannot dip, but it also means no page transition at all. INERT AS SHIPPED. Nothing below matches until an element carries .fc-vt-keep-1, so this file behaves exactly as v1.2.0 until then. ---- 1. Z-ORDER. Read this before touching anything here. ---- Giving an element a view-transition-name REMOVES it from the root snapshot and re-parents it as a flat SIBLING of ::view-transition-group(root). Normal-flow z-order is destroyed — the backdrop no longer knows it is a backdrop. Groups paint in capture order and root is captured first, so a named element with z-index:auto paints ON TOP OF THE ENTIRE PAGE. .tbg is FULL-VIEWPORT and opaque. Without the -1 below it covers every page during every navigation, chrome included. This is not hypothetical: the identical trap broke the artist hero morph twice (see the mechanism note in artist-bg-vt.css, and notes/tidy.md 2026-08-11) and @newman caught it in review before this shipped. An explicit z-index:0 is NOT enough — root is z-index:auto AND earlier in tree order, so 0 still paints above it. It must be negative. */ ::view-transition-group(fckeep-1) { z-index: -1; } /* .tbg — full-viewport backdrop, BEHIND the page */ ::view-transition-group(fckeep-2), /* nav — site chrome, above the page */ ::view-transition-group(fckeep-3) { z-index: 1; } /* footer — ditto */ /* ---- 1b. AND THE GROUPS MUST NOT MOVE ---- `animation:none` on the old/new images above kills the cross-fade of an element's PIXELS. It does NOT stop the GROUP animating its geometry — that is a separate default, and it interpolates transform/width/height from the old box to the new one. So a keep element whose box differs between two pages SLIDES into place on every navigation, which is worse than a cut and is exactly the sort of thing that looks fine in review and wrong on a phone. @newman measured this on the live nav rather than reasoning about it, and the answer is why this rule exists: data-sticky="pin" — never writes a transform, so old and new boxes match and the morph is already a no-op. Costs nothing. data-sticky="hide" — DOES translate the nav by inline style, and NOTHING resets it before a navigation. That is the sliding case, and it is live-reachable the moment any page uses hide. Applied to all six slots, not just the nav, because that is what the class already promises: fc-vt-keep-* means "identical across pages, do not put this in the transition". An element that morphs IS in the transition. Slots 4–6 are unused today and this stops the next person rediscovering it. NOT applied to fckeep-back/prev/next — those deliberately keep their gentle cross-fade because their label changes between pages (see the block above), and that is an image animation, not geometry. Different axis, left alone. */ ::view-transition-group(fckeep-1), ::view-transition-group(fckeep-2), ::view-transition-group(fckeep-3), ::view-transition-group(fckeep-4), ::view-transition-group(fckeep-5), ::view-transition-group(fckeep-6) { animation: none; } /* ---- 2. THE FADE, GATED ON THE THING THAT MAKES IT SAFE ---- A root cross-fade is safe if and only if something opaque is painted for the whole transition. That is exactly what .fc-vt-keep-1 means, so it is the gate rather than a separate flag someone has to remember to set. The fade cannot be on while the backdrop is absent — which is the v1.1.0 bug. ⚠️ CONSEQUENCE, SO IT IS NOT A SURPRISE: adding .fc-vt-keep-1 to .tbg in Oxygen turns the site-wide cross-fade ON. That is the intended act, it is the last step of Fix B, and it reverts by removing the same one class. Cross-document transitions are styled by the NEW document, so this is evaluated against the page being navigated TO — the page whose unpainted first frame was the black flash. Correct side. fckeep-2/3 (nav, footer) are deliberately NOT part of the gate. They improve the effect; only the backdrop makes it safe. Landing one, two or none of the three is fine — the fade waits for the one that matters. */ html:has(.fc-vt-keep-1)::view-transition-old(root) { animation: fcRootOut .32s both; } html:has(.fc-vt-keep-1)::view-transition-new(root) { animation: fcRootIn .32s both; } /* Artist pages own their transition (artist-swipe.css / artist-bg-vt.css set data-fcvt next/prev/hero). Stand down there rather than fight them — two rules animating root is how the prev/next slide froze mid-cross-fade. */ html[data-fcvt="next"]:has(.fc-vt-keep-1)::view-transition-old(root), html[data-fcvt="next"]:has(.fc-vt-keep-1)::view-transition-new(root), html[data-fcvt="prev"]:has(.fc-vt-keep-1)::view-transition-old(root), html[data-fcvt="prev"]:has(.fc-vt-keep-1)::view-transition-new(root) { animation: none; } /* ---- 3. KNOWN CAVEATS (measured claims only) ---- • ONE element per keep-class per page. Two elements sharing a view-transition-name kills the ENTIRE transition, silently — no error, no fallback, the navigation just cuts. If .tbg is a repeated Oxygen class rather than a single wrapper, tag the wrapper, not the class. • Group geometry still morphs by default. Harmless for a fixed full-viewport backdrop and a fixed nav (old and new boxes are identical, so the morph is a no-op). The FOOTER can differ between a long page and a short one, and would then slide into place. Left at the default deliberately — I have not measured it on a real page, and guessing at a rule for it is how we got the last two reverts. If it reads wrong, the fix is one line here; tell me rather than working around it in Oxygen. • A page that has .fc-vt-keep-1 navigating to one that does not (or the reverse) gets a group with only one image. It appears/disappears at the cut instead of fading. Correct, and invisible in practice because the backdrop and the ::view-transition background are the same dark value. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } :root{--fcv-fc-vt-css:"1.3.0";}