/* ========================================================================== Twenty Twenty-Four Child 1. Animated hamburger (three lines <-> X) [all screen sizes] 2. Shared overlay look + keyframes 3. MOBILE (< 600px): full-screen overlay, vertical items slide in from the right 4. DESKTOP (>= 600px): items slide in from the right in ONE ROW, at the same height as the hamburger (no full-screen overlay) 5. Reduced motion 6. Swiper gallery Setup: Navigation block -> Overlay Menu = "Always" (so the hamburger is visible on desktop, too). CHANGING THE BREAKPOINT: 600px appears in exactly two media queries (section 3 and 4). Change both. Keep it in sync with nav-toggle.js. Want the full-screen overlay on desktop as well? Delete section 4. ========================================================================== */ :root { --tt4c-bar-w: 26px; --tt4c-bar-h: 2px; --tt4c-bar-gap: 8px; --tt4c-btn: 44px; --tt4c-ease: cubic-bezier(0.22, 1, 0.36, 1); --tt4c-dir: 1; /* flips to -1 for RTL */ --tt4c-slide: 3rem; /* how far items travel in from the right */ --tt4c-delay: 70ms; /* stagger between items */ /* Optional overrides: --tt4c-overlay-bg / --tt4c-overlay-fg (mobile overlay colors) --tt4c-strip-bg (desktop strip background) */ } :root:dir(rtl) { --tt4c-dir: -1; } body, .has-base-background-color, #modal-1, #modal-1-content { background-color: #fff !important; } :where(.wp-site-blocks :focus) { outline-width: 0 !important; outline-style: none !important; } /* -------------------------------------------------------------------------- 1. Hamburger / X The SVG icons of the Navigation block are hidden; the lines are drawn with the button background (middle line) and ::before / ::after (top, bottom). -------------------------------------------------------------------------- */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { position: relative; width: var(--tt4c-btn); height: var(--tt4c-btn); padding: 0; background: linear-gradient(currentColor, currentColor) center / var(--tt4c-bar-w) var(--tt4c-bar-h) no-repeat; transition: background-size 0.25s var(--tt4c-ease); } .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { display: none; } .wp-block-navigation__responsive-container-open::before, .wp-block-navigation__responsive-container-open::after, .wp-block-navigation__responsive-container-close::before, .wp-block-navigation__responsive-container-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--tt4c-bar-w); height: var(--tt4c-bar-h); margin: calc(var(--tt4c-bar-h) / -2) 0 0 calc(var(--tt4c-bar-w) / -2); background: currentColor; transition: transform 0.3s var(--tt4c-ease); } /* Open button = hamburger */ .wp-block-navigation__responsive-container-open::before { transform: translateY(calc(var(--tt4c-bar-gap) * -1)); } .wp-block-navigation__responsive-container-open::after { transform: translateY(var(--tt4c-bar-gap)); } .wp-block-navigation__responsive-container-open:hover::before { transform: translateY(calc((var(--tt4c-bar-gap) + 2px) * -1)); } .wp-block-navigation__responsive-container-open:hover::after { transform: translateY(calc(var(--tt4c-bar-gap) + 2px)); } /* Close button = X (animates from the hamburger shape every time it appears) */ .wp-block-navigation__responsive-container-close { background-size: 0 var(--tt4c-bar-h); animation: tt4c-bar-mid 0.35s var(--tt4c-ease) both; } .wp-block-navigation__responsive-container-close::before { transform: rotate(45deg); animation: tt4c-bar-top 0.4s var(--tt4c-ease) both; } .wp-block-navigation__responsive-container-close::after { transform: rotate(-45deg); animation: tt4c-bar-bottom 0.4s var(--tt4c-ease) both; } .wp-block-navigation__responsive-container-close:hover::before { transform: rotate(135deg); } .wp-block-navigation__responsive-container-close:hover::after { transform: rotate(45deg); } @keyframes tt4c-bar-mid { from { background-size: var(--tt4c-bar-w) var(--tt4c-bar-h); } to { background-size: 0 var(--tt4c-bar-h); } } @keyframes tt4c-bar-top { from { transform: translateY(calc(var(--tt4c-bar-gap) * -1)) rotate(0deg); } to { transform: translateY(0) rotate(45deg); } } @keyframes tt4c-bar-bottom { from { transform: translateY(var(--tt4c-bar-gap)) rotate(0deg); } to { transform: translateY(0) rotate(-45deg); } } /* -------------------------------------------------------------------------- 2. Shared overlay look + keyframes (Selectors are intentionally specific: core's overlay rules are, too.) -------------------------------------------------------------------------- */ .wp-block-navigation { position: relative; } .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open { /* Defaults; colors set in the block's overlay settings still win. */ background-color: var(--tt4c-overlay-bg, var(--wp--preset--color--base, #fff)); color: var(--tt4c-overlay-fg, var(--wp--preset--color--contrast, #111)); animation: tt4c-fade 0.3s ease both; } /* Logged-in admin bar must not push the dialog down. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 !important; } /* Top-level items slide in from the right, one after another. Submenu items travel with their parent. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content > ul > li { animation: tt4c-item-in 0.55s var(--tt4c-ease) backwards; animation-delay: calc(var(--i, 0) * var(--tt4c-delay) + 120ms); } @keyframes tt4c-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes tt4c-item-in { from { opacity: 0; transform: translateX(calc(var(--tt4c-slide) * var(--tt4c-dir))); } to { opacity: 1; transform: translateX(0); } } /* -------------------------------------------------------------------------- 3. MOBILE (< 600px): full-screen overlay, vertical items -------------------------------------------------------------------------- */ /* @media (max-width: 2839px) { */ @media (max-width: 599.98px) { .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open { padding: 0 clamp(1.5rem, var(--wp--style--root--padding-left, 1.5rem), 20rem); } /* The X sits exactly where the hamburger was (position measured by nav-toggle.js). */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: var(--tt4c-close-top, 1rem); right: var(--tt4c-close-right, 1rem); z-index: 3; } /* Vertical, left-aligned items (regardless of the header's justification) */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: calc(var(--tt4c-close-top, 1rem) + var(--tt4c-btn) + 1.5rem); } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .wp-block-navigation__container { align-items: flex-start; gap: 0.5rem; /* 0.5rem */ } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .wp-block-navigation-item { align-items: flex-start; gap: 0; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--large, 1.75rem); /*font-size: var(--wp--preset--font-size--x-large, 1.75rem); */ line-height: 1.15; /* theme default ~1.6 makes the lines far apart */ padding: 0.3rem 0; } /* Submenus: stay vertical, indented, a bit smaller */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { gap: 0; min-width: 0; padding: 0.25rem 0 0.25rem 1.25rem; /* 0.25rem 0 0.25rem 1.25rem */ } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--medium, 1.125rem); opacity: 0.8; } /* Items enter top to bottom */ .wp-block-navigation__responsive-container-content > ul > li:nth-child(2) { --i: 1; } .wp-block-navigation__responsive-container-content > ul > li:nth-child(3) { --i: 2; } .wp-block-navigation__responsive-container-content > ul > li:nth-child(4) { --i: 3; } .wp-block-navigation__responsive-container-content > ul > li:nth-child(5) { --i: 4; } .wp-block-navigation__responsive-container-content > ul > li:nth-child(6) { --i: 5; } .wp-block-navigation__responsive-container-content > ul > li:nth-child(7) { --i: 6; } .wp-block-navigation__responsive-container-content > ul > li:nth-child(8) { --i: 7; } .wp-block-navigation__responsive-container-content > ul > li:nth-child(9) { --i: 8; } .wp-block-navigation__responsive-container-content > ul > li:nth-child(n+10) { --i: 9; } } /* -------------------------------------------------------------------------- 4. DESKTOP (>= 600px): one row, same height as the hamburger The overlay container becomes a strip anchored to the nav (= to the hamburger). It grows to the left; the X replaces the hamburger in place. Dropdown submenus work on hover / focus / click as in the normal menu. -------------------------------------------------------------------------- */ /* @media (min-width: 2840px) { */ @media (min-width: 600px) { /* No scroll lock, so the page does not jump when the menu opens. */ :root.has-modal-open { overflow: visible; } .wp-block-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open { position: absolute; inset: 0 0 auto auto; /* top right bottom left */ width: max-content; max-width: var(--tt4c-strip-max, calc(100vw - 2rem)); /* room left of the hamburger, set by nav-toggle.js */ min-height: 100%; height: auto; padding: 0; overflow: visible; background-color: var(--tt4c-strip-bg, var(--tt4c-overlay-bg, var(--wp--preset--color--base, #fff))); animation-duration: 0.25s; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { width: auto; max-width: none; margin: 0; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { display: flex; align-items: flex-start; min-height: var(--tt4c-btn); } /* X in the exact spot of the hamburger (right end of the strip) */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: 0; right: 0; z-index: 3; } /* Items in one row, left of the X. If they don't fit, they wrap onto further rows. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content { flex-direction: row; align-items: flex-start; /* rows start at the top ... */ flex: 1 1 auto; min-width: 0; min-height: var(--tt4c-btn); /* ... and this top/bottom padding centers the FIRST row on the hamburger: (button height - one text line) / 2. Further rows follow below. */ --tt4c-item-lh: 1.2; --tt4c-row-pad: calc((var(--tt4c-btn) - var(--tt4c-item-lh) * 1em) / 2); padding: var(--tt4c-row-pad) calc(var(--tt4c-btn) + 0.5rem) var(--tt4c-row-pad) 1rem; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .wp-block-navigation__container { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: 0 1 auto; min-width: 0; gap: 0.75rem 1.75rem; /* vertical distance between menu items */ } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .wp-block-navigation-item { flex-direction: row; /* keeps the submenu arrow beside its label */ flex-wrap: nowrap; align-items: center; /* No min-height here: it made every wrapped row as tall as the hamburger. The strip itself (min-height above) keeps a single row in line with the X. */ } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { font-size: inherit; line-height: var(--tt4c-item-lh, 1.2); /* theme default 1.55; set above */ padding: 0 0; /* 0.5rem 0*/ white-space: nowrap; } /* Show the submenu arrow if the block has it enabled (core hides it in overlays) */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-icon { display: inline-block; } /* Slide-in travels less far; items emerge from the hamburger, right to left */ :root { --tt4c-slide: 2.5rem; --tt4c-delay: 60ms; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(2) { --i: 1; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(3) { --i: 2; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(4) { --i: 3; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(5) { --i: 4; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(6) { --i: 5; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(7) { --i: 6; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(8) { --i: 7; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(9) { --i: 8; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(n+10) { --i: 9; } .wp-block-navigation__responsive-container-content > ul > li:nth-last-child(1) { --i: 0; } /* Submenus: dropdown below the strip, hidden until hover / focus / click. (Core forces them open and static inside overlays; the long selector is needed to beat core's equally long ones.) */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { position: absolute; top: 100%; left: auto; right: 0; min-width: 200px; width: auto; height: 0; opacity: 0; overflow: hidden; visibility: hidden; padding: 0.5rem 1rem; gap: 0.25rem; align-items: flex-start; border: 1px solid rgba(0, 0, 0, 0.15); background: var(--tt4c-strip-bg, var(--tt4c-overlay-bg, var(--wp--preset--color--base, #fff))) !important; color: inherit !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; transition: opacity 0.2s ease; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .has-child:hover > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .has-child:focus-within > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { height: auto; opacity: 1; overflow: visible; visibility: visible; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: inherit; opacity: 1; } } /* -------------------------------------------------------------------------- 5. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > ul > li, .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-close::before, .wp-block-navigation__responsive-container-close::after { animation: none !important; } .wp-block-navigation__responsive-container-open::before, .wp-block-navigation__responsive-container-open::after, .wp-block-navigation__responsive-container-close::before, .wp-block-navigation__responsive-container-close::after { transition: none; } } /* -------------------------------------------------------------------------- 6. Swiper gallery (Gallery block with additional CSS class "swiper-gallery") Note: Swiper sets slide width and spacing as inline styles, so no width/margin overrides are needed (and none should be added). Per-gallery classes (see gallery-swiper.js): swiper-cols-1..4 images visible at once on wide screens swiper-natural keep each image's own proportions swiper-caption-overlay caption on the image (core look) instead of below swiper-no-peek fixed columns, cropped 3:2 (default: uncropped, one image visible) swiper-show-next next image fills the space right of the current one swiper-nav-overlay nav on the images (default: nav below) -------------------------------------------------------------------------- */ .gallery-nav-target { display: none; } .wp-block-gallery.swiper-gallery.swiper { display: block; --swiper-navigation-color: #fff; } /* Image proportions: change 3 / 2 here, or set to "auto" for natural proportions */ /* Core makes each figure a flex column and the image "flex: 1; height: 100%". Firefox then collapses the image to 0 px, so the slide is a plain block here. */ .wp-block-gallery.has-nested-images.swiper-gallery figure.wp-block-image.swiper-slide { display: block; flex-direction: initial; } .wp-block-gallery.swiper-gallery .swiper-slide img, .wp-block-gallery.has-nested-images.swiper-gallery figure.wp-block-image.swiper-slide:not(#individual-image) img { display: block; flex: none; width: 100%; height: auto; min-height: 0; aspect-ratio: var(--tt4c-gallery-ratio, 3 / 2); object-fit: cover; } .wp-block-gallery.swiper-gallery.swiper-natural .swiper-slide img, .wp-block-gallery.has-nested-images.swiper-gallery.swiper-natural figure.wp-block-image.swiper-slide:not(#individual-image) img { aspect-ratio: auto; object-fit: contain; } /* Default layout (swiper-peek): images never cropped, all the same height, image on the left of its slide. Default: one slide = full slider width, so the following images stay outside on the right. With "swiper-show-next" each slide is as wide as its image and the next image fills the remaining space (slidesPerView "auto"). --tt4c-slide-height: image height (lower on small screens automatically, so an image is never wider than the slider). */ .wp-block-gallery.swiper-gallery.swiper-peek { container-type: inline-size; /* enables cqw below = slider width */ --tt4c-slide-height: 50vh; } .wp-block-gallery.has-nested-images.swiper-gallery.swiper-peek figure.wp-block-image.swiper-slide:not(#individual-image) { flex-grow: 0; } .wp-block-gallery.has-nested-images.swiper-gallery.swiper-peek.swiper-show-next figure.wp-block-image.swiper-slide:not(#individual-image) { width: auto; } .wp-block-gallery.swiper-gallery.swiper-peek .swiper-slide img, .wp-block-gallery.has-nested-images.swiper-gallery.swiper-peek figure.wp-block-image.swiper-slide:not(#individual-image) img { /* --tt4c-ratio (width / height) is set per image by gallery-swiper.js */ height: min(var(--tt4c-slide-height), 100cqw / var(--tt4c-ratio, 1.5)); width: auto; max-width: none; aspect-ratio: var(--tt4c-ratio, 1.5); object-fit: contain; } /* Lazy loading: light placeholder + spinner until the image is there */ .wp-block-gallery.swiper-gallery .swiper-slide:not(.is-loaded) img { background: rgba(128, 128, 128, 0.12); } .wp-block-gallery.swiper-gallery .swiper-lazy-preloader { --swiper-preloader-color: currentColor; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-width: 3px; opacity: 0.5; } /* swiper-nav-below: under the images come the arrows, then the caption of the current image (gallery-swiper.js copies it into .tt4c-swiper-caption). */ .wp-block-gallery.swiper-gallery .tt4c-swiper-nav { display: flex; align-items: center; justify-content: flex-start; /*space-between / center / flex-end to move the arrows */ gap: 0.75rem; margin-top: 20px; --swiper-navigation-color: currentColor; --swiper-navigation-size: 20px; } .wp-block-gallery.swiper-gallery .tt4c-swiper-nav .swiper-button-prev, .wp-block-gallery.swiper-gallery .tt4c-swiper-nav .swiper-button-next { position: static; inset: auto; margin: 0; width: var(--swiper-navigation-size); transform: none; filter: none; } /* The captions inside the slides are replaced by the caption box. */ .wp-block-gallery.has-nested-images.swiper-gallery.swiper-nav-below figure.wp-block-image figcaption { display: none; } .wp-block-gallery.swiper-gallery .tt4c-swiper-caption { padding: 15px 0 0.25rem; margin-right: 5px; text-align: left; font-size: var(--wp--preset--font-size--small, 0.875rem); } @media (min-width: 782px) { .wp-block-gallery.swiper-gallery .tt4c-swiper-caption { margin-right: 30%; } } .wp-block-gallery.swiper-gallery .tt4c-swiper-caption:empty { display: none; } .wp-block-gallery.swiper-gallery .tt4c-swiper-caption .tt4c-caption, .wp-block-gallery.swiper-gallery .tt4c-swiper-caption .tt4c-description { display: block; } .wp-block-gallery.swiper-gallery .tt4c-swiper-caption .tt4c-description { /*margin-top: 0.2rem; margin-left: 5px;*/ opacity: 0.75; font-size: var(--wp--preset--font-size--small, 0.875rem); } /* Arrows with a soft shadow so they stay readable on light images */ .wp-block-gallery.swiper-gallery .swiper-button-prev, .wp-block-gallery.swiper-gallery .swiper-button-next { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); } /* Captions BELOW the image (core puts them on top of it with a dark gradient). Add the class "swiper-caption-overlay" to a gallery to keep the core look. */ .wp-block-gallery.has-nested-images.swiper-gallery:not(.swiper-caption-overlay) figure.wp-block-image figcaption { position: static; max-height: none; overflow: visible; padding: 0.6rem 0 0.25rem; background: none; color: inherit; text-align: left; text-shadow: none; font-size: var(--wp--preset--font-size--small, 0.875rem); } .wp-block-gallery.has-nested-images.swiper-gallery:not(.swiper-caption-overlay) figure.wp-block-image::before { display: none; /* the blur strip core draws behind overlay captions */ } .wp-block-gallery.swiper-gallery .swiper-slide { height: auto; } /* Caption + description (from the media library) */ .wp-block-gallery.swiper-gallery .swiper-slide figcaption .tt4c-caption, .wp-block-gallery.swiper-gallery .swiper-slide figcaption .tt4c-description { display: block; } .wp-block-gallery.swiper-gallery .swiper-slide figcaption .tt4c-description { margin-top: 0.2rem; opacity: 0.75; font-size: 0.9em; } /* -------------------------------------------------------------------------- Focus outlines Core's global styles draw a 2px outline on every focused element, so mouse clicks leave a rectangle around arrows, bullets and the menu buttons. Hidden for mouse clicks, kept (and tidier) for keyboard users. -------------------------------------------------------------------------- */ .wp-block-gallery.swiper-gallery .swiper-button-prev:focus:not(:focus-visible), .wp-block-gallery.swiper-gallery .swiper-button-next:focus:not(:focus-visible), .wp-block-gallery.swiper-gallery .swiper-pagination-bullet:focus:not(:focus-visible), .wp-block-navigation__responsive-container-open:focus:not(:focus-visible), .wp-block-navigation__responsive-container-close:focus:not(:focus-visible), .wp-block-navigation__responsive-container.is-menu-open a:focus:not(:focus-visible) { outline: none; } .wp-block-gallery.swiper-gallery .swiper-button-prev:focus-visible, .wp-block-gallery.swiper-gallery .swiper-button-next:focus-visible, .wp-block-gallery.swiper-gallery .swiper-pagination-bullet:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; } /* -------------------------------------------------------------------------- 7. Gallery navigation (any block with the CSS class "gallery-nav"; see gallery-nav.js) .gallery-nav tabs: one gallery at a time, replaced in place .gallery-nav gallery-nav--jump links that scroll to the galleries -------------------------------------------------------------------------- */ .gallery-nav { margin-block-start: 5px; } .gallery-nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem 1.75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; } .gallery-nav a, .gallery-nav button { display: inline-block; margin: 0; padding: 0.35rem 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.2s ease; } .gallery-nav a:hover, .gallery-nav button:hover, .gallery-nav a[aria-current="true"], .gallery-nav button[aria-pressed="true"] { border-bottom-color: currentColor; } .gallery-nav button:focus:not(:focus-visible) { outline: none; } /* Tabs mode: galleries (and their headings) that are not selected. !important because the gallery's own display rule would otherwise win. */ .gallery-panel-hidden { display: none !important; } .gallery-panel-enter { animation: tt4c-fade 0.4s ease both; } /* Jump mode: targets stay clear of a sticky header; adjust the offset to your header height */ .gallery-nav-target { scroll-margin-top: var(--tt4c-scroll-offset, 6rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { .gallery-panel-enter { animation: none; } } /*------ audio mp3 in swiper gallery ------*/ /* ========================================================================== Audio per slide (gallery-swiper.js: links to mp3/m4a/... in a description) Paste into child.css. Replaces the earlier three .tt4c-audio rules. ========================================================================== */ .tt4c-audio { display: block; margin-top: .6em; } .tt4c-audio-label { display: block; font-size: .9em; margin-bottom: .25em; } /* --- Custom player (CUSTOM_PLAYER = true in gallery-swiper.js) ------------ */ .tt4c-audio--custom audio { display: none; } .tt4c-player { display: flex; align-items: center; gap: .75em; max-width: 360px; } .tt4c-play { position: relative; flex: none; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .tt4c-play::before { /* play triangle */ content: ""; position: absolute; inset: .5rem .45rem .5rem .6rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } .tt4c-player.is-playing .tt4c-play::before { /* pause bars */ inset: .5rem; clip-path: none; background: linear-gradient(90deg, currentColor 33%, transparent 33% 67%, currentColor 67%); } .tt4c-play:focus, .tt4c-seek:focus, .tt4c-play:focus-visible, .tt4c-seek:focus-visible { outline: none; outline-offset: 0; outline-width: 0; outline-style: none; } /* :where(.wp-site-blocks :focus) { outline-width: 0; outline-style: none; } */ /* hairline progress */ .tt4c-seek { --tt4c-p: 0%; flex: 1; min-width: 0; height: 1.5rem; margin: 0; padding: 0; background: none; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } .tt4c-seek::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, currentColor var(--tt4c-p), rgba(0, 0, 0, .25) var(--tt4c-p)); } .tt4c-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; margin-top: -4px; border: 0; border-radius: 50%; background: currentColor; } .tt4c-seek::-moz-range-track { height: 1px; background: rgba(0, 0, 0, .25); } .tt4c-seek::-moz-range-progress { height: 1px; background: currentColor; } .tt4c-seek::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: currentColor; } .tt4c-time { flex: none; font-size: .85em; font-variant-numeric: tabular-nums; white-space: nowrap; } .tt4c-player.is-error { opacity: .4; } /* --- Native player (CUSTOM_PLAYER = false): version B ---------------------- */ .tt4c-audio:not(.tt4c-audio--custom) audio { display: block; width: 100%; max-width: 360px; color-scheme: light; background: transparent; } .tt4c-audio:not(.tt4c-audio--custom) audio::-webkit-media-controls-enclosure { border-radius: 0; background: transparent; } .tt4c-audio:not(.tt4c-audio--custom) audio::-webkit-media-controls-panel { background: transparent; padding: 0; } /* -------------------------------------------------------------------------- 8. landing page -------------------------------------------------------------------------- */ .home, .home .has-base-background-color, .home #modal-1, .home #modal-1-content { background-color: #e1e1e1 !important; } .home .wp-block-spacer{ display: none; } .nosch-start { position: relative; max-width: 1200px;/*900px*/ margin: 0 auto; } .nosch-start > img { display: block; width: 100%; height: auto; } .nosch-start a { position: absolute; display: block; } .nosch-start a img { display: block; width: 100%; height: 100%; opacity: 0; } .nosch-start a:hover img, .nosch-start a:focus-visible img { opacity: 1; } .nosch-start a:focus-visible { outline: 2px solid #000; outline-offset: 2px; } .nosch-start .ns-round { border-radius: 50%; } /* -------------------------------------------------------------------------- 9. vita -------------------------------------------------------------------------- */ .col-text { columns: 1; column-gap: 20px; } @media (min-width: 960px) { .col-text { columns: 2; padding-right:10%; } } .col-text .wp-block-paragraph { margin-block-start: 20px; } .col-text :first-child { margin-block-start: 0; } /* -------------------------------------------------------------------------- 10. texte -------------------------------------------------------------------------- */ .texte-container { flex-wrap: wrap-reverse !important; margin-block-start: 0!important; justify-content: space-between; } /* @media (min-width: 782px) { .texte-container { flex-wrap: nowrap !important; } } */ .texte-sidebar h2.wp-block-post-title { margin-top: 3px; margin-bottom: 0; font-weight: bold; } .texte-sidebar .wp-block-post-excerpt { margin-top: 5px; } .texte-article { hyphens: auto; } .texte-sidebar { margin-bottom: 40px !important; } /* @media (min-width: 782px) { .texte-sidebar { margin-bottom: 40px !important; } } */ .texte-sidebar .wp-block-post-excerpt { font-size: 14px!important; } .texte-sidebar .wp-block-post-excerpt { display: none; margin-left: 22px; margin-top: -5px; margin-bottom: 0; } .texte-sidebar .wp-block-post-title a::before { content: ""; display: inline-block; margin-right: 5px; width: 1em; height: 1em; vertical-align: -0.15em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E") center / contain no-repeat; } @media (min-width: 782px) { .texte-container { flex-wrap: nowrap !important; } .texte-sidebar .wp-block-post-excerpt { display: inline-flex; } .texte-sidebar { margin-bottom: 0 !important; } } /* -------------------------------------------------------------------------- 11. accordion ANIMATION fallback / see js -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .wp-block-accordion-panel { margin-block-start: 0; display: flow-root; overflow: clip; transition: height .3s ease-out, content-visibility .3s allow-discrete; } .wp-block-accordion-panel > :first-child { margin-block-start: var(--wp--style--block-gap, 1rem); } .wp-block-accordion-panel[hidden] { height: 0; } .wp-block-accordion-panel:not([hidden]) { animation: accordion-open .3s ease-out; } @keyframes accordion-open { from { height: 0; } } } } /* -------------------------------------------------------*/ .n-accordion .wp-block-accordion-heading__toggle { padding: 10px 0; } .n-accordion .wp-block-accordion-panel{ margin-left:20px; } /* -------------------------------------------------------------------------- 12. complianz patch - but it has to be in Complianz > Consent Banner > Custom CSS because of loading. Since CMPLZ does not load the banner anymore if there is no cookie, it#s forced vie mu-plugin script -------------------------------------------------------------------------- */ /* @media (min-width: 1024px) { .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-width: 0; width: auto; padding-inline: 1.5em; } .cmplz-cookiebanner .cmplz-buttons { align-items: center; } } */ #cmplz-document h2, #cmplz-document h3, .editor-styles-wrapper .cmplz-unlinked-mode h2, .editor-styles-wrapper .cmplz-unlinked-mode h3 { font-size: 16px; } /* -------------------------------------------------------------------------- 13. Datenschutz -------------------------------------------------------------------------- */ .datenschutz h2 {font-size: 16px; } .datenschutz p {font-size: 14px; } /* -------------------------------------------------------------------------- 1. aktuelles -------------------------------------------------------------------------- */ /* Hide the second (small, grey) excerpt in the post listing */ .wp-block-post-template .wp-block-post-excerpt.has-small-font-size { display: none; } .list-of-posts .wp-block-post .wp-block-group :where(.is-layout-flex) { gap: 0; }