feat: immerse the portfolio in a chromatic synthwave night
Carry rose, violet, coral, electric blue and cyan through the interface, road, terrain, signs and atmosphere. Add a Blender-authored paint edition and matching runtime fallback captures. Interpolate atmospheric color on a small sky lattice and enrich existing speed effects without another rendering pass. Preserve approved copy, project media, metadata, navigation contracts and adaptive audio. Verified with typecheck, client/SSR builds, validated prerendering, artifact and transfer checks, responsive Chrome interaction, fallback checks and Intel-backed performance sampling.
This commit is contained in:
400
src/styles/chromatic.css
Normal file
400
src/styles/chromatic.css
Normal file
@@ -0,0 +1,400 @@
|
||||
@media screen {
|
||||
/* Chromatic nightdrive: rose light, violet enamel and electric blue.
|
||||
Color stays independent of layout, chapter measurements and drive state. */
|
||||
:root {
|
||||
--canvas: #130c23;
|
||||
--surface: rgb(28 17 45 / 98.5%);
|
||||
--surface-strong: #20142f;
|
||||
--surface-soft: #2c1c40;
|
||||
--line: rgb(202 147 238 / 24%);
|
||||
--line-strong: rgb(231 129 215 / 54%);
|
||||
--text: #fff4f1;
|
||||
--text-muted: #cec0d7;
|
||||
--accent: #8be9ed;
|
||||
--accent-deep: #163943;
|
||||
--focus: #ffe096;
|
||||
--world-magenta: #ff70bf;
|
||||
--world-amber: #ffbb86;
|
||||
--rose: #ff83c2;
|
||||
--coral: #ffa68d;
|
||||
--violet: #c4a2ff;
|
||||
--electric: #8bb8ff;
|
||||
--night-ink-rgb: 19 10 33;
|
||||
--chapter-accent: var(--rose);
|
||||
--chapter-glow: 196 64 143;
|
||||
--panel-shadow: 0 24px 80px rgb(13 2 28 / 34%);
|
||||
}
|
||||
|
||||
.journey-world {
|
||||
background: var(--canvas);
|
||||
}
|
||||
.site-navigation {
|
||||
background: linear-gradient(
|
||||
110deg,
|
||||
rgb(39 19 52 / 97%),
|
||||
rgb(22 22 48 / 97%)
|
||||
);
|
||||
border-color: rgb(198 122 209 / 34%);
|
||||
box-shadow:
|
||||
0 8px 32px rgb(13 2 28 / 24%),
|
||||
inset 0 1px rgb(255 159 216 / 7%);
|
||||
}
|
||||
.site-navigation li {
|
||||
--nav-accent: var(--coral);
|
||||
}
|
||||
.site-navigation li:nth-child(2),
|
||||
.site-navigation li:nth-child(6) {
|
||||
--nav-accent: var(--rose);
|
||||
}
|
||||
.site-navigation li:nth-child(3),
|
||||
.site-navigation li:nth-child(7) {
|
||||
--nav-accent: var(--violet);
|
||||
}
|
||||
.site-navigation li:nth-child(4) {
|
||||
--nav-accent: var(--accent);
|
||||
}
|
||||
.site-navigation li:nth-child(5) {
|
||||
--nav-accent: var(--electric);
|
||||
}
|
||||
.site-navigation a[aria-current="page"],
|
||||
.site-navigation a:hover {
|
||||
color: var(--nav-accent);
|
||||
border-block-end-color: var(--nav-accent);
|
||||
background: color-mix(in srgb, var(--nav-accent) 12%, transparent);
|
||||
}
|
||||
.site-navigation summary {
|
||||
color: var(--rose);
|
||||
}
|
||||
|
||||
.hero-journey h1 {
|
||||
color: #ffb2d1;
|
||||
background: linear-gradient(
|
||||
158deg,
|
||||
#fff1d5 8%,
|
||||
#ffb3c5 42%,
|
||||
#ff7eba 76%,
|
||||
#c7a1ff 100%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-journey .section-eyebrow {
|
||||
color: var(--coral);
|
||||
}
|
||||
.hero-journey__role {
|
||||
color: #f7e4ff;
|
||||
}
|
||||
.hero-journey__value {
|
||||
color: #d4c5e3;
|
||||
}
|
||||
.hero-journey__availability {
|
||||
color: #c4b5d0;
|
||||
}
|
||||
.hero-journey__action {
|
||||
color: var(--accent);
|
||||
}
|
||||
.hero-journey__action--primary,
|
||||
.contact-link {
|
||||
color: #291027;
|
||||
border-color: #ff9dc1;
|
||||
background: linear-gradient(115deg, #ffb783, #ff8fbb 72%, #e79ddd);
|
||||
box-shadow:
|
||||
0 6px 28px rgb(235 71 148 / 16%),
|
||||
inset 0 1px rgb(255 230 210 / 50%);
|
||||
}
|
||||
.hero-journey__action--primary:hover,
|
||||
.contact-link:hover {
|
||||
color: #291027;
|
||||
background: linear-gradient(115deg, #ffd298, #ffb3d0 72%, #f4c0e8);
|
||||
}
|
||||
|
||||
#profile {
|
||||
--chapter-accent: var(--rose);
|
||||
--chapter-glow: 191 59 136;
|
||||
}
|
||||
#experience {
|
||||
--chapter-accent: var(--violet);
|
||||
--chapter-glow: 112 69 223;
|
||||
}
|
||||
#infrastructure {
|
||||
--chapter-accent: var(--accent);
|
||||
--chapter-glow: 39 94 183;
|
||||
}
|
||||
#selected-builds {
|
||||
--chapter-accent: var(--coral);
|
||||
--chapter-glow: 198 70 122;
|
||||
}
|
||||
#additional-work {
|
||||
--chapter-accent: var(--rose);
|
||||
--chapter-glow: 167 47 128;
|
||||
}
|
||||
#toolkit {
|
||||
--chapter-accent: var(--violet);
|
||||
--chapter-glow: 89 59 185;
|
||||
}
|
||||
#contact {
|
||||
--chapter-accent: var(--coral);
|
||||
--chapter-glow: 202 82 100;
|
||||
}
|
||||
.portfolio-section:not([data-layout="project-stage"]),
|
||||
.portfolio-section[data-layout="full-diagram"],
|
||||
.portfolio-section[data-layout="toolkit-field"] {
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at 100% 0%,
|
||||
rgb(var(--chapter-glow) / 19%),
|
||||
transparent 65%
|
||||
),
|
||||
var(--surface);
|
||||
border-color: color-mix(in srgb, var(--chapter-accent) 28%, transparent);
|
||||
box-shadow:
|
||||
var(--panel-shadow),
|
||||
inset 0 1px color-mix(in srgb, var(--chapter-accent) 38%, transparent);
|
||||
}
|
||||
.portfolio-section > h2 {
|
||||
color: color-mix(in srgb, var(--chapter-accent) 30%, var(--text));
|
||||
}
|
||||
.portfolio-section .section-eyebrow,
|
||||
.profile-facts dt,
|
||||
.project-evidence dt {
|
||||
color: var(--chapter-accent);
|
||||
}
|
||||
.portfolio-section[data-layout="project-stage"] > h2,
|
||||
.portfolio-section[data-layout="project-stage"] > .section-eyebrow {
|
||||
text-shadow: 0 2px 24px #160b29;
|
||||
}
|
||||
.portfolio-section li::marker {
|
||||
color: var(--chapter-accent);
|
||||
}
|
||||
.experience-timeline::before {
|
||||
background: linear-gradient(var(--violet), var(--rose) 58%, transparent);
|
||||
}
|
||||
.experience-timeline > li::before {
|
||||
background: var(--rose);
|
||||
border-color: var(--rose);
|
||||
box-shadow: 0 0 16px rgb(255 93 180 / 30%);
|
||||
}
|
||||
.experience-record__meta {
|
||||
color: #c8aee9;
|
||||
}
|
||||
.systems-operations {
|
||||
background: linear-gradient(
|
||||
115deg,
|
||||
rgb(137 65 155 / 19%),
|
||||
rgb(75 48 116 / 14%)
|
||||
);
|
||||
border-color: var(--rose);
|
||||
}
|
||||
.systems-operations h3 {
|
||||
color: #f5c5e9;
|
||||
}
|
||||
|
||||
.portfolio-section .infrastructure-flow-figure {
|
||||
background: linear-gradient(145deg, #20213e, #262044 55%, #321e43);
|
||||
box-shadow: inset 0 1px rgb(176 158 255 / 15%);
|
||||
}
|
||||
.infrastructure-node {
|
||||
--node-accent: var(--electric);
|
||||
}
|
||||
.infrastructure-node--ingress {
|
||||
--node-accent: var(--accent);
|
||||
}
|
||||
.infrastructure-node--access {
|
||||
--node-accent: var(--violet);
|
||||
}
|
||||
.infrastructure-node--services {
|
||||
--node-accent: var(--rose);
|
||||
}
|
||||
.infrastructure-node--operations {
|
||||
--node-accent: var(--coral);
|
||||
}
|
||||
.infrastructure-node,
|
||||
.infrastructure-node--operations {
|
||||
background: color-mix(in srgb, var(--node-accent) 13%, #201a35);
|
||||
border-color: color-mix(in srgb, var(--node-accent) 50%, transparent);
|
||||
box-shadow:
|
||||
inset 0 2px var(--node-accent),
|
||||
0 12px 28px rgb(11 4 30 / 22%);
|
||||
}
|
||||
.infrastructure-node strong {
|
||||
color: color-mix(in srgb, var(--node-accent) 38%, white);
|
||||
}
|
||||
.infrastructure-node__sequence,
|
||||
.infrastructure-boundary,
|
||||
.infrastructure-node__guard {
|
||||
color: var(--node-accent);
|
||||
}
|
||||
.infrastructure-boundary::before {
|
||||
border-color: var(--node-accent);
|
||||
}
|
||||
.infrastructure-node__connector {
|
||||
background: var(--node-accent);
|
||||
}
|
||||
.infrastructure-node__connector::after {
|
||||
border-color: var(--node-accent);
|
||||
}
|
||||
.operations-proof {
|
||||
background: linear-gradient(125deg, #302340, #20283e);
|
||||
border-color: rgb(202 151 239 / 28%);
|
||||
}
|
||||
.operations-proof > h4 {
|
||||
color: #f6c7dc;
|
||||
}
|
||||
|
||||
.project-case-study:nth-child(3n + 1) {
|
||||
--chapter-accent: var(--coral);
|
||||
--chapter-glow: 196 76 125;
|
||||
}
|
||||
.project-case-study:nth-child(3n + 2) {
|
||||
--chapter-accent: var(--electric);
|
||||
--chapter-glow: 64 77 188;
|
||||
}
|
||||
.project-case-study:nth-child(3n) {
|
||||
--chapter-accent: var(--violet);
|
||||
--chapter-glow: 121 59 190;
|
||||
}
|
||||
.project-case-study,
|
||||
.project-case-study[data-project-priority="supporting"],
|
||||
.project-case-study[data-project-id][data-media-layout] {
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at 90% 0%,
|
||||
rgb(var(--chapter-glow) / 22%),
|
||||
transparent 62%
|
||||
),
|
||||
var(--surface);
|
||||
border-color: color-mix(in srgb, var(--chapter-accent) 30%, transparent);
|
||||
box-shadow:
|
||||
var(--panel-shadow),
|
||||
inset 0 1px color-mix(in srgb, var(--chapter-accent) 46%, transparent);
|
||||
}
|
||||
.project-case-study__header {
|
||||
border-inline-start-color: var(--chapter-accent);
|
||||
}
|
||||
.project-case-study__header h3 {
|
||||
color: color-mix(in srgb, var(--chapter-accent) 30%, var(--text));
|
||||
}
|
||||
.project-media-gallery[data-media-layout="portrait-strip"] {
|
||||
background: radial-gradient(
|
||||
ellipse at 30% 0%,
|
||||
#623457,
|
||||
#392647 42%,
|
||||
#252444 100%
|
||||
);
|
||||
border-color: rgb(240 137 195 / 28%);
|
||||
}
|
||||
.project-evidence > div {
|
||||
border-color: color-mix(in srgb, var(--chapter-accent) 25%, transparent);
|
||||
}
|
||||
.project-link {
|
||||
color: var(--chapter-accent);
|
||||
background: color-mix(in srgb, var(--chapter-accent) 8%, transparent);
|
||||
border-color: color-mix(in srgb, var(--chapter-accent) 45%, transparent);
|
||||
}
|
||||
.project-link:hover {
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--chapter-accent) 19%, transparent);
|
||||
}
|
||||
.project-card:nth-child(even) {
|
||||
--chapter-accent: var(--electric);
|
||||
}
|
||||
.project-card h3 {
|
||||
color: color-mix(in srgb, var(--chapter-accent) 34%, var(--text));
|
||||
}
|
||||
.project-card {
|
||||
border-color: color-mix(in srgb, var(--chapter-accent) 38%, transparent);
|
||||
}
|
||||
.toolkit-group {
|
||||
--tool-color: var(--accent);
|
||||
}
|
||||
.toolkit-group:nth-child(2) {
|
||||
--tool-color: var(--rose);
|
||||
}
|
||||
.toolkit-group:nth-child(3) {
|
||||
--tool-color: var(--coral);
|
||||
}
|
||||
.toolkit-group:nth-child(4) {
|
||||
--tool-color: var(--violet);
|
||||
}
|
||||
.toolkit-group h3 {
|
||||
color: var(--tool-color);
|
||||
}
|
||||
.toolkit-item .brand-icon {
|
||||
color: var(--tool-color);
|
||||
}
|
||||
.toolkit-item:hover {
|
||||
background: color-mix(in srgb, var(--tool-color) 9%, transparent);
|
||||
}
|
||||
.contact-destination__copy {
|
||||
color: #f7deed;
|
||||
}
|
||||
.contact-social-link {
|
||||
color: #e4baf3;
|
||||
}
|
||||
.contact-social-link:hover {
|
||||
color: var(--coral);
|
||||
}
|
||||
|
||||
.drive-controls__dock,
|
||||
.drive-controls__settings-trigger,
|
||||
.journey-hud,
|
||||
.drive-popover,
|
||||
.drive-controls__audio-status {
|
||||
background: linear-gradient(125deg, #2d193c, #1d1c35);
|
||||
border-color: rgb(199 121 222 / 42%);
|
||||
box-shadow:
|
||||
0 8px 30px rgb(11 2 27 / 24%),
|
||||
inset 0 1px rgb(255 162 226 / 8%);
|
||||
}
|
||||
.drive-start {
|
||||
color: #201031;
|
||||
border-color: #e49cd8;
|
||||
background: linear-gradient(110deg, #f994c7, #cba5ff 65%, #9dccff);
|
||||
box-shadow: inset 0 1px rgb(255 232 250 / 40%);
|
||||
}
|
||||
.drive-control-button {
|
||||
background: #2a203e;
|
||||
color: #d9c9e6;
|
||||
}
|
||||
.drive-control-button:hover {
|
||||
background: #3d2853;
|
||||
color: #ffa2d4;
|
||||
}
|
||||
.drive-control-button::after {
|
||||
border-color: #6e437d;
|
||||
background: #271633;
|
||||
}
|
||||
.drive-popover strong,
|
||||
.drive-popover output {
|
||||
color: var(--rose);
|
||||
}
|
||||
.drive-popover select {
|
||||
background: #21182f;
|
||||
border-color: #714d82;
|
||||
}
|
||||
.drive-popover input[type="range"] {
|
||||
accent-color: var(--rose);
|
||||
}
|
||||
.journey-hud__route strong {
|
||||
color: var(--coral);
|
||||
}
|
||||
.journey-hud__section {
|
||||
color: var(--violet);
|
||||
}
|
||||
.journey-hud__arrival {
|
||||
color: var(--coral);
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.hero-journey h1 {
|
||||
background: none;
|
||||
-webkit-text-fill-color: CanvasText;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
.hero-journey h1 {
|
||||
background: none;
|
||||
-webkit-text-fill-color: #111;
|
||||
}
|
||||
}
|
||||
@@ -781,9 +781,9 @@ body {
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(8 13 24 / 98%),
|
||||
rgb(8 13 24 / 88%) 31%,
|
||||
rgb(8 13 24 / 25%) 51%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 98%),
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 88%) 31%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 25%) 51%,
|
||||
transparent 70%
|
||||
);
|
||||
}
|
||||
@@ -816,9 +816,9 @@ body {
|
||||
inset-block-start: -70px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(8 13 24 / 98%) 0%,
|
||||
rgb(8 13 24 / 92%) 43%,
|
||||
rgb(8 13 24 / 35%) 64%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 98%) 0%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 92%) 43%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 35%) 64%,
|
||||
transparent 85%
|
||||
);
|
||||
}
|
||||
@@ -852,9 +852,9 @@ body {
|
||||
.hero-journey::before {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(8 13 24 / 96%) 0%,
|
||||
rgb(8 13 24 / 90%) 55%,
|
||||
rgb(8 13 24 / 28%) 73%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 96%) 0%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 90%) 55%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 28%) 73%,
|
||||
transparent 90%
|
||||
);
|
||||
}
|
||||
@@ -863,9 +863,9 @@ body {
|
||||
.hero-journey::before {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(8 13 24 / 98%) 0%,
|
||||
rgb(8 13 24 / 92%) 53%,
|
||||
rgb(8 13 24 / 48%) 66%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 98%) 0%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 92%) 53%,
|
||||
rgb(var(--night-ink-rgb, 8 13 24) / 48%) 66%,
|
||||
transparent 85%
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user