https://planeta-avtodv.ru/_next/static/chunks/pages/design/red-9bb26a547271928c.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8865],{6498:function(e,r,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design/red",function(){return a(104)}])},104:function(e,r,a){"use strict";a.r(r),a.d(r,{default:function(){return w}});var t=a(5893),l=a(9008),i=a.n(l),n=a(7294);let s=`
2#cf0 acid-green arb-academy-lime brand-secondary brand-tertiary-inverse dark-brand-secondary dark-brand-tertiary light-brand-secondary light-brand-tertiary-inverse
3#13141e arb-academy-black
4#0051e6 arb-academy-blue
5#282d3f arb-academy-dark-blue
6#0f0f0f arb-black
7#0000001f arb-black-o12
8#00000085 arb-black-o52
9#1c1a1c arb-grey-11 brand-business-black dark-brand-business-black dark-surface gray-10 light-brand-business-black
10#2b282b arb-grey-17
11#ebebeb arb-grey-8
12#accef0 arb-light-blue
13#d7ebff arb-light-blue-new-hover
14#ffffff1f arb-light-o12
15#fff6 arb-light-o4
16#ffffffa3 arb-light-o64
17#fff arb-light-white background-light-static dark-background-light-static dark-foreground dark-foreground-light-static dark-surface-inverse foreground-inverse foreground-light-static light-background-light-static light-foreground-inverse light-foreground-light-static light-surface light-surface-floating light-surface-secondary-floating mag-bg-white mag-new-header-background-color mag-post-preview-background mag-text-white mag-white surface surface-floating surface-secondary-floating white
18#e60000 arb-red brand-primary dark-brand-primary dark-red foreground-link-red light-brand-primary light-red red red-50
19#f2efed arb-sand-100
20#ddd2c5 arb-sand-200
21#d0c4b9 arb-sand-300
22#c7baaf arb-sand-400
23#bcaa99 arb-sand-500
24#f3f4f6 background gray-95 light-background
25#000 background-dark-static Badge2-fontColor black brand-tertiary dark-background dark-background-dark-static dark-brand-tertiary-inverse dark-foreground-dark-static dark-foreground-inverse foreground foreground-dark-static light-background-dark-static light-brand-tertiary light-foreground light-foreground-dark-static light-surface-contrast light-surface-contrast-secondary light-surface-inverse mag-dark surface-contrast surface-contrast-secondary surface-inverse
26#0000 Badge2-currentOverlayColor Badge2-hoverOverlayColor
27#0c78ed blue blue-50 dark-blue light-blue light-link link
28#183d67 blue-20 dark-blue-tertiary
29#114c8c blue-30 dark-blue-secondary
30#0a64c7 blue-40 foreground-blue light-foreground-blue
31#78b5f8 blue-70 dark-foreground-blue foreground-blue-inverse
32#b6d6f9 blue-80 blue-secondary light-blue-secondary
33#daeafb blue-90 blue-tertiary light-blue-tertiary
34#87c3ee blue-light
35#4c8fc2 blue-light-hover
36#2c282c brand-business-dark-gray brand-business-dark-gray-dynamic dark-brand-business-dark-gray dark-brand-business-light-gray-dynamic gray-15 light-brand-business-dark-gray light-brand-business-dark-gray-dynamic
37#fafafa brand-business-light-gray brand-business-light-gray-dynamic dark-brand-business-dark-gray-dynamic dark-brand-business-light-gray gray-97 light-brand-business-light-gray light-brand-business-light-gray-dynamic
38#dbd0c3 brand-business-sand dark-brand-business-sand light-brand-business-sand sand
39#efe7e0 brand-highlighter light-brand-highlighter
40#e9eaec button-background-color-disabled gray-90 light-stroke-opaque light-surface-secondary stroke-opaque surface-secondary
41#0c121c4d button-color-disabled dark-foreground-tertiary-dark-static dark-foreground-tertiary-inverse foreground-tertiary foreground-tertiary-dark-static light-foreground-tertiary light-foreground-tertiary-dark-static
42#ff3a3a coral-red
43#4f443d dark-brand-highlighter
44#145220 dark-deal-fair
45#d5f279 dark-electric-cars-green electric-cars-green light-electric-cars-green
46#15161b dark-electric-cars-surface electric-cars-surface light-electric-cars-surface
47#e6e7f529 dark-fill dark-fill-light-static fill-light-static light-fill-light-static
48#eaeef647 dark-fill-secondary dark-fill-secondary-light-static fill-secondary-light-static light-fill-secondary-light-static
49#76de85 dark-foreground-green foreground-green-inverse green-70
50#f8b953 dark-foreground-orange foreground-orange-inverse orange-70
51#c5aaee dark-foreground-purple purple-70

