/*
Theme Name: Peter's Child Theme
Theme URI: https://olliewp.com
Description: This is Peter's custom child theme.
Author: Peter Spiess
Author URI: https://pstype.ch
Template: ollie
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
*/
/* Write your custom CSS code below or add it in the Customizer > Additional CSS
________________________________________________________________________________________________ */
html,
body {
scroll-behavior: smooth;
}
/* Silbentrennung
_______________________________________________________________________________ */
h3,
h4,
h5,
h6,
p {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: auto 3; /* Silben > Anzahl Buchstaben z.B. an-ge-nom-men */
hyphenate-limit-lines: 3;
}
::selection {
color: #f9fafd;
background-color: #36c;
}
/* Main Menu > Aktives Menu mit Farbauszeichnung >
________________________________________________________________________________________________ */
/* current-menu-item */
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__container
.current-menu-item
> a,
.wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__container
.has-child
button:hover {
color: #45a1b8;
text-decoration: none;
}
/* hover */
.wp-block-navigation .wp-block-navigation-item :hover {
color: #45a1b8;
text-decoration: none;
}
/* Mobile Menu 1024px FIX
* Mobile Menu im Vordergrund durch ausschalten des backdrop-filters
* und wieder einfügen wenn Menu geöffnet wird.
_______________________________________________________________________________ */
.wp-block-group {
backdrop-filter: none;
}
.wp-block-navigation__responsive-container.is-menu-open {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
}
/* Hamburger Icon Version 03
_______________________________________________________________________________ */
/* BASIS – ICON & ZENTRIERUNG
_________________________________________ */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.wp-block-navigation svg.menu-icon {
width: 36px;
height: 36px;
display: block;
}
.wp-block-navigation .menu-icon .line {
stroke: currentColor;
stroke-width: 4; /* Linien Stärke */
stroke-linecap: round;
/* transition erweitert um transform-origin für sauberes Skalieren */
transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
transform-origin: center;
}
/* ZUSTAND: GESCHLOSSEN (Hamburger)
_________________________________________ */
/* Standard-Position */
.menu-icon .top, .menu-icon .bottom { transform: translateY(0); }
/* Hover: Auseinanderweichen */
:not(.is-menu-open) > .wp-block-navigation__responsive-container-open:hover .menu-icon .top {
transform: translateY(-5px);
}
:not(.is-menu-open) > .wp-block-navigation__responsive-container-open:hover .menu-icon .bottom {
transform: translateY(5px);
}
/* ZUSTAND: geoeffnetes Menu (X-Close Icon)
_________________________________________ */
/* Basis-Kreuz Form */
.is-menu-open .menu-icon .top {
transform: translateY(3px) rotate(45deg);
color: var(--wp--preset--color--white);
}
.is-menu-open .menu-icon .bottom {
transform: translateY(-3px) rotate(-45deg);
color: var(--wp--preset--color--white);
}
/* NEU: Hover-Effekt am Kreuz (Linien werden kürzer) */
.is-menu-open .wp-block-navigation__responsive-container-close:hover .menu-icon .top {
transform: translateY(3px) rotate(45deg) scale(0.8) !important;
}
.is-menu-open .wp-block-navigation__responsive-container-close:hover .menu-icon .bottom {
transform: translateY(-3px) rotate(-45deg) scale(0.8) !important;
}
/* FORMULARE
_______________________________________________________________________________ */
/* Form Block */
input:not([type="submit"]):not([type="radio"]),
select,
textarea,
.wp-block-post-comments-form
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wp-block-post-comments-form textarea {
color: var(--wp--preset--color--main);
border-radius: 2px !important;
border: solid 1px
color-mix(
in srgb,
var(--wp--preset--color--tertiary) 100%,
var(--wp--preset--color--main) 20%
);
padding: 0.5em 1em;
font-size: var(--wp--preset--font-size--small);
background-color: transparent !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.02),
0 0.5px 1px rgba(0, 0, 0, 0.04);
}
input:not([type="submit"]):not([type="radio"]) {
margin: 7px 10px 0px 0px;
}
/* Splide Carousel Block/PlugIn by David Jensen
_______________________________________________________________________________ */
.splide__arrow svg {
display: none !important;
}
.splide__arrow::before {
content: "";
display: block;
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-size: contain;
color: red !important;
}
/* → Pfeil (next) */
.splide__arrow--next::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* ← Pfeil (prev) */
.splide__arrow--prev::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* CSS Splide Carousel Block */
.wp-block-splide-carousel .splide__arrow {
align-items: center;
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
height: 2em;
justify-content: center;
opacity: 0.7;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2em;
z-index: 1;
}
/* Media Queries
________________________________________________________________________________________________ */
/* Sticky-Title Klasse in Spaltenblock schreiben */
@media (min-width: 768px) {
.sticky-title {
position: -webkit-sticky;
position: sticky;
top: 164px; /* Abstand zum oberen Rand beim Scrollen */
align-self: flex-start; /* Wichtig in Flexbox-Spalten */
}
}
/*
@media screen and (min-width: 768px) and (max-width: 1024px) {
/ Gilt nur zwischen 768 und 1024 Pixel /
.class {
cvv: cvv;
}
}
*/