575 lines
12 KiB
CSS
575 lines
12 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-cerulean-50: #e5f9ff;
|
|
--color-cerulean-100: #ccf3ff;
|
|
--color-cerulean-200: #99e7ff;
|
|
--color-cerulean-300: #66dbff;
|
|
--color-cerulean-400: #33cfff;
|
|
--color-cerulean-500: #00c3ff;
|
|
--color-cerulean-600: #009ccc;
|
|
--color-cerulean-700: #007599;
|
|
--color-cerulean-800: #004e66;
|
|
--color-cerulean-900: #002733;
|
|
--color-cerulean-950: #001b24;
|
|
|
|
--color-tropical-teal-50: #e5feff;
|
|
--color-tropical-teal-100: #ccfcff;
|
|
--color-tropical-teal-200: #99faff;
|
|
--color-tropical-teal-300: #66f7ff;
|
|
--color-tropical-teal-400: #33f5ff;
|
|
--color-tropical-teal-500: #00f2ff;
|
|
--color-tropical-teal-600: #00c2cc;
|
|
--color-tropical-teal-700: #009199;
|
|
--color-tropical-teal-800: #006166;
|
|
--color-tropical-teal-900: #003033;
|
|
--color-tropical-teal-950: #002224;
|
|
|
|
--color-light-yellow-50: #fefde7;
|
|
--color-light-yellow-100: #fcfbcf;
|
|
--color-light-yellow-200: #f9f69f;
|
|
--color-light-yellow-300: #f7f26e;
|
|
--color-light-yellow-400: #f4ee3e;
|
|
--color-light-yellow-500: #f1e90e;
|
|
--color-light-yellow-600: #c1bb0b;
|
|
--color-light-yellow-700: #918c08;
|
|
--color-light-yellow-800: #605d06;
|
|
--color-light-yellow-900: #302f03;
|
|
--color-light-yellow-950: #222102;
|
|
|
|
--color-soft-apricot-50: #fff2e6;
|
|
--color-soft-apricot-100: #fee5cd;
|
|
--color-soft-apricot-200: #fdca9b;
|
|
--color-soft-apricot-300: #fdb068;
|
|
--color-soft-apricot-400: #fc9636;
|
|
--color-soft-apricot-500: #fb7b04;
|
|
--color-soft-apricot-600: #c96303;
|
|
--color-soft-apricot-700: #974a02;
|
|
--color-soft-apricot-800: #643102;
|
|
--color-soft-apricot-900: #321901;
|
|
--color-soft-apricot-950: #231101;
|
|
|
|
--color-vibrant-coral-50: #fde9e8;
|
|
--color-vibrant-coral-100: #fad3d1;
|
|
--color-vibrant-coral-200: #f6a8a2;
|
|
--color-vibrant-coral-300: #f17c74;
|
|
--color-vibrant-coral-400: #ed5145;
|
|
--color-vibrant-coral-500: #e82517;
|
|
--color-vibrant-coral-600: #ba1e12;
|
|
--color-vibrant-coral-700: #8b160e;
|
|
--color-vibrant-coral-800: #5d0f09;
|
|
--color-vibrant-coral-900: #2e0705;
|
|
--color-vibrant-coral-950: #200503;
|
|
|
|
--color-bg: #fefde7;
|
|
--color-surface: #fcfbcf;
|
|
--color-surface-alt: #f9f69f;
|
|
--color-fury-white: #fefde7;
|
|
--color-fury-ice: #fcfbcf;
|
|
--color-fury-blue: #f9f69f;
|
|
--color-fury-glow: #fdb068;
|
|
--color-fury-cyan: #e82517;
|
|
--color-fury-aqua: #ed5145;
|
|
--color-fury-violet: #fb7b04;
|
|
--color-text: #000000;
|
|
--color-text-soft: #555555;
|
|
--color-text-muted: #888888;
|
|
--color-border: #fee5cd;
|
|
--color-ring: #ed5145;
|
|
--color-shadow: rgba(232, 37, 23, 0.12);
|
|
--color-success: #00f2ff;
|
|
--color-warning: #f4ee3e;
|
|
--color-danger: #e82517;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--color-bg: #130d08;
|
|
--color-surface: #24170d;
|
|
--color-surface-alt: #34210f;
|
|
--color-fury-white: #18100a;
|
|
--color-fury-ice: #24170d;
|
|
--color-fury-blue: #34210f;
|
|
--color-fury-glow: #a86224;
|
|
--color-fury-cyan: #ff6a5f;
|
|
--color-fury-aqua: #ff8d84;
|
|
--color-fury-violet: #ffac4d;
|
|
--color-text: #fdb068;
|
|
--color-text-soft: #fff2e6;
|
|
--color-text-muted: #fee5cd;
|
|
--color-border: #68401f;
|
|
--color-ring: #ff8d84;
|
|
--color-shadow: rgba(255, 106, 95, 0.18);
|
|
--color-success: #58f0f5;
|
|
--color-warning: #f4ee3e;
|
|
--color-danger: #ff6a5f;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
color-scheme: light;
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Text Local";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url("/fonts/SF-Pro-Text-Regular.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Text Local";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: url("/fonts/SF-Pro-Text-Medium.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Text Local";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url("/fonts/SF-Pro-Text-Semibold.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Text Local";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url("/fonts/SF-Pro-Text-Bold.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Text Local";
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url("/fonts/SF-Pro-Text-Heavy.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Text Local";
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
src: url("/fonts/SF-Pro-Text-Black.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Rounded Local";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url("/fonts/SF-Pro-Rounded-Regular.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Rounded Local";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url("/fonts/SF-Pro-Rounded-Semibold.otf") format("opentype");
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: "SF Pro Rounded Local";
|
|
font-style: normal;
|
|
font-weight: 700 900;
|
|
src: url("/fonts/SF-Pro-Rounded-Black.otf") format("opentype");
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
background: var(--color-bg);
|
|
font-family:
|
|
"SF Pro Rounded Local", "SF Pro Rounded", "SF Pro Text Local",
|
|
"SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
|
|
ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family:
|
|
"SF Pro Text Local", "SF Pro Text", -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
.pixel-mountains {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.pixel-mountains canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
image-rendering: pixelated;
|
|
object-fit: cover;
|
|
object-position: center bottom;
|
|
transition: opacity 420ms ease;
|
|
}
|
|
|
|
.pixel-mountains-previous {
|
|
animation: pixelMountainsFadeOut 420ms ease forwards;
|
|
z-index: 1;
|
|
}
|
|
|
|
.pixel-mountains-active {
|
|
z-index: 0;
|
|
}
|
|
|
|
.pixel-sky {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.pixel-sun,
|
|
.pixel-moon {
|
|
position: absolute;
|
|
display: block;
|
|
image-rendering: pixelated;
|
|
transform: translate(-50%, -50%);
|
|
will-change: left, opacity, top, transform;
|
|
}
|
|
|
|
.pixel-sun {
|
|
left: 78%;
|
|
top: 18%;
|
|
width: 96px;
|
|
height: 96px;
|
|
background: var(--color-fury-glow);
|
|
clip-path: polygon(
|
|
33.333% 0,
|
|
66.666% 0,
|
|
66.666% 8.333%,
|
|
83.333% 8.333%,
|
|
83.333% 16.666%,
|
|
91.666% 16.666%,
|
|
91.666% 33.333%,
|
|
100% 33.333%,
|
|
100% 66.666%,
|
|
91.666% 66.666%,
|
|
91.666% 83.333%,
|
|
83.333% 83.333%,
|
|
83.333% 91.666%,
|
|
66.666% 91.666%,
|
|
66.666% 100%,
|
|
33.333% 100%,
|
|
33.333% 91.666%,
|
|
16.666% 91.666%,
|
|
16.666% 83.333%,
|
|
8.333% 83.333%,
|
|
8.333% 66.666%,
|
|
0 66.666%,
|
|
0 33.333%,
|
|
8.333% 33.333%,
|
|
8.333% 16.666%,
|
|
16.666% 16.666%,
|
|
16.666% 8.333%,
|
|
33.333% 8.333%
|
|
);
|
|
box-shadow:
|
|
0 -40px 0 -32px var(--color-fury-glow),
|
|
0 40px 0 -32px var(--color-fury-glow),
|
|
-40px 0 0 -32px var(--color-fury-glow),
|
|
40px 0 0 -32px var(--color-fury-glow),
|
|
32px 32px 0 -34px var(--color-fury-violet),
|
|
-32px 32px 0 -34px var(--color-fury-violet),
|
|
32px -32px 0 -34px var(--color-fury-violet),
|
|
-32px -32px 0 -34px var(--color-fury-violet),
|
|
inset -12px -12px 0 0 var(--color-soft-apricot-300);
|
|
}
|
|
|
|
.pixel-sun::after {
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 20px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--color-soft-apricot-50);
|
|
clip-path: polygon(0 0, 100% 0, 100% 66.666%, 66.666% 66.666%, 66.666% 100%, 0 100%);
|
|
content: "";
|
|
}
|
|
|
|
.pixel-moon {
|
|
left: 78%;
|
|
top: 18%;
|
|
width: 88px;
|
|
height: 88px;
|
|
background: var(--color-soft-apricot-50);
|
|
clip-path: polygon(
|
|
36.363% 0,
|
|
72.727% 0,
|
|
72.727% 9.09%,
|
|
90.909% 9.09%,
|
|
90.909% 27.272%,
|
|
100% 27.272%,
|
|
100% 72.727%,
|
|
90.909% 72.727%,
|
|
90.909% 90.909%,
|
|
72.727% 90.909%,
|
|
72.727% 100%,
|
|
36.363% 100%,
|
|
36.363% 90.909%,
|
|
18.181% 90.909%,
|
|
18.181% 72.727%,
|
|
0 72.727%,
|
|
0 27.272%,
|
|
18.181% 27.272%,
|
|
18.181% 9.09%,
|
|
36.363% 9.09%
|
|
);
|
|
box-shadow:
|
|
inset -8px -8px 0 0 var(--color-soft-apricot-100),
|
|
24px 20px 0 -18px var(--color-soft-apricot-100);
|
|
}
|
|
|
|
.pixel-moon::after {
|
|
position: absolute;
|
|
left: 34px;
|
|
top: -10px;
|
|
width: 82px;
|
|
height: 82px;
|
|
background: var(--color-bg);
|
|
clip-path: polygon(
|
|
36.363% 0,
|
|
72.727% 0,
|
|
72.727% 9.09%,
|
|
90.909% 9.09%,
|
|
90.909% 27.272%,
|
|
100% 27.272%,
|
|
100% 72.727%,
|
|
90.909% 72.727%,
|
|
90.909% 90.909%,
|
|
72.727% 90.909%,
|
|
72.727% 100%,
|
|
36.363% 100%,
|
|
36.363% 90.909%,
|
|
18.181% 90.909%,
|
|
18.181% 72.727%,
|
|
0 72.727%,
|
|
0 27.272%,
|
|
18.181% 27.272%,
|
|
18.181% 9.09%,
|
|
36.363% 9.09%
|
|
);
|
|
content: "";
|
|
}
|
|
|
|
.pixel-star {
|
|
position: absolute;
|
|
display: block;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--color-soft-apricot-100);
|
|
box-shadow: 8px 0 0 -2px var(--color-fury-glow), 0 8px 0 -2px var(--color-fury-glow);
|
|
}
|
|
|
|
.pixel-star-a {
|
|
right: -68px;
|
|
top: -32px;
|
|
}
|
|
|
|
.pixel-star-b {
|
|
left: -92px;
|
|
top: 22px;
|
|
}
|
|
|
|
.pixel-star-c {
|
|
right: -116px;
|
|
top: 54px;
|
|
}
|
|
|
|
.pixel-sky-light .pixel-sun,
|
|
.pixel-sky-dark .pixel-moon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pixel-sky-light .pixel-moon,
|
|
.pixel-sky-dark .pixel-sun {
|
|
opacity: 0;
|
|
}
|
|
|
|
.pixel-sky-light-to-dark .pixel-sun {
|
|
animation: celestialPathExit 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
|
|
left: 0;
|
|
offset-anchor: center;
|
|
offset-path: var(--celestial-exit-path);
|
|
offset-rotate: 0deg;
|
|
top: 0;
|
|
transform: none;
|
|
}
|
|
|
|
.pixel-sky-light-to-dark .pixel-moon {
|
|
animation: celestialPathEnter 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
left: 0;
|
|
offset-anchor: center;
|
|
offset-path: var(--celestial-enter-path);
|
|
offset-rotate: 0deg;
|
|
top: 0;
|
|
transform: none;
|
|
}
|
|
|
|
.pixel-sky-dark-to-light .pixel-moon {
|
|
animation: celestialPathExit 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
|
|
left: 0;
|
|
offset-anchor: center;
|
|
offset-path: var(--celestial-exit-path);
|
|
offset-rotate: 0deg;
|
|
top: 0;
|
|
transform: none;
|
|
}
|
|
|
|
.pixel-sky-dark-to-light .pixel-sun {
|
|
animation: celestialPathEnter 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
left: 0;
|
|
offset-anchor: center;
|
|
offset-path: var(--celestial-enter-path);
|
|
offset-rotate: 0deg;
|
|
top: 0;
|
|
transform: none;
|
|
}
|
|
|
|
:root[data-theme="dark"] .pixel-mountains {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tree {
|
|
width: min(100%, 500px);
|
|
height: auto;
|
|
display: block;
|
|
background: var(--color-fury-white);
|
|
border: 3px solid var(--color-border);
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
box-shadow:
|
|
0 4px 24px rgba(253, 202, 155, 0.35),
|
|
0 1px 3px rgba(50, 25, 1, 0.08);
|
|
}
|
|
|
|
:root[data-theme="dark"] .apricot-button-text {
|
|
color: #fff2e6;
|
|
}
|
|
|
|
:root[data-theme="dark"] .tree {
|
|
filter: brightness(0.78) sepia(0.18) saturate(0.92);
|
|
box-shadow:
|
|
0 4px 24px rgba(255, 106, 95, 0.14),
|
|
0 1px 3px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.theme-toggle-mover-arc {
|
|
animation: themeToggleArc 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
}
|
|
|
|
:root.theme-transition,
|
|
:root.theme-transition *,
|
|
:root.theme-transition *::before,
|
|
:root.theme-transition *::after {
|
|
transition-duration: 420ms;
|
|
transition-property: background-color, border-color, box-shadow, color, fill, opacity, stroke, text-decoration-color;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
.falling-leaves {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.location-signal-map .leaflet-pane,
|
|
.location-signal-map .leaflet-top,
|
|
.location-signal-map .leaflet-bottom {
|
|
z-index: 0;
|
|
}
|
|
|
|
.location-signal-map .leaflet-control {
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes scrollPulse {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
35% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(250%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pixelMountainsFadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes themeToggleArc {
|
|
0% {
|
|
transform: translate3d(var(--from-x), var(--from-y), 0);
|
|
}
|
|
|
|
50% {
|
|
transform: translate3d(var(--mid-x), var(--mid-y), 0);
|
|
}
|
|
|
|
100% {
|
|
transform: translate3d(var(--to-x), var(--to-y), 0);
|
|
}
|
|
}
|
|
|
|
@keyframes celestialPathExit {
|
|
0% {
|
|
offset-distance: 0%;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
offset-distance: 100%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes celestialPathEnter {
|
|
0% {
|
|
offset-distance: 0%;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
offset-distance: 100%;
|
|
opacity: 1;
|
|
}
|
|
}
|