/* Theme Name: Extendable Theme URI: https://github.com/extendify/extendable Author: Extendify Author URI: https://extendify.com Description: Extendable is a distinct, dynamic block theme designed as a canvas for your next online venture. Sporting multiple style variations, Extendable is the most expressive block theme yet. Go fresh, bold, bohemian or minimal — with a single click. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 Version: 2.1.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: extendable Tags: one-column, custom-colors, custom-menu, custom-logo, e-commerce, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Extendable is a derivative work of the code from the Twenty Twenty-Two WordPress Theme, which is licensed GPLv2. Extendable WordPress Theme, Copyright (C) 2021-2025 Extendify Inc. Extendable therefore is also distributed under the terms of the GNU GPL. */ /* Fallback for deprecate variables. ---------------------------------------------------------------------------- */ :root { --wp--custom--spacing--small: var(--wp--preset--spacing--30, clamp(1.5rem, 5vw, 2rem)); --wp--custom--spacing--medium: var(--wp--preset--spacing--50, clamp(2.5rem, 8vw, 4rem)); --wp--custom--spacing--large: var(--wp--preset--spacing--60, clamp(2.5rem, 8vw, 6rem)); --wp--custom--spacing--outer: max(1.25rem, 4vw); --wp--preset--spacing--80: min(8rem, 12vw); } /* * Smooth scrolling */ html { scroll-behavior: smooth; } /* * Font smoothing. * This is a niche setting that will not be available via Global Styles. * https://github.com/WordPress/gutenberg/issues/35934 */ body { -moz-osx-font-smoothing: var(--wp--custom--typography--font-smoothing--moz, auto); -webkit-font-smoothing: var(--wp--custom--typography--font-smoothing--webkit, auto); } /* * Text and navigation link styles. * Necessary until the following issue is resolved in Gutenberg: * https://github.com/WordPress/gutenberg/issues/27075 */ a { text-decoration-style: var(--wp--custom--elements--link--static--text-decoration-style, solid); text-decoration-thickness: var(--wp--custom--elements--link--text-decoration-thickness, 1px); text-underline-offset: var(--wp--custom--elements--link--text-underline-offset, 0.25ch); } a:hover, a:focus { text-decoration-style: var(--wp--custom--elements--link--interactive--text-decoration-style, dashed); } :where(.wp-site-blocks *:focus) { outline-width: 1px; outline-style: solid; } a:active { text-decoration: none; } /* * Navigation Block */ @media (min-width: 600px) { .site-logo-title { display: none; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-page-list { align-items: flex-start !important; } } @media (max-width: 600px) { .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-page-list { align-items: flex-start !important; } } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title { display: flex; flex-wrap: nowrap; max-width: 100%; align-items: center; gap: 0.5rem; padding-bottom: var(--wp--preset--spacing--30); position: relative; padding-inline-end: 52px; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title::after { content: ""; position: absolute; left: calc(-1 * var(--wp--preset--spacing--30)); right: calc(-1 * var(--wp--preset--spacing--30)); bottom: 0; height: 1px; background: #8080801d; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title img { max-height: 42px !important; height: auto !important; width: auto !important; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title .site-title { font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--foreground); text-transform: uppercase; letter-spacing: -0.02em; box-sizing: border-box; line-height: 1.15; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { padding-top: var(--wp--preset--spacing--30); } .has-modal-open .wp-block-navigation__responsive-container-close { background-color: var(--wp--preset--color--tertiary); padding: 0.625rem; border-radius: 100%; top: -2.5px !important; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container { gap: 0 !important; width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navrigation__containe, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container ul { row-gap: 0.75rem !important; width: -webkit-fill-available; max-width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation__submenu-container) { border-bottom: 1px solid #8080801d; padding-top: 0.75rem; padding-bottom: 0.75rem; width: -webkit-fill-available; max-width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { padding: 0.75rem 0.75rem 0 0.75rem !important; gap: 0.75rem !important; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container > li:not(.wp-block-navigation__submenu-container) > a.wp-block-navigation-item__content { font-size: 1.25rem; font-weight: 600; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__submenu-container { padding-top: 0.75rem !important; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item a { font-size: 1rem !important; } /* * When the responsive navigation modal opens (WordPress sets .has-modal-open * on ), suppress every property on the modal's ancestor chain that * creates a containing block for position:fixed descendants — otherwise * the modal is trapped inside the header instead of overlaying the viewport. * * Two rules here: * * 1) Broad ancestor coverage — the header itself plus any element inside * it that contains the responsive dialog. Handles transform/filter on * any header variant (overlay, glass, floating-pill, future ones). * * 2) Animation override — mirrors the selectors used by the floating-pill * scroll animations so we can match their specificity. Those animations * use !important + a deep selector to apply translate/backdrop-filter * via keyframes; without a same-or-higher-specificity override our broad * rule loses the cascade and the animation keeps trapping the modal. */ html.has-modal-open header.wp-block-template-part, html.has-modal-open header.wp-block-template-part :has(.wp-block-navigation__responsive-dialog) { backdrop-filter: none !important; transform: none !important; translate: none !important; filter: none !important; animation: none !important; } html.has-modal-open body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass, html.has-modal-open body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: none !important; backdrop-filter: none !important; translate: none !important; } /* * Mobile nav-extras: cloned by navigation-customization.js into the * responsive menu dialog so phone / CTA / social aren't visible in the * cramped top bar on small screens. We target the specific modifier * classes (.ext-nav-extras-phone, -btn, -social) rather than the * .ext-nav-extras wrapper, because some header parts use the wrapper * class around the nav block itself. * * On desktop the dialog is rendered inline (it's only "modal-shaped" * when the hamburger opens it), so the cloned extras must stay hidden * until WordPress sets .has-modal-open on . */ @media (max-width: 781px) { body:not(:has(.wp-block-navigation__responsive-container.disable-default-overlay)) header.wp-block-template-part :is(.ext-nav-extras-phone, .ext-nav-extras-btn, .ext-nav-extras-social):not(.ext-nav-extras-mobile *) { display: none; } /* Collapse the .ext-nav-extras wrapper too when its only children are the extras (no nav inside) — otherwise the empty wrapper holds a flex slot and the hamburger stays stuck in the middle instead of moving to the end of the row. */ header.wp-block-template-part .ext-nav-extras:not(:has(nav, .wp-block-navigation)) { display: none; } } .ext-nav-extras-mobile { display: none; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile { display: flex; flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button { width: 100%; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button__link { display: block; text-align: center; width: 100%; } /* Match the nav-link typography (see rule above) on the cloned phone CTA. */ .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone, .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone a, .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone p { font-size: 1.25rem !important; font-weight: 600 !important; } /* Bigger, more tappable social icons in the menu. */ .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-social-link { width: 32px; height: 32px; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-social-link svg { width: 28px; height: 28px; } .wp-block-navigation .wp-block-navigation-item a:hover, .wp-block-navigation .wp-block-navigation-item a:focus { text-decoration: underline; text-decoration-style: solid; } /* Don't display the homepage in the Page List block, when located inside a navigation element. */ nav .wp-block-pages-list__item.wp-block-navigation-item.menu-item-home { display: none; } /* * Responsive menu container padding. * This ensures the responsive container inherits the same * spacing defined above. This behavior may be built into * the Block Editor in the future. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--30); padding-left: var(--wp--preset--spacing--30); } /* Temporary: WP core ships this padding as a 4-value clamp() shorthand that some browsers fail to parse — re-declare as individual props. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem); padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem); padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem); } /* * -------------------------------------------------------- * Custom - blocks * -------------------------------------------------------- */ /* Button ----------------------------------------------------------*/ .wp-element-button { transition: background-color 0.15s ease; } .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background):hover, .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background-color: rgba(159, 159, 159, 0.2); } /* Table ----------------------------------------------------------*/ .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--custom--blocks--core-table--variant-stripes--color--background, var(--wp--preset--color--tertiary)); } /* Template Part Block ----------------------------------------------------------*/ /* Temporary fix until template-part blocks support spacing */ footer.wp-block-template-part:not([style*="margin-top"]) { margin-top: 0; } /* Quote - 'Plain' variation ----------------------------------------------------------*/ blockquote:is(.is-style-plain) { border: none; padding-left: 0; } /* Search Block ----------------------------------------------------------*/ :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) { border-color: var(--wp--custom--elements--input--border--color); border-radius: var(--wp--custom--elements--button--border--radius); border-width: var(--wp--custom--elements--input--border--width); } :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input { border-color: transparent; } .wp-block-search .wp-block-search__input { border-radius: var(--wp--custom--elements--button--border--radius); } /* Image ----------------------------------------------------------*/ .wp-block-image[style*="-radius"]:not([style*="overflow"]) { overflow: hidden; } /* * -------------------------------------------------------- * Custom - experimental * -------------------------------------------------------- */ .block-editor-block-list__block.wp-block.is-default-size.wp-block-site-logo .components-resizable-box__container, .wp-block-site-logo.is-default-size img { max-height: 42px !important; height: auto !important; width: auto !important; } /* Ensure default logo works well on light and dark backgrounds ----------------------------------------------------------*/ .wp-block-site-logo img[src*="extendify-demo-"], .wp-block-site-logo img[src*="ext-custom-logo-"] { filter: var(--wp--preset--duotone--primary-foreground); min-width: 40px; } /* * Remove all animations, transitions and smooth scroll * for people that prefer not to see them. */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* * Matching caret and focus outline colors. */ input, textarea { caret-color: inherit; outline-color: inherit; } /* * Matching input with outline button style. */ :where(.wp-block-post-comments-form) input:not([type="submit"]), :where(.wp-block-post-comments-form) textarea { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); border-color: inherit; } /* * Woocommerce temporarily customization until the woo blocks offer support */ .woocommerce-Tabs-panel--description h2, .woocommerce-Reviews-title { font-size: var(--wp--preset--font-size--medium); } .wp-block-button.wc-block-components-product-button { flex-direction: row; flex-wrap: wrap; justify-content: start; gap: 1rem; } .wp-block-button.wc-block-components-product-button a.added_to_cart { margin-top: 0; } .woocommerce-checkout.woocommerce-page header.wp-block-template-part nav.wp-block-navigation { visibility: hidden; } .wp-site-blocks .wp-block-group.woocommerce.product { margin-top: 0; margin-bottom: 0; } .wc-block-product-template__responsive { grid-row-gap: 2rem; } .wc-block-components-product-button__button { z-index: 1; } /* * Adds offset for sticky header overlap */ .sticky-header-offset-container .entry-content > .wp-block-group { scroll-margin-top: var(--wp--preset--spacing--60); } /* * Avoids parent/child color collision when child has no custom background. */ :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background) { background-color: var(--wp--preset--color--background); } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background)::before { background-color: var(--wp--preset--color--background) !important; } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--image--"]:not(.has-background)::before { background-color: var(--wp--preset--color--tertiary) !important; } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]::before, :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--media-text--"]::before { background-color: var(--wp--preset--color--background) !important; } .block-editor-block-preview__content-iframe [class*="is-style-ext-preset--group--natural-1"][class*="item-card-1"] { background-color: transparent !important; } :root { --grid-vector-bg: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQ0MCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIG9wYWNpdHk9IjAuMDkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utb3BhY2l0eT0iMC43IiBzdHJva2Utd2lkdGg9IjEuMjYwNyI+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI2MjQuOTk1IiB4Mj0iMTQ2MC45NiIgeTI9IjYyNC45OTUiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI5NDcuNzMzIiB4Mj0iMTQ2MC45NiIgeTI9Ijk0Ny43MzMiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIzMDIuMjU2IiB4Mj0iMTQ2MC45NiIgeTI9IjMwMi4yNTYiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI0NjMuNjI0IiB4Mj0iMTQ2MC45NiIgeTI9IjQ2My42MjQiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI3ODYuMzYyIiB4Mj0iMTQ2MC45NiIgeTI9Ijc4Ni4zNjIiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIxNDAuODg1IiB4Mj0iMTQ2MC45NiIgeTI9IjE0MC44ODUiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI1NDQuMzExIiB4Mj0iMTQ2MC45NiIgeTI9IjU0NC4zMTEiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI4NjcuMDQ5IiB4Mj0iMTQ2MC45NiIgeTI9Ijg2Ny4wNDkiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIyMjEuNTczIiB4Mj0iMTQ2MC45NiIgeTI9IjIyMS41NzMiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIzODIuOTQiIHgyPSIxNDYwLjk2IiB5Mj0iMzgyLjk0IiAvPgogICAgPGxpbmUgeDE9Ii01MC42MTcyIiB5MT0iNzA1LjY4MiIgeDI9IjE0NjAuOTYiIHkyPSI3MDUuNjgyIiAvPgogICAgPGxpbmUgeDE9Ii01MC42MTcyIiB5MT0iNjAuMjAxNyIgeDI9IjE0NjAuOTYiIHkyPSI2MC4yMDE3IiAvPgogICAgPGxpbmUgeDE9IjY0Mi4xMzgiIHkxPSItNDguODQ3NyIgeDI9IjY0Mi4xMzgiIHkyPSIxMTE4LjU2 /* =========================================================== DESIGN FÜR DIE PORTFOLIO-KACHELN (STARTSEITE) =========================================================== */ .portfolio-tile { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 2.5rem 2rem !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; transition: all 0.3s ease-in-out !important; display: flex !important; flex-direction: column !important; height: 100% !important; /* Sorgt dafür, dass alle Kacheln gleich hoch sind */ box-sizing: border-box !important; } /* Hover-Effekt: Kachel hebt sich und bekommt einen grünen Akzent */ .portfolio-tile:hover { transform: translateY(-6px) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important; border-color: #007343 !important; /* Das satte Grün deiner Buttons */ } /* Abstand unter den grünen Icons in den Kacheln */ .portfolio-tile .wp-block-image, .portfolio-tile img, .portfolio-tile svg { margin-bottom: 1.5rem !important; } /* Optimierung der Überschriften in den Kacheln */ .portfolio-tile h3, .portfolio-tile h4 { margin-top: 0 !important; margin-bottom: 1rem !important; font-size: 1.4rem !important; color: #0f172a !important; /* Dunkles Anthrazit */ word-break: break-word !important; /* Verhindert das Herausragen langer Wörter */ } /* Text in den Kacheln */ .portfolio-tile p { margin: 0 !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: #475569 !important; }