@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.
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4
4
  */
5
5
  /**
6
6
  * TOKENS:
@@ -10,7 +10,7 @@
10
10
  */
11
11
  /**
12
12
  * Do not edit directly
13
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
13
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
14
14
  */
15
15
  /**
16
16
  * TOKENS:
@@ -123,7 +123,7 @@
123
123
 
124
124
  /**
125
125
  * Do not edit directly
126
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
126
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
127
127
  */
128
128
  /**
129
129
  * TOKENS:
@@ -148,7 +148,7 @@
148
148
  }
149
149
  /**
150
150
  * Do not edit directly
151
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
151
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
152
152
  */
153
153
  /**
154
154
  * TOKENS:
@@ -183,6 +183,11 @@
183
183
  text-decoration-thickness: 0.1071811361rem;
184
184
  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");
185
185
  }
186
+ .right-to-left .ilo--breadcrumb--link {
187
+ background-position: 0 52%;
188
+ padding: 0 0.5359056806rem 0 1.2861736334rem;
189
+ 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");
190
+ }
186
191
  .ilo--breadcrumb--link--label {
187
192
  font-family: Noto Sans;
188
193
  font-weight: 400;
@@ -196,6 +201,9 @@
196
201
  text-decoration-thickness: 0.1071811361rem;
197
202
  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");
198
203
  }
204
+ .right-to-left .ilo--breadcrumb--link:hover, .right-to-left .ilo--breadcrumb--link:focus {
205
+ 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");
206
+ }
199
207
  .ilo--breadcrumb--item {
200
208
  align-items: center;
201
209
  display: flex;
@@ -268,6 +276,11 @@
268
276
  width: 0.857449089rem;
269
277
  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");
270
278
  }
279
+ .right-to-left .ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context:after {
280
+ right: auto;
281
+ left: -7px;
282
+ 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");
283
+ }
271
284
  .ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu {
272
285
  border-radius: 0.1071811361rem;
273
286
  background-color: rgb(237, 240, 242);
@@ -356,6 +369,9 @@
356
369
  text-decoration: underline;
357
370
  text-decoration-thickness: 0.1071811361rem;
358
371
  }
372
+ .right-to-left .ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--link {
373
+ text-align: center;
374
+ }
359
375
  @media screen and (min-width: 610px) {
360
376
  .ilo--breadcrumb--items:after {
361
377
  background: linear-gradient(to bottom right, white 50%, transparent 50%);
@@ -367,10 +383,18 @@
367
383
  top: 0;
368
384
  width: 47px;
369
385
  }
386
+ .right-to-left .ilo--breadcrumb--items:after {
387
+ right: auto;
388
+ left: -47px;
389
+ transform: scaleX(-1);
390
+ }
370
391
  .ilo--breadcrumb--items.context--menu:after {
371
392
  content: none;
372
393
  }
373
394
  }
395
+ .right-to-left .ilo--breadcrumb {
396
+ direction: rtl;
397
+ }
374
398
  .ilo--breadcrumb.storybook {
375
399
  background-color: rgb(184, 196, 204);
376
400
  height: 100vh;
@@ -378,7 +402,7 @@
378
402
 
379
403
  /**
380
404
  * Do not edit directly
381
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
405
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
382
406
  */
383
407
  /**
384
408
  * TOKENS:
@@ -388,7 +412,7 @@
388
412
  */
389
413
  /**
390
414
  * Do not edit directly
391
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
415
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
392
416
  */
393
417
  /**
394
418
  * TOKENS:
@@ -413,7 +437,7 @@
413
437
  }
414
438
  /**
415
439
  * Do not edit directly
416
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
440
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
417
441
  */
418
442
  /**
419
443
  * TOKENS:
@@ -703,7 +727,7 @@
703
727
 
704
728
  /**
705
729
  * Do not edit directly
706
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
730
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
707
731
  */
708
732
  /**
709
733
  * TOKENS:
@@ -833,7 +857,7 @@
833
857
 
834
858
  /**
835
859
  * Do not edit directly
836
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
860
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
837
861
  */
