@refrakt-md/lumina 0.8.2 → 0.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/contracts/structures.json +419 -16
  2. package/package.json +6 -6
  3. package/styles/runes/audio.css +2 -7
  4. package/styles/runes/bond.css +0 -3
  5. package/styles/runes/budget.css +16 -24
  6. package/styles/runes/cast.css +37 -14
  7. package/styles/runes/character.css +19 -29
  8. package/styles/runes/datatable.css +2 -6
  9. package/styles/runes/event.css +13 -11
  10. package/styles/runes/faction.css +79 -36
  11. package/styles/runes/howto.css +70 -18
  12. package/styles/runes/lore.css +21 -15
  13. package/styles/runes/organization.css +3 -5
  14. package/styles/runes/playlist.css +58 -34
  15. package/styles/runes/plot.css +84 -24
  16. package/styles/runes/preview.css +21 -20
  17. package/styles/runes/pullquote.css +21 -7
  18. package/styles/runes/realm.css +72 -32
  19. package/styles/runes/recipe.css +131 -27
  20. package/styles/runes/steps.css +13 -17
  21. package/styles/runes/tabs.css +16 -15
  22. package/styles/runes/track.css +3 -4
package/styles/runes/budget.css CHANGED
@@ -1,14 +1,9 @@
1
1
  /* Budget */
2
2
  .rf-budget {
3
- border: 1px solid var(--rf-color-border);
4
- border-radius: var(--rf-radius-lg);
5
- padding: 2rem;
6
3
  margin: 1.5rem 0;
7
4
  }
8
5
  .rf-budget__header {
9
6
  margin-bottom: 1.5rem;
10
- padding-bottom: 1rem;
11
- border-bottom: 1px solid var(--rf-color-border);
12
7
  }
13
8
  .rf-budget__title {
14
9
  margin: 0 0 0.5rem;
@@ -16,44 +11,43 @@
16
11
  font-weight: 700;
17
12
  color: var(--rf-color-text);
18
13
  }
14
+
15
+ /* Meta bar — single surface strip matching recipe pattern */
19
16
  .rf-budget__meta {
20
17
  display: flex;
21
18
  flex-wrap: wrap;
22
- gap: 1rem;
19
+ gap: 0.75rem 1.25rem;
23
20
  align-items: center;
21
+ background: var(--rf-color-surface);
22
+ border-radius: var(--rf-radius-md);
23
+ padding: 0.625rem 1rem;
24
24
  }
25
25
  .rf-budget__meta-item {
26
26
  font-size: 0.8125rem;
27
- font-weight: 500;
27
+ font-weight: 400;
28
28
  color: var(--rf-color-muted);
29
- padding: 0.125rem 0.5rem;
30
- background: var(--rf-color-surface);
31
- border-radius: var(--rf-radius-full);
32
29
  }
30
+
31
+ /* Categories */
33
32
  .rf-budget__categories {
34
33
  display: flex;
35
34
  flex-direction: column;
36
- gap: 1.25rem;
35
+ gap: 1.5rem;
37
36
  }
38
37
 
39
- /* Budget Category */
38
+ /* Budget Category — no border box, spacing and typography create hierarchy */
40
39
  .rf-budget-category {
41
- border: 1px solid var(--rf-color-border);
42
- border-radius: var(--rf-radius-md);
43
- padding: 1rem 1.25rem;
44
- background: var(--rf-color-bg);
40
+ padding: 0;
45
41
  }
46
42
  .rf-budget-category--estimate {
47
- border-style: dashed;
48
- border-color: var(--rf-color-warning);
43
+ border-left: 2px dashed var(--rf-color-warning);
44
+ padding-left: 1rem;
49
45
  }
50
46
  .rf-budget-category__header {
51
47
  display: flex;
52
48
  justify-content: space-between;
53
49
  align-items: center;
54
- margin-bottom: 0.75rem;
55
- padding-bottom: 0.5rem;
56
- border-bottom: 1px solid var(--rf-color-border);
50
+ margin-bottom: 0.5rem;
57
51
  }
