@ilo-org/styles 0.1.11 → 0.1.13

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.
@@ -151,7 +151,7 @@ select {
151
151
  }
152
152
  /**
153
153
  * Do not edit directly
154
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
154
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
155
155
  */
156
156
  /**
157
157
  * TOKENS:
@@ -250,7 +250,7 @@ body {
250
250
 
251
251
  /**
252
252
  * Do not edit directly
253
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
253
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
254
254
  */
255
255
  /**
256
256
  * TOKENS:
@@ -363,7 +363,7 @@ body {
363
363
 
364
364
  /**
365
365
  * Do not edit directly
366
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
366
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
367
367
  */
368
368
  /**
369
369
  * TOKENS:
@@ -388,7 +388,7 @@ body {
388
388
  }
389
389
  /**
390
390
  * Do not edit directly
391
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
391
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
392
392
  */
393
393
  /**
394
394
  * TOKENS:
@@ -423,6 +423,11 @@ body {
423
423
  text-decoration-thickness: 0.1071811361rem;
424
424
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3e%3cpath fill='rgb(35, 0, 80)' d='M1.73149 16L0.613281 15.1855L5.83848 8L0.613281 0.814495L1.73149 0L7.25349 7.59275C7.33987 7.71097 7.38643 7.85359 7.38643 8C7.38643 8.14641 7.33987 8.28903 7.25349 8.40725L1.73149 16Z'/%3e%3c/svg%3e");
425
425
  }
426
+ .right-to-left .ilo--breadcrumb--link {
427
+ background-position: 0 52%;
428
+ padding: 0 0.5359056806rem 0 1.2861736334rem;
429
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3e%3cpath fill='rgb(35, 0, 80)' d='M0.7%2c8.4C0.7%2c8.3%2c0.6%2c8.1%2c0.6%2c8s0-0.3%2c0.1-0.4L6.3%2c0l1.1%2c0.8L2.2%2c8l5.2%2c7.2L6.3%2c16L0.7%2c8.4z'/%3e%3c/svg%3e");
430
+ }
426
431
  .ilo--breadcrumb--link--label {
427
432
  font-family: Noto Sans;
428
433
  font-weight: 400;
@@ -436,6 +441,9 @@ body {
436
441
  text-decoration-thickness: 0.1071811361rem;
437
442
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3e%3cpath fill='rgb(30, 45, 190)' d='M1.73149 16L0.613281 15.1855L5.83848 8L0.613281 0.814495L1.73149 0L7.25349 7.59275C7.33987 7.71097 7.38643 7.85359 7.38643 8C7.38643 8.14641 7.33987 8.28903 7.25349 8.40725L1.73149 16Z'/%3e%3c/svg%3e");
438
443
  }
444
+ .right-to-left .ilo--breadcrumb--link:hover, .right-to-left .ilo--breadcrumb--link:focus {
445
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3e%3cpath fill='rgb(30, 45, 190)' d='M0.7%2c8.4C0.7%2c8.3%2c0.6%2c8.1%2c0.6%2c8s0-0.3%2c0.1-0.4L6.3%2c0l1.1%2c0.8L2.2%2c8l5.2%2c7.2L6.3%2c16L0.7%2c8.4z'/%3e%3c/svg%3e");
446
+ }
439
447
  .ilo--breadcrumb--item {
440
448
  align-items: center;
441
449
  display: flex;
@@ -508,6 +516,11 @@ body {
508
516
  width: 0.857449089rem;
509
517
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3e%3cpath fill='rgb(35, 0, 80)' d='M1.73149 16L0.613281 15.1855L5.83848 8L0.613281 0.814495L1.73149 0L7.25349 7.59275C7.33987 7.71097 7.38643 7.85359 7.38643 8C7.38643 8.14641 7.33987 8.28903 7.25349 8.40725L1.73149 16Z'/%3e%3c/svg%3e");
510
518
  }
519
+ .right-to-left .ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context:after {
520
+ right: auto;
521
+ left: -7px;
522
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3e%3cpath fill='rgb(35, 0, 80)' d='M0.7%2c8.4C0.7%2c8.3%2c0.6%2c8.1%2c0.6%2c8s0-0.3%2c0.1-0.4L6.3%2c0l1.1%2c0.8L2.2%2c8l5.2%2c7.2L6.3%2c16L0.7%2c8.4z'/%3e%3c/svg%3e");
523
+ }
511
524
  .ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu {
512
525
  border-radius: 0.1071811361rem;
513
526
  background-color: rgb(237, 240, 242);
@@ -596,6 +609,9 @@ body {
596
609
  text-decoration: underline;
597
610
  text-decoration-thickness: 0.1071811361rem;
598
611
  }
612
+ .right-to-left .ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--link {
613
+ text-align: center;
614
+ }
599
615
  @media screen and (min-width: 610px) {
600
616
  .ilo--breadcrumb--items:after {
601
617
  background: linear-gradient(to bottom right, white 50%, transparent 50%);
@@ -607,10 +623,18 @@ body {
607
623
  top: 0;
608
624
  width: 47px;
609
625
  }
626
+ .right-to-left .ilo--breadcrumb--items:after {
627
+ right: auto;
628
+ left: -47px;
629
+ transform: scaleX(-1);
630
+ }
610
631
  .ilo--breadcrumb--items.context--menu:after {
611
632
  content: none;
612
633
  }
613
634
  }
635
+ .right-to-left .ilo--breadcrumb {
636
+ direction: rtl;
637
+ }
614
638
  .ilo--breadcrumb.storybook {
615
639
  background-color: rgb(184, 196, 204);
616
640
  height: 100vh;
@@ -618,7 +642,7 @@ body {
618
642
 
619
643
  /**
620
644
  * Do not edit directly
621
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
645
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
622
646
  */
623
647
  /**
624
648
  * TOKENS:
@@ -628,7 +652,7 @@ body {
628
652
  */
629
653
  /**
630
654
  * Do not edit directly
631
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
655
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
632
656
  */
633
657
  /**
634
658
  * TOKENS:
@@ -653,7 +677,7 @@ body {
653
677
  }
654
678
  /**
655
679
  * Do not edit directly
656
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
680
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
657
681
  */
658
682
  /**
659
683
  * TOKENS:
@@ -943,7 +967,7 @@ body {
943
967
 
944
968
  /**
945
969
  * Do not edit directly
946
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
970
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
947
971
  */
948
972
  /**
949
973
  * TOKENS:
@@ -1073,7 +1097,7 @@ body {
1073
1097
 
1074
1098
  /**
1075
1099
  * Do not edit directly
1076
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
1100
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
1077
1101
  */