838
862
  /**
839
863
  * TOKENS:
@@ -848,27 +872,31 @@
848
872
  .right-to-left .ilo--card {
849
873
  text-align: right;
850
874
  }
851
- .ilo--card--action:hover:not(.ilo--card--data), .ilo--card--action:focus:not(.ilo--card--data) {
875
+ .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) {
852
876
  background: rgb(255, 255, 255);
853
877
  color: rgb(30, 45, 190);
878
+ outline: none;
854
879
  text-decoration: none;
855
880
  }
856
- .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) {
881
+ .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) {
857
882
  background: rgb(255, 255, 255);
858
883
  }
859
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--eyebrow, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--eyebrow {
884
+ .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 {
885
+ 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");
886
+ }
887
+ .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 {
860
888
  color: rgb(30, 45, 190);
861
889
  }
862
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--title, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--title {
890
+ .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 {
863
891
  color: rgb(30, 45, 190);
864
892
  }
865
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--intro, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--intro {
893
+ .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 {
866
894
  color: rgb(30, 45, 190);
867
895
  }
868
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--date, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--date {
896
+ .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 {
869
897
  color: rgb(30, 45, 190);
870
898
  }
871
- .ilo--card--action:hover:not(.ilo--card--data) .ilo--card--eventdate, .ilo--card--action:focus:not(.ilo--card--data) .ilo--card--eventdate {
899
+ .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 {
872
900
  color: rgb(30, 45, 190);
873
901
  }
874
902
  .ilo--card--link {
@@ -885,7 +913,8 @@
885
913
  transition-duration: 150ms;
886
914
  transition-timing-function: ease-out;
887
915
  }
888
- .ilo--card--link:hover, .ilo--card--link:focus {
916
+ .ilo--card--link:hover, .ilo--card--link:focus, .ilo--card--link:focus-within {
917
+ outline: none;
889
918
  transition-property: color, background-color, border-color, opacity;
890
919
  transition-duration: 150ms;
891
920
  transition-timing-function: ease-out;
@@ -903,69 +932,171 @@
903
932
  .ilo--card--light {
904
933
  background: rgb(255, 255, 255);
905
934
  }
906
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) {
935
+ .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) {
907
936
  background: rgb(35, 0, 80);
937
+ outline: none;
908
938
  transition: background 150ms ease-out;
909
939
  }
910
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--eyebrow {
940
+ .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 {
911
941
  color: rgb(237, 240, 242);
912
942
  transition: color 150ms ease-out;
913
943
  }
914
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--title {
944
+ .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 {
915
945
  color: rgb(255, 255, 255);
916
946
  transition: color 150ms ease-out;
917
947
  }
918
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--intro {
948
+ .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 {
919
949
  color: rgb(237, 240, 242);
920
950
  transition: color 150ms ease-out;
921
951
  }
922
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--date {
952
+ .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 {
923
953
  color: rgb(237, 240, 242);
924
954
  transition: color 150ms ease-out;
925
955
  }
926
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus) .ilo--card--eventdate {
956
+ .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 {
927
957
  color: rgb(237, 240, 242);
928
958
  transition: color 150ms ease-out;
929
959
  }
930
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
960
+ .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 {
961
+ background: rgb(35, 0, 80);
962
+ outline: none;
963
+ transition: background 150ms ease-out;
964
+ }
965
+ .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 {
966
+ color: rgb(237, 240, 242);
967
+ transition: color 150ms ease-out;
968
+ }
969
+ .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 {
970
+ color: rgb(255, 255, 255);
971
+ transition: color 150ms ease-out;
972
+ }
973
+ .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 {
974
+ color: rgb(237, 240, 242);
975
+ transition: color 150ms ease-out;
976
+ }
977
+ .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 {
978
+ color: rgb(237, 240, 242);
979
+ transition: color 150ms ease-out;
980
+ }
981
+ .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 {
982
+ color: rgb(237, 240, 242);
983
+ transition: color 150ms ease-out;
984
+ }
985
+ .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) {
931
986
  margin-top: 2.1436227224rem;
932
987
  padding-top: 0;
933
988
  position: relative;
934
989
  }
990
+ .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 {
991
+ background: inherit;
992
+ content: "";
993
+ display: block;
994
+ height: 40px;
995
+ position: absolute;
996
+ width: calc(100% - 73px);
997
+ }
998
+ .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 {
999
+ 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");
1000
+ background-position: bottom right;
1001
+ background-size: cover;
1002
+ content: "";
1003
+ height: 40px;
1004
+ display: block;
1005
+ position: absolute;
1006
+ width: 73.4px;
1007
+ }
1008
+ .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 {
1009
+ 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");
1010
+ }
935
1011
  @media screen and (min-width: 610px) {
936
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
1012
+ .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) {
937
1013
  margin-top: 2.5723472669rem;
938
1014
  }
1015
+ .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 {
1016
+ background: inherit;
1017
+ content: "";
1018
+ display: block;
1019
+ height: 48px;
1020
+ position: absolute;
1021
+ width: calc(100% - 87px);
1022
+ }
1023
+ .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 {
1024
+ 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");
1025
+ background-position: bottom right;
1026
+ background-size: cover;
1027
+ content: "";
1028
+ height: 48px;
1029
+ display: block;
1030
+ position: absolute;
1031
+ width: 87.4px;
1032
+ }
1033
+ .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 {
1034
+ 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");
1035
+ }
939
1036
  }
940
1037
  @media screen and (min-width: 1024px) {
941
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
1038
+ .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) {
942
1039
  margin-top: 3.4297963558rem;
943
1040
  }
1041
+ .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 {
1042
+ background: inherit;
1043
+ content: "";
1044
+ display: block;
1045
+ height: 64px;
1046
+ position: absolute;
1047
+ width: calc(100% - 116px);
1048
+ }
1049
+ .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 {
1050
+ 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");
1051
+ background-position: bottom right;
1052
+ background-size: cover;
1053
+ content: "";
1054
+ height: 64px;
1055
+ display: block;
1056
+ position: absolute;
1057
+ width: 116.4px;
1058
+ }
1059
+ .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 {
1060
+ 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");
1061
+ }
944
1062
  }
945
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
946
- background: inherit;
947
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
948
- content: "";
949
- display: block;
950
- height: 1.6077170418rem;
1063
+ .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 {
951
1064
  left: 0;
952
- position: absolute;
953
- top: -1.5916398714rem;
954
- width: 100%;
1065
+ top: -2.1436227224rem;
1066
+ transition: background-image 150ms ease-out;
955
1067
  }
956
- .right-to-left .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
957
- clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
1068
+ .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 {
1069
+ left: auto;
1070
+ right: 0;
958
1071
  }
959
1072
  @media screen and (min-width: 610px) {
960
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
961
- height: 2.0364415863rem;
962
- top: -2.0203644159rem;
1073
+ .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 {
1074
+ top: -2.5562700965rem;
963
1075
  }
964
1076
  }
965
1077
  @media screen and (min-width: 1024px) {
966
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
967
- height: 3.1082529475rem;
968
- top: -3.0921757771rem;
1078
+ .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 {
1079
+ top: -3.4137191854rem;
1080
+ }
1081
+ }
1082
+ .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 {
1083
+ right: 0;
1084
+ top: -2.1436227224rem;
1085
+ transition: background-image 150ms ease-out;
1086
+ }
1087
+ .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 {
1088
+ left: 0;
1089
+ right: auto;
1090
+ transform: rotateY(180deg);
1091
+ }
1092
+ @media screen and (min-width: 610px) {
1093
+ .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 {
1094
+ top: -2.5562700965rem;
1095
+ }
1096
+ }
1097
+ @media screen and (min-width: 1024px) {
1098
+ .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 {
1099
+ top: -3.4137191854rem;
969
1100
  }
970
1101
  }
971
1102
  .ilo--card--eyebrow {
@@ -978,7 +1109,7 @@
978
1109
  transition-duration: 150ms;
979
1110
  transition-timing-function: ease-out;
980
1111
  }
981
- .ilo--card--link:hover .ilo--card--eyebrow, .ilo--card--link:focus .ilo--card--eyebrow {
1112
+ .ilo--card--link:hover .ilo--card--eyebrow, .ilo--card--link:focus .ilo--card--eyebrow, .ilo--card--link:focus-within .ilo--card--eyebrow {
982
1113
  color: rgb(30, 45, 190);
983
1114
  transition-property: color;
984
1115
  transition-duration: 150ms;
@@ -996,7 +1127,7 @@
996
1127
  transition-duration: 150ms;
997
1128
  transition-timing-function: ease-out;
998
1129
  }
999
- .ilo--card--link:hover .ilo--card--title, .ilo--card--link:focus .ilo--card--title {
1130
+ .ilo--card--link:hover .ilo--card--title, .ilo--card--link:focus .ilo--card--title, .ilo--card--link:focus-within .ilo--card--title {
1000
1131
  color: rgb(30, 45, 190);
1001
1132
  transition-property: color;
1002
1133
  transition-duration: 150ms;
@@ -1012,7 +1143,7 @@
1012
1143
  transition-duration: 150ms;
1013
1144
  transition-timing-function: ease-out;
1014
1145
  }
1015
- .ilo--card--link:hover .ilo--card--intro, .ilo--card--link:focus .ilo--card--intro {
1146
+ .ilo--card--link:hover .ilo--card--intro, .ilo--card--link:focus .ilo--card--intro, .ilo--card--link:focus-within .ilo--card--intro {
1016
1147
  color: rgb(30, 45, 190);
1017
1148
  transition-property: color;
1018
1149
  transition-duration: 150ms;
@@ -1028,7 +1159,7 @@
1028
1159
  transition-duration: 150ms;
1029
1160
  transition-timing-function: ease-out;
1030
1161
  }
1031
- .ilo--card--link:hover .ilo--card--date, .ilo--card--link:focus .ilo--card--date {
1162
+ .ilo--card--link:hover .ilo--card--date, .ilo--card--link:focus .ilo--card--date, .ilo--card--link:focus-within .ilo--card--date {
1032
1163
  color: rgb(30, 45, 190);
1033
1164
  transition-property: color;
1034
1165
  transition-duration: 150ms;
@@ -1217,14 +1348,14 @@
1217
1348
  padding: 1.7148981779rem 0;
1218
1349
  }
1219
1350
  }
1220
- .ilo--card--detail:hover, .ilo--card--detail:focus {
1351
+ .ilo--card--detail:hover, .ilo--card--detail:focus, .ilo--card--detail:focus-within {
1221
1352
  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));
1222
1353
  }
1223
- .ilo--card--detail:hover picture::before, .ilo--card--detail:focus picture::before {
1354
+ .ilo--card--detail:hover picture::before, .ilo--card--detail:focus picture::before, .ilo--card--detail:focus-within picture::before {
1224
1355
  opacity: 0.4;
1225
1356
  z-index: 2;
1226
1357
  }
1227
- .ilo--card--detail:hover .ilo--card--event-date::before, .ilo--card--detail:focus .ilo--card--event-date::before {
1358
+ .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 {
1228
1359
  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");
1229
1360
  }
1230
1361
  .ilo--card--detail picture {
@@ -1318,28 +1449,143 @@
1318
1449
  }
1319
1450
  .ilo--card--graphic::before {
1320
1451
  background: inherit;
1321
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1322
1452
  content: "";
1323
1453
  display: block;
1324
1454
  height: 40px;
1325
- left: 0;
1326
1455
  position: absolute;
1456
+ width: calc(100% - 73px);
1457
+ }
1458
+ .ilo--card--graphic::after {
1459
+ 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");
1460
+ background-position: bottom right;
1461
+ background-size: cover;
1462
+ content: "";
1463
+ height: 40px;
1464
+ display: block;
1465
+ position: absolute;
1466
+ width: 73.4px;
1467
+ }
1468
+ .ilo--card--graphic.ilo--card--dark::after {
1469
+ 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");
1470
+ }
1471
+ .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 {
1472
+ 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");
1473
+ }
1474
+ .ilo--card--graphic::before {
1475
+ left: 0;
1327
1476
  top: -39.7px;
1328
- width: 100%;
1477
+ }
1478
+ .right-to-left .ilo--card--graphic::before {
1479
+ left: auto;
1480
+ right: 0;
1481
+ }
1482
+ .ilo--card--graphic::after {
1483
+ right: 0;
1484
+ top: -39.7px;
1485
+ transition: background-image 150ms ease-out;
1486
+ }
1487
+ .right-to-left .ilo--card--graphic::after {
1488
+ left: 0;
1489
+ right: auto;
1490
+ transform: rotateY(180deg);
1329
1491
  }
1330
1492
  .ilo--card--graphic .ilo--profile--contents * {
1331
1493
  color: rgb(255, 255, 255);
1332
1494
  }
1333
- .ilo--card--graphic:hover, .ilo--card--graphic:focus {
1495
+ .ilo--card--graphic:hover, .ilo--card--graphic:focus, .ilo--card--graphic:focus-within {
1334
1496
  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));
1335
1497
  }
1336
- .ilo--card--graphic:hover .ilo--profile--contents *, .ilo--card--graphic:focus .ilo--profile--contents * {
1498
+ .ilo--card--graphic:hover .ilo--profile--contents *, .ilo--card--graphic:focus .ilo--profile--contents *, .ilo--card--graphic:focus-within .ilo--profile--contents * {
1337
1499
  color: rgb(30, 45, 190);
1338
1500
  }
1339
1501
  @media screen and (min-width: 610px) {
1340
1502
  .ilo--card--graphic {
1341
1503
  padding: 0 1.7148981779rem 2.1436227224rem;
1342
1504
  }
1505
+ .ilo--card--graphic::before {
1506
+ background: inherit;
1507
+ content: "";
1508
+ display: block;
1509
+ height: 40px;
1510
+ position: absolute;
1511
+ width: calc(100% - 73px);
1512
+ }
1513
+ .ilo--card--graphic::after {
1514
+ 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");
1515
+ background-position: bottom right;
1516
+ background-size: cover;
1517
+ content: "";
1518
+ height: 40px;
1519
+ display: block;
1520
+ position: absolute;
1521
+ width: 73.4px;
1522
+ }
1523
+ .ilo--card--graphic.ilo--card--dark::after {
1524
+ 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");
1525
+ }
1526
+ .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 {
1527
+ 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");
1528
+ }
1529
+ .ilo--card--graphic::before {
1530
+ left: 0;
1531
+ top: -39.7px;
1532
+ }
1533
+ .right-to-left .ilo--card--graphic::before {
1534
+ left: auto;
1535
+ right: 0;
1536
+ }
1537
+ .ilo--card--graphic::after {
1538
+ right: 0;
1539
+ top: -39.7px;
1540
+ }
1541
+ .right-to-left .ilo--card--graphic::after {
1542
+ left: 0;
1543
+ right: auto;
1544
+ transform: rotateY(180deg);
1545
+ }
1546
+ }
1547
+ @media screen and (min-width: 1024px) {
1548
+ .ilo--card--graphic::before {
1549
+ background: inherit;
1550
+ content: "";
1551
+ display: block;
1552
+ height: 40px;
1553
+ position: absolute;
1554
+ width: calc(100% - 73px);
1555
+ }
1556
+ .ilo--card--graphic::after {
1557
+ 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");
1558
+ background-position: bottom right;
1559
+ background-size: cover;
1560
+ content: "";
1561
+ height: 40px;
1562
+ display: block;
1563
+ position: absolute;
1564
+ width: 73.4px;
1565
+ }
1566
+ .ilo--card--graphic.ilo--card--dark::after {
1567
+ 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");
1568
+ }
1569
+ .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 {
1570
+ 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");
1571
+ }
1572
+ .ilo--card--graphic::before {
1573
+ left: 0;
1574
+ top: -39.7px;
1575
+ }
1576
+ .right-to-left .ilo--card--graphic::before {
1577
+ left: auto;
1578
+ right: 0;
1579
+ }
1580
+ .ilo--card--graphic::after {
1581
+ right: 0;
1582
+ top: -39.7px;
1583
+ }
1584
+ .right-to-left .ilo--card--graphic::after {
1585
+ left: 0;
1586
+ right: auto;
1587
+ transform: rotateY(180deg);
1588
+ }
1343
1589
  }
1344
1590
  .ilo--card--graphic.ilo--card--wide {
1345
1591
  padding: 0 1.7148981779rem 2.1436227224rem;
@@ -1395,35 +1641,35 @@
1395
1641
  display: block;
1396
1642
  margin-bottom: 1.4398166117rem;
1397
1643
  }
1644
+ .ilo--card--graphic .ilo--card--content {
1645
+ display: flex;
1646
+ flex-direction: column;
1647
+ position: relative;
1648
+ }
1649
+ .ilo--card--graphic .ilo--card--content > * {
1650
+ justify-self: flex-start;
1651
+ }
1652
+ .ilo--card--graphic .ilo--card--content > *:last-child {
1653
+ justify-self: flex-end;
1654
+ margin-bottom: 0;
1655
+ }
1398
1656
  .ilo--card--graphicpromo {
1399
1657
  max-width: 49.3033226152rem;
1400
1658
  padding: 2.1436227224rem 1.2861736334rem;
1401
1659
  width: 100%;
1402
1660
  }
1403
- .ilo--card--graphicpromo.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1404
- height: 2.1436227224rem;
1405
- top: -2.127545552rem;
1406
- }
1407
- .ilo--card--graphicpromo:hover, .ilo--card--graphicpromo:focus {
1661
+ .ilo--card--graphicpromo:hover, .ilo--card--graphicpromo:focus, .ilo--card--graphicpromo:focus-within {
1408
1662
  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));
1409
1663
  }
1410
1664
  @media screen and (min-width: 610px) {
1411
1665
  .ilo--card--graphicpromo {
1412
1666
  padding: 2.5723472669rem;
1413
1667
  }
1414
- .ilo--card--graphicpromo.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1415
- height: 3.4297963558rem;
1416
- top: -3.4137191854rem;
1417
- }
1418
1668
  }
1419
1669
  @media screen and (min-width: 1024px) {
1420
1670
  .ilo--card--graphicpromo {
1421
1671
  padding: 3.4297963558rem 3.8585209003rem;
1422
1672
  }
1423
- .ilo--card--graphicpromo.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1424
- height: 3.4297963558rem;
1425
- top: -3.4137191854rem;
1426
- }
1427
1673
  }
1428
1674
  .ilo--card--graphicpromo.ilo--card--wide {
1429
1675
  padding: 3.4297963558rem 3.8585209003rem;
@@ -1525,9 +1771,14 @@
1525
1771
  pointer-events: none;
1526
1772
  }
1527
1773
  .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1528
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1529
- height: 2.1436227224rem;
1774
+ height: 40px;
1775
+ top: -2.127545552rem;
1776
+ width: calc(100% - 73px);
1777
+ }
1778
+ .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1779
+ height: 40px;
1530
1780
  top: -2.127545552rem;
1781
+ width: 73.3px;
1531
1782
  }
1532
1783
  .ilo--card--factlist.ilo--card--dark {
1533
1784
  background: rgb(35, 0, 80);
@@ -1537,9 +1788,14 @@
1537
1788
  padding: 0 2.1436227224rem 3.0010718114rem 2.1436227224rem;
1538
1789
  }
1539
1790
  .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1540
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1541
- height: 2.1972132905rem;
1542
- top: -2.18113612rem;
1791
+ height: 48px;
1792
+ top: -2.5562700965rem;
1793
+ width: calc(100% - 87px);
1794
+ }
1795
+ .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1796
+ height: 48px;
1797
+ top: -2.5562700965rem;
1798
+ width: 87.3px;
1543
1799
  }
1544
1800
  }
1545
1801
  .ilo--card--factlist.ilo--card--wide {
@@ -1581,13 +1837,13 @@
1581
1837
  .ilo--card--factlist.ilo--card--dark .ilo--list__item:last-of-type {
1582
1838
  margin-bottom: 0;
1583
1839
  }
1584
- .ilo--card--factlist.ilo--card--dark:hover .ilo--card--title, .ilo--card--factlist.ilo--card--dark:focus .ilo--card--title {
1840
+ .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 {
1585
1841
  color: rgb(255, 255, 255);
1586
1842
  transition-property: color;
1587
1843
  transition-duration: 150ms;
1588
1844
  transition-timing-function: ease-out;
1589
1845
  }
1590
- .ilo--card--factlist.ilo--card--dark:hover .ilo--list__item, .ilo--card--factlist.ilo--card--dark:focus .ilo--list__item {
1846
+ .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 {
1591
1847
  color: rgb(255, 255, 255);
1592
1848
  }
1593
1849
  .ilo--card--factlist .ilo--card--title {
@@ -1607,26 +1863,112 @@
1607
1863
  }
1608
1864
  .ilo--card--stat {
1609
1865
  border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
1866
+ margin-top: 2.1436227224rem;
1610
1867
  padding: 0 1.2861736334rem 2.1436227224rem 1.1789924973rem;
1868
+ position: relative;
1611
1869
  width: 100%;
1612
1870
  }
1613
1871
  .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1614
- clip-path: polygon(75% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1615
- height: 2.1436227224rem;
1872
+ left: 0;
1873
+ top: -2.127545552rem;
1874
+ }
1875
+ .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1876
+ left: auto;
1877
+ right: 0;
1878
+ }
1879
+ .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1880
+ right: 0;
1616
1881
  top: -2.127545552rem;
1617
1882
  }
1883
+ .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1884
+ left: 0;
1885
+ right: auto;
1886
+ transform: rotateY(180deg);
1887
+ }
1618
1888
  .ilo--card--stat.ilo--card--blue {
1619
1889
  background: rgb(235, 245, 253);
1620
1890
  }
1891
+ .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1892
+ background: inherit;
1893
+ content: "";
1894
+ display: block;
1895
+ height: 40px;
1896
+ position: absolute;
1897
+ width: calc(100% - 73px);
1898
+ }
1899
+ .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1900
+ 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");
1901
+ background-position: bottom right;
1902
+ background-size: cover;
1903
+ content: "";
1904
+ height: 40px;
1905
+ display: block;
1906
+ position: absolute;
1907
+ width: 73.4px;
1908
+ }
1621
1909
  .ilo--card--stat.ilo--card--yellow {
1622
1910
  background: rgb(255, 205, 45);
1623
1911
  }
1912
+ .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1913
+ background: inherit;
1914
+ content: "";
1915
+ display: block;
1916
+ height: 40px;
1917
+ position: absolute;
1918
+ width: calc(100% - 73px);
1919
+ }
1920
+ .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1921
+ 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");
1922
+ background-position: bottom right;
1923
+ background-size: cover;
1924
+ content: "";
1925
+ height: 40px;
1926
+ display: block;
1927
+ position: absolute;
1928
+ width: 73.4px;
1929
+ }
1624
1930
  .ilo--card--stat.ilo--card--green {
1625
1931
  background: rgb(140, 225, 100);
1626
1932
  }
1933
+ .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1934
+ background: inherit;
1935
+ content: "";
1936
+ display: block;
1937
+ height: 40px;
1938
+ position: absolute;
1939
+ width: calc(100% - 73px);
1940
+ }
1941
+ .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1942
+ 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");
1943
+ background-position: bottom right;
1944
+ background-size: cover;
1945
+ content: "";
1946
+ height: 40px;
1947
+ display: block;
1948
+ position: absolute;
1949
+ width: 73.4px;
1950
+ }
1627
1951
  .ilo--card--stat.ilo--card--turquoise {
1628
1952
  background: rgb(5, 210, 210);
1629
1953
  }
1954
+ .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1955
+ background: inherit;
1956
+ content: "";
1957
+ display: block;
1958
+ height: 40px;
1959
+ position: absolute;
1960
+ width: calc(100% - 73px);
1961
+ }
1962
+ .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1963
+ 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");
1964
+ background-position: bottom right;
1965
+ background-size: cover;
1966
+ content: "";
1967
+ height: 40px;
1968
+ display: block;
1969
+ position: absolute;
1970
+ width: 73.4px;
1971
+ }
1630
1972
  .ilo--card--stat .ilo--card--content {
1631
1973
  display: flex;
1632
1974
  flex-wrap: wrap;
@@ -1645,9 +1987,10 @@
1645
1987
  }
1646
1988
  .ilo--card--stat .ilo--card--intro {
1647
1989
  color: rgb(35, 0, 80);
1648
- font-size: 14.93px;
1649
- letter-spacing: -0.02em;
1650
- line-height: 20.16px;
1990
+ font-family: Overpass;
1991
+ font-size: 18.66px;
1992
+ letter-spacing: normal;
1993
+ line-height: 27.24px;
1651
1994
  margin-bottom: 1.6734954235rem;
1652
1995
  width: 100%;
1653
1996
  }
@@ -1657,30 +2000,75 @@
1657
2000
  line-height: 16.24px;
1658
2001
  align-self: flex-end;
1659
2002
  }
1660
- @media screen and (min-width: 1024px) {
1661
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1662
- height: 2.5723472669rem;
1663
- top: -2.5562700965rem;
1664
- }
1665
- }
1666
2003
  .ilo--card--data {
1667
2004
  background: rgb(235, 245, 253);
1668
2005
  border-bottom: 0.1607717042rem solid #82afdc;
2006
+ margin-top: 2.1436227224rem;
1669
2007
  max-width: 32.154340836rem;
1670
2008
  padding: 0 1.2861736334rem 3.0010718114rem;
2009
+ position: relative;
1671
2010
  }
1672
- .ilo--card--data:hover, .ilo--card--data:focus {
2011
+ .ilo--card--data::before {
2012
+ background: inherit;
2013
+ content: "";
2014
+ display: block;
2015
+ height: 40px;
2016
+ position: absolute;
2017
+ width: calc(100% - 73px);
2018
+ }
2019
+ .ilo--card--data::after {
2020
+ 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");
2021
+ background-position: bottom right;
2022
+ background-size: cover;
2023
+ content: "";
2024
+ height: 40px;
2025
+ display: block;
2026
+ position: absolute;
2027
+ width: 73.4px;
2028
+ }
2029
+ .ilo--card--data:hover, .ilo--card--data:focus, .ilo--card--data:focus-within {
1673
2030
  background: rgb(235, 245, 253);
1674
2031
  }
1675
2032
  .ilo--card--data::before {
1676
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1677
- height: 2.1436227224rem;
2033
+ left: 0;
1678
2034
  top: -2.127545552rem;
1679
2035
  }
1680
- @media screen and (min-width: 1024px) {
2036
+ .right-to-left .ilo--card--data::before {
2037
+ left: auto;
2038
+ right: 0;
2039
+ }
2040
+ .ilo--card--data::after {
2041
+ right: 0;
2042
+ top: -2.127545552rem;
2043
+ }
2044
+ .right-to-left .ilo--card--data::after {
2045
+ left: 0;
2046
+ right: auto;
2047
+ transform: rotateY(180deg);
2048
+ }
2049
+ @media screen and (min-width: 610px) {
1681
2050
  .ilo--card--data::before {
1682
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
1683
- height: 2.5723472669rem;
2051
+ background: inherit;
2052
+ content: "";
2053
+ display: block;
2054
+ height: 48px;
2055
+ position: absolute;
2056
+ width: calc(100% - 84px);
2057
+ }
2058
+ .ilo--card--data::after {
2059
+ 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");
2060
+ background-position: bottom right;
2061
+ background-size: cover;
2062
+ content: "";
2063
+ height: 48px;
2064
+ display: block;
2065
+ position: absolute;
2066
+ width: 84.4px;
2067
+ }
2068
+ .ilo--card--data::before {
2069
+ top: -2.5562700965rem;
2070
+ }
2071
+ .ilo--card--data::after {
1684
2072
  top: -2.5562700965rem;
1685
2073
  }
1686
2074
  }
@@ -1740,7 +2128,7 @@
1740
2128
  color: rgb(255, 255, 255);
1741
2129
  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");
1742
2130
  }
1743
- .ilo--card--feature.ilo--card--dark:hover .ilo--link-list--link, .ilo--card--feature.ilo--card--dark:focus .ilo--link-list--link {
2131
+ .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 {
1744
2132
  color: rgb(30, 45, 190);
1745
2133
  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");
1746
2134
  }
@@ -1749,19 +2137,19 @@
1749
2137
  transition-duration: 150ms;
1750
2138
  transition-timing-function: ease-out;
1751
2139
  }
1752
- .ilo--card--feature:hover, .ilo--card--feature:focus {
2140
+ .ilo--card--feature:hover, .ilo--card--feature:focus, .ilo--card--feature:focus-within {
1753
2141
  background-color: rgb(255, 255, 255);
1754
2142
  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));
1755
2143
  border-bottom: 0.1607717042rem solid rgb(30, 45, 190);
1756
2144
  }
1757
- .ilo--card--feature:hover picture::before, .ilo--card--feature:focus picture::before {
2145
+ .ilo--card--feature:hover picture::before, .ilo--card--feature:focus picture::before, .ilo--card--feature:focus-within picture::before {
1758
2146
  opacity: 0.4;
1759
2147
  z-index: 1;
1760
2148
  transition-property: opacity;
1761
2149
  transition-duration: 150ms;
1762
2150
  transition-timing-function: ease-out;
1763
2151
  }
1764
- .ilo--card--feature:hover .ilo--card--image, .ilo--card--feature:focus .ilo--card--image {
2152
+ .ilo--card--feature:hover .ilo--card--image, .ilo--card--feature:focus .ilo--card--image, .ilo--card--feature:focus-within .ilo--card--image {
1765
2153
  filter: saturate(0);
1766
2154
  }
1767
2155
  .ilo--card--feature .ilo--link-list {
@@ -1797,7 +2185,9 @@
1797
2185
  }
1798
2186
  .ilo--card--feature.ilo--card--wide .ilo--card--content {
1799
2187
  display: flex;
2188
+ flex-direction: row;
1800
2189
  flex-wrap: wrap;
2190
+ position: relative;
1801
2191
  width: 50%;
1802
2192
  }
1803
2193
  .ilo--card--feature.ilo--card--wide .ilo--card--image--wrapper {
@@ -1808,6 +2198,7 @@
1808
2198
  }
1809
2199
  .ilo--card--feature.ilo--card--wide .ilo--card--date {
1810
2200
  align-self: flex-end;
2201
+ width: 100%;
1811
2202
  }
1812
2203
  .ilo--card--feature.ilo--card--wide .ilo--card--eyebrow {
1813
2204
  width: 100%;
@@ -1815,6 +2206,9 @@
1815
2206
  .ilo--card--feature.ilo--card--wide .ilo--card--title {
1816
2207
  width: 100%;
1817
2208
  }
2209
+ .ilo--card--feature.ilo--card--wide .ilo--link-list {
2210
+ width: calc(100% + 48px);
2211
+ }
1818
2212
  }
1819
2213
  .ilo--card--feature .ilo--card--wrap {
1820
2214
  display: flex;
@@ -1869,7 +2263,7 @@
1869
2263
 
1870
2264
  /**
1871
2265
  * Do not edit directly
1872
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2266
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
1873
2267
  */
