@refrakt-md/lumina 0.5.1 → 0.7.0

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.
@@ -0,0 +1,164 @@
1
+ /* Budget */
2
+ .rf-budget {
3
+ border: 1px solid var(--rf-color-border);
4
+ border-radius: var(--rf-radius-lg);
5
+ padding: 2rem;
6
+ margin: 1.5rem 0;
7
+ }
8
+ .rf-budget__header {
9
+ margin-bottom: 1.5rem;
10
+ padding-bottom: 1rem;
11
+ border-bottom: 1px solid var(--rf-color-border);
12
+ }
13
+ .rf-budget__title {
14
+ margin: 0 0 0.5rem;
15
+ font-size: 1.25rem;
16
+ font-weight: 700;
17
+ color: var(--rf-color-text);
18
+ }
19
+ .rf-budget__meta {
20
+ display: flex;
21
+ flex-wrap: wrap;
22
+ gap: 1rem;
23
+ align-items: center;
24
+ }
25
+ .rf-budget__meta-item {
26
+ font-size: 0.8125rem;
27
+ font-weight: 500;
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
+ }
33
+ .rf-budget__categories {
34
+ display: flex;
35
+ flex-direction: column;
36
+ gap: 1.25rem;
37
+ }
38
+
39
+ /* Budget Category */
40
+ .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);
45
+ }
46
+ .rf-budget-category--estimate {
47
+ border-style: dashed;
48
+ border-color: var(--rf-color-warning);
49
+ }
50
+ .rf-budget-category__header {
51
+ display: flex;
52
+ justify-content: space-between;
53
+ align-items: center;
54
+ margin-bottom: 0.75rem;
55
+ padding-bottom: 0.5rem;
56
+ border-bottom: 1px solid var(--rf-color-border);
57
+ }
58
+ .rf-budget-category--estimate .rf-budget-category__header::after {
59
+ content: 'est.';
60
+ font-size: 0.6875rem;
61
+ font-weight: 600;
62
+ text-transform: uppercase;
63
+ letter-spacing: 0.05em;
64
+ color: var(--rf-color-warning);
65
+ background: var(--rf-color-warning-bg);
66
+ padding: 0.0625rem 0.375rem;
67
+ border-radius: var(--rf-radius-full);
68
+ margin-left: 0.5rem;
69
+ }
70
+ .rf-budget-category__label {
71
+ font-size: 0.9375rem;
72
+ font-weight: 600;
73
+ color: var(--rf-color-text);
74
+ }
75
+ .rf-budget-category__subtotal {
76
+ font-size: 0.9375rem;
77
+ font-weight: 600;
78
+ color: var(--rf-color-text);
79
+ white-space: nowrap;
80
+ }
81
+ .rf-budget-category__line-items {
82
+ list-style: none;
83
+ padding: 0;
84
+ margin: 0;
85
+ }
86
+
87
+ /* Budget Line Item */
88
+ .rf-budget-line-item {
89
+ display: flex;
90
+ justify-content: space-between;
91
+ align-items: baseline;
92
+ padding: 0.3125rem 0;
93
+ gap: 1rem;
94
+ }
95
+ .rf-budget-line-item + .rf-budget-line-item {
96
+ border-top: 1px solid var(--rf-color-border-light, var(--rf-color-border));
97
+ }
98
+ .rf-budget-line-item__description {
99
+ font-size: 0.875rem;
100
+ color: var(--rf-color-muted);
101
+ flex: 1;
102
+ min-width: 0;
103
+ }
104
+ .rf-budget-line-item__amount {
105
+ font-size: 0.875rem;
106
+ font-weight: 500;
107
+ color: var(--rf-color-text);
108
+ white-space: nowrap;
109
+ font-variant-numeric: tabular-nums;
110
+ }
111
+
112
+ /* Budget Footer (injected by postTransform) */
113
+ .rf-budget__footer {
114
+ margin-top: 1.5rem;
115
+ padding-top: 1rem;
116
+ border-top: 2px solid var(--rf-color-text);
117
+ display: flex;
118
+ flex-direction: column;
119
+ gap: 0.5rem;
120
+ }
121
+ .rf-budget__total {
122
+ display: flex;
123
+ justify-content: space-between;
124
+ align-items: baseline;
125
+ }
126
+ .rf-budget__total-label {
127
+ font-size: 1rem;
128
+ font-weight: 700;
129
+ color: var(--rf-color-text);
130
+ }
131
+ .rf-budget__total-amount {
132
+ font-size: 1.25rem;
133
+ font-weight: 700;
134
+ color: var(--rf-color-text);
135
+ font-variant-numeric: tabular-nums;
136
+ }
137
+ .rf-budget__per-person,
138
+ .rf-budget__per-day {
139
+ display: flex;
140
+ justify-content: space-between;
141
+ align-items: baseline;
142
+ }
143
+ .rf-budget__per-person-label,
144
+ .rf-budget__per-day-label {
145
+ font-size: 0.8125rem;
146
+ color: var(--rf-color-muted);
147
+ }
148
+ .rf-budget__per-person-amount,
149
+ .rf-budget__per-day-amount {
150
+ font-size: 0.9375rem;
151
+ font-weight: 500;
152
+ color: var(--rf-color-muted);
153
+ font-variant-numeric: tabular-nums;
154
+ }
155
+
156
+ /* Summary style — hide line items, show only category headers */
157
+ [data-style="summary"] .rf-budget-category__line-items {
158
+ display: none;
159
+ }
160
+ [data-style="summary"] .rf-budget-category__header {
161
+ margin-bottom: 0;
162
+ padding-bottom: 0;
163
+ border-bottom: none;
164
+ }
@@ -0,0 +1,104 @@
1
+ /* Character */
2
+ .rf-character {
3
+ border: 1px solid var(--rf-color-border);
4
+ border-radius: var(--rf-radius-lg);
5
+ padding: 2rem;
6
+ margin: 1.5rem 0;
7
+ }
8
+ .rf-character__badge {
9
+ display: flex;
10
+ flex-wrap: wrap;
11
+ gap: 0.5rem;
12
+ margin-bottom: 1rem;
13
+ }
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
+ }
25
+ .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);
34
+ color: var(--rf-color-muted);
35
+ }
36
+ .rf-character__portrait {
37
+ float: right;
38
+ margin-left: 1.5rem;
39
+ margin-bottom: 1rem;
40
+ width: 120px;
41
+ height: 120px;
42
+ border-radius: var(--rf-radius-full);
43
+ overflow: hidden;
44
+ }
45
+ .rf-character__portrait img {
46
+ width: 100%;
47
+ height: 100%;
48
+ object-fit: cover;
49
+ }
50
+ .rf-character__sections {
51
+ display: flex;
52
+ flex-direction: column;
53
+ gap: 1rem;
54
+ }
55
+ .rf-character__content {
56
+ clear: both;
57
+ }
58
+ .rf-character__content ul,
59
+ .rf-character__content ol {
60
+ padding-left: 1.5rem;
61
+ }
62
+ .rf-character > span[property="name"] {
63
+ display: block;
64
+ font-size: 1.5rem;
65
+ font-weight: 700;
66
+ margin-bottom: 0.5rem;
67
+ color: var(--rf-color-heading);
68
+ }
69
+
70
+ /* Role variant colors */
71
+ .rf-character[data-role="protagonist"] .rf-character__role-badge {
72
+ background: var(--rf-color-success-bg);
73
+ color: var(--rf-color-success);
74
+ }
75
+ .rf-character[data-role="antagonist"] .rf-character__role-badge {
76
+ background: var(--rf-color-danger-bg);
77
+ color: var(--rf-color-danger);
78
+ }
79
+
80
+ /* Status indicators */
81
+ .rf-character[data-status="dead"] .rf-character__status-badge {
82
+ background: var(--rf-color-danger-bg);
83
+ color: var(--rf-color-danger);
84
+ }
85
+ .rf-character[data-status="missing"] .rf-character__status-badge {
86
+ background: var(--rf-color-warning-bg);
87
+ color: var(--rf-color-warning);
88
+ }
89
+
90
+ /* Character Section */
91
+ .rf-character-section {
92
+ padding: 0.75rem 0;
93
+ border-top: 1px solid var(--rf-color-border);
94
+ }
95
+ .rf-character-section__header {
96
+ font-size: 1.125rem;
97
+ font-weight: 600;
98
+ margin-bottom: 0.5rem;
99
+ color: var(--rf-color-heading);
100
+ }
101
+ .rf-character-section__body ul,
102
+ .rf-character-section__body ol {
103
+ padding-left: 1.5rem;
104
+ }
@@ -0,0 +1,81 @@
1
+ /* Faction */
2
+ .rf-faction {
3
+ border: 1px solid var(--rf-color-border);
4
+ border-radius: var(--rf-radius-lg);
5
+ padding: 2rem;
6
+ margin: 1.5rem 0;
7
+ }
8
+ .rf-faction__badge {
9
+ display: flex;
10
+ flex-wrap: wrap;
11
+ gap: 0.5rem;
12
+ margin-bottom: 1rem;
13
+ }
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);
23
+ color: var(--rf-color-muted);
24
+ }
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);
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);
46
+ }
47
+ .rf-faction__sections {
48
+ display: flex;
49
+ flex-direction: column;
50
+ gap: 1rem;
51
+ }
52
+ .rf-faction__content {
53
+ /* content wrapper */
54
+ }
55
+ .rf-faction__content ul,
56
+ .rf-faction__content ol {
57
+ padding-left: 1.5rem;
58
+ }
59
+ .rf-faction > span[property="name"] {
60
+ display: block;
61
+ font-size: 1.5rem;
62
+ font-weight: 700;
63
+ margin-bottom: 0.5rem;
64
+ color: var(--rf-color-heading);
65
+ }
66
+
67
+ /* Faction Section */
68
+ .rf-faction-section {
69
+ padding: 0.75rem 0;
70
+ border-top: 1px solid var(--rf-color-border);
71
+ }
72
+ .rf-faction-section__header {
73
+ font-size: 1.125rem;
74
+ font-weight: 600;
75
+ margin-bottom: 0.5rem;
76
+ color: var(--rf-color-heading);
77
+ }
78
+ .rf-faction-section__body ul,
79
+ .rf-faction-section__body ol {
80
+ padding-left: 1.5rem;
81
+ }
@@ -0,0 +1,173 @@
1
+ /* Itinerary */
2
+ .rf-itinerary {
3
+ margin: 2rem 0;
4
+ }
5
+ .rf-itinerary > header {
6
+ margin-bottom: 1.5rem;
7
+ }
8
+
9
+ /* Day grouping */
10
+ .rf-itinerary-day {
11
+ margin-bottom: 2rem;
12
+ }
13
+ .rf-itinerary-day:last-child {
14
+ margin-bottom: 0;
15
+ }
16
+ .rf-itinerary-day__header {
17
+ font-size: 1.15rem;
18
+ font-weight: 700;
19
+ color: var(--rf-color-text);
20
+ margin-bottom: 1rem;
21
+ padding-bottom: 0.5rem;
22
+ border-bottom: 2px solid var(--rf-color-border);
23
+ }
24
+ .rf-itinerary-day__header:empty {
25
+ display: none;
26
+ }
27
+ .rf-itinerary-day ol {
28
+ list-style: none;
29
+ padding: 0;
30
+ margin: 0;
31
+ }
32
+
33
+ /* Stop */
34
+ .rf-itinerary-stop {
35
+ position: relative;
36
+ padding-left: 2rem;
37
+ padding-bottom: 1.5rem;
38
+ border-left: 2px solid var(--rf-color-border);
39
+ margin-left: 0.375rem;
40
+ }
41
+ .rf-itinerary-stop:last-child {
42
+ border-left-color: transparent;
43
+ padding-bottom: 0;
44
+ }
45
+ .rf-itinerary-stop::before {
46
+ content: '';
47
+ position: absolute;
48
+ left: -0.4375rem;
49
+ top: 0.25rem;
50
+ width: 0.75rem;
51
+ height: 0.75rem;
52
+ border-radius: 50%;
53
+ background: var(--rf-color-primary);
54
+ border: 2px solid var(--rf-color-bg);
55
+ box-shadow: 0 0 0 2px var(--rf-color-primary);
56
+ }
57
+
58
+ /* Stop time */
59
+ .rf-itinerary-stop__time {
60
+ display: block;
61
+ font-size: 0.8rem;
62
+ font-weight: 600;
63
+ color: var(--rf-color-primary);
64
+ letter-spacing: 0.02em;
65
+ margin-bottom: 0.15rem;
66
+ }
67
+
68
+ /* Stop location */
69
+ .rf-itinerary-stop__location {
70
+ display: block;
71
+ font-size: 1.05rem;
72
+ font-weight: 700;
73
+ color: var(--rf-color-text);
74
+ margin-bottom: 0.35rem;
75
+ }
76
+
77
+ /* Stop body */
78
+ .rf-itinerary-stop__body {
79
+ font-size: 0.925rem;
80
+ line-height: 1.65;
81
+ color: var(--rf-color-muted);
82
+ }
83
+ .rf-itinerary-stop__body p:last-child {
84
+ margin-bottom: 0;
85
+ }
86
+
87
+ /* Duration badge */
88
+ .rf-itinerary-stop[data-duration]::after {
89
+ content: attr(data-duration);
90
+ position: absolute;
91
+ top: 0.15rem;
92
+ right: 0;
93
+ font-size: 0.75rem;
94
+ font-weight: 500;
95
+ color: var(--rf-color-muted);
96
+ background: var(--rf-color-surface);
97
+ padding: 0.1rem 0.5rem;
98
+ border-radius: var(--rf-radius-sm);
99
+ }
100
+
101
+ /* Activity variant dots */
102
+ .rf-itinerary-stop--transport::before {
103
+ background: var(--rf-color-info);
104
+ box-shadow: 0 0 0 2px var(--rf-color-info);
105
+ }
106
+ .rf-itinerary-stop--food::before {
107
+ background: var(--rf-color-warning);
108
+ box-shadow: 0 0 0 2px var(--rf-color-warning);
109
+ }
110
+ .rf-itinerary-stop--sightseeing::before {
111
+ background: var(--rf-color-primary);
112
+ box-shadow: 0 0 0 2px var(--rf-color-primary);
113
+ }
114
+ .rf-itinerary-stop--lodging::before {
115
+ background: var(--rf-color-success);
116
+ box-shadow: 0 0 0 2px var(--rf-color-success);
117
+ }
118
+ .rf-itinerary-stop--activity::before {
119
+ background: var(--rf-color-accent);
120
+ box-shadow: 0 0 0 2px var(--rf-color-accent);
121
+ }
122
+ .rf-itinerary-stop--rest::before {
123
+ background: var(--rf-color-muted);
124
+ box-shadow: 0 0 0 2px var(--rf-color-muted);
125
+ }
126
+
127
+ /* Horizontal direction */
128
+ .rf-itinerary--horizontal .rf-itinerary-day ol {
129
+ display: flex;
130
+ gap: 2rem;
131
+ overflow-x: auto;
132
+ padding: 2rem 0 1rem;
133
+ }
134
+ .rf-itinerary--horizontal .rf-itinerary-stop {
135
+ min-width: 14rem;
136
+ padding-left: 0;
137
+ padding-top: 1.5rem;
138
+ padding-bottom: 0;
139
+ border-left: none;
140
+ border-top: 2px solid var(--rf-color-border);
141
+ margin-left: 0;
142
+ }
143
+ .rf-itinerary--horizontal .rf-itinerary-stop:last-child {
144
+ border-top-color: transparent;
145
+ }
146
+ .rf-itinerary--horizontal .rf-itinerary-stop::before {
147
+ left: 0.5rem;
148
+ top: -0.4375rem;
149
+ }
150
+ .rf-itinerary--horizontal .rf-itinerary-stop[data-duration]::after {
151
+ position: static;
152
+ display: inline-block;
153
+ margin-top: 0.5rem;
154
+ }
155
+
156
+ /* Compact style */
157
+ .rf-itinerary--compact .rf-itinerary-stop__body {
158
+ display: none;
159
+ }
160
+ .rf-itinerary--compact .rf-itinerary-stop {
161
+ padding-bottom: 0.75rem;
162
+ }
163
+ .rf-itinerary--compact .rf-itinerary-stop__location {
164
+ display: inline;
165
+ font-size: 0.925rem;
166
+ }
167
+ .rf-itinerary--compact .rf-itinerary-stop__time {
168
+ display: inline;
169
+ margin-bottom: 0;
170
+ }
171
+ .rf-itinerary--compact .rf-itinerary-stop__time::after {
172
+ content: ' — ';
173
+ }
@@ -0,0 +1,68 @@
1
+ /* Lore */
2
+ .rf-lore {
3
+ border: 1px solid var(--rf-color-border);
4
+ border-radius: var(--rf-radius-lg);
5
+ padding: 2rem;
6
+ margin: 1.5rem 0;
7
+ position: relative;
8
+ }
9
+ .rf-lore__badge {
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ gap: 0.5rem;
13
+ margin-bottom: 1rem;
14
+ }
15
+ .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);
24
+ color: var(--rf-color-muted);
25
+ }
26
+ .rf-lore__content {
27
+ transition: filter 0.3s ease;
28
+ }
29
+ .rf-lore__content ul,
30
+ .rf-lore__content ol {
31
+ padding-left: 1.5rem;
32
+ }
33
+ .rf-lore__content blockquote {
34
+ border-left: 3px solid var(--rf-color-primary);
35
+ padding-left: 1rem;
36
+ margin: 1rem 0;
37
+ font-style: italic;
38
+ color: var(--rf-color-muted);
39
+ }
40
+ .rf-lore > span[property="title"] {
41
+ display: block;
42
+ font-size: 1.5rem;
43
+ font-weight: 700;
44
+ margin-bottom: 0.5rem;
45
+ color: var(--rf-color-heading);
46
+ }
47
+
48
+ /* Spoiler mode */
49
+ .rf-lore--spoiler .rf-lore__content {
50
+ filter: blur(5px);
51
+ user-select: none;
52
+ }
53
+ .rf-lore--spoiler::after {
54
+ content: 'Contains spoilers \2014 click to reveal';
55
+ position: absolute;
56
+ top: 50%;
57
+ left: 50%;
58
+ transform: translate(-50%, -50%);
59
+ padding: 0.5rem 1rem;
60
+ background: var(--rf-color-bg);
61
+ border: 1px solid var(--rf-color-border);
62
+ border-radius: var(--rf-radius-md);
63
+ font-size: 0.875rem;
64
+ font-weight: 500;
65
+ color: var(--rf-color-muted);
66
+ cursor: pointer;
67
+ z-index: 1;
68
+ }
@@ -0,0 +1,72 @@
1
+ /* MediaText */
2
+ .rf-mediatext {
3
+ margin: 1.5rem 0;
4
+ }
5
+
6
+ /* Grid mode (default — no wrap) */
7
+ .rf-mediatext:not([data-wrap="true"]) {
8
+ display: grid;
9
+ gap: 2rem;
10
+ align-items: start;
11
+ }
12
+
13
+ /* Ratio variants for grid mode */
14
+ .rf-mediatext[data-ratio="1:1"]:not([data-wrap="true"]) {
15
+ grid-template-columns: 1fr 1fr;
16
+ }
17
+ .rf-mediatext[data-ratio="1:2"]:not([data-wrap="true"]) {
18
+ grid-template-columns: 1fr 2fr;
19
+ }
20
+ .rf-mediatext[data-ratio="2:1"]:not([data-wrap="true"]) {
21
+ grid-template-columns: 2fr 1fr;
22
+ }
23
+
24
+ /* Right alignment — media on the right in grid mode */
25
+ .rf-mediatext--right:not([data-wrap="true"]) .rf-mediatext__media {
26
+ order: 1;
27
+ }
28
+
29
+ /* Media container */
30
+ .rf-mediatext__media img {
31
+ max-width: 100%;
32
+ height: auto;
33
+ border-radius: var(--rf-radius-md);
34
+ }
35
+
36
+ /* Body */
37
+ .rf-mediatext__body p:first-child { margin-top: 0; }
38
+ .rf-mediatext__body p:last-child { margin-bottom: 0; }
39
+
40
+ /* Wrap mode — float-based text wrapping */
41
+ .rf-mediatext[data-wrap="true"] .rf-mediatext__media {
42
+ max-width: 50%;
43
+ margin-bottom: 1rem;
44
+ }
45
+ .rf-mediatext--left[data-wrap="true"] .rf-mediatext__media {
46
+ float: left;
47
+ margin-right: 2rem;
48
+ }
49
+ .rf-mediatext--right[data-wrap="true"] .rf-mediatext__media {
50
+ float: right;
51
+ margin-left: 2rem;
52
+ }
53
+ .rf-mediatext[data-wrap="true"]::after {
54
+ content: '';
55
+ display: table;
56
+ clear: both;
57
+ }
58
+
59
+ /* Responsive — stack on mobile */
60
+ @media (max-width: 768px) {
61
+ .rf-mediatext:not([data-wrap="true"]) {
62
+ grid-template-columns: 1fr !important;
63
+ }
64
+ .rf-mediatext--right:not([data-wrap="true"]) .rf-mediatext__media {
65
+ order: 0;
66
+ }
67
+ .rf-mediatext[data-wrap="true"] .rf-mediatext__media {
68
+ float: none;
69
+ max-width: 100%;
70
+ margin: 0 0 1rem 0;
71
+ }
72
+ }