/** * Theme Name: Immoledo * Description: Immoledo * Author: 8am GmbH * Version: 1.0.0 * Template: blocksy * Text Domain: blocksy */ /* --- Header (Blocksy type-1): slanted underline on the active menu item --- */ [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item, [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-page-parent { position: relative; } [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item::after, [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-page-parent::after { content: ""; position: absolute; right: 0; bottom: 10px; left: 0; width: 100%; height: 6px; background-color: var(--theme-palette-color-1); -webkit-clip-path: polygon(2% 15%, 100% 0, 100% 100%, 0 100%); clip-path: polygon(2% 15%, 100% 0, 100% 100%, 0 100%); } /* --- Footer ------------------------------------------------------------ */ #footer .ct-header-content-block, #footer .wp-block-heading { font-size: 16px; } /* --- Layout ------------------------------------------------------------ */ :root { --theme-content-spacing: 3.5em; } /* Fixed, tiled background pattern (image comes from the Customizer). */ body { background-position: 0 0; background-size: 23px; background-repeat: repeat; background-origin: initial; background-clip: initial; background-color: initial; background-attachment: fixed; } /* --- Stacking order ---------------------------------------------------- intl-tel-input's dropdown is appended to , so it has to clear Blocksy's popup, which in turn has to clear its own backdrop. */ .iti--container { z-index: 100000 !important; } .ct-popup-inner { z-index: 200; } [data-popup-backdrop] { z-index: 150; } /* --- Posts: skewed cards with a clipped, shadowed featured image ------- */ article.entry-card, .single-post article.post { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); transform: skewY(-1.5deg); } /* Counter-skew the contents so only the card itself is slanted. */ article.entry-card .entry-meta, article.entry-card .entry-title, article.entry-card .entry-excerpt, article.entry-card .entry-button, article.entry-card .ct-media-container.boundless-image, .single-post article.post > *, .single-post article.post .ct-media-container.boundless-image { transform: skewY(1.5deg); } article.entry-card .ct-media-container.boundless-image, .single-post article.post .ct-media-container.boundless-image { clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 94%); margin-bottom: 20px; } article .ct-media-container { clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 94%); /* drop-shadow, not box-shadow: the shadow has to follow the clip-path. */ filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)); margin-bottom: 20px !important; padding-bottom: 0 !important; } .div-ct-media-container { box-shadow: none; } figure.ct-featured-image { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)); margin: -40px; } #main article.post .wp-block-paragraph { padding: 0; } /* --- Logo bar: core gallery given the `logo-bar` class ----------------- */ #main .wp-block-gallery.logo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; padding: 2rem 0; --wp--style--unstable-gallery-gap: 0 !important; } #main .wp-block-gallery.logo-bar .blocks-gallery-grid, #main .wp-block-gallery.logo-bar figure.wp-block-gallery { display: contents; } #main .wp-block-gallery.logo-bar .wp-block-image { flex: 1 1 140px; max-width: 160px; margin: 0; } #main .wp-block-gallery.logo-bar .wp-block-image img { width: 100%; height: auto; max-height: 80px; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: filter 0.2s ease, opacity 0.2s ease; } #main .wp-block-gallery.logo-bar .wp-block-image img:hover { filter: grayscale(0%); opacity: 1; } #main .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a, #main .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { object-fit: contain; } /* Gallery captions are cruft in a logo bar. */ #main .wp-block-gallery.logo-bar figcaption { display: none; } @media (max-width: 689.98px) { #main .wp-block-gallery.logo-bar .wp-block-image { flex: 1 1 80px; max-width: 110px; } }