1874
2268
  /**
1875
2269
  * TOKENS:
@@ -1892,17 +2286,17 @@
1892
2286
  }
1893
2287
  @media screen and (min-width: 1024px) {
1894
2288
  .ilo--cardgroup--two .ilo--card {
1895
- width: calc(50% - 32px);
2289
+ width: calc(50% - 24px);
1896
2290
  }
1897
2291
  }
1898
2292
  @media screen and (min-width: 1024px) {
1899
2293
  .ilo--cardgroup--three .ilo--card {
1900
- width: calc(33.333% - 32px);
2294
+ width: calc(33.333% - 24px);
1901
2295
  }
1902
2296
  }
1903
2297
  @media screen and (min-width: 1024px) {
1904
2298
  .ilo--cardgroup--four .ilo--card {
1905
- width: calc(25% - 32px);
2299
+ width: calc(25% - 24px);
1906
2300
  }
1907
2301
  }
1908
2302
  .ilo--cardgroup--button-wrap {
@@ -1914,7 +2308,7 @@
1914
2308
 
1915
2309
  /**
1916
2310
  * Do not edit directly
1917
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2311
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
1918
2312
  */
1919
2313
  /**
1920
2314
  * TOKENS:
@@ -2019,7 +2413,7 @@
2019
2413
 
2020
2414
  /**
2021
2415
  * Do not edit directly
2022
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2416
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2023
2417
  */
