@refrakt-md/lumina 0.33.0 → 0.34.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.
Files changed (141) hide show
  1. package/base.css +29 -29
  2. package/dist/config.d.ts.map +1 -1
  3. package/dist/config.js.map +1 -1
  4. package/dist/icons.d.ts.map +1 -1
  5. package/dist/icons.js +57 -57
  6. package/dist/icons.js.map +1 -1
  7. package/dist/presets/catppuccin.js.map +1 -1
  8. package/dist/presets/dracula.js.map +1 -1
  9. package/dist/presets/gruvbox.js.map +1 -1
  10. package/dist/presets/niwaki.js.map +1 -1
  11. package/dist/presets/nord.js.map +1 -1
  12. package/dist/presets/one-dark.js.map +1 -1
  13. package/dist/presets/solarized.js.map +1 -1
  14. package/dist/presets/tideline.d.ts.map +1 -1
  15. package/dist/presets/tideline.js +20 -4
  16. package/dist/presets/tideline.js.map +1 -1
  17. package/dist/presets/tokyo-night.js.map +1 -1
  18. package/dist/tokens.js.map +1 -1
  19. package/index.css +124 -124
  20. package/package.json +5 -5
  21. package/presets.json +61 -13
  22. package/styles/base/attributes.css +32 -13
  23. package/styles/dimensions/checklist.css +45 -46
  24. package/styles/dimensions/cover.css +71 -51
  25. package/styles/dimensions/density.css +69 -65
  26. package/styles/dimensions/frame.css +116 -57
  27. package/styles/dimensions/metadata.css +110 -103
  28. package/styles/dimensions/motion.css +42 -13
  29. package/styles/dimensions/reading.css +27 -27
  30. package/styles/dimensions/sections.css +44 -45
  31. package/styles/dimensions/sequence.css +56 -57
  32. package/styles/dimensions/state.css +8 -2
  33. package/styles/dimensions/substrate.css +82 -58
  34. package/styles/dimensions/surfaces.css +65 -62
  35. package/styles/elements/blockquote.css +24 -25
  36. package/styles/elements/code.css +72 -71
  37. package/styles/elements/table.css +36 -37
  38. package/styles/global.css +163 -121
  39. package/styles/layouts/blog.css +219 -218
  40. package/styles/layouts/default.css +168 -167
  41. package/styles/layouts/docs.css +121 -122
  42. package/styles/layouts/mobile.css +54 -55
  43. package/styles/layouts/on-this-page.css +46 -47
  44. package/styles/layouts/plan.css +248 -247
  45. package/styles/layouts/search.css +142 -140
  46. package/styles/layouts/split.css +45 -45
  47. package/styles/layouts/theme-toggle.css +33 -31
  48. package/styles/layouts/version-switcher.css +38 -37
  49. package/styles/runes/accordion.css +90 -81
  50. package/styles/runes/aggregate.css +50 -39
  51. package/styles/runes/annotate.css +46 -45
  52. package/styles/runes/api.css +22 -23
  53. package/styles/runes/audio.css +140 -141
  54. package/styles/runes/badge.css +12 -13
  55. package/styles/runes/bar.css +4 -5
  56. package/styles/runes/bento.css +73 -62
  57. package/styles/runes/bg.css +62 -47
  58. package/styles/runes/blog.css +89 -90
  59. package/styles/runes/bond.css +49 -50
  60. package/styles/runes/breadcrumb.css +34 -35
  61. package/styles/runes/budget.css +126 -127
  62. package/styles/runes/bug.css +28 -27
  63. package/styles/runes/card.css +63 -60
  64. package/styles/runes/carousel.css +15 -15
  65. package/styles/runes/cast.css +50 -51
  66. package/styles/runes/changelog.css +45 -46
  67. package/styles/runes/character.css +31 -32
  68. package/styles/runes/chart.css +194 -106
  69. package/styles/runes/codegroup.css +109 -100
  70. package/styles/runes/collection.css +87 -86
  71. package/styles/runes/compare.css +38 -39
  72. package/styles/runes/comparison.css +205 -179
  73. package/styles/runes/conversation.css +36 -33
  74. package/styles/runes/cta.css +135 -132
  75. package/styles/runes/datatable.css +84 -83
  76. package/styles/runes/decision.css +25 -26
  77. package/styles/runes/design-context.css +21 -23
  78. package/styles/runes/details.css +26 -27
  79. package/styles/runes/diagram.css +28 -29
  80. package/styles/runes/diff.css +75 -72
  81. package/styles/runes/drawer.css +276 -198
  82. package/styles/runes/embed.css +20 -21
  83. package/styles/runes/event.css +35 -36
  84. package/styles/runes/expand.css +43 -34
  85. package/styles/runes/faction.css +47 -48
  86. package/styles/runes/feature.css +119 -112
  87. package/styles/runes/figure.css +11 -12
  88. package/styles/runes/file-ref.css +11 -13
  89. package/styles/runes/form.css +155 -154
  90. package/styles/runes/gallery.css +59 -60
  91. package/styles/runes/grid.css +10 -7
  92. package/styles/runes/hero.css +189 -185
  93. package/styles/runes/hint.css +57 -58
  94. package/styles/runes/howto.css +62 -64
  95. package/styles/runes/itinerary.css +133 -134
  96. package/styles/runes/juxtapose.css +83 -82
  97. package/styles/runes/lore.css +32 -34
  98. package/styles/runes/map.css +106 -99
  99. package/styles/runes/mediatext.css +30 -27
  100. package/styles/runes/milestone.css +98 -97
  101. package/styles/runes/mockup.css +338 -335
  102. package/styles/runes/nav.css +465 -450
  103. package/styles/runes/organization.css +23 -20
  104. package/styles/runes/page-section.css +14 -15
  105. package/styles/runes/pagination.css +45 -44
  106. package/styles/runes/palette.css +78 -80
  107. package/styles/runes/placeholder.css +8 -9
  108. package/styles/runes/plan-history.css +160 -161
  109. package/styles/runes/plan-progress.css +15 -16
  110. package/styles/runes/plan-ref.css +32 -23
  111. package/styles/runes/playlist.css +106 -107
  112. package/styles/runes/plot.css +92 -91
  113. package/styles/runes/preview.css +152 -149
  114. package/styles/runes/pricing.css +133 -123
  115. package/styles/runes/progress.css +32 -27
  116. package/styles/runes/pullquote.css +89 -90
  117. package/styles/runes/realm.css +47 -48
  118. package/styles/runes/recipe.css +112 -114
  119. package/styles/runes/relationships.css +77 -76
  120. package/styles/runes/reveal.css +90 -79
  121. package/styles/runes/sandbox.css +59 -60
  122. package/styles/runes/section.css +57 -50
  123. package/styles/runes/showcase.css +35 -16
  124. package/styles/runes/sidenote.css +30 -27
  125. package/styles/runes/snippet.css +8 -9
  126. package/styles/runes/spacing.css +86 -88
  127. package/styles/runes/spec.css +24 -25
  128. package/styles/runes/steps.css +89 -80
  129. package/styles/runes/storyboard.css +46 -45
  130. package/styles/runes/swatch.css +22 -23
  131. package/styles/runes/symbol.css +117 -118
  132. package/styles/runes/tabs.css +88 -79
  133. package/styles/runes/testimonial.css +43 -44
  134. package/styles/runes/textblock.css +32 -28
  135. package/styles/runes/timeline.css +63 -64
  136. package/styles/runes/tint.css +214 -215
  137. package/styles/runes/toc.css +40 -41
  138. package/styles/runes/track.css +89 -90
  139. package/styles/runes/typography.css +89 -91
  140. package/styles/runes/work.css +47 -36
  141. package/styles/runes/xref.css +21 -22