1078
1102
  /**
1079
1103
  * TOKENS:
@@ -1088,27 +1112,31 @@ body {
1088
1112
  .right-to-left .ilo--card {
1089
1113
  text-align: right;
1090
1114
  }
1091
- .ilo--card--action:hover:not(.ilo--card--data), .ilo--card--action:focus:not(.ilo--card--data) {
1115
+ .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat), .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat), .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) {
1092
1116
  background: rgb(255, 255, 255);
1093
1117
  color: rgb(30, 45, 190);
1118
+ outline: none;
1094
1119
  text-decoration: none;
1095
1120
  }
1096
- .ilo--card--action:hover:not(.ilo--card--data).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist), .ilo--card--action:focus:not(.ilo--card--data).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist) {
1121
+ .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist), .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist), .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist) {
1097
1122
  background: rgb(255, 255, 255);
1098
1123
  }
1099
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--eyebrow, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--eyebrow {
1124
+ .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist).ilo--card--cornercut::after, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist).ilo--card--cornercut::after, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist).ilo--card--cornercut::after {
1125
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1126
+ }
1127
+ .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow {
1100
1128
  color: rgb(30, 45, 190);
1101
1129
  }
1102
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--title, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--title {
1130
+ .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--title, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--title, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--title {
1103
1131
  color: rgb(30, 45, 190);
1104
1132
  }
1105
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--intro, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--intro {
1133
+ .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--intro, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--intro, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--intro {
1106
1134
  color: rgb(30, 45, 190);
1107
1135
  }
1108
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--date, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--date {
1136
+ .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--date, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--date, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--date {
1109
1137
  color: rgb(30, 45, 190);
1110
1138
  }
1111
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--eventdate, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--eventdate {
1139
+ .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eventdate, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eventdate, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eventdate {
1112
1140
  color: rgb(30, 45, 190);
1113
1141
  }
1114
1142
  .ilo--card--link {
@@ -1125,7 +1153,8 @@ body {
1125
1153
  transition-duration: 150ms;
1126
1154
  transition-timing-function: ease-out;
1127
1155
  }
1128
- .ilo--card--link:hover, .ilo--card--link:focus {
1156
+ .ilo--card--link:hover, .ilo--card--link:focus, .ilo--card--link:focus-within {
1157
+ outline: none;
1129
1158
  transition-property: color, background-color, border-color, opacity;
1130
1159
  transition-duration: 150ms;
1131
1160
  transition-timing-function: ease-out;
@@ -1143,69 +1172,171 @@ body {
1143
1172
  .ilo--card--light {
1144
1173
  background: rgb(255, 255, 255);
1145
1174
  }
1146
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) {
1175
+ .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) {
1147
1176
  background: rgb(35, 0, 80);
1177
+ outline: none;
1148
1178
  transition: background 150ms ease-out;
1149
1179
  }
1150
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--eyebrow {
1180
+ .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--eyebrow {
1151
1181
  color: rgb(237, 240, 242);
1152
1182
  transition: color 150ms ease-out;
1153
1183
  }
1154
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--title {
1184
+ .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--title {
1155
1185
  color: rgb(255, 255, 255);
1156
1186
  transition: color 150ms ease-out;
1157
1187
  }
1158
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--intro {
1188
+ .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--intro {
1159
1189
  color: rgb(237, 240, 242);
1160
1190
  transition: color 150ms ease-out;
1161
1191
  }
1162
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--date {
1192
+ .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--date {
1163
1193
  color: rgb(237, 240, 242);
1164
1194
  transition: color 150ms ease-out;
1165
1195
  }
1166
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--eventdate {
1196
+ .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--eventdate {
1167
1197
  color: rgb(237, 240, 242);
1168
1198
  transition: color 150ms ease-out;
1169
1199
  }
1170
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
1200
+ .ilo--card--dark:not(.ilo--card--action), .ilo--card--dark:not(.ilo--card--action):hover, .ilo--card--dark:not(.ilo--card--action):focus, .ilo--card--dark:not(.ilo--card--action):focus-within {
1201
+ background: rgb(35, 0, 80);
1202
+ outline: none;
1203
+ transition: background 150ms ease-out;
1204
+ }
1205
+ .ilo--card--dark:not(.ilo--card--action) .ilo--card--eyebrow, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--eyebrow, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--eyebrow, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--eyebrow {
1206
+ color: rgb(237, 240, 242);
1207
+ transition: color 150ms ease-out;
1208
+ }
1209
+ .ilo--card--dark:not(.ilo--card--action) .ilo--card--title, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--title, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--title, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--title {
1210
+ color: rgb(255, 255, 255);
1211
+ transition: color 150ms ease-out;
1212
+ }
1213
+ .ilo--card--dark:not(.ilo--card--action) .ilo--card--intro, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--intro, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--intro, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--intro {
1214
+ color: rgb(237, 240, 242);
1215
+ transition: color 150ms ease-out;
1216
+ }
1217
+ .ilo--card--dark:not(.ilo--card--action) .ilo--card--date, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--date, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--date, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--date {
1218
+ color: rgb(237, 240, 242);
1219
+ transition: color 150ms ease-out;
1220
+ }
1221
+ .ilo--card--dark:not(.ilo--card--action) .ilo--card--eventdate, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--eventdate, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--eventdate, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--eventdate {
1222
+ color: rgb(237, 240, 242);
1223
+ transition: color 150ms ease-out;
1224
+ }
1225
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data) {
1171
1226
  margin-top: 2.1436227224rem;
1172
1227
  padding-top: 0;
1173
1228
  position: relative;
1174
1229
  }
1230
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1231
+ background: inherit;
1232
+ content: "";
1233
+ display: block;
1234
+ height: 40px;
1235
+ position: absolute;
1236
+ width: calc(100% - 73px);
1237
+ }
1238
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1239
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1240
+ background-position: bottom right;
1241
+ background-size: cover;
1242
+ content: "";
1243
+ height: 40px;
1244
+ display: block;
1245
+ position: absolute;
1246
+ width: 73.4px;
1247
+ }
1248
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data).ilo--card--dark::after {
1249
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1250
+ }
1175
1251
  @media screen and (min-width: 610px) {
1176
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
1252
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data) {
1177
1253
  margin-top: 2.5723472669rem;
1178
1254
  }
1255
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1256
+ background: inherit;
1257
+ content: "";
1258
+ display: block;
1259
+ height: 48px;
1260
+ position: absolute;
1261
+ width: calc(100% - 87px);
1262
+ }
1263
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1264
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1265
+ background-position: bottom right;
1266
+ background-size: cover;
1267
+ content: "";
1268
+ height: 48px;
1269
+ display: block;
1270
+ position: absolute;
1271
+ width: 87.4px;
1272
+ }
1273
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data).ilo--card--dark::after {
1274
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1275
+ }
1179
1276
  }
1180
1277
  @media screen and (min-width: 1024px) {
1181
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
1278
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data) {
1182
1279
  margin-top: 3.4297963558rem;
1183
1280
  }
1281
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1282
+ background: inherit;
1283
+ content: "";
1284
+ display: block;
1285
+ height: 64px;
1286
+ position: absolute;
1287
+ width: calc(100% - 116px);
1288
+ }
1289
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1290
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1291
+ background-position: bottom right;
1292
+ background-size: cover;
1293
+ content: "";
1294
+ height: 64px;
1295
+ display: block;
1296
+ position: absolute;
1297
+ width: 116.4px;
1298
+ }
1299
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data).ilo--card--dark::after {
1300
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1301
+ }
1184
1302
  }
1185
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1186
- background: inherit;
1187
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1188
- content: "";
1189
- display: block;
1190
- height: 1.6077170418rem;
1303
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1191
1304
  left: 0;
1192
- position: absolute;
1193
- top: -1.5916398714rem;
1194
- width: 100%;
1305
+ top: -2.1436227224rem;
1306
+ transition: background-image 150ms ease-out;
1195
1307
  }
1196
- .right-to-left .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1197
- clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
1308
+ .right-to-left .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1309
+ left: auto;
1310
+ right: 0;
1198
1311
  }
1199
1312
  @media screen and (min-width: 610px) {
1200
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1201
- height: 2.0364415863rem;
1202
- top: -2.0203644159rem;
1313
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1314
+ top: -2.5562700965rem;
1203
1315
  }
1204
1316
  }
1205
1317
  @media screen and (min-width: 1024px) {
1206
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1207
- height: 3.1082529475rem;
1208
- top: -3.0921757771rem;
1318
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1319
+ top: -3.4137191854rem;
1320
+ }
1321
+ }
1322
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1323
+ right: 0;
1324
+ top: -2.1436227224rem;
1325
+ transition: background-image 150ms ease-out;
1326
+ }
1327
+ .right-to-left .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1328
+ left: 0;
1329
+ right: auto;
1330
+ transform: rotateY(180deg);
1331
+ }
1332
+ @media screen and (min-width: 610px) {
1333
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1334
+ top: -2.5562700965rem;
1335
+ }
1336
+ }
1337
+ @media screen and (min-width: 1024px) {
1338
+ .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1339
+ top: -3.4137191854rem;
1209
1340
  }
1210
1341
  }
1211
1342
  .ilo--card--eyebrow {
@@ -1218,7 +1349,7 @@ body {
1218
1349
  transition-duration: 150ms;
1219
1350
  transition-timing-function: ease-out;
1220
1351
  }
1221
- .ilo--card--link:hover .ilo--card--eyebrow, .ilo--card--link:focus .ilo--card--eyebrow {
1352
+ .ilo--card--link:hover .ilo--card--eyebrow, .ilo--card--link:focus .ilo--card--eyebrow, .ilo--card--link:focus-within .ilo--card--eyebrow {
1222
1353
  color: rgb(30, 45, 190);
1223
1354
  transition-property: color;
1224
1355
  transition-duration: 150ms;
@@ -1236,7 +1367,7 @@ body {
1236
1367
  transition-duration: 150ms;
1237
1368
  transition-timing-function: ease-out;
1238
1369
  }
1239
- .ilo--card--link:hover .ilo--card--title, .ilo--card--link:focus .ilo--card--title {
1370
+ .ilo--card--link:hover .ilo--card--title, .ilo--card--link:focus .ilo--card--title, .ilo--card--link:focus-within .ilo--card--title {
1240
1371
  color: rgb(30, 45, 190);
1241
1372
  transition-property: color;
1242
1373
  transition-duration: 150ms;
@@ -1252,7 +1383,7 @@ body {
1252
1383
  transition-duration: 150ms;
1253
1384
  transition-timing-function: ease-out;
1254
1385
  }
1255
- .ilo--card--link:hover .ilo--card--intro, .ilo--card--link:focus .ilo--card--intro {
1386
+ .ilo--card--link:hover .ilo--card--intro, .ilo--card--link:focus .ilo--card--intro, .ilo--card--link:focus-within .ilo--card--intro {
1256
1387
  color: rgb(30, 45, 190);
1257
1388
  transition-property: color;
1258
1389
  transition-duration: 150ms;
@@ -1268,7 +1399,7 @@ body {
1268
1399
  transition-duration: 150ms;
1269
1400
  transition-timing-function: ease-out;
1270
1401
  }
1271
- .ilo--card--link:hover .ilo--card--date, .ilo--card--link:focus .ilo--card--date {
1402
+ .ilo--card--link:hover .ilo--card--date, .ilo--card--link:focus .ilo--card--date, .ilo--card--link:focus-within .ilo--card--date {
1272
1403
  color: rgb(30, 45, 190);
1273
1404
  transition-property: color;
1274
1405
  transition-duration: 150ms;
@@ -1457,14 +1588,14 @@ body {
1457
1588
  padding: 1.7148981779rem 0;
1458
1589
  }
1459
1590
  }
1460
- .ilo--card--detail:hover, .ilo--card--detail:focus {
1591
+ .ilo--card--detail:hover, .ilo--card--detail:focus, .ilo--card--detail:focus-within {
1461
1592
  filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1462
1593
  }
1463
- .ilo--card--detail:hover picture::before, .ilo--card--detail:focus picture::before {
1594
+ .ilo--card--detail:hover picture::before, .ilo--card--detail:focus picture::before, .ilo--card--detail:focus-within picture::before {
1464
1595
  opacity: 0.4;
1465
1596
  z-index: 2;
1466
1597
  }
1467
- .ilo--card--detail:hover .ilo--card--event-date::before, .ilo--card--detail:focus .ilo--card--event-date::before {
1598
+ .ilo--card--detail:hover .ilo--card--event-date::before, .ilo--card--detail:focus .ilo--card--event-date::before, .ilo--card--detail:focus-within .ilo--card--event-date::before {
1468
1599
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3e%3cpath fill='rgb(30, 45, 190)' d='M6.00007 10.8462L12 0L0 0L6.00007 10.8462Z'/%3e%3c/svg%3e");
1469
1600
  }
1470
1601
  .ilo--card--detail picture {
@@ -1558,28 +1689,143 @@ body {
1558
1689
  }
1559
1690
  .ilo--card--graphic::before {
1560
1691
  background: inherit;
1561
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1562
1692
  content: "";
1563
1693
  display: block;
1564
1694
  height: 40px;
1565
- left: 0;
1566
1695
  position: absolute;
1696
+ width: calc(100% - 73px);
1697
+ }
1698
+ .ilo--card--graphic::after {
1699
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1700
+ background-position: bottom right;
1701
+ background-size: cover;
1702
+ content: "";
1703
+ height: 40px;
1704
+ display: block;
1705
+ position: absolute;
1706
+ width: 73.4px;
1707
+ }
1708
+ .ilo--card--graphic.ilo--card--dark::after {
1709
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1710
+ }
1711
+ .ilo--card--graphic.ilo--card--dark:hover::after, .ilo--card--graphic.ilo--card--dark:focus::after, .ilo--card--graphic.ilo--card--dark:focus-within::after {
1712
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1713
+ }
1714
+ .ilo--card--graphic::before {
1715
+ left: 0;
1567
1716
  top: -39.7px;
1568
- width: 100%;
1717
+ }
1718
+ .right-to-left .ilo--card--graphic::before {
1719
+ left: auto;
1720
+ right: 0;
1721
+ }
1722
+ .ilo--card--graphic::after {
1723
+ right: 0;
1724
+ top: -39.7px;
1725
+ transition: background-image 150ms ease-out;
1726
+ }
1727
+ .right-to-left .ilo--card--graphic::after {
1728
+ left: 0;
1729
+ right: auto;
1730
+ transform: rotateY(180deg);
1569
1731
  }
1570
1732
  .ilo--card--graphic .ilo--profile--contents * {
1571
1733
  color: rgb(255, 255, 255);
1572
1734
  }
1573
- .ilo--card--graphic:hover, .ilo--card--graphic:focus {
1735
+ .ilo--card--graphic:hover, .ilo--card--graphic:focus, .ilo--card--graphic:focus-within {
1574
1736
  filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1575
1737
  }
1576
- .ilo--card--graphic:hover .ilo--profile--contents *, .ilo--card--graphic:focus .ilo--profile--contents * {
1738
+ .ilo--card--graphic:hover .ilo--profile--contents *, .ilo--card--graphic:focus .ilo--profile--contents *, .ilo--card--graphic:focus-within .ilo--profile--contents * {
1577
1739
  color: rgb(30, 45, 190);
1578
1740
  }
1579
1741
  @media screen and (min-width: 610px) {
1580
1742
  .ilo--card--graphic {
1581
1743
  padding: 0 1.7148981779rem 2.1436227224rem;
1582
1744
  }
1745
+ .ilo--card--graphic::before {
1746
+ background: inherit;
1747
+ content: "";
1748
+ display: block;
1749
+ height: 40px;
1750
+ position: absolute;
1751
+ width: calc(100% - 73px);
1752
+ }
1753
+ .ilo--card--graphic::after {
1754
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1755
+ background-position: bottom right;
1756
+ background-size: cover;
1757
+ content: "";
1758
+ height: 40px;
1759
+ display: block;
1760
+ position: absolute;
1761
+ width: 73.4px;
1762
+ }
1763
+ .ilo--card--graphic.ilo--card--dark::after {
1764
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1765
+ }
1766
+ .ilo--card--graphic.ilo--card--dark:hover::after, .ilo--card--graphic.ilo--card--dark:focus::after, .ilo--card--graphic.ilo--card--dark:focus-within::after {
1767
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1768
+ }
1769
+ .ilo--card--graphic::before {
1770
+ left: 0;
1771
+ top: -39.7px;
1772
+ }
1773
+ .right-to-left .ilo--card--graphic::before {
1774
+ left: auto;
1775
+ right: 0;
1776
+ }
1777
+ .ilo--card--graphic::after {
1778
+ right: 0;
1779
+ top: -39.7px;
1780
+ }
1781
+ .right-to-left .ilo--card--graphic::after {
1782
+ left: 0;
1783
+ right: auto;
1784
+ transform: rotateY(180deg);
1785
+ }
1786
+ }
1787
+ @media screen and (min-width: 1024px) {
1788
+ .ilo--card--graphic::before {
1789
+ background: inherit;
1790
+ content: "";
1791
+ display: block;
1792
+ height: 40px;
1793
+ position: absolute;
1794
+ width: calc(100% - 73px);
1795
+ }
1796
+ .ilo--card--graphic::after {
1797
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1798
+ background-position: bottom right;
1799
+ background-size: cover;
1800
+ content: "";
1801
+ height: 40px;
1802
+ display: block;
1803
+ position: absolute;
1804
+ width: 73.4px;
1805
+ }
1806
+ .ilo--card--graphic.ilo--card--dark::after {
1807
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1808
+ }
1809
+ .ilo--card--graphic.ilo--card--dark:hover::after, .ilo--card--graphic.ilo--card--dark:focus::after, .ilo--card--graphic.ilo--card--dark:focus-within::after {
1810
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1811
+ }
1812
+ .ilo--card--graphic::before {
1813
+ left: 0;
1814
+ top: -39.7px;
1815
+ }
1816
+ .right-to-left .ilo--card--graphic::before {
1817
+ left: auto;
1818
+ right: 0;
1819
+ }
1820
+ .ilo--card--graphic::after {
1821
+ right: 0;
1822
+ top: -39.7px;
1823
+ }
1824
+ .right-to-left .ilo--card--graphic::after {
1825
+ left: 0;
1826
+ right: auto;
1827
+ transform: rotateY(180deg);
1828
+ }
1583
1829
  }
1584
1830
  .ilo--card--graphic.ilo--card--wide {
1585
1831
  padding: 0 1.7148981779rem 2.1436227224rem;
@@ -1635,35 +1881,35 @@ body {
1635
1881
  display: block;
1636
1882
  margin-bottom: 1.4398166117rem;
1637
1883
  }
1884
+ .ilo--card--graphic .ilo--card--content {
1885
+ display: flex;
1886
+ flex-direction: column;
1887
+ position: relative;
1888
+ }
1889
+ .ilo--card--graphic .ilo--card--content > * {
1890
+ justify-self: flex-start;
1891
+ }
1892
+ .ilo--card--graphic .ilo--card--content > *:last-child {
1893
+ justify-self: flex-end;
1894
+ margin-bottom: 0;
1895
+ }
1638
1896
  .ilo--card--graphicpromo {
1639
1897
  max-width: 49.3033226152rem;
1640
1898
  padding: 2.1436227224rem 1.2861736334rem;
1641
1899
  width: 100%;
1642
1900
  }
1643
- .ilo--card--graphicpromo.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1644
- height: 2.1436227224rem;
1645
- top: -2.127545552rem;
1646
- }
1647
- .ilo--card--graphicpromo:hover, .ilo--card--graphicpromo:focus {
1901
+ .ilo--card--graphicpromo:hover, .ilo--card--graphicpromo:focus, .ilo--card--graphicpromo:focus-within {
1648
1902
  filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1649
1903
  }
1650
1904
  @media screen and (min-width: 610px) {
1651
1905
  .ilo--card--graphicpromo {
1652
1906
  padding: 2.5723472669rem;
1653
1907
  }
1654
- .ilo--card--graphicpromo.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1655
- height: 3.4297963558rem;
1656
- top: -3.4137191854rem;
1657
- }
1658
1908
  }
1659
1909
  @media screen and (min-width: 1024px) {
1660
1910
  .ilo--card--graphicpromo {
1661
1911
  padding: 3.4297963558rem 3.8585209003rem;
1662
1912
  }
1663
- .ilo--card--graphicpromo.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1664
- height: 3.4297963558rem;
1665
- top: -3.4137191854rem;
1666
- }
1667
1913
  }
1668
1914
  .ilo--card--graphicpromo.ilo--card--wide {
1669
1915
  padding: 3.4297963558rem 3.8585209003rem;
@@ -1765,9 +2011,14 @@ body {
1765
2011
  pointer-events: none;
1766
2012
  }
1767
2013
  .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1768
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1769
- height: 2.1436227224rem;
2014
+ height: 40px;
2015
+ top: -2.127545552rem;
2016
+ width: calc(100% - 73px);
2017
+ }
2018
+ .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2019
+ height: 40px;
1770
2020
  top: -2.127545552rem;
2021
+ width: 73.3px;
1771
2022
  }
1772
2023
  .ilo--card--factlist.ilo--card--dark {
1773
2024
  background: rgb(35, 0, 80);
@@ -1777,9 +2028,14 @@ body {
1777
2028
  padding: 0 2.1436227224rem 3.0010718114rem 2.1436227224rem;
1778
2029
  }
1779
2030
  .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1780
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1781
- height: 2.1972132905rem;
1782
- top: -2.18113612rem;
2031
+ height: 48px;
2032
+ top: -2.5562700965rem;
2033
+ width: calc(100% - 87px);
2034
+ }
2035
+ .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2036
+ height: 48px;
2037
+ top: -2.5562700965rem;
2038
+ width: 87.3px;
1783
2039
  }
1784
2040
  }
1785
2041
  .ilo--card--factlist.ilo--card--wide {
@@ -1821,13 +2077,13 @@ body {
1821
2077
  .ilo--card--factlist.ilo--card--dark .ilo--list__item:last-of-type {
1822
2078
  margin-bottom: 0;
1823
2079
  }
1824
- .ilo--card--factlist.ilo--card--dark:hover .ilo--card--title, .ilo--card--factlist.ilo--card--dark:focus .ilo--card--title {
2080
+ .ilo--card--factlist.ilo--card--dark:hover .ilo--card--title, .ilo--card--factlist.ilo--card--dark:focus .ilo--card--title, .ilo--card--factlist.ilo--card--dark:focus-within .ilo--card--title {
1825
2081
  color: rgb(255, 255, 255);
1826
2082
  transition-property: color;
1827
2083
  transition-duration: 150ms;
1828
2084
  transition-timing-function: ease-out;
1829
2085
  }
1830
- .ilo--card--factlist.ilo--card--dark:hover .ilo--list__item, .ilo--card--factlist.ilo--card--dark:focus .ilo--list__item {
2086
+ .ilo--card--factlist.ilo--card--dark:hover .ilo--list__item, .ilo--card--factlist.ilo--card--dark:focus .ilo--list__item, .ilo--card--factlist.ilo--card--dark:focus-within .ilo--list__item {
1831
2087
  color: rgb(255, 255, 255);
1832
2088
  }
1833
2089
  .ilo--card--factlist .ilo--card--title {
@@ -1847,26 +2103,112 @@ body {
1847
2103
  }
1848
2104
  .ilo--card--stat {
1849
2105
  border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
2106
+ margin-top: 2.1436227224rem;
1850
2107
  padding: 0 1.2861736334rem 2.1436227224rem 1.1789924973rem;
2108
+ position: relative;
1851
2109
  width: 100%;
1852
2110
  }
1853
2111
  .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1854
- clip-path: polygon(75% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1855
- height: 2.1436227224rem;
2112
+ left: 0;
2113
+ top: -2.127545552rem;
2114
+ }
2115
+ .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2116
+ left: auto;
2117
+ right: 0;
2118
+ }
2119
+ .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2120
+ right: 0;
1856
2121
  top: -2.127545552rem;
1857
2122
  }
2123
+ .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2124
+ left: 0;
2125
+ right: auto;
2126
+ transform: rotateY(180deg);
2127
+ }
1858
2128
  .ilo--card--stat.ilo--card--blue {
1859
2129
  background: rgb(235, 245, 253);
1860
2130
  }
2131
+ .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2132
+ background: inherit;
2133
+ content: "";
2134
+ display: block;
2135
+ height: 40px;
2136
+ position: absolute;
2137
+ width: calc(100% - 73px);
2138
+ }
2139
+ .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2140
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(235, 245, 253)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2141
+ background-position: bottom right;
2142
+ background-size: cover;
2143
+ content: "";
2144
+ height: 40px;
2145
+ display: block;
2146
+ position: absolute;
2147
+ width: 73.4px;
2148
+ }
1861
2149
  .ilo--card--stat.ilo--card--yellow {
1862
2150
  background: rgb(255, 205, 45);
1863
2151
  }
2152
+ .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2153
+ background: inherit;
2154
+ content: "";
2155
+ display: block;
2156
+ height: 40px;
2157
+ position: absolute;
2158
+ width: calc(100% - 73px);
2159
+ }
2160
+ .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2161
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 205, 45)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2162
+ background-position: bottom right;
2163
+ background-size: cover;
2164
+ content: "";
2165
+ height: 40px;
2166
+ display: block;
2167
+ position: absolute;
2168
+ width: 73.4px;
2169
+ }
1864
2170
  .ilo--card--stat.ilo--card--green {
1865
2171
  background: rgb(140, 225, 100);
1866
2172
  }
2173
+ .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2174
+ background: inherit;
2175
+ content: "";
2176
+ display: block;
2177
+ height: 40px;
2178
+ position: absolute;
2179
+ width: calc(100% - 73px);
2180
+ }
2181
+ .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2182
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(140, 225, 100)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2183
+ background-position: bottom right;
2184
+ background-size: cover;
2185
+ content: "";
2186
+ height: 40px;
2187
+ display: block;
2188
+ position: absolute;
2189
+ width: 73.4px;
2190
+ }
1867
2191
  .ilo--card--stat.ilo--card--turquoise {
1868
2192
  background: rgb(5, 210, 210);
1869
2193
  }
2194
+ .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2195
+ background: inherit;
2196
+ content: "";
2197
+ display: block;
2198
+ height: 40px;
2199
+ position: absolute;
2200
+ width: calc(100% - 73px);
2201
+ }
2202
+ .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2203
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(5, 210, 210)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2204
+ background-position: bottom right;
2205
+ background-size: cover;
2206
+ content: "";
2207
+ height: 40px;
2208
+ display: block;
2209
+ position: absolute;
2210
+ width: 73.4px;
2211
+ }
1870
2212
  .ilo--card--stat .ilo--card--content {
1871
2213
  display: flex;
1872
2214
  flex-wrap: wrap;
@@ -1885,9 +2227,10 @@ body {
1885
2227
  }
1886
2228
  .ilo--card--stat .ilo--card--intro {
1887
2229
  color: rgb(35, 0, 80);
1888
- font-size: 14.93px;
1889
- letter-spacing: -0.02em;
1890
- line-height: 20.16px;
2230
+ font-family: Overpass;
2231
+ font-size: 18.66px;
2232
+ letter-spacing: normal;
2233
+ line-height: 27.24px;
1891
2234
  margin-bottom: 1.6734954235rem;
1892
2235
  width: 100%;
1893
2236
  }
@@ -1897,30 +2240,75 @@ body {
1897
2240
  line-height: 16.24px;
1898
2241
  align-self: flex-end;
1899
2242
  }
1900
- @media screen and (min-width: 1024px) {
1901
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1902
- height: 2.5723472669rem;
1903
- top: -2.5562700965rem;
1904
- }
1905
- }
1906
2243
  .ilo--card--data {
1907
2244
  background: rgb(235, 245, 253);
1908
2245
  border-bottom: 0.1607717042rem solid #82afdc;
2246
+ margin-top: 2.1436227224rem;
1909
2247
  max-width: 32.154340836rem;
1910
2248
  padding: 0 1.2861736334rem 3.0010718114rem;
2249
+ position: relative;
1911
2250
  }
1912
- .ilo--card--data:hover, .ilo--card--data:focus {
2251
+ .ilo--card--data::before {
2252
+ background: inherit;
2253
+ content: "";
2254
+ display: block;
2255
+ height: 40px;
2256
+ position: absolute;
2257
+ width: calc(100% - 73px);
2258
+ }
2259
+ .ilo--card--data::after {
2260
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(235, 245, 253)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2261
+ background-position: bottom right;
2262
+ background-size: cover;
2263
+ content: "";
2264
+ height: 40px;
2265
+ display: block;
2266
+ position: absolute;
2267
+ width: 73.4px;
2268
+ }
2269
+ .ilo--card--data:hover, .ilo--card--data:focus, .ilo--card--data:focus-within {
1913
2270
  background: rgb(235, 245, 253);
1914
2271
  }
1915
2272
  .ilo--card--data::before {
1916
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1917
- height: 2.1436227224rem;
2273
+ left: 0;
1918
2274
  top: -2.127545552rem;
1919
2275
  }
1920
- @media screen and (min-width: 1024px) {
2276
+ .right-to-left .ilo--card--data::before {
2277
+ left: auto;
2278
+ right: 0;
2279
+ }
2280
+ .ilo--card--data::after {
2281
+ right: 0;
2282
+ top: -2.127545552rem;
2283
+ }
2284
+ .right-to-left .ilo--card--data::after {
2285
+ left: 0;
2286
+ right: auto;
2287
+ transform: rotateY(180deg);
2288
+ }
2289
+ @media screen and (min-width: 610px) {
1921
2290
  .ilo--card--data::before {
1922
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1923
- height: 2.5723472669rem;
2291
+ background: inherit;
2292
+ content: "";
2293
+ display: block;
2294
+ height: 48px;
2295
+ position: absolute;
2296
+ width: calc(100% - 84px);
2297
+ }
2298
+ .ilo--card--data::after {
2299
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(235, 245, 253)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2300
+ background-position: bottom right;
2301
+ background-size: cover;
2302
+ content: "";
2303
+ height: 48px;
2304
+ display: block;
2305
+ position: absolute;
2306
+ width: 84.4px;
2307
+ }
2308
+ .ilo--card--data::before {
2309
+ top: -2.5562700965rem;
2310
+ }
2311
+ .ilo--card--data::after {
1924
2312
  top: -2.5562700965rem;
1925
2313
  }
1926
2314
  }
@@ -1980,7 +2368,7 @@ body {
1980
2368
  color: rgb(255, 255, 255);
1981
2369
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(255, 255, 255)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1982
2370
  }
1983
- .ilo--card--feature.ilo--card--dark:hover .ilo--link-list--link, .ilo--card--feature.ilo--card--dark:focus .ilo--link-list--link {
2371
+ .ilo--card--feature.ilo--card--dark:hover .ilo--link-list--link, .ilo--card--feature.ilo--card--dark:focus .ilo--link-list--link, .ilo--card--feature.ilo--card--dark:focus-within .ilo--link-list--link {
1984
2372
  color: rgb(30, 45, 190);
1985
2373
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1986
2374
  }
@@ -1989,19 +2377,19 @@ body {
1989
2377
  transition-duration: 150ms;
1990
2378
  transition-timing-function: ease-out;
1991
2379
  }
1992
- .ilo--card--feature:hover, .ilo--card--feature:focus {
2380
+ .ilo--card--feature:hover, .ilo--card--feature:focus, .ilo--card--feature:focus-within {
1993
2381
  background-color: rgb(255, 255, 255);
1994
2382
  filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1995
2383
  border-bottom: 0.1607717042rem solid rgb(30, 45, 190);
1996
2384
  }
1997
- .ilo--card--feature:hover picture::before, .ilo--card--feature:focus picture::before {
2385
+ .ilo--card--feature:hover picture::before, .ilo--card--feature:focus picture::before, .ilo--card--feature:focus-within picture::before {
1998
2386
  opacity: 0.4;
1999
2387
  z-index: 1;
2000
2388
  transition-property: opacity;
2001
2389
  transition-duration: 150ms;
2002
2390
  transition-timing-function: ease-out;
2003
2391
  }
2004
- .ilo--card--feature:hover .ilo--card--image, .ilo--card--feature:focus .ilo--card--image {
2392
+ .ilo--card--feature:hover .ilo--card--image, .ilo--card--feature:focus .ilo--card--image, .ilo--card--feature:focus-within .ilo--card--image {
2005
2393
  filter: saturate(0);
2006
2394
  }
2007
2395
  .ilo--card--feature .ilo--link-list {
@@ -2037,7 +2425,9 @@ body {
2037
2425
  }
2038
2426
  .ilo--card--feature.ilo--card--wide .ilo--card--content {
2039
2427
  display: flex;
2428
+ flex-direction: row;
2040
2429
  flex-wrap: wrap;
2430
+ position: relative;
2041
2431
  width: 50%;
2042
2432
  }
2043
2433
  .ilo--card--feature.ilo--card--wide .ilo--card--image--wrapper {
@@ -2048,6 +2438,7 @@ body {
2048
2438
  }
2049
2439
  .ilo--card--feature.ilo--card--wide .ilo--card--date {
2050
2440
  align-self: flex-end;
2441
+ width: 100%;
2051
2442
  }
2052
2443
  .ilo--card--feature.ilo--card--wide .ilo--card--eyebrow {
2053
2444
  width: 100%;
@@ -2055,6 +2446,9 @@ body {
2055
2446
  .ilo--card--feature.ilo--card--wide .ilo--card--title {
2056
2447
  width: 100%;
2057
2448
  }
2449
+ .ilo--card--feature.ilo--card--wide .ilo--link-list {
2450
+ width: calc(100% + 48px);
2451
+ }
2058
2452
  }
2059
2453
  .ilo--card--feature .ilo--card--wrap {
2060
2454
  display: flex;
@@ -2109,7 +2503,7 @@ body {
2109
2503
 
2110
2504
  /**
2111
2505
  * Do not edit directly
2112
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2506
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2113
2507
  */
