/* =========================================================================== Raptor Labs — catalog archive (2026-09 source redesign) The theme ships the Tailwind build that was lifted from the OLD source, so the utilities the redesigned store page needs are simply absent from it. Everything below is either copied verbatim out of the current source bundle (source-2026-09/assets/ad97e6ea5226670a.css) or written to the same values. Loaded after raptor-custom.css. Scope: /store, /categories/*, /collections/*. =========================================================================== */ /* --------------------------------------------------------------- keyframes */ @keyframes rl-marquee-sweep { 0% { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rl-hatch-sweep { 0% { background-position: 0 0; } to { background-position: 56px 0; } } @keyframes rl-chew { 0% { transform: translateX(0); } 50% { transform: translateX(6px); } to { transform: translateX(0); } } .rl-store-track { animation: rl-marquee-sweep 22s linear infinite; } .rl-store-track:hover { animation-play-state: paused; } .rl-hatch { background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(0,0,0,.07) 10px 18px); background-size: 56px 56px; animation: rl-hatch-sweep .9s linear infinite; } .rl-chewing { animation: rl-chew .2s steps(2) infinite; } @media (prefers-reduced-motion: reduce) { .rl-chewing, .rl-hatch, .rl-store-track { animation: none; } } /* ------------------------------------------------------ layout / position */ .-bottom-\[9px\] { bottom: -9px; } .bottom-1\.5 { bottom: .375rem; } .left-1\.5 { left: .375rem; } .right-1\.5 { right: .375rem; } .z-40 { z-index: 40; } .w-screen { width: 100vw; } .-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; } .mt-24 { margin-top: 6rem; } @media (min-width: 768px) { .md\:-mx-8 { margin-left: -2rem; margin-right: -2rem; } } .h-\[26px\] { height: 26px; } .h-\[52px\] { height: 52px; } .min-h-11 { min-height: 2.75rem; } .min-h-12 { min-height: 3rem; } .min-h-14 { min-height: 3.5rem; } .min-h-\[2\.3em\] { min-height: 2.3em; } .max-h-\[45vh\] { max-height: 45vh; } .max-h-\[96vh\] { max-height: 96vh; } .max-w-\[calc\(100\%-3rem\)\] { max-width: calc(100% - 3rem); } .size-6 { width: 1.5rem; height: 1.5rem; } .size-11 { width: 2.75rem; height: 2.75rem; } .w-\[100px\] { width: 100px; } .aspect-\[4\/5\] { aspect-ratio: 4/5; } .px-1\.5 { padding-left: .375rem; padding-right: .375rem; } .px-3\.5 { padding-left: .875rem; padding-right: .875rem; } .pb-2\.5 { padding-bottom: .625rem; } .pt-1\.5 { padding-top: .375rem; } /* ------------------------------------------------------------- typography */ .text-\[13px\] { font-size: 13px; } .leading-\[1\.15\] { line-height: 1.15; } .tracking-\[0\.16em\] { letter-spacing: .16em; } @media (min-width: 640px) { .sm\:\!text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; } } /* ------------------------------------------------------------- transforms */ .-rotate-1 { --tw-rotate: -1deg; } .-rotate-3 { --tw-rotate: -3deg; } .rotate-2 { --tw-rotate: 2deg; } .-translate-y-full { --tw-translate-y: -100%; } .-rotate-1, .-rotate-3, .rotate-2, .-translate-y-full, .active\:translate-x-\[2px\]:active, .active\:translate-x-\[3px\]:active, .active\:translate-x-\[4px\]:active, .active\:translate-y-\[2px\]:active, .active\:translate-y-\[3px\]:active, .active\:translate-y-\[4px\]:active { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .active\:translate-x-\[2px\]:active { --tw-translate-x: 2px; } .active\:translate-x-\[3px\]:active { --tw-translate-x: 3px; } .active\:translate-y-\[2px\]:active { --tw-translate-y: 2px; } .active\:translate-y-\[3px\]:active { --tw-translate-y: 3px; } @media (hover: hover) and (pointer: fine) { .hover\:-translate-x-\[2px\]:hover, .hover\:-translate-y-\[2px\]:hover, .hover\:translate-x-\[2px\]:hover, .hover\:translate-y-\[2px\]:hover { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:-translate-x-\[2px\]:hover { --tw-translate-x: -2px; } .hover\:-translate-y-\[2px\]:hover { --tw-translate-y: -2px; } .hover\:translate-x-\[2px\]:hover { --tw-translate-x: 2px; } .hover\:translate-y-\[2px\]:hover { --tw-translate-y: 2px; } } /* ------------------------------------------------------ hard offset shadows Written as plain box-shadow rather than through Tailwind's --tw-shadow composite, so they survive without the ring/shadow variable scaffolding. */ .shadow-\[2px_2px_0_0_rgba\(0\2c 0\2c 0\2c 1\)\] { box-shadow: 2px 2px 0 0 rgba(0,0,0,1); } .shadow-\[2px_2px_0_0_rgba\(0\2c 0\2c 0\2c 0\.35\)\] { box-shadow: 2px 2px 0 0 rgba(0,0,0,.35); } .shadow-\[3px_3px_0_0_rgba\(0\2c 0\2c 0\2c 1\)\] { box-shadow: 3px 3px 0 0 rgba(0,0,0,1); } .shadow-\[3px_3px_0_0_rgba\(220\2c 38\2c 38\2c 1\)\] { box-shadow: 3px 3px 0 0 rgba(220,38,38,1); } .shadow-\[4px_4px_0_0_rgba\(0\2c 0\2c 0\2c 1\)\] { box-shadow: 4px 4px 0 0 rgba(0,0,0,1); } .shadow-\[5px_5px_0_0_rgba\(220\2c 38\2c 38\2c 1\)\] { box-shadow: 5px 5px 0 0 rgba(220,38,38,1); } @media (min-width: 1024px) { .lg\:shadow-\[6px_6px_0_0_rgba\(0\2c 0\2c 0\2c 1\)\] { box-shadow: 6px 6px 0 0 rgba(0,0,0,1); } } .active\:shadow-none:active { box-shadow: none; } @media (hover: hover) and (pointer: fine) { .hover\:shadow-\[2px_2px_0_0_rgba\(0\2c 0\2c 0\2c 1\)\]:hover { box-shadow: 2px 2px 0 0 rgba(0,0,0,1); } .hover\:shadow-\[6px_6px_0_0_rgba\(220\2c 38\2c 38\2c 1\)\]:hover { box-shadow: 6px 6px 0 0 rgba(220,38,38,1); } .hover\:shadow-\[4px_4px_0px_0px_rgba\(0\2c 0\2c 0\)\]:hover { box-shadow: 4px 4px 0 0 rgba(0,0,0,1); } } /* ------------------------------------------------------------ transitions */ .transition-\[transform\2c box-shadow\] { transition-property: transform, box-shadow; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .duration-100 { transition-duration: .1s; } .duration-150 { transition-duration: .15s; } /* --------------------------------------------------------- colour / border */ .bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); } .border-b-\[3px\] { border-bottom-width: 3px; } .border-y-\[3px\] { border-top-width: 3px; border-bottom-width: 3px; } .border-foreground\/25 { border-color: hsl(var(--foreground) / .25); } @media (hover: hover) and (pointer: fine) { .hover\:border-primary\/30:hover { border-color: hsl(var(--primary) / .3); } } .border-foreground\/50 { border-color: hsl(var(--foreground) / .5); } .border-foreground\/60 { border-color: hsl(var(--foreground) / .6); } .placeholder\:text-current\/50::placeholder { color: currentColor; opacity: .5; } /* --------------------------------------------------------------- pseudo/fx */ .after\:absolute:after { content: var(--tw-content, ""); position: absolute; } .after\:inset-0:after { content: var(--tw-content, ""); inset: 0; } .after\:z-\[1\]:after { content: var(--tw-content, ""); z-index: 1; } .\[mask-image\:linear-gradient\(to_right\2c black_82\%\2c transparent\)\] { -webkit-mask-image: linear-gradient(90deg, black 82%, transparent); mask-image: linear-gradient(90deg, black 82%, transparent); } /* ------------------------------------------------------------ scroll snap */ .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .snap-start { scroll-snap-align: start; } .\[scrollbar-width\:none\] { scrollbar-width: none; } .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { display: none; } .\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button, .\[\&\:\:-webkit-search-decoration\]\:appearance-none::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .\[\&_svg\]\:pointer-events-none svg { pointer-events: none; } .\[\&_svg\]\:shrink-0 svg { flex-shrink: 0; } .\[\&_svg\]\:size-4 svg { width: 1rem; height: 1rem; } /* --------------------------------------------------------------- grid gaps The source grid steps 8 / 10 / 12 / 16px. `min-[430px]:gap-2.5` only exists here, and a later rule wins regardless of breakpoint width, so the 640px and 1024px steps have to be restated after it or the grid stays at 10px. */ @media (min-width: 430px) { .min-\[430px\]\:gap-2\.5 { gap: .625rem; } } @media (min-width: 640px) { .sm\:gap-3 { gap: .75rem; } } @media (min-width: 1024px) { .lg\:gap-4 { gap: 1rem; } } /* -------------------------------------------------------- bottom sheets `hidden` has to beat the display utility on the same element. */ .rl-sheet[hidden], .rl-sheet-overlay[hidden], .rl-bar-search[hidden], .rl-bar-controls[hidden] { display: none !important; } .rl-bar-teeth[hidden] { display: none !important; } .rl-sheet { animation: rl-sheet-up .22s cubic-bezier(.32,.72,0,1); } @keyframes rl-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .rl-sheet { animation: none; } } /* ------------------------------------------------------- pinned bar edge Once the bar leaves the flow it grows the same ragged edge as the marquee. */ [data-rl-bar][data-pinned] > div:first-child { box-shadow: 0 6px 0 -3px rgba(0,0,0,.06); } /* ------------------------------------------------ WooCommerce loop resets The default Woo product-loop rules fight the grid: kill the float/width maths and the built-in list bullets so