@@ -1,85 +1,94 @@
1
1
  @layer skin {
2
- /* Tabs — skin. The eyebrow stretched-link, the scrollable tab strip, and the tab
2
+ /* Tabs — skin. The eyebrow stretched-link, the scrollable tab strip, and the tab
3
3
  * flex live in @refrakt-md/skeleton (styles/runes/tabs.css). */
4
- .rf-tabs__preamble {
5
- margin-bottom: 1.5rem;
6
- }
7
- .rf-tabs__eyebrow {
8
- font-size: var(--rf-text-sm);
9
- font-weight: var(--rf-weight-semibold);
10
- letter-spacing: var(--rf-tracking-wider);
11
- text-transform: uppercase;
12
- color: var(--rf-color-primary);
13
- margin: 0 0 0.5rem;
14
- }
15
- .rf-tabs__eyebrow:has(a) {
16
- padding: 0.25rem 0.875rem;
17
- border: 1px solid var(--rf-color-border);
18
- border-radius: var(--rf-radius-full);
19
- color: var(--rf-color-text);
20
- font-weight: var(--rf-weight-normal);
21
- text-transform: none;
22
- letter-spacing: var(--rf-tracking-normal);
23
- transition: border-color 150ms ease;
24
- }
25
- .rf-tabs__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
26
- .rf-tabs__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
27
- .rf-tabs__eyebrow:has(a) a::before { border-radius: inherit; }
28
- .rf-tabs__headline {
29
- margin-top: 0;
30
- }
31
- .rf-tabs__blurb {
32
- color: var(--rf-color-muted);
33
- margin-bottom: 0;
34
- }
35
- .rf-tabs__image {
36
- margin-bottom: 1rem;
37
- }
38
-
39
- /* Tab bar — clean bottom line, no background */
40
- .rf-tabs__tabs {
41
- border-bottom: 1px solid var(--rf-color-border);
42
- }
43
- .rf-tabs__panels {
44
- padding: 0;
45
- margin: 0;
46
- }
4
+ .rf-tabs__preamble {
5
+ margin-bottom: 1.5rem;
6
+ }
7
+ .rf-tabs__eyebrow {
8
+ font-size: var(--rf-text-sm);
9
+ font-weight: var(--rf-weight-semibold);
10
+ letter-spacing: var(--rf-tracking-wider);
11
+ text-transform: uppercase;
12
+ color: var(--rf-color-primary);
13
+ margin: 0 0 0.5rem;
14
+ }
15
+ .rf-tabs__eyebrow:has(a) {
16
+ padding: 0.25rem 0.875rem;
17
+ border: 1px solid var(--rf-color-border);
18
+ border-radius: var(--rf-radius-full);
19
+ color: var(--rf-color-text);
20
+ font-weight: var(--rf-weight-normal);
21
+ text-transform: none;
22
+ letter-spacing: var(--rf-tracking-normal);
23
+ transition: border-color 150ms ease;
24
+ }
25
+ .rf-tabs__eyebrow:has(a):hover {
26
+ border-color: var(--rf-color-muted);
27
+ }
28
+ .rf-tabs__eyebrow:has(a) a {
29
+ color: var(--rf-color-primary);
30
+ font-weight: var(--rf-weight-semibold);
31
+ text-decoration: none;
32
+ }
33
+ .rf-tabs__eyebrow:has(a) a::before {
34
+ border-radius: inherit;
35
+ }
36
+ .rf-tabs__headline {
37
+ margin-top: 0;
38
+ }
39
+ .rf-tabs__blurb {
40
+ color: var(--rf-color-muted);
41
+ margin-bottom: 0;
42
+ }
43
+ .rf-tabs__image {
44
+ margin-bottom: 1rem;
45
+ }
47
46
 
48
- /* Tab buttons */
49
- .rf-tab {
50
- padding: 0.625rem 1.25rem;
51
- font-size: var(--rf-text-sm);
52
- font-weight: var(--rf-weight-medium);
53
- color: var(--rf-color-muted);
54
- background: none;
55
- border: none;
56
- border-bottom: 2px solid transparent;
57
- cursor: pointer;
58
- transition: color 200ms ease, border-color 200ms ease;
59
- white-space: nowrap;
60
- font-family: inherit;
61
- }
62
- .rf-tab:hover {
63
- color: var(--rf-color-text);
64
- }
65
- .rf-tab--active {
66
- color: var(--rf-color-primary);
67
- border-bottom-color: var(--rf-color-primary);
68
- font-weight: var(--rf-weight-semibold);
69
- }
47
+ /* Tab bar — clean bottom line, no background */
48
+ .rf-tabs__tabs {
49
+ border-bottom: 1px solid var(--rf-color-border);
50
+ }
51
+ .rf-tabs__panels {
52
+ padding: 0;
53
+ margin: 0;
54
+ }
70
55
 
71
- /* Panel content — breathing room */
72
- .rf-tab-panel {
73
- padding: 1.5rem 0;
74
- }
75
- .rf-tab-panel > *:first-child {
76
- margin-top: 0;
77
- }
78
- .rf-tab-panel > *:last-child {
79
- margin-bottom: 0;
80
- }
81
- .rf-tab-panel pre {
82
- margin: 0;
83
- }
56
+ /* Tab buttons */
57
+ .rf-tab {
58
+ padding: 0.625rem 1.25rem;
59
+ font-size: var(--rf-text-sm);
60
+ font-weight: var(--rf-weight-medium);
61
+ color: var(--rf-color-muted);
62
+ background: none;
63
+ border: none;
64
+ border-bottom: 2px solid transparent;
65
+ cursor: pointer;
66
+ transition:
67
+ color 200ms ease,
68
+ border-color 200ms ease;
69
+ white-space: nowrap;
70
+ font-family: inherit;
71
+ }
72
+ .rf-tab:hover {
73
+ color: var(--rf-color-text);
74
+ }
75
+ .rf-tab--active {
76
+ color: var(--rf-color-primary);
77
+ border-bottom-color: var(--rf-color-primary);
78
+ font-weight: var(--rf-weight-semibold);
79
+ }
84
80
 
81
+ /* Panel content — breathing room */
82
+ .rf-tab-panel {
83
+ padding: 1.5rem 0;
84
+ }
85
+ .rf-tab-panel > *:first-child {
86
+ margin-top: 0;
87
+ }
88
+ .rf-tab-panel > *:last-child {
89
+ margin-bottom: 0;
90
+ }
91
+ .rf-tab-panel pre {
92
+ margin: 0;
93
+ }
85
94
  }
