@prijsvrijtechsupport/ui 0.0.37 → 0.0.39

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.
Files changed (11) hide show
  1. package/dist/dist/index.css +1392 -1389
  2. package/dist/dist/index.css.map +1 -1
  3. package/dist/globals.css +5 -556
  4. package/dist/index.cjs +28 -33
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.js +28 -33
  7. package/dist/index.js.map +1 -1
  8. package/dist/src/components/toggle/index.d.ts +2 -20
  9. package/dist/styles/tailwind.css +1 -0
  10. package/dist/styles/variables.css +554 -0
  11. package/package.json +3 -3
package/dist/dist/index.css CHANGED
@@ -318,1753 +318,1755 @@
318
318
  "Segoe UI Symbol", "Noto Color Emoji";
319
319
  }
320
320
 
321
- /* Change this path to be relative to where this CSS file ends up after packaging this library. */
322
- @source "../../dist";
321
+ /* Brand primitive tokens */
322
+ :root {
323
+ --prijsvrij-primary: #0092F2;
324
+ --prijsvrij-primary-dark-50: #004979;
325
+ --prijsvrij-primary-dark-25: #006DB5;
326
+ --prijsvrij-primary-light-25: #40ADF5;
327
+ --prijsvrij-primary-light-50: #80C8F8;
328
+ --prijsvrij-primary-light-75: #EFF8FE;
323
329
 
324
- .top-menu-wrapper {
325
- background-color: var(--topMenu-background-color);
326
- box-shadow: inset 0 32px var(--topMenu-boxShadow-color);
327
- }
330
+ --prijsvrij-secondary: #003593;
331
+ --prijsvrij-secondary-dark-50: #1A499E;
332
+ --prijsvrij-secondary-dark-25: #335DA9;
333
+ --prijsvrij-secondary-light-25: #6686BE;
334
+ --prijsvrij-secondary-light-50: #B2C2DF;
335
+ --prijsvrij-secondary-light-75: #E5EBF4;
328
336
 
329
- .topMenu {
330
- background-color: var(--topMenu-background-color);
331
- box-shadow: inset 0 32px var(--topMenu-boxShadow-color);
332
- height: var(--topMenu-height);
333
- }
337
+ --prijsvrij-alternative: #FDE92F;
338
+ --prijsvrij-alternative-dark-50: #7F7518;
339
+ --prijsvrij-alternative-dark-25: #BEAF23;
340
+ --prijsvrij-alternative-light-25: #FEEF63;
341
+ --prijsvrij-alternative-light-50: #FEF497;
342
+ --prijsvrij-alternative-light-75: #FFFACB;
334
343
 
335
- .btn-primary-boxShadow {
336
- box-shadow: var(--primary-btn-box-shadow);
337
- }
338
- .btn-primary-boxShadow-active {
339
- box-shadow: var(--primary-btn-box-shadow-active);
340
- }
341
- .btn-primary-boxShadow-hover {
342
- box-shadow: var(--primary-btn-box-shadow-hover);
343
- }
344
+ --prijsvrij-alternative2: #D90000;
345
+ --prijsvrij-alternative2-dark-50: #730000;
346
+ --prijsvrij-alternative2-dark-25: #A60000;
347
+ --prijsvrij-alternative2-light-25: #E13333;
348
+ --prijsvrij-alternative2-light-50: #EC8080;
349
+ --prijsvrij-alternative2-light-75: #F7CCCC;
344
350
 
345
- /* Active state fallbacks */
346
- button.btn-primary-boxShadow:active {
347
- box-shadow: var(--primary-btn-box-shadow-active);
348
- }
349
- button.btn-primary-boxShadow:hover {
350
- box-shadow: var(--primary-btn-box-shadow-hover);
351
- }
351
+ --prijsvrij-alternative3: #339900;
352
+ --prijsvrij-alternative3-dark-50: #1A4D00;
353
+ --prijsvrij-alternative3-dark-25: #267300;
354
+ --prijsvrij-alternative3-light-25: #74B555;
355
+ --prijsvrij-alternative3-light-50: #99CC80;
356
+ --prijsvrij-alternative3-light-75: #CCE5BF;
352
357
 
353
- button.btn-primary-boxShadow:hover:active {
354
- box-shadow: var(--primary-btn-box-shadow-active);
355
- }
358
+ --prijsvrij-danger-red: #D90000;
359
+ --prijsvrij-danger-red-hover: #A60000;
360
+ --prijsvrij-danger-red-disabled: #F7CCCC;
356
361
 
357
- button.btn-secondary:active {
358
- box-shadow: var(--secondary-btn-box-shadow-active);
359
- }
362
+ --prijsvrij-dark-600: #333333;
363
+ --prijsvrij-dark-500: #1a1a1a;
364
+ --prijsvrij-dark-400: #262626;
365
+ --prijsvrij-dark-300: #666666;
366
+ --prijsvrij-dark-200: #999999;
360
367
 
361
- button.btn-secondary:hover {
362
- box-shadow: var(--secondary-btn-box-shadow-hover);
363
- }
368
+ --prijsvrij-light-600: #E0E0E0;
369
+ --prijsvrij-light-500: #707070;
370
+ --prijsvrij-light-400: #A8A8A8;
371
+ --prijsvrij-light-300: #E8E8E8;
372
+ --prijsvrij-light-200: #EFEFEF;
364
373
 
365
- button.btn-secondary:hover:active {
366
- box-shadow: var(--secondary-btn-box-shadow-active);
367
- }
374
+ --btn-prijsvrij-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .11), 0 1px 5px rgba(0, 0, 0, .12);
368
375
 
369
- .btn-secondary-boxShadow {
370
- box-shadow: var(--secondary-btn-box-shadow);
371
- }
376
+ --dreizen-primary: #0077BF;
377
+ --dreizen-primary-100: #003C60;
378
+ --dreizen-primary-200: #00598F;
379
+ --dreizen-primary-300: #80BBDF;
372
380
 
373
- .btn-secondary-boxShadow-active {
374
- box-shadow: var(--secondary-btn-box-shadow-active);
375
- }
376
- .btn-secondary-boxShadow-hover {
377
- box-shadow: var(--secondary-btn-box-shadow-hover);
378
- }
381
+ --dreizen-secondary: #FF7801;
382
+ --dreizen-secondary-100: #803C00;
383
+ --dreizen-secondary-200: #BF5A01;
384
+ --dreizen-secondary-300: #FF9A40;
385
+ --dreizen-secondary-400: #FFEEDF;
379
386
 
380
- /* Button primary variant with CSS custom properties */
381
- .btn-glow:hover {
382
- background-color: var(--primary-btn-hover-color);
383
- }
384
- .btn-primary {
385
- background-color: var(--primary-btn-color);
386
- border-color: transparent;
387
- color: white;
388
- transition: all .2s ease;
389
- }
387
+ --dreizen-alternative: #52C75D;
388
+ --dreizen-alternative-100: #29642E;
389
+ --dreizen-alternative-200: #3D9546;
390
+ --dreizen-alternative-300: #72D17B;
391
+ --dreizen-alternative-400: #93DC9A;
390
392
 
391
- .btn-primary:disabled {
392
- background-color: var(--primary-btn-color);
393
- opacity: 0.2;
394
- color: #1f2937;
395
- }
393
+ --dreizen-danger-red: #cc3433;
394
+ --dreizen-danger-red-hover: #992726;
395
+ --dreizen-danger-red-disabled: #e68080;
396
396
 
397
- .btn-primary:disabled:hover {
398
- background-color: var(--primary-btn-color);
399
- opacity: 0.2;
400
- }
397
+ --dreizen-dark-600: #333333;
398
+ --dreizen-dark-500: #1a1a1a;
399
+ --dreizen-dark-400: #262626;
400
+ --dreizen-dark-300: #666666;
401
+ --dreizen-dark-200: #999999;
401
402
 
402
- /* Button secondary variant with CSS custom properties */
403
- .btn-secondary {
404
- background-color: var(--secondary-btn-color);
405
- border-color: transparent;
406
- color: white;
407
- transition: all .2s ease;
408
- }
403
+ --dreizen-light-600: #E8E8E8;
404
+ --dreizen-light-500: #747474;
405
+ --dreizen-light-400: #AEAEAE;
406
+ --dreizen-light-300: #F4F4F4;
407
+ --dreizen-light-200: #EEEEEE;
409
408
 
410
- .btn-secondary:disabled {
411
- background-color: var(--secondary-btn-color);
412
- opacity: 0.2;
413
- color: #1f2937;
409
+ --btn-dreizen-shadow: 0;
410
+ --usp-icon-color: #52c65c;
414
411
  }
415
412
 
416
- .btn-secondary:disabled:hover {
417
- background-color: var(--secondary-btn-color);
418
- opacity: 0.2;
419
- }
413
+ :root[data-brand="prijsvrij"],
414
+ [data-brand="prijsvrij"] {
415
+ --color-primary: var(--prijsvrij-primary);
416
+ --color-primary-dark-50: var(--prijsvrij-primary-dark-50);
417
+ --color-primary-dark-25: var(--prijsvrij-primary-dark-25);
418
+ --color-primary-light-25: var(--prijsvrij-primary-light-25);
419
+ --color-primary-light-50: var(--prijsvrij-primary-light-50);
420
+ --color-primary-light-75: var(--prijsvrij-primary-light-75);
421
+
422
+ --color-secondary: var(--prijsvrij-secondary);
423
+ --color-secondary-dark-50: var(--prijsvrij-secondary-dark-50);
424
+ --color-secondary-dark-25: var(--prijsvrij-secondary-dark-25);
425
+ --color-secondary-light-25: var(--prijsvrij-secondary-light-25);
426
+ --color-secondary-light-50: var(--prijsvrij-secondary-light-50);
427
+ --color-secondary-light-75: var(--prijsvrij-secondary-light-75);
428
+
429
+ --color-alternative: var(--prijsvrij-alternative);
430
+ --color-alternative-dark-50: var(--prijsvrij-alternative-dark-50);
431
+ --color-alternative-dark-25: var(--prijsvrij-alternative-dark-25);
432
+ --color-alternative-light-25: var(--prijsvrij-alternative-light-25);
433
+ --color-alternative-light-50: var(--prijsvrij-alternative-light-50);
434
+ --color-alternative-light-75: var(--prijsvrij-alternative-light-75);
435
+
436
+ --color-alternative2: var(--prijsvrij-alternative2);
437
+ --color-alternative2-dark-50: var(--prijsvrij-alternative2-dark-50);
438
+ --color-alternative2-dark-25: var(--prijsvrij-alternative2-dark-25);
439
+ --color-alternative2-light-25: var(--prijsvrij-alternative2-light-25);
440
+ --color-alternative2-light-50: var(--prijsvrij-alternative2-light-50);
441
+ --color-alternative2-light-75: var(--prijsvrij-alternative2-light-75);
442
+
443
+ --color-alternative3: var(--prijsvrij-alternative3);
444
+ --color-alternative3-dark-50: var(--prijsvrij-alternative3-dark-50);
445
+ --color-alternative3-dark-25: var(--prijsvrij-alternative3-dark-25);
446
+ --color-alternative3-light-25: var(--prijsvrij-alternative3-light-25);
447
+ --color-alternative3-light-50: var(--prijsvrij-alternative3-light-50);
448
+ --color-alternative3-light-75: var(--prijsvrij-alternative3-light-75);
449
+
450
+ --color-dark-600: var(--prijsvrij-dark-600);
451
+ --color-dark-500: var(--prijsvrij-dark-500);
452
+ --color-dark-400: var(--prijsvrij-dark-400);
453
+ --color-dark-300: var(--prijsvrij-dark-300);
454
+ --color-dark-200: var(--prijsvrij-dark-200);
455
+
456
+ --color-light-600: var(--prijsvrij-light-600);
457
+ --color-light-500: var(--prijsvrij-light-500);
458
+ --color-light-400: var(--prijsvrij-light-400);
459
+ --color-light-300: var(--prijsvrij-light-300);
460
+ --color-light-200: var(--prijsvrij-light-200);
461
+
462
+ --radius: var(--prijsvrij-radius);
463
+
464
+ --fontFamily-price-check: var(--font-open-sans), sans-serif;
465
+ --fontFamily-price-check-price: "Hermes Maia T4", sans-serif;
466
+ --fontFamily-blog-widget: "Hermes Maia T4", sans-serif;
467
+ --fontFamily-blog-widget-date: var(--font-open-sans), sans-serif;
420
468
 
421
- /* Button tertiary variant with CSS custom properties */
422
- .btn-alternative {
423
- background-color: var(--alternative-btn-color);
424
- border-color: transparent;
425
- color: white;
426
- transition: all .2s ease;
469
+ --fontWeight-price-text: 400;
470
+ --price-background: var(--prijsvrij-alternative);
471
+ --price-background-back: #ffbf2b;
427
472
 
428
- }
429
473
 
430
- .btn-alternative:hover {
431
- background-color: var(--alternative-btn-hover-color);
432
- }
474
+ /* Buttons */
475
+ --primary-btn-hover-color: var(--prijsvrij-alternative2-dark-25);
476
+ --primary-btn-color: var(--prijsvrij-alternative2);
477
+ --primary-btn-inactive-color: var(--prijsvrij-alternative2-light-75);
478
+ --primary-btn-box-shadow: 0 3px var(--prijsvrij-alternative2-dark-50);
479
+ --primary-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative2-dark-50);
480
+ --primary-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative2-dark-50);
433
481
 
434
- .btn-alternative:disabled {
435
- background-color: var(--alternative-btn-color);
436
- opacity: 0.2;
437
- color: #1f2937;
438
- }
482
+ --secondary-btn-hover-color: var(--prijsvrij-alternative3-dark-25);
483
+ --secondary-btn-color: var(--prijsvrij-alternative3);
484
+ --secondary-btn-inactive-color: var(--prijsvrij-alternative3-light-75);
485
+ --secondary-btn-box-shadow: 0 3px var(--prijsvrij-alternative3-dark-50);
486
+ --secondary-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative3-dark-50);
487
+ --secondary-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative3-dark-50);
439
488
 
440
- .btn-alternative:disabled:hover {
441
- background-color: var(--alternative-btn-color);
442
- opacity: 0.2;
443
- }
489
+ --alternative-btn-hover-color: var(--prijsvrij-alternative-dark-25);
490
+ --alternative-btn-color: var(--prijsvrij-alternative);
491
+ --alternative-btn-inactive-color: var(--prijsvrij-alternative-light-75);
492
+ --alternative-btn-box-shadow: 0 3px var(--prijsvrij-alternative-dark-50);
493
+ --alternative-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative-dark-50);
494
+ --alternative-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative-dark-50);
444
495
 
445
- /* Button alternative2 variant with CSS custom properties */
446
- .btn-alternative2 {
447
- background-color: var(--alternative2-btn-color);
448
- border-color: transparent;
449
- color: white;
450
- transition: all .2s ease;
451
- }
496
+ --alternative2-btn-hover-color: var(--prijsvrij-alternative2-dark-25);
497
+ --alternative2-btn-color: var(--prijsvrij-alternative2);
498
+ --alternative2-btn-inactive-color: var(--prijsvrij-alternative2-light-75);
499
+ --alternative2-btn-box-shadow: 0 3px var(--prijsvrij-alternative2-dark-50);
500
+ --alternative2-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative2-dark-50);
501
+ --alternative2-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative2-dark-50);
502
+
503
+ --alternative3-btn-hover-color: var(--prijsvrij-alternative3-dark-25);
504
+ --alternative3-btn-color: var(--prijsvrij-alternative3);
505
+ --alternative3-btn-inactive-color: var(--prijsvrij-alternative3-light-75);
506
+ --alternative3-btn-box-shadow: 0 3px var(--prijsvrij-alternative3-dark-50);
507
+ --alternative3-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative3-dark-50);
508
+ --alternative3-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative3-dark-50);
452
509
 
453
- .btn-alternative2:hover {
454
- background-color: var(--alternative2-btn-hover-color);
455
- }
510
+ --logo-url: var(--prijsvrij-logo-url);
456
511
 
457
- .btn-alternative2:disabled {
458
- background-color: var(--alternative2-btn-color);
459
- opacity: 0.2;
460
- color: #1f2937;
461
- }
512
+ --btn-shadow: var(--btn-prijsvrij-shadow);
513
+ --btn-outline-border: var(--prijsvrij-primary);
514
+ --btn-outline-color: var(--prijsvrij-primary);
462
515
 
463
- .btn-alternative2:disabled:hover {
464
- background-color: var(--alternative2-btn-color);
465
- opacity: 0.2;
466
- }
516
+ --btn-outline-hover-border-color: var(--prijsvrij-primary-dark-25);
517
+ --btn-outline-hover-color: var(--prijsvrij-primary-dark-25);
467
518
 
468
- .btn-shadow {
469
- box-shadow: var(--btn-shadow);
470
- }
519
+ --btn-text-color: var(--prijsvrij-primary);
471
520
 
472
- .btn-outline {
473
- border-color: var(--btn-outline-border);
474
- color: var(--btn-outline-color);
475
- }
521
+ --btn-text-hover-color: var(--prijsvrij-primary-dark-25);
522
+ --price-check-color: var(--prijsvrij-alternative2);
523
+ --price-check-price-color: var(--prijsvrij-alternative2);
524
+ --price-text-padding-left: 0.5rem;
476
525
 
477
- .btn-outline:hover {
478
- border-color: var(--btn-outline-hover-border-color);
479
- color: var(--btn-outline-hover-color);
480
- }
526
+ --danger-red: var(--prijsvrij-danger-red);
527
+ --danger-red-hover: var(--prijsvrij-danger-red-hover);
528
+ --danger-red-disabled: var(--prijsvrij-danger-red-disabled);
529
+ --price-text-padding-bottom: -0.5rem;
530
+ --price-price-padding-left: 1rem;
531
+ --price-price-padding-right: 0.5rem;
532
+ --price-minus-right: 10px;
533
+ --price-minus-bottom: 10px;
534
+ --price-price-margin-top: 0;
481
535
 
