2206
редагувань
MediaWiki:Common.css: відмінності між версіями
Додано стиль CTA-картки service-card--cta
Admin (обговорення | внесок) (Filled (Heroicons solid) іконки сервіс-карток замість outlined) |
Admin (обговорення | внесок) (Додано стиль CTA-картки service-card--cta) |
||
| Рядок 431: | Рядок 431: | ||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%234b5563%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12%202.25c-5.385%200-9.75%204.365-9.75%209.75s4.365%209.75%209.75%209.75%209.75-4.365%209.75-9.75S17.385%202.25%2012%202.25zM4.575%2015.6a8.25%208.25%200%200%200%209.348%204.425%201.966%201.966%200%200%200-1.84-1.275.983.983%200%200%201-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453%201.453%200%200%201%202.328-.377L16.5%2015h.628a2.25%202.25%200%200%201%201.983%201.186%208.25%208.25%200%200%200-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535%201.01.216%201.49l-.51.766a2.25%202.25%200%200%201-1.161.886l-.143.048a1.107%201.107%200%200%200-.57%201.664c.369.555.169%201.307-.427%201.605L9%2013.125l.423%201.059a.956.956%200%200%201-1.652.928l-.679-.906a1.125%201.125%200%200%200-1.906.143l-.476.952a.992.992%200%200%201-.785.572l-.504.054z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E"); | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%234b5563%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12%202.25c-5.385%200-9.75%204.365-9.75%209.75s4.365%209.75%209.75%209.75%209.75-4.365%209.75-9.75S17.385%202.25%2012%202.25zM4.575%2015.6a8.25%208.25%200%200%200%209.348%204.425%201.966%201.966%200%200%200-1.84-1.275.983.983%200%200%201-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453%201.453%200%200%201%202.328-.377L16.5%2015h.628a2.25%202.25%200%200%201%201.983%201.186%208.25%208.25%200%200%200-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535%201.01.216%201.49l-.51.766a2.25%202.25%200%200%201-1.161.886l-.143.048a1.107%201.107%200%200%200-.57%201.664c.369.555.169%201.307-.427%201.605L9%2013.125l.423%201.059a.956.956%200%200%201-1.652.928l-.679-.906a1.125%201.125%200%200%200-1.906.143l-.476.952a.992.992%200%200%201-.785.572l-.504.054z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E"); | ||
} | } | ||
/* CTA-картка "Я виконавець, додати себе" — як service-card, але з пунктирною рамкою */ | |||
.service-card--cta { | |||
align-items: center; | |||
justify-content: center; | |||
text-align: center; | |||
background: #f8fafc; | |||
border: 2px dashed #cbd5e1; | |||
box-shadow: none; | |||
color: #4b5563; | |||
text-decoration: none; | |||
padding: 24px 20px; | |||
min-height: 100%; | |||
transition: border-color .15s, background .15s, color .15s, transform .15s; | |||
} | |||
.service-card--cta:hover { | |||
border-color: #2a6df4; | |||
background: #f0f6ff; | |||
color: #2a6df4; | |||
transform: translateY(-2px); | |||
box-shadow: none; | |||
text-decoration: none; | |||
} | |||
.service-card--cta__plus { | |||
width: 36px; | |||
height: 36px; | |||
border-radius: 50%; | |||
background: #fff; | |||
border: 1.5px solid currentColor; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 22px; | |||
line-height: 1; | |||
margin: 0 auto 10px; | |||
} | |||
.service-card--cta__title { | |||
display: block; | |||
font-weight: 600; | |||
font-size: 15px; | |||
color: inherit; | |||
} | |||
.service-card--cta__hint { | |||
display: block; | |||
font-size: 12px; | |||
color: #6b7280; | |||
margin-top: 4px; | |||
} | |||
.service-card--cta:hover .service-card--cta__hint { color: inherit; opacity: .85; } | |||