@@ -1,48 +1,47 @@
1
1
  @layer skin {
2
- /* Testimonial — skin. The author block display + avatar box (size/crop) live in
2
+ /* Testimonial — skin. The author block display + avatar box (size/crop) live in
3
3
  * @refrakt-md/skeleton (styles/runes/testimonial.css). */
4
- .rf-testimonial {
5
- border-radius: var(--rf-radius-lg);
6
- padding: 1.75rem 2rem;
7
- background: var(--rf-color-surface);
8
- }
9
- /* Rating block — stars rendered by the shared `[data-meta-type=rating]`
4
+ .rf-testimonial {
5
+ border-radius: var(--rf-radius-lg);
6
+ padding: 1.75rem 2rem;
7
+ background: var(--rf-color-surface);
8
+ }
9
+ /* Rating block — stars rendered by the shared `[data-meta-type=rating]`
10
10
  * treatment; this rule only owns the spacing below the row. */
11
- .rf-testimonial__rating {
12
- margin-bottom: 0.75rem;
13
- font-size: var(--rf-text-lg);
14
- }
15
- .rf-testimonial blockquote {
16
- border: none;
17
- padding: 0;
18
- margin: 0 0 1rem;
19
- font-size: var(--rf-text);
20
- font-style: italic;
21
- line-height: var(--rf-leading-relaxed);
22
- color: var(--rf-color-text);
23
- background: none;
24
- border-radius: 0;
25
- }
26
- .rf-testimonial blockquote::before {
27
- display: none;
28
- }
29
- .rf-testimonial blockquote p {
30
- margin: 0;
31
- }
32
- .rf-testimonial__author-name {
33
- font-weight: var(--rf-weight-bold);
34
- font-style: normal;
35
- font-size: var(--rf-text-sm);
36
- color: var(--rf-color-text);
37
- }
38
- .rf-testimonial__author-role {
39
- margin-top: 0.125rem;
40
- font-size: var(--rf-text-sm);
41
- color: var(--rf-color-muted);
42
- }
43
- .rf-testimonial :is(img, .rf-placeholder) {
44
- border-radius: 50%;
45
- margin-top: 0.75rem;
46
- }
47
-
11
+ .rf-testimonial__rating {
12
+ margin-bottom: 0.75rem;
13
+ font-size: var(--rf-text-lg);
14
+ }
15
+ .rf-testimonial blockquote {
16
+ border: none;
17
+ padding: 0;
18
+ margin: 0 0 1rem;
19
+ font-size: var(--rf-text);
20
+ font-style: italic;
21
+ line-height: var(--rf-leading-relaxed);
22
+ color: var(--rf-color-text);
23
+ background: none;
24
+ border-radius: 0;
25
+ }
26
+ .rf-testimonial blockquote::before {
27
+ display: none;
28
+ }
29
+ .rf-testimonial blockquote p {
30
+ margin: 0;
31
+ }
32
+ .rf-testimonial__author-name {
33
+ font-weight: var(--rf-weight-bold);
34
+ font-style: normal;
35
+ font-size: var(--rf-text-sm);
36
+ color: var(--rf-color-text);
37
+ }
38
+ .rf-testimonial__author-role {
39
+ margin-top: 0.125rem;
40
+ font-size: var(--rf-text-sm);
41
+ color: var(--rf-color-muted);
42
+ }
43
+ .rf-testimonial :is(img, .rf-placeholder) {
44
+ border-radius: 50%;
45
+ margin-top: 0.75rem;
46
+ }
48
47
  }