2024
2418
  /**
2025
2419
  * TOKENS:
@@ -2051,10 +2445,12 @@
2051
2445
  padding: 0 0.4287245445rem;
2052
2446
  }
2053
2447
  .ilo--context-menu--item:first-of-type {
2054
- border-radius: 2px 2px 0 0;
2448
+ border-top-left-radius: 2px;
2449
+ border-top-right-radius: 2px;
2055
2450
  }
2056
2451
  .ilo--context-menu--item:last-of-type {
2057
- border-radius: 0 0 2px 2px;
2452
+ border-bottom-left-radius: 2px;
2453
+ border-bottom-right-radius: 2px;
2058
2454
  }
2059
2455
  .ilo--context-menu--item:last-of-type a {
2060
2456
  border-bottom: none;
@@ -2098,7 +2494,7 @@
2098
2494
 
2099
2495
  /**
2100
2496
  * Do not edit directly
2101
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2497
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2102
2498
  */
2103
2499
  /**
2104
2500
  * TOKENS:
@@ -2108,7 +2504,7 @@
2108
2504
  */
2109
2505
  /**
2110
2506
  * Do not edit directly
2111
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2507
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2112
2508
  */
2113
2509
  /**
2114
2510
  * TOKENS:
@@ -2118,7 +2514,7 @@
2118
2514
  */