2114
2508
  /**
2115
2509
  * TOKENS:
@@ -2132,17 +2526,17 @@ body {
2132
2526
  }
2133
2527
  @media screen and (min-width: 1024px) {
2134
2528
  .ilo--cardgroup--two .ilo--card {
2135
- width: calc(50% - 32px);
2529
+ width: calc(50% - 24px);
2136
2530
  }
2137
2531
  }
2138
2532
  @media screen and (min-width: 1024px) {
2139
2533
  .ilo--cardgroup--three .ilo--card {
2140
- width: calc(33.333% - 32px);
2534
+ width: calc(33.333% - 24px);
2141
2535
  }
2142
2536
  }
2143
2537
  @media screen and (min-width: 1024px) {
2144
2538
  .ilo--cardgroup--four .ilo--card {
2145
- width: calc(25% - 32px);
2539
+ width: calc(25% - 24px);
2146
2540
  }
2147
2541
  }
2148
2542
  .ilo--cardgroup--button-wrap {
@@ -2154,7 +2548,7 @@ body {
2154
2548
 
2155
2549
  /**
2156
2550
  * Do not edit directly
2157
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2551
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2158
2552
  */
2159
2553
  /**
2160
2554
  * TOKENS:
@@ -2259,7 +2653,7 @@ body {
2259
2653
 
2260
2654
  /**
2261
2655
  * Do not edit directly
2262
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2656
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2263
2657
  */