482
- .btn-text {
483
- color: var(--btn-text-color);
484
- }
485
- .btn-text-hover-color:hover {
486
- color: var(--btn-text-hover-color);
487
- }
536
+ --toggle-active-background-color: var(--prijsvrij-primary);
537
+ --toggle-inactive-background-color: #EFF8FE;
538
+ --toggle-active-color: white;
539
+ --toggle-inactive-color: var(--prijsvrij-dark-600);
540
+ --toggle-font-family: var(--font-open-sans), sans-serif;
488
541
 
542
+ --filter-button-background-color: var(--prijsvrij-primary);
543
+ --filter-button-background-hover-color: #005cbb;
544
+ --fontFamily-filter-button: var(--font-open-sans), sans-serif;
489
545
 
490
- .price-check-color {
491
- color: var(--price-check-color);
492
- }
546
+ --filter-button-icon-background-color: #80c8f8;
547
+ --filter-button-icon-background-hover-color: #002c49;
493
548
 
494
- .price-check-color-price {
495
- color: var(--price-check-price-color);
496
- }
549
+ --search-box-border-color: transparent;
550
+ --search-box-icon-color: var(--prijsvrij-dark-600);
551
+ --search-box-clear-icon-background-color: #e3e3e3;
552
+ --search-box-clear-icon-background-hover-color: #a0a0a0;
553
+ --search-box-clear-icon-color: white;
497
554
 
498
- .price-check-fontFamily {
499
- font-family: var(--fontFamily-price-check);
500
- }
555
+ --search-box-result-location-color: var(--prijsvrij-primary);
556
+ --search-box-result-hover-background-color: #edf7fe;
501
557
 
502
- .price-check-fontFamily-price {
503
- font-family: var(--fontFamily-price-check-price);
504
- z-index: 0;
505
- }
558
+ --topMenu-background-color: #0083da;
559
+ --topHeaderMenu-background-color: #0083da;
560
+ --topMenu-background-color-hover: #004979;
561
+ --topMenu-boxShadow-color: transparent;
562
+ --topMenu-height: 40px;
506
563
 
507
- .price-check-font-price-text {
508
- font-weight: var(--fontWeight-price-text);
509
- z-index: 0;
510
- }
564
+ --counter-icon-color: #d90000;
511
565
 
512
- .price-background {
513
- inset: 0;
514
- position: absolute;
515
- z-index: 0;
516
- }
566
+ --usp-font-family: var(--font-open-sans), sans-serif;
567
+ --middle-navigation-font-family: var(--font-open-sans), sans-serif;
568
+ --fontFamily-blog-widget: "Hermes Maia T4";
517
569
 
518
- .price-background::before {
519
- content: '';
520
- position: absolute;
521
- inset: 0;
522
- background-color: var(--price-background);
523
- transform: matrix(1, -.06, .1, 1, 0, 0);
524
- z-index: 3;
525
- }
570
+ --menu-link-color: white;
571
+ --menu-link-hover-color: var(--prijsvrij-primary);
572
+ --menu-item-icon-color: white;
526
573
 
527
- .price-background::after {
528
- content: '';
529
- position: absolute;
530
- inset: 0;
531
- z-index: 2;
532
- background-color: var(--price-background-back);
533
- transform: matrix(1,.05,-.05,1,0,0);
534
- transform-origin: center;
535
- }
574
+ --color-footer-navigation-link: var(--prijsvrij-primary);
575
+ --color-footer-navigation-category-link: var(--prijsvrij-secondary);
536
576
 
537
- .price-check-text-padding {
538
- padding-left: var(--price-text-padding-left);
539
- margin-bottom: var(--price-text-padding-bottom);
540
- }
577
+ --searchBlock-background-color: var(--prijsvrij-alternative);
578
+ --searchBlock-text-color: var(--prijsvrij-secondary);
579
+ --searchBlock-text-size: 24px;
580
+ --searchBlock-text-weight: 400;
581
+ --searchBlock-font-family: "Hermes Maia T4", sans-serif;
582
+ --searchBlock-border-radius: 8px;
541
583
 
542
- .price-check-price-padding {
543
- padding-left: var(--price-price-padding-left);
544
- padding-right: var(--price-price-padding-right);
545
- }
584
+ --searchBlockButtonLabel-text-size: clamp(10px, 2.5vw, 12px);
585
+ --searchBlockButtonLabel-text-weight: 600;
586
+ --searchBlockButtonLabel-font-family: var(--font-open-sans), sans-serif;
587
+ --searchBlockButtonLabel-color: var(--prijsvrij-dark-300);
588
+ --searchBlockButtonIcon-color: var(--prijsvrij-secondary);
546
589
 
547
- .price-check-price-margin-top {
548
- margin-top: var(--price-price-margin-top)
549
- }
590
+ --searchBlockButtonRadius: 4px;
591
+ --searchBlockButtonHeight: 50px;
550
592
 
551
- .price-check-minus {
552
- position: absolute;
553
- right: var(--price-minus-right);
554
- bottom: var(--price-minus-bottom);
555
- }
593
+ --searchBlockButtonSelectedValue-font-family: var(--font-open-sans), sans-serif;
594
+ --searchBlockButtonSelectedValue-color: var(--prijsvrij-dark-400);
595
+ --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
596
+ --searchBlockButtonSelectedValue-text-weight: 400;
597
+ --searchBlockButtonSelectedValue-margin-top: -4px;
556
598
 
557
- /* Disabled state with grayscale filter */
558
- .price-check-disabled {
559
- filter: grayscale(100%);
560
- opacity: 0.7;
561
- }
599
+ --searchBlockButtonDownIcon-color: var(--prijsvrij-primary-light-25);
600
+ --searchBlockButtonDownIcon-size: 20px;
562
601
 
563
- .toggle {
564
- background-color: var(--toggle-inactive-background-color);
565
- container-type: inline-size;
566
- font-family: var(--toggle-font-family);
567
- }
602
+ --category-filter-font-family: var(--font-open-sans), sans-serif;
568
603
 
569
- .toggle-inactive:not(.disabled):hover {
570
- box-shadow: 0 2px #333, 0 4px 17px -10px #333;
571
- transform: translateY(-2px);
572
- transition: opacity .2s ease, transform .1s ease, background .1s ease, box-shadow .1s ease;
573
- }
604
+ --collection-title-font-family: "Hermes Maia T4", sans-serif;
605
+ --collection-description-font-family: var(--font-open-sans), sans-serif;
574
606
 
575
- .toggle-inactive:not(.disabled):active {
576
- transform: translateY(0px);
577
- box-shadow: 0 0px #333, 0 0px 17px -10px #333;
578
- transition: opacity .2s ease, transform .1s ease, background .1s ease, box-shadow .1s ease;
579
- }
607
+ --usp-icon-color: var(--prijsvrij-alternative3);
608
+ --review-color: var(--prijsvrij-alternative3);
609
+ --review-number-background-color: inherit;
610
+ --review-number-color: var(--prijsvrij-alternative3);
611
+ --review-shadow: 0 4px 80px rgba(0,0,0,.07),0 .893452px 17.869px rgba(0,0,0,.042),0 .266004px 5.32008px rgba(0,0,0,.028);
580
612
 
581
- .toggle-active {
582
- background-color: var(--toggle-active-background-color);
583
- color: var(--toggle-active-color);
584
- transform: translateY(1px);
585
- box-shadow: 0 -1px var(--color-secondary);
586
- }
587
- .toggle-inactive {
588
- background-color: transparent;
589
- color: var(--toggle-inactive-color);
590
- }
613
+ --hotel-accomodation-results-title-color: var(--prijsvrij-secondary);
614
+ --hotel-accomodation-results-title-font: "Hermes Maia T4", sans-serif;
591
615
 
592
- .toggle-active-icon {
593
- color: var(--toggle-active-color);
594
- }
616
+ --hotel-accomodation-results-location-font: var(--font-open-sans), sans-serif;
617
+ --hotel-accomodation-results-location-color: #a8a8a8;
595
618
 
596
- .toggle-inactive-icon {
597
- color: var(--toggle-inactive-color);
598
- }
619
+ --viewed-accomodations-title-font: var(--font-open-sans), sans-serif;
620
+ --viewed-accomodations-title-text-color: var(--color-secondary);
621
+ --viewed-accomodations-header: var(--font-open-sans), sans-serif;
622
+ --viewed-accomodations-header-font-size: 18px;
599
623
 
624
+ --viewed-accomodations-empty-color: var(--color-secondary);
600
625
 
626
+ --viewed-accomodations-empty-text-color: var(--color-dark-400);
601
627
 
602
- .top-header-menu {
603
- background-color: var(--topHeaderMenu-background-color);
604
- }
628
+ --quantity-buttons-border-color: var(--color-primary);
629
+ --quantity-buttons-color: var(--color-primary);
630
+ --quantity-buttons-border-color-hover: var(--color-secondary);
631
+ --quantity-buttons-value-color: var(--color-dark-400);
605
632
 
606
- .top-header-menu li {
607
- background-color: var(--topMenu-background-color);
608
- height: var(--topMenu-height);
609
- display: flex;
610
- align-items: center;
611
- cursor: pointer;
612
- transition: all 0.4s ease;
613
- }
633
+ --matrix-table-days-color: var(--color-dark-400);
634
+ --matrix-table-month-header-color: var(--color-secondary);
635
+ --matrix-table-month-header-font-family: "Hermes Maia T4", sans-serif;
614
636
 
615
- .top-header-menu li a {
616
- padding: 0 4px;
617
- height: 100%;
618
- display: flex;
619
- align-content: center;
620
- align-items: center;
621
- }
637
+ --matrix-table-cell-color: var(--prijsvrij-primary-light-75);
638
+ --matrix-table-cell-border-color: var(--prijsvrij-light-600);
639
+ --matrix-table-cell-cheapest-color: var(--prijsvrij-primary);
640
+ --matrix-table-cell-cheapest-border-color: var(--prijsvrij-primary-dark-25);
622
641
 
623
- .top-header-menu li:hover a {
624
- background-color: var(--topMenu-background-color-hover);
625
- transition: all 0.4s ease;
626
- color: white;
627
- }
628
- .top-header-menu li:hover a {
629
- color: white;
630
- }
631
-
632
- .top-header-menu li a {
633
- text-decoration: none;
634
- color: white;
635
- padding: 0 12px;
636
- font-weight: 700;
637
- font-size: 14px;
638
- font-family: var(--font-open-sans), sans-serif;
639
- }
642
+ --matrix-table-cell-active-color: var(--prijsvrij-alternative);
643
+ --matrix-table-cell-active-border-color: #e4d22b;
644
+ --matrix-table-cell-active-text-color: var(--prijsvrij-alternative2);
640
645
 
641
- .flying-heart-icon {
642
- animation: flyToHeart 1s ease-out forwards;
643
- }
646
+ --matrix-table-days-amount-font: var(--font-open-sans), sans-serif;
644
647
 
645
- @keyframes flyToHeart {
646
- 0% {
647
- transform: translate(var(--start-x), var(--start-y)) scale(1);
648
- opacity: 1;
649
- }
650
- 50% {
651
- transform: translate(calc(var(--start-x) + var(--end-x) / 2), calc(var(--start-y) + var(--end-y) / 2)) scale(1.2);
652
- opacity: 1;
653
- }
654
- 100% {
655
- transform: translate(var(--end-x), var(--end-y)) scale(0.8);
656
- opacity: 0;
657
- }
658
- }
648
+ --matrix-table-days-weekday-color: var(--color-light-400);
659
649
 
650
+ --popup-title-font-family: "Hermes Maia T4", sans-serif;
660
651
 
661
- .filter-button {
662
- background-color: var(--filter-button-background-color);
663
- font-family: var(--fontFamily-filter-button);
652
+
664
653
  }
665
654
 
