/** * FRONTEND STYLES * This file is only loaded in the WordPress frontend. * Only add styles which are not needed in the block editor. */ /* Apply a standard transition between the pages – a crossfade */ @view-transition { navigation: auto; } /* Turn off the fade duration only for reduced-motion users */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s !important; } } /* SITE HEADER & NAVIGATION ==================================================================================================== */ /* Keep mobile/overlay navigation active up to 959px. From 960px Core's existing min-width: 600px desktop rules apply again */ @media (min-width: 600px) and (max-width: 959px) { .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* FORMS & INPUT FIELDS ==================================================================================================== */ form { --c-notice--alert: #B50000; --c-notice--attention: var(--wp--preset--color--black); --c-notice--success: var(--wp--preset--color--black); --c-input--text: var(--wp--preset--color--copytext); --c-input--focus: var(--wp--preset--color--pink); --c-label--text: var(--wp--preset--color--black); --input--border: 1px solid #8c8f94; --input--background: var(--wp--preset--color--white); } :where(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea) { box-sizing: content-box; width: calc(100% - 3rem); height: calc((1.5rem * var(--wp--custom--line-height--small))); border-radius: var(--wp--custom--border-radius--small); border: var(--input--border); padding: 0.5rem 1.5rem; color: var(--c-input--text); background: var(--input--background); } input[type="date"], input[type="time"] { appearance: initial !important; } input[type="number"] { padding-right: 0; width: calc(100% - 1.5rem); } :where(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea):focus { outline: 0; border-color: var(--wp--preset--color--copytext); background-color: var(--c-input--focus); box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1); } :where(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea)[aria-invalid="true"] { border-color: var(--c-notice--alert); } textarea { resize: vertical; /* user can resize vertically, but width is fixed */ height: auto; } select { -webkit-appearance: none; appearance: none; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: right 1.25em top 50%; } label, legend { display: inline-block; margin-bottom: 0.5rem; line-height: var(--wp--custom--line-height--small); color: var(--c-label--text); } label[for] { font-size: var(--wp--preset--font-size--small); font-weight: 700; } fieldset { padding: 0; margin: 0; border: none; } form p { margin-bottom: 1em; } input[type="date"], input[type="time"] { -webkit-appearance: textfield; appearance: textfield; } /* Positionierung */ .content-section > .wp-block-safe-svg-svg-icon { position: absolute; top: 0; z-index: 2; margin: 0; filter: drop-shadow(2px 2px 12px rgb(102 102 102 / 30%)); transition: filter .25s ease; } .content-section > .wp-block-safe-svg-svg-icon:has(.icon-right) { right: calc((100% - var(--wp--style--global--content-size)) / 2 - 4rem); } .content-section > .wp-block-safe-svg-svg-icon:has(.icon-left) { left: calc((100% - var(--wp--style--global--content-size)) / 2 - 4rem); } /* Position/Rotation des gesamten Icons */ .content-section > .wp-block-safe-svg-svg-icon:has(.ampersand) { transform: translateY(-45%) rotate(7deg); } .content-section > .wp-block-safe-svg-svg-icon:has(.cups) { transform: translateY(-35%) rotate(7deg); } .content-section > .wp-block-safe-svg-svg-icon:has(.chain) { transform: translateY(-35%) rotate(-3deg); } .content-section > .wp-block-safe-svg-svg-icon:has(.knot) { transform: translateY(-30%) rotate(-7deg); } /* Größen */ .safe-svg-inside.ampersand { width: clamp(110px, 10vw, 140px) !important; } .safe-svg-inside.chain { width: clamp(190px, 18vw, 270px) !important; } .safe-svg-inside.knot { width: clamp(190px, 18vw, 266px) !important; } .safe-svg-inside.cups { width: clamp(200px, 20vw, 294px) !important; } .safe-svg-inside:is(.ampersand, .chain, .knot, .cups) svg { display: block; width: 100%; height: auto; } /* Animation */ :is(.ampersand, .knot, .chain, .cups) { opacity: 0; transform-origin: center; will-change: transform, opacity; transition: opacity .4s ease-out, transform .7s cubic-bezier(.22, 1, .36, 1); } .ampersand { transform: translate3d(35px, 15px, 0) rotate(20deg) scale(.6); } .knot { transform: translate3d(-35px, 10px, 0) rotate(-16deg) scale(.65); } .chain { transform: translate3d(30px, -15px, 0) rotate(14deg) scale(.65); } .cups { transform: translate3d(30px, 20px, 0) rotate(12deg) scale(.65); } :is(.ampersand, .knot, .chain, .cups).is-visible { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); } /* Hover */ .content-section > .wp-block-safe-svg-svg-icon:hover { filter: drop-shadow(1px 1px 3px rgb(102 102 102 / 30%)); } .ampersand.is-visible:hover { transform: rotate(4deg) scale(.95); } .knot.is-visible:hover { transform: rotate(-4deg) scale(.95); } .chain.is-visible:hover { transform: rotate(-7deg) scale(.95); } .cups.is-visible:hover { transform: rotate(6deg) scale(.95); } /* Responsive */ @media (max-width: 1300px) { .content-section > .wp-block-safe-svg-svg-icon:has(.icon-right) { right: 1.5rem; } .content-section > .wp-block-safe-svg-svg-icon:has(.icon-left) { left: 1.5rem; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { :is(.ampersand, .knot, .chain, .cups) { opacity: 1; transform: none; transition: none; } }