52#ff8787 dark-foreground-red red-70
53#ffffffad dark-foreground-secondary dark-foreground-secondary-light-static foreground-secondary-inverse foreground-secondary-light-static light-foreground-secondary-inverse light-foreground-secondary-light-static
54#1c212899 dark-foreground-secondary-dark-static dark-foreground-secondary-inverse foreground-secondary foreground-secondary-dark-static light-foreground-secondary light-foreground-secondary-dark-static
55#ffffff42 dark-foreground-tertiary dark-foreground-tertiary-light-static foreground-tertiary-inverse foreground-tertiary-light-static light-foreground-tertiary-inverse light-foreground-tertiary-light-static
56#36b555 dark-green green green-50 light-green
57#2a733d dark-green-secondary green-30
58#254c2f dark-green-tertiary green-20
59#24bc45 dark-lime-green lime-green-30
60#4aa6ff dark-link sky-blue
61#c22 dark-mos-ru-red light-mos-ru-red mos-ru-red
62#ffa100 dark-orange light-orange orange orange-50
63#8c5f10 dark-orange-secondary orange-30
64#594014 dark-orange-tertiary orange-20
65#ffffffbf dark-overlay dark-overlay-light-static light-overlay-inverse light-overlay-light-static overlay-inverse overlay-light-static
66#000000b3 dark-overlay-dark-static dark-overlay-inverse light-overlay light-overlay-dark-static overlay overlay-dark-static
67#ffffff26 dark-overlay-quaternary dark-overlay-quaternary-light-static dark-stroke light-overlay-quaternary-inverse light-overlay-quaternary-light-static overlay-quaternary-inverse overlay-quaternary-light-static
68#0000001a dark-overlay-quaternary-dark-static dark-overlay-quaternary-inverse light-overlay-quaternary light-overlay-quaternary-dark-static light-stroke overlay-quaternary overlay-quaternary-dark-static stroke
69#ffffff14 dark-overlay-quinary dark-overlay-quinary-light-static light-overlay-quinary-inverse light-overlay-quinary-light-static overlay-quinary-inverse overlay-quinary-light-static
70#0000000d dark-overlay-quinary-dark-static dark-overlay-quinary-inverse light-overlay-quinary light-overlay-quinary-dark-static overlay-quinary overlay-quinary-dark-static
71#ffffff8c dark-overlay-secondary dark-overlay-secondary-light-static light-overlay-secondary-inverse light-overlay-secondary-light-static overlay-secondary-inverse overlay-secondary-light-static
72#00000080 dark-overlay-secondary-dark-static dark-overlay-secondary-inverse light-overlay-secondary light-overlay-secondary-dark-static overlay-secondary overlay-secondary-dark-static
73#ffffff59 dark-overlay-tertiary dark-overlay-tertiary-light-static light-overlay-tertiary-inverse light-overlay-tertiary-light-static overlay-tertiary-inverse overlay-tertiary-light-static
74#0000004d dark-overlay-tertiary-dark-static dark-overlay-tertiary-inverse light-overlay-tertiary light-overlay-tertiary-dark-static overlay-tertiary overlay-tertiary-dark-static
75#9665e0 dark-purple light-purple purple purple-50
76#61468c dark-purple-secondary purple-30
77#473663 dark-purple-tertiary purple-20
78#8c0b0c dark-red-secondary red-30
79#621415 dark-red-tertiary red-20
80#1314161f dark-shadow light-shadow shadow
81#00000014 dark-shimmer
82#73b1af dark-split
83#3e3f42 dark-stroke-opaque dark-surface-contrast dark-surface-floating dark-surface-secondary gray-25
84#777a7e dark-surface-contrast-secondary dark-surface-quaternary dark-surface-secondary-floating gray-50
85#595a5f dark-surface-tertiary gray-40 surface-tertiary-inverse
86#0c78ed1a dark-text-selection light-text-selection text-selection
87#e600001a dark-text-selection-error light-text-selection-error text-selection-error
88#da3332 dark-yandex-red light-yandex-red yandex-red
89#ffdc60 dark-yandex-yellow light-yandex-yellow yandex-yellow
90#fd0 dark-yellow light-yellow yellow yellow-50
91#80710e dark-yellow-secondary yellow-30
92#544d17 dark-yellow-tertiary yellow-20
93#9dfbb2 deal-fair light-deal-fair
94#4954681a fill light-fill
95#2a374a29 fill-secondary light-fill-secondary
96#267e3b foreground-green green-40 light-foreground-green
97#b35909 foreground-orange light-foreground-orange orange-40
98#7a3cd8 foreground-purple light-foreground-purple purple-40
99#c00 foreground-red light-foreground-red red-40
100#b6b8bb gray-75 light-surface-quaternary surface-quaternary
101#dddfe2 gray-85 light-surface-tertiary surface-tertiary
102#c2e8cc green-80 green-secondary light-green-secondary
103#d9f2df green-90 green-tertiary light-green-tertiary
104#65e280 light-lime-green lime-green lime-green-80
105#ffd07f light-orange-secondary orange-80 orange-secondary
106#fbead0 light-orange-tertiary orange-90 orange-tertiary
107#c8b0eb light-purple-secondary purple-80 purple-secondary
108#ebe1fa light-purple-tertiary purple-90 purple-tertiary
109#fcc7c4 light-red-secondary red-80 red-secondary
110#fee3e2 light-red-tertiary red-90 red-tertiary
111#ffffff0a light-shimmer shimmer
112#c3e7e6 light-split split
113#ffee7f light-yellow-secondary yellow-80 yellow-secondary
114#fffad9 light-yellow-tertiary yellow-90 yellow-tertiary
115#000000e0 mag-bg-dark
116#f5f5f5 mag-bg-gray-light
117#2882db mag-blue mag-text-blue
118#adadad mag-gray-a1
119#575757 mag-gray-dark mag-text-gray-dark
120#5c5c5c mag-gray-light
121#e0e0e0 mag-gray-light-extra mag-text-gray-light-extra
122#2aabee mag-new-blue