@@ -1,36 +1,40 @@
1
1
  @layer skin {
2
-
3
- /* Drop cap is now the universal SPEC-108 opt-in, styled on
2
+ /* Drop cap is now the universal SPEC-108 opt-in, styled on
4
3
  * `[data-reading="prose"][data-dropcap]` (dimensions/reading.css); textblock's
5
4
  * body reads as prose, so it inherits the treatment. */
6
5
 
7
- /* Lead paragraph — emphasized opening text */
8
- .rf-textblock--lead .rf-textblock__body > p:first-child {
9
- font-size: var(--rf-text-xl);
10
- line-height: var(--rf-leading-relaxed);
11
- font-weight: var(--rf-weight-normal);
12
- color: var(--rf-color-text);
13
- }
14
-
15
- /* Multi-column text flow */
16
- .rf-textblock[data-columns="2"] .rf-textblock__body {
17
- column-gap: 2rem;
18
- column-rule: 1px solid var(--rf-color-border);
19
- }
20
- .rf-textblock[data-columns="3"] .rf-textblock__body {
21
- column-gap: 2rem;
22
- column-rule: 1px solid var(--rf-color-border);
23
- }
24
- .rf-textblock[data-columns="4"] .rf-textblock__body {
25
- column-gap: 2rem;
26
- column-rule: 1px solid var(--rf-color-border);
27
- }
6
+ /* Lead paragraph — emphasized opening text */
7
+ .rf-textblock--lead .rf-textblock__body > p:first-child {
8
+ font-size: var(--rf-text-xl);
9
+ line-height: var(--rf-leading-relaxed);
10
+ font-weight: var(--rf-weight-normal);
11
+ color: var(--rf-color-text);
12
+ }
28
13
 
29
- /* Text alignment */
30
- .rf-textblock--center .rf-textblock__body { text-align: center; }
31
- .rf-textblock--right .rf-textblock__body { text-align: right; }
32
- .rf-textblock--justify .rf-textblock__body { text-align: justify; }
14
+ /* Multi-column text flow */
15
+ .rf-textblock[data-columns="2"] .rf-textblock__body {
16
+ column-gap: 2rem;
17
+ column-rule: 1px solid var(--rf-color-border);
18
+ }
19
+ .rf-textblock[data-columns="3"] .rf-textblock__body {
20
+ column-gap: 2rem;
21
+ column-rule: 1px solid var(--rf-color-border);
22
+ }
23
+ .rf-textblock[data-columns="4"] .rf-textblock__body {
24
+ column-gap: 2rem;
25
+ column-rule: 1px solid var(--rf-color-border);
26
+ }
33
27
 
34
- /* Responsive — columns collapse on smaller screens */
28
+ /* Text alignment */
29
+ .rf-textblock--center .rf-textblock__body {
30
+ text-align: center;
31
+ }
32
+ .rf-textblock--right .rf-textblock__body {
33
+ text-align: right;
34
+ }
35
+ .rf-textblock--justify .rf-textblock__body {
36
+ text-align: justify;
37
+ }
35
38
 
39
+ /* Responsive — columns collapse on smaller screens */
36
40
  }
