@sproutsocial/seeds-react-narrative-kit 0.6.2 → 0.6.5
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/.turbo/turbo-build.log +6 -6
- package/CHANGELOG.md +21 -0
- package/README.md +2 -2
- package/dist/ai-container.css +18 -20
- package/dist/eyebrow-token.css +18 -20
- package/dist/metric-highlight.css +155 -147
- package/dist/narrative-attribution.css +34 -36
- package/dist/narrative-container.css +38 -41
- package/dist/narrative-data-callout.css +51 -53
- package/dist/narrative-divider.css +9 -11
- package/dist/narrative-headline.css +93 -94
- package/dist/narrative-ordered-list.css +80 -74
- package/dist/narrative-section.css +21 -23
- package/dist/narrative-social-media-card.css +61 -55
- package/dist/narrative-summary.css +78 -80
- package/dist/pull-quote.css +43 -45
- package/package.json +3 -3
- package/src/ai-container.css +18 -20
- package/src/eyebrow-token.css +18 -20
- package/src/metric-highlight.css +155 -147
- package/src/narrative-attribution.css +34 -36
- package/src/narrative-container.css +38 -41
- package/src/narrative-data-callout.css +51 -53
- package/src/narrative-divider.css +9 -11
- package/src/narrative-headline.css +93 -94
- package/src/narrative-ordered-list.css +80 -74
- package/src/narrative-section.css +21 -23
- package/src/narrative-social-media-card.css +61 -55
- package/src/narrative-summary.css +78 -80
- package/src/pull-quote.css +43 -45
|
@@ -14,119 +14,118 @@
|
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
@layer components {
|
|
17
|
+
/* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
|
|
18
|
+
.seeds-narrative-headline {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
margin: 0;
|
|
21
|
+
font-family: var(--font-family);
|
|
22
|
+
font-size: var(--font-size-700);
|
|
23
|
+
line-height: var(--line-height-700);
|
|
24
|
+
font-weight: var(--font-weight-bold);
|
|
25
|
+
letter-spacing: -0.02em;
|
|
26
|
+
color: var(--color-text-headline);
|
|
27
|
+
}
|
|
17
28
|
|
|
18
|
-
/*
|
|
19
|
-
.seeds-narrative-headline {
|
|
20
|
-
box-sizing: border-box;
|
|
21
|
-
margin: 0;
|
|
22
|
-
font-family: var(--font-family);
|
|
23
|
-
font-size: var(--font-size-700);
|
|
24
|
-
line-height: var(--line-height-700);
|
|
25
|
-
font-weight: var(--font-weight-bold);
|
|
26
|
-
letter-spacing: -0.02em;
|
|
27
|
-
color: var(--color-text-headline);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
|
|
29
|
+
/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
|
|
31
30
|
spacing, and color are inherited from the base class. */
|
|
32
|
-
.seeds-narrative-headline-small {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
31
|
+
.seeds-narrative-headline-small {
|
|
32
|
+
font-size: var(--font-size-600); /* 24px */
|
|
33
|
+
line-height: var(--line-height-600); /* 32px */
|
|
34
|
+
}
|
|
36
35
|
|
|
37
|
-
/* Static gradient accent for a span of headline text ("highlighted word").
|
|
36
|
+
/* Static gradient accent for a span of headline text ("highlighted word").
|
|
38
37
|
Paints the AI brand gradient onto the glyphs via background-clip. */
|
|
39
|
-
.seeds-narrative-headline-highlight {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
38
|
+
.seeds-narrative-headline-highlight {
|
|
39
|
+
background: var(--color-gradient-ai);
|
|
40
|
+
-webkit-background-clip: text;
|
|
41
|
+
background-clip: text;
|
|
42
|
+
color: transparent;
|
|
43
|
+
}
|
|
45
44
|
|
|
46
|
-
/* -------------------------------------------------------------------------
|
|
45
|
+
/* -------------------------------------------------------------------------
|
|
47
46
|
"Roll" variant — vertical word roll. The active word slides into view
|
|
48
47
|
while the previous one rolls out.
|
|
49
48
|
------------------------------------------------------------------------- */
|
|
50
|
-
.seeds-narrative-headline-roll {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
.seeds-narrative-headline-roll {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
position: relative;
|
|
52
|
+
/* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
|
|
54
53
|
snaps its baseline to the bottom margin edge, dropping the rolling word
|
|
55
54
|
below the surrounding text. clip-path keeps the natural baseline. */
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/* Invisible word that holds the box width to the active word. */
|
|
60
|
-
.seeds-narrative-headline-roll-sizer {
|
|
61
|
-
display: inline-block;
|
|
62
|
-
visibility: hidden;
|
|
63
|
-
white-space: nowrap;
|
|
64
|
-
pointer-events: none;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.seeds-narrative-headline-roll-word {
|
|
68
|
-
display: inline-block;
|
|
69
|
-
position: absolute;
|
|
70
|
-
top: 0;
|
|
71
|
-
left: 0;
|
|
72
|
-
white-space: nowrap;
|
|
73
|
-
transform: translateY(100%);
|
|
74
|
-
opacity: 0;
|
|
75
|
-
transition:
|
|
76
|
-
transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
|
|
77
|
-
opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
|
|
78
|
-
}
|
|
55
|
+
clip-path: inset(0);
|
|
56
|
+
}
|
|
79
57
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
58
|
+
/* Invisible word that holds the box width to the active word. */
|
|
59
|
+
.seeds-narrative-headline-roll-sizer {
|
|
60
|
+
display: inline-block;
|
|
61
|
+
visibility: hidden;
|
|
62
|
+
white-space: nowrap;
|
|
63
|
+
pointer-events: none;
|
|
64
|
+
}
|
|
84
65
|
|
|
85
|
-
.seeds-narrative-headline-roll-word
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
66
|
+
.seeds-narrative-headline-roll-word {
|
|
67
|
+
display: inline-block;
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 0;
|
|
70
|
+
left: 0;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
transform: translateY(100%);
|
|
73
|
+
opacity: 0;
|
|
74
|
+
transition: transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
|
|
75
|
+
opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
|
|
76
|
+
}
|
|
89
77
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
94
|
-
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-active {
|
|
95
|
-
transform: translateY(0);
|
|
96
|
-
}
|
|
97
|
-
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
|
|
98
|
-
transform: translateY(100%);
|
|
99
|
-
}
|
|
78
|
+
.seeds-narrative-headline-roll-word-active {
|
|
79
|
+
transform: translateY(0);
|
|
80
|
+
opacity: 1;
|
|
81
|
+
}
|
|
100
82
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
-webkit-background-clip: text;
|
|
106
|
-
background-clip: text;
|
|
107
|
-
color: transparent;
|
|
108
|
-
animation: seeds-narrative-headline-grad-shift 8s ease infinite;
|
|
109
|
-
}
|
|
83
|
+
.seeds-narrative-headline-roll-word-past {
|
|
84
|
+
transform: translateY(-100%);
|
|
85
|
+
opacity: 0;
|
|
86
|
+
}
|
|
110
87
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
background-position: 0% 50%;
|
|
88
|
+
/* Reverse the roll direction. */
|
|
89
|
+
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
|
|
90
|
+
transform: translateY(-100%);
|
|
115
91
|
}
|
|
116
|
-
|
|
117
|
-
|
|
92
|
+
.seeds-narrative-headline-roll-down
|
|
93
|
+
.seeds-narrative-headline-roll-word-active {
|
|
94
|
+
transform: translateY(0);
|
|
118
95
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
/* The JS cycle is already disabled under reduced-motion (the first word holds);
|
|
122
|
-
also flatten the transition and shimmer so any in-flight motion settles. */
|
|
123
|
-
@media (prefers-reduced-motion: reduce) {
|
|
124
|
-
.seeds-narrative-headline-roll-word {
|
|
125
|
-
transition: none;
|
|
96
|
+
.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
|
|
97
|
+
transform: translateY(100%);
|
|
126
98
|
}
|
|
99
|
+
|
|
100
|
+
/* Gradient-painted rolling words with a slow shimmer. */
|
|
127
101
|
.seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
|
|
128
|
-
|
|
102
|
+
background: var(--color-gradient-ai);
|
|
103
|
+
background-size: 200% 200%;
|
|
104
|
+
-webkit-background-clip: text;
|
|
105
|
+
background-clip: text;
|
|
106
|
+
color: transparent;
|
|
107
|
+
animation: seeds-narrative-headline-grad-shift 8s ease infinite;
|
|
129
108
|
}
|
|
130
|
-
}
|
|
131
109
|
|
|
110
|
+
@keyframes seeds-narrative-headline-grad-shift {
|
|
111
|
+
0%,
|
|
112
|
+
100% {
|
|
113
|
+
background-position: 0% 50%;
|
|
114
|
+
}
|
|
115
|
+
50% {
|
|
116
|
+
background-position: 100% 50%;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* The JS cycle is already disabled under reduced-motion (the first word holds);
|
|
121
|
+
also flatten the transition and shimmer so any in-flight motion settles. */
|
|
122
|
+
@media (prefers-reduced-motion: reduce) {
|
|
123
|
+
.seeds-narrative-headline-roll-word {
|
|
124
|
+
transition: none;
|
|
125
|
+
}
|
|
126
|
+
.seeds-narrative-headline-roll-gradient
|
|
127
|
+
.seeds-narrative-headline-roll-word {
|
|
128
|
+
animation: none;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
132
131
|
}
|
|
@@ -14,99 +14,105 @@
|
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
@layer components {
|
|
17
|
-
|
|
18
|
-
/* Establishes the query container. The track inside reacts to this element's
|
|
17
|
+
/* Establishes the query container. The track inside reacts to this element's
|
|
19
18
|
inline size — a container query can only style descendants of the container,
|
|
20
19
|
never the container element itself. */
|
|
21
|
-
.seeds-narrative-ordered-list {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
20
|
+
.seeds-narrative-ordered-list {
|
|
21
|
+
container-type: inline-size;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
font-family: var(--font-family);
|
|
24
|
+
}
|
|
26
25
|
|
|
27
|
-
/* The list itself, and the default (stacked) layout. The horizontal modifier
|
|
26
|
+
/* The list itself, and the default (stacked) layout. The horizontal modifier
|
|
28
27
|
only expands to a row once the container query below has room, so horizontal
|
|
29
28
|
collapses back to this stack when narrow. */
|
|
30
|
-
.seeds-narrative-ordered-list-track {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
29
|
+
.seeds-narrative-ordered-list-track {
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
gap: var(--space-400); /* 16px */
|
|
33
|
+
margin: 0;
|
|
34
|
+
padding: 0;
|
|
35
|
+
list-style: none;
|
|
36
|
+
}
|
|
38
37
|
|
|
39
|
-
/* An item row: the ordinal beside the body, on its own rounded surface. */
|
|
40
|
-
.seeds-narrative-ordered-list-item {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
38
|
+
/* An item row: the ordinal beside the body, on its own rounded surface. */
|
|
39
|
+
.seeds-narrative-ordered-list-item {
|
|
40
|
+
display: flex;
|
|
41
|
+
gap: var(--space-450); /* 24px */
|
|
42
|
+
align-items: flex-start;
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
min-width: 0;
|
|
45
|
+
padding: var(--space-400) var(--space-450); /* 16px 24px */
|
|
46
|
+
border-radius: var(--radius-800); /* 12px */
|
|
47
|
+
background-color: var(--color-app-bg-base);
|
|
48
|
+
}
|
|
50
49
|
|
|
51
|
-
/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
|
|
50
|
+
/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
|
|
52
51
|
monospace stack — mirrors the value treatment in metric-highlight.css. */
|
|
53
|
-
.seeds-narrative-ordered-list-number {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
52
|
+
.seeds-narrative-ordered-list-number {
|
|
53
|
+
margin: 0;
|
|
54
|
+
flex-shrink: 0;
|
|
55
|
+
font-family: var(
|
|
56
|
+
--font-family-mono,
|
|
57
|
+
ui-monospace,
|
|
58
|
+
"SF Mono",
|
|
59
|
+
SFMono-Regular,
|
|
60
|
+
Menlo,
|
|
61
|
+
monospace
|
|
62
|
+
);
|
|
63
|
+
font-size: var(--font-size-700); /* 32px */
|
|
64
|
+
line-height: var(--line-height-700); /* 40px */
|
|
65
|
+
font-weight: var(--font-weight-bold);
|
|
66
|
+
color: var(--color-text-headline);
|
|
67
|
+
}
|
|
62
68
|
|
|
63
|
-
/* Title + description + optional action, stacked. */
|
|
64
|
-
.seeds-narrative-ordered-list-body {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}
|
|
69
|
+
/* Title + description + optional action, stacked. */
|
|
70
|
+
.seeds-narrative-ordered-list-body {
|
|
71
|
+
flex: 1 1 auto;
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
gap: var(--space-200); /* 4px */
|
|
75
|
+
min-width: 0;
|
|
76
|
+
}
|
|
71
77
|
|
|
72
|
-
/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
|
|
78
|
+
/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
|
|
73
79
|
skips from 24px to 32px), so the design value is kept verbatim. Same
|
|
74
80
|
rationale as narrative-summary.css. */
|
|
75
|
-
.seeds-narrative-ordered-list-title {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
81
|
+
.seeds-narrative-ordered-list-title {
|
|
82
|
+
margin: 0;
|
|
83
|
+
font-size: var(--font-size-300); /* 16px */
|
|
84
|
+
line-height: 28px; /* off-scale, see comment above */
|
|
85
|
+
font-weight: var(--font-weight-bold);
|
|
86
|
+
color: var(--color-text-body);
|
|
87
|
+
}
|
|
82
88
|
|
|
83
|
-
/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
|
|
89
|
+
/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
|
|
84
90
|
same rationale as the title above. */
|
|
85
|
-
.seeds-narrative-ordered-list-description {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
91
|
+
.seeds-narrative-ordered-list-description {
|
|
92
|
+
margin: 0;
|
|
93
|
+
font-size: 14px; /* off-scale, see title above */
|
|
94
|
+
line-height: 24px;
|
|
95
|
+
font-weight: var(--font-weight-normal);
|
|
96
|
+
color: var(--color-text-body);
|
|
97
|
+
}
|
|
92
98
|
|
|
93
|
-
.seeds-narrative-ordered-list-action {
|
|
94
|
-
|
|
95
|
-
}
|
|
99
|
+
.seeds-narrative-ordered-list-action {
|
|
100
|
+
padding-top: var(--space-350); /* 12px */
|
|
101
|
+
}
|
|
96
102
|
|
|
97
|
-
/* Expand the horizontal variant to a row of equal columns once the component is
|
|
103
|
+
/* Expand the horizontal variant to a row of equal columns once the component is
|
|
98
104
|
wide enough. The threshold is on the component's own width (container query),
|
|
99
105
|
so a narrow card on a wide screen still stacks. 640px = Tailwind/Seeds sm
|
|
100
106
|
breakpoint, matching narrative-summary.css. */
|
|
101
|
-
@container (min-width: 640px) {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
107
|
+
@container (min-width: 640px) {
|
|
108
|
+
.seeds-narrative-ordered-list-horizontal {
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
}
|
|
105
111
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
112
|
+
.seeds-narrative-ordered-list-horizontal
|
|
113
|
+
> .seeds-narrative-ordered-list-item {
|
|
114
|
+
flex: 1 1 0;
|
|
115
|
+
min-width: 0;
|
|
116
|
+
}
|
|
109
117
|
}
|
|
110
118
|
}
|
|
111
|
-
|
|
112
|
-
}
|
|
@@ -13,34 +13,32 @@
|
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
@layer components {
|
|
16
|
-
|
|
17
|
-
/* The wrapper stacks the title above the content with a small gap. It carries
|
|
16
|
+
/* The wrapper stacks the title above the content with a small gap. It carries
|
|
18
17
|
no surface of its own — it's meant to sit inside a NarrativeContainer. */
|
|
19
|
-
.seeds-narrative-section {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
18
|
+
.seeds-narrative-section {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
gap: var(--space-400); /* 16px — title to content */
|
|
22
|
+
}
|
|
24
23
|
|
|
25
|
-
/* The content slot stacks the section's widgets with the same 32px rhythm a
|
|
24
|
+
/* The content slot stacks the section's widgets with the same 32px rhythm a
|
|
26
25
|
single-column grid (gap={500}) would give them, so multiple primitives inside
|
|
27
26
|
one section are spaced exactly as they are between sections. */
|
|
28
|
-
.seeds-narrative-section-content {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
27
|
+
.seeds-narrative-section-content {
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
gap: var(--space-500); /* 32px — between widgets */
|
|
31
|
+
}
|
|
33
32
|
|
|
34
|
-
/* The section title: bold 14px/24px in the headline color token (#273333,
|
|
33
|
+
/* The section title: bold 14px/24px in the headline color token (#273333,
|
|
35
34
|
which also tracks dark mode). Matches the summary-label recipe used across
|
|
36
35
|
the kit. The heading element ships with user-agent margins, so reset them. */
|
|
37
|
-
.seeds-narrative-section-title {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
36
|
+
.seeds-narrative-section-title {
|
|
37
|
+
margin: 0;
|
|
38
|
+
font-family: var(--font-family);
|
|
39
|
+
font-size: 14px;
|
|
40
|
+
line-height: 24px;
|
|
41
|
+
font-weight: var(--font-weight-bold);
|
|
42
|
+
color: var(--color-text-headline); /* #273333 */
|
|
43
|
+
}
|
|
46
44
|
}
|
|
@@ -14,69 +14,75 @@
|
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
@layer components {
|
|
17
|
-
|
|
18
|
-
/* Main card container — gray background with rounded corners and padding.
|
|
17
|
+
/* Main card container — gray background with rounded corners and padding.
|
|
19
18
|
Uses Seeds tokens for spacing, colors, and radius to match the design system.
|
|
20
19
|
Fills the width it is given (e.g. a grid column) and stretches its content to
|
|
21
20
|
match, mirroring the horizontal NarrativeOrderedList — so a row of cards grows
|
|
22
21
|
and resizes together instead of being pinned to a fixed 320px. */
|
|
23
|
-
.seeds-narrative-social-media-card {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
22
|
+
.seeds-narrative-social-media-card {
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
align-items: stretch;
|
|
27
|
+
width: 100%;
|
|
28
|
+
padding: var(--space-450); /* 24px */
|
|
29
|
+
border-radius: var(--radius-500); /* 6px */
|
|
30
|
+
background-color: var(--color-app-bg-base);
|
|
31
|
+
font-family: var(--font-family);
|
|
32
|
+
color: var(--color-text-body);
|
|
33
|
+
}
|
|
35
34
|
|
|
36
|
-
/* No background — transparent background for cards that blend seamlessly with the page. */
|
|
37
|
-
.seeds-narrative-social-media-card--no-background {
|
|
38
|
-
|
|
39
|
-
}
|
|
35
|
+
/* No background — transparent background for cards that blend seamlessly with the page. */
|
|
36
|
+
.seeds-narrative-social-media-card--no-background {
|
|
37
|
+
background-color: transparent;
|
|
38
|
+
}
|
|
40
39
|
|
|
41
|
-
/* Main content area — standard body text styling. */
|
|
42
|
-
.seeds-narrative-social-media-card-content {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
40
|
+
/* Main content area — standard body text styling. */
|
|
41
|
+
.seeds-narrative-social-media-card-content {
|
|
42
|
+
flex: 1;
|
|
43
|
+
margin-top: var(--space-400); /* 16px */
|
|
44
|
+
font-family: var(--font-family);
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
font-style: normal;
|
|
47
|
+
font-weight: 400;
|
|
48
|
+
line-height: 24px;
|
|
49
|
+
color: var(--color-text-body);
|
|
50
|
+
}
|
|
52
51
|
|
|
53
|
-
/* Footer section — horizontal layout for stats with equal spacing. */
|
|
54
|
-
.seeds-narrative-social-media-card-footer {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
52
|
+
/* Footer section — horizontal layout for stats with equal spacing. */
|
|
53
|
+
.seeds-narrative-social-media-card-footer {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: var(--space-400); /* 16px */
|
|
57
|
+
margin-top: var(--space-400); /* 16px */
|
|
58
|
+
}
|
|
60
59
|
|
|
61
|
-
/* Hide footer when empty (no metadata items). */
|
|
62
|
-
.seeds-narrative-social-media-card-footer:empty {
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* Individual stat container — icon + value in horizontal layout. */
|
|
67
|
-
.seeds-narrative-social-media-card-stat {
|
|
68
|
-
display: flex;
|
|
69
|
-
align-items: center;
|
|
70
|
-
gap: var(--space-200); /* 4px */
|
|
71
|
-
}
|
|
60
|
+
/* Hide footer when empty (no metadata items). */
|
|
61
|
+
.seeds-narrative-social-media-card-footer:empty {
|
|
62
|
+
display: none;
|
|
63
|
+
}
|
|
72
64
|
|
|
73
|
-
/*
|
|
74
|
-
.seeds-narrative-social-media-card-stat
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
color: var(--color-text-body);
|
|
80
|
-
}
|
|
65
|
+
/* Individual stat container — icon + value in horizontal layout. */
|
|
66
|
+
.seeds-narrative-social-media-card-stat {
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
gap: var(--space-200); /* 4px */
|
|
70
|
+
}
|
|
81
71
|
|
|
72
|
+
/* Stat value text — monospace font for numeric values. */
|
|
73
|
+
.seeds-narrative-social-media-card-stat-value {
|
|
74
|
+
font-family: var(
|
|
75
|
+
--font-family-mono,
|
|
76
|
+
ui-monospace,
|
|
77
|
+
"SF Mono",
|
|
78
|
+
SFMono-Regular,
|
|
79
|
+
Menlo,
|
|
80
|
+
monospace
|
|
81
|
+
);
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
font-style: normal;
|
|
84
|
+
font-weight: 400;
|
|
85
|
+
line-height: 24px;
|
|
86
|
+
color: var(--color-text-body);
|
|
87
|
+
}
|
|
82
88
|
}
|