123#eaebed mag-new-gray-light
124#d90000 mag-new-red
125#d73b35 mag-red
126#1f1f1f mag-text-black
127#e1e3ff plum
128#c1c7ff plum-hover
129#c0a399 saddle-brown
130#9c8882 saddle-brown-hover
131#dcf0ff soft-blue
132#b6e1ff soft-blue-hover
133#94d1ee spinner-color
134#007aff swiper-theme-color
135#f2e6e2 tan
136#e9d4cc tan-hover
137#9fa6ec violet
138#7d85d5 violet-hover
139`.trim().split("\n").map(e=>{let[r,...a]=e.split(" "),t=r.slice(1),l=t.length<=4?t.split("").map(e=>e+e).join(""):t,i=[0,2,4].map(e=>parseInt(l.slice(e,e+2),16)),n=8===l.length?parseInt(l.slice(6),16)/255:1;return{hex:`#${l.toUpperCase()}`,rgb:1===n?`rgb(${i.join(", ")})`:`rgba(${i.join(", ")}, ${Number(n.toFixed(3))})`,names:a.map(e=>`--${e}`)}}),o=s.reduce((e,r)=>e+r.names.length,0);function d(){let[e,r]=(0,n.useState)(""),a=s.filter(r=>`${r.hex} ${r.rgb} ${r.names.join(" ")}`.toLowerCase().includes(e.toLowerCase().trim()));return(0,t.jsxs)("section",{id:"autoru-colors",className:"scroll-mt-6 rounded-2xl bg-white p-5 sm:p-7",children:[(0,t.jsx)("h2",{className:"text-2xl font-semibold",children:"Цвета Auto.ru"}),(0,t.jsxs)("p",{className:"mt-2 text-sm leading-6 text-zinc-500",children:["Снимок цветов ",(0,t.jsx)("a",{href:"https://auto.ru/cars/used/sale/vaz/niva/1133710316-416827ff/",target:"_blank",rel:"noreferrer",className:"underline",children:"страницы объявления"})," от 26 сентября 2026. Красный сайта выбран: #E60000 \xb7 rgb(230, 0, 0)."]}),(0,t.jsxs)("div",{className:"my-6 grid gap-5 sm:grid-cols-2",children:[(0,t.jsxs)("div",{className:"rounded-xl border border-zinc-100 p-4",children:[(0,t.jsx)("span",{style:{backgroundColor:"#CCFF00",color:"#000000"},className:"inline-block rounded-lg px-3 py-1.5 text-sm font-medium",children:"Только на Авто.ру"}),(0,t.jsx)("p",{className:"mt-3 text-sm",children:"Фон: #CCFF00 \xb7 rgb(204, 255, 0)"}),(0,t.jsx)("p",{className:"mt-1 text-sm",children:"Текст: #000000 \xb7 rgb(0, 0, 0)"}),(0,t.jsx)("p",{className:"mt-2 break-words text-xs text-zinc-500",children:"--acid-green / --brand-secondary"})]}),(0,t.jsxs)("div",{className:"rounded-xl border border-zinc-100 p-4",children:[(0,t.jsx)("span",{style:{backgroundColor:"#D9F2DF",color:"#267E3B"},className:"inline-block rounded-full px-3 py-1.5 text-sm font-medium",children:"Справедливая цена"}),(0,t.jsx)("p",{className:"mt-3 text-sm",children:"Фон: #D9F2DF \xb7 rgb(217, 242, 223)"}),(0,t.jsx)("p",{className:"mt-1 text-sm",children:"Текст: #267E3B \xb7 rgb(38, 126, 59)"}),(0,t.jsx)("p",{className:"mt-2 break-words text-xs text-zinc-500",children:"--green-tertiary / --foreground-green"})]})]}),(0,t.jsx)("h3",{className:"text-lg font-semibold",children:"Цветовые переменные :root"}),(0,t.jsxs)("p",{className:"mt-2 text-sm leading-6 text-zinc-500",children:[o," переменных, ",s.length," разных значений. Одинаковые цвета объединены; сохранены все имена, включая light- и dark-варианты. Значения ссылок var() разрешены для текущей светлой темы. Наличие переменной в CSS не означает, что она используется в видимом элементе."]}),(0,t.jsxs)("label",{className:"mt-5 block text-sm font-medium",children:["Найти цвет или переменную",(0,t.jsx)("input",{value:e,onChange:e=>r(e.target.value),placeholder:"Например: green, #CCFF00, 217, 242, 223",className:"mt-2 block min-h-[44px] w-full rounded-xl border border-zinc-200 px-3 font-normal outline-none focus:border-zinc-500"})]}),(0,t.jsxs)("p",{"aria-live":"polite",className:"my-3 text-xs text-zinc-500",children:["Показано цветов: ",a.length]}),(0,t.jsx)("ul",{className:"divide-y divide-zinc-100",children:a.map(e=>(0,t.jsxs)("li",{className:"flex items-start gap-4 py-4",children:[(0,t.jsx)("span",{className:"mt-1 block h-12 w-12 shrink-0 overflow-hidden rounded-lg border border-zinc-200",style:{background:"linear-gradient(135deg, #fff 50%, #8b8b8b 50%)"},children:(0,t.jsx)("span",{className:"block h-full w-full",style:{backgroundColor:e.hex}})}),(0,t.jsxs)("div",{className:"min-w-0",children:[(0,t.jsxs)("p",{className:"text-sm font-medium",children:[e.hex," ",(0,t.jsx)("span",{className:"ml-2 font-normal text-zinc-500",children:e.rgb})]}),(0,t.jsx)("p",{className:"mt-1 break-words text-xs leading-5 text-zinc-500",children:e.names.join(" \xb7 ")})]})]},e.hex))}),0===a.length&&(0,t.jsx)("p",{className:"py-5 text-sm text-zinc-500",children:"Совпадений нет"}),(0,t.jsxs)("div",{className:"mt-6 border-t border-zinc-100 pt-5 text-sm leading-6",children:[(0,t.jsx)("h3",{className:"text-base font-semibold",children:"Локальная переменная загрузки изображений"}),(0,t.jsxs)("p",{className:"mt-2",children:[(0,t.jsx)("span",{style:{backgroundColor:"#05132e0a"},className:"mr-2 inline-block h-5 w-5 align-middle ring-1 ring-zinc-200"}),"--gradient-color: #05132E0A \xb7 rgba(5, 19, 46, 0.039)"]}),(0,t.jsxs)("p",{children:[(0,t.jsx)("span",{style:{backgroundColor:"#00000014"},className:"mr-2 inline-block h-5 w-5 align-middle ring-1 ring-zinc-200"}),"В тёмной теме: #00000014 \xb7 rgba(0, 0, 0, 0.078)"]}),(0,t.jsx)("p",{className:"mt-2 text-xs text-zinc-500",children:"В компоненте Badge2 локальные переменные фона, текста и обводки ссылаются на цвета списка выше. Фактические цвета двух бейджей проверены отдельно в браузере."})]})]})}var c=a(1664),g=a.n(c),h=a(3069);let u=n.forwardRef(function({title:e,titleId:r,...a},t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:t,"aria-labelledby":r},a),e?n.createElement("title",{id:r},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4.5 12.75l6 6 9-13.5"}))}),f=n.forwardRef(function({title:e,titleId:r,...a},t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:t,"aria-labelledby":r},a),e?n.createElement("title",{id:r},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5

