@tipp/ui 1.6.4 → 1.6.6

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 (119) hide show
  1. package/dist/app/index.cjs +54 -20
  2. package/dist/app/index.cjs.map +1 -1
  3. package/dist/app/index.js +11 -11
  4. package/dist/app/platform/edit-coaching-time.cjs +8 -5
  5. package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
  6. package/dist/app/platform/edit-coaching-time.js +3 -3
  7. package/dist/app/platform/edit-service-type.cjs.map +1 -1
  8. package/dist/app/platform/edit-service-type.js +2 -2
  9. package/dist/app/platform/goal-manage-card-edit.cjs +7 -4
  10. package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
  11. package/dist/app/platform/goal-manage-card-edit.js +3 -3
  12. package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
  13. package/dist/app/platform/on-offline-radio-card.js +2 -2
  14. package/dist/app/platform/reservation-card.cjs +8 -5
  15. package/dist/app/platform/reservation-card.cjs.map +1 -1
  16. package/dist/app/platform/reservation-card.js +3 -3
  17. package/dist/app/platform/session-card.cjs +8 -5
  18. package/dist/app/platform/session-card.cjs.map +1 -1
  19. package/dist/app/platform/session-card.js +4 -4
  20. package/dist/app/platform/userInfos/coaching-customer-info/index.cjs +38 -12
  21. package/dist/app/platform/userInfos/coaching-customer-info/index.cjs.map +1 -1
  22. package/dist/app/platform/userInfos/coaching-customer-info/index.js +4 -4
  23. package/dist/app/platform/userInfos/coaching-customer-info/large.cjs +24 -9
  24. package/dist/app/platform/userInfos/coaching-customer-info/large.cjs.map +1 -1
  25. package/dist/app/platform/userInfos/coaching-customer-info/large.d.cts +1 -1
  26. package/dist/app/platform/userInfos/coaching-customer-info/large.d.ts +1 -1
  27. package/dist/app/platform/userInfos/coaching-customer-info/large.js +2 -2
  28. package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs +22 -9
  29. package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs.map +1 -1
  30. package/dist/app/platform/userInfos/coaching-customer-info/medium.d.cts +1 -1
  31. package/dist/app/platform/userInfos/coaching-customer-info/medium.d.ts +1 -1
  32. package/dist/app/platform/userInfos/coaching-customer-info/medium.js +2 -2
  33. package/dist/app/platform/userInfos/session-user-info-detail.cjs +16 -9
  34. package/dist/app/platform/userInfos/session-user-info-detail.cjs.map +1 -1
  35. package/dist/app/platform/userInfos/session-user-info-detail.d.cts +2 -1
  36. package/dist/app/platform/userInfos/session-user-info-detail.d.ts +2 -1
  37. package/dist/app/platform/userInfos/session-user-info-detail.js +2 -2
  38. package/dist/app/platform/userInfos/utils.cjs +8 -6
  39. package/dist/app/platform/userInfos/utils.cjs.map +1 -1
  40. package/dist/app/platform/userInfos/utils.d.cts +12 -2
  41. package/dist/app/platform/userInfos/utils.d.ts +12 -2
  42. package/dist/app/platform/userInfos/utils.js +1 -1
  43. package/dist/chunk-2QBJJBBV.js +145 -0
  44. package/dist/chunk-2QBJJBBV.js.map +1 -0
  45. package/dist/chunk-373AW6HR.js +277 -0
  46. package/dist/chunk-373AW6HR.js.map +1 -0
  47. package/dist/chunk-5E6WM7Z4.js +64 -0
  48. package/dist/chunk-5E6WM7Z4.js.map +1 -0
  49. package/dist/chunk-7NXD7PLX.js +74 -0
  50. package/dist/chunk-7NXD7PLX.js.map +1 -0
  51. package/dist/chunk-AEHUSHES.js +145 -0
  52. package/dist/chunk-AEHUSHES.js.map +1 -0
  53. package/dist/chunk-AGURJ3T5.js +277 -0
  54. package/dist/chunk-AGURJ3T5.js.map +1 -0
  55. package/dist/chunk-BJ2HH4TJ.js +57 -0
  56. package/dist/chunk-BJ2HH4TJ.js.map +1 -0
  57. package/dist/chunk-C7XYI4HY.js +277 -0
  58. package/dist/chunk-C7XYI4HY.js.map +1 -0
  59. package/dist/chunk-EPZ2D427.js +145 -0
  60. package/dist/chunk-EPZ2D427.js.map +1 -0
  61. package/dist/chunk-EVCB4ZZJ.js +60 -0
  62. package/dist/chunk-EVCB4ZZJ.js.map +1 -0
  63. package/dist/chunk-FUTVSARU.js +145 -0
  64. package/dist/chunk-FUTVSARU.js.map +1 -0
  65. package/dist/chunk-GGXPZLTY.js +62 -0
  66. package/dist/chunk-GGXPZLTY.js.map +1 -0
  67. package/dist/chunk-HKRIJNY6.js +64 -0
  68. package/dist/chunk-HKRIJNY6.js.map +1 -0
  69. package/dist/chunk-IJSQS7YT.js +74 -0
  70. package/dist/chunk-IJSQS7YT.js.map +1 -0
  71. package/dist/chunk-LUE7QN3Z.js +192 -0
  72. package/dist/chunk-LUE7QN3Z.js.map +1 -0
  73. package/dist/chunk-MD2DWARX.js +64 -0
  74. package/dist/chunk-MD2DWARX.js.map +1 -0
  75. package/dist/chunk-NHFRCEK6.js +102 -0
  76. package/dist/chunk-NHFRCEK6.js.map +1 -0
  77. package/dist/chunk-NJWCZXWW.js +30 -0
  78. package/dist/chunk-NJWCZXWW.js.map +1 -0
  79. package/dist/chunk-R6BHSDHQ.js +145 -0
  80. package/dist/chunk-R6BHSDHQ.js.map +1 -0
  81. package/dist/chunk-RAUCQTT3.js +57 -0
  82. package/dist/chunk-RAUCQTT3.js.map +1 -0
  83. package/dist/chunk-SQKKAVI3.js +145 -0
  84. package/dist/chunk-SQKKAVI3.js.map +1 -0
  85. package/dist/chunk-TNJG6DRI.js +174 -0
  86. package/dist/chunk-TNJG6DRI.js.map +1 -0
  87. package/dist/chunk-TTIKEEMM.js +192 -0
  88. package/dist/chunk-TTIKEEMM.js.map +1 -0
  89. package/dist/chunk-UC5ZM5ZM.js +174 -0
  90. package/dist/chunk-UC5ZM5ZM.js.map +1 -0
  91. package/dist/chunk-UH3EXAIO.js +277 -0
  92. package/dist/chunk-UH3EXAIO.js.map +1 -0
  93. package/dist/chunk-V5EAAF36.js +30 -0
  94. package/dist/chunk-V5EAAF36.js.map +1 -0
  95. package/dist/chunk-VWVFUMDN.js +30 -0
  96. package/dist/chunk-VWVFUMDN.js.map +1 -0
  97. package/dist/chunk-ZUQARZ2L.js +74 -0
  98. package/dist/chunk-ZUQARZ2L.js.map +1 -0
  99. package/dist/index.cjs +54 -20
  100. package/dist/index.cjs.map +1 -1
  101. package/dist/index.css +2000 -1996
  102. package/dist/index.css.map +1 -1
  103. package/dist/index.js +11 -11
  104. package/dist/molecules/date-picker/date-picker-button.cjs +7 -4
  105. package/dist/molecules/date-picker/date-picker-button.cjs.map +1 -1
  106. package/dist/molecules/date-picker/date-picker-button.js +1 -1
  107. package/dist/molecules/index.cjs +8 -5
  108. package/dist/molecules/index.cjs.map +1 -1
  109. package/dist/molecules/index.js +2 -2
  110. package/dist/molecules/time-select.cjs +1 -1
  111. package/dist/molecules/time-select.cjs.map +1 -1
  112. package/dist/molecules/time-select.js +1 -1
  113. package/package.json +1 -1
  114. package/src/app/platform/userInfos/coaching-customer-info/large.tsx +15 -2
  115. package/src/app/platform/userInfos/coaching-customer-info/medium.tsx +17 -2
  116. package/src/app/platform/userInfos/session-user-info-detail.tsx +8 -2
  117. package/src/app/platform/userInfos/utils.tsx +24 -14
  118. package/src/molecules/date-picker/date-picker-button.tsx +7 -4
  119. package/src/molecules/time-select.tsx +3 -1
package/dist/index.css CHANGED
@@ -28655,1593 +28655,1469 @@ h2.react-datepicker__current-month{
28655
28655
  transform: rotate(360deg);
28656
28656
  }
28657
28657
  }
