@digital-b2c/coreui-kit 0.16.3 → 0.17.1

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;
@@ -481,6 +497,35 @@ a:hover {
481
497
  border-width: 1px 1px 0 1px;
482
498
  border-color: var(--color-light-gray-2);
483
499
  }
500
+ .Button_module_button.Button_module_textmenu {
501
+ justify-content: flex-start;
502
+ width: fit-content;
503
+ padding: 0;
504
+ color: var(--color-black);
505
+ letter-spacing: -0.2px;
506
+ border-radius: 0;
507
+ background: transparent;
508
+ border: none;
509
+ }
510
+ @media (max-width: 768px) {
511
+ .Button_module_button.Button_module_textmenu {
512
+ letter-spacing: 0;
513
+ }
514
+ }
515
+ .Button_module_button.Button_module_textmenu:hover,
516
+ .Button_module_button.Button_module_textmenu:active,
517
+ .Button_module_button.Button_module_textmenu:focus-visible {
518
+ background: transparent;
519
+ }
520
+ .Button_module_button.Button_module_textmenu:hover,
521
+ .Button_module_button.Button_module_textmenu:focus-visible {
522
+ text-decoration: underline;
523
+ text-underline-position: from-font;
524
+ }
525
+ .Button_module_button.Button_module_textmenu:focus-visible {
526
+ outline: 3px solid var(--color-link);
527
+ outline-offset: 4px;
528
+ }
484
529
  .Button_module_button .Button_module_icon,
485
530
  .Button_module_button .Button_module_logo {
486
531
  width: 24px;
@@ -4096,7 +4141,194 @@ a:hover {
4096
4141
  }
4097
4142
  }
4098
4143
 
4099
- /* src/widgets/Navigation/Navigation.module.scss */
4144
+ /* src/widgets/Navigation/NavigationLogo.module.scss */
4145
+ .NavigationLogo_module_mainLogoLink {
4146
+ display: inline-flex;
4147
+ align-items: center;
4148
+ }
4149
+ .NavigationLogo_module_mainLogoLink:focus-visible {
4150
+ border-radius: 0.5rem;
4151
+ outline: 3px solid var(--color-link);
4152
+ }
4153
+
4154
+ /* src/widgets/Navigation/NavigationBrandBars.module.scss */
4155
+ .NavigationBrandBars_module_brandBars {
4156
+ display: flex;
4157
+ align-items: center;
4158
+ width: 100%;
4159
+ overflow: hidden;
4160
+ }
4161
+ .NavigationBrandBars_module_brandBar {
4162
+ display: flex;
4163
+ flex-direction: column;
4164
+ align-items: center;
4165
+ justify-content: center;
4166
+ overflow: hidden;
4167
+ height: 8px;
4168
+ padding: 0 51px;
4169
+ transition:
4170
+ height 0.35s ease,
4171
+ padding 0.35s ease,
4172
+ box-shadow 0.35s ease;
4173
+ }
4174
+ @media (max-width: 768px) {
4175
+ .NavigationBrandBars_module_brandBar {
4176
+ padding: 0 var(--spacing-md);
4177
+ }
4178
+ }
4179
+ .NavigationBrandBars_module_brandBar:first-child {
4180
+ align-items: flex-end;
4181
+ padding-left: 0;
4182
+ }
4183
+ .NavigationBrandBars_module_brandBar:last-child {
4184
+ align-items: flex-start;
4185
+ padding-right: 0;
4186
+ }
4187
+ .NavigationBrandBars_module_brandBar:not(:first-child):not(:last-child) {
4188
+ max-width: 360px;
4189
+ }
4190
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar {
4191
+ height: 95px;
4192
+ box-shadow: 0 0 4px rgba(54, 54, 54, 0.1);
4193
+ padding: 24px 51px;
4194
+ transition:
4195
+ height 0.35s ease 0.3s,
4196
+ padding 0.35s ease 0.3s,
4197
+ box-shadow 0.35s ease 0.3s;
4198
+ }
4199
+ @media (max-width: 768px) {
4200
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar {
4201
+ height: 64px;
4202
+ padding: var(--spacing-md);
4203
+ }
4204
+ }
4205
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:first-child {
4206
+ padding-left: 0;
4207
+ }
4208
+ @media (max-width: 768px) {
4209
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:first-child {
4210
+ padding-left: var(--spacing-md);
4211
+ }
4212
+ }
4213
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:last-child {
4214
+ padding-right: 0;
4215
+ }
4216
+ @media (max-width: 768px) {
4217
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:last-child {
4218
+ padding-right: var(--spacing-md);
4219
+ }
4220
+ }
4221
+ .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandLogo {
4222
+ opacity: 1;
4223
+ transition: opacity 0.35s ease 0.3s;
4224
+ }
4225
+ .NavigationBrandBars_module_brandLogo {
4226
+ max-width: 100%;
4227
+ max-height: 70px;
4228
+ width: auto;
4229
+ height: auto;
4230
+ object-fit: contain;
4231
+ opacity: 0;
4232
+ transition: opacity 0.35s ease;
4233
+ pointer-events: none;
4234
+ }
4235
+ @media (max-width: 768px) {
4236
+ .NavigationBrandBars_module_brandLogo {
4237
+ max-height: 40px;
4238
+ }
4239
+ }
4240
+ .NavigationBrandBars_module_lenscrafters {
4241
+ flex: 366 0 0;
4242
+ background-color: var(--color-lenscrafter-blue);
4243
+ }
4244
+ .NavigationBrandBars_module_forEyes {
4245
+ flex: 360 0 0;
4246
+ background-color: var(--color-foreyes-brown);
4247
+ }
4248
+ .NavigationBrandBars_module_optical {
4249
+ flex: 360 0 0;
4250
+ background-color: var(--color-targetoptical-red);
4251
+ }
4252
+ .NavigationBrandBars_module_pearleVision {
4253
+ flex: 354 0 0;
4254
+ background-color: var(--color-pearlevision-green);
4255
+ }
4256
+
4257
+ /* src/widgets/Navigation/NavigationDesktop.module.scss */
4258
+ .NavigationDesktop_module_navTabs {
4259
+ display: flex;
4260
+ align-items: center;
4261
+ gap: var(--spacing-xl);
4262
+ margin: 0;
4263
+ padding: 0;
4264
+ list-style: none;
4265
+ min-width: 0;
4266
+ }
4267
+ @media (max-width: 1024px) {
4268
+ .NavigationDesktop_module_navTabs {
4269
+ overflow-x: auto;
4270
+ scrollbar-width: none;
4271
+ padding: 5px;
4272
+ margin: -5px;
4273
+ }
4274
+ .NavigationDesktop_module_navTabs::-webkit-scrollbar {
4275
+ display: none;
4276
+ }
4277
+ }
4278
+ .NavigationDesktop_module_navTab {
4279
+ display: block;
4280
+ flex-shrink: 0;
4281
+ }
4282
+ .NavigationDesktop_module_navTabLink {
4283
+ display: flex;
4284
+ align-items: center;
4285
+ gap: var(--spacing-xs);
4286
+ height: 33px;
4287
+ padding: 0 var(--spacing-xs);
4288
+ font-family: var(--font-family-primary);
4289
+ font-size: var(--font-size-md);
4290
+ font-weight: var(--font-weight-medium);
4291
+ line-height: 1.5;
4292
+ letter-spacing: -0.08px;
4293
+ color: var(--nav-tab-color, var(--color-black));
4294
+ text-decoration: none;
4295
+ white-space: nowrap;
4296
+ border-bottom: 3px solid transparent;
4297
+ transition: border-color 0.2s ease, color 0.3s ease;
4298
+ }
4299
+ .NavigationDesktop_module_navTabLink:hover,
4300
+ .NavigationDesktop_module_navTabLink:focus {
4301
+ text-decoration: none;
4302
+ border-bottom-color: var(--nav-tab-accent, var(--color-black));
4303
+ }
4304
+ .NavigationDesktop_module_navTabLink:focus-visible {
4305
+ outline: 3px solid var(--color-link);
4306
+ outline-offset: 2px;
4307
+ border-bottom-color: var(--nav-tab-accent, var(--color-black));
4308
+ }
4309
+ .NavigationDesktop_module_navTabTrigger {
4310
+ background: none;
4311
+ border-top: none;
4312
+ border-left: none;
4313
+ border-right: none;
4314
+ cursor: pointer;
4315
+ }
4316
+ .NavigationDesktop_module_navTabTrigger svg {
4317
+ filter: var(--nav-trigger-svg-filter, none);
4318
+ transition: transform 0.3s ease, filter 0.3s ease;
4319
+ }
4320
+ .NavigationDesktop_module_navTabTriggerOpen svg {
4321
+ transform: scaleY(-1);
4322
+ }
4323
+ .NavigationDesktop_module_navTabActive {
4324
+ border-bottom-color: var(--nav-tab-accent, var(--color-black));
4325
+ }
4326
+ .NavigationDesktop_module_navTabActive:hover,
4327
+ .NavigationDesktop_module_navTabActive:focus {
4328
+ border-bottom-color: var(--nav-tab-accent, var(--color-black));
4329
+ }
4330
+
4331
+ /* src/widgets/Navigation/NavigationDropdown.module.scss */
4100
4332
  html,
