@refrakt-md/lumina 0.8.2 → 0.8.3
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.
- package/contracts/structures.json +419 -16
- package/package.json +6 -6
- package/styles/runes/audio.css +2 -7
- package/styles/runes/bond.css +0 -3
- package/styles/runes/budget.css +16 -24
- package/styles/runes/cast.css +37 -14
- package/styles/runes/character.css +19 -29
- package/styles/runes/datatable.css +2 -6
- package/styles/runes/event.css +13 -11
- package/styles/runes/faction.css +79 -36
- package/styles/runes/howto.css +70 -18
- package/styles/runes/lore.css +21 -15
- package/styles/runes/organization.css +3 -5
- package/styles/runes/playlist.css +58 -34
- package/styles/runes/plot.css +84 -24
- package/styles/runes/preview.css +21 -20
- package/styles/runes/pullquote.css +21 -7
- package/styles/runes/realm.css +72 -32
- package/styles/runes/recipe.css +131 -27
- package/styles/runes/steps.css +13 -17
- package/styles/runes/tabs.css +16 -15
- package/styles/runes/track.css +3 -4
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
/* Playlist */
|
|
2
2
|
.rf-playlist {
|
|
3
|
-
border: 1px solid var(--rf-color-border);
|
|
4
|
-
border-radius: var(--rf-radius-lg);
|
|
5
3
|
margin: 1.5rem 0;
|
|
6
|
-
overflow: hidden;
|
|
7
4
|
}
|
|
8
5
|
|
|
9
|
-
/* Header:
|
|
6
|
+
/* Header: title + description */
|
|
10
7
|
.rf-playlist__header {
|
|
11
8
|
display: flex;
|
|
12
9
|
flex-direction: column;
|
|
13
|
-
gap: 0.
|
|
14
|
-
padding:
|
|
15
|
-
}
|
|
16
|
-
.rf-playlist__header img {
|
|
17
|
-
width: 100%;
|
|
18
|
-
max-width: 200px;
|
|
19
|
-
aspect-ratio: 1;
|
|
20
|
-
object-fit: cover;
|
|
21
|
-
border-radius: var(--rf-radius-md);
|
|
10
|
+
gap: 0.5rem;
|
|
11
|
+
padding: 0 0 1rem;
|
|
22
12
|
}
|
|
23
13
|
.rf-playlist__header h1,
|
|
24
14
|
.rf-playlist__header h2,
|
|
@@ -52,37 +42,71 @@
|
|
|
52
42
|
width: fit-content;
|
|
53
43
|
}
|
|
54
44
|
|
|
55
|
-
/* Type-specific badge colors via data attributes */
|
|
56
|
-
[data-type="podcast"] > .rf-playlist__header .rf-playlist__type-badge {
|
|
57
|
-
color: var(--rf-color-info);
|
|
58
|
-
background: var(--rf-color-info-bg);
|
|
59
|
-
}
|
|
60
|
-
[data-type="audiobook"] > .rf-playlist__header .rf-playlist__type-badge {
|
|
61
|
-
color: var(--rf-color-success);
|
|
62
|
-
background: var(--rf-color-success-bg);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
45
|
/* Tracks list wrapper */
|
|
66
46
|
.rf-playlist__tracks {
|
|
67
47
|
list-style: none;
|
|
68
48
|
padding: 0;
|
|
69
|
-
margin: 0;
|
|
70
|
-
border-top: 1px solid var(--rf-color-border);
|
|
49
|
+
margin: 0.5rem 0 0;
|
|
71
50
|
}
|
|
72
51
|
|
|
73
52
|
/* Player area */
|
|
74
53
|
.rf-playlist__player {
|
|
75
|
-
padding: 0.75rem
|
|
76
|
-
|
|
54
|
+
padding: 0.75rem 0;
|
|
55
|
+
margin-top: 0.5rem;
|
|
77
56
|
}
|
|
78
57
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
58
|
+
/* Media zone — cover art */
|
|
59
|
+
.rf-playlist__media {
|
|
60
|
+
border-radius: var(--rf-radius-lg);
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
}
|
|
63
|
+
.rf-playlist__media img {
|
|
64
|
+
display: block;
|
|
65
|
+
width: 100%;
|
|
66
|
+
height: auto;
|
|
67
|
+
border-radius: var(--rf-radius-lg);
|
|
68
|
+
aspect-ratio: 1;
|
|
69
|
+
object-fit: cover;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Split layout — shared */
|
|
73
|
+
.rf-playlist[data-layout="split"],
|
|
74
|
+
.rf-playlist[data-layout="split-reverse"] {
|
|
75
|
+
display: grid;
|
|
76
|
+
grid-template-columns: var(--split-ratio, 1fr 1fr);
|
|
77
|
+
gap: var(--split-gap, 2rem);
|
|
78
|
+
align-items: var(--split-valign, start);
|
|
79
|
+
}
|
|
80
|
+
/* Split: content left (col 1), media right (col 2) — DOM order is media first */
|
|
81
|
+
.rf-playlist[data-layout="split"] > .rf-playlist__content {
|
|
82
|
+
grid-column: 1;
|
|
83
|
+
grid-row: 2;
|
|
84
|
+
}
|
|
85
|
+
.rf-playlist[data-layout="split"] > .rf-playlist__media {
|
|
86
|
+
grid-column: 2;
|
|
87
|
+
grid-row: 2;
|
|
88
|
+
}
|
|
89
|
+
/* Split-reverse: media left (col 1), content right (col 2) — matches DOM order */
|
|
90
|
+
/* Type badge spans full width in split layouts */
|
|
91
|
+
.rf-playlist[data-layout="split"] > .rf-playlist__type-badge,
|
|
92
|
+
.rf-playlist[data-layout="split-reverse"] > .rf-playlist__type-badge {
|
|
93
|
+
grid-column: 1 / -1;
|
|
94
|
+
}
|
|
95
|
+
/* Collapse to single column on small screens */
|
|
96
|
+
@media (max-width: 640px) {
|
|
97
|
+
.rf-playlist[data-layout="split"],
|
|
98
|
+
.rf-playlist[data-layout="split-reverse"] {
|
|
99
|
+
grid-template-columns: 1fr;
|
|
84
100
|
}
|
|
85
|
-
.rf-
|
|
86
|
-
|
|
101
|
+
.rf-playlist[data-layout="split"] > .rf-playlist__content,
|
|
102
|
+
.rf-playlist[data-layout="split"] > .rf-playlist__media {
|
|
103
|
+
grid-column: auto;
|
|
104
|
+
grid-row: auto;
|
|
87
105
|
}
|
|
88
106
|
}
|
|
107
|
+
|
|
108
|
+
/* Split layout media gets subtle depth */
|
|
109
|
+
.rf-playlist[data-layout="split"] .rf-playlist__media img,
|
|
110
|
+
.rf-playlist[data-layout="split-reverse"] .rf-playlist__media img {
|
|
111
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
112
|
+
}
|
package/styles/runes/plot.css
CHANGED
|
@@ -1,45 +1,74 @@
|
|
|
1
1
|
/* Plot */
|
|
2
2
|
.rf-plot {
|
|
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
|
}
|
|
8
|
-
.rf-plot > span[property="
|
|
7
|
+
.rf-plot > span[property="name"] {
|
|
9
8
|
display: block;
|
|
10
9
|
font-size: 1.5rem;
|
|
11
10
|
font-weight: 700;
|
|
12
|
-
margin-bottom:
|
|
11
|
+
margin-bottom: 0.5rem;
|
|
13
12
|
color: var(--rf-color-heading);
|
|
13
|
+
order: -1;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* Meta bar — surface strip */
|
|
17
|
+
.rf-plot__badge {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-wrap: wrap;
|
|
20
|
+
gap: 0.75rem 1.25rem;
|
|
21
|
+
align-items: center;
|
|
22
|
+
background: var(--rf-color-surface);
|
|
23
|
+
border-radius: var(--rf-radius-md);
|
|
24
|
+
padding: 0.625rem 1rem;
|
|
25
|
+
margin-bottom: 1rem;
|
|
14
26
|
}
|
|
27
|
+
.rf-plot__type-badge,
|
|
28
|
+
.rf-plot__structure-badge {
|
|
29
|
+
font-size: 0.8125rem;
|
|
30
|
+
font-weight: 500;
|
|
31
|
+
text-transform: capitalize;
|
|
32
|
+
color: var(--rf-color-muted);
|
|
33
|
+
}
|
|
34
|
+
.rf-plot__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
|
|
35
|
+
.rf-plot__structure-badge::before { content: 'Structure: '; font-weight: 400; opacity: 0.65; }
|
|
36
|
+
|
|
37
|
+
/* Description */
|
|
38
|
+
.rf-plot > p {
|
|
39
|
+
color: var(--rf-color-muted);
|
|
40
|
+
margin-bottom: 1rem;
|
|
41
|
+
margin-top: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Beats list */
|
|
15
45
|
.rf-plot ol {
|
|
16
46
|
list-style: none;
|
|
17
47
|
padding-left: 0;
|
|
18
|
-
margin: 0;
|
|
19
|
-
position: relative;
|
|
20
|
-
}
|
|
21
|
-
.rf-plot--linear ol {
|
|
22
|
-
border-left: 2px solid var(--rf-color-border);
|
|
23
|
-
padding-left: 1.5rem;
|
|
48
|
+
margin: 1rem 0 0;
|
|
24
49
|
}
|
|
25
50
|
|
|
26
|
-
/* Beat */
|
|
51
|
+
/* Beat — all variants use left padding with dot at left: 0 */
|
|
27
52
|
.rf-beat {
|
|
28
53
|
position: relative;
|
|
29
|
-
padding: 0.
|
|
54
|
+
padding: 0.625rem 0 0.625rem 2.25rem;
|
|
55
|
+
}
|
|
56
|
+
.rf-beat + .rf-beat {
|
|
57
|
+
border-top: 1px solid var(--rf-color-border);
|
|
30
58
|
}
|
|
31
59
|
.rf-beat::before {
|
|
32
60
|
content: '';
|
|
33
61
|
position: absolute;
|
|
34
|
-
left:
|
|
62
|
+
left: 0.375rem;
|
|
35
63
|
top: 1rem;
|
|
36
64
|
width: 0.75rem;
|
|
37
65
|
height: 0.75rem;
|
|
38
|
-
border-radius:
|
|
39
|
-
background: var(--rf-color-
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
background: var(--rf-color-surface-active);
|
|
40
68
|
border: 2px solid var(--rf-color-bg);
|
|
69
|
+
box-shadow: 0 0 0 2px var(--rf-color-surface-active);
|
|
41
70
|
}
|
|
42
|
-
.rf-beat > span[
|
|
71
|
+
.rf-beat > span[data-field="label"] {
|
|
43
72
|
font-weight: 600;
|
|
44
73
|
font-size: 1rem;
|
|
45
74
|
color: var(--rf-color-heading);
|
|
@@ -47,34 +76,65 @@
|
|
|
47
76
|
.rf-beat__body {
|
|
48
77
|
margin-top: 0.25rem;
|
|
49
78
|
font-size: 0.9375rem;
|
|
50
|
-
color: var(--rf-color-
|
|
79
|
+
color: var(--rf-color-muted);
|
|
80
|
+
line-height: 1.6;
|
|
81
|
+
}
|
|
82
|
+
.rf-beat__body p {
|
|
83
|
+
margin: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.rf-plot--linear ol {
|
|
87
|
+
margin-top: 1.5rem;
|
|
88
|
+
}
|
|
89
|
+
/* Linear variant — connector line matching timeline pattern */
|
|
90
|
+
.rf-plot--linear .rf-beat {
|
|
91
|
+
padding: 0 0 2rem 2rem;
|
|
92
|
+
border-left: 2px solid var(--rf-color-border);
|
|
93
|
+
margin-left: 0.375rem;
|
|
94
|
+
}
|
|
95
|
+
.rf-plot--linear .rf-beat::before {
|
|
96
|
+
left: -0.4375rem;
|
|
97
|
+
top: 0.125rem;
|
|
98
|
+
}
|
|
99
|
+
.rf-plot--linear .rf-beat > span[data-field="label"] {
|
|
100
|
+
line-height: 1;
|
|
101
|
+
display: block;
|
|
102
|
+
margin-top: -0.5rem;
|
|
103
|
+
}
|
|
104
|
+
.rf-plot--linear .rf-beat + .rf-beat {
|
|
105
|
+
border-top: none;
|
|
106
|
+
}
|
|
107
|
+
.rf-plot--linear .rf-beat:last-child {
|
|
108
|
+
border-left-color: transparent;
|
|
109
|
+
padding-bottom: 0;
|
|
51
110
|
}
|
|
52
111
|
|
|
53
112
|
/* Beat status variants */
|
|
54
113
|
.rf-beat--complete::before {
|
|
55
114
|
background: var(--rf-color-success);
|
|
115
|
+
box-shadow: 0 0 0 2px var(--rf-color-success);
|
|
56
116
|
}
|
|
57
|
-
.rf-beat--complete > span[
|
|
117
|
+
.rf-beat--complete > span[data-field="label"] {
|
|
58
118
|
color: var(--rf-color-muted);
|
|
59
119
|
}
|
|
60
120
|
|
|
61
121
|
.rf-beat--active::before {
|
|
62
122
|
background: var(--rf-color-primary);
|
|
63
|
-
box-shadow: 0 0 0
|
|
123
|
+
box-shadow: 0 0 0 2px var(--rf-color-primary), 0 0 0 5px color-mix(in srgb, var(--rf-color-primary) 20%, transparent);
|
|
64
124
|
}
|
|
65
|
-
.rf-beat--active > span[
|
|
125
|
+
.rf-beat--active > span[data-field="label"] {
|
|
66
126
|
color: var(--rf-color-primary);
|
|
67
127
|
}
|
|
68
128
|
|
|
69
129
|
.rf-beat--planned::before {
|
|
70
|
-
background: var(--rf-color-
|
|
71
|
-
border-color: var(--rf-color-border);
|
|
130
|
+
background: var(--rf-color-surface-active);
|
|
72
131
|
}
|
|
73
132
|
|
|
74
|
-
.rf-beat--abandoned > span[
|
|
133
|
+
.rf-beat--abandoned > span[data-field="label"] {
|
|
75
134
|
text-decoration: line-through;
|
|
76
135
|
color: var(--rf-color-muted);
|
|
77
136
|
}
|
|
78
137
|
.rf-beat--abandoned::before {
|
|
79
138
|
background: var(--rf-color-muted);
|
|
139
|
+
box-shadow: 0 0 0 2px var(--rf-color-muted);
|
|
80
140
|
}
|
package/styles/runes/preview.css
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
/* Preview — Component showcase with theme toggle and width control */
|
|
2
2
|
.rf-preview {
|
|
3
3
|
margin: 2rem 0;
|
|
4
|
-
border: 1px solid var(--rf-color-border);
|
|
5
|
-
border-radius: var(--rf-radius-lg);
|
|
6
|
-
overflow: hidden;
|
|
7
4
|
}
|
|
8
5
|
|
|
9
6
|
/* Width variants */
|
|
@@ -19,15 +16,13 @@
|
|
|
19
16
|
margin-left: calc(-50vw + 50%);
|
|
20
17
|
}
|
|
21
18
|
|
|
22
|
-
/* Toolbar */
|
|
19
|
+
/* Toolbar — transparent, controls float above the canvas */
|
|
23
20
|
.rf-preview__toolbar {
|
|
24
21
|
display: flex;
|
|
25
22
|
align-items: center;
|
|
26
23
|
justify-content: space-between;
|
|
27
|
-
padding: 0.5rem
|
|
28
|
-
|
|
29
|
-
border-bottom: 1px solid var(--rf-color-border);
|
|
30
|
-
min-height: 2.5rem;
|
|
24
|
+
padding: 0.25rem 0.25rem 0.5rem;
|
|
25
|
+
min-height: 2rem;
|
|
31
26
|
}
|
|
32
27
|
.rf-preview__title {
|
|
33
28
|
font-size: 0.75rem;
|
|
@@ -84,10 +79,14 @@
|
|
|
84
79
|
box-shadow: var(--rf-shadow-xs);
|
|
85
80
|
}
|
|
86
81
|
|
|
87
|
-
/* Canvas */
|
|
82
|
+
/* Canvas — bordered frame for the preview content */
|
|
88
83
|
.rf-preview__canvas {
|
|
89
84
|
padding: 2rem 2.5rem;
|
|
90
85
|
background: var(--rf-color-bg);
|
|
86
|
+
color: var(--rf-color-text);
|
|
87
|
+
border: 1px solid var(--rf-color-border);
|
|
88
|
+
border-radius: var(--rf-radius-lg);
|
|
89
|
+
overflow: hidden;
|
|
91
90
|
}
|
|
92
91
|
.rf-preview__canvas:has(.rf-mockup) {
|
|
93
92
|
text-align: center;
|
|
@@ -130,9 +129,11 @@
|
|
|
130
129
|
z-index: 1;
|
|
131
130
|
}
|
|
132
131
|
|
|
133
|
-
/* Source code view */
|
|
132
|
+
/* Source code view — bordered frame matching the canvas */
|
|
134
133
|
.rf-preview__source {
|
|
135
|
-
overflow:
|
|
134
|
+
overflow: hidden;
|
|
135
|
+
border: 1px solid var(--rf-color-border);
|
|
136
|
+
border-radius: var(--rf-radius-lg);
|
|
136
137
|
}
|
|
137
138
|
.rf-preview__source pre {
|
|
138
139
|
margin: 0;
|
|
@@ -148,7 +149,6 @@
|
|
|
148
149
|
display: flex;
|
|
149
150
|
gap: 0;
|
|
150
151
|
background: var(--rf-color-surface);
|
|
151
|
-
border-bottom: 1px solid var(--rf-color-border);
|
|
152
152
|
}
|
|
153
153
|
.rf-preview__source-tab {
|
|
154
154
|
padding: 0.5rem 1rem;
|
|
@@ -171,17 +171,18 @@
|
|
|
171
171
|
|
|
172
172
|
/* Small containers: edge-to-edge bleed */
|
|
173
173
|
@container (max-width: 1008px) {
|
|
174
|
-
.rf-preview {
|
|
175
|
-
margin-left: calc(-1 * var(--rf-content-padding, 1.5rem));
|
|
176
|
-
margin-right: calc(-1 * var(--rf-content-padding, 1.5rem));
|
|
177
|
-
border-radius: 0;
|
|
178
|
-
border-left: none;
|
|
179
|
-
border-right: none;
|
|
180
|
-
}
|
|
181
174
|
.rf-preview__toolbar {
|
|
182
|
-
padding: 0.
|
|
175
|
+
padding: 0.25rem var(--rf-content-padding, 1.5rem) 0.5rem;
|
|
183
176
|
}
|
|
184
177
|
.rf-preview__canvas {
|
|
178
|
+
border-radius: 0;
|
|
179
|
+
border-left: none;
|
|
180
|
+
border-right: none;
|
|
185
181
|
padding: 1.5rem var(--rf-content-padding, 1.5rem);
|
|
186
182
|
}
|
|
183
|
+
.rf-preview__source {
|
|
184
|
+
border-radius: 0;
|
|
185
|
+
border-left: none;
|
|
186
|
+
border-right: none;
|
|
187
|
+
}
|
|
187
188
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
line-height: 1.5;
|
|
10
10
|
color: var(--rf-color-text);
|
|
11
11
|
background: none;
|
|
12
|
+
border-radius: 0;
|
|
12
13
|
position: relative;
|
|
13
14
|
}
|
|
14
15
|
.rf-pullquote::before {
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
font-weight: 700;
|
|
22
23
|
line-height: 1;
|
|
23
24
|
color: var(--rf-color-primary);
|
|
24
|
-
opacity: 0.
|
|
25
|
+
opacity: 0.4;
|
|
25
26
|
}
|
|
26
27
|
.rf-pullquote p {
|
|
27
28
|
margin: 0;
|
|
@@ -43,7 +44,7 @@
|
|
|
43
44
|
}
|
|
44
45
|
.rf-pullquote--left {
|
|
45
46
|
text-align: left;
|
|
46
|
-
border-left:
|
|
47
|
+
border-left: 2px solid var(--rf-color-primary);
|
|
47
48
|
padding-left: 1.5rem;
|
|
48
49
|
}
|
|
49
50
|
.rf-pullquote--left::before {
|
|
@@ -51,7 +52,7 @@
|
|
|
51
52
|
}
|
|
52
53
|
.rf-pullquote--right {
|
|
53
54
|
text-align: right;
|
|
54
|
-
border-right:
|
|
55
|
+
border-right: 2px solid var(--rf-color-primary);
|
|
55
56
|
padding-right: 1.5rem;
|
|
56
57
|
margin-left: auto;
|
|
57
58
|
}
|
|
@@ -74,7 +75,7 @@
|
|
|
74
75
|
/* Style: accent — uses primary color background tint */
|
|
75
76
|
.rf-pullquote--accent {
|
|
76
77
|
background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
|
|
77
|
-
border-radius: var(--rf-radius-
|
|
78
|
+
border-radius: var(--rf-radius-md);
|
|
78
79
|
padding: 2rem 2.5rem;
|
|
79
80
|
}
|
|
80
81
|
.rf-pullquote--accent::before {
|
|
@@ -84,9 +85,9 @@
|
|
|
84
85
|
|
|
85
86
|
/* Style: editorial — decorative top/bottom rules */
|
|
86
87
|
.rf-pullquote--editorial {
|
|
87
|
-
border-top:
|
|
88
|
-
border-bottom:
|
|
89
|
-
padding: 1.
|
|
88
|
+
border-top: 2px solid var(--rf-color-border);
|
|
89
|
+
border-bottom: 2px solid var(--rf-color-border);
|
|
90
|
+
padding: 1.75rem 0;
|
|
90
91
|
font-family: Georgia, 'Times New Roman', serif;
|
|
91
92
|
letter-spacing: 0.01em;
|
|
92
93
|
}
|
|
@@ -94,6 +95,19 @@
|
|
|
94
95
|
display: none;
|
|
95
96
|
}
|
|
96
97
|
|
|
98
|
+
/* Reset inner blockquote — global blockquote styles shouldn't apply here */
|
|
99
|
+
.rf-pullquote blockquote {
|
|
100
|
+
border: none;
|
|
101
|
+
background: none;
|
|
102
|
+
padding: 0;
|
|
103
|
+
margin: 0;
|
|
104
|
+
border-radius: 0;
|
|
105
|
+
color: inherit;
|
|
106
|
+
}
|
|
107
|
+
.rf-pullquote blockquote::before {
|
|
108
|
+
display: none;
|
|
109
|
+
}
|
|
110
|
+
|
|
97
111
|
/* Responsive — floated quotes become full-width on mobile */
|
|
98
112
|
@media (max-width: 768px) {
|
|
99
113
|
.rf-pullquote[data-align="left"],
|
package/styles/runes/realm.css
CHANGED
|
@@ -1,58 +1,49 @@
|
|
|
1
1
|
/* Realm */
|
|
2
2
|
.rf-realm {
|
|
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-realm__badge {
|
|
9
10
|
display: flex;
|
|
10
11
|
flex-wrap: wrap;
|
|
11
|
-
gap: 0.
|
|
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-realm__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);
|
|
23
|
-
color: var(--rf-color-muted);
|
|
24
|
-
}
|
|
19
|
+
.rf-realm__type-badge,
|
|
25
20
|
.rf-realm__scale-badge {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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);
|
|
21
|
+
font-size: 0.8125rem;
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
text-transform: capitalize;
|
|
34
24
|
color: var(--rf-color-muted);
|
|
35
25
|
}
|
|
26
|
+
.rf-realm__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
|
|
27
|
+
.rf-realm__scale-badge::before { content: 'Scale: '; font-weight: 400; opacity: 0.65; }
|
|
28
|
+
|
|
29
|
+
/* Scene image */
|
|
36
30
|
.rf-realm__scene {
|
|
37
|
-
|
|
38
|
-
margin-bottom: 1rem;
|
|
39
|
-
border-radius: var(--rf-radius-md);
|
|
31
|
+
border-radius: var(--rf-radius-lg);
|
|
40
32
|
overflow: hidden;
|
|
41
|
-
aspect-ratio: 16 / 9;
|
|
42
33
|
}
|
|
43
34
|
.rf-realm__scene img {
|
|
35
|
+
display: block;
|
|
44
36
|
width: 100%;
|
|
45
|
-
height:
|
|
46
|
-
|
|
37
|
+
height: auto;
|
|
38
|
+
border-radius: var(--rf-radius-lg);
|
|
47
39
|
}
|
|
40
|
+
|
|
41
|
+
/* Content */
|
|
48
42
|
.rf-realm__sections {
|
|
49
43
|
display: flex;
|
|
50
44
|
flex-direction: column;
|
|
51
45
|
gap: 1rem;
|
|
52
46
|
}
|
|
53
|
-
.rf-realm__content {
|
|
54
|
-
/* content wrapper */
|
|
55
|
-
}
|
|
56
47
|
.rf-realm__content ul,
|
|
57
48
|
.rf-realm__content ol {
|
|
58
49
|
padding-left: 1.5rem;
|
|
@@ -63,6 +54,7 @@
|
|
|
63
54
|
font-weight: 700;
|
|
64
55
|
margin-bottom: 0.5rem;
|
|
65
56
|
color: var(--rf-color-heading);
|
|
57
|
+
order: -1;
|
|
66
58
|
}
|
|
67
59
|
|
|
68
60
|
/* Realm Section */
|
|
@@ -80,3 +72,51 @@
|
|
|
80
72
|
.rf-realm-section__body ol {
|
|
81
73
|
padding-left: 1.5rem;
|
|
82
74
|
}
|
|
75
|
+
|
|
76
|
+
/* Split layout — shared */
|
|
77
|
+
.rf-realm[data-layout="split"],
|
|
78
|
+
.rf-realm[data-layout="split-reverse"] {
|
|
79
|
+
display: grid;
|
|
80
|
+
grid-template-columns: var(--split-ratio, 1fr 1fr);
|
|
81
|
+
gap: var(--split-gap, 2rem);
|
|
82
|
+
align-items: var(--split-valign, start);
|
|
83
|
+
}
|
|
84
|
+
/* Name and badge span full width at the top */
|
|
85
|
+
.rf-realm[data-layout="split"] > span[property="name"],
|
|
86
|
+
.rf-realm[data-layout="split-reverse"] > span[property="name"] {
|
|
87
|
+
grid-column: 1 / -1;
|
|
88
|
+
grid-row: 1;
|
|
89
|
+
}
|
|
90
|
+
.rf-realm[data-layout="split"] > .rf-realm__badge,
|
|
91
|
+
.rf-realm[data-layout="split-reverse"] > .rf-realm__badge {
|
|
92
|
+
grid-column: 1 / -1;
|
|
93
|
+
grid-row: 2;
|
|
94
|
+
}
|
|
95
|
+
/* Split: content left (col 1), scene right (col 2) */
|
|
96
|
+
.rf-realm[data-layout="split"] > .rf-realm__content {
|
|
97
|
+
grid-column: 1;
|
|
98
|
+
grid-row: 3;
|
|
99
|
+
}
|
|
100
|
+
.rf-realm[data-layout="split"] > .rf-realm__scene {
|
|
101
|
+
grid-column: 2;
|
|
102
|
+
grid-row: 3;
|
|
103
|
+
}
|
|
104
|
+
/* Split-reverse: scene left (col 1), content right (col 2) — matches DOM order */
|
|
105
|
+
/* Collapse to single column on small screens */
|
|
106
|
+
@media (max-width: 640px) {
|
|
107
|
+
.rf-realm[data-layout="split"],
|
|
108
|
+
.rf-realm[data-layout="split-reverse"] {
|
|
109
|
+
grid-template-columns: 1fr;
|
|
110
|
+
}
|
|
111
|
+
.rf-realm[data-layout="split"] > .rf-realm__content,
|
|
112
|
+
.rf-realm[data-layout="split"] > .rf-realm__scene {
|
|
113
|
+
grid-column: auto;
|
|
114
|
+
grid-row: auto;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Split layout scene gets subtle depth */
|
|
119
|
+
.rf-realm[data-layout="split"] .rf-realm__scene img,
|
|
120
|
+
.rf-realm[data-layout="split-reverse"] .rf-realm__scene img {
|
|
121
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
122
|
+
}
|