2119
2515
  /**
2120
2516
  * Do not edit directly
2121
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2517
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2122
2518
  */
2123
2519
  /**
2124
2520
  * TOKENS:
@@ -2128,7 +2524,7 @@
2128
2524
  */
2129
2525
  /**
2130
2526
  * Do not edit directly
2131
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2527
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2132
2528
  */
2133
2529
  /**
2134
2530
  * TOKENS:
@@ -2254,7 +2650,7 @@
2254
2650
 
2255
2651
  /**
2256
2652
  * Do not edit directly
2257
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2653
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2258
2654
  */
2259
2655
  /**
2260
2656
  * TOKENS:
@@ -2282,7 +2678,7 @@
2282
2678
 
2283
2679
  /**
2284
2680
  * Do not edit directly
2285
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2681
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2286
2682
  */
2287
2683
  /**
2288
2684
  * TOKENS:
@@ -2333,6 +2729,7 @@
2333
2729
  border-left: 0.1607717042rem solid rgb(30, 45, 190);
2334
2730
  border-right: 0.1071811361rem solid rgb(184, 196, 204);
2335
2731
  border-top: 0.1071811361rem solid rgb(184, 196, 204);
2732
+ border-left-width: 2px;
2336
2733
  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%);
2337
2734
  cursor: pointer;
2338
2735
  }
@@ -2342,6 +2739,7 @@
2342
2739
  border-left: 0.1607717042rem solid rgb(30, 45, 190);
2343
2740
  border-right: 0.1071811361rem solid rgb(184, 196, 204);
2344
2741
  border-top: 0.1071811361rem solid rgb(184, 196, 204);
2742
+ border-left-width: 2px;
2345
2743
  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%);
2346
2744
  }
2347
2745
  .ilo--dropdown:active {
@@ -2368,7 +2766,7 @@
2368
2766
 
2369
2767
  /**
2370
2768
  * Do not edit directly
2371
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2769
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2372
2770
  */
2373
2771
  /**
2374
2772
  * TOKENS:
@@ -2378,7 +2776,7 @@
2378
2776
  */
2379
2777
  /**
2380
2778
  * Do not edit directly
2381
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2779
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2382
2780
  */
2383
2781
  /**
2384
2782
  * TOKENS:
@@ -2388,7 +2786,7 @@
2388
2786
  */
2389
2787
  /**
2390
2788
  * Do not edit directly
2391
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2789
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2392
2790
  */
2393
2791
  /**
2394
2792
  * TOKENS:
@@ -2441,7 +2839,7 @@
2441
2839
 
2442
2840
  /**
2443
2841
  * Do not edit directly
2444
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2842
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2445
2843
  */
2446
2844
  /**
2447
2845
  * TOKENS:
@@ -2516,7 +2914,7 @@
2516
2914
 
2517
2915
  /**
2518
2916
  * Do not edit directly
2519
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
2917
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2520
2918
  */
2521
2919
  /**
2522
2920
  * TOKENS:
@@ -2622,7 +3020,7 @@
2622
3020
 
2623
3021
  /**
2624
3022
  * Do not edit directly
2625
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3023
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2626
3024
  */
2627
3025
  /**
2628
3026
  * TOKENS:
@@ -2645,7 +3043,7 @@
2645
3043
 
2646
3044
  /**
2647
3045
  * Do not edit directly
2648
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3046
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2649
3047
  */
2650
3048
  /**
2651
3049
  * TOKENS:
@@ -2659,7 +3057,7 @@
2659
3057
 
2660
3058
  /**
2661
3059
  * Do not edit directly
2662
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3060
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2663
3061
  */
2664
3062
  /**
2665
3063
  * TOKENS:
@@ -2669,7 +3067,7 @@
2669
3067
  */
2670
3068
  /**
2671
3069
  * Do not edit directly
2672
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3070
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2673
3071
  */
2674
3072
  /**
2675
3073
  * TOKENS:
@@ -2694,7 +3092,7 @@
2694
3092
  }
2695
3093
  /**
2696
3094
  * Do not edit directly
2697
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3095
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
2698
3096
  */
2699
3097
  /**
2700
3098
  * TOKENS:
@@ -3094,7 +3492,7 @@
3094
3492
 
3095
3493
  /**
3096
3494
  * Do not edit directly
3097
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3495
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3098
3496
  */
3099
3497
  /**
3100
3498
  * TOKENS:
@@ -3217,7 +3615,7 @@
3217
3615
 
3218
3616
  /**
3219
3617
  * Do not edit directly
3220
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
3618
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3221
3619
  */
