/* CON-879 chat widget branding — Vector Motors (vm2). * Source of truth: the Figma file "Ai assistant- Vector motors" (key * GDWoITloWnzdGWbQLFcxZ3, read via the REST API — node dumps in * tickets/CON-879/), glyph geometry from the designer's export pack * (tickets/CON-879/assets/), each export verified against the canvas * before use (CON-874 lesson). Palette from the file's own nodes: ONE * brand gradient #B7D433 -> #819D01 (flat bright through 45% of its run, * then ramping dark — header 1:9, send circle 24:703, launcher 4014:699, * context CTA 19:680, I'm-Interested 2023:436 and even the cards' * "from €Xpm" text 19:545 all carry the SAME normalized handles; the * per-shape angles/stops below are those handles projected onto each * shape's box, direction fixed by the designer's own SVG export). Olive * #8CA228 opener glyphs, #8CA128 answer links, #F4F4F4 bot bubbles with * #D5DBB7 borders, #000 user bubbles/input stroke, #E4E6EA footer band * and card borders, #1E439C selected-chip outline. All text is BLACK on * the greens — the artwork never puts white on the gradient. * The panel is 400x720 = the designer's artboard, so offsets transfer 1:1. * Regenerate with tickets/CON-879/build-theme.py — edit the generator, * never this file. * * Served at /chat-theme; loaded by the widget AFTER its built-in stylesheet. * Level 1 = --hdcw-* token overrides, Level 2 = direct .hdcw-* rules. */ .hdcw-fab,.hdcw-panel { --hdcw-accent: #8CA228; /* Black on the gradient everywhere: buttons, header, launcher (4007:580, * 19:681, 2023:442, 10003:642 are all #000 on green). */ --hdcw-on-accent: #000; /* Type: the artwork's character runs are Figtree throughout — every * styleOverrideTable in the node dumps (bubbles 1:11/49:786/19:516, * chips 16:209, cards 19:545, footer 2008:473) overrides its node-level * font (Google Sans / Faculty Glyphic / Nunito Sans strays) to Figtree. * Titles are Exo 2 700 (node-level on 6001:1011/1036, 2023:434; 1:20 * overrides its Google Sans to Exo 2 700) — level-2 rules below. The * remaining node-level Nunito Sans leftovers with no overriding runs * (header title 4007:580, POPULAR/LIFESTYLE/MAKES 19:426, status 19:537, * CTA 19:681, launcher wordmark 4007:479) map to the site's own pair: * Exo 2 for headings/buttons, Figtree for running text (Emanuel's call — * VM2's style.css defines --header-font:"Exo 2", --body-font:"Figtree"). * The vm2 site imports both from Google Fonts itself (style.css lines * 2-3, variable 100..900), so naming them here adds no request; without * the token the panel falls back to the visitor's OS font (CON-853 * lesson). */ --hdcw-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Conversation background: the chat/alerts artboards (12:107, 19:382, * 4028:1057) all run on WHITE (Rectangle 8 #FFFFFF); only the home/quiz * frame 49:780 paints #F5F6F8 with white bubbles — the odd one out of * 16, so white wins and bubbles carry the grey. */ --hdcw-surface: #fff; --hdcw-text: #000; /* Section heads, "Searching our stock…", gallery counter (19:426/537). */ --hdcw-muted: #6D6D6D; /* Disclosure runs override the node's #504949 to #313131 (2008:473's * styleOverrideTable) — the node-level fill never renders, exactly the * kcd2 trap. */ --hdcw-footer: #313131; --hdcw-border: #000; /* input stroke 24:705 is 1px #000000 */ --hdcw-border-soft: #E4E6EA; --hdcw-radius: 15px; /* panel corners (Rectangle 2) */ --hdcw-radius-bubble: 10px; --hdcw-head-bg: linear-gradient(109.3deg, #B7D433 37.4%, #819D01 103.8%); --hdcw-head-color: #000; /* header title + icons are black (1:9 kids) */ --hdcw-user-bg: #000; /* user bubble 19:649 */ --hdcw-user-color: #fff; /* Car links inside answers: #8CA128 600 underlined (19:516 runs). One * digit off the icons' #8CA228 — both are the designer's, kept as-is. */ --hdcw-link: #8CA128; --hdcw-btn-bg: linear-gradient(103.9deg, #B7D433 39.5%, #819D01 104.5%); /* context CTA bar 19:680, 349x50 */ --hdcw-btn-color: #000; } /* ---------- Launcher: the designer's own lockup (4014:697, exported as * icon-virtual-assistant.svg): 253x52 gradient pill, r20, 1px white * stroke, white sparkle + robot-V glyphs, BLACK outlined "Virtual * Assistant" wordmark, drop shadow 0 3 4 rgba(0,0,0,.4) — all baked into * the export (261x60 with the shadow margins). Same pill on desktop: the * only other launcher in the file (49:835, a vertical side tab) is still * painted Kylemore red #FF1500/#E42312 with a #FF5748 tick — an * unrecolored stray from the kcd2 design, not this dealer's artwork * (jacs2 precedent: one pill for all viewports). The artboard docks the * pill ~6px off the corner; right/bottom below are that minus the * export's own shadow margins (4px sides, 7px foot). */ .hdcw-fab { width: 261px; height: 60px; right: 2px; bottom: 0; max-width: calc(100vw - 24px); border-radius: 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%22261%22%20height=%2260%22%20viewBox=%220%200%20261%2060%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cg%20filter=%22url(%23filter0_d_4014_697)%22%3E%0A%3Cpath%20d=%22M257%2033C257%2044.0457%20248.046%2053%20237%2053L24%2053C12.9543%2053%204%2044.0457%204%2033L4%2021C4%209.9543%2012.9543%201%2024%201L237%201.00002C248.046%201.00002%20257%209.95433%20257%2021L257%2033Z%22%20fill=%22url(%23paint0_linear_4014_697)%22/%3E%0A%3Cpath%20d=%22M237%2052.5L24%2052.5C13.2304%2052.5%204.5%2043.7695%204.5%2033L4.5%2021C4.50001%2010.2304%2013.2305%201.49998%2024%201.49998L237%201.5C247.77%201.5%20256.5%2010.2305%20256.5%2021L256.5%2033C256.5%2043.7696%20247.77%2052.5%20237%2052.5Z%22%20stroke=%22white%22/%3E%0A%3C/g%3E%0A%3Cpath%20d=%22M61.112%2021.9599L58.104%2032.3279C58.0507%2032.5199%2057.944%2032.6799%2057.784%2032.8079C57.6347%2032.9359%2057.4533%2032.9999%2057.24%2032.9999H55C54.776%2032.9999%2054.584%2032.9359%2054.424%2032.8079C54.2747%2032.6799%2054.1787%2032.5199%2054.136%2032.3279L51.112%2021.9599H53.64L55.656%2029.9279C55.6987%2030.1306%2055.7413%2030.3386%2055.784%2030.5519C55.8373%2030.7546%2055.88%2030.9572%2055.912%2031.1599H56.328C56.36%2030.9572%2056.3973%2030.7492%2056.44%2030.5359C56.4933%2030.3226%2056.5467%2030.1146%2056.6%2029.9119L58.6%2021.9599H61.112Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M64.6104%2025.0959V32.9999H62.2584V25.0959H64.6104ZM63.9544%2021.6079C64.4237%2021.6079%2064.6584%2021.8479%2064.6584%2022.3279V23.1759C64.6584%2023.6559%2064.4237%2023.8959%2063.9544%2023.8959H62.9304C62.461%2023.8959%2062.2264%2023.6559%2062.2264%2023.1759V22.3279C62.2264%2021.8479%2062.461%2021.6079%2062.9304%2021.6079H63.9544Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M68.4722%2025.0959L68.7603%2026.6639L68.9842%2026.8719V32.9999H66.6162V25.0959H68.4722ZM72.3282%2024.8879L72.1042%2027.0799H71.4482C71.0749%2027.0799%2070.6856%2027.1332%2070.2802%2027.2399C69.8749%2027.3466%2069.3629%2027.5066%2068.7442%2027.7199L68.5842%2026.3919C69.1389%2025.9012%2069.6989%2025.5279%2070.2642%2025.2719C70.8296%2025.0159%2071.3789%2024.8879%2071.9123%2024.8879H72.3282Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M76.5324%2022.9039V30.4719C76.5324%2030.7599%2076.5964%2030.9679%2076.7244%2031.0959C76.863%2031.2132%2077.087%2031.2719%2077.3964%2031.2719H78.4204L78.6764%2032.8719C78.4844%2032.9359%2078.2497%2032.9892%2077.9724%2033.0319C77.695%2033.0852%2077.4177%2033.1226%2077.1404%2033.1439C76.863%2033.1759%2076.6284%2033.1919%2076.4364%2033.1919C75.7217%2033.1919%2075.1617%2032.9999%2074.7564%2032.6159C74.3617%2032.2319%2074.1644%2031.6932%2074.1644%2030.9999V22.9039H76.5324ZM78.7404%2025.0959V26.6479H72.7724V25.1759L74.3084%2025.0959H78.7404Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M82.3269%2025.0959V30.2959C82.3269%2030.6266%2082.3962%2030.8612%2082.5349%2030.9999C82.6842%2031.1386%2082.9189%2031.2079%2083.2389%2031.2079C83.5695%2031.2079%2083.8949%2031.1492%2084.2149%2031.0319C84.5455%2030.9039%2084.9509%2030.7066%2085.4309%2030.4399L85.6229%2031.7359C85.0469%2032.2372%2084.4815%2032.6106%2083.9269%2032.8559C83.3722%2033.1012%2082.8015%2033.2239%2082.2149%2033.2239C80.7109%2033.2239%2079.9589%2032.4879%2079.9589%2031.0159V25.0959H82.3269ZM87.5589%2025.0959V32.9999H85.6869L85.4149%2031.4479L85.1909%2031.2239V25.0959H87.5589Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M93.6672%2024.8879C94.3286%2024.8879%2094.8886%2024.9786%2095.3472%2025.1599C95.8059%2025.3306%2096.1526%2025.6292%2096.3872%2026.0559C96.6326%2026.4719%2096.7552%2027.0479%2096.7552%2027.7839V32.9999H94.8672L94.5312%2031.2879L94.3713%2031.0479V27.7679C94.3713%2027.3946%2094.2806%2027.1226%2094.0993%2026.9519C93.9286%2026.7812%2093.5979%2026.6959%2093.1073%2026.6959C92.7019%2026.6959%2092.1953%2026.7119%2091.5872%2026.7439C90.9792%2026.7652%2090.3552%2026.7972%2089.7152%2026.8399L89.4912%2025.2719C89.8752%2025.1972%2090.3179%2025.1332%2090.8192%2025.0799C91.3206%2025.0266%2091.8219%2024.9839%2092.3232%2024.9519C92.8246%2024.9092%2093.2726%2024.8879%2093.6672%2024.8879ZM95.7793%2028.1359L95.7632%2029.4639L92.2432%2029.4799C91.9552%2029.4799%2091.7472%2029.5492%2091.6193%2029.6879C91.5019%2029.8266%2091.4432%2030.0132%2091.4432%2030.2479V30.6319C91.4432%2030.8986%2091.5179%2031.1066%2091.6672%2031.2559C91.8166%2031.3946%2092.0566%2031.4639%2092.3872%2031.4639C92.6646%2031.4639%2092.9632%2031.4052%2093.2832%2031.2879C93.6139%2031.1706%2093.9393%2031.0052%2094.2593%2030.7919C94.5793%2030.5786%2094.8619%2030.3279%2095.1073%2030.0399V31.0639C95.0112%2031.2239%2094.8673%2031.4266%2094.6753%2031.6719C94.4939%2031.9066%2094.2592%2032.1412%2093.9712%2032.3759C93.6833%2032.5999%2093.3472%2032.7919%2092.9632%2032.9519C92.5793%2033.1119%2092.1419%2033.1919%2091.6512%2033.1919C91.1712%2033.1919%2090.7393%2033.1066%2090.3553%2032.9359C89.9713%2032.7652%2089.6672%2032.5146%2089.4432%2032.1839C89.2192%2031.8532%2089.1073%2031.4426%2089.1073%2030.9519V30.1359C89.1073%2029.5066%2089.3206%2029.0159%2089.7472%2028.6639C90.1739%2028.3119%2090.7606%2028.1359%2091.5072%2028.1359H95.7793Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M100.984%2021.7999V30.4719C100.984%2030.7386%20101.064%2030.9412%20101.224%2031.0799C101.384%2031.2079%20101.619%2031.2719%20101.928%2031.2719H102.568L102.84%2032.8719C102.712%2032.9359%20102.531%2032.9892%20102.296%2033.0319C102.062%2033.0852%20101.822%2033.1226%20101.576%2033.1439C101.331%2033.1759%20101.123%2033.1919%20100.952%2033.1919C100.238%2033.1919%2099.6722%2033.0052%2099.2562%2032.6319C98.8402%2032.2586%2098.6322%2031.7359%2098.6322%2031.0639V21.7999H100.984Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M112.009%2021.9599C112.212%2021.9599%20112.388%2022.0186%20112.537%2022.1359C112.697%2022.2532%20112.804%2022.4079%20112.857%2022.5999L116.057%2032.9999H113.561L111.305%2024.8879C111.262%2024.7066%20111.22%2024.5252%20111.177%2024.3439C111.134%2024.1519%20111.097%2023.9706%20111.065%2023.7999H110.633C110.601%2023.9706%20110.564%2024.1519%20110.521%2024.3439C110.489%2024.5252%20110.446%2024.7066%20110.393%2024.8879L108.137%2032.9999H105.625L108.841%2022.5999C108.894%2022.4079%20108.996%2022.2532%20109.145%2022.1359C109.305%2022.0186%20109.486%2021.9599%20109.689%2021.9599H112.009ZM113.705%2028.2479V30.0879H107.977V28.2479H113.705Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M120.046%2024.8879C120.43%2024.8879%20120.846%2024.9039%20121.294%2024.9359C121.742%2024.9572%20122.179%2024.9892%20122.606%2025.0319C123.033%2025.0746%20123.411%2025.1279%20123.742%2025.1919L123.582%2026.6639C123.07%2026.6532%20122.553%2026.6479%20122.03%2026.6479C121.518%2026.6372%20121.017%2026.6319%20120.526%2026.6319C120.11%2026.6212%20119.79%2026.6266%20119.566%2026.6479C119.342%2026.6692%20119.182%2026.7226%20119.086%2026.8079C119.001%2026.8826%20118.958%2027.0212%20118.958%2027.2239C118.958%2027.4586%20119.038%2027.6186%20119.198%2027.7039C119.358%2027.7786%20119.625%2027.8639%20119.998%2027.9599L122.062%2028.4559C122.723%2028.6266%20123.214%2028.8826%20123.534%2029.2239C123.854%2029.5546%20124.014%2030.0559%20124.014%2030.7279C124.014%2031.3892%20123.891%2031.8959%20123.646%2032.2479C123.401%2032.5999%20123.011%2032.8452%20122.478%2032.9839C121.945%2033.1119%20121.257%2033.1759%20120.414%2033.1759C120.083%2033.1759%20119.593%2033.1599%20118.942%2033.1279C118.291%2033.0959%20117.577%2033.0159%20116.798%2032.8879L116.958%2031.4159C117.15%2031.4266%20117.395%2031.4372%20117.694%2031.4479C117.993%2031.4479%20118.318%2031.4479%20118.67%2031.4479C119.022%2031.4479%20119.374%2031.4479%20119.726%2031.4479C120.27%2031.4479%20120.686%2031.4372%20120.974%2031.4159C121.262%2031.3839%20121.459%2031.3199%20121.566%2031.2239C121.673%2031.1279%20121.726%2030.9839%20121.726%2030.7919C121.726%2030.5572%20121.635%2030.3972%20121.454%2030.3119C121.273%2030.2266%20120.985%2030.1359%20120.59%2030.0399L118.59%2029.5439C118.089%2029.4052%20117.699%2029.2292%20117.422%2029.0159C117.145%2028.8026%20116.947%2028.5412%20116.83%2028.2319C116.723%2027.9226%20116.67%2027.5546%20116.67%2027.1279C116.67%2026.5839%20116.777%2026.1519%20116.99%2025.8319C117.214%2025.5012%20117.571%2025.2612%20118.062%2025.1119C118.563%2024.9626%20119.225%2024.8879%20120.046%2024.8879Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M128.546%2024.8879C128.93%2024.8879%20129.346%2024.9039%20129.794%2024.9359C130.242%2024.9572%20130.679%2024.9892%20131.106%2025.0319C131.533%2025.0746%20131.911%2025.1279%20132.242%2025.1919L132.082%2026.6639C131.57%2026.6532%20131.053%2026.6479%20130.53%2026.6479C130.018%2026.6372%20129.517%2026.6319%20129.026%2026.6319C128.61%2026.6212%20128.29%2026.6266%20128.066%2026.6479C127.842%2026.6692%20127.682%2026.7226%20127.586%2026.8079C127.501%2026.8826%20127.458%2027.0212%20127.458%2027.2239C127.458%2027.4586%20127.538%2027.6186%20127.698%2027.7039C127.858%2027.7786%20128.125%2027.8639%20128.498%2027.9599L130.562%2028.4559C131.223%2028.6266%20131.714%2028.8826%20132.034%2029.2239C132.354%2029.5546%20132.514%2030.0559%20132.514%2030.7279C132.514%2031.3892%20132.391%2031.8959%20132.146%2032.2479C131.901%2032.5999%20131.511%2032.8452%20130.978%2032.9839C130.445%2033.1119%20129.757%2033.1759%20128.914%2033.1759C128.583%2033.1759%20128.093%2033.1599%20127.442%2033.1279C126.791%2033.0959%20126.077%2033.0159%20125.298%2032.8879L125.458%2031.4159C125.65%2031.4266%20125.895%2031.4372%20126.194%2031.4479C126.493%2031.4479%20126.818%2031.4479%20127.17%2031.4479C127.522%2031.4479%20127.874%2031.4479%20128.226%2031.4479C128.77%2031.4479%20129.186%2031.4372%20129.474%2031.4159C129.762%2031.3839%20129.959%2031.3199%20130.066%2031.2239C130.173%2031.1279%20130.226%2030.9839%20130.226%2030.7919C130.226%2030.5572%20130.135%2030.3972%20129.954%2030.3119C129.773%2030.2266%20129.485%2030.1359%20129.09%2030.0399L127.09%2029.5439C126.589%2029.4052%20126.199%2029.2292%20125.922%2029.0159C125.645%2028.8026%20125.447%2028.5412%20125.33%2028.2319C125.223%2027.9226%20125.17%2027.5546%20125.17%2027.1279C125.17%2026.5839%20125.277%2026.1519%20125.49%2025.8319C125.714%2025.5012%20126.071%2025.2612%20126.562%2025.1119C127.063%2024.9626%20127.725%2024.8879%20128.546%2024.8879Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M136.454%2025.0959V32.9999H134.102V25.0959H136.454ZM135.798%2021.6079C136.267%2021.6079%20136.502%2021.8479%20136.502%2022.3279V23.1759C136.502%2023.6559%20136.267%2023.8959%20135.798%2023.8959H134.774C134.305%2023.8959%20134.07%2023.6559%20134.07%2023.1759V22.3279C134.07%2021.8479%20134.305%2021.6079%20134.774%2021.6079H135.798Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M141.468%2024.8879C141.852%2024.8879%20142.268%2024.9039%20142.716%2024.9359C143.164%2024.9572%20143.601%2024.9892%20144.028%2025.0319C144.455%2025.0746%20144.833%2025.1279%20145.164%2025.1919L145.004%2026.6639C144.492%2026.6532%20143.975%2026.6479%20143.452%2026.6479C142.94%2026.6372%20142.439%2026.6319%20141.948%2026.6319C141.532%2026.6212%20141.212%2026.6266%20140.988%2026.6479C140.764%2026.6692%20140.604%2026.7226%20140.508%2026.8079C140.423%2026.8826%20140.38%2027.0212%20140.38%2027.2239C140.38%2027.4586%20140.46%2027.6186%20140.62%2027.7039C140.78%2027.7786%20141.047%2027.8639%20141.42%2027.9599L143.484%2028.4559C144.145%2028.6266%20144.636%2028.8826%20144.956%2029.2239C145.276%2029.5546%20145.436%2030.0559%20145.436%2030.7279C145.436%2031.3892%20145.313%2031.8959%20145.068%2032.2479C144.823%2032.5999%20144.433%2032.8452%20143.9%2032.9839C143.367%2033.1119%20142.679%2033.1759%20141.836%2033.1759C141.505%2033.1759%20141.015%2033.1599%20140.364%2033.1279C139.713%2033.0959%20138.999%2033.0159%20138.22%2032.8879L138.38%2031.4159C138.572%2031.4266%20138.817%2031.4372%20139.116%2031.4479C139.415%2031.4479%20139.74%2031.4479%20140.092%2031.4479C140.444%2031.4479%20140.796%2031.4479%20141.148%2031.4479C141.692%2031.4479%20142.108%2031.4372%20142.396%2031.4159C142.684%2031.3839%20142.881%2031.3199%20142.988%2031.2239C143.095%2031.1279%20143.148%2030.9839%20143.148%2030.7919C143.148%2030.5572%20143.057%2030.3972%20142.876%2030.3119C142.695%2030.2266%20142.407%2030.1359%20142.012%2030.0399L140.012%2029.5439C139.511%2029.4052%20139.121%2029.2292%20138.844%2029.0159C138.567%2028.8026%20138.369%2028.5412%20138.252%2028.2319C138.145%2027.9226%20138.092%2027.5546%20138.092%2027.1279C138.092%2026.5839%20138.199%2026.1519%20138.412%2025.8319C138.636%2025.5012%20138.993%2025.2612%20139.484%2025.1119C139.985%2024.9626%20140.647%2024.8879%20141.468%2024.8879Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M150.048%2022.9039V30.4719C150.048%2030.7599%20150.112%2030.9679%20150.24%2031.0959C150.379%2031.2132%20150.603%2031.2719%20150.912%2031.2719H151.936L152.192%2032.8719C152%2032.9359%20151.765%2032.9892%20151.488%2033.0319C151.211%2033.0852%20150.933%2033.1226%20150.656%2033.1439C150.379%2033.1759%20150.144%2033.1919%20149.952%2033.1919C149.237%2033.1919%20148.677%2032.9999%20148.272%2032.6159C147.877%2032.2319%20147.68%2031.6932%20147.68%2030.9999V22.9039H150.048ZM152.256%2025.0959V26.6479H146.288V25.1759L147.824%2025.0959H152.256Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M157.699%2024.8879C158.36%2024.8879%20158.92%2024.9786%20159.379%2025.1599C159.837%2025.3306%20160.184%2025.6292%20160.419%2026.0559C160.664%2026.4719%20160.786%2027.0479%20160.786%2027.7839V32.9999H158.898L158.562%2031.2879L158.402%2031.0479V27.7679C158.402%2027.3946%20158.312%2027.1226%20158.131%2026.9519C157.96%2026.7812%20157.629%2026.6959%20157.138%2026.6959C156.733%2026.6959%20156.227%2026.7119%20155.618%2026.7439C155.01%2026.7652%20154.386%2026.7972%20153.746%2026.8399L153.522%2025.2719C153.907%2025.1972%20154.349%2025.1332%20154.851%2025.0799C155.352%2025.0266%20155.853%2024.9839%20156.354%2024.9519C156.856%2024.9092%20157.304%2024.8879%20157.699%2024.8879ZM159.811%2028.1359L159.795%2029.4639L156.274%2029.4799C155.986%2029.4799%20155.778%2029.5492%20155.65%2029.6879C155.533%2029.8266%20155.475%2030.0132%20155.475%2030.2479V30.6319C155.475%2030.8986%20155.549%2031.1066%20155.699%2031.2559C155.848%2031.3946%20156.088%2031.4639%20156.419%2031.4639C156.696%2031.4639%20156.994%2031.4052%20157.314%2031.2879C157.645%2031.1706%20157.97%2031.0052%20158.29%2030.7919C158.61%2030.5786%20158.893%2030.3279%20159.138%2030.0399V31.0639C159.042%2031.2239%20158.898%2031.4266%20158.706%2031.6719C158.525%2031.9066%20158.291%2032.1412%20158.003%2032.3759C157.715%2032.5999%20157.379%2032.7919%20156.994%2032.9519C156.61%2033.1119%20156.173%2033.1919%20155.683%2033.1919C155.202%2033.1919%20154.771%2033.1066%20154.386%2032.9359C154.002%2032.7652%20153.699%2032.5146%20153.475%2032.1839C153.251%2031.8532%20153.138%2031.4426%20153.138%2030.9519V30.1359C153.138%2029.5066%20153.352%2029.0159%20153.778%2028.6639C154.205%2028.3119%20154.792%2028.1359%20155.538%2028.1359H159.811Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M168.151%2024.8879C169.645%2024.8879%20170.392%2025.6186%20170.392%2027.0799V32.9999H168.023V27.8159C168.023%2027.4639%20167.959%2027.2239%20167.831%2027.0959C167.703%2026.9572%20167.485%2026.8879%20167.175%2026.8879C166.834%2026.8879%20166.482%2026.9572%20166.119%2027.0959C165.757%2027.2239%20165.309%2027.4266%20164.775%2027.7039L164.663%2026.3759C165.229%2025.8959%20165.805%2025.5279%20166.392%2025.2719C166.989%2025.0159%20167.576%2024.8879%20168.151%2024.8879ZM164.551%2025.0959L164.824%2026.6639L165.016%2026.8719V32.9999H162.647V25.0959H164.551Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M175.345%2022.9039V30.4719C175.345%2030.7599%20175.409%2030.9679%20175.537%2031.0959C175.676%2031.2132%20175.9%2031.2719%20176.209%2031.2719H177.233L177.489%2032.8719C177.297%2032.9359%20177.062%2032.9892%20176.785%2033.0319C176.508%2033.0852%20176.23%2033.1226%20175.953%2033.1439C175.676%2033.1759%20175.441%2033.1919%20175.249%2033.1919C174.534%2033.1919%20173.974%2032.9999%20173.569%2032.6159C173.174%2032.2319%20172.977%2031.6932%20172.977%2030.9999V22.9039H175.345ZM177.553%2025.0959V26.6479H171.585V25.1759L173.121%2025.0959H177.553Z%22%20fill=%22black%22/%3E%0A%3Cpath%20d=%22M222.907%2027.0006H218L231%2044.9999L244%2026.9999H228.528C228.487%2027.0039%20228.45%2027.0226%20228.424%2027.0523L226.343%2029.9358C226.337%2029.9473%20226.333%2029.96%20226.333%2029.9729C226.333%2029.9857%20226.337%2029.9985%20226.343%2030.0099L228.337%2032.7722L231.534%2028.4217C231.567%2028.38%20231.61%2028.3458%20231.658%2028.3216C231.706%2028.2974%20231.759%2028.2838%20231.814%2028.2817H232.514C232.547%2028.2783%20232.579%2028.2846%20232.608%2028.2997C232.637%2028.3148%20232.66%2028.3381%20232.675%2028.3664C232.69%2028.3947%20232.696%2028.4268%20232.692%2028.4585C232.688%2028.4901%20232.674%2028.5198%20232.652%2028.5436L228.96%2033.5671C228.954%2033.5783%20228.951%2033.5908%20228.951%2033.6035C228.951%2033.6162%20228.954%2033.6287%20228.96%2033.6399L230.982%2036.4422L236.877%2028.4217C236.91%2028.38%20236.952%2028.3458%20237.001%2028.3216C237.049%2028.2974%20237.102%2028.2838%20237.157%2028.2817H237.857C237.889%2028.2783%20237.922%2028.2847%20237.951%2028.2998C237.98%2028.315%20238.003%2028.3383%20238.018%2028.3666C238.033%2028.3949%20238.039%2028.427%20238.035%2028.4586C238.031%2028.4901%20238.017%2028.5198%20237.995%2028.5436L231.13%2037.8829C231.113%2037.9074%20231.09%2037.9277%20231.063%2037.942C231.037%2037.9563%20231.007%2037.9642%20230.976%2037.9651C230.931%2037.9618%20230.888%2037.946%20230.851%2037.9196L230.839%2037.917L230.347%2037.2345L228.24%2034.3097C228.224%2034.2909%20228.206%2034.2652%20228.18%2034.2291L227.841%2033.7595C227.808%2033.716%20227.787%2033.6851%20227.773%2033.662L223.011%2027.0552C222.985%2027.0248%20222.948%2027.0053%20222.907%2027.0006Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M223.622%2012.0959C223.698%2012.0539%20223.781%2012.0275%20223.867%2012.0182C223.953%2012.0088%20224.04%2012.0168%20224.123%2012.0415C224.205%2012.0662%20224.282%2012.1073%20224.35%2012.1623C224.417%2012.2174%20224.472%2012.2853%20224.514%2012.3622L226.198%2015.4944C227.568%2014.9496%20229.028%2014.6727%20230.5%2014.678C231.972%2014.6727%20233.432%2014.9496%20234.802%2015.4944L236.486%2012.3622C236.526%2012.2831%20236.581%2012.213%20236.648%2012.1558C236.715%2012.0987%20236.793%2012.0558%20236.877%2012.0296C236.96%2012.0034%20237.048%2011.9944%20237.136%2012.0032C237.223%2012.0121%20237.307%2012.0385%20237.384%2012.081C237.461%2012.1235%20237.529%2012.1811%20237.583%2012.2506C237.638%2012.3201%20237.678%2012.3999%20237.702%2012.4854C237.726%2012.571%20237.732%2012.6604%20237.722%2012.7486C237.711%2012.8368%20237.682%2012.9218%20237.639%2012.9988L235.995%2016.055C238.998%2017.6957%20241%2020.6401%20241%2023.9999H220C220%2020.6401%20222.002%2017.6957%20225.005%2016.055L223.36%2013.0001C223.277%2012.845%20223.258%2012.6628%20223.307%2012.4935C223.356%2012.3242%20223.47%2012.1803%20223.622%2012.0959ZM226.562%2021.3365C226.911%2021.3365%20227.244%2021.1962%20227.491%2020.9465C227.737%2020.6968%20227.875%2020.358%20227.875%2020.0048C227.875%2019.6517%20227.737%2019.3129%20227.491%2019.0632C227.244%2018.8134%20226.911%2018.6731%20226.562%2018.6731C226.214%2018.6731%20225.881%2018.8134%20225.634%2019.0632C225.388%2019.3129%20225.25%2019.6517%20225.25%2020.0048C225.25%2020.358%20225.388%2020.6968%20225.634%2020.9465C225.881%2021.1962%20226.214%2021.3365%20226.562%2021.3365ZM234.438%2021.3365C234.786%2021.3365%20235.119%2021.1962%20235.366%2020.9465C235.612%2020.6968%20235.75%2020.358%20235.75%2020.0048C235.75%2019.6517%20235.612%2019.3129%20235.366%2019.0632C235.119%2018.8134%20234.786%2018.6731%20234.438%2018.6731C234.089%2018.6731%20233.756%2018.8134%20233.509%2019.0632C233.263%2019.3129%20233.125%2019.6517%20233.125%2020.0048C233.125%2020.358%20233.263%2020.6968%20233.509%2020.9465C233.756%2021.1962%20234.089%2021.3365%20234.438%2021.3365Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M211.125%2015.8749L207.625%2014.5624L211.125%2013.2486L212.437%209.74994L213.751%2013.2486L217.25%2014.5624L213.751%2015.8749L212.437%2019.3749L211.125%2015.8749ZM204.125%2022.8749L199.75%2021.1249L204.125%2019.3749L205.875%2014.9999L207.625%2019.3749L212%2021.1249L207.625%2022.8749L205.875%2027.2499L204.125%2022.8749Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M28.125%2017.8749L24.625%2016.5624L28.125%2015.2486L29.4375%2011.7499L30.7512%2015.2486L34.25%2016.5624L30.7512%2017.8749L29.4375%2021.3749L28.125%2017.8749ZM21.125%2024.8749L16.75%2023.1249L21.125%2021.3749L22.875%2016.9999L24.625%2021.3749L29%2023.1249L24.625%2024.8749L22.875%2029.2499L21.125%2024.8749Z%22%20fill=%22white%22/%3E%0A%3Cdefs%3E%0A%3Cfilter%20id=%22filter0_d_4014_697%22%20x=%220%22%20y=%220%22%20width=%22261%22%20height=%2260%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=%223%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.4%200%22/%3E%0A%3CfeBlend%20mode=%22normal%22%20in2=%22BackgroundImageFix%22%20result=%22effect1_dropShadow_4014_697%22/%3E%0A%3CfeBlend%20mode=%22normal%22%20in=%22SourceGraphic%22%20in2=%22effect1_dropShadow_4014_697%22%20result=%22shape%22/%3E%0A%3C/filter%3E%0A%3ClinearGradient%20id=%22paint0_linear_4014_697%22%20x1=%22-21.875%22%20y1=%22-59.5%22%20x2=%22277.828%22%20y2=%2212.5202%22%20gradientUnits=%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color=%22%23B7D433%22/%3E%0A%3Cstop%20offset=%220.45145%22%20stop-color=%22%23B7D433%22/%3E%0A%3Cstop%20offset=%221%22%20stop-color=%22%23819D01%22/%3E%0A%3C/linearGradient%3E%0A%3C/defs%3E%0A%3C/svg%3E") center / contain no-repeat; box-shadow: none; } .hdcw-fab > svg { display: none; } .hdcw-fab:hover { transform: scale(1.02); } /* Where the site shows its mobile stock-alert floater the widget shifts * the launcher 92px in from the right (CHAT_WIDGET_FAB_RIGHT_MOBILE); * never let the 261px pill run off a 320px phone (kcd2 lesson). */ .hdcw-fab.hdcw-shift { max-width: calc(100vw - 104px); } /* A launcher pill belongs UNDER the site's overlays: 1030 clears all VM2 * page content but sits below the Bootstrap modals (1050), the vehicle * lightbox (#lightboxed--container 9001) and the fullscreen carousel * controls (10001). VM2 has no body.gallery-fullscreen hook (that class * is toggled by the KCD2/JACS2/MTC2 vehicle templates only), so losing * the z-battle is the mechanism here. The open panel keeps the widget's * own 99999. */ .hdcw-fab { z-index: 1030; } /* ---------- Header (24:711): 81px gradient band. White robot mark 44x37 * at x14 (10003:555, exported navbar-icon-ai-assistant.svg), black title * at x81 wrapping in a 171px column (4007:580: two lines 17/20), and the * strapline bottom-RIGHT under the nav icons ("replies in seconds" 1:16, * Figtree 400 12/14.4 full-black — not beside the title, and not the * widget's .85 opacity). */ .hdcw-panel .hdcw-head { position: relative; height: 81px; box-sizing: border-box; align-items: flex-start; padding: 0 18px 0 14px; gap: 0; } .hdcw-head::before { content: ''; flex: 0 0 44px; height: 37px; margin: 21px 14px 0 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2244%22%20height=%2237%22%20viewBox=%220%200%2044%2037%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M22.1573%2018.2506H17.25L30.2495%2036.25L43.25%2018.25H27.7777C27.7375%2018.254%2027.7003%2018.2727%2027.6736%2018.3023L25.5927%2021.1859C25.5866%2021.1973%2025.5834%2021.21%2025.5834%2021.2229C25.5834%2021.2358%2025.5866%2021.2485%2025.5927%2021.26L27.5866%2024.0223L30.7838%2019.6718C30.8172%2019.63%2030.8596%2019.5959%2030.9079%2019.5717C30.9562%2019.5475%2031.0094%2019.5339%2031.0637%2019.5317H31.7641C31.7966%2019.5283%2031.8294%2019.5346%2031.8582%2019.5497C31.887%2019.5649%2031.9104%2019.5881%2031.9254%2019.6165C31.9404%2019.6448%2031.9462%2019.6769%2031.9421%2019.7085C31.938%2019.7401%2031.9242%2019.7698%2031.9025%2019.7937L28.2103%2024.8172C28.2042%2024.8284%2028.201%2024.8409%2028.201%2024.8536C28.201%2024.8663%2028.2042%2024.8788%2028.2103%2024.89L30.2322%2027.6923L36.1267%2019.6718C36.1601%2019.63%2036.2024%2019.5959%2036.2508%2019.5717C36.2991%2019.5475%2036.3523%2019.5339%2036.4065%2019.5317H37.107C37.1395%2019.5284%2037.1722%2019.5347%2037.201%2019.5499C37.2297%2019.5651%2037.2531%2019.5883%2037.268%2019.6166C37.2829%2019.645%2037.2887%2019.677%2037.2846%2019.7086C37.2805%2019.7402%2037.2667%2019.7698%2037.245%2019.7937L30.3799%2029.1329C30.3628%2029.1575%2030.34%2029.1777%2030.3134%2029.192C30.2867%2029.2063%2030.2569%2029.2142%2030.2265%2029.2152C30.1811%2029.2118%2030.1376%2029.196%2030.1011%2029.1697L30.0894%2029.1671L29.5974%2028.4846L27.4895%2025.5598C27.4742%2025.5409%2027.4561%2025.5153%2027.4298%2025.4792L27.0913%2025.0096C27.0579%2024.966%2027.0372%2024.9352%2027.0226%2024.9121L22.2607%2018.3052C22.2346%2018.2749%2022.1976%2018.2553%2022.1573%2018.2506Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M22.8725%203.34594C22.9482%203.30396%2023.0314%203.27755%2023.1172%203.26822C23.203%203.25889%2023.2898%203.26682%2023.3725%203.29156C23.4553%203.3163%2023.5325%203.35736%2023.5996%203.41239C23.6667%203.46743%2023.7225%203.53535%2023.7637%203.61228L25.4476%206.74443C26.8182%206.1997%2028.278%205.92273%2029.75%205.9281C31.222%205.92273%2032.6818%206.1997%2034.0524%206.74443L35.7363%203.61228C35.7762%203.5332%2035.8314%203.46303%2035.8984%203.4059C35.9655%203.34877%2036.0431%203.30583%2036.1268%203.27963C36.2105%203.25342%2036.2985%203.24447%2036.3856%203.2533C36.4728%203.26213%2036.5573%203.28857%2036.6342%203.33105C36.7111%203.37353%2036.7788%203.4312%2036.8334%203.50067C36.888%203.57013%2036.9284%203.64997%2036.9521%203.7355C36.9758%203.82103%2036.9824%203.91051%2036.9715%203.99867C36.9607%204.08683%2036.9325%204.17189%2036.8887%204.24883L35.2454%207.30508C38.2484%208.94573%2040.25%2011.8901%2040.25%2015.25H19.25C19.25%2011.8901%2021.2516%208.94573%2024.2546%207.30508L22.61%204.25016C22.5269%204.0951%2022.5078%203.91289%2022.557%203.74358C22.6063%203.57427%2022.7197%203.43039%2022.8725%203.34594ZM25.8125%2012.5866C26.1606%2012.5866%2026.4944%2012.4463%2026.7406%2012.1966C26.9867%2011.9468%2027.125%2011.6081%2027.125%2011.2549C27.125%2010.9017%2026.9867%2010.563%2026.7406%2010.3132C26.4944%2010.0635%2026.1606%209.9232%2025.8125%209.9232C25.4644%209.9232%2025.1306%2010.0635%2024.8844%2010.3132C24.6383%2010.563%2024.5%2010.9017%2024.5%2011.2549C24.5%2011.6081%2024.6383%2011.9468%2024.8844%2012.1966C25.1306%2012.4463%2025.4644%2012.5866%2025.8125%2012.5866ZM33.6875%2012.5866C34.0356%2012.5866%2034.3694%2012.4463%2034.6156%2012.1966C34.8617%2011.9468%2035%2011.6081%2035%2011.2549C35%2010.9017%2034.8617%2010.563%2034.6156%2010.3132C34.3694%2010.0635%2034.0356%209.9232%2033.6875%209.9232C33.3394%209.9232%2033.0056%2010.0635%2032.7594%2010.3132C32.5133%2010.563%2032.375%2010.9017%2032.375%2011.2549C32.375%2011.6081%2032.5133%2011.9468%2032.7594%2012.1966C33.0056%2012.4463%2033.3394%2012.5866%2033.6875%2012.5866Z%22%20fill=%22white%22/%3E%0A%3Cpath%20d=%22M11.375%206.12499L7.875%204.81249L11.375%203.49867L12.6875%200L14.0012%203.49867L17.5%204.81249L14.0012%206.12499L12.6875%209.62497L11.375%206.12499ZM4.37497%2013.125L0%2011.375L4.37497%209.62497L6.12499%205.25L7.875%209.62497L12.25%2011.375L7.875%2013.125L6.12499%2017.5L4.37497%2013.125Z%22%20fill=%22white%22/%3E%0A%3C/svg%3E") center / contain no-repeat; } .hdcw-head > div { margin-top: 21px; max-width: 180px; } .hdcw-head b { font-family: 'Exo 2', 'Figtree', sans-serif; font-size: 17px; line-height: 20px; font-weight: 700; } .hdcw-head small { position: absolute; right: 18px; top: 54px; opacity: 1; font-size: 12px; line-height: 14px; } /* Nav icons: the designer's start-new / expand / close glyphs (black, like * everything on this header) replace the widget's stroke icons and text x. * Artboard tops y24/24/25, right edge 18px in, 18-19px apart; the reset * export carries a 1px bezel (22x18 for the 20x16 glyph) so its arc's * anti-aliasing isn't clipped — margins shrink by the bezel (jacs2 * lesson). flex:none — a long dealer name must never squeeze the buttons * below their glyph width (jacs2 lesson). The expanded state keeps the * widget's built-in shrink icon: the artwork has no shrink glyph. */ .hdcw-reset, .hdcw-exp, .hdcw-close { flex: none; align-self: flex-start; padding: 0; font-size: 0; background-position: center; background-repeat: no-repeat; } .hdcw-reset { width: 22px; height: 18px; margin: 23px 0 0 auto; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2222%22%20height=%2218%22%20viewBox=%220%200%2022%2018%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M13%201C17.4133%201%2021%204.58667%2021%209C21%2013.4133%2017.4133%2017%2013%2017C8.58667%2017%205%2013.4133%205%209V5.66667%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%0A%3Cpath%20d=%22M1%209L5%205L9%209%22%20stroke=%22black%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: 16px; height: 16px; margin: 24px 0 0 18px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%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=%22black%22/%3E%0A%3C/svg%3E"); background-size: 16px 16px; } .hdcw-panel:not(.hdcw-max) .hdcw-exp svg { display: none; } .hdcw-max .hdcw-exp { margin-top: 24px; margin-left: 18px; } .hdcw-close { width: 15px; height: 15px; margin: 25px 0 0 19px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2215%22%20height=%2215%22%20viewBox=%220%200%2015%2015%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=%22black%22/%3E%0A%3C/svg%3E"); background-size: 15px 15px; } /* ---------- Bubbles. Bot (12:107's 1:14, alerts 4048:652): #F4F4F4 with a * 1px #D5DBB7 pale-olive stroke, square bottom-LEFT corner, text inset * 22px/14px, capped at 334 of the 372px message column = 90%. (The home * frame 49:780 draws these white-on-grey instead — the surface note above; * its borders there are #E4E6EA.) Body 15px on 18-19px leading (+1% * tracking): greeting bodies 15/18, the long answer 19:516 15/19 — 1.25 * splits the difference for real LLM answers. User (19:649): #000, square * bottom-RIGHT, 14/27 insets, tracking 0 (19:650). */ .hdcw-msg { max-width: 90%; padding: 14px 22px; font-size: 15px; line-height: 1.25; letter-spacing: .01em; } .hdcw-bot { background: #F4F4F4; border-color: #D5DBB7; border-radius: 10px 10px 10px 0; } /* Inline bold runs are Figtree 600 (19:516/19:392 overrides), not the * browser's 700. */ .hdcw-bot b, .hdcw-bot strong { font-weight: 600; } .hdcw-user { border-radius: 10px 10px 0 10px; padding: 14px 27px; letter-spacing: 0; } .hdcw-typing { background: #F4F4F4; border-color: #D5DBB7; border-radius: 10px 10px 10px 0; padding: 14px 22px; } /* "Searching our stock…" (19:537) is italic Nunito 12/16.4 — italic is the * widget's own default, so only the leading needs asserting. */ .hdcw-status { font-size: 12px; line-height: 16px; } /* ---------- Openers (12:145 et al): 361x72 white lozenges, r10, 1px * #EEEEEE stroke, drop shadow 0 4 4 rgba(0,0,0,.25) — with an olive glyph * at the left (NO chip behind it, unlike kcd2), an Exo 2 700 17 title at * x81, a Figtree 11 sub-caption under it (the widget has no sub-caption * element, so the artwork's line rides in as ::after content — ::before * carries the glyph and the chevron travels as a background layer), and a * black 6x12 chevron 24px off the right edge. 14px between lozenges * (y203/289/374). On context pages the same buttons render as slim * "hdcw-else" pills — the full treatment only applies off that variant * (kcd2 pattern). */ .hdcw-opener { gap: 14px; margin-top: 12px; } .hdcw-opener button { position: relative; border-radius: 10px; font-family: 'Exo 2', 'Figtree', sans-serif; } .hdcw-opener button.hdcw-op-used:not(.hdcw-else), .hdcw-opener button.hdcw-op-new:not(.hdcw-else), .hdcw-opener button.hdcw-op-quiz:not(.hdcw-else), .hdcw-opener button.hdcw-op-alert:not(.hdcw-else) { min-height: 72px; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%226%22%20height=%2212%22%20viewBox=%220%200%206%2012%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 24px center / 6px 12px; color: #000; text-align: left; padding: 16px 44px 33px 81px; font-size: 17px; font-weight: 700; line-height: 20px; border: 1px solid #EEEEEE; box-shadow: 0 4px 4px rgba(0,0,0,.25); } .hdcw-opener button.hdcw-op-used:not(.hdcw-else):hover, .hdcw-opener button.hdcw-op-new:not(.hdcw-else):hover, .hdcw-opener button.hdcw-op-quiz:not(.hdcw-else):hover, .hdcw-opener button.hdcw-op-alert:not(.hdcw-else):hover { background-color: #faf9f9; opacity: 1; } /* Glyphs at their exports' natural sizes on the artboard's own x offsets * (browse 22x18 at x32, choose 20x26 at x34, alert — the dealer's V mark — * 27x19 at x32), vertically centered like the artwork. */ .hdcw-opener button.hdcw-op-used:not(.hdcw-else)::before, .hdcw-opener button.hdcw-op-new:not(.hdcw-else)::before, .hdcw-opener button.hdcw-op-quiz:not(.hdcw-else)::before, .hdcw-opener button.hdcw-op-alert:not(.hdcw-else)::before { content: ''; position: absolute; left: 32px; top: 50%; transform: translateY(-50%); background: center / contain no-repeat; } .hdcw-opener button.hdcw-op-used:not(.hdcw-else)::before, .hdcw-opener button.hdcw-op-new:not(.hdcw-else)::before { width: 22px; height: 18px; 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=%22M15.862%209.50904e-09C16.2191%20-3.25651e-05%2016.5709%200.0836271%2016.8869%200.243752C17.203%200.403877%2017.4738%200.635653%2017.6759%200.919059L17.7716%201.06729L21.7096%207.70082C21.8677%207.96719%2021.9638%208.26343%2021.9912%208.56906L22%208.75224V13.5148C22%2013.7774%2021.9493%2014.0377%2021.8504%2014.2825L21.7679%2014.4625L20.5381%2016.8289C20.369%2017.155%2020.1152%2017.4335%2019.8015%2017.6376C19.4878%2017.8416%2019.1247%2017.9643%2018.7473%2017.9936L18.5702%2018H16.5C15.945%2018.0002%2015.4104%2017.7984%2015.0034%2017.4351C14.5964%2017.0718%2014.3471%2016.5739%2014.3055%2016.0412L14.3%2015.8824H7.7C7.70018%2016.4166%207.49055%2016.9312%207.11315%2017.3229C6.73575%2017.7147%206.21847%2017.9546%205.665%2017.9947L5.5%2018H3.4298C3.05156%2017.9999%202.67974%2017.9059%202.35025%2017.7271C2.02076%2017.5483%201.74473%2017.2907%201.5488%2016.9793L1.4619%2016.8289L0.2321%2014.4614C0.110346%2014.2266%200.0350001%2013.972%200.00990007%2013.7107L9.79142e-10%2013.5148V8.75224C-9.49458e-06%208.44586%200.0690459%208.14313%200.2024%207.86494L0.2904%207.70082L4.2284%201.06729C4.4056%200.768786%204.65563%200.516294%204.95691%200.331633C5.25819%200.146971%205.60164%200.0356925%205.9576%200.00741174L6.138%209.50904e-09H15.862ZM15.862%202.11765H6.138L2.2%208.75224V13.5148L3.4298%2015.8824H5.5V14.9294C5.49985%2014.6424%205.60979%2014.3655%205.80873%2014.1517C6.00768%2013.9379%206.28162%2013.8024%206.578%2013.7711L6.71%2013.7647H15.29C15.5882%2013.7646%2015.8759%2013.8704%2016.098%2014.0619C16.3201%2014.2534%2016.4609%2014.5171%2016.4934%2014.8024L16.5%2014.9294V15.8824H18.5702L19.8%2013.5148V8.75224L15.862%202.11765ZM16.0094%207.52294C16.2703%207.39796%2016.572%207.37772%2016.8483%207.46665C17.1247%207.55559%2017.3531%207.74643%2017.4834%207.99729C17.611%208.24908%2017.6308%208.53898%2017.5387%208.8047C17.4465%209.07041%2017.2497%209.29071%2016.9906%209.41824C15.1822%2010.2865%2012.991%2010.5882%2011%2010.5882C8.9694%2010.5882%206.853%2010.2896%205.0138%209.42035C4.75477%209.29214%204.55791%209.07173%204.46506%208.80598C4.37221%208.54024%204.3907%208.25012%204.5166%207.99729C4.63952%207.76596%204.84588%207.58574%205.097%207.49042C5.34811%207.3951%205.62673%207.39123%205.8806%207.47953L6.1743%207.60129L6.4427%207.704L6.6836%207.78871L6.9696%207.87977L7.3018%207.97718L7.6758%208.07353L8.0905%208.16882L8.5426%208.25565C9.35331%208.39855%2010.1758%208.4705%2011%208.47059C12.6676%208.47059%2014.4848%208.22494%2016.0094%207.52294Z%22%20fill=%22%238CA228%22/%3E%0A%3C/svg%3E"); } .hdcw-opener button.hdcw-op-quiz:not(.hdcw-else)::before { left: 34px; width: 20px; height: 26px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2220%22%20height=%2226%22%20viewBox=%220%200%2020%2026%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M12.9008%2013.1289V7.96251C12.9008%206.08107%2011.3305%204.55002%209.40082%204.55002C7.47114%204.55002%205.90083%206.08107%205.90083%207.96251V15.2403C5.25295%2014.7104%204.44433%2014.4098%203.59502%2014.4098C2.58395%2014.4098%201.61327%2014.8275%200.934206%2015.5562C-0.378917%2016.9592%20-0.293417%2019.1239%201.10033%2020.4402C1.10208%2020.442%201.10277%2020.4439%201.10452%2020.4457L7.00001%2026H20V15.275L12.9008%2013.1289ZM17.3333%2023.4H8.00001C8.00001%2023.4%203.32889%2019.1071%202.87445%2018.7033C2.35739%2018.2441%202.32008%2017.463%202.79114%2016.9587C3.26233%2016.4545%204.06345%2016.4182%204.58058%2016.8775C4.92683%2017.185%207.20257%2019.0125%207.20257%2019.0125L8.2342%2018.4924V7.96245C8.2342%207.33419%208.75657%206.82499%209.40082%206.82499C10.0452%206.82499%2010.5675%207.33425%2010.5675%207.96251V15.1455L17.3333%2017.225V23.4ZM1.50896%209.97595C1.33583%209.33154%201.23421%208.65915%201.23421%207.96251C1.23421%203.57246%204.89758%200%209.40082%200C13.9041%200%2017.5675%203.57246%2017.5675%207.96251C17.5675%208.65915%2017.4659%209.33154%2017.2927%209.97595L14.7632%209.12221C14.8484%208.74769%2014.9008%208.36171%2014.9008%207.96251C14.9008%205.00558%2012.4336%202.60002%209.40082%202.60002C6.36808%202.60002%203.90083%205.00558%203.90083%207.96251C3.90083%208.36178%203.95327%208.74769%204.03845%209.12215L1.50896%209.97595Z%22%20fill=%22%238CA228%22/%3E%0A%3C/svg%3E"); } .hdcw-opener button.hdcw-op-alert:not(.hdcw-else)::before { width: 27px; height: 19px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2227%22%20height=%2219%22%20viewBox=%220%200%2027%2019%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M5.09603%200.000680458H0L13.4995%2019L27%200H10.9326C10.8908%200.00423356%2010.8522%200.0239574%2010.8245%200.0552218L8.66357%203.09897C8.65725%203.11106%208.65395%203.12446%208.65395%203.13807C8.65395%203.15168%208.65725%203.1651%208.66357%203.17718L10.7341%206.09298L14.0544%201.50078C14.089%201.4567%2014.133%201.42064%2014.1832%201.39511C14.2334%201.36957%2014.2886%201.35518%2014.3449%201.35293H15.0723C15.1061%201.34935%2015.1402%201.35598%2015.1701%201.37195C15.2%201.38792%2015.2243%201.41247%2015.2399%201.44238C15.2554%201.4723%2015.2615%201.50616%2015.2572%201.53954C15.253%201.57292%2015.2386%201.60426%2015.2161%201.62941L11.3818%206.93204C11.3755%206.94388%2011.3722%206.95707%2011.3722%206.97046C11.3722%206.98384%2011.3755%206.99703%2011.3818%207.00887L13.4815%209.96687L19.6027%201.50078C19.6374%201.4567%2019.6814%201.42064%2019.7316%201.39511C19.7818%201.36957%2019.837%201.35518%2019.8933%201.35293H20.6207C20.6544%201.34943%2020.6885%201.35612%2020.7183%201.37212C20.7482%201.38811%2020.7724%201.41267%2020.7879%201.44256C20.8034%201.47246%2020.8095%201.5063%2020.8052%201.53965C20.8009%201.57299%2020.7866%201.60428%2020.7641%201.62941L13.6349%2011.4875C13.6172%2011.5134%2013.5935%2011.5348%2013.5658%2011.5499C13.5381%2011.565%2013.5072%2011.5734%2013.4756%2011.5743C13.4285%2011.5708%2013.3833%2011.5542%2013.3453%2011.5263L13.3332%2011.5236L12.8223%2010.8032L10.6333%207.71587C10.6174%207.69597%2010.5987%207.66888%2010.5713%207.6308L10.2198%207.13512C10.1851%207.08915%2010.1637%207.05656%2010.1484%207.03221L5.2034%200.05831C5.17634%200.0262506%205.13793%200.00563712%205.09603%200.000680458Z%22%20fill=%22%238CA228%22/%3E%0A%3C/svg%3E"); } /* The artwork's sub-captions (4019:715 / 6001:1012 / 6001:1037: Figtree * 400 11/13.2, -1% tracking, at x81 y41). CSS content is how they exist * at all — the widget renders a single label. */ .hdcw-opener button.hdcw-op-used:not(.hdcw-else)::after, .hdcw-opener button.hdcw-op-new:not(.hdcw-else)::after, .hdcw-opener button.hdcw-op-quiz:not(.hdcw-else)::after, .hdcw-opener button.hdcw-op-alert:not(.hdcw-else)::after { position: absolute; left: 81px; top: 41px; font-family: 'Figtree', sans-serif; font-size: 11px; font-weight: 400; line-height: 13px; letter-spacing: -.01em; color: #000; } .hdcw-opener button.hdcw-op-used:not(.hdcw-else)::after, .hdcw-opener button.hdcw-op-new:not(.hdcw-else)::after { content: 'Large selection of used cars available'; } .hdcw-opener button.hdcw-op-quiz:not(.hdcw-else)::after { content: 'Get matched to car to suit your needs'; } .hdcw-opener button.hdcw-op-alert:not(.hdcw-else)::after { content: 'Receive a daily stock alert'; } /* "Something else" (2023:430): the slimmer 361x54 lozenge — same white, * stroke and shadow, the olive ? at x39 (8003:831; the #2E3094 circle in * that group is visible=false — never rendered), label at x81, no * sub-caption. (The blue #2E3094 only lives on in that hidden layer; the * SELECTED chip outline below is #1E439C.) */ .hdcw-opener .hdcw-else { background: #fff; color: #000; border: 1px solid #EEEEEE; box-shadow: 0 4px 4px rgba(0,0,0,.25); } .hdcw-opener .hdcw-else:hover { background: #faf9f9; opacity: 1; } .hdcw-opener button.hdcw-op-else { min-height: 54px; text-align: left; padding: 16px 44px 16px 81px; font-size: 17px; font-weight: 700; line-height: 20px; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%226%22%20height=%2212%22%20viewBox=%220%200%206%2012%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 23px center / 6px 12px; } .hdcw-opener button.hdcw-op-else:hover { background-color: #faf9f9; } .hdcw-opener button.hdcw-op-else::before { content: ''; position: absolute; left: 39px; top: 50%; width: 16px; height: 24px; transform: translateY(-50%); background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2216%22%20height=%2224%22%20viewBox=%220%200%2016%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%0A%3Cpath%20d=%22M8.02141%200C4.3923%200%202.04172%201.53295%200.19627%204.26684C-0.138502%204.76278%20-0.0352925%205.44275%200.431696%205.80781L2.39304%207.34105C2.86467%207.70972%203.53571%207.62352%203.90494%207.14661C5.04384%205.67562%205.88866%204.82869%207.66763%204.82869C9.06637%204.82869%2010.7965%205.75677%2010.7965%207.15514C10.7965%208.21227%209.95002%208.75517%208.56892%209.55345C6.95835%2010.4844%204.82705%2011.643%204.82705%2014.5412V15C4.82705%2015.6213%205.31559%2016.125%205.91826%2016.125H9.21327C9.81594%2016.125%2010.3045%2015.6213%2010.3045%2015V14.7294C10.3045%2012.7203%2016%2012.6367%2016%207.2C16%203.10575%2011.8807%200%208.02141%200ZM7.56579%2017.5059C5.82914%2017.5059%204.41626%2018.9625%204.41626%2020.753C4.41626%2022.5434%205.82914%2024%207.56579%2024C9.30243%2024%2010.7153%2022.5434%2010.7153%2020.7529C10.7153%2018.9625%209.30243%2017.5059%207.56579%2017.5059Z%22%20fill=%22%238CA228%22/%3E%0A%3C/svg%3E") center / contain no-repeat; } /* Context CTA ("Tell me about this car", 19:683): the gradient bar 349x50, * r10, BLACK label 16px (19:681 derives Nunito 600 -> Exo 2; colors come * from the btn-bg/btn-color tokens). */ .hdcw-opener button.hdcw-op-ctx { min-height: 50px; border-radius: 10px; padding: 14px 0; font-size: 16px; font-weight: 600; } .hdcw-opener button.hdcw-op-ctx:hover { opacity: .9; } /* ---------- Chips (16:212 component): 31px white pills, r10, NO border, * the lozenges' 0 4 4 rgba(0,0,0,.25) shadow, black Figtree 400 14 on * 13px leading, -1% tracking (16:209). Selected = 1px #1E439C blue * outline (I19:414;16:208 — the only stroke any chip instance carries). * The artwork draws no hover; the grey step is this theme's own, same * call as kcd2. */ .hdcw-chip { background: #fff; color: #000; border-color: transparent; border-radius: 10px; min-height: 31px; padding: 9px 13px; font-size: 14px; line-height: 13px; letter-spacing: -.01em; box-shadow: 0 4px 4px rgba(0,0,0,.25); } .hdcw-chip:hover { background: #EEEEEE; border-color: transparent; color: #000; } .hdcw-chip--sel { border-color: #1E439C; box-shadow: 0 4px 4px rgba(0,0,0,.25); } /* POPULAR/LIFESTYLE/MAKES (19:426): 11px Bold at tracking 0 — the widget * adds .4px of its own. Nunito node -> Exo 2 (the heading font). */ .hdcw-ghead { font-family: 'Exo 2', 'Figtree', sans-serif; letter-spacing: 0; line-height: 15px; } /* ---------- Car cards ("csr search" 19:566): 176x244, white, #E4E6EA * border, r10 — the 113px photo is a square rectangle laid over the top * corners, so the radius lives on the bottom only (kcd2 corner rule). * Body inset 12px: title Figtree 400 12 two tight lines, price 700 15/19, * monthly 500 12/16 painted with the brand gradient itself (19:545 run * 121's fill IS the gradient — clipped to the glyphs where supported, * solid olive where not), meta 400 11/17 #1B1B1B. One flush split action * bar across the foot: Details 77px on a #E4E6EA outline / I'm Interested * 99px on the gradient, both 31px with black Figtree 13/13 -1% labels * (2030:616/629) and the bottom corners carrying the card's 10px less the * 1px border. */ .hdcw-cars { 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: 10px 12px 0; } .hdcw-car h4.hdcw-cartitle { margin: 0; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: .01em; max-height: 28px; } .hdcw-car .hdcw-price { font-size: 15px; font-weight: 700; line-height: 19px; letter-spacing: .01em; } .hdcw-mo { color: #8CA228; font-size: 12px; font-weight: 500; line-height: 16px; } @supports (-webkit-background-clip: text) { .hdcw-mo { background: linear-gradient(109.1deg, #B7D433 37.5%, #819D01 103.8%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .hdcw-car .hdcw-meta { color: #1B1B1B; font-size: 11px; line-height: 17px; letter-spacing: 0; margin-top: 0; } /* New-car range cards (CON-823) end in their title — no action bar — so * they keep real bottom breathing room (jacs2 note). */ .hdcw-ncgrid .hdcw-carbody { padding: 12px 14px 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: 1px solid #E4E6EA; border-radius: 0 0 0 9px; min-height: 31px; padding: 8px 0; font-size: 13px; font-weight: 400; line-height: 13px; letter-spacing: -.01em; background: #fff; color: #000; } .hdcw-car .hdcw-pick:hover { background: #EEEEEE; color: #000; } .hdcw-car .hdcw-pick--primary { flex: 99 0 0; border-left: 0; border-radius: 0 0 9px 0; background: linear-gradient(118.5deg, #B7D433 32%, #819D01 102%); color: #000; } .hdcw-car .hdcw-pick--primary:only-child { border-radius: 0 0 9px 9px; border-left: 1px solid #E4E6EA; } .hdcw-car .hdcw-pick--primary:hover { opacity: .9; color: #000; } /* ---------- Footer (24:712): everything sits on one #E4E6EA band (its own * 400x129 rectangle) — the widget ships input row and disclosure on white. * Input 299x51, r10 (squarer than the widget's 22px), 1px #000 stroke, * black Figtree 15 placeholder 24px in at FULL black (24:706; opacity:1 * because Firefox dims placeholders on its own). The .fig draws no focus * state, so the box keeps its black stroke while focused too (the widget * would swap in the accent). Send: the designer's 52x52 gradient circle + * white plane, baked into its export. Disclosure: one centered paragraph * in a 275px column, Figtree 400 12/15 #313131 — the widget marks it up as * two stacked divs, so they flow inline with the artwork's joining * period restored (jacs2 mechanism). */ .hdcw-input { background: #E4E6EA; border-top: 0; padding: 20px 21px 11px; gap: 7px; } .hdcw-input input { box-sizing: border-box; height: 51px; border-radius: 10px; padding: 0 24px; font-size: 15px; line-height: 49px; letter-spacing: .01em; } .hdcw-input input::placeholder { color: #000; opacity: 1; } .hdcw-input input:focus { border-color: #000; } .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=%22url(%23paint0_linear_2003_411)%22/%3E%0A%3Cpath%20d=%22M35.865%2024.875L19.83%2017.3C19.612%2017.195%2019.368%2017.1561%2019.1281%2017.1881C18.8882%2017.22%2018.6629%2017.3215%2018.48%2017.48C18.1%2017.805%2017.955%2018.305%2018.095%2018.785L20.015%2025.255H26.495V26.75H20.02L18.1%2033.215C17.96%2033.695%2018.105%2034.195%2018.485%2034.52C18.668%2034.6781%2018.8929%2034.7798%2019.1326%2034.8126C19.3722%2034.8455%2019.6162%2034.8081%2019.835%2034.705L35.865%2027.14C36.305%2026.93%2036.58%2026.495%2036.58%2026.01C36.58%2025.52%2036.305%2025.09%2035.865%2024.88V24.875Z%22%20fill=%22white%22/%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id=%22paint0_linear_2003_411%22%20x1=%2257.3182%22%20y1=%22112.5%22%20x2=%22-7.67938%22%20y2=%22109.29%22%20gradientUnits=%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color=%22%23B7D433%22/%3E%0A%3Cstop%20offset=%220.45145%22%20stop-color=%22%23B7D433%22/%3E%0A%3Cstop%20offset=%221%22%20stop-color=%22%23819D01%22/%3E%0A%3C/linearGradient%3E%0A%3C/defs%3E%0A%3C/svg%3E") center / 52px 52px no-repeat; } .hdcw-send svg { display: none; } .hdcw-send:disabled { opacity: .4; } .hdcw-powered { background: #E4E6EA; font-size: 12px; line-height: 15px; letter-spacing: .01em; padding: 0 56px 17px; } .hdcw-powered a.hdcw-tc { color: #313131; } .hdcw-powered > div { display: inline; } .hdcw-powered > div:first-child::after { content: '. '; } /* 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), so * the guard is re-asserted here. */ @media (pointer: coarse) { .hdcw-input input { font-size: 16px; } }