2264
2658
  /**
2265
2659
  * TOKENS:
@@ -2291,10 +2685,12 @@ body {
2291
2685
  padding: 0 0.4287245445rem;
2292
2686
  }
2293
2687
  .ilo--context-menu--item:first-of-type {
2294
- border-radius: 2px 2px 0 0;
2688
+ border-top-left-radius: 2px;
2689
+ border-top-right-radius: 2px;
2295
2690
  }
2296
2691
  .ilo--context-menu--item:last-of-type {
2297
- border-radius: 0 0 2px 2px;
2692
+ border-bottom-left-radius: 2px;
2693
+ border-bottom-right-radius: 2px;
2298
2694
  }
2299
2695
  .ilo--context-menu--item:last-of-type a {
2300
2696
  border-bottom: none;
@@ -2338,7 +2734,7 @@ body {
2338
2734
 
2339
2735
  /**
2340
2736
  * Do not edit directly
2341
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2737
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2342
2738
  */
2343
2739
  /**
2344
2740
  * TOKENS:
@@ -2348,7 +2744,7 @@ body {
2348
2744
  */
2349
2745
  /**
2350
2746
  * Do not edit directly
2351
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2747
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2352
2748
  */
2353
2749
  /**
2354
2750
  * TOKENS:
@@ -2358,7 +2754,7 @@ body {
2358
2754
  */