3222
3620
  /**
3223
3621
  * TOKENS:
@@ -3355,16 +3753,20 @@
3355
3753
  }
3356
3754
  }
3357
3755
  .ilo--hero .ilo--breadcrumb {
3358
- left: 0;
3359
- max-width: 560px;
3360
- position: absolute;
3361
- top: 0;
3362
3756
  width: 100%;
3363
3757
  }
3364
3758
  .right-to-left .ilo--hero .ilo--breadcrumb {
3365
3759
  left: auto;
3366
3760
  right: 0;
3367
3761
  }
3762
+ @media screen and (min-width: 610px) {
3763
+ .ilo--hero .ilo--breadcrumb {
3764
+ left: 0;
3765
+ max-width: 560px;
3766
+ position: absolute;
3767
+ top: 0;
3768
+ }
3769
+ }
3368
3770
 
3369
3771
  .ilo--hero-card {
3370
3772
  background: rgb(255, 255, 255);
@@ -3375,30 +3777,70 @@
3375
3777
  }
3376
3778
  .ilo--hero-card::before {
3377
3779
  background: inherit;
3378
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
3379
3780
  content: "";
3380
3781
  display: block;
3381
3782
  height: 40px;
3382
- left: 0;
3383
3783
  position: absolute;
3784
+ width: calc(100% - 73px);
3785
+ }
3786
+ .ilo--hero-card::after {
3787
+ 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");
3788
+ background-position: bottom right;
3789
+ background-size: cover;
3790
+ content: "";
3791
+ height: 40px;
3792
+ display: block;
3793
+ position: absolute;
3794
+ width: 73.4px;
3795
+ }
3796
+ .ilo--hero-card::before {
3797
+ left: 0;
3384
3798
  top: -39.7px;
3385
- width: 100%;
3386
3799
  }
3387
3800
  .right-to-left .ilo--hero-card::before {
3388
- clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
3389
3801
  left: auto;
3390
3802
  right: 0;
3391
3803
  }
3392
3804
  @media screen and (min-width: 1024px) {
3393
3805
  .ilo--hero-card::before {
3394
- height: 56px;
3395
- top: -55.7px;
3806
+ top: -63.7px;
3807
+ }
3808
+ }
3809
+ .ilo--hero-card::after {
3810
+ right: 0;
3811
+ top: -39.7px;
3812
+ }
3813
+ .right-to-left .ilo--hero-card::after {
3814
+ left: 0;
3815
+ right: auto;
3816
+ }
3817
+ @media screen and (min-width: 1024px) {
3818
+ .ilo--hero-card::after {
3819
+ top: -63.7px;
3396
3820
  }
3397
3821
  }
3398
3822
  @media screen and (min-width: 1024px) {
3399
3823
  .ilo--hero-card {
3400
3824
  padding: 0 70px 70px 56px;
3401
3825
  }
3826
+ .ilo--hero-card::before {
3827
+ background: inherit;
3828
+ content: "";
3829
+ display: block;
3830
+ height: 64px;
3831
+ position: absolute;
3832
+ width: calc(100% - 116px);
3833
+ }
3834
+ .ilo--hero-card::after {
3835
+ 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");
3836
+ background-position: bottom right;
3837
+ background-size: cover;
3838
+ content: "";
3839
+ height: 64px;
3840
+ display: block;
3841
+ position: absolute;
3842
+ width: 116.4px;
3843
+ }
3402
3844
  .ilo--hero-card.ilo--hero-card--graphic {
3403
3845
  padding: 0 70px 44px 56px;
3404
3846
  }
@@ -3414,6 +3856,9 @@
3414
3856
  border-bottom: 3px solid rgb(250, 60, 75);
3415
3857
  color: rgb(255, 255, 255);
3416
3858
  }
3859
+ .ilo--hero-card--dark::after {
3860
+ 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");
3861
+ }
3417
3862
  .ilo--hero-card--dark .ilo--hero-card--link.icon {
3418
3863
  color: rgb(255, 255, 255);
3419
3864
  }
@@ -3454,6 +3899,15 @@
3454
3899
  .ilo--hero-card--home::before {
3455
3900
  display: none;
3456
3901
  }
3902
+ .ilo--hero-card--home.ilo--hero-card--nobackground {
3903
+ background: transparent;
3904
+ }
3905
+ .ilo--hero-card--home.ilo--hero-card--nobackground > * {
3906
+ 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));
3907
+ }
3908
+ .ilo--hero-card--home.ilo--hero-card--nobackground::before, .ilo--hero-card--home.ilo--hero-card--nobackground::after {
3909
+ content: "";
3910
+ }
3457
3911
  @media screen and (min-width: 1024px) {
3458
3912
  .ilo--hero-card--home {
3459
3913
  bottom: 72px;
@@ -3464,20 +3918,38 @@
3464
3918
  }
3465
3919
  .ilo--hero-card--home::before {
3466
3920
  background: inherit;
3467
- clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
3468
3921
  content: "";
3469
3922
  display: block;
3470
- height: 59px;
3471
- left: 0;
3923
+ height: 48px;
3472
3924
  position: absolute;
3473
- top: -58.7px;
3474
- width: 100%;
3925
+ width: calc(100% - 87.4px);
3926
+ }
3927
+ .ilo--hero-card--home::after {
3928
+ 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");
3929
+ background-position: bottom right;
3930
+ background-size: cover;
3931
+ content: "";
3932
+ height: 48px;
3933
+ display: block;
3934
+ position: absolute;
3935
+ width: 87.8px;
3936
+ }
3937
+ .ilo--hero-card--home::before {
3938
+ left: 0;
3939
+ top: -48px;
3475
3940
  }
3476
3941
  .right-to-left .ilo--hero-card--home::before {
3477
- clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
3478
3942
  left: auto;
3479
3943
  right: 0;
3480
3944
  }
3945
+ .ilo--hero-card--home::after {
3946
+ right: 0;
3947
+ top: -48px;
3948
+ }
3949
+ .right-to-left .ilo--hero-card--home::after {
3950
+ left: 0;
3951
+ right: auto;
3952
+ }
3481
3953
  .ilo--hero-card--home.ilo--hero-card--center {
3482
3954
  left: 50%;
3483
3955
  right: auto;
@@ -3491,11 +3963,26 @@
3491
3963
  left: auto;
3492
3964
  right: 0;
3493
3965
  }
3966
+ .ilo--hero-card--home.ilo--hero-card--nobackground {
3967
+ background: transparent;
3968
+ }
3969
+ .ilo--hero-card--home.ilo--hero-card--nobackground::before, .ilo--hero-card--home.ilo--hero-card--nobackground::after {
3970
+ content: "";
3971
+ }
3494
3972
  }
3495
3973
  @media screen and (min-width: 1024px) {
3496
3974
  .ilo--hero-card--home.ilo--hero-card--dark {
3497
3975
  background: rgba(35, 0, 80, 0.55);
3498
3976
  }
3977
+ .ilo--hero-card--home.ilo--hero-card--dark.ilo--hero-card--nobackground {
3978
+ background: transparent;
3979
+ }
3980
+ .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 {
3981
+ content: "";
3982
+ }
3983
+ }
3984
+ .ilo--hero-card--home.ilo--hero-card--dark::after {
3985
+ 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");
3499
3986
  }
3500
3987
  .ilo--hero-card--portal {
3501
3988
  background: rgb(35, 0, 80);
@@ -3505,18 +3992,22 @@
3505
3992
  @media screen and (min-width: 1024px) {
3506
3993
  .ilo--hero-card--portal {
3507
3994
  max-width: 625px;
3508
- padding: 0 48px 48px 72px;
3995
+ padding: 0 48px 42px 72px;
3509
3996
  width: 100%;
3510
3997
  }
3511
3998
  }
3512
3999
  .ilo--hero-card--publication {
3513
4000
  padding: 24px;
3514
4001
  }
4002
+ .ilo--hero-card--publication .ilo--hero-card--eyebrow {
4003
+ margin-bottom: 0.3215434084rem;
4004
+ }
3515
4005
  @media screen and (min-width: 1024px) {
3516
4006
  .ilo--hero-card--publication {
4007
+ margin-left: 106px;
3517
4008
  margin-top: -64px;
3518
4009
  max-width: 720px;
3519
- padding: 0 48px 48px 72px;
4010
+ padding: 0 48px 48px 48px;
3520
4011
  width: 100%;
3521
4012
  }
3522
4013
  }
@@ -3567,7 +4058,7 @@
3567
4058
  }
3568
4059
  .ilo--hero-card--list--item {
3569
4060
  display: inline-block;
3570
- margin-right: 32px;
4061
+ margin-right: 24px;
3571
4062
  }
3572
4063
  .ilo--hero-card--list--item:last-of-type {
3573
4064
  margin-right: 0;
@@ -3615,7 +4106,7 @@
3615
4106
 
3616
4107
  /**
3617
4108
  * Do not edit directly
3618
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4109
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3619
4110
  */
3620
4111
  /**
3621
4112
  * TOKENS:
@@ -3671,7 +4162,7 @@
3671
4162
 
3672
4163
  /**
3673
4164
  * Do not edit directly
3674
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4165
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3675
4166
  */
3676
4167
  /**
3677
4168
  * TOKENS:
@@ -3813,7 +4304,7 @@
3813
4304
 
3814
4305
  /**
3815
4306
  * Do not edit directly
3816
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4307
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3817
4308
  */
3818
4309
  /**
3819
4310
  * TOKENS:
@@ -3823,7 +4314,7 @@
3823
4314
  */
3824
4315
  /**
3825
4316
  * Do not edit directly
3826
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4317
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3827
4318
  */
3828
4319
  /**
3829
4320
  * TOKENS:
@@ -3848,7 +4339,7 @@
3848
4339
  }
3849
4340
  /**
3850
4341
  * Do not edit directly
3851
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4342
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
3852
4343
  */
