@scalemule/news-publication 0.0.20 → 0.0.22

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,208 @@
1
+ /* Broadsheet Verified Factsheet Card — WSJ & The Economist aesthetic */
2
+
3
+ .article-verified-card {
4
+ margin: 2.25rem 0 2rem 0;
5
+ border: 1px solid var(--pub-rule, var(--news-border, #d7dcd7));
6
+ border-top: 3px solid var(--pub-accent, var(--news-nameplate, #bb171d));
7
+ background-color: var(--pub-paper, var(--news-paper, #ffffff));
8
+ color: var(--pub-ink, var(--news-ink, #171917));
9
+ padding: 1.5rem 1.75rem;
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ @media (max-width: 640px) {
14
+ .article-verified-card {
15
+ padding: 1.25rem 1rem;
16
+ margin: 1.75rem 0 1.5rem 0;
17
+ }
18
+ }
19
+
20
+ .article-verified-card__header {
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: space-between;
24
+ gap: 0.75rem;
25
+ margin-bottom: 0.5rem;
26
+ }
27
+
28
+ .article-verified-card__kicker {
29
+ font-family: var(--pub-sans, Arial, Helvetica, sans-serif);
30
+ font-size: 0.6875rem;
31
+ font-weight: 700;
32
+ letter-spacing: 0.08em;
33
+ text-transform: uppercase;
34
+ color: var(--pub-accent, var(--news-nameplate, #bb171d));
35
+ margin: 0;
36
+ }
37
+
38
+ .article-verified-card__badge {
39
+ font-family: var(--pub-sans, Arial, Helvetica, sans-serif);
40
+ font-size: 0.6875rem;
41
+ font-weight: 600;
42
+ color: var(--pub-ink, var(--news-ink, #171917));
43
+ background-color: var(--pub-soft, #f0f2f0);
44
+ padding: 0.2rem 0.55rem;
45
+ border-radius: 2px;
46
+ white-space: nowrap;
47
+ }
48
+
49
+ .article-verified-card__title {
50
+ font-family: var(--pub-serif, Georgia, "Times New Roman", serif);
51
+ font-size: 1.375rem;
52
+ font-weight: 700;
53
+ line-height: 1.25;
54
+ color: var(--pub-ink, var(--news-ink, #171917));
55
+ margin: 0.25rem 0 0.25rem 0;
56
+ }
57
+
58
+ @media (max-width: 640px) {
59
+ .article-verified-card__title {
60
+ font-size: 1.25rem;
61
+ }
62
+ }
63
+
64
+ .article-verified-card__subtitle {
65
+ font-family: var(--pub-sans, Arial, Helvetica, sans-serif);
66
+ font-size: 0.875rem;
67
+ color: var(--pub-muted, var(--news-muted, #545c55));
68
+ margin: 0 0 0.875rem 0;
69
+ line-height: 1.4;
70
+ }
71
+
72
+ .article-verified-card__summary {
73
+ font-family: var(--pub-serif, Georgia, "Times New Roman", serif);
74
+ font-size: 0.9375rem;
75
+ line-height: 1.5;
76
+ color: var(--pub-ink, #2d312e);
77
+ margin: 0 0 1.25rem 0;
78
+ }
79
+
80
+ .article-verified-card__fact-grid {
81
+ display: grid;
82
+ grid-template-columns: 1fr;
83
+ gap: 0.625rem;
84
+ border-top: 1px solid var(--pub-rule, #eef0ee);
85
+ border-bottom: 1px solid var(--pub-rule, #eef0ee);
86
+ padding: 1rem 0;
87
+ margin: 0 0 1.25rem 0;
88
+ }
89
+
90
+ .article-verified-card__fact-row {
91
+ display: flex;
92
+ flex-direction: row;
93
+ align-items: baseline;
94
+ gap: 1rem;
95
+ font-family: var(--pub-sans, Arial, Helvetica, sans-serif);
96
+ font-size: 0.875rem;
97
+ line-height: 1.4;
98
+ }
99
+
100
+ @media (max-width: 540px) {
101
+ .article-verified-card__fact-row {
102
+ flex-direction: column;
103
+ gap: 0.125rem;
104
+ }
105
+ }
106
+
107
+ .article-verified-card__fact-label {
108
+ min-width: 140px;
109
+ font-size: 0.6875rem;
110
+ font-weight: 700;
111
+ letter-spacing: 0.05em;
112
+ text-transform: uppercase;
113
+ color: var(--pub-muted, var(--news-muted, #545c55));
114
+ flex-shrink: 0;
115
+ margin: 0;
116
+ }
117
+
118
+ .article-verified-card__fact-value {
119
+ color: var(--pub-ink, var(--news-ink, #171917));
120
+ font-weight: 500;
121
+ margin: 0;
122
+ }
123
+
124
+ .article-verified-card__fact-link {
125
+ color: var(--pub-ink, var(--news-ink, #171917));
126
+ text-decoration: underline;
127
+ text-underline-offset: 3px;
128
+ text-decoration-color: var(--pub-muted, #a0a6a0);
129
+ transition: color 0.15s ease, text-decoration-color 0.15s ease;
130
+ }
131
+
132
+ .article-verified-card__fact-link:hover {
133
+ color: var(--pub-accent, var(--news-nameplate, #bb171d));
134
+ text-decoration-color: var(--pub-accent, var(--news-nameplate, #bb171d));
135
+ }
136
+
137
+ .article-verified-card__actions {
138
+ display: flex;
139
+ flex-wrap: wrap;
140
+ gap: 0.75rem;
141
+ margin: 1.25rem 0 0 0;
142
+ }
143
+
144
+ .article-verified-card__action {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ gap: 0.375rem;
149
+ font-family: var(--pub-sans, Arial, Helvetica, sans-serif);
150
+ font-size: 0.8125rem;
151
+ font-weight: 600;
152
+ border-radius: 2px;
153
+ text-decoration: none !important;
154
+ transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
155
+ }
156
+
157
+ .article-verified-card__action--primary {
158
+ background-color: var(--pub-ink, var(--news-ink, #171917));
159
+ color: var(--pub-paper, #ffffff) !important;
160
+ padding: 0.625rem 1.125rem;
161
+ }
162
+
163
+ .article-verified-card__action--primary:hover {
164
+ background-color: var(--pub-accent, var(--news-nameplate, #bb171d));
165
+ }
166
+
167
+ .article-verified-card__action--secondary {
168
+ background-color: transparent;
169
+ color: var(--pub-ink, var(--news-ink, #171917)) !important;
170
+ border: 1px solid var(--pub-ink, var(--news-ink, #171917));
171
+ padding: 0.5625rem 1rem;
172
+ }
173
+
174
+ .article-verified-card__action--secondary:hover {
175
+ background-color: var(--pub-soft, #f2f4f2);
176
+ }
177
+
178
+ .article-verified-card__footer {
179
+ border-top: 1px solid var(--pub-rule, #eef0ee);
180
+ margin-top: 1.25rem;
181
+ padding-top: 0.75rem;
182
+ display: flex;
183
+ flex-wrap: wrap;
184
+ align-items: center;
185
+ justify-content: space-between;
186
+ gap: 0.5rem;
187
+ font-family: var(--pub-sans, Arial, Helvetica, sans-serif);
188
+ font-size: 0.75rem;
189
+ color: var(--pub-muted, var(--news-muted, #545c55));
190
+ }
191
+
192
+ .article-verified-card__seal {
193
+ display: inline-flex;
194
+ align-items: center;
195
+ gap: 0.375rem;
196
+ color: var(--pub-sponsor, #173e32);
197
+ font-weight: 600;
198
+ }
199
+
200
+ .article-verified-card__seal-check {
201
+ color: var(--pub-sponsor, #173e32);
202
+ font-weight: 700;
203
+ }
204
+
205
+ .article-verified-card__date {
206
+ color: var(--pub-muted, var(--news-muted, #545c55));
207
+ font-weight: 400;
208
+ }