139h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"}))});var m=a(3204);let y=n.forwardRef(function({title:e,titleId:r,...a},t){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:t,"aria-labelledby":r},a),e?n.createElement("title",{id:r},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"}))}),x=[{name:"Чуть темнее",note:"Красный из логотипа, затемнённый примерно на 10%.",color:"#CC0611",hover:"#B8050F",ink:"#CC0611",pale:"#FCEBEC"},{name:"Как в логотипе",note:"Точный основной красный из присланного логотипа ROOF.ru.",color:"#E30713",hover:"#CC0611",ink:"#E30713",pale:"#FDEBED"},{name:"Чуть светлее",note:"Красный из логотипа с добавлением примерно 10% белого.",color:"#E6202B",hover:"#E30713",ink:"#E6202B",pale:"#FDEDEF"},{name:"Синий того же тона",note:"Та же насыщенность и светлота HSL, что у красного из логотипа; оттенок — синий.",color:"#0756E3",hover:"#064DCC",ink:"#0756E3",pale:"#EBF1FD"},{name:"Чистый красный",note:"rgb(230, 0, 0) — совпадает с красным логотипа Auto.ru.",color:"#E60000",hover:"#CF0000",ink:"#E60000",pale:"#FDEBEB"},{name:"Зелёный Auto.ru",note:"Цвет кнопки \xabПоказать телефон\xbb на странице объявления Auto.ru.",color:"#36B555",hover:"#309F4B",ink:"#237638",pale:"#EBF8EE"},{name:"Синий Auto.ru",note:"Цвет ссылок на странице объявления Auto.ru.",color:"#0C78ED",hover:"#0A66CA",ink:"#095FBF",pale:"#ECF4FE"}],b="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[color:var(--accent)]",k=`inline-flex min-h-[44px] items-center justify-center gap-2 rounded-xl bg-[color:var(--accent)] px-4 py-2 text-lg font-bold text-white transition-colors hover:bg-[color:var(--hover)] motion-reduce:transition-none ${b}`;function p({kind:e,className:r="h-12 w-12"}){return(0,t.jsx)("svg",{viewBox:"0 0 64 64",className:r,"aria-hidden":"true",children:"oil"===e?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("rect",{x:"12",y:"4",width:"17",height:"9",rx:"2",fill:"#292B2E"}),(0,t.jsx)("path",{d:"M12 16h19l7-8h9l10 15v32a5 5 0 0 1-5 5H12a5 5 0 0 1-5-5V23a7 7 0 0 1 5-7Z",fill:"currentColor"}),(0,t.jsx)("path",{d:"m41 15 8 12h-9l-5-7Z",fill:"white"}),(0,t.jsx)("path",{d:"M26 29s-9 10-9 16a9 9 0 0 0 18 0c0-6-9-16-9-16Z",fill:"white"})]}):"wheel"===e?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("circle",{cx:"32",cy:"32",r:"28",fill:"#292B2E"}),(0,t.jsx)("circle",{cx:"32",cy:"32",r:"20",fill:"currentColor"}),(0,t.jsx)("circle",{cx:"32",cy:"32",r:"13",fill:"white"}

139),(0,t.jsx)("path",{d:"M29 16h6v32h-6zM16 29h32v6H16z",fill:"currentColor"}),(0,t.jsx)("circle",{cx:"32",cy:"32",r:"6",fill:"#292B2E"})]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("rect",{x:"12",y:"10",width:"10",height:"8",rx:"2",fill:"currentColor"}),(0,t.jsx)("rect",{x:"42",y:"10",width:"10",height:"8",rx:"2",fill:"#292B2E"}),(0,t.jsx)("rect",{x:"5",y:"20",width:"54",height:"37",rx:"5",fill:"#292B2E"}),(0,t.jsx)("rect",{x:"3",y:"18",width:"58",height:"9",rx:"3",fill:"currentColor"}),(0,t.jsx)("path",{d:"M15 39h14m-7-7v14M39 39h11",stroke:"white",strokeWidth:"4"}),(0,t.jsx)("rect",{x:"5",y:"51",width:"54",height:"6",rx:"2",fill:"currentColor"})]})})}function v({palette:e,index:r,selected:a,onSelect:l}){let[i,s]=(0,n.useState)(""),[o,d]=(0,n.useState)(!1),[c,g]=(0,n.useState)(!1),[x,v]=(0,n.useState)(!1),j=`rgb(${[1,3,5].map(r=>parseInt(e.color.slice(r,r+2),16)).join(", ")})`,w={"--accent":e.color,"--hover":e.hover,"--ink":e.ink,"--pale":e.pale};return(0,t.jsxs)("article",{id:`palette-${r+1}`,style:w,className:`scroll-mt-6 overflow-hidden rounded-3xl bg-white ${a?"ring-2 ring-[color:var(--accent)]":"ring-1 ring-black/5"}`,children:[(0,t.jsx)("div",{className:"h-2 bg-[color:var(--accent)]"}),(0,t.jsxs)("div",{className:"p-5 sm:p-7",children:[(0,t.jsxs)("header",{className:"mb-6 flex flex-wrap items-start justify-between gap-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsxs)("p",{className:"mb-2 text-xs font-medium uppercase tracking-widest text-zinc-500",children:["Вариант ",r+1]}),(0,t.jsx)("h2",{className:"text-xl font-semibold tracking-tight",children:e.name})]}),(0,t.jsxs)("span",{className:"rounded-full bg-[color:var(--pale)] px-3 py-1.5 text-xs font-medium text-[color:var(--ink)]",children:[e.color," \xb7 ",j]})]}),(0,t.jsx)("p",{className:"mb-6 min-h-[40px] text-sm leading-5 text-zinc-500",children:e.note}),(0,t.jsxs)("form",{onSubmit:e=>{e.preventDefault(),d(!0)},className:"flex min-w-0 rounded-xl border border-zinc-300 bg-white p-1 focus-within:border-[color:var(--accent)] focus-within:ring-2 focus-within:ring-[color:var(--pale)]",children:[(0,t.jsx)("input",{"aria-label":`Поиск в варианте ${r+1}`,value:i,onChange:e=>{s(e.target.value),d(!1)},placeholder:"Масло, фильтры, артикул",className:"w-full min-w-0 rounded-lg border-0 bg-white px-3 text-sm outline-none placeholder:text-zinc-400"}),(0,t.jsx)("button",{type:"submit","aria-label":`Найти в варианте ${r+1}`,className:`${k} !px-3`,children:(0,t.jsx)(h.Z,{className:"h-5 w-5"})})]}),(0,t.jsx)("p",{"aria-live":"polite",className:"mt-2 min-h-[32px] text-xs leading-4 text-zinc-500",children:o?i.trim()?`Пример поиска: \xab${i.trim()}\xbb. Ниже — демонстрационный товар.`:"Введите название или артикул.":"Нажмите на поле, чтобы увидеть цвет фокуса."}),(0,t.jsx)("div",{className:"my-5 grid grid-cols-3 gap-2",children:[{kind:"oil",label:"Масла"},{kind:"wheel",label:"Шины"},{kind:"battery",label:"АКБ"}].map(e=>(0,t.jsxs)("a",{href:`#product-${r+1}`,className:`group flex flex-col items-center gap-2 rounded-xl bg-zinc-50 px-2 py-4 !text-zinc-600 hover:bg-[color:var(--pale)] hover:!text-[color:var(--ink)] ${b}`,children:[(0,t.jsx)("span",{className:"text-[color:var(--accent)] opacity-90 group-hover:opacity-100 group-focus-within:opacity-100",children:(0,t.jsx)(p,{kind:e.kind})}),(0,t.jsx)("span",{className:"text-xs font-medium",children:e.label})]},e.kind))}),(0,t.jsxs)("div",{id:`product-${r+1}`,className:"scroll-mt-6 rounded-2xl border border-zinc-100 p-4",children:[(0,t.jsxs)("div",{className:"mb-4 flex items-center gap-4",children:[(0,t.jsx)("div",{className:"flex h-20 w-20 shrink-0 items-center justify-center rounded-xl bg-[color:var(--pale)] text-[color:var(--accent)]",children:(0,t.jsx)(p,{kind:"oil",className:"h-14 w-14"})}),(0,t.jsxs)("div",{className:"min-w-0",children:[(0,t.jsx)("span",{className:"mb-2 inline-flex rounded-md bg-[color:var(--pale)] px-2 py-1 text-xs font-medium text-[color:var(--ink)]",children:"Выгодно \xb7 −15%"}),(0,t.jsx)("h3",{className:"text-sm font-medium leading-5",children:"Моторное масло 5W-30"}),(0,t.jsx)("p",{className:"mt-1 text-xs text-zinc-500",children:"Синтетическое \xb7 4 л"})]})]}),(0,t.jsxs)("div",{className:"mb-4 flex items-baseline gap-3",children:[(0,t.jsx)("span",{className:"text-2xl font-semibold tracking-tight",children:"2 490 ₽"}),(0,t.jsx)("span",{className:"text-sm text-zinc-400 line-through",children:"2 930 ₽"})]}),(0,t.jsxs)("div",{className:"flex gap-2",children:[(0,t.jsxs)("button",{type:"button",onClick:()=>v(!x),"aria-pressed":x,className:`${k} flex-1`,children:[x?(0,t.jsx)(u,{className:"h-5 w-5"}):(0,t.jsx)(f,{className:"h-5 w-5"}

139),x?"Добавлено":"В корзину"]}),(0,t.jsx)("button",{type:"button",onClick:()=>g(!c),"aria-pressed":c,"aria-label":`Избранное в варианте ${r+1}`,className:`rounded-xl border border-zinc-200 px-3 text-[color:var(--ink)] hover:border-[color:var(--accent)] hover:bg-[color:var(--pale)] ${b}`,children:(0,t.jsx)(m.Z,{className:`h-5 w-5 ${c?"fill-[var(--accent)] stroke-[var(--accent)]":""}`})})]})]}),(0,t.jsxs)("div",{className:"my-5 flex flex-wrap items-center justify-between gap-3",children:[(0,t.jsxs)("a",{href:`#product-${r+1}`,className:`inline-flex items-center gap-1.5 text-sm !text-zinc-600 hover:!text-[color:var(--ink)] ${b}`,children:["Подробнее о товаре",(0,t.jsx)(y,{className:"h-4 w-4"})]}),(0,t.jsx)("button",{type:"button",onClick:()=>g(!c),className:`rounded-lg bg-[color:var(--pale)] px-3 py-2 text-sm font-medium text-[color:var(--ink)] hover:bg-[color:var(--accent)] hover:text-zinc-950 ${b}`,children:c?"В избранном":"В избранное"})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between border-t border-zinc-100 pt-5",children:[(0,t.jsx)("div",{className:"flex gap-1.5","aria-label":"Основной цвет, наведение, мягкий фон",children:[e.color,e.hover,e.pale].map(e=>(0,t.jsx)("span",{title:e,style:{backgroundColor:e},className:"h-6 w-6 rounded-full ring-1 ring-inset ring-black/5"},e))}),(0,t.jsxs)("button",{type:"button","aria-pressed":a,onClick:l,className:`inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium ${a?"bg-[color:var(--pale)] text-[color:var(--ink)]":"text-zinc-600 hover:bg-zinc-100"} ${b}`,children:[a&&(0,t.jsx)(u,{className:"h-4 w-4"}),a?"Выбран для сравнения":`Выбрать №${r+1}`]})]})]})]})}function j(){let[e,r]=(0,n.useState)(null);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(i(),{children:[(0,t.jsx)("title",{children:"Цвета интерфейса — Планета Авто"}),(0,t.jsx)("meta",{name:"robots",content:"noindex, nofollow"})]}),(0,t.jsx)("main",{className:"min-h-screen bg-[#F6F5F3] px-4 py-8 font-sans text-zinc-800 sm:px-8 sm:py-12",children:(0,t.jsxs)("div",{className:"mx-auto max-w-[1440px]",children:[(0,t.jsxs)("header",{className:"mb-10",children:[(0,t.jsxs)("div",{className:"mb-8 flex items-center justify-between gap-4",children:[(0,t.jsx)("span",{className:"text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500",children:"Планета Авто / Палитра"}),(0,t.jsx)(g(),{href:"/",className:"text-sm !text-zinc-500 hover:!text-zinc-900 focus-visible:outline focus-visible:outline-2",children:"На сайт ↗"})]}),(0,t.jsx)("h1",{className:"max-w-3xl text-4xl font-semibold leading-tight tracking-tight sm:text-5xl",children:"Цвета интерфейса."}),(0,t.jsx)("p",{className:"mt-4 max-w-2xl text-base leading-7 text-zinc-500",children:"Красный выбран — #E60000 \xb7 rgb(230, 0, 0). Ниже — справочник цветов Auto.ru и двух бейджей."})]}),(0,t.jsx)(d,{}),(0,t.jsxs)("details",{className:"mt-8",children:[(0,t.jsx)("summary",{className:"mb-6 cursor-pointer text-sm font-medium text-zinc-500",children:"Предыдущие варианты для сравнения"}),(0,t.jsx)("div",{className:"grid items-start gap-6 md:grid-cols-2 xl:grid-cols-3",children:x.map((a,l)=>(0,t.jsx)(v,{palette:a,index:l,selected:e===l,onSelect:()=>r(e===l?null:l)},a.name))})]}),(0,t.jsx)("p",{className:"mt-8 max-w-3xl text-sm leading-6 text-zinc-500",children:"Это страница сравнения: кнопки работают с демонстрационным товаром. Иконки здесь — упрощённые примеры сочетания красного с графитом. Выбор не меняет оформление сайта; готовые иконки категорий сохраняются."})]})})]})}j.layout=function({children:e}){return(0,t.jsx)(t.Fragment,{children:e})};var w=j},3204:function(e,r,a){"use strict";var t=a(7294);let l=t.forwardRef(function({title:e,titleId:r,...a},l){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:l,"aria-labelledby":r},a),e?t.createElement("title",{id:r},e):null,t.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"}))});r.Z=l}},function(e){e.O(0,[2888,9774,179],function(){return e(e.s=6498)}),_N_E=e.O()}]);