/* ========================================================================== DSS Unified Breadcrumb — Scroll Hint assets/standalone/dss-breadcrumb-scroll-hint.css -------------------------------------------------------------------------- ADD-ON ONLY. This file never modifies dss-breadcrumb.css and never touches any selector outside `.dss-breadcrumb`. PURPOSE The breadcrumb bar scrolls horizontally on small screens, but a scrolled trail gives the user no signal that more crumbs exist. This file styles a pair of edge chevrons that appear only on the side(s) where content is actually hidden: [ ⌂ Home › Safety Sign Categories › A Frame Sig ‹fade›❯ ] [ ❮‹fade› Categories › A Frame Signs › Plastic Yellow ] No overflow → no chevron. Scrolled to the far right → right chevron hidden, left chevron shown. ISOLATION STRATEGY (identical to dss-breadcrumb.css): • every selector prefixed with `html body .dss-breadcrumb…` • every declaration !important • design tokens live on the component wrapper, never on :root • the buttons are full property resets, so global / theme / WooCommerce `button {}` rules cannot leak in MARKUP Injected at runtime by dss-breadcrumb-scroll-hint.js. Nothing changes in views/partials/breadcrumb.twig. Without the JS, this file renders nothing. DEPENDENCY / COUPLING (one point, documented): `--dssbc-nav-inset` must equal the horizontal padding of `html body .dss-breadcrumb` in dss-breadcrumb.css, so the chevrons sit flush with the bar edge rather than the wrapper edge. desktop : padding 0 → --dssbc-nav-inset: 0px ≤768px : padding 0 12px → --dssbc-nav-inset: 12px If that padding is ever changed, change these two values to match. ========================================================================== */ html body .dss-breadcrumb { /* --- scroll-hint tokens ------------------------------------------- */ --dssbc-nav-inset: 0px; /* mirrors wrapper horizontal padding */ --dssbc-nav-width: 38px; /* chevron hit area + fade width */ --dssbc-nav-radius: var(--dssbc-radius, 12px); /* follows the bar */ --dssbc-nav-icon: 16px; --dssbc-nav-fade: var(--dssbc-bar-bg, #fbfbfc); --dssbc-nav-fade-out: rgba(251, 251, 252, 0); /* same hue, alpha 0 */ --dssbc-nav-ink: var(--dssbc-ink-muted, #6b7280); --dssbc-nav-ink-hover: var(--dssbc-ink-strong, #0f172a); /* Containing block for the absolutely positioned chevrons. */ /* No offsets are set, so nothing in the existing layout moves. */ position: relative !important; } /* ── The chevron buttons ─────────────────────────────────────────────── Absolutely positioned over the bar, so they add zero layout height and cannot shift the breadcrumb, the page, or anything after it. Full reset first — a theme or WooCommerce `button {}` rule must not be able to give these a border, background, min-height or text-transform. */ html body .dss-breadcrumb__nav { position: absolute !important; top: 1px !important; /* sit inside the bar's 1px border */ bottom: 1px !important; z-index: 2 !important; display: flex !important; align-items: center !important; width: var(--dssbc-nav-width) !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--dssbc-nav-ink) !important; font: inherit !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; line-height: 1 !important; cursor: pointer !important; overflow: hidden !important; -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; user-select: none !important; /* Hidden by default; the JS adds --visible only when the bar actually overflows on that side. visibility:hidden also removes it from the accessibility tree and from hit-testing. */ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .18s ease, color .15s ease !important; } /* ── Left chevron: "there are crumbs behind you" ───────────────────── */ html body .dss-breadcrumb__nav--prev { left: calc(var(--dssbc-nav-inset) + 1px) !important; right: auto !important; justify-content: flex-start !important; padding: 0 0 0 5px !important; border-radius: var(--dssbc-nav-radius) 0 0 var(--dssbc-nav-radius) !important; background: linear-gradient( to right, var(--dssbc-nav-fade) 0%, var(--dssbc-nav-fade) 58%, var(--dssbc-nav-fade-out) 100% ) !important; } /* ── Right chevron: "there are crumbs ahead" ───────────────────────── */ html body .dss-breadcrumb__nav--next { right: calc(var(--dssbc-nav-inset) + 1px) !important; left: auto !important; justify-content: flex-end !important; padding: 0 5px 0 0 !important; border-radius: 0 var(--dssbc-nav-radius) var(--dssbc-nav-radius) 0 !important; background: linear-gradient( to left, var(--dssbc-nav-fade) 0%, var(--dssbc-nav-fade) 58%, var(--dssbc-nav-fade-out) 100% ) !important; } /* ── Revealed state (added / removed by the JS) ────────────────────── */ html body .dss-breadcrumb__nav--visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ── The chevron glyph ─────────────────────────────────────────────── */ html body .dss-breadcrumb__nav-icon { display: block !important; flex: 0 0 auto !important; width: var(--dssbc-nav-icon) !important; height: var(--dssbc-nav-icon) !important; color: currentColor !important; fill: none !important; pointer-events: none !important; transition: transform .15s ease !important; } /* The outline reset is safe here specifically because these buttons carry tabindex="-1" and aria-hidden="true" — they are never a keyboard focus target, so no focus indicator is being taken away from anyone. Do not copy this pattern onto a focusable control. */ html body .dss-breadcrumb__nav:hover, html body .dss-breadcrumb__nav:focus { color: var(--dssbc-nav-ink-hover) !important; outline: none !important; } html body .dss-breadcrumb__nav:active .dss-breadcrumb__nav-icon { transform: scale(.88) !important; } /* ── First-run nudge ─────────────────────────────────────────────────── A single, short, two-beat nudge on the right chevron the first time it appears in a page view — enough to read as "there's more this way" without becoming ambient motion. It runs twice (1.7s total) and the JS drops the class at 2s, so it never repeats or loops. To disable the nudge entirely, delete this block; nothing else depends on it. */ @keyframes dssbc-nav-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } } html body .dss-breadcrumb__nav--next.dss-breadcrumb__nav--hint .dss-breadcrumb__nav-icon { animation: dssbc-nav-nudge .85s ease-in-out 2 !important; } /* ── Motion preferences ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html body .dss-breadcrumb__nav, html body .dss-breadcrumb__nav-icon { transition: none !important; } html body .dss-breadcrumb__nav--next.dss-breadcrumb__nav--hint .dss-breadcrumb__nav-icon { animation: none !important; } } /* ── Mobile: match the wrapper padding and the bar radius ────────────── Breakpoint is identical to dss-breadcrumb.css so the two files can never disagree about where "mobile" starts. */ @media (max-width: 768px) { html body .dss-breadcrumb { --dssbc-nav-inset: 12px; /* == wrapper `padding: 0 12px` */ --dssbc-nav-radius: 10px; /* == list `border-radius: 10px` */ --dssbc-nav-width: 34px; --dssbc-nav-icon: 15px; } } /* ── Print: a static document has nothing to scroll ────────────────── */ @media print { html body .dss-breadcrumb__nav { display: none !important; } }