@total_onion/onion-library 3.0.49 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (536) hide show
  1. package/index.js +10 -0
  2. package/onion-loader.js +22 -14
  3. package/onion-modalcontroller/README.md +2 -0
  4. package/onion-modalcontroller/onion-modalcontroller.js +183 -0
  5. package/onion-utils.mjs +18 -19
  6. package/onion-videocontroller/README.md +89 -0
  7. package/{components/fields-core-functions-v3 → onion-videocontroller}/core-functions-v3.scss +1 -1
  8. package/{components/fields-core-mixins-v3 → onion-videocontroller}/core-mixins-v3.scss +2 -2
  9. package/onion-videocontroller/onion-videocontroller.js +240 -0
  10. package/onion-videocontroller/upload-video.mjs +251 -0
  11. package/onion-videocontroller/vc-styles.scss +282 -0
  12. package/onion-videocontroller/vcUtils.mjs +281 -0
  13. package/onion-videocontroller/vimeo-video.mjs +106 -0
  14. package/onion-videocontroller/youtube-video.mjs +157 -0
  15. package/package.json +29 -7
  16. package/.github/workflows/npm-publish.yml +0 -38
  17. package/__spec__/copyBlockComponent.spec.js +0 -94
  18. package/__spec__/copyFile.spec.js +0 -78
  19. package/__spec__/copyFileKeeping.spec.js +0 -74
  20. package/__spec__/files/source.txt +0 -1
  21. package/__spec__/update-all-components.spec.js +0 -99
  22. package/__spec__/update-component.spec.js +0 -165
  23. package/assembleAssetList.js +0 -69
  24. package/build-library.js +0 -4
  25. package/checkBuildAssets.js +0 -18
  26. package/components/block-accent-image-v3/accent-image-v3.js +0 -7
  27. package/components/block-accent-image-v3/accent-image-v3.scss +0 -4
  28. package/components/block-accent-image-v3/accent-image-v3.twig +0 -137
  29. package/components/block-accent-image-v3/group_6890e1233ff2d.json +0 -81
  30. package/components/block-accordion-v3/accordion-v3.js +0 -119
  31. package/components/block-accordion-v3/accordion-v3.scss +0 -197
  32. package/components/block-accordion-v3/accordion-v3.twig +0 -51
  33. package/components/block-accordion-v3/group_6888d2f0b230b.json +0 -458
  34. package/components/block-back-to-top-button-v3/back-to-top-button-v3.js +0 -12
  35. package/components/block-back-to-top-button-v3/back-to-top-button-v3.scss +0 -68
  36. package/components/block-back-to-top-button-v3/back-to-top-button-v3.twig +0 -40
  37. package/components/block-back-to-top-button-v3/group_63e24e04a1e61.json +0 -323
  38. package/components/block-betterreviews-display-v3/betterreviews-display-v3.js +0 -10
  39. package/components/block-betterreviews-display-v3/betterreviews-display-v3.scss +0 -104
  40. package/components/block-betterreviews-display-v3/betterreviews-display-v3.twig +0 -24
  41. package/components/block-betterreviews-display-v3/group_6892880fc1a00.json +0 -182
  42. package/components/block-block-interactions-v3/block-interactions-v3.js +0 -53
  43. package/components/block-block-interactions-v3/block-interactions-v3.scss +0 -32
  44. package/components/block-block-interactions-v3/block-interactions-v3.twig +0 -55
  45. package/components/block-block-interactions-v3/group_687e1575ba23d.json +0 -700
  46. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +0 -243
  47. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss +0 -156
  48. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.twig +0 -146
  49. package/components/block-carousel-multi-layout-v3/group_686bd42e551d6.json +0 -578
  50. package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.js +0 -127
  51. package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss +0 -345
  52. package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.twig +0 -93
  53. package/components/block-cocktail-recipe-v3/group_68fff19fa4dd0.json +0 -202
  54. package/components/block-cover-link-v3/cover-link-v3.js +0 -7
  55. package/components/block-cover-link-v3/cover-link-v3.scss +0 -10
  56. package/components/block-cover-link-v3/cover-link-v3.twig +0 -16
  57. package/components/block-cover-link-v3/group_687192c28b7eb.json +0 -96
  58. package/components/block-divider-v3/divider-v3.js +0 -8
  59. package/components/block-divider-v3/divider-v3.scss +0 -103
  60. package/components/block-divider-v3/divider-v3.twig +0 -45
  61. package/components/block-divider-v3/group_686b919696bfe.json +0 -891
  62. package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.js +0 -44
  63. package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss +0 -93
  64. package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.twig +0 -43
  65. package/components/block-featured-image-gallery-v3/group_5f91897095b42.json +0 -88
  66. package/components/block-form-selection-v3/form-selection-v3.js +0 -78
  67. package/components/block-form-selection-v3/form-selection-v3.scss +0 -38
  68. package/components/block-form-selection-v3/form-selection-v3.twig +0 -84
  69. package/components/block-form-selection-v3/group_68752e7949e53.json +0 -351
  70. package/components/block-gradient-layer-v3/gradient-layer-v3.js +0 -7
  71. package/components/block-gradient-layer-v3/gradient-layer-v3.scss +0 -8
  72. package/components/block-gradient-layer-v3/gradient-layer-v3.twig +0 -78
  73. package/components/block-gradient-layer-v3/group_686fdadc85df4.json +0 -206
  74. package/components/block-group-container-v3/group-container-v3.js +0 -7
  75. package/components/block-group-container-v3/group-container-v3.php +0 -14
  76. package/components/block-group-container-v3/group-container-v3.scss +0 -45
  77. package/components/block-group-container-v3/group-container-v3.twig +0 -70
  78. package/components/block-group-container-v3/group_6865578ada499.json +0 -3660
  79. package/components/block-lottie-content-v3/group_687197027216d.json +0 -177
  80. package/components/block-lottie-content-v3/lottie-content-v3.js +0 -25
  81. package/components/block-lottie-content-v3/lottie-content-v3.scss +0 -2
  82. package/components/block-lottie-content-v3/lottie-content-v3.twig +0 -15
  83. package/components/block-market-selector-v3/group_68752075dd831.json +0 -129
  84. package/components/block-market-selector-v3/market-selector-v3.js +0 -7
  85. package/components/block-market-selector-v3/market-selector-v3.scss +0 -120
  86. package/components/block-market-selector-v3/market-selector-v3.twig +0 -40
  87. package/components/block-modal-form-v3/modal-form-v3.js +0 -59
  88. package/components/block-modal-form-v3/modal-form-v3.scss +0 -6
  89. package/components/block-modal-form-v3/modal-form-v3.twig +0 -30
  90. package/components/block-nav-menu-container-v3/group_687e00b45e9a3.json +0 -187
  91. package/components/block-nav-menu-container-v3/nav-menu-container-v3.js +0 -7
  92. package/components/block-nav-menu-container-v3/nav-menu-container-v3.scss +0 -3
  93. package/components/block-nav-menu-container-v3/nav-menu-container-v3.twig +0 -23
  94. package/components/block-post-info-v3/group_6866429531436.json +0 -3112
  95. package/components/block-post-info-v3/post-info-v3/bazaarvoice-inline.twig +0 -13
  96. package/components/block-post-info-v3/post-info-v3/better-reviews.twig +0 -15
  97. package/components/block-post-info-v3/post-info-v3/divider.twig +0 -8
  98. package/components/block-post-info-v3/post-info-v3/drink-description.twig +0 -10
  99. package/components/block-post-info-v3/post-info-v3/global-image.twig +0 -22
  100. package/components/block-post-info-v3/post-info-v3/gradient-layer.twig +0 -78
  101. package/components/block-post-info-v3/post-info-v3/gradient-overlay.twig +0 -10
  102. package/components/block-post-info-v3/post-info-v3/post-author.twig +0 -17
  103. package/components/block-post-info-v3/post-info-v3/post-buy-now.twig +0 -116
  104. package/components/block-post-info-v3/post-info-v3/post-categories.twig +0 -15
  105. package/components/block-post-info-v3/post-info-v3/post-headline.twig +0 -15
  106. package/components/block-post-info-v3/post-info-v3/post-image.twig +0 -47
  107. package/components/block-post-info-v3/post-info-v3/post-info-description.twig +0 -15
  108. package/components/block-post-info-v3/post-info-v3/post-info-subtitle.twig +0 -14
  109. package/components/block-post-info-v3/post-info-v3/post-link.twig +0 -42
  110. package/components/block-post-info-v3/post-info-v3/post-name.twig +0 -12
  111. package/components/block-post-info-v3/post-info-v3/post-publish-date.twig +0 -12
  112. package/components/block-post-info-v3/post-info-v3/post-tags.twig +0 -24
  113. package/components/block-post-info-v3/post-info-v3/post-text-alternative-style.twig +0 -16
  114. package/components/block-post-info-v3/post-info-v3/post-title.twig +0 -15
  115. package/components/block-post-info-v3/post-info-v3/post-video.twig +0 -27
  116. package/components/block-post-info-v3/post-info-v3/reservebar-add-to-cart.twig +0 -32
  117. package/components/block-post-info-v3/post-info-v3/shopify-add-to-cart.twig +0 -31
  118. package/components/block-post-info-v3/post-info-v3/social-networks.twig +0 -33
  119. package/components/block-post-info-v3/post-info-v3/spacer-v3.twig +0 -9
  120. package/components/block-post-info-v3/post-info-v3.js +0 -10
  121. package/components/block-post-info-v3/post-info-v3.scss +0 -210
  122. package/components/block-post-info-v3/post-info-v3.twig +0 -67
  123. package/components/block-product-info-v3/group_68909995b6550.json +0 -3544
  124. package/components/block-product-info-v3/product-info-v3/product-abv.twig +0 -14
  125. package/components/block-product-info-v3/product-info-v3/product-cask-type-label.twig +0 -14
  126. package/components/block-product-info-v3/product-info-v3/product-cask-type.twig +0 -14
  127. package/components/block-product-info-v3/product-info-v3/product-colour-label.twig +0 -14
  128. package/components/block-product-info-v3/product-info-v3/product-colour.twig +0 -14
  129. package/components/block-product-info-v3/product-info-v3/product-description.twig +0 -14
  130. package/components/block-product-info-v3/product-info-v3/product-finish-label.twig +0 -14
  131. package/components/block-product-info-v3/product-info-v3/product-finish.twig +0 -14
  132. package/components/block-product-info-v3/product-info-v3/product-headline.twig +0 -14
  133. package/components/block-product-info-v3/product-info-v3/product-image.twig +0 -43
  134. package/components/block-product-info-v3/product-info-v3/product-name.twig +0 -14
  135. package/components/block-product-info-v3/product-info-v3/product-nose-label.twig +0 -14
  136. package/components/block-product-info-v3/product-info-v3/product-nose.twig +0 -14
  137. package/components/block-product-info-v3/product-info-v3/product-pair-with-label.twig +0 -14
  138. package/components/block-product-info-v3/product-info-v3/product-pair-with.twig +0 -14
  139. package/components/block-product-info-v3/product-info-v3/product-palate-label.twig +0 -14
  140. package/components/block-product-info-v3/product-info-v3/product-palate.twig +0 -14
  141. package/components/block-product-info-v3/product-info-v3/product-taste-label.twig +0 -14
  142. package/components/block-product-info-v3/product-info-v3/product-taste.twig +0 -14
  143. package/components/block-product-info-v3/product-info-v3/product-volume.twig +0 -14
  144. package/components/block-product-info-v3/product-info-v3/spacer-v3.twig +0 -9
  145. package/components/block-product-info-v3/product-info-v3.js +0 -7
  146. package/components/block-product-info-v3/product-info-v3.scss +0 -171
  147. package/components/block-product-info-v3/product-info-v3.twig +0 -43
  148. package/components/block-raw-html-v3/group_686ba68d603a2.json +0 -212
  149. package/components/block-raw-html-v3/raw-html-v3.js +0 -7
  150. package/components/block-raw-html-v3/raw-html-v3.scss +0 -2
  151. package/components/block-raw-html-v3/raw-html-v3.twig +0 -17
  152. package/components/block-responsive-table-v3/group_6617ecc987ddd.json +0 -394
  153. package/components/block-responsive-table-v3/responsive-table-v3.js +0 -7
  154. package/components/block-responsive-table-v3/responsive-table-v3.scss +0 -49
  155. package/components/block-responsive-table-v3/responsive-table-v3.twig +0 -47
  156. package/components/block-scrolling-banner-v3/group_68e67fca1ec80.json +0 -664
  157. package/components/block-scrolling-banner-v3/scrolling-banner-v3.js +0 -144
  158. package/components/block-scrolling-banner-v3/scrolling-banner-v3.scss +0 -104
  159. package/components/block-scrolling-banner-v3/scrolling-banner-v3.twig +0 -72
  160. package/components/block-section-separator-v3/group_6874c8d79b84b.json +0 -576
  161. package/components/block-section-separator-v3/section-separator-v3.js +0 -7
  162. package/components/block-section-separator-v3/section-separator-v3.scss +0 -42
  163. package/components/block-section-separator-v3/section-separator-v3.twig +0 -46
  164. package/components/block-single-column-container-v3/group_6887640458d61.json +0 -481
  165. package/components/block-single-column-container-v3/single-column-container-v3.js +0 -7
  166. package/components/block-single-column-container-v3/single-column-container-v3.scss +0 -14
  167. package/components/block-single-column-container-v3/single-column-container-v3.twig +0 -30
  168. package/components/block-single-responsive-image-v3/group_6867bcf24c2fc.json +0 -128
  169. package/components/block-single-responsive-image-v3/single-responsive-image-v3.js +0 -7
  170. package/components/block-single-responsive-image-v3/single-responsive-image-v3.scss +0 -9
  171. package/components/block-single-responsive-image-v3/single-responsive-image-v3.twig +0 -24
  172. package/components/block-site-copyright-notice-v3/group_66296c3716b4f.json +0 -304
  173. package/components/block-site-copyright-notice-v3/index.html +0 -33
  174. package/components/block-site-copyright-notice-v3/site-copyright-notice-v3.js +0 -58
  175. package/components/block-site-copyright-notice-v3/site-copyright-notice-v3.scss +0 -21
  176. package/components/block-site-copyright-notice-v3/site-copyright-notice-v3.twig +0 -30
  177. package/components/block-site-logo-container-v3/group_687e3b887b508.json +0 -175
  178. package/components/block-site-logo-container-v3/site-logo-container-v3.js +0 -7
  179. package/components/block-site-logo-container-v3/site-logo-container-v3.scss +0 -29
  180. package/components/block-site-logo-container-v3/site-logo-container-v3.twig +0 -40
  181. package/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js +0 -7
  182. package/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.scss +0 -16
  183. package/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.twig +0 -24
  184. package/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js +0 -8
  185. package/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.scss +0 -31
  186. package/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.twig +0 -18
  187. package/components/block-social-networks-v3/group_6891d4d7db414.json +0 -146
  188. package/components/block-social-networks-v3/social-networks-v3.js +0 -7
  189. package/components/block-social-networks-v3/social-networks-v3.scss +0 -7
  190. package/components/block-social-networks-v3/social-networks-v3.twig +0 -24
  191. package/components/block-spacer-v3/group_686b8cb48c708.json +0 -131
  192. package/components/block-spacer-v3/spacer-v3.js +0 -8
  193. package/components/block-spacer-v3/spacer-v3.scss +0 -19
  194. package/components/block-spacer-v3/spacer-v3.twig +0 -13
  195. package/components/block-spotify-embed-v3/group_67d04c4c4cf78.json +0 -120
  196. package/components/block-spotify-embed-v3/spotify-embed-v3.js +0 -7
  197. package/components/block-spotify-embed-v3/spotify-embed-v3.scss +0 -11
  198. package/components/block-spotify-embed-v3/spotify-embed-v3.twig +0 -23
  199. package/components/block-standard-content-v3/group_68655756737c9.json +0 -344
  200. package/components/block-standard-content-v3/standard-content-v3.js +0 -39
  201. package/components/block-standard-content-v3/standard-content-v3.scss +0 -11
  202. package/components/block-standard-content-v3/standard-content-v3.twig +0 -46
  203. package/components/block-sticky-buy-cta-v3/group_68b061bb56543.json +0 -172
  204. package/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.js +0 -7
  205. package/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.scss +0 -2
  206. package/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.twig +0 -92
  207. package/components/block-sub-group-container-v3/group_686ceba7d6066.json +0 -2142
  208. package/components/block-sub-group-container-v3/sub-group-container-v3.js +0 -9
  209. package/components/block-sub-group-container-v3/sub-group-container-v3.scss +0 -27
  210. package/components/block-sub-group-container-v3/sub-group-container-v3.twig +0 -59
  211. package/components/block-video-content-v3/group_687190b8d26df.json +0 -169
  212. package/components/block-video-content-v3/video-content-v3.js +0 -12
  213. package/components/block-video-content-v3/video-content-v3.scss +0 -123
  214. package/components/block-video-content-v3/video-content-v3.twig +0 -26
  215. package/components/component-accent-image-v3/accent-image-v3.twig +0 -119
  216. package/components/component-accent-image-v3/group_686cd5547efd2.json +0 -975
  217. package/components/component-accent-text-v3/accent-text-v3-extra.scss +0 -2
  218. package/components/component-accent-text-v3/accent-text-v3.scss +0 -60
  219. package/components/component-accent-text-v3/group_686b91fed8f5f.json +0 -220
  220. package/components/component-accordion-v3/accordion-v3.js +0 -113
  221. package/components/component-accordion-v3/accordion-v3.scss +0 -189
  222. package/components/component-accordion-v3/accordion-v3.twig +0 -39
  223. package/components/component-accordion-v3/group_66ab7edfc6d63.json +0 -535
  224. package/components/component-animations-style-v3/animations-style-v3.twig +0 -5
  225. package/components/component-animations-v3/animations-v3.scss +0 -161
  226. package/components/component-animations-v3/animations-v3.twig +0 -19
  227. package/components/component-animations-v3/group_689f39c37980a.json +0 -499
  228. package/components/component-better-reviews-v3/better-reviews-v3.scss +0 -137
  229. package/components/component-block-padding-v3/block-padding-v3.scss +0 -64
  230. package/components/component-block-padding-v3/block-padding-v3.twig +0 -33
  231. package/components/component-block-padding-v3/group_689f66f3e26df.json +0 -535
  232. package/components/component-block-settings-v3/block-settings-v3.scss +0 -46
  233. package/components/component-block-settings-v3/block-settings-v3.twig +0 -34
  234. package/components/component-block-settings-v3/group_689f649af2ac4.json +0 -983
  235. package/components/component-blockquote-v3/blockquote-v3.scss +0 -54
  236. package/components/component-box-shadow-v3/box-shadow-v3.scss +0 -12
  237. package/components/component-buy-now-button-v3/buy-now-buttons-v3.twig +0 -69
  238. package/components/component-carousel-fields-v3/group_686fd30f4d873.json +0 -3025
  239. package/components/component-child-block-video-fields/group_6852a4f384204.json +0 -536
  240. package/components/component-content-box-settings-v3/content-box-settings-v3.scss +0 -205
  241. package/components/component-content-box-settings-v3/content-box-settings-v3.twig +0 -156
  242. package/components/component-content-box-settings-v3/group_686e6ec702acc.json +0 -1729
  243. package/components/component-content-box-v3/content-box-v3.js +0 -6
  244. package/components/component-content-box-v3/content-box-v3.scss +0 -28
  245. package/components/component-content-box-v3/content-box-v3.twig +0 -23
  246. package/components/component-content-box-v3/group_686b8a4f1fe5d.json +0 -568
  247. package/components/component-content-image-v3/content-image-v3.scss +0 -33
  248. package/components/component-content-image-v3/content-image-v3.twig +0 -77
  249. package/components/component-content-image-v3/group_68722935c428f.json +0 -647
  250. package/components/component-core-body-close-v3/core-body-close-v3.twig +0 -2
  251. package/components/component-core-body-open-v3/core-body-open-v3.twig +0 -32
  252. package/components/component-core-group-container-styles-v3/core-group-container-styles-v3.scss +0 -48
  253. package/components/component-core-head-v3/core-head-v3.twig +0 -62
  254. package/components/component-cta-selection-v3/cta-selection-v3.twig +0 -256
  255. package/components/component-cta-selection-v3/group_686e93eb832a6.json +0 -1117
  256. package/components/component-e-shop-settings-v3/e-shop-settings-v3.twig +0 -114
  257. package/components/component-element-positioning-v3/element-positioning-v3.scss +0 -41
  258. package/components/component-element-positioning-v3/element-positioning-v3.twig +0 -42
  259. package/components/component-element-positioning-v3/group_6882281544263.json +0 -635
  260. package/components/component-endpoints/endpoints.php +0 -32
  261. package/components/component-flex-layout-container-v3/flex-layout-container-v3.scss +0 -38
  262. package/components/component-flex-layout-container-v3/flex-layout-container-v3.twig +0 -28
  263. package/components/component-flex-layout-container-v3/group_6887a026bbc33.json +0 -773
  264. package/components/component-global-content-max-width-v3/global-content-max-width-v3.twig +0 -10
  265. package/components/component-global-content-max-width-v3/group_63c83de4f0a99.json +0 -58
  266. package/components/component-gradient-overlay-v3/gradient-overlay-v3.scss +0 -43
  267. package/components/component-gradient-overlay-v3/gradient-overlay-v3.twig +0 -58
  268. package/components/component-gradient-overlay-v3/group_686fd9ca50b63.json +0 -495
  269. package/components/component-grid-gap-mults-v3/grid-gap-mults-v3.twig +0 -10
  270. package/components/component-grid-gap-mults-v3/group_689221b94ce69.json +0 -220
  271. package/components/component-grid-layout-container-v3/grid-layout-container-v3.scss +0 -154
  272. package/components/component-grid-layout-container-v3/grid-layout-container-v3.twig +0 -88
  273. package/components/component-grid-layout-container-v3/group_6882282e65bf2.json +0 -1525
  274. package/components/component-grid-layout-element-v3/grid-layout-element-v3.scss +0 -47
  275. package/components/component-grid-layout-element-v3/grid-layout-element-v3.twig +0 -23
  276. package/components/component-grid-layout-element-v3/group_68822860bda9f.json +0 -728
  277. package/components/component-nav-menu-v3/group_68da703f710ff.json +0 -432
  278. package/components/component-nav-menu-v3/nav-menu-v3.scss +0 -43
  279. package/components/component-nav-menu-v3/nav-menu-v3.twig +0 -75
  280. package/components/component-responsive-image-v3/group_6867bc53f1da8.json +0 -1515
  281. package/components/component-responsive-image-v3/responsive-image-v3.scss +0 -63
  282. package/components/component-responsive-image-v3/responsive-image-v3.twig +0 -71
  283. package/components/component-responsive-picture-element-v3/responsive-picture-element-v3.twig +0 -35
  284. package/components/component-responsive-show-hide/responsive-show-hide-v3.twig +0 -9
  285. package/components/component-social-media-share-v3/social-media-share-v3-extra.scss +0 -6
  286. package/components/component-social-media-share-v3/social-media-share-v3.scss +0 -131
  287. package/components/component-social-networks-v3/social-networks-v3.scss +0 -73
  288. package/components/component-social-networks-v3/social-networks-v3.twig +0 -43
  289. package/components/component-text-editor-settings-container-classes-v3/text-editor-settings-container-classes-v3.twig +0 -9
  290. package/components/component-text-editor-settings-element-classes-v3/text-editor-settings-element-classes-v3.twig +0 -13
  291. package/components/component-text-editor-settings-v3/group_687a4e2334e37.json +0 -1377
  292. package/components/component-text-editor-settings-variables-v3/text-editor-settings-variables-v3.twig +0 -61
  293. package/components/component-video-component-v3/video-component-v3.twig +0 -90
  294. package/components/component-video-fields-v3/group_6872282f44634.json +0 -1013
  295. package/components/component-video-trigger-button-v3/video-trigger-button-v3.twig +0 -14
  296. package/components/component-wysiwyg-editor-v3/group_6867e153af466.json +0 -127
  297. package/components/component-wysiwyg-editor-v3/wysiwyg-editor-v3.twig +0 -18
  298. package/components/core-block-editor-assets-v3/core-block-editor-assets-v3.php +0 -14
  299. package/components/core-core-block-render-function-v3/core-block-render-function-v3.php +0 -39
  300. package/components/core-core-design-settings-v3/core-design-settings-v3.php +0 -43
  301. package/components/core-core-post-overrides-v3/core-post-overrides-v3.php +0 -21
  302. package/components/core-core-themes/core-themes-v3.php +0 -68
  303. package/components/core-core-typography-v3/core-typography-v3.php +0 -239
  304. package/components/core-globals/globals.php +0 -39
  305. package/components/entrypoint-entry-point-classes-v3/entry-point-classes-v3.twig +0 -12
  306. package/components/entrypoint-entry-point-html-v3/entry-point-html-v3.twig +0 -19
  307. package/components/entrypoint-entry-point-style-v3/entry-point-style-v3.twig +0 -11
  308. package/components/fields-acf-wysiwyg-options-v3/acf-wysiwyg-options-v3.php +0 -221
  309. package/components/fields-animations-v3/animations-v3.scss +0 -127
  310. package/components/fields-archive-pages-v3/group_635e777ce46d4.json +0 -150
  311. package/components/fields-cocktail-info-v3/group_64c29b7f188ca.json +0 -686
  312. package/components/fields-content-container-settings-v3/content-container-settings-v3.scss +0 -213
  313. package/components/fields-content-container-v3/content-container-v3.js +0 -96
  314. package/components/fields-content-container-v3/content-container-v3.scss +0 -31
  315. package/components/fields-core-critical-v3/core-critical-v3.scss +0 -13
  316. package/components/fields-core-css-modules-v3/core-css-modules-v3.scss +0 -13
  317. package/components/fields-core-css-sizing-vars-v3/core-css-sizing-vars-v3.scss +0 -125
  318. package/components/fields-core-cta-v3/core-cta-v3.scss +0 -276
  319. package/components/fields-core-generic-v3/core-generic-v3.scss +0 -299
  320. package/components/fields-core-root-variables-v3/core-root-variables-v3.scss +0 -47
  321. package/components/fields-core-typography-mixins-v3/core-typography-mixins-v3.scss +0 -1080
  322. package/components/fields-core-typography-v3/core-typography-v3.scss +0 -457
  323. package/components/fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.js +0 -270
  324. package/components/fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.scss +0 -106
  325. package/components/fields-drink-responsibly-notice-v3/group_68751257883ad.json +0 -266
  326. package/components/fields-dynamic-critical-css-v3/group_65abcd463e8d0.json +0 -126
  327. package/components/fields-e-shop-settings-v3/e-shop-settings-v3.twig +0 -87
  328. package/components/fields-e-shop-settings-v3/group_650b24b4e623d.json +0 -803
  329. package/components/fields-global-preload-v3/group_65e0bd35e781b.json +0 -289
  330. package/components/fields-image-management-service-v3/group_677813165b633.json +0 -149
  331. package/components/fields-ingredients-list/group_6900f19dadebf.json +0 -225
  332. package/components/fields-modal-popup-content-v3/group_689876f1ee3fc.json +0 -403
  333. package/components/fields-modal-popup-content-v3/modal-popup-content-v3.twig +0 -18
  334. package/components/fields-post-info-v3/group_6867bbe167dd2.json +0 -1089
  335. package/components/fields-product-info-v3/group_689098dd3a131.json +0 -721
  336. package/components/fields-upload-filesize-limit-v3/group_659d259760a1d.json +0 -56
  337. package/components/fields-video-management-services-v3/group_67b4cac05cb30.json +0 -146
  338. package/components/webc-counter-display/counter-display.css +0 -2
  339. package/components/webc-counter-display/counter-display.html +0 -5
  340. package/components/webc-counter-display/counter-display.js +0 -30
  341. package/components/webc-counter-display/index.html +0 -30
  342. package/components/webc-layout-container/index.html +0 -108
  343. package/components/webc-layout-container/layout-container.css +0 -9
  344. package/components/webc-layout-container/layout-container.html +0 -5
  345. package/components/webc-layout-container/layout-container.js +0 -22
  346. package/components/webc-loadmore-trigger/index.html +0 -30
  347. package/components/webc-loadmore-trigger/loadmore-trigger.css +0 -20
  348. package/components/webc-loadmore-trigger/loadmore-trigger.html +0 -6
  349. package/components/webc-loadmore-trigger/loadmore-trigger.js +0 -34
  350. package/components/webc-post-carousel-display-module/index.html +0 -30
  351. package/components/webc-post-carousel-display-module/post-carousel-display-module.css +0 -36
  352. package/components/webc-post-carousel-display-module/post-carousel-display-module.html +0 -5
  353. package/components/webc-post-carousel-display-module/post-carousel-display-module.js +0 -48
  354. package/components/webc-post-filter-module/dev-content/amber.webp +0 -0
  355. package/components/webc-post-filter-module/dev-content/bluey.webp +0 -0
  356. package/components/webc-post-filter-module/dev-content/chucky-vanille.webp +0 -0
  357. package/components/webc-post-filter-module/dev-content/dev-content.js +0 -347
  358. package/components/webc-post-filter-module/dev-content/dev-contentlocal.js +0 -362
  359. package/components/webc-post-filter-module/dev-content/fat-gigio-basket-life.webp +0 -0
  360. package/components/webc-post-filter-module/dev-content/fat-gigio-kitten.webp +0 -0
  361. package/components/webc-post-filter-module/dev-content/fat-gigio-sleepy.webp +0 -0
  362. package/components/webc-post-filter-module/dev-content/kai-lounging.webp +0 -0
  363. package/components/webc-post-filter-module/dev-content/kai-selfie.webp +0 -0
  364. package/components/webc-post-filter-module/dev-content/kai.webp +0 -0
  365. package/components/webc-post-filter-module/dev-content/lulu-mad.webp +0 -0
  366. package/components/webc-post-filter-module/dev-content/lulu-serious.webp +0 -0
  367. package/components/webc-post-filter-module/dev-content/martha-on-the-mat.webp +0 -0
  368. package/components/webc-post-filter-module/dev-content/max-on-the-mat.webp +0 -0
  369. package/components/webc-post-filter-module/dev-content/mephy-dreams-of-mice.webp +0 -0
  370. package/components/webc-post-filter-module/dev-content/mr-business-doing-work.webp +0 -0
  371. package/components/webc-post-filter-module/dev-content/mr-business-on-top.webp +0 -0
  372. package/components/webc-post-filter-module/dev-content/peanut-keeping-an-eye.webp +0 -0
  373. package/components/webc-post-filter-module/dev-content/pete-at-work.webp +0 -0
  374. package/components/webc-post-filter-module/dev-content/pete-bath.webp +0 -0
  375. package/components/webc-post-filter-module/dev-content/pete-dinosaur.webp +0 -0
  376. package/components/webc-post-filter-module/dev-content/pete-lawn.webp +0 -0
  377. package/components/webc-post-filter-module/dev-content/pete-snacks.webp +0 -0
  378. package/components/webc-post-filter-module/dev-content/ramses-kitten.webp +0 -0
  379. package/components/webc-post-filter-module/dev-content/ramses-school-day.webp +0 -0
  380. package/components/webc-post-filter-module/dev-content/ramses-tired.webp +0 -0
  381. package/components/webc-post-filter-module/dev-content/remy-garden-contemplation.webp +0 -0
  382. package/components/webc-post-filter-module/dev-content/sky-field.webp +0 -0
  383. package/components/webc-post-filter-module/dev-content/sky-luxury-2.webp +0 -0
  384. package/components/webc-post-filter-module/dev-content/sky-luxury.webp +0 -0
  385. package/components/webc-post-filter-module/dev-content/sky-puppy-good-dog.webp +0 -0
  386. package/components/webc-post-filter-module/dev-content/sky-puppy-pose.webp +0 -0
  387. package/components/webc-post-filter-module/dev-content/sky-security.webp +0 -0
  388. package/components/webc-post-filter-module/dev-content/vanille-asleep.webp +0 -0
  389. package/components/webc-post-filter-module/dev-content/vanille-bass.webp +0 -0
  390. package/components/webc-post-filter-module/dev-content/vanille-party.webp +0 -0
  391. package/components/webc-post-filter-module/dev-content/vanille-puppy-eyes.webp +0 -0
  392. package/components/webc-post-filter-module/dev-content/vanille-puppy.webp +0 -0
  393. package/components/webc-post-filter-module/index.html +0 -30
  394. package/components/webc-post-filter-module/post-filter-module.css +0 -59
  395. package/components/webc-post-filter-module/post-filter-module.html +0 -13
  396. package/components/webc-post-filter-module/post-filter-module.js +0 -359
  397. package/components/webc-post-filter-module-no-group/index.html +0 -30
  398. package/components/webc-post-filter-module-no-group/post-filter-module-no-group.css +0 -59
  399. package/components/webc-post-filter-module-no-group/post-filter-module-no-group.html +0 -13
  400. package/components/webc-post-filter-module-no-group/post-filter-module-no-group.js +0 -312
  401. package/components/webc-post-grid-display-module/index.html +0 -30
  402. package/components/webc-post-grid-display-module/post-grid-display-module.css +0 -42
  403. package/components/webc-post-grid-display-module/post-grid-display-module.html +0 -6
  404. package/components/webc-post-grid-display-module/post-grid-display-module.js +0 -48
  405. package/components/webc-ptfg-9000/index.html +0 -108
  406. package/components/webc-ptfg-9000/ptfg-9000.css +0 -14
  407. package/components/webc-ptfg-9000/ptfg-9000.html +0 -1
  408. package/components/webc-ptfg-9000/ptfg-9000.js +0 -42
  409. package/components/webc-responsive-image/index.html +0 -108
  410. package/components/webc-responsive-image/layout-container.css +0 -9
  411. package/components/webc-responsive-image/layout-container.js +0 -22
  412. package/components/webc-responsive-image/responsive-image.html +0 -15
  413. package/components/webc-slot-test/slot-test.html +0 -25
  414. package/components/webc-text-input-trigger/index.html +0 -30
  415. package/components/webc-text-input-trigger/text-input-trigger.css +0 -6
  416. package/components/webc-text-input-trigger/text-input-trigger.html +0 -4
  417. package/components/webc-text-input-trigger/text-input-trigger.js +0 -33
  418. package/components/webc-toggle-trigger/index.html +0 -30
  419. package/components/webc-toggle-trigger/toggle-trigger.css +0 -13
  420. package/components/webc-toggle-trigger/toggle-trigger.html +0 -8
  421. package/components/webc-toggle-trigger/toggle-trigger.js +0 -53
  422. package/createDynamicBlockScss-v3.js +0 -25
  423. package/createJsAssets-v3.js +0 -35
  424. package/createJsAssets.js +0 -31
  425. package/createNewBlock.js +0 -131
  426. package/createNewChildBlock2.js +0 -142
  427. package/createPreviewScss.js +0 -35
  428. package/datalayer-tools.mjs +0 -2
  429. package/duplicateBlock.js +0 -123
  430. package/esbuild.mjs +0 -87
  431. package/exportAllBlocks.js +0 -144
  432. package/exportBlock.js +0 -109
  433. package/exportChildBlock.js +0 -102
  434. package/exportCustomCachesToLibrary.js +0 -73
  435. package/exportEntrypointToLibrary.js +0 -76
  436. package/exportImagesToLibrary.js +0 -68
  437. package/exportSEOExtrasToLibrary.js +0 -73
  438. package/exportToLibrary.js +0 -548
  439. package/importBlock.js +0 -92
  440. package/importChildBlock.js +0 -76
  441. package/install-component.js +0 -204
  442. package/list-components.js +0 -9
  443. package/new-block-templates/template-block-json.js +0 -37
  444. package/new-block-templates/template-default.js +0 -21
  445. package/new-block-templates/template-js-blank.js +0 -12
  446. package/new-block-templates/template-scss-blank.js +0 -6
  447. package/no-audio.vtt +0 -4
  448. package/onion-loader-dev.js +0 -260
  449. package/onion-loader-local.js +0 -222
  450. package/public/.gitkeep +0 -0
  451. package/public/assetList.mjs +0 -3
  452. package/public/block-accent-image-v3/accent-image-v3.css +0 -2
  453. package/public/block-accent-image-v3/accent-image-v3.js +0 -7
  454. package/public/block-accordion-v3/accordion-v3.css +0 -380
  455. package/public/block-accordion-v3/accordion-v3.js +0 -117
  456. package/public/block-back-to-top-button-v3/back-to-top-button-v3.css +0 -64
  457. package/public/block-back-to-top-button-v3/back-to-top-button-v3.js +0 -12
  458. package/public/block-betterreviews-display-v3/betterreviews-display-v3.css +0 -95
  459. package/public/block-betterreviews-display-v3/betterreviews-display-v3.js +0 -7
  460. package/public/block-block-interactions-v3/block-interactions-v3.css +0 -36
  461. package/public/block-block-interactions-v3/block-interactions-v3.js +0 -44
  462. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +0 -187
  463. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +0 -185
  464. package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css +0 -268
  465. package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.js +0 -93
  466. package/public/block-cover-link-v3/cover-link-v3.css +0 -8
  467. package/public/block-cover-link-v3/cover-link-v3.js +0 -7
  468. package/public/block-divider-v3/divider-v3.css +0 -74
  469. package/public/block-divider-v3/divider-v3.js +0 -7
  470. package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.css +0 -98
  471. package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.js +0 -44
  472. package/public/block-form-selection-v3/form-selection-v3.css +0 -31
  473. package/public/block-form-selection-v3/form-selection-v3.js +0 -61
  474. package/public/block-gradient-layer-v3/gradient-layer-v3.css +0 -45
  475. package/public/block-gradient-layer-v3/gradient-layer-v3.js +0 -7
  476. package/public/block-group-container-v3/group-container-v3.css +0 -303
  477. package/public/block-group-container-v3/group-container-v3.js +0 -7
  478. package/public/block-lottie-content-v3/lottie-content-v3.css +0 -0
  479. package/public/block-lottie-content-v3/lottie-content-v3.js +0 -25
  480. package/public/block-market-selector-v3/market-selector-v3.css +0 -136
  481. package/public/block-market-selector-v3/market-selector-v3.js +0 -7
  482. package/public/block-modal-form-v3/modal-form-v3.css +0 -0
  483. package/public/block-modal-form-v3/modal-form-v3.js +0 -44
  484. package/public/block-nav-menu-container-v3/nav-menu-container-v3.css +0 -3
  485. package/public/block-nav-menu-container-v3/nav-menu-container-v3.js +0 -7
  486. package/public/block-post-info-v3/post-info-v3.css +0 -1148
  487. package/public/block-post-info-v3/post-info-v3.js +0 -7
  488. package/public/block-post-type-filter-grid-v3/post-type-filter-grid-v3.css +0 -873
  489. package/public/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js +0 -13
  490. package/public/block-product-info-v3/product-info-v3.css +0 -846
  491. package/public/block-product-info-v3/product-info-v3.js +0 -7
  492. package/public/block-raw-html-v3/raw-html-v3.css +0 -0
  493. package/public/block-raw-html-v3/raw-html-v3.js +0 -7
  494. package/public/block-responsive-table-v3/responsive-table-v3.css +0 -50
  495. package/public/block-responsive-table-v3/responsive-table-v3.js +0 -7
  496. package/public/block-scrolling-banner-v3/scrolling-banner-v3.css +0 -93
  497. package/public/block-scrolling-banner-v3/scrolling-banner-v3.js +0 -118
  498. package/public/block-section-separator-v3/section-separator-v3.css +0 -43
  499. package/public/block-section-separator-v3/section-separator-v3.js +0 -7
  500. package/public/block-single-column-container-v3/single-column-container-v3.css +0 -14
  501. package/public/block-single-column-container-v3/single-column-container-v3.js +0 -7
  502. package/public/block-single-responsive-image-v3/single-responsive-image-v3.css +0 -61
  503. package/public/block-single-responsive-image-v3/single-responsive-image-v3.js +0 -7
  504. package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.css +0 -20
  505. package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.js +0 -44
  506. package/public/block-site-logo-container-v3/site-logo-container-v3.css +0 -18
  507. package/public/block-site-logo-container-v3/site-logo-container-v3.js +0 -7
  508. package/public/block-site-title-and-tagline-v3/site-title-and-tagline-v3.css +0 -12
  509. package/public/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js +0 -7
  510. package/public/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.css +0 -25
  511. package/public/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js +0 -8
  512. package/public/block-social-networks-v3/social-networks-v3.css +0 -74
  513. package/public/block-social-networks-v3/social-networks-v3.js +0 -7
  514. package/public/block-spacer-v3/spacer-v3.css +0 -16
  515. package/public/block-spacer-v3/spacer-v3.js +0 -2
  516. package/public/block-spotify-embed-v3/spotify-embed-v3.css +0 -7
  517. package/public/block-spotify-embed-v3/spotify-embed-v3.js +0 -7
  518. package/public/block-standard-content-v3/standard-content-v3.css +0 -423
  519. package/public/block-standard-content-v3/standard-content-v3.js +0 -7
  520. package/public/block-sticky-buy-cta-v3/sticky-buy-cta-v3.css +0 -0
  521. package/public/block-sticky-buy-cta-v3/sticky-buy-cta-v3.js +0 -7
  522. package/public/block-sub-group-container-v3/sub-group-container-v3.css +0 -288
  523. package/public/block-sub-group-container-v3/sub-group-container-v3.js +0 -2
  524. package/public/block-video-content-v3/video-content-v3.css +0 -102
  525. package/public/block-video-content-v3/video-content-v3.js +0 -11
  526. package/public/dynamicBlockScss-v3.css +0 -6392
  527. package/public/dynamicBlockScss-v3.scss +0 -37
  528. package/public/jsAssets.mjs +0 -4
  529. package/public/publicBundleBase.css +0 -4742
  530. package/public/publicBundleBase.scss +0 -11
  531. package/removeBlock.js +0 -124
  532. package/update-all-components.js +0 -135
  533. package/update-component.js +0 -537
  534. package/update-template.js +0 -537
  535. /package/{.prettierrc → onion-videocontroller/.prettierrc} +0 -0
  536. /package/{breakpoints.scss → onion-videocontroller/breakpoints.scss} +0 -0
