/** * Theme Name: Blocksy Child * Description: Blocksy Child theme * Author: Creative Themes * Template: blocksy * Text Domain: blocksy */ /** var(--theme-palette-color-1) you can use this as your primary brand colour. var(--theme-palette-color-2) alternative colour, used usually for the hover action var(--theme-palette-color-3) colour used for general text paragraphs var(--theme-palette-color-4) colour used for headings, subheadings and titles var(--theme-palette-color-5) colour used for borders var(--theme-palette-color-6) #778d7a; colour used for subtle backgrounds (page hero, footer) var(--theme-palette-color-7) colour used for the site’s background var(--theme-palette-color-8) lighter alternative colour, to be used in header backgrounds Blocksy Querys: @media (min-width: 768px) {} @media (max-width: 999x) {} */ /* https://www.joshwcomeau.com/shadow-palette/ */ :root { --shadow-color: 0deg 0% 0%; --shadow-elevation-low: 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.02), 0.3px 1.1px 1.6px -0.5px hsl(var(--shadow-color) / 0.08); --shadow-elevation-medium: 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.01), 0.5px 1.8px 2.7px -0.2px hsl(var(--shadow-color) / 0.05), 1.6px 5.4px 8px -0.5px hsl(var(--shadow-color) / 0.09); --shadow-elevation-high: 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.02), 1.1px 3.6px 5.4px -0.2px hsl(var(--shadow-color) / 0.06), 2.4px 8.2px 12.2px -0.3px hsl(var(--shadow-color) / 0.1), 5.2px 17.9px 26.6px -0.5px hsl(var(--shadow-color) / 0.14); } .schatten.small { box-shadow: var(--shadow-elevation-low); } .schatten { box-shadow: var(--shadow-elevation-medium); } .schatten.large { box-shadow: var(--shadow-elevation-high); } /* Header __________________________________________________________________________________*/ [data-header*="type-1"] .ct-header [data-row*="top"] p { margin-bottom: 0 !important; } [data-header*="type-1"] .ct-header [data-row*="top"] lord-icon { margin: -0.25rem 1rem 0 1rem; } [data-header*="type-1"] .ct-header [data-row*="middle"] { background-blend-mode: multiply !important; } .site-logo-container { filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2)); } header [data-row*="bottom"] { z-index: 2 !important; } header [data-id*="widget-area-1"] {width: 100%; } header [data-row*="bottom"] .stk-block-heading { width: 100%; word-spacing: 0.5em } .ct-container-fluid {width: 100vw !important; } /* Menü __________________________________________________________________________________*/ /* lose und freie Klassen __________________________________________________________________________________*/ h1 { margin-top: 0 !important; margin-bottom: 0.75em !important; } h2 { margin-bottom: 0.75em !important; } h3 { margin-bottom: 1em !important; } h4 { margin-bottom: 1em; } h5 { margin-bottom: 1em; } hr {margin: 80px auto !important; } b, strong { font-weight: 700; } p { margin-bottom: 0.875em !important; } .small { font-size: 0.875em; } .blocksatz { text-align: justify; hyphens: auto } .kolumnen div.stk-block-content, .kolumnen div.tpgb-column-inner { column-count: 2; column-width: 300px; column-gap: 8em; column-rule: 1px solid rgba(0,0,0,0.25); margin-top: 2rem; display: block; hyphens: auto; text-align: justify; } .margin-bottom-0 { margin-bottom: 0 !important; } .wp-block-image img, .blocks-gallery-item img { border-radius: 3px !important; } .wp-block-image:hover a img { box-shadow: var(--shadow-elevation-high) !important; transform: scale(1.1); z-index: 99; } .stk-highlight { color: var(--theme-palette-color-1) !important; } .background-multiply { background-blend-mode: multiply;} /* Startseite __________________________________________________________________________________*/ /* Footer __________________________________________________________________________________*/ #rueckrufbitte { position: absolute; top: -70px; left: -69px; } #rueckrufbitte:hover { transform: scale(1.05); } #rueckrufbitte img { filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2)); } #rueckrufbitte lord-icon { left: 27px; top: 14px; position: absolute; } @media (max-width: 999px) { #rueckrufbitte { transform: scale(0.8); position: relative; margin-top: -15px; margin-right: 100px; } #rueckrufbitte:hover { transform: scale(0.85); } } @media (max-width: 768px) { #rueckrufbitte { left: 0; margin-right: 0; } } footer .menu-item-26 { margin-right: 4em; } /* Stackable Blocks __________________________________________________________________________________*/ .liste-mit-linien ul { } .liste-mit-linien ul li { list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 30%) !important; margin: 0 -0.25em; padding: 1.25em 0.25em; } .circle-content-inner ul { padding-inline-start: 0; } .circle-content-inner ul li { padding: 0.5em 0.25em; } .liste-mit-linien ul li:last-child { border-bottom: none !important; } @media (max-width: 999px) { .circle-content-inner p, .circle-content-inner ul li { font-size: 0.80rem; line-height: 1.2em;} } @media (max-width: 767px) { .circle-content-inner p, .circle-content-inner ul li { font-size: 0.65rem; line-height: 1.2em;} } /* Nexter */ .tpgb-circle-item-1 *, .tpgb-circle-item-3 * { color: #000000 !important; } /* Plugins __________________________________________________________________________________*/ /* Blocksy -------------------------------------*/ .ct-popup { backdrop-filter: blur(4px); } #main-container { padding-bottom: 0 !important;} /* Complianz -------------------------------------*/ #cmplz-cookies-overview .cmplz-dropdown p, #cmplz-document .cmplz-dropdown p, #cmplz-document li, #cmplz-document p, #cmplz-document td { font-size: 1rem; } #cmplz-document.impressum h2, #cmplz-document.impressum h3 { font-size: 1.5rem; margin-top: 1.5em; margin-bottom: 0 !important; color: var(--theme-palette-color-3) !important; opacity: 1; } #cmplz-document a { text-decoration: none; } #cmplz-document b { font-weight: 700; } #cmplz-document h2, #cmplz-document h3 { margin-top: 2em !important; margin-bottom: 0 !important; } /* Kali Forms -------------------------------------*/ .kaliforms-form-container div.col-12 { margin-bottom: 6px !important; } @media (min-width: 768px) { .kaliforms-form-container .col-md-3:first-child, .kaliforms-form-container .col-md-4:first-child, .kaliforms-form-container .col-md-5:first-child, .kaliforms-form-container .col-md-6:first-child, .kaliforms-form-container .col-md-7:first-child, .kaliforms-form-container .col-md-8:first-child { padding-left: 15px !important; } .kaliforms-form-container .col-md-3, .kaliforms-form-container .col-md-4, .kaliforms-form-container .col-md-5, .kaliforms-form-container .col-md-6, .kaliforms-form-container .col-md-7, .kaliforms-form-container .col-md-8 { padding-right: 3px !important; padding-left: 3px !important; } .kaliforms-form-container .col-md-3:not(:first-child) label, .kaliforms-form-container .col-md-4:not(:first-child) label, .kaliforms-form-container .col-md-5:not(:first-child) label, .kaliforms-form-container .col-md-6:not(:first-child) label, .kaliforms-form-container .col-md-7:not(:first-child) label, .kaliforms-form-container .col-md-8:not(:first-child) label { margin-left: -10px !important; } .kaliforms-form-container .col-md-3:last-child, .kaliforms-form-container .col-md-4:last-child, .kaliforms-form-container .col-md-5:last-child, .kaliforms-form-container .col-md-6:last-child, .kaliforms-form-container .col-md-7:last-child, .kaliforms-form-container .col-md-8:last-child{ padding-right: 15px !important; } } .kaliforms-form-container .row div[class^="col-"], .kaliforms-form-container .row div[class*=" col-"] { margin-bottom: 0px; } .kaliforms-form-container hr { height: 5px; background-color: transparent; margin: 0.25em 0 !important; } .kaliforms-form-container label:not(.checkbox-label) { position: absolute; z-index: 2; font-size: 14px !important; top: 4px; left: 25px; } .filepond--drop-label.filepond--drop-label label { position: relative; top: inherit; left: inherit; } .kaliforms-form-container label { color: var(--theme-palette-color-3) !important; } .kaliforms-form-container .col-12:focus-within label:not(.checkbox-label), .kaliforms-form-container .col-12 label.input-filled { transform: translateY(-2px) translateX(0px); transform-origin: top left; color: rgb(0 0 0 / 0.5) !important; font-size: 0.7em !important; } .kaliforms-form-container [type='freeText'] { color: var(--theme-palette-color-3); } .kaliforms-form-container textarea { min-height: 250px;} .kaliforms-form-container textarea:focus { position: relative; } .kaliforms-form-container [type='text'], .kaliforms-form-container [type='password'], .kaliforms-form-container [type='date'], .kaliforms-form-container [type='datetime'], .kaliforms-form-container [type='datetime-local'], .kaliforms-form-container [type='month'], .kaliforms-form-container [type='week'], .kaliforms-form-container [type='email'], .kaliforms-form-container [type='number'], .kaliforms-form-container [type='search'], .kaliforms-form-container [type='tel'], .kaliforms-form-container [type='time'], .kaliforms-form-container [type='url'], .kaliforms-form-container [type='color'], .kaliforms-form-container textarea, .kaliforms-form-container #kali-stripe-iban-element, .kaliforms-form-container #kali-stripe-card-element { margin-bottom: 0 !important; padding-top: 35px !important; padding-bottom: 15px !important; padding-left: 9px !important; border-radius: 3px !important; background-color: rgba(186,219,212,0.15) !important; box-shadow: 0 0 0 !important; border: 1px solid rgba(0,0,0,0.00) !important; } .kaliforms-form-container input[required], .kaliforms-form-container textarea[required], .kaliforms-form-container select[required] { border: 1px solid var(--theme-palette-color-1) !important; background-color: rgba(186,219,212,0.25) !important; } .kaliforms-form-container input:focus, .kaliforms-form-container textarea:focus { background-color: var(--theme-palette-color-7) !important; color: #000; border: 1px solid var(--theme-palette-color-1) !important; box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11) !important; transform: scale(1.01); } .kaliforms-form-container #optionale-angaben { font-size: 0.875em; } .kaliforms-form-container .checkbox-label input { display: inline-block ; } .kaliforms-form-container .checkbox-label span { overflow-y: visible !important; } .kaliforms-form-container .checkbox-label span:nth-of-type(2){ margin-left: 33px; margin-bottom: 25px; } .kaliforms-form-container [type='submit'], .kaliforms-form-container [type='button'] { float: right !important; } div[id^="kaliforms-thank-you"] { background-color: rgba(219,229,191,1.00); border-radius: 3px; padding: 2em; margin-top: 2em; } div[id^="kaliforms-thank-you"] h2 { font-size: 1.6em; font-weight: 600; } /* Animationen __________________________________________________________________________________*/ input, textarea, input[type=submit], select, label, tr, .linktext, .ugb-card__image, .ugb-card__description, .ugb-card .ugb-card__subtitle, .ugb-card .ugb-card__title, div[id^="kaliforms-thank-you"], .tpgb-featured-image img, .wp-block-image img, .ct-icon-container, #rueckrufbitte, .stk-block-heading { transition: all 0.3s ease !important; } /* Element muss ebenso die Klasse .animate enthalten, damit es erst beim Scrollen den Zusatz: scrolled erhält, siehe scripte.js .animate:not(.scrolled) { display: none; } .animate.scrolled { display: visible; } */ body:not(.wp-admin) .animate:not(.scrolled) { visibility: hidden; } .animate.scrolled { visibility: visible; } /* ---------------------------------------------- * Generated by Animista on 2020-2-16 11:26:0 * Licensed under FreeBSD License. * See http://animixsta.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ .animate.scrolled ul li { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both; } .animate.scrolled ul li:nth-child(2) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both; } .animate.scrolled ul li:nth-child(3) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both; } .animate.scrolled ul li:nth-child(4) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both; } .animate.scrolled ul li:nth-child(5) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both; } .animate.scrolled ul li:nth-child(6) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both; } .animate.scrolled ul li:nth-child(7) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both; } .animate.scrolled ul li:nth-child(8) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s both; } .animate.scrolled ul li:nth-child(9) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.9s both; } .animate.scrolled ul li:nth-child(10) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.0s both; } .animate.scrolled ul li:nth-child(11) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.1s both; } .animate.scrolled ul li:nth-child(12) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.2s both; } .animate.scrolled ul li:nth-child(13) { animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.3s both; } .slide-in-blurred-bottom.scrolled, li.scrolled { -webkit-animation: slide-in-blurred-bottom 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s both; animation: slide-in-blurred-bottom 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s both; } /* ---------------------------------------------- * Generated by Animista on 2022-3-20 11:38:56 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation slide-in-blurred-bottom * ---------------------------------------- */ @-webkit-keyframes slide-in-blurred-bottom { 0% { -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2); transform: translateY(1000px) scaleY(2.5) scaleX(0.2); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translateY(0) scaleY(1) scaleX(1); transform: translateY(0) scaleY(1) scaleX(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes slide-in-blurred-bottom { 0% { -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2); transform: translateY(1000px) scaleY(2.5) scaleX(0.2); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translateY(0) scaleY(1) scaleX(1); transform: translateY(0) scaleY(1) scaleX(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } .puff-in-center.scrolled { -webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; } /* ---------------------------------------------- * Generated by Animista on 2022-7-8 11:17:8 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation puff-in-center * ---------------------------------------- */ @-webkit-keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } .tracking-in-expand { visibility: visible !important; } .tracking-in-expand.scrolled { -webkit-animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-expand 4s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; } /* ---------------------------------------------- * Generated by Animista on 2022-10-3 14:12:28 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation tracking-in-expand * ---------------------------------------- */ @keyframes tracking-in-expand { 0% { letter-spacing: 0.2em; } 100% { letter-spacing: 0.0em; } } @keyframes tracking-in-expand { 0% { letter-spacing: 0.2em; } 100% { letter-spacing: 0.0em; } }