3853
4344
  /**
3854
4345
  * TOKENS:
@@ -4006,7 +4497,7 @@
4006
4497
 
4007
4498
  /**
4008
4499
  * Do not edit directly
4009
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4500
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4010
4501
  */
4011
4502
  /**
4012
4503
  * TOKENS:
@@ -4061,12 +4552,20 @@
4061
4552
  padding-left: 0;
4062
4553
  }
4063
4554
  .ilo--list__title {
4064
- font-size: 23.32px;
4555
+ font-size: 18.66px;
4065
4556
  letter-spacing: -0.035em;
4066
- line-height: 29.15px;
4557
+ line-height: 24.26px;
4558
+ margin-bottom: 1.1254019293rem;
4067
4559
  font-family: Overpass;
4068
4560
  font-weight: 700;
4069
- margin-bottom: 1.5763397642rem;
4561
+ }
4562
+ @media screen and (min-width: 610px) {
4563
+ .ilo--list__title {
4564
+ font-size: 23.32px;
4565
+ letter-spacing: -0.035em;
4566
+ line-height: 29.15px;
4567
+ margin-bottom: 1.4469453376rem;
4568
+ }
4070
4569
  }
4071
4570
  .ilo--list__item {
4072
4571
  font-size: 16px;
@@ -4087,13 +4586,13 @@
4087
4586
  font-size: 18.66px;
4088
4587
  letter-spacing: normal;
4089
4588
  line-height: 27.24px;
4090
- margin-bottom: 1.0110920672rem;
4589
+ margin-bottom: 0.7967297949rem;
4091
4590
  }
4092
4591
  }
4093
4592
 
4094
4593
  /**
4095
4594
  * Do not edit directly
4096
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4595
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4097
4596
  */
4098
4597
  /**
4099
4598
  * TOKENS:
@@ -4103,7 +4602,7 @@
4103
4602
  */
4104
4603
  /**
4105
4604
  * Do not edit directly
4106
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4605
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4107
4606
  */
4108
4607
  /**
4109
4608
  * TOKENS:
@@ -4113,7 +4612,7 @@
4113
4612
  */
4114
4613
  /**
4115
4614
  * Do not edit directly
4116
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4615
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4117
4616
  */
4118
4617
  /**
4119
4618
  * TOKENS:
@@ -4221,7 +4720,7 @@
4221
4720
 
4222
4721
  /**
4223
4722
  * Do not edit directly
4224
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4723
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4225
4724
  */
4226
4725
  /**
4227
4726
  * TOKENS:
@@ -4231,7 +4730,7 @@
4231
4730
  */
4232
4731
  /**
4233
4732
  * Do not edit directly
4234
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4733
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4235
4734
  */
4236
4735
  /**
4237
4736
  * TOKENS:
@@ -4241,7 +4740,7 @@
4241
4740
  */
4242
4741
  /**
4243
4742
  * Do not edit directly
4244
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4743
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4245
4744
  */
4246
4745
  /**
4247
4746
  * TOKENS:
@@ -4338,7 +4837,7 @@
4338
4837
 
4339
4838
  /**
4340
4839
  * Do not edit directly
4341
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
4840
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
4342
4841
  */
4343
4842
  /**
4344
4843
  * TOKENS:
@@ -4352,7 +4851,12 @@
4352
4851
  z-index: 4;
4353
4852
  }
4354
4853
  .ilo--header.ilo--mobile--open {
4355
- height: 100vh;
4854
+ height: 100%;
4855
+ left: 0;
4856
+ min-height: 100vh;
4857
+ position: fixed;
4858
+ top: 0;
4859
+ width: 100%;
4356
4860
  }
4357
4861
  @media screen and (min-width: 1024px) {
4358
4862
  .ilo--header {
@@ -4461,6 +4965,45 @@
4461
4965
  .ilo--header--utility-bar--local .ilo--language-switcher {
4462
4966
  display: none;
4463
4967
  }
4968
+ .ilo--header--utility-bar--local .ilo--language-switcher--link {
4969
+ 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");
4970
+ font-size: 11.94px;
4971
+ letter-spacing: -0.02em;
4972
+ line-height: 16.12px;
4973
+ appearance: none;
4974
+ background-color: inherit;
4975
+ background-position: 16px 50%;
4976
+ background-repeat: no-repeat;
4977
+ background-size: 24px;
4978
+ border: none;
4979
+ color: rgb(255, 255, 255);
4980
+ cursor: pointer;
4981
+ font-family: Overpass;
4982
+ font-weight: 500;
4983
+ padding: 16px 16px 16px 36px;
4984
+ text-decoration: none;
4985
+ transition: all 150ms ease-out;
4986
+ width: 100%;
4987
+ }
4988
+ .ilo--header--utility-bar--local .ilo--language-switcher--link:focus, .ilo--header--utility-bar--local .ilo--language-switcher--link:hover {
4989
+ 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");
4990
+ background-color: rgb(235, 245, 253);
4991
+ color: rgb(30, 45, 190);
4992
+ }
4993
+ .right-to-left .ilo--header--utility-bar--local .ilo--language-switcher--link {
4994
+ 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");
4995
+ background-position: calc(100% - 16px) 50%;
4996
+ padding: 16px 36px 16px 16px;
4997
+ }
4998
+ .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 {
4999
+ 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");
5000
+ background-color: rgb(235, 245, 253);
5001
+ color: rgb(30, 45, 190);
5002
+ }
5003
+ .ilo--header--utility-bar--local .ilo--language-switcher--link--wrap {
5004
+ align-items: center;
5005
+ display: flex;
5006
+ }
4464
5007
  @media screen and (min-width: 1024px) {
4465
5008
  .ilo--header--utility-bar--local .ilo--language-switcher {
4466
5009
  display: flex;
@@ -4503,9 +5046,12 @@
4503
5046
  }
4504
5047
  .ilo--header--navigation {
4505
5048
  background: rgb(255, 255, 255);
5049
+ height: 100%;
5050
+ left: 0;
5051
+ overflow-x: hidden;
5052
+ overflow-y: scroll;
4506
5053
  position: absolute;
4507
5054
  top: 0;
4508
- left: 0;
4509
5055
  transform: translateX(100%);
4510
5056
  transition: transform 225ms ease-out;
4511
5057
  width: 100%;
@@ -4521,6 +5067,7 @@
4521
5067
  @media screen and (min-width: 1024px) {
4522
5068
  .ilo--header--navigation {
4523
5069
  background: rgb(35, 0, 80);
5070
+ overflow: visible;
4524
5071
  position: static;
4525
5072
  transform: none;
4526
5073
  }
@@ -4629,7 +5176,7 @@
4629
5176
  background-color: rgb(255, 255, 255);
4630
5177
  background-position: calc(100% - 16px) 55%;
4631
5178
  background-repeat: no-repeat;
4632
- background-size: 16px;
5179
+ background-size: 24px;
4633
5180
  border: none;
4634
5181
  color: rgb(35, 0, 80);
4635
5182
  cursor: pointer;
@@ -4705,6 +5252,14 @@
4705
5252
  display: flex;
4706
5253
  justify-content: space-between;
4707
5254
  }
5255
+ .right-to-left .ilo--nav--local {
5256
+ direction: rtl;
5257
+ }
5258
+ @media screen and (min-width: 1024px) {
5259
+ .right-to-left .ilo--nav--local {
5260
+ padding: 0 max((100% - 1260px) / 2, 20px) 0 0;
5261
+ }
5262
+ }
4708
5263
  @media screen and (min-width: 1024px) {
4709
5264
  .ilo--nav--local {
4710
5265
  padding: 0 0 0 max((100% - 1260px) / 2, 20px);
@@ -4880,7 +5435,11 @@
4880
5435
  transition: opacity 150ms ease-out;
4881
5436
  z-index: -1;
4882
5437
  }
4883
- .ilo--context--open .ilo--language-switcher .ilo--context-menu {
5438
+ .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 {
5439
+ opacity: 1;
5440
+ z-index: 1;
5441
+ }
5442
+ .ilo--language-switcher .ilo--language-switcher--button:focus + .ilo--context-menu {
4884
5443
  opacity: 1;
4885
5444
  z-index: 1;
4886
5445
  }
@@ -4904,7 +5463,6 @@
4904
5463
  }
4905
5464
  @media screen and (min-width: 1024px) {
4906
5465
  .ilo--subnav {
4907
- 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));
4908
5466
  height: auto;
4909
5467
  left: 0;
4910
5468
  padding: 32px 0;
@@ -4914,6 +5472,11 @@
4914
5472
  z-index: -1;
4915
5473
  }
4916
5474
  .ilo--header.ilo--subnav--open .ilo--subnav {
5475
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
5476
+ 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));
5477
+ transform: translateY(0);
5478
+ }
5479
+ .ilo--subnav:has(.ilo--subnav--link:focus) {
4917
5480
  transform: translateY(0);
4918
5481
  }
4919
5482
  }
@@ -5069,6 +5632,9 @@
5069
5632
  .ilo--header.ilo--search--open .ilo--search-box {
5070
5633
  transform: translateY(0);
5071
5634
  }
5635
+ .ilo--search-box:has(.ilo--input:focus), .ilo--search-box:has(.ilo--searchfield--button:focus) {
5636
+ transform: translateY(0);
5637
+ }
5072
5638
  }
5073
5639
  .ilo--search-box .ilo--header--inner {
5074
5640
  align-items: center;
@@ -5097,7 +5663,7 @@
5097
5663
  background-color: transparent;
5098
5664
  background-position: center;
5099
5665
  background-repeat: no-repeat;
5100
- background-size: 21.5px 21.5px;
5666
+ background-size: 32px 32px;
5101
5667
  border: none;
5102
5668
  border-radius: 0;
5103
5669
  cursor: pointer;
@@ -5115,16 +5681,31 @@
5115
5681
  background-color: rgb(255, 255, 255);
5116
5682
  background-position: center;
5117
5683
  background-repeat: no-repeat;
5118
- background-size: 21.5px 21.5px;
5684
+ background-size: 32px 32px;
5119
5685
  }
5120
5686
  .ilo--search--open .ilo--search--button:hover, .ilo--search--open .ilo--search--button:focus {
5121
5687
  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");
5122
5688
  background-color: rgb(235, 245, 253);
5123
5689
  }
5124
5690
 
5691
+ .ilo--menu--open {
5692
+ height: 100%;
5693
+ padding-top: 85px;
5694
+ overflow: hidden;
5695
+ width: 100%;
5696
+ }
5697
+
5698
+ #anchor--components-navigation--navigation .docs-story > div:first-child {
5699
+ padding-top: 0;
5700
+ }
5701
+
5702
+ .sb-show-main.sb-main-padded {
5703
+ padding-top: 0;
5704
+ }
5705
+
5125
5706
  /**
5126
5707
  * Do not edit directly
5127
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
5708
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5128
5709
  */