2359
2755
  /**
2360
2756
  * Do not edit directly
2361
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2757
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2362
2758
  */
2363
2759
  /**
2364
2760
  * TOKENS:
@@ -2368,7 +2764,7 @@ body {
2368
2764
  */
2369
2765
  /**
2370
2766
  * Do not edit directly
2371
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2767
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2372
2768
  */
2373
2769
  /**
2374
2770
  * TOKENS:
@@ -2494,7 +2890,7 @@ body {
2494
2890
 
2495
2891
  /**
2496
2892
  * Do not edit directly
2497
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2893
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2498
2894
  */
2499
2895
  /**
2500
2896
  * TOKENS:
@@ -2522,7 +2918,7 @@ body {
2522
2918
 
2523
2919
  /**
2524
2920
  * Do not edit directly
2525
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2921
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2526
2922
  */
2527
2923
  /**
2528
2924
  * TOKENS:
@@ -2573,6 +2969,7 @@ body {
2573
2969
  border-left: 0.1607717042rem solid rgb(30, 45, 190);
2574
2970
  border-right: 0.1071811361rem solid rgb(184, 196, 204);
2575
2971
  border-top: 0.1071811361rem solid rgb(184, 196, 204);
2972
+ border-left-width: 2px;
2576
2973
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M12 16.7791L4 8.77914L5.45455 7.2207L12 13.7662L18.5455 7.2207L20 8.77914L12 16.7791Z'/%3e%3c/svg%3e"), linear-gradient(to right, transparent 0%, transparent calc(50% - 0.81px), rgb(184, 196, 204) calc(50% - 0.8px), rgb(184, 196, 204) calc(50% + 0.8px), transparent calc(50% + 0.81px), transparent 100%);
2577
2974
  cursor: pointer;
2578
2975
  }
@@ -2582,6 +2979,7 @@ body {
2582
2979
  border-left: 0.1607717042rem solid rgb(30, 45, 190);
2583
2980
  border-right: 0.1071811361rem solid rgb(184, 196, 204);
2584
2981
  border-top: 0.1071811361rem solid rgb(184, 196, 204);
2982
+ border-left-width: 2px;
2585
2983
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M12 16.7791L4 8.77914L5.45455 7.2207L12 13.7662L18.5455 7.2207L20 8.77914L12 16.7791Z'/%3e%3c/svg%3e"), linear-gradient(to right, transparent 0%, transparent calc(50% - 0.81px), rgb(184, 196, 204) calc(50% - 0.8px), rgb(184, 196, 204) calc(50% + 0.8px), transparent calc(50% + 0.81px), transparent 100%);
2586
2984
  }
2587
2985
  .ilo--dropdown:active {
@@ -2608,7 +3006,7 @@ body {
2608
3006
 
2609
3007
  /**
2610
3008
  * Do not edit directly
2611
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3009
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2612
3010
  */
2613
3011
  /**
2614
3012
  * TOKENS:
@@ -2618,7 +3016,7 @@ body {
2618
3016
  */
2619
3017
  /**
2620
3018
  * Do not edit directly
2621
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3019
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2622
3020
  */
2623
3021
  /**
2624
3022
  * TOKENS:
@@ -2628,7 +3026,7 @@ body {
2628
3026
  */
2629
3027
  /**
2630
3028
  * Do not edit directly
2631
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3029
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2632
3030
  */
2633
3031
  /**
2634
3032
  * TOKENS:
@@ -2681,7 +3079,7 @@ body {
2681
3079
 
2682
3080
  /**
2683
3081
  * Do not edit directly
2684
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3082
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2685
3083
  */
2686
3084
  /**
2687
3085
  * TOKENS:
@@ -2756,7 +3154,7 @@ body {
2756
3154
 
2757
3155
  /**
2758
3156
  * Do not edit directly
2759
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3157
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2760
3158
  */
2761
3159
  /**
2762
3160
  * TOKENS:
@@ -2862,7 +3260,7 @@ body {
2862
3260
 
2863
3261
  /**
2864
3262
  * Do not edit directly
2865
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3263
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2866
3264
  */
2867
3265
  /**
2868
3266
  * TOKENS:
@@ -2885,7 +3283,7 @@ body {
2885
3283
 
2886
3284
  /**
2887
3285
  * Do not edit directly
2888
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3286
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2889
3287
  */
2890
3288
  /**
2891
3289
  * TOKENS:
@@ -2899,7 +3297,7 @@ body {
2899
3297
 
2900
3298
  /**
2901
3299
  * Do not edit directly
2902
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3300
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2903
3301
  */
2904
3302
  /**
2905
3303
  * TOKENS:
@@ -2909,7 +3307,7 @@ body {
2909
3307
  */
2910
3308
  /**
2911
3309
  * Do not edit directly
2912
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3310
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2913
3311
  */
2914
3312
  /**
2915
3313
  * TOKENS:
@@ -2934,7 +3332,7 @@ body {
2934
3332
  }
2935
3333
  /**
2936
3334
  * Do not edit directly
2937
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3335
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2938
3336
  */
