/* CON-978 chat widget branding - Kevin Barry Motors (kbm2, template KBM2). * Source of truth: the designer's Figma "Kevin Barry Motors (Ai Assistant)" * (file s8ZB1uvkTrg0k4mz2Y9HuT) and its 16 @2x artboard PNGs, which outrank * the node dump wherever the two disagree. Tooling and QA: * tickets/CON-978/kbm2/qa-kbm2/; design notes: * tickets/CON-978/kbm2/DESIGN-kbm2.md. Glyphs are SVG exports of the file's * own nodes, each cross-checked against the artboards. * * Near-black navy and Kevin Barry red: an 81px header painted with the * designer's navy -> #51010F -> navy gradient, carrying the #EA0E35 assistant * roundel; #EDEDED bot bubbles with a #C7C7C7 hairline and a square * bottom-left corner on a WHITE ground; #0C0E23 user bubbles; #F1F1F1 * lozenge openers with a #B7B7B7 hairline, a red glyph, a #0A1741 title, a * black caption and a black chevron - no coloured cap; white chips on a * 0/4/4 25% shadow; white cards with a flush Details | I'm Interested split * bar; an #E4E6EA footer band with a white black-stroked input and a 52px * red send disc. The launcher is the designer's own 216x46 gradient * "Virtual Assistant" pill, bottom right on every viewport. * Type: Geist throughout - the site's own stylesheet already imports it. * The panel is 400x720 = the designer's artboard, so offsets transfer 1:1. * * Regenerate with tickets/CON-978/kbm2/build-theme-kbm2.py - edit the * generator, never this file. * * Served at /chat-theme; loaded by the widget AFTER its built-in stylesheet. */ .hdcw-fab,.hdcw-panel { --hdcw-accent: #EA0E35; --hdcw-on-accent: #fff; --hdcw-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --hdcw-bg: #fff; --hdcw-surface: #fff; /* Rectangle 8 is white (style 72:411 ai-white) */ --hdcw-text: #000000; --hdcw-muted: #6D6D6D; /* section heads, "Searching our stock..." */ --hdcw-faint: #C7C7C7; /* typing dots (decorative) */ --hdcw-footer: #504949; /* disclosure + T&C link (2008:473) */ --hdcw-border: #000000; /* input stroke 24:705 */ --hdcw-border-soft: #E4E6EA; /* card borders and dividers (19:538) */ --hdcw-img-bg: #E4E6EA; --hdcw-radius: 15px; /* panel 1:7 */ --hdcw-radius-bubble: 10px; /* every bubble, chip, card and lozenge */ --hdcw-head-color: #fff; --hdcw-user-bg: #0C0E23; --hdcw-user-color: #fff; --hdcw-link: #EA0E35; --hdcw-btn-bg: #EA0E35; --hdcw-btn-color: #fff; --hdcw-fab-gap: 0; /* flat-bottomed pill: it docks on a bar, not 12px above it */ } /* ---------- Launcher (icon-virtual-assistant 26002:611). On the 400x653 home * artboard the 216x46 pill ends 11px from the right edge and 10px from the * bottom. Bottom right on desktop AND mobile - the artwork draws no second * lockup, and the site's own stock-alert floater is gated off while the chat * is on (templates/KBM2/www/common/subscribe.blade.php). */ .hdcw-fab { width: 216px; height: 46px; right: 11px; bottom: 10px; max-width: calc(100vw - 22px); border: 0; border-radius: 10px; padding: 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%22216%22%20height=%2246%22%20viewBox=%220%200%20216%2046%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform=%22translate(-4,0)%22%3E%0A%3Cg%3E%0A%3Crect%20x=%224%22%20width=%22216%22%20height=%2246%22%20rx=%2210%22%20fill=%22url(%23paint0_linear_26002_611)%22%20shape-rendering=%22crispEdges%22/%3E%0A%3Crect%20x=%224.5%22%20y=%220.5%22%20width=%22215%22%20height=%2245%22%20rx=%229.5%22%20stroke=%22%23494D6E%22%20shape-rendering=%22crispEdges%22/%3E%0A%3C/g%3E%0A%3Cpath%20d=%22M29.416%2028L25.304%2016.64H27.496L30.68%2025.68L33.848%2016.64H36.04L31.912%2028H29.416Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M37.2175%2028V19.456H39.2655V28H37.2175ZM37.1855%2018.32V16.496H39.3135V18.32H37.1855Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M41.7994%2028V19.456H43.7194L43.7994%2021.824L43.6234%2021.792C43.7514%2020.9706%2043.9914%2020.3786%2044.3434%2020.016C44.7061%2019.6426%2045.1967%2019.456%2045.8154%2019.456H46.5994V21.216H45.7994C45.3621%2021.216%2044.9994%2021.28%2044.7114%2021.408C44.4234%2021.536%2044.2047%2021.7386%2044.0554%2022.016C43.9167%2022.2826%2043.8474%2022.6346%2043.8474%2023.072V28H41.7994Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M51.3209%2028C50.4676%2028%2049.8382%2027.8026%2049.4329%2027.408C49.0382%2027.0133%2048.8409%2026.3946%2048.8409%2025.552V17.456H50.8889V25.36C50.8889%2025.7546%2050.9742%2026.032%2051.1449%2026.192C51.3156%2026.3413%2051.5822%2026.416%2051.9449%2026.416H53.1449V28H51.3209ZM47.4969%2021.04V19.456H53.1449V21.04H47.4969Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M57.6541%2028.192C56.7901%2028.192%2056.1021%2027.9093%2055.5901%2027.344C55.0888%2026.768%2054.8381%2025.9733%2054.8381%2024.96V19.456H56.8861V24.448C56.8861%2025.1626%2057.0035%2025.6906%2057.2381%2026.032C57.4835%2026.3626%2057.8515%2026.528%2058.3421%2026.528C58.8968%2026.528%2059.3235%2026.3466%2059.6221%2025.984C59.9315%2025.6106%2060.0861%2025.072%2060.0861%2024.368V19.456H62.1341V28H60.2621L60.2141%2025.648L60.4701%2025.728C60.3421%2026.5386%2060.0381%2027.152%2059.5581%2027.568C59.0781%2027.984%2058.4435%2028.192%2057.6541%2028.192Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M67.025%2028.192C66.129%2028.192%2065.409%2027.9893%2064.865%2027.584C64.321%2027.168%2064.049%2026.592%2064.049%2025.856C64.049%2025.12%2064.2783%2024.544%2064.737%2024.128C65.1957%2023.712%2065.8943%2023.4133%2066.833%2023.232L69.665%2022.672C69.665%2022.064%2069.5263%2021.6106%2069.249%2021.312C68.9717%2021.0026%2068.561%2020.848%2068.017%2020.848C67.5263%2020.848%2067.137%2020.9653%2066.849%2021.2C66.5717%2021.424%2066.3797%2021.7493%2066.273%2022.176L64.193%2022.08C64.3637%2021.1733%2064.7797%2020.48%2065.441%2020C66.1024%2019.5093%2066.961%2019.264%2068.017%2019.264C69.233%2019.264%2070.1503%2019.5733%2070.769%2020.192C71.3983%2020.8%2071.713%2021.6746%2071.713%2022.816V25.92C71.713%2026.144%2071.7504%2026.2986%2071.825%2026.384C71.9104%2026.4693%2072.033%2026.512%2072.193%2026.512H72.465V28C72.401%2028.0213%2072.2943%2028.0373%2072.145%2028.048C72.0063%2028.0586%2071.8624%2028.064%2071.713%2028.064C71.361%2028.064%2071.0463%2028.0106%2070.769%2027.904C70.4917%2027.7866%2070.2784%2027.5893%2070.129%2027.312C69.9797%2027.024%2069.905%2026.6346%2069.905%2026.144L70.081%2026.272C69.9957%2026.6453%2069.809%2026.9813%2069.521%2027.28C69.2437%2027.568%2068.8917%2027.792%2068.465%2027.952C68.0383%2028.112%2067.5583%2028.192%2067.025%2028.192ZM67.441%2026.704C67.8997%2026.704%2068.2943%2026.6133%2068.625%2026.432C68.9557%2026.2506%2069.2117%2026%2069.393%2025.68C69.5743%2025.36%2069.665%2024.9813%2069.665%2024.544V24.064L67.457%2024.512C66.9983%2024.608%2066.6677%2024.752%2066.465%2024.944C66.273%2025.1253%2066.177%2025.3653%2066.177%2025.664C66.177%2025.9946%2066.2837%2026.2506%2066.497%2026.432C66.721%2026.6133%2067.0357%2026.704%2067.441%2026.704Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M75.878%2028C75.2593%2028%2074.7633%2027.84%2074.39%2027.52C74.0167%2027.2%2073.83%2026.688%2073.83%2025.984V16.64H75.878V25.776C75.878%2025.9893%2075.9313%2026.1493%2076.038%2026.256C76.1553%2026.3626%2076.3153%2026.416%2076.518%2026.416H77.142V28H75.878Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M81.8653%2028L85.9613%2016.64H88.5053L92.6013%2028H90.4253L89.4813%2025.312H84.9853L84.0413%2028H81.8653ZM85.5933%2023.536H88.8733L87.2413%2018.736L85.5933%2023.536Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M97.282%2028.192C96.4394%2028.192%2095.73%2028.0693%2095.154%2027.824C94.5887%2027.5786%2094.1514%2027.2373%2093.842%2026.8C93.5327%2026.3626%2093.3567%2025.8666%2093.314%2025.312L95.41%2025.216C95.4847%2025.664%2095.6713%2026.0106%2095.97%2026.256C96.2687%2026.5013%2096.7113%2026.624%2097.298%2026.624C97.778%2026.624%2098.1514%2026.5493%2098.418%2026.4C98.6954%2026.24%2098.834%2025.9946%2098.834%2025.664C98.834%2025.472%2098.786%2025.312%2098.69%2025.184C98.594%2025.056%2098.4127%2024.944%2098.146%2024.848C97.8793%2024.752%2097.4847%2024.656%2096.962%2024.56C96.0874%2024.4106%2095.3994%2024.2293%2094.898%2024.016C94.3967%2023.792%2094.0394%2023.5146%2093.826%2023.184C93.6234%2022.8533%2093.522%2022.4426%2093.522%2021.952C93.522%2021.152%2093.826%2020.5066%2094.434%2020.016C95.0527%2019.5146%2095.954%2019.264%2097.138%2019.264C97.906%2019.264%2098.5514%2019.392%2099.074%2019.648C99.5967%2019.8933%20100.002%2020.2346%20100.29%2020.672C100.589%2021.0986%20100.775%2021.5893%20100.85%2022.144L98.786%2022.24C98.7327%2021.952%2098.6367%2021.7013%2098.498%2021.488C98.3594%2021.2746%2098.1727%2021.1146%2097.938%2021.008C97.7034%2020.8906%2097.426%2020.832%2097.106%2020.832C96.626%2020.832%2096.2634%2020.928%2096.018%2021.12C95.7727%2021.312%2095.65%2021.568%2095.65%2021.888C95.65%2022.112%2095.7034%2022.2986%2095.81%2022.448C95.9274%2022.5973%2096.114%2022.72%2096.37%2022.816C96.626%2022.9013%2096.9674%2022.9813%2097.394%2023.056C98.29%2023.1946%2098.994%2023.376%2099.506%2023.6C100.029%2023.8133%20100.397%2024.0906%20100.61%2024.432C100.834%2024.7626%20100.946%2025.1626%20100.946%2025.632C100.946%2026.176%20100.791%2026.64%20100.482%2027.024C100.183%2027.408%2099.7567%2027.7013%2099.202%2027.904C98.658%2028.096%2098.018%2028.192%2097.282%2028.192Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M106.176%2028.192C105.334%2028.192%20104.624%2028.0693%20104.048%2027.824C103.483%2027.5786%20103.046%2027.2373%20102.736%2026.8C102.427%2026.3626%20102.251%2025.8666%20102.208%2025.312L104.304%2025.216C104.379%2025.664%20104.566%2026.0106%20104.864%2026.256C105.163%2026.5013%20105.606%2026.624%20106.192%2026.624C106.672%2026.624%20107.046%2026.5493%20107.312%2026.4C107.59%2026.24%20107.728%2025.9946%20107.728%2025.664C107.728%2025.472%20107.68%2025.312%20107.584%2025.184C107.488%2025.056%20107.307%2024.944%20107.04%2024.848C106.774%2024.752%20106.379%2024.656%20105.856%2024.56C104.982%2024.4106%20104.294%2024.2293%20103.792%2024.016C103.291%2023.792%20102.934%2023.5146%20102.72%2023.184C102.518%2022.8533%20102.416%2022.4426%20102.416%2021.952C102.416%2021.152%20102.72%2020.5066%20103.328%2020.016C103.947%2019.5146%20104.848%2019.264%20106.032%2019.264C106.8%2019.264%20107.446%2019.392%20107.968%2019.648C108.491%2019.8933%20108.896%2020.2346%20109.184%2020.672C109.483%2021.0986%20109.67%2021.5893%20109.744%2022.144L107.68%2022.24C107.627%2021.952%20107.531%2021.7013%20107.392%2021.488C107.254%2021.2746%20107.067%2021.1146%20106.832%2021.008C106.598%2020.8906%20106.32%2020.832%20106%2020.832C105.52%2020.832%20105.158%2020.928%20104.912%2021.12C104.667%2021.312%20104.544%2021.568%20104.544%2021.888C104.544%2022.112%20104.598%2022.2986%20104.704%2022.448C104.822%2022.5973%20105.008%2022.72%20105.264%2022.816C105.52%2022.9013%20105.862%2022.9813%20106.288%2023.056C107.184%2023.1946%20107.888%2023.376%20108.4%2023.6C108.923%2023.8133%20109.291%2024.0906%20109.504%2024.432C109.728%2024.7626%20109.84%2025.1626%20109.84%2025.632C109.84%2026.176%20109.686%2026.64%20109.376%2027.024C109.078%2027.408%20108.651%2027.7013%20108.096%2027.904C107.552%2028.096%20106.912%2028.192%20106.176%2028.192Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M111.599%2028V19.456H113.647V28H111.599ZM111.567%2018.32V16.496H113.695V18.32H111.567Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M119.371%2028.192C118.529%2028.192%20117.819%2028.0693%20117.243%2027.824C116.678%2027.5786%20116.241%2027.2373%20115.931%2026.8C115.622%2026.3626%20115.446%2025.8666%20115.403%2025.312L117.499%2025.216C117.574%2025.664%20117.761%2026.0106%20118.059%2026.256C118.358%2026.5013%20118.801%2026.624%20119.387%2026.624C119.867%2026.624%20120.241%2026.5493%20120.507%2026.4C120.785%2026.24%20120.923%2025.9946%20120.923%2025.664C120.923%2025.472%20120.875%2025.312%20120.779%2025.184C120.683%2025.056%20120.502%2024.944%20120.235%2024.848C119.969%2024.752%20119.574%2024.656%20119.051%2024.56C118.177%2024.4106%20117.489%2024.2293%20116.987%2024.016C116.486%2023.792%20116.129%2023.5146%20115.915%2023.184C115.713%2022.8533%20115.611%2022.4426%20115.611%2021.952C115.611%2021.152%20115.915%2020.5066%20116.523%2020.016C117.142%2019.5146%20118.043%2019.264%20119.227%2019.264C119.995%2019.264%20120.641%2019.392%20121.163%2019.648C121.686%2019.8933%20122.091%2020.2346%20122.379%2020.672C122.678%2021.0986%20122.865%2021.5893%20122.939%2022.144L120.875%2022.24C120.822%2021.952%20120.726%2021.7013%20120.587%2021.488C120.449%2021.2746%20120.262%2021.1146%20120.027%2021.008C119.793%2020.8906%20119.515%2020.832%20119.195%2020.832C118.715%2020.832%20118.353%2020.928%20118.107%2021.12C117.862%2021.312%20117.739%2021.568%20117.739%2021.888C117.739%2022.112%20117.793%2022.2986%20117.899%2022.448C118.017%2022.5973%20118.203%2022.72%20118.459%2022.816C118.715%2022.9013%20119.057%2022.9813%20119.483%2023.056C120.379%2023.1946%20121.083%2023.376%20121.595%2023.6C122.118%2023.8133%20122.486%2024.0906%20122.699%2024.432C122.923%2024.7626%20123.035%2025.1626%20123.035%2025.632C123.035%2026.176%20122.881%2026.64%20122.571%2027.024C122.273%2027.408%20121.846%2027.7013%20121.291%2027.904C120.747%2028.096%20120.107%2028.192%20119.371%2028.192Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M127.921%2028C127.068%2028%20126.438%2027.8026%20126.033%2027.408C125.638%2027.0133%20125.441%2026.3946%20125.441%2025.552V17.456H127.489V25.36C127.489%2025.7546%20127.574%2026.032%20127.745%2026.192C127.916%2026.3413%20128.182%2026.416%20128.545%2026.416H129.745V28H127.921ZM124.097%2021.04V19.456H129.745V21.04H124.097Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M133.84%2028.192C132.944%2028.192%20132.224%2027.9893%20131.68%2027.584C131.136%2027.168%20130.864%2026.592%20130.864%2025.856C130.864%2025.12%20131.093%2024.544%20131.552%2024.128C132.011%2023.712%20132.709%2023.4133%20133.648%2023.232L136.48%2022.672C136.48%2022.064%20136.341%2021.6106%20136.064%2021.312C135.787%2021.0026%20135.376%2020.848%20134.832%2020.848C134.341%2020.848%20133.952%2020.9653%20133.664%2021.2C133.387%2021.424%20133.195%2021.7493%20133.088%2022.176L131.008%2022.08C131.179%2021.1733%20131.595%2020.48%20132.256%2020C132.917%2019.5093%20133.776%2019.264%20134.832%2019.264C136.048%2019.264%20136.965%2019.5733%20137.584%2020.192C138.213%2020.8%20138.528%2021.6746%20138.528%2022.816V25.92C138.528%2026.144%20138.565%2026.2986%20138.64%2026.384C138.725%2026.4693%20138.848%2026.512%20139.008%2026.512H139.28V28C139.216%2028.0213%20139.109%2028.0373%20138.96%2028.048C138.821%2028.0586%20138.677%2028.064%20138.528%2028.064C138.176%2028.064%20137.861%2028.0106%20137.584%2027.904C137.307%2027.7866%20137.093%2027.5893%20136.944%2027.312C136.795%2027.024%20136.72%2026.6346%20136.72%2026.144L136.896%2026.272C136.811%2026.6453%20136.624%2026.9813%20136.336%2027.28C136.059%2027.568%20135.707%2027.792%20135.28%2027.952C134.853%2028.112%20134.373%2028.192%20133.84%2028.192ZM134.256%2026.704C134.715%2026.704%20135.109%2026.6133%20135.44%2026.432C135.771%2026.2506%20136.027%2026%20136.208%2025.68C136.389%2025.36%20136.48%2024.9813%20136.48%2024.544V24.064L134.272%2024.512C133.813%2024.608%20133.483%2024.752%20133.28%2024.944C133.088%2025.1253%20132.992%2025.3653%20132.992%2025.664C132.992%2025.9946%20133.099%2026.2506%20133.312%2026.432C133.536%2026.6133%20133.851%2026.704%20134.256%2026.704Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M140.77%2028V19.456H142.626L142.706%2021.856L142.466%2021.76C142.551%2021.1626%20142.727%2020.6826%20142.994%2020.32C143.261%2019.9573%20143.586%2019.6906%20143.97%2019.52C144.354%2019.3493%20144.775%2019.264%20145.234%2019.264C145.863%2019.264%20146.391%2019.4026%20146.818%2019.68C147.255%2019.9573%20147.586%2020.3413%20147.81%2020.832C148.034%2021.312%20148.146%2021.872%20148.146%2022.512V28H146.098V23.168C146.098%2022.688%20146.05%2022.2826%20145.954%2021.952C145.858%2021.6213%20145.698%2021.3706%20145.474%2021.2C145.261%2021.0186%20144.973%2020.928%20144.61%2020.928C144.066%2020.928%20143.629%2021.12%20143.298%2021.504C142.978%2021.888%20142.818%2022.4426%20142.818%2023.168V28H140.77Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M153.37%2028C152.516%2028%20151.887%2027.8026%20151.482%2027.408C151.087%2027.0133%20150.89%2026.3946%20150.89%2025.552V17.456H152.938V25.36C152.938%2025.7546%20153.023%2026.032%20153.194%2026.192C153.364%2026.3413%20153.631%2026.416%20153.994%2026.416H155.194V28H153.37ZM149.546%2021.04V19.456H155.194V21.04H149.546Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M193.296%2010.2381C193.939%2010.2403%20194.57%2010.2856%20195.19%2010.3741C194.696%2010.9797%20194.354%2011.6983%20194.194%2012.4681C194.033%2013.2378%20194.059%2014.0358%20194.269%2014.7932C194.479%2015.5506%20194.866%2016.2448%20195.398%2016.8161C195.93%2017.3873%20196.59%2017.8186%20197.322%2018.0727L197.923%2018.2815C198.153%2018.3614%20198.363%2018.4941%20198.535%2018.6692C198.707%2018.8443%20198.837%2019.0574%20198.916%2019.2918L199.123%2019.9038C199.373%2020.6479%20199.797%2021.319%20200.358%2021.8596C200.919%2022.4002%20201.601%2022.794%20202.345%2023.0073C203.088%2023.2205%20203.872%2023.2468%20204.628%2023.0838C205.384%2022.9208%20206.09%2022.5735%20206.685%2022.0717C206.774%2022.7021%20206.819%2023.3448%20206.82%2024C206.82%2025.8072%20206.47%2027.5968%20205.79%2029.2665C205.111%2030.9361%20204.115%2032.4532%20202.859%2033.7311C201.603%2035.0091%20200.112%2036.0227%20198.472%2036.7143C196.831%2037.4059%20195.072%2037.7619%20193.296%2037.7619H192.501V39.381C192.501%2039.8104%20192.333%2040.2222%20192.035%2040.5258C191.737%2040.8294%20191.332%2041%20190.91%2041C182.93%2041%20175%2034.6647%20175%2024C175%2020.3501%20176.425%2016.8497%20178.961%2014.2689C181.497%2011.688%20184.937%2010.2381%20188.523%2010.2381H193.296ZM185.341%2021.5714C184.709%2021.5714%20184.102%2021.8273%20183.654%2022.2827C183.206%2022.7382%20182.955%2023.3559%20182.955%2024C182.955%2024.6441%20183.206%2025.2618%20183.654%2025.7173C184.102%2026.1727%20184.709%2026.4286%20185.341%2026.4286C185.974%2026.4286%20186.581%2026.1727%20187.029%2025.7173C187.477%2025.2618%20187.728%2024.6441%20187.728%2024C187.728%2023.3559%20187.477%2022.7382%20187.029%2022.2827C186.581%2021.8273%20185.974%2021.5714%20185.341%2021.5714ZM196.478%2021.5714C195.845%2021.5714%20195.238%2021.8273%20194.791%2022.2827C194.343%2022.7382%20194.092%2023.3559%20194.092%2024C194.092%2024.6441%20194.343%2025.2618%20194.791%2025.7173C195.238%2026.1727%20195.845%2026.4286%20196.478%2026.4286C197.111%2026.4286%20197.718%2026.1727%20198.166%2025.7173C198.613%2025.2618%20198.865%2024.6441%20198.865%2024C198.865%2023.3559%20198.613%2022.7382%20198.166%2022.2827C197.718%2021.8273%20197.111%2021.5714%20196.478%2021.5714Z%22%20fill=%22%23EA0E35%22/%3E%0A%3Cpath%20d=%22M203.5%207C203.839%207.00014%20204.17%207.10628%20204.445%207.30358C204.721%207.50087%20204.928%207.77944%20205.038%208.10029L205.249%208.71463C205.737%2010.1432%20206.858%2011.2662%20208.289%2011.7538L208.901%2011.9635C209.222%2012.0733%20209.5%2012.2805%20209.697%2012.5562C209.894%2012.8319%20210%2013.1622%20210%2013.5009C210%2013.8397%20209.894%2014.17%20209.697%2014.4457C209.5%2014.7214%20209.222%2014.9286%20208.901%2015.0384L208.287%2015.2497C206.858%2015.7373%20205.735%2016.8587%20205.247%2018.2889L205.038%2018.9016C204.928%2019.2221%20204.721%2019.5003%20204.445%2019.6972C204.169%2019.8941%20203.839%2020%20203.5%2020C203.161%2020%20202.831%2019.8941%20202.555%2019.6972C202.279%2019.5003%20202.072%2019.2221%20201.962%2018.9016L201.751%2018.2873C201.51%2017.5821%20201.111%2016.9416%20200.584%2016.4147C200.057%2015.8879%20199.417%2015.4888%20198.711%2015.2481L198.099%2015.0384C197.778%2014.9286%20197.5%2014.7214%20197.303%2014.4457C197.106%2014.17%20197%2013.8397%20197%2013.5009C197%2013.1622%20197.106%2012.8319%20197.303%2012.5562C197.5%2012.2805%20197.778%2012.0733%20198.099%2011.9635L198.713%2011.7522C200.142%2011.2646%20201.265%2010.1432%20201.753%208.713L201.962%208.10029C202.072%207.77944%20202.279%207.50087%20202.555%207.30358C202.83%207.10628%20203.161%207.00014%20203.5%207Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M196.5%203C196.683%203.00007%20196.861%203.05723%20197.009%203.16346C197.157%203.2697%20197.269%203.4197%20197.328%203.59246L197.442%203.92326C197.704%204.6925%20198.308%205.29721%20199.079%205.55975L199.408%205.67264C199.581%205.73177%20199.731%205.84336%20199.837%205.99179C199.943%206.14023%20200%206.31809%20200%206.50051C200%206.68293%20199.943%206.86079%20199.837%207.00923C199.731%207.15766%20199.581%207.26925%20199.408%207.32838L199.078%207.44215C198.308%207.70469%20197.703%208.30852%20197.441%209.07864L197.328%209.40856C197.269%209.58113%20197.157%209.73091%20197.009%209.83695C196.86%209.94299%20196.682%2010%20196.5%2010C196.318%2010%20196.14%209.94299%20195.991%209.83695C195.843%209.73091%20195.731%209.58113%20195.672%209.40856L195.558%209.07776C195.429%208.69808%20195.214%208.35315%20194.93%208.06946C194.646%207.78578%20194.301%207.57088%20193.921%207.44127L193.592%207.32838C193.419%207.26925%20193.269%207.15766%20193.163%207.00923C193.057%206.86079%20193%206.68293%20193%206.50051C193%206.31809%20193.057%206.14023%20193.163%205.99179C193.269%205.84336%20193.419%205.73177%20193.592%205.67264L193.922%205.55887C194.692%205.29633%20195.297%204.6925%20195.559%203.92238L195.672%203.59246C195.731%203.4197%20195.843%203.2697%20195.991%203.16346C196.139%203.05723%20196.317%203.00007%20196.5%203Z%22%20fill=%22white%22/%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id=%22paint0_linear_26002_611%22%20x1=%2261%22%20y1=%2223%22%20x2=%22129%22%20y2=%2267%22%20gradientUnits=%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color=%22%230C0F20%22/%3E%0A%3Cstop%20offset=%220.466346%22%20stop-color=%22%23730014%22%20stop-opacity=%220.7%22/%3E%0A%3Cstop%20offset=%220.914701%22%20stop-color=%22%230C0F20%22/%3E%0A%3C/linearGradient%3E%0A%3C/defs%3E%0A%3C/g%3E%3C/svg%3E") center / 216px 46px no-repeat; box-shadow: 0 4px 4px rgba(0,0,0,.25); /* DROP_SHADOW #000000@0.25 0/4/4 */ z-index: 1030; /* under the site's Bootstrap 4.3.1 modals (1050) */ } .hdcw-fab > svg { display: none; } /* the widget's built-in balloon */ .hdcw-fab:hover { transform: scale(1.02); transform-origin: right bottom; } /* ---------- Header (24:711): an 81px band painted with the designer's * gradient, r15 on top. Mark 35x38 at x25 y18; title Geist Bold 18/18 at * x81 y23; subtitle Geist Medium 12 at x80 y45, UNDER the title. Nav icons * at y24: reset 20x16 @296, expand 16x16 @334, close 15x15 @369. */ .hdcw-panel .hdcw-head { position: relative; height: 81px; flex: none; box-sizing: border-box; overflow: hidden; /* an over-long name is clipped, never spilled */ align-items: flex-start; padding: 0 15px 0 25px; gap: 0; background: linear-gradient(136.1deg, #0C0F20 36%, #51010F 49.2%, #0C0F20 64.5%); } .hdcw-head::before { content: ''; flex: 0 0 35px; height: 38px; margin: 18px 21px 0 0; /* title at x81 */ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2235%22%20height=%2238%22%20viewBox=%220%200%2035%2038%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M18.2964%207.2381C18.9392%207.24026%2019.5703%207.28559%2020.1897%207.3741C19.6959%207.97968%2019.3541%208.69827%2019.1937%209.46806C19.0333%2010.2378%2019.059%2011.0358%2019.2688%2011.7932C19.4785%2012.5506%2019.866%2013.2448%2020.3978%2013.8161C20.9296%2014.3873%2021.5898%2014.8186%2022.3216%2015.0727L22.923%2015.2815C23.1534%2015.3614%2023.3627%2015.4941%2023.5349%2015.6692C23.707%2015.8443%2023.8373%2016.0574%2023.9158%2016.2918L24.1226%2016.9038C24.3727%2017.6479%2024.7965%2018.319%2025.3578%2018.8596C25.919%2019.4002%2026.6008%2019.794%2027.3446%2020.0073C28.0884%2020.2205%2028.8719%2020.2468%2029.6279%2020.0838C30.3839%2019.9208%2031.0897%2019.5735%2031.6846%2019.0717C31.7737%2019.7021%2031.8188%2020.3448%2031.8199%2021C31.8199%2022.8072%2031.4701%2024.5968%2030.7905%2026.2665C30.1108%2027.9361%2029.1147%2029.4532%2027.8589%2030.7311C26.6032%2032.0091%2025.1124%2033.0227%2023.4716%2033.7143C21.8309%2034.4059%2020.0723%2034.7619%2018.2964%2034.7619H17.5009V36.381C17.5009%2036.8104%2017.3333%2037.2222%2017.0349%2037.5258C16.7366%2037.8294%2016.3319%2038%2015.9099%2038C7.92951%2038%200%2031.6647%200%2021C0%2017.3501%201.42479%2013.8497%203.96093%2011.2689C6.49706%208.68801%209.9368%207.2381%2013.5234%207.2381H18.2964ZM10.3415%2018.5714C9.70852%2018.5714%209.10151%2018.8273%208.65395%2019.2827C8.2064%2019.7382%207.95497%2020.3559%207.95497%2021C7.95497%2021.6441%208.2064%2022.2618%208.65395%2022.7173C9.10151%2023.1727%209.70852%2023.4286%2010.3415%2023.4286C10.9744%2023.4286%2011.5814%2023.1727%2012.029%2022.7173C12.4765%2022.2618%2012.7279%2021.6441%2012.7279%2021C12.7279%2020.3559%2012.4765%2019.7382%2012.029%2019.2827C11.5814%2018.8273%2010.9744%2018.5714%2010.3415%2018.5714ZM21.4784%2018.5714C20.8455%2018.5714%2020.2385%2018.8273%2019.7909%2019.2827C19.3434%2019.7382%2019.0919%2020.3559%2019.0919%2021C19.0919%2021.6441%2019.3434%2022.2618%2019.7909%2022.7173C20.2385%2023.1727%2020.8455%2023.4286%2021.4784%2023.4286C22.1113%2023.4286%2022.7184%2023.1727%2023.1659%2022.7173C23.6135%2022.2618%2023.8649%2021.6441%2023.8649%2021C23.8649%2020.3559%2023.6135%2019.7382%2023.1659%2019.2827C22.7184%2018.8273%2022.1113%2018.5714%2021.4784%2018.5714Z%22%20fill=%22%23EA0E35%22/%3E%0A%3Cpath%20d=%22M28.5%204C28.8391%204.00014%2029.1696%204.10628%2029.4453%204.30358C29.7211%204.50087%2029.9282%204.77944%2030.0377%205.10029L30.249%205.71463C30.7367%207.14321%2031.8582%208.26625%2033.2886%208.75382L33.9015%208.96347C34.222%209.0733%2034.5002%209.28053%2034.6972%209.55619C34.8941%209.83185%2035%2010.1622%2035%2010.5009C35%2010.8397%2034.8941%2011.17%2034.6972%2011.4457C34.5002%2011.7214%2034.222%2011.9286%2033.9015%2012.0384L33.287%2012.2497C31.8582%2012.7373%2030.735%2013.8587%2030.2474%2015.2889L30.0377%2015.9016C29.9279%2016.2221%2029.7206%2016.5003%2029.4449%2016.6972C29.1692%2016.8941%2028.8388%2017%2028.5%2017C28.1612%2017%2027.8308%2016.8941%2027.5551%2016.6972C27.2794%2016.5003%2027.0721%2016.2221%2026.9623%2015.9016L26.751%2015.2873C26.5103%2014.5821%2026.1111%2013.9416%2025.5842%2013.4147C25.0573%2012.8879%2024.4166%2012.4888%2023.7114%2012.2481L23.0985%2012.0384C22.778%2011.9286%2022.4998%2011.7214%2022.3028%2011.4457C22.1059%2011.17%2022%2010.8397%2022%2010.5009C22%2010.1622%2022.1059%209.83185%2022.3028%209.55619C22.4998%209.28053%2022.778%209.0733%2023.0985%208.96347L23.713%208.75219C25.1418%208.26462%2026.265%207.14321%2026.7526%205.713L26.9623%205.10029C27.0718%204.77944%2027.2789%204.50087%2027.5547%204.30358C27.8304%204.10628%2028.1609%204.00014%2028.5%204Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M21.5%200C21.6826%207.28344e-05%2021.8606%200.0572283%2022.009%200.163465C22.1575%200.269701%2022.269%200.4197%2022.328%200.592461L22.4418%200.92326C22.7044%201.6925%2023.3083%202.29721%2024.0785%202.55975L24.4085%202.67264C24.5811%202.73177%2024.7309%202.84336%2024.8369%202.99179C24.943%203.14023%2025%203.31809%2025%203.50051C25%203.68293%2024.943%203.86079%2024.8369%204.00923C24.7309%204.15766%2024.5811%204.26925%2024.4085%204.32838L24.0776%204.44215C23.3083%204.70469%2022.7035%205.30852%2022.4409%206.07864L22.328%206.40856C22.2688%206.58113%2022.1572%206.73091%2022.0088%206.83695C21.8603%206.94299%2021.6824%207%2021.5%207C21.3176%207%2021.1397%206.94299%2020.9912%206.83695C20.8428%206.73091%2020.7312%206.58113%2020.672%206.40856L20.5582%206.07776C20.4286%205.69808%2020.2137%205.35315%2019.9299%205.06946C19.6462%204.78578%2019.3012%204.57088%2018.9215%204.44127L18.5915%204.32838C18.4189%204.26925%2018.2691%204.15766%2018.1631%204.00923C18.057%203.86079%2018%203.68293%2018%203.50051C18%203.31809%2018.057%203.14023%2018.1631%202.99179C18.2691%202.84336%2018.4189%202.73177%2018.5915%202.67264L18.9224%202.55887C19.6917%202.29633%2020.2965%201.6925%2020.5591%200.922384L20.672%200.592461C20.731%200.4197%2020.8425%200.269701%2020.991%200.163465C21.1394%200.0572283%2021.3174%207.28344e-05%2021.5%200Z%22%20fill=%22white%22/%3E%0A%3C/svg%3E") center / contain no-repeat; } .hdcw-head > div { margin-top: 23px; min-width: 0; padding-right: 10px; } .hdcw-head b { font-size: 18px; line-height: 18px; font-weight: 700; white-space: pre-line; overflow: hidden; text-overflow: ellipsis; } .hdcw-head small { display: block; margin-top: 4px; /* subtitle box top at y45 */ opacity: 1; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; } .hdcw-reset, .hdcw-exp, .hdcw-close { flex: none; align-self: flex-start; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; } .hdcw-reset { width: 22px; height: 18px; margin: 23px 0 0 auto; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2222%22%20height=%2218%22%20viewBox=%220%200%2022%2018%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M13%201C17.4133%201%2021%204.58667%2021%209C21%2013.4133%2017.4133%2017%2013%2017C8.58667%2017%205%2013.4133%205%209V5.66667%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cpath%20d=%22M1%209L5%205L9%209%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); background-size: 22px 18px; } .hdcw-reset svg { display: none; } .hdcw-panel:not(.hdcw-max) .hdcw-exp { width: 18px; height: 18px; margin: 23px 0 0 16px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2218%22%20height=%2218%22%20viewBox=%22-1%20-1%2018%2018%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M1.2002%2012V14.7998H4V16H0V12H1.2002ZM16%2016H12V14.7998H14.7998V12H16V16ZM16%204H14.7998V1.2002H12V0H16V4ZM4%201.2002H1.2002V4H0V0H4V1.2002Z%22%20fill=%22white%22/%3E%0A%3C/svg%3E"); background-size: 18px 18px; } .hdcw-panel:not(.hdcw-max) .hdcw-exp svg { display: none; } .hdcw-max .hdcw-exp { margin: 23px 0 0 16px; font-size: 0; } .hdcw-close { width: 17px; height: 17px; margin: 23px 0 0 17px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2217%22%20height=%2217%22%20viewBox=%22-1%20-1%2017%2017%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M15%201.74427L13.2557%200L7.5%205.75573L1.74427%200L0%201.74427L5.75573%207.5L0%2013.2557L1.74427%2015L7.5%209.24427L13.2557%2015L15%2013.2557L9.24427%207.5L15%201.74427Z%22%20fill=%22white%22/%3E%0A%3C/svg%3E"); background-size: 17px 17px; } /* ---------- Message column. Bot bubbles and lozenges start at x16; user * bubbles end at x382 (42:676, 4048:708, 2030:495). */ .hdcw-msgs { padding: 14px 18px 14px 16px; gap: 11px; } /* Bubbles. Bot (1:14 / 37:322 / 37:325 / 16:205 / 42:720 / 31:256): #EDEDED, * 1px #C7C7C7 inside stroke, r10 with the BOTTOM-LEFT corner square, Geist * Regular 14 on an 18px leading with 1% tracking, text 22px in, a one-line * bubble 51 tall (37:325). Fixed 334px (91.25% of the column) on every * artboard. * User (42:676 / 4048:708 / 19:649): #0C0E23, white Regular 14, r10 with the * BOTTOM-RIGHT corner square, 48 tall for one line, text 17px in. */ .hdcw-msg { max-width: 96%; /* the long user bubble 2030:495 is 352 of 366 */ /* 22px in on all 31 bot bubbles in the file; 15px down is the artwork's * commonest top inset (14-15 on 22 of them, 13-19 overall - the designer * sized each rectangle by hand). */ padding: 15px 22px 15px 21px; font-size: 14px; line-height: 18px; letter-spacing: .01em; } .hdcw-bot { width: 91.25%; max-width: 91.25%; box-sizing: border-box; background: #EDEDED; border-color: #C7C7C7; border-radius: 10px 10px 10px 0; } /* The greeting (1:11, identical on the seven artboards that draw it) carries * NO tracking, and its Bold headline is followed by a 24px line where the two * plain lines are 18px apart - so the headline is an inline-block with a 6px * bottom margin, which grows its own line only, whatever the admin copy says * after it. Cap line 18px under the bubble's outer edge, in a 95px bubble. */ .hdcw-msgs > .hdcw-bot:first-child { letter-spacing: 0; padding: 13.5px 22px 19.5px 21px; } .hdcw-bot b, .hdcw-bot strong { font-weight: 700; } .hdcw-msgs > .hdcw-bot:first-child b, .hdcw-msgs > .hdcw-bot:first-child strong { display: inline-block; margin-bottom: 6px; } /* "We have 63 used vehicles in stock" (16:206) and "50 automatic cars" * (19:516) set their numbers SemiBold, not Bold. */ .hdcw-bot:not(:first-child) b, .hdcw-bot:not(:first-child) strong { font-weight: 600; } .hdcw-bot a.hdcw-link { font-weight: 600; color: #000000; text-decoration: underline; } /* The reply that lists cars as links (19:515 on 16-browse-auto) is drawn as * its own bubble: WHITE with a 1px #E4E6EA stroke, Geist 14 on a 19px * leading, SemiBold underlined car links, the text box 28px under the top * edge and 68px above the bottom one (the designer's fixed rectangle; the * #EDEDED long replies on 09-help7 / 10-help8 carry no links). */ .hdcw-bot:has(a.hdcw-link) { background: #fff; border-color: #E4E6EA; line-height: 19px; padding: 27px 22px 67px 21px; } .hdcw-user { border-radius: 10px 10px 0 10px; font-weight: 400; padding: 15px 17px; } /* 143x48 for one line (42:676) */ .hdcw-typing { background: #EDEDED; border-color: #C7C7C7; border-radius: 10px 10px 10px 0; padding: 16px 22px; } /* "Searching our stock..." (2030:573 / 19:537 / 19:652): Geist Regular 12, * #6D6D6D, x20 - 4px in from the bubble column. */ /* upright, not the widget's italic: the file uses no italic face at all. */ .hdcw-status { font-size: 12px; line-height: 16px; font-style: normal; padding: 0 4px; } /* ---------- Openers (lozenge 12:145 and its three siblings): a 361x72 * rectangle at x16, r10, #F1F1F1 with a 1px #B7B7B7 inside stroke and NO * shadow and NO coloured cap; a red glyph at the artwork's own offset, a * #0A1741 Geist Bold 16 title at x83 (the designer nudged each lozenge's own * text box between 82 and 84) y+18 and a black Regular 12 caption at y+39 * (::after - the widget renders one label); a black 6x12 chevron at x352.5. Tops at y219 / 300 / 381, "Something else" (361x52) at y462. */ .hdcw-opener { gap: 9px; margin: 18px 5px 0 0; } /* 361 wide: x16..377 */ .hdcw-opener button { position: relative; } .hdcw-opener button.hdcw-op-used, .hdcw-opener button.hdcw-op-new, .hdcw-opener button.hdcw-op-quiz, .hdcw-opener button.hdcw-op-alert, .hdcw-opener .hdcw-else.hdcw-op-else { box-sizing: border-box; border: 1px solid #B7B7B7; border-radius: 10px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%228%22%20height=%2214%22%20viewBox=%22-1%20-1%208%2014%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M5.40984e-09%201.215L1.00917%202.18156e-07L6%206L1.00917%2012L4.23728e-07%2010.785L3.97792%206L5.40984e-09%201.215Z%22%20fill=%22black%22/%3E%0A%3C/svg%3E") no-repeat right 17px top 28.5px / 8px 14px border-box, #F1F1F1; color: #0A1741; text-align: left; box-shadow: none; } .hdcw-opener button.hdcw-op-used, .hdcw-opener button.hdcw-op-new, .hdcw-opener button.hdcw-op-quiz, .hdcw-opener button.hdcw-op-alert { min-height: 72px; padding: 17px 40px 16px 66px; /* 1 + 17 + 21 title + 16 caption + 16 + 1 = 72 */ font-size: 16px; font-weight: 700; line-height: 21px; } .hdcw-opener button.hdcw-op-used:hover, .hdcw-opener button.hdcw-op-new:hover, .hdcw-opener button.hdcw-op-quiz:hover, .hdcw-opener button.hdcw-op-alert:hover, .hdcw-opener .hdcw-else.hdcw-op-else:hover { background-color: #E6E6E6; opacity: 1; } /* Glyph boxes, placed from the PADDING box (artwork offset - 16 column - 1px * border), each sized to its export rather than to the node bbox. */ .hdcw-opener button.hdcw-op-used::before, .hdcw-opener button.hdcw-op-new::before, .hdcw-opener button.hdcw-op-quiz::before, .hdcw-opener button.hdcw-op-alert::before, .hdcw-opener button.hdcw-op-else::before { content: ''; position: absolute; background-repeat: no-repeat; } /* Steering wheel 22x22 @38,243 -> 24x24 @37,242 with the bezel. */ .hdcw-opener button.hdcw-op-used::before, .hdcw-opener button.hdcw-op-new::before { left: 20px; top: 22px; width: 24px; height: 24px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%22-1%20-1%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M16.5%201.47387C18.1722%202.43933%2019.5608%203.82794%2020.5263%205.50016C21.4918%207.17236%2022%209.06925%2022%2011.0002C22%2012.9311%2021.4916%2014.8279%2020.5262%2016.5002C19.5608%2018.1723%2018.1722%2019.561%2016.4998%2020.5263C14.8276%2021.4918%2012.9307%2022%2010.9998%2022C9.0689%2022%207.17202%2021.4916%205.49981%2020.5262C3.82762%2019.5607%202.43901%2018.172%201.4736%2016.4998C0.508178%2014.8276%20-4.90487e-05%2012.9307%203.55042e-09%2010.9998L0.00550013%2010.6434C0.0671035%208.74371%200.619902%206.8924%201.61001%205.26994C2.6001%203.64749%203.99372%202.30926%205.65497%201.38574C7.31624%200.462223%209.18846%20-0.0150818%2011.0891%200.000363267C12.9898%200.0158083%2014.854%200.523476%2016.5%201.47387ZM2.2%2010.9998C2.20006%2013.1431%202.98238%2015.2128%204.40009%2016.8203C5.81781%2018.4277%207.77346%2019.4625%209.9%2019.7304V14.1128C9.39518%2013.9345%208.94132%2013.636%208.5776%2013.2432C8.21386%2012.8503%207.95118%2012.3748%207.8122%2011.8578L2.2352%2010.2034C2.21246%2010.4674%202.20074%2010.7321%202.2%2010.9998ZM19.7637%2010.2034L14.1878%2011.8567C14.0491%2012.3738%2013.7866%2012.8494%2013.4231%2013.2425C13.0596%2013.6355%2012.6058%2013.9342%2012.1011%2014.1128V19.7315C14.3189%2019.4521%2016.3473%2018.339%2017.7743%2016.6185C19.2013%2014.8978%2019.9201%2012.6987%2019.7846%2010.4674L19.7637%2010.2034ZM6.6%203.37906C4.7903%204.424%203.41151%206.07884%202.7104%208.04743L8.0036%209.61601C8.26773%209.04359%208.6903%208.5588%209.22132%208.219C9.75233%207.87921%2010.3696%207.69863%2011%207.69863C11.6304%207.69863%2012.2477%207.87921%2012.7787%208.219C13.3097%208.5588%2013.7323%209.04359%2013.9964%209.61601L19.2896%208.04743C18.8567%206.83213%2018.1619%205.72687%2017.2544%204.80994C16.3469%203.89299%2015.2489%203.18681%2014.0381%202.74137C12.8274%202.29595%2011.5335%202.12218%2010.2481%202.23239C8.96271%202.34258%207.71727%202.73405%206.6%203.37906Z%22%20fill=%22%23EA0E35%22/%3E%0A%3C/svg%3E"); background-size: 24px 24px; } /* Tapping hand: motion lines 18x7 @40,325 over the hand 19x22 @40.5,329. */ .hdcw-opener button.hdcw-op-quiz::before { left: 23px; top: 24px; width: 20px; height: 26px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2218%22%20height=%227%22%20viewBox=%220%200%2018%207%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M5.35972%200C2.94892%201.12193%201.10903%202.94879%200%205.10568L2.62376%206.33167C3.45495%204.71221%204.83307%203.33801%206.6428%202.49616L5.35972%200ZM12.639%200.00650369L11.3517%202.50396C13.0522%203.29566%2014.4951%204.60807%2015.379%206.33167L18%205.1096C16.8219%202.81359%2014.9038%201.06264%2012.639%200.00650369Z%22%20fill=%22%23EA0E35%22/%3E%0A%3C/svg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2219%22%20height=%2222%22%20viewBox=%220%200%2019%2022%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M15.8868%2021H6.12477C6.10299%2020.9999%206.08159%2020.9942%206.06255%2020.9837C6.0435%2020.9731%206.02742%2020.9579%206.01577%2020.9395L1.31677%2013.3635C1.17119%2013.1332%201.07304%2012.8761%201.02807%2012.6074C0.983109%2012.3387%200.992232%2012.0637%201.05491%2011.7985C1.11759%2011.5333%201.23256%2011.2833%201.39309%2011.0632C1.55362%2010.843%201.75647%2010.6571%201.98977%2010.5164C2.22307%2010.3756%202.48211%2010.2828%202.75172%2010.2435C3.02133%2010.2041%203.29609%2010.219%203.55989%2010.2871C3.82369%2010.3553%204.07123%2010.4755%204.28799%2010.6406C4.50476%2010.8056%204.6864%2011.0123%204.82227%2011.2485L6.05327%2013.3455V2.971C6.05327%202.44826%206.26093%201.94693%206.63057%201.57729C7.0002%201.20766%207.50153%201%208.02427%201C8.54701%201%209.04835%201.20766%209.41798%201.57729C9.78761%201.94693%209.99527%202.44826%209.99527%202.971V7.6355C9.99527%207.928%2010.2278%208.1685%2010.5203%208.178L16.3308%208.372C16.6141%208.38147%2016.8826%208.50067%2017.0796%208.70443C17.2767%208.90819%2017.3868%209.18055%2017.3868%209.464V19.5C17.3868%2019.8978%2017.2287%2020.2794%2016.9474%2020.5607C16.6661%2020.842%2016.2846%2021%2015.8868%2021Z%22%20stroke=%22%23EA0E35%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); background-size: 18px 7px, 19px 22px; background-position: 0 0, .5px 4px; } /* Bell 18x20 @41,403 -> the 2px stroke export is 20x22 @40,402. */ .hdcw-opener button.hdcw-op-alert::before { left: 23px; top: 20px; width: 20px; height: 22px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2220%22%20height=%2222%22%20viewBox=%220%200%2020%2022%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M6.62503%2016.5554V17.6665C6.62503%2018.5505%206.98061%2019.3984%207.61354%2020.0235C8.24647%2020.6486%209.1049%2020.9998%2010%2020.9998C10.8951%2020.9998%2011.7535%2020.6486%2012.3864%2020.0235C13.0194%2019.3984%2013.375%2018.5505%2013.375%2017.6665V16.5554M7.75002%203.22219C7.75002%202.63283%207.98707%202.0676%208.40903%201.65086C8.83098%201.23411%209.40327%200.999991%2010%200.999991C10.5967%200.999991%2011.169%201.23411%2011.591%201.65086C12.0129%202.0676%2012.25%202.63283%2012.25%203.22219C13.5419%203.82555%2014.6433%204.76477%2015.4361%205.93917C16.2287%207.11357%2016.6829%208.47889%2016.7499%209.8888V13.2221C16.8346%2013.9129%2017.0823%2014.5744%2017.4731%2015.1533C17.8639%2015.7323%2018.3869%2016.2125%2018.9999%2016.5554H1.00008C1.61313%2016.2125%202.13611%2015.7323%202.52691%2015.1533C2.91771%2014.5744%203.1654%2013.9129%203.25006%2013.2221V9.8888C3.31707%208.47889%203.77127%207.11357%204.56399%205.93917C5.35672%204.76477%206.45807%203.82555%207.75002%203.22219Z%22%20stroke=%22%23EA0E35%22%20stroke-width=%221.99998%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); background-size: 20px 22px; } .hdcw-opener button.hdcw-op-used::after, .hdcw-opener button.hdcw-op-new::after, .hdcw-opener button.hdcw-op-quiz::after, .hdcw-opener button.hdcw-op-alert::after { /* in flow under the title, not absolute: a title that wraps on a phone * pushes the caption down instead of printing over it */ display: block; text-align: left; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; color: #000000; } /* The artwork's captions, number included: a fixed "Over 30", not a live * count (the standard's ruling - always what the artwork shows). */ .hdcw-opener button.hdcw-op-used::after { content: 'Over 30 cars in stock'; } .hdcw-opener button.hdcw-op-quiz::after { content: 'Get matched to car to suit your needs'; } .hdcw-opener button.hdcw-op-alert::after { content: 'Receive a daily stock alert'; } /* "Something else" (2023:430 / 44002:623): the same lozenge at 361x52, no * caption. Title @83,477 in a rectangle starting at 462; "?" 8x16.8 @45,479; * chevron at y+21.5. */ .hdcw-opener .hdcw-else.hdcw-op-else { min-height: 52px; padding: 14px 40px 15px 66px; font-size: 16px; font-weight: 700; line-height: 21px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%228%22%20height=%2214%22%20viewBox=%22-1%20-1%208%2014%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M5.40984e-09%201.215L1.00917%202.18156e-07L6%206L1.00917%2012L4.23728e-07%2010.785L3.97792%206L5.40984e-09%201.215Z%22%20fill=%22black%22/%3E%0A%3C/svg%3E") no-repeat right 17px top 20.5px / 8px 14px border-box, #F1F1F1; } .hdcw-opener button.hdcw-op-else::before { left: 27px; top: 15px; width: 10px; height: 19px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2210%22%20height=%2219%22%20viewBox=%220%200%2010%2019%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M1.00502%204.81841C1.00502%20-0.266105%208.99498%20-0.266105%208.99498%204.81841C8.99498%208.45021%205.36318%207.72385%205.36318%2012.082M5.36318%2017.9074L5.37771%2017.8914%22%20stroke=%22%23EA0E35%22%20stroke-width=%222.01005%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); background-size: 10px 19px; } /* Context CTA ("Tell me about this car" 19:683): 349x55 at x24, r10, flat * #EA0E35, white Geist Bold 15, centred. */ .hdcw-opener button.hdcw-op-ctx { min-height: 55px; margin: 0 4px 0 8px; /* 349 wide at x24 inside the 361px opener column */ border: 0; border-radius: 10px; padding: 17px 0 18px; /* text box top 17px under the bar top (19:681) */ background: #EA0E35; color: #fff; font-size: 15px; font-weight: 700; line-height: 20px; text-align: center; } .hdcw-opener button.hdcw-op-ctx:hover { opacity: .9; } /* ---------- Chips (item 16:212): 31px white, r10, NO border, 0/4/4 25% * shadow, Geist Regular 12/13 black, centred, 19px of side padding, 5px gaps * both ways. Stock/model rows start 2px in from the bubble column (x18); * quiz answer rows are flush with the bubble at x16. Selected = a 1px * #0C0F20 stroke and nothing else ("Adventurous" 37:328). */ .hdcw-chips { gap: 5px; padding: 0 2px; } .hdcw-chip { background: #fff; /* The artwork's chip has NO stroke: 31 tall and exactly text + 2x19 wide * (16:208 / 16:209). The widget's 1px border would add 2px to both, so it * goes, and the selected state becomes an INSET shadow instead. */ border: 0; border-radius: 10px; color: #000000; min-height: 31px; box-sizing: border-box; padding: 10px 19px 8px; /* text box top 9px under the chip top (16:209) */ font-size: 12px; font-weight: 400; line-height: 13px; letter-spacing: 0; box-shadow: 0 4px 4px rgba(0,0,0,.25); } .hdcw-chip:hover { background: #F4F4F4; color: #000000; } .hdcw-chip--sel { box-shadow: inset 0 0 0 1px #0C0E23, 0 4px 4px rgba(0,0,0,.25); font-weight: 400; } /* Bootstrap 4.3.1 (the KBM2 head loads it) adds `button:focus { outline: 5px * auto }`, so a tapped chip would also wear the browser's focus ring on top * of the artwork's 1px stroke. Mouse and touch focus drop it; keyboard * focus keeps a visible ring. */ .hdcw-chip:focus:not(:focus-visible) { outline: 0; } /* POPULAR / LIFESTYLE / MAKES (16:213 / 16:270 / 16:323): Geist Bold 11 * #6D6D6D, tracking 0, at x23-24, 13px under a bubble and 8px above its * chips. */ .hdcw-ghead { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0; color: #6D6D6D; margin: 2px 6px -3px 8px; /* 13px under a bubble, 8px above its chips, at x24 */ } /* Answer chips straight under a question (02-help1 to 07-help5) are flush * with the bubble at x16 and 8px under it, where the stock and model rows * (under a section head or a card strip) start at x18. */ .hdcw-bot + .hdcw-chips { padding-left: 0; margin-top: -3px; } /* ---------- Car cards ("csr search" 19:566): 176 wide, 14px apart, white, * 1px #E4E6EA, r10, 244 tall. Photo 176x113 square-topped. Body 12px in, * 10px under the photo: title Geist Regular 12 over two 12px lines, price * Bold 12/19, monthly Medium 12/16, meta Regular 10/16. Flush split action * bar 213px under the photo top: Details (77, white, #E4E6EA rules) | * I'm Interested (99, #EA0E35, white ink), both Geist Regular 12/13 with -1% * tracking. */ .hdcw-cars { gap: 14px; padding: 0 2px 6px; } .hdcw-ncgrid { gap: 14px; } .hdcw-car { border-radius: 10px; border-color: #E4E6EA; } .hdcw-car img.hdcw-carimg, .hdcw-car .hdcw-noimg { height: 113px; border-radius: 10px 10px 0 0; } .hdcw-car .hdcw-carbody { padding: 8px 11px 8px; } /* title cap 124px under the card top */ .hdcw-car h4.hdcw-cartitle { /* name every property: Bootstrap's h4 rule and the template's * `h1..h6 { font-family: "Geist" }` would win otherwise */ margin: 0; padding: 0; font-family: var(--hdcw-font); font-size: 12px; font-weight: 400; line-height: 16px; /* the two title lines are 16px apart (19:545) */ letter-spacing: .01em; max-height: 32px; color: #000000; } .hdcw-car .hdcw-price { color: #000000; font-size: 12px; font-weight: 700; line-height: 16px; margin-top: 3px; } .hdcw-car .hdcw-mo { color: #000000; font-size: 12px; font-weight: 500; line-height: 16px; } .hdcw-car .hdcw-meta { color: #000000; font-size: 10px; line-height: 16px; margin-top: 0; } .hdcw-ncgrid .hdcw-carbody { padding: 8px 11px 12px; } .hdcw-ncgrid h4.hdcw-cartitle { max-height: none; } .hdcw-car .hdcw-actions { margin: auto 0 0; gap: 0; } .hdcw-car .hdcw-pick { flex: 77 0 0; border: 0; border-top: 1px solid #E4E6EA; border-radius: 0 0 0 9px; min-height: 31px; padding: 9px 0; font-size: 12px; font-weight: 400; line-height: 13px; letter-spacing: -.01em; background: #fff; color: #000000; } .hdcw-car .hdcw-pick:hover { background: #F4F4F4; color: #000000; } .hdcw-car .hdcw-pick--primary { flex: 99 0 0; border-left: 1px solid #E4E6EA; border-radius: 0 0 9px 0; background: #EA0E35; color: #fff; } .hdcw-car .hdcw-pick--primary:only-child { border-left: 0; border-radius: 0 0 9px 9px; } .hdcw-car .hdcw-pick--primary:hover { background: #EA0E35; opacity: .85; color: #fff; } /* ---------- Footer (24:712): an #E4E6EA band 400x129. Input 299x51 @21,20 * inside it, r10, 1px #000000, placeholder Geist Regular 14 with 1% tracking * 26px in. Send: the 52px red disc 8px right of it, its right edge 20px off * the panel. Disclosure: Geist Regular 12/15, #504949, centred in a 281px * box 17px above the panel foot. */ .hdcw-input { background: #E4E6EA; border-top: 0; padding: 20px 20px 11px 21px; /* the 52px send sets the row: 20 + 52 + 11 = 83, and 46 of disclosure = the 129px band */ gap: 8px; } .hdcw-input input { box-sizing: border-box; height: 51px; border-radius: 10px; padding: 0 20px 0 25px; /* placeholder box 26px in from the panel's x21 */ font-size: 14px; line-height: 49px; letter-spacing: .01em; } /* font: inherit - KBM2's style.css has a bare * ::-webkit-input-placeholder { font-size: 1rem; color: #525252 } (line 5560) * that reaches the widget's input. */ .hdcw-input input::placeholder { color: #000000; opacity: 1; font: inherit; } .hdcw-input input::-webkit-input-placeholder { color: #000000; opacity: 1; font: inherit; } .hdcw-input input:focus { border-color: #0C0E23; } .hdcw-send { width: 52px; height: 52px; padding: 0; border-radius: 50%; background: #EA0E35 url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2219%22%20height=%2219%22%20viewBox=%220%200%2019%2019%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M8.55573%2010.4443L12.3328%2017.9984L17.9984%201.00158L1.00156%206.6672L8.55573%2010.4443ZM8.55573%2010.4443L12.3328%206.6672%22%20stroke=%22white%22%20stroke-width=%222.0031%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E") no-repeat center / 19px 19px; } .hdcw-send svg { display: none; } .hdcw-send:disabled { opacity: .5; } .hdcw-powered { background: #E4E6EA; font-size: 12px; line-height: 15px; letter-spacing: .008em; color: #504949; padding: 0 61.5px 16px 57.5px; } .hdcw-powered a.hdcw-tc { color: #504949; } .hdcw-powered a.hdcw-tc:hover { color: #0C0E23; } /* The artwork runs the brand line and the AI disclaimer as one centred * paragraph: "Powered by HappyDealer. AI can make mistakes. Check important * information. Terms & Conditions" (2008:473). */ .hdcw-powered > div { display: inline; } .hdcw-powered > div:first-child::after { content: '. '; white-space: pre; } /* The home artboard (01-chat, the opener list) draws "Terms & Conditions" * with NO underline; every other panel artboard underlines it. The opener * list is the selector: it removes itself as soon as a button is tapped. */ .hdcw-panel:has(.hdcw-op-else) .hdcw-powered a.hdcw-tc { text-decoration: none; } @media (max-width: 480px) { .hdcw-powered { padding: 0 24px 17px; } } /* A themed input font-size under 16px would defeat the widget's iOS zoom * guard (equal specificity, theme loads last - CON-781/CON-853 trap). */ @media (pointer: coarse) { .hdcw-input input { font-size: 16px; } }