diff --git a/index.html b/index.html
index eebb634..bc5d389 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,18 @@
-
+
+
+
+
dttmr
diff --git a/src/assets/base.css b/src/assets/base.css
index 1e8b264..4c4e852 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,33 +1,40 @@
-/* dttmr color palette - dark, modern, blueish */
+/* dttmr palette - field-ledger / stamped ink, cool slate ground, blue ink accent */
:root {
- --c-bg: #0a0e1a;
- --c-bg-soft: #101627;
- --c-bg-mute: #161d33;
- --c-bg-elevated: #1a2338;
+ --c-bg: #12161d;
+ --c-bg-soft: #181e27;
+ --c-bg-mute: #202632;
+ --c-bg-elevated: #262e3c;
- --c-border: rgba(120, 150, 220, 0.16);
- --c-border-hover: rgba(120, 150, 220, 0.32);
+ --c-border: rgba(74, 130, 196, 0.16);
+ --c-border-hover: rgba(74, 130, 196, 0.36);
- --c-text: #c7d0e6;
- --c-text-soft: #8892b0;
- --c-heading: #f1f4fc;
+ --c-text: #aab2c0;
+ --c-text-soft: #707a8c;
+ --c-heading: #eef1f6;
- --c-accent: #4f7dfa;
- --c-accent-soft: #3a5fd9;
- --c-accent-strong: #6c93ff;
- --c-accent-bg: rgba(79, 125, 250, 0.14);
+ --c-accent: #3d72b4;
+ --c-accent-soft: #2f5c92;
+ --c-accent-strong: #62a0e0;
+ --c-accent-bg: rgba(61, 114, 180, 0.16);
- --c-success: #34d399;
- --c-danger: #f87171;
- --c-danger-bg: rgba(248, 113, 113, 0.12);
- --c-warning: #fbbf24;
+ --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;
- --radius-sm: 8px;
- --radius-md: 12px;
- --radius-lg: 18px;
+ --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);
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
- --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
+ --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);
@@ -56,21 +63,18 @@ html {
body {
min-height: 100vh;
color: var(--c-text);
- background: radial-gradient(circle at top, #101a33 0%, var(--c-bg) 55%);
+ 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:
- Inter,
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- sans-serif;
+ font-family: var(--font-body);
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@@ -85,6 +89,12 @@ h4 {
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;
diff --git a/src/assets/main.css b/src/assets/main.css
index 445b0b2..637aa34 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -29,13 +29,14 @@
}
.btn-primary {
- background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-soft) 100%);
- color: #ffffff;
+ background-color: var(--c-accent);
+ color: var(--c-bg);
+ font-weight: 600;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
- background: linear-gradient(135deg, var(--c-accent-strong) 0%, var(--c-accent) 100%);
+ background-color: var(--c-accent-strong);
}
.btn-secondary {
@@ -52,7 +53,7 @@
.btn-danger {
background-color: transparent;
color: var(--c-danger);
- border-color: rgba(248, 113, 113, 0.35);
+ border-color: rgba(193, 97, 74, 0.4);
}
.btn-danger:hover:not(:disabled) {
@@ -113,10 +114,41 @@
.banner-error {
background-color: var(--c-danger-bg);
- border: 1px solid rgba(248, 113, 113, 0.4);
+ border: 1px solid rgba(193, 97, 74, 0.4);
color: var(--c-danger);
}
+.banner-success {
+ background-color: var(--c-success-bg);
+ border: 1px solid rgba(127, 174, 120, 0.4);
+ color: var(--c-success);
+}
+
+.mono-num {
+ font-family: var(--font-mono);
+ font-variant-numeric: tabular-nums;
+}
+
+/* Rubber-stamp badge: the app's signature mark, used for sync status. */
+.stamp {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.3rem;
+ padding: 0.15rem 0.55rem;
+ border: 1.5px solid currentColor;
+ border-radius: 999px;
+ box-shadow: 0 0 0 2px var(--c-bg) inset;
+ outline: 1px solid currentColor;
+ outline-offset: 2px;
+ transform: rotate(-3deg);
+ font-family: var(--font-stamp);
+ font-size: 0.62rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ line-height: 1.4;
+ white-space: nowrap;
+}
+
.page {
min-height: 100vh;
padding: 1rem 1rem calc(var(--nav-height) + var(--safe-bottom) + 1.5rem);
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 6bc720b..55d9d95 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,4 +1,5 @@