/* CON-956 chat widget branding - Kia Dundrum (kd3, template KD3). * Source of truth: the designer's Figma "Kia Dundrum (Ai Assistant) (Copy)" * (file SZWnNYJ5ZvW0y8l0XpAy89) and its 16 @2x artboard PNGs, which outrank * the node dump wherever the two disagree. Tooling and QA: * tickets/CON-956/qa-kd3/; design notes: tickets/CON-956/DESIGN-kd3.md. * Glyphs are SVG exports of the file's own nodes. * * Kia black on white: a flat #05141F header carrying the white wand mark; * #EDEDED bot bubbles with a #C7C7C7 stroke and a squared bottom-left corner; * the openers are a single stacked BAND of full-width rows (no pills, no * radius) on a #F1F1F1 -> #FFFFFF -> #F1F1F1 horizontal gradient, divided by * 1px #D8D8D8 rules, with "Something else" as a plain white row; white chips * on a 0/4/4 25% shadow; #E4E6EA footer band and card borders; a #05141F send * circle, context CTA and card "I'm Interested" action. The launcher is the * designer's "Virtual Assistant" pill lockup. * Type: "Kia" (kia-light 400 / kia-bold 600), loaded by the template. * The panel is 400x720 = the designer's artboard, so offsets transfer 1:1. * * Regenerate with tickets/CON-956/build-theme-kd3.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: #05141F; --hdcw-on-accent: #fff; --hdcw-font: 'Kia', 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; --hdcw-faint: #C7C7C7; /* typing dots (decorative) */ --hdcw-footer: #000000; /* disclosure 2008:473 renders #000 */ --hdcw-border: #000000; /* input stroke 24:705 */ --hdcw-border-soft: #E4E6EA; --hdcw-radius: 15px; /* panel 1:7, header 1:9 */ --hdcw-radius-bubble: 10px; --hdcw-head-bg: #05141F; --hdcw-head-color: #fff; --hdcw-user-bg: #37434C; --hdcw-user-color: #fff; --hdcw-link: #000000; --hdcw-btn-bg: #05141F; --hdcw-btn-color: #fff; --hdcw-fab-gap: 0; /* a wide pill docks on the vehicle action bar */ } /* ---------- Launcher (26002:611): the designer's own 234x58 lockup export. * On the 400x653 home artboard the pill ends 7px from the right edge and 12px * from the bottom; the export carries 4px of shadow margin on every side. */ .hdcw-fab { width: 234px; height: 58px; right: 1px; bottom: 4px; max-width: calc(100vw - 2px); border-radius: 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%22234%22%20height=%2258%22%20viewBox=%220%200%20234%2058%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cg%20filter=%22url(%23filter0_d_26002_611)%22%3E%0A%3Crect%20x=%224%22%20width=%22226%22%20height=%2250%22%20rx=%2210%22%20fill=%22white%22/%3E%0A%3Crect%20x=%224%22%20width=%22226%22%20height=%2250%22%20rx=%2210%22%20fill=%22url(%23paint0_linear_26002_611)%22/%3E%0A%3Crect%20x=%225%22%20y=%221%22%20width=%22224%22%20height=%2248%22%20rx=%229%22%20stroke=%22white%22%20stroke-width=%222%22/%3E%0A%3C/g%3E%0A%3Cpath%20d=%22M68.768%2030.24L64.32%2018.08H66.736L70.112%2027.744L73.504%2018.08H75.632L71.2%2030.24H68.768Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M79.2171%2020.176H77.1531V17.984H79.2171V20.176ZM79.2171%2030.24H77.1531V21.504H79.2171V30.24Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M83.6859%2030.24H81.6219V21.504H83.5579L83.6539%2022.944C84.0219%2021.936%2085.0299%2021.264%2086.2779%2021.264C86.4859%2021.264%2086.8059%2021.296%2086.9659%2021.344V23.184C86.7419%2023.104%2086.4859%2023.056%2086.1979%2023.056C85.0459%2023.056%2083.9899%2023.776%2083.6859%2024.96V30.24Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M89.8155%2023.088H87.9275V21.504H89.8155V18.848H91.8795V21.504H93.8155V23.088H91.8795V30.24H89.8155V23.088Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M95.1025%2021.504H97.1665V27.216C97.1665%2028.144%2097.4865%2028.88%2098.5105%2028.88C99.5665%2028.88%20100.607%2027.952%20100.959%2026.832V21.504H103.023V30.24H101.087L100.959%2028.976C100.415%2029.712%2099.4385%2030.48%2098.1745%2030.48C96.2545%2030.48%2095.1025%2029.328%2095.1025%2027.216V21.504Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M104.859%2027.792C104.859%2027.088%20105.083%2026.528%20105.435%2026.112C106.123%2025.344%20107.243%2025.008%20108.603%2024.8L110.443%2024.512C110.347%2023.392%20109.659%2022.8%20108.331%2022.8C107.371%2022.8%20106.315%2023.344%20105.659%2024.272V22.272C106.235%2021.808%20107.211%2021.264%20108.763%2021.264C110.811%2021.264%20112.523%2022.304%20112.523%2024.88V30.24H110.795L110.603%2029.232C109.787%2030.016%20108.923%2030.48%20107.659%2030.48C105.899%2030.48%20104.859%2029.456%20104.859%2027.792ZM106.907%2027.696C106.907%2028.4%20107.371%2028.832%20108.059%2028.832C109.147%2028.832%20110.091%2028.064%20110.491%2027.184V25.968L109.451%2026.144C107.835%2026.416%20107.483%2026.672%20107.211%2026.928C107.019%2027.12%20106.907%2027.376%20106.907%2027.696Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M116.827%2030.24H114.763V17.984H116.827V30.24Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M124.868%2030.24H122.756L127.396%2018.08H129.78L134.436%2030.24H132.1L130.868%2026.928H126.1L124.868%2030.24ZM128.484%2020.48L126.74%2025.184H130.228L128.484%2020.48Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M135.648%2029.52V27.504C136.336%2028.384%20137.344%2028.864%20138.384%2028.864C139.488%2028.864%20139.904%2028.416%20139.904%2027.888C139.904%2027.456%20139.696%2027.152%20138.8%2026.816L137.92%2026.48C136.512%2025.936%20135.632%2025.184%20135.632%2023.792C135.632%2022.464%20136.64%2021.264%20138.784%2021.264C139.888%2021.264%20140.896%2021.712%20141.488%2022.16V24.144C140.624%2023.232%20139.68%2022.864%20138.816%2022.864C137.84%2022.864%20137.6%2023.376%20137.6%2023.664C137.6%2024.112%20137.952%2024.352%20138.8%2024.672L139.664%2024.992C141.216%2025.568%20141.904%2026.4%20141.904%2027.696C141.904%2029.52%20140.432%2030.48%20138.368%2030.48C137.232%2030.48%20136.192%2030.032%20135.648%2029.52Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M143.523%2029.52V27.504C144.211%2028.384%20145.219%2028.864%20146.259%2028.864C147.363%2028.864%20147.779%2028.416%20147.779%2027.888C147.779%2027.456%20147.571%2027.152%20146.675%2026.816L145.795%2026.48C144.387%2025.936%20143.507%2025.184%20143.507%2023.792C143.507%2022.464%20144.515%2021.264%20146.659%2021.264C147.763%2021.264%20148.771%2021.712%20149.363%2022.16V24.144C148.499%2023.232%20147.555%2022.864%20146.691%2022.864C145.715%2022.864%20145.475%2023.376%20145.475%2023.664C145.475%2024.112%20145.827%2024.352%20146.675%2024.672L147.539%2024.992C149.091%2025.568%20149.779%2026.4%20149.779%2027.696C149.779%2029.52%20148.307%2030.48%20146.243%2030.48C145.107%2030.48%20144.067%2030.032%20143.523%2029.52Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M153.686%2020.176H151.622V17.984H153.686V20.176ZM153.686%2030.24H151.622V21.504H153.686V30.24Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M155.867%2029.52V27.504C156.555%2028.384%20157.563%2028.864%20158.603%2028.864C159.707%2028.864%20160.123%2028.416%20160.123%2027.888C160.123%2027.456%20159.915%2027.152%20159.019%2026.816L158.139%2026.48C156.731%2025.936%20155.851%2025.184%20155.851%2023.792C155.851%2022.464%20156.859%2021.264%20159.003%2021.264C160.107%2021.264%20161.115%2021.712%20161.707%2022.16V24.144C160.843%2023.232%20159.899%2022.864%20159.035%2022.864C158.059%2022.864%20157.819%2023.376%20157.819%2023.664C157.819%2024.112%20158.171%2024.352%20159.019%2024.672L159.883%2024.992C161.435%2025.568%20162.123%2026.4%20162.123%2027.696C162.123%2029.52%20160.651%2030.48%20158.587%2030.48C157.451%2030.48%20156.411%2030.032%20155.867%2029.52Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M164.894%2023.088H163.006V21.504H164.894V18.848H166.958V21.504H168.894V23.088H166.958V30.24H164.894V23.088Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M169.781%2027.792C169.781%2027.088%20170.005%2026.528%20170.357%2026.112C171.045%2025.344%20172.165%2025.008%20173.525%2024.8L175.365%2024.512C175.269%2023.392%20174.581%2022.8%20173.253%2022.8C172.293%2022.8%20171.237%2023.344%20170.581%2024.272V22.272C171.157%2021.808%20172.133%2021.264%20173.685%2021.264C175.733%2021.264%20177.445%2022.304%20177.445%2024.88V30.24H175.717L175.525%2029.232C174.709%2030.016%20173.845%2030.48%20172.581%2030.48C170.821%2030.48%20169.781%2029.456%20169.781%2027.792ZM171.829%2027.696C171.829%2028.4%20172.293%2028.832%20172.981%2028.832C174.069%2028.832%20175.013%2028.064%20175.413%2027.184V25.968L174.373%2026.144C172.757%2026.416%20172.405%2026.672%20172.133%2026.928C171.941%2027.12%20171.829%2027.376%20171.829%2027.696Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M181.748%2030.24H179.684V21.504H181.62L181.748%2022.768C182.292%2022.032%20183.268%2021.264%20184.532%2021.264C186.452%2021.264%20187.604%2022.416%20187.604%2024.528V30.24H185.54V24.528C185.54%2023.6%20185.22%2022.864%20184.196%2022.864C183.14%2022.864%20182.1%2023.792%20181.748%2024.912V30.24Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M190.769%2023.088H188.881V21.504H190.769V18.848H192.833V21.504H194.769V23.088H192.833V30.24H190.769V23.088Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M34%2024.648L36.37%2022.278C36.664%2021.985%2036.81%2021.838%2036.888%2021.68C37.038%2021.38%2037.038%2021.027%2036.888%2020.726C36.81%2020.568%2036.664%2020.422%2036.371%2020.129C36.078%2019.836%2035.931%2019.69%2035.774%2019.612C35.6258%2019.5382%2035.4626%2019.4998%2035.297%2019.4998C35.1315%2019.4998%2034.9682%2019.5382%2034.82%2019.612C34.662%2019.69%2034.515%2019.836%2034.222%2020.129L31.852%2022.5M34%2024.648L25.778%2032.871C25.485%2033.164%2025.338%2033.31%2025.18%2033.388C24.88%2033.538%2024.527%2033.538%2024.226%2033.388C24.068%2033.31%2023.922%2033.164%2023.629%2032.871C23.336%2032.578%2023.19%2032.431%2023.112%2032.274C23.0382%2032.1258%2022.9998%2031.9626%2022.9998%2031.797C22.9998%2031.6315%2023.0382%2031.4682%2023.112%2031.32C23.19%2031.162%2023.336%2031.015%2023.629%2030.722L31.852%2022.5M34%2024.648L31.852%2022.5%22%20stroke=%22white%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cpath%20d=%22M39.5%2014.5L39.39%2014.799C39.244%2015.19%2039.172%2015.386%2039.03%2015.529C38.886%2015.672%2038.69%2015.745%2038.299%2015.889L38%2016L38.299%2016.11C38.69%2016.255%2038.886%2016.328%2039.029%2016.47C39.172%2016.614%2039.244%2016.81%2039.389%2017.201L39.5%2017.5L39.61%2017.201C39.756%2016.81%2039.828%2016.614%2039.97%2016.471C40.114%2016.328%2040.31%2016.255%2040.701%2016.111L41%2016L40.701%2015.89C40.31%2015.745%2040.114%2015.672%2039.971%2015.53C39.828%2015.386%2039.756%2015.19%2039.611%2014.799L39.5%2014.5ZM39.5%2024.5L39.39%2024.799C39.244%2025.19%2039.172%2025.386%2039.03%2025.529C38.886%2025.672%2038.69%2025.745%2038.299%2025.889L38%2026L38.299%2026.11C38.69%2026.256%2038.886%2026.328%2039.029%2026.47C39.172%2026.614%2039.244%2026.81%2039.389%2027.201L39.5%2027.5L39.61%2027.201C39.756%2026.81%2039.828%2026.614%2039.97%2026.471C40.114%2026.328%2040.31%2026.255%2040.701%2026.111L41%2026L40.701%2025.89C40.31%2025.744%2040.114%2025.672%2039.971%2025.53C39.828%2025.386%2039.756%2025.19%2039.611%2024.799L39.5%2024.5ZM30.5%2014.5L30.39%2014.799C30.244%2015.19%2030.172%2015.386%2030.03%2015.529C29.886%2015.672%2029.69%2015.745%2029.299%2015.889L29%2016L29.299%2016.11C29.69%2016.255%2029.886%2016.328%2030.029%2016.47C30.172%2016.614%2030.245%2016.81%2030.389%2017.201L30.5%2017.5L30.61%2017.201C30.756%2016.81%2030.828%2016.614%2030.97%2016.471C31.114%2016.328%2031.31%2016.255%2031.701%2016.111L32%2016L31.701%2015.89C31.31%2015.745%2031.114%2015.672%2030.971%2015.53C30.828%2015.386%2030.755%2015.19%2030.611%2014.799L30.5%2014.5Z%22%20stroke=%22white%22%20stroke-width=%221.5%22%20stroke-linejoin=%22round%22/%3E%0A%3Cdefs%3E%0A%3Cfilter%20id=%22filter0_d_26002_611%22%20x=%220%22%20y=%220%22%20width=%22234%22%20height=%2258%22%20filterUnits=%22userSpaceOnUse%22%20color-interpolation-filters=%22sRGB%22%3E%0A%3CfeFlood%20flood-opacity=%220%22%20result=%22BackgroundImageFix%22/%3E%0A%3CfeColorMatrix%20in=%22SourceAlpha%22%20type=%22matrix%22%20values=%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result=%22hardAlpha%22/%3E%0A%3CfeOffset%20dy=%224%22/%3E%0A%3CfeGaussianBlur%20stdDeviation=%222%22/%3E%0A%3CfeComposite%20in2=%22hardAlpha%22%20operator=%22out%22/%3E%0A%3CfeColorMatrix%20type=%22matrix%22%20values=%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22/%3E%0A%3CfeBlend%20mode=%22normal%22%20in2=%22BackgroundImageFix%22%20result=%22effect1_dropShadow_26002_611%22/%3E%0A%3CfeBlend%20mode=%22normal%22%20in=%22SourceGraphic%22%20in2=%22effect1_dropShadow_26002_611%22%20result=%22shape%22/%3E%0A%3C/filter%3E%0A%3ClinearGradient%20id=%22paint0_linear_26002_611%22%20x1=%22117%22%20y1=%2235%22%20x2=%22223.5%22%20y2=%22-13%22%20gradientUnits=%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color=%22%2305141F%22/%3E%0A%3Cstop%20offset=%221%22%20stop-color=%22%2337434C%22/%3E%0A%3C/linearGradient%3E%0A%3C/defs%3E%0A%3C/svg%3E") right center / contain no-repeat; box-shadow: none; z-index: 1030; /* under the site's Bootstrap modals (1050) */ } .hdcw-fab > svg { display: none; } .hdcw-fab:hover { transform: scale(1.02); transform-origin: right center; } .hdcw-fab.hdcw-shift { max-width: calc(100vw - 104px); } /* ---------- Header (24:711): an 81px flat #05141F band, r15 on top. Mark * 27x28.5 @29,23.5; title Bold 20 at x77 y24; subtitle Regular 13 at x78 y48, * UNDER the title. Nav icons at x296 / x334 / x369, tops y24. */ .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 28px; gap: 0; background: #05141F; } .hdcw-head::before { content: ''; flex: 0 0 29px; height: 30px; margin: 22px 20px 0 0; /* title at x77 */ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2229%22%20height=%2230%22%20viewBox=%220%200%2029%2030%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M17.2499%2015.9716L20.8048%2012.4167C21.2458%2011.9772%2021.4648%2011.7567%2021.5818%2011.5197C21.8068%2011.0698%2021.8068%2010.5403%2021.5818%2010.0888C21.4648%209.85178%2021.2458%209.63279%2020.8063%209.1933C20.3668%208.75381%2020.1463%208.53482%2019.9108%208.41782C19.6885%208.30713%2019.4436%208.24952%2019.1953%208.24952C18.947%208.24952%2018.7021%208.30713%2018.4798%208.41782C18.2428%208.53482%2018.0224%208.75381%2017.5829%209.1933L14.028%2012.7497M17.2499%2015.9716L4.91719%2028.3058C4.4777%2028.7453%204.25721%2028.9643%204.02021%2029.0813C3.57022%2029.3063%203.04074%2029.3063%202.58925%2029.0813C2.35226%2028.9643%202.13326%2028.7453%201.69377%2028.3058C1.25428%2027.8663%201.03529%2027.6458%200.918293%2027.4103C0.807601%2027.1881%200.749989%2026.9432%200.749989%2026.6949C0.749989%2026.4465%200.807601%2026.2016%200.918293%2025.9794C1.03529%2025.7424%201.25428%2025.5219%201.69377%2025.0824L14.028%2012.7497M17.2499%2015.9716L14.028%2012.7497%22%20stroke=%22white%22%20stroke-width=%221.49998%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cpath%20d=%22M25.4997%200.749989L25.3347%201.19848C25.1157%201.78496%2025.0077%202.07896%2024.7947%202.29345C24.5787%202.50794%2024.2847%202.61744%2023.6982%202.83344L23.2497%202.99993L23.6982%203.16493C24.2847%203.38242%2024.5787%203.49192%2024.7932%203.70491C25.0077%203.92091%2025.1157%204.2149%2025.3332%204.80139L25.4997%205.24987L25.6647%204.80139C25.8837%204.2149%2025.9917%203.92091%2026.2047%203.70641C26.4206%203.49192%2026.7146%203.38242%2027.3011%203.16643L27.7496%202.99993L27.3011%202.83494C26.7146%202.61744%2026.4206%202.50794%2026.2062%202.29495C25.9917%202.07896%2025.8837%201.78496%2025.6662%201.19848L25.4997%200.749989ZM25.4997%2015.7496L25.3347%2016.1981C25.1157%2016.7846%2025.0077%2017.0786%2024.7947%2017.2931C24.5787%2017.5076%2024.2847%2017.6171%2023.6982%2017.8331L23.2497%2017.9995L23.6982%2018.1645C24.2847%2018.3835%2024.5787%2018.4915%2024.7932%2018.7045C25.0077%2018.9205%2025.1157%2019.2145%2025.3332%2019.801L25.4997%2020.2495L25.6647%2019.801C25.8837%2019.2145%2025.9917%2018.9205%2026.2047%2018.706C26.4206%2018.4915%2026.7146%2018.382%2027.3011%2018.166L27.7496%2017.9995L27.3011%2017.8346C26.7146%2017.6156%2026.4206%2017.5076%2026.2062%2017.2946C25.9917%2017.0786%2025.8837%2016.7846%2025.6662%2016.1981L25.4997%2015.7496ZM12%200.749989L11.835%201.19848C11.616%201.78496%2011.508%202.07896%2011.295%202.29345C11.079%202.50794%2010.785%202.61744%2010.1986%202.83344L9.75007%202.99993L10.1986%203.16493C10.785%203.38242%2011.079%203.49192%2011.2935%203.70491C11.508%203.92091%2011.6175%204.2149%2011.8335%204.80139L12%205.24987L12.165%204.80139C12.384%204.2149%2012.492%203.92091%2012.705%203.70641C12.921%203.49192%2013.215%203.38242%2013.8015%203.16643L14.25%202.99993L13.8015%202.83494C13.215%202.61744%2012.921%202.50794%2012.7065%202.29495C12.492%202.07896%2012.3825%201.78496%2012.1665%201.19848L12%200.749989Z%22%20stroke=%22white%22%20stroke-width=%221.5%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E") center / contain no-repeat; } .hdcw-head > div { margin-top: 21px; min-width: 0; padding-right: 12px; } .hdcw-head b { font-size: 20px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdcw-head small { display: block; margin-top: 3px; opacity: 1; font-size: 13px; font-weight: 400; 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 -2px 0 auto; /* reset ink at x295 (4028:981) */ 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 18px; 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: 24px 0 0 17px; 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: bubbles at x16, 334 wide; the opener band runs * x16..382, so the right padding is 18. */ .hdcw-msgs { padding: 14px 18px 14px 16px; } /* Bubbles. Bot (1:14 / 37:322 / 37:325 / 16:205): #EDEDED, 1px #C7C7C7 inside * stroke, r10 with the BOTTOM-LEFT corner square, Regular 14, text 22px in. * User (37:388): #37434C, white Regular 14 at 24px in, r10 with the * BOTTOM-RIGHT corner square, 48 tall for one line. */ .hdcw-msg { max-width: 96%; padding: 15px 22px; font-size: 14px; line-height: 17px; letter-spacing: .01em; } .hdcw-bot { width: 91%; /* 334 of 366 */ max-width: 91%; box-sizing: border-box; background: #EDEDED; border-color: #C7C7C7; border-radius: 10px 10px 10px 0; padding: 16px 22px 15px 21px; color: #05141F; } /* The greeting (1:11): a 95px bubble, its Bold headline followed by a 24.5px * step (the 24px run) and then two lines 17px apart. The headline is an * inline-block with a bottom margin, so it grows its own line only, whatever * the admin copy after it. */ .hdcw-msgs > .hdcw-bot:first-child { padding: 12px 22px 23px 21px; } .hdcw-bot b, .hdcw-bot strong { font-weight: 600; } .hdcw-msgs > .hdcw-bot:first-child b, .hdcw-msgs > .hdcw-bot:first-child strong { display: inline-block; margin-bottom: 7px; } .hdcw-bot a.hdcw-link { font-weight: 600; color: #000000; } /* The reply that lists cars (19:515 on 16-browse-auto) is drawn as its own * bubble: WHITE with a 1px #E4E6EA stroke, 14 on a 19px leading, its car * links Bold and underlined. */ .hdcw-bot:has(a.hdcw-link) { background: #fff; border-color: #E4E6EA; color: #000000; padding: 27px 27px 27px 21px; } .hdcw-user { border-radius: 10px 10px 0 10px; font-weight: 400; padding: 15px 20px 16px 24px; margin: 3px 0 -3px; } /* 11px under the bubble it answers (04-help2) */ .hdcw-typing { background: #EDEDED; border-color: #C7C7C7; border-radius: 10px 10px 10px 0; padding: 16px 22px 15px 21px; } /* "Searching our stock..." (19:537): Regular 12 #6D6D6D at x20. */ .hdcw-status { font-size: 12px; line-height: 14px; margin: 2px 0 5px 4px; } /* ---------- Openers. Kia's artwork draws no pills: the four openers are one * stacked BAND of full-width 74px rows (x16..382, tops y211/285/359/433) on a * horizontal #F1F1F1 -> #FFFFFF -> #F1F1F1 gradient, separated by 1px #D8D8D8 * rules, with "Something else" (2023:430, y507, 59 tall) as a plain WHITE row * under the last rule. Titles Bold 17 at x96 (=80 in), captions Regular 12 * 23px lower, the chevron 6x12 at x351.5. */ .hdcw-opener { gap: 0; margin: 0; } /* The band opens 21px under the greeting bubble (y190 -> y211 on 01-chat); * the context CTA block, which has no "Something else", keeps its own. */ .hdcw-opener:has(.hdcw-op-else) { margin-top: 12px; } .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: 0; border-bottom: 1px solid #D8D8D8; border-radius: 0; 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=%22%2305141F%22/%3E%0A%3C/svg%3E") no-repeat right 23.5px top 32px / 8px 14px border-box, linear-gradient(90deg, #F1F1F1 0%, #FFFFFF 25.5%, #F1F1F1 47.6%); color: #05141F; 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: 74px; padding: 18px 44px 17px 80px; /* 18 + 20 title + 4 + 14 caption + 17 + 1 = 74 */ font-size: 17px; font-weight: 600; line-height: 20px; } .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: #E8E8E8; opacity: 1; } /* Glyph boxes = the export + its 1px bezel, placed from the row's own edges * (artwork offset - 1px bezel). */ .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: center / contain no-repeat; } .hdcw-opener button.hdcw-op-used::before { left: 25px; top: 20px; width: 23px; height: 23px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2223%22%20height=%2223%22%20viewBox=%22-1%20-1%2023%2023%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M3.4725%207.875C4.00796%206.44344%204.96784%205.20955%206.22373%204.33844C7.47961%203.46733%208.97158%203.00055%2010.5%203.00055C12.0284%203.00055%2013.5204%203.46733%2014.7763%204.33844C16.0322%205.20955%2016.992%206.44344%2017.5275%207.875H3.4725ZM3.009%2010.125C2.91585%2011.9817%203.51556%2013.8068%204.69181%2015.2463C5.86806%2016.6858%207.53702%2017.6373%209.375%2017.916V13.7145L6.234%2010.125H3.009ZM11.625%2017.916C13.463%2017.6373%2015.1319%2016.6858%2016.3082%2015.2463C17.4844%2013.8068%2018.0841%2011.9817%2017.991%2010.125H14.766L11.625%2013.7145V17.916ZM10.5%200C7.71523%200%205.04451%201.10625%203.07538%203.07538C1.10625%205.04451%200%207.71523%200%2010.5C0%2013.2848%201.10625%2015.9555%203.07538%2017.9246C5.04451%2019.8938%207.71523%2021%2010.5%2021C13.2848%2021%2015.9555%2019.8938%2017.9246%2017.9246C19.8938%2015.9555%2021%2013.2848%2021%2010.5C21%207.71523%2019.8938%205.04451%2017.9246%203.07538C15.9555%201.10625%2013.2848%200%2010.5%200Z%22%20fill=%22%2305141F%22/%3E%0A%3C/svg%3E"); } /* The new-cars row carries the Kia wordmark itself (40003:796), 43x10 @x15. */ .hdcw-opener button.hdcw-op-new::before { left: 14px; top: 28px; width: 45px; height: 12px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2245%22%20height=%2212%22%20viewBox=%22-1%20-1%2045%2012%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M24.9489%208.85981C24.9489%208.9381%2024.9742%208.98336%2025.0205%208.98336C25.0584%208.98049%2025.0946%208.96678%2025.1247%208.94387L38.5258%200.336953C38.7516%200.180009%2039.0224%200.0987419%2039.2982%200.105063H42.2436C42.3442%200.0990418%2042.4452%200.114236%2042.5397%200.149644C42.6339%200.185052%2042.7198%200.239866%2042.7911%200.310465C42.8625%200.381065%2042.9181%200.465841%2042.9539%200.559193C42.9894%200.652546%2043.0048%200.75235%2042.9987%200.85201V6.41385C42.9987%207.08598%2042.847%207.47398%2042.2442%207.83319L38.6713%209.9562C38.6361%209.98134%2038.5947%209.99649%2038.5515%2010C38.5082%2010%2038.4684%209.96698%2038.4684%209.84615V3.35426C38.4684%203.28373%2038.4431%203.22918%2038.3955%203.22918C38.3581%203.2322%2038.3223%203.24546%2038.292%203.26745L28.4942%209.56123C28.2739%209.71331%2028.0109%209.79343%2027.7423%209.79037H21.2471C21.1463%209.79639%2021.0454%209.78118%2020.9511%209.74578C20.8567%209.71038%2020.771%209.65555%2020.6995%209.58496C20.6282%209.51435%2020.5728%209.42959%2020.5369%209.33624C20.5012%209.24287%2020.4858%209.14308%2020.4919%209.04341V1.02812C20.4919%200.96933%2020.4666%200.915548%2020.4203%200.915548C20.3823%200.918548%2020.3459%200.93188%2020.3151%200.954071L13.8543%204.79311C13.7896%204.83166%2013.7719%204.86342%2013.7719%204.89317C13.7719%204.92295%2013.783%204.94647%2013.8288%204.99149L18.4437%209.55573C18.5051%209.61676%2018.5474%209.66304%2018.5474%209.71056C18.5474%209.7646%2018.4796%209.78937%2018.4009%209.78937H14.2246C14.0899%209.80412%2013.9536%209.79187%2013.8237%209.75342C13.6939%209.71496%2013.5732%209.65103%2013.4689%209.56548L10.6705%206.79883C10.6607%206.78646%2010.6485%206.7762%2010.6345%206.76862C10.6207%206.76105%2010.6053%206.75635%2010.5896%206.75479C10.5586%206.75723%2010.5288%206.76759%2010.503%206.78481L5.82137%209.56697C5.59842%209.71621%205.33455%209.79416%205.06537%209.79037H0.756508C0.655788%209.79636%200.554919%209.78118%200.460567%209.74581C0.366216%209.71044%200.280525%209.65567%200.209151%209.58512C0.137776%209.51459%200.0823417%209.42986%200.0465076%209.33658C0.0106737%209.2433%20-0.00474542%209.14354%200.00126837%209.0439V3.5834C0.00126837%202.91124%200.153024%202.52526%200.756761%202.1668L4.3511%200.0310187C4.37992%200.0117522%204.4137%200.000993851%204.44848%200C4.50286%200%204.5327%200.0565336%204.5327%200.179607V7.47896C4.5327%207.55578%204.55394%207.59155%204.60428%207.59155C4.64323%207.58627%204.6801%207.57099%204.71126%207.54726L16.8568%200.328697C17.0924%200.170298%2017.3735%200.0917393%2017.6581%200.104813H24.1945C24.2953%200.0987541%2024.3962%200.113922%2024.4906%200.149314C24.5851%200.184705%2024.6708%200.239513%2024.7422%200.310117C24.8136%200.38072%2024.8691%200.465508%2024.9049%200.558879C24.9407%200.65225%2024.9561%200.752078%2024.95%200.851759L24.9489%208.85981Z%22%20fill=%22%2305141F%22/%3E%0A%3C/svg%3E"); } .hdcw-opener button.hdcw-op-quiz::before { left: 25px; top: 19px; width: 25px; height: 28px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2225%22%20height=%2228%22%20viewBox=%22-1%20-1%2025%2028%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M9.07851%200C9.34604%200%209.60261%200.1023%209.79178%200.284394C9.98096%200.466489%2010.0872%200.713463%2010.0872%200.970984V4.2076C10.0872%204.46512%209.98096%204.71209%209.79178%204.89419C9.60261%205.07628%209.34604%205.17858%209.07851%205.17858C8.81098%205.17858%208.55441%205.07628%208.36523%204.89419C8.17606%204.71209%208.06979%204.46512%208.06979%204.2076V0.970984C8.06979%200.713463%208.17606%200.466489%208.36523%200.284394C8.55441%200.1023%208.81098%200%209.07851%200ZM2.64958%202.55045C2.83872%202.36862%203.0951%202.26648%203.36241%202.26648C3.62972%202.26648%203.88611%202.36862%204.07524%202.55045L6.42893%204.81608C6.52804%204.90497%206.60753%205.01217%206.66266%205.13128C6.71779%205.25038%206.74744%205.37896%206.74983%205.50933C6.75222%205.63971%206.7273%205.76921%206.67657%205.89011C6.62583%206.01102%206.55032%206.12085%206.45454%206.21305C6.35875%206.30525%206.24465%206.37794%206.11905%206.42678C5.99344%206.47561%205.85891%206.4996%205.72346%206.49729C5.58802%206.49499%205.45445%206.46646%205.33071%206.41339C5.20698%206.36032%205.09561%206.2838%205.00327%206.1884L2.64958%203.92277C2.46068%203.74072%202.35458%203.49392%202.35458%203.23661C2.35458%202.9793%202.46068%202.73251%202.64958%202.55045ZM15.5074%202.55045C15.6963%202.73251%2015.8024%202.9793%2015.8024%203.23661C15.8024%203.49392%2015.6963%203.74072%2015.5074%203.92277L13.1538%206.1884C13.0614%206.2838%2012.95%206.36032%2012.8263%206.41339C12.7026%206.46646%2012.569%206.49499%2012.4336%206.49729C12.2981%206.4996%2012.1636%206.47561%2012.038%206.42678C11.9124%206.37794%2011.7983%206.30525%2011.7025%206.21305C11.6067%206.12085%2011.5312%206.01102%2011.4804%205.89011C11.4297%205.76921%2011.4048%205.63971%2011.4072%205.50933C11.4096%205.37896%2011.4392%205.25038%2011.4944%205.13128C11.5495%205.01217%2011.629%204.90497%2011.7281%204.81608L14.0818%202.55045C14.2709%202.36862%2014.5273%202.26648%2014.7946%202.26648C15.0619%202.26648%2015.3183%202.36862%2015.5074%202.55045ZM0%208.73885C0%208.48133%200.106276%208.23436%200.295448%208.05227C0.48462%207.87017%200.741193%207.76787%201.00872%207.76787H4.37113C4.63866%207.76787%204.89524%207.87017%205.08441%208.05227C5.27358%208.23436%205.37986%208.48133%205.37986%208.73885C5.37986%208.99638%205.27358%209.24335%205.08441%209.42544C4.89524%209.60754%204.63866%209.70984%204.37113%209.70984H1.00872C0.741193%209.70984%200.48462%209.60754%200.295448%209.42544C0.106276%209.24335%200%208.99638%200%208.73885ZM10.9978%208.39707C9.84783%207.4468%208.06979%208.23394%208.06979%209.69301V24.2888C8.06979%2025.8554%2010.0805%2026.5959%2011.1659%2025.4281L14.6816%2021.6439C15.0528%2021.2451%2015.5747%2021.0095%2016.1302%2020.9875L21.2948%2020.7881C22.9047%2020.726%2023.6014%2018.7957%2022.3775%2017.7845L10.9978%208.39707ZM10.0872%2023.6752V10.2031L20.5941%2018.872L16.0481%2019.0468C15.5038%2019.0683%2014.9694%2019.1946%2014.4767%2019.4183C13.9839%2019.642%2013.5428%2019.9586%2013.1793%2020.3492L10.0872%2023.6752Z%22%20fill=%22%2305141F%22/%3E%0A%3Cpath%20d=%22M9.07851%200C9.34604%200%209.60261%200.1023%209.79178%200.284394C9.98096%200.466489%2010.0872%200.713463%2010.0872%200.970984V4.2076C10.0872%204.46512%209.98096%204.71209%209.79178%204.89419C9.60261%205.07628%209.34604%205.17858%209.07851%205.17858C8.81098%205.17858%208.55441%205.07628%208.36523%204.89419C8.17606%204.71209%208.06979%204.46512%208.06979%204.2076V0.970984C8.06979%200.713463%208.17606%200.466489%208.36523%200.284394C8.55441%200.1023%208.81098%200%209.07851%200ZM2.64958%202.55045C2.83872%202.36862%203.0951%202.26648%203.36241%202.26648C3.62972%202.26648%203.88611%202.36862%204.07524%202.55045L6.42893%204.81608C6.52804%204.90497%206.60753%205.01217%206.66266%205.13128C6.71779%205.25038%206.74744%205.37896%206.74983%205.50933C6.75222%205.63971%206.7273%205.76921%206.67657%205.89011C6.62583%206.01102%206.55032%206.12085%206.45454%206.21305C6.35875%206.30525%206.24465%206.37794%206.11905%206.42678C5.99344%206.47561%205.85891%206.49959%205.72346%206.49729C5.58802%206.49499%205.45445%206.46646%205.33071%206.41339C5.20698%206.36032%205.09561%206.2838%205.00327%206.1884L2.64958%203.92277C2.46068%203.74071%202.35458%203.49392%202.35458%203.23661C2.35458%202.9793%202.46068%202.73251%202.64958%202.55045ZM15.5074%202.55045C15.6963%202.73251%2015.8024%202.9793%2015.8024%203.23661C15.8024%203.49392%2015.6963%203.74071%2015.5074%203.92277L13.1538%206.1884C13.0614%206.2838%2012.95%206.36032%2012.8263%206.41339C12.7026%206.46646%2012.569%206.49499%2012.4336%206.49729C12.2981%206.49959%2012.1636%206.47561%2012.038%206.42678C11.9124%206.37794%2011.7983%206.30525%2011.7025%206.21305C11.6067%206.12085%2011.5312%206.01102%2011.4804%205.89011C11.4297%205.76921%2011.4048%205.63971%2011.4072%205.50933C11.4096%205.37896%2011.4392%205.25038%2011.4944%205.13128C11.5495%205.01217%2011.629%204.90497%2011.7281%204.81608L14.0818%202.55045C14.2709%202.36862%2014.5273%202.26648%2014.7946%202.26648C15.0619%202.26648%2015.3183%202.36862%2015.5074%202.55045ZM0%208.73885C0%208.48133%200.106276%208.23436%200.295448%208.05227C0.48462%207.87017%200.741193%207.76787%201.00872%207.76787H4.37113C4.63866%207.76787%204.89524%207.87017%205.08441%208.05227C5.27358%208.23436%205.37986%208.48133%205.37986%208.73885C5.37986%208.99638%205.27358%209.24335%205.08441%209.42544C4.89524%209.60754%204.63866%209.70984%204.37113%209.70984H1.00872C0.741193%209.70984%200.48462%209.60754%200.295448%209.42544C0.106276%209.24335%200%208.99638%200%208.73885Z%22%20fill=%22%2305141F%22/%3E%0A%3C/svg%3E"); } .hdcw-opener button.hdcw-op-alert::before { left: 24px; top: 20px; width: 24px; height: 23px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2224%22%20height=%2223%22%20viewBox=%22-1%20-1%2024%2023%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M21.0691%200.00490228C20.9574%200.0180755%2020.8495%200.0524195%2020.7517%200.105922L0.432945%2010.612C0.288905%2010.6879%200.171467%2010.8026%200.0952729%2010.9419C0.0190787%2011.081%20-0.012501%2011.2386%200.00447075%2011.3948C0.0214426%2011.5511%200.086215%2011.6991%200.190713%2011.8205C0.295211%2011.9418%200.43481%2012.031%200.592107%2012.0772L5.98927%2013.6175C6.11543%2014.5703%206.67757%2018.6967%206.78256%2019.5017C6.88753%2020.3033%207.45815%2020.4424%208.02624%2019.7037C8.4106%2019.2035%2010.6719%2016.168%2010.6719%2016.168L15.4874%2020.7649C15.5912%2020.8642%2015.7204%2020.9357%2015.8621%2020.9723C16.0039%2021.0088%2016.1533%2021.0093%2016.2953%2020.9734C16.4372%2020.9375%2016.5669%2020.8667%2016.6711%2020.768C16.7754%2020.6693%2016.8507%2020.5461%2016.8895%2020.4109L21.9692%201.0151C22.006%200.889008%2022.0099%200.756211%2021.9804%200.628355C21.951%200.5005%2021.8892%200.38149%2021.8004%200.281767C21.7114%200.182043%2021.5984%200.104652%2021.4709%200.0563808C21.3435%200.00810968%2021.2054%20-0.00956664%2021.0691%200.00490228ZM19.8535%202.37927L15.5932%2018.6435L10.8048%2014.0717L13.8947%2010.612L13.3158%208.8421H12.7368H11.5789L6.94172%2012.2283L2.99988%2011.1171L19.8517%202.37846L19.8535%202.37927Z%22%20fill=%22%2305141F%22/%3E%0A%3C/svg%3E"); } .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; margin-top: 4px; text-align: left; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: 0; color: #05141F; } /* The artwork's captions, numbers included (the standard's ruling): a fixed * "35", not a live count. Update it here if the stock level changes a lot. */ .hdcw-opener button.hdcw-op-used::after { content: 'Over 35 used cars in stock'; } .hdcw-opener button.hdcw-op-new::after { content: 'Explore our new Kia range'; } .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): the same row, 59 tall, WHITE, no bottom rule; * title @96,531 (24 under the row top); "?" 13x21 @45,530. */ .hdcw-opener .hdcw-else.hdcw-op-else { min-height: 59px; border-bottom: 0; padding: 23px 44px 16px 80px; font-size: 17px; font-weight: 600; line-height: 20px; 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=%22%2305141F%22/%3E%0A%3C/svg%3E") no-repeat right 23.5px top 23px / 8px 14px border-box, #fff; } .hdcw-opener .hdcw-else.hdcw-op-else:hover { background-color: #F6F6F6; } .hdcw-opener button.hdcw-op-else::before { left: 28px; top: 21px; width: 15px; height: 23px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2215%22%20height=%2223%22%20viewBox=%22-1%20-1%2015%2023%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M0.814028%206.0515C0.327754%206.0515%20-0.0660596%205.63675%200.00927867%205.14675C0.480143%202.17%202.6992%200%206.55001%200C10.4025%200%2013%202.38%2013%205.62625C13%207.97825%2011.8614%209.63025%209.9351%2010.829C8.05164%2011.9822%207.514%2012.7855%207.514%2014.3465V14.399C7.514%2014.6311%207.4238%2014.8536%207.26325%2015.0177C7.1027%2015.1818%206.88494%2015.274%206.65788%2015.274H5.33946C5.11388%2015.274%204.89741%2015.183%204.7371%2015.0208C4.5768%2014.8586%204.4856%2014.6383%204.48335%2014.4077L4.47821%2014.0577C4.40458%2011.921%205.29495%2010.556%207.29484%209.31175C9.05844%208.20575%209.68683%207.3255%209.68683%205.76275C9.68683%204.0495%208.38895%202.79125%206.38906%202.79125C4.66142%202.79125%203.46114%203.717%203.07075%205.24475C2.95775%205.68925%202.59475%206.0515%202.14615%206.0515H0.814028ZM5.98669%2021C7.0517%2021%207.86158%2020.1705%207.86158%2019.0925C7.86158%2018.011%207.0517%2017.1815%205.98669%2017.1815C4.94907%2017.1815%204.12549%2018.011%204.12549%2019.0908C4.12549%2020.1705%204.94907%2021%205.98669%2021Z%22%20fill=%22%2305141F%22/%3E%0A%3C/svg%3E"); } /* Context CTA ("Tell me about this car" 19:683): 349x50, r10, flat #05141F, * white Bold 16, centred. */ .hdcw-opener button.hdcw-op-ctx { min-height: 50px; margin: 0 6px 0 8px; /* 349 wide at x24 (16-browse-auto) */ border: 0; border-radius: 10px; padding: 15px 0 15px; background: #05141F; color: #fff; font-size: 16px; font-weight: 600; line-height: 20px; } .hdcw-opener button.hdcw-op-ctx:hover { background: #05141F; opacity: .9; } /* ---------- Chips (item 16:212): 31px white, r10, NO border, 0/4/4 25% * shadow, Regular 12/13 black, centred, 5px gaps both ways, rows starting 2px * in from the bubble edge (x18). Selected = a 1px #05141F stroke * ("Adventurous" 37:328, "Automatic (155)" 19:414). */ .hdcw-chips { gap: 5px; padding: 0 2px; } .hdcw-chip { background: #fff; color: #000000; border-color: transparent; border-radius: 10px; min-height: 31px; box-sizing: border-box; padding: 7.5px 16px 8.5px; /* text cap line 9.5px under the chip top */ font-size: 12px; line-height: 13px; letter-spacing: 0; box-shadow: 0 4px 4px rgba(0,0,0,.25); } .hdcw-chip:hover { background: #F4F4F4; border-color: transparent; color: #000000; } .hdcw-chip--sel { border-color: #05141F; box-shadow: 0 4px 4px rgba(0,0,0,.25); font-weight: 400; } /* The artwork's selected chip is a 1px stroke and nothing else. Bootstrap's * reboot (KD3 loads 4.3.1) adds `button:focus { outline: 5px auto }`, so a * tapped chip would also wear the browser's focus ring. 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): Bold 11 #6D6D6D at x24, 13px under a * bubble and 9px above its chip row. */ .hdcw-ghead { font-weight: 600; letter-spacing: 0; font-size: 11px; line-height: 13px; margin: 3px 6px -1px 8px; } .hdcw-chips + .hdcw-ghead { margin-top: 8px; } /* Quiz answers sit flush with the bubble at x16 (37:328) and 8px under it, * on a 35px pitch, where the stock rows under a section head start at x18 on * a 36px pitch (16:226 vs 37:338). */ .hdcw-bot + .hdcw-chips { padding-left: 0; margin-top: 1px; row-gap: 4px; } /* ---------- Car cards ("csr search" 19:566): 176 wide, 14px apart, white, * 1px #E4E6EA, r10, 244 tall. Photo 176x113 square-topped. Body 12px in: * title Regular 12/12, price Bold 12/19, monthly Regular 12/16, meta Regular * 10/17. Flush split action bar: Details (77, white, #E4E6EA rule) | * I'm Interested (99, #05141F, white ink), both Regular 12/13, ls -1%. */ .hdcw-cars { gap: 14px; } .hdcw-ncgrid { gap: 14px; } .hdcw-car { border-radius: 0 0 10px 10px; border-color: #E4E6EA; } .hdcw-car img.hdcw-carimg, .hdcw-car .hdcw-noimg { height: 113px; } .hdcw-car .hdcw-carbody { padding: 8px 11px 10px; } .hdcw-car h4.hdcw-cartitle { /* name every property: Bootstrap's h4 rule would win otherwise */ margin: 0; font-family: var(--hdcw-font); font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: .01em; color: #000000; max-height: 28px; } .hdcw-car .hdcw-price { color: #000000; font-size: 12px; font-weight: 600; line-height: 19px; margin-top: 2px; } .hdcw-car .hdcw-mo { color: #000000; font-size: 12px; font-weight: 400; line-height: 16px; } .hdcw-car .hdcw-meta { color: #000000; font-size: 10px; line-height: 17px; margin-top: 0; } .hdcw-ncgrid .hdcw-carbody { padding: 8px 11px 14px; } .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: #05141F; 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: #05141F; opacity: .85; color: #fff; } /* ---------- Footer (24:712): an #E4E6EA band 400x129. Input 299x51 @21,20, * r10, 1px #000, placeholder Regular 14 (ls 1%) 17px in. Send: the 52px * #05141F circle 6px right of it. Disclosure Regular 12/15, black, centred, * 17px above the panel foot. */ .hdcw-input { background: #E4E6EA; border-top: 0; padding: 20px 22px 8px 21px; /* the 52px send sets the row: 20 + 52 + 8 */ gap: 6px; } .hdcw-input input { box-sizing: border-box; height: 51px; border-radius: 10px; padding: 2px 20px 0 17px; font-size: 14px; line-height: 47px; letter-spacing: .01em; } .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: #05141F; } .hdcw-send { width: 52px; height: 52px; padding: 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2252%22%20height=%2252%22%20viewBox=%220%200%2052%2052%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Ccircle%20cx=%2226%22%20cy=%2226%22%20r=%2226%22%20fill=%22%2305141F%22/%3E%0A%3Cpath%20d=%22M19.9999%2025L19.3959%2019.563C19.2229%2018.007%2020.8249%2016.864%2022.2399%2017.535L34.1839%2023.193C35.7089%2023.915%2035.7089%2026.085%2034.1839%2026.807L22.2399%2032.466C20.8249%2033.136%2019.2229%2031.994%2019.3959%2030.438L19.9999%2025ZM19.9999%2025H26.9999%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E") center / 52px 52px no-repeat; } .hdcw-send svg { display: none; } .hdcw-send:disabled { opacity: .5; } .hdcw-powered { background: #E4E6EA; font-size: 12px; line-height: 15px; letter-spacing: .01em; padding: 1px 56px 18px 52px; /* the artwork's centred box sits 2px left of centre */ } .hdcw-powered a.hdcw-tc { color: #000000; text-decoration: underline; } .hdcw-powered a.hdcw-tc:hover { color: #05141F; } .hdcw-powered > div { display: inline; } /* The home artboard (01-chat, the opener list) prints the T&C link plain; * every other 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; } .hdcw-powered > div:first-child::after { content: '. '; white-space: pre; } @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; } }