diff --git a/src/styles/globals.css b/src/styles/globals.css index 4940d1e..ff07eb0 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -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,