123 lines
2.4 KiB
CSS
123 lines
2.4 KiB
CSS
/* dttmr palette - field-ledger / stamped ink, cool slate ground, blue ink accent */
|
|
:root {
|
|
--c-bg: #12161d;
|
|
--c-bg-soft: #181e27;
|
|
--c-bg-mute: #202632;
|
|
--c-bg-elevated: #262e3c;
|
|
|
|
--c-border: rgba(74, 130, 196, 0.16);
|
|
--c-border-hover: rgba(74, 130, 196, 0.36);
|
|
|
|
--c-text: #aab2c0;
|
|
--c-text-soft: #707a8c;
|
|
--c-heading: #eef1f6;
|
|
|
|
--c-accent: #3d72b4;
|
|
--c-accent-soft: #2f5c92;
|
|
--c-accent-strong: #62a0e0;
|
|
--c-accent-bg: rgba(61, 114, 180, 0.16);
|
|
|
|
--c-success: #6ba178;
|
|
--c-success-bg: rgba(107, 161, 120, 0.14);
|
|
--c-danger: #c1614a;
|
|
--c-danger-bg: rgba(193, 97, 74, 0.14);
|
|
--c-warning: #cf9d3f;
|
|
|
|
--font-body:
|
|
'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
|
|
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
--font-stamp: 'Special Elite', var(--font-mono), monospace;
|
|
|
|
--radius-sm: 3px;
|
|
--radius-md: 5px;
|
|
--radius-lg: 8px;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
|
|
--shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
|
|
|
|
--nav-height: 60px;
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-top: env(safe-area-inset-top, 0px);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
color: var(--c-text);
|
|
background-color: var(--c-bg);
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
to bottom,
|
|
rgba(74, 130, 196, 0.06) 0,
|
|
rgba(74, 130, 196, 0.06) 1px,
|
|
transparent 1px,
|
|
transparent 28px
|
|
),
|
|
radial-gradient(circle at 50% -10%, rgba(74, 130, 196, 0.08), transparent 55%);
|
|
line-height: 1.55;
|
|
font-family: var(--font-body);
|
|
font-size: 15px;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
color: var(--c-heading);
|
|
font-weight: 600;
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
a {
|
|
color: var(--c-accent-strong);
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: inherit;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--c-accent-bg);
|
|
}
|
|
|
|
/* scrollbars */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--c-border-hover) transparent;
|
|
}
|