58
52
  .rf-budget-category--estimate .rf-budget-category__header::after {
59
53
  content: 'est.';
@@ -109,7 +103,7 @@
109
103
  font-variant-numeric: tabular-nums;
110
104
  }
111
105
 
112
- /* Budget Footer (injected by postTransform) */
106
+ /* Budget Footer — total line */
113
107
  .rf-budget__footer {
114
108
  margin-top: 1.5rem;
115
109
  padding-top: 1rem;
@@ -159,6 +153,4 @@
159
153
  }
160
154
  [data-variant="summary"] .rf-budget-category__header {
161
155
  margin-bottom: 0;
162
- padding-bottom: 0;
163
- border-bottom: none;
164
156
  }
package/styles/runes/cast.css CHANGED
@@ -2,50 +2,54 @@
2
2
  .rf-cast {
3
3
  margin: 1.5rem 0;
4
4
  }
5
+
6
+ /* Members list — base */
5
7
  .rf-cast__members {
6
- display: contents;
8
+ list-style: none;
9
+ padding: 0;
10
+ margin: 0;
7
11
  }
8
- .rf-cast--grid ul {
12
+
13
+ /* Grid layout (default) */
14
+ .rf-cast--grid .rf-cast__members {
9
15
  display: grid;
10
16
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
11
17
  gap: 1rem;
12
- list-style: none;
13
- padding: 0;
14
18
  }
15
- .rf-cast--list ul {
19
+
20
+ /* List layout */
21
+ .rf-cast--list .rf-cast__members {
16
22
  display: flex;
17
23
  flex-direction: column;
18
24
  gap: 0.75rem;
19
- list-style: none;
20
- padding: 0;
21
25
  }
26
+
27
+ /* Member card — surface instead of border */
22
28
  .rf-cast-member {
23
- border: 1px solid var(--rf-color-border);
29
+ background: var(--rf-color-surface);
24
30
  border-radius: var(--rf-radius-md);
25
31
  padding: 1.25rem;
26
32
  text-align: center;
27
33
  }
28
- .rf-cast-member__info {
29
- display: flex;
30
- flex-direction: column;
31
- gap: 0.25rem;
32
- }
33
34
  .rf-cast-member__name {
35
+ display: block;
34
36
  font-weight: 600;
35
37
  font-size: 1rem;
36
38
  color: var(--rf-color-text);
37
39
  }
38
40
  .rf-cast-member__role {
41
+ display: block;
39
42
  font-size: 0.875rem;
40
43
  color: var(--rf-color-muted);
44
+ margin-top: 0.125rem;
41
45
  }
42
46
  .rf-cast-member__body {
43
47
  margin-top: 0.75rem;
44
48
  font-size: 0.875rem;
45
49
  color: var(--rf-color-muted);
50
+ line-height: 1.5;
46
51
  }
47
52
  .rf-cast-member__body:empty { display: none; }
48
- .rf-cast-member__body > span[property] { display: none; }
49
53
  .rf-cast-member img {
50
54
  width: 80px;
51
55
  height: 80px;
@@ -54,3 +58,22 @@
54
58
  margin: 0 auto 0.75rem;
55
59
  display: block;
56
60
  }
61
+
62
+ /* List layout — horizontal member cards */
63
+ .rf-cast--list .rf-cast-member {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 1rem;
67
+ text-align: left;
68
+ padding: 0.75rem 1rem;
69
+ }
70
+ .rf-cast--list .rf-cast-member img {
71
+ width: 48px;
72
+ height: 48px;
73
+ margin: 0;
74
+ flex-shrink: 0;
75
+ }
76
+ .rf-cast--list .rf-cast-member__body {
77
+ margin-top: 0;
78
+ flex: 1;
79
+ }
package/styles/runes/character.css CHANGED
@@ -1,38 +1,30 @@
1
1
  /* Character */
2
2
  .rf-character {
3
- border: 1px solid var(--rf-color-border);
4
- border-radius: var(--rf-radius-lg);
5
- padding: 2rem;
6
3
  margin: 1.5rem 0;
7
4
  }
5
+
6
+ /* Badge bar — surface strip */
8
7
  .rf-character__badge {
9
8
  display: flex;
10
9
  flex-wrap: wrap;
11
- gap: 0.5rem;
10
+ gap: 0.75rem 1.25rem;
11
+ align-items: center;
12
+ background: var(--rf-color-surface);
13
+ border-radius: var(--rf-radius-md);
14
+ padding: 0.625rem 1rem;
12
15
  margin-bottom: 1rem;
13
16
  }
14
- .rf-character__role-badge {
15
- display: inline-block;
16
- padding: 0.25rem 0.75rem;
17
- border-radius: var(--rf-radius-full);
18
- font-size: 0.75rem;
19
- font-weight: 600;
20
- text-transform: uppercase;
21
- letter-spacing: 0.05em;
22
- background: var(--rf-color-muted-bg);
23
- color: var(--rf-color-muted);
24
- }
17
+ .rf-character__role-badge,
25
18
  .rf-character__status-badge {
26
- display: inline-block;
27
- padding: 0.25rem 0.75rem;
28
- border-radius: var(--rf-radius-full);
29
- font-size: 0.75rem;
30
- font-weight: 600;
31
- text-transform: uppercase;
32
- letter-spacing: 0.05em;
33
- background: var(--rf-color-muted-bg);
19
+ font-size: 0.8125rem;
20
+ font-weight: 500;
21
+ text-transform: capitalize;
34
22
  color: var(--rf-color-muted);
35
23
  }
24
+ .rf-character__role-badge::before { content: 'Role: '; font-weight: 400; opacity: 0.65; }
25
+ .rf-character__status-badge::before { content: 'Status: '; font-weight: 400; opacity: 0.65; }
26
+
27
+ /* Portrait */
36
28
  .rf-character__portrait {
37
29
  float: right;
38
30
  margin-left: 1.5rem;
@@ -47,6 +39,8 @@
47
39
  height: 100%;
48
40
  object-fit: cover;
49
41
  }
42
+
43
+ /* Content */
50
44
  .rf-character__sections {
51
45
  display: flex;
52
46
  flex-direction: column;
@@ -67,23 +61,19 @@
67
61
  color: var(--rf-color-heading);
68
62
  }
69
63
 
70
- /* Role variant colors */
64
+ /* Role variant colors — text color only */
71
65
  .rf-character[data-role="protagonist"] .rf-character__role-badge {
72
- background: var(--rf-color-success-bg);
73
66
  color: var(--rf-color-success);
74
67
  }
75
68
  .rf-character[data-role="antagonist"] .rf-character__role-badge {
76
- background: var(--rf-color-danger-bg);
77
69
  color: var(--rf-color-danger);
78
70
  }
79
71
 
80
- /* Status indicators */
72
+ /* Status indicators — text color only */
81
73
  .rf-character[data-status="dead"] .rf-character__status-badge {
82
- background: var(--rf-color-danger-bg);
83
74
  color: var(--rf-color-danger);
84
75
  }
85
76
  .rf-character[data-status="missing"] .rf-character__status-badge {
86
- background: var(--rf-color-warning-bg);
87
77
  color: var(--rf-color-warning);
88
78
  }
89
79
 
package/styles/runes/datatable.css CHANGED
@@ -1,9 +1,6 @@
1
1
  /* DataTable */
2
2
  .rf-datatable {
3
3
  margin: 1.5rem 0;
4
- border: 1px solid var(--rf-color-border);
5
- border-radius: var(--rf-radius-lg);
6
- overflow: hidden;
7
4
  }
8
5
  .rf-datatable__toolbar {
9
6
  display: flex;
@@ -58,8 +55,7 @@
58
55
  text-transform: uppercase;
59
56
  letter-spacing: 0.05em;
60
57
  color: var(--rf-color-muted);
61
- background: var(--rf-color-surface-hover);
62
- border-bottom: 1px solid var(--rf-color-border);
58
+ background: var(--rf-color-surface);
63
59
  }
64
60
  .rf-datatable__content th[style*="cursor"]:hover {
65
61
  color: var(--rf-color-text);
@@ -85,7 +81,7 @@
85
81
  justify-content: flex-end;
86
82
  gap: 0.75rem;
87
83
  padding: 0.5rem 0.75rem;
88
- border-top: 1px solid var(--rf-color-border);
84
+ background: var(--rf-color-surface);
89
85
  }
90
86
  .rf-datatable__page-btn {
91
87
  padding: 0.25rem 0.5rem;
package/styles/runes/event.css CHANGED
@@ -1,29 +1,28 @@
1
1
  /* Event */
2
2
  .rf-event {
3
- border: 1px solid var(--rf-color-border);
4
- border-radius: var(--rf-radius-lg);
5
- padding: 2rem;
6
3
  margin: 1.5rem 0;
7
4
  }
8
5
  .rf-event__details {
9
6
  display: flex;
10
7
  flex-wrap: wrap;
8
+ align-items: center;
11
9
  gap: 1.5rem;
12
- padding-bottom: 1rem;
13
- margin-bottom: 1.5rem;
14
- border-bottom: 1px solid var(--rf-color-border);
10
+ background: var(--rf-color-surface);
11
+ border-radius: var(--rf-radius-md);
12
+ padding: 0.75rem 1rem;
15
13
  }
16
14
  .rf-event__detail {
17
- display: flex;
18
- flex-direction: column;
19
- gap: 0.25rem;
15
+ display: block;
20
16
  }
21
17
  .rf-event__label {
18
+ display: block;
19
+ margin-bottom: 0.125rem;
22
20
  font-size: 0.75rem;
23
- font-weight: 600;
21
+ font-weight: 400;
24
22
  text-transform: uppercase;
25
23
  letter-spacing: 0.05em;
26
24
  color: var(--rf-color-muted);
25
+ opacity: 0.6;
27
26
  }
28
27
  .rf-event__value {
29
28
  font-size: 0.9375rem;
@@ -39,11 +38,14 @@
39
38
  font-weight: 500;
40
39
  font-size: 0.875rem;
41
40
  text-decoration: none;
42
- margin-top: 0.25rem;
41
+ margin-left: auto;
43
42
  }
44
43
  .rf-event__register:hover {
45
44
  background: var(--rf-color-primary-hover);
46
45
  }
46
+ .rf-event__content {
47
+ margin-top: 1.5rem;
48
+ }
47
49
  .rf-event__content ul,
48
50
  .rf-event__content ol {
49
51
  padding-left: 1.5rem;
package/styles/runes/faction.css CHANGED
@@ -1,57 +1,51 @@
1
1
  /* Faction */
2
2
  .rf-faction {
3
- border: 1px solid var(--rf-color-border);
4
- border-radius: var(--rf-radius-lg);
5
- padding: 2rem;
6
3
  margin: 1.5rem 0;
4
+ display: flex;
5
+ flex-direction: column;
7
6
  }
7
+
8
+ /* Badge bar — surface strip */
8
9
  .rf-faction__badge {
9
10
  display: flex;
10
11
  flex-wrap: wrap;
11
- gap: 0.5rem;
12
+ gap: 0.75rem 1.25rem;
13
+ align-items: center;
14
+ background: var(--rf-color-surface);
15
+ border-radius: var(--rf-radius-md);
16
+ padding: 0.625rem 1rem;
12
17
  margin-bottom: 1rem;
13
18
  }
14
- .rf-faction__type-badge {
15
- display: inline-block;
16
- padding: 0.25rem 0.75rem;
17
- border-radius: var(--rf-radius-full);
18
- font-size: 0.75rem;
19
- font-weight: 600;
20
- text-transform: uppercase;
21
- letter-spacing: 0.05em;
22
- background: var(--rf-color-muted-bg);
19
+ .rf-faction__type-badge,
20
+ .rf-faction__alignment-badge,
21
+ .rf-faction__size-badge {
22
+ font-size: 0.8125rem;
23
+ font-weight: 500;
24
+ text-transform: capitalize;
23
25
  color: var(--rf-color-muted);
24
26
  }
25
- .rf-faction__alignment-badge {
26
- display: inline-block;
27
- padding: 0.25rem 0.75rem;
28
- border-radius: var(--rf-radius-full);
29
- font-size: 0.75rem;
30
- font-weight: 600;
31
- text-transform: uppercase;
32
- letter-spacing: 0.05em;
33
- background: var(--rf-color-muted-bg);
34
- color: var(--rf-color-muted);
27
+ .rf-faction__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
28
+ .rf-faction__alignment-badge::before { content: 'Alignment: '; font-weight: 400; opacity: 0.65; }
29
+ .rf-faction__size-badge::before { content: 'Size: '; font-weight: 400; opacity: 0.65; }
30
+
31
+ /* Scene image */
32
+ .rf-faction__scene {
33
+ border-radius: var(--rf-radius-lg);
34
+ overflow: hidden;
35
35
  }
36
- .rf-faction__size-badge {
37
- display: inline-block;
38
- padding: 0.25rem 0.75rem;
39
- border-radius: var(--rf-radius-full);
40
- font-size: 0.75rem;
41
- font-weight: 600;
42
- text-transform: uppercase;
43
- letter-spacing: 0.05em;
44
- background: var(--rf-color-muted-bg);
45
- color: var(--rf-color-muted);
36
+ .rf-faction__scene img {
37
+ display: block;
38
+ width: 100%;
39
+ height: auto;
40
+ border-radius: var(--rf-radius-lg);
46
41
  }
42
+
43
+ /* Content */
47
44
  .rf-faction__sections {
48
45
  display: flex;
49
46
  flex-direction: column;
50
47
  gap: 1rem;
51
48
  }
52
- .rf-faction__content {
53
- /* content wrapper */
54
- }
55
49
  .rf-faction__content ul,
56
50
  .rf-faction__content ol {
57
51
  padding-left: 1.5rem;
@@ -62,6 +56,7 @@
62
56
  font-weight: 700;
63
57
  margin-bottom: 0.5rem;
64
58
  color: var(--rf-color-heading);
59
+ order: -1;
65
60
  }
66
61
 
67
62
  /* Faction Section */
@@ -79,3 +74,51 @@
79
74
  .rf-faction-section__body ol {
80
75
  padding-left: 1.5rem;
81
76
  }
77
+
78
+ /* Split layout — shared */
79
+ .rf-faction[data-layout="split"],
80
+ .rf-faction[data-layout="split-reverse"] {
81
+ display: grid;
82
+ grid-template-columns: var(--split-ratio, 1fr 1fr);
83
+ gap: var(--split-gap, 2rem);
84
+ align-items: var(--split-valign, start);
85
+ }
86
+ /* Name and badge span full width at the top */
87
+ .rf-faction[data-layout="split"] > span[property="name"],
88
+ .rf-faction[data-layout="split-reverse"] > span[property="name"] {
89
+ grid-column: 1 / -1;
90
+ grid-row: 1;
91
+ }
92
+ .rf-faction[data-layout="split"] > .rf-faction__badge,
93
+ .rf-faction[data-layout="split-reverse"] > .rf-faction__badge {
94
+ grid-column: 1 / -1;
95
+ grid-row: 2;
96
+ }
97
+ /* Split: content left (col 1), scene right (col 2) */
98
+ .rf-faction[data-layout="split"] > .rf-faction__content {
99
+ grid-column: 1;
100
+ grid-row: 3;
101
+ }
102
+ .rf-faction[data-layout="split"] > .rf-faction__scene {
103
+ grid-column: 2;
104
+ grid-row: 3;
105
+ }
106
+ /* Split-reverse: scene left (col 1), content right (col 2) — matches DOM order */
107
+ /* Collapse to single column on small screens */
108
+ @media (max-width: 640px) {
109
+ .rf-faction[data-layout="split"],
110
+ .rf-faction[data-layout="split-reverse"] {
111
+ grid-template-columns: 1fr;
112
+ }
113
+ .rf-faction[data-layout="split"] > .rf-faction__content,
114
+ .rf-faction[data-layout="split"] > .rf-faction__scene {
115
+ grid-column: auto;
116
+ grid-row: auto;
117
+ }
118
+ }
119
+
120
+ /* Split layout scene gets subtle depth */
121
+ .rf-faction[data-layout="split"] .rf-faction__scene img,
122
+ .rf-faction[data-layout="split-reverse"] .rf-faction__scene img {
123
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
124
+ }
package/styles/runes/howto.css CHANGED
@@ -1,37 +1,89 @@
1
- /* HowTo */
1
+ /* HowTo — matches recipe design */
2
+
3
+ /* Root: no border box, just flow spacing */
2
4
  .rf-howto {
3
- border: 1px solid var(--rf-color-border);
4
- border-radius: var(--rf-radius-lg);
5
- padding: 2rem;
6
5
  margin: 1.5rem 0;
7
6
  }
7
+
8
+ /* Meta bar — soft surface strip */
8
9
  .rf-howto__meta {
9
10
  display: flex;
10
- gap: 1.5rem;
11
- padding-bottom: 1rem;
11
+ flex-wrap: wrap;
12
+ gap: 0.75rem 1.25rem;
13
+ align-items: center;
14
+ background: var(--rf-color-surface);
15
+ border-radius: var(--rf-radius-md);
16
+ padding: 0.625rem 1rem;
12
17
  margin-bottom: 1.5rem;
13
- border-bottom: 1px solid var(--rf-color-border);
14
18
  }
15
19
  .rf-howto__meta-item {
16
- font-size: 0.875rem;
20
+ font-size: 0.8125rem;
17
21
  color: var(--rf-color-muted);
18
- font-weight: 500;
22
+ font-weight: 400;
19
23
  }
24
+
25
+ /* Tools/materials list — surfaced zone with primary markers */
20
26
  .rf-howto__content ul {
21
- background: var(--rf-color-surface-hover);
27
+ background: var(--rf-color-surface);
22
28
  border-radius: var(--rf-radius-md);
23
- padding: 1rem 1rem 1rem 2.5rem;
24
- margin-bottom: 1rem;
29
+ padding: 1.25rem 1.25rem 1.25rem 2.5rem;
30
+ margin: 0 0 1.75rem;
25
31
  list-style: disc;
26
32
  }
33
+ .rf-howto__content ul li {
34
+ padding: 0.2rem 0;
35
+ line-height: 1.6;
36
+ }
37
+ .rf-howto__content ul li::marker {
38
+ color: var(--rf-color-primary);
39
+ }
40
+
41
+ /* Steps — numbered with styled counters */
27
42
  .rf-howto__content ol {
28
- padding-left: 1.5rem;
29
- counter-reset: step;
43
+ padding-left: 0;
44
+ margin: 0;
45
+ list-style: none;
46
+ counter-reset: howto-step;
30
47
  }
31
48
  .rf-howto__content ol > li {
32
- padding: 0.5rem 0;
33
- border-bottom: 1px solid var(--rf-color-border);
49
+ counter-increment: howto-step;
50
+ padding: 0.625rem 0;
51
+ padding-left: 2.25rem;
52
+ position: relative;
53
+ line-height: 1.65;
54
+ }
55
+ .rf-howto__content ol > li + li {
56
+ border-top: 1px solid var(--rf-color-border);
57
+ }
58
+ .rf-howto__content ol > li::before {
59
+ content: counter(howto-step);
60
+ position: absolute;
61
+ left: 0;
62
+ top: 0.625rem;
63
+ width: 1.5rem;
64
+ height: 1.5rem;
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ font-size: 0.75rem;
69
+ font-weight: 700;
70
+ color: var(--rf-color-primary);
71
+ background: var(--rf-color-surface);
72
+ border-radius: var(--rf-radius-full);
73
+ }
74
+
75
+ /* Tips — callout accent like hint */
76
+ .rf-howto__content blockquote {
77
+ border-left: 2px solid var(--rf-color-primary);
78
+ background: var(--rf-color-surface);
79
+ border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
80
+ padding: 0.75rem 1.25rem;
81
+ margin: 1.75rem 0 0;
82
+ font-size: 0.9125rem;
83
+ font-style: italic;
84
+ color: var(--rf-color-muted);
85
+ line-height: 1.6;
34
86
  }
35
- .rf-howto__content ol > li:last-child {
36
- border-bottom: none;
87
+ .rf-howto__content blockquote p {
88
+ margin: 0;
37
89
  }
package/styles/runes/lore.css CHANGED
@@ -1,28 +1,29 @@
1
1
  /* Lore */
2
2
  .rf-lore {
3
- border: 1px solid var(--rf-color-border);
4
- border-radius: var(--rf-radius-lg);
5
- padding: 2rem;
6
3
  margin: 1.5rem 0;
7
4
  position: relative;
8
5
  }
6
+
7
+ /* Badge bar — surface strip */
9
8
  .rf-lore__badge {
10
9
  display: flex;
11
10
  flex-wrap: wrap;
12
- gap: 0.5rem;
11
+ gap: 0.75rem 1.25rem;
12
+ align-items: center;
13
+ background: var(--rf-color-surface);
14
+ border-radius: var(--rf-radius-md);
15
+ padding: 0.625rem 1rem;
13
16
  margin-bottom: 1rem;
14
17
  }
15
18
  .rf-lore__category-badge {
16
- display: inline-block;
17
- padding: 0.25rem 0.75rem;
18
- border-radius: var(--rf-radius-full);
19
- font-size: 0.75rem;
20
- font-weight: 600;
21
- text-transform: uppercase;
22
- letter-spacing: 0.05em;
23
- background: var(--rf-color-muted-bg);
19
+ font-size: 0.8125rem;
20
+ font-weight: 500;
21
+ text-transform: capitalize;
24
22
  color: var(--rf-color-muted);
25
23
  }
24
+ .rf-lore__category-badge::before { content: 'Category: '; font-weight: 400; opacity: 0.65; }
25
+
26
+ /* Content */
26
27
  .rf-lore__content {
27
28
  transition: filter 0.3s ease;
28
29
  }
@@ -31,11 +32,17 @@
31
32
  padding-left: 1.5rem;
32
33
  }
33
34
  .rf-lore__content blockquote {
34
- border-left: 3px solid var(--rf-color-primary);
35
- padding-left: 1rem;
35
+ border-left: 2px solid var(--rf-color-primary);
36
+ background: var(--rf-color-surface);
37
+ border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
38
+ padding: 0.75rem 1.25rem;
36
39
  margin: 1rem 0;
37
40
  font-style: italic;
38
41
  color: var(--rf-color-muted);
42
+ line-height: 1.6;
43
+ }
44
+ .rf-lore__content blockquote p {
45
+ margin: 0;
39
46
  }
40
47
  .rf-lore > span[property="title"] {
41
48
  display: block;
@@ -58,7 +65,6 @@
58
65
  transform: translate(-50%, -50%);
59
66
  padding: 0.5rem 1rem;
60
67
  background: var(--rf-color-bg);
61
- border: 1px solid var(--rf-color-border);
62
68
  border-radius: var(--rf-radius-md);
63
69
  font-size: 0.875rem;
64
70
  font-weight: 500;
package/styles/runes/organization.css CHANGED
@@ -1,17 +1,15 @@
1
1
  /* Organization */
2
2
  .rf-organization {
3
- border: 1px solid var(--rf-color-border);
4
- border-radius: var(--rf-radius-lg);
5
- padding: 2rem;
6
3
  margin: 1.5rem 0;
7
4
  }
8
5
  .rf-organization__type {
9
6
  font-size: 0.75rem;
10
- font-weight: 600;
7
+ font-weight: 400;
11
8
  text-transform: uppercase;
12
9
  letter-spacing: 0.05em;
13
10
  color: var(--rf-color-muted);
14
- margin-bottom: 1rem;
11
+ opacity: 0.6;
12
+ margin-bottom: 0.5rem;
15
13
  }
16
14
  .rf-organization__body img {
17
15
  max-height: 80px;