/*! pxlr_cocoon v2.0.0 | (c) 2026 Pierre Brost | MIT License | http://github.com/cferdinandi/build-tools-boilerplate */ @charset "UTF-8"; /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 File: app.scss;11 Text Domain: pxlr-cocoon */ /* vendors from theme root/vendors */ /* Slider */ @import '../../vendor/plyr/dist/plyr.css'; .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* settings */ /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.2.0 Text Domain: pxlr-cocoon File: settings.scss Desc: Global setting vars */ /* Base Size to use it as REM Calculation -> Target Size / Base Size = Value If Base is 16px -> http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/ Or Variable -> https://daniellamb.com/experiments/px-to-rem-calc/ */ :root { /* Site header logo */ --site_header_logo_width_phone: 80px; --site_header_logo_width_tablet: 100px; --site_header_logo_width_desktop: 120px; --site_header_logo_width_desktop_large: 140px; /* Site header logo sticky */ --site_header_sticky_logo_width_phone: 80px; --site_header_sticky_logo_width_tablet: 80px; --site_header_sticky_logo_width_desktop: 140px; /* Site header sticky */ --site_header_sticky_height: 100px; /* Base content width to calculate in calc() functions*/ /* Basefont size CSS Var for responsive typo in typography.scss */ --basefont_xs: 14px; --basefont_s: 16px; --basefont_m: 18px; --basefont_l: 18px; --basefont_xl: 18px; --basefont_2xl: 18px; --basefont_3xl: 18px; } /* Pixel To Rem Basefont size SCSS Var for responsive typo in typography.scss*/ /* Form fontsize */ /* Typography SCSS Vars $viewport + heading + size */ /* Larger sises for mor berutalism if needed */ /*Fontweights depends on typeface */ /* Lineheights $lineheight + size */ /* Heading & Body Fontfaces*/ /* Iconfont generated by fantasticon */ /* Border Radius */ /* Container max-width */ /* Global Grid Options This shows how the css grid works @link: https://gridbyexample.com/examples/example28/ @link: https://medium.com/sketch-app-sources/css-grid-einf%C3%BChrung-in-5-minuten-verstehen-und-in-sketch-umsetzen-9e9e8a16b07e */ /* Wrapper Padding on Container*/ /* Page Layout Padding*/ /* Page with no Hero Padding-Top*/ /* Margin Sizes */ /* Viewport Sizes */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.2.0 Text Domain: pxlr-cocoon File: mixin.scss Desc: diverse mixins to use all over tha stylings Usage: @link https://sass-lang.com/documentation/at-rules/mixin @mixin example { margin: 0; padding: 0; @content; // Use to overwrite settings } .someclass{ @include example; } */ /* ************************************************************************** Global Padding *********************************************************** ************************************************************************** */ /* ****************************************************************************** Viewports by size 2xs to 3xl ************************************************* *** Note this will not be used that much, just for some specails if needed *** *** In general we use this @mixin device_2xs to @mixin device_3xl ************ ****************************************************************************** */ /* ************************************************************************** Viewport by device type - mobile is phone and tablet ********************* ************************************************************************** */ /* ************************************************************************** Viewports by device type ************************************************* ************************************************************************** */ /* ************************************************************************** Global Form field and button sizes *************************************** ************************************************************************** */ /* ************************************************************************** GLOBAL SITE MAIN TOP PADDING - Can be used in single, archive, page ****** ************************************************************************** */ /* ************************************************************************** SLick Slider pagination ************************************************** ************************************************************************** */ /* ************************************************************************** PXLR-BLOCK-TITLE-INDICATOR - Title with branding logo ******************** ************************************************************************** Note: Possible styling classes in structure Used by: Lazy Blocks - Custom Blocks Constructor - Title Indicator with signet Used by: Some plugins in html markup - pxlr-block-title-indicator-wrapper -- is-style-title-indicator-alignment-center -- is-style-title-indicator-alignment-left -- is-style-title-indicator-alignment-right ----- pxlr-block-title-indicator-item ------- is-style-indicator-size-default ------- h1, h2, h3, h4, h5, h6, + is-style-indicator-size-default -------- is-style-title-color-primary -------- is-style-title-color-black -------- is-style-title-color-white ------- is-style-indicator-position-left + is-style-indicator-position-top -------- (Note: small is default) -------- is-style-indicator-size-medium -------- is-style-indicator-size-large -------- is-style-indicator-color-primary -------- is-style-indicator-color-black -------- is-style-indicator-color-white */ /* ************************************************************************** PXLR-BUTTON-CIRCLE-ARROW ************************************************* Info: Anchor link with arrow and css circle with animation on hover ***** ************************************************************************** - a --- hover */ /* ******************************************************************************** Forms Restet if needed ********************************************************* ******************************************************************************** */ /* ******************************************************************************** Forms ************************************************************************** ******************************************************************************** */ /* ******************************************************************************** pxlr-reviews plugin and block ************************************************** ******************************************************************************** */ /* ******************************************************************************** pxlr-testimonials plugin and block ********************************************* ******************************************************************************** */ /* global */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: basics.scss Desc: Diverse allgemeine Regeln */ * { box-sizing: border-box; } *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } html, body { color: var(--color_body-text); background-color: var(--color_body-background); margin: 0; padding: 0; /* Basefont is set in typography.scss */ /* At the time of writing this, the scroll-behavior property works in Edge, Chrome and Firefox, but not for IE, or older Safari (desktop or mobile). https://caniuse.com/?search=scroll-behavior%3A%20smooth%3B */ scroll-behavior: smooth; /*German language only - Silbentrennung*/ -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1.5em 0; /* Extra wide images within figure tags don't overflow the content area. */ } .post, .page { margin: 0; } a { color: var(--color_primary); text-decoration: none; outline: none; cursor: pointer; } a:hover, a:focus, a:active { color: var(--color_secondary); } a, img, div, button { /* Disable some Mobile Touch things */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* -webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on. */ -webkit-tap-highlight-color: transparent; } @media only screen and (min-width: 1290px) { a, img, div, button { -webkit-user-select: inherit; -khtml-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; } } button { background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; } /* Remove focus border (outline) around text/input boxes (Chrome) */ textarea:focus, input:focus { outline: none; } /* Edit Link for admins */ .edit-link { margin-bottom: 30px; display: inline-block; } .edit-link a { color: var(--color_black); background-color: green; border-radius: 3px; padding: 5px 10px 5px 10px; font-size: 0.85rem; text-transform: uppercase; font-weight: 800; } .edit-link a:hover { background-color: var(--color_white); } /* _s Posts and pages --------------------------------------------- */ .sticky { display: block; } .updated:not(.published) { display: none; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /* _s Comments --------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /* _s Widgets --------------------------------------------- */ .widget { margin: 0 0 1.5em; } .widget select { max-width: 100%; } /* _s Media --------------------------------------------- */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Link to edit current page */ footer .pxlr-edit-current-page { margin-top: 30px; margin-bottom: 30px; position: relative; z-index: 2; } footer .pxlr-edit-current-page .pxlr-edit-current-page-link a.post-edit-link { padding: 7px; background-color: var(--color_notice_success); color: var(--color_white); border-radius: 0 3px 3px 0; font-size: 0.65rem; text-transform: uppercase; font-weight: 500; box-shadow: var(--color_shadow-medium); } footer .pxlr-edit-current-page .pxlr-edit-current-page-link a.post-edit-link:before { content: "You can "; position: relative; } footer .pxlr-edit-current-page .pxlr-edit-current-page-link a.post-edit-link:after { content: " this page"; position: relative; } footer .pxlr-edit-current-page .pxlr-edit-current-page-link a.post-edit-link:hover { background-color: var(--color_black); } /* Fun Things*/ .pxlr-ubar-lamp { position: absolute; z-index: 1; transform: translateX(-50%); left: 50%; top: -1%; pointer-events: none; animation: swing_ubar_lamp 2.5s infinite alternate ease-in-out; transform-origin: 30px -20px; } @media (min-width: 1024px) { .pxlr-ubar-lamp { top: -10%; } } .pxlr-ubar-lamp img { width: 50%; } @media (min-width: 768px) { .pxlr-ubar-lamp img { width: 40%; } } @media (min-width: 1024px) { .pxlr-ubar-lamp img { width: 45%; } } @media (min-width: 1290px) { .pxlr-ubar-lamp img { width: 50%; } } @media (min-width: 1440px) { .pxlr-ubar-lamp img { width: 70%; } } .pxlr-ubar-lamp.fixed { position: absolute; z-index: 10; } @media (min-width: 1024px) { .pxlr-ubar-lamp.fixed { position: fixed; } } @keyframes swing_ubar_lamp { 0% { transform: rotate(-20deg); } 100% { transform: rotate(20deg); } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: typography.scss Desc: Typografie */ /* Global Font In case of safari etc we need wof as well. But on the google page you get only ttf for Libre Franklin. So use @link https://fonts.google.com/specimen/Libre+Franklin#standard-styles to get all font types from Libre Franklin we convert ttf also as eot, woff, woff2, svg over https://transfonter.org/ ttf -> fonts/LibreFranklin/static eot, woff, woff2, svg ->fonts/LibreFranklin/static/coverted-webfonts Variable font - It is not in use here but can Libre Franklin is also avalable as variable font. fonts/LibreFranklin/LibreFranklin-Italic-VariableFont_wght.ttf fonts/LibreFranklin/LibreFranklin-VariableFont_wght.ttf https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts */ /* Get Google Font as Webfonts When we download a font from fonts.google.com we get only .ttf format. But we need wof, off etc. Use this page to get these files. New: https://gwfh.mranftl.com/fonts */ /* https://gwfh.mranftl.com/fonts/playwrite-de-grund?subsets=latin */ /* playwrite-de-grund-100 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Playwrite DE Grund"; font-style: normal; font-weight: 100; src: url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-100.eot"); /* IE9 Compat Modes */ src: url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-100.eot?#iefix") format("embedded-opentype"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-100.woff2") format("woff2"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-100.woff") format("woff"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-100.ttf") format("truetype"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-100.svg#PlaywriteDEGrund") format("svg"); /* Legacy iOS */ } /* playwrite-de-grund-200 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Playwrite DE Grund"; font-style: normal; font-weight: 200; src: url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-200.eot"); /* IE9 Compat Modes */ src: url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-200.eot?#iefix") format("embedded-opentype"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-200.woff2") format("woff2"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-200.woff") format("woff"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-200.ttf") format("truetype"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-200.svg#PlaywriteDEGrund") format("svg"); /* Legacy iOS */ } /* playwrite-de-grund-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Playwrite DE Grund"; font-style: normal; font-weight: 300; src: url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-300.eot"); /* IE9 Compat Modes */ src: url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-300.woff2") format("woff2"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-300.woff") format("woff"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-300.ttf") format("truetype"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-300.svg#PlaywriteDEGrund") format("svg"); /* Legacy iOS */ } /* playwrite-de-grund-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Playwrite DE Grund"; font-style: normal; font-weight: 400; src: url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-regular.eot"); /* IE9 Compat Modes */ src: url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-regular.woff2") format("woff2"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-regular.woff") format("woff"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-regular.ttf") format("truetype"), url("../fonts/playwrite-de-grund-v10-latin/playwrite-de-grund-v10-latin-regular.svg#PlaywriteDEGrund") format("svg"); /* Legacy iOS */ } /* Generated Iconfont by npm fantasticon */ @font-face { font-family: "icons"; src: url("../fonts/icons.eot?a744c61f3a92bd570e03e80ba65d8449#iefix") format("embedded-opentype"), url("../fonts/icons.woff2?a744c61f3a92bd570e03e80ba65d8449") format("woff2"), url("../fonts/icons.woff?a744c61f3a92bd570e03e80ba65d8449") format("woff"), url("../fonts/icons.ttf?a744c61f3a92bd570e03e80ba65d8449") format("truetype"); } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.2.0 Text Domain: pxlr-cocoon File: typography.scss Desc: Typography */ /* TODO: set for all fontsizes responsive var values inside settings.scss or in a new typesettings.scss */ /* Fonts will be load in typeface.scss */ /* Responsive Basefont vars Fonzsize var --CSS vars are set in settings.scss */ :root body { font-size: var(--basefont_xs); } @media (min-width: 768px) { :root body { font-size: var(--basefont_s); } } @media (min-width: 1024px) { :root body { font-size: var(--basefont_m); } } @media (min-width: 1290px) { :root body { font-size: var(--basefont_l); } } @media (min-width: 1440px) { :root body { font-size: var(--basefont_xl); } } @media (min-width: 1920px) { :root body { font-size: var(--basefont_2xl); } } @media (min-width: 2500px) { :root body { font-size: var(--basefont_3xl); } } /* * Convert PX to Rem @link https://medium.com/@bhargav3shah/scss-convert-pixel-values-to-rem-using-functions-f1cef575edfd Can be use it like this, .component { font-size: px-to-rem(14px); // or px-to-rem(14) } This will set font-size, as example, to 0.875rem to the element which has component CSS class. Do note, the value you pass to the function can be with or without a unit. */ /* Function to convert pixels to rems with size and viewport parameter Usage: font-size: px-to-rem(400px, desktop_large); Fonzsize var $SCSS vars are set in settings.scss */ /* Default Font declarations */ body, button, input, select, optgroup, textarea { color: var(--color_body-text); font-family: "Playwrite DE Grund", sans-serif; font-weight: 300; line-height: 130%; letter-spacing: 0.5px; } b, strong { font-weight: 400; } p { margin-bottom: 1.5em; line-height: initial; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } /* Headlines */ h1, h2, h3, h4, h5, h6 { color: var(--color_primary); font-family: "Playwrite DE Grund", sans-serif; font-weight: 300; line-height: 130%; margin: 0px 0px 5px 0px; letter-spacing: 0; } /* 2XS Sematic Headings - Start with small phone viewport_xs as default without any mediaquery/mixin */ h1 { font-size: 2rem; line-height: 140%; } h2 { font-size: 1.7857142857rem; line-height: 140%; } .has-style-h2-as-h1 h2 { font-size: 2rem; line-height: 140%; } h3 { font-size: 1.4285714286rem; line-height: 140%; } h4 { font-size: 1.2857142857rem; line-height: 140%; } h5 { font-size: 1.1428571429rem; line-height: 140%; } h6 { font-size: 1rem; line-height: 140%; } /* TinyMCE Heroslider Headline - Style is added in pxlr-heroslider.scss This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ /* XS Sematic Headings */ @media (min-width: 412px) { h1, h2, h3, h4, h5, h6 { margin: 0px 0px 15px 0px; } h1 { font-size: 2.2857142857rem; line-height: 130%; } h2 { font-size: 2rem; line-height: 130%; } .has-style-h2-as-h1 h2 { font-size: 2.2857142857rem; line-height: 130%; } h3 { font-size: 1.5714285714rem; line-height: 130%; } h4 { font-size: 1.2857142857rem; line-height: 130%; } h5 { font-size: 1.1428571429rem; line-height: 130%; } h6 { font-size: 1rem; line-height: 130%; } /* TinyMCE Heroslider Headline - Style is added in pxlr-heroslider.scss This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } /* S Sematic Headings */ @media (min-width: 768px) { h1, h2, h3, h4, h5, h6 { margin: 0px 0px 15px 0px; } h1 { font-size: 3.125rem; line-height: 130%; } h2 { font-size: 2.5rem; line-height: 130%; } .has-style-h2-as-h1 h2 { font-size: 3.125rem; line-height: 130%; } h3 { font-size: 1.875rem; line-height: 130%; } h4 { font-size: 1.5625rem; line-height: 130%; } h5 { font-size: 1.25rem; line-height: 130%; } h6 { font-size: 1rem; line-height: 130%; } /* TinyMCE Heroslider Headline - Style is added in pxlr-heroslider.scss This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } /* M Sematic Headings */ @media (min-width: 1024px) { h1, h2, h3, h4, h5, h6 { margin: 0px 0px 15px 0px; } h1 { font-size: 3.3333333333rem; line-height: 130%; } h2 { font-size: 2.7777777778rem; line-height: 130%; } .has-style-h2-as-h1 h2 { font-size: 3.3333333333rem; line-height: 130%; } h3 { font-size: 2.2222222222rem; line-height: 130%; } h4 { font-size: 1.6666666667rem; line-height: 130%; } h5 { font-size: 1.3888888889rem; line-height: 130%; } h6 { font-size: 1.1111111111rem; line-height: 130%; } /* TinyMCE Heroslider Headline - Style is added in pxlr-heroslider.scss This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } /* L Sematic Headings */ @media (min-width: 1290px) { h1, h2, h3, h4, h5, h6 { margin: 0px 0px 15px 0px; } h1 { font-size: 3.8888888889rem; line-height: 130%; } h2 { font-size: 3.3333333333rem; line-height: 130%; } .has-style-h2-as-h1 h2 { font-size: 3.8888888889rem; line-height: 130%; } h3 { font-size: 2.7777777778rem; line-height: 130%; } h4 { font-size: 2.2222222222rem; line-height: 130%; } h5 { font-size: 1.6666666667rem; line-height: 130%; } h6 { font-size: 1.3888888889rem; line-height: 130%; } /* TinyMCE Heroslider Headline - Style is added in pxlr-heroslider.scss This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } /* XL Sematic Headings */ @media (min-width: 1440px) { h1, h2, h3, h4, h5, h6 { margin: 0px 0px 15px 0px; } h1 { font-size: 3.8888888889rem; line-height: 130%; } h2 { font-size: 3.3333333333rem; line-height: 130%; } .has-style-h2-as-h1 h2 { font-size: 3.8888888889rem; line-height: 130%; } h3 { font-size: 2.7777777778rem; line-height: 130%; } h4 { font-size: 2.2222222222rem; line-height: 130%; } h5 { font-size: 1.6666666667rem; line-height: 130%; } h6 { font-size: 1.3888888889rem; line-height: 130%; } /* TinyMCE Heroslider Headline - Style is added in pxlr-heroslider.scss This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } /* 2XL Sematic Headings */ @media (min-width: 1920px) { h1, h2, h3, h4, h5, h6 { margin: 0px 0px 15px 0px; } h1 { font-size: 3.8888888889rem; line-height: 130%; } h2 { font-size: 3.3333333333rem; line-height: 130%; } .has-style-h2-as-h1 h2 { font-size: 3.8888888889rem; line-height: 130%; } h3 { font-size: 2.7777777778rem; line-height: 130%; } h4 { font-size: 2.2222222222rem; line-height: 130%; } h5 { font-size: 1.6666666667rem; line-height: 130%; } h6 { font-size: 1.3888888889rem; line-height: 130%; } /* TinyMCE Heroslider Headline - Style is added in pxlr-heroslider.scss This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } /* 3XL Sematic Headings */ @media (min-width: 2500px) { h1, h2, h3, h4, h5, h6 { margin: 0px 0px 15px 0px; } h1 { font-size: 3.8888888889rem; line-height: 130%; } h2 { font-size: 3.3333333333rem; line-height: 130%; } .has-style-h2-as-h1 h2 { font-size: 3.8888888889rem; line-height: 130%; } h3 { font-size: 2.7777777778rem; line-height: 130%; } h4 { font-size: 2.2222222222rem; line-height: 130%; } h5 { font-size: 1.6666666667rem; line-height: 130%; } h6 { font-size: 1.3888888889rem; line-height: 130%; } /* TinyMCE Heroslider Headline - Style is added in pxlr-heroslider.scss This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } /* Center Text for phone if needed */ :root { /* primary navigation*/ --primary_site_navigation_mainlevel_phone: 1.14rem; --primary_site_navigation_mainlevel_tablet: 1.12rem; --primary_site_navigation_mainlevel_desktop: 1.11rem; --primary_site_navigation_mainlevel_weight: 700; --primary_site_navigation_mainlevel_color: var(--color_white); --primary_site_navigation_sublevel_phone: 1rem; --primary_site_navigation_sublevel_tablet: 1rem; --primary_site_navigation_sublevel_desktop: 0.88rem; --primary_site_navigation_sublevel_weight: 500; /* secondary navigation*/ --secondary_site_navigation_mainlevel_phone: 0.85rem; --secondary_site_navigation_mainlevel_tablet: 0.75rem; --secondary_site_navigation_mainlevel_desktop: 0.66rem; --secondary_site_navigation_mainlevel_weight: 400; /* paragraph and content typography - regular (L) is set as basefont */ --paragraph-small-phone-size: 0.88rem; --paragraph-small-phone-lineheight: 1.11rem; --paragraph-small-tablet-size: 0.88rem; --paragraph-small-tablet-lineheight: 1.11rem; --paragraph-small-desktop-size: 0.88rem; --paragraph-small-desktop-lineheight: 1.11rem; --paragraph-xsmall-phone-size: 0.77rem; --paragraph-xsmall-phone-lineheight: 1.05rem; --paragraph-xsmall-tablet-size: 0.77rem; --paragraph-xsmall-tablet-lineheight: 1.05rem; --paragraph-xsmall-desktop-size: 0.77rem; --paragraph-xsmall-desktop-lineheight: 1.05rem; --paragraph-xxsmall-phone-size: 0.61rem; --paragraph-xxsmall-phone-lineheight: 0.83rem; --paragraph-xxsmall-tablet-size: 0.61rem; --paragraph-xxsmall-tablet-lineheight: 0.83rem; --paragraph-xxsmall-desktop-size: 0.61rem; --paragraph-xxsmall-desktop-lineheight: 0.83rem; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: spacer.scss Desc: spacing system TODO: Use a copy of typo px-to-rem function to use it for spacers */ :root { --spacer-3xs: .25rem; --spacer-2xs: .5rem; --spacer-xs: .75rem; --spacer-s: 1rem; --spacer-sm: 1.5rem; --spacer-m: 2rem; --spacer-l: 2.25rem; --spacer-xl: 2.625rem; --spacer-2xl: 3rem; --spacer-3xl: 3.375rem; } @media (min-width: 768px) and (max-width: 1024px) { :root { --spacer-m: 2.25rem; --spacer-l: 2.625rem; --spacer-xl: 3.375rem; --spacer-2xl: 4rem; --spacer-3xl: 4.75rem; } } @media (min-width: 1024px) and (max-width: 1290px) { :root { --spacer-m: 2.25rem; --spacer-l: 2.625rem; --spacer-xl: 3.375rem; --spacer-2xl: 4rem; --spacer-3xl: 4.75rem; } } @media (min-width: 1440px) and (max-width: 320px) { :root { --spacer-m: 2.25rem; --spacer-l: 3rem; --spacer-xl: 4rem; --spacer-2xl: 4.75rem; --spacer-3xl: 6rem; } } @media (min-width: 320px) { :root { --spacer-m: 2.625rem; --spacer-l: 3.375rem; --spacer-xl: 4.75rem; --spacer-2xl: 6rem; --spacer-3xl: 8rem; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: colors.scss Desc: Alle Farbangaben als CSS Custom Properties. Details: Dies hat den Vorteil das man die Werte später überschreiben kann um zbs. in der Laufzeit Farben anpassen kann. * CSS Custom Properties * How To: https://codyhouse.co/blog/post/css-custom-properties-vs-sass-variables * Hex -> HLS:; https://convertingcolors.com .usage { color: var(--color_primary); } */ :root { --color_primary: #419fa3; --color_secondary: #7F41A3; --color_tertiary: #BD5531; --color_quantenary: #171716; --color_white: #FDFDFD; --color_black: #1E1F1C; --color_anthracite: #383838; --color_body-background: #1E1F1C; --color_body-text: #FDFDFD; --color_neutral-100: #505050; --color_neutral-90: #616161; --color_neutral-80: #737373; --color_neutral-70: #848484; --color_neutral-60: #969696; --color_neutral-50: #A7A7A7; --color_neutral-40: #B9B9B9; --color_neutral-30: #CACACA; --color_neutral-20: #DCDCDC; --color_neutral-15: #E5E5E5; --color_neutral-10: #EDEDED; --color_neutral-5: #F6F6F6; --color_neutral-rgba-100: rgba(80, 80, 80, 1); --color_neutral-rgba-90: rgba(80, 80, 80, 0.90); --color_neutral-rgba-80: rgba(80, 80, 80, 0.80); --color_neutral-rgba-70: rgba(80, 80, 80, 0.70); --color_neutral-rgba-60: rgba(80, 80, 80, 0.60); --color_neutral-rgba-50: rgba(80, 80, 80, 0.50); --color_neutral-rgba-40: rgba(80, 80, 80, 0.40); --color_neutral-rgba-30: rgba(80, 80, 80, 0.30); --color_neutral-rgba-20: rgba(80, 80, 80, 0.20); --color_neutral-rgba-15: rgba(80, 80, 80, 0.15); --color_neutral-rgba-10: rgba(80, 80, 80, 0.10); --color_neutral-rgba-7: rgba(80, 80, 80, 0.07); --color_neutral-rgba-5: rgba(80, 80, 80, 0.05); --color_black-rgba-100: rgba(26, 25, 24, 1); --color_black-rgba-98: rgba(26, 25, 24, 0.98); --color_black-rgba-90: rgba(26, 25, 24, 0.90); --color_black-rgba-80: rgba(26, 25, 24, 0.80); --color_black-rgba-70: rgba(26, 25, 24, 0.70); --color_black-rgba-60: rgba(26, 25, 24, 0.60); --color_black-rgba-50: rgba(26, 25, 24, 0.50); --color_black-rgba-40: rgba(26, 25, 24, 0.40); --color_black-rgba-30: rgba(26, 25, 24, 0.30); --color_black-rgba-20: rgba(26, 25, 24, 0.20); --color_black-rgba-15: rgba(26, 25, 24, 0.15); --color_black-rgba-10: rgba(26, 25, 24, 0.10); --color_black-rgba-7: rgba(26, 25, 24, 0.07); --color_black-rgba-5: rgba(26, 25, 24, 0.05); --color_white-rgba-100: rgba(255, 255, 255, 1); --color_white-rgba-90: rgba(255, 255, 255, 0.90); --color_white-rgba-80: rgba(255, 255, 255, 0.80); --color_white-rgba-70: rgba(255, 255, 255, 0.70); --color_white-rgba-60: rgba(255, 255, 255, 0.60); --color_white-rgba-50: rgba(255, 255, 255, 0.50); --color_white-rgba-40: rgba(255, 255, 255, 0.40); --color_white-rgba-30: rgba(255, 255, 255, 0.30); --color_white-rgba-20: rgba(255, 255, 255, 0.20); --color_white-rgba-15: rgba(255, 255, 255, 0.15); --color_white-rgba-10: rgba(255, 255, 255, 0.10); --color_white-rgba-7: rgba(255, 255, 255, 0.07); --color_white-rgba-5: rgba(255, 255, 255, 0.05); --color_primary-rgba-100: rgba(200, 16, 46, 1); --color_primary-rgba-90: rgba(200, 16, 46, 0.90); --color_primary-rgba-80: rgba(200, 16, 46, 0.80); --color_primary-rgba-70: rgba(200, 16, 46, 0.70); --color_primary-rgba-60: rgba(200, 16, 46, 0.60); --color_primary-rgba-50: rgba(200, 16, 46, 0.50); --color_primary-rgba-40: rgba(200, 16, 46, 0.40); --color_primary-rgba-30: rgba(200, 16, 46, 0.30); --color_primary-rgba-20: rgba(200, 16, 46, 0.20); --color_primary-rgba-15: rgba(200, 16, 46, 0.15); --color_primary-rgba-10: rgba(200, 16, 46, 0.10); --color_primary-rgba-7: rgba(200, 16, 46, 0.07); --color_primary-rgba-5: rgba(200, 16, 46, 0.05); --color_shadow-xlight: 0px 0px 20px 0px rgba(26, 25, 24, 0.1); --color_shadow-light: 0px 0px 20px 0px rgba(26, 25, 24, 0.3); --color_shadow-medium: 0px 0px 20px 0px rgba(26, 25, 24, 0.5); --color_shadow-heavy: 0px 0px 20px 0px rgba(26, 25, 24, 0.7); --color_shadow-primary-xlight: 0px 0px 30px 0px rgba(65, 159, 163, 0.2); --color_shadow-primary-light: 0px 0px 30px 0px rgba(65, 159, 163, 0.3); --color_shadow-primary-medium: 0px 0px 40px 0px rgba(65, 159, 163, 0.5); --color_shadow-primary-heavy: 0px 0px 50px 0px rgba(65, 159, 163, 0.7); --color_shadow-secondary-xlight: 0px 0px 30px 0px rgb(127, 65, 163, 0.2); --color_shadow-secondary-light: 0px 0px 30px 0px rgba(127, 65, 163, 0.3); --color_shadow-secondary-medium: 0px 0px 40px 0px rgba(127, 65, 163, 0.5); --color_shadow-secondary-heavy: 0px 0px 50px 0px rgba(127, 65, 163, 0.7); --color_shadow-tertiary-xlight: 0px 0px 30px 0px rgb(189, 85, 49, 0.2); --color_shadow-tertiary-light: 0px 0px 30px 0px rgba(189, 85, 49, 0.3); --color_shadow-tertiary-medium: 0px 0px 40px 0px rgba(189, 85, 49, 0.5); --color_shadow-tertiary-heavy: 0px 0px 50px 0px rgba(189, 85, 49, 0.7); --color_notice_success: #00B43C; --color_notice_warning: #ff8c00; --color_notice_error: #C81414; --color_notice_info: #0087E6; } /*EXAMPLE FOR COLOR THEME :root, [data-theme="default"] { --color_primary: blue; --color-bg: white; --color-contrast-lower: hsl(0, 0%, 95%); --color-contrast-low: hsl(240, 1%, 83%); --color-contrast-medium: hsl(240, 1%, 48%); --color-contrast-high: hsl(240, 4%, 20%); --color-contrast-higher: black; } [data-theme] { background-color: var(--color-bg); color: var(--color-contrast-high); } [data-theme="dark"] { --color_primary: red; --color-bg: black; --color-contrast-lower: hsl(240, 6%, 15%); --color-contrast-low: hsl(252, 4%, 25%); --color-contrast-medium: hsl(240, 1%, 57%); --color-contrast-high: hsl(0, 0%, 89%); --color-contrast-higher: white; } */ /* Here's how to apply the color variables to a component: .component { color: var(--color-contrast-higher); background-color: var(--color-bg); border-bottom: 1px solid var(--color-contrast-low); a { color: var(--color_primary); } } Here's how to use in HTML Markup
*/ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: accessibility.scss Desc: Screenreaders, Barrierefreiheit */ /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .screen-reader-text #content[tabindex="-1"]:focus { outline: 0; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: pages.scss Desc: specific page styles Details: This file contains styles that are specific to certain pages or templates in the theme. */ body.mp-default-page.home #page.site .site-main .page .is-style-pxlr-largewidth, body.page-template-default.home #page.site .site-main .page .is-style-pxlr-largewidth, body.woocommerce-page.home #page.site .site-main .page .is-style-pxlr-largewidth { max-width: 100vw; } body.mp-default-page.home #page.site .site-main .page .is-style-pxlr-largewidth .wp-block-group__inner-container .entry-header, body.page-template-default.home #page.site .site-main .page .is-style-pxlr-largewidth .wp-block-group__inner-container .entry-header, body.woocommerce-page.home #page.site .site-main .page .is-style-pxlr-largewidth .wp-block-group__inner-container .entry-header { display: none; } body.mp-default-page .entry-title, body.page-template-default .entry-title, body.woocommerce-page .entry-title { color: var(--color_white); } body.mp-default-page::before, body.page-template-default::before, body.woocommerce-page::before { content: ""; position: absolute; width: 100vw; height: 100vh; display: block; top: 0; background-image: url(../img/mp-bg-hero-full-lights.jpg); background-repeat: no-repeat; background-position: top right; background-size: cover; animation-name: mp_page_background_motion; animation-duration: 50s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @media (min-width: 1024px) { body.mp-default-page::before, body.page-template-default::before, body.woocommerce-page::before { background-position: top right; } } @media (min-width: 1290px) { body.mp-default-page::before, body.page-template-default::before, body.woocommerce-page::before { background-position: top center; } } /* elements */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: body.scss Desc: body and page/site */ body { /* * For pages with no hero * We add an additional class to the body, see header.php * to adjust the padding-top for the page content. * This is needed because the hero section is not present on these pages. * The padding-top is adjusted for different devices to ensure proper spacing. */ } body.pxlr-page-no-hero { padding-top: 90px; } @media (min-width: 768px) { body.pxlr-page-no-hero { padding-top: 120px; } } @media (min-width: 1024px) { body.pxlr-page-no-hero { padding-top: 180px; } } @media (min-width: 1290px) { body.pxlr-page-no-hero { padding-top: 250px; } } body #page.site { position: relative; overflow: hidden; /* Full page background image/signet */ } body #page .site-main { padding-top: calc(20px * 2); } @media (min-width: 768px) { body #page .site-main { padding-top: calc(25px * 2); } } @media (min-width: 1024px) { body #page .site-main { padding-top: calc(30px * 2); } } body #page .site-main { position: relative; margin-bottom: var(--spacer-m); } @media (min-width: 768px) { body #page .site-main { margin-bottom: var(--spacer-m); } } @media (min-width: 1024px) { body #page .site-main { margin-bottom: var(--spacer-m); } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: body.scss Desc: body and page/site */ .entry-content { padding: 0; margin: 0; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: icons.scss Desc: svg icons */ /* social media */ .pxlr-icon-facebook { background-image: url(../img/icon-social-facebook-black.svg); background-size: 20px 20px; background-repeat: no-repeat; } .pxlr-icon-facebook.pxlr-icon-color-white { background-image: url(../img/icon-social-facebook-white.svg); } .pxlr-icon-instagram { background-image: url(../img/icon-social-instagram-black.svg); background-size: 20px 20px; background-repeat: no-repeat; } .pxlr-icon-instagram.pxlr-icon-color-white { background-image: url(../img/icon-social-instagram-white.svg); } .pxlr-icon-linkedin { background-image: url(../img/icon-social-linkedin-black.svg); background-size: 20px 20px; background-repeat: no-repeat; } .pxlr-icon-linkedin.pxlr-icon-color-white { background-image: url(../img/icon-social-linkedin-white.svg); } .pxlr-icon-twitter { background-image: url(../img/icon-social-twitter-black.svg); background-size: 20px 20px; background-repeat: no-repeat; } .pxlr-icon-twitter.pxlr-icon-color-white { background-image: url(../img/icon-social-twitter-white.svg); } .pxlr-icon-xing { background-image: url(../img/icon-social-xing-black.svg); background-size: 20px 20px; background-repeat: no-repeat; } .pxlr-icon-xing.pxlr-icon-color-white { background-image: url(../img/icon-social-xing-white.svg); } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: ribbons.scss Desc: ribbons top/bottom left/right inkl color */ .pxlr-ribbon { position: absolute; z-index: 1; padding: 10px 40px 10px 40px; line-height: initial; text-transform: uppercase; font-weight: 800; text-align: center; width: 250px; display: block; font-size: var(--paragraph-xxsmall-phone-size); } @media (min-width: 768px) { .pxlr-ribbon { font-size: var(--paragraph-xxsmall-tablet-size); } } @media (min-width: 1024px) { .pxlr-ribbon { font-size: var(--paragraph-xxsmall-desktop-size); } } .pxlr-ribbon.pxlr-ribbon-top { top: 20px; } @media (min-width: 768px) { .pxlr-ribbon.pxlr-ribbon-top { top: 25px; } } .pxlr-ribbon.pxlr-ribbon-bottom { bottom: 20px; } @media (min-width: 768px) { .pxlr-ribbon.pxlr-ribbon-bottom { bottom: 25px; } } .pxlr-ribbon.pxlr-ribbon-left { left: -90px; } @media (min-width: 768px) { .pxlr-ribbon.pxlr-ribbon-left { left: -80px; } } .pxlr-ribbon.pxlr-ribbon-right { right: -90px; } @media (min-width: 768px) { .pxlr-ribbon.pxlr-ribbon-right { right: -80px; } } .pxlr-ribbon.pxlr-ribbon-top.pxlr-ribbon-left { transform: rotate(-45deg); } .pxlr-ribbon.pxlr-ribbon-top.pxlr-ribbon-right { transform: rotate(45deg); } .pxlr-ribbon.pxlr-ribbon-bottom.pxlr-ribbon-right { transform: rotate(-45deg); } .pxlr-ribbon.pxlr-ribbon-bottom.pxlr-ribbon-left { transform: rotate(45deg); } .pxlr-ribbon.pxlr-ribbon-primary { background-color: var(--color_primary); color: var(--color_white); box-shadow: var(--color_shadow-xlight); } .pxlr-ribbon.pxlr-ribbon-black { background-color: var(--color_black); color: var(--color_white); box-shadow: var(--color_shadow-xlight); } .pxlr-ribbon.pxlr-ribbon-white { background-color: var(--color_white); color: var(--color_primary); box-shadow: var(--color_shadow-xlight); } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: forms.scss Desc: forms in general and wpforms plugin styling */ /* ******************************************************************************** My Default forms *************************************************************** ******************************************************************************** */ form { /** * Reset standard select styles */ /** * Input, Textarea, Select */ /** * Checkbox, Radio Button **/ /** * Textarea */ /** * Fileuload */ /** * Submit */ } form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; font-size: 1em; width: 100%; background: var(--color_white); } form select:focus::-ms-value { background-color: transparent; } form select::-ms-expand { display: none; } form input[type=text], form input, form textarea, form select { border: 1px solid; border-radius: 30px; border-color: var(--color_neutral-40); background-color: var(--color_white); padding: 1rem 1.25rem; font-size: 1rem; line-height: normal; width: 100%; } form input[type=text]:focus, form input:focus, form textarea:focus, form select:focus { outline: none; box-shadow: var(--color_shadow-light); } form input[type=text]::--webkit-placeholder, form input[type=text]::--moz-placeholder, form input[type=text]::--ms-placeholder, form input[type=text]::placeholder, form input::--webkit-placeholder, form input::--moz-placeholder, form input::--ms-placeholder, form input::placeholder, form textarea::--webkit-placeholder, form textarea::--moz-placeholder, form textarea::--ms-placeholder, form textarea::placeholder, form select::--webkit-placeholder, form select::--moz-placeholder, form select::--ms-placeholder, form select::placeholder { opacity: 1; color: var(--color_neutral-40); } form input[type=checkbox], form input[type=radio] { display: none; } form input[type=checkbox].gfield-choice-input { display: none !important; } form input[type=radio].gfield-choice-input { display: none !important; } form input[type=checkbox] + label, form input[type=radio] + label { display: inline-block; font-size: 1rem; line-height: normal; align-items: center; position: relative; padding-left: 30px; cursor: pointer; } form input[type=checkbox] + label:before { content: ""; display: block; position: absolute; left: 0; top: calc(50% - 13px); width: 45px; height: 25px; border: 1px solid var(--color_neutral-40); background-size: contain; background-repeat: no-repeat; background-color: var(--color_white); cursor: pointer; border-radius: 50px; } form input[type=checkbox]:checked + label:before { border: 1px solid var(--color_neutral-40); } form input[type=checkbox] + label:after { content: ""; display: block; position: absolute; width: 15px; height: 15px; border-radius: 50px; left: 6px; top: calc(50% - 8px); background-color: var(--color_primary); -webkit-transition: width 0.2s ease-in-out; -moz-transition: width 0.2s ease-in-out; -o-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; } form input[type=checkbox]:checked + label:after { content: ""; display: block; position: absolute; left: 6px; top: calc(50% - 8px); width: 33px; height: 15px; border: 1px solid var(--color_primary); background-color: var(--color_primary); cursor: pointer; border-radius: 50px; } form input[type=radio] + label:before { content: ""; display: block; position: absolute; left: 0; top: calc(50% - 13px); width: 22px; height: 22px; border: 1px solid var(--color_neutral-40); border-radius: 50%; } form input[type=radio]:checked + label:before { border: 1px solid var(--color_neutral-40); } form input[type=radio]:checked + label:after { content: ""; display: block; position: absolute; left: 4px; top: calc(50% - 9px); width: 14px; height: 14px; border-radius: 50%; border: none; background-color: var(--color_primary); } form textarea { border-radius: 20px; } form input[type=file] { display: none; } form input[type=file] + label { display: block; position: relative; color: var(--color_neutral-40); border: 1px solid; border-color: var(--color_neutral-40); background-color: var(--color_white); padding: 0.5rem 0.75rem; max-width: calc(50% - 8px); cursor: pointer; } form input[type=file] + label:focus { outline: none; } form input[type=file] + label:after { content: "Load"; color: var(--color_white); background: var(--color_primary); padding: 0.5rem 0.75rem; position: absolute; right: 0; top: 0; height: 100%; border-left: 1px solid transparent; } form input[type=file] + label:hover:after { color: var(--color_primary); background: var(--color_white); border-color: var(--color_primary); } form input[type=file] + label span { color: var(--color_neutral-40); } form input[type=submit], form input[type=button] { border: 1px solid transparent; margin-top: 0.5rem; text-decoration: none; border-radius: 30px; cursor: pointer; background: var(--color_primary); color: var(--color_white); font-weight: 600; text-transform: uppercase; padding: 10px 15px 10px 15px; line-height: 1.5; min-height: 25px; } @media (min-width: 768px) { form input[type=submit], form input[type=button] { padding: 10px 15px 10px 15px; line-height: 1.5; min-height: 25px; } } @media (min-width: 1024px) { form input[type=submit], form input[type=button] { padding: 15px 25px 15px 25px; line-height: 1.5; min-height: 32px; } } form input[type=submit]:hover, form input[type=button]:hover { background: var(--color_white); color: var(--color_primary); box-shadow: var(--color_shadow-light); } /* ******************************************************************************** Gravity Forms ****************************************************************** ******************************************************************************** */ /** Form Body */ .gform_body .gform_fields .gfield { /** * Pot */ /** * Labels */ /** * Inputs */ /** * Real toggle style * This doesn't fit to the incoming gravity forms */ } .gform_body .gform_fields .gfield.gform_validation_container { display: none; } .gform_body .gform_fields .gfield.hidden_label .gfield_label { display: none; } .gform_body .gform_fields .gfield .ginput_complex .ginput_full input, .gform_body .gform_fields .gfield .ginput_complex .ginput_left input, .gform_body .gform_fields .gfield .ginput_complex .ginput_right input { margin-bottom: 15px; } .gform_body .gform_fields .gfield .ginput_complex .ginput_full label, .gform_body .gform_fields .gfield .ginput_complex .ginput_left label, .gform_body .gform_fields .gfield .ginput_complex .ginput_right label { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .gform_body .gform_fields .gfield .ginput_container { margin-bottom: 8px; } @media (min-width: 768px) { .gform_body .gform_fields .gfield .ginput_container { margin-bottom: 8px; } } @media (min-width: 1024px) { .gform_body .gform_fields .gfield .ginput_container { margin-bottom: 15px; } } .gform_body .gform_fields .gfield .ginput_container input[type=text], .gform_body .gform_fields .gfield .ginput_container select { padding: 10px 15px 10px 15px; line-height: 2; min-height: 25px; } @media (min-width: 768px) { .gform_body .gform_fields .gfield .ginput_container input[type=text], .gform_body .gform_fields .gfield .ginput_container select { padding: 10px 15px 10px 15px; line-height: 2; min-height: 25px; } } @media (min-width: 1024px) { .gform_body .gform_fields .gfield .ginput_container input[type=text], .gform_body .gform_fields .gfield .ginput_container select { padding: 15px 25px 15px 25px; line-height: 2; min-height: 32px; } } .gform_body .gform_fields .gfield .ginput_container.ginput_container_select { position: relative; } .gform_body .gform_fields .gfield .ginput_container.ginput_container_select:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_black); right: 25px; top: 50%; transform: translateY(-50%); display: block; pointer-events: none; } .gform_body .gform_fields .gfield .gfield_select { color: var(--color_neutral-80); } .gform_body .gform_fields .gfield .gfield_consent_label { font-size: 0.8rem; font-style: italic; padding-left: 55px; } .gform_body .gform_fields .gfield .ginput_container_consent .gfield_required.gfield_required_asterisk { position: absolute; } .gform_body .gform_fields .gfield .gfield_checkbox .gchoice { margin-bottom: 10px; } .gform_body .gform_fields .gfield .gfield_checkbox .gchoice label { padding-left: 55px; } /* Ajax Spinner */ .gform_footer #gform_ajax_spinner_1.gform_ajax_spinner { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background-color: var(--color_black); border-radius: 50px; padding: 5px; width: 50px; height: 50px; } /** * Validation Errors */ .gform_wrapper .gform_validation_errors { border-radius: 3px !important; margin-bottom: var(--spacer-sm) !important; border-radius: 100px !important; background: var(--color_notice_error) !important; } .gform_wrapper .gform_validation_errors > h2 { text-transform: none !important; color: var(--color_white) !important; } .gform_wrapper .validation_message { border: 0 !important; background-color: var(--color_notice_error) !important; color: var(--color_white) !important; display: inline-block !important; width: auto !important; position: relative !important; border-radius: 50px !important; margin-top: 20px !important; font-size: 0.6rem !important; font-weight: 400 !important; padding: 10px !important; line-height: 0.5rem !important; top: -20px !important; margin-bottom: 0px !important; left: 10px !important; box-shadow: var(--color_shadow-light) !important; animation: validation_msg_updown 1s infinite alternate; } .gform_wrapper .validation_message:before { content: ""; display: block; width: 0; height: 0; position: absolute; transform: rotate(90deg); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid var(--color_notice_error); left: 18px; top: -14px; } @keyframes validation_msg_updown { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } .gform_wrapper .gfield_error [aria-invalid=true] { border: 1px dashed var(--color_notice_error) !important; } .gform_wrapper .gfield_error label { color: initial !important; } .gform_wrapper .gfield_error legend { color: initial !important; } /** * Confirmation */ .gform_confirmation_wrapper { max-width: 1380px; margin: 0 auto; border-radius: 3px; border: 1px solid var(--color_neutral-20); } .gform_confirmation_wrapper .gform_confirmation_message { margin: 0 auto; max-width: 70%; padding-top: var(--spacer-xl); padding-bottom: var(--spacer-xl); text-align: center !important; } .gform_confirmation_wrapper .gform_confirmation_message h1, .gform_confirmation_wrapper .gform_confirmation_message h2, .gform_confirmation_wrapper .gform_confirmation_message h3, .gform_confirmation_wrapper .gform_confirmation_message h4, .gform_confirmation_wrapper .gform_confirmation_message h5, .gform_confirmation_wrapper .gform_confirmation_message h6 { margin-top: 0; } /* Additional classes set in form it self. eg. for contact page we want a background and outline */ .gform_wrapper { padding-top: 20px; padding-bottom: 20px; /* &.pxlr-gform-background-outline_wrapper{ .pxlr-gform-background-outline{ background: var(--color_white); padding: $grid-gap-phone; @include device_s{ padding: $grid-gap-tablet; } @include device_m{ padding: $grid-gap-desktop; } border: 1px solid var(--color_neutral-10); border-radius: $global-radius-medium; } } &.pxlr-gform-background-outline-desktop-only_wrapper{ .pxlr-gform-background-outline-desktop-only{ @include device_m{ padding: $grid-gap-desktop; background: var(--color_white); padding: $grid-gap-phone; border-radius: $global-radius-medium; border: 1px solid var(--color_neutral-10); } } } &.pxlr-gform-background_wrapper{ .pxlr-gform-background{ background: var(--color_white); padding: $grid-gap-phone; @include device_s{ padding: $grid-gap-tablet; } @include device_m{ padding: $grid-gap-desktop; } border-radius: $global-radius-medium; } } &.pxlr-gform-background-desktop-only_wrapper{ .pxlr-gform-background-desktop-only{ @include device_m{ padding: $grid-gap-desktop; background: var(--color_white); padding: $grid-gap-phone; border-radius: $global-radius-medium; } } } */ } @media (min-width: 768px) { .gform_wrapper { padding-top: 25px; padding-bottom: 25px; } } @media (min-width: 1024px) { .gform_wrapper { padding-top: 30px; padding-bottom: 30px; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: site-header.scss Desc: site header regular and sticky */ /* Regular header */ .pxlr-site-header { position: relative; z-index: 2; /* Header sticky */ /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ /* Header for pages with no hero */ } .pxlr-site-header .pxlr-site-header-wrapper { padding: 20px; display: block; } @media (min-width: 768px) { .pxlr-site-header .pxlr-site-header-wrapper { padding: 25px; } } @media (min-width: 1024px) { .pxlr-site-header .pxlr-site-header-wrapper { padding: 30px; background-color: transparent; display: block; align-items: center; justify-content: space-between; } } .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding { display: inline-flex; justify-content: flex-start; align-items: center; /* Make sure logo link wraps around logo image. */ /* Header logo image custom(defaults) */ /*Animate*/ /* Header logo alternative */ /* Header logo sticky */ } .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom-link { display: inline-block; } .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom, .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative, .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-animate { display: block; width: var(--site_header_logo_width_phone); } @media (min-width: 768px) { .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom, .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative, .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-animate { width: var(--site_header_logo_width_tablet); } } @media (min-width: 1024px) { .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom, .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative, .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-animate { width: var(--site_header_logo_width_desktop); } } @media (min-width: 1290px) { .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom, .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative, .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-animate { width: var(--site_header_logo_width_desktop_large); } } .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-header-logo-animate { position: absolute; z-index: 2; opacity: 0; animation: fade-in-fade-out 10s infinite; } .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative { display: none; } .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { display: none; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper { opacity: 1; animation-name: fade-in; animation-timing-function: ease-in; animation-duration: 0.3s; min-width: var(--site_header_sticky_height); position: fixed; z-index: 3; top: 0; width: 100%; background-image: linear-gradient(rgba(9, 9, 9, 0.5), rgba(9, 9, 9, 0)); } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding { /* Header logo custom(default) */ /* Header logo alternative */ /* Header logo sticky */ } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom { display: none; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative { display: none; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { display: block; width: var(--site_header_sticky_logo_width_phone); } @media (min-width: 768px) { .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { width: var(--site_header_sticky_logo_width_tablet); } } @media (min-width: 1024px) { .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { width: var(--site_header_sticky_logo_width_desktop); } } @media (min-width: 1024px) { .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li { padding-top: 15px; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li a { color: var(--color_white); } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li a:hover { color: var(--color_primary); } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li ul li { padding-top: 0; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li ul li ul li { padding-top: 0; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-secondary-navigation { display: flex; background-color: var(--color_neutral-rgba-20); width: 100%; right: 0; top: 0; justify-content: end; padding-right: 50px; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item a { color: var(--color_white); } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item a:hover { color: var(--color_primary); } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item:after { color: var(--color_white); } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item.pxlr-active a { color: var(--color_primary); } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item.pxlr-active a:hover { color: var(--color_white); } } @media (min-width: 1024px) { .pxlr-site-header.pxlr-js-site-header-sticky.pxlr-js-site-secondary-navigation-hide .pxlr-site-header-wrapper .pxlr-site-secondary-navigation { animation-name: fade-out-and-hide; animation-fill-mode: both; animation-duration: 0.3s; } } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-header-wrapper + .site-main { padding-top: 102px; } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper { opacity: 1; animation-name: fade-in; animation-timing-function: ease-in; animation-duration: 0.3s; min-width: var(--site_header_sticky_height); position: fixed; z-index: 100; top: 0; width: 100%; } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-header-branding { /* Header logo custom(default) */ /* Header logo alternative */ /* Header logo sticky */ } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom { display: none; } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative { display: none; } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { display: block; width: var(--site_header_sticky_logo_width_phone); } @media (min-width: 768px) { .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { width: var(--site_header_sticky_logo_width_tablet); } } @media (min-width: 1024px) { .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { width: var(--site_header_sticky_logo_width_desktop); } } @media (min-width: 1024px) { .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li { padding-top: 15px; } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li a { color: var(--color_white); } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li a:hover { color: var(--color_primary); } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li ul li { padding-top: 0; } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-primary-navigation ul li ul li ul li { padding-top: 0; } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-secondary-navigation { display: flex; background-color: var(--color_neutral-rgba-20); width: 100%; right: 0; top: 0; justify-content: end; padding-right: 50px; } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item a { color: var(--color_white); } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item a:hover { color: var(--color_primary); } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item:after { color: var(--color_white); } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item.pxlr-active a { color: var(--color_primary); } .pxlr-site-header.pxlr-site-header-no-hero .pxlr-site-header-wrapper .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container .menu .menu-item.pxlr-active a:hover { color: var(--color_white); } } /* Change header logo/textcolor if set by hersoslider acf option as body class*/ body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding { /* Header logo custom(default) */ /* Header logo alternative */ } body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom { display: none; } body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative { display: block; } body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding { /* Header logo custom(default) */ /* Header logo alternative */ /* Header logo sticky */ } body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom { display: none; } body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative { display: none; } body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { display: block; width: var(--site_header_sticky_logo_width_phone); } @media (min-width: 768px) { body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { width: var(--site_header_sticky_logo_width_tablet); } } @media (min-width: 1024px) { body.pxlr-site-header-is-alternative .pxlr-site-header .pxlr-site-header-wrapper.pxlr-js-site-header-sticky .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-sticky { width: var(--site_header_sticky_logo_width_desktop); } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: site-navigation.scss Desc: site main navigation */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .pxlr-site-header { position: absolute; z-index: 99; animation: fadeIn 2s; } .pxlr-site-header .pxlr-site-header-wrapper { width: 100vw; } .pxlr-site-header.toggled .pxlr-site-header-wrapper { overflow-y: scroll; overflow-x: hidden; height: 100vh; -ms-overflow-style: none; scrollbar-width: none; } .pxlr-site-header.toggled .pxlr-site-header-wrapper::-webkit-scrollbar { display: none; } .pxlr-site-header.pxlr-js-site-header-sticky { animation: fadeIn 2s; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation-toggle { -webkit-transform: rotate(0deg) translateY(10%); -moz-transform: rotate(0deg) translateY(10%); -o-transform: rotate(0deg) translateY(10%); transform: rotate(0deg) translateY(10%); } @media (min-width: 768px) { .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation-toggle { -webkit-transform: rotate(0deg) translateY(25%); -moz-transform: rotate(0deg) translateY(25%); -o-transform: rotate(0deg) translateY(25%); transform: rotate(0deg) translateY(25%); } } .pxlr-site-header .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul { display: none; } .pxlr-site-header .pxlr-site-primary-navigation-toggle { width: 60px; height: 45px; position: relative; float: right; zoom: 0.75; top: -5px; -webkit-transform: rotate(0deg) translateY(25%); -moz-transform: rotate(0deg) translateY(25%); -o-transform: rotate(0deg) translateY(25%); transform: rotate(0deg) translateY(25%); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; } @media (min-width: 768px) { .pxlr-site-header .pxlr-site-primary-navigation-toggle { top: -10px; zoom: 0.75; } } @media (min-width: 1024px) { .pxlr-site-header .pxlr-site-primary-navigation-toggle { top: -20px; zoom: 1; } } @media (min-width: 768px) { .pxlr-site-header .pxlr-site-primary-navigation-toggle { -webkit-transform: rotate(0deg) translateY(50%); -moz-transform: rotate(0deg) translateY(50%); -o-transform: rotate(0deg) translateY(50%); transform: rotate(0deg) translateY(50%); } } .pxlr-site-header .pxlr-site-primary-navigation-toggle span { display: block; position: absolute; height: 5px; width: 50%; background: var(--color_white); opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } .pxlr-site-header .pxlr-site-primary-navigation-toggle span:nth-child(even) { left: 50%; border-radius: 0 5px 5px 0; } .pxlr-site-header .pxlr-site-primary-navigation-toggle span:nth-child(odd) { left: 0px; border-radius: 5px 0 0 5px; } .pxlr-site-header .pxlr-site-primary-navigation-toggle span:nth-child(1), .pxlr-site-header .pxlr-site-primary-navigation-toggle span:nth-child(2) { top: 0px; } .pxlr-site-header .pxlr-site-primary-navigation-toggle span:nth-child(3), .pxlr-site-header .pxlr-site-primary-navigation-toggle span:nth-child(4) { top: 18px; } .pxlr-site-header .pxlr-site-primary-navigation-toggle span:nth-child(5), .pxlr-site-header .pxlr-site-primary-navigation-toggle span:nth-child(6) { top: 36px; } .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation-toggle { zoom: 0.75; top: 0px; } @media (min-width: 768px) { .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation-toggle { top: 0px; zoom: 0.9; } } @media (min-width: 1024px) { .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation-toggle { top: 0; zoom: 1; } } .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(1), .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(6) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(2), .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(5) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(1) { left: 5px; top: 7px; } .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(2) { left: calc(50% - 5px); top: 7px; } .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(3) { left: -50%; opacity: 0; } .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(4) { left: 100%; opacity: 0; } .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(5) { left: 5px; top: 29px; } .pxlr-site-header.toggled .pxlr-site-primary-navigation-toggle span:nth-child(6) { left: calc(50% - 5px); top: 29px; } @media (min-width: 1024px) { .pxlr-site-header .pxlr-site-primary-navigation-toggle { display: block; } } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container { display: block; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul { display: block; text-align: center; padding: 0; margin: var(--spacer-l) 0 0 0; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li { position: relative; letter-spacing: 0.5px; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a { display: block; color: var(--color_white); text-decoration: none; text-transform: uppercase; font-size: var(--primary_site_navigation_mainlevel_phone); font-weight: var(--primary_site_navigation_mainlevel_weight); padding: var(--spacer-l) 0 var(--spacer-l) 0; border-top: 1px solid var(--color_neutral-rgba-40); } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li.menu-item-has-children a:after { right: 15px; top: 33px; position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li:not(.menu-item-has-children) a:after { display: none; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul { margin: 0; display: none; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li a { font-size: var(--secondary_site_navigation_sublevel_phone); opacity: 0.7; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li.menu-item-has-children a:after { right: 15px; top: 33px; position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li:not(.menu-item-has-children) a:after { display: none; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li ul { margin: 0; display: none; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li ul li a { font-weight: 100; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li ul li a:after { display: none; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li.focus > ul { display: block; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li.focus.menu-item-has-children > a { color: var(--color_primary) !important; opacity: 1; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li.focus.menu-item-has-children > a:after { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); } @media (min-width: 768px) { .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a { font-size: var(--primary_site_navigation_mainlevel_tablet); } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li.menu-item-has-children a:after { top: 48px; } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li a { font-size: var(--primary_site_navigation_sublevel_tablet); } .pxlr-site-header.toggled .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li.menu-item-has-children a:after { top: 48px; } } .pxlr-site-header.toggled .pxlr-site-header-wrapper { background-color: var(--color_black); } .pxlr-site-header.toggled .pxlr-site-header-wrapper .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li { list-style-type: none; } .pxlr-site-header.toggled .pxlr-site-header-wrapper .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li.menu-item-has-children a { color: var(--color_secondary); } .pxlr-site-header .pxlr-site-secondary-navigation { position: absolute; right: 30px; top: 30px; } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul { display: none; } @media (min-width: 1024px) { .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul { display: block; margin: 0; padding: 0; list-style: none; } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li { display: inline-block; padding-left: 8px; } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li a { font-size: var(--secondary_site_navigation_mainlevel_desktop); text-transform: uppercase; color: var(--color_white); } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li a:hover { color: var(--color_primary); } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li.pxlr-active a { color: var(--color_primary); } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li.pxlr-active a:hover { color: var(--color_white); } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li:after { content: "|"; position: relative; font-size: var(--secondary_site_navigation_mainlevel_desktop); color: var(--color_white); right: -8px; } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li:first-child { padding-left: 0; } .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li:last-child:after { display: none; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: footer.scss Desc: page meta footer and footer */ footer.pxlr-site-footer { z-index: 1; position: relative; color: var(--color_white); font-size: 0.85rem; /* Signet/Seal in Footer center position extra option for (symbol 0 signet/seal) or (previous element overlap = z-index) */ } @media (min-width: 768px) { footer.pxlr-site-footer { font-size: 0.81rem; } } @media (min-width: 1024px) { footer.pxlr-site-footer { font-size: 0.77rem; } } footer.pxlr-site-footer a { color: var(--color_white); text-decoration: none; } footer.pxlr-site-footer a:hover { color: var(--color-red); } footer.pxlr-site-footer h1, footer.pxlr-site-footer h2, footer.pxlr-site-footer h3, footer.pxlr-site-footer h4, footer.pxlr-site-footer h5, footer.pxlr-site-footer h6 { color: var(--color_white); } footer.pxlr-site-footer.pxlr-site-footer-option-symbol:before { content: ""; position: relative; background-image: url(../img/pxlr-cocoon-seal.svg); background-position: center top; background-repeat: no-repeat; display: block; left: 50%; transform: translateX(-50%); top: -50px; background-size: 100px 100px; width: 100px; height: 100px; } @media (min-width: 1024px) { footer.pxlr-site-footer.pxlr-site-footer-option-symbol:before { top: -70px; background-size: 140px 140px; width: 140px; height: 140px; } } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper { padding: 0 0 var(--spacer-2xl) 0; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content { max-width: 2080px; margin: 0 auto; padding: 0 20px 0 20px; display: grid; grid-template-columns: 1fr; column-gap: var(--spacer-m); } @media (min-width: 768px) { footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content { padding: 0 25px 0 25px; } } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content { padding: 0 30px 0 30px; } } @media (min-width: 768px) { footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content { grid-template-columns: 1fr 1fr 1fr 1fr; } } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item { width: 100%; padding: var(--spacer-s) 0 var(--spacer-s) 0; text-align: center; border-right: 0; border-bottom: 1px solid var(--color_neutral-rgba-20); margin-bottom: 15px; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item:last-child { border-bottom: 0; margin-bottom: 0; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item .pxlr-site-footer-meta-widget-title { color: var(--color_white); } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item .pxlr-site-footer-meta-widget-title { position: relative; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item .pxlr-site-footer-meta-widget-title:after { content: ""; position: absolute; font-family: "icons"; content: ""; font-size: 1.5rem; color: var(--color_white); right: 15px; cursor: pointer; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item ul.menu { display: none; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item.pxlr-collapse-item-toggle ul.menu { display: block; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item.pxlr-collapse-item-toggle .pxlr-site-footer-meta-widget-title:after { content: ""; font-family: "icons"; content: ""; font-size: 1.5rem; color: var(--color_primary); } @media (min-width: 768px) { footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item { text-align: left; border-right: 0; border-bottom: 0; margin-bottom: 0; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item .pxlr-site-footer-meta-widget-title:after { display: none; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item ul.menu { display: block; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item.pxlr-collapse-item-toggle ul.menu { display: block; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item.pxlr-collapse-item-toggle .pxlr-site-footer-meta-widget-title:after { display: none; } } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item { border-right: 1px solid var(--color_neutral-rgba-20); border-bottom: 0; margin-bottom: 0; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item:last-child { border-right: 0; margin-bottom: 0; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item .pxlr-site-footer-meta-widget-title:after { display: none; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item ul.menu { display: block; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item.pxlr-collapse-item-toggle ul.menu { display: block; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item.pxlr-collapse-item.pxlr-collapse-item-toggle .pxlr-site-footer-meta-widget-title:after { display: none; } } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item ul { padding: 0; margin: 0; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item ul li { list-style-type: none; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item ul li a { display: inline-block; margin: auto; font-size: 1rem; line-height: 2.5; } @media (min-width: 768px) { footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item ul li a { font-size: 1rem; padding-left: 10px; } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item ul li a:before { position: relative; left: -10px; top: 3px; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item ul li a:hover { color: var(--color_primary); } footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item ul li a:hover:before { color: var(--color_primary); } } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-meta-wrapper .pxlr-site-footer-meta-content .pxlr-site-footer-meta-item ul li a { font-size: 0.88rem; } } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper { text-transform: uppercase; color: var(--color_neutral-90); font-size: 0.5714285714rem; padding: var(--spacer-l) 0 var(--spacer-l) 0; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper a { color: var(--color_neutral-90); } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper a:hover { color: var(--color_primary); } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content { border-top: 1px dashed var(--color_neutral-rgba-30); max-width: 100vw; padding-top: 30px; margin-left: 20px; margin-right: 20px; padding: 20px 20px 0 20px; display: flex; flex-flow: row wrap; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content > div { width: 100%; } @media (min-width: 768px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content { margin-left: 25px; margin-right: 25px; padding: 25px 25px 0 25px; } } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content { margin-left: 30px; margin-right: 30px; padding: 30px 0 0 0; flex-flow: row; } } @media (min-width: 1290px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content { margin-left: 60px; margin-right: 60px; padding: 30px 0 0 0; } } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left { order: 1; display: block; text-align: center; margin: auto; padding-bottom: var(--spacer-2xs); } @media (min-width: 768px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left { padding-bottom: var(--spacer-2xs); } } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left { display: flex; order: unset; text-align: left; padding-bottom: 0; margin: 0; } } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left .pxlr-site-footer-corporate-logo { display: inline-block; margin: 0; padding: 0 0 var(--spacer-xs) 0; } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left .pxlr-site-footer-corporate-logo { padding: 0 var(--spacer-xs) 0 0; } } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left .pxlr-site-footer-date { width: auto; margin: auto 0; padding-bottom: 10px; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left .menu-footer-bar-navigation-container ul { display: inline-block; margin: 0; padding: 0; white-space: nowrap; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left .menu-footer-bar-navigation-container ul.menu li.menu-item { display: inline; list-style-type: none; padding-right: 5px; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left .menu-footer-bar-navigation-container ul.menu li.menu-item::after { content: "-"; padding-left: 10px; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left .menu-footer-bar-navigation-container ul.menu li.menu-item:last-child { padding-right: 0; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-left .menu-footer-bar-navigation-container ul.menu li.menu-item:last-child::after { display: none; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-middle { order: 3; text-align: center; margin: auto; padding-bottom: var(--spacer-xs); } @media (min-width: 768px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-middle { padding-bottom: var(--spacer-xs); } } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-middle { order: unset; padding-bottom: 0; } } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-middle ul { padding: 0; margin: 0; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-middle ul li { display: inline; list-style-type: none; margin-right: 10px; padding: 5px; border: 1px solid var(--color_neutral-rgba-50); border-radius: 3px; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-middle ul li:last-child { margin-right: 0; } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-right { order: 2; text-align: center; padding-bottom: var(--spacer-s); } @media (min-width: 768px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-right { padding-bottom: var(--spacer-s); } } @media (min-width: 1024px) { footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-right { order: unset; text-align: right; padding-bottom: 0; } } footer.pxlr-site-footer .pxlr-site-footer-bar-wrapper .pxlr-site-footer-bar-content .pxlr-site-footer-bar-right .createdby::before { position: relative; top: 3px; padding-right: 5px; content: ""; font-size: 1rem; font-family: icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: site-footer-location-bar.scss Desc: sticky footer location bar styles */ footer.pxlr-site-footer { padding-bottom: 150px; } @media (min-width: 1024px) { footer.pxlr-site-footer { padding-bottom: 100px; } } .pxlr-site-footer-location-bar { position: fixed; bottom: 0; width: 100%; z-index: 3; padding: var(--spacer-xs); background-color: var(--color_body-background); } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper { background-color: #181917; text-transform: uppercase; color: var(--color_white); font-size: 0.6428571429rem; border-radius: 10px; padding: var(--spacer-sm) var(--spacer-xs); } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper a { color: var(--color_neutral-90); } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper a:hover { color: var(--color_primary); } @media (min-width: 768px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper { padding: var(--spacer-sm) var(--spacer-s); } } @media (min-width: 1024px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper { padding: var(--spacer-m); } } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content { max-width: 100vw; margin-left: 0; margin-right: 0; display: flex; flex-flow: row wrap; } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content > div { width: 100%; } @media (min-width: 1024px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content { flex-flow: row; margin-left: 20px; margin-right: 20px; } } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-left { display: block; text-align: center; margin: auto; padding-bottom: var(--spacer-2xs); } @media (min-width: 768px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-left { padding-bottom: var(--spacer-2xs); } } @media (min-width: 1024px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-left { display: flex; align-items: center; order: unset; text-align: left; padding-bottom: 0; margin: 0; } } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-left .pxlr-site-footer-corporate-logo { display: inline-block; width: 120px; height: 13px; margin: 0; padding: 0 0 var(--spacer-xs) 0; } @media (min-width: 1024px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-left .pxlr-site-footer-corporate-logo { padding: 0 var(--spacer-xs) 0 0; } } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-middle { text-align: center; margin: auto; padding-bottom: var(--spacer-xs); } @media (min-width: 768px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-middle { padding-bottom: var(--spacer-xs); } } @media (min-width: 1024px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-middle { order: unset; padding-bottom: 0; } } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-right { text-align: center; } @media (min-width: 1024px) { .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-right { order: unset; text-align: right; margin-top: 0; } } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-right ul { padding: 0; margin: 0; } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-right ul li { display: inline-block; list-style-type: none; margin-right: 10px; } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-right ul li:last-child { margin-right: 0; } .pxlr-site-footer-location-bar .pxlr-site-footer-location-bar-wrapper .pxlr-site-footer-location-bar-content .pxlr-site-footer-location-bar-right ul li a { text-transform: uppercase; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: site-breadcrumb.scss Desc: Yoast (1) or Rank Math (2) breadcrumb */ /* Yoast Breadcrumb */ .pxlr-site-breadcrumb-wrapper { display: none; } @media (min-width: 1024px) { .pxlr-site-breadcrumb-wrapper { padding: var(--spacer-sm) 0 var(--spacer-sm) 0; text-align: left; display: block; } .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span { margin: 0; padding: 0; text-transform: uppercase; font-size: var(--paragraph-xxsmall-tablet-size); } } @media (min-width: 1024px) and (min-width: 1024px) { .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span { font-size: var(--paragraph-xxsmall-desktop-size); } } @media (min-width: 1024px) { .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span a { color: var(--color_white); cursor: pointer; text-transform: uppercase; font-weight: 300; margin-left: 5px; margin-right: 5px; } .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span a:hover { color: var(--color_black); } } @media (min-width: 1024px) { .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span span a { font-weight: 800; } .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span span a:before { position: relative; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); padding-right: 30px; top: -1px; } .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span span a:hover { text-decoration: none; } .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span span a:hover:before { background-image: url(../img/logo-pxlr-signet-black.svg); } .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span span span a { font-weight: normal; } .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span span span a:before { display: none; } .pxlr-site-breadcrumb-wrapper .pxlr-yoast-seo-breadcrumb span span span.breadcrumb_last { margin-left: 5px; color: var(--color_white-rgba-70); } } /* Rank Math Breadcrumb */ /* .pxlr-site-pagebar-breadcrumb-wrapper{ display: none; @include device_s{ padding: var(--spacer-sm) 0 var(--spacer-sm) 0; text-align: left; display: block; .rank-math-breadcrumb{ p{ margin: 0; padding: 0; text-transform: uppercase; font-size: var(--paragraph-xxsmall-tablet-size); @include device_m{ font-size: var(--paragraph-xxsmall-desktop-size); } a{ color: var(--color_white); cursor: pointer; text-transform: uppercase; &:first-child{ font-weight: 800; &:before { content: ""; position: relative; background-image: url(../img/logo-pxlr-signet-white.svg); background-size: 25px 14px; background-position: left center; background-repeat: no-repeat; padding-right: 30px; top: -1px; } } &:hover{ color: var(--color_black); text-decoration: none; &:first-child{ &:before { background-image: url(../img/logo-pxlr-signet-black.svg); } } } } .last{ color: var(--color_white-rgba-70); } .separator{ position: relative; top: 1px; color: var(--color_white-rgba-50); } } } } } */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: site-pagebar.scss Desc: red bar with breadcrumb and diverse section jumpers */ .pxlr-site-pagebar-wrapper { color: var(--color_white); display: flex; justify-content: flex-end; z-index: 97; width: 100vw; position: relative; box-shadow: var(--color_shadow-light); padding: 0 0 0 20px; /* Breadcrumb see 2-elemenst/site-breadcrumb.scss */ /* Option Links and section-anchors */ } .pxlr-site-pagebar-wrapper.pxlr-site-pagebar-sticky { position: fixed; } @media (min-width: 768px) { .pxlr-site-pagebar-wrapper { padding: 0 0 0 25px; justify-content: flex-end; } } @media (min-width: 1024px) { .pxlr-site-pagebar-wrapper { padding: 0 30px 0 30px; justify-content: space-between; } } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper { display: flex; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul { /* Transform anchor list to a dropdown for phone Unfortentaly, this feature was as additional implemented, so I have to work against the mobile first rule I prevert */ /* Shopping button */ } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping { padding: 0; margin: 0; display: flex; align-items: center; height: 100%; position: relative; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li { display: inline-flex; list-style-type: none; align-items: center; height: 100%; text-transform: uppercase; font-size: var(--paragraph-xxsmall-phone-size); line-height: initial; text-align: center; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-dropdown-toggle, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li.pxlr-site-pagebar-options-dropdown-toggle { display: none; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li a, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li a { color: var(--color_white); padding: var(--spacer-s); font-weight: 800; line-height: initial; display: flex; height: 100%; align-items: center; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li a:hover, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li a:hover { color: var(--color_black); } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li:before, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li:before { content: ""; position: relative; border-right: 1px dashed var(--color_white-rgba-50); height: 100%; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.focus a, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li.focus a { position: relative; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.focus a:after, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li.focus a:after { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); bottom: -18px; left: 0; right: 0; margin: auto; } @media (min-width: 768px) { .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li { font-size: var(--paragraph-xxsmall-tablet-size); } } @media (min-width: 1290px) { .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li { font-size: var(--paragraph-xxsmall-desktop-size); } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.focus a:after, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li.focus a:after { background-size: 20px 41px; width: 20px; height: 41px; bottom: -22px; } } @media (min-width: 320px) { .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors { display: inline; height: inherit; position: absolute; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-btn { display: none; height: inherit; background-color: var(--color_primary); position: relative; top: 32px; height: 50px; border-top: 1px dashed var(--color_white-rgba-50); } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-btn:last-child { border-radius: 0 0 3px 3px; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-btn:before { display: none; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-btn a { justify-content: right; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-btn.active { display: block; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-dropdown-toggle { display: inline-flex; position: relative; top: 16px; justify-content: right; color: var(--color_white); padding: var(--spacer-s); font-weight: 800; line-height: initial; display: flex; height: 100%; align-items: center; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-dropdown-toggle:before { display: none; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-anchors li.pxlr-site-pagebar-options-dropdown-toggle a { justify-content: right; } } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li { background-color: var(--color_white); cursor: pointer; box-shadow: var(--color_shadow-xlight); text-align: left; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li a { color: var(--color_primary); font-weight: 800; position: relative; margin-left: var(--spacer-sm); padding-top: 30px; padding-bottom: 30px; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li a:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); left: -10px; top: 50%; transform: translateY(-50%); } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li:hover { background-color: var(--color_black); } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li:hover a { color: var(--color_white); } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li:hover a:before { color: var(--color_white); } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li:before, .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li:after { border-right: none; } .pxlr-site-pagebar-wrapper .pxlr-site-pagebar-options-wrapper ul.pxlr-site-pagebar-options-shopping li.focus a:after { content: ""; background-image: none; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: scroll-top.scss Desc: scroll up button */ .pxlr-scroll-top-button { background-color: var(--color_primary); border-radius: 50%; box-shadow: var(--color_shadow-light); cursor: pointer; display: none; height: 40px; width: 40px; position: fixed; z-index: 98; right: 8px; bottom: 8px; } @media (min-width: 768px) { .pxlr-scroll-top-button { right: 10px; bottom: 10px; height: 50px; width: 50px; } } @media (min-width: 1024px) { .pxlr-scroll-top-button { right: 15px; bottom: 15px; height: 60px; width: 60px; } } .pxlr-scroll-top-button:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: captions.scss Desc: _s captions */ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*=wp-image-] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: alignments.scss Desc: alignments */ /* _s Alignments --------------------------------------------- */ .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: archive.scss Desc: archive pages */ body.archive .site-main { padding-top: calc(20px * 2); } @media (min-width: 768px) { body.archive .site-main { padding-top: calc(25px * 2); } } @media (min-width: 1024px) { body.archive .site-main { padding-top: calc(30px * 2); } } .pxlr-archive-title { padding-bottom: calc(20px * 2); } @media (min-width: 768px) { .pxlr-archive-title { padding-bottom: calc(25px * 2); } } @media (min-width: 1024px) { .pxlr-archive-title { padding-bottom: calc(30px * 2); } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: archive-title.scss Desc: archive-title in archive.php */ .pxlr-archive-title { padding-bottom: calc(20px * 2); } @media (min-width: 768px) { .pxlr-archive-title { padding-bottom: calc(25px * 2); } } @media (min-width: 1024px) { .pxlr-archive-title { padding-bottom: calc(30px * 2); } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: archive-pagination.scss Desc: numeric pagination for archive */ .pxlr-archive-numeric-pagination-wrapper { padding-top: 20px; padding-bottom: calc(20px * 2); } @media (min-width: 768px) { .pxlr-archive-numeric-pagination-wrapper { padding-top: 25px; padding-bottom: calc(25px * 2); } } @media (min-width: 1024px) { .pxlr-archive-numeric-pagination-wrapper { padding-top: 30px; padding-bottom: calc(30px * 2); } } .pxlr-archive-numeric-pagination-wrapper.centered { display: flex; justify-content: center; } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination { display: inline-block; padding: 10px; box-shadow: var(--color_shadow-xlight); border-radius: 50px; } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul { margin: 0; padding: 0; } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li { margin-right: 3px; background-color: var(--color_black); border: 1px solid var(--color_neutral-rgba-50); text-transform: uppercase; font-size: 0.75rem; font-weight: 100; color: var(--color_primary); height: 30px; width: 30px; border-radius: 50%; display: inline-flex; /* or flex */ align-items: center; justify-content: center; cursor: pointer; padding-left: 0 !important; margin-bottom: 0 !important; } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li:before { display: none; } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li:hover { background-color: var(--color_primary); border: 1px solid var(--color_primary); } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li:hover a { color: var(--color_white); } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li a { color: var(--color_neutral-100); display: inline-block; padding: 10px; } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li.active { background-color: var(--color_primary); border: 1px solid var(--color_primary); color: var(--color_white); } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li.active a { color: var(--color_white); } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li.between { border: 1px solid var(--color_neutral-25); color: var(--color_neutral-100); } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li.between:hover { background-color: var(--color_white); border: 1px solid var(--color_neutral-25); cursor: inherit; } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li.disabled { background-color: var(--color_white); border: 1px solid var(--color_neutral-50); color: var(--color_neutral-50); } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li.disabled a { color: var(--color_neutral-50); } .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li.previous, .pxlr-archive-numeric-pagination-wrapper .pxlr-archive-numeric-pagination ul li.next { width: inherit; border-radius: 30px; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: archive-filter.scss Desc: filter option for categories */ .pxlr-archive-filter-wrapper { padding-top: 20px; padding-bottom: 20px; } .pxlr-archive-filter-wrapper.centered { display: flex; justify-content: center; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-buttons ul, .pxlr-archive-filter-wrapper.pxlr-archive-filter-href-buttons ul { margin: 0; padding: 0; text-align: center; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-buttons ul li, .pxlr-archive-filter-wrapper.pxlr-archive-filter-href-buttons ul li { margin-right: 3px; margin-bottom: 10px; background-color: var(--color_white); border: 1px solid var(--color_neutral-15); text-transform: uppercase; font-size: 0.75rem; font-weight: 600; color: var(--color_neutral-100); height: 30px; border-radius: 50px; display: inline-flex; /* or flex */ align-items: center; justify-content: center; cursor: pointer; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-buttons ul li:hover, .pxlr-archive-filter-wrapper.pxlr-archive-filter-href-buttons ul li:hover { background-color: var(--color_primary); border: 1px solid var(--color_primary); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-buttons ul li:hover a, .pxlr-archive-filter-wrapper.pxlr-archive-filter-href-buttons ul li:hover a { color: var(--color_white); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-buttons ul li a, .pxlr-archive-filter-wrapper.pxlr-archive-filter-href-buttons ul li a { color: var(--color_neutral-100); display: inline-block; padding: 10px; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-buttons ul li.active, .pxlr-archive-filter-wrapper.pxlr-archive-filter-href-buttons ul li.active { background-color: var(--color_primary); border: 1px solid var(--color_primary); color: var(--color_white); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-buttons ul li.active a, .pxlr-archive-filter-wrapper.pxlr-archive-filter-href-buttons ul li.active a { color: var(--color_white); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown { position: relative; margin-bottom: 20px; } @media (min-width: 768px) { .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown { margin-bottom: 25px; } } @media (min-width: 1024px) { .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown { margin-bottom: 30px; } } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper { position: absolute; z-index: 1; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-title { background-color: var(--color_white); border: 1px solid var(--color_neutral-15); height: 40px; padding: 0 40px 0 20px; display: flex; align-items: center; border-radius: 30px; text-transform: uppercase; font-size: 0.75rem; font-weight: 600; color: var(--color_neutral-100); cursor: pointer; position: relative; z-index: 1; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-title:after { position: relative; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); right: 15px; top: 50%; transform: translateY(-50%); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-title.is-open { background-color: var(--color_primary); border: 1px solid var(--color_primary); color: var(--color_white); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-title.is-open:after { color: var(--color_white); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-title.is-open:hover:after { color: var(--color_white); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-title:hover { background-color: var(--color_primary); border: 1px solid var(--color_primary); color: var(--color_white); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-title:hover:after { color: var(--color_white); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-list { padding-top: 50px; background-color: var(--color_white); border: 1px solid var(--color_neutral-15); border-radius: 20px; display: none; position: relative; top: -40px; box-shadow: var(--color_shadow-xlight); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-list ul { margin: 0; padding: 0; text-align: center; list-style-type: none; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-list ul li { text-transform: uppercase; font-size: 0.75rem; font-weight: 600; color: var(--color_neutral-100); text-align: left; cursor: pointer; margin: 10px 0 10px 0; border-bottom: 1px solid var(--color_neutral-15); } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-list ul li:first-child { margin-top: 0; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-list ul li:last-child { border-bottom: 0; margin-bottom: 0; } .pxlr-archive-filter-wrapper.pxlr-archive-filter-dropdown .pxlr-archive-filter-dropdown-wrapper .pxlr-archive-filter-dropdown-list ul li a { display: inline-block; width: 100%; padding: 0 20px 10px 20px; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: single.scss Desc: head element for archive pages */ body.single .site-main { padding-top: calc(20px * 2); } @media (min-width: 768px) { body.single .site-main { padding-top: calc(25px * 2); } } @media (min-width: 1024px) { body.single .site-main { padding-top: calc(30px * 2); } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: single-post-navigation.scss Desc: jump to prev or next post inside a single post */ /* todo: this element is not in use currently, no future styling yet */ .pxlr-single-post-navigation-wrapper { margin-top: 20px; } @media (min-width: 768px) { .pxlr-single-post-navigation-wrapper { margin-top: 25px; } } @media (min-width: 1024px) { .pxlr-single-post-navigation-wrapper { margin-top: 30px; } } .pxlr-single-post-navigation-wrapper .post-navigation .nav-links { display: flex; justify-content: space-between; flex-wrap: wrap; } @media (min-width: 1024px) { .pxlr-single-post-navigation-wrapper .post-navigation .nav-links { flex-wrap: inherit; } } .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous { margin-right: 20px; } .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous, .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-next { display: inline-block; border: 1px solid var(--color_neutral-rgba-30); border-radius: 40px; padding: 8px 12px; font-size: 0.5714285714rem; } @media (min-width: 768px) { .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous, .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-next { padding: 8px 12px; font-size: 0.625rem; } } @media (min-width: 1024px) { .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous, .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-next { padding: 10px 20px; font-size: 0.5555555556rem; } } @media (min-width: 1290px) { .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous, .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-next { padding: 10px 20px; font-size: 0.6666666667rem; } } @media (min-width: 1440px) { .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous, .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-next { padding: 10px 20px; font-size: 0.7777777778rem; } } @media (min-width: 1920px) { .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous, .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-next { padding: 10px 20px; font-size: 0.8888888889rem; } } .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous a .nav-title, .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-next a .nav-title { display: none; } @media (min-width: 768px) { .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-previous a .nav-title, .pxlr-single-post-navigation-wrapper .post-navigation .nav-links .nav-next a .nav-title { display: inline-block; } } /* components*/ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: modal.scss Desc: modal with jquery and ccs */ .pxlr-modal-wrapper { position: fixed; z-index: 999999; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; display: flex; flex-direction: column; /* make main axis vertical */ justify-content: center; /* center items vertically, in this case */ align-items: center; /* center items horizontally, in this case */ background-color: var(--color_black-rgba-98); } .pxlr-modal-wrapper.inactive { transition: 0.7s; } .pxlr-modal-wrapper.active { visibility: visible; opacity: 1; transition: all 0.2s; } .pxlr-modal-wrapper.active .pxlr-modal-content-wrapper { visibility: visible; opacity: 1; transform: translateY(0); margin-top: 30px; margin-bottom: 30px; overflow: hidden; padding: 0 15px; } @media (min-width: 768px) { .pxlr-modal-wrapper.active .pxlr-modal-content-wrapper { padding: 0 30px; } } @media (min-width: 1024px) { .pxlr-modal-wrapper.active .pxlr-modal-content-wrapper { padding: 0 50px; } } .pxlr-modal-wrapper .pxlr-modal-icon-trigger-close { position: absolute; z-index: 99999999; top: 30px; right: 30px; width: 50px; height: 50px; background-color: transparent; border-radius: 0px 3px 0px 3px; display: block; } @media (min-width: 768px) { .pxlr-modal-wrapper .pxlr-modal-icon-trigger-close { display: block; } } @media (min-width: 1024px) { .pxlr-modal-wrapper .pxlr-modal-icon-trigger-close { display: block; } } .pxlr-modal-wrapper .pxlr-modal-icon-trigger-close::before { position: absolute; content: ""; font-family: "icons"; font-size: 1.2rem; color: var(--color_white); left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all; } @media (min-width: 768px) { .pxlr-modal-wrapper .pxlr-modal-icon-trigger-close::before { font-size: 1.5rem; } } @media (min-width: 1024px) { .pxlr-modal-wrapper .pxlr-modal-icon-trigger-close::before { font-size: 2.2rem; } } .pxlr-modal-wrapper .pxlr-modal-content-wrapper { position: relative; visibility: hidden; opacity: 0; transition: 0.5s ease-out; transform: translateY(45px); min-height: 100px; text-align: center; border-radius: 3px; box-shadow: var(--color_shadow-light); } .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-title { border-radius: 3px; border-bottom: 1px solid var(--color_neutral-15); padding: 20px calc(20px * 2) 20px calc(20px * 2); } .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-title h4 { margin: 0; padding: 0; font-size: 0.7rem; } .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-title.pxlr-modal-title-no-border { border-bottom: 0; } @media (min-width: 768px) { .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-title { padding: calc(25px / 2) calc(25px * 2) calc(25px / 2) calc(25px * 2); } } @media (min-width: 1024px) { .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-title { padding: calc(30px / 2) calc(30px * 2) calc(30px / 2) calc(30px * 2); } } .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-title.pxlr-modal-title-hide { display: none; } .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-content { overflow-y: scroll; max-height: 100%; border-radius: 20px; } .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-content .pxlr-modal-button-trigger-close { margin-top: 20px; } @media (min-width: 768px) { .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-content .pxlr-modal-button-trigger-close { margin-top: 25px; } } @media (min-width: 1024px) { .pxlr-modal-wrapper .pxlr-modal-content-wrapper .pxlr-modal-content .pxlr-modal-button-trigger-close { margin-top: 25px; } } /* wp gutenberg blocks note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own info: don't forget to insert some stylings in wp-backend.scss to see styles in editor as well */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-mixin.scss Desc: diverse mixins to use all over wp block stylings Usage: @link https://sass-lang.com/documentation/at-rules/mixin @mixin example { margin: 0; padding: 0; @content; // Use to overwrite settings } .someclass{ @include example; } */ /* All Colors are here defined, but to be save at the end, wp color palette are in assets/scss/04-blocks/ */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-colors.scss Desc: All Text or Background colors that can be added by a block */ /* Colors are defined as mixin Take a look into wp-block-mixin.scs .has-text-color{ &.has-primary-color{ color: var(--color_primary); } &.has-black-color{ color: var(--color_black); } &.has-white-color{ color: var(--color_white); } } .has-background{ &.has-primary-background-color{ color: var(--color_primary); } &.has-black-background-color{ color: var(--color_black); } &.has-white-background-color{ color: var(--color_white); } } */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-default.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** * WP Image ************************************************************************ *********************************************************************************** */ img { border-radius: 3px; } /* *********************************************************************************** * Full Width Containers in Limited Width Parents ********************************** * https://css-tricks.com/full-width-containers-limited-width-parents/ ************* *********************************************************************************** */ .pxlr-wp-block-group-fullwidth { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* *********************************************************************************** * WP Paragraph, remove margin on first child, to start on same height with image ** *********************************************************************************** */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-group.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css Important: This file is modified */ .wp-block-group { box-sizing: border-box; padding: 0; margin: 0; /* Default - Contentwidth */ max-width: 2080px; margin: 0 auto; padding-left: 20px; padding-right: 20px; /* Largewidth incl responsive gap as default*/ /* mediumwidth incl responsive gap as default*/ /* Fullwidth no gap */ /* Fullwidth with responsive gap */ } @media (min-width: 768px) { .wp-block-group { padding-left: 25px; padding-right: 25px; } } @media (min-width: 1024px) { .wp-block-group { padding-left: 30px; padding-right: 30px; } } .wp-block-group.is-style-pxlr-default_width { max-width: 2080px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .wp-block-group.is-style-pxlr-default_width { padding-left: 25px; padding-right: 25px; } } @media (min-width: 1024px) { .wp-block-group.is-style-pxlr-default_width { padding-left: 30px; padding-right: 30px; } } .wp-block-group.is-style-pxlr-largewidth { max-width: 1720px; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .wp-block-group.is-style-pxlr-largewidth { padding-left: 25px; padding-right: 25px; } } @media (min-width: 1024px) { .wp-block-group.is-style-pxlr-largewidth { padding-left: 30px; padding-right: 30px; } } @media (min-width: 1290px) { .wp-block-group.is-style-pxlr-largewidth { padding-left: 60px; padding-right: 60px; } } .wp-block-group.is-style-pxlr-mediumwidth { max-width: 1380px; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .wp-block-group.is-style-pxlr-mediumwidth { padding-left: 25px; padding-right: 25px; } } @media (min-width: 1024px) { .wp-block-group.is-style-pxlr-mediumwidth { padding-left: 30px; padding-right: 30px; } } @media (min-width: 1290px) { .wp-block-group.is-style-pxlr-mediumwidth { padding-left: 60px; padding-right: 60px; } } .wp-block-group.is-style-pxlr-overflow-right { max-width: calc(2080px + calc( (100vw - 2080px) / 2)); margin-left: auto; margin-right: 0; padding-left: 20px; padding-right: 0; } .wp-block-group.is-style-pxlr-overflow-right .wp-block-group__inner-container .wp-block-columns .wp-block-column > * { padding-right: 20px; } .wp-block-group.is-style-pxlr-overflow-right .wp-block-group__inner-container .wp-block-columns .wp-block-column .wp-block-image { padding-right: 0; } .wp-block-group.is-style-pxlr-overflow-right figure.is-style-overflow-right { margin-right: 0; } @media (min-width: 768px) { .wp-block-group.is-style-pxlr-overflow-right { padding-left: 25px; padding-right: 0; } .wp-block-group.is-style-pxlr-overflow-right figure.is-style-overflow-right { margin-right: -20px; } } @media (min-width: 1024px) { .wp-block-group.is-style-pxlr-overflow-right { padding-left: 30px; padding-right: 0; } .wp-block-group.is-style-pxlr-overflow-right figure.is-style-overflow-right { margin-right: -20px; } } .wp-block-group.is-style-pxlr-overflow-left { max-width: calc(2080px + calc( (100vw - 2080px) / 2)); margin-left: 0; margin-right: auto; padding-left: 0; padding-right: 20px; } .wp-block-group.is-style-pxlr-overflow-left .wp-block-group__inner-container .wp-block-columns .wp-block-column > * { padding-left: 20px; } .wp-block-group.is-style-pxlr-overflow-left .wp-block-group__inner-container .wp-block-columns .wp-block-column .wp-block-image { padding-left: 0; } .wp-block-group.is-style-pxlr-overflow-left figure.is-style-overflow-left { margin-left: -20px; } @media (min-width: 768px) { .wp-block-group.is-style-pxlr-overflow-left { padding-left: 0; padding-right: 20px; } .wp-block-group.is-style-pxlr-overflow-left figure.is-style-overflow-left { margin-left: -20px; } } @media (min-width: 1024px) { .wp-block-group.is-style-pxlr-overflow-left { padding-left: 0; padding-right: 30px; } .wp-block-group.is-style-pxlr-overflow-left figure.is-style-overflow-left { margin-left: -20px; } } .wp-block-group.is-style-pxlr-fullwidth { max-width: 100vw; padding-left: 0; padding-right: 0; } .wp-block-group.is-style-pxlr-fullwidth-gap { max-width: 100vw; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .wp-block-group.is-style-pxlr-fullwidth-gap { padding-left: 30px; padding-right: 30px; } } @media (min-width: 1024px) { .wp-block-group.is-style-pxlr-fullwidth-gap { padding-left: 50px; padding-right: 50px; } } @media (min-width: 1290px) { .wp-block-group.is-style-pxlr-fullwidth-gap { padding-left: 60px; padding-right: 60px; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-columns.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ .wp-block-columns { display: flex; box-sizing: border-box; flex-wrap: wrap; justify-content: space-between; column-gap: 20px; row-gap: 20px; margin-bottom: 20px; } @media (min-width: 768px) { .wp-block-columns { column-gap: 25px; row-gap: 25px; margin-bottom: 25px; } } @media (min-width: 1024px) { .wp-block-columns { column-gap: 30px; row-gap: 30px; margin-bottom: 30px; } } .wp-block-columns.pxlr-modfier-columns-is-height-100vh { height: 100vh; } .wp-block-columns.pxlr-modfier-columns-is-height-75vh { height: 75vh; } .wp-block-columns.pxlr-modfier-columns-is-height-50vh { height: 50vh; } .wp-block-columns.pxlr-modfier-columns-is-width-100vw { width: 100vw; } .wp-block-columns.pxlr-modfier-columns-is-width-75vw { width: 75vw; } .wp-block-columns.pxlr-modfier-columns-is-width-50vw { width: 50vw; } .wp-block-columns.is-style-pxlr-columns-minimal-gap { column-gap: 10px; justify-content: normal; } .wp-block-columns.is-style-pxlr-columns-minimal-gap .wp-block-column { width: 100%; flex: 1; } @media (min-width: 768px) { .wp-block-columns.is-style-pxlr-columns-minimal-gap { column-gap: 10px; } } @media (min-width: 1024px) { .wp-block-columns.is-style-pxlr-columns-minimal-gap { column-gap: 10px; } } .wp-block-columns.is-style-pxlr-columns-minimal-gap-row { column-gap: 10px; justify-content: normal; margin-bottom: 10px; } .wp-block-columns.is-style-pxlr-columns-minimal-gap-row .wp-block-column { width: 100%; flex: 1; } @media (min-width: 768px) { .wp-block-columns.is-style-pxlr-columns-minimal-gap-row { column-gap: 10px; } } @media (min-width: 1024px) { .wp-block-columns.is-style-pxlr-columns-minimal-gap-row { column-gap: 10px; } } .wp-block-columns.is-style-pxlr-columns-disable-gap { column-gap: inherit; justify-content: normal; } .wp-block-columns.is-style-pxlr-columns-disable-gap .wp-block-column { width: 100%; flex: 1; } @media (min-width: 768px) { .wp-block-columns.is-style-pxlr-columns-disable-gap { column-gap: inherit; } } @media (min-width: 1024px) { .wp-block-columns.is-style-pxlr-columns-disable-gap { column-gap: inherit; } } .wp-block-columns.is-style-pxlr-columns-disable-gap { column-gap: inherit; justify-content: normal; margin-bottom: inherit; } .wp-block-columns.is-style-pxlr-columns-disable-gap .wp-block-column { width: 100%; flex: 1; } @media (min-width: 768px) { .wp-block-columns.is-style-pxlr-columns-disable-gap { column-gap: inherit; } } @media (min-width: 1024px) { .wp-block-columns.is-style-pxlr-columns-disable-gap { column-gap: inherit; } } .wp-block-columns.is-style-pxlr-columns-minimal-gap .wp-block-column.pxlr-modifier-column-gap-on-minimal-or-disable-columns, .wp-block-columns.is-style-pxlr-columns-disable-gap .wp-block-column.pxlr-modifier-column-gap-on-minimal-or-disable-columns { padding-right: 20px; } @media (min-width: 768px) { .wp-block-columns.is-style-pxlr-columns-minimal-gap .wp-block-column.pxlr-modifier-column-gap-on-minimal-or-disable-columns, .wp-block-columns.is-style-pxlr-columns-disable-gap .wp-block-column.pxlr-modifier-column-gap-on-minimal-or-disable-columns { padding-right: 25px; } } @media (min-width: 1024px) { .wp-block-columns.is-style-pxlr-columns-minimal-gap .wp-block-column.pxlr-modifier-column-gap-on-minimal-or-disable-columns, .wp-block-columns.is-style-pxlr-columns-disable-gap .wp-block-column.pxlr-modifier-column-gap-on-minimal-or-disable-columns { padding-right: 30px; } } .wp-block-columns.pxlr-modfier-columns-is-margin-bottom-none { margin-bottom: 0; } .wp-block-columns.has-background { padding: 1.25em 2.375em; } .wp-block-columns.are-vertically-aligned-top { align-items: flex-start; } .wp-block-columns.are-vertically-aligned-center { align-items: center; } .wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; } .wp-block-column { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; } .wp-block-column.has-text-color.has-primary-color { color: var(--color_primary); } .wp-block-column.has-text-color.has-black-color { color: var(--color_black); } .wp-block-column.has-text-color.has-white-color { color: var(--color_white); } .wp-block-column.has-background.has-primary-background-color { background-color: var(--color_primary); } .wp-block-column.has-background.has-primary-background-color .has-primary-color { color: var(--color_primary); } .wp-block-column.has-background.has-primary-background-color .has-black-color { color: var(--color_black); } .wp-block-column.has-background.has-primary-background-color .has-white-color { color: var(--color_white); } .wp-block-column.has-background.has-black-background-color { background-color: var(--color_black); } .wp-block-column.has-background.has-black-background-color .has-primary-color { color: var(--color_primary); } .wp-block-column.has-background.has-black-background-color .has-black-color { color: var(--color_black); } .wp-block-column.has-background.has-black-background-color .has-white-color { color: var(--color_white); } .wp-block-column.has-background.has-white-background-color { background-color: var(--color_white); } .wp-block-column.has-background.has-white-background-color .has-primary-color { color: var(--color_primary); } .wp-block-column.has-background.has-white-background-color .has-black-color { color: var(--color_black); } .wp-block-column.has-background.has-white-background-color .has-white-color { color: var(--color_white); } .wp-block-column.pxlr-modifier-column-hide-on-mobile { display: none; } .wp-block-column.pxlr-modfier-column-is-last-on-mobile { order: 99; } .wp-block-column.pxlr-modfier-column-is-last-fullwidth-on-mobile { order: 99; } .wp-block-column.pxlr-modfier-column-is-last-fullwidth-on-mobile:first-child { width: 100%; flex: 1; } .wp-block-column.pxlr-modfier-column-is-last-fullwidth-on-mobile:not(:first-child) { flex: 0; } .wp-block-column.pxlr-modfier-column-has-shadow-xlight { box-shadow: var(--color_shadow-xlight); } .wp-block-column.pxlr-modfier-column-has-shadow-light { box-shadow: var(--color_shadow-light); } .wp-block-column.pxlr-modfier-column-has-shadow-medium { box-shadow: var(--color_shadow-medium); } .wp-block-column.pxlr-modfier-column-has-shadow-heavy { box-shadow: var(--color_shadow-heavy); } .wp-block-column.pxlr-modfier-column-has-border-color-light { border: 1px solid var(--color_neutral-10); } .wp-block-column.pxlr-modfier-column-has-border-color-gray { border: 1px solid var(--color_neutral-20); } .wp-block-column.pxlr-modfier-column-has-border-color-black { border: 1px solid var(--color_black); } .wp-block-column.pxlr-modfier-column-has-border-color-primary { border: 1px solid var(--color_primary); } .wp-block-column.pxlr-modfier-column-has-border-color-white { border: 1px solid var(--color_white); } .wp-block-column.pxlr-modfier-column-has-padding { padding: 20px; } @media (min-width: 768px) { .wp-block-column.pxlr-modfier-column-has-padding { padding: 25px; } } @media (min-width: 1024px) { .wp-block-column.pxlr-modfier-column-has-padding { padding: calc(30px - 10px); } .wp-block-column.pxlr-modfier-column-has-padding p:last-child { margin-bottom: 0; } } .wp-block-column.pxlr-modfier-column-has-border-radius-default { border-radius: 3px; } .wp-block-column.pxlr-modfier-column-has-border-radius-medium { border-radius: 20px; } .wp-block-column.pxlr-modfier-column-has-border-radius-large { border-radius: 40px; } .wp-block-column.pxlr-modfier-column-has-border-radius-xlarge { border-radius: 30px; } @media (max-width: 599px) { .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 600px) and (max-width: 768px) { .wp-block-columns.pxlr-modfier-columns-is-one-mobile-large-phone .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 600px) and (max-width: calc(1024px - 1px)) { .wp-block-columns.pxlr-modfier-columns-is-one-mobile-large-phone-tablet .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 600px) and (max-width: calc(1024px - 1px)) { .wp-block-columns.pxlr-modfier-columns-is-two-mobile-large-phone .wp-block-column:not(:only-child) { flex-basis: calc(50% - 1em) !important; flex-grow: 0; } .wp-block-columns.pxlr-modfier-columns-is-two-mobile-large-phone .wp-block-column.pxlr-modifier-column-hide-on-mobile { display: none; } } @media (min-width: 768px) { .wp-block-column { flex-basis: 0; flex-grow: 1; } .wp-block-column.pxlr-modfier-column-is-last-on-mobile { margin-left: calc(25px / 2); } .wp-block-column[style*=flex-basis] { flex-grow: 0; } } @media (min-width: 600px) and (max-width: 768px) { .wp-block-column.pxlr-modfier-column-is-last-on-mobile { margin-left: calc(25px / 2); } } @media (min-width: 1024px) { .wp-block-column.pxlr-modifier-column-hide-on-mobile { display: block; } .wp-block-column.pxlr-modfier-column-is-last-on-mobile { order: inherit; } .wp-block-column.pxlr-modfier-column-is-last-fullwidth-on-mobile { order: inherit; } } .wp-block-column.is-vertically-aligned-top { align-self: flex-start; } .wp-block-column.is-vertically-aligned-center { align-self: center; } .wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; } .wp-block-column.is-vertically-aligned-top, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-bottom { width: 100%; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-button.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css Important Note: This button styles are NOT based on original Important: This file is modified */ .wp-block-buttons { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 0.5em; /* Custom width */ } .wp-block-buttons > .wp-block-button { margin-bottom: 0.5em; } .wp-block-buttons.is-vertical { flex-direction: column; display: block; } .wp-block-buttons.is-vertical > .wp-block-button { /*rtl:ignore*/ margin-right: 0; margin-bottom: 0.5em; } .wp-block-buttons.is-content-justification-center { justify-content: center; } .wp-block-buttons.is-content-justification-center.is-vertical { align-items: center; } .wp-block-buttons > .wp-block-button { display: inline-block; /* Default type is fill*/ /* ********************************************************************************************************************* *** Selected type fill ********************************************************************************************** ********************************************************************************************************************* */ /* Selected type fill custom buttons with icon left or right */ /* ********************************************************************************************************************* *** Selected type outline ******************************************************************************************* ********************************************************************************************************************* */ /* Selected type fill custom buttons with icon left or right */ } .wp-block-buttons > .wp-block-button .wp-block-button__link { text-transform: uppercase; font-weight: 800; border-radius: 9999px; box-shadow: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; overflow-wrap: break-word; box-sizing: border-box; font-size: 0.85rem; line-height: 0; padding: calc(var(--spacer-s) + 2px) var(--spacer-s) var(--spacer-s) var(--spacer-s); /* Editor color palette support */ } @media (min-width: 768px) { .wp-block-buttons > .wp-block-button .wp-block-button__link { font-size: 0.87rem; line-height: 0; } } @media (min-width: 1024px) { .wp-block-buttons > .wp-block-button .wp-block-button__link { font-size: 0.88rem; line-height: 0; } } .wp-block-buttons > .wp-block-button .wp-block-button__link:hover, .wp-block-buttons > .wp-block-button .wp-block-button__link:focus, .wp-block-buttons > .wp-block-button .wp-block-button__link:active, .wp-block-buttons > .wp-block-button .wp-block-button__link:visited { color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.aligncenter { text-align: center; } .wp-block-buttons > .wp-block-button .wp-block-button__link.alignright { /*rtl:ignore*/ text-align: right; } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-text-color { /* overwrite example */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); /* overwrite example */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); /* overwrite example */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); /* overwrite example */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background { /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color { background-color: var(--color_primary); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-primary-color { color: var(--color_primary); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-black-color { color: var(--color_black); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-white-color { color: var(--color_white); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color { background-color: var(--color_black); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-primary-color { color: var(--color_primary); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-black-color { color: var(--color_black); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-white-color { color: var(--color_white); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color { background-color: var(--color_white); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-primary-color { color: var(--color_primary); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-black-color { color: var(--color_black); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-white-color { color: var(--color_white); /* overwrite */ } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color { border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color:hover { border: 1px solid var(--color_primary); background-color: transparent; color: var(--color_primary); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color { border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color:hover { border: 1px solid var(--color_black); background-color: transparent; color: var(--color_black); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color { border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color:hover { border: 1px solid var(--color_white); background-color: transparent; color: var(--color_white); } .wp-block-buttons > .wp-block-button .wp-block-button__link { padding: var(--spacer-sm) var(--spacer-s) var(--spacer-sm) var(--spacer-s); font-size: 0.64rem; line-height: 0; } @media (min-width: 768px) { .wp-block-buttons > .wp-block-button .wp-block-button__link { font-size: 0.62rem; line-height: 0; } } @media (min-width: 1024px) { .wp-block-buttons > .wp-block-button .wp-block-button__link { font-size: 0.66rem; line-height: 0; } } .wp-block-buttons > .wp-block-button.has-custom-font-size { font-size: inherit; } .wp-block-buttons > .wp-block-button.has-custom-font-size.has-small-font-size .wp-block-button__link { padding: var(--spacer-s) var(--spacer-s) var(--spacer-s) var(--spacer-s); font-size: 0.75rem; line-height: 0; } @media (min-width: 768px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-small-font-size .wp-block-button__link { font-size: 0.75rem; line-height: 0; } } @media (min-width: 1024px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-small-font-size .wp-block-button__link { font-size: 0.77rem; line-height: 0; } } .wp-block-buttons > .wp-block-button.has-custom-font-size.has-normal-font-size .wp-block-button__link { font-size: 0.85rem; line-height: 0; } @media (min-width: 768px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-normal-font-size .wp-block-button__link { font-size: 0.87rem; line-height: 0; } } @media (min-width: 1024px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-normal-font-size .wp-block-button__link { font-size: 0.88rem; line-height: 0; } } .wp-block-buttons > .wp-block-button.has-custom-font-size.has-medium-font-size .wp-block-button__link { font-size: 1rem; line-height: 0; } @media (min-width: 768px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-medium-font-size .wp-block-button__link { font-size: 1.06rem; line-height: 0; } } @media (min-width: 1024px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-medium-font-size .wp-block-button__link { font-size: 1rem; line-height: 0; } } .wp-block-buttons > .wp-block-button.has-custom-font-size.has-large-font-size .wp-block-button__link { font-size: 1.14rem; line-height: 0; } @media (min-width: 768px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-large-font-size .wp-block-button__link { font-size: 1.12rem; line-height: 0; } } @media (min-width: 1024px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-large-font-size .wp-block-button__link { font-size: 1.11rem; line-height: 0; } } .wp-block-buttons > .wp-block-button.has-custom-font-size.has-huge-font-size .wp-block-button__link { font-size: 1.28rem; line-height: 0; } @media (min-width: 768px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-huge-font-size .wp-block-button__link { font-size: 1.25rem; line-height: 0; } } @media (min-width: 1024px) { .wp-block-buttons > .wp-block-button.has-custom-font-size.has-huge-font-size .wp-block-button__link { font-size: 1.22rem; line-height: 0; } } .wp-block-buttons > .wp-block-button .wp-block-button__link { color: var(--color_white); background-color: var(--color_primary); border: 1px solid transparent; } .wp-block-buttons > .wp-block-button .wp-block-button__link:hover { color: var(--color_primary); border: 1px solid var(--color_primary); background-color: transparent; } .wp-block-buttons > .wp-block-button.is-style-fill .wp-block-button__link { color: var(--color_white); background-color: var(--color_primary); border: 1px solid transparent; } .wp-block-buttons > .wp-block-button.is-style-fill .wp-block-button__link:hover { color: var(--color_primary); border: 1px solid var(--color_primary); background-color: transparent; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link { position: relative; padding-left: 32px; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); left: 10px; top: 50%; transform: translateY(-50%); display: block; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link:hover:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color { /* overwrite example */ } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); /* overwrite example */ } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); /* overwrite example */ } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); /* overwrite example */ } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-primary-color:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-primary-color:hover { color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-primary-color:hover:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-black-color:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-black-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-black-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-white-color:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-white-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right .wp-block-button__link.has-text-color.has-white-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link { position: relative; padding-left: 32px; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); left: 10px; top: 50%; transform: translateY(-50%); display: block; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link:hover:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-primary-color:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-primary-color:hover { color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-primary-color:hover:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-black-color:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-black-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-black-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-white-color:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-white-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-right-down .wp-block-button__link.has-text-color.has-white-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link { position: relative; padding-right: 32px; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link:after { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); right: 10px; top: 50%; transform: translateY(-50%); display: block; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link:hover:after { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-primary-color:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-primary-color:hover { color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-primary-color:hover:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-black-color:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-black-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-black-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-white-color:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-white-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left .wp-block-button__link.has-text-color.has-white-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link { position: relative; padding-right: 32px; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link:after { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); right: 10px; top: 50%; transform: translateY(-50%); display: block; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link:hover:after { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-primary-color:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-primary-color:hover { color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-primary-color:hover:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-black-color:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-black-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-black-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-white-color:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-white-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-fill-icon-arrow-left-down .wp-block-button__link.has-text-color.has-white-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link { color: var(--color_primary); background-color: transparent; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--color_white); border: 1px solid var(--color_primary); background-color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-primary-background-color { background-color: transparent; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-primary-background-color:hover { color: var(--color_white); border: 1px solid var(--color_primary); background-color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color { background-color: transparent; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:hover { color: var(--color_white); border: 1px solid var(--color_black); background-color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-white-background-color { background-color: transparent; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-white-background-color:hover { color: var(--color_primary); border: 1px solid var(--color_white); background-color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link { position: relative; padding-left: 32px; color: var(--color_primary); background-color: transparent; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); left: 10px; top: 50%; transform: translateY(-50%); display: block; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link:hover { color: var(--color_white); border: 1px solid var(--color_primary); background-color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background { /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color { background-color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color { background-color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color { background-color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-primary-color:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-primary-color:hover { color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-primary-color:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-black-color:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-black-color:hover { color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-black-color:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-white-color:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-white-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right .wp-block-button__link.has-text-color.has-white-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link { position: relative; padding-left: 32px; color: var(--color_primary); background-color: transparent; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); left: 10px; top: 50%; transform: translateY(-50%); display: block; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link:hover { color: var(--color_white); border: 1px solid var(--color_primary); background-color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background { /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color { background-color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color { background-color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color { background-color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-primary-color:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-primary-color:hover { color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-primary-color:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-black-color:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-black-color:hover { color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-black-color:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-white-color:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-white-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-right-down .wp-block-button__link.has-text-color.has-white-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link { position: relative; padding-right: 32px; color: var(--color_primary); background-color: transparent; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); right: 10px; top: 50%; transform: translateY(-50%); display: block; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link:hover { color: var(--color_white); border: 1px solid var(--color_primary); background-color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background { /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color { background-color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color { background-color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color { background-color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-primary-color:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-primary-color:hover { color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-primary-color:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-black-color:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-black-color:hover { color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-black-color:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-white-color:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-white-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left .wp-block-button__link.has-text-color.has-white-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link { position: relative; padding-right: 32px; color: var(--color_primary); background-color: transparent; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); right: 10px; top: 50%; transform: translateY(-50%); display: block; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link:hover { color: var(--color_white); border: 1px solid var(--color_primary); background-color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background { /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color { background-color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-primary-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color { background-color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-black-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color { background-color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color { color: var(--color_primary); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-primary-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-black-color { color: var(--color_black); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-black-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-white-color { color: var(--color_white); /* overwrite mixin */ } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color .has-white-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color { background-color: transparent !important; border: 1px solid var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-primary-background-color:hover { background-color: var(--color_primary) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color { background-color: transparent !important; border: 1px solid var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-black-background-color:hover { background-color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color { background-color: transparent !important; border: 1px solid var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-background.has-white-background-color.has-background.has-white-background-color:hover { background-color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-primary-color { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-black-color { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-white-color { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-primary-color:before { color: var(--color_primary); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-primary-color:hover { color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-primary-color:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-black-color:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-black-color:hover { color: var(--color_white) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-black-color:hover:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-white-color:before { color: var(--color_white); } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-white-color:hover { color: var(--color_black) !important; } .wp-block-buttons > .wp-block-button.is-style-outline-icon-arrow-left-down .wp-block-button__link.has-text-color.has-white-color:hover:before { color: var(--color_black); } .wp-block-buttons > .wp-block-button.has-custom-width { max-width: none; } .wp-block-buttons > .wp-block-button.has-custom-width .wp-block-button__link { width: 100%; } .wp-block-buttons > .wp-block-button.has-custom-width.wp-block-button__width-25 { width: calc(25% - 0.5em); } .wp-block-buttons > .wp-block-button.has-custom-width.wp-block-button__width-50 { width: calc(50% - 0.5em); } .wp-block-buttons > .wp-block-button.has-custom-width.wp-block-button__width-75 { width: calc(75% - 0.5em); } .wp-block-buttons > .wp-block-button.has-custom-width.wp-block-button__width-100 { width: calc(100% - 0.5em); } .wp-block-buttons > .wp-block-button.has-custom-width.wp-block-button__width-100:only-child { margin-right: 0; width: 100%; } /* Idear for animated styling */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-heading.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ h1, h2, h3, h4, h5, h6 { text-transform: uppercase; /* Editor color palette support */ } h1.has-text-align-center, h2.has-text-align-center, h3.has-text-align-center, h4.has-text-align-center, h5.has-text-align-center, h6.has-text-align-center { text-align: center; } h1.has-text-align-left, h2.has-text-align-left, h3.has-text-align-left, h4.has-text-align-left, h5.has-text-align-left, h6.has-text-align-left { text-align: left; } h1.has-text-align-right, h2.has-text-align-right, h3.has-text-align-right, h4.has-text-align-right, h5.has-text-align-right, h6.has-text-align-right { text-align: right; } h1.pxlr-modfier-heading-is-lineheight-none, h2.pxlr-modfier-heading-is-lineheight-none, h3.pxlr-modfier-heading-is-lineheight-none, h4.pxlr-modfier-heading-is-lineheight-none, h5.pxlr-modfier-heading-is-lineheight-none, h6.pxlr-modfier-heading-is-lineheight-none { line-height: 0; } h1.has-text-color, h2.has-text-color, h3.has-text-color, h4.has-text-color, h5.has-text-color, h6.has-text-color { /* overwrite example */ } h1.has-text-color.has-primary-color, h2.has-text-color.has-primary-color, h3.has-text-color.has-primary-color, h4.has-text-color.has-primary-color, h5.has-text-color.has-primary-color, h6.has-text-color.has-primary-color { color: var(--color_primary); /* overwrite example */ } h1.has-text-color.has-black-color, h2.has-text-color.has-black-color, h3.has-text-color.has-black-color, h4.has-text-color.has-black-color, h5.has-text-color.has-black-color, h6.has-text-color.has-black-color { color: var(--color_black); /* overwrite example */ } h1.has-text-color.has-white-color, h2.has-text-color.has-white-color, h3.has-text-color.has-white-color, h4.has-text-color.has-white-color, h5.has-text-color.has-white-color, h6.has-text-color.has-white-color { color: var(--color_white); /* overwrite example */ } h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background { /* overwrite example */ } h1.has-background.has-primary-background-color, h2.has-background.has-primary-background-color, h3.has-background.has-primary-background-color, h4.has-background.has-primary-background-color, h5.has-background.has-primary-background-color, h6.has-background.has-primary-background-color { background-color: var(--color_primary); /* overwrite example */ } h1.has-background.has-primary-background-color .has-primary-color, h2.has-background.has-primary-background-color .has-primary-color, h3.has-background.has-primary-background-color .has-primary-color, h4.has-background.has-primary-background-color .has-primary-color, h5.has-background.has-primary-background-color .has-primary-color, h6.has-background.has-primary-background-color .has-primary-color { color: var(--color_primary); /* overwrite example */ } h1.has-background.has-primary-background-color .has-black-color, h2.has-background.has-primary-background-color .has-black-color, h3.has-background.has-primary-background-color .has-black-color, h4.has-background.has-primary-background-color .has-black-color, h5.has-background.has-primary-background-color .has-black-color, h6.has-background.has-primary-background-color .has-black-color { color: var(--color_black); /* overwrite example */ } h1.has-background.has-primary-background-color .has-white-color, h2.has-background.has-primary-background-color .has-white-color, h3.has-background.has-primary-background-color .has-white-color, h4.has-background.has-primary-background-color .has-white-color, h5.has-background.has-primary-background-color .has-white-color, h6.has-background.has-primary-background-color .has-white-color { color: var(--color_white); /* overwrite example */ } h1.has-background.has-black-background-color, h2.has-background.has-black-background-color, h3.has-background.has-black-background-color, h4.has-background.has-black-background-color, h5.has-background.has-black-background-color, h6.has-background.has-black-background-color { background-color: var(--color_black); /* overwrite example */ } h1.has-background.has-black-background-color .has-primary-color, h2.has-background.has-black-background-color .has-primary-color, h3.has-background.has-black-background-color .has-primary-color, h4.has-background.has-black-background-color .has-primary-color, h5.has-background.has-black-background-color .has-primary-color, h6.has-background.has-black-background-color .has-primary-color { color: var(--color_primary); /* overwrite example */ } h1.has-background.has-black-background-color .has-black-color, h2.has-background.has-black-background-color .has-black-color, h3.has-background.has-black-background-color .has-black-color, h4.has-background.has-black-background-color .has-black-color, h5.has-background.has-black-background-color .has-black-color, h6.has-background.has-black-background-color .has-black-color { color: var(--color_black); /* overwrite example */ } h1.has-background.has-black-background-color .has-white-color, h2.has-background.has-black-background-color .has-white-color, h3.has-background.has-black-background-color .has-white-color, h4.has-background.has-black-background-color .has-white-color, h5.has-background.has-black-background-color .has-white-color, h6.has-background.has-black-background-color .has-white-color { color: var(--color_white); /* overwrite example */ } h1.has-background.has-white-background-color, h2.has-background.has-white-background-color, h3.has-background.has-white-background-color, h4.has-background.has-white-background-color, h5.has-background.has-white-background-color, h6.has-background.has-white-background-color { background-color: var(--color_white); /* overwrite example */ } h1.has-background.has-white-background-color .has-primary-color, h2.has-background.has-white-background-color .has-primary-color, h3.has-background.has-white-background-color .has-primary-color, h4.has-background.has-white-background-color .has-primary-color, h5.has-background.has-white-background-color .has-primary-color, h6.has-background.has-white-background-color .has-primary-color { color: var(--color_primary); /* overwrite example */ } h1.has-background.has-white-background-color .has-black-color, h2.has-background.has-white-background-color .has-black-color, h3.has-background.has-white-background-color .has-black-color, h4.has-background.has-white-background-color .has-black-color, h5.has-background.has-white-background-color .has-black-color, h6.has-background.has-white-background-color .has-black-color { color: var(--color_black); /* overwrite example */ } h1.has-background.has-white-background-color .has-white-color, h2.has-background.has-white-background-color .has-white-color, h3.has-background.has-white-background-color .has-white-color, h4.has-background.has-white-background-color .has-white-color, h5.has-background.has-white-background-color .has-white-color, h6.has-background.has-white-background-color .has-white-color { color: var(--color_white); /* overwrite example */ } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-default.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ p.is-small-text { font-size: 14px; } p.is-regular-text { font-size: 16px; } p.is-large-text { font-size: 36px; } p.is-larger-text { font-size: 48px; } p.has-text-align-center { text-align: center; } p.has-text-align-left { text-align: left; } p.has-text-align-right { text-align: right; } p.has-drop-cap:not(:focus):first-letter { float: left; font-size: 8.4em; line-height: 0.68; font-weight: 100; margin: 0.05em 0.1em 0 0; text-transform: uppercase; font-style: normal; } p.has-drop-cap:not(:focus):after { content: ""; display: table; clear: both; padding-top: 14px; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-image.scss Desc: Frontend style for used Wordpress Block Image Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** WP Gutenberg Block **************************************************************** Note: This is the orignal core block styling with aditionals and changes ********** Keep in mind: The original core block styling is not mobile-first and not SCSS **** Now the most definitions are reordered in SCSS & mobile first structure *********** *********************************************************************************** */ .wp-block-image { max-width: 100%; margin-bottom: 20px; margin-left: 0; margin-right: 0; /* * No Loading Icon for images with this class * This makes sense if you use transparent .png */ } @media (min-width: 768px) { .wp-block-image { margin-bottom: 25px; } } @media (min-width: 1024px) { .wp-block-image { margin-bottom: 30px; } } .wp-block-image.px-img-no-loading { background-image: none; } .wp-block-image.is-style-overflow-right, .wp-block-image.is-style-overflow-left { overflow: hidden; clear: both; } .wp-block-image.is-style-overflow-right img, .wp-block-image.is-style-overflow-left img { max-width: 100%; } @media (min-width: 768px) { .wp-block-image.is-style-overflow-right img, .wp-block-image.is-style-overflow-left img { max-width: calc(1990px / 2); } } @media (min-width: 1024px) { .wp-block-image.is-style-overflow-right img, .wp-block-image.is-style-overflow-left img { max-width: 1990px; } } .wp-block-image.is-style-overflow-right img { float: left; } .wp-block-image.is-style-overflow-left img { float: right; } .wp-block-image.pxlr-modfier-image-is-margin-top-none figure { margin-top: 0; } .wp-block-image.pxlr-modfier-image-is-margin-bottom-none figure { margin-bottom: 0; } .wp-block-image figure img { max-width: 100%; } .wp-block-image figure.size-thumbnail { max-width: 100%; } .wp-block-image figure.size-thumbnail img { max-width: 100%; } .wp-block-image figure.size-medium { max-width: 100%; } .wp-block-image figure.size-medium img { max-width: 100%; } .wp-block-image figure.size-large { max-width: 100%; } .wp-block-image figure.size-large img { max-width: 100%; } .wp-block-image figure.size-full { max-width: 100%; } .wp-block-image figure.size-full img { max-width: 100%; } @media (min-width: 768px) { .wp-block-image figure.size-thumbnail { max-width: 100%; } .wp-block-image figure.size-thumbnail img { max-width: 100%; } .wp-block-image figure.size-medium { max-width: 40%; } .wp-block-image figure.size-medium img { max-width: 100%; } .wp-block-image figure.size-large { max-width: 65%; } .wp-block-image figure.size-large img { max-width: 100%; } .wp-block-image figure.size-full { max-width: 80%; } .wp-block-image figure.size-full img { max-width: 100%; } } @media (min-width: 1024px) { .wp-block-image figure.size-thumbnail { max-width: 100%; } .wp-block-image figure.size-thumbnail img { max-width: 100%; } .wp-block-image figure.size-medium { max-width: 40%; } .wp-block-image figure.size-medium img { max-width: 100%; } .wp-block-image figure.size-large { max-width: 65%; } .wp-block-image figure.size-large img { max-width: 100%; } .wp-block-image figure.size-full { max-width: 80%; } .wp-block-image figure.size-full img { max-width: 100%; } } .wp-block-image.aligncenter { text-align: center; } .wp-block-image .alignfull img, .wp-block-image .alignwide img { width: 100%; } .wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized { display: table; margin-left: 0; margin-right: 0; } .wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image.wp-block-image.is-resized > figcaption { display: table-caption; caption-side: bottom; } .wp-block-image .alignleft { float: left; margin-right: 0; } @media (min-width: 768px) { .wp-block-image .alignleft { margin-right: 25px; } } @media (min-width: 1024px) { .wp-block-image .alignleft { margin-right: 30px; } } .wp-block-image .alignright { float: right; margin-left: 0; } @media (min-width: 768px) { .wp-block-image .alignright { margin-left: 25px; } } @media (min-width: 1024px) { .wp-block-image .alignright { margin-left: 30px; } } .wp-block-image .aligncenter { margin-left: auto; margin-right: auto; } .wp-block-image .is-style-circle-mask img { border-radius: 9999px; } .wp-block-image figcaption { font-size: 0.7rem; } .wp-block-image .aligncenter > figcaption { text-align: center; opacity: 0.5; } .wp-block-image .alignleft > figcaption { text-align: left; opacity: 0.5; } .wp-block-image .alignright > figcaption { text-align: right; opacity: 0.5; } @supports (-webkit-mask-image: none) or (mask-image: none) or (-webkit-mask-image: none) { .is-style-circle-mask img { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); mask-mode: alpha; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; border-radius: none; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-lists.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** WP Gutenberg Block **************************************************************** Note: This is the orignal core block styling with aditionals and changes ********** Keep in mind: The original core block styling is not mobile-first and not SCSS **** Now the most definitions are reordered in SCSS & mobile first structure *********** *********************************************************************************** */ .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list) { padding: 0; margin: 0; margin-bottom: 1.5em; line-height: initial; } .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list) li { list-style-type: none; position: relative; padding-left: 25px; margin-bottom: 5px; } .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list) li:before { position: absolute; content: ""; font-family: "icons"; font-size: 0.95rem; color: var(--color_primary); left: 0; cursor: pointer; top: 3px; } @media (min-width: 1024px) { .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list) li:before { top: 7px; } } @media (min-width: 1440px) { .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list) li:before { top: 10px; } } .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list).is-style-custom-dots { margin: 0; padding: 0; margin-bottom: 1.5em; } .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list).is-style-custom-dots li { list-style-type: none; margin-left: 0px; padding-left: 10px; } .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list).is-style-custom-dots li:before { content: ""; display: inline-block; position: relative; background-color: var(--color_primary); width: 15px; height: 7px; border-radius: 50px; left: -10px; top: -4px; } .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list).is-style-columns-list { margin-bottom: 1.5em; -moz-column-count: 1; -moz-column-gap: 0px; -webkit-column-count: 1; -webkit-column-gap: 0px; column-count: 1; column-gap: 0px; } @media (min-width: 768px) { .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list).is-style-columns-list { -moz-column-count: 2; -moz-column-gap: 25px; -webkit-column-count: 2; -webkit-column-gap: 25px; column-count: 2; column-gap: 25px; } } @media (min-width: 1024px) { .site-main :not(.pxlr-downloads-item-content, .pxlr-archive-filter-wrapper, .pxlr-archive-filter-dropdown-list) > ul:not(.slick-dots, .pxlr-slider-pagination-dots, .pxlr-block-logo-slider-pagination-dots, .pxlr-blog-taxonomy-list).is-style-columns-list { -moz-column-count: 2; -moz-column-gap: 30px; -webkit-column-count: 2; -webkit-column-gap: 30px; column-count: 2; column-gap: 30px; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-gallery.scss Desc: Frontend style for used Wordpress Block Galery Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** * WP Block Gallery - Core Image Listing Style ************************************* *********************************************************************************** * Note: This is the orignal core block styling without aditionals and changes ***** * Keep in mind: The original core block styling is not mobile-first and not SCSS ** * Useful converter to scss https://css2sass.herokuapp.com/ *********************************************************************************** */ .wp-block-gallery, .blocks-gallery-grid { display: flex; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0; } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { margin: 0 1em 1em 0; display: flex; flex-grow: 1; flex-direction: column; justify-content: center; position: relative; align-self: flex-start; width: calc(50% - 1em); } .blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item { margin: 0 1em 1em 0; display: flex; flex-grow: 1; flex-direction: column; justify-content: center; position: relative; align-self: flex-start; width: calc(50% - 1em); } .wp-block-gallery .blocks-gallery-image:nth-of-type(even), .wp-block-gallery .blocks-gallery-item:nth-of-type(even) { margin-right: 0; } .blocks-gallery-grid .blocks-gallery-image:nth-of-type(even), .blocks-gallery-grid .blocks-gallery-item:nth-of-type(even) { margin-right: 0; } .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { margin: 0; height: 100%; } .blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure { margin: 0; height: 100%; } @supports (position: sticky) { .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { display: flex; align-items: flex-end; justify-content: flex-start; } .blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure { display: flex; align-items: flex-end; justify-content: flex-start; } } .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img { display: block; max-width: 100%; height: auto; width: 100%; } .blocks-gallery-grid .blocks-gallery-image img, .blocks-gallery-grid .blocks-gallery-item img { display: block; max-width: 100%; height: auto; width: 100%; } @supports (position: sticky) { .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img { width: auto; } .blocks-gallery-grid .blocks-gallery-image img, .blocks-gallery-grid .blocks-gallery-item img { width: auto; } } .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { position: absolute; bottom: 0; width: 100%; max-height: 100%; overflow: auto; padding: 3em 0.77em 0.7em; color: #fff; text-align: center; font-size: 0.8em; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent); box-sizing: border-box; margin: 0; } .blocks-gallery-grid .blocks-gallery-image figcaption, .blocks-gallery-grid .blocks-gallery-item figcaption { position: absolute; bottom: 0; width: 100%; max-height: 100%; overflow: auto; padding: 3em 0.77em 0.7em; color: #fff; text-align: center; font-size: 0.8em; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent); box-sizing: border-box; margin: 0; } .wp-block-gallery .blocks-gallery-image figcaption img, .wp-block-gallery .blocks-gallery-item figcaption img { display: inline; } .blocks-gallery-grid .blocks-gallery-image figcaption img, .blocks-gallery-grid .blocks-gallery-item figcaption img { display: inline; } .wp-block-gallery figcaption, .blocks-gallery-grid figcaption { flex-grow: 1; } .wp-block-gallery.is-cropped .blocks-gallery-image, .wp-block-gallery.is-cropped .blocks-gallery-item { align-self: inherit; } .blocks-gallery-grid.is-cropped .blocks-gallery-image, .blocks-gallery-grid.is-cropped .blocks-gallery-item { align-self: inherit; } .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img { width: 100%; } .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img { width: 100%; } .blocks-gallery-grid.is-cropped .blocks-gallery-image a, .blocks-gallery-grid.is-cropped .blocks-gallery-image img { width: 100%; } .blocks-gallery-grid.is-cropped .blocks-gallery-item a, .blocks-gallery-grid.is-cropped .blocks-gallery-item img { width: 100%; } @supports (position: sticky) { .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img { height: 100%; flex: 1; -o-object-fit: cover; object-fit: cover; } .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img { height: 100%; flex: 1; -o-object-fit: cover; object-fit: cover; } .blocks-gallery-grid.is-cropped .blocks-gallery-image a, .blocks-gallery-grid.is-cropped .blocks-gallery-image img { height: 100%; flex: 1; -o-object-fit: cover; object-fit: cover; } .blocks-gallery-grid.is-cropped .blocks-gallery-item a, .blocks-gallery-grid.is-cropped .blocks-gallery-item img { height: 100%; flex: 1; -o-object-fit: cover; object-fit: cover; } } .wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item { width: 100%; margin-right: 0; } .blocks-gallery-grid.columns-1 .blocks-gallery-image, .blocks-gallery-grid.columns-1 .blocks-gallery-item { width: 100%; margin-right: 0; } @media (min-width: 600px) { .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item { width: calc(33.3333333333% - 0.6666666667em); margin-right: 1em; } .blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item { width: calc(33.3333333333% - 0.6666666667em); margin-right: 1em; } .wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item { width: calc(25% - 0.75em); margin-right: 1em; } .blocks-gallery-grid.columns-4 .blocks-gallery-image, .blocks-gallery-grid.columns-4 .blocks-gallery-item { width: calc(25% - 0.75em); margin-right: 1em; } .wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item { width: calc(20% - 0.8em); margin-right: 1em; } .blocks-gallery-grid.columns-5 .blocks-gallery-image, .blocks-gallery-grid.columns-5 .blocks-gallery-item { width: calc(20% - 0.8em); margin-right: 1em; } .wp-block-gallery.columns-6 .blocks-gallery-image, .wp-block-gallery.columns-6 .blocks-gallery-item { width: calc(16.6666666667% - 0.8333333333em); margin-right: 1em; } .blocks-gallery-grid.columns-6 .blocks-gallery-image, .blocks-gallery-grid.columns-6 .blocks-gallery-item { width: calc(16.6666666667% - 0.8333333333em); margin-right: 1em; } .wp-block-gallery.columns-7 .blocks-gallery-image, .wp-block-gallery.columns-7 .blocks-gallery-item { width: calc(14.2857142857% - 0.8571428571em); margin-right: 1em; } .blocks-gallery-grid.columns-7 .blocks-gallery-image, .blocks-gallery-grid.columns-7 .blocks-gallery-item { width: calc(14.2857142857% - 0.8571428571em); margin-right: 1em; } .wp-block-gallery.columns-8 .blocks-gallery-image, .wp-block-gallery.columns-8 .blocks-gallery-item { width: calc(12.5% - 0.875em); margin-right: 1em; } .blocks-gallery-grid.columns-8 .blocks-gallery-image, .blocks-gallery-grid.columns-8 .blocks-gallery-item { width: calc(12.5% - 0.875em); margin-right: 1em; } .wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n), .wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n) { margin-right: 0; } .blocks-gallery-grid.columns-1 .blocks-gallery-image:nth-of-type(1n), .blocks-gallery-grid.columns-1 .blocks-gallery-item:nth-of-type(1n) { margin-right: 0; } .wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n) { margin-right: 0; } .blocks-gallery-grid.columns-2 .blocks-gallery-image:nth-of-type(2n), .blocks-gallery-grid.columns-2 .blocks-gallery-item:nth-of-type(2n) { margin-right: 0; } .wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n), .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n) { margin-right: 0; } .blocks-gallery-grid.columns-3 .blocks-gallery-image:nth-of-type(3n), .blocks-gallery-grid.columns-3 .blocks-gallery-item:nth-of-type(3n) { margin-right: 0; } .wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n), .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n) { margin-right: 0; } .blocks-gallery-grid.columns-4 .blocks-gallery-image:nth-of-type(4n), .blocks-gallery-grid.columns-4 .blocks-gallery-item:nth-of-type(4n) { margin-right: 0; } .wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n), .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n) { margin-right: 0; } .blocks-gallery-grid.columns-5 .blocks-gallery-image:nth-of-type(5n), .blocks-gallery-grid.columns-5 .blocks-gallery-item:nth-of-type(5n) { margin-right: 0; } .wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n), .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n) { margin-right: 0; } .blocks-gallery-grid.columns-6 .blocks-gallery-image:nth-of-type(6n), .blocks-gallery-grid.columns-6 .blocks-gallery-item:nth-of-type(6n) { margin-right: 0; } .wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n), .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n) { margin-right: 0; } .blocks-gallery-grid.columns-7 .blocks-gallery-image:nth-of-type(7n), .blocks-gallery-grid.columns-7 .blocks-gallery-item:nth-of-type(7n) { margin-right: 0; } .wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n), .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n) { margin-right: 0; } .blocks-gallery-grid.columns-8 .blocks-gallery-image:nth-of-type(8n), .blocks-gallery-grid.columns-8 .blocks-gallery-item:nth-of-type(8n) { margin-right: 0; } } .wp-block-gallery .blocks-gallery-image:last-child, .wp-block-gallery .blocks-gallery-item:last-child { margin-right: 0; } .blocks-gallery-grid .blocks-gallery-image:last-child, .blocks-gallery-grid .blocks-gallery-item:last-child { margin-right: 0; } .wp-block-gallery.alignleft, .wp-block-gallery.alignright { max-width: 420px; width: 100%; } .blocks-gallery-grid.alignleft, .blocks-gallery-grid.alignright { max-width: 420px; width: 100%; } .wp-block-gallery.aligncenter .blocks-gallery-item figure, .blocks-gallery-grid.aligncenter .blocks-gallery-item figure { justify-content: center; } /* *********************************************************************************** * WP Block Gallery -- Custom Slider style (by Pixelizer) ************************** *********************************************************************************** */ .wp-block-gallery { margin: 0; padding: 0; margin-left: 0px; margin-right: 0px; margin-top: 30px; list-style: none; /* *********************************************************************************** * WP Block Gallery ---WITH--- Slider style **************************************** *********************************************************************************** */ /* *********************************************************************************** *********************************************************************************** *********************************************************************************** A gallery slider is curretly not availabe, re-implementation is planed for pxlr version 1.2 *********************************************************************************** *********************************************************************************** *********************************************************************************** */ } .wp-block-gallery li { padding-left: 0px; margin-bottom: 0px; background-image: none; display: inline; } .wp-block-gallery figcaption { background: var(--color_white); color: var(--color_black); font-style: italic; font-size: 0.62rem; padding: 5px 8px 5px 8px; display: inline-block; width: inherit; text-align: right; border-radius: 0 0 3px 3px; } .wp-block-gallery img { border-radius: 3px; } .wp-block-gallery.alignright { max-width: inherit; } .wp-block-gallery.alignleft { max-width: inherit; } .wp-block-gallery.is-style-slider-gallery { max-width: inherit; position: relative; padding-bottom: 30px; margin-bottom: 30px; margin-top: 0; float: none; width: 100%; max-width: 1024px; } .wp-block-gallery.is-style-slider-gallery.alignright, .wp-block-gallery.is-style-slider-gallery.alignleft, .wp-block-gallery.is-style-slider-gallery.aligncenter { float: none; } .wp-block-gallery.is-style-slider-gallery ul { margin: 0; padding: 0; } .wp-block-gallery.is-style-slider-gallery ul li { padding-left: 0; margin-bottom: 0; background-image: none; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery { width: 100%; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery .blocks-gallery-item figure { padding-bottom: 30px; /*Loading Spinner*/ } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery .blocks-gallery-item figcaption { background: transparent; color: var(--color_black); font-style: italic; font-size: 0.62rem; display: inline-block; text-align: left; border-radius: 0; position: absolute; bottom: -10px; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery.slick-slider { /* Default next/prev not needed, we have a custom navigation, * and if .wp-content-slider-gallery-navigation this is not init in the right time depends on loading problems we show dots only */ } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery.slick-slider.slick-dotted { margin-bottom: 50px; margin-top: 20px; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery.slick-slider .slick-dots { text-align: left; /*Default is center*/ } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery.slick-slider .slick-dots li { margin: 0; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery.slick-slider .slick-dots li button:before { content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 12px; line-height: 20px; text-align: center; color: var(--color_black); opacity: 0.25; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery.slick-slider .slick-dots li.slick-active button:before { color: var(--color_black); opacity: 0.5; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation { width: 90px; height: 20px; position: absolute; right: 0px; bottom: 15px; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .slick-prev, .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .slick-next { width: 19px; height: 16px; transform: translate(0, 0); top: 0; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .wp-content-slider-gallery-count { position: absolute; left: 35px; top: -1px; font-size: 0.76rem; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .slick-prev { left: 0; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .slick-prev::before { position: static; content: ""; font-family: "icons"; font-size: 1.1rem; color: var(--color_neutral-70); display: inline-block; opacity: 0.9; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .slick-prev:hover::before { opacity: 1; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .slick-next { right: 0; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .slick-next::before { position: static; content: ""; font-family: "icons"; font-size: 1.1rem; color: var(--color_neutral-70); display: inline-block; opacity: 0.9; } .wp-block-gallery.is-style-slider-gallery .wp-content-slider-gallery-navigation .slick-next:hover::before { opacity: 1; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-video.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** WP Gutenberg Block **************************************************************** Note: This is the orignal core block styling with aditionals and changes ********** Keep in mind: The original core block styling is not mobile-first and not SCSS **** Now the most definitions are reordered in SCSS & mobile first structure *********** Useful converter to scss https://css2sass.herokuapp.com/ *********************************************************************************** */ .wp-block-video { margin: 0 0 1em 0; } .wp-block-video video { width: 100%; } .wp-block-video.aligncenter { text-align: center; } .wp-block-video figcaption { margin-top: 0.5em; margin-bottom: 1em; } @supports (position: sticky) { .wp-block-video [poster] { -o-object-fit: cover; object-fit: cover; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-quote.scss Desc: Frontend style for used Wordpress Block quote Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** WP Gutenberg Block **************************************************************** Note: This is the orignal core block styling with aditionals and changes ********** Keep in mind: The original core block styling is not mobile-first and not SCSS **** Now the most definitions are reordered in SCSS & mobile first structure *********** *********************************************************************************** */ .wp-block-quote { /* Smart Version */ border-left: 3px solid var(--color_primary); font-family: Georgia, Times, "Times New Roman", serif; font-size: 1.25rem; font-style: italic; line-height: 1.8rem; padding: 1rem 2rem; position: relative; z-index: 0; margin: 20px 0 20px 0; /* Bold version */ /* Simple version*/ } @media (min-width: 768px) { .wp-block-quote { margin: 25px 0 25px 0; } } @media (min-width: 1024px) { .wp-block-quote { margin: 30px 0 30px 0; } } .wp-block-quote:after { content: '"'; position: absolute; top: 50%; transform: translateY(-50%); left: -13px; font-family: Georgia, Times, "Times New Roman", serif; font-style: normal; font-size: 50px; text-align: center; color: var(--color_primary); background-color: var(--color_white); line-height: 25px; padding-top: 25px; border-radius: 50px; } .wp-block-quote p { margin-top: 0; margin-bottom: 15px; } .wp-block-quote cite { display: block; font-size: 0.75rem; line-height: 1.8rem; margin-top: 1rem; color: var(--color_neutral-80); } .wp-block-quote cite::before { content: "~"; position: relative; margin-right: 5px; } .wp-block-quote.is-style-large { font-size: 1.8rem; line-height: 2rem; } .wp-block-quote.is-style-large cite { font-size: 1rem; line-height: 1.9rem; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-pullquote.scss Desc: Frontend style for used Wordpress Block pullquote Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** WP Gutenberg Block **************************************************************** Note: This is the orignal core block styling with aditionals and changes ********** Keep in mind: The original core block styling is not mobile-first and not SCSS **** Now the most definitions are reordered in SCSS & mobile first structure *********** *********************************************************************************** */ .wp-block-pullquote { margin: 0 0 1em 0; padding: 3em 0; text-align: center; border-radius: 3px; margin: 20px 0 20px 0; } @media (min-width: 768px) { .wp-block-pullquote { margin: 25px 0 25px 0; } } @media (min-width: 1024px) { .wp-block-pullquote { margin: 30px 0 30px 0; } } .wp-block-pullquote blockquote { max-width: 60%; margin: 0 auto; } .wp-block-pullquote.alignleft, .wp-block-pullquote.alignright { max-width: 420px; } .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p { font-size: 1.25em; } .wp-block-pullquote p { font-size: 1.75em; line-height: 1.2; font-family: Georgia, Times, "Times New Roman", serif; font-style: italic; position: relative; display: inline-block; } .wp-block-pullquote p::after { content: '"'; position: absolute; left: 50%; font-family: Georgia, Times, "Times New Roman", serif; font-style: normal; font-size: 50px; text-align: center; color: var(--color_primary); padding-left: 0; padding-right: 0; border-radius: 50px; bottom: -30px; line-height: 1; height: 20px; } .wp-block-pullquote cite, .wp-block-pullquote footer { position: relative; font-size: 0.8rem; font-family: Georgia, Times, "Times New Roman", serif; font-style: italic; display: inline-block; margin-bottom: 40px; } .wp-block-pullquote .has-text-color a { color: inherit; } .wp-block-pullquote:not(.is-style-solid-color) { background: none; border: 1px solid transparent; } .wp-block-pullquote.is-style-solid-color { border: none; } .wp-block-pullquote.is-style-solid-color blockquote { margin-left: auto; margin-right: auto; max-width: 60%; } .wp-block-pullquote.is-style-solid-color blockquote p { margin-top: 0; margin-bottom: 0; } .wp-block-pullquote.is-style-solid-color blockquote p::after { color: var(--color_white); } .wp-block-pullquote.is-style-solid-color blockquote cite { text-transform: none; font-style: normal; top: 40px; margin-bottom: 40px; } .wp-block-pullquote cite { color: inherit; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-table.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** WP Gutenberg Block **************************************************************** Note: This is the orignal core block styling with aditionals and changes ********** Keep in mind: The original core block styling is not mobile-first and not SCSS **** Now the most definitions are reordered in SCSS & mobile first structure *********** Useful converter to scss https://css2sass.herokuapp.com/ *********************************************************************************** */ .wp-block-table { margin: 0 0 1em 0; overflow-x: auto; border-radius: 3px; /* Make Table Responsive */ } .wp-block-table table { border-collapse: collapse; width: 100%; background-color: var(--color_white); } .wp-block-table .has-fixed-layout { table-layout: fixed; width: 100%; } .wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th { word-break: break-word; } .wp-block-table.alignleft, .wp-block-table.aligncenter, .wp-block-table.alignright { display: table; width: auto; } .wp-block-table.alignleft td, .wp-block-table.alignleft th { word-break: break-word; } .wp-block-table.aligncenter td, .wp-block-table.aligncenter th { word-break: break-word; } .wp-block-table.alignright td, .wp-block-table.alignright th { word-break: break-word; } .wp-block-table td, .wp-block-table th { padding: 15px; } .wp-block-table td.has-text-align-left, .wp-block-table th.has-text-align-left { text-align: left; } .wp-block-table td.has-text-align-right, .wp-block-table th.has-text-align-right { text-align: right; } .wp-block-table td.has-text-align-center, .wp-block-table th.has-text-align-center { text-align: center; } .wp-block-table th { background-color: var(--color_primary); color: var(--color_white); } .wp-block-table .has-subtle-light-gray-background-color { background-color: #f3f4f5; } .wp-block-table .has-subtle-pale-green-background-color { background-color: #e9fbe5; } .wp-block-table .has-subtle-pale-blue-background-color { background-color: #e7f5fe; } .wp-block-table .has-subtle-pale-pink-background-color { background-color: #fcf0ef; } .wp-block-table.is-style-stripes { border-spacing: 0; border-collapse: inherit; border-bottom: 1px solid #f0f0f0; } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: #f0f0f0; } .wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd) { background-color: #f3f4f5; } .wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd) { background-color: #e9fbe5; } .wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd) { background-color: #e7f5fe; } .wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd) { background-color: #fcf0ef; } .wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes td { border-color: transparent; } .wp-block-table .has-border-color > *, .wp-block-table .has-border-color tr, .wp-block-table .has-border-color th, .wp-block-table .has-border-color td { border-color: inherit; } .wp-block-table table[style*=border-style] > *, .wp-block-table table[style*=border-style] tr, .wp-block-table table[style*=border-style] th, .wp-block-table table[style*=border-style] td { border-style: inherit; } .wp-block-table table[style*=border-width] > *, .wp-block-table table[style*=border-width] tr, .wp-block-table table[style*=border-width] th, .wp-block-table table[style*=border-width] td { border-width: inherit; } @media (min-width: 320px) { .wp-block-table { overflow-x: auto; position: relative; /* Show a indicator so that the user see that he can scroll inside the table Icons: https://lonewolfonline.net/html-character-codes-ascii-entity-unicode-symbols/ */ } .wp-block-table table { white-space: nowrap; margin-top: 30px; /*Make space for the indicator*/ } .wp-block-table table th { border-top: 1px solid var(--color-neutral-30); } .wp-block-table table.has-fixed-layout { table-layout: inherit; } .wp-block-table.aligncenter, .wp-block-table.alignleft, .wp-block-table.alignright { display: block; } .wp-block-table:before { content: "➜ Swipe me"; display: block; position: absolute; height: 30px; left: 0; padding: 7px 10px; font-size: 0.65rem; /* Trigger Animation (animations.scss) */ animation: bounceRight 2s infinite; -webkit-animation: bounceRight 2s infinite; -moz-animation: bounceRight 2s infinite; -o-animation: bounceRight 2s infinite; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-embed.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css Important Note: This button styles are NOT based on original Important: This file is modified But it is not converted in scss writing type */ .wp-block-embed.alignleft, .wp-block-embed.alignright { max-width: 360px; width: 100%; } .wp-block[data-align=left] > [data-type="core/embed"] .wp-block-embed__wrapper, .wp-block[data-align=right] > [data-type="core/embed"] .wp-block-embed__wrapper, .wp-block-embed.alignleft .wp-block-embed__wrapper, .wp-block-embed.alignright .wp-block-embed__wrapper { min-width: 280px; } .wp-block-cover .wp-block-embed { min-width: 320px; min-height: 240px; } .wp-block-embed { margin: 0 0 1em 0; overflow-wrap: break-word; } .wp-block-embed figcaption { margin-top: 0.5em; margin-bottom: 1em; } .wp-block-embed iframe { max-width: 100%; border-radius: 3px; } .wp-block-embed__wrapper { position: relative; } .wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 50%; } .wp-embed-responsive .wp-has-aspect-ratio iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; } .wp-embed-responsive .wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { padding-top: 42.85%; } .wp-embed-responsive .wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { padding-top: 50%; } .wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; } .wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { padding-top: 75%; } .wp-embed-responsive .wp-embed-aspect-1-1 .wp-block-embed__wrapper::before { padding-top: 100%; } .wp-embed-responsive .wp-embed-aspect-9-16 .wp-block-embed__wrapper::before { padding-top: 177.77%; } .wp-embed-responsive .wp-embed-aspect-1-2 .wp-block-embed__wrapper::before { padding-top: 200%; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-separator.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ /* *********************************************************************************** WP Gutenberg Block **************************************************************** Note: This is the orignal core block styling with aditionals and changes ********** Keep in mind: The original core block styling is not mobile-first and not SCSS **** Now the most definitions are reordered in SCSS & mobile first structure *********** *********************************************************************************** */ .wp-block-separator { border-top: 1px solid currentColor; width: 250px; } .wp-block-separator.is-style-wide { border-bottom-width: 1px; width: 100%; } .wp-block-separator.is-style-dots { background: none !important; border: none; text-align: center; width: none; line-height: 1; height: auto; } .wp-block-separator.is-style-dots::before { content: "···"; color: currentColor; font-size: 1.5em; letter-spacing: 2em; /*rtl:ignore*/ padding-left: 2em; font-family: serif; } .wp-block-separator.is-style-wideline-indicator { width: 100%; border-top: 1px solid currentColor; } .wp-block-separator.is-style-wideline-indicator:after { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_black); top: -18px; left: 50%; transform: translateX(-50%); background-color: var(--color_white); border-radius: 50px; width: 50px; height: 33px; display: block; } .wp-block-separator.is-style-wideline-indicator.has-primary-background-color:after, .wp-block-separator.is-style-wideline-indicator.has-primary-color:after { color: var(--color_primary); } .wp-block-separator.is-style-shortline-indicator { width: 250px; border-top: 1px solid currentColor; } .wp-block-separator.is-style-shortline-indicator:after { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_black); top: -18px; left: 50%; transform: translateX(-50%); background-color: var(--color_white); border-radius: 50px; width: 50px; height: 33px; display: block; } .wp-block-separator.is-style-shortline-indicator.has-primary-background-color:after, .wp-block-separator.is-style-shortline-indicator.has-primary-color:after { color: var(--color_primary); } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-media-text.scss Desc: Frontend style for used Wordpress Block Default Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ .wp-block-media-text { /*!rtl:begin:ignore*/ direction: ltr; /*!rtl:end:ignore*/ display: grid; grid-template-columns: 50% 1fr; grid-template-rows: auto; } .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; } .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media { align-self: start; } .wp-block-media-text .wp-block-media-text__content, .wp-block-media-text .wp-block-media-text__media, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media { align-self: center; } .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media { align-self: end; } .wp-block-media-text .wp-block-media-text__media { /*!rtl:begin:ignore*/ grid-column: 1; grid-row: 1; /*!rtl:end:ignore*/ margin: 0; } .wp-block-media-text .wp-block-media-text__content { direction: ltr; /*!rtl:begin:ignore*/ grid-column: 2; grid-row: 1; /*!rtl:end:ignore*/ padding: 0 8% 0 8%; word-break: break-word; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { /*!rtl:begin:ignore*/ grid-column: 2; grid-row: 1; /*!rtl:end:ignore*/ } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { /*!rtl:begin:ignore*/ grid-column: 1; grid-row: 1; /*!rtl:end:ignore*/ } .wp-block-media-text__media img, .wp-block-media-text__media video { height: auto; max-width: unset; width: 100%; vertical-align: middle; } .wp-block-media-text.is-image-fill .wp-block-media-text__media { height: 100%; min-height: 250px; background-size: cover; } .wp-block-media-text.is-image-fill .wp-block-media-text__media > a { display: block; height: 100%; } .wp-block-media-text.is-image-fill .wp-block-media-text__media img { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* * Here we here not able to use a mobile first CSS approach. * Custom widths are set using inline styles, and on mobile, * we need 100% width, so we use important to overwrite the inline style. * If the style were set on mobile first, on desktop styles, * we would have no way of setting the style again to the inline style. */ @media (max-width: 600px) { .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100% !important; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { grid-column: 1; grid-row: 1; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { grid-column: 1; grid-row: 2; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-block-cover.scss Desc: Frontend style for used Wordpress Block cover Note: We disabled all CORE Gutenberg Blocks styling and rebuild and modify this by our own Original styles: /wp-includes/css/dist/block-library/style.css */ .wp-block-cover .has-primary-background-color { background-color: var(--color_primary); mix-blend-mode: multiply; } .wp-block-cover .has-black-background-color { background-color: var(--color_black); mix-blend-mode: multiply; } .wp-block-cover .has-white-background-color { background-color: var(--color_white); mix-blend-mode: multiply; } .wp-block-cover .has-anthracite-background-color { background-color: var(--color_anthracite); mix-blend-mode: multiply; } .wp-block-cover .has-neutral-70-background-color { background-color: var(--color_neutral-70); mix-blend-mode: multiply; } .wp-block-cover .has-neutral-50-background-color { background-color: var(--color_neutral-50); mix-blend-mode: multiply; } .wp-block-cover .has-neutral-30-background-color { background-color: var(--color_neutral-30); mix-blend-mode: multiply; } .wp-block-cover .has-neutral-15-background-color { background-color: var(--color_neutral-15); mix-blend-mode: multiply; } .wp-block-cover .has-neutral-10-background-color { background-color: var(--color_neutral-10); mix-blend-mode: multiply; } .wp-block-cover .has-neutral-5-background-color { background-color: var(--color_neutral-5); mix-blend-mode: multiply; } .wp-block-cover img.wp-block-cover__image-background { filter: grayscale(100%) brightness(1.3) contrast(0.9) blur(0px); } /* *********************************************************************************** WP Gutenberg Block **************************************************************** Note: This is the orignal core block styling with aditionals and changes ********** Keep in mind: The original core block styling is not mobile-first and not SCSS **** Now the most definitions are reordered in SCSS & mobile first structure *********** *********************************************************************************** */ .wp-block-cover-image, .wp-block-cover { position: relative; background-size: cover; background-position: center center; min-height: 430px; width: 100%; display: flex; justify-content: center; align-items: center; padding: 1em; box-sizing: border-box; /** * Set a default background color for has-background-dim _unless_ it includes another * background-color class (e.g. has-green-background-color). The presence of another * background-color class implies that another style will provide the background color * for the overlay. * * See: * - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545 * - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545 */ } .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax { background-attachment: fixed; } @supports (-webkit-overflow-scrolling: touch) { .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax { background-attachment: scroll; } } @media (prefers-reduced-motion: reduce) { .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax { background-attachment: scroll; } } .wp-block-cover-image.is-repeated, .wp-block-cover.is-repeated { background-repeat: repeat; background-size: auto; } .wp-block-cover-image.has-background-dim:not([class*=-background-color]), .wp-block-cover-image .has-background-dim:not([class*=-background-color]), .wp-block-cover.has-background-dim:not([class*=-background-color]), .wp-block-cover .has-background-dim:not([class*=-background-color]) { background-color: #000; } .wp-block-cover-image.has-background-dim::before, .wp-block-cover-image .has-background-dim::before, .wp-block-cover.has-background-dim::before, .wp-block-cover .has-background-dim::before { content: ""; background-color: inherit; } .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover-image .has-background-dim:not(.has-background-gradient)::before, .wp-block-cover-image .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover .has-background-dim:not(.has-background-gradient)::before, .wp-block-cover .wp-block-cover__gradient-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; opacity: 0.5; } .wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background { opacity: 0.1; } .wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background { opacity: 0.2; } .wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background { opacity: 0.3; } .wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background { opacity: 0.4; } .wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background { opacity: 0.5; } .wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background { opacity: 0.6; } .wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background { opacity: 0.7; } .wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background { opacity: 0.8; } .wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background { opacity: 0.9; } .wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before, .wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before, .wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background { opacity: 1; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0 { opacity: 0; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10 { opacity: 0.1; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-20 { opacity: 0.2; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-30 { opacity: 0.3; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-40 { opacity: 0.4; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-50 { opacity: 0.5; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-60 { opacity: 0.6; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-70 { opacity: 0.7; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-80 { opacity: 0.8; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-90 { opacity: 0.9; } .wp-block-cover-image .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100, .wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-100 { opacity: 1; } .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, .wp-block-cover.alignleft, .wp-block-cover.alignright { max-width: 420px; width: 100%; } .wp-block-cover-image::after, .wp-block-cover::after { display: block; content: ""; font-size: 0; min-height: inherit; } @supports (position: sticky) { .wp-block-cover-image::after, .wp-block-cover::after { content: none; } } .wp-block-cover-image.aligncenter, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, .wp-block-cover.aligncenter, .wp-block-cover.alignleft, .wp-block-cover.alignright { display: flex; } .wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container { width: 100%; z-index: 1; color: #fff; } .wp-block-cover-image.is-light .wp-block-cover__inner-container, .wp-block-cover.is-light .wp-block-cover__inner-container { color: #000; } .wp-block-cover-image p:not(.has-text-color), .wp-block-cover-image h1:not(.has-text-color), .wp-block-cover-image h2:not(.has-text-color), .wp-block-cover-image h3:not(.has-text-color), .wp-block-cover-image h4:not(.has-text-color), .wp-block-cover-image h5:not(.has-text-color), .wp-block-cover-image h6:not(.has-text-color), .wp-block-cover p:not(.has-text-color), .wp-block-cover h1:not(.has-text-color), .wp-block-cover h2:not(.has-text-color), .wp-block-cover h3:not(.has-text-color), .wp-block-cover h4:not(.has-text-color), .wp-block-cover h5:not(.has-text-color), .wp-block-cover h6:not(.has-text-color) { color: inherit; } .wp-block-cover-image.is-position-top-left, .wp-block-cover.is-position-top-left { align-items: flex-start; justify-content: flex-start; } .wp-block-cover-image.is-position-top-center, .wp-block-cover.is-position-top-center { align-items: flex-start; justify-content: center; } .wp-block-cover-image.is-position-top-right, .wp-block-cover.is-position-top-right { align-items: flex-start; justify-content: flex-end; } .wp-block-cover-image.is-position-center-left, .wp-block-cover.is-position-center-left { align-items: center; justify-content: flex-start; } .wp-block-cover-image.is-position-center-center, .wp-block-cover.is-position-center-center { align-items: center; justify-content: center; } .wp-block-cover-image.is-position-center-right, .wp-block-cover.is-position-center-right { align-items: center; justify-content: flex-end; } .wp-block-cover-image.is-position-bottom-left, .wp-block-cover.is-position-bottom-left { align-items: flex-end; justify-content: flex-start; } .wp-block-cover-image.is-position-bottom-center, .wp-block-cover.is-position-bottom-center { align-items: flex-end; justify-content: center; } .wp-block-cover-image.is-position-bottom-right, .wp-block-cover.is-position-bottom-right { align-items: flex-end; justify-content: flex-end; } .wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container, .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container { margin: 0; width: auto; } .wp-block-cover-image img.wp-block-cover__image-background, .wp-block-cover-image video.wp-block-cover__video-background, .wp-block-cover img.wp-block-cover__image-background, .wp-block-cover video.wp-block-cover__video-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; width: 100%; height: 100%; max-width: none; max-height: none; -o-object-fit: cover; object-fit: cover; outline: none; border: none; box-shadow: none; } .wp-block-cover__video-background { z-index: 0; } .wp-block-cover__image-background { z-index: 0; } section.wp-block-cover-image h2, .wp-block-cover-image-text, .wp-block-cover-text { color: #fff; } section.wp-block-cover-image h2 a, section.wp-block-cover-image h2 a:hover, section.wp-block-cover-image h2 a:focus, section.wp-block-cover-image h2 a:active, .wp-block-cover-image-text a, .wp-block-cover-image-text a:hover, .wp-block-cover-image-text a:focus, .wp-block-cover-image-text a:active, .wp-block-cover-text a, .wp-block-cover-text a:hover, .wp-block-cover-text a:focus, .wp-block-cover-text a:active { color: #fff; } .wp-block-cover-image .wp-block-cover.has-left-content { justify-content: flex-start; } .wp-block-cover-image .wp-block-cover.has-right-content { justify-content: flex-end; } section.wp-block-cover-image.has-left-content > h2, .wp-block-cover-image.has-left-content .wp-block-cover-image-text, .wp-block-cover.has-left-content .wp-block-cover-text { margin-left: 0; text-align: left; } section.wp-block-cover-image.has-right-content > h2, .wp-block-cover-image.has-right-content .wp-block-cover-image-text, .wp-block-cover.has-right-content .wp-block-cover-text { margin-right: 0; text-align: right; } section.wp-block-cover-image > h2, .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text { font-size: 2em; line-height: 1.25; z-index: 1; margin-bottom: 0; max-width: 840px; padding: 0.44em; text-align: center; } .wp-block-cover { min-width: 320px; min-height: 240px; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: wp-color-palette.scss Desc: wp-color-palette Note: this classes are defined in in inc/template-functions.php -> pxlr_theme_gutenberg_support */ .has-text-color { color: var(--color_black); } .has-text-color.has-primary-color { color: var(--color_primary); } .has-text-color.has-black-color { color: var(--color_black); } .has-text-color.has-white-color { color: var(--color_white); } .has-text-color.has-anthracite-color { color: var(--color_anthracite); } .has-text-color.has-neutral-70-color { color: var(--color_neutral-70); } .has-text-color.has-neutral-50-color { color: var(--color_neutral-50); } .has-text-color.has-neutral-30-color { color: var(--color_neutral-30); } .has-text-color.has-neutral-15-color { color: var(--color_neutral-15); } .has-text-color.has-neutral-10-color { color: var(--color_neutral-10); } .has-text-color.has-neutral-5-color { color: var(--color_neutral-5); } .has-background { background-color: transparent; } .has-background.has-primary-background-color { background-color: var(--color_primary); } .has-background.has-black-background-color { background-color: var(--color_black); } .has-background.has-white-background-color { background-color: var(--color_white); } .has-background.has-anthracite-background-color { background-color: var(--color_anthracite); } .has-background.has-neutral-70-background-color { background-color: var(--color_neutral-70); } .has-background.has-neutral-50-background-color { background-color: var(--color_neutral-50); } .has-background.has-neutral-30-background-color { background-color: var(--color_neutral-30); } .has-background.has-neutral-15-background-color { background-color: var(--color_neutral-15); } .has-background.has-neutral-10-background-color { background-color: var(--color_neutral-10); } .has-background.has-neutral-5-background-color { background-color: var(--color_neutral-5); } /* custom gutenberg blocks */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: apxlr-dvanced-list.scss Desc: Lazy Blocks - Custom Blocks Constructor - Advanced list */ .wp-block-lazyblock-pxlr-advanced-list .pxlr-advanced-list-title-wrapper { margin-bottom: 15px; } .wp-block-lazyblock-pxlr-advanced-list .pxlr-advanced-list-title-wrapper .pxlr-advanced-list-title .wp-block-heading { margin-bottom: 0; } .wp-block-lazyblock-pxlr-advanced-list .pxlr-advanced-list-title-wrapper .pxlr-advanced-list-subtitle { color: var(--color_neutral-90); font-size: 0.75rem; } @media (min-width: 768px) { .wp-block-lazyblock-pxlr-advanced-list .pxlr-advanced-list-title-wrapper .pxlr-advanced-list-subtitle { font-size: 0.8125rem; } } @media (min-width: 1024px) { .wp-block-lazyblock-pxlr-advanced-list .pxlr-advanced-list-title-wrapper .pxlr-advanced-list-subtitle { font-size: 0.7777777778rem; } } @media (min-width: 1290px) { .wp-block-lazyblock-pxlr-advanced-list .pxlr-advanced-list-title-wrapper .pxlr-advanced-list-subtitle { font-size: 0.8888888889rem; } } @media (min-width: 1440px) { .wp-block-lazyblock-pxlr-advanced-list .pxlr-advanced-list-title-wrapper .pxlr-advanced-list-subtitle { font-size: 1rem; } } @media (min-width: 1920px) { .wp-block-lazyblock-pxlr-advanced-list .pxlr-advanced-list-title-wrapper .pxlr-advanced-list-subtitle { font-size: 1.1111111111rem; } } .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li { /* Start - overwrite wp-list*/ /* End - overwrite wp-list*/ /*Default Style (.is-style-default), not outlined or filled*/ } .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li::before { display: none; } .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item { border: 1px solid var(--color_neutral-rgba-30); border-radius: 10px; padding: 15px; margin-bottom: 15px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-content .pxlr-advanced-list-item-subtitle { color: var(--color_neutral-90); font-size: 0.6875rem; } @media (min-width: 768px) { .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-content .pxlr-advanced-list-item-subtitle { font-size: 0.75rem; } } @media (min-width: 1024px) { .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-content .pxlr-advanced-list-item-subtitle { font-size: 0.7222222222rem; } } @media (min-width: 1290px) { .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-content .pxlr-advanced-list-item-subtitle { font-size: 0.7777777778rem; } } @media (min-width: 1440px) { .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-content .pxlr-advanced-list-item-subtitle { font-size: 0.8888888889rem; } } @media (min-width: 1920px) { .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-content .pxlr-advanced-list-item-subtitle { font-size: 1rem; } } .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-action a { width: 35px; height: 35px; } .wp-block-lazyblock-pxlr-advanced-list ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-action a::before { content: ""; color: var(--color_primary); font-family: icons !important; font-size: 1.5rem; line-height: 1; } .wp-block-lazyblock-pxlr-advanced-list.is-style-outlined ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item { border: 1px solid var(--color_primary); border-radius: 10px; padding: 20px; } .wp-block-lazyblock-pxlr-advanced-list.is-style-filled ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item { border: 1px solid var(--color_primary); background-color: var(--color_primary); border-radius: 10px; padding: 20px; } .wp-block-lazyblock-pxlr-advanced-list.is-style-filled ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-title { color: var(--color_white); } .wp-block-lazyblock-pxlr-advanced-list.is-style-filled ul.pxlr-advanced-list-wrapper li.pxlr-advanced-list-item .pxlr-advanced-list-item-subtitle { color: var(--color_black); } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: pxlr-block-title-indicator.scss Desc: Lazy Blocks - Custom Blocks Constructor - Title Indicator with signet */ .pxlr-block-title-indicator-wrapper.is-style-title-indicator-alignment-center { width: 100%; text-align: center; } .pxlr-block-title-indicator-wrapper.is-style-title-indicator-alignment-center .pxlr-block-title-indicator-item { display: inline-block; margin: 0 auto; } .pxlr-block-title-indicator-wrapper.is-style-title-indicator-alignment-left { width: 100%; text-align: left; } .pxlr-block-title-indicator-wrapper.is-style-title-indicator-alignment-left .pxlr-block-title-indicator-item { display: inline-block; margin: 0; } .pxlr-block-title-indicator-wrapper.is-style-title-indicator-alignment-right { width: 100%; text-align: right; } .pxlr-block-title-indicator-wrapper.is-style-title-indicator-alignment-right .pxlr-block-title-indicator-item { display: inline-block; margin: 0; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item .is-style-indicator-size-default { font-weight: 800; font-size: 0.9rem; text-transform: uppercase; display: inline-block; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h1, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h2, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h3, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h4, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h5, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h6, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item .is-style-indicator-size-default { display: inline-block; text-transform: uppercase; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h1.is-style-title-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h2.is-style-title-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h3.is-style-title-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h4.is-style-title-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h5.is-style-title-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h6.is-style-title-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item .is-style-indicator-size-default.is-style-title-color-primary { color: var(--color_primary); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h1.is-style-title-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h2.is-style-title-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h3.is-style-title-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h4.is-style-title-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h5.is-style-title-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h6.is-style-title-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item .is-style-indicator-size-default.is-style-title-color-black { color: var(--color_black); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h1.is-style-title-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h2.is-style-title-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h3.is-style-title-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h4.is-style-title-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h5.is-style-title-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h6.is-style-title-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item .is-style-indicator-size-default.is-style-title-color-white { color: var(--color_white); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h1 .has-style-focus-word.is-style-title-focus-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h2 .has-style-focus-word.is-style-title-focus-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h3 .has-style-focus-word.is-style-title-focus-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h4 .has-style-focus-word.is-style-title-focus-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h5 .has-style-focus-word.is-style-title-focus-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h6 .has-style-focus-word.is-style-title-focus-color-primary, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item .is-style-indicator-size-default .has-style-focus-word.is-style-title-focus-color-primary { color: var(--color_primary); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h1 .has-style-focus-word.is-style-title-focus-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h2 .has-style-focus-word.is-style-title-focus-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h3 .has-style-focus-word.is-style-title-focus-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h4 .has-style-focus-word.is-style-title-focus-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h5 .has-style-focus-word.is-style-title-focus-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h6 .has-style-focus-word.is-style-title-focus-color-black, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item .is-style-indicator-size-default .has-style-focus-word.is-style-title-focus-color-black { color: var(--color_black); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h1 .has-style-focus-word.is-style-title-focus-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h2 .has-style-focus-word.is-style-title-focus-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h3 .has-style-focus-word.is-style-title-focus-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h4 .has-style-focus-word.is-style-title-focus-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h5 .has-style-focus-word.is-style-title-focus-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item h6 .has-style-focus-word.is-style-title-focus-color-white, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item .is-style-indicator-size-default .has-style-focus-word.is-style-title-focus-color-white { color: var(--color_white); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top { margin-bottom: var(--spacer-s); /*No Icon Needed in this project*/ } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left.is-style-indicator-color-primary:before, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-color-primary:before { color: var(--color_primary); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left.is-style-indicator-color-white:before, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-color-white:before { color: var(--color_white); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left.is-style-indicator-size-regular, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-regular { padding-right: 15px; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left.is-style-indicator-size-regular:before, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-regular:before { background-size: 38px 21px; width: 38px; height: 21px; padding-right: 0px; display: inline-block; top: 0px; transform: inherit; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left.is-style-indicator-size-medium, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-medium { padding-right: 10px; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left.is-style-indicator-size-medium:before, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-medium:before { background-size: 62px 35px; width: 62px; height: 35px; padding-right: 0px; display: inline-block; top: 0px; transform: inherit; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left.is-style-indicator-size-large, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-large { padding-right: 10px; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-left.is-style-indicator-size-large:before, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-large:before { background-size: 90px 50px; width: 90px; height: 50px; padding-right: 0px; display: inline-block; top: 5px; transform: inherit; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top { margin-bottom: inherit; padding-right: 0; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top h1, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top h2, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top h3, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top h4, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top h5, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top h6, .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top .is-style-indicator-size-default { display: block; margin-bottom: var(--spacer-2xs); } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top:before { top: -10px; padding-right: 33px; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-medium { padding-right: 0px; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-medium:before { padding-right: 0px; top: -9px; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-large { padding-right: 0px; } .pxlr-block-title-indicator-wrapper .pxlr-block-title-indicator-item.is-style-indicator-position-top.is-style-indicator-size-large:before { padding-right: 0px; top: -8px; } /* Note: Possible styling classes in structure - pxlr-block-title-indicator-wrapper -- is-style-title-indicator-alignment-center -- is-style-title-indicator-alignment-left -- is-style-title-indicator-alignment-right ----- pxlr-block-title-indicator-item ------- is-style-indicator-size-default ------- h1, h2, h3, h4, h5, h6, + is-style-indicator-size-default -------- is-style-title-color-primary -------- is-style-title-color-black -------- is-style-title-color-white ------- is-style-indicator-position-left + is-style-indicator-position-top -------- (Note: small is default) -------- is-style-indicator-size-medium -------- is-style-indicator-size-large -------- is-style-indicator-color-primary -------- is-style-indicator-color-black -------- is-style-indicator-color-white */ /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //NOTE: This styling can be found in mixin pretitle_indicator @ assets/scss/0-settings/mixin.scss ////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// .pxlr-block-title-indicator-wrapper{ // alignment center is default &.is-style-title-indicator-alignment-center{ width: 100%; text-align: center; .pxlr-block-title-indicator-item{ display: inline-block; margin: 0 auto; } } &.is-style-title-indicator-alignment-left{ width: 100%; text-align: left; .pxlr-block-title-indicator-item{ display: inline-block; margin: 0; } } &.is-style-title-indicator-alignment-right{ width: 100%; text-align: right; .pxlr-block-title-indicator-item{ display: inline-block; margin: 0; } } .pxlr-block-title-indicator-item{ // Title styles .is-style-indicator-size-default{ font-weight: 800; font-size: .9rem; text-transform: uppercase; display: inline-block; } h1, h2, h3, h4, h5, h6, .is-style-indicator-size-default{ display: inline-block; text-transform: uppercase; &.is-style-title-color-primary{ color: var(--color_primary); } &.is-style-title-color-black{ color: var(--color_black); } &.is-style-title-color-white{ color: var(--color_white); } } // Focus title styles h1, h2, h3, h4, h5, h6, .is-style-indicator-size-default{ .has-style-focus-word{ &.is-style-title-focus-color-primary{ color: var(--color_primary); } &.is-style-title-focus-color-black{ color: var(--color_black); } &.is-style-title-focus-color-white{ color: var(--color_white); } } } &.is-style-indicator-position-left, &.is-style-indicator-position-top{ // small size is default &:before { content: ''; position: relative; // black color is default background-image: url(../img/logo-pxlr-signet-black.svg); background-position: left center; background-repeat: no-repeat; // small size is default background-size: 33px 18px; padding-right: 40px; top: 50%; transform: translateY(-50%); } &.is-style-indicator-color-primary{ &:before{ background-image: url(../img/logo-pxlr-signet-primary.svg); } } &.is-style-indicator-color-white{ &:before{ background-image: url(../img/logo-pxlr-signet-white.svg); } } &.is-style-indicator-size-medium{ padding-right: 10px; &:before{ background-size: 62px 35px; width: 62px; height: 35px; padding-right: 0px; display: inline-block; top: 0px; transform: inherit; } } &.is-style-indicator-size-large{ padding-right: 10px; &:before{ background-size: 90px 50px; width: 90px; height: 50px; padding-right: 0px; display: inline-block; top: 5px; transform: inherit; } } } &.is-style-indicator-position-top{ h1, h2, h3, h4, h5, h6, .is-style-indicator-size-default{ display: block; } padding-right: 0; &:before{ top: -10px; } &.is-style-indicator-size-medium{ padding-right: 0px; &:before{ padding-right: 0px; top: -9px; } } &.is-style-indicator-size-large{ padding-right: 0px; &:before{ padding-right: 0px; top: -8px; } } } } // end .pxlr-block-title-indicator-item } // end .pxlr-block-title-indicator-wrapper */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: pxlr-block-media-embed.scss Desc: Lazy Blocks - Custom Blocks Constructor - media-embed for Video, Audio, Streaming Note: Possible styling classes in structure */ /* Taken from https://cdn.plyr.io/3.7.8/plyr.css */ @keyframes plyr-progress { to { background-position: 25px 0; background-position: var(--plyr-progress-loading-size, 25px) 0; } } @keyframes plyr-popup { 0% { opacity: 0.5; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes plyr-fade-in { 0% { opacity: 0; } to { opacity: 1; } } .plyr { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; direction: ltr; display: flex; flex-direction: column; font-family: inherit; font-family: var(--plyr-font-family, inherit); font-variant-numeric: tabular-nums; font-weight: 400; font-weight: var(--plyr-font-weight-regular, 400); line-height: 1.7; line-height: var(--plyr-line-height, 1.7); max-width: 100%; min-width: 200px; position: relative; text-shadow: none; transition: box-shadow 0.3s ease; z-index: 0; } .plyr audio, .plyr iframe, .plyr video { display: block; height: 100%; width: 100%; } .plyr button { font: inherit; line-height: inherit; width: auto; } .plyr:focus { outline: 0; } .plyr--full-ui { box-sizing: border-box; } .plyr--full-ui *, .plyr--full-ui :after, .plyr--full-ui :before { box-sizing: inherit; } .plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label { touch-action: manipulation; } .plyr__badge { background: #4a5464; background: var(--plyr-badge-background, #4a5464); border-radius: 2px; border-radius: var(--plyr-badge-border-radius, 2px); color: #fff; color: var(--plyr-badge-text-color, #fff); font-size: 9px; font-size: var(--plyr-font-size-badge, 9px); line-height: 1; padding: 3px 4px; } .plyr--full-ui ::-webkit-media-text-track-container { display: none; } .plyr__captions { animation: plyr-fade-in 0.3s ease; bottom: 0; display: none; font-size: 13px; font-size: var(--plyr-font-size-small, 13px); left: 0; padding: 10px; padding: var(--plyr-control-spacing, 10px); position: absolute; text-align: center; transition: transform 0.4s ease-in-out; width: 100%; } .plyr__captions span:empty { display: none; } @media (min-width: 480px) { .plyr__captions { font-size: 15px; font-size: var(--plyr-font-size-base, 15px); padding: 20px; padding: calc(var(--plyr-control-spacing,10px)*2); } } @media (min-width: 768px) { .plyr__captions { font-size: 18px; font-size: var(--plyr-font-size-large, 18px); } } .plyr--captions-active .plyr__captions { display: block; } .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions { transform: translateY(-40px); transform: translateY(calc(var(--plyr-control-spacing,10px)*-4)); } .plyr__caption { background: #000c; background: var(--plyr-captions-background, #000c); border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: #fff; color: var(--plyr-captions-text-color, #fff); line-height: 185%; padding: 0.2em 0.5em; white-space: pre-wrap; } .plyr__caption div { display: inline; } .plyr__control { background: #0000; border: 0; border-radius: 4px; border-radius: var(--plyr-control-radius, 4px); color: inherit; cursor: pointer; flex-shrink: 0; overflow: visible; padding: 7px; padding: calc(var(--plyr-control-spacing,10px)*.7); position: relative; transition: all 0.3s ease; } .plyr__control svg { fill: currentColor; display: block; height: 18px; height: var(--plyr-control-icon-size, 18px); pointer-events: none; width: 18px; width: var(--plyr-control-icon-size, 18px); } .plyr__control:focus { outline: 0; } .plyr__control:focus-visible { outline: 2px dashed #00b2ff; outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); outline-offset: 2px; } a.plyr__control { text-decoration: none; } .plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control.plyr__control--pressed .label--not-pressed, .plyr__control:not(.plyr__control--pressed) .icon--pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed, a.plyr__control:after, a.plyr__control:before { display: none; } .plyr--full-ui ::-webkit-media-controls { display: none; } .plyr__controls { align-items: center; display: flex; justify-content: flex-end; text-align: center; } .plyr__controls .plyr__progress__container { flex: 1; min-width: 0; } .plyr__controls .plyr__controls__item { margin-left: 2.5px; margin-left: calc(var(--plyr-control-spacing,10px)/4); } .plyr__controls .plyr__controls__item:first-child { margin-left: 0; margin-right: auto; } .plyr__controls .plyr__controls__item.plyr__progress__container { padding-left: 2.5px; padding-left: calc(var(--plyr-control-spacing,10px)/4); } .plyr__controls .plyr__controls__item.plyr__time { padding: 0 5px; padding: 0 calc(var(--plyr-control-spacing,10px)/2); } .plyr__controls .plyr__controls__item.plyr__progress__container:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time, .plyr__controls .plyr__controls__item.plyr__time:first-child { padding-left: 0; } .plyr [data-plyr=airplay], .plyr [data-plyr=captions], .plyr [data-plyr=fullscreen], .plyr [data-plyr=pip], .plyr__controls:empty { display: none; } .plyr--airplay-supported [data-plyr=airplay], .plyr--captions-enabled [data-plyr=captions], .plyr--fullscreen-enabled [data-plyr=fullscreen], .plyr--pip-supported [data-plyr=pip] { display: inline-block; } .plyr__menu { display: flex; position: relative; } .plyr__menu .plyr__control svg { transition: transform 0.3s ease; } .plyr__menu .plyr__control[aria-expanded=true] svg { transform: rotate(90deg); } .plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip { display: none; } .plyr__menu__container { animation: plyr-popup 0.2s ease; background: #ffffffe6; background: var(--plyr-menu-background, #ffffffe6); border-radius: 8px; border-radius: var(--plyr-menu-radius, 8px); bottom: 100%; box-shadow: 0 1px 2px #00000026; box-shadow: var(--plyr-menu-shadow, 0 1px 2px #00000026); color: #4a5464; color: var(--plyr-menu-color, #4a5464); font-size: 15px; font-size: var(--plyr-font-size-base, 15px); margin-bottom: 10px; position: absolute; right: -3px; text-align: left; white-space: nowrap; z-index: 3; } .plyr__menu__container > div { overflow: hidden; transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .plyr__menu__container:after { border: 4px solid #0000; border-top-color: #ffffffe6; border: var(--plyr-menu-arrow-size, 4px) solid #0000; border-top-color: var(--plyr-menu-background, #ffffffe6); content: ""; height: 0; position: absolute; right: 14px; right: calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7 - var(--plyr-menu-arrow-size,4px)/2); top: 100%; width: 0; } .plyr__menu__container [role=menu] { padding: 7px; padding: calc(var(--plyr-control-spacing,10px)*.7); } .plyr__menu__container [role=menuitem], .plyr__menu__container [role=menuitemradio] { margin-top: 2px; } .plyr__menu__container [role=menuitem]:first-child, .plyr__menu__container [role=menuitemradio]:first-child { margin-top: 0; } .plyr__menu__container .plyr__control { align-items: center; color: #4a5464; color: var(--plyr-menu-color, #4a5464); display: flex; font-size: 13px; font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px)); padding: 4.66667px 10.5px; padding: calc(var(--plyr-control-spacing,10px)*.7/1.5) calc(var(--plyr-control-spacing,10px)*.7*1.5); -webkit-user-select: none; user-select: none; width: 100%; } .plyr__menu__container .plyr__control > span { align-items: inherit; display: flex; width: 100%; } .plyr__menu__container .plyr__control:after { border: 4px solid #0000; border: var(--plyr-menu-item-arrow-size, 4px) solid #0000; content: ""; position: absolute; top: 50%; transform: translateY(-50%); } .plyr__menu__container .plyr__control--forward { padding-right: 28px; padding-right: calc(var(--plyr-control-spacing,10px)*.7*4); } .plyr__menu__container .plyr__control--forward:after { border-left-color: #728197; border-left-color: var(--plyr-menu-arrow-color, #728197); right: 6.5px; right: calc(var(--plyr-control-spacing,10px)*.7*1.5 - var(--plyr-menu-item-arrow-size,4px)); } .plyr__menu__container .plyr__control--forward:focus-visible:after, .plyr__menu__container .plyr__control--forward:hover:after { border-left-color: initial; } .plyr__menu__container .plyr__control--back { font-weight: 400; font-weight: var(--plyr-font-weight-regular, 400); margin: 7px; margin: calc(var(--plyr-control-spacing,10px)*.7); margin-bottom: 3.5px; margin-bottom: calc(var(--plyr-control-spacing,10px)*.7/2); padding-left: 28px; padding-left: calc(var(--plyr-control-spacing,10px)*.7*4); position: relative; width: calc(100% - 14px); width: calc(100% - var(--plyr-control-spacing,10px)*.7*2); } .plyr__menu__container .plyr__control--back:after { border-right-color: #728197; border-right-color: var(--plyr-menu-arrow-color, #728197); left: 6.5px; left: calc(var(--plyr-control-spacing,10px)*.7*1.5 - var(--plyr-menu-item-arrow-size,4px)); } .plyr__menu__container .plyr__control--back:before { background: #dcdfe5; background: var(--plyr-menu-back-border-color, #dcdfe5); box-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff); content: ""; height: 1px; left: 0; margin-top: 3.5px; margin-top: calc(var(--plyr-control-spacing,10px)*.7/2); overflow: hidden; position: absolute; right: 0; top: 100%; } .plyr__menu__container .plyr__control--back:focus-visible:after, .plyr__menu__container .plyr__control--back:hover:after { border-right-color: initial; } .plyr__menu__container .plyr__control[role=menuitemradio] { padding-left: 7px; padding-left: calc(var(--plyr-control-spacing,10px)*.7); } .plyr__menu__container .plyr__control[role=menuitemradio]:after, .plyr__menu__container .plyr__control[role=menuitemradio]:before { border-radius: 100%; } .plyr__menu__container .plyr__control[role=menuitemradio]:before { background: #0000001a; content: ""; display: block; flex-shrink: 0; height: 16px; margin-right: 10px; margin-right: var(--plyr-control-spacing, 10px); transition: all 0.3s ease; width: 16px; } .plyr__menu__container .plyr__control[role=menuitemradio]:after { background: #fff; border: 0; height: 6px; left: 12px; opacity: 0; top: 50%; transform: translateY(-50%) scale(0); transition: transform 0.3s ease, opacity 0.3s ease; width: 6px; } .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before { background: #00b2ff; background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); } .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after { opacity: 1; transform: translateY(-50%) scale(1); } .plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before, .plyr__menu__container .plyr__control[role=menuitemradio]:hover:before { background: #23282f1a; } .plyr__menu__container .plyr__menu__value { align-items: center; display: flex; margin-left: auto; margin-right: -5px; margin-right: calc(var(--plyr-control-spacing,10px)*.7*-1 - -2px); overflow: hidden; padding-left: 24.5px; padding-left: calc(var(--plyr-control-spacing,10px)*.7*3.5); pointer-events: none; } .plyr--full-ui input[type=range] { -webkit-appearance: none; appearance: none; background: #0000; border: 0; border-radius: 26px; border-radius: calc(var(--plyr-range-thumb-height,13px)*2); color: #00b2ff; color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); display: block; height: 19px; height: calc(var(--plyr-range-thumb-active-shadow-width,3px)*2 + var(--plyr-range-thumb-height,13px)); margin: 0; min-width: 0; padding: 0; transition: box-shadow 0.3s ease; width: 100%; } .plyr--full-ui input[type=range]::-webkit-slider-runnable-track { background: #0000; background-image: linear-gradient(90deg, currentColor 0, #0000 0); background-image: linear-gradient(to right, currentColor var(--value, 0), #0000 var(--value, 0)); border: 0; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/2); height: 5px; height: var(--plyr-range-track-height, 5px); -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; -webkit-user-select: none; user-select: none; } .plyr--full-ui input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: #fff; background: var(--plyr-range-thumb-background, #fff); border: 0; border-radius: 100%; box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33); height: 13px; height: var(--plyr-range-thumb-height, 13px); margin-top: -4px; margin-top: calc((var(--plyr-range-thumb-height,13px) - var(--plyr-range-track-height,5px))/2*-1); position: relative; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; width: 13px; width: var(--plyr-range-thumb-height, 13px); } .plyr--full-ui input[type=range]::-moz-range-track { background: #0000; border: 0; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/2); height: 5px; height: var(--plyr-range-track-height, 5px); -moz-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; user-select: none; } .plyr--full-ui input[type=range]::-moz-range-thumb { background: #fff; background: var(--plyr-range-thumb-background, #fff); border: 0; border-radius: 100%; box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33); height: 13px; height: var(--plyr-range-thumb-height, 13px); position: relative; -moz-transition: all 0.2s ease; transition: all 0.2s ease; width: 13px; width: var(--plyr-range-thumb-height, 13px); } .plyr--full-ui input[type=range]::-moz-range-progress { background: currentColor; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/2); height: 5px; height: var(--plyr-range-track-height, 5px); } .plyr--full-ui input[type=range]::-ms-track { color: #0000; } .plyr--full-ui input[type=range]::-ms-fill-upper, .plyr--full-ui input[type=range]::-ms-track { background: #0000; border: 0; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/2); height: 5px; height: var(--plyr-range-track-height, 5px); -ms-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; user-select: none; } .plyr--full-ui input[type=range]::-ms-fill-lower { background: #0000; background: currentColor; border: 0; border-radius: 2.5px; border-radius: calc(var(--plyr-range-track-height,5px)/2); height: 5px; height: var(--plyr-range-track-height, 5px); -ms-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; user-select: none; } .plyr--full-ui input[type=range]::-ms-thumb { background: #fff; background: var(--plyr-range-thumb-background, #fff); border: 0; border-radius: 100%; box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33); height: 13px; height: var(--plyr-range-thumb-height, 13px); margin-top: 0; position: relative; -ms-transition: all 0.2s ease; transition: all 0.2s ease; width: 13px; width: var(--plyr-range-thumb-height, 13px); } .plyr--full-ui input[type=range]::-ms-tooltip { display: none; } .plyr--full-ui input[type=range]::-moz-focus-outer { border: 0; } .plyr--full-ui input[type=range]:focus { outline: 0; } .plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track { outline: 2px dashed #00b2ff; outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); outline-offset: 2px; } .plyr--full-ui input[type=range]:focus-visible::-moz-range-track { outline: 2px dashed #00b2ff; outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); outline-offset: 2px; } .plyr--full-ui input[type=range]:focus-visible::-ms-track { outline: 2px dashed #00b2ff; outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); outline-offset: 2px; } .plyr__poster { background-color: #000; background-color: var(--plyr-video-background, var(--plyr-video-background, #000)); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity 0.2s ease; width: 100%; z-index: 1; } .plyr--stopped.plyr__poster-enabled .plyr__poster { opacity: 1; } .plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster { display: none; } .plyr__time { font-size: 13px; font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px)); } .plyr__time + .plyr__time:before { content: "⁄"; margin-right: 10px; margin-right: var(--plyr-control-spacing, 10px); } @media (max-width: 767px) { .plyr__time + .plyr__time { display: none; } } .plyr__tooltip { background: #fff; background: var(--plyr-tooltip-background, #fff); border-radius: 5px; border-radius: var(--plyr-tooltip-radius, 5px); bottom: 100%; box-shadow: 0 1px 2px #00000026; box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px #00000026); color: #4a5464; color: var(--plyr-tooltip-color, #4a5464); font-size: 13px; font-size: var(--plyr-font-size-small, 13px); font-weight: 400; font-weight: var(--plyr-font-weight-regular, 400); left: 50%; line-height: 1.3; margin-bottom: 10px; margin-bottom: calc(var(--plyr-control-spacing,10px)/2*2); opacity: 0; padding: 5px 7.5px; padding: calc(var(--plyr-control-spacing,10px)/2) calc(var(--plyr-control-spacing,10px)/2*1.5); pointer-events: none; position: absolute; transform: translate(-50%, 10px) scale(0.8); transform-origin: 50% 100%; transition: transform 0.2s ease 0.1s, opacity 0.2s ease 0.1s; white-space: nowrap; z-index: 2; } .plyr__tooltip:before { border-left: 4px solid #0000; border-left: var(--plyr-tooltip-arrow-size, 4px) solid #0000; border-right: 4px solid #0000; border-right: var(--plyr-tooltip-arrow-size, 4px) solid #0000; border-top: 4px solid #fff; border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff); bottom: -4px; bottom: calc(var(--plyr-tooltip-arrow-size,4px)*-1); content: ""; height: 0; left: 50%; position: absolute; transform: translateX(-50%); width: 0; z-index: 2; } .plyr .plyr__control:focus-visible .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip, .plyr__tooltip--visible { opacity: 1; transform: translate(-50%) scale(1); } .plyr .plyr__control:hover .plyr__tooltip { z-index: 3; } .plyr__controls > .plyr__control:first-child .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip { left: 0; transform: translateY(10px) scale(0.8); transform-origin: 0 100%; } .plyr__controls > .plyr__control:first-child .plyr__tooltip:before, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip:before { left: 16px; left: calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7); } .plyr__controls > .plyr__control:last-child .plyr__tooltip { left: auto; right: 0; transform: translateY(10px) scale(0.8); transform-origin: 100% 100%; } .plyr__controls > .plyr__control:last-child .plyr__tooltip:before { left: auto; right: 16px; right: calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7); transform: translateX(50%); } .plyr__controls > .plyr__control:first-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control:focus-visible .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child:focus-visible .plyr__tooltip, .plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:last-child:focus-visible .plyr__tooltip, .plyr__controls > .plyr__control:last-child:hover .plyr__tooltip { transform: translate(0) scale(1); } .plyr__progress { left: 6.5px; left: calc(var(--plyr-range-thumb-height,13px)*.5); margin-right: 13px; margin-right: var(--plyr-range-thumb-height, 13px); position: relative; } .plyr__progress input[type=range], .plyr__progress__buffer { margin-left: -6.5px; margin-left: calc(var(--plyr-range-thumb-height,13px)*-.5); margin-right: -6.5px; margin-right: calc(var(--plyr-range-thumb-height,13px)*-.5); width: calc(100% + 13px); width: calc(100% + var(--plyr-range-thumb-height,13px)); } .plyr__progress input[type=range] { position: relative; z-index: 2; } .plyr__progress .plyr__tooltip { left: 0; max-width: 120px; overflow-wrap: break-word; } .plyr__progress__buffer { -webkit-appearance: none; background: #0000; border: 0; border-radius: 100px; height: 5px; height: var(--plyr-range-track-height, 5px); left: 0; margin-top: -2.5px; margin-top: calc((var(--plyr-range-track-height,5px)/2)*-1); padding: 0; position: absolute; top: 50%; } .plyr__progress__buffer::-webkit-progress-bar { background: #0000; } .plyr__progress__buffer::-webkit-progress-value { background: currentColor; border-radius: 100px; min-width: 5px; min-width: var(--plyr-range-track-height, 5px); -webkit-transition: width 0.2s ease; transition: width 0.2s ease; } .plyr__progress__buffer::-moz-progress-bar { background: currentColor; border-radius: 100px; min-width: 5px; min-width: var(--plyr-range-track-height, 5px); -moz-transition: width 0.2s ease; transition: width 0.2s ease; } .plyr__progress__buffer::-ms-fill { border-radius: 100px; -ms-transition: width 0.2s ease; transition: width 0.2s ease; } .plyr--loading .plyr__progress__buffer { animation: plyr-progress 1s linear infinite; background-image: linear-gradient(-45deg, #23282f99 25%, #0000 0, #0000 50%, #23282f99 0, #23282f99 75%, #0000 0, #0000); background-image: linear-gradient(-45deg, var(--plyr-progress-loading-background, #23282f99) 25%, #0000 25%, #0000 50%, var(--plyr-progress-loading-background, #23282f99) 50%, var(--plyr-progress-loading-background, #23282f99) 75%, #0000 75%, #0000); background-repeat: repeat-x; background-size: 25px 25px; background-size: var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px); color: #0000; } .plyr--video.plyr--loading .plyr__progress__buffer { background-color: #ffffff40; background-color: var(--plyr-video-progress-buffered-background, #ffffff40); } .plyr--audio.plyr--loading .plyr__progress__buffer { background-color: #c1c8d199; background-color: var(--plyr-audio-progress-buffered-background, #c1c8d199); } .plyr__progress__marker { background-color: #fff; background-color: var(--plyr-progress-marker-background, #fff); border-radius: 1px; height: 5px; height: var(--plyr-range-track-height, 5px); position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3px; width: var(--plyr-progress-marker-width, 3px); z-index: 3; } .plyr__volume { align-items: center; display: flex; position: relative; } .plyr__volume input[type=range] { margin-left: 5px; margin-left: calc(var(--plyr-control-spacing,10px)/2); margin-right: 5px; margin-right: calc(var(--plyr-control-spacing,10px)/2); max-width: 90px; min-width: 60px; position: relative; z-index: 2; } .plyr--audio { display: block; } .plyr--audio .plyr__controls { background: #fff; background: var(--plyr-audio-controls-background, #fff); border-radius: inherit; color: #4a5464; color: var(--plyr-audio-control-color, #4a5464); padding: 10px; padding: var(--plyr-control-spacing, 10px); } .plyr--audio .plyr__control:focus-visible, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] { background: #00b2ff; background: var(--plyr-audio-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); color: #fff; color: var(--plyr-audio-control-color-hover, #fff); } .plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track { background-color: #c1c8d199; background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, #c1c8d199)); } .plyr--full-ui.plyr--audio input[type=range]::-moz-range-track { background-color: #c1c8d199; background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, #c1c8d199)); } .plyr--full-ui.plyr--audio input[type=range]::-ms-track { background-color: #c1c8d199; background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, #c1c8d199)); } .plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33, 0 0 0 3px #23282f1a; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, #23282f1a); } .plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb { box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33, 0 0 0 3px #23282f1a; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, #23282f1a); } .plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb { box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33, 0 0 0 3px #23282f1a; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, #23282f1a); } .plyr--audio .plyr__progress__buffer { color: #c1c8d199; color: var(--plyr-audio-progress-buffered-background, #c1c8d199); } .plyr--video { overflow: hidden; } .plyr--video.plyr--menu-open { overflow: visible; } .plyr__video-wrapper { background: #000; background: var(--plyr-video-background, var(--plyr-video-background, #000)); border-radius: inherit; height: 100%; margin: auto; overflow: hidden; position: relative; width: 100%; } .plyr__video-embed, .plyr__video-wrapper--fixed-ratio { aspect-ratio: 16/9; } @supports not (aspect-ratio: 16/9) { .plyr__video-embed, .plyr__video-wrapper--fixed-ratio { height: 0; padding-bottom: 56.25%; position: relative; } } .plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container { padding-bottom: 240%; position: relative; transform: translateY(-38.28125%); } .plyr--video .plyr__controls { background: linear-gradient(#0000, #000000bf); background: var(--plyr-video-controls-background, linear-gradient(#0000, #000000bf)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; bottom: 0; color: #fff; color: var(--plyr-video-control-color, #fff); left: 0; padding: 5px; padding: calc(var(--plyr-control-spacing,10px)/2); padding-top: 20px; padding-top: calc(var(--plyr-control-spacing,10px)*2); position: absolute; right: 0; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; z-index: 3; } @media (min-width: 480px) { .plyr--video .plyr__controls { padding: 10px; padding: var(--plyr-control-spacing, 10px); padding-top: 35px; padding-top: calc(var(--plyr-control-spacing,10px)*3.5); } } .plyr--video.plyr--hide-controls .plyr__controls { opacity: 0; pointer-events: none; transform: translateY(100%); } .plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] { background: #00b2ff; background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); color: #fff; color: var(--plyr-video-control-color-hover, #fff); } .plyr__control--overlaid { background: #00b2ff; background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b2ff))); border: 0; border-radius: 100%; color: #fff; color: var(--plyr-video-control-color, #fff); display: none; left: 50%; opacity: 0.9; padding: 15px; padding: calc(var(--plyr-control-spacing,10px)*1.5); position: absolute; top: 50%; transform: translate(-50%, -50%); transition: 0.3s; z-index: 2; } .plyr__control--overlaid svg { left: 2px; position: relative; } .plyr__control--overlaid:focus, .plyr__control--overlaid:hover { opacity: 1; } .plyr--playing .plyr__control--overlaid { opacity: 0; visibility: hidden; } .plyr--full-ui.plyr--video .plyr__control--overlaid { display: block; } .plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track { background-color: #ffffff40; background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, #ffffff40)); } .plyr--full-ui.plyr--video input[type=range]::-moz-range-track { background-color: #ffffff40; background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, #ffffff40)); } .plyr--full-ui.plyr--video input[type=range]::-ms-track { background-color: #ffffff40; background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, #ffffff40)); } .plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33, 0 0 0 3px #ffffff80; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, #ffffff80); } .plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb { box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33, 0 0 0 3px #ffffff80; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, #ffffff80); } .plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb { box-shadow: 0 1px 1px #23282f26, 0 0 0 1px #23282f33, 0 0 0 3px #ffffff80; box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, #ffffff80); } .plyr--video .plyr__progress__buffer { color: #ffffff40; color: var(--plyr-video-progress-buffered-background, #ffffff40); } .plyr:fullscreen { background: #000; border-radius: 0 !important; height: 100%; margin: 0; width: 100%; } .plyr:fullscreen video { height: 100%; } .plyr:fullscreen .plyr__control .icon--exit-fullscreen { display: block; } .plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr:fullscreen.plyr--hide-controls { cursor: none; } @media (min-width: 1024px) { .plyr:fullscreen .plyr__captions { font-size: 21px; font-size: var(--plyr-font-size-xlarge, 21px); } } .plyr--fullscreen-fallback { background: #000; border-radius: 0 !important; bottom: 0; height: 100%; left: 0; margin: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 10000000; } .plyr--fullscreen-fallback video { height: 100%; } .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen { display: block; } .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg { display: none; } .plyr--fullscreen-fallback.plyr--hide-controls { cursor: none; } @media (min-width: 1024px) { .plyr--fullscreen-fallback .plyr__captions { font-size: 21px; font-size: var(--plyr-font-size-xlarge, 21px); } } .plyr__ads { border-radius: inherit; bottom: 0; cursor: pointer; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; z-index: -1; } .plyr__ads > div, .plyr__ads > div iframe { height: 100%; position: absolute; width: 100%; } .plyr__ads:after { background: #23282f; border-radius: 2px; bottom: 10px; bottom: var(--plyr-control-spacing, 10px); color: #fff; content: attr(data-badge-text); font-size: 11px; padding: 2px 6px; pointer-events: none; position: absolute; right: 10px; right: var(--plyr-control-spacing, 10px); z-index: 3; } .plyr__ads:empty:after { display: none; } .plyr__cues { background: currentColor; display: block; height: 5px; height: var(--plyr-range-track-height, 5px); left: 0; opacity: 0.8; position: absolute; top: 50%; transform: translateY(-50%); width: 3px; z-index: 3; } .plyr__preview-thumb { background-color: #fff; background-color: var(--plyr-tooltip-background, #fff); border-radius: 8px; border-radius: var(--plyr-menu-radius, 8px); bottom: 100%; box-shadow: 0 1px 2px #00000026; box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px #00000026); margin-bottom: 10px; margin-bottom: calc(var(--plyr-control-spacing,10px)/2*2); opacity: 0; padding: 3px; pointer-events: none; position: absolute; transform: translateY(10px) scale(0.8); transform-origin: 50% 100%; transition: transform 0.2s ease 0.1s, opacity 0.2s ease 0.1s; z-index: 2; } .plyr__preview-thumb--is-shown { opacity: 1; transform: translate(0) scale(1); } .plyr__preview-thumb:before { border-left: 4px solid #0000; border-left: var(--plyr-tooltip-arrow-size, 4px) solid #0000; border-right: 4px solid #0000; border-right: var(--plyr-tooltip-arrow-size, 4px) solid #0000; border-top: 4px solid #fff; border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff); bottom: -4px; bottom: calc(var(--plyr-tooltip-arrow-size,4px)*-1); content: ""; height: 0; left: calc(50% + var(--preview-arrow-offset)); position: absolute; transform: translateX(-50%); width: 0; z-index: 2; } .plyr__preview-thumb__image-container { background: #c1c8d1; border-radius: 7px; border-radius: calc(var(--plyr-menu-radius,8px) - 1px); overflow: hidden; position: relative; z-index: 0; } .plyr__preview-thumb__image-container img, .plyr__preview-thumb__image-container:after { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .plyr__preview-thumb__image-container:after { border-radius: inherit; box-shadow: inset 0 0 0 1px #00000026; content: ""; pointer-events: none; } .plyr__preview-thumb__image-container img { max-height: none; max-width: none; } .plyr__preview-thumb__time-container { background: linear-gradient(#0000, #000000bf); background: var(--plyr-video-controls-background, linear-gradient(#0000, #000000bf)); border-bottom-left-radius: 7px; border-bottom-left-radius: calc(var(--plyr-menu-radius,8px) - 1px); border-bottom-right-radius: 7px; border-bottom-right-radius: calc(var(--plyr-menu-radius,8px) - 1px); bottom: 0; left: 0; line-height: 1.1; padding: 20px 6px 6px; position: absolute; right: 0; z-index: 3; } .plyr__preview-thumb__time-container span { color: #fff; font-size: 13px; font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px)); } .plyr__preview-scrubbing { bottom: 0; filter: blur(1px); height: 100%; left: 0; margin: auto; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; transition: opacity 0.3s ease; width: 100%; z-index: 1; } .plyr__preview-scrubbing--is-shown { opacity: 1; } .plyr__preview-scrubbing img { height: 100%; left: 0; max-height: none; max-width: none; object-fit: contain; position: absolute; top: 0; width: 100%; } .plyr--no-transition { transition: none !important; } .plyr__sr-only { clip: rect(1px, 1px, 1px, 1px); border: 0 !important; height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; } .plyr [hidden] { display: none !important; } .wp-block-lazyblock-pxlr-media-embed { position: relative; } .wp-block-lazyblock-pxlr-media-embed .pxlr-block-media-embed-wrapper { width: 100%; } .wp-block-lazyblock-pxlr-media-embed .pxlr-block-media-embed-wrapper.service-audio_selfhosted { zoom: 1.5; } .wp-block-lazyblock-pxlr-media-embed .pxlr-block-media-embed-wrapper .plyr__audio-embed.pxlr-block-media-embed-audio { /* Overwrite PLYR Audioplayer styling */ background-color: transparent; border-radius: 10px; } /* plugins */ /* Theme Name: weiss-engineering Theme URI: https://www.weiss.ch Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.1 Text Domain: weiss-engineering File: pxlr-heroslider.scss Info: PXLR Heroslider Plugin styles */ body { /* Slider */ } @media (min-width: 1024px) { body { /* Themecolor - Change desktop navigation text color This will happen when data-attribute by js/slick/onchange is set as value on body class */ /* Themecolor - Change desktop logo custom/alternative This will happen when data-attribute by js/slick/onchange is set as value on body class */ } body.acf-hero-siteheader-color_light .pxlr-site-header .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a { color: var(--color_primary); } body.acf-hero-siteheader-color_light .pxlr-site-header .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a:hover { color: var(--color_secondary); } body.acf-hero-siteheader-color_light .pxlr-site-header .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li a { color: var(--color_white); } body.acf-hero-siteheader-color_light .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li a { color: var(--color_primary); } body.acf-hero-siteheader-color_light .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li a:hover { color: var(--color_secondary); } body.acf-hero-siteheader-color_light .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li.pxlr-active a { color: var(--color_primary); } body.acf-hero-siteheader-color_light .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li.pxlr-active a:hover { color: var(--color_white); } body.acf-hero-siteheader-color_light .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li:after { color: var(--color_white); } body.acf-hero-siteheader-color_light .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a { color: var(--color_white); } body.acf-hero-siteheader-color_light .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a:hover { color: var(--color_primary); } body.acf-hero-siteheader-color_dark .pxlr-site-header .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a { color: var(--color_black); } body.acf-hero-siteheader-color_dark .pxlr-site-header .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a:hover { color: var(--color_white); } body.acf-hero-siteheader-color_dark .pxlr-site-header .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li ul li a { color: var(--color_white); } body.acf-hero-siteheader-color_dark .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li a { color: var(--color_black); } body.acf-hero-siteheader-color_dark .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li a:hover { color: var(--color_primary); } body.acf-hero-siteheader-color_dark .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li.pxlr-active a { color: var(--color_primary); } body.acf-hero-siteheader-color_dark .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li.pxlr-active a:hover { color: var(--color_black); } body.acf-hero-siteheader-color_dark .pxlr-site-header .pxlr-site-secondary-navigation .menu-secondary-site-navigation-container ul li:after { color: var(--color_black); } body.acf-hero-siteheader-color_dark .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a { color: var(--color_white); } body.acf-hero-siteheader-color_dark .pxlr-site-header.pxlr-js-site-header-sticky .pxlr-site-primary-navigation .menu-primary-site-navigation-container ul li a:hover { color: var(--color_primary); } body.acf-hero-siteheader-color_light .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom { display: block; } body.acf-hero-siteheader-color_light .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative { display: none; } body.acf-hero-siteheader-color_dark .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-custom { display: none; } body.acf-hero-siteheader-color_dark .pxlr-site-header-wrapper .pxlr-site-header-branding .pxlr-site-header-logo-alternative { display: block; } } body .pxlr-heroslider-wrapper { position: relative; z-index: 1; /* Check for mobile visibility */ /* Pagination */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-explore-indicator { z-index: 1; position: absolute; text-transform: uppercase; font-size: 0.6rem; line-height: 0; bottom: calc(20px + 35px); left: 20px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-explore-indicator:before { position: relative; content: ""; font-family: "icons"; font-size: 1.2rem; color: var(--color_primary); top: 5px; left: -5px; } @media (min-width: 768px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-explore-indicator { bottom: calc(25px + 35px); left: 25px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-explore-indicator:before { top: 6px; left: -6px; } } @media (min-width: 1024px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-explore-indicator { bottom: calc(30px + 35px); left: 30px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-explore-indicator:before { top: 7px; left: -7px; } } body .pxlr-heroslider-wrapper .pxlr-heroslider-component { position: relative; opacity: 0; /* Slide item*/ /* NOTE: This is not used since we don't define the caption css inside the .slick-list. As this would result in the caption being displayed without styling for a short time when the page loads. The styling for the caption is now defined directly above in this file. .slick-list{ .slick-track{ .slick-slide{ // &.slick-current{ // } // &.slick-active{ // } } //end .slick-slide } //end .slick-track } //end .slick-list */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.slick-initialized { opacity: 1; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .slick-list { height: 100%; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .slick-list .slick-track { height: 100%; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_full { height: 100vh; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_full .pxlr-heroslider-image-item { height: 100vh; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_full .pxlr-heroslider-image-item picture { height: 100vh; display: block; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_half { height: 50vh; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_half .pxlr-heroslider-image-item { height: 50vh; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_half .pxlr-heroslider-image-item picture { height: 50vh; display: block; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_two-third { height: 75vh; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_two-third .pxlr-heroslider-image-item { height: 75vh; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component.acf-hero-height_two-third .pxlr-heroslider-image-item picture { height: 75vh; display: block; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item { /* Caption */ /* Image */ /* ACF Fields Blendmode colors dark */ /* ACF Fields Blendmode colors light */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper { position: relative; margin: 0 auto; display: block; height: 100%; z-index: 1; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item { position: absolute; padding: 20px; } @media (min-width: 768px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item { padding: 25px; } } @media (min-width: 1024px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item { padding: 30px; } } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-top .pxlr-heroslider-caption-item { top: 10%; transform: inherit; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-top .pxlr-heroslider-caption-item.pxlr-animate-in { animation: hero-caption-top-animate-in 0.5s linear; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-top .pxlr-heroslider-caption-item.pxlr-animate-out { animation: hero-caption-top-animate-out 0.5s linear; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-center .pxlr-heroslider-caption-item { top: 50%; transform: translateY(-50%); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-center .pxlr-heroslider-caption-item.pxlr-animate-in { animation: hero-caption-center-animate-in 0.5s linear; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-center .pxlr-heroslider-caption-item.pxlr-animate-out { animation: hero-caption-center-animate-out 0.5s linear; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-bottom .pxlr-heroslider-caption-item { bottom: 10%; top: inherit; transform: none; } @media (min-width: 1024px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-bottom .pxlr-heroslider-caption-item { bottom: 0%; } } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-bottom .pxlr-heroslider-caption-item.pxlr-animate-in { animation: hero-caption-bottom-animate-in 0.5s linear; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-vertical-bottom .pxlr-heroslider-caption-item.pxlr-animate-out { animation: hero-caption-bottom-animate-out 0.5s linear; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-horizontal-left .pxlr-heroslider-caption-item { left: 0; right: inherit; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.acf-hero-caption-position-horizontal-right .pxlr-heroslider-caption-item { right: 0; left: inherit; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.pxlr-animate-in { animation: hero-caption-animate-in 0.5s linear; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper.pxlr-animate-out { animation: hero-caption-animate-out 0.5s linear; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item { width: 100%; /* TinyMCE Heroslider Headline This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ /* Taxonomylist */ /* ACF Fields Caption colors */ /* ACF Fields Caption colors */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-heading { color: var(--color_white); font-family: "Playwrite DE Grund", sans-serif; font-weight: 800; text-transform: uppercase; margin: 0px 0px 15px 0px; letter-spacing: 0; font-size: 2.857rem; line-height: 3.214rem; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item p { margin-bottom: 2em; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-caption-button-wrapper { text-align: center; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-caption-button-wrapper a.pxlr-heroslider-caption-button { color: var(--color_primary); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; border-radius: 50px 50px; padding: 10px 20px 10px 25px; border: 2px solid var(--color_primary); background-color: var(--color_black); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-caption-button-wrapper a.pxlr-heroslider-caption-button.pxlr-button-icon-none { padding: 10px 20px 10px 20px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-caption-button-wrapper a.pxlr-heroslider-caption-button.pxlr-button-icon-none:before { display: none; left: 0px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-caption-button-wrapper a.pxlr-heroslider-caption-button:before { position: relative; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); top: 3px; left: -10px; display: inline-block; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-caption-button-wrapper a.pxlr-heroslider-caption-button:hover { color: var(--color_primary); background-color: var(--color_white); border: 1px solid var(--color_white); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-caption-button-wrapper a.pxlr-heroslider-caption-button:hover:before { color: var(--color_primary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item ul.pxlr-heroslider-taxonomy-list { list-style: none; margin: 0 0 15px 0; padding: 0; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item ul.pxlr-heroslider-taxonomy-list li { color: var(--color_primary); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; display: inline-block; padding-right: 10px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item ul.pxlr-heroslider-taxonomy-list li.pxlr-heroslider-taxonomy-focusword { color: var(--color_primary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item ul.pxlr-heroslider-taxonomy-list:before { position: relative; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); padding-right: 40px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light { color: var(--color_white); /* Taxonomylist overwrite icon */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light h1, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light h2, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light h3, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light h4, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light h5, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light h6, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light .pxlr-heroslider-heading { color: var(--color_white); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light a.pxlr-heroslider-caption-button { color: var(--color_primary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light a.pxlr-heroslider-caption-button:before { color: var(--color_primary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light a.pxlr-heroslider-caption-button:hover { color: var(--color_secondary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light a.pxlr-heroslider-caption-button:hover:before { color: var(--color_secondary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light ul.pxlr-heroslider-taxonomy-list:before { color: var(--color_white); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_light ul.pxlr-heroslider-taxonomy-list li.pxlr-heroslider-taxonomy-focusword { color: var(--color_white); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark { color: var(--color_primary); /* Taxonomylist overwrite icon */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark h1, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark h2, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark h3, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark h4, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark h5, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark h6, body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark .pxlr-heroslider-heading { color: var(--color_primary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark a.pxlr-heroslider-caption-button { color: var(--color_black); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark a.pxlr-heroslider-caption-button:before { color: var(--color_black); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark a.pxlr-heroslider-caption-button:hover { color: var(--color_primary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark a.pxlr-heroslider-caption-button:hover:before { color: var(--color_primary); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark ul.pxlr-heroslider-taxonomy-list:before { color: var(--color_black); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item.acf-hero-caption-color_dark ul.pxlr-heroslider-taxonomy-list li.pxlr-heroslider-taxonomy-focusword { color: var(--color_black); } @media (min-width: 768px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item { /* TinyMCE Heroslider Headline This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-heading { font-size: 4.357rem; line-height: 4.062rem; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item a.pxlr-heroslider-caption-button { padding: 10px 20px 10px 25px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item a.pxlr-heroslider-caption-button:before { background-size: 18px 18px; width: 18px; height: 18px; top: 3px; left: -10px; } } @media (min-width: 1024px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item { /* TinyMCE Heroslider Headline This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-heading { font-size: 4.357rem; line-height: 4.062rem; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item a.pxlr-heroslider-caption-button { padding: 10px 20px 10px 25px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item a.pxlr-heroslider-caption-button:before { background-size: 18px 18px; width: 18px; height: 18px; top: 3px; left: -10px; } } @media (min-width: 1290px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item { /* TinyMCE Heroslider Headline This feature will be add inside functions.php Functions: pxlr_add_mce_buttons_2() and pxlr_add_mce_before_init_insert_formats() */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item .pxlr-heroslider-heading { font-size: 5rem; line-height: 4.72rem; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item a.pxlr-heroslider-caption-button { padding: 10px 20px 10px 25px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-caption-wrapper .pxlr-heroslider-caption-item a.pxlr-heroslider-caption-button:before { background-size: 18px 18px; width: 18px; height: 18px; top: 3px; left: -10px; } } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-image-wrapper { position: relative; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-image-wrapper .pxlr-heroslider-image-item picture.acf-hero-branding-overlay-show:before { position: absolute; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_white); zoom: 1.5; right: -15%; opacity: 0.08; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-image-wrapper .pxlr-heroslider-image-item picture img { border-radius: 0px; height: 100vh; object-fit: cover; object-position: left top; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item .pxlr-heroslider-image-wrapper .pxlr-heroslider-image-item.pxlr-heroslider-image-item-effect-true img { -webkit-filter: blur(7px); /* Safari 6.0 - 9.0 */ filter: blur(7px); transform: scale(1.1); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_dark { /* ACF Fields Blendmode on wrapper for position top for dark*/ /* ACF Fields Blendmode on wrapper for position bottom for dark*/ /* ACF Fields Blendmode on wrapper -> item for position right for dark*/ /* ACF Fields Blendmode on wrapper -> item for position left for dark*/ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_dark.acf-hero-blendmode_position-top .pxlr-heroslider-image-wrapper:before { content: ""; position: absolute; top: 0; height: 20%; width: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_dark.acf-hero-blendmode_position-bottom .pxlr-heroslider-image-wrapper:after { content: ""; position: absolute; bottom: 0; height: 20%; width: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_dark.acf-hero-blendmode_position-right .pxlr-heroslider-image-wrapper .pxlr-heroslider-image-item:before { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 20%; background-image: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_dark.acf-hero-blendmode_position-left .pxlr-heroslider-image-wrapper .pxlr-heroslider-image-item:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 20%; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_light { /* ACF Fields Blendmode on wrapper for position top for dark*/ /* ACF Fields Blendmode on wrapper for position bottom for dark*/ /* ACF Fields Blendmode on wrapper -> item for position right for dark*/ /* ACF Fields Blendmode on wrapper -> item for position left for dark*/ } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_light.acf-hero-blendmode_position-top .pxlr-heroslider-image-wrapper:before { content: ""; position: absolute; top: 0; height: 20%; width: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_light.acf-hero-blendmode_position-bottom .pxlr-heroslider-image-wrapper:after { content: ""; position: absolute; bottom: 0; height: 20%; width: 120%; background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65)); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_light.acf-hero-blendmode_position-right .pxlr-heroslider-image-wrapper .pxlr-heroslider-image-item:before { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 20%; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .pxlr-heroslider-item.acf-hero-blendmode-color_light.acf-hero-blendmode_position-left .pxlr-heroslider-image-wrapper .pxlr-heroslider-image-item:after { content: ""; position: absolute; top: 0; left: 0; height: 120%; width: 20%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)); } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .slick-list .slick-track .slick-slide > div { height: 100%; } body .pxlr-heroslider-wrapper .pxlr-heroslider-component .slick-list .slick-track .slick-slide > div .pxlr-heroslider-item { height: 100%; } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination { display: none; position: absolute; z-index: 2; top: unset; bottom: 50px; right: 20px; } @media (min-width: 768px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination { right: 25px; } } @media (min-width: 1024px) { body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination { right: 30px; top: 50%; bottom: unset; transform: translateY(-50%); transform: rotate(90deg); } } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination ul.pxlr-heroslider-pagination-dots { position: relative; top: 50%; } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination ul.pxlr-heroslider-pagination-dots li { position: relative; display: inline-block; width: 10px; height: 10px; margin: 0 10px; padding: 0; cursor: pointer; /* Active with circle animation pagination */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination ul.pxlr-heroslider-pagination-dots li button { display: block; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination ul.pxlr-heroslider-pagination-dots li button:before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border: 1px solid var(--color_white); background-color: transparent; border-radius: 50%; } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination ul.pxlr-heroslider-pagination-dots li.slick-active { width: 10px; height: 10px; /* The svg Circle animation: https://codepen.io/rayqian/pen/qdVZgG */ } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination ul.pxlr-heroslider-pagination-dots li.slick-active button:before { width: 10px; height: 10px; border: 0; background-color: var(--color_white); } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination ul.pxlr-heroslider-pagination-dots li.slick-active .pxlr-heroslider-pagination-progress { position: absolute; left: -10px; top: -10px; } body .pxlr-heroslider-wrapper .pxlr-heroslider-pagination ul.pxlr-heroslider-pagination-dots li.slick-active .pxlr-heroslider-pagination-progress path { stroke-dasharray: 816; stroke-dashoffset: 0; animation: herosliderProgressDash 70s linear; } @keyframes herosliderProgressDash { from { stroke-dashoffset: 816; } to { stroke-dashoffset: 0; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: pxlr-events.scss Info: PXLR events Plugin styles */ /* ******************************************************************************** Archive cards and bars ******************************************************************************** */ .pxlr-events-archive { /* Cards */ /*Equalize height*/ height: 100%; /* Bar Wrapper */ } .pxlr-events-archive.pxlr-events-cards { position: relative; display: grid; grid-template-columns: 1fr; grid-gap: 20px; /* Cards Item */ /* Link To Archive Card */ /* Highlight */ } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-cards { grid-template-columns: 1fr 1fr; grid-gap: 25px; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-cards { grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; } } @media (min-width: 1920px) { .pxlr-events-archive.pxlr-events-cards { grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; } } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item { display: flex; flex-direction: column; grid-row-gap: 8px; background-color: var(--color_black); box-shadow: var(--color_shadow-primary-xlight); border: 1px solid var(--color_black); border-radius: 10px; width: 100%; height: 100%; color: var(--color_neutral-60); /* If date is in the past */ } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-image-wrapper { position: relative; border-radius: 10px 10px 0 0; width: 100%; height: 300px; overflow: hidden; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-image-wrapper a { position: relative; display: inline-block; height: 100%; width: 100%; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-image-wrapper img { object-fit: cover; width: 100%; height: 100%; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper { padding: 20px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper { display: flex; flex-direction: row; grid-column-gap: 8px; flex-wrap: wrap; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-from, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-to { display: flex; font-size: 0.7142857143rem; line-height: 130%; margin-bottom: 5px; color: var(--color_primary); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-to:before { position: relative; content: ""; font-family: "icons"; font-size: 0.6rem; color: var(--color_primary); padding-right: 10px; padding-left: 5px; } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-to:before { top: 0px; } } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-excerpt { font-size: 1rem; line-height: 150%; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-title { font-size: 1.1428571429rem; text-transform: uppercase; font-weight: 400; line-height: 140%; color: var(--color_body-text); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-title a { color: var(--color_body-text); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-title a:hover { color: var(--color_secondary); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-location-wrapper { display: flex; font-size: 0.5714285714rem; line-height: 130%; margin-bottom: 5px; color: var(--color_neutral-90); } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper { padding: 25px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-from, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-to { font-size: 0.625rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-excerpt { font-size: 0.875rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-title { font-size: 1rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-location-wrapper { font-size: 0.625rem; } } @media (min-width: 1024px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper { padding: 25px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-from, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-to { font-size: 0.8888888889rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-excerpt { font-size: 0.8888888889rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-title { font-size: 1rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-location-wrapper { font-size: 1rem; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper { padding: 30px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-wrapper, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper .pxlr-events-card-date-to { font-size: 1.1111111111rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-excerpt { font-size: 1.1111111111rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-title { font-size: 1.5555555556rem; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-location-wrapper { font-size: 1.1111111111rem; } } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions { display: flex; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .pxlr-events-card-action-readmore { font-size: 1.4285714286rem; padding: 10px; } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .pxlr-events-card-action-readmore { font-size: 1.5625rem; } } @media (min-width: 1024px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .pxlr-events-card-action-readmore { font-size: 1.9444444444rem; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .pxlr-events-card-action-readmore { font-size: 2.2222222222rem; } } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .wp-block-buttons { padding-top: 10px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 0.8571428571rem; padding: 10px; } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 1rem; padding: 10px; } } @media (min-width: 1024px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 1rem; padding: 10px; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 1.3888888889rem; padding: 15px; } } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item .pxlr-events-card-content-wrapper .pxlr-events-card-actions .wp-block-buttons:first-child { margin-right: 10px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover { background-color: var(--color_primary); box-shadow: var(--color_shadow-primary-light); border: 1px solid var(--color_midnight); background-color: var(--color_primary); cursor: pointer; z-index: 2; animation: zoomUp_Minimum 0.5s forwards; -webkit-animation: zoomUp_Minimum 0.5s forwards; -moz-animation: zoomUp_Minimum 0.5s forwards; -o-animation: zoomUp_Minimum 0.5s forwards; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper a, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-date-from, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-date-to, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-excerpt, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-title, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-location-wrapper { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper a:hover, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-date-wrapper:hover, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-date-from:hover, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-date-to:hover, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-excerpt:hover, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-title:hover, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item:hover .pxlr-events-card-content-wrapper .pxlr-events-card-location-wrapper:hover { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date { position: relative; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date .pxlr-events-card-image-wrapper img { filter: grayscale(1); opacity: 0.7; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date .pxlr-events-card-title, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date .pxlr-events-card-excerpt { color: var(--color_white); opacity: 0.2; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date .pxlr-events-card-date-wrapper .pxlr-events-card-date-from, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date .pxlr-events-card-date-wrapper .pxlr-events-card-date-to { color: var(--color_white); opacity: 0.2; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date .pxlr-events-card-date-wrapper .pxlr-events-card-past-date-badge { box-shadow: var(--color_shadow-primary-light); border: 1px solid var(--color_midnight); background-color: var(--color_white); color: var(--color_black); border-radius: 5px; padding: 3px 5px; font-size: 0.7142857143rem; line-height: initial; opacity: 0.2; position: relative; top: -7px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date .pxlr-events-card-content-wrapper .pxlr-events-card-actions .pxlr-events-card-action-readmore a { color: var(--color_white); opacity: 0.2; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date .pxlr-events-card-content-wrapper .pxlr-events-card-actions .pxlr-events-card-action-readmore a:hover { color: var(--color_primary); opacity: 1; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date:hover .pxlr-events-card-image-wrapper img { filter: grayscale(1); opacity: 1; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date:hover .pxlr-events-card-title, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date:hover .pxlr-events-card-excerpt { color: var(--color_white); opacity: 1; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date:hover .pxlr-events-card-date-wrapper .pxlr-events-card-date-from, .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date:hover .pxlr-events-card-date-wrapper .pxlr-events-card-date-to { color: var(--color_white); opacity: 1; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date:hover .pxlr-events-card-actions .pxlr-events-card-action-readmore a { color: var(--color_white); opacity: 1; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-item.pxlr-events-card-past-date:hover .pxlr-events-card-past-date-badge { opacity: 1; color: var(--color_primary); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink { display: flex; flex-direction: column; grid-row-gap: 8px; background-color: var(--color_black); box-shadow: var(--color_shadow-primary-xlight); border: 1px solid var(--color_black); border-radius: 10px; width: 100%; height: 100%; color: var(--color_neutral-60); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper { height: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-title { margin-bottom: 20px; font-size: 1.1428571429rem; text-transform: uppercase; font-weight: 400; line-height: 140%; color: var(--color_body-text); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-title a { color: var(--color_body-text); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-title a:hover { color: var(--color_secondary); } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper { padding: 25px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-title { font-size: 1rem; margin-bottom: 25px; } } @media (min-width: 1024px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper { padding: 25px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-title { font-size: 1rem; margin-bottom: 25px; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper { padding: 30px; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-title { font-size: 1.5555555556rem; margin-bottom: 30px; } } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-archivelink-actions .pxlr-events-card-archivelink-action { text-align: center; font-size: 1.4285714286rem; padding: 10px; } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-archivelink-actions .pxlr-events-card-archivelink-action { font-size: 1.5625rem; } } @media (min-width: 1024px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-archivelink-actions .pxlr-events-card-archivelink-action { font-size: 1.9444444444rem; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink .pxlr-events-card-archivelink-wrapper .pxlr-events-card-archivelink-actions .pxlr-events-card-archivelink-action { font-size: 2.2222222222rem; } } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink:hover { background-color: var(--color_primary); box-shadow: var(--color_shadow-primary-light); border: 1px solid var(--color_midnight); background-color: var(--color_primary); cursor: pointer; z-index: 2; animation: zoomUp_Minimum 0.5s forwards; -webkit-animation: zoomUp_Minimum 0.5s forwards; -moz-animation: zoomUp_Minimum 0.5s forwards; -o-animation: zoomUp_Minimum 0.5s forwards; } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink:hover .pxlr-events-card-archivelink-wrapper a { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards .pxlr-events-card-archivelink:hover .pxlr-events-card-archivelink-wrapper a:hover { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive { display: grid; grid-template-columns: 1fr; margin-bottom: 20px; } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive { margin-bottom: 20px; } } @media (min-width: 1024px) { .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive { margin-bottom: 25px; grid-template-columns: repeat(3, 1fr); /* jedes dritte Element ist 100%*/ } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive > :nth-child(3n) { grid-column: 1/-1; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive { margin-bottom: 30px; } } @media (min-width: 1920px) { .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive { margin-bottom: 30px; } } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive .pxlr-events-highlight-card-item { box-shadow: var(--color_shadow-secondary-light); background-color: var(--color_secondary); position: relative; } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive .pxlr-events-highlight-card-item .pxlr-events-card-date-wrapper .pxlr-events-card-date-from { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive .pxlr-events-highlight-card-item .pxlr-events-card-date-wrapper .pxlr-events-card-date-from a { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive .pxlr-events-highlight-card-item .pxlr-events-card-date-wrapper .pxlr-events-card-date-from a:hover { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive .pxlr-events-highlight-card-item:hover { background-color: var(--color_black); border: 1px solid var(--color_black); } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive .pxlr-events-highlight-card-item .pxlr-events-card-excerpt { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive .pxlr-events-highlight-card-item .pxlr-events-card-actions .pxlr-events-card-action-readmore a { color: var(--color_white); } .pxlr-events-archive.pxlr-events-cards.pxlr-events-highlight-archive .pxlr-events-highlight-card-item .pxlr-events-card-actions .pxlr-events-card-action-readmore a:hover { color: var(--color_secondary); } .pxlr-events-archive.pxlr-events-bars { position: relative; display: grid; grid-template-columns: 1fr; grid-gap: calc(20px / 2); /*Equalize height*/ /* Bar item */ } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-bars { grid-gap: calc(25px / 2); } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-bars { grid-gap: calc(30px / 2); } } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item { position: relative; display: block; background-color: var(--color_black); border-radius: 10px; padding: 25px 25px 25px 25px; margin-bottom: 15px; line-height: 1.4rem; } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item:hover { cursor: pointer; } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item .pxlr-events-bar-excerpt { display: none; } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr; padding: 17px 20px 17px 20px; } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item .pxlr-events-bar-excerpt { display: flex; flex-grow: 4; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item { line-height: inherit; display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr; padding: 20px 25px 20px 25px; } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item .pxlr-events-bar-excerpt { display: flex; flex-grow: 4; } } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item .pxlr-events-bar-actions { position: absolute; display: block; top: 50%; right: 20px; transform: translate(0, -50%); } @media (min-width: 768px) { .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item .pxlr-events-bar-actions { display: flex; flex-grow: 0; justify-content: end; } } @media (min-width: 1290px) { .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item .pxlr-events-bar-actions { display: flex; flex-grow: 0; justify-content: end; } } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item .pxlr-events-bar-actions .pxlr-events-bar-action-readmore { padding-left: 24px; padding-right: 24px; display: list-item; list-style: none; } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item .pxlr-events-bar-actions .pxlr-events-bar-action-readmore a:before { position: absolute; content: ""; font-family: "icons"; font-size: 1.5rem; color: var(--color_primary); top: 50%; transform: translateY(-50%); } .pxlr-events-archive.pxlr-events-bars .pxlr-events-bar-item:hover { background-color: var(--color_midnight); cursor: pointer; } /* ******************************************************************************** Single page ******************************************************************** ******************************************************************************** */ .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-title-wrapper { position: relative; z-index: 2; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-title-wrapper .pxlr-events-header-title { color: var(--color_white); position: relative; left: -0.2rem; } @media (min-width: 768px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-title-wrapper .pxlr-events-header-title { left: -0.3rem; } } @media (min-width: 1024px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-title-wrapper .pxlr-events-header-title { left: -0.3rem; } } @media (min-width: 1290px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-title-wrapper .pxlr-events-header-title { left: -0.7rem; } } @media (min-width: 1440px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-title-wrapper .pxlr-events-header-title { left: -1rem; } } @media (min-width: 1920px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-title-wrapper .pxlr-events-header-title { left: -1rem; } } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper { display: flex; flex-direction: column; } @media (min-width: 1024px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper { flex-direction: row; } } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper { display: flex; flex-direction: row; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item { position: relative; border-radius: 10px; width: 120px; height: 120px; overflow: hidden; margin-right: 20px; } @media (min-width: 1290px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item { border-radius: 20px; } } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item a { position: relative; display: inline-block; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item img { object-fit: contain; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item video { width: 120px; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item.media-icon-video:after, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item.media-icon-image:after { position: absolute; font-family: "icons"; color: var(--color_white-rgba-70); box-shadow: var(--color_shadow-medium); top: 15px; right: 15px; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item.media-icon-video:after { content: ""; font-size: 1.5em; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-media-wrapper .pxlr-events-media-item.media-icon-image:after { content: ""; font-size: 1.3em; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper { display: flex; flex-direction: column; grid-row-gap: 20px; margin-top: 20px; margin-bottom: 8px; color: var(--color_primary); } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date { display: flex; flex-direction: row; grid-column-gap: 8px; flex-wrap: wrap; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time { display: flex; flex-direction: row; grid-column-gap: 8px; flex-wrap: wrap; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to { font-size: 1.4285714286rem; font-weight: 400; } @media (min-width: 768px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to { font-size: 1.5625rem; } } @media (min-width: 1024px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to { font-size: 1.3888888889rem; } } @media (min-width: 1290px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to { font-size: 1.6666666667rem; } } @media (min-width: 1440px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to { font-size: 2.2222222222rem; } } @media (min-width: 1920px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to { font-size: 2.7777777778rem; } } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-to { line-height: initial; font-size: 0.7142857143rem; } @media (min-width: 768px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-to { font-size: 0.75rem; } } @media (min-width: 1024px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-to { font-size: 0.8333333333rem; } } @media (min-width: 1290px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-to { font-size: 0.9444444444rem; } } @media (min-width: 1440px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-to { font-size: 1.1111111111rem; } } @media (min-width: 1920px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-from, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-time-to { font-size: 1.6666666667rem; } } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to:before { position: relative; content: ""; font-family: "icons"; font-size: 0.6rem; color: var(--color_primary); padding-right: 7px; padding-left: 2px; top: -1px; } @media (min-width: 768px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to:before { top: -3px; } } @media (min-width: 1024px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to:before { top: -6px; } } @media (min-width: 1290px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-date .pxlr-events-header-meta-date-time .pxlr-events-date-to:before { padding-right: 17px; padding-left: 15px; top: -6px; font-size: 1rem; } } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-venue { display: flex; flex-direction: row; grid-column-gap: 8px; line-height: normal; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-venue a.pxlr-events-header-meta-venue-maplink:after { position: relative; content: ""; font-family: "icons"; font-size: 1rem; color: var(--color_primary); padding-left: 8px; } @media (min-width: 768px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-venue a.pxlr-events-header-meta-venue-maplink:after { font-size: 1.2rem; } } @media (min-width: 1024px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-venue a.pxlr-events-header-meta-venue-maplink:after { font-size: 1.4rem; } } @media (min-width: 1290px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-venue a.pxlr-events-header-meta-venue-maplink:after { font-size: 1.5rem; } } @media (min-width: 1440px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-venue a.pxlr-events-header-meta-venue-maplink:after { font-size: 1.5rem; } } @media (min-width: 1920px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-venue a.pxlr-events-header-meta-venue-maplink:after { font-size: 1.5rem; } } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-data-wrapper .pxlr-events-header-meta-wrapper .pxlr-events-header-meta-venue a.pxlr-events-header-meta-venue-maplink:hover:after { color: var(--color_secondary); } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper { margin-top: 25px; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul { display: inline-block; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li { list-style: none; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li:before { display: none; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item { display: inline-block; border-radius: 40px; border: 1px solid var(--color_black-rgba-40); background-color: var(--color_black-rgba-40); color: var(--color_primary); padding: calc(20px / 2.5) calc(20px / 1.5) calc(20px / 2.5) calc(20px / 1.5); margin-right: 10px; margin-bottom: 10px; font-size: 0.625rem; } @media (min-width: 768px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item { font-size: 0.6875rem; } } @media (min-width: 1024px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item { font-size: 0.6666666667rem; } } @media (min-width: 1290px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item { font-size: 0.7222222222rem; } } @media (min-width: 1440px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item { font-size: 0.7777777778rem; } } @media (min-width: 1920px) { .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item { font-size: 0.8333333333rem; } } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item.pxlr-events-header-ticket-tag-item, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item.pxlr-events-header-external-link-tag-item { border: 1px solid var(--color_primary); background-color: transparent; } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item.pxlr-events-header-ticket-tag-item a, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item.pxlr-events-header-external-link-tag-item a { color: var(--color_white); } .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item.pxlr-events-header-ticket-tag-item:hover, .pxlr-events .pxlr-events-header-wrapper .pxlr-events-header-genre-tags-wrapper ul.pxlr-events-header-genre-tag-list li.pxlr-events-header-genre-tag-item.pxlr-events-header-external-link-tag-item:hover { border: 1px solid var(--color_primary); background-color: var(--color_primary); } .pxlr-events .pxlr-events-media-wrapper { display: flex; flex-direction: row; margin-bottom: var(--spacer-s); } @media (min-width: 768px) { .pxlr-events .pxlr-events-media-wrapper { margin-bottom: var(--spacer-m); } } @media (min-width: 1290px) { .pxlr-events .pxlr-events-media-wrapper { margin-bottom: var(--spacer-m); } } .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item { position: relative; border-radius: 10px; width: 350px; height: 350px; overflow: hidden; margin-right: 20px; } @media (min-width: 1290px) { .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item { border-radius: 20px; } } .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item a { position: relative; display: inline-block; height: 100%; width: 100%; } .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item img { object-fit: cover; width: 100%; height: 100%; } .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item video { width: 350px; } .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item.media-icon-video:after, .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item.media-icon-image:after { position: absolute; font-family: "icons"; color: var(--color_white-rgba-70); box-shadow: var(--color_shadow-medium); top: 15px; right: 15px; } .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item.media-icon-video:after { content: ""; font-size: 1.5em; } .pxlr-events .pxlr-events-media-wrapper .pxlr-events-media-item.media-icon-image:after { content: ""; font-size: 1.3em; } .pxlr-events-article-wrapper .pxlr-events-article-fact-wrapper { background-color: var(--color_black); border-radius: 10px; padding: 20px; margin-top: var(--spacer-xs); margin-bottom: var(--spacer-s); } @media (min-width: 768px) { .pxlr-events-article-wrapper .pxlr-events-article-fact-wrapper { width: fit-content; display: flex; column-gap: 25px; padding: 20px; margin-bottom: var(--spacer-s); margin-top: inherit; } } @media (min-width: 1290px) { .pxlr-events-article-wrapper .pxlr-events-article-fact-wrapper { column-gap: 30px; padding: 20px; margin-bottom: var(--spacer-s); margin-top: inherit; } } .pxlr-events-article-wrapper .pxlr-events-article-fact-wrapper .pxlr-events-article-fact { padding: 0 0px 0 0; width: fit-content; display: flex; grid-template-columns: 1fr 1fr; grid-column: var(--spacer-xs); font-size: 1.1428571429rem; } @media (min-width: 1024px) { .pxlr-events-article-wrapper .pxlr-events-article-fact-wrapper .pxlr-events-article-fact { width: fit-content; display: flex; column-gap: var(--spacer-xs); font-size: 1rem; } } @media (min-width: 1290px) { .pxlr-events-article-wrapper .pxlr-events-article-fact-wrapper .pxlr-events-article-fact { width: fit-content; display: flex; column-gap: var(--spacer-xs); font-size: 1.1111111111rem; } } .pxlr-events-article-wrapper .pxlr-events-article-fact-wrapper .pxlr-events-article-fact:last-child { padding-right: 0; } .pxlr-events-article-wrapper.pxlr-display-as-sidebar { display: grid; grid-template-columns: 1fr; column-gap: 20px; } @media (min-width: 768px) { .pxlr-events-article-wrapper.pxlr-display-as-sidebar { grid-template-columns: 1fr; column-gap: 25px; } } @media (min-width: 1024px) { .pxlr-events-article-wrapper.pxlr-display-as-sidebar { grid-template-columns: 2fr 1fr; column-gap: 30px; } } .pxlr-events-archive-button_wrapper { margin-bottom: 20px; text-align: left; } .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all { display: inline-block; border-radius: 40px; border: 1px solid var(--color_neutral-rgba-30); background-color: var(--color_black); color: var(--color_neutral-rgba-30); padding: calc(20px / 3) calc(20px / 1.5) calc(20px / 3) calc(20px / 1.5); margin-right: 10px; margin-bottom: 10px; font-size: 0.625rem; } @media (min-width: 768px) { .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all { font-size: 0.6875rem; } } @media (min-width: 1024px) { .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all { font-size: 0.6666666667rem; } } @media (min-width: 1290px) { .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all { font-size: 0.7222222222rem; } } @media (min-width: 1440px) { .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all { font-size: 0.7777777778rem; } } @media (min-width: 1920px) { .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all { font-size: 0.8333333333rem; } } .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all a { color: var(--color_neutral-90); } .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all:hover { background-color: var(--color_primary); } .pxlr-events-archive-button_wrapper .pxlr-events-archive-button-show-all:hover a { color: var(--color_black); } /* Unboxed display mode Mixins only used for pxlr-events NOTE: This is placed inside 0-settings -> mixin.scss This is a defalt view (unboxed) without border */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: pxlr-artists.scss Info: PXLR artists Plugin styles */ /* Archive cards or bar */ .pxlr-artists-archive { height: 100%; } .pxlr-artists-archive.pxlr-artists-cards { position: relative; display: grid; grid-template-columns: 1fr; grid-gap: 20px; margin-bottom: calc(20px + 60px); } @media (min-width: 768px) { .pxlr-artists-archive.pxlr-artists-cards { grid-template-columns: 1fr 1fr; grid-gap: 25px; margin-bottom: calc(25px + 60px); } } @media (min-width: 1290px) { .pxlr-artists-archive.pxlr-artists-cards { grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; margin-bottom: calc(30px + 60px); } } @media (min-width: 1920px) { .pxlr-artists-archive.pxlr-artists-cards { grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; margin-bottom: calc(30px + 60px); } } /* Card item */ .pxlr-artists-card-item { display: flex; flex-direction: row; grid-row-gap: 8px; justify-content: space-between; align-items: center; background-color: var(--color_black); box-shadow: var(--color_shadow-primary-xlight); border: 1px solid var(--color_black); border-radius: 10px; width: 100%; height: 100%; color: var(--color_neutral-60); padding: 20px; } .pxlr-artists-card-item .pxlr-artists-card-title { font-size: 1.1428571429rem; text-transform: uppercase; font-weight: 400; line-height: 140%; color: var(--color_body-text); } .pxlr-artists-card-item .pxlr-artists-card-title a { color: var(--color_body-text); } .pxlr-artists-card-item .pxlr-artists-card-title a:hover { color: var(--color_secondary); } @media (min-width: 768px) { .pxlr-artists-card-item { padding: 25px; } } @media (min-width: 1024px) { .pxlr-artists-card-item { padding: 25px; } } @media (min-width: 1290px) { .pxlr-artists-card-item { padding: 30px; } } .pxlr-artists-card-item .pxlr-artists-card-actions { display: flex; } .pxlr-artists-card-item .pxlr-artists-card-actions .pxlr-artists-card-action-readmore { font-size: 1.4285714286rem; padding: 10px; } @media (min-width: 768px) { .pxlr-artists-card-item .pxlr-artists-card-actions .pxlr-artists-card-action-readmore { font-size: 1.5625rem; } } @media (min-width: 1024px) { .pxlr-artists-card-item .pxlr-artists-card-actions .pxlr-artists-card-action-readmore { font-size: 1.9444444444rem; } } @media (min-width: 1290px) { .pxlr-artists-card-item .pxlr-artists-card-actions .pxlr-artists-card-action-readmore { font-size: 2.2222222222rem; } } .pxlr-artists-card-item .pxlr-artists-card-actions .wp-block-buttons { padding-top: 10px; } .pxlr-artists-card-item .pxlr-artists-card-actions .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 0.8571428571rem; padding: 10px; } @media (min-width: 768px) { .pxlr-artists-card-item .pxlr-artists-card-actions .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 1rem; padding: 10px; } } @media (min-width: 1024px) { .pxlr-artists-card-item .pxlr-artists-card-actions .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 1rem; padding: 10px; } } @media (min-width: 1290px) { .pxlr-artists-card-item .pxlr-artists-card-actions .wp-block-buttons .wp-block-button .wp-block-button__link { font-size: 1.3888888889rem; padding: 15px; } } .pxlr-artists-card-item .pxlr-artists-card-actions .wp-block-buttons:first-child { margin-right: 10px; } .pxlr-artists-card-item:hover { background-color: var(--color_primary); box-shadow: var(--color_shadow-primary-light); border: 1px solid var(--color_midnight); background-color: var(--color_primary); cursor: pointer; z-index: 2; animation: zoomUp_Minimum 0.5s forwards; -webkit-animation: zoomUp_Minimum 0.5s forwards; -moz-animation: zoomUp_Minimum 0.5s forwards; -o-animation: zoomUp_Minimum 0.5s forwards; } .pxlr-artists-card-item:hover .pxlr-artists-card-action-readmore a { color: var(--color_white); } /* Single page */ body { /* * Remove padding-top for pages with no hero * We have to remove it because we need the space for the artist image * To get the space instead we set an marhin-top fo the #page id */ } body.single-pxlr-artists.pxlr-page-no-hero { padding-top: initial; } @media (min-width: 768px) { body.single-pxlr-artists.pxlr-page-no-hero { padding-top: initial; } } @media (min-width: 1024px) { body.single-pxlr-artists.pxlr-page-no-hero { padding-top: initial; } } @media (min-width: 1290px) { body.single-pxlr-artists.pxlr-page-no-hero { padding-top: initial; } } body.single-pxlr-artists #page.site .site-main { /*If has no thumbnail */ /*Has a thumbnail and overwrite above statements*/ } body.single-pxlr-artists #page.site .site-main .type-pxlr-artists { padding-top: 90px; } @media (min-width: 768px) { body.single-pxlr-artists #page.site .site-main .type-pxlr-artists { padding-top: 120px; } } @media (min-width: 1024px) { body.single-pxlr-artists #page.site .site-main .type-pxlr-artists { padding-top: 180px; } } @media (min-width: 1290px) { body.single-pxlr-artists #page.site .site-main .type-pxlr-artists { padding-top: 250px; } } body.single-pxlr-artists #page.site .site-main .has-post-thumbnail { padding-top: calc(225px); } @media (min-width: 768px) { body.single-pxlr-artists #page.site .site-main .has-post-thumbnail { padding-top: calc(204px); } } @media (min-width: 1024px) { body.single-pxlr-artists #page.site .site-main .has-post-thumbnail { padding-top: 180px; } } @media (min-width: 1290px) { body.single-pxlr-artists #page.site .site-main .has-post-thumbnail { padding-top: 250px; } } .pxlr-artists .pxlr-artists-header-wrapper { position: relative; } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-header-title-wrapper { position: relative; z-index: 2; } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-header-title-wrapper .pxlr-artists-header-title { color: var(--color_white); position: relative; left: -0.2rem; } @media (min-width: 768px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-header-title-wrapper .pxlr-artists-header-title { left: -0.3rem; } } @media (min-width: 1024px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-header-title-wrapper .pxlr-artists-header-title { left: -0.3rem; } } @media (min-width: 1290px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-header-title-wrapper .pxlr-artists-header-title { left: -0.7rem; } } @media (min-width: 1440px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-header-title-wrapper .pxlr-artists-header-title { left: -1rem; } } @media (min-width: 1920px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-header-title-wrapper .pxlr-artists-header-title { left: -1rem; } } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper { position: absolute; z-index: 1; right: inherit; left: 0; top: -55%; display: inline-block; } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper img { height: 150px; width: 150px; background-color: var(--color_black); border-radius: 50%; display: block; object-fit: cover; } @media (min-width: 768px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper { right: inherit; left: 0; top: -60%; } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper img { height: 200px; width: 200px; } } @media (min-width: 1024px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper { right: 15%; left: inherit; } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper img { height: 250px; width: 250px; } } @media (min-width: 1290px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper { right: 0; left: inherit; } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper img { height: 400px; width: 400px; } } @media (min-width: 1440px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper { right: 0; left: inherit; } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper img { height: 450px; width: 450px; } } @media (min-width: 1920px) { .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper { right: 0; left: inherit; } .pxlr-artists .pxlr-artists-header-wrapper .pxlr-artists-photo-wrapper img { height: 500px; width: 500px; } } .pxlr-artists .pxlr-artists-header-meta-wrapper { position: relative; z-index: 2; display: flex; flex-direction: row; grid-column-gap: 25px; margin-bottom: 8px; color: var(--color_primary); flex-wrap: wrap; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-meta-data { display: inline-block; margin-bottom: 5px; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-meta-data ul.pxlr-artists-header-meta-data-genre-tag-list { margin-bottom: inherit; line-height: inherit; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-meta-data ul.pxlr-artists-header-meta-data-genre-tag-list li { display: inline-block; list-style: none; padding-left: 0; padding-right: 0; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-meta-data ul.pxlr-artists-header-meta-data-genre-tag-list li:first-child { padding-right: 5px; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-meta-data ul.pxlr-artists-header-meta-data-genre-tag-list li:before { display: none; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-meta-data ul.pxlr-artists-header-meta-data-genre-tag-list li.pxlr-artists-header-genre-tag-title { list-style: none; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul { display: inline-block; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li { list-style: none; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li:before { display: none; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item { display: inline-block; border-radius: 40px; border: 1px solid var(--color_black); background-color: var(--color_black); color: var(--color_primary); padding: calc(20px / 2.5) calc(20px / 1.5) calc(20px / 2.5) calc(20px / 1.5); margin-right: 10px; margin-bottom: 10px; font-size: 0.625rem; } @media (min-width: 768px) { .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item { font-size: 0.6875rem; } } @media (min-width: 1024px) { .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item { font-size: 0.6666666667rem; } } @media (min-width: 1290px) { .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item { font-size: 0.7222222222rem; } } @media (min-width: 1440px) { .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item { font-size: 0.7777777778rem; } } @media (min-width: 1920px) { .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item { font-size: 0.8333333333rem; } } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item.pxlr-artists-header-ticket-tag-item, .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item.pxlr-artists-header-external-link-tag-item { border: 1px solid var(--color_primary); background-color: transparent; } .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item.pxlr-artists-header-ticket-tag-item a, .pxlr-artists .pxlr-artists-header-meta-wrapper .pxlr-artists-header-genre-tags-wrapper ul.pxlr-artists-header-genre-tag-list li.pxlr-artists-header-genre-tag-item.pxlr-artists-header-external-link-tag-item a { color: var(--color_primary); } .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services { display: inline-block; } .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services li { list-style: none; } .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services li:before { display: none; } .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services li.pxlr-artists-header-services-item { display: inline-block; border-radius: 40px; border: 1px solid var(--color_black); background-color: var(--color_black); color: var(--color_primary); padding: calc(20px / 2.5) calc(20px / 1.5) calc(20px / 2.5) calc(20px / 1.5); margin-right: 10px; margin-bottom: 10px; font-size: 0.625rem; } @media (min-width: 768px) { .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services li.pxlr-artists-header-services-item { font-size: 0.6875rem; } } @media (min-width: 1024px) { .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services li.pxlr-artists-header-services-item { font-size: 0.6666666667rem; } } @media (min-width: 1290px) { .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services li.pxlr-artists-header-services-item { font-size: 0.7222222222rem; } } @media (min-width: 1440px) { .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services li.pxlr-artists-header-services-item { font-size: 0.7777777778rem; } } @media (min-width: 1920px) { .pxlr-artists .pxlr-artists-header-services-wrapper ul.pxlr-artists-header-services li.pxlr-artists-header-services-item { font-size: 0.8333333333rem; } } .pxlr-artists .entry-content { display: flex; flex-direction: row; grid-column-gap: 20px; flex-wrap: nowrap; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: pxlr-woocommerce.scss Info: PXLR WOO Plugin styles */ /* General Woo */ .woocommerce .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; } /* Woo commerce Forms */ /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: pxlr-woocommerce.scss Info: PXLR WOO Plugin styles, this is a modified copy from woocommerce/assets/css/forms.scss */ /** * WooCommerce Forms */ .woocommerce { /** * Generic forms styles used in places such as my account and the shortcode based checkout. */ } .woocommerce form .form-row { padding: 3px; margin: 0 0 6px; } .woocommerce form .form-row * { font-size: inherit; } .woocommerce form .form-row [placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.5s 0.5s ease; opacity: 0; } .woocommerce form .form-row label { line-height: 2; } .woocommerce form .form-row label.hidden { visibility: hidden; } .woocommerce form .form-row label.inline { display: inline; } .woocommerce form .form-row .woocommerce-input-wrapper .description { background: #1e85be; color: #fff; border-radius: 3px; padding: 1em; margin: 0.5em 0 0; clear: both; display: none; position: relative; } .woocommerce form .form-row .woocommerce-input-wrapper .description a { color: #fff; text-decoration: underline; border: 0; box-shadow: none; } .woocommerce form .form-row .woocommerce-input-wrapper .description::before { left: 50%; top: 0%; margin-top: -4px; transform: translateX(-50%) rotate(180deg); content: ""; position: absolute; border-width: 4px 6px 0 6px; border-style: solid; border-color: #1e85be transparent transparent transparent; z-index: 100; display: block; } .woocommerce form .form-row .input-checkbox { display: inline; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select { font-family: inherit; font-weight: normal; letter-spacing: normal; padding: 0.5em; display: block; background-color: var(--color_white); border: 1px solid var(--color_white); border-radius: var(--wc-form-border-radius); color: var(color_black); box-sizing: border-box; width: 100%; margin: 0; line-height: normal; height: auto; } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus { border-color: currentColor; } .woocommerce form .form-row select { cursor: pointer; /* We hide the default chevron because it cannot be directly modified. Instead, we add a custom chevron using a background image. */ appearance: none; padding-right: 3em; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=); background-repeat: no-repeat; background-size: 16px; background-position: calc(100% - 0.5em) 50%; } .woocommerce form .form-row textarea { height: 4em; line-height: 1.5; box-shadow: none; } .woocommerce form .form-row .required { color: var(--wc-red); font-weight: 700; border: 0 !important; text-decoration: none; visibility: hidden; } .woocommerce form .form-row .optional { visibility: visible; } .woocommerce form .form-row.woocommerce-invalid label { color: var(--wc-red); } .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--wc-red); } .woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection { border-color: var(--wc-red); } .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select { border-color: var(--wc-green); } .woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection { border-color: var(--wc-green); } .woocommerce form .form-row ::-webkit-input-placeholder { line-height: normal; } .woocommerce form .form-row :-moz-placeholder { line-height: normal; } .woocommerce form .form-row :-ms-input-placeholder { line-height: normal; } .select2-container { width: 100%; } .select2-container * { font-size: inherit; } .select2-container .select2-selection--single { height: auto; } .select2-container .select2-selection--single .select2-selection__rendered { padding: 0.5em; line-height: normal; box-sizing: border-box; color: var(--wc-form-color-text, #444); font-weight: normal; } .select2-container .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container .select2-selection--single .select2-selection__arrow { position: absolute; top: 2px; right: 0.5em; height: 100%; width: 16px; } .select2-container .select2-selection--single .select2-selection__arrow b { border: none; display: block; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat; background-size: 16px; width: 16px; height: 16px; position: absolute; top: 50%; left: 0; margin: -8px 0 0; } .select2-container .select2-selection, .select2-container .select2-dropdown { background-color: var(--wc-form-color-background, #fff); border: var(--wc-form-border-width, 1px) solid var(--wc-form-border-color, #aaa); border-radius: var(--wc-form-border-radius, 4px); } .select2-container.select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container.select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__options * { font-size: inherit; } .select2-results__option { margin: 0; } .select2-results__option * { font-size: inherit; } /* My Product page */ /* My global overwrites */ .woocommerce form input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select, button, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { border-radius: 30px; background-color: var(--color_white); color: var(--color_black); font-size: 1rem; } @media (min-width: 412px) { .woocommerce form input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select, button, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { font-size: 1rem; } } @media (min-width: 768px) { .woocommerce form input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select, button, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { font-size: 1rem; } } @media (min-width: 1024px) { .woocommerce form input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select, button, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { font-size: 1rem; } } @media (min-width: 1290px) { .woocommerce form input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select, button, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { font-size: 1rem; } } @media (min-width: 1440px) { .woocommerce form input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select, button, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { font-size: 1rem; } } @media (min-width: 1920px) { .woocommerce form input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select, button, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { font-size: 1rem; } } @media (min-width: 2500px) { .woocommerce form input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select, button, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { font-size: 1rem; } } .woocommerce form button { font-size: 1.1428571429rem; } @media (min-width: 412px) { .woocommerce form button { font-size: 1.1428571429rem; } } @media (min-width: 768px) { .woocommerce form button { font-size: 1.125rem; } } @media (min-width: 1024px) { .woocommerce form button { font-size: 1.1666666667rem; } } @media (min-width: 1290px) { .woocommerce form button { font-size: 1.3888888889rem; } } @media (min-width: 1440px) { .woocommerce form button { font-size: 1.5555555556rem; } } @media (min-width: 1920px) { .woocommerce form button { font-size: 1.6666666667rem; } } @media (min-width: 2500px) { .woocommerce form button { font-size: 1.6666666667rem; } } .woocommerce form .form-row textarea { border-radius: 20px; } /* Product Listing page */ body.woocommerce.archive .site #primary #main { padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { body.woocommerce.archive .site #primary #main { padding-left: 25px; padding-right: 25px; } } @media (min-width: 1024px) { body.woocommerce.archive .site #primary #main { padding-left: 30px; padding-right: 30px; } } @media (min-width: 1290px) { body.woocommerce.archive .site #primary #main { padding-left: 60px; padding-right: 60px; } } body.woocommerce.archive .site #primary #main .woocommerce-breadcrumb { display: none !important; } body.woocommerce.archive .site #primary #main ul.products { display: grid; grid-template-columns: 1fr; column-gap: 15px; } @media (min-width: 768px) { body.woocommerce.archive .site #primary #main ul.products { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { body.woocommerce.archive .site #primary #main ul.products { grid-template-columns: 1fr 1fr 1fr; } } body.woocommerce.archive .site #primary #main ul.products::before { display: none; } body.woocommerce.archive .site #primary #main ul.products li:first { clear: inherit; } body.woocommerce.archive .site #primary #main ul.products li.product { background-color: var(--color_quantenary); overflow: hidden; border-radius: 20px; width: 100%; /* Start Eleminate - Overwrites */ float: none; margin: inherit; padding: inherit; position: inherit; margin-left: inherit; /* End Eleminate - Overwrites */ } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .woocommerce-loop-product__title { padding: 20px; font-size: 1.5em; } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .spswp_variations_form { padding: 0 20px; } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .price { font-size: 1.5em; padding: 20px; } @media (min-width: 1024px) { body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .woocommerce-loop-product__title { padding: 25px 25px 0 25px; } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .spswp_variations_form { padding: 0 25px; } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .price { padding: 25px; } } @media (min-width: 1290px) { body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .woocommerce-loop-product__title { padding: 30px 30px 0 30px; } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .spswp_variations_form { padding: 0 30px; } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .price { padding: 30px; } } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .spswp-shop-variations.variations .sp-smart-swatches-container { justify-content: left; margin: 10px 0; } body.woocommerce.archive .site #primary #main ul.products li.product .woocommerce-loop-product__link .spswp-shop-variations.variations .sp-smart-swatches-container .sp-smart-swatches-item.sp-smart-selected-swatch { border-color: var(--color_primary); background: var(--color_primary); } body.woocommerce.archive .site #primary #main ul.products li.product .add_to_cart_button { background-color: var(--color_primary); color: var(--color_white); border-radius: 10px; margin: 0 20px 20px 20px; padding: 20px; } @media (min-width: 1024px) { body.woocommerce.archive .site #primary #main ul.products li.product .add_to_cart_button { margin: 0 25px 25px 25px; padding: 25px; } } @media (min-width: 1290px) { body.woocommerce.archive .site #primary #main ul.products li.product .add_to_cart_button { margin: 0 30px 30px 30px; padding: 30px; } } /* Single product page */ body.woocommerce .woocommerce-notices-wrapper { position: absolute; top: 0; z-index: 9999; width: 100%; padding: 1.9rem; animation-name: pxlr_woo_toast_in_out; animation-duration: 5s; animation-timing-function: ease-in-out; top: -50px; opacity: 0; pointer-events: none; } body.woocommerce .woocommerce-notices-wrapper .woocommerce-message { border-top: 5px solid var(--color_primary); border-radius: 10px; background-color: var(--color_anthracite); box-shadow: -1px 1px 44px 1px rgba(0, 0, 0, 0.61); -webkit-box-shadow: -1px 1px 44px 1px rgba(0, 0, 0, 0.61); -moz-box-shadow: -1px 1px 44px 1px rgba(0, 0, 0, 0.61); outline: none; color: var(--color_white); padding: 3rem; margin: 0; box-shadow: var(--color_shadow-black-xlight); } body.woocommerce .woocommerce-notices-wrapper .woocommerce-message::before { content: ""; color: var(--color_primary); } body.woocommerce .woocommerce-notices-wrapper .woocommerce-message a.button { pointer-events: initial; background-color: var(--color_primary); color: var(--color_white); border: none; font-size: 0.8571428571rem; border-radius: 40px; padding: 10px 20px; text-transform: uppercase; font-weight: bold; float: none; margin-top: 20px; } body.woocommerce .woocommerce-notices-wrapper .woocommerce-message a.button:hover { background-color: var(--color_secondary); color: var(--color_white); } @media (min-width: 1024px) { body.woocommerce .woocommerce-notices-wrapper .woocommerce-message a.button { float: right; margin-top: 0px; } } body.woocommerce.product-template-default.single-product { padding-top: 0; } body.woocommerce.product-template-default.single-product #page.site .site-main { padding-top: 0; } body.woocommerce.product-template-default.single-product #page.site .site-main .woocommerce-breadcrumb { display: none; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2em; margin-bottom: 2rem; /*Lightbox integration */ /* show summary*/ } @media (min-width: 768px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper { flex-direction: row; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper > div { flex-basis: inherit; flex-grow: 0; } @media (min-width: 768px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper > div { flex-basis: 50%; flex-grow: 0; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .woocommerce-product-gallery { float: inherit; width: inherit; margin-bottom: 0; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__wrapper { height: 100%; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { height: 100%; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a { height: 100%; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a img { object-fit: cover; height: 100%; border-radius: 0 0 20px 20px; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .wcgs-woocommerce-product-gallery { height: auto; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .wcgs-woocommerce-product-gallery .wcgs-carousel { height: 100%; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .wcgs-woocommerce-product-gallery .wcgs-carousel .spswiper-wrapper { height: 100%; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .wcgs-woocommerce-product-gallery .wcgs-carousel .spswiper-wrapper .spswiper-slide .wcgs-slider-image { height: 100%; width: 100%; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .wcgs-woocommerce-product-gallery .wcgs-carousel .spswiper-wrapper .spswiper-slide .wcgs-slider-image img { object-fit: cover; height: 100%; width: 100%; border-radius: 0 0 20px 20px; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary { float: inherit; width: inherit; clear: none; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary { margin: 0 0 0; padding: 20px; } @media (min-width: 768px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary { margin: 4em 0 0; padding: 25px; } } @media (min-width: 1024px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary { margin: 3.7em 0 0; padding: 30px; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .product_title.entry-title { zoom: inherit; } @media (min-width: 768px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .product_title.entry-title { zoom: 0.75; } } @media (min-width: 1024px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .product_title.entry-title { zoom: 0.85; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .price { margin: 0; color: var(--color_secondary); font-size: 2rem; } @media (min-width: 768px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .price { font-size: 3rem; } } @media (min-width: 1024px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .price { font-size: 5rem; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form { display: flex; flex-direction: column; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations { width: auto; margin-bottom: 2em; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody tr, body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody th, body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody td { display: flex; gap: 1rem; align-items: center; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody tr .label, body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody th .label, body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody td .label { font-weight: 300; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody tr .value, body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody th .value, body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody td .value { display: flex; margin-right: 15px; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody tr .value .reset_variations, body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody th .value .reset_variations, body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations tbody td .value .reset_variations { padding-left: 0; white-space: nowrap; font-size: 0.63em; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select { font-family: inherit; font-weight: normal; letter-spacing: normal; font-size: 1.1428571429rem; padding: 0.7em 1em; padding-right: 50px; display: block; background-color: var(--color_white); border: 1px solid var(--color_white); color: var(--color_black); background-size: 30px; box-sizing: border-box; width: 100%; margin: 0; line-height: normal; height: auto; } @media (min-width: 412px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select { font-size: 1.1428571429rem; } } @media (min-width: 768px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select { font-size: 1.125rem; } } @media (min-width: 1024px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select { font-size: 1.1666666667rem; } } @media (min-width: 1290px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select { font-size: 1.3888888889rem; } } @media (min-width: 1440px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select { font-size: 1.5555555556rem; } } @media (min-width: 1920px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select { font-size: 1.6666666667rem; } } @media (min-width: 2500px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select { font-size: 1.6666666667rem; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .variations_form .variations select:focus { border-color: currentColor; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap { display: inline-block; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart { display: flex; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity { margin: 0; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input { border: 1px solid var(--color_neutral-80); color: var(--color_black); padding: 0.9em 0.5em 0.95em 1em; border-radius: 50px 0 0 50px; font-size: 1.1428571429rem; } @media (min-width: 412px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input { font-size: 1.1428571429rem; } } @media (min-width: 768px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input { font-size: 1.125rem; } } @media (min-width: 1024px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input { font-size: 1.1666666667rem; } } @media (min-width: 1290px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input { font-size: 1.3888888889rem; } } @media (min-width: 1440px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input { font-size: 1.5555555556rem; } } @media (min-width: 1920px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input { font-size: 1.6666666667rem; } } @media (min-width: 2500px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input { font-size: 1.6666666667rem; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart button { border-radius: 0 50px 50px 0; padding: 1em 1.5em 1em 1em; position: relative; top: -1px; font-size: 1.1428571429rem; } @media (min-width: 412px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart button { font-size: 1.1428571429rem; } } @media (min-width: 768px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart button { font-size: 1.125rem; } } @media (min-width: 1024px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart button { font-size: 1.1666666667rem; } } @media (min-width: 1290px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart button { font-size: 1.3888888889rem; } } @media (min-width: 1440px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart button { font-size: 1.5555555556rem; } } @media (min-width: 1920px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart button { font-size: 1.6666666667rem; } } @media (min-width: 2500px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .single_variation_wrap .woocommerce-variation-add-to-cart button { font-size: 1.6666666667rem; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .pxlr-woocommerce-single-product-summary-wrapper .summary.entry-summary .product_meta { display: none; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper { padding: 0; padding: 20px 0 0 0; } @media (min-width: 1024px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper { padding: 25px 0 0 0; } } @media (min-width: 1290px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper { padding: 30px 0 0 0; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper ul.tabs { margin-bottom: 0px; padding: 0; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper ul.tabs::before { position: absolute; content: " "; width: 100%; bottom: 0; left: 0; border-bottom: 0px; z-index: 1; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper ul.tabs li { border: 0px; background-color: var(--color_neutral-rgba-30); color: var(--color_neutral-rgba-70); display: inline-block; position: relative; z-index: 0; margin: 0 -5px 0 0; padding: 0 1em; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper ul.tabs li::before { display: none; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper ul.tabs li::after { display: none; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active { background: var(--color_neutral-rgba-30); color: var(--color_primary); z-index: 2; border-bottom-color: inherit; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper ul.tabs li:first-child { border-radius: 20px 0 0 0; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper ul.tabs li:last-child { border-radius: 0 20px 0 0; margin: 0; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel { border: 1px solid var(--color_neutral-rgba-30); border-radius: 0 20px 20px 20px; padding: 20px; } @media (min-width: 1024px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel { padding: 25px; } } @media (min-width: 1290px) { body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel { padding: 30px; } } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel h2 { display: none; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel .woocommerce-product-attributes, body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel .shop_attributes { border: 0; margin-bottom: 0; } body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel .woocommerce-product-attributes tbody tr, body.woocommerce.product-template-default.single-product #page.site .site-main .product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel .shop_attributes tbody tr { text-align: left; } body.woocommerce #coming-soon-footer-banner { position: fixed; display: flex; font-size: 13px; bottom: 0; line-height: 16px; align-items: center; width: 100%; min-height: 56px; padding: 16px; box-sizing: border-box; z-index: 100; border-top: 1px solid var(--color_black); background: var(--color_black); box-shadow: -1px -3px 44px -9px rgba(0, 0, 0, 0.2); -webkit-box-shadow: -1px -3px 44px -9px rgba(0, 0, 0, 0.2); -moz-box-shadow: -1px -3px 44px -9px rgba(0, 0, 0, 0.2); } body.woocommerce #coming-soon-footer-banner .coming-soon-footer-banner__content a { color: var(--color_primary); text-decoration: none; } body.woocommerce #coming-soon-footer-banner .coming-soon-footer-banner-dismiss { color: var(--color_primary); } /* Checkout */ body.woocommerce-checkout .wc-block-components-main .wc-block-components-form .wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button { border-radius: 50px; border: 1px solid var(--color_primary); padding: 1em 2.5em; } body.woocommerce-checkout .wc-block-components-main .wc-block-components-form .wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button:hover { border: 1px solid var(--color_secondary); } body.woocommerce-checkout .wc-block-components-main .wc-block-components-form .wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button svg { display: none; } body.woocommerce-checkout .wc-block-components-main .wc-block-components-form .wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row .wc-block-components-button { background-color: var(--color_primary); color: var(--color_white); font-size: 1.4rem; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary .wc-block-components-order-summary__content .wc-block-components-order-summary-item { border-bottom: 1px solid var(--color_neutral-rgba-30); padding-bottom: 20px; margin-bottom: 20px; } @media (min-width: 1024px) { body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary .wc-block-components-order-summary__content .wc-block-components-order-summary-item { padding-bottom: 25px; margin-bottom: 25px; } } @media (min-width: 1290px) { body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary .wc-block-components-order-summary__content .wc-block-components-order-summary-item { padding-bottom: 30px; margin-bottom: 30px; } } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary .wc-block-components-order-summary__content .wc-block-components-order-summary-item .wc-block-components-order-summary-item__description .wc-block-components-product-name { color: var(--color_primary); } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary .wc-block-components-order-summary__content .wc-block-components-order-summary-item .wc-block-components-order-summary-item__image .wc-block-components-order-summary-item__quantity { background: var(--color_primary); border: 0; box-shadow: none; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary .wc-block-components-order-summary__content .wc-block-components-order-summary-item .wc-block-components-order-summary-item__image .wc-block-components-order-summary-item__quantity span { font-size: 0.8em; color: var(--color_white); padding: 5px; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--color_primary); } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--color_primary); } /* Cart Floating Trigger */ #fkcart-floating-toggler .fkcart-item-count { padding: 13px 5px !important; border-radius: 100px !important; } /** * ********************************************************************* * Funnelkit Card - Plugin ********************************************* * The Problem is, when we add a product to card the opend overlay ***** * container will get an opacity: 0.6 as inline style, Just in this case * we have to overwrite this inline style with !important ************** * ********************************************************************* */ .fkcart-modal-container.fkcart-has-items.updating { opacity: 1 !important; } /* Cart page */ body.woocommerce-cart { /* Table */ /* table - sidebar */ } body.woocommerce-cart .wc-block-components-main table { border-collapse: collapse; } body.woocommerce-cart .wc-block-components-main table.wc-block-cart-items thead .wc-block-cart-items__header { font-size: 0.75em; } body.woocommerce-cart .wc-block-components-main table.wc-block-cart-items tbody .wc-block-cart-items__row { border-bottom: 1px solid var(--color_neutral-rgba-30); margin-bottom: 20px; } body.woocommerce-cart .wc-block-components-main table.wc-block-cart-items tbody .wc-block-cart-items__row .wc-block-cart-item__image { /*td*/ border-bottom: 1px solid var(--color_neutral-rgba-30); } body.woocommerce-cart .wc-block-components-main table.wc-block-cart-items tbody .wc-block-cart-items__row .wc-block-cart-item__image img { border-radius: 10px; } body.woocommerce-cart .wc-block-components-main table.wc-block-cart-items tbody .wc-block-cart-items__row .wc-block-cart-item__product { /*td*/ border-bottom: 1px solid var(--color_neutral-rgba-30); } body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block { border-bottom: none; margin-bottom: 16px; background-color: var(--color_white-rgba-10); border-radius: 20px; padding: 30px; } body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper .wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { margin-bottom: 20px; font-size: 1.25rem; } body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block input { border-radius: 20px; } body.woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button { background-color: var(--color_primary); color: var(--color_white); font-size: 1.4rem; border-radius: 20px; } body .wc-gzd-checkout .wc-block-components-order-summary.is-large, body .wc-gzd-checkout .wc-block-components-order-summary.is-large { background-color: transparent; } /* Germanized */ .wc-gzd-additional-info.wc-gzd-additional-info-loop.tax-info { margin: 0 30px; } .wc-gzd-additional-info.wc-gzd-additional-info-loop.shipping-costs-info { margin: 0 30px 30px 30px; } @keyframes pxlr_woo_toast_in_out { 0% { top: 50px; opacity: 0; } 10% { top: 0px; opacity: 1; } 90% { top: 0px; opacity: 1; } 100% { top: -50px; opacity: 0; } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: contactform7.scss Info: form builder */ .wpcf7 .hidden-fields-container { border: 0; } .wpcf7 .screen-reader-response { display: none; } .wpcf7 .wpcf7-form.invalid .wpcf7-not-valid-tip, .wpcf7 .wpcf7-form.invalid .wpcf7-response-output { font-size: 1rem; color: var(--color_primary); } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: complianz.scss Info: cookiebanner */ /* helpers*/ /* Theme Name: weiss-engineering Theme URI: https://www.weiss.ch Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: weiss-engineering File: animations.scss Desc: Keyframe Animations can be trigger from different elements via css */ /* Bounce Upward an element from his regular position upward Use this to trigger an element: animation: bounceUpward 2s infinite; -webkit-animation: bounceUpward 2s infinite; -moz-animation: bounceUpward 2s infinite; -o-animation: bounceUpward 2s infinite; */ @keyframes bounceUpward { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } /* Bounce Downward an element from his regular position upward */ @keyframes bounceDownward { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(30px); } 60% { transform: translateY(15px); } } /* Bounce Right an element from his regular position upward */ @keyframes bounceRight { 0%, 20%, 50%, 80%, 100% { transform: translateX(0); } 40% { transform: translateX(30px); } 60% { transform: translateX(15px); } } /* Bounce Left an element from his regular position upward */ @keyframes bounceLeft { 0%, 20%, 50%, 80%, 100% { transform: translateX(0); } 40% { transform: translateX(-30px); } 60% { transform: translateX(-15px); } } /* Bounce flow */ @keyframes bounceFlowRight { 100% { transform: translateX(0); } 40% { transform: translateX(15px); } 60% { transform: translateX(-15px); } 80% { transform: translateX(5px); } 99% { transform: translateX(0px); } } /* Zoom Up animation: zoomUp 2s infinite; -webkit-animation: zoomUp 2s infinite; -moz-animation: zoomUp 2s infinite; -o-animation: zoomUp 2s infinite; */ @keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } /* Zoom Up Minimum @link https://www.w3schools.com/cssref/css3_pr_animation.php animation: zoomUp_Minimum 2s forwards; -webkit-animation: zoomUp_Minimum 2s forwards; -moz-animation: zoomUp_Minimum 2s forwards; -o-animation: zoomUp_Minimum 2s forwards; */ @keyframes zoomUp_Minimum { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } /* Fade In use this to trigger in a class animation-name: fade-in; animation-fill-mode: both; animation-duration: .5s; */ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-in-fade-out { 0% { opacity: 0; } 35% { opacity: 0; } 50% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-in-and-show { 0% { opacity: 0; } 100% { opacity: 1; display: block; } } @keyframes fade-out-and-hide { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } /* Heroslider Caption - Animate in use this to trigger in a class animation-name: hero-caption-animate-in; animation-fill-mode: both; animation-duration: .5s; */ @keyframes hero-caption-top-animate-in { 0% { top: 20%; opacity: 0; } 100% { opacity: 1; top: 15%; } } @keyframes hero-caption-top-animate-out { 0% { opacity: 1; top: 15%; } 100% { opacity: 0; top: 20%; } } @keyframes hero-caption-center-animate-in { 0% { opacity: 0; transform: scale(1.5) translateY(-50%); } 100% { opacity: 1; transform: scale(1) translateY(-50%); } } @keyframes hero-caption-center-animate-out { 0% { opacity: 1; transform: scale(1) translateY(-50%); } 100% { opacity: 0; transform: scale(2) translateY(-50%); } } @keyframes hero-caption-bottom-animate-in { 0% { bottom: 5%; opacity: 0; } 100% { opacity: 1; bottom: 10%; } } @keyframes hero-caption-bottom-animate-out { 0% { opacity: 1; bottom: 10%; } 100% { opacity: 0; bottom: 15%; } } @keyframes hero-caption-animate-in { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes hero-caption-animate-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: infinite-scroll.scss Desc: infinite-scroll helpers */ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } .ctis-finished-notice.infinite-loader { width: 100%; text-align: left; } .ctis-finished-notice.infinite-loader.ctis-loader-elements .finish-text { color: var(--color_primary); font-size: 0.5rem; text-transform: uppercase; border-radius: 50px; border: 1px solid var(--color_neutral-rgba-50); padding: 2px 5px; line-height: initial; margin-bottom: 30px; } /* Theme Name: pxlr-cocoon Theme URI: https://pxlr-cocoon.px Author: Pierre Brost Author URI: http://www.pixelizer.de Version: 1.0.0 Text Domain: pxlr-cocoon File: helpers.scss Desc: diverse helper classes */ /* Experimental!!! Android & iphone address bar detection The height of an android addressbar is 56px @link https://dev.to/peiche/100vh-behavior-on-chrome-2hm8 Keep in mind to have add_filter body_class and browser, OS detection in function.php */ @supports (-webkit-appearance: none) { body.os-android .site .pxlr-heroslider-wrapper, body.iphone .site .pxlr-heroslider-wrapper { min-height: calc(100vh - 56px); } } /* Typo Highlightning */ .pxlr-typo-highlight-primary { color: var(--color_primary); } .pxlr-typo-highlight-black { color: var(--color_black); } .pxlr-typo-highlight-white { color: var(--color_white); } /* Hide Elements if needed */ @media (min-width: 320px) { .pxlr-hide-for-phone { display: none; } } .pxlr-show-for-phone { display: block; } @media (min-width: 320px) { .pxlr-show-for-phone { display: none; } } @media (min-width: 768px) { .pxlr-hide-for-tablet { display: none; } } .pxlr-show-for-tablet { display: block; } @media (min-width: 768px) { .pxlr-show-for-tablet { display: none; } } @media (min-width: 1024px) { .pxlr-hide-for-desktop { display: none; } } .pxlr-show-for-desktop { display: block; } @media (min-width: 1024px) { .pxlr-show-for-desktop { display: none; } } @media (min-width: 320px) { .pxlr-hide-for-mobile { display: none; } } @media (min-width: 768px) { .pxlr-hide-for-mobile { display: none; } } @media (min-width: 1024px) { .pxlr-hide-for-mobile { display: block; } } @media (min-width: 320px) { .pxlr-show-for-mobile { display: block; } } @media (min-width: 768px) { .pxlr-show-for-mobile { display: block; } } @media (min-width: 1024px) { .pxlr-show-for-mobile { display: none; } } /* Added no scrolling body tag from overlay nav js */ .pxlr-no-scrolling { overflow: hidden; } /* pages*/ /*# sourceMappingURL=app.css.map */