diff --git a/juconnect-patterns-plugin/juconnect-patterns.zip b/juconnect-patterns-plugin/juconnect-patterns.zip index 403b050..d5f395a 100644 Binary files a/juconnect-patterns-plugin/juconnect-patterns.zip and b/juconnect-patterns-plugin/juconnect-patterns.zip differ diff --git a/juconnect-patterns-plugin/juconnect-patterns/assets/css/juconnect-patterns.css b/juconnect-patterns-plugin/juconnect-patterns/assets/css/juconnect-patterns.css new file mode 100644 index 0000000..a9affe0 --- /dev/null +++ b/juconnect-patterns-plugin/juconnect-patterns/assets/css/juconnect-patterns.css @@ -0,0 +1,219 @@ +.ju-process-flow { + --ju-flow-gap: var(--s4, 18px); + --ju-step-stack-gap: var(--s4, 18px); + --ju-step-body-mt: var(--s2, 10px); +} + +.ju-process-flow__steps, +.ju-process-flow__steps > .wp-block-group__inner-container { + display: grid; + grid-auto-flow: column; + grid-auto-columns: minmax(260px, 1fr); + gap: var(--ju-flow-gap); + align-items: start; + counter-reset: ju-flow-step; +} + +.ju-process-flow__steps { + position: relative; + overflow-x: auto; + padding: 2px calc(var(--s6, 32px) + 6px) var(--s3, 14px) 2px; +} + +.ju-process-flow__steps::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 30px; + height: 2px; + background: linear-gradient(90deg, rgba(29, 53, 79, 0.12) 0%, rgba(29, 53, 79, 0.3) 50%, rgba(29, 53, 79, 0.12) 100%); + pointer-events: none; +} + +.ju-process-flow__steps > .wp-block-group__inner-container { + width: max(100%, max-content); + min-width: 100%; + max-width: none !important; + margin: 0 !important; +} + +.ju-process-flow__steps > .ju-process-step, +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step { + counter-increment: ju-flow-step; + display: grid; + grid-template-rows: auto 1fr; + gap: var(--ju-step-stack-gap); + min-width: 260px; + max-width: none; + --ju-step-head: var(--primary, #1d354f); +} + +.ju-process-flow__steps > .ju-process-step:nth-child(2), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(2) { + --ju-step-head: #255683; +} + +.ju-process-flow__steps > .ju-process-step:nth-child(3), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(3) { + --ju-step-head: #2b6cb0; +} + +.ju-process-flow__steps > .ju-process-step:nth-child(4), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(4) { + --ju-step-head: #235e9a; +} + +.ju-process-flow__steps > .ju-process-step:nth-child(5), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(5) { + --ju-step-head: #1f4d7e; +} + +.ju-process-flow__steps > .ju-process-step:nth-child(6), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(6) { + --ju-step-head: #183d64; +} + +.ju-process-step__head, +.ju-process-step > .ju-process-step__label { + position: relative; + z-index: 1; + margin: 0; + min-height: 58px; + display: flex; + align-items: center; + padding: 11px 72px 11px 16px; + border: 1px solid rgba(16, 25, 34, 0.16); + border-radius: 12px; + color: #ffffff !important; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%), + var(--ju-step-head) !important; + box-shadow: 0 10px 22px rgba(16, 25, 34, 0.14); + clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 12px 50%); + transition: transform 0.16s ease, box-shadow 0.2s ease; +} + +.ju-process-step__head > .wp-block-group__inner-container { + display: flex; + align-items: center; + min-height: 36px; +} + +.ju-process-step__head::after, +.ju-process-step > .ju-process-step__label::after { + content: counter(ju-flow-step, decimal-leading-zero); + position: absolute; + right: 26px; + top: 50%; + transform: translateY(-50%); + font-size: 1.65rem; + font-weight: 800; + line-height: 1; + letter-spacing: 0.01em; + color: rgba(255, 255, 255, 0.94); + font-variant-numeric: tabular-nums; +} + +.ju-process-flow__steps > .ju-process-step:last-child .ju-process-step__head, +.ju-process-flow__steps > .ju-process-step:last-child > .ju-process-step__label, +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child .ju-process-step__head, +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child > .ju-process-step__label { + margin-right: var(--s2, 10px); +} + +.ju-process-step__label { + margin: 0; + color: inherit; + font-size: var(--fs-s, 0.92rem); + font-weight: 800; + letter-spacing: 0.03em; + text-transform: uppercase; +} + +.ju-process-step__body.card, +.ju-process-step > .card { + position: relative; + margin-top: var(--ju-step-body-mt) !important; + min-height: 212px; + padding: var(--s4, 18px); + border: 1px solid var(--line, #d7dee5); + border-top: 4px solid var(--ju-step-head); + border-radius: 16px; + background: var(--surface, #ffffff) !important; + color: var(--text2, #3c4a58) !important; + box-shadow: var(--shadow-sm, 0 6px 16px rgba(16, 25, 34, 0.08)); + overflow: hidden; + transition: transform 0.16s ease, box-shadow 0.2s ease; +} + +.ju-process-step__body.card::before, +.ju-process-step > .card::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(29, 53, 79, 0.06) 0%, rgba(29, 53, 79, 0) 42%); + pointer-events: none; +} + +.ju-process-step__body.card > .wp-block-group__inner-container, +.ju-process-step > .card > .wp-block-group__inner-container { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: var(--s2, 10px); +} + +.ju-process-step__body.card .muted, +.ju-process-step > .card .muted { + margin: 0; + color: var(--text2, #3c4a58) !important; +} + +@media (hover: hover) { + .ju-process-step:hover .ju-process-step__head, + .ju-process-step:hover > .ju-process-step__label, + .ju-process-step:hover .ju-process-step__body.card, + .ju-process-step:hover > .card { + transform: translateY(-2px); + } + + .ju-process-step:hover .ju-process-step__head, + .ju-process-step:hover > .ju-process-step__label { + box-shadow: 0 12px 24px rgba(16, 25, 34, 0.17); + } + + .ju-process-step:hover .ju-process-step__body.card, + .ju-process-step:hover > .card { + box-shadow: 0 12px 24px rgba(16, 25, 34, 0.12); + } +} + +.ju-process-flow__steps::-webkit-scrollbar { + height: 8px; +} + +.ju-process-flow__steps::-webkit-scrollbar-thumb { + background: rgba(29, 53, 79, 0.24); + border-radius: 999px; +} + +@media (max-width: 1020px) { + .ju-process-flow__steps::before { + display: none; + } + + .ju-process-flow__steps, + .ju-process-flow__steps > .wp-block-group__inner-container { + grid-auto-flow: row; + grid-template-columns: 1fr; + width: 100%; + min-width: 0; + } + + .ju-process-flow__steps > .ju-process-step, + .ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step { + min-width: 0; + } +} diff --git a/juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php b/juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php index 98c4ac0..047557f 100644 --- a/juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php +++ b/juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php @@ -2,11 +2,36 @@ /** * Plugin Name: JuConnect Patterns * Description: Gutenberg Block Patterns fuer JuConnect (Styleguide-Klassen). - * Version: 0.2 + * Version: 0.3.0 */ if (!defined('ABSPATH')) exit; +define('JUCONNECT_PATTERNS_VERSION', '0.3.0'); + +function juconnect_patterns_enqueue_styles() { + $css_rel_path = 'assets/css/juconnect-patterns.css'; + $css_abs_path = plugin_dir_path(__FILE__) . $css_rel_path; + + if (!file_exists($css_abs_path)) { + return; + } + + $css_ver = (string) filemtime($css_abs_path); + if ('' === $css_ver) { + $css_ver = JUCONNECT_PATTERNS_VERSION; + } + + $deps = []; + if (wp_style_is('juconnect-style', 'registered') || wp_style_is('juconnect-style', 'enqueued')) { + $deps[] = 'juconnect-style'; + } + + wp_enqueue_style('juconnect-patterns', plugin_dir_url(__FILE__) . $css_rel_path, $deps, $css_ver); +} +add_action('wp_enqueue_scripts', 'juconnect_patterns_enqueue_styles', 20); +add_action('enqueue_block_editor_assets', 'juconnect_patterns_enqueue_styles', 20); + add_action('init', function () { if (!function_exists('register_block_pattern')) return; @@ -605,6 +630,69 @@ HTML +HTML + ]); + + register_block_pattern('juconnect/process-flow-flex', [ + 'title' => __('Prozessablauf (flexibel, horizontal)', 'juconnect'), + 'categories' => ['juconnect'], + 'description' => __('Flexibler Ablauf mit einzeln bearbeitbaren Schritten. Schritte einfach duplizieren, verschieben oder entfernen.', 'juconnect'), + 'content' => << +
+
+

So laeuft die Zusammenarbeit ab

+ + + +

Jeder Schritt ist ein einzelner Block und kann beliebig angepasst, dupliziert oder entfernt werden.

+
+ + + +
+
+
+

Anfrage

+
+ + + +
+

Kontakt aufnehmen, Anlass schildern und den Rahmen fuer die Begleitung klaeren.

+
+
+ + + +
+
+

Abstimmung

+
+ + + +
+

Ziele, Rollen und Kommunikationswege gemeinsam festlegen.

+
+
+ + + +
+
+

Umsetzung

+
+ + + +
+

Begleitung starten, Fortschritt transparent dokumentieren und regelmaessig nachsteuern.

+
+
+
+
+ HTML ]); }); diff --git a/juconnect-strict-theme-v3/juconnect-strict.zip b/juconnect-strict-theme-v3/juconnect-strict.zip index 286bbb8..dab4e0a 100644 Binary files a/juconnect-strict-theme-v3/juconnect-strict.zip and b/juconnect-strict-theme-v3/juconnect-strict.zip differ diff --git a/juconnect-strict-theme-v3/juconnect-strict/footer.php b/juconnect-strict-theme-v3/juconnect-strict/footer.php index 458c707..317748c 100644 --- a/juconnect-strict-theme-v3/juconnect-strict/footer.php +++ b/juconnect-strict-theme-v3/juconnect-strict/footer.php @@ -4,7 +4,7 @@
- - Theme vget('Version')); ?> + (c) 2026 JuConnect GbR
diff --git a/juconnect-strict-theme-v3/juconnect-strict/functions.php b/juconnect-strict-theme-v3/juconnect-strict/functions.php index 0f2d030..8dc431f 100644 --- a/juconnect-strict-theme-v3/juconnect-strict/functions.php +++ b/juconnect-strict-theme-v3/juconnect-strict/functions.php @@ -27,11 +27,262 @@ function juconnect_favicon_fallback() { return; } - $icon_url = get_template_directory_uri() . '/assets/img/juconnect_icon.svg'; - echo '' . "\n"; + $icon_light_mode = get_template_directory_uri() . '/assets/img/juconnect_icon.svg'; + $icon_dark_mode = get_template_directory_uri() . '/assets/img/juconnect_icon_light.svg'; + + // Use the light icon in dark browser UI and the default icon in light UI. + echo '' . "\n"; + echo '' . "\n"; + echo '' . "\n"; } add_action('wp_head', 'juconnect_favicon_fallback'); +/** + * Avoid duplicate SEO tags when a dedicated SEO plugin is active. + */ +function juconnect_has_external_seo_plugin() { + return ( + class_exists('WPSEO_Frontend') || // Yoast SEO + defined('RANK_MATH_VERSION') || // Rank Math + defined('AIOSEO_VERSION') || // All in One SEO + defined('SEOPRESS_VERSION') || // SEOPress + defined('THE_SEO_FRAMEWORK_VERSION') + ); +} + +function juconnect_get_meta_description() { + $description = ''; + + if (is_front_page() || is_home()) { + $description = get_bloginfo('description', 'display'); + } elseif (is_singular()) { + if (has_excerpt()) { + $description = get_the_excerpt(); + } else { + $content = get_post_field('post_content', get_queried_object_id()); + $description = wp_strip_all_tags(strip_shortcodes((string) $content)); + } + } elseif (is_category() || is_tag() || is_tax()) { + $description = wp_strip_all_tags(term_description()); + } elseif (is_post_type_archive()) { + $description = wp_strip_all_tags(get_the_archive_description()); + } + + if ($description === '') { + $description = get_bloginfo('description', 'display'); + } + + $description = preg_replace('/\s+/', ' ', trim((string) $description)); + return wp_html_excerpt($description, 155, '...'); +} + +function juconnect_get_canonical_url() { + $paged = max(1, (int) get_query_var('paged')); + + if (is_404()) { + return ''; + } + + if (is_singular()) { + if (function_exists('wp_get_canonical_url')) { + $canonical = wp_get_canonical_url(); + if ($canonical) { + return $canonical; + } + } + return get_permalink(); + } + + if (is_front_page()) { + if ($paged > 1) { + return get_pagenum_link($paged); + } + return home_url('/'); + } + + if (is_home()) { + if ($paged > 1) { + return get_pagenum_link($paged); + } + $posts_page_id = (int) get_option('page_for_posts'); + if ($posts_page_id > 0) { + return get_permalink($posts_page_id); + } + } + + return get_pagenum_link($paged); +} + +function juconnect_get_social_image_url() { + if (is_singular() && has_post_thumbnail()) { + $image = wp_get_attachment_image_url(get_post_thumbnail_id(), 'full'); + if ($image) { + return $image; + } + } + + if (has_site_icon()) { + $site_icon = get_site_icon_url(512); + if ($site_icon) { + return $site_icon; + } + } + + return get_template_directory_uri() . '/assets/img/juconnect_icon.svg'; +} + +function juconnect_output_seo_meta() { + if (juconnect_has_external_seo_plugin() || is_feed()) { + return; + } + + $title = wp_get_document_title(); + $description = juconnect_get_meta_description(); + $canonical = juconnect_get_canonical_url(); + $site_name = get_bloginfo('name', 'display'); + $locale = str_replace('-', '_', get_locale()); + $og_type = is_singular('post') ? 'article' : 'website'; + $social_image = juconnect_get_social_image_url(); + + if ($description !== '') { + echo '' . "\n"; + } + + // Core prints singular canonicals already via rel_canonical. + if (!is_singular() && $canonical !== '') { + echo '' . "\n"; + } + + echo '' . "\n"; + echo '' . "\n"; + echo '' . "\n"; + if ($description !== '') { + echo '' . "\n"; + } + if ($canonical !== '') { + echo '' . "\n"; + } + echo '' . "\n"; + if ($social_image !== '') { + echo '' . "\n"; + } + + echo '' . "\n"; + echo '' . "\n"; + if ($description !== '') { + echo '' . "\n"; + } + if ($social_image !== '') { + echo '' . "\n"; + } +} +add_action('wp_head', 'juconnect_output_seo_meta', 5); + +function juconnect_robots_directives($robots) { + if (juconnect_has_external_seo_plugin()) { + return $robots; + } + + if (get_option('blog_public') === '0') { + return [ + 'noindex' => true, + 'nofollow' => true, + ]; + } + + if (is_search() || is_404() || is_attachment()) { + unset($robots['index']); + $robots['noindex'] = true; + } + + return $robots; +} +add_filter('wp_robots', 'juconnect_robots_directives'); + +function juconnect_output_json_ld() { + if (juconnect_has_external_seo_plugin() || is_feed()) { + return; + } + + $home_url = home_url('/'); + $site_name = get_bloginfo('name', 'display'); + $site_logo = ''; + $custom_logo_id = (int) get_theme_mod('custom_logo'); + if ($custom_logo_id > 0) { + $site_logo = wp_get_attachment_image_url($custom_logo_id, 'full'); + } elseif (has_site_icon()) { + $site_logo = get_site_icon_url(512); + } + + $schema_graph = []; + $organization = [ + '@type' => 'Organization', + '@id' => $home_url . '#organization', + 'name' => $site_name, + 'url' => $home_url, + ]; + if ($site_logo) { + $organization['logo'] = $site_logo; + } + $schema_graph[] = $organization; + + $website = [ + '@type' => 'WebSite', + '@id' => $home_url . '#website', + 'url' => $home_url, + 'name' => $site_name, + 'publisher' => ['@id' => $home_url . '#organization'], + 'potentialAction' => [ + '@type' => 'SearchAction', + 'target' => home_url('/?s={search_term_string}'), + 'query-input' => 'required name=search_term_string', + ], + ]; + $schema_graph[] = $website; + + if (is_singular()) { + $canonical = juconnect_get_canonical_url(); + $webpage = [ + '@type' => 'WebPage', + '@id' => $canonical . '#webpage', + 'url' => $canonical, + 'name' => single_post_title('', false), + 'isPartOf' => ['@id' => $home_url . '#website'], + 'description' => juconnect_get_meta_description(), + ]; + $schema_graph[] = $webpage; + + if (is_singular('post')) { + $article = [ + '@type' => 'Article', + '@id' => $canonical . '#article', + 'mainEntityOfPage' => ['@id' => $canonical . '#webpage'], + 'headline' => single_post_title('', false), + 'datePublished' => get_post_time(DATE_W3C, true), + 'dateModified' => get_post_modified_time(DATE_W3C, true), + 'author' => [ + '@type' => 'Person', + 'name' => get_the_author_meta('display_name', (int) get_post_field('post_author', get_queried_object_id())), + ], + 'publisher' => ['@id' => $home_url . '#organization'], + ]; + $image = juconnect_get_social_image_url(); + if ($image) { + $article['image'] = [$image]; + } + $schema_graph[] = $article; + } + } + + $json_ld = [ + '@context' => 'https://schema.org', + '@graph' => $schema_graph, + ]; + + echo '' . "\n"; +} +add_action('wp_head', 'juconnect_output_json_ld', 6); + function juconnect_assets() { $theme_ver = wp_get_theme()->get('Version'); $style_ver = filemtime(get_stylesheet_directory() . '/style.css'); diff --git a/juconnect-strict-theme-v3/juconnect-strict/style.css b/juconnect-strict-theme-v3/juconnect-strict/style.css index 3d156d1..2060685 100644 --- a/juconnect-strict-theme-v3/juconnect-strict/style.css +++ b/juconnect-strict-theme-v3/juconnect-strict/style.css @@ -655,8 +655,9 @@ a{ color: inherit; } background: var(--surface2); padding: var(--s4); } -.callout__title{ font-weight: 800; margin-bottom: 4px; } -.callout__text{ color: var(--text2); } +.callout__title{ font-weight: 800; margin: 0 0 6px 0; } +.callout__text{ color: var(--text2); margin: 0; } +.kpi + .callout{ margin-top: var(--s2); } .callout--info{ border-color: rgba(43,108,176,.28); background: rgba(43,108,176,.08); } .callout--accent{ border-color: rgba(143,174,154,.35); background: rgba(143,174,154,.10); } @@ -1126,6 +1127,8 @@ a{ color: inherit; } /* Groups: don't add unexpected margins that break cards/grids */ .wp-block-group:not(.section){ margin: 0; } +/* Keep visual breathing room between KPI rows and following callout blocks. */ +.wp-block-group.kpi + .wp-block-group.callout{ margin-top: var(--s2); } /* Images: prevent WP default inline styles from breaking rounded cards */ .wp-block-image img{ max-width: 100%; height: auto; } @@ -1255,3 +1258,226 @@ a{ color: inherit; } max-width: 560px; margin-inline: auto; } + +/* ========================= + Process Flow (fallback in theme) + ========================= */ +.ju-process-flow { + --ju-flow-gap: var(--s4, 18px); + --ju-step-stack-gap: var(--s4, 18px); + --ju-step-body-mt: var(--s2, 10px); +} + +.ju-process-flow__steps, +.ju-process-flow__steps > .wp-block-group__inner-container { + display: grid; + grid-auto-flow: column; + grid-auto-columns: minmax(260px, 1fr); + gap: var(--ju-flow-gap); + align-items: start; + counter-reset: ju-flow-step; +} + +.ju-process-flow__steps { + position: relative; + overflow-x: auto; + padding: 2px calc(var(--s6, 32px) + 6px) var(--s3, 14px) 2px; +} + +.ju-process-flow__steps::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 30px; + height: 2px; + background: linear-gradient(90deg, rgba(29, 53, 79, 0.12) 0%, rgba(29, 53, 79, 0.3) 50%, rgba(29, 53, 79, 0.12) 100%); + pointer-events: none; +} + +.ju-process-flow__steps > .wp-block-group__inner-container { + width: max(100%, max-content); + min-width: 100%; + max-width: none !important; + margin: 0 !important; +} + +.ju-process-flow__steps > .ju-process-step, +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step { + counter-increment: ju-flow-step; + display: grid; + grid-template-rows: auto 1fr; + gap: var(--ju-step-stack-gap); + min-width: 260px; + max-width: none; + --ju-step-head: var(--primary, #1d354f); +} + +.ju-process-flow__steps > .ju-process-step:nth-child(2), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(2) { + --ju-step-head: #255683; +} + +.ju-process-flow__steps > .ju-process-step:nth-child(3), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(3) { + --ju-step-head: #2b6cb0; +} + +.ju-process-flow__steps > .ju-process-step:nth-child(4), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(4) { + --ju-step-head: #235e9a; +} + +.ju-process-flow__steps > .ju-process-step:nth-child(5), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(5) { + --ju-step-head: #1f4d7e; +} + +.ju-process-flow__steps > .ju-process-step:nth-child(6), +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(6) { + --ju-step-head: #183d64; +} + +.ju-process-step__head, +.ju-process-step > .ju-process-step__label { + position: relative; + z-index: 1; + margin: 0; + min-height: 58px; + display: flex; + align-items: center; + padding: 11px 72px 11px 16px; + border: 1px solid rgba(16, 25, 34, 0.16); + border-radius: 12px; + color: #ffffff !important; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%), + var(--ju-step-head) !important; + box-shadow: 0 10px 22px rgba(16, 25, 34, 0.14); + clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 12px 50%); + transition: transform 0.16s ease, box-shadow 0.2s ease; +} + +.ju-process-step__head > .wp-block-group__inner-container { + display: flex; + align-items: center; + min-height: 36px; +} + +.ju-process-step__head::after, +.ju-process-step > .ju-process-step__label::after { + content: counter(ju-flow-step, decimal-leading-zero); + position: absolute; + right: 26px; + top: 50%; + transform: translateY(-50%); + font-size: 1.65rem; + font-weight: 800; + line-height: 1; + letter-spacing: 0.01em; + color: rgba(255, 255, 255, 0.94); + font-variant-numeric: tabular-nums; +} + +.ju-process-flow__steps > .ju-process-step:last-child .ju-process-step__head, +.ju-process-flow__steps > .ju-process-step:last-child > .ju-process-step__label, +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child .ju-process-step__head, +.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child > .ju-process-step__label { + margin-right: var(--s2, 10px); +} + +.ju-process-step__label { + margin: 0; + color: inherit; + font-size: var(--fs-s, 0.92rem); + font-weight: 800; + letter-spacing: 0.03em; + text-transform: uppercase; +} + +.ju-process-step__body.card, +.ju-process-step > .card { + position: relative; + margin-top: var(--ju-step-body-mt) !important; + min-height: 212px; + padding: var(--s4, 18px); + border: 1px solid var(--line, #d7dee5); + border-top: 4px solid var(--ju-step-head); + border-radius: 16px; + background: var(--surface, #ffffff) !important; + color: var(--text2, #3c4a58) !important; + box-shadow: var(--shadow-sm, 0 6px 16px rgba(16, 25, 34, 0.08)); + overflow: hidden; + transition: transform 0.16s ease, box-shadow 0.2s ease; +} + +.ju-process-step__body.card::before, +.ju-process-step > .card::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(29, 53, 79, 0.06) 0%, rgba(29, 53, 79, 0) 42%); + pointer-events: none; +} + +.ju-process-step__body.card > .wp-block-group__inner-container, +.ju-process-step > .card > .wp-block-group__inner-container { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: var(--s2, 10px); +} + +.ju-process-step__body.card .muted, +.ju-process-step > .card .muted { + margin: 0; + color: var(--text2, #3c4a58) !important; +} + +@media (hover: hover) { + .ju-process-step:hover .ju-process-step__head, + .ju-process-step:hover > .ju-process-step__label, + .ju-process-step:hover .ju-process-step__body.card, + .ju-process-step:hover > .card { + transform: translateY(-2px); + } + + .ju-process-step:hover .ju-process-step__head, + .ju-process-step:hover > .ju-process-step__label { + box-shadow: 0 12px 24px rgba(16, 25, 34, 0.17); + } + + .ju-process-step:hover .ju-process-step__body.card, + .ju-process-step:hover > .card { + box-shadow: 0 12px 24px rgba(16, 25, 34, 0.12); + } +} + +.ju-process-flow__steps::-webkit-scrollbar { + height: 8px; +} + +.ju-process-flow__steps::-webkit-scrollbar-thumb { + background: rgba(29, 53, 79, 0.24); + border-radius: 999px; +} + +@media (max-width: 1020px) { + .ju-process-flow__steps::before { + display: none; + } + + .ju-process-flow__steps, + .ju-process-flow__steps > .wp-block-group__inner-container { + grid-auto-flow: row; + grid-template-columns: 1fr; + width: 100%; + min-width: 0; + } + + .ju-process-flow__steps > .ju-process-step, + .ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step { + min-width: 0; + } +}