/* Compare dock — .pt-*, markup in assets/paddle-tray.js. The one sheet loaded by all four paddle surfaces (the catalog, the 514 detail pages, /paddles/browse/compare and the quiz at /paddles), because the dock is reachable from all of them. Split out of paddle-finder.css so the quiz stops downloading 48 KB of catalog + detail CSS to get 15 KB of dock. design_handoff_paddle_compare. Deliberately a page-local palette + type, NOT the site tokens: this is a high-fidelity handoff, and (like the rankings redesign and the compare page's percentile exception) fidelity to the mock beats token reuse here. Hex values are the handoff's own; the three font vars name its Archivo / Spline Sans Mono / Source Serif 4. The dock prints no ratings at all — its chips carry names only — so the data-licensing firewall is untouched; the surface that prints the numbers is /paddles/browse/compare, which the bar's "Head to head" CTA navigates to. */ /* The compare DOCK (bar + add overlay, the pt- block near the foot of this file) is a high-fidelity handoff — design_handoff_paddle_compare — so per that handoff and the site's high-fi convention it wears its OWN type, not the site's Manrope/Space Mono tokens: Archivo for UI, Spline Sans Mono for labels/prices, Source Serif 4 (already loaded site-wide) for names. Loaded here via @import rather than a link so the one stylesheet that every dock-bearing page already pulls (browse, compare, all 486 detail pages) carries the fonts too — no 486-page regeneration to add a link. @import must precede every rule below, hence its place at the very top. The woff2 files only download once dock text actually paints, i.e. once a visitor compares. */ @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap"); /* The tray is `position: fixed` at the bottom of the viewport and it overlaps the end of the document. paddle-tray.js measures its own height into --pt-tray-h on ; without this padding the last row of cards and the footer's final link sit underneath it, unreachable by mouse. The 0px fallback matters — an unmounted tray must not leave a gap, and `var(--pt-tray-h)` with no fallback would make the whole declaration invalid-at-computed-value-time rather than zero. */ body { padding-bottom: var(--pt-tray-h, 0px); } /* ========================================================================== Compare dock — bar + add overlay markup in assets/paddle-tray.js · design_handoff_paddle_compare Deliberately a page-local palette + type, NOT the site tokens: this is a high-fidelity handoff, and (like the rankings redesign and the compare page's percentile exception) fidelity to the mock beats token reuse here. Hex values are the handoff's own; the three font vars below name its Archivo / Spline Sans Mono / Source Serif 4. The dock prints no ratings at all — its chips carry names only — so the data-licensing firewall is untouched; the surface that prints the numbers is /paddles/browse/compare, which the bar's "Head to head" CTA navigates to. ========================================================================== */ .pt-dock, .pt-overlay { --pt-ui: Archivo, system-ui, sans-serif; --pt-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace; --pt-serif: "Source Serif 4", Georgia, serif; } /* The dock is the fixed container that holds the dark bar. z-index 90 sits under the sticky .site-header (100) and under the mobile filter sheet (1000). It starts translated fully below the viewport and slides up when a paddle is selected. */ .pt-dock { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; transform: translateY(115%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0.27, 0.99); box-shadow: 0 -18px 48px rgba(22, 29, 23, 0.16); font-family: var(--pt-ui); } .pt-dock.is-visible { transform: translateY(0); } .pt-dock :focus-visible, .pt-overlay :focus-visible { outline: 2px solid #dde23f; outline-offset: 2px; } .pt-overlay-panel :focus-visible { outline-color: #2e6e5e; } /* -------------------------------------------------------------- the bar */ .pt-bar { flex: none; height: 78px; display: flex; align-items: center; gap: 16px; padding: 0 26px; background: #161d17; } .pt-label { flex: none; font-family: var(--pt-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #dde23f; } .pt-bar-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; } .pt-chips { display: flex; align-items: center; gap: 10px; min-width: 0; } .pt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 7px 7px 7px 16px; border-radius: 999px; background: #2b332b; white-space: nowrap; animation: pt-chip-in 0.25s ease; } .pt-chip-name { max-width: 22ch; overflow: hidden; font-family: var(--pt-ui); font-weight: 500; font-size: 15px; color: #efeddd; white-space: nowrap; text-overflow: ellipsis; } .pt-chip-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #b9bfaf; font-size: 13px; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pt-chip-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .pt-ghost { flex: none; padding: 8px 18px; border: 1.5px dashed #4a5348; border-radius: 999px; background: transparent; font-family: var(--pt-ui); font-weight: 500; font-size: 14.5px; color: #9ba394; white-space: nowrap; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .pt-ghost:hover { border-color: #dde23f; color: #dde23f; } .pt-hint { flex: none; font-family: var(--pt-ui); font-size: 13px; color: #9ba394; white-space: nowrap; } .pt-clear { flex: none; padding: 10px 20px; border: 1.5px solid #4a5348; border-radius: 13px; background: transparent; font-family: var(--pt-ui); font-weight: 600; font-size: 15px; color: #e8e6d6; cursor: pointer; transition: background 0.15s ease; } .pt-clear:hover { background: rgba(255, 255, 255, 0.06); } /* The lime primary CTA — no `.btn` base any more; it is fully specified here so the handoff's exact geometry survives regardless of what .btn does. */ .pt-go { flex: none; padding: 11px 22px; border: 1.5px solid #dde23f; border-radius: 13px; background: #dde23f; font-family: var(--pt-ui); font-weight: 700; font-size: 15.5px; color: #161d17; text-decoration: none; /* it is an now — never underline the button */ white-space: nowrap; cursor: pointer; transition: filter 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pt-go:not(:disabled):hover { filter: brightness(1.05); } /* At one paddle there is no pair to open yet — the ghost slot completes it. */ .pt-go:disabled { opacity: 0.4; cursor: default; } /* -------------------------------------- command add overlay (1b) — results */ /* The overlay's no-match line. */ .pt-slot-empty { margin: 0; padding: 10px 2px; font-family: var(--pt-mono); font-size: 13px; color: #8b8875; } /* result rows — the overlay's search results */ .pt-res { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 11px 14px; border: 1px solid #e0dbc7; border-radius: 12px; background: #fbf9f0; font-family: var(--pt-ui); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .pt-res:hover, .pt-res.is-active { border-color: #2e6e5e; background: #fff; } .pt-res.is-active { border-width: 1.5px; } .pt-res-main { flex: 1; min-width: 0; } .pt-res-brand { display: block; font-family: var(--pt-mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6d7a24; } .pt-res-name { display: block; overflow: hidden; font-family: var(--pt-serif); font-weight: 600; font-size: 16.5px; color: #1e3d30; white-space: nowrap; text-overflow: ellipsis; } .pt-res-meta { flex: none; font-family: var(--pt-mono); font-size: 12px; color: #8b8875; white-space: nowrap; } .pt-res-price { flex: none; font-family: var(--pt-mono); font-weight: 700; font-size: 13.5px; color: #26261f; } .pt-res-add { flex: none; padding: 6px 13px; border-radius: 999px; background: #dde23f; font-family: var(--pt-ui); font-weight: 600; font-size: 13px; color: #161d17; white-space: nowrap; } /* ------------------------------------------------- command add overlay (1b) */ .pt-overlay { position: fixed; inset: 0; z-index: 1200; } .pt-overlay[hidden] { display: none; } .pt-overlay-scrim { position: absolute; inset: 0; background: rgba(22, 29, 23, 0.46); animation: pt-fade 0.15s ease; } .pt-overlay-panel { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); box-sizing: border-box; padding: 20px 22px 18px; border-radius: 18px; background: #fbf9f0; box-shadow: 0 30px 80px rgba(22, 29, 23, 0.4); font-family: var(--pt-ui); animation: pt-pop 0.18s cubic-bezier(0.32, 0.72, 0.27, 0.99); } .pt-overlay-head { display: flex; align-items: center; justify-content: space-between; } .pt-overlay-title { font-family: var(--pt-mono); font-weight: 700; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8b8875; } .pt-key { font-family: var(--pt-mono); font-weight: 600; font-size: 10.5px; color: #8b8875; border: 1px solid #d8d3c0; border-radius: 6px; padding: 3px 7px; } .pt-overlay-input { width: 100%; box-sizing: border-box; margin-top: 14px; padding: 12px 14px; border: 1.5px solid #2e6e5e; border-radius: 10px; background: #fff; font-family: var(--pt-ui); font-size: 15px; color: #26261f; outline: none; } .pt-overlay-input::placeholder { color: #a5a08c; } .pt-overlay-results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: min(50vh, 360px); overflow-y: auto; } .pt-overlay-hint { margin: 14px 0 0; font-family: var(--pt-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8b8875; } @keyframes pt-chip-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes pt-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pt-pop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* The bar wraps: chips take a full row of their own, Clear and the CTA follow. */ @media (max-width: 640px) { .pt-bar { height: auto; flex-wrap: wrap; gap: 8px 10px; padding: 12px 16px; } .pt-bar-mid { order: 3; flex-basis: 100%; } .pt-clear { order: 4; } .pt-go { order: 5; flex: 1; text-align: center; } } /* ========================================================================== Reduced motion ========================================================================== */ /* The dock slide and the chip/overlay entrances are keyframe/transition animations the global duration flatten does not fully neutralise (a keyframe still runs at 0s but pops; the transform slide would still jump). Kill them outright — the dock simply appears in place. */ @media (prefers-reduced-motion: reduce) { .pt-dock { transition: none; } .pt-chip, .pt-overlay-scrim, .pt-overlay-panel { animation: none; } }