@digital-b2c/coreui-kit 0.17.0 → 0.17.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -107,6 +107,22 @@ html {
107
107
  white-space: nowrap;
108
108
  border: 0;
109
109
  }
110
+ .text-left,
111
+ .align--left {
112
+ text-align: left;
113
+ }
114
+ .text-center,
115
+ .align--center {
116
+ text-align: center;
117
+ }
118
+ .text-right,
119
+ .align--right {
120
+ text-align: right;
121
+ }
122
+ .text-justified,
123
+ .align--justify {
124
+ text-align: justify;
125
+ }
110
126
  @font-face {
111
127
  font-family: "Instrument Sans";
112
128
  font-weight: 400 700;
@@ -2004,14 +2020,37 @@ a:hover {
2004
2020
  .BlogPostContent_module_blog-post-content h1 {
2005
2021
  font-size: var(--font-size-4xl);
2006
2022
  }
2023
+ @media (max-width: 768px) {
2024
+ .BlogPostContent_module_blog-post-content h1 {
2025
+ font-size: var(--font-size-2xl);
2026
+ }
2027
+ }
2007
2028
  .BlogPostContent_module_blog-post-content h2 {
2008
2029
  font-size: var(--font-size-3xl);
2030
+ font-weight: var(--font-weight-bold);
2031
+ }
2032
+ @media (max-width: 768px) {
2033
+ .BlogPostContent_module_blog-post-content h2 {
2034
+ font-size: var(--font-size-xl);
2035
+ }
2009
2036
  }
2010
2037
  .BlogPostContent_module_blog-post-content h3 {
2011
2038
  font-size: var(--font-size-2xl);
2039
+ font-weight: var(--font-weight-medium);
2040
+ }
2041
+ @media (max-width: 768px) {
2042
+ .BlogPostContent_module_blog-post-content h3 {
2043
+ font-size: var(--font-size-xl);
2044
+ }
2012
2045
  }
2013
2046
  .BlogPostContent_module_blog-post-content h4 {
2014
2047
  font-size: var(--font-size-xl);
2048
+ font-weight: var(--font-weight-bold);
2049
+ }
2050
+ @media (max-width: 768px) {
2051
+ .BlogPostContent_module_blog-post-content h4 {
2052
+ font-size: var(--font-size-lg);
2053
+ }
2015
2054
  }
2016
2055
  .BlogPostContent_module_blog-post-content h5 {
2017
2056
  font-size: var(--font-size-xl);
@@ -2032,15 +2071,14 @@ a:hover {
2032
2071
  }
2033
2072
  }
2034
2073
  .BlogPostContent_module_blog-post-content p {
2035
- font-size: var(--font-size-md);
2074
+ font-size: var(--font-size-lg);
2036
2075
  font-weight: var(--font-weight-medium);
2037
2076
  line-height: 150%;
2038
2077
  color: var(--color-black);
2039
2078
  }
2040
2079
  @media (max-width: 768px) {
2041
2080
  .BlogPostContent_module_blog-post-content p {
2042
- font-size: var(--font-size-md);
2043
- font-weight: var(--font-weight-regular);
2081
+ font-size: 18px;
2044
2082
  }
2045
2083
  }
2046
2084
  .BlogPostContent_module_blog-post-content p:last-child {
@@ -4125,7 +4163,194 @@ a:hover {
4125
4163
  }
4126
4164
  }
4127
4165
 
4128
- /* src/widgets/Navigation/Navigation.module.scss */
4166
+ /* src/widgets/Navigation/NavigationLogo.module.scss */
4167
+ .NavigationLogo_module_mainLogoLink {
4168
+ display: inline-flex;
4169
+ align-items: center;
4170
+ }
4171
+ .NavigationLogo_module_mainLogoLink:focus-visible {
4172
+ border-radius: 0.5rem;
4173
+ outline: 3px solid var(--color-link);
4174
+ }
4175
+
4176
+ /* src/widgets/Navigation/NavigationBrandBars.module.scss */
4177
+ .NavigationBrandBars_module_brandBars {
4178
+ display: flex;
4179
+ align-items: center;
4180
+ width: 100%;
4181
+ overflow: hidden;
4182
+ }
4183
+ .NavigationBrandBars_module_brandBar {
4184
+ display: flex;
4185
+ flex-direction: column;
4186
+ align-items: center;
4187
+ justify-content: center;
4188
+ overflow: hidden;
4189
+ height: 8px;
4190
+ padding: 0 51px;
4191
+ transition:
4192
+ height 0.35s ease,
4193
+ padding 0.35s ease,
4194
+ box-shadow 0.35s ease;
4195
+ }
4196
+ @media (max-width: 768px) {
4197
+ .NavigationBrandBars_module_brandBar {
4198
+ padding: 0 var(--spacing-md);
4199
+ }
4200
+ }
4201
+ .NavigationBrandBars_module_brandBar:first-child {
4202
+ align-items: flex-end;
4203
+ padding-left: 0;
4204
+ }
4205
+ .NavigationBrandBars_module_brandBar:last-child {
4206
+ align-items: flex-start;
4207
+ padding-right: 0;
4208
+ }
4209
+ .NavigationBrandBars_module_brandBar:not(:first-child):not(:last-child) {
4210
+ max-width: 360px;
4211
+ }
4212
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar {
4213
+ height: 95px;
4214
+ box-shadow: 0 0 4px rgba(54, 54, 54, 0.1);
4215
+ padding: 24px 51px;
4216
+ transition:
4217
+ height 0.35s ease 0.3s,
4218
+ padding 0.35s ease 0.3s,
4219
+ box-shadow 0.35s ease 0.3s;
4220
+ }
4221
+ @media (max-width: 768px) {
4222
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar {
4223
+ height: 64px;
4224
+ padding: var(--spacing-md);
4225
+ }
4226
+ }
4227
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:first-child {
4228
+ padding-left: 0;
4229
+ }
4230
+ @media (max-width: 768px) {
4231
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:first-child {
4232
+ padding-left: var(--spacing-md);
4233
+ }
4234
+ }
4235
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:last-child {
4236
+ padding-right: 0;
4237
+ }
4238
+ @media (max-width: 768px) {
4239
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:last-child {
4240
+ padding-right: var(--spacing-md);
4241
+ }
4242
+ }
4243
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandLogo {
4244
+ opacity: 1;
4245
+ transition: opacity 0.35s ease 0.3s;
4246
+ }
4247
+ .NavigationBrandBars_module_brandLogo {
4248
+ max-width: 100%;
4249
+ max-height: 70px;
4250
+ width: auto;
4251
+ height: auto;
4252
+ object-fit: contain;
4253
+ opacity: 0;
4254
+ transition: opacity 0.35s ease;
4255
+ pointer-events: none;
4256
+ }
4257
+ @media (max-width: 768px) {
4258
+ .NavigationBrandBars_module_brandLogo {
4259
+ max-height: 40px;
4260
+ }
4261
+ }
4262
+ .NavigationBrandBars_module_lenscrafters {
4263
+ flex: 366 0 0;
4264
+ background-color: var(--color-lenscrafter-blue);
4265
+ }
4266
+ .NavigationBrandBars_module_forEyes {
4267
+ flex: 360 0 0;
4268
+ background-color: var(--color-foreyes-brown);
4269
+ }
4270
+ .NavigationBrandBars_module_optical {
4271
+ flex: 360 0 0;
4272
+ background-color: var(--color-targetoptical-red);
4273
+ }
4274
+ .NavigationBrandBars_module_pearleVision {
4275
+ flex: 354 0 0;
4276
+ background-color: var(--color-pearlevision-green);
4277
+ }
4278
+
4279
+ /* src/widgets/Navigation/NavigationDesktop.module.scss */
4280
+ .NavigationDesktop_module_navTabs {
4281
+ display: flex;
4282
+ align-items: center;
4283
+ gap: var(--spacing-xl);
4284
+ margin: 0;
4285
+ padding: 0;
4286
+ list-style: none;
4287
+ min-width: 0;
4288
+ }
4289
+ @media (max-width: 1024px) {
4290
+ .NavigationDesktop_module_navTabs {
4291
+ overflow-x: auto;
4292
+ scrollbar-width: none;
4293
+ padding: 5px;
4294
+ margin: -5px;
4295
+ }
4296
+ .NavigationDesktop_module_navTabs::-webkit-scrollbar {
4297
+ display: none;
4298
+ }
4299
+ }
4300
+ .NavigationDesktop_module_navTab {
4301
+ display: block;
4302
+ flex-shrink: 0;
4303
+ }
4304
+ .NavigationDesktop_module_navTabLink {
4305
+ display: flex;
4306
+ align-items: center;
4307
+ gap: var(--spacing-xs);
4308
+ height: 33px;
4309
+ padding: 0 var(--spacing-xs);
4310
+ font-family: var(--font-family-primary);
4311
+ font-size: var(--font-size-md);
4312
+ font-weight: var(--font-weight-medium);
4313
+ line-height: 1.5;
4314
+ letter-spacing: -0.08px;
4315
+ color: var(--nav-tab-color, var(--color-black));
4316
+ text-decoration: none;
4317
+ white-space: nowrap;
4318
+ border-bottom: 3px solid transparent;
4319
+ transition: border-color 0.2s ease, color 0.3s ease;
4320
+ }
4321
+ .NavigationDesktop_module_navTabLink:hover,
4322
+ .NavigationDesktop_module_navTabLink:focus {
4323
+ text-decoration: none;
4324
+ border-bottom-color: var(--nav-tab-accent, var(--color-black));
4325
+ }
4326
+ .NavigationDesktop_module_navTabLink:focus-visible {
4327
+ outline: 3px solid var(--color-link);
4328
+ outline-offset: 2px;
4329
+ border-bottom-color: var(--nav-tab-accent, var(--color-black));
4330
+ }
4331
+ .NavigationDesktop_module_navTabTrigger {
4332
+ background: none;
4333
+ border-top: none;
4334
+ border-left: none;
4335
+ border-right: none;
4336
+ cursor: pointer;
4337
+ }
4338
+ .NavigationDesktop_module_navTabTrigger svg {
4339
+ filter: var(--nav-trigger-svg-filter, none);
4340
+ transition: transform 0.3s ease, filter 0.3s ease;
4341
+ }
4342
+ .NavigationDesktop_module_navTabTriggerOpen svg {
4343
+ transform: scaleY(-1);
4344
+ }
4345
+ .NavigationDesktop_module_navTabActive {
4346
+ border-bottom-color: var(--nav-tab-accent, var(--color-black));
4347
+ }
4348
+ .NavigationDesktop_module_navTabActive:hover,
4349
+ .NavigationDesktop_module_navTabActive:focus {
4350
+ border-bottom-color: var(--nav-tab-accent, var(--color-black));
4351
+ }
4352
+
4353
+ /* src/widgets/Navigation/NavigationDropdown.module.scss */
4129
4354
  html,
4130
4355
  body {
4131
4356
  font-family: "Instrument Sans", sans-serif;
@@ -4135,102 +4360,93 @@ body {
4135
4360
  color: #4d4d4d;
4136
4361
  }
4137
4362
  h1,
4138
- .Navigation_module_h1 {
4363
+ .NavigationDropdown_module_h1 {
4139
4364
  font-size: 3rem;
4140
4365
  font-weight: 600;
4141
4366
  line-height: 1.17;
4142
4367
  }
4143
4368
  @media (max-width: 768px) {
4144
4369
  h1,
4145
- .Navigation_module_h1 {
4370
+ .NavigationDropdown_module_h1 {
4146
4371
  font-size: 2rem;
4147
4372
  }
4148
4373
  }
4149
4374
  h2,
4150
- .Navigation_module_h2,
4151
- .Navigation_module_dropdownTitle {
4375
+ .NavigationDropdown_module_h2,
4376
+ .NavigationDropdown_module_dropdownTitle {
4152
4377
  font-size: 2.5rem;
4153
4378
  font-weight: 600;
4154
4379
  line-height: 1.2;
4155
4380
  }
4156
4381
  @media (max-width: 768px) {
4157
4382
  h2,
4158
- .Navigation_module_h2,
4159
- .Navigation_module_dropdownTitle {
4383
+ .NavigationDropdown_module_h2,
4384
+ .NavigationDropdown_module_dropdownTitle {
4160
4385
  font-size: 1.5rem;
4161
4386
  }
4162
4387
  }
4163
4388
  h3,
4164
- .Navigation_module_h3 {
4389
+ .NavigationDropdown_module_h3 {
4165
4390
  font-size: 2rem;
4166
4391
  font-weight: 600;
4167
4392
  line-height: 1.25;
4168
4393
  }
4169
4394
  @media (max-width: 768px) {
4170
4395
  h3,
4171
- .Navigation_module_h3 {
4396
+ .NavigationDropdown_module_h3 {
4172
4397
  font-size: 1.25rem;
4173
4398
  }
4174
4399
  }
4175
4400
  h4,
4176
- .Navigation_module_h4 {
4401
+ .NavigationDropdown_module_h4 {
4177
4402
  font-size: 1.5rem;
4178
4403
  font-weight: 600;
4179
4404
  line-height: 1.33;
4180
4405
  }
4181
4406
  @media (max-width: 768px) {
4182
4407
  h4,
4183
- .Navigation_module_h4 {
4408
+ .NavigationDropdown_module_h4 {
4184
4409
  font-size: 18px;
4185
4410
  }
4186
4411
  }
4187
4412
  h5,
4188
- .Navigation_module_h5 {
4413
+ .NavigationDropdown_module_h5 {
4189
4414
  font-size: 1.25rem;
4190
4415
  font-weight: 500;
4191
4416
  line-height: 1.4;
4192
4417
  }
4193
4418
  @media (max-width: 768px) {
4194
4419
  h5,
4195
- .Navigation_module_h5 {
4420
+ .NavigationDropdown_module_h5 {
4196
4421
  font-size: 18px;
4197
4422
  }
4198
4423
  }
4199
- .Navigation_module_subheading,
4200
- .Navigation_module_mobileItemLink,
4201
- .Navigation_module_mobileItemTrigger,
4202
- .Navigation_module_mobileSubLink {
4424
+ .NavigationDropdown_module_subheading {
4203
4425
  font-size: 1.25rem;
4204
4426
  font-weight: 500;
4205
4427
  line-height: 1.4;
4206
4428
  }
4207
4429
  @media (max-width: 768px) {
4208
- .Navigation_module_subheading,
4209
- .Navigation_module_mobileItemLink,
4210
- .Navigation_module_mobileItemTrigger,
4211
- .Navigation_module_mobileSubLink {
4430
+ .NavigationDropdown_module_subheading {
4212
4431
  font-size: 18px;
4213
4432
  }
4214
4433
  }
4215
- .Navigation_module_subheading strong,
4216
- .Navigation_module_mobileItemLink strong,
4217
- .Navigation_module_mobileItemTrigger strong,
4218
- .Navigation_module_mobileSubLink strong {
4434
+ .NavigationDropdown_module_subheading strong {
4219
4435
  font-weight: 500;
4220
4436
  color: #000000;
4221
4437
  }
4222
- .Navigation_module_body {
4438
+ .NavigationDropdown_module_body {
4223
4439
  font-size: 1rem;
4224
4440
  font-weight: 500;
4225
4441
  line-height: 1.5;
4226
4442
  }
4227
4443
  small,
4228
- .Navigation_module_small {
4444
+ .NavigationDropdown_module_small {
4229
4445
  font-size: 0.875rem;
4230
4446
  font-weight: 500;
4231
4447
  line-height: 1.5;
4232
4448
  }
4233
- .Navigation_module_smallest {
4449
+ .NavigationDropdown_module_smallest {
4234
4450
  font-size: 0.75rem;
4235
4451
  font-weight: 500;
4236
4452
  line-height: 1.5;
@@ -4243,349 +4459,214 @@ a {
4243
4459
  a:hover {
4244
4460
  text-decoration: underline;
4245
4461
  }
4246
- .Navigation_module_navigationWrapper {
4247
- position: sticky;
4248
- top: 0;
4249
- z-index: 99;
4250
- width: 100%;
4462
+ .NavigationDropdown_module_dropdownPanel {
4463
+ position: absolute;
4464
+ left: 0;
4465
+ right: 0;
4466
+ top: 100%;
4467
+ z-index: 1;
4251
4468
  background-color: var(--color-white);
4252
- transition: background-color 0.3s ease;
4253
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
4254
- }
4255
- .Navigation_module_navigationWrapper.Navigation_module_dropdownOpen {
4256
- box-shadow: none;
4257
- }
4258
- .Navigation_module_navigationWrapper.Navigation_module_variantTransparent {
4259
- position: fixed;
4260
- }
4261
- .Navigation_module_navigationWrapper.Navigation_module_transparent {
4262
- background-color: transparent;
4263
- --nav-item-color: var(--color-white);
4264
- box-shadow: none;
4265
- }
4266
- .Navigation_module_navigationWrapper.Navigation_module_transparent .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_logo {
4267
- filter: brightness(0) invert(1);
4268
- transition: filter 0.3s ease;
4469
+ padding: var(--spacing-xl) 97px;
4470
+ box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.25);
4269
4471
  }
4270
- .Navigation_module_navigation {
4271
- max-height: 7.5625rem;
4272
- width: 100%;
4472
+ .NavigationDropdown_module_dropdownInner {
4473
+ display: flex;
4474
+ align-items: center;
4475
+ justify-content: center;
4476
+ gap: 88px;
4273
4477
  max-width: 1280px;
4274
4478
  margin: 0 auto;
4275
- padding: var(--spacing-md) 0;
4276
- }
4277
- @media (max-width: 768px) {
4278
- .Navigation_module_navigation {
4279
- padding: 0;
4280
- }
4281
- }
4282
- .Navigation_module_navigation .Navigation_module_upperNav {
4283
- display: flex;
4284
- justify-content: space-between;
4285
- }
4286
- @media (max-width: 768px) {
4287
- .Navigation_module_navigation .Navigation_module_upperNav {
4288
- align-items: center;
4289
- padding: 13px var(--spacing-md);
4290
- }
4291
- }
4292
- .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
4293
- width: 349px;
4294
- height: 45px;
4295
- }
4296
- @media (max-width: 768px) {
4297
- .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
4298
- width: 233px;
4299
- height: 30px;
4300
- }
4301
4479
  }
4302
- .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_upperRight {
4480
+ .NavigationDropdown_module_dropdownLinks {
4303
4481
  display: flex;
4304
- gap: 8px;
4305
- }
4306
- .Navigation_module_navigation .Navigation_module_lowerNav {
4307
- display: flex;
4308
- gap: 32px;
4309
- list-style: none;
4482
+ flex-direction: column;
4483
+ width: 386px;
4484
+ flex-shrink: 0;
4310
4485
  margin: 0;
4311
4486
  padding: 0;
4487
+ list-style: none;
4312
4488
  }
4313
- .Navigation_module_navigation .Navigation_module_lowerNavItem {
4314
- display: block;
4489
+ .NavigationDropdown_module_dropdownLinkItem {
4490
+ display: flex;
4315
4491
  }
4316
- .Navigation_module_overlay {
4317
- position: fixed;
4318
- inset: 0;
4319
- background-color: var(--color-black);
4320
- opacity: 0.5;
4321
- z-index: 98;
4322
- pointer-events: none;
4492
+ .NavigationDropdown_module_dropdownLink {
4493
+ flex: 1 0 0;
4494
+ font-size: var(--font-size-lg);
4495
+ font-weight: var(--font-weight-medium);
4496
+ line-height: 1.4;
4497
+ letter-spacing: -0.2px;
4498
+ color: var(--color-gray);
4499
+ text-decoration: none;
4500
+ transition: color 0.2s ease-in-out;
4323
4501
  }
4324
- .Navigation_module_mainLogoLink {
4325
- display: inline-flex;
4326
- align-items: center;
4502
+ .NavigationDropdown_module_dropdownLink:hover,
4503
+ .NavigationDropdown_module_dropdownLink:focus {
4504
+ font-weight: var(--font-weight-bold);
4505
+ color: var(--color-true-black);
4506
+ text-decoration: none;
4327
4507
  }
4328
- .Navigation_module_mainLogoLink:focus-visible {
4329
- border-radius: 0.5rem;
4508
+ .NavigationDropdown_module_dropdownLink:focus-visible {
4330
4509
  outline: 3px solid var(--color-link);
4510
+ outline-offset: 2px;
4331
4511
  }
4332
- .Navigation_module_dropdownTrigger svg {
4333
- transition: transform 0.3s ease;
4512
+ .NavigationDropdown_module_dropdownLinkSpacer {
4513
+ margin-bottom: 16px;
4334
4514
  }
4335
- .Navigation_module_dropdownTriggerOpen svg {
4336
- transform: scaleY(-1);
4337
- }
4338
- .Navigation_module_dropdownLinkContainer {
4339
- min-width: 386px;
4340
- }
4341
- .Navigation_module_dropdownLinkSpacer {
4342
- margin-bottom: 16px;
4343
- }
4344
- .Navigation_module_mainLogoMobile {
4345
- width: 233px;
4346
- height: 30px;
4347
- object-fit: contain;
4348
- }
4349
- .Navigation_module_hamburgerButton {
4350
- display: flex;
4351
- align-items: center;
4352
- justify-content: center;
4353
- width: 24px;
4354
- height: 24px;
4355
- background: none;
4356
- border: none;
4357
- padding: 0;
4358
- cursor: pointer;
4359
- -webkit-tap-highlight-color: transparent;
4360
- }
4361
- .Navigation_module_hamburgerButton:focus-visible {
4362
- border-radius: 0.25rem;
4363
- outline: 3px solid var(--color-link);
4364
- }
4365
- .Navigation_module_mobileMenu {
4366
- position: fixed;
4367
- inset: 0;
4368
- z-index: 100;
4369
- background-color: var(--color-white);
4370
- display: flex;
4371
- flex-direction: column;
4372
- overflow-y: auto;
4373
- opacity: 0;
4374
- visibility: hidden;
4375
- pointer-events: none;
4376
- transition: opacity 0.3s ease, visibility 0.3s ease;
4377
- }
4378
- .Navigation_module_mobileMenuOpen {
4379
- opacity: 1;
4380
- visibility: visible;
4381
- pointer-events: auto;
4382
- }
4383
- .Navigation_module_mobileMenuHeader {
4384
- display: flex;
4385
- align-items: center;
4386
- justify-content: space-between;
4387
- padding: 13px var(--spacing-md);
4388
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
4515
+ .NavigationDropdown_module_dropdownDivider {
4516
+ width: 2px;
4517
+ height: 160px;
4518
+ flex-shrink: 0;
4519
+ background-color: #ebebeb;
4389
4520
  }
4390
- .Navigation_module_mobileMenuItems {
4391
- flex: 1;
4521
+ .NavigationDropdown_module_dropdownInfo {
4392
4522
  display: flex;
4393
4523
  flex-direction: column;
4394
4524
  gap: var(--spacing-md);
4395
- margin: 0;
4396
- padding: 24px var(--spacing-md);
4397
- list-style: none;
4398
- }
4399
- .Navigation_module_mobileItem {
4400
- padding-bottom: var(--spacing-sm);
4401
- border-bottom: 1px solid #ebebeb;
4402
- }
4403
- .Navigation_module_mobileItemLink {
4404
- display: block;
4525
+ width: 682px;
4405
4526
  color: var(--color-true-black);
4406
- text-decoration: none;
4407
- padding-bottom: var(--spacing-sm);
4408
- border-bottom: 1px solid #ebebeb;
4409
- -webkit-tap-highlight-color: transparent;
4410
- }
4411
- .Navigation_module_mobileItemLink:hover,
4412
- .Navigation_module_mobileItemLink:focus-visible {
4413
- text-decoration: none;
4414
4527
  }
4415
- .Navigation_module_mobileItemTrigger {
4416
- font-family: inherit;
4417
- display: flex;
4418
- align-items: center;
4419
- justify-content: space-between;
4420
- width: 100%;
4421
- background: none;
4422
- border: none;
4423
- text-align: left;
4528
+ .NavigationDropdown_module_dropdownTitle {
4424
4529
  color: var(--color-true-black);
4425
- cursor: pointer;
4426
- -webkit-tap-highlight-color: transparent;
4427
- }
4428
- .Navigation_module_mobileItemChevron {
4429
- display: flex;
4430
- align-items: center;
4431
- transform: rotate(-90deg);
4432
- transition: transform 0.3s ease;
4433
- }
4434
- .Navigation_module_mobileItemChevronOpen {
4435
- transform: rotate(0deg);
4436
- }
4437
- .Navigation_module_mobileSubItems {
4438
- display: grid;
4439
- grid-template-rows: 0fr;
4440
- transition: grid-template-rows 0.3s ease;
4441
- }
4442
- .Navigation_module_mobileSubItemsOpen {
4443
- grid-template-rows: 1fr;
4444
- }
4445
- .Navigation_module_mobileSubItemsInner {
4446
- overflow: hidden;
4447
- display: flex;
4448
- flex-direction: column;
4449
- gap: var(--spacing-sm);
4450
- margin: 0;
4451
- padding: 0;
4452
- list-style: none;
4453
- }
4454
- .Navigation_module_mobileSubItemsInner li:first-child .Navigation_module_mobileSubLink {
4455
- padding-top: var(--spacing-md);
4456
4530
  }
4457
- .Navigation_module_mobileSubLink {
4458
- display: block;
4531
+ .NavigationDropdown_module_dropdownDescription {
4532
+ font-size: var(--font-size-lg);
4533
+ font-weight: var(--font-weight-regular);
4534
+ line-height: 1.4;
4535
+ letter-spacing: -0.2px;
4459
4536
  color: var(--color-true-black);
4460
- text-decoration: none;
4461
- padding-left: var(--spacing-lg);
4462
- font-weight: var(--font-weight-medium);
4463
- }
4464
- .Navigation_module_mobileSubLink:hover,
4465
- .Navigation_module_mobileSubLink:focus-visible {
4466
- font-weight: var(--font-weight-bold);
4467
- text-decoration: none;
4468
- }
4469
- .Navigation_module_mobileSubLinkActive {
4470
- font-weight: var(--font-weight-bold);
4471
- }
4472
- .Navigation_module_mobileMenuCtas {
4473
- position: sticky;
4474
- bottom: 0;
4475
- z-index: 1;
4476
- display: flex;
4477
- flex-direction: column;
4478
- gap: var(--spacing-sm);
4479
- padding: var(--spacing-md);
4480
- background-color: var(--color-white);
4481
- }
4482
- .Navigation_module_mobileMenuCtas > * {
4483
- width: 100%;
4484
- height: 48px;
4485
- }
4486
- .Navigation_module_mobileMenuCtas > *:first-child {
4487
- border: 1px solid var(--secondary-states-outlinedBorder, #c2c2c2);
4488
4537
  }
4489
- .Navigation_module_Navigation {
4490
- position: sticky;
4491
- top: 0;
4492
- z-index: 99;
4493
- width: 100%;
4494
- background-color: var(--color-white);
4495
- transition: background-color 0.3s ease;
4538
+
4539
+ /* src/widgets/Navigation/NavigationMobile.module.scss */
4540
+ html,
4541
+ body {
4542
+ font-family: "Instrument Sans", sans-serif;
4543
+ font-size: 1rem;
4544
+ font-weight: 500;
4545
+ line-height: 1.5;
4546
+ color: #4d4d4d;
4496
4547
  }
4497
- .Navigation_module_Navigation.Navigation_module_dropdownOpen .Navigation_module_mainBar {
4498
- box-shadow: none;
4548
+ h1,
4549
+ .NavigationMobile_module_h1 {
4550
+ font-size: 3rem;
4551
+ font-weight: 600;
4552
+ line-height: 1.17;
4499
4553
  }
4500
- .Navigation_module_Navigation.Navigation_module_variantTransparent {
4501
- position: fixed;
4554
+ @media (max-width: 768px) {
4555
+ h1,
4556
+ .NavigationMobile_module_h1 {
4557
+ font-size: 2rem;
4558
+ }
4502
4559
  }
4503
- .Navigation_module_Navigation.Navigation_module_transparent {
4504
- background-color: transparent;
4505
- --nav-item-color: var(--color-white);
4560
+ h2,
4561
+ .NavigationMobile_module_h2 {
4562
+ font-size: 2.5rem;
4563
+ font-weight: 600;
4564
+ line-height: 1.2;
4506
4565
  }
4507
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_mainBar {
4508
- background-color: transparent;
4509
- box-shadow: none;
4566
+ @media (max-width: 768px) {
4567
+ h2,
4568
+ .NavigationMobile_module_h2 {
4569
+ font-size: 1.5rem;
4570
+ }
4510
4571
  }
4511
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_logo {
4512
- filter: brightness(0) invert(1);
4513
- transition: filter 0.3s ease;
4572
+ h3,
4573
+ .NavigationMobile_module_h3 {
4574
+ font-size: 2rem;
4575
+ font-weight: 600;
4576
+ line-height: 1.25;
4514
4577
  }
4515
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink {
4516
- color: var(--color-white);
4578
+ @media (max-width: 768px) {
4579
+ h3,
4580
+ .NavigationMobile_module_h3 {
4581
+ font-size: 1.25rem;
4582
+ }
4517
4583
  }
4518
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:hover,
4519
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:focus,
4520
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:focus-visible {
4521
- border-bottom-color: var(--color-white);
4584
+ h4,
4585
+ .NavigationMobile_module_h4 {
4586
+ font-size: 1.5rem;
4587
+ font-weight: 600;
4588
+ line-height: 1.33;
4522
4589
  }
4523
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabTrigger svg {
4524
- filter: brightness(0) invert(1);
4590
+ @media (max-width: 768px) {
4591
+ h4,
4592
+ .NavigationMobile_module_h4 {
4593
+ font-size: 18px;
4594
+ }
4525
4595
  }
4526
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive {
4527
- border-bottom-color: var(--color-white);
4596
+ h5,
4597
+ .NavigationMobile_module_h5 {
4598
+ font-size: 1.25rem;
4599
+ font-weight: 500;
4600
+ line-height: 1.4;
4528
4601
  }
4529
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive:hover,
4530
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive:focus {
4531
- border-bottom-color: var(--color-white);
4602
+ @media (max-width: 768px) {
4603
+ h5,
4604
+ .NavigationMobile_module_h5 {
4605
+ font-size: 18px;
4606
+ }
4532
4607
  }
4533
- .Navigation_module_mainBar {
4534
- width: 100%;
4535
- background-color: var(--color-white);
4536
- padding: var(--spacing-md) var(--spacing-7xl);
4537
- box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
4538
- transition: background-color 0.3s ease, box-shadow 0.3s ease;
4608
+ .NavigationMobile_module_subheading,
4609
+ .NavigationMobile_module_mobileItemLink,
4610
+ .NavigationMobile_module_mobileItemTrigger,
4611
+ .NavigationMobile_module_mobileSubLink {
4612
+ font-size: 1.25rem;
4613
+ font-weight: 500;
4614
+ line-height: 1.4;
4539
4615
  }
4540
4616
  @media (max-width: 768px) {
4541
- .Navigation_module_mainBar {
4542
- padding: 13px var(--spacing-md);
4617
+ .NavigationMobile_module_subheading,
4618
+ .NavigationMobile_module_mobileItemLink,
4619
+ .NavigationMobile_module_mobileItemTrigger,
4620
+ .NavigationMobile_module_mobileSubLink {
4621
+ font-size: 18px;
4543
4622
  }
4544
4623
  }
4545
- .Navigation_module_inner {
4546
- display: flex;
4547
- flex-direction: column;
4548
- gap: var(--spacing-sm);
4549
- width: 100%;
4550
- max-width: 1280px;
4551
- margin: 0 auto;
4624
+ .NavigationMobile_module_subheading strong,
4625
+ .NavigationMobile_module_mobileItemLink strong,
4626
+ .NavigationMobile_module_mobileItemTrigger strong,
4627
+ .NavigationMobile_module_mobileSubLink strong {
4628
+ font-weight: 500;
4629
+ color: #000000;
4552
4630
  }
4553
- .Navigation_module_topRow {
4554
- display: flex;
4555
- align-items: center;
4556
- justify-content: space-between;
4557
- gap: var(--spacing-md);
4558
- min-height: 52px;
4631
+ .NavigationMobile_module_body {
4632
+ font-size: 1rem;
4633
+ font-weight: 500;
4634
+ line-height: 1.5;
4559
4635
  }
4560
- @media (max-width: 768px) {
4561
- .Navigation_module_topRow {
4562
- min-height: 0;
4563
- }
4636
+ small,
4637
+ .NavigationMobile_module_small {
4638
+ font-size: 0.875rem;
4639
+ font-weight: 500;
4640
+ line-height: 1.5;
4564
4641
  }
4565
- .Navigation_module_topRow .Navigation_module_upperRight {
4566
- display: flex;
4567
- align-items: center;
4568
- gap: 8px;
4642
+ .NavigationMobile_module_smallest {
4643
+ font-size: 0.75rem;
4644
+ font-weight: 500;
4645
+ line-height: 1.5;
4646
+ }
4647
+ a {
4648
+ color: var(--color-link);
4649
+ text-decoration: none;
4650
+ cursor: pointer;
4651
+ }
4652
+ a:hover {
4653
+ text-decoration: underline;
4569
4654
  }
4570
- .Navigation_module_logoLink {
4655
+ .NavigationMobile_module_logoLink {
4571
4656
  display: inline-flex;
4572
4657
  align-items: center;
4573
4658
  }
4574
- .Navigation_module_logoLink:focus-visible {
4659
+ .NavigationMobile_module_logoLink:focus-visible {
4575
4660
  border-radius: 0.5rem;
4576
4661
  outline: 3px solid var(--color-link);
4577
4662
  }
4578
- .Navigation_module_logo {
4579
- width: 349px;
4580
- height: 48px;
4581
- object-fit: contain;
4582
- }
4583
- .Navigation_module_logoMobile {
4663
+ .NavigationMobile_module_logoMobile,
4664
+ .NavigationMobile_module_mainLogoMobile {
4584
4665
  width: 233px;
4585
4666
  height: 30px;
4586
4667
  object-fit: contain;
4587
4668
  }
4588
- .Navigation_module_hamburger {
4669
+ .NavigationMobile_module_hamburgerButton {
4589
4670
  display: flex;
4590
4671
  align-items: center;
4591
4672
  justify-content: center;
@@ -4597,263 +4678,151 @@ a:hover {
4597
4678
  cursor: pointer;
4598
4679
  -webkit-tap-highlight-color: transparent;
4599
4680
  }
4600
- .Navigation_module_hamburger:focus-visible {
4681
+ .NavigationMobile_module_hamburgerButton:focus-visible {
4601
4682
  border-radius: 0.25rem;
4602
4683
  outline: 3px solid var(--color-link);
4603
4684
  }
4604
- .Navigation_module_bottomRow {
4685
+ .NavigationMobile_module_mobileClose {
4605
4686
  display: flex;
4606
4687
  align-items: center;
4607
- justify-content: space-between;
4608
- gap: var(--spacing-xl);
4609
- min-height: 33px;
4610
- }
4611
- .Navigation_module_navTabs {
4612
- display: flex;
4613
- align-items: center;
4614
- gap: var(--spacing-xl);
4615
- margin: 0;
4688
+ justify-content: center;
4689
+ width: 24px;
4690
+ height: 24px;
4616
4691
  padding: 0;
4617
- list-style: none;
4618
- min-width: 0;
4619
- }
4620
- @media (max-width: 1024px) {
4621
- .Navigation_module_navTabs {
4622
- overflow-x: auto;
4623
- scrollbar-width: none;
4624
- padding: 5px;
4625
- margin: -5px;
4626
- }
4627
- .Navigation_module_navTabs::-webkit-scrollbar {
4628
- display: none;
4629
- }
4630
- }
4631
- .Navigation_module_navTab {
4632
- display: block;
4633
- flex-shrink: 0;
4634
- }
4635
- .Navigation_module_navTabLink {
4636
- display: flex;
4637
- align-items: center;
4638
- gap: var(--spacing-xs);
4639
- height: 33px;
4640
- padding: 0 var(--spacing-xs);
4641
- font-family: var(--font-family-primary);
4642
- font-size: var(--font-size-md);
4643
- font-weight: var(--font-weight-medium);
4644
- line-height: 1.5;
4645
- letter-spacing: -0.08px;
4646
- color: var(--color-black);
4647
- text-decoration: none;
4648
- white-space: nowrap;
4649
- border-bottom: 3px solid transparent;
4650
- transition: border-color 0.2s ease, color 0.3s ease;
4651
- }
4652
- .Navigation_module_navTabLink:hover,
4653
- .Navigation_module_navTabLink:focus {
4654
- text-decoration: none;
4655
- border-bottom-color: var(--color-black);
4656
- }
4657
- .Navigation_module_navTabLink:focus-visible {
4658
- outline: 3px solid var(--color-link);
4659
- outline-offset: 2px;
4660
- border-bottom-color: var(--color-black);
4661
- }
4662
- .Navigation_module_navTabTrigger {
4663
4692
  background: none;
4664
- border-top: none;
4665
- border-left: none;
4666
- border-right: none;
4693
+ border: none;
4667
4694
  cursor: pointer;
4695
+ -webkit-tap-highlight-color: transparent;
4668
4696
  }
4669
- .Navigation_module_navTabTrigger svg {
4670
- transition: transform 0.3s ease, filter 0.3s ease;
4671
- }
4672
- .Navigation_module_navTabTriggerOpen svg {
4673
- transform: scaleY(-1);
4674
- }
4675
- .Navigation_module_navTabActive {
4676
- border-bottom-color: var(--color-black);
4677
- }
4678
- .Navigation_module_navTabActive:hover,
4679
- .Navigation_module_navTabActive:focus {
4680
- border-bottom-color: var(--color-black);
4697
+ .NavigationMobile_module_mobileClose:focus-visible {
4698
+ border-radius: 0.25rem;
4699
+ outline: 3px solid var(--color-link);
4681
4700
  }
4682
- .Navigation_module_dropdownPanel {
4683
- position: absolute;
4684
- left: 0;
4685
- right: 0;
4686
- top: 100%;
4687
- z-index: 1;
4701
+ .NavigationMobile_module_mobileMenu {
4702
+ position: fixed;
4703
+ inset: 0;
4704
+ z-index: 100;
4688
4705
  background-color: var(--color-white);
4689
- padding: var(--spacing-xl) 97px;
4690
- box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.25);
4691
- }
4692
- .Navigation_module_dropdownInner {
4693
- display: flex;
4694
- align-items: center;
4695
- justify-content: center;
4696
- gap: 88px;
4697
- max-width: 1280px;
4698
- margin: 0 auto;
4699
- }
4700
- .Navigation_module_dropdownLinks {
4701
4706
  display: flex;
4702
4707
  flex-direction: column;
4703
- width: 386px;
4704
- flex-shrink: 0;
4705
- margin: 0;
4706
- padding: 0;
4707
- list-style: none;
4708
- }
4709
- .Navigation_module_dropdownLinkItem {
4710
- display: flex;
4711
- }
4712
- .Navigation_module_dropdownLink {
4713
- flex: 1 0 0;
4714
- font-size: var(--font-size-lg);
4715
- font-weight: var(--font-weight-medium);
4716
- line-height: 1.4;
4717
- letter-spacing: -0.2px;
4718
- color: var(--color-gray);
4719
- text-decoration: none;
4720
- transition: color 0.2s ease-in-out;
4721
- }
4722
- .Navigation_module_dropdownLink:hover,
4723
- .Navigation_module_dropdownLink:focus {
4724
- font-weight: var(--font-weight-bold);
4725
- color: var(--color-true-black);
4726
- text-decoration: none;
4708
+ overflow-y: auto;
4709
+ opacity: 0;
4710
+ visibility: hidden;
4711
+ pointer-events: none;
4712
+ transition: opacity 0.3s ease, visibility 0.3s ease;
4727
4713
  }
4728
- .Navigation_module_dropdownLink:focus-visible {
4729
- outline: 3px solid var(--color-link);
4730
- outline-offset: 2px;
4714
+ .NavigationMobile_module_mobileMenuOpen {
4715
+ opacity: 1;
4716
+ visibility: visible;
4717
+ pointer-events: auto;
4731
4718
  }
4732
- .Navigation_module_dropdownDivider {
4733
- width: 2px;
4734
- height: 160px;
4735
- flex-shrink: 0;
4736
- background-color: #ebebeb;
4719
+ .NavigationMobile_module_mobileMenuHeader {
4720
+ display: flex;
4721
+ align-items: center;
4722
+ justify-content: space-between;
4723
+ padding: 13px var(--spacing-md);
4724
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
4737
4725
  }
4738
- .Navigation_module_dropdownInfo {
4726
+ .NavigationMobile_module_mobileMenuItems {
4727
+ flex: 1;
4739
4728
  display: flex;
4740
4729
  flex-direction: column;
4741
4730
  gap: var(--spacing-md);
4742
- width: 682px;
4743
- color: var(--color-true-black);
4731
+ margin: 0;
4732
+ padding: 24px var(--spacing-md);
4733
+ list-style: none;
4744
4734
  }
4745
- .Navigation_module_dropdownTitle {
4746
- color: var(--color-true-black);
4735
+ .NavigationMobile_module_mobileItem {
4736
+ padding-bottom: var(--spacing-sm);
4737
+ border-bottom: 1px solid #ebebeb;
4747
4738
  }
4748
- .Navigation_module_dropdownDescription {
4749
- font-size: var(--font-size-lg);
4750
- font-weight: var(--font-weight-regular);
4751
- line-height: 1.4;
4752
- letter-spacing: -0.2px;
4739
+ .NavigationMobile_module_mobileItemLink {
4740
+ display: block;
4753
4741
  color: var(--color-true-black);
4742
+ text-decoration: none;
4743
+ padding-bottom: var(--spacing-sm);
4744
+ border-bottom: 1px solid #ebebeb;
4745
+ -webkit-tap-highlight-color: transparent;
4746
+ }
4747
+ .NavigationMobile_module_mobileItemLink:hover,
4748
+ .NavigationMobile_module_mobileItemLink:focus-visible {
4749
+ text-decoration: none;
4754
4750
  }
4755
- .Navigation_module_brandBars {
4751
+ .NavigationMobile_module_mobileItemTrigger {
4752
+ font-family: inherit;
4756
4753
  display: flex;
4757
4754
  align-items: center;
4755
+ justify-content: space-between;
4758
4756
  width: 100%;
4759
- overflow: hidden;
4757
+ background: none;
4758
+ border: none;
4759
+ text-align: left;
4760
+ color: var(--color-true-black);
4761
+ cursor: pointer;
4762
+ -webkit-tap-highlight-color: transparent;
4760
4763
  }
4761
- .Navigation_module_brandBar {
4764
+ .NavigationMobile_module_mobileItemChevron {
4762
4765
  display: flex;
4763
- flex-direction: column;
4764
4766
  align-items: center;
4765
- justify-content: center;
4766
- overflow: hidden;
4767
- height: 8px;
4768
- padding: 0 51px;
4769
- transition:
4770
- height 0.35s ease 0.3s,
4771
- padding 0.35s ease 0.3s,
4772
- box-shadow 0.35s ease 0.3s;
4773
- }
4774
- @media (max-width: 768px) {
4775
- .Navigation_module_brandBar {
4776
- padding: 0 var(--spacing-md);
4777
- }
4778
- }
4779
- .Navigation_module_brandBar:first-child {
4780
- align-items: flex-end;
4781
- padding-left: 0;
4782
- }
4783
- .Navigation_module_brandBar:last-child {
4784
- align-items: flex-start;
4785
- padding-right: 0;
4786
- }
4787
- .Navigation_module_brandBar:not(:first-child):not(:last-child) {
4788
- max-width: 360px;
4789
- }
4790
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar {
4791
- height: 95px;
4792
- box-shadow: 0px 0px 4px rgba(54, 54, 54, 0.1);
4793
- padding: 24px 51px;
4794
- transition:
4795
- height 0.35s ease,
4796
- padding 0.35s ease,
4797
- box-shadow 0.35s ease;
4798
- }
4799
- @media (max-width: 768px) {
4800
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar {
4801
- height: 64px;
4802
- padding: var(--spacing-md);
4803
- }
4767
+ transform: rotate(-90deg);
4768
+ transition: transform 0.3s ease;
4804
4769
  }
4805
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:first-child {
4806
- padding-left: 0;
4770
+ .NavigationMobile_module_mobileItemChevronOpen {
4771
+ transform: rotate(0deg);
4807
4772
  }
4808
- @media (max-width: 768px) {
4809
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:first-child {
4810
- padding-left: var(--spacing-md);
4811
- }
4773
+ .NavigationMobile_module_mobileSubItems {
4774
+ display: grid;
4775
+ grid-template-rows: 0fr;
4776
+ transition: grid-template-rows 0.3s ease;
4812
4777
  }
4813
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:last-child {
4814
- padding-right: 0;
4778
+ .NavigationMobile_module_mobileSubItemsOpen {
4779
+ grid-template-rows: 1fr;
4815
4780
  }
4816
- @media (max-width: 768px) {
4817
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:last-child {
4818
- padding-right: var(--spacing-md);
4819
- }
4781
+ .NavigationMobile_module_mobileSubItemsInner {
4782
+ overflow: hidden;
4783
+ display: flex;
4784
+ flex-direction: column;
4785
+ gap: var(--spacing-sm);
4786
+ margin: 0;
4787
+ padding: 0;
4788
+ list-style: none;
4820
4789
  }
4821
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandLogo {
4822
- opacity: 1;
4823
- transition: opacity 0.35s ease;
4790
+ .NavigationMobile_module_mobileSubItemsInner li:first-child .NavigationMobile_module_mobileSubLink {
4791
+ padding-top: var(--spacing-md);
4824
4792
  }
4825
- .Navigation_module_brandLogo {
4826
- max-width: 100%;
4827
- max-height: 70px;
4828
- width: auto;
4829
- height: auto;
4830
- object-fit: contain;
4831
- opacity: 0;
4832
- transition: opacity 0.35s ease 0.3s;
4833
- pointer-events: none;
4793
+ .NavigationMobile_module_mobileSubLink {
4794
+ display: block;
4795
+ color: var(--color-true-black);
4796
+ text-decoration: none;
4797
+ padding-left: var(--spacing-lg);
4798
+ font-weight: var(--font-weight-medium);
4834
4799
  }
4835
- @media (max-width: 768px) {
4836
- .Navigation_module_brandLogo {
4837
- max-height: 40px;
4838
- }
4800
+ .NavigationMobile_module_mobileSubLink:hover,
4801
+ .NavigationMobile_module_mobileSubLink:focus-visible {
4802
+ font-weight: var(--font-weight-bold);
4803
+ text-decoration: none;
4839
4804
  }
4840
- .Navigation_module_lenscrafters {
4841
- flex: 366 0 0;
4842
- background-color: var(--color-lenscrafter-blue);
4805
+ .NavigationMobile_module_mobileSubLinkActive {
4806
+ font-weight: var(--font-weight-bold);
4843
4807
  }
4844
- .Navigation_module_forEyes {
4845
- flex: 360 0 0;
4846
- background-color: var(--color-foreyes-brown);
4808
+ .NavigationMobile_module_mobileMenuCtas {
4809
+ position: sticky;
4810
+ bottom: 0;
4811
+ z-index: 1;
4812
+ display: flex;
4813
+ flex-direction: column;
4814
+ gap: var(--spacing-sm);
4815
+ padding: var(--spacing-md);
4816
+ background-color: var(--color-white);
4847
4817
  }
4848
- .Navigation_module_optical {
4849
- flex: 360 0 0;
4850
- background-color: var(--color-targetoptical-red);
4818
+ .NavigationMobile_module_mobileMenuCtas > * {
4819
+ width: 100%;
4820
+ height: 48px;
4851
4821
  }
4852
- .Navigation_module_pearleVision {
4853
- flex: 354 0 0;
4854
- background-color: var(--color-pearlevision-green);
4822
+ .NavigationMobile_module_mobileMenuCtas > *:first-child {
4823
+ border: 1px solid var(--secondary-states-outlinedBorder, #c2c2c2);
4855
4824
  }
4856
- .Navigation_module_internalMobileMenu {
4825
+ .NavigationMobile_module_internalMobileMenu {
4857
4826
  position: fixed;
4858
4827
  inset: 0;
4859
4828
  z-index: 100;
@@ -4866,38 +4835,22 @@ a:hover {
4866
4835
  pointer-events: none;
4867
4836
  transition: opacity 0.3s ease, visibility 0.3s ease;
4868
4837
  }
4869
- .Navigation_module_internalMobileMenuOpen {
4838
+ .NavigationMobile_module_internalMobileMenuOpen {
4870
4839
  opacity: 1;
4871
4840
  visibility: visible;
4872
4841
  pointer-events: auto;
4873
4842
  }
4874
- .Navigation_module_mobileHeader {
4843
+ .NavigationMobile_module_mobileHeader {
4875
4844
  display: flex;
4876
4845
  align-items: center;
4877
4846
  justify-content: space-between;
4878
4847
  padding: 13px var(--spacing-md);
4879
4848
  }
4880
- .Navigation_module_mobileBrandBars {
4849
+ .NavigationMobile_module_mobileBrandBars {
4881
4850
  display: flex;
4882
4851
  flex-shrink: 0;
4883
4852
  }
4884
- .Navigation_module_mobileClose {
4885
- display: flex;
4886
- align-items: center;
4887
- justify-content: center;
4888
- width: 24px;
4889
- height: 24px;
4890
- padding: 0;
4891
- background: none;
4892
- border: none;
4893
- cursor: pointer;
4894
- -webkit-tap-highlight-color: transparent;
4895
- }
4896
- .Navigation_module_mobileClose:focus-visible {
4897
- border-radius: 0.25rem;
4898
- outline: 3px solid var(--color-link);
4899
- }
4900
- .Navigation_module_mobileItems {
4853
+ .NavigationMobile_module_mobileItems {
4901
4854
  flex: 1;
4902
4855
  display: flex;
4903
4856
  flex-direction: column;
@@ -4905,10 +4858,10 @@ a:hover {
4905
4858
  padding: var(--spacing-lg) var(--spacing-md);
4906
4859
  list-style: none;
4907
4860
  }
4908
- .Navigation_module_internalMobileItem {
4861
+ .NavigationMobile_module_internalMobileItem {
4909
4862
  border-bottom: 1px solid #ebebeb;
4910
4863
  }
4911
- .Navigation_module_internalMobileItemLink {
4864
+ .NavigationMobile_module_internalMobileItemLink {
4912
4865
  display: block;
4913
4866
  padding: var(--spacing-md) 0;
4914
4867
  font-size: var(--font-size-md);
@@ -4917,11 +4870,11 @@ a:hover {
4917
4870
  text-decoration: none;
4918
4871
  -webkit-tap-highlight-color: transparent;
4919
4872
  }
4920
- .Navigation_module_internalMobileItemLink:hover,
4921
- .Navigation_module_internalMobileItemLink:focus-visible {
4873
+ .NavigationMobile_module_internalMobileItemLink:hover,
4874
+ .NavigationMobile_module_internalMobileItemLink:focus-visible {
4922
4875
  text-decoration: none;
4923
4876
  }
4924
- .Navigation_module_internalMobileItemTrigger {
4877
+ .NavigationMobile_module_internalMobileItemTrigger {
4925
4878
  display: flex;
4926
4879
  align-items: center;
4927
4880
  justify-content: space-between;
@@ -4937,24 +4890,24 @@ a:hover {
4937
4890
  cursor: pointer;
4938
4891
  -webkit-tap-highlight-color: transparent;
4939
4892
  }
4940
- .Navigation_module_internalMobileItemChevron {
4893
+ .NavigationMobile_module_internalMobileItemChevron {
4941
4894
  display: flex;
4942
4895
  align-items: center;
4943
4896
  transform: rotate(-90deg);
4944
4897
  transition: transform 0.3s ease;
4945
4898
  }
4946
- .Navigation_module_internalMobileItemChevronOpen {
4899
+ .NavigationMobile_module_internalMobileItemChevronOpen {
4947
4900
  transform: rotate(0deg);
4948
4901
  }
4949
- .Navigation_module_internalMobileSubItems {
4902
+ .NavigationMobile_module_internalMobileSubItems {
4950
4903
  display: grid;
4951
4904
  grid-template-rows: 0fr;
4952
4905
  transition: grid-template-rows 0.3s ease;
4953
4906
  }
4954
- .Navigation_module_internalMobileSubItemsOpen {
4907
+ .NavigationMobile_module_internalMobileSubItemsOpen {
4955
4908
  grid-template-rows: 1fr;
4956
4909
  }
4957
- .Navigation_module_internalMobileSubItemsInner {
4910
+ .NavigationMobile_module_internalMobileSubItemsInner {
4958
4911
  overflow: hidden;
4959
4912
  display: flex;
4960
4913
  flex-direction: column;
@@ -4963,13 +4916,13 @@ a:hover {
4963
4916
  padding: 0;
4964
4917
  list-style: none;
4965
4918
  }
4966
- .Navigation_module_internalMobileSubItemsInner li:first-child .Navigation_module_internalMobileSubLink {
4919
+ .NavigationMobile_module_internalMobileSubItemsInner li:first-child .NavigationMobile_module_internalMobileSubLink {
4967
4920
  padding-top: var(--spacing-sm);
4968
4921
  }
4969
- .Navigation_module_internalMobileSubItemsInner li:last-child .Navigation_module_internalMobileSubLink {
4922
+ .NavigationMobile_module_internalMobileSubItemsInner li:last-child .NavigationMobile_module_internalMobileSubLink {
4970
4923
  padding-bottom: var(--spacing-md);
4971
4924
  }
4972
- .Navigation_module_internalMobileSubLink {
4925
+ .NavigationMobile_module_internalMobileSubLink {
4973
4926
  display: block;
4974
4927
  padding-left: var(--spacing-lg);
4975
4928
  font-size: var(--font-size-md);
@@ -4977,17 +4930,17 @@ a:hover {
4977
4930
  color: var(--color-gray);
4978
4931
  text-decoration: none;
4979
4932
  }
4980
- .Navigation_module_internalMobileSubLink:hover,
4981
- .Navigation_module_internalMobileSubLink:focus-visible {
4933
+ .NavigationMobile_module_internalMobileSubLink:hover,
4934
+ .NavigationMobile_module_internalMobileSubLink:focus-visible {
4982
4935
  font-weight: var(--font-weight-bold);
4983
4936
  color: var(--color-true-black);
4984
4937
  text-decoration: none;
4985
4938
  }
4986
- .Navigation_module_internalMobileSubLinkActive {
4939
+ .NavigationMobile_module_internalMobileSubLinkActive {
4987
4940
  font-weight: var(--font-weight-bold);
4988
4941
  color: var(--color-true-black);
4989
4942
  }
4990
- .Navigation_module_mobileFooter {
4943
+ .NavigationMobile_module_mobileFooter {
4991
4944
  position: sticky;
4992
4945
  bottom: 0;
4993
4946
  z-index: 1;
@@ -4998,6 +4951,131 @@ a:hover {
4998
4951
  background-color: var(--color-white);
4999
4952
  }
5000
4953
 
4954
+ /* src/widgets/Navigation/Navigation.module.scss */
4955
+ .Navigation_module_overlay {
4956
+ position: fixed;
4957
+ inset: 0;
4958
+ background-color: var(--color-black);
4959
+ opacity: 0.5;
4960
+ z-index: 98;
4961
+ pointer-events: none;
4962
+ }
4963
+ .Navigation_module_navigation {
4964
+ position: sticky;
4965
+ top: 0;
4966
+ z-index: 99;
4967
+ width: 100%;
4968
+ background-color: var(--color-white);
4969
+ transition: background-color 0.3s ease;
4970
+ }
4971
+ .Navigation_module_navigation.Navigation_module_dropdownOpen .Navigation_module_mainBar {
4972
+ box-shadow: none;
4973
+ }
4974
+ .Navigation_module_navigation.Navigation_module_variantTransparent {
4975
+ position: fixed;
4976
+ }
4977
+ .Navigation_module_navigation.Navigation_module_transparent {
4978
+ background-color: transparent;
4979
+ --nav-item-color: var(--color-white);
4980
+ --nav-tab-color: var(--color-white);
4981
+ --nav-tab-accent: var(--color-white);
4982
+ --nav-trigger-svg-filter: brightness(0) invert(1);
4983
+ }
4984
+ .Navigation_module_navigation.Navigation_module_transparent .Navigation_module_mainBar {
4985
+ background-color: transparent;
4986
+ box-shadow: none;
4987
+ }
4988
+ .Navigation_module_navigation.Navigation_module_transparent .Navigation_module_logo {
4989
+ filter: brightness(0) invert(1);
4990
+ transition: filter 0.3s ease;
4991
+ }
4992
+ .Navigation_module_mainBar {
4993
+ width: 100%;
4994
+ background-color: var(--color-white);
4995
+ padding: var(--spacing-md) var(--spacing-7xl);
4996
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
4997
+ transition: background-color 0.3s ease, box-shadow 0.3s ease;
4998
+ }
4999
+ @media (max-width: 768px) {
5000
+ .Navigation_module_mainBar {
5001
+ padding: 13px var(--spacing-md);
5002
+ }
5003
+ }
5004
+ .Navigation_module_inner {
5005
+ display: flex;
5006
+ flex-direction: column;
5007
+ gap: var(--spacing-sm);
5008
+ width: 100%;
5009
+ max-width: 1280px;
5010
+ margin: 0 auto;
5011
+ }
5012
+ .Navigation_module_topRow {
5013
+ display: flex;
5014
+ align-items: center;
5015
+ justify-content: space-between;
5016
+ gap: var(--spacing-md);
5017
+ min-height: 52px;
5018
+ }
5019
+ @media (max-width: 768px) {
5020
+ .Navigation_module_topRow {
5021
+ min-height: 0;
5022
+ }
5023
+ }
5024
+ .Navigation_module_topRow .Navigation_module_upperRight {
5025
+ display: flex;
5026
+ align-items: center;
5027
+ gap: 8px;
5028
+ }
5029
+ .Navigation_module_logo {
5030
+ width: 349px;
5031
+ height: 48px;
5032
+ object-fit: contain;
5033
+ }
5034
+ .Navigation_module_logoMobile {
5035
+ width: 233px;
5036
+ height: 30px;
5037
+ object-fit: contain;
5038
+ }
5039
+ .Navigation_module_hamburger {
5040
+ display: flex;
5041
+ align-items: center;
5042
+ justify-content: center;
5043
+ width: 24px;
5044
+ height: 24px;
5045
+ padding: 0;
5046
+ background: none;
5047
+ border: none;
5048
+ cursor: pointer;
5049
+ -webkit-tap-highlight-color: transparent;
5050
+ }
5051
+ .Navigation_module_hamburger:focus-visible {
5052
+ border-radius: 0.25rem;
5053
+ outline: 3px solid var(--color-link);
5054
+ }
5055
+ .Navigation_module_hamburgerButton {
5056
+ display: flex;
5057
+ align-items: center;
5058
+ justify-content: center;
5059
+ width: 24px;
5060
+ height: 24px;
5061
+ padding: 0;
5062
+ background: none;
5063
+ border: none;
5064
+ cursor: pointer;
5065
+ -webkit-tap-highlight-color: transparent;
5066
+ }
5067
+ .Navigation_module_hamburgerButton:focus-visible {
5068
+ border-radius: 0.25rem;
5069
+ outline: 3px solid var(--color-link);
5070
+ }
5071
+ .Navigation_module_bottomRow {
5072
+ display: flex;
5073
+ align-items: center;
5074
+ justify-content: space-between;
5075
+ gap: var(--spacing-xl);
5076
+ min-height: 33px;
5077
+ }
5078
+
5001
5079
  /* src/widgets/PracticePathCards/PracticePathCards.module.scss */
5002
5080
  .PracticePathCards_module_practice-path-cards {
5003
5081
  display: block;
@@ -5712,7 +5790,7 @@ a:hover {
5712
5790
  }
5713
5791
  }
5714
5792
  .TextBody_module_textBody .TextBody_module_title {
5715
- margin-bottom: var(--spacing-xl);
5793
+ margin-bottom: var(--spacing-xs);
5716
5794
  color: var(--color-black);
5717
5795
  }
5718
5796
  @media (max-width: 768px) {