mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
Improve strategy preview wireframes on desktop and phone.
Restrained mode now reads the palette like screen 02: primary-tinted headline, tertiary eyebrow, secondary gradient hero, outlined ghost CTA, and four-role gallery accents. Artboards lift with a soft shadow; the phone gains surface bars and a second copy line. Each strategy block sets matching image-gradient stops so committed, full palette, and drenched transitions stay depthful instead of flat fills. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
Cursor
+124
-64
@@ -1062,17 +1062,22 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
|
||||
.picker-strategy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
|
||||
grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
|
||||
gap: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* One raised panel, hairline rows — same vocabulary as the palette bands
|
||||
on screen 02, not four floating SaaS cards. */
|
||||
.picker-strategy-options {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: var(--ks-lacquer-raised);
|
||||
border: 1px solid var(--ks-rule);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picker-strategy-options > legend,
|
||||
@@ -1086,50 +1091,67 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Selection reads from the card itself: a champagne-tinted ground plus a
|
||||
doubled hairline (border + inset ring), no radio dot spending a column. */
|
||||
.picker-strategy-option {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
gap: 6px;
|
||||
align-items: start;
|
||||
padding: 16px 18px;
|
||||
background: var(--ks-lacquer-raised);
|
||||
border: 1px solid color-mix(in oklab, var(--ks-patina-deep) 32%, var(--ks-rule));
|
||||
border-radius: 2px;
|
||||
padding: 20px 24px 20px 28px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 180ms var(--ks-ease),
|
||||
border-color 180ms var(--ks-ease),
|
||||
box-shadow 180ms var(--ks-ease);
|
||||
color 180ms var(--ks-ease);
|
||||
}
|
||||
|
||||
.picker-strategy-option:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/* Patina spine: hover previews, checked commits. */
|
||||
.picker-strategy-option::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 3px;
|
||||
background: transparent;
|
||||
transition: background-color 180ms var(--ks-ease);
|
||||
}
|
||||
|
||||
.picker-strategy-option:hover {
|
||||
border-color: var(--ks-patina-deep);
|
||||
background: color-mix(in oklab, var(--ks-patina-deep) 4%, var(--ks-lacquer-raised));
|
||||
}
|
||||
|
||||
.picker-strategy-option:hover::before,
|
||||
.picker-strategy-option:has(input:checked)::before {
|
||||
background: var(--ks-patina-deep);
|
||||
}
|
||||
|
||||
.picker-strategy-copy {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.picker-strategy-copy strong {
|
||||
color: var(--ks-champagne);
|
||||
font-size: var(--ks-type-title-size);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
font-family: var(--ks-font-display);
|
||||
font-size: 1.22rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.picker-strategy-copy span {
|
||||
color: var(--ks-text-muted);
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.45;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.picker-strategy-option:has(input:checked) {
|
||||
background: color-mix(in oklab, var(--ks-patina-deep) 7%, var(--ks-lacquer-raised));
|
||||
border-color: var(--ks-patina-deep);
|
||||
box-shadow: inset 0 0 0 1px var(--ks-patina-deep);
|
||||
}
|
||||
|
||||
.picker-strategy-option:has(input:checked) .picker-strategy-copy strong {
|
||||
@@ -1138,7 +1160,8 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
|
||||
.picker-strategy-option:has(input:focus-visible) {
|
||||
outline: 2px solid var(--ks-patina-deep);
|
||||
outline-offset: 3px;
|
||||
outline-offset: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Screen 03 shows one editorial landing page at desktop and phone sizes.
|
||||
@@ -1154,21 +1177,25 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
--pv-bone: color-mix(in oklab, var(--pv-neutral) 62%, var(--pv-n-ink));
|
||||
--pv-strong: color-mix(in oklab, var(--pv-neutral) 22%, var(--pv-n-ink));
|
||||
--pvs-ground: var(--pv-neutral);
|
||||
--pvs-headline: var(--pv-strong);
|
||||
--pvs-eyebrow: var(--pv-bone);
|
||||
--pvs-surface: var(--pv-surface-2);
|
||||
--pvs-headline: color-mix(in oklab, var(--pv-primary) 80%, var(--pv-strong));
|
||||
--pvs-eyebrow: var(--pv-tertiary);
|
||||
--pvs-copy: var(--pv-bone);
|
||||
--pvs-title: var(--pv-strong);
|
||||
--pvs-cta: var(--pv-primary);
|
||||
--pvs-signal: var(--pv-primary);
|
||||
--pvs-ghost: var(--pv-bone);
|
||||
--pvs-ghost: color-mix(in oklab, var(--pv-neutral) 88%, var(--pv-secondary));
|
||||
--pvs-ghost-edge: color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral));
|
||||
--pvs-image: var(--pv-surface-2);
|
||||
--pvs-image-edge: var(--pv-bone);
|
||||
--pvs-image-a: color-mix(in oklab, var(--pv-secondary) 26%, var(--pv-neutral));
|
||||
--pvs-image-b: color-mix(in oklab, var(--pv-secondary) 50%, var(--pv-neutral));
|
||||
--pvs-image-edge: color-mix(in oklab, var(--pv-secondary) 58%, var(--pv-neutral));
|
||||
--pvs-bars: var(--pv-bone);
|
||||
--pvs-rule: var(--ks-rule);
|
||||
--pvs-accent-a: var(--pv-strong);
|
||||
--pvs-accent-b: var(--pv-bone);
|
||||
--pvs-accent-a: var(--pv-secondary);
|
||||
--pvs-accent-b: color-mix(in oklab, var(--pv-secondary) 38%, var(--pv-neutral));
|
||||
--pvs-accent-c: var(--pv-primary);
|
||||
--pvs-accent-d: var(--pv-surface-2);
|
||||
--pvs-accent-d: var(--pv-tertiary);
|
||||
width: 100%;
|
||||
aspect-ratio: 1.865 / 1;
|
||||
display: grid;
|
||||
@@ -1184,8 +1211,11 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="committed"]:checked) .picker-strategy-preview {
|
||||
--pvs-headline: color-mix(in oklab, var(--pv-primary) 80%, var(--pv-strong));
|
||||
--pvs-eyebrow: var(--pv-primary);
|
||||
--pvs-ghost: var(--pv-primary);
|
||||
--pvs-ghost: color-mix(in oklab, var(--pv-primary) 14%, var(--pv-neutral));
|
||||
--pvs-ghost-edge: var(--pv-primary);
|
||||
--pvs-image: var(--pv-primary);
|
||||
--pvs-image-a: var(--pv-primary);
|
||||
--pvs-image-b: color-mix(in oklab, var(--pv-primary) 72%, var(--pv-neutral));
|
||||
--pvs-image-edge: var(--pv-primary);
|
||||
--pvs-accent-a: var(--pv-primary);
|
||||
--pvs-accent-b: color-mix(in oklab, var(--pv-primary) 70%, var(--pv-neutral));
|
||||
@@ -1200,8 +1230,11 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="full-palette"]:checked) .picker-strategy-preview {
|
||||
--pvs-headline: color-mix(in oklab, var(--pv-primary) 80%, var(--pv-strong));
|
||||
--pvs-eyebrow: var(--pv-tertiary);
|
||||
--pvs-ghost: var(--pv-secondary);
|
||||
--pvs-ghost: color-mix(in oklab, var(--pv-secondary) 18%, var(--pv-neutral));
|
||||
--pvs-ghost-edge: var(--pv-secondary);
|
||||
--pvs-image: var(--pv-primary);
|
||||
--pvs-image-a: var(--pv-primary);
|
||||
--pvs-image-b: color-mix(in oklab, var(--pv-secondary) 32%, var(--pv-primary));
|
||||
--pvs-image-edge: var(--pv-primary);
|
||||
--pvs-signal: var(--pv-tertiary);
|
||||
--pvs-accent-a: var(--pv-secondary);
|
||||
@@ -1216,13 +1249,17 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
#picker-form:has(.picker-strategy-option:hover input[name="color-strategy"][value="drenched"]) .picker-strategy-preview,
|
||||
#picker-form:not(:has(.picker-strategy-option:hover input[name="color-strategy"])):has(input[name="color-strategy"][value="drenched"]:checked) .picker-strategy-preview {
|
||||
--pvs-ground: var(--pv-primary);
|
||||
--pvs-surface: color-mix(in oklab, var(--pv-p-ink) 10%, var(--pv-primary));
|
||||
--pvs-headline: var(--pv-p-ink);
|
||||
--pvs-eyebrow: color-mix(in oklab, var(--pv-p-ink) 70%, var(--pv-primary));
|
||||
--pvs-copy: color-mix(in oklab, var(--pv-p-ink) 55%, var(--pv-primary));
|
||||
--pvs-title: var(--pv-p-ink);
|
||||
--pvs-cta: var(--pv-p-ink);
|
||||
--pvs-ghost: color-mix(in oklab, var(--pv-p-ink) 35%, var(--pv-primary));
|
||||
--pvs-ghost: color-mix(in oklab, var(--pv-p-ink) 22%, var(--pv-primary));
|
||||
--pvs-ghost-edge: color-mix(in oklab, var(--pv-p-ink) 45%, var(--pv-primary));
|
||||
--pvs-image: color-mix(in oklab, var(--pv-p-ink) 20%, var(--pv-primary));
|
||||
--pvs-image-a: color-mix(in oklab, var(--pv-p-ink) 16%, var(--pv-primary));
|
||||
--pvs-image-b: color-mix(in oklab, var(--pv-p-ink) 28%, var(--pv-primary));
|
||||
--pvs-image-edge: color-mix(in oklab, var(--pv-p-ink) 40%, var(--pv-primary));
|
||||
--pvs-signal: var(--pv-tertiary);
|
||||
--pvs-bars: color-mix(in oklab, var(--pv-p-ink) 45%, var(--pv-primary));
|
||||
@@ -1239,7 +1276,8 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background-color: var(--pvs-ground);
|
||||
border: 1px solid var(--ks-rule);
|
||||
border: 1px solid color-mix(in oklab, var(--pvs-rule) 72%, var(--ks-rule));
|
||||
box-shadow: 0 16px 32px -20px oklch(0% 0 0 / 0.28);
|
||||
}
|
||||
|
||||
.ps-desktop {
|
||||
@@ -1267,10 +1305,11 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
}
|
||||
|
||||
.ps-brand-block {
|
||||
width: clamp(28px, 3.35vw, 48px);
|
||||
height: clamp(6px, 22%, 11px);
|
||||
width: clamp(8px, 1.15vw, 12px);
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
background-color: var(--pvs-cta);
|
||||
border-radius: 2px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ps-nav-bars {
|
||||
@@ -1331,7 +1370,7 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
}
|
||||
|
||||
.ps-headline i:last-child {
|
||||
width: 100%;
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
.ps-copy {
|
||||
@@ -1342,14 +1381,14 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
|
||||
.ps-copy i {
|
||||
display: block;
|
||||
width: 70%;
|
||||
width: 64%;
|
||||
height: 7px;
|
||||
background-color: var(--pvs-copy);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ps-copy i:last-child {
|
||||
width: 70%;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.ps-actions {
|
||||
@@ -1367,17 +1406,31 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
|
||||
.ps-actions i:last-child {
|
||||
background-color: var(--pvs-ghost);
|
||||
border: 1px solid var(--pvs-ghost-edge);
|
||||
}
|
||||
|
||||
.ps-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
background-color: var(--pvs-image);
|
||||
background-image: linear-gradient(135deg, var(--pvs-image-a), var(--pvs-image-b));
|
||||
border: 1px solid var(--pvs-image-edge);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ps-image::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8%;
|
||||
right: 8%;
|
||||
width: clamp(6px, 1.1vw, 10px);
|
||||
aspect-ratio: 1;
|
||||
background-color: var(--pvs-accent-d);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ps-proof {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
@@ -1572,12 +1625,12 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
padding: 0 6%;
|
||||
background-color: var(--pvs-surface);
|
||||
border-bottom: 1px solid var(--pvs-rule);
|
||||
}
|
||||
|
||||
.ps-phone-top .ps-brand-block {
|
||||
width: 22%;
|
||||
height: 8px;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
.ps-phone-top .ps-nav-action {
|
||||
@@ -1588,13 +1641,14 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
.ps-phone-body {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: 29.5% auto auto auto 36px auto minmax(0, 1fr);
|
||||
gap: 5px;
|
||||
grid-template-rows: 31% auto auto auto 34px auto minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
padding: 6%;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-image {
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-headline i {
|
||||
@@ -1602,46 +1656,48 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-headline {
|
||||
margin: 8px 0 0;
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-headline i:first-child {
|
||||
width: 57%;
|
||||
width: 54%;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-headline i:last-child {
|
||||
width: 86%;
|
||||
width: 82%;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-copy {
|
||||
margin: 4px 0 0;
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-copy i {
|
||||
width: 70%;
|
||||
width: 68%;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-copy i:last-child {
|
||||
display: none;
|
||||
display: block;
|
||||
width: 52%;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-actions {
|
||||
gap: 7px;
|
||||
margin-top: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-actions i {
|
||||
width: 43%;
|
||||
height: 20px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-proof {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-inline: -6.5%;
|
||||
margin-top: 6.5px;
|
||||
margin-top: 5px;
|
||||
border-block-color: var(--pvs-rule);
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-proof-item {
|
||||
@@ -1650,7 +1706,7 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-proof-item i {
|
||||
width: 11px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-proof-item span {
|
||||
@@ -1659,12 +1715,12 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-editorial-copy strong {
|
||||
width: 33%;
|
||||
width: 38%;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-editorial-copy {
|
||||
margin-top: 9.5px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-editorial-copy span i {
|
||||
@@ -1672,14 +1728,14 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-gallery {
|
||||
grid-template-columns: 1.1fr 0.95fr;
|
||||
gap: 12.5%;
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
gap: 10%;
|
||||
margin-left: 1px;
|
||||
margin-top: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.ps-phone-body .ps-gallery-item {
|
||||
grid-template-rows: 31px auto;
|
||||
grid-template-rows: 36px auto;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
@@ -1698,6 +1754,7 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
justify-content: space-around;
|
||||
min-height: 0;
|
||||
padding-inline: 6%;
|
||||
background-color: var(--pvs-surface);
|
||||
border-top: 1px solid var(--pvs-rule);
|
||||
}
|
||||
|
||||
@@ -1718,6 +1775,7 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
.ps-copy i,
|
||||
.ps-actions i,
|
||||
.ps-image,
|
||||
.ps-image::after,
|
||||
.ps-proof-item i,
|
||||
.ps-proof-item span,
|
||||
.ps-editorial-copy strong,
|
||||
@@ -1733,7 +1791,9 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
) {
|
||||
transition:
|
||||
background-color 280ms var(--ks-ease),
|
||||
background-image 280ms var(--ks-ease),
|
||||
border-color 280ms var(--ks-ease),
|
||||
box-shadow 280ms var(--ks-ease),
|
||||
color 280ms var(--ks-ease);
|
||||
}
|
||||
|
||||
@@ -1754,7 +1814,7 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
|
||||
.picker-type-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
|
||||
grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
|
||||
gap: 50px;
|
||||
align-items: stretch;
|
||||
}
|
||||
@@ -1771,14 +1831,14 @@ html.light .ks-button.ks-button-ghost:hover {
|
||||
inset: 0;
|
||||
overflow-y: auto;
|
||||
align-content: start;
|
||||
gap: 10px;
|
||||
padding-right: 12px;
|
||||
padding-right: 10px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: color-mix(in oklab, var(--ks-patina-deep) 35%, transparent) transparent;
|
||||
}
|
||||
|
||||
.picker-type-option {
|
||||
gap: 14px;
|
||||
padding: 18px 20px;
|
||||
gap: 0;
|
||||
padding: 22px 24px 22px 28px;
|
||||
}
|
||||
|
||||
.picker-type-copy {
|
||||
|
||||
Reference in New Issue
Block a user