2939
3337
  /**
2940
3338
  * TOKENS:
@@ -3334,7 +3732,7 @@ body {
3334
3732
 
3335
3733
  /**
3336
3734
  * Do not edit directly
3337
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3735
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3338
3736
  */
3339
3737
  /**
3340
3738
  * TOKENS:
@@ -3457,7 +3855,7 @@ body {
3457
3855
 
3458
3856
  /**
3459
3857
  * Do not edit directly
3460
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3858
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3461
3859
  */
3462
3860
  /**
3463
3861
  * TOKENS:
@@ -3595,16 +3993,20 @@ body {
3595
3993
  }
3596
3994
  }
3597
3995
  .ilo--hero .ilo--breadcrumb {
3598
- left: 0;
3599
- max-width: 560px;
3600
- position: absolute;
3601
- top: 0;
3602
3996
  width: 100%;
3603
3997
  }
3604
3998
  .right-to-left .ilo--hero .ilo--breadcrumb {
3605
3999
  left: auto;
3606
4000
  right: 0;
3607
4001
  }
4002
+ @media screen and (min-width: 610px) {
4003
+ .ilo--hero .ilo--breadcrumb {
4004
+ left: 0;
4005
+ max-width: 560px;
4006
+ position: absolute;
4007
+ top: 0;
4008
+ }
4009
+ }
3608
4010
 
3609
4011
  .ilo--hero-card {
3610
4012
  background: rgb(255, 255, 255);
@@ -3615,30 +4017,70 @@ body {
3615
4017
  }
3616
4018
  .ilo--hero-card::before {
3617
4019
  background: inherit;
3618
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
3619
4020
  content: "";
3620
4021
  display: block;
3621
4022
  height: 40px;
3622
- left: 0;
3623
4023
  position: absolute;
4024
+ width: calc(100% - 73px);
4025
+ }
4026
+ .ilo--hero-card::after {
4027
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
4028
+ background-position: bottom right;
4029
+ background-size: cover;
4030
+ content: "";
4031
+ height: 40px;
4032
+ display: block;
4033
+ position: absolute;
4034
+ width: 73.4px;
4035
+ }
4036
+ .ilo--hero-card::before {
4037
+ left: 0;
3624
4038
  top: -39.7px;
3625
- width: 100%;
3626
4039
  }
3627
4040
  .right-to-left .ilo--hero-card::before {
3628
- clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
3629
4041
  left: auto;
3630
4042
  right: 0;
3631
4043
  }
3632
4044
  @media screen and (min-width: 1024px) {
3633
4045
  .ilo--hero-card::before {
3634
- height: 56px;
3635
- top: -55.7px;
4046
+ top: -63.7px;
4047
+ }
4048
+ }
4049
+ .ilo--hero-card::after {
4050
+ right: 0;
4051
+ top: -39.7px;
4052
+ }
4053
+ .right-to-left .ilo--hero-card::after {
4054
+ left: 0;
4055
+ right: auto;
4056
+ }
4057
+ @media screen and (min-width: 1024px) {
4058
+ .ilo--hero-card::after {
4059
+ top: -63.7px;
3636
4060
  }
3637
4061
  }
3638
4062
  @media screen and (min-width: 1024px) {
3639
4063
  .ilo--hero-card {
3640
4064
  padding: 0 70px 70px 56px;
3641
4065
  }
4066
+ .ilo--hero-card::before {
4067
+ background: inherit;
4068
+ content: "";
4069
+ display: block;
4070
+ height: 64px;
4071
+ position: absolute;
4072
+ width: calc(100% - 116px);
4073
+ }
4074
+ .ilo--hero-card::after {
4075
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
4076
+ background-position: bottom right;
4077
+ background-size: cover;
4078
+ content: "";
4079
+ height: 64px;
4080
+ display: block;
4081
+ position: absolute;
4082
+ width: 116.4px;
4083
+ }
3642
4084
  .ilo--hero-card.ilo--hero-card--graphic {
3643
4085
  padding: 0 70px 44px 56px;
3644
4086
  }
@@ -3654,6 +4096,9 @@ body {
3654
4096
  border-bottom: 3px solid rgb(250, 60, 75);
3655
4097
  color: rgb(255, 255, 255);
3656
4098
  }
4099
+ .ilo--hero-card--dark::after {
4100
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
4101
+ }
3657
4102
  .ilo--hero-card--dark .ilo--hero-card--link.icon {
3658
4103
  color: rgb(255, 255, 255);
3659
4104
  }
@@ -3694,6 +4139,15 @@ body {
3694
4139
  .ilo--hero-card--home::before {
3695
4140
  display: none;
3696
4141
  }
4142
+ .ilo--hero-card--home.ilo--hero-card--nobackground {
4143
+ background: transparent;
4144
+ }
4145
+ .ilo--hero-card--home.ilo--hero-card--nobackground > * {
4146
+ filter: drop-shadow(0px 12px 32px rgba(0, 0, 0, 0.16)) drop-shadow(0px 0.8px 1.6px rgba(0, 0, 0, 0.02)) drop-shadow(0px 2.7px 4.8px rgba(0, 0, 0, 0.04)) drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.08));
4147
+ }
4148
+ .ilo--hero-card--home.ilo--hero-card--nobackground::before, .ilo--hero-card--home.ilo--hero-card--nobackground::after {
4149
+ content: "";
4150
+ }
3697
4151
  @media screen and (min-width: 1024px) {
3698
4152
  .ilo--hero-card--home {
3699
4153
  bottom: 72px;
@@ -3704,20 +4158,38 @@ body {
3704
4158
  }
3705
4159
  .ilo--hero-card--home::before {
3706
4160
  background: inherit;
3707
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
3708
4161
  content: "";
3709
4162
  display: block;
3710
- height: 59px;
3711
- left: 0;
4163
+ height: 48px;
3712
4164
  position: absolute;
3713
- top: -58.7px;
3714
- width: 100%;
4165
+ width: calc(100% - 87.4px);
4166
+ }
4167
+ .ilo--hero-card--home::after {
4168
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
4169
+ background-position: bottom right;
4170
+ background-size: cover;
4171
+ content: "";
4172
+ height: 48px;
4173
+ display: block;
4174
+ position: absolute;
4175
+ width: 87.8px;
4176
+ }
4177
+ .ilo--hero-card--home::before {
4178
+ left: 0;
4179
+ top: -48px;
3715
4180
  }
3716
4181
  .right-to-left .ilo--hero-card--home::before {
3717
- clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
3718
4182
  left: auto;
3719
4183
  right: 0;
3720
4184
  }
4185
+ .ilo--hero-card--home::after {
4186
+ right: 0;
4187
+ top: -48px;
4188
+ }
4189
+ .right-to-left .ilo--hero-card--home::after {
4190
+ left: 0;
4191
+ right: auto;
4192
+ }
3721
4193
  .ilo--hero-card--home.ilo--hero-card--center {
3722
4194
  left: 50%;
3723
4195
  right: auto;
@@ -3731,11 +4203,26 @@ body {
3731
4203
  left: auto;
3732
4204
  right: 0;
3733
4205
  }
4206
+ .ilo--hero-card--home.ilo--hero-card--nobackground {
4207
+ background: transparent;
4208
+ }
4209
+ .ilo--hero-card--home.ilo--hero-card--nobackground::before, .ilo--hero-card--home.ilo--hero-card--nobackground::after {
4210
+ content: "";
4211
+ }
3734
4212
  }
3735
4213
  @media screen and (min-width: 1024px) {
3736
4214
  .ilo--hero-card--home.ilo--hero-card--dark {
3737
4215
  background: rgba(35, 0, 80, 0.55);
3738
4216
  }
4217
+ .ilo--hero-card--home.ilo--hero-card--dark.ilo--hero-card--nobackground {
4218
+ background: transparent;
4219
+ }
4220
+ .ilo--hero-card--home.ilo--hero-card--dark.ilo--hero-card--nobackground::before, .ilo--hero-card--home.ilo--hero-card--dark.ilo--hero-card--nobackground::after {
4221
+ content: "";
4222
+ }
4223
+ }
4224
+ .ilo--hero-card--home.ilo--hero-card--dark::after {
4225
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgba(35, 0, 80, 0.55)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
3739
4226
  }
3740
4227
  .ilo--hero-card--portal {
3741
4228
  background: rgb(35, 0, 80);
@@ -3745,18 +4232,22 @@ body {
3745
4232
  @media screen and (min-width: 1024px) {
3746
4233
  .ilo--hero-card--portal {
3747
4234
  max-width: 625px;
3748
- padding: 0 48px 48px 72px;
4235
+ padding: 0 48px 42px 72px;
3749
4236
  width: 100%;
3750
4237
  }
3751
4238
  }
3752
4239
  .ilo--hero-card--publication {
3753
4240
  padding: 24px;
3754
4241
  }
4242
+ .ilo--hero-card--publication .ilo--hero-card--eyebrow {
4243
+ margin-bottom: 0.3215434084rem;
4244
+ }
3755
4245
  @media screen and (min-width: 1024px) {
3756
4246
  .ilo--hero-card--publication {
4247
+ margin-left: 106px;
3757
4248
  margin-top: -64px;
3758
4249
  max-width: 720px;
3759
- padding: 0 48px 48px 72px;
4250
+ padding: 0 48px 48px 48px;
3760
4251
  width: 100%;
3761
4252
  }
3762
4253
  }
@@ -3807,7 +4298,7 @@ body {
3807
4298
  }
3808
4299
  .ilo--hero-card--list--item {
3809
4300
  display: inline-block;
3810
- margin-right: 32px;
4301
+ margin-right: 24px;
3811
4302
  }
3812
4303
  .ilo--hero-card--list--item:last-of-type {
3813
4304
  margin-right: 0;
@@ -3855,7 +4346,7 @@ body {
3855
4346
 
3856
4347
  /**
3857
4348
  * Do not edit directly
3858
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4349
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3859
4350
  */