666
- .filter-button:hover {
667
- background-color: var(--filter-button-background-hover-color);
668
- }
655
+ :root[data-brand="dreizen"],
656
+ [data-brand="dreizen"] {
657
+ --color-primary: var(--dreizen-primary);
658
+ --color-primary-100: var(--dreizen-primary-100);
659
+ --color-primary-200: var(--dreizen-primary-200);
660
+ --color-primary-300: var(--dreizen-primary-300);
661
+ --color-primary-light-25: var(--dreizen-primary-200);
662
+ --color-primary-light-50: var(--dreizen-primary-300);
669
663
 
670
- .filter-button-icon {
671
- background-color: var(--filter-button-icon-background-color);
672
- color: var(--filter-button-background-color);
673
- }
664
+ --color-secondary: var(--dreizen-secondary);
665
+ --color-secondary-100: var(--dreizen-secondary-100);
666
+ --color-secondary-200: var(--dreizen-secondary-200);
667
+ --color-secondary-300: var(--dreizen-secondary-300);
668
+ --color-secondary-400: var(--dreizen-secondary-400);
669
+
670
+ --color-alternative: var(--dreizen-alternative);
671
+ --color-alternative-100: var(--dreizen-alternative-100);
672
+ --color-alternative-200: var(--dreizen-alternative-200);
673
+ --color-alternative-300: var(--dreizen-alternative-300);
674
+ --color-alternative-400: var(--dreizen-alternative-400);
675
+
676
+ --color-dark-600: var(--dreizen-dark-600);
677
+ --color-dark-500: var(--dreizen-dark-500);
678
+ --color-dark-400: var(--dreizen-dark-400);
679
+ --color-dark-300: var(--dreizen-dark-300);
680
+ --color-dark-200: var(--dreizen-dark-200);
681
+
682
+ --color-light-600: var(--dreizen-light-600);
683
+ --color-light-500: var(--dreizen-light-500);
684
+ --color-light-400: var(--dreizen-light-400);
685
+ --color-light-300: var(--dreizen-light-300);
686
+ --color-light-200: var(--dreizen-light-200);
674
687
 
675
- .filter-button:hover .filter-button-icon {
676
- background-color: var(--filter-button-icon-background-hover-color);
677
- color: white;
678
- }
688
+ /* Buttons */
689
+ --primary-btn-color: var(--dreizen-primary);
690
+ --primary-btn-inactive-color: var(--dreizen-primary-400);
691
+ --primary-btn-box-shadow: 0 3px var(--dreizen-primary-100);
692
+ --primary-btn-box-shadow-active: 0 1px var(--dreizen-primary-100);
693
+ --primary-btn-box-shadow-hover: 0 6px var(--dreizen-primary-100);
679
694
 
695
+ --secondary-btn-color: var(--dreizen-secondary);
696
+ --secondary-btn-inactive-color: var(--dreizen-secondary-400);
697
+ --secondary-btn-box-shadow: 0 3px var(--dreizen-secondary-200);
698
+ --secondary-btn-box-shadow-active: 0 1px var(--dreizen-secondary-200);
699
+ --secondary-btn-box-shadow-hover: 0 6px var(--dreizen-secondary-200);
700
+
701
+ --alternative-btn-hover-color: var(--dreizen-alternative-200);
702
+ --alternative-btn-color: var(--dreizen-alternative);
703
+ --alternative-btn-inactive-color: var(--dreizen-alternative-300);
704
+ --alternative-btn-box-shadow: 0 3px var(--dreizen-alternative-200);
705
+ --alternative-btn-box-shadow-active: 0 1px var(--dreizen-alternative-200);
706
+ --alternative-btn-box-shadow-hover: 0 6px var(--dreizen-alternative-200);
707
+
708
+ --alternative2-btn-hover-color: var(--dreizen-alternative2-200);
709
+ --alternative2-btn-color: var(--dreizen-alternative2);
710
+ --alternative2-btn-inactive-color: var(--dreizen-alternative2-300);
711
+ --alternative2-btn-box-shadow: 0 3px var(--dreizen-alternative2-200);
712
+ --alternative2-btn-box-shadow-active: 0 1px var(--dreizen-alternative2-200);
713
+ --alternative2-btn-box-shadow-hover: 0 6px var(--dreizen-alternative2-200);
714
+
715
+ --alternative3-btn-hover-color: var(--dreizen-alternative3-200);
716
+ --alternative3-btn-color: var(--dreizen-alternative3);
717
+ --alternative3-btn-inactive-color: var(--dreizen-alternative3-300);
718
+ --alternative3-btn-box-shadow: 0 3px var(--dreizen-alternative3-200);
719
+ --alternative3-btn-box-shadow-active: 0 1px var(--dreizen-alternative3-200);
720
+ --alternative3-btn-box-shadow-hover: 0 6px var(--dreizen-alternative3-200);
721
+
722
+ --logo-url: var(--dreizen-logo-url);
680
723
 
681
- .search-box-input:disabled {
682
- opacity: 0.92;
683
- cursor: not-allowed;
684
- }
724
+ --btn-shadow: var(--btn-dreizen-shadow);
685
725
 
686
- .search-box-input:active,
687
- .search-box-input:focus,
688
- .search-box-input.active {
689
- width: var(--expanded-width, 300px);
690
- padding-left: 48px;
691
- transition: width .3s ease, padding-left .3s ease;
692
- border: 2px solid var(--search-box-border-color);
693
- }
726
+ --btn-outline-border: var(--dreizen-primary);
727
+ --btn-outline-color: var(--dreizen-primary);
694
728
 
695
- .search-box-input:focus-visible {
696
- outline: none;
697
- border: 1px solid var(--search-box-border-color);
698
- }
729
+ --btn-outline-hover-border-color: var(--dreizen-primary-200);
730
+ --btn-outline-hover-color: var(--dreizen-primary-200);
699
731
 
700
- .search-box-input:focus::placeholder,
701
- .search-box-input.active::placeholder {
702
- color: #9ca3af;
703
- opacity: 1;
704
- transition: opacity .3s ease;
705
- }
732
+ --btn-text-color: var(--dreizen-primary);
706
733
 
707
- .search-box-input::placeholder {
708
- color: transparent;
709
- opacity: 0;
710
- }
734
+ --btn-text-hover-color: var(--dreizen-primary-200);
735
+ --price-check-color: var(--dreizen-dark-600);
736
+ --price-check-price-color: var(--dreizen-secondary);
711
737
 
712
- .search-box-input {
713
- border: 2px solid var(--search-box-border-color);
714
- }
738
+ --danger-red: var(--dreizen-danger-red);
739
+ --danger-red-hover: var(--dreizen-danger-red-hover);
740
+ --danger-red-disabled: var(--dreizen-danger-red-disabled);
715
741
 
716
- .search-box-icon {
717
- color: var(--search-box-icon-color);
718
- }
742
+ --fontFamily-price-check: var(--font-titillium-web), sans-serif;
743
+ --fontFamily-price-check-price: var(--font-titillium-web), sans-serif;
744
+ --fontFamily-blog-widget: var(--font-open-sans), sans-serif;
745
+ --fontFamily-blog-widget-date: var(--font-open-sans), sans-serif;
719
746
 
720
-
747
+ --fontWeight-price-text: 600;
748
+ --price-background: transparent;
749
+ --price-background-back: transparent;
750
+ --price-text-padding-left: 0;
751
+ --price-text-padding-bottom: 0;
752
+ --price-price-padding-left: 0;
753
+ --price-price-padding-right: 0;
754
+ --price-minus-right: 5px;
755
+ --price-minus-bottom: 10px;
756
+ --price-price-margin-top: -8px;
721
757
 
722
- .search-box-clear:hover {
723
- background-color: var(--search-box-clear-icon-background-hover-color);
724
- }
758
+ --toggle-active-background-color: var(--dreizen-secondary);
759
+ --toggle-inactive-background-color: #ff780133;
760
+ --toggle-active-color: white;
761
+ --toggle-inactive-color: var(--dreizen-dark-600);
762
+ --toggle-font-family: var(--font-lato), sans-serif;
725
763
 
726
- .search-box-results {
727
- box-shadow: 0 4px 80px rgba(0, 0, 0, .07), 0 .893452px 17.869px rgba(0, 0, 0, .042), 0 .266004px 5.32008px rgba(0, 0, 0, .028);
728
- }
764
+ --filter-button-background-color: var(--dreizen-primary);
765
+ --filter-button-background-hover-color: var(--dreizen-dark-600);
766
+ --fontFamily-filter-button: var(--font-lato), sans-serif;
729
767
 
730
- .search-box-clear {
731
- background-color: var(--search-box-clear-icon-background-color);
732
- color: var(--search-box-clear-icon-color);
733
- }
734
- .search-box-result-location {
735
- color: var(--search-box-result-location-color);
736
- }
768
+ --filter-button-icon-background-color: #4099cf;
769
+ --filter-button-icon-background-hover-color: #002c49;
770
+ --search-box-border-color: var(--dreizen-secondary);
771
+ --search-box-icon-color: var(--dreizen-secondary);
772
+ --search-box-clear-icon-background-color: #e3e3e3;
773
+ --search-box-clear-icon-background-hover-color: #a0a0a0;
774
+ --search-box-clear-icon-color: white;
737
775
 
738
- .search-box-result:hover {
739
- background-color: var(--search-box-result-hover-background-color);
740
- }
741
- .search-box-result-type-page {
742
- color: var(--search-box-result-location-color);
743
- }
744
- .search-box-result-type-page:hover {
745
- color: color-mix(in srgb, var(--search-box-result-location-color) 70%, transparent);
746
- }
776
+ --search-box-result-location-color: var(--dreizen-primary);
777
+ --search-box-result-hover-background-color: #edf7fe;
747
778
 
748
- .search-box-result-location {
749
- font-family: var(--font-open-sans), sans-serif;
750
- }
779
+ --topMenu-background-color: transparent;
780
+ --topHeaderMenu-background-color: var(--color-secondary);
781
+ --topMenu-background-color-hover: var(--dreizen-secondary-200);
782
+ --topMenu-boxShadow-color: #f9f9f9;
783
+ --topMenu-height: 32px;
751
784
 
752
- .dropdown-button {
753
- color: var(--color-primary);
754
- }
755
- .dropdown-button-text {
756
- color: var(--color-dark-600);
757
- }
758
- .dropdown-icon {
759
- color: var(--color-secondary);
760
- }
785
+ --counter-icon-color: #ff6766;
761
786
 
787
+ --usp-font-family: var(--font-lato), sans-serif;
788
+ --middle-navigation-font-family: var(--font-lato), sans-serif;
762
789
 
790
+ --menu-link-color: var(--color-dark-600);
791
+ --menu-link-hover-color: var(--color-dark-600);
792
+ --menu-item-icon-color: var(--color-secondary);
763
793
 
764
- .counter-icon-count {
765
- background-color: var(--counter-icon-color);
766
- }
767
- .counter-icon-wrapper {
768
- margin: 0 8px;
769
- }
770
- .counter-icon-clickable:hover {
771
- background-color: var(--topMenu-background-color-hover);
772
- }
773
- /* .usp-icon {
774
- color: var(--color-alternative);
775
- } */
794
+ --color-footer-navigation-link: var(--color-dark-600);
795
+ --color-footer-navigation-category-link: #0077bf;
776
796
 
777
- .usp-wrapper,
778
- .usp-wrapper a {
779
- color: var(--color-dark-600);
780
- text-decoration: none;
781
- font-family: var(--usp-font-family);
782
- }
797
+ --searchBlock-background-color: var(--color-secondary);
798
+ --searchBlock-text-color: white;
799
+ --searchBlock-text-size: 20px;
800
+ --searchBlock-text-weight: 700;
801
+ --searchBlock-font-family: var(--font-lato), sans-serif;
802
+ --searchBlock-border-radius: 2px;
783
803
 
784
- /* Container queries for responsive USP items */
785
- .usp-wrapper {
786
- container-type: inline-size;
787
- }
804
+ --searchBlockButtonLabel-text-size: clamp(12px, 3vw, 14px);
805
+ --searchBlockButtonLabel-text-weight: 700;
806
+ --searchBlockButtonLabel-font-family: var(--font-lato), sans-serif;
807
+ --searchBlockButtonLabel-color: var(--dreizen-dark-600);
808
+ --searchBlockButtonIcon-color: var(--dreizen-dark-200);
788
809
 
789
- @container (max-width: 800px) {
790
- .usp-wrapper.flex-row .usp-item:nth-child(n+4) {
791
- display: none;
792
- }
793
- }
810
+ --searchBlockButtonRadius: 3px;
811
+ --searchBlockButtonHeight: 40px;
794
812
 
795
- @container (max-width: 640px) {
796
- .usp-wrapper.flex-row .usp-item:nth-child(n+3) {
797
- display: none;
798
- }
799
-
800
- }
813
+ --searchBlockButtonSelectedValue-font-family: var(--font-lato), sans-serif;
814
+ --searchBlockButtonSelectedValue-color: var(--dreizen-dark-600);
815
+ --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
816
+ --searchBlockButtonSelectedValue-text-weight: 500;
817
+ --searchBlockButtonSelectedValue-margin-top: 0;
801
818
 
802
- @container (max-width: 480px) {
803
- .usp-wrapper.flex-row .usp-item:nth-child(n+2) {
804
- display: none;
805
- }
806
- }
819
+ --searchBlockButtonDownIcon-color: var(--dreizen-primary);
820
+ --searchBlockButtonDownIcon-size: 16px;
807
821
 
822
+ --category-filter-font-family: var(--font-lato), sans-serif;
808
823
 
809
- .middle-navigation {
810
- color: #73726e;
811
- font-family: var(--middle-navigation-font-family);
812
- }
824
+ --collection-title-font-family: var(--font-titillium-web), sans-serif;
825
+ --collection-description-font-family: var(--font-lato), sans-serif;
813
826
 
814
- .middle-navigation li {
815
- transition: all 0.3s ease-in-out;
816
- }
827
+ --usp-icon-color: #52c65c;
817
828
 
818
- .middle-navigation li:hover {
819
- color: var(--color-dark-200);
820
- }
821
- /* Menu styles */
822
- .menu-item {
823
- position: relative;
824
- }
829
+ --review-color: #0077bf;
830
+ --review-number-background-color: #0077bf;
831
+ --review-number-color: white;
832
+ --review-shadow: 1px 1px 5px 0 rgba(0,0,0,.15),0 0 1px 0 rgba(0,0,0,.3);
825
833
 
834
+ --hotel-accomodation-results-title-color: var(--color-dark-600);
835
+ --hotel-accomodation-results-title-font: var(--font-titillium-web), sans-serif;
826
836
 
827
- .menu-item:hover:has(.menu-dropdown) .menu-link {
828
- background-color: white;
829
- color: var(--menu-link-hover-color);
830
- }
837
+ --hotel-accomodation-results-location-font: var(--font-lato), sans-serif;
838
+ --hotel-accomodation-results-location-color: #a8a8a8;
831
839
 
832
- .menu-item:hover {
833
- background: rgba(0, 0, 0, .1);
834
- border-radius: 4px;
835
- }
840
+ --viewed-accomodations-title-font: var(--font-titillium-web), sans-serif;
841
+ --viewed-accomodations-title-text-color: var(--color-dark-600);
842
+ --viewed-accomodations-header: var(--font-lato), sans-serif;
843
+ --viewed-accomodations-header-font-size: 16px;
836
844
 
837
- .menu-item:hover .menu-link {
838
- color: white;
839
- }
845
+ --viewed-accomodations-empty-color: var(--color-dark-600);
840
846
 
841
- .menu-item:hover .menu-item-icon {
842
- color: var(--menu-item-icon-hover-color);
843
- }
847
+ --viewed-accomodations-empty-text-color: var(--color-dark-600);
844
848
 
845
- .menu-link {
846
- color: var(--menu-link-color);
847
- }
849
+ --quantity-buttons-border-color: var(--color-secondary);
850
+ --quantity-buttons-color: var(--color-secondary);
851
+ --quantity-buttons-border-color-hover: var(--color-secondary-200);
852
+ --quantity-buttons-value-color: var(--color-dark-400);
848
853
 
849
- .menu-item-icon {
850
- color: var(--menu-item-icon-color);
851
- }
854
+ --matrix-table-days-color: var(--color-dark-600);
855
+ --matrix-table-month-header-color: var(--color-dark-600);
856
+ --matrix-table-month-header-font-family: var(--font-titillium-web), sans-serif;
852
857
 
853
- .menu-dropdown {
854
- opacity: 0;
855
- pointer-events: none;
856
- transition: opacity 0.15s ease-in-out;
857
- max-height: calc(100vh - 32px);
858
- overflow: hidden;
859
- }
858
+ --matrix-table-cell-color: #bfddef;
859
+ --matrix-table-cell-border-color: #bfddef;
860
+ --matrix-table-cell-cheapest-color: var(--dreizen-primary);
861
+ --matrix-table-cell-cheapest-border-color: var(--dreizen-primary);
860
862
 
861
- .menu-item[data-open="true"][data-ready="false"] .menu-dropdown {
862
- opacity: 0;
863
- visibility: hidden;
864
- pointer-events: none;
865
- }
863
+ --matrix-table-days-amount-font: var(--font-lato), sans-serif;
866
864
 
867
- .menu-item[data-open="true"][data-ready="true"] .menu-dropdown {
868
- opacity: 1;
869
- visibility: visible;
870
- pointer-events: auto;
871
- }
865
+ --matrix-table-days-weekday-color: var(--color-light-400);
866
+ --matrix-table-cell-active-color: var(--color-secondary);
867
+ --matrix-table-cell-active-border-color: var(--color-secondary);
868
+ --matrix-table-cell-active-text-color: var(--color-white);
872
869
 
873
- /* Create invisible bridge to prevent gap */
874
- .menu-dropdown::before {
875
- content: '';
876
- position: absolute;
877
- top: -12px;
878
- left: 0;
879
- right: 0;
880
- height: 12px;
881
- background: transparent;
870
+ --popup-title-font-family: var(--font-lato), sans-serif;
882
871
  }
883
872
 
884
- .menu-dropdown.bottom-full::before {
885
- top: -12px;
886
- }
887
873
 
888
- .menu-dropdown.top-full::before {
889
- bottom: -12px;
890
- top: auto;
891
- }
874
+ /* Change this path to be relative to where this CSS file ends up after packaging this library. */
875
+ @source "../../dist";
892
876
 
893
- .menu-category:not(:last-child) {
894
- border-bottom: 1px solid #e5e7eb;
895
- }
896
877
 
897
- .menu-dropdown a {
898
- white-space: nowrap;
878
+ .top-menu-wrapper {
879
+ background-color: var(--topMenu-background-color);
880
+ box-shadow: inset 0 32px var(--topMenu-boxShadow-color);
899
881
  }
900
882
 
901
- /* Ensure dropdown stays above other content */
902
- .menu-dropdown {
903
- z-index: 50;
883
+ .topMenu {
884
+ background-color: var(--topMenu-background-color);
885
+ box-shadow: inset 0 32px var(--topMenu-boxShadow-color);
886
+ height: var(--topMenu-height);
904
887
  }
905
888
 
906
- /* Add subtle animation for menu items */
907
- .menu-item > a {
908
- position: relative;
909
- transition: color 0.2s ease;
889
+ .btn-primary-boxShadow {
890
+ box-shadow: var(--primary-btn-box-shadow);
910
891
  }
911
-
912
- /* Sticky category headers for better navigation when scrolling */
913
- .menu-dropdown .sticky {
914
- position: sticky;
915
- top: 0;
916
- background: white;
917
- z-index: 10;
892
+ .btn-primary-boxShadow-active {
893
+ box-shadow: var(--primary-btn-box-shadow-active);
918
894
  }
919
-
920
- /* Hide dropdown scrollbars (keep scroll functionality) */
921
- .menu-dropdown {
922
- scrollbar-width: none; /* Firefox */
923
- -ms-overflow-style: none; /* IE/Edge legacy */
895
+ .btn-primary-boxShadow-hover {
896
+ box-shadow: var(--primary-btn-box-shadow-hover);
924
897
  }
925
898
 
926
- .menu-dropdown::-webkit-scrollbar {
927
- width: 0;
928
- height: 0;
899
+ /* Active state fallbacks */
900
+ button.btn-primary-boxShadow:active {
901
+ box-shadow: var(--primary-btn-box-shadow-active);
929
902
  }
930
-
931
- /* Prevent dropdown from going off-screen horizontally */
932
- .menu-dropdown {
933
- max-width: 90vw;
903
+ button.btn-primary-boxShadow:hover {
904
+ box-shadow: var(--primary-btn-box-shadow-hover);
934
905
  }
935
906
 
936
- /* Ensure dropdown never goes negative left */
937
- .menu-dropdown.left-0 {
938
- left: 0;
939
- right: auto;
907
+ button.btn-primary-boxShadow:hover:active {
908
+ box-shadow: var(--primary-btn-box-shadow-active);
940
909
  }
941
910
 
942
- /* Handle dropdown positioning */
943
- .menu-dropdown.top-full {
944
- top: 100%;
911
+ button.btn-secondary:active {
912
+ box-shadow: var(--secondary-btn-box-shadow-active);
945
913
  }
946
914
 
947
- .menu-dropdown.bottom-full {
948
- bottom: 100%;
949
- margin-bottom: 4px;
915
+ button.btn-secondary:hover {
916
+ box-shadow: var(--secondary-btn-box-shadow-hover);
950
917
  }
951
918
 
952
- .menu-dropdown.left-0 {
953
- left: 0;
919
+ button.btn-secondary:hover:active {
920
+ box-shadow: var(--secondary-btn-box-shadow-active);
954
921
  }
955
922
 
956
- .menu-dropdown.right-0 {
957
- right: 0;
923
+ .btn-secondary-boxShadow {
924
+ box-shadow: var(--secondary-btn-box-shadow);
958
925
  }
959
926
 
960
- .menu-dropdown.left-1\/2 {
961
- left: 50%;
927
+ .btn-secondary-boxShadow-active {
928
+ box-shadow: var(--secondary-btn-box-shadow-active);
962
929
  }
963
-
964
- .menu-dropdown.-translate-x-1\/2 {
965
- transform: translateX(-50%);
930
+ .btn-secondary-boxShadow-hover {
931
+ box-shadow: var(--secondary-btn-box-shadow-hover);
966
932
  }
967
933
 
968
-
969
- /* Grid layout for dropdown */
970
- .menu-dropdown .grid {
971
- grid-template-columns: repeat(3, minmax(200px, 1fr));
934
+ /* Button primary variant with CSS custom properties */
935
+ .btn-glow:hover {
936
+ background-color: var(--primary-btn-hover-color);
972
937
  }
973
-
974
- /* Category styling in grid */
975
- .menu-dropdown .menu-category {
976
- min-width: 200px;
938
+ .btn-primary {
939
+ background-color: var(--primary-btn-color);
940
+ border-color: transparent;
941
+ color: white;
942
+ transition: all .2s ease;
977
943
  }
978
944
 
979
- .footer-navigation-link {
980
- color: var(--color-footer-navigation-link);
945
+ .btn-primary:disabled {
946
+ background-color: var(--primary-btn-color);
947
+ opacity: 0.2;
948
+ color: #1f2937;
981
949
  }
982
950
 
983
- .footer-navigation-category-link {
984
- color: var(--color-footer-navigation-category-link);
985
- }
986
- .blog-widget-title {
987
- font-family: var(--fontFamily-blog-widget);
988
- }
989
- .blog-widget-date {
990
- font-family: var(--fontFamily-blog-widget-date);
991
- }
992
- .searchBlock {
993
- background-color: var(--searchBlock-background-color);
994
- color: var(--searchBlock-text-color);
995
- font-size: var(--searchBlock-text-size);
996
- font-weight: var(--searchBlock-text-weight);
997
- font-family: var(--searchBlock-font-family);
998
- border-radius: var(--searchBlock-border-radius);
951
+ .btn-primary:disabled:hover {
952
+ background-color: var(--primary-btn-color);
953
+ opacity: 0.2;
999
954
  }
1000
955
 
1001
- .searchBlockButton {
1002
- background-color: white;
1003
- border-radius: var(--searchBlockButtonRadius);
1004
- min-height: var(--searchBlockButtonHeight);
956
+ /* Button secondary variant with CSS custom properties */
957
+ .btn-secondary {
958
+ background-color: var(--secondary-btn-color);
959
+ border-color: transparent;
960
+ color: white;
961
+ transition: all .2s ease;
1005
962
  }
1006
963
 
1007
- .searchBlockButtonLabel {
1008
- font-size: var(--searchBlockButtonLabel-text-size) !important;
1009
- font-weight: var(--searchBlockButtonLabel-text-weight);
1010
- font-family: var(--searchBlockButtonLabel-font-family);
1011
- color: var(--searchBlockButtonLabel-color);
964
+ .btn-secondary:disabled {
965
+ background-color: var(--secondary-btn-color);
966
+ opacity: 0.2;
967
+ color: #1f2937;
1012
968
  }
1013
969
 
1014
- .searchBlockButtonIcon {
1015
- color: var(--searchBlockButtonIcon-color);
970
+ .btn-secondary:disabled:hover {
971
+ background-color: var(--secondary-btn-color);
972
+ opacity: 0.2;
1016
973
  }
1017
974
 
1018
- .searchBlockButtonSelectedValue {
1019
-
1020
- font-family: var(--searchBlockButtonSelectedValue-font-family);
1021
- color: var(--searchBlockButtonSelectedValue-color);
1022
- font-size: var(--searchBlockButtonSelectedValue-text-size) !important;
1023
- font-weight: var(--searchBlockButtonSelectedValue-text-weight);
1024
- margin-top: var(--searchBlockButtonSelectedValue-margin-top);
975
+ /* Button tertiary variant with CSS custom properties */
976
+ .btn-alternative {
977
+ background-color: var(--alternative-btn-color);
978
+ border-color: transparent;
979
+ color: white;
980
+ transition: all .2s ease;
1025
981
 
1026
982
  }
1027
983
 
1028
- .searchBlockButtonSecondarySelectedValue {
1029
- font-size: var(--searchBlockButtonLabel-text-size) !important;
1030
- color: var(--searchBlockButtonIcon-color);
984
+ .btn-alternative:hover {
985
+ background-color: var(--alternative-btn-hover-color);
1031
986
  }
1032
987
 
1033
- .searchBlockButtonDownIcon {
1034
- color: var(--searchBlockButtonDownIcon-color);
1035
- width: var(--searchBlockButtonDownIcon-size);
1036
- height: var(--searchBlockButtonDownIcon-size);
1037
- }
1038
- .category-filter {
1039
- font-family: var(--category-filter-font-family);
1040
- }
1041
- .collection-title {
1042
- font-family: var(--collection-title-font-family)
988
+ .btn-alternative:disabled {
989
+ background-color: var(--alternative-btn-color);
990
+ opacity: 0.2;
991
+ color: #1f2937;
1043
992
  }
1044
993
 
1045
- .collection-description {
1046
- font-family: var(--collection-description-font-family);
1047
- color: var(--color-dark-300);
1048
-
1049
- }
1050
- .review {
1051
- box-shadow: 0 4px 80px rgba(0, 0, 0, .07), 0 .893452px 17.869px rgba(0, 0, 0, .042), 0 .266004px 5.32008px rgba(0, 0, 0, .028);
994
+ .btn-alternative:disabled:hover {
995
+ background-color: var(--alternative-btn-color);
996
+ opacity: 0.2;
1052
997
  }
1053
998
 
1054
- .review-color {
1055
- color: var(--review-color);
999
+ /* Button alternative2 variant with CSS custom properties */
1000
+ .btn-alternative2 {
1001
+ background-color: var(--alternative2-btn-color);
1002
+ border-color: transparent;
1003
+ color: white;
1004
+ transition: all .2s ease;
1056
1005
  }
1057
1006
 
1058
- .review-number-color {
1059
- background: var(--review-number-background-color);
1060
- color: var(--review-number-color);
1007
+ .btn-alternative2:hover {
1008
+ background-color: var(--alternative2-btn-hover-color);
1061
1009
  }
1062
1010
 
1063
- .review-shadow {
1064
- box-shadow: var(--review-shadow);
1011
+ .btn-alternative2:disabled {
1012
+ background-color: var(--alternative2-btn-color);
1013
+ opacity: 0.2;
1014
+ color: #1f2937;
1065
1015
  }
1066
1016
 
1067
- .review-small {
1068
- background: var(--review-color);
1069
- color: white;
1017
+ .btn-alternative2:disabled:hover {
1018
+ background-color: var(--alternative2-btn-color);
1019
+ opacity: 0.2;
1070
1020
  }
1071
1021
 
1072
- .review-small-arrow {
1073
- border-top-color: var(--review-color);
1074
- }
1075
- .hotel-accomodation-results-title {
1076
- color: var(--hotel-accomodation-results-title-color);
1077
- font-family: var(--hotel-accomodation-results-title-font);
1022
+ .btn-shadow {
1023
+ box-shadow: var(--btn-shadow);
1078
1024
  }
1079
1025
 
1080
- .hotel-accomodation-results-location {
1081
- font-family: var(--hotel-accomodation-results-location-font);
1082
- color: var(--hotel-accomodation-results-location-color);
1083
- }
1084
- .coupon-bite-top {
1085
- -webkit-mask-image: radial-gradient(circle 12px at 0 100%, transparent 99%, #000), radial-gradient(circle 12px at 100% 100%, transparent 99%, #000);
1086
- -webkit-mask-size: 51% 100%;
1087
- -webkit-mask-position: left, right;
1088
- -webkit-mask-repeat: no-repeat;
1089
- mask-image: radial-gradient(circle 12px at 0 100%, transparent 99%, #000), radial-gradient(circle 12px at 100% 100%, transparent 99%, #000);
1090
- mask-size: 51% 100%;
1091
- mask-position: left, right;
1092
- mask-repeat: no-repeat;
1026
+ .btn-outline {
1027
+ border-color: var(--btn-outline-border);
1028
+ color: var(--btn-outline-color);
1093
1029
  }
1094
1030
 
1095
- .coupon-bite-dashes {
1096
- -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 10px, #000 10px 18px);
1097
- mask-image: repeating-linear-gradient(90deg, transparent 0 10px, #000 10px 18px);
1031
+ .btn-outline:hover {
1032
+ border-color: var(--btn-outline-hover-border-color);
1033
+ color: var(--btn-outline-hover-color);
1098
1034
  }
1099
1035
 
1100
- .coupon-bite-bottom {
1101
- -webkit-mask-image: radial-gradient(circle 12px at 0 0, transparent 99%, #000), radial-gradient(circle 12px at 100% 0, transparent 99%, #000);
1102
- -webkit-mask-size: 51% 100%;
1103
- -webkit-mask-position: left, right;
1104
- -webkit-mask-repeat: no-repeat;
1105
- mask-image: radial-gradient(circle 12px at 0 0, transparent 99%, #000), radial-gradient(circle 12px at 100% 0, transparent 99%, #000);
1106
- mask-size: 51% 100%;
1107
- mask-position: left, right;
1108
- mask-repeat: no-repeat;
1036
+ .btn-text {
1037
+ color: var(--btn-text-color);
1109
1038
  }
1110
- .gift-card {
1111
- fill: linear-gradient(215deg, rgba(255, 255, 255, 0.20) -115.47%, #0092F2 36.73%);
1112
- font-family: var(--font-open-sans), sans-serif;
1039
+ .btn-text-hover-color:hover {
1040
+ color: var(--btn-text-hover-color);
1113
1041
  }
1114
1042
 
1115
- .gift-card-amount {
1116
- font-family: "Hermes Maia T4", sans-serif;
1117
- }
1118
1043
 
1119
- .popup-title {
1120
- font-family: var(--popup-title-font-family);
1044
+ .price-check-color {
1045
+ color: var(--price-check-color);
1121
1046
  }
1122
1047
 
1123
- .with-backdrop::backdrop {
1124
- background-color: rgba(0, 0, 0, 0.5) !important;
1048
+ .price-check-color-price {
1049
+ color: var(--price-check-price-color);
1125
1050
  }
1126
1051
 
1127
- /* Alternative approach for browsers that don't support ::backdrop */
1128
- [data-popover].with-backdrop::backdrop {
1129
- background-color: rgba(0, 0, 0, 0.5) !important;
1052
+ .price-check-fontFamily {
1053
+ font-family: var(--fontFamily-price-check);
1130
1054
  }
1131
1055
 
1132
- .rotated-image-0,
1133
- .rotated-image-1 {
1134
- box-shadow: 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
1056
+ .price-check-fontFamily-price {
1057
+ font-family: var(--fontFamily-price-check-price);
1058
+ z-index: 0;
1135
1059
  }
1136
1060
 
1137
- .rotated-image-2 {
1138
- box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.07), 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
1139
- }
1140
- .spotlights-item {
1141
- font-family: "Hermes Maia T4";
1061
+ .price-check-font-price-text {
1062
+ font-weight: var(--fontWeight-price-text);
1063
+ z-index: 0;
1142
1064
  }
1143
1065
 
1144
- .viewed-accomodations {
1145
- box-shadow: 0 1px 5px rgba(0,0,0,.12),0 2px 6.4px rgba(0,0,0,.11),0 3px 9.6px -2px rgba(0,0,0,.2);
1066
+ .price-background {
1067
+ inset: 0;
1068
+ position: absolute;
1069
+ z-index: 0;
1146
1070
  }
1147
1071
 
1148
- .viewed-accomodations-title {
1149
- font-family: var(--viewed-accomodations-title-font);
1150
- color: var(--viewed-accomodations-title-text-color);
1072
+ .price-background::before {
1073
+ content: '';
1074
+ position: absolute;
1075
+ inset: 0;
1076
+ background-color: var(--price-background);
1077
+ transform: matrix(1, -.06, .1, 1, 0, 0);
1078
+ z-index: 3;
1151
1079
  }
1152
1080
 
1153
- .viewed-accomodations-header {
1154
- font-family: var(--viewed-accomodations-header);
1155
- color: var(--viewed-accomodations-title-text-color);
1156
- font-size: var(--viewed-accomodations-header-font-size);
1081
+ .price-background::after {
1082
+ content: '';
1083
+ position: absolute;
1084
+ inset: 0;
1085
+ z-index: 2;
1086
+ background-color: var(--price-background-back);
1087
+ transform: matrix(1,.05,-.05,1,0,0);
1088
+ transform-origin: center;
1157
1089
  }
1158
1090
 
1159
- .viewed-accomodations-items, .viewed-accomodations-empty-header {
1160
- color: var(--viewed-accomodations-empty-color);
1091
+ .price-check-text-padding {
1092
+ padding-left: var(--price-text-padding-left);
1093
+ margin-bottom: var(--price-text-padding-bottom);
1161
1094
  }
1162
1095
 
1163
- .viewed-accomodations-empty-text-color {
1164
- color: var(--viewed-accomodations-empty-text-color);
1165
- }
1166
- .quantity-buttons-border-color {
1167
- border-color: var(--quantity-buttons-border-color);
1096
+ .price-check-price-padding {
1097
+ padding-left: var(--price-price-padding-left);
1098
+ padding-right: var(--price-price-padding-right);
1168
1099
  }
1169
1100
 
1170
- .quantity-buttons-border-color:hover:not(:disabled) {
1171
- border-color: var(--quantity-buttons-border-color-hover);
1101
+ .price-check-price-margin-top {
1102
+ margin-top: var(--price-price-margin-top)
1172
1103
  }
1173
1104
 
1174
- .quantity-buttons-border-color:hover:not(:disabled) .quantity-buttons-color {
1175
- color: var(--quantity-buttons-border-color-hover);
1105
+ .price-check-minus {
1106
+ position: absolute;
1107
+ right: var(--price-minus-right);
1108
+ bottom: var(--price-minus-bottom);
1176
1109
  }
1177
1110
 
1178
- .quantity-buttons-color {
1179
- color: var(--quantity-buttons-color);
1111
+ /* Disabled state with grayscale filter */
1112
+ .price-check-disabled {
1113
+ filter: grayscale(100%);
1114
+ opacity: 0.7;
1180
1115
  }
1181
1116
 
1182
- .quantity-buttons-value-color {
1183
- color: var(--quantity-buttons-value-color);
1117
+ .toggle {
1118
+ background-color: var(--toggle-inactive-background-color);
1119
+ container-type: inline-size;
1120
+ font-family: var(--toggle-font-family);
1184
1121
  }
1185
1122
 
1186
- .matrix-table-days {
1187
- color: var(--matrix-table-days-color);
1123
+ .toggle-inactive:not(.disabled):hover {
1124
+ box-shadow: 0 2px #333, 0 4px 17px -10px #333;
1125
+ transform: translateY(-2px);
1126
+ transition: opacity .2s ease, transform .1s ease, background .1s ease, box-shadow .1s ease;
1188
1127
  }
1189
- .matrix-table-month-header {
1190
- color: var(--matrix-table-month-header-color);
1191
- font-family: var(--matrix-table-month-header-font-family);
1128
+
1129
+ .toggle-inactive:not(.disabled):active {
1130
+ transform: translateY(0px);
1131
+ box-shadow: 0 0px #333, 0 0px 17px -10px #333;
1132
+ transition: opacity .2s ease, transform .1s ease, background .1s ease, box-shadow .1s ease;
1192
1133
  }
1193
1134
 
1194
- .matrix-table-cell:hover, .matrix-table-cell-cheapest:hover, .matrix-table-cell-active:hover {
1195
- background: #e4e4e4;
1196
- border-color: #e4e4e4;
1197
- color: var(--matrix-table-days-color);
1198
- }
1199
-
1200
- .matrix-table-cell-cheapest {
1201
- background: var(--matrix-table-cell-cheapest-color);
1202
- border-color: var(--matrix-table-cell-cheapest-border-color);
1203
- font-weight: 600;
1204
- }
1205
- .matrix-table-cell {
1206
- background: var(--matrix-table-cell-color);
1207
- border-color: var(--matrix-table-cell-border-color);
1208
- }
1209
- .matrix-table-cell-active {
1210
- background: var(--matrix-table-cell-active-color);
1211
- border-color: var(--matrix-table-cell-active-border-color);
1212
- color: var(--matrix-table-cell-active-text-color);
1213
- font-weight: 600;
1214
- }
1215
- .matrix-table-days {
1216
- font-family: var(--matrix-table-days-amount-font);
1135
+ .toggle-active {
1136
+ background-color: var(--toggle-active-background-color);
1137
+ color: var(--toggle-active-color);
1138
+ transform: translateY(1px);
1139
+ box-shadow: 0 -1px var(--color-secondary);
1217
1140
  }
1218
- .matrix-table-dates, .matrix-table-dates-weekday {
1219
- font-family: var(--matrix-table-days-amount-font);
1141
+ .toggle-inactive {
1142
+ background-color: transparent;
1143
+ color: var(--toggle-inactive-color);
1220
1144
  }
1221
- .matrix-table-dates-weekday {
1222
- color: var(--matrix-table-days-weekday-color);
1145
+
1146
+ .toggle-active-icon {
1147
+ color: var(--toggle-active-color);
1223
1148
  }
1224
1149
 
1225
- .page-navigation:hover,
1226
- .page-navigation.selected {
1227
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.11), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
1150
+ .toggle-inactive-icon {
1151
+ color: var(--toggle-inactive-color);
1228
1152
  }
1229
- /**
1230
- * Custom Utilities
1231
- * Additional utility classes for the UI Package
1232
- * These styles are scoped to prevent global conflicts
1233
- */
1234
1153
 
1235
- /* Custom utilities */
1236
1154
 
1237
1155
 
1238
- @utility transition-max-height {
1239
- transition: max-height 0.3s ease-in-out;
1156
+ .top-header-menu {
1157
+ background-color: var(--topHeaderMenu-background-color);
1240
1158
  }
1241
1159
 
1242
- @layer utilities {
1243
- /* Animation utility classes - Only for UI components with data-pv-ui */
1244
- [data-pv-ui] .animate-spin,
1245
- .animate-spin {
1246
- animation: spin 1s linear infinite;
1247
- }
1248
- [data-pv-ui] .animate-spin-slow,
1249
- .animate-spin-slow {
1250
- animation: spin 2s linear infinite;
1251
- }
1252
- [data-pv-ui] .animate-spin-once,
1253
- .animate-spin-once {
1254
- animation: spin 2s linear forwards;
1255
- }
1160
+ .top-header-menu li {
1161
+ background-color: var(--topMenu-background-color);
1162
+ height: var(--topMenu-height);
1163
+ display: flex;
1164
+ align-items: center;
1165
+ cursor: pointer;
1166
+ transition: all 0.4s ease;
1167
+ }
1256
1168
 
1257
- [data-pv-ui] .animate-plane-bounce,
1258
- .animate-plane-bounce {
1259
- animation: airplane-bounce 5s ease-in-out infinite;
1260
- }
1169
+ .top-header-menu li a {
1170
+ padding: 0 4px;
1171
+ height: 100%;
1172
+ display: flex;
1173
+ align-content: center;
1174
+ align-items: center;
1175
+ }
1261
1176
 
1262
- [data-pv-ui] .animate-cloud-float,
1263
- .animate-cloud-float {
1264
- animation: cloud-move 7s infinite linear;
1265
- }
1177
+ .top-header-menu li:hover a {
1178
+ background-color: var(--topMenu-background-color-hover);
1179
+ transition: all 0.4s ease;
1180
+ color: white;
1181
+ }
1182
+ .top-header-menu li:hover a {
1183
+ color: white;
1184
+ }
1266
1185
 
1267
- [data-pv-ui] .animate-cloud-float-2,
1268
- .animate-cloud-float-2 {
1269
- animation: cloud-move 7s -5s infinite linear;
1270
- }
1186
+ .top-header-menu li a {
1187
+ text-decoration: none;
1188
+ color: white;
1189
+ padding: 0 12px;
1190
+ font-weight: 700;
1191
+ font-size: 14px;
1192
+ font-family: var(--font-open-sans), sans-serif;
1193
+ }
1271
1194
 
1272
- [data-pv-ui] .animate-cloud-float-3,
1273
- .animate-cloud-float-3 {
1274
- animation: cloud-move 7s -10s infinite linear;
1275
- }
1195
+ .flying-heart-icon {
1196
+ animation: flyToHeart 1s ease-out forwards;
1197
+ }
1276
1198
 
1277
- /* Duration utility classes - Only for UI components with data-pv-ui */
1278
- [data-pv-ui] .duration-sidebar,
1279
- .duration-sidebar {
1280
- transition-duration: var(--pv-transition-duration-sidebar, 300ms);
1199
+ @keyframes flyToHeart {
1200
+ 0% {
1201
+ transform: translate(var(--start-x), var(--start-y)) scale(1);
1202
+ opacity: 1;
1281
1203
  }
1282
-
1283
- [data-pv-ui] .duration-1000,
1284
- .duration-1000 {
1285
- transition-duration: 1000ms;
1204
+ 50% {
1205
+ transform: translate(calc(var(--start-x) + var(--end-x) / 2), calc(var(--start-y) + var(--end-y) / 2)) scale(1.2);
1206
+ opacity: 1;
1286
1207
  }
1287
-
1288
- [data-pv-ui] .duration-700,
1289
- .duration-700 {
1290
- transition-duration: 700ms;
1208
+ 100% {
1209
+ transform: translate(var(--end-x), var(--end-y)) scale(0.8);
1210
+ opacity: 0;
1291
1211
  }
1212
+ }
1292
1213
 
1293
- /* Gradient background utility classes - Only for UI components with data-pv-ui */
1294
- [data-pv-ui] .bg-linear-gradient-y,
1295
- .bg-linear-gradient-y {
1296
- background-image: var(--pv-color-linear-gradient-y);
1297
- }
1298
- [data-pv-ui] .bg-linear-gradient-x,
1299
- .bg-linear-gradient-x {
1300
- background-image: var(--pv-color-linear-gradient-x);
1301
- }
1302
- [data-pv-ui] .bg-gradient-blue-pink,
1303
- .bg-gradient-blue-pink {
1304
- background-image: var(--pv-color-linear-gradient-x) !important;
1305
- }
1306
- [data-pv-ui] .bg-gradient-blue-green-y,
1307
- .bg-gradient-blue-green-y {
1308
- background-image: var(--pv-color-gradient-blue-green-y);
1309
- }
1310
- [data-pv-ui] .bg-gradient-blue-green-x,
1311
- .bg-gradient-blue-green-x {
1312
- background-image: var(--pv-color-gradient-blue-green-x);
1313
- }
1314
- [data-pv-ui] .bg-gradient-calendar,
1315
- .bg-gradient-calendar {
1316
- background-image: var(--pv-color-gradient-calendar);
1317
- }
1318
- [data-pv-ui] .hover\:bg-gradient-calendar:hover,
1319
- .hover\:bg-gradient-calendar:hover {
1320
- background-image: var(--pv-color-gradient-calendar);
1321
- }
1322
- @media (min-width: 768px) {
1323
- [data-pv-ui] .md\:hover\:bg-gradient-calendar:hover,
1324
- .md\:hover\:bg-gradient-calendar:hover {
1325
- background-image: var(--pv-color-gradient-calendar);
1326
- }
1327
- }
1328
- [data-pv-ui] .bg-nav-gradient,
1329
- .bg-nav-gradient {
1330
- background-image: var(--pv-color-nav-gradient);
1331
- }
1332
- [data-pv-ui] .bg-nav-gradient-mobile,
1333
- .bg-nav-gradient-mobile {
1334
- background-image: var(--pv-color-nav-gradient-mobile);
1335
- }
1336
1214
 
1337
- /* Toast notification colors - Scoped with prefix */
1338
- :root {
1339
- --pv-toastify-color-info: #2a67f6;
1340
- --pv-toastify-color-success: #10d1bb;
1341
- --pv-toastify-color-warning: #f8ec5b;
1342
- --pv-toastify-color-error: #ed3f55;
1343
- }
1215
+ .filter-button {
1216
+ background-color: var(--filter-button-background-color);
1217
+ font-family: var(--fontFamily-filter-button);
1218
+ }
1344
1219
 
1345
- /* Focus styles - Only for UI components with data-pv-ui */
1346
- [data-pv-ui] button:focus-visible,
1347
- button.pv-button:focus-visible {
1348
- @reference focus:outline-hidden;
1349
- @reference focus:ring-2;
1350
- @reference focus:ring-offset-2;
1351
- }
1220
+ .filter-button:hover {
1221
+ background-color: var(--filter-button-background-hover-color);
1222
+ }
1352
1223
 
1353
- /* Base layer styles - Only for UI components with data-pv-ui */
1354
- @layer base {
1355
- [data-pv-ui] button:not(:disabled),
1356
- [data-pv-ui] [role="button"]:not(:disabled) {
1357
- cursor: pointer;
1358
- }
1359
- }
1224
+ .filter-button-icon {
1225
+ background-color: var(--filter-button-icon-background-color);
1226
+ color: var(--filter-button-background-color);
1227
+ }
1360
1228
 
1361
- /* Editor styles - Only for UI components with data-pv-ui */
1362
- [data-pv-ui] .is-editor-empty:first-of-type::before {
1363
- @reference text-gray-800;
1364
- color: #333333 !important;
1365
- }
1229
+ .filter-button:hover .filter-button-icon {
1230
+ background-color: var(--filter-button-icon-background-hover-color);
1231
+ color: white;
1232
+ }
1366
1233
 
1367
- /* List styles - Only for UI components with data-pv-ui */
1368
- [data-pv-ui] ul {
1369
- @reference list-disc;
1370
- }
1371
1234
 
1372
- [data-pv-ui] ol {
1373
- @reference list-decimal;
1374
- }
1235
+ .search-box-input:disabled {
1236
+ opacity: 0.92;
1237
+ cursor: not-allowed;
1375
1238
  }
1376
1239
 
1377
- /* Table animations - Only for UI components with data-pv-ui */
1378
- [data-pv-ui] .table-animation-exit,
1379
- .table-animation-exit {
1380
- opacity: 1;
1381
- transition: opacity 300ms ease-out;
1240
+ .search-box-input:active,
1241
+ .search-box-input:focus,
1242
+ .search-box-input.active {
1243
+ width: var(--expanded-width, 300px);
1244
+ padding-left: 48px;
1245
+ transition: width .3s ease, padding-left .3s ease;
1246
+ border: 2px solid var(--search-box-border-color);
1382
1247
  }
1383
- [data-pv-ui] .table-animation-exit-active,
1384
- .table-animation-exit-active {
1385
- opacity: 0;
1386
- transition: opacity 300ms ease-out;
1248
+
1249
+ .search-box-input:focus-visible {
1250
+ outline: none;
1251
+ border: 1px solid var(--search-box-border-color);
1387
1252
  }
1388
- [data-pv-ui] .table-animation-enter,
1389
- .table-animation-enter {
1390
- opacity: 0;
1391
- transition: opacity 300ms ease-in;
1392
- }
1393
- [data-pv-ui] .table-animation-enter-active,
1394
- .table-animation-enter-active {
1253
+
1254
+ .search-box-input:focus::placeholder,
1255
+ .search-box-input.active::placeholder {
1256
+ color: #9ca3af;
1395
1257
  opacity: 1;
1396
- transition: opacity 300ms ease-in;
1258
+ transition: opacity .3s ease;
1397
1259
  }
1398
1260
 
1399
- /* Spin animation keyframes */
1400
- @keyframes spin {
1401
- from {
1402
- transform: rotate(0deg);
1403
- }
1404
- to {
1405
- transform: rotate(360deg);
1406
- }
1261
+ .search-box-input::placeholder {
1262
+ color: transparent;
1263
+ opacity: 0;
1407
1264
  }
1408
1265
 
1409
- @keyframes airplane-bounce {
1410
- 0% {
1411
- transform: translate3d(0, 0, 0);
1412
- }
1413
- 25% {
1414
- transform: translate3d(0, -2%, 0);
1415
- }
1416
- 50% {
1417
- transform: translate3d(0, 0, 0);
1418
- }
1419
- 75% {
1420
- transform: translate3d(0, 2%, 0);
1421
- }
1422
- 100% {
1423
- transform: translate3d(0, 0, 0);
1424
- }
1266
+ .search-box-input {
1267
+ border: 2px solid var(--search-box-border-color);
1268
+ }
1269
+
1270
+ .search-box-icon {
1271
+ color: var(--search-box-icon-color);
1425
1272
  }
1426
1273
 
1427
- @keyframes cloud-move {
1428
- 0% {
1429
- left: 100%;
1430
- }
1431
- 100% {
1432
- left: -100%;
1433
- }
1274
+
1275
+
1276
+ .search-box-clear:hover {
1277
+ background-color: var(--search-box-clear-icon-background-hover-color);
1434
1278
  }
1435
1279
 
1436
- /**
1437
- * Global CSS Styles
1438
- * Main stylesheet for the UI Package
1439
- */
1280
+ .search-box-results {
1281
+ box-shadow: 0 4px 80px rgba(0, 0, 0, .07), 0 .893452px 17.869px rgba(0, 0, 0, .042), 0 .266004px 5.32008px rgba(0, 0, 0, .028);
1282
+ }
1440
1283
 
1284
+ .search-box-clear {
1285
+ background-color: var(--search-box-clear-icon-background-color);
1286
+ color: var(--search-box-clear-icon-color);
1287
+ }
1288
+ .search-box-result-location {
1289
+ color: var(--search-box-result-location-color);
1290
+ }
1441
1291
 
1442
- @keyframes spin {
1443
- from {
1444
- transform: rotate(0deg);
1445
- }
1446
- to {
1447
- transform: rotate(360deg);
1448
- }
1292
+ .search-box-result:hover {
1293
+ background-color: var(--search-box-result-hover-background-color);
1294
+ }
1295
+ .search-box-result-type-page {
1296
+ color: var(--search-box-result-location-color);
1297
+ }
1298
+ .search-box-result-type-page:hover {
1299
+ color: color-mix(in srgb, var(--search-box-result-location-color) 70%, transparent);
1449
1300
  }
1450
1301
 
1451
- @keyframes flyToTarget {
1452
- 0% {
1453
- transform: translate(0, 0) scale(1);
1454
- opacity: 1;
1455
- }
1456
- 20% {
1457
- transform: translate(0, 0) scale(1.2);
1458
- opacity: 1;
1459
- }
1460
- 100% {
1461
- transform: translate(
1462
- calc(var(--end-x) - var(--start-x)),
1463
- calc(var(--end-y) - var(--start-y))
1464
- ) scale(0.9);
1465
- opacity: 1;
1466
- }
1302
+ .search-box-result-location {
1303
+ font-family: var(--font-open-sans), sans-serif;
1467
1304
  }
1468
1305
 
1469
- @keyframes popEffect {
1470
- 0% {
1471
- transform: scale(1);
1472
- }
1473
- 50% {
1474
- transform: scale(1.3);
1475
- }
1476
- 100% {
1477
- transform: scale(1);
1478
- }
1306
+ .dropdown-button {
1307
+ color: var(--color-primary);
1308
+ }
1309
+ .dropdown-button-text {
1310
+ color: var(--color-dark-600);
1311
+ }
1312
+ .dropdown-icon {
1313
+ color: var(--color-secondary);
1479
1314
  }
1480
1315
 
1481
- .flying-heart-icon {
1482
- animation: flyToTarget 1s cubic-bezier(0.25, -0.3, 0.75, 1.1) forwards;
1316
+
1317
+
1318
+ .counter-icon-count {
1319
+ background-color: var(--counter-icon-color);
1320
+ }
1321
+ .counter-icon-wrapper {
1322
+ margin: 0 8px;
1323
+ }
1324
+ .counter-icon-clickable:hover {
1325
+ background-color: var(--topMenu-background-color-hover);
1483
1326
  }
1327
+ /* .usp-icon {
1328
+ color: var(--color-alternative);
1329
+ } */
1484
1330
 
1485
- .counter-icon-pop {
1486
- animation: popEffect 0.3s ease-out;
1331
+ .usp-wrapper,
1332
+ .usp-wrapper a {
1333
+ color: var(--color-dark-600);
1334
+ text-decoration: none;
1335
+ font-family: var(--usp-font-family);
1487
1336
  }
1488
1337
 
1489
- .tiptap {
1490
- :first-child {
1491
- margin-top: 0;
1492
- }
1338
+ /* Container queries for responsive USP items */
1339
+ .usp-wrapper {
1340
+ container-type: inline-size;
1341
+ }
1493
1342
 
1494
- /* List styles */
1495
- ul,
1496
- ol {
1497
- padding: 0 1rem;
1498
- margin: 1.25rem 1rem 1.25rem 0.4rem;
1343
+ @container (max-width: 800px) {
1344
+ .usp-wrapper.flex-row .usp-item:nth-child(n+4) {
1345
+ display: none;
1346
+ }
1347
+ }
1499
1348
 
1500
- li p {
1501
- margin-top: 0.25em;
1502
- margin-bottom: 0.25em;
1349
+ @container (max-width: 640px) {
1350
+ .usp-wrapper.flex-row .usp-item:nth-child(n+3) {
1351
+ display: none;
1503
1352
  }
1504
- }
1353
+
1505
1354
  }
1506
1355
 
1507
- .font-lato {
1508
- font-family: var(--font-lato), sans-serif;
1356
+ @container (max-width: 480px) {
1357
+ .usp-wrapper.flex-row .usp-item:nth-child(n+2) {
1358
+ display: none;
1359
+ }
1509
1360
  }
1510
1361
 
1511
1362
 
1512
- /* Prijsvrij */
1513
- :root {
1514
- --prijsvrij-primary: #0092F2;
1515
- --prijsvrij-primary-dark-50: #004979;
1516
- --prijsvrij-primary-dark-25: #006DB5;
1517
- --prijsvrij-primary-light-25: #40ADF5;
1518
- --prijsvrij-primary-light-50: #80C8F8;
1519
- --prijsvrij-primary-light-75: #EFF8FE;
1520
-
1521
- --prijsvrij-secondary: #003593;
1522
- --prijsvrij-secondary-dark-50: #1A499E;
1523
- --prijsvrij-secondary-dark-25: #335DA9;
1524
- --prijsvrij-secondary-light-25: #6686BE;
1525
- --prijsvrij-secondary-light-50: #B2C2DF;
1526
- --prijsvrij-secondary-light-75: #E5EBF4;
1527
-
1528
- --prijsvrij-alternative: #FDE92F;
1529
- --prijsvrij-alternative-dark-50: #7F7518;
1530
- --prijsvrij-alternative-dark-25: #BEAF23;
1531
- --prijsvrij-alternative-light-25: #FEEF63;
1532
- --prijsvrij-alternative-light-50: #FEF497;
1533
- --prijsvrij-alternative-light-75: #FFFACB;
1534
-
1535
- --prijsvrij-alternative2: #D90000;
1536
- --prijsvrij-alternative2-dark-50: #730000;
1537
- --prijsvrij-alternative2-dark-25: #A60000;
1538
- --prijsvrij-alternative2-light-25: #E13333;
1539
- --prijsvrij-alternative2-light-50: #EC8080;
1540
- --prijsvrij-alternative2-light-75: #F7CCCC;
1541
-
1542
- --prijsvrij-alternative3: #339900;
1543
- --prijsvrij-alternative3-dark-50: #1A4D00;
1544
- --prijsvrij-alternative3-dark-25: #267300;
1545
- --prijsvrij-alternative3-light-25: #74B555;
1546
- --prijsvrij-alternative3-light-50: #99CC80;
1547
- --prijsvrij-alternative3-light-75: #CCE5BF;
1363
+ .middle-navigation {
1364
+ color: #73726e;
1365
+ font-family: var(--middle-navigation-font-family);
1366
+ }
1548
1367
 
1549
- --prijsvrij-danger-red: #D90000;
1550
- --prijsvrij-danger-red-hover: #A60000;
1551
- --prijsvrij-danger-red-disabled: #F7CCCC;
1368
+ .middle-navigation li {
1369
+ transition: all 0.3s ease-in-out;
1370
+ }
1552
1371
 
1553
- --prijsvrij-dark-600: #333333;
1554
- --prijsvrij-dark-500: #1a1a1a;
1555
- --prijsvrij-dark-400: #262626;
1556
- --prijsvrij-dark-300: #666666;
1557
- --prijsvrij-dark-200: #999999;
1372
+ .middle-navigation li:hover {
1373
+ color: var(--color-dark-200);
1374
+ }
1375
+ /* Menu styles */
1376
+ .menu-item {
1377
+ position: relative;
1378
+ }
1558
1379
 
1559
- --prijsvrij-light-600: #E0E0E0;
1560
- --prijsvrij-light-500: #707070;
1561
- --prijsvrij-light-400: #A8A8A8;
1562
- --prijsvrij-light-300: #E8E8E8;
1563
- --prijsvrij-light-200: #EFEFEF;
1564
1380
 
1565
- --btn-prijsvrij-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.11),0 1px 5px rgba(0,0,0,.12);
1381
+ .menu-item:hover:has(.menu-dropdown) .menu-link {
1382
+ background-color: white;
1383
+ color: var(--menu-link-hover-color);
1384
+ }
1566
1385
 
1567
- /* D-reizen */
1568
- --dreizen-primary: #0077BF;
1569
- --dreizen-primary-100: #003C60;
1570
- --dreizen-primary-200: #00598F;
1571
- --dreizen-primary-300: #80BBDF;
1572
-
1573
- --dreizen-secondary: #FF7801;
1574
- --dreizen-secondary-100: #803C00;
1575
- --dreizen-secondary-200: #BF5A01;
1576
- --dreizen-secondary-300: #FF9A40;
1577
- --dreizen-secondary-400: #FFEEDF;
1578
-
1579
- --dreizen-alternative: #52C75D;
1580
- --dreizen-alternative-100: #29642E;
1581
- --dreizen-alternative-200: #3D9546;
1582
- --dreizen-alternative-300: #72D17B;
1583
- --dreizen-alternative-400: #93DC9A;
1386
+ .menu-item:hover {
1387
+ background: rgba(0, 0, 0, .1);
1388
+ border-radius: 4px;
1389
+ }
1584
1390
 
1585
- --dreizen-danger-red: #cc3433;
1586
- --dreizen-danger-red-hover: #992726;
1587
- --dreizen-danger-red-disabled: #e68080;
1588
-
1589
- --dreizen-dark-600: #333333;
1590
- --dreizen-dark-500: #1a1a1a;
1591
- --dreizen-dark-400: #262626;
1592
- --dreizen-dark-300: #666666;
1593
- --dreizen-dark-200: #999999;
1391
+ .menu-item:hover .menu-link {
1392
+ color: white;
1393
+ }
1594
1394
 
1595
- --dreizen-light-600: #E8E8E8;
1596
- --dreizen-light-500: #747474;
1597
- --dreizen-light-400: #AEAEAE;
1598
- --dreizen-light-300: #F4F4F4;
1599
- --dreizen-light-200: #EEEEEE;
1600
-
1601
- --btn-dreizen-shadow: 0;
1395
+ .menu-item:hover .menu-item-icon {
1396
+ color: var(--menu-item-icon-hover-color);
1397
+ }
1602
1398
 
1603
- --usp-icon-color: #52c65c;
1399
+ .menu-link {
1400
+ color: var(--menu-link-color);
1604
1401
  }
1605
1402
 
1403
+ .menu-item-icon {
1404
+ color: var(--menu-item-icon-color);
1405
+ }
1606
1406
 
1607
- /* Apply de juiste variabelen op basis van data-brand */
1608
- :root[data-brand="prijsvrij"],
1609
- [data-brand="prijsvrij"] {
1610
- --color-primary: var(--prijsvrij-primary);
1611
- --color-primary-dark-50: var(--prijsvrij-primary-dark-50);
1612
- --color-primary-dark-25: var(--prijsvrij-primary-dark-25);
1613
- --color-primary-light-25: var(--prijsvrij-primary-light-25);
1614
- --color-primary-light-50: var(--prijsvrij-primary-light-50);
1615
- --color-primary-light-75: var(--prijsvrij-primary-light-75);
1616
-
1617
- --color-secondary: var(--prijsvrij-secondary);
1618
- --color-secondary-dark-50: var(--prijsvrij-secondary-dark-50);
1619
- --color-secondary-dark-25: var(--prijsvrij-secondary-dark-25);
1620
- --color-secondary-light-25: var(--prijsvrij-secondary-light-25);
1621
- --color-secondary-light-50: var(--prijsvrij-secondary-light-50);
1622
- --color-secondary-light-75: var(--prijsvrij-secondary-light-75);
1623
-
1624
- --color-alternative: var(--prijsvrij-alternative);
1625
- --color-alternative-dark-50: var(--prijsvrij-alternative-dark-50);
1626
- --color-alternative-dark-25: var(--prijsvrij-alternative-dark-25);
1627
- --color-alternative-light-25: var(--prijsvrij-alternative-light-25);
1628
- --color-alternative-light-50: var(--prijsvrij-alternative-light-50);
1629
- --color-alternative-light-75: var(--prijsvrij-alternative-light-75);
1630
-
1631
- --color-alternative2: var(--prijsvrij-alternative2);
1632
- --color-alternative2-dark-50: var(--prijsvrij-alternative2-dark-50);
1633
- --color-alternative2-dark-25: var(--prijsvrij-alternative2-dark-25);
1634
- --color-alternative2-light-25: var(--prijsvrij-alternative2-light-25);
1635
- --color-alternative2-light-50: var(--prijsvrij-alternative2-light-50);
1636
- --color-alternative2-light-75: var(--prijsvrij-alternative2-light-75);
1637
-
1638
- --color-alternative3: var(--prijsvrij-alternative3);
1639
- --color-alternative3-dark-50: var(--prijsvrij-alternative3-dark-50);
1640
- --color-alternative3-dark-25: var(--prijsvrij-alternative3-dark-25);
1641
- --color-alternative3-light-25: var(--prijsvrij-alternative3-light-25);
1642
- --color-alternative3-light-50: var(--prijsvrij-alternative3-light-50);
1643
- --color-alternative3-light-75: var(--prijsvrij-alternative3-light-75);
1644
-
1645
- --color-dark-600: var(--prijsvrij-dark-600);
1646
- --color-dark-500: var(--prijsvrij-dark-500);
1647
- --color-dark-400: var(--prijsvrij-dark-400);
1648
- --color-dark-300: var(--prijsvrij-dark-300);
1649
- --color-dark-200: var(--prijsvrij-dark-200);
1650
-
1651
- --color-light-600: var(--prijsvrij-light-600);
1652
- --color-light-500: var(--prijsvrij-light-500);
1653
- --color-light-400: var(--prijsvrij-light-400);
1654
- --color-light-300: var(--prijsvrij-light-300);
1655
- --color-light-200: var(--prijsvrij-light-200);
1656
-
1657
- --radius: var(--prijsvrij-radius);
1658
-
1659
- --fontFamily-price-check: var(--font-open-sans), sans-serif;
1660
- --fontFamily-price-check-price: "Hermes Maia T4", sans-serif;
1661
- --fontFamily-blog-widget: "Hermes Maia T4", sans-serif;
1662
- --fontFamily-blog-widget-date: var(--font-open-sans), sans-serif;
1407
+ .menu-dropdown {
1408
+ opacity: 0;
1409
+ pointer-events: none;
1410
+ transition: opacity 0.15s ease-in-out;
1411
+ max-height: calc(100vh - 32px);
1412
+ overflow: hidden;
1413
+ }
1663
1414
 
1664
- --fontWeight-price-text: 400;
1665
- --price-background: var(--prijsvrij-alternative);
1666
- --price-background-back: #ffbf2b;
1415
+ .menu-item[data-open="true"][data-ready="false"] .menu-dropdown {
1416
+ opacity: 0;
1417
+ visibility: hidden;
1418
+ pointer-events: none;
1419
+ }
1667
1420
 
1421
+ .menu-item[data-open="true"][data-ready="true"] .menu-dropdown {
1422
+ opacity: 1;
1423
+ visibility: visible;
1424
+ pointer-events: auto;
1425
+ }
1668
1426
 
1669
- /* Buttons */
1670
- --primary-btn-hover-color: var(--prijsvrij-alternative2-dark-25);
1671
- --primary-btn-color: var(--prijsvrij-alternative2);
1672
- --primary-btn-inactive-color: var(--prijsvrij-alternative2-light-75);
1673
- --primary-btn-box-shadow: 0 3px var(--prijsvrij-alternative2-dark-50);
1674
- --primary-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative2-dark-50);
1675
- --primary-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative2-dark-50);
1427
+ /* Create invisible bridge to prevent gap */
1428
+ .menu-dropdown::before {
1429
+ content: '';
1430
+ position: absolute;
1431
+ top: -12px;
1432
+ left: 0;
1433
+ right: 0;
1434
+ height: 12px;
1435
+ background: transparent;
1436
+ }
1676
1437
 
1677
- --secondary-btn-hover-color: var(--prijsvrij-alternative3-dark-25);
1678
- --secondary-btn-color: var(--prijsvrij-alternative3);
1679
- --secondary-btn-inactive-color: var(--prijsvrij-alternative3-light-75);
1680
- --secondary-btn-box-shadow: 0 3px var(--prijsvrij-alternative3-dark-50);
1681
- --secondary-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative3-dark-50);
1682
- --secondary-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative3-dark-50);
1438
+ .menu-dropdown.bottom-full::before {
1439
+ top: -12px;
1440
+ }
1683
1441
 
1684
- --alternative-btn-hover-color: var(--prijsvrij-alternative-dark-25);
1685
- --alternative-btn-color: var(--prijsvrij-alternative);
1686
- --alternative-btn-inactive-color: var(--prijsvrij-alternative-light-75);
1687
- --alternative-btn-box-shadow: 0 3px var(--prijsvrij-alternative-dark-50);
1688
- --alternative-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative-dark-50);
1689
- --alternative-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative-dark-50);
1442
+ .menu-dropdown.top-full::before {
1443
+ bottom: -12px;
1444
+ top: auto;
1445
+ }
1690
1446
 
1691
- --alternative2-btn-hover-color: var(--prijsvrij-alternative2-dark-25);
1692
- --alternative2-btn-color: var(--prijsvrij-alternative2);
1693
- --alternative2-btn-inactive-color: var(--prijsvrij-alternative2-light-75);
1694
- --alternative2-btn-box-shadow: 0 3px var(--prijsvrij-alternative2-dark-50);
1695
- --alternative2-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative2-dark-50);
1696
- --alternative2-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative2-dark-50);
1697
-
1698
- --alternative3-btn-hover-color: var(--prijsvrij-alternative3-dark-25);
1699
- --alternative3-btn-color: var(--prijsvrij-alternative3);
1700
- --alternative3-btn-inactive-color: var(--prijsvrij-alternative3-light-75);
1701
- --alternative3-btn-box-shadow: 0 3px var(--prijsvrij-alternative3-dark-50);
1702
- --alternative3-btn-box-shadow-active: 0 1px var(--prijsvrij-alternative3-dark-50);
1703
- --alternative3-btn-box-shadow-hover: 0 6px var(--prijsvrij-alternative3-dark-50);
1447
+ .menu-category:not(:last-child) {
1448
+ border-bottom: 1px solid #e5e7eb;
1449
+ }
1450
+
1451
+ .menu-dropdown a {
1452
+ white-space: nowrap;
1453
+ }
1454
+
1455
+ /* Ensure dropdown stays above other content */
1456
+ .menu-dropdown {
1457
+ z-index: 50;
1458
+ }
1459
+
1460
+ /* Add subtle animation for menu items */
1461
+ .menu-item > a {
1462
+ position: relative;
1463
+ transition: color 0.2s ease;
1464
+ }
1465
+
1466
+ /* Sticky category headers for better navigation when scrolling */
1467
+ .menu-dropdown .sticky {
1468
+ position: sticky;
1469
+ top: 0;
1470
+ background: white;
1471
+ z-index: 10;
1472
+ }
1473
+
1474
+ /* Hide dropdown scrollbars (keep scroll functionality) */
1475
+ .menu-dropdown {
1476
+ scrollbar-width: none; /* Firefox */
1477
+ -ms-overflow-style: none; /* IE/Edge legacy */
1478
+ }
1479
+
1480
+ .menu-dropdown::-webkit-scrollbar {
1481
+ width: 0;
1482
+ height: 0;
1483
+ }
1484
+
1485
+ /* Prevent dropdown from going off-screen horizontally */
1486
+ .menu-dropdown {
1487
+ max-width: 90vw;
1488
+ }
1489
+
1490
+ /* Ensure dropdown never goes negative left */
1491
+ .menu-dropdown.left-0 {
1492
+ left: 0;
1493
+ right: auto;
1494
+ }
1495
+
1496
+ /* Handle dropdown positioning */
1497
+ .menu-dropdown.top-full {
1498
+ top: 100%;
1499
+ }
1500
+
1501
+ .menu-dropdown.bottom-full {
1502
+ bottom: 100%;
1503
+ margin-bottom: 4px;
1504
+ }
1704
1505
 
1705
- --logo-url: var(--prijsvrij-logo-url);
1506
+ .menu-dropdown.left-0 {
1507
+ left: 0;
1508
+ }
1706
1509
 
1707
- --btn-shadow: var(--btn-prijsvrij-shadow);
1708
- --btn-outline-border: var(--prijsvrij-primary);
1709
- --btn-outline-color: var(--prijsvrij-primary);
1510
+ .menu-dropdown.right-0 {
1511
+ right: 0;
1512
+ }
1710
1513
 
1711
- --btn-outline-hover-border-color: var(--prijsvrij-primary-dark-25);
1712
- --btn-outline-hover-color: var(--prijsvrij-primary-dark-25);
1514
+ .menu-dropdown.left-1\/2 {
1515
+ left: 50%;
1516
+ }
1713
1517
 
1714
- --btn-text-color: var(--prijsvrij-primary);
1518
+ .menu-dropdown.-translate-x-1\/2 {
1519
+ transform: translateX(-50%);
1520
+ }
1715
1521
 
1716
- --btn-text-hover-color: var(--prijsvrij-primary-dark-25);
1717
- --price-check-color: var(--prijsvrij-alternative2);
1718
- --price-check-price-color: var(--prijsvrij-alternative2);
1719
- --price-text-padding-left: 0.5rem;
1720
1522
 
1721
- --danger-red: var(--prijsvrij-danger-red);
1722
- --danger-red-hover: var(--prijsvrij-danger-red-hover);
1723
- --danger-red-disabled: var(--prijsvrij-danger-red-disabled);
1724
- --price-text-padding-bottom: -0.5rem;
1725
- --price-price-padding-left: 1rem;
1726
- --price-price-padding-right: 0.5rem;
1727
- --price-minus-right: 10px;
1728
- --price-minus-bottom: 10px;
1729
- --price-price-margin-top: 0;
1523
+ /* Grid layout for dropdown */
1524
+ .menu-dropdown .grid {
1525
+ grid-template-columns: repeat(3, minmax(200px, 1fr));
1526
+ }
1730
1527
 
1731
- --toggle-active-background-color: var(--prijsvrij-primary);
1732
- --toggle-inactive-background-color: #EFF8FE;
1733
- --toggle-active-color: white;
1734
- --toggle-inactive-color: var(--prijsvrij-dark-600);
1735
- --toggle-font-family: var(--font-open-sans), sans-serif;
1528
+ /* Category styling in grid */
1529
+ .menu-dropdown .menu-category {
1530
+ min-width: 200px;
1531
+ }
1736
1532
 
1737
- --filter-button-background-color: var(--prijsvrij-primary);
1738
- --filter-button-background-hover-color: #005cbb;
1739
- --fontFamily-filter-button: var(--font-open-sans), sans-serif;
1533
+ .footer-navigation-link {
1534
+ color: var(--color-footer-navigation-link);
1535
+ }
1740
1536
 
1741
- --filter-button-icon-background-color: #80c8f8;
1742
- --filter-button-icon-background-hover-color: #002c49;
1537
+ .footer-navigation-category-link {
1538
+ color: var(--color-footer-navigation-category-link);
1539
+ }
1540
+ .blog-widget-title {
1541
+ font-family: var(--fontFamily-blog-widget);
1542
+ }
1543
+ .blog-widget-date {
1544
+ font-family: var(--fontFamily-blog-widget-date);
1545
+ }
1546
+ .searchBlock {
1547
+ background-color: var(--searchBlock-background-color);
1548
+ color: var(--searchBlock-text-color);
1549
+ font-size: var(--searchBlock-text-size);
1550
+ font-weight: var(--searchBlock-text-weight);
1551
+ font-family: var(--searchBlock-font-family);
1552
+ border-radius: var(--searchBlock-border-radius);
1553
+ }
1743
1554
 
1744
- --search-box-border-color: transparent;
1745
- --search-box-icon-color: var(--prijsvrij-dark-600);
1746
- --search-box-clear-icon-background-color: #e3e3e3;
1747
- --search-box-clear-icon-background-hover-color: #a0a0a0;
1748
- --search-box-clear-icon-color: white;
1555
+ .searchBlockButton {
1556
+ background-color: white;
1557
+ border-radius: var(--searchBlockButtonRadius);
1558
+ min-height: var(--searchBlockButtonHeight);
1559
+ }
1749
1560
 
1750
- --search-box-result-location-color: var(--prijsvrij-primary);
1751
- --search-box-result-hover-background-color: #edf7fe;
1561
+ .searchBlockButtonLabel {
1562
+ font-size: var(--searchBlockButtonLabel-text-size) !important;
1563
+ font-weight: var(--searchBlockButtonLabel-text-weight);
1564
+ font-family: var(--searchBlockButtonLabel-font-family);
1565
+ color: var(--searchBlockButtonLabel-color);
1566
+ }
1752
1567
 
1753
- --topMenu-background-color: #0083da;
1754
- --topHeaderMenu-background-color: #0083da;
1755
- --topMenu-background-color-hover: #004979;
1756
- --topMenu-boxShadow-color: transparent;
1757
- --topMenu-height: 40px;
1568
+ .searchBlockButtonIcon {
1569
+ color: var(--searchBlockButtonIcon-color);
1570
+ }
1758
1571
 
1759
- --counter-icon-color: #d90000;
1572
+ .searchBlockButtonSelectedValue {
1760
1573
 
1761
- --usp-font-family: var(--font-open-sans), sans-serif;
1762
- --middle-navigation-font-family: var(--font-open-sans), sans-serif;
1763
- --fontFamily-blog-widget: "Hermes Maia T4";
1574
+ font-family: var(--searchBlockButtonSelectedValue-font-family);
1575
+ color: var(--searchBlockButtonSelectedValue-color);
1576
+ font-size: var(--searchBlockButtonSelectedValue-text-size) !important;
1577
+ font-weight: var(--searchBlockButtonSelectedValue-text-weight);
1578
+ margin-top: var(--searchBlockButtonSelectedValue-margin-top);
1764
1579
 
1765
- --menu-link-color: white;
1766
- --menu-link-hover-color: var(--prijsvrij-primary);
1767
- --menu-item-icon-color: white;
1580
+ }
1768
1581
 
1769
- --color-footer-navigation-link: var(--prijsvrij-primary);
1770
- --color-footer-navigation-category-link: var(--prijsvrij-secondary);
1582
+ .searchBlockButtonSecondarySelectedValue {
1583
+ font-size: var(--searchBlockButtonLabel-text-size) !important;
1584
+ color: var(--searchBlockButtonIcon-color);
1585
+ }
1771
1586
 
1772
- --searchBlock-background-color: var(--prijsvrij-alternative);
1773
- --searchBlock-text-color: var(--prijsvrij-secondary);
1774
- --searchBlock-text-size: 24px;
1775
- --searchBlock-text-weight: 400;
1776
- --searchBlock-font-family: "Hermes Maia T4", sans-serif;
1777
- --searchBlock-border-radius: 8px;
1587
+ .searchBlockButtonDownIcon {
1588
+ color: var(--searchBlockButtonDownIcon-color);
1589
+ width: var(--searchBlockButtonDownIcon-size);
1590
+ height: var(--searchBlockButtonDownIcon-size);
1591
+ }
1592
+ .category-filter {
1593
+ font-family: var(--category-filter-font-family);
1594
+ }
1595
+ .collection-title {
1596
+ font-family: var(--collection-title-font-family)
1597
+ }
1778
1598
 
1779
- --searchBlockButtonLabel-text-size: clamp(10px, 2.5vw, 12px);
1780
- --searchBlockButtonLabel-text-weight: 600;
1781
- --searchBlockButtonLabel-font-family: var(--font-open-sans), sans-serif;
1782
- --searchBlockButtonLabel-color: var(--prijsvrij-dark-300);
1783
- --searchBlockButtonIcon-color: var(--prijsvrij-secondary);
1599
+ .collection-description {
1600
+ font-family: var(--collection-description-font-family);
1601
+ color: var(--color-dark-300);
1602
+
1603
+ }
1604
+ .review {
1605
+ box-shadow: 0 4px 80px rgba(0, 0, 0, .07), 0 .893452px 17.869px rgba(0, 0, 0, .042), 0 .266004px 5.32008px rgba(0, 0, 0, .028);
1606
+ }
1784
1607
 
1785
- --searchBlockButtonRadius: 4px;
1786
- --searchBlockButtonHeight: 50px;
1608
+ .review-color {
1609
+ color: var(--review-color);
1610
+ }
1787
1611
 
1788
- --searchBlockButtonSelectedValue-font-family: var(--font-open-sans), sans-serif;
1789
- --searchBlockButtonSelectedValue-color: var(--prijsvrij-dark-400);
1790
- --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
1791
- --searchBlockButtonSelectedValue-text-weight: 400;
1792
- --searchBlockButtonSelectedValue-margin-top: -4px;
1612
+ .review-number-color {
1613
+ background: var(--review-number-background-color);
1614
+ color: var(--review-number-color);
1615
+ }
1793
1616
 
1794
- --searchBlockButtonDownIcon-color: var(--prijsvrij-primary-light-25);
1795
- --searchBlockButtonDownIcon-size: 20px;
1617
+ .review-shadow {
1618
+ box-shadow: var(--review-shadow);
1619
+ }
1796
1620
 
1797
- --category-filter-font-family: var(--font-open-sans), sans-serif;
1621
+ .review-small {
1622
+ background: var(--review-color);
1623
+ color: white;
1624
+ }
1798
1625
 
1799
- --collection-title-font-family: "Hermes Maia T4", sans-serif;
1800
- --collection-description-font-family: var(--font-open-sans), sans-serif;
1626
+ .review-small-arrow {
1627
+ border-top-color: var(--review-color);
1628
+ }
1629
+ .hotel-accomodation-results-title {
1630
+ color: var(--hotel-accomodation-results-title-color);
1631
+ font-family: var(--hotel-accomodation-results-title-font);
1632
+ }
1801
1633
 
1802
- --usp-icon-color: var(--prijsvrij-alternative3);
1803
- --review-color: var(--prijsvrij-alternative3);
1804
- --review-number-background-color: inherit;
1805
- --review-number-color: var(--prijsvrij-alternative3);
1806
- --review-shadow: 0 4px 80px rgba(0,0,0,.07),0 .893452px 17.869px rgba(0,0,0,.042),0 .266004px 5.32008px rgba(0,0,0,.028);
1634
+ .hotel-accomodation-results-location {
1635
+ font-family: var(--hotel-accomodation-results-location-font);
1636
+ color: var(--hotel-accomodation-results-location-color);
1637
+ }
1638
+ .coupon-bite-top {
1639
+ -webkit-mask-image: radial-gradient(circle 12px at 0 100%, transparent 99%, #000), radial-gradient(circle 12px at 100% 100%, transparent 99%, #000);
1640
+ -webkit-mask-size: 51% 100%;
1641
+ -webkit-mask-position: left, right;
1642
+ -webkit-mask-repeat: no-repeat;
1643
+ mask-image: radial-gradient(circle 12px at 0 100%, transparent 99%, #000), radial-gradient(circle 12px at 100% 100%, transparent 99%, #000);
1644
+ mask-size: 51% 100%;
1645
+ mask-position: left, right;
1646
+ mask-repeat: no-repeat;
1647
+ }
1807
1648
 
1808
- --hotel-accomodation-results-title-color: var(--prijsvrij-secondary);
1809
- --hotel-accomodation-results-title-font: "Hermes Maia T4", sans-serif;
1649
+ .coupon-bite-dashes {
1650
+ -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 10px, #000 10px 18px);
1651
+ mask-image: repeating-linear-gradient(90deg, transparent 0 10px, #000 10px 18px);
1652
+ }
1810
1653
 
1811
- --hotel-accomodation-results-location-font: var(--font-open-sans), sans-serif;
1812
- --hotel-accomodation-results-location-color: #a8a8a8;
1654
+ .coupon-bite-bottom {
1655
+ -webkit-mask-image: radial-gradient(circle 12px at 0 0, transparent 99%, #000), radial-gradient(circle 12px at 100% 0, transparent 99%, #000);
1656
+ -webkit-mask-size: 51% 100%;
1657
+ -webkit-mask-position: left, right;
1658
+ -webkit-mask-repeat: no-repeat;
1659
+ mask-image: radial-gradient(circle 12px at 0 0, transparent 99%, #000), radial-gradient(circle 12px at 100% 0, transparent 99%, #000);
1660
+ mask-size: 51% 100%;
1661
+ mask-position: left, right;
1662
+ mask-repeat: no-repeat;
1663
+ }
1664
+ .gift-card {
1665
+ fill: linear-gradient(215deg, rgba(255, 255, 255, 0.20) -115.47%, #0092F2 36.73%);
1666
+ font-family: var(--font-open-sans), sans-serif;
1667
+ }
1813
1668
 
1814
- --viewed-accomodations-title-font: var(--font-open-sans), sans-serif;
1815
- --viewed-accomodations-title-text-color: var(--color-secondary);
1816
- --viewed-accomodations-header: var(--font-open-sans), sans-serif;
1817
- --viewed-accomodations-header-font-size: 18px;
1669
+ .gift-card-amount {
1670
+ font-family: "Hermes Maia T4", sans-serif;
1671
+ }
1818
1672
 
1819
- --viewed-accomodations-empty-color: var(--color-secondary);
1673
+ .popup-title {
1674
+ font-family: var(--popup-title-font-family);
1675
+ }
1820
1676
 
1821
- --viewed-accomodations-empty-text-color: var(--color-dark-400);
1677
+ .with-backdrop::backdrop {
1678
+ background-color: rgba(0, 0, 0, 0.5) !important;
1679
+ }
1822
1680
 
1823
- --quantity-buttons-border-color: var(--color-primary);
1824
- --quantity-buttons-color: var(--color-primary);
1825
- --quantity-buttons-border-color-hover: var(--color-secondary);
1826
- --quantity-buttons-value-color: var(--color-dark-400);
1681
+ /* Alternative approach for browsers that don't support ::backdrop */
1682
+ [data-popover].with-backdrop::backdrop {
1683
+ background-color: rgba(0, 0, 0, 0.5) !important;
1684
+ }
1827
1685
 
1828
- --matrix-table-days-color: var(--color-dark-400);
1829
- --matrix-table-month-header-color: var(--color-secondary);
1830
- --matrix-table-month-header-font-family: "Hermes Maia T4", sans-serif;
1686
+ .rotated-image-0,
1687
+ .rotated-image-1 {
1688
+ box-shadow: 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
1689
+ }
1690
+
1691
+ .rotated-image-2 {
1692
+ box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.07), 0 0.893px 17.869px 0 rgba(0, 0, 0, 0.04), 0 0.266px 5.32px 0 rgba(0, 0, 0, 0.03);
1693
+ }
1694
+ .spotlights-item {
1695
+ font-family: "Hermes Maia T4";
1696
+ }
1831
1697
 
1832
- --matrix-table-cell-color: var(--prijsvrij-primary-light-75);
1833
- --matrix-table-cell-border-color: var(--prijsvrij-light-600);
1834
- --matrix-table-cell-cheapest-color: var(--prijsvrij-primary);
1835
- --matrix-table-cell-cheapest-border-color: var(--prijsvrij-primary-dark-25);
1698
+ .viewed-accomodations {
1699
+ box-shadow: 0 1px 5px rgba(0,0,0,.12),0 2px 6.4px rgba(0,0,0,.11),0 3px 9.6px -2px rgba(0,0,0,.2);
1700
+ }
1836
1701
 
1837
- --matrix-table-cell-active-color: var(--prijsvrij-alternative);
1838
- --matrix-table-cell-active-border-color: #e4d22b;
1839
- --matrix-table-cell-active-text-color: var(--prijsvrij-alternative2);
1702
+ .viewed-accomodations-title {
1703
+ font-family: var(--viewed-accomodations-title-font);
1704
+ color: var(--viewed-accomodations-title-text-color);
1705
+ }
1840
1706
 
1841
- --matrix-table-days-amount-font: var(--font-open-sans), sans-serif;
1707
+ .viewed-accomodations-header {
1708
+ font-family: var(--viewed-accomodations-header);
1709
+ color: var(--viewed-accomodations-title-text-color);
1710
+ font-size: var(--viewed-accomodations-header-font-size);
1711
+ }
1842
1712
 
1843
- --matrix-table-days-weekday-color: var(--color-light-400);
1713
+ .viewed-accomodations-items, .viewed-accomodations-empty-header {
1714
+ color: var(--viewed-accomodations-empty-color);
1715
+ }
1844
1716
 
1845
- --popup-title-font-family: "Hermes Maia T4", sans-serif;
1717
+ .viewed-accomodations-empty-text-color {
1718
+ color: var(--viewed-accomodations-empty-text-color);
1719
+ }
1720
+ .quantity-buttons-border-color {
1721
+ border-color: var(--quantity-buttons-border-color);
1722
+ }
1846
1723
 
1847
-
1724
+ .quantity-buttons-border-color:hover:not(:disabled) {
1725
+ border-color: var(--quantity-buttons-border-color-hover);
1848
1726
  }
1849
1727
 
1850
- :root[data-brand="dreizen"],
1851
- [data-brand="dreizen"] {
1852
- --color-primary: var(--dreizen-primary);
1853
- --color-primary-100: var(--dreizen-primary-100);
1854
- --color-primary-200: var(--dreizen-primary-200);
1855
- --color-primary-300: var(--dreizen-primary-300);
1856
- --color-primary-light-25: var(--dreizen-primary-200);
1857
- --color-primary-light-50: var(--dreizen-primary-300);
1728
+ .quantity-buttons-border-color:hover:not(:disabled) .quantity-buttons-color {
1729
+ color: var(--quantity-buttons-border-color-hover);
1730
+ }
1858
1731
 
1859
- --color-secondary: var(--dreizen-secondary);
1860
- --color-secondary-100: var(--dreizen-secondary-100);
1861
- --color-secondary-200: var(--dreizen-secondary-200);
1862
- --color-secondary-300: var(--dreizen-secondary-300);
1863
- --color-secondary-400: var(--dreizen-secondary-400);
1864
-
1865
- --color-alternative: var(--dreizen-alternative);
1866
- --color-alternative-100: var(--dreizen-alternative-100);
1867
- --color-alternative-200: var(--dreizen-alternative-200);
1868
- --color-alternative-300: var(--dreizen-alternative-300);
1869
- --color-alternative-400: var(--dreizen-alternative-400);
1870
-
1871
- --color-dark-600: var(--dreizen-dark-600);
1872
- --color-dark-500: var(--dreizen-dark-500);
1873
- --color-dark-400: var(--dreizen-dark-400);
1874
- --color-dark-300: var(--dreizen-dark-300);
1875
- --color-dark-200: var(--dreizen-dark-200);
1876
-
1877
- --color-light-600: var(--dreizen-light-600);
1878
- --color-light-500: var(--dreizen-light-500);
1879
- --color-light-400: var(--dreizen-light-400);
1880
- --color-light-300: var(--dreizen-light-300);
1881
- --color-light-200: var(--dreizen-light-200);
1732
+ .quantity-buttons-color {
1733
+ color: var(--quantity-buttons-color);
1734
+ }
1882
1735
 
1883
- /* Buttons */
1884
- --primary-btn-color: var(--dreizen-primary);
1885
- --primary-btn-inactive-color: var(--dreizen-primary-400);
1886
- --primary-btn-box-shadow: 0 3px var(--dreizen-primary-100);
1887
- --primary-btn-box-shadow-active: 0 1px var(--dreizen-primary-100);
1888
- --primary-btn-box-shadow-hover: 0 6px var(--dreizen-primary-100);
1736
+ .quantity-buttons-value-color {
1737
+ color: var(--quantity-buttons-value-color);
1738
+ }
1889
1739
 
1890
- --secondary-btn-color: var(--dreizen-secondary);
1891
- --secondary-btn-inactive-color: var(--dreizen-secondary-400);
1892
- --secondary-btn-box-shadow: 0 3px var(--dreizen-secondary-200);
1893
- --secondary-btn-box-shadow-active: 0 1px var(--dreizen-secondary-200);
1894
- --secondary-btn-box-shadow-hover: 0 6px var(--dreizen-secondary-200);
1895
-
1896
- --alternative-btn-hover-color: var(--dreizen-alternative-200);
1897
- --alternative-btn-color: var(--dreizen-alternative);
1898
- --alternative-btn-inactive-color: var(--dreizen-alternative-300);
1899
- --alternative-btn-box-shadow: 0 3px var(--dreizen-alternative-200);
1900
- --alternative-btn-box-shadow-active: 0 1px var(--dreizen-alternative-200);
1901
- --alternative-btn-box-shadow-hover: 0 6px var(--dreizen-alternative-200);
1902
-
1903
- --alternative2-btn-hover-color: var(--dreizen-alternative2-200);
1904
- --alternative2-btn-color: var(--dreizen-alternative2);
1905
- --alternative2-btn-inactive-color: var(--dreizen-alternative2-300);
1906
- --alternative2-btn-box-shadow: 0 3px var(--dreizen-alternative2-200);
1907
- --alternative2-btn-box-shadow-active: 0 1px var(--dreizen-alternative2-200);
1908
- --alternative2-btn-box-shadow-hover: 0 6px var(--dreizen-alternative2-200);
1909
-
1910
- --alternative3-btn-hover-color: var(--dreizen-alternative3-200);
1911
- --alternative3-btn-color: var(--dreizen-alternative3);
1912
- --alternative3-btn-inactive-color: var(--dreizen-alternative3-300);
1913
- --alternative3-btn-box-shadow: 0 3px var(--dreizen-alternative3-200);
1914
- --alternative3-btn-box-shadow-active: 0 1px var(--dreizen-alternative3-200);
1915
- --alternative3-btn-box-shadow-hover: 0 6px var(--dreizen-alternative3-200);
1916
-
1917
- --logo-url: var(--dreizen-logo-url);
1740
+ .matrix-table-days {
1741
+ color: var(--matrix-table-days-color);
1742
+ }
1743
+ .matrix-table-month-header {
1744
+ color: var(--matrix-table-month-header-color);
1745
+ font-family: var(--matrix-table-month-header-font-family);
1746
+ }
1918
1747
 
1919
- --btn-shadow: var(--btn-dreizen-shadow);
1748
+ .matrix-table-cell:hover, .matrix-table-cell-cheapest:hover, .matrix-table-cell-active:hover {
1749
+ background: #e4e4e4;
1750
+ border-color: #e4e4e4;
1751
+ color: var(--matrix-table-days-color);
1752
+ }
1920
1753
 
1921
- --btn-outline-border: var(--dreizen-primary);
1922
- --btn-outline-color: var(--dreizen-primary);
1754
+ .matrix-table-cell-cheapest {
1755
+ background: var(--matrix-table-cell-cheapest-color);
1756
+ border-color: var(--matrix-table-cell-cheapest-border-color);
1757
+ font-weight: 600;
1758
+ }
1759
+ .matrix-table-cell {
1760
+ background: var(--matrix-table-cell-color);
1761
+ border-color: var(--matrix-table-cell-border-color);
1762
+ }
1763
+ .matrix-table-cell-active {
1764
+ background: var(--matrix-table-cell-active-color);
1765
+ border-color: var(--matrix-table-cell-active-border-color);
1766
+ color: var(--matrix-table-cell-active-text-color);
1767
+ font-weight: 600;
1768
+ }
1769
+ .matrix-table-days {
1770
+ font-family: var(--matrix-table-days-amount-font);
1771
+ }
1772
+ .matrix-table-dates, .matrix-table-dates-weekday {
1773
+ font-family: var(--matrix-table-days-amount-font);
1774
+ }
1775
+ .matrix-table-dates-weekday {
1776
+ color: var(--matrix-table-days-weekday-color);
1777
+ }
1923
1778
 
1924
- --btn-outline-hover-border-color: var(--dreizen-primary-200);
1925
- --btn-outline-hover-color: var(--dreizen-primary-200);
1779
+ .page-navigation:hover,
1780
+ .page-navigation.selected {
1781
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.20), 0 2px 2px 0 rgba(0, 0, 0, 0.11), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
1782
+ }
1783
+ /**
1784
+ * Custom Utilities
1785
+ * Additional utility classes for the UI Package
1786
+ * These styles are scoped to prevent global conflicts
1787
+ */
1926
1788
 
1927
- --btn-text-color: var(--dreizen-primary);
1789
+ /* Custom utilities */
1928
1790
 
1929
- --btn-text-hover-color: var(--dreizen-primary-200);
1930
- --price-check-color: var(--dreizen-dark-600);
1931
- --price-check-price-color: var(--dreizen-secondary);
1932
1791
 
1933
- --danger-red: var(--dreizen-danger-red);
1934
- --danger-red-hover: var(--dreizen-danger-red-hover);
1935
- --danger-red-disabled: var(--dreizen-danger-red-disabled);
1792
+ @utility transition-max-height {
1793
+ transition: max-height 0.3s ease-in-out;
1794
+ }
1936
1795
 
1937
- --fontFamily-price-check: var(--font-titillium-web), sans-serif;
1938
- --fontFamily-price-check-price: var(--font-titillium-web), sans-serif;
1939
- --fontFamily-blog-widget: var(--font-open-sans), sans-serif;
1940
- --fontFamily-blog-widget-date: var(--font-open-sans), sans-serif;
1796
+ @layer utilities {
1797
+ /* Animation utility classes - Only for UI components with data-pv-ui */
1798
+ [data-pv-ui] .animate-spin,
1799
+ .animate-spin {
1800
+ animation: spin 1s linear infinite;
1801
+ }
1802
+ [data-pv-ui] .animate-spin-slow,
1803
+ .animate-spin-slow {
1804
+ animation: spin 2s linear infinite;
1805
+ }
1806
+ [data-pv-ui] .animate-spin-once,
1807
+ .animate-spin-once {
1808
+ animation: spin 2s linear forwards;
1809
+ }
1941
1810
 
1942
- --fontWeight-price-text: 600;
1943
- --price-background: transparent;
1944
- --price-background-back: transparent;
1945
- --price-text-padding-left: 0;
1946
- --price-text-padding-bottom: 0;
1947
- --price-price-padding-left: 0;
1948
- --price-price-padding-right: 0;
1949
- --price-minus-right: 5px;
1950
- --price-minus-bottom: 10px;
1951
- --price-price-margin-top: -8px;
1811
+ [data-pv-ui] .animate-plane-bounce,
1812
+ .animate-plane-bounce {
1813
+ animation: airplane-bounce 5s ease-in-out infinite;
1814
+ }
1952
1815
 
1953
- --toggle-active-background-color: var(--dreizen-secondary);
1954
- --toggle-inactive-background-color: #ff780133;
1955
- --toggle-active-color: white;
1956
- --toggle-inactive-color: var(--dreizen-dark-600);
1957
- --toggle-font-family: var(--font-lato), sans-serif;
1816
+ [data-pv-ui] .animate-cloud-float,
1817
+ .animate-cloud-float {
1818
+ animation: cloud-move 7s infinite linear;
1819
+ }
1958
1820
 
1959
- --filter-button-background-color: var(--dreizen-primary);
1960
- --filter-button-background-hover-color: var(--dreizen-dark-600);
1961
- --fontFamily-filter-button: var(--font-lato), sans-serif;
1821
+ [data-pv-ui] .animate-cloud-float-2,
1822
+ .animate-cloud-float-2 {
1823
+ animation: cloud-move 7s -5s infinite linear;
1824
+ }
1962
1825
 
1963
- --filter-button-icon-background-color: #4099cf;
1964
- --filter-button-icon-background-hover-color: #002c49;
1965
- --search-box-border-color: var(--dreizen-secondary);
1966
- --search-box-icon-color: var(--dreizen-secondary);
1967
- --search-box-clear-icon-background-color: #e3e3e3;
1968
- --search-box-clear-icon-background-hover-color: #a0a0a0;
1969
- --search-box-clear-icon-color: white;
1826
+ [data-pv-ui] .animate-cloud-float-3,
1827
+ .animate-cloud-float-3 {
1828
+ animation: cloud-move 7s -10s infinite linear;
1829
+ }
1970
1830
 
1971
- --search-box-result-location-color: var(--dreizen-primary);
1972
- --search-box-result-hover-background-color: #edf7fe;
1831
+ /* Duration utility classes - Only for UI components with data-pv-ui */
1832
+ [data-pv-ui] .duration-sidebar,
1833
+ .duration-sidebar {
1834
+ transition-duration: var(--pv-transition-duration-sidebar, 300ms);
1835
+ }
1973
1836
 
1974
- --topMenu-background-color: transparent;
1975
- --topHeaderMenu-background-color: var(--color-secondary);
1976
- --topMenu-background-color-hover: var(--dreizen-secondary-200);
1977
- --topMenu-boxShadow-color: #f9f9f9;
1978
- --topMenu-height: 32px;
1837
+ [data-pv-ui] .duration-1000,
1838
+ .duration-1000 {
1839
+ transition-duration: 1000ms;
1840
+ }
1979
1841
 
1980
- --counter-icon-color: #ff6766;
1842
+ [data-pv-ui] .duration-700,
1843
+ .duration-700 {
1844
+ transition-duration: 700ms;
1845
+ }
1981
1846
 
1982
- --usp-font-family: var(--font-lato), sans-serif;
1983
- --middle-navigation-font-family: var(--font-lato), sans-serif;
1847
+ /* Gradient background utility classes - Only for UI components with data-pv-ui */
1848
+ [data-pv-ui] .bg-linear-gradient-y,
1849
+ .bg-linear-gradient-y {
1850
+ background-image: var(--pv-color-linear-gradient-y);
1851
+ }
1852
+ [data-pv-ui] .bg-linear-gradient-x,
1853
+ .bg-linear-gradient-x {
1854
+ background-image: var(--pv-color-linear-gradient-x);
1855
+ }
1856
+ [data-pv-ui] .bg-gradient-blue-pink,
1857
+ .bg-gradient-blue-pink {
1858
+ background-image: var(--pv-color-linear-gradient-x) !important;
1859
+ }
1860
+ [data-pv-ui] .bg-gradient-blue-green-y,
1861
+ .bg-gradient-blue-green-y {
1862
+ background-image: var(--pv-color-gradient-blue-green-y);
1863
+ }
1864
+ [data-pv-ui] .bg-gradient-blue-green-x,
1865
+ .bg-gradient-blue-green-x {
1866
+ background-image: var(--pv-color-gradient-blue-green-x);
1867
+ }
1868
+ [data-pv-ui] .bg-gradient-calendar,
1869
+ .bg-gradient-calendar {
1870
+ background-image: var(--pv-color-gradient-calendar);
1871
+ }
1872
+ [data-pv-ui] .hover\:bg-gradient-calendar:hover,
1873
+ .hover\:bg-gradient-calendar:hover {
1874
+ background-image: var(--pv-color-gradient-calendar);
1875
+ }
1876
+ @media (min-width: 768px) {
1877
+ [data-pv-ui] .md\:hover\:bg-gradient-calendar:hover,
1878
+ .md\:hover\:bg-gradient-calendar:hover {
1879
+ background-image: var(--pv-color-gradient-calendar);
1880
+ }
1881
+ }
1882
+ [data-pv-ui] .bg-nav-gradient,
1883
+ .bg-nav-gradient {
1884
+ background-image: var(--pv-color-nav-gradient);
1885
+ }
1886
+ [data-pv-ui] .bg-nav-gradient-mobile,
1887
+ .bg-nav-gradient-mobile {
1888
+ background-image: var(--pv-color-nav-gradient-mobile);
1889
+ }
1984
1890
 
1985
- --menu-link-color: var(--color-dark-600);
1986
- --menu-link-hover-color: var(--color-dark-600);
1987
- --menu-item-icon-color: var(--color-secondary);
1891
+ /* Toast notification colors - Scoped with prefix */
1892
+ :root {
1893
+ --pv-toastify-color-info: #2a67f6;
1894
+ --pv-toastify-color-success: #10d1bb;
1895
+ --pv-toastify-color-warning: #f8ec5b;
1896
+ --pv-toastify-color-error: #ed3f55;
1897
+ }
1988
1898
 
1989
- --color-footer-navigation-link: var(--color-dark-600);
1990
- --color-footer-navigation-category-link: #0077bf;
1899
+ /* Focus styles - Only for UI components with data-pv-ui */
1900
+ [data-pv-ui] button:focus-visible,
1901
+ button.pv-button:focus-visible {
1902
+ @reference focus:outline-hidden;
1903
+ @reference focus:ring-2;
1904
+ @reference focus:ring-offset-2;
1905
+ }
1991
1906
 
1992
- --searchBlock-background-color: var(--color-secondary);
1993
- --searchBlock-text-color: white;
1994
- --searchBlock-text-size: 20px;
1995
- --searchBlock-text-weight: 700;
1996
- --searchBlock-font-family: var(--font-lato), sans-serif;
1997
- --searchBlock-border-radius: 2px;
1907
+ /* Base layer styles - Only for UI components with data-pv-ui */
1908
+ @layer base {
1909
+ [data-pv-ui] button:not(:disabled),
1910
+ [data-pv-ui] [role="button"]:not(:disabled) {
1911
+ cursor: pointer;
1912
+ }
1913
+ }
1998
1914
 
1999
- --searchBlockButtonLabel-text-size: clamp(12px, 3vw, 14px);
2000
- --searchBlockButtonLabel-text-weight: 700;
2001
- --searchBlockButtonLabel-font-family: var(--font-lato), sans-serif;
2002
- --searchBlockButtonLabel-color: var(--dreizen-dark-600);
2003
- --searchBlockButtonIcon-color: var(--dreizen-dark-200);
1915
+ /* Editor styles - Only for UI components with data-pv-ui */
1916
+ [data-pv-ui] .is-editor-empty:first-of-type::before {
1917
+ @reference text-gray-800;
1918
+ color: #333333 !important;
1919
+ }
2004
1920
 
2005
- --searchBlockButtonRadius: 3px;
2006
- --searchBlockButtonHeight: 40px;
1921
+ /* List styles - Only for UI components with data-pv-ui */
1922
+ [data-pv-ui] ul {
1923
+ @reference list-disc;
1924
+ }
2007
1925
 
2008
- --searchBlockButtonSelectedValue-font-family: var(--font-lato), sans-serif;
2009
- --searchBlockButtonSelectedValue-color: var(--dreizen-dark-600);
2010
- --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
2011
- --searchBlockButtonSelectedValue-text-weight: 500;
2012
- --searchBlockButtonSelectedValue-margin-top: 0;
1926
+ [data-pv-ui] ol {
1927
+ @reference list-decimal;
1928
+ }
1929
+ }
2013
1930
 
2014
- --searchBlockButtonDownIcon-color: var(--dreizen-primary);
2015
- --searchBlockButtonDownIcon-size: 16px;
1931
+ /* Table animations - Only for UI components with data-pv-ui */
1932
+ [data-pv-ui] .table-animation-exit,
1933
+ .table-animation-exit {
1934
+ opacity: 1;
1935
+ transition: opacity 300ms ease-out;
1936
+ }
1937
+ [data-pv-ui] .table-animation-exit-active,
1938
+ .table-animation-exit-active {
1939
+ opacity: 0;
1940
+ transition: opacity 300ms ease-out;
1941
+ }
1942
+ [data-pv-ui] .table-animation-enter,
1943
+ .table-animation-enter {
1944
+ opacity: 0;
1945
+ transition: opacity 300ms ease-in;
1946
+ }
1947
+ [data-pv-ui] .table-animation-enter-active,
1948
+ .table-animation-enter-active {
1949
+ opacity: 1;
1950
+ transition: opacity 300ms ease-in;
1951
+ }
2016
1952
 
2017
- --category-filter-font-family: var(--font-lato), sans-serif;
1953
+ /* Spin animation keyframes */
1954
+ @keyframes spin {
1955
+ from {
1956
+ transform: rotate(0deg);
1957
+ }
1958
+ to {
1959
+ transform: rotate(360deg);
1960
+ }
1961
+ }
2018
1962
 
2019
- --collection-title-font-family: var(--font-titillium-web), sans-serif;
2020
- --collection-description-font-family: var(--font-lato), sans-serif;
1963
+ @keyframes airplane-bounce {
1964
+ 0% {
1965
+ transform: translate3d(0, 0, 0);
1966
+ }
1967
+ 25% {
1968
+ transform: translate3d(0, -2%, 0);
1969
+ }
1970
+ 50% {
1971
+ transform: translate3d(0, 0, 0);
1972
+ }
1973
+ 75% {
1974
+ transform: translate3d(0, 2%, 0);
1975
+ }
1976
+ 100% {
1977
+ transform: translate3d(0, 0, 0);
1978
+ }
1979
+ }
2021
1980
 
2022
- --usp-icon-color: #52c65c;
1981
+ @keyframes cloud-move {
1982
+ 0% {
1983
+ left: 100%;
1984
+ }
1985
+ 100% {
1986
+ left: -100%;
1987
+ }
1988
+ }
2023
1989
 
2024
- --review-color: #0077bf;
2025
- --review-number-background-color: #0077bf;
2026
- --review-number-color: white;
2027
- --review-shadow: 1px 1px 5px 0 rgba(0,0,0,.15),0 0 1px 0 rgba(0,0,0,.3);
1990
+ /**
1991
+ * Global CSS Styles
1992
+ * Main stylesheet for the UI Package
1993
+ */
2028
1994
 
2029
- --hotel-accomodation-results-title-color: var(--color-dark-600);
2030
- --hotel-accomodation-results-title-font: var(--font-titillium-web), sans-serif;
2031
1995
 
2032
- --hotel-accomodation-results-location-font: var(--font-lato), sans-serif;
2033
- --hotel-accomodation-results-location-color: #a8a8a8;
1996
+ @keyframes spin {
1997
+ from {
1998
+ transform: rotate(0deg);
1999
+ }
2000
+ to {
2001
+ transform: rotate(360deg);
2002
+ }
2003
+ }
2034
2004
 
2035
- --viewed-accomodations-title-font: var(--font-titillium-web), sans-serif;
2036
- --viewed-accomodations-title-text-color: var(--color-dark-600);
2037
- --viewed-accomodations-header: var(--font-lato), sans-serif;
2038
- --viewed-accomodations-header-font-size: 16px;
2005
+ @keyframes flyToTarget {
2006
+ 0% {
2007
+ transform: translate(0, 0) scale(1);
2008
+ opacity: 1;
2009
+ }
2010
+ 20% {
2011
+ transform: translate(0, 0) scale(1.2);
2012
+ opacity: 1;
2013
+ }
2014
+ 100% {
2015
+ transform: translate(
2016
+ calc(var(--end-x) - var(--start-x)),
2017
+ calc(var(--end-y) - var(--start-y))
2018
+ ) scale(0.9);
2019
+ opacity: 1;
2020
+ }
2021
+ }
2039
2022
 
2040
- --viewed-accomodations-empty-color: var(--color-dark-600);
2023
+ @keyframes popEffect {
2024
+ 0% {
2025
+ transform: scale(1);
2026
+ }
2027
+ 50% {
2028
+ transform: scale(1.3);
2029
+ }
2030
+ 100% {
2031
+ transform: scale(1);
2032
+ }
2033
+ }
2041
2034
 
2042
- --viewed-accomodations-empty-text-color: var(--color-dark-600);
2035
+ [data-pv-ui] * {
2036
+ box-sizing: border-box;
2037
+ }
2043
2038
 
2044
- --quantity-buttons-border-color: var(--color-secondary);
2045
- --quantity-buttons-color: var(--color-secondary);
2046
- --quantity-buttons-border-color-hover: var(--color-secondary-200);
2047
- --quantity-buttons-value-color: var(--color-dark-400);
2039
+ .flying-heart-icon {
2040
+ animation: flyToTarget 1s cubic-bezier(0.25, -0.3, 0.75, 1.1) forwards;
2041
+ }
2048
2042
 
2049
- --matrix-table-days-color: var(--color-dark-600);
2050
- --matrix-table-month-header-color: var(--color-dark-600);
2051
- --matrix-table-month-header-font-family: var(--font-titillium-web), sans-serif;
2043
+ .counter-icon-pop {
2044
+ animation: popEffect 0.3s ease-out;
2045
+ }
2052
2046
 
2053
- --matrix-table-cell-color: #bfddef;
2054
- --matrix-table-cell-border-color: #bfddef;
2055
- --matrix-table-cell-cheapest-color: var(--dreizen-primary);
2056
- --matrix-table-cell-cheapest-border-color: var(--dreizen-primary);
2047
+ .tiptap {
2048
+ :first-child {
2049
+ margin-top: 0;
2050
+ }
2057
2051
 
2058
- --matrix-table-days-amount-font: var(--font-lato), sans-serif;
2052
+ /* List styles */
2053
+ ul,
2054
+ ol {
2055
+ padding: 0 1rem;
2056
+ margin: 1.25rem 1rem 1.25rem 0.4rem;
2059
2057
 
2060
- --matrix-table-days-weekday-color: var(--color-light-400);
2061
- --matrix-table-cell-active-color: var(--color-secondary);
2062
- --matrix-table-cell-active-border-color: var(--color-secondary);
2063
- --matrix-table-cell-active-text-color: var(--color-white);
2058
+ li p {
2059
+ margin-top: 0.25em;
2060
+ margin-bottom: 0.25em;
2061
+ }
2062
+ }
2063
+ }
2064
2064
 
2065
- --popup-title-font-family: var(--font-lato), sans-serif;
2065
+ .font-lato {
2066
+ font-family: var(--font-lato), sans-serif;
2066
2067
  }
2067
2068
 
2069
+
2068
2070
  /* Custom Range Slider Styles */
2069
2071
  .range-slider {
2070
2072
  -webkit-appearance: none;
@@ -2210,4 +2212,5 @@ button.btn-secondary:hover:active {
2210
2212
  }
2211
2213
 
2212
2214
 
2215
+
2213
2216
  /*# sourceMappingURL=index.css.map*/