[OCaml] High Intensity Training Online
style Rename oxblood token to blood and warm the paper
Rename the --oxblood* custom properties to --blood* across the stylesheet: the name no longer matched the colour. Retune the value from the dark brownish #880808 to a truer arterial red (#a4161a light, #f0483b dark), tracking --focus and --error which shared the old hex. Warm the light-theme paper surfaces (--paper #f7f1e6, --paper-raised #fdf9f0) for a paper/cream register. Black-on-cream stays about 18:1, well above AAA, so optical contrast is unchanged. Dark theme untouched.
lib/web/assets/hito.css
@@ -3,30 +3,30 @@
3
3
:root {
4
4
color-scheme: light;
5
5
/* Uncompromising legibility: pure black text on a very slightly warm white.
6
Removed:
The palette stays warm throughout. An oxblood primary and a warm bronze
6
Added:
The palette stays warm throughout. A blood primary and a warm bronze
7
7
secondary carry the blood-and-effort register. Evergreen is reserved for
8
8
success. Contrast constrains the warmth. The warmth never constrains
9
9
contrast. */
10
Removed:
--paper: #fdfcfa;
11
Removed:
--paper-raised: #ffffff;
10
Added:
--paper: #f7f1e6;
11
Added:
--paper-raised: #fdf9f0;
12
12
--on-primary: #ffffff;
13
13
--on-brass: #ffffff;
14
14
--ink: #000000;
15
15
--muted-ink: #3f3f3f;
16
16
--rule: #c9c6c0;
17
17
--rule-strong: #6f6c66;
18
Removed:
--oxblood: #880808;
19
Removed:
--oxblood-dark: #6a0606;
20
Removed:
--oxblood-hover: #6a0606;
21
Removed:
--link-hover: #6a0606;
18
Added:
--blood: #a4161a;
19
Added:
--blood-dark: #7d1113;
20
Added:
--blood-hover: #7d1113;
21
Added:
--link-hover: #7d1113;
22
22
--brass: #8a5a12;
23
23
--brass-wash: #f3e6c8;
24
24
--hover-surface: #eeeae3;
25
25
--disabled-surface: #ddd9d1;
26
26
--evergreen: #1f5b45;
27
27
--evergreen-wash: #dcebe2;
28
Removed:
--focus: #880808;
29
Removed:
--error: #880808;
28
Added:
--focus: #a4161a;
29
Added:
--error: #a4161a;
30
30
--font-size-small: 0.75rem;
31
31
--font-size-base: 1rem;
32
32
--font-size-lead: 1.155rem;
@@ -50,7 +50,7 @@
50
50
html[data-theme="dark"] {
51
51
color-scheme: dark;
52
52
/* The dark inversion of the same warm system: near-white text on a warm
53
Removed:
near-black. The oxblood primary and a warm amber secondary are lightened
53
Added:
near-black. The blood primary and a warm amber secondary are lightened
54
54
for AA+ contrast on the dark surface. */
55
55
--paper: #141312;
56
56
--paper-raised: #201e1b;
@@ -60,9 +60,9 @@
60
60
--muted-ink: #c6bfb4;
61
61
--rule: #5f584f;
62
62
--rule-strong: #938a7c;
63
Removed:
--oxblood: #e14b3d;
64
Removed:
--oxblood-dark: #f5897b;
65
Removed:
--oxblood-hover: #c23a2e;
63
Added:
--blood: #f0483b;
64
Added:
--blood-dark: #f88379;
65
Added:
--blood-hover: #d13a2e;
66
66
--link-hover: #e0b256;
67
67
--brass: #e0b256;
68
68
--brass-wash: #3a2c12;
@@ -70,8 +70,8 @@
70
70
--disabled-surface: #423d36;
71
71
--evergreen: #74c49a;
72
72
--evergreen-wash: #17362a;
73
Removed:
--focus: #e14b3d;
74
Removed:
--error: #f5897b;
73
Added:
--focus: #f0483b;
74
Added:
--error: #f88379;
75
75
}
76
76
77
77
@@ -87,7 +87,7 @@
87
87
}
88
88
89
89
a {
90
Removed:
color: var(--oxblood-dark);
90
Added:
color: var(--blood-dark);
91
91
font-weight: 600;
92
92
text-decoration-thickness: 0.1em;
93
93
text-underline-offset: 0.16em;
@@ -117,14 +117,14 @@
117
117
padding: 0 1rem 2.5rem;
118
118
}
119
119
120
Removed:
/* The oxblood bar is the header's base edge and the brand marker. It belongs
120
Added:
/* The blood bar is the header's base edge and the brand marker. It belongs
121
121
to the masthead, not to the content. */
122
122
.masthead {
123
123
display: flex;
124
124
align-items: center;
125
125
gap: 1rem;
126
126
padding: 0.75rem 0;
127
Removed:
border-bottom: 6px solid var(--oxblood);
127
Added:
border-bottom: 6px solid var(--blood);
128
128
}
129
129
130
130
/* The footer is a flat divider: a quiet line of text separated by a hairline
@@ -171,13 +171,13 @@
171
171
text-decoration: none;
172
172
}
173
173
.profile:hover {
174
Removed:
color: var(--oxblood-dark);
174
Added:
color: var(--blood-dark);
175
175
background: var(--hover-surface);
176
176
}
177
177
.profile[aria-current] {
178
178
color: var(--on-primary);
179
Removed:
background: var(--oxblood);
180
Removed:
border-color: var(--oxblood-dark);
179
Added:
background: var(--blood);
180
Added:
border-color: var(--blood-dark);
181
181
}
182
182
183
183
.eyebrow {
@@ -185,7 +185,7 @@
185
185
letter-spacing: 0.09em;
186
186
text-transform: uppercase;
187
187
}
188
Removed:
.eyebrow { color: var(--oxblood-dark); }
188
Added:
.eyebrow { color: var(--blood-dark); }
189
189
190
190
.primary-nav {
191
191
display: flex;
@@ -207,7 +207,7 @@
207
207
208
208
.primary-nav > a:hover {
209
209
background: var(--hover-surface);
210
Removed:
color: var(--oxblood-dark);
210
Added:
color: var(--blood-dark);
211
211
}
212
212
213
213
/* The current page's navigation link fills solid. The inline navigation serves
@@ -222,7 +222,7 @@
222
222
.page-workout .bottom-nav > a[href="/workout"],
223
223
.page-logbook .bottom-nav > a[href="/logbook"] {
224
224
color: var(--on-primary);
225
Removed:
background: var(--oxblood);
225
Added:
background: var(--blood);
226
226
}
227
227
228
228
.primary-nav > a[aria-current] {
@@ -282,12 +282,12 @@
282
282
transition: background-color 150ms ease, color 150ms ease;
283
283
}
284
284
.profile-menu-item:hover {
285
Removed:
color: var(--oxblood-dark);
285
Added:
color: var(--blood-dark);
286
286
background: var(--hover-surface);
287
287
}
288
288
.profile-menu-item[aria-current] {
289
289
color: var(--on-primary);
290
Removed:
background: var(--oxblood);
290
Added:
background: var(--blood);
291
291
}
292
292
.profile-menu .logout {
293
293
margin: 0;
@@ -300,7 +300,7 @@
300
300
.bottom-nav { display: none; }
301
301
302
302
/* Flat and native: the content sits directly on the page, no card chrome. The
303
Removed:
oxblood brand marker now lives on the masthead, so the content starts clean.
303
Added:
blood brand marker now lives on the masthead, so the content starts clean.
304
304
The desktop breakpoint only constrains the reading width. */
305
305
.page-surface {
306
306
min-height: 26rem;
@@ -439,30 +439,130 @@
439
439
}
440
440
input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
441
441
442
Removed:
input[type="submit"] {
443
Removed:
width: 100%;
442
Added:
/* --- Button primitives ---
443
Added:
One "solid blood pill" skin, one "brass outline" secondary, and one
444
Added:
"blood outline" variant. The app styles buttons by context, not by a
445
Added:
shared class, so each skin lists every call site as a selector group and
446
Added:
applies the look once. Call sites then add only their own layout — width,
447
Added:
margin, display — and the source-ordered override rules below reshade
448
Added:
specific groups (correction, finish) without re-declaring the whole skin. */
449
Added:
450
Added:
/* Solid blood pill: the primary action look, shared by every submit input,
451
Added:
anchor button, button-group control, and modal button. */
452
Added:
input[type="submit"],
453
Added:
a.button,
454
Added:
.button-group button,
455
Added:
.button-group input[type="submit"],
456
Added:
.confirm-dialog button {
444
457
min-height: 3rem;
445
Removed:
margin-top: 1rem;
446
Removed:
border: 2px solid var(--oxblood-dark);
458
Added:
border: 2px solid var(--blood-dark);
447
459
border-radius: var(--radius);
448
460
color: var(--on-primary);
449
Removed:
background: var(--oxblood);
461
Added:
background: var(--blood);
450
462
cursor: pointer;
451
463
font: 700 var(--font-size-small)/1 var(--sans);
452
464
transition: background-color 150ms ease, transform 150ms ease;
453
465
}
454
Removed:
455
Removed:
input[type="submit"]:hover {
456
Removed:
background: var(--oxblood-hover);
466
Added:
input[type="submit"]:hover,
467
Added:
a.button:hover,
468
Added:
.button-group button:hover,
469
Added:
.button-group input[type="submit"]:hover,
470
Added:
.confirm-dialog button:hover {
471
Added:
background: var(--blood-hover);
457
472
transform: translateY(-2px);
458
473
}
474
Added:
475
Added:
/* Per-site layout for the shared skin. A bare submit is a full-width block with
476
Added:
its own top margin. An anchor button is an inline-flex pill. A button-group
477
Added:
control fills its grid cell with no margin of its own. */
478
Added:
input[type="submit"] {
479
Added:
width: 100%;
480
Added:
margin-top: 1rem;
481
Added:
}
459
482
input[type="submit"]:disabled {
460
483
border-color: var(--rule-strong);
461
484
color: var(--muted-ink);
462
485
background: var(--disabled-surface);
463
486
cursor: not-allowed;
464
487
}
488
Added:
a.button {
489
Added:
display: inline-flex;
490
Added:
align-items: center;
491
Added:
justify-content: center;
492
Added:
padding: 0 1rem;
493
Added:
text-decoration: none;
494
Added:
}
495
Added:
a.button:hover {
496
Added:
color: var(--on-primary);
497
Added:
}
498
Added:
.button-group button,
499
Added:
.button-group input[type="submit"] {
500
Added:
display: inline-flex;
501
Added:
align-items: center;
502
Added:
justify-content: center;
503
Added:
width: 100%;
504
Added:
margin: 0;
505
Added:
}
506
Added:
.confirm-dialog button {
507
Added:
width: 100%;
508
Added:
}
465
509
510
Added:
/* Brass outline: the secondary, lower-emphasis action next to a primary one.
511
Added:
Shared by every secondary button, secondary anchor, and the reset button
512
Added:
styled to match. */
513
Added:
input[type="submit"].secondary,
514
Added:
a.button.secondary,
515
Added:
.button-group button.secondary,
516
Added:
.confirm-dialog button.secondary,
517
Added:
button[type="reset"].secondary {
518
Added:
color: var(--brass);
519
Added:
background: transparent;
520
Added:
border-color: var(--brass);
521
Added:
}
522
Added:
input[type="submit"].secondary:hover,
523
Added:
a.button.secondary:hover,
524
Added:
.button-group button.secondary:hover,
525
Added:
.confirm-dialog button.secondary:hover,
526
Added:
button[type="reset"].secondary:hover {
527
Added:
color: var(--on-brass);
528
Added:
background: var(--brass);
529
Added:
}
530
Added:
/* A reset button styled to match a secondary submit: it carries the shared
531
Added:
skin's border, radius, font, and transition, which the solid selector group
532
Added:
does not give it, plus the brass outline above and a hover lift. */
533
Added:
button[type="reset"].secondary {
534
Added:
min-height: 3rem;
535
Added:
margin-top: 1rem;
536
Added:
border: 2px solid var(--brass);
537
Added:
border-radius: var(--radius);
538
Added:
cursor: pointer;
539
Added:
font: 700 var(--font-size-small)/1 var(--sans);
540
Added:
transition: background-color 150ms ease, transform 150ms ease;
541
Added:
}
542
Added:
button[type="reset"].secondary:hover {
543
Added:
transform: translateY(-2px);
544
Added:
}
545
Added:
546
Added:
/* Blood outline: a blood border and blood text on a transparent field
547
Added:
that fills blood on hover. Shared by the anchor outline variant and the
548
Added:
correction and finish action groups, which name both group classes so they
549
Added:
beat the generic solid-fill and brass-outline rules of equal specificity. */
550
Added:
a.button.outline,
551
Added:
.button-group.correction-actions input[type="submit"],
552
Added:
.button-group.finish-actions input[type="submit"],
553
Added:
.button-group.finish-actions input[type="submit"].secondary {
554
Added:
color: var(--blood);
555
Added:
background: transparent;
556
Added:
border: 2px solid var(--blood-dark);
557
Added:
}
558
Added:
a.button.outline:hover,
559
Added:
.button-group.correction-actions input[type="submit"]:hover,
560
Added:
.button-group.finish-actions input[type="submit"]:hover,
561
Added:
.button-group.finish-actions input[type="submit"].secondary:hover {
562
Added:
color: var(--on-primary);
563
Added:
background: var(--blood);
564
Added:
}
565
Added:
466
566
/* The correction actions, Save correction and Reset, appear only after a
467
567
recorded value changes. With JavaScript, the pair stays hidden until the
468
568
client marks the form dirty. The reset button then restores the recorded
@@ -482,21 +582,6 @@
482
582
.correction-actions[data-hito-correction-actions] {
483
583
display: grid;
484
584
}
485
Removed:
/* Save correction reads as a primary outline: an oxblood border and oxblood
486
Removed:
text on a transparent field, which fills oxblood on hover. It pairs with the
487
Removed:
Reset button beside it and does not compete as a solid fill. The selector
488
Removed:
names both group classes. It therefore beats the generic .button-group
489
Removed:
solid-fill rule, which matches the same specificity and would otherwise win
490
Removed:
by order. */
491
Removed:
.button-group.correction-actions input[type="submit"] {
492
Removed:
color: var(--oxblood);
493
Removed:
background: transparent;
494
Removed:
border: 2px solid var(--oxblood-dark);
495
Removed:
}
496
Removed:
.button-group.correction-actions input[type="submit"]:hover {
497
Removed:
color: var(--on-primary);
498
Removed:
background: var(--oxblood);
499
Removed:
}
500
585
/* Both correction controls sit in one grid row, so neither carries its own
501
586
top margin. The group's top margin is the single source of vertical
502
587
spacing. */
@@ -504,37 +589,7 @@
504
589
.button-group.correction-actions button[type="reset"].secondary {
505
590
margin-top: 0;
506
591
}
507
Removed:
/* A reset button styled to match a secondary submit. */
508
Removed:
button[type="reset"].secondary {
509
Removed:
min-height: 3rem;
510
Removed:
margin-top: 1rem;
511
Removed:
border: 2px solid var(--brass);
512
Removed:
border-radius: var(--radius);
513
Removed:
color: var(--brass);
514
Removed:
background: transparent;
515
Removed:
cursor: pointer;
516
Removed:
font: 700 var(--font-size-small)/1 var(--sans);
517
Removed:
transition: background-color 150ms ease, transform 150ms ease;
518
Removed:
}
519
Removed:
button[type="reset"].secondary:hover {
520
Removed:
color: var(--on-brass);
521
Removed:
background: var(--brass);
522
Removed:
transform: translateY(-2px);
523
Removed:
}
524
592
525
Removed:
/* A secondary submit: a lower-emphasis action next to the primary one. It reads
526
Removed:
as a receding, brass-outlined control so the primary submit stays the obvious
527
Removed:
choice. Used for "Cancel logging" beside "Finish workout". */
528
Removed:
input[type="submit"].secondary {
529
Removed:
color: var(--brass);
530
Removed:
background: transparent;
531
Removed:
border-color: var(--brass);
532
Removed:
}
533
Removed:
input[type="submit"].secondary:hover {
534
Removed:
color: var(--on-brass);
535
Removed:
background: var(--brass);
536
Removed:
}
537
Removed:
538
593
/* Keeps the finish and cancel controls together as equal-width actions. */
539
594
.button-group {
540
595
display: grid;
@@ -545,108 +600,17 @@
545
600
.button-group form { margin: 0; }
546
601
.button-group input[type="submit"] { width: 100%; }
547
602
548
Removed:
/* Anchor actions styled as buttons: a primary action beside lower-emphasis
549
Removed:
secondary ones. Mirrors the submit-button look so links and form buttons
550
Removed:
read alike. */
551
Removed:
a.button {
552
Removed:
display: inline-flex;
553
Removed:
align-items: center;
554
Removed:
justify-content: center;
555
Removed:
min-height: 3rem;
556
Removed:
padding: 0 1rem;
557
Removed:
border: 2px solid var(--oxblood-dark);
558
Removed:
border-radius: var(--radius);
559
Removed:
color: var(--on-primary);
560
Removed:
background: var(--oxblood);
561
Removed:
font: 700 var(--font-size-small)/1 var(--sans);
562
Removed:
text-decoration: none;
563
Removed:
transition: background-color 150ms ease, transform 150ms ease;
564
Removed:
}
565
Removed:
a.button:hover {
566
Removed:
color: var(--on-primary);
567
Removed:
background: var(--oxblood-hover);
568
Removed:
transform: translateY(-2px);
569
Removed:
}
570
Removed:
a.button.secondary {
571
Removed:
color: var(--brass);
572
Removed:
background: transparent;
573
Removed:
border-color: var(--brass);
574
Removed:
}
575
Removed:
a.button.secondary:hover {
576
Removed:
color: var(--on-brass);
577
Removed:
background: var(--brass);
578
Removed:
}
579
Removed:
a.button.outline {
580
Removed:
color: var(--oxblood);
581
Removed:
background: transparent;
582
Removed:
border-color: var(--oxblood);
583
Removed:
}
584
Removed:
a.button.outline:hover {
585
Removed:
color: var(--on-primary);
586
Removed:
background: var(--oxblood);
587
Removed:
}
588
Removed:
589
Removed:
/* A button group can hold an anchor, a form button, or a submit input. Every
590
Removed:
one of them shares the primary look, so modals and action rows read alike.
591
Removed:
The group is a two-column grid: the primary action left, the secondary
592
Removed:
right. */
593
Removed:
.button-group button,
594
Removed:
.button-group input[type="submit"] {
595
Removed:
display: inline-flex;
596
Removed:
align-items: center;
597
Removed:
justify-content: center;
598
Removed:
width: 100%;
599
Removed:
min-height: 3rem;
600
Removed:
margin: 0;
601
Removed:
border: 2px solid var(--oxblood-dark);
602
Removed:
border-radius: var(--radius);
603
Removed:
color: var(--on-primary);
604
Removed:
background: var(--oxblood);
605
Removed:
cursor: pointer;
606
Removed:
font: 700 var(--font-size-small)/1 var(--sans);
607
Removed:
transition: background-color 150ms ease, transform 150ms ease;
608
Removed:
}
609
Removed:
.button-group button:hover,
610
Removed:
.button-group input[type="submit"]:hover {
611
Removed:
background: var(--oxblood-hover);
612
Removed:
transform: translateY(-2px);
613
Removed:
}
614
Removed:
.button-group button.secondary {
615
Removed:
color: var(--brass);
616
Removed:
background: transparent;
617
Removed:
border-color: var(--brass);
618
Removed:
}
619
Removed:
.button-group button.secondary:hover {
620
Removed:
color: var(--on-brass);
621
Removed:
background: var(--brass);
622
Removed:
}
623
Removed:
624
Removed:
/* The finish and cancel actions signal readiness by their fill. While any
625
Removed:
slot is still unrecorded, both read as a primary outline. They are present,
626
Removed:
but they do not urge completion. Once every slot is recorded, both fill
627
Removed:
solid oxblood to invite the finish. The selectors name both group classes,
628
Removed:
so they beat the generic solid-fill rule and the .secondary brass outline,
629
Removed:
which match the same specificity. */
630
Removed:
.button-group.finish-actions input[type="submit"],
631
Removed:
.button-group.finish-actions input[type="submit"].secondary {
632
Removed:
color: var(--oxblood);
633
Removed:
background: transparent;
634
Removed:
border: 2px solid var(--oxblood-dark);
635
Removed:
}
636
Removed:
.button-group.finish-actions input[type="submit"]:hover,
637
Removed:
.button-group.finish-actions input[type="submit"].secondary:hover {
638
Removed:
color: var(--on-primary);
639
Removed:
background: var(--oxblood);
640
Removed:
}
603
Added:
/* Once every slot is recorded, the finish group fills solid blood to invite
604
Added:
the finish, overriding the blood-outline default above. */
641
605
.button-group.finish-actions-complete input[type="submit"],
642
606
.button-group.finish-actions-complete input[type="submit"].secondary {
643
607
color: var(--on-primary);
644
Removed:
background: var(--oxblood);
645
Removed:
border: 2px solid var(--oxblood-dark);
608
Added:
background: var(--blood);
609
Added:
border: 2px solid var(--blood-dark);
646
610
}
647
611
.button-group.finish-actions-complete input[type="submit"]:hover,
648
612
.button-group.finish-actions-complete input[type="submit"].secondary:hover {
649
Removed:
background: var(--oxblood-hover);
613
Added:
background: var(--blood-hover);
650
614
}
651
615
652
616
/* The logbook is one real table at every width. The columns are date, workout
@@ -691,6 +655,7 @@
691
655
font-family: var(--mono);
692
656
color: var(--muted-ink);
693
657
white-space: nowrap;
658
Added:
}
694
659
695
660
@media (max-width: 30rem) {
696
661
.logbook-table th,
@@ -707,7 +672,6 @@
707
672
width: 2.5rem;
708
673
}
709
674
}
710
Removed:
}
711
675
.logbook-duration {
712
676
white-space: nowrap;
713
677
font-family: var(--mono);
@@ -765,10 +729,10 @@
765
729
text-decoration: none;
766
730
}
767
731
.logbook-row-menu-drawer a:hover { background: var(--hover-surface); }
768
Removed:
.logbook-row-menu-drawer a.danger { color: var(--oxblood-dark); }
732
Added:
.logbook-row-menu-drawer a.danger { color: var(--blood-dark); }
769
733
.logbook-row-menu-drawer a.danger:hover {
770
734
color: var(--on-primary);
771
Removed:
background: var(--oxblood);
735
Added:
background: var(--blood);
772
736
}
773
737
774
738
/* The imported workout's menu drawer holds an exercise and progress list
@@ -781,7 +745,7 @@
781
745
text-align: left;
782
746
}
783
747
784
Removed:
/* An oxblood outline "Imported" pill marks an import. The pill sits at the
748
Added:
/* A blood outline "Imported" pill marks an import. The pill sits at the
785
749
top of the three-dot menu drawer, not beside the title. */
786
750
.logbook-import-pill-row {
787
751
margin: 0 0 0.5rem;
@@ -789,9 +753,9 @@
789
753
.logbook-import-pill {
790
754
display: inline-block;
791
755
padding: 0.05rem 0.5rem;
792
Removed:
border: 1px solid var(--oxblood);
756
Added:
border: 1px solid var(--blood);
793
757
border-radius: 999px;
794
Removed:
color: var(--oxblood-dark);
758
Added:
color: var(--blood-dark);
795
759
background: transparent;
796
760
font: 700 var(--font-size-small)/1.4 var(--sans);
797
761
letter-spacing: 0.02em;
@@ -799,10 +763,10 @@
799
763
}
800
764
801
765
.confirm-dialog button.danger {
802
Removed:
border-color: var(--oxblood-hover);
803
Removed:
background: var(--oxblood-hover);
766
Added:
border-color: var(--blood-hover);
767
Added:
background: var(--blood-hover);
804
768
}
805
Removed:
.confirm-dialog button.danger:hover { background: var(--oxblood); }
769
Added:
.confirm-dialog button.danger:hover { background: var(--blood); }
806
770
.confirm-dialog .delete-record-form { margin: 0; }
807
771
/* A modal's leading heading sits flush to the top padding and centers over the
808
772
dialog body. Shared by every dialog that opens with a title. */
@@ -828,10 +792,10 @@
828
792
color: var(--ink);
829
793
}
830
794
/* The per-metric change, coloured by the app's progress palette: an increase
831
Removed:
is green, a decrease oxblood. */
795
Added:
is green, a decrease blood. */
832
796
.metric-delta { font-weight: 700; }
833
797
.metric-delta.delta-up { color: var(--evergreen); }
834
Removed:
.metric-delta.delta-down { color: var(--oxblood-dark); }
798
Added:
.metric-delta.delta-down { color: var(--blood-dark); }
835
799
836
800
/* The action bar under the logbook heading. */
837
801
.logbook-actions-bar { margin: 0.5rem 0 1rem; }
@@ -839,7 +803,7 @@
839
803
/* The month calendar above the logbook is a self-contained widget, flat on
840
804
the page. A header row holds a previous arrow, a month and year picker, and
841
805
a next arrow. Below it sit a Today link and the seven-column day grid. Days
842
Removed:
with a workout are filled oxblood. Today is ringed. */
806
Added:
with a workout are filled blood. Today is ringed. */
843
807
.calendar {
844
808
max-width: 22rem;
845
809
margin: 0 auto 1.5rem;
@@ -870,16 +834,16 @@
870
834
justify-content: center;
871
835
min-height: 2.25rem;
872
836
padding: 0.35rem 0.75rem;
873
Removed:
border: 1px solid var(--oxblood-dark);
837
Added:
border: 1px solid var(--blood-dark);
874
838
border-radius: var(--radius);
875
839
flex: 1 1 auto;
876
Removed:
color: var(--oxblood-dark);
840
Added:
color: var(--blood-dark);
877
841
background: transparent;
878
842
font-weight: 700;
879
843
text-decoration: none;
880
844
}
881
845
.calendar-today-link:hover {
882
Removed:
color: var(--oxblood-dark);
846
Added:
color: var(--blood-dark);
883
847
background: var(--hover-surface);
884
848
}
885
849
.calendar-grid {
@@ -912,7 +876,7 @@
912
876
/* A day a workout was performed: filled in the primary colour. */
913
877
.calendar-workout {
914
878
color: var(--on-primary);
915
Removed:
background: var(--oxblood);
879
Added:
background: var(--blood);
916
880
border-radius: var(--radius);
917
881
font-weight: 700;
918
882
}
@@ -947,7 +911,7 @@
947
911
height: 0;
948
912
border-top: 2px solid;
949
913
}
950
Removed:
.chart-legend-item.weight::before { border-top-color: var(--oxblood); }
914
Added:
.chart-legend-item.weight::before { border-top-color: var(--blood); }
951
915
.chart-legend-item.reps::before {
952
916
border-top-color: var(--brass);
953
917
border-top-style: dashed;
@@ -969,12 +933,12 @@
969
933
they render about 12px. */
970
934
.chart-tick { font: 500 20px var(--mono); fill: var(--muted-ink); }
971
935
.chart-axis-title { font: 700 22px var(--sans); }
972
Removed:
.chart-axis-title.weight { fill: var(--oxblood-dark); }
936
Added:
.chart-axis-title.weight { fill: var(--blood-dark); }
973
937
.chart-axis-title.reps { fill: var(--brass); }
974
Removed:
/* Weight is the primary series: a solid oxblood line leads. Reps is secondary:
938
Added:
/* Weight is the primary series: a solid blood line leads. Reps is secondary:
975
939
a dashed brass line, so the two never blur together on a busy chart. */
976
940
.chart-series { fill: none; stroke-width: 2; }
977
Removed:
.chart-series.weight { stroke: var(--oxblood); }
941
Added:
.chart-series.weight { stroke: var(--blood); }
978
942
.chart-series.reps { stroke: var(--brass); stroke-dasharray: 5 3; }
979
943
980
944
/* --- Workout logging fieldset ---
@@ -1105,12 +1069,12 @@
1105
1069
1106
1070
/* Home shows this affordance while a workout is in progress. It is a
1107
1071
full-width pressable panel that returns the user to the current workout. A
1108
Removed:
left oxblood accent marks the panel. It is not the page-surface card. */
1072
Added:
left blood accent marks the panel. It is not the page-surface card. */
1109
1073
.in-progress {
1110
1074
display: block;
1111
1075
margin: 1.25rem 0 0;
1112
1076
border: 1px solid var(--rule-strong);
1113
Removed:
border-left: 4px solid var(--oxblood);
1077
Added:
border-left: 4px solid var(--blood);
1114
1078
background: var(--paper);
1115
1079
border-radius: var(--radius);
1116
1080
padding: 1rem 1.1rem;
@@ -1204,7 +1168,7 @@
1204
1168
1205
1169
/* The elapsed workout timer occupies the middle navigation slot while
1206
1170
logging, in place of the routine link. It is a navigation link like the
1207
Removed:
others, so it inherits the navigation layout and the active oxblood fill.
1171
Added:
others, so it inherits the navigation layout and the active blood fill.
1208
1172
Only its value differs: a monospace clock with tabular numerals, so the
1209
1173
digits do not jitter. */
1210
1174
.nav-timer-value {
@@ -1213,7 +1177,7 @@
1213
1177
letter-spacing: 0.02em;
1214
1178
}
1215
1179
1216
Removed:
/* Every modal is a native dialog styled as a raised paper surface. The oxblood
1180
Added:
/* Every modal is a native dialog styled as a raised paper surface. The blood
1217
1181
top accent, radius, border, and shadow echo the page surface. A modal
1218
1182
therefore reads as part of the same interface. The actions reuse the primary
1219
1183
and secondary submit styling, including hover and transition. Each modal
@@ -1229,7 +1193,7 @@
1229
1193
width: min(100%, 26rem);
1230
1194
margin: auto;
1231
1195
border: 1px solid var(--rule-strong);
1232
Removed:
border-top: 6px solid var(--oxblood);
1196
Added:
border-top: 6px solid var(--blood);
1233
1197
border-radius: var(--radius);
1234
1198
background: var(--paper-raised);
1235
1199
box-shadow: 0 0.6rem 2rem rgba(26, 26, 22, 0.25);
@@ -1245,16 +1209,16 @@
1245
1209
.confirm-dialog button {
1246
1210
width: 100%;
1247
1211
min-height: 3rem;
1248
Removed:
border: 2px solid var(--oxblood-dark);
1212
Added:
border: 2px solid var(--blood-dark);
1249
1213
border-radius: var(--radius);
1250
1214
color: var(--on-primary);
1251
Removed:
background: var(--oxblood);
1215
Added:
background: var(--blood);
1252
1216
cursor: pointer;
1253
1217
font: 700 var(--font-size-small)/1 var(--sans);
1254
1218
transition: background-color 150ms ease, transform 150ms ease;
1255
1219
}
1256
1220
.confirm-dialog button:hover {
1257
Removed:
background: var(--oxblood-hover);
1221
Added:
background: var(--blood-hover);
1258
1222
transform: translateY(-2px);
1259
1223
}
1260
1224
.confirm-dialog button.secondary {
@@ -1295,7 +1259,7 @@
1295
1259
padding: 0.9rem 1rem;
1296
1260
}
1297
1261
1298
Removed:
/* A confirmation notice: a quiet, oxblood-accented panel that reports a
1262
Added:
/* A confirmation notice: a quiet, blood-accented panel that reports a
1299
1263
successful change on the profile page. */
1300
1264
.notice {
1301
1265
max-width: 47rem;
@@ -1446,7 +1410,7 @@
1446
1410
}
1447
1411
/* The tabs are round-corner buttons on the paper bar. Mobile and desktop
1448
1412
activity buttons therefore share one appearance: the same radius, hover, and
1449
Removed:
active oxblood fill. The bar is slightly larger than the buttons it holds. */
1413
Added:
active blood fill. The bar is slightly larger than the buttons it holds. */
1450
1414
.bottom-nav > a {
1451
1415
display: grid;
1452
1416
min-height: 3rem;
@@ -1460,7 +1424,7 @@
1460
1424
text-decoration: none;
1461
1425
}
1462
1426
.bottom-nav > a:hover {
1463
Removed:
color: var(--oxblood-dark);
1427
Added:
color: var(--blood-dark);
1464
1428
background: var(--hover-surface);
1465
1429
}
1466
1430
.app-shell { padding: 0 0.75rem calc(6.75rem + env(safe-area-inset-bottom)); }
@@ -1495,8 +1459,8 @@
1495
1459
.feedback-tab:hover,
1496
1460
.feedback-tab[aria-current] {
1497
1461
color: var(--on-primary);
1498
Removed:
background: var(--oxblood);
1499
Removed:
border-color: var(--oxblood-dark);
1462
Added:
background: var(--blood);
1463
Added:
border-color: var(--blood-dark);
1500
1464
}
1501
1465
.app-feedback-form {
1502
1466
max-width: 42rem;
@@ -1578,9 +1542,9 @@
1578
1542
box-shadow: 0 0 0 3px var(--brass-wash);
1579
1543
}
1580
1544
.feedback-choice input:checked + span {
1581
Removed:
border-color: var(--oxblood-dark);
1545
Added:
border-color: var(--blood-dark);
1582
1546
color: var(--on-primary);
1583
Removed:
background: var(--oxblood);
1547
Added:
background: var(--blood);
1584
1548
}
1585
1549
1586
1550
.app-feedback-actions {