28658
- .tipp_datePicker{
28659
- color: var(--gary-12);
28658
+ .kg-audio-card,
28659
+ .kg-audio-card *{
28660
+ box-sizing: border-box;
28660
28661
  }
28661
- .tipp_datePicker.full-width{
28662
+ .kg-audio-card{
28663
+ display: flex;
28662
28664
  width: 100%;
28665
+ min-height: 96px;
28666
+ border-radius: 6px;
28667
+ padding: 4px;
28668
+ background: #fff;
28669
+ color: #222;
28670
+ box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
28671
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
28663
28672
  }
28664
- .tipp_datePicker input{
28665
- border-radius: var(--radius-2);
28666
- border-color: var(--gray-a5);
28667
- border-width: 1px;
28668
- color: var(--gary-12);
28669
- border: none;
28670
- outline: none;
28671
- box-shadow: inset 0 0 0 1px var(--gray-a7);
28673
+ .kg-audio-card + .kg-audio-card{
28674
+ margin-top: 1em;
28672
28675
  }
28673
- .tipp_datePicker input:focus{
28674
- box-shadow: inset 0 0 0 2px var(--accent-a8);
28676
+ .kg-audio-thumbnail{
28677
+ display: flex;
28678
+ justify-content: center;
28679
+ align-items: center;
28680
+ width: 80px;
28681
+ min-width: 80px;
28682
+ margin: 8px;
28683
+ background: 0 0;
28684
+ -o-object-fit: cover;
28685
+ object-fit: cover;
28686
+ aspect-ratio: 1/1;
28687
+ border-radius: 3px;
28675
28688
  }
28676
- .tipp_datePicker.small input{
28677
- font-size: 12px;
28689
+ .kg-audio-thumbnail.placeholder{
28690
+ background: var(--ghost-accent-color);
28691
+ }
28692
+ .kg-audio-thumbnail.placeholder svg{
28693
+ width: 24px;
28678
28694
  height: 24px;
28679
- padding: 0 var(--space-2);
28695
+ fill: #fff;
28680
28696
  }
28681
- .tipp_datePicker.medium input{
28682
- font-size: 14px;
28683
- height: 32px;
28684
- padding: 0 var(--space-2);
28697
+ .kg-audio-player-container{
28698
+ position: relative;
28699
+ display: flex;
28700
+ flex-direction: column;
28701
+ justify-content: space-between;
28702
+ width: 100%;
28703
+ --seek-before-width: 0%;
28704
+ --volume-before-width: 100%;
28705
+ --buffered-width: 0%;
28685
28706
  }
28686
- .tipp_datePicker.large input{
28707
+ .kg-audio-title{
28708
+ width: 100%;
28709
+ margin: 8px 0 0;
28710
+ padding: 8px 12px;
28711
+ border: 0;
28712
+ font-family: inherit;
28687
28713
  font-size: 16px;
28688
- height: 40px;
28689
- padding: 0 var(--space-3);
28690
- }
28691
- .react-datepicker.tipp_datePicker_calendar{
28692
- font-family: var(--default-font-family);
28693
- background-color: var(--color-panel-solid);
28694
- color: var(--gray-12);
28695
- box-shadow: var(--shadow-3);
28696
- border-color: var(--gray-5);
28697
- display: flex;
28714
+ font-weight: 600;
28715
+ line-height: 1.15em;
28716
+ background: 0 0;
28698
28717
  }
28699
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__time-container
28700
- .react-datepicker__time
28701
- .react-datepicker__time-box
28702
- ul.react-datepicker__time-list li.react-datepicker__time-list-item{
28718
+ .kg-audio-player{
28703
28719
  display: flex;
28720
+ flex-grow: 1;
28704
28721
  align-items: center;
28705
- justify-content: center;
28706
- }
28707
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__time-container
28708
- .react-datepicker__time
28709
- .react-datepicker__time-box
28710
- ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{
28711
- background-color: var(--accent-a3);
28722
+ padding: 8px 12px;
28712
28723
  }
28713
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__time-container
28714
- .react-datepicker__time
28715
- .react-datepicker__time-box
28716
- ul.react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--selected{
28717
- background-color: var(--accent-9);
28718
- color: var(--accent-contrast);
28719
- font-weight: 400;
28724
+ .kg-audio-current-time,
28725
+ .kg-audio-time{
28726
+ font-family: inherit;
28727
+ font-size: 12.5px;
28728
+ font-weight: 500;
28729
+ line-height: 1em;
28730
+ white-space: nowrap;
28720
28731
  }
28721
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__day--keyboard-selected{
28722
- background-color: var(--accent-4);
28732
+ .kg-audio-current-time{
28733
+ min-width: 38px;
28734
+ padding: 0 4px;
28723
28735
  }
28724
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__day--disabled{
28725
- opacity: 0.5;
28736
+ .kg-audio-time{
28737
+ width: 56px;
28738
+ color: #ababab;
28726
28739
  }
28727
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__triangle,
28728
- .react-datepicker.tipp_datePicker_calendar .rt-SelectIcon{
28729
- display: none;
28740
+ .kg-audio-duration{
28741
+ padding: 0 4px;
28730
28742
  }
28731
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__header{
28732
- background-color: var(--accent-a3);
28733
- border-color: var(--gray-5);
28743
+ .kg-audio-pause-icon,
28744
+ .kg-audio-play-icon{
28745
+ position: relative;
28746
+ bottom: 1px;
28747
+ padding: 0 4px 0 0;
28748
+ font-size: 0;
28749
+ background: 0 0;
28734
28750
  }
28735
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__day,
28736
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__day-name{
28737
- color: var(--gray-12);
28751
+ .kg-audio-hide{
28752
+ display: none !important;
28738
28753
  }
28739
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__day:hover{
28740
- background-color: var(--accent-a3);
28741
- color: var(--gray-12);
28754
+ .kg-audio-pause-icon svg,
28755
+ .kg-audio-play-icon svg{
28756
+ width: 14px;
28757
+ height: 14px;
28758
+ fill: currentColor;
28742
28759
  }
28743
- .react-datepicker.tipp_datePicker_calendar .react-datepicker__day--selected{
28744
- color: var(--accent-contrast);
28745
- background-color: var(--accent-9);
28760
+ .kg-audio-seek-slider{
28761
+ flex-grow: 1;
28762
+ margin: 0 4px;
28746
28763
  }
28747
- .react-datepicker.tipp_datePicker_calendar .react-datepicker-time__header{
28748
- font-weight: 400;
28764
+ @media (max-width: 640px) {
28765
+ .kg-audio-seek-slider{
28766
+ display: none;
28767
+ }
28749
28768
  }
28750
- .expand-table{
28751
- box-sizing: content-box;
28752
- width: 100%;
28769
+ .kg-audio-playback-rate{
28770
+ min-width: 37px;
28771
+ padding: 0 4px;
28772
+ font-family: inherit;
28773
+ font-size: 12.5px;
28774
+ font-weight: 600;
28775
+ line-height: 1em;
28776
+ text-align: left;
28777
+ background: 0 0;
28778
+ white-space: nowrap;
28753
28779
  }
28754
- .expand-table .thead .tr{
28755
- background-color: var(--accent-a2);
28756
- padding: var(--space-1) var(--space-5);
28757
- min-height: 44px;
28758
- display: grid;
28759
- border-radius: var(--radius-5);
28760
- overflow: hidden;
28780
+ @media (max-width: 640px) {
28781
+ .kg-audio-playback-rate{
28782
+ padding-left: 8px;
28783
+ }
28761
28784
  }
28762
- .expand-table .thead .tr .th{
28763
- display: flex;
28785
+ .kg-audio-mute-icon,
28786
+ .kg-audio-unmute-icon{
28787
+ position: relative;
28788
+ bottom: -1px;
28789
+ padding: 0 4px;
28790
+ font-size: 0;
28791
+ background: 0 0;
28764
28792
  }
28765
- .expand-table .thead .tr .th button{
28766
- padding: 0;
28767
- background: transparent;
28768
- border: none;
28769
- display: inline-block;
28770
- display: flex;
28771
- align-items: center;
28793
+ @media (max-width: 640px) {
28794
+ .kg-audio-mute-icon,
28795
+ .kg-audio-unmute-icon{
28796
+ margin-left: auto;
28797
+ }
28772
28798
  }
28773
- .expand-table .thead .tr .th.left{
28774
- justify-content: flex-start;
28799
+ .kg-audio-mute-icon svg,
28800
+ .kg-audio-unmute-icon svg{
28801
+ width: 16px;
28802
+ height: 16px;
28803
+ fill: currentColor;
28775
28804
  }
28776
- .expand-table .thead .tr .th.right{
28777
- justify-content: flex-end;
28805
+ .kg-audio-volume-slider{
28806
+ width: 80px;
28778
28807
  }
28779
- .expand-table .thead .tr .th.center{
28780
- justify-content: center;
28808
+ @media (max-width: 400px) {
28809
+ .kg-audio-volume-slider{
28810
+ display: none;
28811
+ }
28781
28812
  }
28782
- .expand-table .th,
28783
- .expand-table .td{
28784
- padding: var(--space-2);
28813
+ .kg-audio-seek-slider::before,
28814
+ .kg-audio-volume-slider::before{
28815
+ content: '';
28816
+ position: absolute;
28817
+ left: 0;
28818
+ width: var(--seek-before-width) !important;
28819
+ height: 4px;
28820
+ cursor: pointer;
28821
+ background-color: currentColor;
28822
+ border-radius: 2px;
28785
28823
  }
28786
- .expand-table .th:first-child, .expand-table .td:first-child{
28787
- padding-left: 0;
28824
+ .kg-audio-volume-slider::before{
28825
+ width: var(--volume-before-width) !important;
28788
28826
  }
28789
- .expand-table .th:last-child, .expand-table .td:last-child{
28790
- padding-right: 0;
28827
+ .kg-audio-player-container input[type='range']{
28828
+ position: relative;
28829
+ -webkit-appearance: none;
28830
+ background: 0 0;
28831
+ height: auto;
28832
+ padding: 0;
28833
+ border: 0;
28791
28834
  }
28792
- .expand-table .tbody{
28793
- margin-top: var(--space-1);
28835
+ .kg-audio-player-container input[type='range']:focus,
28836
+ .kg-video-card input[type='range']:focus{
28837
+ outline: 0;
28794
28838
  }
28795
- .expand-table .tbody .tr-wrapper{
28796
- cursor: default;
28797
- border-radius: var(--radius-6);
28798
- border: 1px solid transparent;
28799
- box-shadow: var(--shadow-2);
28800
- overflow: hidden;
28801
- margin-bottom: var(--space-1);
28802
- background-color: var(--color-panel-solid);
28803
- transition: 0.3s ease-in-out background-color border-color;
28804
- }
28805
- .expand-table .tbody .tr-wrapper.clickable:hover, .expand-table .tbody .tr-wrapper.expandable:hover{
28806
- border: 1px solid var(--accent-a7);
28807
- background-color: var(--accent-a2);
28808
- }
28809
- .expand-table .tbody .tr-wrapper.clickable button.tr, .expand-table .tbody .tr-wrapper.expandable button.tr{
28839
+ .kg-audio-player-container input[type='range']::-webkit-slider-thumb{
28840
+ -webkit-appearance: none;
28841
+ position: relative;
28842
+ box-sizing: content-box;
28843
+ width: 13px;
28844
+ height: 13px;
28845
+ margin: -5px 0 0;
28846
+ border: 0;
28810
28847
  cursor: pointer;
28848
+ background: #fff;
28849
+ border-radius: 50%;
28850
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
28811
28851
  }
28812
- .expand-table .tbody .tr-wrapper.expandable .expand-comp-wrapper{
28813
- width: 100%;
28814
- height: 100%;
28815
- border-top: 1px solid var(--gray-3);
28852
+ .kg-audio-player-container button,
28853
+ .kg-video-card button{
28854
+ display: flex;
28855
+ align-items: center;
28856
+ border: 0;
28857
+ cursor: pointer;
28816
28858
  }
28817
- .expand-table .tbody .tr-wrapper button.tr{
28818
- -webkit-user-select: text;
28819
- -moz-user-select: text;
28820
- user-select: text;
28821
- background: transparent;
28859
+ .kg-audio-player-container input[type='range']::-webkit-slider-runnable-track{
28822
28860
  width: 100%;
28823
- padding: var(--space-3) var(--space-5);
28824
- min-height: 64px;
28825
- display: grid;
28826
- flex-direction: row;
28827
- align-items: center;
28828
- border: none;
28829
- border-radius: var(--radius-6);
28861
+ height: 4px;
28862
+ cursor: pointer;
28863
+ background: rgba(124, 139, 154, 0.25);
28864
+ border-radius: 2px;
28830
28865
  }
28831
- .expand-table .tbody .tr-wrapper button.tr .td{
28832
- font-size: var(--font-size-2);
28833
- display: flex;
28834
- align-items: center;
28835
- text-align: left;
28866
+ .kg-audio-player-container input[type='range']:active::-webkit-slider-thumb{
28867
+ transform: scale(1.2);
28836
28868
  }
28837
- .tipp-collapse{
28869
+ .kg-audio-player-container input[type='range']::-moz-range-track{
28838
28870
  width: 100%;
28839
- overflow: hidden;
28840
- max-height: 0;
28841
- transition: max-height 0.2s ease-out;
28871
+ height: 4px;
28872
+ cursor: pointer;
28873
+ background: rgba(124, 139, 154, 0.25);
28874
+ border-radius: 2px;
28842
28875
  }
28843
- .tipp-pagination .page-button{
28844
- width: 40px;
28845
- height: 40px;
28846
- border-radius: 50%;
28876
+ .kg-audio-player-container input[type='range']::-moz-range-progress{
28877
+ background: currentColor;
28878
+ border-radius: 2px;
28879
+ }
28880
+ .kg-audio-player-container input[type='range']::-moz-range-thumb{
28881
+ box-sizing: content-box;
28882
+ width: 13px;
28883
+ height: 13px;
28847
28884
  border: 0;
28848
- background-color: transparent;
28849
- transition: 0.5s background-color;
28885
+ cursor: pointer;
28886
+ background: #fff;
28887
+ border-radius: 50%;
28888
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
28850
28889
  }
28851
- .tipp-pagination .page-button:hover{
28852
- background-color: var(--gray-3);
28890
+ .kg-audio-player-container input[type='range']:active::-moz-range-thumb{
28891
+ transform: scale(1.2);
28853
28892
  }
28854
- .tipp-pagination .page-button.active{
28855
- border: 1px solid var(--accent-7);
28856
- background-color: var(--accent-surface);
28893
+ .kg-audio-player-container input[type='range']::-ms-track{
28894
+ width: 100%;
28895
+ height: 3px;
28896
+ border: solid transparent;
28897
+ color: transparent;
28898
+ cursor: pointer;
28899
+ background: 0 0;
28857
28900
  }
28858
- .tipp-navigation-button{
28859
- justify-content: start;
28860
- padding-left: 14px;
28861
- background-color: transparent;
28862
- transition: 0.5s background-color;
28901
+ .kg-audio-player-container input[type='range']::-ms-fill-lower{
28902
+ background: #fff;
28863
28903
  }
28864
- .tipp-navigation-button:hover{
28865
- background-color: var(--white-a2);
28904
+ .kg-audio-player-container input[type='range']::-ms-fill-upper{
28905
+ background: currentColor;
28866
28906
  }
28867
- .tipp-navigation-button.active{
28868
- background-color: var(--white-a3);
28907
+ .kg-audio-player-container input[type='range']::-ms-thumb{
28908
+ box-sizing: content-box;
28909
+ width: 13px;
28910
+ height: 13px;
28911
+ border: 0;
28912
+ cursor: pointer;
28913
+ background: #fff;
28914
+ border-radius: 50%;
28915
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
28869
28916
  }
28870
- @keyframes bar-scale-change {
28871
- 0%{
28872
- width: 0;
28917
+ .kg-audio-player-container input[type='range']:active::-ms-thumb{
28918
+ transform: scale(1.2);
28919
+ }
28920
+ .kg-blockquote-alt{
28921
+ font-size: 1.5em;
28922
+ font-style: italic;
28923
+ line-height: 1.7em;
28924
+ text-align: center;
28925
+ padding: 0 2.5em;
28926
+ }
28927
+ @media (max-width: 800px) {
28928
+ .kg-blockquote-alt{
28929
+ font-size: 1.4em;
28930
+ padding-left: 2em;
28931
+ padding-right: 2em;
28873
28932
  }
28874
- 100%{
28875
- width: 100%;
28933
+ }
28934
+ @media (max-width: 600px) {
28935
+ .kg-blockquote-alt{
28936
+ font-size: 1.2em;
28937
+ padding-left: 1.75em;
28938
+ padding-right: 1.75em;
28876
28939
  }
28877
28940
  }
28878
- .tipp_horizontal-bar-chart.bar-wrapper{
28879
- width: 100%;
28880
- height: 8px;
28881
- overflow: hidden;
28882
- position: relative;
28883
- border-radius: 9999px;
28884
- background-color: var(--gray-5);
28941
+ .kg-bookmark-card,
28942
+ .kg-bookmark-card *{
28943
+ box-sizing: border-box;
28885
28944
  }
28886
- .tipp_horizontal-bar-chart.bar-wrapper .bar{
28887
- height: 100%;
28888
- width: 0;
28889
- background-color: var(--yellow-9);
28890
- animation-name: bar-scale-change;
28891
- animation-duration: 0.5s;
28892
- animation-delay: 0.5s;
28893
- animation-timing-function: ease-in-out;
28894
- animation-fill-mode: forwards;
28895
- transform-origin: left center;
28945
+ .kg-bookmark-card,
28946
+ .kg-bookmark-publisher{
28947
+ position: relative;
28896
28948
  }
28897
- .DrawerOverlay{
28898
- background-color: var(--black-a9);
28899
- position: fixed;
28900
- inset: 0;
28901
- z-index: 10000;
28949
+ .kg-bookmark-card a.kg-bookmark-container,
28950
+ .kg-bookmark-card a.kg-bookmark-container:hover{
28951
+ display: flex;
28952
+ background: #fff;
28953
+ text-decoration: none;
28954
+ border-radius: 6px;
28955
+ border: 1px solid rgb(124 139 154/25%);
28956
+ overflow: hidden;
28957
+ color: #222;
28902
28958
  }
28903
- .DrawerContent{
28904
- background-color: var(--color-panel);
28905
- box-shadow: var(--black-a12) 0px 10px 38px -10px, var(--black-a12) 0px 10px 20px -15px;
28906
- animation-fill-mode: forwards;
28907
- z-index: 10000;
28908
- position: fixed;
28959
+ .kg-bookmark-content{
28960
+ display: flex;
28961
+ flex-direction: column;
28962
+ flex-grow: 1;
28963
+ flex-basis: 100%;
28964
+ align-items: flex-start;
28965
+ justify-content: flex-start;
28966
+ padding: 20px;
28967
+ overflow: hidden;
28968
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
28909
28969
  }
28910
- @media (max-width: 768px) {
28911
- .DrawerContent{
28912
- min-width: 100%;
28913
- }
28970
+ .kg-bookmark-title{
28971
+ font-size: 15px;
28972
+ line-height: 1.4em;
28973
+ font-weight: 600;
28914
28974
  }
28915
- .DrawerContent .DialogClose{
28916
- position: absolute;
28917
- right: 24px;
28918
- top: 24px;
28919
- z-index: 9999;
28975
+ .kg-bookmark-description{
28976
+ display: -webkit-box;
28977
+ font-size: 14px;
28978
+ line-height: 1.5em;
28979
+ margin-top: 3px;
28980
+ font-weight: 400;
28981
+ max-height: 44px;
28982
+ overflow-y: hidden;
28983
+ opacity: 0.7;
28984
+ -webkit-line-clamp: 2;
28985
+ -webkit-box-orient: vertical;
28920
28986
  }
28921
- .DrawerContent.right,
28922
- .DrawerContent.left{
28923
- height: 100%;
28987
+ .kg-bookmark-metadata{
28988
+ display: flex;
28989
+ align-items: center;
28990
+ margin-top: 22px;
28924
28991
  width: 100%;
28925
- max-width: 80vw;
28926
- top: 0;
28992
+ font-size: 14px;
28993
+ font-weight: 500;
28994
+ white-space: nowrap;
28927
28995
  }
28928
- .DrawerContent.top,
28929
- .DrawerContent.bottom{
28930
- width: 100%;
28931
- height: 100%;
28932
- max-height: 90vh;
28996
+ .kg-bookmark-metadata > :not(img){
28997
+ opacity: 0.7;
28933
28998
  }
28934
- .DrawerContent.right{
28935
- right: 0;
28936
- animation: showRight 0.8s cubic-bezier(0.16, 1, 0.3, 1);
28999
+ .kg-bookmark-icon{
29000
+ width: 20px;
29001
+ height: 20px;
29002
+ margin-right: 6px;
28937
29003
  }
28938
- .DrawerContent.left{
28939
- left: 0;
28940
- animation: showLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1);
29004
+ .kg-bookmark-author{
29005
+ display: inline;
28941
29006
  }
28942
- .DrawerContent.top{
28943
- top: 0;
28944
- animation: showTop 0.8s cubic-bezier(0.16, 1, 0.3, 1);
29007
+ .kg-bookmark-publisher{
29008
+ text-overflow: ellipsis;
29009
+ overflow: hidden;
29010
+ max-width: 240px;
29011
+ white-space: nowrap;
29012
+ display: block;
29013
+ line-height: 1.65em;
28945
29014
  }
28946
- .DrawerContent.bottom{
28947
- bottom: 0;
28948
- animation: showBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1);
29015
+ .kg-bookmark-metadata > span:nth-of-type(2){
29016
+ font-weight: 400;
28949
29017
  }
28950
- .DrawerContent:focus{
28951
- outline: none;
29018
+ .kg-bookmark-metadata > span:nth-of-type(2):before{
29019
+ content: '•';
29020
+ margin: 0 6px;
28952
29021
  }
28953
- @keyframes showRight {
28954
- from{
28955
- transform: translateX(100%);
28956
- }
28957
- to{
28958
- transform: translateX(0);
28959
- }
29022
+ .kg-bookmark-metadata > span:last-of-type{
29023
+ overflow: hidden;
29024
+ text-overflow: ellipsis;
28960
29025
  }
28961
- @keyframes showLeft {
28962
- from{
28963
- transform: translateX(-100%);
28964
- }
28965
- to{
28966
- transform: translateX(0);
28967
- }
29026
+ .kg-bookmark-thumbnail{
29027
+ position: relative;
29028
+ flex-grow: 1;
29029
+ min-width: 33%;
28968
29030
  }
28969
- @keyframes showBottom {
28970
- from{
28971
- transform: translateY(100%);
28972
- }
28973
- to{
28974
- transform: translateY(0);
28975
- }
29031
+ .kg-bookmark-thumbnail img,
29032
+ .kg-collection-card-img img{
29033
+ position: absolute;
29034
+ width: 100%;
29035
+ height: 100%;
29036
+ -o-object-fit: cover;
29037
+ object-fit: cover;
28976
29038
  }
28977
- @keyframes showTop {
28978
- from{
28979
- transform: translateY(-100%);
28980
- }
28981
- to{
28982
- transform: translateY(0);
28983
- }
29039
+ .kg-bookmark-thumbnail img{
29040
+ top: 0;
29041
+ left: 0;
29042
+ border-radius: 0 2px 2px 0;
28984
29043
  }
28985
- :root .Toastify__toast--default{
28986
- --toastify-text-color-light: var(--accent-a11);
28987
- --toastify-text-color-dark: var(--accent-a11);
28988
- --toastify-color-light: var(--accent-3);
28989
- --toastify-color-dark: var(--accent-3);
29044
+ .kg-button-card,
29045
+ .kg-button-card *{
29046
+ box-sizing: border-box;
28990
29047
  }
28991
- :root .Toastify__toast--success{
28992
- --toastify-text-color-light: var(--success-a11);
28993
- --toastify-text-color-dark: var(--success-a11);
28994
- --toastify-color-light: var(--success-3);
28995
- --toastify-color-dark: var(--success-3);
29048
+ .kg-button-card,
29049
+ .kg-button-card a.kg-btn{
29050
+ display: flex;
29051
+ position: static;
29052
+ align-items: center;
28996
29053
  }
28997
- :root .Toastify__toast--error{
28998
- --toastify-text-color-light: var(--error-a11);
28999
- --toastify-text-color-dark: var(--error-a11);
29000
- --toastify-color-light: var(--error-3);
29001
- --toastify-color-dark: var(--error-3);
29054
+ .kg-button-card{
29055
+ width: 100%;
29056
+ justify-content: center;
29002
29057
  }
29003
- :root .Toastify__toast--warning{
29004
- --toastify-text-color-light: var(--orange-a11);
29005
- --toastify-text-color-dark: var(--orange-a11);
29006
- --toastify-color-light: var(--orange-3);
29007
- --toastify-color-dark: var(--orange-3);
29058
+ .kg-button-card.kg-align-left{
29059
+ justify-content: flex-start;
29008
29060
  }
29009
- :root .Toastify__toast--info{
29010
- --toastify-text-color-light: var(--gray-a11);
29011
- --toastify-text-color-dark: var(--gray-a11);
29012
- --toastify-color-light: var(--gray-3);
29013
- --toastify-color-dark: var(--gray-3);
29061
+ .kg-button-card a.kg-btn{
29062
+ padding: 0 1.2em;
29063
+ height: 2.4em;
29064
+ line-height: 1em;
29065
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
29066
+ font-size: 0.95em;
29067
+ font-weight: 600;
29068
+ text-decoration: none;
29069
+ border-radius: 5px;
29070
+ transition: opacity 0.2s ease-in-out;
29014
29071
  }
29015
- .Toastify .Toastify__toast{
29016
- font-size: calc(14px * var(--scaling));
29072
+ .kg-button-card a.kg-btn:hover{
29073
+ opacity: 0.85;
29017
29074
  }
29018
- .Toastify .Toastify__toast .Toastify__toast-icon{
29019
- width: calc(16px * var(--scaling));
29075
+ .kg-button-card a.kg-btn-accent{
29076
+ background-color: var(--ghost-accent-color);
29077
+ color: #fff;
29020
29078
  }
29021
- .FormRoot .FormField{
29022
- display: flex;
29023
- flex-direction: column;
29024
- gap: var(--space-2);
29079
+ .kg-callout-card,
29080
+ .kg-callout-card *{
29081
+ box-sizing: border-box;
29025
29082
  }
29026
- .DialogOverlay{
29027
- background-color: var(--black-a9);
29028
- position: fixed;
29029
- inset: 0;
29030
- animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
29083
+ .kg-callout-card{
29031
29084
  display: flex;
29032
- align-items: center;
29033
- justify-content: center;
29034
- width: 100%;
29035
- height: 100%;
29036
- }
29037
- .DialogContent{
29038
- background-color: var(--color-panel);
29039
- border-radius: var(--radius-4);
29040
- box-shadow: var(--shadow-2);
29041
- overflow: auto;
29042
- max-height: 100vh;
29043
- position: fixed;
29044
- top: 50%;
29045
- left: 50%;
29046
- transform: translate(-50%, -50%);
29047
- padding: var(--space-6);
29048
- animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
29049
- min-width: 280px;
29085
+ padding: 1.2em 1.6em;
29086
+ border-radius: 3px;
29050
29087
  }
29051
- @media (min-width: 768px) {
29052
- .DialogContent{
29053
- width: initial;
29054
- }
29088
+ .kg-callout-card-grey{
29089
+ background: rgba(124, 139, 154, 0.13);
29055
29090
  }
29056
- .DialogClose{
29057
- z-index: 20000;
29058
- display: block;
29091
+ .kg-callout-card-white{
29092
+ background: 0 0;
29093
+ box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
29059
29094
  }
29060
- .DialogContent:focus{
29061
- outline: none;
29095
+ .kg-callout-card-blue{
29096
+ background: rgba(33, 172, 232, 0.12);
29062
29097
  }
29063
- @keyframes overlayShow {
29064
- from{
29065
- opacity: 0;
29066
- }
29067
- to{
29068
- opacity: 1;
29069
- }
29098
+ .kg-callout-card-green{
29099
+ background: rgba(52, 183, 67, 0.12);
29070
29100
  }
29071
- @keyframes contentShow {
29072
- from{
29073
- opacity: 0;
29074
- transform: translate(-50%, -48%) scale(0.96);
29075
- }
29076
- to{
29077
- opacity: 1;
29078
- transform: translate(-50%, -50%) scale(1);
29079
- }
29101
+ .kg-callout-card-yellow{
29102
+ background: rgba(240, 165, 15, 0.13);
29080
29103
  }
29081
- .auto-sizing-input.wrapper{
29082
- position: relative;
29083
- overflow: hidden;
29104
+ .kg-callout-card-red{
29105
+ background: rgba(209, 46, 46, 0.11);
29084
29106
  }
29085
- .auto-sizing-input.wrapper input{
29086
- width: 100%;
29087
- font-size: 14px;
29088
- margin: 0;
29089
- padding: 0;
29090
- border: none;
29091
- outline: none;
29092
- top: 0;
29093
- left: 0;
29094
- font-family: inherit;
29107
+ .kg-callout-card-pink{
29108
+ background: rgba(225, 71, 174, 0.11);
29095
29109
  }
29096
- .auto-sizing-input.wrapper span{
29097
- opacity: 0;
29098
- top: 0;
29099
- left: 0;
29100
- position: absolute;
29101
- white-space: pre;
29102
- font-family: inherit;
29103
- font-size: 14px;
29104
- z-index: 999;
29110
+ .kg-callout-card-purple{
29111
+ background: rgba(135, 85, 236, 0.12);
29105
29112
  }
29106
- .tag-selector{
29107
- --text-field-selection-color: var(--focus-a5);
29108
- --text-field-focus-color: var(--focus-8);
29109
- --text-field-border-width: 1px;
29110
- --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
29111
- --text-field-border-radius: max(var(--radius-2), var(--radius-full));
29112
- --tag-selector-background-color: var(--panel-background);
29113
- --box-shadow-color: var(--gray-a6);
29114
- border-radius: var(--text-field-border-radius);
29115
- font-size: var(--font-size-2);
29116
- box-shadow: inset 0 0 0 var(--text-field-border-width) var(--box-shadow-color);
29117
- min-height: var(--text-field-height);
29118
- padding: var(--text-field-padding);
29119
- box-sizing: border-box;
29120
- background-color: var(--tag-selector-background-color);
29113
+ .kg-callout-card-accent{
29114
+ background: var(--ghost-accent-color);
29115
+ color: #fff;
29121
29116
  }
29122
- .tag-selector.small{
29123
- --text-field-height: var(--space-5);
29117
+ .kg-callout-card.kg-callout-card-accent a{
29118
+ color: #fff;
29119
+ text-decoration: underline;
29124
29120
  }
29125
- .tag-selector.medium{
29126
- --text-field-height: var(--space-6);
29121
+ .kg-callout-card div.kg-callout-emoji{
29122
+ padding-right: 0.8em;
29123
+ line-height: 1.25em;
29124
+ font-size: 1.15em;
29127
29125
  }
29128
- .tag-selector.large{
29129
- --text-field-height: var(--space-7);
29126
+ .kg-callout-card div.kg-callout-text{
29127
+ font-size: 0.95em;
29128
+ line-height: 1.5em;
29130
29129
  }
29131
- .tag-selector.read-only{
29132
- --tag-selector-background-color: var(--gray-a2);
29130
+ .kg-callout-card + .kg-callout-card{
29131
+ margin-top: 1em;
29133
29132
  }
29134
- .tag-selector.error{
29135
- --box-shadow-color: var(--error-11);
29136
- }
29137
- .tag-selector.focused{
29138
- box-shadow: inset 0 0 0 var(--text-field-border-width) var(--text-field-focus-color);
29139
- }
29140
- dl.rt-DataListRoot{
29141
- display: flex;
29142
- flex-direction: column;
29143
- }
29144
- dl.rt-DataListRoot div.rt-DataListItem{
29145
- display: flex;
29146
- }
29147
- dl.rt-DataListRoot .rt-DataListLabel{
29148
- min-width: initial;
29149
- white-space: nowrap;
29150
- }
29151
- dl.rt-DataListRoot:where(.rt-r-orientation-horizontal) :where(.rt-DataListItem){
29152
- grid-column: initial;
29133
+ .kg-collection-card{
29134
+ width: 100%;
29135
+ margin-top: 6vmin;
29153
29136
  }
29154
- .rt-BaseCard.error::after{
29155
- box-shadow: 0 0 0 1px var(--error-a11);
29137
+ .kg-collection-card + *{
29138
+ margin-top: 6vmin;
29156
29139
  }
29157
- .rt-BaseCard.disable-inset-left::after,
29158
- .rt-BaseCard.disable-inset-left::before{
29159
- left: 0;
29140
+ .kg-collection-card-title{
29141
+ margin: 0.8rem 0 1.6rem;
29142
+ font-size: 1.5rem;
29143
+ font-weight: 700;
29144
+ text-transform: uppercase;
29160
29145
  }
29161
- .rt-BaseCard.disable-inset-right::after,
29162
- .rt-BaseCard.disable-inset-right::before{
29163
- right: 0;
29146
+ a.kg-collection-card-post-wrapper{
29147
+ text-decoration: none;
29148
+ color: var(--text-color);
29164
29149
  }
29165
- .rt-BaseCard.disable-inset-top::after,
29166
- .rt-BaseCard.disable-inset-top::before{
29167
- top: 0;
29150
+ a.kg-collection-card-post-wrapper:hover{
29151
+ opacity: 1;
29168
29152
  }
29169
- .rt-BaseCard.disable-inset-bottom::after,
29170
- .rt-BaseCard.disable-inset-bottom::before{
29171
- bottom: 0;
29153
+ .kg-collection-card-post{
29154
+ display: flex;
29155
+ gap: 3.2rem;
29172
29156
  }
29173
- .date-picker-button{
29174
- width: 100%;
29157
+ .kg-collection-card-img{
29158
+ position: relative;
29159
+ aspect-ratio: 3/2;
29175
29160
  }
29176
- .date-picker-button.disabled{
29177
- background: var(--gray-a2);
29178
- color: var(--gray-9);
29179
- box-shadow: inset 0 0 0 1px var(--accent-a6);
29161
+ .kg-collection-card-img img{
29162
+ inset: 0;
29180
29163
  }
29181
- .kg-audio-card,
29182
- .kg-audio-card *{
29183
- box-sizing: border-box;
29164
+ a.kg-collection-card-post-wrapper:hover img{
29165
+ opacity: 0.92;
29166
+ transition: all 0.2s ease;
29184
29167
  }
29185
- .kg-audio-card{
29168
+ .kg-collection-card-content{
29186
29169
  display: flex;
29187
- width: 100%;
29188
- min-height: 96px;
29189
- border-radius: 6px;
29190
- padding: 4px;
29191
- background: #fff;
29192
- color: #222;
29193
- box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
29194
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
29170
+ flex-direction: column;
29171
+ font-size: 1.6rem;
29195
29172
  }
29196
- .kg-audio-card + .kg-audio-card{
29197
- margin-top: 1em;
29173
+ h2.kg-collection-card-post-title,
29174
+ p.kg-collection-card-post-excerpt{
29175
+ overflow: hidden;
29176
+ display: -webkit-box;
29177
+ -webkit-box-orient: vertical;
29178
+ -webkit-line-clamp: 2;
29198
29179
  }
29199
- .kg-audio-thumbnail{
29200
- display: flex;
29201
- justify-content: center;
29202
- align-items: center;
29203
- width: 80px;
29204
- min-width: 80px;
29205
- margin: 8px;
29206
- background: 0 0;
29207
- -o-object-fit: cover;
29208
- object-fit: cover;
29209
- aspect-ratio: 1/1;
29210
- border-radius: 3px;
29180
+ h2.kg-collection-card-post-title{
29181
+ margin: 0;
29182
+ font-size: 2.4rem;
29211
29183
  }
29212
- .kg-audio-thumbnail.placeholder{
29213
- background: var(--ghost-accent-color);
29184
+ p.kg-collection-card-post-excerpt{
29185
+ margin-top: 1.2rem;
29186
+ line-height: 1.4;
29214
29187
  }
29215
- .kg-audio-thumbnail.placeholder svg{
29216
- width: 24px;
29217
- height: 24px;
29218
- fill: #fff;
29188
+ .kg-collection-card-post-meta{
29189
+ display: flex;
29190
+ opacity: 0.5;
29191
+ margin-top: 1.2rem;
29192
+ font-size: 1.3rem;
29193
+ font-weight: 500;
29219
29194
  }
29220
- .kg-audio-player-container{
29221
- position: relative;
29195
+ .kg-collection-card-list{
29222
29196
  display: flex;
29223
29197
  flex-direction: column;
29224
- justify-content: space-between;
29225
- width: 100%;
29226
- --seek-before-width: 0%;
29227
- --volume-before-width: 100%;
29228
- --buffered-width: 0%;
29198
+ gap: 3.2rem;
29229
29199
  }
29230
- .kg-audio-title{
29231
- width: 100%;
29232
- margin: 8px 0 0;
29233
- padding: 8px 12px;
29234
- border: 0;
29235
- font-family: inherit;
29236
- font-size: 16px;
29237
- font-weight: 600;
29238
- line-height: 1.15em;
29239
- background: 0 0;
29200
+ @media (max-width: 767px) {
29201
+ .kg-collection-card-list .kg-collection-card-post{
29202
+ flex-direction: column;
29203
+ }
29240
29204
  }
29241
- .kg-audio-player{
29242
- display: flex;
29243
- flex-grow: 1;
29244
- align-items: center;
29245
- padding: 8px 12px;
29205
+ .kg-collection-card-list .kg-collection-card-img{
29206
+ flex: 0 0 30%;
29246
29207
  }
29247
- .kg-audio-current-time,
29248
- .kg-audio-time{
29249
- font-family: inherit;
29250
- font-size: 12.5px;
29251
- font-weight: 500;
29252
- line-height: 1em;
29253
- white-space: nowrap;
29208
+ .kg-collection-card-grid{
29209
+ display: grid;
29210
+ grid-template-columns: repeat(1, minmax(0, 1fr));
29211
+ gap: 2.4rem;
29254
29212
  }
29255
- .kg-audio-current-time{
29256
- min-width: 38px;
29257
- padding: 0 4px;
29213
+ @media (min-width: 640px) {
29214
+ .kg-collection-card-grid:not(.columns-1){
29215
+ grid-template-columns: repeat(2, minmax(0, 1fr));
29216
+ }
29258
29217
  }
29259
- .kg-audio-time{
29260
- width: 56px;
29261
- color: #ababab;
29218
+ @media (min-width: 1024px) {
29219
+ .kg-collection-card-grid:not(.columns-1):not(.columns-2){
29220
+ grid-template-columns: repeat(3, minmax(0, 1fr));
29221
+ gap: 3.2rem;
29222
+ }
29223
+ .kg-collection-card-grid.columns-1{
29224
+ gap: 4.8rem;
29225
+ }
29226
+ .kg-collection-card-grid.columns-2{
29227
+ gap: 4rem;
29228
+ }
29262
29229
  }
29263
- .kg-audio-duration{
29264
- padding: 0 4px;
29230
+ @media (min-width: 1280px) {
29231
+ .kg-collection-card-grid:not(.columns-1):not(.columns-2):not(.columns-3){
29232
+ grid-template-columns: repeat(4, minmax(0, 1fr));
29233
+ }
29265
29234
  }
29266
- .kg-audio-pause-icon,
29267
- .kg-audio-play-icon{
29268
- position: relative;
29269
- bottom: 1px;
29270
- padding: 0 4px 0 0;
29271
- font-size: 0;
29272
- background: 0 0;
29235
+ .kg-collection-card-grid .kg-collection-card-post{
29236
+ flex-direction: column;
29237
+ gap: 1.2rem;
29273
29238
  }
29274
- .kg-audio-hide{
29275
- display: none !important;
29239
+ @media (min-width: 1024px) {
29240
+ .kg-collection-card-grid.columns-1 .kg-collection-card-post{
29241
+ gap: 2rem;
29242
+ }
29243
+ .kg-collection-card-grid.columns-2 .kg-collection-card-post{
29244
+ gap: 1.6rem;
29245
+ }
29276
29246
  }
29277
- .kg-audio-pause-icon svg,
29278
- .kg-audio-play-icon svg{
29279
- width: 14px;
29280
- height: 14px;
29281
- fill: currentColor;
29247
+ .kg-collection-card-grid.columns-1 .kg-collection-card-img,
29248
+ .kg-collection-card-grid.columns-2 .kg-collection-card-img{
29249
+ aspect-ratio: 16/9;
29282
29250
  }
29283
- .kg-audio-seek-slider{
29284
- flex-grow: 1;
29285
- margin: 0 4px;
29251
+ .kg-collection-card-grid .kg-collection-card-content{
29252
+ font-size: 1.5rem;
29286
29253
  }
29287
- @media (max-width: 640px) {
29288
- .kg-audio-seek-slider{
29289
- display: none;
29254
+ @media (min-width: 640px) {
29255
+ .kg-collection-card-grid .kg-collection-card-content{
29256
+ font-size: 1.6rem;
29290
29257
  }
29291
29258
  }
29292
- .kg-audio-playback-rate{
29293
- min-width: 37px;
29294
- padding: 0 4px;
29295
- font-family: inherit;
29296
- font-size: 12.5px;
29297
- font-weight: 600;
29298
- line-height: 1em;
29299
- text-align: left;
29300
- background: 0 0;
29301
- white-space: nowrap;
29302
- }
29303
- @media (max-width: 640px) {
29304
- .kg-audio-playback-rate{
29305
- padding-left: 8px;
29259
+ @media (min-width: 1024px) {
29260
+ .kg-collection-card-grid.columns-1 .kg-collection-card-content{
29261
+ font-size: 1.8rem;
29306
29262
  }
29307
- }
29308
- .kg-audio-mute-icon,
29309
- .kg-audio-unmute-icon{
29310
- position: relative;
29311
- bottom: -1px;
29312
- padding: 0 4px;
29313
- font-size: 0;
29314
- background: 0 0;
29315
- }
29316
- @media (max-width: 640px) {
29317
- .kg-audio-mute-icon,
29318
- .kg-audio-unmute-icon{
29319
- margin-left: auto;
29263
+ .kg-collection-card-grid.columns-3 .kg-collection-card-content,
29264
+ .kg-collection-card-grid.columns-4 .kg-collection-card-content{
29265
+ font-size: 1.5rem;
29320
29266
  }
29321
29267
  }
29322
- .kg-audio-mute-icon svg,
29323
- .kg-audio-unmute-icon svg{
29324
- width: 16px;
29325
- height: 16px;
29326
- fill: currentColor;
29268
+ .kg-collection-card-grid h2.kg-collection-card-post-title{
29269
+ font-size: 1.7rem;
29327
29270
  }
29328
- .kg-audio-volume-slider{
29329
- width: 80px;
29271
+ .kg-collection-card-grid .kg-collection-card-post-meta{
29272
+ font-size: 1.25rem;
29330
29273
  }
29331
- @media (max-width: 400px) {
29332
- .kg-audio-volume-slider{
29333
- display: none;
29274
+ @media (min-width: 640px) {
29275
+ .kg-collection-card-grid h2.kg-collection-card-post-title{
29276
+ font-size: 1.9rem;
29277
+ }
29278
+ .kg-collection-card-grid.columns-1 h2.kg-collection-card-post-title{
29279
+ font-size: 2.4rem;
29280
+ }
29281
+ .kg-collection-card-grid:not(.columns-3):not(.columns-4)
29282
+ .kg-collection-card-post-meta{
29283
+ font-size: 1.3rem;
29334
29284
  }
29335
29285
  }
29336
- .kg-audio-seek-slider::before,
29337
- .kg-audio-volume-slider::before{
29338
- content: '';
29339
- position: absolute;
29340
- left: 0;
29341
- width: var(--seek-before-width) !important;
29342
- height: 4px;
29343
- cursor: pointer;
29344
- background-color: currentColor;
29345
- border-radius: 2px;
29286
+ @media (min-width: 1024px) {
29287
+ .kg-collection-card-grid.columns-1 h2.kg-collection-card-post-title{
29288
+ font-size: 3.6rem;
29289
+ }
29290
+ .kg-collection-card-grid.columns-2 h2.kg-collection-card-post-title{
29291
+ font-size: 2.4rem;
29292
+ }
29293
+ .kg-collection-card-grid.columns-1 .kg-collection-card-post-meta{
29294
+ font-size: 1.4rem;
29295
+ }
29346
29296
  }
29347
- .kg-audio-volume-slider::before{
29348
- width: var(--volume-before-width) !important;
29297
+ @media (min-width: 1280px) {
29298
+ .kg-collection-card-grid.columns-4 h2.kg-collection-card-post-title{
29299
+ font-size: 1.7rem;
29300
+ }
29349
29301
  }
29350
- .kg-audio-player-container input[type='range']{
29351
- position: relative;
29352
- -webkit-appearance: none;
29353
- background: 0 0;
29354
- height: auto;
29355
- padding: 0;
29356
- border: 0;
29302
+ .kg-file-card,
29303
+ .kg-file-card *{
29304
+ box-sizing: border-box;
29357
29305
  }
29358
- .kg-audio-player-container input[type='range']:focus,
29359
- .kg-video-card input[type='range']:focus{
29360
- outline: 0;
29306
+ .kg-file-card{
29307
+ display: flex;
29361
29308
  }
29362
- .kg-audio-player-container input[type='range']::-webkit-slider-thumb{
29363
- -webkit-appearance: none;
29364
- position: relative;
29365
- box-sizing: content-box;
29366
- width: 13px;
29367
- height: 13px;
29368
- margin: -5px 0 0;
29369
- border: 0;
29370
- cursor: pointer;
29309
+ .kg-file-card a.kg-file-card-container{
29310
+ display: flex;
29311
+ align-items: stretch;
29312
+ justify-content: space-between;
29313
+ padding: 12px;
29314
+ min-height: 92px;
29371
29315
  background: #fff;
29372
- border-radius: 50%;
29373
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
29316
+ color: #222;
29317
+ border: 1px solid rgb(124 139 154/25%);
29318
+ border-radius: 5px;
29319
+ transition: all ease-in-out 0.35s;
29320
+ text-decoration: none;
29321
+ width: 100%;
29322
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
29374
29323
  }
29375
- .kg-audio-player-container button,
29376
- .kg-video-card button{
29377
- display: flex;
29378
- align-items: center;
29379
- border: 0;
29380
- cursor: pointer;
29324
+ .kg-file-card a.kg-file-card-container:hover{
29325
+ border: 1px solid rgb(124 139 154/35%);
29381
29326
  }
29382
- .kg-audio-player-container input[type='range']::-webkit-slider-runnable-track{
29327
+ .kg-file-card-contents{
29328
+ display: flex;
29329
+ flex-direction: column;
29330
+ justify-content: space-between;
29331
+ margin: 4px 8px;
29383
29332
  width: 100%;
29384
- height: 4px;
29385
- cursor: pointer;
29386
- background: rgba(124, 139, 154, 0.25);
29387
- border-radius: 2px;
29388
29333
  }
29389
- .kg-audio-player-container input[type='range']:active::-webkit-slider-thumb{
29390
- transform: scale(1.2);
29334
+ .kg-file-card-title{
29335
+ font-size: 16px;
29336
+ font-weight: 600;
29337
+ line-height: 1.3em;
29391
29338
  }
29392
- .kg-audio-player-container input[type='range']::-moz-range-track{
29393
- width: 100%;
29394
- height: 4px;
29395
- cursor: pointer;
29396
- background: rgba(124, 139, 154, 0.25);
29397
- border-radius: 2px;
29339
+ .kg-file-card-caption{
29340
+ font-size: 14px;
29341
+ line-height: 1.3em;
29342
+ opacity: 0.7;
29398
29343
  }
29399
- .kg-audio-player-container input[type='range']::-moz-range-progress{
29400
- background: currentColor;
29401
- border-radius: 2px;
29344
+ .kg-file-card-title + .kg-file-card-caption{
29345
+ flex-grow: 1;
29346
+ margin-top: 3px;
29402
29347
  }
29403
- .kg-audio-player-container input[type='range']::-moz-range-thumb{
29404
- box-sizing: content-box;
29405
- width: 13px;
29406
- height: 13px;
29407
- border: 0;
29408
- cursor: pointer;
29409
- background: #fff;
29410
- border-radius: 50%;
29411
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
29348
+ .kg-file-card-metadata{
29349
+ display: inline;
29350
+ font-size: 14px;
29351
+ line-height: 1.3em;
29352
+ margin-top: 5px;
29412
29353
  }
29413
- .kg-audio-player-container input[type='range']:active::-moz-range-thumb{
29414
- transform: scale(1.2);
29354
+ .kg-file-card-filename{
29355
+ display: inline;
29356
+ font-weight: 500;
29415
29357
  }
29416
- .kg-audio-player-container input[type='range']::-ms-track{
29417
- width: 100%;
29418
- height: 3px;
29419
- border: solid transparent;
29420
- color: transparent;
29421
- cursor: pointer;
29422
- background: 0 0;
29358
+ .kg-file-card-filesize{
29359
+ display: inline-block;
29360
+ font-size: 14px;
29361
+ opacity: 0.6;
29423
29362
  }
29424
- .kg-audio-player-container input[type='range']::-ms-fill-lower{
29425
- background: #fff;
29363
+ .kg-file-card-filesize:before{
29364
+ display: inline-block;
29365
+ content: '•';
29366
+ margin-left: 6px;
29367
+ margin-right: 6px;
29426
29368
  }
29427
- .kg-audio-player-container input[type='range']::-ms-fill-upper{
29369
+ .kg-file-card-icon{
29370
+ position: relative;
29371
+ display: flex;
29372
+ align-items: center;
29373
+ justify-content: center;
29374
+ width: 80px;
29375
+ min-width: 80px;
29376
+ height: 100%;
29377
+ min-height: 80px;
29378
+ }
29379
+ .kg-file-card-icon:before{
29380
+ position: absolute;
29381
+ display: block;
29382
+ content: '';
29383
+ top: 0;
29384
+ left: 0;
29385
+ right: 0;
29386
+ bottom: 0;
29428
29387
  background: currentColor;
29388
+ opacity: 0.06;
29389
+ transition: opacity ease-in-out 0.35s;
29390
+ border-radius: 3px;
29429
29391
  }
29430
- .kg-audio-player-container input[type='range']::-ms-thumb{
29431
- box-sizing: content-box;
29432
- width: 13px;
29433
- height: 13px;
29434
- border: 0;
29435
- cursor: pointer;
29436
- background: #fff;
29437
- border-radius: 50%;
29438
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
29392
+ .kg-file-card a.kg-file-card-container:hover .kg-file-card-icon:before{
29393
+ opacity: 0.08;
29439
29394
  }
29440
- .kg-audio-player-container input[type='range']:active::-ms-thumb{
29441
- transform: scale(1.2);
29395
+ .kg-file-card-icon svg{
29396
+ width: 24px;
29397
+ height: 24px;
29398
+ color: var(--ghost-accent-color);
29442
29399
  }
29443
- .kg-blockquote-alt{
29444
- font-size: 1.5em;
29445
- font-style: italic;
29446
- line-height: 1.7em;
29447
- text-align: center;
29448
- padding: 0 2.5em;
29400
+ .kg-file-card-medium a.kg-file-card-container{
29401
+ min-height: 72px;
29449
29402
  }
29450
- @media (max-width: 800px) {
29451
- .kg-blockquote-alt{
29452
- font-size: 1.4em;
29453
- padding-left: 2em;
29454
- padding-right: 2em;
29455
- }
29403
+ .kg-file-card-medium .kg-file-card-caption{
29404
+ opacity: 1;
29405
+ font-weight: 500;
29456
29406
  }
29457
- @media (max-width: 600px) {
29458
- .kg-blockquote-alt{
29459
- font-size: 1.2em;
29460
- padding-left: 1.75em;
29461
- padding-right: 1.75em;
29462
- }
29407
+ .kg-file-card-small a.kg-file-card-container{
29408
+ align-items: center;
29409
+ min-height: 52px;
29463
29410
  }
29464
- .kg-bookmark-card,
29465
- .kg-bookmark-card *{
29466
- box-sizing: border-box;
29411
+ .kg-file-card-small .kg-file-card-metadata{
29412
+ font-size: 14px;
29413
+ margin-top: 0;
29467
29414
  }
29468
- .kg-bookmark-card,
29469
- .kg-bookmark-publisher{
29470
- position: relative;
29415
+ .kg-file-card-small .kg-file-card-icon svg{
29416
+ width: 20px;
29417
+ height: 20px;
29471
29418
  }
29472
- .kg-bookmark-card a.kg-bookmark-container,
29473
- .kg-bookmark-card a.kg-bookmark-container:hover{
29474
- display: flex;
29475
- background: #fff;
29476
- text-decoration: none;
29477
- border-radius: 6px;
29478
- border: 1px solid rgb(124 139 154/25%);
29479
- overflow: hidden;
29480
- color: #222;
29419
+ .kg-file-card + .kg-file-card{
29420
+ margin-top: 1em;
29481
29421
  }
29482
- .kg-bookmark-content{
29483
- display: flex;
29484
- flex-direction: column;
29485
- flex-grow: 1;
29486
- flex-basis: 100%;
29487
- align-items: flex-start;
29488
- justify-content: flex-start;
29489
- padding: 20px;
29490
- overflow: hidden;
29491
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
29492
- }
29493
- .kg-bookmark-title{
29494
- font-size: 15px;
29495
- line-height: 1.4em;
29496
- font-weight: 600;
29497
- }
29498
- .kg-bookmark-description{
29499
- display: -webkit-box;
29500
- font-size: 14px;
29501
- line-height: 1.5em;
29502
- margin-top: 3px;
29503
- font-weight: 400;
29504
- max-height: 44px;
29505
- overflow-y: hidden;
29506
- opacity: 0.7;
29507
- -webkit-line-clamp: 2;
29508
- -webkit-box-orient: vertical;
29422
+ .kg-gallery-card,
29423
+ .kg-gallery-card *{
29424
+ box-sizing: border-box;
29509
29425
  }
29510
- .kg-bookmark-metadata{
29511
- display: flex;
29512
- align-items: center;
29513
- margin-top: 22px;
29514
- width: 100%;
29515
- font-size: 14px;
29516
- font-weight: 500;
29517
- white-space: nowrap;
29426
+ .kg-gallery-card,
29427
+ .kg-image-card{
29428
+ --gap: 1.2rem;
29518
29429
  }
29519
- .kg-bookmark-metadata > :not(img){
29520
- opacity: 0.7;
29430
+ .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card,
29431
+ .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
29432
+ .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
29433
+ .kg-image-card:not(.kg-card-hascaption) + .kg-image-card{
29434
+ margin-top: var(--gap);
29521
29435
  }
29522
- .kg-bookmark-icon{
29523
- width: 20px;
29524
- height: 20px;
29525
- margin-right: 6px;
29436
+ .kg-gallery-container{
29437
+ position: relative;
29526
29438
  }
29527
- .kg-bookmark-author{
29528
- display: inline;
29439
+ .kg-gallery-row{
29440
+ display: flex;
29441
+ flex-direction: row;
29442
+ justify-content: center;
29529
29443
  }
29530
- .kg-bookmark-publisher{
29531
- text-overflow: ellipsis;
29532
- overflow: hidden;
29533
- max-width: 240px;
29534
- white-space: nowrap;
29444
+ .kg-gallery-image img{
29535
29445
  display: block;
29536
- line-height: 1.65em;
29537
- }
29538
- .kg-bookmark-metadata > span:nth-of-type(2){
29539
- font-weight: 400;
29540
- }
29541
- .kg-bookmark-metadata > span:nth-of-type(2):before{
29542
- content: '•';
29543
- margin: 0 6px;
29544
- }
29545
- .kg-bookmark-metadata > span:last-of-type{
29546
- overflow: hidden;
29547
- text-overflow: ellipsis;
29548
- }
29549
- .kg-bookmark-thumbnail{
29550
- position: relative;
29551
- flex-grow: 1;
29552
- min-width: 33%;
29553
- }
29554
- .kg-bookmark-thumbnail img,
29555
- .kg-collection-card-img img{
29556
- position: absolute;
29446
+ margin: 0;
29557
29447
  width: 100%;
29558
29448
  height: 100%;
29559
- -o-object-fit: cover;
29560
- object-fit: cover;
29561
29449
  }
29562
- .kg-bookmark-thumbnail img{
29563
- top: 0;
29564
- left: 0;
29565
- border-radius: 0 2px 2px 0;
29450
+ .kg-gallery-row:not(:first-of-type){
29451
+ margin: var(--gap) 0 0;
29566
29452
  }
29567
- .kg-button-card,
29568
- .kg-button-card *{
29453
+ .kg-gallery-image:not(:first-of-type){
29454
+ margin: 0 0 0 var(--gap);
29455
+ }
29456
+ @media (max-width: 600px) {
29457
+ .kg-gallery-card,
29458
+ .kg-image-card{
29459
+ --gap: 0.6rem;
29460
+ }
29461
+ }
29462
+ .kg-header-card,
29463
+ .kg-header-card *{
29569
29464
  box-sizing: border-box;
29570
29465
  }
29571
- .kg-button-card,
29572
- .kg-button-card a.kg-btn{
29466
+ .kg-header-card{
29467
+ padding: 12vmin 4em;
29468
+ min-height: 60vh;
29573
29469
  display: flex;
29574
- position: static;
29470
+ flex-direction: column;
29575
29471
  align-items: center;
29576
- }
29577
- .kg-button-card{
29578
- width: 100%;
29579
29472
  justify-content: center;
29473
+ text-align: center;
29580
29474
  }
29581
- .kg-button-card.kg-align-left{
29582
- justify-content: flex-start;
29475
+ .kg-header-card.kg-size-small{
29476
+ padding-top: 14vmin;
29477
+ padding-bottom: 14vmin;
29478
+ min-height: 40vh;
29583
29479
  }
29584
- .kg-button-card a.kg-btn{
29585
- padding: 0 1.2em;
29586
- height: 2.4em;
29587
- line-height: 1em;
29588
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
29589
- font-size: 0.95em;
29590
- font-weight: 600;
29591
- text-decoration: none;
29592
- border-radius: 5px;
29593
- transition: opacity 0.2s ease-in-out;
29480
+ .kg-header-card.kg-size-large{
29481
+ padding-top: 18vmin;
29482
+ padding-bottom: 18vmin;
29483
+ min-height: 80vh;
29594
29484
  }
29595
- .kg-button-card a.kg-btn:hover{
29596
- opacity: 0.85;
29485
+ .kg-header-card.kg-align-left{
29486
+ text-align: left;
29487
+ align-items: flex-start;
29597
29488
  }
29598
- .kg-button-card a.kg-btn-accent{
29599
- background-color: var(--ghost-accent-color);
29489
+ .kg-header-card.kg-style-dark{
29490
+ background: #151515;
29600
29491
  color: #fff;
29601
29492
  }
29602
- .kg-callout-card,
29603
- .kg-callout-card *{
29604
- box-sizing: border-box;
29493
+ .kg-header-card.kg-style-light{
29494
+ background-color: #fafafa;
29605
29495
  }
29606
- .kg-callout-card{
29607
- display: flex;
29608
- padding: 1.2em 1.6em;
29609
- border-radius: 3px;
29496
+ .kg-header-card.kg-style-accent,
29497
+ .kg-header-card.kg-style-accent.kg-v2{
29498
+ background-color: var(--ghost-accent-color);
29610
29499
  }
29611
- .kg-callout-card-grey{
29612
- background: rgba(124, 139, 154, 0.13);
29500
+ .kg-header-card.kg-style-image{
29501
+ position: relative;
29502
+ background-color: #e7e7e7;
29503
+ background-size: cover;
29504
+ background-position: center;
29613
29505
  }
29614
- .kg-callout-card-white{
29615
- background: 0 0;
29616
- box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
29506
+ .kg-header-card.kg-style-image::before{
29507
+ position: absolute;
29508
+ display: block;
29509
+ content: '';
29510
+ top: 0;
29511
+ right: 0;
29512
+ bottom: 0;
29513
+ left: 0;
29514
+ background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.2));
29617
29515
  }
29618
- .kg-callout-card-blue{
29619
- background: rgba(33, 172, 232, 0.12);
29516
+ .kg-header-card h2.kg-header-card-header{
29517
+ font-size: 5em;
29518
+ font-weight: 700;
29519
+ line-height: 1.1em;
29520
+ letter-spacing: -0.01em;
29521
+ margin: 0;
29620
29522
  }
29621
- .kg-callout-card-green{
29622
- background: rgba(52, 183, 67, 0.12);
29523
+ .kg-header-card h2.kg-header-card-header strong{
29524
+ font-weight: 800;
29623
29525
  }
29624
- .kg-callout-card-yellow{
29625
- background: rgba(240, 165, 15, 0.13);
29526
+ .kg-header-card.kg-size-small h2.kg-header-card-header{
29527
+ font-size: 4em;
29626
29528
  }
29627
- .kg-callout-card-red{
29628
- background: rgba(209, 46, 46, 0.11);
29529
+ .kg-header-card.kg-size-large h2.kg-header-card-header{
29530
+ font-size: 6em;
29629
29531
  }
29630
- .kg-callout-card-pink{
29631
- background: rgba(225, 71, 174, 0.11);
29532
+ .kg-header-card h3.kg-header-card-subheader{
29533
+ font-size: 1.5em;
29534
+ font-weight: 500;
29535
+ line-height: 1.4em;
29536
+ margin: 0;
29537
+ max-width: 40em;
29632
29538
  }
29633
- .kg-callout-card-purple{
29634
- background: rgba(135, 85, 236, 0.12);
29539
+ .kg-header-card h2 + h3.kg-header-card-subheader{
29540
+ margin: 0.35em 0 0;
29635
29541
  }
29636
- .kg-callout-card-accent{
29637
- background: var(--ghost-accent-color);
29638
- color: #fff;
29542
+ .kg-header-card .kg-header-card-subheading strong,
29543
+ .kg-header-card h3.kg-header-card-subheader strong,
29544
+ .kg-signup-card .kg-signup-card-subheading strong{
29545
+ font-weight: 600;
29639
29546
  }
29640
- .kg-callout-card.kg-callout-card-accent a{
29641
- color: #fff;
29642
- text-decoration: underline;
29547
+ .kg-header-card.kg-size-small h3.kg-header-card-subheader{
29548
+ font-size: 1.25em;
29643
29549
  }
29644
- .kg-callout-card div.kg-callout-emoji{
29645
- padding-right: 0.8em;
29646
- line-height: 1.25em;
29647
- font-size: 1.15em;
29550
+ .kg-header-card.kg-size-large h3.kg-header-card-subheader{
29551
+ font-size: 1.75em;
29648
29552
  }
29649
- .kg-callout-card div.kg-callout-text{
29650
- font-size: 0.95em;
29651
- line-height: 1.5em;
29553
+ .kg-header-card:not(.kg-style-light) h2.kg-header-card-header,
29554
+ .kg-header-card:not(.kg-style-light) h3.kg-header-card-subheader{
29555
+ color: #fff;
29652
29556
  }
29653
- .kg-callout-card + .kg-callout-card{
29654
- margin-top: 1em;
29557
+ .kg-header-card.kg-style-accent h3.kg-header-card-subheader,
29558
+ .kg-header-card.kg-style-image h3.kg-header-card-subheader,
29559
+ .kg-product-card-rating-active.kg-product-card-rating-star svg{
29560
+ opacity: 1;
29655
29561
  }
29656
- .kg-collection-card{
29657
- width: 100%;
29658
- margin-top: 6vmin;
29562
+ .kg-header-card.kg-style-image a.kg-header-card-button,
29563
+ .kg-header-card.kg-style-image h2.kg-header-card-header,
29564
+ .kg-header-card.kg-style-image h3.kg-header-card-subheader{
29565
+ z-index: 999;
29659
29566
  }
29660
- .kg-collection-card + *{
29661
- margin-top: 6vmin;
29567
+ .kg-header-card h2.kg-header-card-header a,
29568
+ .kg-header-card h3.kg-header-card-subheader a{
29569
+ color: var(--ghost-accent-color);
29662
29570
  }
29663
- .kg-collection-card-title{
29664
- margin: 0.8rem 0 1.6rem;
29665
- font-size: 1.5rem;
29666
- font-weight: 700;
29667
- text-transform: uppercase;
29668
- }
29669
- a.kg-collection-card-post-wrapper{
29670
- text-decoration: none;
29671
- color: var(--text-color);
29672
- }
29673
- a.kg-collection-card-post-wrapper:hover{
29674
- opacity: 1;
29571
+ .kg-header-card.kg-style-accent h2.kg-header-card-header a,
29572
+ .kg-header-card.kg-style-accent h3.kg-header-card-subheader a,
29573
+ .kg-header-card.kg-style-image h2.kg-header-card-header a,
29574
+ .kg-header-card.kg-style-image h3.kg-header-card-subheader a{
29575
+ color: #fff;
29675
29576
  }
29676
- .kg-collection-card-post{
29577
+ .kg-header-card a.kg-header-card-button{
29677
29578
  display: flex;
29678
- gap: 3.2rem;
29579
+ position: static;
29580
+ align-items: center;
29581
+ fill: #fff;
29582
+ background: #fff;
29583
+ border-radius: 3px;
29584
+ outline: 0;
29585
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
29586
+ font-size: 1.05em;
29587
+ font-weight: 600;
29588
+ line-height: 1em;
29589
+ text-align: center;
29590
+ text-decoration: none;
29591
+ letter-spacing: 0.2px;
29592
+ white-space: nowrap;
29593
+ text-overflow: ellipsis;
29594
+ color: #151515;
29595
+ height: 2.7em;
29596
+ padding: 0 1.2em;
29597
+ transition: opacity 0.2s ease;
29679
29598
  }
29680
- .kg-collection-card-img{
29681
- position: relative;
29682
- aspect-ratio: 3/2;
29599
+ .kg-header-card h2 + a.kg-header-card-button,
29600
+ .kg-header-card h3 + a.kg-header-card-button{
29601
+ margin: 1.75em 0 0;
29683
29602
  }
29684
- .kg-collection-card-img img{
29685
- inset: 0;
29603
+ .kg-header-card a.kg-header-card-button:hover{
29604
+ opacity: 0.85;
29686
29605
  }
29687
- a.kg-collection-card-post-wrapper:hover img{
29688
- opacity: 0.92;
29689
- transition: all 0.2s ease;
29606
+ .kg-header-card.kg-size-large a.kg-header-card-button{
29607
+ font-size: 1.1em;
29608
+ height: 2.9em;
29690
29609
  }
29691
- .kg-collection-card-content{
29692
- display: flex;
29693
- flex-direction: column;
29694
- font-size: 1.6rem;
29610
+ .kg-header-card.kg-size-large h2 + a.kg-header-card-button,
29611
+ .kg-header-card.kg-size-large h3 + a.kg-header-card-button{
29612
+ margin-top: 2em;
29695
29613
  }
29696
- h2.kg-collection-card-post-title,
29697
- p.kg-collection-card-post-excerpt{
29698
- overflow: hidden;
29699
- display: -webkit-box;
29700
- -webkit-box-orient: vertical;
29701
- -webkit-line-clamp: 2;
29614
+ .kg-header-card.kg-size-small a.kg-header-card-button{
29615
+ height: 2.4em;
29616
+ font-size: 1em;
29702
29617
  }
29703
- h2.kg-collection-card-post-title{
29704
- margin: 0;
29705
- font-size: 2.4rem;
29618
+ .kg-header-card.kg-size-small h2 + a.kg-header-card-button,
29619
+ .kg-header-card.kg-size-small h3 + a.kg-header-card-button{
29620
+ margin-top: 1.5em;
29706
29621
  }
29707
- p.kg-collection-card-post-excerpt{
29708
- margin-top: 1.2rem;
29709
- line-height: 1.4;
29622
+ .kg-header-card.kg-style-dark a.kg-header-card-button,
29623
+ .kg-header-card.kg-style-image a.kg-header-card-button{
29624
+ background: #fff;
29625
+ color: #151515;
29710
29626
  }
29711
- .kg-collection-card-post-meta{
29712
- display: flex;
29713
- opacity: 0.5;
29714
- margin-top: 1.2rem;
29715
- font-size: 1.3rem;
29716
- font-weight: 500;
29627
+ .kg-header-card.kg-style-light a.kg-header-card-button{
29628
+ background: var(--ghost-accent-color);
29629
+ color: #fff;
29717
29630
  }
29718
- .kg-collection-card-list{
29719
- display: flex;
29720
- flex-direction: column;
29721
- gap: 3.2rem;
29631
+ .kg-header-card.kg-style-accent a.kg-header-card-button{
29632
+ background: #fff;
29633
+ color: #151515;
29722
29634
  }
29723
- @media (max-width: 767px) {
29724
- .kg-collection-card-list .kg-collection-card-post{
29725
- flex-direction: column;
29635
+ @media (max-width: 640px) {
29636
+ .kg-header-card{
29637
+ padding-left: 1em;
29638
+ padding-right: 1em;
29726
29639
  }
29727
- }
29728
- .kg-collection-card-list .kg-collection-card-img{
29729
- flex: 0 0 30%;
29730
- }
29731
- .kg-collection-card-grid{
29732
- display: grid;
29733
- grid-template-columns: repeat(1, minmax(0, 1fr));
29734
- gap: 2.4rem;
29735
- }
29736
- @media (min-width: 640px) {
29737
- .kg-collection-card-grid:not(.columns-1){
29738
- grid-template-columns: repeat(2, minmax(0, 1fr));
29640
+ .kg-header-card h2.kg-header-card-header{
29641
+ font-size: 3.5em;
29739
29642
  }
29740
- }
29741
- @media (min-width: 1024px) {
29742
- .kg-collection-card-grid:not(.columns-1):not(.columns-2){
29743
- grid-template-columns: repeat(3, minmax(0, 1fr));
29744
- gap: 3.2rem;
29643
+ .kg-header-card.kg-size-large h2.kg-header-card-header{
29644
+ font-size: 4em;
29745
29645
  }
29746
- .kg-collection-card-grid.columns-1{
29747
- gap: 4.8rem;
29646
+ .kg-header-card.kg-size-small h2.kg-header-card-header{
29647
+ font-size: 3em;
29748
29648
  }
29749
- .kg-collection-card-grid.columns-2{
29750
- gap: 4rem;
29649
+ .kg-header-card h3.kg-header-card-subheader{
29650
+ font-size: 1.25em;
29751
29651
  }
29752
- }
29753
- @media (min-width: 1280px) {
29754
- .kg-collection-card-grid:not(.columns-1):not(.columns-2):not(.columns-3){
29755
- grid-template-columns: repeat(4, minmax(0, 1fr));
29652
+ .kg-header-card.kg-size-large h3.kg-header-card-subheader{
29653
+ font-size: 1.5em;
29654
+ }
29655
+ .kg-header-card.kg-size-small h3.kg-header-card-subheader{
29656
+ font-size: 1em;
29756
29657
  }
29757
29658
  }
29758
- .kg-collection-card-grid .kg-collection-card-post{
29759
- flex-direction: column;
29760
- gap: 1.2rem;
29659
+ .kg-header-card.kg-v2{
29660
+ position: relative;
29661
+ padding: 0;
29662
+ min-height: initial;
29663
+ text-align: initial;
29664
+ box-sizing: border-box;
29761
29665
  }
29762
- @media (min-width: 1024px) {
29763
- .kg-collection-card-grid.columns-1 .kg-collection-card-post{
29764
- gap: 2rem;
29765
- }
29766
- .kg-collection-card-grid.columns-2 .kg-collection-card-post{
29767
- gap: 1.6rem;
29768
- }
29666
+ .kg-header-card.kg-v2 *{
29667
+ box-sizing: border-box;
29769
29668
  }
29770
- .kg-collection-card-grid.columns-1 .kg-collection-card-img,
29771
- .kg-collection-card-grid.columns-2 .kg-collection-card-img{
29772
- aspect-ratio: 16/9;
29669
+ .kg-header-card.kg-v2 a,
29670
+ .kg-header-card.kg-v2 a span,
29671
+ .kg-signup-card a,
29672
+ .kg-signup-card a span{
29673
+ color: currentColor;
29773
29674
  }
29774
- .kg-collection-card-grid .kg-collection-card-content{
29775
- font-size: 1.5rem;
29675
+ .kg-header-card-content{
29676
+ width: 100%;
29776
29677
  }
29777
- @media (min-width: 640px) {
29778
- .kg-collection-card-grid .kg-collection-card-content{
29779
- font-size: 1.6rem;
29780
- }
29678
+ .kg-layout-split .kg-header-card-content{
29679
+ display: grid;
29680
+ grid-template-columns: 1fr 1fr;
29781
29681
  }
29782
- @media (min-width: 1024px) {
29783
- .kg-collection-card-grid.columns-1 .kg-collection-card-content{
29784
- font-size: 1.8rem;
29785
- }
29786
- .kg-collection-card-grid.columns-3 .kg-collection-card-content,
29787
- .kg-collection-card-grid.columns-4 .kg-collection-card-content{
29788
- font-size: 1.5rem;
29789
- }
29682
+ .kg-header-card-text{
29683
+ position: relative;
29684
+ display: flex;
29685
+ flex-direction: column;
29686
+ align-items: flex-start;
29687
+ justify-content: center;
29688
+ height: 100%;
29689
+ padding: min(6.4vmax, 120px) min(4vmax, 80px);
29690
+ background-size: cover;
29691
+ background-position: center;
29692
+ text-align: left;
29790
29693
  }
29791
- .kg-collection-card-grid h2.kg-collection-card-post-title{
29792
- font-size: 1.7rem;
29694
+ .kg-width-wide .kg-header-card-text{
29695
+ padding: min(10vmax, 220px) min(6.4vmax, 140px);
29793
29696
  }
29794
- .kg-collection-card-grid .kg-collection-card-post-meta{
29795
- font-size: 1.25rem;
29697
+ .kg-width-full .kg-header-card-text{
29698
+ padding: min(12vmax, 260px) 0;
29796
29699
  }
29797
- @media (min-width: 640px) {
29798
- .kg-collection-card-grid h2.kg-collection-card-post-title{
29799
- font-size: 1.9rem;
29800
- }
29801
- .kg-collection-card-grid.columns-1 h2.kg-collection-card-post-title{
29802
- font-size: 2.4rem;
29803
- }
29804
- .kg-collection-card-grid:not(.columns-3):not(.columns-4)
29805
- .kg-collection-card-post-meta{
29806
- font-size: 1.3rem;
29807
- }
29700
+ .kg-layout-split .kg-header-card-text{
29701
+ padding: min(12vmax, 260px) min(4vmax, 80px);
29808
29702
  }
29809
- @media (min-width: 1024px) {
29810
- .kg-collection-card-grid.columns-1 h2.kg-collection-card-post-title{
29811
- font-size: 3.6rem;
29812
- }
29813
- .kg-collection-card-grid.columns-2 h2.kg-collection-card-post-title{
29814
- font-size: 2.4rem;
29815
- }
29816
- .kg-collection-card-grid.columns-1 .kg-collection-card-post-meta{
29817
- font-size: 1.4rem;
29818
- }
29703
+ .kg-layout-split.kg-content-wide .kg-header-card-text{
29704
+ padding: min(10vmax, 220px) 0 min(10vmax, 220px) min(4vmax, 80px);
29819
29705
  }
29820
- @media (min-width: 1280px) {
29821
- .kg-collection-card-grid.columns-4 h2.kg-collection-card-post-title{
29822
- font-size: 1.7rem;
29823
- }
29706
+ .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text{
29707
+ padding: min(10vmax, 220px) min(4vmax, 80px) min(10vmax, 220px) 0;
29824
29708
  }
29825
- .kg-file-card,
29826
- .kg-file-card *{
29827
- box-sizing: border-box;
29709
+ .kg-swapped .kg-header-card-text{
29710
+ grid-row: 1;
29828
29711
  }
29829
- .kg-file-card{
29830
- display: flex;
29712
+ .kg-header-card-text.kg-align-center{
29713
+ align-items: center;
29714
+ text-align: center;
29831
29715
  }
29832
- .kg-file-card a.kg-file-card-container{
29833
- display: flex;
29834
- align-items: stretch;
29835
- justify-content: space-between;
29836
- padding: 12px;
29837
- min-height: 92px;
29838
- background: #fff;
29839
- color: #222;
29840
- border: 1px solid rgb(124 139 154/25%);
29841
- border-radius: 5px;
29842
- transition: all ease-in-out 0.35s;
29843
- text-decoration: none;
29844
- width: 100%;
29845
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
29716
+ .kg-header-card.kg-style-image .kg-header-card-subheading,
29717
+ .kg-header-card.kg-style-image h2.kg-header-card-heading,
29718
+ .kg-header-card.kg-style-image.kg-v2 .kg-header-card-button{
29719
+ z-index: 999;
29846
29720
  }
29847
- .kg-file-card a.kg-file-card-container:hover{
29848
- border: 1px solid rgb(124 139 154/35%);
29721
+ .kg-header-card > picture > .kg-header-card-image{
29722
+ position: absolute;
29723
+ top: 0;
29724
+ left: 0;
29725
+ width: 100%;
29726
+ height: 100%;
29727
+ -o-object-fit: cover;
29728
+ object-fit: cover;
29729
+ -o-object-position: center;
29730
+ object-position: center;
29731
+ background-color: #fff;
29732
+ pointer-events: none;
29849
29733
  }
29850
- .kg-file-card-contents{
29851
- display: flex;
29852
- flex-direction: column;
29853
- justify-content: space-between;
29854
- margin: 4px 8px;
29734
+ .kg-header-card-content .kg-header-card-image{
29855
29735
  width: 100%;
29736
+ height: 0;
29737
+ min-height: 100%;
29738
+ -o-object-fit: cover;
29739
+ object-fit: cover;
29740
+ -o-object-position: center;
29741
+ object-position: center;
29856
29742
  }
29857
- .kg-file-card-title{
29858
- font-size: 16px;
29859
- font-weight: 600;
29860
- line-height: 1.3em;
29743
+ .kg-content-wide .kg-header-card-content .kg-header-card-image{
29744
+ height: 100%;
29745
+ padding: 5.6em 0;
29746
+ -o-object-fit: contain;
29747
+ object-fit: contain;
29861
29748
  }
29862
- .kg-file-card-caption{
29863
- font-size: 14px;
29864
- line-height: 1.3em;
29865
- opacity: 0.7;
29749
+ .kg-header-card h2.kg-header-card-heading,
29750
+ .kg-signup-card h2.kg-signup-card-heading{
29751
+ margin: 0;
29752
+ font-size: clamp(1.7em, 4vw, 2.5em);
29753
+ font-weight: 700;
29754
+ line-height: 1.05em;
29755
+ letter-spacing: -0.01em;
29866
29756
  }
29867
- .kg-file-card-title + .kg-file-card-caption{
29868
- flex-grow: 1;
29869
- margin-top: 3px;
29757
+ .kg-header-card.kg-width-wide h2.kg-header-card-heading{
29758
+ font-size: clamp(1.7em, 5vw, 3.3em);
29870
29759
  }
29871
- .kg-file-card-metadata{
29872
- display: inline;
29873
- font-size: 14px;
29874
- line-height: 1.3em;
29875
- margin-top: 5px;
29760
+ .kg-header-card.kg-width-full h2.kg-header-card-heading{
29761
+ font-size: clamp(1.9em, 5.6vw, 4.2em);
29876
29762
  }
29877
- .kg-file-card-filename{
29878
- display: inline;
29763
+ .kg-header-card.kg-width-full.kg-layout-split h2.kg-header-card-heading,
29764
+ .kg-signup-card.kg-width-full.kg-layout-split h2.kg-signup-card-heading{
29765
+ font-size: clamp(1.9em, 4vw, 3.3em);
29766
+ }
29767
+ .kg-header-card-subheading{
29768
+ margin: 0 0 2em;
29769
+ }
29770
+ .kg-header-card .kg-header-card-subheading{
29771
+ max-width: 40em;
29772
+ margin: 0;
29773
+ font-size: clamp(1.05em, 2vw, 1.4em);
29879
29774
  font-weight: 500;
29775
+ line-height: 1.2em;
29880
29776
  }
29881
- .kg-file-card-filesize{
29882
- display: inline-block;
29883
- font-size: 14px;
29884
- opacity: 0.6;
29777
+ .kg-header-card h2 + .kg-header-card-subheading{
29778
+ margin: 0.6em 0 0;
29885
29779
  }
29886
- .kg-file-card-filesize:before{
29887
- display: inline-block;
29888
- content: '•';
29889
- margin-left: 6px;
29890
- margin-right: 6px;
29780
+ .kg-header-card.kg-width-full.kg-layout-split .kg-header-card-subheading,
29781
+ .kg-header-card.kg-width-wide .kg-header-card-subheading{
29782
+ font-size: clamp(1.05em, 2vw, 1.55em);
29891
29783
  }
29892
- .kg-file-card-icon{
29893
- position: relative;
29784
+ .kg-header-card.kg-width-full
29785
+ .kg-header-card-subheading:not(.kg-layout-split .kg-header-card-subheading){
29786
+ max-width: min(65vmax, 1200px);
29787
+ font-size: clamp(1.05em, 2vw, 1.7em);
29788
+ }
29789
+ .kg-header-card.kg-v2 .kg-header-card-button{
29894
29790
  display: flex;
29791
+ position: relative;
29895
29792
  align-items: center;
29896
- justify-content: center;
29897
- width: 80px;
29898
- min-width: 80px;
29899
- height: 100%;
29900
- min-height: 80px;
29901
- }
29902
- .kg-file-card-icon:before{
29903
- position: absolute;
29904
- display: block;
29905
- content: '';
29906
- top: 0;
29907
- left: 0;
29908
- right: 0;
29909
- bottom: 0;
29910
- background: currentColor;
29911
- opacity: 0.06;
29912
- transition: opacity ease-in-out 0.35s;
29793
+ height: 2.9em;
29794
+ min-height: 46px;
29795
+ padding: 0 1.2em;
29796
+ outline: 0;
29797
+ border: 0;
29798
+ font-size: 1em;
29799
+ font-weight: 600;
29800
+ line-height: 1em;
29801
+ text-align: center;
29802
+ text-decoration: none;
29803
+ letter-spacing: 0.2px;
29804
+ white-space: nowrap;
29805
+ text-overflow: ellipsis;
29913
29806
  border-radius: 3px;
29807
+ transition: opacity 0.2s ease;
29914
29808
  }
29915
- .kg-file-card a.kg-file-card-container:hover .kg-file-card-icon:before{
29916
- opacity: 0.08;
29809
+ .kg-header-card.kg-v2 .kg-header-card-button.kg-style-accent{
29810
+ background-color: var(--ghost-accent-color);
29917
29811
  }
29918
- .kg-file-card-icon svg{
29919
- width: 24px;
29920
- height: 24px;
29921
- color: var(--ghost-accent-color);
29812
+ .kg-header-card.kg-v2 h2 + .kg-header-card-button,
29813
+ .kg-header-card.kg-v2 p + .kg-header-card-button{
29814
+ margin: 1.5em 0 0;
29922
29815
  }
29923
- .kg-file-card-medium a.kg-file-card-container{
29924
- min-height: 72px;
29816
+ .kg-header-card.kg-v2 .kg-header-card-button:hover{
29817
+ opacity: 0.85;
29925
29818
  }
29926
- .kg-file-card-medium .kg-file-card-caption{
29927
- opacity: 1;
29928
- font-weight: 500;
29819
+ .kg-header-card.kg-v2.kg-width-wide .kg-header-card-button{
29820
+ font-size: 1.05em;
29929
29821
  }
29930
- .kg-file-card-small a.kg-file-card-container{
29931
- align-items: center;
29932
- min-height: 52px;
29822
+ .kg-header-card.kg-v2.kg-width-wide h2 + .kg-header-card-button,
29823
+ .kg-header-card.kg-v2.kg-width-wide p + .kg-header-card-button,
29824
+ .kg-signup-card.kg-width-wide h2 + .kg-signup-card-button,
29825
+ .kg-signup-card.kg-width-wide p + .kg-signup-card-button{
29826
+ margin-top: 1.75em;
29933
29827
  }
29934
- .kg-file-card-small .kg-file-card-metadata{
29935
- font-size: 14px;
29936
- margin-top: 0;
29828
+ .kg-header-card.kg-v2.kg-width-full .kg-header-card-button{
29829
+ font-size: 1.1em;
29937
29830
  }
29938
- .kg-file-card-small .kg-file-card-icon svg{
29939
- width: 20px;
29940
- height: 20px;
29831
+ .kg-header-card.kg-v2.kg-width-full h2 + .kg-header-card-button,
29832
+ .kg-header-card.kg-v2.kg-width-full p + .kg-header-card-button,
29833
+ .kg-signup-card.kg-width-full h2 + .kg-signup-card-button,
29834
+ .kg-signup-card.kg-width-full p + .kg-signup-card-button{
29835
+ margin-top: 2em;
29941
29836
  }
29942
- .kg-file-card + .kg-file-card{
29943
- margin-top: 1em;
29837
+ @media (max-width: 640px) {
29838
+ .kg-layout-split .kg-header-card-content{
29839
+ grid-template-columns: 1fr;
29840
+ }
29841
+ .kg-width-wide .kg-header-card-text{
29842
+ padding: min(6.4vmax, 120px) min(4vmax, 80px);
29843
+ }
29844
+ .kg-layout-split.kg-content-wide .kg-header-card-text,
29845
+ .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text{
29846
+ padding: min(9.6vmax, 180px) 0;
29847
+ }
29848
+ .kg-header-card.kg-width-full
29849
+ .kg-header-card-subheading:not(
29850
+ .kg-layout-split .kg-header-card-subheading
29851
+ ){
29852
+ max-width: unset;
29853
+ }
29854
+ .kg-header-card-content
29855
+ .kg-header-card-image:not(
29856
+ .kg-content-wide .kg-header-card-content .kg-header-card-image
29857
+ ){
29858
+ height: auto;
29859
+ min-height: unset;
29860
+ aspect-ratio: 1/1;
29861
+ }
29862
+ .kg-content-wide .kg-header-card-content .kg-header-card-image{
29863
+ padding: 1.7em 0 0;
29864
+ }
29865
+ .kg-content-wide.kg-swapped .kg-header-card-content .kg-header-card-image{
29866
+ padding: 0 0 1.7em;
29867
+ }
29868
+ .kg-header-card.kg-v2 .kg-header-card-button{
29869
+ height: 2.9em;
29870
+ }
29871
+ .kg-header-card.kg-v2.kg-width-full .kg-header-card-button,
29872
+ .kg-header-card.kg-v2.kg-width-wide .kg-header-card-button{
29873
+ font-size: 1em;
29874
+ }
29944
29875
  }
29945
- .kg-gallery-card,
29946
- .kg-gallery-card *{
29876
+ .kg-nft-card,
29877
+ .kg-nft-card *{
29947
29878
  box-sizing: border-box;
29948
29879
  }
29949
- .kg-gallery-card,
29950
- .kg-image-card{
29951
- --gap: 1.2rem;
29952
- }
29953
- .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card,
29954
- .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
29955
- .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
29956
- .kg-image-card:not(.kg-card-hascaption) + .kg-image-card{
29957
- margin-top: var(--gap);
29958
- }
29959
- .kg-gallery-container{
29960
- position: relative;
29961
- }
29962
- .kg-gallery-row{
29880
+ .kg-nft-card{
29963
29881
  display: flex;
29964
- flex-direction: row;
29965
- justify-content: center;
29966
- }
29967
- .kg-gallery-image img{
29968
- display: block;
29969
- margin: 0;
29882
+ flex-direction: column;
29883
+ align-items: center;
29970
29884
  width: 100%;
29971
- height: 100%;
29972
- }
29973
- .kg-gallery-row:not(:first-of-type){
29974
- margin: var(--gap) 0 0;
29975
- }
29976
- .kg-gallery-image:not(:first-of-type){
29977
- margin: 0 0 0 var(--gap);
29885
+ margin-left: auto;
29886
+ margin-right: auto;
29978
29887
  }
29979
- @media (max-width: 600px) {
29980
- .kg-gallery-card,
29981
- .kg-image-card{
29982
- --gap: 0.6rem;
29983
- }
29984
- }
29985
- .kg-header-card,
29986
- .kg-header-card *{
29987
- box-sizing: border-box;
29988
- }
29989
- .kg-header-card{
29990
- padding: 12vmin 4em;
29991
- min-height: 60vh;
29888
+ .kg-nft-card a.kg-nft-card-container{
29889
+ position: static;
29992
29890
  display: flex;
29891
+ flex: auto;
29993
29892
  flex-direction: column;
29994
- align-items: center;
29995
- justify-content: center;
29996
- text-align: center;
29893
+ text-decoration: none;
29894
+ font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
29895
+ font-size: 14px;
29896
+ font-weight: 400;
29897
+ box-shadow: 0 2px 6px -2px rgb(0 0 0/10%), 0 0 1px rgb(0 0 0/40%);
29898
+ width: 100%;
29899
+ max-width: 512px;
29900
+ color: #222;
29901
+ background: #fff;
29902
+ border-radius: 5px;
29903
+ transition: none;
29997
29904
  }
29998
- .kg-header-card.kg-size-small{
29999
- padding-top: 14vmin;
30000
- padding-bottom: 14vmin;
30001
- min-height: 40vh;
29905
+ .kg-nft-card *{
29906
+ position: static;
30002
29907
  }
30003
- .kg-header-card.kg-size-large{
30004
- padding-top: 18vmin;
30005
- padding-bottom: 18vmin;
30006
- min-height: 80vh;
29908
+ .kg-nft-metadata{
29909
+ padding: 20px;
29910
+ width: 100%;
30007
29911
  }
30008
- .kg-header-card.kg-align-left{
30009
- text-align: left;
30010
- align-items: flex-start;
29912
+ .kg-nft-image{
29913
+ border-radius: 5px 5px 0 0;
29914
+ width: 100%;
30011
29915
  }
30012
- .kg-header-card.kg-style-dark{
30013
- background: #151515;
30014
- color: #fff;
29916
+ .kg-nft-header{
29917
+ display: flex;
29918
+ justify-content: space-between;
29919
+ align-items: flex-start;
29920
+ gap: 20px;
30015
29921
  }
30016
- .kg-header-card.kg-style-light{
30017
- background-color: #fafafa;
29922
+ .kg-nft-header h4.kg-nft-title{
29923
+ font-family: inherit;
29924
+ font-size: 19px;
29925
+ font-weight: 700;
29926
+ line-height: 1.3em;
29927
+ min-width: unset;
29928
+ max-width: unset;
29929
+ margin: 0;
29930
+ color: #222;
30018
29931
  }
30019
- .kg-header-card.kg-style-accent,
30020
- .kg-header-card.kg-style-accent.kg-v2{
30021
- background-color: var(--ghost-accent-color);
29932
+ .kg-nft-opensea-logo{
29933
+ margin-top: 2px;
29934
+ width: 100px;
29935
+ -o-object-fit: scale-down;
29936
+ object-fit: scale-down;
30022
29937
  }
30023
- .kg-header-card.kg-style-image{
30024
- position: relative;
30025
- background-color: #e7e7e7;
30026
- background-size: cover;
30027
- background-position: center;
29938
+ .kg-nft-card p.kg-nft-description,
29939
+ .kg-nft-creator{
29940
+ font-family: inherit;
29941
+ line-height: 1.4em;
29942
+ margin: 4px 0 0;
29943
+ color: #ababab;
30028
29944
  }
30029
- .kg-header-card.kg-style-image::before{
30030
- position: absolute;
30031
- display: block;
30032
- content: '';
30033
- top: 0;
30034
- right: 0;
30035
- bottom: 0;
30036
- left: 0;
30037
- background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.2));
29945
+ .kg-nft-creator span{
29946
+ font-weight: 500;
29947
+ color: #222;
30038
29948
  }
30039
- .kg-header-card h2.kg-header-card-header{
30040
- font-size: 5em;
30041
- font-weight: 700;
30042
- line-height: 1.1em;
30043
- letter-spacing: -0.01em;
30044
- margin: 0;
29949
+ .kg-nft-card p.kg-nft-description{
29950
+ font-size: 14px;
29951
+ margin: 20px 0 0;
29952
+ color: #222;
30045
29953
  }
30046
- .kg-header-card h2.kg-header-card-header strong{
30047
- font-weight: 800;
29954
+ .kg-product-card,
29955
+ .kg-product-card *{
29956
+ box-sizing: border-box;
30048
29957
  }
30049
- .kg-header-card.kg-size-small h2.kg-header-card-header{
30050
- font-size: 4em;
29958
+ .kg-product-card{
29959
+ display: flex;
29960
+ align-items: center;
29961
+ flex-direction: column;
29962
+ width: 100%;
30051
29963
  }
30052
- .kg-header-card.kg-size-large h2.kg-header-card-header{
30053
- font-size: 6em;
29964
+ .kg-product-card-container{
29965
+ display: grid;
29966
+ grid-template-columns: auto min-content;
29967
+ align-items: center;
29968
+ grid-row-gap: 16px;
29969
+ background: 0 0;
29970
+ max-width: 550px;
29971
+ padding: 20px;
29972
+ width: 100%;
29973
+ background: #fff;
29974
+ color: #222;
29975
+ border-radius: 5px;
29976
+ box-shadow: inset 0 0 0 1px rgb(124 139 154/25%);
29977
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
30054
29978
  }
30055
- .kg-header-card h3.kg-header-card-subheader{
30056
- font-size: 1.5em;
30057
- font-weight: 500;
30058
- line-height: 1.4em;
30059
- margin: 0;
30060
- max-width: 40em;
29979
+ .kg-product-card-image{
29980
+ grid-column: 1/3;
29981
+ justify-self: center;
29982
+ height: auto;
30061
29983
  }
30062
- .kg-header-card h2 + h3.kg-header-card-subheader{
30063
- margin: 0.35em 0 0;
29984
+ .kg-product-card-title-container{
29985
+ grid-column: 1/2;
30064
29986
  }
30065
- .kg-header-card .kg-header-card-subheading strong,
30066
- .kg-header-card h3.kg-header-card-subheader strong,
30067
- .kg-signup-card .kg-signup-card-subheading strong{
29987
+ .kg-product-card h4.kg-product-card-title{
29988
+ text-decoration: none;
30068
29989
  font-weight: 600;
29990
+ font-size: 21px;
29991
+ margin-top: 0;
29992
+ margin-bottom: 0;
29993
+ line-height: 1.15em;
30069
29994
  }
30070
- .kg-header-card.kg-size-small h3.kg-header-card-subheader{
30071
- font-size: 1.25em;
29995
+ .kg-product-card-description{
29996
+ grid-column: 1/3;
30072
29997
  }
30073
- .kg-header-card.kg-size-large h3.kg-header-card-subheader{
30074
- font-size: 1.75em;
29998
+ .kg-product-card .kg-product-card-description ol,
29999
+ .kg-product-card .kg-product-card-description p,
30000
+ .kg-product-card .kg-product-card-description ul{
30001
+ font-size: 14px;
30002
+ line-height: 1.5em;
30003
+ opacity: 0.7;
30004
+ margin-bottom: 0;
30075
30005
  }
30076
- .kg-header-card:not(.kg-style-light) h2.kg-header-card-header,
30077
- .kg-header-card:not(.kg-style-light) h3.kg-header-card-subheader{
30078
- color: #fff;
30006
+ .kg-product-card .kg-product-card-description p:first-of-type{
30007
+ margin-top: -4px;
30079
30008
  }
30080
- .kg-header-card.kg-style-accent h3.kg-header-card-subheader,
30081
- .kg-header-card.kg-style-image h3.kg-header-card-subheader,
30082
- .kg-product-card-rating-active.kg-product-card-rating-star svg{
30083
- opacity: 1;
30009
+ .kg-product-card .kg-product-card-description ol,
30010
+ .kg-product-card .kg-product-card-description p:not(:first-of-type),
30011
+ .kg-product-card .kg-product-card-description ul{
30012
+ margin-top: 0.95em;
30084
30013
  }
30085
- .kg-header-card.kg-style-image a.kg-header-card-button,
30086
- .kg-header-card.kg-style-image h2.kg-header-card-header,
30087
- .kg-header-card.kg-style-image h3.kg-header-card-subheader{
30088
- z-index: 999;
30014
+ .kg-product-card .kg-product-card-description li + li,
30015
+ .kg-toggle-card li + li{
30016
+ margin-top: 0.5em;
30089
30017
  }
30090
- .kg-header-card h2.kg-header-card-header a,
30091
- .kg-header-card h3.kg-header-card-subheader a{
30092
- color: var(--ghost-accent-color);
30018
+ .kg-product-card-rating{
30019
+ display: flex;
30020
+ align-items: center;
30021
+ grid-column: 2/3;
30022
+ align-self: start;
30023
+ justify-self: end;
30024
+ padding-left: 16px;
30093
30025
  }
30094
- .kg-header-card.kg-style-accent h2.kg-header-card-header a,
30095
- .kg-header-card.kg-style-accent h3.kg-header-card-subheader a,
30096
- .kg-header-card.kg-style-image h2.kg-header-card-header a,
30097
- .kg-header-card.kg-style-image h3.kg-header-card-subheader a{
30098
- color: #fff;
30026
+ @media (max-width: 400px) {
30027
+ .kg-product-card-title-container{
30028
+ grid-column: 1/3;
30029
+ }
30030
+ .kg-product-card-rating{
30031
+ grid-column: 1/3;
30032
+ justify-self: start;
30033
+ margin-top: -15px;
30034
+ padding-left: 0;
30035
+ }
30099
30036
  }
30100
- .kg-header-card a.kg-header-card-button{
30037
+ .kg-product-card-rating-star{
30038
+ height: 20px;
30039
+ width: 20px;
30040
+ }
30041
+ .kg-product-card-rating-star svg{
30042
+ width: 16px;
30043
+ height: 16px;
30044
+ fill: currentColor;
30045
+ opacity: 0.15;
30046
+ }
30047
+ .kg-product-card a.kg-product-card-button{
30048
+ justify-content: center;
30049
+ grid-column: 1/3;
30101
30050
  display: flex;
30102
30051
  position: static;
30103
30052
  align-items: center;
30104
- fill: #fff;
30105
- background: #fff;
30106
- border-radius: 3px;
30107
- outline: 0;
30108
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
30109
- font-size: 1.05em;
30053
+ font-size: 14px;
30110
30054
  font-weight: 600;
30111
30055
  line-height: 1em;
30112
- text-align: center;
30113
30056
  text-decoration: none;
30114
- letter-spacing: 0.2px;
30115
- white-space: nowrap;
30116
- text-overflow: ellipsis;
30117
- color: #151515;
30118
- height: 2.7em;
30119
- padding: 0 1.2em;
30120
- transition: opacity 0.2s ease;
30121
- }
30122
- .kg-header-card h2 + a.kg-header-card-button,
30123
- .kg-header-card h3 + a.kg-header-card-button{
30124
- margin: 1.75em 0 0;
30057
+ width: 100%;
30058
+ height: 38px;
30059
+ border-radius: 6px;
30060
+ padding: 0 12px;
30061
+ transition: opacity 0.2s ease-in-out;
30125
30062
  }
30126
- .kg-header-card a.kg-header-card-button:hover{
30127
- opacity: 0.85;
30063
+ .kg-product-card a.kg-product-card-btn-accent{
30064
+ background-color: var(--ghost-accent-color);
30065
+ color: #fff;
30128
30066
  }
30129
- .kg-header-card.kg-size-large a.kg-header-card-button{
30130
- font-size: 1.1em;
30131
- height: 2.9em;
30132
- }
30133
- .kg-header-card.kg-size-large h2 + a.kg-header-card-button,
30134
- .kg-header-card.kg-size-large h3 + a.kg-header-card-button{
30135
- margin-top: 2em;
30136
- }
30137
- .kg-header-card.kg-size-small a.kg-header-card-button{
30138
- height: 2.4em;
30139
- font-size: 1em;
30140
- }
30141
- .kg-header-card.kg-size-small h2 + a.kg-header-card-button,
30142
- .kg-header-card.kg-size-small h3 + a.kg-header-card-button{
30143
- margin-top: 1.5em;
30144
- }
30145
- .kg-header-card.kg-style-dark a.kg-header-card-button,
30146
- .kg-header-card.kg-style-image a.kg-header-card-button{
30147
- background: #fff;
30148
- color: #151515;
30149
- }
30150
- .kg-header-card.kg-style-light a.kg-header-card-button{
30151
- background: var(--ghost-accent-color);
30152
- color: #fff;
30153
- }
30154
- .kg-header-card.kg-style-accent a.kg-header-card-button{
30155
- background: #fff;
30156
- color: #151515;
30157
- }
30158
- @media (max-width: 640px) {
30159
- .kg-header-card{
30160
- padding-left: 1em;
30161
- padding-right: 1em;
30162
- }
30163
- .kg-header-card h2.kg-header-card-header{
30164
- font-size: 3.5em;
30165
- }
30166
- .kg-header-card.kg-size-large h2.kg-header-card-header{
30167
- font-size: 4em;
30168
- }
30169
- .kg-header-card.kg-size-small h2.kg-header-card-header{
30170
- font-size: 3em;
30171
- }
30172
- .kg-header-card h3.kg-header-card-subheader{
30173
- font-size: 1.25em;
30174
- }
30175
- .kg-header-card.kg-size-large h3.kg-header-card-subheader{
30176
- font-size: 1.5em;
30177
- }
30178
- .kg-header-card.kg-size-small h3.kg-header-card-subheader{
30179
- font-size: 1em;
30180
- }
30181
- }
30182
- .kg-header-card.kg-v2{
30067
+ .kg-signup-card{
30183
30068
  position: relative;
30184
- padding: 0;
30185
- min-height: initial;
30186
- text-align: initial;
30187
- box-sizing: border-box;
30188
30069
  }
30189
- .kg-header-card.kg-v2 *{
30070
+ .kg-signup-card,
30071
+ .kg-signup-card *{
30190
30072
  box-sizing: border-box;
30191
30073
  }
30192
- .kg-header-card.kg-v2 a,
30193
- .kg-header-card.kg-v2 a span,
30194
- .kg-signup-card a,
30195
- .kg-signup-card a span{
30196
- color: currentColor;
30197
- }
30198
- .kg-header-card-content{
30199
- width: 100%;
30074
+ .kg-signup-card.kg-style-accent{
30075
+ background-color: var(--ghost-accent-color);
30200
30076
  }
30201
- .kg-layout-split .kg-header-card-content{
30077
+ .kg-layout-split .kg-signup-card-content{
30202
30078
  display: grid;
30203
30079
  grid-template-columns: 1fr 1fr;
30204
30080
  }
30205
- .kg-header-card-text{
30081
+ .kg-signup-card-text{
30206
30082
  position: relative;
30207
30083
  display: flex;
30208
30084
  flex-direction: column;
30209
30085
  align-items: flex-start;
30210
30086
  justify-content: center;
30211
30087
  height: 100%;
30212
- padding: min(6.4vmax, 120px) min(4vmax, 80px);
30088
+ padding: min(4vmax, 80px);
30213
30089
  background-size: cover;
30214
30090
  background-position: center;
30215
30091
  text-align: left;
30216
30092
  }
30217
- .kg-width-wide .kg-header-card-text{
30218
- padding: min(10vmax, 220px) min(6.4vmax, 140px);
30093
+ .kg-width-wide .kg-signup-card-text{
30094
+ padding: min(6.4vmax, 120px);
30219
30095
  }
30220
- .kg-width-full .kg-header-card-text{
30096
+ .kg-width-full .kg-signup-card-text{
30221
30097
  padding: min(12vmax, 260px) 0;
30222
30098
  }
30223
- .kg-layout-split .kg-header-card-text{
30099
+ .kg-layout-split .kg-signup-card-text{
30224
30100
  padding: min(12vmax, 260px) min(4vmax, 80px);
30225
30101
  }
30226
- .kg-layout-split.kg-content-wide .kg-header-card-text{
30102
+ .kg-layout-split.kg-content-wide .kg-signup-card-text{
30227
30103
  padding: min(10vmax, 220px) 0 min(10vmax, 220px) min(4vmax, 80px);
30228
30104
  }
30229
- .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text{
30105
+ .kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text{
30230
30106
  padding: min(10vmax, 220px) min(4vmax, 80px) min(10vmax, 220px) 0;
30231
30107
  }
30232
- .kg-swapped .kg-header-card-text{
30108
+ .kg-swapped .kg-signup-card-text{
30233
30109
  grid-row: 1;
30234
30110
  }
30235
- .kg-header-card-text.kg-align-center{
30111
+ .kg-signup-card-text.kg-align-center{
30236
30112
  align-items: center;
30237
30113
  text-align: center;
30238
30114
  }
30239
- .kg-header-card.kg-style-image .kg-header-card-subheading,
30240
- .kg-header-card.kg-style-image h2.kg-header-card-heading,
30241
- .kg-header-card.kg-style-image.kg-v2 .kg-header-card-button{
30115
+ .kg-signup-card.kg-style-image .kg-signup-card-button,
30116
+ .kg-signup-card.kg-style-image .kg-signup-card-subheading,
30117
+ .kg-signup-card.kg-style-image h2.kg-signup-card-heading{
30242
30118
  z-index: 999;
30243
30119
  }
30244
- .kg-header-card > picture > .kg-header-card-image{
30120
+ .kg-signup-card > picture > .kg-signup-card-image{
30245
30121
  position: absolute;
30246
30122
  top: 0;
30247
30123
  left: 0;
@@ -30254,7 +30130,7 @@ p.kg-collection-card-post-excerpt{
30254
30130
  background-color: #fff;
30255
30131
  pointer-events: none;
30256
30132
  }
30257
- .kg-header-card-content .kg-header-card-image{
30133
+ .kg-signup-card-content .kg-signup-card-image{
30258
30134
  width: 100%;
30259
30135
  height: 0;
30260
30136
  min-height: 100%;
@@ -30263,53 +30139,89 @@ p.kg-collection-card-post-excerpt{
30263
30139
  -o-object-position: center;
30264
30140
  object-position: center;
30265
30141
  }
30266
- .kg-content-wide .kg-header-card-content .kg-header-card-image{
30142
+ .kg-content-wide .kg-signup-card-content .kg-signup-card-image{
30267
30143
  height: 100%;
30268
30144
  padding: 5.6em 0;
30269
30145
  -o-object-fit: contain;
30270
30146
  object-fit: contain;
30271
30147
  }
30272
- .kg-header-card h2.kg-header-card-heading,
30273
- .kg-signup-card h2.kg-signup-card-heading{
30274
- margin: 0;
30275
- font-size: clamp(1.7em, 4vw, 2.5em);
30276
- font-weight: 700;
30277
- line-height: 1.05em;
30278
- letter-spacing: -0.01em;
30279
- }
30280
- .kg-header-card.kg-width-wide h2.kg-header-card-heading{
30148
+ .kg-signup-card.kg-width-wide h2.kg-signup-card-heading{
30281
30149
  font-size: clamp(1.7em, 5vw, 3.3em);
30282
30150
  }
30283
- .kg-header-card.kg-width-full h2.kg-header-card-heading{
30151
+ .kg-signup-card.kg-width-full h2.kg-signup-card-heading{
30284
30152
  font-size: clamp(1.9em, 5.6vw, 4.2em);
30285
30153
  }
30286
- .kg-header-card.kg-width-full.kg-layout-split h2.kg-header-card-heading,
30287
- .kg-signup-card.kg-width-full.kg-layout-split h2.kg-signup-card-heading{
30288
- font-size: clamp(1.9em, 4vw, 3.3em);
30289
- }
30290
- .kg-header-card-subheading{
30154
+ .kg-signup-card-subheading{
30291
30155
  margin: 0 0 2em;
30292
30156
  }
30293
- .kg-header-card .kg-header-card-subheading{
30157
+ .kg-signup-card .kg-signup-card-subheading{
30294
30158
  max-width: 40em;
30295
30159
  margin: 0;
30296
30160
  font-size: clamp(1.05em, 2vw, 1.4em);
30297
30161
  font-weight: 500;
30298
30162
  line-height: 1.2em;
30299
30163
  }
30300
- .kg-header-card h2 + .kg-header-card-subheading{
30164
+ .kg-signup-card h2 + .kg-signup-card-subheading{
30301
30165
  margin: 0.6em 0 0;
30302
30166
  }
30303
- .kg-header-card.kg-width-full.kg-layout-split .kg-header-card-subheading,
30304
- .kg-header-card.kg-width-wide .kg-header-card-subheading{
30167
+ .kg-signup-card.kg-width-full.kg-layout-split .kg-signup-card-subheading,
30168
+ .kg-signup-card.kg-width-wide .kg-signup-card-subheading{
30305
30169
  font-size: clamp(1.05em, 2vw, 1.55em);
30306
30170
  }
30307
- .kg-header-card.kg-width-full
30308
- .kg-header-card-subheading:not(.kg-layout-split .kg-header-card-subheading){
30171
+ .kg-signup-card.kg-width-full
30172
+ .kg-signup-card-subheading:not(.kg-layout-split .kg-signup-card-subheading){
30309
30173
  max-width: min(65vmax, 1200px);
30310
30174
  font-size: clamp(1.05em, 2vw, 1.7em);
30311
30175
  }
30312
- .kg-header-card.kg-v2 .kg-header-card-button{
30176
+ .kg-signup-card-form{
30177
+ position: relative;
30178
+ display: flex;
30179
+ flex-shrink: 0;
30180
+ width: 100%;
30181
+ }
30182
+ .kg-align-center .kg-signup-card-form{
30183
+ justify-content: center;
30184
+ }
30185
+ .kg-signup-card-heading + .kg-signup-card-form,
30186
+ .kg-signup-card-subheading + .kg-signup-card-form{
30187
+ margin: min(2.4vmax, 48px) 0 0;
30188
+ }
30189
+ .kg-width-wide .kg-signup-card-heading + .kg-signup-card-form,
30190
+ .kg-width-wide .kg-signup-card-subheading + .kg-signup-card-form{
30191
+ margin: min(3.2vmax, 64px) 0 0;
30192
+ }
30193
+ .kg-width-full .kg-signup-card-heading + .kg-signup-card-form,
30194
+ .kg-width-full .kg-signup-card-subheading + .kg-signup-card-form{
30195
+ margin: min(4vmax, 80px) 0 0;
30196
+ }
30197
+ .kg-signup-card-fields{
30198
+ display: flex;
30199
+ width: 100%;
30200
+ padding: 3px;
30201
+ background: #fff;
30202
+ border: 1px solid #e6e6e6;
30203
+ border-radius: 4px;
30204
+ }
30205
+ .kg-width-full .kg-signup-card-fields,
30206
+ .kg-width-wide .kg-signup-card-fields{
30207
+ width: 100%;
30208
+ max-width: 500px;
30209
+ }
30210
+ .kg-signup-card-input{
30211
+ width: 100%;
30212
+ height: 2.9em;
30213
+ min-height: 46px;
30214
+ margin: 0 3px 0 0;
30215
+ padding: 12px 16px;
30216
+ border: 0;
30217
+ background: #fff;
30218
+ font-size: 1.1em;
30219
+ }
30220
+ .kg-signup-card-input:focus,
30221
+ .kg-signup-card-input:focus-visible{
30222
+ outline: 0;
30223
+ }
30224
+ .kg-signup-card-button{
30313
30225
  display: flex;
30314
30226
  position: relative;
30315
30227
  align-items: center;
@@ -30328,910 +30240,1002 @@ p.kg-collection-card-post-excerpt{
30328
30240
  text-overflow: ellipsis;
30329
30241
  border-radius: 3px;
30330
30242
  transition: opacity 0.2s ease;
30243
+ cursor: pointer;
30331
30244
  }
30332
- .kg-header-card.kg-v2 .kg-header-card-button.kg-style-accent{
30245
+ .kg-signup-card-button.kg-style-accent{
30333
30246
  background-color: var(--ghost-accent-color);
30334
30247
  }
30335
- .kg-header-card.kg-v2 h2 + .kg-header-card-button,
30336
- .kg-header-card.kg-v2 p + .kg-header-card-button{
30248
+ .kg-signup-card h2 + .kg-signup-card-button,
30249
+ .kg-signup-card p + .kg-signup-card-button{
30337
30250
  margin: 1.5em 0 0;
30338
30251
  }
30339
- .kg-header-card.kg-v2 .kg-header-card-button:hover{
30252
+ .kg-signup-card .kg-signup-card-button:hover{
30340
30253
  opacity: 0.85;
30341
30254
  }
30342
- .kg-header-card.kg-v2.kg-width-wide .kg-header-card-button{
30255
+ .kg-signup-card.kg-width-wide .kg-signup-card-button{
30343
30256
  font-size: 1.05em;
30344
30257
  }
30345
- .kg-header-card.kg-v2.kg-width-wide h2 + .kg-header-card-button,
30346
- .kg-header-card.kg-v2.kg-width-wide p + .kg-header-card-button,
30347
- .kg-signup-card.kg-width-wide h2 + .kg-signup-card-button,
30348
- .kg-signup-card.kg-width-wide p + .kg-signup-card-button{
30349
- margin-top: 1.75em;
30350
- }
30351
- .kg-header-card.kg-v2.kg-width-full .kg-header-card-button{
30258
+ .kg-signup-card.kg-width-full .kg-signup-card-button{
30352
30259
  font-size: 1.1em;
30353
30260
  }
30354
- .kg-header-card.kg-v2.kg-width-full h2 + .kg-header-card-button,
30355
- .kg-header-card.kg-v2.kg-width-full p + .kg-header-card-button,
30356
- .kg-signup-card.kg-width-full h2 + .kg-signup-card-button,
30357
- .kg-signup-card.kg-width-full p + .kg-signup-card-button{
30358
- margin-top: 2em;
30261
+ .kg-signup-card-error,
30262
+ .kg-signup-card-form.success .kg-signup-card-fields,
30263
+ .kg-signup-card-success{
30264
+ display: none;
30265
+ }
30266
+ .kg-signup-card-form.success .kg-signup-card-success{
30267
+ display: flex;
30268
+ align-items: center;
30269
+ height: 3em;
30270
+ font-size: 1.25em;
30271
+ font-weight: 500;
30272
+ line-height: 1.4em;
30273
+ }
30274
+ .kg-signup-card-form.error .kg-signup-card-fields{
30275
+ border: 1px solid red;
30276
+ box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.2);
30277
+ }
30278
+ .kg-signup-card-form.error .kg-signup-card-error{
30279
+ position: absolute;
30280
+ bottom: calc(-1rem - 1.6em);
30281
+ display: block;
30282
+ font-size: inherit;
30283
+ }
30284
+ .kg-signup-card-button-loading{
30285
+ position: absolute;
30286
+ inset: 0;
30287
+ align-items: center;
30288
+ justify-content: center;
30289
+ display: none;
30290
+ }
30291
+ .kg-signup-card-form.loading .kg-signup-card-button-default{
30292
+ color: transparent;
30293
+ }
30294
+ .kg-signup-card-form.loading .kg-signup-card-button-loading{
30295
+ display: flex;
30296
+ }
30297
+ .kg-signup-card-disclaimer{
30298
+ margin: 1rem 0 0;
30299
+ }
30300
+ .kg-signup-card-form.error + .kg-signup-card-disclaimer,
30301
+ .kg-signup-card-form.success + .kg-signup-card-disclaimer{
30302
+ visibility: hidden;
30359
30303
  }
30360
30304
  @media (max-width: 640px) {
30361
- .kg-layout-split .kg-header-card-content{
30305
+ .kg-layout-split .kg-signup-card-content{
30362
30306
  grid-template-columns: 1fr;
30363
30307
  }
30364
- .kg-width-wide .kg-header-card-text{
30308
+ .kg-width-wide .kg-signup-card-text{
30365
30309
  padding: min(6.4vmax, 120px) min(4vmax, 80px);
30366
30310
  }
30367
- .kg-layout-split.kg-content-wide .kg-header-card-text,
30368
- .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text{
30311
+ .kg-layout-split.kg-content-wide .kg-signup-card-text,
30312
+ .kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text{
30369
30313
  padding: min(9.6vmax, 180px) 0;
30370
30314
  }
30371
- .kg-header-card.kg-width-full
30372
- .kg-header-card-subheading:not(
30373
- .kg-layout-split .kg-header-card-subheading
30315
+ .kg-signup-card.kg-width-full
30316
+ .kg-signup-card-subheading:not(
30317
+ .kg-layout-split .kg-signup-card-subheading
30374
30318
  ){
30375
30319
  max-width: unset;
30376
30320
  }
30377
- .kg-header-card-content
30378
- .kg-header-card-image:not(
30379
- .kg-content-wide .kg-header-card-content .kg-header-card-image
30321
+ .kg-signup-card-content
30322
+ .kg-signup-card-image:not(
30323
+ .kg-content-wide .kg-signup-card-content .kg-signup-card-image
30380
30324
  ){
30381
30325
  height: auto;
30382
30326
  min-height: unset;
30383
30327
  aspect-ratio: 1/1;
30384
30328
  }
30385
- .kg-content-wide .kg-header-card-content .kg-header-card-image{
30329
+ .kg-content-wide .kg-signup-card-content .kg-signup-card-image{
30386
30330
  padding: 1.7em 0 0;
30387
30331
  }
30388
- .kg-content-wide.kg-swapped .kg-header-card-content .kg-header-card-image{
30332
+ .kg-content-wide.kg-swapped .kg-signup-card-content .kg-signup-card-image{
30389
30333
  padding: 0 0 1.7em;
30390
30334
  }
30391
- .kg-header-card.kg-v2 .kg-header-card-button{
30335
+ .kg-signup-card-input{
30336
+ height: 2.9em;
30337
+ padding: 6px 12px;
30338
+ font-size: 1em;
30339
+ }
30340
+ .kg-signup-card-button{
30392
30341
  height: 2.9em;
30393
30342
  }
30394
- .kg-header-card.kg-v2.kg-width-full .kg-header-card-button,
30395
- .kg-header-card.kg-v2.kg-width-wide .kg-header-card-button{
30343
+ .kg-signup-card.kg-width-full .kg-signup-card-button,
30344
+ .kg-signup-card.kg-width-wide .kg-signup-card-button{
30396
30345
  font-size: 1em;
30397
30346
  }
30398
30347
  }
30399
- .kg-nft-card,
30400
- .kg-nft-card *{
30348
+ .kg-toggle-card,
30349
+ .kg-toggle-card *{
30401
30350
  box-sizing: border-box;
30402
30351
  }
30403
- .kg-nft-card{
30404
- display: flex;
30405
- flex-direction: column;
30406
- align-items: center;
30407
- width: 100%;
30408
- margin-left: auto;
30409
- margin-right: auto;
30410
- }
30411
- .kg-nft-card a.kg-nft-card-container{
30412
- position: static;
30413
- display: flex;
30414
- flex: auto;
30415
- flex-direction: column;
30416
- text-decoration: none;
30417
- font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
30418
- font-size: 14px;
30419
- font-weight: 400;
30420
- box-shadow: 0 2px 6px -2px rgb(0 0 0/10%), 0 0 1px rgb(0 0 0/40%);
30421
- width: 100%;
30422
- max-width: 512px;
30423
- color: #222;
30424
- background: #fff;
30425
- border-radius: 5px;
30426
- transition: none;
30352
+ .kg-toggle-card{
30353
+ background: 0 0;
30354
+ box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
30355
+ border-radius: 4px;
30356
+ padding: 1.2em;
30427
30357
  }
30428
- .kg-nft-card *{
30429
- position: static;
30358
+ .kg-toggle-card[data-kg-toggle-state='close'] .kg-toggle-content{
30359
+ height: 0;
30360
+ overflow: hidden;
30361
+ transition: opacity 0.5s ease, top 0.35s ease;
30362
+ opacity: 0;
30363
+ top: -0.5em;
30364
+ position: relative;
30430
30365
  }
30431
- .kg-nft-metadata{
30432
- padding: 20px;
30433
- width: 100%;
30366
+ .kg-toggle-content{
30367
+ height: auto;
30368
+ opacity: 1;
30369
+ transition: opacity 1s ease, top 0.35s ease;
30370
+ top: 0;
30371
+ position: relative;
30434
30372
  }
30435
- .kg-nft-image{
30436
- border-radius: 5px 5px 0 0;
30437
- width: 100%;
30373
+ .kg-toggle-card[data-kg-toggle-state='close'] svg{
30374
+ transform: unset;
30438
30375
  }
30439
- .kg-nft-header{
30376
+ .kg-toggle-heading{
30377
+ cursor: pointer;
30440
30378
  display: flex;
30441
30379
  justify-content: space-between;
30442
30380
  align-items: flex-start;
30443
- gap: 20px;
30444
30381
  }
30445
- .kg-nft-header h4.kg-nft-title{
30446
- font-family: inherit;
30447
- font-size: 19px;
30382
+ .kg-toggle-card h4.kg-toggle-heading-text{
30383
+ font-size: 1.15em;
30448
30384
  font-weight: 700;
30449
30385
  line-height: 1.3em;
30450
- min-width: unset;
30451
- max-width: unset;
30452
- margin: 0;
30453
- color: #222;
30454
- }
30455
- .kg-nft-opensea-logo{
30456
- margin-top: 2px;
30457
- width: 100px;
30458
- -o-object-fit: scale-down;
30459
- object-fit: scale-down;
30460
- }
30461
- .kg-nft-card p.kg-nft-description,
30462
- .kg-nft-creator{
30463
- font-family: inherit;
30464
- line-height: 1.4em;
30465
- margin: 4px 0 0;
30466
- color: #ababab;
30467
- }
30468
- .kg-nft-creator span{
30469
- font-weight: 500;
30470
- color: #222;
30386
+ margin-top: 0;
30387
+ margin-bottom: 0;
30471
30388
  }
30472
- .kg-nft-card p.kg-nft-description{
30473
- font-size: 14px;
30474
- margin: 20px 0 0;
30475
- color: #222;
30389
+ .kg-toggle-content p:first-of-type{
30390
+ margin-top: 0.5em;
30476
30391
  }
30477
- .kg-product-card,
30478
- .kg-product-card *{
30479
- box-sizing: border-box;
30392
+ .kg-toggle-card .kg-toggle-content ol,
30393
+ .kg-toggle-card .kg-toggle-content p,
30394
+ .kg-toggle-card .kg-toggle-content ul{
30395
+ font-size: 0.95em;
30396
+ line-height: 1.5em;
30397
+ margin-top: 0.95em;
30398
+ margin-bottom: 0;
30480
30399
  }
30481
- .kg-product-card{
30400
+ .kg-toggle-card-icon{
30401
+ height: 24px;
30402
+ width: 24px;
30482
30403
  display: flex;
30404
+ justify-content: center;
30483
30405
  align-items: center;
30484
- flex-direction: column;
30485
- width: 100%;
30486
- }
30487
- .kg-product-card-container{
30488
- display: grid;
30489
- grid-template-columns: auto min-content;
30490
- align-items: center;
30491
- grid-row-gap: 16px;
30406
+ margin-left: 1em;
30407
+ padding: 0;
30492
30408
  background: 0 0;
30493
- max-width: 550px;
30494
- padding: 20px;
30495
- width: 100%;
30496
- background: #fff;
30497
- color: #222;
30498
- border-radius: 5px;
30499
- box-shadow: inset 0 0 0 1px rgb(124 139 154/25%);
30500
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
30501
- }
30502
- .kg-product-card-image{
30503
- grid-column: 1/3;
30504
- justify-self: center;
30505
- height: auto;
30506
- }
30507
- .kg-product-card-title-container{
30508
- grid-column: 1/2;
30409
+ border: 0;
30410
+ cursor: pointer;
30509
30411
  }
30510
- .kg-product-card h4.kg-product-card-title{
30511
- text-decoration: none;
30512
- font-weight: 600;
30513
- font-size: 21px;
30514
- margin-top: 0;
30515
- margin-bottom: 0;
30516
- line-height: 1.15em;
30412
+ .kg-toggle-heading svg{
30413
+ width: 14px;
30414
+ color: rgba(124, 139, 154, 0.5);
30415
+ transition: all 0.3s;
30416
+ transform: rotate(-180deg);
30517
30417
  }
30518
- .kg-product-card-description{
30519
- grid-column: 1/3;
30418
+ .kg-toggle-heading path{
30419
+ fill: none;
30420
+ stroke: currentcolor;
30421
+ stroke-linecap: round;
30422
+ stroke-linejoin: round;
30423
+ stroke-width: 1.5;
30424
+ fill-rule: evenodd;
30520
30425
  }
30521
- .kg-product-card .kg-product-card-description ol,
30522
- .kg-product-card .kg-product-card-description p,
30523
- .kg-product-card .kg-product-card-description ul{
30524
- font-size: 14px;
30525
- line-height: 1.5em;
30526
- opacity: 0.7;
30527
- margin-bottom: 0;
30426
+ .kg-toggle-card + .kg-toggle-card{
30427
+ margin-top: 1em;
30528
30428
  }
30529
- .kg-product-card .kg-product-card-description p:first-of-type{
30530
- margin-top: -4px;
30429
+ .kg-video-card,
30430
+ .kg-video-card *{
30431
+ box-sizing: border-box;
30531
30432
  }
30532
- .kg-product-card .kg-product-card-description ol,
30533
- .kg-product-card .kg-product-card-description p:not(:first-of-type),
30534
- .kg-product-card .kg-product-card-description ul{
30535
- margin-top: 0.95em;
30433
+ .kg-video-card{
30434
+ position: relative;
30435
+ --seek-before-width: 0%;
30436
+ --volume-before-width: 100%;
30437
+ --buffered-width: 0%;
30536
30438
  }
30537
- .kg-product-card .kg-product-card-description li + li,
30538
- .kg-toggle-card li + li{
30539
- margin-top: 0.5em;
30439
+ .kg-video-card video{
30440
+ display: block;
30441
+ max-width: 100%;
30442
+ height: auto;
30540
30443
  }
30541
- .kg-product-card-rating{
30444
+ .kg-video-container{
30445
+ position: relative;
30542
30446
  display: flex;
30447
+ flex-direction: column;
30543
30448
  align-items: center;
30544
- grid-column: 2/3;
30545
- align-self: start;
30546
- justify-self: end;
30547
- padding-left: 16px;
30548
- }
30549
- @media (max-width: 400px) {
30550
- .kg-product-card-title-container{
30551
- grid-column: 1/3;
30552
- }
30553
- .kg-product-card-rating{
30554
- grid-column: 1/3;
30555
- justify-self: start;
30556
- margin-top: -15px;
30557
- padding-left: 0;
30558
- }
30559
- }
30560
- .kg-product-card-rating-star{
30561
- height: 20px;
30562
- width: 20px;
30563
- }
30564
- .kg-product-card-rating-star svg{
30565
- width: 16px;
30566
- height: 16px;
30567
- fill: currentColor;
30568
- opacity: 0.15;
30569
30449
  }
30570
- .kg-product-card a.kg-product-card-button{
30571
- justify-content: center;
30572
- grid-column: 1/3;
30450
+ .kg-video-large-play-icon,
30451
+ .kg-video-overlay{
30573
30452
  display: flex;
30574
- position: static;
30453
+ justify-content: center;
30575
30454
  align-items: center;
30576
- font-size: 14px;
30577
- font-weight: 600;
30578
- line-height: 1em;
30579
- text-decoration: none;
30580
- width: 100%;
30581
- height: 38px;
30582
- border-radius: 6px;
30583
- padding: 0 12px;
30584
30455
  transition: opacity 0.2s ease-in-out;
30585
30456
  }
30586
- .kg-product-card a.kg-product-card-btn-accent{
30587
- background-color: var(--ghost-accent-color);
30588
- color: #fff;
30589
- }
30590
- .kg-signup-card{
30591
- position: relative;
30457
+ .kg-video-overlay{
30458
+ position: absolute;
30459
+ top: 0;
30460
+ right: 0;
30461
+ bottom: 0;
30462
+ left: 0;
30463
+ background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0, transparent 70%, transparent 100%);
30464
+ z-index: 999;
30592
30465
  }
30593
- .kg-signup-card,
30594
- .kg-signup-card *{
30595
- box-sizing: border-box;
30466
+ .kg-video-large-play-icon{
30467
+ width: 72px;
30468
+ height: 72px;
30469
+ padding: 0;
30470
+ background: rgba(0, 0, 0, 0.5);
30471
+ border-radius: 50%;
30596
30472
  }
30597
- .kg-signup-card.kg-style-accent{
30598
- background-color: var(--ghost-accent-color);
30473
+ .kg-video-large-play-icon svg{
30474
+ width: 20px;
30475
+ height: auto;
30476
+ margin-left: 2px;
30477
+ fill: #fff;
30599
30478
  }
30600
- .kg-layout-split .kg-signup-card-content{
30601
- display: grid;
30602
- grid-template-columns: 1fr 1fr;
30479
+ .kg-video-player-container{
30480
+ position: absolute;
30481
+ bottom: 0;
30482
+ width: 100%;
30483
+ height: 80px;
30484
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
30485
+ z-index: 999;
30486
+ transition: opacity 0.2s ease-in-out;
30603
30487
  }
30604
- .kg-signup-card-text{
30605
- position: relative;
30488
+ .kg-video-player{
30489
+ position: absolute;
30490
+ bottom: 0;
30606
30491
  display: flex;
30607
- flex-direction: column;
30608
- align-items: flex-start;
30609
- justify-content: center;
30610
- height: 100%;
30611
- padding: min(4vmax, 80px);
30612
- background-size: cover;
30613
- background-position: center;
30614
- text-align: left;
30492
+ align-items: center;
30493
+ width: 100%;
30494
+ z-index: 9999;
30495
+ padding: 12px 16px;
30615
30496
  }
30616
- .kg-width-wide .kg-signup-card-text{
30617
- padding: min(6.4vmax, 120px);
30497
+ .kg-video-current-time,
30498
+ .kg-video-time{
30499
+ font-family: inherit;
30500
+ font-size: 12.5px;
30501
+ font-weight: 500;
30502
+ line-height: 1.4em;
30503
+ white-space: nowrap;
30618
30504
  }
30619
- .kg-width-full .kg-signup-card-text{
30620
- padding: min(12vmax, 260px) 0;
30505
+ .kg-video-current-time{
30506
+ min-width: 38px;
30507
+ padding: 0 4px;
30508
+ color: #fff;
30621
30509
  }
30622
- .kg-layout-split .kg-signup-card-text{
30623
- padding: min(12vmax, 260px) min(4vmax, 80px);
30510
+ .kg-video-time{
30511
+ color: rgba(255, 255, 255, 0.6);
30624
30512
  }
30625
- .kg-layout-split.kg-content-wide .kg-signup-card-text{
30626
- padding: min(10vmax, 220px) 0 min(10vmax, 220px) min(4vmax, 80px);
30513
+ .kg-video-duration{
30514
+ padding: 0 4px;
30627
30515
  }
30628
- .kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text{
30629
- padding: min(10vmax, 220px) min(4vmax, 80px) min(10vmax, 220px) 0;
30516
+ .kg-video-pause-icon,
30517
+ .kg-video-play-icon{
30518
+ position: relative;
30519
+ padding: 0 4px 0 0;
30520
+ font-size: 0;
30521
+ background: 0 0;
30630
30522
  }
30631
- .kg-swapped .kg-signup-card-text{
30632
- grid-row: 1;
30523
+ .kg-video-hide{
30524
+ display: none !important;
30633
30525
  }
30634
- .kg-signup-card-text.kg-align-center{
30635
- align-items: center;
30636
- text-align: center;
30526
+ .kg-video-hide-animated{
30527
+ opacity: 0 !important;
30528
+ transition: opacity 0.2s ease-in-out;
30529
+ cursor: initial;
30637
30530
  }
30638
- .kg-signup-card.kg-style-image .kg-signup-card-button,
30639
- .kg-signup-card.kg-style-image .kg-signup-card-subheading,
30640
- .kg-signup-card.kg-style-image h2.kg-signup-card-heading{
30641
- z-index: 999;
30531
+ .kg-video-pause-icon svg,
30532
+ .kg-video-play-icon svg{
30533
+ width: 14px;
30534
+ height: 14px;
30535
+ fill: #fff;
30642
30536
  }
30643
- .kg-signup-card > picture > .kg-signup-card-image{
30644
- position: absolute;
30645
- top: 0;
30646
- left: 0;
30647
- width: 100%;
30648
- height: 100%;
30649
- -o-object-fit: cover;
30650
- object-fit: cover;
30651
- -o-object-position: center;
30652
- object-position: center;
30653
- background-color: #fff;
30654
- pointer-events: none;
30537
+ .kg-video-seek-slider{
30538
+ flex-grow: 1;
30539
+ margin: 0 4px;
30655
30540
  }
30656
- .kg-signup-card-content .kg-signup-card-image{
30657
- width: 100%;
30658
- height: 0;
30659
- min-height: 100%;
30660
- -o-object-fit: cover;
30661
- object-fit: cover;
30662
- -o-object-position: center;
30663
- object-position: center;
30541
+ @media (max-width: 520px) {
30542
+ .kg-video-seek-slider{
30543
+ display: none;
30544
+ }
30664
30545
  }
30665
- .kg-content-wide .kg-signup-card-content .kg-signup-card-image{
30666
- height: 100%;
30667
- padding: 5.6em 0;
30668
- -o-object-fit: contain;
30669
- object-fit: contain;
30546
+ .kg-video-playback-rate{
30547
+ min-width: 37px;
30548
+ padding: 0 4px;
30549
+ color: #fff;
30550
+ font-family: inherit;
30551
+ font-size: 12.5px;
30552
+ font-weight: 600;
30553
+ line-height: 1.4em;
30554
+ text-align: left;
30555
+ background: 0 0;
30556
+ white-space: nowrap;
30670
30557
  }
30671
- .kg-signup-card.kg-width-wide h2.kg-signup-card-heading{
30672
- font-size: clamp(1.7em, 5vw, 3.3em);
30558
+ @media (max-width: 520px) {
30559
+ .kg-video-playback-rate{
30560
+ padding-left: 8px;
30561
+ }
30673
30562
  }
30674
- .kg-signup-card.kg-width-full h2.kg-signup-card-heading{
30675
- font-size: clamp(1.9em, 5.6vw, 4.2em);
30563
+ .kg-video-mute-icon,
30564
+ .kg-video-unmute-icon{
30565
+ position: relative;
30566
+ bottom: -1px;
30567
+ padding: 0 4px;
30568
+ font-size: 0;
30569
+ background: 0 0;
30676
30570
  }
30677
- .kg-signup-card-subheading{
30678
- margin: 0 0 2em;
30571
+ @media (max-width: 520px) {
30572
+ .kg-video-mute-icon,
30573
+ .kg-video-unmute-icon{
30574
+ margin-left: auto;
30575
+ }
30679
30576
  }
30680
- .kg-signup-card .kg-signup-card-subheading{
30681
- max-width: 40em;
30682
- margin: 0;
30683
- font-size: clamp(1.05em, 2vw, 1.4em);
30684
- font-weight: 500;
30685
- line-height: 1.2em;
30577
+ .kg-video-mute-icon svg,
30578
+ .kg-video-unmute-icon svg{
30579
+ width: 16px;
30580
+ height: 16px;
30581
+ fill: #fff;
30686
30582
  }
30687
- .kg-signup-card h2 + .kg-signup-card-subheading{
30688
- margin: 0.6em 0 0;
30583
+ .kg-video-volume-slider{
30584
+ width: 80px;
30689
30585
  }
30690
- .kg-signup-card.kg-width-full.kg-layout-split .kg-signup-card-subheading,
30691
- .kg-signup-card.kg-width-wide .kg-signup-card-subheading{
30692
- font-size: clamp(1.05em, 2vw, 1.55em);
30586
+ @media (max-width: 300px) {
30587
+ .kg-video-volume-slider{
30588
+ display: none;
30589
+ }
30693
30590
  }
30694
- .kg-signup-card.kg-width-full
30695
- .kg-signup-card-subheading:not(.kg-layout-split .kg-signup-card-subheading){
30696
- max-width: min(65vmax, 1200px);
30697
- font-size: clamp(1.05em, 2vw, 1.7em);
30591
+ .kg-video-seek-slider::before,
30592
+ .kg-video-volume-slider::before{
30593
+ content: '';
30594
+ position: absolute;
30595
+ left: 0;
30596
+ width: var(--seek-before-width) !important;
30597
+ height: 4px;
30598
+ cursor: pointer;
30599
+ background-color: #ebeef0;
30600
+ border-radius: 2px;
30698
30601
  }
30699
- .kg-signup-card-form{
30602
+ .kg-video-volume-slider::before{
30603
+ width: var(--volume-before-width) !important;
30604
+ }
30605
+ .kg-video-card input[type='range']{
30700
30606
  position: relative;
30701
- display: flex;
30702
- flex-shrink: 0;
30703
- width: 100%;
30607
+ -webkit-appearance: none;
30608
+ background: 0 0;
30609
+ height: auto;
30610
+ padding: 0;
30611
+ border: 0;
30704
30612
  }
30705
- .kg-align-center .kg-signup-card-form{
30706
- justify-content: center;
30613
+ .kg-video-card input[type='range']::-webkit-slider-thumb{
30614
+ -webkit-appearance: none;
30615
+ position: relative;
30616
+ box-sizing: content-box;
30617
+ width: 13px;
30618
+ height: 13px;
30619
+ margin: -5px 0 0;
30620
+ border: 0;
30621
+ cursor: pointer;
30622
+ background: #fff;
30623
+ border-radius: 50%;
30624
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
30707
30625
  }
30708
- .kg-signup-card-heading + .kg-signup-card-form,
30709
- .kg-signup-card-subheading + .kg-signup-card-form{
30710
- margin: min(2.4vmax, 48px) 0 0;
30626
+ .kg-video-card input[type='range']::-webkit-slider-runnable-track{
30627
+ width: 100%;
30628
+ height: 4px;
30629
+ cursor: pointer;
30630
+ background: rgba(255, 255, 255, 0.2);
30631
+ border-radius: 2px;
30711
30632
  }
30712
- .kg-width-wide .kg-signup-card-heading + .kg-signup-card-form,
30713
- .kg-width-wide .kg-signup-card-subheading + .kg-signup-card-form{
30714
- margin: min(3.2vmax, 64px) 0 0;
30715
- }
30716
- .kg-width-full .kg-signup-card-heading + .kg-signup-card-form,
30717
- .kg-width-full .kg-signup-card-subheading + .kg-signup-card-form{
30718
- margin: min(4vmax, 80px) 0 0;
30633
+ .kg-video-card input[type='range']:active::-webkit-slider-thumb{
30634
+ transform: scale(1.2);
30719
30635
  }
30720
- .kg-signup-card-fields{
30721
- display: flex;
30636
+ .kg-video-card input[type='range']::-moz-range-track{
30722
30637
  width: 100%;
30723
- padding: 3px;
30724
- background: #fff;
30725
- border: 1px solid #e6e6e6;
30726
- border-radius: 4px;
30638
+ height: 4px;
30639
+ cursor: pointer;
30640
+ background: rgba(255, 255, 255, 0.2);
30641
+ border-radius: 2px;
30727
30642
  }
30728
- .kg-width-full .kg-signup-card-fields,
30729
- .kg-width-wide .kg-signup-card-fields{
30730
- width: 100%;
30731
- max-width: 500px;
30643
+ .kg-video-card input[type='range']::-moz-range-progress{
30644
+ background: #ebeef0;
30645
+ border-radius: 2px;
30732
30646
  }
30733
- .kg-signup-card-input{
30734
- width: 100%;
30735
- height: 2.9em;
30736
- min-height: 46px;
30737
- margin: 0 3px 0 0;
30738
- padding: 12px 16px;
30647
+ .kg-video-card input[type='range']::-moz-range-thumb{
30648
+ box-sizing: content-box;
30649
+ width: 13px;
30650
+ height: 13px;
30739
30651
  border: 0;
30652
+ cursor: pointer;
30740
30653
  background: #fff;
30741
- font-size: 1.1em;
30654
+ border-radius: 50%;
30655
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
30742
30656
  }
30743
- .kg-signup-card-input:focus,
30744
- .kg-signup-card-input:focus-visible{
30745
- outline: 0;
30657
+ .kg-video-card input[type='range']:active::-moz-range-thumb{
30658
+ transform: scale(1.2);
30746
30659
  }
30747
- .kg-signup-card-button{
30748
- display: flex;
30749
- position: relative;
30750
- align-items: center;
30751
- height: 2.9em;
30752
- min-height: 46px;
30753
- padding: 0 1.2em;
30754
- outline: 0;
30755
- border: 0;
30756
- font-size: 1em;
30757
- font-weight: 600;
30758
- line-height: 1em;
30759
- text-align: center;
30760
- text-decoration: none;
30761
- letter-spacing: 0.2px;
30762
- white-space: nowrap;
30763
- text-overflow: ellipsis;
30764
- border-radius: 3px;
30765
- transition: opacity 0.2s ease;
30660
+ .kg-video-card input[type='range']::-ms-track{
30661
+ width: 100%;
30662
+ height: 3px;
30663
+ border: solid transparent;
30664
+ color: transparent;
30766
30665
  cursor: pointer;
30666
+ background: 0 0;
30767
30667
  }
30768
- .kg-signup-card-button.kg-style-accent{
30769
- background-color: var(--ghost-accent-color);
30668
+ .kg-video-card input[type='range']::-ms-fill-lower{
30669
+ background: #fff;
30770
30670
  }
30771
- .kg-signup-card h2 + .kg-signup-card-button,
30772
- .kg-signup-card p + .kg-signup-card-button{
30773
- margin: 1.5em 0 0;
30671
+ .kg-video-card input[type='range']::-ms-fill-upper{
30672
+ background: #ebeef0;
30774
30673
  }
30775
- .kg-signup-card .kg-signup-card-button:hover{
30776
- opacity: 0.85;
30674
+ .kg-video-card input[type='range']::-ms-thumb{
30675
+ box-sizing: content-box;
30676
+ width: 13px;
30677
+ height: 13px;
30678
+ border: 0;
30679
+ cursor: pointer;
30680
+ background: #fff;
30681
+ border-radius: 50%;
30682
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
30777
30683
  }
30778
- .kg-signup-card.kg-width-wide .kg-signup-card-button{
30779
- font-size: 1.05em;
30684
+ .kg-video-card input[type='range']:active::-ms-thumb{
30685
+ transform: scale(1.2);
30780
30686
  }
30781
- .kg-signup-card.kg-width-full .kg-signup-card-button{
30782
- font-size: 1.1em;
30687
+ .gh-content{
30688
+ display: grid;
30689
+ gap: var(--space-3);
30783
30690
  }
30784
- .kg-signup-card-error,
30785
- .kg-signup-card-form.success .kg-signup-card-fields,
30786
- .kg-signup-card-success{
30787
- display: none;
30691
+ .gh-content > *{
30692
+ margin: 0;
30788
30693
  }
30789
- .kg-signup-card-form.success .kg-signup-card-success{
30790
- display: flex;
30791
- align-items: center;
30792
- height: 3em;
30793
- font-size: 1.25em;
30794
- font-weight: 500;
30795
- line-height: 1.4em;
30694
+ .gh-content hr{
30695
+ margin-top: var(--space-3);
30696
+ margin-bottom: var(--space-3);
30796
30697
  }
30797
- .kg-signup-card-form.error .kg-signup-card-fields{
30798
- border: 1px solid red;
30799
- box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.2);
30698
+ .gh-content h1{
30699
+ margin-top: var(--space-8);
30800
30700
  }
30801
- .kg-signup-card-form.error .kg-signup-card-error{
30802
- position: absolute;
30803
- bottom: calc(-1rem - 1.6em);
30804
- display: block;
30805
- font-size: inherit;
30701
+ .gh-content h2{
30702
+ margin-top: var(--space-8);
30806
30703
  }
30807
- .kg-signup-card-button-loading{
30808
- position: absolute;
30809
- inset: 0;
30810
- align-items: center;
30811
- justify-content: center;
30812
- display: none;
30704
+ .gh-content h3{
30705
+ margin-top: var(--space-6);
30813
30706
  }
30814
- .kg-signup-card-form.loading .kg-signup-card-button-default{
30815
- color: transparent;
30707
+ .gh-content a{
30708
+ color: var(--accent-a11);
30816
30709
  }
30817
- .kg-signup-card-form.loading .kg-signup-card-button-loading{
30818
- display: flex;
30710
+ .gh-content :not(.kg-card):not(table):not([id])+:is(.kg-card,table){
30711
+ margin-top: var(--space-6);
30819
30712
  }
30820
- .kg-signup-card-disclaimer{
30821
- margin: 1rem 0 0;
30713
+ .tipp_datePicker{
30714
+ color: var(--gary-12);
30822
30715
  }
30823
- .kg-signup-card-form.error + .kg-signup-card-disclaimer,
30824
- .kg-signup-card-form.success + .kg-signup-card-disclaimer{
30825
- visibility: hidden;
30716
+ .tipp_datePicker.full-width{
30717
+ width: 100%;
30826
30718
  }
30827
- @media (max-width: 640px) {
30828
- .kg-layout-split .kg-signup-card-content{
30829
- grid-template-columns: 1fr;
30830
- }
30831
- .kg-width-wide .kg-signup-card-text{
30832
- padding: min(6.4vmax, 120px) min(4vmax, 80px);
30833
- }
30834
- .kg-layout-split.kg-content-wide .kg-signup-card-text,
30835
- .kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text{
30836
- padding: min(9.6vmax, 180px) 0;
30837
- }
30838
- .kg-signup-card.kg-width-full
30839
- .kg-signup-card-subheading:not(
30840
- .kg-layout-split .kg-signup-card-subheading
30841
- ){
30842
- max-width: unset;
30843
- }
30844
- .kg-signup-card-content
30845
- .kg-signup-card-image:not(
30846
- .kg-content-wide .kg-signup-card-content .kg-signup-card-image
30847
- ){
30848
- height: auto;
30849
- min-height: unset;
30850
- aspect-ratio: 1/1;
30851
- }
30852
- .kg-content-wide .kg-signup-card-content .kg-signup-card-image{
30853
- padding: 1.7em 0 0;
30854
- }
30855
- .kg-content-wide.kg-swapped .kg-signup-card-content .kg-signup-card-image{
30856
- padding: 0 0 1.7em;
30857
- }
30858
- .kg-signup-card-input{
30859
- height: 2.9em;
30860
- padding: 6px 12px;
30861
- font-size: 1em;
30862
- }
30863
- .kg-signup-card-button{
30864
- height: 2.9em;
30865
- }
30866
- .kg-signup-card.kg-width-full .kg-signup-card-button,
30867
- .kg-signup-card.kg-width-wide .kg-signup-card-button{
30868
- font-size: 1em;
30869
- }
30719
+ .tipp_datePicker input{
30720
+ border-radius: var(--radius-2);
30721
+ border-color: var(--gray-a5);
30722
+ border-width: 1px;
30723
+ color: var(--gary-12);
30724
+ border: none;
30725
+ outline: none;
30726
+ box-shadow: inset 0 0 0 1px var(--gray-a7);
30870
30727
  }
30871
- .kg-toggle-card,
30872
- .kg-toggle-card *{
30873
- box-sizing: border-box;
30728
+ .tipp_datePicker input:focus{
30729
+ box-shadow: inset 0 0 0 2px var(--accent-a8);
30874
30730
  }
30875
- .kg-toggle-card{
30876
- background: 0 0;
30877
- box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
30878
- border-radius: 4px;
30879
- padding: 1.2em;
30731
+ .tipp_datePicker.small input{
30732
+ font-size: 12px;
30733
+ height: 24px;
30734
+ padding: 0 var(--space-2);
30880
30735
  }
30881
- .kg-toggle-card[data-kg-toggle-state='close'] .kg-toggle-content{
30882
- height: 0;
30883
- overflow: hidden;
30884
- transition: opacity 0.5s ease, top 0.35s ease;
30885
- opacity: 0;
30886
- top: -0.5em;
30887
- position: relative;
30736
+ .tipp_datePicker.medium input{
30737
+ font-size: 14px;
30738
+ height: 32px;
30739
+ padding: 0 var(--space-2);
30888
30740
  }
30889
- .kg-toggle-content{
30890
- height: auto;
30891
- opacity: 1;
30892
- transition: opacity 1s ease, top 0.35s ease;
30893
- top: 0;
30894
- position: relative;
30741
+ .tipp_datePicker.large input{
30742
+ font-size: 16px;
30743
+ height: 40px;
30744
+ padding: 0 var(--space-3);
30895
30745
  }
30896
- .kg-toggle-card[data-kg-toggle-state='close'] svg{
30897
- transform: unset;
30746
+ .react-datepicker.tipp_datePicker_calendar{
30747
+ font-family: var(--default-font-family);
30748
+ background-color: var(--color-panel-solid);
30749
+ color: var(--gray-12);
30750
+ box-shadow: var(--shadow-3);
30751
+ border-color: var(--gray-5);
30752
+ display: flex;
30898
30753
  }
30899
- .kg-toggle-heading{
30900
- cursor: pointer;
30754
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__time-container
30755
+ .react-datepicker__time
30756
+ .react-datepicker__time-box
30757
+ ul.react-datepicker__time-list li.react-datepicker__time-list-item{
30901
30758
  display: flex;
30902
- justify-content: space-between;
30903
- align-items: flex-start;
30759
+ align-items: center;
30760
+ justify-content: center;
30904
30761
  }
30905
- .kg-toggle-card h4.kg-toggle-heading-text{
30906
- font-size: 1.15em;
30907
- font-weight: 700;
30908
- line-height: 1.3em;
30909
- margin-top: 0;
30910
- margin-bottom: 0;
30762
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__time-container
30763
+ .react-datepicker__time
30764
+ .react-datepicker__time-box
30765
+ ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{
30766
+ background-color: var(--accent-a3);
30911
30767
  }
30912
- .kg-toggle-content p:first-of-type{
30913
- margin-top: 0.5em;
30768
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__time-container
30769
+ .react-datepicker__time
30770
+ .react-datepicker__time-box
30771
+ ul.react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--selected{
30772
+ background-color: var(--accent-9);
30773
+ color: var(--accent-contrast);
30774
+ font-weight: 400;
30914
30775
  }
30915
- .kg-toggle-card .kg-toggle-content ol,
30916
- .kg-toggle-card .kg-toggle-content p,
30917
- .kg-toggle-card .kg-toggle-content ul{
30918
- font-size: 0.95em;
30919
- line-height: 1.5em;
30920
- margin-top: 0.95em;
30921
- margin-bottom: 0;
30776
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__day--keyboard-selected{
30777
+ background-color: var(--accent-4);
30922
30778
  }
30923
- .kg-toggle-card-icon{
30924
- height: 24px;
30925
- width: 24px;
30779
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__day--disabled{
30780
+ opacity: 0.5;
30781
+ }
30782
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__triangle,
30783
+ .react-datepicker.tipp_datePicker_calendar .rt-SelectIcon{
30784
+ display: none;
30785
+ }
30786
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__header{
30787
+ background-color: var(--accent-a3);
30788
+ border-color: var(--gray-5);
30789
+ }
30790
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__day,
30791
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__day-name{
30792
+ color: var(--gray-12);
30793
+ }
30794
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__day:hover{
30795
+ background-color: var(--accent-a3);
30796
+ color: var(--gray-12);
30797
+ }
30798
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker__day--selected{
30799
+ color: var(--accent-contrast);
30800
+ background-color: var(--accent-9);
30801
+ }
30802
+ .react-datepicker.tipp_datePicker_calendar .react-datepicker-time__header{
30803
+ font-weight: 400;
30804
+ }
30805
+ .expand-table{
30806
+ box-sizing: content-box;
30807
+ width: 100%;
30808
+ }
30809
+ .expand-table .thead .tr{
30810
+ background-color: var(--accent-a2);
30811
+ padding: var(--space-1) var(--space-5);
30812
+ min-height: 44px;
30813
+ display: grid;
30814
+ border-radius: var(--radius-5);
30815
+ overflow: hidden;
30816
+ }
30817
+ .expand-table .thead .tr .th{
30926
30818
  display: flex;
30927
- justify-content: center;
30928
- align-items: center;
30929
- margin-left: 1em;
30819
+ }
30820
+ .expand-table .thead .tr .th button{
30930
30821
  padding: 0;
30931
- background: 0 0;
30932
- border: 0;
30933
- cursor: pointer;
30822
+ background: transparent;
30823
+ border: none;
30824
+ display: inline-block;
30825
+ display: flex;
30826
+ align-items: center;
30934
30827
  }
30935
- .kg-toggle-heading svg{
30936
- width: 14px;
30937
- color: rgba(124, 139, 154, 0.5);
30938
- transition: all 0.3s;
30939
- transform: rotate(-180deg);
30828
+ .expand-table .thead .tr .th.left{
30829
+ justify-content: flex-start;
30940
30830
  }
30941
- .kg-toggle-heading path{
30942
- fill: none;
30943
- stroke: currentcolor;
30944
- stroke-linecap: round;
30945
- stroke-linejoin: round;
30946
- stroke-width: 1.5;
30947
- fill-rule: evenodd;
30831
+ .expand-table .thead .tr .th.right{
30832
+ justify-content: flex-end;
30948
30833
  }
30949
- .kg-toggle-card + .kg-toggle-card{
30950
- margin-top: 1em;
30834
+ .expand-table .thead .tr .th.center{
30835
+ justify-content: center;
30951
30836
  }
30952
- .kg-video-card,
30953
- .kg-video-card *{
30954
- box-sizing: border-box;
30837
+ .expand-table .th,
30838
+ .expand-table .td{
30839
+ padding: var(--space-2);
30955
30840
  }
30956
- .kg-video-card{
30957
- position: relative;
30958
- --seek-before-width: 0%;
30959
- --volume-before-width: 100%;
30960
- --buffered-width: 0%;
30841
+ .expand-table .th:first-child, .expand-table .td:first-child{
30842
+ padding-left: 0;
30961
30843
  }
30962
- .kg-video-card video{
30963
- display: block;
30964
- max-width: 100%;
30965
- height: auto;
30844
+ .expand-table .th:last-child, .expand-table .td:last-child{
30845
+ padding-right: 0;
30966
30846
  }
30967
- .kg-video-container{
30968
- position: relative;
30969
- display: flex;
30970
- flex-direction: column;
30847
+ .expand-table .tbody{
30848
+ margin-top: var(--space-1);
30849
+ }
30850
+ .expand-table .tbody .tr-wrapper{
30851
+ cursor: default;
30852
+ border-radius: var(--radius-6);
30853
+ border: 1px solid transparent;
30854
+ box-shadow: var(--shadow-2);
30855
+ overflow: hidden;
30856
+ margin-bottom: var(--space-1);
30857
+ background-color: var(--color-panel-solid);
30858
+ transition: 0.3s ease-in-out background-color border-color;
30859
+ }
30860
+ .expand-table .tbody .tr-wrapper.clickable:hover, .expand-table .tbody .tr-wrapper.expandable:hover{
30861
+ border: 1px solid var(--accent-a7);
30862
+ background-color: var(--accent-a2);
30863
+ }
30864
+ .expand-table .tbody .tr-wrapper.clickable button.tr, .expand-table .tbody .tr-wrapper.expandable button.tr{
30865
+ cursor: pointer;
30866
+ }
30867
+ .expand-table .tbody .tr-wrapper.expandable .expand-comp-wrapper{
30868
+ width: 100%;
30869
+ height: 100%;
30870
+ border-top: 1px solid var(--gray-3);
30871
+ }
30872
+ .expand-table .tbody .tr-wrapper button.tr{
30873
+ -webkit-user-select: text;
30874
+ -moz-user-select: text;
30875
+ user-select: text;
30876
+ background: transparent;
30877
+ width: 100%;
30878
+ padding: var(--space-3) var(--space-5);
30879
+ min-height: 64px;
30880
+ display: grid;
30881
+ flex-direction: row;
30971
30882
  align-items: center;
30883
+ border: none;
30884
+ border-radius: var(--radius-6);
30972
30885
  }
30973
- .kg-video-large-play-icon,
30974
- .kg-video-overlay{
30886
+ .expand-table .tbody .tr-wrapper button.tr .td{
30887
+ font-size: var(--font-size-2);
30975
30888
  display: flex;
30976
- justify-content: center;
30977
30889
  align-items: center;
30978
- transition: opacity 0.2s ease-in-out;
30890
+ text-align: left;
30979
30891
  }
30980
- .kg-video-overlay{
30981
- position: absolute;
30982
- top: 0;
30983
- right: 0;
30984
- bottom: 0;
30985
- left: 0;
30986
- background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0, transparent 70%, transparent 100%);
30987
- z-index: 999;
30892
+ .tipp-collapse{
30893
+ width: 100%;
30894
+ overflow: hidden;
30895
+ max-height: 0;
30896
+ transition: max-height 0.2s ease-out;
30988
30897
  }
30989
- .kg-video-large-play-icon{
30990
- width: 72px;
30991
- height: 72px;
30992
- padding: 0;
30993
- background: rgba(0, 0, 0, 0.5);
30898
+ .tipp-pagination .page-button{
30899
+ width: 40px;
30900
+ height: 40px;
30994
30901
  border-radius: 50%;
30902
+ border: 0;
30903
+ background-color: transparent;
30904
+ transition: 0.5s background-color;
30995
30905
  }
30996
- .kg-video-large-play-icon svg{
30997
- width: 20px;
30998
- height: auto;
30999
- margin-left: 2px;
31000
- fill: #fff;
30906
+ .tipp-pagination .page-button:hover{
30907
+ background-color: var(--gray-3);
31001
30908
  }
31002
- .kg-video-player-container{
31003
- position: absolute;
31004
- bottom: 0;
30909
+ .tipp-pagination .page-button.active{
30910
+ border: 1px solid var(--accent-7);
30911
+ background-color: var(--accent-surface);
30912
+ }
30913
+ .tipp-navigation-button{
30914
+ justify-content: start;
30915
+ padding-left: 14px;
30916
+ background-color: transparent;
30917
+ transition: 0.5s background-color;
30918
+ }
30919
+ .tipp-navigation-button:hover{
30920
+ background-color: var(--white-a2);
30921
+ }
30922
+ .tipp-navigation-button.active{
30923
+ background-color: var(--white-a3);
30924
+ }
30925
+ @keyframes bar-scale-change {
30926
+ 0%{
30927
+ width: 0;
30928
+ }
30929
+ 100%{
30930
+ width: 100%;
30931
+ }
30932
+ }
30933
+ .tipp_horizontal-bar-chart.bar-wrapper{
31005
30934
  width: 100%;
31006
- height: 80px;
31007
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
31008
- z-index: 999;
31009
- transition: opacity 0.2s ease-in-out;
30935
+ height: 8px;
30936
+ overflow: hidden;
30937
+ position: relative;
30938
+ border-radius: 9999px;
30939
+ background-color: var(--gray-5);
31010
30940
  }
31011
- .kg-video-player{
30941
+ .tipp_horizontal-bar-chart.bar-wrapper .bar{
30942
+ height: 100%;
30943
+ width: 0;
30944
+ background-color: var(--yellow-9);
30945
+ animation-name: bar-scale-change;
30946
+ animation-duration: 0.5s;
30947
+ animation-delay: 0.5s;
30948
+ animation-timing-function: ease-in-out;
30949
+ animation-fill-mode: forwards;
30950
+ transform-origin: left center;
30951
+ }
30952
+ .DrawerOverlay{
30953
+ background-color: var(--black-a9);
30954
+ position: fixed;
30955
+ inset: 0;
30956
+ z-index: 10000;
30957
+ }
30958
+ .DrawerContent{
30959
+ background-color: var(--color-panel);
30960
+ box-shadow: var(--black-a12) 0px 10px 38px -10px, var(--black-a12) 0px 10px 20px -15px;
30961
+ animation-fill-mode: forwards;
30962
+ z-index: 10000;
30963
+ position: fixed;
30964
+ }
30965
+ @media (max-width: 768px) {
30966
+ .DrawerContent{
30967
+ min-width: 100%;
30968
+ }
30969
+ }
30970
+ .DrawerContent .DialogClose{
31012
30971
  position: absolute;
31013
- bottom: 0;
31014
- display: flex;
31015
- align-items: center;
31016
- width: 100%;
30972
+ right: 24px;
30973
+ top: 24px;
31017
30974
  z-index: 9999;
31018
- padding: 12px 16px;
31019
30975
  }
31020
- .kg-video-current-time,
31021
- .kg-video-time{
31022
- font-family: inherit;
31023
- font-size: 12.5px;
31024
- font-weight: 500;
31025
- line-height: 1.4em;
31026
- white-space: nowrap;
30976
+ .DrawerContent.right,
30977
+ .DrawerContent.left{
30978
+ height: 100%;
30979
+ width: 100%;
30980
+ max-width: 80vw;
30981
+ top: 0;
31027
30982
  }
31028
- .kg-video-current-time{
31029
- min-width: 38px;
31030
- padding: 0 4px;
31031
- color: #fff;
30983
+ .DrawerContent.top,
30984
+ .DrawerContent.bottom{
30985
+ width: 100%;
30986
+ height: 100%;
30987
+ max-height: 90vh;
31032
30988
  }
31033
- .kg-video-time{
31034
- color: rgba(255, 255, 255, 0.6);
30989
+ .DrawerContent.right{
30990
+ right: 0;
30991
+ animation: showRight 0.8s cubic-bezier(0.16, 1, 0.3, 1);
31035
30992
  }
31036
- .kg-video-duration{
31037
- padding: 0 4px;
30993
+ .DrawerContent.left{
30994
+ left: 0;
30995
+ animation: showLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1);
31038
30996
  }
31039
- .kg-video-pause-icon,
31040
- .kg-video-play-icon{
31041
- position: relative;
31042
- padding: 0 4px 0 0;
31043
- font-size: 0;
31044
- background: 0 0;
30997
+ .DrawerContent.top{
30998
+ top: 0;
30999
+ animation: showTop 0.8s cubic-bezier(0.16, 1, 0.3, 1);
31045
31000
  }
31046
- .kg-video-hide{
31047
- display: none !important;
31001
+ .DrawerContent.bottom{
31002
+ bottom: 0;
31003
+ animation: showBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1);
31048
31004
  }
31049
- .kg-video-hide-animated{
31050
- opacity: 0 !important;
31051
- transition: opacity 0.2s ease-in-out;
31052
- cursor: initial;
31005
+ .DrawerContent:focus{
31006
+ outline: none;
31053
31007
  }
31054
- .kg-video-pause-icon svg,
31055
- .kg-video-play-icon svg{
31056
- width: 14px;
31057
- height: 14px;
31058
- fill: #fff;
31008
+ @keyframes showRight {
31009
+ from{
31010
+ transform: translateX(100%);
31011
+ }
31012
+ to{
31013
+ transform: translateX(0);
31014
+ }
31059
31015
  }
31060
- .kg-video-seek-slider{
31061
- flex-grow: 1;
31062
- margin: 0 4px;
31016
+ @keyframes showLeft {
31017
+ from{
31018
+ transform: translateX(-100%);
31019
+ }
31020
+ to{
31021
+ transform: translateX(0);
31022
+ }
31063
31023
  }
31064
- @media (max-width: 520px) {
31065
- .kg-video-seek-slider{
31066
- display: none;
31024
+ @keyframes showBottom {
31025
+ from{
31026
+ transform: translateY(100%);
31027
+ }
31028
+ to{
31029
+ transform: translateY(0);
31067
31030
  }
31068
31031
  }
31069
- .kg-video-playback-rate{
31070
- min-width: 37px;
31071
- padding: 0 4px;
31072
- color: #fff;
31073
- font-family: inherit;
31074
- font-size: 12.5px;
31075
- font-weight: 600;
31076
- line-height: 1.4em;
31077
- text-align: left;
31078
- background: 0 0;
31079
- white-space: nowrap;
31032
+ @keyframes showTop {
31033
+ from{
31034
+ transform: translateY(-100%);
31035
+ }
31036
+ to{
31037
+ transform: translateY(0);
31038
+ }
31039
+ }
31040
+ :root .Toastify__toast--default{
31041
+ --toastify-text-color-light: var(--accent-a11);
31042
+ --toastify-text-color-dark: var(--accent-a11);
31043
+ --toastify-color-light: var(--accent-3);
31044
+ --toastify-color-dark: var(--accent-3);
31045
+ }
31046
+ :root .Toastify__toast--success{
31047
+ --toastify-text-color-light: var(--success-a11);
31048
+ --toastify-text-color-dark: var(--success-a11);
31049
+ --toastify-color-light: var(--success-3);
31050
+ --toastify-color-dark: var(--success-3);
31051
+ }
31052
+ :root .Toastify__toast--error{
31053
+ --toastify-text-color-light: var(--error-a11);
31054
+ --toastify-text-color-dark: var(--error-a11);
31055
+ --toastify-color-light: var(--error-3);
31056
+ --toastify-color-dark: var(--error-3);
31057
+ }
31058
+ :root .Toastify__toast--warning{
31059
+ --toastify-text-color-light: var(--orange-a11);
31060
+ --toastify-text-color-dark: var(--orange-a11);
31061
+ --toastify-color-light: var(--orange-3);
31062
+ --toastify-color-dark: var(--orange-3);
31063
+ }
31064
+ :root .Toastify__toast--info{
31065
+ --toastify-text-color-light: var(--gray-a11);
31066
+ --toastify-text-color-dark: var(--gray-a11);
31067
+ --toastify-color-light: var(--gray-3);
31068
+ --toastify-color-dark: var(--gray-3);
31069
+ }
31070
+ .Toastify .Toastify__toast{
31071
+ font-size: calc(14px * var(--scaling));
31080
31072
  }
31081
- @media (max-width: 520px) {
31082
- .kg-video-playback-rate{
31083
- padding-left: 8px;
31084
- }
31073
+ .Toastify .Toastify__toast .Toastify__toast-icon{
31074
+ width: calc(16px * var(--scaling));
31085
31075
  }
31086
- .kg-video-mute-icon,
31087
- .kg-video-unmute-icon{
31088
- position: relative;
31089
- bottom: -1px;
31090
- padding: 0 4px;
31091
- font-size: 0;
31092
- background: 0 0;
31076
+ .FormRoot .FormField{
31077
+ display: flex;
31078
+ flex-direction: column;
31079
+ gap: var(--space-2);
31093
31080
  }
31094
- @media (max-width: 520px) {
31095
- .kg-video-mute-icon,
31096
- .kg-video-unmute-icon{
31097
- margin-left: auto;
31081
+ .DialogOverlay{
31082
+ background-color: var(--black-a9);
31083
+ position: fixed;
31084
+ inset: 0;
31085
+ animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
31086
+ display: flex;
31087
+ align-items: center;
31088
+ justify-content: center;
31089
+ width: 100%;
31090
+ height: 100%;
31091
+ }
31092
+ .DialogContent{
31093
+ background-color: var(--color-panel);
31094
+ border-radius: var(--radius-4);
31095
+ box-shadow: var(--shadow-2);
31096
+ overflow: auto;
31097
+ max-height: 100vh;
31098
+ position: fixed;
31099
+ top: 50%;
31100
+ left: 50%;
31101
+ transform: translate(-50%, -50%);
31102
+ padding: var(--space-6);
31103
+ animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
31104
+ min-width: 280px;
31105
+ }
31106
+ @media (min-width: 768px) {
31107
+ .DialogContent{
31108
+ width: initial;
31098
31109
  }
31099
31110
  }
31100
- .kg-video-mute-icon svg,
31101
- .kg-video-unmute-icon svg{
31102
- width: 16px;
31103
- height: 16px;
31104
- fill: #fff;
31111
+ .DialogClose{
31112
+ z-index: 20000;
31113
+ display: block;
31105
31114
  }
31106
- .kg-video-volume-slider{
31107
- width: 80px;
31115
+ .DialogContent:focus{
31116
+ outline: none;
31108
31117
  }
31109
- @media (max-width: 300px) {
31110
- .kg-video-volume-slider{
31111
- display: none;
31118
+ @keyframes overlayShow {
31119
+ from{
31120
+ opacity: 0;
31121
+ }
31122
+ to{
31123
+ opacity: 1;
31112
31124
  }
31113
31125
  }
31114
- .kg-video-seek-slider::before,
31115
- .kg-video-volume-slider::before{
31116
- content: '';
31117
- position: absolute;
31118
- left: 0;
31119
- width: var(--seek-before-width) !important;
31120
- height: 4px;
31121
- cursor: pointer;
31122
- background-color: #ebeef0;
31123
- border-radius: 2px;
31124
- }
31125
- .kg-video-volume-slider::before{
31126
- width: var(--volume-before-width) !important;
31126
+ @keyframes contentShow {
31127
+ from{
31128
+ opacity: 0;
31129
+ transform: translate(-50%, -48%) scale(0.96);
31130
+ }
31131
+ to{
31132
+ opacity: 1;
31133
+ transform: translate(-50%, -50%) scale(1);
31134
+ }
31127
31135
  }
31128
- .kg-video-card input[type='range']{
31136
+ .auto-sizing-input.wrapper{
31129
31137
  position: relative;
31130
- -webkit-appearance: none;
31131
- background: 0 0;
31132
- height: auto;
31138
+ overflow: hidden;
31139
+ }
31140
+ .auto-sizing-input.wrapper input{
31141
+ width: 100%;
31142
+ font-size: 14px;
31143
+ margin: 0;
31133
31144
  padding: 0;
31134
- border: 0;
31145
+ border: none;
31146
+ outline: none;
31147
+ top: 0;
31148
+ left: 0;
31149
+ font-family: inherit;
31135
31150
  }
31136
- .kg-video-card input[type='range']::-webkit-slider-thumb{
31137
- -webkit-appearance: none;
31138
- position: relative;
31139
- box-sizing: content-box;
31140
- width: 13px;
31141
- height: 13px;
31142
- margin: -5px 0 0;
31143
- border: 0;
31144
- cursor: pointer;
31145
- background: #fff;
31146
- border-radius: 50%;
31147
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
31151
+ .auto-sizing-input.wrapper span{
31152
+ opacity: 0;
31153
+ top: 0;
31154
+ left: 0;
31155
+ position: absolute;
31156
+ white-space: pre;
31157
+ font-family: inherit;
31158
+ font-size: 14px;
31159
+ z-index: 999;
31148
31160
  }
31149
- .kg-video-card input[type='range']::-webkit-slider-runnable-track{
31150
- width: 100%;
31151
- height: 4px;
31152
- cursor: pointer;
31153
- background: rgba(255, 255, 255, 0.2);
31154
- border-radius: 2px;
31161
+ .tag-selector{
31162
+ --text-field-selection-color: var(--focus-a5);
31163
+ --text-field-focus-color: var(--focus-8);
31164
+ --text-field-border-width: 1px;
31165
+ --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
31166
+ --text-field-border-radius: max(var(--radius-2), var(--radius-full));
31167
+ --tag-selector-background-color: var(--panel-background);
31168
+ --box-shadow-color: var(--gray-a6);
31169
+ border-radius: var(--text-field-border-radius);
31170
+ font-size: var(--font-size-2);
31171
+ box-shadow: inset 0 0 0 var(--text-field-border-width) var(--box-shadow-color);
31172
+ min-height: var(--text-field-height);
31173
+ padding: var(--text-field-padding);
31174
+ box-sizing: border-box;
31175
+ background-color: var(--tag-selector-background-color);
31155
31176
  }
31156
- .kg-video-card input[type='range']:active::-webkit-slider-thumb{
31157
- transform: scale(1.2);
31177
+ .tag-selector.small{
31178
+ --text-field-height: var(--space-5);
31158
31179
  }
31159
- .kg-video-card input[type='range']::-moz-range-track{
31160
- width: 100%;
31161
- height: 4px;
31162
- cursor: pointer;
31163
- background: rgba(255, 255, 255, 0.2);
31164
- border-radius: 2px;
31180
+ .tag-selector.medium{
31181
+ --text-field-height: var(--space-6);
31165
31182
  }
31166
- .kg-video-card input[type='range']::-moz-range-progress{
31167
- background: #ebeef0;
31168
- border-radius: 2px;
31183
+ .tag-selector.large{
31184
+ --text-field-height: var(--space-7);
31169
31185
  }
31170
- .kg-video-card input[type='range']::-moz-range-thumb{
31171
- box-sizing: content-box;
31172
- width: 13px;
31173
- height: 13px;
31174
- border: 0;
31175
- cursor: pointer;
31176
- background: #fff;
31177
- border-radius: 50%;
31178
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
31186
+ .tag-selector.read-only{
31187
+ --tag-selector-background-color: var(--gray-a2);
31179
31188
  }
31180
- .kg-video-card input[type='range']:active::-moz-range-thumb{
31181
- transform: scale(1.2);
31189
+ .tag-selector.error{
31190
+ --box-shadow-color: var(--error-11);
31182
31191
  }
31183
- .kg-video-card input[type='range']::-ms-track{
31184
- width: 100%;
31185
- height: 3px;
31186
- border: solid transparent;
31187
- color: transparent;
31188
- cursor: pointer;
31189
- background: 0 0;
31192
+ .tag-selector.focused{
31193
+ box-shadow: inset 0 0 0 var(--text-field-border-width) var(--text-field-focus-color);
31190
31194
  }
31191
- .kg-video-card input[type='range']::-ms-fill-lower{
31192
- background: #fff;
31195
+ dl.rt-DataListRoot{
31196
+ display: flex;
31197
+ flex-direction: column;
31193
31198
  }
31194
- .kg-video-card input[type='range']::-ms-fill-upper{
31195
- background: #ebeef0;
31199
+ dl.rt-DataListRoot div.rt-DataListItem{
31200
+ display: flex;
31196
31201
  }
31197
- .kg-video-card input[type='range']::-ms-thumb{
31198
- box-sizing: content-box;
31199
- width: 13px;
31200
- height: 13px;
31201
- border: 0;
31202
- cursor: pointer;
31203
- background: #fff;
31204
- border-radius: 50%;
31205
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.24);
31202
+ dl.rt-DataListRoot .rt-DataListLabel{
31203
+ min-width: initial;
31204
+ white-space: nowrap;
31206
31205
  }
31207
- .kg-video-card input[type='range']:active::-ms-thumb{
31208
- transform: scale(1.2);
31206
+ dl.rt-DataListRoot:where(.rt-r-orientation-horizontal) :where(.rt-DataListItem){
31207
+ grid-column: initial;
31209
31208
  }
31210
- .gh-content{
31211
- display: grid;
31212
- gap: var(--space-3);
31209
+ .rt-BaseCard.error::after{
31210
+ box-shadow: 0 0 0 1px var(--error-a11);
31213
31211
  }
31214
- .gh-content > *{
31215
- margin: 0;
31212
+ .rt-BaseCard.disable-inset-left::after,
31213
+ .rt-BaseCard.disable-inset-left::before{
31214
+ left: 0;
31216
31215
  }
31217
- .gh-content hr{
31218
- margin-top: var(--space-3);
31219
- margin-bottom: var(--space-3);
31216
+ .rt-BaseCard.disable-inset-right::after,
31217
+ .rt-BaseCard.disable-inset-right::before{
31218
+ right: 0;
31220
31219
  }
31221
- .gh-content h1{
31222
- margin-top: var(--space-8);
31220
+ .rt-BaseCard.disable-inset-top::after,
31221
+ .rt-BaseCard.disable-inset-top::before{
31222
+ top: 0;
31223
31223
  }
31224
- .gh-content h2{
31225
- margin-top: var(--space-8);
31224
+ .rt-BaseCard.disable-inset-bottom::after,
31225
+ .rt-BaseCard.disable-inset-bottom::before{
31226
+ bottom: 0;
31226
31227
  }
31227
- .gh-content h3{
31228
- margin-top: var(--space-6);
31228
+ .date-picker-button{
31229
+ width: 100%;
31229
31230
  }
31230
- .gh-content a{
31231
- color: var(--accent-a11);
31231
+ .date-picker-button.disabled{
31232
+ background: var(--gray-a2);
31233
+ color: var(--gray-9);
31234
+ box-shadow: inset 0 0 0 1px var(--accent-a6);
31232
31235
  }
31233
- .gh-content :not(.kg-card):not(table):not([id])+:is(.kg-card,table){
31234
- margin-top: var(--space-6);
31236
+ span,
31237
+ p{
31238
+ white-space: break-spaces;
31235
31239
  }
31236
31240
 
31237
31241
  /*# sourceMappingURL=index.css.map */