@canopy-iiif/app 0.10.24 → 0.10.26
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/lib/build/mdx.js +366 -182
- package/lib/page-context.js +15 -5
- package/package.json +1 -1
- package/ui/dist/index.mjs +126 -7
- package/ui/dist/index.mjs.map +4 -4
- package/ui/dist/server.mjs +71 -4
- package/ui/dist/server.mjs.map +4 -4
- package/ui/styles/components/_card.scss +0 -1
- package/ui/styles/components/_diagram.scss +75 -0
- package/ui/styles/components/header/_navbar.scss +55 -0
- package/ui/styles/components/iiif/_image.scss +31 -1
- package/ui/styles/components/iiif/_slider.scss +91 -0
- package/ui/styles/components/iiif/index.scss +1 -0
- package/ui/styles/components/index.scss +1 -0
- package/ui/styles/components/search/_tabs.scss +36 -0
- package/ui/styles/components/search/index.scss +4 -3
- package/ui/styles/index.css +236 -1
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
.canopy-diagram {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: clamp(1rem, 3vw, 1.618rem);
|
|
5
|
+
padding: clamp(1.618rem, 3vw, 2.618rem) 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.canopy-diagram__section {
|
|
9
|
+
padding: 0 clamp(1rem, 3vw, 1.618rem);
|
|
10
|
+
|
|
11
|
+
h3 {
|
|
12
|
+
text-align: center;
|
|
13
|
+
margin-top: 0;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.canopy-diagram__section-summary {
|
|
18
|
+
display: block;
|
|
19
|
+
text-align: center;
|
|
20
|
+
padding-bottom: 1.618rem;
|
|
21
|
+
color: var(--color-gray-700);
|
|
22
|
+
font-weight: 300;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.canopy-diagram__grid {
|
|
26
|
+
display: grid;
|
|
27
|
+
gap: 1.618rem;
|
|
28
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
29
|
+
|
|
30
|
+
article {
|
|
31
|
+
border-radius: 1.25rem;
|
|
32
|
+
background: linear-gradient(
|
|
33
|
+
173deg,
|
|
34
|
+
transparent 0%,
|
|
35
|
+
var(--color-accent-200) 100%
|
|
36
|
+
);
|
|
37
|
+
padding: 1rem 1.618rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
h3 {
|
|
41
|
+
margin: 0 0 0.382rem;
|
|
42
|
+
font-weight: 600;
|
|
43
|
+
text-align: center;
|
|
44
|
+
color: var(--color-accent-default);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
ul {
|
|
48
|
+
padding-top: 1rem;
|
|
49
|
+
font-size: 0.9222rem;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.canopy-diagram__arrow {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
align-items: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.canopy-diagram__arrow-line {
|
|
60
|
+
width: 6px;
|
|
61
|
+
height: 2.618rem;
|
|
62
|
+
background: linear-gradient(
|
|
63
|
+
to bottom,
|
|
64
|
+
transparent,
|
|
65
|
+
var(--color-accent-default)
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.canopy-diagram__arrow-head {
|
|
70
|
+
width: 0;
|
|
71
|
+
height: 0;
|
|
72
|
+
border-left: 0.618rem solid transparent;
|
|
73
|
+
border-right: 0.618rem solid transparent;
|
|
74
|
+
border-top: 1rem solid var(--color-accent-default);
|
|
75
|
+
}
|
|
@@ -43,6 +43,61 @@
|
|
|
43
43
|
font-weight: 600;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
.canopy-modal--nav .canopy-modal__section-nav {
|
|
47
|
+
border-top: 1px solid var(--color-gray-200);
|
|
48
|
+
padding-top: 1rem;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.canopy-modal--nav .canopy-modal__section-label {
|
|
52
|
+
font-size: 0.75rem;
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
letter-spacing: 0.04em;
|
|
55
|
+
text-transform: uppercase;
|
|
56
|
+
color: var(--color-gray-500);
|
|
57
|
+
margin-bottom: 0.5rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.canopy-modal__section-list {
|
|
61
|
+
list-style: none;
|
|
62
|
+
margin: 0;
|
|
63
|
+
padding: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.canopy-modal__section-item {
|
|
67
|
+
margin: 0;
|
|
68
|
+
padding: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.canopy-modal__section-link {
|
|
72
|
+
display: block;
|
|
73
|
+
padding: 0.25rem 0;
|
|
74
|
+
text-decoration: none;
|
|
75
|
+
color: var(--color-gray-900);
|
|
76
|
+
font-weight: 500;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.canopy-modal__section-link:hover,
|
|
80
|
+
.canopy-modal__section-link:focus-visible {
|
|
81
|
+
color: var(--color-accent-default);
|
|
82
|
+
outline: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.canopy-modal__section-link.is-active {
|
|
86
|
+
font-weight: 600;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.canopy-modal__section-link.is-label {
|
|
90
|
+
color: var(--color-gray-600);
|
|
91
|
+
font-weight: 600;
|
|
92
|
+
cursor: default;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.canopy-modal__section-list--nested {
|
|
96
|
+
margin: 0.25rem 0 0.25rem 0.75rem;
|
|
97
|
+
padding-left: 0.5rem;
|
|
98
|
+
border-left: 1px solid var(--color-gray-200);
|
|
99
|
+
}
|
|
100
|
+
|
|
46
101
|
@media (max-width: 48rem) {
|
|
47
102
|
.canopy-header__desktop-nav {
|
|
48
103
|
display: none;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* Placeholder/hydration styles for the IIIF Image component */
|
|
2
1
|
.canopy-iiif-image {
|
|
3
2
|
--canopy-iiif-image-height: 600px;
|
|
4
3
|
--canopy-iiif-image-bg: var(--color-gray-200);
|
|
@@ -27,3 +26,34 @@
|
|
|
27
26
|
line-height: 1.4;
|
|
28
27
|
}
|
|
29
28
|
}
|
|
29
|
+
|
|
30
|
+
html.dark .canopy-iiif-image {
|
|
31
|
+
.clover-iiif-image-openseadragon {
|
|
32
|
+
div[data-testid="clover-iiif-image-openseadragon-controls"] {
|
|
33
|
+
button {
|
|
34
|
+
background-color: var(--color-gray-100);
|
|
35
|
+
color: var(--color-gray-900);
|
|
36
|
+
fill: var(--color-gray-900);
|
|
37
|
+
stroke: var(--color-gray-900);
|
|
38
|
+
|
|
39
|
+
svg {
|
|
40
|
+
color: inherit;
|
|
41
|
+
fill: inherit;
|
|
42
|
+
stroke: inherit;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:hover,
|
|
46
|
+
&:focus {
|
|
47
|
+
background-color: var(--color-accent-default);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.clover-iiif-image-openseadragon-annotation {
|
|
53
|
+
label {
|
|
54
|
+
background-color: var(--color-gray-100);
|
|
55
|
+
color: var(--color-gray-900);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
.canopy-slider {
|
|
2
|
+
margin: 1.618rem 0 0;
|
|
3
|
+
|
|
4
|
+
button {
|
|
5
|
+
svg {
|
|
6
|
+
filter: unset;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@media (max-width: 800px) {
|
|
11
|
+
> div > div {
|
|
12
|
+
align-items: center;
|
|
13
|
+
text-align: center;
|
|
14
|
+
|
|
15
|
+
> div {
|
|
16
|
+
&:last-child {
|
|
17
|
+
padding-top: 1rem;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.clover-slider-header-label {
|
|
24
|
+
font-size: 1.125rem !important;
|
|
25
|
+
letter-spacing: -0.01em;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
a.clover-slider-header-homepage {
|
|
29
|
+
color: var(--color-accent-default);
|
|
30
|
+
text-decoration: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.clover-slider-header-summary {
|
|
34
|
+
display: block;
|
|
35
|
+
font-size: 1rem !important;
|
|
36
|
+
font-weight: 300 !important;
|
|
37
|
+
color: var(--color-gray-default);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.swiper-slide {
|
|
41
|
+
// margin-right: 1.618rem !important;
|
|
42
|
+
padding-bottom: 1rem;
|
|
43
|
+
|
|
44
|
+
a {
|
|
45
|
+
display: block;
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
color: inherit;
|
|
48
|
+
border: 1px solid var(--color-gray-200);
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
border-radius: 0.5rem;
|
|
51
|
+
transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
52
|
+
box-shadow:
|
|
53
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.05),
|
|
54
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.05);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
figure {
|
|
59
|
+
> div {
|
|
60
|
+
border-radius: 3px;
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
figcaption {
|
|
66
|
+
padding: 1rem !important;
|
|
67
|
+
|
|
68
|
+
> span {
|
|
69
|
+
text-overflow: ellipsis;
|
|
70
|
+
display: -webkit-box;
|
|
71
|
+
-webkit-box-orient: vertical;
|
|
72
|
+
-webkit-line-clamp: 3;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
white-space: normal;
|
|
75
|
+
font-size: 1rem;
|
|
76
|
+
font-weight: 300;
|
|
77
|
+
line-height: 1.38em;
|
|
78
|
+
text-decoration: none !important;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
a figcaption,
|
|
83
|
+
a:visited figcaption {
|
|
84
|
+
color: var(--color-gray-default);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
a:hover figcaption,
|
|
88
|
+
a:focus figcaption {
|
|
89
|
+
color: var(--color-accent-default);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
.canopy-search-tabs {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
gap: 0.5rem;
|
|
5
|
+
border-bottom: 1px solid #e2e8f0; /* subtle bottom border */
|
|
6
|
+
padding-bottom: 0.25rem;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.canopy-search-tab {
|
|
10
|
+
position: relative;
|
|
11
|
+
border: none;
|
|
12
|
+
background: transparent;
|
|
13
|
+
padding: 0.25rem 0.75rem 0.5rem;
|
|
14
|
+
font-size: 0.875rem;
|
|
15
|
+
font-weight: 500;
|
|
16
|
+
color: #64748b;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.canopy-search-tab.is-active {
|
|
21
|
+
color: #0f172a;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.canopy-search-tabs__highlight {
|
|
25
|
+
position: absolute;
|
|
26
|
+
bottom: 0;
|
|
27
|
+
left: 0;
|
|
28
|
+
height: 2px; /* underline */
|
|
29
|
+
border-radius: 999px;
|
|
30
|
+
background: #2563eb; /* brand-ish blue */
|
|
31
|
+
pointer-events: none;
|
|
32
|
+
opacity: 0;
|
|
33
|
+
transform: translateX(0);
|
|
34
|
+
transition-property: transform, width, opacity;
|
|
35
|
+
transition-timing-function: ease-out;
|
|
36
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
1
|
+
@use "./form";
|
|
2
|
+
@use "./results";
|
|
3
|
+
@use "./filters";
|
|
4
|
+
@use "./tabs";
|
package/ui/styles/index.css
CHANGED
|
@@ -728,6 +728,52 @@ section[data-footnotes] ul li,
|
|
|
728
728
|
padding: 0.75rem 0;
|
|
729
729
|
font-weight: 600;
|
|
730
730
|
}
|
|
731
|
+
.canopy-modal--nav .canopy-modal__section-nav {
|
|
732
|
+
border-top: 1px solid var(--color-gray-200);
|
|
733
|
+
padding-top: 1rem;
|
|
734
|
+
}
|
|
735
|
+
.canopy-modal--nav .canopy-modal__section-label {
|
|
736
|
+
font-size: 0.75rem;
|
|
737
|
+
font-weight: 600;
|
|
738
|
+
letter-spacing: 0.04em;
|
|
739
|
+
text-transform: uppercase;
|
|
740
|
+
color: var(--color-gray-500);
|
|
741
|
+
margin-bottom: 0.5rem;
|
|
742
|
+
}
|
|
743
|
+
.canopy-modal__section-list {
|
|
744
|
+
list-style: none;
|
|
745
|
+
margin: 0;
|
|
746
|
+
padding: 0;
|
|
747
|
+
}
|
|
748
|
+
.canopy-modal__section-item {
|
|
749
|
+
margin: 0;
|
|
750
|
+
padding: 0;
|
|
751
|
+
}
|
|
752
|
+
.canopy-modal__section-link {
|
|
753
|
+
display: block;
|
|
754
|
+
padding: 0.25rem 0;
|
|
755
|
+
text-decoration: none;
|
|
756
|
+
color: var(--color-gray-900);
|
|
757
|
+
font-weight: 500;
|
|
758
|
+
}
|
|
759
|
+
.canopy-modal__section-link:hover,
|
|
760
|
+
.canopy-modal__section-link:focus-visible {
|
|
761
|
+
color: var(--color-accent-default);
|
|
762
|
+
outline: none;
|
|
763
|
+
}
|
|
764
|
+
.canopy-modal__section-link.is-active {
|
|
765
|
+
font-weight: 600;
|
|
766
|
+
}
|
|
767
|
+
.canopy-modal__section-link.is-label {
|
|
768
|
+
color: var(--color-gray-600);
|
|
769
|
+
font-weight: 600;
|
|
770
|
+
cursor: default;
|
|
771
|
+
}
|
|
772
|
+
.canopy-modal__section-list--nested {
|
|
773
|
+
margin: 0.25rem 0 0.25rem 0.75rem;
|
|
774
|
+
padding-left: 0.5rem;
|
|
775
|
+
border-left: 1px solid var(--color-gray-200);
|
|
776
|
+
}
|
|
731
777
|
@media (max-width: 48rem) {
|
|
732
778
|
.canopy-header__desktop-nav {
|
|
733
779
|
display: none;
|
|
@@ -1197,7 +1243,6 @@ section[data-footnotes] ul li,
|
|
|
1197
1243
|
padding-inline: 4rem;
|
|
1198
1244
|
}
|
|
1199
1245
|
}
|
|
1200
|
-
/* Placeholder/hydration styles for the IIIF Image component */
|
|
1201
1246
|
.canopy-iiif-image {
|
|
1202
1247
|
--canopy-iiif-image-height: 600px;
|
|
1203
1248
|
--canopy-iiif-image-bg: var(--color-gray-200);
|
|
@@ -1223,6 +1268,95 @@ section[data-footnotes] ul li,
|
|
|
1223
1268
|
line-height: 1.4;
|
|
1224
1269
|
}
|
|
1225
1270
|
|
|
1271
|
+
html.dark .canopy-iiif-image .clover-iiif-image-openseadragon div[data-testid=clover-iiif-image-openseadragon-controls] button {
|
|
1272
|
+
background-color: var(--color-gray-100);
|
|
1273
|
+
color: var(--color-gray-900);
|
|
1274
|
+
fill: var(--color-gray-900);
|
|
1275
|
+
stroke: var(--color-gray-900);
|
|
1276
|
+
}
|
|
1277
|
+
html.dark .canopy-iiif-image .clover-iiif-image-openseadragon div[data-testid=clover-iiif-image-openseadragon-controls] button svg {
|
|
1278
|
+
color: inherit;
|
|
1279
|
+
fill: inherit;
|
|
1280
|
+
stroke: inherit;
|
|
1281
|
+
}
|
|
1282
|
+
html.dark .canopy-iiif-image .clover-iiif-image-openseadragon div[data-testid=clover-iiif-image-openseadragon-controls] button:hover, html.dark .canopy-iiif-image .clover-iiif-image-openseadragon div[data-testid=clover-iiif-image-openseadragon-controls] button:focus {
|
|
1283
|
+
background-color: var(--color-accent-default);
|
|
1284
|
+
}
|
|
1285
|
+
html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-annotation label {
|
|
1286
|
+
background-color: var(--color-gray-100);
|
|
1287
|
+
color: var(--color-gray-900);
|
|
1288
|
+
}
|
|
1289
|
+
|
|
1290
|
+
.canopy-slider {
|
|
1291
|
+
margin: 1.618rem 0 0;
|
|
1292
|
+
}
|
|
1293
|
+
.canopy-slider button svg {
|
|
1294
|
+
filter: unset;
|
|
1295
|
+
}
|
|
1296
|
+
@media (max-width: 800px) {
|
|
1297
|
+
.canopy-slider > div > div {
|
|
1298
|
+
align-items: center;
|
|
1299
|
+
text-align: center;
|
|
1300
|
+
}
|
|
1301
|
+
.canopy-slider > div > div > div:last-child {
|
|
1302
|
+
padding-top: 1rem;
|
|
1303
|
+
}
|
|
1304
|
+
}
|
|
1305
|
+
.canopy-slider .clover-slider-header-label {
|
|
1306
|
+
font-size: 1.125rem !important;
|
|
1307
|
+
letter-spacing: -0.01em;
|
|
1308
|
+
}
|
|
1309
|
+
.canopy-slider a.clover-slider-header-homepage {
|
|
1310
|
+
color: var(--color-accent-default);
|
|
1311
|
+
text-decoration: none;
|
|
1312
|
+
}
|
|
1313
|
+
.canopy-slider .clover-slider-header-summary {
|
|
1314
|
+
display: block;
|
|
1315
|
+
font-size: 1rem !important;
|
|
1316
|
+
font-weight: 300 !important;
|
|
1317
|
+
color: var(--color-gray-default);
|
|
1318
|
+
}
|
|
1319
|
+
.canopy-slider .swiper-slide {
|
|
1320
|
+
padding-bottom: 1rem;
|
|
1321
|
+
}
|
|
1322
|
+
.canopy-slider .swiper-slide a {
|
|
1323
|
+
display: block;
|
|
1324
|
+
text-decoration: none;
|
|
1325
|
+
color: inherit;
|
|
1326
|
+
border: 1px solid var(--color-gray-200);
|
|
1327
|
+
overflow: hidden;
|
|
1328
|
+
border-radius: 0.5rem;
|
|
1329
|
+
transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
1330
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
|
|
1331
|
+
}
|
|
1332
|
+
.canopy-slider figure > div {
|
|
1333
|
+
border-radius: 3px;
|
|
1334
|
+
overflow: hidden;
|
|
1335
|
+
}
|
|
1336
|
+
.canopy-slider figcaption {
|
|
1337
|
+
padding: 1rem !important;
|
|
1338
|
+
}
|
|
1339
|
+
.canopy-slider figcaption > span {
|
|
1340
|
+
text-overflow: ellipsis;
|
|
1341
|
+
display: -webkit-box;
|
|
1342
|
+
-webkit-box-orient: vertical;
|
|
1343
|
+
-webkit-line-clamp: 3;
|
|
1344
|
+
overflow: hidden;
|
|
1345
|
+
white-space: normal;
|
|
1346
|
+
font-size: 1rem;
|
|
1347
|
+
font-weight: 300;
|
|
1348
|
+
line-height: 1.38em;
|
|
1349
|
+
text-decoration: none !important;
|
|
1350
|
+
}
|
|
1351
|
+
.canopy-slider a figcaption,
|
|
1352
|
+
.canopy-slider a:visited figcaption {
|
|
1353
|
+
color: var(--color-gray-default);
|
|
1354
|
+
}
|
|
1355
|
+
.canopy-slider a:hover figcaption,
|
|
1356
|
+
.canopy-slider a:focus figcaption {
|
|
1357
|
+
color: var(--color-accent-default);
|
|
1358
|
+
}
|
|
1359
|
+
|
|
1226
1360
|
.canopy-search-form-shell {
|
|
1227
1361
|
--search-form-label-padding-x: 0.75rem;
|
|
1228
1362
|
--search-form-label-padding-y: 0.625rem;
|
|
@@ -1789,6 +1923,43 @@ section[data-footnotes] ul li,
|
|
|
1789
1923
|
}
|
|
1790
1924
|
}
|
|
1791
1925
|
}
|
|
1926
|
+
.canopy-search-tabs {
|
|
1927
|
+
position: relative;
|
|
1928
|
+
display: inline-flex;
|
|
1929
|
+
gap: 0.5rem;
|
|
1930
|
+
border-bottom: 1px solid #e2e8f0; /* subtle bottom border */
|
|
1931
|
+
padding-bottom: 0.25rem;
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1934
|
+
.canopy-search-tab {
|
|
1935
|
+
position: relative;
|
|
1936
|
+
border: none;
|
|
1937
|
+
background: transparent;
|
|
1938
|
+
padding: 0.25rem 0.75rem 0.5rem;
|
|
1939
|
+
font-size: 0.875rem;
|
|
1940
|
+
font-weight: 500;
|
|
1941
|
+
color: #64748b;
|
|
1942
|
+
cursor: pointer;
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1945
|
+
.canopy-search-tab.is-active {
|
|
1946
|
+
color: #0f172a;
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1949
|
+
.canopy-search-tabs__highlight {
|
|
1950
|
+
position: absolute;
|
|
1951
|
+
bottom: 0;
|
|
1952
|
+
left: 0;
|
|
1953
|
+
height: 2px; /* underline */
|
|
1954
|
+
border-radius: 999px;
|
|
1955
|
+
background: #2563eb; /* brand-ish blue */
|
|
1956
|
+
pointer-events: none;
|
|
1957
|
+
opacity: 0;
|
|
1958
|
+
transform: translateX(0);
|
|
1959
|
+
transition-property: transform, width, opacity;
|
|
1960
|
+
transition-timing-function: ease-out;
|
|
1961
|
+
}
|
|
1962
|
+
|
|
1792
1963
|
.canopy-search-teaser.is-empty {
|
|
1793
1964
|
display: none;
|
|
1794
1965
|
}
|
|
@@ -1911,6 +2082,70 @@ section[data-footnotes] ul li,
|
|
|
1911
2082
|
display: none;
|
|
1912
2083
|
}
|
|
1913
2084
|
|
|
2085
|
+
.canopy-diagram {
|
|
2086
|
+
display: flex;
|
|
2087
|
+
flex-direction: column;
|
|
2088
|
+
gap: clamp(1rem, 3vw, 1.618rem);
|
|
2089
|
+
padding: clamp(1.618rem, 3vw, 2.618rem) 0;
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
.canopy-diagram__section {
|
|
2093
|
+
padding: 0 clamp(1rem, 3vw, 1.618rem);
|
|
2094
|
+
}
|
|
2095
|
+
.canopy-diagram__section h3 {
|
|
2096
|
+
text-align: center;
|
|
2097
|
+
margin-top: 0;
|
|
2098
|
+
}
|
|
2099
|
+
|
|
2100
|
+
.canopy-diagram__section-summary {
|
|
2101
|
+
display: block;
|
|
2102
|
+
text-align: center;
|
|
2103
|
+
padding-bottom: 1.618rem;
|
|
2104
|
+
color: var(--color-gray-700);
|
|
2105
|
+
font-weight: 300;
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
.canopy-diagram__grid {
|
|
2109
|
+
display: grid;
|
|
2110
|
+
gap: 1.618rem;
|
|
2111
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
2112
|
+
}
|
|
2113
|
+
.canopy-diagram__grid article {
|
|
2114
|
+
border-radius: 1.25rem;
|
|
2115
|
+
background: linear-gradient(173deg, transparent 0%, var(--color-accent-200) 100%);
|
|
2116
|
+
padding: 1rem 1.618rem;
|
|
2117
|
+
}
|
|
2118
|
+
.canopy-diagram__grid h3 {
|
|
2119
|
+
margin: 0 0 0.382rem;
|
|
2120
|
+
font-weight: 600;
|
|
2121
|
+
text-align: center;
|
|
2122
|
+
color: var(--color-accent-default);
|
|
2123
|
+
}
|
|
2124
|
+
.canopy-diagram__grid ul {
|
|
2125
|
+
padding-top: 1rem;
|
|
2126
|
+
font-size: 0.9222rem;
|
|
2127
|
+
}
|
|
2128
|
+
|
|
2129
|
+
.canopy-diagram__arrow {
|
|
2130
|
+
display: flex;
|
|
2131
|
+
flex-direction: column;
|
|
2132
|
+
align-items: center;
|
|
2133
|
+
}
|
|
2134
|
+
|
|
2135
|
+
.canopy-diagram__arrow-line {
|
|
2136
|
+
width: 6px;
|
|
2137
|
+
height: 2.618rem;
|
|
2138
|
+
background: linear-gradient(to bottom, transparent, var(--color-accent-default));
|
|
2139
|
+
}
|
|
2140
|
+
|
|
2141
|
+
.canopy-diagram__arrow-head {
|
|
2142
|
+
width: 0;
|
|
2143
|
+
height: 0;
|
|
2144
|
+
border-left: 0.618rem solid transparent;
|
|
2145
|
+
border-right: 0.618rem solid transparent;
|
|
2146
|
+
border-top: 1rem solid var(--color-accent-default);
|
|
2147
|
+
}
|
|
2148
|
+
|
|
1914
2149
|
@layer components {
|
|
1915
2150
|
body.canopy-type-work main h1 {
|
|
1916
2151
|
font-size: 2rem;
|