| 1 |
body.bkbg-template-canvas{margin:0;padding:0;background:#fff;overflow-x:clip} |
| 2 |
.bkbg-template-page{margin:0!important;width:100%;max-width:none!important;overflow-x:clip} |
| 3 |
/* Preserve vertical overflow of transformed footer sections; clip horizontal overflow at the canvas boundary. */ |
| 4 |
body.bkbg-template-canvas .bkbg-template-page{overflow:visible!important} |
| 5 |
.bkbg-template-page *, .bkbg-template-page *::before,.bkbg-template-page *::after{box-sizing:border-box} |
| 6 |
.bkbg-template-page .bkbg-tpl-element{margin-block-start:0;margin-block-end:0} |
| 7 |
.bkbg-template-page .bkbg-template-marquee-track{display:flex;flex-wrap:nowrap;width:max-content;animation:none} |
| 8 |
.bkbg-template-page .bkbg-template-marquee-track[data-pause="1"]:hover{animation-play-state:paused} |
| 9 |
@keyframes bkbg-template-marquee{to{transform:translateX(-50%)}} |
| 10 |
@media(prefers-reduced-motion:reduce){.bkbg-template-page .bkbg-template-marquee-track{animation:none}} |
| 11 |
/* InnerBlocks uses the layout's own wrapper; editor selection remains available. */ |
| 12 |
.editor-styles-wrapper .bkbg-template-page{font-family:Inter,sans-serif} |
| 13 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-element.block-editor-block-list__block{margin-top:0;margin-bottom:0;max-width:none} |
| 14 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-widget-wrap.block-editor-block-list__layout{display:flex;flex-wrap:wrap} |
| 15 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-container.block-editor-block-list__layout{display:flex} |
| 16 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-widget{cursor:text} |
| 17 |
.editor-styles-wrapper .bkbg-template-page .bkbg-template-marquee-track{animation:none} |
| 18 |
/* The canvas must not inherit the active theme's heading tracking. Template-specific rules remain more specific. */ |
| 19 |
.bkbg-template-page h1,.bkbg-template-page h2,.bkbg-template-page h3,.bkbg-template-page h4,.bkbg-template-page h5,.bkbg-template-page h6{letter-spacing:normal} |
| 20 |
/* Gutenberg's selection styles otherwise turn decorative absolute columns into normal-flow blocks. */ |
| 21 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-absolute{position:absolute!important;pointer-events:none} |
| 22 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-widget-image{pointer-events:none} |
| 23 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-widget-image img{pointer-events:auto;cursor:pointer} |
| 24 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-widget-wrap{pointer-events:none!important} |
| 25 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-widget:not(.bkbg-tpl-widget-image){pointer-events:auto!important} |
| 26 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-widget-image img{pointer-events:auto!important} |
| 27 |
|
| 28 |
.bkbg-template-page .bkbg-template-marquee-track[data-ready="1"]{animation:bkbg-template-marquee var(--bkbg-marquee-duration,40s) linear infinite} |
| 29 |
@media(prefers-reduced-motion:reduce){.bkbg-template-page .bkbg-template-marquee-track[data-ready="1"]{animation:none!important}} |
| 30 |
|
| 31 |
/* Template text keeps source wrapping instead of the active theme's balancing/pretty rules. */ |
| 32 |
[data-bkbg-template] :is(h1,h2,h3,h4,h5,h6){text-wrap:wrap;text-transform:none} |
| 33 |
[data-bkbg-template] p{text-wrap:wrap} |
| 34 |
|
| 35 |
/* Preserve the source Odometer's equal digit slots for every font. */ |
| 36 |
[data-bkbg-template] .bkbg-counter-digit{display:inline-block;width:var(--bkbg-digit-width,1ch);text-align:center;letter-spacing:normal} |
| 37 |
|
| 38 |
/* A carousel track must not enlarge a legacy column past its side margins. */ |
| 39 |
[data-bkbg-template] .bkbg-tpl-widget-wrap:has(>.bkbg-tpl-widget-image-carousel){min-width:0;width:calc(100% - (var(--e-column-margin-left,0px) + var(--e-column-margin-right,0px)))} |
| 40 |
/* The runtime used to inject these layers; their native equivalents preserve the design. */ |
| 41 |
[data-bkbg-template] .bkbg-template-background-slides{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} |
| 42 |
[data-bkbg-template] .bkbg-template-background-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--bkbg-slide-transition,500ms)} |
| 43 |
[data-bkbg-template] .bkbg-template-background-slide.is-active{opacity:1} |
| 44 |
[data-bkbg-template] .bkbg-template-background-slide>.bkbg-tpl-background-slideshow__slide__image{position:absolute;inset:0;background-size:cover;background-position:center} |
| 45 |
[data-bkbg-template] .bkbg-kenburns-in .is-active>.bkbg-tpl-background-slideshow__slide__image{animation:bkbg-template-kenburns-in var(--bkbg-slide-duration,5500ms) linear both} |
| 46 |
[data-bkbg-template] .bkbg-kenburns-out .is-active>.bkbg-tpl-background-slideshow__slide__image{animation:bkbg-template-kenburns-out var(--bkbg-slide-duration,5500ms) linear both} |
| 47 |
@keyframes bkbg-template-kenburns-in{from{transform:scale(1)}to{transform:scale(1.3)}} |
| 48 |
@keyframes bkbg-template-kenburns-out{from{transform:scale(1.3)}to{transform:scale(1)}} |
| 49 |
[data-bkbg-template] .bkbg-template-background-video{width:100%;height:100%;object-fit:cover;max-width:none} |
| 50 |
[data-bkbg-template] .bkbg-template-form-honeypot{position:absolute!important;left:-10000px!important;opacity:0!important;width:1px!important;height:1px!important;overflow:hidden!important} |
| 51 |
[data-bkbg-template] .bkbg-template-form-result{padding:12px;margin-top:12px;border:1px solid currentColor} |
| 52 |
|
| 53 |
/* Preserve directional background transitions from the source designs. */ |
| 54 |
[data-bkbg-template] [class*="bkbg-background-slide-"][data-bkbg-advancing] .bkbg-template-background-slide.is-active{z-index:1;animation-duration:var(--bkbg-slide-transition,500ms);animation-fill-mode:both;animation-timing-function:ease;transition:none} |
| 55 |
[data-bkbg-template] [class*="bkbg-background-slide-"] .bkbg-template-background-slide.is-leaving{opacity:1;animation-duration:var(--bkbg-slide-transition,500ms);animation-fill-mode:both;animation-timing-function:ease;transition:none} |
| 56 |
[data-bkbg-template] .bkbg-background-slide-right[data-bkbg-advancing] .is-active{animation-name:bkbg-background-enter-right} |
| 57 |
[data-bkbg-template] .bkbg-background-slide-right .is-leaving{animation-name:bkbg-background-exit-right} |
| 58 |
@keyframes bkbg-background-enter-right{from{transform:translateX(-100%)}to{transform:translateX(0)}} |
| 59 |
@keyframes bkbg-background-exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}} |
| 60 |
[data-bkbg-template] .bkbg-background-slide-left[data-bkbg-advancing] .is-active{animation-name:bkbg-background-enter-left} |
| 61 |
[data-bkbg-template] .bkbg-background-slide-left .is-leaving{animation-name:bkbg-background-exit-left} |
| 62 |
@keyframes bkbg-background-enter-left{from{transform:translateX(100%)}to{transform:translateX(0)}} |
| 63 |
@keyframes bkbg-background-exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}} |
| 64 |
[data-bkbg-template] .bkbg-background-slide-up[data-bkbg-advancing] .is-active{animation-name:bkbg-background-enter-up} |
| 65 |
[data-bkbg-template] .bkbg-background-slide-up .is-leaving{animation-name:bkbg-background-exit-up} |
| 66 |
@keyframes bkbg-background-enter-up{from{transform:translateY(100%)}to{transform:translateY(0)}} |
| 67 |
@keyframes bkbg-background-exit-up{from{transform:translateY(0)}to{transform:translateY(-100%)}} |
| 68 |
[data-bkbg-template] .bkbg-background-slide-down[data-bkbg-advancing] .is-active{animation-name:bkbg-background-enter-down} |
| 69 |
[data-bkbg-template] .bkbg-background-slide-down .is-leaving{animation-name:bkbg-background-exit-down} |
| 70 |
@keyframes bkbg-background-enter-down{from{transform:translateY(-100%)}to{transform:translateY(0)}} |
| 71 |
@keyframes bkbg-background-exit-down{from{transform:translateY(0)}to{transform:translateY(100%)}} |
| 72 |
@media(prefers-reduced-motion:reduce){[data-bkbg-template] .bkbg-template-background-slide{animation:none!important;transition:none!important}} |
| 73 |
|
| 74 |
/* Inline SVG baseline descent must not stretch a circular text badge into an oval. */ |
| 75 |
.bkbg-template-circular-text .e-text-path{line-height:0} |
| 76 |
.bkbg-template-circular-text .e-text-path svg{vertical-align:top} |
| 77 |
|
| 78 |
/* The source markup contains indentation. RichText's pre-wrap must not turn it |
| 79 |
into visible gaps or line breaks that do not exist on the frontend. */ |
| 80 |
.editor-styles-wrapper .bkbg-template-page [contenteditable="true"]{white-space:normal!important} |
| 81 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-invisible{visibility:visible!important;opacity:1!important} |
| 82 |
.editor-styles-wrapper .bkbg-template-page .bkbg-tpl-widget-text-editor .block-editor-rich-text__editable{margin:0} |
| 83 |
|
| 84 |
/* Imported canvas pages have their own padding. Theme padding changes their |
| 85 |
column widths and breakpoints inside the Gutenberg iframe. */ |
| 86 |
.editor-styles-wrapper .is-root-container:has(>.bkbg-template-page){padding-inline:0!important} |
| 87 |
|
