242 lines
7.1 KiB
CSS
242 lines
7.1 KiB
CSS
@import url("https://assets.projectcvsa.com/hm-sans/index.css");
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--md-sys-color-background: #fff8f6;
|
|
--md-sys-color-on-background: #2a1613;
|
|
--md-sys-color-surface: #fff8f6;
|
|
--md-sys-color-surface-dim: #f7d2cc;
|
|
--md-sys-color-surface-bright: #fff8f6;
|
|
--md-sys-color-surface-container-lowest: #ffffff;
|
|
--md-sys-color-surface-container-low: #fff0ee;
|
|
--md-sys-color-surface-container: #ffe9e6;
|
|
--md-sys-color-surface-container-high: #ffe2dd;
|
|
--md-sys-color-surface-container-highest: #ffdad4;
|
|
--md-sys-color-on-surface: #2a1613;
|
|
--md-sys-color-surface-variant: #ffdad4;
|
|
--md-sys-color-on-surface-variant: #5f3e39;
|
|
--md-sys-color-inverse-surface: #422b27;
|
|
--md-sys-color-inverse-on-surface: #ffedea;
|
|
--md-sys-color-outline: #946e68;
|
|
--md-sys-color-outline-variant: #eabcb4;
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
--md-sys-color-surface-tint: #c00100;
|
|
--md-sys-color-primary: #ee0000;
|
|
--md-sys-color-on-primary: #ffffff;
|
|
--md-sys-color-primary-container: #ee0000;
|
|
--md-sys-color-on-primary-container: #ffffff;
|
|
--md-sys-color-inverse-primary: #ffb4a8;
|
|
--md-sys-color-secondary: #b4271a;
|
|
--md-sys-color-on-secondary: #ffffff;
|
|
--md-sys-color-secondary-container: #ff7460;
|
|
--md-sys-color-on-secondary-container: #2f0000;
|
|
--md-sys-color-tertiary: #6f4800;
|
|
--md-sys-color-on-tertiary: #ffffff;
|
|
--md-sys-color-tertiary-container: #9f6900;
|
|
--md-sys-color-on-tertiary-container: #ffffff;
|
|
--md-sys-color-error: #ba1a1a;
|
|
--md-sys-color-on-error: #ffffff;
|
|
--md-sys-color-error-container: #ffdad6;
|
|
--md-sys-color-on-error-container: #410002;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--md-sys-color-background: #fff8f6;
|
|
--md-sys-color-on-background: #2a1613;
|
|
--md-sys-color-surface: #fff8f6;
|
|
--md-sys-color-surface-dim: #f7d2cc;
|
|
--md-sys-color-surface-bright: #fff8f6;
|
|
--md-sys-color-surface-container-lowest: #ffffff;
|
|
--md-sys-color-surface-container-low: #fff0ee;
|
|
--md-sys-color-surface-container: #ffe9e6;
|
|
--md-sys-color-surface-container-high: #ffe2dd;
|
|
--md-sys-color-surface-container-highest: #ffdad4;
|
|
--md-sys-color-on-surface: #2a1613;
|
|
--md-sys-color-surface-variant: #ffdad4;
|
|
--md-sys-color-on-surface-variant: #5f3e39;
|
|
--md-sys-color-inverse-surface: #422b27;
|
|
--md-sys-color-inverse-on-surface: #ffedea;
|
|
--md-sys-color-outline: #946e68;
|
|
--md-sys-color-outline-variant: #eabcb4;
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
--md-sys-color-surface-tint: #c00100;
|
|
--md-sys-color-primary: #ee0000;
|
|
--md-sys-color-on-primary: #ffffff;
|
|
--md-sys-color-primary-container: #ee0000;
|
|
--md-sys-color-on-primary-container: #ffffff;
|
|
--md-sys-color-inverse-primary: #ffb4a8;
|
|
--md-sys-color-secondary: #b4271a;
|
|
--md-sys-color-on-secondary: #ffffff;
|
|
--md-sys-color-secondary-container: #ff7460;
|
|
--md-sys-color-on-secondary-container: #2f0000;
|
|
--md-sys-color-tertiary: #6f4800;
|
|
--md-sys-color-on-tertiary: #ffffff;
|
|
--md-sys-color-tertiary-container: #9f6900;
|
|
--md-sys-color-on-tertiary-container: #ffffff;
|
|
--md-sys-color-error: #ba1a1a;
|
|
--md-sys-color-on-error: #ffffff;
|
|
--md-sys-color-error-container: #ffdad6;
|
|
--md-sys-color-on-error-container: #410002;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--md-sys-color-background: #210e0b;
|
|
--md-sys-color-on-background: #ffdad4;
|
|
--md-sys-color-surface: #210e0b;
|
|
--md-sys-color-surface-dim: #210e0b;
|
|
--md-sys-color-surface-bright: #4b332f;
|
|
--md-sys-color-surface-container-lowest: #1b0907;
|
|
--md-sys-color-surface-container-low: #2a1613;
|
|
--md-sys-color-surface-container: #2f1a17;
|
|
--md-sys-color-surface-container-high: #3a2421;
|
|
--md-sys-color-surface-container-highest: #462f2b;
|
|
--md-sys-color-on-surface: #ffdad4;
|
|
--md-sys-color-surface-variant: #5f3e39;
|
|
--md-sys-color-on-surface-variant: #eabcb4;
|
|
--md-sys-color-inverse-surface: #ffdad4;
|
|
--md-sys-color-inverse-on-surface: #422b27;
|
|
--md-sys-color-outline: #b08780;
|
|
--md-sys-color-outline-variant: #5f3e39;
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
--md-sys-color-surface-tint: #ffb4a8;
|
|
--md-sys-color-primary: #ffb4a8;
|
|
--md-sys-color-on-primary: #690000;
|
|
--md-sys-color-primary-container: #de0000;
|
|
--md-sys-color-on-primary-container: #ffffff;
|
|
--md-sys-color-inverse-primary: #c00100;
|
|
--md-sys-color-secondary: #ffb4a8;
|
|
--md-sys-color-on-secondary: #690000;
|
|
--md-sys-color-secondary-container: #870100;
|
|
--md-sys-color-on-secondary-container: #ffc9c0;
|
|
--md-sys-color-tertiary: #feba54;
|
|
--md-sys-color-on-tertiary: #452b00;
|
|
--md-sys-color-tertiary-container: #966300;
|
|
--md-sys-color-on-tertiary-container: #ffffff;
|
|
--md-sys-color-error: #ffb4ab;
|
|
--md-sys-color-on-error: #690005;
|
|
--md-sys-color-error-container: #93000a;
|
|
--md-sys-color-on-error-container: #ffdad6;
|
|
}
|
|
}
|
|
|
|
.gradient-blur {
|
|
inset: auto 0 0 0;
|
|
pointer-events: none;
|
|
}
|
|
.gradient-blur > div,
|
|
.gradient-blur::before,
|
|
.gradient-blur::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
.gradient-blur::before {
|
|
content: "";
|
|
z-index: 1;
|
|
backdrop-filter: blur(0.5px);
|
|
mask: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 1) 12.5%,
|
|
rgba(0, 0, 0, 1) 25%,
|
|
rgba(0, 0, 0, 0) 37.5%
|
|
);
|
|
}
|
|
.gradient-blur > div:nth-of-type(1) {
|
|
z-index: 2;
|
|
backdrop-filter: blur(1px);
|
|
mask: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 12.5%,
|
|
rgba(0, 0, 0, 1) 25%,
|
|
rgba(0, 0, 0, 1) 37.5%,
|
|
rgba(0, 0, 0, 0) 50%
|
|
);
|
|
}
|
|
.gradient-blur > div:nth-of-type(2) {
|
|
z-index: 3;
|
|
backdrop-filter: blur(2px);
|
|
mask: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 25%,
|
|
rgba(0, 0, 0, 1) 37.5%,
|
|
rgba(0, 0, 0, 1) 50%,
|
|
rgba(0, 0, 0, 0) 62.5%
|
|
);
|
|
}
|
|
.gradient-blur > div:nth-of-type(3) {
|
|
z-index: 4;
|
|
backdrop-filter: blur(4px);
|
|
mask: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 37.5%,
|
|
rgba(0, 0, 0, 1) 50%,
|
|
rgba(0, 0, 0, 1) 62.5%,
|
|
rgba(0, 0, 0, 0) 75%
|
|
);
|
|
}
|
|
.gradient-blur > div:nth-of-type(4) {
|
|
z-index: 5;
|
|
backdrop-filter: blur(8px);
|
|
mask: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 50%,
|
|
rgba(0, 0, 0, 1) 62.5%,
|
|
rgba(0, 0, 0, 1) 75%,
|
|
rgba(0, 0, 0, 0) 87.5%
|
|
);
|
|
}
|
|
.gradient-blur > div:nth-of-type(5) {
|
|
z-index: 6;
|
|
backdrop-filter: blur(13px);
|
|
mask: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 62.5%,
|
|
rgba(0, 0, 0, 1) 75%,
|
|
rgba(0, 0, 0, 1) 87.5%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
.gradient-blur > div:nth-of-type(6) {
|
|
z-index: 7;
|
|
backdrop-filter: blur(24px);
|
|
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%);
|
|
}
|
|
.gradient-blur::after {
|
|
content: "";
|
|
z-index: 8;
|
|
backdrop-filter: blur(48px);
|
|
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
|
|
}
|
|
|
|
a:not(.clear) {
|
|
@apply text-primary;
|
|
}
|
|
|
|
:root {
|
|
font-family: "HarmonyOS Sans SC", sans-serif;
|
|
@apply bg-surface text-on-surface;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "IPSD";
|
|
src: url("/fonts/IBMPlexSansCondDigits-Medium.woff2") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
[type="search"]::-webkit-search-cancel-button,
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|