42point/dp-trade-UI-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cool the site palette

Browse Source
This commit is contained in:
Alexey S 2026-04-17 17:37:41 +03:00
parent a35d5644ee
commit 22d0bb7750
3 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/site.css
View File

@ -48,7 +48,7 @@ select {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 20; z-index: 20;
background: rgba(255, 253, 249, 0.94); background: rgba(248, 250, 252, 0.94);
border-bottom: 1px solid rgba(102, 96, 95, 0.18); border-bottom: 1px solid rgba(102, 96, 95, 0.18);
box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05); box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05);
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
@ -248,7 +248,7 @@ select {
overflow: auto; overflow: auto;
padding: 22px; padding: 22px;
border: 1px solid rgba(102, 96, 95, 0.18); border: 1px solid rgba(102, 96, 95, 0.18);
background: #fffdfa; background: #f8fafc;
box-shadow: var(--shadow-lift); box-shadow: var(--shadow-lift);
transform: translateX(-50%); transform: translateX(-50%);
display: none; display: none;
@ -416,7 +416,7 @@ select {
.button--secondary { .button--secondary {
border-color: rgba(75, 15, 36, 0.24); border-color: rgba(75, 15, 36, 0.24);
color: var(--color-primary-wine-100); color: var(--color-primary-wine-100);
background: rgba(255, 255, 255, 0.72); background: rgba(248, 250, 252, 0.78);
} }
.button--sm { .button--sm {
@ -435,7 +435,7 @@ select {
url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80"); url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80");
background-position: center; background-position: center;
background-size: cover; background-size: cover;
color: #fffdfa; color: #f8fafc;
} }
.hero-copy { .hero-copy {
@ -484,7 +484,7 @@ select {
} }
.type-lab-section { .type-lab-section {
background: #fffdfa; background: #eef2f6;
} }
.type-options { .type-options {
@ -513,7 +513,7 @@ select {
.type-card.is-selected { .type-card.is-selected {
border-color: rgba(75, 15, 36, 0.48); border-color: rgba(75, 15, 36, 0.48);
background: linear-gradient(180deg, #fffdfa 0%, #f7efe8 100%); background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
box-shadow: var(--shadow-lift); box-shadow: var(--shadow-lift);
} }
@ -531,7 +531,7 @@ select {
.type-card.is-selected-soft { .type-card.is-selected-soft {
border-color: rgba(185, 150, 91, 0.62); border-color: rgba(185, 150, 91, 0.62);
background: #fffaf0; background: #f7f4ea;
} }
.type-card.is-selected-soft::before { .type-card.is-selected-soft::before {
@ -752,7 +752,7 @@ select {
} }
.product-media--amber { .product-media--amber {
background: linear-gradient(140deg, #a8632a, #eaded2); background: linear-gradient(140deg, #a8632a, #dde4ec);
} }
.product-media--green { .product-media--green {
@ -785,7 +785,7 @@ select {
inset: 54px 8px auto; inset: 54px 8px auto;
height: 42px; height: 42px;
border-radius: 4px; border-radius: 4px;
background: #f4eee8; background: #eef2f6;
} }
.product-card h3 { .product-card h3 {

4
css/tokens.css
View File

@ -4,8 +4,8 @@
--color-neutral-black: #161616; --color-neutral-black: #161616;
--color-neutral-gray-700: #30343a; --color-neutral-gray-700: #30343a;
--color-neutral-gray-600: #66605f; --color-neutral-gray-600: #66605f;
--color-neutral-gray-300: #d8d3cf; --color-neutral-gray-300: #d9dee6;
--color-background-base: #faf8f5; --color-background-base: #f4f6f9;
--color-surface: #ffffff; --color-surface: #ffffff;
--color-accent-gold: #b9965b; --color-accent-gold: #b9965b;
--color-accent-blue: #1f3476; --color-accent-blue: #1f3476;

18
css/ui-kit.css
View File

@ -3,8 +3,8 @@
--color-primary-wine-80: #6d1c36; --color-primary-wine-80: #6d1c36;
--color-neutral-black: #161616; --color-neutral-black: #161616;
--color-gray-600: #66605f; --color-gray-600: #66605f;
--color-gray-300: #d8d3cf; --color-gray-300: #d9dee6;
--color-background-base: #faf8f5; --color-background-base: #f4f6f9;
--color-accent-gold: #b9965b; --color-accent-gold: #b9965b;
--color-white: #ffffff; --color-white: #ffffff;
--color-error: #a33a2f; --color-error: #a33a2f;
@ -59,7 +59,7 @@ select {
inset: 0 auto 0 0; inset: 0 auto 0 0;
width: 280px; width: 280px;
padding: 24px; padding: 24px;
background: #fffdf9; background: #f8fafc;
border-right: 1px solid rgba(102, 96, 95, 0.18); border-right: 1px solid rgba(102, 96, 95, 0.18);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -131,7 +131,7 @@ select {
gap: 48px; gap: 48px;
background: background:
radial-gradient(circle at 82% 28%, rgba(185, 150, 91, 0.25), transparent 24%), radial-gradient(circle at 82% 28%, rgba(185, 150, 91, 0.25), transparent 24%),
linear-gradient(135deg, #fffdfa 0%, #f4eee8 58%, #eaded2 100%); linear-gradient(135deg, #ffffff 0%, #eef2f6 58%, #dde4ec 100%);
} }
.kit-hero__content { .kit-hero__content {
@ -463,7 +463,7 @@ code {
place-items: center; place-items: center;
background: background:
linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 48%), linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 48%),
var(--media-bg, #eaded2); var(--media-bg, #dde4ec);
} }
.product-card--compact .product-media { .product-card--compact .product-media {
@ -475,7 +475,7 @@ code {
} }
.product-media--amber { .product-media--amber {
--media-bg: linear-gradient(140deg, #a8632a, #eaded2); --media-bg: linear-gradient(140deg, #a8632a, #dde4ec);
} }
.product-media--green { .product-media--green {
@ -508,7 +508,7 @@ code {
inset: 54px 8px auto; inset: 54px 8px auto;
height: 42px; height: 42px;
border-radius: 4px; border-radius: 4px;
background: #f4eee8; background: #eef2f6;
} }
.product-meta { .product-meta {
@ -671,7 +671,7 @@ td {
} }
th { th {
background: #f0e8df; background: #e8edf3;
color: var(--color-primary-wine-100); color: var(--color-primary-wine-100);
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
@ -770,7 +770,7 @@ tbody tr:hover {
.screen-preview__content span { .screen-preview__content span {
min-height: 110px; min-height: 110px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: #f0e8df; background: #e8edf3;
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {