malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add three more page style masks

Browse Source
This commit is contained in:
Tetrakern 2024-02-16 16:17:32 +01:00
parent 83fa2306bf
commit 29b0a31791
5 changed files with 120 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CREDITS.md
View File

@ -16,6 +16,14 @@ The following list credits all third-party resources used in the Fictioneer them
* **[Greet the Final Battle Alone by liuzishan](https://www.freepik.com/free-photo/study-halls-biology-digital-illustrations_14541125.htm)** on Freepik
* **[Nuclear Blast in City by liuzishan](https://www.freepik.com/free-photo/moment-city-was-hit-by-nuclear-bomb-digital-painting_15174526.htm)** on Freepik
## Tools
* **SVGWave**<br>
URL: [www.svgwave.in](https://svgwave.in/)
* **Haikei**<br>
URL: [haikai](https://app.haikei.app/)
## Graphics
* **Font Awesome**<br>

31
css/customizer-snippets.css
View File

@ -145,3 +145,34 @@
:is(:root, :root.minimal) .content-list-style-lines .card__link-list-item:last-child {
border-bottom: none;
}
:root.page-style-mask-image-wave-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
}
:root.page-style-mask-image-wave-a:not(.minimal) .main__background::before {
--mp: top calc(-1 * clamp(5px, 0.7633587786vw + 2.1374045802px, 8px)) left 0, top clamp(22px, 2.2900763359vw + 13.4122137405px, 31px) left 0;
--ms: 100% clamp(28px, 3.3078880407vw + 15.5954198473px, 41px), 100% calc(100% - clamp(22px, 2.2900763359vw + 13.4122137405px, 31px));
--mr: repeat-x, no-repeat;
--mi: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' id='svg' viewBox='0 0 1440 690' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' class='transition duration-300 ease-in-out delay-150'%3E%3Cpath d='M 0,700 L 0,262 C 85.6267942583732,192.2488038277512 171.2535885167464,122.49760765550238 260,138 C 348.7464114832536,153.50239234449762 440.6124401913876,254.25837320574163 541,315 C 641.3875598086124,375.74162679425837 750.2966507177035,396.46889952153106 854,374 C 957.7033492822965,351.53110047846894 1056.200956937799,285.86602870813397 1153,260 C 1249.799043062201,234.133971291866 1344.8995215311006,248.06698564593302 1440,262 L 1440,700 L 0,700 Z' stroke='none' stroke-width='0' fill='%23000000' fill-opacity='1' class='transition-all duration-300 ease-in-out delay-150 path-0'%3E%3C/path%3E%3C/svg%3E"), var(--data-image-2x2-black);
border-radius: 56px/clamp(6px, 1.5267175573vw + 0.2748091603px, 12px);
}
:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
}
:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background::before {
--mp: top left, top clamp(15px, 2.0356234097vw + 7.3664122137px, 23px) left 0;
--ms: 100% clamp(16px, 2.0356234097vw + 8.3664122137px, 24px), 100% calc(100% - clamp(15px, 2.0356234097vw + 7.3664122137px, 23px));
--mr: repeat-x, no-repeat;
--mi: url("data:image/svg+xml,%3Csvg id='visual' viewBox='0 0 900 24' width='900' height='24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Cpath d='M0 12L39 12L39 4L78 4L78 2L117 2L117 8L157 8L157 9L196 9L196 17L235 17L235 7L274 7L274 15L313 15L313 13L352 13L352 7L391 7L391 19L430 19L430 11L470 11L470 13L509 13L509 19L548 19L548 14L587 14L587 10L626 10L626 6L665 6L665 17L704 17L704 11L743 11L743 2L783 2L783 19L822 19L822 19L861 19L861 2L900 2L900 6L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='rgba(0,0,0,0.5)'%3E%3C/path%3E%3Cpath d='M0 10L39 10L39 11L78 11L78 12L117 12L117 16L157 16L157 13L196 13L196 20L235 20L235 16L274 16L274 7L313 7L313 16L352 16L352 12L391 12L391 8L430 8L430 9L470 9L470 12L509 12L509 10L548 10L548 20L587 20L587 12L626 12L626 12L665 12L665 9L704 9L704 11L743 11L743 14L783 14L783 8L822 8L822 13L861 13L861 20L900 20L900 14L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='rgba(0,0,0,0.75)'%3E%3C/path%3E%3Cpath d='M0 14L39 14L39 18L78 18L78 20L117 20L117 20L157 20L157 19L196 19L196 15L235 15L235 18L274 18L274 18L313 18L313 15L352 15L352 21L391 21L391 13L430 13L430 20L470 20L470 21L509 21L509 17L548 17L548 18L587 18L587 12L626 12L626 14L665 14L665 21L704 21L704 17L743 17L743 18L783 18L783 14L822 14L822 17L861 17L861 15L900 15L900 16L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E%0A"), var(--data-image-2x2-black);
}
:root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
}
:root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background::before {
--mp: top left, top clamp(15px, 2.0356234097vw + 7.3664122137px, 23px) left 0;
--ms: 100% clamp(16px, 2.0356234097vw + 8.3664122137px, 24px), 100% calc(100% - clamp(15px, 2.0356234097vw + 7.3664122137px, 23px));
--mr: repeat-x, no-repeat;
--mi: url("data:image/svg+xml,%3Csvg id='visual' viewBox='0 0 900 24' width='900' height='24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Cpath d='M0 6L39 0L78 0L117 17L157 3L196 14L235 9L274 19L313 14L352 12L391 3L430 6L470 19L509 3L548 12L587 19L626 7L665 12L704 2L743 8L783 17L822 5L861 9L900 1L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='rgba(0,0,0,0.5)'%3E%3C/path%3E%3Cpath d='M0 8L39 17L78 20L117 6L157 13L196 17L235 17L274 7L313 17L352 18L391 21L430 19L470 14L509 15L548 17L587 11L626 18L665 8L704 19L743 17L783 13L822 7L861 6L900 9L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='rgba(0,0,0,0.75)'%3E%3C/path%3E%3Cpath d='M0 12L39 14L78 17L117 14L157 16L196 17L235 19L274 20L313 20L352 16L391 16L430 12L470 22L509 22L548 17L587 13L626 11L665 18L704 13L743 23L783 21L822 16L861 17L900 21L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E%0A"), var(--data-image-2x2-black);
}

18
includes/functions/_customizer-settings.php
View File

@ -2471,7 +2471,7 @@ function fictioneer_add_header_customizer_settings( $manager ) {
'label' => __( 'Header Image Style', 'fictioneer' ),
'description' => __( 'Choose the style for your header image.', 'fictioneer' ),
'choices' => array(
'default' => _x( 'Plain (default)', 'Customizer header image style option.', 'fictioneer' ),
'default' => _x( 'Plain (Default)', 'Customizer header image style option.', 'fictioneer' ),
'polygon-battered' => _x( 'Battered', 'Customizer header image style option.', 'fictioneer' )
)
)
@ -2776,7 +2776,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'label' => __( 'Mobile Navigation Style', 'fictioneer' ),
'description' => __( 'Choose the style for your mobile navigation.', 'fictioneer' ),
'choices' => array(
'overflow' => _x( 'Overflow (default)', 'Customizer mobile navigation style option.', 'fictioneer' ),
'overflow' => _x( 'Overflow (Default)', 'Customizer mobile navigation style option.', 'fictioneer' ),
'collapse' => _x( 'Collapse', 'Customizer mobile navigation style option.', 'fictioneer' )
)
)
@ -2801,7 +2801,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'label' => __( 'Mobile Menu Style', 'fictioneer' ),
'description' => __( 'Choose the style for your mobile menu.', 'fictioneer' ),
'choices' => array(
'minimize_to_right' => _x( 'Minimize site to right (default)', 'Customizer mobile menu style option.', 'fictioneer' ),
'minimize_to_right' => _x( 'Minimize site to right (Default)', 'Customizer mobile menu style option.', 'fictioneer' ),
'left_slide_in' => _x( 'Slide in from left', 'Customizer mobile menu style option.', 'fictioneer' )
)
)
@ -2826,13 +2826,15 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'label' => __( 'Page Style', 'fictioneer' ),
'description' => __( 'Choose the general style for your pages.', 'fictioneer' ),
'choices' => array(
'default' => _x( 'Plain (default)', 'Customizer page style option.', 'fictioneer' ),
'default' => _x( 'Plain (Default)', 'Customizer page style option.', 'fictioneer' ),
'polygon-battered' => _x( 'Battered', 'Customizer page style option.', 'fictioneer' ),
'mask-image-ringbook' => _x( 'Ringbook', 'Customizer page style option.', 'fictioneer' ),
'polygon-mask-image-battered-ringbook' => _x( 'Battered Ringbook', 'Customizer page style option.', 'fictioneer' ),
'polygon-chamfered' => _x( 'Chamfered', 'Customizer page style option.', 'fictioneer' ),
'polygon-interface-a' => _x( 'Interface', 'Customizer page style option.', 'fictioneer' ),
'mask-image-wave-a' => _x( 'Wave', 'Customizer page style option.', 'fictioneer' )
'mask-image-wave-a' => _x( 'Wave', 'Customizer page style option.', 'fictioneer' ),
'mask-image-layered-steps-a' => _x( 'Layered Steps', 'Customizer page style option.', 'fictioneer' ),
'mask-image-layered-peaks-a' => _x( 'Layered Peaks', 'Customizer page style option.', 'fictioneer' )
)
)
);
@ -2879,7 +2881,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'label' => __( 'Card Style', 'fictioneer' ),
'description' => __( 'Choose the style for your cards.', 'fictioneer' ),
'choices' => array(
'default' => _x( 'Enclosed (default)', 'Customizer card style option.', 'fictioneer' ),
'default' => _x( 'Embedded (Default)', 'Customizer card style option.', 'fictioneer' ),
'unfolded' => _x( 'Unfolded', 'Customizer card style option.', 'fictioneer' ),
'combined' => _x( 'Combined', 'Customizer card style option.', 'fictioneer' )
)
@ -2956,7 +2958,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'label' => __( 'Content List Style', 'fictioneer' ),
'description' => __( 'Choose the style for your content lists.', 'fictioneer' ),
'choices' => array(
'default' => _x( 'Gradient (default)', 'Customizer content list style option.', 'fictioneer' ),
'default' => _x( 'Gradient (Default)', 'Customizer content list style option.', 'fictioneer' ),
'full' => _x( 'Full', 'Customizer content list style option.', 'fictioneer' ),
'lines' => _x( 'Lines', 'Customizer content list style option.', 'fictioneer' ),
'free' => _x( 'Free', 'Customizer content list style option.', 'fictioneer' )
@ -2983,7 +2985,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'label' => __( 'Footer Style', 'fictioneer' ),
'description' => __( 'Choose the style for your footer.', 'fictioneer' ),
'choices' => array(
'default' => _x( 'Floating (default)', 'Customizer footer style option.', 'fictioneer' ),
'default' => _x( 'Floating (Default)', 'Customizer footer style option.', 'fictioneer' ),
'isolated' => _x( 'Isolated', 'Customizer footer style option.', 'fictioneer' )
)
)