5129
5710
  /**
5130
5711
  * TOKENS:
@@ -5134,7 +5715,7 @@
5134
5715
  */
5135
5716
  /**
5136
5717
  * Do not edit directly
5137
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
5718
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5138
5719
  */
5139
5720
  /**
5140
5721
  * TOKENS:
@@ -5144,7 +5725,7 @@
5144
5725
  */
5145
5726
  /**
5146
5727
  * Do not edit directly
5147
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
5728
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5148
5729
  */
5149
5730
  /**
5150
5731
  * TOKENS:
@@ -5336,7 +5917,7 @@
5336
5917
 
5337
5918
  /**
5338
5919
  * Do not edit directly
5339
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
5920
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5340
5921
  */
5341
5922
  /**
5342
5923
  * TOKENS:
@@ -5468,10 +6049,15 @@
5468
6049
  font-weight: 400;
5469
6050
  line-height: 45px;
5470
6051
  }
6052
+ .ilo--pagination--previous-set,
6053
+ .ilo--pagination .ilo--next-set {
6054
+ display: flex;
6055
+ justify-content: flex-start;
6056
+ }
5471
6057
 
5472
6058
  /**
5473
6059
  * Do not edit directly
5474
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6060
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5475
6061
  */
5476
6062
  /**
5477
6063
  * TOKENS:
@@ -5481,7 +6067,7 @@
5481
6067
  */
5482
6068
  /**
5483
6069
  * Do not edit directly
5484
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6070
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5485
6071
  */
5486
6072
  /**
5487
6073
  * TOKENS:
@@ -5506,7 +6092,7 @@
5506
6092
  }
5507
6093
  /**
5508
6094
  * Do not edit directly
5509
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6095
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5510
6096
  */
5511
6097
  /**
5512
6098
  * TOKENS:
@@ -5651,7 +6237,7 @@
5651
6237
 
5652
6238
  /**
5653
6239
  * Do not edit directly
5654
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6240
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5655
6241
  */
5656
6242
  /**
5657
6243
  * TOKENS:
@@ -5758,7 +6344,7 @@
5758
6344
 
5759
6345
  /**
5760
6346
  * Do not edit directly
5761
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6347
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5762
6348
  */
5763
6349
  /**
5764
6350
  * TOKENS:
@@ -5768,7 +6354,7 @@
5768
6354
  */
5769
6355
  /**
5770
6356
  * Do not edit directly
5771
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6357
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5772
6358
  */
5773
6359
  /**
5774
6360
  * TOKENS:
@@ -5793,7 +6379,7 @@
5793
6379
  }
5794
6380
  /**
5795
6381
  * Do not edit directly
5796
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6382
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5797
6383
  */
5798
6384
  /**
5799
6385
  * TOKENS:
@@ -5854,7 +6440,7 @@
5854
6440
 
5855
6441
  /**
5856
6442
  * Do not edit directly
5857
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6443
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
5858
6444
  */
5859
6445
  /**
5860
6446
  * TOKENS:
@@ -6269,7 +6855,7 @@
6269
6855
 
6270
6856
  /**
6271
6857
  * Do not edit directly
6272
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6858
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6273
6859
  */
6274
6860
  /**
6275
6861
  * TOKENS:
@@ -6320,7 +6906,7 @@
6320
6906
 
6321
6907
  /**
6322
6908
  * Do not edit directly
6323
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
6909
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6324
6910
  */
6325
6911
  /**
6326
6912
  * TOKENS:
@@ -6477,7 +7063,7 @@
6477
7063
 
6478
7064
  /**
6479
7065
  * Do not edit directly
6480
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7066
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6481
7067
  */
6482
7068
  /**
6483
7069
  * TOKENS:
@@ -6828,7 +7414,7 @@
6828
7414
 
6829
7415
  /**
6830
7416
  * Do not edit directly
6831
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7417
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
6832
7418
  */
6833
7419
  /**
6834
7420
  * TOKENS:
@@ -7014,7 +7600,7 @@
7014
7600
 
7015
7601
  /**
7016
7602
  * Do not edit directly
7017
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7603
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7018
7604
  */
7019
7605
  /**
7020
7606
  * TOKENS:
@@ -7072,7 +7658,7 @@
7072
7658
 
7073
7659
  /**
7074
7660
  * Do not edit directly
7075
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7661
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7076
7662
  */
7077
7663
  /**
7078
7664
  * TOKENS:
@@ -7246,7 +7832,7 @@
7246
7832
 
7247
7833
  /**
7248
7834
  * Do not edit directly
7249
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
7835
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7250
7836
  */
7251
7837
  /**
7252
7838
  * TOKENS:
@@ -7267,12 +7853,17 @@
7267
7853
  opacity: 0;
7268
7854
  padding: 0.4287245445rem 0.6430868167rem;
7269
7855
  position: absolute;
7270
- transition: opacity 150ms ease-out;
7271
7856
  visibility: hidden;
7272
7857
  width: auto;
7858
+ transition-property: opacity;
7859
+ transition-duration: 150ms;
7860
+ transition-timing-function: ease-out;
7273
7861
  }
7274
7862
  .ilo--tooltip--fade {
7275
7863
  opacity: 1;
7864
+ transition-property: opacity;
7865
+ transition-duration: 150ms;
7866
+ transition-timing-function: ease-out;
7276
7867
  }
7277
7868
  .ilo--tooltip--visible {
7278
7869
  visibility: visible;
@@ -7405,9 +7996,13 @@
7405
7996
  border-right-color: rgb(45, 45, 45);
7406
7997
  }
7407
7998
 
7999
+ .docs-story div[height] {
8000
+ min-height: 150px;
8001
+ }
8002
+
7408
8003
  /**
7409
8004
  * Do not edit directly
7410
- * Generated on Thu, 24 Nov 2022 13:10:27 GMT
8005
+ * Generated on Wed, 30 Nov 2022 00:59:20 GMT
7411
8006
  */
7412
8007
  /**
7413
8008
  * TOKENS:
@@ -8277,7 +8872,8 @@
8277
8872
  }
8278
8873
  .ilo--video:hover .ilo--video--controls,
8279
8874
  .ilo--video:hover .vjs-control-bar, .ilo--video:focus .ilo--video--controls,
8280
- .ilo--video:focus .vjs-control-bar {
8875
+ .ilo--video:focus .vjs-control-bar, .ilo--video:focus-within .ilo--video--controls,
8876
+ .ilo--video:focus-within .vjs-control-bar {
8281
8877
  opacity: 1;
8282
8878
  transition: opacity 150ms ease-out;
8283
8879
  }