/* Tư-Trà Nav v5.85.0 — structural, class-scoped */ /* Header hold sentinels (v5.2.1). Injected by bootHold into the element AFTER each .tt-header-hold section — the one that actually scrolls. v5.2.0 put them inside the hold section itself and that broke the sticky retrofit: a hold div set to position sticky keeps its box pinned in viewport coordinates, so nothing absolutely positioned inside it ever crosses the line, engage never released, and the header stayed at full size forever. The sliding sibling is the only element whose motion tracks the release. Position is DECLARED, never measured. Each sentinel top edge sits ABOVE the host top by its threshold, so the moment that edge crosses the viewport top is the moment the host top reaches the threshold: offset minus band for the release sentinel, offset plus band for the engage one. Both are tall on purpose. The observer reports a state change when a sentinel edge crosses the viewport top edge, and only a tall target guarantees that change is seen at momentum-scroll velocity — a short marker gets jumped whole in a single frame. Caveat on the record: the overhang above the host top is clipped when the host sets overflow hidden. The decision reads the rect sign rather than the intersection flag, so a clipped host delays a wakeup by at most offset plus band px of scroll; it cannot invert the state. */ .tt-el-nv-hold-host { position: relative; } .tt-el-nv-hold-sentinel { position: absolute; left: 0; width: 1px; height: 60vh; pointer-events: none; } .tt-el-nv-hold-sentinel-release { top: calc(var(--tt-el-nv-hold-band, 6px) - var(--tt-el-nv-hold-offset, 40px)); } .tt-el-nv-hold-sentinel-engage { top: calc(0px - var(--tt-el-nv-hold-offset, 40px) - var(--tt-el-nv-hold-band, 6px)); } .tt-el-nv-wrap { position: relative; display: flex; flex-direction: row; align-items: center; width: 100%; box-sizing: border-box; --tt-el-nv-ind-x: 0px; --tt-el-nv-ind-y: 0px; --tt-el-nv-ind-w: 0px; --tt-el-nv-ind-o: 0; --tt-el-nv-ind-h: 1px; --tt-el-nv-ind-speed: 450ms; --tt-el-nv-shift-x: 0px; --tt-el-nv-logo-h: 3rem; color: var(--tt-el-nv-color, currentColor); } /* Background layer — sits behind the nav content. The eased gradient is applied inline (generated per-instance from the easing curve). This is the foundation for the future progressive-blur (::before/::after backdrop-filter stack) and scroll-state fade — both layer onto .tt-el-nv-bg without touching the flex content. Content (sides, menu, indicator) is raised above it. */ .tt-el-nv-wrap .tt-el-nv-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; user-select: none; -webkit-user-select: none; /* Adaptive tint: transparent (image) sections set --tt-el-nv-tint-bg-opacity to 0 so the backdrop gradient fades out and the image shows through. The var is unset (defaults to 1) when tint is off or no transparent section is active, so this is a no-op then. */ opacity: var(--tt-el-nv-tint-bg-opacity, 1); transition: opacity 600ms cubic-bezier(.4, 0, .2, 1); } /* v5.16.0 — COMPOSITE TINT FILLS. Two identical gradient layers inside .tt-el-nv-bg; only their local --tt-el-nv-tint-color differs. A tint change paints the idle layer once, then cross-fades the pair on OPACITY, which the compositor animates without the main thread — background-color never can be. The two nested opacities (box tint-bg-opacity x fill crossfade) multiply, and both are composited, so the transparent-section fade still works. will-change:opacity keeps each fill on its own layer so the crossfade never forces a re-rasterization of the gradient. */ .tt-el-nv-wrap .tt-el-nv-bg-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; will-change: opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity var(--tt-el-nv-tint-fade, 600ms) cubic-bezier(.4, 0, .2, 1); } /* Fill A is the resting layer, B the incoming one. JS swaps which is which by writing inline opacity; these are only the initial states. */ .tt-el-nv-wrap .tt-el-nv-bg-fill--a { opacity: 1; } .tt-el-nv-wrap .tt-el-nv-bg-fill--b { opacity: 0; } @media (prefers-reduced-motion: reduce) { .tt-el-nv-wrap .tt-el-nv-bg-fill { transition-duration: 1ms; } } /* Progressive blur layer — sits BELOW the gradient (lower z-index), blurring the page content scrolling under the nav. Forked from the progressive-blur kit: stacked backdrop-filter layers, each masked to a vertical band, ramping heavy→light top to bottom. GPU wins kept: half-resolution rendering (200% size + scale(.5) ≈ 4x cheaper fill), per-layer compositor promotion, strict containment. */ .tt-el-nv-wrap .tt-el-nv-bg-blur { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; user-select: none; -webkit-user-select: none; contain: strict; isolation: isolate; } .tt-el-nv-wrap .tt-el-nv-bg-blur-layer { position: absolute; /* Half-resolution trick: 200% box scaled to 0.5 -> blur rasterizes at 1/4 the pixels. Invisible because the output is already blurred. inset:-50% counteracts the scale offset. This scale(0.5) ALSO promotes each layer to its own GPU compositor surface -- the same stabilization the demo translateZ(0) flicker-fix provided, so the heaviest layer does not re- rasterize per scroll frame. (We keep half-res rather than swapping to translateZ: per the GPU analysis it renders the proven Silas geometry at 1/4 the fill cost -- clean AND cheap.) em NOTE: the blur radii are em-based; em resolves against the layer font-size, which inherits from .tt-el-nv-wrap (the nav) and therefore scroll- shrinks with the header. */ top: -50%; left: -50%; width: 200%; height: 200%; transform: scale(0.5) translateZ(0); transform-origin: center center; pointer-events: none; will-change: backdrop-filter, transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media (prefers-reduced-motion: reduce) { .tt-el-nv-wrap .tt-el-nv-bg-blur-layer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ============ v5.17.0 COMPOSITE SHRINK ============ When data-tt-shrink-composite="1" the layout properties stop animating entirely and the shrink becomes transform-only, so the compositor owns it and the measured header box never changes size. transition-property is swapped rather than duration-zeroed, so a stylesheet-declared --tt-el-nv-scroll-dur still controls the timing in both modes. transform-origin choices: the bg stack scales from its top edge (the header hangs from the top), type scales about its own inline start so the menu does not drift sideways, and the logo scales about its centre because it is centred in the bar. */ /* RESTING IDENTITY. scale/translate default to the keyword `none`, and a transition from `none` to a number is not reliably interpolated in WebKit — it lands discretely, which is exactly the A-to-B jump v5.17.1 showed. Both endpoints must be numeric, so the rest state is declared explicitly. */ /* One shared anchor line: the top of the nav content. The menu is the tallest child, so its own top edge IS that line. The side sits lower by a fixed layout offset, so its origin is lifted by exactly that offset and it scales about the same line. Nothing translates, so nothing can travel-then-resize: the top edge is invariant and size is the only animated quantity. */ .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-menu { scale: 1; translate: 0 0; transform-origin: center center; /* v5.26.0 — REAL layer promotion, the way the stage gets it. will-change: scale is not a reliable promotion trigger in WebKit: its heuristics key on transform, opacity and filter, not on the independent scale property. The logo stage has carried transform: translateZ(0) since v4.15.4 and is the one subject that has always animated cleanly on iOS. The menu had only the will-change hint, so its scale was running off the main thread in name only. translateZ(0) composes with the existing centring shift, and transform is not animated on this element, so it is free to hold it. */ transform: translateX(var(--tt-el-nv-shift-x, 0px)) translateZ(0); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* The side slots hug their content and are anchored to the outer edge of their column (--left is justify-content:flex-start, --right is flex-end). Scaling about 50% would pull that content inward toward the slot centre as it shrinks, which is what broke the horizontal alignment. The X origin must be the edge the slot is anchored to, so the outer edge stays put and the box shrinks inward exactly as the layout engine narrows it. */ .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-side { scale: 1; translate: 0 0; transform-origin: center center; /* The side animates `transform` for its reveal, so it cannot hold a fixed translateZ(0) without fighting the hidden-state offset. will-change: transform promotes reliably in WebKit and leaves the reveal intact. */ will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-side--left { transform-origin: left center; } .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-side--right { transform-origin: right center; } /* v5.27.0 — PER-ITEM LAYER PROMOTION, the stage recipe applied to every item. v5.21.0 added scale to the winning !important list on .tt-el-nv-menu, which is the parent of BOTH the nav items and the logo, so all three began transitioning in the same release and only the logo came out clean. What separates them therefore has to be something the logo already had, not something the transition gave it. It is the promoted layer: when an ancestor scales a promoted descendant, the compositor transforms that finished layer instead of re-rasterising its contents. The nav text had no layer of its own, so every frame of the menu scale re-rastered the menu layer and all of its glyphs on the main thread. Each item now gets exactly what the stage has carried since v4.15.4. The logo li is excluded: the stage inside it is already promoted. No geometry changes. translateZ(0) is a no-op transform, the scale still lives on the menu, spacing and gaps are untouched. */ .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-menu > li:not(.tt-el-nv-logo-li), .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-side > * { transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* v5.28.0 — SCALE-ONLY TRANSITION ON THE REVEALED SIDE. The side is the only subject that runs its scale on an element also carrying live transition state for transform, visibility, opacity and font-size — five terms across three durations. None of those change during a scroll; they exist for the reveal and the collapse. But WebKit keeps transition state for all of them on a layer it is scaling every frame, and the side is the only place that happens. The logo stage runs one term, the menu three, and both are clean. Once .tt-el-nv-side-revealed is on, the reveal is finished and the only property that ever changes on this element is scale, so the revealed state gets a single-term list matching the stage. The unrevealed state keeps the full list, so collapse still animates. TRADE-OFF, stated plainly: the reveal itself now resolves against the scale-only list, so the side appears without its 220ms fade on first load. That is a one-time load animation, not a scroll one. Say the word and it comes back on a separate carrier. */ .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-side.tt-el-nv-side-revealed { transition: scale var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out), translate var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out); } /* v5.40.0 — rAF TRANSITION SUPPRESSION, IN THE STYLESHEET. The trace showed the menu cancelling and restarting its scale and translate transitions every ~17ms for an entire run — every inline write from the rAF loop restarted a CSS transition that was still live, roughly 100 transition events per shrink on the main thread. SIZE SOURCE confirmed why: the menu computed transition-property still read [opacity, font-size, scale, translate], so the inline transition-property !important written by rafSuppressTransitions never took effect. Rather than chase why an inline longhand lost, the suppression moves into the stylesheet, where .tt-el-nv-raf (added to the root at boot whenever the rAF engine is active) makes it deterministic. Each rule repeats the terms that must survive — the reveal, the collapse, the tint crossfade — and drops only scale and translate, which rAF now owns. The inline version is kept as a belt-and-braces; it costs nothing. */ .tt-el-nv-wrap.tt-el-nv-raf.tt-el-nv-revealed .tt-el-nv-menu { transition: opacity 150ms ease-out, font-size var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease) !important; } .tt-el-nv-wrap.tt-el-nv-raf .tt-el-nv-menu { transition: opacity 150ms ease-out, font-size var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease) !important; } .tt-el-nv-wrap.tt-el-nv-raf .tt-el-nv-side { transition: opacity var(--tt-el-nv-collapse-dur, 0.22s) var(--tt-el-nv-collapse-ease, ease), transform var(--tt-el-nv-collapse-dur, 0.22s) var(--tt-el-nv-collapse-ease, ease), visibility 0s linear var(--tt-el-nv-collapse-dur, 0.22s), font-size var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease) !important; } .tt-el-nv-wrap.tt-el-nv-raf .tt-el-nv-logo-link, .tt-el-nv-wrap.tt-el-nv-raf .tt-el-nv-logo-stage { transition: none !important; } .tt-el-nv-wrap.tt-el-nv-raf .tt-el-nv-bg, .tt-el-nv-wrap.tt-el-nv-raf .tt-el-nv-bg-blur { transition: opacity 600ms ease !important; } /* v5.41.0 — the composite bar may legitimately hold a menu that fits at the shrunk scale but not in layout (that is how the shrunk bar expands a menu the full bar had to cramp). The scale draws it inside the wrap; the layout still overflows. overflow-x: clip stops that overflow widening the document, and unlike hidden it creates no scroll container, so sticky/fixed positioning and the vertical axis are untouched. */ .tt-el-nv-wrap[data-tt-shrink-composite="1"] { overflow-x: clip; } .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-logo-link { scale: 1; transform-origin: center center; /* No will-change here: the stage is ALREADY promoted by its translateZ(0), and a second promotion hint on the same box gains nothing. */ } .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-bg, .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-bg-blur { scale: 1; transform-origin: top center; will-change: scale; } /* TRANSITION LISTS. These carry .tt-el-nv-anim so they are 0-4-0 and beat the 0-3-0 .tt-el-nv-anim rules further down the sheet regardless of source order — equal specificity plus later source is what silently dropped the scale term in v5.17.1. Every existing term is REPEATED here, not just the new ones: a shorthand at winning specificity REPLACES the list, and dropping a sibling term is the v5.4.0 side-reveal bug and the v5.9.2 menu-reveal bug both over again. */ .tt-el-nv-wrap.tt-el-nv-anim[data-tt-shrink-composite="1"] .tt-el-nv-menu { transition: font-size var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out), scale var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out), translate var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out); } .tt-el-nv-wrap.tt-el-nv-anim[data-tt-shrink-composite="1"] .tt-el-nv-side { transition: opacity var(--tt-el-nv-collapse-dur, 0.22s) var(--tt-el-nv-collapse-ease, ease), transform var(--tt-el-nv-collapse-dur, 0.22s) var(--tt-el-nv-collapse-ease, ease), visibility 0s linear var(--tt-el-nv-collapse-dur, 0.22s), font-size var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out), scale var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out), translate var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out); } .tt-el-nv-wrap.tt-el-nv-anim[data-tt-shrink-composite="1"] .tt-el-nv-logo-link { transition: scale var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out); } .tt-el-nv-wrap.tt-el-nv-anim[data-tt-shrink-composite="1"] .tt-el-nv-bg, .tt-el-nv-wrap.tt-el-nv-anim[data-tt-shrink-composite="1"] .tt-el-nv-bg-blur { transition: opacity 600ms cubic-bezier(.4, 0, .2, 1), scale var(--tt-el-nv-scroll-dur, 0.6s) var(--tt-el-nv-scroll-ease, ease-in-out); } /* v5.17.6 — THE MEASURING PASS NO LONGER TOUCHES THE COMPOSITE PROPERTIES. There is deliberately no rule here. The layout engine needs this guard because font-size and height ARE layout inputs, so a measure pass taken mid-transition would read a half-shrunk box. scale and translate are not layout inputs — they change a post-layout mapping — so offsetWidth, offsetHeight and offsetLeft are already identical whether the header is scaled or not. v5.17.3 established exactly that, then kept `transition: none !important` anyway "matching what measuring does elsewhere". That was the bug. Setting transition:none on an element with a RUNNING transition does not pause it: it cancels it, and the property snaps to its computed end value in that same frame. measureNatural runs several times per shrink, so every pass snapped scale and translate straight to their endpoints. Two symptoms fell out of it: - the logo jumping to its final position and only then scaling. Up to v5.17.5 this guard still named .tt-el-nv-logo-svg, stale since v5.17.4 moved the scale onto the stage — so the menu translate was snapped while the stage scale was left running. Position instant, size animated: precisely the reported artefact. - the whole shrink finishing well short of --tt-el-nv-scroll-dur, because a transition cancelled and restarted several times never runs its configured duration. That is the "too fast" report, same single cause. Nothing replaces it. If some future measurement genuinely needs untransformed geometry it must read layout metrics or divide by the known ratio, never cancel a running animation to get it. */ @media (prefers-reduced-motion: reduce) { .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-menu, .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-side, .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-logo-link, .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-bg, .tt-el-nv-wrap[data-tt-shrink-composite="1"] .tt-el-nv-bg-blur { transition-duration: 1ms; } } .tt-el-nv-wrap .tt-el-nv-side, .tt-el-nv-wrap .tt-el-nv-menu { position: relative; z-index: 2; } .tt-el-nv-wrap .tt-el-nv-indicator { z-index: 3; } /* Side slots (nestable) flank the center menu. CSS order positions them regardless of DOM order: left (0), menu (1), right (2). Sides hug their content and stay anchored; only the MENU is translated to center the logo, so shifting the logo never drags the sides off-screen. Inner content aligns to the OUTER edge: left side → left, right side → right, both vertically centered. Sides receive the same item padding as the menu items so the whole nav shares one spacing rhythm. */ .tt-el-nv-wrap .tt-el-nv-side { display: flex; flex-direction: row; align-items: center; flex: 0 0 auto; width: auto; max-width: max-content; } .tt-el-nv-wrap .tt-el-nv-side--left { order: 0; justify-content: flex-start; } .tt-el-nv-wrap .tt-el-nv-menu { order: 1; } .tt-el-nv-wrap .tt-el-nv-side--right { order: 2; justify-content: flex-end; } /* ── Action zone (nestable) ────────────────────────────────────── A third flex sibling holding dropped action buttons. Positioned by flex order relative to the menu via the data-tt-actions-anchor on the root. The logo is centered WITHIN the menu, so before/after-menu sit the buttons just left/right of the centered group. Hugs its content like the side slots; never translated, so centering never drags it. */ .tt-el-nv-wrap { --tt-el-nv-actions-gap: 13px; --tt-el-nv-action-badge-bg: #b8945f; --tt-el-nv-action-badge-fg: #fffaf0; } .tt-el-nv-wrap .tt-el-nv-actions { display: flex; flex-direction: row; align-items: center; gap: var(--tt-el-nv-actions-gap, 13px); flex: 0 0 auto; width: auto; max-width: max-content; } /* Anchor → flex order. Base layout is: left side 0, menu 1, right side 2. Each anchor slots the action zone into that order without disturbing the others, except before-menu/after-menu which renumber the menu and right side so the zone sits cleanly beside the centered menu group. */ /* far-left: before everything. */ .tt-el-nv-wrap[data-tt-actions-anchor="far-left"] .tt-el-nv-actions { order: -1; } /* far-right: after everything. */ .tt-el-nv-wrap[data-tt-actions-anchor="far-right"] .tt-el-nv-actions { order: 3; } /* before-menu: left-side(0) · zone(1) · menu(2) · right-side(3). */ .tt-el-nv-wrap[data-tt-actions-anchor="before-menu"] .tt-el-nv-actions { order: 1; } .tt-el-nv-wrap[data-tt-actions-anchor="before-menu"] .tt-el-nv-menu { order: 2; } .tt-el-nv-wrap[data-tt-actions-anchor="before-menu"] .tt-el-nv-side--right { order: 3; } /* after-menu (default): left-side(0) · menu(1) · zone(2) · right-side(3). */ .tt-el-nv-wrap[data-tt-actions-anchor="after-menu"] .tt-el-nv-actions { order: 2; } .tt-el-nv-wrap[data-tt-actions-anchor="after-menu"] .tt-el-nv-side--right { order: 3; } /* Hidden entirely when disabled. */ /* v5.12.0 — CONTENT OFFSET, absorbed from the Content Offset kit and renamed into the naming scheme of this element. Put .tt-el-nv-offset on the first section of a page and it clears the overlaying header. Padding rather than margin, so the background of that section still starts at the top of the viewport and the header has something to be translucent over. --tt-el-nv-header-h is the TALLEST height the header reaches in the current layout, not its live height. The padding is set once and the header animates over the top of it. Publishing the live height instead was tried in v5.12.0 and looked terrible: the page crept upward for the whole 600ms. .tt-body-offset-padding is the old class from that kit, kept so live pages survive it being deactivated. Move sections over and drop it. */ .tt-el-nv-offset, .tt-body-offset-padding { padding-top: var(--tt-el-nv-header-h, 0px); } /* v5.9.0 — the action children appear as menu items or not at all. With relocation off the row used to sit on the right; it is hidden outright now. With relocation on, the JS hides the emptied zone itself after moving the children, so this covers the other half. Keyed on the existing control attribute, so the builder still drives it. */ .tt-el-nv-wrap:not([data-tt-actions-in-menu="1"]) .tt-el-nv-actions { display: none !important; } .tt-el-nv-wrap[data-tt-actions="0"] .tt-el-nv-actions { display: none !important; } /* Action button base — applies to whatever is dropped (button, link, icon). */ /* Unified color + size for the actions ZONE itself (v5.0.5). Until now the unified treatment lived only on the RELOCATED form (li.tt-el-nv-act-li), which exists only after the frontend JS moves the buttons into the menu — so in the BUILDER canvas (no relocation runs there) and with flow-into-menu off, action buttons fell back to UA styles and looked detached from the menu words. Mirror the same variable consumption here (the variables are the single integration surface, handbook I.3). On the frontend with flow on, the zone is emptied by relocation and these rules are inert. Known limitation, deliberate: the zone is NOT added to the scroll-shrink state lists — the builder never scrolls, the zone is empty on the frontend when flow is on, and the planned action-flow bake-in retires the zone-resident state. */ .tt-el-nv-wrap .tt-el-nv-actions { color: var(--tt-el-nv-color, var(--tt-header-fg, currentColor)); font-size: var(--tt-el-nv-size, inherit); } .tt-el-nv-wrap .tt-el-nv-actions > * { display: inline-flex; align-items: center; position: relative; color: inherit; font: inherit; font-size: inherit; background: none; border: none; padding: 0; margin: 0; line-height: inherit; cursor: pointer; } .tt-el-nv-wrap .tt-el-nv-actions svg, .tt-el-nv-wrap .tt-el-nv-actions i, .tt-el-nv-wrap .tt-el-nv-actions [class*="icon"] { width: 1em; height: 1em; font-size: inherit; color: inherit; fill: currentColor; stroke: currentColor; } /* Cart badge — a count bubble on a button marked tt-el-nv-act--cart. The JS injects a .tt-el-nv-action-badge span and writes data-count. Hidden at zero when data-tt-badge-hide-zero is on. */ .tt-el-nv-wrap .tt-el-nv-act--cart { position: relative; overflow: visible; } .tt-el-nv-wrap .tt-el-nv-action-badge { position: absolute; top: -0.4em; right: -0.6em; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--tt-el-nv-action-badge-bg, #b8945f); color: var(--tt-el-nv-action-badge-fg, #fffaf0); font-size: 0.6em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; transform: translateZ(0); } .tt-el-nv-wrap[data-tt-badge-hide-zero="1"] .tt-el-nv-action-badge[data-count="0"] { display: none; } /* Search marker — the toggle button. The search BAR itself is the element/template the user supplies (we just toggle a class on it). aria-expanded carries state. */ .tt-el-nv-wrap .tt-el-nv-act--search { cursor: pointer; } /* Relocated action items (v4.13.0): when "flow into menu" is on, each action button is moved into the menu