@@ -1,68 +1,67 @@
1
1
  @layer skin {
2
- /* Timeline */
3
- .rf-timeline {
4
- margin: 2rem 0;
5
- }
6
- .rf-timeline ol {
7
- padding: 0;
8
- margin: 0;
9
- }
10
- .rf-timeline-entry:last-child {
11
- padding-bottom: 0;
12
- }
13
- .rf-timeline-entry > time {
14
- font-size: var(--rf-text-xs);
15
- font-weight: var(--rf-weight-semibold);
16
- color: var(--rf-color-primary);
17
- letter-spacing: var(--rf-tracking-wide);
18
- margin-bottom: 0.25rem;
19
- }
20
- .rf-timeline-entry > span {
21
- font-size: var(--rf-text);
22
- font-weight: var(--rf-weight-bold);
23
- color: var(--rf-color-text);
24
- margin-bottom: 0.5rem;
25
- }
26
- .rf-timeline-entry__body {
27
- font-size: var(--rf-text-sm);
28
- line-height: var(--rf-leading-relaxed);
29
- color: var(--rf-color-muted);
30
- }
31
- .rf-timeline-entry__body p:last-child {
32
- margin-bottom: 0;
33
- }
2
+ /* Timeline */
3
+ .rf-timeline {
4
+ margin: 2rem 0;
5
+ }
6
+ .rf-timeline ol {
7
+ padding: 0;
8
+ margin: 0;
9
+ }
10
+ .rf-timeline-entry:last-child {
11
+ padding-bottom: 0;
12
+ }
13
+ .rf-timeline-entry > time {
14
+ font-size: var(--rf-text-xs);
15
+ font-weight: var(--rf-weight-semibold);
16
+ color: var(--rf-color-primary);
17
+ letter-spacing: var(--rf-tracking-wide);
18
+ margin-bottom: 0.25rem;
19
+ }
20
+ .rf-timeline-entry > span {
21
+ font-size: var(--rf-text);
22
+ font-weight: var(--rf-weight-bold);
23
+ color: var(--rf-color-text);
24
+ margin-bottom: 0.5rem;
25
+ }
26
+ .rf-timeline-entry__body {
27
+ font-size: var(--rf-text-sm);
28
+ line-height: var(--rf-leading-relaxed);
29
+ color: var(--rf-color-muted);
30
+ }
31
+ .rf-timeline-entry__body p:last-child {
32
+ margin-bottom: 0;
33
+ }
34
34
 
35
- /* Vertical timeline */
36
- .rf-timeline--vertical .rf-timeline-entry {
37
- padding-left: 2rem;
38
- padding-bottom: 2rem;
39
- border-left: 2px solid var(--rf-color-border);
40
- margin-left: 0.375rem;
41
- }
42
- .rf-timeline--vertical .rf-timeline-entry:last-child {
43
- border-left-color: transparent;
44
- }
45
- .rf-timeline--vertical .rf-timeline-entry::before {
46
- border-radius: 50%;
47
- background: var(--rf-color-primary);
48
- border: 2px solid var(--rf-color-bg);
49
- box-shadow: 0 0 0 2px var(--rf-color-primary);
50
- }
51
-
52
- /* Horizontal timeline */
53
- .rf-timeline--horizontal ol {
54
- gap: 2rem;
55
- padding: 2rem 0 1rem;
56
- }
57
- .rf-timeline--horizontal .rf-timeline-entry {
58
- padding-top: 1.5rem;
59
- border-top: 2px solid var(--rf-color-border);
60
- }
61
- .rf-timeline--horizontal .rf-timeline-entry::before {
62
- border-radius: 50%;
63
- background: var(--rf-color-primary);
64
- border: 2px solid var(--rf-color-bg);
65
- box-shadow: 0 0 0 2px var(--rf-color-primary);
66
- }
35
+ /* Vertical timeline */
36
+ .rf-timeline--vertical .rf-timeline-entry {
37
+ padding-left: 2rem;
38
+ padding-bottom: 2rem;
39
+ border-left: 2px solid var(--rf-color-border);
40
+ margin-left: 0.375rem;
41
+ }
42
+ .rf-timeline--vertical .rf-timeline-entry:last-child {
43
+ border-left-color: transparent;
44
+ }
45
+ .rf-timeline--vertical .rf-timeline-entry::before {
46
+ border-radius: 50%;
47
+ background: var(--rf-color-primary);
48
+ border: 2px solid var(--rf-color-bg);
49
+ box-shadow: 0 0 0 2px var(--rf-color-primary);
50
+ }
67
51
 
52
+ /* Horizontal timeline */
53
+ .rf-timeline--horizontal ol {
54
+ gap: 2rem;
55
+ padding: 2rem 0 1rem;
56
+ }
57
+ .rf-timeline--horizontal .rf-timeline-entry {
58
+ padding-top: 1.5rem;
59
+ border-top: 2px solid var(--rf-color-border);
60
+ }
61
+ .rf-timeline--horizontal .rf-timeline-entry::before {
62
+ border-radius: 50%;
63
+ background: var(--rf-color-primary);
64
+ border: 2px solid var(--rf-color-bg);
65
+ box-shadow: 0 0 0 2px var(--rf-color-primary);
66
+ }
68
67
  }