4101
4333
  body {
4102
4334
  font-family: "Instrument Sans", sans-serif;
@@ -4106,102 +4338,93 @@ body {
4106
4338
  color: #4d4d4d;
4107
4339
  }
4108
4340
  h1,
4109
- .Navigation_module_h1 {
4341
+ .NavigationDropdown_module_h1 {
4110
4342
  font-size: 3rem;
4111
4343
  font-weight: 600;
4112
4344
  line-height: 1.17;
4113
4345
  }
4114
4346
  @media (max-width: 768px) {
4115
4347
  h1,
4116
- .Navigation_module_h1 {
4348
+ .NavigationDropdown_module_h1 {
4117
4349
  font-size: 2rem;
4118
4350
  }
4119
4351
  }
4120
4352
  h2,
4121
- .Navigation_module_h2,
4122
- .Navigation_module_dropdownTitle {
4353
+ .NavigationDropdown_module_h2,
4354
+ .NavigationDropdown_module_dropdownTitle {
4123
4355
  font-size: 2.5rem;
4124
4356
  font-weight: 600;
4125
4357
  line-height: 1.2;
4126
4358
  }
4127
4359
  @media (max-width: 768px) {
4128
4360
  h2,
4129
- .Navigation_module_h2,
4130
- .Navigation_module_dropdownTitle {
4361
+ .NavigationDropdown_module_h2,
4362
+ .NavigationDropdown_module_dropdownTitle {
4131
4363
  font-size: 1.5rem;
4132
4364
  }
4133
4365
  }
4134
4366
  h3,
4135
- .Navigation_module_h3 {
4367
+ .NavigationDropdown_module_h3 {
4136
4368
  font-size: 2rem;
4137
4369
  font-weight: 600;
4138
4370
  line-height: 1.25;
4139
4371
  }
4140
4372
  @media (max-width: 768px) {
4141
4373
  h3,
4142
- .Navigation_module_h3 {
4374
+ .NavigationDropdown_module_h3 {
4143
4375
  font-size: 1.25rem;
4144
4376
  }
4145
4377
  }
4146
4378
  h4,
4147
- .Navigation_module_h4 {
4379
+ .NavigationDropdown_module_h4 {
4148
4380
  font-size: 1.5rem;
4149
4381
  font-weight: 600;
4150
4382
  line-height: 1.33;
4151
4383
  }
4152
4384
  @media (max-width: 768px) {
4153
4385
  h4,
4154
- .Navigation_module_h4 {
4386
+ .NavigationDropdown_module_h4 {
4155
4387
  font-size: 18px;
4156
4388
  }
4157
4389
  }
4158
4390
  h5,
4159
- .Navigation_module_h5 {
4391
+ .NavigationDropdown_module_h5 {
4160
4392
  font-size: 1.25rem;
4161
4393
  font-weight: 500;
4162
4394
  line-height: 1.4;
4163
4395
  }
4164
4396
  @media (max-width: 768px) {
4165
4397
  h5,
4166
- .Navigation_module_h5 {
4398
+ .NavigationDropdown_module_h5 {
4167
4399
  font-size: 18px;
4168
4400
  }
4169
4401
  }
4170
- .Navigation_module_subheading,
4171
- .Navigation_module_mobileItemLink,
4172
- .Navigation_module_mobileItemTrigger,
4173
- .Navigation_module_mobileSubLink {
4402
+ .NavigationDropdown_module_subheading {
4174
4403
  font-size: 1.25rem;
4175
4404
  font-weight: 500;
4176
4405
  line-height: 1.4;
4177
4406
  }
4178
4407
  @media (max-width: 768px) {
4179
- .Navigation_module_subheading,
4180
- .Navigation_module_mobileItemLink,
4181
- .Navigation_module_mobileItemTrigger,
4182
- .Navigation_module_mobileSubLink {
4408
+ .NavigationDropdown_module_subheading {
4183
4409
  font-size: 18px;
4184
4410
  }
4185
4411
  }
4186
- .Navigation_module_subheading strong,
4187
- .Navigation_module_mobileItemLink strong,
4188
- .Navigation_module_mobileItemTrigger strong,
4189
- .Navigation_module_mobileSubLink strong {
4412
+ .NavigationDropdown_module_subheading strong {
4190
4413
  font-weight: 500;
4191
4414
  color: #000000;
4192
4415
  }
4193
- .Navigation_module_body {
4416
+ .NavigationDropdown_module_body {
4194
4417
  font-size: 1rem;
4195
4418
  font-weight: 500;
4196
4419
  line-height: 1.5;
4197
4420
  }
4198
4421
  small,
4199
- .Navigation_module_small {
4422
+ .NavigationDropdown_module_small {
4200
4423
  font-size: 0.875rem;
4201
4424
  font-weight: 500;
4202
4425
  line-height: 1.5;
4203
4426
  }
4204
- .Navigation_module_smallest {
4427
+ .NavigationDropdown_module_smallest {
4205
4428
  font-size: 0.75rem;
4206
4429
  font-weight: 500;
4207
4430
  line-height: 1.5;
@@ -4214,349 +4437,214 @@ a {
4214
4437
  a:hover {
4215
4438
  text-decoration: underline;
4216
4439
  }
4217
- .Navigation_module_navigationWrapper {
4218
- position: sticky;
4219
- top: 0;
4220
- z-index: 99;
4221
- width: 100%;
4440
+ .NavigationDropdown_module_dropdownPanel {
4441
+ position: absolute;
4442
+ left: 0;
4443
+ right: 0;
4444
+ top: 100%;
4445
+ z-index: 1;
4222
4446
  background-color: var(--color-white);
4223
- transition: background-color 0.3s ease;
4224
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
4225
- }
4226
- .Navigation_module_navigationWrapper.Navigation_module_dropdownOpen {
4227
- box-shadow: none;
4228
- }
4229
- .Navigation_module_navigationWrapper.Navigation_module_variantTransparent {
4230
- position: fixed;
4231
- }
4232
- .Navigation_module_navigationWrapper.Navigation_module_transparent {
4233
- background-color: transparent;
4234
- --nav-item-color: var(--color-white);
4235
- box-shadow: none;
4236
- }
4237
- .Navigation_module_navigationWrapper.Navigation_module_transparent .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_logo {
4238
- filter: brightness(0) invert(1);
4239
- transition: filter 0.3s ease;
4447
+ padding: var(--spacing-xl) 97px;
4448
+ box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.25);
4240
4449
  }
4241
- .Navigation_module_navigation {
4242
- max-height: 7.5625rem;
4243
- width: 100%;
4450
+ .NavigationDropdown_module_dropdownInner {
4451
+ display: flex;
4452
+ align-items: center;
4453
+ justify-content: center;
4454
+ gap: 88px;
4244
4455
  max-width: 1280px;
4245
4456
  margin: 0 auto;
4246
- padding: var(--spacing-md) 0;
4247
- }
4248
- @media (max-width: 768px) {
4249
- .Navigation_module_navigation {
4250
- padding: 0;
4251
- }
4252
- }
4253
- .Navigation_module_navigation .Navigation_module_upperNav {
4254
- display: flex;
4255
- justify-content: space-between;
4256
- }
4257
- @media (max-width: 768px) {
4258
- .Navigation_module_navigation .Navigation_module_upperNav {
4259
- align-items: center;
4260
- padding: 13px var(--spacing-md);
4261
- }
4262
- }
4263
- .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
4264
- width: 349px;
4265
- height: 45px;
4266
- }
4267
- @media (max-width: 768px) {
4268
- .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
4269
- width: 233px;
4270
- height: 30px;
4271
- }
4272
- }
4273
- .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_upperRight {
4274
- display: flex;
4275
- gap: 8px;
4276
4457
  }
4277
- .Navigation_module_navigation .Navigation_module_lowerNav {
4458
+ .NavigationDropdown_module_dropdownLinks {
4278
4459
  display: flex;
4279
- gap: 32px;
4280
- list-style: none;
4460
+ flex-direction: column;
4461
+ width: 386px;
4462
+ flex-shrink: 0;
4281
4463
  margin: 0;
4282
4464
  padding: 0;
4465
+ list-style: none;
4283
4466
  }
4284
- .Navigation_module_navigation .Navigation_module_lowerNavItem {
4285
- display: block;
4467
+ .NavigationDropdown_module_dropdownLinkItem {
4468
+ display: flex;
4286
4469
  }
4287
- .Navigation_module_overlay {
4288
- position: fixed;
4289
- inset: 0;
4290
- background-color: var(--color-black);
4291
- opacity: 0.5;
4292
- z-index: 98;
4293
- pointer-events: none;
4470
+ .NavigationDropdown_module_dropdownLink {
4471
+ flex: 1 0 0;
4472
+ font-size: var(--font-size-lg);
4473
+ font-weight: var(--font-weight-medium);
4474
+ line-height: 1.4;
4475
+ letter-spacing: -0.2px;
4476
+ color: var(--color-gray);
4477
+ text-decoration: none;
4478
+ transition: color 0.2s ease-in-out;
4294
4479
  }
4295
- .Navigation_module_mainLogoLink {
4296
- display: inline-flex;
4297
- align-items: center;
4480
+ .NavigationDropdown_module_dropdownLink:hover,
4481
+ .NavigationDropdown_module_dropdownLink:focus {
4482
+ font-weight: var(--font-weight-bold);
4483
+ color: var(--color-true-black);
4484
+ text-decoration: none;
4298
4485
  }
4299
- .Navigation_module_mainLogoLink:focus-visible {
4300
- border-radius: 0.5rem;
4486
+ .NavigationDropdown_module_dropdownLink:focus-visible {
4301
4487
  outline: 3px solid var(--color-link);
4488
+ outline-offset: 2px;
4302
4489
  }
4303
- .Navigation_module_dropdownTrigger svg {
4304
- transition: transform 0.3s ease;
4305
- }
4306
- .Navigation_module_dropdownTriggerOpen svg {
4307
- transform: scaleY(-1);
4308
- }
4309
- .Navigation_module_dropdownLinkContainer {
4310
- min-width: 386px;
4311
- }
4312
- .Navigation_module_dropdownLinkSpacer {
4490
+ .NavigationDropdown_module_dropdownLinkSpacer {
4313
4491
  margin-bottom: 16px;
4314
4492
  }
4315
- .Navigation_module_mainLogoMobile {
4316
- width: 233px;
4317
- height: 30px;
4318
- object-fit: contain;
4319
- }
4320
- .Navigation_module_hamburgerButton {
4321
- display: flex;
4322
- align-items: center;
4323
- justify-content: center;
4324
- width: 24px;
4325
- height: 24px;
4326
- background: none;
4327
- border: none;
4328
- padding: 0;
4329
- cursor: pointer;
4330
- -webkit-tap-highlight-color: transparent;
4331
- }
4332
- .Navigation_module_hamburgerButton:focus-visible {
4333
- border-radius: 0.25rem;
4334
- outline: 3px solid var(--color-link);
4335
- }
4336
- .Navigation_module_mobileMenu {
4337
- position: fixed;
4338
- inset: 0;
4339
- z-index: 100;
4340
- background-color: var(--color-white);
4341
- display: flex;
4342
- flex-direction: column;
4343
- overflow-y: auto;
4344
- opacity: 0;
4345
- visibility: hidden;
4346
- pointer-events: none;
4347
- transition: opacity 0.3s ease, visibility 0.3s ease;
4348
- }
4349
- .Navigation_module_mobileMenuOpen {
4350
- opacity: 1;
4351
- visibility: visible;
4352
- pointer-events: auto;
4353
- }
4354
- .Navigation_module_mobileMenuHeader {
4355
- display: flex;
4356
- align-items: center;
4357
- justify-content: space-between;
4358
- padding: 13px var(--spacing-md);
4359
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
4493
+ .NavigationDropdown_module_dropdownDivider {
4494
+ width: 2px;
4495
+ height: 160px;
4496
+ flex-shrink: 0;
4497
+ background-color: #ebebeb;
4360
4498
  }
4361
- .Navigation_module_mobileMenuItems {
4362
- flex: 1;
4499
+ .NavigationDropdown_module_dropdownInfo {
4363
4500
  display: flex;
4364
4501
  flex-direction: column;
4365
4502
  gap: var(--spacing-md);
4366
- margin: 0;
4367
- padding: 24px var(--spacing-md);
4368
- list-style: none;
4369
- }
4370
- .Navigation_module_mobileItem {
4371
- padding-bottom: var(--spacing-sm);
4372
- border-bottom: 1px solid #ebebeb;
4373
- }
4374
- .Navigation_module_mobileItemLink {
4375
- display: block;
4503
+ width: 682px;
4376
4504
  color: var(--color-true-black);
4377
- text-decoration: none;
4378
- padding-bottom: var(--spacing-sm);
4379
- border-bottom: 1px solid #ebebeb;
4380
- -webkit-tap-highlight-color: transparent;
4381
- }
4382
- .Navigation_module_mobileItemLink:hover,
4383
- .Navigation_module_mobileItemLink:focus-visible {
4384
- text-decoration: none;
4385
4505
  }
4386
- .Navigation_module_mobileItemTrigger {
4387
- font-family: inherit;
4388
- display: flex;
4389
- align-items: center;
4390
- justify-content: space-between;
4391
- width: 100%;
4392
- background: none;
4393
- border: none;
4394
- text-align: left;
4506
+ .NavigationDropdown_module_dropdownTitle {
4395
4507
  color: var(--color-true-black);
4396
- cursor: pointer;
4397
- -webkit-tap-highlight-color: transparent;
4398
- }
4399
- .Navigation_module_mobileItemChevron {
4400
- display: flex;
4401
- align-items: center;
4402
- transform: rotate(-90deg);
4403
- transition: transform 0.3s ease;
4404
- }
4405
- .Navigation_module_mobileItemChevronOpen {
4406
- transform: rotate(0deg);
4407
- }
4408
- .Navigation_module_mobileSubItems {
4409
- display: grid;
4410
- grid-template-rows: 0fr;
4411
- transition: grid-template-rows 0.3s ease;
4412
- }
4413
- .Navigation_module_mobileSubItemsOpen {
4414
- grid-template-rows: 1fr;
4415
- }
4416
- .Navigation_module_mobileSubItemsInner {
4417
- overflow: hidden;
4418
- display: flex;
4419
- flex-direction: column;
4420
- gap: var(--spacing-sm);
4421
- margin: 0;
4422
- padding: 0;
4423
- list-style: none;
4424
4508
  }
4425
- .Navigation_module_mobileSubItemsInner li:first-child .Navigation_module_mobileSubLink {
4426
- padding-top: var(--spacing-md);
4427
- }
4428
- .Navigation_module_mobileSubLink {
4429
- display: block;
4509
+ .NavigationDropdown_module_dropdownDescription {
4510
+ font-size: var(--font-size-lg);
4511
+ font-weight: var(--font-weight-regular);
4512
+ line-height: 1.4;
4513
+ letter-spacing: -0.2px;
4430
4514
  color: var(--color-true-black);
4431
- text-decoration: none;
4432
- padding-left: var(--spacing-lg);
4433
- font-weight: var(--font-weight-medium);
4434
- }
4435
- .Navigation_module_mobileSubLink:hover,
4436
- .Navigation_module_mobileSubLink:focus-visible {
4437
- font-weight: var(--font-weight-bold);
4438
- text-decoration: none;
4439
- }
4440
- .Navigation_module_mobileSubLinkActive {
4441
- font-weight: var(--font-weight-bold);
4442
4515
  }
4443
- .Navigation_module_mobileMenuCtas {
4444
- position: sticky;
4445
- bottom: 0;
4446
- z-index: 1;
4447
- display: flex;
4448
- flex-direction: column;
4449
- gap: var(--spacing-sm);
4450
- padding: var(--spacing-md);
4451
- background-color: var(--color-white);
4452
- }
4453
- .Navigation_module_mobileMenuCtas > * {
4454
- width: 100%;
4455
- height: 48px;
4456
- }
4457
- .Navigation_module_mobileMenuCtas > *:first-child {
4458
- border: 1px solid var(--secondary-states-outlinedBorder, #c2c2c2);
4459
- }
4460
- .Navigation_module_Navigation {
4461
- position: sticky;
4462
- top: 0;
4463
- z-index: 99;
4464
- width: 100%;
4465
- background-color: var(--color-white);
4466
- transition: background-color 0.3s ease;
4516
+
4517
+ /* src/widgets/Navigation/NavigationMobile.module.scss */
4518
+ html,
4519
+ body {
4520
+ font-family: "Instrument Sans", sans-serif;
4521
+ font-size: 1rem;
4522
+ font-weight: 500;
4523
+ line-height: 1.5;
4524
+ color: #4d4d4d;
4467
4525
  }
4468
- .Navigation_module_Navigation.Navigation_module_dropdownOpen .Navigation_module_mainBar {
4469
- box-shadow: none;
4526
+ h1,
4527
+ .NavigationMobile_module_h1 {
4528
+ font-size: 3rem;
4529
+ font-weight: 600;
4530
+ line-height: 1.17;
4470
4531
  }
4471
- .Navigation_module_Navigation.Navigation_module_variantTransparent {
4472
- position: fixed;
4532
+ @media (max-width: 768px) {
4533
+ h1,
4534
+ .NavigationMobile_module_h1 {
4535
+ font-size: 2rem;
4536
+ }
4473
4537
  }
4474
- .Navigation_module_Navigation.Navigation_module_transparent {
4475
- background-color: transparent;
4476
- --nav-item-color: var(--color-white);
4538
+ h2,
4539
+ .NavigationMobile_module_h2 {
4540
+ font-size: 2.5rem;
4541
+ font-weight: 600;
4542
+ line-height: 1.2;
4477
4543
  }
4478
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_mainBar {
4479
- background-color: transparent;
4480
- box-shadow: none;
4544
+ @media (max-width: 768px) {
4545
+ h2,
4546
+ .NavigationMobile_module_h2 {
4547
+ font-size: 1.5rem;
4548
+ }
4481
4549
  }
4482
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_logo {
4483
- filter: brightness(0) invert(1);
4484
- transition: filter 0.3s ease;
4550
+ h3,
4551
+ .NavigationMobile_module_h3 {
4552
+ font-size: 2rem;
4553
+ font-weight: 600;
4554
+ line-height: 1.25;
4485
4555
  }
4486
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink {
4487
- color: var(--color-white);
4556
+ @media (max-width: 768px) {
4557
+ h3,
4558
+ .NavigationMobile_module_h3 {
4559
+ font-size: 1.25rem;
4560
+ }
4488
4561
  }
4489
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:hover,
4490
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:focus,
4491
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:focus-visible {
4492
- border-bottom-color: var(--color-white);
4562
+ h4,
4563
+ .NavigationMobile_module_h4 {
4564
+ font-size: 1.5rem;
4565
+ font-weight: 600;
4566
+ line-height: 1.33;
4493
4567
  }
4494
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabTrigger svg {
4495
- filter: brightness(0) invert(1);
4568
+ @media (max-width: 768px) {
4569
+ h4,
4570
+ .NavigationMobile_module_h4 {
4571
+ font-size: 18px;
4572
+ }
4496
4573
  }
4497
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive {
4498
- border-bottom-color: var(--color-white);
4574
+ h5,
4575
+ .NavigationMobile_module_h5 {
4576
+ font-size: 1.25rem;
4577
+ font-weight: 500;
4578
+ line-height: 1.4;
4499
4579
  }
4500
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive:hover,
4501
- .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive:focus {
4502
- border-bottom-color: var(--color-white);
4580
+ @media (max-width: 768px) {
4581
+ h5,
4582
+ .NavigationMobile_module_h5 {
4583
+ font-size: 18px;
4584
+ }
4503
4585
  }
4504
- .Navigation_module_mainBar {
4505
- width: 100%;
4506
- background-color: var(--color-white);
4507
- padding: var(--spacing-md) var(--spacing-7xl);
4508
- box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
4509
- transition: background-color 0.3s ease, box-shadow 0.3s ease;
4586
+ .NavigationMobile_module_subheading,
4587
+ .NavigationMobile_module_mobileItemLink,
4588
+ .NavigationMobile_module_mobileItemTrigger,
4589
+ .NavigationMobile_module_mobileSubLink {
4590
+ font-size: 1.25rem;
4591
+ font-weight: 500;
4592
+ line-height: 1.4;
4510
4593
  }
4511
4594
  @media (max-width: 768px) {
4512
- .Navigation_module_mainBar {
4513
- padding: 13px var(--spacing-md);
4595
+ .NavigationMobile_module_subheading,
4596
+ .NavigationMobile_module_mobileItemLink,
4597
+ .NavigationMobile_module_mobileItemTrigger,
4598
+ .NavigationMobile_module_mobileSubLink {
4599
+ font-size: 18px;
4514
4600
  }
4515
4601
  }
4516
- .Navigation_module_inner {
4517
- display: flex;
4518
- flex-direction: column;
4519
- gap: var(--spacing-sm);
4520
- width: 100%;
4521
- max-width: 1280px;
4522
- margin: 0 auto;
4602
+ .NavigationMobile_module_subheading strong,
4603
+ .NavigationMobile_module_mobileItemLink strong,
4604
+ .NavigationMobile_module_mobileItemTrigger strong,
4605
+ .NavigationMobile_module_mobileSubLink strong {
4606
+ font-weight: 500;
4607
+ color: #000000;
4523
4608
  }
4524
- .Navigation_module_topRow {
4525
- display: flex;
4526
- align-items: center;
4527
- justify-content: space-between;
4528
- gap: var(--spacing-md);
4529
- min-height: 52px;
4609
+ .NavigationMobile_module_body {
4610
+ font-size: 1rem;
4611
+ font-weight: 500;
4612
+ line-height: 1.5;
4530
4613
  }
4531
- @media (max-width: 768px) {
4532
- .Navigation_module_topRow {
4533
- min-height: 0;
4534
- }
4614
+ small,
4615
+ .NavigationMobile_module_small {
4616
+ font-size: 0.875rem;
4617
+ font-weight: 500;
4618
+ line-height: 1.5;
4535
4619
  }
4536
- .Navigation_module_topRow .Navigation_module_upperRight {
4537
- display: flex;
4538
- align-items: center;
4539
- gap: 8px;
4620
+ .NavigationMobile_module_smallest {
4621
+ font-size: 0.75rem;
4622
+ font-weight: 500;
4623
+ line-height: 1.5;
4540
4624
  }
4541
- .Navigation_module_logoLink {
4625
+ a {
4626
+ color: var(--color-link);
4627
+ text-decoration: none;
4628
+ cursor: pointer;
4629
+ }
4630
+ a:hover {
4631
+ text-decoration: underline;
4632
+ }
4633
+ .NavigationMobile_module_logoLink {
4542
4634
  display: inline-flex;
4543
4635
  align-items: center;
4544
4636
  }
4545
- .Navigation_module_logoLink:focus-visible {
4637
+ .NavigationMobile_module_logoLink:focus-visible {
4546
4638
  border-radius: 0.5rem;
4547
4639
  outline: 3px solid var(--color-link);
4548
4640
  }
4549
- .Navigation_module_logo {
4550
- width: 349px;
4551
- height: 48px;
4552
- object-fit: contain;
4553
- }
4554
- .Navigation_module_logoMobile {
4641
+ .NavigationMobile_module_logoMobile,
4642
+ .NavigationMobile_module_mainLogoMobile {
4555
4643
  width: 233px;
4556
4644
  height: 30px;
4557
4645
  object-fit: contain;
4558
4646
  }
4559
- .Navigation_module_hamburger {
4647
+ .NavigationMobile_module_hamburgerButton {
4560
4648
  display: flex;
4561
4649
  align-items: center;
4562
4650
  justify-content: center;
@@ -4568,263 +4656,151 @@ a:hover {
4568
4656
  cursor: pointer;
4569
4657
  -webkit-tap-highlight-color: transparent;
4570
4658
  }
4571
- .Navigation_module_hamburger:focus-visible {
4659
+ .NavigationMobile_module_hamburgerButton:focus-visible {
4572
4660
  border-radius: 0.25rem;
4573
4661
  outline: 3px solid var(--color-link);
4574
4662
  }
4575
- .Navigation_module_bottomRow {
4576
- display: flex;
4577
- align-items: center;
4578
- justify-content: space-between;
4579
- gap: var(--spacing-xl);
4580
- min-height: 33px;
4581
- }
4582
- .Navigation_module_navTabs {
4663
+ .NavigationMobile_module_mobileClose {
4583
4664
  display: flex;
4584
4665
  align-items: center;
4585
- gap: var(--spacing-xl);
4586
- margin: 0;
4666
+ justify-content: center;
4667
+ width: 24px;
4668
+ height: 24px;
4587
4669
  padding: 0;
4588
- list-style: none;
4589
- min-width: 0;
4590
- }
4591
- @media (max-width: 1024px) {
4592
- .Navigation_module_navTabs {
4593
- overflow-x: auto;
4594
- scrollbar-width: none;
4595
- padding: 5px;
4596
- margin: -5px;
4597
- }
4598
- .Navigation_module_navTabs::-webkit-scrollbar {
4599
- display: none;
4600
- }
4601
- }
4602
- .Navigation_module_navTab {
4603
- display: block;
4604
- flex-shrink: 0;
4605
- }
4606
- .Navigation_module_navTabLink {
4607
- display: flex;
4608
- align-items: center;
4609
- gap: var(--spacing-xs);
4610
- height: 33px;
4611
- padding: 0 var(--spacing-xs);
4612
- font-family: var(--font-family-primary);
4613
- font-size: var(--font-size-md);
4614
- font-weight: var(--font-weight-medium);
4615
- line-height: 1.5;
4616
- letter-spacing: -0.08px;
4617
- color: var(--color-black);
4618
- text-decoration: none;
4619
- white-space: nowrap;
4620
- border-bottom: 3px solid transparent;
4621
- transition: border-color 0.2s ease, color 0.3s ease;
4622
- }
4623
- .Navigation_module_navTabLink:hover,
4624
- .Navigation_module_navTabLink:focus {
4625
- text-decoration: none;
4626
- border-bottom-color: var(--color-black);
4627
- }
4628
- .Navigation_module_navTabLink:focus-visible {
4629
- outline: 3px solid var(--color-link);
4630
- outline-offset: 2px;
4631
- border-bottom-color: var(--color-black);
4632
- }
4633
- .Navigation_module_navTabTrigger {
4634
4670
  background: none;
4635
- border-top: none;
4636
- border-left: none;
4637
- border-right: none;
4671
+ border: none;
4638
4672
  cursor: pointer;
4673
+ -webkit-tap-highlight-color: transparent;
4639
4674
  }
4640
- .Navigation_module_navTabTrigger svg {
4641
- transition: transform 0.3s ease, filter 0.3s ease;
4642
- }
4643
- .Navigation_module_navTabTriggerOpen svg {
4644
- transform: scaleY(-1);
4645
- }
4646
- .Navigation_module_navTabActive {
4647
- border-bottom-color: var(--color-black);
4648
- }
4649
- .Navigation_module_navTabActive:hover,
4650
- .Navigation_module_navTabActive:focus {
4651
- border-bottom-color: var(--color-black);
4675
+ .NavigationMobile_module_mobileClose:focus-visible {
4676
+ border-radius: 0.25rem;
4677
+ outline: 3px solid var(--color-link);
4652
4678
  }
4653
- .Navigation_module_dropdownPanel {
4654
- position: absolute;
4655
- left: 0;
4656
- right: 0;
4657
- top: 100%;
4658
- z-index: 1;
4679
+ .NavigationMobile_module_mobileMenu {
4680
+ position: fixed;
4681
+ inset: 0;
4682
+ z-index: 100;
4659
4683
  background-color: var(--color-white);
4660
- padding: var(--spacing-xl) 97px;
4661
- box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.25);
4684
+ display: flex;
4685
+ flex-direction: column;
4686
+ overflow-y: auto;
4687
+ opacity: 0;
4688
+ visibility: hidden;
4689
+ pointer-events: none;
4690
+ transition: opacity 0.3s ease, visibility 0.3s ease;
4691
+ }
4692
+ .NavigationMobile_module_mobileMenuOpen {
4693
+ opacity: 1;
4694
+ visibility: visible;
4695
+ pointer-events: auto;
4662
4696
  }
4663
- .Navigation_module_dropdownInner {
4697
+ .NavigationMobile_module_mobileMenuHeader {
4664
4698
  display: flex;
4665
4699
  align-items: center;
4666
- justify-content: center;
4667
- gap: 88px;
4668
- max-width: 1280px;
4669
- margin: 0 auto;
4700
+ justify-content: space-between;
4701
+ padding: 13px var(--spacing-md);
4702
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
4670
4703
  }
4671
- .Navigation_module_dropdownLinks {
4704
+ .NavigationMobile_module_mobileMenuItems {
4705
+ flex: 1;
4672
4706
  display: flex;
4673
4707
  flex-direction: column;
4674
- width: 386px;
4675
- flex-shrink: 0;
4708
+ gap: var(--spacing-md);
4676
4709
  margin: 0;
4677
- padding: 0;
4710
+ padding: 24px var(--spacing-md);
4678
4711
  list-style: none;
4679
4712
  }
4680
- .Navigation_module_dropdownLinkItem {
4681
- display: flex;
4682
- }
4683
- .Navigation_module_dropdownLink {
4684
- flex: 1 0 0;
4685
- font-size: var(--font-size-lg);
4686
- font-weight: var(--font-weight-medium);
4687
- line-height: 1.4;
4688
- letter-spacing: -0.2px;
4689
- color: var(--color-gray);
4690
- text-decoration: none;
4691
- transition: color 0.2s ease-in-out;
4713
+ .NavigationMobile_module_mobileItem {
4714
+ padding-bottom: var(--spacing-sm);
4715
+ border-bottom: 1px solid #ebebeb;
4692
4716
  }
4693
- .Navigation_module_dropdownLink:hover,
4694
- .Navigation_module_dropdownLink:focus {
4695
- font-weight: var(--font-weight-bold);
4717
+ .NavigationMobile_module_mobileItemLink {
4718
+ display: block;
4696
4719
  color: var(--color-true-black);
4697
4720
  text-decoration: none;
4721
+ padding-bottom: var(--spacing-sm);
4722
+ border-bottom: 1px solid #ebebeb;
4723
+ -webkit-tap-highlight-color: transparent;
4698
4724
  }
4699
- .Navigation_module_dropdownLink:focus-visible {
4700
- outline: 3px solid var(--color-link);
4701
- outline-offset: 2px;
4702
- }
4703
- .Navigation_module_dropdownDivider {
4704
- width: 2px;
4705
- height: 160px;
4706
- flex-shrink: 0;
4707
- background-color: #ebebeb;
4708
- }
4709
- .Navigation_module_dropdownInfo {
4710
- display: flex;
4711
- flex-direction: column;
4712
- gap: var(--spacing-md);
4713
- width: 682px;
4714
- color: var(--color-true-black);
4715
- }
4716
- .Navigation_module_dropdownTitle {
4717
- color: var(--color-true-black);
4718
- }
4719
- .Navigation_module_dropdownDescription {
4720
- font-size: var(--font-size-lg);
4721
- font-weight: var(--font-weight-regular);
4722
- line-height: 1.4;
4723
- letter-spacing: -0.2px;
4724
- color: var(--color-true-black);
4725
- }
4726
- .Navigation_module_brandBars {
4727
- display: flex;
4728
- align-items: center;
4729
- width: 100%;
4730
- overflow: hidden;
4731
- }
4732
- .Navigation_module_brandBar {
4733
- display: flex;
4734
- flex-direction: column;
4735
- align-items: center;
4736
- justify-content: center;
4737
- overflow: hidden;
4738
- height: 8px;
4739
- padding: 0 51px;
4740
- transition:
4741
- height 0.35s ease 0.3s,
4742
- padding 0.35s ease 0.3s,
4743
- box-shadow 0.35s ease 0.3s;
4744
- }
4745
- @media (max-width: 768px) {
4746
- .Navigation_module_brandBar {
4747
- padding: 0 var(--spacing-md);
4748
- }
4749
- }
4750
- .Navigation_module_brandBar:first-child {
4751
- align-items: flex-end;
4752
- padding-left: 0;
4753
- }
4754
- .Navigation_module_brandBar:last-child {
4755
- align-items: flex-start;
4756
- padding-right: 0;
4757
- }
4758
- .Navigation_module_brandBar:not(:first-child):not(:last-child) {
4759
- max-width: 360px;
4725
+ .NavigationMobile_module_mobileItemLink:hover,
4726
+ .NavigationMobile_module_mobileItemLink:focus-visible {
4727
+ text-decoration: none;
4760
4728
  }
4761
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar {
4762
- height: 95px;
4763
- box-shadow: 0px 0px 4px rgba(54, 54, 54, 0.1);
4764
- padding: 24px 51px;
4765
- transition:
4766
- height 0.35s ease,
4767
- padding 0.35s ease,
4768
- box-shadow 0.35s ease;
4729
+ .NavigationMobile_module_mobileItemTrigger {
4730
+ font-family: inherit;
4731
+ display: flex;
4732
+ align-items: center;
4733
+ justify-content: space-between;
4734
+ width: 100%;
4735
+ background: none;
4736
+ border: none;
4737
+ text-align: left;
4738
+ color: var(--color-true-black);
4739
+ cursor: pointer;
4740
+ -webkit-tap-highlight-color: transparent;
4769
4741
  }
4770
- @media (max-width: 768px) {
4771
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar {
4772
- height: 64px;
4773
- padding: var(--spacing-md);
4774
- }
4742
+ .NavigationMobile_module_mobileItemChevron {
4743
+ display: flex;
4744
+ align-items: center;
4745
+ transform: rotate(-90deg);
4746
+ transition: transform 0.3s ease;
4775
4747
  }
4776
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:first-child {
4777
- padding-left: 0;
4748
+ .NavigationMobile_module_mobileItemChevronOpen {
4749
+ transform: rotate(0deg);
4778
4750
  }
4779
- @media (max-width: 768px) {
4780
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:first-child {
4781
- padding-left: var(--spacing-md);
4782
- }
4751
+ .NavigationMobile_module_mobileSubItems {
4752
+ display: grid;
4753
+ grid-template-rows: 0fr;
4754
+ transition: grid-template-rows 0.3s ease;
4783
4755
  }
4784
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:last-child {
4785
- padding-right: 0;
4756
+ .NavigationMobile_module_mobileSubItemsOpen {
4757
+ grid-template-rows: 1fr;
4786
4758
  }
4787
- @media (max-width: 768px) {
4788
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:last-child {
4789
- padding-right: var(--spacing-md);
4790
- }
4759
+ .NavigationMobile_module_mobileSubItemsInner {
4760
+ overflow: hidden;
4761
+ display: flex;
4762
+ flex-direction: column;
4763
+ gap: var(--spacing-sm);
4764
+ margin: 0;
4765
+ padding: 0;
4766
+ list-style: none;
4791
4767
  }
4792
- .Navigation_module_brandBarsUnfolded .Navigation_module_brandLogo {
4793
- opacity: 1;
4794
- transition: opacity 0.35s ease;
4768
+ .NavigationMobile_module_mobileSubItemsInner li:first-child .NavigationMobile_module_mobileSubLink {
4769
+ padding-top: var(--spacing-md);
4795
4770
  }
4796
- .Navigation_module_brandLogo {
4797
- max-width: 100%;
4798
- max-height: 70px;
4799
- width: auto;
4800
- height: auto;
4801
- object-fit: contain;
4802
- opacity: 0;
4803
- transition: opacity 0.35s ease 0.3s;
4804
- pointer-events: none;
4771
+ .NavigationMobile_module_mobileSubLink {
4772
+ display: block;
4773
+ color: var(--color-true-black);
4774
+ text-decoration: none;
4775
+ padding-left: var(--spacing-lg);
4776
+ font-weight: var(--font-weight-medium);
4805
4777
  }
4806
- @media (max-width: 768px) {
4807
- .Navigation_module_brandLogo {
4808
- max-height: 40px;
4809
- }
4778
+ .NavigationMobile_module_mobileSubLink:hover,
4779
+ .NavigationMobile_module_mobileSubLink:focus-visible {
4780
+ font-weight: var(--font-weight-bold);
4781
+ text-decoration: none;
4810
4782
  }
4811
- .Navigation_module_lenscrafters {
4812
- flex: 366 0 0;
4813
- background-color: var(--color-lenscrafter-blue);
4783
+ .NavigationMobile_module_mobileSubLinkActive {
4784
+ font-weight: var(--font-weight-bold);
4814
4785
  }
4815
- .Navigation_module_forEyes {
4816
- flex: 360 0 0;
4817
- background-color: var(--color-foreyes-brown);
4786
+ .NavigationMobile_module_mobileMenuCtas {
4787
+ position: sticky;
4788
+ bottom: 0;
4789
+ z-index: 1;
4790
+ display: flex;
4791
+ flex-direction: column;
4792
+ gap: var(--spacing-sm);
4793
+ padding: var(--spacing-md);
4794
+ background-color: var(--color-white);
4818
4795
  }
4819
- .Navigation_module_optical {
4820
- flex: 360 0 0;
4821
- background-color: var(--color-targetoptical-red);
4796
+ .NavigationMobile_module_mobileMenuCtas > * {
4797
+ width: 100%;
4798
+ height: 48px;
4822
4799
  }
4823
- .Navigation_module_pearleVision {
4824
- flex: 354 0 0;
4825
- background-color: var(--color-pearlevision-green);
4800
+ .NavigationMobile_module_mobileMenuCtas > *:first-child {
4801
+ border: 1px solid var(--secondary-states-outlinedBorder, #c2c2c2);
4826
4802
  }
4827
- .Navigation_module_internalMobileMenu {
4803
+ .NavigationMobile_module_internalMobileMenu {
4828
4804
  position: fixed;
4829
4805
  inset: 0;
4830
4806
  z-index: 100;
@@ -4837,38 +4813,22 @@ a:hover {
4837
4813
  pointer-events: none;
4838
4814
  transition: opacity 0.3s ease, visibility 0.3s ease;
4839
4815
  }
4840
- .Navigation_module_internalMobileMenuOpen {
4816
+ .NavigationMobile_module_internalMobileMenuOpen {
4841
4817
  opacity: 1;
4842
4818
  visibility: visible;
4843
4819
  pointer-events: auto;
4844
4820
  }
4845
- .Navigation_module_mobileHeader {
4821
+ .NavigationMobile_module_mobileHeader {
4846
4822
  display: flex;
4847
4823
  align-items: center;
4848
4824
  justify-content: space-between;
4849
4825
  padding: 13px var(--spacing-md);
4850
4826
  }
4851
- .Navigation_module_mobileBrandBars {
4827
+ .NavigationMobile_module_mobileBrandBars {
4852
4828
  display: flex;
4853
4829
  flex-shrink: 0;
4854
4830
  }
4855
- .Navigation_module_mobileClose {
4856
- display: flex;
4857
- align-items: center;
4858
- justify-content: center;
4859
- width: 24px;
4860
- height: 24px;
4861
- padding: 0;
4862
- background: none;
4863
- border: none;
4864
- cursor: pointer;
4865
- -webkit-tap-highlight-color: transparent;
4866
- }
4867
- .Navigation_module_mobileClose:focus-visible {
4868
- border-radius: 0.25rem;
4869
- outline: 3px solid var(--color-link);
4870
- }
4871
- .Navigation_module_mobileItems {
4831
+ .NavigationMobile_module_mobileItems {
4872
4832
  flex: 1;
4873
4833
  display: flex;
4874
4834
  flex-direction: column;
@@ -4876,10 +4836,10 @@ a:hover {
4876
4836
  padding: var(--spacing-lg) var(--spacing-md);
4877
4837
  list-style: none;
4878
4838
  }
4879
- .Navigation_module_internalMobileItem {
4839
+ .NavigationMobile_module_internalMobileItem {
4880
4840
  border-bottom: 1px solid #ebebeb;
4881
4841
  }
4882
- .Navigation_module_internalMobileItemLink {
4842
+ .NavigationMobile_module_internalMobileItemLink {
4883
4843
  display: block;
4884
4844
  padding: var(--spacing-md) 0;
4885
4845
  font-size: var(--font-size-md);
@@ -4888,11 +4848,11 @@ a:hover {
4888
4848
  text-decoration: none;
4889
4849
  -webkit-tap-highlight-color: transparent;
4890
4850
  }
4891
- .Navigation_module_internalMobileItemLink:hover,
4892
- .Navigation_module_internalMobileItemLink:focus-visible {
4851
+ .NavigationMobile_module_internalMobileItemLink:hover,
4852
+ .NavigationMobile_module_internalMobileItemLink:focus-visible {
4893
4853
  text-decoration: none;
4894
4854
  }
4895
- .Navigation_module_internalMobileItemTrigger {
4855
+ .NavigationMobile_module_internalMobileItemTrigger {
4896
4856
  display: flex;
4897
4857
  align-items: center;
4898
4858
  justify-content: space-between;
@@ -4908,24 +4868,24 @@ a:hover {
4908
4868
  cursor: pointer;
4909
4869
  -webkit-tap-highlight-color: transparent;
4910
4870
  }
4911
- .Navigation_module_internalMobileItemChevron {
4871
+ .NavigationMobile_module_internalMobileItemChevron {
4912
4872
  display: flex;
4913
4873
  align-items: center;
4914
4874
  transform: rotate(-90deg);
4915
4875
  transition: transform 0.3s ease;
4916
4876
  }
4917
- .Navigation_module_internalMobileItemChevronOpen {
4877
+ .NavigationMobile_module_internalMobileItemChevronOpen {
4918
4878
  transform: rotate(0deg);
4919
4879
  }
4920
- .Navigation_module_internalMobileSubItems {
4880
+ .NavigationMobile_module_internalMobileSubItems {
4921
4881
  display: grid;
4922
4882
  grid-template-rows: 0fr;
4923
4883
  transition: grid-template-rows 0.3s ease;
4924
4884
  }
4925
- .Navigation_module_internalMobileSubItemsOpen {
4885
+ .NavigationMobile_module_internalMobileSubItemsOpen {
4926
4886
  grid-template-rows: 1fr;
4927
4887
  }
4928
- .Navigation_module_internalMobileSubItemsInner {
4888
+ .NavigationMobile_module_internalMobileSubItemsInner {
4929
4889
  overflow: hidden;
4930
4890
  display: flex;
4931
4891
  flex-direction: column;
@@ -4934,13 +4894,13 @@ a:hover {
4934
4894
  padding: 0;
4935
4895
  list-style: none;
4936
4896
  }
4937
- .Navigation_module_internalMobileSubItemsInner li:first-child .Navigation_module_internalMobileSubLink {
4897
+ .NavigationMobile_module_internalMobileSubItemsInner li:first-child .NavigationMobile_module_internalMobileSubLink {
4938
4898
  padding-top: var(--spacing-sm);
4939
4899
  }
4940
- .Navigation_module_internalMobileSubItemsInner li:last-child .Navigation_module_internalMobileSubLink {
4900
+ .NavigationMobile_module_internalMobileSubItemsInner li:last-child .NavigationMobile_module_internalMobileSubLink {
4941
4901
  padding-bottom: var(--spacing-md);
4942
4902
  }
4943
- .Navigation_module_internalMobileSubLink {
4903
+ .NavigationMobile_module_internalMobileSubLink {
4944
4904
  display: block;
4945
4905
  padding-left: var(--spacing-lg);
4946
4906
  font-size: var(--font-size-md);
@@ -4948,17 +4908,17 @@ a:hover {
4948
4908
  color: var(--color-gray);
4949
4909
  text-decoration: none;
4950
4910
  }
4951
- .Navigation_module_internalMobileSubLink:hover,
4952
- .Navigation_module_internalMobileSubLink:focus-visible {
4911
+ .NavigationMobile_module_internalMobileSubLink:hover,
4912
+ .NavigationMobile_module_internalMobileSubLink:focus-visible {
4953
4913
  font-weight: var(--font-weight-bold);
4954
4914
  color: var(--color-true-black);
4955
4915
  text-decoration: none;
4956
4916
  }
4957
- .Navigation_module_internalMobileSubLinkActive {
4917
+ .NavigationMobile_module_internalMobileSubLinkActive {
4958
4918
  font-weight: var(--font-weight-bold);
4959
4919
  color: var(--color-true-black);
4960
4920
  }
4961
- .Navigation_module_mobileFooter {
4921
+ .NavigationMobile_module_mobileFooter {
4962
4922
  position: sticky;
4963
4923
  bottom: 0;
4964
4924
  z-index: 1;
@@ -4969,6 +4929,131 @@ a:hover {
4969
4929
  background-color: var(--color-white);
4970
4930
  }
4971
4931
 
4932
+ /* src/widgets/Navigation/Navigation.module.scss */
4933
+ .Navigation_module_overlay {
4934
+ position: fixed;
4935
+ inset: 0;
4936
+ background-color: var(--color-black);
4937
+ opacity: 0.5;
4938
+ z-index: 98;
4939
+ pointer-events: none;
4940
+ }
4941
+ .Navigation_module_navigation {
4942
+ position: sticky;
4943
+ top: 0;
4944
+ z-index: 99;
4945
+ width: 100%;
4946
+ background-color: var(--color-white);
4947
+ transition: background-color 0.3s ease;
4948
+ }
4949
+ .Navigation_module_navigation.Navigation_module_dropdownOpen .Navigation_module_mainBar {
4950
+ box-shadow: none;
4951
+ }
4952
+ .Navigation_module_navigation.Navigation_module_variantTransparent {
4953
+ position: fixed;
4954
+ }
4955
+ .Navigation_module_navigation.Navigation_module_transparent {
4956
+ background-color: transparent;
4957
+ --nav-item-color: var(--color-white);
4958
+ --nav-tab-color: var(--color-white);
4959
+ --nav-tab-accent: var(--color-white);
4960
+ --nav-trigger-svg-filter: brightness(0) invert(1);
4961
+ }
4962
+ .Navigation_module_navigation.Navigation_module_transparent .Navigation_module_mainBar {
4963
+ background-color: transparent;
4964
+ box-shadow: none;
4965
+ }
4966
+ .Navigation_module_navigation.Navigation_module_transparent .Navigation_module_logo {
4967
+ filter: brightness(0) invert(1);
4968
+ transition: filter 0.3s ease;
4969
+ }
4970
+ .Navigation_module_mainBar {
4971
+ width: 100%;
4972
+ background-color: var(--color-white);
4973
+ padding: var(--spacing-md) var(--spacing-7xl);
4974
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
4975
+ transition: background-color 0.3s ease, box-shadow 0.3s ease;
4976
+ }
4977
+ @media (max-width: 768px) {
4978
+ .Navigation_module_mainBar {
4979
+ padding: 13px var(--spacing-md);
4980
+ }
4981
+ }
4982
+ .Navigation_module_inner {
4983
+ display: flex;
4984
+ flex-direction: column;
4985
+ gap: var(--spacing-sm);
4986
+ width: 100%;
4987
+ max-width: 1280px;
4988
+ margin: 0 auto;
4989
+ }
4990
+ .Navigation_module_topRow {
4991
+ display: flex;
4992
+ align-items: center;
4993
+ justify-content: space-between;
4994
+ gap: var(--spacing-md);
4995
+ min-height: 52px;
4996
+ }
4997
+ @media (max-width: 768px) {
4998
+ .Navigation_module_topRow {
4999
+ min-height: 0;
5000
+ }
5001
+ }
5002
+ .Navigation_module_topRow .Navigation_module_upperRight {
5003
+ display: flex;
5004
+ align-items: center;
5005
+ gap: 8px;
5006
+ }
5007
+ .Navigation_module_logo {
5008
+ width: 349px;
5009
+ height: 48px;
5010
+ object-fit: contain;
5011
+ }
5012
+ .Navigation_module_logoMobile {
5013
+ width: 233px;
5014
+ height: 30px;
5015
+ object-fit: contain;
5016
+ }
5017
+ .Navigation_module_hamburger {
5018
+ display: flex;
5019
+ align-items: center;
5020
+ justify-content: center;
5021
+ width: 24px;
5022
+ height: 24px;
5023
+ padding: 0;
5024
+ background: none;
5025
+ border: none;
5026
+ cursor: pointer;
5027
+ -webkit-tap-highlight-color: transparent;
5028
+ }
5029
+ .Navigation_module_hamburger:focus-visible {
5030
+ border-radius: 0.25rem;
5031
+ outline: 3px solid var(--color-link);
5032
+ }
5033
+ .Navigation_module_hamburgerButton {
5034
+ display: flex;
5035
+ align-items: center;
5036
+ justify-content: center;
5037
+ width: 24px;
5038
+ height: 24px;
5039
+ padding: 0;
5040
+ background: none;
5041
+ border: none;
5042
+ cursor: pointer;
5043
+ -webkit-tap-highlight-color: transparent;
5044
+ }
5045
+ .Navigation_module_hamburgerButton:focus-visible {
5046
+ border-radius: 0.25rem;
5047
+ outline: 3px solid var(--color-link);
5048
+ }
5049
+ .Navigation_module_bottomRow {
5050
+ display: flex;
5051
+ align-items: center;
5052
+ justify-content: space-between;
5053
+ gap: var(--spacing-xl);
5054
+ min-height: 33px;
5055
+ }
5056
+
4972
5057
  /* src/widgets/PracticePathCards/PracticePathCards.module.scss */
4973
5058
  .PracticePathCards_module_practice-path-cards {
4974
5059
  display: block;
@@ -5683,7 +5768,7 @@ a:hover {
5683
5768
  }
5684
5769
  }
5685
5770
  .TextBody_module_textBody .TextBody_module_title {
5686
- margin-bottom: var(--spacing-xl);
5771
+ margin-bottom: var(--spacing-xs);
5687
5772
  color: var(--color-black);
5688
5773
  }
5689
5774
  @media (max-width: 768px) {
@@ -6653,4 +6738,59 @@ a:hover {
6653
6738
  opacity: 1;
6654
6739
  }
6655
6740
  }
6741
+
6742
+ /* src/widgets/TwoColTextMenu/TwoColTextMenu.module.scss */
6743
+ .TwoColTextMenu_module_two-col-text-menu {
6744
+ display: block;
6745
+ width: 100%;
6746
+ background-color: var(--color-white);
6747
+ }
6748
+ .TwoColTextMenu_module_container {
6749
+ display: flex;
6750
+ justify-content: center;
6751
+ }
6752
+ .TwoColTextMenu_module_grid {
6753
+ display: grid;
6754
+ grid-template-columns: repeat(2, minmax(0, 1fr));
6755
+ column-gap: clamp(48px, 12vw, 160px);
6756
+ row-gap: var(--spacing-xl);
6757
+ width: 100%;
6758
+ max-width: 778px;
6759
+ }
6760
+ @media (max-width: 768px) {
6761
+ .TwoColTextMenu_module_grid {
6762
+ grid-template-columns: minmax(0, 1fr);
6763
+ row-gap: var(--spacing-4xl);
6764
+ }
6765
+ }
6766
+ .TwoColTextMenu_module_section {
6767
+ display: flex;
6768
+ flex-direction: column;
6769
+ gap: var(--spacing-md);
6770
+ min-width: 0;
6771
+ }
6772
+ .TwoColTextMenu_module_heading {
6773
+ display: flex;
6774
+ align-items: center;
6775
+ padding-bottom: var(--spacing-sm);
6776
+ border-bottom: 1px solid var(--color-light-gray-2);
6777
+ }
6778
+ .TwoColTextMenu_module_title {
6779
+ margin: 0;
6780
+ color: var(--color-black);
6781
+ letter-spacing: -0.24px;
6782
+ }
6783
+ @media (max-width: 768px) {
6784
+ .TwoColTextMenu_module_title {
6785
+ letter-spacing: -0.18px;
6786
+ }
6787
+ }
6788
+ .TwoColTextMenu_module_list {
6789
+ display: flex;
6790
+ flex-direction: column;
6791
+ gap: var(--spacing-sm);
6792
+ margin: 0;
6793
+ padding: 0;
6794
+ list-style: none;
6795
+ }
6656
6796
  /*# sourceMappingURL=index.css.map */