3860
4351
  /**
3861
4352
  * TOKENS:
@@ -3911,7 +4402,7 @@ body {
3911
4402
 
3912
4403
  /**
3913
4404
  * Do not edit directly
3914
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4405
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3915
4406
  */
3916
4407
  /**
3917
4408
  * TOKENS:
@@ -4053,7 +4544,7 @@ body {
4053
4544
 
4054
4545
  /**
4055
4546
  * Do not edit directly
4056
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4547
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4057
4548
  */
4058
4549
  /**
4059
4550
  * TOKENS:
@@ -4063,7 +4554,7 @@ body {
4063
4554
  */
4064
4555
  /**
4065
4556
  * Do not edit directly
4066
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4557
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4067
4558
  */
4068
4559
  /**
4069
4560
  * TOKENS:
@@ -4088,7 +4579,7 @@ body {
4088
4579
  }
4089
4580
  /**
4090
4581
  * Do not edit directly
4091
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4582
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4092
4583
  */
4093
4584
  /**
4094
4585
  * TOKENS:
@@ -4246,7 +4737,7 @@ body {
4246
4737
 
4247
4738
  /**
4248
4739
  * Do not edit directly
4249
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4740
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4250
4741
  */
4251
4742
  /**
4252
4743
  * TOKENS:
@@ -4301,12 +4792,20 @@ body {
4301
4792
  padding-left: 0;
4302
4793
  }
4303
4794
  .ilo--list__title {
4304
- font-size: 23.32px;
4795
+ font-size: 18.66px;
4305
4796
  letter-spacing: -0.035em;
4306
- line-height: 29.15px;
4797
+ line-height: 24.26px;
4798
+ margin-bottom: 1.1254019293rem;
4307
4799
  font-family: Overpass;
4308
4800
  font-weight: 700;
4309
- margin-bottom: 1.5763397642rem;
4801
+ }
4802
+ @media screen and (min-width: 610px) {
4803
+ .ilo--list__title {
4804
+ font-size: 23.32px;
4805
+ letter-spacing: -0.035em;
4806
+ line-height: 29.15px;
4807
+ margin-bottom: 1.4469453376rem;
4808
+ }
4310
4809
  }
4311
4810
  .ilo--list__item {
4312
4811
  font-size: 16px;
@@ -4327,13 +4826,13 @@ body {
4327
4826
  font-size: 18.66px;
4328
4827
  letter-spacing: normal;
4329
4828
  line-height: 27.24px;
4330
- margin-bottom: 1.0110920672rem;
4829
+ margin-bottom: 0.7967297949rem;
4331
4830
  }
4332
4831
  }
4333
4832
 
4334
4833
  /**
4335
4834
  * Do not edit directly
4336
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4835
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4337
4836
  */
4338
4837
  /**
4339
4838
  * TOKENS:
@@ -4343,7 +4842,7 @@ body {
4343
4842
  */
4344
4843
  /**
4345
4844
  * Do not edit directly
4346
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4845
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4347
4846
  */
4348
4847
  /**
4349
4848
  * TOKENS:
@@ -4353,7 +4852,7 @@ body {
4353
4852
  */
4354
4853
  /**
4355
4854
  * Do not edit directly
4356
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4855
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4357
4856
  */
4358
4857
  /**
4359
4858
  * TOKENS:
@@ -4461,7 +4960,7 @@ body {
4461
4960
 
4462
4961
  /**
4463
4962
  * Do not edit directly
4464
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4963
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4465
4964
  */
4466
4965
  /**
4467
4966
  * TOKENS:
@@ -4471,7 +4970,7 @@ body {
4471
4970
  */
4472
4971
  /**
4473
4972
  * Do not edit directly
4474
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4973
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4475
4974
  */
4476
4975
  /**
4477
4976
  * TOKENS:
@@ -4481,7 +4980,7 @@ body {
4481
4980
  */
4482
4981
  /**
4483
4982
  * Do not edit directly
4484
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4983
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4485
4984
  */
4486
4985
  /**
4487
4986
  * TOKENS:
@@ -4578,7 +5077,7 @@ body {
4578
5077
 
4579
5078
  /**
4580
5079
  * Do not edit directly
4581
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
5080
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4582
5081
  */
4583
5082
  /**
4584
5083
  * TOKENS:
@@ -4592,7 +5091,12 @@ body {
4592
5091
  z-index: 4;
4593
5092
  }
4594
5093
  .ilo--header.ilo--mobile--open {
4595
- height: 100vh;
5094
+ height: 100%;
5095
+ left: 0;
5096
+ min-height: 100vh;
5097
+ position: fixed;
5098
+ top: 0;
5099
+ width: 100%;
4596
5100
  }
4597
5101
  @media screen and (min-width: 1024px) {
4598
5102
  .ilo--header {
@@ -4701,6 +5205,45 @@ body {
4701
5205
  .ilo--header--utility-bar--local .ilo--language-switcher {
4702
5206
  display: none;
4703
5207
  }
5208
+ .ilo--header--utility-bar--local .ilo--language-switcher--link {
5209
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(255, 255, 255)' d='m7.9 12.5-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3e%3c/svg%3e");
5210
+ font-size: 11.94px;
5211
+ letter-spacing: -0.02em;
5212
+ line-height: 16.12px;
5213
+ appearance: none;
5214
+ background-color: inherit;
5215
+ background-position: 16px 50%;
5216
+ background-repeat: no-repeat;
5217
+ background-size: 24px;
5218
+ border: none;
5219
+ color: rgb(255, 255, 255);
5220
+ cursor: pointer;
5221
+ font-family: Overpass;
5222
+ font-weight: 500;
5223
+ padding: 16px 16px 16px 36px;
5224
+ text-decoration: none;
5225
+ transition: all 150ms ease-out;
5226
+ width: 100%;
5227
+ }
5228
+ .ilo--header--utility-bar--local .ilo--language-switcher--link:focus, .ilo--header--utility-bar--local .ilo--language-switcher--link:hover {
5229
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='m7.9 12.5-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3e%3c/svg%3e");
5230
+ background-color: rgb(235, 245, 253);
5231
+ color: rgb(30, 45, 190);
5232
+ }
5233
+ .right-to-left .ilo--header--utility-bar--local .ilo--language-switcher--link {
5234
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(255, 255, 255)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
5235
+ background-position: calc(100% - 16px) 50%;
5236
+ padding: 16px 36px 16px 16px;
5237
+ }
5238
+ .right-to-left .ilo--header--utility-bar--local .ilo--language-switcher--link:focus, .right-to-left .ilo--header--utility-bar--local .ilo--language-switcher--link:hover {
5239
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
5240
+ background-color: rgb(235, 245, 253);
5241
+ color: rgb(30, 45, 190);
5242
+ }
5243
+ .ilo--header--utility-bar--local .ilo--language-switcher--link--wrap {
5244
+ align-items: center;
5245
+ display: flex;
5246
+ }
4704
5247
  @media screen and (min-width: 1024px) {
4705
5248
  .ilo--header--utility-bar--local .ilo--language-switcher {
4706
5249
  display: flex;
@@ -4743,9 +5286,12 @@ body {
4743
5286
  }
4744
5287
  .ilo--header--navigation {
4745
5288
  background: rgb(255, 255, 255);
5289
+ height: 100%;
5290
+ left: 0;
5291
+ overflow-x: hidden;
5292
+ overflow-y: scroll;
4746
5293
  position: absolute;
4747
5294
  top: 0;
4748
- left: 0;
4749
5295
  transform: translateX(100%);
4750
5296
  transition: transform 225ms ease-out;
4751
5297
  width: 100%;
@@ -4761,6 +5307,7 @@ body {
4761
5307
  @media screen and (min-width: 1024px) {
4762
5308
  .ilo--header--navigation {
4763
5309
  background: rgb(35, 0, 80);
5310
+ overflow: visible;
4764
5311
  position: static;
4765
5312
  transform: none;
4766
5313
  }
@@ -4869,7 +5416,7 @@ body {
4869
5416
  background-color: rgb(255, 255, 255);
4870
5417
  background-position: calc(100% - 16px) 55%;
4871
5418
  background-repeat: no-repeat;
4872
- background-size: 16px;
5419
+ background-size: 24px;
4873
5420
  border: none;
4874
5421
  color: rgb(35, 0, 80);
4875
5422
  cursor: pointer;
@@ -4945,6 +5492,14 @@ body {
4945
5492
  display: flex;
4946
5493
  justify-content: space-between;
4947
5494
  }
5495
+ .right-to-left .ilo--nav--local {
5496
+ direction: rtl;
5497
+ }
5498
+ @media screen and (min-width: 1024px) {
5499
+ .right-to-left .ilo--nav--local {
5500
+ padding: 0 max((100% - 1260px) / 2, 20px) 0 0;
5501
+ }
5502
+ }
4948
5503
  @media screen and (min-width: 1024px) {
4949
5504
  .ilo--nav--local {
4950
5505
  padding: 0 0 0 max((100% - 1260px) / 2, 20px);
@@ -5120,7 +5675,11 @@ body {
5120
5675
  transition: opacity 150ms ease-out;
5121
5676
  z-index: -1;
5122
5677
  }
5123
- .ilo--context--open .ilo--language-switcher .ilo--context-menu {
5678
+ .ilo--context--open .ilo--language-switcher .ilo--context-menu, .ilo--language-switcher:focus-within .ilo--language-switcher .ilo--context-menu, .ilo--language-switcher .ilo--context-menu:focus-within {
5679
+ opacity: 1;
5680
+ z-index: 1;
5681
+ }
5682
+ .ilo--language-switcher .ilo--language-switcher--button:focus + .ilo--context-menu {
5124
5683
  opacity: 1;
5125
5684
  z-index: 1;
5126
5685
  }
@@ -5144,7 +5703,6 @@ body {
5144
5703
  }
5145
5704
  @media screen and (min-width: 1024px) {
5146
5705
  .ilo--subnav {
5147
- filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));
5148
5706
  height: auto;
5149
5707
  left: 0;
5150
5708
  padding: 32px 0;
@@ -5154,6 +5712,11 @@ body {
5154
5712
  z-index: -1;
5155
5713
  }
5156
5714
  .ilo--header.ilo--subnav--open .ilo--subnav {
5715
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
5716
+ filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));
5717
+ transform: translateY(0);
5718
+ }
5719
+ .ilo--subnav:has(.ilo--subnav--link:focus) {
5157
5720
  transform: translateY(0);
5158
5721
  }
5159
5722
  }
@@ -5309,6 +5872,9 @@ body {
5309
5872
  .ilo--header.ilo--search--open .ilo--search-box {
5310
5873
  transform: translateY(0);
5311
5874
  }
5875
+ .ilo--search-box:has(.ilo--input:focus), .ilo--search-box:has(.ilo--searchfield--button:focus) {
5876
+ transform: translateY(0);
5877
+ }
5312
5878
  }
5313
5879
  .ilo--search-box .ilo--header--inner {
5314
5880
  align-items: center;
@@ -5337,7 +5903,7 @@ body {
5337
5903
  background-color: transparent;
5338
5904
  background-position: center;
5339
5905
  background-repeat: no-repeat;
5340
- background-size: 21.5px 21.5px;
5906
+ background-size: 32px 32px;
5341
5907
  border: none;
5342
5908
  border-radius: 0;
5343
5909
  cursor: pointer;
@@ -5355,16 +5921,31 @@ body {
5355
5921
  background-color: rgb(255, 255, 255);
5356
5922
  background-position: center;
5357
5923
  background-repeat: no-repeat;
5358
- background-size: 21.5px 21.5px;
5924
+ background-size: 32px 32px;
5359
5925
  }
5360
5926
  .ilo--search--open .ilo--search--button:hover, .ilo--search--open .ilo--search--button:focus {
5361
5927
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M16.9497 15.5356L13.4142 12L16.9497 8.46451L15.5355 7.05029L12 10.5858L8.46446 7.05029L7.05025 8.46451L10.5858 12L7.05025 15.5356L8.46446 16.9498L12 13.4143L15.5355 16.9498L16.9497 15.5356Z'/%3e%3c/svg%3e");
5362
5928
  background-color: rgb(235, 245, 253);
5363
5929
  }
5364
5930
 
5931
+ .ilo--menu--open {
5932
+ height: 100%;
5933
+ padding-top: 85px;
5934
+ overflow: hidden;
5935
+ width: 100%;
5936
+ }
5937
+
5938
+ #anchor--components-navigation--navigation .docs-story > div:first-child {
5939
+ padding-top: 0;
5940
+ }
5941
+
5942
+ .sb-show-main.sb-main-padded {
5943
+ padding-top: 0;
5944
+ }
5945
+
5365
5946
  /**
5366
5947
  * Do not edit directly
5367
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
5948
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5368
5949
  */
