/* chat-themes-1016 chat widget branding - Automart Lucan (al, template AL). * Source of truth: the designer's Figma "Automartlucan (Ai Assistant) (Copy)" * (file q5hwWOSbYAEKCS0fpbn5oi) and its 16 @2x artboard PNGs, which outrank * the node dump wherever the two disagree. Tooling and QA: * tickets/chat-themes-1016/al/qa-al/; design notes and the probe table: * tickets/chat-themes-1016/al/DESIGN-al.md. Glyphs are SVG exports of the * file's own nodes. * * Black and red on white: a flat black 81px header carrying the red robot * mark; #EDEDED bot bubbles with a #C7C7C7 stroke and a squared bottom-left * corner; black user bubbles; three #F1F1F1 r10 opener rows with a 1px * #B7B7B7 stroke, red glyphs and black chevrons, and a box-less "Something * else" row; white chips on a 0/4/4 25% shadow; white cards with a flush * Details | I'm Interested (red) bar; a black context CTA; a #E4E6EA footer * band with a black-stroked input and a red send circle. The launcher is * the designer's black "Virtual Assistant" pill. * Type: Google Sans + Montserrat, both loaded by the AL template itself. * The panel is 400x720 = the designer's artboard, so offsets transfer 1:1. * * Regenerate with tickets/chat-themes-1016/al/build-theme-al.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: #D11E24; --hdcw-on-accent: #fff; --hdcw-font: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --hdcw-bg: #fff; --hdcw-surface: #fff; /* Rectangle 8 (15:158) 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 - the runs override #504949 to black */ --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: #000000; --hdcw-head-color: #fff; --hdcw-user-bg: #000000; --hdcw-user-color: #fff; --hdcw-link: #000000; --hdcw-btn-bg: #D11E24; --hdcw-btn-color: #fff; --hdcw-fab-gap: 0; /* a pill docks on the vehicle action bar */ } /* ---------- Launcher (52004:617): the designer's lockup, exported 166x47. * On the 400x720 home artboard (49:780) its outer stroke ends ~8.5px from the * right edge and ~11.6px from the bottom; placed by the robot and wordmark ink. Same lockup at every viewport. */ .hdcw-fab { width: 166px; height: 47px; right: 8.5px; /* robot 255..282 x 673..698 on 03-home: 255.5 x 673.5 here, the half pixel the 2x raster snaps to */ bottom: 11.5px; max-width: calc(100vw - 4px); border-radius: 23px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%22166%22%20height=%2247%22%20viewBox=%220%200%20166%2047%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Crect%20x=%220.503047%22%20y=%220.503047%22%20width=%22164.994%22%20height=%2245.7256%22%20rx=%2220.5%22%20fill=%22black%22%20stroke=%22white%22/%3E%0A%3Cpath%20d=%22M73.8405%2021.6457L69.6845%2012.0125H72.0928L75.7259%2020.5447H74.3084L77.9966%2012.0125H80.2122L76.0424%2021.6457H73.8405Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M80.9995%2021.6457V14.2419H83.1464V21.6457H80.9995ZM82.0729%2013.2097C81.6784%2013.2097%2081.3573%2013.0951%2081.1096%2012.8657C80.8619%2012.6363%2080.7381%2012.3519%2080.7381%2012.0125C80.7381%2011.673%2080.8619%2011.3886%2081.1096%2011.1593C81.3573%2010.9299%2081.6784%2010.8152%2082.0729%2010.8152C82.4674%2010.8152%2082.7886%2010.9253%2083.0363%2011.1455C83.284%2011.3565%2083.4078%2011.6317%2083.4078%2011.9712C83.4078%2012.329%2083.284%2012.6272%2083.0363%2012.8657C82.7977%2013.0951%2082.4766%2013.2097%2082.0729%2013.2097Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M85.1388%2021.6457V14.2419H87.1893V16.3337L86.9003%2015.7281C87.1205%2015.2052%2087.4737%2014.8107%2087.96%2014.5446C88.4462%2014.2694%2089.038%2014.1318%2089.7352%2014.1318V16.1135C89.6435%2016.1043%2089.5609%2016.0997%2089.4875%2016.0997C89.4141%2016.0905%2089.3361%2016.0859%2089.2536%2016.0859C88.6664%2016.0859%2088.1893%2016.2557%2087.8223%2016.5951C87.4645%2016.9254%2087.2856%2017.4438%2087.2856%2018.1502V21.6457H85.1388Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M94.2946%2021.7558C93.4231%2021.7558%2092.7442%2021.5356%2092.2579%2021.0952C91.7717%2020.6457%2091.5285%2019.9805%2091.5285%2019.0998V12.6042H93.6754V19.0722C93.6754%2019.3842%2093.7579%2019.6273%2093.9231%2019.8016C94.0882%2019.9668%2094.313%2020.0493%2094.5974%2020.0493C94.9369%2020.0493%2095.2259%2019.9576%2095.4644%2019.7741L96.0424%2021.2879C95.8222%2021.4438%2095.5561%2021.5631%2095.2442%2021.6457C94.9415%2021.7191%2094.6249%2021.7558%2094.2946%2021.7558ZM90.3863%2015.8933V14.2419H95.5194V15.8933H90.3863Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M100.371%2021.7558C99.7567%2021.7558%2099.2063%2021.6365%2098.72%2021.398C98.2429%2021.1594%2097.8714%2020.797%2097.6053%2020.3108C97.3393%2019.8154%2097.2062%2019.1869%2097.2062%2018.4254V14.2419H99.3531V18.1089C99.3531%2018.7236%2099.4815%2019.1777%2099.7384%2019.4713C100.004%2019.7557%20100.376%2019.8979%20100.853%2019.8979C101.183%2019.8979%20101.477%2019.8291%20101.734%2019.6915C101.991%2019.5447%20102.193%2019.3245%20102.339%2019.031C102.486%2018.7282%20102.56%2018.352%20102.56%2017.9025V14.2419H104.706V21.6457H102.67V19.6089L103.041%2020.2007C102.793%2020.7145%20102.427%2021.1044%20101.94%2021.3704C101.463%2021.6273%20100.94%2021.7558%20100.371%2021.7558Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M111.237%2021.6457V20.2007L111.099%2019.8842V17.297C111.099%2016.8383%20110.957%2016.4805%20110.672%2016.2236C110.397%2015.9667%20109.971%2015.8382%20109.393%2015.8382C108.998%2015.8382%20108.608%2015.9025%20108.223%2016.0309C107.847%2016.1502%20107.526%2016.3153%20107.259%2016.5263L106.489%2015.0263C106.893%2014.7419%20107.379%2014.5217%20107.948%2014.3657C108.516%2014.2098%20109.094%2014.1318%20109.682%2014.1318C110.81%2014.1318%20111.686%2014.3978%20112.31%2014.93C112.934%2015.4621%20113.246%2016.2924%20113.246%2017.4208V21.6457H111.237ZM108.98%2021.7558C108.402%2021.7558%20107.906%2021.6594%20107.493%2021.4668C107.081%2021.2649%20106.764%2020.9943%20106.544%2020.6548C106.324%2020.3154%20106.214%2019.9346%20106.214%2019.5126C106.214%2019.0722%20106.319%2018.6869%20106.53%2018.3566C106.75%2018.0264%20107.094%2017.7695%20107.562%2017.586C108.03%2017.3933%20108.64%2017.297%20109.393%2017.297H111.36V18.5493H109.627C109.122%2018.5493%20108.773%2018.6319%20108.581%2018.797C108.397%2018.9621%20108.305%2019.1686%20108.305%2019.4163C108.305%2019.6915%20108.411%2019.9117%20108.622%2020.0768C108.842%2020.2328%20109.14%2020.3108%20109.516%2020.3108C109.874%2020.3108%20110.195%2020.2282%20110.48%2020.0631C110.764%2019.8888%20110.971%2019.6365%20111.099%2019.3062L111.429%2020.297C111.273%2020.7741%20110.989%2021.1365%20110.576%2021.3842C110.163%2021.6319%20109.631%2021.7558%20108.98%2021.7558Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M115.189%2021.6457V11.4345H117.336V21.6457H115.189Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M69.6845%2036.5542L73.9781%2026.921H76.18L80.4874%2036.5542H78.148L74.625%2028.0495H75.5057L71.9689%2036.5542H69.6845ZM71.8313%2034.49L72.4231%2032.7973H77.3773L77.9828%2034.49H71.8313Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M83.7592%2036.6643C83.1261%2036.6643%2082.516%2036.5909%2081.9289%2036.4441C81.3509%2036.2882%2080.8922%2036.0955%2080.5527%2035.8661L81.2683%2034.3248C81.6078%2034.5358%2082.0069%2034.7101%2082.4656%2034.8478C82.9335%2034.9762%2083.3922%2035.0404%2083.8418%2035.0404C84.3372%2035.0404%2084.6858%2034.9808%2084.8877%2034.8615C85.0987%2034.7423%2085.2042%2034.5771%2085.2042%2034.3661C85.2042%2034.1918%2085.1216%2034.0633%2084.9565%2033.9808C84.8005%2033.889%2084.5895%2033.8202%2084.3234%2033.7744C84.0574%2033.7285%2083.7638%2033.6826%2083.4427%2033.6367C83.1307%2033.5909%2082.8142%2033.5312%2082.4931%2033.4578C82.172%2033.3753%2081.8784%2033.256%2081.6124%2033.1C81.3463%2032.9441%2081.1307%2032.733%2080.9656%2032.467C80.8096%2032.2009%2080.7316%2031.8569%2080.7316%2031.4349C80.7316%2030.967%2080.8646%2030.5541%2081.1307%2030.1963C81.4059%2029.8385%2081.8004%2029.5587%2082.3142%2029.3568C82.828%2029.1458%2083.4427%2029.0403%2084.1583%2029.0403C84.6629%2029.0403%2085.1766%2029.0954%2085.6996%2029.2055C86.2225%2029.3156%2086.6583%2029.4761%2087.007%2029.6871L86.2913%2031.2147C85.9335%2031.0037%2085.5711%2030.8615%2085.2042%2030.7881C84.8464%2030.7055%2084.4977%2030.6642%2084.1583%2030.6642C83.6812%2030.6642%2083.3326%2030.7284%2083.1124%2030.8569C82.8922%2030.9853%2082.7821%2031.1504%2082.7821%2031.3523C82.7821%2031.5358%2082.8601%2031.6734%2083.0161%2031.7651C83.1812%2031.8569%2083.3968%2031.9303%2083.6629%2031.9853C83.9289%2032.0404%2084.2179%2032.0908%2084.5298%2032.1367C84.851%2032.1734%2085.1721%2032.233%2085.4932%2032.3156C85.8143%2032.3982%2086.1033%2032.5174%2086.3602%2032.6734C86.6262%2032.8202%2086.8418%2033.0266%2087.007%2033.2927C87.1721%2033.5496%2087.2547%2033.889%2087.2547%2034.3111C87.2547%2034.7698%2087.1171%2035.178%2086.8418%2035.5359C86.5666%2035.8845%2086.1675%2036.1597%2085.6445%2036.3616C85.1308%2036.5634%2084.5023%2036.6643%2083.7592%2036.6643Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M91.0701%2036.6643C90.4371%2036.6643%2089.827%2036.5909%2089.2398%2036.4441C88.6618%2036.2882%2088.2031%2036.0955%2087.8636%2035.8661L88.5792%2034.3248C88.9187%2034.5358%2089.3178%2034.7101%2089.7765%2034.8478C90.2444%2034.9762%2090.7031%2035.0404%2091.1527%2035.0404C91.6481%2035.0404%2091.9967%2034.9808%2092.1986%2034.8615C92.4096%2034.7423%2092.5151%2034.5771%2092.5151%2034.3661C92.5151%2034.1918%2092.4325%2034.0633%2092.2674%2033.9808C92.1114%2033.889%2091.9004%2033.8202%2091.6343%2033.7744C91.3683%2033.7285%2091.0747%2033.6826%2090.7536%2033.6367C90.4417%2033.5909%2090.1251%2033.5312%2089.804%2033.4578C89.4829%2033.3753%2089.1893%2033.256%2088.9233%2033.1C88.6572%2032.9441%2088.4416%2032.733%2088.2765%2032.467C88.1205%2032.2009%2088.0425%2031.8569%2088.0425%2031.4349C88.0425%2030.967%2088.1756%2030.5541%2088.4416%2030.1963C88.7168%2029.8385%2089.1114%2029.5587%2089.6251%2029.3568C90.1389%2029.1458%2090.7536%2029.0403%2091.4692%2029.0403C91.9738%2029.0403%2092.4876%2029.0954%2093.0105%2029.2055C93.5335%2029.3156%2093.9692%2029.4761%2094.3179%2029.6871L93.6023%2031.2147C93.2445%2031.0037%2092.8821%2030.8615%2092.5151%2030.7881C92.1573%2030.7055%2091.8087%2030.6642%2091.4692%2030.6642C90.9921%2030.6642%2090.6435%2030.7284%2090.4233%2030.8569C90.2031%2030.9853%2090.093%2031.1504%2090.093%2031.3523C90.093%2031.5358%2090.171%2031.6734%2090.327%2031.7651C90.4921%2031.8569%2090.7077%2031.9303%2090.9738%2031.9853C91.2398%2032.0404%2091.5288%2032.0908%2091.8408%2032.1367C92.1619%2032.1734%2092.483%2032.233%2092.8041%2032.3156C93.1252%2032.3982%2093.4142%2032.5174%2093.6711%2032.6734C93.9371%2032.8202%2094.1527%2033.0266%2094.3179%2033.2927C94.483%2033.5496%2094.5656%2033.889%2094.5656%2034.3111C94.5656%2034.7698%2094.428%2035.178%2094.1527%2035.5359C93.8775%2035.8845%2093.4784%2036.1597%2092.9555%2036.3616C92.4417%2036.5634%2091.8132%2036.6643%2091.0701%2036.6643Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M95.8901%2036.5542V29.1504H98.037V36.5542H95.8901ZM96.9636%2028.1183C96.5691%2028.1183%2096.248%2028.0036%2096.0002%2027.7742C95.7525%2027.5449%2095.6287%2027.2605%2095.6287%2026.921C95.6287%2026.5816%2095.7525%2026.2971%2096.0002%2026.0678C96.248%2025.8384%2096.5691%2025.7237%2096.9636%2025.7237C97.3581%2025.7237%2097.6792%2025.8338%2097.9269%2026.054C98.1746%2026.265%2098.2985%2026.5403%2098.2985%2026.8797C98.2985%2027.2375%2098.1746%2027.5357%2097.9269%2027.7742C97.6883%2028.0036%2097.3672%2028.1183%2096.9636%2028.1183Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M102.52%2036.6643C101.887%2036.6643%20101.277%2036.5909%20100.69%2036.4441C100.112%2036.2882%2099.6533%2036.0955%2099.3138%2035.8661L100.029%2034.3248C100.369%2034.5358%20100.768%2034.7101%20101.227%2034.8478C101.695%2034.9762%20102.153%2035.0404%20102.603%2035.0404C103.098%2035.0404%20103.447%2034.9808%20103.649%2034.8615C103.86%2034.7423%20103.965%2034.5771%20103.965%2034.3661C103.965%2034.1918%20103.883%2034.0633%20103.718%2033.9808C103.562%2033.889%20103.351%2033.8202%20103.085%2033.7744C102.818%2033.7285%20102.525%2033.6826%20102.204%2033.6367C101.892%2033.5909%20101.575%2033.5312%20101.254%2033.4578C100.933%2033.3753%20100.64%2033.256%20100.373%2033.1C100.107%2032.9441%2099.8918%2032.733%2099.7267%2032.467C99.5707%2032.2009%2099.4927%2031.8569%2099.4927%2031.4349C99.4927%2030.967%2099.6257%2030.5541%2099.8918%2030.1963C100.167%2029.8385%20100.562%2029.5587%20101.075%2029.3568C101.589%2029.1458%20102.204%2029.0403%20102.919%2029.0403C103.424%2029.0403%20103.938%2029.0954%20104.461%2029.2055C104.984%2029.3156%20105.419%2029.4761%20105.768%2029.6871L105.052%2031.2147C104.695%2031.0037%20104.332%2030.8615%20103.965%2030.7881C103.607%2030.7055%20103.259%2030.6642%20102.919%2030.6642C102.442%2030.6642%20102.094%2030.7284%20101.873%2030.8569C101.653%2030.9853%20101.543%2031.1504%20101.543%2031.3523C101.543%2031.5358%20101.621%2031.6734%20101.777%2031.7651C101.942%2031.8569%20102.158%2031.9303%20102.424%2031.9853C102.69%2032.0404%20102.979%2032.0908%20103.291%2032.1367C103.612%2032.1734%20103.933%2032.233%20104.254%2032.3156C104.575%2032.3982%20104.864%2032.5174%20105.121%2032.6734C105.387%2032.8202%20105.603%2033.0266%20105.768%2033.2927C105.933%2033.5496%20106.016%2033.889%20106.016%2034.3111C106.016%2034.7698%20105.878%2035.178%20105.603%2035.5359C105.328%2035.8845%20104.929%2036.1597%20104.406%2036.3616C103.892%2036.5634%20103.263%2036.6643%20102.52%2036.6643Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M110.368%2036.6643C109.496%2036.6643%20108.817%2036.4441%20108.331%2036.0038C107.845%2035.5542%20107.602%2034.8891%20107.602%2034.0083V27.5128H109.749V33.9808C109.749%2034.2927%20109.831%2034.5358%20109.996%2034.7101C110.161%2034.8753%20110.386%2034.9579%20110.671%2034.9579C111.01%2034.9579%20111.299%2034.8661%20111.538%2034.6826L112.116%2036.1964C111.895%2036.3524%20111.629%2036.4716%20111.317%2036.5542C111.015%2036.6276%20110.698%2036.6643%20110.368%2036.6643ZM106.46%2030.8018V29.1504H111.593V30.8018H106.46Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M117.62%2036.5542V35.1092L117.483%2034.7927V32.2055C117.483%2031.7468%20117.34%2031.389%20117.056%2031.1321C116.781%2030.8752%20116.354%2030.7468%20115.776%2030.7468C115.382%2030.7468%20114.992%2030.811%20114.606%2030.9394C114.23%2031.0587%20113.909%2031.2238%20113.643%2031.4349L112.872%2029.9348C113.276%2029.6504%20113.762%2029.4302%20114.331%2029.2743C114.9%2029.1183%20115.478%2029.0403%20116.065%2029.0403C117.194%2029.0403%20118.07%2029.3064%20118.694%2029.8385C119.318%2030.3706%20119.629%2031.2009%20119.629%2032.3294V36.5542H117.62ZM115.363%2036.6643C114.785%2036.6643%20114.29%2036.568%20113.877%2036.3753C113.464%2036.1735%20113.148%2035.9028%20112.927%2035.5634C112.707%2035.2239%20112.597%2034.8432%20112.597%2034.4212C112.597%2033.9808%20112.703%2033.5954%20112.914%2033.2652C113.134%2032.9349%20113.478%2032.678%20113.946%2032.4945C114.414%2032.3018%20115.024%2032.2055%20115.776%2032.2055H117.744V33.4578H116.01C115.506%2033.4578%20115.157%2033.5404%20114.964%2033.7055C114.781%2033.8707%20114.689%2034.0771%20114.689%2034.3248C114.689%2034.6001%20114.794%2034.8202%20115.006%2034.9854C115.226%2035.1413%20115.524%2035.2193%20115.9%2035.2193C116.258%2035.2193%20116.579%2035.1368%20116.863%2034.9716C117.148%2034.7973%20117.354%2034.545%20117.483%2034.2147L117.813%2035.2056C117.657%2035.6826%20117.373%2036.045%20116.96%2036.2927C116.547%2036.5405%20116.015%2036.6643%20115.363%2036.6643Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M121.572%2036.5542V29.1504H123.623V31.2009L123.238%2030.5816C123.504%2030.0862%20123.884%2029.7055%20124.38%2029.4394C124.875%2029.1733%20125.439%2029.0403%20126.073%2029.0403C126.66%2029.0403%20127.183%2029.1596%20127.641%2029.3981C128.109%2029.6275%20128.476%2029.9853%20128.742%2030.4715C129.008%2030.9486%20129.141%2031.5633%20129.141%2032.3156V36.5542H126.995V32.6459C126.995%2032.0495%20126.862%2031.6092%20126.595%2031.3248C126.339%2031.0404%20125.972%2030.8982%20125.495%2030.8982C125.155%2030.8982%20124.848%2030.9715%20124.572%2031.1183C124.306%2031.256%20124.095%2031.4716%20123.939%2031.7651C123.793%2032.0587%20123.719%2032.4349%20123.719%2032.8936V36.5542H121.572Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M134.115%2036.6643C133.243%2036.6643%20132.564%2036.4441%20132.078%2036.0038C131.592%2035.5542%20131.349%2034.8891%20131.349%2034.0083V27.5128H133.496V33.9808C133.496%2034.2927%20133.578%2034.5358%20133.743%2034.7101C133.909%2034.8753%20134.133%2034.9579%20134.418%2034.9579C134.757%2034.9579%20135.046%2034.8661%20135.285%2034.6826L135.863%2036.1964C135.643%2036.3524%20135.376%2036.4716%20135.065%2036.5542C134.762%2036.6276%20134.445%2036.6643%20134.115%2036.6643ZM130.207%2030.8018V29.1504H135.34V30.8018H130.207Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M43.1267%2017.486V12.6281H38.1115M46.8881%2023.5584V25.9873M30.5886%2024.7729H33.0962M53.1572%2024.7729H55.6648M39.3653%2023.5584V25.9873M53.1572%2029.6308C53.1572%2030.275%2052.893%2030.8928%2052.4227%2031.3483C51.9524%2031.8038%2051.3146%2032.0597%2050.6495%2032.0597H39.1496C38.4846%2032.0599%2037.8469%2032.3159%2037.3767%2032.7714L34.6158%2035.4457C34.4913%2035.5662%2034.3327%2035.6484%2034.1601%2035.6816C33.9874%2035.7149%2033.8084%2035.6978%2033.6458%2035.6325C33.4831%2035.5673%2033.3441%2035.4568%2033.2463%2035.315C33.1485%2035.1732%2033.0962%2035.0065%2033.0962%2034.836V19.9149C33.0962%2019.2708%2033.3604%2018.6529%2033.8307%2018.1974C34.301%2017.7419%2034.9388%2017.486%2035.6038%2017.486H50.6495C51.3146%2017.486%2051.9524%2017.7419%2052.4227%2018.1974C52.893%2018.6529%2053.1572%2019.2708%2053.1572%2019.9149V29.6308Z%22%20stroke=%22%23D11E24%22%20stroke-width=%222.2067%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cpath%20d=%22M17.1761%2012.1084L16.6296%2013.7904C16.4602%2014.3021%2016.1734%2014.7669%2015.7921%2015.1479C15.4109%2015.5289%2014.9459%2015.8154%2014.4342%2015.9845L12.7507%2016.531L12.7177%2016.5405C12.588%2016.5861%2012.4757%2016.6709%2012.3962%2016.7832C12.3167%2016.8954%2012.274%2017.0296%2012.274%2017.1671C12.274%2017.3046%2012.3167%2017.4388%2012.3962%2017.551C12.4757%2017.6633%2012.588%2017.7481%2012.7177%2017.7938L14.3997%2018.3403C14.9116%2018.5092%2015.377%2018.7956%2015.7585%2019.1766C16.14%2019.5576%2016.427%2020.0226%2016.5967%2020.5343L17.1432%2022.2148C17.1888%2022.3446%2017.2736%2022.4569%2017.3859%2022.5364C17.4981%2022.6159%2017.6322%2022.6586%2017.7698%2022.6586C17.9073%2022.6586%2018.0414%2022.6159%2018.1537%2022.5364C18.2659%2022.4569%2018.3507%2022.3446%2018.3964%2022.2148L18.9429%2020.5343C19.1392%2019.9393%2019.4937%2019.4089%2019.9683%2018.9999C20.3116%2018.7019%2020.7102%2018.4746%2021.1414%2018.3309L22.8249%2017.7843C22.9546%2017.7387%2023.067%2017.6539%2023.1465%2017.5416C23.2259%2017.4294%2023.2686%2017.2952%2023.2686%2017.1577C23.2686%2017.0201%2023.2259%2016.886%2023.1465%2016.7738C23.067%2016.6615%2022.9546%2016.5767%2022.8249%2016.531L21.1414%2015.9845C20.6358%2015.811%2020.1774%2015.5226%2019.8022%2015.1418C19.4269%2014.7611%2019.1452%2014.2985%2018.979%2013.7904L18.4325%2012.11C18.3871%2011.9797%2018.3024%2011.8668%2018.19%2011.7868C18.0775%2011.7069%2017.943%2011.664%2017.8051%2011.664C17.6672%2011.664%2017.5327%2011.7069%2017.4202%2011.7868C17.3078%2011.8668%2017.2231%2011.9797%2017.1777%2012.11%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M26.3324%209.88024L25.9908%2010.9315C25.8849%2011.2513%2025.7057%2011.5418%2025.4674%2011.7799C25.2292%2012.018%2024.9385%2012.1971%2024.6187%2012.3028L23.5665%2012.6444L23.5459%2012.6503C23.4648%2012.6788%2023.3946%2012.7318%2023.3449%2012.802C23.2953%2012.8721%2023.2686%2012.956%2023.2686%2013.0419C23.2686%2013.1279%2023.2953%2013.2117%2023.3449%2013.2819C23.3946%2013.352%2023.4648%2013.405%2023.5459%2013.4336L24.5971%2013.7752C24.9171%2013.8808%2025.2079%2014.0598%2025.4464%2014.2979C25.6848%2014.536%2025.8642%2014.8266%2025.9702%2015.1465L26.3118%2016.1968C26.3403%2016.2778%2026.3933%2016.3481%2026.4635%2016.3977C26.5336%2016.4474%2026.6175%2016.4741%2026.7034%2016.4741C26.7894%2016.4741%2026.8732%2016.4474%2026.9434%2016.3977C27.0135%2016.3481%2027.0665%2016.2778%2027.095%2016.1968L27.4366%2015.1465C27.5594%2014.7746%2027.7809%2014.4431%2028.0775%2014.1874C28.292%2014.0012%2028.5412%2013.8591%2028.8107%2013.7693L29.8629%2013.4277C29.944%2013.3992%2030.0142%2013.3462%2030.0639%2013.276C30.1135%2013.2058%2030.1402%2013.122%2030.1402%2013.036C30.1402%2012.9501%2030.1135%2012.8662%2030.0639%2012.7961C30.0142%2012.7259%2029.944%2012.6729%2029.8629%2012.6444L28.8107%2012.3028C28.4947%2012.1944%2028.2082%2012.0141%2027.9737%2011.7761C27.7392%2011.5382%2027.563%2011.2491%2027.4592%2010.9315L27.1176%209.88122C27.0893%209.7998%2027.0363%209.72921%2026.966%209.67926C26.8958%209.62931%2026.8117%209.60248%2026.7255%209.60248C26.6393%209.60248%2026.5552%209.62931%2026.485%209.67926C26.4147%209.72921%2026.3617%209.7998%2026.3334%209.88122%22%20fill=%22white%22/%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 black band, r15 on top. Mark * 36x41 @20,16; title "Automart Lucan" Montserrat Bold 18/18 at x80 y24, one * line; subtitle Google Sans Regular 12 at x80 y45, UNDER the title. Nav * icons: reset @295,23 (22x18), expand @334,24, close @369,24. */ .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 17.4px; gap: 0; background: #000000; } .hdcw-head::before { content: ''; flex: 0 0 40px; height: 45px; margin: 15px 22.6px 0 0; /* mark export (+1 bezel) at 17.4,15 (ink 18.5..56 as drawn); title at x80 */ background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2240%22%20height=%2245%22%20viewBox=%22-1%20-1%2040%2045%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M15.4228%2020.9126V15.3207H9.7031M19.7126%2027.9025V30.6984M1.12352%2029.3004H3.98338M26.8623%2029.3004H29.7221M11.133%2027.9025V30.6984M26.8623%2034.8923C26.8623%2035.6339%2026.5609%2036.345%2026.0246%2036.8694C25.4883%2037.3937%2024.7609%2037.6883%2024.0024%2037.6883H10.8871C10.1287%2037.6885%209.40136%2037.9831%208.86516%2038.5075L5.71646%2041.5859C5.57447%2041.7246%205.39358%2041.8192%205.19666%2041.8574C4.99974%2041.8957%204.79563%2041.8761%204.61013%2041.801C4.42463%2041.7258%204.26608%2041.5986%204.15452%2041.4354C4.04296%2041.2722%203.98341%2041.0804%203.98338%2040.8841V23.7085C3.98338%2022.967%204.28469%2022.2558%204.82101%2021.7315C5.35734%2021.2072%206.08476%2020.9126%206.84324%2020.9126H24.0024C24.7609%2020.9126%2025.4883%2021.2072%2026.0246%2021.7315C26.5609%2022.2558%2026.8623%2022.967%2026.8623%2023.7085V34.8923Z%22%20stroke=%22%23D11E24%22%20stroke-width=%222.24703%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cpath%20d=%22M30.6068%203.72471L31.4191%206.22486C31.671%206.98531%2032.0973%207.67628%2032.6639%208.24253C33.2305%208.80879%2033.9218%209.23463%2034.6823%209.48602L37.1846%2010.2984L37.2336%2010.3124C37.4264%2010.3803%2037.5934%2010.5063%2037.7116%2010.6732C37.8297%2010.84%2037.8931%2011.0394%2037.8931%2011.2438C37.8931%2011.4483%2037.8297%2011.6477%2037.7116%2011.8145C37.5934%2011.9813%2037.4264%2012.1074%2037.2336%2012.1753L34.7337%2012.9876C33.9727%2013.2387%2033.281%2013.6644%2032.714%2014.2307C32.1469%2014.797%2031.7203%2015.4881%2031.4681%2016.2488L30.6558%2018.7466C30.5879%2018.9394%2030.4619%2019.1065%2030.2951%2019.2246C30.1282%2019.3427%2029.9289%2019.4062%2029.7244%2019.4062C29.52%2019.4062%2029.3207%2019.3427%2029.1538%2019.2246C28.987%2019.1065%2028.861%2018.9394%2028.7931%2018.7466L27.9808%2016.2488C27.6889%2015.3644%2027.162%2014.576%2026.4565%2013.9681C25.9464%2013.5251%2025.3539%2013.1872%2024.7129%2012.9736L22.2106%2012.1613C22.0178%2012.0934%2021.8508%2011.9673%2021.7327%2011.8005C21.6145%2011.6336%2021.5511%2011.4343%2021.5511%2011.2298C21.5511%2011.0254%2021.6145%2010.826%2021.7327%2010.6592C21.8508%2010.4923%2022.0178%2010.3663%2022.2106%2010.2984L24.7129%209.48602C25.4644%209.22815%2026.1458%208.79941%2026.7035%208.23353C27.2613%207.66764%2027.6801%206.98006%2027.9271%206.22486L28.7394%203.72704C28.8068%203.5334%2028.9328%203.36554%2029.0999%203.24675C29.267%203.12796%2029.4669%203.06413%2029.6719%203.06413C29.8769%203.06413%2030.0769%203.12796%2030.244%203.24675C30.4111%203.36554%2030.5371%203.5334%2030.6044%203.72704%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M16.9971%200.412858L17.5048%201.97545C17.6623%202.45073%2017.9287%202.88259%2018.2828%203.2365C18.637%203.59041%2019.069%203.85656%2019.5443%204.01368L21.1083%204.52141L21.1389%204.53017C21.2594%204.57259%2021.3638%204.65138%2021.4376%204.75565C21.5114%204.85992%2021.5511%204.98454%2021.5511%205.11231C21.5511%205.24008%2021.5114%205.3647%2021.4376%205.46897C21.3638%205.57324%2021.2594%205.65203%2021.1389%205.69445L19.5764%206.20219C19.1008%206.35911%2018.6685%206.62518%2018.3141%206.9791C17.9597%207.33302%2017.693%207.76498%2017.5354%208.24042L17.0278%209.80155C16.9853%209.92207%2016.9066%2010.0265%2016.8023%2010.1003C16.698%2010.1741%2016.5734%2010.2138%2016.4457%2010.2138C16.3179%2010.2138%2016.1933%2010.1741%2016.089%2010.1003C15.9848%2010.0265%2015.906%209.92207%2015.8636%209.80155L15.3559%208.24042C15.1734%207.68767%2014.8441%207.19494%2014.4032%206.81497C14.0844%206.53811%2013.714%206.3269%2013.3134%206.19343L11.7495%205.6857C11.629%205.64327%2011.5246%205.56449%2011.4508%205.46022C11.377%205.35594%2011.3373%205.23132%2011.3373%205.10356C11.3373%204.97579%2011.377%204.85117%2011.4508%204.7469C11.5246%204.64262%2011.629%204.56384%2011.7495%204.52141L13.3134%204.01368C13.7831%203.85251%2014.209%203.58455%2014.5576%203.23087C14.9062%202.87719%2015.1679%202.44745%2015.3223%201.97545L15.83%200.414317C15.8721%200.29329%2015.9509%200.188376%2016.0553%200.114133C16.1597%200.0398899%2016.2847%200%2016.4128%200C16.541%200%2016.6659%200.0398899%2016.7704%200.114133C16.8748%200.188376%2016.9535%200.29329%2016.9957%200.414317%22%20fill=%22white%22/%3E%0A%3C/svg%3E") center / contain no-repeat; } .hdcw-head > div { margin-top: 24px; min-width: 0; padding-right: 12px; } .hdcw-head b { font-family: 'Montserrat', var(--hdcw-font); font-size: 18px; line-height: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdcw-head small { display: block; margin-top: 4px; opacity: 1; font-size: 12px; font-weight: 400; line-height: 15px; 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: 24px; height: 20px; margin: 22px 0 0 auto; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2224%22%20height=%2220%22%20viewBox=%22-1%20-1%2024%2020%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: 24px 20px; } .hdcw-reset svg { display: none; } .hdcw-panel:not(.hdcw-max) .hdcw-exp { width: 18px; height: 18px; margin: 23px 0 0 15px; 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 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 at x16, user bubbles end at x382. */ .hdcw-msgs { padding: 14px 18px 14px 16px; } /* Bubbles. Bot (37:322 / 37:325 / 16:205 / 42:720): #EDEDED, 1px #C7C7C7 * inside stroke, r10 with the BOTTOM-LEFT corner square, Google Sans Regular * 14 (ls 1%) on an 18px line, text 22px in; one line 49 tall, two lines 67 * (04-help2 37:351), three 85. Fixed 334px (91%) wide. * User (37:388 / 42:676 / 4048:708): black, white Regular 14, r10 with the * BOTTOM-RIGHT corner square, 48 tall for one line, text cap 20px down. */ .hdcw-msg { max-width: 96%; /* the long user bubble 2030:495 is 352 of 366 */ padding: 15px 22px; font-size: 14px; line-height: 18px; letter-spacing: .01em; } .hdcw-bot { width: 91.26%; /* 334 of the 366px column */ max-width: 91.26%; box-sizing: border-box; background: #EDEDED; border-color: #C7C7C7; border-radius: 10px 10px 10px 0; padding: 15px 22px 14px 21px; /* cap line 19px under the top, last cap 29px over the foot: the designer's median (1 line 47-51 tall, 2 lines 62-68, 3 lines 83) */ color: #000000; } /* The greeting (1:11 on 01-chat, 11, 15, 16): a 95px bubble, its Bold * headline then a 24px line and an 18px line (cap lines 112.5 / 137 / 155). * The headline is an inline-block with a 6px bottom margin, so it grows its * own line only, whatever the admin copy after it. A first bubble followed by * a car card (the vehicle page's "Interested in this car?" line) or by the * stock section heads (/search) is not the greeting (CON-1024). */ .hdcw-msgs > .hdcw-bot:first-child:not(:has(+ .hdcw-cars, + .hdcw-ghead)) { padding: 14px 22px 19px 21px; margin-bottom: 1px; } /* the next bubble 11px under it (02/04/05: 190 -> 201) */ .hdcw-bot b, .hdcw-bot strong { font-weight: 600; } .hdcw-msgs > .hdcw-bot:first-child:not(:has(+ .hdcw-cars, + .hdcw-ghead)) b, .hdcw-msgs > .hdcw-bot:first-child:not(:has(+ .hdcw-cars, + .hdcw-ghead)) strong { display: inline-block; margin-bottom: 6px; font-weight: 700; } .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 its own * bubble: WHITE with a 1px #E4E6EA stroke, Google Sans 14 on a 19px leading, * SemiBold underlined links, text box 28px under the top edge and 68px above * the bottom one (the designer's fixed rectangle). */ .hdcw-bot:has(a.hdcw-link) { background: #fff; border-color: #E4E6EA; line-height: 19px; padding: 28px 22px 66px 21px; /* text box 28px under the top (cap 32), 68px over the foot; 22 on the right (the 27 drawn wraps "km," early in Chrome's slightly wider Google Sans) */ } .hdcw-user { border-radius: 10px 10px 0 10px; font-weight: 400; padding: 17px 24px 13px; } /* 48 tall, text cap 20 down, 24.5 in (37:388 'Adventurous', 4048:708) */ .hdcw-typing { background: #EDEDED; border-color: #C7C7C7; border-radius: 10px 10px 10px 0; padding: 15px 22px 14px 21px; } /* "Searching our stock..." (2030:573, 19:537): Google Sans Regular 12 (NOT * italic), #6D6D6D, x20; 11px under the bubble above, 13px over the cards. */ .hdcw-status { font-style: normal; font-size: 12px; line-height: 15px; margin: 1px 0 3px; } /* ---------- Openers (lozenge 12:145 / 6001:1006 / 6001:1031): 361x72 rows, * r10, #F1F1F1, 1px #B7B7B7 inside stroke, NO shadow, 9px apart (tops 226 / * 307 / 388), the first 36px under the greeting. Titles Montserrat Bold 15, * captions Google Sans Regular 12, black; glyph #D11E24 ~23px in; black * chevron 6x12 ~17.5px from the right edge, 29.5px down. */ .hdcw-opener { gap: 9px; margin: 25px 5px 0 0; } /* 361 wide: x16..377; 36px under the greeting (1px of it is the greeting's own margin) */ /* With the context CTA first (a vehicle page) the box sits 26px under the * card above it, not 36 (16-browse-auto: card 1956 -> CTA 1982). */ .hdcw-opener:has(> .hdcw-op-ctx) { margin-top: 16px; } .hdcw-opener button { position: relative; } .hdcw-panel .hdcw-opener button.hdcw-op-used, .hdcw-panel .hdcw-opener button.hdcw-op-new, .hdcw-panel .hdcw-opener button.hdcw-op-quiz, .hdcw-panel .hdcw-opener button.hdcw-op-tradein, .hdcw-panel .hdcw-opener button.hdcw-op-alert { box-sizing: border-box; min-height: 72px; border: 1px solid #B7B7B7; border-radius: 10px; padding: 18px 40px 16px 61px; 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 16.5px top 28.5px / 8px 14px border-box, #F1F1F1; color: #000000; text-align: left; box-shadow: none; font-family: 'Montserrat', var(--hdcw-font); font-size: 15px; font-weight: 700; line-height: 18px; } /* The designer set each row by hand: "Help me Choose a Car" 1px further left * (6001:1011 @77), "Get First-Mover Advantage!" 2px (6001:1036 @76) with its * caption at 77; their chevrons 1px further left (352.5 vs 353.5). */ .hdcw-panel .hdcw-opener button.hdcw-op-quiz, .hdcw-panel .hdcw-opener button.hdcw-op-alert { background-position: right 17.5px top 28.5px; } .hdcw-panel .hdcw-opener button.hdcw-op-quiz { padding-left: 60px; } .hdcw-panel .hdcw-opener button.hdcw-op-alert { padding-left: 59px; padding-top: 17px; padding-bottom: 17px; } /* title cap 21px down (409 on a row at 388), caption 41.5 */ .hdcw-panel .hdcw-opener button.hdcw-op-alert::after { padding-left: 1px; margin-top: 1.5px; } .hdcw-panel .hdcw-opener button.hdcw-op-used:hover, .hdcw-panel .hdcw-opener button.hdcw-op-new:hover, .hdcw-panel .hdcw-opener button.hdcw-op-quiz:hover, .hdcw-panel .hdcw-opener button.hdcw-op-tradein:hover, .hdcw-panel .hdcw-opener button.hdcw-op-alert:hover { background-color: #E7E7E7; opacity: 1; } /* Glyph boxes = the export + its 1px bezel, placed from the row's padding * box (artwork offset - 1px border - 1px bezel). */ .hdcw-panel .hdcw-opener button.hdcw-op-used::before, .hdcw-panel .hdcw-opener button.hdcw-op-new::before, .hdcw-panel .hdcw-opener button.hdcw-op-quiz::before, .hdcw-panel .hdcw-opener button.hdcw-op-tradein::before, .hdcw-panel .hdcw-opener button.hdcw-op-alert::before, .hdcw-panel .hdcw-opener button.hdcw-op-else::before { content: ''; position: absolute; background: center / contain no-repeat; } /* Steering wheel (62001:852), 21x21 export @39.25,248.25 on a row at 16,226. */ .hdcw-panel .hdcw-opener button.hdcw-op-used::before { left: 21.25px; top: 20.25px; 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%20d=%22M10.5%2020.2317C15.8748%2020.2317%2020.2317%2015.8748%2020.2317%2010.5M10.5%2020.2317C5.12518%2020.2317%200.768293%2015.8748%200.768293%2010.5M10.5%2020.2317V14.3927M20.2317%2010.5C20.2317%205.12518%2015.8748%200.768293%2010.5%200.768293C5.12518%200.768293%200.768293%205.12518%200.768293%2010.5M20.2317%2010.5H14.3927M0.768293%2010.5H6.60732%22%20stroke=%22%23D11E24%22%20stroke-width=%221.53659%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cmask%20id=%22mask0_62001_852%22%20style=%22mask-type:luminance%22%20maskUnits=%22userSpaceOnUse%22%20x=%226%22%20y=%226%22%20width=%229%22%20height=%229%22%3E%0A%3Cpath%20d=%22M14.3927%2010.5C14.3927%2011.5324%2013.9825%2012.5226%2013.2525%2013.2525C12.5225%2013.9826%2011.5324%2014.3927%2010.5%2014.3927C9.46755%2014.3927%208.47742%2013.9826%207.74741%2013.2525C7.01739%2012.5226%206.60727%2011.5324%206.60727%2010.5C6.60727%209.46761%207.01739%208.47749%207.74741%207.74748C8.47742%207.01745%209.46755%206.60733%2010.5%206.60733C11.5324%206.60733%2012.5225%207.01745%2013.2525%207.74748C13.9825%208.47749%2014.3927%209.46761%2014.3927%2010.5Z%22%20fill=%22white%22/%3E%0A%3C/mask%3E%0A%3Cg%20mask=%22url(%23mask0_62001_852)%22%3E%0A%3Cpath%20d=%22M14.3927%2010.5H12.8561C12.8561%2011.1249%2012.6078%2011.7241%2012.166%2012.1661L13.2525%2013.2525L14.339%2014.3391C15.3572%2013.3209%2015.9293%2011.94%2015.9293%2010.5H14.3927ZM13.2525%2013.2525L12.166%2012.1661C11.7241%2012.6079%2011.1248%2012.8561%2010.5%2012.8561V14.3927V15.9293C11.9399%2015.9293%2013.3209%2015.3573%2014.339%2014.3391L13.2525%2013.2525ZM10.5%2014.3927V12.8561C9.87507%2012.8561%209.27579%2012.6079%208.83394%2012.1661L7.74741%2013.2525L6.66088%2014.3391C7.67907%2015.3573%209.06002%2015.9293%2010.5%2015.9293V14.3927ZM7.74741%2013.2525L8.83394%2012.1661C8.39208%2011.7241%208.14385%2011.1249%208.14385%2010.5H6.60727H5.07068C5.07068%2011.94%205.64269%2013.3209%206.66088%2014.3391L7.74741%2013.2525ZM6.60727%2010.5H8.14385C8.14385%209.87513%208.39208%209.27586%208.83394%208.83401L7.74741%207.74748L6.66088%206.66095C5.64269%207.67913%205.07068%209.06008%205.07068%2010.5H6.60727ZM7.74741%207.74748L8.83394%208.83401C9.27579%208.39215%209.87507%208.14391%2010.5%208.14391V6.60733V5.07074C9.06002%205.07074%207.67907%205.64275%206.66088%206.66095L7.74741%207.74748ZM10.5%206.60733V8.14391C11.1248%208.14391%2011.7241%208.39215%2012.166%208.83401L13.2525%207.74748L14.339%206.66095C13.3209%205.64275%2011.9399%205.07074%2010.5%205.07074V6.60733ZM13.2525%207.74748L12.166%208.83401C12.6078%209.27586%2012.8561%209.87513%2012.8561%2010.5H14.3927H15.9293C15.9293%209.06008%2015.3572%207.67913%2014.339%206.66095L13.2525%207.74748Z%22%20fill=%22%23D11E24%22/%3E%0A%3C/g%3E%0A%3Cmask%20id=%22mask1_62001_852%22%20style=%22mask-type:luminance%22%20maskUnits=%22userSpaceOnUse%22%20x=%226%22%20y=%226%22%20width=%229%22%20height=%229%22%3E%0A%3Cpath%20d=%22M14.3927%2010.5C14.3927%2011.5324%2013.9825%2012.5226%2013.2525%2013.2525C12.5225%2013.9826%2011.5324%2014.3927%2010.5%2014.3927C9.46755%2014.3927%208.47742%2013.9826%207.74741%2013.2525C7.01739%2012.5226%206.60727%2011.5324%206.60727%2010.5C6.60727%209.46761%207.01739%208.47749%207.74741%207.74748C8.47742%207.01745%209.46755%206.60733%2010.5%206.60733C11.5324%206.60733%2012.5225%207.01745%2013.2525%207.74748C13.9825%208.47749%2014.3927%209.46761%2014.3927%2010.5Z%22%20fill=%22white%22/%3E%0A%3C/mask%3E%0A%3Cg%20mask=%22url(%23mask1_62001_852)%22%3E%0A%3Cpath%20d=%22M14.3927%2010.5H12.8561C12.8561%2011.1249%2012.6078%2011.7241%2012.166%2012.1661L13.2525%2013.2525L14.339%2014.3391C15.3572%2013.3209%2015.9293%2011.94%2015.9293%2010.5H14.3927ZM13.2525%2013.2525L12.166%2012.1661C11.7241%2012.6079%2011.1248%2012.8561%2010.5%2012.8561V14.3927V15.9293C11.9399%2015.9293%2013.3209%2015.3573%2014.339%2014.3391L13.2525%2013.2525ZM10.5%2014.3927V12.8561C9.87507%2012.8561%209.27579%2012.6079%208.83394%2012.1661L7.74741%2013.2525L6.66088%2014.3391C7.67907%2015.3573%209.06002%2015.9293%2010.5%2015.9293V14.3927ZM7.74741%2013.2525L8.83394%2012.1661C8.39208%2011.7241%208.14385%2011.1249%208.14385%2010.5H6.60727H5.07068C5.07068%2011.94%205.64269%2013.3209%206.66088%2014.3391L7.74741%2013.2525ZM6.60727%2010.5H8.14385C8.14385%209.87513%208.39208%209.27586%208.83394%208.83401L7.74741%207.74748L6.66088%206.66095C5.64269%207.67913%205.07068%209.06008%205.07068%2010.5H6.60727ZM7.74741%207.74748L8.83394%208.83401C9.27579%208.39215%209.87507%208.14391%2010.5%208.14391V6.60733V5.07074C9.06002%205.07074%207.67907%205.64275%206.66088%206.66095L7.74741%207.74748ZM10.5%206.60733V8.14391C11.1248%208.14391%2011.7241%208.39215%2012.166%208.83401L13.2525%207.74748L14.339%206.66095C13.3209%205.64275%2011.9399%205.07074%2010.5%205.07074V6.60733ZM13.2525%207.74748L12.166%208.83401C12.6078%209.27586%2012.8561%209.87513%2012.8561%2010.5H14.3927H15.9293C15.9293%209.06008%2015.3572%207.67913%2014.339%206.66095L13.2525%207.74748Z%22%20fill=%22%23D11E24%22/%3E%0A%3C/g%3E%0A%3Cpath%20d=%22M13.2525%2013.2525C13.9825%2012.5226%2014.3927%2011.5324%2014.3927%2010.5C14.3927%209.46761%2013.9825%208.47749%2013.2525%207.74748C12.5225%207.01745%2011.5324%206.60733%2010.5%206.60733C9.46755%206.60733%208.47742%207.01745%207.74741%207.74748C7.01739%208.47749%206.60727%209.46761%206.60727%2010.5C6.60727%2011.5324%207.01739%2012.5226%207.74741%2013.2525C8.47742%2013.9826%209.46755%2014.3927%2010.5%2014.3927C11.5324%2014.3927%2012.5225%2013.9826%2013.2525%2013.2525Z%22%20stroke=%22%23D11E24%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); } /* No new-cars row in this artwork (al sells used only): the same wheel. */ .hdcw-panel .hdcw-opener button.hdcw-op-new::before { left: 21.25px; top: 20.25px; 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%20d=%22M10.5%2020.2317C15.8748%2020.2317%2020.2317%2015.8748%2020.2317%2010.5M10.5%2020.2317C5.12518%2020.2317%200.768293%2015.8748%200.768293%2010.5M10.5%2020.2317V14.3927M20.2317%2010.5C20.2317%205.12518%2015.8748%200.768293%2010.5%200.768293C5.12518%200.768293%200.768293%205.12518%200.768293%2010.5M20.2317%2010.5H14.3927M0.768293%2010.5H6.60732%22%20stroke=%22%23D11E24%22%20stroke-width=%221.53659%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cmask%20id=%22mask0_62001_852%22%20style=%22mask-type:luminance%22%20maskUnits=%22userSpaceOnUse%22%20x=%226%22%20y=%226%22%20width=%229%22%20height=%229%22%3E%0A%3Cpath%20d=%22M14.3927%2010.5C14.3927%2011.5324%2013.9825%2012.5226%2013.2525%2013.2525C12.5225%2013.9826%2011.5324%2014.3927%2010.5%2014.3927C9.46755%2014.3927%208.47742%2013.9826%207.74741%2013.2525C7.01739%2012.5226%206.60727%2011.5324%206.60727%2010.5C6.60727%209.46761%207.01739%208.47749%207.74741%207.74748C8.47742%207.01745%209.46755%206.60733%2010.5%206.60733C11.5324%206.60733%2012.5225%207.01745%2013.2525%207.74748C13.9825%208.47749%2014.3927%209.46761%2014.3927%2010.5Z%22%20fill=%22white%22/%3E%0A%3C/mask%3E%0A%3Cg%20mask=%22url(%23mask0_62001_852)%22%3E%0A%3Cpath%20d=%22M14.3927%2010.5H12.8561C12.8561%2011.1249%2012.6078%2011.7241%2012.166%2012.1661L13.2525%2013.2525L14.339%2014.3391C15.3572%2013.3209%2015.9293%2011.94%2015.9293%2010.5H14.3927ZM13.2525%2013.2525L12.166%2012.1661C11.7241%2012.6079%2011.1248%2012.8561%2010.5%2012.8561V14.3927V15.9293C11.9399%2015.9293%2013.3209%2015.3573%2014.339%2014.3391L13.2525%2013.2525ZM10.5%2014.3927V12.8561C9.87507%2012.8561%209.27579%2012.6079%208.83394%2012.1661L7.74741%2013.2525L6.66088%2014.3391C7.67907%2015.3573%209.06002%2015.9293%2010.5%2015.9293V14.3927ZM7.74741%2013.2525L8.83394%2012.1661C8.39208%2011.7241%208.14385%2011.1249%208.14385%2010.5H6.60727H5.07068C5.07068%2011.94%205.64269%2013.3209%206.66088%2014.3391L7.74741%2013.2525ZM6.60727%2010.5H8.14385C8.14385%209.87513%208.39208%209.27586%208.83394%208.83401L7.74741%207.74748L6.66088%206.66095C5.64269%207.67913%205.07068%209.06008%205.07068%2010.5H6.60727ZM7.74741%207.74748L8.83394%208.83401C9.27579%208.39215%209.87507%208.14391%2010.5%208.14391V6.60733V5.07074C9.06002%205.07074%207.67907%205.64275%206.66088%206.66095L7.74741%207.74748ZM10.5%206.60733V8.14391C11.1248%208.14391%2011.7241%208.39215%2012.166%208.83401L13.2525%207.74748L14.339%206.66095C13.3209%205.64275%2011.9399%205.07074%2010.5%205.07074V6.60733ZM13.2525%207.74748L12.166%208.83401C12.6078%209.27586%2012.8561%209.87513%2012.8561%2010.5H14.3927H15.9293C15.9293%209.06008%2015.3572%207.67913%2014.339%206.66095L13.2525%207.74748Z%22%20fill=%22%23D11E24%22/%3E%0A%3C/g%3E%0A%3Cmask%20id=%22mask1_62001_852%22%20style=%22mask-type:luminance%22%20maskUnits=%22userSpaceOnUse%22%20x=%226%22%20y=%226%22%20width=%229%22%20height=%229%22%3E%0A%3Cpath%20d=%22M14.3927%2010.5C14.3927%2011.5324%2013.9825%2012.5226%2013.2525%2013.2525C12.5225%2013.9826%2011.5324%2014.3927%2010.5%2014.3927C9.46755%2014.3927%208.47742%2013.9826%207.74741%2013.2525C7.01739%2012.5226%206.60727%2011.5324%206.60727%2010.5C6.60727%209.46761%207.01739%208.47749%207.74741%207.74748C8.47742%207.01745%209.46755%206.60733%2010.5%206.60733C11.5324%206.60733%2012.5225%207.01745%2013.2525%207.74748C13.9825%208.47749%2014.3927%209.46761%2014.3927%2010.5Z%22%20fill=%22white%22/%3E%0A%3C/mask%3E%0A%3Cg%20mask=%22url(%23mask1_62001_852)%22%3E%0A%3Cpath%20d=%22M14.3927%2010.5H12.8561C12.8561%2011.1249%2012.6078%2011.7241%2012.166%2012.1661L13.2525%2013.2525L14.339%2014.3391C15.3572%2013.3209%2015.9293%2011.94%2015.9293%2010.5H14.3927ZM13.2525%2013.2525L12.166%2012.1661C11.7241%2012.6079%2011.1248%2012.8561%2010.5%2012.8561V14.3927V15.9293C11.9399%2015.9293%2013.3209%2015.3573%2014.339%2014.3391L13.2525%2013.2525ZM10.5%2014.3927V12.8561C9.87507%2012.8561%209.27579%2012.6079%208.83394%2012.1661L7.74741%2013.2525L6.66088%2014.3391C7.67907%2015.3573%209.06002%2015.9293%2010.5%2015.9293V14.3927ZM7.74741%2013.2525L8.83394%2012.1661C8.39208%2011.7241%208.14385%2011.1249%208.14385%2010.5H6.60727H5.07068C5.07068%2011.94%205.64269%2013.3209%206.66088%2014.3391L7.74741%2013.2525ZM6.60727%2010.5H8.14385C8.14385%209.87513%208.39208%209.27586%208.83394%208.83401L7.74741%207.74748L6.66088%206.66095C5.64269%207.67913%205.07068%209.06008%205.07068%2010.5H6.60727ZM7.74741%207.74748L8.83394%208.83401C9.27579%208.39215%209.87507%208.14391%2010.5%208.14391V6.60733V5.07074C9.06002%205.07074%207.67907%205.64275%206.66088%206.66095L7.74741%207.74748ZM10.5%206.60733V8.14391C11.1248%208.14391%2011.7241%208.39215%2012.166%208.83401L13.2525%207.74748L14.339%206.66095C13.3209%205.64275%2011.9399%205.07074%2010.5%205.07074V6.60733ZM13.2525%207.74748L12.166%208.83401C12.6078%209.27586%2012.8561%209.87513%2012.8561%2010.5H14.3927H15.9293C15.9293%209.06008%2015.3572%207.67913%2014.339%206.66095L13.2525%207.74748Z%22%20fill=%22%23D11E24%22/%3E%0A%3C/g%3E%0A%3Cpath%20d=%22M13.2525%2013.2525C13.9825%2012.5226%2014.3927%2011.5324%2014.3927%2010.5C14.3927%209.46761%2013.9825%208.47749%2013.2525%207.74748C12.5225%207.01745%2011.5324%206.60733%2010.5%206.60733C9.46755%206.60733%208.47742%207.01745%207.74741%207.74748C7.01739%208.47749%206.60727%209.46761%206.60727%2010.5C6.60727%2011.5324%207.01739%2012.5226%207.74741%2013.2525C8.47742%2013.9826%209.46755%2014.3927%2010.5%2014.3927C11.5324%2014.3927%2012.5225%2013.9826%2013.2525%2013.2525Z%22%20stroke=%22%23D11E24%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); } /* Tap hand (52004:824), 20x24 export @40,327 on a row at 307. */ .hdcw-panel .hdcw-opener button.hdcw-op-quiz::before { left: 22px; top: 18px; width: 22px; height: 26px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2222%22%20height=%2226%22%20viewBox=%22-1%20-1%2022%2026%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M17.4893%2023.233H6.52364C6.49918%2023.2329%206.47514%2023.2266%206.45375%2023.2147C6.43235%2023.2028%206.41429%2023.1858%206.4012%2023.1651L1.1228%2014.6549C0.959269%2014.3962%200.849017%2014.1075%200.798507%2013.8056C0.747997%2013.5037%200.758246%2013.1948%200.828653%2012.897C0.899059%2012.5991%201.02821%2012.3183%201.20853%2012.071C1.38885%2011.8237%201.61672%2011.6148%201.87878%2011.4567C2.14085%2011.2986%202.43183%2011.1944%202.73469%2011.1502C3.03754%2011.106%203.34618%2011.1227%203.6425%2011.1993C3.93883%2011.2758%204.21689%2011.4108%204.46039%2011.5962C4.70388%2011.7817%204.90792%2012.0138%205.06054%2012.2791L6.44333%2014.6347V2.981C6.44333%202.3938%206.67659%201.83066%207.0918%201.41545C7.50701%201.00023%208.07016%200.766971%208.65736%200.766971C9.24456%200.766971%209.8077%201.00023%2010.2229%201.41545C10.6381%201.83066%2010.8714%202.3938%2010.8714%202.981V8.22065C10.8714%208.54921%2011.1326%208.81937%2011.4611%208.83004L17.9881%209.04796C18.3063%209.0586%2018.6079%209.1925%2018.8293%209.42138C19.0506%209.65026%2019.1743%209.95621%2019.1743%2010.2746V21.5481C19.1743%2021.995%2018.9968%2022.4235%2018.6808%2022.7395C18.3648%2023.0555%2017.9362%2023.233%2017.4893%2023.233Z%22%20stroke=%22%23D11E24%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); } /* Envelope (62001:868), 19x15 @39,410 on a row at 388. */ .hdcw-panel .hdcw-opener button.hdcw-op-alert::before { left: 21px; top: 20px; width: 21px; height: 17px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2221%22%20height=%2217%22%20viewBox=%22-1%20-1%2021%2017%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M0%2015V0H19V15H0ZM9.5%208.4375L1.9%203.75V13.125H17.1V3.75L9.5%208.4375ZM9.5%206.5625L17.1%201.875H1.9L9.5%206.5625ZM1.9%203.75V1.875V13.125V3.75Z%22%20fill=%22%23D11E24%22/%3E%0A%3C/svg%3E"); } .hdcw-panel .hdcw-opener button.hdcw-op-used::after, .hdcw-panel .hdcw-opener button.hdcw-op-new::after, .hdcw-panel .hdcw-opener button.hdcw-op-quiz::after, .hdcw-panel .hdcw-opener button.hdcw-op-tradein::after, .hdcw-panel .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: 1px; text-align: left; font-family: var(--hdcw-font); font-size: 12px; font-weight: 400; line-height: 15px; letter-spacing: 0; color: #000000; } /* The artwork's captions, verbatim; the stock number is live (CON-995): the * widget sets data-stock on the button once /chat/search answers, and the * caption without a number shows until it arrives, or if it cannot. * Roll back to the artwork's typed number: delete the [data-stock] rule and * put 'Over 75 vehicles in stock' (30002:640) in the one above it. */ .hdcw-panel .hdcw-opener button.hdcw-op-used::after { content: 'Vehicles in stock'; } .hdcw-panel .hdcw-opener button.hdcw-op-used[data-stock]::after { content: attr(data-stock) ' vehicles in stock'; } .hdcw-panel .hdcw-opener button.hdcw-op-quiz::after { content: 'Get matched to car to suit your needs'; } .hdcw-panel .hdcw-opener button.hdcw-op-alert::after { content: 'Receive a daily stock alert'; } /* "Something else" (2023:430): NO box - its rectangle 44002:623 is hidden - * just the red "?" bubble (56005:1186, 21x21 @38,480), the Montserrat Bold * 15 title at x77 (cap 483) and the black chevron @352.5,484.5, 9px under * the last row. */ .hdcw-panel .hdcw-opener button.hdcw-op-else { box-sizing: border-box; min-height: 41px; border: 1px solid transparent; border-radius: 10px; padding: 11px 40px 11px 60px; 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 17.5px top 14.5px / 8px 14px border-box; color: #000000; text-align: left; font-family: 'Montserrat', var(--hdcw-font); font-size: 15px; font-weight: 700; line-height: 18px; } .hdcw-panel .hdcw-opener button.hdcw-op-else:hover { background-color: #F4F4F4; opacity: 1; } .hdcw-panel .hdcw-opener button.hdcw-op-else::before { left: 20px; top: 9px; 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%20d=%22M20.2317%2010.5C20.2317%2013.081%2019.2064%2015.5563%2017.3814%2017.3814C15.5563%2019.2064%2013.081%2020.2317%2010.5%2020.2317C8.8323%2020.2317%207.26293%2019.8117%205.89025%2019.0731C3.97669%2018.0416%202.68903%2019.0004%201.55298%2019.1725C1.46803%2019.1847%201.3814%2019.1765%201.3002%2019.1488C1.21901%2019.121%201.14555%2019.0743%201.08586%2019.0127C0.996738%2018.9181%200.937761%2018.7991%200.91642%2018.6708C0.895079%2018.5426%200.912339%2018.4109%200.966005%2018.2925C1.41264%2017.2425%201.82137%2015.2511%201.26308%2013.5732C0.93433%2012.582%200.767266%2011.5443%200.768297%2010.5C0.768297%207.91899%201.7936%205.44369%203.61865%203.61864C5.4437%201.79359%207.919%200.768293%2010.5%200.768293C13.081%200.768293%2015.5563%201.79359%2017.3814%203.61864C19.2064%205.44369%2020.2317%207.91899%2020.2317%2010.5Z%22%20stroke=%22%23D11E24%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cpath%20d=%22M7.93902%207.93901C7.93919%207.49782%208.05333%207.06415%208.27038%206.68004C8.48744%206.29593%208.80004%205.97441%209.17789%205.74665C9.55575%205.51888%209.98604%205.39259%2010.427%205.38003C10.8681%205.36746%2011.3048%205.46904%2011.6951%205.67492C12.0853%205.88079%2012.4157%206.18399%2012.6542%206.55511C12.8928%206.92624%2013.0315%207.3527%2013.0568%207.79317C13.0821%208.23364%2012.9931%208.67317%2012.7986%209.06916C12.6041%209.46515%2012.3105%209.80417%2011.9464%2010.0534C11.2458%2010.5328%2010.5%2011.1884%2010.5%2012.0366M10.628%2015.3658H10.5M10.7561%2015.3658C10.7561%2015.4338%2010.7291%2015.4989%2010.6811%2015.5469C10.6331%2015.595%2010.5679%2015.6219%2010.5%2015.6219C10.4321%2015.6219%2010.3669%2015.595%2010.3189%2015.5469C10.2709%2015.4989%2010.2439%2015.4338%2010.2439%2015.3658C10.2439%2015.2979%2010.2709%2015.2328%2010.3189%2015.1847C10.3669%2015.1367%2010.4321%2015.1097%2010.5%2015.1097C10.5679%2015.1097%2010.6331%2015.1367%2010.6811%2015.1847C10.7291%2015.2328%2010.7561%2015.2979%2010.7561%2015.3658Z%22%20stroke=%22%23D11E24%22%20stroke-width=%221.53659%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); } /* Context CTA ("Tell me about this car" 19:683 on 16-browse-auto): 349x55 * at x24, r10, flat black, white Google Sans Bold 16 centred. */ .hdcw-panel .hdcw-opener button.hdcw-op-ctx { min-height: 55px; margin: 0 4px 0 8px; /* x24..373 in the x16..377 opener column */ border: 0; border-radius: 10px; padding: 18.5px 0 16.5px; /* cap line 21.5px under the bar top (19:681) */ background: #000000; color: #fff; font-size: 16px; font-weight: 700; line-height: 20px; } .hdcw-panel .hdcw-opener button.hdcw-op-ctx:hover { background: #000000; opacity: .85; } /* ---------- Chips (item 16:212): 31px white, r10, 1px transparent stroke, * 0/4/4 25% shadow, Google Sans Regular 12/13 black, centred, text 9px under * the chip top. Stock and model rows start at x18 on a 5px gap (36px pitch); * quiz answers flush at x16 on a 4px gap (35px pitch). Selected = 1px * #0C0F20 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: 8px 16px; /* the artwork hand-sizes each chip (12-25px of air); 16 keeps its POPULAR / LIFESTYLE rows in Chrome's Google Sans */ 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: #0C0F20; box-shadow: 0 4px 4px rgba(0,0,0,.25); font-weight: 400; } .hdcw-chip--sel:hover { border-color: #0C0F20; } /* Bootstrap's reboot (AL 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): Google Sans Bold 11 #6D6D6D, no * tracking, x24; 13px under a bubble, 18px under a chip row, 8px above its * chips. */ .hdcw-ghead { letter-spacing: 0; font-size: 11px; line-height: 14px; margin: 3px 6px -2px 8px; } .hdcw-chips + .hdcw-ghead { margin-top: 8px; } /* Answer chips straight under a question (the quiz, 02-help1 to 07-help5): * flush with the bubble at x16, 8px under it, 4px apart. */ .hdcw-bot + .hdcw-chips { padding-left: 0; margin-top: -2px; gap: 4px; } .hdcw-bot + .hdcw-chips .hdcw-chip { padding-left: 18px; padding-right: 18px; } /* the quiz answers are roomier: 'Adventurous' 70px of text in 107 (37:328) */ /* ---------- Car cards ("csr search" 19:566): 176x244, white, r10, 1px * #E4E6EA, 14px apart. The photo (19:541, 176x113) is drawn OVER the card's * stroke and square-topped, so the stroke is an inset shadow the photo and * the bar paint over, and only the bottom corners round. Body 12px in: * title Regular 12 (two lines 15 apart, cap 124.5 under the card top), price * Bold 12, monthly Regular 12, meta Regular 10. Flush split action bar 31 * tall at 213: Details (77, white, #E4E6EA stroke top/left/bottom, 19:564) | * I'm Interested (99, #D11E24 with a #E4E6EA stroke, white ink, 2023:436), * both Google Sans Regular 12/13, ls -1%. */ .hdcw-cars { gap: 14px; padding: 2px 0 0 2px; margin: -1px -2px -1px 0; } /* cards at x18..194 / x208..384 (2023:448/449), 2px past the user-bubble edge; 11px under the bubble, the model chips 9px under them (08-help6: 232 -> 243, 487 -> 496) */ .hdcw-ncgrid { gap: 14px; } .hdcw-car { border: 0; border-radius: 0 0 10px 10px; box-shadow: inset 0 0 0 1px #E4E6EA; } .hdcw-car img.hdcw-carimg, .hdcw-car .hdcw-noimg { height: 113px; } .hdcw-car .hdcw-carbody { padding: 9px 12px 7px; line-height: 15px; } .hdcw-car h4.hdcw-cartitle { /* name every property: Bootstrap's h4, AL's h1-h6 Montserrat and its * `.privacy-notice h3,h4 { padding: .5em 0 }` would win otherwise */ margin: 0; padding: 0; font-family: var(--hdcw-font); font-size: 12px; font-weight: 400; line-height: 15px; letter-spacing: .01em; color: #000000; max-height: 30px; } .hdcw-car .hdcw-price { color: #000000; font-size: 12px; font-weight: 700; line-height: 19px; margin-top: 1px; letter-spacing: .01em; } .hdcw-car .hdcw-mo { color: #000000; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: .01em; } .hdcw-car .hdcw-meta { color: #000000; font-size: 10px; line-height: 17px; margin-top: 1px; } .hdcw-ncgrid .hdcw-carbody { padding: 9px 12px 14px; } .hdcw-ncgrid h4.hdcw-cartitle { max-height: none; } .hdcw-car .hdcw-actions { margin: auto 0 0; gap: 0; } .hdcw-car .hdcw-pick { flex: 0 0 77px; box-sizing: border-box; border: 1px solid #E4E6EA; border-right: 0; border-radius: 0 0 0 10px; min-height: 31px; padding: 8px 0 8px 5px; /* 'Details' sits 2.5px right of centre (19:565 @41) */ 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: 1 1 0; /* the remaining 99 */ border-right: 1px solid #E4E6EA; border-radius: 0 0 10px 0; padding: 8px 2px 8px 0; /* 'I’m Interested' 1px left of centre (2023:442 @107) */ background: #D11E24; color: #fff; } .hdcw-car .hdcw-pick--primary:only-child { border-radius: 0 0 10px 10px; } .hdcw-car .hdcw-pick--primary:hover { background: #D11E24; opacity: .85; color: #fff; } /* ---------- Footer (24:712): #E4E6EA band 400x129. Input 299x51 @21,20, * r10, 1px black, placeholder Google Sans Regular 14 (ls 1%) black, 28px in. * Send: the red 52px circle 8px right of it. Disclosure: Google Sans * Regular 12/15 (ls .1px), black, centred in a 275px box at x62, 11px under * the input, 17px above the panel foot. */ .hdcw-input { background: #E4E6EA; border-top: 0; padding: 20px 20px 0 21px; /* the 52px send sets the row: 20 + 52 */ gap: 8px; } .hdcw-input input { box-sizing: border-box; min-width: 0; height: 51px; border-radius: 10px; padding: 2px 20px 0 27px; font-size: 14px; line-height: 47px; letter-spacing: .01em; } /* font: inherit - AL's style.css line 5327 has a bare ::-webkit-input-placeholder * { font-size: 1rem; color: #525252 } 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: #000000; } .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%23D11E24%22/%3E%0A%3Cpath%20d=%22M33.9108%2020.7147C34.3279%2019.6967%2033.2099%2018.7101%2032.0562%2019.079L17.9556%2023.5789C16.798%2023.9486%2016.658%2025.3424%2017.7229%2025.8867L22.2239%2028.1861L26.2431%2024.6395C26.4252%2024.4843%2026.6691%2024.3985%2026.9222%2024.4004C27.1754%2024.4023%2027.4176%2024.4919%2027.5966%2024.6499C27.7756%2024.8078%2027.8771%2025.0215%2027.8793%2025.2449C27.8815%2025.4683%2027.7842%2025.6835%2027.6083%2025.8441L23.5891%2029.3907L26.1958%2033.3624C26.8118%2034.302%2028.3913%2034.1777%2028.8103%2033.1571L33.9108%2020.7147Z%22%20fill=%22white%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: .1px; /* 2008:473 ls 0.10px */ padding: 11px 63px 16px 62px; /* text box 275 wide at x62, 11px under the input, 17px above the foot (cap lines 676.5 / 691) */ } .hdcw-powered a.hdcw-tc { color: #000000; text-decoration: underline; } .hdcw-powered a.hdcw-tc:hover { color: #D11E24; } .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" * plain; 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: 11px 24px 16px; } } /* 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; } }