package/public/publicBundleBase.css DELETED
@@ -1,4742 +0,0 @@
1
- @charset "UTF-8";
2
- @layer base-styles {
3
- body {
4
- --weight-thin: 100;
5
- --weight-extra-light: 200;
6
- --weight-light: 300;
7
- --weight-medium: 400;
8
- --weight-demi-bold: 500;
9
- --weight-demi-bold-plus: 600;
10
- --weight-bold: 700;
11
- --weight-extra-bold: 800;
12
- --weight-extra-bold-plus: 900;
13
- --default-text-colour-mobile: var(--theme-primary-text-colour);
14
- --default-text-colour-desktop: var(--theme-primary-text-colour);
15
- }
16
- .wp-toolbar body {
17
- --screen-width-mobile: 360px;
18
- --font-reference-mobile: 360px;
19
- --screen-width: 360px;
20
- --font-reference: 360px;
21
- }
22
- @media screen and (min-width: 768px) {
23
- .wp-toolbar body {
24
- --screen-width-portrait: 768px;
25
- --screen-width-landscape: 768px;
26
- --screen-width-desktop: 768px;
27
- --screen-width-static: 768px;
28
- --screen-width: 768px;
29
- --font-reference: 768px;
30
- }
31
- }
32
- @media screen and (min-width: 1024px) {
33
- .wp-toolbar body {
34
- --screen-width-portrait: 840px;
35
- --screen-width-landscape: 840px;
36
- --screen-width-desktop: 840px;
37
- --screen-width-static: 840px;
38
- --screen-width: 840px;
39
- --font-reference-portrait: 840px;
40
- --font-reference-landscape: 840px;
41
- --font-reference-desktop: 840px;
42
- --font-reference: 840px;
43
- }
44
- }
45
- }
46
- @layer base-styles {
47
- body {
48
- --screen-width: var(--screen-width-mobile);
49
- --font-reference: var(--font-reference-mobile);
50
- --design-reference: var(--mobile-design-reference);
51
- }
52
- @media screen and (min-width: 768px) {
53
- body {
54
- --screen-width: var(--screen-width-portrait);
55
- --font-reference: var(--font-reference-portrait);
56
- --design-reference: var(--portrait-design-reference);
57
- }
58
- }
59
- @media screen and (min-width: 1024px) {
60
- body {
61
- --screen-width: var(--screen-width-landscape);
62
- --font-reference: var(--font-reference-landscape);
63
- --design-reference: var(--landscape-design-reference);
64
- }
65
- }
66
- @media screen and (min-width: 1440px) {
67
- body {
68
- --screen-width: var(--screen-width-desktop);
69
- --font-reference: var(--font-reference-desktop);
70
- --design-reference: var(--desktop-design-reference);
71
- }
72
- }
73
- @media screen and (min-width: 1920px) {
74
- body {
75
- --screen-width: var(--screen-width-fullhd);
76
- --font-reference: var(--font-reference-fullhd);
77
- --design-reference: var(--fullhd-design-reference);
78
- }
79
- }
80
- body {
81
- --mobile-inline: 20;
82
- --portrait-inline: 40;
83
- --landscape-inline: 40;
84
- --desktop-inline: 40;
85
- --screen-width-fullhd: 1920px;
86
- --font-reference-fullhd: 1920px;
87
- --screen-width-desktop: 1440px;
88
- --font-reference-desktop: 1440px;
89
- --screen-width-landscape: 100vw;
90
- --font-reference-landscape: 100vw;
91
- --screen-width-portrait: 100vw;
92
- --font-reference-portrait: 100vw;
93
- --font-reference-mobile: 375px;
94
- --screen-width-mobile: 375px;
95
- --screen-width-static: 1440px;
96
- --fullhd-design-reference: 1920;
97
- --desktop-design-reference: 1440;
98
- --landscape-design-reference: 1440;
99
- --portrait-design-reference: 1440;
100
- --mobile-design-reference: 375;
101
- --global-inline-spacing: calc(var(--mobile-inline) / var(--design-reference) * var(--screen-width));
102
- }
103
- @media screen and (min-width: 768px) {
104
- body {
105
- --global-inline-spacing: calc(var(--portrait-inline, 40) / var(--design-reference) * var(--screen-width));
106
- }
107
- }
108
- @media screen and (min-width: 1024px) {
109
- body {
110
- --global-inline-spacing: calc(var(--landscape-inline, 40) / var(--design-reference) * var(--screen-width));
111
- }
112
- }
113
- @media screen and (min-width: 1440px) {
114
- body {
115
- --global-inline-spacing: calc(var(--desktop-inline, 40) / var(--design-reference) * var(--screen-width));
116
- }
117
- }
118
- body {
119
- --heading-block-spacing: var(--heading-block-spacing-mobile);
120
- }
121
- @media screen and (min-width: 768px) {
122
- body {
123
- --heading-block-spacing: var(--heading-block-spacing-portrait);
124
- }
125
- }
126
- @media screen and (min-width: 1024px) {
127
- body {
128
- --heading-block-spacing: var(--heading-block-spacing-desktop);
129
- }
130
- }
131
- body {
132
- --paragraph-block-spacing: var(--paragraph-block-spacing-mobile);
133
- }
134
- @media screen and (min-width: 768px) {
135
- body {
136
- --paragraph-block-spacing: var( --paragraph-block-spacing-portrait );
137
- }
138
- }
139
- @media screen and (min-width: 1024px) {
140
- body {
141
- --paragraph-block-spacing: var( --paragraph-block-spacing-desktop );
142
- }
143
- }
144
- body {
145
- --list-item-block-spacing: var(--list-item-block-spacing-mobile);
146
- }
147
- @media screen and (min-width: 768px) {
148
- body {
149
- --list-item-block-spacing: var( --list-item-block-spacing-portrait );
150
- }
151
- }
152
- @media screen and (min-width: 1024px) {
153
- body {
154
- --list-item-block-spacing: var( --list-item-block-spacing-desktop );
155
- }
156
- }
157
- body {
158
- --global-content-max-width: calc(var(--global-content-max-width-setting) / var(--desktop-design-reference) * var(--screen-width-static));
159
- }
160
- }
161
- .font-primary {
162
- font-family: var(--primary-font-family), sans-serif;
163
- --font-size-multiplier: var(--global-font-multiplier-primary);
164
- }
165
- .font-secondary {
166
- font-family: var(--secondary-font-family), sans-serif;
167
- --font-size-multiplier: var(--global-font-multiplier-secondary);
168
- }
169
- .font-tertiary {
170
- font-family: var(--tertiary-font-family), sans-serif;
171
- --font-size-multiplier: var(--global-font-multiplier-tertiary);
172
- }
173
- .font-quaternary {
174
- font-family: var(--quaternary-font-family), sans-serif;
175
- --font-size-multiplier: var(--global-font-multiplier-quaternary);
176
- }
177
- .h1-l-sizing,
178
- .h-xl-sizing {
179
- letter-spacing: var(--h-xl-letter-spacing);
180
- line-height: var(--h-xl-line-height);
181
- font-family: var(--h-xl-font-family);
182
- --default-font-weight: var(--h-xl-default-font-weight);
183
- font-weight: var(--default-font-weight);
184
- }
185
- .h1-l-sizing strong,
186
- .h1-l-sizing b,
187
- .h-xl-sizing strong,
188
- .h-xl-sizing b {
189
- font-weight: var(--h-xl-bold-font-weight);
190
- }
191
- .h1-l-sizing,
192
- .h-xl-sizing {
193
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
194
- font-size: clamp(var(--h-xl-font-size-min-mobile, 10px), var(--h-xl-mobile, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xl-font-size-max-mobile, 180px));
195
- }
196
- @media screen and (min-width: 768px) {
197
- .h1-l-sizing,
198
- .h-xl-sizing {
199
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
200
- font-size: clamp(var(--h-xl-font-size-min-mobile, 10px), var(--h-xl-portrait, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xl-font-size-max-mobile, 180px));
201
- }
202
- }
203
- @media screen and (min-width: 1024px) {
204
- .h1-l-sizing,
205
- .h-xl-sizing {
206
- font-size: clamp(10px, 70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
207
- font-size: clamp(var(--h-xl-font-size-min-desktop, 10px), var(--h-xl-landscape, 70) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xl-font-size-max-desktop, 180px));
208
- }
209
- }
210
- @media screen and (min-width: 1440px) {
211
- .h1-l-sizing,
212
- .h-xl-sizing {
213
- font-size: clamp(10px, 280 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
214
- font-size: clamp(var(--h-xl-font-size-min-desktop, 10px), var(--h-xl-desktop, 280) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xl-font-size-max-desktop, 180px));
215
- line-height: var(--h-xl-line-height);
216
- letter-spacing: var(--h-xl-letter-spacing);
217
- }
218
- }
219
- @media (max-width: 768px) {
220
- .cmpl-text-editor-settings .h-xl-fs-mobile {
221
- font-size: clamp(10px, 280 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
222
- font-size: clamp(var(--h-xl-font-size-min-desktop, 10px), var(--h-xl-desktop, 280) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xl-font-size-max-desktop, 180px));
223
- line-height: var(--h-xl-line-height);
224
- letter-spacing: var(--h-xl-letter-spacing);
225
- }
226
- }
227
- @media (min-width: 768px) and (max-width: 1024px) {
228
- .cmpl-text-editor-settings .h-xl-fs-portrait {
229
- font-size: clamp(10px, 280 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
230
- font-size: clamp(var(--h-xl-font-size-min-desktop, 10px), var(--h-xl-desktop, 280) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xl-font-size-max-desktop, 180px));
231
- line-height: var(--h-xl-line-height);
232
- letter-spacing: var(--h-xl-letter-spacing);
233
- }
234
- }
235
- @media screen and (min-width: 1024px) {
236
- .cmpl-text-editor-settings .h-xl-fs-desktop {
237
- font-size: clamp(10px, 280 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
238
- font-size: clamp(var(--h-xl-font-size-min-desktop, 10px), var(--h-xl-desktop, 280) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xl-font-size-max-desktop, 180px));
239
- line-height: var(--h-xl-line-height);
240
- letter-spacing: var(--h-xl-letter-spacing);
241
- }
242
- }
243
- .h1-sizing,
244
- .h-l-sizing {
245
- letter-spacing: var(--h-l-letter-spacing);
246
- line-height: var(--h-l-line-height);
247
- font-family: var(--h-l-font-family);
248
- --default-font-weight: var(--h-l-default-font-weight);
249
- font-weight: var(--h-l-default-font-weight);
250
- }
251
- .h1-sizing strong,
252
- .h1-sizing b,
253
- .h-l-sizing strong,
254
- .h-l-sizing b {
255
- font-weight: var(--h-l-bold-font-weight);
256
- }
257
- .h1-sizing,
258
- .h-l-sizing {
259
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
260
- font-size: clamp(var(--h-l-font-size-min-mobile, 10px), var(--h-l-mobile, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-l-font-size-max-mobile, 180px));
261
- }
262
- @media screen and (min-width: 768px) {
263
- .h1-sizing,
264
- .h-l-sizing {
265
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
266
- font-size: clamp(var(--h-l-font-size-min-mobile, 10px), var(--h-l-portrait, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-l-font-size-max-mobile, 180px));
267
- }
268
- }
269
- @media screen and (min-width: 1024px) {
270
- .h1-sizing,
271
- .h-l-sizing {
272
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
273
- font-size: clamp(var(--h-l-font-size-min-desktop, 10px), var(--h-l-landscape, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-l-font-size-max-desktop, 180px));
274
- }
275
- }
276
- @media screen and (min-width: 1440px) {
277
- .h1-sizing,
278
- .h-l-sizing {
279
- font-size: clamp(10px, 220 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
280
- font-size: clamp(var(--h-l-font-size-min-desktop, 10px), var(--h-l-desktop, 220) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-l-font-size-max-desktop, 180px));
281
- letter-spacing: var(--h-l-letter-spacing);
282
- line-height: var(--h-l-line-height);
283
- }
284
- }
285
- @media (max-width: 768px) {
286
- .cmpl-text-editor-settings .h-l-fs-mobile {
287
- font-size: clamp(10px, 220 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
288
- font-size: clamp(var(--h-l-font-size-min-desktop, 10px), var(--h-l-desktop, 220) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-l-font-size-max-desktop, 180px));
289
- letter-spacing: var(--h-l-letter-spacing);
290
- line-height: var(--h-l-line-height);
291
- }
292
- }
293
- @media (min-width: 768px) and (max-width: 1024px) {
294
- .cmpl-text-editor-settings .h-l-fs-portrait {
295
- font-size: clamp(10px, 220 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
296
- font-size: clamp(var(--h-l-font-size-min-desktop, 10px), var(--h-l-desktop, 220) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-l-font-size-max-desktop, 180px));
297
- letter-spacing: var(--h-l-letter-spacing);
298
- line-height: var(--h-l-line-height);
299
- }
300
- }
301
- @media screen and (min-width: 1024px) {
302
- .cmpl-text-editor-settings .h-l-fs-desktop {
303
- font-size: clamp(10px, 220 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
304
- font-size: clamp(var(--h-l-font-size-min-desktop, 10px), var(--h-l-desktop, 220) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-l-font-size-max-desktop, 180px));
305
- letter-spacing: var(--h-l-letter-spacing);
306
- line-height: var(--h-l-line-height);
307
- }
308
- }
309
- .h2-sizing,
310
- .h-m-sizing {
311
- letter-spacing: var(--h-m-letter-spacing);
312
- line-height: var(--h-m-line-height);
313
- font-family: var(--h-m-font-family);
314
- --default-font-weight: var(--h-m-default-font-weight);
315
- font-weight: var(--default-font-weight);
316
- }
317
- .h2-sizing strong,
318
- .h2-sizing b,
319
- .h-m-sizing strong,
320
- .h-m-sizing b {
321
- font-weight: var(--h-m-bold-font-weight);
322
- }
323
- .h2-sizing,
324
- .h-m-sizing {
325
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
326
- font-size: clamp(var(--h-m-font-size-min-mobile, 10px), var(--h-m-mobile, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-m-font-size-max-mobile, 180px));
327
- }
328
- @media screen and (min-width: 768px) {
329
- .h2-sizing,
330
- .h-m-sizing {
331
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
332
- font-size: clamp(var(--h-m-font-size-min-mobile, 10px), var(--h-m-portrait, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-m-font-size-max-mobile, 180px));
333
- }
334
- }
335
- @media screen and (min-width: 1024px) {
336
- .h2-sizing,
337
- .h-m-sizing {
338
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
339
- font-size: clamp(var(--h-m-font-size-min-desktop, 10px), var(--h-m-landscape, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-m-font-size-max-desktop, 180px));
340
- }
341
- }
342
- @media screen and (min-width: 1440px) {
343
- .h2-sizing,
344
- .h-m-sizing {
345
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
346
- font-size: clamp(var(--h-m-font-size-min-desktop, 10px), var(--h-m-desktop, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-m-font-size-max-desktop, 180px));
347
- letter-spacing: var(--h-m-letter-spacing);
348
- line-height: var(--h-m-line-height);
349
- }
350
- }
351
- @media (max-width: 768px) {
352
- .cmpl-text-editor-settings .h-m-fs-mobile {
353
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
354
- font-size: clamp(var(--h-m-font-size-min-desktop, 10px), var(--h-m-desktop, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-m-font-size-max-desktop, 180px));
355
- letter-spacing: var(--h-m-letter-spacing);
356
- line-height: var(--h-m-line-height);
357
- }
358
- }
359
- @media (min-width: 768px) and (max-width: 1024px) {
360
- .cmpl-text-editor-settings .h-m-fs-portrait {
361
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
362
- font-size: clamp(var(--h-m-font-size-min-desktop, 10px), var(--h-m-desktop, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-m-font-size-max-desktop, 180px));
363
- letter-spacing: var(--h-m-letter-spacing);
364
- line-height: var(--h-m-line-height);
365
- }
366
- }
367
- @media screen and (min-width: 1024px) {
368
- .cmpl-text-editor-settings .h-m-fs-desktop {
369
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
370
- font-size: clamp(var(--h-m-font-size-min-desktop, 10px), var(--h-m-desktop, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-m-font-size-max-desktop, 180px));
371
- letter-spacing: var(--h-m-letter-spacing);
372
- line-height: var(--h-m-line-height);
373
- }
374
- }
375
- .h3-sizing,
376
- .h-s-sizing {
377
- letter-spacing: var(--h-s-letter-spacing);
378
- line-height: var(--h-s-line-height);
379
- font-family: var(--h-s-font-family);
380
- --default-font-weight: var(--h-s-default-font-weight);
381
- font-weight: var(--default-font-weight);
382
- }
383
- .h3-sizing strong,
384
- .h3-sizing b,
385
- .h-s-sizing strong,
386
- .h-s-sizing b {
387
- font-weight: var(--h-s-bold-font-weight);
388
- }
389
- .h3-sizing,
390
- .h-s-sizing {
391
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
392
- font-size: clamp(var(--h-s-font-size-min-mobile, 10px), var(--h-s-mobile, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-s-font-size-max-mobile, 180px));
393
- }
394
- @media screen and (min-width: 768px) {
395
- .h3-sizing,
396
- .h-s-sizing {
397
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
398
- font-size: clamp(var(--h-s-font-size-min-mobile, 10px), var(--h-s-portrait, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-s-font-size-max-mobile, 180px));
399
- }
400
- }
401
- @media screen and (min-width: 1024px) {
402
- .h3-sizing,
403
- .h-s-sizing {
404
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
405
- font-size: clamp(var(--h-s-font-size-min-desktop, 10px), var(--h-s-landscape, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-s-font-size-max-desktop, 180px));
406
- }
407
- }
408
- @media screen and (min-width: 1440px) {
409
- .h3-sizing,
410
- .h-s-sizing {
411
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
412
- font-size: clamp(var(--h-s-font-size-min-desktop, 10px), var(--h-s-desktop, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-s-font-size-max-desktop, 180px));
413
- letter-spacing: var(--h-s-letter-spacing);
414
- line-height: var(--h-s-line-height);
415
- }
416
- }
417
- @media (max-width: 768px) {
418
- .cmpl-text-editor-settings .h-s-fs-mobile {
419
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
420
- font-size: clamp(var(--h-s-font-size-min-desktop, 10px), var(--h-s-desktop, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-s-font-size-max-desktop, 180px));
421
- letter-spacing: var(--h-s-letter-spacing);
422
- line-height: var(--h-s-line-height);
423
- }
424
- }
425
- @media (min-width: 768px) and (max-width: 1024px) {
426
- .cmpl-text-editor-settings .h-s-fs-portrait {
427
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
428
- font-size: clamp(var(--h-s-font-size-min-desktop, 10px), var(--h-s-desktop, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-s-font-size-max-desktop, 180px));
429
- letter-spacing: var(--h-s-letter-spacing);
430
- line-height: var(--h-s-line-height);
431
- }
432
- }
433
- @media screen and (min-width: 1024px) {
434
- .cmpl-text-editor-settings .h-s-fs-desktop {
435
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
436
- font-size: clamp(var(--h-s-font-size-min-desktop, 10px), var(--h-s-desktop, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-s-font-size-max-desktop, 180px));
437
- letter-spacing: var(--h-s-letter-spacing);
438
- line-height: var(--h-s-line-height);
439
- }
440
- }
441
- .h4-sizing,
442
- .h-xs-sizing {
443
- letter-spacing: var(--h-xs-letter-spacing);
444
- line-height: var(--h-xs-line-height);
445
- font-family: var(--h-xs-font-family);
446
- --default-font-weight: var(--h-xs-default-font-weight);
447
- font-weight: var(--default-font-weight);
448
- }
449
- .h4-sizing strong,
450
- .h4-sizing b,
451
- .h-xs-sizing strong,
452
- .h-xs-sizing b {
453
- font-weight: var(--h-xs-bold-font-weight);
454
- }
455
- .h4-sizing,
456
- .h-xs-sizing {
457
- font-size: clamp(10px, 14 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
458
- font-size: clamp(var(--h-xs-font-size-min-mobile, 10px), var(--h-xs-mobile, 14) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xs-font-size-max-mobile, 180px));
459
- }
460
- @media screen and (min-width: 768px) {
461
- .h4-sizing,
462
- .h-xs-sizing {
463
- font-size: clamp(10px, 14 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
464
- font-size: clamp(var(--h-xs-font-size-min-mobile, 10px), var(--h-xs-portrait, 14) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xs-font-size-max-mobile, 180px));
465
- }
466
- }
467
- @media screen and (min-width: 1024px) {
468
- .h4-sizing,
469
- .h-xs-sizing {
470
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
471
- font-size: clamp(var(--h-xs-font-size-min-desktop, 10px), var(--h-xs-landscape, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xs-font-size-max-desktop, 180px));
472
- }
473
- }
474
- @media screen and (min-width: 1440px) {
475
- .h4-sizing,
476
- .h-xs-sizing {
477
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
478
- font-size: clamp(var(--h-xs-font-size-min-desktop, 10px), var(--h-xs-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xs-font-size-max-desktop, 180px));
479
- letter-spacing: var(--h-xs-letter-spacing);
480
- line-height: var(--h-xs-line-height);
481
- }
482
- }
483
- @media (max-width: 768px) {
484
- .cmpl-text-editor-settings .h-xs-fs-mobile {
485
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
486
- font-size: clamp(var(--h-xs-font-size-min-desktop, 10px), var(--h-xs-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xs-font-size-max-desktop, 180px));
487
- letter-spacing: var(--h-xs-letter-spacing);
488
- line-height: var(--h-xs-line-height);
489
- }
490
- }
491
- @media (min-width: 768px) and (max-width: 1024px) {
492
- .cmpl-text-editor-settings .h-xs-fs-portrait {
493
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
494
- font-size: clamp(var(--h-xs-font-size-min-desktop, 10px), var(--h-xs-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xs-font-size-max-desktop, 180px));
495
- letter-spacing: var(--h-xs-letter-spacing);
496
- line-height: var(--h-xs-line-height);
497
- }
498
- }
499
- @media screen and (min-width: 1024px) {
500
- .cmpl-text-editor-settings .h-xs-fs-desktop {
501
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
502
- font-size: clamp(var(--h-xs-font-size-min-desktop, 10px), var(--h-xs-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xs-font-size-max-desktop, 180px));
503
- letter-spacing: var(--h-xs-letter-spacing);
504
- line-height: var(--h-xs-line-height);
505
- }
506
- }
507
- .h5-sizing,
508
- .h-xxs-sizing {
509
- letter-spacing: var(--h-xxs-letter-spacing);
510
- line-height: var(--h-xxs-line-height);
511
- font-family: var(--h-xxs-font-family);
512
- --default-font-weight: var(--h-xxs-default-font-weight);
513
- font-weight: var(--default-font-weight);
514
- }
515
- .h5-sizing strong,
516
- .h5-sizing b,
517
- .h-xxs-sizing strong,
518
- .h-xxs-sizing b {
519
- font-weight: var(--h-xxs-bold-font-weight);
520
- }
521
- .h5-sizing,
522
- .h-xxs-sizing {
523
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
524
- font-size: clamp(var(--h-xxs-font-size-min-mobile, 10px), var(--h-xxs-mobile, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxs-font-size-max-mobile, 180px));
525
- }
526
- @media screen and (min-width: 768px) {
527
- .h5-sizing,
528
- .h-xxs-sizing {
529
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
530
- font-size: clamp(var(--h-xxs-font-size-min-mobile, 10px), var(--h-xxs-portrait, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxs-font-size-max-mobile, 180px));
531
- }
532
- }
533
- @media screen and (min-width: 1024px) {
534
- .h5-sizing,
535
- .h-xxs-sizing {
536
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
537
- font-size: clamp(var(--h-xxs-font-size-min-desktop, 10px), var(--h-xxs-landscape, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxs-font-size-max-desktop, 180px));
538
- }
539
- }
540
- @media screen and (min-width: 1440px) {
541
- .h5-sizing,
542
- .h-xxs-sizing {
543
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
544
- font-size: clamp(var(--h-xxs-font-size-min-desktop, 10px), var(--h-xxs-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxs-font-size-max-desktop, 180px));
545
- letter-spacing: var(--h-xxs-letter-spacing);
546
- line-height: var(--h-xxs-line-height);
547
- }
548
- }
549
- @media (max-width: 768px) {
550
- .cmpl-text-editor-settings .h-xxs-fs-mobile {
551
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
552
- font-size: clamp(var(--h-xxs-font-size-min-desktop, 10px), var(--h-xxs-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxs-font-size-max-desktop, 180px));
553
- letter-spacing: var(--h-xxs-letter-spacing);
554
- line-height: var(--h-xxs-line-height);
555
- }
556
- }
557
- @media (min-width: 768px) and (max-width: 1024px) {
558
- .cmpl-text-editor-settings .h-xxs-fs-portrait {
559
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
560
- font-size: clamp(var(--h-xxs-font-size-min-desktop, 10px), var(--h-xxs-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxs-font-size-max-desktop, 180px));
561
- letter-spacing: var(--h-xxs-letter-spacing);
562
- line-height: var(--h-xxs-line-height);
563
- }
564
- }
565
- @media screen and (min-width: 1024px) {
566
- .cmpl-text-editor-settings .h-xxs-fs-desktop {
567
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
568
- font-size: clamp(var(--h-xxs-font-size-min-desktop, 10px), var(--h-xxs-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxs-font-size-max-desktop, 180px));
569
- letter-spacing: var(--h-xxs-letter-spacing);
570
- line-height: var(--h-xxs-line-height);
571
- }
572
- }
573
- .h6-sizing,
574
- .h-xxxs-sizing {
575
- letter-spacing: var(--h-xxxs-letter-spacing);
576
- line-height: var(--h-xxxs-line-height);
577
- font-family: var(--h-xxxs-font-family);
578
- --default-font-weight: var(--h-xxxs-default-font-weight);
579
- font-weight: var(--default-font-weight);
580
- }
581
- .h6-sizing strong,
582
- .h6-sizing b,
583
- .h-xxxs-sizing strong,
584
- .h-xxxs-sizing b {
585
- font-weight: var(--h-xxxs-bold-font-weight);
586
- }
587
- .h6-sizing,
588
- .h-xxxs-sizing {
589
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
590
- font-size: clamp(var(--h-xxxs-font-size-min-mobile, 10px), var(--h-xxxs-mobile, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxxs-font-size-max-mobile, 180px));
591
- }
592
- @media screen and (min-width: 768px) {
593
- .h6-sizing,
594
- .h-xxxs-sizing {
595
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
596
- font-size: clamp(var(--h-xxxs-font-size-min-mobile, 10px), var(--h-xxxs-portrait, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxxs-font-size-max-mobile, 180px));
597
- }
598
- }
599
- @media screen and (min-width: 1024px) {
600
- .h6-sizing,
601
- .h-xxxs-sizing {
602
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
603
- font-size: clamp(var(--h-xxxs-font-size-min-desktop, 10px), var(--h-xxxs-landscape, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxxs-font-size-max-desktop, 180px));
604
- }
605
- }
606
- @media screen and (min-width: 1440px) {
607
- .h6-sizing,
608
- .h-xxxs-sizing {
609
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
610
- font-size: clamp(var(--h-xxxs-font-size-min-desktop, 10px), var(--h-xxxs-desktop, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxxs-font-size-max-desktop, 180px));
611
- letter-spacing: var(--h-xxxs-letter-spacing);
612
- line-height: var(--h-xxxs-line-height);
613
- }
614
- }
615
- @media (max-width: 768px) {
616
- .cmpl-text-editor-settings .h-xxxs-fs-mobile {
617
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
618
- font-size: clamp(var(--h-xxxs-font-size-min-desktop, 10px), var(--h-xxxs-desktop, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxxs-font-size-max-desktop, 180px));
619
- letter-spacing: var(--h-xxxs-letter-spacing);
620
- line-height: var(--h-xxxs-line-height);
621
- }
622
- }
623
- @media (min-width: 768px) and (max-width: 1024px) {
624
- .cmpl-text-editor-settings .h-xxxs-fs-portrait {
625
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
626
- font-size: clamp(var(--h-xxxs-font-size-min-desktop, 10px), var(--h-xxxs-desktop, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxxs-font-size-max-desktop, 180px));
627
- letter-spacing: var(--h-xxxs-letter-spacing);
628
- line-height: var(--h-xxxs-line-height);
629
- }
630
- }
631
- @media screen and (min-width: 1024px) {
632
- .cmpl-text-editor-settings .h-xxxs-fs-desktop {
633
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
634
- font-size: clamp(var(--h-xxxs-font-size-min-desktop, 10px), var(--h-xxxs-desktop, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--h-xxxs-font-size-max-desktop, 180px));
635
- letter-spacing: var(--h-xxxs-letter-spacing);
636
- line-height: var(--h-xxxs-line-height);
637
- }
638
- }
639
- .sh-xxxl-sizing {
640
- letter-spacing: var(--sh-xxxl-letter-spacing);
641
- line-height: var(--sh-xxxl-line-height);
642
- font-family: var(--sh-xxxl-font-family);
643
- --default-font-weight: var(--sh-xxxl-default-font-weight);
644
- font-weight: var(--default-font-weight);
645
- }
646
- .sh-xxxl-sizing strong,
647
- .sh-xxxl-sizing b {
648
- font-weight: var(--sh-xxxl-bold-font-weight);
649
- }
650
- .sh-xxxl-sizing {
651
- font-size: clamp(10px, 60 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
652
- font-size: clamp(var(--sh-xxxl-font-size-min-mobile, 10px), var(--sh-xxxl-mobile, 60) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxxl-font-size-max-mobile, 180px));
653
- }
654
- @media screen and (min-width: 1440px) {
655
- .sh-xxxl-sizing {
656
- font-size: clamp(10px, 70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
657
- font-size: clamp(var(--sh-xxxl-font-size-min-desktop, 10px), var(--sh-xxxl-desktop, 70) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxxl-font-size-max-desktop, 180px));
658
- letter-spacing: var(--sh-xxxl-letter-spacing);
659
- line-height: var(--sh-xxxl-line-height);
660
- }
661
- }
662
- .sh-xxl-sizing {
663
- letter-spacing: var(--sh-xxl-letter-spacing);
664
- line-height: var(--sh-xxl-line-height);
665
- font-family: var(--sh-xxl-font-family);
666
- --default-font-weight: var(--sh-xxl-default-font-weight);
667
- font-weight: var(--default-font-weight);
668
- }
669
- .sh-xxl-sizing strong,
670
- .sh-xxl-sizing b {
671
- font-weight: var(--sh-xxl-bold-font-weight);
672
- }
673
- .sh-xxl-sizing {
674
- font-size: clamp(10px, 40 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
675
- font-size: clamp(var(--sh-xxl-font-size-min-mobile, 10px), var(--sh-xxl-mobile, 40) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxl-font-size-max-mobile, 180px));
676
- }
677
- @media screen and (min-width: 1440px) {
678
- .sh-xxl-sizing {
679
- font-size: clamp(10px, 52 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
680
- font-size: clamp(var(--sh-xxl-font-size-min-desktop, 10px), var(--sh-xxl-desktop, 52) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxl-font-size-max-desktop, 180px));
681
- letter-spacing: var(--sh-xxl-letter-spacing);
682
- line-height: var(--sh-xxl-line-height);
683
- }
684
- }
685
- .sh1-sizing,
686
- .sh-xl-sizing {
687
- letter-spacing: var(--sh-xl-letter-spacing);
688
- line-height: var(--sh-xl-line-height);
689
- font-family: var(--sh-xl-font-family);
690
- --default-font-weight: var(--sh-xl-default-font-weight);
691
- font-weight: var(--default-font-weight);
692
- }
693
- .sh1-sizing strong,
694
- .sh1-sizing b,
695
- .sh-xl-sizing strong,
696
- .sh-xl-sizing b {
697
- font-weight: var(--sh-xl-bold-font-weight);
698
- }
699
- .sh1-sizing,
700
- .sh-xl-sizing {
701
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
702
- font-size: clamp(var(--sh-xl-font-size-min-mobile, 10px), var(--sh-xl-mobile, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xl-font-size-max-mobile, 180px));
703
- }
704
- @media screen and (min-width: 768px) {
705
- .sh1-sizing,
706
- .sh-xl-sizing {
707
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
708
- font-size: clamp(var(--sh-xl-font-size-min-mobile, 10px), var(--sh-xl-portrait, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xl-font-size-max-mobile, 180px));
709
- }
710
- }
711
- @media screen and (min-width: 1024px) {
712
- .sh1-sizing,
713
- .sh-xl-sizing {
714
- font-size: clamp(10px, 70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
715
- font-size: clamp(var(--sh-xl-font-size-min-desktop, 10px), var(--sh-xl-landscape, 70) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xl-font-size-max-desktop, 180px));
716
- }
717
- }
718
- @media screen and (min-width: 1440px) {
719
- .sh1-sizing,
720
- .sh-xl-sizing {
721
- font-size: clamp(10px, 52 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
722
- font-size: clamp(var(--sh-xl-font-size-min-desktop, 10px), var(--sh-xl-desktop, 52) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xl-font-size-max-desktop, 180px));
723
- letter-spacing: var(--sh-xl-letter-spacing);
724
- line-height: var(--sh-xl-line-height);
725
- }
726
- }
727
- @media (max-width: 768px) {
728
- .cmpl-text-editor-settings .sh-xl-fs-mobile {
729
- font-size: clamp(10px, 52 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
730
- font-size: clamp(var(--sh-xl-font-size-min-desktop, 10px), var(--sh-xl-desktop, 52) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xl-font-size-max-desktop, 180px));
731
- letter-spacing: var(--sh-xl-letter-spacing);
732
- line-height: var(--sh-xl-line-height);
733
- }
734
- }
735
- @media (min-width: 768px) and (max-width: 1024px) {
736
- .cmpl-text-editor-settings .sh-xl-fs-portrait {
737
- font-size: clamp(10px, 52 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
738
- font-size: clamp(var(--sh-xl-font-size-min-desktop, 10px), var(--sh-xl-desktop, 52) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xl-font-size-max-desktop, 180px));
739
- letter-spacing: var(--sh-xl-letter-spacing);
740
- line-height: var(--sh-xl-line-height);
741
- }
742
- }
743
- @media screen and (min-width: 1024px) {
744
- .cmpl-text-editor-settings .sh-xl-fs-desktop {
745
- font-size: clamp(10px, 52 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
746
- font-size: clamp(var(--sh-xl-font-size-min-desktop, 10px), var(--sh-xl-desktop, 52) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xl-font-size-max-desktop, 180px));
747
- letter-spacing: var(--sh-xl-letter-spacing);
748
- line-height: var(--sh-xl-line-height);
749
- }
750
- }
751
- .sh2-sizing,
752
- .sh-l-sizing {
753
- letter-spacing: var(--sh-l-letter-spacing);
754
- line-height: var(--sh-l-line-height);
755
- font-family: var(--sh-l-font-family);
756
- --default-font-weight: var(--sh-l-default-font-weight);
757
- font-weight: var(--default-font-weight);
758
- }
759
- .sh2-sizing strong,
760
- .sh2-sizing b,
761
- .sh-l-sizing strong,
762
- .sh-l-sizing b {
763
- font-weight: var(--sh-l-bold-font-weight);
764
- }
765
- .sh2-sizing,
766
- .sh-l-sizing {
767
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
768
- font-size: clamp(var(--sh-l-font-size-min-mobile, 10px), var(--sh-l-mobile, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-mobile, 180px));
769
- }
770
- @media screen and (min-width: 768px) {
771
- .sh2-sizing,
772
- .sh-l-sizing {
773
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
774
- font-size: clamp(var(--sh-l-font-size-min-mobile, 10px), var(--sh-l-portrait, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-mobile, 180px));
775
- }
776
- }
777
- @media screen and (min-width: 1024px) {
778
- .sh2-sizing,
779
- .sh-l-sizing {
780
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
781
- font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-landscape, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
782
- }
783
- }
784
- @media screen and (min-width: 1440px) {
785
- .sh2-sizing,
786
- .sh-l-sizing {
787
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
788
- font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-desktop, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
789
- letter-spacing: var(--sh-l-letter-spacing);
790
- line-height: var(--sh-l-line-height);
791
- }
792
- }
793
- @media (max-width: 768px) {
794
- .cmpl-text-editor-settings .sh-l-fs-mobile {
795
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
796
- font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-desktop, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
797
- letter-spacing: var(--sh-l-letter-spacing);
798
- line-height: var(--sh-l-line-height);
799
- }
800
- }
801
- @media (min-width: 768px) and (max-width: 1024px) {
802
- .cmpl-text-editor-settings .sh-l-fs-portrait {
803
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
804
- font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-desktop, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
805
- letter-spacing: var(--sh-l-letter-spacing);
806
- line-height: var(--sh-l-line-height);
807
- }
808
- }
809
- @media screen and (min-width: 1024px) {
810
- .cmpl-text-editor-settings .sh-l-fs-desktop {
811
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
812
- font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-desktop, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
813
- letter-spacing: var(--sh-l-letter-spacing);
814
- line-height: var(--sh-l-line-height);
815
- }
816
- }
817
- .sh3-sizing,
818
- .sh-m-sizing {
819
- letter-spacing: var(--sh-m-letter-spacing);
820
- line-height: var(--sh-m-line-height);
821
- font-family: var(--sh-m-font-family);
822
- --default-font-weight: var(--sh-m-default-font-weight);
823
- font-weight: var(--default-font-weight);
824
- }
825
- .sh3-sizing strong,
826
- .sh3-sizing b,
827
- .sh-m-sizing strong,
828
- .sh-m-sizing b {
829
- font-weight: var(--sh-m-bold-font-weight);
830
- }
831
- .sh3-sizing,
832
- .sh-m-sizing {
833
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
834
- font-size: clamp(var(--sh-m-font-size-min-mobile, 10px), var(--sh-m-mobile, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-m-font-size-max-mobile, 180px));
835
- }
836
- @media screen and (min-width: 768px) {
837
- .sh3-sizing,
838
- .sh-m-sizing {
839
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
840
- font-size: clamp(var(--sh-m-font-size-min-mobile, 10px), var(--sh-m-portrait, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-m-font-size-max-mobile, 180px));
841
- }
842
- }
843
- @media screen and (min-width: 1024px) {
844
- .sh3-sizing,
845
- .sh-m-sizing {
846
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
847
- font-size: clamp(var(--sh-m-font-size-min-desktop, 10px), var(--sh-m-landscape, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-m-font-size-max-desktop, 180px));
848
- }
849
- }
850
- @media screen and (min-width: 1440px) {
851
- .sh3-sizing,
852
- .sh-m-sizing {
853
- font-size: clamp(10px, 30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
854
- font-size: clamp(var(--sh-m-font-size-min-desktop, 10px), var(--sh-m-desktop, 30) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-m-font-size-max-desktop, 180px));
855
- letter-spacing: var(--sh-m-letter-spacing);
856
- line-height: var(--sh-m-line-height);
857
- }
858
- }
859
- @media (max-width: 768px) {
860
- .cmpl-text-editor-settings .sh-m-fs-mobile {
861
- font-size: clamp(10px, 30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
862
- font-size: clamp(var(--sh-m-font-size-min-desktop, 10px), var(--sh-m-desktop, 30) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-m-font-size-max-desktop, 180px));
863
- letter-spacing: var(--sh-m-letter-spacing);
864
- line-height: var(--sh-m-line-height);
865
- }
866
- }
867
- @media (min-width: 768px) and (max-width: 1024px) {
868
- .cmpl-text-editor-settings .sh-m-fs-portrait {
869
- font-size: clamp(10px, 30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
870
- font-size: clamp(var(--sh-m-font-size-min-desktop, 10px), var(--sh-m-desktop, 30) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-m-font-size-max-desktop, 180px));
871
- letter-spacing: var(--sh-m-letter-spacing);
872
- line-height: var(--sh-m-line-height);
873
- }
874
- }
875
- @media screen and (min-width: 1024px) {
876
- .cmpl-text-editor-settings .sh-m-fs-desktop {
877
- font-size: clamp(10px, 30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
878
- font-size: clamp(var(--sh-m-font-size-min-desktop, 10px), var(--sh-m-desktop, 30) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-m-font-size-max-desktop, 180px));
879
- letter-spacing: var(--sh-m-letter-spacing);
880
- line-height: var(--sh-m-line-height);
881
- }
882
- }
883
- .sh4-sizing,
884
- .sh-s-sizing {
885
- letter-spacing: var(--sh-s-letter-spacing);
886
- line-height: var(--sh-s-line-height);
887
- font-family: var(--sh-s-font-family);
888
- --default-font-weight: var(--sh-s-default-font-weight);
889
- font-weight: var(--default-font-weight);
890
- }
891
- .sh4-sizing strong,
892
- .sh4-sizing b,
893
- .sh-s-sizing strong,
894
- .sh-s-sizing b {
895
- font-weight: var(--sh-s-bold-font-weight);
896
- }
897
- .sh4-sizing,
898
- .sh-s-sizing {
899
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
900
- font-size: clamp(var(--sh-s-font-size-min-mobile, 10px), var(--sh-s-mobile, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-s-font-size-max-mobile, 180px));
901
- }
902
- @media screen and (min-width: 768px) {
903
- .sh4-sizing,
904
- .sh-s-sizing {
905
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
906
- font-size: clamp(var(--sh-s-font-size-min-mobile, 10px), var(--sh-s-portrait, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-s-font-size-max-mobile, 180px));
907
- }
908
- }
909
- @media screen and (min-width: 1024px) {
910
- .sh4-sizing,
911
- .sh-s-sizing {
912
- font-size: clamp(10px, 24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
913
- font-size: clamp(var(--sh-s-font-size-min-desktop, 10px), var(--sh-s-landscape, 24) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-s-font-size-max-desktop, 180px));
914
- }
915
- }
916
- @media screen and (min-width: 1440px) {
917
- .sh4-sizing,
918
- .sh-s-sizing {
919
- font-size: clamp(10px, 26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
920
- font-size: clamp(var(--sh-s-font-size-min-desktop, 10px), var(--sh-s-desktop, 26) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-s-font-size-max-desktop, 180px));
921
- letter-spacing: var(--sh-s-letter-spacing);
922
- line-height: var(--sh-s-line-height);
923
- }
924
- }
925
- @media (max-width: 768px) {
926
- .cmpl-text-editor-settings .sh-s-fs-mobile {
927
- font-size: clamp(10px, 26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
928
- font-size: clamp(var(--sh-s-font-size-min-desktop, 10px), var(--sh-s-desktop, 26) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-s-font-size-max-desktop, 180px));
929
- letter-spacing: var(--sh-s-letter-spacing);
930
- line-height: var(--sh-s-line-height);
931
- }
932
- }
933
- @media (min-width: 768px) and (max-width: 1024px) {
934
- .cmpl-text-editor-settings .sh-s-fs-portrait {
935
- font-size: clamp(10px, 26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
936
- font-size: clamp(var(--sh-s-font-size-min-desktop, 10px), var(--sh-s-desktop, 26) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-s-font-size-max-desktop, 180px));
937
- letter-spacing: var(--sh-s-letter-spacing);
938
- line-height: var(--sh-s-line-height);
939
- }
940
- }
941
- @media screen and (min-width: 1024px) {
942
- .cmpl-text-editor-settings .sh-s-fs-desktop {
943
- font-size: clamp(10px, 26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
944
- font-size: clamp(var(--sh-s-font-size-min-desktop, 10px), var(--sh-s-desktop, 26) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-s-font-size-max-desktop, 180px));
945
- letter-spacing: var(--sh-s-letter-spacing);
946
- line-height: var(--sh-s-line-height);
947
- }
948
- }
949
- .sh5-sizing,
950
- .sh-xs-sizing {
951
- letter-spacing: var(--sh-xs-letter-spacing);
952
- line-height: var(--sh-xs-line-height);
953
- font-family: var(--sh-xs-font-family);
954
- --default-font-weight: var(--sh-xs-default-font-weight);
955
- font-weight: var(--default-font-weight);
956
- }
957
- .sh5-sizing strong,
958
- .sh5-sizing b,
959
- .sh-xs-sizing strong,
960
- .sh-xs-sizing b {
961
- font-weight: var(--sh-xs-bold-font-weight);
962
- }
963
- .sh5-sizing,
964
- .sh-xs-sizing {
965
- font-size: clamp(10px, 14 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
966
- font-size: clamp(var(--sh-xs-font-size-min-mobile, 10px), var(--sh-xs-mobile, 14) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xs-font-size-max-mobile, 180px));
967
- }
968
- @media screen and (min-width: 768px) {
969
- .sh5-sizing,
970
- .sh-xs-sizing {
971
- font-size: clamp(10px, 14 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
972
- font-size: clamp(var(--sh-xs-font-size-min-mobile, 10px), var(--sh-xs-portrait, 14) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xs-font-size-max-mobile, 180px));
973
- }
974
- }
975
- @media screen and (min-width: 1024px) {
976
- .sh5-sizing,
977
- .sh-xs-sizing {
978
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
979
- font-size: clamp(var(--sh-xs-font-size-min-desktop, 10px), var(--sh-xs-landscape, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xs-font-size-max-desktop, 180px));
980
- }
981
- }
982
- @media screen and (min-width: 1440px) {
983
- .sh5-sizing,
984
- .sh-xs-sizing {
985
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
986
- font-size: clamp(var(--sh-xs-font-size-min-desktop, 10px), var(--sh-xs-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xs-font-size-max-desktop, 180px));
987
- letter-spacing: var(--sh-xs-letter-spacing);
988
- line-height: var(--sh-xs-line-height);
989
- }
990
- }
991
- @media (max-width: 768px) {
992
- .cmpl-text-editor-settings .sh-xs-fs-mobile {
993
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
994
- font-size: clamp(var(--sh-xs-font-size-min-desktop, 10px), var(--sh-xs-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xs-font-size-max-desktop, 180px));
995
- letter-spacing: var(--sh-xs-letter-spacing);
996
- line-height: var(--sh-xs-line-height);
997
- }
998
- }
999
- @media (min-width: 768px) and (max-width: 1024px) {
1000
- .cmpl-text-editor-settings .sh-xs-fs-portrait {
1001
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1002
- font-size: clamp(var(--sh-xs-font-size-min-desktop, 10px), var(--sh-xs-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xs-font-size-max-desktop, 180px));
1003
- letter-spacing: var(--sh-xs-letter-spacing);
1004
- line-height: var(--sh-xs-line-height);
1005
- }
1006
- }
1007
- @media screen and (min-width: 1024px) {
1008
- .cmpl-text-editor-settings .sh-xs-fs-desktop {
1009
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1010
- font-size: clamp(var(--sh-xs-font-size-min-desktop, 10px), var(--sh-xs-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xs-font-size-max-desktop, 180px));
1011
- letter-spacing: var(--sh-xs-letter-spacing);
1012
- line-height: var(--sh-xs-line-height);
1013
- }
1014
- }
1015
- .sh6-sizing,
1016
- .sh-xxs-sizing {
1017
- letter-spacing: var(--sh-xxs-letter-spacing);
1018
- line-height: var(--sh-xxs-line-height);
1019
- font-family: var(--sh-xxs-font-family);
1020
- --default-font-weight: var(--sh-xxs-default-font-weight);
1021
- font-weight: var(--default-font-weight);
1022
- }
1023
- .sh6-sizing strong,
1024
- .sh6-sizing b,
1025
- .sh-xxs-sizing strong,
1026
- .sh-xxs-sizing b {
1027
- font-weight: var(--sh-xxs-bold-font-weight);
1028
- }
1029
- .sh6-sizing,
1030
- .sh-xxs-sizing {
1031
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1032
- font-size: clamp(var(--sh-xxs-font-size-min-mobile, 10px), var(--sh-xxs-mobile, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxs-font-size-max-mobile, 180px));
1033
- }
1034
- @media screen and (min-width: 768px) {
1035
- .sh6-sizing,
1036
- .sh-xxs-sizing {
1037
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1038
- font-size: clamp(var(--sh-xxs-font-size-min-mobile, 10px), var(--sh-xxs-portrait, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxs-font-size-max-mobile, 180px));
1039
- }
1040
- }
1041
- @media screen and (min-width: 1024px) {
1042
- .sh6-sizing,
1043
- .sh-xxs-sizing {
1044
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1045
- font-size: clamp(var(--sh-xxs-font-size-min-desktop, 10px), var(--sh-xxs-landscape, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxs-font-size-max-desktop, 180px));
1046
- }
1047
- }
1048
- @media screen and (min-width: 1440px) {
1049
- .sh6-sizing,
1050
- .sh-xxs-sizing {
1051
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1052
- font-size: clamp(var(--sh-xxs-font-size-min-desktop, 10px), var(--sh-xxs-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxs-font-size-max-desktop, 180px));
1053
- letter-spacing: var(--sh-xxs-letter-spacing);
1054
- line-height: var(--sh-xxs-line-height);
1055
- }
1056
- }
1057
- @media (max-width: 768px) {
1058
- .cmpl-text-editor-settings .sh-xxs-fs-mobile {
1059
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1060
- font-size: clamp(var(--sh-xxs-font-size-min-desktop, 10px), var(--sh-xxs-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxs-font-size-max-desktop, 180px));
1061
- letter-spacing: var(--sh-xxs-letter-spacing);
1062
- line-height: var(--sh-xxs-line-height);
1063
- }
1064
- }
1065
- @media (min-width: 768px) and (max-width: 1024px) {
1066
- .cmpl-text-editor-settings .sh-xxs-fs-portrait {
1067
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1068
- font-size: clamp(var(--sh-xxs-font-size-min-desktop, 10px), var(--sh-xxs-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxs-font-size-max-desktop, 180px));
1069
- letter-spacing: var(--sh-xxs-letter-spacing);
1070
- line-height: var(--sh-xxs-line-height);
1071
- }
1072
- }
1073
- @media screen and (min-width: 1024px) {
1074
- .cmpl-text-editor-settings .sh-xxs-fs-desktop {
1075
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1076
- font-size: clamp(var(--sh-xxs-font-size-min-desktop, 10px), var(--sh-xxs-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-xxs-font-size-max-desktop, 180px));
1077
- letter-spacing: var(--sh-xxs-letter-spacing);
1078
- line-height: var(--sh-xxs-line-height);
1079
- }
1080
- }
1081
- .p-l-sizing {
1082
- line-height: var(--paragraph-large-line-height);
1083
- letter-spacing: var(--paragraph-large-letter-spacing);
1084
- font-family: var(--paragraph-large-font-family);
1085
- }
1086
- .p-l-sizing strong,
1087
- .p-l-sizing b {
1088
- font-weight: var(--paragraph-bold-font-weight);
1089
- }
1090
- .p-l-sizing:has(.font-tertiary) {
1091
- line-height: calc(var(--paragraph-line-height) * var(--global-line-height-multiplier-tertiary));
1092
- }
1093
- .p-l-sizing em {
1094
- font-style: italic;
1095
- }
1096
- .p-l-sizing {
1097
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1098
- font-size: clamp(var(--p-l-font-size-min-mobile, 10px), var(--p-l-mobile, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-l-font-size-max-mobile, 180px));
1099
- }
1100
- @media screen and (min-width: 768px) {
1101
- .p-l-sizing {
1102
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1103
- font-size: clamp(var(--p-l-font-size-min-mobile, 10px), var(--p-l-portrait, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-l-font-size-max-mobile, 180px));
1104
- }
1105
- }
1106
- @media screen and (min-width: 1024px) {
1107
- .p-l-sizing {
1108
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1109
- font-size: clamp(var(--p-l-font-size-min-desktop, 10px), var(--p-l-landscape, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-l-font-size-max-desktop, 180px));
1110
- }
1111
- }
1112
- @media screen and (min-width: 1440px) {
1113
- .p-l-sizing {
1114
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1115
- font-size: clamp(var(--p-l-font-size-min-desktop, 10px), var(--p-l-desktop, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-l-font-size-max-desktop, 180px));
1116
- line-height: var(--paragraph-large-line-height);
1117
- letter-spacing: var(--paragraph-large-letter-spacing);
1118
- }
1119
- }
1120
- @media (max-width: 768px) {
1121
- .cmpl-text-editor-settings .p-l-fs-mobile {
1122
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1123
- font-size: clamp(var(--p-l-font-size-min-desktop, 10px), var(--p-l-desktop, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-l-font-size-max-desktop, 180px));
1124
- line-height: var(--paragraph-large-line-height);
1125
- letter-spacing: var(--paragraph-large-letter-spacing);
1126
- }
1127
- }
1128
- @media (min-width: 768px) and (max-width: 1024px) {
1129
- .cmpl-text-editor-settings .p-l-fs-portrait {
1130
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1131
- font-size: clamp(var(--p-l-font-size-min-desktop, 10px), var(--p-l-desktop, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-l-font-size-max-desktop, 180px));
1132
- line-height: var(--paragraph-large-line-height);
1133
- letter-spacing: var(--paragraph-large-letter-spacing);
1134
- }
1135
- }
1136
- @media screen and (min-width: 1024px) {
1137
- .cmpl-text-editor-settings .p-l-fs-desktop {
1138
- font-size: clamp(10px, 20 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1139
- font-size: clamp(var(--p-l-font-size-min-desktop, 10px), var(--p-l-desktop, 20) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-l-font-size-max-desktop, 180px));
1140
- line-height: var(--paragraph-large-line-height);
1141
- letter-spacing: var(--paragraph-large-letter-spacing);
1142
- }
1143
- }
1144
- .p-sizing {
1145
- line-height: var(--paragraph-line-height);
1146
- letter-spacing: var(--paragraph-letter-spacing);
1147
- font-family: var(--paragraph-font-family);
1148
- --default-font-weight: var(--paragraph-default-font-weight);
1149
- font-weight: var(--default-font-weight);
1150
- }
1151
- .p-sizing strong,
1152
- .p-sizing b {
1153
- font-weight: var(--paragraph-bold-font-weight);
1154
- }
1155
- .p-sizing:has(.font-tertiary) {
1156
- line-height: calc(var(--paragraph-line-height) * var(--global-line-height-multiplier-tertiary));
1157
- }
1158
- .p-sizing em {
1159
- font-style: italic;
1160
- }
1161
- .p-sizing {
1162
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1163
- font-size: clamp(var(--p-font-size-min-mobile, 10px), var(--p-mobile, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-font-size-max-mobile, 180px));
1164
- }
1165
- @media screen and (min-width: 768px) {
1166
- .p-sizing {
1167
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1168
- font-size: clamp(var(--p-font-size-min-mobile, 10px), var(--p-portrait, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-font-size-max-mobile, 180px));
1169
- }
1170
- }
1171
- @media screen and (min-width: 1024px) {
1172
- .p-sizing {
1173
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1174
- font-size: clamp(var(--p-font-size-min-desktop, 10px), var(--p-landscape, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-font-size-max-desktop, 180px));
1175
- }
1176
- }
1177
- @media screen and (min-width: 1440px) {
1178
- .p-sizing {
1179
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1180
- font-size: clamp(var(--p-font-size-min-desktop, 10px), var(--p-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-font-size-max-desktop, 180px));
1181
- }
1182
- }
1183
- @media (max-width: 768px) {
1184
- .cmpl-text-editor-settings .p-m-fs-mobile {
1185
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1186
- font-size: clamp(var(--p-font-size-min-desktop, 10px), var(--p-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-font-size-max-desktop, 180px));
1187
- }
1188
- }
1189
- @media (min-width: 768px) and (max-width: 1024px) {
1190
- .cmpl-text-editor-settings .p-m-fs-portrait {
1191
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1192
- font-size: clamp(var(--p-font-size-min-desktop, 10px), var(--p-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-font-size-max-desktop, 180px));
1193
- }
1194
- }
1195
- @media screen and (min-width: 1024px) {
1196
- .cmpl-text-editor-settings .p-m-fs-desktop {
1197
- font-size: clamp(10px, 18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1198
- font-size: clamp(var(--p-font-size-min-desktop, 10px), var(--p-desktop, 18) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-font-size-max-desktop, 180px));
1199
- }
1200
- }
1201
- .p-s-sizing {
1202
- line-height: var(--paragraph-small-line-height);
1203
- letter-spacing: var(--paragraph-letter-spacing);
1204
- font-family: var(--paragraph-font-family);
1205
- }
1206
- .p-s-sizing strong,
1207
- .p-s-sizing b {
1208
- font-weight: var(--paragraph-bold-font-weight);
1209
- }
1210
- .p-s-sizing:has(.font-tertiary) {
1211
- line-height: calc(var(--paragraph-line-height) * var(--global-line-height-multiplier-tertiary));
1212
- }
1213
- .p-s-sizing em {
1214
- font-style: italic;
1215
- }
1216
- .p-s-sizing {
1217
- font-size: clamp(10px, 14 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1218
- font-size: clamp(var(--p-s-font-size-min-mobile, 10px), var(--p-s-mobile, 14) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-s-font-size-max-mobile, 180px));
1219
- }
1220
- @media screen and (min-width: 768px) {
1221
- .p-s-sizing {
1222
- font-size: clamp(10px, 14 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1223
- font-size: clamp(var(--p-s-font-size-min-mobile, 10px), var(--p-s-portrait, 14) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-s-font-size-max-mobile, 180px));
1224
- }
1225
- }
1226
- @media screen and (min-width: 1024px) {
1227
- .p-s-sizing {
1228
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1229
- font-size: clamp(var(--p-s-font-size-min-desktop, 10px), var(--p-s-landscape, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-s-font-size-max-desktop, 180px));
1230
- }
1231
- }
1232
- @media screen and (min-width: 1440px) {
1233
- .p-s-sizing {
1234
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1235
- font-size: clamp(var(--p-s-font-size-min-desktop, 10px), var(--p-s-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-s-font-size-max-desktop, 180px));
1236
- }
1237
- }
1238
- @media (max-width: 768px) {
1239
- .cmpl-text-editor-settings .p-s-fs-mobile {
1240
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1241
- font-size: clamp(var(--p-s-font-size-min-desktop, 10px), var(--p-s-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-s-font-size-max-desktop, 180px));
1242
- }
1243
- }
1244
- @media (min-width: 768px) and (max-width: 1024px) {
1245
- .cmpl-text-editor-settings .p-s-fs-portrait {
1246
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1247
- font-size: clamp(var(--p-s-font-size-min-desktop, 10px), var(--p-s-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-s-font-size-max-desktop, 180px));
1248
- }
1249
- }
1250
- @media screen and (min-width: 1024px) {
1251
- .cmpl-text-editor-settings .p-s-fs-desktop {
1252
- font-size: clamp(10px, 16 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1253
- font-size: clamp(var(--p-s-font-size-min-desktop, 10px), var(--p-s-desktop, 16) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-s-font-size-max-desktop, 180px));
1254
- }
1255
- }
1256
- .p-xs-sizing {
1257
- line-height: var(--paragraph-extra-small-line-height);
1258
- letter-spacing: var(--paragraph-letter-spacing);
1259
- font-family: var(--paragraph-font-family);
1260
- }
1261
- .p-xs-sizing strong,
1262
- .p-xs-sizing b {
1263
- font-weight: var(--paragraph-bold-font-weight);
1264
- }
1265
- .p-xs-sizing:has(.font-tertiary) {
1266
- line-height: calc(var(--paragraph-extra-small-line-height) * var(--global-line-height-multiplier-tertiary));
1267
- }
1268
- .p-xs-sizing em {
1269
- font-style: italic;
1270
- }
1271
- .p-xs-sizing {
1272
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1273
- font-size: clamp(var(--p-xs-font-size-min-mobile, 10px), var(--p-xs-mobile, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xs-font-size-max-mobile, 180px));
1274
- }
1275
- @media screen and (min-width: 768px) {
1276
- .p-xs-sizing {
1277
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1278
- font-size: clamp(var(--p-xs-font-size-min-mobile, 10px), var(--p-xs-portrait, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xs-font-size-max-mobile, 180px));
1279
- }
1280
- }
1281
- @media screen and (min-width: 1024px) {
1282
- .p-xs-sizing {
1283
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1284
- font-size: clamp(var(--p-xs-font-size-min-desktop, 10px), var(--p-xs-landscape, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xs-font-size-max-desktop, 180px));
1285
- }
1286
- }
1287
- @media screen and (min-width: 1440px) {
1288
- .p-xs-sizing {
1289
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1290
- font-size: clamp(var(--p-xs-font-size-min-desktop, 10px), var(--p-xs-desktop, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xs-font-size-max-desktop, 180px));
1291
- }
1292
- }
1293
- @media (max-width: 768px) {
1294
- .cmpl-text-editor-settings .p-xs-fs-mobile {
1295
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1296
- font-size: clamp(var(--p-xs-font-size-min-desktop, 10px), var(--p-xs-desktop, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xs-font-size-max-desktop, 180px));
1297
- }
1298
- }
1299
- @media (min-width: 768px) and (max-width: 1024px) {
1300
- .cmpl-text-editor-settings .p-xs-fs-portrait {
1301
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1302
- font-size: clamp(var(--p-xs-font-size-min-desktop, 10px), var(--p-xs-desktop, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xs-font-size-max-desktop, 180px));
1303
- }
1304
- }
1305
- @media screen and (min-width: 1024px) {
1306
- .cmpl-text-editor-settings .p-xs-fs-desktop {
1307
- font-size: clamp(10px, 12 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1308
- font-size: clamp(var(--p-xs-font-size-min-desktop, 10px), var(--p-xs-desktop, 12) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xs-font-size-max-desktop, 180px));
1309
- }
1310
- }
1311
- .p-xxs-sizing {
1312
- line-height: var(--paragraph-extra-extra-small-line-height);
1313
- letter-spacing: var(--paragraph-letter-spacing);
1314
- font-family: var(--paragraph-font-family);
1315
- }
1316
- .p-xxs-sizing strong,
1317
- .p-xxs-sizing b {
1318
- font-weight: var(--paragraph-bold-font-weight);
1319
- }
1320
- .p-xxs-sizing:has(.font-tertiary) {
1321
- line-height: calc(var(--paragraph-line-height) * var(--global-line-height-multiplier-tertiary));
1322
- }
1323
- .p-xxs-sizing em {
1324
- font-style: italic;
1325
- }
1326
- .p-xxs-sizing {
1327
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1328
- font-size: clamp(var(--p-xxs-font-size-min-mobile, 10px), var(--p-xxs-mobile, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxs-font-size-max-mobile, 180px));
1329
- }
1330
- @media screen and (min-width: 768px) {
1331
- .p-xxs-sizing {
1332
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1333
- font-size: clamp(var(--p-xxs-font-size-min-mobile, 10px), var(--p-xxs-portrait, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxs-font-size-max-mobile, 180px));
1334
- }
1335
- }
1336
- @media screen and (min-width: 1024px) {
1337
- .p-xxs-sizing {
1338
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1339
- font-size: clamp(var(--p-xxs-font-size-min-desktop, 10px), var(--p-xxs-landscape, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxs-font-size-max-desktop, 180px));
1340
- }
1341
- }
1342
- @media screen and (min-width: 1440px) {
1343
- .p-xxs-sizing {
1344
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1345
- font-size: clamp(var(--p-xxs-font-size-min-desktop, 10px), var(--p-xxs-desktop, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxs-font-size-max-desktop, 180px));
1346
- }
1347
- }
1348
- @media (max-width: 768px) {
1349
- .cmpl-text-editor-settings .p-xxs-fs-mobile {
1350
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1351
- font-size: clamp(var(--p-xxs-font-size-min-desktop, 10px), var(--p-xxs-desktop, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxs-font-size-max-desktop, 180px));
1352
- }
1353
- }
1354
- @media (min-width: 768px) and (max-width: 1024px) {
1355
- .cmpl-text-editor-settings .p-xxs-fs-portrait {
1356
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1357
- font-size: clamp(var(--p-xxs-font-size-min-desktop, 10px), var(--p-xxs-desktop, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxs-font-size-max-desktop, 180px));
1358
- }
1359
- }
1360
- @media screen and (min-width: 1024px) {
1361
- .cmpl-text-editor-settings .p-xxs-fs-desktop {
1362
- font-size: clamp(10px, 10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1363
- font-size: clamp(var(--p-xxs-font-size-min-desktop, 10px), var(--p-xxs-desktop, 10) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxs-font-size-max-desktop, 180px));
1364
- }
1365
- }
1366
- .p-xxxs-sizing {
1367
- line-height: var(--paragraph-line-height);
1368
- letter-spacing: var(--paragraph-letter-spacing);
1369
- font-family: var(--paragraph-font-family);
1370
- }
1371
- .p-xxxs-sizing strong,
1372
- .p-xxxs-sizing b {
1373
- font-weight: var(--paragraph-bold-font-weight);
1374
- }
1375
- .p-xxxs-sizing:has(.font-tertiary) {
1376
- line-height: calc(var(--paragraph-line-height) * var(--global-line-height-multiplier-tertiary));
1377
- }
1378
- .p-xxxs-sizing em {
1379
- font-style: italic;
1380
- }
1381
- .p-xxxs-sizing {
1382
- font-size: clamp(10px, var(--p-xxxs-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1383
- font-size: clamp(var(--p-xxxs-font-size-min-mobile, 10px), var(--p-xxxs-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxxs-font-size-max-mobile, 180px));
1384
- }
1385
- @media screen and (min-width: 768px) {
1386
- .p-xxxs-sizing {
1387
- font-size: clamp(10px, var(--p-xxxs-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1388
- font-size: clamp(var(--p-xxxs-font-size-min-mobile, 10px), var(--p-xxxs-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxxs-font-size-max-mobile, 180px));
1389
- }
1390
- }
1391
- @media screen and (min-width: 1024px) {
1392
- .p-xxxs-sizing {
1393
- font-size: clamp(10px, var(--p-xxxs-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1394
- font-size: clamp(var(--p-xxxs-font-size-min-desktop, 10px), var(--p-xxxs-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxxs-font-size-max-desktop, 180px));
1395
- }
1396
- }
1397
- @media screen and (min-width: 1440px) {
1398
- .p-xxxs-sizing {
1399
- font-size: clamp(10px, var(--p-xxxs-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1400
- font-size: clamp(var(--p-xxxs-font-size-min-desktop, 10px), var(--p-xxxs-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxxs-font-size-max-desktop, 180px));
1401
- }
1402
- }
1403
- @media (max-width: 768px) {
1404
- .cmpl-text-editor-settings .p-xxs-fs-mobile {
1405
- font-size: clamp(10px, var(--p-xxxs-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1406
- font-size: clamp(var(--p-xxxs-font-size-min-desktop, 10px), var(--p-xxxs-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxxs-font-size-max-desktop, 180px));
1407
- }
1408
- }
1409
- @media (min-width: 768px) and (max-width: 1024px) {
1410
- .cmpl-text-editor-settings .p-xxs-fs-portrait {
1411
- font-size: clamp(10px, var(--p-xxxs-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1412
- font-size: clamp(var(--p-xxxs-font-size-min-desktop, 10px), var(--p-xxxs-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxxs-font-size-max-desktop, 180px));
1413
- }
1414
- }
1415
- @media screen and (min-width: 1024px) {
1416
- .cmpl-text-editor-settings .p-xxs-fs-desktop {
1417
- font-size: clamp(10px, var(--p-xxxs-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1418
- font-size: clamp(var(--p-xxxs-font-size-min-desktop, 10px), var(--p-xxxs-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--p-xxxs-font-size-max-desktop, 180px));
1419
- }
1420
- }
1421
- @layer base-styles {
1422
- *,
1423
- *::before,
1424
- *::after {
1425
- box-sizing: border-box;
1426
- }
1427
- ul,
1428
- ol {
1429
- padding: 0;
1430
- }
1431
- body,
1432
- h1,
1433
- h2,
1434
- h3,
1435
- h4,
1436
- p,
1437
- ul,
1438
- ol,
1439
- li,
1440
- figure,
1441
- figcaption,
1442
- blockquote,
1443
- dl,
1444
- dd {
1445
- margin: 0;
1446
- }
1447
- *,
1448
- *::before,
1449
- *::after {
1450
- box-sizing: border-box;
1451
- }
1452
- .override-element-styles h1,
1453
- .override-element-styles h2,
1454
- .override-element-styles h3,
1455
- .override-element-styles h4,
1456
- .override-element-styles h5,
1457
- .override-element-styles h6 {
1458
- font-size: 0;
1459
- }
1460
- .standard-content-box-wysiwyg-editor h1,
1461
- .standard-content-box-wysiwyg-editor h2,
1462
- .standard-content-box-wysiwyg-editor h3,
1463
- .standard-content-box-wysiwyg-editor h4,
1464
- .standard-content-box-wysiwyg-editor h5,
1465
- .standard-content-box-wysiwyg-editor h6 {
1466
- margin-bottom: var(--heading-block-spacing);
1467
- }
1468
- .standard-content-box-wysiwyg-editor h1:last-child,
1469
- .standard-content-box-wysiwyg-editor h2:last-child,
1470
- .standard-content-box-wysiwyg-editor h3:last-child,
1471
- .standard-content-box-wysiwyg-editor h4:last-child,
1472
- .standard-content-box-wysiwyg-editor h5:last-child,
1473
- .standard-content-box-wysiwyg-editor h6:last-child {
1474
- margin-bottom: 0;
1475
- }
1476
- .standard-content-box-wysiwyg-editor p {
1477
- margin-bottom: var(--paragraph-block-spacing);
1478
- }
1479
- .standard-content-box-wysiwyg-editor p:last-child {
1480
- margin-bottom: 0;
1481
- }
1482
- p {
1483
- margin: 0;
1484
- }
1485
- a {
1486
- -webkit-text-decoration-skip: ink;
1487
- text-decoration-skip-ink: auto;
1488
- color: var(--link-colour);
1489
- -webkit-text-decoration: var(--link-decoration-style);
1490
- text-decoration: var(--link-decoration-style);
1491
- text-decoration-color: var(--link-decoration-colour);
1492
- }
1493
- a strong,
1494
- a b {
1495
- font-weight: var(--weight-bold);
1496
- }
1497
- a:hover {
1498
- cursor: pointer;
1499
- color: var(--link-colour-hover);
1500
- -webkit-text-decoration: var(--link-decoration-style-hover);
1501
- text-decoration: var(--link-decoration-style-hover);
1502
- text-decoration-color: var(--link-decoration-colour-hover);
1503
- }
1504
- blockquote {
1505
- margin: 0;
1506
- quotes: "\201c" "\201d" "\2018" "\2019";
1507
- font-weight: bold;
1508
- }
1509
- blockquote::before {
1510
- content: open-quote;
1511
- }
1512
- blockquote::after {
1513
- content: close-quote;
1514
- }
1515
- figure,
1516
- figcaption,
1517
- dl,
1518
- dd {
1519
- margin: 0;
1520
- }
1521
- q::before {
1522
- content: open-quote;
1523
- }
1524
- q::after {
1525
- content: close-quote;
1526
- }
1527
- ol {
1528
- list-style-type: decimal;
1529
- }
1530
- ul {
1531
- list-style-type: disc;
1532
- }
1533
- ol,
1534
- ul {
1535
- padding: 0;
1536
- margin: 0;
1537
- margin-bottom: var(--paragraph-block-spacing);
1538
- list-style-position: inside;
1539
- }
1540
- ol:last-child,
1541
- ul:last-child {
1542
- margin-bottom: 0;
1543
- }
1544
- ol li,
1545
- ul li {
1546
- margin-bottom: var(--list-item-block-spacing);
1547
- line-height: var(--list-item-line-height);
1548
- letter-spacing: var(--list-item-letter-spacing);
1549
- }
1550
- ol li:last-child,
1551
- ul li:last-child {
1552
- margin-bottom: 0;
1553
- }
1554
- html {
1555
- min-height: 100%;
1556
- }
1557
- html.lock-position {
1558
- overflow: hidden;
1559
- touch-action: none;
1560
- -webkit-overflow-scrolling: none;
1561
- overscroll-behavior: none;
1562
- }
1563
- .lazy-fade {
1564
- opacity: 0;
1565
- }
1566
- .loaded:not(.cmpl-block-animations) {
1567
- opacity: 1;
1568
- }
1569
- .js-enabled-hide {
1570
- display: none;
1571
- }
1572
- body {
1573
- display: flex;
1574
- flex-direction: column;
1575
- scroll-behavior: smooth;
1576
- text-rendering: optimizeSpeed;
1577
- margin: 0;
1578
- padding: 0;
1579
- height: auto;
1580
- min-height: 100vh;
1581
- position: relative;
1582
- background: var(--body-background-colour);
1583
- --default-text-colour-mobile: var(--theme-primary-text-colour);
1584
- color: var(--default-text-colour-mobile);
1585
- }
1586
- @media screen and (min-width: 1024px) {
1587
- body {
1588
- --default-text-colour-desktop: var(--theme-primary-text-colour);
1589
- color: var(--default-text-colour-desktop);
1590
- }
1591
- }
1592
- body.lock-position {
1593
- overflow: hidden;
1594
- touch-action: none;
1595
- -webkit-overflow-scrolling: none;
1596
- overscroll-behavior: none;
1597
- }
1598
- body.hide-nav .site-header {
1599
- display: none;
1600
- }
1601
- .body-container-background-image__picture,
1602
- .page-container-background-image__picture {
1603
- height: 100%;
1604
- position: var(--body-background-image-position-type);
1605
- inset: 0;
1606
- }
1607
- .body-container-background-image__image,
1608
- .page-container-background-image__image {
1609
- height: 100%;
1610
- -o-object-fit: var(--body-background-image-fit);
1611
- object-fit: var(--body-background-image-fit);
1612
- -o-object-position: var(--body-background-image-position);
1613
- object-position: var(--body-background-image-position);
1614
- }
1615
- .body-container-background-video {
1616
- position: fixed;
1617
- -o-object-fit: cover;
1618
- object-fit: cover;
1619
- inset: 0;
1620
- width: 100%;
1621
- }
1622
- img {
1623
- width: 100%;
1624
- height: auto;
1625
- display: block;
1626
- }
1627
- main {
1628
- height: auto;
1629
- width: 100%;
1630
- max-width: var(--global-content-max-width-main);
1631
- margin-inline: auto;
1632
- background-image: var(--main-container-background-image);
1633
- background-repeat: repeat;
1634
- }
1635
- header,
1636
- footer,
1637
- section {
1638
- width: 100%;
1639
- max-width: 100%;
1640
- }
1641
- .site-footer-block {
1642
- margin-top: auto;
1643
- }
1644
- .grecaptcha-badge {
1645
- z-index: 50;
1646
- bottom: 0 !important;
1647
- }
1648
- @media (prefers-reduced-motion: reduce) {
1649
- * {
1650
- animation-duration: 0.01ms !important;
1651
- animation-iteration-count: 1 !important;
1652
- transition-duration: 0.01ms !important;
1653
- scroll-behavior: auto !important;
1654
- transition: 0.01ms !important;
1655
- }
1656
- }
1657
- }
1658
- @layer components {
1659
- .cmpl-block-padding {
1660
- padding: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
1661
- padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-mobile-top, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-mobile-right, 0)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-mobile-bottom, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-mobile-left, 0));
1662
- }
1663
- @media screen and (min-width: 768px) {
1664
- .cmpl-block-padding {
1665
- padding: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
1666
- padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-portrait-top, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-portrait-right, 0)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-portrait-bottom, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-portrait-left, 0));
1667
- }
1668
- }
1669
- @media screen and (min-width: 1024px) {
1670
- .cmpl-block-padding {
1671
- padding: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
1672
- padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-desktop-top, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-desktop-right, 0)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-desktop-bottom, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-desktop-left, 0));
1673
- }
1674
- }
1675
- }
1676
- .cmpl-block-animations {
1677
- --slide-distance-default: 50;
1678
- }
1679
- @keyframes rotate {
1680
- from {
1681
- opacity: 1;
1682
- rotate: 0deg;
1683
- }
1684
- to {
1685
- opacity: 1;
1686
- rotate: 360deg;
1687
- }
1688
- }
1689
- @keyframes fade-in {
1690
- from {
1691
- opacity: 0;
1692
- }
1693
- 100% {
1694
- opacity: 1;
1695
- }
1696
- }
1697
- @keyframes fade-in-left {
1698
- from {
1699
- transform: translateX(calc(var(--slide-distance, var(--slide-distance-default)) * -1 / var(--design-reference) * var(--screen-width)));
1700
- opacity: 0;
1701
- }
1702
- 100% {
1703
- transform: translateX(0%);
1704
- opacity: 1;
1705
- }
1706
- }
1707
- @keyframes fade-in-right {
1708
- from {
1709
- transform: translateX(calc(var(--slide-distance, var(--slide-distance-default)) / var(--design-reference) * var(--screen-width)));
1710
- opacity: 0;
1711
- }
1712
- 100% {
1713
- transform: translateX(0%);
1714
- opacity: 1;
1715
- }
1716
- }
1717
- @keyframes fade-in-up {
1718
- from {
1719
- transform: translateY(calc(var(--slide-distance, var(--slide-distance-default)) / var(--design-reference) * var(--screen-width)));
1720
- opacity: 0;
1721
- }
1722
- 100% {
1723
- transform: translateY(0%);
1724
- opacity: 1;
1725
- }
1726
- }
1727
- @keyframes fade-in-down {
1728
- from {
1729
- transform: translateY(calc(var(--slide-distance, var(--slide-distance-default)) * -1 / var(--design-reference) * var(--screen-width)));
1730
- opacity: 0;
1731
- }
1732
- 100% {
1733
- transform: translateY(0%);
1734
- opacity: 1;
1735
- }
1736
- }
1737
- @keyframes scale-in {
1738
- from {
1739
- opacity: 1;
1740
- scale: 0;
1741
- }
1742
- 100% {
1743
- opacity: 1;
1744
- scale: 1;
1745
- }
1746
- }
1747
- @keyframes slide-reveal-right {
1748
- from {
1749
- clip-path: inset(0 100% 0 0);
1750
- opacity: 1;
1751
- }
1752
- 100% {
1753
- clip-path: inset(0 0 0 0);
1754
- opacity: 1;
1755
- }
1756
- }
1757
- @keyframes slide-reveal-left {
1758
- from {
1759
- clip-path: inset(0 0 0 100%);
1760
- opacity: 1;
1761
- }
1762
- 100% {
1763
- clip-path: inset(0 0 0 0);
1764
- opacity: 1;
1765
- }
1766
- }
1767
- @keyframes reveal-up {
1768
- from {
1769
- opacity: 1;
1770
- clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
1771
- }
1772
- 100% {
1773
- opacity: 1;
1774
- clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
1775
- }
1776
- }
1777
- @keyframes reveal-up-and-slide {
1778
- from {
1779
- opacity: 1;
1780
- transition: -100%;
1781
- clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
1782
- }
1783
- 100% {
1784
- opacity: 1;
1785
- transition: 0%;
1786
- clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
1787
- }
1788
- }
1789
- .cmpl-block-animations.trigger-animation {
1790
- animation: var(--animation-name) var(--animation-duration) var(--animation-delay) var(--animation-easing) var(--animation-repeat) var(--animation-fill-mode) var(--animation-direction);
1791
- animation-timeline: var(--animation-timeline);
1792
- }
1793
- @layer components {
1794
- .cmpl-block-settings {
1795
- min-height: calc(0 / var(--design-reference) * var(--screen-width));
1796
- min-height: calc(var(--block-min-height-mobile, 0) / var(--design-reference) * var(--screen-width));
1797
- height: auto;
1798
- height: var(--block-height-mobile, auto);
1799
- overflow: hidden;
1800
- overflow: var(--block-overflow, hidden);
1801
- border-radius: var(--block-border-radius);
1802
- position: relative;
1803
- position: var(--block-position-type, relative);
1804
- z-index: 5;
1805
- z-index: var(--block-z-index, 5);
1806
- top: auto;
1807
- top: initial;
1808
- top: var(--block-position-top, unset);
1809
- right: auto;
1810
- right: initial;
1811
- right: var(--block-position-right, unset);
1812
- bottom: auto;
1813
- bottom: initial;
1814
- bottom: var(--block-position-bottom, unset);
1815
- left: auto;
1816
- left: initial;
1817
- left: var(--block-position-left, unset);
1818
- background-color: transparent;
1819
- background-color: var(--block-background-colour, transparent);
1820
- pointer-events: all;
1821
- pointer-events: var(--block-pointer-events, all);
1822
- aspect-ratio: unset;
1823
- aspect-ratio: var(--block-aspect-ratio-mobile, unset);
1824
- }
1825
- .wp-admin .cmpl-block-settings {
1826
- position: relative;
1827
- }
1828
- @media screen and (min-width: 768px) {
1829
- .cmpl-block-settings {
1830
- height: auto;
1831
- height: var(--block-height-portrait, auto);
1832
- aspect-ratio: unset;
1833
- aspect-ratio: var(--block-aspect-ratio-portrait, unset);
1834
- min-height: calc(0 / var(--design-reference) * var(--screen-width));
1835
- min-height: calc(var(--block-min-height-portrait, 0) / var(--design-reference) * var(--screen-width));
1836
- }
1837
- }
1838
- @media screen and (min-width: 1024px) {
1839
- .cmpl-block-settings {
1840
- height: auto;
1841
- height: var(--block-height-desktop, auto);
1842
- aspect-ratio: unset;
1843
- aspect-ratio: var(--block-aspect-ratio, unset);
1844
- min-height: calc(0 / var(--design-reference) * var(--screen-width));
1845
- min-height: calc(var(--block-min-height-desktop, 0) / var(--design-reference) * var(--screen-width));
1846
- }
1847
- }
1848
- }
1849
- [class*=cmpl-cta-style-] {
1850
- border: medium none currentcolor;
1851
- border: initial;
1852
- line-height: 100%;
1853
- position: relative;
1854
- display: flex;
1855
- gap: 1em;
1856
- justify-content: center;
1857
- align-items: center;
1858
- text-decoration-line: none;
1859
- text-decoration-line: initial;
1860
- text-align: center;
1861
- transition: background-color 0.1s, border-colour 0.1s;
1862
- }
1863
- [class*=cmpl-cta-style-]:hover,
1864
- [class*=cmpl-cta-style-]:active,
1865
- [class*=cmpl-cta-style-]:focus {
1866
- cursor: pointer;
1867
- }
1868
- [class*=cmpl-cta-style-][disabled] {
1869
- cursor: not-allowed;
1870
- }
1871
- [class*=cmpl-cta-style-] {
1872
- margin-bottom: 0;
1873
- overflow: hidden;
1874
- }
1875
- .cmpl-cta-span {
1876
- width: 100%;
1877
- }
1878
- .cmpl-cta-icon {
1879
- width: 1em;
1880
- }
1881
- .cmpl-cta-style-1 {
1882
- justify-self: var(--cta-alignment);
1883
- justify-content: center;
1884
- justify-content: var(--cta-style-1-content-vertical-alignment, center);
1885
- background-image: var(--cta-style1-image-background);
1886
- background-size: var(--cta-style1-image-background-size);
1887
- background-repeat: var(--cta-style1-image-background-repeat);
1888
- background-color: var(--cta-style-1-mobile-background-colour);
1889
- color: var(--cta-style-1-mobile-colour);
1890
- }
1891
- .cmpl-cta-style-1 svg * {
1892
- fill: currentColor;
1893
- stroke: currentColor;
1894
- }
1895
- .cmpl-cta-style-1 {
1896
- border: var(--cta-style-1-border-width) solid var(--cta-style-1-mobile-border-colour);
1897
- border-radius: var(--cta-style-1-border-radius);
1898
- font-weight: var(--cta-style-1-font-weight);
1899
- letter-spacing: var(--cta-style-1-letter-spacing);
1900
- line-height: var(--cta-style-1-line-height);
1901
- font-family: var(--cta-style-1-font-family);
1902
- text-transform: var(--cta-style-1-text-transform);
1903
- font-style: var(--cta-style-1-font-style);
1904
- text-align: var(--cta-style-1-text-align);
1905
- -webkit-text-decoration: var(--cta-style-1-decoration-style);
1906
- text-decoration: var(--cta-style-1-decoration-style);
1907
- text-decoration-color: var(--cta-style-1-decoration-colour);
1908
- font-size: clamp(10px, var(--cta-style-1-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1909
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-1-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
1910
- min-width: var(--cta-style-1-min-width-mobile);
1911
- padding: calc(var(--cta-style-1-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-1-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
1912
- --box-shadow-offset-x: var(--cta-style-1-shadow-offset-x, 0);
1913
- --box-shadow-offset-y: var(--cta-style-1-shadow-offset-y, 0);
1914
- --box-shadow-blur: var(--cta-style-1-shadow-blur, 0);
1915
- --box-shadow-spread: var(--cta-style-1-shadow-radius, 0);
1916
- --box-shadow-colour: var(--cta-style-1-shadow-colour, 0);
1917
- --box-shadow-position: var(--cta-style-1-shadow-position, 0);
1918
- --box-shadow-hover-offset-x: var( --cta-style-1-shadow-offset-hover-x, 0 );
1919
- --box-shadow-hover-offset-y: var( --cta-style-1-shadow-offset-hover-y, 0 );
1920
- --box-shadow-hover-blur: var( --cta-style-1-shadow-hover-blur, 0 );
1921
- --box-shadow-hover-spread: var( --cta-style-1-shadow-hover-radius, 0 );
1922
- --box-shadow-hover-colour: var( --cta-style-1-shadow-hover-colour, 0 );
1923
- --box-shadow-hover-position: var( --cta-style-1-shadow-hover-position, 0 );
1924
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
1925
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
1926
- }
1927
- .cmpl-cta-style-1:hover {
1928
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
1929
- }
1930
- @media screen and (min-width: 768px) {
1931
- .cmpl-cta-style-1 {
1932
- font-size: clamp(10px, var(--cta-style-1-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1933
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-1-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
1934
- min-width: var(--cta-style-1-min-width-portrait);
1935
- padding: calc(var(--cta-style-1-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-1-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
1936
- background-color: var(--cta-style-1-background-colour);
1937
- border: var(--cta-style-1-border-width) solid var(--cta-style-1-border-colour);
1938
- color: var(--cta-style-1-colour);
1939
- }
1940
- .cmpl-cta-style-1 svg * {
1941
- fill: currentColor;
1942
- stroke: currentColor;
1943
- }
1944
- }
1945
- @media screen and (min-width: 1024px) {
1946
- .cmpl-cta-style-1 {
1947
- font-size: clamp(10px, var(--cta-style-1-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1948
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-1-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
1949
- min-width: var(--cta-style-1-min-width-landscape);
1950
- padding: calc(var(--cta-style-1-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-1-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
1951
- }
1952
- }
1953
- @media screen and (min-width: 1440px) {
1954
- .cmpl-cta-style-1 {
1955
- font-size: clamp(10px, var(--cta-style-1-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
1956
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-1-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
1957
- min-width: var(--cta-style-1-min-width-desktop);
1958
- padding: calc(var(--cta-style-1-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-1-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
1959
- }
1960
- }
1961
- @media (hover: hover) {
1962
- .cmpl-cta-style-1:hover {
1963
- -webkit-text-decoration: var(--cta-style-1-decoration-style-hover);
1964
- text-decoration: var(--cta-style-1-decoration-style-hover);
1965
- text-decoration-color: var(--cta-style-1-decoration-colour-hover);
1966
- border: var(--cta-style-1-border-width) solid var(--cta-style-1-mobile-hover-border-colour);
1967
- background-color: var(--cta-style-1-mobile-hover-background-colour);
1968
- color: var(--cta-style-1-mobile-hover-colour);
1969
- }
1970
- .cmpl-cta-style-1:hover svg * {
1971
- fill: currentColor;
1972
- stroke: currentColor;
1973
- }
1974
- }
1975
- @media (hover: hover) and (hover: none) {
1976
- .cmpl-cta-style-1:hover {
1977
- background-color: var(--cta-style-1-mobile-background-colour);
1978
- }
1979
- }
1980
- @media screen and (hover: hover) and (min-width: 768px) {
1981
- .cmpl-cta-style-1:hover {
1982
- background-color: var(--cta-style-1-hover-background-colour);
1983
- border: var(--cta-style-1-border-width) solid var(--cta-style-1-hover-border-colour);
1984
- color: var(--cta-style-1-hover-colour);
1985
- }
1986
- .cmpl-cta-style-1:hover svg * {
1987
- fill: currentColor;
1988
- stroke: currentColor;
1989
- }
1990
- }
1991
- .cmpl-cta-style-1:active {
1992
- color: var(--cta-style-1-active-colour);
1993
- background-color: var(--cta-style-1-active-background-colour);
1994
- border: var(--cta-style-1-border-width) solid var(--cta-style-1-active-border-colour);
1995
- }
1996
- .cmpl-cta-style-1--inactive,
1997
- .cmpl-cta-style-1.cta-style-inactive,
1998
- .cmpl-cta-style-1[disabled] {
1999
- color: var(--cta-style-1-inactive-colour);
2000
- background-color: var(--cta-style-1-inactive-background-colour);
2001
- border: var(--cta-style-1-border-width) solid var(--cta-style-1-inactive-border-colour);
2002
- }
2003
- .cmpl-cta-style-1--selected,
2004
- .cmpl-cta-style-1.cta-style-selected {
2005
- color: var(--cta-style-1-selected-colour);
2006
- background-color: var(--cta-style-1-selected-background-colour);
2007
- border: var(--cta-style-1-border-width) solid var(--cta-style-1-selected-border-colour);
2008
- }
2009
- .cmpl-cta-style-2 {
2010
- justify-self: var(--cta-alignment);
2011
- justify-content: center;
2012
- justify-content: var(--cta-style-2-content-vertical-alignment, center);
2013
- background-image: var(--cta-style2-image-background);
2014
- background-size: var(--cta-style2-image-background-size);
2015
- background-repeat: var(--cta-style2-image-background-repeat);
2016
- background-color: var(--cta-style-2-mobile-background-colour);
2017
- color: var(--cta-style-2-mobile-colour);
2018
- }
2019
- .cmpl-cta-style-2 svg * {
2020
- fill: currentColor;
2021
- stroke: currentColor;
2022
- }
2023
- .cmpl-cta-style-2 {
2024
- border: var(--cta-style-2-border-width) solid var(--cta-style-2-mobile-border-colour);
2025
- border-radius: var(--cta-style-2-border-radius);
2026
- font-weight: var(--cta-style-2-font-weight);
2027
- letter-spacing: var(--cta-style-2-letter-spacing);
2028
- line-height: var(--cta-style-2-line-height);
2029
- font-family: var(--cta-style-2-font-family);
2030
- text-transform: var(--cta-style-2-text-transform);
2031
- font-style: var(--cta-style-2-font-style);
2032
- text-align: var(--cta-style-2-text-align);
2033
- -webkit-text-decoration: var(--cta-style-2-decoration-style);
2034
- text-decoration: var(--cta-style-2-decoration-style);
2035
- text-decoration-color: var(--cta-style-2-decoration-colour);
2036
- font-size: clamp(10px, var(--cta-style-2-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2037
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-2-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2038
- min-width: var(--cta-style-2-min-width-mobile);
2039
- padding: calc(var(--cta-style-2-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-2-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
2040
- --box-shadow-offset-x: var(--cta-style-2-shadow-offset-x, 0);
2041
- --box-shadow-offset-y: var(--cta-style-2-shadow-offset-y, 0);
2042
- --box-shadow-blur: var(--cta-style-2-shadow-blur, 0);
2043
- --box-shadow-spread: var(--cta-style-2-shadow-radius, 0);
2044
- --box-shadow-colour: var(--cta-style-2-shadow-colour, 0);
2045
- --box-shadow-position: var(--cta-style-2-shadow-position, 0);
2046
- --box-shadow-hover-offset-x: var( --cta-style-2-shadow-offset-hover-x, 0 );
2047
- --box-shadow-hover-offset-y: var( --cta-style-2-shadow-offset-hover-y, 0 );
2048
- --box-shadow-hover-blur: var( --cta-style-2-shadow-hover-blur, 0 );
2049
- --box-shadow-hover-spread: var( --cta-style-2-shadow-hover-radius, 0 );
2050
- --box-shadow-hover-colour: var( --cta-style-2-shadow-hover-colour, 0 );
2051
- --box-shadow-hover-position: var( --cta-style-2-shadow-hover-position, 0 );
2052
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
2053
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
2054
- }
2055
- .cmpl-cta-style-2:hover {
2056
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
2057
- }
2058
- @media screen and (min-width: 768px) {
2059
- .cmpl-cta-style-2 {
2060
- font-size: clamp(10px, var(--cta-style-2-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2061
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-2-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2062
- min-width: var(--cta-style-2-min-width-portrait);
2063
- padding: calc(var(--cta-style-2-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-2-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
2064
- background-color: var(--cta-style-2-background-colour);
2065
- border: var(--cta-style-2-border-width) solid var(--cta-style-2-border-colour);
2066
- color: var(--cta-style-2-colour);
2067
- }
2068
- .cmpl-cta-style-2 svg * {
2069
- fill: currentColor;
2070
- stroke: currentColor;
2071
- }
2072
- }
2073
- @media screen and (min-width: 1024px) {
2074
- .cmpl-cta-style-2 {
2075
- font-size: clamp(10px, var(--cta-style-2-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2076
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-2-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2077
- min-width: var(--cta-style-2-min-width-landscape);
2078
- padding: calc(var(--cta-style-2-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-2-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
2079
- }
2080
- }
2081
- @media screen and (min-width: 1440px) {
2082
- .cmpl-cta-style-2 {
2083
- font-size: clamp(10px, var(--cta-style-2-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2084
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-2-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2085
- min-width: var(--cta-style-2-min-width-desktop);
2086
- padding: calc(var(--cta-style-2-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-2-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
2087
- }
2088
- }
2089
- @media (hover: hover) {
2090
- .cmpl-cta-style-2:hover {
2091
- -webkit-text-decoration: var(--cta-style-2-decoration-style-hover);
2092
- text-decoration: var(--cta-style-2-decoration-style-hover);
2093
- text-decoration-color: var(--cta-style-2-decoration-colour-hover);
2094
- border: var(--cta-style-2-border-width) solid var(--cta-style-2-mobile-hover-border-colour);
2095
- background-color: var(--cta-style-2-mobile-hover-background-colour);
2096
- color: var(--cta-style-2-mobile-hover-colour);
2097
- }
2098
- .cmpl-cta-style-2:hover svg * {
2099
- fill: currentColor;
2100
- stroke: currentColor;
2101
- }
2102
- }
2103
- @media (hover: hover) and (hover: none) {
2104
- .cmpl-cta-style-2:hover {
2105
- background-color: var(--cta-style-2-mobile-background-colour);
2106
- }
2107
- }
2108
- @media screen and (hover: hover) and (min-width: 768px) {
2109
- .cmpl-cta-style-2:hover {
2110
- background-color: var(--cta-style-2-hover-background-colour);
2111
- border: var(--cta-style-2-border-width) solid var(--cta-style-2-hover-border-colour);
2112
- color: var(--cta-style-2-hover-colour);
2113
- }
2114
- .cmpl-cta-style-2:hover svg * {
2115
- fill: currentColor;
2116
- stroke: currentColor;
2117
- }
2118
- }
2119
- .cmpl-cta-style-2:active {
2120
- color: var(--cta-style-2-active-colour);
2121
- background-color: var(--cta-style-2-active-background-colour);
2122
- border: var(--cta-style-2-border-width) solid var(--cta-style-2-active-border-colour);
2123
- }
2124
- .cmpl-cta-style-2--inactive,
2125
- .cmpl-cta-style-2.cta-style-inactive,
2126
- .cmpl-cta-style-2[disabled] {
2127
- color: var(--cta-style-2-inactive-colour);
2128
- background-color: var(--cta-style-2-inactive-background-colour);
2129
- border: var(--cta-style-2-border-width) solid var(--cta-style-2-inactive-border-colour);
2130
- }
2131
- .cmpl-cta-style-2--selected,
2132
- .cmpl-cta-style-2.cta-style-selected {
2133
- color: var(--cta-style-2-selected-colour);
2134
- background-color: var(--cta-style-2-selected-background-colour);
2135
- border: var(--cta-style-2-border-width) solid var(--cta-style-2-selected-border-colour);
2136
- }
2137
- .cmpl-cta-style-3 {
2138
- justify-self: var(--cta-alignment);
2139
- justify-content: center;
2140
- justify-content: var(--cta-style-3-content-vertical-alignment, center);
2141
- background-image: var(--cta-style3-image-background);
2142
- background-size: var(--cta-style3-image-background-size);
2143
- background-repeat: var(--cta-style3-image-background-repeat);
2144
- background-color: var(--cta-style-3-mobile-background-colour);
2145
- color: var(--cta-style-3-mobile-colour);
2146
- }
2147
- .cmpl-cta-style-3 svg * {
2148
- fill: currentColor;
2149
- stroke: currentColor;
2150
- }
2151
- .cmpl-cta-style-3 {
2152
- border: var(--cta-style-3-border-width) solid var(--cta-style-3-mobile-border-colour);
2153
- border-radius: var(--cta-style-3-border-radius);
2154
- font-weight: var(--cta-style-3-font-weight);
2155
- letter-spacing: var(--cta-style-3-letter-spacing);
2156
- line-height: var(--cta-style-3-line-height);
2157
- font-family: var(--cta-style-3-font-family);
2158
- text-transform: var(--cta-style-3-text-transform);
2159
- font-style: var(--cta-style-3-font-style);
2160
- text-align: var(--cta-style-3-text-align);
2161
- -webkit-text-decoration: var(--cta-style-3-decoration-style);
2162
- text-decoration: var(--cta-style-3-decoration-style);
2163
- text-decoration-color: var(--cta-style-3-decoration-colour);
2164
- font-size: clamp(10px, var(--cta-style-3-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2165
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-3-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2166
- min-width: var(--cta-style-3-min-width-mobile);
2167
- padding: calc(var(--cta-style-3-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-3-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
2168
- --box-shadow-offset-x: var(--cta-style-3-shadow-offset-x, 0);
2169
- --box-shadow-offset-y: var(--cta-style-3-shadow-offset-y, 0);
2170
- --box-shadow-blur: var(--cta-style-3-shadow-blur, 0);
2171
- --box-shadow-spread: var(--cta-style-3-shadow-radius, 0);
2172
- --box-shadow-colour: var(--cta-style-3-shadow-colour, 0);
2173
- --box-shadow-position: var(--cta-style-3-shadow-position, 0);
2174
- --box-shadow-hover-offset-x: var( --cta-style-3-shadow-offset-hover-x, 0 );
2175
- --box-shadow-hover-offset-y: var( --cta-style-3-shadow-offset-hover-y, 0 );
2176
- --box-shadow-hover-blur: var( --cta-style-3-shadow-hover-blur, 0 );
2177
- --box-shadow-hover-spread: var( --cta-style-3-shadow-hover-radius, 0 );
2178
- --box-shadow-hover-colour: var( --cta-style-3-shadow-hover-colour, 0 );
2179
- --box-shadow-hover-position: var( --cta-style-3-shadow-hover-position, 0 );
2180
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
2181
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
2182
- }
2183
- .cmpl-cta-style-3:hover {
2184
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
2185
- }
2186
- @media screen and (min-width: 768px) {
2187
- .cmpl-cta-style-3 {
2188
- font-size: clamp(10px, var(--cta-style-3-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2189
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-3-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2190
- min-width: var(--cta-style-3-min-width-portrait);
2191
- padding: calc(var(--cta-style-3-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-3-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
2192
- background-color: var(--cta-style-3-background-colour);
2193
- border: var(--cta-style-3-border-width) solid var(--cta-style-3-border-colour);
2194
- color: var(--cta-style-3-colour);
2195
- }
2196
- .cmpl-cta-style-3 svg * {
2197
- fill: currentColor;
2198
- stroke: currentColor;
2199
- }
2200
- }
2201
- @media screen and (min-width: 1024px) {
2202
- .cmpl-cta-style-3 {
2203
- font-size: clamp(10px, var(--cta-style-3-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2204
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-3-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2205
- min-width: var(--cta-style-3-min-width-landscape);
2206
- padding: calc(var(--cta-style-3-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-3-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
2207
- }
2208
- }
2209
- @media screen and (min-width: 1440px) {
2210
- .cmpl-cta-style-3 {
2211
- font-size: clamp(10px, var(--cta-style-3-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2212
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-3-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2213
- min-width: var(--cta-style-3-min-width-desktop);
2214
- padding: calc(var(--cta-style-3-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-3-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
2215
- }
2216
- }
2217
- @media (hover: hover) {
2218
- .cmpl-cta-style-3:hover {
2219
- -webkit-text-decoration: var(--cta-style-3-decoration-style-hover);
2220
- text-decoration: var(--cta-style-3-decoration-style-hover);
2221
- text-decoration-color: var(--cta-style-3-decoration-colour-hover);
2222
- border: var(--cta-style-3-border-width) solid var(--cta-style-3-mobile-hover-border-colour);
2223
- background-color: var(--cta-style-3-mobile-hover-background-colour);
2224
- color: var(--cta-style-3-mobile-hover-colour);
2225
- }
2226
- .cmpl-cta-style-3:hover svg * {
2227
- fill: currentColor;
2228
- stroke: currentColor;
2229
- }
2230
- }
2231
- @media (hover: hover) and (hover: none) {
2232
- .cmpl-cta-style-3:hover {
2233
- background-color: var(--cta-style-3-mobile-background-colour);
2234
- }
2235
- }
2236
- @media screen and (hover: hover) and (min-width: 768px) {
2237
- .cmpl-cta-style-3:hover {
2238
- background-color: var(--cta-style-3-hover-background-colour);
2239
- border: var(--cta-style-3-border-width) solid var(--cta-style-3-hover-border-colour);
2240
- color: var(--cta-style-3-hover-colour);
2241
- }
2242
- .cmpl-cta-style-3:hover svg * {
2243
- fill: currentColor;
2244
- stroke: currentColor;
2245
- }
2246
- }
2247
- .cmpl-cta-style-3:active {
2248
- color: var(--cta-style-3-active-colour);
2249
- background-color: var(--cta-style-3-active-background-colour);
2250
- border: var(--cta-style-3-border-width) solid var(--cta-style-3-active-border-colour);
2251
- }
2252
- .cmpl-cta-style-3--inactive,
2253
- .cmpl-cta-style-3.cta-style-inactive,
2254
- .cmpl-cta-style-3[disabled] {
2255
- color: var(--cta-style-3-inactive-colour);
2256
- background-color: var(--cta-style-3-inactive-background-colour);
2257
- border: var(--cta-style-3-border-width) solid var(--cta-style-3-inactive-border-colour);
2258
- }
2259
- .cmpl-cta-style-3--selected,
2260
- .cmpl-cta-style-3.cta-style-selected {
2261
- color: var(--cta-style-3-selected-colour);
2262
- background-color: var(--cta-style-3-selected-background-colour);
2263
- border: var(--cta-style-3-border-width) solid var(--cta-style-3-selected-border-colour);
2264
- }
2265
- .cmpl-cta-style-4 {
2266
- justify-self: var(--cta-alignment);
2267
- justify-content: center;
2268
- justify-content: var(--cta-style-4-content-vertical-alignment, center);
2269
- background-image: var(--cta-style4-image-background);
2270
- background-size: var(--cta-style4-image-background-size);
2271
- background-repeat: var(--cta-style4-image-background-repeat);
2272
- background-color: var(--cta-style-4-mobile-background-colour);
2273
- color: var(--cta-style-4-mobile-colour);
2274
- }
2275
- .cmpl-cta-style-4 svg * {
2276
- fill: currentColor;
2277
- stroke: currentColor;
2278
- }
2279
- .cmpl-cta-style-4 {
2280
- border: var(--cta-style-4-border-width) solid var(--cta-style-4-mobile-border-colour);
2281
- border-radius: var(--cta-style-4-border-radius);
2282
- font-weight: var(--cta-style-4-font-weight);
2283
- letter-spacing: var(--cta-style-4-letter-spacing);
2284
- line-height: var(--cta-style-4-line-height);
2285
- font-family: var(--cta-style-4-font-family);
2286
- text-transform: var(--cta-style-4-text-transform);
2287
- font-style: var(--cta-style-4-font-style);
2288
- text-align: var(--cta-style-4-text-align);
2289
- -webkit-text-decoration: var(--cta-style-4-decoration-style);
2290
- text-decoration: var(--cta-style-4-decoration-style);
2291
- text-decoration-color: var(--cta-style-4-decoration-colour);
2292
- font-size: clamp(10px, var(--cta-style-4-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2293
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-4-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2294
- min-width: var(--cta-style-4-min-width-mobile);
2295
- padding: calc(var(--cta-style-4-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-4-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
2296
- --box-shadow-offset-x: var(--cta-style-4-shadow-offset-x, 0);
2297
- --box-shadow-offset-y: var(--cta-style-4-shadow-offset-y, 0);
2298
- --box-shadow-blur: var(--cta-style-4-shadow-blur, 0);
2299
- --box-shadow-spread: var(--cta-style-4-shadow-radius, 0);
2300
- --box-shadow-colour: var(--cta-style-4-shadow-colour, 0);
2301
- --box-shadow-position: var(--cta-style-4-shadow-position, 0);
2302
- --box-shadow-hover-offset-x: var( --cta-style-4-shadow-offset-hover-x, 0 );
2303
- --box-shadow-hover-offset-y: var( --cta-style-4-shadow-offset-hover-y, 0 );
2304
- --box-shadow-hover-blur: var( --cta-style-4-shadow-hover-blur, 0 );
2305
- --box-shadow-hover-spread: var( --cta-style-4-shadow-hover-radius, 0 );
2306
- --box-shadow-hover-colour: var( --cta-style-4-shadow-hover-colour, 0 );
2307
- --box-shadow-hover-position: var( --cta-style-4-shadow-hover-position, 0 );
2308
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
2309
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
2310
- }
2311
- .cmpl-cta-style-4:hover {
2312
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
2313
- }
2314
- @media screen and (min-width: 768px) {
2315
- .cmpl-cta-style-4 {
2316
- font-size: clamp(10px, var(--cta-style-4-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2317
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-4-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2318
- min-width: var(--cta-style-4-min-width-portrait);
2319
- padding: calc(var(--cta-style-4-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-4-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
2320
- background-color: var(--cta-style-4-background-colour);
2321
- border: var(--cta-style-4-border-width) solid var(--cta-style-4-border-colour);
2322
- color: var(--cta-style-4-colour);
2323
- }
2324
- .cmpl-cta-style-4 svg * {
2325
- fill: currentColor;
2326
- stroke: currentColor;
2327
- }
2328
- }
2329
- @media screen and (min-width: 1024px) {
2330
- .cmpl-cta-style-4 {
2331
- font-size: clamp(10px, var(--cta-style-4-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2332
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-4-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2333
- min-width: var(--cta-style-4-min-width-landscape);
2334
- padding: calc(var(--cta-style-4-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-4-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
2335
- }
2336
- }
2337
- @media screen and (min-width: 1440px) {
2338
- .cmpl-cta-style-4 {
2339
- font-size: clamp(10px, var(--cta-style-4-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2340
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-4-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2341
- min-width: var(--cta-style-4-min-width-desktop);
2342
- padding: calc(var(--cta-style-4-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-4-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
2343
- }
2344
- }
2345
- @media (hover: hover) {
2346
- .cmpl-cta-style-4:hover {
2347
- -webkit-text-decoration: var(--cta-style-4-decoration-style-hover);
2348
- text-decoration: var(--cta-style-4-decoration-style-hover);
2349
- text-decoration-color: var(--cta-style-4-decoration-colour-hover);
2350
- border: var(--cta-style-4-border-width) solid var(--cta-style-4-mobile-hover-border-colour);
2351
- background-color: var(--cta-style-4-mobile-hover-background-colour);
2352
- color: var(--cta-style-4-mobile-hover-colour);
2353
- }
2354
- .cmpl-cta-style-4:hover svg * {
2355
- fill: currentColor;
2356
- stroke: currentColor;
2357
- }
2358
- }
2359
- @media (hover: hover) and (hover: none) {
2360
- .cmpl-cta-style-4:hover {
2361
- background-color: var(--cta-style-4-mobile-background-colour);
2362
- }
2363
- }
2364
- @media screen and (hover: hover) and (min-width: 768px) {
2365
- .cmpl-cta-style-4:hover {
2366
- background-color: var(--cta-style-4-hover-background-colour);
2367
- border: var(--cta-style-4-border-width) solid var(--cta-style-4-hover-border-colour);
2368
- color: var(--cta-style-4-hover-colour);
2369
- }
2370
- .cmpl-cta-style-4:hover svg * {
2371
- fill: currentColor;
2372
- stroke: currentColor;
2373
- }
2374
- }
2375
- .cmpl-cta-style-4:active {
2376
- color: var(--cta-style-4-active-colour);
2377
- background-color: var(--cta-style-4-active-background-colour);
2378
- border: var(--cta-style-4-border-width) solid var(--cta-style-4-active-border-colour);
2379
- }
2380
- .cmpl-cta-style-4--inactive,
2381
- .cmpl-cta-style-4.cta-style-inactive,
2382
- .cmpl-cta-style-4[disabled] {
2383
- color: var(--cta-style-4-inactive-colour);
2384
- background-color: var(--cta-style-4-inactive-background-colour);
2385
- border: var(--cta-style-4-border-width) solid var(--cta-style-4-inactive-border-colour);
2386
- }
2387
- .cmpl-cta-style-4--selected,
2388
- .cmpl-cta-style-4.cta-style-selected {
2389
- color: var(--cta-style-4-selected-colour);
2390
- background-color: var(--cta-style-4-selected-background-colour);
2391
- border: var(--cta-style-4-border-width) solid var(--cta-style-4-selected-border-colour);
2392
- }
2393
- .cmpl-cta-style-5 {
2394
- justify-self: var(--cta-alignment);
2395
- justify-content: center;
2396
- justify-content: var(--cta-style-5-content-vertical-alignment, center);
2397
- background-image: var(--cta-style5-image-background);
2398
- background-size: var(--cta-style5-image-background-size);
2399
- background-repeat: var(--cta-style5-image-background-repeat);
2400
- background-color: var(--cta-style-5-mobile-background-colour);
2401
- color: var(--cta-style-5-mobile-colour);
2402
- }
2403
- .cmpl-cta-style-5 svg * {
2404
- fill: currentColor;
2405
- stroke: currentColor;
2406
- }
2407
- .cmpl-cta-style-5 {
2408
- border: var(--cta-style-5-border-width) solid var(--cta-style-5-mobile-border-colour);
2409
- border-radius: var(--cta-style-5-border-radius);
2410
- font-weight: var(--cta-style-5-font-weight);
2411
- letter-spacing: var(--cta-style-5-letter-spacing);
2412
- line-height: var(--cta-style-5-line-height);
2413
- font-family: var(--cta-style-5-font-family);
2414
- text-transform: var(--cta-style-5-text-transform);
2415
- font-style: var(--cta-style-5-font-style);
2416
- text-align: var(--cta-style-5-text-align);
2417
- -webkit-text-decoration: var(--cta-style-5-decoration-style);
2418
- text-decoration: var(--cta-style-5-decoration-style);
2419
- text-decoration-color: var(--cta-style-5-decoration-colour);
2420
- font-size: clamp(10px, var(--cta-style-5-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2421
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-5-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2422
- min-width: var(--cta-style-5-min-width-mobile);
2423
- padding: calc(var(--cta-style-5-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-5-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
2424
- --box-shadow-offset-x: var(--cta-style-5-shadow-offset-x, 0);
2425
- --box-shadow-offset-y: var(--cta-style-5-shadow-offset-y, 0);
2426
- --box-shadow-blur: var(--cta-style-5-shadow-blur, 0);
2427
- --box-shadow-spread: var(--cta-style-5-shadow-radius, 0);
2428
- --box-shadow-colour: var(--cta-style-5-shadow-colour, 0);
2429
- --box-shadow-position: var(--cta-style-5-shadow-position, 0);
2430
- --box-shadow-hover-offset-x: var( --cta-style-5-shadow-offset-hover-x, 0 );
2431
- --box-shadow-hover-offset-y: var( --cta-style-5-shadow-offset-hover-y, 0 );
2432
- --box-shadow-hover-blur: var( --cta-style-5-shadow-hover-blur, 0 );
2433
- --box-shadow-hover-spread: var( --cta-style-5-shadow-hover-radius, 0 );
2434
- --box-shadow-hover-colour: var( --cta-style-5-shadow-hover-colour, 0 );
2435
- --box-shadow-hover-position: var( --cta-style-5-shadow-hover-position, 0 );
2436
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
2437
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
2438
- }
2439
- .cmpl-cta-style-5:hover {
2440
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
2441
- }
2442
- @media screen and (min-width: 768px) {
2443
- .cmpl-cta-style-5 {
2444
- font-size: clamp(10px, var(--cta-style-5-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2445
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-5-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2446
- min-width: var(--cta-style-5-min-width-portrait);
2447
- padding: calc(var(--cta-style-5-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-5-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
2448
- background-color: var(--cta-style-5-background-colour);
2449
- border: var(--cta-style-5-border-width) solid var(--cta-style-5-border-colour);
2450
- color: var(--cta-style-5-colour);
2451
- }
2452
- .cmpl-cta-style-5 svg * {
2453
- fill: currentColor;
2454
- stroke: currentColor;
2455
- }
2456
- }
2457
- @media screen and (min-width: 1024px) {
2458
- .cmpl-cta-style-5 {
2459
- font-size: clamp(10px, var(--cta-style-5-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2460
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-5-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2461
- min-width: var(--cta-style-5-min-width-landscape);
2462
- padding: calc(var(--cta-style-5-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-5-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
2463
- }
2464
- }
2465
- @media screen and (min-width: 1440px) {
2466
- .cmpl-cta-style-5 {
2467
- font-size: clamp(10px, var(--cta-style-5-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2468
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-5-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2469
- min-width: var(--cta-style-5-min-width-desktop);
2470
- padding: calc(var(--cta-style-5-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-5-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
2471
- }
2472
- }
2473
- @media (hover: hover) {
2474
- .cmpl-cta-style-5:hover {
2475
- -webkit-text-decoration: var(--cta-style-5-decoration-style-hover);
2476
- text-decoration: var(--cta-style-5-decoration-style-hover);
2477
- text-decoration-color: var(--cta-style-5-decoration-colour-hover);
2478
- border: var(--cta-style-5-border-width) solid var(--cta-style-5-mobile-hover-border-colour);
2479
- background-color: var(--cta-style-5-mobile-hover-background-colour);
2480
- color: var(--cta-style-5-mobile-hover-colour);
2481
- }
2482
- .cmpl-cta-style-5:hover svg * {
2483
- fill: currentColor;
2484
- stroke: currentColor;
2485
- }
2486
- }
2487
- @media (hover: hover) and (hover: none) {
2488
- .cmpl-cta-style-5:hover {
2489
- background-color: var(--cta-style-5-mobile-background-colour);
2490
- }
2491
- }
2492
- @media screen and (hover: hover) and (min-width: 768px) {
2493
- .cmpl-cta-style-5:hover {
2494
- background-color: var(--cta-style-5-hover-background-colour);
2495
- border: var(--cta-style-5-border-width) solid var(--cta-style-5-hover-border-colour);
2496
- color: var(--cta-style-5-hover-colour);
2497
- }
2498
- .cmpl-cta-style-5:hover svg * {
2499
- fill: currentColor;
2500
- stroke: currentColor;
2501
- }
2502
- }
2503
- .cmpl-cta-style-5:active {
2504
- color: var(--cta-style-5-active-colour);
2505
- background-color: var(--cta-style-5-active-background-colour);
2506
- border: var(--cta-style-5-border-width) solid var(--cta-style-5-active-border-colour);
2507
- }
2508
- .cmpl-cta-style-5--inactive,
2509
- .cmpl-cta-style-5.cta-style-inactive,
2510
- .cmpl-cta-style-5[disabled] {
2511
- color: var(--cta-style-5-inactive-colour);
2512
- background-color: var(--cta-style-5-inactive-background-colour);
2513
- border: var(--cta-style-5-border-width) solid var(--cta-style-5-inactive-border-colour);
2514
- }
2515
- .cmpl-cta-style-5--selected,
2516
- .cmpl-cta-style-5.cta-style-selected {
2517
- color: var(--cta-style-5-selected-colour);
2518
- background-color: var(--cta-style-5-selected-background-colour);
2519
- border: var(--cta-style-5-border-width) solid var(--cta-style-5-selected-border-colour);
2520
- }
2521
- .cmpl-cta-style-6 {
2522
- justify-self: var(--cta-alignment);
2523
- justify-content: center;
2524
- justify-content: var(--cta-style-6-content-vertical-alignment, center);
2525
- background-image: var(--cta-style6-image-background);
2526
- background-size: var(--cta-style6-image-background-size);
2527
- background-repeat: var(--cta-style6-image-background-repeat);
2528
- background-color: var(--cta-style-6-mobile-background-colour);
2529
- color: var(--cta-style-6-mobile-colour);
2530
- }
2531
- .cmpl-cta-style-6 svg * {
2532
- fill: currentColor;
2533
- stroke: currentColor;
2534
- }
2535
- .cmpl-cta-style-6 {
2536
- border: var(--cta-style-6-border-width) solid var(--cta-style-6-mobile-border-colour);
2537
- border-radius: var(--cta-style-6-border-radius);
2538
- font-weight: var(--cta-style-6-font-weight);
2539
- letter-spacing: var(--cta-style-6-letter-spacing);
2540
- line-height: var(--cta-style-6-line-height);
2541
- font-family: var(--cta-style-6-font-family);
2542
- text-transform: var(--cta-style-6-text-transform);
2543
- font-style: var(--cta-style-6-font-style);
2544
- text-align: var(--cta-style-6-text-align);
2545
- -webkit-text-decoration: var(--cta-style-6-decoration-style);
2546
- text-decoration: var(--cta-style-6-decoration-style);
2547
- text-decoration-color: var(--cta-style-6-decoration-colour);
2548
- font-size: clamp(10px, var(--cta-style-6-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2549
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-6-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2550
- min-width: var(--cta-style-6-min-width-mobile);
2551
- padding: calc(var(--cta-style-6-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-6-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
2552
- --box-shadow-offset-x: var(--cta-style-6-shadow-offset-x, 0);
2553
- --box-shadow-offset-y: var(--cta-style-6-shadow-offset-y, 0);
2554
- --box-shadow-blur: var(--cta-style-6-shadow-blur, 0);
2555
- --box-shadow-spread: var(--cta-style-6-shadow-radius, 0);
2556
- --box-shadow-colour: var(--cta-style-6-shadow-colour, 0);
2557
- --box-shadow-position: var(--cta-style-6-shadow-position, 0);
2558
- --box-shadow-hover-offset-x: var( --cta-style-6-shadow-offset-hover-x, 0 );
2559
- --box-shadow-hover-offset-y: var( --cta-style-6-shadow-offset-hover-y, 0 );
2560
- --box-shadow-hover-blur: var( --cta-style-6-shadow-hover-blur, 0 );
2561
- --box-shadow-hover-spread: var( --cta-style-6-shadow-hover-radius, 0 );
2562
- --box-shadow-hover-colour: var( --cta-style-6-shadow-hover-colour, 0 );
2563
- --box-shadow-hover-position: var( --cta-style-6-shadow-hover-position, 0 );
2564
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
2565
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
2566
- }
2567
- .cmpl-cta-style-6:hover {
2568
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
2569
- }
2570
- @media screen and (min-width: 768px) {
2571
- .cmpl-cta-style-6 {
2572
- font-size: clamp(10px, var(--cta-style-6-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2573
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-6-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2574
- min-width: var(--cta-style-6-min-width-portrait);
2575
- padding: calc(var(--cta-style-6-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-6-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
2576
- background-color: var(--cta-style-6-background-colour);
2577
- border: var(--cta-style-6-border-width) solid var(--cta-style-6-border-colour);
2578
- color: var(--cta-style-6-colour);
2579
- }
2580
- .cmpl-cta-style-6 svg * {
2581
- fill: currentColor;
2582
- stroke: currentColor;
2583
- }
2584
- }
2585
- @media screen and (min-width: 1024px) {
2586
- .cmpl-cta-style-6 {
2587
- font-size: clamp(10px, var(--cta-style-6-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2588
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-6-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2589
- min-width: var(--cta-style-6-min-width-landscape);
2590
- padding: calc(var(--cta-style-6-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-6-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
2591
- }
2592
- }
2593
- @media screen and (min-width: 1440px) {
2594
- .cmpl-cta-style-6 {
2595
- font-size: clamp(10px, var(--cta-style-6-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2596
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-6-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2597
- min-width: var(--cta-style-6-min-width-desktop);
2598
- padding: calc(var(--cta-style-6-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-6-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
2599
- }
2600
- }
2601
- @media (hover: hover) {
2602
- .cmpl-cta-style-6:hover {
2603
- -webkit-text-decoration: var(--cta-style-6-decoration-style-hover);
2604
- text-decoration: var(--cta-style-6-decoration-style-hover);
2605
- text-decoration-color: var(--cta-style-6-decoration-colour-hover);
2606
- border: var(--cta-style-6-border-width) solid var(--cta-style-6-mobile-hover-border-colour);
2607
- background-color: var(--cta-style-6-mobile-hover-background-colour);
2608
- color: var(--cta-style-6-mobile-hover-colour);
2609
- }
2610
- .cmpl-cta-style-6:hover svg * {
2611
- fill: currentColor;
2612
- stroke: currentColor;
2613
- }
2614
- }
2615
- @media (hover: hover) and (hover: none) {
2616
- .cmpl-cta-style-6:hover {
2617
- background-color: var(--cta-style-6-mobile-background-colour);
2618
- }
2619
- }
2620
- @media screen and (hover: hover) and (min-width: 768px) {
2621
- .cmpl-cta-style-6:hover {
2622
- background-color: var(--cta-style-6-hover-background-colour);
2623
- border: var(--cta-style-6-border-width) solid var(--cta-style-6-hover-border-colour);
2624
- color: var(--cta-style-6-hover-colour);
2625
- }
2626
- .cmpl-cta-style-6:hover svg * {
2627
- fill: currentColor;
2628
- stroke: currentColor;
2629
- }
2630
- }
2631
- .cmpl-cta-style-6:active {
2632
- color: var(--cta-style-6-active-colour);
2633
- background-color: var(--cta-style-6-active-background-colour);
2634
- border: var(--cta-style-6-border-width) solid var(--cta-style-6-active-border-colour);
2635
- }
2636
- .cmpl-cta-style-6--inactive,
2637
- .cmpl-cta-style-6.cta-style-inactive,
2638
- .cmpl-cta-style-6[disabled] {
2639
- color: var(--cta-style-6-inactive-colour);
2640
- background-color: var(--cta-style-6-inactive-background-colour);
2641
- border: var(--cta-style-6-border-width) solid var(--cta-style-6-inactive-border-colour);
2642
- }
2643
- .cmpl-cta-style-6--selected,
2644
- .cmpl-cta-style-6.cta-style-selected {
2645
- color: var(--cta-style-6-selected-colour);
2646
- background-color: var(--cta-style-6-selected-background-colour);
2647
- border: var(--cta-style-6-border-width) solid var(--cta-style-6-selected-border-colour);
2648
- }
2649
- .cmpl-cta-style-7 {
2650
- justify-self: var(--cta-alignment);
2651
- justify-content: center;
2652
- justify-content: var(--cta-style-7-content-vertical-alignment, center);
2653
- background-image: var(--cta-style7-image-background);
2654
- background-size: var(--cta-style7-image-background-size);
2655
- background-repeat: var(--cta-style7-image-background-repeat);
2656
- background-color: var(--cta-style-7-mobile-background-colour);
2657
- color: var(--cta-style-7-mobile-colour);
2658
- }
2659
- .cmpl-cta-style-7 svg * {
2660
- fill: currentColor;
2661
- stroke: currentColor;
2662
- }
2663
- .cmpl-cta-style-7 {
2664
- border: var(--cta-style-7-border-width) solid var(--cta-style-7-mobile-border-colour);
2665
- border-radius: var(--cta-style-7-border-radius);
2666
- font-weight: var(--cta-style-7-font-weight);
2667
- letter-spacing: var(--cta-style-7-letter-spacing);
2668
- line-height: var(--cta-style-7-line-height);
2669
- font-family: var(--cta-style-7-font-family);
2670
- text-transform: var(--cta-style-7-text-transform);
2671
- font-style: var(--cta-style-7-font-style);
2672
- text-align: var(--cta-style-7-text-align);
2673
- -webkit-text-decoration: var(--cta-style-7-decoration-style);
2674
- text-decoration: var(--cta-style-7-decoration-style);
2675
- text-decoration-color: var(--cta-style-7-decoration-colour);
2676
- font-size: clamp(10px, var(--cta-style-7-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2677
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-7-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2678
- min-width: var(--cta-style-7-min-width-mobile);
2679
- padding: calc(var(--cta-style-7-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-7-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
2680
- --box-shadow-offset-x: var(--cta-style-7-shadow-offset-x, 0);
2681
- --box-shadow-offset-y: var(--cta-style-7-shadow-offset-y, 0);
2682
- --box-shadow-blur: var(--cta-style-7-shadow-blur, 0);
2683
- --box-shadow-spread: var(--cta-style-7-shadow-radius, 0);
2684
- --box-shadow-colour: var(--cta-style-7-shadow-colour, 0);
2685
- --box-shadow-position: var(--cta-style-7-shadow-position, 0);
2686
- --box-shadow-hover-offset-x: var( --cta-style-7-shadow-offset-hover-x, 0 );
2687
- --box-shadow-hover-offset-y: var( --cta-style-7-shadow-offset-hover-y, 0 );
2688
- --box-shadow-hover-blur: var( --cta-style-7-shadow-hover-blur, 0 );
2689
- --box-shadow-hover-spread: var( --cta-style-7-shadow-hover-radius, 0 );
2690
- --box-shadow-hover-colour: var( --cta-style-7-shadow-hover-colour, 0 );
2691
- --box-shadow-hover-position: var( --cta-style-7-shadow-hover-position, 0 );
2692
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
2693
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
2694
- }
2695
- .cmpl-cta-style-7:hover {
2696
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
2697
- }
2698
- @media screen and (min-width: 768px) {
2699
- .cmpl-cta-style-7 {
2700
- font-size: clamp(10px, var(--cta-style-7-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2701
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-7-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2702
- min-width: var(--cta-style-7-min-width-portrait);
2703
- padding: calc(var(--cta-style-7-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-7-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
2704
- background-color: var(--cta-style-7-background-colour);
2705
- border: var(--cta-style-7-border-width) solid var(--cta-style-7-border-colour);
2706
- color: var(--cta-style-7-colour);
2707
- }
2708
- .cmpl-cta-style-7 svg * {
2709
- fill: currentColor;
2710
- stroke: currentColor;
2711
- }
2712
- }
2713
- @media screen and (min-width: 1024px) {
2714
- .cmpl-cta-style-7 {
2715
- font-size: clamp(10px, var(--cta-style-7-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2716
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-7-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2717
- min-width: var(--cta-style-7-min-width-landscape);
2718
- padding: calc(var(--cta-style-7-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-7-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
2719
- }
2720
- }
2721
- @media screen and (min-width: 1440px) {
2722
- .cmpl-cta-style-7 {
2723
- font-size: clamp(10px, var(--cta-style-7-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2724
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-7-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2725
- min-width: var(--cta-style-7-min-width-desktop);
2726
- padding: calc(var(--cta-style-7-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-7-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
2727
- }
2728
- }
2729
- @media (hover: hover) {
2730
- .cmpl-cta-style-7:hover {
2731
- -webkit-text-decoration: var(--cta-style-7-decoration-style-hover);
2732
- text-decoration: var(--cta-style-7-decoration-style-hover);
2733
- text-decoration-color: var(--cta-style-7-decoration-colour-hover);
2734
- border: var(--cta-style-7-border-width) solid var(--cta-style-7-mobile-hover-border-colour);
2735
- background-color: var(--cta-style-7-mobile-hover-background-colour);
2736
- color: var(--cta-style-7-mobile-hover-colour);
2737
- }
2738
- .cmpl-cta-style-7:hover svg * {
2739
- fill: currentColor;
2740
- stroke: currentColor;
2741
- }
2742
- }
2743
- @media (hover: hover) and (hover: none) {
2744
- .cmpl-cta-style-7:hover {
2745
- background-color: var(--cta-style-7-mobile-background-colour);
2746
- }
2747
- }
2748
- @media screen and (hover: hover) and (min-width: 768px) {
2749
- .cmpl-cta-style-7:hover {
2750
- background-color: var(--cta-style-7-hover-background-colour);
2751
- border: var(--cta-style-7-border-width) solid var(--cta-style-7-hover-border-colour);
2752
- color: var(--cta-style-7-hover-colour);
2753
- }
2754
- .cmpl-cta-style-7:hover svg * {
2755
- fill: currentColor;
2756
- stroke: currentColor;
2757
- }
2758
- }
2759
- .cmpl-cta-style-7:active {
2760
- color: var(--cta-style-7-active-colour);
2761
- background-color: var(--cta-style-7-active-background-colour);
2762
- border: var(--cta-style-7-border-width) solid var(--cta-style-7-active-border-colour);
2763
- }
2764
- .cmpl-cta-style-7--inactive,
2765
- .cmpl-cta-style-7.cta-style-inactive,
2766
- .cmpl-cta-style-7[disabled] {
2767
- color: var(--cta-style-7-inactive-colour);
2768
- background-color: var(--cta-style-7-inactive-background-colour);
2769
- border: var(--cta-style-7-border-width) solid var(--cta-style-7-inactive-border-colour);
2770
- }
2771
- .cmpl-cta-style-7--selected,
2772
- .cmpl-cta-style-7.cta-style-selected {
2773
- color: var(--cta-style-7-selected-colour);
2774
- background-color: var(--cta-style-7-selected-background-colour);
2775
- border: var(--cta-style-7-border-width) solid var(--cta-style-7-selected-border-colour);
2776
- }
2777
- .cmpl-cta-style-8 {
2778
- justify-self: var(--cta-alignment);
2779
- justify-content: center;
2780
- justify-content: var(--cta-style-8-content-vertical-alignment, center);
2781
- background-image: var(--cta-style8-image-background);
2782
- background-size: var(--cta-style8-image-background-size);
2783
- background-repeat: var(--cta-style8-image-background-repeat);
2784
- background-color: var(--cta-style-8-mobile-background-colour);
2785
- color: var(--cta-style-8-mobile-colour);
2786
- }
2787
- .cmpl-cta-style-8 svg * {
2788
- fill: currentColor;
2789
- stroke: currentColor;
2790
- }
2791
- .cmpl-cta-style-8 {
2792
- border: var(--cta-style-8-border-width) solid var(--cta-style-8-mobile-border-colour);
2793
- border-radius: var(--cta-style-8-border-radius);
2794
- font-weight: var(--cta-style-8-font-weight);
2795
- letter-spacing: var(--cta-style-8-letter-spacing);
2796
- line-height: var(--cta-style-8-line-height);
2797
- font-family: var(--cta-style-8-font-family);
2798
- text-transform: var(--cta-style-8-text-transform);
2799
- font-style: var(--cta-style-8-font-style);
2800
- text-align: var(--cta-style-8-text-align);
2801
- -webkit-text-decoration: var(--cta-style-8-decoration-style);
2802
- text-decoration: var(--cta-style-8-decoration-style);
2803
- text-decoration-color: var(--cta-style-8-decoration-colour);
2804
- font-size: clamp(10px, var(--cta-style-8-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2805
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-8-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2806
- min-width: var(--cta-style-8-min-width-mobile);
2807
- padding: calc(var(--cta-style-8-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-8-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
2808
- --box-shadow-offset-x: var(--cta-style-8-shadow-offset-x, 0);
2809
- --box-shadow-offset-y: var(--cta-style-8-shadow-offset-y, 0);
2810
- --box-shadow-blur: var(--cta-style-8-shadow-blur, 0);
2811
- --box-shadow-spread: var(--cta-style-8-shadow-radius, 0);
2812
- --box-shadow-colour: var(--cta-style-8-shadow-colour, 0);
2813
- --box-shadow-position: var(--cta-style-8-shadow-position, 0);
2814
- --box-shadow-hover-offset-x: var( --cta-style-8-shadow-offset-hover-x, 0 );
2815
- --box-shadow-hover-offset-y: var( --cta-style-8-shadow-offset-hover-y, 0 );
2816
- --box-shadow-hover-blur: var( --cta-style-8-shadow-hover-blur, 0 );
2817
- --box-shadow-hover-spread: var( --cta-style-8-shadow-hover-radius, 0 );
2818
- --box-shadow-hover-colour: var( --cta-style-8-shadow-hover-colour, 0 );
2819
- --box-shadow-hover-position: var( --cta-style-8-shadow-hover-position, 0 );
2820
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
2821
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
2822
- }
2823
- .cmpl-cta-style-8:hover {
2824
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
2825
- }
2826
- @media screen and (min-width: 768px) {
2827
- .cmpl-cta-style-8 {
2828
- font-size: clamp(10px, var(--cta-style-8-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2829
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-8-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2830
- min-width: var(--cta-style-8-min-width-portrait);
2831
- padding: calc(var(--cta-style-8-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-8-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
2832
- background-color: var(--cta-style-8-background-colour);
2833
- border: var(--cta-style-8-border-width) solid var(--cta-style-8-border-colour);
2834
- color: var(--cta-style-8-colour);
2835
- }
2836
- .cmpl-cta-style-8 svg * {
2837
- fill: currentColor;
2838
- stroke: currentColor;
2839
- }
2840
- }
2841
- @media screen and (min-width: 1024px) {
2842
- .cmpl-cta-style-8 {
2843
- font-size: clamp(10px, var(--cta-style-8-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2844
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-8-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2845
- min-width: var(--cta-style-8-min-width-landscape);
2846
- padding: calc(var(--cta-style-8-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-8-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
2847
- }
2848
- }
2849
- @media screen and (min-width: 1440px) {
2850
- .cmpl-cta-style-8 {
2851
- font-size: clamp(10px, var(--cta-style-8-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2852
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-8-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2853
- min-width: var(--cta-style-8-min-width-desktop);
2854
- padding: calc(var(--cta-style-8-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-8-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
2855
- }
2856
- }
2857
- @media (hover: hover) {
2858
- .cmpl-cta-style-8:hover {
2859
- -webkit-text-decoration: var(--cta-style-8-decoration-style-hover);
2860
- text-decoration: var(--cta-style-8-decoration-style-hover);
2861
- text-decoration-color: var(--cta-style-8-decoration-colour-hover);
2862
- border: var(--cta-style-8-border-width) solid var(--cta-style-8-mobile-hover-border-colour);
2863
- background-color: var(--cta-style-8-mobile-hover-background-colour);
2864
- color: var(--cta-style-8-mobile-hover-colour);
2865
- }
2866
- .cmpl-cta-style-8:hover svg * {
2867
- fill: currentColor;
2868
- stroke: currentColor;
2869
- }
2870
- }
2871
- @media (hover: hover) and (hover: none) {
2872
- .cmpl-cta-style-8:hover {
2873
- background-color: var(--cta-style-8-mobile-background-colour);
2874
- }
2875
- }
2876
- @media screen and (hover: hover) and (min-width: 768px) {
2877
- .cmpl-cta-style-8:hover {
2878
- background-color: var(--cta-style-8-hover-background-colour);
2879
- border: var(--cta-style-8-border-width) solid var(--cta-style-8-hover-border-colour);
2880
- color: var(--cta-style-8-hover-colour);
2881
- }
2882
- .cmpl-cta-style-8:hover svg * {
2883
- fill: currentColor;
2884
- stroke: currentColor;
2885
- }
2886
- }
2887
- .cmpl-cta-style-8:active {
2888
- color: var(--cta-style-8-active-colour);
2889
- background-color: var(--cta-style-8-active-background-colour);
2890
- border: var(--cta-style-8-border-width) solid var(--cta-style-8-active-border-colour);
2891
- }
2892
- .cmpl-cta-style-8--inactive,
2893
- .cmpl-cta-style-8.cta-style-inactive,
2894
- .cmpl-cta-style-8[disabled] {
2895
- color: var(--cta-style-8-inactive-colour);
2896
- background-color: var(--cta-style-8-inactive-background-colour);
2897
- border: var(--cta-style-8-border-width) solid var(--cta-style-8-inactive-border-colour);
2898
- }
2899
- .cmpl-cta-style-8--selected,
2900
- .cmpl-cta-style-8.cta-style-selected {
2901
- color: var(--cta-style-8-selected-colour);
2902
- background-color: var(--cta-style-8-selected-background-colour);
2903
- border: var(--cta-style-8-border-width) solid var(--cta-style-8-selected-border-colour);
2904
- }
2905
- .cmpl-cta-style-9 {
2906
- justify-self: var(--cta-alignment);
2907
- justify-content: center;
2908
- justify-content: var(--cta-style-9-content-vertical-alignment, center);
2909
- background-image: var(--cta-style9-image-background);
2910
- background-size: var(--cta-style9-image-background-size);
2911
- background-repeat: var(--cta-style9-image-background-repeat);
2912
- background-color: var(--cta-style-9-mobile-background-colour);
2913
- color: var(--cta-style-9-mobile-colour);
2914
- }
2915
- .cmpl-cta-style-9 svg * {
2916
- fill: currentColor;
2917
- stroke: currentColor;
2918
- }
2919
- .cmpl-cta-style-9 {
2920
- border: var(--cta-style-9-border-width) solid var(--cta-style-9-mobile-border-colour);
2921
- border-radius: var(--cta-style-9-border-radius);
2922
- font-weight: var(--cta-style-9-font-weight);
2923
- letter-spacing: var(--cta-style-9-letter-spacing);
2924
- line-height: var(--cta-style-9-line-height);
2925
- font-family: var(--cta-style-9-font-family);
2926
- text-transform: var(--cta-style-9-text-transform);
2927
- font-style: var(--cta-style-9-font-style);
2928
- text-align: var(--cta-style-9-text-align);
2929
- -webkit-text-decoration: var(--cta-style-9-decoration-style);
2930
- text-decoration: var(--cta-style-9-decoration-style);
2931
- text-decoration-color: var(--cta-style-9-decoration-colour);
2932
- font-size: clamp(10px, var(--cta-style-9-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2933
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-9-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2934
- min-width: var(--cta-style-9-min-width-mobile);
2935
- padding: calc(var(--cta-style-9-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-9-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
2936
- --box-shadow-offset-x: var(--cta-style-9-shadow-offset-x, 0);
2937
- --box-shadow-offset-y: var(--cta-style-9-shadow-offset-y, 0);
2938
- --box-shadow-blur: var(--cta-style-9-shadow-blur, 0);
2939
- --box-shadow-spread: var(--cta-style-9-shadow-radius, 0);
2940
- --box-shadow-colour: var(--cta-style-9-shadow-colour, 0);
2941
- --box-shadow-position: var(--cta-style-9-shadow-position, 0);
2942
- --box-shadow-hover-offset-x: var( --cta-style-9-shadow-offset-hover-x, 0 );
2943
- --box-shadow-hover-offset-y: var( --cta-style-9-shadow-offset-hover-y, 0 );
2944
- --box-shadow-hover-blur: var( --cta-style-9-shadow-hover-blur, 0 );
2945
- --box-shadow-hover-spread: var( --cta-style-9-shadow-hover-radius, 0 );
2946
- --box-shadow-hover-colour: var( --cta-style-9-shadow-hover-colour, 0 );
2947
- --box-shadow-hover-position: var( --cta-style-9-shadow-hover-position, 0 );
2948
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
2949
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
2950
- }
2951
- .cmpl-cta-style-9:hover {
2952
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
2953
- }
2954
- @media screen and (min-width: 768px) {
2955
- .cmpl-cta-style-9 {
2956
- font-size: clamp(10px, var(--cta-style-9-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2957
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-9-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
2958
- min-width: var(--cta-style-9-min-width-portrait);
2959
- padding: calc(var(--cta-style-9-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-9-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
2960
- background-color: var(--cta-style-9-background-colour);
2961
- border: var(--cta-style-9-border-width) solid var(--cta-style-9-border-colour);
2962
- color: var(--cta-style-9-colour);
2963
- }
2964
- .cmpl-cta-style-9 svg * {
2965
- fill: currentColor;
2966
- stroke: currentColor;
2967
- }
2968
- }
2969
- @media screen and (min-width: 1024px) {
2970
- .cmpl-cta-style-9 {
2971
- font-size: clamp(10px, var(--cta-style-9-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2972
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-9-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2973
- min-width: var(--cta-style-9-min-width-landscape);
2974
- padding: calc(var(--cta-style-9-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-9-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
2975
- }
2976
- }
2977
- @media screen and (min-width: 1440px) {
2978
- .cmpl-cta-style-9 {
2979
- font-size: clamp(10px, var(--cta-style-9-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
2980
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-9-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
2981
- min-width: var(--cta-style-9-min-width-desktop);
2982
- padding: calc(var(--cta-style-9-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-9-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
2983
- }
2984
- }
2985
- @media (hover: hover) {
2986
- .cmpl-cta-style-9:hover {
2987
- -webkit-text-decoration: var(--cta-style-9-decoration-style-hover);
2988
- text-decoration: var(--cta-style-9-decoration-style-hover);
2989
- text-decoration-color: var(--cta-style-9-decoration-colour-hover);
2990
- border: var(--cta-style-9-border-width) solid var(--cta-style-9-mobile-hover-border-colour);
2991
- background-color: var(--cta-style-9-mobile-hover-background-colour);
2992
- color: var(--cta-style-9-mobile-hover-colour);
2993
- }
2994
- .cmpl-cta-style-9:hover svg * {
2995
- fill: currentColor;
2996
- stroke: currentColor;
2997
- }
2998
- }
2999
- @media (hover: hover) and (hover: none) {
3000
- .cmpl-cta-style-9:hover {
3001
- background-color: var(--cta-style-9-mobile-background-colour);
3002
- }
3003
- }
3004
- @media screen and (hover: hover) and (min-width: 768px) {
3005
- .cmpl-cta-style-9:hover {
3006
- background-color: var(--cta-style-9-hover-background-colour);
3007
- border: var(--cta-style-9-border-width) solid var(--cta-style-9-hover-border-colour);
3008
- color: var(--cta-style-9-hover-colour);
3009
- }
3010
- .cmpl-cta-style-9:hover svg * {
3011
- fill: currentColor;
3012
- stroke: currentColor;
3013
- }
3014
- }
3015
- .cmpl-cta-style-9:active {
3016
- color: var(--cta-style-9-active-colour);
3017
- background-color: var(--cta-style-9-active-background-colour);
3018
- border: var(--cta-style-9-border-width) solid var(--cta-style-9-active-border-colour);
3019
- }
3020
- .cmpl-cta-style-9--inactive,
3021
- .cmpl-cta-style-9.cta-style-inactive,
3022
- .cmpl-cta-style-9[disabled] {
3023
- color: var(--cta-style-9-inactive-colour);
3024
- background-color: var(--cta-style-9-inactive-background-colour);
3025
- border: var(--cta-style-9-border-width) solid var(--cta-style-9-inactive-border-colour);
3026
- }
3027
- .cmpl-cta-style-9--selected,
3028
- .cmpl-cta-style-9.cta-style-selected {
3029
- color: var(--cta-style-9-selected-colour);
3030
- background-color: var(--cta-style-9-selected-background-colour);
3031
- border: var(--cta-style-9-border-width) solid var(--cta-style-9-selected-border-colour);
3032
- }
3033
- .cmpl-cta-style-10 {
3034
- justify-self: var(--cta-alignment);
3035
- justify-content: center;
3036
- justify-content: var(--cta-style-10-content-vertical-alignment, center);
3037
- background-image: var(--cta-style10-image-background);
3038
- background-size: var(--cta-style10-image-background-size);
3039
- background-repeat: var(--cta-style10-image-background-repeat);
3040
- background-color: var(--cta-style-10-mobile-background-colour);
3041
- color: var(--cta-style-10-mobile-colour);
3042
- }
3043
- .cmpl-cta-style-10 svg * {
3044
- fill: currentColor;
3045
- stroke: currentColor;
3046
- }
3047
- .cmpl-cta-style-10 {
3048
- border: var(--cta-style-10-border-width) solid var(--cta-style-10-mobile-border-colour);
3049
- border-radius: var(--cta-style-10-border-radius);
3050
- font-weight: var(--cta-style-10-font-weight);
3051
- letter-spacing: var(--cta-style-10-letter-spacing);
3052
- line-height: var(--cta-style-10-line-height);
3053
- font-family: var(--cta-style-10-font-family);
3054
- text-transform: var(--cta-style-10-text-transform);
3055
- font-style: var(--cta-style-10-font-style);
3056
- text-align: var(--cta-style-10-text-align);
3057
- -webkit-text-decoration: var(--cta-style-10-decoration-style);
3058
- text-decoration: var(--cta-style-10-decoration-style);
3059
- text-decoration-color: var(--cta-style-10-decoration-colour);
3060
- font-size: clamp(10px, var(--cta-style-10-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3061
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-10-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3062
- min-width: var(--cta-style-10-min-width-mobile);
3063
- padding: calc(var(--cta-style-10-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-10-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
3064
- --box-shadow-offset-x: var(--cta-style-10-shadow-offset-x, 0);
3065
- --box-shadow-offset-y: var(--cta-style-10-shadow-offset-y, 0);
3066
- --box-shadow-blur: var(--cta-style-10-shadow-blur, 0);
3067
- --box-shadow-spread: var(--cta-style-10-shadow-radius, 0);
3068
- --box-shadow-colour: var(--cta-style-10-shadow-colour, 0);
3069
- --box-shadow-position: var(--cta-style-10-shadow-position, 0);
3070
- --box-shadow-hover-offset-x: var( --cta-style-10-shadow-offset-hover-x, 0 );
3071
- --box-shadow-hover-offset-y: var( --cta-style-10-shadow-offset-hover-y, 0 );
3072
- --box-shadow-hover-blur: var( --cta-style-10-shadow-hover-blur, 0 );
3073
- --box-shadow-hover-spread: var( --cta-style-10-shadow-hover-radius, 0 );
3074
- --box-shadow-hover-colour: var( --cta-style-10-shadow-hover-colour, 0 );
3075
- --box-shadow-hover-position: var( --cta-style-10-shadow-hover-position, 0 );
3076
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
3077
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
3078
- }
3079
- .cmpl-cta-style-10:hover {
3080
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
3081
- }
3082
- @media screen and (min-width: 768px) {
3083
- .cmpl-cta-style-10 {
3084
- font-size: clamp(10px, var(--cta-style-10-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3085
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-10-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3086
- min-width: var(--cta-style-10-min-width-portrait);
3087
- padding: calc(var(--cta-style-10-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-10-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
3088
- background-color: var(--cta-style-10-background-colour);
3089
- border: var(--cta-style-10-border-width) solid var(--cta-style-10-border-colour);
3090
- color: var(--cta-style-10-colour);
3091
- }
3092
- .cmpl-cta-style-10 svg * {
3093
- fill: currentColor;
3094
- stroke: currentColor;
3095
- }
3096
- }
3097
- @media screen and (min-width: 1024px) {
3098
- .cmpl-cta-style-10 {
3099
- font-size: clamp(10px, var(--cta-style-10-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3100
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-10-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3101
- min-width: var(--cta-style-10-min-width-landscape);
3102
- padding: calc(var(--cta-style-10-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-10-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
3103
- }
3104
- }
3105
- @media screen and (min-width: 1440px) {
3106
- .cmpl-cta-style-10 {
3107
- font-size: clamp(10px, var(--cta-style-10-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3108
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-10-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3109
- min-width: var(--cta-style-10-min-width-desktop);
3110
- padding: calc(var(--cta-style-10-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-10-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
3111
- }
3112
- }
3113
- @media (hover: hover) {
3114
- .cmpl-cta-style-10:hover {
3115
- -webkit-text-decoration: var(--cta-style-10-decoration-style-hover);
3116
- text-decoration: var(--cta-style-10-decoration-style-hover);
3117
- text-decoration-color: var(--cta-style-10-decoration-colour-hover);
3118
- border: var(--cta-style-10-border-width) solid var(--cta-style-10-mobile-hover-border-colour);
3119
- background-color: var(--cta-style-10-mobile-hover-background-colour);
3120
- color: var(--cta-style-10-mobile-hover-colour);
3121
- }
3122
- .cmpl-cta-style-10:hover svg * {
3123
- fill: currentColor;
3124
- stroke: currentColor;
3125
- }
3126
- }
3127
- @media (hover: hover) and (hover: none) {
3128
- .cmpl-cta-style-10:hover {
3129
- background-color: var(--cta-style-10-mobile-background-colour);
3130
- }
3131
- }
3132
- @media screen and (hover: hover) and (min-width: 768px) {
3133
- .cmpl-cta-style-10:hover {
3134
- background-color: var(--cta-style-10-hover-background-colour);
3135
- border: var(--cta-style-10-border-width) solid var(--cta-style-10-hover-border-colour);
3136
- color: var(--cta-style-10-hover-colour);
3137
- }
3138
- .cmpl-cta-style-10:hover svg * {
3139
- fill: currentColor;
3140
- stroke: currentColor;
3141
- }
3142
- }
3143
- .cmpl-cta-style-10:active {
3144
- color: var(--cta-style-10-active-colour);
3145
- background-color: var(--cta-style-10-active-background-colour);
3146
- border: var(--cta-style-10-border-width) solid var(--cta-style-10-active-border-colour);
3147
- }
3148
- .cmpl-cta-style-10--inactive,
3149
- .cmpl-cta-style-10.cta-style-inactive,
3150
- .cmpl-cta-style-10[disabled] {
3151
- color: var(--cta-style-10-inactive-colour);
3152
- background-color: var(--cta-style-10-inactive-background-colour);
3153
- border: var(--cta-style-10-border-width) solid var(--cta-style-10-inactive-border-colour);
3154
- }
3155
- .cmpl-cta-style-10--selected,
3156
- .cmpl-cta-style-10.cta-style-selected {
3157
- color: var(--cta-style-10-selected-colour);
3158
- background-color: var(--cta-style-10-selected-background-colour);
3159
- border: var(--cta-style-10-border-width) solid var(--cta-style-10-selected-border-colour);
3160
- }
3161
- .cmpl-cta-style-11 {
3162
- justify-self: var(--cta-alignment);
3163
- justify-content: center;
3164
- justify-content: var(--cta-style-11-content-vertical-alignment, center);
3165
- background-image: var(--cta-style11-image-background);
3166
- background-size: var(--cta-style11-image-background-size);
3167
- background-repeat: var(--cta-style11-image-background-repeat);
3168
- background-color: var(--cta-style-11-mobile-background-colour);
3169
- color: var(--cta-style-11-mobile-colour);
3170
- }
3171
- .cmpl-cta-style-11 svg * {
3172
- fill: currentColor;
3173
- stroke: currentColor;
3174
- }
3175
- .cmpl-cta-style-11 {
3176
- border: var(--cta-style-11-border-width) solid var(--cta-style-11-mobile-border-colour);
3177
- border-radius: var(--cta-style-11-border-radius);
3178
- font-weight: var(--cta-style-11-font-weight);
3179
- letter-spacing: var(--cta-style-11-letter-spacing);
3180
- line-height: var(--cta-style-11-line-height);
3181
- font-family: var(--cta-style-11-font-family);
3182
- text-transform: var(--cta-style-11-text-transform);
3183
- font-style: var(--cta-style-11-font-style);
3184
- text-align: var(--cta-style-11-text-align);
3185
- -webkit-text-decoration: var(--cta-style-11-decoration-style);
3186
- text-decoration: var(--cta-style-11-decoration-style);
3187
- text-decoration-color: var(--cta-style-11-decoration-colour);
3188
- font-size: clamp(10px, var(--cta-style-11-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3189
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-11-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3190
- min-width: var(--cta-style-11-min-width-mobile);
3191
- padding: calc(var(--cta-style-11-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-11-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
3192
- --box-shadow-offset-x: var(--cta-style-11-shadow-offset-x, 0);
3193
- --box-shadow-offset-y: var(--cta-style-11-shadow-offset-y, 0);
3194
- --box-shadow-blur: var(--cta-style-11-shadow-blur, 0);
3195
- --box-shadow-spread: var(--cta-style-11-shadow-radius, 0);
3196
- --box-shadow-colour: var(--cta-style-11-shadow-colour, 0);
3197
- --box-shadow-position: var(--cta-style-11-shadow-position, 0);
3198
- --box-shadow-hover-offset-x: var( --cta-style-11-shadow-offset-hover-x, 0 );
3199
- --box-shadow-hover-offset-y: var( --cta-style-11-shadow-offset-hover-y, 0 );
3200
- --box-shadow-hover-blur: var( --cta-style-11-shadow-hover-blur, 0 );
3201
- --box-shadow-hover-spread: var( --cta-style-11-shadow-hover-radius, 0 );
3202
- --box-shadow-hover-colour: var( --cta-style-11-shadow-hover-colour, 0 );
3203
- --box-shadow-hover-position: var( --cta-style-11-shadow-hover-position, 0 );
3204
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
3205
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
3206
- }
3207
- .cmpl-cta-style-11:hover {
3208
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
3209
- }
3210
- @media screen and (min-width: 768px) {
3211
- .cmpl-cta-style-11 {
3212
- font-size: clamp(10px, var(--cta-style-11-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3213
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-11-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3214
- min-width: var(--cta-style-11-min-width-portrait);
3215
- padding: calc(var(--cta-style-11-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-11-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
3216
- background-color: var(--cta-style-11-background-colour);
3217
- border: var(--cta-style-11-border-width) solid var(--cta-style-11-border-colour);
3218
- color: var(--cta-style-11-colour);
3219
- }
3220
- .cmpl-cta-style-11 svg * {
3221
- fill: currentColor;
3222
- stroke: currentColor;
3223
- }
3224
- }
3225
- @media screen and (min-width: 1024px) {
3226
- .cmpl-cta-style-11 {
3227
- font-size: clamp(10px, var(--cta-style-11-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3228
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-11-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3229
- min-width: var(--cta-style-11-min-width-landscape);
3230
- padding: calc(var(--cta-style-11-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-11-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
3231
- }
3232
- }
3233
- @media screen and (min-width: 1440px) {
3234
- .cmpl-cta-style-11 {
3235
- font-size: clamp(10px, var(--cta-style-11-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3236
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-11-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3237
- min-width: var(--cta-style-11-min-width-desktop);
3238
- padding: calc(var(--cta-style-11-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-11-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
3239
- }
3240
- }
3241
- @media (hover: hover) {
3242
- .cmpl-cta-style-11:hover {
3243
- -webkit-text-decoration: var(--cta-style-11-decoration-style-hover);
3244
- text-decoration: var(--cta-style-11-decoration-style-hover);
3245
- text-decoration-color: var(--cta-style-11-decoration-colour-hover);
3246
- border: var(--cta-style-11-border-width) solid var(--cta-style-11-mobile-hover-border-colour);
3247
- background-color: var(--cta-style-11-mobile-hover-background-colour);
3248
- color: var(--cta-style-11-mobile-hover-colour);
3249
- }
3250
- .cmpl-cta-style-11:hover svg * {
3251
- fill: currentColor;
3252
- stroke: currentColor;
3253
- }
3254
- }
3255
- @media (hover: hover) and (hover: none) {
3256
- .cmpl-cta-style-11:hover {
3257
- background-color: var(--cta-style-11-mobile-background-colour);
3258
- }
3259
- }
3260
- @media screen and (hover: hover) and (min-width: 768px) {
3261
- .cmpl-cta-style-11:hover {
3262
- background-color: var(--cta-style-11-hover-background-colour);
3263
- border: var(--cta-style-11-border-width) solid var(--cta-style-11-hover-border-colour);
3264
- color: var(--cta-style-11-hover-colour);
3265
- }
3266
- .cmpl-cta-style-11:hover svg * {
3267
- fill: currentColor;
3268
- stroke: currentColor;
3269
- }
3270
- }
3271
- .cmpl-cta-style-11:active {
3272
- color: var(--cta-style-11-active-colour);
3273
- background-color: var(--cta-style-11-active-background-colour);
3274
- border: var(--cta-style-11-border-width) solid var(--cta-style-11-active-border-colour);
3275
- }
3276
- .cmpl-cta-style-11--inactive,
3277
- .cmpl-cta-style-11.cta-style-inactive,
3278
- .cmpl-cta-style-11[disabled] {
3279
- color: var(--cta-style-11-inactive-colour);
3280
- background-color: var(--cta-style-11-inactive-background-colour);
3281
- border: var(--cta-style-11-border-width) solid var(--cta-style-11-inactive-border-colour);
3282
- }
3283
- .cmpl-cta-style-11--selected,
3284
- .cmpl-cta-style-11.cta-style-selected {
3285
- color: var(--cta-style-11-selected-colour);
3286
- background-color: var(--cta-style-11-selected-background-colour);
3287
- border: var(--cta-style-11-border-width) solid var(--cta-style-11-selected-border-colour);
3288
- }
3289
- .cmpl-cta-style-12 {
3290
- justify-self: var(--cta-alignment);
3291
- justify-content: center;
3292
- justify-content: var(--cta-style-12-content-vertical-alignment, center);
3293
- background-image: var(--cta-style12-image-background);
3294
- background-size: var(--cta-style12-image-background-size);
3295
- background-repeat: var(--cta-style12-image-background-repeat);
3296
- background-color: var(--cta-style-12-mobile-background-colour);
3297
- color: var(--cta-style-12-mobile-colour);
3298
- }
3299
- .cmpl-cta-style-12 svg * {
3300
- fill: currentColor;
3301
- stroke: currentColor;
3302
- }
3303
- .cmpl-cta-style-12 {
3304
- border: var(--cta-style-12-border-width) solid var(--cta-style-12-mobile-border-colour);
3305
- border-radius: var(--cta-style-12-border-radius);
3306
- font-weight: var(--cta-style-12-font-weight);
3307
- letter-spacing: var(--cta-style-12-letter-spacing);
3308
- line-height: var(--cta-style-12-line-height);
3309
- font-family: var(--cta-style-12-font-family);
3310
- text-transform: var(--cta-style-12-text-transform);
3311
- font-style: var(--cta-style-12-font-style);
3312
- text-align: var(--cta-style-12-text-align);
3313
- -webkit-text-decoration: var(--cta-style-12-decoration-style);
3314
- text-decoration: var(--cta-style-12-decoration-style);
3315
- text-decoration-color: var(--cta-style-12-decoration-colour);
3316
- font-size: clamp(10px, var(--cta-style-12-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3317
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-12-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3318
- min-width: var(--cta-style-12-min-width-mobile);
3319
- padding: calc(var(--cta-style-12-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-12-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
3320
- --box-shadow-offset-x: var(--cta-style-12-shadow-offset-x, 0);
3321
- --box-shadow-offset-y: var(--cta-style-12-shadow-offset-y, 0);
3322
- --box-shadow-blur: var(--cta-style-12-shadow-blur, 0);
3323
- --box-shadow-spread: var(--cta-style-12-shadow-radius, 0);
3324
- --box-shadow-colour: var(--cta-style-12-shadow-colour, 0);
3325
- --box-shadow-position: var(--cta-style-12-shadow-position, 0);
3326
- --box-shadow-hover-offset-x: var( --cta-style-12-shadow-offset-hover-x, 0 );
3327
- --box-shadow-hover-offset-y: var( --cta-style-12-shadow-offset-hover-y, 0 );
3328
- --box-shadow-hover-blur: var( --cta-style-12-shadow-hover-blur, 0 );
3329
- --box-shadow-hover-spread: var( --cta-style-12-shadow-hover-radius, 0 );
3330
- --box-shadow-hover-colour: var( --cta-style-12-shadow-hover-colour, 0 );
3331
- --box-shadow-hover-position: var( --cta-style-12-shadow-hover-position, 0 );
3332
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
3333
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
3334
- }
3335
- .cmpl-cta-style-12:hover {
3336
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
3337
- }
3338
- @media screen and (min-width: 768px) {
3339
- .cmpl-cta-style-12 {
3340
- font-size: clamp(10px, var(--cta-style-12-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3341
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-12-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3342
- min-width: var(--cta-style-12-min-width-portrait);
3343
- padding: calc(var(--cta-style-12-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-12-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
3344
- background-color: var(--cta-style-12-background-colour);
3345
- border: var(--cta-style-12-border-width) solid var(--cta-style-12-border-colour);
3346
- color: var(--cta-style-12-colour);
3347
- }
3348
- .cmpl-cta-style-12 svg * {
3349
- fill: currentColor;
3350
- stroke: currentColor;
3351
- }
3352
- }
3353
- @media screen and (min-width: 1024px) {
3354
- .cmpl-cta-style-12 {
3355
- font-size: clamp(10px, var(--cta-style-12-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3356
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-12-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3357
- min-width: var(--cta-style-12-min-width-landscape);
3358
- padding: calc(var(--cta-style-12-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-12-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
3359
- }
3360
- }
3361
- @media screen and (min-width: 1440px) {
3362
- .cmpl-cta-style-12 {
3363
- font-size: clamp(10px, var(--cta-style-12-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3364
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-12-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3365
- min-width: var(--cta-style-12-min-width-desktop);
3366
- padding: calc(var(--cta-style-12-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-12-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
3367
- }
3368
- }
3369
- @media (hover: hover) {
3370
- .cmpl-cta-style-12:hover {
3371
- -webkit-text-decoration: var(--cta-style-12-decoration-style-hover);
3372
- text-decoration: var(--cta-style-12-decoration-style-hover);
3373
- text-decoration-color: var(--cta-style-12-decoration-colour-hover);
3374
- border: var(--cta-style-12-border-width) solid var(--cta-style-12-mobile-hover-border-colour);
3375
- background-color: var(--cta-style-12-mobile-hover-background-colour);
3376
- color: var(--cta-style-12-mobile-hover-colour);
3377
- }
3378
- .cmpl-cta-style-12:hover svg * {
3379
- fill: currentColor;
3380
- stroke: currentColor;
3381
- }
3382
- }
3383
- @media (hover: hover) and (hover: none) {
3384
- .cmpl-cta-style-12:hover {
3385
- background-color: var(--cta-style-12-mobile-background-colour);
3386
- }
3387
- }
3388
- @media screen and (hover: hover) and (min-width: 768px) {
3389
- .cmpl-cta-style-12:hover {
3390
- background-color: var(--cta-style-12-hover-background-colour);
3391
- border: var(--cta-style-12-border-width) solid var(--cta-style-12-hover-border-colour);
3392
- color: var(--cta-style-12-hover-colour);
3393
- }
3394
- .cmpl-cta-style-12:hover svg * {
3395
- fill: currentColor;
3396
- stroke: currentColor;
3397
- }
3398
- }
3399
- .cmpl-cta-style-12:active {
3400
- color: var(--cta-style-12-active-colour);
3401
- background-color: var(--cta-style-12-active-background-colour);
3402
- border: var(--cta-style-12-border-width) solid var(--cta-style-12-active-border-colour);
3403
- }
3404
- .cmpl-cta-style-12--inactive,
3405
- .cmpl-cta-style-12.cta-style-inactive,
3406
- .cmpl-cta-style-12[disabled] {
3407
- color: var(--cta-style-12-inactive-colour);
3408
- background-color: var(--cta-style-12-inactive-background-colour);
3409
- border: var(--cta-style-12-border-width) solid var(--cta-style-12-inactive-border-colour);
3410
- }
3411
- .cmpl-cta-style-12--selected,
3412
- .cmpl-cta-style-12.cta-style-selected {
3413
- color: var(--cta-style-12-selected-colour);
3414
- background-color: var(--cta-style-12-selected-background-colour);
3415
- border: var(--cta-style-12-border-width) solid var(--cta-style-12-selected-border-colour);
3416
- }
3417
- .cmpl-cta-style-13 {
3418
- justify-self: var(--cta-alignment);
3419
- justify-content: center;
3420
- justify-content: var(--cta-style-13-content-vertical-alignment, center);
3421
- background-image: var(--cta-style13-image-background);
3422
- background-size: var(--cta-style13-image-background-size);
3423
- background-repeat: var(--cta-style13-image-background-repeat);
3424
- background-color: var(--cta-style-13-mobile-background-colour);
3425
- color: var(--cta-style-13-mobile-colour);
3426
- }
3427
- .cmpl-cta-style-13 svg * {
3428
- fill: currentColor;
3429
- stroke: currentColor;
3430
- }
3431
- .cmpl-cta-style-13 {
3432
- border: var(--cta-style-13-border-width) solid var(--cta-style-13-mobile-border-colour);
3433
- border-radius: var(--cta-style-13-border-radius);
3434
- font-weight: var(--cta-style-13-font-weight);
3435
- letter-spacing: var(--cta-style-13-letter-spacing);
3436
- line-height: var(--cta-style-13-line-height);
3437
- font-family: var(--cta-style-13-font-family);
3438
- text-transform: var(--cta-style-13-text-transform);
3439
- font-style: var(--cta-style-13-font-style);
3440
- text-align: var(--cta-style-13-text-align);
3441
- -webkit-text-decoration: var(--cta-style-13-decoration-style);
3442
- text-decoration: var(--cta-style-13-decoration-style);
3443
- text-decoration-color: var(--cta-style-13-decoration-colour);
3444
- font-size: clamp(10px, var(--cta-style-13-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3445
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-13-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3446
- min-width: var(--cta-style-13-min-width-mobile);
3447
- padding: calc(var(--cta-style-13-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-13-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
3448
- --box-shadow-offset-x: var(--cta-style-13-shadow-offset-x, 0);
3449
- --box-shadow-offset-y: var(--cta-style-13-shadow-offset-y, 0);
3450
- --box-shadow-blur: var(--cta-style-13-shadow-blur, 0);
3451
- --box-shadow-spread: var(--cta-style-13-shadow-radius, 0);
3452
- --box-shadow-colour: var(--cta-style-13-shadow-colour, 0);
3453
- --box-shadow-position: var(--cta-style-13-shadow-position, 0);
3454
- --box-shadow-hover-offset-x: var( --cta-style-13-shadow-offset-hover-x, 0 );
3455
- --box-shadow-hover-offset-y: var( --cta-style-13-shadow-offset-hover-y, 0 );
3456
- --box-shadow-hover-blur: var( --cta-style-13-shadow-hover-blur, 0 );
3457
- --box-shadow-hover-spread: var( --cta-style-13-shadow-hover-radius, 0 );
3458
- --box-shadow-hover-colour: var( --cta-style-13-shadow-hover-colour, 0 );
3459
- --box-shadow-hover-position: var( --cta-style-13-shadow-hover-position, 0 );
3460
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
3461
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
3462
- }
3463
- .cmpl-cta-style-13:hover {
3464
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
3465
- }
3466
- @media screen and (min-width: 768px) {
3467
- .cmpl-cta-style-13 {
3468
- font-size: clamp(10px, var(--cta-style-13-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3469
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-13-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3470
- min-width: var(--cta-style-13-min-width-portrait);
3471
- padding: calc(var(--cta-style-13-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-13-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
3472
- background-color: var(--cta-style-13-background-colour);
3473
- border: var(--cta-style-13-border-width) solid var(--cta-style-13-border-colour);
3474
- color: var(--cta-style-13-colour);
3475
- }
3476
- .cmpl-cta-style-13 svg * {
3477
- fill: currentColor;
3478
- stroke: currentColor;
3479
- }
3480
- }
3481
- @media screen and (min-width: 1024px) {
3482
- .cmpl-cta-style-13 {
3483
- font-size: clamp(10px, var(--cta-style-13-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3484
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-13-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3485
- min-width: var(--cta-style-13-min-width-landscape);
3486
- padding: calc(var(--cta-style-13-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-13-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
3487
- }
3488
- }
3489
- @media screen and (min-width: 1440px) {
3490
- .cmpl-cta-style-13 {
3491
- font-size: clamp(10px, var(--cta-style-13-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3492
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-13-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3493
- min-width: var(--cta-style-13-min-width-desktop);
3494
- padding: calc(var(--cta-style-13-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-13-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
3495
- }
3496
- }
3497
- @media (hover: hover) {
3498
- .cmpl-cta-style-13:hover {
3499
- -webkit-text-decoration: var(--cta-style-13-decoration-style-hover);
3500
- text-decoration: var(--cta-style-13-decoration-style-hover);
3501
- text-decoration-color: var(--cta-style-13-decoration-colour-hover);
3502
- border: var(--cta-style-13-border-width) solid var(--cta-style-13-mobile-hover-border-colour);
3503
- background-color: var(--cta-style-13-mobile-hover-background-colour);
3504
- color: var(--cta-style-13-mobile-hover-colour);
3505
- }
3506
- .cmpl-cta-style-13:hover svg * {
3507
- fill: currentColor;
3508
- stroke: currentColor;
3509
- }
3510
- }
3511
- @media (hover: hover) and (hover: none) {
3512
- .cmpl-cta-style-13:hover {
3513
- background-color: var(--cta-style-13-mobile-background-colour);
3514
- }
3515
- }
3516
- @media screen and (hover: hover) and (min-width: 768px) {
3517
- .cmpl-cta-style-13:hover {
3518
- background-color: var(--cta-style-13-hover-background-colour);
3519
- border: var(--cta-style-13-border-width) solid var(--cta-style-13-hover-border-colour);
3520
- color: var(--cta-style-13-hover-colour);
3521
- }
3522
- .cmpl-cta-style-13:hover svg * {
3523
- fill: currentColor;
3524
- stroke: currentColor;
3525
- }
3526
- }
3527
- .cmpl-cta-style-13:active {
3528
- color: var(--cta-style-13-active-colour);
3529
- background-color: var(--cta-style-13-active-background-colour);
3530
- border: var(--cta-style-13-border-width) solid var(--cta-style-13-active-border-colour);
3531
- }
3532
- .cmpl-cta-style-13--inactive,
3533
- .cmpl-cta-style-13.cta-style-inactive,
3534
- .cmpl-cta-style-13[disabled] {
3535
- color: var(--cta-style-13-inactive-colour);
3536
- background-color: var(--cta-style-13-inactive-background-colour);
3537
- border: var(--cta-style-13-border-width) solid var(--cta-style-13-inactive-border-colour);
3538
- }
3539
- .cmpl-cta-style-13--selected,
3540
- .cmpl-cta-style-13.cta-style-selected {
3541
- color: var(--cta-style-13-selected-colour);
3542
- background-color: var(--cta-style-13-selected-background-colour);
3543
- border: var(--cta-style-13-border-width) solid var(--cta-style-13-selected-border-colour);
3544
- }
3545
- .cmpl-cta-style-14 {
3546
- justify-self: var(--cta-alignment);
3547
- justify-content: center;
3548
- justify-content: var(--cta-style-14-content-vertical-alignment, center);
3549
- background-image: var(--cta-style14-image-background);
3550
- background-size: var(--cta-style14-image-background-size);
3551
- background-repeat: var(--cta-style14-image-background-repeat);
3552
- background-color: var(--cta-style-14-mobile-background-colour);
3553
- color: var(--cta-style-14-mobile-colour);
3554
- }
3555
- .cmpl-cta-style-14 svg * {
3556
- fill: currentColor;
3557
- stroke: currentColor;
3558
- }
3559
- .cmpl-cta-style-14 {
3560
- border: var(--cta-style-14-border-width) solid var(--cta-style-14-mobile-border-colour);
3561
- border-radius: var(--cta-style-14-border-radius);
3562
- font-weight: var(--cta-style-14-font-weight);
3563
- letter-spacing: var(--cta-style-14-letter-spacing);
3564
- line-height: var(--cta-style-14-line-height);
3565
- font-family: var(--cta-style-14-font-family);
3566
- text-transform: var(--cta-style-14-text-transform);
3567
- font-style: var(--cta-style-14-font-style);
3568
- text-align: var(--cta-style-14-text-align);
3569
- -webkit-text-decoration: var(--cta-style-14-decoration-style);
3570
- text-decoration: var(--cta-style-14-decoration-style);
3571
- text-decoration-color: var(--cta-style-14-decoration-colour);
3572
- font-size: clamp(10px, var(--cta-style-14-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3573
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-14-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3574
- min-width: var(--cta-style-14-min-width-mobile);
3575
- padding: calc(var(--cta-style-14-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-14-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
3576
- --box-shadow-offset-x: var(--cta-style-14-shadow-offset-x, 0);
3577
- --box-shadow-offset-y: var(--cta-style-14-shadow-offset-y, 0);
3578
- --box-shadow-blur: var(--cta-style-14-shadow-blur, 0);
3579
- --box-shadow-spread: var(--cta-style-14-shadow-radius, 0);
3580
- --box-shadow-colour: var(--cta-style-14-shadow-colour, 0);
3581
- --box-shadow-position: var(--cta-style-14-shadow-position, 0);
3582
- --box-shadow-hover-offset-x: var( --cta-style-14-shadow-offset-hover-x, 0 );
3583
- --box-shadow-hover-offset-y: var( --cta-style-14-shadow-offset-hover-y, 0 );
3584
- --box-shadow-hover-blur: var( --cta-style-14-shadow-hover-blur, 0 );
3585
- --box-shadow-hover-spread: var( --cta-style-14-shadow-hover-radius, 0 );
3586
- --box-shadow-hover-colour: var( --cta-style-14-shadow-hover-colour, 0 );
3587
- --box-shadow-hover-position: var( --cta-style-14-shadow-hover-position, 0 );
3588
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
3589
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
3590
- }
3591
- .cmpl-cta-style-14:hover {
3592
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
3593
- }
3594
- @media screen and (min-width: 768px) {
3595
- .cmpl-cta-style-14 {
3596
- font-size: clamp(10px, var(--cta-style-14-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3597
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-14-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3598
- min-width: var(--cta-style-14-min-width-portrait);
3599
- padding: calc(var(--cta-style-14-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-14-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
3600
- background-color: var(--cta-style-14-background-colour);
3601
- border: var(--cta-style-14-border-width) solid var(--cta-style-14-border-colour);
3602
- color: var(--cta-style-14-colour);
3603
- }
3604
- .cmpl-cta-style-14 svg * {
3605
- fill: currentColor;
3606
- stroke: currentColor;
3607
- }
3608
- }
3609
- @media screen and (min-width: 1024px) {
3610
- .cmpl-cta-style-14 {
3611
- font-size: clamp(10px, var(--cta-style-14-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3612
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-14-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3613
- min-width: var(--cta-style-14-min-width-landscape);
3614
- padding: calc(var(--cta-style-14-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-14-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
3615
- }
3616
- }
3617
- @media screen and (min-width: 1440px) {
3618
- .cmpl-cta-style-14 {
3619
- font-size: clamp(10px, var(--cta-style-14-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3620
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-14-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3621
- min-width: var(--cta-style-14-min-width-desktop);
3622
- padding: calc(var(--cta-style-14-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-14-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
3623
- }
3624
- }
3625
- @media (hover: hover) {
3626
- .cmpl-cta-style-14:hover {
3627
- -webkit-text-decoration: var(--cta-style-14-decoration-style-hover);
3628
- text-decoration: var(--cta-style-14-decoration-style-hover);
3629
- text-decoration-color: var(--cta-style-14-decoration-colour-hover);
3630
- border: var(--cta-style-14-border-width) solid var(--cta-style-14-mobile-hover-border-colour);
3631
- background-color: var(--cta-style-14-mobile-hover-background-colour);
3632
- color: var(--cta-style-14-mobile-hover-colour);
3633
- }
3634
- .cmpl-cta-style-14:hover svg * {
3635
- fill: currentColor;
3636
- stroke: currentColor;
3637
- }
3638
- }
3639
- @media (hover: hover) and (hover: none) {
3640
- .cmpl-cta-style-14:hover {
3641
- background-color: var(--cta-style-14-mobile-background-colour);
3642
- }
3643
- }
3644
- @media screen and (hover: hover) and (min-width: 768px) {
3645
- .cmpl-cta-style-14:hover {
3646
- background-color: var(--cta-style-14-hover-background-colour);
3647
- border: var(--cta-style-14-border-width) solid var(--cta-style-14-hover-border-colour);
3648
- color: var(--cta-style-14-hover-colour);
3649
- }
3650
- .cmpl-cta-style-14:hover svg * {
3651
- fill: currentColor;
3652
- stroke: currentColor;
3653
- }
3654
- }
3655
- .cmpl-cta-style-14:active {
3656
- color: var(--cta-style-14-active-colour);
3657
- background-color: var(--cta-style-14-active-background-colour);
3658
- border: var(--cta-style-14-border-width) solid var(--cta-style-14-active-border-colour);
3659
- }
3660
- .cmpl-cta-style-14--inactive,
3661
- .cmpl-cta-style-14.cta-style-inactive,
3662
- .cmpl-cta-style-14[disabled] {
3663
- color: var(--cta-style-14-inactive-colour);
3664
- background-color: var(--cta-style-14-inactive-background-colour);
3665
- border: var(--cta-style-14-border-width) solid var(--cta-style-14-inactive-border-colour);
3666
- }
3667
- .cmpl-cta-style-14--selected,
3668
- .cmpl-cta-style-14.cta-style-selected {
3669
- color: var(--cta-style-14-selected-colour);
3670
- background-color: var(--cta-style-14-selected-background-colour);
3671
- border: var(--cta-style-14-border-width) solid var(--cta-style-14-selected-border-colour);
3672
- }
3673
- .cmpl-cta-style-15 {
3674
- justify-self: var(--cta-alignment);
3675
- justify-content: center;
3676
- justify-content: var(--cta-style-15-content-vertical-alignment, center);
3677
- background-image: var(--cta-style15-image-background);
3678
- background-size: var(--cta-style15-image-background-size);
3679
- background-repeat: var(--cta-style15-image-background-repeat);
3680
- background-color: var(--cta-style-15-mobile-background-colour);
3681
- color: var(--cta-style-15-mobile-colour);
3682
- }
3683
- .cmpl-cta-style-15 svg * {
3684
- fill: currentColor;
3685
- stroke: currentColor;
3686
- }
3687
- .cmpl-cta-style-15 {
3688
- border: var(--cta-style-15-border-width) solid var(--cta-style-15-mobile-border-colour);
3689
- border-radius: var(--cta-style-15-border-radius);
3690
- font-weight: var(--cta-style-15-font-weight);
3691
- letter-spacing: var(--cta-style-15-letter-spacing);
3692
- line-height: var(--cta-style-15-line-height);
3693
- font-family: var(--cta-style-15-font-family);
3694
- text-transform: var(--cta-style-15-text-transform);
3695
- font-style: var(--cta-style-15-font-style);
3696
- text-align: var(--cta-style-15-text-align);
3697
- -webkit-text-decoration: var(--cta-style-15-decoration-style);
3698
- text-decoration: var(--cta-style-15-decoration-style);
3699
- text-decoration-color: var(--cta-style-15-decoration-colour);
3700
- font-size: clamp(10px, var(--cta-style-15-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3701
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-15-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3702
- min-width: var(--cta-style-15-min-width-mobile);
3703
- padding: calc(var(--cta-style-15-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-15-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
3704
- --box-shadow-offset-x: var(--cta-style-15-shadow-offset-x, 0);
3705
- --box-shadow-offset-y: var(--cta-style-15-shadow-offset-y, 0);
3706
- --box-shadow-blur: var(--cta-style-15-shadow-blur, 0);
3707
- --box-shadow-spread: var(--cta-style-15-shadow-radius, 0);
3708
- --box-shadow-colour: var(--cta-style-15-shadow-colour, 0);
3709
- --box-shadow-position: var(--cta-style-15-shadow-position, 0);
3710
- --box-shadow-hover-offset-x: var( --cta-style-15-shadow-offset-hover-x, 0 );
3711
- --box-shadow-hover-offset-y: var( --cta-style-15-shadow-offset-hover-y, 0 );
3712
- --box-shadow-hover-blur: var( --cta-style-15-shadow-hover-blur, 0 );
3713
- --box-shadow-hover-spread: var( --cta-style-15-shadow-hover-radius, 0 );
3714
- --box-shadow-hover-colour: var( --cta-style-15-shadow-hover-colour, 0 );
3715
- --box-shadow-hover-position: var( --cta-style-15-shadow-hover-position, 0 );
3716
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
3717
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
3718
- }
3719
- .cmpl-cta-style-15:hover {
3720
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
3721
- }
3722
- @media screen and (min-width: 768px) {
3723
- .cmpl-cta-style-15 {
3724
- font-size: clamp(10px, var(--cta-style-15-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3725
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-15-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3726
- min-width: var(--cta-style-15-min-width-portrait);
3727
- padding: calc(var(--cta-style-15-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-15-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
3728
- background-color: var(--cta-style-15-background-colour);
3729
- border: var(--cta-style-15-border-width) solid var(--cta-style-15-border-colour);
3730
- color: var(--cta-style-15-colour);
3731
- }
3732
- .cmpl-cta-style-15 svg * {
3733
- fill: currentColor;
3734
- stroke: currentColor;
3735
- }
3736
- }
3737
- @media screen and (min-width: 1024px) {
3738
- .cmpl-cta-style-15 {
3739
- font-size: clamp(10px, var(--cta-style-15-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3740
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-15-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3741
- min-width: var(--cta-style-15-min-width-landscape);
3742
- padding: calc(var(--cta-style-15-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-15-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
3743
- }
3744
- }
3745
- @media screen and (min-width: 1440px) {
3746
- .cmpl-cta-style-15 {
3747
- font-size: clamp(10px, var(--cta-style-15-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3748
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-15-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3749
- min-width: var(--cta-style-15-min-width-desktop);
3750
- padding: calc(var(--cta-style-15-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-15-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
3751
- }
3752
- }
3753
- @media (hover: hover) {
3754
- .cmpl-cta-style-15:hover {
3755
- -webkit-text-decoration: var(--cta-style-15-decoration-style-hover);
3756
- text-decoration: var(--cta-style-15-decoration-style-hover);
3757
- text-decoration-color: var(--cta-style-15-decoration-colour-hover);
3758
- border: var(--cta-style-15-border-width) solid var(--cta-style-15-mobile-hover-border-colour);
3759
- background-color: var(--cta-style-15-mobile-hover-background-colour);
3760
- color: var(--cta-style-15-mobile-hover-colour);
3761
- }
3762
- .cmpl-cta-style-15:hover svg * {
3763
- fill: currentColor;
3764
- stroke: currentColor;
3765
- }
3766
- }
3767
- @media (hover: hover) and (hover: none) {
3768
- .cmpl-cta-style-15:hover {
3769
- background-color: var(--cta-style-15-mobile-background-colour);
3770
- }
3771
- }
3772
- @media screen and (hover: hover) and (min-width: 768px) {
3773
- .cmpl-cta-style-15:hover {
3774
- background-color: var(--cta-style-15-hover-background-colour);
3775
- border: var(--cta-style-15-border-width) solid var(--cta-style-15-hover-border-colour);
3776
- color: var(--cta-style-15-hover-colour);
3777
- }
3778
- .cmpl-cta-style-15:hover svg * {
3779
- fill: currentColor;
3780
- stroke: currentColor;
3781
- }
3782
- }
3783
- .cmpl-cta-style-15:active {
3784
- color: var(--cta-style-15-active-colour);
3785
- background-color: var(--cta-style-15-active-background-colour);
3786
- border: var(--cta-style-15-border-width) solid var(--cta-style-15-active-border-colour);
3787
- }
3788
- .cmpl-cta-style-15--inactive,
3789
- .cmpl-cta-style-15.cta-style-inactive,
3790
- .cmpl-cta-style-15[disabled] {
3791
- color: var(--cta-style-15-inactive-colour);
3792
- background-color: var(--cta-style-15-inactive-background-colour);
3793
- border: var(--cta-style-15-border-width) solid var(--cta-style-15-inactive-border-colour);
3794
- }
3795
- .cmpl-cta-style-15--selected,
3796
- .cmpl-cta-style-15.cta-style-selected {
3797
- color: var(--cta-style-15-selected-colour);
3798
- background-color: var(--cta-style-15-selected-background-colour);
3799
- border: var(--cta-style-15-border-width) solid var(--cta-style-15-selected-border-colour);
3800
- }
3801
- .cmpl-cta-style-16 {
3802
- justify-self: var(--cta-alignment);
3803
- justify-content: center;
3804
- justify-content: var(--cta-style-16-content-vertical-alignment, center);
3805
- background-image: var(--cta-style16-image-background);
3806
- background-size: var(--cta-style16-image-background-size);
3807
- background-repeat: var(--cta-style16-image-background-repeat);
3808
- background-color: var(--cta-style-16-mobile-background-colour);
3809
- color: var(--cta-style-16-mobile-colour);
3810
- }
3811
- .cmpl-cta-style-16 svg * {
3812
- fill: currentColor;
3813
- stroke: currentColor;
3814
- }
3815
- .cmpl-cta-style-16 {
3816
- border: var(--cta-style-16-border-width) solid var(--cta-style-16-mobile-border-colour);
3817
- border-radius: var(--cta-style-16-border-radius);
3818
- font-weight: var(--cta-style-16-font-weight);
3819
- letter-spacing: var(--cta-style-16-letter-spacing);
3820
- line-height: var(--cta-style-16-line-height);
3821
- font-family: var(--cta-style-16-font-family);
3822
- text-transform: var(--cta-style-16-text-transform);
3823
- font-style: var(--cta-style-16-font-style);
3824
- text-align: var(--cta-style-16-text-align);
3825
- -webkit-text-decoration: var(--cta-style-16-decoration-style);
3826
- text-decoration: var(--cta-style-16-decoration-style);
3827
- text-decoration-color: var(--cta-style-16-decoration-colour);
3828
- font-size: clamp(10px, var(--cta-style-16-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3829
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-16-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3830
- min-width: var(--cta-style-16-min-width-mobile);
3831
- padding: calc(var(--cta-style-16-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-16-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
3832
- --box-shadow-offset-x: var(--cta-style-16-shadow-offset-x, 0);
3833
- --box-shadow-offset-y: var(--cta-style-16-shadow-offset-y, 0);
3834
- --box-shadow-blur: var(--cta-style-16-shadow-blur, 0);
3835
- --box-shadow-spread: var(--cta-style-16-shadow-radius, 0);
3836
- --box-shadow-colour: var(--cta-style-16-shadow-colour, 0);
3837
- --box-shadow-position: var(--cta-style-16-shadow-position, 0);
3838
- --box-shadow-hover-offset-x: var( --cta-style-16-shadow-offset-hover-x, 0 );
3839
- --box-shadow-hover-offset-y: var( --cta-style-16-shadow-offset-hover-y, 0 );
3840
- --box-shadow-hover-blur: var( --cta-style-16-shadow-hover-blur, 0 );
3841
- --box-shadow-hover-spread: var( --cta-style-16-shadow-hover-radius, 0 );
3842
- --box-shadow-hover-colour: var( --cta-style-16-shadow-hover-colour, 0 );
3843
- --box-shadow-hover-position: var( --cta-style-16-shadow-hover-position, 0 );
3844
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
3845
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
3846
- }
3847
- .cmpl-cta-style-16:hover {
3848
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
3849
- }
3850
- @media screen and (min-width: 768px) {
3851
- .cmpl-cta-style-16 {
3852
- font-size: clamp(10px, var(--cta-style-16-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3853
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-16-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3854
- min-width: var(--cta-style-16-min-width-portrait);
3855
- padding: calc(var(--cta-style-16-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-16-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
3856
- background-color: var(--cta-style-16-background-colour);
3857
- border: var(--cta-style-16-border-width) solid var(--cta-style-16-border-colour);
3858
- color: var(--cta-style-16-colour);
3859
- }
3860
- .cmpl-cta-style-16 svg * {
3861
- fill: currentColor;
3862
- stroke: currentColor;
3863
- }
3864
- }
3865
- @media screen and (min-width: 1024px) {
3866
- .cmpl-cta-style-16 {
3867
- font-size: clamp(10px, var(--cta-style-16-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3868
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-16-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3869
- min-width: var(--cta-style-16-min-width-landscape);
3870
- padding: calc(var(--cta-style-16-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-16-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
3871
- }
3872
- }
3873
- @media screen and (min-width: 1440px) {
3874
- .cmpl-cta-style-16 {
3875
- font-size: clamp(10px, var(--cta-style-16-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3876
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-16-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3877
- min-width: var(--cta-style-16-min-width-desktop);
3878
- padding: calc(var(--cta-style-16-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-16-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
3879
- }
3880
- }
3881
- @media (hover: hover) {
3882
- .cmpl-cta-style-16:hover {
3883
- -webkit-text-decoration: var(--cta-style-16-decoration-style-hover);
3884
- text-decoration: var(--cta-style-16-decoration-style-hover);
3885
- text-decoration-color: var(--cta-style-16-decoration-colour-hover);
3886
- border: var(--cta-style-16-border-width) solid var(--cta-style-16-mobile-hover-border-colour);
3887
- background-color: var(--cta-style-16-mobile-hover-background-colour);
3888
- color: var(--cta-style-16-mobile-hover-colour);
3889
- }
3890
- .cmpl-cta-style-16:hover svg * {
3891
- fill: currentColor;
3892
- stroke: currentColor;
3893
- }
3894
- }
3895
- @media (hover: hover) and (hover: none) {
3896
- .cmpl-cta-style-16:hover {
3897
- background-color: var(--cta-style-16-mobile-background-colour);
3898
- }
3899
- }
3900
- @media screen and (hover: hover) and (min-width: 768px) {
3901
- .cmpl-cta-style-16:hover {
3902
- background-color: var(--cta-style-16-hover-background-colour);
3903
- border: var(--cta-style-16-border-width) solid var(--cta-style-16-hover-border-colour);
3904
- color: var(--cta-style-16-hover-colour);
3905
- }
3906
- .cmpl-cta-style-16:hover svg * {
3907
- fill: currentColor;
3908
- stroke: currentColor;
3909
- }
3910
- }
3911
- .cmpl-cta-style-16:active {
3912
- color: var(--cta-style-16-active-colour);
3913
- background-color: var(--cta-style-16-active-background-colour);
3914
- border: var(--cta-style-16-border-width) solid var(--cta-style-16-active-border-colour);
3915
- }
3916
- .cmpl-cta-style-16--inactive,
3917
- .cmpl-cta-style-16.cta-style-inactive,
3918
- .cmpl-cta-style-16[disabled] {
3919
- color: var(--cta-style-16-inactive-colour);
3920
- background-color: var(--cta-style-16-inactive-background-colour);
3921
- border: var(--cta-style-16-border-width) solid var(--cta-style-16-inactive-border-colour);
3922
- }
3923
- .cmpl-cta-style-16--selected,
3924
- .cmpl-cta-style-16.cta-style-selected {
3925
- color: var(--cta-style-16-selected-colour);
3926
- background-color: var(--cta-style-16-selected-background-colour);
3927
- border: var(--cta-style-16-border-width) solid var(--cta-style-16-selected-border-colour);
3928
- }
3929
- .cmpl-cta-style-17 {
3930
- justify-self: var(--cta-alignment);
3931
- justify-content: center;
3932
- justify-content: var(--cta-style-17-content-vertical-alignment, center);
3933
- background-image: var(--cta-style17-image-background);
3934
- background-size: var(--cta-style17-image-background-size);
3935
- background-repeat: var(--cta-style17-image-background-repeat);
3936
- background-color: var(--cta-style-17-mobile-background-colour);
3937
- color: var(--cta-style-17-mobile-colour);
3938
- }
3939
- .cmpl-cta-style-17 svg * {
3940
- fill: currentColor;
3941
- stroke: currentColor;
3942
- }
3943
- .cmpl-cta-style-17 {
3944
- border: var(--cta-style-17-border-width) solid var(--cta-style-17-mobile-border-colour);
3945
- border-radius: var(--cta-style-17-border-radius);
3946
- font-weight: var(--cta-style-17-font-weight);
3947
- letter-spacing: var(--cta-style-17-letter-spacing);
3948
- line-height: var(--cta-style-17-line-height);
3949
- font-family: var(--cta-style-17-font-family);
3950
- text-transform: var(--cta-style-17-text-transform);
3951
- font-style: var(--cta-style-17-font-style);
3952
- text-align: var(--cta-style-17-text-align);
3953
- -webkit-text-decoration: var(--cta-style-17-decoration-style);
3954
- text-decoration: var(--cta-style-17-decoration-style);
3955
- text-decoration-color: var(--cta-style-17-decoration-colour);
3956
- font-size: clamp(10px, var(--cta-style-17-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3957
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-17-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3958
- min-width: var(--cta-style-17-min-width-mobile);
3959
- padding: calc(var(--cta-style-17-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-17-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
3960
- --box-shadow-offset-x: var(--cta-style-17-shadow-offset-x, 0);
3961
- --box-shadow-offset-y: var(--cta-style-17-shadow-offset-y, 0);
3962
- --box-shadow-blur: var(--cta-style-17-shadow-blur, 0);
3963
- --box-shadow-spread: var(--cta-style-17-shadow-radius, 0);
3964
- --box-shadow-colour: var(--cta-style-17-shadow-colour, 0);
3965
- --box-shadow-position: var(--cta-style-17-shadow-position, 0);
3966
- --box-shadow-hover-offset-x: var( --cta-style-17-shadow-offset-hover-x, 0 );
3967
- --box-shadow-hover-offset-y: var( --cta-style-17-shadow-offset-hover-y, 0 );
3968
- --box-shadow-hover-blur: var( --cta-style-17-shadow-hover-blur, 0 );
3969
- --box-shadow-hover-spread: var( --cta-style-17-shadow-hover-radius, 0 );
3970
- --box-shadow-hover-colour: var( --cta-style-17-shadow-hover-colour, 0 );
3971
- --box-shadow-hover-position: var( --cta-style-17-shadow-hover-position, 0 );
3972
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
3973
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
3974
- }
3975
- .cmpl-cta-style-17:hover {
3976
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
3977
- }
3978
- @media screen and (min-width: 768px) {
3979
- .cmpl-cta-style-17 {
3980
- font-size: clamp(10px, var(--cta-style-17-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3981
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-17-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
3982
- min-width: var(--cta-style-17-min-width-portrait);
3983
- padding: calc(var(--cta-style-17-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-17-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
3984
- background-color: var(--cta-style-17-background-colour);
3985
- border: var(--cta-style-17-border-width) solid var(--cta-style-17-border-colour);
3986
- color: var(--cta-style-17-colour);
3987
- }
3988
- .cmpl-cta-style-17 svg * {
3989
- fill: currentColor;
3990
- stroke: currentColor;
3991
- }
3992
- }
3993
- @media screen and (min-width: 1024px) {
3994
- .cmpl-cta-style-17 {
3995
- font-size: clamp(10px, var(--cta-style-17-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
3996
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-17-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
3997
- min-width: var(--cta-style-17-min-width-landscape);
3998
- padding: calc(var(--cta-style-17-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-17-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
3999
- }
4000
- }
4001
- @media screen and (min-width: 1440px) {
4002
- .cmpl-cta-style-17 {
4003
- font-size: clamp(10px, var(--cta-style-17-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4004
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-17-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
4005
- min-width: var(--cta-style-17-min-width-desktop);
4006
- padding: calc(var(--cta-style-17-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-17-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
4007
- }
4008
- }
4009
- @media (hover: hover) {
4010
- .cmpl-cta-style-17:hover {
4011
- -webkit-text-decoration: var(--cta-style-17-decoration-style-hover);
4012
- text-decoration: var(--cta-style-17-decoration-style-hover);
4013
- text-decoration-color: var(--cta-style-17-decoration-colour-hover);
4014
- border: var(--cta-style-17-border-width) solid var(--cta-style-17-mobile-hover-border-colour);
4015
- background-color: var(--cta-style-17-mobile-hover-background-colour);
4016
- color: var(--cta-style-17-mobile-hover-colour);
4017
- }
4018
- .cmpl-cta-style-17:hover svg * {
4019
- fill: currentColor;
4020
- stroke: currentColor;
4021
- }
4022
- }
4023
- @media (hover: hover) and (hover: none) {
4024
- .cmpl-cta-style-17:hover {
4025
- background-color: var(--cta-style-17-mobile-background-colour);
4026
- }
4027
- }
4028
- @media screen and (hover: hover) and (min-width: 768px) {
4029
- .cmpl-cta-style-17:hover {
4030
- background-color: var(--cta-style-17-hover-background-colour);
4031
- border: var(--cta-style-17-border-width) solid var(--cta-style-17-hover-border-colour);
4032
- color: var(--cta-style-17-hover-colour);
4033
- }
4034
- .cmpl-cta-style-17:hover svg * {
4035
- fill: currentColor;
4036
- stroke: currentColor;
4037
- }
4038
- }
4039
- .cmpl-cta-style-17:active {
4040
- color: var(--cta-style-17-active-colour);
4041
- background-color: var(--cta-style-17-active-background-colour);
4042
- border: var(--cta-style-17-border-width) solid var(--cta-style-17-active-border-colour);
4043
- }
4044
- .cmpl-cta-style-17--inactive,
4045
- .cmpl-cta-style-17.cta-style-inactive,
4046
- .cmpl-cta-style-17[disabled] {
4047
- color: var(--cta-style-17-inactive-colour);
4048
- background-color: var(--cta-style-17-inactive-background-colour);
4049
- border: var(--cta-style-17-border-width) solid var(--cta-style-17-inactive-border-colour);
4050
- }
4051
- .cmpl-cta-style-17--selected,
4052
- .cmpl-cta-style-17.cta-style-selected {
4053
- color: var(--cta-style-17-selected-colour);
4054
- background-color: var(--cta-style-17-selected-background-colour);
4055
- border: var(--cta-style-17-border-width) solid var(--cta-style-17-selected-border-colour);
4056
- }
4057
- .cmpl-cta-style-18 {
4058
- justify-self: var(--cta-alignment);
4059
- justify-content: center;
4060
- justify-content: var(--cta-style-18-content-vertical-alignment, center);
4061
- background-image: var(--cta-style18-image-background);
4062
- background-size: var(--cta-style18-image-background-size);
4063
- background-repeat: var(--cta-style18-image-background-repeat);
4064
- background-color: var(--cta-style-18-mobile-background-colour);
4065
- color: var(--cta-style-18-mobile-colour);
4066
- }
4067
- .cmpl-cta-style-18 svg * {
4068
- fill: currentColor;
4069
- stroke: currentColor;
4070
- }
4071
- .cmpl-cta-style-18 {
4072
- border: var(--cta-style-18-border-width) solid var(--cta-style-18-mobile-border-colour);
4073
- border-radius: var(--cta-style-18-border-radius);
4074
- font-weight: var(--cta-style-18-font-weight);
4075
- letter-spacing: var(--cta-style-18-letter-spacing);
4076
- line-height: var(--cta-style-18-line-height);
4077
- font-family: var(--cta-style-18-font-family);
4078
- text-transform: var(--cta-style-18-text-transform);
4079
- font-style: var(--cta-style-18-font-style);
4080
- text-align: var(--cta-style-18-text-align);
4081
- -webkit-text-decoration: var(--cta-style-18-decoration-style);
4082
- text-decoration: var(--cta-style-18-decoration-style);
4083
- text-decoration-color: var(--cta-style-18-decoration-colour);
4084
- font-size: clamp(10px, var(--cta-style-18-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4085
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-18-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
4086
- min-width: var(--cta-style-18-min-width-mobile);
4087
- padding: calc(var(--cta-style-18-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-18-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
4088
- --box-shadow-offset-x: var(--cta-style-18-shadow-offset-x, 0);
4089
- --box-shadow-offset-y: var(--cta-style-18-shadow-offset-y, 0);
4090
- --box-shadow-blur: var(--cta-style-18-shadow-blur, 0);
4091
- --box-shadow-spread: var(--cta-style-18-shadow-radius, 0);
4092
- --box-shadow-colour: var(--cta-style-18-shadow-colour, 0);
4093
- --box-shadow-position: var(--cta-style-18-shadow-position, 0);
4094
- --box-shadow-hover-offset-x: var( --cta-style-18-shadow-offset-hover-x, 0 );
4095
- --box-shadow-hover-offset-y: var( --cta-style-18-shadow-offset-hover-y, 0 );
4096
- --box-shadow-hover-blur: var( --cta-style-18-shadow-hover-blur, 0 );
4097
- --box-shadow-hover-spread: var( --cta-style-18-shadow-hover-radius, 0 );
4098
- --box-shadow-hover-colour: var( --cta-style-18-shadow-hover-colour, 0 );
4099
- --box-shadow-hover-position: var( --cta-style-18-shadow-hover-position, 0 );
4100
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
4101
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
4102
- }
4103
- .cmpl-cta-style-18:hover {
4104
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
4105
- }
4106
- @media screen and (min-width: 768px) {
4107
- .cmpl-cta-style-18 {
4108
- font-size: clamp(10px, var(--cta-style-18-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4109
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-18-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
4110
- min-width: var(--cta-style-18-min-width-portrait);
4111
- padding: calc(var(--cta-style-18-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-18-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
4112
- background-color: var(--cta-style-18-background-colour);
4113
- border: var(--cta-style-18-border-width) solid var(--cta-style-18-border-colour);
4114
- color: var(--cta-style-18-colour);
4115
- }
4116
- .cmpl-cta-style-18 svg * {
4117
- fill: currentColor;
4118
- stroke: currentColor;
4119
- }
4120
- }
4121
- @media screen and (min-width: 1024px) {
4122
- .cmpl-cta-style-18 {
4123
- font-size: clamp(10px, var(--cta-style-18-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4124
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-18-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
4125
- min-width: var(--cta-style-18-min-width-landscape);
4126
- padding: calc(var(--cta-style-18-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-18-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
4127
- }
4128
- }
4129
- @media screen and (min-width: 1440px) {
4130
- .cmpl-cta-style-18 {
4131
- font-size: clamp(10px, var(--cta-style-18-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4132
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-18-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
4133
- min-width: var(--cta-style-18-min-width-desktop);
4134
- padding: calc(var(--cta-style-18-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-18-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
4135
- }
4136
- }
4137
- @media (hover: hover) {
4138
- .cmpl-cta-style-18:hover {
4139
- -webkit-text-decoration: var(--cta-style-18-decoration-style-hover);
4140
- text-decoration: var(--cta-style-18-decoration-style-hover);
4141
- text-decoration-color: var(--cta-style-18-decoration-colour-hover);
4142
- border: var(--cta-style-18-border-width) solid var(--cta-style-18-mobile-hover-border-colour);
4143
- background-color: var(--cta-style-18-mobile-hover-background-colour);
4144
- color: var(--cta-style-18-mobile-hover-colour);
4145
- }
4146
- .cmpl-cta-style-18:hover svg * {
4147
- fill: currentColor;
4148
- stroke: currentColor;
4149
- }
4150
- }
4151
- @media (hover: hover) and (hover: none) {
4152
- .cmpl-cta-style-18:hover {
4153
- background-color: var(--cta-style-18-mobile-background-colour);
4154
- }
4155
- }
4156
- @media screen and (hover: hover) and (min-width: 768px) {
4157
- .cmpl-cta-style-18:hover {
4158
- background-color: var(--cta-style-18-hover-background-colour);
4159
- border: var(--cta-style-18-border-width) solid var(--cta-style-18-hover-border-colour);
4160
- color: var(--cta-style-18-hover-colour);
4161
- }
4162
- .cmpl-cta-style-18:hover svg * {
4163
- fill: currentColor;
4164
- stroke: currentColor;
4165
- }
4166
- }
4167
- .cmpl-cta-style-18:active {
4168
- color: var(--cta-style-18-active-colour);
4169
- background-color: var(--cta-style-18-active-background-colour);
4170
- border: var(--cta-style-18-border-width) solid var(--cta-style-18-active-border-colour);
4171
- }
4172
- .cmpl-cta-style-18--inactive,
4173
- .cmpl-cta-style-18.cta-style-inactive,
4174
- .cmpl-cta-style-18[disabled] {
4175
- color: var(--cta-style-18-inactive-colour);
4176
- background-color: var(--cta-style-18-inactive-background-colour);
4177
- border: var(--cta-style-18-border-width) solid var(--cta-style-18-inactive-border-colour);
4178
- }
4179
- .cmpl-cta-style-18--selected,
4180
- .cmpl-cta-style-18.cta-style-selected {
4181
- color: var(--cta-style-18-selected-colour);
4182
- background-color: var(--cta-style-18-selected-background-colour);
4183
- border: var(--cta-style-18-border-width) solid var(--cta-style-18-selected-border-colour);
4184
- }
4185
- .cmpl-cta-style-19 {
4186
- justify-self: var(--cta-alignment);
4187
- justify-content: center;
4188
- justify-content: var(--cta-style-19-content-vertical-alignment, center);
4189
- background-image: var(--cta-style19-image-background);
4190
- background-size: var(--cta-style19-image-background-size);
4191
- background-repeat: var(--cta-style19-image-background-repeat);
4192
- background-color: var(--cta-style-19-mobile-background-colour);
4193
- color: var(--cta-style-19-mobile-colour);
4194
- }
4195
- .cmpl-cta-style-19 svg * {
4196
- fill: currentColor;
4197
- stroke: currentColor;
4198
- }
4199
- .cmpl-cta-style-19 {
4200
- border: var(--cta-style-19-border-width) solid var(--cta-style-19-mobile-border-colour);
4201
- border-radius: var(--cta-style-19-border-radius);
4202
- font-weight: var(--cta-style-19-font-weight);
4203
- letter-spacing: var(--cta-style-19-letter-spacing);
4204
- line-height: var(--cta-style-19-line-height);
4205
- font-family: var(--cta-style-19-font-family);
4206
- text-transform: var(--cta-style-19-text-transform);
4207
- font-style: var(--cta-style-19-font-style);
4208
- text-align: var(--cta-style-19-text-align);
4209
- -webkit-text-decoration: var(--cta-style-19-decoration-style);
4210
- text-decoration: var(--cta-style-19-decoration-style);
4211
- text-decoration-color: var(--cta-style-19-decoration-colour);
4212
- font-size: clamp(10px, var(--cta-style-19-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4213
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-19-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
4214
- min-width: var(--cta-style-19-min-width-mobile);
4215
- padding: calc(var(--cta-style-19-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-19-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
4216
- --box-shadow-offset-x: var(--cta-style-19-shadow-offset-x, 0);
4217
- --box-shadow-offset-y: var(--cta-style-19-shadow-offset-y, 0);
4218
- --box-shadow-blur: var(--cta-style-19-shadow-blur, 0);
4219
- --box-shadow-spread: var(--cta-style-19-shadow-radius, 0);
4220
- --box-shadow-colour: var(--cta-style-19-shadow-colour, 0);
4221
- --box-shadow-position: var(--cta-style-19-shadow-position, 0);
4222
- --box-shadow-hover-offset-x: var( --cta-style-19-shadow-offset-hover-x, 0 );
4223
- --box-shadow-hover-offset-y: var( --cta-style-19-shadow-offset-hover-y, 0 );
4224
- --box-shadow-hover-blur: var( --cta-style-19-shadow-hover-blur, 0 );
4225
- --box-shadow-hover-spread: var( --cta-style-19-shadow-hover-radius, 0 );
4226
- --box-shadow-hover-colour: var( --cta-style-19-shadow-hover-colour, 0 );
4227
- --box-shadow-hover-position: var( --cta-style-19-shadow-hover-position, 0 );
4228
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
4229
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
4230
- }
4231
- .cmpl-cta-style-19:hover {
4232
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
4233
- }
4234
- @media screen and (min-width: 768px) {
4235
- .cmpl-cta-style-19 {
4236
- font-size: clamp(10px, var(--cta-style-19-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4237
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-19-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
4238
- min-width: var(--cta-style-19-min-width-portrait);
4239
- padding: calc(var(--cta-style-19-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-19-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
4240
- background-color: var(--cta-style-19-background-colour);
4241
- border: var(--cta-style-19-border-width) solid var(--cta-style-19-border-colour);
4242
- color: var(--cta-style-19-colour);
4243
- }
4244
- .cmpl-cta-style-19 svg * {
4245
- fill: currentColor;
4246
- stroke: currentColor;
4247
- }
4248
- }
4249
- @media screen and (min-width: 1024px) {
4250
- .cmpl-cta-style-19 {
4251
- font-size: clamp(10px, var(--cta-style-19-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4252
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-19-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
4253
- min-width: var(--cta-style-19-min-width-landscape);
4254
- padding: calc(var(--cta-style-19-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-19-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
4255
- }
4256
- }
4257
- @media screen and (min-width: 1440px) {
4258
- .cmpl-cta-style-19 {
4259
- font-size: clamp(10px, var(--cta-style-19-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4260
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-19-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
4261
- min-width: var(--cta-style-19-min-width-desktop);
4262
- padding: calc(var(--cta-style-19-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-19-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
4263
- }
4264
- }
4265
- @media (hover: hover) {
4266
- .cmpl-cta-style-19:hover {
4267
- -webkit-text-decoration: var(--cta-style-19-decoration-style-hover);
4268
- text-decoration: var(--cta-style-19-decoration-style-hover);
4269
- text-decoration-color: var(--cta-style-19-decoration-colour-hover);
4270
- border: var(--cta-style-19-border-width) solid var(--cta-style-19-mobile-hover-border-colour);
4271
- background-color: var(--cta-style-19-mobile-hover-background-colour);
4272
- color: var(--cta-style-19-mobile-hover-colour);
4273
- }
4274
- .cmpl-cta-style-19:hover svg * {
4275
- fill: currentColor;
4276
- stroke: currentColor;
4277
- }
4278
- }
4279
- @media (hover: hover) and (hover: none) {
4280
- .cmpl-cta-style-19:hover {
4281
- background-color: var(--cta-style-19-mobile-background-colour);
4282
- }
4283
- }
4284
- @media screen and (hover: hover) and (min-width: 768px) {
4285
- .cmpl-cta-style-19:hover {
4286
- background-color: var(--cta-style-19-hover-background-colour);
4287
- border: var(--cta-style-19-border-width) solid var(--cta-style-19-hover-border-colour);
4288
- color: var(--cta-style-19-hover-colour);
4289
- }
4290
- .cmpl-cta-style-19:hover svg * {
4291
- fill: currentColor;
4292
- stroke: currentColor;
4293
- }
4294
- }
4295
- .cmpl-cta-style-19:active {
4296
- color: var(--cta-style-19-active-colour);
4297
- background-color: var(--cta-style-19-active-background-colour);
4298
- border: var(--cta-style-19-border-width) solid var(--cta-style-19-active-border-colour);
4299
- }
4300
- .cmpl-cta-style-19--inactive,
4301
- .cmpl-cta-style-19.cta-style-inactive,
4302
- .cmpl-cta-style-19[disabled] {
4303
- color: var(--cta-style-19-inactive-colour);
4304
- background-color: var(--cta-style-19-inactive-background-colour);
4305
- border: var(--cta-style-19-border-width) solid var(--cta-style-19-inactive-border-colour);
4306
- }
4307
- .cmpl-cta-style-19--selected,
4308
- .cmpl-cta-style-19.cta-style-selected {
4309
- color: var(--cta-style-19-selected-colour);
4310
- background-color: var(--cta-style-19-selected-background-colour);
4311
- border: var(--cta-style-19-border-width) solid var(--cta-style-19-selected-border-colour);
4312
- }
4313
- .cmpl-cta-style-20 {
4314
- justify-self: var(--cta-alignment);
4315
- justify-content: center;
4316
- justify-content: var(--cta-style-20-content-vertical-alignment, center);
4317
- background-image: var(--cta-style20-image-background);
4318
- background-size: var(--cta-style20-image-background-size);
4319
- background-repeat: var(--cta-style20-image-background-repeat);
4320
- background-color: var(--cta-style-20-mobile-background-colour);
4321
- color: var(--cta-style-20-mobile-colour);
4322
- }
4323
- .cmpl-cta-style-20 svg * {
4324
- fill: currentColor;
4325
- stroke: currentColor;
4326
- }
4327
- .cmpl-cta-style-20 {
4328
- border: var(--cta-style-20-border-width) solid var(--cta-style-20-mobile-border-colour);
4329
- border-radius: var(--cta-style-20-border-radius);
4330
- font-weight: var(--cta-style-20-font-weight);
4331
- letter-spacing: var(--cta-style-20-letter-spacing);
4332
- line-height: var(--cta-style-20-line-height);
4333
- font-family: var(--cta-style-20-font-family);
4334
- text-transform: var(--cta-style-20-text-transform);
4335
- font-style: var(--cta-style-20-font-style);
4336
- text-align: var(--cta-style-20-text-align);
4337
- -webkit-text-decoration: var(--cta-style-20-decoration-style);
4338
- text-decoration: var(--cta-style-20-decoration-style);
4339
- text-decoration-color: var(--cta-style-20-decoration-colour);
4340
- font-size: clamp(10px, var(--cta-style-20-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4341
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-20-font-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
4342
- min-width: var(--cta-style-20-min-width-mobile);
4343
- padding: calc(var(--cta-style-20-padding-block-mobile) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-20-padding-inline-mobile) / var(--design-reference) * var(--screen-width));
4344
- --box-shadow-offset-x: var(--cta-style-20-shadow-offset-x, 0);
4345
- --box-shadow-offset-y: var(--cta-style-20-shadow-offset-y, 0);
4346
- --box-shadow-blur: var(--cta-style-20-shadow-blur, 0);
4347
- --box-shadow-spread: var(--cta-style-20-shadow-radius, 0);
4348
- --box-shadow-colour: var(--cta-style-20-shadow-colour, 0);
4349
- --box-shadow-position: var(--cta-style-20-shadow-position, 0);
4350
- --box-shadow-hover-offset-x: var( --cta-style-20-shadow-offset-hover-x, 0 );
4351
- --box-shadow-hover-offset-y: var( --cta-style-20-shadow-offset-hover-y, 0 );
4352
- --box-shadow-hover-blur: var( --cta-style-20-shadow-hover-blur, 0 );
4353
- --box-shadow-hover-spread: var( --cta-style-20-shadow-hover-radius, 0 );
4354
- --box-shadow-hover-colour: var( --cta-style-20-shadow-hover-colour, 0 );
4355
- --box-shadow-hover-position: var( --cta-style-20-shadow-hover-position, 0 );
4356
- box-shadow: calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) calc(0 / var(--desktop-design-reference) * var(--screen-width-static)) 0 0;
4357
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour) var(--box-shadow-position);
4358
- }
4359
- .cmpl-cta-style-20:hover {
4360
- box-shadow: calc(var(--box-shadow-hover-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-hover-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
4361
- }
4362
- @media screen and (min-width: 768px) {
4363
- .cmpl-cta-style-20 {
4364
- font-size: clamp(10px, var(--cta-style-20-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4365
- font-size: clamp(var(--cta-style-font-size-min-mobile, 10px), var(--cta-style-20-font-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-mobile, 180px));
4366
- min-width: var(--cta-style-20-min-width-portrait);
4367
- padding: calc(var(--cta-style-20-padding-block-portrait) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-20-padding-inline-portrait) / var(--design-reference) * var(--screen-width));
4368
- background-color: var(--cta-style-20-background-colour);
4369
- border: var(--cta-style-20-border-width) solid var(--cta-style-20-border-colour);
4370
- color: var(--cta-style-20-colour);
4371
- }
4372
- .cmpl-cta-style-20 svg * {
4373
- fill: currentColor;
4374
- stroke: currentColor;
4375
- }
4376
- }
4377
- @media screen and (min-width: 1024px) {
4378
- .cmpl-cta-style-20 {
4379
- font-size: clamp(10px, var(--cta-style-20-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4380
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-20-font-size-landscape) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
4381
- min-width: var(--cta-style-20-min-width-landscape);
4382
- padding: calc(var(--cta-style-20-padding-block-landscape) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-20-padding-inline-landscape) / var(--design-reference) * var(--screen-width));
4383
- }
4384
- }
4385
- @media screen and (min-width: 1440px) {
4386
- .cmpl-cta-style-20 {
4387
- font-size: clamp(10px, var(--cta-style-20-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
4388
- font-size: clamp(var(--cta-style-font-size-min-desktop, 10px), var(--cta-style-20-font-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--cta-style-font-size-max-desktop, 180px));
4389
- min-width: var(--cta-style-20-min-width-desktop);
4390
- padding: calc(var(--cta-style-20-padding-block-desktop) / var(--design-reference) * var(--screen-width)) calc(var(--cta-style-20-padding-inline-desktop) / var(--design-reference) * var(--screen-width));
4391
- }
4392
- }
4393
- @media (hover: hover) {
4394
- .cmpl-cta-style-20:hover {
4395
- -webkit-text-decoration: var(--cta-style-20-decoration-style-hover);
4396
- text-decoration: var(--cta-style-20-decoration-style-hover);
4397
- text-decoration-color: var(--cta-style-20-decoration-colour-hover);
4398
- border: var(--cta-style-20-border-width) solid var(--cta-style-20-mobile-hover-border-colour);
4399
- background-color: var(--cta-style-20-mobile-hover-background-colour);
4400
- color: var(--cta-style-20-mobile-hover-colour);
4401
- }
4402
- .cmpl-cta-style-20:hover svg * {
4403
- fill: currentColor;
4404
- stroke: currentColor;
4405
- }
4406
- }
4407
- @media (hover: hover) and (hover: none) {
4408
- .cmpl-cta-style-20:hover {
4409
- background-color: var(--cta-style-20-mobile-background-colour);
4410
- }
4411
- }
4412
- @media screen and (hover: hover) and (min-width: 768px) {
4413
- .cmpl-cta-style-20:hover {
4414
- background-color: var(--cta-style-20-hover-background-colour);
4415
- border: var(--cta-style-20-border-width) solid var(--cta-style-20-hover-border-colour);
4416
- color: var(--cta-style-20-hover-colour);
4417
- }
4418
- .cmpl-cta-style-20:hover svg * {
4419
- fill: currentColor;
4420
- stroke: currentColor;
4421
- }
4422
- }
4423
- .cmpl-cta-style-20:active {
4424
- color: var(--cta-style-20-active-colour);
4425
- background-color: var(--cta-style-20-active-background-colour);
4426
- border: var(--cta-style-20-border-width) solid var(--cta-style-20-active-border-colour);
4427
- }
4428
- .cmpl-cta-style-20--inactive,
4429
- .cmpl-cta-style-20.cta-style-inactive,
4430
- .cmpl-cta-style-20[disabled] {
4431
- color: var(--cta-style-20-inactive-colour);
4432
- background-color: var(--cta-style-20-inactive-background-colour);
4433
- border: var(--cta-style-20-border-width) solid var(--cta-style-20-inactive-border-colour);
4434
- }
4435
- .cmpl-cta-style-20--selected,
4436
- .cmpl-cta-style-20.cta-style-selected {
4437
- color: var(--cta-style-20-selected-colour);
4438
- background-color: var(--cta-style-20-selected-background-colour);
4439
- border: var(--cta-style-20-border-width) solid var(--cta-style-20-selected-border-colour);
4440
- }
4441
- @layer base-styles {
4442
- .cmpl-core-group-container-styles {
4443
- display: grid;
4444
- grid-template: "main"/1fr;
4445
- place-items: center;
4446
- }
4447
- .cmpl-core-group-container-styles__grid-container {
4448
- grid-area: main;
4449
- place-self: stretch;
4450
- }
4451
- .cmpl-core-group-container-styles__grid-container.flex-layout-container {
4452
- display: flex;
4453
- display: var(--display-type, flex);
4454
- justify-content: flex-start;
4455
- justify-content: var(--justify-content-mobile, flex-start);
4456
- flex-direction: row;
4457
- flex-direction: var(--flex-direction-mobile, row);
4458
- align-items: center;
4459
- align-items: var(--align-items-mobile, center);
4460
- gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4461
- gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
4462
- flex-wrap: nowrap;
4463
- flex-wrap: var(--flex-wrap-mobile, nowrap);
4464
- }
4465
- @media screen and (min-width: 768px) {
4466
- .cmpl-core-group-container-styles__grid-container.flex-layout-container {
4467
- justify-content: flex-start;
4468
- justify-content: var(--justify-content-portrait, flex-start);
4469
- flex-direction: row;
4470
- flex-direction: var(--flex-direction-portrait, row);
4471
- align-items: center;
4472
- align-items: var(--align-items-portrait, center);
4473
- gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4474
- gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-portrait, 0));
4475
- flex-wrap: nowrap;
4476
- flex-wrap: var(--flex-wrap-portrait, nowrap);
4477
- }
4478
- }
4479
- @media screen and (min-width: 1024px) {
4480
- .cmpl-core-group-container-styles__grid-container.flex-layout-container {
4481
- justify-content: flex-start;
4482
- justify-content: var(--justify-content-desktop, flex-start);
4483
- flex-direction: row;
4484
- flex-direction: var(--flex-direction-desktop, row);
4485
- align-items: center;
4486
- align-items: var(--align-items-desktop, center);
4487
- gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4488
- gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0));
4489
- flex-wrap: nowrap;
4490
- flex-wrap: var(--flex-wrap-desktop, nowrap);
4491
- }
4492
- }
4493
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4494
- display: "grid";
4495
- display: var(--display-type, "grid");
4496
- position: relative;
4497
- scroll-behavior: smooth;
4498
- overscroll-behavior-x: contain;
4499
- scroll-snap-type: none;
4500
- scroll-snap-type: var(--scroll-snap-type-mobile, none);
4501
- }
4502
- .cmpl-core-group-container-styles__grid-container.grid-layout-container > div {
4503
- scroll-snap-align: start;
4504
- scroll-snap-align: var(--scroll-snap-align-mobile, start);
4505
- }
4506
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4507
- overflow: hidden;
4508
- overflow: var(--container-overflow-type-mobile, hidden);
4509
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4510
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
4511
- grid-auto-flow: row;
4512
- grid-auto-flow: var(--grid-auto-flow-mobile, row);
4513
- grid-auto-columns: 1fr;
4514
- grid-auto-columns: var(--grid-auto-columns-mobile, 1fr);
4515
- grid-auto-rows: auto;
4516
- grid-auto-rows: var(--grid-auto-rows-mobile, auto);
4517
- grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), 1fr));
4518
- grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), var(--grid-auto-columns-mobile, 1fr)));
4519
- grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), 1fr));
4520
- grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), var(--grid-auto-rows-mobile, 1fr)));
4521
- }
4522
- @media screen and (min-width: 1024px) {
4523
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(left) {
4524
- content: "\25c4";
4525
- position: absolute;
4526
- place-self: center flex-start;
4527
- z-index: 50;
4528
- }
4529
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(right) {
4530
- content: "\25ba";
4531
- position: absolute;
4532
- place-self: center flex-end;
4533
- z-index: 50;
4534
- }
4535
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*) {
4536
- border: 1px solid black;
4537
- border-radius: 10px;
4538
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4539
- background: rgba(0, 0, 0, 0.163);
4540
- color: white;
4541
- opacity: 0.7;
4542
- cursor: pointer;
4543
- transition: scale 0.3s ease-in-out;
4544
- }
4545
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):hover,
4546
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):focus {
4547
- opacity: 1;
4548
- scale: 1.2;
4549
- }
4550
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):active {
4551
- translate: 1px 1px;
4552
- }
4553
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):disabled {
4554
- opacity: 0.2;
4555
- cursor: inherit;
4556
- }
4557
- }
4558
- @media screen and (min-width: 768px) and (max-width: 1023px) {
4559
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(left) {
4560
- content: "\25c4";
4561
- position: absolute;
4562
- place-self: center flex-start;
4563
- z-index: 50;
4564
- }
4565
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(right) {
4566
- content: "\25ba";
4567
- position: absolute;
4568
- place-self: center flex-end;
4569
- z-index: 50;
4570
- }
4571
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*) {
4572
- border: 1px solid black;
4573
- border-radius: 10px;
4574
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4575
- background: rgba(0, 0, 0, 0.163);
4576
- color: white;
4577
- opacity: 0.7;
4578
- cursor: pointer;
4579
- transition: scale 0.3s ease-in-out;
4580
- }
4581
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):hover,
4582
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):focus {
4583
- opacity: 1;
4584
- scale: 1.2;
4585
- }
4586
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):active {
4587
- translate: 1px 1px;
4588
- }
4589
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):disabled {
4590
- opacity: 0.2;
4591
- cursor: inherit;
4592
- }
4593
- }
4594
- @media screen and (max-width: 767px) {
4595
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(left) {
4596
- content: "\25c4";
4597
- position: absolute;
4598
- place-self: center flex-start;
4599
- z-index: 50;
4600
- }
4601
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(right) {
4602
- content: "\25ba";
4603
- position: absolute;
4604
- place-self: center flex-end;
4605
- z-index: 50;
4606
- }
4607
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*) {
4608
- border: 1px solid black;
4609
- border-radius: 10px;
4610
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4611
- background: rgba(0, 0, 0, 0.163);
4612
- color: white;
4613
- opacity: 0.7;
4614
- cursor: pointer;
4615
- transition: scale 0.3s ease-in-out;
4616
- }
4617
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):hover,
4618
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):focus {
4619
- opacity: 1;
4620
- scale: 1.2;
4621
- }
4622
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):active {
4623
- translate: 1px 1px;
4624
- }
4625
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):disabled {
4626
- opacity: 0.2;
4627
- cursor: inherit;
4628
- }
4629
- }
4630
- @media screen and (min-width: 768px) {
4631
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4632
- scroll-snap-type: none;
4633
- scroll-snap-type: var(--scroll-snap-type-portrait, none);
4634
- }
4635
- .cmpl-core-group-container-styles__grid-container.grid-layout-container > div {
4636
- scroll-snap-align: start;
4637
- scroll-snap-align: var(--scroll-snap-align-portrait, start);
4638
- }
4639
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4640
- overflow: hidden;
4641
- overflow: var(--container-overflow-type-portrait, hidden);
4642
- grid-auto-flow: row;
4643
- grid-auto-flow: var(--grid-auto-flow-portrait, row);
4644
- grid-auto-columns: 1fr;
4645
- grid-auto-columns: var(--grid-auto-columns-portrait, 1fr);
4646
- grid-auto-rows: auto;
4647
- grid-auto-rows: var(--grid-auto-rows-portrait, auto);
4648
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4649
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-portrait, 0));
4650
- grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), 1fr));
4651
- grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), var(--grid-auto-columns-portrait, 1fr)));
4652
- grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), 1fr));
4653
- grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), var(--grid-auto-rows-portrait, 1fr)));
4654
- }
4655
- }
4656
- @media screen and (min-width: 1024px) {
4657
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4658
- scroll-snap-type: none;
4659
- scroll-snap-type: var(--scroll-snap-type-desktop, none);
4660
- }
4661
- .cmpl-core-group-container-styles__grid-container.grid-layout-container > div {
4662
- scroll-snap-align: start;
4663
- scroll-snap-align: var(--scroll-snap-align-desktop, start);
4664
- }
4665
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4666
- overflow: hidden;
4667
- overflow: var(--container-overflow-type-desktop, hidden);
4668
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4669
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0));
4670
- grid-auto-flow: row;
4671
- grid-auto-flow: var(--grid-auto-flow-desktop, row);
4672
- grid-auto-columns: 1fr;
4673
- grid-auto-columns: var(--grid-auto-columns-desktop, 1fr);
4674
- grid-auto-rows: auto;
4675
- grid-auto-rows: var(--grid-auto-rows-desktop, auto);
4676
- grid-template-columns: repeat(1, 1fr);
4677
- grid-template-columns: var(--grid-template-columns-custom-desktop, repeat(var(--grid-template-columns-desktop, 1), var(--grid-auto-columns-desktop, 1fr)));
4678
- grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), 1fr));
4679
- grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), var(--grid-auto-rows-desktop, 1fr)));
4680
- }
4681
- }
4682
- .cmpl-core-group-container-styles__block-container {
4683
- pointer-events: none;
4684
- position: relative;
4685
- }
4686
- .cmpl-core-group-container-styles__block-container.grid-layout-container {
4687
- display: grid;
4688
- z-index: 5;
4689
- z-index: var(--element-z-index, 5);
4690
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
4691
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
4692
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
4693
- }
4694
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-mobile) {
4695
- grid-template-rows: subgrid;
4696
- }
4697
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-mobile) > section {
4698
- grid-row: 1/-1;
4699
- grid-column: 1/-1;
4700
- }
4701
- @media screen and (min-width: 768px) {
4702
- .cmpl-core-group-container-styles__block-container.grid-layout-container {
4703
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
4704
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
4705
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
4706
- }
4707
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-portrait) {
4708
- grid-template-rows: subgrid;
4709
- }
4710
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-portrait) > section {
4711
- grid-row: 1/-1;
4712
- grid-column: 1/-1;
4713
- }
4714
- }
4715
- @media screen and (min-width: 1024px) {
4716
- .cmpl-core-group-container-styles__block-container.grid-layout-container {
4717
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
4718
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
4719
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
4720
- }
4721
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-desktop) {
4722
- grid-template-rows: subgrid;
4723
- }
4724
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-desktop) > section {
4725
- grid-row: 1/-1;
4726
- grid-column: 1/-1;
4727
- }
4728
- }
4729
- .cmpl-core-group-container-styles__block-container:has(.video-content-v3__video-container.video-playing.video-playing--high-z-index) {
4730
- z-index: 50;
4731
- }
4732
- .cmpl-core-group-container-styles__block-number {
4733
- z-index: 99;
4734
- position: absolute;
4735
- font-size: 40px;
4736
- left: 50%;
4737
- top: 50%;
4738
- transform: translate(-50%, -50%);
4739
- color: white;
4740
- text-shadow: 1px 1px 1px blue;
4741
- }
4742
- }