37
includes/functions/_customizer.php
View File

@ -980,6 +980,43 @@ function fictioneer_build_customize_css( $content = null ) {
}';
}
if ( $page_style === 'mask-image-wave-a' ) {
$css .= ':root.page-style-mask-image-wave-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
}
:root.page-style-mask-image-wave-a:not(.minimal) .main__background::before {
--mp: top calc(-1 * clamp(5px, 0.7633587786vw + 2.1374045802px, 8px)) left 0, top clamp(22px, 2.2900763359vw + 13.4122137405px, 31px) left 0;
--ms: 100% clamp(28px, 3.3078880407vw + 15.5954198473px, 41px), 100% calc(100% - clamp(22px, 2.2900763359vw + 13.4122137405px, 31px));
--mr: repeat-x, no-repeat;
--mi: url(\'data:image/svg+xml,%3Csvg width="100%25" height="100%25" id="svg" viewBox="0 0 1440 690" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"%3E%3Cpath d="M 0,700 L 0,262 C 85.6267942583732,192.2488038277512 171.2535885167464,122.49760765550238 260,138 C 348.7464114832536,153.50239234449762 440.6124401913876,254.25837320574163 541,315 C 641.3875598086124,375.74162679425837 750.2966507177035,396.46889952153106 854,374 C 957.7033492822965,351.53110047846894 1056.200956937799,285.86602870813397 1153,260 C 1249.799043062201,234.133971291866 1344.8995215311006,248.06698564593302 1440,262 L 1440,700 L 0,700 Z" stroke="none" stroke-width="0" fill="%23000000" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-0"%3E%3C/path%3E%3C/svg%3E\'), var(--data-image-2x2-black);
border-radius: 56px/clamp(6px, 1.5267175573vw + 0.2748091603px, 12px);
}';
}
if ( $page_style === 'mask-image-layered-steps-a' ) {
$css .= ':root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
}
:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background::before {
--mp: top left, top clamp(15px, 2.0356234097vw + 7.3664122137px, 23px) left 0;
--ms: 100% clamp(16px, 2.0356234097vw + 8.3664122137px, 24px), 100% calc(100% - clamp(15px, 2.0356234097vw + 7.3664122137px, 23px));
--mr: repeat-x, no-repeat;
--mi: url(\'data:image/svg+xml,%3Csvg id="visual" viewBox="0 0 900 24" width="900" height="24" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"%3E%3Cpath d="M0 12L39 12L39 4L78 4L78 2L117 2L117 8L157 8L157 9L196 9L196 17L235 17L235 7L274 7L274 15L313 15L313 13L352 13L352 7L391 7L391 19L430 19L430 11L470 11L470 13L509 13L509 19L548 19L548 14L587 14L587 10L626 10L626 6L665 6L665 17L704 17L704 11L743 11L743 2L783 2L783 19L822 19L822 19L861 19L861 2L900 2L900 6L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z" fill="rgba(0,0,0,0.5)"%3E%3C/path%3E%3Cpath d="M0 10L39 10L39 11L78 11L78 12L117 12L117 16L157 16L157 13L196 13L196 20L235 20L235 16L274 16L274 7L313 7L313 16L352 16L352 12L391 12L391 8L430 8L430 9L470 9L470 12L509 12L509 10L548 10L548 20L587 20L587 12L626 12L626 12L665 12L665 9L704 9L704 11L743 11L743 14L783 14L783 8L822 8L822 13L861 13L861 20L900 20L900 14L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z" fill="rgba(0,0,0,0.75)"%3E%3C/path%3E%3Cpath d="M0 14L39 14L39 18L78 18L78 20L117 20L117 20L157 20L157 19L196 19L196 15L235 15L235 18L274 18L274 18L313 18L313 15L352 15L352 21L391 21L391 13L430 13L430 20L470 20L470 21L509 21L509 17L548 17L548 18L587 18L587 12L626 12L626 14L665 14L665 21L704 21L704 17L743 17L743 18L783 18L783 14L822 14L822 17L861 17L861 15L900 15L900 16L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z" fill="%23000000"%3E%3C/path%3E%3C/svg%3E%0A\'), var(--data-image-2x2-black);
}';
}
if ( $page_style === 'mask-image-layered-peaks-a' ) {
$css .= ':root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
}
:root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background::before {
--mp: top left, top clamp(15px, 2.0356234097vw + 7.3664122137px, 23px) left 0;
--ms: 100% clamp(16px, 2.0356234097vw + 8.3664122137px, 24px), 100% calc(100% - clamp(15px, 2.0356234097vw + 7.3664122137px, 23px));
--mr: repeat-x, no-repeat;
--mi: url(\'data:image/svg+xml,%3Csvg id="visual" viewBox="0 0 900 24" width="900" height="24" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"%3E%3Cpath d="M0 6L39 0L78 0L117 17L157 3L196 14L235 9L274 19L313 14L352 12L391 3L430 6L470 19L509 3L548 12L587 19L626 7L665 12L704 2L743 8L783 17L822 5L861 9L900 1L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z" fill="rgba(0,0,0,0.5)"%3E%3C/path%3E%3Cpath d="M0 8L39 17L78 20L117 6L157 13L196 17L235 17L274 7L313 17L352 18L391 21L430 19L470 14L509 15L548 17L587 11L626 18L665 8L704 19L743 17L783 13L822 7L861 6L900 9L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z" fill="rgba(0,0,0,0.75)"%3E%3C/path%3E%3Cpath d="M0 12L39 14L78 17L117 14L157 16L196 17L235 19L274 20L313 20L352 16L391 16L430 12L470 22L509 22L548 17L587 13L626 11L665 18L704 13L743 23L783 21L822 16L861 17L900 21L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z" fill="%23000000"%3E%3C/path%3E%3C/svg%3E%0A\'), var(--data-image-2x2-black);
}';
}
// --- Page shadow -----------------------------------------------------------
if ( ! get_theme_mod( 'page_shadow' ) ) {

34
src/scss/customizer-snippets.scss
View File

@ -223,3 +223,37 @@
border-bottom: none;
}
}
:root.page-style-mask-image-wave-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
&::before {
--mp: top calc(-1 * #{get_clamp(5, 8, 375, 768)}) left 0, top #{get_clamp(22, 31, 375, 768)} left 0;
--ms: 100% #{get_clamp(28, 41, 375, 768)}, 100% calc(100% - #{get_clamp(22, 31, 375, 768)});
--mr: repeat-x, no-repeat;
--mi: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' id='svg' viewBox='0 0 1440 690' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' class='transition duration-300 ease-in-out delay-150'%3E%3Cpath d='M 0,700 L 0,262 C 85.6267942583732,192.2488038277512 171.2535885167464,122.49760765550238 260,138 C 348.7464114832536,153.50239234449762 440.6124401913876,254.25837320574163 541,315 C 641.3875598086124,375.74162679425837 750.2966507177035,396.46889952153106 854,374 C 957.7033492822965,351.53110047846894 1056.200956937799,285.86602870813397 1153,260 C 1249.799043062201,234.133971291866 1344.8995215311006,248.06698564593302 1440,262 L 1440,700 L 0,700 Z' stroke='none' stroke-width='0' fill='%23000000' fill-opacity='1' class='transition-all duration-300 ease-in-out delay-150 path-0'%3E%3C/path%3E%3C/svg%3E"), var(--data-image-2x2-black);
border-radius: 56px / get_clamp(6, 12, 375, 768);
}
}
:root.page-style-mask-image-layered-steps-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
&::before {
--mp: top left, top #{get_clamp(15, 23, 375, 768)} left 0;
--ms: 100% #{get_clamp(16, 24, 375, 768)}, 100% calc(100% - #{get_clamp(15, 23, 375, 768)});
--mr: repeat-x, no-repeat;
--mi: url("data:image/svg+xml,%3Csvg id='visual' viewBox='0 0 900 24' width='900' height='24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Cpath d='M0 12L39 12L39 4L78 4L78 2L117 2L117 8L157 8L157 9L196 9L196 17L235 17L235 7L274 7L274 15L313 15L313 13L352 13L352 7L391 7L391 19L430 19L430 11L470 11L470 13L509 13L509 19L548 19L548 14L587 14L587 10L626 10L626 6L665 6L665 17L704 17L704 11L743 11L743 2L783 2L783 19L822 19L822 19L861 19L861 2L900 2L900 6L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='rgba(0,0,0,0.5)'%3E%3C/path%3E%3Cpath d='M0 10L39 10L39 11L78 11L78 12L117 12L117 16L157 16L157 13L196 13L196 20L235 20L235 16L274 16L274 7L313 7L313 16L352 16L352 12L391 12L391 8L430 8L430 9L470 9L470 12L509 12L509 10L548 10L548 20L587 20L587 12L626 12L626 12L665 12L665 9L704 9L704 11L743 11L743 14L783 14L783 8L822 8L822 13L861 13L861 20L900 20L900 14L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='rgba(0,0,0,0.75)'%3E%3C/path%3E%3Cpath d='M0 14L39 14L39 18L78 18L78 20L117 20L117 20L157 20L157 19L196 19L196 15L235 15L235 18L274 18L274 18L313 18L313 15L352 15L352 21L391 21L391 13L430 13L430 20L470 20L470 21L509 21L509 17L548 17L548 18L587 18L587 12L626 12L626 14L665 14L665 21L704 21L704 17L743 17L743 18L783 18L783 14L822 14L822 17L861 17L861 15L900 15L900 16L900 25L900 25L861 25L861 25L822 25L822 25L783 25L783 25L743 25L743 25L704 25L704 25L665 25L665 25L626 25L626 25L587 25L587 25L548 25L548 25L509 25L509 25L470 25L470 25L430 25L430 25L391 25L391 25L352 25L352 25L313 25L313 25L274 25L274 25L235 25L235 25L196 25L196 25L157 25L157 25L117 25L117 25L78 25L78 25L39 25L39 25L0 25Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E%0A"), var(--data-image-2x2-black);
}
}
:root.page-style-mask-image-layered-peaks-a:not(.minimal) .main__background {
filter: var(--layout-main-drop-shadow);
&::before {
--mp: top left, top #{get_clamp(15, 23, 375, 768)} left 0;
--ms: 100% #{get_clamp(16, 24, 375, 768)}, 100% calc(100% - #{get_clamp(15, 23, 375, 768)});
--mr: repeat-x, no-repeat;
--mi: url("data:image/svg+xml,%3Csvg id='visual' viewBox='0 0 900 24' width='900' height='24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Cpath d='M0 6L39 0L78 0L117 17L157 3L196 14L235 9L274 19L313 14L352 12L391 3L430 6L470 19L509 3L548 12L587 19L626 7L665 12L704 2L743 8L783 17L822 5L861 9L900 1L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='rgba(0,0,0,0.5)'%3E%3C/path%3E%3Cpath d='M0 8L39 17L78 20L117 6L157 13L196 17L235 17L274 7L313 17L352 18L391 21L430 19L470 14L509 15L548 17L587 11L626 18L665 8L704 19L743 17L783 13L822 7L861 6L900 9L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='rgba(0,0,0,0.75)'%3E%3C/path%3E%3Cpath d='M0 12L39 14L78 17L117 14L157 16L196 17L235 19L274 20L313 20L352 16L391 16L430 12L470 22L509 22L548 17L587 13L626 11L665 18L704 13L743 23L783 21L822 16L861 17L900 21L900 25L861 25L822 25L783 25L743 25L704 25L665 25L626 25L587 25L548 25L509 25L470 25L430 25L391 25L352 25L313 25L274 25L235 25L196 25L157 25L117 25L78 25L39 25L0 25Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E%0A"), var(--data-image-2x2-black);
}
}