5369
5950
  /**
5370
5951
  * TOKENS:
@@ -5374,7 +5955,7 @@ body {
5374
5955
  */
5375
5956
  /**
5376
5957
  * Do not edit directly
5377
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
5958
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5378
5959
  */
5379
5960
  /**
5380
5961
  * TOKENS:
@@ -5384,7 +5965,7 @@ body {
5384
5965
  */
5385
5966
  /**
5386
5967
  * Do not edit directly
5387
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
5968
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5388
5969
  */
5389
5970
  /**
5390
5971
  * TOKENS:
@@ -5576,7 +6157,7 @@ body {
5576
6157
 
5577
6158
  /**
5578
6159
  * Do not edit directly
5579
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6160
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5580
6161
  */
5581
6162
  /**
5582
6163
  * TOKENS:
@@ -5708,10 +6289,15 @@ body {
5708
6289
  font-weight: 400;
5709
6290
  line-height: 45px;
5710
6291
  }
6292
+ .ilo--pagination--previous-set,
6293
+ .ilo--pagination .ilo--next-set {
6294
+ display: flex;
6295
+ justify-content: flex-start;
6296
+ }
5711
6297
 
5712
6298
  /**
5713
6299
  * Do not edit directly
5714
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6300
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5715
6301
  */
5716
6302
  /**
5717
6303
  * TOKENS:
@@ -5721,7 +6307,7 @@ body {
5721
6307
  */
5722
6308
  /**
5723
6309
  * Do not edit directly
5724
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6310
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5725
6311
  */
5726
6312
  /**
5727
6313
  * TOKENS:
@@ -5746,7 +6332,7 @@ body {
5746
6332
  }
5747
6333
  /**
5748
6334
  * Do not edit directly
5749
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6335
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5750
6336
  */
5751
6337
  /**
5752
6338
  * TOKENS:
@@ -5891,7 +6477,7 @@ body {
5891
6477
 
5892
6478
  /**
5893
6479
  * Do not edit directly
5894
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6480
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5895
6481
  */
5896
6482
  /**
5897
6483
  * TOKENS:
@@ -5998,7 +6584,7 @@ body {
5998
6584
 
5999
6585
  /**
6000
6586
  * Do not edit directly
6001
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6587
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6002
6588
  */
6003
6589
  /**
6004
6590
  * TOKENS:
@@ -6008,7 +6594,7 @@ body {
6008
6594
  */
6009
6595
  /**
6010
6596
  * Do not edit directly
6011
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6597
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6012
6598
  */
6013
6599
  /**
6014
6600
  * TOKENS:
@@ -6033,7 +6619,7 @@ body {
6033
6619
  }
6034
6620
  /**
6035
6621
  * Do not edit directly
6036
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6622
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6037
6623
  */
6038
6624
  /**
6039
6625
  * TOKENS:
@@ -6094,7 +6680,7 @@ body {
6094
6680
 
6095
6681
  /**
6096
6682
  * Do not edit directly
6097
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6683
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6098
6684
  */
6099
6685
  /**
6100
6686
  * TOKENS:
@@ -6509,7 +7095,7 @@ body {
6509
7095
 
6510
7096
  /**
6511
7097
  * Do not edit directly
6512
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7098
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6513
7099
  */
6514
7100
  /**
6515
7101
  * TOKENS:
@@ -6560,7 +7146,7 @@ body {
6560
7146
 
6561
7147
  /**
6562
7148
  * Do not edit directly
6563
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7149
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6564
7150
  */
6565
7151
  /**
6566
7152
  * TOKENS:
@@ -6717,7 +7303,7 @@ body {
6717
7303
 
6718
7304
  /**
6719
7305
  * Do not edit directly
6720
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7306
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6721
7307
  */
6722
7308
  /**
6723
7309
  * TOKENS:
@@ -7068,7 +7654,7 @@ body {
7068
7654
 
7069
7655
  /**
7070
7656
  * Do not edit directly
7071
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7657
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7072
7658
  */
7073
7659
  /**
7074
7660
  * TOKENS:
@@ -7254,7 +7840,7 @@ body {
7254
7840
 
7255
7841
  /**
7256
7842
  * Do not edit directly
7257
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7843
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7258
7844
  */
7259
7845
  /**
7260
7846
  * TOKENS:
@@ -7312,7 +7898,7 @@ body {
7312
7898
 
7313
7899
  /**
7314
7900
  * Do not edit directly
7315
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7901
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7316
7902
  */
7317
7903
  /**
7318
7904
  * TOKENS:
@@ -7486,7 +8072,7 @@ body {
7486
8072
 
7487
8073
  /**
7488
8074
  * Do not edit directly
7489
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
8075
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7490
8076
  */
7491
8077
  /**
7492
8078
  * TOKENS:
@@ -7507,12 +8093,17 @@ body {
7507
8093
  opacity: 0;
7508
8094
  padding: 0.4287245445rem 0.6430868167rem;
7509
8095
  position: absolute;
7510
- transition: opacity 150ms ease-out;
7511
8096
  visibility: hidden;
7512
8097
  width: auto;
8098
+ transition-property: opacity;
8099
+ transition-duration: 150ms;
8100
+ transition-timing-function: ease-out;
7513
8101
  }
7514
8102
  .ilo--tooltip--fade {
7515
8103
  opacity: 1;
8104
+ transition-property: opacity;
8105
+ transition-duration: 150ms;
8106
+ transition-timing-function: ease-out;
7516
8107
  }
7517
8108
  .ilo--tooltip--visible {
7518
8109
  visibility: visible;
@@ -7645,9 +8236,13 @@ body {
7645
8236
  border-right-color: rgb(45, 45, 45);
7646
8237
  }
7647
8238
 
8239
+ .docs-story div[height] {
8240
+ min-height: 150px;
8241
+ }
8242
+
7648
8243
  /**
7649
8244
  * Do not edit directly
7650
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
8245
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7651
8246
  */
7652
8247
  /**
7653
8248
  * TOKENS:
@@ -8517,7 +9112,8 @@ body {
8517
9112
  }
8518
9113
  .ilo--video:hover .ilo--video--controls,
8519
9114
  .ilo--video:hover .vjs-control-bar, .ilo--video:focus .ilo--video--controls,
8520
- .ilo--video:focus .vjs-control-bar {
9115
+ .ilo--video:focus .vjs-control-bar, .ilo--video:focus-within .ilo--video--controls,
9116
+ .ilo--video:focus-within .vjs-control-bar {
8521
9117
  opacity: 1;
8522
9118
  transition: opacity 150ms ease-out;
8523
9119
  }