@snyk-mktg/brand-ui 2.3.19 → 2.4.0

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,8 +1,8 @@
1
1
  @charset "UTF-8";
2
2
  @font-face {
3
3
  font-family: "brandui-icons";
4
- src: url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.9/brandui-icons.eot");
5
- src: url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.9/brandui-icons.eot#iefix") format("embedded-opentype"), url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.9/brandui-icons.ttf") format("truetype"), url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.9/brandui-icons.woff") format("woff");
4
+ src: url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.eot");
5
+ src: url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.eot#iefix") format("embedded-opentype"), url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.ttf") format("truetype"), url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.woff") format("woff");
6
6
  font-weight: normal;
7
7
  font-style: normal;
8
8
  font-display: block;
@@ -12388,24 +12388,33 @@ code:not([class]) {
12388
12388
  }
12389
12389
 
12390
12390
  @media (min-width: 769px) {
12391
- .cursor-glow {
12392
- position: fixed;
12391
+ .cursor-glow-wrapper:hover .glow-container .glow-item {
12392
+ opacity: 1;
12393
+ }
12394
+ }
12395
+ @media (min-width: 769px) {
12396
+ .cursor-glow-wrapper .glow-container {
12397
+ position: relative;
12398
+ overflow: hidden;
12399
+ height: max-content;
12400
+ }
12401
+ .cursor-glow-wrapper .glow-container .glow-item {
12402
+ position: absolute;
12403
+ border-radius: 0.75rem;
12393
12404
  top: 0;
12394
12405
  left: 0;
12395
- width: 400px;
12396
- height: 400px;
12397
- border-radius: 50%;
12398
- /* Center the glow on the cursor's actual position */
12399
- transform: translate(-50%, -50%);
12400
- /* This ensures the glow doesn't block clicks or text selection on elements underneath it */
12401
- pointer-events: none;
12402
- z-index: 9999;
12403
- transition: transform 0.2s ease-out; /* Optional: smooths movement slightly */
12404
- background: radial-gradient(circle, RGBA(255, 15, 243, 0.1) 0%, RGBA(255, 15, 243, 0) 50%);
12406
+ width: 100%;
12407
+ height: 100%;
12408
+ z-index: 0;
12409
+ background: radial-gradient(circle at 50% 50%, #1447e6, #1447e6, #ff0ff3, #fb2c36);
12410
+ mask: radial-gradient(250px circle at var(--x) var(--y), black 1%, transparent 70%);
12411
+ -webkit-mask: radial-gradient(250px circle at var(--x) var(--y), black 1%, transparent 70%);
12412
+ opacity: 0;
12413
+ transition: opacity 0.3s ease;
12405
12414
  }
12406
12415
  }
12407
12416
  @media (min-width: 769px) and (prefers-reduced-motion) {
12408
- .cursor-glow {
12417
+ .cursor-glow-wrapper .glow-container .glow-item {
12409
12418
  display: none;
12410
12419
  }
12411
12420
  }
@@ -12482,30 +12491,30 @@ code:not([class]) {
12482
12491
  @media (max-width: 768px) {
12483
12492
  .txt-page-title-large {
12484
12493
  font-family: "Geist", sans-serif;
12485
- font-size: 3.75rem;
12494
+ font-size: 4.375rem;
12486
12495
  font-weight: 900;
12487
12496
  letter-spacing: -0.03em;
12488
- line-height: 3.75rem;
12497
+ line-height: 5rem;
12489
12498
  text-transform: none;
12490
12499
  }
12491
12500
  }
12492
12501
 
12493
12502
  .txt-page-title {
12494
12503
  font-family: "Geist", sans-serif;
12495
- font-size: 3rem;
12504
+ font-size: 4.375rem;
12496
12505
  font-weight: 900;
12497
12506
  letter-spacing: -0.03em;
12498
- line-height: 4rem;
12507
+ line-height: 5rem;
12499
12508
  padding: 0;
12500
12509
  text-transform: none;
12501
12510
  }
12502
12511
  @media (max-width: 768px) {
12503
12512
  .txt-page-title {
12504
12513
  font-family: "Geist", sans-serif;
12505
- font-size: 3.75rem;
12514
+ font-size: 4.375rem;
12506
12515
  font-weight: 900;
12507
12516
  letter-spacing: -0.03em;
12508
- line-height: 3.75rem;
12517
+ line-height: 5rem;
12509
12518
  text-transform: none;
12510
12519
  }
12511
12520
  }
@@ -12522,10 +12531,10 @@ code:not([class]) {
12522
12531
  @media (max-width: 768px) {
12523
12532
  .txt-section-title {
12524
12533
  font-family: "Geist", sans-serif;
12525
- font-size: 3.75rem;
12534
+ font-size: 2.5rem;
12526
12535
  font-weight: 900;
12527
12536
  letter-spacing: -0.03em;
12528
- line-height: 3.75rem;
12537
+ line-height: 3rem;
12529
12538
  text-transform: none;
12530
12539
  }
12531
12540
  }
@@ -13386,7 +13395,35 @@ code:not([class]) {
13386
13395
  left: 0;
13387
13396
  width: 100%;
13388
13397
  height: 100%;
13389
- background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%), linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
13398
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
13399
+ z-index: -1;
13400
+ }
13401
+ .decoration-bg.evo-logo-png-footer {
13402
+ overflow: hidden;
13403
+ position: absolute;
13404
+ opacity: 1;
13405
+ transform: translateZ(-1px);
13406
+ width: calc(1440px / 12 * 16);
13407
+ background: transparent url("https://res.cloudinary.com/snyk/image/upload/snyk-mktg-brandui/decorations/evo-decoration-footer.png");
13408
+ background-position: center;
13409
+ background-repeat: no-repeat;
13410
+ background-size: cover;
13411
+ z-index: -2;
13412
+ }
13413
+ .decoration-bg.evo-logo-png-footer-center {
13414
+ left: 0;
13415
+ right: 0;
13416
+ top: -75%;
13417
+ bottom: 0;
13418
+ }
13419
+ .decoration-bg.evo-logo-png-footer:before {
13420
+ content: "";
13421
+ position: absolute;
13422
+ top: 0;
13423
+ left: 0;
13424
+ width: 100%;
13425
+ height: 100%;
13426
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
13390
13427
  z-index: -1;
13391
13428
  }
13392
13429
  .decoration-bg.evo-logo-png-top-right {
@@ -21897,6 +21934,9 @@ a.chip:hover.dark-mode, .dark-mode a.chip:hover, a.chip:focus.dark-mode, .dark-m
21897
21934
  .general-icon.icon-glassdoor:before {
21898
21935
  content: "\e920";
21899
21936
  }
21937
+ .general-icon.icon-glossary:before {
21938
+ content: "\e97e";
21939
+ }
21900
21940
  .general-icon.icon-google:before {
21901
21941
  content: "\e921";
21902
21942
  }
@@ -28984,6 +29024,7 @@ a.tag:focus {
28984
29024
  background: conic-gradient(from var(--glimmer-angle), RGBA(255, 137, 4, 1), RGBA(255, 137, 4, 0.3), RGBA(255, 15, 243, 0.3), RGBA(255, 15, 243, 1));
28985
29025
  }
28986
29026
  .button.tertiary, .button.glyph, .button.arrow, .button.external {
29027
+ font-weight: 500;
28987
29028
  transition: all 0.2s ease-in-out;
28988
29029
  }
28989
29030
  .button.tertiary, .button.glyph, .button.arrow, .button.external {
@@ -29160,7 +29201,63 @@ a.tag:focus {
29160
29201
  background-color: #ff0ff3;
29161
29202
  }
29162
29203
 
29204
+ .embed-widget :first-child {
29205
+ z-index: 2;
29206
+ }
29207
+ .embed-widget:before {
29208
+ background: linear-gradient(90deg, #ff0ff3, #ff8904);
29209
+ content: "";
29210
+ position: absolute;
29211
+ top: -3px;
29212
+ left: -3px;
29213
+ right: -3px;
29214
+ bottom: -3px;
29215
+ margin: 0 5rem;
29216
+ z-index: 0;
29217
+ border-radius: 0.75rem;
29218
+ }
29219
+ @media (max-width: 768px) {
29220
+ .embed-widget:before {
29221
+ margin: 0;
29222
+ }
29223
+ }
29224
+ .dark-mode .embed-widget:before, .embed-widget.dark-mode .embed-widget:before {
29225
+ background: linear-gradient(90deg, #ff0ff3, #ff8904);
29226
+ content: "";
29227
+ position: absolute;
29228
+ top: -3px;
29229
+ left: -3px;
29230
+ right: -3px;
29231
+ bottom: -3px;
29232
+ margin: 0 5rem;
29233
+ z-index: 0;
29234
+ border-radius: 0.75rem;
29235
+ }
29236
+ @media (max-width: 768px) {
29237
+ .dark-mode .embed-widget:before, .embed-widget.dark-mode .embed-widget:before {
29238
+ margin: 0;
29239
+ }
29240
+ }
29241
+ .embed-widget:after {
29242
+ content: "";
29243
+ z-index: 0;
29244
+ position: absolute;
29245
+ top: 0;
29246
+ left: 0;
29247
+ right: 0;
29248
+ bottom: 0;
29249
+ margin: 0 5rem;
29250
+ background-color: #000000;
29251
+ border-radius: 0.75rem;
29252
+ }
29253
+ @media (max-width: 768px) {
29254
+ .embed-widget:after {
29255
+ margin: 0;
29256
+ }
29257
+ }
29258
+
29163
29259
  .card {
29260
+ position: relative;
29164
29261
  border-width: 0.0625rem;
29165
29262
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4);
29166
29263
  backdrop-filter: blur(0.625rem);
@@ -29482,6 +29579,7 @@ a.tag:focus {
29482
29579
  -webkit-text-fill-color: transparent;
29483
29580
  }
29484
29581
  .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
29582
+ background: linear-gradient(140deg, #ff8904, #ff0ff3);
29485
29583
  position: absolute;
29486
29584
  top: 0;
29487
29585
  right: -10px;
@@ -29489,11 +29587,26 @@ a.tag:focus {
29489
29587
  border-radius: 0.125rem;
29490
29588
  padding: 0.125rem;
29491
29589
  }
29492
- .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
29493
- background: linear-gradient(140deg, #ff8904, #ff0ff3);
29590
+ @media (max-width: 1024px) {
29591
+ .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
29592
+ right: unset;
29593
+ left: 30px;
29594
+ }
29494
29595
  }
29495
29596
  .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag.dark-mode, .dark-mode .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
29496
29597
  background: linear-gradient(140deg, #ff8904, #ff0ff3);
29598
+ position: absolute;
29599
+ top: 0;
29600
+ right: -10px;
29601
+ font-size: 9px;
29602
+ border-radius: 0.125rem;
29603
+ padding: 0.125rem;
29604
+ }
29605
+ @media (max-width: 1024px) {
29606
+ .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag.dark-mode, .dark-mode .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
29607
+ right: unset;
29608
+ left: 30px;
29609
+ }
29497
29610
  }
29498
29611
  .brandui-navigation .navigation-item .nav-link:hover .new-evo-feature-tag, .brandui-navigation .navigation-item .nav-link:focus .new-evo-feature-tag {
29499
29612
  color: #ffffff;
@@ -30163,6 +30276,24 @@ a.tag:focus {
30163
30276
  padding-top: 5rem;
30164
30277
  }
30165
30278
 
30279
+ .brandui-navigation .navigation-item:hover .nav-dropdown, .brandui-navigation .navigation-item:focus .nav-dropdown, .brandui-navigation .navigation-item:focus-within .nav-dropdown, .brandui-navigation .navigation-item:focus-visible .nav-dropdown, .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown {
30280
+ color: #ff0ff3;
30281
+ }
30282
+ .brandui-navigation .navigation-item:hover .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:hover .nav-dropdown, .brandui-navigation .navigation-item:focus .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus .nav-dropdown, .brandui-navigation .navigation-item:focus-within .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus-within .nav-dropdown, .brandui-navigation .navigation-item:focus-visible .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus-visible .nav-dropdown, .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown {
30283
+ color: #ff0ff3;
30284
+ }
30285
+ .brandui-navigation .navigation-item:hover .nav-dropdown, .brandui-navigation .navigation-item:focus .nav-dropdown, .brandui-navigation .navigation-item:focus-within .nav-dropdown, .brandui-navigation .navigation-item:focus-visible .nav-dropdown, .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown {
30286
+ background-color: RGBA(255, 15, 243, 0.1);
30287
+ }
30288
+ .brandui-navigation .navigation-item:hover .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:hover .nav-dropdown, .brandui-navigation .navigation-item:focus .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus .nav-dropdown, .brandui-navigation .navigation-item:focus-within .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus-within .nav-dropdown, .brandui-navigation .navigation-item:focus-visible .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus-visible .nav-dropdown, .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown {
30289
+ background-color: RGBA(255, 15, 243, 0.1);
30290
+ }
30291
+ .brandui-navigation .navigation-item .nav-dropdown:after {
30292
+ color: #ff0ff3;
30293
+ }
30294
+ .dark-mode .brandui-navigation .navigation-item .nav-dropdown:after, .brandui-navigation .navigation-item .nav-dropdown.dark-mode .brandui-navigation .navigation-item .nav-dropdown:after {
30295
+ color: #ff0ff3;
30296
+ }
30166
30297
  .brandui-navigation .navigation-item .nav-link .new-evo-feature {
30167
30298
  background: linear-gradient(140deg, #ff8904, #ff8904);
30168
30299
  -webkit-background-clip: text;
@@ -30204,6 +30335,12 @@ a.tag:focus {
30204
30335
  .brandui-navigation .navigation .nav-login-accordion-label {
30205
30336
  font-family: monospace;
30206
30337
  }
30338
+ .brandui-navigation .navigation .nav-login-accordion-label:after {
30339
+ color: #ff0ff3;
30340
+ }
30341
+ .dark-mode .brandui-navigation .navigation .nav-login-accordion-label:after, .brandui-navigation .navigation .nav-login-accordion-label.dark-mode .brandui-navigation .navigation .nav-login-accordion-label:after {
30342
+ color: #ff0ff3;
30343
+ }
30207
30344
  .brandui-navigation .navigation .nav-login-accordion-links .login-link-label {
30208
30345
  font-family: monospace;
30209
30346
  }
@@ -30222,6 +30359,27 @@ a.tag:focus {
30222
30359
  .brandui-navigation .navigation .nav-login-accordion-links .login-link:hover.dark-mode, .dark-mode .brandui-navigation .navigation .nav-login-accordion-links .login-link:hover {
30223
30360
  background-color: RGBA(255, 15, 243, 0.1);
30224
30361
  }
30362
+ .brandui-navigation .navigation .nav-login-accordion-links .login-link.link-external:after {
30363
+ color: #ff0ff3;
30364
+ }
30365
+ .dark-mode .brandui-navigation .navigation .nav-login-accordion-links .login-link.link-external:after, .brandui-navigation .navigation .nav-login-accordion-links .login-link.link-external.dark-mode .brandui-navigation .navigation .nav-login-accordion-links .login-link.link-external:after {
30366
+ color: #ff0ff3;
30367
+ }
30368
+ .brandui-navigation .navigation .nav-login-accordion-disclaimer {
30369
+ font-family: monospace;
30370
+ }
30371
+ .brandui-navigation .navigation .nav-login-accordion-disclaimer a {
30372
+ color: #ff0ff3;
30373
+ }
30374
+ .brandui-navigation .navigation .nav-login-accordion-disclaimer a.dark-mode, .dark-mode .brandui-navigation .navigation .nav-login-accordion-disclaimer a {
30375
+ color: #ff0ff3;
30376
+ }
30377
+ .brandui-navigation .navigation .nav-login-accordion-disclaimer a:hover {
30378
+ color: #ffffff;
30379
+ }
30380
+ .brandui-navigation .navigation .nav-login-accordion-disclaimer a:hover.dark-mode, .dark-mode .brandui-navigation .navigation .nav-login-accordion-disclaimer a:hover {
30381
+ color: #ffffff;
30382
+ }
30225
30383
 
30226
30384
  .sr-only {
30227
30385
  position: absolute !important;