Cool light palette and hero theme
This commit is contained in:
+72
-59
@@ -1108,13 +1108,13 @@ button {
|
||||
|
||||
/* A compact personal workspace, across every section. */
|
||||
:root {
|
||||
--background: 42 30% 96%;
|
||||
--card: 45 35% 99%;
|
||||
--border: 35 15% 82%;
|
||||
--studio-rule: #ddd8cd;
|
||||
--background: 204 44% 97%;
|
||||
--card: 205 45% 99%;
|
||||
--border: 202 24% 86%;
|
||||
--studio-rule: #d6e1e7;
|
||||
}
|
||||
.site-header {
|
||||
background: #f8f6f0f5;
|
||||
background: #f6f9fcf5;
|
||||
}
|
||||
.nav-inner {
|
||||
height: 76px;
|
||||
@@ -1212,7 +1212,7 @@ button {
|
||||
}
|
||||
.corner-card {
|
||||
display: block;
|
||||
background: #fffdf7;
|
||||
background: #fbfdff;
|
||||
border: 1px solid var(--studio-rule);
|
||||
padding: 9px 9px 15px;
|
||||
border-radius: 4px;
|
||||
@@ -1285,7 +1285,7 @@ button {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--studio-rule);
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
margin-top: 8px;
|
||||
@@ -1351,7 +1351,7 @@ button {
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
}
|
||||
.travel-strip {
|
||||
display: flex;
|
||||
@@ -1432,7 +1432,7 @@ button {
|
||||
overflow-y: auto;
|
||||
padding: 25px 18px;
|
||||
border-right: 1px solid var(--studio-rule);
|
||||
background: #f1eee5;
|
||||
background: #edf4f8;
|
||||
}
|
||||
.rail-group {
|
||||
margin-top: 19px;
|
||||
@@ -1458,7 +1458,7 @@ button {
|
||||
opacity: 0;
|
||||
}
|
||||
.rail-group a:hover {
|
||||
background: #e6e4d9;
|
||||
background: #e4edf3;
|
||||
}
|
||||
.rail-group a:hover span {
|
||||
opacity: 1;
|
||||
@@ -1587,7 +1587,7 @@ button {
|
||||
padding: 8px 13px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 5px;
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
color: var(--studio-blue);
|
||||
}
|
||||
|
||||
@@ -1597,7 +1597,7 @@ button {
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -1637,7 +1637,7 @@ button {
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
}
|
||||
.mark-choice[aria-pressed="true"] {
|
||||
border-color: var(--studio-blue);
|
||||
@@ -1648,7 +1648,7 @@ button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #eeeee6;
|
||||
background: #edf3f7;
|
||||
padding: 20px;
|
||||
}
|
||||
.mark-large svg {
|
||||
@@ -1745,7 +1745,7 @@ button {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
padding: 12px 15px;
|
||||
background: var(--studio-paper, #fffdf8);
|
||||
background: var(--studio-paper, #fbfdff);
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 6px;
|
||||
}
|
||||
@@ -1765,7 +1765,7 @@ button {
|
||||
.coffee-map-panel {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
background: #e8e9df;
|
||||
background: #e7eff4;
|
||||
}
|
||||
.coffee-map {
|
||||
height: 520px;
|
||||
@@ -1778,7 +1778,7 @@ button {
|
||||
left: 60px;
|
||||
right: 25px;
|
||||
padding: 15px;
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
}
|
||||
.coffee-pin {
|
||||
background: var(--studio-blue);
|
||||
@@ -1798,7 +1798,7 @@ button {
|
||||
.coffee-shop-list {
|
||||
max-height: 520px;
|
||||
overflow: auto;
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
padding: 18px 12px;
|
||||
}
|
||||
.coffee-shop-list > .studio-label {
|
||||
@@ -1816,7 +1816,7 @@ button {
|
||||
}
|
||||
.coffee-shop:hover,
|
||||
.coffee-shop[aria-pressed="true"] {
|
||||
background: #eeeee6;
|
||||
background: #edf3f7;
|
||||
}
|
||||
.coffee-shop > span:nth-child(2) {
|
||||
flex: 1;
|
||||
@@ -1837,7 +1837,7 @@ button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.coffee-detail {
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
padding: 22px;
|
||||
border-top: 1px solid var(--studio-rule);
|
||||
}
|
||||
@@ -2101,7 +2101,7 @@ button {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: #f0efe8;
|
||||
background: #edf3f7;
|
||||
}
|
||||
.control-group {
|
||||
display: flex;
|
||||
@@ -2115,7 +2115,7 @@ button {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 4px;
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
}
|
||||
.control-group button:disabled {
|
||||
opacity: 0.35;
|
||||
@@ -2132,7 +2132,7 @@ button {
|
||||
min-height: 420px;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
background: #e9e8e1;
|
||||
background: #e7eff4;
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-top: 0;
|
||||
}
|
||||
@@ -2202,7 +2202,7 @@ button {
|
||||
|
||||
/* A centered site with one consistent, compact navigation. */
|
||||
.site-header {
|
||||
background: #f8f6f0f5;
|
||||
background: #f6f9fcf5;
|
||||
backdrop-filter: blur(18px);
|
||||
border-bottom: 1px solid var(--studio-rule);
|
||||
}
|
||||
@@ -2338,7 +2338,7 @@ button {
|
||||
width: 190px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
background: #fffdf8;
|
||||
background: #fbfdff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 25px #24231f12;
|
||||
}
|
||||
@@ -2349,7 +2349,7 @@ button {
|
||||
}
|
||||
.header-dropdown a:hover,
|
||||
.header-dropdown a[aria-current="page"] {
|
||||
background: #eeeee6;
|
||||
background: #edf3f7;
|
||||
color: var(--studio-blue);
|
||||
}
|
||||
.primary-links .header-resume {
|
||||
@@ -2397,25 +2397,25 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
/* Hadlock palette, with soft paper surfaces and lake-blue contour lines. */
|
||||
/* Hadlock palette, with cool blue-white surfaces and lake-blue contour lines. */
|
||||
:root {
|
||||
--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--background: 40 31% 94%;
|
||||
--background: 204 44% 97%;
|
||||
--foreground: 205 34% 16%;
|
||||
--card: 48 100% 99%;
|
||||
--card: 205 45% 99%;
|
||||
--card-foreground: 205 34% 16%;
|
||||
--primary: 196 100% 31%;
|
||||
--ring: 196 100% 31%;
|
||||
--muted-foreground: 207 10% 40%;
|
||||
--studio-blue: #0076a0;
|
||||
--studio-muted: #616a6e;
|
||||
--studio-rule: #d9d3c6;
|
||||
--studio-rule: #d6e1e7;
|
||||
--studio-ink: #173441;
|
||||
}
|
||||
body {
|
||||
background:
|
||||
radial-gradient(ellipse at 95% 5%, #dce8e7 0, transparent 38rem),
|
||||
radial-gradient(ellipse at 0 65%, #e9e4d5 0, transparent 40rem), #f4f1ea;
|
||||
radial-gradient(ellipse at 95% 5%, #e4f2f7 0, transparent 38rem),
|
||||
radial-gradient(ellipse at 0 65%, #edf4f8 0, transparent 40rem), #f6f9fc;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
::selection {
|
||||
@@ -2423,8 +2423,8 @@ body {
|
||||
color: #163542;
|
||||
}
|
||||
.site-header {
|
||||
background: #f4f1eaed;
|
||||
border-color: #d9d3c680;
|
||||
background: #f6f9fcf0;
|
||||
border-color: #d6e1e780;
|
||||
}
|
||||
.wordmark-name {
|
||||
font-weight: 600;
|
||||
@@ -2434,7 +2434,7 @@ body {
|
||||
font-size: 14px;
|
||||
}
|
||||
.header-dropdown {
|
||||
background: #fffefa;
|
||||
background: #fbfdff;
|
||||
box-shadow: 0 14px 40px #17344116;
|
||||
}
|
||||
.header-dropdown a:hover,
|
||||
@@ -2458,10 +2458,10 @@ body {
|
||||
margin-bottom: 44px;
|
||||
border: 1px solid #245565;
|
||||
border-radius: 22px;
|
||||
color: #fff8e9;
|
||||
color: #173441;
|
||||
background:
|
||||
radial-gradient(ellipse at 100% 110%, #0076a073, transparent 65%),
|
||||
linear-gradient(115deg, #102e3c, #1c4b5b);
|
||||
radial-gradient(ellipse at 100% 110%, #8dc4d1aa, transparent 65%),
|
||||
linear-gradient(115deg, #e9f3f1, #cce5e9);
|
||||
box-shadow:
|
||||
0 14px 40px #1734410c,
|
||||
inset 0 1px 0 #ffffff10;
|
||||
@@ -2481,7 +2481,7 @@ body {
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
.studio-intro .intro-topline {
|
||||
color: #c0d4d7;
|
||||
color: #496f7b;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -2492,43 +2492,43 @@ body {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.studio-intro h1 {
|
||||
color: #fff8e9;
|
||||
color: #143744;
|
||||
font-size: clamp(54px, 6vw, 84px);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.04em;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.studio-intro h1 span {
|
||||
color: #91c2ce;
|
||||
color: #0076a0;
|
||||
}
|
||||
.studio-intro .intro-statement {
|
||||
color: #fff8e9;
|
||||
color: #173b49;
|
||||
font-size: 23px;
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
.studio-intro .intro-statement a {
|
||||
color: #b3dfe7;
|
||||
text-decoration-color: #8bbacb65;
|
||||
color: #006c90;
|
||||
text-decoration-color: #0076a080;
|
||||
}
|
||||
.studio-intro .intro-detail {
|
||||
color: #c0d1d6;
|
||||
color: #42606a;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
max-width: 590px;
|
||||
}
|
||||
.studio-intro .intro-links {
|
||||
color: #fff8e9;
|
||||
color: #173b49;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.studio-intro .intro-links a {
|
||||
font-size: 13px;
|
||||
}
|
||||
.studio-intro .intro-links a:first-child {
|
||||
border: 1px solid #b9d4d45c;
|
||||
border: 1px solid #47879b75;
|
||||
border-radius: 5px;
|
||||
padding: 9px 13px;
|
||||
background: #ffffff09;
|
||||
background: #ffffff66;
|
||||
}
|
||||
.studio-intro .intro-portrait {
|
||||
transform: none;
|
||||
@@ -2559,9 +2559,9 @@ body {
|
||||
font-size: 11px;
|
||||
}
|
||||
.studio-grid > article {
|
||||
background: #fffefa;
|
||||
background: #fbfdff;
|
||||
padding: 12px 12px 20px;
|
||||
border: 1px solid #d9d3c6;
|
||||
border: 1px solid #d6e1e7;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px #17344104;
|
||||
}
|
||||
@@ -2595,8 +2595,8 @@ body {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.corner-card {
|
||||
background: #fffefa;
|
||||
border: 1px solid #d9d3c6;
|
||||
background: #fbfdff;
|
||||
border: 1px solid #d6e1e7;
|
||||
box-shadow: 0 5px 16px #17344106;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -2730,13 +2730,14 @@ body {
|
||||
width: 100vw;
|
||||
z-index: -2;
|
||||
background:
|
||||
radial-gradient(ellipse at 100% 110%, #0076a073, transparent 65%),
|
||||
linear-gradient(115deg, #102e3c, #1c4b5b);
|
||||
radial-gradient(ellipse at 100% 110%, #8dc4d1aa, transparent 65%),
|
||||
linear-gradient(115deg, #e9f3f1, #cce5e9);
|
||||
}
|
||||
.studio-intro > .contour-lines {
|
||||
left: calc((100% - 100vw) / 2);
|
||||
width: 100vw;
|
||||
}
|
||||
.studio-intro > .contour-lines path { stroke: #468ca0; }
|
||||
@media (max-width: 700px) {
|
||||
.studio-home .studio-intro {
|
||||
padding: 30px 0 36px;
|
||||
@@ -2995,7 +2996,7 @@ body {
|
||||
position: fixed;
|
||||
inset: 64px 0 0;
|
||||
z-index: 40;
|
||||
background: linear-gradient(180deg, #f4f1ea10, #f4f1ea8c 70%);
|
||||
background: linear-gradient(180deg, #f6f9fc10, #f6f9fc8c 70%);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
|
||||
@@ -3106,7 +3107,7 @@ body {
|
||||
padding: 28px 30px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 14px;
|
||||
background: #fffefa;
|
||||
background: #fbfdff;
|
||||
}
|
||||
.media-story-top { color: #54717c; }
|
||||
.media-story-top svg { flex-shrink: 0; }
|
||||
@@ -3144,7 +3145,7 @@ body {
|
||||
padding: 30px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 14px;
|
||||
background: #fffefa;
|
||||
background: #fbfdff;
|
||||
}
|
||||
.writing-page .writing-entry:first-child {
|
||||
position: relative;
|
||||
@@ -3211,7 +3212,7 @@ body {
|
||||
padding: 13px;
|
||||
border: 1px solid var(--studio-rule);
|
||||
border-radius: 12px;
|
||||
background: #fffefa;
|
||||
background: #fbfdff;
|
||||
}
|
||||
.portfolio-page .project-tools label { position: relative; min-width: 260px; }
|
||||
.portfolio-page .project-tools label > svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #67808a; }
|
||||
@@ -3226,7 +3227,7 @@ body {
|
||||
.portfolio-page .archive-card--featured {
|
||||
padding: 12px;
|
||||
border-radius: 16px;
|
||||
background: #fffefa;
|
||||
background: #fbfdff;
|
||||
box-shadow: 0 6px 18px #17344108;
|
||||
}
|
||||
.archive-card--featured .archive-image { border-radius: 9px; aspect-ratio: 1.62; }
|
||||
@@ -3338,6 +3339,18 @@ body {
|
||||
.header-dropdown a:hover, .header-dropdown a[aria-current="page"] { background: #294451; color: var(--studio-blue); }
|
||||
.mobile-menu-backdrop { background: linear-gradient(180deg, #10263010, #102630b8 70%); }
|
||||
|
||||
.studio-home .studio-intro { color: #fff8e9; }
|
||||
.studio-home .studio-intro::before {
|
||||
background: radial-gradient(ellipse at 100% 110%, #0076a073, transparent 65%), linear-gradient(115deg, #102e3c, #1c4b5b);
|
||||
}
|
||||
.studio-intro > .contour-lines path { stroke: #92b8bc; }
|
||||
.studio-intro .intro-topline { color: #c0d4d7; }
|
||||
.studio-intro h1, .studio-intro .intro-statement, .studio-intro .intro-links { color: #fff8e9; }
|
||||
.studio-intro h1 span { color: #91c2ce; }
|
||||
.studio-intro .intro-statement a { color: #b3dfe7; text-decoration-color: #8bbacb65; }
|
||||
.studio-intro .intro-detail { color: #c0d1d6; }
|
||||
.studio-intro .intro-links a:first-child { border-color: #b9d4d45c; background: #ffffff09; }
|
||||
|
||||
.studio-grid > article, .studio-hadlock, .media-story,
|
||||
.writing-page .writing-entry:not(:first-child),
|
||||
.portfolio-page .project-tools, .portfolio-page .archive-card--featured,
|
||||
|
||||
Reference in New Issue
Block a user