@digital-b2c/coreui-kit 0.14.6 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -13,6 +13,7 @@ html {
13
13
  -webkit-font-smoothing: antialiased;
14
14
  -webkit-text-size-adjust: none;
15
15
  text-size-adjust: none;
16
+ overscroll-behavior: none;
16
17
  }
17
18
  :root {
18
19
  --color-white: #ffffff;
@@ -296,7 +297,7 @@ a:hover {
296
297
  .Button_module_button.Button_module_primary:active {
297
298
  background: #0e0e0e;
298
299
  }
299
- .Button_module_button.Button_module_primary:focus {
300
+ .Button_module_button.Button_module_primary:focus-visible {
300
301
  background:
301
302
  linear-gradient(
302
303
  0deg,
@@ -319,7 +320,7 @@ a:hover {
319
320
  .Button_module_button.Button_module_secondary:active {
320
321
  background: #e3e3e3;
321
322
  }
322
- .Button_module_button.Button_module_secondary:focus {
323
+ .Button_module_button.Button_module_secondary:focus-visible {
323
324
  background: #eeeeee;
324
325
  outline: 4px solid var(--color-link);
325
326
  }
@@ -334,7 +335,7 @@ a:hover {
334
335
  .Button_module_button.Button_module_ghost:active {
335
336
  background: #c3c3c3;
336
337
  }
337
- .Button_module_button.Button_module_ghost:focus {
338
+ .Button_module_button.Button_module_ghost:focus-visible {
338
339
  background: #eeeeee;
339
340
  outline: 4px solid var(--color-link);
340
341
  }
@@ -349,7 +350,7 @@ a:hover {
349
350
  .Button_module_button.Button_module_nofill:active {
350
351
  background: rgba(255, 255, 255, 0.3019607843);
351
352
  }
352
- .Button_module_button.Button_module_nofill:focus {
353
+ .Button_module_button.Button_module_nofill:focus-visible {
353
354
  background: rgba(255, 255, 255, 0.2);
354
355
  outline: 4px solid var(--color-link);
355
356
  }
@@ -364,7 +365,7 @@ a:hover {
364
365
  .Button_module_button.Button_module_nofillblack:active {
365
366
  background: rgba(203, 203, 203, 0.5019607843);
366
367
  }
367
- .Button_module_button.Button_module_nofillblack:focus {
368
+ .Button_module_button.Button_module_nofillblack:focus-visible {
368
369
  background: rgba(229, 229, 229, 0.5019607843);
369
370
  outline: 4px solid var(--color-link);
370
371
  }
@@ -376,6 +377,7 @@ a:hover {
376
377
  padding: 0.2813rem 0.3125rem;
377
378
  border-radius: 0;
378
379
  }
380
+ .Button_module_button.Button_module_navnofillblack:hover,
379
381
  .Button_module_button.Button_module_navnofillblack.Button_module_active {
380
382
  z-index: 1;
381
383
  border-bottom-color: var(--nav-item-color, var(--color-black));
@@ -399,7 +401,7 @@ a:hover {
399
401
  .Button_module_button.Button_module_grey:active {
400
402
  background: rgba(93, 93, 93, 0.9019607843);
401
403
  }
402
- .Button_module_button.Button_module_grey:focus {
404
+ .Button_module_button.Button_module_grey:focus-visible {
403
405
  background: rgba(255, 255, 255, 0.2);
404
406
  outline: 4px solid var(--color-link);
405
407
  }
@@ -428,7 +430,7 @@ a:hover {
428
430
  .Button_module_button.Button_module_shiny:hover {
429
431
  background: rgba(255, 255, 255, 0.2);
430
432
  }
431
- .Button_module_button.Button_module_shiny:focus {
433
+ .Button_module_button.Button_module_shiny:focus-visible {
432
434
  background: transparent;
433
435
  outline: 4px solid var(--color-link);
434
436
  }
@@ -469,7 +471,7 @@ a:hover {
469
471
  var(--color-white) 0%,
470
472
  var(--color-light-gray-2) 830%);
471
473
  }
472
- .Button_module_button.Button_module_tabbutton:focus {
474
+ .Button_module_button.Button_module_tabbutton:focus-visible {
473
475
  border-width: 1px 1px 0 1px;
474
476
  border-color: var(--color-light-gray-2);
475
477
  background: var(--color-white);
@@ -2104,6 +2106,207 @@ a:hover {
2104
2106
  text-align: center;
2105
2107
  }
2106
2108
 
2109
+ /* src/components/Search/Search.module.scss */
2110
+ .Search_module_search {
2111
+ display: flex;
2112
+ align-items: center;
2113
+ justify-content: flex-end;
2114
+ flex-shrink: 0;
2115
+ }
2116
+ .Search_module_searchButton {
2117
+ display: flex;
2118
+ align-items: center;
2119
+ justify-content: center;
2120
+ width: 32px;
2121
+ height: 32px;
2122
+ padding: 0;
2123
+ background: none;
2124
+ border: none;
2125
+ cursor: pointer;
2126
+ color: var(--color-black);
2127
+ border-radius: 0.25rem;
2128
+ transition: background-color 0.2s ease;
2129
+ -webkit-tap-highlight-color: transparent;
2130
+ }
2131
+ .Search_module_searchButton:hover {
2132
+ background-color: var(--color-darkerbg);
2133
+ }
2134
+ .Search_module_searchButton:focus-visible {
2135
+ outline: 3px solid var(--color-link);
2136
+ }
2137
+ .Search_module_searchField {
2138
+ display: flex;
2139
+ align-items: center;
2140
+ gap: var(--spacing-sm);
2141
+ }
2142
+ .Search_module_searchFieldLine {
2143
+ border-bottom: 1px solid var(--color-black);
2144
+ }
2145
+ .Search_module_searchFieldLine .Search_module_searchInput {
2146
+ width: 220px;
2147
+ max-width: 40vw;
2148
+ }
2149
+ .Search_module_searchFieldPill {
2150
+ width: 100%;
2151
+ padding: var(--spacing-sm) var(--spacing-md);
2152
+ border: 1px solid #e0e0e0;
2153
+ border-radius: var(--rounded-full);
2154
+ }
2155
+ .Search_module_searchInput {
2156
+ flex: 1 0 0;
2157
+ min-width: 0;
2158
+ padding: var(--spacing-xs) 0;
2159
+ font-family: var(--font-family-primary);
2160
+ font-size: var(--font-size-md);
2161
+ font-weight: var(--font-weight-medium);
2162
+ color: var(--color-black);
2163
+ background: none;
2164
+ border: none;
2165
+ outline: none;
2166
+ }
2167
+ .Search_module_searchInput::placeholder {
2168
+ color: var(--color-gray);
2169
+ }
2170
+ .Search_module_searchInput::-webkit-search-cancel-button {
2171
+ -webkit-appearance: none;
2172
+ }
2173
+ .Search_module_searchSubmit {
2174
+ display: flex;
2175
+ align-items: center;
2176
+ justify-content: center;
2177
+ flex-shrink: 0;
2178
+ padding: 0;
2179
+ background: none;
2180
+ border: none;
2181
+ cursor: pointer;
2182
+ color: var(--color-black);
2183
+ }
2184
+ .Search_module_searchSubmit:focus-visible {
2185
+ border-radius: 0.25rem;
2186
+ outline: 3px solid var(--color-link);
2187
+ }
2188
+
2189
+ /* src/components/UserMenu/UserMenu.module.scss */
2190
+ .UserMenu_module_userButton {
2191
+ flex-shrink: 0;
2192
+ display: inline-flex;
2193
+ align-items: center;
2194
+ gap: var(--spacing-xs);
2195
+ padding: var(--spacing-sm);
2196
+ background-color: var(--color-white);
2197
+ border: 1px solid #e0e0e0;
2198
+ border-radius: 29px;
2199
+ cursor: pointer;
2200
+ text-decoration: none;
2201
+ -webkit-tap-highlight-color: transparent;
2202
+ }
2203
+ .UserMenu_module_userButton:hover {
2204
+ text-decoration: none;
2205
+ }
2206
+ .UserMenu_module_userButton:focus-visible {
2207
+ outline: 3px solid var(--color-link);
2208
+ }
2209
+ .UserMenu_module_userMenuWrapper {
2210
+ position: relative;
2211
+ display: inline-flex;
2212
+ }
2213
+ .UserMenu_module_fullWidth {
2214
+ width: 100%;
2215
+ }
2216
+ .UserMenu_module_userButton.UserMenu_module_fullWidth {
2217
+ justify-content: flex-start;
2218
+ }
2219
+ .UserMenu_module_fullWidth .UserMenu_module_userButton {
2220
+ width: 100%;
2221
+ justify-content: flex-start;
2222
+ }
2223
+ .UserMenu_module_userChevron {
2224
+ display: inline-flex;
2225
+ align-items: center;
2226
+ transition: transform 0.3s ease;
2227
+ }
2228
+ .UserMenu_module_userChevronOpen {
2229
+ transform: scaleY(-1);
2230
+ }
2231
+ .UserMenu_module_userMenu {
2232
+ position: absolute;
2233
+ top: calc(100% + 8px);
2234
+ right: 0;
2235
+ z-index: 100;
2236
+ min-width: 100%;
2237
+ display: flex;
2238
+ flex-direction: column;
2239
+ gap: var(--spacing-xs);
2240
+ padding: var(--spacing-sm);
2241
+ background-color: var(--color-white);
2242
+ border: 1px solid var(--color-extra-light-gray);
2243
+ border-radius: var(--rounded-md);
2244
+ box-shadow:
2245
+ 0 0 3px rgba(54, 54, 54, 0.1),
2246
+ 0 0 6px rgba(54, 54, 54, 0.09),
2247
+ 0 0 8px rgba(54, 54, 54, 0.05),
2248
+ 0 0 9px rgba(54, 54, 54, 0.01);
2249
+ }
2250
+ .UserMenu_module_userMenuUp {
2251
+ top: auto;
2252
+ bottom: calc(100% + 8px);
2253
+ }
2254
+ .UserMenu_module_userMenuItem {
2255
+ display: flex;
2256
+ align-items: center;
2257
+ width: 100%;
2258
+ padding: var(--spacing-xs) var(--spacing-sm);
2259
+ font-family: var(--font-family-primary);
2260
+ font-size: var(--font-size-md);
2261
+ font-weight: var(--font-weight-medium);
2262
+ line-height: 1.5;
2263
+ letter-spacing: -0.08px;
2264
+ text-align: left;
2265
+ white-space: nowrap;
2266
+ color: var(--color-black);
2267
+ background: none;
2268
+ border: none;
2269
+ border-radius: var(--rounded-sm);
2270
+ text-decoration: none;
2271
+ cursor: pointer;
2272
+ }
2273
+ .UserMenu_module_userMenuItem:hover,
2274
+ .UserMenu_module_userMenuItem:focus {
2275
+ background-color: #eeeeee;
2276
+ text-decoration: none;
2277
+ }
2278
+ .UserMenu_module_userMenuItem:focus-visible {
2279
+ outline: 3px solid var(--color-link);
2280
+ outline-offset: -1px;
2281
+ }
2282
+ .UserMenu_module_userMenuItemDanger {
2283
+ color: #940000;
2284
+ }
2285
+ .UserMenu_module_userMenuItemDanger:hover,
2286
+ .UserMenu_module_userMenuItemDanger:focus-visible {
2287
+ color: #940000;
2288
+ }
2289
+ .UserMenu_module_userAvatar {
2290
+ width: 24px;
2291
+ height: 24px;
2292
+ flex-shrink: 0;
2293
+ }
2294
+ .UserMenu_module_userInner {
2295
+ display: inline-flex;
2296
+ align-items: center;
2297
+ justify-content: center;
2298
+ gap: var(--spacing-sm);
2299
+ padding: 0 var(--spacing-sm);
2300
+ }
2301
+ .UserMenu_module_userLabel {
2302
+ font-size: var(--font-size-md);
2303
+ font-weight: var(--font-weight-medium);
2304
+ line-height: 1.5;
2305
+ letter-spacing: -0.08px;
2306
+ color: var(--color-black);
2307
+ white-space: nowrap;
2308
+ }
2309
+
2107
2310
  /* src/widgets/CardCollection/CardCollection.module.scss */
2108
2311
  .CardCollection_module_card-collection {
2109
2312
  display: block;
@@ -2384,7 +2587,7 @@ a:hover {
2384
2587
  font-weight: var(--font-weight-medium);
2385
2588
  letter-spacing: -0.08px;
2386
2589
  line-height: 1.5;
2387
- color: var(--color-light-gray);
2590
+ color: var(--base-inverted-grey, #cecece);
2388
2591
  }
2389
2592
  .Footer_module_support-subtitle {
2390
2593
  font-size: var(--font-size-md);
@@ -2548,7 +2751,7 @@ a:hover {
2548
2751
  flex-shrink: 1;
2549
2752
  }
2550
2753
  .Footer_module_disclaimer {
2551
- font-size: var(--font-size-xs);
2754
+ font-size: var(--font-size-md);
2552
2755
  color: var(--color-light-gray);
2553
2756
  line-height: 1.5;
2554
2757
  margin-top: var(--spacing-xl);
@@ -2565,7 +2768,7 @@ a:hover {
2565
2768
  }
2566
2769
  }
2567
2770
  .Footer_module_copyright {
2568
- font-size: var(--font-size-xs);
2771
+ font-size: var(--font-size-md);
2569
2772
  color: var(--color-light-gray);
2570
2773
  }
2571
2774
  @media (max-width: 768px) {
@@ -3782,7 +3985,8 @@ h1,
3782
3985
  }
3783
3986
  h2,
3784
3987
  .Navigation_module_h2,
3785
- .Navigation_module_dropdownTitle {
3988
+ .Navigation_module_dropdownTitle,
3989
+ .Navigation_module_internalDropdownTitle {
3786
3990
  font-size: 2.5rem;
3787
3991
  font-weight: 600;
3788
3992
  line-height: 1.2;
@@ -3790,7 +3994,8 @@ h2,
3790
3994
  @media (max-width: 768px) {
3791
3995
  h2,
3792
3996
  .Navigation_module_h2,
3793
- .Navigation_module_dropdownTitle {
3997
+ .Navigation_module_dropdownTitle,
3998
+ .Navigation_module_internalDropdownTitle {
3794
3999
  font-size: 1.5rem;
3795
4000
  }
3796
4001
  }
@@ -3903,7 +4108,7 @@ a:hover {
3903
4108
  --nav-item-color: var(--color-white);
3904
4109
  box-shadow: none;
3905
4110
  }
3906
- .Navigation_module_navigationWrapper.Navigation_module_transparent .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
4111
+ .Navigation_module_navigationWrapper.Navigation_module_transparent .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_logo {
3907
4112
  filter: brightness(0) invert(1);
3908
4113
  transition: filter 0.3s ease;
3909
4114
  }
@@ -3926,17 +4131,9 @@ a:hover {
3926
4131
  @media (max-width: 768px) {
3927
4132
  .Navigation_module_navigation .Navigation_module_upperNav {
3928
4133
  align-items: center;
3929
- padding: 13px 16px;
4134
+ padding: 13px var(--spacing-md);
3930
4135
  }
3931
4136
  }
3932
- .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogoLink {
3933
- display: inline-flex;
3934
- align-items: center;
3935
- }
3936
- .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogoLink:focus-visible {
3937
- border-radius: 0.5rem;
3938
- outline: 3px solid var(--color-link);
3939
- }
3940
4137
  .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
3941
4138
  width: 349px;
3942
4139
  height: 45px;
@@ -3969,6 +4166,14 @@ a:hover {
3969
4166
  z-index: 98;
3970
4167
  pointer-events: none;
3971
4168
  }
4169
+ .Navigation_module_mainLogoLink {
4170
+ display: inline-flex;
4171
+ align-items: center;
4172
+ }
4173
+ .Navigation_module_mainLogoLink:focus-visible {
4174
+ border-radius: 0.5rem;
4175
+ outline: 3px solid var(--color-link);
4176
+ }
3972
4177
  .Navigation_module_dropdownTrigger svg {
3973
4178
  transition: transform 0.3s ease;
3974
4179
  }
@@ -4007,13 +4212,18 @@ a:hover {
4007
4212
  list-style: none;
4008
4213
  border-right: 2px solid #ebebeb;
4009
4214
  transition: 0.2s ease-in-out;
4215
+ max-width: 474px;
4010
4216
  }
4011
4217
  .Navigation_module_dropdownLinkContainer {
4012
4218
  min-width: 386px;
4013
4219
  }
4220
+ .Navigation_module_dropdownLinkSpacer {
4221
+ margin-bottom: 16px;
4222
+ }
4014
4223
  .Navigation_module_dropdownLink {
4015
4224
  display: inline-block;
4016
- white-space: nowrap;
4225
+ white-space: normal;
4226
+ overflow-wrap: break-word;
4017
4227
  color: var(--color-gray);
4018
4228
  text-decoration: none;
4019
4229
  transition: color 0.2s ease-in-out;
@@ -4043,9 +4253,9 @@ a:hover {
4043
4253
  color: var(--color-true-black);
4044
4254
  }
4045
4255
  .Navigation_module_mainLogoMobile {
4046
- display: block;
4047
4256
  width: 233px;
4048
4257
  height: 30px;
4258
+ object-fit: contain;
4049
4259
  }
4050
4260
  .Navigation_module_hamburgerButton {
4051
4261
  display: flex;
@@ -4085,7 +4295,7 @@ a:hover {
4085
4295
  display: flex;
4086
4296
  align-items: center;
4087
4297
  justify-content: space-between;
4088
- padding: 13px 16px;
4298
+ padding: 13px var(--spacing-md);
4089
4299
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
4090
4300
  }
4091
4301
  .Navigation_module_mobileMenuItems {
@@ -4114,6 +4324,7 @@ a:hover {
4114
4324
  text-decoration: none;
4115
4325
  }
4116
4326
  .Navigation_module_mobileItemTrigger {
4327
+ font-family: inherit;
4117
4328
  display: flex;
4118
4329
  align-items: center;
4119
4330
  justify-content: space-between;
@@ -4177,79 +4388,507 @@ a:hover {
4177
4388
  .Navigation_module_mobileMenuCtas > *:first-child {
4178
4389
  border: 1px solid var(--secondary-states-outlinedBorder, #c2c2c2);
4179
4390
  }
4180
-
4181
- /* src/widgets/PracticePathCards/PracticePathCards.module.scss */
4182
- .PracticePathCards_module_practice-path-cards {
4183
- display: block;
4391
+ .Navigation_module_Navigation {
4392
+ position: sticky;
4393
+ top: 0;
4394
+ z-index: 99;
4184
4395
  width: 100%;
4185
4396
  background-color: var(--color-white);
4186
4397
  }
4187
- .PracticePathCards_module_practice-path-cards h2 {
4188
- color: var(--color-black);
4398
+ .Navigation_module_Navigation.Navigation_module_dropdownOpen .Navigation_module_mainBar {
4399
+ box-shadow: none;
4189
4400
  }
4190
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_container {
4191
- display: flex;
4192
- flex-direction: column;
4193
- gap: var(--spacing-xl);
4401
+ .Navigation_module_Navigation.Navigation_module_variantTransparent {
4402
+ position: fixed;
4194
4403
  }
4195
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper {
4196
- display: flex;
4197
- align-items: center;
4198
- justify-content: space-between;
4199
- gap: var(--spacing-xl);
4404
+ .Navigation_module_Navigation.Navigation_module_transparent {
4405
+ background-color: transparent;
4406
+ --nav-item-color: var(--color-white);
4407
+ }
4408
+ .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_mainBar {
4409
+ background-color: transparent;
4410
+ box-shadow: none;
4411
+ }
4412
+ .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_logo {
4413
+ filter: brightness(0) invert(1);
4414
+ transition: filter 0.3s ease;
4415
+ }
4416
+ .Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink {
4417
+ color: var(--color-white);
4418
+ }
4419
+ .Navigation_module_mainBar {
4420
+ width: 100%;
4421
+ background-color: var(--color-white);
4422
+ padding: var(--spacing-md) var(--spacing-7xl);
4423
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
4200
4424
  }
4201
4425
  @media (max-width: 768px) {
4202
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper {
4203
- flex-direction: column;
4204
- }
4205
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper .PracticePathCards_module_ctaWrapper {
4206
- width: 100%;
4207
- padding: 0 var(--spacing-lg);
4208
- }
4209
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper .PracticePathCards_module_ctaWrapper .PracticePathCards_module_cta {
4210
- width: 100%;
4426
+ .Navigation_module_mainBar {
4427
+ padding: 13px var(--spacing-md);
4211
4428
  }
4212
4429
  }
4213
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_content {
4430
+ .Navigation_module_inner {
4214
4431
  display: flex;
4215
4432
  flex-direction: column;
4216
4433
  gap: var(--spacing-sm);
4434
+ width: 100%;
4435
+ max-width: 1280px;
4436
+ margin: 0 auto;
4217
4437
  }
4218
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_cards {
4438
+ .Navigation_module_topRow {
4219
4439
  display: flex;
4220
- flex-direction: row;
4221
- overflow: hidden;
4222
- border-radius: 16px;
4223
- justify-content: center;
4440
+ align-items: center;
4441
+ justify-content: space-between;
4442
+ gap: var(--spacing-md);
4443
+ min-height: 52px;
4224
4444
  }
4225
4445
  @media (max-width: 768px) {
4226
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_cards {
4227
- flex-direction: column;
4446
+ .Navigation_module_topRow {
4447
+ min-height: 0;
4228
4448
  }
4229
4449
  }
4230
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_card {
4231
- width: 33.333%;
4450
+ .Navigation_module_topRow .Navigation_module_upperRight {
4451
+ display: flex;
4452
+ align-items: center;
4453
+ gap: 8px;
4232
4454
  }
4233
- @media (max-width: 768px) {
4234
- .PracticePathCards_module_practice-path-cards .PracticePathCards_module_card {
4235
- width: 100%;
4236
- }
4455
+ .Navigation_module_logoLink {
4456
+ display: inline-flex;
4457
+ align-items: center;
4237
4458
  }
4238
-
4239
- /* src/widgets/Teaser5050With3Text/Teaser5050With3Text.module.scss */
4240
- .Teaser5050With3Text_module_teaser5050-3text {
4241
- display: block;
4242
- width: 100%;
4243
- background-color: var(--color-white);
4459
+ .Navigation_module_logoLink:focus-visible {
4460
+ border-radius: 0.5rem;
4461
+ outline: 3px solid var(--color-link);
4244
4462
  }
4245
- .Teaser5050With3Text_module_teaser5050-3text .Teaser5050With3Text_module_container {
4246
- display: flex;
4247
- flex-direction: column;
4248
- gap: var(--spacing-xl);
4463
+ .Navigation_module_logo {
4464
+ width: 349px;
4465
+ height: 48px;
4466
+ object-fit: contain;
4249
4467
  }
4250
- .Teaser5050With3Text_module_teaser5050-3text .Teaser5050With3Text_module_content {
4468
+ .Navigation_module_logoMobile {
4469
+ width: 233px;
4470
+ height: 30px;
4471
+ object-fit: contain;
4472
+ }
4473
+ .Navigation_module_hamburger {
4251
4474
  display: flex;
4252
- flex-direction: row;
4475
+ align-items: center;
4476
+ justify-content: center;
4477
+ width: 24px;
4478
+ height: 24px;
4479
+ padding: 0;
4480
+ background: none;
4481
+ border: none;
4482
+ cursor: pointer;
4483
+ -webkit-tap-highlight-color: transparent;
4484
+ }
4485
+ .Navigation_module_hamburger:focus-visible {
4486
+ border-radius: 0.25rem;
4487
+ outline: 3px solid var(--color-link);
4488
+ }
4489
+ .Navigation_module_bottomRow {
4490
+ display: flex;
4491
+ align-items: center;
4492
+ justify-content: space-between;
4493
+ gap: var(--spacing-xl);
4494
+ min-height: 33px;
4495
+ }
4496
+ .Navigation_module_navTabs {
4497
+ display: flex;
4498
+ align-items: center;
4499
+ gap: var(--spacing-xl);
4500
+ margin: 0;
4501
+ padding: 0;
4502
+ list-style: none;
4503
+ min-width: 0;
4504
+ }
4505
+ @media (max-width: 1024px) {
4506
+ .Navigation_module_navTabs {
4507
+ overflow-x: auto;
4508
+ scrollbar-width: none;
4509
+ }
4510
+ .Navigation_module_navTabs::-webkit-scrollbar {
4511
+ display: none;
4512
+ }
4513
+ }
4514
+ .Navigation_module_navTab {
4515
+ display: block;
4516
+ flex-shrink: 0;
4517
+ }
4518
+ .Navigation_module_navTabLink {
4519
+ display: flex;
4520
+ align-items: center;
4521
+ gap: var(--spacing-xs);
4522
+ height: 33px;
4523
+ padding: 0 var(--spacing-xs);
4524
+ font-family: var(--font-family-primary);
4525
+ font-size: var(--font-size-md);
4526
+ font-weight: var(--font-weight-medium);
4527
+ line-height: 1.5;
4528
+ letter-spacing: -0.08px;
4529
+ color: var(--color-black);
4530
+ text-decoration: none;
4531
+ white-space: nowrap;
4532
+ border-bottom: 3px solid transparent;
4533
+ transition: border-color 0.2s ease;
4534
+ }
4535
+ .Navigation_module_navTabLink:hover,
4536
+ .Navigation_module_navTabLink:focus {
4537
+ text-decoration: none;
4538
+ border-bottom-color: var(--color-black);
4539
+ }
4540
+ .Navigation_module_navTabLink:focus-visible {
4541
+ outline: 3px solid var(--color-link);
4542
+ outline-offset: 2px;
4543
+ border-bottom-color: var(--color-black);
4544
+ }
4545
+ .Navigation_module_navTabTrigger {
4546
+ background: none;
4547
+ border-top: none;
4548
+ border-left: none;
4549
+ border-right: none;
4550
+ cursor: pointer;
4551
+ }
4552
+ .Navigation_module_navTabTrigger svg {
4553
+ transition: transform 0.3s ease;
4554
+ }
4555
+ .Navigation_module_navTabTriggerOpen svg {
4556
+ transform: scaleY(-1);
4557
+ }
4558
+ .Navigation_module_navTabActive {
4559
+ border-bottom-color: var(--color-black);
4560
+ }
4561
+ .Navigation_module_navTabActive:hover,
4562
+ .Navigation_module_navTabActive:focus {
4563
+ border-bottom-color: var(--color-black);
4564
+ }
4565
+ .Navigation_module_internalDropdownPanel {
4566
+ position: absolute;
4567
+ left: 0;
4568
+ right: 0;
4569
+ top: 100%;
4570
+ z-index: 1;
4571
+ background-color: var(--color-white);
4572
+ padding: var(--spacing-xl) 97px;
4573
+ box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.25);
4574
+ }
4575
+ .Navigation_module_internalDropdownInner {
4576
+ display: flex;
4577
+ align-items: center;
4578
+ justify-content: center;
4579
+ gap: 88px;
4580
+ max-width: 1280px;
4581
+ margin: 0 auto;
4582
+ }
4583
+ .Navigation_module_internalDropdownLinks {
4584
+ display: flex;
4585
+ flex-direction: column;
4586
+ width: 386px;
4587
+ flex-shrink: 0;
4588
+ margin: 0;
4589
+ padding: 0;
4590
+ list-style: none;
4591
+ }
4592
+ .Navigation_module_dropdownLinkItem {
4593
+ display: flex;
4594
+ }
4595
+ .Navigation_module_internalDropdownLink {
4596
+ flex: 1 0 0;
4597
+ font-size: var(--font-size-lg);
4598
+ font-weight: var(--font-weight-medium);
4599
+ line-height: 1.4;
4600
+ letter-spacing: -0.2px;
4601
+ color: var(--color-gray);
4602
+ text-decoration: none;
4603
+ transition: color 0.2s ease-in-out;
4604
+ }
4605
+ .Navigation_module_internalDropdownLink:hover,
4606
+ .Navigation_module_internalDropdownLink:focus {
4607
+ font-weight: var(--font-weight-bold);
4608
+ color: var(--color-true-black);
4609
+ text-decoration: none;
4610
+ }
4611
+ .Navigation_module_internalDropdownLink:focus-visible {
4612
+ outline: 3px solid var(--color-link);
4613
+ outline-offset: 2px;
4614
+ }
4615
+ .Navigation_module_dropdownDivider {
4616
+ width: 2px;
4617
+ height: 160px;
4618
+ flex-shrink: 0;
4619
+ background-color: #ebebeb;
4620
+ }
4621
+ .Navigation_module_internalDropdownInfo {
4622
+ display: flex;
4623
+ flex-direction: column;
4624
+ gap: var(--spacing-md);
4625
+ width: 682px;
4626
+ color: var(--color-true-black);
4627
+ }
4628
+ .Navigation_module_internalDropdownTitle {
4629
+ color: var(--color-true-black);
4630
+ }
4631
+ .Navigation_module_internalDropdownDescription {
4632
+ font-size: var(--font-size-lg);
4633
+ font-weight: var(--font-weight-regular);
4634
+ line-height: 1.4;
4635
+ letter-spacing: -0.2px;
4636
+ color: var(--color-true-black);
4637
+ }
4638
+ .Navigation_module_brandBars {
4639
+ display: flex;
4640
+ align-items: center;
4641
+ width: 100%;
4642
+ overflow: hidden;
4643
+ }
4644
+ .Navigation_module_brandBar {
4645
+ display: flex;
4646
+ align-items: center;
4647
+ justify-content: center;
4648
+ height: 8px;
4649
+ transition: height 0.35s ease;
4650
+ }
4651
+ .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar {
4652
+ height: 95px;
4653
+ box-shadow: 0px 0px 4px rgba(54, 54, 54, 0.1);
4654
+ }
4655
+ .Navigation_module_brandBarsUnfolded .Navigation_module_brandLogo {
4656
+ opacity: 1;
4657
+ }
4658
+ .Navigation_module_brandLogo {
4659
+ max-width: 80%;
4660
+ max-height: 70px;
4661
+ width: auto;
4662
+ height: auto;
4663
+ object-fit: contain;
4664
+ opacity: 0;
4665
+ transition: opacity 0.35s ease;
4666
+ pointer-events: none;
4667
+ }
4668
+ .Navigation_module_lenscrafters {
4669
+ flex: 366 0 0;
4670
+ background-color: var(--color-lenscrafter-blue);
4671
+ }
4672
+ .Navigation_module_forEyes {
4673
+ flex: 360 0 0;
4674
+ background-color: var(--color-foreyes-brown);
4675
+ }
4676
+ .Navigation_module_optical {
4677
+ flex: 360 0 0;
4678
+ background-color: var(--color-targetoptical-red);
4679
+ }
4680
+ .Navigation_module_pearleVision {
4681
+ flex: 354 0 0;
4682
+ background-color: var(--color-pearlevision-green);
4683
+ }
4684
+ .Navigation_module_internalMobileMenu {
4685
+ position: fixed;
4686
+ inset: 0;
4687
+ z-index: 100;
4688
+ display: flex;
4689
+ flex-direction: column;
4690
+ background-color: var(--color-white);
4691
+ overflow-y: auto;
4692
+ opacity: 0;
4693
+ visibility: hidden;
4694
+ pointer-events: none;
4695
+ transition: opacity 0.3s ease, visibility 0.3s ease;
4696
+ }
4697
+ .Navigation_module_internalMobileMenuOpen {
4698
+ opacity: 1;
4699
+ visibility: visible;
4700
+ pointer-events: auto;
4701
+ }
4702
+ .Navigation_module_mobileHeader {
4703
+ display: flex;
4704
+ align-items: center;
4705
+ justify-content: space-between;
4706
+ padding: 13px var(--spacing-md);
4707
+ }
4708
+ .Navigation_module_mobileClose {
4709
+ display: flex;
4710
+ align-items: center;
4711
+ justify-content: center;
4712
+ width: 24px;
4713
+ height: 24px;
4714
+ padding: 0;
4715
+ background: none;
4716
+ border: none;
4717
+ cursor: pointer;
4718
+ -webkit-tap-highlight-color: transparent;
4719
+ }
4720
+ .Navigation_module_mobileClose:focus-visible {
4721
+ border-radius: 0.25rem;
4722
+ outline: 3px solid var(--color-link);
4723
+ }
4724
+ .Navigation_module_mobileBrandBars {
4725
+ display: flex;
4726
+ width: 100%;
4727
+ }
4728
+ .Navigation_module_mobileItems {
4729
+ flex: 1;
4730
+ display: flex;
4731
+ flex-direction: column;
4732
+ margin: 0;
4733
+ padding: var(--spacing-lg) var(--spacing-md);
4734
+ list-style: none;
4735
+ }
4736
+ .Navigation_module_internalMobileItem {
4737
+ border-bottom: 1px solid #ebebeb;
4738
+ }
4739
+ .Navigation_module_internalMobileItemLink {
4740
+ display: block;
4741
+ padding: var(--spacing-md) 0;
4742
+ font-size: var(--font-size-md);
4743
+ font-weight: var(--font-weight-medium);
4744
+ color: var(--color-black);
4745
+ text-decoration: none;
4746
+ -webkit-tap-highlight-color: transparent;
4747
+ }
4748
+ .Navigation_module_internalMobileItemLink:hover,
4749
+ .Navigation_module_internalMobileItemLink:focus-visible {
4750
+ text-decoration: none;
4751
+ }
4752
+ .Navigation_module_internalMobileItemTrigger {
4753
+ display: flex;
4754
+ align-items: center;
4755
+ justify-content: space-between;
4756
+ width: 100%;
4757
+ padding: var(--spacing-md) 0;
4758
+ font-family: var(--font-family-primary);
4759
+ font-size: var(--font-size-md);
4760
+ font-weight: var(--font-weight-medium);
4761
+ text-align: left;
4762
+ color: var(--color-black);
4763
+ background: none;
4764
+ border: none;
4765
+ cursor: pointer;
4766
+ -webkit-tap-highlight-color: transparent;
4767
+ }
4768
+ .Navigation_module_internalMobileItemChevron {
4769
+ display: flex;
4770
+ align-items: center;
4771
+ transform: rotate(-90deg);
4772
+ transition: transform 0.3s ease;
4773
+ }
4774
+ .Navigation_module_internalMobileItemChevronOpen {
4775
+ transform: rotate(0deg);
4776
+ }
4777
+ .Navigation_module_internalMobileSubItems {
4778
+ display: grid;
4779
+ grid-template-rows: 0fr;
4780
+ transition: grid-template-rows 0.3s ease;
4781
+ }
4782
+ .Navigation_module_internalMobileSubItemsOpen {
4783
+ grid-template-rows: 1fr;
4784
+ }
4785
+ .Navigation_module_internalMobileSubItemsInner {
4786
+ overflow: hidden;
4787
+ display: flex;
4788
+ flex-direction: column;
4789
+ gap: var(--spacing-sm);
4790
+ margin: 0;
4791
+ padding: 0;
4792
+ list-style: none;
4793
+ }
4794
+ .Navigation_module_internalMobileSubItemsInner li:first-child .Navigation_module_internalMobileSubLink {
4795
+ padding-top: var(--spacing-sm);
4796
+ }
4797
+ .Navigation_module_internalMobileSubItemsInner li:last-child .Navigation_module_internalMobileSubLink {
4798
+ padding-bottom: var(--spacing-md);
4799
+ }
4800
+ .Navigation_module_internalMobileSubLink {
4801
+ display: block;
4802
+ padding-left: var(--spacing-lg);
4803
+ font-size: var(--font-size-md);
4804
+ font-weight: var(--font-weight-regular);
4805
+ color: var(--color-gray);
4806
+ text-decoration: none;
4807
+ }
4808
+ .Navigation_module_internalMobileSubLink:hover,
4809
+ .Navigation_module_internalMobileSubLink:focus-visible {
4810
+ color: var(--color-true-black);
4811
+ text-decoration: none;
4812
+ }
4813
+ .Navigation_module_mobileFooter {
4814
+ display: flex;
4815
+ flex-direction: column;
4816
+ gap: var(--spacing-md);
4817
+ padding: var(--spacing-md);
4818
+ }
4819
+
4820
+ /* src/widgets/PracticePathCards/PracticePathCards.module.scss */
4821
+ .PracticePathCards_module_practice-path-cards {
4822
+ display: block;
4823
+ width: 100%;
4824
+ background-color: var(--color-white);
4825
+ }
4826
+ .PracticePathCards_module_practice-path-cards h2 {
4827
+ color: var(--color-black);
4828
+ }
4829
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_container {
4830
+ display: flex;
4831
+ flex-direction: column;
4832
+ gap: var(--spacing-xl);
4833
+ }
4834
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper {
4835
+ display: flex;
4836
+ align-items: center;
4837
+ justify-content: space-between;
4838
+ gap: var(--spacing-xl);
4839
+ }
4840
+ @media (max-width: 768px) {
4841
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper {
4842
+ flex-direction: column;
4843
+ }
4844
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper .PracticePathCards_module_ctaWrapper {
4845
+ width: 100%;
4846
+ padding: 0 var(--spacing-lg);
4847
+ }
4848
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper .PracticePathCards_module_ctaWrapper .PracticePathCards_module_cta {
4849
+ width: 100%;
4850
+ }
4851
+ }
4852
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_content {
4853
+ display: flex;
4854
+ flex-direction: column;
4855
+ gap: var(--spacing-sm);
4856
+ }
4857
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_cards {
4858
+ display: flex;
4859
+ flex-direction: row;
4860
+ overflow: hidden;
4861
+ border-radius: 16px;
4862
+ justify-content: center;
4863
+ }
4864
+ @media (max-width: 768px) {
4865
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_cards {
4866
+ flex-direction: column;
4867
+ }
4868
+ }
4869
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_card {
4870
+ width: 33.333%;
4871
+ }
4872
+ @media (max-width: 768px) {
4873
+ .PracticePathCards_module_practice-path-cards .PracticePathCards_module_card {
4874
+ width: 100%;
4875
+ }
4876
+ }
4877
+
4878
+ /* src/widgets/Teaser5050With3Text/Teaser5050With3Text.module.scss */
4879
+ .Teaser5050With3Text_module_teaser5050-3text {
4880
+ display: block;
4881
+ width: 100%;
4882
+ background-color: var(--color-white);
4883
+ }
4884
+ .Teaser5050With3Text_module_teaser5050-3text .Teaser5050With3Text_module_container {
4885
+ display: flex;
4886
+ flex-direction: column;
4887
+ gap: var(--spacing-xl);
4888
+ }
4889
+ .Teaser5050With3Text_module_teaser5050-3text .Teaser5050With3Text_module_content {
4890
+ display: flex;
4891
+ flex-direction: row;
4253
4892
  align-items: center;
4254
4893
  justify-content: center;
4255
4894
  gap: var(--spacing-xl);
@@ -5683,4 +6322,135 @@ a:hover {
5683
6322
  width: 100%;
5684
6323
  aspect-ratio: 16/9;
5685
6324
  }
6325
+
6326
+ /* src/widgets/QuoteSectionBlock/QuoteSectionBlock.module.scss */
6327
+ .QuoteSectionBlock_module_quoteSectionBlock {
6328
+ background-color: #f3f3f3;
6329
+ padding: 48px 80px;
6330
+ width: 100%;
6331
+ }
6332
+ @media (max-width: 768px) {
6333
+ .QuoteSectionBlock_module_quoteSectionBlock {
6334
+ padding: 24px 16px;
6335
+ }
6336
+ }
6337
+ .QuoteSectionBlock_module_inner {
6338
+ max-width: 1280px;
6339
+ margin: 0 auto;
6340
+ }
6341
+ .QuoteSectionBlock_module_title {
6342
+ font-size: 32px;
6343
+ font-weight: 600;
6344
+ line-height: 1.25;
6345
+ letter-spacing: -0.64px;
6346
+ text-align: center;
6347
+ margin-bottom: 32px;
6348
+ color: var(--color-black);
6349
+ }
6350
+ @media (max-width: 768px) {
6351
+ .QuoteSectionBlock_module_title {
6352
+ font-size: 24px;
6353
+ line-height: 1.2;
6354
+ margin-bottom: 24px;
6355
+ }
6356
+ }
6357
+ .QuoteSectionBlock_module_swiperContainer {
6358
+ position: relative;
6359
+ overflow: hidden;
6360
+ }
6361
+ .QuoteSectionBlock_module_swiperContainer .swiper {
6362
+ overflow: visible;
6363
+ }
6364
+ .QuoteSectionBlock_module_swiperContainer .swiper-wrapper {
6365
+ align-items: stretch;
6366
+ }
6367
+ .QuoteSectionBlock_module_swiperContainer .swiper-slide {
6368
+ width: 80%;
6369
+ height: auto;
6370
+ }
6371
+ @media (max-width: 768px) {
6372
+ .QuoteSectionBlock_module_swiperContainer .swiper-slide {
6373
+ width: 100%;
6374
+ }
6375
+ }
6376
+ .QuoteSectionBlock_module_card {
6377
+ display: flex;
6378
+ flex-direction: column;
6379
+ justify-content: space-between;
6380
+ background: white;
6381
+ border-radius: 32px;
6382
+ padding: 40px;
6383
+ min-height: 403px;
6384
+ height: 100%;
6385
+ box-shadow:
6386
+ 0 0 10px 0 rgba(54, 54, 54, 0),
6387
+ 0 0 9px 0 rgba(54, 54, 54, 0.01),
6388
+ 0 0 8px 0 rgba(54, 54, 54, 0.05),
6389
+ 0 0 6px 0 rgba(54, 54, 54, 0.09),
6390
+ 0 0 3px 0 rgba(54, 54, 54, 0.1);
6391
+ }
6392
+ @media (max-width: 768px) {
6393
+ .QuoteSectionBlock_module_card {
6394
+ padding: 24px;
6395
+ min-height: 543px;
6396
+ }
6397
+ }
6398
+ .QuoteSectionBlock_module_quoteLogo {
6399
+ height: 32px;
6400
+ width: auto;
6401
+ object-fit: contain;
6402
+ margin-bottom: 24px;
6403
+ align-self: flex-start;
6404
+ }
6405
+ .QuoteSectionBlock_module_bodyText {
6406
+ font-size: 20px;
6407
+ font-weight: 500;
6408
+ line-height: 1.4;
6409
+ flex: 1;
6410
+ display: flex;
6411
+ flex-direction: column;
6412
+ justify-content: center;
6413
+ color: var(--color-black);
6414
+ }
6415
+ @media (max-width: 768px) {
6416
+ .QuoteSectionBlock_module_bodyText {
6417
+ font-size: 16px;
6418
+ line-height: 1.5;
6419
+ letter-spacing: -0.08px;
6420
+ }
6421
+ }
6422
+ .QuoteSectionBlock_module_attribution {
6423
+ display: flex;
6424
+ align-items: center;
6425
+ gap: 12px;
6426
+ margin-top: 24px;
6427
+ }
6428
+ .QuoteSectionBlock_module_displayPhoto {
6429
+ width: 48px;
6430
+ height: 48px;
6431
+ border-radius: 50%;
6432
+ object-fit: cover;
6433
+ flex-shrink: 0;
6434
+ }
6435
+ .QuoteSectionBlock_module_displayName {
6436
+ font-size: 14px;
6437
+ font-weight: 600;
6438
+ }
6439
+ .QuoteSectionBlock_module_attributionText {
6440
+ display: grid;
6441
+ }
6442
+ .QuoteSectionBlock_module_jobTitleLogo {
6443
+ height: 13px;
6444
+ width: auto;
6445
+ object-fit: contain;
6446
+ }
6447
+ .QuoteSectionBlock_module_controls {
6448
+ justify-content: center;
6449
+ margin-top: 32px;
6450
+ }
6451
+ @media (max-width: 768px) {
6452
+ .QuoteSectionBlock_module_controls {
6453
+ margin-top: 24px;
6454
+ }
6455
+ }
5686
6456
  /*# sourceMappingURL=index.css.map */